fix(gate-b): Svelte 5 event directives + label/input association for Select Photos

- Add id='photo-file-input' to file input and for='photo-file-input' to label
- Convert on:change → onchange, on:click → onclick, on:input → oninput
  (Svelte 5 requires native DOM event properties, not on: directives)
- Add Playwright BVT suite confirming file selection → mask step advance
- Test image: 100x60 PNG with green border (hue=66°) and white interior

frontend/test/bvt/playwright.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from '@playwright/test';
+import { fileURLToPath } from 'node:url';
+import * as path from 'node:path';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  testDir: '.',
+  fullyParallel: true,
+  forbidOnly: false,
+  retries: 1,
+  workers: 1,
+  use: {
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  webServer: {
+    command: 'npx sirv build --port 18080',
+    port: 18080,
+    reuseExistingServer: true,
+    cwd: path.resolve(__dirname, '../../'),
+    stdout: 'ignore',
+    stderr: 'pipe',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { browserName: 'chromium' },
+    },
+  ],
+});

frontend/test/bvt/select-photos.spec.ts

@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEST_IMAGE = resolve(__dirname, 'test-slab.png');
+
+test.describe('Select Photos BVT', () => {
+  test('label "Select Photos" has for attribute pointing to the file input id', async ({ page }) => {
+    await page.goto('/');
+
+    const label = page.locator('label.file-label');
+    await expect(label).toBeVisible();
+    const forAttr = await label.getAttribute('for');
+    expect(forAttr).toBe('photo-file-input');
+
+    const fileInput = page.locator('#photo-file-input');
+    await expect(fileInput).toHaveAttribute('type', 'file');
+  });
+
+  test('file selection advances to mask step', async ({ page }) => {
+    await page.goto('/');
+
+    const fileInput = page.locator('#photo-file-input');
+    await fileInput.setInputFiles(TEST_IMAGE);
+
+    // handleFiles runs → state.step becomes 'mask'
+    await expect(page.locator('h2')).toContainText('Mask & Knobs');
+    await expect(page.locator('.knobs-panel')).toBeVisible();
+
+    // Photo selector should have one option
+    const photoSelect = page.locator('.photo-selector select');
+    await expect(photoSelect).toBeVisible();
+    const optionCount = await photoSelect.locator('option').count();
+    expect(optionCount).toBe(1);
+  });
+
+  test('Process Photos button is enabled after file selection', async ({ page }) => {
+    await page.goto('/');
+
+    const fileInput = page.locator('#photo-file-input');
+    await fileInput.setInputFiles(TEST_IMAGE);
+
+    // After processing, the mask step appears with Confirm Mask button
+    await expect(page.locator('h2')).toContainText('Mask & Knobs');
+    const confirmBtn = page.locator('button:has-text("Confirm Mask")');
+    await expect(confirmBtn).toBeEnabled();
+  });
+
+  test('full flow: select photo → mask step appears → knobs can be adjusted', async ({ page }) => {
+    await page.goto('/');
+
+    const fileInput = page.locator('#photo-file-input');
+    await fileInput.setInputFiles(TEST_IMAGE);
+
+    // Should advance to mask step
+    await expect(page.locator('h2')).toContainText('Mask & Knobs');
+    await expect(page.locator('.knobs-panel')).toBeVisible();
+
+    // Verify knobs are present and adjustable
+    const sensitivitySlider = page.locator('input[type="range"]');
+    await expect(sensitivitySlider.first()).toBeVisible();
+  });
+});