nudge-ui 0.2.0 → 0.2.1

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

@@ -0,0 +1,18 @@
+import type { TokenDefinition, TokenEntry, TokenTable } from "../../css/model/index.js";
+export declare function buildTokenTable(entries: readonly TokenEntry[]): TokenTable;
+export declare function getTokenTable(): TokenTable;
+/**
+ * The build-time catalog is intentionally an inventory of every project token.
+ * Element edits must instead use only custom properties resolved in that
+ * element's cascade; a token defined by a lazy stylesheet is not usable until
+ * that stylesheet is attached to the document. Entries are cached per element
+ * until the element or stylesheet revision changes; the derived table reuses
+ * `buildTokenTable`'s input-identity memo.
+ */
+export declare function getAvailableTokenEntriesForElement(el: HTMLElement, definitions?: readonly TokenDefinition[]): TokenEntry[];
+/**
+ * Produces the page catalog used by the global Tokens settings section. When
+ * the document exposes mappable source identities, declarations from unloaded
+ * CSS files are removed. Opaque compiled URLs leave the adapter catalog intact.
+ */
+export declare function getAvailableTokenCatalog(root?: HTMLElement, definitions?: readonly TokenDefinition[]): TokenDefinition[];

package/dist/inspector/tokens/tokenAvailability.js

