nudge-ui 0.2.3 → 0.2.4

package/dist/inspector/agent/verification.d.ts

@@ -13,12 +13,6 @@ export interface HandoffSnapshot {
     readonly changes: readonly ChangeRecord[];
     readonly structuralChanges: readonly StructuralChange[];
 }
-/**
- * User-facing agent completion state, named once.
- * "completed" means the agent finished; "verified" means completed work was
- * positively reconciled against source-rendered output.
- */
-export type AgentCompletionStatus = "completed" | "verified";
 /** Stable, preview-metadata-free identity for one prompt handoff record. */
 export declare function handoffChangeFingerprint(change: ChangeRecord): string;
 /** Stable identity for one structural record included in a prompt handoff. */
@@ -43,6 +37,10 @@ export declare function getAgentDispatchSize(revision: number): number;
  */
 export declare function verifyAndReconcileHandoff(snapshot: HandoffSnapshot, doc?: Document | null): Promise<number>;
 export declare function documentBelongsToHandoff(doc: Document, owner: HandoffOwner): boolean;
+/** Returns the records captured for one dispatch until it is reconciled. */
+export declare function getAgentDispatch(revision: number): HandoffSnapshot | null;
+/** Records in the owner draft that still equal what a handoff sent. */
+export declare function unchangedHandoffRecords(snapshot: HandoffSnapshot): Pick<HandoffSnapshot, "changes" | "structuralChanges">;
 /** Reconciles the captured records for one completed connected-agent request. */
 export declare function verifyAndReconcileAgentDispatch(revision: number): Promise<number>;
 /** Test/session reset for in-memory dispatch snapshots. */

package/dist/inspector/agent/verification.js

@@ -7,7 +7,9 @@ import { selectorForManagedChange } from "../changes/managedStyleProjection.js";
 import { getActiveDraftChanges, getDraftChanges, reconcileDraftChanges } from "../changes/draftChanges.js";
 import { isComponentChange, isTextContentChange, isTokenChange, } from "../changes/changesLog.js";
 import { verifyPreview } from "../projection/managedStylesheet.js";
-import { resolveRenderedInstance } from "../projection/renderedInstance.js";
+import { resolveMovedRenderedInstance } from "../projection/renderedInstance.js";
+import { relocateSourceSite, sourceSiteSelector } from "../selection/sourceSite.js";
+import { boundRuntimeEvidence, normalizeRuntimeTag } from "../runtime/staticHtmlRuntimeIdentity.js";
 import { documentStateKey, } from "../projection/structuralProjection.js";
 import { resolveTextProjectionTarget, resolveTextProjectionTextNode, } from "../projection/textProjection.js";
 import { applyHostDraftProjection, compileDraftProjection, } from "../projection/draftProjection.js";
@@ -48,32 +50,60 @@ function requestedStyleValue(change) {
         return tokenReference(change.newToken);
     return change.rawValue ?? "";
 }
-function verifyStyle(change, doc) {
-    if (!isTokenChange(change) && (change.state ?? "base") !== "base")
-        return false;
-    const selector = selectorForManagedChange(change);
+function queryTargets(doc, selector) {
     if (!selector)
-        return false;
-    let targets;
+        return [];
     try {
-        targets = Array.from(doc.querySelectorAll(selector));
+        return Array.from(doc.querySelectorAll(selector));
     }
     catch {
-        return false;
+        return [];
     }
+}
+/** Resolves current style targets, following a source site whose position shifted. */
+function styleTargets(change, doc) {
+    if (isTokenChange(change))
+        return queryTargets(doc, change.selector);
+    // The projection marker is lifted for verification; evidence names the instance.
+    if (change.scope === "rendered-instance") {
+        const resolved = change.instanceOverride
+            ? resolveMovedRenderedInstance(doc, change.instanceOverride.target)
+            : null;
+        return resolved?.status === "resolved" ? [resolved.element] : [];
+    }
+    const targets = queryTargets(doc, selectorForManagedChange(change));
+    const evidence = change.sourceEvidence;
+    if (targets.length > 0 || !evidence || change.column === undefined)
+        return targets;
+    const site = relocateSourceSite(doc, { cid: change.cid, src: `${change.file}:${change.line}:${change.column}` }, (element) => normalizeRuntimeTag(element.tagName) === evidence.tagName
+        && boundRuntimeEvidence(element.getAttribute("data-cprops")) === evidence.props);
+    return site ? queryTargets(doc, sourceSiteSelector(site.cid, site.src)) : [];
+}
+function verifyStyle(change, doc) {
+    if (!isTokenChange(change) && (change.state ?? "base") !== "base")
+        return false;
+    const targets = styleTargets(change, doc);
     const requested = requestedStyleValue(change);
     return requested.length > 0
         && targets.length > 0
         && targets.every((target) => verifyPreview(target, change.property, requested).status === "applied");
 }
 function verifyText(change, doc) {
-    const resolved = resolveTextProjectionTarget(doc, change.target, change.after);
+    let target = change.target;
+    let resolved = resolveTextProjectionTarget(doc, target, change.after);
+    if (resolved.status === "missing") {
+        const sourceSite = relocateSourceSite(doc, target.sourceSite, (element) => element.getAttribute("data-cprops") === target.props && element.getAttribute("aria-label") === target.ariaLabel);
+        if (sourceSite) {
+            target = { ...target, sourceSite };
+            resolved = resolveTextProjectionTarget(doc, target, change.after);
+        }
+    }
     if (resolved.status !== "resolved")
         return false;
-    const node = resolveTextProjectionTextNode(resolved.element, change.target, change.after);
+    const node = resolveTextProjectionTextNode(resolved.element, target, change.after);
     if (node)
         return node.nodeValue === change.after;
-    return change.target.textNodePath === undefined
+    return target.textNodePath === undefined
         && change.after.length === 0
         && (resolved.element.textContent ?? "") === "";
 }
@@ -97,7 +127,7 @@ function verifyStructuralDelete(change, doc) {
     }
     return currentRoute === change.route
         && documentStateKey(doc) === change.state
-        && resolveRenderedInstance(doc, change.target).status === "missing";
+        && resolveMovedRenderedInstance(doc, change.target).status === "missing";
 }
 /**
  * A move verifies when the element sits at its recorded destination without
@@ -106,17 +136,17 @@ function verifyStructuralDelete(change, doc) {
  * stay unverified instead of trusting rendered placement alone.
  */
 function verifyStructuralMove(change, doc) {
-    const target = resolveRenderedInstance(doc, change.target);
+    const target = resolveMovedRenderedInstance(doc, change.target);
     if (target.status !== "resolved")
         return false;
-    const parent = resolveRenderedInstance(doc, change.destination.parent);
+    const parent = resolveMovedRenderedInstance(doc, change.destination.parent);
     if (parent.status !== "resolved")
         return false;
     if (target.element.parentElement !== parent.element)
         return false;
     if (!change.destination.before)
         return target.element.nextElementSibling === null;
-    const before = resolveRenderedInstance(doc, change.destination.before);
+    const before = resolveMovedRenderedInstance(doc, change.destination.before);
     return before.status === "resolved" && target.element.nextElementSibling === before.element;
 }
 function verifiedStructuralChangeIds(eligible, doc) {
@@ -278,6 +308,20 @@ function handoffDocument(owner) {
     }
     return owner.target.kind === "application" && !isEditorShellDocument() ? document : null;
 }
