nudge-ui 0.2.2 → 0.2.4

package/dist/inspector/canvas/CanvasCard.js

@@ -1,11 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AgentActivityOverlay } from "./AgentActivityOverlay.js";
+import { contentDocumentUrl, contentNavigationUrl, contentSourceUrl, iterationId } from "./frameContent.js";
+import { refreshHtmlIteration } from "../iterations/coordinator.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { CANVAS_RENDERER_ATTR } from "./roleDetection.js";
-import { removeCanvasCard, updateCardTitle, updateCardUrl, resizeCard, setCardPosition, selectCard, getSelectedCardId, useSelectedCardId, useFocusedCardId, useBoardCamera } from "./canvasStore.js";
-import { IconRefresh, IconArrowsDiagonal, IconCornerLeftDown } from "@tabler/icons-react";
+import { useCanvasCards, getCanvasCardLabel, updateCardUrl, resizeCard, setCardPosition, selectCard, getSelectedCardId, useSelectedCardId, useFocusedCardId, } from "./canvasStore.js";
+import { useBoardCamera } from "./viewStore.js";
+import { IconArrowsDiagonal, IconCopy, IconCornerLeftDown, IconBoltFilled, IconArtboard, IconTrash } from "@tabler/icons-react";
 import { PROTOCOL_VERSION, } from "./frameProtocol.js";
 import { registerCardFrame, registerCardFrameSource, unregisterCardFrame, sendProjectionToCard, invalidateCanvasPreviewDocument, PROJECT_ID, WORKSPACE_ID } from "./projection.js";
 import { Button } from "../ui/Button.js";
+import { IconButton } from "../ui/IconButton.js";
+import { Tooltip } from "../ui/Tooltip.js";
 import { setSelectedElement } from "../selection/selectionStore.js";
 import { clearCanvasStructuralProjectionReports } from "../projection/structuralProjection.js";
 import { clearCanvasRenderedInstanceProjectionReports } from "../projection/renderedInstance.js";
@@ -15,12 +21,17 @@ import { getCanvasResizeHandleScale } from "./resizeHandleScale.js";
 import { disposeBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
 import { releaseDocumentProjection } from "../projection/structuralProjection.js";
 import { startClipboardHandoffController } from "../prompt/clipboardHandoff.js";
-import { disposeInlineTextEdit } from "../inline-text/inlineTextEditor.js";
+import { disposeInlineTextEdit, isInlineTextEditingActive } from "../inline-text/inlineTextEditor.js";
 import { configureNudgeUiRuntime, getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
+import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { reconcileRuntimeWithDocumentStylesheets } from "../runtime/documentStylesheetOrder.js";
 import { subscribeCanvasRendererMessages } from "./rendererMessageRouter.js";
 import { SketchFrameOverlay } from "../sketch/SketchFrameOverlay.js";
+import { installFrameScrollbarStyles } from "./frameScrollbarStyles.js";
 import { getCanvasResizeEdges, resizeCanvasRect, } from "./canvasResize.js";
+import { getDraftContentsForCard } from "../drafts/store.js";
+import { removeFrame } from "../workspace/commands.js";
+import { artifactDocumentUrl } from "../iterations/client.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" },
@@ -38,15 +49,23 @@ function resizeHandleTransform(direction, scale) {
         return `scale(${scale}, 1)`;
     return `scale(${scale})`;
 }
-export function CanvasCard({ card, presentation = "canvas", presentationCard = true, onShowFocus, documentOwner }) {
+export function CanvasCard({ card, presentation = "canvas", presentationCard = true, linkedToActive = false, onShowFocus, onDuplicate, onCreateIteration, documentOwner }) {
     const iframeRef = useRef(null);
-    const initialUrlRef = useRef(card.navigationUrl ?? card.url);
-    const navigationUrlRef = useRef(card.navigationUrl);
+    const initialUrlRef = useRef(contentNavigationUrl(card.content) ?? contentSourceUrl(card.content));
+    const navigationUrlRef = useRef(contentNavigationUrl(card.content));
     const documentSessionRef = useRef(null);
     const frameRuntimeRef = useRef(null);
     const [loadState, setLoadState] = useState("loading");
     const [errorMessage, setErrorMessage] = useState(null);
+    const [creatingIteration, setCreatingIteration] = useState(false);
+    const [iterationError, setIterationError] = useState(null);
     const camera = useBoardCamera();
+    const runtimeConfig = useNudgeUiRuntimeConfig();
+    const canvasCards = useCanvasCards();
+    const canRemove = canvasCards.length > 1;
+    const frameLabel = runtimeConfig.demo === true && runtimeConfig.demoCardLabels?.length && card.title
+        ? card.title
+        : getCanvasCardLabel(card, canvasCards);
     const selectedCardId = useSelectedCardId();
     const focusedCardId = useFocusedCardId();
     const isSelected = selectedCardId === card.id;
@@ -82,6 +101,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         session.registerCleanup(() => releaseDocumentProjection(frameDocument));
         session.registerCleanup(() => disposeInlineTextEdit("frame-disposed", frameDocument));
         session.registerCleanup(startClipboardHandoffController(frameDocument));
+        session.registerCleanup(installFrameScrollbarStyles(frameDocument));
         documentSessionRef.current = { document: frameDocument, session };
     }, [disposeDocumentSession, documentOwner]);
     useEffect(() => {
@@ -94,22 +114,59 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
             disposeDocumentSession();
             unregisterCardFrame(card.id);
         };
-    }, [bindDocumentSession, card.id, disposeDocumentSession]);
+    }, [bindDocumentSession, card.id, iterationId(card.content), disposeDocumentSession]);
+    useEffect(() => {
+        if (card.content.kind !== "iteration" || loadState !== "ready")
+            return;
+        const artifactId = card.content.artifactId;
+        let active = true;
+        let checking = false;
+        let reloadPending = false;
+        const timer = window.setInterval(() => {
+            const workspace = getDraftContentsForCard(card.id);
+            // Pending inspector edits still project over preview.html. Do not replace
+            // that base until they have been saved and handed off.
+            if (checking || isInlineTextEditingActive() || workspace?.changes.length || workspace?.structuralChanges.length)
+                return;
+            checking = true;
+            const frame = iframeRef.current;
+            if (!frame) {
+                checking = false;
+                return;
+            }
+            void refreshHtmlIteration(card.id, artifactId, frame).then((changed) => {
+                reloadPending ||= changed;
+                const latest = getDraftContentsForCard(card.id);
+                if (active && reloadPending && !isInlineTextEditingActive() && !latest?.changes.length && !latest?.structuralChanges.length) {
+                    reloadPending = false;
+                    loadFrame(`${artifactDocumentUrl(artifactId)}?revision=${Date.now()}`);
+                }
+            }).catch(() => undefined).finally(() => { checking = false; });
+        }, 1500);
+        return () => { active = false; window.clearInterval(timer); };
+    }, [iterationId(card.content), card.id, loadFrame, loadState]);
     function handleReload() {
         loadFrame();
     }
     function handleRemove() {
         if (getSelectedCardId() === card.id)
             setSelectedElement(null);
-        removeCanvasCard(card.id);
+        removeFrame(card.id);
     }
