nudge-ui 0.2.0 → 0.2.1

package/dist/inspector/canvas/CanvasCard.js

@@ -1,11 +1,10 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { CANVAS_RENDERER_ATTR } from "./roleDetection.js";
-import { removeCanvasCard, duplicateCard, updateCardTitle, updateCardUrl, resizeCard, setCardPosition, selectCard, getSelectedCardId, useSelectedCardId, useFocusedCardId, useBoardCamera } from "./canvasStore.js";
-import { IconRefresh, IconPlayerPlay, IconCopy, IconArrowsDiagonal } from "@tabler/icons-react";
-import { PROTOCOL_VERSION, isRendererMessageFor, } from "./frameProtocol.js";
+import { removeCanvasCard, updateCardTitle, updateCardUrl, resizeCard, setCardPosition, selectCard, getSelectedCardId, useSelectedCardId, useFocusedCardId, useBoardCamera } from "./canvasStore.js";
+import { IconRefresh, IconArrowsDiagonal, IconCornerLeftDown } from "@tabler/icons-react";
+import { PROTOCOL_VERSION, } from "./frameProtocol.js";
 import { registerCardFrame, registerCardFrameSource, unregisterCardFrame, sendProjectionToCard, invalidateCanvasPreviewDocument, PROJECT_ID, WORKSPACE_ID } from "./projection.js";
-import { IconButton } from "../ui/IconButton.js";
 import { Button } from "../ui/Button.js";
 import { setSelectedElement } from "../selection/selectionStore.js";
 import { clearCanvasStructuralProjectionReports } from "../projection/structuralProjection.js";
