nudge-ui 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (231) hide show
  1. package/bin/nudge-ui.mjs +3 -1
  2. package/dist/cli/agentCommand.d.ts +8 -0
  3. package/dist/cli/agentCommand.js +59 -0
  4. package/dist/client.mjs +878 -11
  5. package/dist/hosts/astro/astroRuntimeConfig.js +1 -1
  6. package/dist/hosts/astro/clientTransport.js +63 -11
  7. package/dist/hosts/astro/integration.d.ts +2 -2
  8. package/dist/hosts/astro/integration.js +4 -3
  9. package/dist/hosts/environment.d.ts +15 -0
  10. package/dist/hosts/environment.js +16 -0
  11. package/dist/hosts/next/sidecar.d.ts +4 -0
  12. package/dist/hosts/next/sidecar.js +56 -7
  13. package/dist/hosts/next/wrapper.d.ts +2 -0
  14. package/dist/hosts/next/wrapper.js +32 -3
  15. package/dist/hosts/projectBridge.d.ts +21 -0
  16. package/dist/hosts/projectBridge.js +98 -0
  17. package/dist/hosts/static/cli.d.ts +1 -1
  18. package/dist/hosts/static/cli.js +6 -1
  19. package/dist/hosts/static/manifest.d.ts +1 -1
  20. package/dist/hosts/static/manifest.js +3 -1
  21. package/dist/hosts/static/server.js +45 -3
  22. package/dist/hosts/vite/vite.d.ts +6 -1
  23. package/dist/hosts/vite/vite.js +82 -15
  24. package/dist/inspector/agent/McpConnectionDialog.d.ts +5 -4
  25. package/dist/inspector/agent/McpConnectionDialog.js +20 -37
  26. package/dist/inspector/agent/client.d.ts +16 -3
  27. package/dist/inspector/agent/client.js +114 -11
  28. package/dist/inspector/agent/connectionStatus.d.ts +3 -3
  29. package/dist/inspector/agent/connectionStatus.js +11 -4
  30. package/dist/inspector/agent/httpTransport.d.ts +8 -0
  31. package/dist/inspector/agent/httpTransport.js +78 -18
  32. package/dist/inspector/agent/protocol.d.ts +11 -3
  33. package/dist/inspector/agent/protocol.js +1 -1
  34. package/dist/inspector/agent/verification.d.ts +1 -1
  35. package/dist/inspector/agent/verification.js +69 -12
  36. package/dist/inspector/canvas/CanvasCard.d.ts +5 -3
  37. package/dist/inspector/canvas/CanvasCard.js +181 -91
  38. package/dist/inspector/canvas/CanvasElementOverlay.js +288 -52
  39. package/dist/inspector/canvas/CanvasToolbar.d.ts +12 -0
  40. package/dist/inspector/canvas/CanvasToolbar.js +24 -0
  41. package/dist/inspector/canvas/CanvasWorkspace.d.ts +4 -1
  42. package/dist/inspector/canvas/CanvasWorkspace.js +410 -72
  43. package/dist/inspector/canvas/activeCanvasDocument.d.ts +5 -0
  44. package/dist/inspector/canvas/activeCanvasDocument.js +23 -0
  45. package/dist/inspector/canvas/canvasResize.d.ts +30 -0
  46. package/dist/inspector/canvas/canvasResize.js +52 -0
  47. package/dist/inspector/canvas/canvasStore.d.ts +30 -6
  48. package/dist/inspector/canvas/canvasStore.js +128 -61
  49. package/dist/inspector/canvas/frameProtocol.d.ts +82 -5
  50. package/dist/inspector/canvas/frameProtocol.js +63 -2
  51. package/dist/inspector/canvas/keyboardShortcuts.d.ts +4 -0
  52. package/dist/inspector/canvas/keyboardShortcuts.js +16 -0
  53. package/dist/inspector/canvas/linkEligibility.d.ts +0 -5
  54. package/dist/inspector/canvas/linkEligibility.js +0 -29
  55. package/dist/inspector/canvas/projection.d.ts +7 -0
  56. package/dist/inspector/canvas/projection.js +118 -25
  57. package/dist/inspector/canvas/rendererBootstrap.js +42 -29
  58. package/dist/inspector/canvas/rendererElementSelector.d.ts +1 -1
  59. package/dist/inspector/canvas/rendererElementSelector.js +385 -58
  60. package/dist/inspector/canvas/rendererMessageRouter.d.ts +11 -0
  61. package/dist/inspector/canvas/rendererMessageRouter.js +43 -0
  62. package/dist/inspector/canvas/rendererSelectionProxy.js +6 -2
  63. package/dist/inspector/canvas/sessionStore.d.ts +1 -0
  64. package/dist/inspector/canvas/sessionStore.js +12 -4
  65. package/dist/inspector/canvas/staleChangeDetector.js +16 -14
  66. package/dist/inspector/changes/changesLog.js +31 -1
  67. package/dist/inspector/changes/managedStyleProjection.d.ts +1 -1
  68. package/dist/inspector/changes/managedStyleProjection.js +3 -3
  69. package/dist/inspector/changes/structuralTypes.d.ts +4 -0
  70. package/dist/inspector/changes/workspaceChanges.d.ts +4 -0
  71. package/dist/inspector/changes/workspaceChanges.js +29 -3
  72. package/dist/inspector/clientManifest.d.ts +7 -0
  73. package/dist/inspector/clientManifest.js +12 -0
  74. package/dist/inspector/componentSemantics/adapterRegistry.js +4 -3
  75. package/dist/inspector/componentSemantics/runtimeBridge.d.ts +2 -2
  76. package/dist/inspector/componentSemantics/runtimeBridge.js +16 -3
  77. package/dist/inspector/index.d.ts +2 -0
  78. package/dist/inspector/index.js +80 -32
  79. package/dist/inspector/inline-text/inlineTextDiagnostics.d.ts +10 -0
  80. package/dist/inspector/inline-text/inlineTextDiagnostics.js +65 -0
  81. package/dist/inspector/inline-text/inlineTextEditor.d.ts +3 -5
  82. package/dist/inspector/inline-text/inlineTextEditor.js +74 -206
  83. package/dist/inspector/inline-text/inlineTextFeedback.d.ts +5 -0
  84. package/dist/inspector/inline-text/inlineTextFeedback.js +27 -0
  85. package/dist/inspector/inline-text/inlineTextLifecycle.js +2 -0
  86. package/dist/inspector/inline-text/textEditChange.d.ts +14 -0
  87. package/dist/inspector/inline-text/textEditChange.js +165 -0
  88. package/dist/inspector/inspection/selectionProperty.d.ts +1 -0
  89. package/dist/inspector/inspection/selectionProperty.js +1 -0
  90. package/dist/inspector/overlay/DomNavigator.d.ts +10 -0
  91. package/dist/inspector/overlay/DomNavigator.js +40 -0
  92. package/dist/inspector/overlay/InspectorOverlay.js +6 -2
  93. package/dist/inspector/overlay/clickPolicy.d.ts +18 -2
  94. package/dist/inspector/overlay/clickPolicy.js +34 -3
  95. package/dist/inspector/overlay/elementSelector.d.ts +1 -1
  96. package/dist/inspector/overlay/elementSelector.js +18 -7
  97. package/dist/inspector/overlay/selectedGeometry.js +21 -2
  98. package/dist/inspector/overlay/spacingGestures.d.ts +45 -0
  99. package/dist/inspector/overlay/spacingGestures.js +351 -0
  100. package/dist/inspector/overlay/structuralGestures.d.ts +2 -2
  101. package/dist/inspector/overlay/structuralGestures.js +12 -10
  102. package/dist/inspector/projection/managedStylesheet.js +4 -1
  103. package/dist/inspector/projection/renderedInstance.d.ts +2 -0
  104. package/dist/inspector/projection/renderedInstance.js +5 -1
  105. package/dist/inspector/projection/structuralProjection.d.ts +2 -0
  106. package/dist/inspector/projection/structuralProjection.js +85 -1
  107. package/dist/inspector/projection/structuralProjectionBoundary.js +17 -1
  108. package/dist/inspector/projection/textProjection.d.ts +2 -0
  109. package/dist/inspector/projection/textProjection.js +10 -4
  110. package/dist/inspector/prompt/clipboardHandoff.d.ts +1 -1
  111. package/dist/inspector/prompt/clipboardHandoff.js +3 -3
  112. package/dist/inspector/prompt/generatePrompt.d.ts +2 -1
  113. package/dist/inspector/prompt/generatePrompt.js +19 -2
  114. package/dist/inspector/runtime/editorShell.d.ts +2 -0
  115. package/dist/inspector/runtime/editorShell.js +4 -0
  116. package/dist/inspector/runtime/runtimeConfig.d.ts +5 -1
  117. package/dist/inspector/runtime/runtimeConfig.js +4 -0
  118. package/dist/inspector/selection/hierarchy.d.ts +6 -0
  119. package/dist/inspector/selection/hierarchy.js +8 -0
  120. package/dist/inspector/selection/selectionStore.js +2 -0
  121. package/dist/inspector/settings/SettingsDialog.d.ts +1 -1
  122. package/dist/inspector/settings/SettingsDialog.js +12 -2
  123. package/dist/inspector/shell/AppShell.js +5 -1
  124. package/dist/inspector/shell/ChangesLog.js +26 -22
  125. package/dist/inspector/shell/CopyPromptButton.js +102 -19
  126. package/dist/inspector/shell/EmptyState.js +1 -1
  127. package/dist/inspector/shell/InspectorShell.d.ts +0 -1
  128. package/dist/inspector/shell/InspectorShell.js +38 -42
  129. package/dist/inspector/shell/PeekOriginalButton.d.ts +7 -0
  130. package/dist/inspector/shell/PeekOriginalButton.js +57 -0
  131. package/dist/inspector/shell/PeekOriginalIcon.d.ts +7 -0
  132. package/dist/inspector/shell/PeekOriginalIcon.js +9 -0
  133. package/dist/inspector/shell/originalPreview.d.ts +9 -0
  134. package/dist/inspector/shell/originalPreview.js +61 -0
  135. package/dist/inspector/shell/shortcuts.d.ts +3 -0
  136. package/dist/inspector/shell/shortcuts.js +15 -0
  137. package/dist/inspector/sketch/SketchChanges.d.ts +2 -0
  138. package/dist/inspector/sketch/SketchChanges.js +72 -0
  139. package/dist/inspector/sketch/SketchEditor.d.ts +21 -0
  140. package/dist/inspector/sketch/SketchEditor.js +402 -0
  141. package/dist/inspector/sketch/SketchEntryButton.d.ts +4 -0
  142. package/dist/inspector/sketch/SketchEntryButton.js +11 -0
  143. package/dist/inspector/sketch/SketchFrameOverlay.d.ts +11 -0
  144. package/dist/inspector/sketch/SketchFrameOverlay.js +119 -0
  145. package/dist/inspector/sketch/SketchLayersPanel.d.ts +2 -0
  146. package/dist/inspector/sketch/SketchLayersPanel.js +63 -0
  147. package/dist/inspector/sketch/SketchOverlay.d.ts +19 -0
  148. package/dist/inspector/sketch/SketchOverlay.js +420 -0
  149. package/dist/inspector/sketch/SketchPromptPanel.d.ts +15 -0
  150. package/dist/inspector/sketch/SketchPromptPanel.js +18 -0
  151. package/dist/inspector/sketch/SketchWorkspace.d.ts +13 -0
  152. package/dist/inspector/sketch/SketchWorkspace.js +152 -0
  153. package/dist/inspector/sketch/capture.d.ts +55 -0
  154. package/dist/inspector/sketch/capture.js +350 -0
  155. package/dist/inspector/sketch/freehand.d.ts +13 -0
  156. package/dist/inspector/sketch/freehand.js +64 -0
  157. package/dist/inspector/sketch/geometry.d.ts +17 -0
  158. package/dist/inspector/sketch/geometry.js +98 -0
  159. package/dist/inspector/sketch/handoff.d.ts +21 -0
  160. package/dist/inspector/sketch/handoff.js +72 -0
  161. package/dist/inspector/sketch/interaction.d.ts +21 -0
  162. package/dist/inspector/sketch/interaction.js +98 -0
  163. package/dist/inspector/sketch/model.d.ts +104 -0
  164. package/dist/inspector/sketch/model.js +282 -0
  165. package/dist/inspector/sketch/persistence.d.ts +21 -0
  166. package/dist/inspector/sketch/persistence.js +205 -0
  167. package/dist/inspector/sketch/raster.d.ts +22 -0
  168. package/dist/inspector/sketch/raster.js +203 -0
  169. package/dist/inspector/sketch/sketchNote.d.ts +10 -0
  170. package/dist/inspector/sketch/sketchNote.js +30 -0
  171. package/dist/inspector/sketch/store.d.ts +47 -0
  172. package/dist/inspector/sketch/store.js +434 -0
  173. package/dist/inspector/styleEditors/BorderEditor.js +15 -19
  174. package/dist/inspector/styleEditors/BorderRadiusEditor.js +6 -6
  175. package/dist/inspector/styleEditors/BoxShadowEditor.js +12 -1
  176. package/dist/inspector/styleEditors/ColorPicker.js +11 -36
  177. package/dist/inspector/styleEditors/GapField.d.ts +3 -2
  178. package/dist/inspector/styleEditors/GapField.js +2 -2
  179. package/dist/inspector/styleEditors/GridSection.js +1 -1
  180. package/dist/inspector/styleEditors/LayoutSection.js +11 -8
  181. package/dist/inspector/styleEditors/SpacingBox.js +31 -33
  182. package/dist/inspector/styleEditors/layoutPreviewState.d.ts +5 -0
  183. package/dist/inspector/styleEditors/layoutPreviewState.js +19 -0
  184. package/dist/inspector/styleEditors/layoutValue.js +3 -0
  185. package/dist/inspector/styleEditors/nudgeValue.d.ts +11 -0
  186. package/dist/inspector/styleEditors/nudgeValue.js +93 -5
  187. package/dist/inspector/styleEditors/stylePresence.d.ts +7 -0
  188. package/dist/inspector/styleEditors/stylePresence.js +22 -0
  189. package/dist/inspector/styleEditors/textRelevance.d.ts +3 -0
  190. package/dist/inspector/styleEditors/textRelevance.js +35 -0
  191. package/dist/inspector/styleEditors/useFieldVisibility.d.ts +6 -0
  192. package/dist/inspector/styleEditors/useFieldVisibility.js +26 -0
  193. package/dist/inspector/tokens/TokenField.js +130 -7
  194. package/dist/inspector/tokens/TokensPanel.js +2 -1
  195. package/dist/inspector/tokens/dragPointerLock.d.ts +8 -0
  196. package/dist/inspector/tokens/dragPointerLock.js +70 -0
  197. package/dist/inspector/tokens/editActions.d.ts +2 -0
  198. package/dist/inspector/tokens/editActions.js +2 -2
  199. package/dist/inspector/tokens/resolution/cssomCollector.d.ts +1 -1
  200. package/dist/inspector/tokens/resolution/cssomCollector.js +9 -5
  201. package/dist/inspector/tokens/resolution/ruleMatching.d.ts +40 -0
  202. package/dist/inspector/tokens/resolution/ruleMatching.js +423 -0
  203. package/dist/inspector/tokens/resolution/selectorSemantics.d.ts +19 -3
  204. package/dist/inspector/tokens/resolution/selectorSemantics.js +378 -4
  205. package/dist/inspector/tokens/resolution.d.ts +3 -26
  206. package/dist/inspector/tokens/resolution.js +44 -735
  207. package/dist/inspector/tokens/tokenAvailability.d.ts +18 -0
  208. package/dist/inspector/tokens/tokenAvailability.js +204 -0
  209. package/dist/inspector/ui/Button.d.ts +1 -1
  210. package/dist/inspector/ui/Disclosure.d.ts +22 -0
  211. package/dist/inspector/ui/Disclosure.js +13 -0
  212. package/dist/inspector/ui/SideValuesField.js +2 -2
  213. package/dist/inspector/ui/StatusCallout.d.ts +4 -1
  214. package/dist/inspector/ui/StatusCallout.js +2 -2
  215. package/dist/inspector/ui/dragCursor.d.ts +8 -0
  216. package/dist/inspector/ui/dragCursor.js +21 -0
  217. package/dist/inspector/ui/styles.js +21 -17
  218. package/dist/internal/agent-protocol.d.ts +65 -1
  219. package/dist/internal/agent-protocol.js +183 -3
  220. package/dist/nudge-ui.mjs +276 -58
  221. package/dist/transport/editor.d.ts +47 -0
  222. package/dist/transport/editor.js +163 -0
  223. package/dist/transport/index.d.ts +1 -0
  224. package/dist/transport/index.js +1 -0
  225. package/dist/transport/routes.d.ts +10 -0
  226. package/dist/transport/routes.js +10 -0
  227. package/package.json +3 -1
  228. package/dist/inspector/shell/DomNavigation.d.ts +0 -8
  229. package/dist/inspector/shell/DomNavigation.js +0 -30
  230. package/dist/inspector/shell/panelLayout.d.ts +0 -2
  231. package/dist/inspector/shell/panelLayout.js +0 -29
