@batterai/editor-shell 0.1.0

package/dist/useCanvasBackStack.d.ts

@@ -0,0 +1,19 @@
+type UseCanvasBackStackArgs = {
+    activePageId: string;
+    onActivatePage: (pageId: string) => void;
+};
+/**
+ * `useCanvasBackStack` — the board's back history. Every time the active
+ * page changes for any reason (a link jump, opening a collection item, an
+ * overview jump), the page just left is pushed so a back-press can unwind one
+ * hop at a time; a back-press itself is flagged so it pops rather than pushes.
+ *
+ * Returns the current stack (read by the portal login flow to find where to
+ * return to) and the back-press handler.
+ */
+export declare function useCanvasBackStack({ activePageId, onActivatePage }: UseCanvasBackStackArgs): {
+    backStack: string[];
+    handleBack: () => void;
+};
+export {};
+//# sourceMappingURL=useCanvasBackStack.d.ts.map

package/dist/useCanvasBackStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasBackStack.d.ts","sourceRoot":"","sources":["../src/useCanvasBackStack.ts"],"names":[],"mappings":"AAGA,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,sBAAsB;;;EAoC1F"}

package/dist/useCanvasBackStack.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from "react";
+import { scrollPageFrameIntoView } from "@batterai/canvas";
+/**
+ * `useCanvasBackStack` — the board's back history. Every time the active
+ * page changes for any reason (a link jump, opening a collection item, an
+ * overview jump), the page just left is pushed so a back-press can unwind one
+ * hop at a time; a back-press itself is flagged so it pops rather than pushes.
+ *
+ * Returns the current stack (read by the portal login flow to find where to
+ * return to) and the back-press handler.
+ */
+export function useCanvasBackStack({ activePageId, onActivatePage }) {
+    // Pages visited via an in-canvas link jump, most recent last, so Back
+    // can unwind multiple hops one at a time (A -> B -> C, back, back).
+    const [backStack, setBackStack] = useState([]);
+    // Back-navigation history: whenever the active page changes for ANY reason
+    // (a link jump, opening a collection item, clicking another page's block, the
+    // overview jump), remember the page we just left so Back can unwind one
+    // hop at a time. A back-press itself must NOT record a hop — otherwise Back
+    // would ping-pong between the last two pages instead of walking back.
+    const prevActivePageRef = useRef(activePageId);
+    const backNavRef = useRef(false);
+    useEffect(() => {
+        const previous = prevActivePageRef.current;
+        if (previous === activePageId)
+            return;
+        prevActivePageRef.current = activePageId;
+        if (backNavRef.current) {
+            backNavRef.current = false;
+            return;
+        }
+        setBackStack((current) => [...current, previous]);
+    }, [activePageId]);
+    function handleBack() {
+        if (backStack.length === 0)
+            return;
+        const targetId = backStack[backStack.length - 1];
+        if (!targetId)
+            return;
+        // Mark the coming activePageId change as a back-press so the effect above
+        // pops rather than pushes.
+        backNavRef.current = true;
+        setBackStack((current) => current.slice(0, -1));
+        onActivatePage(targetId);
+        requestAnimationFrame(() => scrollPageFrameIntoView(targetId));
+    }
+    return { backStack, handleBack };
+}
+//# sourceMappingURL=useCanvasBackStack.js.map

package/dist/useCanvasBackStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasBackStack.js","sourceRoot":"","sources":["../src/useCanvasBackStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAO3D;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,YAAY,EAAE,cAAc,EAA0B;IACzF,sEAAsE;IACtE,oEAAoE;IACpE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAEzD,2EAA2E;IAC3E,8EAA8E;IAC9E,wEAAwE;IACxE,4EAA4E;IAC5E,sEAAsE;IACtE,MAAM,iBAAiB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC/C,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,iBAAiB,CAAC,OAAO,CAAC;QAC3C,IAAI,QAAQ,KAAK,YAAY;YAAE,OAAO;QACtC,iBAAiB,CAAC,OAAO,GAAG,YAAY,CAAC;QACzC,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,SAAS,UAAU;QACjB,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACnC,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACjD,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,0EAA0E;QAC1E,2BAA2B;QAC3B,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAChD,cAAc,CAAC,QAAQ,CAAC,CAAC;QACzB,qBAAqB,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC,CAAC;IACjE,CAAC;IAED,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AACnC,CAAC"}

