nudge-ui 0.2.2 → 0.2.4

package/dist/inspector/canvas/rendererBootstrap.js

@@ -1,10 +1,12 @@
 import { PROTOCOL_VERSION, clearRendererIdentity, getRendererIdentity, isRendererMessageFor, sendToParent, setRendererIdentity, } from "./frameProtocol.js";
+import { wheelPanDelta } from "./wheelPan.js";
 import { handleReplaceStyles, startRendererProjectionDiagnostics } from "./rendererStylesheet.js";
 import { findClosestAnchor, isEligibleNavigation, hasDifferentRoute } from "./linkEligibility.js";
 import { installRendererElementSelector } from "./rendererElementSelector.js";
 import { createFrameThrottle } from "../overlay/frameThrottle.js";
 import { isNudgeUiDev } from "../runtime/devFlag.js";
 import { getNudgeUiRuntimeConfig, subscribeNudgeUiRuntime } from "../runtime/runtimeConfig.js";
+import { APP_INTERACTION_KEY } from "./keyboardShortcuts.js";
 let activeRendererBootstrap = null;
 function ownsRendererBootstrap(owner) {
     return owner.active && activeRendererBootstrap?.owner === owner;
@@ -252,6 +254,8 @@ function installRendererPanProxy(owner) {
     let spaceHeld = false;
     let panning = false;
     let boardGesturesEnabled = false;
+    let boardScrollPans = false;
+    let nativeAppInteraction = false;
     const panMoveUpdate = createFrameThrottle((point) => {
         if (!ownsRendererBootstrap(owner))
             return;
@@ -298,7 +302,9 @@ function installRendererPanProxy(owner) {
         }
         if (event.data.type === "board-gesture-state") {
             boardGesturesEnabled = event.data.enabled;
-            if (!boardGesturesEnabled) {
+            boardScrollPans = event.data.panScroll === true;
+            nativeAppInteraction = event.data.panScroll === false;
+            if (!boardGesturesEnabled || nativeAppInteraction) {
                 spaceHeld = false;
                 endPan();
             }
@@ -306,10 +312,18 @@ function installRendererPanProxy(owner) {
     };
     window.addEventListener("message", onMessage);
     owner.listenerRemovers.push(() => window.removeEventListener("message", onMessage));
+    function sendAppInteractionModifier(held) {
+        const identity = getRendererIdentity();
+        if (!identity)
+            return;
+        sendToParent({ type: "app-interaction-modifier", protocolVersion: PROTOCOL_VERSION, held, ...identity });
+    }
     const onKeyDown = (event) => {
         if (!ownsRendererBootstrap(owner))
             return;
-        if (boardGesturesEnabled && event.code === "Space" && !event.repeat && !isEditableTarget(event.target)) {
+        if (event.code === APP_INTERACTION_KEY && !event.repeat && !isEditableTarget(event.target))
+            sendAppInteractionModifier(true);
+        if (boardGesturesEnabled && !nativeAppInteraction && event.code === "Space" && !event.repeat && !isEditableTarget(event.target)) {
             spaceHeld = true;
             if (getRendererIdentity())
                 event.preventDefault();
@@ -321,6 +335,8 @@ function installRendererPanProxy(owner) {
     const onKeyUp = (event) => {
         if (!ownsRendererBootstrap(owner))
             return;
+        if (event.code === APP_INTERACTION_KEY)
+            sendAppInteractionModifier(false);
         if (event.code === "Space") {
             spaceHeld = false;
             sendSpaceState();
@@ -355,7 +371,7 @@ function installRendererPanProxy(owner) {
     const onPointerDown = (event) => {
         if (!ownsRendererBootstrap(owner))
             return;
-        if (!boardGesturesEnabled || !spaceHeld || event.button !== 0 || isEditableTarget(event.target))
+        if (!boardGesturesEnabled || nativeAppInteraction || !spaceHeld || event.button !== 0 || isEditableTarget(event.target))
             return;
         const identity = getRendererIdentity();
         if (!identity)
@@ -392,6 +408,8 @@ function installRendererPanProxy(owner) {
     const onBlur = () => {
         if (!ownsRendererBootstrap(owner))
             return;
+        if (!window.parent.document.hasFocus())
+            sendAppInteractionModifier(false);
         spaceHeld = false;
         sendSpaceState();
         endPan();
@@ -401,13 +419,23 @@ function installRendererPanProxy(owner) {
     const onWheel = (event) => {
         if (!ownsRendererBootstrap(owner))
             return;
-        if (!boardGesturesEnabled || (!event.ctrlKey && !event.metaKey))
+        const zoom = event.ctrlKey || event.metaKey;
+        if (!boardGesturesEnabled || (!zoom && !boardScrollPans))
             return;
         const identity = getRendererIdentity();
         if (!identity)
             return;
         event.preventDefault();
         event.stopPropagation();
+        if (!zoom) {
+            const delta = wheelPanDelta(event, { width: window.innerWidth, height: window.innerHeight });
+            const message = {
+                type: "wheel-pan", protocolVersion: PROTOCOL_VERSION,
+                deltaX: delta.x, deltaY: delta.y, ...identity,
+            };
+            sendToParent(message);
+            return;
+        }
         const message = {
             type: "zoom",
             protocolVersion: PROTOCOL_VERSION,

package/dist/inspector/canvas/rendererElementSelector.js

@@ -9,7 +9,8 @@ import { resolveSelectionTarget, selectionTargetMode } from "../selection/select
 import { escapeCssString } from "../projection/cssEscapes.js";
 import { APPLICATION_GESTURE_EVENTS, blockApplicationClick, blockApplicationGesture, isInlineEditorTarget, isUserClick, } from "../overlay/clickPolicy.js";
 import { EMPTY_TEXT_PROJECTION_ATTR } from "../projection/textProjection.js";
-import { getSpacingAffordanceAtPoint, toSpacingDescriptor, } from "../overlay/spacingGestures.js";
+import { getSpacingAffordanceAtPoint, getSpacingHoverAtPoint, toSpacingDescriptor, } from "../overlay/spacingGestures.js";
+import { COMMENT_CURSOR, INTERACTION_CURSOR_PROPERTY, rendererCursorValue } from "../ui/customCursors.js";
 const REACT_FIBER_KEY = /^__reactFiber\$/;
 const REACT_INTERNAL_KEY = /^__reactInternalInstance\$/;
 const HOVER_SCROLL_SETTLE_DELAY = 150;
@@ -100,8 +101,29 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     const cidIndex = createCidIndex(document);
     const initialCursor = document.documentElement.style.getPropertyValue("cursor");
     const initialCursorPriority = document.documentElement.style.getPropertyPriority("cursor");
+    const initialInteractionCursor = document.documentElement.style.getPropertyValue(INTERACTION_CURSOR_PROPERTY);
+    const initialInteractionCursorPriority = document.documentElement.style.getPropertyPriority(INTERACTION_CURSOR_PROPERTY);
+    let commentMode = false;
+    let interactionCursor = "design";
+    let commentCursor = COMMENT_CURSOR;
+    let appliedInteractionCursor = rendererCursorValue("design");
     let appliedRootCursor = null;
     let spacingCursor = null;
+    function setInteractionCursor(cursor) {
+        appliedInteractionCursor = rendererCursorValue(cursor, commentCursor);
+        document.documentElement.style.setProperty(INTERACTION_CURSOR_PROPERTY, appliedInteractionCursor);
+    }
+    function restoreInteractionCursor() {
+        if (document.documentElement.style.getPropertyValue(INTERACTION_CURSOR_PROPERTY) !== appliedInteractionCursor)
+            return;
+        if (initialInteractionCursor) {
+            document.documentElement.style.setProperty(INTERACTION_CURSOR_PROPERTY, initialInteractionCursor, initialInteractionCursorPriority);
+        }
+        else {
+            document.documentElement.style.removeProperty(INTERACTION_CURSOR_PROPERTY);
+        }
+    }
+    setInteractionCursor("design");
     function clearSpacingCursor() {
         const active = spacingCursor;
         spacingCursor = null;
@@ -140,7 +162,7 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
             spacingCursor.appliedValue = cursor;
         }
         element.style.setProperty("cursor", cursor, "important");
-        document.documentElement.style.setProperty("cursor", cursor);
+        document.documentElement.style.setProperty("cursor", cursor, "important");
         appliedRootCursor = cursor;
     }
     function reportHover(pending) {
@@ -152,10 +174,16 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
         const selector = buildSelector(element);
         const src = element.getAttribute("data-src") ?? "";
         const rect = clear ? null : element.getBoundingClientRect();
-        const rawSpacing = !clear && pending.point
+        // The handle hit is the only target that starts a drag, so it is the only
+        // one that changes the cursor. The area-wide match is purely visual.
+        const rawSpacing = !commentMode && !clear && pending.point
             ? getSpacingAffordanceAtPoint(document, pending.point.x, pending.point.y)
             : null;
         const spacing = rawSpacing && rawSpacing.element === element ? rawSpacing : null;
+        const rawHoverSpacing = !commentMode && !clear && pending.point
+            ? getSpacingHoverAtPoint(document, pending.point.x, pending.point.y)
+            : null;
+        const hoverSpacing = rawHoverSpacing && rawHoverSpacing.element === element ? rawHoverSpacing : null;
         if (spacing) {
             setSpacingCursor(spacing.element, spacing.cursor);
         }
@@ -182,6 +210,7 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
             borders: rect ? readBorderWidths(element) : null,
             point: pending.point,
             spacing: spacing ? toSpacingDescriptor(spacing) : null,
+            hoverSpacing: hoverSpacing ? toSpacingDescriptor(hoverSpacing) : null,
             ...identity,
         };
         sendToParent(msg);
@@ -292,8 +321,19 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
             updateMeasureState(message.altKey, measurePointerOverPage);
             return;
         }
+        if (message.type === "pan-modifier" && typeof message.spaceHeld === "boolean") {
+            setInteractionCursor(message.spaceHeld ? "drag" : interactionCursor);
+            return;
+        }
         if (message.type !== "inspector-interaction-state" || typeof message.open !== "boolean")
             return;
+        if (typeof message.commentCursor === "string")
+            commentCursor = message.commentCursor;
+        interactionCursor = message.cursor === "comment" ? "comment" : message.cursor === "drag" ? "drag" : "design";
+        commentMode = interactionCursor === "comment";
+        cancelActiveDrag();
+        clearSpacingCursor();
+        setInteractionCursor(interactionCursor);
         const interactionsEnabled = message.interactionsEnabled === undefined
             ? message.open
             : message.interactionsEnabled === true;
@@ -360,7 +400,7 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     trackListener(document, "mousedown", (event) => {
         if (interactionsSuspended)
             return;
-        if (event.button !== 0)
+        if (event.button !== 0 || commentMode)
             return;
         const element = resolveSelectionTarget(event.target, selectionTargetMode(event));
         if (!element)
@@ -559,7 +599,7 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
             sendToParent(msg);
             return;
         }
-        if (!lastSelected)
+        if (!lastSelected || commentMode)
             return;
         const identity = getRendererIdentity();
         if (!identity)
@@ -619,7 +659,7 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
         hoverUpdate.schedule({ element: el, clear: true, point: null });
     }, true);
     trackListener(document, "dblclick", (event) => {
-        if (interactionsSuspended)
+        if (interactionsSuspended || commentMode)
             return;
         const element = resolveSelectionTarget(event.target, selectionTargetMode(event));
         const identity = getRendererIdentity();
@@ -701,5 +741,6 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
         measureAltKey = false;
         document.documentElement.removeAttribute("data-nudge-ui-panel");
         clearSpacingCursor();
+        restoreInteractionCursor();
     };
 }

package/dist/inspector/canvas/rendererStylesheet.js

@@ -8,7 +8,7 @@ import { applyRenderedInstanceProjection, getRenderedInstanceProjectionReports,
 import { applyStructuralProjection, getStructuralProjectionReports, isStructuralChange, subscribeStructuralDiagnostics, } from "../projection/structuralProjection.js";
 import { applyTextContentProjection, getTextProjectionReports, subscribeTextProjectionDiagnostics, } from "../projection/textProjection.js";
 import { isTextContentChangeListValue } from "../changes/types.js";
-import { applyWorkspaceProjection, } from "../projection/workspaceProjection.js";
+import { applyDraftProjection, } from "../projection/draftProjection.js";
 const SHEET_ID = "nudge-ui-styles";
 function replaceRendererCss(css) {
     let sheet = document.getElementById(SHEET_ID);
@@ -208,7 +208,7 @@ export function handleReplaceStyles(msg, projectId, workspaceId, cardId) {
         return false;
     if (msg.revision <= lastAppliedRevision)
         return false;
-    applyWorkspaceProjection(rendererDocumentProjectionAdapter, projectionFromReplaceStylesMessage(msg));
+    applyDraftProjection(rendererDocumentProjectionAdapter, projectionFromReplaceStylesMessage(msg));
     lastStructuralReportRevision = msg.revision;
     lastRenderedInstanceReportRevision = msg.revision;
     lastTextProjectionReportRevision = msg.revision;

package/dist/inspector/canvas/resizeHandleScale.js

@@ -1,4 +1,4 @@
-import { MAX_CAMERA_ZOOM } from "./canvasStore.js";
+import { MAX_CAMERA_ZOOM } from "./viewStore.js";
 import { CANVAS_TOOLBAR_MAX_SCALE } from "./toolbarScale.js";
 /**
  * Keep the resize handle usable while the board is zoomed without allowing

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

@@ -1,46 +1,33 @@
-import { type SerializableChange } from "../changes/codecs.js";
-import { type CanvasMode } from "./canvasStore.js";
-import { type StructuralChange } from "../projection/structuralProjection.js";
+import { type FrameContent } from "./frameContent.js";
+import { type FrameGroup } from "./canvasStore.js";
+import { type CanvasPresentation, type CanvasMode } from "./viewStore.js";
 import { type ClipboardHandoffSnapshot } from "../prompt/clipboardHandoff.js";
-declare const SCHEMA_VERSION = 12;
+declare const SCHEMA_VERSION = 17;
 declare function storageKey(projectId: string): string;
 export interface SerializableCard {
     id: string;
-    url: string;
+    content: FrameContent;
     title: string | null;
+    groupId?: string;
     x: number;
     y: number;
     width: number;
     height: number;
-    comparisonGroupId?: string;
-}
-export interface SerializableComparisonGroup {
-    id: string;
-    label: string;
-    owner: "agent";
-    agentId: string;
-    cardIds: string[];
-    routes: Array<{
-        url: string;
-        title?: string | null;
-        label?: string;
-    }>;
 }
 export interface DurableSession {
     schemaVersion: typeof SCHEMA_VERSION;
     projectId: string;
     mode: CanvasMode;
+    presentation: CanvasPresentation;
+    groups: readonly FrameGroup[];
     inspectUrl: string;
     cards: SerializableCard[];
-    comparisonGroups: SerializableComparisonGroup[];
     camera: {
         x: number;
         y: number;
         zoom: number;
     };
     focusedCardId?: string | null;
-    changes: SerializableChange[];
-    structuralChanges: StructuralChange[];
     clipboardHandoff: ClipboardHandoffSnapshot | null;
 }
 export type { SerializableChange, SerializableComponentChange, SerializableElementChange, SerializableTextContentChange, SerializableTokenChange, SerializableTokenRef, } from "../changes/codecs.js";
@@ -51,6 +38,8 @@ export interface HydrationResult {
 export declare function serializeSession(): DurableSession;
 export declare function persistSession(): boolean;
 export declare function hydrateSession(): HydrationResult;
+/** Clears the active frame's edit draft while preserving canvas geometry and other drafts. */
+export declare function clearSelectedFrameChanges(): void;
 export declare function clearSession(): void;
 export declare function enableAutoSave(): void;
 /**
@@ -59,12 +48,8 @@ export declare function enableAutoSave(): void;
  * refresh or close inside the debounce window still flushes on `beforeunload`.
  */
 export declare function scheduleAutoSave(): void;
-/**
- * Canvas mode/card/camera changes persist immediately (synchronous) so a
- * refresh always restores the workspace, even inside the edit-autosave
- * debounce window. Edit autosave stays coalesced behind the trailing timer.
- */
 export declare function scheduleCanvasSave(): void;
+export declare function flushAutoSave(): void;
 export declare function getRestoreCount(): number;
 export declare function setRestoreCount(count: number): void;
 export declare function clearRestoreCount(): void;