nudge-ui 0.2.0

package/dist/inspector/canvas/CanvasElementOverlay.js

@@ -0,0 +1,301 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { isElementClickMessage, isRendererMessageFor, } from "./frameProtocol.js";
+import { findCanvasFrameBySource, PROJECT_ID, WORKSPACE_ID } from "./projection.js";
+import { useBoardCamera, useCanvasCards } from "./canvasStore.js";
+import { handleElementClick } from "./rendererSelectionProxy.js";
+import { getSelectedElements, useSelectedElement, useSelectedElements } from "../selection/selectionStore.js";
+import { getMarginFills, getMarginGuides, readBorderWidths, toRect, } from "../overlay/overlayGeometry.js";
+const overlayStyles = ".canvas-element-overlay {\n  position: fixed;\n  pointer-events: none;\n  z-index: 3;\n  background: rgb(59 130 246 / 10%);\n  outline: 1.5px solid var(--accent);\n  outline-offset: -1px;\n}\n\n.canvas-selected-outline {\n  position: fixed;\n  pointer-events: none;\n  z-index: 3;\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n\n.canvas-hover-margin-fill {\n  position: fixed;\n  pointer-events: none;\n  z-index: 2;\n  background: rgb(59 130 246 / 14%);\n}\n\n.canvas-hover-margin {\n  position: fixed;\n  pointer-events: none;\n  z-index: 2;\n  border-color: rgb(59 130 246 / 52%);\n  border-style: dotted;\n  border-width: 0;\n  opacity: 0.72;\n}\n\n.canvas-hover-margin[data-axis=\"horizontal\"] {\n  border-top-width: 1px;\n}\n\n.canvas-hover-margin[data-axis=\"vertical\"] {\n  border-left-width: 1px;\n}\n\n.canvas-dom-drop-line {\n  z-index: 2147483647;\n  border-radius: 999px;\n  background: #3b82f6;\n  box-shadow: 0 0 0 1px rgb(255 255 255 / 95%), 0 1px 5px rgb(37 99 235 / 72%);\n}\n\n.canvas-dom-drop-line::before,\n.canvas-dom-drop-line::after {\n  position: absolute;\n  top: 50%;\n  width: 8px;\n  height: 8px;\n  border: 2px solid #ffffff;\n  border-radius: 50%;\n  background: #2563eb;\n  content: \"\";\n  transform: translateY(-50%);\n}\n\n.canvas-dom-drop-line::before { left: -3px; }\n.canvas-dom-drop-line::after { right: -3px; }\n\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::before,\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::after {\n  left: 50%;\n  right: auto;\n  transform: translateX(-50%);\n}\n\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::before { top: -3px; }\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::after { top: auto; bottom: -3px; }\n\n.canvas-dom-drop-target {\n  z-index: 2147483646;\n  box-sizing: border-box;\n  border: 1px solid rgb(59 130 246 / 72%);\n  border-radius: 4px;\n  background: rgb(59 130 246 / 5%);\n}\n";
+import { deleteElement, getDropLocationAtPoint, moveElement, nudgeElement } from "../overlay/structuralGestures.js";
+import { redo, undo } from "../changes/changesLog.js";
+import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
+import { setSelectedElement } from "../selection/selectionStore.js";
+import { clearDropGuide, showDropGuide, useDropGuide } from "../overlay/dropGuide.js";
+import { DropGuideOverlay } from "../overlay/DropGuideOverlay.js";
+import { getMeasurementGeometry } from "../overlay/measurementGeometry.js";
+import { MeasurementGuideOverlay } from "../overlay/MeasurementGuideOverlay.js";
+import { projectMeasurementSegments } from "./measurementProjection.js";
+import { RENDERER_ELEMENT_ID_ATTR } from "./rendererCidIndex.js";
+import { observeSelectedGeometry } from "../overlay/selectedGeometry.js";
+function projectRect(iframe, rect, zoom) {
+    const frameRect = iframe.getBoundingClientRect();
+    return {
+        left: frameRect.left + rect.left * zoom,
+        top: frameRect.top + rect.top * zoom,
+        width: rect.width * zoom,
+        height: rect.height * zoom,
+    };
+}
+function scaleMargins(margins, zoom) {
+    return {
+        top: margins.top * zoom,
+        right: margins.right * zoom,
+        bottom: margins.bottom * zoom,
+        left: margins.left * zoom,
+    };
+}
+function overlayStyle(rect) {
+    return {
+        position: "fixed",
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+        pointerEvents: "none",
+    };
+}
+function findFrameElement(iframe, elementId, cid, src) {
+    const doc = iframe.contentDocument;
+    if (!doc)
+        return null;
+    if (!/^r\d+$/.test(elementId))
+        return null;
+    const candidates = doc.querySelectorAll(`[${RENDERER_ELEMENT_ID_ATTR}="${elementId}"]`);
+    if (candidates.length !== 1)
+        return null;
+    const candidate = candidates[0] ?? null;
+    if (!candidate || candidate.getAttribute("data-cid") !== cid || candidate.getAttribute("data-src") !== src)
+        return null;
+    const frameWindow = doc.defaultView;
+    return frameWindow && candidate instanceof frameWindow.HTMLElement ? candidate : null;
+}
+function projectGuideToCanvas(guide, zoom) {
+    if (!guide)
+        return null;
+    const iframe = guide.document.defaultView?.frameElement;
+    if (!(iframe instanceof HTMLIFrameElement))
+        return null;
+    const iframeRect = iframe.getBoundingClientRect();
+    const project = (rect, scaleWidth, scaleHeight) => ({
+        left: iframeRect.left + rect.left * zoom,
+        top: iframeRect.top + rect.top * zoom,
+        width: scaleWidth ? rect.width * zoom : rect.width,
+        height: scaleHeight ? rect.height * zoom : rect.height,
+    });
+    return {
+        orientation: guide.orientation,
+        line: project(guide.line, guide.orientation === "horizontal", guide.orientation === "vertical"),
+        target: project(guide.target, true, true),
+    };
+}
+export function CanvasElementOverlay() {
+    const [hover, setHover] = useState(null);
+    const [measureState, setMeasureState] = useState(null);
+    const [, refreshSelectedGeometry] = useReducer((revision) => revision + 1, 0);
+    const selected = useSelectedElement();
+    const selectedElements = useSelectedElements();
+    const camera = useBoardCamera();
+    useCanvasCards(); // Projected geometry must follow card drag and resize updates.
+    const dragRef = useRef(null);
+    const dropGuide = useDropGuide("canvas");
+    const projectedDropGuide = projectGuideToCanvas(dropGuide, camera.zoom);
+    const selectedFrame = selected?.domElement.ownerDocument.defaultView?.frameElement;
+    const selectedInCanvas = selectedFrame instanceof HTMLIFrameElement
+        && selectedFrame.hasAttribute("data-nudge-ui-canvas-renderer");
+    const selectedRects = selectedInCanvas
+        ? selectedElements.map((candidate) => {
+            const frame = candidate.domElement.ownerDocument.defaultView?.frameElement;
+            return frame === selectedFrame ? toRect(candidate.domElement.getBoundingClientRect()) : null;
+        })
+        : [];
+    const selectedPrimaryIndex = selectedElements.findIndex((candidate) => candidate.domElement === selected?.domElement);
+    const selectedLocalRect = selectedRects[selectedPrimaryIndex >= 0 ? selectedPrimaryIndex : 0] ?? null;
+    const selectedFrameRect = selectedInCanvas
+        ? toRect(selectedFrame.getBoundingClientRect())
+        : null;
+    const selectedRect = selectedInCanvas && selectedLocalRect
+        ? projectRect(selectedFrame, selectedLocalRect, camera.zoom)
+        : null;
+    const projectedSelectedGeometry = selectedInCanvas
+        ? selectedRects.flatMap((rect, index) => {
+            const element = selectedElements[index];
+            return rect && element
+                ? [{ element, rect: projectRect(selectedFrame, rect, camera.zoom) }]
+                : [];
+        })
+        : [];
+    const selectedBorders = selectedInCanvas && selected
+        ? readBorderWidths(selected.domElement)
+        : null;
+    useEffect(() => {
+        if (!selectedInCanvas || !selected)
+            return;
+        const stops = selectedElements.map((candidate) => observeSelectedGeometry(candidate.domElement, refreshSelectedGeometry));
+        return () => stops.forEach((stop) => stop());
+    }, [selected, selectedElements, selectedInCanvas]);
+    // The selected element's identity is computed once per selection change
+    // (never per hover), so the measurement self-rulers exclusion can compare
+    // identities without a per-hover scan of the frame document.
+    const selectedIdentity = useMemo(() => {
+        const el = selected?.domElement;
+        if (!el)
+            return null;
+        const elementId = el.getAttribute(RENDERER_ELEMENT_ID_ATTR);
+        return elementId ? { elementId } : null;
+    }, [selected?.domElement]);
+    useEffect(() => {
+        function onMessage(event) {
+            if (event.origin !== window.location.origin)
+                return;
+            if (!event.data || typeof event.data !== "object")
+                return;
+            const sourceFrame = findCanvasFrameBySource(event.source);
+            if (!sourceFrame)
+                return;
+            const { cardId: sourceCardId, iframe: sourceIframe } = sourceFrame;
+            const frameIdentity = {
+                projectId: PROJECT_ID,
+                workspaceId: WORKSPACE_ID,
+                cardId: sourceCardId,
+            };
+            if (!isRendererMessageFor(event.data, frameIdentity))
+                return;
+            // SAFETY: isRendererMessageFor validated the frame identity and message shape above.
+            const data = event.data;
+            if (data.type === "element-hover") {
+                const msg = data;
+                if (!msg.cid)
+                    return;
+                if (msg.rect === null) {
+                    setHover((current) => current?.cardId === sourceCardId ? null : current);
+                    return;
+                }
+                setHover({
+                    iframe: sourceIframe,
+                    identity: { elementId: msg.elementId },
+                    rect: msg.rect,
+                    margins: msg.margins ?? { top: 0, right: 0, bottom: 0, left: 0 },
+                    borders: msg.borders ?? { top: 0, right: 0, bottom: 0, left: 0 },
+                    cardId: sourceCardId,
+                });
+            }
+            else if (data.type === "element-measure-state") {
+                const msg = data;
+                setMeasureState({
+                    iframe: sourceIframe,
+                    altKey: msg.altKey,
+                    pointerOverPage: msg.pointerOverPage,
+                });
+            }
+            else if (data.type === "element-click") {
+                if (!isElementClickMessage(event.data, frameIdentity))
+                    return;
+                const msg = data;
+                if (!msg.cid)
+                    return;
+                handleElementClick(msg, sourceIframe, sourceCardId);
+            }
+            else if (data.type === "element-deselect") {
+                setSelectedElement(null);
+            }
+            else if (data.type === "element-drag-start") {
+                if (getSelectedElements().length > 1)
+                    return;
+                const msg = data;
+                const element = findFrameElement(sourceIframe, msg.elementId, msg.cid, msg.src);
+                if (!element)
+                    return;
+                dragRef.current = { iframe: sourceIframe, element };
+                const selectedElement = resolveSelectionFromElement(element);
+                if (selectedElement)
+                    setSelectedElement(selectedElement);
+                updateDropGuide(msg.point, sourceIframe);
+            }
+            else if (data.type === "element-drag-move") {
+                updateDropGuide(data.point, sourceIframe);
+            }
+            else if (data.type === "element-drag-end") {
+                const msg = data;
+                const current = dragRef.current;
+                if (current && current.iframe === sourceIframe && sourceIframe.contentDocument) {
+                    const drop = getDropLocationAtPoint(sourceIframe.contentDocument, current.element, msg.point.x, msg.point.y);
+                    if (drop)
+                        moveElement(current.element, drop);
+                    const selectedElement = resolveSelectionFromElement(current.element);
+                    if (selectedElement)
+                        setSelectedElement(selectedElement);
+                }
+                dragRef.current = null;
+                clearDropGuide("canvas");
+            }
+            else if (data.type === "element-delete") {
+                if (getSelectedElements().length !== 1)
+                    return;
+                const msg = data;
+                const element = findFrameElement(sourceIframe, msg.elementId, msg.cid, msg.src);
+                const selectedElement = element ? resolveSelectionFromElement(element) : null;
+                if (selectedElement && deleteElement(selectedElement))
+                    setSelectedElement(null);
+            }
+            else if (data.type === "element-nudge") {
+                if (getSelectedElements().length !== 1)
+                    return;
+                const msg = data;
+                const element = findFrameElement(sourceIframe, msg.elementId, msg.cid, msg.src);
+                const record = element ? nudgeElement(element, msg.key) : null;
+                if (element && record) {
+                    const selectedElement = resolveSelectionFromElement(element);
+                    if (selectedElement)
+                        setSelectedElement(selectedElement);
+                }
+            }
+            else if (data.type === "history-request") {
+                const msg = data;
+                if (msg.action === "redo") {
+                    redo();
+                }
+                else {
+                    undo();
+                }
+            }
+            function updateDropGuide(point, iframe) {
+                const current = dragRef.current;
+                if (!current || current.iframe !== iframe || !iframe.contentDocument)
+                    return;
+                const drop = getDropLocationAtPoint(iframe.contentDocument, current.element, point.x, point.y);
+                if (!drop) {
+                    clearDropGuide("canvas");
+                    return;
+                }
+                showDropGuide("canvas", iframe.contentDocument, drop);
+            }
+        }
+        window.addEventListener("message", onMessage);
+        return () => {
+            window.removeEventListener("message", onMessage);
+            clearDropGuide("canvas");
+        };
+    }, []);
+    if (!hover && projectedSelectedGeometry.length === 0 && !projectedDropGuide)
+        return null;
+    const projectedHoverRect = hover ? projectRect(hover.iframe, hover.rect, camera.zoom) : null;
+    const hoverMargins = hover ? scaleMargins(hover.margins, camera.zoom) : null;
+    const hoverMarginGuides = projectedHoverRect && hoverMargins
+        ? getMarginGuides(projectedHoverRect, hoverMargins)
+        : [];
+    const hoverMarginFills = projectedHoverRect && hoverMargins
+        ? getMarginFills(projectedHoverRect, hoverMargins)
+        : [];
+    const measureStateForSelectedFrame = measureState?.iframe === selectedFrame ? measureState : null;
+    const hoverInSelectedFrame = hover?.iframe === selectedFrame ? hover : null;
+    const showGuideOverlay = Boolean(selectedElements.length === 1
+        && selectedRect
+        && selectedFrameRect
+        && measureStateForSelectedFrame?.altKey
+        && measureStateForSelectedFrame.pointerOverPage);
+    const isSelfHover = Boolean(hoverInSelectedFrame
+        && selectedIdentity
+        && hoverInSelectedFrame.identity.elementId === selectedIdentity.elementId);
+    const showMeasurement = Boolean(showGuideOverlay
+        && selectedLocalRect
+        && hoverInSelectedFrame
+        && !isSelfHover);
+    const measurementSegments = showMeasurement && selectedFrameRect && selectedLocalRect && hoverInSelectedFrame
+        ? projectMeasurementSegments(selectedFrameRect, getMeasurementGeometry(selectedLocalRect, hoverInSelectedFrame.rect, {
+            selectedBorders: selectedBorders ?? undefined,
+            hoveredBorders: hoverInSelectedFrame.borders,
+        }).segments, camera.zoom)
+        : [];
+    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "canvas-element-overlay-styles", children: overlayStyles }), showGuideOverlay && selectedRect && selectedFrameRect ? (_jsx(MeasurementGuideOverlay, { testId: "canvas-measurement-overlay", selectedRect: selectedRect, guideViewport: selectedFrameRect, segments: measurementSegments })) : null, projectedHoverRect ? (_jsxs(_Fragment, { children: [hoverMarginFills.map((fill) => (_jsx("div", { className: "canvas-hover-margin-fill", "data-side": fill.side, style: overlayStyle(fill), "aria-hidden": "true" }, fill.side))), _jsx("div", { className: "canvas-element-overlay", "data-test": "canvas-hover-outline", style: overlayStyle(projectedHoverRect), "aria-hidden": "true" }), hoverMarginGuides.map((guide) => (_jsx("div", { className: "canvas-hover-margin", "data-axis": guide.axis, "data-distance": guide.distance, "data-side": guide.side, style: overlayStyle(guide), "aria-hidden": "true" }, guide.side)))] })) : null, projectedSelectedGeometry.map(({ element, rect }, index) => (_jsx("div", { className: "canvas-selected-outline", "data-test": "canvas-selected-outline", "data-selected-cid": element.cid, "data-selected-index": index, "data-selected-src": element.src, style: overlayStyle(rect), "aria-hidden": "true" }, `${element.cid}-${index}`))), _jsx(DropGuideOverlay, { guide: projectedDropGuide, lineClassName: "canvas-dom-drop-line", lineTestId: "canvas-dom-drop-line", targetClassName: "canvas-dom-drop-target", targetTestId: "canvas-dom-drop-target" })] }));
+}

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

