Segmentation model

Dockerfile

@@ -17,12 +17,18 @@ ENV U2NET_HOME=/home/user/.u2net
 WORKDIR /app
 
 # Install Python deps first so this layer caches across code edits.
+# CPU-only torch from the dedicated index shaves ~600MB vs the default
+# CUDA wheel, which matters for HF's free tier image size limit.
 COPY --chown=user space/requirements.txt .
+RUN pip install --no-cache-dir --user \
+        --index-url https://download.pytorch.org/whl/cpu \
+        torch
 RUN pip install --no-cache-dir --user -r requirements.txt
 
-# Pre-download the model so the first request isn't slow and so the
+# Pre-download models so the first request isn't slow and so the
 # weights live in the image layer (no re-download on Space restart).
 RUN python -c "from rembg import new_session; new_session('isnet-general-use')"
+RUN python -c "from transformers import pipeline; pipeline('mask-generation', model='Zigeng/SlimSAM-uniform-77')"
 
 # Backend — FastAPI app serves both /remove-bg and the static frontend.
 COPY --chown=user space/app.py .

js/color-normalize.js

@@ -0,0 +1,83 @@
+// Grey-world white balance. Runs on captured photos before background
+// removal so items photographed under wildly different lighting end up
+// looking like they belong in the same drawing.
+//
+// Pre-segmentation is the right spot: the normalized blob is what gets
+// saved to IDB, so every downstream consumer (dress-up canvas, tray
+// thumbs, screenshot) automatically benefits.
+//
+// The algorithm: compute per-channel means (skipping near-black ink and
+// blown-out highlights), then scale each channel so its mean matches
+// the overall grey target. Gains are clamped to [0.7, 1.4] so
+// monochrome subjects don't get wrecked.
+
+import { tagOp } from './diag.js';
+
+const BLACK_SUM = 30;    // skip r+g+b below this
+const WHITE_SUM = 735;   // skip r+g+b above this (3 * 245)
+const MIN_GAIN = 0.7;
+const MAX_GAIN = 1.4;
+
+export async function normalizeColors(blob) {
+  const t0 = performance.now();
+  let bitmap;
+  try {
+    bitmap = await createImageBitmap(blob);
+  } catch (err) {
+    tagOp('normalize: decode failed');
+    return blob;
+  }
+
+  const { width: w, height: h } = bitmap;
+  const canvas = new OffscreenCanvas(w, h);
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  ctx.drawImage(bitmap, 0, 0);
+  bitmap.close();
+
+  const imgData = ctx.getImageData(0, 0, w, h);
+  const px = imgData.data;
+  const len = px.length;
+
+  // Pass 1: accumulate channel means over mid-tone pixels.
+  let sumR = 0, sumG = 0, sumB = 0, count = 0;
+  for (let i = 0; i < len; i += 4) {
+    const r = px[i], g = px[i + 1], b = px[i + 2];
+    const s = r + g + b;
+    if (s < BLACK_SUM || s > WHITE_SUM) continue;
+    sumR += r;
+    sumG += g;
+    sumB += b;
+    count++;
+  }
+
+  if (count === 0) {
+    // Nothing useful to sample — return original.
+    tagOp('normalize: no mid-tone pixels');
+    return blob;
+  }
+
+  const meanR = sumR / count;
+  const meanG = sumG / count;
+  const meanB = sumB / count;
+  const target = (meanR + meanG + meanB) / 3;
+
+  const gR = clamp(target / meanR, MIN_GAIN, MAX_GAIN);
+  const gG = clamp(target / meanG, MIN_GAIN, MAX_GAIN);
+  const gB = clamp(target / meanB, MIN_GAIN, MAX_GAIN);
+
+  // Pass 2: apply gains.
+  for (let i = 0; i < len; i += 4) {
+    px[i]     = Math.min(255, px[i]     * gR);
+    px[i + 1] = Math.min(255, px[i + 1] * gG);
+    px[i + 2] = Math.min(255, px[i + 2] * gB);
+  }
+
+  ctx.putImageData(imgData, 0, 0);
+  const out = await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.9 });
+  tagOp(`normalize: ${Math.round(performance.now() - t0)}ms`);
+  return out;
+}
+
+function clamp(v, lo, hi) {
+  return v < lo ? lo : v > hi ? hi : v;
+}

js/dressup.js

@@ -2,15 +2,27 @@ import { loadDrawings, loadItems, saveDrawing, updateDrawingItems, deleteDrawing
 import { getCategoryInfo, DOUBLE_TAP_MS, DRAG_DEAD_ZONE_PX } from './models.js';
 import { STICKERS } from './stickers.js';
 import { migrateOldData } from './store.js';
+import { detectDominantHue, recolor } from './recolor.js';
 import { tagOp } from './diag.js';
 
 let drawings = [];
 let items = [];
 let currentIdx = 0;
-let placedItems = []; // { itemId, x, y, scale, rotation, zIndex, url, isSticker, sparkle }
+let placedItems = []; // { itemId, x, y, scale, rotation, zIndex, url, isSticker, sparkle, hue }
 let objectURLs = [];
 let itemsURLMap = {}; // id -> objectURL
 
+// Recolor caches. Dominant hue is computed once per source item and
+// kept for the session. Recolored blob URLs are keyed by itemId:hue
+// so tapping the same hue twice is instant.
+const dominantHueCache = new Map();  // itemId -> number (0-360)
+const recoloredURLs = new Map();     // `${itemId}:${Math.round(hue)}` -> objectURL
+const stickerBlobCache = new Map();  // stickerId -> Blob (fetched from data URL)
+
+// Live hue-drag state. Set while the child has a finger down on the
+// .hue-track in the action bar.
+let hueDrag = null;
+
 // Single-finger drag state
 let drag = null;
 let ghost = null;
@@ -95,6 +107,12 @@ export async function initDressUp() {
   objectURLs = [];
   itemsURLMap = {};
 
+  // Recolor caches are per-session. Revoke any leftover URLs from a
+  // previous initDressUp call and start fresh.
+  for (const url of recoloredURLs.values()) URL.revokeObjectURL(url);
+  recoloredURLs.clear();
+  dominantHueCache.clear();
+
   let totalBytes = 0;
   items.forEach(c => {
     const url = blobToURL(c.imageBlob);
@@ -118,6 +136,7 @@ export async function initDressUp() {
         <div id="princess-canvas" class="princess-canvas">
           <div id="placed-layer" class="placed-layer"></div>
           <div id="bbox-overlay" class="bbox-overlay"></div>
+          <div id="action-bar" class="action-bar hidden"></div>
         </div>
       </div>
 
@@ -164,8 +183,8 @@ 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 })
+  const saved = placedItems.map(({ itemId, x, y, scale, rotation, zIndex, isSticker, sparkle, hue }) =>
+    ({ itemId, clothingId: itemId, x, y, scale, rotation: rotation || 0, zIndex, isSticker: isSticker || false, sparkle: sparkle || false, hue: hue == null ? null : hue })
   );
   d.items = saved; // update in-memory too
   updateDrawingItems(d.id, saved);
@@ -217,12 +236,25 @@ function renderDrawing() {
           url,
           isSticker: item.isSticker || false,
           sparkle: item.sparkle || false,
+          hue: (typeof item.hue === 'number') ? item.hue : null,
         });
       }
     }
   }
   selectedIdx = -1;
   renderPlaced();
