nudge-ui 0.2.4 → 0.2.5

package/dist/inspector/canvas/SketchToolOptions.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { IconButton } from "../ui/IconButton.js";
+import { Tooltip } from "../ui/Tooltip.js";
+import { setSketchDrawingTool, setSketchStrokeColor, useSketchDrawingTools, } from "../sketch/drawingTools.js";
+import { SKETCH_PEN_COLORS, SKETCH_RECTANGLE_FILL_OPACITY } from "../sketch/model.js";
+import { ToolOptionsDrawer, useDismissablePopover } from "./ToolOptionsDrawer.js";
+function PenIllustration({ color }) {
+    const id = useId();
+    return (_jsxs("svg", { className: "sketch-options__illustration sketch-options__illustration--pen", viewBox: "0 0 20 47", width: 20, height: 47, fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M1.84492 27.3255C2.22193 26.8144 2.81931 26.5127 3.45445 26.5127H16.1011C16.7362 26.5127 17.3336 26.8144 17.7106 27.3255L19.1651 29.2974C19.4187 29.6413 19.5556 30.0573 19.5556 30.4846V44.9998C19.5556 46.1044 18.6601 46.9998 17.5556 46.9998H2C0.895432 46.9998 0 46.1044 0 44.9998V30.4846C0 30.0573 0.136838 29.6413 0.390464 29.2974L1.84492 27.3255Z", fill: `url(#${id}-barrel)` }), _jsx("path", { d: "M3.4541 26.7627H16.1016C16.6571 26.7628 17.18 27.0265 17.5098 27.4736L18.9639 29.4463C19.1856 29.747 19.3056 30.1107 19.3057 30.4844V45C19.3056 45.9664 18.522 46.7499 17.5557 46.75H2C1.03357 46.75 0.250102 45.9664 0.25 45V30.4844C0.250045 30.1107 0.370031 29.7471 0.591797 29.4463L2.0459 27.4736C2.37572 27.0265 2.89852 26.7628 3.4541 26.7627Z", stroke: "black", strokeOpacity: 0.3, strokeWidth: 0.5 }), _jsx("path", { opacity: 0.2, d: "M0.5 29.827L2.09916 27.8035C2.66811 27.0835 3.53527 26.6636 4.45289 26.6636H15.5314C16.1432 26.6636 16.7213 26.9435 17.1006 27.4235L19 29.827C19 29.827 18.3604 30.6988 10 30.7309C2.7733 30.9407 0.5 29.827 0.5 29.827Z", fill: "white" }), _jsx("rect", { x: 9, width: 2, height: 4.51922, rx: 1, fill: color.value }), _jsx("path", { d: "M8.46794 3.90451L6.3377 11.8468C6.16733 12.482 6.64593 13.1059 7.30356 13.1059H12.6964C13.3541 13.1059 13.8327 12.482 13.6623 11.8468L11.5321 3.90452C11.4148 3.46745 11.0187 3.16357 10.5662 3.16357H9.4338C8.98128 3.16357 8.58516 3.46745 8.46794 3.90451Z", fill: "#DFDBD8" }), _jsx("path", { d: "M9.43359 3.41357H10.5664C10.9057 3.41367 11.2031 3.6415 11.291 3.96924L13.4209 11.9116C13.5486 12.388 13.1895 12.856 12.6963 12.856H7.30371C6.81051 12.856 6.45139 12.388 6.5791 11.9116L8.70898 3.96924C8.79689 3.6415 9.09429 3.41367 9.43359 3.41357Z", stroke: "black", strokeOpacity: 0.2, strokeWidth: 0.5 }), _jsx("path", { d: "M4.21018 13.6159L2.91363 25.8034C2.81727 26.7092 3.34313 27.5769 4.22007 27.8232C8.64659 29.0666 13.0414 28.5136 15.6629 27.8088C16.5323 27.5751 17.0451 26.7212 16.9499 25.826L15.6642 13.7403C15.6121 13.251 15.3815 12.7981 15.0165 12.4681L14.6267 12.1159C14.2591 11.7836 13.7812 11.5996 13.2856 11.5996H6.40068C5.82792 11.5996 5.28266 11.8452 4.90305 12.274L4.70133 12.502C4.42582 12.8132 4.25415 13.2026 4.21018 13.6159Z", fill: `url(#${id}-barrel-upper)` }), _jsx("path", { d: "M6.40039 11.8496H13.2861C13.7196 11.8497 14.1374 12.0111 14.459 12.3018L14.8486 12.6533C15.168 12.942 15.3705 13.3385 15.416 13.7666L16.7012 25.8525C16.785 26.6413 16.3334 27.3696 15.5977 27.5674C13.0048 28.2644 8.6582 28.8104 4.28809 27.583C3.54101 27.3732 3.07734 26.6278 3.16211 25.8301L4.45898 13.6426C4.49746 13.2809 4.64766 12.9403 4.88867 12.668L5.08984 12.4395C5.42194 12.0643 5.89934 11.8497 6.40039 11.8496Z", stroke: "black", strokeOpacity: 0.3, strokeWidth: 0.5 }), _jsx("path", { d: "M0.5 29.8266C0.5 29.8266 0.611036 29.4017 0.812755 29.4479C2.04229 29.73 6.64097 30.7305 10 30.7305C13.3766 30.7305 17.633 29.7195 18.7316 29.4436C18.9052 29.4 19 29.8266 19 29.8266V32.0863C19 32.0863 14.5 33.442 10 33.442C5.5 33.442 0.5 32.0863 0.5 32.0863V29.8266Z", fill: color.value }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: `${id}-barrel`, x1: "1.24823", y1: "37.8542", x2: "16.9974", y2: "38.058", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#2E2E2E" }), _jsx("stop", { offset: "0.248334", stopColor: "#575757" }), _jsx("stop", { offset: "0.660438", stopColor: "#242424" }), _jsx("stop", { offset: "1", stopColor: "#2E2E2E" })] }), _jsxs("linearGradient", { id: `${id}-barrel-upper`, x1: "3.66667", y1: "20.9895", x2: "16.1878", y2: "21.6653", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#2E2E2E" }), _jsx("stop", { offset: "0.248334", stopColor: "#575757" }), _jsx("stop", { offset: "0.660438", stopColor: "#242424" }), _jsx("stop", { offset: "1", stopColor: "#2E2E2E" })] })] })] }));
+}
+function EraserIllustration() {
+    const id = useId();
+    return (_jsxs("svg", { className: "sketch-options__illustration sketch-options__illustration--eraser", viewBox: "0 0 22 47", width: 22, height: 47, fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M0.302734 4.7855V32.0302C0.302734 33.7251 1.40783 35.2219 3.0276 35.721L16.5844 39.898C19.0565 40.6597 21.5639 38.8232 21.5836 36.2366L21.8269 4.22443C21.8393 2.59599 20.8289 1.13477 19.3009 0.571436L19.1428 0.513114C18.2253 0.174845 17.2467 0.0339522 16.271 0.0996387L3.90538 0.932154C1.8777 1.06867 0.302734 2.75323 0.302734 4.7855Z", fill: "#DFDBD8" }), _jsx("mask", { id: `${id}-shade-mask`, style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 22, height: 27, children: _jsx("path", { d: "M0.302734 4.7855V18.1255C0.302734 19.8204 1.40783 21.3173 3.0276 21.8164L16.6054 25.9999C19.0712 26.7596 21.5743 24.9341 21.6044 22.3541L21.8158 4.23606C21.8348 2.60193 20.8233 1.1327 19.2899 0.567375L19.1428 0.513114C18.2253 0.174845 17.2467 0.0339521 16.271 0.0996387L3.90538 0.932154C1.8777 1.06867 0.302734 2.75323 0.302734 4.7855Z", fill: "#131211" }) }), _jsxs("g", { mask: `url(#${id}-shade-mask)`, children: [_jsxs("g", { opacity: 0.7, filter: `url(#${id}-blur)`, children: [_jsx("path", { d: "M4.40022 2.17282C2.33677 1.90432 3.237 0.727298 3.94504 0.335731L14.1105 -2.01367C14.6668 -2.01367 16.4471 -1.71161 19.1174 -0.503342C21.7878 0.704922 22.253 1.11886 22.1519 1.1748L16.6898 1.51043C13.4531 1.73418 6.46367 2.44133 4.40022 2.17282Z", fill: "white" }), _jsx("path", { d: "M5.5 10.4287V21.2917C9.01287 22.5379 17.0143 25.0204 20.8216 22.1607C22.8245 20.6563 21.6392 14.6978 21.8484 12.754C22.4553 7.11543 21.6967 2.68513 18.2071 2.68513C17.4484 2.74107 15 3.04186 10.5 3.47638C6.03379 3.90764 5.39885 7.96741 5.5 10.4287Z", fill: "white" }), _jsx("path", { d: "M4.40022 5.87361V21.7262C3.42918 23.6057 1.51777 20.7842 0.759154 19.5536C0.809729 17.4839 0.758789 6.10855 0.758789 5.03454C0.758789 3.69202 1.51741 1.84606 2.88293 2.3495C3.97534 2.75226 4.34963 4.86672 4.40022 5.87361Z", fill: "white" })] }), _jsx("path", { d: "M16.2881 0.348633C17.2286 0.285354 18.1722 0.421976 19.0566 0.748047L19.2148 0.805664C20.6438 1.33259 21.5887 2.69971 21.5771 4.22266L21.334 36.2344C21.3156 38.6536 18.9702 40.3714 16.6582 39.6592L3.10156 35.4824C1.58668 35.0157 0.552786 33.6154 0.552734 32.0303V4.78516L0.556641 4.6084C0.644771 2.78788 2.08482 1.30547 3.92188 1.18164L16.2881 0.348633Z", stroke: "black", strokeOpacity: 0.1, strokeWidth: 0.5 })] }), _jsx("path", { d: "M4.55172 21.3245L0.303448 18.9751H0V44.6507L4.09655 47.0001L22 44.1473V19.3107L4.55172 21.3245Z", fill: `url(#${id}-sleeve)` }), _jsx("path", { d: "M0.253906 19.1685L4.45801 21.4937L4.5127 21.5229L4.57422 21.5161L21.8066 19.5269V43.9819L4.13281 46.7983L0.193359 44.5386V19.1685H0.253906Z", stroke: "black", strokeOpacity: 0.3, strokeWidth: 0.386207 }), _jsxs("defs", { children: [_jsxs("filter", { id: `${id}-blur`, x: -0.786039, y: -3.5585, width: 24.4949, height: 28.5867, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), _jsx("feGaussianBlur", { stdDeviation: 0.772414, result: "effect1_foregroundBlur" })] }), _jsxs("linearGradient", { id: `${id}-sleeve`, x1: "1.01446e-07", y1: "26.0713", x2: "8.5", y2: "26.0713", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#5D5D5D" }), _jsx("stop", { offset: "0.48629", stopColor: "#5D5D5D" }), _jsx("stop", { offset: "0.568482", stopColor: "#2B2B2B" })] })] })] }));
+}
+/** Rectangle tool icon: outlined in the selected pen color with a 10% tint, matching what it draws. */
+function RectangleIcon({ color }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", "aria-hidden": "true", children: _jsx("rect", { x: 1, y: 1, width: 22, height: 22, rx: 4, fill: color.value, fillOpacity: SKETCH_RECTANGLE_FILL_OPACITY, stroke: color.value, strokeWidth: 2 }) }));
+}
+function IllustratedToolButton({ tool, activeTool, label, hidden, children, }) {
+    const active = tool === activeTool;
+    return (_jsx(Tooltip, { content: label, stableTrigger: true, children: _jsx("button", { type: "button", className: "sketch-options__illustrated", "aria-label": label, "aria-pressed": active, "data-active": active ? "true" : "false", "data-test": `sketch-tool-${tool}`, tabIndex: hidden ? -1 : undefined, onClick: () => setSketchDrawingTool(tool), children: children }) }));
+}
+/** Distance from the picker's center to each swatch center, and the swatch diameter, in px. */
+const PALETTE_RADIUS = 26;
+const PALETTE_SWATCH_SIZE = 32;
+/** Paint order of the overlapping swatches, bottom to top; the selected swatch always wins. */
+/** Delay between neighboring swatches as they fan out or collapse, in ms. */
+const PALETTE_STAGGER_MS = 18;
+const PALETTE_STACK_ORDER = ["yellow", "orange", "red", "black", "green", "blue"];
+/** Offset of swatch `index` of `count` from the picker's center; the first sits at the top right. */
+function paletteSwatchOffset(index, count) {
+    const radians = ((-90 + (index + 0.5) * (360 / count)) * Math.PI) / 180;
+    return {
+        "--swatch-x": `${(PALETTE_RADIUS * Math.cos(radians)).toFixed(2)}px`,
+        "--swatch-y": `${(PALETTE_RADIUS * Math.sin(radians)).toFixed(2)}px`,
+    };
+}
+/** Matches the longest swatch collapse in SketchToolOptions.css (duration plus stagger). */
+const PALETTE_CLOSE_MS = 180 + (SKETCH_PEN_COLORS.length - 1) * PALETTE_STAGGER_MS;
+function ColorPicker({ color, hidden }) {
+    const [phase, setPhase] = useState("closed");
+    const rootRef = useRef(null);
+    const closeTimer = useRef(undefined);
+    const open = phase === "open";
+    // Collapse the swatches back into the trigger before unmounting them.
+    function closePalette() {
+        clearTimeout(closeTimer.current);
+        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            setPhase("closed");
+            return;
+        }
+        setPhase("closing");
+        closeTimer.current = setTimeout(() => setPhase("closed"), PALETTE_CLOSE_MS);
+    }
+    useEffect(() => {
+        if (!hidden)
+            return;
+        clearTimeout(closeTimer.current);
+        setPhase("closed");
+    }, [hidden]);
+    useEffect(() => () => clearTimeout(closeTimer.current), []);
+    useDismissablePopover(open, rootRef, closePalette);
+    return (_jsxs("div", { className: "sketch-options__color", ref: rootRef, children: [_jsx(Tooltip, { content: "Color", disabled: phase !== "closed", stableTrigger: true, children: _jsx("button", { type: "button", className: "sketch-options__color-trigger", "aria-label": `Color: ${color.name}`, "aria-expanded": open, "data-open": open ? "true" : "false", "data-test": "sketch-tool-color", tabIndex: hidden ? -1 : undefined, onClick: () => {
+                        if (open) {
+                            closePalette();
+                            return;
+                        }
+                        clearTimeout(closeTimer.current);
+                        setPhase("open");
+                    }, children: _jsx("span", { className: "sketch-options__swatch", style: { background: color.value } }) }) }), phase !== "closed" ? (_jsx("div", { className: "sketch-options__palette", role: "group", "aria-label": "Pen color", "data-state": phase, "data-test": "sketch-color-palette", style: { "--swatch-size": `${PALETTE_SWATCH_SIZE}px` }, children: SKETCH_PEN_COLORS.map((option, index) => (_jsx("button", { type: "button", className: "sketch-options__palette-option", "aria-label": option.name, "aria-pressed": option === color, "data-active": option === color ? "true" : "false", "data-test": `sketch-color-${option.id}`, style: {
+                        ...paletteSwatchOffset(index, SKETCH_PEN_COLORS.length),
+                        "--swatch-delay": `${index * PALETTE_STAGGER_MS}ms`,
+                        "--swatch-delay-out": `${(SKETCH_PEN_COLORS.length - 1 - index) * PALETTE_STAGGER_MS}ms`,
+                        background: option.value,
+                        zIndex: option === color ? SKETCH_PEN_COLORS.length : Math.max(PALETTE_STACK_ORDER.indexOf(option.id), 0),
+                    }, onClick: () => {
+                        setSketchStrokeColor(option);
+                        closePalette();
+                    } }, option.id))) })) : null] }));
+}
+/** Pen, eraser, color and rectangle controls that slide out beside the sketch tool. */
+export function SketchToolOptions({ open }) {
+    const drawing = useSketchDrawingTools();
+    return (_jsx(ToolOptionsDrawer, { name: "sketch", open: open, label: "Sketch tools", children: ({ hidden, settled }) => (_jsxs(_Fragment, { children: [_jsx(IllustratedToolButton, { tool: "pen", activeTool: drawing.tool, label: "Pen", hidden: hidden, children: _jsx(PenIllustration, { color: drawing.color }) }), _jsx(IllustratedToolButton, { tool: "eraser", activeTool: drawing.tool, label: "Eraser", hidden: hidden, children: _jsx(EraserIllustration, {}) }), _jsx(Tooltip, { content: "Rectangle", stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", size: "large", className: "canvas-toolbar__tool sketch-options__rectangle", label: "Rectangle", "aria-pressed": drawing.tool === "rectangle", "data-active": drawing.tool === "rectangle" ? "true" : "false", "data-test": "sketch-tool-rectangle", tabIndex: hidden ? -1 : undefined, onClick: () => setSketchDrawingTool("rectangle"), children: _jsx(RectangleIcon, { color: drawing.color }) }) }), _jsx(ColorPicker, { color: drawing.color, hidden: hidden || !settled })] })) }));
+}

package/dist/inspector/canvas/StaleChangeIndicator.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import type { ChangeRecord } from "../changes/changesLog.js";
+import { type ChangeRecord } from "../changes/types.js";
 interface Props {
     change: ChangeRecord;
 }

package/dist/inspector/canvas/StaleChangeIndicator.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSyncExternalStore } from "react";
-import { isPreviewableChange, isTokenChange } from "../changes/changesLog.js";
+import { isPreviewableChange, isTokenChange } from "../changes/types.js";
 import { changeKey } from "../changes/model.js";
 import { getAnyPreviewDiagnostic, getPreviewDiagnosticRevision, subscribePreviewDiagnostics, } from "../changes/previewDiagnostics.js";
 import { isVerificationPending } from "./staleChangeDetector.js";

package/dist/inspector/canvas/ToolOptionsDrawer.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement, ReactNode } from "react";
+export interface ToolOptionsDrawerProps {
+    /** Stable name that identifies the drawer across toolbar remounts. */
+    readonly name: string;
+    readonly open: boolean;
+    readonly label: string;
+    /**
+     * Renders the drawer content. `hidden` removes controls from the tab order;
+     * `settled` is true once the slide finishes and content may overflow the bar.
+     */
+    readonly children: (state: {
+        readonly hidden: boolean;
+        readonly settled: boolean;
+    }) => ReactNode;
+}
+/** Slides tool-specific options out of the canvas toolbar beside their tool. */
+export declare function ToolOptionsDrawer({ name, open, label, children }: ToolOptionsDrawerProps): ReactElement;
+/** Closes a toolbar popover on an outside pointer press or Escape. */
+export declare function useDismissablePopover(open: boolean, rootRef: {
+    readonly current: HTMLElement | null;
+}, close: () => void): void;

package/dist/inspector/canvas/ToolOptionsDrawer.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+/** Matches the `width` transition in CanvasToolbar.css. */
+const SLIDE_DURATION_MS = 220;
+// The toolbar is remounted when sketching moves it into a root-level portal.
+// Remember each drawer's last state and width so the new instance can animate
+// from them; it can mount before its content has been laid out.
+const lastOpen = new Map();
+const lastWidth = new Map();
+/** Slides tool-specific options out of the canvas toolbar beside their tool. */
+export function ToolOptionsDrawer({ name, open, label, children }) {
+    const [expanded, setExpanded] = useState(() => lastOpen.get(name) ?? false);
+    const [settled, setSettled] = useState(() => (lastOpen.get(name) ?? false) && open);
+    const [contentWidth, setContentWidth] = useState(() => lastWidth.get(name) ?? 0);
+    const drawerRef = useRef(null);
+    const innerRef = useRef(null);
+    useLayoutEffect(() => {
+        const inner = innerRef.current;
+        if (!inner)
+            return;
+        const measure = () => {
+            if (inner.offsetWidth === 0)
+                return;
+            lastWidth.set(name, inner.offsetWidth);
+            setContentWidth(inner.offsetWidth);
+        };
+        measure();
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+        observer?.observe(inner);
+        return () => observer?.disconnect();
+    }, [name]);
+    useEffect(() => {
+        lastOpen.set(name, open);
+        if (!open)
+            setSettled(false);
+        let timer;
+        const frame = requestAnimationFrame(() => {
+            // Tool clicks and shortcuts are discrete events, so React can run this
+            // effect before a freshly mounted toolbar is ever styled. Flush its
+            // previous state first so the width change transitions instead of jumping.
+            void drawerRef.current?.offsetWidth;
+            setExpanded(open);
+            if (open)
+                timer = setTimeout(() => setSettled(true), SLIDE_DURATION_MS);
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            clearTimeout(timer);
+        };
+    }, [name, open]);
+    return (_jsx("div", { ref: drawerRef, className: "tool-options", role: "group", "aria-label": label, "aria-hidden": !open, "data-expanded": expanded ? "true" : "false", "data-settled": settled ? "true" : "false", "data-test": `${name}-tool-options`, style: { width: expanded ? contentWidth : 0 }, children: _jsx("div", { className: "tool-options__inner", ref: innerRef, children: children({ hidden: !open, settled }) }) }));
+}
+/** Closes a toolbar popover on an outside pointer press or Escape. */
+export function useDismissablePopover(open, rootRef, close) {
+    const closeRef = useRef(close);
+    closeRef.current = close;
+    useEffect(() => {
+        if (!open)
+            return;
+        function onPointerDown(event) {
+            if (rootRef.current && !event.composedPath().includes(rootRef.current))
+                closeRef.current();
+        }
+        function onKeyDown(event) {
+            if (event.key !== "Escape")
+                return;
+            event.stopPropagation();
+            closeRef.current();
+        }
+        window.addEventListener("pointerdown", onPointerDown, true);
+        window.addEventListener("keydown", onKeyDown, true);
+        return () => {
+            window.removeEventListener("pointerdown", onPointerDown, true);
+            window.removeEventListener("keydown", onKeyDown, true);
+        };
+    }, [open, rootRef]);
+}

package/dist/inspector/canvas/activeCanvasDocument.d.ts

@@ -1,5 +1,6 @@
+import type { CanvasFrame } from "./canvasFrame.js";
 /** Resolves only the selected or focused frame. */
-export declare function resolveActiveCanvasFrame(frames: ReadonlyMap<string, HTMLIFrameElement>, selectedCardId: string | null, focusedCardId: string | null): HTMLIFrameElement | null;
+export declare function resolveActiveCanvasFrame(frames: ReadonlyMap<string, CanvasFrame>, selectedCardId: string | null, focusedCardId: string | null): CanvasFrame | null;
 export declare function getActiveCanvasDocument(): Document | null;
 /** Returns the iframe that owns the active renderer document. */
-export declare function getActiveCanvasFrame(): HTMLIFrameElement | null;
+export declare function getActiveCanvasFrame(): CanvasFrame | null;

package/dist/inspector/canvas/assets/eraser.svg

@@ -0,0 +1,28 @@
+<svg width="22" height="47" viewBox="0 0 22 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.302734 4.7855V32.0302C0.302734 33.7251 1.40783 35.2219 3.0276 35.721L16.5844 39.898C19.0565 40.6597 21.5639 38.8232 21.5836 36.2366L21.8269 4.22443C21.8393 2.59599 20.8289 1.13477 19.3009 0.571436L19.1428 0.513114C18.2253 0.174845 17.2467 0.0339522 16.271 0.0996387L3.90538 0.932154C1.8777 1.06867 0.302734 2.75323 0.302734 4.7855Z" fill="#DFDBD8"/>
+<mask id="mask0_1881_2879" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="27">
+<path d="M0.302734 4.7855V18.1255C0.302734 19.8204 1.40783 21.3173 3.0276 21.8164L16.6054 25.9999C19.0712 26.7596 21.5743 24.9341 21.6044 22.3541L21.8158 4.23606C21.8348 2.60193 20.8233 1.1327 19.2899 0.567375L19.1428 0.513114C18.2253 0.174845 17.2467 0.0339521 16.271 0.0996387L3.90538 0.932154C1.8777 1.06867 0.302734 2.75323 0.302734 4.7855Z" fill="#131211"/>
+</mask>
+<g mask="url(#mask0_1881_2879)">
+<g opacity="0.7" filter="url(#filter0_f_1881_2879)">
+<path d="M4.40022 2.17282C2.33677 1.90432 3.237 0.727298 3.94504 0.335731L14.1105 -2.01367C14.6668 -2.01367 16.4471 -1.71161 19.1174 -0.503342C21.7878 0.704922 22.253 1.11886 22.1519 1.1748L16.6898 1.51043C13.4531 1.73418 6.46367 2.44133 4.40022 2.17282Z" fill="white"/>
+<path d="M5.5 10.4287V21.2917C9.01287 22.5379 17.0143 25.0204 20.8216 22.1607C22.8245 20.6563 21.6392 14.6978 21.8484 12.754C22.4553 7.11543 21.6967 2.68513 18.2071 2.68513C17.4484 2.74107 15 3.04186 10.5 3.47638C6.03379 3.90764 5.39885 7.96741 5.5 10.4287Z" fill="white"/>
+<path d="M4.40022 5.87361V21.7262C3.42918 23.6057 1.51777 20.7842 0.759154 19.5536C0.809729 17.4839 0.758789 6.10855 0.758789 5.03454C0.758789 3.69202 1.51741 1.84606 2.88293 2.3495C3.97534 2.75226 4.34963 4.86672 4.40022 5.87361Z" fill="white"/>
+</g>
+<path d="M16.2881 0.348633C17.2286 0.285354 18.1722 0.421976 19.0566 0.748047L19.2148 0.805664C20.6438 1.33259 21.5887 2.69971 21.5771 4.22266L21.334 36.2344C21.3156 38.6536 18.9702 40.3714 16.6582 39.6592L3.10156 35.4824C1.58668 35.0157 0.552786 33.6154 0.552734 32.0303V4.78516L0.556641 4.6084C0.644771 2.78788 2.08482 1.30547 3.92188 1.18164L16.2881 0.348633Z" stroke="black" stroke-opacity="0.1" stroke-width="0.5"/>
+</g>
+<path d="M4.55172 21.3245L0.303448 18.9751H0V44.6507L4.09655 47.0001L22 44.1473V19.3107L4.55172 21.3245Z" fill="url(#paint0_linear_1881_2879)"/>
+<path d="M0.253906 19.1685L4.45801 21.4937L4.5127 21.5229L4.57422 21.5161L21.8066 19.5269V43.9819L4.13281 46.7983L0.193359 44.5386V19.1685H0.253906Z" stroke="black" stroke-opacity="0.3" stroke-width="0.386207"/>
+<defs>
+<filter id="filter0_f_1881_2879" x="-0.786039" y="-3.5585" width="24.4949" height="28.5867" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.772414" result="effect1_foregroundBlur_1881_2879"/>
+</filter>
+<linearGradient id="paint0_linear_1881_2879" x1="1.01446e-07" y1="26.0713" x2="8.5" y2="26.0713" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5D5D5D"/>
+<stop offset="0.48629" stop-color="#5D5D5D"/>
+<stop offset="0.568482" stop-color="#2B2B2B"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/inspector/canvas/assets/pen.svg

@@ -0,0 +1,25 @@
+<svg width="20" height="38" viewBox="0 0 20 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.84492 27.3255C2.22193 26.8144 2.81931 26.5127 3.45445 26.5127H16.1011C16.7362 26.5127 17.3336 26.8144 17.7106 27.3255L19.1651 29.2974C19.4187 29.6413 19.5556 30.0573 19.5556 30.4846V44.9998C19.5556 46.1044 18.6601 46.9998 17.5556 46.9998H2C0.895432 46.9998 0 46.1044 0 44.9998V30.4846C0 30.0573 0.136838 29.6413 0.390464 29.2974L1.84492 27.3255Z" fill="url(#paint0_linear_1880_2833)"/>
+<path d="M3.4541 26.7627H16.1016C16.6571 26.7628 17.18 27.0265 17.5098 27.4736L18.9639 29.4463C19.1856 29.747 19.3056 30.1107 19.3057 30.4844V45C19.3056 45.9664 18.522 46.7499 17.5557 46.75H2C1.03357 46.75 0.250102 45.9664 0.25 45V30.4844C0.250045 30.1107 0.370031 29.7471 0.591797 29.4463L2.0459 27.4736C2.37572 27.0265 2.89852 26.7628 3.4541 26.7627Z" stroke="black" stroke-opacity="0.3" stroke-width="0.5"/>
+<path opacity="0.2" d="M0.5 29.827L2.09916 27.8035C2.66811 27.0835 3.53527 26.6636 4.45289 26.6636H15.5314C16.1432 26.6636 16.7213 26.9435 17.1006 27.4235L19 29.827C19 29.827 18.3604 30.6988 10 30.7309C2.7733 30.9407 0.5 29.827 0.5 29.827Z" fill="white"/>
+<rect x="9" width="2" height="4.51922" rx="1" fill="#0096FF"/>
+<path d="M8.46794 3.90451L6.3377 11.8468C6.16733 12.482 6.64593 13.1059 7.30356 13.1059H12.6964C13.3541 13.1059 13.8327 12.482 13.6623 11.8468L11.5321 3.90452C11.4148 3.46745 11.0187 3.16357 10.5662 3.16357H9.4338C8.98128 3.16357 8.58516 3.46745 8.46794 3.90451Z" fill="#DFDBD8"/>
+<path d="M9.43359 3.41357H10.5664C10.9057 3.41367 11.2031 3.6415 11.291 3.96924L13.4209 11.9116C13.5486 12.388 13.1895 12.856 12.6963 12.856H7.30371C6.81051 12.856 6.45139 12.388 6.5791 11.9116L8.70898 3.96924C8.79689 3.6415 9.09429 3.41367 9.43359 3.41357Z" stroke="black" stroke-opacity="0.2" stroke-width="0.5"/>
+<path d="M4.21018 13.6159L2.91363 25.8034C2.81727 26.7092 3.34313 27.5769 4.22007 27.8232C8.64659 29.0666 13.0414 28.5136 15.6629 27.8088C16.5323 27.5751 17.0451 26.7212 16.9499 25.826L15.6642 13.7403C15.6121 13.251 15.3815 12.7981 15.0165 12.4681L14.6267 12.1159C14.2591 11.7836 13.7812 11.5996 13.2856 11.5996H6.40068C5.82792 11.5996 5.28266 11.8452 4.90305 12.274L4.70133 12.502C4.42582 12.8132 4.25415 13.2026 4.21018 13.6159Z" fill="url(#paint1_linear_1880_2833)"/>
+<path d="M6.40039 11.8496H13.2861C13.7196 11.8497 14.1374 12.0111 14.459 12.3018L14.8486 12.6533C15.168 12.942 15.3705 13.3385 15.416 13.7666L16.7012 25.8525C16.785 26.6413 16.3334 27.3696 15.5977 27.5674C13.0048 28.2644 8.6582 28.8104 4.28809 27.583C3.54101 27.3732 3.07734 26.6278 3.16211 25.8301L4.45898 13.6426C4.49746 13.2809 4.64766 12.9403 4.88867 12.668L5.08984 12.4395C5.42194 12.0643 5.89934 11.8497 6.40039 11.8496Z" stroke="black" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M0.5 29.8266C0.5 29.8266 0.611036 29.4017 0.812755 29.4479C2.04229 29.73 6.64097 30.7305 10 30.7305C13.3766 30.7305 17.633 29.7195 18.7316 29.4436C18.9052 29.4 19 29.8266 19 29.8266V32.0863C19 32.0863 14.5 33.442 10 33.442C5.5 33.442 0.5 32.0863 0.5 32.0863V29.8266Z" fill="#0096FF"/>
+<defs>
+<linearGradient id="paint0_linear_1880_2833" x1="1.24823" y1="37.8542" x2="16.9974" y2="38.058" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2E2E2E"/>
+<stop offset="0.248334" stop-color="#575757"/>
+<stop offset="0.660438" stop-color="#242424"/>
+<stop offset="1" stop-color="#2E2E2E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1880_2833" x1="3.66667" y1="20.9895" x2="16.1878" y2="21.6653" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2E2E2E"/>
+<stop offset="0.248334" stop-color="#575757"/>
+<stop offset="0.660438" stop-color="#242424"/>
+<stop offset="1" stop-color="#2E2E2E"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/inspector/canvas/canvasFrame.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The renderer behind a Canvas card, as controller code sees it. Cards on the
+ * Canvas pass their iframe; the page surface passes the inspected window.
+ */
+export interface CanvasFrame {
+    readonly contentWindow: Window | null;
+    readonly contentDocument: Document | null;
+    readonly isConnected: boolean;
+    readonly clientWidth: number;
+    readonly clientHeight: number;
+    getBoundingClientRect(): DOMRect;
+}
+/** The card's iframe element, or null for the page surface. */
+export declare function canvasFrameElement(frame: CanvasFrame): HTMLIFrameElement | null;
+/** The element sketch capture measures: the iframe, or the page's root element. */
+export declare function canvasFrameHost(frame: CanvasFrame | null): HTMLElement | null;

package/dist/inspector/canvas/canvasFrame.js

@@ -0,0 +1,10 @@
+/** The card's iframe element, or null for the page surface. */
+export function canvasFrameElement(frame) {
+    return typeof HTMLIFrameElement !== "undefined" && frame instanceof HTMLIFrameElement ? frame : null;
+}
+/** The element sketch capture measures: the iframe, or the page's root element. */
+export function canvasFrameHost(frame) {
+    if (!frame)
+        return null;
+    return canvasFrameElement(frame) ?? frame.contentDocument?.documentElement ?? null;
+}

package/dist/inspector/canvas/canvasGestures.d.ts

@@ -9,4 +9,3 @@ export interface ClientRect {
     top: number;
 }
 export declare function zoomCameraAtPointer(camera: CanvasCamera, pointer: ClientPoint, boardRect: ClientRect, deltaY: number): CanvasCamera;
-export declare function iframePointToClientPoint(iframeRect: ClientRect, point: ClientPoint, cameraZoom: number): ClientPoint;

package/dist/inspector/canvas/canvasGestures.js

@@ -13,9 +13,3 @@ export function zoomCameraAtPointer(camera, pointer, boardRect, deltaY) {
         zoom,
     };
 }
-export function iframePointToClientPoint(iframeRect, point, cameraZoom) {
-    return {
-        x: iframeRect.left + point.x * cameraZoom,
-        y: iframeRect.top + point.y * cameraZoom,
-    };
-}

package/dist/inspector/canvas/canvasStore.d.ts

@@ -89,6 +89,12 @@ export declare function getSelectedCardId(): string | null;
 export declare function useSelectedCardId(): string | null;
 export declare function useFocusedCardId(): string | null;
 export declare function setCardPosition(id: string, x: number, y: number): void;
+/**
+ * Starts a user move or resize. The returned commit records the whole gesture
+ * as one undo step; programmatic placement through `setCardPosition` and
+ * `resizeCard` stays out of history.
+ */
+export declare function beginCardGeometryChange(id: string): () => void;
 export declare function hydrateCanvasStore(newMode: CanvasMode, newCards: CanvasCard[], newCamera: CanvasCamera, restoredFocusedCardId?: string | null, restoredPresentation?: CanvasPresentation, restoredGroups?: readonly FrameGroup[]): void;
 export { subscribe, getCards, getCards as getCanvasCards, };
 export declare function useCanvasCards(): CanvasCard[];

package/dist/inspector/canvas/canvasStore.js

@@ -1,5 +1,6 @@
 import { iterationId, contentSourceUrl, contentEditTarget } from "./frameContent.js";
-import { recordCanvasChange, discardCanvasHistory, isDraftLocked, forgetDraft } from "../changes/draftChanges.js";
+import { isDraftLocked, forgetDraft } from "../drafts/store.js";
+import { recordCanvasChange, discardCanvasHistory } from "../workspace/timeline.js";
 import { targetKey } from "../drafts/model.js";
 import { useSyncExternalStore } from "react";
 import { DEFAULT_CAMERA, getBoardCamera, placeBoardCamera, restoreCanvasView, setCanvasMode, } from "./viewStore.js";
@@ -424,6 +425,40 @@ export function setCardPosition(id, x, y) {
     cards = cards.map((c) => (c.id === id ? { ...c, x, y } : c));
     notify();
 }
+function cardGeometry(id) {
+    const card = cards.find((candidate) => candidate.id === id);
+    return card ? { x: card.x, y: card.y, width: card.width, height: card.height } : null;
+}
+/**
+ * Starts a user move or resize. The returned commit records the whole gesture
+ * as one undo step; programmatic placement through `setCardPosition` and
+ * `resizeCard` stays out of history.
+ */
+export function beginCardGeometryChange(id) {
+    const before = cardGeometry(id);
+    let committed = false;
+    return () => {
+        if (committed || !before)
+            return;
+        committed = true;
+        const after = cardGeometry(id);
+        if (!after || (after.x === before.x && after.y === before.y && after.width === before.width && after.height === before.height))
+            return;
+        const restore = (geometry) => {
+            if (!cards.some((card) => card.id === id))
+                return;
+            cards = cards.map((card) => card.id === id ? { ...card, ...geometry } : card);
+            selectCard(id);
+            activateHistoryCard(id);
+        };
+        recordCanvasChange({
+            cardIds: [id],
+            undo: () => restore(before),
+            redo: () => restore(after),
+            dispose: () => undefined,
+        });
+    };
+}
 export function hydrateCanvasStore(newMode, newCards, newCamera, restoredFocusedCardId = null, restoredPresentation = "focus", restoredGroups = []) {
     frameGroups.clear();
     for (const group of restoredGroups)

package/dist/inspector/canvas/frameConnection.d.ts

@@ -0,0 +1,48 @@
+import type { CanvasFrame } from "./canvasFrame.js";
+import type { Rect } from "../overlay/overlayGeometry.js";
+import { type ControllerToRendererMessage, type FrameIdentity } from "./frameProtocol.js";
+export declare const PROJECT_ID: string;
+export declare const WORKSPACE_ID: string;
+export interface FramePoint {
+    readonly x: number;
+    readonly y: number;
+}
+/**
+ * Where a frame sits in the controller viewport, measured at one instant.
+ * `scale` is measured rather than read from the camera, so it is the board
+ * zoom on the Canvas, 1 in focus view, and correct mid-transition.
+ */
+export interface FrameViewport extends Readonly<Rect> {
+    readonly scale: number;
+}
+/** A renderer-owned element named by a frame message. */
+export interface RendererElementRef {
+    readonly elementId: string;
+    readonly cid: string;
+    readonly src: string;
+}
+type Envelope = "protocolVersion" | "projectId" | "workspaceId" | "cardId";
+type WithoutEnvelope<T> = T extends unknown ? Omit<T, Envelope> : never;
+export type ControllerMessageBody = WithoutEnvelope<ControllerToRendererMessage>;
+/** One mounted Canvas frame as the controller sees it. */
+export interface FrameConnection {
+    readonly cardId: string;
+    readonly iframe: CanvasFrame;
+    readonly identity: FrameIdentity;
+    /** The renderer's document; null while the frame navigates or blocks access. */
+    document(): Document | null;
+    /** Null unless exactly one element carries the renderer ID and its source identity still matches. */
+    element(ref: RendererElementRef): HTMLElement | null;
+    viewport(): FrameViewport;
+    post(message: ControllerMessageBody): void;
+}
+export declare function measureFrameViewport(iframe: CanvasFrame): FrameViewport;
+export declare function toViewportPoint(viewport: FrameViewport, point: FramePoint): FramePoint;
+/** Pass `false` for an axis whose size is a guide thickness in controller pixels. */
+export declare function toViewportRect(viewport: FrameViewport, rect: Rect, scaleSize?: {
+    readonly width: boolean;
+    readonly height: boolean;
+}): Rect;
+export declare function findRendererElement(doc: Document | null, ref: RendererElementRef): HTMLElement | null;
+export declare function connectFrame(cardId: string, iframe: CanvasFrame): FrameConnection;
+export {};

package/dist/inspector/canvas/frameConnection.js

@@ -0,0 +1,73 @@
+import { PROTOCOL_VERSION, } from "./frameProtocol.js";
+import { RENDERER_ELEMENT_ID_ATTR } from "./rendererCidIndex.js";
+export const PROJECT_ID = typeof window !== "undefined" && window.location?.origin
+    ? window.location.origin
+    : "";
+export const WORKSPACE_ID = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+    ? crypto.randomUUID()
+    : `ws-${Date.now()}`;
+const RENDERER_ELEMENT_ID = /^r\d+$/;
+const connections = new WeakMap();
+export function measureFrameViewport(iframe) {
+    const rect = iframe.getBoundingClientRect();
+    return {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+        scale: iframe.clientWidth > 0 ? rect.width / iframe.clientWidth : 1,
+    };
+}
+export function toViewportPoint(viewport, point) {
+    return {
+        x: viewport.left + point.x * viewport.scale,
+        y: viewport.top + point.y * viewport.scale,
+    };
+}
+/** Pass `false` for an axis whose size is a guide thickness in controller pixels. */
+export function toViewportRect(viewport, rect, scaleSize = { width: true, height: true }) {
+    return {
+        left: viewport.left + rect.left * viewport.scale,
+        top: viewport.top + rect.top * viewport.scale,
+        width: scaleSize.width ? rect.width * viewport.scale : rect.width,
+        height: scaleSize.height ? rect.height * viewport.scale : rect.height,
+    };
+}
+export function findRendererElement(doc, ref) {
+    if (!doc || !RENDERER_ELEMENT_ID.test(ref.elementId))
+        return null;
+    const candidates = doc.querySelectorAll(`[${RENDERER_ELEMENT_ID_ATTR}="${ref.elementId}"]`);
+    const candidate = candidates.length === 1 ? candidates[0] : null;
+    if (!candidate
+        || candidate.getAttribute("data-cid") !== ref.cid
+        || (candidate.getAttribute("data-src") ?? "") !== ref.src)
+        return null;
+    const frameWindow = doc.defaultView;
+    return frameWindow && candidate instanceof frameWindow.HTMLElement ? candidate : null;
+}
+export function connectFrame(cardId, iframe) {
+    const existing = connections.get(iframe);
+    if (existing?.cardId === cardId)
+        return existing;
+    const identity = { projectId: PROJECT_ID, workspaceId: WORKSPACE_ID, cardId };
+    const connection = {
+        cardId,
+        iframe,
+        identity,
+        document() {
+            try {
+                return iframe.contentDocument;
+            }
+            catch {
+                return null;
+            }
+        },
+        element: (ref) => findRendererElement(connection.document(), ref),
+        viewport: () => measureFrameViewport(iframe),
+        post(message) {
+            iframe.contentWindow?.postMessage({ ...message, protocolVersion: PROTOCOL_VERSION, ...identity }, window.location.origin);
+        },
+    };
+    connections.set(iframe, connection);
+    return connection;
+}

package/dist/inspector/canvas/frameProtocol.d.ts

@@ -2,6 +2,7 @@ import type { ComponentOverride } from "../componentSemantics/types.js";
 import type { RenderedInstanceOverride } from "../changes/editModel.js";
 import type { NudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 import type { SpacingDescriptor } from "../overlay/spacingGestures.js";
+import type { RendererCursor } from "../ui/customCursors.js";
 export declare const PROTOCOL_VERSION = 21;
 export interface FrameMessage {
     type: string;
@@ -63,6 +64,8 @@ export interface ReplaceStylesMessage extends FrameMessage {
     textContentChanges: import("../changes/types.js").TextContentChangeRecord[];
     /** Controller-owned semantic component overrides for Canvas runtimes. */
     componentOverrides: ComponentOverride[];
+    /** Generated identities the edits refer to; omitted while edits are hidden. */
+    runtimeIdentities?: import("../runtime/runtimeIdentityClaims.js").RuntimeIdentityClaim[];
 }
 /** Renderer acknowledgement that one complete controller snapshot is applied. */
 export interface ProjectionAppliedMessage extends RendererMessage {
@@ -301,7 +304,21 @@ export interface AppInteractionModifierMessage extends RendererMessage {
     type: "app-interaction-modifier";
     held: boolean;
 }
-export type FrameProtocolMessage = ParentReadyMessage | RendererHelloMessage | FrameReadyMessage | FrameRuntimeMessage | FrameMetadataMessage | FrameLoadError | ReplaceStylesMessage | ProjectionAppliedMessage | StructuralProjectionReportMessage | RenderedInstanceProjectionReportMessage | TextProjectionReportMessage | NavigationIntentMessage | LinkTargetStateMessage | ElementHoverMessage | ElementMeasureStateMessage | ElementClickMessage | InlineTextIntentMessage | ElementDeselectMessage | ElementDragStartMessage | ElementDragMoveMessage | ElementDragEndMessage | ElementDeleteMessage | ElementNudgeMessage | HistoryRequestMessage | InspectorToggleRequestMessage | InspectorOpenRequestMessage | KeyboardShortcutMessage | PanStartMessage | PanMoveMessage | PanEndMessage | PanModifierMessage | MeasureModifierMessage | BoardGestureStateMessage | ZoomMessage | WheelPanMessage | AppInteractionModifierMessage;
+/** Tells a renderer whether the inspector is open and which cursor its gestures show. */
+export interface InspectorInteractionStateMessage extends RendererMessage {
+    type: "inspector-interaction-state";
+    open: boolean;
+    interactionsEnabled: boolean;
+    cursor: RendererCursor;
+    /** CSS cursor for the Comment tool; the controller renders it. */
+    commentCursor?: string;
+}
+/** Messages a renderer sends to the controller. */
+export type RendererToControllerMessage = RendererHelloMessage | FrameReadyMessage | FrameRuntimeMessage | FrameMetadataMessage | FrameLoadError | ProjectionAppliedMessage | StructuralProjectionReportMessage | RenderedInstanceProjectionReportMessage | TextProjectionReportMessage | NavigationIntentMessage | ElementHoverMessage | ElementMeasureStateMessage | ElementClickMessage | InlineTextIntentMessage | ElementDeselectMessage | ElementDragStartMessage | ElementDragMoveMessage | ElementDragEndMessage | ElementDeleteMessage | ElementNudgeMessage | HistoryRequestMessage | InspectorToggleRequestMessage | InspectorOpenRequestMessage | KeyboardShortcutMessage | PanStartMessage | PanMoveMessage | PanEndMessage | PanModifierMessage | ZoomMessage | WheelPanMessage | AppInteractionModifierMessage;
+/** Messages the controller sends to a renderer. */
+export type ControllerToRendererMessage = ParentReadyMessage | ReplaceStylesMessage | LinkTargetStateMessage | PanModifierMessage | MeasureModifierMessage | BoardGestureStateMessage | InspectorInteractionStateMessage;
+export declare function isRendererMessageType(type: unknown): type is RendererToControllerMessage["type"];
+export type FrameProtocolMessage = ParentReadyMessage | RendererHelloMessage | FrameReadyMessage | FrameRuntimeMessage | FrameMetadataMessage | FrameLoadError | ReplaceStylesMessage | ProjectionAppliedMessage | StructuralProjectionReportMessage | RenderedInstanceProjectionReportMessage | TextProjectionReportMessage | NavigationIntentMessage | LinkTargetStateMessage | ElementHoverMessage | ElementMeasureStateMessage | ElementClickMessage | InlineTextIntentMessage | ElementDeselectMessage | ElementDragStartMessage | ElementDragMoveMessage | ElementDragEndMessage | ElementDeleteMessage | ElementNudgeMessage | HistoryRequestMessage | InspectorToggleRequestMessage | InspectorOpenRequestMessage | KeyboardShortcutMessage | PanStartMessage | PanMoveMessage | PanEndMessage | PanModifierMessage | MeasureModifierMessage | BoardGestureStateMessage | ZoomMessage | WheelPanMessage | AppInteractionModifierMessage | InspectorInteractionStateMessage;
 export declare function setRendererIdentity(identity: FrameIdentity): void;
 export declare function clearRendererIdentity(expected?: FrameIdentity): void;
 export declare function getRendererIdentity(): FrameIdentity | null;

package/dist/inspector/canvas/frameProtocol.js

@@ -19,6 +19,42 @@ import { isStructuralProjectionReport } from "../projection/structuralProjection
 // added the renderer-hello handshake solicitation for runtimes whose boot
 // completes after the controller's load-time parent-ready.
 export const PROTOCOL_VERSION = 21;
+const RENDERER_MESSAGE_TYPES = {
+    "renderer-hello": true,
+    "frame-ready": true,
+    "frame-runtime": true,
+    "frame-metadata": true,
+    "frame-error": true,
+    "projection-applied": true,
+    "structural-projection-report": true,
+    "rendered-instance-projection-report": true,
+    "text-projection-report": true,
+    "navigation-intent": true,
+    "element-hover": true,
+    "element-measure-state": true,
+    "element-click": true,
+    "inline-text-intent": true,
+    "element-deselect": true,
+    "element-drag-start": true,
+    "element-drag-move": true,
+    "element-drag-end": true,
+    "element-delete": true,
+    "element-nudge": true,
+    "history-request": true,
+    "inspector-toggle-request": true,
+    "inspector-open-request": true,
+    "keyboard-shortcut": true,
+    "pan-start": true,
+    "pan-move": true,
+    "pan-end": true,
+    "pan-modifier": true,
+    "zoom": true,
+    "wheel-pan": true,
+    "app-interaction-modifier": true,
+};
+export function isRendererMessageType(type) {
+    return typeof type === "string" && Object.hasOwn(RENDERER_MESSAGE_TYPES, type);
+}
 let rendererIdentity = null;
 export function setRendererIdentity(identity) {
     rendererIdentity = identity;

package/dist/inspector/canvas/pageSurface.d.ts

@@ -0,0 +1,11 @@
+import type { CanvasFrame } from "./canvasFrame.js";
+/**
+ * Runs the renderer and controller in the inspected window. The single Canvas
+ * card is the page itself, so no iframe or framing permission is needed.
+ */
+export declare function enablePageSurface(): void;
+export declare function isPageSurface(): boolean;
+/** The page-surface card's frame: the inspected window, filling the viewport. */
+export declare function getPageFrame(win?: Window): CanvasFrame;
+/** True for events that start inside the inspector's own shadow root. */
+export declare function isInspectorUiEvent(event: Event): boolean;