package/dist/inspector/ui/styles.js CHANGED
@@ -1,37 +1,40 @@
1
+ import { DRAG_CURSOR_STYLES } from "./dragCursor.js";
1
2
  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";
2
- const atRuleContextStyles = ".at-rule-indicator {\n position: absolute;\n z-index: 2;\n top: -4px;\n left: -4px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 4px;\n border: 0;\n border-radius: var(--radius-pill);\n background: var(--surface-raised-2x);\n color: var(--content-primary, var(--text-primary));\n box-shadow: var(--shadow-outline);\n font: inherit;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n white-space: nowrap;\n cursor: help;\n}\n\n.at-rule-indicator::before {\n position: absolute;\n inset: -4px;\n content: \"\";\n}\n\n.at-rule-indicator:hover {\n color: var(--content-primary, var(--text-primary));\n background: var(--surface-raised-2x);\n}\n\n.at-rule-indicator__symbol {\n display: block;\n}\n\n.at-rule-indicator:focus-visible {\n outline: 0;\n box-shadow: 0 0 0 2px var(--accent);\n}\n\n.at-rule-tooltip-positioner {\n /* The portal is a sibling of the panel in the inspector shadow root. */\n z-index: 3;\n pointer-events: auto;\n}\n\n.at-rule-tooltip {\n width: max-content;\n max-width: min(320px, calc(100vw - 24px));\n padding: var(--space-4);\n border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);\n border-radius: var(--radius-8);\n background: var(--surface-raised);\n box-shadow: 0 8px 22px rgb(0 0 0 / 18%);\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n line-height: 1.35;\n}\n\n.at-rule-tooltip__rules {\n display: grid;\n gap: 2px;\n}\n\n.at-rule-tooltip__rule {\n min-width: 0;\n padding: 5px 6px;\n border-radius: var(--radius-4);\n}\n\n.at-rule-tooltip__rule--active {\n background: var(--accent-surface);\n}\n\n.at-rule-tooltip code {\n display: block;\n min-width: 0;\n overflow-wrap: anywhere;\n color: var(--text-primary);\n font: inherit;\n}\n";
3
- const foundationStyles = ":host {\n all: initial;\n --surface-panel: #F5F5F4;\n --surface-control: var(--surface-well);\n --surface-control-hover: var(--surface-well-2x);\n --surface-raised: #FAFAFA;\n --surface-raised-2x: #fff ;\n --surface-raised-hover: #F5F5F4;\n --surface-well: hsla(0, 0%, 0%, 0.05);\n --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n\n --border-subtle: hsla(0, 0%, 0%, 0.1);\n --border-medium: hsla(0, 0%, 0%, 0.2);\n --border-strong: #d8d8d8;\n\n --text-primary: #242424;\n --text-secondary: #6f6f6f;\n --text-muted: #777777;\n --text-muted-subtle: #a1a1a1;\n\n --accent: #0096ff;\n --accent-surface: rgba(0, 176, 255, 0.15);\n --warning: #d97706;\n --warning-text: #9a5b00;\n --warning-surface: #fff6e5;\n --danger: #df4b4b;\n --danger-text: #bd3636;\n --danger-surface: #fff0f0;\n\n --space-0: 0;\n --space-4: 4px;\n --space-8: 8px;\n --space-12: 12px;\n --space-16: 16px;\n --space-20: 20px;\n --space-24: 24px;\n --space-32: 32px;\n --space-40: 40px;\n --space-48: 48px;\n\n /* Radius */\n --radius-0: 0;\n --radius-4: 4px;\n --radius-8: 8px;\n --radius-12: 12px;\n --radius-16: 16px;\n --radius-20: 20px;\n --radius-24: 24px;\n --radius-pill: 999px;\n\n --radius-control: var(--radius-8);\n --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n --z-index: 2147483647;\n\n --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n --font-size-base: 12px;\n --font-size-small: 10px;\n --font-weight-base: 400;\n --font-weight-label: 600;\n\n /* Control semantic sizes */\n --control-height-small: 24px;\n --control-height-large: 32px;\n --label-column: 104px;\n\n --icon-size-small: 16px;\n --icon-size-large: 20px;\n --icon-stroke-width: 1.5px;\n\n position: fixed;\n inset: 0;\n z-index: var(--z-index);\n pointer-events: none;\n font-family: var(--font-family);\n background: transparent;\n box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n font-family: inherit;\n}\n";
3
+ const atRuleContextStyles = ".at-rule-indicator {\n position: absolute;\n z-index: 2;\n top: -4px;\n left: -4px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 4px;\n border: 0;\n border-radius: var(--radius-pill);\n background: var(--surface-raised-2x);\n color: var(--content-primary, var(--text-primary));\n box-shadow: var(--shadow-outline);\n font: inherit;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n white-space: nowrap;\n cursor: help;\n}\n\n.at-rule-indicator::before {\n position: absolute;\n inset: -4px;\n content: \"\";\n}\n\n.at-rule-indicator:hover {\n color: var(--content-primary, var(--text-primary));\n background: var(--surface-raised-2x);\n}\n\n.at-rule-indicator__symbol {\n display: block;\n}\n\n.at-rule-indicator:focus-visible {\n outline: 0;\n box-shadow: 0 0 0 2px var(--accent);\n}\n\n.at-rule-tooltip-positioner {\n /* The portal is a sibling of the panel in the inspector shadow root. */\n z-index: 35;\n pointer-events: auto;\n}\n\n.at-rule-tooltip {\n width: max-content;\n max-width: min(320px, calc(100vw - 24px));\n padding: var(--space-4);\n border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);\n border-radius: var(--radius-8);\n background: var(--surface-raised);\n box-shadow: 0 8px 22px rgb(0 0 0 / 18%);\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n line-height: 1.35;\n}\n\n.at-rule-tooltip__rules {\n display: grid;\n gap: 2px;\n}\n\n.at-rule-tooltip__rule {\n min-width: 0;\n padding: 5px 6px;\n border-radius: var(--radius-4);\n}\n\n.at-rule-tooltip code {\n display: block;\n min-width: 0;\n overflow-wrap: anywhere;\n color: var(--text-primary);\n font: inherit;\n}\n";
4
+ const foundationStyles = ":host {\n all: initial;\n --surface-panel: #F5F5F4;\n --surface-control: var(--surface-well);\n --surface-control-hover: var(--surface-well-2x);\n --surface-raised: #FAFAFA;\n --surface-raised-2x: #fff ;\n --surface-raised-hover: #F5F5F4;\n --surface-well: hsla(0, 0%, 0%, 0.05);\n --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n\n --border-subtle: hsla(0, 0%, 0%, 0.1);\n --border-medium: hsla(0, 0%, 0%, 0.2);\n --border-strong: #d8d8d8;\n\n --text-primary: #242424;\n --text-secondary: #6f6f6f;\n --text-muted: #777777;\n --text-muted-subtle: #a1a1a1;\n\n --accent: #0096ff;\n --accent-surface: rgba(0, 176, 255, 0.15);\n --warning: #d97706;\n --warning-text: #9a5b00;\n --warning-surface: #fff6e5;\n --danger: #df4b4b;\n --danger-text: #bd3636;\n --danger-surface: rgba(223, 75, 75, 0.2);\n\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";
4
5
  const controlSurfaceStyles = "/*\n * A single visual boundary for a field. Standalone text inputs and selects\n * share these defaults; composed fields use ControlSurface and make their\n * content embedded so only this element paints control chrome.\n */\n.control-surface,\n.text-input,\n.select {\n --control-surface-height: var(--control-height-large);\n --control-surface-padding: 2px 8px;\n --control-surface-gap: 6px;\n box-sizing: border-box;\n min-width: 0;\n height: var(--control-surface-height);\n padding: var(--control-surface-padding);\n border: 0;\n border-radius: var(--radius-control);\n outline: 0;\n background: var(--surface-control);\n color: var(--text-primary);\n font: inherit;\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n transition: background-color 120ms ease, box-shadow 120ms ease;\n}\n\n.control-surface {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n gap: var(--control-surface-gap);\n}\n\n.control-surface:has(.token-field--color) {\n --control-surface-padding: 2px 8px 2px 2px;\n}\n\n.control-surface--compact,\n.text-input--compact,\n.select--compact {\n --control-surface-height: var(--control-height-small);\n --control-surface-padding: 0 6px;\n}\n\n.control-surface:hover:not(:focus-within),\n.text-input:hover:not(:focus),\n.select:hover:not(:disabled) {\n background: var(--surface-control-hover);\n}\n\n.control-surface:focus-within,\n.text-input:focus-visible,\n.select:focus-visible,\n.select[data-popup-open] {\n box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.control-surface--embedded,\n.text-input--embedded,\n.select--embedded {\n padding: 0;\n background: transparent;\n border-radius: 0;\n box-shadow: none;\n}\n\n.control-surface--embedded:hover:not(:focus-within),\n.text-input--embedded:hover:not(:focus),\n.select--embedded:hover:not(:disabled),\n.control-surface--embedded:focus-within,\n.text-input--embedded:focus-visible,\n.select--embedded:focus-visible,\n.select--embedded[data-popup-open] {\n background: transparent;\n box-shadow: none;\n}\n";
5
6
  const textInputStyles = ".text-input {\n width: 100%;\n}\n\n.text-input::placeholder {\n color: var(--text-muted);\n opacity: 1;\n}\n";
6
- const selectStyles = ".select {\n display: inline-flex;\n width: 100%;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n text-align: left;\n cursor: pointer;\n}\n\n.select:disabled {\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.select__value,\n.select [data-slot=\"select-value\"] {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.select__icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n color: var(--text-muted);\n transition: transform 120ms ease;\n}\n\n.select[data-popup-open] .select__icon {\n color: var(--text-primary);\n transform: rotate(180deg);\n}\n\n.select__positioner {\n z-index: var(--z-index);\n min-width: var(--anchor-width);\n pointer-events: auto;\n}\n\n.select__popup {\n box-sizing: border-box;\n width: min(420px, max(var(--anchor-width, 0px), 260px));\n min-width: 0;\n max-width: calc(100vw - 24px);\n max-height: min(320px, calc(100dvh - 24px), var(--available-height, 100dvh));\n overflow-x: hidden;\n overflow-y: auto;\n overscroll-behavior: contain;\n pointer-events: auto;\n background: var(--surface-raised);\n color: var(--text-primary);\n border-radius: var(--radius-8);\n box-shadow: var(--shadow-popup);\n transform-origin: var(--transform-origin);\n}\n\n.select__popup--searchable {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.select__search-input {\n box-sizing: border-box;\n flex: 0 0 auto;\n width: calc(100% - (var(--space-4) * 2));\n min-height: 32px;\n margin: var(--space-4);\n padding: var(--space-8);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-8);\n background: var(--surface-control);\n color: var(--text-primary);\n outline: 0;\n font: inherit;\n}\n\n.select__search-input::placeholder {\n color: var(--text-muted);\n opacity: 1;\n}\n\n.select__search-input:focus {\n border-color: var(--border-strong);\n box-shadow: 0 0 0 2px var(--accent);\n}\n\n.select__empty {\n padding: 12px 14px;\n color: var(--text-muted);\n font-size: var(--font-size-base);\n}\n\n.select__empty:empty {\n padding: 0;\n}\n\n.select__list {\n min-width: 0;\n padding: var(--space-4);\n outline: 0;\n}\n\n.select__list--searchable {\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n.select__group + .select__group {\n margin-top: 4px;\n padding-top: 4px;\n border-top: 1px solid var(--border-subtle);\n}\n\n.select__group-label {\n padding: 5px 8px 4px;\n color: var(--text-muted);\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\n.select__item {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n min-height: 34px;\n padding: 6px 9px;\n border-radius: var(--radius-4);\n color: var(--text-primary);\n outline: 0;\n font-size: var(--font-size-base);\n cursor: pointer;\n}\n\n.select__item[data-highlighted] {\n background: var(--surface-control);\n}\n\n.select__item[data-disabled] {\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.select__item-indicator {\n display: inline-flex;\n width: 16px;\n flex: 0 0 16px;\n align-items: center;\n justify-content: center;\n}\n\n.select__item-text {\n min-width: 0;\n flex: 1 1 0;\n overflow: hidden;\n text-align: left;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
7
- const buttonStyles = ".button {\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n background: var(--surface-control);\n border: 0;\n color: var(--text-primary);\n cursor: pointer;\n font: inherit;\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n min-height: var(--control-height-large);\n padding: 0 12px;\n border-radius: var(--radius-control);\n vertical-align: middle;\n transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.button--compact {\n min-height: var(--control-height-small);\n padding: 0 10px;\n font-size: var(--font-size-base);\n}\n\n.button--primary {\n background: var(--surface-raised-2x);\n color: var(--text-primary);\n box-shadow: var(--shadow-control);\n}\n\n.button--secondary {\n background: var(--surface-control);\n}\n\n.button--quiet {\n background: transparent;\n color: var(--text-primary);\n}\n\n.button--danger {\n background: var(--danger-surface);\n color: var(--danger-text);\n}\n\n.button--disabled {\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.button:hover:not(:disabled) {\n background: var(--surface-control-hover);\n}\n\n.button--quiet:hover:not(:disabled) {\n background: var(--surface-well);\n}\n\n.button--primary:hover:not(:disabled) {\n background: var(--surface-raised-hover);\n color: var(--text-primary);\n box-shadow: var(--shadow-control);\n}\n\n.button[data-active=\"true\"] {\n background: var(--accent-surface);\n color: var(--accent);\n}\n\n.button[data-active=\"true\"]:hover:not(:disabled) {\n background: var(--accent-surface);\n color: var(--accent);\n}\n\n.button:focus-visible {\n outline: 0;\n box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.button:disabled {\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n";
7
+ const selectStyles = ".select {\n display: inline-flex;\n width: 100%;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n text-align: left;\n cursor: pointer;\n}\n\n.select:disabled {\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.select__value,\n.select [data-slot=\"select-value\"] {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.select__icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n color: var(--text-muted);\n transition: transform 120ms ease;\n}\n\n.select[data-popup-open] .select__icon {\n color: var(--text-primary);\n transform: rotate(180deg);\n}\n\n.select__positioner {\n z-index: var(--z-index);\n min-width: var(--anchor-width);\n pointer-events: auto;\n}\n\n.select__popup {\n box-sizing: border-box;\n width: min(420px, max(var(--anchor-width, 0px), 260px));\n min-width: 0;\n max-width: calc(100vw - 24px);\n max-height: min(320px, calc(100dvh - 24px), var(--available-height, 100dvh));\n overflow-x: hidden;\n overflow-y: auto;\n overscroll-behavior: contain;\n pointer-events: auto;\n background: var(--surface-raised-2x);\n color: var(--text-primary);\n border-radius: var(--radius-8);\n box-shadow: var(--shadow-popup);\n transform-origin: var(--transform-origin);\n}\n\n.select__popup--searchable {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.select__search-input {\n box-sizing: border-box;\n flex: 0 0 auto;\n width: calc(100% - (var(--space-4) * 2));\n min-height: 32px;\n margin: var(--space-4);\n padding: var(--space-8);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-8);\n background: var(--surface-control);\n color: var(--text-primary);\n outline: 0;\n font: inherit;\n}\n\n.select__search-input::placeholder {\n color: var(--text-muted);\n opacity: 1;\n}\n\n.select__search-input:focus {\n border-color: var(--border-strong);\n box-shadow: 0 0 0 2px var(--accent);\n}\n\n.select__empty {\n padding: 12px 14px;\n color: var(--text-muted);\n font-size: var(--font-size-base);\n}\n\n.select__empty:empty {\n padding: 0;\n}\n\n.select__list {\n min-width: 0;\n padding: var(--space-4);\n outline: 0;\n}\n\n.select__list--searchable {\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n.select__group + .select__group {\n margin-top: 4px;\n padding-top: 4px;\n border-top: 1px solid var(--border-subtle);\n}\n\n.select__group-label {\n padding: 5px 8px 4px;\n color: var(--text-muted);\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\n.select__item {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n min-height: 34px;\n padding: 6px 9px;\n border-radius: var(--radius-4);\n color: var(--text-primary);\n outline: 0;\n font-size: var(--font-size-base);\n cursor: pointer;\n}\n\n.select__item[data-highlighted] {\n background: var(--surface-control);\n}\n\n.select__item[data-disabled] {\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.select__item-indicator {\n display: inline-flex;\n width: 16px;\n flex: 0 0 16px;\n align-items: center;\n justify-content: center;\n}\n\n.select__item-text {\n min-width: 0;\n flex: 1 1 0;\n overflow: hidden;\n text-align: left;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
8
+ 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";
8
9
  const segmentedControlStyles = ".segmented-control {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n align-items: stretch;\n gap: 2px;\n min-width: 0;\n min-height: var(--control-height-large);\n padding: 2px;\n box-sizing: border-box;\n overflow: hidden;\n border-radius: var(--radius-control);\n background: var(--surface-well);\n}\n\n/* button is the base; stretch fills the padded track (grows with text). */\n.button.segmented-control__button {\n min-width: 0;\n min-height: 0;\n height: auto;\n padding: 0 var(--space-8);\n border: 0;\n border-radius: 6px; /*Custom to fit inside control surface*/\n background: transparent;\n color: var(--text-muted);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n box-shadow: none;\n}\n\n.button.segmented-control__button--selected,\n.button.segmented-control__button--selected:hover:not(:disabled) {\n background: var(--surface-raised-2x);\n color: var(--text-primary);\n box-shadow: var(--shadow-control);\n}\n\n.button.segmented-control__button:not(.segmented-control__button--selected):hover:not(:disabled) {\n background: transparent;\n color: var(--text-primary);\n}\n\n.segmented-control__button svg {\n flex-shrink: 0;\n}\n\n.segmented-control__label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