@@ -0,0 +1,2 @@
+import { type ReactElement } from "react";
+export declare function CanvasWorkspace(): ReactElement | null;

package/dist/inspector/canvas/CanvasWorkspace.js

@@ -0,0 +1,301 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useCanvasCards, exitCanvas, exitCanvasToCard, addCanvasCard, removeCanvasCard, findCardByNormalizedUrl, focusCard, getSelectedCardId, setBoardCamera, getBoardCamera, fitAllCards, hasFitAllRan, useBoardCamera, } from "./canvasStore.js";
+import { CanvasCard } from "./CanvasCard.js";
+import { useCanvasMode } from "./canvasStore.js";
+import { subscribeChanges } from "../changes/changesLog.js";
+import { recordCanvasStructuralProjectionReports } from "../projection/structuralProjection.js";
+import { recordCanvasRenderedInstanceProjectionReports } from "../projection/renderedInstance.js";
+import { recordCanvasTextProjectionReports } from "../projection/textProjection.js";
+import { findCanvasFrameBySource, getRegisteredFrames, PROJECT_ID, projectToAllReadyCards, recordCanvasProjectionApplied, WORKSPACE_ID, } from "./projection.js";
+import { normalizeUrl } from "./normalizeUrl.js";
+import { PROTOCOL_VERSION, isRendererMessageFor, isProjectionAppliedMessage, isRenderedInstanceProjectionReportMessage, isTextProjectionReportMessage, isStructuralProjectionReportMessage, } from "./frameProtocol.js";
+import { iframePointToClientPoint, zoomCameraAtPointer } from "./canvasGestures.js";
+const canvasWorkspaceStyles = ".canvas-workspace {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  background: #ffffff;\n  pointer-events: auto;\n}\n\n.canvas-workspace__board {\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n  background: #ffffff;\n}\n\n.canvas-workspace__board.is-grabbable {\n  cursor: grab;\n}\n\n.canvas-workspace__board.is-grabbing {\n  cursor: grabbing;\n}\n\n/* Canvas gestures take precedence over every card interaction while Space is\n   held. This also closes the short postMessage gap before an iframe receives\n   its mirrored modifier state. */\n.canvas-workspace__board.is-grabbable .canvas-card,\n.canvas-workspace__board.is-grabbing .canvas-card {\n  pointer-events: none;\n}\n\n.canvas-workspace__board-content {\n  position: absolute;\n  will-change: transform;\n}\n";
+const canvasCardStyles = ".canvas-card {\n  position: relative;\n}\n\n.canvas-card__frame {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--surface-panel);\n  border-radius: var(--radius-control);\n  overflow: hidden;\n}\n\n.canvas-card.is-selected .canvas-card__frame {\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n\n.canvas-card.is-focused .canvas-card__frame {\n  animation: canvas-card-focus 900ms ease-out;\n}\n\n@keyframes canvas-card-focus {\n  0%, 35% { outline: 3px solid var(--accent); outline-offset: -3px; }\n  100% { outline: 0 solid transparent; outline-offset: -2px; }\n}\n\n.canvas-card__toolbar {\n  display: flex;\n  align-items: center;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: calc(100% + var(--space-8));\n  justify-content: space-between;\n  z-index: 1;\n  cursor: grab;\n}\n\n.canvas-card.is-dragging .canvas-card__toolbar {\n  cursor: grabbing;\n}\n\n.canvas-card__drag-surface {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: var(--control-height-large);\n  padding: 0 var(--space-12);\n  cursor: grab;\n  user-select: none;\n  touch-action: none;\n}\n\n.canvas-card.is-dragging .canvas-card__drag-surface {\n  cursor: grabbing;\n}\n\n.canvas-card__dimensions {\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.canvas-card__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  flex-shrink: 0;\n}\n\n.canvas-card__iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  display: block;\n}\n\n.canvas-card__loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--text-muted, #777777);\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.canvas-card__error {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  height: 100%;\n  padding: 20px;\n  text-align: center;\n}\n\n.canvas-card__error p {\n  margin: 0;\n  color: var(--text-muted, #777777);\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.canvas-card__error-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.canvas-card__resize-handle {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  padding: 4px;\n  cursor: nwse-resize;\n  color: var(--text-muted, #777777);\n  opacity: 0;\n  transition: opacity 150ms ease;\n  touch-action: none;\n}\n\n.canvas-card:hover .canvas-card__resize-handle,\n.canvas-card:focus-within .canvas-card__resize-handle {\n  opacity: 1;\n}\n\n.canvas-card__resize-handle:hover {\n  color: var(--accent);\n}\n\n.canvas-card__resize-handle:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n  opacity: 1;\n}\n";
+const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #F5F5F4;\n  --surface-control: var(--surface-well);\n  --surface-control-hover: var(--surface-well-2x);\n  --surface-raised: #FAFAFA;\n  --surface-raised-2x: #fff ;\n  --surface-raised-hover: #F5F5F4;\n  --surface-well: hsla(0, 0%, 0%, 0.05);\n  --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n\n  --border-subtle: hsla(0, 0%, 0%, 0.1);\n  --border-medium: hsla(0, 0%, 0%, 0.2);\n  --border-strong: #d8d8d8;\n\n  --text-primary: #242424;\n  --text-secondary: #6f6f6f;\n  --text-muted: #777777;\n  --text-muted-subtle: #a1a1a1;\n\n  --accent: #0096ff;\n  --accent-surface: rgba(0, 176, 255, 0.15);\n  --warning: #d97706;\n  --warning-text: #9a5b00;\n  --warning-surface: #fff6e5;\n  --danger: #df4b4b;\n  --danger-text: #bd3636;\n  --danger-surface: #fff0f0;\n\n  --space-0: 0;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n\n  /* Radius */\n  --radius-0: 0;\n  --radius-4: 4px;\n  --radius-8: 8px;\n  --radius-12: 12px;\n  --radius-16: 16px;\n  --radius-20: 20px;\n  --radius-24: 24px;\n  --radius-pill: 999px;\n\n  --radius-control: var(--radius-8);\n  --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n  --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --z-index: 2147483647;\n\n  --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --font-size-base: 12px;\n  --font-size-small: 10px;\n  --font-weight-base: 400;\n  --font-weight-label: 600;\n\n  /* Control semantic sizes */\n  --control-height-small: 24px;\n  --control-height-large: 32px;\n  --label-column: 104px;\n\n  --icon-size-small: 16px;\n  --icon-size-large: 20px;\n  --icon-stroke-width: 1.5px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n  font-family: var(--font-family);\n  background: transparent;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n  font-family: inherit;\n}\n";
+import { useInspectorOpen } from "../shell/openStore.js";
+import { isEditableEvent } from "../shell/shortcuts.js";
+import { acknowledgeAgentRendererReady } from "./agentPresentation.js";
+import { useInspectorSession } from "../session/sessionContext.js";
+const WORKSPACE_STYLES = [foundationStyles, canvasWorkspaceStyles, canvasCardStyles].join("\n");
+export function CanvasWorkspace() {
+    const mode = useCanvasMode();
+    const inspectorSession = useInspectorSession();
+    const inspectorOpen = useInspectorOpen();
+    const cards = useCanvasCards();
+    const camera = useBoardCamera();
+    const boardRef = useRef(null);
+    const panningRef = useRef(false);
+    const panOriginRef = useRef({ x: 0, y: 0 });
+    const cameraAtPanStartRef = useRef({ x: 0, y: 0 });
+    const framePanContextRef = useRef(null);
+    const spaceHeldRef = useRef(false);
+    const fitAllScheduledRef = useRef(false);
+    const [boardCursorClass, setBoardCursorClass] = useState("");
+    const sendPanModifier = useCallback((iframe, cardId, spaceHeld) => {
+        iframe.contentWindow?.postMessage({
+            type: "pan-modifier",
+            protocolVersion: PROTOCOL_VERSION,
+            projectId: PROJECT_ID,
+            workspaceId: WORKSPACE_ID,
+            cardId,
+            spaceHeld,
+        }, window.location.origin);
+    }, []);
+    const broadcastPanModifier = useCallback((spaceHeld) => {
+        for (const [cardId, iframe] of getRegisteredFrames()) {
+            sendPanModifier(iframe, cardId, spaceHeld);
+        }
+    }, [sendPanModifier]);
+    const zoomAtPointer = useCallback((point, deltaY) => {
+        const board = boardRef.current;
+        if (!board)
+            return;
+        setBoardCamera(zoomCameraAtPointer(getBoardCamera(), point, board.getBoundingClientRect(), deltaY));
+    }, []);
+    const fitCanvasToBoard = useCallback(() => {
+        const board = boardRef.current;
+        fitAllCards(board ? { width: board.clientWidth, height: board.clientHeight } : undefined);
+    }, []);
+    const startPanning = useCallback((point) => {
+        if (panningRef.current)
+            return;
+        panningRef.current = true;
+        setBoardCursorClass("is-grabbing");
+        panOriginRef.current = point;
+        const current = getBoardCamera();
+        cameraAtPanStartRef.current = { x: current.x, y: current.y };
+    }, []);
+    const movePanning = useCallback((point) => {
+        if (!panningRef.current)
+            return;
+        const cameraAtStart = cameraAtPanStartRef.current;
+        const current = getBoardCamera();
+        setBoardCamera({
+            x: cameraAtStart.x + point.x - panOriginRef.current.x,
+            y: cameraAtStart.y + point.y - panOriginRef.current.y,
+            zoom: current.zoom,
+        });
+    }, []);
+    const endPanning = useCallback(() => {
+        if (!panningRef.current)
+            return;
+        panningRef.current = false;
+        setBoardCursorClass(spaceHeldRef.current ? "is-grabbable" : "");
+    }, []);
+    useEffect(() => {
+        return subscribeChanges(() => {
+            projectToAllReadyCards();
+        });
+    }, []);
+    useEffect(() => {
+        function onMessage(event) {
+            if (event.origin !== window.location.origin)
+                return;
+            if (!event.data || typeof event.data !== "object")
+                return;
+            const frame = findCanvasFrameBySource(event.source);
+            if (!frame)
+                return;
+            if (!isRendererMessageFor(event.data, {
+                projectId: PROJECT_ID,
+                workspaceId: WORKSPACE_ID,
+                cardId: frame.cardId,
+            }))
+                return;
+            const identity = {
+                projectId: PROJECT_ID,
+                workspaceId: WORKSPACE_ID,
+                cardId: frame.cardId,
+            };
+            if (isProjectionAppliedMessage(event.data, identity)) {
+                recordCanvasProjectionApplied(frame.cardId, event.data.revision);
+                return;
+            }
+            if (isStructuralProjectionReportMessage(event.data, identity)) {
+                recordCanvasStructuralProjectionReports(frame.cardId, event.data.revision, event.data.reports);
+                return;
+            }
+            if (isRenderedInstanceProjectionReportMessage(event.data, identity)) {
+                recordCanvasRenderedInstanceProjectionReports(frame.cardId, event.data.revision, event.data.reports);
+                return;
+            }
+            if (isTextProjectionReportMessage(event.data, identity)) {
+                recordCanvasTextProjectionReports(frame.cardId, event.data.revision, event.data.reports);
+                return;
+            }
+            // SAFETY: isRendererMessageFor validated the frame identity and message shape above.
+            const msg = event.data;
+            if (msg.type === "frame-ready") {
+                acknowledgeAgentRendererReady(frame.cardId);
+                // A card can finish loading after Space was pressed on the controller.
+                // Seed it with the current modifier state before its first pointer event.
+                sendPanModifier(frame.iframe, frame.cardId, spaceHeldRef.current);
+            }
+            if (msg.type === "pan-modifier") {
+                spaceHeldRef.current = msg.spaceHeld;
+                if (!panningRef.current) {
+                    setBoardCursorClass(msg.spaceHeld ? "is-grabbable" : "");
+                }
+                broadcastPanModifier(msg.spaceHeld);
+                return;
+            }
+            if (msg.type === "zoom") {
+                const iframeRect = frame.iframe.getBoundingClientRect();
+                const point = iframePointToClientPoint(iframeRect, msg.point, getBoardCamera().zoom);
+                zoomAtPointer(point, msg.deltaY);
+                return;
+            }
+            const pointInBoard = (point) => {
+                const context = framePanContextRef.current;
+                if (!context)
+                    return null;
+                return {
+                    x: context.left + point.x * context.zoom,
+                    y: context.top + point.y * context.zoom,
+                };
+            };
+            if (msg.type === "pan-start") {
+                const iframeRect = frame.iframe.getBoundingClientRect();
+                framePanContextRef.current = {
+                    left: iframeRect.left,
+                    top: iframeRect.top,
+                    zoom: getBoardCamera().zoom,
+                };
+                const point = pointInBoard(msg.point);
+                if (point)
+                    startPanning(point);
+                return;
+            }
+            if (msg.type === "pan-move") {
+                const point = pointInBoard(msg.point);
+                if (point)
+                    movePanning(point);
+                return;
+            }
+            if (msg.type === "pan-end") {
+                framePanContextRef.current = null;
+                endPanning();
+                return;
+            }
+            if (msg.type === "external-navigation") {
+                const destination = normalizeUrl(msg.url);
+                if (!destination || destination.origin === window.location.origin)
+                    return;
+                exitCanvas();
+                window.location.href = msg.url;
+                return;
+            }
+            if (msg.type !== "navigation-intent")
+                return;
+            const normalized = normalizeUrl(msg.url);
+            if (!normalized || normalized.origin !== window.location.origin)
+                return;
+            const existing = findCardByNormalizedUrl(normalized);
+            if (existing) {
+                focusCard(existing.id);
+            }
+            else {
+                addCanvasCard(msg.url);
+            }
+        }
+        window.addEventListener("message", onMessage);
+        return () => window.removeEventListener("message", onMessage);
+    }, [broadcastPanModifier, endPanning, movePanning, sendPanModifier, startPanning, zoomAtPointer]);
+    useEffect(() => {
+        if (mode === "canvas" && !hasFitAllRan()) {
+            if (!fitAllScheduledRef.current) {
+                fitAllScheduledRef.current = true;
+                requestAnimationFrame(() => {
+                    fitCanvasToBoard();
+                    fitAllScheduledRef.current = false;
+                });
+            }
+        }
+    }, [mode, cards.length, inspectorOpen, fitCanvasToBoard]);
+    useEffect(() => {
+        function onKeyDown(e) {
+            if (mode !== "canvas")
+                return;
+            if ((e.key === "Delete" || e.key === "Backspace") && !isEditableEvent(e)) {
+                const selectedCardId = getSelectedCardId();
+                if (!selectedCardId)
+                    return;
+                e.preventDefault();
+                removeCanvasCard(selectedCardId);
+                return;
+            }
+            if (e.code === "Space" && !e.repeat) {
+                // SAFETY: keyboard event targets are HTMLElements in the workspace DOM.
+                const target = e.target;
+                if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable))
+                    return;
+                e.preventDefault();
+                spaceHeldRef.current = true;
+                broadcastPanModifier(true);
+                if (!panningRef.current) {
+                    setBoardCursorClass("is-grabbable");
+                }
+            }
+        }
+        function onKeyUp(e) {
+            if (e.code === "Space") {
+                spaceHeldRef.current = false;
+                broadcastPanModifier(false);
+                if (!panningRef.current) {
+                    setBoardCursorClass("");
+                }
+            }
+        }
+        window.addEventListener("keydown", onKeyDown, true);
+        window.addEventListener("keyup", onKeyUp, true);
+        return () => {
+            window.removeEventListener("keydown", onKeyDown, true);
+            window.removeEventListener("keyup", onKeyUp, true);
+        };
+    }, [broadcastPanModifier, mode]);
+    const handleBoardPointerDown = useCallback((e) => {
+        if (panningRef.current)
+            return;
+        if (!spaceHeldRef.current)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        startPanning({ x: e.clientX, y: e.clientY });
+        // SAFETY: pointerdown targets are HTMLElements in the workspace DOM.
+        e.target.setPointerCapture(e.pointerId);
+        function onMove(ev) {
+            movePanning({ x: ev.clientX, y: ev.clientY });
+        }
+        function onUp() {
+            endPanning();
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+        }
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+    }, [endPanning, movePanning, startPanning]);
+    useEffect(() => {
+        if (mode !== "canvas")
+            return;
+        function handleGlobalWheel(e) {
+            if (!e.ctrlKey && !e.metaKey)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            zoomAtPointer({ x: e.clientX, y: e.clientY }, e.deltaY);
+        }
+        window.addEventListener("wheel", handleGlobalWheel, { capture: true, passive: false });
+        return () => window.removeEventListener("wheel", handleGlobalWheel, { capture: true });
+    }, [mode, zoomAtPointer]);
+    function handleEdit(card) {
+        exitCanvasToCard(card);
+    }
+    if (mode !== "canvas" || cards.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "canvas-styles", children: WORKSPACE_STYLES }), _jsx("div", { className: "canvas-workspace", "data-test": "canvas-workspace", style: { right: inspectorOpen ? "min(320px, 100vw)" : 0 }, children: _jsx("div", { className: `canvas-workspace__board ${boardCursorClass}`.trim(), "data-test": "canvas-board", ref: boardRef, onPointerDown: handleBoardPointerDown, children: _jsx("div", { className: "canvas-workspace__board-content", style: {
+                            transform: `translate(${camera.x}px, ${camera.y}px) scale(${camera.zoom})`,
+                            transformOrigin: "0 0",
+                        }, "data-test": "canvas-board-content", children: cards.map((card) => (_jsx(CanvasCard, { card: card, onEdit: handleEdit, documentOwner: inspectorSession }, card.id))) }) }) })] }));
+}

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