+  // Lazily restore recolored variants for persisted hues. The item
+  // flashes with the original color for a moment, then swaps to the
+  // recolored PNG once recolor() finishes — acceptable for the switch
+  // between drawings.
+  for (let i = 0; i < placedItems.length; i++) {
+    const it = placedItems[i];
+    if (it.hue != null) {
+      applyRecoloredHue(i, it.hue, false).catch(err => {
+        console.warn('restore hue failed', err);
+      });
+    }
+  }
 }
 
 let currentTab = 'items';
@@ -296,9 +328,14 @@ function updatePlacedStyle(origIdx) {
   el.style.width = `${item.scale * 100}%`;
   el.style.transform = `translate(-50%,-50%) rotate(${item.rotation || 0}deg)`;
   renderBBox();
+  // Keep the action bar anchored to the item as it moves. Uses
+  // positionActionBar rather than renderActionBar so we don't nuke
+  // the hue-track's pointer capture when a separate finger is dragging
+  // the item while the strip is still being touched.
+  if (origIdx === selectedIdx) positionActionBar();
 }
 
-// ---- Desktop bounding box ----
+// ---- Selection visuals: desktop bbox + mobile-friendly action bar ----
 
 function renderBBox() {
   const overlay = document.getElementById('bbox-overlay');
@@ -306,12 +343,12 @@ function renderBBox() {
 
   if (selectedIdx < 0 || selectedIdx >= placedItems.length) {
     overlay.innerHTML = '';
+    renderActionBar();
     return;
   }
 
-  const item = placedItems[selectedIdx];
   const el = document.querySelector(`.placed-item[data-orig-idx="${selectedIdx}"]`);
-  if (!el) { overlay.innerHTML = ''; return; }
+  if (!el) { overlay.innerHTML = ''; renderActionBar(); return; }
 
   // Get bounding rect relative to canvas
   const canvas = document.getElementById('princess-canvas');
@@ -323,13 +360,176 @@ function renderBBox() {
   const w = elRect.width;
   const h = elRect.height;
 
+  // Only the dashed box + desktop resize handle live here. Sparkle and
+  // delete moved to the action bar so they work on touch devices too.
   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>
   `;
+
+  renderActionBar();
+}
+
+// Floating button row below the selected item. Visible on both desktop
+// and touch — this is how mobile users toggle sparkle and delete items
+// now that the desktop-only .bbox-action buttons are gone.
+//
+// Split into two halves so drags can reposition without rebuilding
+// innerHTML (which would tear down the hue-track element and its
+// pointer capture state).
+function renderActionBar() {
+  const bar = document.getElementById('action-bar');
+  if (!bar) return;
+
+  if (selectedIdx < 0 || selectedIdx >= placedItems.length) {
+    bar.classList.add('hidden');
+    bar.innerHTML = '';
+    bar.dataset.forIdx = '';
+    return;
+  }
+
+  const el = document.querySelector(`.placed-item[data-orig-idx="${selectedIdx}"]`);
+  if (!el) { bar.classList.add('hidden'); bar.innerHTML = ''; return; }
+
+  const item = placedItems[selectedIdx];
+  bar.innerHTML = `
+    <button class="action-btn ${item.sparkle ? 'is-on' : ''}" data-action="sparkle" title="Toggle sparkles">\u2728</button>
+    <div class="hue-strip">
+      <button class="hue-reset" data-action="reset-hue" title="Original color">\u21BA</button>
+      <div class="hue-track"></div>
+    </div>
+    <button class="action-btn action-delete" data-action="delete" title="Remove">\u{1F5D1}</button>
+  `;
+  bar.classList.remove('hidden');
+  bar.dataset.forIdx = String(selectedIdx);
+
+  // Kick off dominant-hue computation eagerly so the hue strip is
+  // responsive when the child actually drags it. Fire-and-forget.
+  ensureDominantHue(item).catch(() => {});
+
+  positionActionBar();
+}
+
+// Move the already-rendered action bar so it tracks the selected item.
+// Safe to call during drag/pinch/resize.
+function positionActionBar() {
+  const bar = document.getElementById('action-bar');
+  if (!bar || bar.classList.contains('hidden')) return;
+  if (selectedIdx < 0 || selectedIdx >= placedItems.length) return;
+  const el = document.querySelector(`.placed-item[data-orig-idx="${selectedIdx}"]`);
+  if (!el) return;
+
+  const canvas = document.getElementById('princess-canvas');
+  const canvasRect = canvas.getBoundingClientRect();
+  const elRect = el.getBoundingClientRect();
+
+  const cx = elRect.left - canvasRect.left + elRect.width / 2;
+  const belowY = elRect.bottom - canvasRect.top + 10;
+
+  const barW = bar.offsetWidth;
+  const barH = bar.offsetHeight;
+  let left = cx - barW / 2;
+  let top = belowY;
+  left = Math.max(4, Math.min(canvasRect.width - barW - 4, left));
+  if (top + barH > canvasRect.height - 4) {
+    top = elRect.top - canvasRect.top - barH - 10;
+  }
+  bar.style.left = `${left}px`;
+  bar.style.top = `${top}px`;
+}
+
+// ---- Recoloring ----
+
+async function getSourceBlob(placedItem) {
+  if (placedItem.isSticker) {
+    let b = stickerBlobCache.get(placedItem.itemId);
+    if (b) return b;
+    const sticker = STICKERS.find(s => s.id === placedItem.itemId);
+    if (!sticker) return null;
+    const res = await fetch(sticker.url);
+    b = await res.blob();
+    stickerBlobCache.set(placedItem.itemId, b);
+    return b;
+  }
+  const it = items.find(i => i.id === placedItem.itemId);
+  return it ? it.imageBlob : null;
+}
+
+function getOriginalURL(placedItem) {
+  if (placedItem.isSticker) {
+    const s = STICKERS.find(s => s.id === placedItem.itemId);
+    return s ? s.url : null;
+  }
+  return itemsURLMap[placedItem.itemId] || null;
+}
+
+async function ensureDominantHue(placedItem) {
+  const key = placedItem.itemId;
+  if (dominantHueCache.has(key)) return dominantHueCache.get(key);
+  const blob = await getSourceBlob(placedItem);
+  if (!blob) return 0;
+  const h = await detectDominantHue(blob);
+  dominantHueCache.set(key, h);
+  return h;
+}
+
+// Produce the recolored variant for (itemId, targetHue), cache it,
+// and swap the on-screen element's src to it. Clears any inline
+// filter used for live preview.
+async function applyRecoloredHue(idx, targetHue, save = true) {
+  const item = placedItems[idx];
+  if (!item) return;
+  const roundedHue = Math.round(targetHue);
+  const cacheKey = `${item.itemId}:${roundedHue}`;
+  let url = recoloredURLs.get(cacheKey);
+  if (!url) {
+    const source = await getSourceBlob(item);
+    if (!source) return;
+    const dom = await ensureDominantHue(item);
+    const blob = await recolor(source, roundedHue, dom);
+    url = URL.createObjectURL(blob);
+    recoloredURLs.set(cacheKey, url);
+  }
+  item.url = url;
+  item.hue = roundedHue;
+  const el = document.querySelector(`.placed-item[data-orig-idx="${idx}"]`);
+  if (el) {
+    el.src = url;
+    el.style.filter = '';
+  }
+  if (save) autoSave();
+}
+
+// Update the inline CSS filter on the placed item during a hue-strip
+// drag. Math is anchored at the item's dominant hue so that the left
+// edge of the strip = red, right edge = red-again (wrap around).
+function updateHueDragPreview(clientX) {
+  if (!hueDrag) return;
+  const { idx, rect, dom } = hueDrag;
+  const frac = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+  const targetHue = frac * 360;
+  let delta = targetHue - dom;
+  // Shortest path wrap so rotation doesn't ping-pong.
+  delta = ((delta + 540) % 360) - 180;
+  hueDrag.targetHue = targetHue;
+  const el = document.querySelector(`.placed-item[data-orig-idx="${idx}"]`);
+  if (el) el.style.filter = `hue-rotate(${delta}deg)`;
+}
+
+function resetHue(idx) {
+  const item = placedItems[idx];
+  if (!item) return;
+  const orig = getOriginalURL(item);
+  if (!orig) return;
+  item.url = orig;
+  item.hue = null;
+  const el = document.querySelector(`.placed-item[data-orig-idx="${idx}"]`);
+  if (el) {
+    el.src = orig;
+    el.style.filter = '';
+  }
+  autoSave();
 }
 
 function handleBBoxAction(action, idx) {
@@ -359,6 +559,26 @@ function animateNewItem() {
   });
 }
 
+// Fires the .sparkle-burst CSS animation at a canvas-local point.
+// The CSS positions the parent with translate(-50%,-50%), so setting
+// left/top to the desired coordinates centers the burst there.
+function fireSparkleBurst(canvasX, canvasY) {
+  const canvas = document.getElementById('princess-canvas');
+  if (!canvas) return;
+  const burst = document.createElement('div');
+  burst.className = 'sparkle-burst';
+  burst.style.left = `${canvasX}px`;
+  burst.style.top = `${canvasY}px`;
+  for (let i = 0; i < 8; i++) {
+    const star = document.createElement('span');
+    star.className = 'sparkle-star';
+    star.textContent = '\u2728';
+    burst.appendChild(star);
+  }
+  canvas.appendChild(burst);
+  setTimeout(() => burst.remove(), 700);
+}
+
 // ---- Ghost (for tray drag) ----
 
 function createGhost(url) {
@@ -493,7 +713,7 @@ function bindEvents() {
     }
   });
 
-  // BBox actions
+  // BBox resize handle (desktop only)
   const bboxOverlay = document.getElementById('bbox-overlay');
   bboxOverlay.addEventListener('pointerdown', (e) => {
     const handle = e.target.closest('.bbox-handle');
@@ -509,13 +729,60 @@ function bindEvents() {
         startScale: placedItems[selectedIdx].scale,
         canvasW: rect.width,
       };
+    }
+  });
+
+  // Action bar: sparkle/delete buttons, hue-track drag, reset button.
+  const actionBar = document.getElementById('action-bar');
+  actionBar.addEventListener('pointerdown', (e) => {
+    // Hue track: swap src to the original and start live preview.
+    const track = e.target.closest('.hue-track');
+    if (track && selectedIdx >= 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      const idx = selectedIdx;
+      const item = placedItems[idx];
+      const el = document.querySelector(`.placed-item[data-orig-idx="${idx}"]`);
+      const orig = getOriginalURL(item);
+      if (el && orig) el.src = orig;
+      // setPointerCapture must run synchronously in the handler or the
+      // browser won't honor it. Dominant hue usually comes straight from
+      // the cache (renderActionBar warms it on selection). If not, fall
+      // back to 0 and swap the real value in when it resolves below.
+      track.setPointerCapture(e.pointerId);
+      const rect = track.getBoundingClientRect();
+      const cached = dominantHueCache.get(item.itemId);
+      hueDrag = { idx, track, dom: cached ?? 0, rect, pointerId: e.pointerId };
+      updateHueDragPreview(e.clientX);
+      if (cached == null) {
+        ensureDominantHue(item).then((dom) => {
+          if (hueDrag && hueDrag.pointerId === e.pointerId) {
+            hueDrag.dom = dom;
+            // Refresh preview with the correct anchor.
+            updateHueDragPreview(
+              // Use the last known target if we have it, else middle.
+              hueDrag.rect.left + hueDrag.rect.width *
+                ((hueDrag.targetHue ?? 180) / 360),
+            );
+          }
+        }).catch(() => {});
+      }
       return;
     }
-    const actionBtn = e.target.closest('.bbox-action');
-    if (actionBtn && selectedIdx >= 0) {
+    // Reset button
+    const reset = e.target.closest('.hue-reset');
+    if (reset && selectedIdx >= 0) {
       e.preventDefault();
       e.stopPropagation();
-      handleBBoxAction(actionBtn.dataset.action, selectedIdx);
+      resetHue(selectedIdx);
+      return;
+    }
+    // Sparkle / delete
+    const btn = e.target.closest('.action-btn');
+    if (btn && selectedIdx >= 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleBBoxAction(btn.dataset.action, selectedIdx);
     }
   });
 
@@ -642,6 +909,13 @@ function onPlacedPointerDown(e) {
 }
 
 function onPointerMove(e) {
+  // Hue-strip drag takes priority and stays self-contained.
+  if (hueDrag && e.pointerId === hueDrag.pointerId) {
+    e.preventDefault();
+    updateHueDragPreview(e.clientX);
+    return;
+  }
+
   if (activePointers.has(e.pointerId)) {
     const ptr = activePointers.get(e.pointerId);
     ptr.x = e.clientX;
@@ -710,12 +984,43 @@ function onPointerMove(e) {
     placedItems[drag.canvasIdx].x = drag.startItemX + dx / drag.canvasW;
     placedItems[drag.canvasIdx].y = drag.startItemY + dy / drag.canvasH;
     updatePlacedStyle(drag.canvasIdx);
+    // Throttled particle trail. Skip during pinches — two-finger
+    // activity already has plenty going on visually.
+    if (!pinch) emitDragSpark(e.clientX, e.clientY);
   } else {
     moveGhost(e.clientX, e.clientY);
   }
 }
 
+function emitDragSpark(clientX, clientY) {
+  const now = Date.now();
+  if (drag.lastEmit && now - drag.lastEmit < 80) return;
+  drag.lastEmit = now;
+  const canvas = document.getElementById('princess-canvas');
+  if (!canvas) return;
+  const rect = canvas.getBoundingClientRect();
+  const spark = document.createElement('span');
+  spark.className = 'drag-spark';
+  spark.textContent = '\u2728';
+  spark.style.left = `${clientX - rect.left}px`;
+  spark.style.top = `${clientY - rect.top}px`;
+  canvas.appendChild(spark);
+  setTimeout(() => spark.remove(), 500);
+}
+
 function onPointerUp(e) {
+  // Commit hue drag first — it owns its pointerId exclusively.
+  if (hueDrag && e.pointerId === hueDrag.pointerId) {
+    const { idx, targetHue } = hueDrag;
+    hueDrag = null;
+    if (typeof targetHue === 'number') {
+      applyRecoloredHue(idx, targetHue, true).catch(err => {
+        console.warn('recolor commit failed', err);
+      });
+    }
+    return;
+  }
+
   activePointers.delete(e.pointerId);
 
   // Desktop resize handle
@@ -747,19 +1052,27 @@ function onPointerUp(e) {
   if (!drag.hasMoved) {
     const ox = (Math.random() - 0.5) * 0.15;
     const oy = (Math.random() - 0.5) * 0.15;
+    const px = 0.5 + ox;
+    const py = 0.5 + oy;
     placedItems.push({
       itemId: drag.id,
-      x: 0.5 + ox,
-      y: 0.5 + oy,
+      x: px,
+      y: py,
       scale: drag.scale,
       rotation: 0,
       zIndex: drag.zIndex,
       url: drag.url,
       isSticker: drag.isSticker,
       sparkle: false,
+      hue: null,
     });
     renderPlaced();
     animateNewItem();
+    {
+      const canvas = document.getElementById('princess-canvas');
+      const rect = canvas.getBoundingClientRect();
+      fireSparkleBurst(px * rect.width, py * rect.height);
+    }
     autoSave();
     drag = null;
     return;
@@ -785,9 +1098,11 @@ function onPointerUp(e) {
       url: drag.url,
       isSticker: drag.isSticker,
       sparkle: false,
+      hue: null,
     });
     renderPlaced();
     animateNewItem();
+    fireSparkleBurst(e.clientX - rect.left, e.clientY - rect.top);
     autoSave();
   }
 

js/ml-client.js

@@ -6,6 +6,17 @@
 
 import { tagOp } from './diag.js';
 
+// In production the frontend is served by the same FastAPI process as
+// the API (HF Space), so a relative URL is same-origin. In local dev
+// the frontend is served by a plain static server with no backend —
+// fall back to the HF Space absolute URL so dev against prod Just Works.
+const SPACE_ORIGIN = 'https://sdragly-background-removal.hf.space';
+const API_BASE =
+  typeof location !== 'undefined' &&
+  (location.hostname === 'localhost' || location.hostname === '127.0.0.1')
+    ? SPACE_ORIGIN
+    : '';
+
 // 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
@@ -47,7 +58,7 @@ export async function removeBackground(blob, onProgress) {
     // FormData requires *something* here.
     form.append('file', blob, 'input.png');
 
-    const res = await fetch('/remove-bg', {
+    const res = await fetch(`${API_BASE}/remove-bg`, {
       method: 'POST',
       body: form,
       signal: abort.signal,
@@ -82,21 +93,92 @@ export async function removeBackground(blob, onProgress) {
 }
 
 /**
- * Auto-segment a full drawing into distinct parts.
+ * Auto-segment a full drawing into distinct parts via the HF Space
+ * SlimSAM endpoint.
  *
- * 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.
+ * @param {Blob} blob  background-removed PNG
+ * @param {(p: {status?: string, message: string, progress?: number}) => void} [onProgress]
+ * @returns {Promise<Array>}  segments in the shape segment-review.js expects
  */
 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,
+  const progress = (message, pct) => {
+    if (onProgress) onProgress({ status: 'processing', message, progress: pct });
+  };
+
+  tagOp('[auto-segment] uploading');
+  progress('Looking for parts...', 5);
+
+  // Auto-segment is heavier than bg removal (~5s warm, more on cold
+  // start). Keep the same ceiling as remove-bg for now — if SAM ever
+  // drifts past this we should investigate rather than paper over.
+  const coldTimer = setTimeout(() => {
+    tagOp('[auto-segment] waking server');
+    progress('Waking up server (first request is slow)...', 10);
+  }, COLD_START_HINT_MS);
+
+  const abort = new AbortController();
+  const timeoutTimer = setTimeout(() => abort.abort(), REQUEST_TIMEOUT_MS);
+
+  try {
+    const form = new FormData();
+    form.append('file', blob, 'input.png');
+
+    const res = await fetch(`${API_BASE}/auto-segment`, {
+      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)}` : ''}`,
+      );
+    }
+
+    progress('Decoding parts...', 85);
+    const json = await res.json();
+    const rawSegments = Array.isArray(json.segments) ? json.segments : [];
+    tagOp(`[auto-segment] ${rawSegments.length} segments`);
+
+    // The server hands back base64 for both the mask bytes and the
+    // cropped PNG. Decode once here so segment-review.js can work with
+    // plain Uint8Array + Blob like the old in-browser path did.
+    const segments = rawSegments.map((s) => ({
+      id: s.id,
+      score: s.score,
+      area: s.area,
+      bbox: s.bbox,
+      maskW: s.maskW,
+      maskH: s.maskH,
+      mask: base64ToUint8Array(s.mask),
+      croppedBlob: base64ToBlob(s.croppedPng, 'image/png'),
+    }));
+
+    if (onProgress) onProgress({ status: 'done', message: 'Parts found', progress: 100 });
+    return segments;
+  } 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);
   }
-  return [];
+}
+
+function base64ToUint8Array(b64) {
+  const bin = atob(b64);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
+}
+
+function base64ToBlob(b64, type) {
+  return new Blob([base64ToUint8Array(b64)], { type });
 }

js/recolor.js

@@ -0,0 +1,134 @@
+// Per-placement palette-swap recoloring.
+//
+// The child picks a target hue from the bottom-sheet rainbow strip and
+// the dominant color of the item shifts to that hue while keeping
+// saturation and lightness. Blacks stay black, whites stay white — the
+// shift is a hue delta anchored at the item's own dominant color, not
+// a blanket hue-rotate of the whole image.
+//
+// Two entry points:
+//   detectDominantHue(blob) — one-shot per source item, cached by the
+//     caller. Returns the hue angle (0-360) of the strongest color bin.
+//   recolor(blob, targetHue)  — returns a new PNG blob with every
+//     colored pixel rotated so the dominant becomes the target.
+
+import { tagOp } from './diag.js';
+
+const HUE_BINS = 36;           // 10 degrees per bucket
+const MIN_SAT = 0.15;          // skip near-grey pixels
+const MIN_LIGHT = 0.10;        // skip near-black
+const MAX_LIGHT = 0.90;        // skip near-white
+const MIN_ALPHA = 128;         // skip near-transparent
+
+async function decodeToImageData(blob) {
+  const bitmap = await createImageBitmap(blob);
+  const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  ctx.drawImage(bitmap, 0, 0);
+  bitmap.close();
+  return { ctx, imgData: ctx.getImageData(0, 0, bitmap.width, bitmap.height), canvas };
+}
+
+export async function detectDominantHue(blob) {
+  const t0 = performance.now();
+  const { imgData } = await decodeToImageData(blob);
+  const px = imgData.data;
+  const bins = new Float32Array(HUE_BINS);
+
+  for (let i = 0; i < px.length; i += 4) {
+    const a = px[i + 3];
+    if (a < MIN_ALPHA) continue;
+    const [h, s, l] = rgbToHsl(px[i], px[i + 1], px[i + 2]);
+    if (s < MIN_SAT || l < MIN_LIGHT || l > MAX_LIGHT) continue;
+    const bin = Math.floor((h / 360) * HUE_BINS) % HUE_BINS;
+    // Weight by saturation and alpha — confident, opaque pixels matter more.
+    bins[bin] += s * (a / 255);
+  }
+
+  let best = 0, bestWeight = -1;
+  for (let i = 0; i < HUE_BINS; i++) {
+    if (bins[i] > bestWeight) {
+      bestWeight = bins[i];
+      best = i;
+    }
+  }
+  // Default to 0 (red) for fully monochrome images — the recolor pass
+  // will still work because the delta is just (target - 0).
+  if (bestWeight <= 0) {
+    tagOp('recolor: no dominant hue');
+    return 0;
+  }
+  const h = (best + 0.5) * (360 / HUE_BINS);
+  tagOp(`recolor: dominant ${Math.round(h)}deg in ${Math.round(performance.now() - t0)}ms`);
+  return h;
+}
+
+export async function recolor(blob, targetHue, dominantHue) {
+  const t0 = performance.now();
+  const { ctx, imgData, canvas } = await decodeToImageData(blob);
+  const px = imgData.data;
+
+  // Wrap delta to [-180, 180] for the shortest path around the wheel.
+  let delta = targetHue - dominantHue;
+  delta = ((delta + 540) % 360) - 180;
+
+  for (let i = 0; i < px.length; i += 4) {
+    const a = px[i + 3];
+    if (a < MIN_ALPHA) continue;
+    const [h, s, l] = rgbToHsl(px[i], px[i + 1], px[i + 2]);
+    // Don't shift greys — there's nothing to rotate.
+    if (s < MIN_SAT) continue;
+    const newH = (h + delta + 360) % 360;
+    const [r, g, b] = hslToRgb(newH, s, l);
+    px[i] = r;
+    px[i + 1] = g;
+    px[i + 2] = b;
+  }
+
+  ctx.putImageData(imgData, 0, 0);
+  const out = await canvas.convertToBlob({ type: 'image/png' });
+  tagOp(`recolor: ${Math.round(performance.now() - t0)}ms`);
+  return out;
+}
+
+// ---- HSL helpers (operate in 0-360, 0-1, 0-1) ----
+
+function rgbToHsl(r, g, b) {
+  r /= 255; g /= 255; b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h;
+  switch (max) {
+    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+    case g: h = (b - r) / d + 2; break;
+    default: h = (r - g) / d + 4; break;
+  }
+  return [h * 60, s, l];
+}
+
+function hslToRgb(h, s, l) {
+  h /= 360;
+  if (s === 0) {
+    const v = Math.round(l * 255);
+    return [v, v, v];
+  }
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  return [
+    Math.round(hueToRgb(p, q, h + 1 / 3) * 255),
+    Math.round(hueToRgb(p, q, h) * 255),
+    Math.round(hueToRgb(p, q, h - 1 / 3) * 255),
+  ];
+}
+
+function hueToRgb(p, q, t) {
+  if (t < 0) t += 1;
+  if (t > 1) t -= 1;
+  if (t < 1 / 6) return p + (q - p) * 6 * t;
+  if (t < 1 / 2) return q;
+  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+  return p;
+}

js/upload.js

@@ -3,6 +3,7 @@ import { saveItem, savePhoto, loadPhotos, updatePhoto, deletePhoto, blobToURL }
 import { removeBackground, autoSegment } from './ml-client.js';
 import { showSegmentReview } from './segment-review.js';
 import { showPolygonSelector } from './polygon-select.js';
+import { normalizeColors } from './color-normalize.js';
 import { tagOp } from './diag.js';
 
 let selectedCategory = 'princess';
@@ -203,8 +204,11 @@ function bindEvents(photos) {
     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);
+    // White-balance before saving so the gallery thumb, polygon preview
+    // and eventual background-removal input all see the same image.
+    const normalized = await normalizeColors(resized);
+    await savePhoto(normalized);
+    selectImage(normalized);
   });
 
   // Photo gallery — tap to reuse, X to delete
@@ -280,7 +284,6 @@ async function handleMagicTime() {
 
   const btn = document.getElementById('submit-btn');
   const status = document.getElementById('upload-status');
-  const skipBlob = croppedBlob || imageBlob;
 
   btn.disabled = true;
   document.getElementById('upload-actions').style.display = 'none';
@@ -294,8 +297,15 @@ async function handleMagicTime() {
     </div>
   `;
 
+  // Re-normalize as a safety net for legacy gallery photos that were
+  // captured before normalizeColors existed. Post-feature captures are
+  // already normalized, so this is a fast idempotent pass.
+  let skipBlob = croppedBlob || imageBlob;
+
   try {
-    let segResult = await removeBackground(imageBlob, (info) => {
+    const normalized = await normalizeColors(imageBlob);
+    if (!croppedBlob) skipBlob = normalized;
+    let segResult = await removeBackground(normalized, (info) => {
       const msg = document.getElementById('seg-message');
       const fill = document.getElementById('seg-progress-fill');
       if (msg) msg.textContent = info.message;

space/app.py

@@ -5,11 +5,11 @@ frontend from a single FastAPI process. Everything is deployed together
 to a Hugging Face Docker Space — one commit, one cold start, no CORS.
 
 Design notes:
-  - The rembg session is created once at import time. HF Spaces keeps
-    the container warm between requests, so model weights stay resident
-    in process memory. First request after a cold start is slow because
-    the container itself needs to boot (~15s), not because of model
-    loading (that's already done).
+  - Both the rembg session and the SAM pipeline are created once at
+    import time. HF Spaces keeps the container warm between requests,
+    so model weights stay resident in process memory. First request
+    after a cold start is slow because the container itself needs to
+    boot (~45s with torch+SAM), not because of model loading.
   - CORS stays wide open for now even though frontend and backend share
     an origin. It's harmless and lets you hit the API from a second
     client (curl, another deploy) without surprise.
@@ -22,16 +22,22 @@ Design notes:
     `remove-bg` in the static dir.
 """
 
+import base64
+import io
 import logging
 from pathlib import Path
 
+import numpy as np
 from fastapi import FastAPI, File, HTTPException, UploadFile
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse, Response
 from fastapi.staticfiles import StaticFiles
+from PIL import Image
 from rembg import new_session, remove
+from transformers import pipeline
 
 MODEL_NAME = "isnet-general-use"
+SAM_MODEL = "Zigeng/SlimSAM-uniform-77"
 
 logging.basicConfig(level=logging.INFO)
 log = logging.getLogger("princess")
@@ -41,13 +47,36 @@ log = logging.getLogger("princess")
 # from accidental full-res uploads burning CPU on the free tier.
 MAX_UPLOAD_BYTES = 20 * 1024 * 1024
 
+# SAM is quadratically sensitive to input resolution. 512 on the long
+# edge gives good-quality masks on kid drawings while keeping a full
+# pass under ~5s on the free CPU tier.
+SAM_INPUT_DIM = 512
+
+# Masks are returned to the client at this resolution. Segment-review
+# uses them for tap-hit-testing and polygon adjust, neither of which
+# needs pixel-perfect alignment — 128x128 keeps the JSON payload small
+# (~16KB per mask pre-base64) without visibly hurting the overlay.
+MASK_OUT_DIM = 128
+
+# Drop tiny masks (noise) and very large masks (full image / bg).
+SAM_MIN_AREA_FRAC = 0.005
+SAM_MAX_AREA_FRAC = 0.85
+
+# Non-max suppression IoU threshold — masks overlapping more than this
+# are treated as duplicates and the lower-scoring one gets dropped.
+SAM_NMS_IOU = 0.7
+
 # Static assets live next to app.py inside the container. The Dockerfile
 # copies index.html, style.css, and js/ into /app alongside this file.
 STATIC_ROOT = Path(__file__).parent
 
 log.info("Loading rembg model: %s", MODEL_NAME)
 _bg_session = new_session(MODEL_NAME)
-log.info("Model ready")
+log.info("rembg ready")
+
+log.info("Loading SAM pipeline: %s", SAM_MODEL)
+_sam_pipeline = pipeline("mask-generation", model=SAM_MODEL, device=-1)
+log.info("SAM ready")
 
 app = FastAPI(title="Princess", version="1.0.0")
 
@@ -96,6 +125,204 @@ async def remove_bg(file: UploadFile = File(...)) -> Response:
     )
 
 
+def _resize_long_edge(img: Image.Image, target: int) -> Image.Image:
+    w, h = img.size
+    long_edge = max(w, h)
+    if long_edge <= target:
+        return img
+    ratio = target / long_edge
+    return img.resize((round(w * ratio), round(h * ratio)), Image.LANCZOS)
+
+
+def _downsample_mask(mask: np.ndarray, out_w: int, out_h: int) -> np.ndarray:
+    """Nearest-neighbor downsample a bool mask to (out_h, out_w).
+
+    We don't need anti-aliasing — segment-review just hit-tests pixels
+    and draws them as rects.
+    """
+    h, w = mask.shape
+    ys = (np.linspace(0, h - 1, out_h)).astype(np.int32)
+    xs = (np.linspace(0, w - 1, out_w)).astype(np.int32)
+    return mask[ys[:, None], xs[None, :]]
+
+
+def _mask_iou(a: np.ndarray, b: np.ndarray) -> float:
+    inter = np.logical_and(a, b).sum()
+    union = np.logical_or(a, b).sum()
+    return float(inter) / float(union) if union else 0.0
+
+
+def _nms(masks, scores, iou_thresh: float):
+    """Greedy NMS. `masks` is a list of (small) bool arrays, aligned
+    with `scores`. Returns the list of kept indices in score order."""
+    order = np.argsort(scores)[::-1]
+    kept: list[int] = []
+    for idx in order:
+        dominated = False
+        for k in kept:
+            if _mask_iou(masks[idx], masks[k]) > iou_thresh:
+                dominated = True
+                break
+        if not dominated:
+            kept.append(int(idx))
+    return kept
+
+
+def _crop_with_mask(
+    rgba: Image.Image,
+    mask_full: np.ndarray,
+) -> tuple[bytes, dict, int]:
+    """Crop the image to the mask's bbox and apply the mask as alpha.
+
+    Returns (png_bytes, normalized_bbox, pixel_area). Uses the full-res
+    RGBA image so the output looks sharp — the low-res mask is upsampled
+    via nearest-neighbor to match.
+    """
+    H, W = mask_full.shape
+    ys, xs = np.where(mask_full)
+    if ys.size == 0:
+        raise ValueError("empty mask")
+
+    pad = 4
+    y0 = max(0, int(ys.min()) - pad)
+    y1 = min(H, int(ys.max()) + 1 + pad)
+    x0 = max(0, int(xs.min()) - pad)
+    x1 = min(W, int(xs.max()) + 1 + pad)
+
+    cropped = rgba.crop((x0, y0, x1, y1)).convert("RGBA")
+    crop_mask = mask_full[y0:y1, x0:x1]
+
+    arr = np.array(cropped, dtype=np.uint8)
+    arr[..., 3] = (arr[..., 3].astype(np.uint16) * crop_mask.astype(np.uint16)).astype(np.uint8)
+    out_img = Image.fromarray(arr, mode="RGBA")
+
+    buf = io.BytesIO()
+    out_img.save(buf, format="PNG", optimize=False)
+    return (
+        buf.getvalue(),
+        {
+            "x": x0 / W,
+            "y": y0 / H,
+            "w": (x1 - x0) / W,
+            "h": (y1 - y0) / H,
+        },
+        int(ys.size),
+    )
+
+
+@app.post("/auto-segment")
+async def auto_segment(file: UploadFile = File(...)) -> JSONResponse:
+    data = await file.read()
+    if not data:
+        raise HTTPException(status_code=400, detail="empty upload")
+    if len(data) > MAX_UPLOAD_BYTES:
+        raise HTTPException(
+            status_code=413,
+            detail=f"upload too large ({len(data)} bytes, max {MAX_UPLOAD_BYTES})",
+        )
+
+    try:
+        src = Image.open(io.BytesIO(data)).convert("RGBA")
+    except Exception as err:  # noqa: BLE001
+        raise HTTPException(status_code=400, detail=f"bad image: {err}")
+
+    full_w, full_h = src.size
+
+    # SAM wants a 3-channel image; we pass the downscaled RGB view.
+    work = _resize_long_edge(src, SAM_INPUT_DIM)
+    work_rgb = work.convert("RGB")
+
+    # points_per_side=8 → 64 grid points. Default 32 gives 1024 which
+    # is ~16× slower and overkill for a drawing with maybe 5-10 parts.
+    try:
+        sam_out = _sam_pipeline(
+            work_rgb,
+            points_per_side=8,
+            pred_iou_thresh=0.85,
+            stability_score_thresh=0.85,
+        )
+    except Exception as err:  # noqa: BLE001
+        log.exception("SAM failed")
+        raise HTTPException(status_code=500, detail=f"sam failed: {err}")
+
+    raw_masks = sam_out.get("masks", [])
+    raw_scores = sam_out.get("scores", [])
+    if not raw_masks:
+        return JSONResponse({"segments": []})
+
+    # The pipeline returns masks at the *input* (downscaled) resolution.
+    # Upsample them to full-res once so crops are sharp, and keep a
+    # small copy for NMS + client-side hit-testing.
+    work_w, work_h = work_rgb.size
+    min_area_px = int(full_w * full_h * SAM_MIN_AREA_FRAC)
+    max_area_px = int(full_w * full_h * SAM_MAX_AREA_FRAC)
+
+    candidates = []
+    for mask, score in zip(raw_masks, raw_scores):
+        mask_arr = np.asarray(mask, dtype=bool)
+        if mask_arr.shape != (work_h, work_w):
+            # Some pipelines return (H, W) at the *original* size; handle both.
+            if mask_arr.shape == (full_h, full_w):
+                full_mask = mask_arr
+            else:
+                continue
+        else:
+            # Nearest-neighbor upsample to full res.
+            ys = (np.linspace(0, work_h - 1, full_h)).astype(np.int32)
+            xs = (np.linspace(0, work_w - 1, full_w)).astype(np.int32)
+            full_mask = mask_arr[ys[:, None], xs[None, :]]
+
+        area = int(full_mask.sum())
+        if area < min_area_px or area > max_area_px:
+            continue
+
+        small = _downsample_mask(full_mask, MASK_OUT_DIM, MASK_OUT_DIM)
+        candidates.append(
+            {
+                "full_mask": full_mask,
+                "small_mask": small,
+                "score": float(score),
+                "area": area,
+            }
+        )
+
+    if not candidates:
+        return JSONResponse({"segments": []})
+
+    small_masks = [c["small_mask"] for c in candidates]
+    scores_arr = np.array([c["score"] for c in candidates], dtype=np.float32)
+    kept_idx = _nms(small_masks, scores_arr, SAM_NMS_IOU)
+
+    segments = []
+    for seg_i, idx in enumerate(kept_idx):
+        c = candidates[idx]
+        try:
+            png_bytes, bbox, _ = _crop_with_mask(src, c["full_mask"])
+        except Exception as err:  # noqa: BLE001
+            log.warning("crop failed for seg %d: %s", seg_i, err)
+            continue
+
+        segments.append(
+            {
+                "id": f"seg-{seg_i}",
+                "score": c["score"],
+                "area": c["area"],
+                "bbox": bbox,
+                "maskW": MASK_OUT_DIM,
+                "maskH": MASK_OUT_DIM,
+                # Pack bool mask as 1 byte per pixel, base64 for JSON transport.
+                "mask": base64.b64encode(
+                    c["small_mask"].astype(np.uint8).tobytes()
+                ).decode("ascii"),
+                "croppedPng": base64.b64encode(png_bytes).decode("ascii"),
+            }
+        )
+
+    # Largest first — matches segment-review's princess-selection heuristic.
+    segments.sort(key=lambda s: s["area"], reverse=True)
+    return JSONResponse({"segments": segments})
+
+
 # Mount last so API routes above take precedence. html=True makes "/"
 # serve index.html automatically.
 app.mount("/", StaticFiles(directory=STATIC_ROOT, html=True), name="static")

space/requirements.txt

@@ -4,3 +4,5 @@ python-multipart>=0.0.20
 rembg>=2.0.60
 onnxruntime>=1.19
 Pillow>=11.0
+numpy>=1.26
+transformers>=4.45

style.css

@@ -151,29 +151,93 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
   right: -9px;
 }
 
-.bbox-action {
+@media (hover: none) {
+  /* No dashed outline or resize handle on touch — the action bar
+     below the item handles sparkle/delete, and pinch handles resize. */
+  .bbox-overlay { display: none; }
+}
+
+/* ---- Selection action bar (sparkle / delete / hue strip) ---- */
+
+.action-bar {
   position: absolute;
-  top: -32px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: var(--panel);
+  border: 2px solid var(--lavender);
+  box-shadow: 0 4px 12px var(--shadow-lifted);
+  pointer-events: auto;
+  z-index: 10000;
+  touch-action: none;
+}
+
+.action-bar.hidden {
+  display: none;
+}
+
+.action-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  background: transparent;
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.action-btn.is-on {
+  border-color: var(--gold);
+  background: rgba(255, 215, 0, 0.15);
+}
+
+.action-btn:active {
+  transform: scale(0.9);
+}
+
+.hue-strip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.hue-reset {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 2px solid var(--lavender);
   background: var(--panel);
-  font-size: 0.85rem;
+  font-size: 0.95rem;
   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; }
+.hue-track {
+  width: 150px;
+  height: 24px;
+  border-radius: 12px;
+  border: 2px solid var(--lavender);
+  background: linear-gradient(to right,
+    hsl(0, 70%, 50%),
+    hsl(60, 70%, 50%),
+    hsl(120, 70%, 50%),
+    hsl(180, 70%, 50%),
+    hsl(240, 70%, 50%),
+    hsl(300, 70%, 50%),
+    hsl(360, 70%, 50%));
+  touch-action: none;
+  cursor: pointer;
 }
 
 /* ---- Sparkle effect ---- */
@@ -748,6 +812,24 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
   to { scale: 0; opacity: 0; }
 }
 
+/* ---- Drag particle trail ---- */
+
+.drag-spark {
+  position: absolute;
+  pointer-events: none;
+  font-size: 1rem;
+  transform: translate(-50%, -50%);
+  opacity: 0.9;
+  z-index: 90;
+  animation: drag-spark 0.5s ease-out forwards;
+  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
+}
+
+@keyframes drag-spark {
+  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
+  100% { opacity: 0;   transform: translate(-50%, -140%) scale(0.4); }
+}
+
 /* ---- Sparkle burst ---- */
 
 .sparkle-burst {