nudge-ui 0.2.0 → 0.2.2

package/dist/inspector/overlay/spacingGestures.js

@@ -0,0 +1,351 @@
+import { getElementComputedStyle } from "../runtime/domRealm.js";
+const SPACING_DRAG_TARGET_SIZE = 16;
+export const SPACING_GUIDE_HANDLE_LENGTH = 40;
+const SPACING_SHIFT_STEP = 8;
+const EPSILON = 0.01;
+function rightOf(rect) {
+    return Number.isFinite(rect.right) ? rect.right : rect.left + rect.width;
+}
+function bottomOf(rect) {
+    return Number.isFinite(rect.bottom) ? rect.bottom : rect.top + rect.height;
+}
+function boxEdges(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        left: rect.left,
+        top: rect.top,
+        right: rightOf(rect),
+        bottom: bottomOf(rect),
+    };
+}
+// Computed style resolves to px in browsers, so drag math normalizes to px.
+// An authored rem/% is intentionally rewritten as px on commit.
+function numberValue(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? Math.max(0, parsed) : 0;
+}
+function boxModel(element) {
+    const style = getElementComputedStyle(element);
+    const padding = {
+        top: numberValue(style.paddingTop),
+        right: numberValue(style.paddingRight),
+        bottom: numberValue(style.paddingBottom),
+        left: numberValue(style.paddingLeft),
+    };
+    const border = {
+        top: numberValue(style.borderTopWidth),
+        right: numberValue(style.borderRightWidth),
+        bottom: numberValue(style.borderBottomWidth),
+        left: numberValue(style.borderLeftWidth),
+    };
+    const outer = boxEdges(element);
+    const inner = {
+        left: outer.left + border.left,
+        top: outer.top + border.top,
+        right: outer.right - border.right,
+        bottom: outer.bottom - border.bottom,
+    };
+    const content = {
+        left: inner.left + padding.left,
+        top: inner.top + padding.top,
+        right: inner.right - padding.right,
+        bottom: inner.bottom - padding.bottom,
+    };
+    return { outer, inner, content, padding };
+}
+function containsPoint(rect, x, y) {
+    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}
+function containsRectPoint(rect, x, y) {
+    return x >= rect.left
+        && x <= rect.left + rect.width
+        && y >= rect.top
+        && y <= rect.top + rect.height;
+}
+function guideHit(guide, orientation) {
+    if (orientation === "horizontal") {
+        const height = Math.max(SPACING_DRAG_TARGET_SIZE, guide.height);
+        const width = Math.min(SPACING_GUIDE_HANDLE_LENGTH, guide.width);
+        return {
+            left: guide.left + (guide.width - width) / 2,
+            top: guide.top - (height - guide.height) / 2,
+            width,
+            height,
+        };
+    }
+    const width = Math.max(SPACING_DRAG_TARGET_SIZE, guide.width);
+    const height = Math.min(SPACING_GUIDE_HANDLE_LENGTH, guide.height);
+    return {
+        left: guide.left - (width - guide.width) / 2,
+        top: guide.top + (guide.height - height) / 2,
+        width,
+        height,
+    };
+}
+const PADDING_CONFIG = {
+    top: { axis: "horizontal", dragAxis: "y", direction: 1 },
+    right: { axis: "vertical", dragAxis: "x", direction: 1 },
+    bottom: { axis: "horizontal", dragAxis: "y", direction: 1 },
+    left: { axis: "vertical", dragAxis: "x", direction: 1 },
+};
+function paddingAffordanceForSide(element, side, model = boxModel(element)) {
+    const { inner, content, padding } = model;
+    const value = padding[side];
+    if (value <= EPSILON)
+        return null;
+    const config = PADDING_CONFIG[side];
+    const width = Math.max(0, inner.right - inner.left);
+    const height = Math.max(0, inner.bottom - inner.top);
+    const guide = config.axis === "horizontal"
+        ? {
+            left: inner.left,
+            top: (side === "top" ? inner.top + value / 2 : inner.bottom - value / 2) - 1,
+            width,
+            height: 2,
+        }
+        : {
+            left: (side === "left" ? inner.left + value / 2 : inner.right - value / 2) - 1,
+            top: inner.top,
+            width: 2,
+            height,
+        };
+    const area = config.axis === "horizontal"
+        ? {
+            left: inner.left,
+            top: side === "top" ? inner.top : content.bottom,
+            width,
+            height: Math.max(0, (side === "top" ? content.top : inner.bottom) - (side === "top" ? inner.top : content.bottom)),
+        }
+        : {
+            left: side === "left" ? inner.left : content.right,
+            top: inner.top,
+            width: Math.max(0, (side === "left" ? content.left : inner.right) - (side === "left" ? inner.left : content.right)),
+            height,
+        };
+    const hit = guideHit(guide, config.axis);
+    return {
+        kind: "padding",
+        property: `padding-${side}`,
+        side,
+        axis: config.axis,
+        dragAxis: config.dragAxis,
+        value,
+        cursor: config.axis === "horizontal" ? "ns-resize" : "ew-resize",
+        guide,
+        affectedGuides: [guide],
+        affectedAreas: [area],
+        hit,
+        direction: config.direction,
+        element,
+    };
+}
+function paddingAffordanceAtPoint(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 && containsRectPoint(affordance.hit, x, y))
+            return affordance;
+    }
+    return null;
+}
+function overlap(startA, endA, startB, endB) {
+    return Math.min(endA, endB) - Math.max(startA, startB) > EPSILON;
+}
+function layoutChildren(element) {
+    const HTMLElementConstructor = element.ownerDocument.defaultView?.HTMLElement;
+    if (!HTMLElementConstructor)
+        return [];
+    return Array.from(element.children)
+        .filter((child) => child instanceof HTMLElementConstructor)
+        .map((child) => ({ element: child, rect: boxEdges(child) }));
+}
+function gapSegments(element) {
+    const style = getElementComputedStyle(element);
+    if (style.display !== "flex"
+        && style.display !== "inline-flex"
+        && style.display !== "grid"
+        && style.display !== "inline-grid")
+        return [];
+    const children = layoutChildren(element);
+    const segments = [];
+    const byLeft = [...children].sort((left, right) => left.rect.left - right.rect.left);
+    const byTop = [...children].sort((top, bottom) => top.rect.top - bottom.rect.top);
+    for (const left of byLeft) {
+        const next = byLeft.find((right) => right.rect.left >= left.rect.right - EPSILON
+            && overlap(left.rect.top, left.rect.bottom, right.rect.top, right.rect.bottom));
+        if (!next)
+            continue;
+        segments.push({
+            property: "column-gap",
+            axis: "horizontal",
+            start: left.rect.right,
+            end: next.rect.left,
+            crossStart: Math.max(left.rect.top, next.rect.top),
+            crossEnd: Math.min(left.rect.bottom, next.rect.bottom),
+        });
+    }
+    for (const top of byTop) {
+        const next = byTop.find((bottom) => bottom.rect.top >= top.rect.bottom - EPSILON
+            && overlap(top.rect.left, top.rect.right, bottom.rect.left, bottom.rect.right));
+        if (!next)
+            continue;
+        segments.push({
+            property: "row-gap",
+            axis: "vertical",
+            start: top.rect.bottom,
+            end: next.rect.top,
+            crossStart: Math.max(top.rect.left, next.rect.left),
+            crossEnd: Math.min(top.rect.right, next.rect.right),
+        });
+    }
+    return segments;
+}
+function gapAffordanceAtPoint(element, x, y, property) {
+    const segments = gapSegments(element);
+    if (segments.length === 0)
+        return null;
+    const style = getElementComputedStyle(element);
+    const candidate = segments.find((segment) => {
+        if (property && segment.property !== property)
+            return false;
+        return containsRectPoint(gapDragHit(segment), x, y);
+    });
+    if (!candidate)
+        return null;
+    const value = gapValue(style, candidate.property);
+    const guide = gapGuide(candidate);
+    const matchingSegments = segments.filter((segment) => segment.property === candidate.property);
+    const hit = gapDragHit(candidate);
+    return {
+        kind: "gap",
+        property: candidate.property,
+        side: null,
+        axis: candidate.axis,
+        dragAxis: candidate.axis === "horizontal" ? "x" : "y",
+        value,
+        cursor: candidate.axis === "horizontal" ? "ew-resize" : "ns-resize",
+        guide,
+        affectedGuides: matchingSegments.map(gapGuide),
+        affectedAreas: matchingSegments.map(gapArea),
+        hit,
+        // Gap size is absolute screen space; dragging along +axis always grows it.
+        direction: 1,
+        element,
+    };
+}
+function gapGuide(segment) {
+    const midpoint = (segment.start + segment.end) / 2;
+    const crossSize = Math.max(0, segment.crossEnd - segment.crossStart);
+    return segment.axis === "horizontal"
+        ? { left: midpoint - 1, top: segment.crossStart, width: 2, height: crossSize }
+        : { left: segment.crossStart, top: midpoint - 1, width: crossSize, height: 2 };
+}
+function gapArea(segment) {
+    const crossSize = Math.max(0, segment.crossEnd - segment.crossStart);
+    return segment.axis === "horizontal"
+        ? {
+            left: segment.start,
+            top: segment.crossStart,
+            width: Math.max(0, segment.end - segment.start),
+            height: crossSize,
+        }
+        : {
+            left: segment.crossStart,
+            top: segment.start,
+            width: crossSize,
+            height: Math.max(0, segment.end - segment.start),
+        };
+}
+function gapDragHit(segment) {
+    const orientation = segment.axis === "horizontal" ? "vertical" : "horizontal";
+    return guideHit(gapGuide(segment), orientation);
+}
+function gapValue(style, property) {
+    const direct = style.getPropertyValue(property)
+        || (property === "row-gap" ? style.rowGap : style.columnGap);
+    if (direct.trim())
+        return numberValue(direct);
+    // jsdom and a few older browser CSSOM implementations expose `gap` but not
+    // the longhands through getPropertyValue(). Keep the gesture model aligned
+    // with the browser's shorthand fallback in those realms.
+    const shorthand = style.getPropertyValue("gap") || style.gap;
+    const values = shorthand.trim().split(/\s+/).filter(Boolean);
+    if (values.length === 0)
+        return 0;
+    if (values.length === 1)
+        return numberValue(values[0]);
+    return numberValue(property === "row-gap" ? values[0] : values[1]);
+}
+function trackedElementsAtPoint(doc, x, y) {
+    if (typeof doc.elementFromPoint !== "function")
+        return [];
+    const target = doc.elementFromPoint(x, y);
+    if (!target)
+        return [];
+    const HTMLElementConstructor = doc.defaultView?.HTMLElement;
+    if (!HTMLElementConstructor)
+        return [];
+    const result = [];
+    let element = target;
+    while (element) {
+        if (element instanceof HTMLElementConstructor && element.hasAttribute("data-cid")) {
+            result.push(element);
+        }
+        element = element.parentElement;
+    }
+    return result;
+}
+/** Finds the spacing target under a document-local pointer location. */
+export function getSpacingAffordanceAtPoint(doc, x, y) {
+    const candidates = trackedElementsAtPoint(doc, x, y);
+    for (const element of candidates) {
+        const padding = paddingAffordanceAtPoint(element, x, y);
+        if (padding)
+            return padding;
+    }
+    for (const element of candidates) {
+        const gap = gapAffordanceAtPoint(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") {
+        const side = descriptor.side;
+        if (!side || descriptor.property !== `padding-${side}`)
+            return null;
+        return paddingAffordanceForSide(element, side);
+    }
+    if (descriptor.property !== "row-gap" && descriptor.property !== "column-gap")
+        return null;
+    const segment = gapSegments(element).find((candidate) => candidate.property === descriptor.property);
+    if (!segment)
+        return null;
+    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. */
+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));
+}
+export function spacingValueCss(value) {
+    return `${Math.max(0, Math.round(value))}px`;
+}
+/** Serializes the stable part of an affordance for renderer-to-controller messages. */
+export function toSpacingDescriptor(affordance) {
+    return {
+        kind: affordance.kind,
+        property: affordance.property,
+        side: affordance.side,
+    };
+}

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

