nudge-ui 0.2.2 → 0.2.3

package/dist/inspector/iterations/coordinator.js

@@ -0,0 +1,130 @@
+import { HTML_ARTIFACT_REVISION_ATTRIBUTE } from "../../transport/artifacts.js";
+import { getDraftForCard, getDraftContentsForCard, clearSavedIterationDraft } from "../drafts/store.js";
+import { lockDraft } from "../changes/draftChanges.js";
+import { canWriteWorkspace } from "../canvas/workspaceLease.js";
+import { projectDraftToDocument, isCanvasProjectionRevisionCurrent, projectToAllReadyCards } from "../canvas/projection.js";
+import { isInlineTextEditingActive } from "../inline-text/inlineTextEditor.js";
+import { captureHtmlIteration } from "./capture.js";
+import { artifactDocumentUrl, commitHtmlArtifact, readHtmlArtifactRevision } from "./client.js";
+/** Owns save ordering, draft settlement, and external document promotion. */
+export function createHtmlIterationCoordinator(storage) {
+    const operations = new Map();
+    async function serialize(id, operation) {
+        const previous = operations.get(id) ?? Promise.resolve();
+        const pending = previous.catch(() => undefined).then(operation);
+        operations.set(id, pending);
+        try {
+            return await pending;
+        }
+        finally {
+            if (operations.get(id) === pending)
+                operations.delete(id);
+        }
+    }
+    return {
+        prepare(cardId, artifactId, baseRevision, capture) {
+            return serialize(artifactId, async () => {
+                if (!canWriteWorkspace())
+                    throw new Error("This workspace is open in another tab.");
+                const draft = getDraftForCard(cardId);
+                const workspace = getDraftContentsForCard(cardId);
+                if (!draft || draft.target.kind !== "html" || draft.target.artifactId !== artifactId || !workspace)
+                    throw new Error("The iteration draft is no longer available.");
+                const html = await capture();
+                const current = getDraftForCard(cardId);
+                if (current?.id !== draft.id || current.revision !== draft.revision) {
+                    throw new Error("The iteration changed while saving. Your edits are still pending. Try again.");
+                }
+                const release = lockDraft(draft.id);
+                try {
+                    if (!canWriteWorkspace())
+                        throw new Error("This workspace is open in another tab.");
+                    await storage.commit(artifactId, { document: baseRevision, preview: baseRevision }, html);
+                    if (!canWriteWorkspace())
+                        throw new Error("The iteration was saved. Reopen the active workspace to continue.");
+                }
+                finally {
+                    release();
+                }
+                // No await between releasing the lock and settling this exact revision.
+                if (!clearSavedIterationDraft(cardId, draft.revision)) {
+                    throw new Error("The iteration was saved, but its newer edits remain pending.");
+                }
+                return workspace;
+            });
+        },
+        refresh(cardId, artifactId, baseRevision, available) {
+            return serialize(artifactId, async () => {
+                const clean = () => {
+                    const workspace = getDraftContentsForCard(cardId);
+                    return canWriteWorkspace() && available() && workspace !== null
+                        && workspace.changes.length === 0 && workspace.structuralChanges.length === 0;
+                };
+                if (!clean())
+                    return false;
+                const revision = await storage.readRevision(artifactId);
+                if (!clean())
+                    return false;
+                // A previous promotion may have completed while an inline edit deferred reload.
+                if (revision.document === revision.preview)
+                    return revision.preview !== baseRevision;
+                const draft = getDraftForCard(cardId);
+                if (!draft)
+                    return false;
+                const release = lockDraft(draft.id);
+                try {
+                    await storage.commit(artifactId, revision);
+                }
+                finally {
+                    release();
+                }
+                return clean();
+            });
+        },
+    };
+}
+const coordinator = createHtmlIterationCoordinator({ readRevision: readHtmlArtifactRevision, commit: commitHtmlArtifact });
+function loadedRevision(frame) {
+    const revision = frame.contentDocument?.documentElement.getAttribute(HTML_ARTIFACT_REVISION_ATTRIBUTE);
+    if (!revision || !/^[a-f0-9]{64}$/.test(revision))
+        throw new Error("The HTML iteration is still loading. Try again when the frame is ready.");
+    return revision;
+}
+/** Materializes pending intent before the agent can start editing document.html. */
+export async function prepareHtmlIterationHandoff(cardId, artifactId, frame) {
+    if (isInlineTextEditingActive())
+        throw new Error("Finish editing the text before saving this iteration.");
+    const contents = getDraftContentsForCard(cardId);
+    if (!contents)
+        throw new Error("The iteration draft is no longer available.");
+    if (contents.changes.length + contents.structuralChanges.length === 0)
+        return contents;
+    const document = frame.contentDocument;
+    const baseRevision = loadedRevision(frame);
+    try {
+        const workspace = await coordinator.prepare(cardId, artifactId, baseRevision, async () => {
+            if (!document || isInlineTextEditingActive())
+                throw new Error("Finish editing the text before saving this iteration.");
+            const workspace = getDraftContentsForCard(cardId);
+            if (!workspace)
+                throw new Error("The iteration draft is no longer available.");
+            const revision = await projectDraftToDocument(document, workspace);
+            if (revision === null)
+                throw new Error("The iteration preview is still updating. Try again.");
+            const html = await captureHtmlIteration(frame);
+            if (frame.contentDocument !== document || !isCanvasProjectionRevisionCurrent(document, revision)) {
+                throw new Error("The iteration changed while saving. Your edits are still pending. Try again.");
+            }
+            return html;
+        });
+        frame.src = `${artifactDocumentUrl(artifactId)}?revision=${Date.now()}`;
+        return workspace;
+    }
+    finally {
+        projectToAllReadyCards();
+    }
+}
+export async function refreshHtmlIteration(cardId, artifactId, frame) {
+    const document = frame.contentDocument;
+    return coordinator.refresh(cardId, artifactId, loadedRevision(frame), () => frame.contentDocument === document && !isInlineTextEditingActive());
+}

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