-    function updateFrameTitle(title) {
-        if (!title)
-            return;
-        const runtime = getNudgeUiRuntimeConfig();
-        if (runtime.demo === true && (runtime.demoCardLabels?.length ?? 0) > 0)
+    async function handleIteration(position) {
+        if (creatingIteration || !onCreateIteration || loadState !== "ready")
             return;
-        updateCardTitle(card.id, title);
+        setCreatingIteration(true);
+        setIterationError(null);
+        try {
+            return await onCreateIteration(card.id, position);
+        }
+        catch (error) {
+            setIterationError(error instanceof Error ? error.message : "The iteration could not be created.");
+        }
+        finally {
+            setCreatingIteration(false);
+        }
     }
     /** The controller half of the handshake: announce workspace identity. */
     function sendParentReady() {
@@ -158,8 +215,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
                 adoptFrameRuntime(data.runtime);
                 setLoadState("ready");
                 setErrorMessage(null);
-                updateFrameTitle(data.title);
-                if (data.url)
+                if (data.url && !iterationId(card.content))
                     updateCardUrl(card.id, data.url);
                 if (iframeRef.current) {
                     registerCardFrame(card.id, iframeRef.current);
@@ -172,8 +228,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
                 return;
             }
             if (data.type === "frame-metadata") {
-                updateFrameTitle(data.title);
-                if (data.url)
+                if (data.url && !iterationId(card.content))
                     updateCardUrl(card.id, data.url);
                 return;
             }
@@ -182,13 +237,13 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
                 setErrorMessage(data.message || "Frame failed to load");
             }
         });
