web: the histogram opens top-left, and CLEAR asks before it forgets

The histogram used to park itself in the top-right corner on the first
paint; it now starts at the top-left of the photo and is dragged from
there, the way the rest of the overlay is. Nothing else changed in it —
same drag, same clamping, same resize.

The stage also gains a CLEAR button, sitting before the picker button,
which is now OPEN PHOTO. CLEAR takes the photo off the stage, but not
before asking: SAVE PHOTO files it first and only then clears, EXPORT
IMAGE writes the JPEG and then clears, CLEAR WITHOUT SAVING drops it
there and then, and CANCEL leaves everything alone. Saving from that
modal resumes the clear once the file has really landed — a guest, a
capped account or a cancelled name prompt never loses the frame.

Clearing forgets the working photo (source, preview, GPS, ISO, and the
IndexedDB copy session.ts now deletes), while the look, the crop and the
undo history stay put, so the next photo opens on the same settings the
way replacing a photo already did.

docker/frontend/src/ui/Histogram.tsx

@@ -68,7 +68,7 @@ function curve(bins: number[], max: number, close: boolean): string {
 export function Histogram({ url, onClose }: { url: string; onClose: () => void }) {
   const { t } = useI18n();
   const [data, setData] = useState<Histogram | null>(null);
-  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
+  const [pos, setPos] = useState<{ x: number; y: number }>({ x: 12, y: 12 });
   const [dragging, setDragging] = useState(false);
   const boxRef = useRef<HTMLDivElement>(null);
   const dragRef = useRef<{ px: number; py: number; x: number; y: number } | null>(null);
@@ -98,16 +98,6 @@ export function Histogram({ url, onClose }: { url: string; onClose: () => void }
     return { x: Math.min(Math.max(8, x), hi(b.width, m.width)), y: Math.min(Math.max(8, y), hi(b.height, m.height)) };
   }, []);
 
-  // First paint: park it in the top-right corner of the photo.
-  useEffect(() => {
-    if (pos) return;
-    const wrap = boxRef.current?.parentElement;
-    const box = boxRef.current;
-    if (!wrap || !box) return;
-    const b = wrap.getBoundingClientRect();
-    setPos({ x: Math.max(8, b.width - box.getBoundingClientRect().width - 12), y: 12 });
-  }, [pos]);
-
   // The photo's own box is what the frame is parked against, and it shrinks
   // when a column opens beside the stage — not only when the window does. So
   // the frame watches that box, not the window, and is pulled back inside it.
@@ -151,12 +141,15 @@ export function Histogram({ url, onClose }: { url: string; onClose: () => void }
   // that starts to hide the shadows.
   const max = Math.max(1, ...(data ? [...data.lum, ...data.r, ...data.g, ...data.b] : [1]));
 
+  // The shape is parked in the photo's top-left corner as soon as it appears —
+  // that is where the eye already is when a frame lands — and the user drags it
+  // wherever they want it from there.
   return (
     <div
       className={`hist${dragging ? ' dragging' : ''}`}
       data-key="histogram"
       ref={boxRef}
-      style={{ left: pos?.x ?? 12, top: pos?.y ?? 12, visibility: pos ? 'visible' : 'hidden' }}
+      style={{ left: pos.x, top: pos.y }}
     >
       <div
         className="hist-head"