nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/canvas/PageCard.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { connectFrame } from "./frameConnection.js";
+import { contentSourceUrl } from "./frameContent.js";
+import { getPageFrame } from "./pageSurface.js";
+import { registerCardFrame, registerCardFrameSource, sendProjectionToCard, unregisterCardFrame } from "./projection.js";
+import { subscribeCanvasRendererMessages } from "./rendererMessageRouter.js";
+import { disposeBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
+import { releaseDocumentProjection } from "../projection/structuralProjection.js";
+import { disposeRuntimeIdentityClaims } from "../runtime/runtimeIdentityClaims.js";
+import { disposeInlineTextEdit } from "../inline-text/inlineTextEditor.js";
+import { startClipboardHandoffController } from "../prompt/clipboardHandoff.js";
+import { SketchFrameOverlay } from "../sketch/SketchFrameOverlay.js";
+export function PageCard({ card, documentOwner }) {
+    const cardRef = useRef(card);
+    cardRef.current = card;
+    const [ready, setReady] = useState(false);
+    const frame = getPageFrame();
+    useEffect(() => {
+        registerCardFrameSource(card.id, frame);
+        const session = documentOwner?.createDocumentSession(document);
+        session?.registerCleanup(() => disposeBrowserCssInspection(document));
+        session?.registerCleanup(() => releaseDocumentProjection(document));
+        session?.registerCleanup(() => disposeRuntimeIdentityClaims(document));
+        session?.registerCleanup(() => disposeInlineTextEdit("frame-disposed", document));
+        session?.registerCleanup(startClipboardHandoffController(document));
+        const announce = () => connectFrame(card.id, frame).post({ type: "parent-ready" });
+        const unsubscribe = subscribeCanvasRendererMessages(({ frame: connection, message }) => {
+            if (connection.cardId !== card.id)
+                return;
+            if (message.type === "renderer-hello") {
+                announce();
+                return;
+            }
+            if (message.type === "frame-ready") {
+                registerCardFrame(card.id, frame);
+                sendProjectionToCard(cardRef.current, frame);
+                setReady(true);
+            }
+        });
+        announce();
+        return () => {
+            unsubscribe();
+            session?.dispose();
+            unregisterCardFrame(card.id);
+            setReady(false);
+        };
+    }, [card.id, documentOwner, frame]);
+    return (_jsx(SketchFrameOverlay, { cardId: card.id, iframe: frame, cardUrl: contentSourceUrl(card.content), ready: ready }));
+}

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

@@ -0,0 +1,4 @@
+import type { ReactElement } from "react";
+export declare function SketchToolOptions({ open }: {
+    readonly open: boolean;
+}): ReactElement;

package/dist/inspector/canvas/SketchToolOptions.js

@@ -0,0 +1,80 @@
+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" })] })] })] }));
+}
+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 }) }));
+}
+const PALETTE_RADIUS = 26;
+const PALETTE_SWATCH_SIZE = 32;
+const PALETTE_STAGGER_MS = 18;
+const PALETTE_STACK_ORDER = ["yellow", "orange", "red", "black", "green", "blue"];
+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] }));
+}
+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,16 @@
+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;
+    /** `hidden` removes controls from the tab order; `settled` is true once the slide finishes. */
+    readonly children: (state: {
+        readonly hidden: boolean;
+        readonly settled: boolean;
+    }) => ReactNode;
+}
+export declare function ToolOptionsDrawer({ name, open, label, children }: ToolOptionsDrawerProps): ReactElement;
+export declare function useDismissablePopover(open: boolean, rootRef: {
+    readonly current: HTMLElement | null;
+}, close: () => void): void;

package/dist/inspector/canvas/ToolOptionsDrawer.js

