frame a photograph on the page, at the size it is printed

The panel frames a 21:9 header in a 200-pixel thumbnail while the real one is on screen six inches
away, in the layout it belongs to. Dragging the picture itself is the obvious control, and until now
it was also the expensive one: every new rectangle made the site cut a fresh ladder — nine widths, two
formats, 1.54s measured — with the preview waiting for it.

Both halves are gone. The site draws the rectangle in CSS in development (previous commit, other
repo), so a framing costs nothing to show; the drag here is inline styles on the picture, and the only
write is one PATCH when the hand stops.

Inline styles rather than the site's custom properties, because the site renders a FRAMED picture one
way and an untouched one another — and an untouched photograph is exactly the one somebody is about to
drag. Inline beats both, and beats the object-fit the unframed path leaves behind, which would
otherwise crop the picture a second time inside a box that is already the crop.

Attached to every shaped photograph rather than to the selected one. Selection would put itself in the
paint's dependencies, so choosing a block would repaint the whole page's chrome; this way onDocument
still depends on the sections alone. The cost is that a click could become a nudge, so nothing moves
until the pointer has travelled 3px — below that it is a click, it selects the block, and no crop is
written.

The panel's zoom buttons now reach the real picture too, through `onDraft`. Otherwise the thumbnail
and the page would disagree for the 600ms until the debounce lands, which reads as a broken control
rather than a delayed one.

crop.ts is new and is the reason this is safe: parseCrop had already been copied once, and a crop that
means one thing in the panel and another on the page is a bug you can only feel. MediaField now draws
its own preview through the same `rectToBox`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/BlockMedia.tsx

@@ -27,6 +27,7 @@ export const BlockMedia = ({
   aspect,
   onUrl,
   onCrop,
+  onDraft,
 }: {
   url: string | null;
   crop: string | null;
@@ -34,6 +35,14 @@ export const BlockMedia = ({
   aspect: string;
   onUrl: (url: string | null) => void;
   onCrop: (crop: string | null) => void;
+  /**
+   * Every change to the draft, not only the saved one.
+   *
+   * The page shows the same photograph at full size, and it has to move when these buttons do —
+   * otherwise the thumbnail and the page disagree for the 600ms until the save lands, which reads as
+   * the control being broken rather than as it being debounced.
+   */
+  onDraft?: (crop: string | null) => void;
 }) => {
   const [draft, setDraft] = useState<string | null>(crop);
 
@@ -46,7 +55,10 @@ export const BlockMedia = ({
       value={url}
       onChange={onUrl}
       crop={draft}
-      onCropChange={setDraft}
+      onCropChange={(next) => {
+        setDraft(next);
+        onDraft?.(next);
+      }}
       aspect={aspect}
       label="Choose a photograph"
     />