symbiote-ui 0.3.0-alpha.4

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 (322) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/LICENSE +21 -0
  3. package/README.md +76 -0
  4. package/canvas/AutoLayout.js +731 -0
  5. package/canvas/Breadcrumb/Breadcrumb.css.js +75 -0
  6. package/canvas/Breadcrumb/Breadcrumb.js +96 -0
  7. package/canvas/Breadcrumb/Breadcrumb.tpl.js +7 -0
  8. package/canvas/CanvasConnectionRenderer.js +971 -0
  9. package/canvas/CanvasGraph/CanvasGraph.css.js +29 -0
  10. package/canvas/CanvasGraph/CanvasGraph.js +1697 -0
  11. package/canvas/CanvasGraph/CanvasGraphDrawState.js +280 -0
  12. package/canvas/CanvasGraph/CanvasGraphGeometry.js +194 -0
  13. package/canvas/CanvasViewport.js +550 -0
  14. package/canvas/ConnectionRenderer.js +1283 -0
  15. package/canvas/FlowSimulator.js +326 -0
  16. package/canvas/ForceLayout.js +226 -0
  17. package/canvas/ForceWorker.js +1303 -0
  18. package/canvas/FrameManager.js +223 -0
  19. package/canvas/GraphExplorerShell/GraphExplorerShell.css.js +136 -0
  20. package/canvas/GraphExplorerShell/GraphExplorerShell.js +129 -0
  21. package/canvas/GraphExplorerShell/GraphExplorerShell.tpl.js +12 -0
  22. package/canvas/GraphTabs/GraphTabs.css.js +101 -0
  23. package/canvas/GraphTabs/GraphTabs.js +189 -0
  24. package/canvas/GraphTabs/GraphTabs.tpl.js +12 -0
  25. package/canvas/LODManager.js +88 -0
  26. package/canvas/Minimap/Minimap.css.js +73 -0
  27. package/canvas/Minimap/Minimap.js +210 -0
  28. package/canvas/Minimap/Minimap.tpl.js +7 -0
  29. package/canvas/NodeCanvas/NodeCanvas.css.js +398 -0
  30. package/canvas/NodeCanvas/NodeCanvas.js +1499 -0
  31. package/canvas/NodeCanvas/NodeCanvas.tpl.js +22 -0
  32. package/canvas/NodeSearch/NodeSearch.css.js +97 -0
  33. package/canvas/NodeSearch/NodeSearch.js +140 -0
  34. package/canvas/NodeSearch/NodeSearch.tpl.js +25 -0
  35. package/canvas/NodeViewManager.js +748 -0
  36. package/canvas/PcbRouteDiagnostics.js +463 -0
  37. package/canvas/PcbRouter.js +1127 -0
  38. package/canvas/PinExpansion.js +134 -0
  39. package/canvas/PseudoConnection.js +84 -0
  40. package/canvas/SelectionSync.js +163 -0
  41. package/canvas/SubgraphManager.js +203 -0
  42. package/canvas/SubgraphRouter.js +452 -0
  43. package/canvas/ViewportActions.js +473 -0
  44. package/canvas/graph-explorer.js +339 -0
  45. package/canvas/graph-layout.js +148 -0
  46. package/canvas/graph-model.js +68 -0
  47. package/canvas/html-in-canvas.js +202 -0
  48. package/canvas/project-graph-builder.js +440 -0
  49. package/canvas/project-graph-model.js +183 -0
  50. package/chat/ChatComposer/ChatComposer.css.js +652 -0
  51. package/chat/ChatComposer/ChatComposer.js +304 -0
  52. package/chat/ChatList/ChatList.css.js +102 -0
  53. package/chat/ChatList/ChatList.js +99 -0
  54. package/chat/ChatList/ChatList.tpl.js +20 -0
  55. package/chat/ChatListItem/ChatListItem.css.js +117 -0
  56. package/chat/ChatListItem/ChatListItem.js +32 -0
  57. package/chat/ChatListItem/ChatListItem.tpl.js +17 -0
  58. package/chat/ChatMessageItem/ChatMessageItem.css.js +628 -0
  59. package/chat/ChatMessageItem/ChatMessageItem.js +156 -0
  60. package/chat/ChatSidebar/ChatSidebar.css.js +150 -0
  61. package/chat/ChatSidebar/ChatSidebar.js +230 -0
  62. package/chat/ChatSidebar/ChatSidebar.tpl.js +18 -0
  63. package/chat/ChatSidebar/constants.js +11 -0
  64. package/chat/ChatSidebarItem/ChatSidebarItem.css.js +445 -0
  65. package/chat/ChatSidebarItem/ChatSidebarItem.js +304 -0
  66. package/chat/ChatTranscript/ChatTranscript.css.js +90 -0
  67. package/chat/ChatTranscript/ChatTranscript.js +244 -0
  68. package/chat/chat-context.js +123 -0
  69. package/chat/message-model.js +156 -0
  70. package/cli.js +20 -0
  71. package/control/Button/Button.css.js +93 -0
  72. package/control/Button/Button.js +78 -0
  73. package/control/Button/Button.tpl.js +3 -0
  74. package/control/Field/Field.css.js +91 -0
  75. package/control/Field/Field.js +17 -0
  76. package/control/Field/Field.tpl.js +3 -0
  77. package/core/Connection.js +47 -0
  78. package/core/Editor.js +449 -0
  79. package/core/Frame.js +33 -0
  80. package/core/GraphMermaid.js +348 -0
  81. package/core/GraphText.js +228 -0
  82. package/core/Node.js +145 -0
  83. package/core/Portal.js +106 -0
  84. package/core/Socket.js +187 -0
  85. package/core/SubgraphNode.js +121 -0
  86. package/core/base-path.js +55 -0
  87. package/core/dom-utils.js +14 -0
  88. package/core/index.js +18 -0
  89. package/core/local-cache.js +26 -0
  90. package/core/state-sync.js +227 -0
  91. package/custom-elements.json +6380 -0
  92. package/discover.js +240 -0
  93. package/display/Badge/Badge.css.js +44 -0
  94. package/display/Badge/Badge.js +17 -0
  95. package/display/Badge/Badge.tpl.js +3 -0
  96. package/display/Banner/Banner.css.js +61 -0
  97. package/display/Banner/Banner.js +17 -0
  98. package/display/Banner/Banner.tpl.js +3 -0
  99. package/display/CodeBlock/CodeBlock.css.js +194 -0
  100. package/display/CodeBlock/CodeBlock.js +220 -0
  101. package/display/CodeBlock/CodeBlock.tpl.js +11 -0
  102. package/display/DataTable/DataTable.css.js +101 -0
  103. package/display/DataTable/DataTable.js +136 -0
  104. package/display/DataTable/DataTable.tpl.js +13 -0
  105. package/display/EmptyState/EmptyState.css.js +33 -0
  106. package/display/EmptyState/EmptyState.js +17 -0
  107. package/display/EmptyState/EmptyState.tpl.js +3 -0
  108. package/display/EventFeed/EventFeed.css.js +145 -0
  109. package/display/EventFeed/EventFeed.js +64 -0
  110. package/display/EventFeed/EventFeed.tpl.js +14 -0
  111. package/display/EventFeed/EventFeedItem.js +116 -0
  112. package/display/EventFeed/EventFeedItem.tpl.js +22 -0
  113. package/display/LoadingOverlay/LoadingOverlay.css.js +91 -0
  114. package/display/LoadingOverlay/LoadingOverlay.js +48 -0
  115. package/display/LoadingOverlay/LoadingOverlay.tpl.js +12 -0
  116. package/display/Metric/Metric.css.js +60 -0
  117. package/display/Metric/Metric.js +17 -0
  118. package/display/Metric/Metric.tpl.js +6 -0
  119. package/display/OutputGraphPreview/OutputGraphPreview.css.js +122 -0
  120. package/display/OutputGraphPreview/OutputGraphPreview.js +89 -0
  121. package/display/OutputGraphPreview/OutputGraphPreview.tpl.js +13 -0
  122. package/display/OutputListPreview/OutputListPreview.css.js +109 -0
  123. package/display/OutputListPreview/OutputListPreview.js +77 -0
  124. package/display/OutputListPreview/OutputListPreview.tpl.js +13 -0
  125. package/display/SourceEditor/SourceEditor.css.js +39 -0
  126. package/display/SourceEditor/SourceEditor.js +129 -0
  127. package/display/SourceEditor/SourceEditor.tpl.js +10 -0
  128. package/display/SourceViewer/SourceViewer.css.js +80 -0
  129. package/display/SourceViewer/SourceViewer.js +418 -0
  130. package/display/SourceViewer/SourceViewer.tpl.js +17 -0
  131. package/display/StatusRibbon/StatusRibbon.css.js +73 -0
  132. package/display/StatusRibbon/StatusRibbon.js +87 -0
  133. package/display/StatusRibbon/StatusRibbon.tpl.js +7 -0
  134. package/display/event-feed-adapter.js +72 -0
  135. package/display/format-utils.js +29 -0
  136. package/display/highlight.js +659 -0
  137. package/display/icons.js +37 -0
  138. package/display/markdown-formatter.js +60 -0
  139. package/display/network-approval-page.js +487 -0
  140. package/display/output-preview.js +261 -0
  141. package/effects/CellBg/CellBg.css.js +33 -0
  142. package/effects/CellBg/CellBg.js +410 -0
  143. package/effects/CellBg/CellBg.tpl.js +5 -0
  144. package/graph/canvas-adapter.js +223 -0
  145. package/graph/graph-algorithms.js +31 -0
  146. package/graph/index.js +46 -0
  147. package/graph/model.js +176 -0
  148. package/graph/project-graph-build.js +66 -0
  149. package/graph/project-graph-metadata.js +253 -0
  150. package/graph/project-package.js +128 -0
  151. package/graph/project-runtime.js +116 -0
  152. package/graph/project-transaction.js +284 -0
  153. package/graph/skeleton-utils.js +84 -0
  154. package/graph/theme-contract.js +36 -0
  155. package/graph/transaction-parser.js +56 -0
  156. package/icons/MaterialSymbols.js +69 -0
  157. package/icons/material-symbols-outlined-400.ttf +0 -0
  158. package/icons/material-symbols.css +24 -0
  159. package/index.js +95 -0
  160. package/inspector/InspectorPanel/InspectorPanel.css.js +375 -0
  161. package/inspector/InspectorPanel/InspectorPanel.js +368 -0
  162. package/inspector/InspectorPanel/InspectorPanel.tpl.js +96 -0
  163. package/inspector/TemplatePreview/TemplatePreview.css.js +104 -0
  164. package/inspector/TemplatePreview/TemplatePreview.js +145 -0
  165. package/inspector/TemplatePreview/TemplatePreview.tpl.js +33 -0
  166. package/interactions/ConnectFlow.js +304 -0
  167. package/interactions/Drag.js +104 -0
  168. package/interactions/Selector.js +133 -0
  169. package/interactions/SnapGrid.js +66 -0
  170. package/interactions/Zoom.js +139 -0
  171. package/layout/ActionZone/ActionZone.css.js +88 -0
  172. package/layout/ActionZone/ActionZone.js +261 -0
  173. package/layout/ActionZone/ActionZone.tpl.js +11 -0
  174. package/layout/CrossLayoutPortalBridge/CrossLayoutPortalBridge.js +255 -0
  175. package/layout/Layout/Layout.css.js +91 -0
  176. package/layout/Layout/Layout.js +637 -0
  177. package/layout/Layout/Layout.tpl.js +27 -0
  178. package/layout/LayoutNode/LayoutNode.css.js +302 -0
  179. package/layout/LayoutNode/LayoutNode.js +509 -0
  180. package/layout/LayoutNode/LayoutNode.tpl.js +39 -0
  181. package/layout/LayoutPreview/LayoutPreview.css.js +46 -0
  182. package/layout/LayoutPreview/LayoutPreview.js +102 -0
  183. package/layout/LayoutPreview/LayoutPreview.tpl.js +6 -0
  184. package/layout/LayoutRouter/LayoutRouter.js +274 -0
  185. package/layout/LayoutRouter/SectionRegistry.js +135 -0
  186. package/layout/LayoutRouter/routerSync.js +250 -0
  187. package/layout/LayoutSidebar/LayoutSidebar.css.js +411 -0
  188. package/layout/LayoutSidebar/LayoutSidebar.js +368 -0
  189. package/layout/LayoutSidebar/LayoutSidebar.tpl.js +26 -0
  190. package/layout/LayoutSidebar/SidebarSection.css.js +20 -0
  191. package/layout/LayoutSidebar/SidebarSection.js +184 -0
  192. package/layout/LayoutSidebar/SidebarSection.tpl.js +22 -0
  193. package/layout/LayoutTree.js +373 -0
  194. package/layout/PanelMenu/PanelMenu.css.js +43 -0
  195. package/layout/PanelMenu/PanelMenu.js +95 -0
  196. package/layout/PanelMenu/PanelMenu.tpl.js +17 -0
  197. package/layout/ProjectTabs/ProjectTabs.css.js +188 -0
  198. package/layout/ProjectTabs/ProjectTabs.js +77 -0
  199. package/layout/ProjectTabs/ProjectTabs.tpl.js +15 -0
  200. package/layout/index.js +40 -0
  201. package/list/ListDetailShell/ListDetailShell.css.js +128 -0
  202. package/list/ListDetailShell/ListDetailShell.js +72 -0
  203. package/list/ListDetailShell/ListDetailShell.tpl.js +36 -0
  204. package/list/ListItem/ListItem.css.js +111 -0
  205. package/list/ListItem/ListItem.js +66 -0
  206. package/list/ListItem/ListItem.tpl.js +18 -0
  207. package/locale/index.js +503 -0
  208. package/manifest/component-registry.js +2446 -0
  209. package/manifest/graph-schema.js +285 -0
  210. package/manifest/index.js +6 -0
  211. package/manifest/project-schema-catalog.js +246 -0
  212. package/manifest/rule-catalog.js +201 -0
  213. package/manifest/theme-catalog.js +2149 -0
  214. package/manifest/ui-schema-catalog.js +334 -0
  215. package/menu/ContextMenu/ContextMenu.css.js +61 -0
  216. package/menu/ContextMenu/ContextMenu.js +82 -0
  217. package/menu/ContextMenu/ContextMenu.tpl.js +19 -0
  218. package/navigation/QuickOpen/QuickOpen.css.js +92 -0
  219. package/navigation/QuickOpen/QuickOpen.js +185 -0
  220. package/navigation/QuickOpen/QuickOpen.tpl.js +15 -0
  221. package/navigation/quick-open-utils.js +101 -0
  222. package/node/CtrlItem/CtrlItem.css.js +41 -0
  223. package/node/CtrlItem/CtrlItem.js +24 -0
  224. package/node/CtrlItem/CtrlItem.tpl.js +17 -0
  225. package/node/GraphFrame/GraphFrame.css.js +66 -0
  226. package/node/GraphFrame/GraphFrame.js +32 -0
  227. package/node/GraphFrame/GraphFrame.tpl.js +13 -0
  228. package/node/GraphNode/GraphNode.css.js +815 -0
  229. package/node/GraphNode/GraphNode.js +173 -0
  230. package/node/GraphNode/GraphNode.tpl.js +33 -0
  231. package/node/NodeCallout/NodeCallout.css.js +91 -0
  232. package/node/NodeCallout/NodeCallout.js +281 -0
  233. package/node/NodeCallout/NodeCallout.tpl.js +8 -0
  234. package/node/NodeSocket/NodeSocket.css.js +68 -0
  235. package/node/NodeSocket/NodeSocket.js +26 -0
  236. package/node/NodeSocket/NodeSocket.tpl.js +7 -0
  237. package/node/PortItem/PortItem.css.js +93 -0
  238. package/node/PortItem/PortItem.js +87 -0
  239. package/node/PortItem/PortItem.tpl.js +10 -0
  240. package/package.json +165 -0
  241. package/palette/PaletteBrowser/PaletteBrowser.css.js +143 -0
  242. package/palette/PaletteBrowser/PaletteBrowser.js +152 -0
  243. package/palette/PaletteBrowser/PaletteBrowser.tpl.js +23 -0
  244. package/plugins/History.js +408 -0
  245. package/plugins/Readonly.js +60 -0
  246. package/rules/symbiote-3x.json +170 -0
  247. package/schemas/component-descriptor-v1.json +91 -0
  248. package/schemas/component-descriptor-v2.json +145 -0
  249. package/schemas/graph-model-v1.json +179 -0
  250. package/schemas/graph-v1.json +91 -0
  251. package/schemas/project-package-v1.json +102 -0
  252. package/schemas/project-transaction-v1.json +114 -0
  253. package/schemas/runtime-ui-v1.json +80 -0
  254. package/schemas/theme-rule-block-v1.json +73 -0
  255. package/shapes/CircleShape.js +79 -0
  256. package/shapes/CommentShape.js +35 -0
  257. package/shapes/DiamondShape.js +130 -0
  258. package/shapes/NodeShape.js +79 -0
  259. package/shapes/PillShape.js +91 -0
  260. package/shapes/RectShape.js +84 -0
  261. package/shapes/SVGShape.js +525 -0
  262. package/shapes/index.js +63 -0
  263. package/surface/Card/Card.css.js +57 -0
  264. package/surface/Card/Card.js +17 -0
  265. package/surface/Card/Card.tpl.js +3 -0
  266. package/themes/Palette.js +30 -0
  267. package/themes/Skin.js +113 -0
  268. package/themes/Theme.js +82 -0
  269. package/themes/carbon.js +135 -0
  270. package/themes/dark.js +140 -0
  271. package/themes/default-dark.js +714 -0
  272. package/themes/default-provider.css +635 -0
  273. package/themes/default-provider.js +718 -0
  274. package/themes/ebook.js +136 -0
  275. package/themes/grey.js +137 -0
  276. package/themes/light.js +139 -0
  277. package/themes/neon.js +138 -0
  278. package/themes/pcb.js +273 -0
  279. package/themes/synthwave.js +138 -0
  280. package/tokens/base.json +29 -0
  281. package/tokens/themes/carbon.json +11 -0
  282. package/tokens/themes/dark.json +12 -0
  283. package/tokens/themes/default-dark.json +1543 -0
  284. package/tokens/themes/default-provider.json +1543 -0
  285. package/tokens/themes/ebook.json +11 -0
  286. package/tokens/themes/grey.json +11 -0
  287. package/tokens/themes/light.json +12 -0
  288. package/tokens/themes/neon.json +11 -0
  289. package/tokens/themes/pcb.json +11 -0
  290. package/tokens/themes/synthwave.json +11 -0
  291. package/toolbar/QuickToolbar/QuickToolbar.css.js +152 -0
  292. package/toolbar/QuickToolbar/QuickToolbar.js +529 -0
  293. package/toolbar/QuickToolbar/QuickToolbar.tpl.js +34 -0
  294. package/tree/TreePanel/TreePanel.css.js +112 -0
  295. package/tree/TreePanel/TreePanel.js +147 -0
  296. package/tree/TreePanel/TreePanel.tpl.js +18 -0
  297. package/tree/TreeView/TreeView.css.js +122 -0
  298. package/tree/TreeView/TreeView.js +365 -0
  299. package/tree/TreeView/TreeView.tpl.js +10 -0
  300. package/ui/dialogs.js +221 -0
  301. package/ui/host-adapters.js +114 -0
  302. package/ui/index.js +660 -0
  303. package/ui/locale.js +50 -0
  304. package/ui/overlay-stack.js +89 -0
  305. package/ui/shared-styles.js +26 -0
  306. package/webmcp.js +37 -0
  307. package/xr/deep-graph.js +646 -0
  308. package/xr/emulation.js +198 -0
  309. package/xr/gesture.js +228 -0
  310. package/xr/html-canvas-renderer.js +472 -0
  311. package/xr/index.js +15 -0
  312. package/xr/layout-projection.js +1046 -0
  313. package/xr/panel-frame.js +128 -0
  314. package/xr/panel-host.js +267 -0
  315. package/xr/pointer.js +258 -0
  316. package/xr/scene-controller.js +242 -0
  317. package/xr/spatial-scene.js +212 -0
  318. package/xr/theme-bridge.js +105 -0
  319. package/xr/three-webxr-adapter.js +3439 -0
  320. package/xr/webgl-layer-renderer.js +419 -0
  321. package/xr/webxr.js +679 -0
  322. package/xr/workbench.js +516 -0