9
- const iconButtonStyles = ".icon-button {\n appearance: none;\n background: var(--surface-control);\n border: 0;\n color: var(--text-primary);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--control-height-large);\n height: var(--control-height-large);\n padding: 0;\n border-radius: var(--radius-control);\n font: inherit;\n font-size: var(--font-size-base);\n font-weight: 650;\n transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.icon-button svg {\n stroke-width: var(--icon-stroke-width);\n}\n\n.icon-button--primary {\n background: var(--surface-raised-2x);\n color: var(--text-primary);\n box-shadow: var(--shadow-control);\n}\n\n.icon-button--secondary {\n background: var(--surface-control);\n}\n\n.icon-button--quiet {\n background: transparent;\n color: var(--text-primary);\n}\n\n.icon-button--danger {\n background: var(--danger-surface);\n color: var(--danger-text);\n}\n\n.icon-button--disabled {\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.icon-button:hover:not(:disabled) {\n background: var(--surface-well);\n}\n\n.icon-button--primary:hover:not(:disabled) {\n background: var(--surface-raised-hover);\n color: var(--text-primary);\n box-shadow: var(--shadow-control);\n}\n\n.icon-button[data-active=\"true\"] {\n background: var(--accent-surface);\n color: var(--accent);\n}\n\n.icon-button:focus-visible {\n outline: 0;\n box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.icon-button:disabled {\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.icon-button--compact {\n width: var(--control-height-small);\n height: var(--control-height-small);\n}\n";
10
- const toggleButtonStyles = ".toggle-button {\n appearance: none;\n background: var(--surface-control);\n border: 0;\n color: var(--text-primary);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--control-height-large);\n height: var(--control-height-large);\n padding: 0;\n border-radius: var(--radius-control);\n font: inherit;\n font-size: var(--font-size-base);\n font-weight: 650;\n transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.toggle-button svg {\n stroke-width: var(--icon-stroke-width);\n}\n\n.toggle-button--primary {\n background: var(--accent);\n color: #ffffff;\n}\n\n.toggle-button--secondary {\n background: var(--surface-control);\n}\n\n.toggle-button--quiet {\n background: transparent;\n color: var(--text-primary);\n}\n\n.toggle-button--danger {\n background: var(--danger-surface);\n color: var(--danger-text);\n}\n\n.toggle-button--disabled {\n background: var(--surface-control);\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.toggle-button:hover:not(:disabled) {\n background: var(--surface-well);\n}\n\n.toggle-button--primary:hover:not(:disabled) {\n background: var(--accent);\n}\n\n.toggle-button[data-pressed] {\n background: var(--accent-surface);\n color: var(--accent);\n}\n\n.toggle-button[data-pressed]:hover:not(:disabled) {\n background: var(--accent-surface);\n color: var(--accent);\n}\n\n.toggle-button:focus-visible {\n outline: 0;\n box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.toggle-button:disabled {\n background: var(--surface-control);\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.toggle-button--compact {\n width: 26px;\n height: 26px;\n}\n";
10
+ const iconButtonStyles = ".icon-button {\n appearance: none;\n background: var(--surface-control);\n border: 0;\n color: var(--text-primary);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--control-height-large);\n height: var(--control-height-large);\n padding: 0;\n border-radius: var(--radius-control);\n font: inherit;\n font-size: var(--font-size-base);\n font-weight: 650;\n transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.icon-button svg {\n stroke-width: var(--icon-stroke-width);\n}\n\n.icon-button--primary {\n background: var(--surface-raised-2x);\n color: var(--text-primary);\n box-shadow: var(--shadow-control);\n}\n\n.icon-button--secondary {\n background: var(--surface-control);\n}\n\n.icon-button--quiet {\n background: transparent;\n color: var(--text-primary);\n}\n\n.icon-button--danger {\n background: var(--danger-surface);\n color: var(--danger-text);\n}\n\n.icon-button--disabled {\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.icon-button:hover:not(:disabled) {\n background: var(--surface-well);\n}\n\n.icon-button--primary:hover:not(:disabled) {\n background: var(--surface-raised-hover);\n color: var(--text-primary);\n box-shadow: var(--shadow-control);\n}\n\n.icon-button[data-active=\"true\"] {\n background: var(--accent-surface);\n color: var(--accent);\n}\n\n.icon-button:focus-visible {\n outline: 0;\n box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.icon-button:disabled {\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.icon-button--compact {\n width: var(--control-height-small);\n height: var(--control-height-small);\n border-radius: var(--radius-4);\n}\n\n.icon-button--large {\n width: var(--control-height-xlarge);\n height: var(--control-height-xlarge);\n}\n\n.icon-button--large svg {\n width: var(--icon-size-large);\n height: var(--icon-size-large);\n}\n";
11
+ const toggleButtonStyles = ".toggle-button {\n appearance: none;\n background: var(--surface-control);\n border: 0;\n color: var(--text-primary);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--control-height-large);\n height: var(--control-height-large);\n padding: 0;\n border-radius: var(--radius-control);\n font: inherit;\n font-size: var(--font-size-base);\n font-weight: 650;\n transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n\n.toggle-button svg {\n stroke-width: var(--icon-stroke-width);\n}\n\n.toggle-button--primary {\n background: var(--accent);\n color: #ffffff;\n}\n\n.toggle-button--secondary {\n background: var(--surface-control);\n}\n\n.toggle-button--quiet {\n background: transparent;\n color: var(--text-primary);\n}\n\n.toggle-button--danger {\n background: var(--danger-surface);\n color: var(--danger-text);\n}\n\n.toggle-button--disabled {\n background: var(--surface-control);\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.toggle-button:hover:not(:disabled) {\n background: var(--surface-well);\n}\n\n.toggle-button--primary:hover:not(:disabled) {\n background: var(--accent);\n}\n\n.toggle-button[data-pressed] {\n background: var(--accent-surface);\n color: var(--accent);\n}\n\n.toggle-button[data-pressed]:hover:not(:disabled) {\n background: var(--accent-surface);\n color: var(--accent);\n}\n\n.toggle-button:focus-visible {\n outline: 0;\n box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.toggle-button:disabled {\n background: var(--surface-control);\n color: var(--text-muted-subtle);\n cursor: not-allowed;\n}\n\n.toggle-button--compact {\n width: 26px;\n height: 26px;\n border-radius: var(--radius-4);\n}\n\n.toggle-button--large {\n width: var(--control-height-xlarge);\n height: var(--control-height-xlarge);\n}\n\n.toggle-button--large svg {\n width: var(--icon-size-large);\n height: var(--icon-size-large);\n}\n";
12
+ const disclosureStyles = ".disclosure__trigger {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n width: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--text-secondary);\n font-family: inherit;\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-label);\n line-height: 1.4;\n text-align: left;\n cursor: pointer;\n}\n\n.disclosure__trigger:hover {\n color: var(--text-primary);\n}\n\n.disclosure__trigger:hover .disclosure__chevron {\n color: var(--text-primary);\n}\n\n.disclosure__trigger:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 2px;\n border-radius: var(--radius-4);\n}\n\n.disclosure__label {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.disclosure__chevron {\n flex: none;\n color: var(--text-muted);\n transition: transform 120ms ease;\n}\n\n.disclosure__trigger[data-panel-open] .disclosure__chevron {\n transform: rotate(180deg);\n}\n\n.disclosure__panel {\n min-width: 0;\n}\n";
11
13
  const statusCalloutStyles = ".status-callout {\n padding: 12px 14px;\n background: var(--surface-control);\n border: 0;\n border-radius: 12px;\n color: var(--text-secondary);\n font-size: var(--font-size-base);\n line-height: 1.4;\n}\n\n.status-callout--warning {\n background: var(--warning-surface);\n color: var(--warning-text);\n}\n\n.status-callout--accent {\n background: var(--accent-surface);\n color: var(--accent);\n}\n\n.status-callout--danger {\n background: var(--danger-surface);\n color: var(--danger-text);\n}\n";
12
14
  const colorSwatchStyles = ".color-swatch {\n display: inline-block;\n flex-shrink: 0;\n width: var(--icon-size-small);\n height: var(--icon-size-small);\n background: var(--swatch-color);\n border-radius: calc(var(--radius-control) - 4px);\n border: 1px solid #fff;\n box-shadow: 0 0 0 1px var(--border-medium);\n}\n";
13
15
  const popoverListboxStyles = ".popover-listbox {\n position: relative;\n width: 100%;\n}\n\n.popover-listbox__positioner {\n z-index: 20;\n pointer-events: auto;\n}\n\n.popover-listbox__popup {\n box-sizing: border-box;\n width: min(420px, max(var(--anchor-width, 0px), 260px));\n min-width: 0;\n max-width: calc(100vw - 24px);\n max-height: min(320px, calc(100dvh - 24px), var(--available-height, 100dvh));\n overflow-x: hidden;\n overflow-y: auto;\n overscroll-behavior: contain;\n pointer-events: auto;\n background: var(--surface-raised-2x);\n border-radius: var(--radius-8);\n box-shadow: var(--shadow-popup);\n}\n\n.popover-listbox__popup--searchable {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.popover-listbox__search-input {\n box-sizing: border-box;\n flex: 0 0 auto;\n width: 100%;\n min-height: 32px;\n padding: var(--space-12) var(--space-16);\n border: none;\n border-bottom: 1px solid var(--border-subtle);\n background: transparent;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n outline: 0;\n}\n\n.popover-listbox__search-input::placeholder {\n color: var(--text-muted);\n opacity: 1;\n}\n\n.popover-listbox__search-input:focus {\n border-color: var(--border-strong);\n}\n\n.popover-listbox__empty {\n padding: var(--space-12) var(--space-16);\n color: var(--text-muted);\n font-size: var(--font-size-base);\n}\n\n.popover-listbox__empty:empty {\n padding: 0;\n}\n\n.popover-listbox__list {\n min-width: 0;\n padding: var(--space-4);\n}\n\n.popover-listbox__list--searchable {\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n.popover-listbox__item {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n min-height: 34px;\n padding: 6px 9px;\n border-radius: var(--radius-4);\n color: var(--text-primary);\n cursor: pointer;\n font-size: var(--font-size-base);\n}\n\n.popover-listbox__item[data-highlighted] {\n background: var(--surface-control);\n}\n\n.popover-listbox__leading {\n display: inline-flex;\n flex-shrink: 0;\n}\n\n.popover-listbox__label {\n min-width: 0;\n flex: 1 1 auto;\n overflow: hidden;\n color: var(--text-primary);\n text-align: left;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.popover-listbox__trailing {\n min-width: 0;\n max-width: 45%;\n flex: 0 1 auto;\n overflow: hidden;\n color: var(--text-muted);\n font-size: var(--font-size-base);\n text-align: right;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
14
16
  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";
15
17
  const sideValuesFieldStyles = ".side-values {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: 6px;\n}\n\n.side-values__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n}\n\n.side-values__label {\n min-width: 0;\n color: var(--text-secondary);\n font-size: var(--font-size-base);\n line-height: 1.25;\n}\n\n.side-values__linked {\n min-width: 0;\n}\n\n.side-values__value-row {\n display: grid;\n min-width: 0;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n gap: 6px;\n}\n\n.side-values[data-expanded=\"true\"] .side-values__value-row {\n align-items: start;\n}\n\n.side-values__linked-row {\n grid-template-columns: auto minmax(0, 1fr) auto;\n}\n\n.side-values__linked-row--no-label {\n grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.side-values__linked-row .side-values__label {\n white-space: nowrap;\n}\n\n.side-values__pairs {\n display: grid;\n min-width: 0;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 6px;\n}\n\n.side-values__grid {\n display: grid;\n min-width: 0;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n grid-template-areas:\n \"left top\"\n \"right bottom\";\n gap: 6px;\n}\n\n.side-values__grid [data-side=\"left\"] {\n grid-area: left;\n}\n\n.side-values__grid [data-side=\"right\"] {\n grid-area: right;\n}\n\n.side-values__grid [data-side=\"top\"] {\n grid-area: top;\n}\n\n.side-values__grid [data-side=\"bottom\"] {\n grid-area: bottom;\n}\n\n.side-values__grid[data-layout=\"corners\"] {\n grid-template-areas:\n \"top-left top-right\"\n \"bottom-left bottom-right\";\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"top\"] {\n grid-area: top-left;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"right\"] {\n grid-area: top-right;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"bottom\"] {\n grid-area: bottom-right;\n}\n\n.side-values__grid[data-layout=\"corners\"] [data-side=\"left\"] {\n grid-area: bottom-left;\n}\n\n.side-values__side {\n color: var(--text-muted);\n}\n\n.side-values__icon {\n width: var(--icon-size-small);\n height: var(--icon-size-small);\n flex: 0 0 var(--icon-size-small);\n fill: none;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: var(--icon-stroke-width);\n}\n\n.side-values__axis-icon {\n color: var(--text-secondary);\n}\n\n.side-values__side-icon {\n color: var(--text-secondary);\n}\n\n.side-values__icon-emphasis,\n.side-values__icon-emphasis path {\n stroke-width: var(--icon-stroke-width);\n}\n\n.side-values__control {\n display: flex;\n align-self: stretch;\n min-width: 0;\n flex: 1 1 auto;\n}\n";
