nudge-ui 0.2.2 → 0.2.3

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;

package/dist/inspector/canvas/sessionStore.js

@@ -1,19 +1,20 @@
-import { getWorkspaceChanges } from "../changes/workspaceChanges.js";
-import { loadWorkspaceChanges } from "../changes/changesLog.js";
-import { deserializeChange, isSerializableChange, serializeChange, } from "../changes/codecs.js";
-import { getCanvasMode, getCanvasCards, getCanvasComparisonGroups, getFocusedCardId, getBoardCamera, setBoardCamera, hydrateCanvasStore, removeCanvasCard, } from "./canvasStore.js";
+import { isFrameContent } from "./frameContent.js";
+import { clearComments } from "../comments/store.js";
+import { documentTarget, targetFromKey } from "../drafts/model.js";
+import { canEditDraft, getActiveDraftChanges, isDraftLocked } from "../changes/draftChanges.js";
+import { getFrameGroups, isFrameGroup, getCanvasCards, getFocusedCardId, getSelectedCardId, hydrateCanvasStore, removeCanvasCard, } from "./canvasStore.js";
+import { getCanvasMode, getCanvasPresentation, getBoardCamera, setBoardCamera, } from "./viewStore.js";
 import { applyRules } from "../projection/managedStylesheet.js";
-import { clearWorkspace as clearWorkspaceLog } from "../changes/changesLog.js";
+import { clearActiveDraft } from "../changes/changesLog.js";
 import { removeManagedSheet } from "../projection/managedStylesheet.js";
 import { setSelectedElement } from "../selection/selectionStore.js";
 import { canWriteWorkspace } from "./workspaceLease.js";
-import { isStructuralChange, resetStructuralDeleteProjection, } from "../projection/structuralProjection.js";
+import { resetStructuralDeleteProjection, } from "../projection/structuralProjection.js";
 import { projectToAllReadyCards } from "./projection.js";
 import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 import { clearClipboardHandoff, getClipboardHandoffSnapshot, hydrateClipboardHandoff, isClipboardHandoffSnapshot, } from "../prompt/clipboardHandoff.js";
