nudge-ui 0.2.1 → 0.2.2

package/dist/inspector/tokens/TokensPanel.js

@@ -3,6 +3,7 @@ import { useMemo, useState } from "react";
 import { isTokenChange, useChanges } from "../changes/changesLog.js";
 import { TextInput } from "../ui/TextInput.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
+import { Disclosure } from "../ui/Disclosure.js";
 import { TokenValueField } from "./TokenField.js";
 import { TOKEN_GROUP_LABELS, TOKEN_GROUP_ORDER, aliasName, compatibleTokenNames, contextLabel, filterTokenRows, } from "./catalog.js";
 import { setGlobalTokenValue } from "./tokenEdits.js";
@@ -43,5 +44,5 @@ function TokenCatalogItem({ row, rows, entries, }) {
     const allowed = compatibleTokenNames(effectiveRow, effectiveRows);
     const variants = row.definition.declarations.filter((declaration) => declaration !== row.activeDeclaration);
     const tokenName = row.definition.name || row.definition.cssName;
-    return (_jsxs("article", { className: "token-row", "data-test": "global-token-row", "data-token-name": row.definition.cssName, "data-active": row.activeDeclaration ? "true" : "false", children: [_jsxs("div", { className: "token-row__inline", children: [_jsx(TokenLabel, { as: "code", className: "token-row__name", title: tokenName, children: tokenName }), row.activeDeclaration ? (_jsx(ControlSurface, { children: _jsx(TokenValueField, { property: row.definition.cssName, committedValue: committedValue, resolvedValue: row.resolvedValue || committedValue, activeTokenName: activeAlias, entries: entries, allowedTokenNames: allowed, isColor: row.group === "color", onCommitRaw: (value) => setGlobalTokenValue(row, value), onSelectToken: (token) => { setGlobalTokenValue(row, `var(${token.name})`); }, onUnlink: (value) => setGlobalTokenValue(row, value) }) })) : (_jsx(TextInput, { disabled: true, value: "Inactive in current theme", "aria-label": `${row.definition.cssName} inactive` }))] }), variants.length > 0 ? (_jsxs("details", { className: "token-variants", "data-test": "token-variants", children: [_jsxs("summary", { children: ["Variants (", variants.length, ")"] }), _jsx("div", { className: "token-variants__list", children: variants.map((declaration) => (_jsxs("div", { className: "token-variant", children: [_jsx("span", { className: "token-variant__context", children: contextLabel(declaration.context) }), _jsx("code", { children: declaration.value }), _jsx("span", { children: declaration.source })] }, `${declaration.source}-${contextLabel(declaration.context)}`))) })] })) : null] }));
+    return (_jsxs("article", { className: "token-row", "data-test": "global-token-row", "data-token-name": row.definition.cssName, "data-active": row.activeDeclaration ? "true" : "false", children: [_jsxs("div", { className: "token-row__inline", children: [_jsx(TokenLabel, { as: "code", className: "token-row__name", title: tokenName, children: tokenName }), row.activeDeclaration ? (_jsx(ControlSurface, { children: _jsx(TokenValueField, { property: row.definition.cssName, committedValue: committedValue, resolvedValue: row.resolvedValue || committedValue, activeTokenName: activeAlias, entries: entries, allowedTokenNames: allowed, isColor: row.group === "color", onCommitRaw: (value) => setGlobalTokenValue(row, value), onSelectToken: (token) => { setGlobalTokenValue(row, `var(${token.name})`); }, onUnlink: (value) => setGlobalTokenValue(row, value) }) })) : (_jsx(TextInput, { disabled: true, value: "Inactive in current theme", "aria-label": `${row.definition.cssName} inactive` }))] }), variants.length > 0 ? (_jsx(Disclosure, { className: "token-variants", "data-test": "token-variants", title: `Variants (${variants.length})`, panelClassName: "token-variants__list", children: variants.map((declaration) => (_jsxs("div", { className: "token-variant", children: [_jsx("span", { className: "token-variant__context", children: contextLabel(declaration.context) }), _jsx("code", { children: declaration.value }), _jsx("span", { children: declaration.source })] }, `${declaration.source}-${contextLabel(declaration.context)}`))) })) : null] }));
 }

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

