nudge-ui 0.2.0

package/dist/inspector/overlay/interactionStyles.js

@@ -0,0 +1,70 @@
+const INTERACTION_STYLE_ID = "nudge-ui-interaction-styles";
+const interactionStyleDocuments = new Set();
+const INTERACTION_CSS = `
+  [data-cid], [data-cid] * {
+    cursor: default !important;
+    -webkit-user-select: none !important;
+    user-select: none !important;
+  }
+
+  [data-cid] input,
+  [data-cid] textarea,
+  [data-cid] [contenteditable="true"],
+  [data-cid] [contenteditable="plaintext-only"] {
+    cursor: text !important;
+    -webkit-user-select: text !important;
+    user-select: text !important;
+    outline: 0 !important;
+  }
+
+  /*
+   * An empty rendered-text projection has no glyph for the browser to hit
+   * test. The projection module inserts this inspector-owned slot beside the
+   * original empty Text node. It is intentionally borderless: the blue fill
+   * is the affordance, while the normal selected-element outline remains a
+   * separate overlay.
+   */
+  [data-empty-text] {
+    display: inline-block !important;
+    width: 0.75em !important;
+    min-width: 0.75em !important;
+    height: 1em !important;
+    min-height: 1em !important;
+    vertical-align: baseline !important;
+    border: 0 !important;
+    border-radius: 2px !important;
+    background: rgba(59, 130, 246, 0.16) !important;
+    cursor: text !important;
+    -webkit-user-select: none !important;
+    user-select: none !important;
+    outline: 0 !important;
+  }
+`;
+export function isInteractionStylesInstalled(doc = document) {
+    return interactionStyleDocuments.has(doc);
+}
+/** Installs temporary interaction affordances without mutating tracked nodes. */
+export function installInteractionStyles(doc = document) {
+    // SAFETY: getElementById returns an Element; the style element is created as HTMLStyleElement below when missing.
+    let style = doc.getElementById(INTERACTION_STYLE_ID);
+    let created = false;
+    if (!style) {
+        style = doc.createElement("style");
+        style.id = INTERACTION_STYLE_ID;
+        style.textContent = INTERACTION_CSS;
+        doc.head.append(style);
+        created = true;
+    }
+    interactionStyleDocuments.add(doc);
+    for (const slot of Array.from(doc.querySelectorAll("[data-empty-text]"))) {
+        slot.hidden = false;
+    }
+    return () => {
+        interactionStyleDocuments.delete(doc);
+        for (const slot of Array.from(doc.querySelectorAll("[data-empty-text]"))) {
+            slot.hidden = true;
+        }
+        if (created)
+            style?.remove();
+    };
+}

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

@@ -0,0 +1,25 @@
+import type { BorderWidths, Rect } from "./overlayGeometry.js";
+export type MeasurementAxis = "horizontal" | "vertical";
+export interface MeasurementSegment {
+    id: string;
+    kind: "ruler" | "projection";
+    axis: MeasurementAxis;
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+    /** A ruler has a visible, rounded pixel label; projections do not. */
+    distance?: number;
+}
+export interface MeasurementGeometry {
+    segments: MeasurementSegment[];
+}
+export interface MeasurementGeometryOptions {
+    selectedBorders?: BorderWidths;
+    hoveredBorders?: BorderWidths;
+}
+export declare function getMeasurementGeometry(selected: Rect, hovered: Rect, options?: MeasurementGeometryOptions): MeasurementGeometry;

package/dist/inspector/overlay/measurementGeometry.js