16
- const inspectorShellStyles = ":host { --panel-width: min(320px, 100vw); }\n\n.panel {\n position: fixed;\n inset: 0 0 0 auto;\n z-index: 2;\n width: var(--panel-width);\n height: 100dvh;\n overflow: auto;\n background: var(--surface-panel);\n color: var(--text-primary);\n border: 0;\n border-left: 1px solid var(--border-subtle);\n border-radius: var(--radius-0);\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n line-height: 1.35;\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n scrollbar-color: var(--border-strong) transparent;\n scrollbar-width: thin;\n}\n\n.panel[data-open=\"false\"] {\n display: none;\n}\n\n.panel__restore {\n position: fixed;\n top: max(12px, env(safe-area-inset-top));\n right: max(12px, env(safe-area-inset-right));\n z-index: calc(var(--z-index) + 1);\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--control-height-large) + (var(--space-4) * 2));\n height: calc(var(--control-height-large) + (var(--space-4) * 2));\n padding: var(--space-4);\n border-radius: var(--radius-12);\n background: var(--surface-raised-2x);\n box-shadow: var(--shadow-popup);\n pointer-events: auto;\n animation: panel-restore-in 160ms ease-out;\n}\n\n.panel__restore-button.icon-button {\n width: 100%;\n height: 100%;\n}\n\n@keyframes panel-restore-in {\n from { opacity: 0; transform: translateX(8px); }\n to { opacity: 1; transform: translateX(0); }\n}\n\n.scope__warning {\n color: var(--warning-text);\n font-weight: 500;\n}\n\n.panel__tabs {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n padding: var(--space-12) var(--space-24);\n border-bottom: 1px solid var(--border-subtle);\n}\n\n.panel__header-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-8);\n width: 100%;\n}\n\n.panel__header-actions,\n.panel__copy-row {\n display: flex;\n align-items: center;\n}\n\n.panel__header-actions {\n min-width: 0;\n gap: var(--space-4);\n}\n\n.panel__copy-row {\n gap: var(--space-8);\n}\n\n.panel__header-divider {\n width: 1px;\n height: var(--control-height-large);\n margin: 0 var(--space-4);\n background: var(--border-subtle);\n}\n\n.panel__canvas-button {\n white-space: nowrap;\n}\n\n.panel__copy-row {\n width: 100%;\n}\n\n.copy-prompt__stack {\n width: 100%;\n min-width: 0;\n}\n\n.copy-prompt__main.button {\n width: 100%;\n}\n\n.copy-prompt__hint {\n margin: var(--space-8) 0 0;\n color: var(--text-secondary);\n font-size: var(--font-size-small);\n line-height: 1.4;\n}\n\n.copy-prompt__hint code {\n font-family: var(--font-mono);\n}\n\n.copy-prompt__agent-status {\n margin-top: var(--space-8);\n}\n\n.copy-prompt__agent-status-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-8);\n}\n\n.copy-prompt__agent-status-content > span {\n min-width: 0;\n}\n\n.copy-prompt__agent-status-content .button--quiet {\n flex: 0 0 auto;\n color: inherit;\n}\n\n.copy-prompt__agent-status--listening {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n margin-top: var(--space-8);\n color: var(--text-secondary);\n font-size: 14px;\n line-height: 1.4;\n text-align: center;\n}\n\n.panel__body {\n min-height: auto;\n padding: 0 20px 28px;\n background: var(--surface-panel);\n color: var(--text-secondary);\n overflow: visible;\n flex: 0 0 auto;\n}\n\n.panel__body:has(.empty-state) {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-height: 0;\n}\n\n.panel::-webkit-scrollbar {\n width: 6px;\n}\n\n.panel::-webkit-scrollbar-thumb {\n background: var(--border-strong);\n border-radius: var(--radius-pill);\n}\n\n.selection {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 14px 0 16px;\n border-bottom: 1px solid var(--border-subtle);\n}\n\n.selection--without-scope-callout {\n border-bottom: 0;\n}\n\n.selection__summary {\n display: grid;\n gap: 2px;\n}\n\n.selection__count {\n color: var(--text-primary);\n font-weight: 600;\n}\n\n.style-state {\n grid-template-columns: var(--label-column) minmax(0, 1fr);\n column-gap: 6px;\n}\n\n.scope {\n margin-top: 6px;\n}\n\n.scope__action {\n margin-top: 0;\n}\n\n.scope__unlinked,\n.scope__linked {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-8);\n}\n\n.style-editors {\n margin-top: 0;\n background: var(--surface-panel);\n border-top: 0;\n padding-top: 0;\n}\n\n.component-props__source {\n color: var(--text-muted-subtle);\n font-size: 10px;\n font-weight: 650;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n\n.component-props .field-row__label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.inline-text-editor {\n display: grid;\n gap: 8px;\n padding: 10px 12px;\n border: 1px solid var(--border-strong);\n border-radius: 8px;\n background: var(--surface-raised);\n}\n\n.inline-text-editor__binding {\n font-family: var(--font-mono);\n color: var(--text-primary);\n}\n\n.inline-text-editor__chooser {\n display: grid;\n gap: 4px;\n}\n\n.inline-text-editor__chooser-label {\n color: var(--text-muted-subtle);\n font-size: 10px;\n font-weight: 650;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\n.inline-text-editor__chooser-options {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n}\n\n.inline-text-editor__actions {\n display: flex;\n justify-content: flex-end;\n gap: 6px;\n}\n\n.style-editors__title {\n color: var(--text-muted);\n margin-bottom: 8px;\n font-weight: 600;\n}\n\n.empty-state + .changes {\n margin-top: auto;\n}\n\n.changes__empty {\n color: var(--text-muted-subtle);\n}\n\n.editor {\n margin: 0;\n padding: var(--space-8) 0;\n background: var(--surface-panel);\n border: 0;\n border-bottom: 1px solid var(--border-subtle);\n border-radius: 0;\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n\n.editor__title {\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-label);\n letter-spacing: -0.02em;\n min-height: var(--control-height-large);\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-transform: none;\n}\n\n.editor__title-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n}\n\n.editor__title-row .editor__title {\n margin-bottom: 0;\n}\n";
18
+ const inspectorShellStyles = ":host { --panel-width: min(320px, 100vw); }\n\n.panel {\n position: fixed;\n inset: 0 0 0 auto;\n z-index: 2;\n width: var(--panel-width);\n height: 100dvh;\n overflow: auto;\n background: var(--surface-panel);\n color: var(--text-primary);\n border: 0;\n border-left: 1px solid var(--border-subtle);\n border-radius: var(--radius-0);\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n line-height: 1.35;\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n scrollbar-color: var(--border-strong) transparent;\n scrollbar-width: thin;\n}\n\n.panel[data-open=\"false\"] {\n display: none;\n}\n\n.panel__restore {\n position: fixed;\n top: max(12px, env(safe-area-inset-top));\n right: max(12px, env(safe-area-inset-right));\n z-index: calc(var(--z-index) + 1);\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--control-height-large) + (var(--space-4) * 2));\n height: calc(var(--control-height-large) + (var(--space-4) * 2));\n padding: var(--space-4);\n border-radius: var(--radius-12);\n background: var(--surface-raised-2x);\n box-shadow: var(--shadow-popup);\n pointer-events: auto;\n animation: panel-restore-in 160ms ease-out;\n}\n\n.panel__restore-button.icon-button {\n width: 100%;\n height: 100%;\n}\n\n@keyframes panel-restore-in {\n from { opacity: 0; transform: translateX(8px); }\n to { opacity: 1; transform: translateX(0); }\n}\n\n.scope__warning {\n color: var(--warning-text);\n font-weight: 500;\n}\n\n.panel__tabs {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n padding: var(--space-12) var(--space-24);\n border-bottom: 1px solid var(--border-subtle);\n}\n\n.panel__header-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-8);\n width: 100%;\n}\n\n.panel__header-actions,\n.panel__copy-row {\n display: flex;\n align-items: center;\n}\n\n.panel__header-actions {\n min-width: 0;\n gap: var(--space-4);\n}\n\n.panel__copy-row {\n gap: var(--space-8);\n}\n\n.panel__header-divider {\n width: 1px;\n height: var(--control-height-large);\n margin: 0 var(--space-4);\n background: var(--border-subtle);\n}\n\n.panel__copy-row {\n width: 100%;\n}\n\n.copy-prompt__stack {\n width: 100%;\n min-width: 0;\n}\n\n.copy-prompt__main.button {\n width: 100%;\n position: relative;\n}\n\n.copy-prompt__agent-listening {\n position: absolute;\n top: 50%;\n right: var(--space-12);\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: rgb(34 197 94);\n transform: translateY(-50%);\n}\n\n.copy-prompt__hint {\n margin: var(--space-8) 0 0;\n color: var(--text-secondary);\n font-size: var(--font-size-small);\n line-height: 1.4;\n}\n\n.copy-prompt__hint--centered {\n text-align: center;\n}\n\n.copy-prompt__hint code {\n font-family: var(--font-mono);\n}\n\n.copy-prompt__agent-status {\n margin-top: var(--space-8);\n}\n\n.copy-prompt__agent-status-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-8);\n}\n\n.copy-prompt__agent-status-content > span {\n min-width: 0;\n}\n\n.copy-prompt__agent-status-content .button--quiet {\n flex: 0 0 auto;\n color: inherit;\n}\n\n.copy-prompt__sketch-fallback {\n display: grid;\n gap: var(--space-8);\n margin-top: var(--space-8);\n}\n\n.panel__body {\n min-height: auto;\n padding: 0 20px 28px;\n background: var(--surface-panel);\n color: var(--text-secondary);\n overflow: visible;\n flex: 0 0 auto;\n}\n\n.panel__body:has(.empty-state) {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-height: 0;\n}\n\n.panel::-webkit-scrollbar {\n width: 6px;\n}\n\n.panel::-webkit-scrollbar-thumb {\n background: var(--border-strong);\n border-radius: var(--radius-pill);\n}\n\n.selection {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 14px 0 16px;\n border-bottom: 1px solid var(--border-subtle);\n}\n\n.selection--without-scope-callout {\n border-bottom: 0;\n}\n\n.selection__summary {\n display: grid;\n gap: 2px;\n}\n\n.selection__count {\n color: var(--text-primary);\n font-weight: 600;\n}\n\n.style-state {\n grid-template-columns: var(--label-column) minmax(0, 1fr);\n column-gap: 6px;\n}\n\n.scope {\n margin-top: 6px;\n}\n\n.scope__action {\n margin-top: 0;\n}\n\n.scope__unlinked,\n.scope__linked {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-8);\n}\n\n.style-editors {\n margin-top: 0;\n background: var(--surface-panel);\n border-top: 0;\n padding-top: 0;\n}\n\n.component-props__source {\n color: var(--text-muted-subtle);\n font-size: 10px;\n font-weight: 650;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n\n.component-props .field-row__label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.inline-text-diagnostic {\n margin-top: 12px;\n font-weight: 400;\n}\n\n.style-editors__title {\n color: var(--text-muted);\n margin-bottom: 8px;\n font-weight: 600;\n}\n\n.empty-state + .changes {\n margin-top: auto;\n}\n\n.changes__empty {\n color: var(--text-muted-subtle);\n}\n\n.editor {\n margin: 0;\n padding: var(--space-8) 0;\n background: var(--surface-panel);\n border: 0;\n border-bottom: 1px solid var(--border-subtle);\n border-radius: 0;\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n\n.editor__title {\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-label);\n letter-spacing: -0.02em;\n min-height: var(--control-height-large);\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-transform: none;\n}\n\n.editor__title-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n}\n\n.editor__title-row .editor__title {\n margin-bottom: 0;\n}\n";
19
+ const inspectorOverlayStyles = ".hover-outline,\n.selected-outline {\n position: fixed;\n pointer-events: none;\n outline-offset: -2px;\n}\n\n.measurement-overlay {\n position: fixed;\n inset: 0;\n z-index: 0;\n overflow: visible;\n pointer-events: none;\n}\n\n.alignment-guide {\n stroke: rgb(59 130 246 / 46%);\n stroke-dasharray: 3 4;\n stroke-width: 1;\n vector-effect: non-scaling-stroke;\n}\n\n.measurement-ruler {\n stroke: #ef4444;\n stroke-width: 1;\n vector-effect: non-scaling-stroke;\n}\n\n.measurement-projection {\n stroke: #ef4444;\n stroke-dasharray: 4 4;\n stroke-width: 1;\n vector-effect: non-scaling-stroke;\n}\n\n.measurement-label {\n fill: #fff;\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-size: 12px;\n font-weight: 600;\n}\n\n.measurement-label-chip {\n fill: #ef4444;\n}\n\n.dom-drop-line {\n z-index: 4;\n height: 3px;\n margin-top: -1px;\n border-radius: 999px;\n background: #3b82f6;\n box-shadow: 0 0 0 1px rgb(255 255 255 / 80%);\n}\n\n.dom-drop-target {\n z-index: 3;\n box-sizing: border-box;\n border: 1px solid rgb(59 130 246 / 72%);\n border-radius: 4px;\n background: rgb(59 130 246 / 5%);\n}\n\n.hover-outline {\n outline: 2px solid var(--accent);\n}\n\n.selected-outline {\n outline: 2px solid var(--accent);\n}\n\n.hover-margin-fill {\n background: rgb(59 130 246 / 14%);\n}\n\n.hover-margin {\n border-color: rgb(59 130 246 / 52%);\n border-style: dotted;\n border-width: 0;\n opacity: 0.72;\n}\n\n.hover-margin[data-axis=\"horizontal\"] {\n border-top-width: 1px;\n}\n\n.hover-margin[data-axis=\"vertical\"] {\n border-left-width: 1px;\n}\n\n.dom-navigator,\n.dom-navigator-preview {\n position: fixed;\n pointer-events: none;\n}\n\n.dom-navigator {\n z-index: 2147483647;\n pointer-events: auto;\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n}\n\n.dom-navigator__trigger,\n.dom-navigator__item {\n appearance: none;\n display: flex;\n align-items: center;\n gap: var(--space-4);\n border: 1px solid var(--border-strong);\n color: var(--text-primary);\n cursor: pointer;\n font: inherit;\n white-space: nowrap;\n}\n\n.dom-navigator__trigger {\n min-height: var(--control-height-small);\n padding: 0 var(--space-8);\n border-radius: var(--radius-4);\n background: var(--surface-raised-2x);\n box-shadow: var(--shadow-popup);\n}\n\n.dom-navigator__menu {\n display: grid;\n min-width: 140px;\n margin-top: var(--space-4);\n padding: var(--space-4);\n gap: var(--space-2);\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-4);\n background: var(--surface-panel);\n box-shadow: var(--shadow-popup);\n}\n\n.dom-navigator__item {\n width: 100%;\n min-height: var(--control-height-small);\n padding: 0 var(--space-8);\n border-color: transparent;\n background: transparent;\n text-align: left;\n}\n\n.dom-navigator__trigger:hover,\n.dom-navigator__item:hover,\n.dom-navigator__trigger:focus-visible,\n.dom-navigator__item:focus-visible {\n background: var(--surface-control-hover);\n outline: 0;\n}\n\n.dom-navigator-preview {\n z-index: 2147483646;\n outline: 2px solid var(--accent);\n outline-offset: -2px;\n}\n";
17
20
  const emptyStateStyles = ".empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: var(--space-40) var(--space-0) var(--space-24);\n min-height: 70dvh;\n text-align: center;\n color: var(--text-secondary);\n}\n\n.empty-state__icon { display: block; width: min(100%, 182px); height: auto; margin-bottom: var(--space-16); }\n.empty-state__title { margin: 0; color: var(--text-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-base); }\n.empty-state__shortcuts { width: 100%; margin-top: var(--space-32); padding-top: var(--space-20); text-align: left; }\n.empty-state__shortcut-list { display: grid; gap: var(--space-8); margin: var(--space-0); padding: var(--space-0); list-style: none; }\n.empty-state__shortcut { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: var(--control-height-small); color: var(--text-secondary); }\n.empty-state__shortcut-keys { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-muted); }\n.empty-state__shortcut-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height-small); height: var(--control-height-small); padding: var(--space-0) var(--space-8); border-radius: var(--radius-4); background: var(--surface-raised-2x); color: var(--text-primary); font-family: var(--font-family); font-size: var(--font-size-small); box-shadow: var(--shadow-control); }\n.empty-state__shortcut-keys > span { color: var(--text-muted-subtle); font-size: var(--font-size-small); }\n";
18
21
  const styleEditorStyles = "/* Shared chrome for style-editor sections. */\n.layout,\n.spacing,\n.typography,\n.border,\n.property,\n.color {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n background: var(--surface-panel);\n}\n\n.appearance {\n gap: var(--space-12);\n}\n\n.appearance__fields {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;\n gap: var(--space-12);\n}\n\n.appearance__field {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: var(--space-8);\n}\n\n.appearance__field-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-8);\n}\n\n.appearance__field-label {\n min-width: 0;\n color: var(--text-secondary);\n font-size: var(--font-size-base);\n line-height: 1.25;\n}\n\n.border-radius-editor__main {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: var(--space-8);\n}\n\n.border-radius-editor--embedded {\n display: contents;\n}\n\n.border-radius-editor--embedded > .border-radius-editor__main {\n grid-column: 2;\n}\n\n.border-radius-editor--embedded > .border-radius-editor__toggle {\n grid-column: 3;\n align-self: end;\n}\n\n.border-radius__grouped-row {\n display: grid;\n min-width: 0;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: stretch;\n gap: var(--space-8);\n}\n\n.border-radius__grouped-row > .control-surface {\n min-width: 0;\n}\n\n.border-radius-editor__individuals {\n grid-column: 1 / span 2;\n min-width: 0;\n}\n\n.opacity-editor__effective {\n flex: 0 0 auto;\n color: var(--text-secondary);\n font-size: var(--font-size-base);\n}\n";
19
22
  const borderEditorStyles = ".border__linked-row {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.border__linked-control {\n flex: 1 1 0;\n min-width: 0;\n}\n\n.border__linked-control--color {\n flex: 3 1 0;\n}\n\n.border__linked-control--width {\n flex: 1 1 0;\n}\n\n.border__linked-row > .popover-listbox,\n.border__linked-row > .toggle-button {\n flex: 0 0 auto;\n}\n\n.border__linked-row > .popover-listbox {\n width: auto;\n}\n\n.border__expanded {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.border__expanded-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 26px;\n}\n\n.border__side-rows {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.border__side-row {\n display: grid;\n min-width: 0;\n grid-template-columns: auto minmax(0, 3fr) minmax(0, 1fr) auto;\n align-items: center;\n gap: 6px;\n}\n\n.border__side-row > .side-values__side-icon {\n justify-self: center;\n}\n\n.border__side-control {\n min-width: 0;\n}\n\n.border__side-row > .popover-listbox {\n flex: 0 0 auto;\n}\n";
20
23
  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";