@@ -0,0 +1,204 @@
+import { interpretValue } from "../../css/value-semantics/index.js";
+import { getElementComputedStyle } from "../runtime/domRealm.js";
+import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
+import { createInspectorValueContext } from "./valueSemanticsAdapter.js";
+import { collectRules as collectCssomRules, documentRevisions as getDocumentRevisions, registerResolutionLineage, } from "./resolution/cssomCollector.js";
+const tokenTableMemo = new WeakMap();
+export function buildTokenTable(entries) {
+    const cached = tokenTableMemo.get(entries);
+    if (cached)
+        return cached;
+    const table = {};
+    for (const entry of entries) {
+        table[entry.name] = entry;
+        if (entry.cssName)
+            table[entry.cssName] = entry;
+    }
+    tokenTableMemo.set(entries, table);
+    return table;
+}
+let tableCache = null;
+let tableSource = null;
+export function getTokenTable() {
+    const { tokens } = getNudgeUiRuntimeConfig();
+    if (tableCache !== null && tableSource === tokens)
+        return tableCache;
+    tableCache = buildTokenTable(tokens);
+    tableSource = tokens;
+    return tableCache;
+}
+function isCustomPropertyToken(definition) {
+    return definition.cssName.startsWith("--");
+}
+function entryFromDefinition(definition, value) {
+    return {
+        name: definition.name,
+        cssName: definition.cssName,
+        value,
+        source: definition.declarations[0]?.source ?? "",
+        cssValue: definition.cssValue,
+        adapter: definition.adapter,
+        origin: definition.origin,
+        editable: definition.editable,
+    };
+}
+const tokenEntriesCache = new WeakMap();
+/**
+ * The build-time catalog is intentionally an inventory of every project token.
+ * Element edits must instead use only custom properties resolved in that
+ * element's cascade; a token defined by a lazy stylesheet is not usable until
+ * that stylesheet is attached to the document. Entries are cached per element
+ * until the element or stylesheet revision changes; the derived table reuses
+ * `buildTokenTable`'s input-identity memo.
+ */
+export function getAvailableTokenEntriesForElement(el, definitions = getNudgeUiRuntimeConfig().tokenCatalog) {
+    const revisions = getDocumentRevisions(el.ownerDocument ?? document);
+    const cached = tokenEntriesCache.get(el);
+    if (cached && cached.elementRevision === revisions.element
+        && cached.stylesheetRevision === revisions.stylesheet
+        && cached.definitions === definitions) {
+        return cached.entries;
+    }
+    registerResolutionLineage(el);
+    const computed = getElementComputedStyle(el);
+    const available = definitions.flatMap((definition) => {
+        if (!isCustomPropertyToken(definition)) {
+            // Literal adapters (for example Tailwind v3) do not have a browser
+            // custom property to probe. Their adapter owns their availability.
+            return [entryFromDefinition(definition, definition.declarations[0]?.value ?? "")];
+        }
+        const value = computed.getPropertyValue(definition.cssName).trim();
+        return value ? [entryFromDefinition(definition, value)] : [];
+    });
+    const intermediateTable = buildTokenTable(available);
+    const entries = available.map((entry) => ({
+        ...entry,
+        value: interpretValue("--nudge-ui-token", entry.value, createInspectorValueContext(intermediateTable))[0].resolvedValue,
+    }));
+    tokenEntriesCache.set(el, {
+        elementRevision: revisions.element,
+        stylesheetRevision: revisions.stylesheet,
+        definitions,
+        entries,
+    });
+    return entries;
+}
+/**
+ * Replaces build-time token declaration hints with declarations serialized by
+ * the browser from the stylesheets currently attached to this document.
+ */
+function hydrateTokenCatalogFromCssom(definitions, doc = document) {
+    const needsHydration = (definition) => definition.declarations.length === 0
+        || (definition.adapter === "vanilla-extract" && definition.declarations.every((declaration) => declaration.value.trim() === `var(${definition.cssName})`
+            && !declaration.context.selector
+            && !declaration.context.wrappers?.length));
+    const known = new Set(definitions.filter(needsHydration).map((definition) => definition.cssName));
+    const declarations = new Map();
+    for (const rule of collectCssomRules(doc).rules) {
+        if (rule.source === "#nudge-ui-styles")
+            continue;
+        for (const declaration of rule.declarations) {
+            if (!known.has(declaration.property))
+                continue;
+            const wrappers = [
+                ...(rule.layer ? [{ kind: "layer", params: rule.layer }] : []),
+                ...(rule.atRules ?? []).flatMap((atRule) => atRule.kind === "media" || atRule.kind === "supports"
+                    ? [{ kind: atRule.kind, params: atRule.params }]
+                    : []),
+            ];
+            const list = declarations.get(declaration.property) ?? [];
+            list.push({
+                id: `${declaration.property}\u0000${rule.source ?? "cssom"}\u0000${rule.sourceOrder ?? list.length}`,
+                order: rule.sourceOrder,
+                value: declaration.value,
+                source: rule.source ?? "cssom",
+                important: Boolean(declaration.important),
+                context: {
+                    selector: rule.selectorText,
+                    ...(wrappers.length > 0 ? { wrappers } : {}),
+                },
+            });
+            declarations.set(declaration.property, list);
+        }
+    }
+    return definitions.map((definition) => {
+        if (!needsHydration(definition))
+            return definition;
+        const accepted = declarations.get(definition.cssName);
+        return accepted?.length ? { ...definition, declarations: accepted } : definition;
+    });
+}
+function sourceFile(source) {
+    return source.replace(/:\d+$/, "").split(/[?#]/, 1)[0] ?? source;
+}
+function normalizedPath(value) {
+    return decodeURIComponent(value).replace(/\\/g, "/").replace(/^file:\/\//, "").replace(/\/+$/, "");
+}
+function loadedStylesheetSources(doc) {
+    const sourceIdentityByPath = new Map();
+    for (const node of doc.querySelectorAll('style[data-vite-dev-id], link[rel~="stylesheet"][href]')) {
+        const providesAuthoredIdentity = node.tagName === "STYLE";
+        const source = providesAuthoredIdentity
+            ? node.dataset.viteDevId
+            : node.getAttribute("href");
+        if (!source)
+            continue;
+        const path = normalizedPath(source.split(/[?#]/, 1)[0] ?? source);
+        sourceIdentityByPath.set(path, providesAuthoredIdentity || sourceIdentityByPath.get(path) === true);
+    }
+    return Array.from(sourceIdentityByPath, ([path, providesAuthoredIdentity]) => ({
+        path,
+        providesAuthoredIdentity,
+    }));
+}
+function isLoadedCssSource(source, loadedSources) {
+    const file = sourceFile(source);
+    if (!/\.css$/i.test(file) || loadedSources.length === 0)
+        return true;
+    const normalizedFile = normalizedPath(file);
+    return loadedSources.some((loaded) => loaded === normalizedFile
+        || loaded.endsWith(`/${normalizedFile}`)
+        || normalizedFile.endsWith(`/${loaded}`));
+}
+/**
+ * Returns stylesheet identities only when the browser gave us a complete,
+ * authored-source mapping. A compiled host can expose a mixture of source-like
+ * and opaque CSS URLs; treating the mapped subset as complete would make
+ * declarations behind the opaque URLs look lazy even while their variables are
+ * live in the document.
+ */
+function confidentlyLoadedStylesheetSources(definitions, loadedSources) {
+    const cssSources = definitions.flatMap((definition) => definition.declarations
+        .map((declaration) => declaration.source)
+        .filter((source) => /\.css$/i.test(sourceFile(source))));
+    const known = new Set();
+    for (const loaded of loadedSources) {
+        if (loaded.providesAuthoredIdentity
+            || cssSources.some((source) => isLoadedCssSource(source, [loaded.path]))) {
+            known.add(loaded.path);
+            continue;
+        }
+        // One opaque compiled URL can contain any authored declaration, so the
+        // document does not provide enough evidence to remove unloaded sources.
+        return [];
+    }
+    return [...known];
+}
+/**
+ * Produces the page catalog used by the global Tokens settings section. When
+ * the document exposes mappable source identities, declarations from unloaded
+ * CSS files are removed. Opaque compiled URLs leave the adapter catalog intact.
+ */
+export function getAvailableTokenCatalog(root = document.documentElement, definitions = getNudgeUiRuntimeConfig().tokenCatalog) {
+    const computed = getElementComputedStyle(root);
+    const hydrated = hydrateTokenCatalogFromCssom(definitions, root.ownerDocument ?? document);
+    const loadedSources = confidentlyLoadedStylesheetSources(hydrated, loadedStylesheetSources(root.ownerDocument ?? document));
+    return hydrated.flatMap((definition) => {
+        if (!isCustomPropertyToken(definition))
+            return [definition];
+        if (!computed.getPropertyValue(definition.cssName).trim())
+            return [];
+        const declarations = definition.declarations.filter((declaration) => isLoadedCssSource(declaration.source, loadedSources));
+        return declarations.length > 0 ? [{ ...definition, declarations }] : [];
+    });
+}

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

@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes, ReactElement } from "react";
 export type ButtonVariant = "primary" | "secondary" | "quiet" | "danger" | "disabled";
-export type ButtonSize = "default" | "compact";
+export type ButtonSize = "default" | "compact" | "large";
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: ButtonVariant;
     size?: ButtonSize;

package/dist/inspector/ui/SideValuesField.js

@@ -36,7 +36,7 @@ export function SideValuesField({ label, sides, pairedControls, defaultExpanded
     }
     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 })] })) }));
