Add premade items

js/dressup.js

@@ -1,10 +1,11 @@
-import { loadPrincesses, loadClothes, blobToURL } from './store.js';
+import { loadPrincesses, loadClothes, blobToURL, savePrincessOutfit } from './store.js';
 import { getCategoryInfo, DRAG_DEAD_ZONE_PX, DOUBLE_TAP_MS } from './models.js';
+import { STICKERS } from './stickers.js';
 
 let princesses = [];
 let clothes = [];
 let currentIdx = 0;
-let placedItems = []; // { clothingId, x, y, scale, zIndex, url }
+let placedItems = []; // { clothingId, x, y, scale, rotation, zIndex, url, isSticker }
 let objectURLs = [];
 let clothesURLMap = {}; // id -> objectURL
 
@@ -12,14 +13,14 @@ let clothesURLMap = {}; // id -> objectURL
 let drag = null;
 let ghost = null;
 
-// Pinch-to-resize state
-let pinch = null; // { idx, startDist, startScale }
+// Pinch-to-resize + rotate state
+let pinch = null;
 
 // Double-tap tracking
 let lastPlacedTap = { idx: -1, time: 0 };
 
 // Track active pointers on placed items
-let activePointers = new Map(); // pointerId -> { x, y, origIdx }
+let activePointers = new Map();
 
 export async function initDressUp() {
   const screen = document.getElementById('dressup-screen');
@@ -49,6 +50,8 @@ export async function initDressUp() {
     return;
   }
 
+  const hasItems = clothes.length > 0 || STICKERS.length > 0;
+
   screen.innerHTML = `
     <div class="dressup-layout">
       <h1 id="princess-name" class="princess-title"></h1>
@@ -66,12 +69,18 @@ export async function initDressUp() {
         <button id="next-btn" class="switch-btn">\u25B6</button>
       </div>
 
+      <div class="tray-tabs" id="tray-tabs">
+        ${clothes.length > 0 ? '<button class="tray-tab active" data-tab="clothes">\u{1F457} Clothes</button>' : ''}
+        <button class="tray-tab ${clothes.length === 0 ? 'active' : ''}" data-tab="stickers">\u2728 Stickers</button>
+      </div>
+
       <div id="clothing-tray" class="clothing-tray">
-        ${clothes.length === 0 ? '<p class="tray-empty">Draw some clothes and add photos!</p>' : ''}
+        ${!hasItems ? '<p class="tray-empty">Draw some clothes and add photos!</p>' : ''}
       </div>
 
       <div class="bottom-bar">
         <a href="#/manage" class="pill">My Collection</a>
+        <button id="screenshot-btn" class="pill">\u{1F4F7} Save</button>
         <a href="#/upload" class="big-button">Add Photo</a>
       </div>
     </div>
@@ -79,10 +88,26 @@ export async function initDressUp() {
 
   currentIdx = 0;
   renderPrincess();
-  renderTray();
+  renderTray(clothes.length > 0 ? 'clothes' : 'stickers');
   bindEvents();
 }
 
+// ---- Auto-save ----
+
+let saveTimer = null;
+
+function autoSave() {
+  if (saveTimer) clearTimeout(saveTimer);
+  saveTimer = setTimeout(() => {
+    const p = princesses[currentIdx];
+    if (!p) return;
+    const outfit = placedItems.map(({ clothingId, x, y, scale, rotation, zIndex, isSticker }) =>
+      ({ clothingId, x, y, scale, rotation: rotation || 0, zIndex, isSticker: isSticker || false })
+    );
+    savePrincessOutfit(p.id, outfit);
+  }, 300);
+}
+
 // ---- Rendering ----
 
 function renderPrincess() {
@@ -99,25 +124,61 @@ function renderPrincess() {
   document.getElementById('prev-btn').disabled = currentIdx === 0;
   document.getElementById('next-btn').disabled = currentIdx === princesses.length - 1;
 
+  // Restore saved outfit
   placedItems = [];
+  if (p.outfit && Array.isArray(p.outfit)) {
+    for (const item of p.outfit) {
+      let url;
+      if (item.isSticker) {
+        const sticker = STICKERS.find(s => s.id === item.clothingId);
+        url = sticker ? sticker.url : null;
+      } else {
+        url = clothesURLMap[item.clothingId];
+      }
+      if (url) {
+        placedItems.push({ ...item, url, rotation: item.rotation || 0 });
+      }
+    }
+  }
   renderPlaced();
 }
 
-function renderTray() {
+let currentTab = 'clothes';
+
+function renderTray(tab) {
+  currentTab = tab || currentTab;
   const tray = document.getElementById('clothing-tray');
-  if (clothes.length === 0) return;
-
-  tray.innerHTML = clothes.map(c => {
-    const url = clothesURLMap[c.id];
-    const catInfo = getCategoryInfo(c.category);
-    return `
-      <div class="tray-item" data-id="${c.id}"
-           data-scale="${c.scale}" data-z="${c.zIndex}">
-        <img src="${url}" class="tray-thumb" alt="${c.name}" draggable="false"/>
-        <span class="tray-label">${catInfo ? catInfo.emoji : ''} ${c.name}</span>
+
+  // Update tab styling
+  document.querySelectorAll('.tray-tab').forEach(t => {
+    t.classList.toggle('active', t.dataset.tab === currentTab);
+  });
+
+  if (currentTab === 'stickers') {
+    tray.innerHTML = STICKERS.map(s => `
+      <div class="tray-item tray-sticker" data-sticker-id="${s.id}"
+           data-scale="${s.scale}" data-z="${s.zIndex}">
+        <img src="${s.url}" class="tray-thumb" alt="${s.name}" draggable="false"/>
+        <span class="tray-label">${s.name}</span>
       </div>
-    `;
-  }).join('');
+    `).join('');
+  } else {
+    if (clothes.length === 0) {
+      tray.innerHTML = '<p class="tray-empty">Draw some clothes and add photos!</p>';
+      return;
+    }
+    tray.innerHTML = clothes.map(c => {
+      const url = clothesURLMap[c.id];
+      const catInfo = getCategoryInfo(c.category);
+      return `
+        <div class="tray-item" data-id="${c.id}"
+             data-scale="${c.scale}" data-z="${c.zIndex}">
+          <img src="${url}" class="tray-thumb" alt="${c.name}" draggable="false"/>
+          <span class="tray-label">${catInfo ? catInfo.emoji : ''} ${c.name}</span>
+        </div>
+      `;
+    }).join('');
+  }
 }
 
 function renderPlaced() {
@@ -134,15 +195,13 @@ function renderPlaced() {
            left:${item.x * 100}%;
            top:${item.y * 100}%;
            width:${item.scale * 100}%;
-           transform:translate(-50%,-50%);
+           transform:translate(-50%,-50%) rotate(${item.rotation || 0}deg);
            z-index:${item.zIndex};
          "
          alt=""/>
   `).join('');
 }
 