@@ -15,11 +14,36 @@ import { getCanvasToolbarScale } from "./toolbarScale.js";
 import { getCanvasResizeHandleScale } from "./resizeHandleScale.js";
 import { disposeBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
 import { releaseDocumentProjection } from "../projection/structuralProjection.js";
-const MIN_CARD_WIDTH = 200;
-const MIN_CARD_HEIGHT = 150;
-export function CanvasCard({ card, onEdit, documentOwner }) {
+import { startClipboardHandoffController } from "../prompt/clipboardHandoff.js";
+import { disposeInlineTextEdit } from "../inline-text/inlineTextEditor.js";
+import { configureNudgeUiRuntime, getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
+import { reconcileRuntimeWithDocumentStylesheets } from "../runtime/documentStylesheetOrder.js";
+import { subscribeCanvasRendererMessages } from "./rendererMessageRouter.js";
+import { SketchFrameOverlay } from "../sketch/SketchFrameOverlay.js";
+import { getCanvasResizeEdges, resizeCanvasRect, } from "./canvasResize.js";
+const RESIZE_HANDLES = [
+    { direction: "top-left", cursor: "nwse-resize", transformOrigin: "left top", label: "Resize card from the top-left corner" },
+    { direction: "top", cursor: "ns-resize", transformOrigin: "center top", label: "Resize card from the top edge" },
+    { direction: "top-right", cursor: "nesw-resize", transformOrigin: "right top", label: "Resize card from the top-right corner" },
+    { direction: "right", cursor: "ew-resize", transformOrigin: "right center", label: "Resize card from the right edge" },
+    { direction: "bottom-right", cursor: "nwse-resize", transformOrigin: "right bottom", label: "Resize card from the bottom-right corner" },
+    { direction: "bottom", cursor: "ns-resize", transformOrigin: "center bottom", label: "Resize card from the bottom edge" },
+    { direction: "bottom-left", cursor: "nesw-resize", transformOrigin: "left bottom", label: "Resize card from the bottom-left corner" },
+    { direction: "left", cursor: "ew-resize", transformOrigin: "left center", label: "Resize card from the left edge" },
+];
+function resizeHandleTransform(direction, scale) {
+    if (direction === "top" || direction === "bottom")
+        return `scale(1, ${scale})`;
+    if (direction === "left" || direction === "right")
+        return `scale(${scale}, 1)`;
+    return `scale(${scale})`;
+}
+export function CanvasCard({ card, presentation = "canvas", presentationCard = true, onShowFocus, documentOwner }) {
     const iframeRef = useRef(null);
+    const initialUrlRef = useRef(card.navigationUrl ?? card.url);
+    const navigationUrlRef = useRef(card.navigationUrl);
     const documentSessionRef = useRef(null);
+    const frameRuntimeRef = useRef(null);
     const [loadState, setLoadState] = useState("loading");
     const [errorMessage, setErrorMessage] = useState(null);
     const camera = useBoardCamera();
@@ -27,12 +51,25 @@ export function CanvasCard({ card, onEdit, documentOwner }) {
     const focusedCardId = useFocusedCardId();
     const isSelected = selectedCardId === card.id;
     const isFocused = focusedCardId === card.id;
+    const isFocusPresentationCard = presentation === "focus" && presentationCard;
     const toolbarScale = getCanvasToolbarScale(camera.zoom);
     const resizeHandleScale = getCanvasResizeHandleScale(camera.zoom);
     const disposeDocumentSession = useCallback(() => {
         documentSessionRef.current?.session.dispose();
         documentSessionRef.current = null;
     }, []);
+    const loadFrame = useCallback((url) => {
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        if (getSelectedCardId() === card.id)
+            setSelectedElement(null);
+        disposeDocumentSession();
+        invalidateCanvasPreviewDocument(card.id);
+        setLoadState("loading");
+        setErrorMessage(null);
+        iframe.setAttribute("src", url ?? iframe.src);
+    }, [card.id, disposeDocumentSession]);
     const bindDocumentSession = useCallback(() => {
         const frameDocument = iframeRef.current?.contentDocument;
         if (!documentOwner || !frameDocument)
@@ -43,6 +80,8 @@ export function CanvasCard({ card, onEdit, documentOwner }) {
         const session = documentOwner.createDocumentSession(frameDocument);
         session.registerCleanup(() => disposeBrowserCssInspection(frameDocument));
         session.registerCleanup(() => releaseDocumentProjection(frameDocument));
+        session.registerCleanup(() => disposeInlineTextEdit("frame-disposed", frameDocument));
+        session.registerCleanup(startClipboardHandoffController(frameDocument));
         documentSessionRef.current = { document: frameDocument, session };
     }, [disposeDocumentSession, documentOwner]);
     useEffect(() => {
@@ -57,27 +96,20 @@ export function CanvasCard({ card, onEdit, documentOwner }) {
         };
     }, [bindDocumentSession, card.id, disposeDocumentSession]);
     function handleReload() {
-        if (iframeRef.current) {
-            if (getSelectedCardId() === card.id)
-                setSelectedElement(null);
-            disposeDocumentSession();
-            invalidateCanvasPreviewDocument(card.id);
-            setLoadState("loading");
-            setErrorMessage(null);
-            const currentSrc = iframeRef.current.src;
-            iframeRef.current.setAttribute("src", currentSrc);
-        }
+        loadFrame();
     }
     function handleRemove() {
         if (getSelectedCardId() === card.id)
             setSelectedElement(null);
         removeCanvasCard(card.id);
     }
-    function handleEdit() {
-        onEdit?.(card);
-    }
-    function handleDuplicate() {
-        duplicateCard(card.id);
+    function updateFrameTitle(title) {
+        if (!title)
+            return;
+        const runtime = getNudgeUiRuntimeConfig();
+        if (runtime.demo === true && (runtime.demoCardLabels?.length ?? 0) > 0)
+            return;
+        updateCardTitle(card.id, title);
     }
     /** The controller half of the handshake: announce workspace identity. */
     function sendParentReady() {
@@ -89,39 +121,44 @@ export function CanvasCard({ card, onEdit, documentOwner }) {
             cardId: card.id,
         }, window.location.origin);
     }
+    function adoptFrameRuntime(runtime) {
+        frameRuntimeRef.current = runtime;
+        if (getSelectedCardId() !== card.id)
+            return;
+        const frameDocument = iframeRef.current?.contentDocument;
+        if (!frameDocument)
+            return;
+        try {
+            configureNudgeUiRuntime(runtime);
+            const configured = getNudgeUiRuntimeConfig();
+            const reconciled = reconcileRuntimeWithDocumentStylesheets(configured, frameDocument);
+            if (reconciled !== configured)
+                configureNudgeUiRuntime(reconciled);
+        }
+        catch {
+            // Ignore malformed same-origin renderer metadata and keep the last valid runtime.
+        }
+    }
     useEffect(() => {
-        function onMessage(event) {
-            if (event.origin !== window.location.origin)
-                return;
-            if (event.source !== iframeRef.current?.contentWindow)
-                return;
-            const msg = event.data;
-            if (!msg || typeof msg !== "object")
+        if (!isSelected || !frameRuntimeRef.current)
+            return;
+        adoptFrameRuntime(frameRuntimeRef.current);
+    }, [isSelected]);
+    useEffect(() => {
+        return subscribeCanvasRendererMessages(({ cardId, message: data }) => {
+            if (cardId !== card.id)
                 return;
             // A renderer whose runtime finished booting after the iframe load event
             // asks for the identity announcement it may have missed.
-            // SAFETY: Renderer messages arrive as unvalidated structured clones, so the discriminant must be read structurally.
-            if (msg.type === "renderer-hello") {
-                // SAFETY: The `type === "renderer-hello"` branch above selects exactly the hello payload shape.
-                const hello = msg;
-                if (hello.protocolVersion !== PROTOCOL_VERSION)
-                    return;
+            if (data.type === "renderer-hello") {
                 sendParentReady();
                 return;
             }
-            if (!isRendererMessageFor(msg, {
-                projectId: PROJECT_ID,
-                workspaceId: WORKSPACE_ID,
-                cardId: card.id,
-            }))
-                return;
-            // SAFETY: isRendererMessageFor validated the frame identity and message shape above.
-            const data = msg;
             if (data.type === "frame-ready") {
+                adoptFrameRuntime(data.runtime);
                 setLoadState("ready");
                 setErrorMessage(null);
-                if (data.title)
-                    updateCardTitle(card.id, data.title);
+                updateFrameTitle(data.title);
                 if (data.url)
                     updateCardUrl(card.id, data.url);
                 if (iframeRef.current) {
@@ -130,9 +167,12 @@ export function CanvasCard({ card, onEdit, documentOwner }) {
                 }
                 return;
             }
+            if (data.type === "frame-runtime") {
+                adoptFrameRuntime(data.runtime);
+                return;
+            }
             if (data.type === "frame-metadata") {
-                if (data.title)
-                    updateCardTitle(card.id, data.title);
+                updateFrameTitle(data.title);
                 if (data.url)
                     updateCardUrl(card.id, data.url);
                 return;
@@ -140,14 +180,15 @@ export function CanvasCard({ card, onEdit, documentOwner }) {
             if (data.type === "frame-error") {
                 setLoadState("error");
                 setErrorMessage(data.message || "Frame failed to load");
-                return;
             }
-        }
-        window.addEventListener("message", onMessage);
-        return () => {
-            window.removeEventListener("message", onMessage);
-        };
+        });
     }, [card.id]);
+    useLayoutEffect(() => {
+        if (!card.navigationUrl || navigationUrlRef.current === card.navigationUrl)
+            return;
+        navigationUrlRef.current = card.navigationUrl;
+        loadFrame(card.navigationUrl);
+    }, [card.navigationUrl, loadFrame]);
     useEffect(() => {
         if (loadState !== "loading")
             return;
@@ -182,6 +223,10 @@ export function CanvasCard({ card, onEdit, documentOwner }) {
     }, [bindDocumentSession, card.id, disposeDocumentSession]);
     const [isDragging, setIsDragging] = useState(false);
     const dragRef = useRef({ startX: 0, startY: 0, cardX: 0, cardY: 0 });
+    const resizeCleanupRef = useRef(null);
+    useEffect(() => {
+        return () => resizeCleanupRef.current?.();
+    }, []);
     const handleToolbarPointerDown = useCallback((e) => {
         // SAFETY: pointer events on the card target are HTMLElements in this DOM context.
         const target = e.target;
@@ -219,57 +264,102 @@ export function CanvasCard({ card, onEdit, documentOwner }) {
             setSelectedElement(null);
         selectCard(card.id);
     }, [card.id]);
-    const handleResizeStart = useCallback((e) => {
+    const handleResizeStart = useCallback((e, direction) => {
         e.stopPropagation();
         e.preventDefault();
+        resizeCleanupRef.current?.();
+        const target = e.currentTarget;
+        const pointerId = e.pointerId;
         const startX = e.clientX;
         const startY = e.clientY;
-        const startWidth = card.width;
-        const startHeight = card.height;
-        // SAFETY: pointerdown targets are HTMLElements in the card DOM.
-        e.target.setPointerCapture(e.pointerId);
+        const start = {
+            x: card.x,
+            y: card.y,
+            width: card.width,
+            height: card.height,
+        };
         function onMove(ev) {
-            const dx = (ev.clientX - startX) / camera.zoom;
-            const dy = (ev.clientY - startY) / camera.zoom;
-            const newWidth = Math.max(MIN_CARD_WIDTH, startWidth + dx);
-            const newHeight = Math.max(MIN_CARD_HEIGHT, startHeight + dy);
-            resizeCard(card.id, newWidth, newHeight);
+            if (ev.pointerId !== pointerId)
+                return;
+            const delta = {
+                x: (ev.clientX - startX) / camera.zoom,
+                y: (ev.clientY - startY) / camera.zoom,
+            };
+            const next = resizeCanvasRect(start, direction, delta);
+            resizeCard(card.id, next.width, next.height, { x: next.x, y: next.y });
         }
-        function onUp() {
+        function cleanup() {
             window.removeEventListener("pointermove", onMove);
             window.removeEventListener("pointerup", onUp);
+            window.removeEventListener("pointercancel", onCancel);
+            target.removeEventListener("lostpointercapture", onLostPointerCapture);
+            if (target.hasPointerCapture?.(pointerId))
+                target.releasePointerCapture(pointerId);
+            if (resizeCleanupRef.current === cleanup)
+                resizeCleanupRef.current = null;
+        }
+        function onUp(ev) {
+            if (ev.pointerId !== pointerId)
+                return;
+            cleanup();
+        }
+        function onCancel(ev) {
+            if (ev.pointerId !== pointerId)
+                return;
+            cleanup();
+        }
+        function onLostPointerCapture(ev) {
+            if (ev.pointerId !== pointerId)
+                return;
+            cleanup();
         }
+        resizeCleanupRef.current = cleanup;
+        // SAFETY: the resize handle is an HTMLDivElement in this DOM context.
+        target.setPointerCapture?.(pointerId);
         window.addEventListener("pointermove", onMove);
         window.addEventListener("pointerup", onUp);
-    }, [card.id, card.width, card.height, camera.zoom]);
-    function handleResizeKeyDown(event) {
-        const step = event.shiftKey ? 40 : 20;
-        if (event.key === "ArrowRight")
-            resizeCard(card.id, card.width + step, card.height);
-        else if (event.key === "ArrowLeft")
-            resizeCard(card.id, Math.max(MIN_CARD_WIDTH, card.width - step), card.height);
-        else if (event.key === "ArrowDown")
-            resizeCard(card.id, card.width, card.height + step);
-        else if (event.key === "ArrowUp")
-            resizeCard(card.id, card.width, Math.max(MIN_CARD_HEIGHT, card.height - step));
-        else
+        window.addEventListener("pointercancel", onCancel);
+        target.addEventListener("lostpointercapture", onLostPointerCapture);
+    }, [card, camera.zoom]);
+    function handleResizeKeyDown(event, direction) {
+        const isArrowKey = event.key === "ArrowRight"
+            || event.key === "ArrowLeft"
+            || event.key === "ArrowDown"
+            || event.key === "ArrowUp";
+        if (!isArrowKey)
             return;
         event.preventDefault();
+        event.stopPropagation();
+        const step = event.shiftKey ? 40 : 20;
+        const delta = {
+            x: event.key === "ArrowRight" ? step : event.key === "ArrowLeft" ? -step : 0,
+            y: event.key === "ArrowDown" ? step : event.key === "ArrowUp" ? -step : 0,
+        };
+        const edges = getCanvasResizeEdges(direction);
+        if ((delta.x !== 0 && edges.horizontal === null) || (delta.y !== 0 && edges.vertical === null))
+            return;
+        const next = resizeCanvasRect(card, direction, delta);
+        resizeCard(card.id, next.width, next.height, { x: next.x, y: next.y });
     }
-    return (_jsxs("div", { className: `canvas-card${isDragging ? " is-dragging" : ""}${isSelected ? " is-selected" : ""}${isFocused ? " is-focused" : ""}`, "data-card-id": card.id, style: {
+    return (_jsxs("div", { className: `canvas-card${isDragging ? " is-dragging" : ""}${isSelected ? " is-selected" : ""}${isFocused ? " is-focused" : ""}${isFocusPresentationCard ? " is-focus-presentation" : ""}${presentationCard ? " is-presentation-card" : ""}`, "data-card-id": card.id, style: {
             position: "absolute",
-            left: card.x,
-            top: card.y,
-            width: card.width,
-            height: card.height,
-        }, onPointerDown: handleCardPointerDown, children: [_jsxs("div", { className: "canvas-card__toolbar", onPointerDown: handleToolbarPointerDown, children: [_jsx("div", { className: "canvas-card__drag-surface", "data-test": `canvas-card-drag-${card.id}`, children: _jsxs("span", { className: "canvas-card__dimensions", "data-test": `canvas-card-dimensions-${card.id}`, style: {
+            visibility: presentation === "focus" && !presentationCard ? "hidden" : undefined,
+            pointerEvents: presentation === "focus" && !presentationCard ? "none" : undefined,
+            left: isFocusPresentationCard ? 0 : card.x,
+            top: isFocusPresentationCard ? 0 : card.y,
+            width: isFocusPresentationCard ? "100%" : card.width,
+            height: isFocusPresentationCard ? "100%" : card.height,
+        }, onPointerDown: presentation === "canvas" ? handleCardPointerDown : undefined, children: [presentation === "canvas" ? _jsx("div", { className: "canvas-card__toolbar", onPointerDown: handleToolbarPointerDown, children: _jsxs("div", { className: "canvas-card__drag-surface", "data-test": `canvas-card-drag-${card.id}`, children: [onShowFocus ? (_jsxs(Button, { title: "Focus", variant: "primary", size: "default", "data-test": `canvas-card-focus-${card.id}`, style: {
                                 transform: `scale(${toolbarScale})`,
                                 transformOrigin: "left bottom",
-                            }, children: [Math.round(card.width), " \u00D7 ", Math.round(card.height), " px"] }) }), _jsxs("div", { className: "canvas-card__actions", style: {
-                            transform: `scale(${toolbarScale})`,
-                            transformOrigin: "right bottom",
-                        }, children: [_jsxs(Button, { variant: "secondary", size: "default", "data-test": `canvas-card-preview-${card.id}`, onClick: handleEdit, children: [_jsx(IconPlayerPlay, { size: 14, stroke: 1.8, "aria-hidden": "true" }), "Page view"] }), _jsx(IconButton, { label: "Duplicate card", variant: "secondary", size: "default", "data-test": `canvas-card-duplicate-${card.id}`, onClick: handleDuplicate, children: _jsx(IconCopy, { size: 14, stroke: 1.8, "aria-hidden": "true" }) }), _jsx(IconButton, { label: "Reload card", variant: "secondary", size: "default", "data-test": `canvas-card-reload-${card.id}`, onClick: handleReload, children: _jsx(IconRefresh, { size: 14, stroke: 1.8, "aria-hidden": "true" }) })] })] }), _jsxs("div", { className: "canvas-card__frame", children: [loadState === "loading" ? (_jsx("div", { className: "canvas-card__loading", "data-test": `canvas-card-loading-${card.id}`, children: "Loading preview..." })) : loadState === "error" ? (_jsxs("div", { className: "canvas-card__error", "data-test": `canvas-card-error-${card.id}`, children: [_jsx("p", { children: errorMessage || "Frame could not be loaded" }), _jsxs("div", { className: "canvas-card__error-actions", children: [_jsx(Button, { size: "compact", variant: "secondary", onClick: handleReload, children: "Retry" }), _jsx(Button, { size: "compact", variant: "danger", onClick: handleRemove, children: "Remove" })] })] })) : null, _jsx("iframe", { ref: iframeRef, className: "canvas-card__iframe", src: card.url, title: card.title || card.url, [CANVAS_RENDERER_ATTR]: "", sandbox: "allow-scripts allow-same-origin allow-forms allow-popups", "data-test": `canvas-card-iframe-${card.id}` })] }), _jsx("div", { className: "canvas-card__resize-handle", "data-test": `canvas-card-resize-${card.id}`, style: {
-                    transform: `scale(${resizeHandleScale})`,
-                    transformOrigin: "right bottom",
-                }, onPointerDown: handleResizeStart, onKeyDown: handleResizeKeyDown, role: "button", "aria-label": "Resize card", tabIndex: 0, children: _jsx(IconArrowsDiagonal, { size: 12, "aria-hidden": "true" }) })] }));
+                            }, onClick: () => onShowFocus(card.id), children: [_jsx(IconCornerLeftDown, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), "Focus"] })) : null, _jsx("span", { className: "canvas-card__dimensions", "data-test": `canvas-card-dimensions-${card.id}`, style: {
+                                transform: `translateX(-50%) scale(${toolbarScale})`,
+                                transformOrigin: "center bottom",
+                            }, children: card.title || `${Math.round(card.width)} × ${Math.round(card.height)} px` })] }) }) : null, _jsxs("div", { className: "canvas-card__frame", children: [loadState === "loading" ? (_jsx("div", { className: "canvas-card__loading", "data-test": `canvas-card-loading-${card.id}`, children: "Loading preview..." })) : loadState === "error" ? (_jsxs("div", { className: "canvas-card__error", "data-test": `canvas-card-error-${card.id}`, children: [_jsx("p", { children: errorMessage || "Frame could not be loaded" }), _jsxs("div", { className: "canvas-card__error-actions", children: [_jsx(Button, { size: "compact", variant: "secondary", onClick: handleReload, children: "Retry" }), _jsx(Button, { size: "compact", variant: "danger", onClick: handleRemove, children: "Remove" })] })] })) : null, _jsx("iframe", { ref: iframeRef, className: "canvas-card__iframe", src: initialUrlRef.current, title: card.title || card.url, [CANVAS_RENDERER_ATTR]: "", sandbox: "allow-scripts allow-same-origin allow-forms allow-popups", "data-test": `canvas-card-iframe-${card.id}` }), _jsx(SketchFrameOverlay, { iframe: iframeRef.current, cardUrl: card.url, ready: loadState === "ready" })] }), presentation === "canvas" ? RESIZE_HANDLES.map((handle) => (_jsx("div", { className: `canvas-card__resize-handle canvas-card__resize-handle--${handle.direction}`, "data-test": `canvas-card-resize-${card.id}${handle.direction === "bottom-right" ? "" : `-${handle.direction}`}`, "data-resize-direction": handle.direction, style: {
+                    // Keep the edge's long axis aligned with the zoomed card. Only
+                    // the thickness needs inverse scaling to remain screen-sized.
+                    transform: resizeHandleTransform(handle.direction, resizeHandleScale),
+                    transformOrigin: handle.transformOrigin,
+                    cursor: handle.cursor,
+                }, onPointerDown: (event) => handleResizeStart(event, handle.direction), onKeyDown: (event) => handleResizeKeyDown(event, handle.direction), role: "button", "aria-label": handle.direction === "bottom-right" ? "Resize card" : handle.label, tabIndex: 0, children: handle.direction === "bottom-right" ? _jsx(IconArrowsDiagonal, { size: 12, "aria-hidden": "true" }) : null }, handle.direction))) : null] }));
 }