+/** Returns the records captured for one dispatch until it is reconciled. */
+export function getAgentDispatch(revision) {
+    return dispatches.get(revision) ?? null;
+}
+/** Records in the owner draft that still equal what a handoff sent. */
+export function unchangedHandoffRecords(snapshot) {
+    const sent = new Set(snapshot.changes.map(handoffChangeFingerprint));
+    const sentStructural = new Set(snapshot.structuralChanges.map(handoffStructuralFingerprint));
+    const current = getDraftChanges(snapshot.owner.draftId);
+    return {
+        changes: current.changes.filter((change) => sent.has(handoffChangeFingerprint(change))),
+        structuralChanges: current.structuralChanges.filter((change) => sentStructural.has(handoffStructuralFingerprint(change))),
+    };
+}
 /** Reconciles the captured records for one completed connected-agent request. */
 export async function verifyAndReconcileAgentDispatch(revision) {
     const snapshot = dispatches.get(revision);

package/dist/inspector/canvas/CanvasCard.js

@@ -27,6 +27,7 @@ import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { reconcileRuntimeWithDocumentStylesheets } from "../runtime/documentStylesheetOrder.js";
 import { subscribeCanvasRendererMessages } from "./rendererMessageRouter.js";
 import { SketchFrameOverlay } from "../sketch/SketchFrameOverlay.js";
+import { installFrameScrollbarStyles } from "./frameScrollbarStyles.js";
 import { getCanvasResizeEdges, resizeCanvasRect, } from "./canvasResize.js";
 import { getDraftContentsForCard } from "../drafts/store.js";
 import { removeFrame } from "../workspace/commands.js";
@@ -100,6 +101,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         session.registerCleanup(() => releaseDocumentProjection(frameDocument));
         session.registerCleanup(() => disposeInlineTextEdit("frame-disposed", frameDocument));
         session.registerCleanup(startClipboardHandoffController(frameDocument));
+        session.registerCleanup(installFrameScrollbarStyles(frameDocument));
         documentSessionRef.current = { document: frameDocument, session };
     }, [disposeDocumentSession, documentOwner]);
     useEffect(() => {

package/dist/inspector/canvas/CanvasElementOverlay.js

@@ -383,6 +383,9 @@ export function CanvasElementOverlay() {
                     borders,
                     spacingGuides: affordance?.affectedGuides ?? [],
                     spacingAreas: affordance?.affectedAreas ?? [],
+                    spacingHandleBadge: current.spacingHandleBadge && affordance
+                        ? { ...current.spacingHandleBadge, value: affordance.value }
+                        : current.spacingHandleBadge,
                 };
             });
         };