21
- const layoutSectionStyles = ".layout__group {\n margin-top: 4px;\n padding-top: 10px;\n border-top: 1px solid var(--border-subtle);\n background: var(--surface-panel);\n}\n\n.layout__basic {\n display: flex;\n flex-direction: column;\n gap: var(--space-12);\n}\n\n.layout__tool-row {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control-height-large);\n gap: var(--space-8);\n align-items: end;\n}\n\n.layout__tool-row .field-row {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n min-width: 0;\n min-height: 0;\n}\n\n\n.layout__tool-row .field-row__control {\n min-width: 0;\n width: 100%;\n}\n\n.layout__size {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n\n.layout__size-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr)) auto;\n grid-template-areas:\n \"width height toggle\"\n \"min-width min-height .\"\n \"max-width max-height .\"\n \"aspect-ratio . .\";\n gap: 6px;\n align-items: end;\n}\n\n.layout__size[data-expanded=\"false\"] .layout__size-grid {\n grid-template-areas: \"width height toggle\";\n}\n\n.layout__size-cell {\n min-width: 0;\n}\n\n.layout__size-cell--width { grid-area: width; }\n.layout__size-cell--height { grid-area: height; }\n.layout__size-cell--toggle { grid-area: toggle; }\n.layout__size-cell--min-width { grid-area: min-width; }\n.layout__size-cell--min-height { grid-area: min-height; }\n.layout__size-cell--max-width { grid-area: max-width; }\n.layout__size-cell--max-height { grid-area: max-height; }\n.layout__size-cell--aspect-ratio { grid-area: aspect-ratio; }\n\n.layout__size-grid .field-row {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n min-width: 0;\n min-height: 0;\n}\n\n\n.layout__size-grid .field-row__control,\n.layout__size-grid .token-field {\n min-width: 0;\n width: 100%;\n}\n\n.layout__size-grid .layout-combo,\n.layout__aspect-ratio-control {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: 4px;\n align-items: center;\n}\n\n.layout__size-grid .layout-combo__custom {\n min-width: 0;\n}\n\n.layout__aspect-ratio-control .text-input {\n min-width: 0;\n}\n\n\n.layout__grid {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.layout__grid-primary {\n display: grid;\n grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);\n gap: 10px;\n align-items: start;\n}\n\n.layout__grid-picker-column,\n.layout__grid-gap {\n min-width: 0;\n}\n\n.layout__grid-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\n}\n\n.layout__grid-gap-fields {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.layout__grid-fields {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.layout__grid-fields .field-row,\n.layout__grid-child .field-row {\n min-width: 0;\n}\n\n.layout__grid-child {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n\n.layout__grid-child-fields {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n grid-template-areas:\n \"column row\"\n \"vertical horizontal\";\n gap: 6px;\n}\n\n.layout__grid-child-fields .field-row,\n.layout__grid-child-fields .control-surface,\n.layout__grid-child-fields .segmented-control {\n min-width: 0;\n}\n\n.layout__grid-child-placement--column { grid-area: column; }\n.layout__grid-child-placement--row { grid-area: row; }\n.layout__grid-child-alignment--h { grid-area: horizontal; }\n.layout__grid-child-alignment--v { grid-area: vertical; }\n\n.layout__grid-child-placement .control-surface,\n.layout__grid-child-alignment-control {\n width: 100%;\n}\n\n.layout__grid-child-placement-icon {\n flex: 0 0 var(--icon-size-small);\n color: var(--text-secondary);\n}\n\n.layout__grid-child-align-icon--horizontal {\n transform: rotate(90deg);\n}\n\n.layout__grid-alignment {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 6px;\n}\n\n.layout__grid-advanced {\n display: flex;\n flex-direction: column;\n gap: 10px;\n min-width: 0;\n}\n\n\n.layout__grid-value {\n min-width: 0;\n}\n\n.layout__flex-toolbar {\n display: block;\n}\n\n.layout__direction-tools {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto auto;\n gap: 4px;\n min-width: 0;\n}\n\n.layout__alignment-grid {\n position: relative;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, minmax(0, 1fr));\n gap: 2px;\n padding: 5px;\n overflow: hidden;\n background: var(--surface-control);\n border-radius: var(--radius-control);\n isolation: isolate;\n}\n\n.layout__alignment-button {\n position: relative;\n z-index: 1;\n width: 100%;\n min-height: 8px;\n border-radius: 5px;\n}\n\n.layout__alignment-button span {\n width: 3px;\n height: 3px;\n background: var(--text-muted-subtle);\n border-radius: 50%;\n}\n\n.layout__alignment-button[data-active=\"true\"] span {\n width: 14px;\n height: 2px;\n background: var(--accent);\n border-radius: var(--radius-pill);\n box-shadow: 0 -4px 0 var(--accent), 0 4px 0 var(--accent);\n}\n\n.layout__distribution-preview {\n position: absolute;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: space-between;\n pointer-events: none;\n}\n\n.layout__distribution-preview span {\n width: 14px;\n height: 2px;\n border-radius: var(--radius-pill);\n background: var(--accent);\n}\n\n/* Match the centers of the 32px controls in the padded 3x3 grid. */\n.layout__alignment-grid[data-direction=\"row\"] .layout__distribution-preview {\n top: calc((100% - 14px) / 3 + 22px);\n right: calc((100% - 14px) / 6 - 2px);\n left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-start\"] .layout__distribution-preview {\n top: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-end\"] .layout__distribution-preview {\n top: auto;\n bottom: calc((100% - 14px) / 3 - 12px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-justify=\"space-around\"] .layout__distribution-preview {\n right: 20px;\n left: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"column\"] .layout__distribution-preview {\n top: 20px;\n bottom: calc((100% - 14px) / 3 - 12px);\n left: calc(50% - 7px);\n flex-direction: column;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-start\"] .layout__distribution-preview {\n left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-end\"] .layout__distribution-preview {\n right: calc((100% - 14px) / 6 - 2px);\n left: auto;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-justify=\"space-around\"] .layout__distribution-preview {\n top: 20px;\n bottom: 20px;\n}\n\n.layout__alignment-grid[data-justify=\"space-around\"] .layout__distribution-preview {\n justify-content: space-around;\n}\n\n.layout__alignment-grid[data-justify=\"space-evenly\"] .layout__distribution-preview {\n justify-content: space-evenly;\n}\n\n.layout__flex-lower {\n display: grid;\n grid-template-columns: minmax(0, 120px) minmax(0, 1fr);\n gap: 12px;\n align-items: start;\n margin-top: 8px;\n}\n\n.layout__flex-lower .layout__alignment-grid {\n width: min(100%, 120px);\n aspect-ratio: 1;\n grid-template-rows: repeat(3, minmax(0, 1fr));\n justify-self: start;\n}\n\n.layout__flex-lower .layout__alignment-button {\n min-height: 0;\n}\n\n.layout__gap-column {\n min-width: 0;\n}\n\n.layout__gap-fields {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.layout__spacing-primary {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n gap: 5px;\n align-items: center;\n min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo {\n min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo,\n.layout__spacing-primary .text-input {\n width: 100%;\n}\n\n.layout__distribution-control {\n width: var(--control-height-large);\n}\n\n.layout__spacing-field {\n color: var(--text-muted);\n}\n\n.layout__spacing-icon {\n display: inline-flex;\n flex: 0 0 var(--icon-size-small);\n width: var(--icon-size-small);\n height: var(--icon-size-small);\n color: var(--text-secondary);\n}\n\n.layout__spacing-field .layout-combo {\n flex: 1 1 auto;\n min-width: 0;\n width: 100%;\n}\n\n.layout__flex-child-fields {\n display: grid;\n grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;\n gap: 5px;\n align-items: start;\n}\n\n.layout__flex-child-fields > .icon-button {\n align-self: end;\n justify-self: end;\n}\n\n.layout__flex-child-fields > .field-row {\n min-width: 0;\n}\n\n.layout__flex-child-fields .field-row,\n.layout__flex-child-field {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: 4px;\n min-width: 0;\n min-height: 0;\n}\n\n.layout__flex-child-fields .field-row__label {\n color: var(--text-secondary);\n}\n\n.layout__flex-child-fields .field-row__control,\n.layout__flex-child-fields .layout-combo {\n width: 100%;\n min-width: 0;\n}\n\n.layout__flex-child-settings {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.layout__flex-child-settings-title {\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n}\n\n.layout__flex-child-settings .field-row {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: 4px;\n min-height: 0;\n}\n\n.layout__flex-child-settings .field-row__label {\n color: var(--text-secondary);\n}\n\n.layout__flex-child-settings .field-row__control,\n.layout__flex-child-settings .layout-combo {\n width: 100%;\n min-width: 0;\n}\n";
24
+ const layoutSectionStyles = ".layout__group {\n margin-top: 4px;\n padding-top: 10px;\n border-top: 1px solid var(--border-subtle);\n background: var(--surface-panel);\n}\n\n.layout__basic {\n display: flex;\n flex-direction: column;\n gap: var(--space-12);\n}\n\n.layout__tool-row {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control-height-large);\n gap: var(--space-8);\n align-items: end;\n}\n\n.layout__tool-row .field-row {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n min-width: 0;\n min-height: 0;\n}\n\n\n.layout__tool-row .field-row__control {\n min-width: 0;\n width: 100%;\n}\n\n.layout__size {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n\n.layout__size-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr)) auto;\n grid-template-areas:\n \"width height toggle\"\n \"min-width min-height .\"\n \"max-width max-height .\"\n \"aspect-ratio . .\";\n gap: 6px;\n align-items: end;\n}\n\n.layout__size[data-expanded=\"false\"] .layout__size-grid {\n grid-template-areas: \"width height toggle\";\n}\n\n.layout__size-cell {\n min-width: 0;\n}\n\n.layout__size-cell--width { grid-area: width; }\n.layout__size-cell--height { grid-area: height; }\n.layout__size-cell--toggle { grid-area: toggle; }\n.layout__size-cell--min-width { grid-area: min-width; }\n.layout__size-cell--min-height { grid-area: min-height; }\n.layout__size-cell--max-width { grid-area: max-width; }\n.layout__size-cell--max-height { grid-area: max-height; }\n.layout__size-cell--aspect-ratio { grid-area: aspect-ratio; }\n\n.layout__size-grid .field-row {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n min-width: 0;\n min-height: 0;\n}\n\n\n.layout__size-grid .field-row__control,\n.layout__size-grid .token-field {\n min-width: 0;\n width: 100%;\n}\n\n.layout__size-grid .layout-combo,\n.layout__aspect-ratio-control {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: 4px;\n align-items: center;\n}\n\n.layout__size-grid .layout-combo__custom {\n min-width: 0;\n}\n\n.layout__aspect-ratio-control .text-input {\n min-width: 0;\n}\n\n\n.layout__grid {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.layout__grid-primary {\n display: grid;\n grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);\n gap: 10px;\n align-items: start;\n}\n\n.layout__grid-picker-column,\n.layout__grid-gap {\n min-width: 0;\n}\n\n.layout__grid-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\n}\n\n.layout__grid-gap-fields {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.layout__grid-fields {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.layout__grid-fields .field-row,\n.layout__grid-child .field-row {\n min-width: 0;\n}\n\n.layout__grid-child {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n\n.layout__grid-child-fields {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n grid-template-areas:\n \"column row\"\n \"vertical horizontal\";\n gap: 6px;\n}\n\n.layout__grid-child-fields .field-row,\n.layout__grid-child-fields .control-surface,\n.layout__grid-child-fields .segmented-control {\n min-width: 0;\n}\n\n.layout__grid-child-placement--column { grid-area: column; }\n.layout__grid-child-placement--row { grid-area: row; }\n.layout__grid-child-alignment--h { grid-area: horizontal; }\n.layout__grid-child-alignment--v { grid-area: vertical; }\n\n.layout__grid-child-placement .control-surface,\n.layout__grid-child-alignment-control {\n width: 100%;\n}\n\n.layout__grid-child-placement-icon {\n flex: 0 0 var(--icon-size-small);\n color: var(--text-secondary);\n}\n\n.layout__grid-child-align-icon--horizontal {\n transform: rotate(90deg);\n}\n\n.layout__grid-alignment {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.layout__grid-advanced {\n display: flex;\n flex-direction: column;\n gap: 10px;\n min-width: 0;\n}\n\n.inspector-popover__popup:has(> .layout__flex-child-settings),\n.inspector-popover__popup:has(> .layout__grid-advanced) {\n padding: var(--space-16);\n}\n\n\n.layout__grid-value {\n min-width: 0;\n}\n\n.layout__flex-toolbar {\n display: block;\n}\n\n.layout__direction-tools {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto auto;\n gap: 4px;\n min-width: 0;\n}\n\n.layout__alignment-grid {\n position: relative;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, minmax(0, 1fr));\n gap: 2px;\n padding: 5px;\n overflow: hidden;\n background: var(--surface-control);\n border-radius: var(--radius-control);\n isolation: isolate;\n}\n\n.layout__alignment-button {\n position: relative;\n z-index: 1;\n width: 100%;\n min-height: 8px;\n border-radius: 5px;\n}\n\n.layout__alignment-button span {\n width: 3px;\n height: 3px;\n background: var(--text-muted-subtle);\n border-radius: 50%;\n}\n\n.layout__alignment-button[data-active=\"true\"] span {\n width: 14px;\n height: 2px;\n background: var(--accent);\n border-radius: var(--radius-pill);\n box-shadow: 0 -4px 0 var(--accent), 0 4px 0 var(--accent);\n}\n\n.layout__distribution-preview {\n position: absolute;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: space-between;\n pointer-events: none;\n}\n\n.layout__distribution-preview span {\n width: 14px;\n height: 2px;\n border-radius: var(--radius-pill);\n background: var(--accent);\n}\n\n/* Match the centers of the 32px controls in the padded 3x3 grid. */\n.layout__alignment-grid[data-direction=\"row\"] .layout__distribution-preview {\n top: calc((100% - 14px) / 3 + 22px);\n right: calc((100% - 14px) / 6 - 2px);\n left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-start\"] .layout__distribution-preview {\n top: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-align=\"flex-end\"] .layout__distribution-preview {\n top: auto;\n bottom: calc((100% - 14px) / 3 - 12px);\n}\n\n.layout__alignment-grid[data-direction=\"row\"][data-justify=\"space-around\"] .layout__distribution-preview {\n right: 20px;\n left: 20px;\n}\n\n.layout__alignment-grid[data-direction=\"column\"] .layout__distribution-preview {\n top: 20px;\n bottom: calc((100% - 14px) / 3 - 12px);\n left: calc(50% - 7px);\n flex-direction: column;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-start\"] .layout__distribution-preview {\n left: calc((100% - 14px) / 6 - 2px);\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-align=\"flex-end\"] .layout__distribution-preview {\n right: calc((100% - 14px) / 6 - 2px);\n left: auto;\n}\n\n.layout__alignment-grid[data-direction=\"column\"][data-justify=\"space-around\"] .layout__distribution-preview {\n top: 20px;\n bottom: 20px;\n}\n\n.layout__alignment-grid[data-justify=\"space-around\"] .layout__distribution-preview {\n justify-content: space-around;\n}\n\n.layout__alignment-grid[data-justify=\"space-evenly\"] .layout__distribution-preview {\n justify-content: space-evenly;\n}\n\n.layout__flex-lower {\n display: grid;\n grid-template-columns: minmax(0, 120px) minmax(0, 1fr);\n gap: 12px;\n align-items: start;\n margin-top: 8px;\n}\n\n.layout__flex-lower .layout__alignment-grid {\n width: min(100%, 120px);\n aspect-ratio: 1;\n grid-template-rows: repeat(3, minmax(0, 1fr));\n justify-self: start;\n}\n\n.layout__flex-lower .layout__alignment-button {\n min-height: 0;\n}\n\n.layout__gap-column {\n min-width: 0;\n}\n\n.layout__gap-fields {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.layout__spacing-primary {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--control-height-large);\n gap: 5px;\n align-items: center;\n min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo {\n min-width: 0;\n}\n\n.layout__spacing-primary .layout-combo,\n.layout__spacing-primary .text-input {\n width: 100%;\n}\n\n.layout__distribution-control {\n width: var(--control-height-large);\n}\n\n.layout__spacing-field {\n color: var(--text-muted);\n}\n\n.layout__spacing-icon {\n display: inline-flex;\n flex: 0 0 var(--icon-size-small);\n width: var(--icon-size-small);\n height: var(--icon-size-small);\n color: var(--text-secondary);\n}\n\n.layout__spacing-field .layout-combo {\n flex: 1 1 auto;\n min-width: 0;\n width: 100%;\n}\n\n.layout__flex-child-fields {\n display: grid;\n grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;\n gap: 5px;\n align-items: start;\n}\n\n.layout__flex-child-fields > .icon-button {\n align-self: end;\n justify-self: end;\n}\n\n.layout__flex-child-fields > .field-row {\n min-width: 0;\n}\n\n.layout__flex-child-fields .field-row,\n.layout__flex-child-field {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: 4px;\n min-width: 0;\n min-height: 0;\n}\n\n.layout__flex-child-fields .field-row__label {\n color: var(--text-secondary);\n}\n\n.layout__flex-child-fields .field-row__control,\n.layout__flex-child-fields .layout-combo {\n width: 100%;\n min-width: 0;\n}\n\n.layout__flex-child-settings {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.layout__flex-child-settings-title {\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n}\n\n.layout__flex-child-settings .field-row {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: 4px;\n min-height: 0;\n}\n\n.layout__flex-child-settings .field-row__label {\n color: var(--text-secondary);\n}\n\n.layout__flex-child-settings .field-row__control,\n.layout__flex-child-settings .layout-combo {\n width: 100%;\n min-width: 0;\n}\n";
22
25
  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";
