nudge-ui 0.2.5 → 0.2.6

package/dist/inspector/ui/atRuleSegments.js

@@ -0,0 +1,34 @@
+const WIDTH_BOUND = /\b(max|min)-width\s*:\s*(-?\d*\.?\d+)\s*(px|em|rem)\b|\bwidth\s*(<=?|>=?)\s*(-?\d*\.?\d+)\s*(px|em|rem)\b/i;
+function pixels(value, unit) {
+    const amount = Number.parseFloat(value);
+    return unit.toLowerCase() === "px" ? amount : amount * 16;
+}
+/** The first viewport-width bound in a media prelude, as a direction and a pixel size. */
+function widthBound(params) {
+    const match = WIDTH_BOUND.exec(params);
+    if (!match)
+        return null;
+    if (match[1])
+        return { direction: match[1].toLowerCase() === "max" ? "max" : "min", size: pixels(match[2], match[3]) };
+    return { direction: match[4].startsWith("<") ? "max" : "min", size: pixels(match[5], match[6]) };
+}
+/**
+ * Segments ordered like a ruler from the largest viewport down. A base declaration sits at the
+ * large end when the conditions are max-width (desktop first) and at the small end for min-width.
+ */
+export function atRuleSegments(atRules) {
+    const conditional = atRules.map((atRule, index) => ({
+        key: `${atRule.kind}-${atRule.params}-${index}`,
+        kind: atRule.kind,
+        params: atRule.params,
+        active: !("active" in atRule) || atRule.active,
+        size: atRule.kind === "media" ? widthBound(atRule.params)?.size ?? null : null,
+    }));
+    const bounds = atRules.flatMap((atRule) => atRule.kind === "media" ? [widthBound(atRule.params)] : []);
+    const mobileFirst = bounds.some((bound) => bound?.direction === "min") && !bounds.some((bound) => bound?.direction === "max");
+    const base = { key: "base", kind: "base", params: null, active: !conditional.some((segment) => segment.active), size: mobileFirst ? 0 : Number.POSITIVE_INFINITY };
+    const measured = [base, ...conditional].filter((segment) => segment.size !== null)
+        .sort((left, right) => right.size - left.size);
+    const unmeasured = conditional.filter((segment) => segment.size === null);
+    return [...measured, ...unmeasured].map(({ size: _size, ...segment }) => segment);
+}

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

@@ -1,2 +1 @@
-/** Joins truthy class names with spaces. */
 export declare function cx(...classNames: ReadonlyArray<string | false | null | undefined>): string;

package/dist/inspector/ui/classNames.js

@@ -1,4 +1,3 @@
-/** Joins truthy class names with spaces. */
 export function cx(...classNames) {
     return classNames.filter(Boolean).join(" ");
 }

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

@@ -19,7 +19,13 @@ export declare const DESIGN_SELECT_CURSOR: string;
 /** Cursor SVGs are separate images, so resolve CSS tokens before encoding them. */
 export declare function createCommentCursor(tokenSource?: Element | null): string;
 /** Image files for hosts that serve cursors from a base URL; the comment cursor uses default tokens. */
-export declare function cursorImageFiles(): Record<CursorImage, string>;
+export declare function cursorImageFiles(): {
+    "design-select": string;
+    drag: string;
+    sketch: string;
+    eraser: string;
+    comment: string;
+};
 export declare const COMMENT_CURSOR: string;
 export declare const PAN_CURSOR = "grab";
 export declare const DRAG_CURSOR: string;

package/dist/inspector/ui/customCursors.js

@@ -1,4 +1,4 @@
-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  --success: #2e7d52;\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 foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #fff;\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  /* Inverse surfaces mirror the landing palette for dark, high-emphasis controls. */\n  --surface-inverse: #1f201e;\n  --surface-inverse-hover: #343532;\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  --text-inverse: #fff;\n\n  --accent: #0096ff;\n  --linked: #8b5cf6;\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  --success: #2e7d52;\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-6: 6px;\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-outline: 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), var(--shadow-control-outline);\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";
 /** Custom property the renderer sets on its root to drive the interaction cursor. */
 export const INTERACTION_CURSOR_PROPERTY = "--nudge-ui-interaction-cursor";
 const DESIGN_SELECT_CURSOR_SVG = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -87,11 +87,7 @@ const ERASER_CURSOR_SVG = `<svg width="20" height="20" viewBox="0 0 20 20" fill=
 <circle cx="10" cy="10" r="7" fill="white" fill-opacity="0.6" stroke="black"/>
 <circle cx="10" cy="10" r="8" stroke="white" stroke-opacity="0.8"/>
 </svg>`;
-/**
- * Base URL for cursor image files, set on `globalThis` before the bundle
- * evaluates. Pages whose `img-src` blocks `data:` cannot load the default
- * images; the Chrome extension serves the files from its own origin instead.
- */
+/** Set on globalThis before the bundle evaluates; pages blocking data: images need the extension's origin instead. */
 const CURSOR_IMAGE_BASE = globalThis.__NUDGE_UI_CURSOR_IMAGE_BASE__;
 function cursorImageUrl(name, svg) {
     if (typeof CURSOR_IMAGE_BASE === "string")

package/dist/inspector/ui/styles.js

@@ -1,43 +1,42 @@
 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: default;\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 - var(--space-24)));\n  padding: var(--space-8) var(--space-12);\n  border: 0;\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\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 var(--space-8);\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  --success: #2e7d52;\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 atRuleContextStyles = ".at-rule-indicator {\n  position: absolute;\n  z-index: 2;\n  inset-block: 0;\n  inset-inline-end: 0;\n  /* 3px of margin either side of the 4px bars; the whole column is the hover target. */\n  width: calc(var(--space-4) * 3);\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: default;\n}\n\n/* The bars stack in the vertical centre, 3px in from the control's right edge. */\n.at-rule-indicator__track {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-end: 3px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 1px;\n  width: var(--space-4);\n}\n\n/* Together the bars read as one rounded rectangle with dividing lines. */\n.at-rule-indicator__segment {\n  flex: 0 0 var(--space-4);\n  width: var(--space-4);\n  height: var(--space-4);\n  /* A mid-emphasis border tone: quiet beside the accent bar, but still readable on the control surface. */\n  background: var(--border-medium);\n}\n\n.at-rule-indicator__segment:first-child {\n  border-start-start-radius: 2px;\n  border-start-end-radius: 2px;\n}\n\n.at-rule-indicator__segment:last-child {\n  border-end-start-radius: 2px;\n  border-end-end-radius: 2px;\n}\n\n.at-rule-indicator__segment[data-active=\"true\"] {\n  background: var(--accent);\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/* Doubled class: .tooltip__popup is declared later and would otherwise win the padding. */\n.tooltip__popup.at-rule-tooltip {\n  width: max-content;\n  max-width: min(320px, calc(100vw - var(--space-24)));\n  padding: var(--space-4);\n  border: 0;\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\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__default,\n.at-rule-tooltip__rule {\n  min-width: 0;\n  padding: var(--space-4) var(--space-8);\n  border-radius: var(--radius-4);\n  line-height: 1.35;\n}\n\n/* The winning rule reads as the active row, like other accent active states in the inspector. */\n.at-rule-tooltip__rules [data-active=\"true\"] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.at-rule-tooltip code {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: inherit;\n  font: inherit;\n}\n";