-    }, [card.id]);
+    }, [card.id, iterationId(card.content)]);
     useLayoutEffect(() => {
-        if (!card.navigationUrl || navigationUrlRef.current === card.navigationUrl)
+        if (!contentNavigationUrl(card.content) || navigationUrlRef.current === contentNavigationUrl(card.content))
             return;
-        navigationUrlRef.current = card.navigationUrl;
-        loadFrame(card.navigationUrl);
-    }, [card.navigationUrl, loadFrame]);
+        navigationUrlRef.current = contentNavigationUrl(card.content);
+        loadFrame(contentNavigationUrl(card.content));
+    }, [contentNavigationUrl(card.content), loadFrame]);
     useEffect(() => {
         if (loadState !== "loading")
             return;
@@ -220,12 +275,13 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         }
         iframe.addEventListener("load", onLoad);
         return () => iframe.removeEventListener("load", onLoad);
-    }, [bindDocumentSession, card.id, disposeDocumentSession]);
+    }, [bindDocumentSession, card.id, iterationId(card.content), disposeDocumentSession]);
     const [isDragging, setIsDragging] = useState(false);
     const dragRef = useRef({ startX: 0, startY: 0, cardX: 0, cardY: 0 });
+    const dragCleanupRef = useRef(null);
     const resizeCleanupRef = useRef(null);
     useEffect(() => {
-        return () => resizeCleanupRef.current?.();
+        return () => { resizeCleanupRef.current?.(); dragCleanupRef.current?.(); };
     }, []);
     const handleToolbarPointerDown = useCallback((e) => {
         // SAFETY: pointer events on the card target are HTMLElements in this DOM context.
@@ -237,6 +293,12 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         selectCard(card.id);
         e.stopPropagation();
         e.preventDefault();
+        const iterationDrag = e.altKey && !!onCreateIteration && loadState === "ready" && !creatingIteration;
+        let moved = false;
+        let iterationId;
+        let creationStarted = false;
+        let cancelled = false;
+        let position = { x: card.x, y: card.y };
         dragRef.current = {
             startX: e.clientX,
             startY: e.clientY,
@@ -249,16 +311,56 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         function onMove(ev) {
             const dx = (ev.clientX - dragRef.current.startX) / camera.zoom;
             const dy = (ev.clientY - dragRef.current.startY) / camera.zoom;
-            setCardPosition(card.id, dragRef.current.cardX + dx, dragRef.current.cardY + dy);
+            moved ||= Math.hypot(ev.clientX - dragRef.current.startX, ev.clientY - dragRef.current.startY) >= 6;
+            position = { x: dragRef.current.cardX + dx, y: dragRef.current.cardY + dy };
+            if (iterationDrag) {
+                if (iterationId)
+                    setCardPosition(iterationId, position.x, position.y);
+                else if (moved && !creationStarted) {
+                    creationStarted = true;
+                    void handleIteration(position).then((id) => {
+                        if (!id)
+                            return;
+                        iterationId = id;
+                        if (cancelled) {
+                            removeFrame(id, { undoable: false });
+                            selectCard(card.id);
+                        }
+                        else
+                            setCardPosition(id, position.x, position.y);
+                    });
+                }
+            }
+            else
+                setCardPosition(card.id, position.x, position.y);
         }
-        function onUp() {
-            setIsDragging(false);
+        function cleanup() {
             window.removeEventListener("pointermove", onMove);
             window.removeEventListener("pointerup", onUp);
+            window.removeEventListener("pointercancel", onCancel);
+            dragCleanupRef.current = null;
         }
+        function onCancel() {
+            cleanup();
+            setIsDragging(false);
+            cancelled = true;
+            if (iterationId) {
+                removeFrame(iterationId, { undoable: false });
+                selectCard(card.id);
+            }
+        }
+        function onUp() {
+            cleanup();
+            setIsDragging(false);
+            if (iterationId)
+                setCardPosition(iterationId, position.x, position.y);
+        }
+        dragCleanupRef.current?.();
+        dragCleanupRef.current = onCancel;
         window.addEventListener("pointermove", onMove);
         window.addEventListener("pointerup", onUp);
-    }, [card.id, card.x, card.y, camera.zoom]);
+        window.addEventListener("pointercancel", onCancel);
+    }, [card.id, card.x, card.y, camera.zoom, onCreateIteration, loadState, creatingIteration]);
     const handleCardPointerDown = useCallback(() => {
         if (getSelectedCardId() !== card.id)
             setSelectedElement(null);
@@ -341,7 +443,8 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         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" : ""}${isFocusPresentationCard ? " is-focus-presentation" : ""}${presentationCard ? " is-presentation-card" : ""}`, "data-card-id": card.id, style: {
+    return (_jsxs("div", { className: `canvas-card${linkedToActive ? " is-linked" : ""}${isDragging ? " is-dragging" : ""}${isSelected ? " is-selected" : ""}${isFocused ? " is-focused" : ""}${isFocusPresentationCard ? " is-focus-presentation" : ""}${presentationCard ? " is-presentation-card" : ""}`, "data-card-id": card.id, tabIndex: presentation === "canvas" ? 0 : undefined, role: "group", "aria-label": `Frame: ${frameLabel}`, style: {
+            "--canvas-toolbar-scale": toolbarScale,
             position: "absolute",
             visibility: presentation === "focus" && !presentationCard ? "hidden" : undefined,
             pointerEvents: presentation === "focus" && !presentationCard ? "none" : undefined,
@@ -349,13 +452,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
             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",
-                            }, 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: {
+        }, onPointerDown: presentation === "canvas" ? handleCardPointerDown : undefined, children: [presentation === "canvas" ? _jsx(_Fragment, { children: _jsxs("div", { className: "canvas-card__header", style: { bottom: "100%", minHeight: `calc(var(--control-height-large) * ${toolbarScale})` }, children: [_jsxs("div", { className: "canvas-card__drag-surface", style: { minHeight: `calc(var(--control-height-large) * ${toolbarScale})` }, "data-test": `canvas-card-drag-${card.id}`, onPointerDown: handleToolbarPointerDown, children: [_jsx("div", { className: "canvas-card__identity", style: { zoom: toolbarScale }, children: _jsxs("span", { className: "canvas-card__dimensions", "data-test": `canvas-card-dimensions-${card.id}`, children: [!iterationId(card.content) ? (_jsx(Tooltip, { content: "Live view", children: _jsx("span", { className: "canvas-card__live-badge", "aria-label": "Live view", "data-test": `canvas-card-live-${card.id}`, children: _jsx(IconBoltFilled, { size: 12, "aria-hidden": "true" }) }) })) : (_jsx(Tooltip, { content: "HTML only", children: _jsx("span", { className: "canvas-card__iteration-badge", "aria-label": "HTML only", "data-test": `canvas-card-iteration-badge-${card.id}`, children: _jsx(IconArtboard, { size: 14, "aria-hidden": "true" }) }) })), _jsx("span", { className: "canvas-card__title", children: frameLabel })] }) }), iterationError ? _jsx("span", { className: "canvas-card__iteration-error", role: "status", children: iterationError }) : null] }), _jsx("div", { className: "canvas-card__floating-toolbar", "data-busy": creatingIteration ? "true" : undefined, onPointerDown: (event) => event.stopPropagation(), children: _jsxs("div", { className: "canvas-toolbar canvas-card__actions", style: { zoom: toolbarScale }, role: "toolbar", "aria-label": "Frame actions", "aria-busy": creatingIteration, "data-test": `canvas-card-actions-${card.id}`, children: [onShowFocus ? (_jsx(Tooltip, { content: "Open this frame in focus view", children: _jsxs(Button, { variant: "quiet", size: "default", "data-test": `canvas-card-focus-${card.id}`, onClick: () => onShowFocus(card.id), children: [_jsx(IconCornerLeftDown, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), "Focus"] }) })) : null, onDuplicate && !iterationId(card.content) ? (_jsx(Tooltip, { content: "Create a linked copy of this frame", children: _jsxs(Button, { variant: "quiet", size: "default", "data-test": `canvas-card-duplicate-${card.id}`, onClick: () => onDuplicate(card.id), children: [_jsx(IconCopy, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), "Duplicate"] }) })) : null, onCreateIteration ? (_jsx(Tooltip, { content: "Unlinked HTML version", stableTrigger: true, children: _jsxs(Button, { variant: "quiet", size: "default", "data-test": `canvas-card-create-iteration-${card.id}`, disabled: creatingIteration || loadState !== "ready", onClick: () => void handleIteration(), children: [_jsx(IconArtboard, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), creatingIteration ? "Creating…" : "Iteration"] }) })) : null, _jsx("div", { className: "canvas-toolbar__divider", "aria-hidden": "true" }), _jsx(Tooltip, { content: canRemove ? "Delete frame" : "Keep at least one frame on the canvas", children: _jsx(IconButton, { variant: "quiet", size: "default", label: "Delete frame", "data-test": `canvas-card-delete-${card.id}`, disabled: !canRemove, onClick: handleRemove, children: _jsx(IconTrash, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) })] }) })] }) }) : 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: card.content.kind === "iteration" ? contentDocumentUrl(card.content) : initialUrlRef.current, title: frameLabel, [CANVAS_RENDERER_ATTR]: "", sandbox: "allow-scripts allow-same-origin allow-forms allow-popups", "data-test": `canvas-card-iframe-${card.id}` }, iterationId(card.content) ?? "live"), _jsx(AgentActivityOverlay, { cardId: card.id, content: card.content, iframe: loadState === "ready" ? iframeRef.current : null }), _jsx(SketchFrameOverlay, { cardId: card.id, iframe: iframeRef.current, cardUrl: contentSourceUrl(card.content), artifactId: iterationId(card.content), 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),