@@ -0,0 +1,104 @@
+const EPSILON = 0.01;
+function bounds(rect, axis) {
+    return axis === "horizontal"
+        ? { min: rect.left, max: rect.left + rect.width }
+        : { min: rect.top, max: rect.top + rect.height };
+}
+function innerBounds(rect, borders, axis) {
+    const outer = bounds(rect, axis);
+    if (!borders)
+        return outer;
+    return axis === "horizontal"
+        ? { min: outer.min + borders.left, max: outer.max - borders.right }
+        : { min: outer.min + borders.top, max: outer.max - borders.bottom };
+}
+function center(rect, axis) {
+    const range = bounds(rect, axis);
+    return (range.min + range.max) / 2;
+}
+function centerFromBounds(range) {
+    return (range.min + range.max) / 2;
+}
+function hasLength(from, to) {
+    return Math.abs(to - from) > EPSILON;
+}
+/**
+ * Finds the labelled ruler(s) for one axis. A positive gap gets a single
+ * nearest-edge ruler. On overlap, the measurement changes to the hovered
+ * element's far edge; containment has two meaningful inset measurements.
+ */
+function getAxisRulers(selected, hovered, selectedInner, hoveredInner) {
+    if (selected.max < hovered.min - EPSILON) {
+        return [{ selectedEdge: selected.max, hoveredEdge: hovered.min }];
+    }
+    if (hovered.max < selected.min - EPSILON) {
+        return [{ selectedEdge: selected.min, hoveredEdge: hovered.max }];
+    }
+    const selectedContainsHovered = selected.min <= hovered.min + EPSILON
+        && selected.max >= hovered.max - EPSILON;
+    const hoveredContainsSelected = hovered.min <= selected.min + EPSILON
+        && hovered.max >= selected.max - EPSILON;
+    if (selectedContainsHovered && hoveredContainsSelected) {
+        return [
+            { selectedEdge: selected.min, hoveredEdge: hovered.min },
+            { selectedEdge: selected.max, hoveredEdge: hovered.max },
+        ].filter((ruler) => hasLength(ruler.selectedEdge, ruler.hoveredEdge));
+    }
+    if (selectedContainsHovered) {
+        return [
+            { selectedEdge: selectedInner.min, hoveredEdge: hovered.min },
+            { selectedEdge: selectedInner.max, hoveredEdge: hovered.max },
+        ].filter((ruler) => hasLength(ruler.selectedEdge, ruler.hoveredEdge));
+    }
+    if (hoveredContainsSelected) {
+        return [
+            { selectedEdge: selected.min, hoveredEdge: hoveredInner.min },
+            { selectedEdge: selected.max, hoveredEdge: hoveredInner.max },
+        ].filter((ruler) => hasLength(ruler.selectedEdge, ruler.hoveredEdge));
+    }
+    // The boxes partially overlap. Measure from the selected outside edge to
+    // the hover's far edge rather than rendering a zero or negative gap.
+    if (centerFromBounds(selected) >= centerFromBounds(hovered)) {
+        return [{ selectedEdge: selected.min, hoveredEdge: hovered.min }];
+    }
+    return [{ selectedEdge: selected.max, hoveredEdge: hovered.max }];
+}
+function createSegment(id, kind, axis, from, to, cross) {
+    const horizontal = axis === "horizontal";
+    return {
+        id,
+        kind,
+        axis,
+        from: horizontal ? { x: from, y: cross } : { x: cross, y: from },
+        to: horizontal ? { x: to, y: cross } : { x: cross, y: to },
+        ...(kind === "ruler" ? { distance: Math.abs(to - from) } : {}),
+    };
+}
+/**
+ * Solid rulers always run through the selected element's centerline. If the
+ * centerline does not meet the hovered edge, a perpendicular dotted extension
+ * starts at that hovered edge and joins the ruler.
+ */
+function appendPrimaryRulers(segments, selected, hovered, axis, options) {
+    const crossAxis = axis === "horizontal" ? "vertical" : "horizontal";
+    const cross = center(selected, crossAxis);
+    const hoveredCross = bounds(hovered, crossAxis);
+    const rulers = getAxisRulers(bounds(selected, axis), bounds(hovered, axis), innerBounds(selected, options.selectedBorders, axis), innerBounds(hovered, options.hoveredBorders, axis));
+    rulers.forEach((ruler, index) => {
+        segments.push(createSegment(`primary-${axis}-${index}`, "ruler", axis, ruler.selectedEdge, ruler.hoveredEdge, cross));
+        const hoveredNearestCrossEdge = cross < hoveredCross.min - EPSILON
+            ? hoveredCross.min
+            : cross > hoveredCross.max + EPSILON
+                ? hoveredCross.max
+                : null;
+        if (hoveredNearestCrossEdge === null || !hasLength(hoveredNearestCrossEdge, cross))
+            return;
+        segments.push(createSegment(`projection-${axis}-${index}`, "projection", crossAxis, hoveredNearestCrossEdge, cross, ruler.hoveredEdge));
+    });
+}
+export function getMeasurementGeometry(selected, hovered, options = {}) {
+    const segments = [];
+    appendPrimaryRulers(segments, selected, hovered, "horizontal", options);
+    appendPrimaryRulers(segments, selected, hovered, "vertical", options);
+    return { segments };
+}

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