package/dist/useCanvasCamera.d.ts

@@ -0,0 +1,37 @@
+import type { PointerEvent as ReactPointerEvent } from "react";
+type UseCanvasCameraArgs = {
+    onActivatePage: (pageId: string) => void;
+};
+/**
+ * `useCanvasCamera` — the Figma-style zoom/pan controller for the board.
+ *
+ * Mid-gesture the live zoom lives in `zoomRef` and is written straight to the
+ * DOM (transform on the board, size on the sizer, scroll on the shell, the %
+ * label), so React never re-renders during the gesture itself; only after the
+ * gesture settles (`ZOOM_SETTLE_MS`) does `setZoom` commit and let the rest of
+ * Canvas (the lazy-load window) catch up.
+ *
+ * The refs are returned so Canvas can attach them to the DOM and so the
+ * windowing code can read `zoomRef`/`settleTimerRef`/`shellRef` — those stay
+ * shared by design (the window is held still mid-gesture and recomputed on the
+ * settle commit).
+ */
+export declare function useCanvasCamera({ onActivatePage }: UseCanvasCameraArgs): {
+    zoom: number;
+    shellRef: import("react").RefObject<HTMLElement | null>;
+    boardRef: import("react").RefObject<HTMLDivElement | null>;
+    sizerRef: import("react").RefObject<HTMLDivElement | null>;
+    zoomLabelRef: import("react").RefObject<HTMLButtonElement | null>;
+    settleTimerRef: import("react").RefObject<number | null>;
+    zoomRef: import("react").RefObject<number>;
+    zoomLabelDragRef: import("react").RefObject<{
+        startY: number;
+        startZoom: number;
+        moved: boolean;
+    } | null>;
+    applyZoom: (newZoom: number) => void;
+    centerFrameOnViewport: (pageId: string, finalWidthPx: number) => void;
+    handleZoomLabelPointerDown: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+};
+export {};
+//# sourceMappingURL=useCanvasCamera.d.ts.map

package/dist/useCanvasCamera.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasCamera.d.ts","sourceRoot":"","sources":["../src/useCanvasCamera.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAU/D,KAAK,mBAAmB,GAAG;IAGzB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,EAAE,cAAc,EAAE,EAAE,mBAAmB;;;;;;;;;gBAmH3B,MAAM;mBAAa,MAAM;eAAS,OAAO;;yBAnDvD,MAAM;oCAiCK,MAAM,gBAAgB,MAAM;wCAsBxB,iBAAiB,CAAC,iBAAiB,CAAC;EA+GhF"}

package/dist/useCanvasCamera.js

