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

This reverts commit 812371b64a.

web/sections/BlockMedia.tsx

@@ -27,7 +27,6 @@ export const BlockMedia = ({
   aspect,
   onUrl,
   onCrop,
-  onDraft,
 }: {
   url: string | null;
   crop: string | null;
@@ -35,14 +34,6 @@ 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);
 
@@ -55,10 +46,7 @@ export const BlockMedia = ({
       value={url}
       onChange={onUrl}
       crop={draft}
-      onCropChange={(next) => {
-        setDraft(next);
-        onDraft?.(next);
-      }}
+      onCropChange={setDraft}
       aspect={aspect}
       label="Choose a photograph"
     />

web/sections/PageBuilderPanel.tsx

@@ -8,7 +8,6 @@ import { readableError } from '../errors';
 import { SitePreview, useDevPort } from '../SitePreview';
 import { usePreviewable, useViewMode } from '../ViewMode';
 import { paintMeasure, paintSelection, type CanvasComponent, type CanvasSection } from '../canvas';
-import { paintFraming, type Framing, type FrameTarget } from '../framing';
 
 /*
   What the Spacing dialog calls a block, by kind.
@@ -270,28 +269,6 @@ export const PageBuilderPanel = () => {
     band?.scrollIntoView({ behavior: 'smooth', block: 'start' });
   }, [part]);
 
-  /*
-    Framing, driven from outside the paint.
-
-    The handle is kept in a ref rather than in state because the panel's zoom buttons have to push a
-    rectangle into the page on every press, and re-running `onDocument` for that would repaint every
-    control on the page sixty times a gesture. A ref lets one number reach one element.
-  */
-  const framingRef = useRef<Framing | null>(null);
-
-  /*
-    Which pictures can be dragged: every photograph block that has been given a shape.
-
-    Serialised into the dependency rather than passed as an array, because a new array every render is a
-    new identity every render, and `onDocument` would repaint on each one. This is the same trap the
-    theme in SitePreview hit.
-  */
-  const frameTargets: FrameTarget[] = sections
-    .flatMap((section) => section.components)
-    .filter((component) => component.kind === 'media' && typeof component.content?.ratio === 'number')
-    .map((component) => ({ id: component.id, crop: component.content?.crop ?? null }));
-  const frameKey = JSON.stringify(frameTargets);
-
   const onDocument = useCallback(
     (frameDocument: Document) => {
       frameDoc.current = frameDocument;
@@ -336,30 +313,14 @@ export const PageBuilderPanel = () => {
         onSpaceComponent: (component) => handlersRef.current.spaceComponent(component),
       });
 
-      /*
-        Dragging a photograph reframes it, at the size it is printed.
-
-        The write is one PATCH when the hand stops — the drag itself is inline styles on the picture,
-        which costs nothing. See framing.ts, and the site's PageComponent for the half that makes the
-        page draw a rectangle rather than a pan.
-      */
-      const framing = paintFraming(frameDocument, JSON.parse(frameKey) as FrameTarget[], (id, crop) => {
-        const component = sections.flatMap((section) => section.components).find((one) => one.id === id);
-        if (!component) return;
-        void handlersRef.current.setContent(component, { ...component.content, crop: crop || undefined });
-      });
-      framingRef.current = framing;
-
       return () => {
-        framingRef.current = null;
-        framing.cleanup();
         selection();
         measure();
       };
     },
     // `mode` is in here so switching to View gives SitePreview a NEW function, which runs the previous
     // paint's cleanup and then paints nothing. That is what removes the chrome without a reload.
-    [sections, frameKey],
+    [sections],
   );
 
   /*
@@ -889,9 +850,6 @@ export const PageBuilderPanel = () => {
                   onCrop={(crop) =>
                     void handlersRef.current.setContent(block, { ...block.content, crop: crop || undefined })
                   }
-                  /* Every press of a zoom button reaches the real picture too, so the thumbnail and the
-                     page are never showing two different framings of the same photograph. */
-                  onDraft={(crop) => framingRef.current?.apply(block.id, crop)}
                 />
               ) : (
                 <>