@@ -0,0 +1,40 @@
+export interface Rect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface Margins {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface BorderWidths {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export type MarginGuideSide = keyof Margins;
+export interface MarginGuide {
+    side: MarginGuideSide;
+    axis: "horizontal" | "vertical";
+    distance: number;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface MarginFill {
+    side: MarginGuideSide;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export declare function toRect(domRect: DOMRect): Rect;
+export declare function readMargins(element: HTMLElement): Margins;
+export declare function readBorderWidths(element: HTMLElement): BorderWidths;
+export declare function getMarginGuides(rect: Rect, margins: Margins): MarginGuide[];
+export declare function getMarginFills(rect: Rect, margins: Margins): MarginFill[];

package/dist/inspector/overlay/overlayGeometry.js

@@ -0,0 +1,59 @@
+import { getElementComputedStyle } from "../runtime/domRealm.js";
+export function toRect(domRect) {
+    return {
+        left: domRect.left,
+        top: domRect.top,
+        width: domRect.width,
+        height: domRect.height,
+    };
+}
+function toPixels(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+export function readMargins(element) {
+    const style = getElementComputedStyle(element);
+    return {
+        top: toPixels(style.marginTop),
+        right: toPixels(style.marginRight),
+        bottom: toPixels(style.marginBottom),
+        left: toPixels(style.marginLeft),
+    };
+}
+export function readBorderWidths(element) {
+    const style = getElementComputedStyle(element);
+    return {
+        top: toPixels(style.borderTopWidth),
+        right: toPixels(style.borderRightWidth),
+        bottom: toPixels(style.borderBottomWidth),
+        left: toPixels(style.borderLeftWidth),
+    };
+}
+export function getMarginGuides(rect, margins) {
+    const guides = [];
+    const right = rect.left + rect.width;
+    const bottom = rect.top + rect.height;
+    if (Math.abs(margins.top) > 0.01)
+        guides.push({ side: "top", axis: "horizontal", distance: margins.top, left: rect.left, top: rect.top - margins.top, width: rect.width, height: 0 });
+    if (Math.abs(margins.right) > 0.01)
+        guides.push({ side: "right", axis: "vertical", distance: margins.right, left: right + margins.right, top: rect.top, width: 0, height: rect.height });
+    if (Math.abs(margins.bottom) > 0.01)
+        guides.push({ side: "bottom", axis: "horizontal", distance: margins.bottom, left: rect.left, top: bottom + margins.bottom, width: rect.width, height: 0 });
+    if (Math.abs(margins.left) > 0.01)
+        guides.push({ side: "left", axis: "vertical", distance: margins.left, left: rect.left - margins.left, top: rect.top, width: 0, height: rect.height });
+    return guides;
+}
+export function getMarginFills(rect, margins) {
+    const fills = [];
+    const right = rect.left + rect.width;
+    const bottom = rect.top + rect.height;
+    if (margins.top > 0.01)
+        fills.push({ side: "top", left: rect.left, top: rect.top - margins.top, width: rect.width, height: margins.top });
+    if (margins.right > 0.01)
+        fills.push({ side: "right", left: right, top: rect.top, width: margins.right, height: rect.height });
+    if (margins.bottom > 0.01)
+        fills.push({ side: "bottom", left: rect.left, top: bottom, width: rect.width, height: margins.bottom });
+    if (margins.left > 0.01)
+        fills.push({ side: "left", left: rect.left - margins.left, top: rect.top, width: margins.left, height: rect.height });
+    return fills;
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Watches the small set of browser events that can change a selected element's
+ * viewport rect without changing its selection identity. Structural gestures
+ * can move a selected element between containers, so the child-list observer
+ * follows the element's current parent after each mutation.
+ */
+export declare function observeSelectedGeometry(element: HTMLElement, onChange: () => void): () => void;

package/dist/inspector/overlay/selectedGeometry.js

@@ -0,0 +1,51 @@
+import { getElementWindow } from "../runtime/domRealm.js";
+/**
+ * Watches the small set of browser events that can change a selected element's
+ * viewport rect without changing its selection identity. Structural gestures
+ * can move a selected element between containers, so the child-list observer
+ * follows the element's current parent after each mutation.
+ */
+export function observeSelectedGeometry(element, onChange) {
+    const view = getElementWindow(element);
+    // getElementWindow returns the cross-realm Window interface, while the
+    // project-wide browser global also carries the observer constructors.
+    // SAFETY: view is a same-realm Window, and the runtime realm exposes the observer constructors as project-wide globals.
+    const { ResizeObserver: ResizeObserverCtor, MutationObserver: MutationObserverCtor } = view;
+    let frame = null;
+    function schedule() {
+        if (frame !== null)
+            return;
+        frame = view.requestAnimationFrame(() => {
+            frame = null;
+            onChange();
+        });
+    }
+    const resizeObserver = ResizeObserverCtor
+        ? new ResizeObserverCtor(schedule)
+        : null;
+    resizeObserver?.observe(element);
+    let observedParent = null;
+    const mutationObserver = MutationObserverCtor ? new MutationObserverCtor(() => {
+        const currentParent = element.parentElement;
+        if (currentParent !== observedParent) {
+            observedParent = currentParent;
+            mutationObserver?.disconnect();
+            if (observedParent)
+                mutationObserver?.observe(observedParent, { childList: true });
+        }
+        schedule();
+    }) : null;
+    observedParent = element.parentElement;
+    if (observedParent)
+        mutationObserver?.observe(observedParent, { childList: true });
+    view.addEventListener("resize", schedule);
+    view.addEventListener("scroll", schedule, true);
+    return () => {
+        if (frame !== null)
+            view.cancelAnimationFrame(frame);
+        resizeObserver?.disconnect();
+        mutationObserver?.disconnect();
+        view.removeEventListener("resize", schedule);
+        view.removeEventListener("scroll", schedule, true);
+    };
+}

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

@@ -0,0 +1,28 @@
+import type { SelectedElement } from "../selection/selectionStore.js";
+import { type StructuralDelete, type StructuralMove } from "../projection/structuralProjection.js";
+export type StructuralNudgeKey = "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
+/**
+ * A temporary, document-local insertion point. It is intentionally not a
+ * structural record: `moveElement` captures durable rendered-instance refs
+ * before handing the canonical action to structuralProjection.
+ */
+export interface DropLocation {
+    parent: HTMLElement;
+    before: Node | null;
+    orientation: "horizontal" | "vertical";
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/** Conservative HTML guard shared with canonical capture and document replay. */
+export declare function canContainElement(parent: HTMLElement, child: HTMLElement): boolean;
+/** 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. */
+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. */
+export declare function deleteElement(selected: SelectedElement): StructuralDelete | null;

package/dist/inspector/overlay/structuralGestures.js

@@ -0,0 +1,180 @@
+import { applyStructuralProjection, canContainElement as canContainStructuralElement, createStructuralDelete, createStructuralMove, getStructuralMoveLegality, getStructuralChanges, } from "../projection/structuralProjection.js";
+/** Conservative HTML guard shared with canonical capture and document replay. */
+export function canContainElement(parent, child) {
+    return canContainStructuralElement(parent, child);
+}
+function isContainerCandidate(element, dragged) {
+    return getStructuralMoveLegality(dragged, { parent: element, before: null }).valid;
+}
+function isFlexRow(parent) {
+    const style = parent.ownerDocument.defaultView?.getComputedStyle(parent);
+    return (style?.display === "flex" || style?.display === "inline-flex")
+        && (style.flexDirection || "row").startsWith("row");
+}
+function isFlexRowReverse(parent) {
+    return parent.ownerDocument.defaultView?.getComputedStyle(parent).flexDirection === "row-reverse";
+}
+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 lineFor(parent, before, flexGapCentre) {
+    const parentRect = parent.getBoundingClientRect();
+    // SAFETY: before.nodeType === 1 was checked above, so it is an HTMLElement.
+    const beforeElement = before?.nodeType === 1 ? before : null;
+    const reference = beforeElement ?? parent.lastElementChild;
+    const referenceRect = reference?.getBoundingClientRect();
+    const parentRight = rightOf(parentRect);
+    const parentBottom = bottomOf(parentRect);
+    const horizontalInset = Math.min(8, Math.max(2, parentRect.width / 12));
+    if (isFlexRow(parent)) {
+        const reverse = isFlexRowReverse(parent);
+        const intendedLeft = flexGapCentre ?? (beforeElement
+            ? (reverse ? rightOf(referenceRect ?? parentRect) : referenceRect?.left ?? parentRect.left)
+            : (reverse ? referenceRect?.left ?? parentRect.left : rightOf(referenceRect ?? parentRect)));
+        const verticalInset = Math.min(8, Math.max(2, parentRect.height / 12));
+        return {
+            orientation: "vertical",
+            left: Math.max(parentRect.left + 2, Math.min(intendedLeft, parentRight - 2)),
+            top: parentRect.top + verticalInset,
+            width: 4,
+            height: Math.max(0, parentRect.height - verticalInset * 2),
+        };
+    }
+    const intendedTop = beforeElement
+        ? referenceRect?.top ?? parentRect.top
+        : referenceRect ? bottomOf(referenceRect) : parentRect.top + 8;
+    return {
+        orientation: "horizontal",
+        left: parentRect.left + horizontalInset,
+        top: Math.max(parentRect.top + 4, Math.min(intendedTop, parentBottom - 4)),
+        width: Math.max(0, parentRect.width - horizontalInset * 2),
+        height: 4,
+    };
+}
+function flexRowGapAtPoint(parent, dragged, x, y) {
+    const style = parent.ownerDocument.defaultView?.getComputedStyle(parent);
+    if ((style?.flexWrap && style.flexWrap !== "nowrap") || !canContainElement(parent, dragged))
+        return null;
+    const parentRect = parent.getBoundingClientRect();
+    if (y < parentRect.top || y > bottomOf(parentRect))
+        return null;
+    let left = null;
+    let right = null;
+    const HTMLElementConstructor = parent.ownerDocument.defaultView.HTMLElement;
+    for (const child of Array.from(parent.children)) {
+        if (!(child instanceof HTMLElementConstructor))
+            continue;
+        const rect = child.getBoundingClientRect();
+        if (rightOf(rect) <= x && (!left || rightOf(rect) > rightOf(left.rect)))
+            left = { element: child, rect };
+        if (rect.left >= x && (!right || rect.left < right.rect.left))
+            right = { element: child, rect };
+    }
+    if (!left || !right)
+        return null;
+    const gapStart = rightOf(left.rect);
+    const gapEnd = right.rect.left;
+    if (gapEnd - gapStart < 4)
+        return null;
+    const before = isFlexRowReverse(parent) ? left.element : right.element;
+    if (!getStructuralMoveLegality(dragged, { parent, before }).valid)
+        return null;
+    return { parent, before, ...lineFor(parent, before, (gapStart + gapEnd) / 2) };
+}
+function flexRowChildAtTarget(dragged, target) {
+    let child = target;
+    while (child?.parentElement) {
+        const parent = child.parentElement;
+        if (isFlexRow(parent) && canContainElement(parent, dragged)
+            && child !== dragged && !dragged.contains(child))
+            return child;
+        child = parent;
+    }
+    return null;
+}
+/** Derives a safe insertion point; its nodes never leave this gesture module. */
+export function getDropLocationForElement(dragged, target, beforeTarget, preferContainer = true) {
+    if (target === dragged || dragged.contains(target))
+        return null;
+    if (preferContainer && isContainerCandidate(target, dragged)) {
+        const directChild = Array.from(target.children).find((child) => child.contains(dragged));
+        if (!directChild) {
+            const legality = getStructuralMoveLegality(dragged, { parent: target, before: null });
+            if (legality.valid)
+                return { parent: target, before: null, ...lineFor(target, null) };
+        }
+    }
+    let candidate = target;
+    while (candidate) {
+        const parent = candidate.parentElement;
+        if (parent && canContainElement(parent, dragged) && candidate !== dragged && !dragged.contains(candidate)) {
+            const before = beforeTarget ? candidate : candidate.nextElementSibling;
+            const legality = getStructuralMoveLegality(dragged, { parent, before });
+            if (legality.valid)
+                return { parent, before, ...lineFor(parent, before) };
+            return null;
+        }
+        candidate = parent;
+    }
+    return null;
+}
+export function getDropLocationAtPoint(doc, dragged, x, y) {
+    const target = doc.elementFromPoint(x, y);
+    if (!(target instanceof doc.defaultView.HTMLElement))
+        return null;
+    if (isFlexRow(target)) {
+        const gapDrop = flexRowGapAtPoint(target, dragged, x, y);
+        if (gapDrop)
+            return gapDrop;
+    }
+    const flexRowChild = flexRowChildAtTarget(dragged, target);
+    if (flexRowChild) {
+        const rect = flexRowChild.getBoundingClientRect();
+        const reverse = isFlexRowReverse(flexRowChild.parentElement);
+        return getDropLocationForElement(dragged, flexRowChild, reverse ? x > rect.left + rect.width / 2 : x < rect.left + rect.width / 2, false);
+    }
+    const rect = target.getBoundingClientRect();
+    const edgeBand = Math.min(24, Math.max(8, rect.height * 0.3));
+    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. */
+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());
+    return change;
+}
+/** Reorder only same-parent siblings; horizontal movement needs a flex row. */
+export function nudgeElement(node, key) {
+    const parent = node.parentElement;
+    if (!parent || !node.isConnected)
+        return null;
+    if ((key === "ArrowLeft" || key === "ArrowRight") && !isFlexRow(parent))
+        return null;
+    const moveEarlier = key === "ArrowUp" || key === "ArrowLeft";
+    const sibling = moveEarlier ? node.previousElementSibling : node.nextElementSibling;
+    if (!sibling)
+        return null;
+    const before = moveEarlier ? sibling : sibling.nextElementSibling;
+    return moveElement(node, { parent, before, ...lineFor(parent, before) });
+}
+/** Capture delete intent and project only the controller 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());
+    return change;
+}

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

@@ -0,0 +1,3 @@
+/** CSS-string escaping for selectors assembled from runtime DOM metadata. */
+export declare function escapeCssString(value: string): string;
+export declare function escapeAttrValue(value: string): string;

package/dist/inspector/projection/cssEscapes.js

@@ -0,0 +1,20 @@
+/** CSS-string escaping for selectors assembled from runtime DOM metadata. */
+export function escapeCssString(value) {
+    // Keep ordinary source selectors readable and byte-compatible. Once a
+    // string contains a quote, backslash, or control character, hex-escape the
+    // complete value so punctuation cannot terminate the CSS string early.
+    if (!/["\\\0-\x1f\x7f]/.test(value))
+        return value;
+    let escaped = "";
+    for (const character of value) {
+        if (/^[A-Za-z0-9 _-]$/.test(character)) {
+            escaped += character;
+            continue;
+        }
+        escaped += `\\${character.codePointAt(0).toString(16)} `;
+    }
+    return escaped;
+}
+export function escapeAttrValue(value) {
+    return escapeCssString(value);
+}

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

@@ -0,0 +1,33 @@
+import type { StyleRuleContext } from "../changes/editModel.js";
+export { escapeAttrValue, escapeCssString } from "./cssEscapes.js";
+export type { StyleRuleContext } from "../changes/editModel.js";
+declare global {
+    interface Window {
+        __nudgeUiGetManagedSheetText?: () => string;
+    }
+}
+export interface StyleRule {
+    selector: string;
+    declarations: Record<string, string>;
+    context?: StyleRuleContext;
+}
+export type PreviewConflictReason = "higher-specificity" | "inline-style" | "important" | "animation" | "transition" | "target-missing" | "token-drift";
+export interface PreviewResult {
+    requestedValue: string;
+    computedValue: string;
+    status: "applied" | "conflict";
+    reason?: PreviewConflictReason;
+}
+export declare function ensureManagedSheet(): void;
+export declare function rulesToCssText(rules: StyleRule[]): string;
+/** Synchronous serialized view of the rules currently projected into the managed sheet. */
+export declare function getManagedSheetText(): string;
+/**
+ * Replaces the managed sheet with the canonical projection. Keeping the
+ * serialized rules authoritative avoids stale CSSStyleRule references when a
+ * framework dev server reparses or reattaches style nodes during a render.
+ */
+export declare function applyRules(rules: StyleRule[]): void;
+/** Verify what the browser painted after the managed sheet was projected. */
+export declare function verifyPreview(el: HTMLElement | null, property: string, requestedValue: string): PreviewResult;
+export declare function removeManagedSheet(): void;