23
26
  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";
24
- const tokenChipStyles = ".token-chip {\n position: relative;\n display: flex;\n flex: 1;\n min-width: 0;\n background: var(--surface-raised-2x);\n margin-right: -6px;\n align-self: stretch;\n padding-left: var(--space-8);\n border-radius: calc(var(--radius-control) - 2px);\n}\n\n.token-chip:has(.token-color-control) {\n padding-left: 0;\n}\n\n.token-chip > .popover-listbox,\n.token-chip__trigger,\n.token-chip__picker {\n flex: 1;\n height: 100%;\n min-width: 0;\n}\n\n.token-chip--small {\n flex: 0 1 auto;\n}\n\n.token-chip--small > .popover-listbox {\n width: auto;\n flex: 0 1 auto;\n}\n\n.token-chip__trigger {\n display: block;\n width: 100%;\n min-width: 0;\n padding: 0;\n border: 0;\n border-radius: var(--radius-control);\n outline: 0;\n background: transparent;\n color: inherit;\n cursor: pointer;\n}\n\n.token-chip__trigger:focus-visible {\n box-shadow: var(--token-chip-focus-ring, inset 0 0 0 2px var(--accent));\n}\n\n.token-chip--small .token-chip__trigger {\n width: auto;\n}\n\n.token-chip__picker {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-width: 0;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n}\n\n.token-chip--small .token-chip__picker {\n display: inline-flex;\n width: auto;\n gap: 3px;\n}\n\n.token-chip__label {\n min-width: 0;\n flex: 1;\n text-align: left;\n}\n\n/* Keep the content inside the existing label box. */\n.token-label {\n display: block;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.token-label__content {\n display: block;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: inherit;\n}\n\n.token-chip__picker svg {\n flex-shrink: 0;\n}\n\n.token-chip__action {\n position: absolute;\n z-index: 2;\n top: 50%;\n right: 2px;\n display: inline-flex;\n align-items: center;\n background: var(--surface-raised-2x);\n transform: translateY(-50%);\n opacity: 0;\n}\n\n.token-chip:hover > .token-chip__action,\n.token-chip:focus-within > .token-chip__action {\n opacity: 1;\n}\n\n.token-chip--small > .token-chip__action {\n position: relative;\n top: auto;\n right: auto;\n flex: 0 0 auto;\n margin-left: 2px;\n transform: none;\n}\n";
25
- const tokenFieldStyles = ".token-field {\n display: flex;\n flex: 1 1 auto;\n align-self: stretch;\n align-items: center;\n gap: 6px;\n min-width: 0;\n}\n\n.token-field__leading,\n.token-field__trailing {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n color: var(--text-muted);\n}\n\n.token-field__leading {\n justify-content: center;\n}\n\n.token-field__trailing {\n justify-content: flex-end;\n}\n\n.token-field > .popover-listbox,\n.token-field > .select {\n flex: 1;\n min-width: 0;\n}\n\n.token-opacity-input {\n align-self: stretch;\n flex: 0 0 44px;\n width: 44px;\n min-width: 0;\n padding: 0 2px 0 8px;\n border: 0;\n outline: 0;\n background: transparent;\n color: var(--text-muted);\n font: inherit;\n text-align: right;\n}\n\n.token-opacity-input:focus {\n color: var(--text-primary);\n}\n\n.token-color-control {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.token-field--color .token-color-control {\n align-self: stretch;\n /* Keep the 28px color slot while centering the 16px swatch in it. */\n padding: 4px 6px;\n}\n\n.token-field--color {\n --token-chip-focus-ring: none;\n}\n\n.token-color-control[data-resolved=\"false\"] .color-swatch {\n background: repeating-conic-gradient(#d8d8d8 0 25%, #ffffff 0 50%) 50% / 8px 8px;\n}\n\n.token-color-control__input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.token-color-control__input:disabled {\n cursor: not-allowed;\n}\n";
27
+ const tokenChipStyles = ".token-chip {\n position: relative;\n display: flex;\n flex: 1;\n min-width: 0;\n background: var(--surface-raised-2x);\n margin-right: -6px;\n align-self: stretch;\n padding-left: var(--space-8);\n border-radius: calc(var(--radius-control) - 2px);\n overflow: hidden;\n}\n\n.token-chip:has(.token-color-control) {\n padding-left: 0;\n}\n\n.token-chip > .popover-listbox,\n.token-chip__trigger,\n.token-chip__picker {\n flex: 1;\n height: 100%;\n min-width: 0;\n}\n\n.token-chip--small {\n flex: 0 1 auto;\n}\n\n.token-chip--small > .popover-listbox {\n width: auto;\n flex: 0 1 auto;\n}\n\n.token-chip__trigger {\n display: block;\n width: 100%;\n min-width: 0;\n padding: 0;\n border: 0;\n border-radius: var(--radius-control);\n outline: 0;\n background: transparent;\n color: inherit;\n cursor: pointer;\n}\n\n.token-chip__trigger:focus-visible {\n box-shadow: var(--token-chip-focus-ring, inset 0 0 0 2px var(--accent));\n}\n\n.token-chip--small .token-chip__trigger {\n width: auto;\n}\n\n.token-chip__picker {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-width: 0;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n}\n\n.token-chip--small .token-chip__picker {\n display: inline-flex;\n width: auto;\n gap: 3px;\n}\n\n.token-chip__label {\n min-width: 0;\n flex: 1;\n text-align: left;\n}\n\n/* Keep the content inside the existing label box. */\n.token-label {\n display: block;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.token-label__content {\n display: block;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: inherit;\n}\n\n.token-chip__picker svg {\n flex-shrink: 0;\n}\n\n.token-chip__action {\n position: absolute;\n z-index: 2;\n top: 50%;\n right: 2px;\n display: inline-flex;\n align-items: center;\n background: var(--surface-raised-2x);\n transform: translateY(-50%);\n opacity: 0;\n}\n\n.token-chip:hover > .token-chip__action,\n.token-chip:focus-within > .token-chip__action {\n opacity: 1;\n}\n\n.token-chip--small > .token-chip__action {\n position: relative;\n top: auto;\n right: auto;\n flex: 0 0 auto;\n margin-left: 2px;\n transform: none;\n}\n";
28
+ const tokenFieldStyles = ".token-field {\n display: flex;\n flex: 1 1 auto;\n align-self: stretch;\n align-items: center;\n gap: 6px;\n min-width: 0;\n}\n\n.token-field__leading,\n.token-field__trailing {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n color: var(--text-muted);\n}\n\n.token-field__leading {\n justify-content: center;\n}\n\n.token-field__leading--nudge {\n cursor: var(--nudge-drag-cursor, ew-resize);\n touch-action: none;\n user-select: none;\n}\n\n.token-field__leading--nudge:hover,\n.token-field__leading--nudge[data-dragging=\"true\"] {\n color: var(--text-primary);\n}\n\n.token-field__trailing {\n justify-content: flex-end;\n}\n\n.token-field > .popover-listbox,\n.token-field > .select {\n flex: 1;\n min-width: 0;\n}\n\n.token-opacity-input {\n align-self: stretch;\n flex: 0 0 44px;\n width: 44px;\n min-width: 0;\n padding: 0 2px 0 8px;\n border: 0;\n outline: 0;\n background: transparent;\n color: var(--text-muted);\n font: inherit;\n text-align: right;\n}\n\n.token-opacity-input:focus {\n color: var(--text-primary);\n}\n\n.token-color-control {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.token-field--color .token-color-control {\n align-self: stretch;\n /* Keep the 28px color slot while centering the 16px swatch in it. */\n padding: 4px 6px;\n}\n\n.token-field--color {\n --token-chip-focus-ring: none;\n}\n\n.token-color-control[data-resolved=\"false\"] .color-swatch {\n background: repeating-conic-gradient(#d8d8d8 0 25%, #ffffff 0 50%) 50% / 8px 8px;\n}\n\n.token-color-control__input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.token-color-control__input:disabled {\n cursor: not-allowed;\n}\n";
26
29
  const tokenDropdownStyles = ".token-dropdown,\n.token-promote {\n display: block;\n min-width: 0;\n}\n";
27
- const tokensPanelStyles = ".tokens-panel {\n padding: 14px 0 0;\n}\n\n.tokens-panel__tools {\n display: block;\n padding-bottom: 14px;\n border-bottom: 1px solid var(--border-subtle);\n}\n\n.token-group {\n border-bottom: 1px solid var(--border-subtle);\n}\n\n.token-group__heading {\n display: flex;\n justify-content: space-between;\n padding: 14px 0 8px;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-label);\n}\n\n.token-row {\n padding: 10px 0 12px;\n border-top: 1px solid var(--border-subtle);\n}\n\n.token-group__heading + .token-row {\n border-top: 0;\n}\n\n.token-row__inline {\n display: grid;\n grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);\n gap: 8px;\n align-items: center;\n}\n\n.token-row__name {\n min-width: 0;\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n}\n\n.token-variants {\n margin-top: 8px;\n}\n\n.token-variants summary {\n color: var(--text-primary);\n cursor: pointer;\n font-size: 14px;\n font-weight: var(--font-weight-label);\n user-select: none;\n}\n\n.token-variants__list {\n margin-top: 7px;\n padding-left: 10px;\n border-left: 1px solid var(--border-subtle);\n}\n\n.token-variant {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 2px 8px;\n padding: 5px 0;\n color: var(--text-muted);\n font-size: 10px;\n}\n\n.token-variant__context {\n color: var(--text-secondary);\n}\n\n.token-variant > span:last-child {\n grid-column: 1 / -1;\n color: var(--text-muted-subtle);\n}\n\n.tokens-panel__empty {\n padding: 24px 0;\n color: var(--text-muted);\n text-align: center;\n}\n";
28
- const changesLogStyles = ".changes {\n margin-top: 0;\n border-top: 0;\n padding-top: 24px;\n}\n\n.changes__title {\n display: flex;\n align-items: center;\n gap: 7px;\n width: 100%;\n padding: 10px 0;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: 700;\n cursor: pointer;\n list-style: none;\n}\n\n.changes__title::-webkit-details-marker {\n display: none;\n}\n\n.changes__title-label {\n flex: 1;\n}\n\n.changes__count {\n min-width: 20px;\n padding: 2px 6px;\n border-radius: var(--radius-pill);\n background: var(--surface-control);\n color: var(--text-muted);\n font-size: 11px;\n font-weight: 650;\n line-height: 1.2;\n text-align: center;\n}\n\n.changes__toggle-icon {\n color: var(--text-muted);\n transition: transform 120ms ease;\n}\n\n.changes[open] .changes__toggle-icon {\n transform: rotate(180deg);\n}\n\n.changes__content {\n padding-bottom: 4px;\n}\n\n.changes__session-action {\n display: flex;\n justify-content: flex-end;\n padding: 8px 0 20px;\n}\n\n.changes__session-action .button {\n width: 100%;\n}\n\n.changes__group {\n margin-bottom: 12px;\n padding: 12px;\n background: var(--surface-control);\n border: 0;\n border-radius: 12px;\n}\n\n.changes__group-title {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-bottom: 8px;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: 650;\n}\n\n.changes__group-file {\n color: var(--text-muted);\n font-weight: 400;\n word-break: break-all;\n}\n\n.changes__row {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 5px;\n padding: 4px 0;\n font-size: var(--font-size-base);\n}\n\n.changes__row + .changes__row {\n margin-top: 8px;\n padding-top: 12px;\n border-top: 1px solid var(--border-subtle);\n}\n\n.changes__prop,\n.changes__before,\n.changes__after {\n word-break: break-all;\n}\n\n.changes__prop {\n color: var(--text-primary);\n}\n\n.changes__before,\n.changes__arrow {\n color: var(--text-muted);\n}\n\n.changes__value {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n width: 100%;\n line-height: 1.4;\n}\n\n.changes__after {\n color: var(--accent);\n}\n\n.changes__conflict {\n color: var(--warning-text);\n font-size: var(--font-size-base);\n}\n\n.changes__source-site,\n.changes__scope,\n.changes__diagnostic {\n color: var(--text-muted);\n font-size: var(--font-size-base);\n}\n\n.changes__diagnostic[data-status=\"overridden\"] {\n color: var(--warning-text);\n}\n\n.changes__diagnostic[data-status=\"applied\"] {\n color: var(--accent);\n}\n\n.changes__revert {\n margin-top: 2px;\n}\n\n.panel__copy[data-copied=\"true\"] {\n background: #2eaf67;\n color: #ffffff;\n}\n";
29
- 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";
30
- const domNavigationStyles = ".dom-navigation {\n display: grid;\n gap: var(--space-8);\n padding: var(--space-12) 0;\n border-bottom: 1px solid var(--border-subtle);\n}\n\n.dom-navigation__header,\n.dom-navigation__group {\n display: grid;\n gap: var(--space-4);\n}\n\n.dom-navigation__header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-8);\n}\n\n.dom-navigation__title,\n.dom-navigation__label {\n color: var(--text-muted-subtle);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-label);\n}\n\n.dom-navigation__items {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n.dom-navigation__item {\n min-width: 0;\n justify-content: flex-start;\n}\n\n.dom-navigation__value {\n overflow: hidden;\n color: var(--text-primary);\n font-weight: var(--font-weight-base);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
30
+ 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";
31
+ const changesLogStyles = ".changes {\n margin-top: 0;\n border-top: 0;\n padding-top: 24px;\n}\n\n.changes .disclosure__trigger {\n padding: 10px 0;\n color: var(--text-primary);\n font-weight: 700;\n}\n\n.changes .disclosure__trigger:hover {\n color: var(--text-primary);\n}\n\n.changes__count,\n.copy-prompt__change-count {\n min-width: 20px;\n padding: 2px 6px;\n border-radius: var(--radius-pill);\n background: var(--surface-control);\n color: var(--text-muted);\n font-size: 11px;\n font-weight: 650;\n line-height: 1.2;\n text-align: center;\n}\n\n.changes__content {\n padding-bottom: 4px;\n}\n\n.changes__session-action {\n display: flex;\n justify-content: flex-end;\n padding: 8px 0 20px;\n}\n\n.changes__session-action .button {\n width: 100%;\n}\n\n.changes__group {\n margin-bottom: 12px;\n padding: 12px;\n background: var(--surface-control);\n border: 0;\n border-radius: 12px;\n}\n\n.changes__group-title {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-bottom: 8px;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: 650;\n}\n\n.changes__group-file {\n color: var(--text-muted);\n font-weight: 400;\n word-break: break-all;\n}\n\n.changes__row {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 5px;\n padding: 4px 0;\n font-size: var(--font-size-base);\n}\n\n.changes__row + .changes__row {\n margin-top: 8px;\n padding-top: 12px;\n border-top: 1px solid var(--border-subtle);\n}\n\n.changes__prop,\n.changes__before,\n.changes__after {\n word-break: break-all;\n}\n\n.changes__prop {\n color: var(--text-primary);\n}\n\n.changes__before,\n.changes__arrow {\n color: var(--text-muted);\n}\n\n.changes__value {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n width: 100%;\n line-height: 1.4;\n}\n\n.changes__after {\n color: var(--accent);\n}\n\n.changes__conflict {\n color: var(--warning-text);\n font-size: var(--font-size-base);\n}\n\n.changes__source-site,\n.changes__scope,\n.changes__diagnostic {\n color: var(--text-muted);\n font-size: var(--font-size-base);\n}\n\n.changes__diagnostic[data-status=\"overridden\"] {\n color: var(--warning-text);\n}\n\n.changes__diagnostic[data-status=\"applied\"] {\n color: var(--accent);\n}\n\n.changes__revert {\n margin-top: 2px;\n}\n\n.panel__copy[data-copied=\"true\"] {\n background: #2eaf67;\n color: #ffffff;\n}\n";
31
32
  const promptSettingsStyles = ".prompt-settings__backdrop {\n position: fixed;\n inset: 0;\n z-index: 40;\n background: rgb(0 0 0 / 20%);\n pointer-events: auto;\n}\n\n.prompt-settings__popup {\n position: fixed;\n top: 50%;\n left: 50%;\n z-index: 41;\n width: min(440px, calc(100vw - 32px));\n max-height: calc(100dvh - 32px);\n overflow-y: auto;\n padding: var(--space-20);\n transform: translate(-50%, -50%);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-16);\n outline: 0;\n background: var(--surface-raised-2x);\n box-shadow: var(--shadow-popup);\n color: var(--text-primary);\n pointer-events: auto;\n}\n\n.prompt-settings__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-12);\n}\n\n.prompt-settings__title {\n margin: 0;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-label);\n}\n\n.prompt-settings__close.icon-button {\n width: var(--control-height-small);\n height: var(--control-height-small);\n margin: calc(var(--space-4) * -1);\n}\n\n.prompt-settings__description {\n margin: var(--space-8) 0 0;\n color: var(--text-secondary);\n font-size: var(--font-size-base);\n line-height: 1.45;\n}\n\n.prompt-settings__field {\n display: grid;\n margin-top: var(--space-20);\n}\n\n.prompt-settings__textarea {\n width: 100%;\n min-height: 136px;\n padding: var(--space-8) var(--space-12);\n resize: vertical;\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-control);\n outline: 0;\n background: var(--surface-control);\n color: var(--text-primary);\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n line-height: 1.5;\n}\n\n.prompt-settings__textarea:hover:not(:focus),\n.prompt-settings__textarea:focus-visible {\n background: var(--surface-control-hover);\n}\n\n.prompt-settings__textarea:focus-visible {\n border-color: var(--accent);\n outline: 2px solid var(--accent);\n outline-offset: -2px;\n}\n\n.prompt-settings__actions {\n display: flex;\n justify-content: flex-end;\n margin-top: var(--space-20);\n}\n";
