Before: an agent that built several HTML pages for a prototype could only
hand them over as separate files, and a reader had to open and page through
each one to see how the screens relate.
After: a `canvas.json` (or `*.canvas.json`) deliverable opens in the
full-screen focus as an infinite pan / zoom canvas of the issue's HTML
deliverables. Each frame shows the latest version of its HTML file in a
sandboxed iframe at its x / y / w / h, labelled with its name. Wheel or pinch
zooms around the cursor, dragging the background (or space + drag) pans, and
"Fit all" fits the page. A "Prototypes" list centers a frame, and Play opens
the frame's HTML full screen in the same focus, with "Back to canvas" in the
top bar. Frames can be dragged; "Save layout" uploads a new version of the
canvas file and posts it as a `/note` comment carrying the file card, so the
version joins the deliverable and wakes no agent. A new canvas version is
followed once loaded, and only frames whose HTML attachment changed remount.
The agent brief gets one optional paragraph describing the file shape.
How: `@multica/core/attachments/prototype-canvas` holds the pure parts (zod
schema with defaults, `parsePrototypeCanvas`, `moveFrame` on the raw JSON,
`fitAllTransform`, `centerOnFrame`, `zoomAround`, `isCanvasFilename`).
`AttachmentPreviewPanel` takes an optional `stage` that replaces the kind's
body while keeping the top bar and prev / next. The focus renders
`PrototypeCanvas` as that stage, tracks the canvas it was played from, and
follows new versions with a small `useFollowLatestVersion` hook that mirrors
the 4-D rule.
Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_017deksZDSzZBA4QSqZZoBip
Claude
3faf78ec79