@@ -0,0 +1,8 @@
+/** Keeps mouse drags relative, including when the handle is inside a shadow root. */
+export declare function startDragPointerLock(handle: HTMLElement, point: {
+    x: number;
+    y: number;
+}, onMove: (event: MouseEvent) => void, onEnd: () => void): {
+    isLocked: () => boolean;
+    stop: () => void;
+};

package/dist/inspector/tokens/dragPointerLock.js

@@ -0,0 +1,70 @@
+import { showLockedDragCursor } from "../ui/dragCursor.js";
+/** Keeps mouse drags relative, including when the handle is inside a shadow root. */
+export function startDragPointerLock(handle, point, onMove, onEnd) {
+    const doc = handle.ownerDocument;
+    const root = handle.getRootNode();
+    const isLocked = () => root.pointerLockElement === handle;
+    let stopped = false;
+    let pending = true;
+    let acquired = false;
+    let removeCursor;
+    function removeLockListeners() {
+        doc.removeEventListener("pointerlockchange", onLockChange);
+        doc.removeEventListener("pointerlockerror", onLockError);
+    }
+    function onLockChange() {
+        if (isLocked()) {
+            pending = false;
+            acquired = true;
+            if (stopped) {
+                doc.exitPointerLock();
+                removeLockListeners();
+            }
+            else if (!removeCursor) {
+                removeCursor = showLockedDragCursor(doc, point);
+            }
+        }
+        else if (acquired) {
+            onEnd();
+        }
+    }
+    function onLockError() {
+        pending = false;
+        removeLockListeners();
+    }
+    function onMouseMove(event) {
+        if (!stopped && isLocked())
+            onMove(event);
+    }
+    function onMouseUp(event) {
+        if (event.button === 0)
+            onEnd();
+    }
+    doc.addEventListener("mousemove", onMouseMove);
+    doc.addEventListener("mouseup", onMouseUp);
+    doc.addEventListener("pointerlockchange", onLockChange);
+    doc.addEventListener("pointerlockerror", onLockError);
+    try {
+        // Older implementations return void. Rejections retain pointer-capture dragging.
+        const request = handle.requestPointerLock();
+        if (request)
+            void request.catch(onLockError);
+    }
+    catch {
+        onLockError();
+    }
+    return {
+        isLocked,
+        stop() {
+            stopped = true;
+            removeCursor?.();
+            doc.removeEventListener("mousemove", onMouseMove);
+            doc.removeEventListener("mouseup", onMouseUp);
+            if (isLocked())
+                doc.exitPointerLock();
+            // A request can finish after mouse-up or unmount. Release that late lock too.
+            if (!pending)
+                removeLockListeners();
+        },
+    };
+}

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

@@ -0,0 +1,22 @@
+import type { ReactElement, ReactNode } from "react";
+export interface DisclosureProps {
+    readonly title: ReactNode;
+    /** Optional accessory rendered between the label and the chevron (e.g. a count badge). */
+    readonly badge?: ReactNode;
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly triggerClassName?: string;
+    readonly panelClassName?: string;
+    readonly defaultOpen?: boolean;
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    /** Keeps panel content in the DOM while collapsed, matching native details behavior. */
+    readonly keepMounted?: boolean;
+    readonly "data-test"?: string;
+    readonly triggerDataTest?: string;
+}
+/**
+ * A single collapsible disclosure built on Base UI Collapsible.
+ * Replaces native details/summary for consistent 12px label styling and chevron.
+ */
+export declare function Disclosure({ title, badge, children, className, triggerClassName, panelClassName, defaultOpen, open, onOpenChange, keepMounted, "data-test": dataTest, triggerDataTest, }: DisclosureProps): ReactElement;