@@ -0,0 +1,247 @@
+import { useEffect, useRef, useState } from "react";
+import { scrollPageFrameIntoView } from "@batterai/canvas";
+import { CENTER_PAN_MS, ZOOM_JUMP_THRESHOLD, ZOOM_SETTLE_MS, ZOOM_WHEEL_SENSITIVITY, clampZoom, } from "./components/canvas/camera.js";
+/**
+ * `useCanvasCamera` — the Figma-style zoom/pan controller for the board.
+ *
+ * Mid-gesture the live zoom lives in `zoomRef` and is written straight to the
+ * DOM (transform on the board, size on the sizer, scroll on the shell, the %
+ * label), so React never re-renders during the gesture itself; only after the
+ * gesture settles (`ZOOM_SETTLE_MS`) does `setZoom` commit and let the rest of
+ * Canvas (the lazy-load window) catch up.
+ *
+ * The refs are returned so Canvas can attach them to the DOM and so the
+ * windowing code can read `zoomRef`/`settleTimerRef`/`shellRef` — those stay
+ * shared by design (the window is held still mid-gesture and recomputed on the
+ * settle commit).
+ */
+export function useCanvasCamera({ onActivatePage }) {
+    // Settled zoom only: mid-gesture the live value lives in zoomRef and is
+    // written straight to the DOM (see applyZoomAt), so React never re-renders
+    // during the gesture itself.
+    const [zoom, setZoom] = useState(1);
+    const shellRef = useRef(null);
+    const boardRef = useRef(null);
+    const sizerRef = useRef(null);
+    const zoomLabelRef = useRef(null);
+    const settleTimerRef = useRef(null);
+    const panRafRef = useRef(null);
+    const zoomRef = useRef(zoom);
+    // Mirror state into the ref ONLY while no gesture is in flight: mid-gesture
+    // the ref is ahead of state by design, and an unrelated re-render syncing
+    // the stale state back in would make the after-commit style sync snap the
+    // board to the wrong scale.
+    if (settleTimerRef.current === null) {
+        zoomRef.current = zoom;
+    }
+    // The board scales via transform (compositor-only — no layout, no repaint
+    // of the page frames, which is what makes the gesture smooth; the previous
+    // CSS `zoom` approach re-laid-out the entire board subtree every tick).
+    // transform doesn't change layout size, so a sizer element around the
+    // board is resized to the scaled dimensions to keep .canvas-shell's native
+    // scroll range correct. offsetWidth/Height read layout size, which
+    // transform doesn't affect — so this never compounds.
+    function syncZoomStyles() {
+        const board = boardRef.current;
+        const sizer = sizerRef.current;
+        if (!board || !sizer)
+            return;
+        const value = zoomRef.current;
+        board.style.transform = `scale(${value})`;
+        sizer.style.width = `${board.offsetWidth * value}px`;
+        sizer.style.height = `${board.offsetHeight * value}px`;
+    }
+    // One zoom tick: keep the anchor point (cursor or button-press center)
+    // visually still, touch ONLY the DOM (transform, sizer, scroll, % label),
+    // and defer the React commit until the gesture settles.
+    function applyZoomAt(newZoom, anchorX, anchorY) {
+        const shell = shellRef.current;
+        const currentZoom = zoomRef.current;
+        if (!shell || newZoom === currentZoom)
+            return;
+        // Capture before the sizer shrinks — the browser clamps scroll position
+        // to the new scroll range immediately, which would corrupt the math.
+        const scrollLeft = shell.scrollLeft;
+        const scrollTop = shell.scrollTop;
+        zoomRef.current = newZoom;
+        syncZoomStyles();
+        shell.scrollLeft = ((scrollLeft + anchorX) / currentZoom) * newZoom - anchorX;
+        shell.scrollTop = ((scrollTop + anchorY) / currentZoom) * newZoom - anchorY;
+        if (zoomLabelRef.current) {
+            zoomLabelRef.current.textContent = `${Math.round(newZoom * 100)}%`;
+        }
+        if (settleTimerRef.current !== null)
+            window.clearTimeout(settleTimerRef.current);
+        settleTimerRef.current = window.setTimeout(() => {
+            settleTimerRef.current = null;
+            setZoom(newZoom);
+        }, ZOOM_SETTLE_MS);
+    }
+    // Shared by the zoom-control buttons: anchor on the shell's own visible
+    // center rather than a cursor position, since a button click has none.
+    function applyZoom(newZoom) {
+        const shell = shellRef.current;
+        if (!shell)
+            return;
+        applyZoomAt(newZoom, shell.clientWidth / 2, shell.clientHeight / 2);
+    }
+    // A tunable eased horizontal pan (easeInOutCubic), replacing the browser's
+    // native smooth scroll so its duration is controllable. Cancels any in-flight
+    // pan first. Clamps to the current scroll range since a manual scroll (unlike
+    // native) isn't auto-bounded.
+    function panScrollLeft(shell, target, durationMs) {
+        if (panRafRef.current !== null)
+            cancelAnimationFrame(panRafRef.current);
+        const start = shell.scrollLeft;
+        const max = shell.scrollWidth - shell.clientWidth;
+        const end = Math.max(0, Math.min(max, target));
+        const delta = end - start;
+        if (Math.abs(delta) < 1)
+            return;
+        const t0 = performance.now();
+        const ease = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
+        const step = (now) => {
+            const p = Math.min(1, (now - t0) / durationMs);
+            shell.scrollLeft = start + delta * ease(p);
+            panRafRef.current = p < 1 ? requestAnimationFrame(step) : null;
+        };
+        panRafRef.current = requestAnimationFrame(step);
+    }
+    // After a viewport switch (collapsing all-viewports, or switching between
+    // single device viewports), pan the camera so that viewport ends up
+    // horizontally centered. Anchor on the frame SECTION's left, not a shell:
+    // this runs synchronously on the click while the DOM may still be expanded (3
+    // shells), and the section's left = column left, which is where the resulting
+    // single frame sits and stays put (only downstream columns shift).
+    function centerFrameOnViewport(pageId, finalWidthPx) {
+        const shell = shellRef.current;
+        const board = boardRef.current;
+        if (!shell || !board)
+            return;
+        const section = board.querySelector(`[data-page-id="${CSS.escape(pageId)}"]`);
+        if (!section)
+            return;
+        const zoomValue = zoomRef.current;
+        const shellRect = shell.getBoundingClientRect();
+        const secRect = section.getBoundingClientRect();
+        // Scaled X of the frame's left edge within the scrollable content.
+        const frameLeftScaled = shell.scrollLeft + (secRect.left - shellRect.left);
+        const centerScaled = frameLeftScaled + (finalWidthPx * zoomValue) / 2;
+        panScrollLeft(shell, centerScaled - shell.clientWidth / 2, CENTER_PAN_MS);
+    }
+    // The % label works like the inspector's drag-numbers: drag vertically to
+    // change the zoom (1% per pixel), plain click resets to 100%. `moved`
+    // suppresses the click-reset that follows a drag release.
+    const zoomLabelDragRef = useRef(null);
+    function handleZoomLabelPointerDown(event) {
+        event.preventDefault();
+        const drag = { startY: event.clientY, startZoom: zoomRef.current, moved: false };
+        zoomLabelDragRef.current = drag;
+        const onMove = (moveEvent) => {
+            const dy = drag.startY - moveEvent.clientY;
+            if (Math.abs(dy) > 2)
+                drag.moved = true;
+            applyZoom(clampZoom(drag.startZoom + dy / 100));
+        };
+        const onUp = () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            // Cleared a tick later so the click that follows release can still see
+            // whether this was a drag.
+            window.setTimeout(() => {
+                if (zoomLabelDragRef.current === drag)
+                    zoomLabelDragRef.current = null;
+            }, 0);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+    }
+    useEffect(() => () => {
+        if (settleTimerRef.current !== null)
+            window.clearTimeout(settleTimerRef.current);
+        if (panRafRef.current !== null)
+            cancelAnimationFrame(panRafRef.current);
+    }, []);
+    // Keep the imperative styles in sync after every React commit (zoom settle,
+    // column mounts, page adds), and whenever the board's layout size changes
+    // for a reason React doesn't see (e.g. images loading in).
+    useEffect(() => {
+        syncZoomStyles();
+    });
+    useEffect(() => {
+        const board = boardRef.current;
+        if (!board)
+            return;
+        const observer = new ResizeObserver(() => syncZoomStyles());
+        observer.observe(board);
+        return () => observer.disconnect();
+    }, []);
+    // Ctrl/Cmd + scroll wheel (also how trackpad pinch-to-zoom reaches the
+    // browser) zooms the board toward the cursor, Figma-style. Has to be a
+    // native non-passive listener: React's onWheel is passive, so
+    // preventDefault (needed to stop the browser's own page zoom/scroll) is
+    // silently ignored.
+    useEffect(() => {
+        const shell = shellRef.current;
+        if (!shell)
+            return;
+        function handleWheelZoom(event) {
+            if (!shell || (!event.ctrlKey && !event.metaKey))
+                return;
+            event.preventDefault();
+            const currentZoom = zoomRef.current;
+            const newZoom = clampZoom(currentZoom * Math.exp(-event.deltaY * ZOOM_WHEEL_SENSITIVITY));
+            const rect = shell.getBoundingClientRect();
+            applyZoomAt(newZoom, event.clientX - rect.left, event.clientY - rect.top);
+        }
+        shell.addEventListener("wheel", handleWheelZoom, { passive: false });
+        return () => shell.removeEventListener("wheel", handleWheelZoom);
+    }, []);
+    // Zoomed out below ZOOM_JUMP_THRESHOLD, a click on any page means "take me
+    // there": zoom back to 100% anchored on the click and center that page,
+    // instead of selecting a block nobody can read at that scale. Registered
+    // BEFORE the link-click effect below (effects run in code order) and uses
+    // stopImmediatePropagation so neither the link jump nor React's own
+    // block-selection handlers also react to the same click.
+    useEffect(() => {
+        const shell = shellRef.current;
+        if (!shell)
+            return;
+        function handleOverviewClick(event) {
+            if (zoomRef.current >= ZOOM_JUMP_THRESHOLD || !(event.target instanceof Element))
+                return;
+            if (event.target.closest(".zoom-control, .canvas-toolbar"))
+                return;
+            const column = event.target.closest(".page-column");
+            const frame = event.target.closest(".page-frame");
+            const pageId = frame?.dataset.pageId ?? column?.dataset.columnId;
+            if (!pageId || !shell)
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            const rect = shell.getBoundingClientRect();
+            applyZoomAt(1, event.clientX - rect.left, event.clientY - rect.top);
+            onActivatePage(pageId);
+            // Center only after the zoom's settle commit (and the heavy
+            // column-window re-render it triggers) has landed: a scroll issued
+            // before that gets swallowed by that same commit.
+            window.setTimeout(() => scrollPageFrameIntoView(pageId, "auto"), ZOOM_SETTLE_MS + 80);
+        }
+        shell.addEventListener("click", handleOverviewClick, true);
+        return () => shell.removeEventListener("click", handleOverviewClick, true);
+    }, [onActivatePage]);
+    return {
+        zoom,
+        shellRef,
+        boardRef,
+        sizerRef,
+        zoomLabelRef,
+        settleTimerRef,
+        zoomRef,
+        zoomLabelDragRef,
+        applyZoom,
+        centerFrameOnViewport,
+        handleZoomLabelPointerDown,
+    };
+}
+//# sourceMappingURL=useCanvasCamera.js.map

