feat(capture): ship Milestone 1 browser capture app

Why Phone and PC need a single capture flow that ends at inventory PNG and board-foot numbers with no backend, inference, or Woo create. Scope Add frontend/ Vite+Svelte capture UI with Resume, Add photo, Mask, Length axis, and Measure. Mask runs in a worker with Auto/Green/Black and a 2.0s sensitivity debounce. Measure computes scale, widths, sqft, bdft, and a 3:4 alpha inventory PNG. Persist one device draft in IndexedDB. Serve the static build from frontend/Dockerfile via nginx (deploy/nginx-m1.conf). No FastAPI. Verification sudo docker build -f frontend/Dockerfile -t slabuploader-m1 . sudo docker run -d --name slabuploader-m1 -p 0.0.0.0:18080:80 slabuploader-m1 curl http://127.0.0.1:18080/ returns 200 Playwright: synthetic green-sheet photo through Calculate shows sqft/bdft
2026-09-14 07:53:39 +00:00
parent 3bae76cea3
commit d86fc93ed6
24 changed files with 2969 additions and 0 deletions
@@ -0,0 +1,94 @@
+<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 AddPhoto from './capture/AddPhoto.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: 'addPhoto' };
+  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;
+  });
+
+  const pick = (f: File) => void session.addPhoto(f);
+
+  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 === 'addPhoto'}
+      <AddPhoto onPicked={pick} />
+    {: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}
+        rotateAxis={session.rotateAxis}
+        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>