@@ -0,0 +1,3 @@
+/** Defines the edit destination for every HTML-iteration handoff, including fallback copies. */
+export declare function htmlIterationPrompt(id: string, changes: string, noInspectorChanges: boolean, hasSketches: boolean, customInstructions?: string): string;
+export declare function htmlIterationImplementationPrompt(id: string, label: string, page: string, changes: string): string;

package/dist/inspector/iterations/prompt.js

@@ -0,0 +1,26 @@
+/** Defines the edit destination for every HTML-iteration handoff, including fallback copies. */
+export function htmlIterationPrompt(id, changes, noInspectorChanges, hasSketches, customInstructions = "") {
+    const directory = `.nudge/artifacts/${id}`;
+    return [
+        "# Edit this HTML iteration",
+        "",
+        `Edit only \`${directory}/document.html\`. This is the standalone HTML and CSS shown in the selected Nudge iteration frame.`,
+        "Preserve its responsive CSS and existing design edits. Keep application source files unchanged. Any original source locations below identify captured elements; they are not files to edit.",
+        `Keep \`${directory}/baseline.html\`, \`${directory}/preview.html\`, and metadata unchanged. Nudge will reload the iteration from your updated document.`,
+        ...(hasSketches ? ["Implement the attached sketch notes in this iteration's HTML and CSS. Match numbered notes to their marks in the image."] : []),
+        "",
+        ...(noInspectorChanges ? ["Use the current iteration as the editing base. Existing visual edits are already saved in its markup and styles.", ...(customInstructions.trim() ? ["", "## Custom instructions", "", customInstructions.trim()] : [])] : [changes]),
+    ].join("\n");
+}
+export function htmlIterationImplementationPrompt(id, label, page, changes) {
+    const directory = `.nudge/artifacts/${id}`;
+    return [
+        `# Implement ${label} in the live app`,
+        "",
+        `Page: ${page}`,
+        `Use \`${directory}/document.html\` as the design reference, including all saved visual edits.`,
+        "Update application source for this page to match it. Reuse existing components and styles, and preserve app behavior and data.",
+        "Keep iteration files unchanged; captured source locations below are hints for finding app code.",
+        ...(changes.trim() ? ["", changes] : []),
+    ].join("\n");
+}

package/dist/inspector/overlay/DomNavigator.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
+import { IconMenu2 } from "@tabler/icons-react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
 import { setSelectedElement } from "../selection/selectionStore.js";
 import { computeNavigationNodes } from "../selection/hierarchy.js";
 import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