@@ -421,6 +424,14 @@ export function CanvasElementOverlay() {
                     : null;
                 const spacingGuides = matchingAffordance?.affectedGuides ?? [];
                 const spacingAreas = matchingAffordance?.affectedAreas ?? [];
+                const handleAffordance = msg.spacing && hoverElement
+                    ? getSpacingAffordanceForDescriptor(hoverElement, msg.spacing)
+                    : null;
+                const spacingHandleBadge = hoverPoint
+                    && handleAffordance
+                    && spacingDescriptorMatches(handleAffordance, msg.spacing)
+                    ? { point: hoverPoint, value: handleAffordance.value }
+                    : null;
                 setHover({
                     iframe: sourceIframe,
                     identity: { elementId: msg.elementId },
@@ -430,6 +441,7 @@ export function CanvasElementOverlay() {
                     spacing: spacingGuides.length > 0 ? spacingDescriptor : null,
                     spacingGuides,
                     spacingAreas,
+                    spacingHandleBadge,
                 });
             }
             else if (data.type === "element-measure-state") {
@@ -638,8 +650,10 @@ export function CanvasElementOverlay() {
     const projectedHoverRect = hover ? projectRect(hover.iframe, hover.rect, projectionZoom) : null;
     const projectedSpacingGuides = hover?.spacingGuides.map((guide) => projectRect(hover.iframe, guide, projectionZoom)) ?? [];
     const projectedSpacingAreas = hover?.spacingAreas.map((area) => projectRect(hover.iframe, area, projectionZoom)) ?? [];
-    const projectedSpacingBadge = spacingDragBadge
-        ? projectPoint(spacingDragBadge.iframe, spacingDragBadge.point.x, spacingDragBadge.point.y, projectionZoom)
+    const spacingBadge = spacingDragBadge
+        ?? (hover?.spacingHandleBadge ? { iframe: hover.iframe, ...hover.spacingHandleBadge } : null);
+    const projectedSpacingBadge = spacingBadge
+        ? projectPoint(spacingBadge.iframe, spacingBadge.point.x, spacingBadge.point.y, projectionZoom)
         : null;
     const hoverSpacing = hover?.spacing ?? null;
     const measureStateForSelectedFrame = measureState?.iframe === selectedFrame ? measureState : null;
@@ -667,7 +681,7 @@ export function CanvasElementOverlay() {
         : [];
     if (presentationTransitioning || layoutTransitioning || temporaryAppInteraction)
         return _jsx("style", { "data-test": "canvas-element-overlay-styles", children: overlayStyles });
-    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "canvas-element-overlay-styles", children: overlayStyles }), showGuideOverlay && selectedRect && selectedFrameRect ? (_jsx(MeasurementGuideOverlay, { testId: "canvas-measurement-overlay", selectedRect: selectedRect, guideViewport: selectedFrameRect, segments: measurementSegments })) : null, projectedHoverRect ? (_jsxs(_Fragment, { children: [hoverSpacing ? projectedSpacingAreas.map((area, index) => (_jsx("div", { className: "canvas-spacing-fill", "data-test": "canvas-spacing-fill", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-area-index": index, style: overlayStyle(area), "aria-hidden": "true" }, `${hoverSpacing.property}-area-${index}`))) : null, showHoverOutline ? (_jsx("div", { className: "canvas-element-overlay", "data-test": "canvas-hover-outline", style: overlayStyle(projectedHoverRect), "aria-hidden": "true" })) : null, hoverSpacing ? projectedSpacingGuides.map((guide, index) => (_jsx("div", { className: "canvas-spacing-guide", "data-test": "canvas-spacing-guide", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-guide-index": index, style: spacingGuideStyle(guide), "aria-hidden": "true" }, `${hoverSpacing.property}-${index}`))) : null] })) : null, projectedSelectedGeometry.map(({ element, rect }, index) => (_jsx("div", { className: "canvas-selected-outline", "data-test": "canvas-selected-outline", "data-selected-cid": element.cid, "data-selected-index": index, "data-selected-src": element.src, style: overlayStyle(rect), "aria-hidden": "true" }, `${element.cid}-${index}`))), projectedSpacingBadge && spacingDragBadge ? (_jsx("div", { className: "canvas-spacing-value-badge", "data-test": "canvas-spacing-value-badge", style: { left: projectedSpacingBadge.x, top: projectedSpacingBadge.y }, "aria-hidden": "true", children: spacingValueCss(spacingDragBadge.value) })) : null, domNavigationEnabled && !inlineTextSession && selectedElements.length === 1 && selected && selectedRect && selectedFrame instanceof HTMLIFrameElement ? (_jsx(DomNavigator, { selected: selected, hierarchy: hierarchy, anchor: selectedRect, project: (element) => element.ownerDocument === selected.domElement.ownerDocument
+    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "canvas-element-overlay-styles", children: overlayStyles }), showGuideOverlay && selectedRect && selectedFrameRect ? (_jsx(MeasurementGuideOverlay, { testId: "canvas-measurement-overlay", selectedRect: selectedRect, guideViewport: selectedFrameRect, segments: measurementSegments })) : null, projectedHoverRect ? (_jsxs(_Fragment, { children: [hoverSpacing ? projectedSpacingAreas.map((area, index) => (_jsx("div", { className: "canvas-spacing-fill", "data-test": "canvas-spacing-fill", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-area-index": index, style: overlayStyle(area), "aria-hidden": "true" }, `${hoverSpacing.property}-area-${index}`))) : null, showHoverOutline ? (_jsx("div", { className: "canvas-element-overlay", "data-test": "canvas-hover-outline", style: overlayStyle(projectedHoverRect), "aria-hidden": "true" })) : null, hoverSpacing ? projectedSpacingGuides.map((guide, index) => (_jsx("div", { className: "canvas-spacing-guide", "data-test": "canvas-spacing-guide", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-guide-index": index, style: spacingGuideStyle(guide), "aria-hidden": "true" }, `${hoverSpacing.property}-${index}`))) : null] })) : null, projectedSelectedGeometry.map(({ element, rect }, index) => (_jsx("div", { className: "canvas-selected-outline", "data-test": "canvas-selected-outline", "data-selected-cid": element.cid, "data-selected-index": index, "data-selected-src": element.src, style: overlayStyle(rect), "aria-hidden": "true" }, `${element.cid}-${index}`))), projectedSpacingBadge && spacingBadge ? (_jsx("div", { className: "canvas-spacing-value-badge", "data-test": "canvas-spacing-value-badge", style: { left: projectedSpacingBadge.x, top: projectedSpacingBadge.y }, "aria-hidden": "true", children: spacingValueCss(spacingBadge.value) })) : null, domNavigationEnabled && !inlineTextSession && selectedElements.length === 1 && selected && selectedRect && selectedFrame instanceof HTMLIFrameElement ? (_jsx(DomNavigator, { selected: selected, hierarchy: hierarchy, anchor: selectedRect, project: (element) => element.ownerDocument === selected.domElement.ownerDocument
                     ? projectRect(selectedFrame, toRect(element.getBoundingClientRect()), projectionZoom)
                     : null })) : null, _jsx(DropGuideOverlay, { guide: projectedDropGuide, lineClassName: "canvas-dom-drop-line", lineTestId: "canvas-dom-drop-line", targetClassName: "canvas-dom-drop-target", targetTestId: "canvas-dom-drop-target" })] }));
 }

package/dist/inspector/canvas/CanvasWorkspace.js

@@ -27,7 +27,7 @@ import { disposeInlineTextEdit } from "../inline-text/inlineTextEditor.js";
 import { PROTOCOL_VERSION, isProjectionAppliedMessage, isKeyboardShortcutMessage, isRenderedInstanceProjectionReportMessage, isTextProjectionReportMessage, isStructuralProjectionReportMessage, } from "./frameProtocol.js";
 import { wheelPanDelta } from "./wheelPan.js";
 import { iframePointToClientPoint, zoomCameraAtPointer } from "./canvasGestures.js";