32
- const mcpConnectionStyles = ".mcp-connection__backdrop {\n position: fixed;\n inset: 0;\n z-index: 40;\n background: rgb(0 0 0 / 20%);\n pointer-events: auto;\n}\n\n.mcp-connection__popup {\n position: fixed;\n top: 50%;\n left: 50%;\n z-index: 41;\n display: grid;\n gap: var(--space-16);\n width: min(560px, calc(100vw - 32px));\n max-height: calc(100dvh - 32px);\n overflow-y: auto;\n padding: var(--space-20);\n transform: translate(-50%, -50%);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-16);\n outline: 0;\n background: var(--surface-raised-2x);\n box-shadow: var(--shadow-popup);\n color: var(--text-primary);\n pointer-events: auto;\n}\n\n.mcp-connection__header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-12);\n}\n\n.mcp-connection__title {\n margin: 0;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__description,\n.mcp-connection__copy,\n.mcp-connection__error {\n margin: var(--space-8) 0 0;\n color: var(--text-secondary);\n font-size: var(--font-size-base);\n line-height: 1.45;\n}\n\n.mcp-connection__close.icon-button {\n width: var(--control-height-small);\n height: var(--control-height-small);\n margin: calc(var(--space-4) * -1);\n}\n\n.mcp-connection__status {\n display: grid;\n gap: var(--space-4);\n}\n\n.mcp-connection__status-label {\n color: inherit;\n font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__status-detail {\n overflow-wrap: anywhere;\n}\n\n.mcp-connection__diagnostics {\n display: grid;\n gap: var(--space-8);\n margin: 0;\n padding: var(--space-12);\n border-radius: var(--radius-control);\n background: var(--surface-control);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n}\n\n.mcp-connection__diagnostic {\n display: grid;\n grid-template-columns: 92px minmax(0, 1fr);\n gap: var(--space-12);\n align-items: baseline;\n}\n\n.mcp-connection__diagnostic dt {\n color: var(--text-muted-subtle);\n}\n\n.mcp-connection__diagnostic dd {\n min-width: 0;\n margin: 0;\n overflow-wrap: anywhere;\n color: var(--text-primary);\n}\n\n.mcp-connection__diagnostic code,\n.mcp-connection__copy code {\n font-family: var(--font-mono);\n}\n\n.mcp-connection__timeline {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.mcp-connection__timeline-step {\n position: relative;\n display: grid;\n grid-template-columns: var(--control-height-small) minmax(0, 1fr);\n gap: var(--space-12);\n padding-bottom: var(--space-32);\n}\n\n.mcp-connection__timeline-step:last-child {\n padding-bottom: 0;\n}\n\n.mcp-connection__timeline-step:not(:last-child)::before {\n position: absolute;\n top: var(--control-height-small);\n bottom: 0;\n left: calc(var(--control-height-small) / 2 - 0.5px);\n width: 1px;\n background: var(--border-subtle);\n content: \"\";\n}\n\n.mcp-connection__timeline-marker {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--control-height-small);\n height: var(--control-height-small);\n border: 1px solid var(--border-medium);\n border-radius: var(--radius-pill);\n background: var(--surface-raised-2x);\n color: var(--text-secondary);\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__timeline-step--complete .mcp-connection__timeline-marker {\n border-color: var(--accent);\n background: var(--accent);\n color: var(--surface-raised-2x);\n}\n\n.mcp-connection__timeline-content {\n display: grid;\n min-width: 0;\n gap: var(--space-8);\n}\n\n.mcp-connection__section-title {\n margin: 0;\n display: flex;\n min-height: var(--control-height-small);\n align-items: center;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__timeline-content .mcp-connection__copy {\n margin-top: 0;\n}\n\n.mcp-connection__command {\n max-width: 100%;\n margin: 0;\n padding: var(--space-12);\n overflow-x: auto;\n border-radius: var(--radius-control);\n background: var(--surface-control);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: var(--font-size-base);\n line-height: 1.5;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n}\n\n.mcp-connection__command-actions {\n display: flex;\n justify-content: flex-start;\n}\n\n.mcp-connection__error {\n margin-top: 0;\n color: var(--danger-text);\n font-size: var(--font-size-small);\n}\n\n.mcp-connection__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: var(--space-8);\n padding-top: var(--space-4);\n}\n\n.mcp-connection__docs {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n margin-top: 64px;\n color: var(--text-secondary);\n font-size: var(--font-size-small);\n text-decoration: none;\n}\n\n.mcp-connection__docs:hover,\n.mcp-connection__docs:focus-visible {\n color: var(--text-primary);\n text-decoration: underline;\n}\n\n.mcp-connection__docs:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 2px;\n}\n";
33
+ const mcpConnectionStyles = ".mcp-connection__backdrop {\n position: fixed;\n inset: 0;\n z-index: 40;\n background: rgb(0 0 0 / 20%);\n pointer-events: auto;\n}\n\n.mcp-connection__popup {\n position: fixed;\n top: 50%;\n left: 50%;\n z-index: 41;\n display: grid;\n gap: var(--space-16);\n width: min(560px, calc(100vw - 32px));\n max-height: calc(100dvh - 32px);\n overflow-y: auto;\n padding: var(--space-20);\n transform: translate(-50%, -50%);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-16);\n outline: 0;\n background: var(--surface-raised-2x);\n box-shadow: var(--shadow-popup);\n color: var(--text-primary);\n pointer-events: auto;\n}\n\n.mcp-connection__header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-12);\n}\n\n.mcp-connection__title {\n margin: 0;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__description,\n.mcp-connection__copy,\n.mcp-connection__error {\n margin: var(--space-8) 0 0;\n color: var(--text-secondary);\n font-size: var(--font-size-base);\n line-height: 1.45;\n}\n\n.mcp-connection__close.icon-button {\n width: var(--control-height-small);\n height: var(--control-height-small);\n margin: calc(var(--space-4) * -1);\n}\n\n.mcp-connection__status {\n display: grid;\n gap: var(--space-4);\n}\n\n.mcp-connection__status-label {\n color: inherit;\n font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__status-detail {\n overflow-wrap: anywhere;\n}\n\n.mcp-connection__details .disclosure__trigger {\n padding: var(--space-4) 0;\n}\n\n.mcp-connection__diagnostics {\n display: grid;\n gap: var(--space-8);\n margin: 0;\n padding: var(--space-12);\n border-radius: var(--radius-control);\n background: var(--surface-control);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n}\n\n.mcp-connection__diagnostic {\n display: grid;\n grid-template-columns: 92px minmax(0, 1fr);\n gap: var(--space-12);\n align-items: baseline;\n}\n\n.mcp-connection__diagnostic dt {\n color: var(--text-muted-subtle);\n}\n\n.mcp-connection__diagnostic dd {\n min-width: 0;\n margin: 0;\n overflow-wrap: anywhere;\n color: var(--text-primary);\n}\n\n.mcp-connection__diagnostic code,\n.mcp-connection__copy code {\n font-family: var(--font-mono);\n}\n\n.mcp-connection__timeline {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.mcp-connection__timeline-step {\n position: relative;\n display: grid;\n grid-template-columns: var(--control-height-small) minmax(0, 1fr);\n gap: var(--space-12);\n padding-bottom: var(--space-32);\n}\n\n.mcp-connection__timeline-step:last-child {\n padding-bottom: 0;\n}\n\n.mcp-connection__timeline-step:not(:last-child)::before {\n position: absolute;\n top: var(--control-height-small);\n bottom: 0;\n left: calc(var(--control-height-small) / 2 - 0.5px);\n width: 1px;\n background: var(--border-subtle);\n content: \"\";\n}\n\n.mcp-connection__timeline-marker {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--control-height-small);\n height: var(--control-height-small);\n border: 1px solid var(--border-medium);\n border-radius: var(--radius-pill);\n background: var(--surface-raised-2x);\n color: var(--text-secondary);\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__timeline-step--complete .mcp-connection__timeline-marker {\n border-color: var(--accent);\n background: var(--accent);\n color: var(--surface-raised-2x);\n}\n\n.mcp-connection__timeline-content {\n display: grid;\n min-width: 0;\n gap: var(--space-8);\n}\n\n.mcp-connection__section-title {\n margin: 0;\n display: flex;\n min-height: var(--control-height-small);\n align-items: center;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-label);\n}\n\n.mcp-connection__timeline-content .mcp-connection__copy {\n margin-top: 0;\n}\n\n.mcp-connection__command {\n max-width: 100%;\n margin: 0;\n padding: var(--space-12);\n overflow-x: auto;\n border-radius: var(--radius-control);\n background: var(--surface-control);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: var(--font-size-base);\n line-height: 1.5;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n}\n\n.mcp-connection__command-actions {\n display: flex;\n justify-content: flex-start;\n}\n\n.mcp-connection__error {\n margin-top: 0;\n color: var(--danger-text);\n font-size: var(--font-size-small);\n}\n\n.mcp-connection__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: var(--space-8);\n padding-top: var(--space-4);\n}\n\n.mcp-connection__docs {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n margin-top: 64px;\n color: var(--text-secondary);\n font-size: var(--font-size-small);\n text-decoration: none;\n}\n\n.mcp-connection__docs:hover,\n.mcp-connection__docs:focus-visible {\n color: var(--text-primary);\n text-decoration: underline;\n}\n\n.mcp-connection__docs:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 2px;\n}\n";
33
34
  const settingsStyles = ".settings__backdrop {\n position: fixed;\n inset: 0;\n z-index: 40;\n background: rgb(0 0 0 / 20%);\n pointer-events: auto;\n}\n\n.settings__popup {\n position: fixed;\n top: 50%;\n left: 50%;\n z-index: 41;\n display: flex;\n flex-direction: column;\n width: min(760px, calc(100vw - 32px));\n height: 70dvh;\n max-height: calc(100dvh - 32px);\n overflow: hidden;\n transform: translate(-50%, -50%);\n border-radius: var(--radius-16);\n outline: 0;\n background: var(--surface-raised-2x);\n box-shadow: var(--shadow-popup);\n color: var(--text-primary);\n pointer-events: auto;\n}\n\n.settings__section-description {\n margin: var(--space-4) 0 0;\n color: var(--text-secondary);\n font-size: 14px;\n font-weight: var(--font-weight-base);\n line-height: 1.45;\n}\n\n.settings__close.icon-button {\n position: absolute;\n top: var(--space-12);\n right: var(--space-12);\n z-index: 1;\n width: var(--control-height-small);\n height: var(--control-height-small);\n margin: 0;\n}\n\n.settings__visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n\n.settings__body {\n display: grid;\n grid-template-columns: 184px minmax(0, 1fr);\n min-height: 0;\n flex: 1 1 auto;\n}\n\n.settings__nav {\n min-width: 0;\n padding: var(--space-16) var(--space-8);\n border-right: 1px solid var(--border-subtle);\n background: var(--surface-panel);\n}\n\n.settings__nav-label {\n display: block;\n padding: 0 var(--space-8) var(--space-8);\n color: var(--text-muted-subtle);\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-label);\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\n.settings__nav-items {\n display: grid;\n gap: var(--space-4);\n}\n\n.settings__nav-item {\n appearance: none;\n display: flex;\n align-items: center;\n gap: var(--space-8);\n width: 100%;\n min-height: var(--control-height-large);\n padding: var(--space-8);\n border: 0;\n border-radius: var(--radius-control);\n background: transparent;\n color: var(--text-secondary);\n cursor: pointer;\n font: inherit;\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n line-height: 1.35;\n text-align: left;\n}\n\n.settings__nav-item:hover,\n.settings__nav-item:focus-visible {\n background: var(--surface-well);\n color: var(--text-primary);\n}\n\n.settings__nav-item:focus-visible {\n outline: 0;\n box-shadow: inset 0 0 0 2px var(--accent);\n}\n\n.settings__nav-item--active {\n background: var(--surface-well);\n color: var(--text-primary);\n font-weight: var(--font-weight-label);\n}\n\n.settings__nav-item > svg {\n flex: 0 0 auto;\n}\n\n.settings__nav-item-label {\n min-width: 0;\n}\n\n.settings__content {\n min-width: 0;\n overflow-y: auto;\n padding: var(--space-20);\n}\n\n.settings__section {\n min-width: 0;\n}\n\n.settings__section-title {\n margin: 0;\n color: var(--text-primary);\n font-size: 14px;\n font-weight: var(--font-weight-label);\n}\n\n.settings__section > .prompt-settings__field,\n.settings__section > .tokens-panel,\n.settings__section > [data-test=\"mcp-connection-dialog\"] {\n margin-top: var(--space-20);\n}\n\n.settings__section > [data-test=\"mcp-connection-dialog\"] {\n min-width: 0;\n display: grid;\n gap: var(--space-16);\n}\n\n@media (max-width: 560px) {\n .settings__body {\n display: block;\n overflow-y: auto;\n }\n\n .settings__nav {\n overflow-x: auto;\n padding: var(--space-8);\n border-right: 0;\n border-bottom: 1px solid var(--border-subtle);\n }\n\n .settings__nav-label {\n display: none;\n }\n\n .settings__nav-items {\n display: flex;\n min-width: max-content;\n }\n\n .settings__nav-item {\n width: auto;\n }\n\n .settings__content {\n overflow: visible;\n }\n}\n";