-// v12 is the first durable-session schema after the edit model and preview
-// diagnostic split. Previous session shapes are intentionally incompatible.
-const SCHEMA_VERSION = 12;
+import { activateDraftForCard, clearDrafts, persistDrafts } from "../drafts/store.js";
+const SCHEMA_VERSION = 17;
 const STORAGE_PREFIX = "nudge-ui";
 function projectId() {
     return getNudgeUiRuntimeConfig().projectId;
@@ -21,9 +22,6 @@ function projectId() {
 function isFiniteNumber(value) {
     return typeof value === "number" && Number.isFinite(value);
 }
-function isRecord(value) {
-    return value !== null && typeof value === "object" && !Array.isArray(value);
-}
 function isSameOriginUrl(value) {
     if (typeof value !== "string")
         return false;
@@ -34,95 +32,32 @@ function isSameOriginUrl(value) {
         return false;
     }
 }
-function hasOnlyKeys(value, allowed) {
-    return Object.keys(value).every((key) => allowed.includes(key));
-}
-function isSerializableComparisonGroup(value) {
-    if (!isRecord(value)
-        || !hasOnlyKeys(value, ["id", "label", "owner", "agentId", "cardIds", "routes"])
-        || typeof value.id !== "string"
-        || value.id.length === 0
-        || value.id.length > 256
-        || typeof value.label !== "string"
-        || value.label.length === 0
-        || value.label.length > 160
-        || value.owner !== "agent"
-        || typeof value.agentId !== "string"
-        || value.agentId.length === 0
-        || value.agentId.length > 256
-        || !Array.isArray(value.cardIds)
-        || value.cardIds.length === 0
-        || value.cardIds.length > 64
-        || !Array.isArray(value.routes)
-        || value.routes.length === 0
-        || value.routes.length > 64) {
-        return false;
-    }
-    if (!value.cardIds.every((cardId) => typeof cardId === "string" && cardId.length > 0 && cardId.length <= 256)) {
-        return false;
-    }
-    return value.routes.every((route) => {
-        if (!isRecord(route)
-            || !hasOnlyKeys(route, ["url", "title", "label"])
-            || !isSameOriginUrl(route.url)
-            || (route.title !== undefined && route.title !== null
-                && (typeof route.title !== "string" || route.title.length > 512))
-            || (route.label !== undefined
-                && (typeof route.label !== "string" || route.label.length > 160))) {
-            return false;
-        }
-        return true;
-    });
-}
 function storageKey(projectId) {
     return `${STORAGE_PREFIX}:${projectId}:v${SCHEMA_VERSION}`;
 }
 function buildSession() {
-    const workspace = getWorkspaceChanges();
-    const changes = workspace.changes;
-    const serializableChanges = [];
-    for (const change of changes) {
-        const serialized = serializeChange(change);
-        // serializeChange already fails closed, but re-validate here so a future
-        // serializer skew can never poison the whole durable session.
-        if (serialized && isSerializableChange(serialized))
-            serializableChanges.push(serialized);
-    }
     const cards = getCanvasCards();
-    const comparisonGroups = getCanvasComparisonGroups();
     const camera = getBoardCamera();
     const mode = getCanvasMode();
     return {
         schemaVersion: SCHEMA_VERSION,
         projectId: projectId(),
         mode,
+        presentation: getCanvasPresentation(),
+        groups: getFrameGroups(),
         inspectUrl: window.location.href,
         cards: cards.map((c) => ({
             id: c.id,
-            url: c.url,
+            content: c.content.kind === "route" ? { kind: "route", url: c.content.url } : { ...c.content },
             title: c.title,
+            ...(c.groupId ? { groupId: c.groupId } : {}),
             x: c.x,
             y: c.y,
             width: c.width,
             height: c.height,
-            ...(c.comparisonGroupId ? { comparisonGroupId: c.comparisonGroupId } : {}),
-        })),
-        comparisonGroups: comparisonGroups.map((group) => ({
-            id: group.id,
-            label: group.label,
-            owner: "agent",
-            agentId: group.agentId,
-            cardIds: [...group.cardIds],
-            routes: group.routes.map((route) => ({
-                url: route.url,
-                ...(route.title === undefined ? {} : { title: route.title }),
-                ...(route.label === undefined ? {} : { label: route.label }),
-            })),
         })),
         camera: { x: camera.x, y: camera.y, zoom: camera.zoom },
         focusedCardId: getFocusedCardId(),
-        changes: serializableChanges,
-        structuralChanges: workspace.structuralChanges.map((change) => ({ ...change })),
         clipboardHandoff: getClipboardHandoffSnapshot(),
     };
 }
@@ -142,6 +77,7 @@ function persistSessionUnchecked() {
     if (!projectId())
         return false;
     try {
+        persistDrafts();
         const session = buildSession();
         localStorage.setItem(storageKey(projectId()), JSON.stringify(session));
         return true;
@@ -203,7 +139,7 @@ export function hydrateSession() {
         const candidate = card;
         if (!card || typeof card !== "object" ||
             typeof candidate.id !== "string" ||
-            !isSameOriginUrl(candidate.url) ||
+            !isFrameContent(candidate.content, window.location.origin) ||
             !isFiniteNumber(candidate.x) ||
             !isFiniteNumber(candidate.y) ||
             !isFiniteNumber(candidate.width) ||
@@ -216,70 +152,20 @@ export function hydrateSession() {
         const c = card;
         serializableCards.push({
             id: c.id,
-            url: c.url,
+            content: c.content,
             title: typeof c.title === "string" ? c.title : null,
+            ...(typeof c.groupId === "string" && c.groupId.length <= 256 ? { groupId: c.groupId } : {}),
             x: c.x,
             y: c.y,
             width: c.width,
             height: c.height,
-            ...(typeof c.comparisonGroupId === "string"
-                ? { comparisonGroupId: c.comparisonGroupId }
-                : {}),
         });
     }
     if (new Set(serializableCards.map((card) => card.id)).size !== serializableCards.length) {
         safeDiscard();
         return { restored: false, changeCount: 0 };
     }
-    const comparisonGroupsRaw = s.comparisonGroups;
-    if (!Array.isArray(comparisonGroupsRaw) || comparisonGroupsRaw.length > 128) {
-        safeDiscard();
-        return { restored: false, changeCount: 0 };
-    }
-    const serializableComparisonGroups = [];
-    for (const group of comparisonGroupsRaw) {
-        if (!isSerializableComparisonGroup(group)) {
-            safeDiscard();
-            return { restored: false, changeCount: 0 };
-        }
-        serializableComparisonGroups.push({
-            id: group.id,
-            label: group.label,
-            owner: "agent",
-            agentId: group.agentId,
-            cardIds: [...group.cardIds],
-            routes: group.routes.map((route) => ({ ...route })),
-        });
-    }
-    if (new Set(serializableComparisonGroups.map((group) => group.id)).size
-        !== serializableComparisonGroups.length) {
-        safeDiscard();
-        return { restored: false, changeCount: 0 };
-    }
     const cardsById = new Map(serializableCards.map((card) => [card.id, card]));
-    const groupedCardIds = new Set();
-    for (const group of serializableComparisonGroups) {
-        if (group.cardIds.length !== group.routes.length) {
-            safeDiscard();
-            return { restored: false, changeCount: 0 };
-        }
-        for (const [routeIndex, cardId] of group.cardIds.entries()) {
-            const card = cardsById.get(cardId);
-            const route = group.routes[routeIndex];
-            if (!card || !route || card.comparisonGroupId !== group.id || groupedCardIds.has(cardId)
-                || card.url !== route.url) {
-                safeDiscard();
-                return { restored: false, changeCount: 0 };
-            }
-            groupedCardIds.add(cardId);
-        }
-    }
-    for (const card of serializableCards) {
-        if (card.comparisonGroupId && !serializableComparisonGroups.some((group) => group.id === card.comparisonGroupId)) {
-            safeDiscard();
-            return { restored: false, changeCount: 0 };
-        }
-    }
     const cameraRaw = s.camera;
     if (!cameraRaw || typeof cameraRaw !== "object" ||
         !isFiniteNumber(cameraRaw.x) ||
@@ -288,35 +174,9 @@ export function hydrateSession() {
         safeDiscard();
         return { restored: false, changeCount: 0 };
     }
-    const changesRaw = s.changes;
-    if (!Array.isArray(changesRaw)) {
-        safeDiscard();
-        return { restored: false, changeCount: 0 };
-    }
-    const deserializedChanges = [];
-    const textChangeIds = new Set();
-    for (const c of changesRaw) {
-        if (!isSerializableChange(c)) {
-            safeDiscard();
-            return { restored: false, changeCount: 0 };
-        }
-        if (c.kind === "text-content") {
-            if (textChangeIds.has(c.id)) {
-                safeDiscard();
-                return { restored: false, changeCount: 0 };
-            }
-            textChangeIds.add(c.id);
-        }
-        try {
-            deserializedChanges.push(deserializeChange(c));
-        }
-        catch {
-            safeDiscard();
-            return { restored: false, changeCount: 0 };
-        }
-    }
-    const structuralChanges = s.structuralChanges;
-    if (!Array.isArray(structuralChanges) || !structuralChanges.every(isStructuralChange)) {
+    const presentation = s.presentation ?? "focus";
+    const groups = Array.isArray(s.groups) ? s.groups.filter((group) => group?.kind !== "linked") : s.groups ?? [];
+    if ((presentation !== "focus" && presentation !== "canvas") || !Array.isArray(groups) || !groups.every(isFrameGroup)) {
         safeDiscard();
         return { restored: false, changeCount: 0 };
     }
@@ -339,10 +199,7 @@ export function hydrateSession() {
         safeDiscard();
         return { restored: false, changeCount: 0 };
     }
-    hydrateCanvasStore(s.mode, serializableCards, camera, serializableComparisonGroups, focusedCardId);
-    // Structural intent and instance evidence become visible atomically. The
-    // projection layer preserves structural-first document application order.
-    loadWorkspaceChanges(deserializedChanges, structuralChanges);
+    hydrateCanvasStore(s.mode, serializableCards, camera, focusedCardId, presentation, groups);
     hydrateClipboardHandoff(clipboardHandoff);
     // A different URL means the user intentionally navigated while Inspect was
     // active. Keep the durable edits, but adopt the new route instead of
@@ -350,8 +207,7 @@ export function hydrateSession() {
     // match and restoration remains unchanged.
     if (inspectRouteChanged)
         persistSessionUnchecked();
-    projectToAllReadyCards();
-    return { restored: true, changeCount: deserializedChanges.length + structuralChanges.length };
+    return { restored: true, changeCount: 0 };
 }
 function safeDiscard() {
     try {
@@ -361,7 +217,22 @@ function safeDiscard() {
         // ignore
     }
 }
+/** Clears the active frame's edit draft while preserving canvas geometry and other drafts. */
+export function clearSelectedFrameChanges() {
+    if (!canEditDraft())
+        return;
+    const cardId = getSelectedCardId() ?? getFocusedCardId();
+    if (cardId)
+        activateDraftForCard(cardId);
+    clearComments(targetFromKey(getActiveDraftChanges().draftId) ?? documentTarget(window.location.href));
+    clearActiveDraft();
+    setSelectedElement(null);
+    projectToAllReadyCards();
+    scheduleAutoSave();
+}
 export function clearSession() {
+    if (isDraftLocked())
+        return;
     if (!canWriteWorkspace())
         return;
     try {
@@ -370,8 +241,10 @@ export function clearSession() {
     catch {
         // ignore
     }
-    clearWorkspaceLog();
+    clearComments();
+    clearActiveDraft();
     clearClipboardHandoff();
+    clearDrafts();
     resetStructuralDeleteProjection();
     removeManagedSheet();
     setSelectedElement(null);
@@ -415,27 +288,14 @@ export function scheduleAutoSave() {
             autoSaveDirty = false;
     }, AUTOSAVE_DEBOUNCE_MS);
 }
-/**
- * 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 function scheduleCanvasSave() {
-    if (!autoSaveEnabled)
-        return;
-    if (persistSession())
-        autoSaveDirty = false;
-}
-function flushAutoSave() {
+export function scheduleCanvasSave() { scheduleAutoSave(); }
+export function flushAutoSave() {
     if (autosaveTimer !== null) {
         clearTimeout(autosaveTimer);
         autosaveTimer = null;
     }
     if (!autoSaveDirty)
         return;
-    // Keep the normal lease gate on the unload path. The controller registers
-    // this listener before releaseLease, so a current owner can flush a first
-    // write without allowing a stale tab to overwrite the new owner's session.
     if (persistSession())
         autoSaveDirty = false;
 }

package/dist/inspector/canvas/staleChangeDetector.js

@@ -1,10 +1,12 @@
+import { draftIdForCard } from "../drafts/store.js";
 import { isPreviewableChange, isTokenChange, } from "../changes/changesLog.js";
 import { changeKey } from "../changes/model.js";
 import { beginPreviewAttempt, clearPreviewDiagnostics, getHostPreviewDocument, notifyPreviewDiagnostics, publishPreviewDiagnostic, } from "../changes/previewDiagnostics.js";
-import { getWorkspaceChanges } from "../changes/workspaceChanges.js";
+import { getActiveDraftChanges } from "../changes/draftChanges.js";
 import { getCanvasPreviewDocument, getRegisteredFrames } from "./projection.js";
 import { findCanvasFrameBySource, PROJECT_ID, WORKSPACE_ID } from "./projection.js";
-import { getCanvasCards, getCanvasMode } from "./canvasStore.js";
+import { getCanvasCards } from "./canvasStore.js";
+import { getCanvasMode } from "./viewStore.js";
 import { isRendererMessageFor } from "./frameProtocol.js";
 import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 const VERIFICATION_TIMEOUT_MS = 5000;
@@ -82,6 +84,8 @@ function getPreviewDocuments() {
     const documents = getCanvasMode() === "canvas" ? [] : [getHostPreviewDocument()];
     const frames = getRegisteredFrames();
     for (const card of getCanvasCards()) {
+        if (draftIdForCard(card.id) && draftIdForCard(card.id) !== getActiveDraftChanges().draftId)
+            continue;
         if (frames.has(card.id))
             documents.push(getCanvasPreviewDocument(card.id));
     }
@@ -89,7 +93,7 @@ function getPreviewDocuments() {
 }
 function beginPreviewAttempts() {
     const attempts = new Map();
-    const revision = getWorkspaceChanges().revision;
+    const revision = getActiveDraftChanges().revision;
     for (const document of getPreviewDocuments()) {
         const attempt = beginPreviewAttempt(document, revision);
         if (attempt)
@@ -115,6 +119,8 @@ function gatherMatchEvidence(changes) {
     const frames = getRegisteredFrames();
     const cards = getCanvasCards();
     for (const card of cards) {
+        if (draftIdForCard(card.id) && draftIdForCard(card.id) !== getActiveDraftChanges().draftId)
+            continue;
         const frame = frames.get(card.id);
         if (!frame || !frame.contentWindow)
             continue;

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

@@ -0,0 +1,5 @@
+import { type RefObject } from "react";
+import { type CanvasCard } from "./canvasStore.js";
+import { type CanvasCamera, type CanvasPresentation } from "./viewStore.js";
+/** Animates frame creation and layout changes without delaying direct manipulation. */
+export declare function useCanvasLayoutAnimation(boardRef: RefObject<HTMLDivElement | null>, cards: readonly CanvasCard[], camera: CanvasCamera, presentation: CanvasPresentation): void;