-const canvasWorkspaceStyles = ".canvas-workspace {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--surface-panel);\n  pointer-events: auto;\n}\n\n.canvas-workspace__board {\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n  background: var(--surface-panel);\n}\n\n.canvas-workspace__focus-action {\n  position: absolute;\n  top: max(12px, env(safe-area-inset-top));\n  left: max(12px, env(safe-area-inset-left));\n  z-index: calc(var(--z-index) - 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-4);\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.canvas-workspace__board.is-grabbable {\n  cursor: grab;\n}\n\n.canvas-workspace__board.is-grabbing {\n  cursor: grabbing;\n}\n\n/* Canvas gestures take precedence over every card interaction while Space is\n   held. This also closes the short postMessage gap before an iframe receives\n   its mirrored modifier state. */\n.canvas-workspace__board.is-grabbable .canvas-card,\n.canvas-workspace__board.is-grabbing .canvas-card {\n  pointer-events: none;\n}\n\n.canvas-workspace__board-content {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  /*\n   * Leave `will-change` unset so the browser can re-rasterize this subtree at\n   * the current camera scale. A permanent `will-change: transform` promotes\n   * it to a fixed bitmap, which makes iframe content look soft when zoomed.\n   */\n}\n\n.canvas-workspace__board.is-grabbing .canvas-workspace__board-content {\n  /* Panning benefits from a cached composited layer; zoom restores the crisp\n   * default path as soon as the gesture ends. */\n  will-change: transform;\n}\n\n.canvas-workspace.is-presentation-transitioning .canvas-workspace__board-content {\n  transition: transform 200ms ease;\n}\n\n.canvas-workspace[data-presentation=\"focus\"] .canvas-workspace__board-content {\n  inset: 0;\n  transform: none !important;\n}\n\n.canvas-workspace.is-presentation-transitioning .canvas-card.is-presentation-card {\n  transition: left 200ms ease, top 200ms ease;\n}\n\n.canvas-workspace.is-presentation-transitioning .canvas-card:not(.is-presentation-card) {\n  visibility: hidden !important;\n  pointer-events: none !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .canvas-workspace.is-presentation-transitioning .canvas-workspace__board-content,\n  .canvas-workspace.is-presentation-transitioning .canvas-card.is-presentation-card {\n    transition: none;\n  }\n}\n\n.canvas-workspace__target-error {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  color: #6b7280;\n  font: 500 14px/1.4 system-ui, sans-serif;\n}\n\n/* Moving iframes must not acquire hover state beneath a stationary pointer. */\n.canvas-workspace.is-presentation-transitioning .canvas-card__iframe,\n.canvas-workspace__board.is-layout-transitioning .canvas-card__iframe {\n  pointer-events: none;\n}\n";
+const canvasWorkspaceStyles = ".canvas-workspace {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--surface-panel);\n  pointer-events: auto;\n}\n\n.canvas-workspace__board {\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n  background: var(--surface-panel);\n}\n\n.canvas-workspace__focus-action {\n  position: absolute;\n  top: max(12px, env(safe-area-inset-top));\n  left: max(12px, env(safe-area-inset-left));\n  z-index: calc(var(--z-index) - 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-4);\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.canvas-workspace__board.is-grabbable {\n  cursor: grab;\n}\n\n.canvas-workspace__board.is-grabbing {\n  cursor: grabbing;\n}\n\n/* Canvas gestures take precedence over every card interaction while Space is\n   held. This also closes the short postMessage gap before an iframe receives\n   its mirrored modifier state. */\n.canvas-workspace__board.is-grabbable .canvas-card,\n.canvas-workspace__board.is-grabbing .canvas-card {\n  pointer-events: none;\n}\n\n.canvas-workspace__board-content {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  /*\n   * Leave `will-change` unset so the browser can re-rasterize this subtree at\n   * the current camera scale. A permanent `will-change: transform` promotes\n   * it to a fixed bitmap, which makes iframe content look soft when zoomed.\n   */\n}\n\n.canvas-workspace__board.is-grabbing .canvas-workspace__board-content {\n  /* Panning benefits from a cached composited layer; zoom restores the crisp\n   * default path as soon as the gesture ends. */\n  will-change: transform;\n}\n\n.canvas-workspace[data-presentation=\"focus\"] .canvas-workspace__board-content {\n  inset: 0;\n  transform: none !important;\n}\n\n.canvas-workspace.is-presentation-transitioning .canvas-card:not(.is-presentation-card) {\n  visibility: hidden !important;\n  pointer-events: none !important;\n}\n\n.canvas-workspace__target-error {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  color: #6b7280;\n  font: 500 14px/1.4 system-ui, sans-serif;\n}\n\n/* Moving iframes must not acquire hover state beneath a stationary pointer. */\n.canvas-workspace.is-presentation-transitioning .canvas-card__iframe,\n.canvas-workspace__board.is-layout-transitioning .canvas-card__iframe {\n  pointer-events: none;\n}\n";
 const canvasCardStyles = ".canvas-card {\n  position: relative;\n}\n\n/* Extend the card's hover region to the toolbar above the iframe. */\n.canvas-card::before {\n  content: \"\";\n  position: absolute;\n  right: 0;\n  bottom: 100%;\n  left: 0;\n  height: calc((var(--control-height-large) + var(--space-16)) * var(--canvas-toolbar-scale, 1));\n  pointer-events: auto;\n}\n\n.canvas-card__frame {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--surface-panel);\n  border-radius: 0;\n  overflow: hidden;\n}\n\n.canvas-card.is-selected .canvas-card__frame {\n  outline: 2px solid var(--frame-accent, var(--accent));\n  outline-offset: -2px;\n}\n\n.canvas-card.is-focus-presentation .canvas-card__frame {\n  outline: none;\n}\n\n.canvas-card.is-focused.is-selected:not(.is-linked) .canvas-card__frame {\n  animation: canvas-card-focus 900ms ease-out;\n}\n\n@keyframes canvas-card-focus {\n  0%, 35% { outline: 3px solid var(--frame-accent, var(--accent)); outline-offset: -3px; }\n  100% { outline: 0 solid transparent; outline-offset: -2px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .canvas-card.is-focused .canvas-card__frame {\n    animation: none;\n  }\n}\n\n.canvas-card__header {\n  display: flex;\n  align-items: center;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: calc(100% + var(--space-8));\n  justify-content: flex-end;\n  z-index: 3;\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n.canvas-card__drag-surface {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  flex: 0 1 auto;\n  margin-right: auto;\n  min-width: 0;\n  min-height: var(--control-height-large);\n  padding: 0;\n  cursor: grab;\n  user-select: none;\n  touch-action: none;\n}\n\n.canvas-card.is-dragging .canvas-card__drag-surface {\n  cursor: grabbing;\n}\n\n.canvas-card__identity {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.canvas-card__dimensions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  position: relative;\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 260px;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  pointer-events: none;\n}\n\n.canvas-card__title {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.canvas-card__live-badge,\n.canvas-card__iteration-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 20px;\n  height: 20px;\n  background: var(--accent-surface);\n  color: var(--accent);\n  border-radius: var(--radius-4);\n  pointer-events: auto;\n}\n\n.canvas-card__floating-toolbar {\n  position: absolute;\n  left: 50%;\n  flex-shrink: 0;\n  width: max-content;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transform: translate(-50%, calc(-24px + var(--space-4)));\n  transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 140ms;\n}\n\n.canvas-card:hover .canvas-card__floating-toolbar,\n.canvas-card:focus-within .canvas-card__floating-toolbar,\n.canvas-card__floating-toolbar[data-busy=\"true\"] {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transform: translate(-50%, -24px);\n}\n\n.canvas-card__actions.canvas-toolbar {\n  position: static;\n  width: max-content;\n  transform: none;\n  white-space: nowrap;\n}\n\n.canvas-card__actions .canvas-toolbar__divider {\n  margin-inline: 0;\n}\n\n@media (hover: none) {\n  .canvas-card.is-selected .canvas-card__floating-toolbar {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n    transform: translate(-50%, -24px);\n  }\n}\n\n.canvas-card.is-dragging .canvas-card__floating-toolbar,\n.canvas-workspace__board.is-grabbable .canvas-card__floating-toolbar,\n.canvas-workspace__board.is-grabbing .canvas-card__floating-toolbar,\n.canvas-workspace.is-presentation-transitioning .canvas-card__floating-toolbar,\n.canvas-workspace__board.is-layout-transitioning .canvas-card__floating-toolbar {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .canvas-card__floating-toolbar { transition: none; }\n}\n\n.canvas-card__iteration-error {\n  position: absolute;\n  right: 0;\n  bottom: calc(100% + var(--space-8));\n  color: var(--text-danger, #b42318);\n  font-size: 12px;\n  white-space: nowrap;\n}\n\n.canvas-card__iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  display: block;\n}\n\n.canvas-card__sketch-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: block;\n  pointer-events: none;\n}\n\n.canvas-card__loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--text-muted, #777777);\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.canvas-card__error {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  height: 100%;\n  padding: 20px;\n  text-align: center;\n}\n\n.canvas-card__error p {\n  margin: 0;\n  color: var(--text-muted, #777777);\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.canvas-card__error-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.canvas-card__resize-handle {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  padding: 4px;\n  color: var(--text-muted, #777777);\n  opacity: 0;\n  transition: opacity 150ms ease;\n  touch-action: none;\n  user-select: none;\n}\n\n.canvas-card__resize-handle--top,\n.canvas-card__resize-handle--bottom {\n  right: 16px;\n  left: 16px;\n  height: 16px;\n  cursor: ns-resize;\n}\n\n.canvas-card__resize-handle--top {\n  top: 0;\n}\n\n.canvas-card__resize-handle--bottom {\n  bottom: 0;\n}\n\n.canvas-card__resize-handle--left,\n.canvas-card__resize-handle--right {\n  top: 16px;\n  bottom: 16px;\n  width: 16px;\n  cursor: ew-resize;\n}\n\n.canvas-card__resize-handle--left {\n  left: 0;\n}\n\n.canvas-card__resize-handle--right {\n  right: 0;\n}\n\n.canvas-card__resize-handle--top-left,\n.canvas-card__resize-handle--top-right,\n.canvas-card__resize-handle--bottom-right,\n.canvas-card__resize-handle--bottom-left {\n  z-index: 4;\n  width: 24px;\n  height: 24px;\n  cursor: nwse-resize;\n}\n\n.canvas-card__resize-handle--top-left {\n  top: 0;\n  left: 0;\n}\n\n.canvas-card__resize-handle--top-right {\n  top: 0;\n  right: 0;\n  cursor: nesw-resize;\n}\n\n.canvas-card__resize-handle--bottom-right {\n  right: 0;\n  bottom: 0;\n}\n\n.canvas-card__resize-handle--bottom-left {\n  bottom: 0;\n  left: 0;\n  cursor: nesw-resize;\n}\n\n.canvas-card:hover .canvas-card__resize-handle,\n.canvas-card:focus-within .canvas-card__resize-handle {\n  opacity: 1;\n}\n\n.canvas-card__resize-handle:hover {\n  color: var(--accent);\n}\n\n.canvas-card__resize-handle:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n  opacity: 1;\n}\n\n.canvas-card.is-linked {\n  --frame-accent: #a855f7;\n}\n\n.canvas-card.is-linked:not(.is-focus-presentation) .canvas-card__frame {\n  outline: 2px solid var(--frame-accent);\n  outline-offset: -2px;\n}\n\n.canvas-card__iteration-badge {\n  color: var(--text-secondary);\n  background: var(--surface-raised-2x);\n}\n";
 const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #F5F5F4;\n  --surface-control: var(--surface-well);\n  --surface-control-hover: var(--surface-well-2x);\n  --surface-raised: #FAFAFA;\n  --surface-raised-2x: #fff ;\n  --surface-raised-hover: #F5F5F4;\n  --surface-well: hsla(0, 0%, 0%, 0.05);\n  --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n\n  --border-subtle: hsla(0, 0%, 0%, 0.1);\n  --border-medium: hsla(0, 0%, 0%, 0.2);\n  --border-strong: #d8d8d8;\n\n  --text-primary: #242424;\n  --text-secondary: #6f6f6f;\n  --text-muted: #777777;\n  --text-muted-subtle: #a1a1a1;\n\n  --accent: #0096ff;\n  --accent-surface: rgba(0, 176, 255, 0.15);\n  --warning: #d97706;\n  --warning-text: #9a5b00;\n  --warning-surface: #fff6e5;\n  --danger: #df4b4b;\n  --danger-text: #bd3636;\n  --danger-surface: rgba(223, 75, 75, 0.2);\n  --success: #2e7d52;\n\n  --space-0: 0;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n\n  /* Radius */\n  --radius-0: 0;\n  --radius-4: 4px;\n  --radius-8: 8px;\n  --radius-12: 12px;\n  --radius-16: 16px;\n  --radius-20: 20px;\n  --radius-24: 24px;\n  --radius-pill: 999px;\n\n  --radius-control: var(--radius-8);\n  --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n  --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --z-index: 2147483647;\n\n  --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --font-size-base: 12px;\n  --font-size-small: 10px;\n  --font-weight-base: 400;\n  --font-weight-label: 600;\n\n  /* Control semantic sizes */\n  --control-height-small: 24px;\n  --control-height-large: 32px;\n  --control-height-xlarge: 40px;\n  --label-column: 104px;\n\n  --icon-size-small: 16px;\n  --icon-size-large: 20px;\n  --icon-stroke-width: 1.5px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n  font-family: var(--font-family);\n  background: transparent;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n  font-family: inherit;\n}\n";
 import { useInspectorOpen } from "../shell/openStore.js";