@@ -0,0 +1,71 @@
+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 remounts when sketching moves it into a root-level portal; remember each drawer's last state and width.
+const lastOpen = new Map();
+const lastWidth = new Map();
+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(() => {
+            // React can run this effect before a remounted toolbar is styled; flush layout 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 }) }) }));
+}
+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,4 @@
-/** Resolves only the selected or focused frame. */
-export declare function resolveActiveCanvasFrame(frames: ReadonlyMap<string, HTMLIFrameElement>, selectedCardId: string | null, focusedCardId: string | null): HTMLIFrameElement | null;
+import type { CanvasFrame } from "./canvasFrame.js";
+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/activeCanvasDocument.js

@@ -1,6 +1,5 @@
 import { getFocusedCardId, getSelectedCardId } from "./canvasStore.js";
 import { getRegisteredFrames } from "./projection.js";
-/** Resolves only the selected or focused frame. */
 export function resolveActiveCanvasFrame(frames, selectedCardId, focusedCardId) {
     const activeCardId = selectedCardId ?? focusedCardId;
     return activeCardId ? frames.get(activeCardId) ?? null : null;
@@ -17,7 +16,6 @@ export function getActiveCanvasDocument() {
         return null;
     }
 }
-/** Returns the iframe that owns the active renderer document. */
 export function getActiveCanvasFrame() {
     return resolveActiveCanvasFrame(getRegisteredFrames(), getSelectedCardId(), getFocusedCardId());
 }

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

@@ -1,10 +1,6 @@
 import { type CanvasCommand, type CanvasCommandResult, type CanvasGroup, type CanvasState } from "../../internal/agent-protocol.js";
 import { type CanvasCard } from "./canvasStore.js";
-/**
- * Renderer acknowledgements are deliberately shorter than the companion's
- * request timeout. A controller can therefore receive a useful partial-failure
- * acknowledgement instead of waiting for the browser bridge to expire first.
- */
+/** Deliberately shorter than the companion's request timeout, so partial failures surface as acknowledgements. */
 export declare const DEFAULT_RENDERER_READY_TIMEOUT_MS = 4000;
 export declare const MAX_RENDERER_READY_TIMEOUT_MS = 5000;
 export declare const MAX_PRESENTATION_ROUTES: 64;
@@ -17,7 +13,6 @@ export interface AgentRendererReadiness {
     failedCardIds: string[];
     timedOutCardIds: string[];
 }
-/** Direct callers may use URL strings; the shared command uses AgentRoute. */
 export interface AgentPresentationRoute {
     url: string;
     title?: string | null;
@@ -46,13 +41,11 @@ export declare class AgentPresentationError extends Error {
     readonly code: AgentPresentationErrorCode;
     constructor(code: AgentPresentationErrorCode, message: string);
 }
-/** Records the renderer acknowledgement for one newly presented card. */
 export declare function acknowledgeAgentRendererReady(cardId: string): void;
 /** Records a bounded, non-throwing renderer failure for one presented card. */
 export declare function acknowledgeAgentRendererError(cardId: string, message?: string): void;
 export declare function forgetAgentRendererReadiness(cardIds: readonly string[]): void;
 export declare function waitForAgentRendererReadiness(cardIds: readonly string[], timeoutMs?: number): Promise<AgentRendererReadiness>;
-/** Returns the compact state shape shared with the companion bridge. */
 export declare function readCanvasState(): CanvasState;
 export declare function presentAgentRoutes(input: PresentAgentRoutesInput): Promise<AgentRoutesPresentation>;
 export declare function focusAgentGroup(groupId: string, viewport?: {
@@ -77,11 +70,7 @@ export interface AgentPresentationCommandPort {
     execute(command: unknown): Promise<CanvasCommandResult>;
     dispose(): void;
 }
-/**
- * Creates the browser-controller adapter consumed by the inspector's
- * CopyPromptButton. It does not install window events or define a second
- * message protocol; callers pass the plain shared CanvasCommand they received.
- */
+/** Does not install window events or define a second message protocol; callers pass the shared CanvasCommand. */
 export declare function createAgentPresentationAdapter(options?: AgentPresentationAdapterOptions): AgentPresentationCommandPort;
 /** Clears presentation-only state between browser sessions and unit tests. */
 export declare function resetAgentPresentationState(): void;

package/dist/inspector/canvas/agentPresentation.js

@@ -6,11 +6,7 @@ import { canWriteWorkspace } from "./workspaceLease.js";
 import { removeFrame } from "../workspace/commands.js";
 import { appendAgentRouteCards, getFrameGroup, getFrameGroups, setFrameGroup, removeFrameGroup, batchCanvasChanges, fitAllCards, focusCard, focusCanvasCards, getCanvasCards, getFocusedCardId, } from "./canvasStore.js";
 import { getCanvasMode, setCanvasMode } from "./viewStore.js";
-/**
- * Renderer acknowledgements are deliberately shorter than the companion's
- * request timeout. A controller can therefore receive a useful partial-failure
- * acknowledgement instead of waiting for the browser bridge to expire first.
- */
+/** Deliberately shorter than the companion's request timeout, so partial failures surface as acknowledgements. */
 export const DEFAULT_RENDERER_READY_TIMEOUT_MS = 4_000;
 export const MAX_RENDERER_READY_TIMEOUT_MS = 5_000;
 export const MAX_PRESENTATION_ROUTES = AGENT_PROTOCOL_LIMITS.routeCount;
@@ -147,7 +143,6 @@ function beginRendererReadiness(cardIds) {
         rendererReadiness.set(cardId, { status: "pending" });
     settleReadinessWaiters();
 }
-/** Records the renderer acknowledgement for one newly presented card. */
 export function acknowledgeAgentRendererReady(cardId) {
     if (!isNonEmptyString(cardId))
         return;
@@ -208,7 +203,6 @@ function groupCardIds(groupId) {
         .filter((card) => card.groupId === groupId)
         .map((card) => card.id);
 }
-/** Returns the compact state shape shared with the companion bridge. */
 export function readCanvasState() {
     const focusedCardId = getFocusedCardId();
     const focusedCard = focusedCardId
@@ -249,8 +243,7 @@ export async function presentAgentRoutes(input) {
             throw new AgentPresentationError("group-id-conflict", `Route group ${groupId} already exists.`);
         }
         const readyTimeoutMs = clampReadyTimeout(input.readyTimeoutMs);
-        // Opening Canvas for an agent group appends only the requested routes. It
-        // never creates or repositions the current Inspect route.
+        // Appends only the requested routes; the current Inspect route is never created or repositioned.
         setCanvasMode("canvas");
         const cards = batchCanvasChanges(() => {
             setFrameGroup({ id: groupId, kind: "agent", label, agentId, routes: routes.map((route) => ({ ...route })) });
@@ -396,11 +389,7 @@ function credentialsFrom(options) {
         agentId: options.agentId ?? DEFAULT_AGENT_ID,
     };
 }
-/**
- * Creates the browser-controller adapter consumed by the inspector's
- * CopyPromptButton. It does not install window events or define a second
- * message protocol; callers pass the plain shared CanvasCommand they received.
- */
+/** Does not install window events or define a second message protocol; callers pass the shared CanvasCommand. */
 export function createAgentPresentationAdapter(options = {}) {
     const credentials = credentialsFrom(options);
     let disposed = false;

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,12 @@
+/** The renderer behind a Canvas card (its iframe) or the page surface (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;
+}
+export declare function canvasFrameElement(frame: CanvasFrame): HTMLIFrameElement | null;
+/** What 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,9 @@
+export function canvasFrameElement(frame) {
+    return typeof HTMLIFrameElement !== "undefined" && frame instanceof HTMLIFrameElement ? frame : null;
+}
+/** What 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/canvasResize.d.ts

@@ -19,12 +19,7 @@ interface ResizeEdges {
     readonly horizontal: "left" | "right" | null;
     readonly vertical: "top" | "bottom" | null;
 }
-/** Returns the anchored edges affected by a resize handle. */
 export declare function getCanvasResizeEdges(direction: CanvasResizeDirection): ResizeEdges;
-/**
- * Applies a pointer delta to a Canvas card while keeping the opposite edges
- * fixed. Minimum dimensions are clamped at the moving edge, so dragging past
- * the minimum does not move the anchored side.
- */
+/** Minimum dimensions clamp at the moving edge, so dragging past it never moves the anchored side. */
 export declare function resizeCanvasRect(rect: CanvasResizeRect, direction: CanvasResizeDirection, delta: CanvasResizeDelta, minimum?: CanvasResizeMinimum): CanvasResizeRect;
 export {};

package/dist/inspector/canvas/canvasResize.js

@@ -10,15 +10,10 @@ const RESIZE_EDGES = {
     "bottom-left": { horizontal: "left", vertical: "bottom" },
     left: { horizontal: "left", vertical: null },
 };
-/** Returns the anchored edges affected by a resize handle. */
 export function getCanvasResizeEdges(direction) {
     return RESIZE_EDGES[direction];
 }
-/**
- * Applies a pointer delta to a Canvas card while keeping the opposite edges
- * fixed. Minimum dimensions are clamped at the moving edge, so dragging past
- * the minimum does not move the anchored side.
- */
+/** Minimum dimensions clamp at the moving edge, so dragging past it never moves the anchored side. */
 export function resizeCanvasRect(rect, direction, delta, minimum = { width: MIN_CARD_WIDTH, height: MIN_CARD_HEIGHT }) {
     const edges = getCanvasResizeEdges(direction);
     const minWidth = Math.max(0, minimum.width);

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

@@ -38,7 +38,7 @@ export declare const PRIMARY_CARD_INSET = 40;
 declare function subscribe(cb: () => void): () => void;
 declare function getCards(): CanvasCard[];
 export declare function batchCanvasChanges<T>(operation: () => T): T;
-/** Adds one card while retaining the existing placement policy. */
+/** Adds one card to the end of the row. */
 export declare function addCanvasCard(url: string, title?: string): CanvasCard;
 export declare function appendAgentRouteCards(groupId: string, routes: readonly {
     url: string;
@@ -49,10 +49,7 @@ export declare function setCanvasHistoryActivator(activate: (cardId: string) =>
 export declare function removeCanvasCard(id: string, { undoable }?: {
     undoable?: boolean;
 }): void;
-/**
- * Opens one editor target in the iframe workspace without replacing restored
- * cards or their dimensions.
- */
+/** Opens one editor target without replacing restored cards or their dimensions. */
 export declare function activateIframeWorkspace(url: string, viewport: {
     width: number;
     height: number;
@@ -75,7 +72,7 @@ export declare function fitAllCards(viewport?: {
     width: number;
     height: number;
 }): void;
-/** Centers a selected set of cards without changing the current zoom. */
+/** Centers the cards without changing the current zoom. */
 export declare function focusCanvasCards(cardIds: readonly string[], viewport?: {
     width: number;
     height: number;
@@ -89,8 +86,9 @@ 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;
+/** The returned commit records the whole gesture as one undo step; programmatic placement 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[];
-/** Returns a route-based label that distinguishes copies and HTML iterations. */
 export declare function getCanvasCardLabel(card: CanvasCard, frameCards?: readonly CanvasCard[]): string;