nudge-ui 0.2.0 → 0.2.1

package/dist/inspector/overlay/structuralGestures.js

@@ -1,4 +1,5 @@
 import { applyStructuralProjection, canContainElement as canContainStructuralElement, createStructuralDelete, createStructuralMove, getStructuralMoveLegality, getStructuralChanges, } from "../projection/structuralProjection.js";
+import { isEditorShellDocument } from "../runtime/editorShell.js";
 /** Conservative HTML guard shared with canonical capture and document replay. */
 export function canContainElement(parent, child) {
     return canContainStructuralElement(parent, child);
@@ -141,16 +142,18 @@ export function getDropLocationAtPoint(doc, dragged, x, y) {
     const inContainerInterior = y - rect.top > edgeBand && y - rect.top < rect.height - edgeBand;
     return getDropLocationForElement(dragged, target, y < rect.top + rect.height / 2, inContainerInterior);
 }
-/** Capture the move as canonical intent, then project only the controller host. */
+function projectInlineHost(node) {
+    if (node.ownerDocument !== document || isEditorShellDocument(document))
+        return;
+    applyStructuralProjection(document, getStructuralChanges());
+}
+/** Capture the move as canonical intent, then preview it in an inline host. */
 export function moveElement(node, destination) {
     if (!getStructuralMoveLegality(node, destination).valid)
         return null;
     const change = createStructuralMove(node, destination);
-    if (!change)
-        return null;
-    // `document` belongs to the controller runtime. A Canvas source element is
-    // deliberately not projected here; its renderer receives this snapshot once.
-    applyStructuralProjection(document, getStructuralChanges());
+    if (change)
+        projectInlineHost(node);
     return change;
 }
 /** Reorder only same-parent siblings; horizontal movement needs a flex row. */
@@ -167,14 +170,13 @@ export function nudgeElement(node, key) {
     const before = moveEarlier ? sibling : sibling.nextElementSibling;
     return moveElement(node, { parent, before, ...lineFor(parent, before) });
 }
-/** Capture delete intent and project only the controller host. */
+/** Capture delete intent, then preview it in an inline host. */
 export function deleteElement(selected) {
     const node = selected.domElement;
     if (!node.parentElement || !node.isConnected)
         return null;
     const change = createStructuralDelete(node);
-    if (!change)
-        return null;
-    applyStructuralProjection(document, getStructuralChanges());
+    if (change)
+        projectInlineHost(node);
     return change;
 }

package/dist/inspector/projection/managedStylesheet.js

@@ -171,6 +171,9 @@ function commaListIncludes(value, property) {
     return value.split(",").map((part) => part.trim()).some((part) => part === "all" || part === property);
 }
 function hasImportantAuthorRule(el, property) {
+    const StyleRule = el.ownerDocument.defaultView?.CSSStyleRule;
+    if (!StyleRule)
+        return false;
     for (const sheet of Array.from(el.ownerDocument.styleSheets)) {
         let rules;
         try {
@@ -180,7 +183,7 @@ function hasImportantAuthorRule(el, property) {
             continue;
         }
         for (const rule of Array.from(rules)) {
-            if (!(rule instanceof CSSStyleRule))
+            if (!(rule instanceof StyleRule))
                 continue;
             try {
                 if (el.matches(rule.selectorText) && rule.style.getPropertyPriority(property) === "important")

package/dist/inspector/projection/renderedInstance.d.ts

@@ -44,6 +44,8 @@ export declare function collectRenderedInstanceOverrides(changes: ReadonlyArray<
  * later reconciliation changes diagnostics but never starts a reapply loop.
  */
 export declare function applyRenderedInstanceProjection(doc: Document, overrides: ReadonlyArray<RenderedInstanceOverride>): DocumentProjectionReport[];
+/** Registers controller-owned overrides without projecting them into the editor shell. */
+export declare function setCanonicalRenderedInstanceOverrides(overrides: ReadonlyArray<RenderedInstanceOverride>): void;
 export declare function getRenderedInstanceProjectionReports(doc: Document): readonly DocumentProjectionReport[];
 /** Diagnostics arrive independently when a renderer reports or React reconciles. */
 export declare function subscribeRenderedInstanceDiagnostics(listener: () => void): () => void;

package/dist/inspector/projection/renderedInstance.js

@@ -213,7 +213,7 @@ export function applyRenderedInstanceProjection(doc, overrides) {
     if (!isNudgeUiDev())
         return [];
     const state = getDocumentState(doc);
-    canonicalOverrides = new Map(overrides.map((override) => [override.id, override]));
+    setCanonicalRenderedInstanceOverrides(overrides);
     const key = JSON.stringify(overrides);
     if (state.snapshotKey === key) {
         const reports = reportsForSnapshot(state, overrides);
@@ -239,6 +239,10 @@ export function applyRenderedInstanceProjection(doc, overrides) {
     storeReports(doc, reports);
     return reports;
 }
+/** Registers controller-owned overrides without projecting them into the editor shell. */
+export function setCanonicalRenderedInstanceOverrides(overrides) {
+    canonicalOverrides = new Map(overrides.map((override) => [override.id, override]));
+}
 export function getRenderedInstanceProjectionReports(doc) {
     return reportsByDocument.get(doc) ?? [];
 }

package/dist/inspector/projection/structuralProjection.d.ts

@@ -29,6 +29,8 @@ export declare function getStructuralMoveLegality(element: HTMLElement, destinat
 export interface StructuralChangeDiagnostic extends StructuralProjectionReport {
     document: "Inspect" | `Canvas ${string}`;
 }
+/** Returns bounded view state used to verify a delete in the same rendered view. */
+export declare function documentStateKey(doc: Document, excluded?: HTMLElement): string | undefined;
 /** Captures a delete intent once, in the controller, at the user gesture. */
 export declare function createStructuralDelete(element: HTMLElement, id?: string): StructuralDelete | null;
 /**

package/dist/inspector/projection/structuralProjection.js

@@ -95,6 +95,82 @@ function notifyDiagnostics() {
 function structuralId() {
     return `structural-${crypto.randomUUID?.() ?? nextStructuralId++}`;
 }
+function documentRoute(doc) {
+    if (!doc.location)
+        return undefined;
+    try {
+        const url = new URL(doc.location.href);
+        url.hash = "";
+        return url.href;
+    }
+    catch {
+        return undefined;
+    }
+}
+function stableStateValue(value, seen = new WeakSet()) {
+    if (!value || typeof value !== "object")
+        return value;
+    if (seen.has(value))
+        return "[Circular]";
+    seen.add(value);
+    if (Array.isArray(value))
+        return value.map((entry) => stableStateValue(entry, seen));
+    return Object.fromEntries(Object.entries(value)
+        .sort(([left], [right]) => left.localeCompare(right))
+        .map(([key, entry]) => [key, stableStateValue(entry, seen)]));
+}
+function textWithoutExcluded(element, excluded) {
+    let text = "";
+    const visit = (node) => {
+        if (node === excluded)
+            return;
+        if (node.nodeType === node.TEXT_NODE) {
+            text += node.nodeValue ?? "";
+            return;
+        }
+        node.childNodes.forEach(visit);
+    };
+    visit(element);
+    return text.replace(/\s+/g, " ").trim().slice(0, 120) || null;
+}
+function renderedInstanceState(doc, excluded) {
+    try {
+        return Array.from(doc.querySelectorAll("[data-cid][data-src]"))
+            .filter((element) => element !== excluded && !excluded?.contains(element))
+            .map((element) => ({
+            tag: element.tagName.toLowerCase(),
+            cid: element.getAttribute("data-cid"),
+            src: element.getAttribute("data-src"),
+            props: element.getAttribute("data-cprops"),
+            text: textWithoutExcluded(element, excluded),
+            ariaLabel: element.getAttribute("aria-label"),
+        }));
+    }
+    catch {
+        return undefined;
+    }
+}
+/** Returns bounded view state used to verify a delete in the same rendered view. */
+export function documentStateKey(doc, excluded) {
+    const view = doc.defaultView;
+    if (!view || !doc.location)
+        return undefined;
+    try {
+        const url = new URL(doc.location.href);
+        const rendered = renderedInstanceState(doc, excluded);
+        if (!rendered)
+            return undefined;
+        const state = JSON.stringify({
+            hash: url.hash,
+            history: stableStateValue(view.history.state),
+            rendered,
+        });
+        return state.length <= 4096 ? state : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
 function cloneSnapshot(snapshot) {
     // Structural changes are small JSON-safe records. Cloning their top-level
     // array is enough: no operation mutates a change or its nested references.
@@ -108,7 +184,15 @@ export function createStructuralDelete(element, id = structuralId()) {
     const target = captureRenderedInstance(element);
     if (!target)
         return null;
-    const change = { id, kind: "delete", target };
+    const route = documentRoute(element.ownerDocument);
+    const state = documentStateKey(element.ownerDocument, element);
+    const change = {
+        id,
+        kind: "delete",
+        target,
+        ...(route ? { route } : {}),
+        ...(state ? { state } : {}),
+    };
     if (!workspaceChangeStore.commitStructuralChange(change))
         return null;
     projectStructuralChanges(workspaceChangeStore.getSnapshot());

package/dist/inspector/projection/structuralProjectionBoundary.js

@@ -18,12 +18,28 @@ export function isStructuralDelete(value) {
     if (!value || typeof value !== "object")
         return false;
     const candidate = value;
-    if (!hasOnlyKeys(candidate, ["id", "kind", "target"]))
+    if (!hasOnlyKeys(candidate, ["id", "kind", "target", "route", "state"]))
         return false;
     return candidate.kind === "delete"
         && typeof candidate.id === "string"
+        && (candidate.route === undefined || isRoute(candidate.route))
+        && (candidate.state === undefined || isStateKey(candidate.state))
         && isRenderedInstanceRef(candidate.target);
 }
+function isStateKey(value) {
+    return typeof value === "string" && value.length > 0 && value.length <= 4096;
+}
+function isRoute(value) {
+    if (typeof value !== "string" || value.length > 2048)
+        return false;
+    try {
+        const url = new URL(value);
+        return (url.protocol === "http:" || url.protocol === "https:") && url.hash === "";
+    }
+    catch {
+        return false;
+    }
+}
 export function isStructuralMove(value) {
     if (!value || typeof value !== "object")
         return false;

package/dist/inspector/projection/textProjection.d.ts

@@ -43,6 +43,8 @@ export declare function collectTextContentChanges(changes: ReadonlyArray<unknown
 export declare function getTextContentChangeById(changeId: string): TextContentChangeRecord | null;
 /** Apply one controller-owned text snapshot to a document adapter. */
 export declare function applyTextContentProjection(doc: Document, changes: ReadonlyArray<TextContentChangeRecord>): TextProjectionReport[];
+/** Registers controller-owned text changes without projecting them into the editor shell. */
+export declare function setCanonicalTextContentChanges(changes: ReadonlyArray<TextContentChangeRecord>): void;
 export declare function getTextProjectionReports(doc: Document): readonly TextProjectionReport[];
 export declare function subscribeTextProjectionDiagnostics(listener: () => void): () => void;
 export declare function getTextProjectionDiagnosticRevision(): number;

package/dist/inspector/projection/textProjection.js

@@ -42,7 +42,8 @@ function markerKey(target) {
     return target.textNodePath ? `path:${target.textNodePath.join(",")}` : "root";
 }
 function isEmptyTextAffordance(node) {
-    return node instanceof HTMLElement && node.hasAttribute(EMPTY_TEXT_PROJECTION_ATTR);
+    return node?.nodeType === 1
+        && node.hasAttribute(EMPTY_TEXT_PROJECTION_ATTR);
 }
 function hasInlineTextEditor(element) {
     return element.querySelector('[data-inline-editor="true"]') !== null;
@@ -308,8 +309,9 @@ function emptyTextAffordanceFor(doc, state, change, element) {
     if (!textNode || textNode.nodeValue !== "")
         return null;
     const parent = textNode.parentNode;
-    if (!(parent instanceof HTMLElement))
+    if (parent?.nodeType !== 1)
         return null;
+    const parentElement = parent;
     const path = markerKey(change.target);
     // During re-entry the temporary editor wraps the empty Text node. The
     // existing slot remains beside that wrapper; search the whole projected
@@ -332,7 +334,7 @@ function emptyTextAffordanceFor(doc, state, change, element) {
     // It has no application text and is never a source identity. The
     // interaction stylesheet supplies its visible, borderless hit geometry.
     affordance.hidden = !isInteractionStylesInstalled(doc);
-    parent.insertBefore(affordance, textNode.nextSibling);
+    parentElement.insertBefore(affordance, textNode.nextSibling);
     state.emptyAffordances.set(change.id, affordance);
     return affordance;
 }
@@ -546,7 +548,7 @@ export function applyTextContentProjection(doc, changes) {
     if (!isNudgeUiDev())
         return [];
     const state = getDocumentState(doc);
-    canonicalChanges = new Map(changes.map((change) => [change.id, change]));
+    setCanonicalTextContentChanges(changes);
     const key = JSON.stringify(changes);
     if (state.snapshotKey === key) {
         // Reconciliation can happen between controller snapshots. Validate before
@@ -624,6 +626,10 @@ export function applyTextContentProjection(doc, changes) {
     storeReports(doc, reports);
     return reports;
 }
+/** Registers controller-owned text changes without projecting them into the editor shell. */
+export function setCanonicalTextContentChanges(changes) {
+    canonicalChanges = new Map(changes.map((change) => [change.id, change]));
+}
 export function getTextProjectionReports(doc) {
     return reportsByDocument.get(doc) ?? [];
 }

package/dist/inspector/prompt/clipboardHandoff.d.ts

@@ -25,7 +25,7 @@ export declare function getLastClipboardReconciledCount(): number;
  * Checks a copied prompt against source-rendered output and reconciles only
  * exact records that the browser can positively verify.
  */
-export declare function reconcileClipboardHandoff(): Promise<number>;
+export declare function reconcileClipboardHandoff(doc?: Document): Promise<number>;
 /**
  * Watches source-driven document refreshes and page-return signals. The
  * trailing debounce lets an HMR commit settle before verification lifts the

package/dist/inspector/prompt/clipboardHandoff.js

@@ -137,7 +137,7 @@ function pruneCheckpoint() {
  * Checks a copied prompt against source-rendered output and reconciles only
  * exact records that the browser can positively verify.
  */
-export async function reconcileClipboardHandoff() {
+export async function reconcileClipboardHandoff(doc = document) {
     const snapshot = checkpoint;
     if (!snapshot)
         return 0;
@@ -147,7 +147,7 @@ export async function reconcileClipboardHandoff() {
         pruneCheckpoint();
         return 0;
     }
-    const removed = await verifyAndReconcileHandoff({ changes, structuralChanges });
+    const removed = await verifyAndReconcileHandoff({ changes, structuralChanges }, doc);
     pruneCheckpoint();
     if (removed > 0) {
         lastReconciledCount = removed;
@@ -175,7 +175,7 @@ export function startClipboardHandoffController(doc = document) {
             if (stopped || checking || !checkpoint)
                 return;
             checking = true;
-            void reconcileClipboardHandoff()
+            void reconcileClipboardHandoff(doc)
                 .catch(() => undefined)
                 .finally(() => {
                 // Keep the guard through the MutationObserver microtask generated by

package/dist/inspector/prompt/generatePrompt.d.ts

@@ -1,7 +1,8 @@
 import type { ChangeRecord } from "../changes/changesLog.js";
 import type { StructuralChange } from "../projection/structuralProjection.js";
+import type { AgentSketchMetadata } from "../agent/protocol.js";
 export interface FrameworkHints {
     framework?: string;
     stylingSystem?: string;
 }
-export declare function generatePrompt(changes: ChangeRecord[], frameworkHints?: FrameworkHints, structuralChanges?: readonly StructuralChange[], customInstructions?: string): string;
+export declare function generatePrompt(changes: ChangeRecord[], frameworkHints?: FrameworkHints, structuralChanges?: readonly StructuralChange[], customInstructions?: string, sketches?: readonly AgentSketchMetadata[]): string;

package/dist/inspector/prompt/generatePrompt.js

@@ -244,6 +244,17 @@ function structuralChangeLine(change) {
         ? `- Move ${target} before ${renderedInstanceDescription(before)} in ${destinationParent}.`
         : `- Move ${target} to the end of ${destinationParent}.`;
 }
+function sketchLines(sketches) {
+    const titles = [...new Set(sketches.map((sketch) => sketch.capture.title || "(untitled)"))];
+    return [
+        ...titles.map((title) => `- Page title: ${promptText(title)}`),
+        ...sketches.flatMap((sketch) => [
+            ...(sketch.description ? [`- Description: ${promptText(sketch.description)}`] : []),
+            ...(sketch.annotations ?? []).map((annotation) => `- Annotation ${annotation.number}: ${promptText(annotation.description)}`),
+        ]),
+        "- Interpret the attached frozen screenshot, blue strokes, and numbered annotations as visual feedback. Do not derive selectors, source coordinates, or semantics from the strokes. Use each annotation number to match the note to its numbered dot.",
+    ];
+}
 function renderedInstanceKey(ref) {
     const { sourceSite, locator } = ref;
     return JSON.stringify([
@@ -304,10 +315,10 @@ function canonicalizeStructuralChanges(changes) {
     }
     return canonical;
 }
-export function generatePrompt(changes, frameworkHints, structuralChanges = [], customInstructions = DEFAULT_CUSTOM_INSTRUCTIONS) {
+export function generatePrompt(changes, frameworkHints, structuralChanges = [], customInstructions = DEFAULT_CUSTOM_INSTRUCTIONS, sketches = []) {
     const deduplicated = canonicalizeChanges(changes);
     const structuralIntent = canonicalizeStructuralChanges(structuralChanges);
-    if (deduplicated.length === 0 && structuralIntent.length === 0)
+    if (deduplicated.length === 0 && structuralIntent.length === 0 && sketches.length === 0)
         return EMPTY_SENTINEL;
     const tokenChanges = deduplicated.filter(isTokenChange);
     const componentChanges = deduplicated.filter(isComponentChange);
@@ -387,5 +398,11 @@ export function generatePrompt(changes, frameworkHints, structuralChanges = [],
             lines: structuralIntent.map(structuralChangeLine),
         });
     }
+    if (sketches.length > 0) {
+        sections.push({
+            heading: "Sketch annotations",
+            lines: sketchLines(sketches),
+        });
+    }
     return renderPrompt(sections, customInstructions);
 }

package/dist/inspector/runtime/editorShell.d.ts

@@ -0,0 +1,2 @@
+/** Returns whether a document is the application-free editor controller. */
+export declare function isEditorShellDocument(doc?: Document): boolean;

package/dist/inspector/runtime/editorShell.js

@@ -0,0 +1,4 @@
+/** Returns whether a document is the application-free editor controller. */
+export function isEditorShellDocument(doc = document) {
+    return doc.documentElement.hasAttribute("data-nudge-ui-editor");
+}

package/dist/inspector/runtime/runtimeConfig.d.ts

@@ -60,6 +60,10 @@ export interface NudgeUiRuntimeConfig {
     readonly componentContracts: readonly ComponentContract[];
     /** Whether this runtime is the explicit public landing-page demo. */
     readonly demo?: boolean;
+    /** Additional same-origin pages seeded into the public demo canvas. */
+    readonly demoPages?: readonly string[];
+    /** Labels for demo cards in display order, including the primary card. */
+    readonly demoCardLabels?: readonly string[];
 }
 /**
  * Validates a host-supplied configuration and fills safe defaults.

package/dist/inspector/runtime/runtimeConfig.js

@@ -170,6 +170,8 @@ export function normalizeNudgeUiRuntimeConfig(input) {
     if (isNormalizedRuntimeConfig(input))
         return input;
     const demo = optionalDemoFlag(input);
+    const demoPages = optionalStringArray(input, "demoPages");
+    const demoCardLabels = optionalStringArray(input, "demoCardLabels");
     const normalized = cloneAndFreeze({
         projectId: requireString(input, "projectId"),
         host: requireEnum(input, "host", RUNTIME_HOSTS),
@@ -182,6 +184,8 @@ export function normalizeNudgeUiRuntimeConfig(input) {
         tokenGeneration: optionalString(input, "tokenGeneration"),
         componentContracts: optionalArray(input, "componentContracts"),
         ...(demo === true ? { demo: true } : {}),
+        ...(demoPages === undefined ? {} : { demoPages }),
+        ...(demoCardLabels === undefined ? {} : { demoCardLabels }),
     });
     normalizedRuntimeConfigs.add(normalized);
     return normalized;

package/dist/inspector/selection/selectionStore.js

@@ -1,6 +1,7 @@
 import { useSyncExternalStore } from "react";
 import { computeHierarchy } from "./hierarchy.js";
 import { resolveSelectionFromElement } from "./resolveSelection.js";
+import { clearInlineTextDiagnosticsForSelection } from "../inline-text/inlineTextDiagnostics.js";
 let currentSelection = null;
 const EMPTY_SELECTION = [];
 let chain = [];
@@ -28,6 +29,7 @@ function getHierarchyIndex() {
     return index;
 }
 function notify() {
+    clearInlineTextDiagnosticsForSelection(getSelectedElements().map((element) => element.domElement));
     listeners.forEach((l) => l());
 }
 function sameComponentTargets(a, b) {

package/dist/inspector/settings/SettingsDialog.js

@@ -6,6 +6,10 @@ import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.j
 import { McpConnectionContent, } from "../agent/McpConnectionDialog.js";
 import { PromptSettingsFields, } from "../prompt/PromptSettingsDialog.js";
 import { TokensPanel } from "../tokens/TokensPanel.js";
+import { useSelectedElement } from "../selection/selectionStore.js";
+import { useFocusedCardId, useSelectedCardId } from "../canvas/canvasStore.js";
+import { getRegisteredFrames } from "../canvas/projection.js";
+import { getBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
 const SETTINGS_SECTIONS = [
     {
         id: "instructions",
@@ -33,8 +37,14 @@ export function SettingsDialog({ open, initialSection, value, onValueChange, onO
     const [activeSection, setActiveSection] = useState(initialSection);
     const closeRef = useRef(null);
     const instructionsRef = useRef(null);
+    const selectedElement = useSelectedElement();
+    const selectedCardId = useSelectedCardId();
+    const focusedCardId = useFocusedCardId();
+    const activeFrame = getRegisteredFrames().get(selectedCardId ?? focusedCardId ?? "");
+    const activeDocument = selectedElement?.domElement.ownerDocument ?? activeFrame?.contentDocument ?? document;
     const tokenInspection = useBrowserCssInspection(null, "base", {
         includeDocumentTokens: activeSection === "tokens",
+        session: getBrowserCssInspection(activeDocument),
     });
     const tokenRows = tokenInspection.documentTokens?.tokens ?? [];
     const activeDefinition = SETTINGS_SECTIONS.find((section) => section.id === activeSection) ?? SETTINGS_SECTIONS[0];

package/dist/inspector/shell/AppShell.js

@@ -3,7 +3,11 @@ import { InspectorShell } from "./InspectorShell.js";
 import { CanvasWorkspace } from "../canvas/CanvasWorkspace.js";
 import { CanvasElementOverlay } from "../canvas/CanvasElementOverlay.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
+import { readNudgeUiEditorTarget } from "../../transport/editor.js";
 export function AppShell() {
     const canvasEnabled = useNudgeUiRuntimeConfig().capabilities.canvas;
-    return (_jsxs(_Fragment, { children: [canvasEnabled ? _jsx(CanvasWorkspace, {}) : null, canvasEnabled ? _jsx(CanvasElementOverlay, {}) : null, _jsx(InspectorShell, {})] }));
+    const primaryUrl = typeof window === "undefined"
+        ? null
+        : readNudgeUiEditorTarget(window.location.href);
+    return (_jsxs(_Fragment, { children: [canvasEnabled ? _jsx(CanvasWorkspace, { primaryUrl: primaryUrl }) : null, canvasEnabled ? _jsx(CanvasElementOverlay, {}) : null, _jsx(InspectorShell, {})] }));
 }

package/dist/inspector/shell/ChangesLog.js

@@ -8,6 +8,8 @@ import { presentChange } from "../changes/presentation.js";
 import { getStructuralChanges, getStructuralChangeDiagnostics, getStructuralDiagnosticRevision, revertStructuralChange, subscribeStructuralChanges, subscribeStructuralDiagnostics, } from "../projection/structuralProjection.js";
 import { getRenderedInstanceChangeDiagnostics, getRenderedInstanceDiagnosticRevision, subscribeRenderedInstanceDiagnostics, } from "../projection/renderedInstance.js";
 import { getTextContentChangeDiagnostics, getTextProjectionDiagnosticRevision, subscribeTextProjectionDiagnostics, } from "../projection/textProjection.js";
+import { SketchChanges } from "../sketch/SketchChanges.js";
+import { useSketchStore } from "../sketch/store.js";
 function groupChanges(changes) {
     const map = new Map();
     for (const change of changes) {
@@ -60,6 +62,8 @@ function structuralDiagnosticText(diagnostic) {
 }
 export function ChangesLog({ onClearSession }) {
     const changes = useChanges();
+    const sketchStore = useSketchStore();
+    const sketches = sketchStore.items;
     const structuralChanges = useSyncExternalStore(subscribeStructuralChanges, getStructuralChanges, getStructuralChanges);
     // Diagnostics arrive independently from structural state when a renderer
     // resolves a snapshot or its document observer detects a reconciliation.
@@ -67,10 +71,10 @@ export function ChangesLog({ onClearSession }) {
     useSyncExternalStore(subscribeRenderedInstanceDiagnostics, getRenderedInstanceDiagnosticRevision, getRenderedInstanceDiagnosticRevision);
     useSyncExternalStore(subscribeTextProjectionDiagnostics, getTextProjectionDiagnosticRevision, getTextProjectionDiagnosticRevision);
     const groups = useMemo(() => groupChanges(changes), [changes]);
-    const total = changes.length + structuralChanges.length;
-    if (total === 0)
+    const total = changes.length + structuralChanges.length + sketches.length;
+    if (total === 0 && sketchStore.error === null)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsxs("details", { className: "changes", "data-test": "changes-log", children: [_jsxs("summary", { className: "changes__title", "data-test": "changes-toggle", children: [_jsx("span", { className: "changes__title-label", children: "Changes" }), total > 0 ? _jsx("span", { className: "changes__count", children: total }) : null, _jsx(IconChevronDown, { className: "changes__toggle-icon", size: 15, stroke: 2, "aria-hidden": "true" })] }), _jsx("div", { className: "changes__content", children: groups.length === 0 && structuralChanges.length === 0 ? (_jsx("div", { className: "changes__empty", "data-test": "changes-empty", children: "No changes yet" })) : (_jsxs(_Fragment, { children: [groups.map((group) => (_jsxs("div", { className: "changes__group", "data-test": "changes-group", "data-cid": group.label, children: [_jsxs("div", { className: "changes__group-title", children: [_jsx("span", { children: group.label }), _jsx("span", { className: "changes__group-file", children: group.file })] }), group.changes.map((change, i) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("details", { className: "changes", "data-test": "changes-log", children: [_jsxs("summary", { className: "changes__title", "data-test": "changes-toggle", children: [_jsx("span", { className: "changes__title-label", children: "Changes" }), total > 0 ? _jsx("span", { className: "changes__count", children: total }) : null, _jsx(IconChevronDown, { className: "changes__toggle-icon", size: 15, stroke: 2, "aria-hidden": "true" })] }), _jsx("div", { className: "changes__content", children: groups.length === 0 && structuralChanges.length === 0 && sketches.length === 0 && sketchStore.error === null ? (_jsx("div", { className: "changes__empty", "data-test": "changes-empty", children: "No changes yet" })) : (_jsxs(_Fragment, { children: [groups.map((group) => (_jsxs("div", { className: "changes__group", "data-test": "changes-group", "data-cid": group.label, children: [_jsxs("div", { className: "changes__group-title", children: [_jsx("span", { children: group.label }), _jsx("span", { className: "changes__group-file", children: group.file })] }), group.changes.map((change, i) => {
                                             const presentation = presentChange(change);
                                             const instanceDiagnostics = isElementChange(change) && change.scope === "rendered-instance"
                                                 && change.instanceOverride
@@ -88,5 +92,5 @@ export function ChangesLog({ onClearSession }) {
                                                                 ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
                                                                     ? `${change.presentation.destinationParentTag} position ${change.presentation.toIndex + 1}`
                                                                     : `${structuralParentLabel(change, "destination")} position ${change.presentation.toIndex + 1}`
-                                                                : "Removed" })] }), _jsx("span", { className: "changes__scope", "data-test": "structural-scope", children: "This rendered item only" }), getStructuralChangeDiagnostics(change.id).map((diagnostic) => (_jsx("span", { className: "changes__diagnostic", "data-test": "structural-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, "data-reason": diagnostic.reason, children: structuralDiagnosticText(diagnostic) }, `${diagnostic.document}:${diagnostic.status}:${diagnostic.reason ?? ""}`))), _jsx(Button, { size: "compact", className: "changes__revert", "data-test": "dom-change-revert", onClick: () => revertStructuralChange(change.id), children: "Revert" })] })] }, change.id)))] })) })] }), onClearSession ? (_jsx("div", { className: "changes__session-action", "data-test": "session-actions", children: _jsx(Button, { variant: "secondary", type: "button", "data-test": "clear-session", onClick: onClearSession, children: "Clear Changes" }) })) : null] }));
+                                                                : "Removed" })] }), _jsx("span", { className: "changes__scope", "data-test": "structural-scope", children: "This rendered item only" }), getStructuralChangeDiagnostics(change.id).map((diagnostic) => (_jsx("span", { className: "changes__diagnostic", "data-test": "structural-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, "data-reason": diagnostic.reason, children: structuralDiagnosticText(diagnostic) }, `${diagnostic.document}:${diagnostic.status}:${diagnostic.reason ?? ""}`))), _jsx(Button, { size: "compact", className: "changes__revert", "data-test": "dom-change-revert", onClick: () => revertStructuralChange(change.id), children: "Revert" })] })] }, change.id))), _jsx(SketchChanges, {})] })) })] }), onClearSession ? (_jsx("div", { className: "changes__session-action", "data-test": "session-actions", children: _jsx(Button, { variant: "secondary", type: "button", "data-test": "clear-session", onClick: onClearSession, children: "Clear Changes" }) })) : null] }));
 }