nudge-ui 0.2.0 → 0.2.1

package/dist/inspector/inline-text/textEditChange.js

@@ -0,0 +1,165 @@
+import { createComponentPropChange } from "../componentSemantics/changeModel.js";
+import { captureTextProjectionTarget, textProjectionSelector } from "../projection/textProjection.js";
+export function initialTextEditDecision(candidate) {
+    return {
+        bindingIndex: candidate.bindingChoices?.length === 1 ? 0 : null,
+        scope: candidate.scope ?? (candidate.binding.kind === "rendered-text" ? "rendered-instance" : "source-site"),
+    };
+}
+export function chooseTextEditBinding(candidate, index) {
+    const choice = candidate.bindingChoices?.[index];
+    if (!choice)
+        return null;
+    return {
+        bindingIndex: index,
+        scope: choice.mountedCount > 1 ? "rendered-instance" : "source-site",
+    };
+}
+function selectedBinding(candidate, decision) {
+    return decision.bindingIndex === null ? null : candidate.bindingChoices?.[decision.bindingIndex] ?? null;
+}
+export function getTextEditScopeChoices(candidate, decision) {
+    const choice = selectedBinding(candidate, decision);
+    if (!choice)
+        return candidate.scopeChoices ?? [];
+    return choice.mountedCount > 1 && choice.authoredAs === "literal"
+        ? ["rendered-instance", "source-site"]
+        : [];
+}
+export function getTextEditBinding(candidate, decision, capturedTarget) {
+    const choice = selectedBinding(candidate, decision);
+    if (!choice)
+        return candidate.binding;
+    if (choice.mountedCount > 1 && choice.authoredAs !== "literal") {
+        const target = choice.renderedTarget ?? candidate.renderedTarget ?? capturedTarget;
+        return target ? { kind: "rendered-text", target } : choice.binding;
+    }
+    return choice.binding;
+}
+function sourceForChoice(candidate, choice) {
+    if (choice?.renderedSource)
+        return choice.renderedSource;
+    if (candidate.renderedSource
+        && (!choice || candidate.renderedSource.evidence?.callsiteId === choice.binding.target.callsiteId
+            && candidate.renderedSource.evidence.property === choice.binding.property)) {
+        return candidate.renderedSource;
+    }
+    const parsed = /^(.*):(\d+):(\d+)$/.exec(candidate.element.getAttribute("data-src") ?? "");
+    const target = choice?.binding.target;
+    const authoredAs = choice?.authoredAs === "literal"
+        ? "literal"
+        : choice?.authoredAs === "expression" || choice?.authoredAs === "spread"
+            ? "expression"
+            : "unknown";
+    return {
+        file: target?.file ?? parsed?.[1] ?? candidate.element.getAttribute("data-src") ?? "",
+        line: target?.line ?? Number(parsed?.[2] ?? 0),
+        column: target?.column ?? Number(parsed?.[3] ?? 0),
+        component: target?.componentName ?? candidate.element.getAttribute("data-cid") ?? "Rendered text",
+        selector: candidate.binding.kind === "rendered-text"
+            ? textProjectionSelector(candidate.binding.target) ?? ""
+            : "",
+        authoredAs,
+        evidence: choice ? {
+            callsiteId: choice.binding.target.callsiteId,
+            componentName: choice.binding.target.componentName,
+            property: choice.binding.property,
+            mountedCount: choice.mountedCount,
+        } : undefined,
+    };
+}
+function componentEvidence(candidate, choice) {
+    const target = choice.renderedTarget
+        ?? candidate.renderedTarget
+        ?? captureTextProjectionTarget(candidate.element, candidate.before, candidate.textNode);
+    return {
+        occurrence: target?.occurrence ?? 0,
+        props: target?.props ?? candidate.element.getAttribute("data-cprops"),
+        ariaLabel: target?.ariaLabel ?? candidate.element.getAttribute("aria-label"),
+        beforeText: candidate.before,
+        mountedCount: choice.mountedCount,
+    };
+}
+function textTargetFor(candidate, binding, choice) {
+    if (choice?.renderedTarget)
+        return choice.renderedTarget;
+    if (candidate.renderedTarget)
+        return candidate.renderedTarget;
+    if (binding.kind === "rendered-text")
+        return binding.target;
+    return captureTextProjectionTarget(candidate.element, candidate.before, candidate.textNode);
+}
+function choiceForCommit(candidate, selectedChoice) {
+    const choice = selectedChoice ?? candidate.bindingChoices?.[0];
+    const target = candidate.editableTarget;
+    if (choice || !target || candidate.mountedCount === undefined)
+        return choice ?? null;
+    const property = candidate.binding.kind === "component-prop"
+        ? candidate.binding.property
+        : "children";
+    return {
+        binding: candidate.binding.kind === "component-prop"
+            ? candidate.binding
+            : {
+                kind: "component-prop",
+                property,
+                target: {
+                    framework: target.framework,
+                    componentId: target.contract.componentId,
+                    callsiteId: target.meta.callsiteId,
+                    componentName: target.meta.componentName,
+                    file: target.meta.file,
+                    line: target.meta.line,
+                    column: target.meta.column,
+                },
+            },
+        editableTarget: target,
+        mountedCount: candidate.mountedCount,
+        authoredAs: target.meta.authoredProps[property] ?? "default",
+        renderedTarget: candidate.renderedTarget ?? null,
+        renderedSource: candidate.renderedSource,
+    };
+}
+/** Builds a canonical record without changing the DOM, appending history, or ending a draft. */
+export function prepareTextEditChange(candidate, decision, capturedTarget, after) {
+    if ((candidate.bindingChoices?.length ?? 0) > 1 && decision.bindingIndex === null)
+        return null;
+    const binding = getTextEditBinding(candidate, decision, capturedTarget);
+    const choice = choiceForCommit(candidate, selectedBinding(candidate, decision));
+    if (binding.kind === "component-prop" && decision.scope === "source-site") {
+        const editableTarget = choice?.editableTarget ?? candidate.editableTarget;
+        const prop = editableTarget?.contract.props.find((item) => item.name === binding.property && item.control === "text");
+        if (!editableTarget || !prop)
+            return null;
+        return createComponentPropChange(editableTarget, prop, after, {
+            scope: "source-site",
+            evidence: choice && choice.mountedCount > 1
+                ? componentEvidence(candidate, choice)
+                : undefined,
+        });
+    }
+    const textTarget = textTargetFor(candidate, binding, choice);
+    const source = sourceForChoice(candidate, choice);
+    const renderedSource = source.selector || !textTarget
+        ? source
+        : { ...source, selector: textProjectionSelector(textTarget) ?? "" };
+    if (!textTarget || !renderedSource.selector)
+        return null;
+    return {
+        kind: "text-content",
+        id: `text-${globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2)}`}`,
+        target: textTarget,
+        source: {
+            file: renderedSource.file,
+            line: renderedSource.line,
+            column: renderedSource.column,
+            component: renderedSource.component,
+        },
+        selector: renderedSource.selector,
+        before: candidate.before,
+        after,
+        authoredAs: renderedSource.authoredAs,
+        scope: decision.scope,
+        evidence: renderedSource.evidence,
+    };
+}

package/dist/inspector/inspection/selectionProperty.d.ts

@@ -19,6 +19,7 @@ export interface SelectionProperty {
     value: SelectionValue;
     token: SelectionToken;
     primaryRow: ResolvedProperty | null;
+    rows: readonly (ResolvedProperty | null)[];
 }
 /**
  * Projects browser values and authored inspection rows into group-safe facts.

package/dist/inspector/inspection/selectionProperty.js

@@ -22,6 +22,7 @@ export function projectSelectionProperty(property, rows, values, primaryIndex) {
         value: common ? { kind: "common", value: first } : { kind: "mixed" },
         token: tokenFor(rows),
         primaryRow: rows[primaryIndex] ?? null,
+        rows,
     };
 }
 /** Returns the token entries available to every inspected target. */

package/dist/inspector/overlay/selectedGeometry.js

@@ -20,6 +20,24 @@ export function observeSelectedGeometry(element, onChange) {
             onChange();
         });
     }
+    let scrollTargets = [];
+    function unbindScrollTargets() {
+        for (const target of scrollTargets)
+            target.removeEventListener("scroll", schedule, true);
+        scrollTargets = [];
+    }
+    function bindScrollTargets() {
+        unbindScrollTargets();
+        const targets = [view, view.document];
+        let ancestor = element.parentElement;
+        while (ancestor) {
+            targets.push(ancestor);
+            ancestor = ancestor.parentElement;
+        }
+        scrollTargets = [...new Set(targets)];
+        for (const target of scrollTargets)
+            target.addEventListener("scroll", schedule, true);
+    }
     const resizeObserver = ResizeObserverCtor
         ? new ResizeObserverCtor(schedule)
         : null;
@@ -32,6 +50,7 @@ export function observeSelectedGeometry(element, onChange) {
             mutationObserver?.disconnect();
             if (observedParent)
                 mutationObserver?.observe(observedParent, { childList: true });
+            bindScrollTargets();
         }
         schedule();
     }) : null;
@@ -39,13 +58,13 @@ export function observeSelectedGeometry(element, onChange) {
     if (observedParent)
         mutationObserver?.observe(observedParent, { childList: true });
     view.addEventListener("resize", schedule);
-    view.addEventListener("scroll", schedule, true);
+    bindScrollTargets();
     return () => {
         if (frame !== null)
             view.cancelAnimationFrame(frame);
         resizeObserver?.disconnect();
         mutationObserver?.disconnect();
         view.removeEventListener("resize", schedule);
-        view.removeEventListener("scroll", schedule, true);
+        unbindScrollTargets();
     };
 }

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

@@ -0,0 +1,45 @@
+import type { Rect } from "./overlayGeometry.js";
+export type PaddingSide = "top" | "right" | "bottom" | "left";
+export type SpacingKind = "padding" | "gap";
+export type SpacingAxis = "horizontal" | "vertical";
+export type SpacingDragAxis = "x" | "y";
+export type SpacingProperty = `padding-${PaddingSide}` | "row-gap" | "column-gap";
+export interface SpacingGuideData {
+    kind: SpacingKind;
+    property: SpacingProperty;
+    side: PaddingSide | null;
+    axis: SpacingAxis;
+    dragAxis: SpacingDragAxis;
+    value: number;
+    direction: 1 | -1;
+    cursor: "ew-resize" | "ns-resize";
+    guide: Rect;
+    affectedGuides: Rect[];
+    affectedAreas: Rect[];
+    /** A 24px-thick pointer target centred on the visible, up-to-40px guide handle. */
+    hit: Rect;
+}
+export interface SpacingAffordance extends SpacingGuideData {
+    element: HTMLElement;
+}
+export interface SpacingDescriptor {
+    kind: SpacingKind;
+    property: SpacingProperty;
+    side: PaddingSide | null;
+}
+export declare const SPACING_GUIDE_HANDLE_LENGTH = 40;
+/** Finds the spacing target under a document-local pointer location. */
+export declare function getSpacingAffordanceAtPoint(doc: Document, x: number, y: number): SpacingAffordance | null;
+/** Re-resolves a renderer-reported spacing descriptor in its owner document. */
+export declare function getSpacingAffordanceForDescriptor(element: HTMLElement, descriptor: SpacingDescriptor): SpacingAffordance | null;
+/** Calculates the pixel value represented by a direct-manipulation drag. */
+export declare function spacingValueForDrag(affordance: Pick<SpacingAffordance, "dragAxis" | "direction" | "value">, start: {
+    x: number;
+    y: number;
+}, point: {
+    x: number;
+    y: number;
+}): number;
+export declare function spacingValueCss(value: number): string;
+/** Serializes the stable part of an affordance for renderer-to-controller messages. */
+export declare function toSpacingDescriptor(affordance: SpacingAffordance): SpacingDescriptor;

package/dist/inspector/overlay/spacingGestures.js

@@ -0,0 +1,353 @@
+import { getElementComputedStyle } from "../runtime/domRealm.js";
+const SPACING_DRAG_TARGET_SIZE = 24;
+export const SPACING_GUIDE_HANDLE_LENGTH = 40;
+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, allowZero, model = boxModel(element)) {
+    const { inner, content, padding } = model;
+    const value = padding[side];
+    if (!allowZero && 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, allowZero) {
+    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, allowZero, 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, false);
+        if (padding)
+            return padding;
+    }
+    for (const element of candidates) {
+        const gap = gapAffordanceAtPoint(element, x, y);
+        if (gap)
+            return gap;
+    }
+    // A zero-sized padding region still needs a small draggable edge so users
+    // can establish padding without first typing a value in the inspector.
+    for (const element of candidates) {
+        const padding = paddingAffordanceAtPoint(element, x, y, true);
+        if (padding)
+            return padding;
+    }
+    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, true);
+    }
+    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 the pixel value represented by a direct-manipulation drag. */
+export function spacingValueForDrag(affordance, start, point) {
+    const delta = affordance.dragAxis === "x" ? point.x - start.x : point.y - start.y;
+    return Math.max(0, Math.round(affordance.value + delta * affordance.direction));
+}
+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;