nudge-ui 0.2.0

package/dist/inspector/ui/SideValuesField.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { IconBorderSides, IconPlus } from "@tabler/icons-react";
+import { IconButton } from "./IconButton.js";
+import { ToggleButton } from "./ToggleButton.js";
+import { formatInspectorLabel } from "./labels.js";
+import { ControlSurface } from "./ControlSurface.js";
+export const SIDE_NAMES = ["top", "right", "bottom", "left"];
+const SIDE_DISPLAY_ORDER = ["left", "top", "right", "bottom"];
+const SIDE_AXIS_DISPLAY_ORDER = ["horizontal", "vertical"];
+/**
+ * A compact side editor. Callers provide grouped horizontal/vertical controls
+ * that expand into the four physical sides (or omit `pairedControls` to show
+ * the four sides directly). The field owns presentation and expand state
+ * while callers own the actual CSS/token controls rendered in each slot.
+ */
+export function SideValuesField({ label, sides, pairedControls, defaultExpanded = false, showLabel = true, empty = false, onAdd, emptyAction, resetKey, "data-test": dataTest, "data-property": dataProperty, }) {
+    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+    const previousResetKey = useRef(resetKey);
+    const isResetting = previousResetKey.current !== resetKey;
+    const isExpanded = isResetting ? defaultExpanded : uncontrolledExpanded;
+    const hasPairedControls = Boolean(pairedControls && pairedControls.length > 0);
+    const orderedPairedControls = SIDE_AXIS_DISPLAY_ORDER
+        .map((axis) => pairedControls?.find((pair) => pair.axis === axis))
+        .filter((pair) => pair !== undefined);
+    const labelText = typeof label === "string" ? formatInspectorLabel(label) : String(label);
+    const displayLabel = showLabel ? (typeof label === "string" ? labelText : label) : null;
+    useEffect(() => {
+        // `defaultExpanded` describes the newly selected element, not the current
+        // edit; reseed when the selection (resetKey) changes.
+        setUncontrolledExpanded(defaultExpanded);
+        previousResetKey.current = resetKey;
+    }, [resetKey]);
+    function toggleExpanded() {
+        setUncontrolledExpanded(!isExpanded);
+    }
+    return (_jsx("div", { className: "side-values", "data-test": dataTest, "data-property": dataProperty, "data-empty": empty ? "true" : undefined, ...(hasPairedControls
+            ? { "data-expanded": isExpanded ? "true" : "false" }
+            : {}), children: empty ? (_jsxs("div", { className: "side-values__header", children: [_jsx("span", { className: "side-values__label", children: displayLabel }), emptyAction ?? (_jsx(IconButton, { variant: "quiet", size: "default", "data-test": "add-value", label: `Add ${labelText}`, title: `Add ${labelText}`, onClick: onAdd, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) }))] })) : hasPairedControls ? (_jsxs(_Fragment, { children: [showLabel ? (_jsx("div", { className: "side-values__header", children: _jsx("span", { className: "side-values__label", children: displayLabel }) })) : null, _jsxs("div", { className: "side-values__value-row", children: [isExpanded ? (_jsx(SideControls, { label: label, sides: sides })) : (_jsx("div", { className: "side-values__pairs", role: "group", "aria-label": `${labelText} Grouped Sides`, children: orderedPairedControls.map(({ axis, control, icon }) => (_jsxs(ControlSurface, { className: "side-values__side", "data-test": `pair-value-${axis}`, "data-axis": axis, "aria-label": `${labelText} ${axis === "horizontal" ? "Left And Right" : "Top And Bottom"}`, title: `${labelText} ${axis === "horizontal" ? "Left And Right" : "Top And Bottom"}`, children: [icon ?? _jsx(AxisIndicator, { axis: axis }), _jsx("div", { className: "side-values__control", children: control })] }, axis))) })), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "individual-sides", label: isExpanded ? `Collapse ${labelText} Sides` : `Expand ${labelText} Sides`, title: isExpanded ? "Collapse To Grouped Sides" : "Expand To Individual Sides", pressed: isExpanded, onPressedChange: toggleExpanded, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] })] })) : (_jsxs(_Fragment, { children: [showLabel ? (_jsx("div", { className: "side-values__header", children: _jsx("span", { className: "side-values__label", children: displayLabel }) })) : null, _jsx(SideControls, { label: label, sides: sides })] })) }));
+}
+export function SideControls({ label, sides, layout = "sides", }) {
+    const displayOrder = layout === "corners" ? SIDE_NAMES : SIDE_DISPLAY_ORDER;
+    const orderedSides = displayOrder
+        .map((side) => sides.find((slot) => slot.side === side))
+        .filter((slot) => slot !== undefined);
+    const labelText = typeof label === "string" ? formatInspectorLabel(label) : String(label);
+    const itemGroupLabel = layout === "corners" ? "Individual Corners" : "Individual Sides";
+    return (_jsx("div", { className: "side-values__grid", "data-layout": layout, role: "group", "aria-label": `${labelText} ${itemGroupLabel}`, children: orderedSides.map(({ side, control, icon, sideLabel }) => (_jsxs(ControlSurface, { className: "side-values__side", "data-test": `side-value-${side}`, "data-side": side, "aria-label": `${labelText} ${sideLabel ?? formatInspectorLabel(side)}`, children: [icon ?? _jsx(SideIndicator, { side: side }), _jsx("div", { className: "side-values__control", children: control })] }, side))) }));
+}
+function AxisIndicator({ axis }) {
+    const emphasis = axis === "horizontal"
+        ? _jsxs(_Fragment, { children: [_jsx("path", { d: "M5 4v8" }), _jsx("path", { d: "M11 4v8" })] })
+        : _jsxs(_Fragment, { children: [_jsx("path", { d: "M4 5h8" }), _jsx("path", { d: "M4 11h8" })] });
+    return (_jsxs("svg", { className: "side-values__icon", viewBox: "0 0 16 16", "aria-hidden": "true", children: [_jsx("rect", { x: "3.5", y: "3.5", width: "9", height: "9", rx: "1" }), _jsx("g", { className: "side-values__icon-emphasis", children: emphasis })] }));
+}
+function SideIndicator({ side }) {
+    const emphasis = {
+        top: "M4 4h8",
+        right: "M12 4v8",
+        bottom: "M4 12h8",
+        left: "M4 4v8",
+    }[side];
+    return (_jsxs("svg", { className: "side-values__icon", viewBox: "0 0 16 16", "aria-hidden": "true", children: [_jsx("rect", { x: "3.5", y: "3.5", width: "9", height: "9", rx: "1" }), _jsx("path", { d: emphasis, className: "side-values__icon-emphasis" })] }));
+}
+export function MarginSideIndicator({ side }) {
+    if (side === "left") {
+        return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "7", y: "5", width: "14", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "3", y1: "5", x2: "3", y2: "19", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+    }
+    if (side === "right") {
+        return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "5", width: "14", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "21", y1: "5", x2: "21", y2: "19", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+    }
+    if (side === "top") {
+        return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "19", y: "7", width: "14", height: "14", rx: "2", transform: "rotate(90 19 7)", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "19", y1: "3", x2: "5", y2: "3", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+    }
+    return (_jsxs("svg", { className: "side-values__icon side-values__side-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "19", y: "3", width: "14", height: "14", rx: "2", transform: "rotate(90 19 3)", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "19", y1: "21", x2: "5", y2: "21", stroke: "currentColor", strokeWidth: "var(--icon-stroke-width)", strokeLinecap: "round" })] }));
+}

package/dist/inspector/ui/StatusCallout.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode, ReactElement } from "react";
+export interface StatusCalloutProps {
+    children?: ReactNode;
+    tone?: "neutral" | "accent" | "warning" | "danger";
+    className?: string;
+    "data-test"?: string;
+    "data-lost"?: string;
+}
+export declare function StatusCallout({ children, tone, className, "data-test": dataTest, "data-lost": dataLost }: StatusCalloutProps): ReactElement;

package/dist/inspector/ui/StatusCallout.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function StatusCallout({ children, tone = "neutral", className, "data-test": dataTest, "data-lost": dataLost }) {
+    return (_jsx("div", { className: `status-callout status-callout--${tone}${className ? ` ${className}` : ""}`, "data-test": dataTest, "data-lost": dataLost, children: children }));
+}

package/dist/inspector/ui/TextInput.d.ts

@@ -0,0 +1,12 @@
+import type { InputHTMLAttributes } from "react";
+import type { ControlAppearance } from "./ControlSurface.js";
+export type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
+    compact?: boolean;
+    appearance?: ControlAppearance;
+    "data-test"?: string;
+};
+export declare const TextInput: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    compact?: boolean;
+    appearance?: ControlAppearance;
+    "data-test"?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/inspector/ui/TextInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+export const TextInput = forwardRef(function TextInput({ compact, appearance = "default", className, ...props }, ref) {
+    return (_jsx("input", { ...props, ref: ref, className: `text-input${compact ? " text-input--compact" : ""}${appearance === "embedded" ? " text-input--embedded" : ""}${className ? ` ${className}` : ""}` }));
+});

package/dist/inspector/ui/ToggleButton.d.ts

@@ -0,0 +1,11 @@
+import { Toggle } from "@base-ui/react/toggle";
+import type { ButtonVariant, ButtonSize } from "./Button.js";
+interface ToggleButtonProps extends Omit<Toggle.Props<string>, "className"> {
+    label: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    "data-test"?: string;
+    className?: string;
+}
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/inspector/ui/ToggleButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+export const ToggleButton = forwardRef(function ToggleButton({ label, variant = "secondary", size = "default", className, ...props }, ref) {
+    return (_jsx(Toggle, { ref: ref, ...props, "aria-label": label, className: `toggle-button toggle-button--${variant} toggle-button--${size}${className ? ` ${className}` : ""}` }));
+});

package/dist/inspector/ui/assets/grid.svg

@@ -0,0 +1,14 @@
+<svg width="182" height="72" viewBox="0 0 182 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="11.5" y="11.5" width="47" height="47" stroke="black" stroke-opacity="0.15"/>
+<rect x="67.5" y="11.5" width="47" height="47" stroke="#0096FF"/>
+<rect x="123.5" y="11.5" width="47" height="47" stroke="black" stroke-opacity="0.15"/>
+<mask id="path-4-inside-1_4219_25901" fill="white">
+<path d="M3 11H180V59H3V11Z"/>
+</mask>
+<path d="M3 59V59.5H4.00568V59V58.5H3V59ZM6.01705 59V59.5H8.02841V59V58.5H6.01705V59ZM10.0398 59V59.5H12.0511V59V58.5H10.0398V59ZM14.0625 59V59.5H16.0739V59V58.5H14.0625V59ZM18.0852 59V59.5H20.0966V59V58.5H18.0852V59ZM22.108 59V59.5H24.1193V59V58.5H22.108V59ZM26.1307 59V59.5H28.142V59V58.5H26.1307V59ZM30.1534 59V59.5H32.1648V59V58.5H30.1534V59ZM34.1761 59V59.5H36.1875V59V58.5H34.1761V59ZM38.1989 59V59.5H40.2102V59V58.5H38.1989V59ZM42.2216 59V59.5H44.233V59V58.5H42.2216V59ZM46.2443 59V59.5H48.2557V59V58.5H46.2443V59ZM50.2671 59V59.5H52.2784V59V58.5H50.2671V59ZM54.2898 59V59.5H56.3011V59V58.5H54.2898V59ZM58.3125 59V59.5H60.3239V59V58.5H58.3125V59ZM62.3352 59V59.5H64.3466V59V58.5H62.3352V59ZM66.358 59V59.5H68.3693V59V58.5H66.358V59ZM70.3807 59V59.5H72.392V59V58.5H70.3807V59ZM74.4034 59V59.5H76.4148V59V58.5H74.4034V59ZM78.4261 59V59.5H80.4375V59V58.5H78.4261V59ZM82.4488 59V59.5H84.4602V59V58.5H82.4488V59ZM86.4716 59V59.5H88.4829V59V58.5H86.4716V59ZM90.4943 59V59.5H92.5056V59V58.5H90.4943V59ZM94.517 59V59.5H96.5284V59V58.5H94.517V59ZM98.5397 59V59.5H100.551V59V58.5H98.5397V59ZM102.562 59V59.5H104.574V59V58.5H102.562V59ZM106.585 59V59.5H108.597V59V58.5H106.585V59ZM110.608 59V59.5H112.619V59V58.5H110.608V59ZM114.631 59V59.5H116.642V59V58.5H114.631V59ZM118.653 59V59.5H120.665V59V58.5H118.653V59ZM122.676 59V59.5H124.687V59V58.5H122.676V59ZM126.699 59V59.5H128.71V59V58.5H126.699V59ZM130.721 59V59.5H132.733V59V58.5H130.721V59ZM134.744 59V59.5H136.756V59V58.5H134.744V59ZM138.767 59V59.5H140.778V59V58.5H138.767V59ZM142.79 59V59.5H144.801V59V58.5H142.79V59ZM146.812 59V59.5H148.824V59V58.5H146.812V59ZM150.835 59V59.5H152.847V59V58.5H150.835V59ZM154.858 59V59.5H156.869V59V58.5H154.858V59ZM158.881 59V59.5H160.892V59V58.5H158.881V59ZM162.903 59V59.5H164.915V59V58.5H162.903V59ZM166.926 59V59.5H168.937V59V58.5H166.926V59ZM170.949 59V59.5H172.96V59V58.5H170.949V59ZM174.972 59V59.5H176.983V59V58.5H174.972V59ZM178.994 59V59.5H180V59V58.5H178.994V59ZM180 11V10.5H178.994V11V11.5H180V11ZM176.983 11V10.5H174.972V11V11.5H176.983V11ZM172.96 11V10.5H170.949V11V11.5H172.96V11ZM168.938 11V10.5H166.926V11V11.5H168.938V11ZM164.915 11V10.5H162.903V11V11.5H164.915V11ZM160.892 11V10.5H158.881V11V11.5H160.892V11ZM156.869 11V10.5H154.858V11V11.5H156.869V11ZM152.847 11V10.5H150.835V11V11.5H152.847V11ZM148.824 11V10.5H146.812V11V11.5H148.824V11ZM144.801 11V10.5H142.79V11V11.5H144.801V11ZM140.778 11V10.5H138.767V11V11.5H140.778V11ZM136.756 11V10.5H134.744V11V11.5H136.756V11ZM132.733 11V10.5H130.722V11V11.5H132.733V11ZM128.71 11V10.5H126.699V11V11.5H128.71V11ZM124.687 11V10.5H122.676V11V11.5H124.687V11ZM120.665 11V10.5H118.653V11V11.5H120.665V11ZM116.642 11V10.5H114.631V11V11.5H116.642V11ZM112.619 11V10.5H110.608V11V11.5H112.619V11ZM108.597 11V10.5H106.585V11V11.5H108.597V11ZM104.574 11V10.5H102.563V11V11.5H104.574V11ZM100.551 11V10.5H98.5398V11V11.5H100.551V11ZM96.5284 11V10.5H94.5171V11V11.5H96.5284V11ZM92.5057 11V10.5H90.4944V11V11.5H92.5057V11ZM88.483 11V10.5H86.4716V11V11.5H88.483V11ZM84.4603 11V10.5H82.4489V11V11.5H84.4603V11ZM80.4376 11V10.5H78.4262V11V11.5H80.4376V11ZM76.4148 11V10.5H74.4035V11V11.5H76.4148V11ZM72.3921 11V10.5H70.3808V11V11.5H72.3921V11ZM68.3694 11V10.5H66.358V11V11.5H68.3694V11ZM64.3467 11V10.5H62.3353V11V11.5H64.3467V11ZM60.324 11V10.5H58.3126V11V11.5H60.324V11ZM56.3012 11V10.5H54.2899V11V11.5H56.3012V11ZM52.2785 11V10.5H50.2671V11V11.5H52.2785V11ZM48.2558 11V10.5H46.2444V11V11.5H48.2558V11ZM44.2331 11V10.5H42.2217V11V11.5H44.2331V11ZM40.2103 11V10.5H38.1989V11V11.5H40.2103V11ZM36.1876 11V10.5H34.1762V11V11.5H36.1876V11ZM32.1648 11V10.5H30.1535V11V11.5H32.1648V11ZM28.1421 11V10.5H26.1307V11V11.5H28.1421V11ZM24.1194 11V10.5H22.108V11V11.5H24.1194V11ZM20.0966 11V10.5H18.0853V11V11.5H20.0966V11ZM16.0739 11V10.5H14.0625V11V11.5H16.0739V11ZM12.0512 11V10.5H10.0398V11V11.5H12.0512V11ZM8.02843 11V10.5H6.01706V11V11.5H8.02843V11ZM4.00569 11V10.5H3V11V11.5H4.00569V11ZM3 59V60H4.00568V59V58H3V59ZM6.01705 59V60H8.02841V59V58H6.01705V59ZM10.0398 59V60H12.0511V59V58H10.0398V59ZM14.0625 59V60H16.0739V59V58H14.0625V59ZM18.0852 59V60H20.0966V59V58H18.0852V59ZM22.108 59V60H24.1193V59V58H22.108V59ZM26.1307 59V60H28.142V59V58H26.1307V59ZM30.1534 59V60H32.1648V59V58H30.1534V59ZM34.1761 59V60H36.1875V59V58H34.1761V59ZM38.1989 59V60H40.2102V59V58H38.1989V59ZM42.2216 59V60H44.233V59V58H42.2216V59ZM46.2443 59V60H48.2557V59V58H46.2443V59ZM50.2671 59V60H52.2784V59V58H50.2671V59ZM54.2898 59V60H56.3011V59V58H54.2898V59ZM58.3125 59V60H60.3239V59V58H58.3125V59ZM62.3352 59V60H64.3466V59V58H62.3352V59ZM66.358 59V60H68.3693V59V58H66.358V59ZM70.3807 59V60H72.392V59V58H70.3807V59ZM74.4034 59V60H76.4148V59V58H74.4034V59ZM78.4261 59V60H80.4375V59V58H78.4261V59ZM82.4488 59V60H84.4602V59V58H82.4488V59ZM86.4716 59V60H88.4829V59V58H86.4716V59ZM90.4943 59V60H92.5056V59V58H90.4943V59ZM94.517 59V60H96.5284V59V58H94.517V59ZM98.5397 59V60H100.551V59V58H98.5397V59ZM102.562 59V60H104.574V59V58H102.562V59ZM106.585 59V60H108.597V59V58H106.585V59ZM110.608 59V60H112.619V59V58H110.608V59ZM114.631 59V60H116.642V59V58H114.631V59ZM118.653 59V60H120.665V59V58H118.653V59ZM122.676 59V60H124.687V59V58H122.676V59ZM126.699 59V60H128.71V59V58H126.699V59ZM130.721 59V60H132.733V59V58H130.721V59ZM134.744 59V60H136.756V59V58H134.744V59ZM138.767 59V60H140.778V59V58H138.767V59ZM142.79 59V60H144.801V59V58H142.79V59ZM146.812 59V60H148.824V59V58H146.812V59ZM150.835 59V60H152.847V59V58H150.835V59ZM154.858 59V60H156.869V59V58H154.858V59ZM158.881 59V60H160.892V59V58H158.881V59ZM162.903 59V60H164.915V59V58H162.903V59ZM166.926 59V60H168.937V59V58H166.926V59ZM170.949 59V60H172.96V59V58H170.949V59ZM174.972 59V60H176.983V59V58H174.972V59ZM178.994 59V60H180V59V58H178.994V59ZM180 11V10H178.994V11V12H180V11ZM176.983 11V10H174.972V11V12H176.983V11ZM172.96 11V10H170.949V11V12H172.96V11ZM168.938 11V10H166.926V11V12H168.938V11ZM164.915 11V10H162.903V11V12H164.915V11ZM160.892 11V10H158.881V11V12H160.892V11ZM156.869 11V10H154.858V11V12H156.869V11ZM152.847 11V10H150.835V11V12H152.847V11ZM148.824 11V10H146.812V11V12H148.824V11ZM144.801 11V10H142.79V11V12H144.801V11ZM140.778 11V10H138.767V11V12H140.778V11ZM136.756 11V10H134.744V11V12H136.756V11ZM132.733 11V10H130.722V11V12H132.733V11ZM128.71 11V10H126.699V11V12H128.71V11ZM124.687 11V10H122.676V11V12H124.687V11ZM120.665 11V10H118.653V11V12H120.665V11ZM116.642 11V10H114.631V11V12H116.642V11ZM112.619 11V10H110.608V11V12H112.619V11ZM108.597 11V10H106.585V11V12H108.597V11ZM104.574 11V10H102.563V11V12H104.574V11ZM100.551 11V10H98.5398V11V12H100.551V11ZM96.5284 11V10H94.5171V11V12H96.5284V11ZM92.5057 11V10H90.4944V11V12H92.5057V11ZM88.483 11V10H86.4716V11V12H88.483V11ZM84.4603 11V10H82.4489V11V12H84.4603V11ZM80.4376 11V10H78.4262V11V12H80.4376V11ZM76.4148 11V10H74.4035V11V12H76.4148V11ZM72.3921 11V10H70.3808V11V12H72.3921V11ZM68.3694 11V10H66.358V11V12H68.3694V11ZM64.3467 11V10H62.3353V11V12H64.3467V11ZM60.324 11V10H58.3126V11V12H60.324V11ZM56.3012 11V10H54.2899V11V12H56.3012V11ZM52.2785 11V10H50.2671V11V12H52.2785V11ZM48.2558 11V10H46.2444V11V12H48.2558V11ZM44.2331 11V10H42.2217V11V12H44.2331V11ZM40.2103 11V10H38.1989V11V12H40.2103V11ZM36.1876 11V10H34.1762V11V12H36.1876V11ZM32.1648 11V10H30.1535V11V12H32.1648V11ZM28.1421 11V10H26.1307V11V12H28.1421V11ZM24.1194 11V10H22.108V11V12H24.1194V11ZM20.0966 11V10H18.0853V11V12H20.0966V11ZM16.0739 11V10H14.0625V11V12H16.0739V11ZM12.0512 11V10H10.0398V11V12H12.0512V11ZM8.02843 11V10H6.01706V11V12H8.02843V11ZM4.00569 11V10H3V11V12H4.00569V11Z" fill="#0096FF" mask="url(#path-4-inside-1_4219_25901)"/>
+<mask id="path-6-inside-2_4219_25901" fill="white">
+<path d="M67 68L67 2L115 2L115 68L67 68Z"/>
+</mask>
+<path d="M115 68L115.5 68L115.5 67.0294L115 67.0294L114.5 67.0294L114.5 68L115 68ZM115 65.0882L115.5 65.0882L115.5 63.1471L115 63.1471L114.5 63.1471L114.5 65.0882L115 65.0882ZM115 61.2059L115.5 61.2059L115.5 59.2647L115 59.2647L114.5 59.2647L114.5 61.2059L115 61.2059ZM115 57.3235L115.5 57.3235L115.5 55.3824L115 55.3824L114.5 55.3824L114.5 57.3235L115 57.3235ZM115 53.4412L115.5 53.4412L115.5 51.5L115 51.5L114.5 51.5L114.5 53.4412L115 53.4412ZM115 49.5588L115.5 49.5588L115.5 47.6176L115 47.6176L114.5 47.6176L114.5 49.5588L115 49.5588ZM115 45.6765L115.5 45.6765L115.5 43.7353L115 43.7353L114.5 43.7353L114.5 45.6765L115 45.6765ZM115 41.7941L115.5 41.7941L115.5 39.8529L115 39.8529L114.5 39.8529L114.5 41.7941L115 41.7941ZM115 37.9118L115.5 37.9118L115.5 35.9706L115 35.9706L114.5 35.9706L114.5 37.9118L115 37.9118ZM115 34.0294L115.5 34.0294L115.5 32.0882L115 32.0882L114.5 32.0882L114.5 34.0294L115 34.0294ZM115 30.147L115.5 30.147L115.5 28.2059L115 28.2059L114.5 28.2059L114.5 30.147L115 30.147ZM115 26.2647L115.5 26.2647L115.5 24.3235L115 24.3235L114.5 24.3235L114.5 26.2647L115 26.2647ZM115 22.3823L115.5 22.3823L115.5 20.4412L115 20.4412L114.5 20.4412L114.5 22.3823L115 22.3823ZM115 18.5L115.5 18.5L115.5 16.5588L115 16.5588L114.5 16.5588L114.5 18.5L115 18.5ZM115 14.6176L115.5 14.6176L115.5 12.6765L115 12.6765L114.5 12.6765L114.5 14.6176L115 14.6176ZM115 10.7353L115.5 10.7353L115.5 8.7941L115 8.7941L114.5 8.7941L114.5 10.7353L115 10.7353ZM115 6.85292L115.5 6.85292L115.5 4.91174L115 4.91174L114.5 4.91174L114.5 6.85292L115 6.85292ZM115 2.97056L115.5 2.97056L115.5 2L115 2L114.5 2L114.5 2.97056L115 2.97056ZM67 2L66.5 2L66.5 2.97059L67 2.97059L67.5 2.97059L67.5 2L67 2ZM67 4.91177L66.5 4.91177L66.5 6.85294L67 6.85294L67.5 6.85294L67.5 4.91177L67 4.91177ZM67 8.79412L66.5 8.79412L66.5 10.7353L67 10.7353L67.5 10.7353L67.5 8.79412L67 8.79412ZM67 12.6765L66.5 12.6765L66.5 14.6176L67 14.6176L67.5 14.6176L67.5 12.6765L67 12.6765ZM67 16.5588L66.5 16.5588L66.5 18.5L67 18.5L67.5 18.5L67.5 16.5588L67 16.5588ZM67 20.4412L66.5 20.4412L66.5 22.3824L67 22.3824L67.5 22.3824L67.5 20.4412L67 20.4412ZM67 24.3235L66.5 24.3235L66.5 26.2647L67 26.2647L67.5 26.2647L67.5 24.3235L67 24.3235ZM67 28.2059L66.5 28.2059L66.5 30.1471L67 30.1471L67.5 30.1471L67.5 28.2059L67 28.2059ZM67 32.0882L66.5 32.0882L66.5 34.0294L67 34.0294L67.5 34.0294L67.5 32.0882L67 32.0882ZM67 35.9706L66.5 35.9706L66.5 37.9118L67 37.9118L67.5 37.9118L67.5 35.9706L67 35.9706ZM67 39.8529L66.5 39.8529L66.5 41.7941L67 41.7941L67.5 41.7941L67.5 39.8529L67 39.8529ZM67 43.7353L66.5 43.7353L66.5 45.6765L67 45.6765L67.5 45.6765L67.5 43.7353L67 43.7353ZM67 47.6177L66.5 47.6177L66.5 49.5588L67 49.5588L67.5 49.5588L67.5 47.6177L67 47.6177ZM67 51.5L66.5 51.5L66.5 53.4412L67 53.4412L67.5 53.4412L67.5 51.5L67 51.5ZM67 55.3824L66.5 55.3824L66.5 57.3235L67 57.3235L67.5 57.3235L67.5 55.3824L67 55.3824ZM67 59.2647L66.5 59.2647L66.5 61.2059L67 61.2059L67.5 61.2059L67.5 59.2647L67 59.2647ZM67 63.1471L66.5 63.1471L66.5 65.0883L67 65.0883L67.5 65.0883L67.5 63.1471L67 63.1471ZM67 67.0294L66.5 67.0294L66.5 68L67 68L67.5 68L67.5 67.0294L67 67.0294ZM115 68L116 68L116 67.0294L115 67.0294L114 67.0294L114 68L115 68ZM115 65.0882L116 65.0882L116 63.1471L115 63.1471L114 63.1471L114 65.0882L115 65.0882ZM115 61.2059L116 61.2059L116 59.2647L115 59.2647L114 59.2647L114 61.2059L115 61.2059ZM115 57.3235L116 57.3235L116 55.3824L115 55.3824L114 55.3824L114 57.3235L115 57.3235ZM115 53.4412L116 53.4412L116 51.5L115 51.5L114 51.5L114 53.4412L115 53.4412ZM115 49.5588L116 49.5588L116 47.6176L115 47.6176L114 47.6176L114 49.5588L115 49.5588ZM115 45.6765L116 45.6765L116 43.7353L115 43.7353L114 43.7353L114 45.6765L115 45.6765ZM115 41.7941L116 41.7941L116 39.8529L115 39.8529L114 39.8529L114 41.7941L115 41.7941ZM115 37.9118L116 37.9118L116 35.9706L115 35.9706L114 35.9706L114 37.9118L115 37.9118ZM115 34.0294L116 34.0294L116 32.0882L115 32.0882L114 32.0882L114 34.0294L115 34.0294ZM115 30.147L116 30.147L116 28.2059L115 28.2059L114 28.2059L114 30.147L115 30.147ZM115 26.2647L116 26.2647L116 24.3235L115 24.3235L114 24.3235L114 26.2647L115 26.2647ZM115 22.3823L116 22.3823L116 20.4412L115 20.4412L114 20.4412L114 22.3823L115 22.3823ZM115 18.5L116 18.5L116 16.5588L115 16.5588L114 16.5588L114 18.5L115 18.5ZM115 14.6176L116 14.6176L116 12.6765L115 12.6765L114 12.6765L114 14.6176L115 14.6176ZM115 10.7353L116 10.7353L116 8.7941L115 8.7941L114 8.7941L114 10.7353L115 10.7353ZM115 6.85292L116 6.85292L116 4.91174L115 4.91174L114 4.91174L114 6.85292L115 6.85292ZM115 2.97056L116 2.97056L116 2L115 2L114 2L114 2.97056L115 2.97056ZM67 2L66 2L66 2.97059L67 2.97059L68 2.97059L68 2L67 2ZM67 4.91177L66 4.91177L66 6.85294L67 6.85294L68 6.85294L68 4.91177L67 4.91177ZM67 8.79412L66 8.79412L66 10.7353L67 10.7353L68 10.7353L68 8.79412L67 8.79412ZM67 12.6765L66 12.6765L66 14.6176L67 14.6176L68 14.6176L68 12.6765L67 12.6765ZM67 16.5588L66 16.5588L66 18.5L67 18.5L68 18.5L68 16.5588L67 16.5588ZM67 20.4412L66 20.4412L66 22.3824L67 22.3824L68 22.3824L68 20.4412L67 20.4412ZM67 24.3235L66 24.3235L66 26.2647L67 26.2647L68 26.2647L68 24.3235L67 24.3235ZM67 28.2059L66 28.2059L66 30.1471L67 30.1471L68 30.1471L68 28.2059L67 28.2059ZM67 32.0882L66 32.0882L66 34.0294L67 34.0294L68 34.0294L68 32.0882L67 32.0882ZM67 35.9706L66 35.9706L66 37.9118L67 37.9118L68 37.9118L68 35.9706L67 35.9706ZM67 39.8529L66 39.8529L66 41.7941L67 41.7941L68 41.7941L68 39.8529L67 39.8529ZM67 43.7353L66 43.7353L66 45.6765L67 45.6765L68 45.6765L68 43.7353L67 43.7353ZM67 47.6177L66 47.6177L66 49.5588L67 49.5588L68 49.5588L68 47.6177L67 47.6177ZM67 51.5L66 51.5L66 53.4412L67 53.4412L68 53.4412L68 51.5L67 51.5ZM67 55.3824L66 55.3824L66 57.3235L67 57.3235L68 57.3235L68 55.3824L67 55.3824ZM67 59.2647L66 59.2647L66 61.2059L67 61.2059L68 61.2059L68 59.2647L67 59.2647ZM67 63.1471L66 63.1471L66 65.0883L67 65.0883L68 65.0883L68 63.1471L67 63.1471ZM67 67.0294L66 67.0294L66 68L67 68L68 68L68 67.0294L67 67.0294Z" fill="#0096FF" mask="url(#path-6-inside-2_4219_25901)"/>
+<path d="M99.8275 63.5419L94.2119 49L109.294 55.1409L101.79 56.0727L99.8275 63.5419Z" fill="black" stroke="white"/>
+</svg>

package/dist/inspector/ui/css.d.ts

@@ -0,0 +1,9 @@
+declare module "*.css?inline" {
+  const css: string;
+  export default css;
+}
+
+declare module "*.svg" {
+  const source: string;
+  export default source;
+}

package/dist/inspector/ui/labels.d.ts

@@ -0,0 +1 @@
+export declare function formatInspectorLabel(value: string): string;

package/dist/inspector/ui/labels.js

@@ -0,0 +1,7 @@
+export function formatInspectorLabel(value) {
+    return value
+        .replace(/[-_]+/g, " ")
+        .replace(/\s+/g, " ")
+        .trim()
+        .replace(/\b[a-z]/g, (letter) => letter.toUpperCase());
+}

package/dist/inspector/ui/styles.d.ts

@@ -0,0 +1 @@
+export declare const UI_STYLES: string;

package/dist/inspector/ui/styles.js

@@ -0,0 +1,68 @@
+const fieldRowStyles = ".field-row {\n  display: grid;\n  grid-template-columns: var(--label-column) minmax(0, 1fr);\n  gap: var(--space-8);\n  align-items: center;\n  min-height: var(--control-height-large);\n}\n\n.field-row--has-action {\n  grid-template-columns: var(--label-column) minmax(0, 1fr) auto;\n}\n\n.field-row__label {\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.25;\n}\n\n.field-row__label--hidden {\n  position: absolute;\n  width: var(--space-0);\n  height: var(--space-0);\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.field-row__control {\n  position: relative;\n  display: block;\n  min-width: 0;\n}\n\n.field-row__action {\n  display: inline-flex;\n  min-width: 0;\n  align-items: center;\n  justify-content: flex-end;\n}\n\n.field-row__control[data-has-at-rule=\"true\"] {\n  /* Keep the badge out of the control's horizontal layout. */\n  isolation: isolate;\n}\n\n.field-row--stacked {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-8);\n  min-height: 0;\n}\n\n.field-row--stacked .field-row__control {\n  width: 100%;\n}\n\n.field-row__hint {\n  display: block;\n  margin-top: var(--space-4);\n  color: var(--text-muted-subtle);\n  font-size: var(--font-size-base);\n  line-height: 1.3;\n}\n";
+const atRuleContextStyles = ".at-rule-indicator {\n  position: absolute;\n  z-index: 2;\n  top: -4px;\n  left: -4px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 4px;\n  border: 0;\n  border-radius: var(--radius-pill);\n  background: var(--surface-raised-2x);\n  color: var(--content-primary, var(--text-primary));\n  box-shadow: var(--shadow-outline);\n  font: inherit;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: help;\n}\n\n.at-rule-indicator::before {\n  position: absolute;\n  inset: -4px;\n  content: \"\";\n}\n\n.at-rule-indicator:hover {\n  color: var(--content-primary, var(--text-primary));\n  background: var(--surface-raised-2x);\n}\n\n.at-rule-indicator__symbol {\n  display: block;\n}\n\n.at-rule-indicator:focus-visible {\n  outline: 0;\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.at-rule-tooltip-positioner {\n  /* The portal is a sibling of the panel in the inspector shadow root. */\n  z-index: 3;\n  pointer-events: auto;\n}\n\n.at-rule-tooltip {\n  width: max-content;\n  max-width: min(320px, calc(100vw - 24px));\n  padding: var(--space-4);\n  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);\n  border-radius: var(--radius-8);\n  background: var(--surface-raised);\n  box-shadow: 0 8px 22px rgb(0 0 0 / 18%);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  line-height: 1.35;\n}\n\n.at-rule-tooltip__rules {\n  display: grid;\n  gap: 2px;\n}\n\n.at-rule-tooltip__rule {\n  min-width: 0;\n  padding: 5px 6px;\n  border-radius: var(--radius-4);\n}\n\n.at-rule-tooltip__rule--active {\n  background: var(--accent-surface);\n}\n\n.at-rule-tooltip code {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--text-primary);\n  font: inherit;\n}\n";
+const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #F5F5F4;\n  --surface-control: var(--surface-well);\n  --surface-control-hover: var(--surface-well-2x);\n  --surface-raised: #FAFAFA;\n  --surface-raised-2x: #fff ;\n  --surface-raised-hover: #F5F5F4;\n  --surface-well: hsla(0, 0%, 0%, 0.05);\n  --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n\n  --border-subtle: hsla(0, 0%, 0%, 0.1);\n  --border-medium: hsla(0, 0%, 0%, 0.2);\n  --border-strong: #d8d8d8;\n\n  --text-primary: #242424;\n  --text-secondary: #6f6f6f;\n  --text-muted: #777777;\n  --text-muted-subtle: #a1a1a1;\n\n  --accent: #0096ff;\n  --accent-surface: rgba(0, 176, 255, 0.15);\n  --warning: #d97706;\n  --warning-text: #9a5b00;\n  --warning-surface: #fff6e5;\n  --danger: #df4b4b;\n  --danger-text: #bd3636;\n  --danger-surface: #fff0f0;\n\n  --space-0: 0;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n\n  /* Radius */\n  --radius-0: 0;\n  --radius-4: 4px;\n  --radius-8: 8px;\n  --radius-12: 12px;\n  --radius-16: 16px;\n  --radius-20: 20px;\n  --radius-24: 24px;\n  --radius-pill: 999px;\n\n  --radius-control: var(--radius-8);\n  --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n  --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --z-index: 2147483647;\n\n  --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --font-size-base: 12px;\n  --font-size-small: 10px;\n  --font-weight-base: 400;\n  --font-weight-label: 600;\n\n  /* Control semantic sizes */\n  --control-height-small: 24px;\n  --control-height-large: 32px;\n  --label-column: 104px;\n\n  --icon-size-small: 16px;\n  --icon-size-large: 20px;\n  --icon-stroke-width: 1.5px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n  font-family: var(--font-family);\n  background: transparent;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n  font-family: inherit;\n}\n";
+const controlSurfaceStyles = "/*\n * A single visual boundary for a field. Standalone text inputs and selects\n * share these defaults; composed fields use ControlSurface and make their\n * content embedded so only this element paints control chrome.\n */\n.control-surface,\n.text-input,\n.select {\n  --control-surface-height: var(--control-height-large);\n  --control-surface-padding: 2px 8px;\n  --control-surface-gap: 6px;\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--control-surface-height);\n  padding: var(--control-surface-padding);\n  border: 0;\n  border-radius: var(--radius-control);\n  outline: 0;\n  background: var(--surface-control);\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  transition: background-color 120ms ease, box-shadow 120ms ease;\n}\n\n.control-surface {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: var(--control-surface-gap);\n}\n\n.control-surface:has(.token-field--color) {\n  --control-surface-padding: 2px 8px 2px 2px;\n}\n\n.control-surface--compact,\n.text-input--compact,\n.select--compact {\n  --control-surface-height: var(--control-height-small);\n  --control-surface-padding: 0 6px;\n}\n\n.control-surface:hover:not(:focus-within),\n.text-input:hover:not(:focus),\n.select:hover:not(:disabled) {\n  background: var(--surface-control-hover);\n}\n\n.control-surface:focus-within,\n.text-input:focus-visible,\n.select:focus-visible,\n.select[data-popup-open] {\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.control-surface--embedded,\n.text-input--embedded,\n.select--embedded {\n  padding: 0;\n  background: transparent;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.control-surface--embedded:hover:not(:focus-within),\n.text-input--embedded:hover:not(:focus),\n.select--embedded:hover:not(:disabled),\n.control-surface--embedded:focus-within,\n.text-input--embedded:focus-visible,\n.select--embedded:focus-visible,\n.select--embedded[data-popup-open] {\n  background: transparent;\n  box-shadow: none;\n}\n";
+const textInputStyles = ".text-input {\n  width: 100%;\n}\n\n.text-input::placeholder {\n  color: var(--text-muted);\n  opacity: 1;\n}\n";
+const selectStyles = ".select {\n  display: inline-flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  text-align: left;\n  cursor: pointer;\n}\n\n.select:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.select__value,\n.select [data-slot=\"select-value\"] {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.select__icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--text-muted);\n  transition: transform 120ms ease;\n}\n\n.select[data-popup-open] .select__icon {\n  color: var(--text-primary);\n  transform: rotate(180deg);\n}\n\n.select__positioner {\n  z-index: var(--z-index);\n  min-width: var(--anchor-width);\n  pointer-events: auto;\n}\n\n.select__popup {\n  box-sizing: border-box;\n  width: min(420px, max(var(--anchor-width, 0px), 260px));\n  min-width: 0;\n  max-width: calc(100vw - 24px);\n  max-height: min(320px, calc(100dvh - 24px), var(--available-height, 100dvh));\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  pointer-events: auto;\n  background: var(--surface-raised);\n  color: var(--text-primary);\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-popup);\n  transform-origin: var(--transform-origin);\n}\n\n.select__popup--searchable {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.select__search-input {\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  width: calc(100% - (var(--space-4) * 2));\n  min-height: 32px;\n  margin: var(--space-4);\n  padding: var(--space-8);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-8);\n  background: var(--surface-control);\n  color: var(--text-primary);\n  outline: 0;\n  font: inherit;\n}\n\n.select__search-input::placeholder {\n  color: var(--text-muted);\n  opacity: 1;\n}\n\n.select__search-input:focus {\n  border-color: var(--border-strong);\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.select__empty {\n  padding: 12px 14px;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n}\n\n.select__empty:empty {\n  padding: 0;\n}\n\n.select__list {\n  min-width: 0;\n  padding: var(--space-4);\n  outline: 0;\n}\n\n.select__list--searchable {\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.select__group + .select__group {\n  margin-top: 4px;\n  padding-top: 4px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.select__group-label {\n  padding: 5px 8px 4px;\n  color: var(--text-muted);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.select__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  min-height: 34px;\n  padding: 6px 9px;\n  border-radius: var(--radius-4);\n  color: var(--text-primary);\n  outline: 0;\n  font-size: var(--font-size-base);\n  cursor: pointer;\n}\n\n.select__item[data-highlighted] {\n  background: var(--surface-control);\n}\n\n.select__item[data-disabled] {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.select__item-indicator {\n  display: inline-flex;\n  width: 16px;\n  flex: 0 0 16px;\n  align-items: center;\n  justify-content: center;\n}\n\n.select__item-text {\n  min-width: 0;\n  flex: 1 1 0;\n  overflow: hidden;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+const buttonStyles = ".button {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n  background: var(--surface-control);\n  border: 0;\n  color: var(--text-primary);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  min-height: var(--control-height-large);\n  padding: 0 12px;\n  border-radius: var(--radius-control);\n  vertical-align: middle;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.button--compact {\n  min-height: var(--control-height-small);\n  padding: 0 10px;\n  font-size: var(--font-size-base);\n}\n\n.button--primary {\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.button--secondary {\n  background: var(--surface-control);\n}\n\n.button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.button--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n\n.button--disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.button:hover:not(:disabled) {\n  background: var(--surface-control-hover);\n}\n\n.button--quiet:hover:not(:disabled) {\n  background: var(--surface-well);\n}\n\n.button--primary:hover:not(:disabled) {\n  background: var(--surface-raised-hover);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.button[data-active=\"true\"] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.button[data-active=\"true\"]:hover:not(:disabled) {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.button:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.button:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n";
+const segmentedControlStyles = ".segmented-control {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: minmax(0, 1fr);\n  align-items: stretch;\n  gap: 2px;\n  min-width: 0;\n  min-height: var(--control-height-large);\n  padding: 2px;\n  box-sizing: border-box;\n  overflow: hidden;\n  border-radius: var(--radius-control);\n  background: var(--surface-well);\n}\n\n/* button is the base; stretch fills the padded track (grows with text). */\n.button.segmented-control__button {\n  min-width: 0;\n  min-height: 0;\n  height: auto;\n  padding: 0 var(--space-8);\n  border: 0;\n  border-radius: 6px; /*Custom to fit inside control surface*/\n  background: transparent;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  box-shadow: none;\n}\n\n.button.segmented-control__button--selected,\n.button.segmented-control__button--selected:hover:not(:disabled) {\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.button.segmented-control__button:not(.segmented-control__button--selected):hover:not(:disabled) {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.segmented-control__button svg {\n  flex-shrink: 0;\n}\n\n.segmented-control__label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+const iconButtonStyles = ".icon-button {\n  appearance: none;\n  background: var(--surface-control);\n  border: 0;\n  color: var(--text-primary);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--control-height-large);\n  height: var(--control-height-large);\n  padding: 0;\n  border-radius: var(--radius-control);\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: 650;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.icon-button svg {\n  stroke-width: var(--icon-stroke-width);\n}\n\n.icon-button--primary {\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.icon-button--secondary {\n  background: var(--surface-control);\n}\n\n.icon-button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.icon-button--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n\n.icon-button--disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.icon-button:hover:not(:disabled) {\n  background: var(--surface-well);\n}\n\n.icon-button--primary:hover:not(:disabled) {\n  background: var(--surface-raised-hover);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.icon-button[data-active=\"true\"] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.icon-button:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.icon-button:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.icon-button--compact {\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n}\n";
+const toggleButtonStyles = ".toggle-button {\n  appearance: none;\n  background: var(--surface-control);\n  border: 0;\n  color: var(--text-primary);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--control-height-large);\n  height: var(--control-height-large);\n  padding: 0;\n  border-radius: var(--radius-control);\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: 650;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.toggle-button svg {\n  stroke-width: var(--icon-stroke-width);\n}\n\n.toggle-button--primary {\n  background: var(--accent);\n  color: #ffffff;\n}\n\n.toggle-button--secondary {\n  background: var(--surface-control);\n}\n\n.toggle-button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.toggle-button--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n\n.toggle-button--disabled {\n  background: var(--surface-control);\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.toggle-button:hover:not(:disabled) {\n  background: var(--surface-well);\n}\n\n.toggle-button--primary:hover:not(:disabled) {\n  background: var(--accent);\n}\n\n.toggle-button[data-pressed] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.toggle-button[data-pressed]:hover:not(:disabled) {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.toggle-button:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.toggle-button:disabled {\n  background: var(--surface-control);\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.toggle-button--compact {\n  width: 26px;\n  height: 26px;\n}\n";
+const statusCalloutStyles = ".status-callout {\n  padding: 12px 14px;\n  background: var(--surface-control);\n  border: 0;\n  border-radius: 12px;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n}\n\n.status-callout--warning {\n  background: var(--warning-surface);\n  color: var(--warning-text);\n}\n\n.status-callout--accent {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.status-callout--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n";
+const colorSwatchStyles = ".color-swatch {\n  display: inline-block;\n  flex-shrink: 0;\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  background: var(--swatch-color);\n  border-radius: calc(var(--radius-control) - 4px);\n  border: 1px solid #fff;\n  box-shadow: 0 0 0 1px var(--border-medium);\n}\n";
+const popoverListboxStyles = ".popover-listbox {\n  position: relative;\n  width: 100%;\n}\n\n.popover-listbox__positioner {\n  z-index: 20;\n  pointer-events: auto;\n}\n\n.popover-listbox__popup {\n  box-sizing: border-box;\n  width: min(420px, max(var(--anchor-width, 0px), 260px));\n  min-width: 0;\n  max-width: calc(100vw - 24px);\n  max-height: min(320px, calc(100dvh - 24px), var(--available-height, 100dvh));\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  pointer-events: auto;\n  background: var(--surface-raised-2x);\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-popup);\n}\n\n.popover-listbox__popup--searchable {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.popover-listbox__search-input {\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  width: 100%;\n  min-height: 32px;\n  padding: var(--space-12) var(--space-16);\n  border: none;\n  border-bottom: 1px solid var(--border-subtle);\n  background: transparent;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  outline: 0;\n}\n\n.popover-listbox__search-input::placeholder {\n  color: var(--text-muted);\n  opacity: 1;\n}\n\n.popover-listbox__search-input:focus {\n  border-color: var(--border-strong);\n}\n\n.popover-listbox__empty {\n  padding: var(--space-12) var(--space-16);\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n}\n\n.popover-listbox__empty:empty {\n  padding: 0;\n}\n\n.popover-listbox__list {\n  min-width: 0;\n  padding: var(--space-4);\n}\n\n.popover-listbox__list--searchable {\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.popover-listbox__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  min-height: 34px;\n  padding: 6px 9px;\n  border-radius: var(--radius-4);\n  color: var(--text-primary);\n  cursor: pointer;\n  font-size: var(--font-size-base);\n}\n\n.popover-listbox__item[data-highlighted] {\n  background: var(--surface-control);\n}\n\n.popover-listbox__leading {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.popover-listbox__label {\n  min-width: 0;\n  flex: 1 1 auto;\n  overflow: hidden;\n  color: var(--text-primary);\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.popover-listbox__trailing {\n  min-width: 0;\n  max-width: 45%;\n  flex: 0 1 auto;\n  overflow: hidden;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n  text-align: right;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+const inspectorPopoverStyles = ".inspector-popover__positioner {\n  z-index: 30;\n  pointer-events: auto;\n}\n\n.inspector-popover__popup {\n  box-sizing: border-box;\n  width: min(280px, calc(100vw - 24px));\n  max-height: min(420px, calc(100dvh - 24px));\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding: var(--space-4);\n  background: var(--surface-raised-2x);\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n";
+const sideValuesFieldStyles = ".side-values {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.side-values__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.side-values__label {\n  min-width: 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.25;\n}\n\n.side-values__linked {\n  min-width: 0;\n}\n\n.side-values__value-row {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 6px;\n}\n\n.side-values[data-expanded=\"true\"] .side-values__value-row {\n  align-items: start;\n}\n\n.side-values__linked-row {\n  grid-template-columns: auto minmax(0, 1fr) auto;\n}\n\n.side-values__linked-row--no-label {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.side-values__linked-row .side-values__label {\n  white-space: nowrap;\n}\n\n.side-values__pairs {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 6px;\n}\n\n.side-values__grid {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  grid-template-areas:\n    \"left top\"\n    \"right bottom\";\n  gap: 6px;\n}\n\n.side-values__grid [data-side=\"left\"] {\n  grid-area: left;\n}\n\n.side-values__grid [data-side=\"right\"] {\n  grid-area: right;\n}\n\n.side-values__grid [data-side=\"top\"] {\n  grid-area: top;\n}\n\n.side-values__grid [data-side=\"bottom\"] {\n  grid-area: bottom;\n}\n\n.side-values__grid[data-layout=\"corners\"] {\n  grid-template-areas:\n    \"top-left top-right\"\n    \"bottom-left bottom-right\";\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"top\"] {\n  grid-area: top-left;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"right\"] {\n  grid-area: top-right;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"bottom\"] {\n  grid-area: bottom-right;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"left\"] {\n  grid-area: bottom-left;\n}\n\n.side-values__side {\n  color: var(--text-muted);\n}\n\n.side-values__icon {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  flex: 0 0 var(--icon-size-small);\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke-width: var(--icon-stroke-width);\n}\n\n.side-values__axis-icon {\n  color: var(--text-secondary);\n}\n\n.side-values__side-icon {\n  color: var(--text-secondary);\n}\n\n.side-values__icon-emphasis,\n.side-values__icon-emphasis path {\n  stroke-width: var(--icon-stroke-width);\n}\n\n.side-values__control {\n  display: flex;\n  align-self: stretch;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n";
+const inspectorShellStyles = ":host { --panel-width: min(320px, 100vw); }\n\n.panel {\n  position: fixed;\n  inset: 0 0 0 auto;\n  z-index: 2;\n  width: var(--panel-width);\n  height: 100dvh;\n  overflow: auto;\n  background: var(--surface-panel);\n  color: var(--text-primary);\n  border: 0;\n  border-left: 1px solid var(--border-subtle);\n  border-radius: var(--radius-0);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  line-height: 1.35;\n  display: flex;\n  flex-direction: column;\n  pointer-events: auto;\n  scrollbar-color: var(--border-strong) transparent;\n  scrollbar-width: thin;\n}\n\n.panel[data-open=\"false\"] {\n  display: none;\n}\n\n.panel__restore {\n  position: fixed;\n  top: max(12px, env(safe-area-inset-top));\n  right: max(12px, env(safe-area-inset-right));\n  z-index: calc(var(--z-index) + 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--control-height-large) + (var(--space-4) * 2));\n  height: calc(var(--control-height-large) + (var(--space-4) * 2));\n  padding: var(--space-4);\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n  animation: panel-restore-in 160ms ease-out;\n}\n\n.panel__restore-button.icon-button {\n  width: 100%;\n  height: 100%;\n}\n\n@keyframes panel-restore-in {\n  from { opacity: 0; transform: translateX(8px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.scope__warning {\n  color: var(--warning-text);\n  font-weight: 500;\n}\n\n.panel__tabs {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  padding: var(--space-12) var(--space-24);\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.panel__header-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n  width: 100%;\n}\n\n.panel__header-actions,\n.panel__copy-row {\n  display: flex;\n  align-items: center;\n}\n\n.panel__header-actions {\n  min-width: 0;\n  gap: var(--space-4);\n}\n\n.panel__copy-row {\n  gap: var(--space-8);\n}\n\n.panel__header-divider {\n  width: 1px;\n  height: var(--control-height-large);\n  margin: 0 var(--space-4);\n  background: var(--border-subtle);\n}\n\n.panel__canvas-button {\n  white-space: nowrap;\n}\n\n.panel__copy-row {\n  width: 100%;\n}\n\n.copy-prompt__stack {\n  width: 100%;\n  min-width: 0;\n}\n\n.copy-prompt__main.button {\n  width: 100%;\n}\n\n.copy-prompt__hint {\n  margin: var(--space-8) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  line-height: 1.4;\n}\n\n.copy-prompt__hint code {\n  font-family: var(--font-mono);\n}\n\n.copy-prompt__agent-status {\n  margin-top: var(--space-8);\n}\n\n.copy-prompt__agent-status-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.copy-prompt__agent-status-content > span {\n  min-width: 0;\n}\n\n.copy-prompt__agent-status-content .button--quiet {\n  flex: 0 0 auto;\n  color: inherit;\n}\n\n.copy-prompt__agent-status--listening {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n  margin-top: var(--space-8);\n  color: var(--text-secondary);\n  font-size: 14px;\n  line-height: 1.4;\n  text-align: center;\n}\n\n.panel__body {\n  min-height: auto;\n  padding: 0 20px 28px;\n  background: var(--surface-panel);\n  color: var(--text-secondary);\n  overflow: visible;\n  flex: 0 0 auto;\n}\n\n.panel__body:has(.empty-state) {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.panel::-webkit-scrollbar {\n  width: 6px;\n}\n\n.panel::-webkit-scrollbar-thumb {\n  background: var(--border-strong);\n  border-radius: var(--radius-pill);\n}\n\n.selection {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px 0 16px;\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.selection--without-scope-callout {\n  border-bottom: 0;\n}\n\n.selection__summary {\n  display: grid;\n  gap: 2px;\n}\n\n.selection__count {\n  color: var(--text-primary);\n  font-weight: 600;\n}\n\n.style-state {\n  grid-template-columns: var(--label-column) minmax(0, 1fr);\n  column-gap: 6px;\n}\n\n.scope {\n  margin-top: 6px;\n}\n\n.scope__action {\n  margin-top: 0;\n}\n\n.scope__unlinked,\n.scope__linked {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.style-editors {\n  margin-top: 0;\n  background: var(--surface-panel);\n  border-top: 0;\n  padding-top: 0;\n}\n\n.component-props__source {\n  color: var(--text-muted-subtle);\n  font-size: 10px;\n  font-weight: 650;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n\n.component-props .field-row__label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.inline-text-editor {\n  display: grid;\n  gap: 8px;\n  padding: 10px 12px;\n  border: 1px solid var(--border-strong);\n  border-radius: 8px;\n  background: var(--surface-raised);\n}\n\n.inline-text-editor__binding {\n  font-family: var(--font-mono);\n  color: var(--text-primary);\n}\n\n.inline-text-editor__chooser {\n  display: grid;\n  gap: 4px;\n}\n\n.inline-text-editor__chooser-label {\n  color: var(--text-muted-subtle);\n  font-size: 10px;\n  font-weight: 650;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.inline-text-editor__chooser-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.inline-text-editor__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n}\n\n.style-editors__title {\n  color: var(--text-muted);\n  margin-bottom: 8px;\n  font-weight: 600;\n}\n\n.empty-state + .changes {\n  margin-top: auto;\n}\n\n.changes__empty {\n  color: var(--text-muted-subtle);\n}\n\n.editor {\n  margin: 0;\n  padding: var(--space-8) 0;\n  background: var(--surface-panel);\n  border: 0;\n  border-bottom: 1px solid var(--border-subtle);\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.editor__title {\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n  letter-spacing: -0.02em;\n  min-height: var(--control-height-large);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-transform: none;\n}\n\n.editor__title-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.editor__title-row .editor__title {\n  margin-bottom: 0;\n}\n";
+const emptyStateStyles = ".empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-40) var(--space-0) var(--space-24);\n  min-height: 70dvh;\n  text-align: center;\n  color: var(--text-secondary);\n}\n\n.empty-state__icon { display: block; width: min(100%, 182px); height: auto; margin-bottom: var(--space-16); }\n.empty-state__title { margin: 0; color: var(--text-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-base); }\n.empty-state__shortcuts { width: 100%; margin-top: var(--space-32); padding-top: var(--space-20); text-align: left; }\n.empty-state__shortcut-list { display: grid; gap: var(--space-8); margin: var(--space-0); padding: var(--space-0); list-style: none; }\n.empty-state__shortcut { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: var(--control-height-small); color: var(--text-secondary); }\n.empty-state__shortcut-keys { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-muted); }\n.empty-state__shortcut-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height-small); height: var(--control-height-small); padding: var(--space-0) var(--space-8); border-radius: var(--radius-4); background: var(--surface-raised-2x); color: var(--text-primary); font-family: var(--font-family); font-size: var(--font-size-small); box-shadow: var(--shadow-control); }\n.empty-state__shortcut-keys > span { color: var(--text-muted-subtle); font-size: var(--font-size-small); }\n";
+const styleEditorStyles = "/* Shared chrome for style-editor sections. */\n.layout,\n.spacing,\n.typography,\n.border,\n.property,\n.color {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  background: var(--surface-panel);\n}\n\n.appearance {\n  gap: var(--space-12);\n}\n\n.appearance__fields {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;\n  gap: var(--space-12);\n}\n\n.appearance__field {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.appearance__field-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.appearance__field-label {\n  min-width: 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.25;\n}\n\n.border-radius-editor__main {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.border-radius-editor--embedded {\n  display: contents;\n}\n\n.border-radius-editor--embedded > .border-radius-editor__main {\n  grid-column: 2;\n}\n\n.border-radius-editor--embedded > .border-radius-editor__toggle {\n  grid-column: 3;\n  align-self: end;\n}\n\n.border-radius__grouped-row {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: stretch;\n  gap: var(--space-8);\n}\n\n.border-radius__grouped-row > .control-surface {\n  min-width: 0;\n}\n\n.border-radius-editor__individuals {\n  grid-column: 1 / span 2;\n  min-width: 0;\n}\n\n.opacity-editor__effective {\n  flex: 0 0 auto;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n}\n";
+const borderEditorStyles = ".border__linked-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.border__linked-control {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n.border__linked-control--color {\n  flex: 3 1 0;\n}\n\n.border__linked-control--width {\n  flex: 1 1 0;\n}\n\n.border__linked-row > .popover-listbox,\n.border__linked-row > .toggle-button {\n  flex: 0 0 auto;\n}\n\n.border__linked-row > .popover-listbox {\n  width: auto;\n}\n\n.border__expanded {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.border__expanded-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 26px;\n}\n\n.border__side-rows {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.border__side-row {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: auto minmax(0, 3fr) minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 6px;\n}\n\n.border__side-row > .side-values__side-icon {\n  justify-self: center;\n}\n\n.border__side-control {\n  min-width: 0;\n}\n\n.border__side-row > .popover-listbox {\n  flex: 0 0 auto;\n}\n";
+const typographyStyles = ".typography {\n  gap: var(--space-8);\n}\n\n.typography__field {\n  min-width: 0;\n}\n\n.typography__field-icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--text-muted);\n}\n\n.typography__field > .select {\n  flex: 1 1 auto;\n}\n\n.typography__metrics {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-8);\n}\n\n.typography__field .token-field__leading svg {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n}\n\n.typography__field--font-family .token-field__leading svg {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n}\n\n.typography__alignment {\n  display: grid;\n  grid-template-columns: 1.1fr 1fr;\n  gap: var(--space-8);\n}\n\n.typography__alignment-field {\n  position: relative;\n  min-width: 0;\n}\n";
+const layoutSectionStyles = ".layout__group {\n  margin-top: 4px;\n  padding-top: 10px;\n  border-top: 1px solid var(--border-subtle);\n  background: var(--surface-panel);\n}\n\n.layout__basic {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-12);\n}\n\n.layout__tool-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control-height-large);\n  gap: var(--space-8);\n  align-items: end;\n}\n\n.layout__tool-row .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-4);\n  min-width: 0;\n  min-height: 0;\n}\n\n\n.layout__tool-row .field-row__control {\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__size {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__size-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;\n  grid-template-areas:\n    \"width height toggle\"\n    \"min-width min-height .\"\n    \"max-width max-height .\"\n    \"aspect-ratio . .\";\n  gap: 6px;\n  align-items: end;\n}\n\n.layout__size[data-expanded=\"false\"] .layout__size-grid {\n  grid-template-areas: \"width height toggle\";\n}\n\n.layout__size-cell {\n  min-width: 0;\n}\n\n.layout__size-cell--width { grid-area: width; }\n.layout__size-cell--height { grid-area: height; }\n.layout__size-cell--toggle { grid-area: toggle; }\n.layout__size-cell--min-width { grid-area: min-width; }\n.layout__size-cell--min-height { grid-area: min-height; }\n.layout__size-cell--max-width { grid-area: max-width; }\n.layout__size-cell--max-height { grid-area: max-height; }\n.layout__size-cell--aspect-ratio { grid-area: aspect-ratio; }\n\n.layout__size-grid .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-4);\n  min-width: 0;\n  min-height: 0;\n}\n\n\n.layout__size-grid .field-row__control,\n.layout__size-grid .token-field {\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__size-grid .layout-combo,\n.layout__aspect-ratio-control {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 4px;\n  align-items: center;\n}\n\n.layout__size-grid .layout-combo__custom {\n  min-width: 0;\n}\n\n.layout__aspect-ratio-control .text-input {\n  min-width: 0;\n}\n\n\n.layout__grid {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__grid-primary {\n  display: grid;\n  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);\n  gap: 10px;\n  align-items: start;\n}\n\n.layout__grid-picker-column,\n.layout__grid-gap {\n  min-width: 0;\n}\n\n.layout__grid-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n}\n\n.layout__grid-gap-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__grid-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__grid-fields .field-row,\n.layout__grid-child .field-row {\n  min-width: 0;\n}\n\n.layout__grid-child {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__grid-child-fields {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  grid-template-areas:\n    \"column row\"\n    \"vertical horizontal\";\n  gap: 6px;\n}\n\n.layout__grid-child-fields .field-row,\n.layout__grid-child-fields .control-surface,\n.layout__grid-child-fields .segmented-control {\n  min-width: 0;\n}\n\n.layout__grid-child-placement--column { grid-area: column; }\n.layout__grid-child-placement--row { grid-area: row; }\n.layout__grid-child-alignment--h { grid-area: horizontal; }\n.layout__grid-child-alignment--v { grid-area: vertical; }\n\n.layout__grid-child-placement .control-surface,\n.layout__grid-child-alignment-control {\n  width: 100%;\n}\n\n.layout__grid-child-placement-icon {\n  flex: 0 0 var(--icon-size-small);\n  color: var(--text-secondary);\n}\n\n.layout__grid-child-align-icon--horizontal {\n  transform: rotate(90deg);\n}\n\n.layout__grid-alignment {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 6px;\n}\n\n.layout__grid-advanced {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n}\n\n\n.layout__grid-value {\n  min-width: 0;\n}\n\n.layout__flex-toolbar {\n  display: block;\n}\n\n.layout__direction-tools {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto auto;\n  gap: 4px;\n  min-width: 0;\n}\n\n.layout__alignment-grid {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, minmax(0, 1fr));\n  gap: 2px;\n  padding: 5px;\n  overflow: hidden;\n  background: var(--surface-control);\n  border-radius: var(--radius-control);\n  isolation: isolate;\n}\n\n.layout__alignment-button {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  min-height: 8px;\n  border-radius: 5px;\n}\n\n.layout__alignment-button span {\n  width: 3px;\n  height: 3px;\n  background: var(--text-muted-subtle);\n  border-radius: 50%;\n}\n\n.layout__alignment-button[data-active=\"true\"] span {\n  width: 14px;\n  height: 2px;\n  background: var(--accent);\n  border-radius: var(--radius-pill);\n  box-shadow: 0 -4px 0 var(--accent), 0 4px 0 var(--accent);\n}\n\n.layout__distribution-preview {\n  position: absolute;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  pointer-events: none;\n}\n\n.layout__distribution-preview span {\n  width: 14px;\n  height: 2px;\n  border-radius: var(--radius-pill);\n  background: var(--accent);\n}\n\n/* Match the centers of the 32px controls in the padded 3x3 grid. */\n.layout__alignment-grid[data-direction=\"row\"] .layout__distribution-preview {\n  top: calc((100% - 14px) / 3 + 22px);\n  right: calc((100% - 14px) / 6 - 2px);\n  left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-start\"] .layout__distribution-preview {\n  top: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-end\"] .layout__distribution-preview {\n  top: auto;\n  bottom: calc((100% - 14px) / 3 - 12px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-justify=\"space-around\"] .layout__distribution-preview {\n  right: 20px;\n  left: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"column\"] .layout__distribution-preview {\n  top: 20px;\n  bottom: calc((100% - 14px) / 3 - 12px);\n  left: calc(50% - 7px);\n  flex-direction: column;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-start\"] .layout__distribution-preview {\n  left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-end\"] .layout__distribution-preview {\n  right: calc((100% - 14px) / 6 - 2px);\n  left: auto;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-justify=\"space-around\"] .layout__distribution-preview {\n  top: 20px;\n  bottom: 20px;\n}\n\n.layout__alignment-grid[data-justify=\"space-around\"] .layout__distribution-preview {\n  justify-content: space-around;\n}\n\n.layout__alignment-grid[data-justify=\"space-evenly\"] .layout__distribution-preview {\n  justify-content: space-evenly;\n}\n\n.layout__flex-lower {\n  display: grid;\n  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);\n  gap: 12px;\n  align-items: start;\n  margin-top: 8px;\n}\n\n.layout__flex-lower .layout__alignment-grid {\n  width: min(100%, 120px);\n  aspect-ratio: 1;\n  grid-template-rows: repeat(3, minmax(0, 1fr));\n  justify-self: start;\n}\n\n.layout__flex-lower .layout__alignment-button {\n  min-height: 0;\n}\n\n.layout__gap-column {\n  min-width: 0;\n}\n\n.layout__gap-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__spacing-primary {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n  gap: 5px;\n  align-items: center;\n  min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo {\n  min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo,\n.layout__spacing-primary .text-input {\n  width: 100%;\n}\n\n.layout__distribution-control {\n  width: var(--control-height-large);\n}\n\n.layout__spacing-field {\n  color: var(--text-muted);\n}\n\n.layout__spacing-icon {\n  display: inline-flex;\n  flex: 0 0 var(--icon-size-small);\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  color: var(--text-secondary);\n}\n\n.layout__spacing-field .layout-combo {\n  flex: 1 1 auto;\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__flex-child-fields {\n  display: grid;\n  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;\n  gap: 5px;\n  align-items: start;\n}\n\n.layout__flex-child-fields > .icon-button {\n  align-self: end;\n  justify-self: end;\n}\n\n.layout__flex-child-fields > .field-row {\n  min-width: 0;\n}\n\n.layout__flex-child-fields .field-row,\n.layout__flex-child-field {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 4px;\n  min-width: 0;\n  min-height: 0;\n}\n\n.layout__flex-child-fields .field-row__label {\n  color: var(--text-secondary);\n}\n\n.layout__flex-child-fields .field-row__control,\n.layout__flex-child-fields .layout-combo {\n  width: 100%;\n  min-width: 0;\n}\n\n.layout__flex-child-settings {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.layout__flex-child-settings-title {\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.layout__flex-child-settings .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 4px;\n  min-height: 0;\n}\n\n.layout__flex-child-settings .field-row__label {\n  color: var(--text-secondary);\n}\n\n.layout__flex-child-settings .field-row__control,\n.layout__flex-child-settings .layout-combo {\n  width: 100%;\n  min-width: 0;\n}\n";
+const gridPickerStyles = ".grid-picker {\n  position: relative;\n  min-width: 0;\n}\n\n.grid-picker__trigger {\n  display: block;\n  width: 100%;\n  padding: 4px;\n  appearance: none;\n  border: none;\n  border-radius: 9px;\n  background: var(--surface-control);\n  color: var(--text-primary);\n  cursor: pointer;\n}\n\n.grid-picker__trigger:hover {\n  border-color: var(--accent);\n  background: var(--surface-control-hover);\n}\n\n.grid-picker__trigger:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.grid-picker__preview {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-picker-columns), minmax(0, 1fr));\n  grid-template-rows: repeat(var(--grid-picker-rows), minmax(0, 1fr));\n  gap: 3px;\n  min-height: 88px;\n  padding: 1px;\n}\n\n.grid-picker__preview-cell {\n  min-width: 0;\n  min-height: 0;\n  border: 1px solid var(--border-subtle);\n  border-radius: 4px;\n  background: var(--surface-raised);\n}\n\n.grid-picker__preview-label {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n  letter-spacing: -0.04em;\n  pointer-events: none;\n}\n\n.grid-picker__popover {\n  position: fixed;\n  z-index: 3;\n  top: 0;\n  left: 0;\n  transform: translateX(-50%);\n  visibility: hidden;\n  width: 360px;\n  padding: var(--space-4);\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n}\n\n.grid-picker__cell-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--grid-picker-columns), minmax(24px, 1fr));\n  grid-template-rows: repeat(var(--grid-picker-rows), minmax(24px, 1fr));\n  gap: 4px;\n}\n\n.grid-picker__cell {\n  min-width: 24px;\n  min-height: 24px;\n  padding: 0;\n  appearance: none;\n  border: 0;\n  border-radius: var(--radius-4);\n  background: var(--surface-control);\n  cursor: pointer;\n  transition: background-color 100ms ease, box-shadow 100ms ease;\n}\n\n.grid-picker__cell:hover,\n.grid-picker__cell:focus-visible,\n.grid-picker__cell--active {\n  background: var(--accent-surface);\n  box-shadow: inset 0 0 0 1px var(--accent);\n}\n\n.grid-picker__cell:focus-visible {\n  outline: 0;\n}\n\n.grid-picker__popover-value {\n  margin-top: 9px;\n  color: var(--text-primary);\n  font-size: 13px;\n  font-weight: 700;\n  text-align: center;\n}\n";
+const layoutComboFieldStyles = ".layout-combo {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.layout-combo__custom {\n  display: flex;\n}\n\n.layout-combo > .token-field {\n  width: 100%;\n}\n\n.layout-combo--blocked > .select:disabled,\n.layout-combo--blocked > .text-input:disabled,\n.layout-combo--blocked .layout-combo__custom > .text-input:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.layout-combo--blocked > .token-field {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.layout-combo-blocked {\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--control-height-large) / 2);\n  right: 8px;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: var(--warning, #b45309);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n  cursor: help;\n}\n\n.layout-combo-blocked:focus-visible {\n  outline: 0;\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.layout-combo-blocked__symbol {\n  display: block;\n  line-height: 1;\n}\n";
+const tokenChipStyles = ".token-chip {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  background: var(--surface-raised-2x);\n  margin-right: -6px;\n  align-self: stretch;\n  padding-left: var(--space-8);\n  border-radius: calc(var(--radius-control) - 2px);\n}\n\n.token-chip:has(.token-color-control) {\n  padding-left: 0;\n}\n\n.token-chip > .popover-listbox,\n.token-chip__trigger,\n.token-chip__picker {\n  flex: 1;\n  height: 100%;\n  min-width: 0;\n}\n\n.token-chip--small {\n  flex: 0 1 auto;\n}\n\n.token-chip--small > .popover-listbox {\n  width: auto;\n  flex: 0 1 auto;\n}\n\n.token-chip__trigger {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-control);\n  outline: 0;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n\n.token-chip__trigger:focus-visible {\n  box-shadow: var(--token-chip-focus-ring, inset 0 0 0 2px var(--accent));\n}\n\n.token-chip--small .token-chip__trigger {\n  width: auto;\n}\n\n.token-chip__picker {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  min-width: 0;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n}\n\n.token-chip--small .token-chip__picker {\n  display: inline-flex;\n  width: auto;\n  gap: 3px;\n}\n\n.token-chip__label {\n  min-width: 0;\n  flex: 1;\n  text-align: left;\n}\n\n/* Keep the content inside the existing label box. */\n.token-label {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.token-label__content {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: inherit;\n}\n\n.token-chip__picker svg {\n  flex-shrink: 0;\n}\n\n.token-chip__action {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  right: 2px;\n  display: inline-flex;\n  align-items: center;\n  background: var(--surface-raised-2x);\n  transform: translateY(-50%);\n  opacity: 0;\n}\n\n.token-chip:hover > .token-chip__action,\n.token-chip:focus-within > .token-chip__action {\n  opacity: 1;\n}\n\n.token-chip--small > .token-chip__action {\n  position: relative;\n  top: auto;\n  right: auto;\n  flex: 0 0 auto;\n  margin-left: 2px;\n  transform: none;\n}\n";
+const tokenFieldStyles = ".token-field {\n  display: flex;\n  flex: 1 1 auto;\n  align-self: stretch;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n\n.token-field__leading,\n.token-field__trailing {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--text-muted);\n}\n\n.token-field__leading {\n  justify-content: center;\n}\n\n.token-field__trailing {\n  justify-content: flex-end;\n}\n\n.token-field > .popover-listbox,\n.token-field > .select {\n  flex: 1;\n  min-width: 0;\n}\n\n.token-opacity-input {\n  align-self: stretch;\n  flex: 0 0 44px;\n  width: 44px;\n  min-width: 0;\n  padding: 0 2px 0 8px;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  color: var(--text-muted);\n  font: inherit;\n  text-align: right;\n}\n\n.token-opacity-input:focus {\n  color: var(--text-primary);\n}\n\n.token-color-control {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.token-field--color .token-color-control {\n  align-self: stretch;\n  /* Keep the 28px color slot while centering the 16px swatch in it. */\n  padding: 4px 6px;\n}\n\n.token-field--color {\n  --token-chip-focus-ring: none;\n}\n\n.token-color-control[data-resolved=\"false\"] .color-swatch {\n  background: repeating-conic-gradient(#d8d8d8 0 25%, #ffffff 0 50%) 50% / 8px 8px;\n}\n\n.token-color-control__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.token-color-control__input:disabled {\n  cursor: not-allowed;\n}\n";
+const tokenDropdownStyles = ".token-dropdown,\n.token-promote {\n  display: block;\n  min-width: 0;\n}\n";
+const tokensPanelStyles = ".tokens-panel {\n  padding: 14px 0 0;\n}\n\n.tokens-panel__tools {\n  display: block;\n  padding-bottom: 14px;\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.token-group {\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.token-group__heading {\n  display: flex;\n  justify-content: space-between;\n  padding: 14px 0 8px;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.token-row {\n  padding: 10px 0 12px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.token-group__heading + .token-row {\n  border-top: 0;\n}\n\n.token-row__inline {\n  display: grid;\n  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);\n  gap: 8px;\n  align-items: center;\n}\n\n.token-row__name {\n  min-width: 0;\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.token-variants {\n  margin-top: 8px;\n}\n\n.token-variants summary {\n  color: var(--text-primary);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: var(--font-weight-label);\n  user-select: none;\n}\n\n.token-variants__list {\n  margin-top: 7px;\n  padding-left: 10px;\n  border-left: 1px solid var(--border-subtle);\n}\n\n.token-variant {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 2px 8px;\n  padding: 5px 0;\n  color: var(--text-muted);\n  font-size: 10px;\n}\n\n.token-variant__context {\n  color: var(--text-secondary);\n}\n\n.token-variant > span:last-child {\n  grid-column: 1 / -1;\n  color: var(--text-muted-subtle);\n}\n\n.tokens-panel__empty {\n  padding: 24px 0;\n  color: var(--text-muted);\n  text-align: center;\n}\n";
+const changesLogStyles = ".changes {\n  margin-top: 0;\n  border-top: 0;\n  padding-top: 24px;\n}\n\n.changes__title {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  width: 100%;\n  padding: 10px 0;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: 700;\n  cursor: pointer;\n  list-style: none;\n}\n\n.changes__title::-webkit-details-marker {\n  display: none;\n}\n\n.changes__title-label {\n  flex: 1;\n}\n\n.changes__count {\n  min-width: 20px;\n  padding: 2px 6px;\n  border-radius: var(--radius-pill);\n  background: var(--surface-control);\n  color: var(--text-muted);\n  font-size: 11px;\n  font-weight: 650;\n  line-height: 1.2;\n  text-align: center;\n}\n\n.changes__toggle-icon {\n  color: var(--text-muted);\n  transition: transform 120ms ease;\n}\n\n.changes[open] .changes__toggle-icon {\n  transform: rotate(180deg);\n}\n\n.changes__content {\n  padding-bottom: 4px;\n}\n\n.changes__session-action {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 0 20px;\n}\n\n.changes__session-action .button {\n  width: 100%;\n}\n\n.changes__group {\n  margin-bottom: 12px;\n  padding: 12px;\n  background: var(--surface-control);\n  border: 0;\n  border-radius: 12px;\n}\n\n.changes__group-title {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 8px;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: 650;\n}\n\n.changes__group-file {\n  color: var(--text-muted);\n  font-weight: 400;\n  word-break: break-all;\n}\n\n.changes__row {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 5px;\n  padding: 4px 0;\n  font-size: var(--font-size-base);\n}\n\n.changes__row + .changes__row {\n  margin-top: 8px;\n  padding-top: 12px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.changes__prop,\n.changes__before,\n.changes__after {\n  word-break: break-all;\n}\n\n.changes__prop {\n  color: var(--text-primary);\n}\n\n.changes__before,\n.changes__arrow {\n  color: var(--text-muted);\n}\n\n.changes__value {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  width: 100%;\n  line-height: 1.4;\n}\n\n.changes__after {\n  color: var(--accent);\n}\n\n.changes__conflict {\n  color: var(--warning-text);\n  font-size: var(--font-size-base);\n}\n\n.changes__source-site,\n.changes__scope,\n.changes__diagnostic {\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n}\n\n.changes__diagnostic[data-status=\"overridden\"] {\n  color: var(--warning-text);\n}\n\n.changes__diagnostic[data-status=\"applied\"] {\n  color: var(--accent);\n}\n\n.changes__revert {\n  margin-top: 2px;\n}\n\n.panel__copy[data-copied=\"true\"] {\n  background: #2eaf67;\n  color: #ffffff;\n}\n";
+const inspectorOverlayStyles = ".hover-outline,\n.selected-outline {\n  position: fixed;\n  pointer-events: none;\n  outline-offset: -2px;\n}\n\n.measurement-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 0;\n  overflow: visible;\n  pointer-events: none;\n}\n\n.alignment-guide {\n  stroke: rgb(59 130 246 / 46%);\n  stroke-dasharray: 3 4;\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n\n.measurement-ruler {\n  stroke: #ef4444;\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n\n.measurement-projection {\n  stroke: #ef4444;\n  stroke-dasharray: 4 4;\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n\n.measurement-label {\n  fill: #fff;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.measurement-label-chip {\n  fill: #ef4444;\n}\n\n.dom-drop-line {\n  z-index: 4;\n  height: 3px;\n  margin-top: -1px;\n  border-radius: 999px;\n  background: #3b82f6;\n  box-shadow: 0 0 0 1px rgb(255 255 255 / 80%);\n}\n\n.dom-drop-target {\n  z-index: 3;\n  box-sizing: border-box;\n  border: 1px solid rgb(59 130 246 / 72%);\n  border-radius: 4px;\n  background: rgb(59 130 246 / 5%);\n}\n\n.hover-outline {\n  outline: 2px solid var(--accent);\n}\n\n.selected-outline {\n  outline: 2px solid var(--accent);\n}\n\n.hover-margin-fill {\n  background: rgb(59 130 246 / 14%);\n}\n\n.hover-margin {\n  border-color: rgb(59 130 246 / 52%);\n  border-style: dotted;\n  border-width: 0;\n  opacity: 0.72;\n}\n\n.hover-margin[data-axis=\"horizontal\"] {\n  border-top-width: 1px;\n}\n\n.hover-margin[data-axis=\"vertical\"] {\n  border-left-width: 1px;\n}\n";
+const domNavigationStyles = ".dom-navigation {\n  display: grid;\n  gap: var(--space-8);\n  padding: var(--space-12) 0;\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.dom-navigation__header,\n.dom-navigation__group {\n  display: grid;\n  gap: var(--space-4);\n}\n\n.dom-navigation__header {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.dom-navigation__title,\n.dom-navigation__label {\n  color: var(--text-muted-subtle);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.dom-navigation__items {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n\n.dom-navigation__item {\n  min-width: 0;\n  justify-content: flex-start;\n}\n\n.dom-navigation__value {\n  overflow: hidden;\n  color: var(--text-primary);\n  font-weight: var(--font-weight-base);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+const promptSettingsStyles = ".prompt-settings__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 40;\n  background: rgb(0 0 0 / 20%);\n  pointer-events: auto;\n}\n\n.prompt-settings__popup {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 41;\n  width: min(440px, calc(100vw - 32px));\n  max-height: calc(100dvh - 32px);\n  overflow-y: auto;\n  padding: var(--space-20);\n  transform: translate(-50%, -50%);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-16);\n  outline: 0;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  pointer-events: auto;\n}\n\n.prompt-settings__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-12);\n}\n\n.prompt-settings__title {\n  margin: 0;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.prompt-settings__close.icon-button {\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  margin: calc(var(--space-4) * -1);\n}\n\n.prompt-settings__description {\n  margin: var(--space-8) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.45;\n}\n\n.prompt-settings__field {\n  display: grid;\n  margin-top: var(--space-20);\n}\n\n.prompt-settings__textarea {\n  width: 100%;\n  min-height: 136px;\n  padding: var(--space-8) var(--space-12);\n  resize: vertical;\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-control);\n  outline: 0;\n  background: var(--surface-control);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  line-height: 1.5;\n}\n\n.prompt-settings__textarea:hover:not(:focus),\n.prompt-settings__textarea:focus-visible {\n  background: var(--surface-control-hover);\n}\n\n.prompt-settings__textarea:focus-visible {\n  border-color: var(--accent);\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n\n.prompt-settings__actions {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: var(--space-20);\n}\n";
+const mcpConnectionStyles = ".mcp-connection__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 40;\n  background: rgb(0 0 0 / 20%);\n  pointer-events: auto;\n}\n\n.mcp-connection__popup {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 41;\n  display: grid;\n  gap: var(--space-16);\n  width: min(560px, calc(100vw - 32px));\n  max-height: calc(100dvh - 32px);\n  overflow-y: auto;\n  padding: var(--space-20);\n  transform: translate(-50%, -50%);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-16);\n  outline: 0;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  pointer-events: auto;\n}\n\n.mcp-connection__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-12);\n}\n\n.mcp-connection__title {\n  margin: 0;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__description,\n.mcp-connection__copy,\n.mcp-connection__error {\n  margin: var(--space-8) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.45;\n}\n\n.mcp-connection__close.icon-button {\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  margin: calc(var(--space-4) * -1);\n}\n\n.mcp-connection__status {\n  display: grid;\n  gap: var(--space-4);\n}\n\n.mcp-connection__status-label {\n  color: inherit;\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__status-detail {\n  overflow-wrap: anywhere;\n}\n\n.mcp-connection__diagnostics {\n  display: grid;\n  gap: var(--space-8);\n  margin: 0;\n  padding: var(--space-12);\n  border-radius: var(--radius-control);\n  background: var(--surface-control);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.mcp-connection__diagnostic {\n  display: grid;\n  grid-template-columns: 92px minmax(0, 1fr);\n  gap: var(--space-12);\n  align-items: baseline;\n}\n\n.mcp-connection__diagnostic dt {\n  color: var(--text-muted-subtle);\n}\n\n.mcp-connection__diagnostic dd {\n  min-width: 0;\n  margin: 0;\n  overflow-wrap: anywhere;\n  color: var(--text-primary);\n}\n\n.mcp-connection__diagnostic code,\n.mcp-connection__copy code {\n  font-family: var(--font-mono);\n}\n\n.mcp-connection__timeline {\n  display: grid;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.mcp-connection__timeline-step {\n  position: relative;\n  display: grid;\n  grid-template-columns: var(--control-height-small) minmax(0, 1fr);\n  gap: var(--space-12);\n  padding-bottom: var(--space-32);\n}\n\n.mcp-connection__timeline-step:last-child {\n  padding-bottom: 0;\n}\n\n.mcp-connection__timeline-step:not(:last-child)::before {\n  position: absolute;\n  top: var(--control-height-small);\n  bottom: 0;\n  left: calc(var(--control-height-small) / 2 - 0.5px);\n  width: 1px;\n  background: var(--border-subtle);\n  content: \"\";\n}\n\n.mcp-connection__timeline-marker {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  border: 1px solid var(--border-medium);\n  border-radius: var(--radius-pill);\n  background: var(--surface-raised-2x);\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__timeline-step--complete .mcp-connection__timeline-marker {\n  border-color: var(--accent);\n  background: var(--accent);\n  color: var(--surface-raised-2x);\n}\n\n.mcp-connection__timeline-content {\n  display: grid;\n  min-width: 0;\n  gap: var(--space-8);\n}\n\n.mcp-connection__section-title {\n  margin: 0;\n  display: flex;\n  min-height: var(--control-height-small);\n  align-items: center;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__timeline-content .mcp-connection__copy {\n  margin-top: 0;\n}\n\n.mcp-connection__command {\n  max-width: 100%;\n  margin: 0;\n  padding: var(--space-12);\n  overflow-x: auto;\n  border-radius: var(--radius-control);\n  background: var(--surface-control);\n  color: var(--text-primary);\n  font-family: var(--font-mono);\n  font-size: var(--font-size-base);\n  line-height: 1.5;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n.mcp-connection__command-actions {\n  display: flex;\n  justify-content: flex-start;\n}\n\n.mcp-connection__error {\n  margin-top: 0;\n  color: var(--danger-text);\n  font-size: var(--font-size-small);\n}\n\n.mcp-connection__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  gap: var(--space-8);\n  padding-top: var(--space-4);\n}\n\n.mcp-connection__docs {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n  margin-top: 64px;\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  text-decoration: none;\n}\n\n.mcp-connection__docs:hover,\n.mcp-connection__docs:focus-visible {\n  color: var(--text-primary);\n  text-decoration: underline;\n}\n\n.mcp-connection__docs:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n";
+const settingsStyles = ".settings__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 40;\n  background: rgb(0 0 0 / 20%);\n  pointer-events: auto;\n}\n\n.settings__popup {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 41;\n  display: flex;\n  flex-direction: column;\n  width: min(760px, calc(100vw - 32px));\n  height: 70dvh;\n  max-height: calc(100dvh - 32px);\n  overflow: hidden;\n  transform: translate(-50%, -50%);\n  border-radius: var(--radius-16);\n  outline: 0;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  pointer-events: auto;\n}\n\n.settings__section-description {\n  margin: var(--space-4) 0 0;\n  color: var(--text-secondary);\n  font-size: 14px;\n  font-weight: var(--font-weight-base);\n  line-height: 1.45;\n}\n\n.settings__close.icon-button {\n  position: absolute;\n  top: var(--space-12);\n  right: var(--space-12);\n  z-index: 1;\n  width: var(--control-height-small);\n  height: var(--control-height-small);\n  margin: 0;\n}\n\n.settings__visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.settings__body {\n  display: grid;\n  grid-template-columns: 184px minmax(0, 1fr);\n  min-height: 0;\n  flex: 1 1 auto;\n}\n\n.settings__nav {\n  min-width: 0;\n  padding: var(--space-16) var(--space-8);\n  border-right: 1px solid var(--border-subtle);\n  background: var(--surface-panel);\n}\n\n.settings__nav-label {\n  display: block;\n  padding: 0 var(--space-8) var(--space-8);\n  color: var(--text-muted-subtle);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-label);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.settings__nav-items {\n  display: grid;\n  gap: var(--space-4);\n}\n\n.settings__nav-item {\n  appearance: none;\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  width: 100%;\n  min-height: var(--control-height-large);\n  padding: var(--space-8);\n  border: 0;\n  border-radius: var(--radius-control);\n  background: transparent;\n  color: var(--text-secondary);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  line-height: 1.35;\n  text-align: left;\n}\n\n.settings__nav-item:hover,\n.settings__nav-item:focus-visible {\n  background: var(--surface-well);\n  color: var(--text-primary);\n}\n\n.settings__nav-item:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.settings__nav-item--active {\n  background: var(--surface-well);\n  color: var(--text-primary);\n  font-weight: var(--font-weight-label);\n}\n\n.settings__nav-item > svg {\n  flex: 0 0 auto;\n}\n\n.settings__nav-item-label {\n  min-width: 0;\n}\n\n.settings__content {\n  min-width: 0;\n  overflow-y: auto;\n  padding: var(--space-20);\n}\n\n.settings__section {\n  min-width: 0;\n}\n\n.settings__section-title {\n  margin: 0;\n  color: var(--text-primary);\n  font-size: 14px;\n  font-weight: var(--font-weight-label);\n}\n\n.settings__section > .prompt-settings__field,\n.settings__section > .tokens-panel,\n.settings__section > [data-test=\"mcp-connection-dialog\"] {\n  margin-top: var(--space-20);\n}\n\n.settings__section > [data-test=\"mcp-connection-dialog\"] {\n  min-width: 0;\n  display: grid;\n  gap: var(--space-16);\n}\n\n@media (max-width: 560px) {\n  .settings__body {\n    display: block;\n    overflow-y: auto;\n  }\n\n  .settings__nav {\n    overflow-x: auto;\n    padding: var(--space-8);\n    border-right: 0;\n    border-bottom: 1px solid var(--border-subtle);\n  }\n\n  .settings__nav-label {\n    display: none;\n  }\n\n  .settings__nav-items {\n    display: flex;\n    min-width: max-content;\n  }\n\n  .settings__nav-item {\n    width: auto;\n  }\n\n  .settings__content {\n    overflow: visible;\n  }\n}\n";
+export const UI_STYLES = [
+    foundationStyles,
+    controlSurfaceStyles,
+    atRuleContextStyles,
+    fieldRowStyles,
+    textInputStyles,
+    selectStyles,
+    buttonStyles,
+    toggleButtonStyles,
+    segmentedControlStyles,
+    iconButtonStyles,
+    statusCalloutStyles,
+    colorSwatchStyles,
+    popoverListboxStyles,
+    inspectorPopoverStyles,
+    sideValuesFieldStyles,
+    inspectorShellStyles,
+    emptyStateStyles,
+    styleEditorStyles,
+    borderEditorStyles,
+    typographyStyles,
+    layoutSectionStyles,
+    gridPickerStyles,
+    layoutComboFieldStyles,
+    tokenChipStyles,
+    tokenFieldStyles,
+    tokenDropdownStyles,
+    tokensPanelStyles,
+    changesLogStyles,
+    inspectorOverlayStyles,
+    domNavigationStyles,
+    promptSettingsStyles,
+    mcpConnectionStyles,
+    settingsStyles,
+].join("\n");

package/dist/inspector/virtual-modules.d.ts

@@ -0,0 +1,7 @@
+/// <reference path="../css/virtual-design-tokens.d.ts" />
+
+declare module "virtual:nudge-ui-components" {
+  import type { ComponentContract } from "./componentSemantics/types.js";
+  export const componentContracts: ComponentContract[];
+  export default componentContracts;
+}

package/dist/inspector/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+/** The inspector runs under Vite in development but does not depend on Vite at runtime. */
+interface ImportMetaEnv {
+  readonly DEV: boolean;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}