@@ -20,9 +20,9 @@ export declare function canContainElement(parent: HTMLElement, child: HTMLElemen
 /** Derives a safe insertion point; its nodes never leave this gesture module. */
 export declare function getDropLocationForElement(dragged: HTMLElement, target: HTMLElement, beforeTarget: boolean, preferContainer?: boolean): DropLocation | null;
 export declare function getDropLocationAtPoint(doc: Document, dragged: HTMLElement, x: number, y: number): DropLocation | null;
-/** Capture the move as canonical intent, then project only the controller host. */
+/** Capture the move as canonical intent, then preview it in an inline host. */
 export declare function moveElement(node: HTMLElement, destination: DropLocation): StructuralMove | null;
 /** Reorder only same-parent siblings; horizontal movement needs a flex row. */
 export declare function nudgeElement(node: HTMLElement, key: StructuralNudgeKey): StructuralMove | null;
-/** Capture delete intent and project only the controller host. */
+/** Capture delete intent, then preview it in an inline host. */
 export declare function deleteElement(selected: SelectedElement): StructuralDelete | null;

package/dist/inspector/overlay/structuralGestures.js

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

package/dist/inspector/projection/managedStylesheet.js

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

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

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

package/dist/inspector/projection/renderedInstance.js

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

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

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

package/dist/inspector/projection/structuralProjection.js

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

package/dist/inspector/projection/structuralProjectionBoundary.js

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

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

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

package/dist/inspector/projection/textProjection.js

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

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

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