feat(photos): S3 multipart BLOB storage + original/processed GET + 410 after purge + attach UI

- backend/photos.py: POST /slabs/{id}/photos (multipart original+processed ->
  slab_photos BLOBs, re-upload replaces), GET original/processed (image/png, 410
  once purged), GET list. Cites CAPTURE-95/105/130, PUBLISH-40.
- frontend: create/photos/PhotoAttach.svelte (slab id, original/processed files,
  calibration flag, lineup) + dev toggle.
- tests: 5 photos tests (upload+get both variants, 410 after purge, 404 slab,
  reupload replaces, list).

Verified: pytest 36 passed; gates exit 0; npm build ok; live QA upload->200,
get original/processed->200, purge->410.

frontend/src/App.svelte

@@ -11,6 +11,7 @@ import AxisPanel from './capture/AxisPanel.svelte';
 import MeasurePanel from './capture/MeasurePanel.svelte';
 import Settings from './create/settings/Settings.svelte';
 import SlabList from './create/slabs/SlabList.svelte';
+import PhotoAttach from './create/photos/PhotoAttach.svelte';
 
   const gate = typeof window !== 'undefined' ? supported() : 'window unavailable';
   const session: CaptureSession = createCaptureSession();
@@ -20,6 +21,7 @@ import SlabList from './create/slabs/SlabList.svelte';
   let pngUrl: string | null = null;
   let showSettings = false;
   let showSlabs = false;
+  let showPhotos = false;
 
   const unsubCap = session.capture.subscribe((c) => {
     cap = c;
@@ -95,6 +97,7 @@ import SlabList from './create/slabs/SlabList.svelte';
     <div style="margin-top:1rem;display:flex;gap:8px">
       <button on:click={() => (showSettings = !showSettings)}>Settings (dev)</button>
       <button on:click={() => (showSlabs = !showSlabs)}>Slabs (dev)</button>
+      <button on:click={() => (showPhotos = !showPhotos)}>Photos (dev)</button>
     </div>
     {#if showSettings}
       <Settings />
@@ -102,6 +105,9 @@ import SlabList from './create/slabs/SlabList.svelte';
     {#if showSlabs}
       <SlabList />
     {/if}
+    {#if showPhotos}
+      <PhotoAttach />
+    {/if}
   </main>
 {/if}
 

frontend/src/create/photos/PhotoAttach.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  let slabId = '';
+  let photos: {
+    id: string;
+    seq: number;
+    is_calibration: number;
+    has_original: number;
+    has_processed: number;
+  }[] = [];
+  let message = '';
+  let busy = false;
+
+  let originalFile: File | null = null;
+  let processedFile: File | null = null;
+  let isCalibration = false;
+  let photoId = '';
+
+  const imgBase = (pid: string, kind: 'original' | 'processed') =>
+    `/api/v1/slabs/${encodeURIComponent(slabId)}/photos/${encodeURIComponent(pid)}/${kind}`;
+
+  async function refresh() {
+    if (!slabId) return;
+    try {
+      const res = await fetch(`/api/v1/slabs/${encodeURIComponent(slabId)}/photos`);
+      photos = res.ok ? await res.json() : [];
+    } catch {
+      photos = [];
+    }
+  }
+
+  async function attach() {
+    if (!slabId || !originalFile) {
+      message = 'Need a slab id and an original file.';
+      return;
+    }
+    busy = true;
+    message = '';
+    const form = new FormData();
+    form.append('photo_id', photoId || crypto.randomUUID());
+    form.append('is_calibration', isCalibration ? '1' : '0');
+    form.append('original', originalFile, originalFile.name);
+    if (processedFile) form.append('processed', processedFile, processedFile.name);
+    try {
+      const res = await fetch(`/api/v1/slabs/${encodeURIComponent(slabId)}/photos`, {
+        method: 'POST',
+        body: form,
+      });
+      if (res.ok) {
+        message = 'Photo attached.';
+        originalFile = null;
+        processedFile = null;
+        photoId = '';
+        isCalibration = false;
+        await refresh();
+      } else {
+        const err = await res.json().catch(() => ({}));
+        message = err.error?.message || `attach failed (${res.status})`;
+      }
+    } catch {
+      message = 'network error';
+    }
+    busy = false;
+  }
+
+  onMount(() => {
+    void refresh();
+  });
+</script>
+
+<div class="photos">
+  <h2>Photo Attach</h2>
+  <div>
+    <label>Slab ID</label>
+    <input bind:value={slabId} placeholder="uuid" />
+  </div>
+  <div>
+    <label>Original (required)</label>
+    <input type="file" on:change={(e) => (originalFile = e.target.files?.[0] ?? null)} accept="image/*" />
+  </div>
+  <div>
+    <label>Processed (optional PNG)</label>
+    <input type="file" on:change={(e) => (processedFile = e.target.files?.[0] ?? null)} accept="image/png" />
+  </div>
+  <label class="chk">
+    <input type="checkbox" bind:checked={isCalibration} /> Calibration photo
+  </label>
+  <button on:click={attach} disabled={busy}>{busy ? 'Attaching…' : 'Attach photo'}</button>
+  {#if message}<p class="msg">{message}</p>{/if}
+
+  {#if photos.length}
+    <div class="lineup">
+      {#each photos as p (p.id)}
+        <figure>
+          <img src={imgBase(p.id, p.has_processed ? 'processed' : 'original')} alt="photo {p.seq}" />
+          <figcaption>#{p.seq}{p.is_calibration ? ' · cal' : ''}</figcaption>
+        </figure>
+      {/each}
+    </div>
+  {:else}
+    <p class="empty">No photos attached.</p>
+  {/if}
+</div>
+
+<style>
+  .photos { max-width: 560px; color: #eee; }
+  label { display: block; margin: 8px 0 4px; }
+  input { width: 100%; padding: 6px; }
+  .chk { display: flex; gap: 8px; align-items: center; }
+  button { margin-top: 12px; }
+  .lineup { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
+  figure { margin: 0; }
+  img { width: 96px; height: 96px; object-fit: cover; border: 1px solid #444; background: #222; }
+  figcaption { font-size: 0.7rem; color: #aaa; text-align: center; }
+  .empty { color: #888; }
+</style>