-// Update a single placed item's style without re-rendering the whole layer.
-// Avoids flicker during pinch.
 function updatePlacedStyle(origIdx) {
   const el = document.querySelector(`.placed-item[data-orig-idx="${origIdx}"]`);
   if (!el) return;
@@ -151,6 +210,7 @@ function updatePlacedStyle(origIdx) {
   el.style.left = `${item.x * 100}%`;
   el.style.top = `${item.y * 100}%`;
   el.style.width = `${item.scale * 100}%`;
+  el.style.transform = `translate(-50%,-50%) rotate(${item.rotation || 0}deg)`;
 }
 
 // ---- Ghost (for tray drag) ----
@@ -180,8 +240,92 @@ function pointerDist(a, b) {
   return Math.sqrt(dx * dx + dy * dy);
 }
 
-function pointerMid(a, b) {
-  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+function pointerAngle(a, b) {
+  return Math.atan2(b.y - a.y, b.x - a.x) * (180 / Math.PI);
+}
+
+// ---- Screenshot ----
+
+async function takeScreenshot() {
+  const canvasEl = document.getElementById('princess-canvas');
+  const princessImg = document.getElementById('princess-img');
+  const rect = canvasEl.getBoundingClientRect();
+
+  // Use a reasonable resolution
+  const w = Math.min(rect.width * 2, 1024);
+  const scale = w / rect.width;
+  const h = rect.height * scale;
+
+  const canvas = new OffscreenCanvas(w, h);
+  const ctx = canvas.getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = '#fff8f0';
+  ctx.fillRect(0, 0, w, h);
+
+  // Draw princess
+  const pImg = await loadImage(princessImg.src);
+  const pAspect = pImg.width / pImg.height;
+  const canvasAspect = w / h;
+  let pw, ph, px, py;
+  if (pAspect > canvasAspect) {
+    pw = w; ph = w / pAspect; px = 0; py = (h - ph) / 2;
+  } else {
+    ph = h; pw = h * pAspect; px = (w - pw) / 2; py = 0;
+  }
+  ctx.drawImage(pImg, px, py, pw, ph);
+
+  // Draw placed items in z-order
+  const sorted = [...placedItems]
+    .map((item, i) => ({ ...item, i }))
+    .sort((a, b) => a.zIndex - b.zIndex);
+
+  for (const item of sorted) {
+    const img = await loadImage(item.url);
+    const itemW = item.scale * w;
+    const itemH = itemW * (img.height / img.width);
+    const ix = item.x * w - itemW / 2;
+    const iy = item.y * h - itemH / 2;
+
+    ctx.save();
+    ctx.translate(item.x * w, item.y * h);
+    ctx.rotate((item.rotation || 0) * Math.PI / 180);
+    ctx.drawImage(img, -itemW / 2, -itemH / 2, itemW, itemH);
+    ctx.restore();
+  }
+
+  const blob = await canvas.convertToBlob({ type: 'image/png' });
+
+  // Try native share, fall back to download
+  if (navigator.share && navigator.canShare) {
+    const file = new File([blob], 'princess.png', { type: 'image/png' });
+    try {
+      await navigator.share({ files: [file], title: 'My Princess' });
+      return;
+    } catch (_) {}
+  }
+
+  // Fallback: download
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'princess.png';
+  a.click();
+  URL.revokeObjectURL(url);
+
+  // Flash feedback
+  canvasEl.classList.add('screenshot-flash');
+  setTimeout(() => canvasEl.classList.remove('screenshot-flash'), 400);
+}
+
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
 }
 
 // ---- Events ----
@@ -194,6 +338,12 @@ function bindEvents() {
     if (currentIdx < princesses.length - 1) { currentIdx++; renderPrincess(); }
   });
 
+  // Tray tabs
+  document.getElementById('tray-tabs').addEventListener('click', (e) => {
+    const tab = e.target.closest('.tray-tab');
+    if (tab) renderTray(tab.dataset.tab);
+  });
+
   const tray = document.getElementById('clothing-tray');
   tray.addEventListener('pointerdown', onTrayPointerDown, { passive: false });
 
@@ -203,6 +353,9 @@ function bindEvents() {
   window.addEventListener('pointermove', onPointerMove, { passive: false });
   window.addEventListener('pointerup', onPointerUp);
   window.addEventListener('pointercancel', onPointerUp);
+
+  // Screenshot
+  document.getElementById('screenshot-btn').addEventListener('click', takeScreenshot);
 }
 
 // ---- Tray drag ----
@@ -212,19 +365,39 @@ function onTrayPointerDown(e) {
   if (!item) return;
   e.preventDefault();
 
-  drag = {
-    source: 'tray',
-    id: item.dataset.id,
-    url: clothesURLMap[item.dataset.id],
-    scale: parseFloat(item.dataset.scale),
-    zIndex: parseInt(item.dataset.z),
-    startX: e.clientX,
-    startY: e.clientY,
-    hasMoved: false,
-  };
+  const isSticker = item.classList.contains('tray-sticker');
+
+  if (isSticker) {
+    const stickerId = item.dataset.stickerId;
+    const sticker = STICKERS.find(s => s.id === stickerId);
+    if (!sticker) return;
+    drag = {
+      source: 'tray',
+      id: sticker.id,
+      url: sticker.url,
+      scale: sticker.scale,
+      zIndex: sticker.zIndex,
+      isSticker: true,
+      startX: e.clientX,
+      startY: e.clientY,
+      hasMoved: false,
+    };
+  } else {
+    drag = {
+      source: 'tray',
+      id: item.dataset.id,
+      url: clothesURLMap[item.dataset.id],
+      scale: parseFloat(item.dataset.scale),
+      zIndex: parseInt(item.dataset.z),
+      isSticker: false,
+      startX: e.clientX,
+      startY: e.clientY,
+      hasMoved: false,
+    };
+  }
 }
 