+            : {}), 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 !== undefined ? 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;
@@ -45,7 +45,7 @@ export function SideControls({ label, sides, layout = "sides", }) {
         .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))) }));
+    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 !== undefined ? icon : _jsx(SideIndicator, { side: side }), _jsx("div", { className: "side-values__control", children: control })] }, side))) }));
 }
 function AxisIndicator({ axis }) {
     const emphasis = axis === "horizontal"

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

@@ -5,5 +5,8 @@ export interface StatusCalloutProps {
     className?: string;
     "data-test"?: string;
     "data-lost"?: string;
+    role?: "status" | "alert";
+    "aria-live"?: "off" | "polite" | "assertive";
+    "aria-atomic"?: "true" | "false";
 }
-export declare function StatusCallout({ children, tone, className, "data-test": dataTest, "data-lost": dataLost }: StatusCalloutProps): ReactElement;
+export declare function StatusCallout({ children, tone, className, "data-test": dataTest, "data-lost": dataLost, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic, }: StatusCalloutProps): ReactElement;

package/dist/inspector/ui/StatusCallout.js

@@ -1,4 +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 }));
+export function StatusCallout({ children, tone = "neutral", className, "data-test": dataTest, "data-lost": dataLost, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic, }) {
+    return (_jsx("div", { className: `status-callout status-callout--${tone}${className ? ` ${className}` : ""}`, "data-test": dataTest, "data-lost": dataLost, role: role, "aria-live": ariaLive, "aria-atomic": ariaAtomic, children: children }));
 }

package/dist/inspector/ui/styles.js