+const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #fff;\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  /* Inverse surfaces mirror the landing palette for dark, high-emphasis controls. */\n  --surface-inverse: #1f201e;\n  --surface-inverse-hover: #343532;\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  --text-inverse: #fff;\n\n  --accent: #0096ff;\n  --linked: #8b5cf6;\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  --success: #2e7d52;\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-6: 6px;\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-outline: 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), var(--shadow-control-outline);\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-inset: 2px;\n  --control-surface-padding: var(--control-surface-inset) 8px;\n  --control-surface-gap: var(--space-8);\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: var(--control-surface-inset) 8px var(--control-surface-inset) var(--control-surface-inset);\n}\n\n.control-surface--compact,\n.text-input--compact,\n.select--compact {\n  --control-surface-height: var(--control-height-small);\n  --control-surface-inset: 0px;\n  --control-surface-padding: var(--control-surface-inset) var(--space-8);\n}\n\n.control-surface:hover:not(:focus-within),\n.text-input:hover:not(:focus),\n.select:hover:not(:disabled) {\n  background: var(--surface-control-hover);\n}\n\n.control-surface:focus-within,\n.text-input:focus-visible,\n.select:focus-visible,\n.select[data-popup-open] {\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.control-surface--embedded,\n.text-input--embedded,\n.select--embedded {\n  padding: 0;\n  background: transparent;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.control-surface--embedded:hover:not(:focus-within),\n.text-input--embedded:hover:not(:focus),\n.select--embedded:hover:not(:disabled),\n.control-surface--embedded:focus-within,\n.text-input--embedded:focus-visible,\n.select--embedded:focus-visible,\n.select--embedded[data-popup-open] {\n  background: transparent;\n  box-shadow: none;\n}\n";
 const textInputStyles = ".text-input {\n  width: 100%;\n}\n\n.text-input::placeholder {\n  color: var(--text-muted);\n  opacity: 1;\n}\n";
