feat(upload+darkroom): arrows back beside Upload, corner-x delete; gate shake until developed; smoother baths

- bring back browse arrows (no animation) in a ◄ [+ Upload] ► row; demote delete
to a small x at the polaroid's corner
- darkroom hanging print: no shaking until the watercolour has developed — the
centre label now reads 'developing…' (spinner) then 'developed · shake me', and
the cursor shows progress instead of grab while it's still developing
- baths page: cards ease into each tray (slide-in above, sink-in submerged)
instead of popping, for a smoother develop sequence

index.html

@@ -1607,7 +1607,7 @@
       );
     }
 
-    function PhotoStack({ photo, index, total, slideDir, destroying, onDestroyed, onAdd, onAddSample, onLoadSamples, onReposition, onPrev, onNext, navDisabled, title, caption, date, time, onTitleChange, onCaptionChange, onDateChange, onTimeChange }) {
+    function PhotoStack({ photo, index, total, slideDir, destroying, onDestroyed, onAdd, onAddSample, onLoadSamples, onReposition, onDelete, title, caption, date, time, onTitleChange, onCaptionChange, onDateChange, onTimeChange }) {
       if (!photo) {
         // no photos left - show an empty polaroid inviting an upload, plus a
         // row of sample photos the user can add with one tap.
@@ -1678,16 +1678,12 @@
                     onReposition={onReposition} />
                   <span className="pointer-events-none absolute right-2 top-2 rounded-sm bg-card/90 px-2 py-0.5 font-mono text-xs font-semibold text-primary">{index + 1}/{total}</span>
                 </div>
-                {/* browse arrows straddle the polaroid's left/right edges */}
-                {total > 1 ? (
-                  <>
-                    <button type="button" onClick={onPrev} disabled={navDisabled} aria-label="Previous photo"
-                      title={navDisabled ? "Developing… cancel to browse" : "Previous photo"}
-                      className="sozai-sway-l absolute left-0 top-1/2 z-20 flex size-9 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-2 border-primary bg-card text-primary shadow-md transition-all hover:bg-accent disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-card"><ChevronLeft className="size-4" /></button>
-                    <button type="button" onClick={onNext} disabled={navDisabled} aria-label="Next photo"
-                      title={navDisabled ? "Developing… cancel to browse" : "Next photo"}
-                      className="sozai-sway-r absolute right-0 top-1/2 z-20 flex size-9 -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full border-2 border-primary bg-card text-primary shadow-md transition-all hover:bg-accent disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-card"><ChevronRight className="size-4" /></button>
-                  </>
+                {/* delete this photo: a small x at the polaroid's corner */}
+                {onDelete ? (
+                  <button type="button" onClick={onDelete} aria-label="Delete this photo" title="Delete this photo"
+                    className="absolute -right-2.5 -top-2.5 z-30 flex size-7 items-center justify-center rounded-full border-2 border-[#800020] bg-card text-[#800020] shadow-md transition-colors hover:bg-[#800020] hover:text-white">
+                    <X className="size-3.5" />
+                  </button>
                 ) : null}
               </div>
               <div className="mt-3 rounded-sm border-2 border-primary/70 px-3 py-2">
@@ -2604,21 +2600,23 @@
                 onAddSample={onAddSample}
                 onLoadSamples={onLoadSamples}
                 onReposition={onReposition}
-                onPrev={() => changePhoto(-1)} onNext={() => changePhoto(1)} navDisabled={genBusy}
+                onDelete={onRemovePhoto}
                 title={title} caption={caption} date={date} time={time}
                 onTitleChange={setTitle} onCaptionChange={setCaption}
                 onDateChange={setDate} onTimeChange={setTime} />
               <input ref={addPhotoRef} type="file" accept={ACCEPT_ATTR} multiple className="hidden" onChange={onAddPhotos} />
               {stackPhotos.length >= 1 && (
-                <div className="flex w-full max-w-sm items-center gap-3">
+                <div className="flex w-full max-w-sm items-center justify-center gap-3">
+                  <button type="button" onClick={() => changePhoto(-1)} disabled={genBusy || stackPhotos.length <= 1}
+                    aria-label="Previous photo" title={genBusy ? "Developing… cancel to browse" : "Previous photo"}
+                    className="flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"><ChevronLeft className="size-4" /></button>
                   <button type="button" onClick={() => addPhotoRef.current && addPhotoRef.current.click()}
                     className="flex flex-1 items-center justify-center gap-2 rounded-full border-2 border-primary bg-primary px-4 py-2.5 font-mono text-xs font-semibold uppercase tracking-widest text-primary-foreground transition-colors hover:bg-primary/90">
                     <Plus className="size-4" /> Upload
                   </button>
-                  <button type="button" onClick={onRemovePhoto}
-                    className="flex flex-1 items-center justify-center gap-2 rounded-full border-2 border-[#800020] bg-[#800020] px-4 py-2.5 font-mono text-xs font-semibold uppercase tracking-widest text-white transition-colors hover:opacity-90">
-                    <Trash2 className="size-4" /> Delete
-                  </button>
+                  <button type="button" onClick={() => changePhoto(1)} disabled={genBusy || stackPhotos.length <= 1}
+                    aria-label="Next photo" title={genBusy ? "Developing… cancel to browse" : "Next photo"}
+                    className="flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"><ChevronRight className="size-4" /></button>
                 </div>
               )}
               {/* How this works - matches the polaroid width, all-mono */}
@@ -6843,7 +6841,7 @@
                       {aboveCards.map((s) => (
                         <div key={s.id} className="absolute bottom-0 left-1/2 -translate-x-1/2"
                           style={{ width: "70%", zIndex: s.z }}>
-                          <PrintCard sheet={s} />
+                          <div className="dr-card-in"><PrintCard sheet={s} /></div>
                         </div>
                       ))}
                     </div>
@@ -6860,7 +6858,7 @@
                         {/* submerged card lives inside its tray */}
                         {subCards.map((s) => (
                           <div key={s.id} className="absolute" style={{ inset: "10%", zIndex: 4 + s.z }}>
-                            <PrintCard sheet={s} />
+                            <div className="dr-card-sink"><PrintCard sheet={s} /></div>
                           </div>
                         ))}
                         {/* ripple rings anchored to this tray */}
@@ -6991,15 +6989,18 @@
         if (next >= 1) setRevealed(true);
       }, []);
 
+      // No shaking until the watercolour has actually developed (or the develop
+      // feature is off / gave up, where "base" means we reveal the original).
+      const canShake = devStatus === "done" || devStatus === "base";
       function onPointerDown(e) {
-        if (revealed) return;
+        if (revealed || !canShake) return;
         try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) {}
         dragState.current = { active: true, lastX: e.clientX, lastDir: 0, offset: 0 };
         setDragging(true);
       }
       function onPointerMove(e) {
         const s = dragState.current;
-        if (!s.active || revealed) return;
+        if (!s.active || revealed || !canShake) return;
         const dx = e.clientX - s.lastX;
         if (Math.abs(dx) < 4) return;
         const dir = dx > 0 ? 1 : -1;
@@ -7023,7 +7024,7 @@
           <div className="relative z-10 h-4 w-3 rounded-sm bg-[oklch(0.45_0.06_60)] shadow-sm" aria-hidden="true" />
           <figure
             className={cn("group relative -mt-1 select-none rounded-sm bg-[oklch(0.99_0.01_85)] p-2 pb-12 shadow-xl",
-              dragging ? "" : "dr-sway", revealed ? "cursor-default" : "cursor-grab active:cursor-grabbing")}
+              dragging ? "" : "dr-sway", revealed ? "cursor-default" : (canShake ? "cursor-grab active:cursor-grabbing" : "cursor-progress"))}
             style={{ animationDelay: swayDelay + "s",
               transform: dragging ? "rotate(" + (tilt * 0.3) + "deg) translateX(" + (tilt * 0.4) + "px)" : undefined,
               transition: dragging ? "none" : "transform 0.4s ease" }}
@@ -7032,18 +7033,15 @@
               <img src={(revealed && developedSrc) ? developedSrc : (photo.src || "/assets/placeholder.svg")} alt={revealed ? photo.alt : ""} draggable={false}
                 className="h-full w-full object-cover transition-[filter] duration-200"
                 style={{ filter: "blur(" + blurPx + "px) grayscale(" + grayscale + "%) brightness(" + brightness + ") sepia(" + ((1 - progress) * 40) + "%)" }} />
-              {/* develop status gate — visible so we can see if the watercolour
-                  call is developing / done / fell back to base */}
-              <div className="pointer-events-none absolute left-1.5 top-1.5 z-10 rounded bg-black/55 px-1.5 py-0.5 font-mono text-[8px] uppercase tracking-wide text-white/90">
-                {devStatus === "done" ? "★ developed" : devStatus === "base" ? "✕ base" : "developing…"}
-              </div>
               <div className="pointer-events-none absolute inset-0 transition-opacity duration-200"
                 style={{ opacity: fogOpacity,
                   background: "radial-gradient(circle at 50% 40%, oklch(0.35 0.12 25 / 0.65), oklch(0.18 0.06 25 / 0.85))" }} aria-hidden="true" />
               {!revealed ? (
                 <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                  <span className="rounded-full bg-[oklch(0.15_0.04_25/0.7)] px-3 py-1 font-serif italic text-[11px] text-[oklch(0.95_0.05_25)]">
-                    {progress > 0 ? "developing…" : "shake me"}
+                  <span className={cn("flex items-center gap-1.5 rounded-full px-3 py-1 font-serif italic text-[11px]",
+                    canShake ? "bg-[oklch(0.15_0.04_25/0.7)] text-[oklch(0.95_0.05_25)]" : "bg-black/65 text-white/90")}>
+                    {!canShake ? (<><Loader2 className="size-3 animate-spin" aria-hidden="true" /> developing…</>)
+                      : progress > 0 ? "keep shaking…" : "developed · shake me"}
                   </span>
                 </div>
               ) : (
@@ -7082,9 +7080,13 @@
             "@keyframes dr-sway-kf{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}" +
             "@keyframes dr-fade{from{opacity:0}to{opacity:1}}" +
             "@keyframes dr-cap-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}" +
+            "@keyframes dr-card-in{from{opacity:0;transform:translateX(-22px) scale(.95)}to{opacity:1;transform:none}}" +
+            "@keyframes dr-card-sink{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}" +
             ".dr-flicker{animation:dr-safelight 5s ease-in-out infinite}" +
             ".dr-sway{animation:dr-sway-kf 4s ease-in-out infinite;transform-origin:top center}" +
-            "@media (prefers-reduced-motion: reduce){.dr-flicker,.dr-sway{animation:none}}"
+            ".dr-card-in{animation:dr-card-in .42s cubic-bezier(.34,1.18,.5,1) both}" +
+            ".dr-card-sink{animation:dr-card-sink .5s cubic-bezier(.4,.1,.2,1) both}" +
+            "@media (prefers-reduced-motion: reduce){.dr-flicker,.dr-sway,.dr-card-in,.dr-card-sink{animation:none}}"
           }} />
 
           {/* hidden filter that ripples the liquid + submerged prints */}