-function nodeLabel(node) {
-    return node.getAttribute("data-cid") ?? node.localName;
-}
+import { portalContainer } from "../ui/portalContainer.js";
+import { cx } from "../ui/classNames.js";
 function nodeDescription(node) {
     const id = node.id ? `#${node.id}` : "";
     const className = typeof node.className === "string"
         ? node.className.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((name) => `.${name}`).join("")
         : "";
-    const source = node.getAttribute("data-src");
-    return `${node.localName}${id}${className}${source ? ` — ${source}` : ""}`;
+    return `${node.localName}${id}${className}`;
 }
 function selectNode(node) {
     const resolved = resolveSelectionFromElement(node);
@@ -21,20 +21,26 @@ function selectNode(node) {
 }
 export function DomNavigator({ selected, hierarchy, anchor, project }) {
     const nodes = computeNavigationNodes(selected.domElement, hierarchy);
+    const parents = nodes.filter((node) => node.direction === "up");
+    const children = nodes.filter((node) => node.direction === "down");
     const [expanded, setExpanded] = useState(false);
     const [hovered, setHovered] = useState(null);
     if (nodes.length === 0)
         return null;
     const preview = hovered ? project(hovered) : null;
-    const close = () => {
-        setExpanded(false);
-        setHovered(null);
+    const setOpen = (next) => {
+        setExpanded(next);
+        if (!next)
+            setHovered(null);
+    };
+    const renderItem = (node, depth) => {
+        const current = node === null;
+        const element = current ? selected.domElement : node.element;
+        return (_jsx("button", { type: "button", className: cx("dom-navigator__item", current && "dom-navigator__item--selected"), "data-test": "dom-navigator-item", "data-current": current ? "true" : undefined, "data-direction": node?.direction, "data-depth": depth, "data-cid": element.getAttribute("data-cid") ?? undefined, style: { paddingLeft: `calc(var(--space-8) + ${depth * 16}px)` }, role: "menuitem", "aria-current": current ? "true" : undefined, onMouseEnter: () => setHovered(current ? null : element), onClick: () => {
+                if (!current)
+                    selectNode(element);
+                setOpen(false);
+            }, children: _jsx("span", { children: nodeDescription(element) }) }, current ? "current" : `${node.direction}-${node.depth}-${element.getAttribute("data-cid") ?? element.localName}`));
     };
-    return (_jsxs(_Fragment, { children: [preview ? _jsx("div", { className: "dom-navigator-preview", "data-test": "dom-navigator-preview", style: preview, "aria-hidden": "true" }) : null, _jsxs("div", { className: "dom-navigator", "data-test": "dom-navigator", "aria-label": "DOM navigator", style: { left: Math.max(4, anchor.left), top: Math.max(4, anchor.top) }, onMouseEnter: () => setExpanded(true), onMouseLeave: close, onFocus: () => setExpanded(true), onBlur: (event) => {
-                    if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget))
-                        close();
-                }, children: [_jsxs("button", { type: "button", className: "dom-navigator__trigger", "data-test": "dom-navigator-trigger", "aria-expanded": expanded, "aria-haspopup": "menu", title: nodeDescription(selected.domElement), onMouseEnter: () => setHovered(null), children: [_jsx("span", { children: nodeLabel(selected.domElement) }), _jsx("span", { "aria-hidden": "true", children: "\u2304" })] }), expanded ? (_jsx("div", { className: "dom-navigator__menu", role: "menu", children: nodes.map((node) => (_jsxs("button", { type: "button", className: "dom-navigator__item", "data-test": "dom-navigator-item", "data-direction": node.direction, "data-depth": node.depth, "data-cid": node.element.getAttribute("data-cid") ?? undefined, title: nodeDescription(node.element), role: "menuitem", onMouseEnter: () => setHovered(node.element), onClick: () => {
-                                selectNode(node.element);
-                                close();
-                            }, children: [_jsx("span", { "aria-hidden": "true", children: node.direction === "up" ? "↑" : "↓" }), _jsx("span", { children: nodeLabel(node.element) })] }, `${node.direction}-${node.depth}-${node.element.getAttribute("data-cid") ?? node.element.localName}`))) })) : null] })] }));
+    return (_jsxs(_Fragment, { children: [preview ? _jsx("div", { className: "dom-navigator-preview", "data-test": "dom-navigator-preview", style: preview, "aria-hidden": "true" }) : null, _jsx("div", { className: "dom-navigator", "data-test": "dom-navigator", "aria-label": "DOM navigator", style: { left: Math.max(4, anchor.left), top: Math.max(4, anchor.top - 28) }, children: _jsxs(BasePopover.Root, { open: expanded, onOpenChange: setOpen, children: [_jsx(BasePopover.Trigger, { render: _jsx("button", { type: "button", className: "dom-navigator__trigger", "data-test": "dom-navigator-trigger", "aria-label": "Open DOM navigator", "aria-haspopup": "menu", "aria-expanded": expanded, onMouseEnter: () => setHovered(null) }), children: _jsx(IconMenu2, { size: 14, "aria-hidden": "true" }) }), _jsx("span", { className: "dom-navigator__label", children: nodeDescription(selected.domElement) }), _jsx(BasePopover.Portal, { container: portalContainer(), children: _jsx(BasePopover.Positioner, { className: "dom-navigator__positioner", side: "top", align: "start", sideOffset: 4, children: _jsxs(BasePopover.Popup, { className: "dom-navigator__menu", role: "menu", "aria-label": "DOM navigator", onMouseLeave: () => setHovered(null), children: [parents.slice().reverse().map((node) => renderItem(node, parents.length - node.depth)), renderItem(null, parents.length), children.map((node) => renderItem(node, parents.length + node.depth))] }) }) })] }) })] }));
 }

