nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/styleEditors/inlineAuthored.js

@@ -1,9 +1,5 @@
 import { isLayoutPreview } from "./layoutPreviewState.js";
-/**
- * Shorthands that also author the keyed longhand when present in a `style`
- * attribute. Managed-stylesheet previews lose the cascade to any of these,
- * so fields must treat the longhand as inline-blocked either way.
- */
+// A `style`-attribute shorthand authors the keyed longhand; managed previews lose the cascade to inline styles.
 const SHORTHAND_SOURCES = {
     "font-family": ["font"],
     "font-style": ["font"],
@@ -69,23 +65,14 @@ const SHORTHAND_SOURCES = {
     "grid-column-start": ["grid-column", "grid-area", "grid"],
     "grid-column-end": ["grid-column", "grid-area", "grid"],
 };
-/**
- * Longhands edited together by one linked field. The field is blocked when
- * any of them is inline-authored, even if the shorthand itself is not.
- */
+// Blocked when any longhand is inline-authored, even if the shorthand itself is not.
 const LINKED_LONGHANDS = {
     "border-width": ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width"],
     "border-style": ["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"],
     "border-color": ["border-top-color", "border-right-color", "border-bottom-color", "border-left-color"],
     "border-radius": ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius"],
 };
-/**
- * Returns the inline-authored source when `el` carries the property — or a
- * shorthand that sets it — in its `style` attribute. Managed previews can
- * never beat inline styles in the cascade, so a non-null result means the
- * field must present as blocked instead of accepting edits that silently
- * revert (see `verifyPreview`'s "inline-style" conflict).
- */
+/** Non-null means the field must present as blocked: previews cannot beat inline styles in the cascade. */
 export function inlineAuthoredValue(el, property) {
     if (isLayoutPreview(el, property))
         return null;
@@ -101,7 +88,6 @@ export function inlineAuthoredValue(el, property) {
     }
     return null;
 }
-/** First inline-authored source that blocks any of `properties` on any of `elements`. */
 export function inlineBlockedBy(elements, ...properties) {
     for (const property of properties) {
         for (const el of elements) {

package/dist/inspector/styleEditors/layoutMode.d.ts

@@ -0,0 +1,15 @@
+export type LayoutMode = "block" | "row" | "column" | "grid";
+export interface LayoutModeEdit {
+    readonly property: "display" | "flex-direction";
+    readonly value: string;
+}
+/** Display values that have no segment (inline, none, contents, table...) read as no mode. */
+export declare function layoutModeOf(display: string, flexDirection: string): LayoutMode | null;
+/**
+ * Edits that move an element to `target`, keeping an inline outer display and a reverse direction.
+ * With an unknown current state (a mixed selection) every property is written.
+ */
+export declare function layoutModeEdits(current: {
+    readonly display: string;
+    readonly flexDirection: string;
+} | null, target: LayoutMode): LayoutModeEdit[];

package/dist/inspector/styleEditors/layoutMode.js

@@ -0,0 +1,33 @@
+const FLEX_DISPLAYS = new Set(["flex", "inline-flex"]);
+const GRID_DISPLAYS = new Set(["grid", "inline-grid"]);
+/** Display values that have no segment (inline, none, contents, table...) read as no mode. */
+export function layoutModeOf(display, flexDirection) {
+    if (FLEX_DISPLAYS.has(display))
+        return flexDirection.startsWith("column") ? "column" : "row";
+    if (GRID_DISPLAYS.has(display))
+        return "grid";
+    return display === "block" ? "block" : null;
+}
+/**
+ * Edits that move an element to `target`, keeping an inline outer display and a reverse direction.
+ * With an unknown current state (a mixed selection) every property is written.
+ */
+export function layoutModeEdits(current, target) {
+    const inline = current?.display.startsWith("inline-") ?? false;
+    const edits = [];
+    const display = target === "block"
+        ? inline ? "inline-block" : "block"
+        : target === "grid"
+            ? inline ? "inline-grid" : "grid"
+            : inline ? "inline-flex" : "flex";
+    if (display !== current?.display)
+        edits.push({ property: "display", value: display });
+    if (target === "row" || target === "column") {
+        const reverse = current !== null && FLEX_DISPLAYS.has(current.display) && current.flexDirection.endsWith("-reverse");
+        const direction = `${target}${reverse ? "-reverse" : ""}`;
+        // A non-flex element's computed direction is the initial row, so moving to row needs no declaration.
+        if (direction !== current?.flexDirection)
+            edits.push({ property: "flex-direction", value: direction });
+    }
+    return edits;
+}

package/dist/inspector/styleEditors/layoutPreviewState.d.ts

@@ -1,5 +1,4 @@
 /** Marks a temporary inline preview so layout fields do not treat it as authored CSS. */
 export declare function beginLayoutPreview(el: HTMLElement, property: string): void;
-/** Clears a temporary inline preview after the canvas drag is restored or committed. */
 export declare function endLayoutPreview(el: HTMLElement, property: string): void;
 export declare function isLayoutPreview(el: HTMLElement, property: string): boolean;

package/dist/inspector/styleEditors/layoutPreviewState.js

@@ -5,7 +5,6 @@ export function beginLayoutPreview(el, property) {
     properties.add(property);
     activePreviews.set(el, properties);
 }
-/** Clears a temporary inline preview after the canvas drag is restored or committed. */
 export function endLayoutPreview(el, property) {
     const properties = activePreviews.get(el);
     if (!properties)

package/dist/inspector/styleEditors/layoutValue.d.ts

@@ -1,7 +1,4 @@
-/**
- * Returns the authored CSS value when one is available, without replacing
- * keywords such as `auto` with the browser's used pixel value.
- */
+/** Known layout properties never fall back to the browser's used pixel value. */
 export declare function meaningfulLayoutValue(el: HTMLElement, property: string): string;
 export declare function readAuthoredStyleValue(el: HTMLElement, property: string): string | null;
 export interface LayoutValue {
@@ -9,8 +6,5 @@ export interface LayoutValue {
     authored: string | null;
     computed: string;
 }
-/**
- * Reads both representations needed by a layout editor. Authored CSS is the
- * editable source of truth; computed CSS is only the browser preview/fallback.
- */
+/** Authored CSS is the editable source of truth; computed is preview/fallback only. */
 export declare function getLayoutValue(el: HTMLElement, property: string): LayoutValue;

package/dist/inspector/styleEditors/layoutValue.js

@@ -1,7 +1,7 @@
 import { getActiveStyleState } from "../shell/styleState.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { getElementComputedStyle } from "../runtime/domRealm.js";
-import { getBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
+import { readInspectionSnapshot } from "../inspection/inspectionSnapshot.js";
 const DEFAULT_LAYOUT_VALUES = {
     width: "auto",
     height: "auto",
@@ -15,17 +15,13 @@ const DEFAULT_LAYOUT_VALUES = {
     bottom: "auto",
     left: "auto",
 };
-/**
- * Returns the authored CSS value when one is available, without replacing
- * keywords such as `auto` with the browser's used pixel value.
- */
+/** Known layout properties never fall back to the browser's used pixel value. */
 export function meaningfulLayoutValue(el, property) {
     const authored = readAuthoredStyleValue(el, property);
     if (authored)
         return authored;
     const computed = getStateStyleValue(el, property);
-    // Aspect-ratio's computed serialization remains a meaningful authored-like
-    // value, unlike used dimensions such as a block's computed pixel width.
+    // Aspect-ratio's computed value stays authored-like, unlike used dimensions such as a block's pixel width.
     if (property === "aspect-ratio" && computed && computed !== "auto")
         return computed;
     return DEFAULT_LAYOUT_VALUES[property] ?? computed;
@@ -33,24 +29,19 @@ export function meaningfulLayoutValue(el, property) {
 export function readAuthoredStyleValue(el, property) {
     try {
         const state = getActiveStyleState();
-        const row = getBrowserCssInspection(el.ownerDocument ?? document)
-            .inspect(el, { state }).properties
+        const row = readInspectionSnapshot(el, state)?.properties
             .find((candidate) => candidate.property === property);
         const authored = row?.authored ?? row?.declaredValue;
         if (authored?.trim())
             return authored.trim();
     }
     catch {
-        // CSSOM can reject cross-origin stylesheets. Fall through to explicit
-        // inline CSS and the computed-value fallback used by the field layer.
+        // Reading CSSOM can throw on cross-origin stylesheets; fall through to explicit inline CSS.
     }
     const inline = el.style.getPropertyValue(property).trim();
     return inline || null;
 }
-/**
- * Reads both representations needed by a layout editor. Authored CSS is the
- * editable source of truth; computed CSS is only the browser preview/fallback.
- */
+/** Authored CSS is the editable source of truth; computed is preview/fallback only. */
 export function getLayoutValue(el, property) {
     const authored = readAuthoredStyleValue(el, property);
     let computed = "";

package/dist/inspector/styleEditors/nudgeValue.d.ts

@@ -1,19 +1,7 @@
 export type NudgeDirection = -1 | 1;
-/**
- * Returns a nudged CSS numeric literal, or null when the value is not a
- * standalone number that the inspector can safely edit.
- */
 export declare function nudgeCssValue(property: string, rawValue: string, direction: NudgeDirection, large?: boolean): string | null;
-/** Returns whether a style field exposes the horizontal drag nudge affordance. */
 export declare function supportsDragNudge(property: string): boolean;
-/**
- * Applies one regular nudge per sixteen horizontal pointer pixels and one large
- * nudge per eight horizontal pointer pixels. When a large drag starts from an
- * off-grid value, the first step snaps to the next large-step boundary in the
- * drag direction.
- */
+/** With `snapToLargeStep`, an off-grid start snaps once to the next large-step boundary in the drag direction. */
 export declare function nudgeCssValueByDrag(property: string, rawValue: string, deltaX: number, large?: boolean, snapToLargeStep?: boolean): string | null;
-/** Returns whether a field has a numeric value that can respond to dragging. */
 export declare function canNudgeCssValueByDrag(property: string, rawValue: string): boolean;
-/** Returns a clamped opacity percentage nudged by 1%, or 10% with Shift. */
 export declare function nudgeOpacityValue(rawValue: string, direction: NudgeDirection, large?: boolean): string | null;

package/dist/inspector/styleEditors/nudgeValue.js

@@ -5,10 +5,6 @@ const CSS_NUMERIC_LITERAL = new RegExp(`^(${CSS_NUMBER_SOURCE})(px|rem|em|%)?$`,
 const DRAG_PIXELS_PER_STEP = 16;
 const LARGE_DRAG_PIXELS_PER_STEP = 8;
 const DRAG_NUDGE_PROPERTY = /^(?:(?:padding|margin)-(?:top|right|bottom|left|horizontal|vertical)|(?:top|right|bottom|left|inset|inset-(?:horizontal|vertical))|(?:row|column)-gap|(?:font-size|letter-spacing|line-height|opacity)|border-radius|border-(?:top-left|top-right|bottom-right|bottom-left)-radius)$/;
-/**
- * Returns a nudged CSS numeric literal, or null when the value is not a
- * standalone number that the inspector can safely edit.
- */
 export function nudgeCssValue(property, rawValue, direction, large = false) {
     if (property === "opacity")
         return nudgeOpacityValue(rawValue, direction, large);
@@ -22,16 +18,10 @@ export function nudgeCssValue(property, rawValue, direction, large = false) {
     const next = clampNudgeNumber(property, parsed.number + direction * step);
     return `${formatNumber(next)}${parsed.unit}`;
 }
-/** Returns whether a style field exposes the horizontal drag nudge affordance. */
 export function supportsDragNudge(property) {
     return DRAG_NUDGE_PROPERTY.test(property);
 }
-/**
- * Applies one regular nudge per sixteen horizontal pointer pixels and one large
- * nudge per eight horizontal pointer pixels. When a large drag starts from an
- * off-grid value, the first step snaps to the next large-step boundary in the
- * drag direction.
- */
+/** With `snapToLargeStep`, an off-grid start snaps once to the next large-step boundary in the drag direction. */
 export function nudgeCssValueByDrag(property, rawValue, deltaX, large = false, snapToLargeStep = false) {
     const steps = Math.trunc(Math.abs(deltaX) / (large ? LARGE_DRAG_PIXELS_PER_STEP : DRAG_PIXELS_PER_STEP));
     if (steps === 0)
@@ -54,12 +44,10 @@ export function nudgeCssValueByDrag(property, rawValue, deltaX, large = false, s
     }
     return next;
 }
-/** Returns whether a field has a numeric value that can respond to dragging. */
 export function canNudgeCssValueByDrag(property, rawValue) {
     return nudgeCssValueByDrag(property, rawValue, DRAG_PIXELS_PER_STEP) !== null
         || nudgeCssValueByDrag(property, rawValue, -DRAG_PIXELS_PER_STEP) !== null;
 }
-/** Returns a clamped opacity percentage nudged by 1%, or 10% with Shift. */
 export function nudgeOpacityValue(rawValue, direction, large = false) {
     const percent = parseOpacityPercent(rawValue);
     if (percent === null)

package/dist/inspector/styleEditors/rowLookup.d.ts

@@ -1,10 +1,6 @@
 import type { ResolvedProperty } from "../../css/model/index.js";
-/** Finds the resolved row for one CSS property, or null when it is absent. */
 export declare function findTokenRow(rows: readonly ResolvedProperty[], property: string): ResolvedProperty | null;
-/**
- * Source provenance for an edit, taken from the row that produced it. Omitted
- * when the row carries no authored origin, so the caller sends no metadata.
- */
+/** Undefined when the row has no authored origin, so callers send no metadata. */
 export declare function metadataFor(row: ResolvedProperty | null | undefined): {
     sourceProperty: string;
     sourceAuthoredValue: string;

package/dist/inspector/styleEditors/rowLookup.js

@@ -1,11 +1,7 @@
-/** Finds the resolved row for one CSS property, or null when it is absent. */
 export function findTokenRow(rows, property) {
     return rows.find((row) => row.property === property) ?? null;
 }
-/**
- * Source provenance for an edit, taken from the row that produced it. Omitted
- * when the row carries no authored origin, so the caller sends no metadata.
- */
+/** Undefined when the row has no authored origin, so callers send no metadata. */
 export function metadataFor(row) {
     return row?.sourceProperty
         ? { sourceProperty: row.sourceProperty, sourceAuthoredValue: row.authored ?? row.declaredValue }

package/dist/inspector/styleEditors/stringRecord.d.ts

@@ -1,4 +1,3 @@
-/** A string-keyed string map used for default style values. */
 export type StringRecord = Record<string, string>;
-/** A string-keyed map from a longhand property to the shorthands that set it. */
+/** Maps a longhand property to the shorthands that set it. */
 export type StringListRecord = Record<string, readonly string[]>;

package/dist/inspector/styleEditors/stylePresence.d.ts

@@ -1,7 +1,5 @@
 import type { ResolvedProperty } from "../../css/model/index.js";
 import type { StyleSelection } from "../selection/styleSelection.js";
-/** Includes every selected element, even when their resolved zero values agree. */
 export declare function hasAuthoredProperty(selection: StyleSelection | null | undefined, property: string, row?: ResolvedProperty | null): boolean;
 export declare function isZeroCssValue(value: string): boolean;
-/** A direct declaration is meaningful even when its resolved value is empty. */
 export declare function hasAuthoredStyle(row: ResolvedProperty | null | undefined): boolean;

package/dist/inspector/styleEditors/stylePresence.js

@@ -1,4 +1,3 @@
-/** Includes every selected element, even when their resolved zero values agree. */
 export function hasAuthoredProperty(selection, property, row) {
     return selection
         ? selection.getProperty(property)?.rows.some(hasAuthoredStyle) ?? false
@@ -7,15 +6,13 @@ export function hasAuthoredProperty(selection, property, row) {
 export function isZeroCssValue(value) {
     return /^[+-]?(?:0+(?:\.0*)?|\.0+)(?:[a-z%]+)?$/i.test(value.trim());
 }
-/** A direct declaration is meaningful even when its resolved value is empty. */
 export function hasAuthoredStyle(row) {
     if (!row || row.evidence.inheritedFrom)
         return false;
     const value = (row.authored ?? row.declaredValue).trim();
     if (!value)
         return false;
-    // Keep tokens and expressions. Only neutral literals from blanket rules
-    // (such as Preflight's `* { padding: 0; border: 0 solid; }`) are baseline.
+    // Neutral literals from Preflight-style blanket rules (`* { padding: 0 }`) are not authored styles.
     const blanketRule = row.evidence.selector?.split(",").every((selector) => /^(?:\*|\*?::?(?:before|after|backdrop))$/.test(selector.trim()));
     const neutral = value.split(/\s+/).every((part) => isZeroCssValue(part) || ["none", "solid", "transparent", "currentcolor"].includes(part.toLowerCase()));
     return !blanketRule || !neutral;

package/dist/inspector/styleEditors/textRelevance.d.ts

@@ -1,3 +1,3 @@
 import type { ResolvedProperty } from "../../css/model/index.js";
-/** Text styling is useful for text runs and containers that author descendant typography. */
+/** Block descendants count only when the element authors descendant typography. */
 export declare function isTextRelevant(element: HTMLElement, rows: readonly ResolvedProperty[]): boolean;

package/dist/inspector/styleEditors/textRelevance.js

@@ -28,7 +28,7 @@ function hasTextContent(element, includeBlocks) {
         return (includeBlocks || inline) && hasTextContent(child, includeBlocks);
     });
 }
-/** Text styling is useful for text runs and containers that author descendant typography. */
+/** Block descendants count only when the element authors descendant typography. */
 export function isTextRelevant(element, rows) {
     const authorsTypography = rows.some((row) => TYPOGRAPHY_PROPERTIES.has(row.property) && hasAuthoredStyle(row));
     return hasTextContent(element, authorsTypography);

package/dist/inspector/styleEditors/useFieldVisibility.js

@@ -14,8 +14,7 @@ export function useFieldVisibility(elements, property, present) {
             elements, property, styleState, present,
             visible: selectionChanged ? present : previous.visible || present,
         };
-        // Adjust before rendering children so a selection change cannot briefly
-        // mount the previous selection's controls or interrupt an active drag.
+        // Adjust during render: a selection change must not briefly mount the previous controls or interrupt an active drag.
         setPrevious(current);
     }
     return {

package/dist/inspector/styleEditors/useLayoutContext.d.ts

@@ -0,0 +1,13 @@
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface LayoutContext {
+    /** Changes whenever an edit or a canvas projection may have changed computed layout. */
+    revision: number;
+    notifyAfterEdit: () => void;
+    isFlexContainer: boolean;
+    isGridContainer: boolean;
+    isFlexChild: boolean;
+    isGridChild: boolean;
+    position: string;
+}
+/** What the element is, and what its parent is, for the sections that show layout controls. */
+export declare function useLayoutContext(el: HTMLElement, selection: StyleSelection | null | undefined, onAfterEdit?: () => void): LayoutContext;

package/dist/inspector/styleEditors/useLayoutContext.js

@@ -0,0 +1,53 @@
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { getElementComputedStyle } from "../runtime/domRealm.js";
+import { getCanvasProjectionAcknowledgementVersion, subscribeCanvasProjectionAcknowledgements, } from "../canvas/projection.js";
+const FLEX_DISPLAYS = ["flex", "inline-flex"];
+const GRID_DISPLAYS = ["grid", "inline-grid"];
+/** What the element is, and what its parent is, for the sections that show layout controls. */
+export function useLayoutContext(el, selection, onAfterEdit) {
+    const [primaryIsFlexContainer, setPrimaryIsFlexContainer] = useState(false);
+    const [primaryIsFlexChild, setPrimaryIsFlexChild] = useState(false);
+    const [primaryIsGridContainer, setPrimaryIsGridContainer] = useState(false);
+    const [primaryIsGridChild, setPrimaryIsGridChild] = useState(false);
+    const [primaryPosition, setPrimaryPosition] = useState(() => getStateStyleValue(el, "position", "static"));
+    const [layoutRevision, setLayoutRevision] = useState(0);
+    const projectionAcknowledgementVersion = useSyncExternalStore(subscribeCanvasProjectionAcknowledgements, getCanvasProjectionAcknowledgementVersion, getCanvasProjectionAcknowledgementVersion);
+    const revision = layoutRevision + projectionAcknowledgementVersion;
+    useEffect(() => {
+        try {
+            const computed = getElementComputedStyle(el);
+            setPrimaryIsFlexContainer(FLEX_DISPLAYS.includes(computed.display));
+            setPrimaryIsGridContainer(GRID_DISPLAYS.includes(computed.display));
+            setPrimaryPosition(computed.position);
+        }
+        catch {
+            // The element can detach between renders.
+        }
+    }, [el, revision]);
+    useEffect(() => {
+        try {
+            const parent = el.parentElement;
+            const parentDisplay = parent ? getElementComputedStyle(parent).display : "";
+            setPrimaryIsFlexChild(FLEX_DISPLAYS.includes(parentDisplay));
+            setPrimaryIsGridChild(GRID_DISPLAYS.includes(parentDisplay));
+        }
+        catch {
+            setPrimaryIsFlexChild(false);
+            setPrimaryIsGridChild(false);
+        }
+    }, [el, revision]);
+    const selectedPosition = selection?.getProperty("position")?.value;
+    return {
+        revision,
+        notifyAfterEdit() {
+            setLayoutRevision((value) => value + 1);
+            onAfterEdit?.();
+        },
+        isFlexContainer: selection ? selection.supportsRole("flex-container") : primaryIsFlexContainer,
+        isGridContainer: selection ? selection.supportsRole("grid-container") : primaryIsGridContainer,
+        isFlexChild: selection ? selection.supportsRole("flex-child") : primaryIsFlexChild,
+        isGridChild: selection ? selection.supportsRole("grid-child") : primaryIsGridChild,
+        position: selectedPosition?.kind === "common" ? selectedPosition.value : primaryPosition,
+    };
+}

package/dist/inspector/styleEditors/valuePolicy.d.ts

@@ -1,7 +1,4 @@
-/**
- * Describes the small amount of CSS value semantics the inspector can safely
- * assist with. Values outside these policies remain raw CSS.
- */
+/** Values outside these policies stay raw CSS. */
 export type CssUnit = "px" | "rem" | "em" | "%" | "";
 export type ValuePolicy = {
     kind: "raw" | "number";
@@ -16,5 +13,4 @@ export type ValuePolicy = {
     defaultUnit: "%";
     allowedUnits: readonly ["%", "px", ""];
 };
-/** Returns the default and supported units for an editable CSS property. */
 export declare function valuePolicyFor(property: string): ValuePolicy;

package/dist/inspector/styleEditors/valuePolicy.js

@@ -60,7 +60,6 @@ const PIXEL_LENGTH_PROPERTIES = new Set([
     "max-height",
     "border-radius",
 ]);
-/** Returns the default and supported units for an editable CSS property. */
 export function valuePolicyFor(property) {
     if (NUMBER_PROPERTIES.has(property))
         return NUMBER_VALUE;

package/dist/inspector/testing.d.ts

@@ -1,7 +1,4 @@
-/**
- * Test and conformance helpers for validating the inspector through a
- * consumer-facing entry point. Keep these exports out of the runtime entry.
- */
+/** Test and conformance helpers; keep these exports out of the runtime entry. */
 export { assertConformanceFixture, runConformanceFixture } from "./conformance/fixture.js";
 export type { ConformanceFixture, ConformanceResult, ConformancePropertyExpectation, ConformanceProjectionExpectation, ConformanceProjectionFieldExpectation, } from "./conformance/fixture.js";
 export { BORDER_CASES } from "./conformance/borderCases.js";

package/dist/inspector/testing.js

@@ -1,7 +1,4 @@
-/**
- * Test and conformance helpers for validating the inspector through a
- * consumer-facing entry point. Keep these exports out of the runtime entry.
- */
+/** Test and conformance helpers; keep these exports out of the runtime entry. */
 export { assertConformanceFixture, runConformanceFixture } from "./conformance/fixture.js";
 export { BORDER_CASES } from "./conformance/borderCases.js";
 export { COLOR_CASES } from "./conformance/colorCases.js";

package/dist/inspector/tokens/TokenChip.d.ts

@@ -12,10 +12,7 @@ declare function TokenChipRoot({ size, className, children, ...props }: TokenChi
 declare function TokenChipPicker({ className, children, ...props }: TokenChipSlotProps): ReactElement;
 declare function TokenChipLabel({ className, children, ...props }: TokenChipSlotProps): ReactElement;
 declare function TokenChipAction({ className, children, ...props }: TokenChipSlotProps): ReactElement;
-/**
- * Layout for a token's selected value. Callers compose the picker and actions
- * so their interaction semantics remain independent of the chip's visuals.
- */
+/** Callers compose the slots; the chip owns visuals only. */
 export declare const TokenChip: typeof TokenChipRoot & {
     Picker: typeof TokenChipPicker;
     Label: typeof TokenChipLabel;

package/dist/inspector/tokens/TokenChip.js

@@ -12,10 +12,7 @@ function TokenChipLabel({ className, children, ...props }) {
 function TokenChipAction({ className, children, ...props }) {
     return (_jsx("span", { ...props, className: `token-chip__action${className ? ` ${className}` : ""}`, children: children }));
 }
-/**
- * Layout for a token's selected value. Callers compose the picker and actions
- * so their interaction semantics remain independent of the chip's visuals.
- */
+/** Callers compose the slots; the chip owns visuals only. */
 export const TokenChip = Object.assign(TokenChipRoot, {
     Picker: TokenChipPicker,
     Label: TokenChipLabel,

package/dist/inspector/tokens/TokenField.d.ts

@@ -7,7 +7,7 @@ import { type EditTarget } from "../selection/editTarget.js";
 import type { StyleSelection } from "../selection/styleSelection.js";
 export interface TokenValueFieldProps {
     property: string;
-    /** Numeric editing policy for a scalar slot inside a composite property. */
+    /** Supplies the numeric nudge policy instead of `property` for composite slots. */
     nudgeProperty?: string;
     domElement?: HTMLElement;
     semanticSlot?: TokenSemanticSlot;
@@ -46,7 +46,7 @@ export interface TokenFieldProps {
     tokenRow?: ResolvedProperty | null;
     selection?: StyleSelection | null;
     initialValue?: string;
-    /** Optional normalized value shown when an authored row is not token-backed. */
+    /** Normalized value shown when an authored row is not token-backed. */
     displayValue?: string;
     domElement: HTMLElement;
     /** Optional group target. `domElement` remains the primary inspection node. */
@@ -65,10 +65,11 @@ export interface TokenFieldProps {
     disabled?: boolean;
     /** Shows a mixed value without accidentally committing the placeholder. */
     mixed?: boolean;
-    /** Referenced tokens used for raw color-field behavior; not rendered inline. */
     attributionTokens?: string[];
     inlineWarningDataTest?: string;
     inlineWarningTooltipDataTest?: string;
+    /** Sees each committed raw value first; returning true means the caller handled it and nothing is written. */
+    interceptRaw?: (value: string) => boolean;
 }
 export declare function colorValueToHex(value: string): string | null;
 export declare function TokenValueField(props: TokenValueFieldProps): ReactElement;