nudge-ui 0.2.3 → 0.2.5

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

@@ -10,14 +10,19 @@ export declare const DRAG_CURSOR_HOTSPOT: {
     readonly x: 14.4;
     readonly y: 12;
 };
+export type CursorImage = "design-select" | "drag" | "sketch" | "eraser" | "comment";
 export declare const DESIGN_SELECT_CURSOR_URL: string;
 export declare const DRAG_CURSOR_URL: string;
 export declare const SKETCH_CURSOR_URL: string;
+export declare const ERASER_CURSOR_URL: string;
 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 const COMMENT_CURSOR: string;
 export declare const PAN_CURSOR = "grab";
 export declare const DRAG_CURSOR: string;
 export declare const SKETCH_CURSOR: string;
+export declare const ERASER_CURSOR: string;
 export declare function rendererCursorValue(cursor: RendererCursor, commentCursor?: string): string;

package/dist/inspector/ui/customCursors.js

@@ -83,19 +83,35 @@ const SKETCH_CURSOR_SVG = `<svg width="20" height="20" viewBox="0 0 20 20" fill=
 </clipPath>
 </defs>
 </svg>`;
-function cursorDataUrl(svg) {
+const ERASER_CURSOR_SVG = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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.
+ */
+const CURSOR_IMAGE_BASE = globalThis.__NUDGE_UI_CURSOR_IMAGE_BASE__;
+function cursorImageUrl(name, svg) {
+    if (typeof CURSOR_IMAGE_BASE === "string")
+        return `${CURSOR_IMAGE_BASE}${name}.svg`;
     return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 }
-export const DESIGN_SELECT_CURSOR_URL = cursorDataUrl(DESIGN_SELECT_CURSOR_SVG);
-export const DRAG_CURSOR_URL = cursorDataUrl(DRAG_CURSOR_SVG);
-export const SKETCH_CURSOR_URL = cursorDataUrl(SKETCH_CURSOR_SVG);
+export const DESIGN_SELECT_CURSOR_URL = cursorImageUrl("design-select", DESIGN_SELECT_CURSOR_SVG);
+export const DRAG_CURSOR_URL = cursorImageUrl("drag", DRAG_CURSOR_SVG);
+export const SKETCH_CURSOR_URL = cursorImageUrl("sketch", SKETCH_CURSOR_SVG);
+export const ERASER_CURSOR_URL = cursorImageUrl("eraser", ERASER_CURSOR_SVG);
 export const DESIGN_SELECT_CURSOR = `url("${DESIGN_SELECT_CURSOR_URL}") 3 4, default`;
 /** Cursor SVGs are separate images, so resolve CSS tokens before encoding them. */
 export function createCommentCursor(tokenSource) {
+    return `url("${cursorImageUrl("comment", commentCursorSvg(tokenSource))}") 3 20, crosshair`;
+}
+function commentCursorSvg(tokenSource) {
     const styles = tokenSource?.ownerDocument.defaultView?.getComputedStyle(tokenSource);
     const token = (name) => styles?.getPropertyValue(name).trim()
         || foundationStyles.match(new RegExp(`${name}:\\s*([^;]+);`))[1].trim();
-    const svg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#comment-clip)"><g filter="url(#comment-shadow)">
 <path d="M4.3 16.1L3 20L7.7 19C11.659 20.922 16.608 19.942 19.274 16.707C21.94 13.472 21.5 8.983 18.245 6.206C14.99 3.43 9.926 3.225 6.4 5.726C2.874 8.228 1.976 12.663 4.3 16.1Z" fill="${token("--text-primary")}" stroke="${token("--surface-raised-2x")}" stroke-width="${token("--icon-stroke-width")}" stroke-linecap="round" stroke-linejoin="round"/>
 </g></g>
@@ -111,12 +127,22 @@ export function createCommentCursor(tokenSource) {
 </filter>
 <clipPath id="comment-clip"><rect width="24" height="24" fill="white"/></clipPath>
 </defs></svg>`;
-    return `url("${cursorDataUrl(svg)}") 3 20, crosshair`;
+}
+/** Image files for hosts that serve cursors from a base URL; the comment cursor uses default tokens. */
+export function cursorImageFiles() {
+    return {
+        "design-select": DESIGN_SELECT_CURSOR_SVG,
+        drag: DRAG_CURSOR_SVG,
+        sketch: SKETCH_CURSOR_SVG,
+        eraser: ERASER_CURSOR_SVG,
+        comment: commentCursorSvg(),
+    };
 }
 export const COMMENT_CURSOR = createCommentCursor();
 export const PAN_CURSOR = "grab";
 export const DRAG_CURSOR = `url("${DRAG_CURSOR_URL}") ${DRAG_CURSOR_HOTSPOT.x} ${DRAG_CURSOR_HOTSPOT.y}, grab`;
 export const SKETCH_CURSOR = `url("${SKETCH_CURSOR_URL}") 3 17, crosshair`;
+export const ERASER_CURSOR = `url("${ERASER_CURSOR_URL}") 10 10, cell`;
 export function rendererCursorValue(cursor, commentCursor = COMMENT_CURSOR) {
     return cursor === "comment" ? commentCursor : cursor === "drag" ? PAN_CURSOR : DESIGN_SELECT_CURSOR;
 }

package/dist/inspector/ui/styles.js

@@ -2,7 +2,7 @@ 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 controlSurfaceStyles = "/*\n * A single visual boundary for a field. Standalone text inputs and selects\n * share these defaults; composed fields use ControlSurface and make their\n * content embedded so only this element paints control chrome.\n */\n.control-surface,\n.text-input,\n.select {\n  --control-surface-height: var(--control-height-large);\n  --control-surface-padding: 2px 8px;\n  --control-surface-gap: 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: 2px 8px 2px 2px;\n}\n\n.control-surface--compact,\n.text-input--compact,\n.select--compact {\n  --control-surface-height: var(--control-height-small);\n  --control-surface-padding: 0 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 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";
@@ -17,26 +17,27 @@ const menuScrollbarStyles = ":is(.select__popup, .select__list--searchable, .pop
 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 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 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(--warning, #b45309);\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 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 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.selection__summary {\n  display: grid;\n  gap: 2px;\n}\n\n.selection__count {\n  color: var(--text-primary);\n  font-weight: 600;\n}\n\n.style-state {\n  grid-template-columns: var(--label-column) minmax(0, 1fr);\n  column-gap: 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 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 emptyStateStyles = ".empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-40) var(--space-0) var(--space-24);\n  min-height: 70dvh;\n  text-align: center;\n  color: var(--text-secondary);\n}\n\n.empty-state__icon { display: block; width: min(100%, 182px); height: auto; margin-bottom: var(--space-16); }\n.empty-state__title { margin: 0; color: var(--text-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-base); }\n.empty-state--canvas {\n  align-items: stretch;\n  justify-content: flex-start;\n  min-height: 0;\n  padding-top: var(--space-24);\n  text-align: left;\n}\n\n.empty-state__canvas .empty-state__title {\n  margin-bottom: var(--space-24);\n  font-weight: var(--font-weight-label);\n}\n\n.empty-state__canvas p {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-12);\n  margin: 0 0 var(--space-20);\n  line-height: 1.5;\n}\n\n.empty-state__canvas p:last-child { margin-bottom: 0; }\n.empty-state__canvas svg { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }\n.empty-state__live-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 20px;\n  height: 20px;\n  margin-top: 2px;\n  border-radius: var(--radius-4);\n  background: var(--accent-surface);\n  color: var(--accent);\n}\n.empty-state__live-badge svg { width: 12px; height: 12px; margin-top: 0; }\n.empty-state__canvas strong { display: block; color: var(--text-primary); font-weight: var(--font-weight-label); }\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 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 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  min-width: 0;\n  width: 100%;\n}\n\n.layout__flex-child-fields {\n  display: grid;\n  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;\n  gap: 5px;\n  align-items: start;\n}\n\n.layout__flex-child-fields > .icon-button {\n  align-self: end;\n  justify-self: end;\n}\n\n.layout__flex-child-fields > .field-row {\n  min-width: 0;\n}\n\n.layout__flex-child-fields .field-row,\n.layout__flex-child-field {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 4px;\n  min-width: 0;\n  min-height: 0;\n}\n\n.layout__flex-child-fields .field-row__label {\n  color: var(--text-secondary);\n}\n\n.layout__flex-child-fields .field-row__control,\n.layout__flex-child-fields .layout-combo {\n  width: 100%;\n  min-width: 0;\n}\n\n.layout__flex-child-settings {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.layout__flex-child-settings-title {\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.layout__flex-child-settings .field-row {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 4px;\n  min-height: 0;\n}\n\n.layout__flex-child-settings .field-row__label {\n  color: var(--text-secondary);\n}\n\n.layout__flex-child-settings .field-row__control,\n.layout__flex-child-settings .layout-combo {\n  width: 100%;\n  min-width: 0;\n}\n";
+const layoutSectionStyles = ".layout__group {\n  margin-top: 4px;\n  padding-top: 10px;\n  border-top: 1px solid var(--border-subtle);\n  background: var(--surface-panel);\n}\n\n.layout__basic {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-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 gridPickerStyles = ".grid-picker {\n  position: relative;\n  min-width: 0;\n}\n\n.grid-picker__trigger {\n  display: block;\n  width: 100%;\n  padding: 4px;\n  appearance: none;\n  border: none;\n  border-radius: 9px;\n  background: var(--surface-control);\n  color: var(--text-primary);\n  cursor: pointer;\n}\n\n.grid-picker__trigger:hover {\n  border-color: var(--accent);\n  background: var(--surface-control-hover);\n}\n\n.grid-picker__trigger:focus-visible {\n  outline: 0;\n  box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.grid-picker__preview {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-picker-columns), minmax(0, 1fr));\n  grid-template-rows: repeat(var(--grid-picker-rows), minmax(0, 1fr));\n  gap: 3px;\n  min-height: 88px;\n  padding: 1px;\n}\n\n.grid-picker__preview-cell {\n  min-width: 0;\n  min-height: 0;\n  border: 1px solid var(--border-subtle);\n  border-radius: 4px;\n  background: var(--surface-raised);\n}\n\n.grid-picker__preview-label {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-primary);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-label);\n  letter-spacing: -0.04em;\n  pointer-events: none;\n}\n\n.grid-picker__popover {\n  position: fixed;\n  z-index: 3;\n  top: 0;\n  left: 0;\n  transform: translateX(-50%);\n  visibility: hidden;\n  width: 360px;\n  padding: var(--space-4);\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n}\n\n.grid-picker__cell-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--grid-picker-columns), minmax(24px, 1fr));\n  grid-template-rows: repeat(var(--grid-picker-rows), minmax(24px, 1fr));\n  gap: 4px;\n}\n\n.grid-picker__cell {\n  min-width: 24px;\n  min-height: 24px;\n  padding: 0;\n  appearance: none;\n  border: 0;\n  border-radius: var(--radius-4);\n  background: var(--surface-control);\n  cursor: pointer;\n  transition: background-color 100ms ease, box-shadow 100ms ease;\n}\n\n.grid-picker__cell:hover,\n.grid-picker__cell:focus-visible,\n.grid-picker__cell--active {\n  background: var(--accent-surface);\n  box-shadow: inset 0 0 0 1px var(--accent);\n}\n\n.grid-picker__cell:focus-visible {\n  outline: 0;\n}\n\n.grid-picker__popover-value {\n  margin-top: 9px;\n  color: var(--text-primary);\n  font-size: 13px;\n  font-weight: 700;\n  text-align: center;\n}\n";
-const layoutComboFieldStyles = ".layout-combo {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.layout-combo__custom {\n  display: flex;\n}\n\n.layout-combo > .token-field {\n  width: 100%;\n}\n\n.layout-combo--blocked > .select:disabled,\n.layout-combo--blocked > .text-input:disabled,\n.layout-combo--blocked .layout-combo__custom > .text-input:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.layout-combo--blocked > .token-field {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.layout-combo-blocked {\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--control-height-large) / 2);\n  right: 8px;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: var(--warning, #b45309);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n  cursor: help;\n}\n\n.layout-combo-blocked:focus-visible {\n  outline: 0;\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.layout-combo-blocked__symbol {\n  display: block;\n  line-height: 1;\n}\n";
-const tokenChipStyles = ".token-chip {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  background: var(--surface-raised-2x);\n  margin-right: calc(var(--space-8) * -1);\n  align-self: stretch;\n  padding-left: var(--space-8);\n  border-radius: calc(var(--radius-control) - 2px);\n  overflow: hidden;\n}\n\n.token-chip:has(.token-color-control) {\n  padding-left: 0;\n}\n\n.token-chip > .popover-listbox,\n.token-chip__trigger,\n.token-chip__picker {\n  flex: 1;\n  height: 100%;\n  min-width: 0;\n}\n\n.token-chip--small {\n  flex: 0 1 auto;\n}\n\n.token-chip--small > .popover-listbox {\n  width: auto;\n  flex: 0 1 auto;\n}\n\n.token-chip__trigger {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-control);\n  outline: 0;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n\n.token-chip__trigger:focus-visible {\n  box-shadow: var(--token-chip-focus-ring, inset 0 0 0 2px var(--accent));\n}\n\n.token-chip--small .token-chip__trigger {\n  width: auto;\n}\n\n.token-chip__picker {\n  display: flex;\n  align-items: center;\n  gap: 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  gap: 3px;\n}\n\n.token-chip__label {\n  min-width: 0;\n  flex: 1;\n  text-align: left;\n}\n\n/* Keep the content inside the existing label box. */\n.token-label {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.token-label__content {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: inherit;\n}\n\n.token-chip__picker svg {\n  flex-shrink: 0;\n}\n\n.token-chip__action {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  right: 2px;\n  display: inline-flex;\n  align-items: center;\n  background: var(--surface-raised-2x);\n  transform: translateY(-50%);\n  opacity: 0;\n}\n\n.token-chip:hover > .token-chip__action,\n.token-chip:focus-within > .token-chip__action {\n  opacity: 1;\n}\n\n.token-chip--small > .token-chip__action {\n  position: relative;\n  top: auto;\n  right: auto;\n  flex: 0 0 auto;\n  margin-left: 2px;\n  transform: none;\n}\n";
-const tokenFieldStyles = ".token-field {\n  display: flex;\n  flex: 1 1 auto;\n  align-self: stretch;\n  align-items: center;\n  gap: 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-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-field--color {\n  --token-chip-focus-ring: none;\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 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 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  min-width: 20px;\n  padding: 2px var(--space-8);\n  border-radius: var(--radius-pill);\n  background: var(--surface-control);\n  color: var(--text-muted);\n  font-size: 11px;\n  font-weight: 650;\n  line-height: 1.2;\n  text-align: center;\n}\n\n.changes__content {\n  padding-bottom: 4px;\n}\n\n.changes__session-action {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 0 20px;\n}\n\n.changes__session-action .button {\n  width: 100%;\n}\n\n.changes__group {\n  margin: 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__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__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}\n\n.panel__copy[data-copied=\"true\"] {\n  background: #2eaf67;\n  color: #ffffff;\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 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-layers {\n  display: grid;\n  gap: var(--space-4);\n  width: 100%;\n  margin-top: var(--space-8);\n}\n\n.sketch-layers__item {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n  min-width: 0;\n}\n\n.sketch-layers__copy {\n  flex: 1 1 auto;\n  position: relative;\n  justify-content: center;\n  min-width: 0;\n  padding-inline: var(--space-12);\n  text-align: center;\n}\n\n.sketch-layers__copy-label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  gap: var(--space-4);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-base);\n}\n\n.sketch-layers__name {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sketch-layers__thumbnail {\n  position: absolute;\n  top: 50%;\n  left: var(--space-8);\n  width: 32px;\n  height: 32px;\n  margin: 0;\n  border-radius: var(--radius-4);\n  background: var(--surface-panel);\n  box-shadow: var(--shadow-control);\n  object-fit: cover;\n  transform: translateY(-50%) rotate(-7deg);\n}\n\n.sketch-layers__thumbnail--empty {\n  border: 1px solid var(--border-subtle);\n}\n\n.sketch-layers__delete {\n  position: absolute;\n  top: var(--space-4);\n  right: var(--space-4);\n  z-index: 1;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 120ms ease;\n}\n\n.sketch-layers__item:hover .sketch-layers__delete,\n.sketch-layers__item:focus-within .sketch-layers__delete {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.sketch-layers__error {\n  flex: 0 0 100%;\n  color: var(--warning-text);\n  font-size: var(--font-size-small);\n  line-height: 1.35;\n}\n\n.sketch__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n  background: rgb(8 12 20 / 52%);\n}\n\n.sketch__editor-backdrop {\n  background: transparent;\n  inset: 0 var(--panel-width) 0 0;\n}\n\n.sketch__live-backdrop {\n  background: transparent;\n  inset: 0 var(--panel-width) 0 0;\n  pointer-events: none;\n}\n\n.sketch__live-backdrop[data-inspector-open=\"false\"] {\n  right: 0;\n}\n\n.sketch__popup {\n  position: fixed;\n  inset: 0 var(--panel-width) 0 0;\n  z-index: 21;\n  width: auto;\n  height: 100dvh;\n  max-height: none;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: #111827;\n  color: var(--text-primary);\n  box-shadow: none;\n  pointer-events: auto;\n}\n\n.sketch__title {\n  margin: 0 36px 4px 0;\n  color: var(--text-primary);\n  font-size: 17px;\n  font-weight: 700;\n}\n\n.sketch__description {\n  max-width: 620px;\n  margin: 0 0 16px;\n  color: var(--text-secondary);\n  font-size: 13px;\n  line-height: 1.45;\n}\n\n.sketch__sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.sketch__live-popup {\n  overflow: visible;\n  background: transparent;\n  pointer-events: none;\n  /* Let the live controls and CanvasToolbar participate in one layer stack. */\n  z-index: auto;\n}\n\n.sketch__live-popup[data-inspector-open=\"false\"] {\n  right: 0;\n}\n\n.sketch__prompt-panel {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: min(400px, calc(100vw - var(--panel-width) - 32px));\n  padding: var(--space-8);\n  border: 0;\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.sketch__live-note-panel {\n  /* Keep the note editor in the workspace viewport, outside the active frame's\n     scaled and clipped coordinate system. */\n  position: fixed;\n  left: calc((100vw - var(--panel-width)) / 2);\n  bottom: calc(var(--control-height-xlarge) + var(--space-20) + var(--space-8) + var(--space-8));\n  width: min(400px, calc(100vw - var(--panel-width) - var(--space-32)));\n  z-index: calc(var(--z-index) - 1);\n  transform: translateX(-50%);\n}\n\n.sketch__live-popup[data-inspector-open=\"false\"] .sketch__live-note-panel {\n  left: 50%;\n  width: min(400px, calc(100vw - var(--space-32)));\n}\n\n.sketch__saved-note-panel {\n  position: fixed;\n  right: calc(var(--panel-width) + 24px);\n  bottom: 24px;\n  z-index: calc(var(--z-index) - 1);\n}\n\n.sketch__prompt-label {\n  color: var(--text-secondary);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-label);\n}\n\n.sketch__prompt-input {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  min-height: calc(2 * 1.4em + var(--space-16));\n  resize: none;\n  padding: var(--space-8) calc(var(--control-height-small) + var(--space-48)) var(--space-8) var(--space-8);\n  border: 0;\n  border-radius: var(--radius-control);\n  background: transparent;\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--font-size-base);\n  line-height: 1.4;\n  outline: 0;\n}\n\n.sketch__prompt-input:focus {\n  box-shadow: none;\n}\n\n.sketch__prompt-input::placeholder {\n  color: var(--text-muted);\n}\n\n.sketch__prompt-footer {\n  position: absolute;\n  inset: auto var(--space-8) var(--space-8);\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  pointer-events: none;\n}\n\n.sketch__prompt-footer .button {\n  pointer-events: auto;\n}\n\n.sketch__prompt-error {\n  min-width: 0;\n  margin-right: auto;\n  max-width: calc(100% - 88px);\n  color: var(--warning-text);\n  font-size: var(--font-size-small);\n  line-height: 1.35;\n  pointer-events: auto;\n}\n\n.sketch__canvas-frame {\n  position: absolute;\n  inset: 0;\n  display: block;\n  max-height: none;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: #111827;\n}\n\n.sketch__image-wrap {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  line-height: 0;\n}\n\n.sketch__image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  max-height: none;\n  object-fit: contain;\n  user-select: none;\n  pointer-events: none;\n}\n\n.sketch__canvas {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  touch-action: none;\n  cursor: crosshair;\n  outline: none;\n  z-index: 1;\n}\n\n.sketch__live-frame {\n  background: transparent;\n  pointer-events: none;\n}\n\n.sketch__canvas:focus-visible {\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n.sketch__live-canvas {\n  pointer-events: auto;\n  touch-action: pan-y;\n}\n\n.sketch__canvas--move {\n  cursor: grab;\n  touch-action: none;\n}\n\n.sketch__canvas--move:active {\n  cursor: grabbing;\n}\n\n.sketch__canvas--annotate {\n  cursor: crosshair;\n}\n\n.sketch__annotation-editor {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  width: 280px;\n  padding: var(--space-4);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-control);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.sketch__annotation-editor input {\n  min-width: 0;\n  flex: 1;\n  height: var(--control-height-small);\n  padding: 0 var(--space-8);\n  border: 1px solid var(--border-strong);\n  border-radius: var(--radius-control);\n  background: var(--surface-raised);\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--font-size-base);\n  outline: 0;\n}\n\n.sketch__annotation-editor input:focus {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);\n}\n\n.sketch__annotation-editor input::placeholder {\n  color: var(--text-muted);\n}\n\n.sketch__toolbar,\n.sketch__actions,\n.sketch-change__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 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\n.sketch-change {\n  display: grid;\n  gap: 8px;\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.sketch-change__title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: var(--text-primary);\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.sketch-change__title span,\n.sketch-change__status {\n  color: var(--text-muted);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.sketch-change__row {\n  display: grid;\n  grid-template-columns: 76px minmax(0, 1fr);\n  gap: 10px;\n  padding: 8px 0;\n  border-top: 1px solid var(--border-subtle);\n}\n\n.sketch-change__thumbnail {\n  width: 76px;\n  height: 58px;\n  object-fit: cover;\n  border: 1px solid var(--border-subtle);\n  border-radius: 6px;\n  background: var(--surface-control);\n}\n\n.sketch-change__thumbnail--empty { display: block; }\n\n.sketch-change__body {\n  display: grid;\n  min-width: 0;\n  gap: 3px;\n}\n\n.sketch-change__heading {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.sketch-change__name,\n.sketch-change__route,\n.sketch-change__description {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sketch-change__name {\n  color: var(--text-primary);\n  font-size: 12px;\n  font-weight: 650;\n}\n\n.sketch-change__route,\n.sketch-change__description,\n.sketch-change__error {\n  color: var(--text-muted);\n  font-size: 11px;\n  line-height: 1.35;\n}\n\n.sketch-change__description {\n  margin: 2px 0;\n  white-space: normal;\n}\n\n.sketch-change__annotations {\n  display: grid;\n  gap: 2px;\n  margin: 2px 0;\n  padding-inline-start: 18px;\n  color: var(--text-secondary);\n  font-size: 11px;\n  line-height: 1.35;\n}\n\n.sketch-change__annotations li::marker {\n  color: var(--accent);\n  font-weight: 700;\n}\n\n.sketch-change__actions {\n  gap: 2px 4px;\n}\n\n.sketch-change__actions .button {\n  padding-inline: 5px;\n  font-size: 11px;\n}\n\n.sketch-change__status[data-status=\"needs-review\"] { color: var(--warning-text); }\n.sketch-change__status[data-status=\"dispatching\"],\n.sketch-change__status[data-status=\"handing-off\"] { color: var(--accent); }\n.sketch-change__error { color: var(--warning-text); }\n";
+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";
 export const UI_STYLES = [
     DRAG_CURSOR_STYLES,
     foundationStyles,
@@ -57,6 +58,7 @@ export const UI_STYLES = [
     inspectorPopoverStyles,
     sideValuesFieldStyles,
     tooltipStyles,
+    toastStyles,
     inlineStyleWarningStyles,
     inspectorShellStyles,
     inspectorOverlayStyles,

package/dist/inspector/workspace/commands.js

@@ -1,10 +1,9 @@
 import { addCanvasIteration, duplicateCard, getCanvasCardLabel, batchCanvasChanges, getCanvasCards, removeCanvasCard, selectCard, } from "../canvas/canvasStore.js";
 import { contentSourceUrl } from "../canvas/frameContent.js";
 import { getRegisteredFrames, projectDraftToDocument, isCanvasProjectionRevisionCurrent, projectToAllReadyCards, } from "../canvas/projection.js";
-import { draftIdForContent, getDraftForCard } from "../drafts/store.js";
+import { canEditDraft, draftIdForContent, forgetDraft, getDraftForCard, isDraftLocked } from "../drafts/store.js";
 import { createHtmlArtifact, removeHtmlArtifact } from "../iterations/client.js";
 import { captureHtmlIteration } from "../iterations/capture.js";
-import { canEditDraft, forgetDraft, isDraftLocked } from "../changes/draftChanges.js";
 import { discardDraftHistory } from "./timeline.js";
 import { canWriteWorkspace } from "../canvas/workspaceLease.js";
 import { isInlineTextEditingActive } from "../inline-text/inlineTextEditor.js";

package/dist/inspector/workspace/controller.js

@@ -1,9 +1,8 @@
 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, subscribeDrafts } from "../drafts/store.js";
+import { loadDrafts, activateDraft, activateDraftForCard, draftIdForCard, getActiveDraftChanges, subscribeDrafts, } from "../drafts/store.js";
 import { applicationTarget, targetKey } from "../drafts/model.js";
-import { getActiveDraftChanges } from "../changes/draftChanges.js";
 import { hydrateSession, enableAutoSave, scheduleAutoSave, flushAutoSave, resetAutoSave, } from "../canvas/sessionStore.js";
 import { releaseLease } from "../canvas/workspaceLease.js";
 import { subscribeClipboardHandoff } from "../prompt/clipboardHandoff.js";

package/dist/inspector/workspace/handoff.js

@@ -7,10 +7,11 @@ import { getCommentsForTarget, markCommentsHandedOff } from "../comments/store.j
 import { applicationTarget } from "../drafts/model.js";
 import { prepareHtmlIterationHandoff } from "../iterations/coordinator.js";
 import { getRegisteredFrames } from "../canvas/projection.js";
-import { getDraftChanges } from "../changes/draftChanges.js";
+import { getDraftChanges } from "../drafts/store.js";
 import { recordClipboardHandoff } from "../prompt/clipboardHandoff.js";
 import { copyToClipboard } from "../prompt/copyToClipboard.js";
 import { generatePrompt } from "../prompt/generatePrompt.js";
+import { withPromptContext } from "../prompt/promptDocument.js";
 import { createSketchAttachments, createSketchHandoffSnapshot, sketchMetadataForHandoff, } from "../sketch/handoff.js";
 import { markSketchesDispatching, markSketchesHandingOff, settleSketchDispatch } from "../sketch/store.js";
 async function prepareDraftHandoff(request) {
@@ -35,7 +36,7 @@ export async function prepareHandoff(request) {
     const generated = generatePrompt([...changes], hints, structuralChanges, request.customInstructions, sketchMetadata, comments);
     const prompt = target.kind === "html"
         ? htmlIterationPrompt(target.artifactId, generated, changes.length + structuralChanges.length + comments.length === 0, sketchMetadata.length > 0, request.customInstructions)
-        : `Page: ${target.route}\nApply the requested changes to this page. Shared source may affect other pages.\n\n${generated}`;
+        : withPromptContext([`Page: ${target.route}`, "Apply the requested changes to this page."], generated);
     return { ...handoff, prompt };
 }
 export async function prepareIterationImplementationPrompt(request) {

package/dist/inspector/workspace/sentItems.d.ts

@@ -0,0 +1,16 @@
+import type { ChangeRecord } from "../changes/types.js";
+import type { StructuralChange } from "../changes/structuralTypes.js";
+import { type HandoffSnapshot } from "../agent/verification.js";
+import { type ElementComment } from "../comments/store.js";
+import type { DraftTarget } from "../drafts/model.js";
+/** Handed-off work that verification has not confirmed and the user has not changed since. */
+export interface SentItems {
+    readonly draftId: string;
+    readonly changes: readonly ChangeRecord[];
+    readonly structuralChanges: readonly StructuralChange[];
+    readonly comments: readonly ElementComment[];
+}
+export declare function getSentItems(draftId: string, target: DraftTarget, agentDispatch: HandoffSnapshot | null): SentItems;
+export declare function sentItemCount(items: SentItems): number;
+/** Removes sent items and their draft history, preserving newer, unsent edits. */
+export declare function clearSentItems(items: SentItems): void;

package/dist/inspector/workspace/sentItems.js

@@ -0,0 +1,33 @@
+import { changeKey } from "../changes/model.js";
+import { canEditDraft, getActiveDraftChanges, reconcileDraftChanges } from "../drafts/store.js";
+import { unchangedHandoffRecords } from "../agent/verification.js";
+import { getClipboardHandoffRecords } from "../prompt/clipboardHandoff.js";
+import { getCommentsForTarget, removeComment } from "../comments/store.js";
+export function getSentItems(draftId, target, agentDispatch) {
+    const clipboard = getClipboardHandoffRecords(draftId);
+    const agent = agentDispatch?.owner.draftId === draftId
+        ? unchangedHandoffRecords(agentDispatch)
+        : { changes: [], structuralChanges: [] };
+    const changes = new Map([...clipboard.changes, ...agent.changes].map((change) => [changeKey(change), change]));
+    const structuralChanges = new Map([...clipboard.structuralChanges, ...agent.structuralChanges].map((change) => [change.id, change]));
+    return {
+        draftId,
+        changes: [...changes.values()],
+        structuralChanges: [...structuralChanges.values()],
+        comments: getCommentsForTarget(target).filter((comment) => comment.handedOff),
+    };
+}
+export function sentItemCount(items) {
+    return items.changes.length + items.structuralChanges.length + items.comments.length;
+}
+/** Removes sent items and their draft history, preserving newer, unsent edits. */
+export function clearSentItems(items) {
+    const current = getActiveDraftChanges();
+    if (current.draftId !== items.draftId || !canEditDraft(items.draftId) || sentItemCount(items) === 0)
+        return;
+    const keys = new Set(items.changes.map(changeKey));
+    const ids = new Set(items.structuralChanges.map((change) => change.id));
+    reconcileDraftChanges(items.draftId, keys, ids);
+    for (const comment of items.comments)
+        removeComment(comment.id);
+}

package/dist/inspector/workspace/timeline.d.ts

@@ -1,4 +1,4 @@
-import type { DraftContents } from "../changes/draftChanges.js";
+import type { DraftContents } from "../drafts/model.js";
 export interface EditHistoryEntry {
     readonly kind: "edit";
     readonly draftId: string;
@@ -14,17 +14,31 @@ export interface CanvasHistoryEntry {
     readonly redo: () => void;
     readonly dispose: () => void;
 }
-export declare function subscribeTimeline(listener: () => void): () => void;
-export declare function timelineStatus(): {
-    canUndo: boolean;
-    canRedo: boolean;
-};
-export declare function recordEdit(entry: Omit<EditHistoryEntry, "kind" | "group">, equal: (a: DraftContents, b: DraftContents) => boolean): void;
+type ContentsEqual = (a: DraftContents, b: DraftContents) => boolean;
+/** Session undo: one ordered history shared by draft edits and Canvas operations. */
+export interface Timeline {
+    subscribe(listener: () => void): () => void;
+    status(): {
+        canUndo: boolean;
+        canRedo: boolean;
+    };
+    recordEdit(entry: Omit<EditHistoryEntry, "kind" | "group">, equal: ContentsEqual): void;
+    recordCanvasChange(entry: Omit<CanvasHistoryEntry, "kind">): void;
+    replay(direction: "undo" | "redo", applyEdit: (entry: EditHistoryEntry, contents: DraftContents) => void): boolean;
+    pruneDraftHistory(draftId: string, retain: (contents: DraftContents) => DraftContents, equal: ContentsEqual): void;
+    discardDraftHistory(draftId: string): void;
+    discardCanvasHistory(cardId: string): void;
+    clear(): void;
+    releaseDetachedIterations(): void;
+    createGroup(): (update: () => void) => void;
+}
+export declare function createTimeline(): Timeline;
+/** The Workspace's session timeline. */
+export declare const sessionTimeline: Timeline;
 export declare function recordCanvasChange(entry: Omit<CanvasHistoryEntry, "kind">): void;
-export declare function replayTimeline(direction: "undo" | "redo", applyEdit: (entry: EditHistoryEntry, contents: DraftContents) => void): boolean;
-export declare function pruneDraftHistory(draftId: string, retain: (contents: DraftContents) => DraftContents, equal: (a: DraftContents, b: DraftContents) => boolean): void;
-export declare function discardDraftHistory(draftId: string): void;
 export declare function discardCanvasHistory(cardId: string): void;
+export declare function discardDraftHistory(draftId: string): void;
 export declare function clearSessionUndoHistory(): void;
 export declare function releaseDetachedIterations(): void;
 export declare function createChangeHistoryGroup(): (update: () => void) => void;
+export {};