package/dist/inspector/overlay/interactionStyles.js

@@ -1,8 +1,10 @@
+import { DESIGN_SELECT_CURSOR, INTERACTION_CURSOR_PROPERTY } from "../ui/customCursors.js";
 const INTERACTION_STYLE_ID = "nudge-ui-interaction-styles";
 const interactionStyleDocuments = new Set();
 const INTERACTION_CSS = `
+  html, body,
   [data-cid], [data-cid] * {
-    cursor: default !important;
+    cursor: var(${INTERACTION_CURSOR_PROPERTY}, ${DESIGN_SELECT_CURSOR}) !important;
     -webkit-user-select: none !important;
     user-select: none !important;
   }

package/dist/inspector/overlay/spacingGestures.d.ts

@@ -30,9 +30,21 @@ export interface SpacingDescriptor {
 export declare const SPACING_GUIDE_HANDLE_LENGTH = 40;
 /** Finds the spacing target under a document-local pointer location. */
 export declare function getSpacingAffordanceAtPoint(doc: Document, x: number, y: number): SpacingAffordance | null;
+/** Finds the spacing target whose visible padding or gap area contains the
+ * pointer, even when the pointer is outside the drag handle. Hover previews use
+ * this; drags and the resize cursor still require the handle hit from
+ * getSpacingAffordanceAtPoint. */
+export declare function getSpacingHoverAtPoint(doc: Document, x: number, y: number): SpacingAffordance | null;
 /** Re-resolves a renderer-reported spacing descriptor in its owner document. */
 export declare function getSpacingAffordanceForDescriptor(element: HTMLElement, descriptor: SpacingDescriptor): SpacingAffordance | null;
-/** Calculates a direct-manipulation value, optionally stepping changes by 8px. */
+/**
+ * Calculates a direct-manipulation value, optionally stepping changes by 8px.
+ * While Shift is held the value snaps to a step anchor: the first displacement
+ * picks the nearest multiple of 8 from the authored value in the drag
+ * direction (ties resolve upward), and further movement adds whole 8px steps
+ * from that anchor, so the result is always a multiple of 8 once the drag
+ * moves. At the exact start point the authored value is preserved.
+ */
 export declare function spacingValueForDrag(affordance: Pick<SpacingAffordance, "dragAxis" | "direction" | "value">, start: {
     x: number;
     y: number;

package/dist/inspector/overlay/spacingGestures.js

@@ -263,6 +263,52 @@ function gapDragHit(segment) {
     const orientation = segment.axis === "horizontal" ? "vertical" : "horizontal";
     return guideHit(gapGuide(segment), orientation);
 }
+/** Matches the padding bar whose visible area contains the pointer, whether or
+ * not the point is inside the drag handle. Returns the first side by the same
+ * priority order as the drag affordances so both paths agree on overlaps. */
+function paddingAffordanceInAreaAtPoint(element, x, y) {
+    const model = boxModel(element);
+    if (!containsPoint(model.outer, x, y))
+        return null;
+    const sides = ["top", "right", "bottom", "left"];
+    for (const side of sides) {
+        const affordance = paddingAffordanceForSide(element, side, model);
+        if (affordance
+            && affordance.affectedAreas.some((area) => containsRectPoint(area, x, y))) {
+            return affordance;
+        }
+    }
+    return null;
+}
+/** Matches a layout gap whose visible area contains the pointer, whether or not
+ * the point is inside the drag handle. Shares segment priority and geometry
+ * with gapAffordanceAtPoint so hover and drag agree on crossed gap properties. */
+function gapAffordanceInAreaAtPoint(element, x, y) {
+    const segments = gapSegments(element);
+    if (segments.length === 0)
+        return null;
+    const candidate = segments.find((segment) => containsRectPoint(gapArea(segment), x, y));
+    if (!candidate)
+        return null;
+    const matchingSegments = segments.filter((segment) => segment.property === candidate.property);
+    const first = matchingSegments[0];
+    const guide = gapGuide(first);
+    return {
+        kind: "gap",
+        property: first.property,
+        side: null,
+        axis: first.axis,
+        dragAxis: first.axis === "horizontal" ? "x" : "y",
+        value: gapValue(getElementComputedStyle(element), first.property),
+        cursor: first.axis === "horizontal" ? "ew-resize" : "ns-resize",
+        guide,
+        affectedGuides: matchingSegments.map(gapGuide),
+        affectedAreas: matchingSegments.map(gapArea),
+        hit: gapDragHit(first),
+        direction: 1,
+        element,
+    };
+}
 function gapValue(style, property) {
     const direct = style.getPropertyValue(property)
         || (property === "row-gap" ? style.rowGap : style.columnGap);
@@ -313,6 +359,24 @@ export function getSpacingAffordanceAtPoint(doc, x, y) {
     }
     return null;
 }
+/** Finds the spacing target whose visible padding or gap area contains the
+ * pointer, even when the pointer is outside the drag handle. Hover previews use
+ * this; drags and the resize cursor still require the handle hit from
+ * getSpacingAffordanceAtPoint. */
+export function getSpacingHoverAtPoint(doc, x, y) {
+    const candidates = trackedElementsAtPoint(doc, x, y);
+    for (const element of candidates) {
+        const padding = paddingAffordanceInAreaAtPoint(element, x, y);
+        if (padding)
+            return padding;
+    }
+    for (const element of candidates) {
+        const gap = gapAffordanceInAreaAtPoint(element, x, y);
+        if (gap)
+            return gap;
+    }
+    return null;
+}
 /** Re-resolves a renderer-reported spacing descriptor in its owner document. */
 export function getSpacingAffordanceForDescriptor(element, descriptor) {
     if (descriptor.kind === "padding") {
@@ -329,14 +393,27 @@ export function getSpacingAffordanceForDescriptor(element, descriptor) {
     const guide = gapGuide(segment);
     return gapAffordanceAtPoint(element, guide.left + guide.width / 2, guide.top + guide.height / 2, descriptor.property);
 }
-/** Calculates a direct-manipulation value, optionally stepping changes by 8px. */
+/**
+ * Calculates a direct-manipulation value, optionally stepping changes by 8px.
+ * While Shift is held the value snaps to a step anchor: the first displacement
+ * picks the nearest multiple of 8 from the authored value in the drag
+ * direction (ties resolve upward), and further movement adds whole 8px steps
+ * from that anchor, so the result is always a multiple of 8 once the drag
+ * moves. At the exact start point the authored value is preserved.
+ */
 export function spacingValueForDrag(affordance, start, point, shiftKey = false) {
     const delta = affordance.dragAxis === "x" ? point.x - start.x : point.y - start.y;
     const signedDelta = delta * affordance.direction;
-    const adjustedDelta = shiftKey
-        ? Math.trunc(signedDelta / SPACING_SHIFT_STEP) * SPACING_SHIFT_STEP
-        : signedDelta;
-    return Math.max(0, Math.round(affordance.value + adjustedDelta));
+    if (shiftKey) {
+        const step = SPACING_SHIFT_STEP;
+        if (signedDelta !== 0) {
+            const anchor = signedDelta > 0
+                ? Math.ceil(affordance.value / step) * step
+                : Math.floor(affordance.value / step) * step;
+            return Math.max(0, anchor + Math.trunc(signedDelta / step) * step);
+        }
+    }
+    return Math.max(0, Math.round(affordance.value + signedDelta));
 }
 export function spacingValueCss(value) {
     return `${Math.max(0, Math.round(value))}px`;

package/dist/inspector/projection/{workspaceProjection.d.ts → draftProjection.d.ts}

@@ -3,8 +3,8 @@ import type { RenderedInstanceOverride } from "../changes/editModel.js";
 import { type StructuralChange } from "./structuralProjection.js";
 import type { ComponentOverride } from "../componentSemantics/types.js";
 import { type TextContentChangeRecord } from "../changes/types.js";
-import type { WorkspaceContents } from "../changes/workspaceChanges.js";
-export interface WorkspaceProjectionSource extends WorkspaceContents {
+import type { DraftContents } from "../changes/draftChanges.js";
+export interface DraftProjectionSource extends DraftContents {
     readonly revision: number;
 }
 export interface CompiledManagedStyles {
@@ -15,7 +15,7 @@ export interface SerializedManagedStyles {
     readonly css: string;
 }
 /** A complete, read-only projection for one document-local runtime. */
-export interface WorkspaceProjectionPlan<ManagedStyles> {
+export interface DraftProjectionPlan<ManagedStyles> {
     readonly sourceRevision: number;
     readonly managedStyles: ManagedStyles;
     readonly instanceOverrides: readonly RenderedInstanceOverride[];
@@ -31,7 +31,7 @@ export interface DocumentProjectionAdapter<ManagedStyles> {
     applyComponents(overrides: readonly ComponentOverride[]): void;
     applyManagedStyles(styles: ManagedStyles): void;
 }
-export declare function compileWorkspaceProjection(snapshot: WorkspaceProjectionSource): WorkspaceProjectionPlan<CompiledManagedStyles>;
+export declare function compileDraftProjection(snapshot: DraftProjectionSource): DraftProjectionPlan<CompiledManagedStyles>;
 /**
  * Replaces one document projection in the required order.
  *
@@ -39,5 +39,5 @@ export declare function compileWorkspaceProjection(snapshot: WorkspaceProjection
  * can depend on the restored element order. Managed CSS is applied last so
  * selectors can use the document-local instance markers installed above.
  */
-export declare function applyWorkspaceProjection<ManagedStyles>(adapter: DocumentProjectionAdapter<ManagedStyles>, plan: WorkspaceProjectionPlan<ManagedStyles>): void;
-export declare function applyHostWorkspaceProjection(plan: WorkspaceProjectionPlan<CompiledManagedStyles>): void;
+export declare function applyDraftProjection<ManagedStyles>(adapter: DocumentProjectionAdapter<ManagedStyles>, plan: DraftProjectionPlan<ManagedStyles>): void;
+export declare function applyHostDraftProjection(plan: DraftProjectionPlan<CompiledManagedStyles>): void;

package/dist/inspector/projection/{workspaceProjection.js → draftProjection.js}

@@ -6,7 +6,7 @@ import { replaceComponentOverrideProjection } from "../componentSemantics/index.
 import { componentChangeToOverride } from "../componentSemantics/changeModel.js";
 import { isComponentChange } from "../changes/types.js";
 import { buildManagedStyleRules } from "../changes/managedStyleProjection.js";
-export function compileWorkspaceProjection(snapshot) {
+export function compileDraftProjection(snapshot) {
     const changes = [...snapshot.changes];
     const rules = buildManagedStyleRules(changes);
     return {
@@ -31,7 +31,7 @@ export function compileWorkspaceProjection(snapshot) {
  * can depend on the restored element order. Managed CSS is applied last so
  * selectors can use the document-local instance markers installed above.
  */
-export function applyWorkspaceProjection(adapter, plan) {
+export function applyDraftProjection(adapter, plan) {
     adapter.applyStructural(plan.structuralChanges);
     adapter.applyRenderedInstances(plan.instanceOverrides);
     adapter.applyText(plan.textContentChanges);
@@ -53,6 +53,6 @@ const hostDocumentProjectionAdapter = {
         applyRules([...styles.rules]);
     },
 };
-export function applyHostWorkspaceProjection(plan) {
-    applyWorkspaceProjection(hostDocumentProjectionAdapter, plan);
+export function applyHostDraftProjection(plan) {
+    applyDraftProjection(hostDocumentProjectionAdapter, plan);
 }

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

@@ -1,3 +1,4 @@
+import type { FrameProjection } from "../canvas/projection.js";
 import type { RenderedInstanceOverride, RenderedInstanceRef } from "../changes/editModel.js";
 export { isRenderedInstanceOverride, isRenderedInstanceRef } from "../changes/editModel.js";
 export type { RenderedInstanceOverride, RenderedInstanceRef, SourceSiteRef } from "../changes/editModel.js";
@@ -50,7 +51,7 @@ export declare function getRenderedInstanceProjectionReports(doc: Document): rea
 /** Diagnostics arrive independently when a renderer reports or React reconciles. */
 export declare function subscribeRenderedInstanceDiagnostics(listener: () => void): () => void;
 export declare function getRenderedInstanceDiagnosticRevision(): number;
-export declare function recordCanvasRenderedInstanceProjectionReports(cardId: string, revision: number, reports: readonly DocumentProjectionReport[]): void;
+export declare function recordCanvasRenderedInstanceProjectionReports(cardId: string, revision: number, reports: readonly DocumentProjectionReport[], projection?: FrameProjection): void;
 export declare function clearCanvasRenderedInstanceProjectionReports(cardId: string): void;
 export declare function getRenderedInstanceChangeDiagnostics(overrideId: string): RenderedInstanceChangeDiagnostic[];
 export declare function isDocumentProjectionReport(value: unknown): value is DocumentProjectionReport;

package/dist/inspector/projection/renderedInstance.js

@@ -1,3 +1,4 @@
+import { getActiveDraftChanges, getDraftChanges } from "../changes/draftChanges.js";
 import { escapeAttrValue } from "./cssEscapes.js";
 import { isNudgeUiDev } from "../runtime/devFlag.js";
 import { sourceSiteSelector } from "../selection/sourceSite.js";
@@ -74,8 +75,8 @@ export function resolveRenderedInstance(doc, ref) {
 /** Checks stable source/evidence fields without treating a post-move ordinal as identity. */
 export function matchesRenderedInstanceEvidence(el, ref) {
     const { props, text, ariaLabel = null } = ref.locator;
-    return el.getAttribute("data-cid") === ref.sourceSite.cid
-        && el.getAttribute("data-src") === ref.sourceSite.src
+    return (el.getAttribute("data-cid") ?? "") === ref.sourceSite.cid
+        && (el.getAttribute("data-src") ?? "") === ref.sourceSite.src
         && el.getAttribute("data-cprops") === props
         && normalizedText(el) === text
         && el.getAttribute("aria-label") === ariaLabel;
@@ -254,10 +255,10 @@ export function subscribeRenderedInstanceDiagnostics(listener) {
 export function getRenderedInstanceDiagnosticRevision() {
     return diagnosticRevision;
 }
-export function recordCanvasRenderedInstanceProjectionReports(cardId, revision, reports) {
+export function recordCanvasRenderedInstanceProjectionReports(cardId, revision, reports, projection) {
     if (!Number.isSafeInteger(revision) || revision < 0 || !reports.every(isDocumentProjectionReport))
         return;
-    const expected = new Set(canonicalOverrides.keys());
+    const expected = projection ? new Set(projection.instanceOverrides.map((record) => record.id)) : new Set(canonicalOverrides.keys());
     if (reports.length !== expected.size || new Set(reports.map((report) => report.overrideId)).size !== reports.length
         || reports.some((report) => !expected.has(report.overrideId)))
         return;
@@ -267,7 +268,8 @@ export function recordCanvasRenderedInstanceProjectionReports(cardId, revision,
     const next = reports.map((report) => ({ ...report }));
     if (existing && existing.revision === revision && sameReports(existing.reports, next))
         return;
-    reportsByCanvasCard.set(cardId, { revision, reports: next });
+    const current = getActiveDraftChanges();
+    reportsByCanvasCard.set(cardId, { revision, reports: next, draftId: projection?.draftId ?? current.draftId, draftRevision: projection?.draftRevision ?? current.revision });
     notifyDiagnostics();
 }
 export function clearCanvasRenderedInstanceProjectionReports(cardId) {
@@ -281,6 +283,8 @@ export function getRenderedInstanceChangeDiagnostics(overrideId) {
     if (host)
         diagnostics.push({ ...host, document: "Inspect" });
     for (const [cardId, entry] of reportsByCanvasCard) {
+        if (entry.draftId !== getActiveDraftChanges().draftId || entry.draftRevision !== getDraftChanges(entry.draftId).revision)
+            continue;
         const report = entry.reports.find((candidate) => candidate.overrideId === overrideId);
         if (report)
             diagnostics.push({ ...report, document: `Canvas ${cardId}` });

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

@@ -1,3 +1,4 @@
+import type { FrameProjection } from "../canvas/projection.js";
 import type { StructuralChange, StructuralDelete, StructuralMove, StructuralProjectionReason, StructuralProjectionReport } from "../changes/structuralTypes.js";
 export { isStructuralChange, isStructuralDelete, isStructuralMove, isStructuralProjectionReport, } from "./structuralProjectionBoundary.js";
 /**
@@ -76,7 +77,7 @@ export declare function getStructuralProjectionReports(doc: Document): readonly
  * Frames may report only their document-local outcome. The controller owns
  * these reports and filters them against its current canonical change set.
  */
-export declare function recordCanvasStructuralProjectionReports(cardId: string, revision: number, reports: readonly StructuralProjectionReport[]): void;
+export declare function recordCanvasStructuralProjectionReports(cardId: string, revision: number, reports: readonly StructuralProjectionReport[], projection?: FrameProjection): void;
 export declare function clearCanvasStructuralProjectionReports(cardId: string): void;
 /** Removes document-local reports for canonical intents that no longer exist. */
 export declare function pruneStructuralProjectionReports(changeIds: ReadonlySet<string>): void;

package/dist/inspector/projection/structuralProjection.js

@@ -1,6 +1,7 @@
+import { getActiveDraftChanges, getDraftChanges } from "../changes/draftChanges.js";
 import { captureRenderedInstance, matchesRenderedInstanceEvidence, resolveRenderedInstance, } from "./renderedInstance.js";
 import { isStructuralProjectionReport } from "./structuralProjectionBoundary.js";
-import { resetWorkspaceChanges, workspaceChangeStore, } from "../changes/workspaceChanges.js";
+import { resetDraftChanges, draftChangeStore, } from "../changes/draftChanges.js";
 export { isStructuralChange, isStructuralDelete, isStructuralMove, isStructuralProjectionReport, } from "./structuralProjectionBoundary.js";
 const VOID_PARENT_TAGS = new Set([
     "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr",
@@ -193,9 +194,9 @@ export function createStructuralDelete(element, id = structuralId()) {
         ...(route ? { route } : {}),
         ...(state ? { state } : {}),
     };
-    if (!workspaceChangeStore.commitStructuralChange(change))
+    if (!draftChangeStore.commitStructuralChange(change))
         return null;
-    projectStructuralChanges(workspaceChangeStore.getSnapshot());
+    projectStructuralChanges(draftChangeStore.getSnapshot());
     return change;
 }
 /**
@@ -236,22 +237,22 @@ export function createStructuralMove(element, destination, id = structuralId())
                 : destinationChildren.length - (sameParent ? 1 : 0),
         },
     };
-    if (!workspaceChangeStore.commitStructuralChange(change))
+    if (!draftChangeStore.commitStructuralChange(change))
         return null;
-    projectStructuralChanges(workspaceChangeStore.getSnapshot());
+    projectStructuralChanges(draftChangeStore.getSnapshot());
     return change;
 }
 export function getStructuralChanges() {
-    return workspaceChangeStore.getSnapshot().structuralChanges;
+    return draftChangeStore.getSnapshot().structuralChanges;
 }
 export function getStructuralDeletes() {
     return getStructuralChanges().filter((change) => change.kind === "delete");
 }
 /** Revert removes one canonical intent and leaves every other intent intact. */
 export function revertStructuralChange(changeId) {
-    const changed = workspaceChangeStore.revertStructuralChangeRecord(changeId);
+    const changed = draftChangeStore.revertStructuralChangeRecord(changeId);
     if (changed)
-        projectStructuralChanges(workspaceChangeStore.getSnapshot());
+        projectStructuralChanges(draftChangeStore.getSnapshot());
     return changed;
 }
 /**
@@ -265,10 +266,10 @@ export function revertStructuralChange(changeId) {
 export function reconcileVerifiedStructuralChanges(verifiedIds) {
     if (verifiedIds.size === 0)
         return 0;
-    const removed = workspaceChangeStore.reconcileWorkspaceChanges(new Set(), verifiedIds);
+    const removed = draftChangeStore.reconcileActiveDraftChanges(new Set(), verifiedIds);
     if (removed === 0)
         return 0;
-    projectStructuralChanges(workspaceChangeStore.getSnapshot());
+    projectStructuralChanges(draftChangeStore.getSnapshot());
     for (const [cardId, canvasReports] of reportsByCanvasCard) {
         reportsByCanvasCard.set(cardId, {
             ...canvasReports,
@@ -280,7 +281,7 @@ export function reconcileVerifiedStructuralChanges(verifiedIds) {
 }
 /** State changes drive controller-to-renderer projection. Diagnostics do not. */
 export function subscribeStructuralChanges(listener) {
-    return workspaceChangeStore.subscribe(listener);
+    return draftChangeStore.subscribe(listener);
 }
 /** Compatibility name retained while the controller moved to a full union. */
 export const subscribeStructuralDeletes = subscribeStructuralChanges;
@@ -549,10 +550,10 @@ export function getStructuralProjectionReports(doc) {
  * Frames may report only their document-local outcome. The controller owns
  * these reports and filters them against its current canonical change set.
  */
-export function recordCanvasStructuralProjectionReports(cardId, revision, reports) {
+export function recordCanvasStructuralProjectionReports(cardId, revision, reports, projection) {
     if (!Number.isSafeInteger(revision) || revision < 0 || !reports.every(isStructuralProjectionReport))
         return;
-    const expected = new Set(getStructuralChanges().map((change) => change.id));
+    const expected = projection ? new Set(projection.structuralChanges.map((record) => record.id)) : new Set(getStructuralChanges().map((change) => change.id));
     if (reports.length !== expected.size || new Set(reports.map((report) => report.changeId)).size !== reports.length
         || reports.some((report) => !expected.has(report.changeId)))
         return;
@@ -562,7 +563,8 @@ export function recordCanvasStructuralProjectionReports(cardId, revision, report
     const next = reports.map((report) => ({ ...report }));
     if (existing && existing.revision === revision && sameReports(existing.reports, next))
         return;
-    reportsByCanvasCard.set(cardId, { revision, reports: next });
+    const current = getActiveDraftChanges();
+    reportsByCanvasCard.set(cardId, { revision, reports: next, draftId: projection?.draftId ?? current.draftId, draftRevision: projection?.draftRevision ?? current.revision });
     notifyDiagnostics();
 }
 export function clearCanvasStructuralProjectionReports(cardId) {
@@ -594,6 +596,8 @@ export function getStructuralChangeDiagnostics(changeId) {
     if (host)
         diagnostics.push({ ...host, document: "Inspect" });
     for (const [cardId, entry] of reportsByCanvasCard) {
+        if (entry.draftId !== getActiveDraftChanges().draftId || entry.draftRevision !== getDraftChanges(entry.draftId).revision)
+            continue;
         const report = entry.reports.find((candidate) => candidate.changeId === changeId);
         if (report)
             diagnostics.push({ ...report, document: `Canvas ${cardId}` });
@@ -615,7 +619,7 @@ export function resetStructuralDeleteProjection() {
     reportsByCanvasCard.clear();
     nextStructuralId = 1;
     diagnosticRevision = 0;
-    resetWorkspaceChanges();
+    resetDraftChanges();
     notifyDiagnostics();
 }
 /**