package/dist/useCanvasCamera.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasCamera.js","sourceRoot":"","sources":["../src/useCanvasCamera.ts"],"names":[],"mappings":"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"}

package/dist/useCanvasFocus.d.ts

@@ -0,0 +1,32 @@
+export interface CanvasFocus {
+    /** The board's active page — always a real page id. */
+    readonly activePageId: string;
+    /** Direct-edit toggle; gates inline text editing, not selection. */
+    readonly editMode: boolean;
+    /** The primary-selected block, owned by the focus store (I-2). */
+    readonly selectedId: string | null;
+    /** Multi-block selection: an app extension over the primary `selectedId`.
+     * A `string[]` (not `readonly`) to match the existing board/inspector props;
+     * consumers only ever read it. */
+    readonly selectedIds: string[];
+    /** Point the board camera at a page (keeps the current block selection). */
+    setActivePageId(pageId: string): void;
+    /** Flip the direct-edit toggle. */
+    setEditMode(on: boolean): void;
+    /** Select a single block as the primary selection (store write); its
+     * `selectedIds` collapses to just this block. Pass a page id to also move the
+     * board camera to the owning page in the same step. */
+    selectBlock(blockId: string, owningPageId?: string): void;
+    /** Set the primary selection to `lastId` and the multi-selection to `ids`
+     * (e.g. a drag range, a preset paste, an extend-click). */
+    selectMany(lastId: string | null, ids: readonly string[]): void;
+    /** Clear all selection back to page level (store write). */
+    clearSelection(): void;
+    /** Reset to the initial page with nothing selected (bootstrap / logout). */
+    reset(pageId: string): void;
+}
+/**
+ * @param initialPageId the page the board opens on (default active page).
+ */
+export declare function useCanvasFocus(initialPageId: string): CanvasFocus;
+//# sourceMappingURL=useCanvasFocus.d.ts.map

