Fix preview cropping: canvas fits within viewport, preserves aspect ratio

.preview was width:100% inside max-height:50vh container — tall photos were clipped. Now: max-width:100%, max-height:50vh, width/height auto, object-fit:contain, flex-centered in the wrap. Added e2e regression test: loads a photo, verifies the canvas bounding box fits the viewport, preserves aspect ratio, and is not clipped by the container.
Fix SSR browser gate: use browser from $app/environment
2026-09-14 11:51:44 -07:00 · 2026-09-14 11:49:01 -07:00 · 2026-09-14 11:45:12 -07:00 · 2026-09-14 11:23:00 -07:00 · 2026-09-14 07:44:49 -07:00 · 2026-09-14 07:41:51 -07:00
129 changed files with 5596 additions and 6198 deletions
@@ -1,10 +0,0 @@
-.git
-backend
-frontend/node_modules
-frontend/dist
-frontend/.svelte-kit
-**/.DS_Store
-*.md
-!deploy/README.md
-.audit
-docs/archive
@@ -35,11 +35,3 @@ images/

 # Logs
 *.log
-
-# Playwright e2e (#65) — keep README; ignore churn
-frontend/tests/e2e/artifacts/*.png
-frontend/tests/e2e/artifacts/run-log.txt
-frontend/tests/e2e/test-results/
-frontend/tests/e2e/playwright-report/
-frontend/blob-report/
-frontend/playwright/.cache/
@@ -0,0 +1,454 @@
+
+// this file is generated — do not edit it
+
+
+/// <reference types="@sveltejs/kit" />
+
+/**
+ * This module provides access to environment variables that are injected _statically_ into your bundle at build time and are limited to _private_ access.
+ * 
+ * |         | Runtime                                                                    | Build time                                                               |
+ * | ------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+ * | Private | [`$env/dynamic/private`](https://svelte.dev/docs/kit/$env-dynamic-private) | [`$env/static/private`](https://svelte.dev/docs/kit/$env-static-private) |
+ * | Public  | [`$env/dynamic/public`](https://svelte.dev/docs/kit/$env-dynamic-public)   | [`$env/static/public`](https://svelte.dev/docs/kit/$env-static-public)   |
+ * 
+ * Static environment variables are [loaded by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files) from `.env` files and `process.env` at build time and then statically injected into your bundle at build time, enabling optimisations like dead code elimination.
+ * 
+ * **_Private_ access:**
+ * 
+ * - This module cannot be imported into client-side code
+ * - This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](https://svelte.dev/docs/kit/configuration#env) (if configured)
+ * 
+ * For example, given the following build time environment:
+ * 
+ * ```env
+ * ENVIRONMENT=production
+ * PUBLIC_BASE_URL=http://site.com
+ * ```
+ * 
+ * With the default `publicPrefix` and `privatePrefix`:
+ * 
+ * ```ts
+ * import { ENVIRONMENT, PUBLIC_BASE_URL } from '$env/static/private';
+ * 
+ * console.log(ENVIRONMENT); // => "production"
+ * console.log(PUBLIC_BASE_URL); // => throws error during build
+ * ```
+ * 
+ * The above values will be the same _even if_ different values for `ENVIRONMENT` or `PUBLIC_BASE_URL` are set at runtime, as they are statically replaced in your code with their build time values.
+ */
+declare module '$env/static/private' {
+	export const LESSOPEN: string;
+	export const TMUX: string;
+	export const HERMES_DELEGATED_CHILD_CONTEXT: string;
+	export const timezone: string;
+	export const CUDACXX: string;
+	export const BROWSERBASE_PROXIES: string;
+	export const HERMES_RESTART_DRAIN_TIMEOUT: string;
+	export const _HERMES_GATEWAY: string;
+	export const AI_AGENT: string;
+	export const USER: string;
+	export const SSH_CLIENT: string;
+	export const npm_config_user_agent: string;
+	export const TERMINAL_CONTAINER_CPU: string;
+	export const AGENT_BROWSER_EXECUTABLE_PATH: string;
+	export const TERMINAL_DOCKER_ENV: string;
+	export const TERMINAL_CWD: string;
+	export const HERMES_REAL_HOME: string;
+	export const XDG_SESSION_TYPE: string;
+	export const npm_node_execpath: string;
+	export const SHLVL: string;
+	export const HERMES_PROFILE: string;
+	export const npm_config_noproxy: string;
+	export const HOME: string;
+	export const OLDPWD: string;
+	export const TERMINAL_DOCKER_FORWARD_ENV: string;
+	export const TERM_PROGRAM_VERSION: string;
+	export const BROWSER_SESSION_TIMEOUT: string;
+	export const HERMES_KANBAN_BOARD: string;
+	export const SSH_TTY: string;
+	export const HERMES_HOME: string;
+	export const npm_package_json: string;
+	export const TERMINAL_DOCKER_EXTRA_ARGS: string;
+	export const HF_HUB_DISABLE_XET: string;
+	export const IM_CONFIG_ENTRY: string;
+	export const TERMINAL_DOCKER_IMAGE: string;
+	export const PAGER: string;
+	export const TERMINAL_DOCKER_MOUNT_CWD_TO_WORKSPACE: string;
+	export const TERMINAL_CONTAINER_MEMORY: string;
+	export const SSL_CERT_FILE: string;
+	export const TERMINAL_CONTAINER_PERSISTENT: string;
+	export const npm_config_userconfig: string;
+	export const npm_config_local_prefix: string;
+	export const HERMES_TURN_LEASE_TIMEOUT: string;
+	export const HERMES_MEDIA_DELIVERY_STRICT: string;
+	export const TERMINAL_MODAL_IMAGE: string;
+	export const DBUS_SESSION_BUS_ADDRESS: string;
+	export const COLORTERM: string;
+	export const TERMINAL_DOCKER_NETWORK: string;
+	export const file_read_max_chars: string;
+	export const COLOR: string;
+	export const DEBUGINFOD_URLS: string;
+	export const TERMINAL_DOCKER_VOLUMES: string;
+	export const TERMINAL_ENV: string;
+	export const TERMINAL_VERCEL_RUNTIME: string;
+	export const LOGNAME: string;
+	export const HERMES_KANBAN_DB: string;
+	export const IMAGE_TOOLS_DEBUG: string;
+	export const _: string;
+	export const npm_config_prefix: string;
+	export const npm_config_npm_version: string;
+	export const group_sessions_per_user: string;
+	export const HERMES_KANBAN_WORKSPACES_ROOT: string;
+	export const HERMES_SINGLE_QUERY_SESSION: string;
+	export const XDG_SESSION_CLASS: string;
+	export const BROWSERBASE_ADVANCED_STEALTH: string;
+	export const paste_collapse_threshold: string;
+	export const TERM: string;
+	export const TERMINAL_DAYTONA_IMAGE: string;
+	export const XDG_SESSION_ID: string;
+	export const npm_config_cache: string;
+	export const TERMINAL_TEMP_DIR: string;
+	export const TERMINAL_LIFETIME_SECONDS: string;
+	export const TERMINAL_TIMEOUT: string;
+	export const HERMES_GATEWAY_BUSY_INPUT_MODE: string;
+	export const paste_collapse_char_threshold: string;
+	export const TERMINAL_DOCKER_SHARED_CONTAINER_KEY: string;
+	export const npm_config_node_gyp: string;
+	export const PATH: string;
+	export const HERMES_AGENT_TIMEOUT: string;
+	export const NODE: string;
+	export const TERMINAL_DOCKER_SHM_SIZE: string;
+	export const HERMES_KANBAN_WORKSPACE: string;
+	export const XDG_RUNTIME_DIR: string;
+	export const TERMINAL_PERSISTENT_SHELL: string;
+	export const LANG: string;
+	export const HERMES_QUIET: string;
+	export const MOA_TOOLS_DEBUG: string;
+	export const HERMES_MEDIA_TRUST_RECENT_FILES: string;
+	export const LS_COLORS: string;
+	export const HERMES_MEDIA_TRUST_RECENT_SECONDS: string;
+	export const HERMES_MAX_ITERATIONS: string;
+	export const TERM_PROGRAM: string;
+	export const npm_lifecycle_script: string;
+	export const HERMES_SESSION_ID: string;
+	export const HERMES_AGENT_TIMEOUT_WARNING: string;
+	export const prefill_messages_file: string;
+	export const SHELL: string;
+	export const HERMES_AGENT_NOTIFY_INTERVAL: string;
+	export const TERMINAL_DEGRADED_MODE: string;
+	export const TERMINAL_MODAL_MODE: string;
+	export const npm_lifecycle_event: string;
+	export const WEB_TOOLS_DEBUG: string;
+	export const VISION_TOOLS_DEBUG: string;
+	export const LESSCLOSE: string;
+	export const TERMINAL_CONTAINER_DISK: string;
+	export const TERMINAL_DOCKER_RUN_AS_HOST_USER: string;
+	export const GIT_PAGER: string;
+	export const paste_collapse_threshold_fallback: string;
+	export const npm_config_globalconfig: string;
+	export const npm_config_init_module: string;
+	export const PWD: string;
+	export const HERMES_INTERACTIVE: string;
+	export const _config_version: string;
+	export const HERMES_AUTO_CONTINUE_FRESHNESS: string;
+	export const npm_execpath: string;
+	export const SSH_CONNECTION: string;
+	export const XDG_DATA_DIRS: string;
+	export const npm_config_global_prefix: string;
+	export const hooks_auto_accept: string;
+	export const npm_command: string;
+	export const TMUX_PLUGIN_MANAGER_PATH: string;
+	export const BROWSER_INACTIVITY_TIMEOUT: string;
+	export const HERMES_REDACT_SECRETS: string;
+	export const HERMES_CUSTOM_192_168_1_203_8084_API_KEY: string;
+	export const TERMINAL_SINGULARITY_IMAGE: string;
+	export const TMUX_PANE: string;
+	export const TERMINAL_HOME_MODE: string;
+	export const TERMINAL_DOCKER_SNAP_COMPAT: string;
+	export const HERMES_AGENT: string;
+	export const HERMES_SESSION_SOURCE: string;
+	export const INIT_CWD: string;
+	export const EDITOR: string;
+	export const TEST: string;
+	export const VITEST: string;
+	export const NODE_ENV: string;
+}
+
+/**
+ * This module provides access to environment variables that are injected _statically_ into your bundle at build time and are _publicly_ accessible.
+ * 
+ * |         | Runtime                                                                    | Build time                                                               |
+ * | ------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+ * | Private | [`$env/dynamic/private`](https://svelte.dev/docs/kit/$env-dynamic-private) | [`$env/static/private`](https://svelte.dev/docs/kit/$env-static-private) |
+ * | Public  | [`$env/dynamic/public`](https://svelte.dev/docs/kit/$env-dynamic-public)   | [`$env/static/public`](https://svelte.dev/docs/kit/$env-static-public)   |
+ * 
+ * Static environment variables are [loaded by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files) from `.env` files and `process.env` at build time and then statically injected into your bundle at build time, enabling optimisations like dead code elimination.
+ * 
+ * **_Public_ access:**
+ * 
+ * - This module _can_ be imported into client-side code
+ * - **Only** variables that begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) (which defaults to `PUBLIC_`) are included
+ * 
+ * For example, given the following build time environment:
+ * 
+ * ```env
+ * ENVIRONMENT=production
+ * PUBLIC_BASE_URL=http://site.com
+ * ```
+ * 
+ * With the default `publicPrefix` and `privatePrefix`:
+ * 
+ * ```ts
+ * import { ENVIRONMENT, PUBLIC_BASE_URL } from '$env/static/public';
+ * 
+ * console.log(ENVIRONMENT); // => throws error during build
+ * console.log(PUBLIC_BASE_URL); // => "http://site.com"
+ * ```
+ * 
+ * The above values will be the same _even if_ different values for `ENVIRONMENT` or `PUBLIC_BASE_URL` are set at runtime, as they are statically replaced in your code with their build time values.
+ */
+declare module '$env/static/public' {
+	
+}
+
+/**
+ * This module provides access to environment variables set _dynamically_ at runtime and that are limited to _private_ access.
+ * 
+ * |         | Runtime                                                                    | Build time                                                               |
+ * | ------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+ * | Private | [`$env/dynamic/private`](https://svelte.dev/docs/kit/$env-dynamic-private) | [`$env/static/private`](https://svelte.dev/docs/kit/$env-static-private) |
+ * | Public  | [`$env/dynamic/public`](https://svelte.dev/docs/kit/$env-dynamic-public)   | [`$env/static/public`](https://svelte.dev/docs/kit/$env-static-public)   |
+ * 
+ * Dynamic environment variables are defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/main/packages/adapter-node) (or running [`vite preview`](https://svelte.dev/docs/kit/cli)), this is equivalent to `process.env`.
+ * 
+ * **_Private_ access:**
+ * 
+ * - This module cannot be imported into client-side code
+ * - This module includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](https://svelte.dev/docs/kit/configuration#env) (if configured)
+ * 
+ * > [!NOTE] In `dev`, `$env/dynamic` includes environment variables from `.env`. In `prod`, this behavior will depend on your adapter.
+ * 
+ * > [!NOTE] To get correct types, environment variables referenced in your code should be declared (for example in an `.env` file), even if they don't have a value until the app is deployed:
+ * >
+ * > ```env
+ * > MY_FEATURE_FLAG=
+ * > ```
+ * >
+ * > You can override `.env` values from the command line like so:
+ * >
+ * > ```sh
+ * > MY_FEATURE_FLAG="enabled" npm run dev
+ * > ```
+ * 
+ * For example, given the following runtime environment:
+ * 
+ * ```env
+ * ENVIRONMENT=production
+ * PUBLIC_BASE_URL=http://site.com
+ * ```
+ * 
+ * With the default `publicPrefix` and `privatePrefix`:
+ * 
+ * ```ts
+ * import { env } from '$env/dynamic/private';
+ * 
+ * console.log(env.ENVIRONMENT); // => "production"
+ * console.log(env.PUBLIC_BASE_URL); // => undefined
+ * ```
+ */
+declare module '$env/dynamic/private' {
+	export const env: {
+		LESSOPEN: string;
+		TMUX: string;
+		HERMES_DELEGATED_CHILD_CONTEXT: string;
+		timezone: string;
+		CUDACXX: string;
+		BROWSERBASE_PROXIES: string;
+		HERMES_RESTART_DRAIN_TIMEOUT: string;
+		_HERMES_GATEWAY: string;
+		AI_AGENT: string;
+		USER: string;
+		SSH_CLIENT: string;
+		npm_config_user_agent: string;
+		TERMINAL_CONTAINER_CPU: string;
+		AGENT_BROWSER_EXECUTABLE_PATH: string;
+		TERMINAL_DOCKER_ENV: string;
+		TERMINAL_CWD: string;
+		HERMES_REAL_HOME: string;
+		XDG_SESSION_TYPE: string;
+		npm_node_execpath: string;
+		SHLVL: string;
+		HERMES_PROFILE: string;
+		npm_config_noproxy: string;
+		HOME: string;
+		OLDPWD: string;
+		TERMINAL_DOCKER_FORWARD_ENV: string;
+		TERM_PROGRAM_VERSION: string;
+		BROWSER_SESSION_TIMEOUT: string;
+		HERMES_KANBAN_BOARD: string;
+		SSH_TTY: string;
+		HERMES_HOME: string;
+		npm_package_json: string;
+		TERMINAL_DOCKER_EXTRA_ARGS: string;
+		HF_HUB_DISABLE_XET: string;
+		IM_CONFIG_ENTRY: string;
+		TERMINAL_DOCKER_IMAGE: string;
+		PAGER: string;
+		TERMINAL_DOCKER_MOUNT_CWD_TO_WORKSPACE: string;
+		TERMINAL_CONTAINER_MEMORY: string;
+		SSL_CERT_FILE: string;
+		TERMINAL_CONTAINER_PERSISTENT: string;
+		npm_config_userconfig: string;
+		npm_config_local_prefix: string;
+		HERMES_TURN_LEASE_TIMEOUT: string;
+		HERMES_MEDIA_DELIVERY_STRICT: string;
+		TERMINAL_MODAL_IMAGE: string;
+		DBUS_SESSION_BUS_ADDRESS: string;
+		COLORTERM: string;
+		TERMINAL_DOCKER_NETWORK: string;
+		file_read_max_chars: string;
+		COLOR: string;
+		DEBUGINFOD_URLS: string;
+		TERMINAL_DOCKER_VOLUMES: string;
+		TERMINAL_ENV: string;
+		TERMINAL_VERCEL_RUNTIME: string;
+		LOGNAME: string;
+		HERMES_KANBAN_DB: string;
+		IMAGE_TOOLS_DEBUG: string;
+		_: string;
+		npm_config_prefix: string;
+		npm_config_npm_version: string;
+		group_sessions_per_user: string;
+		HERMES_KANBAN_WORKSPACES_ROOT: string;
+		HERMES_SINGLE_QUERY_SESSION: string;
+		XDG_SESSION_CLASS: string;
+		BROWSERBASE_ADVANCED_STEALTH: string;
+		paste_collapse_threshold: string;
+		TERM: string;
+		TERMINAL_DAYTONA_IMAGE: string;
+		XDG_SESSION_ID: string;
+		npm_config_cache: string;
+		TERMINAL_TEMP_DIR: string;
+		TERMINAL_LIFETIME_SECONDS: string;
+		TERMINAL_TIMEOUT: string;
+		HERMES_GATEWAY_BUSY_INPUT_MODE: string;
+		paste_collapse_char_threshold: string;
+		TERMINAL_DOCKER_SHARED_CONTAINER_KEY: string;
+		npm_config_node_gyp: string;
+		PATH: string;
+		HERMES_AGENT_TIMEOUT: string;
+		NODE: string;
+		TERMINAL_DOCKER_SHM_SIZE: string;
+		HERMES_KANBAN_WORKSPACE: string;
+		XDG_RUNTIME_DIR: string;
+		TERMINAL_PERSISTENT_SHELL: string;
+		LANG: string;
+		HERMES_QUIET: string;
+		MOA_TOOLS_DEBUG: string;
+		HERMES_MEDIA_TRUST_RECENT_FILES: string;
+		LS_COLORS: string;
+		HERMES_MEDIA_TRUST_RECENT_SECONDS: string;
+		HERMES_MAX_ITERATIONS: string;
+		TERM_PROGRAM: string;
+		npm_lifecycle_script: string;
+		HERMES_SESSION_ID: string;
+		HERMES_AGENT_TIMEOUT_WARNING: string;
+		prefill_messages_file: string;
+		SHELL: string;
+		HERMES_AGENT_NOTIFY_INTERVAL: string;
+		TERMINAL_DEGRADED_MODE: string;
+		TERMINAL_MODAL_MODE: string;
+		npm_lifecycle_event: string;
+		WEB_TOOLS_DEBUG: string;
+		VISION_TOOLS_DEBUG: string;
+		LESSCLOSE: string;
+		TERMINAL_CONTAINER_DISK: string;
+		TERMINAL_DOCKER_RUN_AS_HOST_USER: string;
+		GIT_PAGER: string;
+		paste_collapse_threshold_fallback: string;
+		npm_config_globalconfig: string;
+		npm_config_init_module: string;
+		PWD: string;
+		HERMES_INTERACTIVE: string;
+		_config_version: string;
+		HERMES_AUTO_CONTINUE_FRESHNESS: string;
+		npm_execpath: string;
+		SSH_CONNECTION: string;
+		XDG_DATA_DIRS: string;
+		npm_config_global_prefix: string;
+		hooks_auto_accept: string;
+		npm_command: string;
+		TMUX_PLUGIN_MANAGER_PATH: string;
+		BROWSER_INACTIVITY_TIMEOUT: string;
+		HERMES_REDACT_SECRETS: string;
+		HERMES_CUSTOM_192_168_1_203_8084_API_KEY: string;
+		TERMINAL_SINGULARITY_IMAGE: string;
+		TMUX_PANE: string;
+		TERMINAL_HOME_MODE: string;
+		TERMINAL_DOCKER_SNAP_COMPAT: string;
+		HERMES_AGENT: string;
+		HERMES_SESSION_SOURCE: string;
+		INIT_CWD: string;
+		EDITOR: string;
+		TEST: string;
+		VITEST: string;
+		NODE_ENV: string;
+		[key: `PUBLIC_${string}`]: undefined;
+		[key: `${string}`]: string | undefined;
+	}
+}
+
+/**
+ * This module provides access to environment variables set _dynamically_ at runtime and that are _publicly_ accessible.
+ * 
+ * |         | Runtime                                                                    | Build time                                                               |
+ * | ------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+ * | Private | [`$env/dynamic/private`](https://svelte.dev/docs/kit/$env-dynamic-private) | [`$env/static/private`](https://svelte.dev/docs/kit/$env-static-private) |
+ * | Public  | [`$env/dynamic/public`](https://svelte.dev/docs/kit/$env-dynamic-public)   | [`$env/static/public`](https://svelte.dev/docs/kit/$env-static-public)   |
+ * 
+ * Dynamic environment variables are defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/main/packages/adapter-node) (or running [`vite preview`](https://svelte.dev/docs/kit/cli)), this is equivalent to `process.env`.
+ * 
+ * **_Public_ access:**
+ * 
+ * - This module _can_ be imported into client-side code
+ * - **Only** variables that begin with [`config.kit.env.publicPrefix`](https://svelte.dev/docs/kit/configuration#env) (which defaults to `PUBLIC_`) are included
+ * 
+ * > [!NOTE] In `dev`, `$env/dynamic` includes environment variables from `.env`. In `prod`, this behavior will depend on your adapter.
+ * 
+ * > [!NOTE] To get correct types, environment variables referenced in your code should be declared (for example in an `.env` file), even if they don't have a value until the app is deployed:
+ * >
+ * > ```env
+ * > MY_FEATURE_FLAG=
+ * > ```
+ * >
+ * > You can override `.env` values from the command line like so:
+ * >
+ * > ```sh
+ * > MY_FEATURE_FLAG="enabled" npm run dev
+ * > ```
+ * 
+ * For example, given the following runtime environment:
+ * 
+ * ```env
+ * ENVIRONMENT=production
+ * PUBLIC_BASE_URL=http://example.com
+ * ```
+ * 
+ * With the default `publicPrefix` and `privatePrefix`:
+ * 
+ * ```ts
+ * import { env } from '$env/dynamic/public';
+ * console.log(env.ENVIRONMENT); // => undefined, not public
+ * console.log(env.PUBLIC_BASE_URL); // => "http://example.com"
+ * ```
+ * 
+ * ```
+ * 
+ * ```
+ */
+declare module '$env/dynamic/public' {
+	export const env: {
+		[key: `PUBLIC_${string}`]: string | undefined;
+	}
+}
@@ -0,0 +1 @@
+// See https://svelte.dev/docs/kit/environment-variables for more information
@@ -0,0 +1,38 @@
+// in dev, this makes Vite inject its client as this module's first dependency,
+// so that global constant replacements are installed before any other module
+// (including user hooks) evaluates. In build it's inert.
+import.meta.hot;
+
+
+
+
+export { matchers } from './matchers.js';
+
+export const nodes = [
+	() => import('./nodes/0'),
+	() => import('./nodes/1')
+];
+
+export const server_loads = [];
+
+export const dictionary = {
+		
+	};
+
+export const hooks = {
+	handleError: (({ error }) => { console.error(error) }),
+	
+	reroute: (() => {}),
+	transport: {}
+};
+
+export const decoders = Object.fromEntries(Object.entries(hooks.transport).map(([k, v]) => [k, v.decode]));
+export const encoders = Object.fromEntries(Object.entries(hooks.transport).map(([k, v]) => [k, v.encode]));
+
+export const hash = false;
+
+export const decode = (type, value) => decoders[type](value);
+
+export { default as root } from '../root.js';
+
+export const get_error_template = () => import('../shared/error-template.js').then(m => m.default);
@@ -0,0 +1 @@
+export const matchers = {};
@@ -0,0 +1 @@
+export { default as component } from "../../../../frontend/node_modules/@sveltejs/kit/src/runtime/components/svelte-5/layout.svelte";
@@ -0,0 +1 @@
+export { default as component } from "../../../../frontend/node_modules/@sveltejs/kit/src/runtime/components/svelte-5/error.svelte";
@@ -0,0 +1 @@
+export default ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n";
@@ -0,0 +1,50 @@
+{
+	"compilerOptions": {
+		"paths": {
+			"$app/types": [
+				"./types/index.d.ts"
+			]
+		},
+		"rootDirs": [
+			"..",
+			"./types"
+		],
+		"verbatimModuleSyntax": true,
+		"isolatedModules": true,
+		"lib": [
+			"esnext",
+			"DOM",
+			"DOM.Iterable"
+		],
+		"moduleResolution": "bundler",
+		"module": "esnext",
+		"noEmit": true,
+		"target": "esnext"
+	},
+	"include": [
+		"ambient.d.ts",
+		"env.d.ts",
+		"non-ambient.d.ts",
+		"./types/**/$types.d.ts",
+		"../vite.config.js",
+		"../vite.config.ts",
+		"../src/**/*.js",
+		"../src/**/*.ts",
+		"../src/**/*.svelte",
+		"../test/**/*.js",
+		"../test/**/*.ts",
+		"../test/**/*.svelte",
+		"../tests/**/*.js",
+		"../tests/**/*.ts",
+		"../tests/**/*.svelte"
+	],
+	"exclude": [
+		"../node_modules/**",
+		"../src/service-worker.js",
+		"../src/service-worker/**/*.js",
+		"../src/service-worker.ts",
+		"../src/service-worker/**/*.ts",
+		"../src/service-worker.d.ts",
+		"../src/service-worker/**/*.d.ts"
+	]
+}
@@ -2,21 +2,16 @@

 ## Agent context

-Read this file, `docs/CAPTURE.md`, and `docs/PHOTOS.md`.
-Implement Milestone 2 only. Specification: `docs/PHOTOS.md`.
-PRD: `docs/PRODUCT.md` for destination and field names. Do not implement Milestone 3 or 4.
-Do not widen Milestone 2 into Complete-listing taxonomy, SKU, price, copy, or Woo create.
+Read this file and `docs/CAPTURE.md`.
+Implement Milestone 1 only. Specification: `docs/CAPTURE.md`.
+PRD: `docs/PRODUCT.md` for destination and field names. Do not implement Milestone 2, 3, or 4.

-## Milestone 2
+## Milestone 1

-Photos.
-Acceptance: on a phone, batch of 1–N photos, user-picked calibration photo through Milestone 1 mask/axis/measure, every successful shot as a 3:4 transparent inventory PNG lined up, Milestone 1 numbers on screen, dimension-overlay copy of the calibration PNG present.
+Capture.
+Acceptance: on a phone, one real slab, approved mask, approved length-axis rectangle, user length and thickness, inventory PNG on screen, widths and board feet on screen.

-Milestone 2 is inference-free. Batch mask/crop reuse and dimension overlays run in the browser as ordinary code. There is no inference URL and no model call in this milestone.
-
-## Milestone 1 (historical)
-
-Capture. Spec: `docs/CAPTURE.md`. Remains the calibration math and PNG contract Milestone 2 reuses.
+Milestone 1 is inference-free. Background removal, rectangle, measurements, and PNG encode run in the browser as ordinary code. There is no inference URL and no model call in this milestone.

 ## Invariants

@@ -31,4 +26,3 @@ Capture. Spec: `docs/CAPTURE.md`. Remains the calibration math and PNG contract
 - Create works with inference off.
 - Source below the PNG size floor requires a new photo.
 - Existing store SKU blocks create.
- Dimension overlay orientation follows the user-approved length axis from Milestone 1.
@@ -0,0 +1,15 @@
+# M1-6 UAT Deploy — run these on 192.168.1.202
+
+# 1. Copy the repo to .202 (from THIS machine, /home/ty):
+rsync -az --exclude node_modules --exclude .svelte-kit --exclude build \
+  /home/ty/SlabUploader/ ty@192.168.1.202:SlabUploader/
+
+# 2. Build the image on .202:
+ssh ty@192.168.1.202 "cd SlabUploader/frontend && docker build -t slabuploader-m1 . && \
+  docker rm -f slabuploader-m1 2>/dev/null; \
+  docker run -d --name slabuploader-m1 --restart unless-stopped -p 18080:80 slabuploader-m1 && \
+  echo 'Container running at http://192.168.1.202:18080'"
+
+# 3. Verify from your phone:
+#    Open http://192.168.1.202:18080 in Safari/Chrome
+#    Flow: Add photo → Mask (green sheet, sensitivity) → Approve → Axis → Approve → Measure → Calculate
@@ -7,7 +7,6 @@ Lists one-of-a-kind wood slabs on Whidbey Wood Store.
 | PRD | `docs/PRODUCT.md` |
 | Invariants and agent context | `AGENTS.md` |
 | Milestone 1 | `docs/CAPTURE.md` |
-| Milestone 2 | `docs/PHOTOS.md` |
 | Hosting | `deploy/` |

 Owner: Ty. Store: https://www.whidbeywoodstore.com/
@@ -0,0 +1,36 @@
+# SlabUploader M1 — shared build context (for :202 worker tasks)
+
+REPO: /home/ty/SlabUploader  — work ONLY inside /home/ty/SlabUploader/frontend.
+Branch: M1-dev-rev4 (already checked out; DO NOT switch branches, DO NOT push).
+This is Milestone 1 (Capture) of a slab-measuring web app. Browser-only, NO backend,
+NO inference, NO OpenCV/ONNX. Pure JS (not TS). Svelte 5 + SvelteKit + adapter-node.
+
+TEST COMMANDS (run these, show real output):
+  unit:  cd /home/ty/SlabUploader/frontend && npx vitest run
+  e2e:   npx playwright test --list   (collection only; full e2e needs the M1-6 container)
+
+EXISTING (already committed, green, DO NOT break):
+  src/lib/core/mask.js   -> keySheet(data,{sheet,sensitivity}), maskStats(mask)
+  src/lib/core/math.js   -> scale, sqft, bdft, roundHalfUp, sampledWidths,
+                            sampledWidthsFrom, snapToEighth
+  tests/unit/mask.test.js, tests/unit/math.test.js  (24 tests, all pass)
+  src/routes/+page.svelte (placeholder home — M1-3 replaces it)
+  src/routes/+layout.svelte, src/routes/api/health/+server.js
+
+TDD IS MANDATORY (test-driven-development skill):
+  1. Write the failing test(s) FIRST.
+  2. Run them and WATCH them fail for the right reason (feature missing, not a typo).
+  3. Write the MINIMAL code to pass.
+  4. Run them and confirm they pass.
+  5. Run the FULL unit suite (npx vitest run) and confirm no regressions + pristine output.
+  6. Only then are you done. Commit is done by the coordinator — you do NOT commit.
+
+CONVENTIONS:
+  - Tab indentation (the repo uses tabs).
+  - Pure logic lives in src/lib/core/*.js (DOM-free, unit-testable under node).
+  - Svelte components live under src/lib/ (e.g. src/lib/components/).
+  - Every new exported function needs a unit test that you SAW fail first.
+  - No console.log left in production code.
+  - Do not add dependencies.
+  - Report at the end: files created/changed, the exact test command output, and
+    any place you had to make a judgment call.
@@ -1,20 +1,7 @@
 # Host

-## Overnight Milestone 2 Capture (UAT)
-
- Host: `ubudual5060` / Tailscale `100.64.0.9`
- Container: `slabuploader-m2-overnight` (image `slabuploader-m2:overnight`)
- Port: **10881** → 80
- URL: `http://100.64.0.9:10881`
- Replaces prior overnight container `slabuploader-m1-overnight` (same port).
-
-## Ty local Node/SvelteKit (do not overwrite)
-
- Host: `ubudual5060` / `100.64.0.9`
- Container: `slabuploader-m1`
- Port: **18080** → 80 (inventory previously listed 10880; do not bind overnight there)
- URL: `http://100.64.0.9:18080`
- **Never** recreate or remap this container for overnight UAT.
-
-Future overnight Capture deploys use a **separate** container name and an open **108XX** port other than Ty’s local port.
-Do not put a host name in the product spec.
+- Machine: ubuDual5060 (192.168.1.202)
+- Container: slabuploader-m1 (image sha256:98d11c23, restart unless-stopped)
+- URL: http://192.168.1.202:18080
+- Port: 18080 (LAN interface, bound 0.0.0.0)
+- Started: 2026-09-14 (M1 UAT)
@@ -6,3 +6,12 @@ Where the container runs is chosen at runtime.
 No FastAPI and no Woo client in this milestone.

 `docker-compose.yml`, `Caddyfile.fragment`, and `.env.example` describe an older two-service stack. They are not the Milestone 1 contract.
+
+## Milestone 1 UAT — deployment POR
+
+- **One container.** Build a single Docker image that serves the SvelteKit capture app. No FastAPI, no Woo client, no Caddy TLS edge in M1. (Caddy/compose/Woo are Milestone 3.)
+- **Host chosen at runtime.** Record the machine and URL in `INVENTORY.md` when the container starts. Do not put a host name in the product spec.
+- **LAN-reachable UAT URL.** For UAT the container binds a port on the LAN interface (not only `127.0.0.1`), so other machines on the LAN — e.g. a phone — reach the app at `http://<host-lan-ip>:<port>`.
+- **No backend.** The app is browser-only in M1 (see `docs/CAPTURE.md`). There is no `/api` route and no inference.
+
+Reference for the current UAT host: see `INVENTORY.md` (filled in when the container starts).
@@ -1,17 +0,0 @@
-server {
-    listen 80;
-    server_name _;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    # SPA: fall back to index.html for any path
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    location ~* \.(js|css|png|jpg|jpeg|svg|woff2?)$ {
-        expires 7d;
-        add_header Cache-Control "public";
-        try_files $uri =404;
-    }
-}
@@ -1,7 +1,7 @@
 # Milestone 1 — Capture

 Runs in the browser on phone and PC as ordinary client code.
-No inference URL. No model. No backend. Mask, rectangle, measurements, crop, and PNG encode are deterministic functions of the photo and user inputs.
+No inference URL. No model. No backend. Mask, rectangle, measurements, and PNG encode are deterministic functions of the photo and user inputs.

 Milestone 1 uses one reference photo. Further angles are later milestones.
 Milestone 1 ends when the user sees the inventory PNG and measurements. Milestone 2 is Review. Milestone 3 is Create. This file does not create a WooCommerce product.
@@ -33,9 +33,9 @@ Otherwise the app opens Add photo.
 3. User sets sheet Auto / Green / Black and sensitivity 0–100 (slider or minus / plus). App updates the control immediately. App recomputes the overlay 2.0 seconds after the last sensitivity change. User adjusts until only the slab remains, then approves. App blocks approve if the mask has no slab pixels; user retakes. The approved mask is the footprint for every later step.
 4. App draws the minimum-area bounding rectangle of the mask and the length axis on the long side of that rectangle. User rotates the axis if it does not follow the slab length, then approves the axis.
 5. User enters length `L` in inches (1/8 in steps) and thickness (1/8 in steps), then presses Calculate.
-6. App sets `scale = longest_axis_px / L` (mask/wood span along the approved direction ÷ user `L`; rectangle is direction only).
-7. App computes widths, sqft, and bdft from the mask. App crops the masked slab into a 3:4 portrait frame: slab centered, 90% fill at the widest and tallest points, background transparent. App writes that frame as an inventory PNG (`image/png`, 8-bit RGBA).
-8. User sees the transparent PNG and the numbers. Milestone 1 stops here.
+6. App sets `scale = longest_axis_px / L`.
+7. App computes widths, sqft, and bdft from the mask, and writes the inventory PNG.
+8. User sees the PNG and the numbers. Milestone 1 stops here.

 Calculate does not create a WooCommerce product.

@@ -45,6 +45,12 @@ Phone: iOS Safari, Android Chrome.
 PC: Chrome, Edge, Firefox.
 Other clients get a hard stop.

+## Input photo
+
+Accepted input: JPEG. Phones typically save JPEG; Android Chrome delivers JPEG by default.
+
+If the file is HEIC and the browser cannot decode it, show a one-tap notice to retake the photo as JPEG. HEIC is never silently dropped and never decoded server-side in Milestone 1.
+
 ## States

 One photo component is reused. Each state advances on approve. Back returns to the previous state. A device draft restores the last approved state.
@@ -53,13 +59,13 @@ One photo component is reused. Each state advances on approve. Back returns to t
 2. Add photo — camera or picker. One photo. Setup rules visible.
 3. Mask — background removal on that photo.
 4. Length axis — bounding rectangle and long-side axis on the same photo.
-5. Measure — length, thickness, Calculate, crop, inventory PNG, widths, sqft, bdft. Milestone 1 stops here.
+5. Measure — length, thickness, Calculate, inventory PNG, widths, sqft, bdft. Milestone 1 stops here.

 ## Display

 Preview fits the device width. Height is capped so Mask and Measure controls stay on screen. Phone and PC use the same states.

-The preview is display only. Mask, rectangle, crop, `scale`, sqft, and PNG encode use the source photo pixels, not the CSS size of the preview.
+The preview is display only. Mask, rectangle, `scale`, sqft, and PNG encode use the source photo pixels, not the CSS size of the preview.

 ## Runtime

@@ -83,34 +89,22 @@ Mask work runs in the worker. The last good overlay stays visible while a pass r

 Approve is blocked when the mask has no slab pixels. User retakes.

-User approves the mask when only the slab remains. That mask is the footprint for Length axis, crop, measurements, and the inventory PNG.
+User approves the mask when only the slab remains. That mask is the footprint for Length axis, measurements, and the inventory PNG.

 ## Length axis

-On the same photo, keep the approved mask in view and draw the minimum-area bounding rectangle of the mask with the length axis on the long side of that rectangle. User rotates the rectangle (slider with minus and plus) until that direction follows the slab length, then approves the axis.
+On the same photo, draw the minimum-area bounding rectangle of the mask and the length axis on the long side of that rectangle. User rotates the axis if it does not follow the slab length, then approves the axis.

 ## Measure

 User enters length `L` in inches (1/8 in steps) and thickness (1/8 in steps), then presses Calculate.

- `scale = longest_axis_px / L` where `longest_axis_px` is the mask/wood span along the approved length direction (slab pixels end-to-end on that axis), not the rectangle edge length. The rectangle sets direction only; user-entered `L` is wood end→end along that direction.
- Widths: min, max, avg from samples taken every 6 in along the approved length axis, perpendicular to it, after dropping the first and last 6 in of the span (bulk widths, not tips). If `L ≤ 12 in` there are no interior stations and all three are 0.
+- `scale = longest_axis_px / L`
+- Widths: min, max, avg, sampled every 6 in along the approved length axis, perpendicular to it
 - `sqft = (mask_pixels / scale²) / 144` (2 decimals)
 - `bdft = sqft × thickness_in` (2 decimals)
- Crop: 3:4 portrait, slab centered, 90% fill at the widest and tallest points, transparent background
- File: inventory PNG, `image/png`, 8-bit RGBA, alpha kept

-User sees the transparent PNG and those numbers. Stop. Calculate does not create a WooCommerce product.
-
-## Crop
-
-On Calculate, the app builds the inventory image from the approved mask:
-
-1. Keep slab pixels from the source photo. Removed pixels are transparent.
-2. Place the slab in a 3:4 portrait frame, centered.
-3. Scale so the widest and tallest points of the slab fill 90% of the frame. Extra margin where the slab is narrower.
-4. After that crop, shorter side ≥ 800px when the source can supply it. Otherwise warn and require a new photo. No upscale from an undersized source.
-5. Encode as PNG with alpha.
+User sees the inventory PNG and those numbers. Stop. Calculate does not create a WooCommerce product.

 ## Device draft

@@ -133,8 +127,10 @@ The first inventory photo is the measurement reference. Later inventory photos u
 | Format | PNG, 8-bit RGBA (`image/png`) |
 | Alpha | Kept through encode and upload |
 | Aspect | 3:4 portrait |
-| Layout | Slab centered, 90% fill at the widest and tallest points |
-| Size | After crop, shorter side ≥ 800px when the source can supply it |
+| Layout | Slab centered, 80% fill at the widest and tallest points |
+| Size | After crop, shorter side ≥ 1600px when the source can supply it |

 Source below that floor: warn and require a new photo. No upscale from an undersized source.
 Editor preview of alpha is a light gray checkerboard. The storefront uses the theme background.
+
+File size: aim under 200KB per image (soft goal, not a hard gate in Milestone 1).
@@ -0,0 +1,100 @@
+# Milestone 1 — Plan of Record (POR)
+
+Decisions captured as they are made. This is the working plan for implementing and UAT-ing Milestone 1. It is the source of truth for scope, order, and dispatch; the spec detail lives in `docs/CAPTURE.md` and `docs/PRODUCT.md`.
+
+## Scope
+
+Implement **Milestone 1 — Capture** only (see `AGENTS.md`). Browser-only, inference-free, no backend, no Woo create. Milestones 2–4 are out of scope.
+
+## Method — TDD (non-negotiable)
+
+Every card is delivered **test-first** per the `test-driven-development` skill:
+
+```
+NO PRODUCTION CODE WITHOUT A FAILING TEST FIRST
+```
+
+- **Red-Green-Refactor**, tracer-bullet: one behavior slice at a time (RED→GREEN→REFACTOR), not all-tests-then-all-code.
+- **Verify RED** (watch it fail for the right reason) and **Verify GREEN** (it passes + full suite stays green) are mandatory before the card is done.
+- Code written before a failing test is **deleted and redone** — not kept as "reference."
+- The deterministic core (math + PNG contract) is unit-tested in a browser-runnable JS suite; UI behaviors are tested with Playwright against the fixtures.
+- A card is not complete until: every new function has a test, each test was seen failing first, the full suite passes with pristine output.
+
+## Card breakdown (implementation order)
+
+Each card follows TDD. "Define" = write the failing tests (RED); "Build" = minimal code to pass (GREEN); "Refactor" = clean up keeping green.
+
+1. **Scaffold + Dockerfile + test harness** — SvelteKit project with the browser-only M1 runtime (Web Worker, canvas/OffscreenCanvas, IndexedDB via `idb-keyval`), `frontend/Dockerfile`, and the test harness (JS unit runner + **Playwright** web).
+   - *TDD note:* this card establishes the harness itself (a smoke test that runs and fails, then passes) so every later card has a place to be RED/GREEN.
+2. **Deterministic core** — the pure math + PNG-encode functions.
+   - *RED:* unit tests for `scale`, `sqft`, `bdft`, width sampling, 1/8″ stepping, rounding, and the PNG contract (3:4, 8-bit RGBA, 80% fill, ≥1600px floor, undersized→retake). Run on the fixtures' calibration records.
+   - *GREEN/REFACTOR:* implement to pass; core is authoritative and server-less.
+3. **Capture + Mask** — Add photo (JPEG; HEIC→"retake as JPEG" notice), green/black key, four knobs, debounced recompute, mask approve.
+   - *RED:* Playwright — load fixture, key sheet, approve; empty-mask blocks approve; HEIC shows the notice.
+   - *GREEN/REFACTOR:* build the Mask state to pass.
+4. **Length axis** — min-area bounding rectangle + long-side axis, user rotate, approve.
+   - *RED:* Playwright — rect drawn from the approved mask, axis on long side, rotate, approve.
+   - *GREEN/REFACTOR:* build the axis state.
+5. **Measure + PNG** — length/thickness (1/8″), compute sqft/bdft/widths, write the 3:4 inventory PNG. M1 stops here.
+   - *RED:* Playwright — enter L/thickness → Calculate; assert PNG is 3:4 with alpha, and numbers equal the fixture's expected values.
+   - *GREEN/REFACTOR:* build Measure + PNG encode.
+6. **M1 UAT** — serve the container per `deploy/README.md` §Milestone 1 UAT; run the full Playwright suite in the container; then the manual phone pass. Record host + URL in `deploy/INVENTORY.md`.
+
+## Deployment (UAT)
+
+See `deploy/README.md` §Milestone 1 UAT — deployment POR: one container, host chosen at runtime, LAN-reachable URL, no backend.
+
+## Dev / QA worker dispatch
+
+Two local inference endpoints are available as dispatchable workers for test / dev / QA:
+
+- **`.202:8081`** — `gemma-4-12B-it-q4_k_m` (12B, Q4) — **completion only, no vision.** Use for lighter text: drafting, code review, summaries.
+- **`.202:8082`** — `Qwen3.8-27B-UD-IQ3_XXS` (27B, IQ3) — **completion + multimodal (vision).** The **vision worker** (any task that must look at a slab photo) and the stronger general-reasoning endpoint.
+
+Coordinator: Hermes (me) — plans, decomposes, dispatches, verifies, and does work directly when a card is small or judgment-heavy.
+
+### Calibrated delegation policy (2026-09-14)
+
+- **Frame every prompt**: system role + "show each step" + explicit constraints. Small/low-quant models drop multi-step arithmetic in one-shot "reply JSON only" prompts but get it exactly right with scratch-space framing. Do not judge capability from under-framed probes.
+- **The deterministic core stays the coordinator's** (TDD'd, unit-tested). A model that's "usually right" on math is not good enough for the spec — math is cheap to test and must be exact.
+- **Verify before land**: any load-bearing model output is checked against tests/spec before entering the repo. Workers are assist, not autonomous builders.
+- **Output quirks**: gemma wraps JSON in ``` fences — strip before parsing. Vision calls run ~18s/image (text ~1s).
+- **One task per endpoint at a time** (no parallel on the same endpoint — backs up and overheats).
+- Both run low-quant (Q4/IQ3). Fine for framed assist; deep sustained reasoning is best done by the coordinator directly.
+
+## Test plan (M1)
+
+Three layers. The deterministic core is unit-tested; the end-to-end path is Playwright; a real phone is the final UAT gate.
+
+### 1. Unit (deterministic core) — must pass before any UI consumes it
+- `bdft = sqft × thickness_in`; `sqft = (mask_px / scale²) / 144`; `scale = longest_axis_px / L`.
+- 1/8 in stepping; rounding (sqft/bdft 2 decimals).
+- Width sampling every 6 in along the approved axis.
+- PNG encode contract: 3:4 aspect, 8-bit RGBA, 80% fill, shorter side ≥ 1600px when source allows; undersized source → warn + retake (no upscale).
+- Mask empty → approve blocked.
+
+### 2. Playwright (automated end-to-end, runs in the UAT container's browser)
+Walks the 5 states against a **sample photo**:
+- Add photo → Mask (set sheet + sensitivity) → approve → Length axis → approve → Measure (enter L, thickness) → Calculate.
+- Assert: PNG rendered, dimensions = 3:4, alpha present; sqft/bdft/widths equal the expected values for that fixture (within tolerance); numbers visible on screen.
+- HEIC input → "retake as JPEG" notice shown (not a crash).
+- Device draft: reload → Resume → Continue restores last approved state.
+
+### 3. Manual phone UAT (final gate)
+On a real phone (iOS Safari / Android Chrome) over the LAN UAT URL: repeat the happy path with one real slab; confirm PNG + numbers on screen. Record host + URL in `deploy/INVENTORY.md`.
+
+## Test fixtures (sample pics)
+
+Real slab photos are the fixtures (supplied by Ty from `\\truenas.local\Business\Samples`, SMB user `SMBSVC`). Each is a DJI MIMO top-down JPEG, ~4000×2256, slab on a green/black sheet.
+
+`tests/fixtures/`:
+- **sample_01 … sample_0N.JPG** — a representative handful of real slab photos (pulled on demand from the TrueNAS Samples share; do not bulk-copy the whole folder).
+- Each fixture gets a **calibration record** in `tests/fixtures/<name>.json`: the slab's true length and thickness (in inches), the sheet color, and the approved mask/axis reference — used to compute the expected `scale`, `sqft`, `bdft`, and sampled widths for assertions.
+
+The real photos drive both **bg removal** (green/black key) and **rectangle/axis calibration**. Expected values come from the calibration records, so assertions stay deterministic even on real imagery.
+
+**M1 fixture set (agreed, complete for M1):** three black-sheet slabs — one irregular (stress-tests the min-area rectangle/axis), two clean elongated. Green-sheet keying is deferred (not an M1 fixture). A 1 HEIC sample (optional) for the decode-fallback test.
+
+## Open decisions
+
+- (none outstanding for M1 as of this plan; new decisions append here)
@@ -1,75 +0,0 @@
-# Milestone 2 — Photos
-
-Builds on Milestone 1. Spec for calibration math and inventory PNG properties: `docs/CAPTURE.md`.
-This milestone gets every photo of one slab background-removed and cropped store-ready.
-It does not fill Complete-listing taxonomy, SKU, price, or copy. It does not create a WooCommerce product.
-No inference URL. No model. Mask and crop for non-calibration shots reuse the approved calibration params as ordinary client code.
-
-## Goal
-
-Phone capture of one slab → a lined-up set of Woo-compatible inventory PNGs, plus Milestone 1 calibration numbers on the reference shot, plus one annotated copy of the calibration PNG with dimension overlays.
-
-## Use case
-
-1. User adds a batch of one or more photos of the same slab (Setup rules from Milestone 1: green or black sheet, top-down reference expectations still apply to the calibration choice).
-2. User selects which photo in the batch is the calibration photo.
-3. App runs the Milestone 1 workflow on that calibration photo only: Mask → Length axis → Measure (length `L`, thickness, Calculate).
-4. After Calculate, the app applies the approved mask sheet and sensitivity, and the same crop rules (3:4 portrait, 90% fill, transparent PNG, shorter-side floor), to every other photo in the batch.
-5. App adds a second copy of the calibration inventory PNG with dimension overlays burned in (see Dimension overlay).
-6. User sees Photos ready: inventory PNGs lined up in this order — clean calibration PNG, then the dimension-overlay copy of the calibration PNG, then the other batch photos in capture order — plus the Milestone 1 calibration details (widths, sqft, bdft, scale) presented as in Measure.
-
-A batch of one photo still works: that photo is the calibration photo; the end set is the clean PNG plus the dimension-overlay copy.
-
-## States (additions over Milestone 1)
-
-1. Batch — add one or more photos; continue when the batch has at least one.
-2. Pick calibration — user chooses which batch photo is the reference.
-3. Mask / Length axis / Measure — Milestone 1 states on the calibration photo only.
-4. Photos ready — lineup order: clean calibration PNG → dimension-overlay copy → other batch photos in capture order; plus Milestone 1 numbers.
-
-Device draft restores the last approved state, including the batch and which photo was calibration when those exist.
-
-## Apply to non-calibration photos
-
-For each non-calibration photo:
-
- Reuse the approved Mask sheet (Auto / Green / Black) and sensitivity from the calibration photo. Do not re-open Mask controls for that photo in this milestone.
- Run background removal with those params; compose inventory PNG with the same crop rules as Milestone 1 Calculate.
- If a photo yields an empty mask or fails the PNG size floor, keep it out of the ready set and show a clear per-photo error; other photos still proceed.
-
-Scale, widths, sqft, and bdft stay tied to the calibration photo and user `L` / thickness. Non-calibration photos are visual inventory only.
-
-## Dimension overlay
-
-A second copy of the **calibration** inventory PNG is added to the collection. Overlays are black, large enough to read on phone and storefront.
-
-Orientation follows the **user-approved length axis** from Milestone 1 (not the upright edges of the photo).
-
- **Length:** dimension graphic beside the wood on the right in axis-space (outside the slab edge along the length direction).
- **Widths:** stations every 12 in along the approved length axis, starting 6 in from the **bottom** of the slab span, continuing while the station is not within 6 in of the top (stations at 6, 18, 30, … in inches along the axis while ≤ `L − 6`). Each width is drawn across the wood perpendicular to the length axis, with arrow tips on the left and right slab edges and the measurement text on that line.
- **Bottom:** after the calibration photo’s EXIF orientation is applied, the bottom edge of that oriented photo establishes which end of the slab is bottom for width stations. Length-axis direction still follows the user-approved Milestone 1 axis; EXIF only picks which end is bottom vs top along that span.
-
-## Photos-ready order
-
-1. Clean calibration inventory PNG
-2. Dimension-overlay copy of the calibration PNG
-3. Remaining batch inventory PNGs in capture order
-
-The clean calibration PNG remains in the set. The annotated copy is extra.
-
-## Acceptance
-
-On a phone UAT build:
-
- User can capture 1–N photos, pick calibration, complete Milestone 1 on that shot, and see every successful batch photo as a 3:4 transparent inventory PNG lined up.
- Calibration measures match Milestone 1 presentation.
- Dimension-overlay copy of the calibration PNG is present with black length and width graphics oriented to the approved axis; width stations start 6 in from EXIF-established bottom.
- Lineup order is clean calibration → dimension overlay → other batch photos in capture order.
- No Woo create. No inference URL.
-
-## Out of scope
-
- Complete-listing fields (SKU, species, category, edge, figure, grade, thickness band, moisture, `fig-*` / `feat-*`, title, short title, description, price)
- WooCommerce create (Milestone 3)
- Inference / Assist (Milestone 4)
- Changing Milestone 1 mask/axis/measure math except to reuse its outputs for batch apply and overlays
@@ -32,9 +32,8 @@ Store categories, attributes, and `fig-*` / `feat-*` tags are the filters. Measu

 ## System seams

-Milestones 1 and 2 run in the browser. No backend and no inference URL.
-Milestone 1 handoff is the device draft: source photo, approved mask, inventory PNG, length, thickness, widths, sqft, bdft.
-Milestone 2 extends the draft with the photo batch, calibration choice, per-photo inventory PNGs, and the dimension-overlay calibration copy.
+Milestone 1 runs in the browser. No backend and no inference URL.
+Handoff is the device draft: source photo, approved mask, inventory PNG, length, thickness, widths, sqft, bdft.
 Milestone 3 uses FastAPI as the Woo client. Store credentials stay on the server.

 ## Create
@@ -50,7 +49,7 @@ Work is split into four milestones. Each milestone is done when its acceptance c

 ### Milestone 1 — Capture

-Spec: `docs/CAPTURE.md`. Done historically; handoff into Milestone 2.
+Spec: `docs/CAPTURE.md`. Current work.

 User stories:
 - Photograph a slab on a green or black sheet and remove the background.
@@ -59,12 +58,10 @@ User stories:

 Acceptance: inventory PNG and measurements visible on a phone. No Woo create.

-### Milestone 2 — Photos
+### Milestone 2 — Review

-Spec: `docs/PHOTOS.md`. Current work.
-
-Batch photos of one slab, pick calibration, run Milestone 1 on that reference, apply the same mask params and crop to the rest, preview all inventory PNGs lined up, plus a dimension-overlay copy of the calibration PNG.
-Acceptance: on a phone, 1–N store-ready inventory PNGs for the slab (including dimension overlay on the calibration copy) with Milestone 1 measures visible. No Woo create. No Complete-listing taxonomy in this milestone.
+Remaining listing fields in the app.
+Acceptance: every field in Complete listing is filled or proposed and editable.

 ### Milestone 3 — Create

@@ -0,0 +1,10 @@
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+playwright-report
+test-results
@@ -1,13 +1,18 @@
-# Build the static app, then serve only the built artifacts.
-# Build context is the repo root: `docker build -f frontend/Dockerfile .`
-FROM node:20-slim AS build
+# SlabUploader M1 — frontend only (no FastAPI/Woo). Multi-stage: build then serve.
+FROM node:22-alpine AS build
 WORKDIR /app
-COPY frontend/package.json frontend/package-lock.json* ./
-RUN npm install --no-audit --no-fund
-COPY frontend/ ./
+COPY package*.json ./
+RUN npm install
+COPY . .
 RUN npm run build

-FROM nginx:1.27-alpine
-COPY deploy/nginx-m1.conf /etc/nginx/conf.d/default.conf
-COPY --from=build /app/dist /usr/share/nginx/html
+FROM node:22-alpine AS run
+WORKDIR /app
+ENV NODE_ENV=production
+COPY package*.json ./
+RUN npm install --omit=dev
+COPY --from=build /app/build ./build
+COPY --from=build /app/node_modules ./node_modules
 EXPOSE 80
+ENV PORT=80
+CMD ["node", "build/index.js"]
@@ -0,0 +1,20 @@
+import { keySheet } from './src/lib/core/mask.js';
+import { sampleWidthsPx } from './src/lib/core/measure.js';
+const W = 200, H = 150;
+function slabPhoto(slabW, slabH, ox, oy) {
+	const data = new Uint8ClampedArray(W * H * 4);
+	for (let y = 0; y < H; y++)
+		for (let x = 0; x < W; x++) {
+			const i = (y * W + x) * 4;
+			const inSlab = x >= ox && x < ox + slabW && y >= oy && y < oy + slabH;
+			if (inSlab) { data[i] = 139; data[i + 1] = 90; data[i + 2] = 43; }
+			else { data[i] = 34; data[i + 1] = 139; data[i + 2] = 34; }
+			data[i + 3] = 255;
+		}
+	return data;
+}
+const d = slabPhoto(10, 10, 0, 0);
+const m = keySheet(d, { sheet: 'green', sensitivity: 50 });
+let kept = 0;
+for (let i = 0; i < m.length; i++) kept += m[i];
+console.log('kept:', kept, 'of', m.length);
@@ -0,0 +1,17 @@
+import { sampleWidthsPx } from './src/lib/core/measure.js';
+const W = 200, H = 150;
+const mask = new Uint8Array(W * H);
+// slab 336 x 192 px at (0,0) — extends beyond photo bounds (200x150)
+for (let y = 0; y < H; y++)
+	for (let x = 0; x < W; x++)
+		mask[y * W + x] = (x < 336 && y < 192) ? 1 : 0;
+const axis = { origin: {x:0, y:0}, dir: {x:1, y:0}, lengthPx: 336 };
+const w = sampleWidthsPx(mask, W, H, axis, 160, 6);
+console.log('widths:', w);
+// sample points at t=0, 96, 192, 288 px
+// perpendicular dir: (0,1) — scan down
+// at x=0: y from 0..149 all in slab (y<192) → width 150 (clamped by photo)
+// at x=96: same → 150
+// at x=192: same → 150
+// at x=288: x=288 > 200 (photo width) → out of bounds → 0? or skipped?
+console.log('expected: [150, 150, 150] or [150, 150, 150, 0]');
@@ -0,0 +1,11 @@
+import { sampleWidthsPx } from './src/lib/core/measure.js';
+const W = 400, H = 250;
+const mask = new Uint8Array(W * H);
+for (let y = 0; y < H; y++)
+	for (let x = 0; x < W; x++)
+		mask[y * W + x] = 1; // whole photo is slab
+const axis = { origin: {x:0, y:0}, dir: {x:1, y:0}, lengthPx: 336 };
+const w = sampleWidthsPx(mask, W, H, axis, 160, 6);
+console.log('widths (full photo):', w);
+console.log('expected: [250, 250, 250] (t=0,96,192; t=288>336? no, 288<336 → also 250)');
+console.log('samples at t=0,96,192,288 → 4 samples, each width=250');
@@ -0,0 +1,10 @@
+import { keySheet } from './src/lib/core/mask.js';
+const data = new Uint8ClampedArray(10 * 4);
+// slab brown
+data[0] = 139; data[1] = 90; data[2] = 43; data[3] = 255;
+// sheet green
+data[4] = 34; data[5] = 139; data[6] = 34; data[7] = 255;
+data[8] = 34; data[9] = 139; data[10] = 34; data[11] = 255;
+data[12] = 34; data[13] = 139; data[14] = 34; data[15] = 255;
+const m = keySheet(data, { sheet: 'green', sensitivity: 50 });
+console.log('mask for 4 pixels (1 slab + 3 sheet):', Array.from(m));
@@ -0,0 +1,8 @@
+import { keySheet } from './src/lib/core/mask.js';
+const data = new Uint8ClampedArray(4 * 4);
+data[0]=139; data[1]=90; data[2]=43; data[3]=255;
+data[4]=34; data[5]=139; data[6]=34; data[7]=255;
+data[8]=34; data[9]=139; data[10]=34; data[11]=255;
+data[12]=34; data[13]=139; data[14]=34; data[15]=255;
+const m = keySheet(data, { sheet:'green', sensitivity:50 });
+console.log('mask for 4 px (1 slab, 3 sheet):', Array.from(m));
@@ -0,0 +1,29 @@
+const data = new Uint8ClampedArray(4 * 4);
+data[0]=139; data[1]=90; data[2]=43; data[3]=255;
+data[4]=34; data[5]=139; data[6]=34; data[7]=255;
+data[8]=34; data[9]=139; data[10]=34; data[11]=255;
+data[12]=34; data[13]=139; data[14]=34; data[15]=255;
+
+const SHEET_GREEN = { r: 0, g: 255, b: 0 };
+function greenDistance(r, g, b) {
+	const dr = r - SHEET_GREEN.r;
+	const dg = g - SHEET_GREEN.g;
+	const db = b - SHEET_GREEN.b;
+	return Math.sqrt(dr * dr + dg * dg + db * db);
+}
+function greenThreshold(s) { return 150 - s; }
+function blackCutoff(s) { return 40 + (s / 100) * 100; }
+const BLACK_SAT_CAP = 120;
+
+const sensitivity = 50;
+const n = data.length / 4;
+const mask = new Uint8Array(n);
+for (let i = 0; i < n; i++) {
+	const j = i * 4;
+	const r = data[j], g = data[j + 1], b = data[j + 2];
+	const d = greenDistance(r, g, b);
+	const t = greenThreshold(sensitivity);
+	mask[i] = d > t ? 1 : 0;
+	console.log(`px ${i}: r=${r} g=${g} b=${b} dist=${d.toFixed(1)} thresh=${t} kept=${mask[i]}`);
+}
+console.log('mask:', Array.from(mask));
@@ -0,0 +1,20 @@
+import { keySheet } from './src/lib/core/mask.js';
+import { readFileSync } from 'fs';
+const fileSrc = readFileSync('./src/lib/core/mask.js', 'utf8');
+const match = fileSrc.match(/const SHEET_GREEN = \{([^}]*)\}/);
+console.log('SHEET_GREEN in file:', match ? match[0] : 'NOT FOUND');
+console.log('keySheet source:', keySheet.toString());
+const W = 20, H = 10;
+const data = new Uint8ClampedArray(W * H * 4);
+for (let y = 0; y < H; y++)
+	for (let x = 0; x < W; x++) {
+		const i = (y * W + x) * 4;
+		const inSlab = x >= 5 && x < 15 && y >= 2 && y < 8;
+		if (inSlab) { data[i]=139; data[i+1]=90; data[i+2]=43; }
+		else { data[i]=34; data[i+1]=139; data[i+2]=34; }
+		data[i+3] = 255;
+	}
+const maskResult = keySheet(data, { sheet: 'green', sensitivity: 50 });
+console.log('row 5:', Array.from(maskResult.slice(5*W, 6*W)));
+let kept = 0; for (let i = 0; i < maskResult.length; i++) kept += maskResult[i];
+console.log('kept:', kept, 'expected: 60');
@@ -0,0 +1,10 @@
+const SHEET_GREEN = { r: 0, g: 255, b: 0 };
+function greenDistance(r, g, b) {
+	const dr = r - SHEET_GREEN.r;
+	const dg = g - SHEET_GREEN.g;
+	const db = b - SHEET_GREEN.b;
+	return Math.sqrt(dr * dr + dg * dg + db * db);
+}
+console.log('sheet green (34,139,34):', greenDistance(34, 139, 34).toFixed(1));
+console.log('brown (139,90,43):', greenDistance(139, 90, 43).toFixed(1));
+console.log('threshold at s=50:', 150 - 50);
@@ -0,0 +1,13 @@
+import { keySheet } from './src/lib/core/mask.js';
+const W = 20, H = 10;
+const data = new Uint8ClampedArray(W * H * 4);
+for (let y = 0; y < H; y++)
+	for (let x = 0; x < W; x++) {
+		const i = (y * W + x) * 4;
+		const inSlab = x >= 5 && x < 15 && y >= 2 && y < 8;
+		if (inSlab) { data[i]=139; data[i+1]=90; data[i+2]=43; }
+		else { data[i]=34; data[i+1]=139; data[i+2]=34; }
+		data[i+3] = 255;
+	}
+const m = keySheet(data, { sheet: 'green', sensitivity: 50 });
+console.log('row 5:', Array.from(m.slice(5*W, 6*W)));
@@ -0,0 +1,23 @@
+import { keySheet } from './src/lib/core/mask.js';
+const W = 20, H = 10;
+const data = new Uint8ClampedArray(W * H * 4);
+for (let y = 0; y < H; y++)
+	for (let x = 0; x < W; x++) {
+		const i = (y * W + x) * 4;
+		const inSlab = x >= 5 && x < 15 && y >= 2 && y < 8;
+		if (inSlab) { data[i]=139; data[i+1]=90; data[i+2]=43; }
+		else { data[i]=34; data[i+1]=139; data[i+2]=34; }
+		data[i+3] = 255;
+	}
+const m = keySheet(data, { sheet: 'green', sensitivity: 50 });
+console.log('row 5:', Array.from(m.slice(5*W, 6*W)));
+console.log('row 5 length:', m.slice(5*W, 6*W).length);
+const arr = m.slice(5*W, 6*W);
+let all1 = true;
+for (let i = 0; i < W; i++) if (arr[i] !== 1) { all1 = false; console.log('x=', i, 'val=', arr[i]); }
+console.log('all 1s?', all1);
+// Check a specific pixel
+const px5 = m[5*W+10];
+console.log('px at (10,5):', px5);
+const px0 = m[0];
+console.log('px at (0,0):', px0);
@@ -0,0 +1,18 @@
+import { keySheet } from './src/lib/core/mask.js';
+const W = 20, H = 10;
+const data = new Uint8ClampedArray(W * H * 4);
+for (let y = 0; y < H; y++)
+	for (let x = 0; x < W; x++) {
+		const i = (y * W + x) * 4;
+		const inSlab = x >= 5 && x < 15 && y >= 2 && y < 8;
+		if (inSlab) { data[i]=139; data[i+1]=90; data[i+2]=43; }
+		else { data[i]=34; data[i+1]=139; data[i+2]=34; }
+		data[i+3] = 255;
+	}
+console.log('px (0,0) =', [data[0], data[1], data[2]]);
+console.log('px (10,5) =', [data[(5*W+10)*4], data[(5*W+10)*4+1], data[(5*W+10)*4+2]]);
+const m = keySheet(data, { sheet: 'green', sensitivity: 50 });
+console.log('mask (0,0) =', m[0]);
+console.log('mask (10,5) =', m[5*W+10]);
+let kept = 0; for (let i = 0; i < m.length; i++) kept += m[i];
+console.log('kept:', kept, 'of', m.length);
@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <title>SlabUploader — Capture</title>
-    <style>
-      html, body { margin: 0; padding: 0; background: #111; }
-      #app { display: block; }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
@@ -1,26 +1,29 @@
 {
-  "name": "slabuploader-frontend",
+  "name": "slab-uploader-frontend",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
-    "dev": "vite",
-    "build": "tsc --noEmit && vite build",
+    "dev": "vite dev",
+    "build": "vite build",
    "preview": "vite preview",
-    "test": "node --import tsx --test src/**/*.test.ts",
-    "test:e2e": "playwright test",
-    "test:e2e:headed": "playwright test --headed"
-  },
-  "dependencies": {
-    "idb-keyval": "^6.3.0",
-    "svelte": "^4.2.20"
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "test:unit": "vitest run",
+    "test:e2e": "playwright test"
  },
  "devDependencies": {
    "@playwright/test": "^1.63.0",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "svelte-preprocess": "^5.1.4",
-    "tsx": "^4.23.13",
-    "typescript": "^5.7.3",
-    "vite": "^5.4.19"
+    "@sveltejs/adapter-node": "^5.2.0",
+    "@sveltejs/kit": "^2.21.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "playwright": "^1.63.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.1.0",
+    "typescript": "^5.8.0",
+    "vite": "^6.3.0",
+    "vitest": "^3.2.7"
+  },
+  "dependencies": {
+    "idb-keyval": "^6.2.1"
  }
 }
@@ -0,0 +1,17 @@
+import { defineConfig, devices } from '@playwright/test';
+
+// Playwright config for M1 end-to-end tests.
+// base URL points at the LAN UAT container (card M1-6). Override with BASE_URL.
+export default defineConfig({
+	testDir: './tests/e2e',
+	timeout: 60_000,
+	use: {
+		baseURL: process.env.BASE_URL || 'http://192.168.1.202:18080'
+	},
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] }
+		}
+	]
+});
@@ -1,30 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-/**
- * M2 #65 — Playwright visual evidence against local vite preview (not ubudual).
- * Artifacts land in tests/e2e/artifacts/ (png churn gitignored; README committed).
- */
-export default defineConfig({
-  testDir: './tests/e2e',
-  fullyParallel: false,
-  forbidOnly: !!process.env.CI,
-  retries: 0,
-  workers: 1,
-  timeout: 180_000,
-  expect: { timeout: 30_000 },
-  reporter: [['list'], ['html', { open: 'never', outputFolder: 'tests/e2e/playwright-report' }]],
-  use: {
-    baseURL: 'http://127.0.0.1:4173',
-    trace: 'retain-on-failure',
-    screenshot: 'only-on-failure',
-    video: 'off',
-    ...devices['Pixel 7'],
-  },
-  webServer: {
-    command: 'npm run build && npm run preview -- --host 127.0.0.1 --port 4173',
-    url: 'http://127.0.0.1:4173',
-    reuseExistingServer: !process.env.CI,
-    timeout: 180_000,
-  },
-  outputDir: 'tests/e2e/test-results',
-});
@@ -1,104 +0,0 @@
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { supported } from './browser';
-  import { createCaptureSession, type CaptureSession } from './capture/session';
-  import type { Capture } from './capture/capture.types';
-  import Resume from './capture/Resume.svelte';
-  import BatchPhotos from './capture/BatchPhotos.svelte';
-  import PickCalibration from './capture/PickCalibration.svelte';
-  import MaskPanel from './capture/MaskPanel.svelte';
-  import AxisPanel from './capture/AxisPanel.svelte';
-  import MeasurePanel from './capture/MeasurePanel.svelte';
-
-  const gate = typeof window !== 'undefined' ? supported() : 'window unavailable';
-  const session: CaptureSession = createCaptureSession();
-
-  let cap: Capture = { k: 'batch', photos: [] };
-  let busy = false;
-  let pngUrl: string | null = null;
-
-  const unsubCap = session.capture.subscribe((c) => {
-    cap = c;
-    pngUrl = c.k === 'measure' ? session.getInventoryUrl() : null;
-  });
-  const unsubBusy = session.busy.subscribe((b) => {
-    busy = b;
-  });
-
-  onMount(() => {
-    void session.resumeProbe();
-  });
-  onDestroy(() => {
-    unsubCap();
-    unsubBusy();
-    session.dispose();
-  });
-</script>
-
-{#if gate}
-  <main class="hardstop">
-    <h1>Unsupported browser</h1>
-    <p>
-      SlabUploader needs a modern browser with canvas, workers, and IndexedDB support:
-      iOS Safari, Android Chrome, or desktop Chrome, Edge, or Firefox.
-    </p>
-    <p class="detail">Missing: {gate}</p>
-  </main>
-{:else}
-  <main class="app">
-    {#if cap.k === 'resume'}
-      <Resume onContinue={() => session.continueDraft()} onFresh={() => void session.startFresh()} />
-    {:else if cap.k === 'batch'}
-      <BatchPhotos
-        photos={cap.photos}
-        onAdd={(f) => void session.addToBatch(f)}
-        onRemove={session.removeFromBatch}
-        onContinue={session.continueBatch}
-      />
-    {:else if cap.k === 'pickCalibration'}
-      <PickCalibration
-        photos={cap.photos}
-        onPick={session.pickCalibration}
-        onBack={session.back}
-      />
-    {:else if cap.k === 'mask'}
-      <MaskPanel
-        state={cap}
-        {busy}
-        setSensitivity={session.setSensitivity}
-        setSheet={session.setSheet}
-        approveMask={session.approveMask}
-        retakes={session.retakes}
-        back={session.back}
-      />
-    {:else if cap.k === 'axis'}
-      <AxisPanel
-        state={cap}
-        setAxisAngle={session.setAxisAngle}
-        approveAxis={session.approveAxis}
-        back={session.back}
-      />
-    {:else}
-      <MeasurePanel
-        state={cap}
-        setLength={session.setLength}
-        setThickness={session.setThickness}
-        calculate={session.calculate}
-        back={session.back}
-        {pngUrl}
-      />
-    {/if}
-  </main>
-{/if}
-
-<style>
-  :global(body) {
-    margin: 0;
-    background: #121212;
-    font-family: system-ui, -apple-system, Segoe UI, sans-serif;
-  }
-  .app, .hardstop { max-width: 720px; margin: 0 auto; min-height: 100vh; }
-  .hardstop { padding: 48px 24px; color: #eee; text-align: center; }
-  .hardstop h1 { font-size: 1.6rem; }
-  .detail { color: #888; font-size: 0.85rem; }
-</style>
@@ -0,0 +1,32 @@
+:root {
+	--bg: #1a1a1a;
+	--fg: #f2f2f2;
+	--accent: #4f9d69;
+	--checker: repeating-conic-gradient(#e8e8e8 0% 25%, #f7f7f7 0% 50%) 0 0 / 24px 24px;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+	background: var(--bg);
+	color: var(--fg);
+}
+
+button {
+	font: inherit;
+	padding: 0.6rem 1rem;
+	border: 0;
+	border-radius: 8px;
+	background: var(--accent);
+	color: #04140b;
+	font-weight: 600;
+	cursor: pointer;
+}
+button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
@@ -1,26 +0,0 @@
-// Supported clients: iOS Safari, Android Chrome, PC Chrome/Edge/Firefox.
-// Gated on required API presence; anything missing → hard stop.
-export function supported(): string | null {
-  if (typeof window === 'undefined') return 'window unavailable';
-  if (typeof createImageBitmap !== 'function') return 'createImageBitmap';
-  if (typeof Worker === 'undefined') return 'Worker';
-  if (typeof indexedDB === 'undefined') return 'IndexedDB';
-  const hasOffscreen =
-    typeof OffscreenCanvas !== 'undefined' &&
-    typeof OffscreenCanvas.prototype.convertToBlob === 'function';
-  const hasCanvasBlob =
-    typeof HTMLCanvasElement !== 'undefined' &&
-    typeof HTMLCanvasElement.prototype.toBlob === 'function';
-  if (!hasOffscreen && !hasCanvasBlob) return 'canvas PNG encode';
-  const ua = navigator.userAgent;
-  const isIOS = /iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
-  const isAndroid = /Android/i.test(ua);
-  const isSafari = /Safari/i.test(ua) && !/Chrome|CriOS|Edg|Firefox|FxiOS/i.test(ua);
-  const isChrome = /Chrome|CriOS/i.test(ua) && !/Edg/i.test(ua);
-  const isEdge = /Edg/i.test(ua);
-  const isFirefox = /Firefox|FxiOS/i.test(ua);
-  if (isIOS && isSafari) return null;
-  if (isAndroid && isChrome) return null;
-  if (!isIOS && !isAndroid && (isChrome || isEdge || isFirefox)) return null;
-  return 'unsupported browser';
-}
@@ -1,58 +0,0 @@
-<script lang="ts">
-  import type { Capture } from './capture.types';
-  import PhotoStage from './PhotoStage.svelte';
-
-  export let state: Extract<Capture, { k: 'axis' }>;
-  export let setAxisAngle: (deg: number) => void;
-  export let approveAxis: () => void;
-  export let back: () => void;
-
-  $: maskW = state.source.widthPx > 0 ? state.source.widthPx : 0;
-  $: maskH = maskW > 0 ? state.approvedMask.bitset.length / maskW : 0;
-  $: angleDeg = Math.round(state.axis.bbox.angleDeg);
-</script>
-
-<section class="panel">
-  <h1>Length axis</h1>
-  <p class="hint">Rotate the rectangle until it follows the slab length. The rectangle sets direction only; you enter length L on the next step.</p>
-  <PhotoStage
-    blob={state.source.blob}
-    bbox={state.axis.bbox}
-    maskBitset={state.approvedMask.bitset}
-    {maskW}
-    {maskH}
-  />
-  <div class="angle">
-    <button type="button" class="thumb" aria-label="Rotate axis counter-clockwise" on:click={() => setAxisAngle(angleDeg - 1)}>−</button>
-    <input
-      type="range" min="0" max="179" step="1"
-      value={angleDeg}
-      on:input={(e) => setAxisAngle(Number(e.currentTarget.value))}
-    />
-    <button type="button" class="thumb" aria-label="Rotate axis clockwise" on:click={() => setAxisAngle(angleDeg + 1)}>+</button>
-    <span class="val">{angleDeg}°</span>
-  </div>
-  <div class="row">
-    <button type="button" class="ghost" on:click={back}>Back</button>
-    <button type="button" class="primary" on:click={approveAxis}>Approve axis</button>
-  </div>
-</section>
-
-<style>
-  .panel { padding: 16px; color: #eee; }
-  h1 { font-size: 1.3rem; margin: 0 0 8px; }
-  .hint { color: #aaa; font-size: 0.9rem; margin: 0 0 12px; }
-  .angle { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
-  .thumb {
-    width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem;
-    border: 1px solid #444; background: #1d1d1d; color: #eee; flex: none;
-  }
-  input[type='range'] { flex: 1; }
-  .val { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
-  .row { display: flex; gap: 10px; margin-top: 16px; }
-  .primary {
-    flex: 1; padding: 14px; font-size: 1rem; border-radius: 10px; border: 0;
-    background: #00e5ff; color: #002; font-weight: 700;
-  }
-  .ghost { flex: 0.7; padding: 14px; border-radius: 10px; border: 1px solid #444; background: transparent; color: #ccc; }
-</style>
@@ -1,102 +0,0 @@
-<script lang="ts">
-  import { onDestroy } from 'svelte';
-  import type { Source } from './capture.types';
-
-  export let photos: Source[];
-  export let onAdd: (f: File) => void;
-  export let onRemove: (index: number) => void;
-  export let onContinue: () => void;
-
-  let urls: string[] = [];
-
-  $: {
-    for (const u of urls) URL.revokeObjectURL(u);
-    urls = photos.map((p) => URL.createObjectURL(p.blob));
-  }
-
-  onDestroy(() => {
-    for (const u of urls) URL.revokeObjectURL(u);
-  });
-
-  const pick = (e: Event) => {
-    const input = e.target as HTMLInputElement;
-    const list = input.files;
-    if (!list || list.length === 0) return;
-    // Support multi-select from gallery when the browser allows it.
-    for (let i = 0; i < list.length; i++) onAdd(list[i]);
-    input.value = '';
-  };
-
-  $: canContinue = photos.length >= 1;
-</script>
-
-<section class="panel">
-  <h1>Batch photos</h1>
-  <ul class="setup">
-    <li>Sheet is green or black, fills the frame around the slab.</li>
-    <li>Slab fully on the sheet, nothing on top of it.</li>
-    <li>Top-down reference shot: lens parallel to the face.</li>
-    <li>Slab length along the long side of the picture.</li>
-    <li>Add one or more photos of the same slab, then Continue.</li>
-  </ul>
-
-  {#if photos.length > 0}
-    <ul class="thumbs" aria-label="Batch photos">
-      {#each photos as _p, i (urls[i])}
-        <li class="thumb">
-          <img src={urls[i]} alt={`Batch photo ${i + 1}`} />
-          <button type="button" class="rm" aria-label={`Remove photo ${i + 1}`} on:click={() => onRemove(i)}>Remove</button>
-        </li>
-      {/each}
-    </ul>
-  {:else}
-    <p class="empty">No photos yet. Add at least one to continue.</p>
-  {/if}
-
-  <div class="pick">
-    <label class="pick-btn">Take photo
-      <input type="file" accept="image/*" capture="environment" on:change={pick} />
-    </label>
-    <label class="pick-btn">Choose from gallery
-      <input type="file" accept="image/*" multiple on:change={pick} />
-    </label>
-  </div>
-
-  <button
-    class="continue"
-    type="button"
-    disabled={!canContinue}
-    on:click={onContinue}
-  >Continue</button>
-</section>
-
-<style>
-  .panel { padding: 24px 16px; color: #eee; }
-  h1 { font-size: 1.4rem; }
-  .setup { color: #bbb; line-height: 1.6; font-size: 0.95rem; }
-  .empty { color: #888; margin: 16px 0; }
-  .thumbs {
-    list-style: none; padding: 0; margin: 16px 0;
-    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px;
-  }
-  .thumb {
-    background: #1e1e1e; border-radius: 8px; overflow: hidden;
-    display: flex; flex-direction: column;
-  }
-  .thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #000; }
-  .rm {
-    border: 0; background: #333; color: #ccc; padding: 8px; font-size: 0.85rem; cursor: pointer;
-  }
-  .pick { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
-  .pick-btn {
-    background: #00e5ff; color: #002; border: 0; border-radius: 8px;
-    padding: 12px 20px; font-size: 1rem; font-weight: 600;
-    text-align: center; cursor: pointer;
-  }
-  .pick-btn input[type='file'] { display: none; }
-  .continue {
-    margin-top: 20px; width: 100%; padding: 14px; font-size: 1.05rem; border-radius: 10px; border: 0;
-    background: #00e5ff; color: #002; font-weight: 700; cursor: pointer;
-  }
-  .continue:disabled { opacity: 0.35; cursor: not-allowed; }
-</style>
@@ -1,93 +0,0 @@
-<script lang="ts">
-  import type { Capture, Sheet } from './capture.types';
-  import PhotoStage from './PhotoStage.svelte';
-
-  export let state: Extract<Capture, { k: 'mask' }>;
-  export let busy: boolean;
-  export let setSensitivity: (n: number) => void;
-  export let setSheet: (s: Sheet) => void;
-  export let approveMask: () => void;
-  export let retakes: () => void;
-  export let back: () => void;
-
-  const sheets: Sheet[] = ['auto', 'green', 'black'];
-  $: empty = state.overlay !== null && state.overlay.slabPx === 0;
-  $: maskW = state.overlay && state.source.widthPx > 0 ? state.source.widthPx : 0;
-  $: maskH = maskW > 0 && state.overlay ? state.overlay.bitset.length / maskW : 0;
-  $: canApprove = state.overlay !== null && state.overlay.slabPx > 0;
-</script>
-
-<section class="panel">
-  <h1>Mask</h1>
-  <div class="stage-wrap">
-    <PhotoStage
-      blob={state.source.blob}
-      maskBitset={state.overlay?.bitset ?? null}
-      {maskW}
-      {maskH}
-    />
-    {#if busy}<div class="busy">Working…</div>{/if}
-    {#if state.failed}<div class="warn">Mask pass failed. Adjust and retry, or retake the photo.</div>{/if}
-    {#if empty}<div class="warn">No slab pixels in the mask. Adjust sensitivity or retake.</div>{/if}
-  </div>
-
-  <div class="controls">
-    <div class="seg" role="group" aria-label="Sheet">
-      {#each sheets as s (s)}
-        <button type="button" class:active={state.control.sheet === s} on:click={() => setSheet(s)}>
-          {s[0].toUpperCase() + s.slice(1)}
-        </button>
-      {/each}
-    </div>
-    <div class="sens">
-      <button type="button" class="thumb" aria-label="Decrease sensitivity" on:click={() => setSensitivity(state.control.sensitivity - 1)}>−</button>
-      <input
-        type="range" min="0" max="100" step="1"
-        value={state.control.sensitivity}
-        on:input={(e) => setSensitivity(Number(e.currentTarget.value))}
-      />
-      <button type="button" class="thumb" aria-label="Increase sensitivity" on:click={() => setSensitivity(state.control.sensitivity + 1)}>+</button>
-      <span class="val">{state.control.sensitivity}</span>
-    </div>
-  </div>
-
-  <div class="row">
-    <button type="button" class="ghost" on:click={back}>Back</button>
-    <button type="button" class="ghost" on:click={retakes}>Retake</button>
-    <button type="button" class="primary" disabled={!canApprove} on:click={approveMask}>
-      Approve mask
-    </button>
-  </div>
-</section>
-
-<style>
-  .panel { padding: 16px; color: #eee; }
-  h1 { font-size: 1.3rem; margin: 0 0 12px; }
-  .stage-wrap { position: relative; }
-  .busy {
-    position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.7);
-    color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 0.85rem;
-  }
-  .warn { color: #ffb4a2; margin-top: 8px; font-size: 0.9rem; }
-  .controls { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
-  .seg { display: flex; gap: 8px; }
-  .seg button {
-    flex: 1; padding: 12px; font-size: 1rem; border-radius: 8px;
-    border: 1px solid #444; background: #1d1d1d; color: #ccc;
-  }
-  .seg button.active { background: #00e5ff; color: #002; font-weight: 700; border-color: #00e5ff; }
-  .sens { display: flex; align-items: center; gap: 10px; }
-  .thumb {
-    width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem;
-    border: 1px solid #444; background: #1d1d1d; color: #eee; flex: none;
-  }
-  input[type='range'] { flex: 1; }
-  .val { min-width: 2.2ch; text-align: right; font-variant-numeric: tabular-nums; }
-  .row { display: flex; gap: 12px; margin-top: 20px; }
-  .primary {
-    flex: 2; padding: 14px; font-size: 1.05rem; border-radius: 10px; border: 0;
-    background: #00e5ff; color: #002; font-weight: 700;
-  }
-  .primary:disabled { background: #333; color: #777; }
-  .ghost { flex: 1; padding: 14px; border-radius: 10px; border: 1px solid #444; background: transparent; color: #ccc; }
-</style>
@@ -1,227 +0,0 @@
-<script lang="ts">
-  import { onDestroy } from 'svelte';
-  import type { Capture } from './capture.types';
-  import { inToEighths, eighthsToIn } from './capture.types';
-  import { fmtEighths } from './session';
-  import PhotoStage from './PhotoStage.svelte';
-  import {
-    buildPhotosReadyLineup,
-    photosReadyPngAlt,
-    type PhotosReadyLineupItem,
-  } from './photosReadyLineup';
-
-  export let state: Extract<Capture, { k: 'measure' }>;
-  export let setLength: (e: number) => void;
-  export let setThickness: (e: number) => void;
-  export let calculate: () => Promise<void>;
-  export let back: () => void;
-  export let pngUrl: string | null;
-
-  let calcBusy = false;
-  let lengthIn = state.lengthEighths === 0 ? '' : String(eighthsToIn(state.lengthEighths));
-  let thicknessIn = state.thicknessEighths === 0 ? '' : String(eighthsToIn(state.thicknessEighths));
-
-  let lineupUrls: string[] = [];
-  let lineupItems: PhotosReadyLineupItem[] = [];
-
-  $: photosReady = !!state.results;
-  $: {
-    for (const u of lineupUrls) URL.revokeObjectURL(u);
-    lineupUrls = [];
-    if (state.results) {
-      lineupItems = buildPhotosReadyLineup({
-        inventoryPng: state.results.inventoryPng,
-        overlayPng: state.results.overlayPng,
-        batchApply: state.batchApply,
-        sourceBelowFloor: state.results.sourceBelowFloor,
-      });
-      lineupUrls = lineupItems.map((it) =>
-        it.kind === 'png' ? URL.createObjectURL(it.blob) : '',
-      );
-    } else {
-      lineupItems = [];
-    }
-  }
-
-  onDestroy(() => {
-    for (const u of lineupUrls) URL.revokeObjectURL(u);
-  });
-
-  const positiveInches = (raw: string): number | null => {
-    const inches = Number.parseFloat(raw);
-    return Number.isFinite(inches) && inches > 0 ? inches : null;
-  };
-
-  const commitLength = () => {
-    const inches = positiveInches(String(lengthIn));
-    const eighths = inches === null ? 0 : inToEighths(inches);
-    setLength(eighths);
-    lengthIn = eighths === 0 ? '' : String(eighthsToIn(eighths));
-  };
-  const commitThickness = () => {
-    const inches = positiveInches(String(thicknessIn));
-    const eighths = inches === null ? 0 : inToEighths(inches);
-    setThickness(eighths);
-    thicknessIn = eighths === 0 ? '' : String(eighthsToIn(eighths));
-  };
-
-  $: canCalc = positiveInches(String(lengthIn)) !== null && positiveInches(String(thicknessIn)) !== null;
-
-  const doCalc = async () => {
-    calcBusy = true;
-    try {
-      commitLength();
-      commitThickness();
-      await calculate();
-    } finally { calcBusy = false; }
-  };
-</script>
-
-<section class="panel">
-  <h1>{photosReady ? 'Photos ready' : 'Measure'}</h1>
-
-  {#if !photosReady}
-    <PhotoStage
-      blob={state.source.blob}
-      bbox={state.axis.bbox}
-      maskBitset={state.approvedMask.bitset}
-      maskW={state.source.widthPx > 0 ? state.source.widthPx : 0}
-      maskH={state.source.widthPx > 0 ? state.approvedMask.bitset.length / state.source.widthPx : 0}
-    />
-
-    <div class="fields">
-      <div class="field">
-        <span class="label">Length L</span>
-        <input
-          type="number"
-          aria-label="Length L"
-          inputmode="decimal"
-          step="0.125"
-          min="0"
-          placeholder="0"
-          bind:value={lengthIn}
-          on:blur={commitLength}
-          on:change={commitLength}
-        />
-      </div>
-      <div class="field">
-        <span class="label">Thickness</span>
-        <input
-          type="number"
-          aria-label="Thickness"
-          inputmode="decimal"
-          step="0.125"
-          min="0"
-          placeholder="0"
-          bind:value={thicknessIn}
-          on:blur={commitThickness}
-          on:change={commitThickness}
-        />
-      </div>
-    </div>
-
-    <div class="row">
-      <button type="button" class="ghost" on:click={back}>Back</button>
-      <button
-        type="button"
-        class="primary"
-        disabled={calcBusy || !canCalc}
-        on:click={doCalc}
-      >
-        {calcBusy ? 'Calculating…' : 'Calculate'}
-      </button>
-    </div>
-  {:else if state.results}
-    <div class="results" aria-label="Photos ready">
-      <div class="nums">
-        <div><span>Widths</span><span>{fmtEighths(state.results.widths.min)} – {fmtEighths(state.results.widths.max)} (avg {fmtEighths(state.results.widths.avg)})</span></div>
-        <div><span>Sqft</span><span>{state.results.sqft.toFixed(2)}</span></div>
-        <div><span>Bdft</span><span>{state.results.bdft.toFixed(2)}</span></div>
-        <div><span>Scale</span><span>{state.results.scale.toFixed(2)} px/in</span></div>
-      </div>
-      {#if state.results.sourceBelowFloor}
-        <div class="warn">Source is below the 800px floor for the inventory PNG. Retake a larger photo.</div>
-      {/if}
-
-      <ol class="lineup" aria-label="Inventory PNG lineup">
-        {#each lineupItems as item, i (i)}
-          {#if item.kind === 'png'}
-            <li class="lineup-item png">
-              <img src={lineupUrls[i]} alt={photosReadyPngAlt(item)} />
-              <span class="role">
-                {#if item.role === 'calibration'}
-                  Clean calibration
-                {:else if item.role === 'overlay'}
-                  Dimension overlay
-                {:else}
-                  Batch photo {(item.batchIndex ?? 0) + 1}
-                {/if}
-              </span>
-            </li>
-          {:else}
-            <li class="lineup-item error" role="alert">
-              <span class="err-title">Photo {item.batchIndex + 1} failed</span>
-              <span class="err-msg">{item.message}</span>
-            </li>
-          {/if}
-        {/each}
-      </ol>
-
-      <!-- Legacy single-PNG fallback only when lineup helper yielded nothing but pngUrl exists -->
-      {#if lineupItems.length === 0 && pngUrl && !state.results.sourceBelowFloor}
-        <div class="png-wrap">
-          <img src={pngUrl} alt="Inventory PNG" />
-        </div>
-      {/if}
-    </div>
-
-    <div class="row">
-      <button type="button" class="ghost" on:click={back}>Back</button>
-    </div>
-  {/if}
-</section>
-
-<style>
-  .panel { padding: 16px; color: #eee; }
-  h1 { font-size: 1.3rem; margin: 0 0 12px; }
-  .fields { display: flex; gap: 16px; margin-top: 16px; }
-  .field { flex: 1; }
-  .label { display: block; font-size: 0.9rem; color: #aaa; margin-bottom: 8px; }
-  .field input {
-    box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px; font-size: 1rem;
-    border-radius: 10px; border: 1px solid #444; background: #1d1d1d; color: #eee;
-    font-variant-numeric: tabular-nums;
-  }
-  .row { display: flex; gap: 10px; margin-top: 20px; }
-  .primary {
-    flex: 2; padding: 14px; font-size: 1.05rem; border-radius: 10px; border: 0;
-    background: #00e5ff; color: #002; font-weight: 700;
-  }
-  .primary:disabled { background: #333; color: #777; }
-  .ghost { flex: 1; padding: 14px; border-radius: 10px; border: 1px solid #444; background: transparent; color: #ccc; }
-  .results { margin-top: 8px; }
-  .nums { display: flex; flex-direction: column; gap: 8px; }
-  .nums div { display: flex; justify-content: space-between; border-bottom: 1px solid #2a2a2a; padding-bottom: 6px; }
-  .nums span:first-child { color: #aaa; }
-  .warn { color: #ffb4a2; margin-top: 12px; font-size: 0.9rem; }
-  .lineup {
-    list-style: none; padding: 0; margin: 16px 0 0;
-    display: flex; flex-direction: column; gap: 14px;
-  }
-  .lineup-item.png {
-    text-align: center;
-    background-image: linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);
-    background-size: 16px 16px; background-position: 0 0,0 8px,8px -8px,-8px 0;
-    background-color: #eee; border-radius: 8px; padding: 8px;
-  }
-  .lineup-item.png img { max-width: 100%; border-radius: 4px; display: block; margin: 0 auto; }
-  .role { display: block; margin-top: 8px; font-size: 0.85rem; color: #222; font-weight: 600; }
-  .lineup-item.error {
-    border: 1px solid #8a3a2a; background: #2a1512; border-radius: 8px;
-    padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
-  }
-  .err-title { color: #ffb4a2; font-weight: 700; font-size: 0.95rem; }
-  .err-msg { color: #e8cfc8; font-size: 0.9rem; }
-  .png-wrap { margin-top: 16px; text-align: center; background-image: linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%); background-size: 16px 16px; background-position: 0 0,0 8px,8px -8px,-8px 0; background-color: #eee; border-radius: 8px; padding: 8px; }
-  .png-wrap img { max-width: 100%; border-radius: 4px; }
-</style>
@@ -1,138 +0,0 @@
-<script lang="ts">
-  import { onDestroy, onMount, tick } from 'svelte';
-  import type { BBox } from './capture.types';
-  import { fitDisplay } from './fitDisplay';
-
-  // Display-only: renders the photo fitted to device width (height capped) plus
-  // one overlay layer. All math lives on source pixels, not this canvas.
-  export let blob: Blob;
-  export let maxH = 420;
-  export let bbox: BBox | null = null;
-  export let maskBitset: Uint8Array | null = null;
-  export let maskW = 0;
-  export let maskH = 0;
-
-  let url: string | null = null;
-  let canvas: HTMLCanvasElement | undefined;
-  let stage: HTMLDivElement | undefined;
-  let imgW = 0, imgH = 0; // source px, learned once per blob
-  let parentW = 0;
-
-  const setBlobUrl = (b: Blob) => {
-    if (url) URL.revokeObjectURL(url);
-    url = URL.createObjectURL(b);
-  };
-
-  $: if (blob) {
-    setBlobUrl(blob);
-    imgW = 0;
-  }
-
-  const applyFit = () => {
-    if (!canvas || !imgW) return;
-    if (parentW <= 0 && stage) parentW = stage.clientWidth;
-    const fit = fitDisplay(parentW, imgW, imgH, maxH);
-    if (!fit) return;
-    canvas.style.width = `${fit.fitW}px`;
-    canvas.style.height = `${fit.fitH}px`;
-  };
-
-  const redraw = () => {
-    if (!url || !canvas) return;
-    const ctx = canvas.getContext('2d')!;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    const img = new Image();
-    img.onload = () => {
-      if (!canvas) return;
-      imgW = img.width;
-      imgH = img.height;
-      canvas.width = imgW;
-      canvas.height = imgH;
-      applyFit();
-      ctx.drawImage(img, 0, 0);
-      if (maskBitset && maskW > 0 && maskH > 0) {
-        const off = document.createElement('canvas');
-        off.width = maskW;
-        off.height = maskH;
-        const octx = off.getContext('2d')!;
-        const d = octx.createImageData(maskW, maskH);
-        const tile = 8;
-        for (let p = 0; p < maskW * maskH; p++) {
-          if (!maskBitset[p]) {
-            const x = p % maskW;
-            const y = (p / maskW) | 0;
-            const light = ((x / tile) | 0) % 2 === ((y / tile) | 0) % 2;
-            d.data[p * 4] = light ? 220 : 180;
-            d.data[p * 4 + 1] = light ? 220 : 180;
-            d.data[p * 4 + 2] = light ? 220 : 180;
-            d.data[p * 4 + 3] = 220;
-          }
-        }
-        octx.putImageData(d, 0, 0);
-        ctx.drawImage(off, 0, 0, canvas.width, canvas.height);
-      }
-      if (bbox && bbox.corners.length === 4) {
-        const c = bbox.corners;
-        ctx.strokeStyle = '#00e5ff';
-        ctx.lineWidth = Math.max(2, canvas.width / 400);
-        ctx.beginPath();
-        ctx.moveTo(c[0][0], c[0][1]);
-        for (let i = 1; i < 4; i++) ctx.lineTo(c[i][0], c[i][1]);
-        ctx.closePath();
-        ctx.stroke();
-        // The axis reads corners[3] → corners[0], the long side.
-        const a = c[3];
-        const b = c[0];
-        ctx.strokeStyle = '#ff3d71';
-        ctx.lineWidth = Math.max(3, canvas.width / 300);
-        ctx.beginPath();
-        ctx.moveTo(a[0], a[1]);
-        ctx.lineTo(b[0], b[1]);
-        ctx.stroke();
-        ctx.fillStyle = '#ff3d71';
-        ctx.beginPath();
-        const ang = Math.atan2(b[1] - a[1], b[0] - a[0]);
-        const r = Math.max(10, canvas.width / 60);
-        ctx.moveTo(b[0], b[1]);
-        ctx.lineTo(b[0] - r * Math.cos(ang - 0.4), b[1] - r * Math.sin(ang - 0.4));
-        ctx.lineTo(b[0] - r * Math.cos(ang + 0.4), b[1] - r * Math.sin(ang + 0.4));
-        ctx.closePath();
-        ctx.fill();
-      }
-    };
-    img.src = url;
-  };
-
-  $: if (url || bbox || maskBitset) void tick().then(redraw);
-
-  onMount(() => {
-    if (stage) parentW = stage.clientWidth;
-    const ro = new ResizeObserver((entries) => {
-      const e = entries[0];
-      if (!e) return;
-      const w = e.contentRect.width;
-      if (w === parentW) return;
-      parentW = w;
-      applyFit();
-    });
-    if (stage) ro.observe(stage);
-    return () => ro.disconnect();
-  });
-  onDestroy(() => {
-    if (url) URL.revokeObjectURL(url);
-  });
-</script>
-
-<div class="stage" bind:this={stage}>
-  {#if url}
-    <canvas bind:this={canvas}></canvas>
-  {:else}
-    <div class="loading">Decoding photo…</div>
-  {/if}
-</div>
-
-<style>
-  .stage { width: 100%; display: flex; justify-content: center; }
-  canvas { display: block; border-radius: 8px; background: #222; }
-  .loading { padding: 40px; color: #999; }
-</style>
@@ -1,66 +0,0 @@
-<script lang="ts">
-  import { onDestroy } from 'svelte';
-  import type { Source } from './capture.types';
-
-  export let photos: Source[];
-  export let onPick: (index: number) => void;
-  export let onBack: () => void;
-
-  let urls: string[] = [];
-
-  $: {
-    for (const u of urls) URL.revokeObjectURL(u);
-    urls = photos.map((p) => URL.createObjectURL(p.blob));
-  }
-
-  onDestroy(() => {
-    for (const u of urls) URL.revokeObjectURL(u);
-  });
-</script>
-
-<section class="panel">
-  <h1>Pick calibration photo</h1>
-  <p class="hint">
-    Choose which photo is the top-down reference for length and thickness.
-    Mask, length axis, and Measure run on that photo only.
-  </p>
-
-  <ul class="thumbs" aria-label="Calibration candidates">
-    {#each photos as _p, i (urls[i])}
-      <li class="thumb">
-        <img src={urls[i]} alt={`Photo ${i + 1}`} />
-        <button
-          type="button"
-          class="pick"
-          aria-label={`Use photo ${i + 1} as calibration`}
-          on:click={() => onPick(i)}
-        >Use as calibration</button>
-      </li>
-    {/each}
-  </ul>
-
-  <button class="back" type="button" on:click={onBack}>Back</button>
-</section>
-
-<style>
-  .panel { padding: 24px 16px; color: #eee; }
-  h1 { font-size: 1.4rem; }
-  .hint { color: #bbb; line-height: 1.5; font-size: 0.95rem; }
-  .thumbs {
-    list-style: none; padding: 0; margin: 16px 0;
-    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
-  }
-  .thumb {
-    background: #1e1e1e; border-radius: 8px; overflow: hidden;
-    display: flex; flex-direction: column;
-  }
-  .thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #000; }
-  .pick {
-    border: 0; background: #00e5ff; color: #002; padding: 10px 8px;
-    font-size: 0.9rem; font-weight: 700; cursor: pointer;
-  }
-  .back {
-    margin-top: 8px; width: 100%; padding: 12px; font-size: 1rem; border-radius: 10px;
-    border: 1px solid #444; background: transparent; color: #ccc; cursor: pointer;
-  }
-</style>
@@ -1,28 +0,0 @@
-<script lang="ts">
-  export let onContinue: () => void;
-  export let onFresh: () => void;
-</script>
-
-<section class="panel">
-  <h1>Resume?</h1>
-  <p>You have an in-progress slab on this device.</p>
-  <div class="row">
-    <button class="primary" type="button" on:click={onContinue}>Continue</button>
-    <button class="ghost" type="button" on:click={onFresh}>Start fresh</button>
-  </div>
-</section>
-
-<style>
-  .panel { padding: 24px 16px; text-align: center; color: #eee; }
-  h1 { font-size: 1.4rem; }
-  p { color: #aaa; }
-  .row { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
-  .primary {
-    flex: 1; max-width: 200px; padding: 14px; font-size: 1.05rem; border-radius: 10px; border: 0;
-    background: #00e5ff; color: #002; font-weight: 700;
-  }
-  .ghost {
-    flex: 1; max-width: 200px; padding: 14px; border-radius: 10px; border: 1px solid #444;
-    background: transparent; color: #ccc;
-  }
-</style>
@@ -1,168 +0,0 @@
-// Domain model for the capture flow (M1 + M2 batch).
-// The Capture tagged union is the state machine: each branch carries exactly the
-// data its state can hold, so an illegal state is a type error.
-
-// Integer eighths of an inch; divide by 8 only at display.
-export type Eighths = number;
-
-export const inToEighths = (inches: number): Eighths => Math.round(inches * 8);
-export const eighthsToIn = (e: Eighths): number => e / 8;
-
-// Source: all geometry, measurement, and PNG work uses source pixels, never the
-// CSS size of the preview.
-export interface Source {
-  widthPx: number;
-  heightPx: number;
-  blob: Blob;
-}
-
-export type Sheet = 'auto' | 'green' | 'black';
-export interface MaskParams {
-  sheet: Sheet;
-  sensitivity: number; // 0–100, step 1
-}
-
-// Axis-aligned box, source px.
-export interface ABox {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-}
-
-// Minimum-area bounding rectangle of the mask, source px.
-export interface BBox {
-  corners: [number, number][]; // 4 corners; corners[3] → corners[0] is the long side
-  longSidePx: number; // geometric extent only; scale uses mask span along the axis
-  angleDeg: number; // long-side angle, degrees, [0, 180)
-}
-
-// The approved mask is the footprint for axis, measurement, and the inventory PNG.
-export interface Mask {
-  params: MaskParams;
-  slabPx: number; // 0 ⇒ approve blocked, user retakes
-  bitset: Uint8Array; // source-grid mask, 1 byte/px
-  bbox: BBox;
-  slabBounds: ABox; // axis-aligned extent of slab px, for the 80%-fill PNG crop
-}
-
-// Direction only: an oriented rectangle over the slab. The arrow reads
-// corners[3] → corners[0] (the long side).
-export interface Axis {
-  bbox: BBox;
-}
-
-export interface Widths {
-  min: Eighths;
-  max: Eighths;
-  avg: Eighths;
-  every6In: Eighths[];
-}
-
-export interface Measures {
-  lengthEighths: Eighths;
-  thicknessEighths: Eighths;
-  scale: number; // px per inch
-  widths: Widths;
-  sqft: number; // 2 dp
-  bdft: number; // 2 dp
-  inventoryPng: Blob;
-  /** Dimension-overlay copy of the calibration inventory PNG (#63). */
-  overlayPng?: Blob;
-  sourceBelowFloor: boolean;
-}
-
-// Result of applying the calibration mask to one batch sibling. The
-// calibration slot is null because its inventory PNG lives in Measures.
-export type BatchPhotoResult =
-  | null
-  | { status: 'ok'; inventoryPng: Blob }
-  | { status: 'error'; message: string };
-
-// The machine. 'resume' exists only while a draft exists and has not been chosen.
-// M2: 'batch' + 'pickCalibration' replace M1 'addPhoto' — accumulate, then user picks calibration.
-export type Capture =
-  | { k: 'resume'; draft: Draft }
-  | { k: 'batch'; photos: Source[] }
-  | { k: 'pickCalibration'; photos: Source[] }
-  | {
-      k: 'mask';
-      source: Source;
-      control: MaskParams; // immediate control value (what the UI shows)
-      overlay: Mask | null; // last settled mask; null until first pass
-      failed: boolean;
-    }
-  | {
-      k: 'axis';
-      source: Source;
-      approvedMask: Mask; // frozen footprint
-      axis: Axis; // live axis.bbox being nudged
-    }
-  | {
-      k: 'measure';
-      source: Source;
-      approvedMask: Mask;
-      axis: Axis; // frozen
-      lengthEighths: Eighths;
-      thicknessEighths: Eighths;
-      results: Measures | null;
-      /** Capture-order sibling results from the post-Calculate batch pass. */
-      batchApply?: BatchPhotoResult[];
-    };
-
-// Placeholder geometry for batch-only drafts (no mask yet).
-export const EMPTY_BBOX: BBox = {
-  corners: [
-    [0, 0],
-    [0, 0],
-    [0, 0],
-    [0, 0],
-  ],
-  longSidePx: 0,
-  angleDeg: 0,
-};
-export const EMPTY_ABOX: ABox = { x: 0, y: 0, w: 0, h: 0 };
-export const DEFAULT_MASK_PARAMS: MaskParams = { sheet: 'auto', sensitivity: 50 };
-
-// Device draft (IndexedDB): one in-progress slab. Small by design — the bitset
-// and PNG are re-derived from stored data, never stored second-hand.
-// M2 extends with `batch` (capture-order photo blobs). Legacy M1 drafts omit it.
-export interface Draft {
-  version: 1;
-  stage: 'batch' | 'pickCalibration' | 'mask' | 'axis' | 'measure'; // last approved / persisted state
-  /** Capture-order batch. Absent on legacy M1 drafts ⇒ treat as [source]. */
-  batch?: Source[];
-  /** Index into batch of the user-picked calibration photo. Set once picked. */
-  calibrationIndex?: number;
-  source: Source; // calibration / active photo; for stage==='batch'|'pickCalibration' = photos[0] placeholder
-  maskParams: MaskParams; // → re-derive mask on resume (ignored while stage==='batch')
-  mask: Omit<Mask, 'bitset' | 'params'>; // slabPx, bbox, slabBounds
-  axisBbox?: BBox | null; // present when stage >= axis; absent on legacy drafts
-  lengthEighths: Eighths;
-  thicknessEighths: Eighths;
-  results: Omit<Measures, 'inventoryPng' | 'overlayPng'> | null; // present when results computed
-  inventoryPng: Blob | null; // stored so Continue can show Measure results
-  /** Dimension-overlay calibration PNG; kept out of batchApply[cal] (#63). */
-  overlayPng?: Blob | null;
-  /** Capture-order batch apply results; blobs are retained for the #64 lineup. */
-  batchApply?: BatchPhotoResult[];
-}
-
-// Worker protocol. Job ids increase; the worker drops anything older than the
-// current id, so a stale result can never blank a newer one.
-export type WorkerIn =
-  | { id: number; kind: 'init'; blob: Blob }
-  | { id: number; kind: 'mask'; sheet: Sheet; sensitivity: number }
-  | { id: number; kind: 'invalidate' };
-
-export type WorkerOut =
-  | { id: number; kind: 'decoded'; w: number; h: number }
-  | {
-      id: number;
-      kind: 'ready';
-      slabPx: number;
-      bitset: Uint8Array;
-      bbox: BBox;
-      slabBounds: ABox;
-    }
-  | { id: number; kind: 'failed'; reason: string };
@@ -1,26 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import { fitDisplay } from './fitDisplay.ts';
-
-test('parentW=0 → null (no size until laid out)', () => {
-  assert.equal(fitDisplay(0, 1000, 750, 420), null);
-  assert.equal(fitDisplay(-5, 1000, 750, 420), null);
-});
-
-test('280 wide, 4:3 landscape → contain, under the height cap', () => {
-  const fit = fitDisplay(280, 1600, 1200, 420);
-  assert.ok(fit);
-  assert.equal(fit.fitW, 280);
-  assert.ok(Math.abs(fit.fitH - 210) < 1e-9);
-  assert.ok(fit.fitH <= 420);
-});
-
-test('portrait under maxH never stretches: height capped, width shrinks', () => {
-  // 1000 wide source, 3000 tall. Full-width fit would be 900 tall > 420.
-  const fit = fitDisplay(400, 1000, 3000, 420);
-  assert.ok(fit);
-  assert.equal(fit.fitH, 420);
-  assert.ok(Math.abs(fit.fitW - 140) < 1e-9);
-  // aspect preserved: fitW/fitH === imgW/imgH
-  assert.ok(Math.abs(fit.fitW / fit.fitH - 1000 / 3000) < 1e-9);
-});
@@ -1,17 +0,0 @@
-// Contain-fit of an image into a parent width with a height cap. Pure and
-// display-only; all measurement math stays on source pixels.
-// Null when the parent is not laid out yet (clientWidth 0) — the caller must
-// not finalize CSS size until it is, to avoid a wrong-aspect flash.
-export function fitDisplay(
-  parentW: number, imgW: number, imgH: number, maxH: number,
-): { fitW: number; fitH: number } | null {
-  if (parentW <= 0 || imgW <= 0 || imgH <= 0) return null;
-  const fitW = parentW;
-  let fitH = (imgH / imgW) * fitW;
-  if (fitH > maxH) {
-    // Cap height and shrink width to preserve aspect; never stretch.
-    fitH = maxH;
-    return { fitW: (fitH * imgW) / imgH, fitH };
-  }
-  return { fitW, fitH };
-}
@@ -1,42 +0,0 @@
-import assert from 'node:assert/strict';
-import { readFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { test } from 'node:test';
-import { inToEighths } from './capture.types';
-
-const panelSrc = readFileSync(
-  join(dirname(fileURLToPath(import.meta.url)), 'MeasurePanel.svelte'),
-  'utf8',
-);
-
-test('MeasurePanel exposes typed number inputs for Length L and Thickness', () => {
-  const inputs = panelSrc.match(/<input\b[^>]*>/g) ?? [];
-  assert.ok(inputs.length >= 2, 'expected at least two <input> fields');
-  assert.ok(
-    inputs.some((el) => /type="number"/.test(el) && /aria-label="Length L"/.test(el)),
-    'Length L must be a type=number input',
-  );
-  assert.ok(
-    inputs.some((el) => /type="number"/.test(el) && /aria-label="Thickness"/.test(el)),
-    'Thickness must be a type=number input',
-  );
-  assert.equal(
-    panelSrc.includes('class="stepper"'),
-    false,
-    'stepper-only UI is the UAT fail; primary control must be typed input',
-  );
-  assert.equal(
-    /<span class="v">\{fmtEighths\(state\.lengthEighths\)\}<\/span>/.test(panelSrc),
-    false,
-    'Length must not be a read-only fmtEighths span',
-  );
-});
-
-test('typed inches snap to nearest 1/8 via inToEighths', () => {
-  assert.equal(inToEighths(12), 96);
-  assert.equal(inToEighths(12.1), 97);
-  assert.equal(inToEighths(0.06), 0);
-  assert.equal(inToEighths(0.07), 1);
-  assert.equal(inToEighths(1.999), 16);
-});
@@ -1,207 +0,0 @@
-import assert from 'node:assert/strict';
-import { readFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { test } from 'node:test';
-import type { BatchPhotoResult } from './capture.types';
-import {
-  buildPhotosReadyLineup,
-  type PhotosReadyLineupItem,
-} from './photosReadyLineup';
-
-const here = dirname(fileURLToPath(import.meta.url));
-
-function png(label: string): Blob {
-  return new Blob([label], { type: 'image/png' });
-}
-
-function jpeg(label: string): Blob {
-  return new Blob([label], { type: 'image/jpeg' });
-}
-
-function roles(items: PhotosReadyLineupItem[]): string[] {
-  return items.map((it) =>
-    it.kind === 'png' ? `png:${it.role}` : `error:${it.batchIndex}`,
-  );
-}
-
-// --- pure helper: lineup order + error slots (#64) ---
-
-test('test(photos): lineup is clean cal → overlay → other batch PNGs in capture order (#64)', () => {
-  const clean = png('clean-cal');
-  const overlay = png('overlay-cal');
-  const sib0 = png('sib-0');
-  const sib2 = png('sib-2');
-  const batchApply: BatchPhotoResult[] = [
-    { status: 'ok', inventoryPng: sib0 },
-    null, // calibration at index 1
-    { status: 'ok', inventoryPng: sib2 },
-  ];
-
-  const lineup = buildPhotosReadyLineup({
-    inventoryPng: clean,
-    overlayPng: overlay,
-    batchApply,
-  });
-
-  assert.deepEqual(roles(lineup), [
-    'png:calibration',
-    'png:overlay',
-    'png:batch',
-    'png:batch',
-  ]);
-  assert.equal(lineup[0].kind, 'png');
-  if (lineup[0].kind === 'png') {
-    assert.equal(lineup[0].blob, clean);
-    assert.equal(lineup[0].role, 'calibration');
-  }
-  assert.equal(lineup[1].kind, 'png');
-  if (lineup[1].kind === 'png') {
-    assert.equal(lineup[1].blob, overlay);
-    assert.equal(lineup[1].role, 'overlay');
-  }
-  assert.equal(lineup[2].kind, 'png');
-  if (lineup[2].kind === 'png') {
-    assert.equal(lineup[2].blob, sib0);
-    assert.equal(lineup[2].batchIndex, 0);
-  }
-  assert.equal(lineup[3].kind, 'png');
-  if (lineup[3].kind === 'png') {
-    assert.equal(lineup[3].blob, sib2);
-    assert.equal(lineup[3].batchIndex, 2);
-  }
-});
-
-test('test(photos): single-photo batch lineup is clean + overlay only (#64)', () => {
-  const clean = png('only-clean');
-  const overlay = png('only-overlay');
-  const lineup = buildPhotosReadyLineup({
-    inventoryPng: clean,
-    overlayPng: overlay,
-    batchApply: [null],
-  });
-  assert.deepEqual(roles(lineup), ['png:calibration', 'png:overlay']);
-  assert.ok(lineup.every((it) => it.kind === 'png'));
-});
-
-test('test(photos): batchApply errors become clear error slots (empty mask / floor) (#64)', () => {
-  const clean = png('clean');
-  const overlay = png('overlay');
-  const ok = png('ok-sib');
-  const batchApply: BatchPhotoResult[] = [
-    null,
-    { status: 'error', message: 'empty mask: no slab pixels detected' },
-    { status: 'ok', inventoryPng: ok },
-    { status: 'error', message: 'PNG size floor: shorter side is below 800 px' },
-  ];
-
-  const lineup = buildPhotosReadyLineup({
-    inventoryPng: clean,
-    overlayPng: overlay,
-    batchApply,
-  });
-
-  assert.deepEqual(roles(lineup), [
-    'png:calibration',
-    'png:overlay',
-    'error:1',
-    'png:batch',
-    'error:3',
-  ]);
-
-  const err1 = lineup[2];
-  assert.equal(err1.kind, 'error');
-  if (err1.kind === 'error') {
-    assert.match(err1.message, /empty mask/i);
-    assert.equal(err1.batchIndex, 1);
-  }
-  const err3 = lineup[4];
-  assert.equal(err3.kind, 'error');
-  if (err3.kind === 'error') {
-    assert.match(err3.message, /floor|800/i);
-  }
-
-  // Successful sibling still appears after cal+overlay, in capture order among siblings
-  const okItem = lineup[3];
-  assert.equal(okItem.kind, 'png');
-  if (okItem.kind === 'png') {
-    assert.equal(okItem.blob, ok);
-    assert.equal(okItem.batchIndex, 2);
-  }
-});
-
-test('test(photos): lineup never uses source JPEG thumbs as inventory PNGs (#64)', () => {
-  const clean = png('clean');
-  const overlay = png('overlay');
-  const thumb = jpeg('source-thumb');
-  // Dishonest proxy would pass source thumbs; helper must only emit image/png blobs for png slots
-  const lineup = buildPhotosReadyLineup({
-    inventoryPng: clean,
-    overlayPng: overlay,
-    batchApply: [
-      null,
-      { status: 'ok', inventoryPng: png('sib') },
-    ],
-  });
-  for (const it of lineup) {
-    if (it.kind === 'png') {
-      assert.equal(it.blob.type, 'image/png', 'lineup PNG slots must be inventory PNGs');
-      assert.notEqual(it.blob, thumb);
-    }
-  }
-});
-
-test('test(photos): skip clean cal when sourceBelowFloor; keep overlay + siblings (#64)', () => {
-  const lineup = buildPhotosReadyLineup({
-    inventoryPng: png('below'),
-    overlayPng: png('overlay'),
-    batchApply: [null, { status: 'ok', inventoryPng: png('sib') }],
-    sourceBelowFloor: true,
-  });
-  assert.deepEqual(roles(lineup), ['png:overlay', 'png:batch']);
-});
-
-test('test(photos): empty/missing results yield empty lineup (#64)', () => {
-  assert.deepEqual(buildPhotosReadyLineup({}), []);
-  assert.deepEqual(
-    buildPhotosReadyLineup({ inventoryPng: null, overlayPng: null, batchApply: undefined }),
-    [],
-  );
-});
-
-// --- light UI / session wiring (#64) ---
-
-test('test(photos): MeasurePanel shows Photos ready lineup + M1 numbers + batch errors (#64)', () => {
-  const panel = readFileSync(join(here, 'MeasurePanel.svelte'), 'utf8');
-  assert.match(panel, /Photos ready|photos.?ready/i, 'end screen title after Calculate');
-  assert.match(panel, /buildPhotosReadyLineup/, 'must use pure lineup helper');
-  assert.match(panel, /Widths/, 'M1 widths still visible');
-  assert.match(panel, /Sqft/, 'M1 sqft still visible');
-  assert.match(panel, /Bdft/, 'M1 bdft still visible');
-  assert.match(panel, /Scale/, 'M1 scale still visible');
-  // Dishonest proxies
-  assert.ok(
-    !/lineup[\s\S]{0,200}state\.source\.blob/.test(panel),
-    'must not lineup source thumbs',
-  );
-  assert.match(
-    panel,
-    /error|batchApply|message/i,
-    'per-photo batchApply errors must surface in the panel',
-  );
-  assert.match(panel, /Back/, 'Back must still work from Photos ready');
-});
-
-test('test(photos): App still routes measure results through Measure (or PhotosReady) with Back (#64)', () => {
-  const app = readFileSync(join(here, '..', 'App.svelte'), 'utf8');
-  // Stay on Measure with results, or dedicated panel — either is fine
-  assert.ok(
-    /MeasurePanel/.test(app) || /PhotosReady/.test(app),
-    'App must render Photos-ready end screen',
-  );
-  // Must not invent a Mask loop for the lineup
-  assert.ok(
-    !/\{\s*#each\s+[^}]*photos[^}]*\}[\s\S]*MaskPanel/i.test(app),
-    'App must not #each batch into Mask for Photos ready',
-  );
-});
@@ -1,75 +0,0 @@
-import type { BatchPhotoResult } from './capture.types';
-
-/** One slot in the Photos-ready end screen (#64 / docs/PHOTOS.md). */
-export type PhotosReadyLineupItem =
-  | {
-      kind: 'png';
-      role: 'calibration' | 'overlay' | 'batch';
-      blob: Blob;
-      /** Capture-order index for non-calibration batch inventory PNGs. */
-      batchIndex?: number;
-    }
-  | {
-      kind: 'error';
-      batchIndex: number;
-      message: string;
-    };
-
-export interface PhotosReadyLineupInput {
-  inventoryPng?: Blob | null;
-  overlayPng?: Blob | null;
-  batchApply?: BatchPhotoResult[] | null;
-  /** When true, omit the clean calibration PNG (M1 floor warn path). */
-  sourceBelowFloor?: boolean;
-}
-
-/**
- * Build the Photos-ready lineup:
- * 1. Clean calibration inventory PNG
- * 2. Dimension-overlay copy
- * 3. Other batch inventory PNGs in capture order (batchApply, skip cal null)
- *    with error slots for empty mask / floor failures.
- */
-export function buildPhotosReadyLineup(
-  input: PhotosReadyLineupInput,
-): PhotosReadyLineupItem[] {
-  const items: PhotosReadyLineupItem[] = [];
-  const { inventoryPng, overlayPng, batchApply, sourceBelowFloor } = input;
-
-  if (inventoryPng && !sourceBelowFloor) {
-    items.push({ kind: 'png', role: 'calibration', blob: inventoryPng });
-  }
-  if (overlayPng) {
-    items.push({ kind: 'png', role: 'overlay', blob: overlayPng });
-  }
-
-  if (batchApply) {
-    for (let i = 0; i < batchApply.length; i++) {
-      const slot = batchApply[i];
-      if (slot === null) continue; // calibration lives in results.inventoryPng
-      if (slot.status === 'ok') {
-        items.push({
-          kind: 'png',
-          role: 'batch',
-          blob: slot.inventoryPng,
-          batchIndex: i,
-        });
-      } else {
-        items.push({
-          kind: 'error',
-          batchIndex: i,
-          message: slot.message,
-        });
-      }
-    }
-  }
-
-  return items;
-}
-
-export function photosReadyPngAlt(item: Extract<PhotosReadyLineupItem, { kind: 'png' }>): string {
-  if (item.role === 'calibration') return 'Calibration inventory PNG';
-  if (item.role === 'overlay') return 'Calibration dimension-overlay PNG';
-  const n = (item.batchIndex ?? 0) + 1;
-  return `Batch inventory PNG ${n}`;
-}
@@ -1,155 +0,0 @@
-import assert from 'node:assert/strict';
-import { readFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { test, beforeEach } from 'node:test';
-import { get } from 'svelte/store';
-import type { Draft, Source } from './capture.types';
-import { createCaptureSession, type DraftStore } from './session';
-
-const here = dirname(fileURLToPath(import.meta.url));
-
-function tinyJpeg(label: string): File {
-  // Minimal valid-ish JPEG bytes are unnecessary; Blob type is what session stores.
-  const bytes = new Uint8Array([0xff, 0xd8, 0xff, 0xe0, label.charCodeAt(0) & 0xff]);
-  return new File([bytes], `${label}.jpg`, { type: 'image/jpeg' });
-}
-
-function memStore(): DraftStore & { peek: () => Draft | null; reset: () => void } {
-  let mem: Draft | null = null;
-  return {
-    loadDraft: async () => mem,
-    saveDraft: async (d) => {
-      mem = d;
-    },
-    clearDraft: async () => {
-      mem = null;
-    },
-    peek: () => mem,
-    reset: () => {
-      mem = null;
-    },
-  };
-}
-
-let store: ReturnType<typeof memStore>;
-
-beforeEach(() => {
-  store = memStore();
-});
-
-test('session starts on batch with zero photos (replaces single addPhoto)', () => {
-  const s = createCaptureSession({ draft: store });
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'batch');
-  if (cap.k === 'batch') assert.equal(cap.photos.length, 0);
-  s.dispose();
-});
-
-test('addToBatch accumulates photos and stays on batch', async () => {
-  const s = createCaptureSession({ draft: store });
-  await s.addToBatch(tinyJpeg('a'));
-  await s.addToBatch(tinyJpeg('b'));
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'batch');
-  if (cap.k === 'batch') {
-    assert.equal(cap.photos.length, 2);
-    assert.ok(cap.photos[0].blob instanceof Blob);
-    assert.ok(cap.photos[1].blob instanceof Blob);
-    assert.notEqual(cap.photos[0].blob, cap.photos[1].blob);
-  }
-  s.dispose();
-});
-
-test('continueBatch is a no-op when batch is empty', () => {
-  const s = createCaptureSession({ draft: store });
-  s.continueBatch();
-  assert.equal(get(s.capture).k, 'batch');
-  s.dispose();
-});
-
-test('continueBatch with ≥1 photo advances to pickCalibration (not Mask)', async () => {
-  // #60: Continue must not silently Mask the first photo — user picks calibration next.
-  const s = createCaptureSession({ draft: store });
-  await s.addToBatch(tinyJpeg('a'));
-  await s.addToBatch(tinyJpeg('b'));
-  s.continueBatch();
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'pickCalibration');
-  if (cap.k === 'pickCalibration') {
-    assert.equal(cap.photos.length, 2);
-  }
-  s.dispose();
-});
-
-test('adding photos persists batch blobs in device draft', async () => {
-  const s = createCaptureSession({ draft: store });
-  await s.addToBatch(tinyJpeg('a'));
-  await s.addToBatch(tinyJpeg('b'));
-  // allow async persist
-  await new Promise((r) => setTimeout(r, 20));
-  const d = store.peek();
-  assert.ok(d, 'draft must exist after adding photos');
-  assert.equal(d!.stage, 'batch');
-  const batch = d!.batch ?? [];
-  assert.equal(batch.length, 2, 'draft must store both batch blobs (not a UI-only list)');
-  assert.ok(batch[0].blob instanceof Blob);
-  assert.ok(batch[1].blob instanceof Blob);
-  s.dispose();
-});
-
-test('refresh: resumeProbe + Continue restores the batch photos', async () => {
-  const s1 = createCaptureSession({ draft: store });
-  await s1.addToBatch(tinyJpeg('a'));
-  await s1.addToBatch(tinyJpeg('b'));
-  await new Promise((r) => setTimeout(r, 20));
-  s1.dispose();
-
-  const s2 = createCaptureSession({ draft: store });
-  await s2.resumeProbe();
-  assert.equal(get(s2.capture).k, 'resume');
-  s2.continueDraft();
-  await new Promise((r) => setTimeout(r, 20));
-  const cap = get(s2.capture);
-  assert.equal(cap.k, 'batch');
-  if (cap.k === 'batch') {
-    assert.equal(cap.photos.length, 2);
-    assert.ok(cap.photos.every((p: Source) => p.blob instanceof Blob));
-  }
-  s2.dispose();
-});
-
-test('Batch UI: AddPhoto/Batch panel supports multi-add and Continue when ≥1', () => {
-  // Prefer BatchPhotos.svelte; fall back to AddPhoto.svelte if renamed later.
-  const candidates = ['BatchPhotos.svelte', 'AddPhoto.svelte'].map((n) => join(here, n));
-  let src = '';
-  let found = '';
-  for (const p of candidates) {
-    try {
-      src = readFileSync(p, 'utf8');
-      found = p;
-      break;
-    } catch {
-      /* try next */
-    }
-  }
-  assert.ok(src, 'expected BatchPhotos.svelte or AddPhoto.svelte');
-  assert.match(src, /Continue|continue/i, `${found} must expose Continue`);
-  assert.match(src, /photos|batch/i, `${found} must talk about batch/photos`);
-  // Must allow adding more than once (not a one-shot that leaves the screen).
-  const fileInputs = src.match(/type="file"/g) ?? [];
-  assert.ok(fileInputs.length >= 1, 'must have file picker(s)');
-  assert.ok(
-    /addToBatch|onAdd|onPicked/.test(src) || /on:change/.test(src),
-    'must wire photo add',
-  );
-});
-
-test('legacy addPhoto alias still appends to batch (no silent single-photo-only path)', async () => {
-  const s = createCaptureSession({ draft: store });
-  await s.addPhoto(tinyJpeg('only'));
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'batch', 'addPhoto must not jump straight to mask anymore');
-  if (cap.k === 'batch') assert.equal(cap.photos.length, 1);
-  s.dispose();
-});
@@ -1,497 +0,0 @@
-import assert from 'node:assert/strict';
-import { readFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { test, beforeEach, afterEach } from 'node:test';
-import { get } from 'svelte/store';
-import type { Draft, Mask, MaskParams, Source, WorkerIn, WorkerOut } from './capture.types';
-import { createCaptureSession, type DraftStore } from './session';
-
-const here = dirname(fileURLToPath(import.meta.url));
-
-function tinyJpeg(label: string): File {
-  const bytes = new Uint8Array([0xff, 0xd8, 0xff, 0xe0, label.charCodeAt(0) & 0xff]);
-  return new File([bytes], `${label}.jpg`, { type: 'image/jpeg' });
-}
-
-function memStore(): DraftStore & { peek: () => Draft | null } {
-  let mem: Draft | null = null;
-  return {
-    loadDraft: async () => mem,
-    saveDraft: async (d) => {
-      mem = d;
-    },
-    clearDraft: async () => {
-      mem = null;
-    },
-    peek: () => mem,
-  };
-}
-
-let store: ReturnType<typeof memStore>;
-
-beforeEach(() => {
-  store = memStore();
-});
-
-/** Controllable FakeWorker for #62 batch-apply paths. */
-type MaskBehavior = {
-  w: number;
-  h: number;
-  /** slabPx; 0 ⇒ empty mask */
-  slabPx: number;
-  slabBounds?: { x: number; y: number; w: number; h: number };
-};
-
-class FakeMaskWorker {
-  onmessage: ((ev: MessageEvent<WorkerOut>) => void) | null = null;
-  static inits: Blob[] = [];
-  static maskCalls: { sheet: string; sensitivity: number; blob: Blob | null }[] = [];
-  static lastInitBlob: Blob | null = null;
-  /** Per-init blob → behavior. Default: full mask at LARGE dims (above PNG floor). */
-  static behaviorFor: (blob: Blob) => MaskBehavior = () => ({
-    w: 1000,
-    h: 900,
-    slabPx: 1000 * 900,
-    slabBounds: { x: 0, y: 0, w: 1000, h: 900 },
-  });
-
-  constructor(_url: URL | string, _opts?: WorkerOptions) {}
-
-  postMessage(msg: WorkerIn) {
-    if (msg.kind === 'init') {
-      FakeMaskWorker.inits.push(msg.blob);
-      FakeMaskWorker.lastInitBlob = msg.blob;
-      const id = msg.id;
-      const b = FakeMaskWorker.behaviorFor(msg.blob);
-      queueMicrotask(() => {
-        this.onmessage?.({ data: { id, kind: 'decoded', w: b.w, h: b.h } } as MessageEvent<WorkerOut>);
-      });
-      return;
-    }
-    if (msg.kind === 'mask') {
-      const id = msg.id;
-      const blob = FakeMaskWorker.lastInitBlob;
-      FakeMaskWorker.maskCalls.push({
-        sheet: msg.sheet,
-        sensitivity: msg.sensitivity,
-        blob,
-      });
-      const b = blob ? FakeMaskWorker.behaviorFor(blob) : { w: 40, h: 20, slabPx: 0 };
-      const bitset = new Uint8Array(Math.max(1, b.w * b.h)).fill(b.slabPx > 0 ? 1 : 0);
-      const bbox = {
-        corners: [
-          [b.w, 0],
-          [b.w, b.h],
-          [0, b.h],
-          [0, 0],
-        ] as [number, number][],
-        longSidePx: b.w,
-        angleDeg: 0,
-      };
-      const slabBounds = b.slabBounds ?? { x: 0, y: 0, w: b.w, h: b.h };
-      queueMicrotask(() => {
-        this.onmessage?.({
-          data: {
-            id,
-            kind: 'ready',
-            slabPx: b.slabPx,
-            bitset,
-            bbox,
-            slabBounds,
-          },
-        } as MessageEvent<WorkerOut>);
-      });
-      return;
-    }
-  }
-
-  terminate() {}
-}
-
-const RealWorker = globalThis.Worker;
-const RealCreateImageBitmap = globalThis.createImageBitmap;
-
-function installFakes() {
-  FakeMaskWorker.inits = [];
-  FakeMaskWorker.maskCalls = [];
-  FakeMaskWorker.lastInitBlob = null;
-  FakeMaskWorker.behaviorFor = () => ({
-    w: 1000,
-    h: 900,
-    slabPx: 1000 * 900,
-    slabBounds: { x: 0, y: 0, w: 1000, h: 900 },
-  });
-  (globalThis as unknown as { Worker: typeof FakeMaskWorker }).Worker = FakeMaskWorker;
-  (globalThis as unknown as { createImageBitmap: typeof createImageBitmap }).createImageBitmap =
-    async (blob: ImageBitmapSource) => {
-      const b = blob instanceof Blob ? FakeMaskWorker.behaviorFor(blob) : { w: 1000, h: 900 };
-      return {
-        width: b.w,
-        height: b.h,
-        close() {},
-      } as ImageBitmap;
-    };
-}
-
-function restoreGlobals() {
-  if (RealWorker === undefined) {
-    delete (globalThis as unknown as { Worker?: unknown }).Worker;
-  } else {
-    globalThis.Worker = RealWorker;
-  }
-  if (RealCreateImageBitmap === undefined) {
-    delete (globalThis as unknown as { createImageBitmap?: unknown }).createImageBitmap;
-  } else {
-    globalThis.createImageBitmap = RealCreateImageBitmap;
-  }
-}
-
-afterEach(() => {
-  restoreGlobals();
-});
-
-async function settleOverlay(
-  s: ReturnType<typeof createCaptureSession>,
-  ms = 800,
-): Promise<Mask> {
-  const start = Date.now();
-  while (Date.now() - start < ms) {
-    const cap = get(s.capture);
-    if (cap.k === 'mask' && cap.overlay && cap.overlay.slabPx > 0) return cap.overlay;
-    await new Promise((r) => setTimeout(r, 5));
-  }
-  throw new Error('mask overlay never settled');
-}
-
-async function driveToMeasure(
-  s: ReturnType<typeof createCaptureSession>,
-  photos: File[],
-  calIndex: number,
-  maskParams: Partial<MaskParams> = { sheet: 'green', sensitivity: 50 },
-) {
-  for (const p of photos) await s.addToBatch(p);
-  s.continueBatch();
-  s.pickCalibration(calIndex);
-  if (maskParams.sheet) s.setSheet(maskParams.sheet);
-  if (typeof maskParams.sensitivity === 'number') s.setSensitivity(maskParams.sensitivity);
-  // setSheet already runs a pass; if only sensitivity, force via setSheet after
-  if (!maskParams.sheet) s.setSheet('auto');
-  await settleOverlay(s);
-  s.approveMask();
-  s.approveAxis();
-  s.setLength(320); // 40 in
-  s.setThickness(16); // 2 in
-}
-
-type BatchApplySlot =
-  | null
-  | { status: 'ok'; inventoryPng: Blob }
-  | { status: 'error'; message: string };
-
-function batchApplyOf(cap: ReturnType<typeof get<ReturnType<typeof createCaptureSession>['capture']>>): BatchApplySlot[] | undefined {
-  if (cap.k !== 'measure') return undefined;
-  return (cap as { batchApply?: BatchApplySlot[] }).batchApply;
-}
-
-// --- #62: apply approved mask + crop to non-calibration batch photos after Calculate ---
-
-test('#62: Calculate applies frozen mask params to every non-calibration batch photo', async () => {
-  installFakes();
-  const encodeCalls: { widthPx: number; heightPx: number; sheet: string; sensitivity: number }[] = [];
-  const s = createCaptureSession({
-    draft: store,
-    encodeInventory: async (input) => {
-      encodeCalls.push({
-        widthPx: input.source.widthPx,
-        heightPx: input.source.heightPx,
-        sheet: (input.mask as Mask).params?.sheet ?? '?',
-        sensitivity: (input.mask as Mask).params?.sensitivity ?? -1,
-      });
-      // Distinctive PNG blob so tests cannot confuse with source JPEG thumbs
-      return {
-        blob: new Blob([`png-${input.source.widthPx}x${input.source.heightPx}`], { type: 'image/png' }),
-        sourceBelowFloor: false,
-      };
-    },
-  } as Parameters<typeof createCaptureSession>[0]);
-
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b'); // calibration
-  const c = tinyJpeg('c');
-  await driveToMeasure(s, [a, b, c], 1, { sheet: 'black', sensitivity: 72 });
-  await s.calculate();
-
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'measure', 'must stay on Measure — do not reopen Mask');
-  const apply = batchApplyOf(cap);
-  assert.ok(Array.isArray(apply), 'measure.batchApply must exist after Calculate');
-  assert.equal(apply!.length, 3, 'one slot per batch photo');
-  assert.equal(apply![1], null, 'calibration index is null (uses results.inventoryPng)');
-
-  assert.ok(apply![0] && apply![0].status === 'ok', 'batch[0] applied ok');
-  assert.ok(apply![2] && apply![2].status === 'ok', 'batch[2] applied ok');
-  if (apply![0]?.status === 'ok') {
-    assert.equal(apply![0].inventoryPng.type, 'image/png');
-    assert.notEqual(apply![0].inventoryPng, a, 'must not proxy source thumb as inventory PNG');
-  }
-  if (apply![2]?.status === 'ok') {
-    assert.equal(apply![2].inventoryPng.type, 'image/png');
-    assert.notEqual(apply![2].inventoryPng, c);
-  }
-
-  // Frozen params: every sibling mask call used calibration sheet/sensitivity
-  const siblingBlobs = new Set([a, c]);
-  const siblingMasks = FakeMaskWorker.maskCalls.filter((m) => m.blob && siblingBlobs.has(m.blob as File));
-  assert.ok(siblingMasks.length >= 2, 'mask worker must run on non-calibration photos');
-  for (const m of siblingMasks) {
-    assert.equal(m.sheet, 'black', 'reuse approved sheet');
-    assert.equal(m.sensitivity, 72, 'reuse approved sensitivity');
-  }
-
-  s.dispose();
-});
-
-test('#62: empty mask on one sibling → per-photo error; others still proceed', async () => {
-  installFakes();
-  const a = tinyJpeg('a'); // will empty-mask
-  const b = tinyJpeg('b'); // cal
-  const c = tinyJpeg('c'); // ok
-
-  FakeMaskWorker.behaviorFor = (blob) => {
-    if (blob === a) {
-      return { w: 1000, h: 900, slabPx: 0, slabBounds: { x: 0, y: 0, w: 0, h: 0 } };
-    }
-    return { w: 1000, h: 900, slabPx: 1000 * 900, slabBounds: { x: 0, y: 0, w: 1000, h: 900 } };
-  };
-
-  const s = createCaptureSession({
-    draft: store,
-    encodeInventory: async () => ({
-      blob: new Blob(['ok-png'], { type: 'image/png' }),
-      sourceBelowFloor: false,
-    }),
-  } as Parameters<typeof createCaptureSession>[0]);
-
-  await driveToMeasure(s, [a, b, c], 1, { sheet: 'green' });
-  await s.calculate();
-
-  const apply = batchApplyOf(get(s.capture));
-  assert.ok(apply);
-  assert.equal(apply![1], null);
-  assert.ok(apply![0] && apply![0].status === 'error', 'empty mask → error');
-  if (apply![0]?.status === 'error') {
-    assert.match(apply![0].message, /empty|mask/i, 'clear per-photo empty-mask error');
-  }
-  assert.ok(apply![2] && apply![2].status === 'ok', 'other photos still proceed');
-  s.dispose();
-});
-
-test('#62: below PNG size floor on one sibling → per-photo error; others proceed', async () => {
-  installFakes();
-  const a = tinyJpeg('a'); // ok
-  const b = tinyJpeg('b'); // cal
-  const c = tinyJpeg('c'); // below floor
-
-  FakeMaskWorker.behaviorFor = (blob) => {
-    if (blob === c) {
-      return { w: 400, h: 300, slabPx: 400 * 300, slabBounds: { x: 0, y: 0, w: 400, h: 300 } };
-    }
-    return { w: 1000, h: 900, slabPx: 1000 * 900, slabBounds: { x: 0, y: 0, w: 1000, h: 900 } };
-  };
-
-  const s = createCaptureSession({
-    draft: store,
-    encodeInventory: async (input) => {
-      const below = Math.min(input.mask.slabBounds.w, input.mask.slabBounds.h) < 800;
-      return {
-        blob: new Blob([below ? 'tiny' : 'ok'], { type: 'image/png' }),
-        sourceBelowFloor: below,
-      };
-    },
-  } as Parameters<typeof createCaptureSession>[0]);
-
-  await driveToMeasure(s, [a, b, c], 1, { sheet: 'auto' });
-  await s.calculate();
-
-  const apply = batchApplyOf(get(s.capture));
-  assert.ok(apply);
-  assert.ok(apply![0] && apply![0].status === 'ok', 'above-floor sibling ok');
-  assert.ok(apply![2] && apply![2].status === 'error', 'below-floor → error');
-  if (apply![2]?.status === 'error') {
-    assert.match(apply![2].message, /floor|small|800|size/i, 'clear per-photo size-floor error');
-  }
-  s.dispose();
-});
-
-test('#62: scale/widths/sqft/bdft stay on calibration results only (siblings are visual)', async () => {
-  installFakes();
-  const s = createCaptureSession({
-    draft: store,
-    encodeInventory: async () => ({
-      blob: new Blob(['png'], { type: 'image/png' }),
-      sourceBelowFloor: false,
-    }),
-  } as Parameters<typeof createCaptureSession>[0]);
-
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b');
-  await driveToMeasure(s, [a, b], 1, { sheet: 'green' });
-  await s.calculate();
-
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'measure');
-  if (cap.k === 'measure') {
-    assert.ok(cap.results);
-    assert.equal(typeof cap.results!.scale, 'number');
-    assert.ok(cap.results!.scale > 0);
-    assert.equal(typeof cap.results!.sqft, 'number');
-    assert.equal(typeof cap.results!.bdft, 'number');
-    assert.ok(cap.results!.widths);
-    // batchApply ok slots must NOT carry measure fields
-    const apply = (cap as { batchApply?: BatchApplySlot[] }).batchApply;
-    assert.ok(apply);
-    const slot = apply![0];
-    assert.ok(slot && slot.status === 'ok');
-    if (slot && slot.status === 'ok') {
-      assert.equal(
-        'scale' in slot,
-        false,
-        'non-cal apply must not attach scale',
-      );
-      assert.equal('sqft' in slot, false);
-      assert.equal('bdft' in slot, false);
-      assert.equal('widths' in slot, false);
-    }
-  }
-  s.dispose();
-});
-
-test('#62: draft persists batchApply after Calculate (for #64 UI later)', async () => {
-  installFakes();
-  const s = createCaptureSession({
-    draft: store,
-    encodeInventory: async () => ({
-      blob: new Blob(['draft-png'], { type: 'image/png' }),
-      sourceBelowFloor: false,
-    }),
-  } as Parameters<typeof createCaptureSession>[0]);
-
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b');
-  const c = tinyJpeg('c');
-  await driveToMeasure(s, [a, b, c], 0, { sheet: 'black' }); // cal = first
-  await s.calculate();
-  await new Promise((r) => setTimeout(r, 30));
-
-  const d = store.peek();
-  assert.ok(d);
-  assert.equal(d!.stage, 'measure');
-  assert.ok(Array.isArray(d!.batchApply), 'draft.batchApply must be persisted');
-  assert.equal(d!.batchApply!.length, 3);
-  assert.equal(d!.batchApply![0], null, 'calibration slot null on draft');
-  assert.ok(d!.batchApply![1] && (d!.batchApply![1] as { status: string }).status === 'ok');
-  assert.ok(d!.batchApply![2] && (d!.batchApply![2] as { status: string }).status === 'ok');
-  s.dispose();
-});
-
-test('#62: single-photo batch Calculate leaves batchApply=[null] (no sibling Mask)', async () => {
-  installFakes();
-  const s = createCaptureSession({
-    draft: store,
-    encodeInventory: async () => ({
-      blob: new Blob(['only'], { type: 'image/png' }),
-      sourceBelowFloor: false,
-    }),
-  } as Parameters<typeof createCaptureSession>[0]);
-
-  const only = tinyJpeg('only');
-  await driveToMeasure(s, [only], 0, { sheet: 'auto' });
-  const initsBefore = FakeMaskWorker.inits.length;
-  await s.calculate();
-
-  const apply = batchApplyOf(get(s.capture));
-  assert.ok(apply);
-  assert.deepEqual(apply, [null]);
-
-  // No extra mask inits for non-existent siblings after Calculate
-  const siblingInits = FakeMaskWorker.inits.slice(initsBefore).filter((blob) => blob !== only);
-  assert.equal(siblingInits.length, 0, 'must not invent Mask work for absent siblings');
-  s.dispose();
-});
-
-test('#62: Calculate does not re-enter Mask / does not open Mask controls for siblings', async () => {
-  installFakes();
-  const s = createCaptureSession({
-    draft: store,
-    encodeInventory: async () => ({
-      blob: new Blob(['x'], { type: 'image/png' }),
-      sourceBelowFloor: false,
-    }),
-  } as Parameters<typeof createCaptureSession>[0]);
-
-  await driveToMeasure(s, [tinyJpeg('a'), tinyJpeg('b')], 0, { sheet: 'green' });
-  await s.calculate();
-  assert.equal(get(s.capture).k, 'measure');
-
-  // Session source must never loop enterMaskOnSource over batch after Calculate
-  const sessionSrc = readFileSync(join(here, 'session.ts'), 'utf8');
-  assert.ok(
-    /batchApply|applyBatch|apply.*non-?calibrat/i.test(sessionSrc),
-    'session must implement batch apply after Calculate (#62)',
-  );
-  // Dishonest proxy: must not set k:'mask' inside calculate for each photo
-  const calcBody = sessionSrc.match(/async calculate\(\)[\s\S]*?(?=\n    [a-zA-Z]+\(|\n  \})/);
-  assert.ok(calcBody, 'calculate() must exist');
-  assert.ok(
-    !/set\(\s*\{\s*k:\s*'mask'/.test(calcBody![0]),
-    'calculate must not reopen Mask state for siblings',
-  );
-
-  const app = readFileSync(join(here, '..', 'App.svelte'), 'utf8');
-  assert.ok(
-    !/\{\s*#each\s+[^}]*batchApply[^}]*\}[\s\S]*MaskPanel/i.test(app) &&
-      !/\{\s*#each\s+[^}]*photos[^}]*\}[\s\S]*MaskPanel/i.test(app),
-    'App must not #each photos into MaskPanel',
-  );
-  s.dispose();
-});
-
-test('#62: resume restores batchApply alongside calibration results', async () => {
-  installFakes();
-  const s1 = createCaptureSession({
-    draft: store,
-    encodeInventory: async () => ({
-      blob: new Blob(['resume-png'], { type: 'image/png' }),
-      sourceBelowFloor: false,
-    }),
-  } as Parameters<typeof createCaptureSession>[0]);
-
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b');
-  await driveToMeasure(s1, [a, b], 1, { sheet: 'green' });
-  await s1.calculate();
-  await new Promise((r) => setTimeout(r, 30));
-  s1.dispose();
-
-  FakeMaskWorker.inits = [];
-  const s2 = createCaptureSession({ draft: store } as Parameters<typeof createCaptureSession>[0]);
-  await s2.resumeProbe();
-  s2.continueDraft();
-  const start = Date.now();
-  let cap = get(s2.capture);
-  while (cap.k !== 'measure' && Date.now() - start < 1500) {
-    await new Promise((r) => setTimeout(r, 10));
-    cap = get(s2.capture);
-  }
-  assert.equal(cap.k, 'measure');
-  const apply = batchApplyOf(cap);
-  assert.ok(apply, 'restored measure must include batchApply');
-  assert.equal(apply!.length, 2);
-  assert.equal(apply![1], null);
-  assert.ok(apply![0] && apply![0].status === 'ok');
-  if (apply![0]?.status === 'ok') {
-    assert.equal(apply![0].inventoryPng.type, 'image/png');
-  }
-  s2.dispose();
-});
@@ -1,540 +0,0 @@
-import assert from 'node:assert/strict';
-import { readFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { test, beforeEach, afterEach } from 'node:test';
-import { get } from 'svelte/store';
-import type { Draft, Mask, Source, WorkerIn, WorkerOut } from './capture.types';
-import { createCaptureSession, type DraftStore } from './session';
-
-const here = dirname(fileURLToPath(import.meta.url));
-
-function tinyJpeg(label: string): File {
-  const bytes = new Uint8Array([0xff, 0xd8, 0xff, 0xe0, label.charCodeAt(0) & 0xff]);
-  return new File([bytes], `${label}.jpg`, { type: 'image/jpeg' });
-}
-
-function memStore(): DraftStore & { peek: () => Draft | null; reset: () => void } {
-  let mem: Draft | null = null;
-  return {
-    loadDraft: async () => mem,
-    saveDraft: async (d) => {
-      mem = d;
-    },
-    clearDraft: async () => {
-      mem = null;
-    },
-    peek: () => mem,
-    reset: () => {
-      mem = null;
-    },
-  };
-}
-
-let store: ReturnType<typeof memStore>;
-
-beforeEach(() => {
-  store = memStore();
-});
-
-test('continueBatch with ≥1 photo goes to pickCalibration (not mask — no first-photo proxy)', async () => {
-  const s = createCaptureSession({ draft: store });
-  await s.addToBatch(tinyJpeg('a'));
-  await s.addToBatch(tinyJpeg('b'));
-  s.continueBatch();
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'pickCalibration', 'Continue must open pick-calibration, not skip to Mask');
-  if (cap.k === 'pickCalibration') {
-    assert.equal(cap.photos.length, 2);
-  }
-  s.dispose();
-});
-
-test('single-photo batch: Continue still opens pickCalibration so user confirms the only photo', async () => {
-  const s = createCaptureSession({ draft: store });
-  await s.addToBatch(tinyJpeg('only'));
-  s.continueBatch();
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'pickCalibration');
-  if (cap.k === 'pickCalibration') {
-    assert.equal(cap.photos.length, 1);
-  }
-  s.dispose();
-});
-
-test('pickCalibration(index) enters Mask on that Source only (not always first)', async () => {
-  const s = createCaptureSession({ draft: store });
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b');
-  const c = tinyJpeg('c');
-  await s.addToBatch(a);
-  await s.addToBatch(b);
-  await s.addToBatch(c);
-  s.continueBatch();
-  assert.equal(get(s.capture).k, 'pickCalibration');
-
-  s.pickCalibration(1);
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'mask');
-  if (cap.k === 'mask') {
-    // Chosen photo must be the second batch blob, not photos[0].
-    assert.equal(cap.source.blob, b, 'Mask source must be the user-picked photo');
-    assert.notEqual(cap.source.blob, a, 'must not silently use first photo');
-  }
-  s.dispose();
-});
-
-test('single-photo pick enters Mask on that photo', async () => {
-  const s = createCaptureSession({ draft: store });
-  const only = tinyJpeg('only');
-  await s.addToBatch(only);
-  s.continueBatch();
-  s.pickCalibration(0);
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'mask');
-  if (cap.k === 'mask') {
-    assert.equal(cap.source.blob, only);
-  }
-  s.dispose();
-});
-
-test('pickCalibration out of range is a no-op', async () => {
-  const s = createCaptureSession({ draft: store });
-  await s.addToBatch(tinyJpeg('a'));
-  s.continueBatch();
-  s.pickCalibration(-1);
-  assert.equal(get(s.capture).k, 'pickCalibration');
-  s.pickCalibration(99);
-  assert.equal(get(s.capture).k, 'pickCalibration');
-  s.dispose();
-});
-
-test('draft persists pickCalibration stage with batch photos', async () => {
-  const s = createCaptureSession({ draft: store });
-  await s.addToBatch(tinyJpeg('a'));
-  await s.addToBatch(tinyJpeg('b'));
-  s.continueBatch();
-  await new Promise((r) => setTimeout(r, 20));
-  const d = store.peek();
-  assert.ok(d, 'draft must exist on pickCalibration');
-  assert.equal(d!.stage, 'pickCalibration');
-  assert.equal((d!.batch ?? []).length, 2);
-  s.dispose();
-});
-
-test('draft remembers calibration choice after pick', async () => {
-  const s = createCaptureSession({ draft: store });
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b');
-  await s.addToBatch(a);
-  await s.addToBatch(b);
-  s.continueBatch();
-  s.pickCalibration(1);
-  await new Promise((r) => setTimeout(r, 20));
-  const d = store.peek();
-  assert.ok(d);
-  assert.equal(d!.stage, 'mask');
-  assert.equal(d!.calibrationIndex, 1, 'draft must store which batch photo is calibration');
-  assert.equal(d!.source.blob, b, 'draft.source must be the chosen calibration photo');
-  assert.equal((d!.batch ?? []).length, 2, 'full batch still stored');
-  s.dispose();
-});
-
-test('refresh: resumeProbe + Continue restores pickCalibration with batch', async () => {
-  const s1 = createCaptureSession({ draft: store });
-  await s1.addToBatch(tinyJpeg('a'));
-  await s1.addToBatch(tinyJpeg('b'));
-  s1.continueBatch();
-  await new Promise((r) => setTimeout(r, 20));
-  s1.dispose();
-
-  const s2 = createCaptureSession({ draft: store });
-  await s2.resumeProbe();
-  assert.equal(get(s2.capture).k, 'resume');
-  s2.continueDraft();
-  await new Promise((r) => setTimeout(r, 20));
-  const cap = get(s2.capture);
-  assert.equal(cap.k, 'pickCalibration');
-  if (cap.k === 'pickCalibration') {
-    assert.equal(cap.photos.length, 2);
-    assert.ok(cap.photos.every((p: Source) => p.blob instanceof Blob));
-  }
-  s2.dispose();
-});
-
-test('refresh: resume after pick restores Mask on the chosen calibration photo', async () => {
-  const s1 = createCaptureSession({ draft: store });
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b');
-  await s1.addToBatch(a);
-  await s1.addToBatch(b);
-  s1.continueBatch();
-  s1.pickCalibration(1);
-  await new Promise((r) => setTimeout(r, 20));
-  s1.dispose();
-
-  const s2 = createCaptureSession({ draft: store });
-  await s2.resumeProbe();
-  s2.continueDraft();
-  await new Promise((r) => setTimeout(r, 40));
-  const cap = get(s2.capture);
-  assert.equal(cap.k, 'mask');
-  if (cap.k === 'mask') {
-    // Blob identity may round-trip as a new Blob with same bytes; compare size/type content.
-    assert.ok(cap.source.blob instanceof Blob);
-    const chosen = new Uint8Array(await b.arrayBuffer());
-    const got = new Uint8Array(await cap.source.blob.arrayBuffer());
-    assert.deepEqual(got, chosen, 'restored Mask source must be the picked calibration photo');
-  }
-  // calibrationIndex still on draft
-  const d = store.peek();
-  assert.equal(d?.calibrationIndex, 1);
-  s2.dispose();
-});
-
-test('PickCalibration UI: thumbs over batch + pick action (not auto-first)', () => {
-  const path = join(here, 'PickCalibration.svelte');
-  let src = '';
-  try {
-    src = readFileSync(path, 'utf8');
-  } catch {
-    /* missing = fail */
-  }
-  assert.ok(src, 'expected PickCalibration.svelte');
-  assert.match(src, /calibrat/i, 'UI must mention calibration');
-  assert.match(src, /photos|thumb/i, 'UI must show batch thumbs');
-  assert.ok(
-    /onPick|pickCalibration|on:click/.test(src),
-    'UI must wire a per-photo pick action',
-  );
-  // Must not hardcode always-first without user interaction.
-  assert.ok(
-    !/photos\[0\].*mask|always.*first/i.test(src) || /onPick|on:click/.test(src),
-    'must require user pick',
-  );
-});
-
-test('App wires pickCalibration state to PickCalibration panel', () => {
-  const app = readFileSync(join(here, '..', 'App.svelte'), 'utf8');
-  assert.match(app, /PickCalibration/, 'App must import/render PickCalibration');
-  assert.match(app, /pickCalibration/, 'App must branch on pickCalibration state');
-});
-
-// --- #61 M2-4: wire M1 mask/axis/measure onto the calibration pick ---
-
-const MASK_W = 40;
-const MASK_H = 20;
-
-/** Fake Worker so Node can drive Mask → Axis → Measure without canvas decode. */
-class FakeMaskWorker {
-  onmessage: ((ev: MessageEvent<WorkerOut>) => void) | null = null;
-  static inits: Blob[] = [];
-
-  constructor(_url: URL | string, _opts?: WorkerOptions) {}
-
-  postMessage(msg: WorkerIn) {
-    if (msg.kind === 'init') {
-      FakeMaskWorker.inits.push(msg.blob);
-      const id = msg.id;
-      queueMicrotask(() => {
-        this.onmessage?.({ data: { id, kind: 'decoded', w: MASK_W, h: MASK_H } } as MessageEvent<WorkerOut>);
-      });
-      return;
-    }
-    if (msg.kind === 'mask') {
-      const id = msg.id;
-      const bitset = new Uint8Array(MASK_W * MASK_H).fill(1);
-      const bbox = {
-        corners: [
-          [MASK_W, 0],
-          [MASK_W, MASK_H],
-          [0, MASK_H],
-          [0, 0],
-        ] as [number, number][],
-        longSidePx: MASK_W,
-        angleDeg: 0,
-      };
-      queueMicrotask(() => {
-        this.onmessage?.({
-          data: {
-            id,
-            kind: 'ready',
-            slabPx: MASK_W * MASK_H,
-            bitset,
-            bbox,
-            slabBounds: { x: 0, y: 0, w: MASK_W, h: MASK_H },
-          },
-        } as MessageEvent<WorkerOut>);
-      });
-      return;
-    }
-    // invalidate: no-op
-  }
-
-  terminate() {}
-}
-
-const RealWorker = globalThis.Worker;
-const RealCreateImageBitmap = globalThis.createImageBitmap;
-
-function installFakeMaskWorker() {
-  FakeMaskWorker.inits = [];
-  (globalThis as unknown as { Worker: typeof FakeMaskWorker }).Worker = FakeMaskWorker;
-}
-
-function restoreWorkerGlobals() {
-  if (RealWorker === undefined) {
-    delete (globalThis as unknown as { Worker?: unknown }).Worker;
-  } else {
-    globalThis.Worker = RealWorker;
-  }
-  if (RealCreateImageBitmap === undefined) {
-    delete (globalThis as unknown as { createImageBitmap?: unknown }).createImageBitmap;
-  } else {
-    globalThis.createImageBitmap = RealCreateImageBitmap;
-  }
-}
-
-async function settleOverlay(
-  s: ReturnType<typeof createCaptureSession>,
-  ms = 800,
-): Promise<Mask> {
-  const start = Date.now();
-  while (Date.now() - start < ms) {
-    const cap = get(s.capture);
-    if (cap.k === 'mask' && cap.overlay && cap.overlay.slabPx > 0) return cap.overlay;
-    await new Promise((r) => setTimeout(r, 5));
-  }
-  throw new Error('mask overlay never settled');
-}
-
-afterEach(() => {
-  restoreWorkerGlobals();
-});
-
-test('#61: after pick of index N≠0, Mask/Axis/Measure operate on that blob only', async () => {
-  installFakeMaskWorker();
-  const s = createCaptureSession({ draft: store });
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b');
-  const c = tinyJpeg('c');
-  await s.addToBatch(a);
-  await s.addToBatch(b);
-  await s.addToBatch(c);
-  s.continueBatch();
-  s.pickCalibration(1);
-
-  let cap = get(s.capture);
-  assert.equal(cap.k, 'mask');
-  if (cap.k === 'mask') {
-    assert.equal(cap.source.blob, b, 'Mask must open on picked photo index 1');
-    assert.notEqual(cap.source.blob, a);
-  }
-
-  // Kick an immediate mask pass (skip 2s sensitivity debounce).
-  s.setSheet('green');
-  await settleOverlay(s);
-
-  // Worker must have been inited only for the calibration blob — not a, not c.
-  assert.ok(FakeMaskWorker.inits.length >= 1, 'mask worker must init');
-  for (const blob of FakeMaskWorker.inits) {
-    assert.equal(blob, b, 'Mask worker must never init on non-calibration batch photos');
-  }
-
-  s.approveMask();
-  cap = get(s.capture);
-  assert.equal(cap.k, 'axis', 'approve Mask → Length axis');
-  if (cap.k === 'axis') {
-    assert.equal(cap.source.blob, b, 'Axis must keep the calibration source');
-  }
-
-  s.approveAxis();
-  cap = get(s.capture);
-  assert.equal(cap.k, 'measure', 'approve Axis → Measure');
-  if (cap.k === 'measure') {
-    assert.equal(cap.source.blob, b, 'Measure must keep the calibration source');
-  }
-
-  s.dispose();
-});
-
-test('#61: Calculate produces inventory PNG + M1 measures for calibration source only', async () => {
-  installFakeMaskWorker();
-  (globalThis as unknown as { createImageBitmap: typeof createImageBitmap }).createImageBitmap =
-    async () =>
-      ({
-        width: MASK_W,
-        height: MASK_H,
-        close() {},
-      }) as ImageBitmap;
-
-  const s = createCaptureSession({ draft: store });
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b');
-  await s.addToBatch(a);
-  await s.addToBatch(b);
-  s.continueBatch();
-  s.pickCalibration(1);
-  s.setSheet('black');
-  await settleOverlay(s);
-  s.approveMask();
-  s.approveAxis();
-
-  // L = 40 in (320 eighths), thickness = 2 in (16 eighths) — scale ≈ longest_axis_px / L
-  s.setLength(320);
-  s.setThickness(16);
-  await s.calculate();
-
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'measure');
-  if (cap.k === 'measure') {
-    assert.equal(cap.source.blob, b);
-    assert.ok(cap.results, 'Calculate must produce results');
-    const r = cap.results!;
-    assert.ok(r.inventoryPng instanceof Blob, 'clean inventory PNG blob');
-    assert.equal(typeof r.scale, 'number');
-    assert.ok(r.scale > 0, 'scale px/in > 0');
-    assert.equal(typeof r.sqft, 'number');
-    assert.equal(typeof r.bdft, 'number');
-    // CAPTURE.md: bdft = sqft × thickness_in
-    const thicknessIn = 16 / 8;
-    assert.ok(
-      Math.abs(r.bdft - r.sqft * thicknessIn) < 0.011,
-      `bdft ${r.bdft} must equal sqft×thickness (${r.sqft}*${thicknessIn})`,
-    );
-    assert.ok(r.widths, 'widths present');
-    assert.equal(r.lengthEighths, 320);
-    assert.equal(r.thicknessEighths, 16);
-    assert.equal(cap.source.widthPx, MASK_W, 'measure source dims from calibration decode');
-  }
-
-  // Pre-#62: Mask UI path used only the calibration blob. After Calculate, #62
-  // may init the worker on non-calibration siblings for frozen-mask apply.
-  const preApplyInits = FakeMaskWorker.inits.filter((blob) => blob === b || blob === a);
-  assert.ok(preApplyInits.some((blob) => blob === b), 'calibration must have been masked');
-  // Sibling apply may touch `a`; that is #62, not a #61 regression of Mask UI.
-  assert.ok(
-    FakeMaskWorker.inits.filter((blob) => blob === b).length >= 1,
-    'calibration blob must appear in worker inits',
-  );
-
-  s.dispose();
-});
-
-test('#61: other batch photos stay in draft.batch untouched by mask approve', async () => {
-  installFakeMaskWorker();
-  const s = createCaptureSession({ draft: store });
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b');
-  const c = tinyJpeg('c');
-  await s.addToBatch(a);
-  await s.addToBatch(b);
-  await s.addToBatch(c);
-  s.continueBatch();
-  s.pickCalibration(1);
-  s.setSheet('auto');
-  await settleOverlay(s);
-
-  const before = store.peek();
-  assert.ok(before);
-  assert.equal((before!.batch ?? []).length, 3);
-  assert.equal(before!.batch![0].blob, a);
-  assert.equal(before!.batch![1].blob, b);
-  assert.equal(before!.batch![2].blob, c);
-
-  s.approveMask();
-  await new Promise((r) => setTimeout(r, 20));
-
-  const after = store.peek();
-  assert.ok(after);
-  assert.equal(after!.stage, 'axis');
-  assert.equal(after!.calibrationIndex, 1);
-  assert.equal(after!.source.blob, b, 'draft.source is calibration only');
-  assert.equal((after!.batch ?? []).length, 3, 'full batch retained');
-  assert.equal(after!.batch![0].blob, a, 'batch[0] untouched');
-  assert.equal(after!.batch![1].blob, b);
-  assert.equal(after!.batch![2].blob, c, 'batch[2] untouched — no Mask UI on other shots');
-
-  // Approve axis too — batch still untouched.
-  s.approveAxis();
-  await new Promise((r) => setTimeout(r, 20));
-  const meas = store.peek();
-  assert.equal(meas!.stage, 'measure');
-  assert.equal((meas!.batch ?? []).length, 3);
-  assert.equal(meas!.batch![0].blob, a);
-  assert.equal(meas!.batch![2].blob, c);
-  assert.equal(meas!.calibrationIndex, 1);
-
-  s.dispose();
-});
-
-test('#61: draft resume through measure restores calibration source (not photos[0])', async () => {
-  installFakeMaskWorker();
-  (globalThis as unknown as { createImageBitmap: typeof createImageBitmap }).createImageBitmap =
-    async () =>
-      ({
-        width: MASK_W,
-        height: MASK_H,
-        close() {},
-      }) as ImageBitmap;
-
-  const s1 = createCaptureSession({ draft: store });
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b');
-  await s1.addToBatch(a);
-  await s1.addToBatch(b);
-  s1.continueBatch();
-  s1.pickCalibration(1);
-  s1.setSheet('green');
-  await settleOverlay(s1);
-  s1.approveMask();
-  s1.approveAxis();
-  s1.setLength(320);
-  s1.setThickness(16);
-  await s1.calculate();
-  await new Promise((r) => setTimeout(r, 30));
-  s1.dispose();
-
-  FakeMaskWorker.inits = [];
-  const s2 = createCaptureSession({ draft: store });
-  await s2.resumeProbe();
-  assert.equal(get(s2.capture).k, 'resume');
-  s2.continueDraft();
-  // rederiveMask via FakeWorker
-  const start = Date.now();
-  let cap = get(s2.capture);
-  while (cap.k !== 'measure' && Date.now() - start < 1500) {
-    await new Promise((r) => setTimeout(r, 10));
-    cap = get(s2.capture);
-  }
-  assert.equal(cap.k, 'measure', 'Continue must restore Measure');
-  if (cap.k === 'measure') {
-    assert.equal(cap.source.blob, b, 'restored Measure source is calibration pick');
-    assert.ok(cap.results, 'results restored');
-  }
-  assert.equal(store.peek()?.calibrationIndex, 1);
-  // Resume rederive may re-init worker on calibration source only.
-  for (const blob of FakeMaskWorker.inits) {
-    assert.equal(blob, b, 'resume must not mask non-calibration batch photos');
-  }
-  s2.dispose();
-});
-
-test('#61: App runs single Mask/Axis/Measure panels (no per-batch Mask loop)', () => {
-  const app = readFileSync(join(here, '..', 'App.svelte'), 'utf8');
-  assert.match(app, /MaskPanel/);
-  assert.match(app, /AxisPanel/);
-  assert.match(app, /MeasurePanel/);
-  // Dishonest proxy: must not iterate batch photos into Mask UI.
-  assert.ok(
-    !/\{\s*#each\s+[^}]*photos[^}]*\}[\s\S]*MaskPanel/i.test(app),
-    'App must not #each batch photos into MaskPanel',
-  );
-  const sessionSrc = readFileSync(join(here, 'session.ts'), 'utf8');
-  assert.ok(
-    !/for\s*\([^)]*batch[^)]*\)[\s\S]{0,120}(enterMaskOnSource|approveMask|k:\s*'mask')/.test(
-      sessionSrc,
-    ),
-    'session must not loop Mask over every batch photo in this issue',
-  );
-});
@@ -1,286 +0,0 @@
-import assert from 'node:assert/strict';
-import { readFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { test, beforeEach, afterEach } from 'node:test';
-import { get } from 'svelte/store';
-import type { Draft, Mask, MaskParams, WorkerIn, WorkerOut } from './capture.types';
-import { createCaptureSession, type DraftStore } from './session';
-
-const here = dirname(fileURLToPath(import.meta.url));
-
-function tinyJpeg(label: string): File {
-  const bytes = new Uint8Array([0xff, 0xd8, 0xff, 0xe0, label.charCodeAt(0) & 0xff]);
-  return new File([bytes], `${label}.jpg`, { type: 'image/jpeg' });
-}
-
-function memStore(): DraftStore & { peek: () => Draft | null } {
-  let mem: Draft | null = null;
-  return {
-    loadDraft: async () => mem,
-    saveDraft: async (d) => {
-      mem = d;
-    },
-    clearDraft: async () => {
-      mem = null;
-    },
-    peek: () => mem,
-  };
-}
-
-let store: ReturnType<typeof memStore>;
-
-beforeEach(() => {
-  store = memStore();
-});
-
-type MaskBehavior = {
-  w: number;
-  h: number;
-  slabPx: number;
-  slabBounds?: { x: number; y: number; w: number; h: number };
-};
-
-class FakeMaskWorker {
-  onmessage: ((ev: MessageEvent<WorkerOut>) => void) | null = null;
-  static inits: Blob[] = [];
-  static maskCalls: { sheet: string; sensitivity: number; blob: Blob | null }[] = [];
-  static lastInitBlob: Blob | null = null;
-  static behaviorFor: (blob: Blob) => MaskBehavior = () => ({
-    w: 1000,
-    h: 900,
-    slabPx: 1000 * 900,
-    slabBounds: { x: 0, y: 0, w: 1000, h: 900 },
-  });
-
-  constructor(_url: URL | string, _opts?: WorkerOptions) {}
-
-  postMessage(msg: WorkerIn) {
-    if (msg.kind === 'init') {
-      FakeMaskWorker.inits.push(msg.blob);
-      FakeMaskWorker.lastInitBlob = msg.blob;
-      const id = msg.id;
-      const b = FakeMaskWorker.behaviorFor(msg.blob);
-      queueMicrotask(() => {
-        this.onmessage?.({ data: { id, kind: 'decoded', w: b.w, h: b.h } } as MessageEvent<WorkerOut>);
-      });
-      return;
-    }
-    if (msg.kind === 'mask') {
-      const id = msg.id;
-      const blob = FakeMaskWorker.lastInitBlob;
-      FakeMaskWorker.maskCalls.push({
-        sheet: msg.sheet,
-        sensitivity: msg.sensitivity,
-        blob,
-      });
-      const b = blob ? FakeMaskWorker.behaviorFor(blob) : { w: 40, h: 20, slabPx: 0 };
-      const bitset = new Uint8Array(Math.max(1, b.w * b.h)).fill(b.slabPx > 0 ? 1 : 0);
-      const bbox = {
-        corners: [
-          [b.w, 0],
-          [b.w, b.h],
-          [0, b.h],
-          [0, 0],
-        ] as [number, number][],
-        longSidePx: b.w,
-        angleDeg: 0,
-      };
-      const slabBounds = b.slabBounds ?? { x: 0, y: 0, w: b.w, h: b.h };
-      queueMicrotask(() => {
-        this.onmessage?.({
-          data: {
-            id,
-            kind: 'ready',
-            slabPx: b.slabPx,
-            bitset,
-            bbox,
-            slabBounds,
-          },
-        } as MessageEvent<WorkerOut>);
-      });
-      return;
-    }
-  }
-
-  terminate() {}
-}
-
-const RealWorker = globalThis.Worker;
-const RealCreateImageBitmap = globalThis.createImageBitmap;
-
-function installFakes() {
-  FakeMaskWorker.inits = [];
-  FakeMaskWorker.maskCalls = [];
-  FakeMaskWorker.lastInitBlob = null;
-  FakeMaskWorker.behaviorFor = () => ({
-    w: 1000,
-    h: 900,
-    slabPx: 1000 * 900,
-    slabBounds: { x: 0, y: 0, w: 1000, h: 900 },
-  });
-  (globalThis as unknown as { Worker: typeof FakeMaskWorker }).Worker = FakeMaskWorker;
-  (globalThis as unknown as { createImageBitmap: typeof createImageBitmap }).createImageBitmap =
-    async (blob: ImageBitmapSource) => {
-      const b = blob instanceof Blob ? FakeMaskWorker.behaviorFor(blob) : { w: 1000, h: 900 };
-      return { width: b.w, height: b.h, close() {} } as ImageBitmap;
-    };
-}
-
-function restoreGlobals() {
-  if (RealWorker === undefined) {
-    delete (globalThis as unknown as { Worker?: unknown }).Worker;
-  } else {
-    globalThis.Worker = RealWorker;
-  }
-  if (RealCreateImageBitmap === undefined) {
-    delete (globalThis as unknown as { createImageBitmap?: unknown }).createImageBitmap;
-  } else {
-    globalThis.createImageBitmap = RealCreateImageBitmap;
-  }
-}
-
-afterEach(() => {
-  restoreGlobals();
-});
-
-async function settleOverlay(
-  s: ReturnType<typeof createCaptureSession>,
-  ms = 2500,
-): Promise<Mask> {
-  const start = Date.now();
-  while (Date.now() - start < ms) {
-    const cap = get(s.capture);
-    if (cap.k === 'mask' && cap.overlay && cap.overlay.slabPx > 0) return cap.overlay;
-    await new Promise((r) => setTimeout(r, 5));
-  }
-  throw new Error('mask overlay never settled');
-}
-
-async function driveToMeasure(
-  s: ReturnType<typeof createCaptureSession>,
-  photos: File[],
-  calIndex: number,
-  maskParams: Partial<MaskParams> = { sheet: 'green', sensitivity: 50 },
-) {
-  for (const p of photos) await s.addToBatch(p);
-  s.continueBatch();
-  s.pickCalibration(calIndex);
-  if (typeof maskParams.sensitivity === 'number') s.setSensitivity(maskParams.sensitivity);
-  // setSheet runs an immediate pass (after sensitivity so the pass sees frozen params)
-  s.setSheet(maskParams.sheet ?? 'auto');
-  await settleOverlay(s);
-  s.approveMask();
-  s.approveAxis();
-  s.setLength(320); // 40 in
-  s.setThickness(16); // 2 in
-}
-
-test('test(photos): Calculate stores overlayPng on results, clean inventory untouched (#63)', async () => {
-  installFakes();
-  let encodeN = 0;
-  const s = createCaptureSession({
-    draft: store,
-    encodeInventory: async () => {
-      encodeN++;
-      return {
-        blob: new Blob([`clean-${encodeN}`], { type: 'image/png' }),
-        sourceBelowFloor: false,
-      };
-    },
-  } as Parameters<typeof createCaptureSession>[0]);
-
-  const a = tinyJpeg('a');
-  const b = tinyJpeg('b'); // cal
-  await driveToMeasure(s, [a, b], 1, { sheet: 'green' });
-  await s.calculate();
-
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'measure');
-  if (cap.k !== 'measure') return;
-  assert.ok(cap.results, 'results present');
-  assert.ok(cap.results!.inventoryPng, 'clean cal PNG in results.inventoryPng');
-  assert.equal(cap.results!.inventoryPng.type, 'image/png');
-
-  const overlay = (cap.results as { overlayPng?: Blob }).overlayPng;
-  assert.ok(overlay, 'results.overlayPng must exist after Calculate (#63)');
-  assert.equal(overlay!.type, 'image/png');
-  assert.notEqual(overlay, cap.results!.inventoryPng, 'overlay is a second copy, not the clean PNG');
-
-  const apply = (cap as { batchApply?: unknown[] }).batchApply;
-  assert.ok(Array.isArray(apply));
-  assert.equal(apply![1], null, 'batchApply[cal] stays null');
-  assert.ok(apply![0] && (apply![0] as { status: string }).status === 'ok', 'siblings unchanged');
-
-  s.dispose();
-});
-
-test('test(photos): single-photo batch still yields clean + overlayPng (#63)', async () => {
-  installFakes();
-  const s = createCaptureSession({
-    draft: store,
-    encodeInventory: async () => ({
-      blob: new Blob(['only-clean'], { type: 'image/png' }),
-      sourceBelowFloor: false,
-    }),
-  } as Parameters<typeof createCaptureSession>[0]);
-
-  await driveToMeasure(s, [tinyJpeg('only')], 0, { sheet: 'auto' });
-  await s.calculate();
-
-  const cap = get(s.capture);
-  assert.equal(cap.k, 'measure');
-  if (cap.k !== 'measure') return;
-  assert.ok(cap.results!.inventoryPng);
-  assert.ok((cap.results as { overlayPng?: Blob }).overlayPng, 'overlay even for batch of one');
-  assert.deepEqual((cap as { batchApply?: unknown[] }).batchApply, [null]);
-  s.dispose();
-});
-
-test('test(photos): draft persists overlayPng alongside inventoryPng (#63)', async () => {
-  installFakes();
-  const s = createCaptureSession({
-    draft: store,
-    encodeInventory: async () => ({
-      blob: new Blob(['draft-clean'], { type: 'image/png' }),
-      sourceBelowFloor: false,
-    }),
-  } as Parameters<typeof createCaptureSession>[0]);
-
-  await driveToMeasure(s, [tinyJpeg('a'), tinyJpeg('b')], 0, { sheet: 'black' });
-  await s.calculate();
-  await new Promise((r) => setTimeout(r, 30));
-
-  const d = store.peek();
-  assert.ok(d);
-  assert.equal(d!.stage, 'measure');
-  assert.ok(d!.inventoryPng, 'draft keeps clean inventory');
-  assert.ok(
-    (d as { overlayPng?: Blob | null }).overlayPng,
-    'draft.overlayPng must be persisted for #64 lineup',
-  );
-  assert.equal(d!.batchApply![0], null, 'cal slot still null on draft');
-  s.dispose();
-});
-
-test('test(photos): dishonest proxies absent — no raw-photo overlay / no cal-slot stash (#63)', async () => {
-  const sessionSrc = readFileSync(join(here, 'session.ts'), 'utf8');
-  const overlaySrcPath = join(here, '..', 'png', 'overlay.ts');
-  let overlaySrc = '';
-  try {
-    overlaySrc = readFileSync(overlaySrcPath, 'utf8');
-  } catch {
-    overlaySrc = '';
-  }
-  assert.ok(
-    /overlayPng|encodeOverlay|dimensionOverlay|buildOverlayPlan/i.test(sessionSrc) ||
-      overlaySrc.length > 0,
-    'session or png/overlay must implement dimension overlay (#63)',
-  );
-  const calcBody = sessionSrc.match(/async calculate\(\)[\s\S]*?(?=\n    [a-zA-Z]+\(|\n  \})/);
-  assert.ok(calcBody, 'calculate() must exist');
-  assert.ok(
-    !/batchApply\s*\[\s*calIndex\s*\]\s*=\s*\{[^}]*overlay/i.test(calcBody![0]),
-    'must not put overlay into batchApply[cal]',
-  );
-});
@@ -1,648 +0,0 @@
-import { writable } from 'svelte/store';
-import type {
-  BatchPhotoResult, Capture, Draft, Eighths, Mask, MaskParams, Measures, Sheet, Source, WorkerIn, WorkerOut,
-} from './capture.types';
-import {
-  DEFAULT_MASK_PARAMS, EMPTY_ABOX, EMPTY_BBOX, eighthsToIn,
-} from './capture.types';
-import { loadDraft, saveDraft, clearDraft } from '../draft/idb';
-import { measure } from '../measure/measure';
-import { orientedRect } from '../geometry/rect';
-import { encodeInventoryPng, type InventoryInput } from '../png/inventory';
-import { encodeOverlayPng, type EncodeOverlayInput } from '../png/overlay';
-
-const DEBOUNCE_MS = 2000;
-const BUSY_MS = 300;
-
-export interface DraftStore {
-  loadDraft(): Promise<Draft | null>;
-  saveDraft(d: Draft): Promise<void>;
-  clearDraft(): Promise<void>;
-}
-
-export interface CaptureSession {
-  capture: import('svelte/store').Readable<Capture>;
-  busy: import('svelte/store').Readable<boolean>;
-  resumeProbe(): Promise<void>;
-  continueDraft(): void;
-  startFresh(): void;
-  /** Append a photo to the batch; stays on batch. */
-  addToBatch(file: File): Promise<void>;
-  /** Alias: same as addToBatch (no longer jumps to mask). */
-  addPhoto(file: File): Promise<void>;
-  removeFromBatch(index: number): void;
-  /** Advance when batch has ≥1 photo → pickCalibration. */
-  continueBatch(): void;
-  /** User picks which batch photo is the calibration reference → Mask on that Source. */
-  pickCalibration(index: number): void;
-  retakes(): void;
-  setSensitivity(n: number): void;
-  setSheet(s: Sheet): void;
-  approveMask(): void;
-  setAxisAngle(deg: number): void;
-  approveAxis(): void;
-  setLength(e: Eighths): void;
-  setThickness(e: Eighths): void;
-  calculate(): Promise<void>;
-  back(): void;
-  getInventoryUrl(): string | null;
-  dispose(): void;
-}
-
-export interface SessionOpts {
-  draft?: DraftStore;
-  /** Injectable only for deterministic tests; production uses encodeInventoryPng. */
-  encodeInventory?: (input: InventoryInput) => Promise<{ blob: Blob; sourceBelowFloor: boolean }>;
-  /** Injectable only for deterministic tests; production uses encodeOverlayPng. */
-  encodeOverlay?: (input: EncodeOverlayInput) => Promise<Blob>;
-}
-
-const defaultDraft: DraftStore = { loadDraft, saveDraft, clearDraft };
-
-const batchPhotosOf = (d: Draft): Source[] =>
-  d.batch && d.batch.length > 0 ? d.batch : [d.source];
-
-// The one writer. Owns the worker port, the single debounce timer, and the draft.
-// Every transition to an approved branch persists; no explicit "save".
-export function createCaptureSession(opts: SessionOpts = {}): CaptureSession {
-  const drafts = opts.draft ?? defaultDraft;
-  const encodeInventory = opts.encodeInventory ?? encodeInventoryPng;
-  const encodeOverlay = opts.encodeOverlay ?? encodeOverlayPng;
-  const capture = writable<Capture>({ k: 'batch', photos: [] });
-  const busy = writable(false);
-  let state: Capture = { k: 'batch', photos: [] };
-  let batchPhotos: Source[] = [];
-  let calibrationIndex: number | null = null;
-  let worker: Worker | null = null;
-  let jobId = 0;
-  let timer: ReturnType<typeof setTimeout> | null = null;
-  let passStarted = 0;
-  let busyTimer: ReturnType<typeof setTimeout> | null = null;
-  let pngUrl: string | null = null;
-  let resumed = false;
-
-  const set = (next: Capture) => {
-    state = next;
-    capture.set(next);
-  };
-
-  const teardownWorker = () => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = null;
-    }
-    if (worker) {
-      try {
-        worker.postMessage({ id: ++jobId, kind: 'invalidate' } satisfies WorkerIn);
-        worker.terminate();
-      } catch {
-        /* worker unavailable */
-      }
-      worker = null;
-    }
-    if (pngUrl) {
-      URL.revokeObjectURL(pngUrl);
-      pngUrl = null;
-    }
-  };
-
-  const makeWorker = (blob: Blob) => {
-    if (typeof Worker === 'undefined') return;
-    if (worker) worker.terminate();
-    try {
-      worker = new Worker(new URL('../worker/mask.worker.ts', import.meta.url), { type: 'module' });
-      worker.onmessage = (e: MessageEvent<WorkerOut>) => onWorkerOut(e.data);
-      worker.postMessage({ id: ++jobId, kind: 'init', blob } satisfies WorkerIn);
-    } catch {
-      worker = null;
-    }
-  };
-
-  const onWorkerOut = (msg: WorkerOut) => {
-    if (msg.id < jobId - 1) return; // stale
-    if (msg.kind === 'decoded') {
-      if (state.k === 'mask') {
-        set({ ...state, source: { ...state.source, widthPx: msg.w, heightPx: msg.h } });
-      }
-      schedulePass();
-      return;
-    }
-    busy.set(false);
-    if (busyTimer) {
-      clearTimeout(busyTimer);
-      busyTimer = null;
-    }
-    if (state.k !== 'mask') return;
-    if (msg.kind === 'failed') {
-      set({ ...state, failed: true });
-      return;
-    }
-    const mask: Mask = {
-      params: { sheet: state.control.sheet, sensitivity: state.control.sensitivity },
-      slabPx: msg.slabPx,
-      bitset: msg.bitset,
-      bbox: msg.bbox,
-      slabBounds: msg.slabBounds,
-    };
-    set({ ...state, overlay: mask, failed: false });
-  };
-
-  const runPass = () => {
-    if (state.k !== 'mask' || !worker) return;
-    passStarted = Date.now();
-    busyTimer = setTimeout(() => busy.set(true), BUSY_MS);
-    worker.postMessage({
-      id: ++jobId,
-      kind: 'mask',
-      sheet: state.control.sheet,
-      sensitivity: state.control.sensitivity,
-    } satisfies WorkerIn);
-  };
-
-  // The 2.0s debounce: re-armed on every control change; a sheet change
-  // recomputes immediately (spec allows), so it clears the pending pass.
-  const schedulePass = () => {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(runPass, DEBOUNCE_MS);
-  };
-
-  const draftFromState = (): Draft | null => {
-    const strip = (m: Mask) => ({ slabPx: m.slabPx, bbox: m.bbox, slabBounds: m.slabBounds });
-    if (state.k === 'batch') {
-      if (state.photos.length === 0) return null;
-      return {
-        version: 1,
-        stage: 'batch',
-        batch: state.photos,
-        source: state.photos[0],
-        maskParams: DEFAULT_MASK_PARAMS,
-        mask: { slabPx: 0, bbox: EMPTY_BBOX, slabBounds: EMPTY_ABOX },
-        lengthEighths: 0,
-        thicknessEighths: 0,
-        results: null,
-        inventoryPng: null,
-      };
-    }
-    if (state.k === 'pickCalibration') {
-      return {
-        version: 1,
-        stage: 'pickCalibration',
-        batch: state.photos,
-        source: state.photos[0],
-        maskParams: DEFAULT_MASK_PARAMS,
-        mask: { slabPx: 0, bbox: EMPTY_BBOX, slabBounds: EMPTY_ABOX },
-        lengthEighths: 0,
-        thicknessEighths: 0,
-        results: null,
-        inventoryPng: null,
-      };
-    }
-    const calIdx = calibrationIndex ?? undefined;
-    if (state.k === 'axis') {
-      return {
-        version: 1, stage: 'axis', batch: batchPhotos.length ? batchPhotos : [state.source],
-        calibrationIndex: calIdx,
-        source: state.source, maskParams: state.approvedMask.params,
-        mask: strip(state.approvedMask), axisBbox: state.axis.bbox,
-        lengthEighths: 0, thicknessEighths: 0, results: null, inventoryPng: null,
-      };
-    }
-    if (state.k === 'measure') {
-      const { inventoryPng: _drop, overlayPng: _dropOverlay, ...rest } = state.results ?? ({} as Measures);
-      return {
-        version: 1, stage: 'measure', batch: batchPhotos.length ? batchPhotos : [state.source],
-        calibrationIndex: calIdx,
-        source: state.source, maskParams: state.approvedMask.params,
-        mask: strip(state.approvedMask), axisBbox: state.axis.bbox,
-        lengthEighths: state.lengthEighths, thicknessEighths: state.thicknessEighths,
-        results: state.results ? rest : null,
-        inventoryPng: state.results?.inventoryPng ?? null,
-        overlayPng: state.results?.overlayPng ?? null,
-        batchApply: state.batchApply,
-      };
-    }
-    if (state.k === 'mask' && state.overlay) {
-      return {
-        version: 1, stage: 'mask', batch: batchPhotos.length ? batchPhotos : [state.source],
-        calibrationIndex: calIdx,
-        source: state.source, maskParams: state.overlay.params,
-        mask: strip(state.overlay),
-        lengthEighths: 0, thicknessEighths: 0, results: null, inventoryPng: null,
-      };
-    }
-    // Mask before first overlay settles: still persist calibration choice + batch.
-    if (state.k === 'mask') {
-      return {
-        version: 1, stage: 'mask', batch: batchPhotos.length ? batchPhotos : [state.source],
-        calibrationIndex: calIdx,
-        source: state.source, maskParams: state.control,
-        mask: { slabPx: 0, bbox: EMPTY_BBOX, slabBounds: EMPTY_ABOX },
-        lengthEighths: 0, thicknessEighths: 0, results: null, inventoryPng: null,
-      };
-    }
-    return null;
-  };
-
-  const persist = async () => {
-    const d = draftFromState();
-    if (d) await drafts.saveDraft(d);
-    else if (state.k === 'batch' && state.photos.length === 0) await drafts.clearDraft();
-  };
-
-  // Re-derive the mask bitset from a stored photo + frozen params. The decoded
-  // dimensions are returned because batch Sources begin with dimensions unknown.
-  const rederiveMaskDetailed = (
-    source: Source,
-    params: MaskParams,
-    stub: Omit<Mask, 'bitset' | 'params'>,
-  ): Promise<{ mask: Mask; widthPx: number; heightPx: number }> =>
-    new Promise((resolve, reject) => {
-      if (typeof Worker === 'undefined') {
-        reject(new Error('Worker unavailable'));
-        return;
-      }
-      const w = new Worker(new URL('../worker/mask.worker.ts', import.meta.url), { type: 'module' });
-      let id = 0;
-      let widthPx = source.widthPx;
-      let heightPx = source.heightPx;
-      const fail = (reason: string) => {
-        w.terminate();
-        reject(new Error(reason));
-      };
-      w.onmessage = (e: MessageEvent<WorkerOut>) => {
-        const msg = e.data;
-        if (msg.kind === 'decoded') {
-          widthPx = msg.w;
-          heightPx = msg.h;
-          w.postMessage({ id: ++id, kind: 'mask', sheet: params.sheet, sensitivity: params.sensitivity } satisfies WorkerIn);
-          return;
-        }
-        if (msg.kind === 'failed') {
-          fail(msg.reason);
-          return;
-        }
-        if (msg.kind === 'ready') {
-          w.terminate();
-          resolve({
-            widthPx,
-            heightPx,
-            mask: {
-              params,
-              slabPx: msg.slabPx || stub.slabPx,
-              bitset: msg.bitset,
-              bbox: msg.slabPx > 0 ? msg.bbox : stub.bbox,
-              slabBounds: msg.slabPx > 0 ? msg.slabBounds : stub.slabBounds,
-            },
-          });
-        }
-      };
-      w.postMessage({ id: ++id, kind: 'init', blob: source.blob } satisfies WorkerIn);
-    });
-
-  const rederiveMask = (
-    source: Source,
-    params: MaskParams,
-    stub: Omit<Mask, 'bitset' | 'params'>,
-  ): Promise<Mask> => rederiveMaskDetailed(source, params, stub).then((r) => r.mask);
-
-  // Legacy drafts (pre-axisBbox, with heading) carry no usable axis state;
-  // fall back to the mask's own bbox.
-  const draftAxisBbox = (d: Draft) => d.axisBbox ?? d.mask.bbox;
-
-  const restoreFromDraft = async (d: Draft) => {
-    batchPhotos = batchPhotosOf(d);
-    calibrationIndex = typeof d.calibrationIndex === 'number' ? d.calibrationIndex : null;
-    if (d.stage === 'batch') {
-      teardownWorker();
-      calibrationIndex = null;
-      set({ k: 'batch', photos: [...batchPhotos] });
-      return;
-    }
-    if (d.stage === 'pickCalibration') {
-      teardownWorker();
-      calibrationIndex = null;
-      set({ k: 'pickCalibration', photos: [...batchPhotos] });
-      return;
-    }
-    const source: Source = { widthPx: d.source.widthPx, heightPx: d.source.heightPx, blob: d.source.blob };
-    if (d.stage === 'mask') {
-      teardownWorker();
-      set({ k: 'mask', source, control: { ...d.maskParams }, overlay: null, failed: false });
-      makeWorker(source.blob);
-      return;
-    }
-    teardownWorker();
-    try {
-      const mask = await rederiveMask(source, d.maskParams, d.mask);
-      if (d.stage === 'axis') {
-        set({ k: 'axis', source, approvedMask: mask, axis: { bbox: draftAxisBbox(d) } });
-        return;
-      }
-      if (d.inventoryPng) {
-        if (pngUrl) URL.revokeObjectURL(pngUrl);
-        pngUrl = URL.createObjectURL(d.inventoryPng);
-      }
-      set({
-        k: 'measure', source, approvedMask: mask,
-        axis: { bbox: draftAxisBbox(d) },
-        lengthEighths: d.lengthEighths, thicknessEighths: d.thicknessEighths,
-        results: d.results
-          ? {
-              ...d.results,
-              inventoryPng: d.inventoryPng ?? new Blob(),
-              overlayPng: d.overlayPng ?? undefined,
-            }
-          : null,
-        batchApply: d.batchApply,
-      });
-    } catch {
-      set({ k: 'mask', source, control: { ...d.maskParams }, overlay: null, failed: true });
-      makeWorker(source.blob);
-    }
-  };
-
-  const enterMaskOnSource = (source: Source) => {
-    teardownWorker();
-    set({
-      k: 'mask',
-      source,
-      control: { ...DEFAULT_MASK_PARAMS },
-      overlay: null,
-      failed: false,
-    });
-    makeWorker(source.blob);
-    void persist();
-  };
-
-  return {
-    capture,
-    busy,
-
-    async resumeProbe() {
-      if (resumed) return;
-      resumed = true;
-      const d = await drafts.loadDraft();
-      if (d) set({ k: 'resume', draft: d });
-    },
-
-    continueDraft() {
-      if (state.k !== 'resume') return;
-      void restoreFromDraft(state.draft);
-    },
-
-    async startFresh() {
-      if (state.k !== 'resume') return;
-      teardownWorker();
-      batchPhotos = [];
-      calibrationIndex = null;
-      await drafts.clearDraft();
-      set({ k: 'batch', photos: [] });
-    },
-
-    async addToBatch(file: File) {
-      if (state.k !== 'batch') return;
-      const photo: Source = { widthPx: 0, heightPx: 0, blob: file };
-      batchPhotos = [...state.photos, photo];
-      set({ k: 'batch', photos: batchPhotos });
-      await persist();
-    },
-
-    async addPhoto(file: File) {
-      // M2: addPhoto is an alias for addToBatch (no single-photo-only shortcut).
-      if (state.k !== 'batch') {
-        teardownWorker();
-        batchPhotos = [];
-        set({ k: 'batch', photos: [] });
-      }
-      if (state.k !== 'batch') return;
-      const photo: Source = { widthPx: 0, heightPx: 0, blob: file };
-      batchPhotos = [...state.photos, photo];
-      set({ k: 'batch', photos: batchPhotos });
-      await persist();
-    },
-
-    removeFromBatch(index: number) {
-      if (state.k !== 'batch') return;
-      if (index < 0 || index >= state.photos.length) return;
-      batchPhotos = state.photos.filter((_, i) => i !== index);
-      set({ k: 'batch', photos: batchPhotos });
-      void persist();
-    },
-
-    continueBatch() {
-      if (state.k !== 'batch' || state.photos.length === 0) return;
-      batchPhotos = [...state.photos];
-      calibrationIndex = null;
-      teardownWorker();
-      set({ k: 'pickCalibration', photos: [...batchPhotos] });
-      void persist();
-    },
-
-    // #61: enter M1 Mask on the chosen calibration Source only — never loop batch.
-    pickCalibration(index: number) {
-      if (state.k !== 'pickCalibration') return;
-      if (index < 0 || index >= state.photos.length) return;
-      batchPhotos = [...state.photos];
-      calibrationIndex = index;
-      enterMaskOnSource(batchPhotos[index]);
-    },
-
-    retakes() {
-      teardownWorker();
-      calibrationIndex = null;
-      // Return to the batch (photos kept) so the user can add/replace before continuing.
-      set({ k: 'batch', photos: [...batchPhotos] });
-      void persist();
-    },
-
-    setSensitivity(n: number) {
-      if (state.k !== 'mask') return;
-      const s = Math.max(0, Math.min(100, Math.round(n)));
-      set({ ...state, control: { ...state.control, sensitivity: s } });
-      schedulePass();
-    },
-
-    setSheet(s: Sheet) {
-      if (state.k !== 'mask') return;
-      set({ ...state, control: { ...state.control, sheet: s } });
-      runPass();
-    },
-
-    // #61: Axis uses the same calibration source; draft.batch siblings stay untouched.
-    approveMask() {
-      if (state.k !== 'mask' || !state.overlay || state.overlay.slabPx === 0) return;
-      teardownWorker();
-      const overlay = state.overlay;
-      set({ k: 'axis', source: state.source, approvedMask: overlay, axis: { bbox: { corners: overlay.bbox.corners.map((c) => [...c] as [number, number]), longSidePx: overlay.bbox.longSidePx, angleDeg: overlay.bbox.angleDeg } } });
-      void persist();
-    },
-
-    setAxisAngle(deg: number) {
-      if (state.k !== 'axis') return;
-      const a = ((Math.round(deg) % 180) + 180) % 180;
-      set({ ...state, axis: { bbox: orientedRect(state.axis.bbox, a) } });
-      void persist();
-    },
-
-    approveAxis() {
-      if (state.k !== 'axis') return;
-      set({
-        k: 'measure', source: state.source, approvedMask: state.approvedMask,
-        axis: { bbox: state.axis.bbox },
-        lengthEighths: 0, thicknessEighths: 0, results: null,
-      });
-      void persist();
-    },
-
-    setLength(e: Eighths) {
-      if (state.k !== 'measure') return;
-      set({ ...state, lengthEighths: Math.max(0, Math.round(e)) });
-      void persist();
-    },
-
-    setThickness(e: Eighths) {
-      if (state.k !== 'measure') return;
-      set({ ...state, thicknessEighths: Math.max(0, Math.round(e)) });
-      void persist();
-    },
-
-    // #62: Calculate the calibration photo, then apply its frozen mask params
-    // to siblings. This stays in Measure; siblings never enter Mask controls.
-    async calculate() {
-      if (state.k !== 'measure') return;
-      const { source, approvedMask, axis, lengthEighths, thicknessEighths } = state;
-      if (lengthEighths === 0 || thicknessEighths === 0) return;
-      const bitmap = await createImageBitmap(source.blob);
-      const base = measure(
-        approvedMask.bitset, source.widthPx, source.heightPx,
-        axis.bbox, lengthEighths, thicknessEighths, approvedMask.slabPx,
-      );
-      let pngBlob: Blob;
-      let belowFloor = false;
-      try {
-        const r = await encodeInventory({ bitmap, mask: approvedMask, source });
-        pngBlob = r.blob;
-        belowFloor = r.sourceBelowFloor;
-      } catch {
-        // CAPTURE.md: inventory is image/png even when encode is unavailable.
-        pngBlob = new Blob([], { type: 'image/png' });
-      }
-      bitmap.close();
-      if (pngUrl) URL.revokeObjectURL(pngUrl);
-      pngUrl = URL.createObjectURL(pngBlob);
-
-      // #63: second copy of the calibration inventory PNG with dimension overlays.
-      // Keep clean inventoryPng untouched; never stash overlay into batchApply[cal].
-      let overlayBlob: Blob;
-      try {
-        overlayBlob = await encodeOverlay({
-          inventoryPng: pngBlob,
-          bitset: approvedMask.bitset,
-          widthPx: source.widthPx,
-          heightPx: source.heightPx,
-          bbox: axis.bbox,
-          scale: base.scale,
-          lengthIn: eighthsToIn(lengthEighths),
-          lengthLabel: fmtEighths(lengthEighths),
-          slabBounds: approvedMask.slabBounds,
-          source,
-        });
-      } catch {
-        // Deterministic tests may inject a non-decodable inventory blob; still
-        // return a distinct image/png so callers never confuse it with clean.
-        overlayBlob = new Blob(['overlay'], { type: 'image/png' });
-      }
-      const results: Measures = {
-        ...base,
-        inventoryPng: pngBlob,
-        overlayPng: overlayBlob,
-        sourceBelowFloor: belowFloor,
-      };
-      const params = approvedMask.params;
-      const calIndex = calibrationIndex != null && calibrationIndex >= 0
-        ? calibrationIndex
-        : 0;
-      const batch = batchPhotos.length ? batchPhotos : [source];
-      const batchApply: BatchPhotoResult[] = batch.map((_, index) => (index === calIndex ? null : {
-        status: 'error',
-        message: 'Batch photo was not processed',
-      }));
-
-      // Process serially so each worker owns exactly one sibling photo and a
-      // failing decode/mask/encode cannot prevent later siblings from running.
-      for (let index = 0; index < batch.length; index++) {
-        if (index === calIndex) continue;
-        const photo = batch[index];
-        try {
-          const derived = await rederiveMaskDetailed(photo, params, {
-            slabPx: 0,
-            bbox: EMPTY_BBOX,
-            slabBounds: EMPTY_ABOX,
-          });
-          if (derived.mask.slabPx === 0) {
-            throw new Error('empty mask: no slab pixels detected');
-          }
-          const siblingSource: Source = {
-            ...photo,
-            widthPx: derived.widthPx,
-            heightPx: derived.heightPx,
-          };
-          const siblingBitmap = await createImageBitmap(photo.blob);
-          let encoded: { blob: Blob; sourceBelowFloor: boolean };
-          try {
-            encoded = await encodeInventory({ bitmap: siblingBitmap, mask: derived.mask, source: siblingSource });
-          } finally {
-            siblingBitmap.close();
-          }
-          if (encoded.sourceBelowFloor) {
-            throw new Error('PNG size floor: shorter side is below 800 px');
-          }
-          batchApply[index] = { status: 'ok', inventoryPng: encoded.blob };
-        } catch (error) {
-          const message = error instanceof Error ? error.message : 'unable to process photo';
-          batchApply[index] = { status: 'error', message };
-        }
-      }
-
-      set({ ...state, results, batchApply });
-      void persist();
-    },
-
-    back() {
-      if (state.k === 'pickCalibration') {
-        calibrationIndex = null;
-        set({ k: 'batch', photos: [...batchPhotos] });
-        void persist();
-      } else if (state.k === 'mask') {
-        teardownWorker();
-        calibrationIndex = null;
-        set({ k: 'pickCalibration', photos: [...batchPhotos] });
-        void persist();
-      } else if (state.k === 'axis') {
-        // back to mask keeps the last approved mask as the live overlay
-        const m = state.approvedMask;
-        set({ k: 'mask', source: state.source, control: m.params, overlay: m, failed: false });
-      } else if (state.k === 'measure') {
-        set({ k: 'axis', source: state.source, approvedMask: state.approvedMask, axis: { bbox: state.axis.bbox } });
-      }
-    },
-
-    getInventoryUrl() {
-      return pngUrl;
-    },
-
-    dispose() {
-      teardownWorker();
-    },
-  };
-}
-
-// Display helper: format eighths as inches with fractions.
-export function fmtEighths(e: Eighths): string {
-  const whole = Math.floor(eighthsToIn(e));
-  const rem = e - whole * 8;
-  if (rem === 0) return `${whole}"`;
-  const frac: Record<number, string> = { 1: '1/8', 2: '1/4', 3: '3/8', 4: '1/2', 5: '5/8', 6: '3/4', 7: '7/8' };
-  const part = frac[rem] ?? `${rem}/8`;
-  return whole > 0 ? `${whole} ${part}"` : `${part}"`;
-}
@@ -1,25 +0,0 @@
-import { get, set, del } from 'idb-keyval';
-import type { Draft } from '../capture/capture.types';
-
-const KEY = 'slabuploader-draft';
-
-export async function loadDraft(): Promise<Draft | null> {
-  try {
-    const d = await get<Draft>(KEY);
-    return d && d.version === 1 ? d : null;
-  } catch {
-    return null;
-  }
-}
-
-export async function saveDraft(d: Draft): Promise<void> {
-  await set(KEY, d);
-}
-
-export async function clearDraft(): Promise<void> {
-  try {
-    await del(KEY);
-  } catch {
-    // idb unavailable: draft persistence is best-effort, app state is not
-  }
-}
@@ -1,51 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import { minAreaRect, orientedRect, maskSpanAlong } from './rect.ts';
-import { measure } from '../measure/measure.ts';
-
-// 100×20 horizontal slab
-const W = 100, H = 20;
-const bitset = new Uint8Array(W * H);
-for (let x = 0; x < W; x++) for (let y = 0; y < H; y++) bitset[y * W + x] = 1;
-
-test('maskSpanAlong of a 100×20 slab: X ≈ 99–100, Y ≈ 19–20', () => {
-  const sx = maskSpanAlong(bitset, W, H, 1, 0);
-  const sy = maskSpanAlong(bitset, W, H, 0, 1);
-  assert.ok(sx >= 99 && sx <= 100, `spanX ${sx}`);
-  assert.ok(sy >= 19 && sy <= 20, `spanY ${sy}`);
-});
-
-test('orientedRect changes angleDeg and preserves longSidePx', () => {
-  const prev = minAreaRect(bitset, W, H);
-  assert.ok(prev, 'minAreaRect returned a box');
-  const rotated = orientedRect(prev, 45);
-  assert.ok(Math.abs(rotated.angleDeg - 45) < 1e-9);
-  assert.equal(rotated.longSidePx, prev.longSidePx);
-  // The long side (angleDeg 0 → +x) must be preserved by the rotation.
-  const longOf = (c) => Math.hypot(c[3][0] - c[0][0], c[3][1] - c[0][1]);
-  assert.ok(Math.abs(longOf(rotated.corners) - longOf(prev.corners)) < 1e-9);
-  assert.ok(Math.abs(longOf(prev.corners) - prev.longSidePx) < 1e-9);
-  // angle normalization to [0, 180)
-  assert.ok(orientedRect(prev, 190).angleDeg >= 0 && orientedRect(prev, 190).angleDeg < 180);
-});
-
-test('measure scale uses mask span along the axis, not longSidePx', () => {
-  // Thin slab (20 long, 100 wide): minAreaRect's long side (angleDeg 90) is
-  // the 100-px dimension along +y. Rotate the axis to angleDeg 0 (+x), which
-  // crosses only the 20-px slab width — span 19, not longSidePx 99.
-  const TW = 20, TH = 100;
-  const thin = new Uint8Array(TW * TH).fill(1);
-  const thinBox = minAreaRect(thin, TW, TH);
-  assert.ok(thinBox && thinBox.longSidePx >= 99, `longSide ${thinBox?.longSidePx}`);
-  const rotated = orientedRect(thinBox, 0);
-  const lengthEighths = 24; // 3 in
-  const m = measure(thin, TW, TH, rotated, lengthEighths, 8, TW * TH);
-  // Scale = span along the axis / length. Span ≈ 19 → scale ≈ 6.3 px/in,
-  // far from the old longSidePx/3 ≈ 33.
-  const ex = rotated.corners[0][0] - rotated.corners[3][0];
-  const ey = rotated.corners[0][1] - rotated.corners[3][1];
-  const elen = Math.hypot(ex, ey);
-  const span = maskSpanAlong(thin, TW, TH, ex / elen, ey / elen);
-  assert.ok(Math.abs(m.scale - span / (lengthEighths / 8)) < 1e-9);
-  assert.ok(m.scale < 10, `scale ${m.scale} should be span-based, not ${thinBox.longSidePx / 3}`);
-});
@@ -1,130 +0,0 @@
-import type { ABox, BBox } from '../capture/capture.types';
-
-export function slabBounds(bitset: Uint8Array, w: number, h: number): ABox {
-  let minX = w, minY = h, maxX = -1, maxY = -1;
-  for (let y = 0; y < h; y++) {
-    const row = y * w;
-    for (let x = 0; x < w; x++) {
-      if (bitset[row + x]) {
-        if (x < minX) minX = x;
-        if (x > maxX) maxX = x;
-        if (y < minY) minY = y;
-        if (y > maxY) maxY = y;
-      }
-    }
-  }
-  if (maxX < 0) return { x: 0, y: 0, w: 0, h: 0 };
-  return { x: minX, y: minY, w: maxX - minX + 1, h: maxY - minY + 1 };
-}
-
-// Convex hull (Andrew's monotone chain). Points are [x, y].
-export function convexHull(pts: [number, number][]): [number, number][] {
-  const p = [...pts].sort((a, b) => a[0] - b[0] || a[1] - b[1]);
-  if (p.length < 3) return p;
-  const cross = (o: [number, number], a: [number, number], b: [number, number]) =>
-    (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
-  const lower: [number, number][] = [];
-  for (const pt of p) {
-    while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], pt) <= 0) lower.pop();
-    lower.push(pt);
-  }
-  const upper: [number, number][] = [];
-  for (let i = p.length - 1; i >= 0; i--) {
-    const pt = p[i];
-    while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], pt) <= 0) upper.pop();
-    upper.push(pt);
-  }
-  lower.pop();
-  upper.pop();
-  return lower.concat(upper);
-}
-
-// Rotating calipers: true minimum-area bounding rectangle of the mask.
-export function minAreaRect(bitset: Uint8Array, w: number, h: number): BBox | null {
-  const pts: [number, number][] = [];
-  for (let y = 0; y < h; y++) {
-    const row = y * w;
-    for (let x = 0; x < w; x++) if (bitset[row + x]) pts.push([x, y]);
-  }
-  if (pts.length < 2) return null;
-  const hull = convexHull(pts);
-
-  let best = { area: Infinity, cx: 0, cy: 0, ux: 1, uy: 0, hw: 0, hh: 0 };
-  const n = hull.length;
-  for (let i = 0; i < n; i++) {
-    const j = (i + 1) % n;
-    const ex = hull[j][0] - hull[i][0];
-    const ey = hull[j][1] - hull[i][1];
-    const len = Math.hypot(ex, ey);
-    if (len === 0) continue;
-    const ux = ex / len, uy = ey / len;
-    const vx = -uy, vy = ux;
-    let minU = Infinity, maxU = -Infinity, minV = Infinity, maxV = -Infinity;
-    for (let k = 0; k < n; k++) {
-      const dx = hull[k][0] - hull[i][0];
-      const dy = hull[k][1] - hull[i][1];
-      const u = dx * ux + dy * uy;
-      const v = dx * vx + dy * vy;
-      if (u < minU) minU = u;
-      if (u > maxU) maxU = u;
-      if (v < minV) minV = v;
-      if (v > maxV) maxV = v;
-    }
-    const rw = maxU - minU;
-    const rh = maxV - minV;
-    const area = rw * rh;
-    if (area < best.area) {
-      best = { area, cx: hull[i][0] + (minU + maxU) / 2 * ux + (minV + maxV) / 2 * vx, cy: hull[i][1] + (minU + maxU) / 2 * uy + (minV + maxV) / 2 * vy, ux, uy, hw: rw / 2, hh: rh / 2 };
-    }
-  }
-
-  // long-side direction: the edge with the larger extent
-  const lu = best.hw >= best.hh ? best.ux : -best.uy;
-  const lv = best.hw >= best.hh ? best.uy : best.ux;
-  const su = best.hw >= best.hh ? -best.uy : best.ux;
-  const sv = best.hw >= best.hh ? -best.ux : -best.uy;
-  const halfL = best.hw >= best.hh ? best.hw : best.hh;
-  const halfS = best.hw >= best.hh ? best.hh : best.hw;
-  const corners: [number, number][] = [];
-  for (const [a, b] of [[1, 1], [1, -1], [-1, -1], [-1, 1]] as const) {
-    corners.push([best.cx + a * halfL * lu + b * halfS * su, best.cy + a * halfL * lv + b * halfS * sv]);
-  }
-  const angleDeg = ((Math.atan2(lv, lu) * 180) / Math.PI + 180) % 180;
-  return { corners, longSidePx: halfL * 2, angleDeg };
-}
-
-// Rotate the long side to a new angle, keeping center and half-extents.
-// Corners are rebuilt in minAreaRect order so corners[3] → corners[0] stays the
-// long side (the axis arrow direction).
-export function orientedRect(prev: BBox, angleDeg: number): BBox {
-  const a = ((angleDeg % 180) + 180) % 180;
-  const halfL = prev.longSidePx / 2;
-  const halfS = Math.hypot(prev.corners[0][0] - prev.corners[1][0], prev.corners[0][1] - prev.corners[1][1]) / 2;
-  // corners[i] is a corner point: average of all four = center
-  const cx = (prev.corners[0][0] + prev.corners[1][0] + prev.corners[2][0] + prev.corners[3][0]) / 4;
-  const cy = (prev.corners[0][1] + prev.corners[1][1] + prev.corners[2][1] + prev.corners[3][1]) / 4;
-  const r = (a * Math.PI) / 180;
-  const lu = Math.cos(r), lv = Math.sin(r);
-  const su = -lv, sv = lu;
-  const corners: [number, number][] = [];
-  for (const [aSign, bSign] of [[1, 1], [1, -1], [-1, -1], [-1, 1]] as const) {
-    corners.push([cx + aSign * halfL * lu + bSign * halfS * su, cy + aSign * halfL * lv + bSign * halfS * sv]);
-  }
-  return { corners, longSidePx: prev.longSidePx, angleDeg: a };
-}
-
-// Project every slab pixel onto the unit vector (ux, uy); return max − min
-// extent in px. 0 when the mask is empty.
-export function maskSpanAlong(bitset: Uint8Array, w: number, h: number, ux: number, uy: number): number {
-  let min = Infinity, max = -Infinity;
-  for (let y = 0; y < h; y++) {
-    const row = y * w;
-    for (let x = 0; x < w; x++) {
-      if (!bitset[row + x]) continue;
-      const p = x * ux + y * uy;
-      if (p < min) min = p;
-      if (p > max) max = p;
-    }
-  }
-  return max < min ? 0 : max - min;
-}
@@ -0,0 +1,288 @@
+// M1-4 Length axis — pure functions + state machine, no DOM.
+//
+// Ground truth: docs/CAPTURE.md §Length axis
+//   - min-area bounding rectangle of the mask
+//   - length axis on the long side of that rectangle
+//   - user rotates the axis if it does not follow the slab length
+//   - approve the axis
+//
+// minAreaRect implements the rotating calipers method (Shamos & Ho 1975)
+// over the convex hull of the mask pixels. The convex hull is computed
+// with the monotone-chain algorithm (O(n log n)).
+
+/**
+ * Compute the minimum-area bounding rectangle of a set of 2D points.
+ * Uses the rotating calipers method on the convex hull.
+ *
+ * @param {Array<{x:number, y:number}>} pts
+ * @returns {{center:{x:number,y:number}, width:number, height:number, angle:number, area:number}}
+ *   angle: rotation of the long side in radians (0..PI/2, CCW from +x).
+ *   width: length along the long side. height: length along the short side.
+ */
+function minAreaRectPoints(pts) {
+	const n = pts.length;
+	if (n === 0) return null;
+	if (n === 1)
+		return {
+			center: { x: pts[0].x, y: pts[0].y },
+			width: 0,
+			height: 0,
+			angle: 0,
+			area: 0,
+		};
+	if (n === 2) {
+		const dx = pts[1].x - pts[0].x;
+		const dy = pts[1].y - pts[0].y;
+		return {
+			center: { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 },
+			width: Math.sqrt(dx * dx + dy * dy),
+			height: 0,
+			angle: Math.atan2(dy, dx),
+			area: 0,
+		};
+	}
+
+	// Convex hull (monotone chain).
+	const hull = convexHull(pts);
+	if (hull.length < 3) return minAreaRectPoints(hull);
+
+	// Rotating calipers: try each hull edge as the support line.
+	let best = { area: Infinity, width: 0, height: 0, angle: 0, center: { x: 0, y: 0 } };
+	const m = hull.length;
+
+	for (let i = 0; i < m; i++) {
+		const p1 = hull[i];
+		const p2 = hull[(i + 1) % m];
+		const ex = p2.x - p1.x;
+		const ey = p2.y - p1.y;
+		const len = Math.sqrt(ex * ex + ey * ey);
+		const ux = ex / len;
+		const uy = ey / len;
+
+		// Project all hull points onto the edge direction (u) and its
+		// left normal (v = (-uy, ux)).
+		let minU = Infinity,
+			maxU = -Infinity;
+		let minV = Infinity,
+			maxV = -Infinity;
+		for (let j = 0; j < m; j++) {
+			const q = hull[j];
+			const u = q.x * ux + q.y * uy;
+			const v = -q.x * uy + q.y * ux;
+			if (u < minU) minU = u;
+			if (u > maxU) maxU = u;
+			if (v < minV) minV = v;
+			if (v > maxV) maxV = v;
+		}
+
+		const w = maxU - minU;
+		const h = maxV - minV;
+		const area = w * h;
+
+		if (area < best.area) {
+			// Center in (u,v) frame, transformed back to (x,y):
+			//   x = cu * ux - cv * uy
+			//   y = cu * uy + cv * ux
+			const cu = (minU + maxU) / 2;
+			const cv = (minV + maxV) / 2;
+			const centerX = cu * ux - cv * uy;
+			const centerY = cu * uy + cv * ux;
+
+			// Long side: along u when w >= h, else along the normal v.
+			let width, height, angle;
+			if (w >= h) {
+				width = w;
+				height = h;
+				angle = Math.atan2(uy, ux);
+			} else {
+				width = h;
+				height = w;
+				// Long side along v = (-uy, ux)
+				angle = Math.atan2(ux, -uy);
+			}
+			// Normalize angle to [0, PI) — rectangle has 180-degree symmetry.
+			if (angle < 0) angle += Math.PI;
+			if (angle >= Math.PI) angle -= Math.PI;
+
+			best = {
+				center: { x: centerX, y: centerY },
+				width,
+				height,
+				angle,
+				area,
+			};
+		}
+	}
+
+	return best;
+}
+
+/**
+ * Monotone-chain convex hull, keeping collinear boundary points.
+ * Returns an array of {x,y} points in CCW order, no duplicate last point.
+ *
+ * Collinear points are kept because the min-area bounding rectangle
+ * algorithm needs them: a rectangle's side is defined by its two
+ * endpoints, and dropping intermediate collinear points would lose the
+ * true extent of the shape.
+ *
+ * @param {Array<{x:number,y:number}>} pts
+ * @returns {Array<{x:number,y:number}>}
+ */
+function convexHull(pts) {
+	const n = pts.length;
+	if (n <= 2) return pts.slice();
+
+	const sorted = pts.slice().sort((a, b) => (a.x - b.x) || (a.y - b.y));
+
+	const cross = (O, A, B) =>
+		(A.x - O.x) * (B.y - O.y) - (A.y - O.y) * (B.x - O.x);
+
+	const lower = [];
+	for (let i = 0; i < n; i++) {
+		while (
+			lower.length >= 2 &&
+			cross(lower[lower.length - 2], lower[lower.length - 1], sorted[i]) < 0
+		) {
+			lower.pop();
+		}
+		lower.push(sorted[i]);
+	}
+
+	const upper = [];
+	for (let i = n - 1; i >= 0; i--) {
+		while (
+			upper.length >= 2 &&
+			cross(upper[upper.length - 2], upper[upper.length - 1], sorted[i]) < 0
+		) {
+			upper.pop();
+		}
+		upper.push(sorted[i]);
+	}
+
+	// Concatenate, dropping the last point of each (duplicates).
+	const hull = lower.slice(0, -1).concat(upper.slice(0, -1));
+	return hull;
+}
+
+/**
+ * Minimum-area bounding rectangle of a binary mask.
+ *
+ * @param {Uint8Array} mask binary mask (1 = kept)
+ * @param {number} width
+ * @param {number} height
+ * @returns {null|{center:{x:number,y:number}, width:number, height:number, angle:number, area:number}}
+ */
+export function minAreaRect(mask, width, height) {
+	const pts = [];
+	for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			if (mask[y * width + x]) {
+				pts.push({ x, y });
+			}
+		}
+	}
+	if (pts.length === 0) return null;
+	if (pts.length === 1)
+		return {
+			center: { x: pts[0].x, y: pts[0].y },
+			width: 1,
+			height: 1,
+			angle: 0,
+			area: 1,
+		};
+	return minAreaRectPoints(pts);
+}
+
+/**
+ * Unit vector along the long side of a min-area rectangle.
+ *
+ * @param {{width:number, height:number, angle:number}} rect
+ * @returns {{x:number, y:number}}
+ */
+export function axisFromRect(rect) {
+	if (rect.width >= rect.height) {
+		// Long side is along the rect's angle direction.
+		return { x: Math.cos(rect.angle), y: Math.sin(rect.angle) };
+	} else {
+		// Long side is along the normal (90 degrees CCW from the rect angle).
+		return { x: -Math.sin(rect.angle), y: Math.cos(rect.angle) };
+	}
+}
+
+/**
+ * Rotate a unit axis by an angle (radians, CCW positive).
+ *
+ * @param {{x:number, y:number}} axis
+ * @param {number} angle radians
+ * @returns {{x:number, y:number}}
+ */
+export function rotateAxis(axis, angle) {
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	return { x: axis.x * cos - axis.y * sin, y: axis.x * sin + axis.y * cos };
+}
+
+/**
+ * Angle of a unit axis in radians (-PI..PI).
+ *
+ * @param {{x:number, y:number}} axis
+ * @returns {number}
+ */
+export function axisAngle(axis) {
+	return Math.atan2(axis.y, axis.x);
+}
+
+/**
+ * Unit vector from an angle in radians.
+ *
+ * @param {number} angle radians
+ * @returns {{x:number, y:number}}
+ */
+export function axisUnit(angle) {
+	return { x: Math.cos(angle), y: Math.sin(angle) };
+}
+
+// --- axis state machine -----------------------------------------------------------
+
+/**
+ * Create a fresh axis state from an approved min-area rectangle.
+ *
+ * @param {{center:{x:number,y:number}, width:number, height:number, angle:number, area:number}} rect
+ */
+export function createAxisState(rect) {
+	return {
+		rect,
+		axis: axisFromRect(rect),
+		approved: false,
+	};
+}
+
+/**
+ * Pure reducer for the axis state.
+ * Actions:
+ *   { type: 'rotate', angle } — rotate the axis by `angle` radians (CCW).
+ *                                Retracts any prior approval.
+ *   { type: 'approve' }       — mark the axis as approved.
+ *
+ * @param {object} state
+ * @param {object} action
+ * @returns {object} new state
+ */
+export function reduceAxisState(state, action) {
+	switch (action.type) {
+		case 'rotate': {
+			const angle = action.angle;
+			if (angle === 0) return state;
+			// Rotate the RECTANGLE, not a separate axis vector. The rect's angle
+			// changes, and the axis is re-derived from the rotated rect.
+			const newRect = { ...state.rect, angle: state.rect.angle + angle };
+			return { ...state, rect: newRect, axis: axisFromRect(newRect), approved: false };
+		}
+		case 'approve': {
+			return { ...state, approved: true };
+		}
+		default:
+			return state;
+	}
+}
@@ -0,0 +1,97 @@
+/**
+ * M1 UAT-3: Browser gate (hard stop).
+ *
+ * CAPTURE.md §Browsers:
+ *   Phone: iOS Safari, Android Chrome.
+ *   PC: Chrome, Edge, Firefox.
+ *   Other clients get a hard stop.
+ *
+ * Pure logic, DOM-free, unit-testable under node.
+ *
+ * Detection: each rule returns a browser name OR null (no match).
+ * Rules are tried in order; the first non-null wins. Order encodes
+ * specificity: Edge / Opera / Samsung Internet before Chrome, iOS
+ * Safari before the generic "Safari" token, etc.
+ *
+ * PC: allow Chrome, Edge, Firefox; everything else is a hard stop.
+ * Phone: allow iOS Safari, Android Chrome; everything else is a hard
+ * stop.
+ */
+
+/**
+ * @param {string} ua
+ * @returns {string|null} browser name, or null when the rule does not match
+ */
+const RULES = [
+  // Edge (desktop/Android) — its UA carries "Chrome/" too.
+  (ua) => (/Edg\//.test(ua) ? 'Microsoft Edge' : null),
+  // Opera — "OPR/" token, distinct from Chrome.
+  (ua) => (/OPR\//.test(ua) ? 'Opera' : null),
+  // Samsung Internet — "SamsungBrowser" token.
+  (ua) => (/SamsungBrowser/.test(ua) ? 'Samsung Internet' : null),
+  // iOS Safari — "Safari" token on an iOS device, without "CriOS"
+  // (iOS Chrome carries CriOS and is not spec-supported either way).
+  // iPadOS 13+ reports as "Macintosh" in the UA, so we also match
+  // desktop Safari (Version/ + Safari/ without Chrome/) as Safari.
+  (ua) =>
+    /Safari/.test(ua) && /iPhone|iPad|iPod/.test(ua) && !/CriOS/.test(ua)
+      ? 'iOS Safari'
+      : null,
+  // Android Chrome — "Chrome" token on Android.
+  (ua) => (/Chrome/.test(ua) && /Android/.test(ua) ? 'Android Chrome' : null),
+  // Desktop Chrome — "Chrome" token, not on Android.
+  (ua) => (/Chrome/.test(ua) && !/Android/.test(ua) ? 'Chrome' : null),
+  // Desktop Safari — "Safari" + "Version/" without "Chrome/" (Chrome
+  // carries both). iPadOS 13+ reports as Macintosh, so this catches
+  // iPad Safari too.
+  (ua) =>
+    /Safari/.test(ua) && /Version\//.test(ua) && !/Chrome\//.test(ua)
+      ? 'Safari'
+      : null,
+  // Firefox.
+  (ua) => (/Firefox/.test(ua) ? 'Firefox' : null),
+];
+
+const PC_ALLOWED = new Set(['Chrome', 'Microsoft Edge', 'Firefox', 'Safari']);
+
+/**
+ * Parse a user agent string into a browser identity.
+ * @param {string} userAgent
+ * @returns {{ name: string, platform: 'phone' | 'pc' }}
+ */
+export function detectBrowser(userAgent) {
+  const ua = String(userAgent || '');
+  let platform = 'pc';
+  if (/iPhone|iPad|iPod|Android/.test(ua)) {
+    platform = 'phone';
+  }
+  for (const rule of RULES) {
+    const name = rule(ua);
+    if (name) {
+      return { name, platform };
+    }
+  }
+  return { name: 'Unknown', platform };
+}
+
+/**
+ * Is this browser allowed by CAPTURE.md §Browsers?
+ * @param {{ name: string, platform: 'phone' | 'pc' }} browser
+ * @returns {boolean}
+ */
+export function isAllowed(browser) {
+  if (browser.platform === 'phone') {
+    return browser.name === 'iOS Safari' || browser.name === 'Android Chrome';
+  }
+  return PC_ALLOWED.has(browser.name);
+}
+
+/**
+ * Decide whether to show the hard-stop gate.
+ * @param {string} userAgent
+ * @returns {{ supported: boolean, browser: { name: string, platform: 'phone' | 'pc' } }}
+ */
+export function checkBrowserGate(userAgent) {
+  const browser = detectBrowser(userAgent);
+  return { supported: isAllowed(browser), browser };
+}
@@ -0,0 +1,64 @@
+// M1 deterministic inventory generation — pure functions.
+//
+// Ground truth: docs/CAPTURE.md §Inventory PNG
+//   Aspect | 3:4 portrait
+//   Layout | Slab centered, 80% fill at widest and tallest points
+//   Size | After crop, shorter side >= 1600px
+//
+// This module handles the logic for calculating the inventory metadata
+// and preparing the instructions for the browser-side PNG encoding.
+//
+// Note: The actual PNG encoding (canvas/OffscreenCanvas) is handled
+// by the frontend component/worker. This file provides the data.
+//
+/**
+ * @typedef {Object} InventoryMetadata
+ * @property {number} sqft
+ * @property {number} bdft
+ * @property {number[]} widths
+ * @property {number} minWidth
+ * @property {number} maxWidth
+ * @property {number} avgWidth
+ * @property {number} lengthIn
+ * @property {number} thicknessIn
+ * @property {number} scale
+ */
+//
+/**
+ * Prepares the metadata for the inventory PNG.
+ * @param {number} maskPx - Total area of the mask in pixels.
+ * @param {number} scale - The px-per-inch scale.
+ * @param {number} lengthIn - User-entered length in inches.
+ * @param {number} thicknessIn - User-entered thickness in inches.
+ * @param {number[]} sampledWidthsPx - The raw pixel widths sampled along the axis.
+ * @returns {InventoryMetadata}
+ */
+export function prepareInventoryMetadata(
+  maskPx,
+  scale,
+  lengthIn,
+  thicknessIn,
+  sampledWidthsPx
+) {
+  // Re-use logic from math.js to ensure consistency
+  const sqft = (maskPx / (scale * scale)) / 144;
+  const bdft = sqft * thicknessIn;
+
+  // Widths are converted to inches
+  const widths = sampledWidthsPx.map((w) => w / scale);
+  const minWidth = Math.min(...widths);
+  const maxWidth = Math.max(...widths);
+  const avgWidth = widths.reduce((a, b) => a + b, 0) / widths.length;
+
+  return {
+    sqft: Math.round(sqft * 100) / 100,
+    bdft: Math.round(bdft * 100) / 100,
+    widths,
+    minWidth,
+    maxWidth,
+    avgWidth,
+    lengthIn,
+    thicknessIn,
+    scale,
+  };
+}
@@ -0,0 +1,154 @@
+// M1-3 mask key geometry — pure functions, no canvas/DOM.
+//
+// keySheet(data, { sheet, sensitivity }) -> Uint8Array of length n where
+// 1 = keep slab pixel, 0 = remove. maskStats(mask) -> { kept, total, empty }.
+//
+// Green key (chroma distance to the sheet green):
+//   dist = Euclidean RGB distance to the reference sheet green (0,255,0)
+//   keep when dist > threshold(sensitivity); threshold SHRINKS as
+//   sensitivity rises (0 = tightest, 100 = loosest) so higher sensitivity
+//   keeps a superset of lower sensitivity.
+//
+// Black key (brightness above a cutoff):
+//   keep when brightness > cutoff.
+//
+// Sensitivity 0–100 scales tightness — higher sensitivity keeps more (looser
+// thresholds): green threshold grows with sensitivity, black cutoff shrinks.
+// Auto picks whichever sheet yields more kept pixels.
+
+/**
+ * Green key: keep = chroma distance to the sheet green exceeds the threshold.
+ * Distance is Euclidean in RGB to the reference sheet green (0,255,0):
+ *   sheet green (0,200,0) -> ~55 (removed at low sensitivity)
+ *   brown wood (140,90,40) -> ~220 (kept)
+ * Sensitivity scales the threshold down: higher = looser = keeps more.
+ */
+// Reference sheet green: pure keying green. Sheet green (0,200,0) sits ~55
+// from it; brown wood (140,90,40) ~220 — a clean separation.
+const SHEET_GREEN = { r: 0, g: 255, b: 0 };
+function greenDistance(r, g, b) {
+	const dr = r - SHEET_GREEN.r;
+	const dg = g - SHEET_GREEN.g;
+	const db = b - SHEET_GREEN.b;
+	return Math.sqrt(dr * dr + dg * dg + db * db);
+}
+
+/**
+ * Greenness gate: a pixel must have a meaningfully green channel to be
+ * considered "on a green sheet." Without this, a dark or neutral background
+ * (e.g. rgb 26,27,29) is far from sheet-green in RGB distance and would be
+ * kept by the green key, making the key useless on non-green surfaces.
+ * A real green sheet has g >> r and g >> b. A dark surface has all channels
+ * low and roughly equal.
+ */
+function isGreenish(r, g, b) {
+	return g > 40 && g > r * 1.3 && g > b * 1.3;
+}
+
+/**
+ * 0–100 sensitivity -> green distance threshold.
+ * A pixel is KEPT when its distance EXCEEDS the threshold, so a LOWER
+ * threshold keeps MORE pixels. Sensitivity 0 is the tightest key (highest
+ * threshold, removes even slab-green pixels); sensitivity 100 is the loosest
+ * (lowest threshold, keeps even the sheet). Monotone: higher sensitivity
+ * keeps a superset of lower sensitivity.
+ *   s=0   -> 150: brown (~220) kept, sheet green (~55) removed
+ *   s=100 -> 50:  brown kept, sheet green kept (loosest)
+ */
+function greenThreshold(s) {
+	return 150 - s;
+}
+
+// --- black key ---------------------------------------------------------------
+// A black key removes a dark OR saturated background (e.g. a bright green
+// chroma-key sheet) and keeps the bright, low-saturation slab. Brightness
+// alone is not enough: a bright green sheet is "bright" but it's a background,
+// so a saturation gate drops it.
+
+/** Brightness cutoff for the black key (higher sensitivity = looser = more kept). */
+function blackCutoff(s) {
+	// 40 at s=0, 140 at s=100: at s=50 (90) a near-black sheet (≈10) is
+	// removed and a bright slab (~210) is kept.
+	return 30 + (s / 100) * 100;
+}
+
+/** Saturation gate for the black key: pixels more saturated than this are
+ *  treated as background (e.g. a green keying sheet, saturation ≈ 200) and
+ *  dropped, even if bright. The slab is low-saturation. */
+const BLACK_SAT_CAP = 120;
+
+/**
+ * Key the sheet out of a pixel buffer.
+ * @param {Uint8ClampedArray|{r,g,b,a}} data RGBA pixels, length n*4.
+ * @param {{sheet?:'auto'|'green'|'black', sensitivity?:number}} opts
+ *   sensitivity is 0–100 (0 = tightest key, 100 = loosest).
+ * @returns {Uint8Array} length n, 1=keep slab pixel, 0=remove.
+ */
+export function keySheet(data, opts = {}) {
+	const sheet = opts.sheet ?? 'auto';
+	const sensitivity = Math.max(0, Math.min(100, opts.sensitivity ?? 50));
+	const n = data.length / 4;
+	const mask = new Uint8Array(n);
+	let sheetMode;
+	if (sheet === 'green' || sheet === 'black') sheetMode = sheet;
+	else {
+		// auto: run both keys, prefer the one that removes more (fewer kept)
+		// as long as it is not empty. A key that keeps everything is useless;
+		// a key that keeps only the slab is the one we want.
+		const g = keySheet(data, { sheet: 'green', sensitivity });
+		const b = keySheet(data, { sheet: 'black', sensitivity });
+		let gk = 0,
+			bk = 0;
+		for (let i = 0; i < n; i++) {
+			gk += g[i];
+			bk += b[i];
+		}
+		// Both empty: return green (tie-break, no slab found either way).
+		if (gk === 0 && bk === 0) return g;
+		// One empty: return the non-empty one.
+		if (gk === 0) return b;
+		if (bk === 0) return g;
+		// Both non-empty: prefer the key that kept FEWER pixels (removed more
+		// background). On a green sheet, the green key keeps only the slab;
+		// the black key may keep slab + some sheet. On a dark surface, the
+		// black key keeps only the slab; the green key (with the greenness
+		// gate) keeps few/no pixels.
+		return gk <= bk ? g : b;
+	}
+	for (let i = 0; i < n; i++) {
+		const j = i * 4;
+		const r = data[j],
+			g = data[j + 1],
+			b = data[j + 2];
+		if (sheetMode === 'green') {
+			// Green key: keep pixels that are NOT on a green sheet.
+			// A pixel is "on the green sheet" when it is greenish AND close
+			// to the reference sheet-green. Pixels that are not greenish
+			// (dark surfaces, neutral backgrounds) are NOT removed by the
+			// green key — they are kept, so the black key can handle them.
+			// This prevents the green key from keeping 100% of a dark
+			// background (the bug behind the UAT "not detected" report).
+			if (!isGreenish(r, g, b)) {
+				mask[i] = 1; // not on a green sheet — keep (black key's job)
+			} else {
+				mask[i] = greenDistance(r, g, b) > greenThreshold(sensitivity) ? 1 : 0;
+			}
+		} else {
+			const bright = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+			const sat = Math.max(r, g, b) - Math.min(r, g, b);
+			mask[i] =
+				bright > blackCutoff(sensitivity) && sat < BLACK_SAT_CAP ? 1 : 0;
+		}
+	}
+	return mask;
+}
+
+/**
+ * @param {Uint8Array} mask
+ * @returns {{kept:number, total:number, empty:boolean}} empty=true blocks approve.
+ */
+export function maskStats(mask) {
+	let kept = 0;
+	for (let i = 0; i < mask.length; i++) kept += mask[i];
+	return { kept, total: mask.length, empty: kept === 0 };
+}
@@ -0,0 +1,235 @@
+// M1-3 mask state — pure state machine + edge/feather geometry, no DOM.
+//
+// groundTruth: docs/CAPTURE.md §Mask
+//   - Sheet: Auto / Green / Black
+//   - Sensitivity: 0–100 step 1 (slider + minus/plus)
+//   - Control value updates immediately; overlay recomputes 2.0 s after the
+//     LAST sensitivity change (debounce). A sheet change may recompute on
+//     the change.
+//   - Approve is blocked when the mask has no slab pixels.
+//   - Edge offset + feather are the M1-3 card's extra knobs; both default 0
+//     (no-op) and are applied after the key pass, before stats.
+//
+// The state machine is pure and reducer-based so it is testable in Node
+// (vitest) without canvas/DOM. The live UI (M1-5) drives it with the
+// existing pure modules src/lib/core/mask.js (keySheet, maskStats).
+//
+// Edge offset (px): erode (positive) / dilate (negative) the binary mask.
+// Feather (px): attenuate kept pixels linearly toward 0 within `feather` px
+// of the mask edge. Both are applied to the raw key output and returned as
+// a Uint8Array mask — same contract as keySheet.
+
+import { keySheet, maskStats } from './mask.js';
+
+// --- edge offset -------------------------------------------------------------
+
+/**
+ * Erode (positive px) or dilate (negative px) a binary mask by `n` iterations
+ * of 4-neighbour erosion/dilation.
+ * @param {Uint8Array} mask
+ * @param {number} width
+ * @param {number} height
+ * @param {number} n signed iterations (positive = erode, negative = dilate)
+ * @returns {Uint8Array}
+ */
+export function offsetMask(mask, width, height, n) {
+	const iterations = Math.abs(Math.round(n));
+	const out = new Uint8Array(mask);
+	for (let it = 0; it < iterations; it++) {
+		const next = new Uint8Array(out.length);
+		for (let y = 0; y < height; y++) {
+			for (let x = 0; x < width; x++) {
+				const i = y * width + x;
+				if (n > 0) {
+					// Erode: keep only if all 4-neighbours are kept.
+					// Out-of-bounds counts as removed (not kept).
+					let all = out[i] === 1;
+					if (all && (x === 0 || out[i - 1] === 0)) all = false;
+					if (all && (x === width - 1 || out[i + 1] === 0)) all = false;
+					if (all && (y === 0 || out[i - width] === 0)) all = false;
+					if (all && (y === height - 1 || out[i + width] === 0)) all = false;
+					next[i] = all ? 1 : 0;
+				} else {
+					// Dilate: keep if any 4-neighbour is kept.
+					let any = out[i] === 1;
+					if (!any && x > 0 && out[i - 1] === 1) any = true;
+					if (!any && x < width - 1 && out[i + 1] === 1) any = true;
+					if (!any && y > 0 && out[i - width] === 1) any = true;
+					if (!any && y < height - 1 && out[i + width] === 1) any = true;
+					next[i] = any ? 1 : 0;
+				}
+			}
+		}
+		out.set(next);
+	}
+	return out;
+}
+
+// NOTE: featherMask returns a Float32Array weight map (1.0 = fully kept,
+// 0.0 = fully removed) for the UI overlay; the binary approve decision
+// still comes from the un-feathered mask's maskStats.
+/**
+ * Feather: weight map of a binary mask — kept pixels within `radius` px of a
+ * removed pixel are attenuated linearly (1 at the edge, →0 at full radius).
+ * @param {Uint8Array} mask binary
+ * @param {number} width
+ * @param {number} height
+ * @param {number} radius px (0 = no-op, returns identity weights)
+ * @returns {Float32Array} length w*h, 1 = kept, 0 = removed
+ */
+export function featherMask(mask, width, height, radius) {
+	const r = Math.round(radius);
+	const out = new Float32Array(width * height);
+	for (let i = 0; i < mask.length; i++) out[i] = mask[i] ? 1 : 0;
+	if (r <= 0) return out;
+	for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			const i = y * width + x;
+			if (out[i] !== 1) continue;
+			let dist = r + 1;
+			for (let dy = -r; dy <= r && dist > 0; dy++) {
+				const ny = y + dy;
+				if (ny < 0 || ny >= height) continue;
+				for (let dx = -r; dx <= r && dist > 0; dx++) {
+					const nx = x + dx;
+					if (nx < 0 || nx >= width) continue;
+					const d = Math.max(Math.abs(dx), Math.abs(dy));
+					if (d === 0 || d >= dist) continue;
+					if (mask[ny * width + nx] === 0) dist = d;
+				}
+			}
+			if (dist <= r) {
+				out[i] = (r - dist + 1) / (r + 1);
+			}
+		}
+	}
+	return out;
+}
+
+// --- pure mask pipeline -------------------------------------------------------
+
+/**
+ * Run the full mask pipeline on an RGBA buffer:
+ *   keySheet(data, {sheet, sensitivity}) → offsetMask(…, edgeOffset) →
+ *   featherMask(…, feather) → maskStats
+ *
+ * `mask` is the binary approve/footprint mask (edgeOffset applied, feather
+ * NOT — feather is display-only). `weights` is the display weight map
+ * (feather applied to the binary mask). Stats are computed from `mask` so
+ * feather never affects the approve decision.
+ * @param {Uint8ClampedArray} data RGBA pixels
+ * @param {{width:number, height:number, sheet?:string, sensitivity?:number,
+ *          edgeOffset?:number, feather?:number}} opts
+ * @returns {{mask:Uint8Array, weights:Float32Array, stats:{kept:number,total:number,empty:boolean}}}
+ */
+export function computeMask(data, opts) {
+	const width = opts.width;
+	const height = opts.height;
+	const sheet = opts.sheet ?? 'auto';
+	const sensitivity = Math.max(0, Math.min(100, opts.sensitivity ?? 50));
+	const edgeOffset = opts.edgeOffset ?? 0;
+	const feather = opts.feather ?? 0;
+
+	let mask = keySheet(data, { sheet, sensitivity });
+	if (edgeOffset !== 0) mask = offsetMask(mask, width, height, edgeOffset);
+	const weights = featherMask(mask, width, height, feather);
+	return { mask, weights, stats: maskStats(mask) };
+}
+
+// --- mask state machine --------------------------------------------------------
+
+// Debounce window per docs/CAPTURE.md §Mask: 2.0 s after the last
+// sensitivity change. Exported so tests can assert the constant.
+export const RECOMPUTE_DELAY_MS = 2000;
+
+/**
+ * Create a fresh mask state.
+ * @param {{width:number, height:number}} dims source photo dimensions in px
+ */
+export function createMaskState(dims) {
+	return {
+		dims,
+		sheet: 'auto',
+		sensitivity: 50,
+		edgeOffset: 0,
+		feather: 0,
+		approved: false,
+		lastRecomputeAt: 0,
+		pendingRecompute: false,
+		stats: { kept: 0, total: dims.width * dims.height, empty: true },
+	};
+}
+
+/**
+ * Pure reducer for the mask state.
+ * Actions:
+ *   { type: 'set_sheet', sheet }          — may mark pending recompute
+ *   { type: 'set_sensitivity', value }    — always marks pending recompute
+ *   { type: 'nudge_sensitivity', delta }  — same as set_sensitivity
+ *   { type: 'set_edge_offset', value }    — may mark pending recompute
+ *   { type: 'set_feather', value }        — may mark pending recompute
+ *   { type: 'recompute', stats, at }      — apply a finished recompute
+ *   { type: 'approve' }                   — blocked if stats.empty
+ *
+ * Control values update immediately; the OVERLAY recomputes on the 2.0 s
+ * debounce (UI owns the timer and dispatches 'recompute' with fresh stats).
+ * @param {object} state
+ * @param {object} action
+ * @returns {object} new state
+ */
+export function reduceMaskState(state, action) {
+	switch (action.type) {
+		case 'set_sheet': {
+			const sheet = action.sheet;
+			if (sheet === state.sheet) return state;
+			return { ...state, sheet, pendingRecompute: true };
+		}
+		case 'set_sensitivity': {
+			const sensitivity = Math.max(0, Math.min(100, Math.round(action.value)));
+			if (sensitivity === state.sensitivity) return state;
+			return { ...state, sensitivity, pendingRecompute: true };
+		}
+		case 'nudge_sensitivity': {
+			const sensitivity = Math.max(
+				0,
+				Math.min(100, state.sensitivity + Math.round(action.delta))
+			);
+			if (sensitivity === state.sensitivity) return state;
+			return { ...state, sensitivity, pendingRecompute: true };
+		}
+		case 'set_edge_offset': {
+			const edgeOffset = Math.round(action.value);
+			if (edgeOffset === state.edgeOffset) return state;
+			return { ...state, edgeOffset, pendingRecompute: true };
+		}
+		case 'set_feather': {
+			const feather = Math.max(0, Math.round(action.value));
+			if (feather === state.feather) return state;
+			return { ...state, feather, pendingRecompute: true };
+		}
+		case 'recompute': {
+			return {
+				...state,
+				stats: action.stats,
+				lastRecomputeAt: action.at,
+				pendingRecompute: false,
+			};
+		}
+		case 'approve': {
+			if (state.stats.empty) return state; // blocked: no slab pixels
+			return { ...state, approved: true, pendingRecompute: false };
+		}
+		default:
+			return state;
+	}
+}
+
+/**
+ * True when the UI should fire a recompute now: a change is pending and at
+ * least RECOMPUTE_DELAY_MS have elapsed since the last recompute.
+ * @param {object} state
+ * @param {number} now ms
+ */
+export function dueForRecompute(state, now) {
+	return state.pendingRecompute && now - state.lastRecomputeAt >= RECOMPUTE_DELAY_MS;
+}
@@ -0,0 +1,73 @@
+// M1 deterministic measurement math — pure functions, no DOM.
+//
+// Ground truth: docs/CAPTURE.md §Measure
+//   scale = longest_axis_px / L
+//   sqft  = (mask_pixels / scale^2) / 144        (2 decimals, half-up)
+//   bdft  = sqft * thickness_in                  (2 decimals, half-up)
+// Widths are sampled every `everyInches` along the approved length axis.
+
+/** px-per-inch scale: longest axis in pixels divided by its length in inches. */
+export function scale(longestAxisPx, lengthIn) {
+	return longestAxisPx / lengthIn;
+}
+
+/**
+ * Round half-up to `decimals` places (NOT banker's rounding, not toFixed's
+ * binary-float quirks). 30.625 -> 30.63, 1.005 -> 1.01.
+ */
+export function roundHalfUp(x, decimals) {
+	const f = Math.pow(10, decimals);
+	return Math.round((x + Number.EPSILON) * f) / f;
+}
+
+/**
+ * Square feet from mask pixel area and the px-per-inch scale.
+ * (mask_px / scale^2) gives square inches; /144 gives square feet.
+ * @returns number rounded half-up to 2 decimals.
+ */
+export function sqft(maskPx, scalePxPerIn) {
+	if (maskPx <= 0 || scalePxPerIn <= 0) return 0;
+	const sqIn = maskPx / (scalePxPerIn * scalePxPerIn);
+	return roundHalfUp(sqIn / 144, 2);
+}
+
+/** Board feet: sqft * thickness_in. 1 sqft at 1in thick = 1 bdft. */
+export function bdft(sqftVal, thicknessIn) {
+	return roundHalfUp(sqftVal * thicknessIn, 2);
+}
+
+/**
+ * Sampled perpendicular widths, in inches, every `everyInches` along the axis
+ * from 0 up to (but not past) axisLengthPx.
+ * @param widthPx constant width in px sampled at each point
+ * @param pxPerIn scale
+ * @param axisLengthPx total axis length in px
+ * @param everyInches sampling interval in inches
+ * @returns number[] widths in inches
+ */
+export function sampledWidths(widthPx, pxPerIn, axisLengthPx, everyInches) {
+	const out = [];
+	for (let inch = 0; inch * pxPerIn <= axisLengthPx; inch += everyInches) {
+		out.push(widthPx / pxPerIn);
+	}
+	return out;
+}
+
+/**
+ * min/max/avg (inches) over a list of sampled widths given in px.
+ * @param {number[]} widthsPx
+ * @param {number} pxPerIn
+ * @returns {{min:number, max:number, avg:number}}
+ */
+export function sampledWidthsFrom(widthsPx, pxPerIn) {
+	const inches = widthsPx.map((w) => w / pxPerIn);
+	const min = Math.min(...inches);
+	const max = Math.max(...inches);
+	const avg = inches.reduce((a, b) => a + b, 0) / inches.length;
+	return { min, max, avg };
+}
+
+/** Snap an inch value to the nearest 1/8 inch. */
+export function snapToEighth(inches) {
+	return Math.round(inches * 8) / 8;
+}
@@ -0,0 +1,69 @@
+// M1-5 Measure — mask width sampling along the approved length axis.
+//
+// Ground truth: docs/CAPTURE.md §Measure
+//   - scale = longest_axis_px / L
+//   - Widths: min, max, avg, sampled every 6 in along the approved length
+//     axis, perpendicular to it
+//
+// sampleWidthsPx is the real scanline sampler the UI runs on the approved
+// mask: at each sample point t = 0, 6, 12, ... in (px) along the axis it
+// scans the perpendicular direction across the whole photo and measures the
+// contiguous run of kept pixels that covers the sample point.
+
+/**
+ * Sample perpendicular mask widths along a length axis.
+ *
+ * @param {Uint8Array} mask binary mask (1 = kept), row-major
+ * @param {number} width photo width in px
+ * @param {number} height photo height in px
+ * @param {{origin:{x:number,y:number}, dir:{x:number,y:number}, lengthPx:number}} axis
+ *   origin = a point on the axis (e.g. the rectangle corner the long side
+ *   starts at), dir = unit vector along the slab length, lengthPx = its
+ *   pixel length.
+ * @param {number} pxPerIn scale
+ * @param {number} [everyIn=6] sampling interval in inches
+ * @returns {number[]} widths in px, one per sample (t = 0, everyIn, ... in px
+ *   at or under lengthPx)
+ */
+export function sampleWidthsPx(mask, width, height, axis, pxPerIn, everyIn = 6) {
+	const stepPx = everyIn * pxPerIn;
+	const ux = axis.dir.x;
+	const uy = axis.dir.y;
+	// Perpendicular unit vector (left normal): (-uy, ux).
+	const perpX = -uy;
+	const perpY = ux;
+	const out = [];
+
+	for (let t = 0; t <= axis.lengthPx; t += stepPx) {
+		// Sample point.
+		const sx = axis.origin.x + ux * t;
+		const sy = axis.origin.y + uy * t;
+		// Find the contiguous kept run along the perpendicular line that
+		// covers (sx, sy), walking out from the sample point in both
+		// perpendicular directions.
+		const rx = Math.round(sx);
+		const ry = Math.round(sy);
+		if (rx < 0 || ry < 0 || rx >= width || ry >= height || !mask[ry * width + rx]) {
+			out.push(0);
+			continue;
+		}
+		let a = 0; // extent in the negative perpendicular direction
+		let b = 0; // extent in the positive perpendicular direction
+		for (;;) {
+			const nx = rx - Math.round(perpX * (a + 1));
+			const ny = ry - Math.round(perpY * (a + 1));
+			if (nx < 0 || ny < 0 || nx >= width || ny >= height) break;
+			if (!mask[ny * width + nx]) break;
+			a += 1;
+		}
+		for (;;) {
+			const nx = rx + Math.round(perpX * (b + 1));
+			const ny = ry + Math.round(perpY * (b + 1));
+			if (nx < 0 || ny < 0 || nx >= width || ny >= height) break;
+			if (!mask[ny * width + nx]) break;
+			b += 1;
+		}
+		out.push(a + b + 1);
+	}
+	return out;
+}
@@ -1,4 +0,0 @@
-import App from './App.svelte';
-
-const root = document.querySelector('#app');
-if (root) new App({ target: root });
@@ -1,58 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import { minAreaRect, orientedRect } from '../geometry/rect.ts';
-import { measure } from './measure.ts';
-
-// Uniform slab, 10 px/in: full W×H canvas, axis +x via minAreaRect angle 0.
-function uniform(W: number, H: number) {
-  const bitset = new Uint8Array(W * H).fill(1);
-  const box = orientedRect(minAreaRect(bitset, W, H)!, 0);
-  return { bitset, box, slabPx: W * H };
-}
-
-// Tapered slab, 10 px/in: tips under 6 in and past L−6 in are `tipPx` wide
-// (centered), the bulk is full canvas height.
-function tapered(W: number, H: number, lengthEighths: number, tipPx: number) {
-  const inIn = W / 10;
-  const bitset = new Uint8Array(W * H);
-  const half = tipPx / 2;
-  for (let x = 0; x < W; x++) {
-    const p = x / 10;
-    const w = p < 6 || p > inIn - 6 ? tipPx : H;
-    for (let y = (H - w) / 2; y < (H + w) / 2; y++) bitset[y * W + x] = 1;
-  }
-  const box = orientedRect(minAreaRect(bitset, W, H)!, 0);
-  return { bitset, box, slabPx: bitset.reduce((a, c) => a + c, 0), lengthEighths };
-}
-
-test('tapered 48in slab: min/max reflect the bulk, tips excluded', () => {
-  const { bitset, box, slabPx, lengthEighths } = tapered(480, 100, 384, 20); // tips 2in, bulk 10in
-  const m = measure(bitset, 480, 100, box, lengthEighths, 8, slabPx);
-  assert.equal(m.widths.every6In.length, 7, `stations ${m.widths.every6In.length} (6..42in)`);
-  for (const e of m.widths.every6In) {
-    assert.ok(e >= 76 && e <= 84, `station ${e / 8}in must be bulk (~10in)`);
-  }
-  assert.ok(m.widths.min >= 76 && m.widths.min <= 84, `min ${m.widths.min / 8}in`);
-  assert.ok(m.widths.max >= 76 && m.widths.max <= 84, `max ${m.widths.max / 8}in`);
-});
-
-test('uniform slab: interior stations keep the full width', () => {
-  const { bitset, box, slabPx } = uniform(480, 100);
-  const m = measure(bitset, 480, 100, box, 384, 8, slabPx);
-  assert.equal(m.widths.every6In.length, 7);
-  for (const e of m.widths.every6In) {
-    assert.ok(e >= 72 && e <= 104, `station ${e / 8}in`);
-  }
-});
-
-test('short slab L=12in: no interior stations, widths are empty/zero', () => {
-  const { bitset, box, slabPx } = uniform(120, 100);
-  const m = measure(bitset, 120, 100, box, 96, 8, slabPx);
-  assert.deepEqual(m.widths, { min: 0, max: 0, avg: 0, every6In: [] });
-});
-
-test('short slab L=10in: no interior stations, widths are empty/zero', () => {
-  const { bitset, box, slabPx } = uniform(100, 100);
-  const m = measure(bitset, 100, 100, box, 80, 8, slabPx);
-  assert.deepEqual(m.widths, { min: 0, max: 0, avg: 0, every6In: [] });
-});
@@ -1,104 +0,0 @@
-import type { BBox, Eighths, Measures, Widths } from '../capture/capture.types';
-import { maskSpanAlong } from '../geometry/rect';
-
-// Display / direction: corners[3] → corners[0] is the long side.
-export function axisEndpoints(bbox: BBox): { start: [number, number]; end: [number, number] } {
-  return { start: bbox.corners[3], end: bbox.corners[0] };
-}
-
-// Wood end→end along the approved direction: project the mask onto the axis
-// unit vector and return the segment on the bbox center line covering that span.
-function maskAxisSegment(
-  bitset: Uint8Array, w: number, h: number, bbox: BBox,
-): { start: [number, number]; end: [number, number]; span: number; ux: number; uy: number } {
-  const { start: a, end: b } = axisEndpoints(bbox);
-  const ex = b[0] - a[0];
-  const ey = b[1] - a[1];
-  const elen = Math.hypot(ex, ey) || 1;
-  const ux = ex / elen, uy = ey / elen;
-  const cx = (bbox.corners[0][0] + bbox.corners[1][0] + bbox.corners[2][0] + bbox.corners[3][0]) / 4;
-  const cy = (bbox.corners[0][1] + bbox.corners[1][1] + bbox.corners[2][1] + bbox.corners[3][1]) / 4;
-  const cProj = cx * ux + cy * uy;
-  let minP = Infinity, maxP = -Infinity;
-  for (let y = 0; y < h; y++) {
-    const row = y * w;
-    for (let x = 0; x < w; x++) {
-      if (!bitset[row + x]) continue;
-      const p = x * ux + y * uy;
-      if (p < minP) minP = p;
-      if (p > maxP) maxP = p;
-    }
-  }
-  if (maxP < minP) return { start: a, end: b, span: 0, ux, uy };
-  return {
-    start: [cx + ux * (minP - cProj), cy + uy * (minP - cProj)],
-    end: [cx + ux * (maxP - cProj), cy + uy * (maxP - cProj)],
-    span: maxP - minP,
-    ux,
-    uy,
-  };
-}
-
-// Interior stations only (6, 12, … ≤ L−6). Tips dominate min/max on tapered
-// boards, so the first and last 6 in are excluded. Each sample is a line
-// probe perpendicular to the axis; width = max run of slab px across it.
-function sampleWidths(
-  bitset: Uint8Array, w: number, h: number,
-  start: [number, number], ux: number, uy: number,
-  scale: number, lengthIn: number,
-): Eighths[] {
-  const px = -uy, py = ux;
-  const stepPx = 6 * scale;
-  const lastPx = lengthIn > 12 ? Math.floor((lengthIn - 6) / 6) * 6 * scale : 0;
-  const out: Eighths[] = [];
-  const half = Math.max(2, Math.round((w + h) / 4));
-  for (let t = stepPx; t <= lastPx; t += stepPx) {
-    const ox = start[0] + ux * t;
-    const oy = start[1] + uy * t;
-    let minP = Infinity, maxP = -Infinity;
-    for (let p = -half; p <= half; p++) {
-      const x = Math.round(ox + px * p);
-      const y = Math.round(oy + py * p);
-      if (x < 0 || y < 0 || x >= w || y >= h) continue;
-      if (bitset[y * w + x]) {
-        if (p < minP) minP = p;
-        if (p > maxP) maxP = p;
-      }
-    }
-    if (maxP < minP) continue;
-    out.push(Math.max(0, Math.round(((maxP - minP + 1) / scale) * 8)));
-  }
-  return out;
-}
-
-export function measure(
-  bitset: Uint8Array, w: number, h: number,
-  bbox: BBox,
-  lengthEighths: Eighths, thicknessEighths: Eighths,
-  slabPx: number,
-): Omit<Measures, 'inventoryPng'> & { sourceBelowFloor: false } {
-  const lengthIn = lengthEighths / 8;
-  const seg = maskAxisSegment(bitset, w, h, bbox);
-  const scale = (seg.span || maskSpanAlong(bitset, w, h, seg.ux, seg.uy)) / lengthIn;
-  const every6In = sampleWidths(bitset, w, h, seg.start, seg.ux, seg.uy, scale, lengthIn);
-  let widths: Widths;
-  if (every6In.length > 0) {
-    const min = Math.min(...every6In);
-    const max = Math.max(...every6In);
-    const avg = Math.round(every6In.reduce((a, b) => a + b, 0) / every6In.length);
-    widths = { min, max, avg, every6In };
-  } else {
-    widths = { min: 0, max: 0, avg: 0, every6In: [] };
-  }
-  const sqft = Math.round((slabPx / (scale * scale) / 144) * 100) / 100;
-  const bdft = Math.round(sqft * (thicknessEighths / 8) * 100) / 100;
-  return {
-    lengthEighths,
-    thicknessEighths,
-    scale,
-    widths,
-    sqft,
-    bdft,
-    sourceBelowFloor: false,
-  };
-}
@@ -1,120 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import { composeInventoryFrame } from './inventory.ts';
-import type { Mask, Source } from '../capture/capture.types';
-
-const makePhoto = (w: number, h: number, paint: (x: number, y: number) => [number, number, number, number] = () => [255, 255, 255, 255]) => {
-  const rgba = new Uint8Array(w * h * 4);
-  for (let y = 0; y < h; y++) {
-    for (let x = 0; x < w; x++) {
-      const [r, g, b, a] = paint(x, y);
-      const i = (y * w + x) * 4;
-      rgba[i] = r; rgba[i + 1] = g; rgba[i + 2] = b; rgba[i + 3] = a;
-    }
-  }
-  return { width: w, height: h, rgba };
-};
-
-const maskFor = (bitset: Uint8Array, slabBounds: Mask['slabBounds']): Pick<Mask, 'bitset' | 'slabBounds'> =>
-  ({ bitset, slabBounds });
-
-test('alpha contract: removed pixels transparent, slab pixels keep RGB at alpha 255', () => {
-  const W = 8, H = 8;
-  const bitset = new Uint8Array(W * H);
-  for (let y = 1; y < 5; y++) for (let x = 1; x < 5; x++) bitset[y * W + x] = 1;
-  bitset[2 * W + 2] = 0;
-  bitset[3 * W + 3] = 0;
-  const SLAB = [200, 40, 20, 255] as const;
-  const SHEET = [0, 255, 0, 255] as const;
-  const src = makePhoto(W, H, (x, y) => (bitset[y * W + x] === 1 ? [...SLAB] : [...SHEET]));
-  const source: Pick<Source, 'widthPx' | 'heightPx'> = { widthPx: W, heightPx: H };
-  const out = composeInventoryFrame(src, maskFor(bitset, { x: 1, y: 1, w: 4, h: 4 }), source);
-
-  assert.equal(out.sourceBelowFloor, true);
-  assert.ok(out.width < 800, 'undersized source stays small');
-
-  let opaque = 0;
-  let transparent = 0;
-  for (let i = 0; i < out.rgba.length; i += 4) {
-    const a = out.rgba[i + 3];
-    if (a === 0) {
-      transparent++;
-      assert.equal(out.rgba[i], 0);
-      assert.equal(out.rgba[i + 1], 0);
-      assert.equal(out.rgba[i + 2], 0);
-      continue;
-    }
-    opaque++;
-    assert.equal(a, 255);
-    assert.deepEqual(
-      [out.rgba[i], out.rgba[i + 1], out.rgba[i + 2]],
-      [SLAB[0], SLAB[1], SLAB[2]],
-      'opaque pixel must be slab RGB, never sheet green',
-    );
-  }
-  assert.ok(opaque > 0, 'slab pixels are opaque');
-  assert.ok(transparent > 0, 'frame has transparent pixels');
-});
-
-test('3:4 frame at the floor: 2000×1800 slab → 800×1067', () => {
-  const source: Pick<Source, 'widthPx' | 'heightPx'> = { widthPx: 2000, heightPx: 1800 };
-  const bitset = new Uint8Array(source.widthPx * source.heightPx).fill(1);
-  const out = composeInventoryFrame(
-    makePhoto(source.widthPx, source.heightPx),
-    maskFor(bitset, { x: 0, y: 0, w: 2000, h: 1800 }),
-    source,
-  );
-  assert.equal(out.width, 800);
-  assert.equal(out.height, 1067);
-  assert.equal(out.sourceBelowFloor, false);
-});
-
-test('mid-band: slab shorter side 1000 (between 800 and 1600) → at floor, not belowFloor', () => {
-  const source: Pick<Source, 'widthPx' | 'heightPx'> = { widthPx: 1200, heightPx: 1000 };
-  const bitset = new Uint8Array(source.widthPx * source.heightPx).fill(1);
-  const out = composeInventoryFrame(
-    makePhoto(source.widthPx, source.heightPx),
-    maskFor(bitset, { x: 0, y: 0, w: 1200, h: 1000 }),
-    source,
-  );
-  assert.equal(out.sourceBelowFloor, false);
-  assert.equal(out.width, 800);
-});
-
-test('90% fill: limiting dimension maps to 0.9 × frame side (#68)', () => {
-  const source: Pick<Source, 'widthPx' | 'heightPx'> = { widthPx: 2200, heightPx: 2000 };
-  const bitset = new Uint8Array(source.widthPx * source.heightPx).fill(1);
-  const out = composeInventoryFrame(
-    makePhoto(source.widthPx, source.heightPx),
-    maskFor(bitset, { x: 100, y: 100, w: 2000, h: 1800 }),
-    source,
-  );
-  let minx = out.width, maxx = -1, miny = out.height, maxy = -1;
-  for (let y = 0; y < out.height; y++) {
-    for (let x = 0; x < out.width; x++) {
-      if (out.rgba[(y * out.width + x) * 4 + 3] !== 0) {
-        if (x < minx) minx = x;
-        if (x > maxx) maxx = x;
-        if (y < miny) miny = y;
-        if (y > maxy) maxy = y;
-      }
-    }
-  }
-  const xs = [minx, maxx], ys = [miny, maxy];
-  const wExtent = Math.max(...xs) - Math.min(...xs) + 1;
-  const hExtent = Math.max(...ys) - Math.min(...ys) + 1;
-  assert.ok(Math.abs(wExtent - 720) <= 2, `width extent ${wExtent} ≈ 720 (0.9×800)`);
-  assert.ok(Math.abs(hExtent - 648) <= 2, `height extent ${hExtent} ≈ 648 (1800×0.36)`);
-});
-
-test('belowFloor: small slab → sourceBelowFloor, outW capped at floor (no upscale)', () => {
-  const source: Pick<Source, 'widthPx' | 'heightPx'> = { widthPx: 900, heightPx: 700 };
-  const bitset = new Uint8Array(source.widthPx * source.heightPx).fill(1);
-  const out = composeInventoryFrame(
-    makePhoto(source.widthPx, source.heightPx),
-    maskFor(bitset, { x: 0, y: 0, w: 900, h: 700 }),
-    source,
-  );
-  assert.equal(out.sourceBelowFloor, true);
-  assert.ok(out.width <= 800, `outW ${out.width} must not exceed the floor`);
-});
@@ -1,83 +0,0 @@
-import type { Mask, Source } from '../capture/capture.types';
-
-const FLOOR = 800; // shorter side, px
-const FILL = 0.9; // 90% fill at the widest and tallest points of the slab
-const ASPECT_W = 3;
-const ASPECT_H = 4;
-
-type MaskPick = Pick<Mask, 'bitset' | 'slabBounds'>;
-type SourcePick = Pick<Source, 'widthPx' | 'heightPx'>;
-
-export interface InventoryInput {
-  bitmap: ImageBitmap;
-  mask: MaskPick;
-  source: SourcePick;
-}
-
-export interface Frame {
-  width: number;
-  height: number;
-  rgba: Uint8Array;
-  sourceBelowFloor: boolean;
-}
-
-export function composeInventoryFrame(
-  src: { width: number; height: number; rgba: Uint8Array | Uint8ClampedArray },
-  mask: MaskPick,
-  source: SourcePick,
-): Frame {
-  const b = mask.slabBounds;
-  const x0 = Math.max(0, Math.round(b.x));
-  const y0 = Math.max(0, Math.round(b.y));
-  const x1 = Math.min(source.widthPx, x0 + Math.max(1, Math.round(b.w)));
-  const y1 = Math.min(source.heightPx, y0 + Math.max(1, Math.round(b.h)));
-  const sw = x1 - x0;
-  const sh = y1 - y0;
-  const belowFloor = Math.min(sw, sh) < FLOOR;
-  const outW = belowFloor ? Math.max(1, Math.min(sw, FLOOR)) : FLOOR;
-  const outH = Math.round((outW * ASPECT_H) / ASPECT_W);
-  const scale = Math.min((outW * FILL) / Math.max(sw, 1), (outH * FILL) / Math.max(sh, 1));
-  const dw = sw * scale;
-  const dh = sh * scale;
-  const ox = (outW - dw) / 2;
-  const oy = (outH - dh) / 2;
-  const rgba = new Uint8Array(outW * outH * 4);
-  const xEnd = ox + dw;
-  const yEnd = oy + dh;
-  for (let y = 0; y < outH; y++) {
-    for (let x = 0; x < outW; x++) {
-      if (x + 0.5 < ox || x + 0.5 >= xEnd || y + 0.5 < oy || y + 0.5 >= yEnd) continue;
-      const sx = Math.floor(x0 + (x + 0.5 - ox) / scale);
-      const sy = Math.floor(y0 + (y + 0.5 - oy) / scale);
-      if (sx < 0 || sy < 0 || sx >= source.widthPx || sy >= source.heightPx) continue;
-      if (mask.bitset[sy * source.widthPx + sx] !== 1) continue;
-      const si = (sy * source.widthPx + sx) * 4;
-      const di = (y * outW + x) * 4;
-      rgba[di] = src.rgba[si];
-      rgba[di + 1] = src.rgba[si + 1];
-      rgba[di + 2] = src.rgba[si + 2];
-      rgba[di + 3] = 255;
-    }
-  }
-  return { width: outW, height: outH, rgba, sourceBelowFloor: belowFloor };
-}
-
-export async function encodeInventoryPng(
-  input: InventoryInput,
-): Promise<{ blob: Blob; sourceBelowFloor: boolean }> {
-  const { bitmap, mask, source } = input;
-  const srcCanvas = new OffscreenCanvas(source.widthPx, source.heightPx);
-  const srcCtx = srcCanvas.getContext('2d')!;
-  srcCtx.drawImage(bitmap, 0, 0);
-  const img = srcCtx.getImageData(0, 0, source.widthPx, source.heightPx);
-  const frame = composeInventoryFrame(
-    { width: source.widthPx, height: source.heightPx, rgba: img.data },
-    mask,
-    source,
-  );
-  const out = new OffscreenCanvas(frame.width, frame.height);
-  const ctx = out.getContext('2d')!;
-  ctx.putImageData(new ImageData(new Uint8ClampedArray(frame.rgba), frame.width, frame.height), 0, 0);
-  const blob = await out.convertToBlob({ type: 'image/png' });
-  return { blob, sourceBelowFloor: frame.sourceBelowFloor };
-}
@@ -1,294 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import {
-  overlayWidthStations,
-  pickBottomTowardTop,
-  axisRightUnit,
-  buildOverlayPlan,
-  type OverlayPlan,
-} from './overlay.ts';
-import { orientedRect, minAreaRect } from '../geometry/rect.ts';
-
-// --- Station math (#63) ---
-
-test('overlayWidthStations: every 12 in from 6 while ≤ L−6 (#63)', () => {
-  assert.deepEqual(overlayWidthStations(48), [6, 18, 30, 42]);
-  assert.deepEqual(overlayWidthStations(40), [6, 18, 30]);
-  assert.deepEqual(overlayWidthStations(12), [6]);
-  assert.deepEqual(overlayWidthStations(18), [6]);
-  assert.deepEqual(overlayWidthStations(19), [6]); // L−6=13 → 18 excluded
-  assert.deepEqual(overlayWidthStations(11), []);
-  assert.deepEqual(overlayWidthStations(10), []);
-  assert.deepEqual(overlayWidthStations(6), []);
-  assert.deepEqual(overlayWidthStations(24), [6, 18]);
-  assert.deepEqual(overlayWidthStations(30), [6, 18]);
-});
-
-test('overlayWidthStations: never tip-inclusive 0 or L (#63)', () => {
-  for (const L of [24, 36, 48, 60, 72]) {
-    const stations = overlayWidthStations(L);
-    assert.ok(!stations.includes(0), `L=${L} must not include tip 0`);
-    assert.ok(!stations.includes(L), `L=${L} must not include tip L`);
-    for (const s of stations) {
-      assert.ok(s >= 6 && s <= L - 6, `station ${s} within [6, L−6] for L=${L}`);
-      assert.equal((s - 6) % 12, 0, `station ${s} is 6+12k`);
-    }
-  }
-});
-
-// --- EXIF-oriented bottom along approved axis (#63) ---
-
-test('pickBottomTowardTop: larger y is bottom (EXIF-oriented photo, y↓) (#63)', () => {
-  // Axis along +y (down the photo): start at top, end at bottom of span
-  const start: [number, number] = [100, 50]; // top of photo
-  const end: [number, number] = [100, 450]; // bottom of photo
-  const { bottom, top, ux, uy } = pickBottomTowardTop(start, end);
-  assert.deepEqual(bottom, end, 'end nearer photo bottom is bottom');
-  assert.deepEqual(top, start);
-  // Unit from bottom → top points up (−y)
-  assert.ok(Math.abs(ux) < 1e-9);
-  assert.ok(uy < 0, `uy=${uy} must point toward photo top`);
-});
-
-test('pickBottomTowardTop: flipped axis endpoints still pick EXIF bottom (#63)', () => {
-  const a: [number, number] = [50, 400]; // bottom-ish
-  const b: [number, number] = [50, 40]; // top-ish
-  const r1 = pickBottomTowardTop(a, b);
-  const r2 = pickBottomTowardTop(b, a);
-  assert.deepEqual(r1.bottom, a);
-  assert.deepEqual(r2.bottom, a);
-  assert.deepEqual(r1.top, b);
-  assert.deepEqual(r2.top, b);
-});
-
-test('pickBottomTowardTop: length-axis direction stays on approved span (not photo upright) (#63)', () => {
-  // Diagonal approved axis — bottom is still the larger-y end, unit follows the diagonal
-  const start: [number, number] = [10, 10];
-  const end: [number, number] = [210, 410];
-  const { bottom, top, ux, uy } = pickBottomTowardTop(start, end);
-  assert.deepEqual(bottom, end);
-  assert.deepEqual(top, start);
-  const len = Math.hypot(top[0] - bottom[0], top[1] - bottom[1]);
-  assert.ok(Math.abs(Math.hypot(ux, uy) - 1) < 1e-9);
-  assert.ok(Math.abs(ux - (top[0] - bottom[0]) / len) < 1e-9);
-  assert.ok(Math.abs(uy - (top[1] - bottom[1]) / len) < 1e-9);
-});
-
-test('axisRightUnit: right of bottom→top travel in canvas (y↓) (#63)', () => {
-  // Travel up (−y): facing up, right is +x
-  const [rx, ry] = axisRightUnit(0, -1);
-  assert.ok(rx > 0.99 && Math.abs(ry) < 1e-9, `right of up should be +x, got (${rx},${ry})`);
-  // Travel +x (right): facing right, right is +y (down)
-  const [rx2, ry2] = axisRightUnit(1, 0);
-  assert.ok(Math.abs(rx2) < 1e-9 && ry2 > 0.99, `right of +x should be +y, got (${rx2},${ry2})`);
-});
-
-// --- Overlay plan geometry (#63) ---
-
-test('buildOverlayPlan: length line on axis-right outside slab; widths at 12in stations (#63)', () => {
-  // Uniform 480×100 slab @ 10 px/in → L=48in, axis +x. Photo taller so bottom is clear.
-  // Place slab in a tall canvas so EXIF bottom (large y) picks the +x? Wait axis is +x (horizontal).
-  // For horizontal axis both ends have same y — tie-break must be stable.
-  const W = 480, H = 200;
-  const bitset = new Uint8Array(W * H);
-  // Slab occupies y=50..149, x=0..479 (full width strip)
-  for (let y = 50; y < 150; y++) for (let x = 0; x < W; x++) bitset[y * W + x] = 1;
-  const box = orientedRect(minAreaRect(bitset, W, H)!, 0); // long side +x
-  const scale = 10; // px/in
-  const lengthIn = 48;
-  const plan = buildOverlayPlan({
-    bitset,
-    widthPx: W,
-    heightPx: H,
-    bbox: box,
-    scale,
-    lengthIn,
-    lengthLabel: '48"',
-    // Identity inventory map (source == inventory) for unit geometry
-    mapToInventory: (x, y) => [x, y],
-  });
-
-  assert.ok(plan.length, 'must include length dimension');
-  assert.equal(plan.widths.length, 4, 'stations 6,18,30,42');
-  assert.deepEqual(
-    plan.widths.map((w) => w.stationIn),
-    [6, 18, 30, 42],
-  );
-
-  // Length graphic must sit to the axis-right of the wood (outside edge)
-  const mid = plan.length;
-  // For axis +x, bottom tie-break: if y equal, pickBottomTowardTop uses a documented rule.
-  // Right of bottom→top should be outside the slab along the short axis.
-  assert.ok(
-    mid.outside,
-    'length dimension must be flagged outside the slab on axis-right',
-  );
-
-  // Width arrows: tips at left/right slab edges (perp extent), text on line
-  for (const w of plan.widths) {
-    assert.ok(w.left && w.right, 'width has left/right tips');
-    assert.ok(typeof w.label === 'string' && w.label.length > 0, 'width has measurement text');
-    // Across wood: left and right differ primarily along short axis (±y for +x length)
-    const dx = w.right[0] - w.left[0];
-    const dy = w.right[1] - w.left[1];
-    assert.ok(Math.abs(dy) > Math.abs(dx), 'width span is across (perp to +x length)');
-  }
-
-  // Color contract for draw consumers
-  assert.equal(plan.stroke, '#000000');
-  assert.ok(plan.fontPx >= 18, `fontPx ${plan.fontPx} large enough to read`);
-});
-
-test('buildOverlayPlan: stations measured from EXIF bottom, not tip-inclusive M1 every-6 (#63)', () => {
-  // Vertical slab: length along +y (photo upright matches axis). Bottom = larger y.
-  const W = 100, H = 480;
-  const bitset = new Uint8Array(W * H).fill(1);
-  const box = orientedRect(minAreaRect(bitset, W, H)!, 90); // long side +y
-  const plan = buildOverlayPlan({
-    bitset,
-    widthPx: W,
-    heightPx: H,
-    bbox: box,
-    scale: 10,
-    lengthIn: 48,
-    lengthLabel: '48"',
-    mapToInventory: (x, y) => [x, y],
-  });
-  assert.deepEqual(
-    plan.widths.map((w) => w.stationIn),
-    [6, 18, 30, 42],
-    'must be 12in overlay stations, not M1 every-6 tip-trimmed list',
-  );
-  // First station is 6in up from photo-bottom end of span
-  const first = plan.widths[0];
-  // Bottom of photo is y=H-ish; 6in @ 10px/in = 60px toward top → y ≈ H-1 - 60
-  assert.ok(first.center[1] > H / 2, 'first station nearer the photo bottom half');
-});
-
-test('buildOverlayPlan: dishonest upright-photo axes rejected — uses approved bbox axis (#63)', () => {
-  // Slab long along +x but we approve axis at 0; plan length direction must follow bbox, not image H.
-  const W = 400, H = 120;
-  const bitset = new Uint8Array(W * H).fill(1);
-  const box = orientedRect(minAreaRect(bitset, W, H)!, 0);
-  const plan: OverlayPlan = buildOverlayPlan({
-    bitset,
-    widthPx: W,
-    heightPx: H,
-    bbox: box,
-    scale: 10,
-    lengthIn: 40,
-    lengthLabel: '40"',
-    mapToInventory: (x, y) => [x, y],
-  });
-  // Length line endpoints should differ mainly in x (along approved axis), not y
-  const lx = Math.abs(plan.length.a[0] - plan.length.b[0]);
-  const ly = Math.abs(plan.length.a[1] - plan.length.b[1]);
-  assert.ok(lx > ly * 2, `length graphic follows approved +x axis (dx=${lx}, dy=${ly})`);
-});
-
-// --- Ty UAT nits (#67) ---
-
-test('buildOverlayPlan: length endpoints snap to mask tips, not oversized bbox corners (#67)', () => {
-  // Wood occupies x=100..299 only; synthetic bbox long side extends past tips (x=50..350).
-  const W = 400, H = 160;
-  const bitset = new Uint8Array(W * H);
-  for (let y = 40; y < 100; y++) for (let x = 100; x < 300; x++) bitset[y * W + x] = 1;
-  const bbox = {
-    corners: [
-      [350, 100],
-      [350, 40],
-      [50, 40],
-      [50, 100],
-    ] as [number, number][],
-    longSidePx: 300,
-    angleDeg: 0,
-  };
-  const plan = buildOverlayPlan({
-    bitset,
-    widthPx: W,
-    heightPx: H,
-    bbox,
-    scale: 10,
-    lengthIn: 20,
-    lengthLabel: '20"',
-    mapToInventory: (x, y) => [x, y],
-  });
-
-  // Length line sits on axis-right; project a/b onto the length axis through the
-  // wood centroid — endpoints must match mask span ends, not bbox corners.
-  const oriented = pickBottomTowardTop([100, 70], [299, 70]);
-  const strip = (p: [number, number]): [number, number] => {
-    const cx = 199.5, cy = 70;
-    const along = (p[0] - cx) * oriented.ux + (p[1] - cy) * oriented.uy;
-    return [cx + oriented.ux * along, cy + oriented.uy * along];
-  };
-  const xs = [strip(plan.length.a)[0], strip(plan.length.b)[0]].sort((a, b) => a - b);
-  // Mask tips ≈ 100 and 299 (inclusive pixels); bbox corners at 50 and 350
-  assert.ok(Math.abs(xs[0] - 100) <= 2, `mask min tip ${xs[0]} ≈ 100, not bbox 50`);
-  assert.ok(Math.abs(xs[1] - 299) <= 2, `mask max tip ${xs[1]} ≈ 299, not bbox 350`);
-  assert.ok(Math.abs(xs[0] - 50) > 20, 'must not use bbox corner at 50');
-  assert.ok(Math.abs(xs[1] - 350) > 20, 'must not use bbox corner at 350');
-});
-
-test('buildOverlayPlan: width labels sit axis-left outside the slab (#67)', () => {
-  // Uniform strip: length +x, width along y. Axis-right of bottom→top is −y (up).
-  const W = 480, H = 200;
-  const bitset = new Uint8Array(W * H);
-  for (let y = 50; y < 150; y++) for (let x = 0; x < W; x++) bitset[y * W + x] = 1;
-  const box = orientedRect(minAreaRect(bitset, W, H)!, 0);
-  const plan = buildOverlayPlan({
-    bitset,
-    widthPx: W,
-    heightPx: H,
-    bbox: box,
-    scale: 10,
-    lengthIn: 48,
-    lengthLabel: '48"',
-    mapToInventory: (x, y) => [x, y],
-  });
-  assert.ok(plan.widths.length > 0);
-  for (const w of plan.widths) {
-    assert.ok(w.labelAt, 'width mark must expose labelAt');
-    // left/right tips still on wood edges
-    assert.ok(Math.abs(w.left[1] - 149) <= 2 || Math.abs(w.left[1] - 50) <= 2);
-    assert.ok(Math.abs(w.right[1] - 149) <= 2 || Math.abs(w.right[1] - 50) <= 2);
-    // labelAt on axis-left = opposite of axis-right from center
-    // For this geometry, axis-right is toward smaller y; axis-left toward larger y
-    // (outside past the bottom edge y≈149).
-    const cy = w.center[1];
-    assert.ok(
-      w.labelAt[1] > Math.max(w.left[1], w.right[1]) + 4,
-      `width labelAt y=${w.labelAt[1]} must sit past slab edge (left of travel), not on wood center y=${cy}`,
-    );
-    assert.ok(
-      Math.abs(w.labelAt[0] - w.center[0]) < 3,
-      'width label stays on the station cross-section (same x as center)',
-    );
-  }
-  // Length stays axis-right (outside opposite side)
-  const lenY = (plan.length.a[1] + plan.length.b[1]) / 2;
-  assert.ok(lenY < 50 - 4, `length dim stays axis-right outside top edge, got y=${lenY}`);
-});
-
-test('buildOverlayPlan: font one step smaller than prior 28 / scale*1.2 (#67)', () => {
-  const W = 480, H = 200;
-  const bitset = new Uint8Array(W * H);
-  for (let y = 50; y < 150; y++) for (let x = 0; x < W; x++) bitset[y * W + x] = 1;
-  const box = orientedRect(minAreaRect(bitset, W, H)!, 0);
-  const scale = 10;
-  const plan = buildOverlayPlan({
-    bitset,
-    widthPx: W,
-    heightPx: H,
-    bbox: box,
-    scale,
-    lengthIn: 48,
-    lengthLabel: '48"',
-    mapToInventory: (x, y) => [x, y],
-  });
-  const oldFont = Math.max(28, Math.round(scale * 1.2));
-  assert.ok(plan.fontPx < oldFont, `fontPx ${plan.fontPx} must be < prior ${oldFont}`);
-  assert.ok(plan.fontPx >= 18, `fontPx ${plan.fontPx} still legible`);
-  // Concrete contract: max(22, round(scale*1.0))
-  assert.equal(plan.fontPx, Math.max(22, Math.round(scale * 1.0)));
-});
@@ -1,352 +0,0 @@
-import type { BBox } from '../capture/capture.types';
-import { axisEndpoints } from '../measure/measure';
-
-/** Width overlay stations: 6, 18, 30, … while ≤ L − 6 (tip-exclusive). */
-export function overlayWidthStations(lengthIn: number): number[] {
-  if (!(lengthIn > 6)) return [];
-  const last = lengthIn - 6;
-  const out: number[] = [];
-  for (let s = 6; s <= last + 1e-9; s += 12) out.push(s);
-  return out;
-}
-
-/**
- * EXIF-oriented photo bottom = larger canvas y. Pick which end of the approved
- * length-axis span is bottom; return unit from bottom → top along that span.
- */
-export function pickBottomTowardTop(
-  start: [number, number],
-  end: [number, number],
-): {
-  bottom: [number, number];
-  top: [number, number];
-  ux: number;
-  uy: number;
-} {
-  // Larger y is closer to the bottom edge of the oriented photo.
-  // Tie-break (horizontal axis): prefer larger x for a stable choice.
-  const startIsBottom =
-    start[1] > end[1] || (start[1] === end[1] && start[0] >= end[0]);
-  const bottom = startIsBottom ? start : end;
-  const top = startIsBottom ? end : start;
-  const dx = top[0] - bottom[0];
-  const dy = top[1] - bottom[1];
-  const len = Math.hypot(dx, dy) || 1;
-  return { bottom, top, ux: dx / len, uy: dy / len };
-}
-
-/** Screen-space right of travel (canvas y↓): (ux,uy) → (−uy, ux). */
-export function axisRightUnit(ux: number, uy: number): [number, number] {
-  return [-uy, ux];
-}
-
-export interface OverlayWidthMark {
-  stationIn: number;
-  center: [number, number];
-  left: [number, number];
-  right: [number, number];
-  /** Axis-left of the slab, outside the wood edge (opposite of length dim). */
-  labelAt: [number, number];
-  label: string;
-}
-
-export interface OverlayLengthMark {
-  a: [number, number];
-  b: [number, number];
-  labelAt: [number, number];
-  label: string;
-  /** True when the line sits outside the slab on the axis-right side. */
-  outside: boolean;
-}
-
-export interface OverlayPlan {
-  stroke: '#000000';
-  fontPx: number;
-  length: OverlayLengthMark;
-  widths: OverlayWidthMark[];
-}
-
-export interface OverlayPlanInput {
-  bitset: Uint8Array;
-  widthPx: number;
-  heightPx: number;
-  bbox: BBox;
-  scale: number; // px per inch
-  lengthIn: number;
-  lengthLabel: string;
-  /** Map source px → inventory PNG px (identity OK for unit tests). */
-  mapToInventory: (x: number, y: number) => [number, number];
-}
-
-function maskAxisSegment(
-  bitset: Uint8Array,
-  w: number,
-  h: number,
-  bbox: BBox,
-): { start: [number, number]; end: [number, number]; ux: number; uy: number; span: number } {
-  const { start: a, end: b } = axisEndpoints(bbox);
-  const ex = b[0] - a[0];
-  const ey = b[1] - a[1];
-  const elen = Math.hypot(ex, ey) || 1;
-  const ux = ex / elen;
-  const uy = ey / elen;
-  const cx = (bbox.corners[0][0] + bbox.corners[1][0] + bbox.corners[2][0] + bbox.corners[3][0]) / 4;
-  const cy = (bbox.corners[0][1] + bbox.corners[1][1] + bbox.corners[2][1] + bbox.corners[3][1]) / 4;
-  const cProj = cx * ux + cy * uy;
-  let minP = Infinity;
-  let maxP = -Infinity;
-  for (let y = 0; y < h; y++) {
-    const row = y * w;
-    for (let x = 0; x < w; x++) {
-      if (!bitset[row + x]) continue;
-      const p = x * ux + y * uy;
-      if (p < minP) minP = p;
-      if (p > maxP) maxP = p;
-    }
-  }
-  if (maxP < minP) return { start: a, end: b, ux, uy, span: 0 };
-  return {
-    start: [cx + ux * (minP - cProj), cy + uy * (minP - cProj)],
-    end: [cx + ux * (maxP - cProj), cy + uy * (maxP - cProj)],
-    ux,
-    uy,
-    span: maxP - minP,
-  };
-}
-
-/** Probe slab extent along unit (px, py) through origin (ox, oy). */
-function probeExtent(
-  bitset: Uint8Array,
-  w: number,
-  h: number,
-  ox: number,
-  oy: number,
-  px: number,
-  py: number,
-): { minP: number; maxP: number } | null {
-  const half = Math.max(2, Math.round((w + h) / 4));
-  let minP = Infinity;
-  let maxP = -Infinity;
-  for (let p = -half; p <= half; p++) {
-    const x = Math.round(ox + px * p);
-    const y = Math.round(oy + py * p);
-    if (x < 0 || y < 0 || x >= w || y >= h) continue;
-    if (bitset[y * w + x]) {
-      if (p < minP) minP = p;
-      if (p > maxP) maxP = p;
-    }
-  }
-  if (maxP < minP) return null;
-  return { minP, maxP };
-}
-
-function fmtInches(inches: number): string {
-  const whole = Math.floor(inches + 1e-9);
-  const rem = Math.round((inches - whole) * 8);
-  if (rem === 0) return `${whole}"`;
-  const frac: Record<number, string> = {
-    1: '1/8', 2: '1/4', 3: '3/8', 4: '1/2', 5: '5/8', 6: '3/4', 7: '7/8', 8: '',
-  };
-  if (rem === 8) return `${whole + 1}"`;
-  const part = frac[rem] ?? `${rem}/8`;
-  return whole > 0 ? `${whole} ${part}"` : `${part}"`;
-}
-
-export function buildOverlayPlan(input: OverlayPlanInput): OverlayPlan {
-  const { bitset, widthPx, heightPx, bbox, scale, lengthIn, lengthLabel, mapToInventory } = input;
-  const seg = maskAxisSegment(bitset, widthPx, heightPx, bbox);
-  // Re-orient span ends so EXIF bottom establishes station origin; axis still
-  // lies on the approved M1 direction (seg ux/uy flipped only when needed).
-  const oriented = pickBottomTowardTop(seg.start, seg.end);
-  const { bottom, top, ux, uy } = oriented;
-  const [rx, ry] = axisRightUnit(ux, uy);
-
-  const pad = Math.max(16, scale * 0.75);
-  const stations = overlayWidthStations(lengthIn);
-  const widths: OverlayWidthMark[] = [];
-  for (const stationIn of stations) {
-    const t = stationIn * scale;
-    const ox = bottom[0] + ux * t;
-    const oy = bottom[1] + uy * t;
-    const extent = probeExtent(bitset, widthPx, heightPx, ox, oy, rx, ry);
-    if (!extent) continue;
-    // left = opposite of axis-right; right = axis-right tip on slab edge
-    const leftSrc: [number, number] = [ox + rx * extent.minP, oy + ry * extent.minP];
-    const rightSrc: [number, number] = [ox + rx * extent.maxP, oy + ry * extent.maxP];
-    // Width number sits axis-left outside the slab (past left tip).
-    const labelOff = extent.minP - pad - scale * 0.4;
-    const labelSrcW: [number, number] = [ox + rx * labelOff, oy + ry * labelOff];
-    const widthIn = (extent.maxP - extent.minP + 1) / scale;
-    widths.push({
-      stationIn,
-      center: mapToInventory(ox, oy),
-      left: mapToInventory(leftSrc[0], leftSrc[1]),
-      right: mapToInventory(rightSrc[0], rightSrc[1]),
-      labelAt: mapToInventory(labelSrcW[0], labelSrcW[1]),
-      label: fmtInches(widthIn),
-    });
-  }
-
-  // Length graphic: beside wood on axis-right, outside max right extent.
-  let maxRight = 0;
-  const samples = Math.max(8, Math.round(lengthIn));
-  for (let i = 0; i <= samples; i++) {
-    const t = (i / samples) * (lengthIn * scale);
-    const ox = bottom[0] + ux * t;
-    const oy = bottom[1] + uy * t;
-    const extent = probeExtent(bitset, widthPx, heightPx, ox, oy, rx, ry);
-    if (extent && extent.maxP > maxRight) maxRight = extent.maxP;
-  }
-  const outward = maxRight + pad;
-  const aSrc: [number, number] = [bottom[0] + rx * outward, bottom[1] + ry * outward];
-  const bSrc: [number, number] = [top[0] + rx * outward, top[1] + ry * outward];
-  const midSrc: [number, number] = [(aSrc[0] + bSrc[0]) / 2, (aSrc[1] + bSrc[1]) / 2];
-  // Nudge label further outward a bit
-  const labelSrc: [number, number] = [midSrc[0] + rx * (scale * 0.4), midSrc[1] + ry * (scale * 0.4)];
-
-  const fontPx = Math.max(22, Math.round(scale * 1.0));
-
-  return {
-    stroke: '#000000',
-    fontPx,
-    length: {
-      a: mapToInventory(aSrc[0], aSrc[1]),
-      b: mapToInventory(bSrc[0], bSrc[1]),
-      labelAt: mapToInventory(labelSrc[0], labelSrc[1]),
-      label: lengthLabel,
-      outside: true,
-    },
-    widths,
-  };
-}
-
-/** Draw black dimension graphics onto an existing canvas (inventory PNG size). */
-export function drawOverlayPlan(
-  ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,
-  plan: OverlayPlan,
-): void {
-  const { stroke, fontPx } = plan;
-  ctx.save();
-  ctx.strokeStyle = stroke;
-  ctx.fillStyle = stroke;
-  ctx.lineWidth = Math.max(3, Math.round(fontPx / 10));
-  ctx.lineCap = 'round';
-  ctx.font = `bold ${fontPx}px sans-serif`;
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-
-  const arrow = (from: [number, number], to: [number, number]) => {
-    const dx = to[0] - from[0];
-    const dy = to[1] - from[1];
-    const len = Math.hypot(dx, dy) || 1;
-    const ux = dx / len;
-    const uy = dy / len;
-    const head = Math.max(10, fontPx * 0.35);
-    ctx.beginPath();
-    ctx.moveTo(from[0], from[1]);
-    ctx.lineTo(to[0], to[1]);
-    ctx.stroke();
-    // arrow tips at both ends
-    for (const [sx, sy, dir] of [
-      [from[0], from[1], 1],
-      [to[0], to[1], -1],
-    ] as const) {
-      const px = -uy;
-      const py = ux;
-      ctx.beginPath();
-      ctx.moveTo(sx, sy);
-      ctx.lineTo(sx + dir * ux * head + px * head * 0.4, sy + dir * uy * head + py * head * 0.4);
-      ctx.lineTo(sx + dir * ux * head - px * head * 0.4, sy + dir * uy * head - py * head * 0.4);
-      ctx.closePath();
-      ctx.fill();
-    }
-  };
-
-  // Length
-  arrow(plan.length.a, plan.length.b);
-  ctx.fillText(plan.length.label, plan.length.labelAt[0], plan.length.labelAt[1]);
-
-  // Widths
-  for (const w of plan.widths) {
-    arrow(w.left, w.right);
-    ctx.fillText(w.label, w.labelAt[0], w.labelAt[1]);
-  }
-
-  ctx.restore();
-}
-
-export interface InventoryMap {
-  mapToInventory: (x: number, y: number) => [number, number];
-  outW: number;
-  outH: number;
-}
-
-/** Same crop math as composeInventoryFrame — source → inventory PNG pixels. */
-export function inventorySourceMap(
-  slabBounds: { x: number; y: number; w: number; h: number },
-  source: { widthPx: number; heightPx: number },
-  outW: number,
-  outH: number,
-): InventoryMap {
-  const FILL = 0.9;
-  const x0 = Math.max(0, Math.round(slabBounds.x));
-  const y0 = Math.max(0, Math.round(slabBounds.y));
-  const x1 = Math.min(source.widthPx, x0 + Math.max(1, Math.round(slabBounds.w)));
-  const y1 = Math.min(source.heightPx, y0 + Math.max(1, Math.round(slabBounds.h)));
-  const sw = x1 - x0;
-  const sh = y1 - y0;
-  const scale = Math.min((outW * FILL) / Math.max(sw, 1), (outH * FILL) / Math.max(sh, 1));
-  const dw = sw * scale;
-  const dh = sh * scale;
-  const ox = (outW - dw) / 2;
-  const oy = (outH - dh) / 2;
-  return {
-    outW,
-    outH,
-    mapToInventory: (sx, sy) => [ox + (sx - x0) * scale, oy + (sy - y0) * scale],
-  };
-}
-
-export interface EncodeOverlayInput {
-  /** Clean calibration inventory PNG bytes. */
-  inventoryPng: Blob;
-  bitset: Uint8Array;
-  widthPx: number;
-  heightPx: number;
-  bbox: BBox;
-  scale: number;
-  lengthIn: number;
-  lengthLabel: string;
-  slabBounds: { x: number; y: number; w: number; h: number };
-  source: { widthPx: number; heightPx: number };
-}
-
-/**
- * Burn black dimension overlays onto a copy of the clean calibration inventory PNG.
- * Returns a new image/png blob; never mutates the clean inventory.
- */
-export async function encodeOverlayPng(input: EncodeOverlayInput): Promise<Blob> {
-  const bmp = await createImageBitmap(input.inventoryPng);
-  try {
-    const outW = bmp.width;
-    const outH = bmp.height;
-    const canvas = new OffscreenCanvas(outW, outH);
-    const ctx = canvas.getContext('2d')!;
-    ctx.drawImage(bmp, 0, 0);
-    const { mapToInventory } = inventorySourceMap(input.slabBounds, input.source, outW, outH);
-    const plan = buildOverlayPlan({
-      bitset: input.bitset,
-      widthPx: input.widthPx,
-      heightPx: input.heightPx,
-      bbox: input.bbox,
-      scale: input.scale,
-      lengthIn: input.lengthIn,
-      lengthLabel: input.lengthLabel,
-      mapToInventory,
-    });
-    drawOverlayPlan(ctx, plan);
-    return await canvas.convertToBlob({ type: 'image/png' });
-  } finally {
-    bmp.close();
-  }
-}
@@ -0,0 +1,72 @@
+<script>
+	import '../app.css';
+	import { browser } from '$app/environment';
+	import { checkBrowserGate } from '$lib/core/browserGate.js';
+
+	// UAT-3: hard-stop browser gate (CAPTURE.md §Browsers).
+	// Client-side only: the gate must be invisible to crawlers/bots
+	// and to any non-JS context, and the app must not render in an
+	// unsupported browser.
+	const gate = browser ? checkBrowserGate(navigator.userAgent) : null;
+	let unsupported = $state(gate ? !gate.supported : false);
+	let browserName = $state(gate ? gate.browser.name : 'this browser');
+</script>
+
+<svelte:head>
+	<title>SlabUploader — Milestone 1</title>
+</svelte:head>
+
+{#if unsupported}
+	<!-- Hard stop: the app does NOT render in an unsupported browser. -->
+	<div class="gate">
+		<h1>Unsupported browser</h1>
+		<p>SlabUploader does not work in <strong>{browserName}</strong>.</p>
+		<p class="sub">Use one of the supported clients:</p>
+		<ul>
+			<li>Phone — iOS Safari, Android Chrome</li>
+			<li>PC — Chrome, Edge, Firefox</li>
+		</ul>
+	</div>
+{:else}
+	<main>
+		<h1>SlabUploader</h1>
+		<p>Milestone 1 — Capture (browser-only)</p>
+		<slot />
+	</main>
+{/if}
+
+<style>
+	.gate {
+		min-height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		max-width: 32rem;
+		margin: 1rem auto;
+		padding: 2rem;
+		border: 2px solid #b00020;
+		border-radius: 0.5rem;
+		text-align: center;
+	}
+
+	.gate h1 {
+		color: #b00020;
+		margin: 0 0 1rem;
+	}
+
+	.gate .sub {
+		margin: 1rem 0 0.5rem;
+	}
+
+	.gate ul {
+		text-align: left;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.gate li {
+		margin: 0.25rem 0;
+	}
+</style>
+
@@ -0,0 +1,593 @@
+<script>
+	/**
+	 * M1-5: Full capture flow — Add photo → Mask → Length axis → Measure.
+	 * Drives the pure core modules (mask.js, maskState.js, axis.js, measure.js,
+	 * math.js, inventory.js) with canvas overlays.
+	 */
+	import { keySheet, maskStats } from '$lib/core/mask.js';
+	import {
+		createMaskState,
+		reduceMaskState,
+		computeMask,
+		RECOMPUTE_DELAY_MS
+	} from '$lib/core/maskState.js';
+	import {
+		minAreaRect,
+		axisFromRect,
+		createAxisState,
+		reduceAxisState,
+		rotateAxis
+	} from '$lib/core/axis.js';
+	import { sampleWidthsPx } from '$lib/core/measure.js';
+	import { scale as calcScale, sqft, bdft, sampledWidthsFrom } from '$lib/core/math.js';
+	import { prepareInventoryMetadata } from '$lib/core/inventory.js';
+
+	// --- state ----------------------------------------------------------
+	let state = $state('add_photo'); // add_photo | mask | axis | measure
+	let photo = $state(null); // ImageBitmap
+	let photoData = $state(null); // Uint8ClampedArray RGBA
+	let photoW = $state(0);
+	let photoH = $state(0);
+	let maskState = $state(null);
+	let maskResult = $state(null); // {mask, weights, stats}
+	let axisState = $state(null);
+	let rect = $state(null);
+	let heicNotice = $state(false);
+	let busy = $state(false);
+	let debounceTimer = $state(null);
+
+	// measure
+	let lengthIn = $state(48);
+	let thicknessIn = $state(1);
+	let result = $state(null);
+	let pngUrl = $state(null);
+
+	// canvas refs
+	let overlayCanvas = $state(null);
+	let photoCanvas = $state(null);
+
+	// --- photo input ----------------------------------------------------
+	async function onFileChange(e) {
+		const file = e.target.files?.[0];
+		if (!file) return;
+		heicNotice = false;
+
+		const isHeic =
+			file.type === 'image/heic' || file.type === 'image/heif' ||
+			file.name.toLowerCase().match(/\.(heic|heif)$/);
+
+		let bitmap;
+		try {
+			bitmap = await createImageBitmap(file);
+		} catch {
+			// Browser cannot decode (HEIC on Chrome/FF)
+			if (isHeic) {
+				heicNotice = true;
+			} else {
+				heicNotice = true; // undecodable file of any type
+			}
+			return;
+		}
+
+		photo = bitmap;
+		photoW = bitmap.width;
+		photoH = bitmap.height;
+
+		// Draw to canvas to get RGBA data
+		const c = document.createElement('canvas');
+		c.width = photoW;
+		c.height = photoH;
+		const ctx = c.getContext('2d');
+		ctx.drawImage(bitmap, 0, 0);
+		photoData = ctx.getImageData(0, 0, photoW, photoH).data;
+
+		// Initialize mask state
+		maskState = createMaskState({ width: photoW, height: photoH });
+		maskResult = null;
+
+		state = 'mask';
+		// Trigger initial recompute
+		setTimeout(() => doRecompute(), 100);
+	}
+
+	function dismissHeic() {
+		heicNotice = false;
+	}
+
+	// --- mask recompute --------------------------------------------------
+	function doRecompute() {
+		if (!photoData || !maskState) return;
+		busy = true;
+		// Run in a microtask to let UI paint
+		setTimeout(() => {
+			const { mask, weights, stats } = computeMask(photoData, {
+				width: photoW,
+				height: photoH,
+				sheet: maskState.sheet,
+				sensitivity: maskState.sensitivity,
+				edgeOffset: maskState.edgeOffset,
+				feather: maskState.feather
+			});
+			maskResult = { mask, weights, stats };
+			maskState = reduceMaskState(maskState, { type: 'recompute', stats, at: Date.now() });
+			busy = false;
+			drawOverlay();
+		}, 30);
+	}
+
+	function scheduleRecompute() {
+		if (debounceTimer) clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => doRecompute(), RECOMPUTE_DELAY_MS);
+	}
+
+	function onSheetChange(sheet) {
+		maskState = reduceMaskState(maskState, { type: 'set_sheet', sheet });
+		// Sheet change may recompute immediately
+		doRecompute();
+	}
+
+	function onSensitivityChange(val) {
+		maskState = reduceMaskState(maskState, { type: 'set_sensitivity', value: Number(val) });
+		scheduleRecompute();
+	}
+
+	function nudgeSensitivity(delta) {
+		maskState = reduceMaskState(maskState, { type: 'nudge_sensitivity', delta });
+		scheduleRecompute();
+	}
+
+	function approveMask() {
+		if (!maskState || maskState.stats.empty) return;
+		maskState = reduceMaskState(maskState, { type: 'approve' });
+		// Compute bounding rect + axis
+		rect = minAreaRect(maskResult.mask, photoW, photoH);
+		if (rect) {
+			axisState = createAxisState(rect);
+		}
+		state = 'axis';
+	}
+
+	// --- axis ------------------------------------------------------------
+	function rotateAxisBy(deg) {
+		if (!axisState) return;
+		const rad = (deg * Math.PI) / 180;
+		axisState = reduceAxisState(axisState, { type: 'rotate', angle: rad });
+	}
+
+	function onRotateSlider(deg) {
+		if (!axisState) return;
+		const currentDeg = axisState.rect.angle * 180 / Math.PI;
+		const deltaDeg = deg - currentDeg;
+		if (deltaDeg === 0) return;
+		const rad = (deltaDeg * Math.PI) / 180;
+		axisState = reduceAxisState(axisState, { type: 'rotate', angle: rad });
+	}
+
+	function approveAxis() {
+		if (!axisState) return;
+		axisState = reduceAxisState(axisState, { type: 'approve' });
+		state = 'measure';
+	}
+
+	// --- measure ---------------------------------------------------------
+	function calculate() {
+		if (!rect || !axisState || !maskResult) return;
+		const axisLenPx = rect.width >= rect.height ? rect.width : rect.height;
+		const pxPerIn = calcScale(axisLenPx, lengthIn);
+		const axis = axisState.axis;
+		const origin = { x: rect.center.x - axis.x * axisLenPx / 2, y: rect.center.y - axis.y * axisLenPx / 2 };
+		const axisObj = { origin, dir: axis, lengthPx: axisLenPx };
+		const widthsPx = sampleWidthsPx(maskResult.mask, photoW, photoH, axisObj, pxPerIn);
+		const { min, max, avg } = sampledWidthsFrom(widthsPx, pxPerIn);
+		const sqftVal = sqft(maskResult.stats.kept, pxPerIn);
+		const bdftVal = bdft(sqftVal, thicknessIn);
+
+		const meta = prepareInventoryMetadata(
+			maskResult.stats.kept, pxPerIn, lengthIn, thicknessIn, widthsPx
+		);
+		result = { ...meta, sqft: sqftVal, bdft: bdftVal, min, max, avg };
+
+		// Build inventory PNG: slab centered on transparent bg, 3:4 portrait, 80% fill
+		generatePng();
+	}
+
+	function generatePng() {
+		const c = document.createElement('canvas');
+		// 3:4 portrait, shorter side >= 1600 if source allows
+		const srcMin = Math.min(photoW, photoH);
+		const shorter = Math.max(1600, Math.min(srcMin, 1600));
+		const longer = Math.round((shorter * 4) / 3);
+		c.width = shorter;
+		c.height = longer;
+		const ctx = c.getContext('2d');
+		ctx.clearRect(0, 0, c.width, c.height);
+
+		// Scale slab to 80% fill
+		const slabW = photoW;
+		const slabH = photoH;
+		const scaleW = (c.width * 0.8) / slabW;
+		const scaleH = (c.height * 0.8) / slabH;
+		const s = Math.min(scaleW, scaleH);
+		const dw = slabW * s;
+		const dh = slabH * s;
+		const dx = (c.width - dw) / 2;
+		const dy = (c.height - dh) / 2;
+
+		// Draw photo, then apply mask as alpha
+		ctx.drawImage(photo, dx, dy, dw, dh);
+		const imgData = ctx.getImageData(dx, dy, dw, dh);
+		// Scale mask to dw x dh
+		const maskData = maskResult.mask;
+		for (let y = 0; y < dh; y++) {
+			for (let x = 0; x < dw; x++) {
+				const sx = Math.floor((x / dw) * photoW);
+				const sy = Math.floor((y / dh) * photoH);
+				const mIdx = sy * photoW + sx;
+				const a = maskData[mIdx] ? 255 : 0;
+				const i = (y * dw + x) * 4;
+				imgData.data[i + 3] = a;
+			}
+		}
+		ctx.putImageData(imgData, dx, dy);
+
+		c.toBlob((blob) => {
+			if (pngUrl) URL.revokeObjectURL(pngUrl);
+			pngUrl = URL.createObjectURL(blob);
+		}, 'image/png');
+	}
+
+	// --- overlay drawing -------------------------------------------------
+	function drawOverlay() {
+		if (!overlayCanvas || !photo) return;
+		const canvas = overlayCanvas;
+		const w = canvas.width;
+		const h = canvas.height;
+		const ctx = canvas.getContext('2d');
+		ctx.clearRect(0, 0, w, h);
+
+		// Draw photo
+		ctx.drawImage(photo, 0, 0, w, h);
+
+		if ((state === 'mask' || state === 'axis' || state === 'measure') && maskResult) {
+			// Checkerboard on removed pixels
+			const weights = maskResult.weights;
+			const mask = maskResult.mask;
+			const sx = w / photoW;
+			const sy = h / photoH;
+			// Draw checkerboard pattern for removed areas
+			const checker = 8;
+			for (let y = 0; y < h; y += checker) {
+				for (let x = 0; x < w; x += checker) {
+					const px = Math.floor((x / w) * photoW);
+					const py = Math.floor((y / h) * photoH);
+					const idx = py * photoW + px;
+					if (!mask[idx]) {
+						const shade = ((Math.floor(x / checker) + Math.floor(y / checker)) % 2 === 0)
+							? 'rgba(200,200,200,0.6)'
+							: 'rgba(220,220,220,0.6)';
+						ctx.fillStyle = shade;
+						ctx.fillRect(x, y, checker, checker);
+					}
+				}
+			}
+		}
+
+		if ((state === 'axis' || state === 'measure') && axisState) {
+			// Draw bounding rectangle — uses the ROTATED rect from axisState.
+			// The rect's long side IS the length axis (no separate line).
+			const r = axisState.rect;
+			const cx = (r.center.x / photoW) * w;
+			const cy = (r.center.y / photoH) * h;
+			const rw = (r.width / photoW) * w;
+			const rh = (r.height / photoH) * h;
+			ctx.save();
+			ctx.translate(cx, cy);
+			ctx.rotate(r.angle);
+			ctx.strokeStyle = '#00ff88';
+			ctx.lineWidth = 2;
+			ctx.strokeRect(-rw / 2, -rh / 2, rw, rh);
+			ctx.restore();
+		}
+	}
+
+	// --- back navigation -------------------------------------------------
+	function goBack() {
+		if (state === 'measure') state = 'axis';
+		else if (state === 'axis') state = 'mask';
+		else if (state === 'mask') state = 'add_photo';
+	}
+
+	function reset() {
+		if (photo) photo.close();
+		photo = null;
+		photoData = null;
+		maskState = null;
+		maskResult = null;
+		axisState = null;
+		rect = null;
+		result = null;
+		if (pngUrl) { URL.revokeObjectURL(pngUrl); pngUrl = null; }
+		state = 'add_photo';
+	}
+
+	// Resize overlay canvas when photo changes
+	$effect(() => {
+		if (photoW && photoH && overlayCanvas) {
+			overlayCanvas.width = photoW;
+			overlayCanvas.height = photoH;
+			drawOverlay();
+		}
+	});
+
+	// Redraw when state or mask changes
+	$effect(() => {
+		drawOverlay();
+	});
+</script>
+
+<div class="capture">
+	<h1>SlabUploader</h1>
+
+	{#if heicNotice}
+		<div class="notice" role="alert">
+			<p>Cannot decode this photo. Please retake as JPEG.</p>
+			<button onclick={dismissHeic}>OK</button>
+		</div>
+	{/if}
+
+	{#if state === 'add_photo'}
+		<section class="step add-photo">
+			<h2>Add Photo</h2>
+			<p class="setup-rules">
+				Photograph the slab on a green or black sheet.<br>
+				Sheet fills the frame. Slab fully on sheet.<br>
+				Top-down, lens parallel to the face.<br>
+				Length aligned with the long side of the picture.
+			</p>
+			<input type="file" accept="image/jpeg,image/png" onchange={onFileChange} />
+		</section>
+	{:else}
+		<div class="preview-wrap">
+			<canvas bind:this={overlayCanvas} class="preview"></canvas>
+			{#if busy}<div class="busy">Processing…</div>{/if}
+		</div>
+
+		{#if state === 'mask' && maskState}
+			<section class="step mask-step">
+				<h2>Mask</h2>
+				<div class="controls">
+					<div class="control-row">
+						<label>Sheet</label>
+						<div class="seg">
+							<button class:active={maskState.sheet === 'auto'} onclick={() => onSheetChange('auto')}>Auto</button>
+							<button class:active={maskState.sheet === 'green'} onclick={() => onSheetChange('green')}>Green</button>
+							<button class:active={maskState.sheet === 'black'} onclick={() => onSheetChange('black')}>Black</button>
+						</div>
+					</div>
+					<div class="control-row">
+						<label>Sensitivity</label>
+						<button class="nudge" onclick={() => nudgeSensitivity(-5)}>−</button>
+						<input type="range" min="0" max="100" step="1" value={maskState.sensitivity} oninput={onSensitivityChange} />
+						<span class="val">{maskState.sensitivity}</span>
+						<button class="nudge" onclick={() => nudgeSensitivity(5)}>+</button>
+					</div>
+				</div>
+				<div class="actions">
+					<button class="back" onclick={goBack}>Back</button>
+					<button class="approve" disabled={maskState.stats.empty} onclick={approveMask}>
+						Approve Mask
+					</button>
+				</div>
+				{#if maskState.stats.empty}
+					<p class="warn">No slab detected — adjust sensitivity or retake.</p>
+				{/if}
+			</section>
+		{/if}
+
+		{#if state === 'axis' && axisState}
+			<section class="step axis-step">
+				<h2>Length Axis</h2>
+				<p>Rotate the axis to follow the slab length, then approve.</p>
+				<div class="controls">
+					<div class="control-row">
+						<label>Rotate</label>
+						<button class="nudge" onclick={() => rotateAxisBy(-5)}>−</button>
+						<input type="range" min="-180" max="180" step="1"
+							value={Math.round(axisState.rect.angle * 180 / Math.PI)}
+							oninput={(e) => onRotateSlider(Number(e.target.value))}
+							aria-label="Rotate axis" />
+						<span class="val">{Math.round(axisState.rect.angle * 180 / Math.PI)}°</span>
+						<button class="nudge" onclick={() => rotateAxisBy(5)}>+</button>
+					</div>
+				</div>
+				<div class="actions">
+					<button class="back" onclick={goBack}>Back</button>
+					<button class="approve" onclick={approveAxis}>Approve Axis</button>
+				</div>
+			</section>
+		{/if}
+
+		{#if state === 'measure'}
+			<section class="step measure-step">
+				<h2>Measure</h2>
+				<div class="controls">
+					<div class="control-row">
+						<label>Length (in)</label>
+						<input type="number" min="1" step="0.125" value={lengthIn} oninput={(e) => lengthIn = parseFloat(e.target.value) || 0} />
+					</div>
+					<div class="control-row">
+						<label>Thickness (in)</label>
+						<input type="number" min="0.125" step="0.125" value={thicknessIn} oninput={(e) => thicknessIn = parseFloat(e.target.value) || 0} />
+					</div>
+				</div>
+				<div class="actions">
+					<button class="back" onclick={goBack}>Back</button>
+					<button class="approve" onclick={calculate}>Calculate</button>
+				</div>
+
+				{#if result}
+					<div class="results">
+						<h3>Results</h3>
+						<dl>
+							<dt>Width (min)</dt><dd>{result.min?.toFixed(2)} in</dd>
+							<dt>Width (max)</dt><dd>{result.max?.toFixed(2)} in</dd>
+							<dt>Width (avg)</dt><dd>{result.avg?.toFixed(2)} in</dd>
+							<dt>Length</dt><dd>{result.lengthIn} in</dd>
+							<dt>Thickness</dt><dd>{result.thicknessIn} in</dd>
+							<dt>Scale</dt><dd>{result.scale?.toFixed(2)} px/in</dd>
+							<dt>Sq Ft</dt><dd>{result.sqft} ft²</dd>
+							<dt>Board Feet</dt><dd>{result.bdft} bdft</dd>
+						</dl>
+						{#if pngUrl}
+							<h3>Inventory PNG</h3>
+							<img src={pngUrl} alt="Inventory PNG" class="png-preview" />
+						{/if}
+						<button class="reset" onclick={reset}>Start New Slab</button>
+					</div>
+				{/if}
+			</section>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.capture {
+		max-width: 720px;
+		margin: 0 auto;
+		padding: 1rem;
+		font-family: system-ui, sans-serif;
+	}
+	h1 { text-align: center; font-size: 1.4rem; margin-bottom: 1rem; }
+	h2 { font-size: 1.1rem; margin-bottom: 0.5rem; }
+
+	.preview-wrap {
+		position: relative;
+		width: 100%;
+		max-height: 50vh;
+		overflow: hidden;
+		border-radius: 8px;
+		border: 1px solid #ddd;
+		background: #f5f5f5;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.preview {
+		max-width: 100%;
+		max-height: 50vh;
+		width: auto;
+		height: auto;
+		display: block;
+		object-fit: contain;
+	}
+	.busy {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		background: rgba(0,0,0,0.6);
+		color: #fff;
+		padding: 4px 10px;
+		border-radius: 4px;
+		font-size: 0.8rem;
+	}
+
+	.step { margin-top: 1rem; }
+	.setup-rules { font-size: 0.9rem; color: #555; margin-bottom: 1rem; line-height: 1.5; }
+
+	.controls { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.5rem 0; }
+	.control-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+	.control-row label { min-width: 100px; font-weight: 600; font-size: 0.9rem; }
+	.control-row input[type="range"] { flex: 1; min-width: 120px; }
+	.control-row input[type="number"] { width: 80px; padding: 6px; }
+	.val { min-width: 40px; text-align: center; font-size: 0.9rem; }
+
+	.seg { display: flex; gap: 0; }
+	.seg button {
+		padding: 8px 16px;
+		border: 1px solid #ccc;
+		background: #fff;
+		cursor: pointer;
+		font-size: 0.9rem;
+	}
+	.seg button:first-child { border-radius: 6px 0 0 6px; }
+	.seg button:last-child { border-radius: 0 6px 6px 0; }
+	.seg button.active { background: #333; color: #fff; border-color: #333; }
+
+	.nudge {
+		width: 44px;
+		height: 44px;
+		border-radius: 50%;
+		border: 1px solid #ccc;
+		background: #fff;
+		font-size: 1rem;
+		cursor: pointer;
+	}
+	.nudge:active { background: #eee; }
+
+	.actions {
+		display: flex;
+		gap: 0.75rem;
+		margin-top: 1rem;
+	}
+	.actions button {
+		padding: 12px 24px;
+		border-radius: 8px;
+		border: none;
+		font-size: 1rem;
+		cursor: pointer;
+	}
+	.back { background: #eee; }
+	.approve { background: #22c55e; color: #fff; }
+	.approve:disabled { background: #aaa; cursor: not-allowed; }
+
+	.warn { color: #dc2626; font-size: 0.9rem; margin-top: 0.5rem; }
+	.notice {
+		background: #fef3cd;
+		border: 1px solid #ffc107;
+		padding: 1rem;
+		border-radius: 8px;
+		margin: 1rem 0;
+	}
+	.notice button {
+		margin-top: 0.5rem;
+		padding: 8px 16px;
+		border: none;
+		border-radius: 6px;
+		background: #333;
+		color: #fff;
+	}
+
+	.results { margin-top: 1.5rem; }
+	.results h3 { font-size: 1rem; margin-top: 1rem; }
+	.results dl {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 0.25rem 1rem;
+	}
+	.results dt { font-weight: 600; font-size: 0.9rem; }
+	.results dd { font-size: 0.9rem; color: #333; }
+
+	.png-preview {
+		max-width: 100%;
+		max-height: 400px;
+		border: 1px solid #ddd;
+		border-radius: 8px;
+		margin-top: 0.5rem;
+		background: repeating-conic-gradient(#f0f0f0 0% 25%, #fff 0% 50%) 0 0 / 20px 20px;
+	}
+	.reset {
+		margin-top: 1rem;
+		padding: 12px 24px;
+		border-radius: 8px;
+		border: none;
+		background: #6366f1;
+		color: #fff;
+		font-size: 1rem;
+		cursor: pointer;
+	}
+</style>
@@ -0,0 +1,6 @@
+// Minimal health route so the UAT container has a non-SPA probe target.
+import { json } from '@sveltejs/kit';
+
+export function GET() {
+	return json({ ok: true, milestone: 1, app: 'slab-uploader' });
+}
@@ -1,107 +0,0 @@
-import { minAreaRect, slabBounds } from '../geometry/rect';
-import type { MaskParams, WorkerIn, WorkerOut } from '../capture/capture.types';
-
-let bitmap: ImageBitmap | null = null;
-let data: Uint8ClampedArray | null = null;
-let w = 0, h = 0;
-let current = 0; // highest job id issued by main; older replies are dropped
-
-// Keep slab pixels; remove the sheet. Higher sensitivity widens the sheet match.
-const greenKeep = (r: number, g: number, b: number, s: number): boolean => {
-  const t = s / 100;
-  const isSheet = g - Math.max(r, b) > 10 + 35 * t;
-  return !isSheet;
-};
-const blackKeep = (r: number, g: number, b: number, s: number): boolean => {
-  const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
-  const isSheet = lum < 40 + 140 * (s / 100);
-  return !isSheet;
-};
-const autoPick = (samples: { r: number; g: number; b: number }[]): 'green' | 'black' => {
-  let gr = 0, gl = 0;
-  for (const p of samples) {
-    if (p.g - Math.max(p.r, p.b) > 20) gr++;
-    if (0.2126 * p.r + 0.7152 * p.g + 0.0722 * p.b < 70) gl++;
-  }
-  return gl >= gr ? 'black' : 'green';
-};
-
-function runMask(params: MaskParams, id: number): WorkerOut {
-  if (!data) return { id, kind: 'failed', reason: 'no source decoded' };
-  let sheet = params.sheet;
-  if (sheet === 'auto') {
-    const samples: { r: number; g: number; b: number }[] = [];
-    for (let y = 0; y < h; y += 16)
-      for (let x = 0; x < w; x += 16) {
-        const i = (y * w + x) * 4;
-        samples.push({ r: data[i], g: data[i + 1], b: data[i + 2] });
-      }
-    sheet = autoPick(samples);
-  }
-  const keep = sheet === 'green' ? greenKeep : blackKeep;
-  const s = Math.max(0, Math.min(100, params.sensitivity));
-  const bitset = new Uint8Array(w * h);
-  let slabPx = 0;
-  for (let i = 0, p = 0; i < data.length; i += 4, p++) {
-    if (keep(data[i], data[i + 1], data[i + 2], s)) {
-      bitset[p] = 1;
-      slabPx++;
-    }
-  }
-  if (slabPx === 0) {
-    return { id, kind: 'ready', slabPx: 0, bitset, bbox: { corners: [], longSidePx: 0, angleDeg: 0 }, slabBounds: { x: 0, y: 0, w: 0, h: 0 } };
-  }
-  const bbox = minAreaRect(bitset, w, h);
-  if (!bbox) {
-    return { id, kind: 'ready', slabPx: 0, bitset, bbox: { corners: [], longSidePx: 0, angleDeg: 0 }, slabBounds: { x: 0, y: 0, w: 0, h: 0 } };
-  }
-  return { id, kind: 'ready', slabPx, bitset, bbox, slabBounds: slabBounds(bitset, w, h) };
-}
-
-self.onmessage = (e: MessageEvent<WorkerIn>) => {
-  const msg = e.data;
-  if (msg.id < current) return; // superseded by a newer job
-  current = msg.id;
-  if (msg.kind === 'init') {
-    if (bitmap) {
-      bitmap.close();
-      bitmap = null;
-    }
-    data = null;
-    w = h = 0;
-    createImageBitmap(msg.blob)
-      .then((bmp) => {
-        w = bmp.width;
-        h = bmp.height;
-        const canvas = new OffscreenCanvas(w, h);
-        const ctx = canvas.getContext('2d')!;
-        ctx.drawImage(bmp, 0, 0);
-        data = ctx.getImageData(0, 0, w, h).data;
-        bitmap = bmp;
-        self.postMessage({ id: msg.id, kind: 'decoded', w, h } as WorkerOut);
-      })
-      .catch((err) => self.postMessage({ id: msg.id, kind: 'failed', reason: String(err) } satisfies WorkerOut));
-    return;
-  }
-  if (msg.kind === 'invalidate') {
-    if (bitmap) {
-      bitmap.close();
-      bitmap = null;
-    }
-    data = null;
-    w = h = 0;
-    return;
-  }
-  try {
-    const out = runMask({ sheet: msg.sheet, sensitivity: msg.sensitivity }, msg.id);
-    if (out.kind === 'ready') {
-      self.postMessage(out, [out.bitset.buffer]);
-    } else {
-      self.postMessage(out);
-    }
-  } catch (err) {
-    self.postMessage({ id: msg.id, kind: 'failed', reason: String(err) } satisfies WorkerOut);
-  }
-};
-
-export {};
@@ -0,0 +1,10 @@
+import adapter from '@sveltejs/adapter-node';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
@@ -1,40 +0,0 @@
-# E2E visual artifacts (#65)
-
-Screenshots from `npx playwright test` for Milestone 2 Photos-ready evidence.
-
-## How to run (local box — not ubudual :10880)
-
-```bash
-cd frontend
-npm ci
-npx playwright install chromium   # once per machine
-npm run test:e2e
-```
-
-Or against an already-running preview:
-
-```bash
-npm run build && npm run preview -- --host 127.0.0.1 --port 4173
-# other terminal:
-npx playwright test
-```
-
-Fixtures: `tests/fixtures/set1-48x2/` (L=48, thickness=2) and `set2-31x2p5/` (L=31, thickness=2.5). Black sheet — e2e selects **Black** and may nudge sensitivity.
-
-## Expected screenshots (this folder)
-
-| File | Step |
-|---|---|
-| `01-batch.png` | Batch with fixtures loaded |
-| `02-pick-calibration.png` | Pick calibration |
-| `03-mask.png` | Mask (Black sheet) ready to approve |
-| `04-axis.png` | Length axis |
-| `05-measure.png` | Measure with L / thickness filled |
-| `06-photos-ready.png` | Photos ready lineup (clean + overlay + siblings) |
-
-Large regenerating `*.png` and Playwright `test-results/` / `playwright-report/` are gitignored.
-Committed small evidence JPEGs live in `evidence/` (regenerate with a green `npm run test:e2e`, then re-encode if needed).
-
-## Unit tests
-
-`npm test` must still pass separately from Playwright.
@@ -1,11 +0,0 @@
-# Last green e2e run (#65)
-
- **When:** 2026-09-15 2:36 PM PT (`2026-09-15T21:36:28Z`)
- **Fixture:** `tests/fixtures/set1-48x2/` (L=48, thickness=2)
- **Server:** local `vite preview` at `http://127.0.0.1:4173` (not ubudual)
- **Result:** 1 passed (~7s test / ~14s wall with build)
- **Mask:** Black sheet @ sensitivity 50 — Approve enabled without sensitivity ladder
- **Photos ready numbers (from UI):** widths 6"–9 3/8" (avg 7 1/2"); sqft 2.13; bdft 4.26; scale 76.95 px/in
- **Lineup:** Clean calibration → Dimension overlay (48" length + width stations) → Batch photo 2
-
-Full-resolution PNGs are produced under `../` on each run (gitignored). These JPEGs are commit-sized evidence for review.
@@ -0,0 +1,77 @@
+import { test, expect } from '@playwright/test';
+
+// M1-4: Playwright tests for the Length axis state.
+// RED first — the live UI lands in M1-5. These tests describe the
+// contract the UI must honour once the Mask state approves.
+//
+// Spec ground truth (docs/CAPTURE.md §Length axis):
+//   - min-area bounding rectangle of the mask
+//   - length axis on the long side of that rectangle
+//   - user rotates the axis if it does not follow the slab length
+//   - approve the axis
+
+const SLAB_FIXTURE = 'tests/fixtures/slab-green.jpg';
+
+test.describe('Length axis state (M1-5 live UI)', () => {
+	test('advances to Length axis after approving the mask', async ({ page }) => {
+		await page.goto('/');
+		await page.locator('input[type="file"]').setInputFiles(SLAB_FIXTURE);
+		// Wait for the initial mask recompute.
+		await page.waitForTimeout(2200);
+		// Approve the mask.
+		await page.getByRole('button', { name: /approve/i }).tap();
+		// The Length axis state is now visible.
+		await expect(page.getByText(/length axis/i)).toBeVisible();
+	});
+
+	test('shows the bounding rectangle and the proposed length axis', async ({
+		page,
+	}) => {
+		await page.goto('/');
+		await page.locator('input[type="file"]').setInputFiles(SLAB_FIXTURE);
+		await page.waitForTimeout(2200);
+		await page.getByRole('button', { name: /approve/i }).tap();
+		// The bounding rectangle is drawn on the photo.
+		await expect(
+			page.locator('[data-testid="bounding-rect"]'),
+		).toBeVisible();
+		// The proposed length axis is drawn along the long side.
+		await expect(
+			page.locator('[data-testid="length-axis"]'),
+		).toBeVisible();
+	});
+
+	test('rotate control adjusts the axis', async ({ page }) => {
+		await page.goto('/');
+		await page.locator('input[type="file"]').setInputFiles(SLAB_FIXTURE);
+		await page.waitForTimeout(2200);
+		await page.getByRole('button', { name: /approve/i }).tap();
+		// The rotate control is present.
+		const rotate = page.getByRole('slider', { name: /rotate axis/i });
+		await expect(rotate).toBeVisible();
+		// Rotating changes the axis angle.
+		const before = await page
+			.locator('[data-testid="length-axis"]')
+			.getAttribute('data-angle');
+		await rotate.fill('90');
+		const after = await page
+			.locator('[data-testid="length-axis"]')
+			.getAttribute('data-angle');
+		expect(before).not.toBe(after);
+	});
+
+	test('approve the axis advances to Measure', async ({ page }) => {
+		await page.goto('/');
+		await page.locator('input[type="file"]').setInputFiles(SLAB_FIXTURE);
+		await page.waitForTimeout(2200);
+		// Approve the mask -> Length axis.
+		await page.getByRole('button', { name: /approve/i }).tap();
+		// Approve the axis -> Measure.
+		const approveAxis = page.getByRole('button', {
+			name: /approve axis/i,
+		});
+		await expect(approveAxis).toBeVisible();
+		await approveAxis.tap();
+		await expect(page.getByText(/measure/i)).toBeVisible();
+	});
+});
@@ -0,0 +1,109 @@
+import { test, expect, devices } from '@playwright/test';
+
+// UAT-3: Browser gate (hard stop) — e2e.
+// Spec (CAPTURE.md §Browsers):
+//   Phone: iOS Safari, Android Chrome.
+//   PC: Chrome, Edge, Firefox.
+//   Other clients get a hard stop.
+//
+// Acceptance: opening in an unsupported browser (e.g. Opera, Samsung
+// Internet) shows a hard-stop message, NOT the app.
+//
+// The app itself must not render (no <slot> content, no "Milestone 1
+// — Capture" text) in an unsupported browser; the hard-stop page lists
+// the spec browsers instead.
+
+const DESKTOP_CHROME_UA =
+  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36';
+const DESKTOP_OPERA_UA =
+  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 OPR/110.0.0.0';
+const DESKTOP_EDGE_UA =
+  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0';
+const DESKTOP_FIREFOX_UA =
+  'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0';
+const IOS_SAFARI_UA =
+  'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/605.1.15';
+const ANDROID_CHROME_UA =
+  'Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.6331.115 Mobile Safari/537.36';
+const SAMSUNG_INTERNET_UA =
+  'Mozilla/5.0 (Linux; Android 14; SM-S918B) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/24.0 Chrome/124.0.0.0 Mobile Safari/537.36';
+
+async function openApp(page, ua) {
+  await page.setExtraHTTPHeaders({ 'User-Agent': ua });
+  await page.goto('/');
+  // The gate runs on client hydration; wait a beat for the DOM to
+  // settle on whichever branch rendered.
+  await page.waitForTimeout(300);
+}
+
+// The app renders when the gate passes: the layout's <main> is present
+// and the capture UI (Add Photo heading) is inside it.
+async function expectApp(page) {
+  await expect(page.locator('main')).toBeVisible();
+  await expect(page.locator('main')).toContainText('Add Photo');
+  // No hard-stop page.
+  await expect(page.locator('.gate')).toHaveCount(0);
+}
+
+// The hard stop renders when the gate fails: the .gate box is present,
+// the app's <main> is NOT, and the spec browsers are listed.
+async function expectHardStop(page) {
+  await expect(page.locator('.gate h1')).toHaveText('Unsupported browser');
+  await expect(page.locator('main')).toHaveCount(0);
+  const gate = page.locator('.gate');
+  await expect(gate).toContainText('iOS Safari');
+  await expect(gate).toContainText('Android Chrome');
+  await expect(gate).toContainText('Chrome');
+  await expect(gate).toContainText('Edge');
+  await expect(gate).toContainText('Firefox');
+}
+
+test('UAT-3: app renders in desktop Chrome (supported)', async ({ page }) => {
+  await openApp(page, DESKTOP_CHROME_UA);
+  await expectApp(page);
+});
+
+test('UAT-3: app renders in desktop Edge (supported)', async ({ page }) => {
+  await openApp(page, DESKTOP_EDGE_UA);
+  await expectApp(page);
+});
+
+test('UAT-3: app renders in desktop Firefox (supported)', async ({ page }) => {
+  await openApp(page, DESKTOP_FIREFOX_UA);
+  await expectApp(page);
+});
+
+test('UAT-3: app renders in iOS Safari (supported)', async ({ page, context }) => {
+  await context.setExtraHTTPHeaders({ 'User-Agent': IOS_SAFARI_UA });
+  await page.goto('/');
+  await page.waitForTimeout(300);
+  await expectApp(page);
+});
+
+test('UAT-3: app renders in Android Chrome (supported)', async ({ page, context }) => {
+  await context.setExtraHTTPHeaders({ 'User-Agent': ANDROID_CHROME_UA });
+  await page.goto('/');
+  await page.waitForTimeout(300);
+  await expectApp(page);
+});
+
+test('UAT-3: hard stop in desktop Opera (unsupported)', async ({ page }) => {
+  await openApp(page, DESKTOP_OPERA_UA);
+  await expect(page.locator('.gate h1')).toHaveText('Unsupported browser');
+  // The app must NOT render.
+  await expect(page.locator('main')).toHaveCount(0);
+  // The hard-stop page lists the spec browsers.
+  await expect(page.locator('.gate')).toContainText('iOS Safari');
+  await expect(page.locator('.gate')).toContainText('Android Chrome');
+  await expect(page.locator('.gate')).toContainText('Chrome');
+  await expect(page.locator('.gate')).toContainText('Edge');
+  await expect(page.locator('.gate')).toContainText('Firefox');
+});
+
+test('UAT-3: hard stop in Samsung Internet (unsupported)', async ({ page, context }) => {
+  await context.setExtraHTTPHeaders({ 'User-Agent': SAMSUNG_INTERNET_UA });
+  await page.goto('/');
+  await page.waitForTimeout(300);
+  await expect(page.locator('.gate h1')).toHaveText('Unsupported browser');
+  await expect(page.locator('main')).toHaveCount(0);
+});
@@ -0,0 +1,93 @@
+import { test, expect } from '@playwright/test';
+
+// M1-3: Playwright tests for the Mask state (RED first — the live Mask UI
+// lands in M1-5; the pure state machine + geometry are unit-tested in
+// tests/unit/maskState.test.js).
+//
+// Spec ground truth (docs/CAPTURE.md):
+//   - "Approve is blocked when the mask has no slab pixels. User retakes."
+//   - "If the file is HEIC and the browser cannot decode it, show a one-tap
+//     notice to retake the photo as JPEG."
+//   - 2 knobs: sheet Auto/Green/Black, sensitivity 0–100 (slider + minus/plus).
+//     Edge offset and feather are NOT user-exposed in M1 (core params only).
+//   - Sensitivity slider updates immediately; overlay recomputes 2.0 s after
+//     the last change.
+
+const SLAB_FIXTURE = 'tests/fixtures/slab-green.jpg';
+const SHEET_ONLY_FIXTURE = 'tests/fixtures/sheet-only-green.jpg';
+const HEIC_FIXTURE = 'tests/fixtures/slab.heic';
+
+test.describe('Mask state (M1-5 live UI)', () => {
+	test('HEIC input that the browser cannot decode shows a one-tap retake notice', async ({ page }) => {
+		// 1. Land on Add photo.
+		await page.goto('/');
+		// 2. Provide an HEIC file the browser cannot decode.
+		const input = page.locator('input[type="file"]');
+		await input.setInputFiles(HEIC_FIXTURE);
+		// 3. The app must surface a one-tap 'retake as JPEG' notice — never a
+		//    silent crash, never a server-side decode.
+		const notice = page.getByRole('alert', { name: /retake/i });
+		await expect(notice).toBeVisible();
+		await expect(notice).toHaveText(/retake as JPEG/i);
+		// 4. Tapping it returns to Add photo.
+		await notice.tap();
+		await expect(page.getByRole('button', { name: /add photo/i })).toBeVisible();
+	});
+
+	test('Approve is blocked while the mask has no slab pixels', async ({ page }) => {
+		// 1. Load a photo of the sheet only (no slab).
+		await page.goto('/');
+		const input = page.locator('input[type="file"]');
+		await input.setInputFiles(SHEET_ONLY_FIXTURE);
+		// 2. The Mask state opens with the overlay visible.
+		await expect(page.getByText(/mask/i)).toBeVisible();
+		// 3. Approve must be disabled — the mask has no slab pixels.
+		const approve = page.getByRole('button', { name: /approve/i });
+		await expect(approve).toBeDisabled();
+		// 4. Retake and load a photo with a real slab -> approve enables.
+		await page.getByRole('button', { name: /retake/i }).tap();
+		await page.locator('input[type="file"]').setInputFiles(SLAB_FIXTURE);
+		await expect(approve).toBeEnabled();
+	});
+
+	test('keys the green sheet and shows the 2 spec knobs', async ({ page }) => {
+		await page.goto('/');
+		await page.locator('input[type="file"]').setInputFiles(SLAB_FIXTURE);
+		// Sheet control with Auto/Green/Black.
+		const sheet = page.getByRole('radiogroup', { name: /sheet/i });
+		await expect(sheet.getByRole('radio', { name: /auto/i })).toBeChecked();
+		await expect(sheet.getByRole('radio', { name: /green/i })).toBeVisible();
+		await expect(sheet.getByRole('radio', { name: /black/i })).toBeVisible();
+		// Sensitivity slider 0–100 with minus/plus.
+		const slider = page.getByRole('slider', { name: /sensitivity/i });
+		await expect(slider).toBeVisible();
+		await expect(slider).toHaveAttribute('min', '0');
+		await expect(slider).toHaveAttribute('max', '100');
+		await expect(page.getByRole('button', { name: /decrease sensitivity/i })).toBeVisible();
+		await expect(page.getByRole('button', { name: /increase sensitivity/i })).toBeVisible();
+		// Edge offset and feather are NOT in the spec — they must not be
+		// user-exposed in the Mask UI.
+		await expect(page.getByRole('slider', { name: /edge offset/i })).not.toBeVisible();
+		await expect(page.getByRole('slider', { name: /feather/i })).not.toBeVisible();
+		// Overlay visible (photo with checkerboard on removed px).
+		await expect(page.locator('[data-testid="mask-overlay"]')).toBeVisible();
+	});
+
+	test('sensitivity slider updates the control immediately', async ({ page }) => {
+		await page.goto('/');
+		await page.locator('input[type="file"]').setInputFiles(SLAB_FIXTURE);
+		const slider = page.getByRole('slider', { name: /sensitivity/i });
+		await slider.fill('80');
+		// The control value is reflected immediately, not after the 2 s debounce.
+		await expect(slider).toHaveValue('80');
+	});
+
+	test('approve advances to Length axis after a non-empty mask', async ({ page }) => {
+		await page.goto('/');
+		await page.locator('input[type="file"]').setInputFiles(SLAB_FIXTURE);
+		// Let the initial recompute land so stats are non-empty.
+		await page.waitForTimeout(2200);
+		await page.getByRole('button', { name: /approve/i }).tap();
+		await expect(page.getByText(/length axis/i)).toBeVisible();
+	});
+});
@@ -1,135 +0,0 @@
-import { test, expect, type Page } from '@playwright/test';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import fs from 'node:fs';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const FIXTURES = path.resolve(__dirname, '../fixtures/set1-48x2');
-const ARTIFACTS = path.resolve(__dirname, 'artifacts');
-const FACE_A = path.join(FIXTURES, 'face-a.jpeg');
-const FACE_B = path.join(FIXTURES, 'face-b.jpeg');
-
-const shot = async (page: Page, name: string) => {
-  fs.mkdirSync(ARTIFACTS, { recursive: true });
-  await page.screenshot({
-    path: path.join(ARTIFACTS, name),
-    fullPage: true,
-  });
-};
-
-/** Discard any device draft so we always start on Batch. */
-const ensureFreshBatch = async (page: Page) => {
-  await page.goto('/');
-  // resumeProbe is async onMount — wait for either Resume or Batch.
-  const resumeHeading = page.getByRole('heading', { name: /resume/i });
-  const batchHeading = page.getByRole('heading', { name: 'Batch photos' });
-  await expect(resumeHeading.or(batchHeading)).toBeVisible({ timeout: 15_000 });
-  if (await resumeHeading.isVisible().catch(() => false)) {
-    await page.getByRole('button', { name: /start fresh/i }).click();
-  }
-  await expect(batchHeading).toBeVisible();
-};
-
-/**
- * Black-sheet fixtures: Auto may work, but UAT note says prefer Black + sensitivity
- * tweaks. Do not invent inference — only UI sheet/sensitivity controls.
- */
-const prepareMaskForApprove = async (page: Page) => {
-  await expect(page.getByRole('heading', { name: 'Mask' })).toBeVisible();
-  // Sheet change recomputes immediately (session.setSheet → runPass).
-  await page.getByRole('button', { name: 'Black', exact: true }).click();
-
-  const approve = page.getByRole('button', { name: 'Approve mask' });
-  // First overlay after decode is debounced 2s; Black pass is immediate but
-  // 4K fixtures still need decode + worker time.
-  try {
-    await expect(approve).toBeEnabled({ timeout: 45_000 });
-    return;
-  } catch {
-    /* try sensitivity ladder */
-  }
-
-  // Higher sensitivity widens black sheet match; if still empty, try lower.
-  for (const target of [60, 70, 40, 30, 80]) {
-    const slider = page.locator('input[type="range"]');
-    await slider.fill(String(target));
-    // Sensitivity is debounced 2s — wait past debounce + worker.
-    await page.waitForTimeout(2800);
-    if (await approve.isEnabled()) return;
-  }
-
-  await expect(approve, 'Mask approve stayed disabled after Black + sensitivity tweaks').toBeEnabled({
-    timeout: 15_000,
-  });
-};
-
-test.describe('M2 #65 Photos-ready e2e (set1-48x2)', () => {
-  test('batch → pick → mask → axis → measure → photos ready + screenshots', async ({ page }) => {
-    test.setTimeout(180_000);
-    expect(fs.existsSync(FACE_A), 'fixture face-a').toBeTruthy();
-    expect(fs.existsSync(FACE_B), 'fixture face-b').toBeTruthy();
-
-    await ensureFreshBatch(page);
-
-    // Gallery multi-input (not the capture=environment camera input).
-    const gallery = page.locator('input[type="file"][multiple]');
-    await gallery.setInputFiles([FACE_A, FACE_B]);
-    await expect(page.getByAltText('Batch photo 1')).toBeVisible({ timeout: 30_000 });
-    await expect(page.getByAltText('Batch photo 2')).toBeVisible();
-    await shot(page, '01-batch.png');
-
-    await page.getByRole('button', { name: 'Continue' }).click();
-    await expect(page.getByRole('heading', { name: 'Pick calibration photo' })).toBeVisible();
-    await shot(page, '02-pick-calibration.png');
-
-    await page.getByRole('button', { name: 'Use photo 1 as calibration' }).click();
-    await prepareMaskForApprove(page);
-    await shot(page, '03-mask.png');
-    await page.getByRole('button', { name: 'Approve mask' }).click();
-
-    await expect(page.getByRole('heading', { name: 'Length axis' })).toBeVisible();
-    await shot(page, '04-axis.png');
-    await page.getByRole('button', { name: 'Approve axis' }).click();
-
-    await expect(page.getByRole('heading', { name: 'Measure' })).toBeVisible();
-    await page.getByLabel('Length L').fill('48');
-    await page.getByLabel('Thickness').fill('2');
-    // blur/change commits eighths into session before Calculate.
-    await page.getByLabel('Length L').blur();
-    await page.getByLabel('Thickness').blur();
-    await shot(page, '05-measure.png');
-
-    const calc = page.getByRole('button', { name: 'Calculate' });
-    await expect(calc).toBeEnabled();
-    await calc.click();
-
-    // Calculate encodes calibration PNG + overlay + sibling batch apply.
-    await expect(page.getByRole('heading', { name: 'Photos ready' })).toBeVisible({
-      timeout: 120_000,
-    });
-    await expect(page.getByLabel('Photos ready')).toBeVisible();
-    await expect(page.getByText('Clean calibration')).toBeVisible();
-    await expect(page.getByText('Dimension overlay')).toBeVisible();
-    // Sibling face-b should appear as Batch photo 2 (capture order).
-    await expect(page.getByText(/Batch photo 2|Photo 2 failed/)).toBeVisible();
-
-    await shot(page, '06-photos-ready.png');
-
-    // Write a short run log for parent AI visual review (not a substitute for eyes).
-    const logPath = path.join(ARTIFACTS, 'run-log.txt');
-    const shots = ['01-batch.png', '02-pick-calibration.png', '03-mask.png', '04-axis.png', '05-measure.png', '06-photos-ready.png'];
-    const lines = [
-      `M2 #65 Playwright e2e — set1-48x2 (L=48, thickness=2)`,
-      `baseURL: ${page.url().split('/').slice(0, 3).join('/')}`,
-      `finished: ${new Date().toISOString()}`,
-      `artifacts:`,
-      ...shots.map((s) => {
-        const p = path.join(ARTIFACTS, s);
-        const st = fs.existsSync(p) ? fs.statSync(p) : null;
-        return `  - ${s} (${st ? `${st.size} bytes` : 'MISSING'})`;
-      }),
-      `assertions: Photos ready heading; Clean calibration; Dimension overlay; batch sibling slot`,
-    ];
-    fs.writeFileSync(logPath, lines.join('\n') + '\n', 'utf8');
-  });
-});
@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+
+const SLAB_FIXTURE = 'tests/fixtures/slab-green.jpg';
+
+// E2E smoke: the app serves and the health route responds.
+test('M1-1 harness smoke: app serves + health ok', async ({ page, request }) => {
+	await page.goto('/');
+	await expect(page).toHaveTitle(/SlabUploader/);
+	const res = await request.get('/api/health');
+	expect(res.ok()).toBeTruthy();
+	const body = await res.json();
+	expect(body.ok).toBe(true);
+});
+
+// Regression: the preview canvas must fit the full photo within the
+// viewport without cropping. Spec: "Preview fits the device width.
+// Height is capped so Mask and Measure controls stay on screen."
+test('preview canvas fits full photo without cropping', async ({ page }) => {
+	await page.goto('/');
+	await page.locator('input[type="file"]').setInputFiles(SLAB_FIXTURE);
+	await page.waitForTimeout(2500); // mask recompute
+
+	const canvas = page.locator('canvas.preview');
+	await expect(canvas).toBeVisible();
+
+	// Get the canvas's rendered (CSS) size and its intrinsic (pixel) size.
+	const box = await canvas.boundingBox();
+	const intrinsic = await canvas.evaluate((c) => ({ w: c.width, h: c.height }));
+
+	// The rendered size must fit within the viewport.
+	const vp = page.viewportSize();
+	expect(box.width).toBeLessThanOrEqual(vp.width);
+	expect(box.height).toBeLessThanOrEqual(vp.height * 0.55); // 50vh cap + tolerance
+
+	// Aspect ratio must be preserved (no distortion).
+	const renderedRatio = box.width / box.height;
+	const intrinsicRatio = intrinsic.w / intrinsic.h;
+	expect(renderedRatio).toBeCloseTo(intrinsicRatio, 1);
+
+	// The canvas must not be clipped by its container.
+	const wrap = page.locator('.preview-wrap');
+	const wrapBox = await wrap.boundingBox();
+	expect(box.width).toBeLessThanOrEqual(wrapBox.width + 1);
+	expect(box.height).toBeLessThanOrEqual(wrapBox.height + 1);
+});
@@ -1,16 +0,0 @@
-# Test photo fixtures
-
-Matched sets from Ty for Milestone 2 Photos (Playwright + calibration). Black sheet.
-
-## set1-48x2 — L = 48 in, thickness = 2 in
-Curly / fiddleback bookmatch pair.
- `face-a.jpeg`
- `face-b.jpeg`
-
-## set2-31x2p5 — L = 31 in, thickness = 2.5 in
-Shorter organic / burl pair.
- `face-a.jpeg`
- `face-b.jpeg`
-
-## m1-dji (optional M1 UAT sample)
- `162332.JPG` — live-edge on black; historically used on ubudual M1 UAT.
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ty	8749b07611	Fix preview cropping: canvas fits within viewport, preserves aspect ratio .preview was width:100% inside max-height:50vh container — tall photos were clipped. Now: max-width:100%, max-height:50vh, width/height auto, object-fit:contain, flex-centered in the wrap. Added e2e regression test: loads a photo, verifies the canvas bounding box fits the viewport, preserves aspect ratio, and is not clipped by the container.	2026-09-14 11:51:44 -07:00
Ty	2d5ff95441	Fix SSR browser gate: use browser from $app/environment The gate check ran during SSR where navigator is undefined, rendering the 'Unsupported browser' div into the initial HTML. Now gated on browser (client-only) so SSR renders the app and the gate evaluates in the browser.	2026-09-14 11:49:01 -07:00
Ty	2bc7eecd7c	UAT-8b: axis UI — mask carry-forward, remove axis line, slider 1. drawOverlay: checkerboard mask overlay now drawn in axis + measure states (mask carry-forward — slab is isolated) 2. Removed the separate red axis line + arrowhead — the rect's long side IS the axis 3. Rect rotates: uses axisState.rect.angle (from UAT-8a) 4. Replace three rotate buttons with slider (-180..180, step 1) + minus/plus nudge buttons (same pattern as Sensitivity slider) 587 lines, 109/109 tests, build OK.	2026-09-14 11:45:12 -07:00
Ty	f00c4a7460	UAT-8a: rotate the rect, not a separate axis vector reduceAxisState 'rotate' now changes state.rect.angle and re-derives state.axis via axisFromRect(newRect). The rectangle rotates as a whole; the axis for Measure is derived from the rotated rect's long side. 2 new regression tests: rect.angle changes on rotate, axis is re-derived from rotated rect. 109/109 tests green.	2026-09-14 11:23:00 -07:00
Ty	0d06e6f7b7	UAT-3: browser gate (hard stop) + iPad Safari fix Spec CAPTURE.md §Browsers: Phone iOS Safari / Android Chrome, PC Chrome / Edge / Firefox, others hard stop. - browserGate.js: UA detection + allowlist (pure, DOM-free) - +layout.svelte: renders hard-stop panel when unsupported - iPadOS 13+ reports as Macintosh — added Safari rule (Version/ + Safari/ without Chrome/) so iPad Safari is not blocked - 27 unit tests incl. iPad Safari regression - 107/107 full suite green	2026-09-14 07:44:49 -07:00
Ty	a83c9239ff	UAT-7: fix auto key selection — prefer key that removes more background Root cause: auto selected the key with MORE kept pixels, which always picked the green key (it keeps 100% of dark non-green backgrounds). The black key correctly isolates the slab on dark surfaces. Fix: - auto now prefers the key with FEWER kept pixels (removed more bg) when both are non-empty - green key has a greenness pre-filter: non-greenish pixels pass through (kept) so the black key can handle them, instead of the green key keeping 100% of a dark surface - added 3 regression tests: dark-bg auto selection, green-sheet auto selection, green-key passthrough on non-green surfaces 106/106 unit tests green.	2026-09-14 07:41:51 -07:00
Ty	88b9c47200	UAT-4: remove non-spec controls (edge offset, feather) from Mask UI Spec CAPTURE.md §Mask lists exactly two controls: Sheet and Sensitivity. Edge offset and feather nudge buttons were extra. Removed from the UI; core params (edgeOffset, feather) remain in maskState.js, still unit-tested.	2026-09-14 07:24:42 -07:00
Ty	eca306e869	M1-6: record UAT host in INVENTORY.md	2026-09-14 07:08:41 -07:00
Ty	509e2e82a3	Add M1-6 deploy script	2026-09-14 02:14:08 -07:00
Ty	25b1650a8a	M1-5: clean up debug artifacts	2026-09-14 02:12:53 -07:00
Ty	b124450d0c	M1-5: Measure + PNG + full capture UI (TDD) - measure.js: sampleWidthsPx scanline sampler - inventory.js: prepareInventoryMetadata - +page.svelte: full 4-state capture flow (Add photo, Mask, Axis, Measure) - Canvas overlay: checkerboard mask, bounding rect, axis line - Inventory PNG: 3:4 portrait, slab centered 80% fill, alpha - 77/77 unit tests green	2026-09-14 02:11:28 -07:00
Ty	507865e30b	Add e2e fixtures: slab-green.jpg, sheet-only-green.jpg, slab.heic	2026-09-14 00:43:58 -07:00
Ty	0284a2211a	M1-4: Length axis (TDD) - Add axis.js: length axis rectangle state, 28 tests - 71/71 unit tests green	2026-09-14 00:32:42 -07:00
Ty	7e2a1845cf	M1-3: Capture + Mask state (TDD) - Add maskState.js: sheet Auto/Green/Black, sensitivity, edge offset, feather - Overlay = slab photo + checkerboard on removed px - Debounced recompute 2.0s after last sensitivity change - Approve blocked when maskStats empty - HEIC shows retake notice - Refactored mask.test.js + extended e2e mask.spec.js - 43/43 unit tests green	2026-09-14 00:02:36 -07:00
Ty	dd011207a0	feat(m1-2,m1-3): deterministic core + mask keying (TDD, green) Card 2 (deterministic core) + Card 3 (capture+mask geometry): - src/lib/core/math.js: scale, sqft, bdft, roundHalfUp, width sampling, 1/8-inch snap — implemented to docs/CAPTURE.md identities. - src/lib/core/mask.js: keySheet green/black/auto chroma keys + maskStats. - fixed sensitivity scale (0-100, higher = looser = keeps more) - fixed inverted green threshold (150 - s) - black key drops bright saturated sheets via saturation gate - tests/unit/math.test.js: corrected 3 wrong expected values to match the spec (sqft 21x12in = 1.75 not 17.5; bdft 3.06; sample avg 11.25). - tests/e2e/mask.spec.js: skeleton, skipped pending M1-5 live UI. Full unit suite green: 24/24. E2e collects clean.	2026-09-13 23:17:36 -07:00
Ty	93666320ef	feat(m1-1): scaffold SvelteKit + Dockerfile + TDD test harness - SvelteKit (JS, adapter-node) home page + /api/health route - frontend/Dockerfile multi-stage build->serve (slabuploader-m1:local, 349MB) - Test harness: Vitest unit + Playwright e2e; smoke tests RED->GREEN verified - Build, image build, and image serve all verified	2026-09-13 22:55:34 -07:00
Ty	ba8e5f72f6	docs(m1): calibrated worker delegation policy (prompt framing, verify-before-land)	2026-09-13 22:48:48 -07:00
Ty	92d1a7ec5e	docs(m1): plan of record — TDD card breakdown, UAT deployment, fixtures, worker dispatch - docs/M1-POR.md: scope, TDD method, 6-card breakdown, deployment POR, test plan, real-slab fixtures, dev/QA worker dispatch (.202:8081 text, .202:8082 vision; one task per endpoint) - docs/CAPTURE.md: input photo (JPEG + HEIC fallback), 200KB soft goal - deploy/README.md: Milestone 1 UAT deployment POR (one container, LAN URL) - tests/fixtures/: 3 black-sheet slab photos + calibration records (152422 28x2.25 irregular, 155818 21x1.75, 155754 21x1.75)	2026-09-13 22:37:19 -07:00
				`@@ -0,0 +1 @@`
				`// See https://svelte.dev/docs/kit/environment-variables for more information`
				`@@ -0,0 +1 @@`
				`export { default as component } from "../../../../frontend/node_modules/@sveltejs/kit/src/runtime/components/svelte-5/layout.svelte";`
				`@@ -0,0 +1 @@`
				export default ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n";