-// ---- Placed item: drag, pinch, double-tap ----
+// ---- Placed item: drag, pinch+rotate, double-tap ----
 
 function onPlacedPointerDown(e) {
   const img = e.target.closest('.placed-item');
@@ -235,19 +408,21 @@ function onPlacedPointerDown(e) {
   const ptr = { x: e.clientX, y: e.clientY, origIdx };
   activePointers.set(e.pointerId, ptr);
 
-  // Check if this is a second finger on the same item -> start pinch
+  // Second finger on same item -> start pinch+rotate
   const sameItem = [...activePointers.values()].filter(p => p.origIdx === origIdx);
   if (sameItem.length === 2 && !pinch) {
-    // Cancel any single-finger drag
     if (drag && drag.source === 'canvas') {
       drag = null;
       removeGhost();
     }
     const d = pointerDist(sameItem[0], sameItem[1]);
+    const a = pointerAngle(sameItem[0], sameItem[1]);
     pinch = {
       idx: origIdx,
       startDist: d,
       startScale: placedItems[origIdx].scale,
+      startAngle: a,
+      startRotation: placedItems[origIdx].rotation || 0,
       startMidX: (sameItem[0].x + sameItem[1].x) / 2,
       startMidY: (sameItem[0].y + sameItem[1].y) / 2,
       startItemX: placedItems[origIdx].x,
@@ -256,13 +431,14 @@ function onPlacedPointerDown(e) {
     return;
   }
 
-  // Single finger: check double-tap first
+  // Double-tap to remove
   const now = Date.now();
   if (lastPlacedTap.idx === origIdx && (now - lastPlacedTap.time) < DOUBLE_TAP_MS) {
     img.classList.add('poof');
     setTimeout(() => {
       placedItems.splice(origIdx, 1);
       renderPlaced();
+      autoSave();
     }, 300);
     lastPlacedTap = { idx: -1, time: 0 };
     activePointers.delete(e.pointerId);
@@ -270,7 +446,7 @@ function onPlacedPointerDown(e) {
   }
   lastPlacedTap = { idx: origIdx, time: now };
 
-  // Start single-finger drag
+  // Single-finger drag
   const item = placedItems[origIdx];
   if (!item) return;
 
@@ -279,7 +455,9 @@ function onPlacedPointerDown(e) {
     id: item.clothingId,
     url: item.url,
     scale: item.scale,
+    rotation: item.rotation || 0,
     zIndex: item.zIndex,
+    isSticker: item.isSticker || false,
     startX: e.clientX,
     startY: e.clientY,
     canvasIdx: origIdx,
@@ -288,27 +466,31 @@ function onPlacedPointerDown(e) {
 }
 
 function onPointerMove(e) {
-  // Update active pointer position
   if (activePointers.has(e.pointerId)) {
     const ptr = activePointers.get(e.pointerId);
     ptr.x = e.clientX;
     ptr.y = e.clientY;
   }
 
-  // Pinch-to-resize
+  // Pinch-to-resize + rotate
   if (pinch) {
     e.preventDefault();
     const sameItem = [...activePointers.values()].filter(p => p.origIdx === pinch.idx);
     if (sameItem.length >= 2) {
       const d = pointerDist(sameItem[0], sameItem[1]);
+      const a = pointerAngle(sameItem[0], sameItem[1]);
       const ratio = d / pinch.startDist;
-      const newScale = Math.max(0.1, Math.min(2.0, pinch.startScale * ratio));
+      const newScale = Math.max(0.05, Math.min(3.0, pinch.startScale * ratio));
       placedItems[pinch.idx].scale = newScale;
 
-      // Also move item with the midpoint
+      // Rotation
+      const angleDelta = a - pinch.startAngle;
+      placedItems[pinch.idx].rotation = pinch.startRotation + angleDelta;
+
+      // Move with midpoint
       const canvas = document.getElementById('princess-canvas');
       const rect = canvas.getBoundingClientRect();
-      const mid = pointerMid(sameItem[0], sameItem[1]);
+      const mid = { x: (sameItem[0].x + sameItem[1].x) / 2, y: (sameItem[0].y + sameItem[1].y) / 2 };
       const dx = mid.x - pinch.startMidX;
       const dy = mid.y - pinch.startMidY;
       placedItems[pinch.idx].x = pinch.startItemX + dx / rect.width;
@@ -334,7 +516,6 @@ function onPointerMove(e) {
       createGhost(drag.url);
       ghost.classList.add('lifting');
     } else if (drag.source === 'canvas') {
-      // Remove from placed and drag as ghost
       placedItems.splice(drag.canvasIdx, 1);
       renderPlaced();
       createGhost(drag.url);
@@ -348,11 +529,11 @@ function onPointerMove(e) {
 function onPointerUp(e) {
   activePointers.delete(e.pointerId);
 
-  // End pinch if we lost a finger
   if (pinch) {
     const sameItem = [...activePointers.values()].filter(p => p.origIdx === pinch.idx);
     if (sameItem.length < 2) {
       pinch = null;
+      autoSave();
     }
     return;
   }
@@ -360,17 +541,19 @@ function onPointerUp(e) {
   if (!drag) return;
 
   if (!drag.hasMoved) {
-    // Tap on tray -> place at center
     if (drag.source === 'tray') {
       placedItems.push({
         clothingId: drag.id,
         x: 0.5,
         y: 0.5,
         scale: drag.scale,
+        rotation: 0,
         zIndex: drag.zIndex,
         url: drag.url,
+        isSticker: drag.isSticker,
       });
       renderPlaced();
+      autoSave();
     }
     drag = null;
     return;
@@ -379,6 +562,7 @@ function onPointerUp(e) {
   // Drop
   const canvas = document.getElementById('princess-canvas');
   const rect = canvas.getBoundingClientRect();
+  let dropped = false;
 
   if (
     e.clientX >= rect.left && e.clientX <= rect.right &&
@@ -391,10 +575,18 @@ function onPointerUp(e) {
       x: nx,
       y: ny,
       scale: drag.scale,
+      rotation: drag.rotation || 0,
       zIndex: drag.zIndex,
       url: drag.url,
+      isSticker: drag.isSticker,
     });
     renderPlaced();
+    autoSave();
+    dropped = true;
+  }
+
+  if (!dropped && drag.source === 'canvas') {
+    autoSave();
   }
 
   removeGhost();

js/segmentation.js

@@ -1,23 +1,33 @@
 // Background removal using @huggingface/transformers with RMBG-1.4
 // Runs entirely in the browser (WebGPU with WASM fallback)
 
-let pipeline = null;
+let transformers = null;
 let loading = false;
 let loadPromise = null;
 
-/**
- * Load the segmentation model (cached after first load).
- * @param {function} onProgress - called with {status, progress?} during download
- */
-export async function loadModel(onProgress) {
-  if (pipeline) return pipeline;
+const MODEL_DIM = 512;  // resolution for model inference
+const OUTPUT_DIM = 1024; // max resolution for final output
+
+async function getTransformers() {
+  if (transformers) return transformers;
+  transformers = await import(
+    'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3'
+  );
+  transformers.env.allowLocalModels = false;
+  // Enable browser Cache API on HTTPS (persists model across sessions)
+  if (location.protocol === 'https:') {
+    transformers.env.useBrowserCache = true;
+  }
+  return transformers;
+}
+
+async function loadModel(onProgress) {
   if (loadPromise) return loadPromise;
 
   loading = true;
   loadPromise = _doLoad(onProgress);
   try {
-    pipeline = await loadPromise;
-    return pipeline;
+    return await loadPromise;
   } finally {
     loading = false;
     loadPromise = null;
@@ -25,12 +35,7 @@ export async function loadModel(onProgress) {
 }
 
 async function _doLoad(onProgress) {
-  // Dynamic import from CDN
-  const { AutoModel, AutoProcessor, RawImage, env } = await import(
-    'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3'
-  );
-
-  env.allowLocalModels = false;
+  const { AutoModel, AutoProcessor } = await getTransformers();
 
   if (onProgress) onProgress({ status: 'loading', message: 'Loading AI model...' });
 
@@ -50,8 +55,53 @@ async function _doLoad(onProgress) {
 
   const processor = await AutoProcessor.from_pretrained('briaai/RMBG-1.4');
 
-  // Return a function that segments images
-  return { model, processor, RawImage };
+  return { model, processor };
+}
+
+/**
+ * Decode image once and produce two sizes (output + model).
+ * Avoids decoding the full-res camera image multiple times.
+ */
+async function prepareImages(imageBlob) {
+  // Decode full image once just to get dimensions, then close immediately
+  const probe = await createImageBitmap(imageBlob);
+  const fullW = probe.width;
+  const fullH = probe.height;
+  probe.close();
+
+  // Output size (what gets saved)
+  const outRatio = Math.min(1, OUTPUT_DIM / Math.max(fullW, fullH));
+  const outW = Math.round(fullW * outRatio);
+  const outH = Math.round(fullH * outRatio);
+
+  // Use resizeWidth/resizeHeight to avoid a full-res intermediate bitmap
+  const outBitmap = await createImageBitmap(imageBlob, {
+    resizeWidth: outW, resizeHeight: outH, resizeQuality: 'medium',
+  });
+  const outCanvas = new OffscreenCanvas(outW, outH);
+  outCanvas.getContext('2d').drawImage(outBitmap, 0, 0);
+  outBitmap.close();
+  const outputBlob = await outCanvas.convertToBlob({ type: 'image/png' });
+
+  // Model size (smaller, for inference)
+  const modRatio = Math.min(1, MODEL_DIM / Math.max(outW, outH));
+  const modW = Math.round(outW * modRatio);
+  const modH = Math.round(outH * modRatio);
+
+  let modelBlob;
+  if (modW === outW && modH === outH) {
+    modelBlob = outputBlob;
+  } else {
+    const modBitmap = await createImageBitmap(outputBlob, {
+      resizeWidth: modW, resizeHeight: modH, resizeQuality: 'medium',
+    });
+    const modCanvas = new OffscreenCanvas(modW, modH);
+    modCanvas.getContext('2d').drawImage(modBitmap, 0, 0);
+    modBitmap.close();
+    modelBlob = await modCanvas.convertToBlob({ type: 'image/png' });
+  }
+
+  return { outputBlob, modelBlob };
 }
 
 /**
@@ -61,43 +111,53 @@ async function _doLoad(onProgress) {
  * @returns {Promise<Blob>} - PNG with transparent background
  */
 export async function removeBackground(imageBlob, onProgress) {
-  const { model, processor, RawImage } = await loadModel(onProgress);
+  // 1. Prepare downsized images BEFORE loading model (lower peak memory)
+  if (onProgress) onProgress({ status: 'processing', message: 'Preparing image...' });
+  const { outputBlob, modelBlob } = await prepareImages(imageBlob);
+
+  // 2. Load model
+  const { model, processor } = await loadModel(onProgress);
+  const { RawImage } = await getTransformers();
 
   if (onProgress) onProgress({ status: 'processing', message: 'Removing background...' });
 
-  // Load image
-  const url = URL.createObjectURL(imageBlob);
+  // 3. Run inference on small image
+  const url = URL.createObjectURL(modelBlob);
   const image = await RawImage.fromURL(url);
   URL.revokeObjectURL(url);
 
-  // Process
   const { pixel_values } = await processor(image);
   const { output } = await model({ input: pixel_values });
 
-  // The mask is a tensor, resize it to original image dimensions
   const maskData = output[0].data; // Float32Array
   const maskH = output[0].dims[1] || output.dims?.[2];
   const maskW = output[0].dims[2] || output.dims?.[3];
 
-  // Draw original image onto canvas
-  const bitmap = await createImageBitmap(imageBlob);
+  // Dispose tensors to free WASM memory
+  if (pixel_values.dispose) pixel_values.dispose();
+  if (output[0].dispose) output[0].dispose();
+
+  // 4. Free model from JS memory (Cache API keeps weights on disk for HTTPS)
+  disposeModel(model);
+
+  // 5. Apply mask to the output-sized image
+  const bitmap = await createImageBitmap(outputBlob);
   const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
   const ctx = canvas.getContext('2d');
   ctx.drawImage(bitmap, 0, 0);
+  bitmap.close();
 
-  // Apply mask to alpha channel
-  const imgData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
-  const scaleX = maskW / bitmap.width;
-  const scaleY = maskH / bitmap.height;
+  const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const scaleX = maskW / canvas.width;
+  const scaleY = maskH / canvas.height;
 
-  for (let y = 0; y < bitmap.height; y++) {
-    for (let x = 0; x < bitmap.width; x++) {
+  for (let y = 0; y < canvas.height; y++) {
+    for (let x = 0; x < canvas.width; x++) {
       const mx = Math.min(Math.floor(x * scaleX), maskW - 1);
       const my = Math.min(Math.floor(y * scaleY), maskH - 1);
       const maskVal = maskData[my * maskW + mx];
-      // Clamp to 0-255
       const alpha = Math.round(Math.max(0, Math.min(1, maskVal)) * 255);
-      imgData.data[(y * bitmap.width + x) * 4 + 3] = alpha;
+      imgData.data[(y * canvas.width + x) * 4 + 3] = alpha;
     }
   }
   ctx.putImageData(imgData, 0, 0);
@@ -107,8 +167,15 @@ export async function removeBackground(imageBlob, onProgress) {
   return canvas.convertToBlob({ type: 'image/png' });
 }
 
+function disposeModel(model) {
+  try {
+    if (model.dispose) model.dispose();
+  } catch (_) {}
+  loadPromise = null;
+}
+
 export function isModelLoaded() {
-  return pipeline !== null;
+  return loading;
 }
 
 export function isModelLoading() {

js/stickers.js

@@ -0,0 +1,184 @@
+// Built-in decorative stickers for the dress-up screen.
+// Each sticker is an inline SVG data URL — no downloads needed.
+
+function svgURL(svg) {
+  return 'data:image/svg+xml,' + encodeURIComponent(svg.trim());
+}
+
+export const STICKERS = [
+  {
+    id: 'stk-sparkle',
+    name: 'Sparkles',
+    emoji: '\u2728',
+    scale: 0.25,
+    zIndex: 10,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <polygon points="50,5 58,38 95,38 65,58 75,95 50,72 25,95 35,58 5,38 42,38" fill="#FFD700" opacity="0.9"/>
+      <polygon points="50,20 55,42 78,42 60,55 67,78 50,65 33,78 40,55 22,42 45,42" fill="#FFF8DC"/>
+      <circle cx="25" cy="20" r="4" fill="#FFD700" opacity="0.7"/>
+      <circle cx="80" cy="15" r="3" fill="#FFD700" opacity="0.6"/>
+      <circle cx="15" cy="75" r="3" fill="#FFD700" opacity="0.5"/>
+      <circle cx="85" cy="70" r="4" fill="#FFD700" opacity="0.6"/>
+    </svg>`),
+  },
+  {
+    id: 'stk-heart',
+    name: 'Heart',
+    emoji: '\u{1F496}',
+    scale: 0.2,
+    zIndex: 10,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <path d="M50 88 C25 65 5 50 5 30 A22 22 0 0 1 50 25 A22 22 0 0 1 95 30 C95 50 75 65 50 88Z" fill="#FF69B4"/>
+      <path d="M50 80 C30 62 15 50 15 34 A16 16 0 0 1 50 30 A16 16 0 0 1 85 34 C85 50 70 62 50 80Z" fill="#FFB6C1" opacity="0.5"/>
+    </svg>`),
+  },
+  {
+    id: 'stk-star',
+    name: 'Star',
+    emoji: '\u2B50',
+    scale: 0.22,
+    zIndex: 10,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <polygon points="50,5 63,35 95,40 72,62 78,95 50,78 22,95 28,62 5,40 37,35" fill="#FFD700"/>
+      <polygon points="50,18 59,38 80,42 65,56 69,78 50,67 31,78 35,56 20,42 41,38" fill="#FFF8DC" opacity="0.6"/>
+    </svg>`),
+  },
+  {
+    id: 'stk-butterfly',
+    name: 'Butterfly',
+    emoji: '\u{1F98B}',
+    scale: 0.3,
+    zIndex: 10,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 100">
+      <ellipse cx="35" cy="35" rx="30" ry="25" fill="#DDA0DD" transform="rotate(-15 35 35)"/>
+      <ellipse cx="85" cy="35" rx="30" ry="25" fill="#DDA0DD" transform="rotate(15 85 35)"/>
+      <ellipse cx="30" cy="62" rx="22" ry="18" fill="#E6B8E6" transform="rotate(-10 30 62)"/>
+      <ellipse cx="90" cy="62" rx="22" ry="18" fill="#E6B8E6" transform="rotate(10 90 62)"/>
+      <ellipse cx="35" cy="35" rx="18" ry="14" fill="#BA55D3" opacity="0.5" transform="rotate(-15 35 35)"/>
+      <ellipse cx="85" cy="35" rx="18" ry="14" fill="#BA55D3" opacity="0.5" transform="rotate(15 85 35)"/>
+      <rect x="58" y="15" width="4" height="65" rx="2" fill="#4B0082"/>
+      <circle cx="55" cy="10" r="4" fill="#4B0082"/><circle cx="65" cy="10" r="4" fill="#4B0082"/>
+    </svg>`),
+  },
+  {
+    id: 'stk-flower',
+    name: 'Flower',
+    emoji: '\u{1F338}',
+    scale: 0.22,
+    zIndex: 10,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <circle cx="50" cy="28" r="18" fill="#FFB7C5"/>
+      <circle cx="28" cy="45" r="18" fill="#FFB7C5"/>
+      <circle cx="72" cy="45" r="18" fill="#FFB7C5"/>
+      <circle cx="35" cy="68" r="18" fill="#FFB7C5"/>
+      <circle cx="65" cy="68" r="18" fill="#FFB7C5"/>
+      <circle cx="50" cy="50" r="14" fill="#FFD700"/>
+      <circle cx="46" cy="46" r="4" fill="#FFA500" opacity="0.5"/>
+      <circle cx="54" cy="52" r="3" fill="#FFA500" opacity="0.4"/>
+    </svg>`),
+  },
+  {
+    id: 'stk-rainbow',
+    name: 'Rainbow',
+    emoji: '\u{1F308}',
+    scale: 0.4,
+    zIndex: 9,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 80">
+      <path d="M10 75 A60 60 0 0 1 130 75" fill="none" stroke="#FF0000" stroke-width="8" opacity="0.7"/>
+      <path d="M18 75 A52 52 0 0 1 122 75" fill="none" stroke="#FF8C00" stroke-width="8" opacity="0.7"/>
+      <path d="M26 75 A44 44 0 0 1 114 75" fill="none" stroke="#FFD700" stroke-width="8" opacity="0.7"/>
+      <path d="M34 75 A36 36 0 0 1 106 75" fill="none" stroke="#32CD32" stroke-width="8" opacity="0.7"/>
+      <path d="M42 75 A28 28 0 0 1 98 75" fill="none" stroke="#4169E1" stroke-width="8" opacity="0.7"/>
+      <path d="M50 75 A20 20 0 0 1 90 75" fill="none" stroke="#8A2BE2" stroke-width="8" opacity="0.7"/>
+    </svg>`),
+  },
+  {
+    id: 'stk-gem',
+    name: 'Gem',
+    emoji: '\u{1F48E}',
+    scale: 0.18,
+    zIndex: 10,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <polygon points="50,8 85,35 70,92 30,92 15,35" fill="#87CEEB"/>
+      <polygon points="50,8 65,35 50,92 35,35" fill="#ADD8E6" opacity="0.7"/>
+      <polygon points="50,8 85,35 65,35" fill="#B0E0E6" opacity="0.5"/>
+      <line x1="50" y1="8" x2="50" y2="92" stroke="white" stroke-width="1" opacity="0.3"/>
+      <polygon points="15,35 35,35 30,92" fill="#5F9EA0" opacity="0.3"/>
+    </svg>`),
+  },
+  {
+    id: 'stk-bow',
+    name: 'Bow',
+    emoji: '\u{1F380}',
+    scale: 0.25,
+    zIndex: 10,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80">
+      <path d="M60 40 Q20 5 8 35 Q5 50 60 40Z" fill="#FF69B4"/>
+      <path d="M60 40 Q100 5 112 35 Q115 50 60 40Z" fill="#FF69B4"/>
+      <path d="M60 40 Q40 55 35 72 Q50 60 60 40Z" fill="#FF69B4"/>
+      <path d="M60 40 Q80 55 85 72 Q70 60 60 40Z" fill="#FF69B4"/>
+      <circle cx="60" cy="40" r="8" fill="#FF1493"/>
+      <path d="M60 40 Q25 10 12 32" fill="none" stroke="#FFB6C1" stroke-width="2" opacity="0.5"/>
+      <path d="M60 40 Q95 10 108 32" fill="none" stroke="#FFB6C1" stroke-width="2" opacity="0.5"/>
+    </svg>`),
+  },
+  {
+    id: 'stk-moon',
+    name: 'Moon',
+    emoji: '\u{1F319}',
+    scale: 0.2,
+    zIndex: 9,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <circle cx="45" cy="50" r="38" fill="#FFD700"/>
+      <circle cx="62" cy="42" r="32" fill="#FDF6E3"/>
+      <circle cx="30" cy="35" r="3" fill="#FFF8DC" opacity="0.6"/>
+      <circle cx="25" cy="55" r="2" fill="#FFF8DC" opacity="0.5"/>
+    </svg>`),
+  },
+  {
+    id: 'stk-wand',
+    name: 'Magic wand',
+    emoji: '\u{1FA84}',
+    scale: 0.35,
+    zIndex: 10,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120">
+      <line x1="50" y1="45" x2="50" y2="115" stroke="#DDA0DD" stroke-width="6" stroke-linecap="round"/>
+      <line x1="50" y1="45" x2="50" y2="115" stroke="#BA55D3" stroke-width="3" stroke-linecap="round"/>
+      <polygon points="50,2 57,18 74,20 62,32 65,50 50,42 35,50 38,32 26,20 43,18" fill="#FFD700"/>
+      <polygon points="50,10 54,22 66,23 58,31 60,43 50,37 40,43 42,31 34,23 46,22" fill="#FFF8DC" opacity="0.7"/>
+      <circle cx="30" cy="12" r="2" fill="#FFD700" opacity="0.7"/>
+      <circle cx="72" cy="8" r="2.5" fill="#FFD700" opacity="0.6"/>
+      <circle cx="22" cy="35" r="2" fill="#FFD700" opacity="0.5"/>
+      <circle cx="78" cy="32" r="1.5" fill="#FFD700" opacity="0.6"/>
+    </svg>`),
+  },
+  {
+    id: 'stk-crown',
+    name: 'Tiara',
+    emoji: '\u{1F451}',
+    scale: 0.3,
+    zIndex: 11,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 70">
+      <path d="M10 60 L20 20 L40 40 L60 8 L80 40 L100 20 L110 60Z" fill="#FFD700"/>
+      <path d="M15 60 L23 25 L40 42 L60 15 L80 42 L97 25 L105 60Z" fill="#FFF8DC" opacity="0.4"/>
+      <circle cx="60" cy="18" r="6" fill="#FF69B4"/>
+      <circle cx="22" cy="28" r="5" fill="#87CEEB"/>
+      <circle cx="98" cy="28" r="5" fill="#87CEEB"/>
+      <rect x="10" y="55" width="100" height="10" rx="3" fill="#FFD700"/>
+      <rect x="12" y="57" width="96" height="6" rx="2" fill="#DAA520" opacity="0.3"/>
+    </svg>`),
+  },
+  {
+    id: 'stk-cloud',
+    name: 'Cloud',
+    emoji: '\u2601\uFE0F',
+    scale: 0.3,
+    zIndex: 8,
+    url: svgURL(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 70">
+      <ellipse cx="60" cy="45" rx="50" ry="22" fill="white" opacity="0.85"/>
+      <circle cx="40" cy="32" r="22" fill="white" opacity="0.85"/>
+      <circle cx="65" cy="28" r="26" fill="white" opacity="0.85"/>
+      <circle cx="85" cy="36" r="18" fill="white" opacity="0.85"/>
+    </svg>`),
+  },
+];

js/store.js

@@ -1,5 +1,5 @@
 const DB_NAME = 'princess-game';
-const DB_VERSION = 1;
+const DB_VERSION = 2;
 
 let db = null;
 
@@ -24,6 +24,9 @@ function openDB() {
       if (!d.objectStoreNames.contains('clothes')) {
         d.createObjectStore('clothes', { keyPath: 'id' });
       }
+      if (!d.objectStoreNames.contains('photos')) {
+        d.createObjectStore('photos', { keyPath: 'id' });
+      }
     };
     req.onsuccess = () => { db = req.result; resolve(db); };
     req.onerror = () => reject(req.error);
@@ -73,12 +76,21 @@ export async function updatePrincessAnchors(id, anchors) {
   }
 }
 
+export async function savePrincessOutfit(id, outfit) {
+  const store = await tx('princesses', 'readwrite');
+  const p = await reqToPromise(store.get(id));
+  if (p) {
+    p.outfit = outfit;
+    await reqToPromise(store.put(p));
+  }
+}
+
 // --- Clothes ---
 
 export async function saveClothing({ name, category, imageBlob, targetAnchor, scale, zIndex }) {
   const id = uuid();
   const store = await tx('clothes', 'readwrite');
-  const record = { id, name, category, imageBlob, targetAnchor, scale: scale || 0.4, zIndex, createdAt: Date.now() };
+  const record = { id, name, category, imageBlob, targetAnchor, scale: scale || 0.8, zIndex, createdAt: Date.now() };
   await reqToPromise(store.put(record));
   return record;
 }
@@ -98,6 +110,26 @@ export async function deleteClothing(id) {
   await reqToPromise(store.delete(id));
 }
 
+// --- Photos (captured source images) ---
+
+export async function savePhoto(imageBlob) {
+  const id = uuid();
+  const store = await tx('photos', 'readwrite');
+  const record = { id, imageBlob, createdAt: Date.now() };
+  await reqToPromise(store.put(record));
+  return record;
+}
+
+export async function loadPhotos() {
+  const store = await tx('photos');
+  return reqToPromise(store.getAll());
+}
+
+export async function deletePhoto(id) {
+  const store = await tx('photos', 'readwrite');
+  await reqToPromise(store.delete(id));
+}
+
 // --- Helpers ---
 
 export function blobToURL(blob) {

js/upload.js

@@ -1,6 +1,6 @@
 import { CATEGORIES, getCategoryInfo, DEFAULT_ANCHORS } from './models.js';
-import { savePrincess, saveClothing } from './store.js';
-import { removeBackground, isModelLoaded } from './segmentation.js';
+import { savePrincess, saveClothing, savePhoto, loadPhotos, deletePhoto, blobToURL } from './store.js';
+import { removeBackground } from './segmentation.js';
 import { showPolygonSelector } from './polygon-select.js';
 import { navigate } from './app.js';
 
@@ -13,8 +13,16 @@ let segmentedBlob = null;   // after background removal
 let previewURL = null;
 let croppedURL = null;
 
-export function initUpload() {
+let photoURLs = []; // object URLs for gallery thumbnails
+
+export async function initUpload() {
   const screen = document.getElementById('upload-screen');
+
+  photoURLs.forEach(u => URL.revokeObjectURL(u));
+  photoURLs = [];
+
+  const photos = await loadPhotos();
+
   screen.innerHTML = `
     <div class="upload-header">
       <a href="#/" class="back-btn">\u2190 Back</a>
@@ -34,6 +42,24 @@ export function initUpload() {
       </label>
     </div>
 
+    ${photos.length > 0 ? `
+      <div class="photo-gallery">
+        <p class="picker-label">Or use a previous photo</p>
+        <div class="photo-gallery-scroll" id="photo-gallery">
+          ${photos.map(p => {
+            const url = blobToURL(p.imageBlob);
+            photoURLs.push(url);
+            return `
+              <div class="photo-gallery-item" data-photo-id="${p.id}">
+                <img src="${url}" class="photo-gallery-thumb" draggable="false"/>
+                <button class="photo-gallery-delete" data-photo-id="${p.id}">\u00D7</button>
+              </div>
+            `;
+          }).join('')}
+        </div>
+      </div>
+    ` : ''}
+
     <button id="select-area-btn" class="pill select-area-btn" style="display:none">
       \u2702\uFE0F Select area
     </button>
@@ -56,7 +82,7 @@ export function initUpload() {
   `;
 
   buildCategoryGrid();
-  bindEvents();
+  bindEvents(photos);
   resetState();
 }
 
@@ -70,7 +96,24 @@ function buildCategoryGrid() {
   `).join('');
 }
 
-function bindEvents() {
+function selectImage(blob) {
+  imageBlob = blob;
+  croppedBlob = null;
+  polygon = null;
+  segmentedBlob = null;
+  if (previewURL) URL.revokeObjectURL(previewURL);
+  if (croppedURL) URL.revokeObjectURL(croppedURL);
+  previewURL = URL.createObjectURL(blob);
+  croppedURL = null;
+
+  showPhotoPreview(previewURL);
+  document.getElementById('select-area-btn').style.display = '';
+  document.getElementById('upload-status').innerHTML = '';
+  document.getElementById('submit-btn').style.display = '';
+  updateSubmitState();
+}
+
+function bindEvents(photos) {
   // Type toggle
   document.querySelectorAll('.type-toggle .pill').forEach(btn => {
     btn.addEventListener('click', () => {
@@ -92,27 +135,39 @@ function bindEvents() {
     btn.classList.add('selected');
   });
 
-  // Camera input
-  document.getElementById('camera-input').addEventListener('change', (e) => {
+  // Camera input — save to gallery automatically
+  document.getElementById('camera-input').addEventListener('change', async (e) => {
     const file = e.target.files[0];
     if (!file) return;
 
-    imageBlob = file;
-    croppedBlob = null;
-    polygon = null;
-    segmentedBlob = null;
-    if (previewURL) URL.revokeObjectURL(previewURL);
-    if (croppedURL) URL.revokeObjectURL(croppedURL);
-    previewURL = URL.createObjectURL(file);
-    croppedURL = null;
-
-    showPhotoPreview(previewURL);
-    document.getElementById('select-area-btn').style.display = '';
-    document.getElementById('upload-status').innerHTML = '';
-    document.getElementById('submit-btn').style.display = '';
-    updateSubmitState();
+    // Save to photo gallery for reuse
+    await savePhoto(file);
+
+    selectImage(file);
   });
 
+  // Photo gallery — tap to reuse, X to delete
+  const gallery = document.getElementById('photo-gallery');
+  if (gallery) {
+    gallery.addEventListener('click', async (e) => {
+      // Delete button
+      const delBtn = e.target.closest('.photo-gallery-delete');
+      if (delBtn) {
+        e.stopPropagation();
+        const id = delBtn.dataset.photoId;
+        await deletePhoto(id);
+        initUpload(); // re-render
+        return;
+      }
+
+      // Select photo
+      const item = e.target.closest('.photo-gallery-item');
+      if (!item) return;
+      const photo = photos.find(p => p.id === item.dataset.photoId);
+      if (photo) selectImage(photo.imageBlob);
+    });
+  }
+
   // Select area
   document.getElementById('select-area-btn').addEventListener('click', handleSelectArea);
 
@@ -143,7 +198,7 @@ async function handleSelectArea() {
   if (croppedURL) URL.revokeObjectURL(croppedURL);
   croppedURL = URL.createObjectURL(croppedBlob);
 
-  showPhotoPreview(croppedURL, 'Area selected \u2014 tap to retake photo');
+  showPhotoPreview(previewURL, '\u2702\uFE0F Area selected \u2014 tap to retake photo');
   document.getElementById('select-area-btn').textContent = '\u2702\uFE0F Reselect area';
   updateSubmitState();
 }
@@ -167,9 +222,7 @@ async function handleMagicTime() {
   btn.disabled = true;
   btn.style.display = 'none';
 
-  const modelHint = isModelLoaded()
-    ? ''
-    : '<p class="progress-hint">First time takes a moment to download the AI model.</p>';
+  const modelHint = '<p class="progress-hint">This might take a moment.</p>';
 
   status.innerHTML = `
     <div class="processing">
@@ -200,7 +253,7 @@ async function handleMagicTime() {
 
     // Show preview with approve/retry
     const segURL = URL.createObjectURL(segmentedBlob);
-    const beforeURL = croppedURL || previewURL;
+    const beforeURL = previewURL;
     status.innerHTML = `
       <div class="seg-preview">
         <p class="seg-preview-label">How does it look?</p>
@@ -248,25 +301,8 @@ async function handleMagicTime() {
 }
 
 function resetToCamera() {
-  const status = document.getElementById('upload-status');
-  const btn = document.getElementById('submit-btn');
-  status.innerHTML = '';
-  btn.style.display = '';
-  btn.disabled = false;
-  document.getElementById('camera-input').value = '';
-  const label = document.getElementById('camera-label');
-  label.innerHTML = `
-    <span class="camera-icon">\u{1F4F8}</span>
-    <span class="camera-text">Tap to photograph!</span>
-  `;
-  label.className = 'camera-label';
-  document.getElementById('select-area-btn').style.display = 'none';
-  document.getElementById('select-area-btn').textContent = '\u2702\uFE0F Select area';
-  imageBlob = null;
-  croppedBlob = null;
-  polygon = null;
-  segmentedBlob = null;
-  updateSubmitState();
+  resetState();
+  initUpload();
 }
 
 /**
@@ -338,7 +374,7 @@ async function saveAsset(name, blob) {
         category: selectedCategory,
         imageBlob: blob,
         targetAnchor: catInfo.targetAnchor,
-        scale: 0.4,
+        scale: 0.8,
         zIndex: catInfo.zIndex,
       });
     }

style.css

@@ -161,6 +161,35 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
 
 .switch-label { font-size: 1.1rem; font-weight: 700; }
 
+/* ---- Tray tabs ---- */
+
+.tray-tabs {
+  display: flex;
+  justify-content: center;
+  gap: 0.4rem;
+  flex-shrink: 0;
+}
+
+.tray-tab {
+  font-family: var(--font);
+  font-size: 0.9rem;
+  font-weight: 700;
+  padding: 0.4rem 1rem;
+  border: 2px solid var(--lavender);
+  border-radius: 1.5rem;
+  background: var(--panel);
+  color: var(--lavender-dk);
+  cursor: pointer;
+  transition: all 0.15s var(--spring);
+  touch-action: manipulation;
+}
+
+.tray-tab.active {
+  background: var(--lavender);
+  color: white;
+  border-color: var(--lavender-dk);
+}
+
 .clothing-tray {
   display: flex;
   gap: 0.5rem;
@@ -227,6 +256,23 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
   flex-shrink: 0;
 }
 
+/* ---- Screenshot flash ---- */
+
+.screenshot-flash {
+  animation: flash 0.4s ease-out;
+}
+
+@keyframes flash {
+  0% { filter: brightness(2); }
+  100% { filter: brightness(1); }
+}
+
+/* ---- Sticker tray items ---- */
+
+.tray-sticker .tray-thumb {
+  background: none;
+}
+
 /* ---- Manage screen ---- */
 
 #manage-screen {
@@ -376,6 +422,64 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
   box-shadow: 0 2px 0 var(--ink);
 }
 
+/* ---- Photo gallery (reuse previous captures) ---- */
+
+.photo-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.photo-gallery-scroll {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding: 0.25rem;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x mandatory;
+}
+
+.photo-gallery-item {
+  position: relative;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  cursor: pointer;
+}
+
+.photo-gallery-thumb {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 0.75rem;
+  border: 3px solid var(--lavender);
+  transition: border-color 0.15s;
+}
+
+.photo-gallery-item:active .photo-gallery-thumb {
+  border-color: var(--gold);
+}
+
+.photo-gallery-delete {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--ink);
+  border-radius: 50%;
+  background: var(--rose);
+  color: white;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  touch-action: manipulation;
+}
+
 .camera-zone { position: relative; flex-shrink: 0; }
 .camera-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
 
@@ -551,10 +655,11 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
 
 .placed-item.poof {
   animation: poof 0.3s ease-out forwards;
+  pointer-events: none;
 }
 
 @keyframes poof {
-  to { transform: translate(-50%, -50%) scale(0); opacity: 0; }
+  to { scale: 0; opacity: 0; }
 }
 
 /* ---- Sparkle burst ---- */