@@ -0,0 +1,6 @@
+import type { ReactElement } from "react";
+interface LockedWorkspaceNoticeProps {
+    onTakeover: () => void;
+}
+export declare function LockedWorkspaceNotice({ onTakeover }: LockedWorkspaceNoticeProps): ReactElement;
+export {};

package/dist/inspector/canvas/LockedWorkspaceNotice.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { requestTakeover } from "./workspaceLease.js";
+import { Button } from "../ui/Button.js";
+import { UI_STYLES } from "../ui/styles.js";
+const lockedWorkspaceStyles = ".locked-notice {\n  position: fixed;\n  top: max(12px, env(safe-area-inset-top));\n  right: max(12px, env(safe-area-inset-right));\n  width: min(320px, calc(100vw - 24px));\n  padding: 18px;\n  border-radius: 12px;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  pointer-events: auto;\n}\n\n.locked-notice__message {\n  margin-bottom: 14px;\n  font-size: 14px;\n  font-weight: 650;\n}\n";
+export function LockedWorkspaceNotice({ onTakeover }) {
+    const [takingOver, setTakingOver] = useState(false);
+    function handleTakeover() {
+        setTakingOver(true);
+        if (requestTakeover())
+            onTakeover();
+        else
+            setTakingOver(false);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "locked-workspace-styles", children: `${UI_STYLES}\n${lockedWorkspaceStyles}` }), _jsxs("aside", { className: "locked-notice", "data-test": "locked-workspace-notice", "aria-live": "polite", children: [_jsx("div", { className: "locked-notice__message", children: "Nudge UI is open in another tab" }), _jsx(Button, { "data-test": "takeover-here", disabled: takingOver, onClick: handleTakeover, children: takingOver ? "Taking over..." : "Take Over Here" })] })] }));
+}

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

@@ -0,0 +1,7 @@
+import type { ReactElement } from "react";
+import type { ChangeRecord } from "../changes/changesLog.js";
+interface Props {
+    change: ChangeRecord;
+}
+export declare function StaleChangeIndicator({ change }: Props): ReactElement | null;
+export {};