package/dist/inspector/ui/Disclosure.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { IconChevronDown } from "@tabler/icons-react";
+/**
+ * A single collapsible disclosure built on Base UI Collapsible.
+ * Replaces native details/summary for consistent 12px label styling and chevron.
+ */
+export function Disclosure({ title, badge, children, className, triggerClassName, panelClassName, defaultOpen, open, onOpenChange, keepMounted = true, "data-test": dataTest, triggerDataTest, }) {
+    function handleOpenChange(next) {
+        onOpenChange?.(next);
+    }
+    return (_jsxs(Collapsible.Root, { className: `disclosure${className ? ` ${className}` : ""}`, "data-test": dataTest, defaultOpen: defaultOpen, open: open, onOpenChange: handleOpenChange, children: [_jsxs(Collapsible.Trigger, { className: `disclosure__trigger${triggerClassName ? ` ${triggerClassName}` : ""}`, "data-test": triggerDataTest, children: [_jsx("span", { className: "disclosure__label", children: title }), badge, _jsx(IconChevronDown, { className: "disclosure__chevron", size: 15, stroke: 2, "aria-hidden": "true" })] }), _jsx(Collapsible.Panel, { keepMounted: keepMounted, className: `disclosure__panel${panelClassName ? ` ${panelClassName}` : ""}`, children: children })] }));
+}

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

@@ -0,0 +1,8 @@
+export declare const DRAG_CURSOR_URL: string;
+export declare const DRAG_CURSOR: string;
+export declare const DRAG_CURSOR_STYLES: string;
+/** Shows the same cursor at a fixed viewport point while the native cursor is locked. */
+export declare function showLockedDragCursor(doc: Document, point: {
+    x: number;
+    y: number;
+}): () => void;

package/dist/inspector/ui/dragCursor.js

@@ -0,0 +1,21 @@
+const DRAG_CURSOR_SVG = `<svg width="18" height="9.5" viewBox="0 0 36 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#right)"><path d="M19.1253 13.3682V3.50181C19.1253 2.77104 19.8836 2.28706 20.5464 2.5948L31.1718 7.52799C31.9436 7.88635 31.9436 8.98365 31.1718 9.34201L20.5464 14.2752C19.8836 14.5829 19.1253 14.099 19.1253 13.3682Z" fill="black" stroke="white"/></g>
+<g filter="url(#left)"><path d="M16.1253 13.3682V3.50181C16.1253 2.77104 15.367 2.28706 14.7042 2.5948L4.07889 7.52799C3.30704 7.88635 3.30704 8.98365 4.07889 9.34201L14.7042 14.2752C15.367 14.5829 16.1253 14.099 16.1253 13.3682Z" fill="black" stroke="white"/></g>
+<defs>
+<filter id="right" x="15.6253" y="0" width="19.6253" height="18.87" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="shadow"/><feBlend mode="normal" in="SourceGraphic" in2="shadow" result="shape"/></filter>
+<filter id="left" x="0" y="0" width="19.6253" height="18.87" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="shadow"/><feBlend mode="normal" in="SourceGraphic" in2="shadow" result="shape"/></filter>
+</defs></svg>`;
+export const DRAG_CURSOR_URL = `data:image/svg+xml,${encodeURIComponent(DRAG_CURSOR_SVG)}`;
+export const DRAG_CURSOR = `url("${DRAG_CURSOR_URL}") 9 4, ew-resize`;
+export const DRAG_CURSOR_STYLES = `:host { --nudge-drag-cursor: ${DRAG_CURSOR}; }`;
+/** Shows the same cursor at a fixed viewport point while the native cursor is locked. */
+export function showLockedDragCursor(doc, point) {
+    const cursor = doc.createElement("img");
+    cursor.src = DRAG_CURSOR_URL;
+    cursor.alt = "";
+    cursor.setAttribute("aria-hidden", "true");
+    cursor.dataset.test = "locked-drag-cursor";
+    cursor.style.cssText = `all: initial; position: fixed; left: ${point.x - 9}px; top: ${point.y - 4}px; width: 18px; height: 9.5px; pointer-events: none; z-index: 2147483647; user-select: none;`;
+    doc.documentElement.append(cursor);
+    return () => cursor.remove();
+}

package/dist/inspector/ui/styles.js

@@ -1,5 +1,6 @@
+import { DRAG_CURSOR_STYLES } from "./dragCursor.js";
 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 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: 35;\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 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: 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";