35
+ const sketchStyles = ".sketch-layers {\n display: grid;\n gap: var(--space-4);\n width: 100%;\n margin-top: var(--space-8);\n}\n\n.sketch-layers__item {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n min-width: 0;\n}\n\n.sketch-layers__copy {\n flex: 1 1 auto;\n position: relative;\n justify-content: center;\n min-width: 0;\n padding-inline: var(--space-12);\n text-align: center;\n}\n\n.sketch-layers__copy-label {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n gap: var(--space-4);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-base);\n}\n\n.sketch-layers__name {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sketch-layers__thumbnail {\n position: absolute;\n top: 50%;\n left: var(--space-8);\n width: 32px;\n height: 32px;\n margin: 0;\n border-radius: var(--radius-control);\n background: var(--surface-panel);\n box-shadow: var(--shadow-control);\n object-fit: cover;\n transform: translateY(-50%) rotate(-7deg);\n}\n\n.sketch-layers__thumbnail--empty {\n border: 1px solid var(--border-subtle);\n}\n\n.sketch-layers__hint {\n margin: var(--space-8) 0 0;\n color: var(--text-secondary);\n font-size: var(--font-size-base);\n line-height: 1.4;\n}\n\n.sketch-layers__delete {\n position: absolute;\n top: var(--space-4);\n right: var(--space-4);\n z-index: 1;\n opacity: 0;\n pointer-events: none;\n transition: opacity 120ms ease;\n}\n\n.sketch-layers__item:hover .sketch-layers__delete,\n.sketch-layers__item:focus-within .sketch-layers__delete {\n opacity: 1;\n pointer-events: auto;\n}\n\n.sketch-layers__error {\n flex: 0 0 100%;\n color: var(--warning-text);\n font-size: var(--font-size-small);\n line-height: 1.35;\n}\n\n.sketch__backdrop {\n position: fixed;\n inset: 0;\n z-index: 20;\n background: rgb(8 12 20 / 52%);\n}\n\n.sketch__editor-backdrop {\n background: transparent;\n inset: 0 var(--panel-width) 0 0;\n}\n\n.sketch__live-backdrop {\n background: transparent;\n inset: 0 var(--panel-width) 0 0;\n pointer-events: none;\n}\n\n.sketch__live-backdrop[data-inspector-open=\"false\"] {\n right: 0;\n}\n\n.sketch__popup {\n position: fixed;\n inset: 0 var(--panel-width) 0 0;\n z-index: 21;\n width: auto;\n height: 100dvh;\n max-height: none;\n overflow: hidden;\n padding: 0;\n border: 0;\n border-radius: 0;\n background: #111827;\n color: var(--text-primary);\n box-shadow: none;\n pointer-events: auto;\n}\n\n.sketch__title {\n margin: 0 36px 4px 0;\n color: var(--text-primary);\n font-size: 17px;\n font-weight: 700;\n}\n\n.sketch__description {\n max-width: 620px;\n margin: 0 0 16px;\n color: var(--text-secondary);\n font-size: 13px;\n line-height: 1.45;\n}\n\n.sketch__sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.sketch__live-popup {\n overflow: visible;\n background: transparent;\n pointer-events: none;\n /* Let the live controls and CanvasToolbar participate in one layer stack. */\n z-index: auto;\n}\n\n.sketch__live-popup[data-inspector-open=\"false\"] {\n right: 0;\n}\n\n.sketch__prompt-panel {\n position: relative;\n display: block;\n box-sizing: border-box;\n width: min(400px, calc(100vw - var(--panel-width) - 32px));\n padding: var(--space-8);\n border: 0;\n border-radius: var(--radius-12);\n background: var(--surface-raised-2x);\n color: var(--text-primary);\n box-shadow: var(--shadow-popup);\n pointer-events: auto;\n}\n\n.sketch__live-note-panel {\n /* Keep the note editor in the workspace viewport, outside the active frame's\n scaled and clipped coordinate system. */\n position: fixed;\n left: calc((100vw - var(--panel-width)) / 2);\n bottom: calc(var(--control-height-xlarge) + var(--space-20) + var(--space-8) + var(--space-8));\n width: min(400px, calc(100vw - var(--panel-width) - var(--space-32)));\n z-index: calc(var(--z-index) - 1);\n transform: translateX(-50%);\n}\n\n.sketch__live-popup[data-inspector-open=\"false\"] .sketch__live-note-panel {\n left: 50%;\n width: min(400px, calc(100vw - var(--space-32)));\n}\n\n.sketch__saved-note-panel {\n position: fixed;\n right: calc(var(--panel-width) + 24px);\n bottom: 24px;\n z-index: calc(var(--z-index) - 1);\n}\n\n.sketch__prompt-label {\n color: var(--text-secondary);\n font-size: var(--font-size-small);\n font-weight: var(--font-weight-label);\n}\n\n.sketch__prompt-input {\n box-sizing: border-box;\n display: block;\n width: 100%;\n min-height: calc(2 * 1.4em + var(--space-16));\n resize: none;\n padding: var(--space-8) calc(var(--control-height-small) + var(--space-48)) var(--space-8) var(--space-8);\n border: 0;\n border-radius: var(--radius-control);\n background: transparent;\n color: var(--text-primary);\n font: inherit;\n font-size: var(--font-size-base);\n line-height: 1.4;\n outline: 0;\n}\n\n.sketch__prompt-input:focus {\n box-shadow: none;\n}\n\n.sketch__prompt-input::placeholder {\n color: var(--text-muted);\n}\n\n.sketch__prompt-footer {\n position: absolute;\n inset: auto var(--space-8) var(--space-8);\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n pointer-events: none;\n}\n\n.sketch__prompt-footer .button {\n pointer-events: auto;\n}\n\n.sketch__prompt-error {\n min-width: 0;\n margin-right: auto;\n max-width: calc(100% - 88px);\n color: var(--warning-text);\n font-size: var(--font-size-small);\n line-height: 1.35;\n pointer-events: auto;\n}\n\n.sketch__canvas-frame {\n position: absolute;\n inset: 0;\n display: block;\n max-height: none;\n overflow: hidden;\n padding: 0;\n border: 0;\n border-radius: 0;\n background: #111827;\n}\n\n.sketch__image-wrap {\n position: absolute;\n inset: 0;\n display: block;\n width: 100%;\n height: 100%;\n max-width: none;\n line-height: 0;\n}\n\n.sketch__image {\n display: block;\n width: 100%;\n height: 100%;\n max-width: none;\n max-height: none;\n object-fit: contain;\n user-select: none;\n pointer-events: none;\n}\n\n.sketch__canvas {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n touch-action: none;\n cursor: crosshair;\n outline: none;\n z-index: 1;\n}\n\n.sketch__live-frame {\n background: transparent;\n pointer-events: none;\n}\n\n.sketch__canvas:focus-visible {\n box-shadow: 0 0 0 2px var(--accent);\n}\n\n.sketch__live-canvas {\n pointer-events: auto;\n touch-action: pan-y;\n}\n\n.sketch__canvas--move {\n cursor: grab;\n touch-action: none;\n}\n\n.sketch__canvas--move:active {\n cursor: grabbing;\n}\n\n.sketch__canvas--annotate {\n cursor: crosshair;\n}\n\n.sketch__annotation-editor {\n position: absolute;\n z-index: 3;\n display: flex;\n align-items: center;\n gap: var(--space-4);\n width: 280px;\n padding: var(--space-4);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-control);\n background: var(--surface-raised-2x);\n box-shadow: var(--shadow-popup);\n pointer-events: auto;\n}\n\n.sketch__annotation-editor input {\n min-width: 0;\n flex: 1;\n height: var(--control-height-small);\n padding: 0 var(--space-8);\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-control);\n background: var(--surface-raised);\n color: var(--text-primary);\n font: inherit;\n font-size: var(--font-size-base);\n outline: 0;\n}\n\n.sketch__annotation-editor input:focus {\n border-color: var(--accent);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);\n}\n\n.sketch__annotation-editor input::placeholder {\n color: var(--text-muted);\n}\n\n.sketch__toolbar,\n.sketch__actions,\n.sketch-change__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 6px;\n}\n\n.sketch__toolbar {\n padding: 10px 0;\n}\n\n.sketch__floating-panel {\n position: absolute;\n left: 50%;\n bottom: 20px;\n z-index: 2;\n display: grid;\n gap: 8px;\n width: max-content;\n max-width: calc(100% - 32px);\n max-height: calc(100dvh - 40px);\n padding: var(--space-4);\n overflow: auto;\n border-radius: var(--radius-12);\n background: var(--surface-raised-2x);\n color: var(--text-primary);\n box-shadow: var(--shadow-popup);\n transform: translateX(-50%);\n animation: sketch-toolbar-enter 300ms ease-out both;\n pointer-events: auto;\n}\n\n@keyframes sketch-toolbar-enter {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(12px);\n }\n\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .sketch__floating-panel {\n animation: none;\n }\n}\n\n.sketch__floating-panel .sketch__toolbar {\n padding: 0;\n}\n\n.sketch__floating-panel .button--quiet {\n background: transparent;\n color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--quiet:hover:not(:disabled) {\n background: var(--surface-well);\n color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--secondary {\n background: var(--surface-control);\n color: var(--text-primary);\n}\n\n.sketch__floating-panel .button--secondary:hover:not(:disabled) {\n background: var(--surface-control-hover);\n color: var(--text-primary);\n}\n\n.sketch__toolbar-divider {\n width: 1px;\n height: var(--control-height-small);\n margin-inline: var(--space-4);\n background: var(--border-subtle);\n}\n\n.sketch__field {\n display: grid;\n gap: 6px;\n margin-top: 4px;\n color: var(--text-primary);\n font-size: var(--font-size-base);\n font-weight: 600;\n}\n\n.sketch__field textarea {\n width: 100%;\n resize: vertical;\n padding: 9px 10px;\n border: 1px solid var(--border-strong);\n border-radius: 8px;\n background: var(--surface-raised);\n color: var(--text-primary);\n font: inherit;\n font-weight: 400;\n line-height: 1.4;\n}\n\n.sketch__field textarea:focus {\n border-color: var(--accent);\n outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);\n}\n\n.sketch__optional {\n color: var(--text-muted);\n font-weight: 400;\n}\n\n.sketch__actions {\n justify-content: flex-end;\n margin-top: 16px;\n}\n\n.sketch-change {\n display: grid;\n gap: 8px;\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid var(--border-subtle);\n}\n\n.sketch-change__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--text-primary);\n font-size: 13px;\n font-weight: 700;\n}\n\n.sketch-change__title span,\n.sketch-change__status {\n color: var(--text-muted);\n font-size: 11px;\n font-weight: 600;\n}\n\n.sketch-change__row {\n display: grid;\n grid-template-columns: 76px minmax(0, 1fr);\n gap: 10px;\n padding: 8px 0;\n border-top: 1px solid var(--border-subtle);\n}\n\n.sketch-change__thumbnail {\n width: 76px;\n height: 58px;\n object-fit: cover;\n border: 1px solid var(--border-subtle);\n border-radius: 6px;\n background: var(--surface-control);\n}\n\n.sketch-change__thumbnail--empty { display: block; }\n\n.sketch-change__body {\n display: grid;\n min-width: 0;\n gap: 3px;\n}\n\n.sketch-change__heading {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n}\n\n.sketch-change__name,\n.sketch-change__route,\n.sketch-change__description {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.sketch-change__name {\n color: var(--text-primary);\n font-size: 12px;\n font-weight: 650;\n}\n\n.sketch-change__route,\n.sketch-change__description,\n.sketch-change__error {\n color: var(--text-muted);\n font-size: 11px;\n line-height: 1.35;\n}\n\n.sketch-change__description {\n margin: 2px 0;\n white-space: normal;\n}\n\n.sketch-change__annotations {\n display: grid;\n gap: 2px;\n margin: 2px 0;\n padding-inline-start: 18px;\n color: var(--text-secondary);\n font-size: 11px;\n line-height: 1.35;\n}\n\n.sketch-change__annotations li::marker {\n color: var(--accent);\n font-weight: 700;\n}\n\n.sketch-change__actions {\n gap: 2px 4px;\n}\n\n.sketch-change__actions .button {\n padding-inline: 5px;\n font-size: 11px;\n}\n\n.sketch-change__status[data-status=\"needs-review\"] { color: var(--warning-text); }\n.sketch-change__status[data-status=\"dispatching\"],\n.sketch-change__status[data-status=\"handing-off\"] { color: var(--accent); }\n.sketch-change__error { color: var(--warning-text); }\n";
34
36
  export const UI_STYLES = [
37
+ DRAG_CURSOR_STYLES,
35
38
  foundationStyles,
36
39
  controlSurfaceStyles,
37
40
  atRuleContextStyles,
@@ -42,12 +45,14 @@ export const UI_STYLES = [
42
45
  toggleButtonStyles,
43
46
  segmentedControlStyles,
44
47
  iconButtonStyles,
48
+ disclosureStyles,
45
49
  statusCalloutStyles,
46
50
  colorSwatchStyles,
47
51
  popoverListboxStyles,
48
52
  inspectorPopoverStyles,
49
53
  sideValuesFieldStyles,
50
54
  inspectorShellStyles,
55
+ inspectorOverlayStyles,
51
56
  emptyStateStyles,
52
57
  styleEditorStyles,
53
58
  borderEditorStyles,
@@ -60,9 +65,8 @@ export const UI_STYLES = [
60
65
  tokenDropdownStyles,
61
66
  tokensPanelStyles,
62
67
  changesLogStyles,
63
- inspectorOverlayStyles,
64
- domNavigationStyles,
65
68
  promptSettingsStyles,
66
69
  mcpConnectionStyles,
67
70
  settingsStyles,
71
+ sketchStyles,
68
72
  ].join("\n");
package/dist/internal/agent-protocol.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  * imports. Hosts can use the same validation and message shapes without
7
7
  * pulling the companion into a browser bundle.
8
8
  */
9
- export declare const AGENT_PROTOCOL_VERSION: 1;
9
+ export declare const AGENT_PROTOCOL_VERSION: 2;
10
10
  export declare const AGENT_PROTOCOL_LIMITS: {
11
11
  readonly projectId: 256;
12
12
  readonly workspaceRoot: 4096;
@@ -14,7 +14,21 @@ export declare const AGENT_PROTOCOL_LIMITS: {
14
14
  readonly sessionToken: 256;
15
15
  readonly requestId: 256;
16
16
  readonly commandId: 256;
17
+ readonly clientDispatchId: 256;
17
18
  readonly prompt: 32000;
19
+ readonly sketchId: 256;
20
+ readonly sketchRevision: 2147483647;
21
+ readonly sketchFilename: 256;
22
+ readonly sketchDescription: 2000;
23
+ readonly sketchCount: 4;
24
+ readonly sketchImageBytes: number;
25
+ readonly sketchTotalBytes: number;
26
+ readonly sketchEncodedBytes: number;
27
+ readonly sketchAnnotationCount: 50;
28
+ readonly sketchUrl: 2048;
29
+ readonly sketchTitle: 512;
30
+ readonly sketchFramework: 128;
31
+ readonly sketchHost: 128;
18
32
  readonly groupId: 256;
19
33
  readonly label: 160;
20
34
  readonly routeUrl: 2048;
@@ -108,6 +122,47 @@ export interface AgentPromptRequest {
108
122
  readonly prompt: string;
109
123
  /** The browser's canonical change revision captured at dispatch time. */
110
124
  readonly changeRevision?: number;
125
+ /** Correlates the durable browser handoff batch across a lost response. */
126
+ readonly clientDispatchId?: string;
127
+ /** Metadata for the exact sketch revisions included in this request. */
128
+ readonly sketches?: readonly AgentSketchMetadata[];
129
+ }
130
+ export interface AgentSketchCaptureMetadata {
131
+ readonly url: string;
132
+ readonly title: string;
133
+ readonly timestamp: number;
134
+ readonly viewportWidth: number;
135
+ readonly viewportHeight: number;
136
+ readonly scrollX: number;
137
+ readonly scrollY: number;
138
+ readonly devicePixelRatio: number;
139
+ readonly host: string;
140
+ readonly framework: string;
141
+ }
142
+ export interface AgentSketchAnnotation {
143
+ readonly number: number;
144
+ readonly description: string;
145
+ }
146
+ /** Metadata retained in statuses and acknowledgements without image bytes. */
147
+ export interface AgentSketchMetadata {
148
+ readonly id: string;
149
+ readonly revision: number;
150
+ readonly filename: string;
151
+ readonly mimeType: "image/png";
152
+ readonly width: number;
153
+ readonly height: number;
154
+ readonly byteSize: number;
155
+ readonly capture: AgentSketchCaptureMetadata;
156
+ readonly description?: string;
157
+ readonly annotations?: readonly AgentSketchAnnotation[];
158
+ }
159
+ /** The only protocol shape that carries screenshot bytes. */
160
+ export interface AgentSketchAttachment extends AgentSketchMetadata {
161
+ readonly data: string;
162
+ }
163
+ /** Internal companion delivery shape; attachment bytes are never status data. */
164
+ export interface AgentDeliveredPrompt extends AgentPromptRequest {
165
+ readonly attachments?: readonly AgentSketchAttachment[];
111
166
  }
112
167
  export type AgentRequestStatus = "working" | "completed" | "failed" | "interrupted";
113
168
  export interface AgentRequestOutcome {
@@ -166,6 +221,8 @@ export interface CanvasCommandAcknowledgement {
166
221
  export interface PairingRequest {
167
222
  readonly projectId: string;
168
223
  readonly origin: string;
224
+ /** Reuses an existing pairing across a same-browser reload. */
225
+ readonly sessionToken?: string;
169
226
  /** The active page is retained only while this process is alive. */
170
227
  readonly pageUrl?: string;
171
228
  }
@@ -182,6 +239,8 @@ export interface PromptDispatchRequest {
182
239
  readonly sessionToken: string;
183
240
  readonly prompt: string;
184
241
  readonly changeRevision?: number;
242
+ readonly clientDispatchId?: string;
243
+ readonly attachments?: readonly AgentSketchAttachment[];
185
244
  }
186
245
  export interface PromptDispatchResponse {
187
246
  readonly request: AgentPromptRequest;
@@ -223,6 +282,11 @@ export declare function validateRoutes(value: unknown, origin: string): AgentRou
223
282
  /** Validates the fields shared by every companion message. */
224
283
  export declare function isProtocolVersion(value: unknown): value is AgentProtocolVersion;
225
284
  export declare function isProjectIdentity(value: unknown): value is AgentProjectIdentity;
285
+ export declare function isAgentSketchCaptureMetadata(value: unknown): value is AgentSketchCaptureMetadata;
286
+ export declare function isAgentSketchAnnotation(value: unknown): value is AgentSketchAnnotation;
287
+ export declare function isAgentSketchMetadata(value: unknown): value is AgentSketchMetadata;
288
+ export declare function isAgentSketchAttachment(value: unknown): value is AgentSketchAttachment;
289
+ export declare function validateSketchAttachments(value: unknown): AgentSketchAttachment[];
226
290
  export declare function isAgentPromptRequest(value: unknown): value is AgentPromptRequest;
227
291
  export declare function isAgentStatusUpdate(value: unknown): value is AgentStatusUpdate;
228
292
  export declare function isCanvasState(value: unknown): value is CanvasState;