Add canvas drawing blocks and zoom engine (#403) * Add canvas page zoom with compositor-only gesture frames Zoom for canvas pages in the editor and published posts: ctrl/cmd+wheel, trackpad pinch, two-finger pinch on touch, Safari gesture events, keyboard and on-canvas controls. Native scroll stays on the existing scroller; the content is scaled inside a spacer sized content x zoom. Gesture frames write only the layer's inline transform (the anchor's scroll offset is folded into a translate on top of the scale), so a frame has no style, layout or paint work; the spacer resize, real scroll write and React state land once when the gesture settles, pixel-identical. --canvas-zoom is a non-inherited registered property so even the settle restyles two elements. Wheel and keyboard zoom ease toward their target in log space instead of stepping per event; pinches are finger-locked and start from an 8px dead zone with the distance rebased so there is no initial jump. The layer is permanently will-change: transform, which pins its raster scale (verified in compositor traces) and propagates to the animated images' own layers, which keep GIF frames out of the canvas raster. Published canvas image blocks request a ladder width from their block width instead of the 1200px body-column size, halving the decode work the first zoom-out per page load triggers. Co-Authored-By: Claude Fable 5.1 * Serve animated GIFs as H.264 video on published pages Animated GIFs decode every frame on the CPU and go through the raster path, which on the canvas test page cost two worker cores' worth of decode at idle and half of all decode work during zoom gestures. The image proxy now has a format=mp4 variant: an animated GIF blob is transcoded once with ffmpeg (ffmpeg-static, H.264 yuv420p faststart), stored beside the resized variants, and served by redirect; non-GIFs and failures redirect to the original so the client keeps the image. Published image blocks and galleries render a muted looping video for GIF blobs, showing the GIF until the video can play and keeping it on error. Email, lightbox, editor and copy/paste are unchanged. Transparent GIFs are flattened onto black by this rendition. Co-Authored-By: Claude Fable 5.1 * Let canvas zoom leave empty space instead of clamping the anchor Near an edge the anchor's scroll offset fell outside the content's range and was clamped, so the content slid to fit and the point under the cursor moved; below fit-to-width the canvas was pinned to the top-left. The settle now writes spacer padding equal to the empty space the anchor leaves on each side (content-box sizing), so the offset it writes is always in range; the padding is real scrollable space and shrinks back to zero at the next settle that does not need it. The gesture's virtual scroll is kept exact: rounding it per frame let each wheel event re-derive its anchor with a half-pixel error that later zoom-in steps amplified to ~12px at 2x. Only the written transform and scroll offset are rounded. Co-Authored-By: Claude Fable 5.1 * Trim canvas zoom padding on scroll and simplify the engine Padding the settle leaves before or after the content stayed until the next zoom, so a corner zoom-out left blank space the canvas could be scrolled into indefinitely. Once a native scroll ends with a pad fully off screen it is removed, and the scroll offset is adjusted by the same amount in the same write, so nothing moves; this runs on scrollend, on a 150ms scroll debounce for Safari, and after pointer or touch release, never during a gesture. The padding geometry the settle and the trim share moves into math.ts with tests; the engine gains small helpers so wheel, keyboard and programmatic targets are built one way and the padding and scroll writes are done in one place; the unused clampScroll goes; the header comment describes the final design in one place. Co-Authored-By: Claude Fable 5.1 * Pause canvas videos while a zoom gesture runs WebKit re-renders a playing video on every ancestor transform change, so with six GIF videos on the canvas a pinch frame in WebKit took 46-58ms median and up to 260ms while a layer with only static images scaled at 16ms. Playing videos inside the layer are paused when a gesture begins and resumed one frame after the settle so the restart does not share the settle's layout frame. Measured in a local WebKit build: per-frame median 17ms, max 31ms, settle frame at most 32ms. Co-Authored-By: Claude Fable 5.1 * Add a mobile view setting for canvas pages A canvas can be shown on phones scaled to fit the whole width (as before), or anchored to a 390 canvas px area on the left edge or in the center. The editor picks the mode from a menu in the top corner and draws dashed guides for the area in canvas px, so they scale with zoom. The mode is a canvas/mobile-view fact on the page and an optional mobileView field on the canvas page lexicon, read by the published page. The stylesheet's default zoom divides by the area width when one is set (via --canvas-mobile-area on the spacer), so server-rendered HTML is already at the right scale; a fresh mount then scrolls to the area's left edge. Co-Authored-By: Claude Fable 5.1 * Zoom canvases on double tap and when text is focused on touch devices A touch double tap on the canvas eases the zoom in around the tap: below 1x to 1x, then to the next step up to the maximum, then back to fit. Taps on links, buttons, inputs, media and editable text are ignored. Writers keep double tap on empty canvas as "add a block", so the zoom applies to readers, previews and published pages. In the editor, focusing a block on a coarse-pointer device while zoomed below 1x eases to 1x with the block kept on screen; blur does nothing. Co-Authored-By: Claude Fable 5.1 * Move the canvas mobile view toggle to the top right and draw guides as lines only The toggle sat in the top-left corner over the toolbar; it now shares the top-right row with the metadata bar. The mobile view guides drop the tinted band and label and keep just the two dashed lines. Co-Authored-By: Claude Fable 5.1 * Stop a handle drag from selecting text The gripper and the width and rotate handles began a drag on mousedown without cancelling the browser's default, so a text selection started at the handle and grew over every block the pointer crossed. The immediate-drag path now prevents the default; the long-press variant is unchanged. Co-Authored-By: Claude Fable 5.1 * Drop the unused mobile view width import Co-Authored-By: Claude Fable 5.1 * Keep the editor sidebar beside a lone canvas page The sidebar sized its own box from the normal page width, which lined it up with a 624px page but landed it 8-40px inside a lone canvas page, which is centered at its own width with shrunk spacers. It now renders inside the first bookend spacer, whose right edge is the page's left edge at any page width; layouts without spacers keep the free-standing box via a `floating` flag. A canvas page is capped at layout - 128px on large screens so the spacer always has room for the sidebar. Co-Authored-By: Claude Fable 5.1 * Add a lock viewer zoom setting for canvas pages A checkbox in the canvas editor's mobile view menu. When on, viewers of the published canvas get no zoom: wheel, pinch and double tap are off and the zoom controls are hidden, on every viewport, so the page keeps its initial framing. The editor stays zoomable. Stored as a canvas/lock-viewer-zoom fact and published as the optional lockViewerZoom field on the canvas page lexicon. Co-Authored-By: Claude Fable 5.1 * Apply the viewer zoom lock to view-only links in the editor Readers of a canvas through a read-only share link get the same lock as published viewers: no zoom gestures and no zoom controls. Writers keep zoom. Co-Authored-By: Claude Fable 5.1 * Show mobile view guides only to writers The guides are an editing aid; view-only links and previews no longer draw them. Co-Authored-By: Claude Fable 5.1 * Allow a linear document as a canvas block A canvas block can now hold a pub.leaflet.pages.linearDocument: blocks in reading order that are positioned, sized and rotated on the canvas as one. Only canvases accept it; linear documents still don't nest. Co-Authored-By: Claude Opus 5.5 (1M context) * Seed a remounted text editor from its previous yjs doc A text block that moves in the tree remounts on a fresh Y.Doc before its block/text subscription delivers, and text typed since page load isn't in the initial facts. It rendered empty and then applied its text mid-render (a setState-during-render warning). The new mount now copies the doc it replaces, which is kept briefly past unmount. Co-Authored-By: Claude Opus 5.5 (1M context) * Replay undo snapshots into the live editor after a remount Undo/redo entries hold whole EditorStates, tied to the editor that recorded them. Once a block has remounted, swapping the old state in never reaches the live yjs doc, so the change silently didn't stick. restoreEditorState replays the snapshot's content into whichever editor is live instead. Co-Authored-By: Claude Opus 5.5 (1M context) * Group canvas blocks into an embedded linear document Pressing Enter in a canvas block now turns it into a group: a canvas block (block/type "group") whose card/block children form a linear document, rendered with the normal block list and keymap, and moved, resized, rotated and layered as one canvas block. Lists, splitting, merging, arrow keys and paste behave as on a doc page inside it. - groupCanvasBlock repoints the block's canvas/block fact at a new group entity; its undo is one atomic ungroupCanvasBlock, so undo never renders half-converted states. - Group children have the group as their parent; pageOfParent maps it back to the canvas for page-level consumers (focus, toolbars, comments, footnotes, zoom). - Removing a group's last block removes the group. - Groups publish as a pub.leaflet.pages.linearDocument canvas block. The published canvas, page-link previews, email thumbnails, quotes, code prerendering, image collection and text extraction walk into them, with index paths [canvasIndex, i]. - Editor and published reading order (titles, footnotes, comments, focusPage) share getPageReadingOrder / pageBlocksInOrder; canvas pages build their publish record once, and the published canvas and its page-link preview share one layout component. - Delete the editor canvas's custom wheel handler, which re-implemented native scrolling. Co-Authored-By: Claude Opus 5.5 (1M context) * Paste multiple blocks onto a lone canvas block as a group The legacy paste path, used only for lone canvas blocks, wrote every pasted block into the same editor, so a multi-paragraph paste collapsed into one block. The block now becomes a group and the paste takes the normal bulk path into it; a one-paragraph paste still inserts inline. The whole paste is one undo step. Co-Authored-By: Claude Opus 5.5 (1M context) * Derive publish and tab titles from reading order The publish button, tab title and page metadata took a canvas's first top-level block, which is a group once Enter has been pressed in it, so those canvases had no title. They now use the page's reading order, which descends into groups. Co-Authored-By: Claude Opus 5.5 (1M context) * Keep the canvas gripper out of the block's layout The gripper was a 13px flex item, so editor canvas content sat 13px right of where it publishes. It now sits in the block's padding. The published canvas block also drops page-flow margins at its edges, which the editor doesn't have; its height sets the rotation origin. Co-Authored-By: Claude Opus 5.5 (1M context) * Round canvas rotation to whole degrees Published records store whole degrees and publish truncated the angle, so rotated blocks landed a few px off. The editor now shows and saves the rounded angle, and publish rounds to match. Co-Authored-By: Claude Opus 5.5 (1M context) * Align published list indentation with the editor Published list markers were built from separate margins (6px deeper per level than the editor, different again on mobile), and a checked item's checkbox pushed its children 20px further per checked ancestor. Each level now indents by the editor's 38px marker column at every width, and a checkbox widens only its own row. Co-Authored-By: Claude Opus 5.5 (1M context) * Share block spacing between the editor and published view The editor spaced blocks with row padding and the published view with collapsing margins, so a post drifted (4px after each multi-line paragraph, 8px above headings). Both now take their vertical spacing from blockSpacingClassName, using the published margin model. Lists reproduce the published rhythm in the editor, the editor page gets the published top padding, and canvas blocks share the edge rule. Co-Authored-By: Claude Opus 5.5 (1M context) * Add freehand ink drawings to the canvas A Draw tool on canvases captures pen, mouse and touch strokes (rendered with perfect-freehand, with real stylus pressure) in a choice of colors and sizes, plus an eraser that also responds to a stylus's eraser end. Every stroke in a draw session groups into one drawing block that grows to fit, which then moves, scales (width handle) and rotates like any canvas block. Each stroke is its own fact and undo step. Published canvases render drawings via the new pub.leaflet.blocks.drawing lexicon. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01685rbS7DkDzcyaEsPb9Upj * Put done and cancel on the drawing's frame; use the paint icon for ink color While drawing, a check and an X sit above the drawing's top-right corner, kept the same size on screen at any zoom. The X discards the session: strokes drawn are retracted, erased strokes come back and the frame returns to where it was, or a drawing the session created is removed, all as one undo step. The toolbar's color picker opens from the paint icon tinted with the current color. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01685rbS7DkDzcyaEsPb9Upj * Trim ink presets to three colors and add a custom color picker The color popover offers Text, Accent and Red plus a custom swatch set by a saturation/brightness area, hue slider and hex field, built from the same react-aria pieces as the theme color pickers. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01685rbS7DkDzcyaEsPb9Upj * Stop the ffmpeg call from tracing the whole project Turbopack can't resolve the runtime binary path passed to execFile, so it traced every file in the repo into the server output. Ignore the call for tracing; outputFileTracingIncludes already ships the ffmpeg binary. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01685rbS7DkDzcyaEsPb9Upj * Use the existing pencil icon for drawing Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01685rbS7DkDzcyaEsPb9Upj * Draw with the theme's primary, tertiary, accent and border-light colors The four built-in ink colors now follow the document theme, and the custom color sits apart at the right of the swatch row; using the color picker selects it. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01685rbS7DkDzcyaEsPb9Upj * Offer primary, accent and tertiary ink; even out the custom color divider Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01685rbS7DkDzcyaEsPb9Upj * Add an embedded canvas block: a fixed-size canvas shown inline An embedded canvas block (block/type "embedded-canvas", "Drawing" in the slash menu) points at a canvas page through block/card, like a page link, but renders that whole canvas inline, scaled to the block's width, with an Edit button in its top right that opens the canvas as a page beside the document. The canvas page carries canvas/fixed-width and canvas/fixed-height: opened, it is exactly that size instead of 1272px wide and growing, with all the usual canvas tools (add, draw, drag, resize, rotate, layer, zoom); blocks are clipped to the area and a drag or new block keeps at least 24px inside it. The mobile view toggle and publication metadata overlay don't apply and are hidden. - The slash command creates one at the medium preset and opens it; the block's settings popover picks a preset size (short, medium, square, tall; all 624px wide so text reads at body size inline). - Publishes as pub.leaflet.blocks.embeddedCanvas referencing its canvas page, which now records width and height on pub.leaflet.pages.canvas. - The published post renders it inline the same way; the email redraws its blocks at the body width, linking to the post; feeds skip it. - Copy/paste round-trips it with its canvas page. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01QGzzgg8fZtJuVP6EvFQB1g * Keep an embedded canvas page's width when the zoom engine fits its gutter The zoom engine owns the scroller's inline width and clears it when the scrollbar takes no gutter (overlay scrollbars), which collapsed a fixed canvas page to nothing, so its Edit button seemed to do nothing. Size it with a class reading a custom property instead. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01QGzzgg8fZtJuVP6EvFQB1g * Center an embedded canvas page in its viewport while it fits A fixed-size canvas now sits centered on each axis it fits, through margins on the zoom layer that go to zero once it is zoomed past the viewport. The zoom engine takes the margins as padding during a gesture and, for a centered canvas, keeps a fitting axis centered and an overflowing one inside the content, so zooming across the viewport's size doesn't jump and no empty space opens beside the drawing. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01QGzzgg8fZtJuVP6EvFQB1g * Add SessionStart hook for Claude Code on the web Installs npm deps (retrying the flaky supabase binary download), starts dockerd, brings up a migrated local Supabase stack with the 2.x CLI (1.x's realtime init crashes without IPv6), and writes .env.local. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_011y2wtq7SCmiuy4pJbRiuDC * Give embedded canvas pages half a viewport of margin on every side A drawing's canvas page is now surrounded by half its viewport of empty space at every zoom, so any point of the drawing, corners included, can be scrolled to the middle of the screen. It opens centered, and the zoom engine keeps the viewport's center inside the drawing rather than centering it only while it fits. The spacer is a flow root so the layer's top margin stays inside it instead of collapsing through and adding scroll past the bottom. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01QGzzgg8fZtJuVP6EvFQB1g * Stop clamping an embedded canvas page's zoom to its margins Zooming a drawing's page near its edges clamped the offset so the viewport's center stayed on the drawing, which dragged the drawing away from the cursor as the zoom eased in and left it pinned in a corner when zoomed out. The zoom now follows the anchor like any canvas, with the engine's settle padding covering any space past the half-viewport margins, so the point under the cursor stays put through the gesture and the settle. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01QGzzgg8fZtJuVP6EvFQB1g * Treat a drawing's surround as the zoom engine's content margin The centered zoom mode had its own spacer/layer CSS rules and its own box math (centerOffset, centeredBox) beside the regular ones. The margin is now part of the one model: the spacer and layer always read --canvas-margin-x/y (0 by default, half the viewport for .canvasZoomCentered), contentBox takes the margin, and the engine locates the content through one contentOrigin (padding + margin) instead of adding the margin at each call site. The layer is offset with position: relative instead of margins, so the spacer no longer needs flow-root to keep a top margin from collapsing. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01QGzzgg8fZtJuVP6EvFQB1g * Read every canvas's size the same way, drawing or not useCanvasSize replaces useCanvasFixedSize and returns a size for every canvas: a drawing's set width and height, or the full canvas width and the height its blocks reach. Canvas, CanvasContent and the zoom provider now read width/height from it instead of branching on whether a fixed size exists, and clampToCanvas is a no-op on other canvases, so the three placement paths call it unconditionally (the two add paths through addCanvasTextBlock). The mobile view and metadata overlays are hidden behind one check, and mobileArea no longer special-cases drawings since they cannot set a mobile view. The editor block and the published post share ScaledCanvas for showing a drawing whole at the block's width, and the published CanvasBlocks derives the same width/height pair. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01QGzzgg8fZtJuVP6EvFQB1g * Stop last list items overflowing the page and lift canvas zoom controls above the text toolbar A list's last item used box-content for its bottom padding, which also added the wrapper's inline padding on top of w-full, pushing it past the page. Keep border-box and raise its min-height instead. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01GJgX4FdeZiV6oXg2sSvmSN * Let publication customize pages be created as canvases The New Page popover gets a Doc / Canvas toggle; addPublicationNavPage takes an optional pageType and leaves canvas pages empty instead of seeding a text block. A Page given a header now stacks it above a canvas that fills the remaining height, so the publication header and nav keep their usual tabs, editing, reordering and sticky behavior over a canvas page. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Aafftqek2YSK96XRTMVgvi * Render canvas publication pages when published; hide empty canvas toolbars A publication page whose record is a canvas now renders the published canvas viewport instead of an empty linear document. PublicationHomeLayout's fillWithCanvas mode lets it fill the height below the nav and widen past the page width, matching the customize editor. Selecting an image on a canvas showed a toolbar with only its close button, since the image toolbar's one control is hidden on canvas pages. The editor footers now share useHasBlockToolbar, which skips toolbars that would be empty on a canvas. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Aafftqek2YSK96XRTMVgvi * Collapse the publication header on scroll over canvas pages A canvas page scrolls inside its own scroller, so the publication header above it never scrolled away. useCollapsingCanvasHeader sizes the canvas area to the space below the stuck nav and routes wheel and touch scrolling that starts on the canvas to the page until the header is gone; scrolling back up from the canvas's top reveals it again. Used by both the customize editor and the published page. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Aafftqek2YSK96XRTMVgvi * Scroll a publication's canvas page with the page, like a doc page A canvas below a publication header and nav no longer scrolls inside its own scroller. The page scroller owns vertical scrolling, so one wheel or touch gesture moves the header, the stuck nav and the canvas together, with one scrollbar; the canvas box grows to the zoomed canvas's height and only scrolls sideways. The zoom engine takes a `pageScroll` (src/canvasZoom/pageScroll.tsx) through which it reads and writes vertical offsets relative to where the box sits in the page, uses the page viewport below the stuck nav as the canvas viewport, and counts the page's own space above and below the box as slack the settle padding need not add. Overlays (zoom controls, add and draw buttons, mobile view toggle, ink toolbar) move into CanvasOverlay strips stuck to the viewport's edges so they stay on screen over a tall canvas. Every other canvas keeps its own scroller. Used by the publication customize editor and the published publication page; replaces useCollapsingCanvasHeader. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Aafftqek2YSK96XRTMVgvi * Revert canvas pages in the publication customize editor Reverts ce5c5e9, 0d63ed8, 684038d and ca0d683: creating publication pages as canvases, rendering them when published, collapsing the header over them, the page-scroll mode for the canvas zoom engine, and the canvas empty-toolbar fix that rode along. The tree matches 433ba40. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Aafftqek2YSK96XRTMVgvi * Let publication pages be canvases that scroll with the page The New Page popover gets a Doc / Canvas toggle; addPublicationNavPage takes a pageType and leaves a canvas page empty. The customize editor renders a canvas page below the publication header and nav inside the page card's own scroller, and the published page renders pub.leaflet.pages.canvas records the same way through PublicationHomeLayout, so the nav keeps its tabs, editing, reordering, Subscribe, stickiness and background fade from doc pages. Scrolling stays native: the page scroller owns vertical scrolling and the canvas box (.canvasPageScroll) scrolls sideways only, so one wheel or touch gesture moves the header, the stuck nav and the canvas together. The zoom engine takes `pageScroll`, finds the box from the spacer and the page as its nearest scrolling ancestor, and reads and writes one scroller per axis. Where the spacer starts in the scrollers is measured rather than assumed, and settle padding comes from the scrollers' real extent, so the header's space above the canvas is never padded for. Overlays sit in CanvasOverlay sticky strips beside the box so they stay on screen over a tall canvas; CanvasPageArea measures the stuck nav and page viewport for the strips and the canvas's minimum height. Co-Authored-By: Claude Fable 5.1 --------- Co-authored-by: Claude Fable 5.1