package/themes/default-provider.css ADDED
@@ -0,0 +1,635 @@
1
+ /* Generated from themes/default-provider.js provider tokens. */
2
+ :root {
3
+ --sn-theme-hue: 218;
4
+ --sn-theme-chroma: 89%;
5
+ --sn-theme-bg-lightness: 10%;
6
+ --sn-theme-surface-lightness: 13%;
7
+ --sn-theme-text-lightness: 94%;
8
+ --sn-theme-density: 1;
9
+ --sn-theme-radius-scale: 1;
10
+ --sn-theme-motion-scale: 1;
11
+ --sn-theme-elevation-scale: 1;
12
+ --sn-hue-base: 0;
13
+ --sn-hue-accent: var(--sn-theme-hue);
14
+ --sn-hue-success: 122;
15
+ --sn-hue-warning: 36;
16
+ --sn-hue-danger: 4;
17
+ --sn-hue-data: 188;
18
+ --sn-sat: 0%;
19
+ --sn-sat-vivid: var(--sn-theme-chroma);
20
+ --sn-sat-muted: 0%;
21
+ --sn-lit-bg: var(--sn-theme-bg-lightness);
22
+ --sn-lit-surface: var(--sn-theme-surface-lightness);
23
+ --sn-lit-border: 17%;
24
+ --sn-lit-hover: 27%;
25
+ --sn-lit-text: var(--sn-theme-text-lightness);
26
+ --sn-lit-text-dim: 60%;
27
+ --sn-lit-accent: 63%;
28
+ --sn-alpha-overlay: 0.95;
29
+ --sn-alpha-subtle: 0.15;
30
+ --sn-alpha-faint: 0.06;
31
+ --sn-overlay-z-base: 20000;
32
+ --sn-danger-color: hsl(var(--sn-hue-danger) var(--sn-sat-vivid) 58%);
33
+ --sn-success-color: hsl(var(--sn-hue-success) var(--sn-sat-vivid) 57%);
34
+ --sn-warning-color: hsl(var(--sn-hue-warning) var(--sn-sat-vivid) 58%);
35
+ --sn-status-ok-bg: color-mix(in srgb, var(--sn-success-color) 12%, transparent);
36
+ --sn-status-error-bg: color-mix(in srgb, var(--sn-danger-color) 12%, transparent);
37
+ --sn-bg: hsl(0 0% var(--sn-lit-bg));
38
+ --sn-panel-bg: hsl(0 0% var(--sn-lit-surface));
39
+ --sn-layout-bg: var(--sn-bg);
40
+ --sn-layout-gap-bg: transparent;
41
+ --sn-layout-border: transparent;
42
+ --sn-layout-resizer-bg: transparent;
43
+ --sn-layout-resizer-hover-bg: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.08);
44
+ --sn-layout-resizer-size: 6px;
45
+ --sn-layout-preview-join-bg: color-mix(in srgb, var(--sn-danger-color) 30%, transparent);
46
+ --sn-layout-preview-join-border: color-mix(in srgb, var(--sn-danger-color) 60%, transparent);
47
+ --sn-layout-preview-line: var(--sn-node-selected);
48
+ --sn-layout-preview-line-shadow: 0 0 8px var(--sn-layout-preview-line);
49
+ --sn-panel-menu-z: var(--sn-overlay-z-base);
50
+ --sn-portal-bridge-z: 12;
51
+ --sn-portal-bridge-stroke: var(--sn-node-selected);
52
+ --sn-portal-bridge-width: 2;
53
+ --sn-portal-bridge-dash: 7 7;
54
+ --sn-portal-bridge-dot: var(--sn-node-selected);
55
+ --sn-portal-bridge-grid: 20;
56
+ --sn-portal-bridge-stub: 36;
57
+ --sn-portal-bridge-chamfer: 8;
58
+ --sn-xr-panel-bg: var(--sn-panel-bg);
59
+ --sn-xr-panel-border: var(--sn-node-border);
60
+ --sn-xr-panel-radius: var(--sn-node-radius);
61
+ --sn-xr-panel-shadow: var(--sn-node-shadow);
62
+ --sn-xr-pointer-color: var(--sn-node-selected);
63
+ --sn-bg-overlay: hsl(var(--sn-hue-base) var(--sn-sat-muted) 0% / 0.45);
64
+ --sn-grid-dot: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.06);
65
+ --sn-grid-size: 20px;
66
+ --sn-cell-bg: var(--sn-bg);
67
+ --sn-cell-dot: hsl(var(--sn-hue-base) var(--sn-sat-muted) 31%);
68
+ --sn-cell-base-alpha: 0.06;
69
+ --sn-cell-alpha-span: 0.18;
70
+ --sn-cell-glare: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.02);
71
+ --sn-cell-vignette-mid: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-bg) / 0.7);
72
+ --sn-cell-vignette-edge: var(--sn-bg);
73
+ --sn-cell-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
74
+ --sn-node-bg: var(--sn-panel-bg);
75
+ --sn-node-border: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.1);
76
+ --sn-surface: var(--sn-node-bg);
77
+ --sn-border: var(--sn-node-border);
78
+ --sn-node-min-width: 180px;
79
+ --sn-node-max-width: 280px;
80
+ --sn-node-border-width: 2px;
81
+ --sn-node-font-size: 13px;
82
+ --sn-node-items-max-height: 420px;
83
+ --sn-node-callout-z: var(--sn-overlay-z-base);
84
+ --sn-node-callout-bg: color-mix(in srgb, var(--sn-node-bg) 94%, var(--sn-node-selected) 6%);
85
+ --sn-node-callout-border: color-mix(in srgb, var(--sn-node-selected) 28%, var(--sn-node-border));
86
+ --sn-node-callout-color: var(--sn-text);
87
+ --sn-node-callout-shadow: var(--sn-shadow-lg);
88
+ --sn-node-callout-radius: calc(8px * var(--sn-theme-radius-scale));
89
+ --sn-node-callout-padding: 10px 12px;
90
+ --sn-node-callout-max-width: 520px;
91
+ --sn-node-callout-offset: 14px;
92
+ --sn-node-callout-font-size: 12px;
93
+ --sn-node-callout-font-weight: 700;
94
+ --sn-node-callout-line-height: 1.35;
95
+ --sn-node-callout-arrow-size: 10px;
96
+ --sn-node-error-frame-offset: 10px;
97
+ --sn-node-error-frame-min-width: 140px;
98
+ --sn-node-error-frame-max-width: 320px;
99
+ --sn-node-error-frame-border-width: 2px;
100
+ --sn-node-error-frame-radius: calc(12px * var(--sn-theme-radius-scale));
101
+ --sn-node-radius: calc(6px * var(--sn-theme-radius-scale));
102
+ --sn-node-shadow: 0 2px calc(8px * var(--sn-theme-elevation-scale)) hsl(var(--sn-hue-base) var(--sn-sat-muted) 0% / 0.4);
103
+ --sn-node-active-border: color-mix(in srgb, var(--sn-node-selected) 50%, transparent);
104
+ --sn-shadow-color: hsl(var(--sn-hue-base) var(--sn-sat-muted) 0% / 0.4);
105
+ --sn-shadow-sm: 0 1px calc(4px * var(--sn-theme-elevation-scale)) hsl(var(--sn-hue-base) var(--sn-sat-muted) 0% / 0.22);
106
+ --sn-shadow-md: 0 2px calc(8px * var(--sn-theme-elevation-scale)) hsl(var(--sn-hue-base) var(--sn-sat-muted) 0% / 0.28);
107
+ --sn-shadow-lg: 0 6px calc(18px * var(--sn-theme-elevation-scale)) hsl(var(--sn-hue-base) var(--sn-sat-muted) 0% / 0.28);
108
+ --sn-shadow-xl: 0 -8px calc(28px * var(--sn-theme-elevation-scale)) hsl(var(--sn-hue-base) var(--sn-sat-muted) 0% / 0.32);
109
+ --sn-node-header-bg: var(--sn-panel-bg);
110
+ --sn-node-selected: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent));
111
+ --sn-node-accent: var(--sn-node-selected);
112
+ --sn-node-hover: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-hover));
113
+ --sn-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
114
+ --sn-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
115
+ --sn-font-ui: var(--sn-font);
116
+ --sn-font-family: var(--sn-font);
117
+ --sn-icon-font: 'Material Symbols Outlined';
118
+ --sn-text: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text));
119
+ --sn-text-dim: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text-dim));
120
+ --sn-socket-size: 12px;
121
+ --sn-socket-border-width: 2px;
122
+ --sn-conn-color: var(--sn-node-selected);
123
+ --sn-conn-width: 2;
124
+ --sn-conn-selected: hsl(var(--sn-hue-danger) var(--sn-sat-vivid) 58%);
125
+ --sn-conn-linecap: round;
126
+ --sn-conn-linejoin: round;
127
+ --sn-conn-dot-fill: var(--sn-conn-color);
128
+ --sn-conn-dot-stroke: var(--sn-node-bg);
129
+ --sn-conn-dot-stroke-width: var(--sn-socket-border-width);
130
+ --sn-conn-dot-r: calc((var(--sn-socket-size) + var(--sn-conn-dot-stroke-width)) / 2);
131
+ --sn-graph-explorer-overlay-z: 100;
132
+ --sn-graph-explorer-toolbar-top: 8px;
133
+ --sn-graph-explorer-toolbar-right: 8px;
134
+ --sn-graph-explorer-toolbar-gap: 6px;
135
+ --sn-graph-explorer-toolbar-z: 200;
136
+ --sn-graph-explorer-stats-bottom: 8px;
137
+ --sn-graph-explorer-stats-left: 8px;
138
+ --sn-graph-explorer-stats-z: 10;
139
+ --sn-graph-type-action: hsl(var(--sn-hue-danger) var(--sn-sat-vivid) 78%);
140
+ --sn-graph-type-output: hsl(var(--sn-hue-success) var(--sn-sat-vivid) 65%);
141
+ --sn-graph-type-data: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) 74%);
142
+ --sn-graph-type-config: hsl(var(--sn-hue-warning) var(--sn-sat-vivid) 68%);
143
+ --sn-graph-type-external: hsl(var(--sn-hue-data) var(--sn-sat-vivid) 76%);
144
+ --sn-graph-type-style: hsl(calc(var(--sn-hue-danger) + 315) var(--sn-sat-vivid) 78%);
145
+ --sn-graph-type-docs: hsl(var(--sn-hue-base) var(--sn-sat-muted) 81%);
146
+ --sn-graph-type-asset: hsl(calc(var(--sn-hue-accent) - 40) var(--sn-sat-vivid) 74%);
147
+ --sn-graph-type-group: hsl(calc(var(--sn-hue-warning) + 8) var(--sn-sat-vivid) 67%);
148
+ --sn-graph-cluster-0: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) 74%);
149
+ --sn-graph-cluster-1: hsl(var(--sn-hue-success) var(--sn-sat-vivid) 66%);
150
+ --sn-graph-cluster-2: hsl(var(--sn-hue-warning) var(--sn-sat-vivid) 68%);
151
+ --sn-graph-cluster-3: hsl(var(--sn-hue-danger) var(--sn-sat-vivid) 74%);
152
+ --sn-graph-cluster-4: hsl(var(--sn-hue-data) var(--sn-sat-vivid) 76%);
153
+ --sn-graph-cluster-5: hsl(calc(var(--sn-hue-accent) - 40) var(--sn-sat-vivid) 72%);
154
+ --sn-graph-cluster-6: hsl(var(--sn-hue-base) var(--sn-sat-muted) 82%);
155
+ --sn-minimap-bg: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-bg) / 0.85);
156
+ --sn-minimap-node: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.6);
157
+ --sn-minimap-node-stroke: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.3);
158
+ --sn-minimap-bypassed-node: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text-dim) / 0.5);
159
+ --sn-minimap-viewport: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.6);
160
+ --sn-minimap-viewport-fill: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.04);
161
+ --sn-dot-output: hsl(var(--sn-hue-warning) var(--sn-sat-vivid) 63%);
162
+ --sn-dot-input: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) 63%);
163
+ --sn-dot-exec: hsl(var(--sn-hue-warning) var(--sn-sat-vivid) 64%);
164
+ --sn-dot-ctrl: var(--sn-success-color);
165
+ --sn-cat-server: var(--sn-node-selected);
166
+ --sn-cat-instance: hsl(var(--sn-hue-success) var(--sn-sat-vivid) 57%);
167
+ --sn-cat-control: hsl(var(--sn-hue-warning) var(--sn-sat-vivid) 58%);
168
+ --sn-cat-data: hsl(var(--sn-hue-data) var(--sn-sat-vivid) 42%);
169
+ --sn-cat-default: hsl(var(--sn-hue-base) var(--sn-sat-muted) 40%);
170
+ --sn-cat-directory: hsl(var(--sn-hue-warning) var(--sn-sat-vivid) 60%);
171
+ --sn-cat-file: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) 66%);
172
+ --sn-cat-function: var(--sn-success-color);
173
+ --sn-cat-class: hsl(var(--sn-hue-data) var(--sn-sat-vivid) 72%);
174
+ --sn-cat-module: hsl(var(--sn-hue-danger) var(--sn-sat-vivid) 70%);
175
+ --sn-type-default: var(--sn-node-category-accent);
176
+ --sn-type-profile: hsl(var(--sn-hue-data) var(--sn-sat-vivid) 58%);
177
+ --sn-type-profile-info: var(--sn-success-color);
178
+ --sn-type-portal: var(--sn-cat-control);
179
+ --sn-type-project: hsl(24 var(--sn-sat-vivid) 62%);
180
+ --sn-accent-warn: var(--sn-warning-color);
181
+ --sn-message-event-bg: color-mix(in srgb, var(--sn-cat-server) 10%, transparent);
182
+ --sn-subgraph-accent: var(--sn-cat-data);
183
+ --sn-subgraph-bg: linear-gradient(135deg, color-mix(in srgb, var(--sn-subgraph-accent) 12%, transparent) 0%, color-mix(in srgb, var(--sn-subgraph-accent) 8%, transparent) 100%);
184
+ --sn-subgraph-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--sn-subgraph-accent) 22%, transparent) 0%, color-mix(in srgb, var(--sn-subgraph-accent) 15%, transparent) 100%);
185
+ --sn-subgraph-border: color-mix(in srgb, var(--sn-subgraph-accent) 30%, transparent);
186
+ --sn-subgraph-border-hover: color-mix(in srgb, var(--sn-subgraph-accent) 50%, transparent);
187
+ --sn-subgraph-preview-connection: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.12);
188
+ --sn-subgraph-preview-completed-connection: hsl(var(--sn-hue-success) var(--sn-sat-vivid) 57% / 0.5);
189
+ --sn-subgraph-preview-processing-fill: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.25);
190
+ --sn-subgraph-preview-processing-stroke: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.8);
191
+ --sn-subgraph-preview-processing-glow: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.6);
192
+ --sn-subgraph-preview-completed-fill: hsl(var(--sn-hue-success) var(--sn-sat-vivid) 57% / 0.2);
193
+ --sn-subgraph-preview-completed-stroke: hsl(var(--sn-hue-success) var(--sn-sat-vivid) 57% / 0.7);
194
+ --sn-subgraph-preview-idle-fill: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.08);
195
+ --sn-subgraph-preview-idle-stroke: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.2);
196
+ --sn-provider-rnd-pro-color: var(--sn-cat-data);
197
+ --sn-provider-rnd-pro-bg: color-mix(in srgb, var(--sn-provider-rnd-pro-color) 20%, transparent);
198
+ --sn-provider-official-color: var(--sn-node-selected);
199
+ --sn-provider-official-bg: color-mix(in srgb, var(--sn-provider-official-color) 20%, transparent);
200
+ --sn-provider-google-color: var(--sn-success-color);
201
+ --sn-provider-google-bg: color-mix(in srgb, var(--sn-provider-google-color) 20%, transparent);
202
+ --sn-provider-community-color: var(--sn-warning-color);
203
+ --sn-provider-community-bg: color-mix(in srgb, var(--sn-provider-community-color) 20%, transparent);
204
+ --sn-provider-default-color: var(--sn-text-dim);
205
+ --sn-provider-default-bg: var(--sn-node-hover);
206
+ --sn-ctx-bg: color-mix(in srgb, var(--sn-panel-bg) 82%, var(--sn-text) 4%);
207
+ --sn-ctx-border: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.1);
208
+ --sn-ctx-color: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text));
209
+ --sn-ctx-hover: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.15);
210
+ --sn-ctx-z: var(--sn-overlay-z-base);
211
+ --sn-accent-bg: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.12);
212
+ --sn-accent-bg-subtle: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.06);
213
+ --sn-accent-border: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.2);
214
+ --sn-accent-glow: 0 0 12px hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.12);
215
+ --sn-success-bg: color-mix(in srgb, var(--sn-success-color) 18%, transparent);
216
+ --sn-success-border: color-mix(in srgb, var(--sn-success-color) 32%, transparent);
217
+ --sn-success-bg-hover: color-mix(in srgb, var(--sn-success-color) 28%, transparent);
218
+ --sn-success-border-hover: color-mix(in srgb, var(--sn-success-color) 52%, transparent);
219
+ --sn-danger-bg: color-mix(in srgb, var(--sn-danger-color) 18%, transparent);
220
+ --sn-danger-border: color-mix(in srgb, var(--sn-danger-color) 32%, transparent);
221
+ --sn-comment-bg: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.04);
222
+ --sn-comment-border: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.08);
223
+ --sn-comment-radius: 4px;
224
+ --sn-toolbar-bg: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-surface) / 0.95);
225
+ --sn-toolbar-border: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.08);
226
+ --sn-toolbar-color: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text-dim));
227
+ --sn-toolbar-hover: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.18);
228
+ --sn-toolbar-occlusion-bg: var(--sn-panel-bg);
229
+ --sn-toolbar-active: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text));
230
+ --sn-toolbar-danger: hsl(var(--sn-hue-danger) var(--sn-sat-vivid) 58% / 0.22);
231
+ --sn-toolbar-danger-color: hsl(var(--sn-hue-danger) var(--sn-sat-vivid) 58%);
232
+ --sn-toolbar-z: var(--sn-overlay-z-base);
233
+ --sn-toolbar-title-color: var(--sn-text);
234
+ --sn-toolbar-title-font-size: 12px;
235
+ --sn-toolbar-title-font-weight: 700;
236
+ --sn-toolbar-title-line-height: 1.35;
237
+ --sn-toolbar-title-min-width: 220px;
238
+ --sn-toolbar-title-max-width: clamp(300px, 48vw, 420px);
239
+ --sn-toolbar-title-lines: 2;
240
+ --sn-scrollbar-thumb: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.08);
241
+ --sn-scrollbar-thumb-hover: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.25);
242
+ --sn-tabs-height: 38px;
243
+ --sn-tabs-item-height: 32px;
244
+ --sn-tabs-bg: transparent;
245
+ --sn-tabs-border: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.08);
246
+ --sn-tabs-active-bg: var(--sn-node-bg);
247
+ --sn-tabs-hover-bg: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.04);
248
+ --sn-tabs-divider: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.1);
249
+ --sn-tabs-accent: var(--sn-node-selected);
250
+ --sn-tabs-radius: 8px 8px 0 0;
251
+ --sn-tabs-corner-size: 12px;
252
+ --sn-tabs-corner-cut: 11.5px;
253
+ --sn-tree-gap: 4px;
254
+ --sn-tree-indent: 16px;
255
+ --sn-tree-toggle-width: 18px;
256
+ --sn-tree-icon-width: 18px;
257
+ --sn-tree-row-height: calc(22px * var(--sn-theme-density));
258
+ --sn-tree-row-min-height: calc(22px * var(--sn-theme-density));
259
+ --sn-tree-row-padding-block: 2px;
260
+ --sn-tree-row-radius: calc(4px * var(--sn-theme-radius-scale));
261
+ --sn-tree-row-hover-bg: var(--sn-node-hover);
262
+ --sn-tree-row-selected-bg: var(--sn-accent-bg-subtle);
263
+ --sn-tree-row-selected-border: transparent;
264
+ --sn-tree-row-focus-border: var(--sn-node-selected);
265
+ --sn-tree-label-color: var(--sn-text-dim);
266
+ --sn-tree-label-size: 12px;
267
+ --sn-tree-label-weight: 500;
268
+ --sn-tree-muted-color: var(--sn-text-dim);
269
+ --sn-tree-icon-size: 15px;
270
+ --sn-tree-badge-radius: 8px;
271
+ --sn-tree-badge-bg: var(--sn-node-hover);
272
+ --sn-tree-badge-color: var(--sn-text-dim);
273
+ --sn-tree-badge-size: 10px;
274
+ --sn-tree-badge-max-width: 88px;
275
+ --sn-tree-kind-size: 10px;
276
+ --sn-tree-kind-max-width: 120px;
277
+ --sn-tree-panel-font-size: 12px;
278
+ --sn-tree-panel-title-gap: 5px;
279
+ --sn-tree-panel-title-padding: 6px 8px;
280
+ --sn-tree-panel-title-size: 11px;
281
+ --sn-tree-panel-title-weight: 700;
282
+ --sn-tree-panel-icon-size: 14px;
283
+ --sn-tree-panel-toolbar-gap: 6px;
284
+ --sn-tree-panel-toolbar-padding: 6px 8px;
285
+ --sn-tree-panel-input-padding: 4px 8px;
286
+ --sn-tree-panel-input-radius: calc(4px * var(--sn-theme-radius-scale));
287
+ --sn-tree-panel-input-size: 11px;
288
+ --sn-tree-panel-collapse-padding: 0 6px;
289
+ --sn-tree-panel-content-padding: 4px;
290
+ --sn-tree-panel-placeholder-padding: 8px;
291
+ --sn-tree-panel-placeholder-size: 12px;
292
+ --sn-tree-panel-row-min-height: var(--sn-tree-row-min-height);
293
+ --sn-tree-panel-label-weight: var(--sn-tree-label-weight);
294
+ --sn-card-bg: var(--sn-node-bg);
295
+ --sn-card-border: var(--sn-node-border);
296
+ --sn-card-radius: var(--sn-node-radius);
297
+ --sn-card-padding: 14px;
298
+ --sn-card-margin-block-end: 12px;
299
+ --sn-card-hover-bg: var(--sn-node-hover);
300
+ --sn-card-hover-border: var(--sn-node-selected);
301
+ --sn-card-title-color: var(--sn-text-dim);
302
+ --sn-card-title-size: 11px;
303
+ --sn-card-title-weight: 600;
304
+ --sn-card-title-margin-block-end: 12px;
305
+ --sn-card-footer-gap: 8px;
306
+ --sn-card-footer-margin-block-start: 16px;
307
+ --sn-card-footer-padding-block-start: 16px;
308
+ --sn-dialog-bg: var(--sn-panel-bg);
309
+ --sn-dialog-color: var(--sn-text);
310
+ --sn-dialog-border: var(--sn-node-border);
311
+ --sn-dialog-border-width: 1px;
312
+ --sn-dialog-radius: calc(8px * var(--sn-theme-radius-scale));
313
+ --sn-dialog-shadow: var(--sn-shadow-lg);
314
+ --sn-dialog-backdrop: var(--sn-bg-overlay);
315
+ --sn-dialog-body-padding: calc(20px * var(--sn-theme-density));
316
+ --sn-dialog-font-size: 14px;
317
+ --sn-dialog-min-width: 250px;
318
+ --sn-dialog-message-gap: calc(20px * var(--sn-theme-density));
319
+ --sn-dialog-prompt-message-gap: calc(10px * var(--sn-theme-density));
320
+ --sn-dialog-actions-gap: calc(10px * var(--sn-theme-density));
321
+ --sn-dialog-actions-margin-block-start: calc(20px * var(--sn-theme-density));
322
+ --sn-button-bg: var(--sn-node-bg);
323
+ --sn-button-color: var(--sn-text);
324
+ --sn-button-border: var(--sn-node-border);
325
+ --sn-button-padding: 6px 14px;
326
+ --sn-button-radius: calc(8px * var(--sn-theme-radius-scale));
327
+ --sn-button-gap: 6px;
328
+ --sn-button-min-height: 30px;
329
+ --sn-button-font-size: 12px;
330
+ --sn-button-font-weight: 500;
331
+ --sn-button-line-height: 1.2;
332
+ --sn-button-hover-bg: var(--sn-node-bg);
333
+ --sn-button-hover-border: var(--sn-node-selected);
334
+ --sn-button-disabled-opacity: 0.5;
335
+ --sn-button-primary-bg: var(--sn-node-selected);
336
+ --sn-button-primary-border: var(--sn-node-selected);
337
+ --sn-button-primary-color: var(--sn-text);
338
+ --sn-button-primary-hover-filter: brightness(1.1);
339
+ --sn-button-success-bg: var(--sn-success-color);
340
+ --sn-button-success-border: var(--sn-success-color);
341
+ --sn-button-success-color: var(--sn-bg);
342
+ --sn-button-success-hover-bg: color-mix(in srgb, var(--sn-success-color) 85%, var(--sn-text));
343
+ --sn-button-success-hover-border: color-mix(in srgb, var(--sn-success-color) 85%, var(--sn-text));
344
+ --sn-button-success-hover-color: var(--sn-bg);
345
+ --sn-button-danger-bg: transparent;
346
+ --sn-button-danger-border: var(--sn-danger-color);
347
+ --sn-button-danger-color: var(--sn-danger-color);
348
+ --sn-button-danger-hover-bg: var(--sn-danger-color);
349
+ --sn-button-danger-hover-border: var(--sn-danger-color);
350
+ --sn-button-danger-hover-color: var(--sn-text);
351
+ --sn-button-icon-size: 28px;
352
+ --sn-button-icon-font-size: 16px;
353
+ --sn-button-focus-ring: var(--sn-effect-focus-ring);
354
+ --sn-field-margin-block-end: 12px;
355
+ --sn-field-label-margin-block-end: 4px;
356
+ --sn-field-label-color: var(--sn-text-dim);
357
+ --sn-field-label-size: 11px;
358
+ --sn-field-label-weight: 500;
359
+ --sn-field-label-line-height: 1.2;
360
+ --sn-field-label-transform: uppercase;
361
+ --sn-field-control-bg: var(--sn-bg);
362
+ --sn-field-control-border: var(--sn-node-border);
363
+ --sn-field-control-color: var(--sn-text);
364
+ --sn-field-control-padding: 8px 12px;
365
+ --sn-field-control-radius: calc(6px * var(--sn-theme-radius-scale));
366
+ --sn-field-control-font-size: 12px;
367
+ --sn-field-control-line-height: 1.4;
368
+ --sn-field-control-focus-border: var(--sn-node-selected);
369
+ --sn-field-control-focus-shadow: none;
370
+ --sn-field-control-subtle-border: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / var(--sn-alpha-faint));
371
+ --sn-field-placeholder-color: var(--sn-text-dim);
372
+ --sn-field-textarea-min-height: 120px;
373
+ --sn-field-hint-margin-block-start: 4px;
374
+ --sn-field-hint-color: var(--sn-text-dim);
375
+ --sn-field-hint-size: 11px;
376
+ --sn-field-hint-line-height: 1.4;
377
+ --sn-field-inline-gap: 8px;
378
+ --sn-field-compact-margin-block-end: 8px;
379
+ --sn-field-compact-control-padding: 6px 10px;
380
+ --sn-field-select-indicator: linear-gradient(45deg, transparent 50%, var(--sn-text-dim) 50%), linear-gradient(135deg, var(--sn-text-dim) 50%, transparent 50%);
381
+ --sn-field-toggle-bg: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.1);
382
+ --sn-field-toggle-thumb-bg: var(--sn-text-dim);
383
+ --sn-field-toggle-thumb-active-bg: var(--sn-text);
384
+ --sn-badge-bg: var(--sn-node-bg);
385
+ --sn-badge-color: var(--sn-text-dim);
386
+ --sn-badge-border: var(--sn-node-border);
387
+ --sn-badge-padding: 2px 8px;
388
+ --sn-badge-radius: calc(12px * var(--sn-theme-radius-scale));
389
+ --sn-badge-gap: 4px;
390
+ --sn-badge-font-size: 11px;
391
+ --sn-badge-font-weight: 500;
392
+ --sn-badge-line-height: 1.2;
393
+ --sn-badge-success-color: var(--sn-success-color);
394
+ --sn-badge-success-border: var(--sn-success-color);
395
+ --sn-badge-info-color: var(--sn-node-selected);
396
+ --sn-badge-info-border: var(--sn-node-selected);
397
+ --sn-badge-warning-color: var(--sn-warning-color);
398
+ --sn-badge-warning-border: var(--sn-warning-color);
399
+ --sn-badge-error-color: var(--sn-danger-color);
400
+ --sn-badge-error-border: var(--sn-danger-color);
401
+ --sn-banner-bg: var(--sn-node-bg);
402
+ --sn-banner-color: var(--sn-text);
403
+ --sn-banner-border: var(--sn-node-border);
404
+ --sn-banner-padding: 10px 14px;
405
+ --sn-banner-radius: calc(8px * var(--sn-theme-radius-scale));
406
+ --sn-banner-gap: 8px;
407
+ --sn-banner-margin-block-end: 16px;
408
+ --sn-banner-font-size: 12px;
409
+ --sn-banner-font-weight: 500;
410
+ --sn-banner-line-height: 1.4;
411
+ --sn-banner-icon-size: 18px;
412
+ --sn-banner-info-color: var(--sn-node-selected);
413
+ --sn-banner-info-border: var(--sn-node-selected);
414
+ --sn-banner-success-color: var(--sn-success-color);
415
+ --sn-banner-success-border: var(--sn-success-color);
416
+ --sn-banner-warning-color: var(--sn-warning-color);
417
+ --sn-banner-warning-border: var(--sn-warning-color);
418
+ --sn-banner-error-color: var(--sn-danger-color);
419
+ --sn-banner-error-border: var(--sn-danger-color);
420
+ --sn-banner-running-spin-duration: 2s;
421
+ --sn-empty-state-color: var(--sn-text-dim);
422
+ --sn-empty-state-error-color: var(--sn-danger-color);
423
+ --sn-empty-state-padding: 20px;
424
+ --sn-empty-state-gap: 8px;
425
+ --sn-empty-state-min-height: 0;
426
+ --sn-empty-state-height: 100%;
427
+ --sn-empty-state-font-size: 13px;
428
+ --sn-empty-state-font-style: italic;
429
+ --sn-empty-state-line-height: 1.4;
430
+ --sn-empty-state-icon-size: 18px;
431
+ --sn-metric-gap: 12px;
432
+ --sn-metric-padding: 5px 0;
433
+ --sn-metric-border: var(--sn-node-hover);
434
+ --sn-metric-color: var(--sn-text);
435
+ --sn-metric-label-color: var(--sn-text-dim);
436
+ --sn-metric-label-size: 12px;
437
+ --sn-metric-value-color: var(--sn-text);
438
+ --sn-metric-value-size: 12px;
439
+ --sn-metric-value-weight: 600;
440
+ --sn-metric-value-font: var(--sn-font-mono);
441
+ --sn-metric-success-color: var(--sn-success-color);
442
+ --sn-metric-warning-color: var(--sn-warning-color);
443
+ --sn-metric-error-color: var(--sn-danger-color);
444
+ --sn-data-table-bg: var(--sn-node-bg);
445
+ --sn-data-table-border: var(--sn-node-border);
446
+ --sn-data-table-radius: calc(8px * var(--sn-theme-radius-scale));
447
+ --sn-data-table-color: var(--sn-text);
448
+ --sn-data-table-header-bg: var(--sn-panel-bg);
449
+ --sn-data-table-header-color: var(--sn-text-dim);
450
+ --sn-data-table-header-border: var(--sn-node-border);
451
+ --sn-data-table-header-size: 11px;
452
+ --sn-data-table-header-weight: 500;
453
+ --sn-data-table-header-transform: uppercase;
454
+ --sn-data-table-row-border: var(--sn-node-hover);
455
+ --sn-data-table-cell-padding: 12px 15px;
456
+ --sn-data-table-cell-size: 13px;
457
+ --sn-data-table-cell-gap: 10px;
458
+ --sn-data-table-line-height: 1.4;
459
+ --sn-data-table-min-width: 0;
460
+ --sn-data-table-marker-size: 12px;
461
+ --sn-data-table-marker-radius: 50%;
462
+ --sn-data-table-empty-padding: 12px 15px;
463
+ --sn-data-table-empty-color: var(--sn-text-dim);
464
+ --sn-list-item-bg: transparent;
465
+ --sn-list-item-hover-bg: var(--sn-node-hover);
466
+ --sn-list-item-active-bg: var(--sn-accent-bg-subtle);
467
+ --sn-list-item-active-border: var(--sn-node-selected);
468
+ --sn-list-item-focus-border: var(--sn-node-selected);
469
+ --sn-list-item-radius: calc(4px * var(--sn-theme-radius-scale));
470
+ --sn-list-item-gap: 10px;
471
+ --sn-list-item-min-height: 34px;
472
+ --sn-list-item-padding: 8px 10px;
473
+ --sn-list-item-disabled-color: var(--sn-text-dim);
474
+ --sn-list-item-icon-size: 18px;
475
+ --sn-list-item-icon-color: var(--sn-text-dim);
476
+ --sn-list-item-icon-font-size: 16px;
477
+ --sn-list-item-label-color: var(--sn-text);
478
+ --sn-list-item-label-size: 12px;
479
+ --sn-list-item-label-weight: 500;
480
+ --sn-list-item-description-color: var(--sn-text-dim);
481
+ --sn-list-item-description-size: 11px;
482
+ --sn-list-item-meta-max-width: 38%;
483
+ --sn-list-item-meta-color: var(--sn-text-dim);
484
+ --sn-list-item-meta-size: 10px;
485
+ --sn-list-detail-bg: var(--sn-panel-bg);
486
+ --sn-list-detail-border: var(--sn-node-border);
487
+ --sn-list-detail-radius: var(--sn-card-radius);
488
+ --sn-list-detail-sidebar-width: minmax(220px, 30%);
489
+ --sn-list-detail-min-height: 0;
490
+ --sn-list-detail-height: 100%;
491
+ --sn-list-detail-color: var(--sn-text);
492
+ --sn-list-detail-sidebar-bg: var(--sn-node-bg);
493
+ --sn-list-detail-main-bg: transparent;
494
+ --sn-list-detail-header-bg: transparent;
495
+ --sn-list-detail-header-gap: 8px;
496
+ --sn-list-detail-header-min-height: 42px;
497
+ --sn-list-detail-header-padding: 10px 12px;
498
+ --sn-list-detail-icon-color: var(--sn-text-dim);
499
+ --sn-list-detail-icon-size: 18px;
500
+ --sn-list-detail-main-padding: 12px;
501
+ --sn-list-detail-list-padding: 8px;
502
+ --sn-list-detail-empty-padding: 12px;
503
+ --sn-list-detail-title-size: 12px;
504
+ --sn-list-detail-title-color: var(--sn-text);
505
+ --sn-list-detail-title-weight: 600;
506
+ --sn-list-detail-title-transform: uppercase;
507
+ --sn-list-detail-description-color: var(--sn-text-dim);
508
+ --sn-list-detail-description-size: 11px;
509
+ --sn-composer-bg: hsl(0 0% 20%);
510
+ --sn-composer-border: var(--sn-node-border);
511
+ --sn-composer-action-bg: var(--sn-node-hover);
512
+ --sn-composer-radius: calc(20px * var(--sn-theme-radius-scale));
513
+ --sn-composer-send-size: 32px;
514
+ --sn-composer-send-icon-size: 18px;
515
+ --sn-composer-send-hover-bg: var(--sn-tabs-accent);
516
+ --sn-composer-footer-icon-size: 12px;
517
+ --sn-composer-footer-toggle-icon-size: 18px;
518
+ --sn-composer-collapsed-control-width: 10px;
519
+ --sn-composer-collapsed-control-padding: 10px;
520
+ --sn-composer-control-gap: 8px;
521
+ --sn-composer-padding: 12px 20px 16px;
522
+ --sn-composer-body-padding: 8px 8px 8px 16px;
523
+ --sn-composer-input-min-height: 20px;
524
+ --sn-chat-bg: transparent;
525
+ --sn-chat-gap: 8px;
526
+ --sn-chat-message-bg: hsl(0 0% 20%);
527
+ --sn-chat-user-message-bg: var(--sn-composer-bg);
528
+ --sn-chat-agent-message-bg: var(--sn-node-bg);
529
+ --sn-chat-message-radius: 8px;
530
+ --sn-chat-transcript-padding: 24px 20px 12px;
531
+ --sn-chat-scroll-bottom: 92px;
532
+ --sn-chat-item-icon-color: currentColor;
533
+ --sn-chat-item-child-shadow: 2px 0 4px color-mix(in srgb, var(--sn-bg) 70%, transparent);
534
+ --sn-chat-live-icon-size: 14px;
535
+ --sn-chat-meta-icon-size: 12px;
536
+ --sn-chat-status-icon-size: 12px;
537
+ --sn-chat-tool-icon-size: 14px;
538
+ --sn-chat-summary-icon-size: 16px;
539
+ --sn-output-preview-gap: 8px;
540
+ --sn-output-preview-padding: 10px;
541
+ --sn-output-preview-border: var(--sn-border);
542
+ --sn-output-preview-radius: calc(6px * var(--sn-theme-radius-scale));
543
+ --sn-output-preview-bg: var(--sn-surface);
544
+ --sn-output-preview-muted: var(--sn-text-dim);
545
+ --sn-output-preview-title: var(--sn-text);
546
+ --sn-output-preview-label: var(--sn-text);
547
+ --sn-output-preview-canvas-radius: calc(5px * var(--sn-theme-radius-scale));
548
+ --sn-output-preview-grid: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.04);
549
+ --sn-output-preview-item-border: var(--sn-border);
550
+ --sn-output-preview-item-radius: calc(5px * var(--sn-theme-radius-scale));
551
+ --sn-output-preview-item-bg: var(--sn-node-bg);
552
+ --sn-output-preview-edge-bg: var(--sn-node-hover);
553
+ --sn-sidebar-width: 220px;
554
+ --sn-sidebar-collapsed-width: 48px;
555
+ --sn-sidebar-resize-width: 5px;
556
+ --sn-sidebar-resize-offset: 2px;
557
+ --sn-source-bg: var(--sn-bg);
558
+ --sn-source-header-bg: var(--sn-node-header-bg);
559
+ --sn-source-border: var(--sn-node-border);
560
+ --sn-source-toolbar-gap: 8px;
561
+ --sn-source-action-bg: var(--sn-bg);
562
+ --sn-source-action-hover-bg: var(--sn-node-hover);
563
+ --sn-source-action-radius: calc(4px * var(--sn-theme-radius-scale));
564
+ --sn-source-action-icon-size: 14px;
565
+ --sn-source-editor-bg: var(--sn-bg);
566
+ --sn-editor-bg: var(--sn-source-editor-bg);
567
+ --sn-source-editor-color: var(--sn-text);
568
+ --sn-editor-text: var(--sn-source-editor-color);
569
+ --sn-editor-border: var(--sn-node-border);
570
+ --sn-editor-radius: 0;
571
+ --sn-editor-font: var(--sn-font-mono);
572
+ --sn-source-editor-padding: 14px 16px;
573
+ --sn-source-editor-font-size: 12px;
574
+ --sn-source-editor-line-height: 1.6;
575
+ --sn-source-editor-tab-size: 2;
576
+ --sn-source-editor-placeholder-color: var(--sn-text-dim);
577
+ --sn-syntax-keyword: hsl(var(--sn-hue-danger) var(--sn-sat-vivid) 82%);
578
+ --sn-syntax-string: hsl(var(--sn-hue-warning) var(--sn-sat-vivid) 65%);
579
+ --sn-syntax-comment: var(--sn-text-dim);
580
+ --sn-syntax-function: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) 84%);
581
+ --sn-syntax-number: var(--sn-syntax-string);
582
+ --sn-syntax-builtin: var(--sn-syntax-function);
583
+ --sn-syntax-property: hsl(var(--sn-hue-data) var(--sn-sat-vivid) 78%);
584
+ --sn-syntax-literal: var(--sn-syntax-keyword);
585
+ --sn-syntax-doc: hsl(var(--sn-hue-success) 22% 56%);
586
+ --sn-syntax-doc-tag: hsl(var(--sn-hue-success) 50% 70%);
587
+ --sn-syntax-doc-type: hsl(var(--sn-hue-accent) 72% 72%);
588
+ --sn-syntax-template: hsl(var(--sn-hue-warning) 44% 64%);
589
+ --sn-syntax-template-tag: hsl(var(--sn-hue-accent) 48% 58%);
590
+ --sn-syntax-template-attr: hsl(var(--sn-hue-accent) var(--sn-sat-vivid) 80%);
591
+ --sn-syntax-template-bracket: var(--sn-text-dim);
592
+ --sn-syntax-template-interpolation: hsl(var(--sn-hue-warning) 50% 76%);
593
+ --sn-syntax-template-selector: hsl(var(--sn-hue-warning) 56% 68%);
594
+ --sn-syntax-template-property: var(--sn-syntax-template-attr);
595
+ --sn-syntax-template-value: var(--sn-syntax-template);
596
+ --sn-diagnostic-error-bg: color-mix(in srgb, var(--sn-danger-color) 7%, transparent);
597
+ --sn-diagnostic-error-border: color-mix(in srgb, var(--sn-danger-color) 55%, transparent);
598
+ --sn-diagnostic-warning-bg: color-mix(in srgb, var(--sn-warning-color) 5%, transparent);
599
+ --sn-diagnostic-warning-border: color-mix(in srgb, var(--sn-warning-color) 45%, transparent);
600
+ --sn-loading-overlay-bg: var(--sn-bg);
601
+ --sn-loading-bg: var(--sn-loading-overlay-bg);
602
+ --sn-loading-text: var(--sn-text-dim);
603
+ --sn-loading-accent: var(--sn-node-selected);
604
+ --sn-loading-radius: 2px;
605
+ --sn-loading-overlay-z: 500;
606
+ --sn-loading-overlay-gap: 16px;
607
+ --sn-loading-label-color: var(--sn-text-dim);
608
+ --sn-loading-label-size: 11px;
609
+ --sn-loading-phase-color: var(--sn-node-selected);
610
+ --sn-loading-phase-size: 10px;
611
+ --sn-loading-track-bg: hsl(var(--sn-hue-base) var(--sn-sat-muted) var(--sn-lit-text) / 0.08);
612
+ --sn-loading-track-width: 200px;
613
+ --sn-loading-track-height: 2px;
614
+ --sn-loading-bar-bg: var(--sn-node-selected);
615
+ --sn-loading-bar-shadow: 0 0 8px color-mix(in srgb, var(--sn-node-selected) 45%, transparent);
616
+ --sn-loading-track-radius: 2px;
617
+ --sn-loading-sub-color: var(--sn-text-dim);
618
+ --sn-loading-sub-size: 9px;
619
+ --sn-effect-hover-transition: background-color calc(120ms * var(--sn-theme-motion-scale)) ease, border-color calc(120ms * var(--sn-theme-motion-scale)) ease;
620
+ --sn-effect-focus-ring: 0 0 0 2px hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.35);
621
+ --sn-effect-drag-shadow: 0 14px calc(32px * var(--sn-theme-elevation-scale)) hsl(var(--sn-hue-base) var(--sn-sat-muted) 0% / 0.35);
622
+ --sn-effect-loading-pulse: linear-gradient(90deg, transparent, hsl(var(--sn-hue-accent) var(--sn-sat-vivid) var(--sn-lit-accent) / 0.6), transparent);
623
+ --sn-shape-fill: var(--sn-node-bg);
624
+ --sn-shape-stroke: var(--sn-node-border);
625
+ --sn-shape-stroke-width: 0.4;
626
+ --sn-frame-border-width: 2px;
627
+ --sn-frame-border-style: solid;
628
+ --sn-frame-radius: calc(12px * var(--sn-theme-radius-scale));
629
+ --sn-frame-font: var(--sn-font);
630
+ --sn-frame-font-size: 13px;
631
+ --bg-level-2: var(--sn-node-bg);
632
+ --border-color: var(--sn-node-border);
633
+ --text-color: var(--sn-text);
634
+ --text-color-muted: var(--sn-text-dim);
635
+ }