package/dist/useCanvasFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasFocus.d.ts","sourceRoot":"","sources":["../src/useCanvasFocus.ts"],"names":[],"mappings":"AAiCA,MAAM,WAAW,WAAW;IAC1B,uDAAuD;IACvD,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,oEAAoE;IACpE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC;;sCAEkC;IAClC,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;IAE/B,4EAA4E;IAC5E,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,mCAAmC;IACnC,WAAW,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;IAE/B;;2DAEuD;IACvD,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1D;+DAC2D;IAC3D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IAChE,4DAA4D;IAC5D,cAAc,IAAI,IAAI,CAAC;IACvB,4EAA4E;IAC5E,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,aAAa,EAAE,MAAM,GAAG,WAAW,CAiGjE"}

package/dist/useCanvasFocus.js

@@ -0,0 +1,114 @@
+/**
+ * `useCanvasFocus` — the editor shell's React binding to `@batterai/canvas`'s
+ * `createEditorFocusStore` (plan Phase 1d, D4/I-2). The focus store is the
+ * SINGLE WRITER of the primary selection: which block is selected lives ONLY in
+ * the store's snapshot (`blockPath`), never in a parallel React `useState`, and
+ * is read back here via `useSyncExternalStore`. This mirrors the store wiring in
+ * `apps/proof/src/editor-app.ts` (there DOM-driven; here React-driven).
+ *
+ * Two axes the shell keeps beside the ladder's primary selection — neither
+ * is "what block is selected", so neither belongs in the store (staying faithful
+ * to the store's single-primary-selection contract, and to the Phase-1 non-goal
+ * that multi-select stays app-side):
+ *   - `activePageId`   the board camera — always a real page, independent of the
+ *                      browse/edit ladder (the shell has no browse mode UI;
+ *                      the direct-edit toggle gates inline text editing,
+ *                      not block selection). Mirrored into the store's `pageId`
+ *                      so `selectBlock`'s snapshot carries the owning page.
+ *   - `editMode`       the direct-edit toggle — orthogonal to selection
+ *                      (you can select a block with it off), so it is not the
+ *                      store's browse↔page axis.
+ * Multi-select (`selectedIds`) is an app-managed extension layered on top of the
+ * store's primary `selectedId` and kept consistent with it by construction here.
+ */
+import { useCallback, useMemo, useState, useSyncExternalStore } from "react";
+import { createEditorFocusStore } from "@batterai/canvas";
+/** The single selected block id (the tail of the store's root-to-target path),
+ * or null at page level — the ONE place `selectedId` is derived. */
+function selectedIdFromSnapshot(snapshot) {
+    if (snapshot.level !== "block")
+        return null;
+    return snapshot.blockPath[snapshot.blockPath.length - 1] ?? null;
+}
+/**
+ * @param initialPageId the page the board opens on (default active page).
+ */
+export function useCanvasFocus(initialPageId) {
+    const store = useMemo(() => createEditorFocusStore(), []);
+    // Seed the store at page level on the initial page so `selectBlock`'s snapshot
+    // always carries a real owning page and the ladder starts at page — the
+    // The shell never shows the store's `browse` level (edit mode is a separate
+    // axis; `exitEditMode` is never called). Seeding while still at `browse` makes
+    // this idempotent and self-healing if a `useMemo` reset ever hands back a
+    // fresh, unseeded store. No subscribers exist during render, so the `commit`
+    // inside `enterEditMode` notifies nobody here.
+    if (store.getSnapshot().level === "browse") {
+        store.enterEditMode(initialPageId);
+    }
+    const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+    const selectedId = selectedIdFromSnapshot(snapshot);
+    const [activePageId, setActivePageIdState] = useState(initialPageId);
+    const [editMode, setEditModeState] = useState(false);
+    // Kept consistent with the store's primary `selectedId`: every path that
+    // writes the primary selection also sets this, so `selectedIds` always
+    // contains `selectedId` (or is empty when nothing is selected).
+    const [selectedIds, setSelectedIds] = useState([]);
+    // The store inherits `pageId` from its current snapshot on `selectBlock`, so
+    // moving the camera has to re-commit the level with the new page. At page
+    // level (nothing selected) `enterEditMode` sets page + empty path; with a
+    // block selected we re-select the same block under the new page so the
+    // selection survives the camera move (matches the old `setActivePageId` +
+    // `setSelectedId` pairs).
+    const setActivePageId = useCallback((pageId) => {
+        setActivePageIdState(pageId);
+        const current = store.getSnapshot();
+        const block = selectedIdFromSnapshot(current);
+        if (block && current.pageId !== pageId) {
+            store.enterEditMode(pageId);
+            store.selectBlock([block]);
+        }
+        else if (current.pageId !== pageId) {
+            store.enterEditMode(pageId);
+        }
+    }, [store]);
+    const setEditMode = useCallback((on) => setEditModeState(on), []);
+    const selectBlock = useCallback((blockId, owningPageId) => {
+        if (owningPageId && owningPageId !== store.getSnapshot().pageId) {
+            setActivePageIdState(owningPageId);
+            store.enterEditMode(owningPageId);
+        }
+        store.selectBlock([blockId]);
+        setSelectedIds([blockId]);
+    }, [store]);
+    const selectMany = useCallback((lastId, ids) => {
+        if (!lastId) {
+            store.deselect();
+            setSelectedIds([]);
+            return;
+        }
+        store.selectBlock([lastId]);
+        setSelectedIds([...ids]);
+    }, [store]);
+    const clearSelection = useCallback(() => {
+        store.deselect();
+        setSelectedIds([]);
+    }, [store]);
+    const reset = useCallback((pageId) => {
+        setActivePageIdState(pageId);
+        store.enterEditMode(pageId);
+        setSelectedIds([]);
+    }, [store]);
+    return {
+        activePageId,
+        editMode,
+        selectedId,
+        selectedIds,
+        setActivePageId,
+        setEditMode,
+        selectBlock,
+        selectMany,
+        clearSelection,
+        reset,
+    };
+}
+//# sourceMappingURL=useCanvasFocus.js.map