-const selectStyles = ".select {\n  display: inline-flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  text-align: left;\n  cursor: pointer;\n}\n\n.select:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.select.select--icon-only {\n  width: var(--control-height-large);\n  justify-content: center;\n  padding: 0;\n}\n\n.select--icon-only > .select__value,\n.select--icon-only > .select__icon {\n  display: none;\n}\n\n.select__value,\n.select [data-slot=\"select-value\"] {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.select__icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--text-muted);\n  transition: transform 120ms ease;\n}\n\n.select[data-popup-open] .select__icon {\n  color: var(--text-primary);\n  transform: rotate(180deg);\n}\n\n.select__positioner {\n  z-index: var(--z-index);\n  min-width: var(--anchor-width);\n  pointer-events: auto;\n}\n\n.select__popup {\n  box-sizing: border-box;\n  width: min(420px, max(var(--anchor-width, 0px), 260px));\n  min-width: 0;\n  max-width: calc(100vw - 24px);\n  max-height: min(320px, calc(100dvh - 24px), var(--available-height, 100dvh));\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  pointer-events: auto;\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-popup);\n  transform-origin: var(--transform-origin);\n}\n\n.select__popup--searchable {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.select__search-input {\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  width: calc(100% - (var(--space-4) * 2));\n  min-height: 32px;\n  margin: var(--space-4);\n  padding: var(--space-8);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-8);\n  background: var(--surface-control);\n  color: var(--text-primary);\n  outline: 0;\n  font: inherit;\n}\n\n.select__search-input::placeholder {\n  color: var(--text-muted);\n  opacity: 1;\n}\n\n.select__search-input:focus {\n  border-color: var(--border-strong);\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.select__empty {\n  padding: 12px 14px;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n}\n\n.select__empty:empty {\n  padding: 0;\n}\n\n.select__list {\n  min-width: 0;\n  padding: var(--space-4);\n  outline: 0;\n}\n\n.select__list--searchable {\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.select__group + .select__group {\n  margin-top: 4px;\n  padding-top: 4px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.select__group-label {\n  padding: 5px 8px 4px;\n  color: var(--text-muted);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.select__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  min-height: 34px;\n  padding: var(--space-8) 9px;\n  border-radius: var(--radius-4);\n  color: var(--text-primary);\n  outline: 0;\n  font-size: var(--font-size-base);\n  cursor: pointer;\n}\n\n.select__item[data-highlighted] {\n  background: var(--surface-control);\n}\n\n.select__item[data-disabled] {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.select__item-indicator {\n  display: inline-flex;\n  width: 16px;\n  flex: 0 0 16px;\n  align-items: center;\n  justify-content: center;\n}\n\n.select__item-text {\n  min-width: 0;\n  flex: 1 1 0;\n  overflow: hidden;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
-const buttonStyles = ".button {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n  background: var(--surface-control);\n  border: 0;\n  color: var(--text-primary);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  min-height: var(--control-height-large);\n  padding: 0 12px;\n  border-radius: var(--radius-control);\n  vertical-align: middle;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.button--compact {\n  min-height: var(--control-height-small);\n  padding: 0 10px;\n  font-size: var(--font-size-base);\n  border-radius: var(--radius-4);\n}\n\n.button--large {\n  min-height: var(--control-height-xlarge);\n  padding: 0 var(--space-12);\n}\n\n.button--large svg {\n  width: var(--icon-size-large);\n  height: var(--icon-size-large);\n}\n\n.button--primary {\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.button--secondary {\n  background: var(--surface-control);\n}\n\n.button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.button--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n\n.button--disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.button:hover:not(:disabled) {\n  background: var(--surface-control-hover);\n}\n\n.button--quiet:hover:not(:disabled) {\n  background: var(--surface-well);\n}\n\n.button--primary:hover:not(:disabled) {\n  background: var(--surface-raised-hover);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.button[data-active=\"true\"] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.button[data-active=\"true\"]:hover:not(:disabled) {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.button:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.button:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n";
-const segmentedControlStyles = ".segmented-control {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: minmax(0, 1fr);\n  align-items: stretch;\n  gap: 2px;\n  min-width: 0;\n  min-height: var(--control-height-large);\n  padding: 2px;\n  box-sizing: border-box;\n  overflow: hidden;\n  border-radius: var(--radius-control);\n  background: var(--surface-well);\n}\n\n/* button is the base; stretch fills the padded track (grows with text). */\n.button.segmented-control__button {\n  min-width: 0;\n  min-height: 0;\n  height: auto;\n  padding: 0 var(--space-8);\n  border: 0;\n  border-radius: 6px; /*Custom to fit inside control surface*/\n  background: transparent;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  box-shadow: none;\n}\n\n.button.segmented-control__button--selected,\n.button.segmented-control__button--selected:hover:not(:disabled) {\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control);\n}\n\n.button.segmented-control__button:not(.segmented-control__button--selected):hover:not(:disabled) {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.segmented-control__button svg {\n  flex-shrink: 0;\n}\n\n.segmented-control__label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
-const iconButtonStyles = ".icon-button {\n  appearance: none;\n  background: var(--surface-control);\n  border: 0;\n  color: var(--text-primary);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--control-height-large);\n  height: var(--control-height-large);\n  padding: 0;\n  border-radius: var(--radius-control);\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: 650;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.icon-button svg {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\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[data-active=\"true\"]:hover:not(:disabled) {\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 selectStyles = ".select {\n  display: inline-flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n  text-align: left;\n  cursor: pointer;\n}\n\n.select:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.select.select--icon-only {\n  width: var(--control-height-large);\n  justify-content: center;\n  padding: 0;\n}\n\n.select--icon-only > .select__value,\n.select--icon-only > .select__icon {\n  display: none;\n}\n\n.select__value,\n.select [data-slot=\"select-value\"] {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.select__icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  color: var(--text-muted);\n  transition: transform 120ms ease;\n}\n\n.select[data-popup-open] .select__icon {\n  color: var(--text-primary);\n  transform: rotate(180deg);\n}\n\n.select__positioner {\n  z-index: var(--z-index);\n  min-width: var(--anchor-width);\n  pointer-events: auto;\n}\n\n.select__popup {\n  box-sizing: border-box;\n  width: min(420px, max(var(--anchor-width, 0px), 260px));\n  min-width: 0;\n  max-width: calc(100vw - 24px);\n  max-height: min(320px, calc(100dvh - 24px), var(--available-height, 100dvh));\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  pointer-events: auto;\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-popup);\n  transform-origin: var(--transform-origin);\n}\n\n.select__popup--searchable {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.select__search-input {\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  width: calc(100% - (var(--space-4) * 2));\n  min-height: 32px;\n  margin: var(--space-4);\n  padding: var(--space-8);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-8);\n  background: var(--surface-control);\n  color: var(--text-primary);\n  outline: 0;\n  font: inherit;\n}\n\n.select__search-input::placeholder {\n  color: var(--text-muted);\n  opacity: 1;\n}\n\n.select__search-input:focus {\n  border-color: var(--border-strong);\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.select__empty {\n  padding: 12px 14px;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n}\n\n.select__empty:empty {\n  padding: 0;\n}\n\n.select__list {\n  min-width: 0;\n  padding: var(--space-4);\n  outline: 0;\n}\n\n.select__list--searchable {\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.select__group + .select__group {\n  margin-top: 4px;\n  padding-top: 4px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.select__group-label {\n  padding: 5px 8px 4px;\n  color: var(--text-muted);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.select__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  min-width: 0;\n  min-height: 34px;\n  padding: var(--space-8) 9px;\n  border-radius: var(--radius-4);\n  color: var(--text-primary);\n  outline: 0;\n  font-size: var(--font-size-base);\n  cursor: pointer;\n}\n\n.select__item[data-highlighted] {\n  background: var(--surface-control);\n}\n\n.select__item[data-disabled] {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.select__item-indicator {\n  display: inline-flex;\n  width: 16px;\n  flex: 0 0 16px;\n  align-items: center;\n  justify-content: center;\n}\n\n.select__item-text {\n  min-width: 0;\n  flex: 1 1 0;\n  overflow: hidden;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+const buttonStyles = ".button {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n  background: var(--surface-control);\n  border: 0;\n  color: var(--text-primary);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  min-height: var(--control-height-large);\n  padding: 0 12px;\n  border-radius: var(--radius-control);\n  vertical-align: middle;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.button--compact {\n  min-height: var(--control-height-small);\n  padding: 0 var(--space-12);\n  font-size: var(--font-size-base);\n  border-radius: var(--radius-6);\n}\n\n.button--large {\n  min-height: var(--control-height-xlarge);\n  padding: 0 var(--space-12);\n}\n\n.button--large svg {\n  width: var(--icon-size-large);\n  height: var(--icon-size-large);\n}\n\n.button--primary {\n  background: var(--surface-inverse);\n  color: var(--text-inverse);\n  box-shadow: inset 0 0 0 1px var(--surface-inverse), inset 0 2px 0 rgba(255, 255, 255, 0.25);\n}\n\n.button--secondary {\n  background: var(--surface-control);\n}\n\n.button--quiet {\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.button--danger {\n  background: var(--danger-surface);\n  color: var(--danger-text);\n}\n\n.button--disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n\n.button:hover:not(:disabled) {\n  background: var(--surface-control-hover);\n}\n\n.button--quiet:hover:not(:disabled) {\n  background: var(--surface-well);\n}\n\n.button--primary:hover:not(:disabled) {\n  background: var(--surface-inverse-hover);\n  color: var(--text-inverse);\n  box-shadow: inset 0 0 0 1px var(--surface-inverse-hover), inset 0 2px 0 rgba(255, 255, 255, 0.25);\n}\n\n.button[data-active=\"true\"] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.button[data-active=\"true\"]:hover:not(:disabled) {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.button:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.button--primary:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--accent), inset 0 2px 0 rgba(255, 255, 255, 0.25);\n}\n\n.button:disabled {\n  color: var(--text-muted-subtle);\n  cursor: not-allowed;\n}\n";
+const segmentedControlStyles = ".segmented-control {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: minmax(0, 1fr);\n  align-items: stretch;\n  gap: 2px;\n  min-width: 0;\n  min-height: var(--control-height-large);\n  padding: 2px;\n  box-sizing: border-box;\n  overflow: hidden;\n  border-radius: var(--radius-control);\n  background: var(--surface-well);\n}\n\n/* button is the base; stretch fills the padded track (grows with text). */\n.button.segmented-control__button {\n  min-width: 0;\n  min-height: 0;\n  height: auto;\n  padding: 0 var(--space-8);\n  border: 0;\n  border-radius: 6px; /*Custom to fit inside control surface*/\n  background: transparent;\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n  box-shadow: none;\n}\n\n.button.segmented-control__button--selected,\n.button.segmented-control__button--selected:hover:not(:disabled) {\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-control-outline);\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  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  stroke-width: var(--icon-stroke-width);\n}\n\n.icon-button--primary {\n  background: var(--surface-inverse);\n  color: var(--text-inverse);\n  box-shadow: inset 0 0 0 1px var(--surface-inverse), inset 0 2px 0 rgba(255, 255, 255, 0.25);\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-inverse-hover);\n  color: var(--text-inverse);\n  box-shadow: inset 0 0 0 1px var(--surface-inverse-hover), inset 0 2px 0 rgba(255, 255, 255, 0.25);\n}\n\n.icon-button[data-active=\"true\"] {\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n\n.icon-button[data-active=\"true\"]:hover:not(:disabled) {\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--primary:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--accent), inset 0 2px 0 rgba(255, 255, 255, 0.25);\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: var(--space-8) var(--space-12);\n  background: var(--surface-control);\n  border: 0;\n  border-radius: var(--radius-8);\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: var(--space-8) 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 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: var(--space-8);\n  min-width: 0;\n  min-height: 34px;\n  padding: var(--space-8) 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 menuScrollbarStyles = ":is(.select__popup, .select__list--searchable, .popover-listbox__popup, .popover-listbox__list--searchable, .settings__body, .settings__nav, .settings__content) {\n  scrollbar-width: thin;\n  scrollbar-color: var(--border-strong) transparent;\n}\n\n:is(.select__popup, .select__list--searchable, .popover-listbox__popup, .popover-listbox__list--searchable, .settings__body, .settings__nav, .settings__content)::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n:is(.select__popup, .select__list--searchable, .popover-listbox__popup, .popover-listbox__list--searchable, .settings__body, .settings__nav, .settings__content)::-webkit-scrollbar-track,\n:is(.select__popup, .select__list--searchable, .popover-listbox__popup, .popover-listbox__list--searchable, .settings__body, .settings__nav, .settings__content)::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n:is(.select__popup, .select__list--searchable, .popover-listbox__popup, .popover-listbox__list--searchable, .settings__body, .settings__nav, .settings__content)::-webkit-scrollbar-thumb {\n  background: var(--border-strong);\n  border-radius: var(--radius-4);\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: var(--space-8);\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: var(--space-8);\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: var(--space-8);\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: var(--space-8);\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 sideValuesFieldStyles = ".side-values {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.side-values__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\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: var(--space-8);\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: var(--space-8);\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: var(--space-8);\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 tooltipStyles = ".tooltip__trigger {\n  display: inline-flex;\n}\n\n.tooltip__trigger[data-tooltip-trigger-disabled] > * {\n  pointer-events: none;\n}\n\n.tooltip__positioner {\n  z-index: 35;\n  pointer-events: auto;\n}\n\n.tooltip__popup {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-8);\n  width: max-content;\n  max-width: min(320px, calc(100vw - var(--space-24)));\n  padding: var(--space-4) var(--space-8);\n  border: 0;\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\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.3;\n}\n\n.tooltip__popup[data-open] {\n  animation: tooltip-enter 150ms ease-out;\n}\n\n@keyframes tooltip-enter {\n  from {\n    transform: scale(0.9);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tooltip__popup[data-open] {\n    animation: none;\n  }\n}\n\n.tooltip__content {\n  min-width: 0;\n  position: relative;\n  z-index: 1;\n}\n\n.tooltip__shortcut {\n  flex: 0 0 auto;\n  position: relative;\n  z-index: 1;\n  color: var(--text-secondary);\n  font: inherit;\n  line-height: inherit;\n  white-space: nowrap;\n}\n";
 const toastStyles = ".toast__viewport {\n  position: fixed;\n  /* Sit just above the canvas toolbar: its bottom offset, its height (an\n     xlarge control plus padding), then a small gap. */\n  bottom: calc(var(--space-20) + var(--control-height-xlarge) + var(--space-8) + var(--space-12));\n  left: 50%;\n  z-index: 50;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  gap: var(--space-8);\n  width: max-content;\n  max-width: calc(100vw - var(--space-24));\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n\n/* Match the canvas toolbar, which centers in the space left of the panel. */\n.toast__viewport[data-inspector-open=\"true\"] {\n  left: calc((100vw - var(--panel-width)) / 2);\n  max-width: calc(100vw - var(--panel-width) - var(--space-24));\n}\n\n.toast {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-8);\n  max-width: min(360px, calc(100vw - var(--space-24)));\n  padding: var(--space-8) var(--space-12);\n  border-radius: var(--radius-pill);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\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.3;\n  pointer-events: auto;\n  transition: opacity 150ms ease-out, transform 150ms ease-out;\n}\n\n.toast[data-starting-style],\n.toast[data-ending-style] {\n  opacity: 0;\n  transform: translateY(var(--space-8)) scale(0.96);\n}\n\n.toast[data-limited] {\n  display: none;\n}\n\n.toast__icon {\n  flex: 0 0 auto;\n  color: var(--success);\n}\n\n.toast[data-tone=\"error\"] {\n  border-radius: var(--radius-12);\n}\n\n.toast[data-tone=\"error\"] .toast__icon {\n  color: var(--danger);\n}\n\n.toast__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n\n.toast__title {\n  margin: 0;\n  font-size: inherit;\n  font-weight: var(--font-weight-base);\n}\n\n.toast__description {\n  margin: 0;\n  color: var(--text-secondary);\n  overflow-wrap: anywhere;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast {\n    transition: none;\n  }\n}\n";
 const inlineStyleWarningStyles = ".inline-style-warning {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: var(--text-secondary);\n  color: var(--surface-raised-2x);\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n  cursor: help;\n}\n\n.inline-style-warning:focus-visible {\n  outline: 0;\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.inline-style-warning__symbol {\n  display: block;\n  line-height: 1;\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  cursor: default;\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__menu {\n  width: max(var(--anchor-width), 280px);\n  max-width: calc(100vw - 24px);\n}\n\n.copy-prompt__menu-item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-8);\n  padding: var(--space-8);\n  border-radius: var(--radius-4);\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n  cursor: pointer;\n  outline: 0;\n}\n\n.copy-prompt__menu-item[data-highlighted] {\n  background: var(--surface-control);\n}\n\n.copy-prompt__menu-icon {\n  flex: 0 0 auto;\n  color: var(--text-secondary);\n}\n\n.copy-prompt__menu-icon--live {\n  color: var(--accent);\n}\n\n.copy-prompt__menu-content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n\n.copy-prompt__menu-title {\n  font-weight: var(--font-weight-base);\n}\n\n.copy-prompt__menu-description {\n  color: var(--text-secondary);\n  overflow-wrap: anywhere;\n}\n\n.copy-prompt__menu-description--truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.copy-prompt__menu-item--sketch {\n  align-items: center;\n  padding-right: calc(var(--control-height-small) + var(--space-8));\n}\n\n.copy-prompt__menu-row {\n  position: relative;\n}\n\n.copy-prompt__menu-delete {\n  position: absolute;\n  top: 50%;\n  right: var(--space-8);\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: opacity 120ms ease;\n}\n\n.copy-prompt__menu-row:hover .copy-prompt__menu-delete,\n.copy-prompt__menu-row:focus-within .copy-prompt__menu-delete {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.copy-prompt__menu-item[data-disabled] {\n  color: var(--text-muted-subtle);\n  cursor: default;\n}\n\n.copy-prompt__menu-separator {\n  height: 1px;\n  margin: var(--space-4) 0;\n  background: var(--border-subtle);\n}\n\n.copy-prompt__menu-description code {\n  font-family: var(--font-mono);\n}\n\n.agent-status-button {\n  position: relative;\n}\n\n.agent-status-button__avatars {\n  display: inline-flex;\n  align-items: center;\n}\n\n.agent-status-button__avatar {\n  width: 20px;\n  height: 20px;\n  display: block;\n  background: var(--surface-raised-2x);\n  border-radius: 50%;\n  box-shadow: 0 0 0 1px var(--border-subtle);\n  padding: 2px;\n}\n\n.agent-status-button__avatar svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.agent-status-button__avatar + .agent-status-button__avatar {\n  margin-left: calc(var(--space-4) * -1);\n}\n\n.agent-status-button__dot {\n  position: absolute;\n  top: 50%;\n  right: 3px;\n  width: 6px;\n  height: 6px;\n  transform: translateY(-50%);\n  border-radius: 50%;\n  background: var(--text-muted);\n}\n\n.agent-status-button[data-mcp-listening=\"true\"] .agent-status-button__dot {\n  background: var(--success);\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--implemented {\n  font-size: var(--font-size-base);\n}\n\n.copy-prompt__hint-action {\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n\n.copy-prompt__hint-action:hover {\n  color: var(--text-primary);\n}\n\n.copy-prompt__hint-action:focus-visible {\n  border-radius: var(--radius-4);\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\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: var(--space-8);\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.style-state {\n  grid-template-columns: var(--label-column) minmax(0, 1fr);\n  column-gap: var(--space-8);\n}\n\n.scope {\n  margin-top: var(--space-8);\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\n.dom-navigator,\n.dom-navigator-preview {\n  position: fixed;\n  pointer-events: none;\n}\n\n.dom-navigator {\n  display: flex;\n  align-items: center;\n  min-height: var(--control-height-small);\n  border-radius: var(--radius-4);\n  background: var(--accent);\n  color: var(--surface-raised-2x);\n  z-index: 2;\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: 0;\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  justify-content: center;\n  width: var(--control-height-small);\n  padding: 0;\n  border-radius: var(--radius-4);\n  background: transparent;\n  color: var(--surface-raised-2x);\n  box-shadow: none;\n}\n\n.dom-navigator__label {\n  padding-right: var(--space-8);\n  white-space: nowrap;\n}\n\n.dom-navigator__positioner {\n  z-index: 2;\n  pointer-events: auto;\n}\n\n.dom-navigator__menu {\n  display: grid;\n  min-width: 140px;\n  padding: var(--space-4);\n  gap: var(--space-4);\n  border: 0;\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\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  border-radius: var(--radius-4);\n  background: transparent;\n  text-align: left;\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n}\n\n.dom-navigator__trigger:hover {\n  background: var(--surface-well);\n  color: var(--surface-raised-2x);\n}\n\n.dom-navigator__trigger:focus-visible {\n  background: var(--surface-well);\n  color: var(--surface-raised-2x);\n  outline: 1px solid currentColor;\n  outline-offset: -3px;\n}\n\n.dom-navigator__item:hover,\n.dom-navigator__item:focus-visible {\n  background: var(--surface-well);\n  outline: 0;\n}\n\n.dom-navigator__item--selected {\n  background: var(--accent-surface);\n}\n\n.dom-navigator-preview {\n  z-index: 1;\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\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  cursor: default;\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-block: var(--space-12);\n  padding-inline: var(--space-16);\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__row {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-8);\n  width: 100%;\n}\n\n.copy-prompt__clear-changes.icon-button {\n  flex: 0 0 auto;\n  width: var(--control-height-large);\n  height: var(--control-height-large);\n}\n\n.copy-prompt__main.button {\n  flex: 1 1 auto;\n  min-width: 0;\n  position: relative;\n}\n\n.copy-prompt__menu {\n  width: max(var(--anchor-width), 280px);\n  max-width: calc(100vw - 24px);\n}\n\n.copy-prompt__menu-item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-8);\n  padding: var(--space-8);\n  border-radius: var(--radius-4);\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n  cursor: pointer;\n  outline: 0;\n}\n\n.copy-prompt__menu-item[data-highlighted] {\n  background: var(--surface-control);\n}\n\n.copy-prompt__menu-icon {\n  flex: 0 0 auto;\n  color: var(--text-secondary);\n}\n\n.copy-prompt__menu-icon--live {\n  color: var(--accent);\n}\n\n.copy-prompt__menu-content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n\n.copy-prompt__menu-title {\n  font-weight: var(--font-weight-base);\n}\n\n.copy-prompt__menu-description {\n  color: var(--text-secondary);\n  overflow-wrap: anywhere;\n}\n\n.copy-prompt__menu-description--truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.copy-prompt__menu-item--sketch {\n  align-items: center;\n  padding-right: calc(var(--control-height-small) + var(--space-8));\n}\n\n.copy-prompt__menu-row {\n  position: relative;\n}\n\n.copy-prompt__menu-delete {\n  position: absolute;\n  top: 50%;\n  right: var(--space-8);\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: opacity 120ms ease;\n}\n\n.copy-prompt__menu-row:hover .copy-prompt__menu-delete,\n.copy-prompt__menu-row:focus-within .copy-prompt__menu-delete {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.copy-prompt__menu-item[data-disabled] {\n  color: var(--text-muted-subtle);\n  cursor: default;\n}\n\n.copy-prompt__menu-separator {\n  height: 1px;\n  margin: var(--space-4) 0;\n  background: var(--border-subtle);\n}\n\n.copy-prompt__menu-description code {\n  font-family: var(--font-mono);\n}\n\n.agent-status-button {\n  position: relative;\n}\n\n.agent-status-button__avatars {\n  display: inline-flex;\n  align-items: center;\n}\n\n.agent-status-button__avatar {\n  width: 20px;\n  height: 20px;\n  display: block;\n  background: var(--surface-raised-2x);\n  border-radius: 50%;\n  box-shadow: 0 0 0 1px var(--border-subtle);\n  padding: 2px;\n}\n\n.agent-status-button__avatar svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.agent-status-button__avatar + .agent-status-button__avatar {\n  margin-left: calc(var(--space-4) * -1);\n}\n\n.agent-status-button__dot {\n  position: absolute;\n  top: 50%;\n  right: 3px;\n  width: 6px;\n  height: 6px;\n  transform: translateY(-50%);\n  border-radius: 50%;\n  background: var(--text-muted);\n}\n\n.agent-status-button[data-mcp-listening=\"true\"] .agent-status-button__dot {\n  background: var(--success);\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--implemented {\n  font-size: var(--font-size-base);\n}\n\n.copy-prompt__hint-action {\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n\n.copy-prompt__hint-action:hover {\n  color: var(--text-primary);\n}\n\n.copy-prompt__hint-action:focus-visible {\n  border-radius: var(--radius-4);\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\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 var(--space-16) 28px;\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: var(--space-8);\n  padding: var(--space-8) 0;\n  border-bottom: 1px solid var(--border-subtle);\n}\n\n.style-state {\n  grid-template-columns: var(--label-column) minmax(0, 1fr);\n  column-gap: var(--space-8);\n}\n\n.scope {\n  margin-top: var(--space-8);\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  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/* One component section: name with link status, props and state share a single border. */\n/* Doubled class: .editor__title-row, declared later, would otherwise win with space-between. */\n.editor__title-row.selection__name {\n  justify-content: flex-start;\n  gap: var(--space-4);\n}\n\n.selection__linked-icon {\n  flex: 0 0 auto;\n  color: var(--linked);\n}\n\n/* The status text sits beside the title; only the action button stays at the end. */\n.selection__scope,\n.selection__scope .scope__linked,\n.selection__scope .scope__unlinked {\n  display: contents;\n}\n\n.selection__name .icon-button {\n  margin-inline-start: auto;\n}\n\n.selection .selection__scope {\n  padding: 0;\n  background: transparent;\n  color: var(--text-primary);\n}\n\n.selection .component-props {\n  padding: 0;\n  border-bottom: 0;\n}\n\n.component-props__hint {\n  font-size: var(--font-size-base);\n  color: var(--text-secondary);\n  line-height: 1.5;\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  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: var(--space-8);\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\n.dom-navigator,\n.dom-navigator-preview {\n  position: fixed;\n  pointer-events: none;\n}\n\n.dom-navigator {\n  display: flex;\n  align-items: center;\n  min-height: var(--control-height-small);\n  border-radius: var(--radius-4);\n  background: var(--accent);\n  color: var(--surface-raised-2x);\n  z-index: 2;\n  pointer-events: auto;\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n}\n\n.dom-navigator__row {\n  position: relative;\n  display: grid;\n}\n\n.dom-navigator__expander {\n  appearance: none;\n  position: absolute;\n  top: 50%;\n  z-index: 1;\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: var(--radius-4);\n  background: transparent;\n  color: var(--text-muted);\n  transform: translateY(-50%);\n}\n\n.dom-navigator__expander:hover,\n.dom-navigator__expander:focus-visible {\n  background: var(--surface-well-2x);\n  color: var(--text-primary);\n  outline: 0;\n}\n\n.dom-navigator__more {\n  padding-block: var(--space-4);\n  color: var(--text-muted);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n}\n\n.dom-navigator[data-linked=\"true\"] {\n  background: var(--linked);\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: 0;\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  justify-content: center;\n  width: var(--control-height-small);\n  padding: 0;\n  border-radius: var(--radius-4);\n  background: transparent;\n  color: var(--surface-raised-2x);\n  box-shadow: none;\n}\n\n.dom-navigator__label {\n  padding-right: var(--space-8);\n  white-space: nowrap;\n}\n\n.dom-navigator__positioner {\n  z-index: 2;\n  pointer-events: auto;\n}\n\n.dom-navigator__menu {\n  display: grid;\n  min-width: 140px;\n  max-height: min(60vh, 360px);\n  overflow-y: auto;\n  scrollbar-width: thin;\n  padding: var(--space-4);\n  gap: var(--space-4);\n  border: 0;\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\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  border-radius: var(--radius-4);\n  background: transparent;\n  text-align: left;\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n}\n\n.dom-navigator__trigger:hover {\n  background: var(--surface-well);\n  color: var(--surface-raised-2x);\n}\n\n.dom-navigator__trigger:focus-visible {\n  background: var(--surface-well);\n  color: var(--surface-raised-2x);\n  outline: 1px solid currentColor;\n  outline-offset: -3px;\n}\n\n.dom-navigator__item:hover,\n.dom-navigator__item:focus-visible {\n  background: var(--surface-well);\n  outline: 0;\n}\n\n.dom-navigator__item--selected {\n  background: var(--accent-surface);\n}\n\n.dom-navigator-preview {\n  z-index: 1;\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__icon svg { display: block; width: 100%; height: auto; }\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__hint {\n  max-width: 28ch;\n  margin: 0;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  text-wrap: balance;\n}\n\n.empty-state__hint kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--control-height-small);\n  height: var(--control-height-small);\n  padding: var(--space-0) var(--space-8);\n  border-radius: var(--radius-4);\n  background: var(--surface-raised-2x);\n  font-family: var(--font-family);\n  font-size: var(--font-size-small);\n  box-shadow: var(--shadow-control);\n}\n.empty-state__shortcuts { width: 100%; margin-top: var(--space-32); text-align: left; }\n.empty-state__shortcuts .disclosure__panel { padding-top: var(--space-16); }\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-8);\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\n.box-shadow-editor__layers,\n.box-shadow-editor__layer {\n  display: grid;\n  gap: var(--space-8);\n}\n\n.box-shadow-editor__dimensions {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n\n.box-shadow-editor__layer {\n  grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n  align-items: center;\n}\n\n.box-shadow-editor__layer + .box-shadow-editor__layer {\n  padding-top: var(--space-12);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.box-shadow-editor__remove {\n  grid-column: 2;\n  grid-row: 1;\n}\n\n.box-shadow-editor__color {\n  grid-column: 1;\n}\n\n.box-shadow-editor__dimensions > .control-surface {\n  --control-surface-padding: 2px 4px;\n}\n\n.box-shadow-editor__dimensions .token-field {\n  gap: var(--space-4);\n}\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}\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-8);\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\n.box-shadow-editor__layers,\n.box-shadow-editor__layer {\n  display: grid;\n  gap: var(--space-8);\n}\n\n.box-shadow-editor__dimensions {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-8);\n}\n\n.box-shadow-editor__layer {\n  grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n  align-items: center;\n}\n\n.box-shadow-editor__layer + .box-shadow-editor__layer {\n  padding-top: var(--space-12);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.box-shadow-editor__remove {\n  grid-column: 2;\n  grid-row: 1;\n}\n\n.box-shadow-editor__color {\n  grid-column: 1;\n}\n\n.box-shadow-editor__dimensions > .control-surface {\n  --control-surface-padding: 2px 4px;\n}\n\n.box-shadow-editor__dimensions .token-field {\n  gap: var(--space-4);\n}\n";
 const backgroundEditorStyles = ".background-editor,\n.background-editor__gradient,\n.background-editor__raw {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.background-editor__track {\n  position: relative;\n  height: 28px;\n  margin: var(--space-8) 0 var(--space-12);\n  border: 1px solid var(--border-subtle);\n  background-clip: padding-box;\n  border-radius: var(--radius-4);\n  cursor: crosshair;\n  touch-action: none;\n}\n\n.background-editor__stop {\n  position: absolute;\n  top: 19px;\n  width: 16px;\n  height: 20px;\n  padding: 0;\n  transform: translateX(-50%);\n  border: 2px solid var(--surface-raised-2x);\n  border-radius: var(--radius-4);\n  box-shadow: var(--shadow-outline), 0 2px 4px var(--border-medium);\n  outline: none;\n  cursor: grab;\n  touch-action: none;\n}\n\n.background-editor__stop:active { cursor: grabbing; }\n.background-editor__stop:disabled { cursor: default; }\n\n.background-editor__toolbar {\n  display: flex;\n  gap: var(--space-8);\n  align-items: center;\n}\n\n.background-editor__toolbar > .select,\n.background-editor__toolbar > .control-surface {\n  flex: 1;\n  min-width: 0;\n}\n\n.background-editor__stop-row {\n  display: grid;\n  grid-template-columns: 56px minmax(0, 1fr) auto;\n  gap: var(--space-8);\n  align-items: center;\n}\n\n.background-editor__stop-row > .control-surface { min-width: 0; }\n\n.background-editor__hint {\n  font-size: var(--font-size-base);\n  color: var(--text-secondary);\n  line-height: 1.5;\n}\n\n.image-background {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.image-background__grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-8);\n  align-items: center;\n}\n\n.image-background__tile {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  height: var(--control-height-large);\n  min-height: 0;\n  min-width: 0;\n  gap: var(--space-8);\n  padding: 0;\n  text-align: left;\n}\n\n.image-background__tile:hover:not(:disabled) {\n  background: transparent;\n}\n\n.image-background__thumb {\n  width: var(--control-height-large);\n  height: var(--control-height-large);\n  flex: none;\n  object-fit: cover;\n  border-radius: var(--radius-4);\n  background: var(--surface-well);\n}\n\n.image-background__title {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.background-editor__layer,\n.background-editor__content,\n.background-editor__solid {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.background-editor__layer + .background-editor__layer {\n  padding-top: var(--space-12);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.background-editor__type-row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n}\n\n.background-editor__type-row > .segmented-control {\n  flex: 1;\n  min-width: 0;\n}\n\n.background-editor__blend-space {\n  flex: none;\n  width: var(--control-height-large);\n  height: var(--control-height-large);\n}\n\n.background-editor__type-row .segmented-control__button {\n  padding-inline: var(--space-4);\n}\n";
-const borderEditorStyles = ".border__linked-row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\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: var(--space-8);\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: var(--space-8);\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-8);\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: var(--space-8);\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: var(--space-8);\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  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.layout__grid-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n\n.layout__grid-gap-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__grid-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\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: var(--space-8);\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: var(--space-8);\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-heading,\n.layout__direction-tools {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n  gap: var(--space-8);\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: var(--space-8);\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  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.layout__gap-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__spacing-primary {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n  gap: var(--space-8);\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  /*\n   * Fill the surface and lay out as a row so the token field gets the surface's\n   * height. A column's min-height:auto pins it to the 32px embedded input, which\n   * pushes a raw value 2px low; without the stretch a token chip collapses to\n   * its text height.\n   */\n  align-self: stretch;\n  flex-direction: row;\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 borderEditorStyles = ".border__linked-row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\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: var(--space-8);\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: var(--space-8);\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: var(--space-8);\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: repeat(2, minmax(0, 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: var(--space-4);\n  padding-top: var(--space-8);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.layout__group--bottom-rule {\n  margin-top: 0;\n  margin-bottom: var(--space-4);\n  padding-top: 0;\n  padding-bottom: var(--space-8);\n  border-top: 0;\n  border-bottom: 1px solid var(--border-subtle);\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.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: var(--space-8);\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; position: relative; }\n\n/* Flags a non-default value hidden behind the expander. */\n.layout__size-cell--toggle[data-modified=\"true\"]::after {\n  position: absolute;\n  top: var(--space-4);\n  right: var(--space-4);\n  width: 6px;\n  height: 6px;\n  border-radius: var(--radius-pill);\n  background: var(--accent);\n  content: \"\";\n}\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.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: var(--space-4);\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.layout__grid-primary {\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: start;\n}\n\n.layout__grid-gap-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n}\n\n.layout__grid-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\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: var(--space-8);\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: var(--space-8);\n}\n\n.layout__grid-advanced {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.inspector-popover__popup:has(> .layout__flex-child-settings),\n.inspector-popover__popup:has(> .layout__options) {\n  padding: var(--space-16);\n}\n\n.inspector-popover__popup:has(> .layout__options) {\n  padding-block-start: var(--space-8);\n}\n\n.layout__grid-value {\n  min-width: 0;\n}\n\n.layout__flex-heading {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.layout__mode-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: center;\n}\n\n.layout__mode-control {\n  grid-column: 1 / span 2;\n}\n\n.layout__options {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--space-16);\n  min-width: 240px;\n}\n\n.layout__options-pair {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-8);\n}\n\n.layout__options-pair .field-row,\n.layout__options-pair .field-row__control {\n  min-width: 0;\n}\n\n.layout__flex {\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: start;\n}\n\n.layout__flex-gaps,\n.layout__flex-toggles {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.layout__flex .layout__alignment-grid {\n  width: 100%;\n  aspect-ratio: 1;\n  grid-template-rows: repeat(3, minmax(0, 1fr));\n}\n\n.layout__flex .layout__alignment-button {\n  min-height: 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__spacing-field {\n  color: var(--text-muted);\n}\n\n/* A trailing faint value and chevron need the room the gaps between a field's parts would take. */\n.layout__spacing-field .token-field:has(.token-field__trailing) {\n  gap: var(--space-4);\n}\n\n.layout__spacing-field .token-field__trailing {\n  gap: 0;\n}\n\n.layout__spacing-field .token-field__trailing .icon-button {\n  margin-inline-end: calc(var(--space-4) * -1);\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  /*\n   * Fill the surface and lay out as a row so the token field gets the surface's\n   * height. A column's min-height:auto pins it to the 32px embedded input, which\n   * pushes a raw value 2px low; without the stretch a token chip collapses to\n   * its text height.\n   */\n  align-self: stretch;\n  flex-direction: row;\n  min-width: 0;\n  width: 100%;\n}\n\n.layout__flex-child-fields {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-8);\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: var(--space-4);\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: var(--space-8);\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: var(--space-4);\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\n.layout__resolved {\n  /* Leaves room for the media query bars at the field's right edge. */\n  margin-inline-end: var(--space-4);\n  padding-inline-start: var(--space-4);\n  color: var(--text-muted-subtle);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\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(--text-secondary);\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  box-shadow: var(--shadow-control);\n  margin-right: calc((var(--space-8) - var(--control-surface-inset, 2px)) * -1);\n  align-self: stretch;\n  padding-left: var(--space-8);\n  border-radius: calc(var(--radius-control) - var(--control-surface-inset, 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  margin-right: 0;\n  padding-right: var(--space-8);\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--small .token-chip__trigger {\n  width: auto;\n  /* A button's auto width never shrinks below its text; cap it so the label ellipsizes. */\n  max-width: 100%;\n}\n\n.token-chip__picker {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\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  max-width: 100%;\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}";
+const tokenChipStyles = ".token-chip {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-control-outline);\n  margin-right: calc((var(--space-8) - var(--control-surface-inset, 2px)) * -1);\n  align-self: stretch;\n  padding-left: var(--space-8);\n  border-radius: calc(var(--radius-control) - var(--control-surface-inset, 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  margin-right: 0;\n  padding-right: var(--space-8);\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--small .token-chip__trigger {\n  width: auto;\n  /* A button's auto width never shrinks below its text; cap it so the label ellipsizes. */\n  max-width: 100%;\n}\n\n.token-chip__picker {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\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  max-width: 100%;\n  gap: 3px;\n}\n\n.token-chip__label {\n  min-width: 0;\n  flex: 1;\n  text-align: left;\n}\n\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}";
 const tokenFieldStyles = ".token-field {\n  display: flex;\n  flex: 1 1 auto;\n  align-self: stretch;\n  align-items: center;\n  gap: var(--space-8);\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--blocked {\n  cursor: not-allowed;\n}\n\n.token-field--blocked > .popover-listbox,\n.token-field--blocked > .token-chip,\n.token-field--blocked > .token-opacity-input {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.token-field--blocked .text-input,\n.token-field--blocked .token-chip__trigger,\n.token-field--blocked .token-color-control,\n.token-field--blocked .token-color-control__input {\n  cursor: not-allowed;\n}\n\n.token-field--blocked > .inline-style-warning {\n  margin-inline-start: 2px;\n}\n\n.token-field > .popover-listbox,\n.token-field > .select {\n  flex: 1;\n  min-width: 0;\n}\n\n.token-shortcut {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 var(--space-4);\n  border-radius: var(--radius-4);\n  background: var(--surface-well);\n  color: var(--text-secondary);\n  font: inherit;\n  font-size: var(--font-size-small);\n  line-height: 1;\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 var(--space-8);\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 var(--space-8);\n}\n\n.token-color-control[data-resolved=\"false\"] .color-swatch {\n  background: repeating-conic-gradient(var(--border-strong) 0 25%, var(--surface-raised-2x) 0 50%) 50% / var(--space-8) var(--space-8);\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__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  box-sizing: border-box;\n  min-width: 18px;\n  padding: 2px 5px;\n  border-radius: var(--radius-pill);\n  background: var(--surface-control);\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n  font-variant-numeric: tabular-nums;\n  line-height: 14px;\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: 0;\n  padding: 0;\n}\n\n.changes__group + .changes__group {\n  margin-top: var(--space-4);\n  padding-top: var(--space-4);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.changes__row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  min-height: var(--control-height-small);\n  padding: var(--space-8) 0;\n  font-size: var(--font-size-base);\n}\n\n.changes__row + .changes__row {\n  margin-top: 0;\n  padding-top: var(--space-8);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.changes__summary {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.changes__target,\n.changes__action {\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.changes__target {\n  color: var(--text-primary);\n  font-weight: var(--font-weight-label);\n}\n\n.changes__action {\n  color: var(--text-secondary);\n}\n\n.changes__row--sketch .changes__target {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n\n.changes__row--sketch .changes__action {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.changes__metadata {\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.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-left: auto;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 120ms ease;\n}\n\n/* Keep the revert control out of the way until its row is hovered or focused. */\n.changes__row:hover .changes__revert,\n.changes__row:focus-within .changes__revert {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .changes__revert {\n    transition: none;\n  }\n}\n\n.panel__copy[data-copied=\"true\"] {\n  background: #2eaf67;\n  color: #ffffff;\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: var(--space-8);\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  box-sizing: border-box;\n  min-width: 18px;\n  padding: 2px 5px;\n  border-radius: var(--radius-pill);\n  background: var(--surface-control);\n  color: var(--text-muted);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n  font-variant-numeric: tabular-nums;\n  line-height: 14px;\n  text-align: center;\n}\n\n.copy-prompt__main .copy-prompt__change-count {\n  background: rgba(255, 255, 255, 0.14);\n  color: var(--text-inverse);\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: 0;\n  padding: 0;\n}\n\n.changes__group + .changes__group {\n  margin-top: var(--space-4);\n  padding-top: var(--space-4);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.changes__row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  min-height: var(--control-height-small);\n  padding: var(--space-8) 0;\n  font-size: var(--font-size-base);\n}\n\n.changes__row + .changes__row {\n  margin-top: 0;\n  padding-top: var(--space-8);\n  border-top: 1px solid var(--border-subtle);\n}\n\n.changes__summary {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.changes__target,\n.changes__action {\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.changes__target {\n  color: var(--text-primary);\n  font-weight: var(--font-weight-label);\n}\n\n.changes__action {\n  color: var(--text-secondary);\n}\n\n.changes__row--sketch .changes__target {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n\n.changes__row--sketch .changes__action {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.changes__metadata {\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.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-left: auto;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 120ms ease;\n}\n\n/* Keep the revert control out of the way until its row is hovered or focused. */\n.changes__row:hover .changes__revert,\n.changes__row:focus-within .changes__revert {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .changes__revert {\n    transition: none;\n  }\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: 0;\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  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-8);\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-20);\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) var(--space-40) var(--space-12) 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-block {\n  position: relative;\n  min-width: 0;\n}\n\n.mcp-connection__copy-button.icon-button {\n  position: absolute;\n  top: var(--space-8);\n  right: var(--space-8);\n}\n\n.mcp-connection__timeline-content > .mcp-connection__section-title + .mcp-connection__copy {\n  margin-top: var(--space-12);\n}\n\n.mcp-connection__timeline-step:last-child .mcp-connection__timeline-content {\n  gap: 0;\n}\n\n.mcp-connection__timeline-step:last-child .mcp-connection__copy {\n  margin-top: 0;\n}\n\n.mcp-connection__command-block + .mcp-connection__copy {\n  margin-top: var(--space-8);\n}\n\n.mcp-connection__details {\n  margin-top: 48px;\n}\n\n.mcp-connection__details .disclosure__panel {\n  display: grid;\n  gap: var(--space-8);\n}\n\n.mcp-connection__details .disclosure__panel[hidden] {\n  display: none;\n}\n\n.mcp-connection__details .mcp-connection__copy {\n  margin-top: var(--space-8);\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";
 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: 600px;\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: var(--font-size-base);\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  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding: var(--space-16) var(--space-8) var(--space-8);\n  background: var(--surface-panel);\n}\n\n.settings__reset-canvas {\n  margin-top: auto;\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-thumbnail {\n  flex: 0 0 auto;\n  width: 24px;\n  height: 24px;\n  margin: 0;\n  border-radius: var(--radius-4);\n  background: var(--surface-panel);\n  box-shadow: var(--shadow-control);\n  object-fit: cover;\n  transform: rotate(-7deg);\n}\n\n.sketch-thumbnail--empty {\n  border: 1px solid var(--border-subtle);\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  display: grid;\n  grid-template-rows: 0fr;\n  margin: 0 calc(-1 * var(--space-8)) 0;\n  border-radius: var(--radius-12) var(--radius-12) 0 0;\n  background: var(--warning-surface);\n  opacity: 0;\n  transition: grid-template-rows 180ms ease, opacity 140ms ease, margin 180ms ease;\n}\n\n/* Bleed the banner to the panel's top edge only while it is open, so the closed\n   banner does not eat the panel padding above the note input. */\n.sketch__prompt-error[data-open=\"true\"] {\n  grid-template-rows: 1fr;\n  margin-top: calc(-1 * var(--space-8));\n  margin-bottom: var(--space-8);\n  opacity: 1;\n}\n\n.sketch__prompt-error-clip {\n  min-height: 0;\n  overflow: hidden;\n}\n\n.sketch__prompt-error-body {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-8);\n  padding: var(--space-8) var(--space-16);\n  border-bottom: 1px solid var(--border-subtle);\n  color: var(--content-primary, var(--text-primary));\n  font-size: var(--font-size-base);\n  line-height: var(--space-16);\n}\n\n.sketch__prompt-error-icon {\n  flex: none;\n  color: var(--warning);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sketch__prompt-error {\n    transition: none;\n  }\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__target-surface {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: auto;\n  touch-action: none;\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: none;\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  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-8);\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: var(--space-8);\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";
+const sketchStyles = ".sketch-thumbnail {\n  flex: 0 0 auto;\n  width: 24px;\n  height: 24px;\n  margin: 0;\n  border-radius: var(--radius-4);\n  background: var(--surface-panel);\n  box-shadow: var(--shadow-control);\n  object-fit: cover;\n  transform: rotate(-7deg);\n}\n\n.sketch-thumbnail--empty {\n  border: 1px solid var(--border-subtle);\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  /* Outside the active frame's 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  display: grid;\n  grid-template-rows: 0fr;\n  margin: 0 calc(-1 * var(--space-8)) 0;\n  border-radius: var(--radius-12) var(--radius-12) 0 0;\n  background: var(--warning-surface);\n  opacity: 0;\n  transition: grid-template-rows 180ms ease, opacity 140ms ease, margin 180ms ease;\n}\n\n/* Bleeds to the panel's top edge only while open, so the closed banner does\n   not eat the padding above the note input. */\n.sketch__prompt-error[data-open=\"true\"] {\n  grid-template-rows: 1fr;\n  margin-top: calc(-1 * var(--space-8));\n  margin-bottom: var(--space-8);\n  opacity: 1;\n}\n\n.sketch__prompt-error-clip {\n  min-height: 0;\n  overflow: hidden;\n}\n\n.sketch__prompt-error-body {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-8);\n  padding: var(--space-8) var(--space-16);\n  border-bottom: 1px solid var(--border-subtle);\n  color: var(--content-primary, var(--text-primary));\n  font-size: var(--font-size-base);\n  line-height: var(--space-16);\n}\n\n.sketch__prompt-error-icon {\n  flex: none;\n  color: var(--warning);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sketch__prompt-error {\n    transition: none;\n  }\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__target-surface {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: auto;\n  touch-action: none;\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: none;\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  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-8);\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: var(--space-8);\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";
 export const UI_STYLES = [
     DRAG_CURSOR_STYLES,
     foundationStyles,
@@ -72,7 +71,6 @@ export const UI_STYLES = [
     layoutComboFieldStyles,
     tokenChipStyles,
     tokenFieldStyles,
-    tokenDropdownStyles,
     tokensPanelStyles,
     changesLogStyles,
     promptSettingsStyles,

package/dist/inspector/workspace/controller.js

@@ -1,8 +1,11 @@
 import { getCanvasCards, getFocusedCardId, getSelectedCardId, subscribe as subscribeCanvas, setCanvasHistoryActivator, } from "../canvas/canvasStore.js";
 import { subscribeCanvasView } from "../canvas/viewStore.js";
 import { loadComments } from "../comments/store.js";
-import { loadDrafts, activateDraft, activateDraftForCard, draftIdForCard, getActiveDraftChanges, subscribeDrafts, } from "../drafts/store.js";
+import { loadDrafts, activateDraft, activateDraftForCard, draftIdForCard, forgetDraft, getActiveDraftChanges, isDraftLocked, subscribeDrafts, } from "../drafts/store.js";
 import { applicationTarget, targetKey } from "../drafts/model.js";
+import { iterationId, contentEditTarget } from "../canvas/frameContent.js";
+import { setFrameLifecycle } from "../canvas/frameLifecycle.js";
+import { removeHtmlArtifact } from "../iterations/client.js";
 import { hydrateSession, enableAutoSave, scheduleAutoSave, flushAutoSave, resetAutoSave, } from "../canvas/sessionStore.js";
 import { releaseLease } from "../canvas/workspaceLease.js";
 import { subscribeClipboardHandoff } from "../prompt/clipboardHandoff.js";
@@ -15,6 +18,21 @@ export function startWorkspaceController() {
     loadDrafts(config.projectId, { persistent });
     const result = persistent ? hydrateSession() : { restored: false };
     const save = persistent ? scheduleAutoSave : () => undefined;
+    // Canvas reports a removed frame; drafts and artifacts decide what to release.
+    setFrameLifecycle({
+        canEdit: () => !isDraftLocked(),
+        release: (released, remaining) => {
+            const artifactId = iterationId(released);
+            if (!artifactId)
+                return;
+            if (remaining.some((content) => iterationId(content) === artifactId))
+                return;
+            forgetDraft(targetKey(contentEditTarget(released)));
+            void removeHtmlArtifact(artifactId).catch((error) => {
+                console.warn("Nudge UI could not remove an unused HTML iteration:", error);
+            });
+        },
+    });
     let active = "";
     const synchronize = () => {
         const cardId = getSelectedCardId() ?? getFocusedCardId() ?? getCanvasCards()[0]?.id;
@@ -59,6 +77,7 @@ export function startWorkspaceController() {
             window.removeEventListener("beforeunload", beforeunload);
             window.removeEventListener("pagehide", pagehide);
             setCanvasHistoryActivator(() => undefined);
+            setFrameLifecycle(null);
             resetAutoSave();
         },
     };