@@ -1,19 +1,20 @@
 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 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: rgba(223, 75, 75, 0.2);\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  --control-height-xlarge: 40px;\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 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-2x);\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  border-radius: var(--radius-4);\n}\n\n.button--large {\n  min-height: var(--control-height-xlarge);\n  padding: 0 var(--space-12);\n}\n\n.button--large svg {\n  width: var(--icon-size-large);\n  height: var(--icon-size-large);\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 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  border-radius: var(--radius-4);\n}\n\n.icon-button--large {\n  width: var(--control-height-xlarge);\n  height: var(--control-height-xlarge);\n}\n\n.icon-button--large svg {\n  width: var(--icon-size-large);\n  height: var(--icon-size-large);\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  border-radius: var(--radius-4);\n}\n\n.toggle-button--large {\n  width: var(--control-height-xlarge);\n  height: var(--control-height-xlarge);\n}\n\n.toggle-button--large svg {\n  width: var(--icon-size-large);\n  height: var(--icon-size-large);\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 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__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  position: relative;\n}\n\n.copy-prompt__agent-listening {\n  position: absolute;\n  top: 50%;\n  right: var(--space-12);\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: rgb(34 197 94);\n  transform: translateY(-50%);\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--centered {\n  text-align: center;\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__sketch-fallback {\n  display: grid;\n  gap: var(--space-8);\n  margin-top: var(--space-8);\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-diagnostic {\n  margin-top: 12px;\n  font-weight: 400;\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 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 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";
@@ -21,16 +22,16 @@ const typographyStyles = ".typography {\n  gap: var(--space-8);\n}\n\n.typograph
 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 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  overflow: hidden;\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__leading--nudge {\n  cursor: ew-resize;\n  touch-action: none;\n  user-select: none;\n}\n\n.token-field__leading--nudge:hover,\n.token-field__leading--nudge[data-dragging=\"true\"] {\n  color: var(--text-primary);\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 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.copy-prompt__change-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 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";
+const sketchStyles = ".sketch-layers {\n  display: grid;\n  gap: var(--space-4);\n  width: 100%;\n  margin-top: var(--space-8);\n}\n\n.sketch-layers__item {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n  min-width: 0;\n}\n\n.sketch-layers__copy {\n  flex: 1 1 auto;\n  position: relative;\n  justify-content: center;\n  min-width: 0;\n  padding-inline: var(--space-12);\n  text-align: center;\n}\n\n.sketch-layers__copy-label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  gap: var(--space-4);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.sketch-layers__name {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sketch-layers__thumbnail {\n  position: absolute;\n  top: 50%;\n  left: var(--space-8);\n  width: 32px;\n  height: 32px;\n  margin: 0;\n  border-radius: var(--radius-control);\n  background: var(--surface-panel);\n  box-shadow: var(--shadow-control);\n  object-fit: cover;\n  transform: translateY(-50%) rotate(-7deg);\n}\n\n.sketch-layers__thumbnail--empty {\n  border: 1px solid var(--border-subtle);\n}\n\n.sketch-layers__hint {\n  margin: var(--space-8) 0 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n}\n\n.sketch-layers__delete {\n  position: absolute;\n  top: var(--space-4);\n  right: var(--space-4);\n  z-index: 1;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 120ms ease;\n}\n\n.sketch-layers__item:hover .sketch-layers__delete,\n.sketch-layers__item:focus-within .sketch-layers__delete {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.sketch-layers__error {\n  flex: 0 0 100%;\n  color: var(--warning-text);\n  font-size: var(--font-size-small);\n  line-height: 1.35;\n}\n\n.sketch__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n  background: rgb(8 12 20 / 52%);\n}\n\n.sketch__editor-backdrop {\n  background: transparent;\n  inset: 0 var(--panel-width) 0 0;\n}\n\n.sketch__live-backdrop {\n  background: transparent;\n  inset: 0 var(--panel-width) 0 0;\n  pointer-events: none;\n}\n\n.sketch__live-backdrop[data-inspector-open=\"false\"] {\n  right: 0;\n}\n\n.sketch__popup {\n  position: fixed;\n  inset: 0 var(--panel-width) 0 0;\n  z-index: 21;\n  width: auto;\n  height: 100dvh;\n  max-height: none;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: #111827;\n  color: var(--text-primary);\n  box-shadow: none;\n  pointer-events: auto;\n}\n\n.sketch__title {\n  margin: 0 36px 4px 0;\n  color: var(--text-primary);\n  font-size: 17px;\n  font-weight: 700;\n}\n\n.sketch__description {\n  max-width: 620px;\n  margin: 0 0 16px;\n  color: var(--text-secondary);\n  font-size: 13px;\n  line-height: 1.45;\n}\n\n.sketch__sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.sketch__live-popup {\n  overflow: visible;\n  background: transparent;\n  pointer-events: none;\n  /* Let the live controls and CanvasToolbar participate in one layer stack. */\n  z-index: auto;\n}\n\n.sketch__live-popup[data-inspector-open=\"false\"] {\n  right: 0;\n}\n\n.sketch__prompt-panel {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: min(400px, calc(100vw - var(--panel-width) - 32px));\n  padding: var(--space-8);\n  border: 0;\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.sketch__live-note-panel {\n  /* Keep the note editor in the workspace viewport, outside the active frame's\n     scaled and clipped coordinate system. */\n  position: fixed;\n  left: calc((100vw - var(--panel-width)) / 2);\n  bottom: calc(var(--control-height-xlarge) + var(--space-20) + var(--space-8) + var(--space-8));\n  width: min(400px, calc(100vw - var(--panel-width) - var(--space-32)));\n  z-index: calc(var(--z-index) - 1);\n  transform: translateX(-50%);\n}\n\n.sketch__live-popup[data-inspector-open=\"false\"] .sketch__live-note-panel {\n  left: 50%;\n  width: min(400px, calc(100vw - var(--space-32)));\n}\n\n.sketch__saved-note-panel {\n  position: fixed;\n  right: calc(var(--panel-width) + 24px);\n  bottom: 24px;\n  z-index: calc(var(--z-index) - 1);\n}\n\n.sketch__prompt-label {\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-label);\n}\n\n.sketch__prompt-input {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  min-height: calc(2 * 1.4em + var(--space-16));\n  resize: none;\n  padding: var(--space-8) calc(var(--control-height-small) + var(--space-48)) var(--space-8) var(--space-8);\n  border: 0;\n  border-radius: var(--radius-control);\n  background: transparent;\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n  outline: 0;\n}\n\n.sketch__prompt-input:focus {\n  box-shadow: none;\n}\n\n.sketch__prompt-input::placeholder {\n  color: var(--text-muted);\n}\n\n.sketch__prompt-footer {\n  position: absolute;\n  inset: auto var(--space-8) var(--space-8);\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  pointer-events: none;\n}\n\n.sketch__prompt-footer .button {\n  pointer-events: auto;\n}\n\n.sketch__prompt-error {\n  min-width: 0;\n  margin-right: auto;\n  max-width: calc(100% - 88px);\n  color: var(--warning-text);\n  font-size: var(--font-size-small);\n  line-height: 1.35;\n  pointer-events: auto;\n}\n\n.sketch__canvas-frame {\n  position: absolute;\n  inset: 0;\n  display: block;\n  max-height: none;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: #111827;\n}\n\n.sketch__image-wrap {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  line-height: 0;\n}\n\n.sketch__image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  max-height: none;\n  object-fit: contain;\n  user-select: none;\n  pointer-events: none;\n}\n\n.sketch__canvas {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  touch-action: none;\n  cursor: crosshair;\n  outline: none;\n  z-index: 1;\n}\n\n.sketch__live-frame {\n  background: transparent;\n  pointer-events: none;\n}\n\n.sketch__canvas:focus-visible {\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.sketch__live-canvas {\n  pointer-events: auto;\n  touch-action: pan-y;\n}\n\n.sketch__canvas--move {\n  cursor: grab;\n  touch-action: none;\n}\n\n.sketch__canvas--move:active {\n  cursor: grabbing;\n}\n\n.sketch__canvas--annotate {\n  cursor: crosshair;\n}\n\n.sketch__annotation-editor {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  width: 280px;\n  padding: var(--space-4);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-control);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.sketch__annotation-editor input {\n  min-width: 0;\n  flex: 1;\n  height: var(--control-height-small);\n  padding: 0 var(--space-8);\n  border: 1px solid var(--border-strong);\n  border-radius: var(--radius-control);\n  background: var(--surface-raised);\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--font-size-base);\n  outline: 0;\n}\n\n.sketch__annotation-editor input:focus {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);\n}\n\n.sketch__annotation-editor input::placeholder {\n  color: var(--text-muted);\n}\n\n.sketch__toolbar,\n.sketch__actions,\n.sketch-change__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n}\n\n.sketch__toolbar {\n  padding: 10px 0;\n}\n\n.sketch__floating-panel {\n  position: absolute;\n  left: 50%;\n  bottom: 20px;\n  z-index: 2;\n  display: grid;\n  gap: 8px;\n  width: max-content;\n  max-width: calc(100% - 32px);\n  max-height: calc(100dvh - 40px);\n  padding: var(--space-4);\n  overflow: auto;\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-popup);\n  transform: translateX(-50%);\n  animation: sketch-toolbar-enter 300ms ease-out both;\n  pointer-events: auto;\n}\n\n@keyframes sketch-toolbar-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(12px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sketch__floating-panel {\n    animation: none;\n  }\n}\n\n.sketch__floating-panel .sketch__toolbar {\n  padding: 0;\n}\n\n.sketch__floating-panel .button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--quiet:hover:not(:disabled) {\n  background: var(--surface-well);\n  color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--secondary {\n  background: var(--surface-control);\n  color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--secondary:hover:not(:disabled) {\n  background: var(--surface-control-hover);\n  color: var(--text-primary);\n}\n\n.sketch__toolbar-divider {\n  width: 1px;\n  height: var(--control-height-small);\n  margin-inline: var(--space-4);\n  background: var(--border-subtle);\n}\n\n.sketch__field {\n  display: grid;\n  gap: 6px;\n  margin-top: 4px;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: 600;\n}\n\n.sketch__field textarea {\n  width: 100%;\n  resize: vertical;\n  padding: 9px 10px;\n  border: 1px solid var(--border-strong);\n  border-radius: 8px;\n  background: var(--surface-raised);\n  color: var(--text-primary);\n  font: inherit;\n  font-weight: 400;\n  line-height: 1.4;\n}\n\n.sketch__field textarea:focus {\n  border-color: var(--accent);\n  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);\n}\n\n.sketch__optional {\n  color: var(--text-muted);\n  font-weight: 400;\n}\n\n.sketch__actions {\n  justify-content: flex-end;\n  margin-top: 16px;\n}\n\n.sketch-change {\n  display: grid;\n  gap: 8px;\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.sketch-change__title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: var(--text-primary);\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.sketch-change__title span,\n.sketch-change__status {\n  color: var(--text-muted);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.sketch-change__row {\n  display: grid;\n  grid-template-columns: 76px minmax(0, 1fr);\n  gap: 10px;\n  padding: 8px 0;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.sketch-change__thumbnail {\n  width: 76px;\n  height: 58px;\n  object-fit: cover;\n  border: 1px solid var(--border-subtle);\n  border-radius: 6px;\n  background: var(--surface-control);\n}\n\n.sketch-change__thumbnail--empty { display: block; }\n\n.sketch-change__body {\n  display: grid;\n  min-width: 0;\n  gap: 3px;\n}\n\n.sketch-change__heading {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.sketch-change__name,\n.sketch-change__route,\n.sketch-change__description {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sketch-change__name {\n  color: var(--text-primary);\n  font-size: 12px;\n  font-weight: 650;\n}\n\n.sketch-change__route,\n.sketch-change__description,\n.sketch-change__error {\n  color: var(--text-muted);\n  font-size: 11px;\n  line-height: 1.35;\n}\n\n.sketch-change__description {\n  margin: 2px 0;\n  white-space: normal;\n}\n\n.sketch-change__annotations {\n  display: grid;\n  gap: 2px;\n  margin: 2px 0;\n  padding-inline-start: 18px;\n  color: var(--text-secondary);\n  font-size: 11px;\n  line-height: 1.35;\n}\n\n.sketch-change__annotations li::marker {\n  color: var(--accent);\n  font-weight: 700;\n}\n\n.sketch-change__actions {\n  gap: 2px 4px;\n}\n\n.sketch-change__actions .button {\n  padding-inline: 5px;\n  font-size: 11px;\n}\n\n.sketch-change__status[data-status=\"needs-review\"] { color: var(--warning-text); }\n.sketch-change__status[data-status=\"dispatching\"],\n.sketch-change__status[data-status=\"handing-off\"] { color: var(--accent); }\n.sketch-change__error { color: var(--warning-text); }\n";
 export const UI_STYLES = [
     foundationStyles,
     controlSurfaceStyles,
@@ -48,6 +49,7 @@ export const UI_STYLES = [
     inspectorPopoverStyles,
     sideValuesFieldStyles,
     inspectorShellStyles,
+    inspectorOverlayStyles,
     emptyStateStyles,
     styleEditorStyles,
     borderEditorStyles,
@@ -60,9 +62,9 @@ export const UI_STYLES = [
     tokenDropdownStyles,
     tokensPanelStyles,
     changesLogStyles,
-    inspectorOverlayStyles,
     domNavigationStyles,
     promptSettingsStyles,
     mcpConnectionStyles,
     settingsStyles,
+    sketchStyles,
 ].join("\n");