@@ -8,31 +9,32 @@ const buttonStyles = ".button {\n  appearance: none;\n  display: inline-flex;\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  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 disclosureStyles = ".disclosure__trigger {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--text-secondary);\n  font-family: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n  line-height: 1.4;\n  text-align: left;\n  cursor: pointer;\n}\n\n.disclosure__trigger:hover {\n  color: var(--text-primary);\n}\n\n.disclosure__trigger:hover .disclosure__chevron {\n  color: var(--text-primary);\n}\n\n.disclosure__trigger:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n  border-radius: var(--radius-4);\n}\n\n.disclosure__label {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.disclosure__chevron {\n  flex: none;\n  color: var(--text-muted);\n  transition: transform 120ms ease;\n}\n\n.disclosure__trigger[data-panel-open] .disclosure__chevron {\n  transform: rotate(180deg);\n}\n\n.disclosure__panel {\n  min-width: 0;\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__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 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\n.dom-navigator,\n.dom-navigator-preview {\n  position: fixed;\n  pointer-events: none;\n}\n\n.dom-navigator {\n  z-index: 2147483647;\n  pointer-events: auto;\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n}\n\n.dom-navigator__trigger,\n.dom-navigator__item {\n  appearance: none;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  border: 1px solid var(--border-strong);\n  color: var(--text-primary);\n  cursor: pointer;\n  font: inherit;\n  white-space: nowrap;\n}\n\n.dom-navigator__trigger {\n  min-height: var(--control-height-small);\n  padding: 0 var(--space-8);\n  border-radius: var(--radius-4);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n}\n\n.dom-navigator__menu {\n  display: grid;\n  min-width: 140px;\n  margin-top: var(--space-4);\n  padding: var(--space-4);\n  gap: var(--space-2);\n  border: 1px solid var(--border-strong);\n  border-radius: var(--radius-4);\n  background: var(--surface-panel);\n  box-shadow: var(--shadow-popup);\n}\n\n.dom-navigator__item {\n  width: 100%;\n  min-height: var(--control-height-small);\n  padding: 0 var(--space-8);\n  border-color: transparent;\n  background: transparent;\n  text-align: left;\n}\n\n.dom-navigator__trigger:hover,\n.dom-navigator__item:hover,\n.dom-navigator__trigger:focus-visible,\n.dom-navigator__item:focus-visible {\n  background: var(--surface-control-hover);\n  outline: 0;\n}\n\n.dom-navigator-preview {\n  z-index: 2147483646;\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n";
 const emptyStateStyles = ".empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-40) var(--space-0) var(--space-24);\n  min-height: 70dvh;\n  text-align: center;\n  color: var(--text-secondary);\n}\n\n.empty-state__icon { display: block; width: min(100%, 182px); height: auto; margin-bottom: var(--space-16); }\n.empty-state__title { margin: 0; color: var(--text-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-base); }\n.empty-state__shortcuts { width: 100%; margin-top: var(--space-32); padding-top: var(--space-20); text-align: left; }\n.empty-state__shortcut-list { display: grid; gap: var(--space-8); margin: var(--space-0); padding: var(--space-0); list-style: none; }\n.empty-state__shortcut { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: var(--control-height-small); color: var(--text-secondary); }\n.empty-state__shortcut-keys { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-muted); }\n.empty-state__shortcut-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height-small); height: var(--control-height-small); padding: var(--space-0) var(--space-8); border-radius: var(--radius-4); background: var(--surface-raised-2x); color: var(--text-primary); font-family: var(--font-family); font-size: var(--font-size-small); box-shadow: var(--shadow-control); }\n.empty-state__shortcut-keys > span { color: var(--text-muted-subtle); font-size: var(--font-size-small); }\n";
 const styleEditorStyles = "/* Shared chrome for style-editor sections. */\n.layout,\n.spacing,\n.typography,\n.border,\n.property,\n.color {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  background: var(--surface-panel);\n}\n\n.appearance {\n  gap: var(--space-12);\n}\n\n.appearance__fields {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;\n  gap: var(--space-12);\n}\n\n.appearance__field {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.appearance__field-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.appearance__field-label {\n  min-width: 0;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  line-height: 1.25;\n}\n\n.border-radius-editor__main {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.border-radius-editor--embedded {\n  display: contents;\n}\n\n.border-radius-editor--embedded > .border-radius-editor__main {\n  grid-column: 2;\n}\n\n.border-radius-editor--embedded > .border-radius-editor__toggle {\n  grid-column: 3;\n  align-self: end;\n}\n\n.border-radius__grouped-row {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: stretch;\n  gap: var(--space-8);\n}\n\n.border-radius__grouped-row > .control-surface {\n  min-width: 0;\n}\n\n.border-radius-editor__individuals {\n  grid-column: 1 / span 2;\n  min-width: 0;\n}\n\n.opacity-editor__effective {\n  flex: 0 0 auto;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n}\n";
 const borderEditorStyles = ".border__linked-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.border__linked-control {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n.border__linked-control--color {\n  flex: 3 1 0;\n}\n\n.border__linked-control--width {\n  flex: 1 1 0;\n}\n\n.border__linked-row > .popover-listbox,\n.border__linked-row > .toggle-button {\n  flex: 0 0 auto;\n}\n\n.border__linked-row > .popover-listbox {\n  width: auto;\n}\n\n.border__expanded {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.border__expanded-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 26px;\n}\n\n.border__side-rows {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.border__side-row {\n  display: grid;\n  min-width: 0;\n  grid-template-columns: auto minmax(0, 3fr) minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 6px;\n}\n\n.border__side-row > .side-values__side-icon {\n  justify-self: center;\n}\n\n.border__side-control {\n  min-width: 0;\n}\n\n.border__side-row > .popover-listbox {\n  flex: 0 0 auto;\n}\n";
 const typographyStyles = ".typography {\n  gap: var(--space-8);\n}\n\n.typography__field {\n  min-width: 0;\n}\n\n.typography__field-icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--text-muted);\n}\n\n.typography__field > .select {\n  flex: 1 1 auto;\n}\n\n.typography__metrics {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-8);\n}\n\n.typography__field .token-field__leading svg {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n}\n\n.typography__field--font-family .token-field__leading svg {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n}\n\n.typography__alignment {\n  display: grid;\n  grid-template-columns: 1.1fr 1fr;\n  gap: var(--space-8);\n}\n\n.typography__alignment-field {\n  position: relative;\n  min-width: 0;\n}\n";
-const layoutSectionStyles = ".layout__group {\n  margin-top: 4px;\n  padding-top: 10px;\n  border-top: 1px solid var(--border-subtle);\n  background: var(--surface-panel);\n}\n\n.layout__basic {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-12);\n}\n\n.layout__tool-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control-height-large);\n  gap: var(--space-8);\n  align-items: end;\n}\n\n.layout__tool-row .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-4);\n  min-width: 0;\n  min-height: 0;\n}\n\n\n.layout__tool-row .field-row__control {\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__size {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__size-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;\n  grid-template-areas:\n    \"width height toggle\"\n    \"min-width min-height .\"\n    \"max-width max-height .\"\n    \"aspect-ratio . .\";\n  gap: 6px;\n  align-items: end;\n}\n\n.layout__size[data-expanded=\"false\"] .layout__size-grid {\n  grid-template-areas: \"width height toggle\";\n}\n\n.layout__size-cell {\n  min-width: 0;\n}\n\n.layout__size-cell--width { grid-area: width; }\n.layout__size-cell--height { grid-area: height; }\n.layout__size-cell--toggle { grid-area: toggle; }\n.layout__size-cell--min-width { grid-area: min-width; }\n.layout__size-cell--min-height { grid-area: min-height; }\n.layout__size-cell--max-width { grid-area: max-width; }\n.layout__size-cell--max-height { grid-area: max-height; }\n.layout__size-cell--aspect-ratio { grid-area: aspect-ratio; }\n\n.layout__size-grid .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-4);\n  min-width: 0;\n  min-height: 0;\n}\n\n\n.layout__size-grid .field-row__control,\n.layout__size-grid .token-field {\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__size-grid .layout-combo,\n.layout__aspect-ratio-control {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 4px;\n  align-items: center;\n}\n\n.layout__size-grid .layout-combo__custom {\n  min-width: 0;\n}\n\n.layout__aspect-ratio-control .text-input {\n  min-width: 0;\n}\n\n\n.layout__grid {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__grid-primary {\n  display: grid;\n  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);\n  gap: 10px;\n  align-items: start;\n}\n\n.layout__grid-picker-column,\n.layout__grid-gap {\n  min-width: 0;\n}\n\n.layout__grid-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n}\n\n.layout__grid-gap-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__grid-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__grid-fields .field-row,\n.layout__grid-child .field-row {\n  min-width: 0;\n}\n\n.layout__grid-child {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__grid-child-fields {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  grid-template-areas:\n    \"column row\"\n    \"vertical horizontal\";\n  gap: 6px;\n}\n\n.layout__grid-child-fields .field-row,\n.layout__grid-child-fields .control-surface,\n.layout__grid-child-fields .segmented-control {\n  min-width: 0;\n}\n\n.layout__grid-child-placement--column { grid-area: column; }\n.layout__grid-child-placement--row { grid-area: row; }\n.layout__grid-child-alignment--h { grid-area: horizontal; }\n.layout__grid-child-alignment--v { grid-area: vertical; }\n\n.layout__grid-child-placement .control-surface,\n.layout__grid-child-alignment-control {\n  width: 100%;\n}\n\n.layout__grid-child-placement-icon {\n  flex: 0 0 var(--icon-size-small);\n  color: var(--text-secondary);\n}\n\n.layout__grid-child-align-icon--horizontal {\n  transform: rotate(90deg);\n}\n\n.layout__grid-alignment {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 6px;\n}\n\n.layout__grid-advanced {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n}\n\n\n.layout__grid-value {\n  min-width: 0;\n}\n\n.layout__flex-toolbar {\n  display: block;\n}\n\n.layout__direction-tools {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto auto;\n  gap: 4px;\n  min-width: 0;\n}\n\n.layout__alignment-grid {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, minmax(0, 1fr));\n  gap: 2px;\n  padding: 5px;\n  overflow: hidden;\n  background: var(--surface-control);\n  border-radius: var(--radius-control);\n  isolation: isolate;\n}\n\n.layout__alignment-button {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  min-height: 8px;\n  border-radius: 5px;\n}\n\n.layout__alignment-button span {\n  width: 3px;\n  height: 3px;\n  background: var(--text-muted-subtle);\n  border-radius: 50%;\n}\n\n.layout__alignment-button[data-active=\"true\"] span {\n  width: 14px;\n  height: 2px;\n  background: var(--accent);\n  border-radius: var(--radius-pill);\n  box-shadow: 0 -4px 0 var(--accent), 0 4px 0 var(--accent);\n}\n\n.layout__distribution-preview {\n  position: absolute;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  pointer-events: none;\n}\n\n.layout__distribution-preview span {\n  width: 14px;\n  height: 2px;\n  border-radius: var(--radius-pill);\n  background: var(--accent);\n}\n\n/* Match the centers of the 32px controls in the padded 3x3 grid. */\n.layout__alignment-grid[data-direction=\"row\"] .layout__distribution-preview {\n  top: calc((100% - 14px) / 3 + 22px);\n  right: calc((100% - 14px) / 6 - 2px);\n  left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-start\"] .layout__distribution-preview {\n  top: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-end\"] .layout__distribution-preview {\n  top: auto;\n  bottom: calc((100% - 14px) / 3 - 12px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-justify=\"space-around\"] .layout__distribution-preview {\n  right: 20px;\n  left: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"column\"] .layout__distribution-preview {\n  top: 20px;\n  bottom: calc((100% - 14px) / 3 - 12px);\n  left: calc(50% - 7px);\n  flex-direction: column;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-start\"] .layout__distribution-preview {\n  left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-end\"] .layout__distribution-preview {\n  right: calc((100% - 14px) / 6 - 2px);\n  left: auto;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-justify=\"space-around\"] .layout__distribution-preview {\n  top: 20px;\n  bottom: 20px;\n}\n\n.layout__alignment-grid[data-justify=\"space-around\"] .layout__distribution-preview {\n  justify-content: space-around;\n}\n\n.layout__alignment-grid[data-justify=\"space-evenly\"] .layout__distribution-preview {\n  justify-content: space-evenly;\n}\n\n.layout__flex-lower {\n  display: grid;\n  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);\n  gap: 12px;\n  align-items: start;\n  margin-top: 8px;\n}\n\n.layout__flex-lower .layout__alignment-grid {\n  width: min(100%, 120px);\n  aspect-ratio: 1;\n  grid-template-rows: repeat(3, minmax(0, 1fr));\n  justify-self: start;\n}\n\n.layout__flex-lower .layout__alignment-button {\n  min-height: 0;\n}\n\n.layout__gap-column {\n  min-width: 0;\n}\n\n.layout__gap-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.layout__spacing-primary {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n  gap: 5px;\n  align-items: center;\n  min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo {\n  min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo,\n.layout__spacing-primary .text-input {\n  width: 100%;\n}\n\n.layout__distribution-control {\n  width: var(--control-height-large);\n}\n\n.layout__spacing-field {\n  color: var(--text-muted);\n}\n\n.layout__spacing-icon {\n  display: inline-flex;\n  flex: 0 0 var(--icon-size-small);\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  color: var(--text-secondary);\n}\n\n.layout__spacing-field .layout-combo {\n  flex: 1 1 auto;\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__flex-child-fields {\n  display: grid;\n  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;\n  gap: 5px;\n  align-items: start;\n}\n\n.layout__flex-child-fields > .icon-button {\n  align-self: end;\n  justify-self: end;\n}\n\n.layout__flex-child-fields > .field-row {\n  min-width: 0;\n}\n\n.layout__flex-child-fields .field-row,\n.layout__flex-child-field {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 4px;\n  min-width: 0;\n  min-height: 0;\n}\n\n.layout__flex-child-fields .field-row__label {\n  color: var(--text-secondary);\n}\n\n.layout__flex-child-fields .field-row__control,\n.layout__flex-child-fields .layout-combo {\n  width: 100%;\n  min-width: 0;\n}\n\n.layout__flex-child-settings {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.layout__flex-child-settings-title {\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.layout__flex-child-settings .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 4px;\n  min-height: 0;\n}\n\n.layout__flex-child-settings .field-row__label {\n  color: var(--text-secondary);\n}\n\n.layout__flex-child-settings .field-row__control,\n.layout__flex-child-settings .layout-combo {\n  width: 100%;\n  min-width: 0;\n}\n";
+const 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: flex;\n  flex-direction: column;\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.inspector-popover__popup:has(> .layout__flex-child-settings),\n.inspector-popover__popup:has(> .layout__grid-advanced) {\n  padding: var(--space-16);\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  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 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: var(--nudge-drag-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.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 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__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 .disclosure__trigger {\n  padding: 10px 0;\n  color: var(--text-primary);\n  font-weight: 700;\n}\n\n.changes .disclosure__trigger:hover {\n  color: var(--text-primary);\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__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 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 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__details .disclosure__trigger {\n  padding: var(--space-4) 0;\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 = [
+    DRAG_CURSOR_STYLES,
     foundationStyles,
     controlSurfaceStyles,
     atRuleContextStyles,
@@ -43,6 +45,7 @@ export const UI_STYLES = [
     toggleButtonStyles,
     segmentedControlStyles,
     iconButtonStyles,
+    disclosureStyles,
     statusCalloutStyles,
     colorSwatchStyles,
     popoverListboxStyles,
@@ -62,7 +65,6 @@ export const UI_STYLES = [
     tokenDropdownStyles,
     tokensPanelStyles,
     changesLogStyles,
-    domNavigationStyles,
     promptSettingsStyles,
     mcpConnectionStyles,
     settingsStyles,

package/dist/nudge-ui.mjs

@@ -14308,6 +14308,17 @@ function createNudgeUiEditorDocument() {
 // src/transport/index.ts
 var NUDGE_UI_MANIFEST_VERSION = 1;
 
+// src/hosts/environment.ts
+function readNudgeUiEnvironmentSwitch(env = process.env) {
+  const value = env.NUDGE_UI?.trim().toLowerCase();
+  if (value === "0" || value === "false" || value === "off") return "off";
+  if (value === "1" || value === "true" || value === "on") return "on";
+  return null;
+}
+function automationManifestFields(env = process.env) {
+  return readNudgeUiEnvironmentSwitch(env) === "on" ? { inspectAutomatedBrowsers: true } : {};
+}
+
 // src/hosts/static/manifest.ts
 function createStandaloneRuntimeManifest(projectId, tokenSnapshot = emptyTokenSnapshot(), revision = 0) {
   return {
@@ -14336,7 +14347,8 @@ function createStandaloneRuntimeManifest(projectId, tokenSnapshot = emptyTokenSn
       endpoint: NUDGE_UI_RELOAD_PATH,
       strategy: "reload-document",
       events: ["ready", "reload"]
-    }
+    },
+    ...automationManifestFields()
   };
 }
 function emptyTokenSnapshot() {
@@ -14464,6 +14476,7 @@ async function launchOptionalProjectBridge(input, key) {
       await runtime.close().catch(() => void 0);
       throw new Error("the project bridge returned a different project or origin");
     }
+    input.info?.(`[nudge-ui] project bridge ready for ${input.projectId}`);
     let closed = false;
     return {
       browser: { baseUrl: runtime.browser.bridgeUrl, autoConnect: true },
@@ -15498,6 +15511,7 @@ data: ${JSON.stringify({ revision })}
                 appRoot: rootDirectory,
                 projectId,
                 origin: address.url.replace(/\/$/, ""),
+                info: (message) => console.info(message),
                 warn: (message) => console.warn(message)
               }).then((bridge) => {
                 projectBridge = bridge;

package/dist/transport/editor.d.ts

@@ -7,12 +7,18 @@ type RequestHeaderValue = string | readonly string[] | undefined;
 export declare function isNudgeUiEditorDocumentRequest(requestHref: string, method: string | undefined, headers: Record<string, RequestHeaderValue> | undefined): boolean;
 /** Adds the persistent marker that bypasses editor entry for a plain app view. */
 export declare function createNudgeUiDirectUrl(applicationHref: string): string;
+/** Reads the public `nudge-ui=off` / `nudge-ui=on` switch from an application URL. */
+export declare function readNudgeUiQuerySwitch(href: string): "off" | "on" | null;
 /** Returns whether this application location explicitly bypasses editor entry. */
 export declare function isNudgeUiDirectUrl(href: string): boolean;
 /** Remembers that this browser tab was explicitly opened outside the editor. */
 export declare function rememberNudgeUiDirectTabIntent(): void;
+/** Remembers an explicit URL switch so later navigations in this tab keep it. */
+export declare function rememberNudgeUiTabSwitch(value: "off" | "on"): void;
 /** Returns whether this browser tab should remain outside the editor. */
 export declare function hasNudgeUiDirectTabIntent(): boolean;
+/** Returns whether this browser tab explicitly asked for the editor with `nudge-ui=on`. */
+export declare function hasNudgeUiForcedTabIntent(): boolean;
 export type NudgeUiClientEntry = {
     readonly kind: "bootstrap";
 } | {
@@ -20,9 +26,22 @@ export type NudgeUiClientEntry = {
 } | {
     readonly kind: "redirect";
     readonly href: string;
+}
+/** An automated browser that enters the editor only when the host opts in. */
+ | {
+    readonly kind: "automated";
+    readonly href: string;
 };
+export interface NudgeUiClientEntryContext {
+    readonly editorDocument: boolean;
+    readonly canvasRenderer: boolean;
+    readonly directTab?: boolean;
+    readonly forcedTab?: boolean;
+    /** `navigator.webdriver`: Playwright, Puppeteer, Selenium, and headless Chrome. */
+    readonly automated?: boolean;
+}
 /** Chooses the browser-client role before any runtime manifest is fetched. */
-export declare function resolveNudgeUiClientEntry(href: string, editorDocument: boolean, canvasRenderer: boolean, directTab?: boolean): NudgeUiClientEntry;
+export declare function resolveNudgeUiClientEntry(href: string, context: NudgeUiClientEntryContext): NudgeUiClientEntry;
 /** Renders the host-neutral editor document served by every development Adapter. */
 export declare function createNudgeUiEditorDocument(): string;
 export {};