nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/canvas/rendererElementSelector.js

@@ -9,8 +9,9 @@ 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, getSpacingHoverAtPoint, toSpacingDescriptor, } from "../overlay/spacingGestures.js";
+import { getElementSpacingAtPoint, getElementSpacingHandleAtPoint, toSpacingDescriptor, } from "../overlay/spacingGestures.js";
 import { COMMENT_CURSOR, INTERACTION_CURSOR_PROPERTY, rendererCursorValue } from "../ui/customCursors.js";
+import { isInspectorUiEvent, isPageSurface } from "./pageSurface.js";
 const REACT_FIBER_KEY = /^__reactFiber\$/;
 const REACT_INTERNAL_KEY = /^__reactInternalInstance\$/;
 const HOVER_SCROLL_SETTLE_DELAY = 150;
@@ -94,7 +95,11 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     let suppressHoverDuringSpacingDrag = false;
     let lastHoverPoint = null;
     function trackListener(target, type, listener, options) {
-        const eventListener = (event) => listener(event);
+        const eventListener = (event) => {
+            if (isInspectorUiEvent(event))
+                return;
+            listener(event);
+        };
         target.addEventListener(type, eventListener, options);
         listenerCleanup.push(() => target.removeEventListener(type, eventListener, options));
     }
@@ -166,24 +171,22 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
         appliedRootCursor = cursor;
     }
     function reportHover(pending) {
-        const { element, clear } = pending;
+        const { clear } = pending;
         const identity = getRendererIdentity();
         if (!identity)
             return;
+        // Only the handle hit starts a drag and changes the cursor; the area-wide match is purely visual.
+        const elementSpacing = !commentMode && !clear && pending.point
+            ? getElementSpacingAtPoint(document, pending.element, pending.point.x, pending.point.y)
+            : null;
+        // A margin belongs to a child of the hovered element; hovering it reports that child.
+        const element = elementSpacing?.handle?.element ?? elementSpacing?.area?.element ?? pending.element;
+        const spacing = elementSpacing?.handle?.element === element ? elementSpacing.handle : null;
+        const hoverSpacing = elementSpacing?.area?.element === element ? elementSpacing.area : null;
         const cid = element.getAttribute("data-cid");
         const selector = buildSelector(element);
         const src = element.getAttribute("data-src") ?? "";
         const rect = clear ? null : element.getBoundingClientRect();
-        // 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);
         }
@@ -277,7 +280,8 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
         if (interactionsSuspended)
             return;
         updateMeasureState(event.altKey, true);
-        if (suppressHoverDuringSpacingDrag)
+        // Like mousemove, a pressed pointer reports drag moves, not hovers.
+        if (suppressHoverDuringSpacingDrag || pendingDrag)
             return;
         const target = event.target;
         if (!(target instanceof Element))
@@ -293,6 +297,8 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     trackListener(window, "scroll", suppressHoverDuringScroll, true);
     let pendingDrag = null;
     let dragging = false;
