ux ironing: click-to-upload, compare toggle, explainer docs

[Fanoflix]

Stage 3 of the launch prep — the UX issues, plus the three missing explainers.

Upload

The empty preview used to be a pointer-events-none label reading "click upload" while pointing at a button elsewhere on screen — it read as an affordance and behaved like a caption. It's now a real <button> covering the whole surface: click, tab stop, Enter/Space, plus hover and drag-over states. Shared as components/upload/FileDropZone.tsx, used by dithering and low-res-video.

Click-to-pick is deliberately limited to the empty state. Once a source is loaded that surface belongs to press-to-compare, and a stray click reopening a file dialog would be worse than no shortcut. Dropping still replaces either way.

Compare

"Hold to compare" couldn't hold the original up while you dragged a slider. The panel button is now a latching toggle; holding still works on the canvas itself, where the pointer already is.

The two combine with XOR rather than OR (hooks/useCompare.ts), so a hold always shows the other one — held while latched, you get the processed image back. With OR a hold would do nothing whenever the toggle was on, which reads as a broken control.

Fixes found along the way

• Both canvases guarded onHoldEnd on comparing. Once a latch can invert that, the guard is false exactly when a release still needs reporting, and the peek would strand on. Removed in both.
• The anti-aliasing loupe defaulted to (0.5, 0.5) — inside the shape for every scene — so it opened on flat colour and showed nothing until dragged. New findEdge() parks it on the partial-coverage pixel nearest the frame centre, by coverage rather than geometry, so there's no per-scene table. Measured: 1 grey level before, 16 after.
• The compare toggles carried an aria-label overriding visible text that now changes with state — a label-in-name mismatch. Removed; aria-pressed carries the state.
• Low-res-video's corner resize handle was hidden under the upload overlay before a video loads.

Docs

how-it-works.md for Character Flow, Concept table 1 and Concept chat — the three tools that didn't have one. Written against each tool's real code and constants, matching the dithering reference format.

Checks

typecheck clean, lint 0 errors, prettier clean, 187/187 tests (8 new), production build succeeds. Verified in the browser across all three tools.