@@ -84,8 +84,7 @@ export function CanvasWorkspace({ primaryUrl }) {
     const activatedTargetRef = useRef(null);
     const demoSeededRef = useRef(false);
     const previousPresentationRef = useRef(presentation);
-    const focusCardRectRef = useRef(null);
-    const canvasEntryAnimationRef = useRef(null);
+    const presentationAnimationRef = useRef(null);
     const [boardCursorClass, setBoardCursorClass] = useState("");
     const [selectedTool, setInteractionTool] = useState("design");
     const temporaryAppInteraction = useTemporaryAppInteraction();
@@ -106,73 +105,54 @@ export function CanvasWorkspace({ primaryUrl }) {
     const presentationCardId = selectedCardId ?? focusedCardId ?? cards[0]?.id ?? null;
     const linkedFrameIds = getLinkedFrameIds(cards, selectedCardId);
     useLayoutEffect(() => {
+        const previousPresentation = previousPresentationRef.current;
+        previousPresentationRef.current = presentation;
+        if (previousPresentation === presentation)
+            return;
+        presentationAnimationRef.current?.cancel();
+        presentationAnimationRef.current = null;
+        if (!presentationTransitioning)
+            return;
         const board = boardRef.current;
+        const card = cards.find((candidate) => candidate.id === presentationCardId);
         const cardElement = presentationCardId
             ? board?.querySelector(`[data-card-id="${presentationCardId}"]`)
             : null;
-        const boardContent = board?.querySelector('[data-test="canvas-board-content"]');
-        if (presentation === "focus") {
-            canvasEntryAnimationRef.current?.cancel();
-            canvasEntryAnimationRef.current = null;
-            if (boardContent)
-                boardContent.style.transition = "";
-            if (cardElement)
-                cardElement.style.transition = "";
-            focusCardRectRef.current = cardElement ? snapshotRect(cardElement.getBoundingClientRect()) : null;
-        }
-        else if (presentation === "canvas"
-            && previousPresentationRef.current === "focus"
-            && presentationTransitioning
-            && cardElement
-            && boardContent
-            && focusCardRectRef.current
-            && typeof cardElement.animate === "function") {
-            // Commit the final layout before measuring it. The old implementation
-            // transitioned both the camera and the card's position, which made the
-            // nested scale and translation produce a sideways drift.
-            boardContent.style.transition = "none";
-            cardElement.style.transition = "none";
-            const oldRect = focusCardRectRef.current;
-            const newRect = snapshotRect(cardElement.getBoundingClientRect());
-            if (newRect.width > 0 && newRect.height > 0 && camera.zoom > 0) {
-                const oldCenterX = oldRect.left + oldRect.width / 2;
-                const oldCenterY = oldRect.top + oldRect.height / 2;
-                const newCenterX = newRect.left + newRect.width / 2;
-                const newCenterY = newRect.top + newRect.height / 2;
-                const localTranslateX = (oldCenterX - newCenterX) / camera.zoom;
-                const localTranslateY = (oldCenterY - newCenterY) / camera.zoom;
-                const scaleX = oldRect.width / newRect.width;
-                const scaleY = oldRect.height / newRect.height;
-                const animation = cardElement.animate([
-                    {
-                        transformOrigin: "center center",
-                        transform: `translate(${localTranslateX}px, ${localTranslateY}px) scale(${scaleX}, ${scaleY})`,
-                    },
-                    { transformOrigin: "center center", transform: "none" },
-                ], { duration: PRESENTATION_TRANSITION_MS, easing: "ease", fill: "both" });
-                canvasEntryAnimationRef.current = animation;
-                void animation.finished.then(() => {
-                    if (canvasEntryAnimationRef.current !== animation)
-                        return;
-                    canvasEntryAnimationRef.current = null;
-                    animation.cancel();
-                    boardContent.style.transition = "";
-                    cardElement.style.transition = "";
-                }).catch(() => {
-                    if (canvasEntryAnimationRef.current !== animation)
-                        return;
-                    canvasEntryAnimationRef.current = null;
-                    boardContent.style.transition = "";
-                    cardElement.style.transition = "";
-                });
-            }
-            else {
-                boardContent.style.transition = "";
-                cardElement.style.transition = "";
-            }
-        }
-        previousPresentationRef.current = presentation;
-    }, [camera.zoom, presentation, presentationCardId, presentationTransitioning]);
+        if (!board || !card || !cardElement || typeof cardElement.animate !== "function" || camera.zoom <= 0)
+            return;
+        // The previous layout is already gone, so derive it: focus fills the
+        // board, and canvas places the card through the camera.
+        const boardRect = snapshotRect(board.getBoundingClientRect());
+        const canvasRect = {
+            left: boardRect.left + camera.x + card.x * camera.zoom,
+            top: boardRect.top + camera.y + card.y * camera.zoom,
+            width: card.width * camera.zoom,
+            height: card.height * camera.zoom,
+        };
+        const oldRect = presentation === "focus" ? canvasRect : boardRect;
+        const localScale = presentation === "focus" ? 1 : camera.zoom;
+        const newRect = snapshotRect(cardElement.getBoundingClientRect());
+        if (newRect.width <= 0 || newRect.height <= 0)
+            return;
+        const localTranslateX = (oldRect.left + oldRect.width / 2 - (newRect.left + newRect.width / 2)) / localScale;
+        const localTranslateY = (oldRect.top + oldRect.height / 2 - (newRect.top + newRect.height / 2)) / localScale;
+        const scaleX = oldRect.width / newRect.width;
+        const scaleY = oldRect.height / newRect.height;
+        const animation = cardElement.animate([
+            {
+                transformOrigin: "center center",
+                transform: `translate(${localTranslateX}px, ${localTranslateY}px) scale(${scaleX}, ${scaleY})`,
+            },
+            { transformOrigin: "center center", transform: "none" },
+        ], { duration: PRESENTATION_TRANSITION_MS, easing: "ease", fill: "both" });
+        presentationAnimationRef.current = animation;
+        void animation.finished.then(() => {
+            if (presentationAnimationRef.current !== animation)
+                return;
+            presentationAnimationRef.current = null;
+            animation.cancel();
+        }).catch(() => undefined);
+    }, [camera, cards, presentation, presentationCardId, presentationTransitioning]);
     useLayoutEffect(() => {
         const board = boardRef.current;
         if (!primaryUrl || !board)

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

@@ -0,0 +1,3 @@
+export declare const FRAME_SCROLLBAR_STYLE_ID = "nudge-ui-frame-scrollbar-styles";
+/** Gives frame documents thin scrollbars over a transparent track by default. */
+export declare function installFrameScrollbarStyles(doc: Document): () => void;

package/dist/inspector/canvas/frameScrollbarStyles.js

@@ -0,0 +1,21 @@
+export const FRAME_SCROLLBAR_STYLE_ID = "nudge-ui-frame-scrollbar-styles";
+// `:where()` keeps specificity at zero so any application scrollbar rule wins.
+const FRAME_SCROLLBAR_CSS = `
+  :where(html) {
+    scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
+  }
+
+  :where(*) {
+    scrollbar-width: thin;
+  }
+`;
+/** Gives frame documents thin scrollbars over a transparent track by default. */
+export function installFrameScrollbarStyles(doc) {
+    if (!doc.head || doc.getElementById(FRAME_SCROLLBAR_STYLE_ID))
+        return () => undefined;
+    const style = doc.createElement("style");
+    style.id = FRAME_SCROLLBAR_STYLE_ID;
+    style.textContent = FRAME_SCROLLBAR_CSS;
+    doc.head.append(style);
+    return () => style.remove();
+}

package/dist/inspector/changes/changesLog.d.ts

@@ -3,7 +3,7 @@ import type { ChangeRecord } from "./types.js";
 import { type CommitResult } from "./draftChanges.js";
 import type { StructuralChange } from "./structuralTypes.js";
 export { isComponentChange, isElementChange, isTextContentChange, isTextContentChangeValue, isPreviewableChange, isTokenChange, } from "./types.js";
-export type { ChangeRecord, ComponentChangeRecord, ElementChangeRecord, PreviewableChangeRecord, TextContentChangeRecord, TokenChangeRecord, RuntimeElementEvidence, } from "./types.js";
+export type { ChangeRecord, ComponentChangeRecord, ElementChangeRecord, PreviewableChangeRecord, TextContentChangeRecord, TokenChangeRecord, RuntimeElementEvidence, SourceElementEvidence, } from "./types.js";
 export interface AppendChangesOptions {
     /** The rendered target captured for each change key at commit time. */
     verificationTargets?: ReadonlyMap<string, HTMLElement | null>;
@@ -26,6 +26,8 @@ export declare function revertChange(change: ChangeRecord): void;
 export declare function reconcileVerifiedChanges(verifiedKeys: ReadonlySet<string>): number;
 /** Atomically reconciles ordinary and structural intent from one agent handoff. */
 export declare function reconcileVerifiedDraftChanges(verifiedKeys: ReadonlySet<string>, verifiedStructuralIds: ReadonlySet<string>): number;
+/** Replaces ordinary and structural intent as one undoable edit. */
+export declare function commitDraftContents(changes: readonly ChangeRecord[], structuralChanges: readonly StructuralChange[]): boolean;
 export declare function discardChangesForSelector(selector: string): void;
 /** Relink removes every CSS declaration owned by one durable rendered target. */
 export declare function discardChangesForInstanceOverride(overrideId: string): void;

package/dist/inspector/changes/changesLog.js

@@ -168,6 +168,14 @@ export function reconcileVerifiedDraftChanges(verifiedKeys, verifiedStructuralId
     markForVerification(getChangesSnapshot().map(changeKey));
     return removed;
 }
+/** Replaces ordinary and structural intent as one undoable edit. */
+export function commitDraftContents(changes, structuralChanges) {
+    if (!draftChangeStore.commitContents({ changes: [...changes], structuralChanges: [...structuralChanges] }))
+        return false;
+    reapply(draftChangeStore.getSnapshot());
+    markForVerification(getChangesSnapshot().map(changeKey));
+    return true;
+}
 export function discardChangesForSelector(selector) {
     if (!draftChangeStore.discardChangeRecords({ kind: "selector", selector }))
         return;

package/dist/inspector/changes/codecs.d.ts

@@ -32,6 +32,7 @@ export interface SerializableElementChange {
         component: string;
     };
     runtimeEvidence?: NonNullable<ElementChangeRecord["runtimeEvidence"]>;
+    sourceEvidence?: NonNullable<ElementChangeRecord["sourceEvidence"]>;
     scope?: EditScope;
     instanceOverride?: RenderedInstanceOverride;
     state?: NonNullable<ElementChangeRecord["state"]>;

package/dist/inspector/changes/codecs.js

@@ -16,7 +16,7 @@ export function isSerializableElementChangeValue(value) {
         || !hasOnlyKeys(value, [
             "kind", "cid", "file", "line", "column", "selector", "property",
             "sourceProperty", "sourceAuthoredValue", "oldToken", "newToken", "rawValue",
-            "oldRawValue", "source", "runtimeEvidence", "scope", "instanceOverride", "state",
+            "oldRawValue", "source", "runtimeEvidence", "sourceEvidence", "scope", "instanceOverride", "state",
         ])
         || (value.kind !== undefined && value.kind !== "element")
         || typeof value.cid !== "string"
@@ -33,6 +33,7 @@ export function isSerializableElementChangeValue(value) {
         || (value.rawValue !== undefined && typeof value.rawValue !== "string")
         || (value.oldRawValue !== undefined && typeof value.oldRawValue !== "string")
         || (value.runtimeEvidence !== undefined && !isRuntimeElementEvidenceValue(value.runtimeEvidence))
+        || (value.sourceEvidence !== undefined && !isSourceElementEvidenceValue(value.sourceEvidence))
         || !isEditScopeValue(value.scope)
         || (value.instanceOverride !== undefined && value.scope !== "rendered-instance")
         || (value.scope === "rendered-instance" && !isRenderedInstanceOverride(value.instanceOverride))
@@ -115,6 +116,7 @@ export function serializeElementChange(change) {
         oldRawValue: change.oldRawValue,
         source: change.source,
         runtimeEvidence: change.runtimeEvidence ? { ...change.runtimeEvidence } : undefined,
+        sourceEvidence: change.sourceEvidence ? { ...change.sourceEvidence } : undefined,
         scope: change.scope === "rendered-instance" ? "rendered-instance" : "source-site",
         instanceOverride: change.scope === "rendered-instance" ? change.instanceOverride : undefined,
         state: change.state,
@@ -200,6 +202,7 @@ export function deserializeElementChange(serialized) {
         oldRawValue: serialized.oldRawValue,
         source: serialized.source,
         runtimeEvidence: serialized.runtimeEvidence ? { ...serialized.runtimeEvidence } : undefined,
+        sourceEvidence: serialized.sourceEvidence ? { ...serialized.sourceEvidence } : undefined,
         scope: serialized.scope ?? "source-site",
         instanceOverride: serialized.scope === "rendered-instance" ? serialized.instanceOverride : undefined,
         state: serialized.state,
@@ -331,6 +334,12 @@ function isRuntimeElementEvidenceValue(value) {
         && (typeof value.props === "string" || value.props === null)
         && (typeof value.ariaLabel === "string" || value.ariaLabel === null);
 }
+function isSourceElementEvidenceValue(value) {
+    return isRecord(value)
+        && hasOnlyKeys(value, ["tagName", "props"])
+        && typeof value.tagName === "string"
+        && (typeof value.props === "string" || value.props === null);
+}
 function isTokenRefValue(value) {
     if (value === null)
         return true;

package/dist/inspector/changes/draftChanges.d.ts

@@ -31,6 +31,8 @@ export interface DraftChangeStore {
     }): boolean;
     commitStructuralChange(change: StructuralChange): boolean;
     revertStructuralChangeRecord(changeId: string): boolean;
+    /** Replaces the active draft as one undoable edit. */
+    commitContents(next: DraftContents): boolean;
     reconcileActiveDraftChanges(verifiedKeys: ReadonlySet<string>, verifiedStructuralIds: ReadonlySet<string>): number;
     undoChange(): boolean;
     redoChange(): boolean;

package/dist/inspector/changes/draftChanges.js

@@ -175,6 +175,9 @@ function revertStructuralChangeRecordImpl(changeId) {
     const structuralChanges = contents.structuralChanges.filter((change) => change.id !== changeId);
     return structuralChanges.length !== contents.structuralChanges.length && commit({ ...contents, structuralChanges });
 }
+function commitContentsImpl(next) {
+    return !sameDraftContents(draftState().contents, next) && commit(next);
+}
 export function reconcileDraftChanges(id, verifiedKeys, verifiedStructuralIds) {
     if (!canEditDraft(id))
         return 0;
@@ -255,6 +258,7 @@ export const draftChangeStore = {
     discardChangeRecords: discardChangeRecordsImpl,
     commitStructuralChange: commitStructuralChangeImpl,
     revertStructuralChangeRecord: revertStructuralChangeRecordImpl,
+    commitContents: commitContentsImpl,
     reconcileActiveDraftChanges: reconcileActiveDraftChangesImpl,
     undoChange: () => replay("undo"),
     redoChange: () => replay("redo"),

package/dist/inspector/changes/editModel.d.ts

@@ -18,8 +18,18 @@ export interface RenderedInstanceRef {
         text: string | null;
         /** An accessible name can distinguish icon-only repeated controls. */
         ariaLabel?: string | null;
+        /**
+         * The component invocation whose entire output is this element. Present
+         * only when evidence alone cannot tell identical outputs apart.
+         */
+        invocation?: InvocationRef;
     };
 }
+/** A component callsite, as stamped by the compiler, and its component name. */
+export interface InvocationRef {
+    callsiteId: string;
+    componentName: string;
+}
 export interface RenderedInstanceOverride {
     id: string;
     target: RenderedInstanceRef;

package/dist/inspector/changes/editModel.js

@@ -1,3 +1,9 @@
+function isInvocationRef(value) {
+    return isRecord(value)
+        && hasOnlyKeys(value, ["callsiteId", "componentName"])
+        && typeof value.callsiteId === "string" && value.callsiteId.length > 0 && value.callsiteId.length <= 1024
+        && typeof value.componentName === "string" && value.componentName.length > 0 && value.componentName.length <= 256;
+}
 export function isRenderedInstanceRef(value) {
     if (!isRecord(value) || !hasOnlyKeys(value, ["sourceSite", "locator"]))
         return false;
@@ -8,13 +14,14 @@ export function isRenderedInstanceRef(value) {
         || typeof source.cid !== "string"
         || typeof source.src !== "string"
         || !isRecord(locator)
-        || !hasOnlyKeys(locator, ["kind", "occurrence", "props", "text", "ariaLabel"]))
+        || !hasOnlyKeys(locator, ["kind", "occurrence", "props", "text", "ariaLabel", "invocation"]))
         return false;
     return locator.kind === "evidence"
         && Number.isSafeInteger(locator.occurrence) && locator.occurrence >= 0
         && (typeof locator.props === "string" || locator.props === null)
         && (typeof locator.text === "string" || locator.text === null)
-        && (locator.ariaLabel === undefined || typeof locator.ariaLabel === "string" || locator.ariaLabel === null);
+        && (locator.ariaLabel === undefined || typeof locator.ariaLabel === "string" || locator.ariaLabel === null)
+        && (locator.invocation === undefined || isInvocationRef(locator.invocation));
 }
 export function isRenderedInstanceOverride(value) {
     return isRecord(value)

package/dist/inspector/changes/types.d.ts

@@ -13,6 +13,11 @@ export interface RuntimeElementEvidence {
     props: string | null;
     ariaLabel: string | null;
 }
+/** Bounded authored facts for one annotated element. */
+export interface SourceElementEvidence {
+    tagName: string;
+    props: string | null;
+}
 export interface ElementChangeRecord {
     kind?: "element";
     cid: string;
@@ -37,6 +42,8 @@ export interface ElementChangeRecord {
     };
     /** Present when the selected element has a document-local runtime identity. */
     runtimeEvidence?: RuntimeElementEvidence;
+    /** Authored facts that relocate the source site after its position shifts. */
+    sourceEvidence?: SourceElementEvidence;
     scope?: EditScope;
     /** Durable, controller-owned target for one rendered output. */
     instanceOverride?: RenderedInstanceOverride;