+    // The browser clicks the common ancestor after a drag; that click must not reselect the ancestor.
+    let suppressClickAfterDrag = false;
     let lastDragPoint = null;
     let lastSelected = null;
     trackListener(window, "nudge-ui:open", () => {
@@ -405,19 +411,15 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
         const element = resolveSelectionTarget(event.target, selectionTargetMode(event));
         if (!element)
             return;
-        const spacingAffordance = getSpacingAffordanceAtPoint(document, event.clientX, event.clientY);
-        const spacing = spacingAffordance?.element === element
-            ? toSpacingDescriptor(spacingAffordance)
-            : null;
+        const spacingAffordance = getElementSpacingHandleAtPoint(document, element, event.clientX, event.clientY);
+        const spacing = spacingAffordance ? toSpacingDescriptor(spacingAffordance) : null;
         if (spacing) {
             suppressHoverDuringSpacingDrag = true;
             hoverUpdate.cancel();
             lastHoverPoint = null;
         }
         const identity = getRendererIdentity();
-        // A spacing drag owns the pointer gesture. Do not start an inline-text
-        // attempt for the same down event; padding and gaps are intentionally not
-        // editable text targets.
+        // A spacing drag owns the gesture; padding and gaps are not editable text targets.
         if (identity && !spacing) {
             const emptyProjectionId = event.target instanceof Element
                 ? event.target.closest(`[${EMPTY_TEXT_PROJECTION_ATTR}]`)?.getAttribute(EMPTY_TEXT_PROJECTION_ATTR) ?? undefined
@@ -436,9 +438,10 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
             };
             sendToParent(message);
         }
-        lastSelected = element;
+        const owner = spacingAffordance?.element ?? element;
+        lastSelected = owner;
         pendingDrag = {
-            element,
+            element: owner,
             point: { x: event.clientX, y: event.clientY },
             spacing,
         };
@@ -496,6 +499,8 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     function finishDrag(event) {
         dragMoveUpdate.cancel();
         if (dragging) {
+            suppressClickAfterDrag = true;
+            window.setTimeout(() => { suppressClickAfterDrag = false; }, 0);
             event.preventDefault();
             const point = { x: event.clientX, y: event.clientY };
             lastDragPoint = point;
@@ -507,6 +512,9 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     }
     trackListener(document, "mouseup", finishDrag, true);
     function forwardKeyboardShortcut(event, phase) {
+        // The controller's own window listeners already see page-surface keys.
+        if (isPageSurface())
+            return false;
         const code = isKeyboardShortcutCode(event.code) ? event.code : null;
         if (!code)
             return false;
@@ -537,9 +545,7 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
         sendToParent(message);
         return phase === "keydown";
     }
-    // Global tool shortcuts need to run before application capture handlers on
-    // the iframe document. A page-level window handler can otherwise stop the
-    // event before it reaches the document listener.
+    // Must run before application capture handlers on the iframe document, which can stop the event.
     trackListener(window, "keydown", (event) => {
         if (isEditableEvent(event))
             return;
@@ -684,11 +690,15 @@ export function installRendererElementSelector(acceptsClick = isUserClick) {
     trackListener(document, "click", (event) => {
         if (interactionsSuspended || !acceptsClick(event))
             return;
+        if (suppressClickAfterDrag) {
+            suppressClickAfterDrag = false;
+            blockApplicationClick(event);
+            return;
+        }
         const target = event.target;
         if (!(target instanceof Element))
             return;
-        // Design-tool clicks are editing gestures and must not reach the
-        // rendered application; the Select tool is how the app receives them.
+        // Design-tool clicks are editing gestures and must not reach the rendered application.
         const el = resolveSelectionTarget(target, selectionTargetMode(event));
         if (!el) {
             blockApplicationClick(event);

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

@@ -1,11 +1,9 @@
-import { type FrameIdentity, type FrameProtocolMessage } from "./frameProtocol.js";
+import { type RendererToControllerMessage } from "./frameProtocol.js";
+import { type FrameConnection } from "./frameConnection.js";
 export interface CanvasRendererMessage {
-    cardId: string;
-    iframe: HTMLIFrameElement;
-    identity: FrameIdentity;
-    message: FrameProtocolMessage;
+    frame: FrameConnection;
+    message: RendererToControllerMessage;
 }
 type CanvasRendererMessageListener = (event: CanvasRendererMessage) => void;
-/** Subscribes to same-origin messages from registered Canvas renderer frames. */
 export declare function subscribeCanvasRendererMessages(listener: CanvasRendererMessageListener): () => void;
 export {};

package/dist/inspector/canvas/rendererMessageRouter.js

@@ -1,36 +1,31 @@
-import { isRendererMessageFor, PROTOCOL_VERSION, } from "./frameProtocol.js";
-import { findCanvasFrameBySource, PROJECT_ID, WORKSPACE_ID } from "./projection.js";
+import { isRendererMessageFor, isRendererMessageType, PROTOCOL_VERSION, } from "./frameProtocol.js";
+import { connectFrame } from "./frameConnection.js";
+import { findCanvasFrameBySource } from "./projection.js";
 const listeners = new Set();
 function routeRendererMessage(event) {
     if (event.origin !== window.location.origin || !event.data || typeof event.data !== "object")
         return;
-    const frame = findCanvasFrameBySource(event.source);
-    if (!frame)
+    const source = findCanvasFrameBySource(event.source);
+    if (!source)
         return;
-    const identity = {
-        projectId: PROJECT_ID,
-        workspaceId: WORKSPACE_ID,
-        cardId: frame.cardId,
-    };
+    const frame = connectFrame(source.cardId, source.iframe);
     // SAFETY: The object guard above makes the optional discriminator fields safe to inspect.
     const candidate = event.data;
+    if (!isRendererMessageType(candidate.type))
+        return;
     if (candidate.type === "renderer-hello") {
         if (candidate.protocolVersion !== PROTOCOL_VERSION)
             return;
     }
-    else if (!isRendererMessageFor(event.data, identity)) {
+    else if (!isRendererMessageFor(event.data, frame.identity)) {
         return;
     }
-    const routed = {
-        ...frame,
-        identity,
-        // SAFETY: Subscribers narrow the discriminated protocol union before reading message-specific fields.
-        message: event.data,
-    };
+    // SAFETY: The type is a known renderer message; subscribers narrow it and
+    // apply the strict per-message schema before trusting message-specific fields.
+    const routed = { frame, message: event.data };
     for (const listener of listeners)
         listener(routed);
 }
-/** Subscribes to same-origin messages from registered Canvas renderer frames. */
 export function subscribeCanvasRendererMessages(listener) {
     if (listeners.size === 0)
         window.addEventListener("message", routeRendererMessage);

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

@@ -1,2 +1,4 @@
 import type { ElementClickMessage } from "./frameProtocol.js";
-export declare function handleElementClick(msg: ElementClickMessage, iframe: HTMLIFrameElement, cardId: string): void;
+import type { FrameConnection } from "./frameConnection.js";
+/** Selects the exact DOM node the user clicked. Falls back to the card when that node is gone. */
+export declare function handleElementClick(msg: ElementClickMessage, frame: FrameConnection): void;

package/dist/inspector/canvas/rendererSelectionProxy.js

@@ -1,44 +1,12 @@
 import { getSelectedElements, setSelectedElement, toggleSelectedElement } from "../selection/selectionStore.js";
 import { selectCard } from "./canvasStore.js";
-import { RENDERER_ELEMENT_ID_ATTR } from "./rendererCidIndex.js";
 import { inspectComponentTargets } from "../componentSemantics/index.js";
-function isHtmlElementInDocument(node, doc) {
-    const frameWindow = doc.defaultView;
-    return frameWindow !== null && node instanceof frameWindow.HTMLElement;
-}
-/**
- * Resolve the exact DOM element inside a card's iframe that matches an
- * element-click message. The renderer (running inside the iframe) tells us
- * the clicked element's renderer-owned `elementId`; we re-find the element by
- * that stable data attribute so that the parent app can mutate the same
- * physical DOM node the user clicked.
- *
- * The resolution uses a scoped ID query and never depends on document order.
- *
- * If the exact renderer-owned node no longer exists, fail closed instead of
- * binding the copied component metadata to an unrelated DOM node.
- */
-function findClickedElement(doc, elementId, cid, src) {
-    if (!doc)
-        return null;
-    if (!/^r\d+$/.test(elementId))
-        return null;
-    const candidates = doc.querySelectorAll(`[${RENDERER_ELEMENT_ID_ATTR}="${elementId}"]`);
-    if (candidates.length !== 1)
-        return null;
-    const candidate = candidates[0] ?? null;
-    if (!candidate
-        || candidate.getAttribute("data-cid") !== cid
-        || (candidate.getAttribute("data-src") ?? "") !== src)
-        return null;
-    return isHtmlElementInDocument(candidate, doc) ? candidate : null;
-}
-export function handleElementClick(msg, iframe, cardId) {
-    const doc = iframe.contentDocument;
-    const el = findClickedElement(doc, msg.elementId, msg.cid, msg.src);
+/** Selects the exact DOM node the user clicked. Falls back to the card when that node is gone. */
+export function handleElementClick(msg, frame) {
+    const el = frame.element(msg);
     if (!el) {
         setSelectedElement(null);
-        selectCard(cardId);
+        selectCard(frame.cardId);
         return;
     }
     const componentTargets = inspectComponentTargets(el);
@@ -52,14 +20,13 @@ export function handleElementClick(msg, iframe, cardId) {
         domElement: el,
         componentTargets,
     };
-    // setSelectedElement must run before any side effect that could reload the
-    // host page, otherwise the selection would be discarded by the unload.
+    // Must run before any side effect that could reload the host page, which would drop the selection.
     const current = getSelectedElements();
-    if (msg.additive && current.length > 0 && current.every((candidate) => candidate.domElement.ownerDocument === doc)) {
+    if (msg.additive && current.length > 0 && current.every((candidate) => candidate.domElement.ownerDocument === el.ownerDocument)) {
         toggleSelectedElement(selected);
     }
     else {
         setSelectedElement(selected);
     }
-    selectCard(cardId);
+    selectCard(frame.cardId);
 }

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

@@ -1,5 +1,4 @@
 import { type ReplaceStylesMessage } from "./frameProtocol.js";
-/** Installs renderer diagnostics only after the dev-only renderer bootstrap. */
 export declare function startRendererProjectionDiagnostics(): () => void;
 export declare function getLastAppliedRevision(): number;
 export declare function resetRendererRevision(): void;

package/dist/inspector/canvas/rendererStylesheet.js

@@ -9,9 +9,24 @@ import { applyStructuralProjection, getStructuralProjectionReports, isStructural
 import { applyTextContentProjection, getTextProjectionReports, subscribeTextProjectionDiagnostics, } from "../projection/textProjection.js";
 import { isTextContentChangeListValue } from "../changes/types.js";
 import { applyDraftProjection, } from "../projection/draftProjection.js";
+import { adoptStylesheet, allowsStyleElements, getAdoptedStylesheet } from "../runtime/ownedStylesheets.js";
+import { applyRuntimeIdentityClaims, isRuntimeIdentityClaim } from "../runtime/runtimeIdentityClaims.js";
 const SHEET_ID = "nudge-ui-styles";
+let adoptedCss = null;
 function replaceRendererCss(css) {
+    if (!allowsStyleElements(document)) {
+        // Structural and text projections resend unchanged CSS; rewriting it would discard cached resolutions.
+        const adopted = getAdoptedStylesheet(document, SHEET_ID);
+        if (adopted && adoptedCss === css && document.adoptedStyleSheets.includes(adopted))
+            return;
+        adoptStylesheet(document, SHEET_ID, css);
+        adoptedCss = css;
+        notifyBrowserStylesheetChange(document);
+        return;
+    }
     let sheet = document.getElementById(SHEET_ID);
+    if (sheet?.textContent === css)
+        return;
     if (!sheet) {
         sheet = document.createElement("style");
         sheet.id = SHEET_ID;
@@ -22,6 +37,9 @@ function replaceRendererCss(css) {
     notifyBrowserStylesheetChange(document);
 }
 const rendererDocumentProjectionAdapter = {
+    applyRuntimeIdentities: (claims) => {
+        applyRuntimeIdentityClaims(document, claims);
+    },
     applyStructural: (changes) => {
         applyStructuralProjection(document, changes);
     },
@@ -44,6 +62,7 @@ function projectionFromReplaceStylesMessage(msg) {
         structuralChanges: msg.structuralChanges,
         textContentChanges: msg.textContentChanges,
         componentOverrides: msg.componentOverrides,
+        runtimeIdentities: msg.runtimeIdentities,
     };
 }
 let lastAppliedRevision = -1;
@@ -113,7 +132,6 @@ function sendProjectionApplied(revision) {
     };
     sendToParent(msg);
 }
-/** Installs renderer diagnostics only after the dev-only renderer bootstrap. */
 export function startRendererProjectionDiagnostics() {
     if (!isNudgeUiDev() || activeDiagnosticsOwner)
         return () => undefined;
@@ -195,6 +213,10 @@ export function validateReplaceStyles(msg, projectId, workspaceId, cardId) {
     if (!isTextContentChangeListValue(m.textContentChanges)) {
         return { valid: false, reason: "text content changes are invalid" };
     }
+    if (m.runtimeIdentities !== undefined
+        && (!Array.isArray(m.runtimeIdentities) || !m.runtimeIdentities.every(isRuntimeIdentityClaim))) {
+        return { valid: false, reason: "runtime identities are invalid" };
+    }
     if (!isComponentOverrideList(m.componentOverrides)) {
         return { valid: false, reason: "component overrides are invalid" };
     }

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

@@ -1,13 +1,4 @@
-/**
- * Keep the resize handle usable while the board is zoomed without allowing
- * inverse scaling to make it disproportionately large or small.
- */
+/** Keeps the resize handle usable at any zoom without letting inverse scaling make it disproportionately large or small. */
 export declare const CANVAS_RESIZE_HANDLE_MIN_SCALE: number;
 export declare const CANVAS_RESIZE_HANDLE_MAX_SCALE = 2;
-/**
- * Returns the scale to apply inside the board's zoomed coordinate space.
- *
- * The lower bound matches the inverse of the largest supported camera zoom,
- * and the upper bound follows the toolbar compensation policy.
- */
 export declare function getCanvasResizeHandleScale(zoom: number): number;

package/dist/inspector/canvas/resizeHandleScale.js

@@ -1,17 +1,8 @@
 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
- * inverse scaling to make it disproportionately large or small.
- */
+/** Keeps the resize handle usable at any zoom without letting inverse scaling make it disproportionately large or small. */
 export const CANVAS_RESIZE_HANDLE_MIN_SCALE = 1 / MAX_CAMERA_ZOOM;
 export const CANVAS_RESIZE_HANDLE_MAX_SCALE = CANVAS_TOOLBAR_MAX_SCALE;
-/**
- * Returns the scale to apply inside the board's zoomed coordinate space.
- *
- * The lower bound matches the inverse of the largest supported camera zoom,
- * and the upper bound follows the toolbar compensation policy.
- */
 export function getCanvasResizeHandleScale(zoom) {
     if (!Number.isFinite(zoom) || zoom <= 0) {
         return CANVAS_RESIZE_HANDLE_MAX_SCALE;

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

@@ -33,22 +33,16 @@ export interface DurableSession {
 export type { SerializableChange, SerializableComponentChange, SerializableElementChange, SerializableTextContentChange, SerializableTokenChange, SerializableTokenRef, } from "../changes/codecs.js";
 export interface HydrationResult {
     restored: boolean;
-    changeCount: number;
 }
 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;
+/** Clears the active draft, its comments, and project sketches while preserving canvas geometry and other drafts. */
+export declare function clearSelectedFrameChanges(): Promise<void>;
 export declare function clearSession(): void;
 export declare function enableAutoSave(): void;
-/**
- * Coalesces the synchronous full-session `JSON.stringify` + `localStorage`
- * write behind a trailing timer so commits never block on persistence. A
- * refresh or close inside the debounce window still flushes on `beforeunload`.
- */
+/** Coalesces the synchronous full-session write behind a trailing timer; `beforeunload` still flushes it. */
 export declare function scheduleAutoSave(): void;
-export declare function scheduleCanvasSave(): void;
 export declare function flushAutoSave(): void;
 export declare function getRestoreCount(): number;
 export declare function setRestoreCount(count: number): void;

package/dist/inspector/canvas/sessionStore.js

@@ -1,11 +1,12 @@
+import { inspectorStorage } from "../runtime/inspectorStorage.js";
 import { isFrameContent } from "./frameContent.js";
 import { clearComments } from "../comments/store.js";
+import { clearSketchesForProject } from "../sketch/store.js";
+import { clearSketchClipboardHandoff } from "../sketch/handoff.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 { clearActiveDraft } from "../changes/changesLog.js";
 import { removeManagedSheet } from "../projection/managedStylesheet.js";
 import { setSelectedElement } from "../selection/selectionStore.js";
 import { canWriteWorkspace } from "./workspaceLease.js";
@@ -13,7 +14,7 @@ import { resetStructuralDeleteProjection, } from "../projection/structuralProjec
 import { projectToAllReadyCards } from "./projection.js";
 import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 import { clearClipboardHandoff, getClipboardHandoffSnapshot, hydrateClipboardHandoff, isClipboardHandoffSnapshot, } from "../prompt/clipboardHandoff.js";
-import { activateDraftForCard, clearDrafts, persistDrafts } from "../drafts/store.js";
+import { activateDraftForCard, canEditDraft, clearActiveDraft, clearDrafts, getActiveDraftChanges, isDraftLocked, persistDrafts, } from "../drafts/store.js";
 const SCHEMA_VERSION = 17;
 const STORAGE_PREFIX = "nudge-ui";
 function projectId() {
@@ -69,70 +70,67 @@ export function persistSession() {
         return false;
     return persistSessionUnchecked();
 }
-/**
- * Serializes and writes the session without the write-lease gate. The public
- * persistence path checks the lease before calling this helper.
- */
+/** Skips the write-lease gate; the public persistence path checks the lease first. */
 function persistSessionUnchecked() {
     if (!projectId())
         return false;
     try {
         persistDrafts();
         const session = buildSession();
-        localStorage.setItem(storageKey(projectId()), JSON.stringify(session));
+        inspectorStorage()?.setItem(storageKey(projectId()), JSON.stringify(session));
         return true;
     }
     catch {
-        // Storage unavailable or quota exceeded — silently ignore
+        // Storage unavailable or quota exceeded
         return false;
     }
 }
 export function hydrateSession() {
     if (!projectId())
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     let raw = null;
     try {
-        raw = localStorage.getItem(storageKey(projectId()));
+        raw = inspectorStorage()?.getItem(storageKey(projectId())) ?? null;
     }
     catch {
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     if (!raw)
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     let session;
     try {
         session = JSON.parse(raw);
     }
     catch {
         safeDiscard();
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     if (!session || typeof session !== "object") {
         safeDiscard();
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     const s = session;
     if (typeof s.schemaVersion !== "number" || s.schemaVersion !== SCHEMA_VERSION) {
         safeDiscard();
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     if (typeof s.projectId !== "string" || s.projectId !== projectId()) {
         safeDiscard();
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     if (typeof s.mode !== "string" || (s.mode !== "inspect" && s.mode !== "canvas")) {
         safeDiscard();
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     if (!isSameOriginUrl(s.inspectUrl)) {
         safeDiscard();
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     const inspectRouteChanged = s.mode === "inspect" && s.inspectUrl !== window.location.href;
     const cards = Array.isArray(s.cards) ? s.cards : null;
     if (!cards) {
         safeDiscard();
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     const serializableCards = [];
     for (const card of cards) {
@@ -147,7 +145,7 @@ export function hydrateSession() {
             candidate.width <= 0 ||
             candidate.height <= 0) {
             safeDiscard();
-            return { restored: false, changeCount: 0 };
+            return { restored: false };
         }
         const c = card;
         serializableCards.push({
@@ -163,7 +161,7 @@ export function hydrateSession() {
     }
     if (new Set(serializableCards.map((card) => card.id)).size !== serializableCards.length) {
         safeDiscard();
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     const cardsById = new Map(serializableCards.map((card) => [card.id, card]));
     const cameraRaw = s.camera;
@@ -172,18 +170,18 @@ export function hydrateSession() {
         !isFiniteNumber(cameraRaw.y) ||
         !isFiniteNumber(cameraRaw.zoom)) {
         safeDiscard();
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     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 };
+        return { restored: false };
     }
     const clipboardHandoff = s.clipboardHandoff;
     if (!isClipboardHandoffSnapshot(clipboardHandoff)) {
         safeDiscard();
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     const camera = {
         x: cameraRaw.x,
@@ -197,38 +195,36 @@ export function hydrateSession() {
             : undefined;
     if (focusedCardId === undefined) {
         safeDiscard();
-        return { restored: false, changeCount: 0 };
+        return { restored: false };
     }
     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
-    // sending the user back to the previous page. On refresh, the URLs already
-    // match and restoration remains unchanged.
+    // A changed URL means the user navigated while Inspect was active: keep the edits but adopt the new route.
     if (inspectRouteChanged)
         persistSessionUnchecked();
-    return { restored: true, changeCount: 0 };
+    return { restored: true };
 }
 function safeDiscard() {
     try {
-        localStorage.removeItem(storageKey(projectId()));
+        inspectorStorage()?.removeItem(storageKey(projectId()));
     }
     catch {
-        // ignore
     }
 }
-/** Clears the active frame's edit draft while preserving canvas geometry and other drafts. */
+/** Clears the active draft, its comments, and project sketches while preserving canvas geometry and other drafts. */
 export function clearSelectedFrameChanges() {
     if (!canEditDraft())
-        return;
+        return Promise.resolve();
     const cardId = getSelectedCardId() ?? getFocusedCardId();
     if (cardId)
         activateDraftForCard(cardId);
     clearComments(targetFromKey(getActiveDraftChanges().draftId) ?? documentTarget(window.location.href));
     clearActiveDraft();
+    clearSketchClipboardHandoff();
     setSelectedElement(null);
     projectToAllReadyCards();
     scheduleAutoSave();
+    return clearSketchesForProject();
 }
 export function clearSession() {
     if (isDraftLocked())
@@ -236,10 +232,9 @@ export function clearSession() {
     if (!canWriteWorkspace())
         return;
     try {
-        localStorage.removeItem(storageKey(projectId()));
+        inspectorStorage()?.removeItem(storageKey(projectId()));
     }
     catch {
-        // ignore
     }
     clearComments();
     clearActiveDraft();
@@ -269,11 +264,7 @@ export function enableAutoSave() {
     autoSaveEnabled = true;
     window.addEventListener("beforeunload", flushAutoSave);
 }
-/**
- * Coalesces the synchronous full-session `JSON.stringify` + `localStorage`
- * write behind a trailing timer so commits never block on persistence. A
- * refresh or close inside the debounce window still flushes on `beforeunload`.
- */
+/** Coalesces the synchronous full-session write behind a trailing timer; `beforeunload` still flushes it. */
 export function scheduleAutoSave() {
     if (!autoSaveEnabled)
         return;
@@ -288,7 +279,6 @@ export function scheduleAutoSave() {
             autoSaveDirty = false;
     }, AUTOSAVE_DEBOUNCE_MS);
 }
-export function scheduleCanvasSave() { scheduleAutoSave(); }
 export function flushAutoSave() {
     if (autosaveTimer !== null) {
         clearTimeout(autosaveTimer);