Move segmentation to cloud

js/app.js

@@ -1,6 +1,7 @@
 import { initUpload } from './upload.js';
 import { initDressUp } from './dressup.js';
 import { initManage } from './manage.js';
+import { initDiag, tagOp } from './diag.js';
 
 const screens = ['dressup-screen', 'upload-screen', 'manage-screen'];
 
@@ -12,6 +13,7 @@ function showScreen(id) {
 
 function route() {
   const hash = location.hash || '#/';
+  tagOp(`route: ${hash}`);
 
   if (hash.startsWith('#/upload')) {
     showScreen('upload-screen');
@@ -30,4 +32,7 @@ export function navigate(hash) {
 }
 
 window.addEventListener('hashchange', route);
-window.addEventListener('DOMContentLoaded', route);
+window.addEventListener('DOMContentLoaded', () => {
+  initDiag();
+  route();
+});

js/auto-segment.js

@@ -2,23 +2,15 @@
 // Generates a grid of point prompts, runs mask decoder for each,
 // filters and deduplicates to find distinct parts of a drawing.
 
+import { getTransformers } from './segmentation.js';
+
 const SAM_MODEL = 'Xenova/slimsam-77-uniform';
-const SAM_DIM = 512;
+const SAM_DIM = 384; // smaller input → quadratically less peak memory
 const GRID_SIZE = 6; // 6x6 = 36 points, filtered to non-transparent
 const MIN_IOU_SCORE = 0.65;
 const MIN_AREA_FRAC = 0.005; // minimum mask area as fraction of image
 const NMS_IOU_THRESHOLD = 0.5;
 
-let transformers = null;
-
-async function getTransformers() {
-  if (transformers) return transformers;
-  transformers = await import(
-    'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3'
-  );
-  return transformers;
-}
-
 /**
  * Auto-segment an image into distinct parts using SlimSAM.
  * @param {Blob} imageBlob - background-removed PNG
@@ -34,20 +26,42 @@ export async function autoSegment(imageBlob, onProgress) {
 
   if (onProgress) onProgress({ message: `Loading segmentation model (${device})...`, progress: 0 });
 
-  const model = await SamModel.from_pretrained(SAM_MODEL, {
-    device,
-    dtype: device === 'webgpu' ? 'fp32' : 'fp32',
-    progress_callback: (p) => {
-      if (onProgress && p.progress != null) {
-        onProgress({
-          message: `Downloading model: ${Math.round(p.progress)}%`,
-          progress: p.progress * 0.2, // 0-20% for download
-        });
-      }
-    },
-  });
+  const dtypeProgress = (p) => {
+    if (onProgress && p.progress != null) {
+      onProgress({
+        message: `Downloading model: ${Math.round(p.progress)}%`,
+        progress: p.progress * 0.2, // 0-20% for download
+      });
+    }
+  };
+
+  // Try the smallest dtype first; fall back step-by-step if the model
+  // doesn't ship that variant or the runtime can't load it.
+  const dtypePreference = device === 'webgpu'
+    ? ['fp16', 'q8', 'fp32']
+    : ['q8', 'fp16', 'fp32'];
+
+  let model = null;
+  let loadedDtype = null;
+  let lastErr = null;
+  for (const dtype of dtypePreference) {
+    try {
+      model = await SamModel.from_pretrained(SAM_MODEL, {
+        device,
+        dtype,
+        progress_callback: dtypeProgress,
+      });
+      loadedDtype = dtype;
+      console.log(`[auto-segment] loaded SAM with dtype=${dtype}, device=${device}`);
+      break;
+    } catch (err) {
+      console.warn(`[auto-segment] dtype=${dtype} failed:`, err && err.message);
+      lastErr = err;
+    }
+  }
+  if (!model) throw lastErr || new Error('Failed to load SAM');
 
-  if (onProgress) onProgress({ message: 'Preparing model...', progress: 22 });
+  if (onProgress) onProgress({ message: `sam: loaded ${loadedDtype}/${device}`, progress: 22 });
 
   const processor = await AutoProcessor.from_pretrained(SAM_MODEL);
 

js/diag.js

@@ -0,0 +1,64 @@
+// Tiny diagnostics: tracks page reloads and "last operation" across sessions.
+// Works in both window and Web Worker contexts.
+
+const isWorker = typeof window === 'undefined' && typeof self !== 'undefined';
+
+export function tagOp(op) {
+  if (isWorker) {
+    // Forward to main thread; ml-client will set sessionStorage there.
+    try { self.postMessage({ __diag: true, op }); } catch (_) {}
+    return;
+  }
+  if (typeof sessionStorage === 'undefined') return;
+  sessionStorage.setItem('lastOp', op);
+  updateDisplay();
+}
+
+function updateDisplay() {
+  const el = document.getElementById('diag');
+  if (!el) return;
+  const loads = sessionStorage.getItem('loads') || '?';
+  const last  = sessionStorage.getItem('lastOp') || '-';
+  el.textContent = `#${loads} · ${last}`;
+}
+
+export function initDiag() {
+  if (isWorker) return;
+
+  const loads = parseInt(sessionStorage.getItem('loads') || '0', 10) + 1;
+  sessionStorage.setItem('loads', String(loads));
+  const last = sessionStorage.getItem('lastOp') || '-';
+  console.log(`[diag] boot #${loads}, last op before this load:`, last);
+
+  // Distinguish bfcache restore (persisted=true) from a fresh load after kill (persisted=false).
+  window.addEventListener('pageshow', (e) => {
+    console.log(`[diag] pageshow persisted=${e.persisted}`);
+  });
+  window.addEventListener('pagehide', (e) => {
+    console.log(`[diag] pagehide persisted=${e.persisted}`);
+  });
+
+  if (!document.getElementById('diag')) {
+    const el = document.createElement('div');
+    el.id = 'diag';
+    el.style.cssText = [
+      'position:fixed',
+      'top:env(safe-area-inset-top,0px)',
+      'right:env(safe-area-inset-right,0px)',
+      'font:10px/1.2 ui-monospace,Menlo,monospace',
+      'background:rgba(0,0,0,0.65)',
+      'color:#fff',
+      'padding:3px 6px',
+      'z-index:99999',
+      'pointer-events:none',
+      'max-width:65vw',
+      'text-align:right',
+      'border-bottom-left-radius:6px',
+      'white-space:nowrap',
+      'overflow:hidden',
+      'text-overflow:ellipsis',
+    ].join(';');
+    document.body.appendChild(el);
+  }
+  updateDisplay();
+}

js/dressup.js

@@ -1,13 +1,15 @@
-import { loadPrincesses, loadClothes, blobToURL, savePrincessOutfit } from './store.js';
-import { getCategoryInfo, DRAG_DEAD_ZONE_PX, DOUBLE_TAP_MS } from './models.js';
+import { loadDrawings, loadItems, saveDrawing, updateDrawingItems, deleteDrawing, blobToURL } from './store.js';
+import { getCategoryInfo, DOUBLE_TAP_MS, DRAG_DEAD_ZONE_PX } from './models.js';
 import { STICKERS } from './stickers.js';
+import { migrateOldData } from './store.js';
+import { tagOp } from './diag.js';
 
-let princesses = [];
-let clothes = [];
+let drawings = [];
+let items = [];
 let currentIdx = 0;
-let placedItems = []; // { clothingId, x, y, scale, rotation, zIndex, url, isSticker }
+let placedItems = []; // { itemId, x, y, scale, rotation, zIndex, url, isSticker, sparkle }
 let objectURLs = [];
-let clothesURLMap = {}; // id -> objectURL
+let itemsURLMap = {}; // id -> objectURL
 
 // Single-finger drag state
 let drag = null;
@@ -16,66 +18,123 @@ let ghost = null;
 // Pinch-to-resize + rotate state
 let pinch = null;
 
+// Desktop resize handle state
+let resizeHandle = null;
+
 // Double-tap tracking
 let lastPlacedTap = { idx: -1, time: 0 };
 
+// Selected item for desktop bounding box
+let selectedIdx = -1;
+
 // Track active pointers on placed items
 let activePointers = new Map();
 
+// Canvas auto-sizing
+let canvasResizeObserver = null;
+
+function fitCanvas() {
+  const wrap = document.querySelector('.canvas-wrap');
+  const canvas = document.getElementById('princess-canvas');
+  if (!wrap || !canvas) return;
+
+  const cw = wrap.clientWidth;
+  const ch = wrap.clientHeight;
+  if (cw <= 0 || ch <= 0) return;
+
+  const ratio = 3 / 4; // width / height
+
+  let maxW;
+  if (window.innerWidth >= 1200) maxW = 750;
+  else if (window.innerWidth >= 768) maxW = 600;
+  else maxW = 480;
+
+  // Pick largest size that fits both wrap dimensions and the breakpoint cap
+  let w, h;
+  if (cw / ch > ratio) {
+    // wrap is wider than aspect — height-bound
+    h = ch;
+    w = h * ratio;
+  } else {
+    // wrap is narrower — width-bound
+    w = cw;
+    h = w / ratio;
+  }
+  if (w > maxW) {
+    w = maxW;
+    h = w / ratio;
+  }
+
+  canvas.style.width = `${Math.floor(w)}px`;
+  canvas.style.height = `${Math.floor(h)}px`;
+
+  renderBBox();
+}
+
+function setupCanvasResize() {
+  const wrap = document.querySelector('.canvas-wrap');
+  if (!wrap) return;
+  if (canvasResizeObserver) canvasResizeObserver.disconnect();
+  canvasResizeObserver = new ResizeObserver(() => fitCanvas());
+  canvasResizeObserver.observe(wrap);
+  fitCanvas();
+}
+
 export async function initDressUp() {
+  tagOp('dressup: init');
   const screen = document.getElementById('dressup-screen');
 
-  princesses = await loadPrincesses();
-  clothes = await loadClothes();
+  // Migrate old princess data on first load
+  await migrateOldData();
+
+  drawings = await loadDrawings();
+  items = await loadItems();
+  tagOp(`dressup: loaded ${items.length} items`);
 
   objectURLs.forEach(u => URL.revokeObjectURL(u));
   objectURLs = [];
-  clothesURLMap = {};
+  itemsURLMap = {};
 
-  clothes.forEach(c => {
+  let totalBytes = 0;
+  items.forEach(c => {
     const url = blobToURL(c.imageBlob);
     objectURLs.push(url);
-    clothesURLMap[c.id] = url;
+    itemsURLMap[c.id] = url;
+    totalBytes += c.imageBlob.size || 0;
   });
+  tagOp(`dressup: item blobs total ${Math.round(totalBytes / 1024)}KB`);
 
-  if (princesses.length === 0) {
-    screen.innerHTML = `
-      <div class="empty-state">
-        <p class="empty-icon">\u{1F3A8}</p>
-        <h2>No princesses yet!</h2>
-        <p>Draw a princess and take a photo!</p>
-        <a href="#/upload" class="big-button">Add Photo</a>
-      </div>
-    `;
-    return;
-  }
+  const hasItems = items.length > 0 || STICKERS.length > 0;
 
-  const hasItems = clothes.length > 0 || STICKERS.length > 0;
+  // Ensure at least one drawing exists
+  if (drawings.length === 0) {
+    const d = await saveDrawing({ name: '', items: [] });
+    drawings = [d];
+  }
 
   screen.innerHTML = `
     <div class="dressup-layout">
-      <h1 id="princess-name" class="princess-title"></h1>
-
       <div class="canvas-wrap">
         <div id="princess-canvas" class="princess-canvas">
-          <img id="princess-img" class="princess-img" src="" alt=""/>
           <div id="placed-layer" class="placed-layer"></div>
+          <div id="bbox-overlay" class="bbox-overlay"></div>
         </div>
       </div>
 
       <div class="switcher">
         <button id="prev-btn" class="switch-btn">\u25C0</button>
-        <span id="princess-counter" class="switch-label"></span>
+        <span id="drawing-counter" class="switch-label"></span>
         <button id="next-btn" class="switch-btn">\u25B6</button>
+        <button id="new-drawing-btn" class="switch-btn" title="New drawing">+</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>
+        ${items.length > 0 ? '<button class="tray-tab active" data-tab="items">\u{1F3A8} Items</button>' : ''}
+        <button class="tray-tab ${items.length === 0 ? 'active' : ''}" data-tab="stickers">\u2728 Stickers</button>
       </div>
 
       <div id="clothing-tray" class="clothing-tray">
-        ${!hasItems ? '<p class="tray-empty">Draw some clothes and add photos!</p>' : ''}
+        ${!hasItems ? '<p class="tray-empty">Add some photos to get started!</p>' : ''}
       </div>
 
       <div class="bottom-bar">
@@ -87,63 +146,86 @@ export async function initDressUp() {
   `;
 
   currentIdx = 0;
-  renderPrincess();
-  renderTray(clothes.length > 0 ? 'clothes' : 'stickers');
+  selectedIdx = -1;
+  setupCanvasResize();
+  tagOp('dressup: renderDrawing');
+  renderDrawing();
+  tagOp('dressup: renderTray');
+  renderTray(items.length > 0 ? 'items' : 'stickers');
+  tagOp('dressup: bindEvents');
   bindEvents();
+  tagOp('dressup: ready');
 }
 
 // ---- Auto-save ----
 
 let saveTimer = null;
 
+function saveNow() {
+  const d = drawings[currentIdx];
+  if (!d) return;
+  const saved = placedItems.map(({ itemId, x, y, scale, rotation, zIndex, isSticker, sparkle }) =>
+    ({ itemId, clothingId: itemId, x, y, scale, rotation: rotation || 0, zIndex, isSticker: isSticker || false, sparkle: sparkle || false })
+  );
+  d.items = saved; // update in-memory too
+  updateDrawingItems(d.id, saved);
+}
+
 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);
+  saveTimer = setTimeout(saveNow, 300);
 }
 
-// ---- Rendering ----
+function flushSave() {
+  if (saveTimer) {
+    clearTimeout(saveTimer);
+    saveTimer = null;
+    saveNow();
+  }
+}
 
-function renderPrincess() {
-  const p = princesses[currentIdx];
-  if (!p) return;
+// ---- Rendering ----
 
-  const url = blobToURL(p.imageBlob);
-  objectURLs.push(url);
+function renderDrawing() {
+  const d = drawings[currentIdx];
+  if (!d) return;
 
-  document.getElementById('princess-name').textContent = p.name || 'Princess';
-  document.getElementById('princess-img').src = url;
-  document.getElementById('princess-counter').textContent =
-    `${currentIdx + 1} / ${princesses.length}`;
+  document.getElementById('drawing-counter').textContent =
+    `${currentIdx + 1} / ${drawings.length}`;
   document.getElementById('prev-btn').disabled = currentIdx === 0;
-  document.getElementById('next-btn').disabled = currentIdx === princesses.length - 1;
+  document.getElementById('next-btn').disabled = currentIdx === drawings.length - 1;
 
-  // Restore saved outfit
+  // Restore saved items
   placedItems = [];
-  if (p.outfit && Array.isArray(p.outfit)) {
-    for (const item of p.outfit) {
+  if (d.items && Array.isArray(d.items)) {
+    for (const item of d.items) {
+      const id = item.itemId || item.clothingId;
       let url;
       if (item.isSticker) {
-        const sticker = STICKERS.find(s => s.id === item.clothingId);
+        const sticker = STICKERS.find(s => s.id === id);
         url = sticker ? sticker.url : null;
       } else {
-        url = clothesURLMap[item.clothingId];
+        url = itemsURLMap[id];
       }
       if (url) {
-        placedItems.push({ ...item, url, rotation: item.rotation || 0 });
+        placedItems.push({
+          itemId: id,
+          x: item.x, y: item.y,
+          scale: item.scale,
+          rotation: item.rotation || 0,
+          zIndex: item.zIndex,
+          url,
+          isSticker: item.isSticker || false,
+          sparkle: item.sparkle || false,
+        });
       }
     }
   }
+  selectedIdx = -1;
   renderPlaced();
 }
 
-let currentTab = 'clothes';
+let currentTab = 'items';
 
 function renderTray(tab) {
   currentTab = tab || currentTab;
@@ -163,18 +245,18 @@ function renderTray(tab) {
       </div>
     `).join('');
   } else {
-    if (clothes.length === 0) {
-      tray.innerHTML = '<p class="tray-empty">Draw some clothes and add photos!</p>';
+    if (items.length === 0) {
+      tray.innerHTML = '<p class="tray-empty">Add some photos to get started!</p>';
       return;
     }
-    tray.innerHTML = clothes.map(c => {
-      const url = clothesURLMap[c.id];
+    tray.innerHTML = items.map(c => {
+      const url = itemsURLMap[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>
+          <span class="tray-label">${catInfo ? catInfo.emoji : ''} ${c.name || (catInfo ? catInfo.label : '')}</span>
         </div>
       `;
     }).join('');
@@ -188,7 +270,7 @@ function renderPlaced() {
     .sort((a, b) => a.zIndex - b.zIndex);
 
   layer.innerHTML = sorted.map(item => `
-    <img src="${item.url}" class="placed-item" draggable="false"
+    <img src="${item.url}" class="placed-item ${item.sparkle ? 'sparkle-effect' : ''}" draggable="false"
          data-orig-idx="${item.origIdx}"
          style="
            position:absolute;
@@ -200,6 +282,8 @@ function renderPlaced() {
          "
          alt=""/>
   `).join('');
+
+  renderBBox();
 }
 
 function updatePlacedStyle(origIdx) {
@@ -211,6 +295,58 @@ function updatePlacedStyle(origIdx) {
   el.style.top = `${item.y * 100}%`;
   el.style.width = `${item.scale * 100}%`;
   el.style.transform = `translate(-50%,-50%) rotate(${item.rotation || 0}deg)`;
+  renderBBox();
+}
+
+// ---- Desktop bounding box ----
+
+function renderBBox() {
+  const overlay = document.getElementById('bbox-overlay');
+  if (!overlay) return;
+
+  if (selectedIdx < 0 || selectedIdx >= placedItems.length) {
+    overlay.innerHTML = '';
+    return;
+  }
+
+  const item = placedItems[selectedIdx];
+  const el = document.querySelector(`.placed-item[data-orig-idx="${selectedIdx}"]`);
+  if (!el) { overlay.innerHTML = ''; return; }
+
+  // Get bounding rect relative to canvas
+  const canvas = document.getElementById('princess-canvas');
+  const canvasRect = canvas.getBoundingClientRect();
+  const elRect = el.getBoundingClientRect();
+
+  const left = elRect.left - canvasRect.left;
+  const top = elRect.top - canvasRect.top;
+  const w = elRect.width;
+  const h = elRect.height;
+
+  overlay.innerHTML = `
+    <div class="bbox" style="left:${left}px;top:${top}px;width:${w}px;height:${h}px;">
+      <div class="bbox-handle bbox-handle-br" data-handle="br"></div>
+      <button class="bbox-action bbox-sparkle" data-action="sparkle" title="Toggle sparkles">\u2728</button>
+      <button class="bbox-action bbox-delete" data-action="delete" title="Remove">\u{1F5D1}</button>
+    </div>
+  `;
+}
+
+function handleBBoxAction(action, idx) {
+  if (action === 'delete') {
+    const el = document.querySelector(`.placed-item[data-orig-idx="${idx}"]`);
+    if (el) el.classList.add('poof');
+    setTimeout(() => {
+      placedItems.splice(idx, 1);
+      selectedIdx = -1;
+      renderPlaced();
+      autoSave();
+    }, 300);
+  } else if (action === 'sparkle') {
+    placedItems[idx].sparkle = !placedItems[idx].sparkle;
+    renderPlaced();
+    autoSave();
+  }
 }
 
 // ---- Placement animation ----
@@ -258,10 +394,8 @@ function pointerAngle(a, b) {
 
 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;
@@ -273,18 +407,6 @@ async function takeScreenshot() {
   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 }))
@@ -294,8 +416,6 @@ async function takeScreenshot() {
     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);
@@ -306,24 +426,21 @@ async function takeScreenshot() {
 
   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' });
+    const file = new File([blob], 'drawing.png', { type: 'image/png' });
     try {
-      await navigator.share({ files: [file], title: 'My Princess' });
+      await navigator.share({ files: [file], title: 'My Drawing' });
       return;
     } catch (_) {}
   }
 
-  // Fallback: download
   const url = URL.createObjectURL(blob);
   const a = document.createElement('a');
   a.href = url;
-  a.download = 'princess.png';
+  a.download = 'drawing.png';
   a.click();
   URL.revokeObjectURL(url);
 
-  // Flash feedback
   canvasEl.classList.add('screenshot-flash');
   setTimeout(() => canvasEl.classList.remove('screenshot-flash'), 400);
 }
@@ -342,10 +459,17 @@ function loadImage(src) {
 
 function bindEvents() {
   document.getElementById('prev-btn').addEventListener('click', () => {
-    if (currentIdx > 0) { currentIdx--; renderPrincess(); }
+    if (currentIdx > 0) { flushSave(); currentIdx--; renderDrawing(); }
   });
   document.getElementById('next-btn').addEventListener('click', () => {
-    if (currentIdx < princesses.length - 1) { currentIdx++; renderPrincess(); }
+    if (currentIdx < drawings.length - 1) { flushSave(); currentIdx++; renderDrawing(); }
+  });
+  document.getElementById('new-drawing-btn').addEventListener('click', async () => {
+    flushSave();
+    const d = await saveDrawing({ name: '', items: [] });
+    drawings.push(d);
+    currentIdx = drawings.length - 1;
+    renderDrawing();
   });
 
   // Tray tabs
@@ -360,6 +484,41 @@ function bindEvents() {
   const placedLayer = document.getElementById('placed-layer');
   placedLayer.addEventListener('pointerdown', onPlacedPointerDown, { passive: false });
 
+  // Deselect when clicking empty canvas area
+  const canvasEl = document.getElementById('princess-canvas');
+  canvasEl.addEventListener('pointerdown', (e) => {
+    if (e.target === canvasEl || e.target.id === 'placed-layer') {
+      selectedIdx = -1;
+      renderBBox();
+    }
+  });
+
+  // BBox actions
+  const bboxOverlay = document.getElementById('bbox-overlay');
+  bboxOverlay.addEventListener('pointerdown', (e) => {
+    const handle = e.target.closest('.bbox-handle');
+    if (handle && selectedIdx >= 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      const canvas = document.getElementById('princess-canvas');
+      const rect = canvas.getBoundingClientRect();
+      resizeHandle = {
+        idx: selectedIdx,
+        startX: e.clientX,
+        startY: e.clientY,
+        startScale: placedItems[selectedIdx].scale,
+        canvasW: rect.width,
+      };
+      return;
+    }
+    const actionBtn = e.target.closest('.bbox-action');
+    if (actionBtn && selectedIdx >= 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleBBoxAction(actionBtn.dataset.action, selectedIdx);
+    }
+  });
+
   window.addEventListener('pointermove', onPointerMove, { passive: false });
   window.addEventListener('pointerup', onPointerUp);
   window.addEventListener('pointercancel', onPointerUp);
@@ -396,7 +555,7 @@ function onTrayPointerDown(e) {
     drag = {
       source: 'tray',
       id: item.dataset.id,
-      url: clothesURLMap[item.dataset.id],
+      url: itemsURLMap[item.dataset.id],
       scale: parseFloat(item.dataset.scale),
       zIndex: parseInt(item.dataset.z),
       isSticker: false,
@@ -415,6 +574,11 @@ function onPlacedPointerDown(e) {
   e.preventDefault();
 
   const origIdx = parseInt(img.dataset.origIdx);
+
+  // Select for desktop bbox
+  selectedIdx = origIdx;
+  renderBBox();
+
   const ptr = { x: e.clientX, y: e.clientY, origIdx };
   activePointers.set(e.pointerId, ptr);
 
@@ -447,6 +611,7 @@ function onPlacedPointerDown(e) {
     img.classList.add('poof');
     setTimeout(() => {
       placedItems.splice(origIdx, 1);
+      selectedIdx = -1;
       renderPlaced();
       autoSave();
     }, 300);
@@ -456,21 +621,22 @@ function onPlacedPointerDown(e) {
   }
   lastPlacedTap = { idx: origIdx, time: now };
 
-  // Single-finger drag
+  // Single-finger drag — move item in-place
   const item = placedItems[origIdx];
   if (!item) return;
 
+  const canvas = document.getElementById('princess-canvas');
+  const rect = canvas.getBoundingClientRect();
+
   drag = {
     source: 'canvas',
-    id: item.clothingId,
-    url: item.url,
-    scale: item.scale,
-    rotation: item.rotation || 0,
-    zIndex: item.zIndex,
-    isSticker: item.isSticker || false,
+    canvasIdx: origIdx,
     startX: e.clientX,
     startY: e.clientY,
-    canvasIdx: origIdx,
+    startItemX: item.x,
+    startItemY: item.y,
+    canvasW: rect.width,
+    canvasH: rect.height,
     hasMoved: false,
   };
 }
@@ -482,6 +648,17 @@ function onPointerMove(e) {
     ptr.y = e.clientY;
   }
 
+  // Desktop resize handle
+  if (resizeHandle) {
+    e.preventDefault();
+    const dx = e.clientX - resizeHandle.startX;
+    const scaleDelta = dx / resizeHandle.canvasW;
+    const newScale = Math.max(0.05, Math.min(3.0, resizeHandle.startScale + scaleDelta));
+    placedItems[resizeHandle.idx].scale = newScale;
+    updatePlacedStyle(resizeHandle.idx);
+    return;
+  }
+
   // Pinch-to-resize + rotate
   if (pinch) {
     e.preventDefault();
@@ -525,20 +702,29 @@ function onPointerMove(e) {
     if (drag.source === 'tray') {
       createGhost(drag.url);
       ghost.classList.add('lifting');
-    } else if (drag.source === 'canvas') {
-      placedItems.splice(drag.canvasIdx, 1);
-      renderPlaced();
-      createGhost(drag.url);
-      ghost.classList.add('lifting');
     }
   }
 
-  moveGhost(e.clientX, e.clientY);
+  if (drag.source === 'canvas') {
+    // Move item in-place
+    placedItems[drag.canvasIdx].x = drag.startItemX + dx / drag.canvasW;
+    placedItems[drag.canvasIdx].y = drag.startItemY + dy / drag.canvasH;
+    updatePlacedStyle(drag.canvasIdx);
+  } else {
+    moveGhost(e.clientX, e.clientY);
+  }
 }
 
 function onPointerUp(e) {
   activePointers.delete(e.pointerId);
 
+  // Desktop resize handle
+  if (resizeHandle) {
+    resizeHandle = null;
+    autoSave();
+    return;
+  }
+
   if (pinch) {
     const sameItem = [...activePointers.values()].filter(p => p.origIdx === pinch.idx);
     if (sameItem.length < 2) {
@@ -550,32 +736,38 @@ function onPointerUp(e) {
 
   if (!drag) return;
 
+  if (drag.source === 'canvas') {
+    // Canvas item: just save the new position
+    if (drag.hasMoved) autoSave();
+    drag = null;
+    return;
+  }
+
+  // Tray item: tap-to-place or drag-to-drop
   if (!drag.hasMoved) {
-    if (drag.source === 'tray') {
-      const ox = (Math.random() - 0.5) * 0.15;
-      const oy = (Math.random() - 0.5) * 0.15;
-      placedItems.push({
-        clothingId: drag.id,
-        x: 0.5 + ox,
-        y: 0.5 + oy,
-        scale: drag.scale,
-        rotation: 0,
-        zIndex: drag.zIndex,
-        url: drag.url,
-        isSticker: drag.isSticker,
-      });
-      renderPlaced();
-      animateNewItem();
-      autoSave();
-    }
+    const ox = (Math.random() - 0.5) * 0.15;
+    const oy = (Math.random() - 0.5) * 0.15;
+    placedItems.push({
+      itemId: drag.id,
+      x: 0.5 + ox,
+      y: 0.5 + oy,
+      scale: drag.scale,
+      rotation: 0,
+      zIndex: drag.zIndex,
+      url: drag.url,
+      isSticker: drag.isSticker,
+      sparkle: false,
+    });
+    renderPlaced();
+    animateNewItem();
+    autoSave();
     drag = null;
     return;
   }
 
-  // Drop
+  // Drop from tray onto canvas
   const canvas = document.getElementById('princess-canvas');
   const rect = canvas.getBoundingClientRect();
-  let dropped = false;
 
   if (
     e.clientX >= rect.left && e.clientX <= rect.right &&
@@ -584,23 +776,19 @@ function onPointerUp(e) {
     const nx = (e.clientX - rect.left) / rect.width;
     const ny = (e.clientY - rect.top) / rect.height;
     placedItems.push({
-      clothingId: drag.id,
+      itemId: drag.id,
       x: nx,
       y: ny,
       scale: drag.scale,
-      rotation: drag.rotation || 0,
+      rotation: 0,
       zIndex: drag.zIndex,
       url: drag.url,
       isSticker: drag.isSticker,
+      sparkle: false,
     });
     renderPlaced();
     animateNewItem();
     autoSave();
-    dropped = true;
-  }
-
-  if (!dropped && drag.source === 'canvas') {
-    autoSave();
   }
 
   removeGhost();

js/manage.js

@@ -1,4 +1,4 @@
-import { loadPrincesses, loadClothes, deletePrincess, deleteClothing, blobToURL } from './store.js';
+import { loadItems, loadDrawings, deleteItem, deleteDrawing, blobToURL } from './store.js';
 import { getCategoryInfo } from './models.js';
 
 let objectURLs = [];
@@ -9,8 +9,8 @@ export async function initManage() {
   objectURLs.forEach(u => URL.revokeObjectURL(u));
   objectURLs = [];
 
-  const princesses = await loadPrincesses();
-  const clothes = await loadClothes();
+  const items = await loadItems();
+  const drawings = await loadDrawings();
 
   screen.innerHTML = `
     <div class="manage-layout">
@@ -20,52 +20,51 @@ export async function initManage() {
       </div>
 
       <div class="manage-section">
-        <h3 class="manage-heading">\u{1F478} Princesses</h3>
-        <div id="princess-grid" class="manage-grid">
-          ${princesses.length === 0 ? '<p class="manage-empty">No princesses yet</p>' : ''}
+        <h3 class="manage-heading">\u{1F3A8} Items</h3>
+        <div id="items-grid" class="manage-grid">
+          ${items.length === 0 ? '<p class="manage-empty">No items yet</p>' : ''}
         </div>
       </div>
 
       <div class="manage-section">
-        <h3 class="manage-heading">\u{1F457} Clothes</h3>
-        <div id="clothes-grid" class="manage-grid">
-          ${clothes.length === 0 ? '<p class="manage-empty">No clothes yet</p>' : ''}
+        <h3 class="manage-heading">\u{1F4CB} Drawings</h3>
+        <div id="drawings-grid" class="manage-grid">
+          ${drawings.length === 0 ? '<p class="manage-empty">No saved drawings</p>' : ''}
         </div>
       </div>
     </div>
   `;
 
-  const princessGrid = document.getElementById('princess-grid');
-  if (princesses.length > 0) {
-    princessGrid.innerHTML = princesses.map(p => {
-      const url = blobToURL(p.imageBlob);
-      objectURLs.push(url);
-      return `
-        <div class="manage-card" data-id="${p.id}" data-type="princess">
-          <img src="${url}" class="manage-thumb" alt="${p.name}"/>
-          <span class="manage-name">${p.name || 'Princess'}</span>
-          <button class="manage-delete" data-id="${p.id}" data-type="princess">\u{1F5D1}</button>
-        </div>
-      `;
-    }).join('');
-  }
-
-  const clothesGrid = document.getElementById('clothes-grid');
-  if (clothes.length > 0) {
-    clothesGrid.innerHTML = clothes.map(c => {
+  const itemsGrid = document.getElementById('items-grid');
+  if (items.length > 0) {
+    itemsGrid.innerHTML = items.map(c => {
       const url = blobToURL(c.imageBlob);
       objectURLs.push(url);
       const catInfo = getCategoryInfo(c.category);
       return `
-        <div class="manage-card" data-id="${c.id}" data-type="clothing">
+        <div class="manage-card" data-id="${c.id}" data-type="item">
           <img src="${url}" class="manage-thumb checkerboard-bg" alt="${c.name}"/>
           <span class="manage-name">${catInfo ? catInfo.emoji : ''} ${c.name || (catInfo ? catInfo.label : '')}</span>
-          <button class="manage-delete" data-id="${c.id}" data-type="clothing">\u{1F5D1}</button>
+          <button class="manage-delete" data-id="${c.id}" data-type="item">\u{1F5D1}</button>
         </div>
       `;
     }).join('');
   }
 
+  const drawingsGrid = document.getElementById('drawings-grid');
+  if (drawings.length > 0) {
+    drawingsGrid.innerHTML = drawings.map((d, i) => `
+      <div class="manage-card" data-id="${d.id}" data-type="drawing">
+        <div class="manage-thumb drawing-thumb">
+          <span class="drawing-icon">\u{1F5BC}\uFE0F</span>
+          <span class="drawing-count">${d.items ? d.items.length : 0} items</span>
+        </div>
+        <span class="manage-name">${d.name || `Drawing ${i + 1}`}</span>
+        <button class="manage-delete" data-id="${d.id}" data-type="drawing">\u{1F5D1}</button>
+      </div>
+    `).join('');
+  }
+
   // Delete handlers
   screen.querySelectorAll('.manage-delete').forEach(btn => {
     btn.addEventListener('click', async (e) => {
@@ -77,13 +76,12 @@ export async function initManage() {
       card.classList.add('poof');
       await new Promise(r => setTimeout(r, 300));
 
-      if (type === 'princess') {
-        await deletePrincess(id);
+      if (type === 'drawing') {
+        await deleteDrawing(id);
       } else {
-        await deleteClothing(id);
+        await deleteItem(id);
       }
 
-      // Re-render
       initManage();
     });
   });

js/ml-client.js

@@ -0,0 +1,110 @@
+// Client for the Hugging Face Space that runs background removal
+// server-side. In-browser inference via transformers.js proved
+// unreliable on iOS (see memory/project_in_browser_ml_dead_end.md),
+// so the model now lives on a free HF Docker Space. The whole point
+// of this file is to hide that from upload.js — the `removeBackground`
+// signature is unchanged.
+//
+// Deployment: see ../space/README.md. After pushing the Space, set
+// SPACE_URL below to the resulting `https://USERNAME-princess-bg.hf.space`
+// URL.
+
+import { tagOp } from './diag.js';
+
+// HF Space: https://huggingface.co/spaces/sdragly/background-removal
+const SPACE_URL = 'https://sdragly-background-removal.hf.space';
+
+// 90s covers the worst-case cold-start (~15-30s container boot) plus
+// a slow image upload on a weak cellular connection. If we ever need
+// more, something has gone wrong upstream and we should surface the
+// error rather than hang the UI.
+const REQUEST_TIMEOUT_MS = 90_000;
+
+// Show a "waking up" hint if the response doesn't come back quickly.
+// The typical warm response is <3s; anything slower is either a cold
+// start or a slow network, and the user deserves to know.
+const COLD_START_HINT_MS = 3_000;
+
+/**
+ * Remove background from an image blob via the HF Space.
+ * @param {Blob} blob  JPEG/PNG image
+ * @param {(p: {status: string, message: string, progress?: number}) => void} [onProgress]
+ * @returns {Promise<Blob>}  PNG with transparent background
+ */
+export async function removeBackground(blob, onProgress) {
+  const progress = (message) => {
+    if (onProgress) onProgress({ status: 'processing', message });
+  };
+
+  tagOp('[remove-bg] uploading');
+  progress('Sending to server...');
+
+  // If the server is cold, the first POST will hang for ~15-30s. Flip
+  // the message after a few seconds so the user knows nothing's broken.
+  const coldTimer = setTimeout(() => {
+    tagOp('[remove-bg] waking server');
+    progress('Waking up server (first request is slow)...');
+  }, COLD_START_HINT_MS);
+
+  const abort = new AbortController();
+  const timeoutTimer = setTimeout(() => abort.abort(), REQUEST_TIMEOUT_MS);
+
+  try {
+    const form = new FormData();
+    // Use a stable filename — server only cares about content, but
+    // FormData requires *something* here.
+    form.append('file', blob, 'input.png');
+
+    const res = await fetch(`${SPACE_URL}/remove-bg`, {
+      method: 'POST',
+      body: form,
+      signal: abort.signal,
+    });
+
+    clearTimeout(coldTimer);
+
+    if (!res.ok) {
+      const text = await res.text().catch(() => '');
+      throw new Error(
+        `Server returned ${res.status}${text ? `: ${text.slice(0, 200)}` : ''}`,
+      );
+    }
+
+    tagOp('[remove-bg] receiving');
+    progress('Receiving result...');
+    const result = await res.blob();
+    tagOp('[remove-bg] done');
+    if (onProgress) onProgress({ status: 'done', message: 'Background removed' });
+    return result;
+  } catch (err) {
+    clearTimeout(coldTimer);
+    if (err.name === 'AbortError') {
+      throw new Error(
+        `Server request timed out after ${REQUEST_TIMEOUT_MS / 1000}s`,
+      );
+    }
+    throw err;
+  } finally {
+    clearTimeout(timeoutTimer);
+  }
+}
+
+/**
+ * Auto-segment a full drawing into distinct parts.
+ *
+ * Not implemented server-side yet. Returning an empty array lets the
+ * Full Drawing flow in upload.js bail out cleanly with "no segments
+ * found" instead of crashing. If/when we add a SAM endpoint to the
+ * Space, wire it up here.
+ */
+export async function autoSegment(blob, onProgress) {
+  tagOp('[auto-segment] stub (not implemented server-side)');
+  if (onProgress) {
+    onProgress({
+      status: 'done',
+      message: 'Full-drawing auto-split is not available yet',
+      progress: 100,
+    });
+  }
+  return [];
+}

js/ml-worker.js

@@ -0,0 +1,36 @@
+// Web Worker that runs the heavy ML pipelines off the main thread.
+// Each call to ml-client spawns a fresh worker; this file is loaded once
+// per worker instance and torn down when the worker is terminated.
+//
+// On iOS / Android, the WebContent process can be killed under memory
+// pressure. Putting the model here means a model OOM kills the worker
+// (which we already throw away after each op) — the page itself stays
+// alive much more often.
+
+import { removeBackground } from './segmentation.js';
+import { autoSegment } from './auto-segment.js';
+
+self.onmessage = async (e) => {
+  const { type, payload } = e.data || {};
+
+  const onProgress = (info) => {
+    try { self.postMessage({ kind: 'progress', payload: info }); } catch (_) {}
+  };
+
+  try {
+    let result;
+    if (type === 'remove-bg') {
+      result = await removeBackground(payload.blob, onProgress);
+    } else if (type === 'auto-segment') {
+      result = await autoSegment(payload.blob, onProgress);
+    } else {
+      throw new Error(`Unknown task: ${type}`);
+    }
+    self.postMessage({ kind: 'result', payload: result });
+  } catch (err) {
+    self.postMessage({
+      kind: 'error',
+      payload: { message: err && err.message ? err.message : String(err) },
+    });
+  }
+};

js/models.js

@@ -1,35 +1,21 @@
 export const CATEGORIES = [
-  { id: 'crown',    emoji: '\u{1F451}', label: 'Crown',    targetAnchor: 'head_top',    zIndex: 6 },
-  { id: 'dress',    emoji: '\u{1F457}', label: 'Dress',    targetAnchor: 'neck',        zIndex: 2 },
-  { id: 'top',      emoji: '\u{1F455}', label: 'Top',      targetAnchor: 'neck',        zIndex: 3 },
-  { id: 'skirt',    emoji: '\u{1FA73}', label: 'Skirt',    targetAnchor: 'waist',       zIndex: 3 },
-  { id: 'shoes',    emoji: '\u{1F460}', label: 'Shoes',    targetAnchor: 'feet_center', zIndex: 1 },
-  { id: 'cape',     emoji: '\u{1F9E3}', label: 'Cape',     targetAnchor: 'neck',        zIndex: 4 },
-  { id: 'wand',     emoji: '\u{1FA84}', label: 'Wand',     targetAnchor: 'right_hand',  zIndex: 7 },
-  { id: 'necklace', emoji: '\u{1F4FF}', label: 'Necklace', targetAnchor: 'neck',        zIndex: 5 },
-  { id: 'earrings', emoji: '\u2728',    label: 'Earrings', targetAnchor: 'head_center', zIndex: 6 },
-  { id: 'bag',      emoji: '\u{1F45C}', label: 'Bag',      targetAnchor: 'left_hand',   zIndex: 7 },
+  { id: 'princess',  emoji: '\u{1F478}', label: 'Princess',  zIndex: 2, scale: 0.8 },
+  { id: 'crown',     emoji: '\u{1F451}', label: 'Crown',     zIndex: 6, scale: 0.3 },
+  { id: 'dress',     emoji: '\u{1F457}', label: 'Dress',     zIndex: 3, scale: 0.6 },
+  { id: 'top',       emoji: '\u{1F455}', label: 'Top',       zIndex: 4, scale: 0.5 },
+  { id: 'skirt',     emoji: '\u{1FA73}', label: 'Skirt',     zIndex: 3, scale: 0.5 },
+  { id: 'shoes',     emoji: '\u{1F460}', label: 'Shoes',     zIndex: 1, scale: 0.3 },
+  { id: 'cape',      emoji: '\u{1F9E3}', label: 'Cape',      zIndex: 4, scale: 0.6 },
+  { id: 'wand',      emoji: '\u{1FA84}', label: 'Wand',      zIndex: 7, scale: 0.3 },
+  { id: 'necklace',  emoji: '\u{1F4FF}', label: 'Necklace',  zIndex: 5, scale: 0.25 },
+  { id: 'earrings',  emoji: '\u2728',    label: 'Earrings',  zIndex: 6, scale: 0.2 },
+  { id: 'bag',       emoji: '\u{1F45C}', label: 'Bag',       zIndex: 7, scale: 0.3 },
+  { id: 'other',     emoji: '\u{1F3A8}', label: 'Other',     zIndex: 5, scale: 0.5 },
 ];
 
 export function getCategoryInfo(id) {
-  return CATEGORIES.find(c => c.id === id);
+  return CATEGORIES.find(c => c.id === id) || CATEGORIES[CATEGORIES.length - 1];
 }
 
-// Default princess anchor positions (normalized 0-1)
-// Applied as heuristics based on bounding box
-export const DEFAULT_ANCHORS = {
-  head_top:        { x: 0.5, y: 0.07 },
-  head_center:     { x: 0.5, y: 0.17 },
-  neck:            { x: 0.5, y: 0.27 },
-  left_shoulder:   { x: 0.35, y: 0.30 },
-  right_shoulder:  { x: 0.65, y: 0.30 },
-  waist:           { x: 0.5, y: 0.53 },
-  left_hand:       { x: 0.30, y: 0.60 },
-  right_hand:      { x: 0.70, y: 0.60 },
-  feet_center:     { x: 0.5, y: 0.93 },
-};
-
-export const SNAP_THRESHOLD_PX = 80;
-export const MAGNETIC_START_PX = 160;
 export const DOUBLE_TAP_MS = 300;
 export const DRAG_DEAD_ZONE_PX = 10;

js/segmentation.js

@@ -1,22 +1,53 @@
-// Background removal using @huggingface/transformers with RMBG-1.4
-// Runs entirely in the browser (WebGPU with WASM fallback)
+// Background removal using @huggingface/transformers with MODNet.
+// Runs entirely in the browser (WebGPU with WASM fallback).
+//
+// We use Xenova/modnet (portrait matting, ~6.5M params) instead of
+// briaai/RMBG-1.4 because RMBG's ONNX has a fixed [1,3,1024,1024] input
+// shape. U²-Net activations at 1024x1024 blow the WebContent heap on
+// phones without WebGPU, triggering a Jetsam kill mid-inference. MODNet
+// accepts dynamic shapes and preprocesses to a 512-short-edge image,
+// which is ~4x less activation memory and actually fits on mobile WASM.
 
 let transformers = null;
 let loading = false;
 let loadPromise = null;
 
-const MODEL_DIM = 512;  // resolution for model inference
-const OUTPUT_DIM = 1024; // max resolution for final output
-
-async function getTransformers() {
+// MODNet preprocesses to 512 on the short edge, so activation memory is
+// roughly proportional to the output image we feed it. OUTPUT_DIM caps the
+// saved image (and indirectly the model's working resolution).
+const OUTPUT_DIM = 768;
+const MODEL_ID = 'Xenova/modnet';
+
+// Workarounds for transformers.js + onnxruntime-web on iOS Safari
+// (and memory-constrained mobile browsers in general).
+//
+// Cribbed from cmorenogit/app-profile@01081eb, which hit the same
+// "tab silently dies during model load/inference" problem:
+//
+//   1. numThreads=1 — multi-threaded WASM on JavaScriptCore (iOS Safari)
+//      spirals activation memory across worker threads. Issue #1242.
+//      Slower, but single-threaded stays under the tab budget.
+//   2. useBrowserCache=false — the Cache API adds a full-size *copy* of
+//      the model during loading (fetch buffer -> Cache -> WASM heap),
+//      tripling peak. Re-downloading each session is cheaper than
+//      crashing.
+//   3. No WebGPU on iOS — ONNX Runtime JSEP bug #26827 breaks it on
+//      iOS 18.x Safari anyway; we were already on WASM in practice.
+//
+// These are harmless on Android/desktop (just slightly slower loads),
+// so we apply them unconditionally rather than sniffing UA.
+export 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;
+  const env = transformers.env;
+  env.allowLocalModels = false;
+  // (1) no Cache API copy — fetch goes straight to WASM heap
+  env.useBrowserCache = false;
+  // (2) single-threaded WASM — kills the multi-copy activation spiral
+  if (env.backends?.onnx?.wasm) {
+    env.backends.onnx.wasm.numThreads = 1;
   }
   return transformers;
 }
@@ -39,69 +70,72 @@ async function _doLoad(onProgress) {
 
   if (onProgress) onProgress({ status: 'loading', message: 'Loading AI model...' });
 
-  const model = await AutoModel.from_pretrained('briaai/RMBG-1.4', {
-    device: 'wasm',
-    dtype: 'fp32',
-    progress_callback: (p) => {
-      if (onProgress && p.progress != null) {
-        onProgress({
-          status: 'downloading',
-          message: `Downloading model: ${Math.round(p.progress)}%`,
-          progress: p.progress,
-        });
-      }
-    },
-  });
+  const hasWebGPU = typeof navigator !== 'undefined' && !!navigator.gpu;
+  const device = hasWebGPU ? 'webgpu' : 'wasm';
 
-  const processor = await AutoProcessor.from_pretrained('briaai/RMBG-1.4');
+  const dtypeProgress = (p) => {
+    if (onProgress && p.progress != null) {
+      onProgress({
+        status: 'downloading',
+        message: `Downloading model: ${Math.round(p.progress)}%`,
+        progress: p.progress,
+      });
+    }
+  };
+
+  // Try smallest dtype first to keep peak memory low on phones.
+  const dtypePreference = device === 'webgpu'
+    ? ['fp16', 'q8', 'fp32']
+    : ['q8', 'fp16', 'fp32'];
+
+  let model = null;
+  let loadedDtype = null;
+  let lastErr = null;
+  for (const dtype of dtypePreference) {
+    try {
+      model = await AutoModel.from_pretrained(MODEL_ID, {
+        device,
+        dtype,
+        progress_callback: dtypeProgress,
+      });
+      loadedDtype = dtype;
+      console.log(`[segmentation] loaded ${MODEL_ID} with dtype=${dtype}, device=${device}`);
+      break;
+    } catch (err) {
+      console.warn(`[segmentation] dtype=${dtype} failed:`, err && err.message);
+      lastErr = err;
+    }
+  }
+  if (!model) throw lastErr || new Error(`Failed to load ${MODEL_ID}`);
 
-  return { model, processor };
+  const processor = await AutoProcessor.from_pretrained(MODEL_ID);
+
+  return { model, processor, dtype: loadedDtype, device };
 }
 
 /**
- * Decode image once and produce two sizes (output + model).
- * Avoids decoding the full-res camera image multiple times.
+ * Decode the camera image once, downscaled to OUTPUT_DIM. The model's own
+ * processor will further resize this to short-edge 512 for inference, so
+ * the same blob is used both as the model input and as the canvas we apply
+ * the final mask to.
  */
-async function prepareImages(imageBlob) {
-  // Decode full image once just to get dimensions, then close immediately
+async function prepareOutputImage(imageBlob) {
   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);
+  const ratio = Math.min(1, OUTPUT_DIM / Math.max(fullW, fullH));
+  const w = Math.round(fullW * ratio);
+  const h = Math.round(fullH * ratio);
 
-  // Use resizeWidth/resizeHeight to avoid a full-res intermediate bitmap
-  const outBitmap = await createImageBitmap(imageBlob, {
-    resizeWidth: outW, resizeHeight: outH, resizeQuality: 'medium',
+  const bitmap = await createImageBitmap(imageBlob, {
+    resizeWidth: w, resizeHeight: h, 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 };
+  const canvas = new OffscreenCanvas(w, h);
+  canvas.getContext('2d').drawImage(bitmap, 0, 0);
+  bitmap.close();
+  return canvas.convertToBlob({ type: 'image/png' });
 }
 
 /**
@@ -111,36 +145,48 @@ async function prepareImages(imageBlob) {
  * @returns {Promise<Blob>} - PNG with transparent background
  */
 export async function removeBackground(imageBlob, 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);
+  const tag = (message) => {
+    if (onProgress) onProgress({ status: 'processing', message });
+  };
+
+  // 1. Downscale the camera photo BEFORE loading the model (lower peak mem)
+  tag('bg: decoding photo');
+  const outputBlob = await prepareOutputImage(imageBlob);
 
   // 2. Load model
-  const { model, processor } = await loadModel(onProgress);
+  tag('bg: loading model');
+  const { model, processor, dtype, device } = await loadModel(onProgress);
   const { RawImage } = await getTransformers();
+  const label = `bg[${dtype}/${device}]`;
 
-  if (onProgress) onProgress({ status: 'processing', message: 'Removing background...' });
-
-  // 3. Run inference on small image
-  const url = URL.createObjectURL(modelBlob);
+  // 3. Preprocess via the model's own processor. MODNet takes dynamic
+  //    input sizes, short edge 512, so the working resolution scales
+  //    with the output blob we feed it.
+  tag(`${label}: preprocessing`);
+  const url = URL.createObjectURL(outputBlob);
   const image = await RawImage.fromURL(url);
   URL.revokeObjectURL(url);
-
   const { pixel_values } = await processor(image);
+  tag(`${label}: tensor ${pixel_values.dims.join('x')}`);
+
+  // 4. Forward pass — biggest memory peak. MODNet activations scale with
+  //    the input tensor size; the tag above shows the actual dims.
+  tag(`${label}: running inference`);
   const { output } = await model({ input: pixel_values });
 
   const maskData = output[0].data; // Float32Array
   const maskH = output[0].dims[1] || output.dims?.[2];
   const maskW = output[0].dims[2] || output.dims?.[3];
 
-  // Dispose tensors to free WASM memory
+  // 5. Dispose tensors and model immediately so the mask-application step
+  //    has the heap to itself
+  tag(`${label}: disposing model`);
   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
+  // 6. Apply mask to the output-sized image
+  tag(`${label}: applying mask`);
   const bitmap = await createImageBitmap(outputBlob);
   const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
   const ctx = canvas.getContext('2d');
@@ -150,21 +196,27 @@ export async function removeBackground(imageBlob, onProgress) {
   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 < canvas.height; y++) {
-    for (let x = 0; x < canvas.width; x++) {
+  const data = imgData.data;
+  const cw = canvas.width;
+  const ch = canvas.height;
+
+  for (let y = 0; y < ch; y++) {
+    const my = Math.min(Math.floor(y * scaleY), maskH - 1);
+    const maskRow = my * maskW;
+    const rowOffset = y * cw * 4;
+    for (let x = 0; x < cw; 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];
-      const alpha = Math.round(Math.max(0, Math.min(1, maskVal)) * 255);
-      imgData.data[(y * canvas.width + x) * 4 + 3] = alpha;
+      const v = maskData[maskRow + mx];
+      data[rowOffset + x * 4 + 3] = v <= 0 ? 0 : v >= 1 ? 255 : Math.round(v * 255);
     }
   }
   ctx.putImageData(imgData, 0, 0);
 
-  if (onProgress) onProgress({ status: 'done', message: 'Done!' });
+  tag(`${label}: encoding result`);
+  const result = await canvas.convertToBlob({ type: 'image/png' });
 
-  return canvas.convertToBlob({ type: 'image/png' });
+  if (onProgress) onProgress({ status: 'done', message: `${label}: done` });
+  return result;
 }
 
 function disposeModel(model) {

js/store.js

@@ -1,5 +1,5 @@
 const DB_NAME = 'princess-game';
-const DB_VERSION = 2;
+const DB_VERSION = 3;
 
 let db = null;
 
@@ -27,6 +27,9 @@ function openDB() {
       if (!d.objectStoreNames.contains('photos')) {
         d.createObjectStore('photos', { keyPath: 'id' });
       }
+      if (!d.objectStoreNames.contains('drawings')) {
+        d.createObjectStore('drawings', { keyPath: 'id' });
+      }
     };
     req.onsuccess = () => { db = req.result; resolve(db); };
     req.onerror = () => reject(req.error);
@@ -47,67 +50,88 @@ function reqToPromise(req) {
   });
 }
 
-// --- Princesses ---
+// --- Drawings (saved canvases with placed items) ---
 
-export async function savePrincess({ name, imageBlob, anchors }) {
+export async function saveDrawing({ name, items }) {
   const id = uuid();
-  const store = await tx('princesses', 'readwrite');
-  const record = { id, name, imageBlob, anchors, createdAt: Date.now() };
+  const store = await tx('drawings', 'readwrite');
+  const record = { id, name: name || '', items: items || [], createdAt: Date.now() };
   await reqToPromise(store.put(record));
   return record;
 }
 
-export async function loadPrincesses() {
-  const store = await tx('princesses');
+export async function loadDrawings() {
+  const store = await tx('drawings');
   return reqToPromise(store.getAll());
 }
 
-export async function getPrincess(id) {
-  const store = await tx('princesses');
-  return reqToPromise(store.get(id));
-}
-
-export async function updatePrincessAnchors(id, anchors) {
-  const store = await tx('princesses', 'readwrite');
-  const p = await reqToPromise(store.get(id));
-  if (p) {
-    p.anchors = anchors;
-    await reqToPromise(store.put(p));
+export async function updateDrawingItems(id, items) {
+  const store = await tx('drawings', 'readwrite');
+  const d = await reqToPromise(store.get(id));
+  if (d) {
+    d.items = items;
+    await reqToPromise(store.put(d));
   }
 }
 
-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));
-  }
+export async function deleteDrawing(id) {
+  const store = await tx('drawings', 'readwrite');
+  await reqToPromise(store.delete(id));
 }
 
-// --- Clothes ---
+// --- Items (all user-uploaded images: princesses, clothing, anything) ---
 
-export async function saveClothing({ name, category, imageBlob, targetAnchor, scale, zIndex }) {
+export async function saveItem({ name, category, imageBlob, scale, zIndex }) {
   const id = uuid();
   const store = await tx('clothes', 'readwrite');
-  const record = { id, name, category, imageBlob, targetAnchor, scale: scale || 0.8, zIndex, createdAt: Date.now() };
+  const record = {
+    id, name: name || '', category: category || 'other',
+    imageBlob, scale: scale || 0.5, zIndex: zIndex || 5,
+    createdAt: Date.now(),
+  };
   await reqToPromise(store.put(record));
   return record;
 }
 
-export async function loadClothes() {
+export async function loadItems() {
   const store = await tx('clothes');
   return reqToPromise(store.getAll());
 }
 
-export async function deletePrincess(id) {
-  const store = await tx('princesses', 'readwrite');
+export async function deleteItem(id) {
+  const store = await tx('clothes', 'readwrite');
   await reqToPromise(store.delete(id));
 }
 
-export async function deleteClothing(id) {
-  const store = await tx('clothes', 'readwrite');
-  await reqToPromise(store.delete(id));
+// --- Legacy compat: migrate old princesses into items on load ---
+
+export async function migrateOldData() {
+  const princessStore = await tx('princesses');
+  const oldPrincesses = await reqToPromise(princessStore.getAll());
+
+  if (oldPrincesses.length > 0) {
+    for (const p of oldPrincesses) {
+      await saveItem({
+        name: p.name || 'Princess',
+        category: 'princess',
+        imageBlob: p.imageBlob,
+        scale: 0.8,
+        zIndex: 2,
+      });
+    }
+    // Also migrate any saved outfits into drawings
+    for (const p of oldPrincesses) {
+      if (p.outfit && p.outfit.length > 0) {
+        await saveDrawing({
+          name: p.name || 'Drawing',
+          items: p.outfit,
+        });
+      }
+    }
+    // Clear old store
+    const writeStore = await tx('princesses', 'readwrite');
+    await reqToPromise(writeStore.clear());
+  }
 }
 
 // --- Photos (captured source images) ---
@@ -125,6 +149,11 @@ export async function loadPhotos() {
   return reqToPromise(store.getAll());
 }
 
+export async function updatePhoto(photo) {
+  const store = await tx('photos', 'readwrite');
+  await reqToPromise(store.put(photo));
+}
+
 export async function deletePhoto(id) {
   const store = await tx('photos', 'readwrite');
   await reqToPromise(store.delete(id));

js/upload.js

@@ -1,29 +1,66 @@
-import { CATEGORIES, getCategoryInfo, DEFAULT_ANCHORS } from './models.js';
-import { savePrincess, saveClothing, savePhoto, loadPhotos, deletePhoto, blobToURL } from './store.js';
-import { removeBackground } from './segmentation.js';
-import { autoSegment } from './auto-segment.js';
+import { CATEGORIES, getCategoryInfo } from './models.js';
+import { saveItem, savePhoto, loadPhotos, updatePhoto, deletePhoto, blobToURL } from './store.js';
+import { removeBackground, autoSegment } from './ml-client.js';
 import { showSegmentReview } from './segment-review.js';
 import { showPolygonSelector } from './polygon-select.js';
-import { navigate } from './app.js';
+import { tagOp } from './diag.js';
 
-let uploadType = 'princess';
-let selectedCategory = 'dress';
+let selectedCategory = 'princess';
 let imageBlob = null;       // original photo
 let croppedBlob = null;     // after polygon crop (or same as imageBlob if skipped)
 let polygon = null;         // normalized polygon coords from selector
 let segmentedBlob = null;   // after background removal
 let previewURL = null;
 let croppedURL = null;
+let fullDrawingMode = false;
 
 let photoURLs = []; // object URLs for gallery thumbnails
 
+// Cap the gallery at the N most recent photos. Each thumbnail is an
+// <img> that iOS may decode on scroll-into-view; even downscaled photos
+// add up, and we don't need to show every photo ever taken.
+const GALLERY_MAX = 10;
+
+// Any photo bigger than this is almost certainly a legacy full-size
+// capture from before downscalePhoto existed. We rewrite them in place
+// on load so subsequent sessions don't pay the cost again.
+const LEGACY_MIGRATE_BYTES = 800 * 1024;
+
+async function migrateLegacyPhotos(photos) {
+  for (const p of photos) {
+    if (!p.imageBlob || p.imageBlob.size <= LEGACY_MIGRATE_BYTES) continue;
+    tagOp(`migrate: ${Math.round(p.imageBlob.size / 1024)}KB photo`);
+    try {
+      const small = await downscalePhoto(p.imageBlob);
+      if (small && small.size < p.imageBlob.size) {
+        p.imageBlob = small;
+        await updatePhoto(p);
+      }
+    } catch (err) {
+      console.warn('[upload] photo migration failed', err);
+    }
+    // Yield so iOS gets a chance to reclaim the full-res decode buffer
+    // before we touch the next one.
+    await new Promise(r => setTimeout(r, 50));
+  }
+}
+
 export async function initUpload() {
+  tagOp('upload: init');
   const screen = document.getElementById('upload-screen');
 
   photoURLs.forEach(u => URL.revokeObjectURL(u));
   photoURLs = [];
 
-  const photos = await loadPhotos();
+  let photos = await loadPhotos();
+  await migrateLegacyPhotos(photos);
+  // Show only the most recent few; keep oldest photos in IDB (user can
+  // still delete them explicitly via the × button after we re-render).
+  photos = photos
+    .slice()
+    .sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0))
+    .slice(0, GALLERY_MAX);
+  tagOp(`upload: ${photos.length} gallery photos`);
 
   screen.innerHTML = `
     <div class="upload-header">
@@ -31,12 +68,6 @@ export async function initUpload() {
       <h2>Add something new!</h2>
     </div>
 
-    <div class="type-toggle">
-      <button class="pill active" data-type="princess">\u{1F478} Princess</button>
-      <button class="pill" data-type="clothes">\u{1F457} Clothes</button>
-      <button class="pill" data-type="full-drawing">\u2728 Full Drawing</button>
-    </div>
-
     <div class="camera-zone">
       <input type="file" accept="image/*" capture="environment" id="camera-input" class="camera-input"/>
       <label for="camera-input" id="camera-label" class="camera-label">
@@ -54,7 +85,8 @@ export async function initUpload() {
             photoURLs.push(url);
             return `
               <div class="photo-gallery-item" data-photo-id="${p.id}">
-                <img src="${url}" class="photo-gallery-thumb" draggable="false"/>
+                <img src="${url}" class="photo-gallery-thumb" draggable="false"
+                     loading="lazy" decoding="async"/>
                 <button class="photo-gallery-delete" data-photo-id="${p.id}">\u00D7</button>
               </div>
             `;
@@ -67,19 +99,24 @@ export async function initUpload() {
       \u2702\uFE0F Select area
     </button>
 
-    <div id="category-section" class="category-picker" style="display:none">
+    <div id="category-section" class="category-picker">
       <p class="picker-label">What kind?</p>
       <div class="category-grid" id="category-grid"></div>
     </div>
 
-    <div class="name-input-wrap">
+    <div class="name-input-wrap" id="name-wrap">
       <label for="asset-name">Name (optional)</label>
       <input id="asset-name" type="text" placeholder="Give it a name..." class="name-input"/>
     </div>
 
-    <button id="submit-btn" class="big-button magic-btn" disabled>
-      \u2728 Magic Time! \u2728
-    </button>
+    <div class="upload-actions" id="upload-actions" style="display:none">
+      <button id="submit-btn" class="big-button magic-btn">
+        \u2728 Magic Time! \u2728
+      </button>
+      <button id="full-drawing-btn" class="pill">
+        \u2728 Full Drawing (auto-split)
+      </button>
+    </div>
 
     <div id="upload-status"></div>
   `;
@@ -99,6 +136,38 @@ function buildCategoryGrid() {
   `).join('');
 }
 
+// Modern phone cameras produce ~3000x4000 JPEGs. Fully decoded that's
+// ~48 MB of RGBA pixels, and iOS holds it pinned for the lifetime of the
+// file reference. We only need ~1280 on the long edge for everything
+// downstream (OUTPUT_DIM=768 for save, MODNet preprocesses to short-edge
+// 512 for inference, polygon selector and preview render well below this).
+// Re-encoding as JPEG at 85% keeps the on-disk size tiny too.
+async function downscalePhoto(file, maxLongEdge = 1280) {
+  // We have to decode once to read dimensions. Close it immediately.
+  const probe = await createImageBitmap(file);
+  const { width: origW, height: origH } = probe;
+  probe.close();
+
+  if (Math.max(origW, origH) <= maxLongEdge) {
+    return file; // already small enough, keep original
+  }
+
+  const ratio = maxLongEdge / Math.max(origW, origH);
+  const w = Math.round(origW * ratio);
+  const h = Math.round(origH * ratio);
+
+  // Second decode directly at the target size — the big one is short-lived.
+  const bitmap = await createImageBitmap(file, {
+    resizeWidth: w,
+    resizeHeight: h,
+    resizeQuality: 'medium',
+  });
+  const canvas = new OffscreenCanvas(w, h);
+  canvas.getContext('2d').drawImage(bitmap, 0, 0);
+  bitmap.close();
+  return canvas.convertToBlob({ type: 'image/jpeg', quality: 0.85 });
+}
+
 function selectImage(blob) {
   imageBlob = blob;
   croppedBlob = null;
@@ -110,32 +179,13 @@ function selectImage(blob) {
   croppedURL = null;
 
   showPhotoPreview(previewURL);
-  document.getElementById('select-area-btn').style.display =
-    uploadType === 'full-drawing' ? 'none' : '';
+  document.getElementById('select-area-btn').style.display = '';
   document.getElementById('upload-status').innerHTML = '';
-  document.getElementById('submit-btn').style.display = '';
+  document.getElementById('upload-actions').style.display = '';
   updateSubmitState();
 }
 
 function bindEvents(photos) {
-  // Type toggle
-  document.querySelectorAll('.type-toggle .pill').forEach(btn => {
-    btn.addEventListener('click', () => {
-      uploadType = btn.dataset.type;
-      document.querySelectorAll('.type-toggle .pill').forEach(b => b.classList.remove('active'));
-      btn.classList.add('active');
-      document.getElementById('category-section').style.display =
-        uploadType === 'clothes' ? '' : 'none';
-      // Hide select-area and name for full-drawing mode
-      const isFullDrawing = uploadType === 'full-drawing';
-      document.getElementById('select-area-btn').style.display =
-        (isFullDrawing || !imageBlob) ? 'none' : '';
-      document.querySelector('.name-input-wrap').style.display =
-        isFullDrawing ? 'none' : '';
-      updateSubmitState();
-    });
-  });
-
   // Category picker
   document.getElementById('category-grid').addEventListener('click', (e) => {
     const btn = e.target.closest('.category-btn');
@@ -145,36 +195,39 @@ function bindEvents(photos) {
     btn.classList.add('selected');
   });
 
-  // Camera input — save to gallery automatically
+  // Camera input — downscale immediately so we never hold the full-res
+  // camera JPEG, then save to gallery.
   document.getElementById('camera-input').addEventListener('change', async (e) => {
     const file = e.target.files[0];
     if (!file) return;
-
-    // Save to photo gallery for reuse
-    await savePhoto(file);
-
-    selectImage(file);
+    tagOp(`capture: downscaling ${Math.round(file.size / 1024)}KB`);
+    const resized = await downscalePhoto(file);
+    tagOp(`capture: downscaled -> ${Math.round(resized.size / 1024)}KB`);
+    await savePhoto(resized);
+    selectImage(resized);
   });
 
   // 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
+        initUpload();
         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);
+      if (photo) {
+        // Downscale is idempotent — no-op for photos saved after this fix,
+        // catches any full-res photos left over from before.
+        const resized = await downscalePhoto(photo.imageBlob);
+        selectImage(resized);
+      }
     });
   }
 
@@ -186,6 +239,9 @@ function bindEvents(photos) {
 
   // Submit -> segmentation
   document.getElementById('submit-btn').addEventListener('click', handleMagicTime);
+
+  // Full drawing mode
+  document.getElementById('full-drawing-btn').addEventListener('click', handleFullDrawing);
 }
 
 function showPhotoPreview(url, caption) {
@@ -201,7 +257,7 @@ async function handleSelectArea() {
   if (!previewURL) return;
 
   const result = await showPolygonSelector(previewURL);
-  if (!result) return; // cancelled
+  if (!result) return;
 
   croppedBlob = result.imageBlob;
   polygon = result.polygon;
@@ -214,58 +270,44 @@ async function handleSelectArea() {
 }
 
 function updateSubmitState() {
-  const name = document.getElementById('asset-name').value.trim();
   const btn = document.getElementById('submit-btn');
-  btn.disabled = !imageBlob;
+  if (btn) btn.disabled = !imageBlob;
 }
 
 async function handleMagicTime() {
   const name = document.getElementById('asset-name').value.trim();
   if (!imageBlob) return;
 
-  if (uploadType === 'full-drawing') {
-    return handleFullDrawing();
-  }
-
   const btn = document.getElementById('submit-btn');
   const status = document.getElementById('upload-status');
-
-  // For "save without removing", use the cropped version if available
   const skipBlob = croppedBlob || imageBlob;
 
   btn.disabled = true;
-  btn.style.display = 'none';
-
-  const modelHint = '<p class="progress-hint">This might take a moment.</p>';
+  document.getElementById('upload-actions').style.display = 'none';
 
   status.innerHTML = `
     <div class="processing">
       <span class="crown-spin">\u{1F451}</span>
       <p id="seg-message">Removing the background!</p>
       <div id="seg-progress-bar" class="progress-bar"><div id="seg-progress-fill" class="progress-fill"></div></div>
-      ${modelHint}
+      <p class="progress-hint">This might take a moment.</p>
     </div>
   `;
 
   try {
-    // Always segment the FULL original image for best results
     let segResult = await removeBackground(imageBlob, (info) => {
       const msg = document.getElementById('seg-message');
       const fill = document.getElementById('seg-progress-fill');
       if (msg) msg.textContent = info.message;
-      if (fill && info.progress != null) {
-        fill.style.width = `${info.progress}%`;
-      }
+      if (fill && info.progress != null) fill.style.width = `${info.progress}%`;
     });
 
-    // If a polygon was drawn, intersect segmentation with the polygon crop
     if (polygon && polygon.length >= 3) {
       segResult = await intersectSegmentationWithPolygon(segResult, polygon);
     }
 
     segmentedBlob = segResult;
 
-    // Show preview with approve/retry
     const segURL = URL.createObjectURL(segmentedBlob);
     const beforeURL = previewURL;
     status.innerHTML = `
@@ -289,8 +331,14 @@ async function handleMagicTime() {
       </div>
     `;
 
-    document.getElementById('seg-approve').addEventListener('click', () => saveAsset(name, segmentedBlob));
-    document.getElementById('seg-skip').addEventListener('click', () => saveAsset(name, skipBlob));
+    document.getElementById('seg-approve').addEventListener('click', () => {
+      tagOp('approve: clicked');
+      saveAsset(name, segmentedBlob);
+    });
+    document.getElementById('seg-skip').addEventListener('click', () => {
+      tagOp('skip: clicked');
+      saveAsset(name, skipBlob);
+    });
     document.getElementById('seg-retry').addEventListener('click', resetToCamera);
 
   } catch (err) {
@@ -307,7 +355,7 @@ async function handleMagicTime() {
     `;
     document.getElementById('seg-skip-err').addEventListener('click', () => saveAsset(name, skipBlob));
     document.getElementById('seg-retry-err').addEventListener('click', () => {
-      btn.style.display = '';
+      document.getElementById('upload-actions').style.display = '';
       btn.disabled = false;
       status.innerHTML = '';
     });
@@ -315,11 +363,12 @@ async function handleMagicTime() {
 }
 
 async function handleFullDrawing() {
-  const btn = document.getElementById('submit-btn');
+  if (!imageBlob) return;
+
+  const btn = document.getElementById('full-drawing-btn');
   const status = document.getElementById('upload-status');
 
-  btn.disabled = true;
-  btn.style.display = 'none';
+  document.getElementById('upload-actions').style.display = 'none';
 
   function showProgress(message, progress) {
     const msg = document.getElementById('seg-message');
@@ -338,15 +387,12 @@ async function handleFullDrawing() {
   `;
 
   try {
-    // Step 1: Remove background
     const bgRemoved = await removeBackground(imageBlob, (info) => {
-      showProgress(info.message, info.progress * 0.4); // 0-40%
+      showProgress(info.message, info.progress * 0.4);
     });
 
-    // Brief pause for GC after model disposal
     await new Promise(r => setTimeout(r, 200));
 
-    // Step 2: Auto-segment
     showProgress('Finding all the parts...', 40);
     const segments = await autoSegment(bgRemoved, (info) => {
       const overall = 40 + (info.progress || 0) * 0.4;
@@ -363,27 +409,23 @@ async function handleFullDrawing() {
         </div>
       `;
       document.getElementById('fd-retry').addEventListener('click', () => {
-        btn.style.display = '';
-        btn.disabled = false;
+        document.getElementById('upload-actions').style.display = '';
         status.innerHTML = '';
       });
       return;
     }
 
-    // Step 3: Show review overlay
     showProgress('Ready for review!', 100);
     const bgRemovedURL = URL.createObjectURL(bgRemoved);
     const reviewResult = await showSegmentReview(bgRemovedURL, segments);
     URL.revokeObjectURL(bgRemovedURL);
 
     if (!reviewResult) {
-      btn.style.display = '';
-      btn.disabled = false;
+      document.getElementById('upload-actions').style.display = '';
       status.innerHTML = '';
       return;
     }
 
-    // Step 4: Save all approved items
     status.innerHTML = `
       <div class="processing">
         <span class="crown-spin">\u{1F451}</span>
@@ -394,22 +436,23 @@ async function handleFullDrawing() {
     let savedCount = 0;
 
     if (reviewResult.princess) {
-      await savePrincess({
+      await saveItem({
         name: '',
+        category: 'princess',
         imageBlob: reviewResult.princess.blob,
-        anchors: { ...DEFAULT_ANCHORS },
+        scale: 0.8,
+        zIndex: 2,
       });
       savedCount++;
     }
 
     for (const item of reviewResult.clothing) {
       const catInfo = getCategoryInfo(item.category);
-      await saveClothing({
+      await saveItem({
         name: '',
         category: item.category,
         imageBlob: item.blob,
-        targetAnchor: catInfo.targetAnchor,
-        scale: 0.8,
+        scale: catInfo.scale || 0.5,
         zIndex: catInfo.zIndex,
       });
       savedCount++;
@@ -437,8 +480,7 @@ async function handleFullDrawing() {
       </div>
     `;
     document.getElementById('fd-retry-err').addEventListener('click', () => {
-      btn.style.display = '';
-      btn.disabled = false;
+      document.getElementById('upload-actions').style.display = '';
       status.innerHTML = '';
     });
   }
@@ -449,20 +491,13 @@ function resetToCamera() {
   initUpload();
 }
 
-/**
- * Intersect a full-image segmentation result with a polygon selection.
- * Keeps only the segmented foreground pixels that fall inside the polygon,
- * then crops to the polygon bounding box.
- */
 async function intersectSegmentationWithPolygon(segBlob, poly) {
   const bitmap = await createImageBitmap(segBlob);
   const fullW = bitmap.width;
   const fullH = bitmap.height;
 
-  // Convert normalized polygon to pixel coords
   const pxPoly = poly.map(p => ({ x: p.x * fullW, y: p.y * fullH }));
 
-  // Bounding box
   let minX = fullW, minY = fullH, maxX = 0, maxY = 0;
   for (const p of pxPoly) {
     minX = Math.min(minX, p.x);
@@ -478,7 +513,6 @@ async function intersectSegmentationWithPolygon(segBlob, poly) {
   const cropW = maxX - minX;
   const cropH = maxY - minY;
 
-  // Draw the segmented image clipped to the polygon, cropped to bounding box
   const canvas = new OffscreenCanvas(cropW, cropH);
   const ctx = canvas.getContext('2d');
 
@@ -496,6 +530,7 @@ async function intersectSegmentationWithPolygon(segBlob, poly) {
 }
 
 async function saveAsset(name, blob) {
+  tagOp('save: clicked');
   const status = document.getElementById('upload-status');
   status.innerHTML = `
     <div class="processing">
@@ -504,24 +539,27 @@ async function saveAsset(name, blob) {
     </div>
   `;
 
+  // iOS is likely still near the high-water mark from MODNet inference.
+  // Drop the cropped intermediate (keep imageBlob/previewURL — the
+  // "Select another from this photo" flow re-uses them) and give the
+  // GC a moment before IndexedDB clones `blob` into a transaction.
+  tagOp('save: freeing intermediates');
+  croppedBlob = null;
+  if (croppedURL) { URL.revokeObjectURL(croppedURL); croppedURL = null; }
+
+  await new Promise(r => setTimeout(r, 100));
+
   try {
-    if (uploadType === 'princess') {
-      await savePrincess({
-        name,
-        imageBlob: blob,
-        anchors: { ...DEFAULT_ANCHORS },
-      });
-    } else {
-      const catInfo = getCategoryInfo(selectedCategory);
-      await saveClothing({
-        name,
-        category: selectedCategory,
-        imageBlob: blob,
-        targetAnchor: catInfo.targetAnchor,
-        scale: 0.8,
-        zIndex: catInfo.zIndex,
-      });
-    }
+    const catInfo = getCategoryInfo(selectedCategory);
+    tagOp(`save: writing to IDB (${Math.round(blob.size / 1024)}KB)`);
+    await saveItem({
+      name,
+      category: selectedCategory,
+      imageBlob: blob,
+      scale: catInfo.scale || 0.5,
+      zIndex: catInfo.zIndex,
+    });
+    tagOp('save: IDB done');
 
     status.innerHTML = `
       <div class="success">
@@ -530,11 +568,13 @@ async function saveAsset(name, blob) {
         <a href="#/" class="pill">Back to game</a>
       </div>
     `;
+    tagOp('save: success shown');
 
     document.getElementById('another-from-photo').addEventListener('click', () => {
       resetForAnotherSelection();
     });
   } catch (err) {
+    tagOp(`save: error ${err.message}`);
     status.innerHTML = `
       <div class="error-state">
         <p>Oops! Something went wrong.</p>
@@ -546,22 +586,18 @@ async function saveAsset(name, blob) {
 
 function resetForAnotherSelection() {
   const status = document.getElementById('upload-status');
-  const btn = document.getElementById('submit-btn');
   status.innerHTML = '';
-  btn.style.display = '';
-  btn.disabled = false;
+  document.getElementById('upload-actions').style.display = '';
+  document.getElementById('submit-btn').disabled = false;
 
-  // Clear crop/segment state but keep the original photo
   croppedBlob = null;
   polygon = null;
   segmentedBlob = null;
   if (croppedURL) URL.revokeObjectURL(croppedURL);
   croppedURL = null;
 
-  // Reset name
   document.getElementById('asset-name').value = '';
 
-  // Show original photo preview again
   showPhotoPreview(previewURL);
   document.getElementById('select-area-btn').style.display = '';
   document.getElementById('select-area-btn').textContent = '\u2702\uFE0F Select area';
@@ -570,8 +606,7 @@ function resetForAnotherSelection() {
 }
 
 function resetState() {
-  uploadType = 'princess';
-  selectedCategory = 'dress';
+  selectedCategory = 'princess';
   imageBlob = null;
   croppedBlob = null;
   polygon = null;

style.css

@@ -36,6 +36,8 @@ html, body {
   -webkit-user-select: none;
   -webkit-tap-highlight-color: transparent;
   overflow: hidden;
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
 }
 
 a { text-decoration: none; color: inherit; }
@@ -89,12 +91,6 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
   gap: 0.5rem;
 }
 
-.princess-title {
-  text-align: center;
-  font-size: 1.6rem;
-  padding: 0.25rem;
-}
-
 .canvas-wrap {
   flex: 1;
   min-height: 0;
@@ -105,19 +101,11 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
 
 .princess-canvas {
   position: relative;
-  width: 100%;
-  max-width: 400px;
-  aspect-ratio: 3/4;
   background: var(--panel);
   border-radius: 1rem;
   border: 3px solid var(--lavender);
   overflow: hidden;
-}
-
-.princess-img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+  /* width/height set explicitly by fitCanvas() in dressup.js */
 }
 
 .placed-layer {
@@ -131,7 +119,75 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
   cursor: grab;
 }
 
-.snap-rings { position: absolute; inset: 0; pointer-events: none; }
+/* ---- Bounding box overlay (desktop resize) ---- */
+
+.bbox-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.bbox {
+  position: absolute;
+  border: 2px dashed var(--gold);
+  pointer-events: none;
+}
+
+.bbox-handle {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  background: var(--gold);
+  border: 2px solid white;
+  border-radius: 50%;
+  pointer-events: auto;
+  cursor: nwse-resize;
+  z-index: 1;
+}
+
+.bbox-handle-br {
+  bottom: -9px;
+  right: -9px;
+}
+
+.bbox-action {
+  position: absolute;
+  top: -32px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid var(--lavender);
+  background: var(--panel);
+  font-size: 0.85rem;
+  line-height: 1;
+  cursor: pointer;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.bbox-sparkle { right: 32px; }
+.bbox-delete { right: 0; }
+
+@media (hover: none) {
+  .bbox-overlay { display: none; }
+}
+
+/* ---- Sparkle effect ---- */
+
+.sparkle-effect {
+  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7))
+          drop-shadow(0 0 12px rgba(255, 215, 0, 0.4));
+  animation: sparkle-glow 1.5s ease-in-out infinite alternate;
+}
+
+@keyframes sparkle-glow {
+  0% { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 8px rgba(255, 215, 0, 0.3)); }
+  100% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 16px rgba(255, 215, 0, 0.5)); }
+}
 
 .switcher {
   display: flex;
@@ -193,12 +249,12 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
 .clothing-tray {
   display: flex;
   gap: 0.5rem;
-  padding: 0.5rem;
+  padding: 0.4rem;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   flex-shrink: 0;
-  min-height: 110px;
+  min-height: 96px;
 }
 
 .tray-empty {
@@ -231,8 +287,8 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
 .tray-item:active { transform: scale(0.95); }
 
 .tray-thumb {
-  width: 56px;
-  height: 56px;
+  width: 48px;
+  height: 48px;
   object-fit: contain;
   border-radius: 0.5rem;
 }
@@ -331,6 +387,19 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
   border-radius: 0.5rem;
 }
 
+.drawing-thumb {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--lavender);
+  color: white;
+  gap: 0.15rem;
+}
+
+.drawing-icon { font-size: 1.5rem; }
+.drawing-count { font-size: 0.65rem; }
+
 .manage-name {
   font-size: 0.8rem;
   font-weight: 700;
@@ -564,7 +633,15 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
 .name-input:focus { border-color: var(--gold); }
 
 .select-area-btn { align-self: center; }
-.magic-btn { align-self: center; font-size: 1.4rem; margin-top: 0.5rem; }
+.magic-btn { font-size: 1.4rem; }
+
+.upload-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
 
 .processing {
   display: flex;