package/dist/useCanvasFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasFocus.js","sourceRoot":"","sources":["../src/useCanvasFocus.ts"],"names":[],"mappings":"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"}

package/dist/useCanvasKeyboardNav.d.ts

@@ -0,0 +1,32 @@
+import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from "react";
+import type { CanvasPage } from "./types";
+type UseCanvasKeyboardNavArgs = {
+    boardRef: RefObject<HTMLDivElement | null>;
+    shellRef: RefObject<HTMLElement | null>;
+    pages: CanvasPage[];
+    topLevel: readonly CanvasPage[];
+    pagesInColumn: (topLevelId: string) => readonly CanvasPage[];
+    activePageId: string;
+    selectedId: string | null;
+    isTextEditing: boolean;
+    onSelect: (blockId: string | null, extend?: boolean) => void;
+    setMovingBlockId: (blockId: string | null) => void;
+    activateAndScroll: (pageId: string, behavior?: ScrollBehavior) => void;
+};
+/**
+ * `useCanvasKeyboardNav` — arrow-key navigation across the board plus the Esc
+ * selection ladder (§2.1, I-1). Arrow keys move the selection between a page's
+ * blocks (Up/Down) and between pages (all four directions); Esc from a text
+ * session lands on the enclosing block, and a further Esc climbs block → parent
+ * block → page level.
+ *
+ * Returns the `onKeyDown` handler for the canvas shell. The two Esc listeners
+ * are native (document/shell) rather than React handlers because committing a
+ * text session blurs focus to <body> before the keydown fires, so a
+ * shell-scoped React handler would never see them.
+ */
+export declare function useCanvasKeyboardNav({ boardRef, shellRef, pages, topLevel, pagesInColumn, activePageId, selectedId, isTextEditing, onSelect, setMovingBlockId, activateAndScroll, }: UseCanvasKeyboardNavArgs): {
+    handleCanvasKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => void;
+};
+export {};
+//# sourceMappingURL=useCanvasKeyboardNav.d.ts.map

package/dist/useCanvasKeyboardNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasKeyboardNav.d.ts","sourceRoot":"","sources":["../src/useCanvasKeyboardNav.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,IAAI,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,SAAS,UAAU,EAAE,CAAC;IAChC,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,SAAS,UAAU,EAAE,CAAC;IAC7D,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,UAAU,EACV,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,iBAAiB,GAClB,EAAE,wBAAwB;iCA4FW,kBAAkB,CAAC,WAAW,CAAC;EAsFpE"}