feat: add zoomable image canvas with detection overlays

Load OpenCV in the browser via a script tag: the bundler's CJS interop
copies the module's then() onto the import namespace, which never settles.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/App.svelte

@@ -1,3 +1,64 @@
-<script lang="ts"></script>
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import ImageCanvas from './components/ImageCanvas.svelte';
+  import { AppState } from './lib/app-state.svelte';
+  import { loadOpenCV } from './lib/opencv-loader';
 
-<h1>Scrap Tracer</h1>
+  const app = new AppState();
+
+  onMount(() => {
+    loadOpenCV().then(
+      ({ cv }) => app.setCv(cv),
+      () => (app.cvError = 'Could not load image processing (OpenCV).'),
+    );
+  });
+
+  function ondrop(e: DragEvent) {
+    e.preventDefault();
+    const file = e.dataTransfer?.files[0];
+    if (file) app.loadFile(file);
+  }
+</script>
+
+<div class="layout">
+  <aside>
+    <input type="file" accept="image/*" onchange={(e) => {
+      const file = e.currentTarget.files?.[0];
+      if (file) app.loadFile(file);
+    }} />
+  </aside>
+  <main ondragover={(e) => e.preventDefault()} {ondrop}>
+    {#if app.image}
+      <ImageCanvas {app} />
+    {:else}
+      <p class="empty">Drop a photo of a scrap piece here, or use “Load photo”.</p>
+    {/if}
+  </main>
+</div>
+
+<style>
+  :global(body) {
+    margin: 0;
+    font-family: system-ui, sans-serif;
+    color: #222;
+  }
+  .layout {
+    display: grid;
+    grid-template-columns: 320px 1fr;
+    height: 100vh;
+  }
+  aside {
+    overflow-y: auto;
+    border-right: 1px solid #ddd;
+    padding: 16px;
+  }
+  main {
+    position: relative;
+    background: #2b2b2b;
+  }
+  .empty {
+    color: #bbb;
+    text-align: center;
+    margin-top: 40vh;
+  }
+</style>