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/chat/ChatSidebarItem/ChatSidebarItem.css.js ADDED
@@ -0,0 +1,445 @@
1
+ export default `
2
+ :host,
3
+ chat-sidebar-item,
4
+ chat-sidebar-sub-item {
5
+ display: block;
6
+ --sn-chat-compact-label-width: clamp(72px, calc(var(--sn-chat-compact-label-ch, 18) * 5px + 20px), 320px);
7
+ --sn-chat-compact-delete-width: 44px;
8
+ --sn-chat-compact-flyout-width: calc(var(--sn-chat-compact-label-width) + var(--sn-chat-compact-delete-width));
9
+ }
10
+
11
+ .chat-item {
12
+ display: flex;
13
+ align-items: center;
14
+ gap: 10px;
15
+ padding: 6px 14px;
16
+ min-height: 28px;
17
+ cursor: pointer;
18
+ color: var(--sn-text-dim);
19
+ transition: background 0.12s, color 0.12s;
20
+ white-space: nowrap;
21
+ overflow: hidden;
22
+ }
23
+
24
+ .chat-item:hover {
25
+ background: var(--sn-node-hover);
26
+ color: var(--sn-text);
27
+ }
28
+
29
+ :host([data-active]) > .chat-item,
30
+ :host([data-active]) > .chat-item-child,
31
+ chat-sidebar-item[data-active] > .chat-item,
32
+ chat-sidebar-sub-item[data-active] > .chat-item-child {
33
+ color: var(--sn-text);
34
+ background: color-mix(in srgb, var(--sn-chat-item-icon-color, var(--sn-cat-server)) 14%, var(--sn-node-hover));
35
+ border-left: 2px solid var(--sn-chat-item-icon-color, var(--sn-cat-server));
36
+ padding-left: 12px;
37
+ }
38
+
39
+ :host([data-group]) > .chat-item,
40
+ chat-sidebar-item[data-group] > .chat-item {
41
+ color: var(--sn-text);
42
+ font-weight: 600;
43
+ }
44
+
45
+ .chat-nav[data-group-dividers] chat-sidebar-item[data-group] + chat-sidebar-item[data-group] {
46
+ position: relative;
47
+ margin-block-start: 4px;
48
+ padding-block-start: 4px;
49
+ }
50
+
51
+ .chat-nav[data-group-dividers] chat-sidebar-item[data-group] + chat-sidebar-item[data-group]::before {
52
+ content: '';
53
+ position: absolute;
54
+ inset-block-start: 0;
55
+ inset-inline-start: 16px;
56
+ inline-size: 16px;
57
+ block-size: 1px;
58
+ background: var(--sn-tabs-divider);
59
+ }
60
+
61
+ :host([data-group]) > .chat-item .chat-item-label,
62
+ chat-sidebar-item[data-group] > .chat-item .chat-item-label {
63
+ color: var(--sn-text);
64
+ }
65
+
66
+ :host([data-group]) > .chat-item .chat-item-delete,
67
+ chat-sidebar-item[data-group] > .chat-item .chat-item-delete {
68
+ display: none;
69
+ }
70
+
71
+ .chat-item .material-symbols-outlined,
72
+ .chat-item-child .material-symbols-outlined {
73
+ font-size: 16px;
74
+ flex-shrink: 0;
75
+ }
76
+
77
+ .chat-item-icon-slot {
78
+ position: relative;
79
+ width: 16px;
80
+ height: 16px;
81
+ flex: 0 0 16px;
82
+ display: inline-flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ }
86
+
87
+ .chat-item-icon {
88
+ color: var(--sn-chat-item-icon-color);
89
+ transition: opacity 0.12s;
90
+ }
91
+
92
+ .chat-item-label {
93
+ font-size: 11px;
94
+ flex: 1;
95
+ overflow: hidden;
96
+ text-overflow: ellipsis;
97
+ white-space: nowrap;
98
+ color: var(--sn-text);
99
+ }
100
+
101
+ .chat-status-icon {
102
+ margin-left: 4px;
103
+ font-size: var(--sn-chat-status-icon-size);
104
+ }
105
+
106
+ .chat-status-icon[hidden] {
107
+ display: none;
108
+ }
109
+
110
+ .chat-status-icon[data-status="running"] {
111
+ color: var(--sn-node-selected);
112
+ }
113
+
114
+ .chat-status-icon[data-status="running"] {
115
+ animation: spin 1s linear infinite;
116
+ }
117
+
118
+ .chat-status-icon[data-status="done"] {
119
+ color: var(--sn-success-color);
120
+ }
121
+
122
+ .chat-status-icon[data-status="error"] {
123
+ color: var(--sn-danger-color);
124
+ }
125
+
126
+ @keyframes spin {
127
+ 100% { transform: rotate(360deg); }
128
+ }
129
+
130
+ .chat-item-adapter {
131
+ font-size: 9px;
132
+ color: var(--sn-text-dim);
133
+ font-family: var(--sn-font-mono, monospace);
134
+ margin-left: 6px;
135
+ }
136
+
137
+ .chat-item-adapter:empty,
138
+ .chat-item-type:empty {
139
+ display: none;
140
+ }
141
+
142
+ .chat-item-type {
143
+ font-size: 9px;
144
+ color: var(--sn-cat-server);
145
+ background: color-mix(in srgb, var(--sn-cat-server) 10%, transparent);
146
+ font-family: var(--sn-font-mono, monospace);
147
+ margin-left: auto;
148
+ padding: 2px 4px;
149
+ border-radius: 3px;
150
+ text-transform: uppercase;
151
+ letter-spacing: 0.5px;
152
+ }
153
+
154
+ .chat-item-delete {
155
+ position: absolute;
156
+ inset: 0;
157
+ display: flex;
158
+ width: 16px;
159
+ height: 16px;
160
+ border: none;
161
+ background: transparent;
162
+ color: var(--sn-text-dim);
163
+ cursor: pointer;
164
+ font-size: 14px;
165
+ padding: 0;
166
+ align-items: center;
167
+ justify-content: center;
168
+ border-radius: 3px;
169
+ margin: 0;
170
+ opacity: 0;
171
+ pointer-events: none;
172
+ transition: color 0.12s, opacity 0.12s;
173
+ }
174
+
175
+ .chat-item-delete .material-symbols-outlined {
176
+ font-size: 15px;
177
+ }
178
+
179
+ .chat-item:hover .chat-item-icon,
180
+ .chat-item-child:hover .chat-item-icon {
181
+ opacity: 0;
182
+ }
183
+
184
+ .chat-item:hover .chat-item-delete,
185
+ .chat-item:has(.chat-item-delete:hover) .chat-item-delete,
186
+ .chat-item:has(.chat-item-delete:focus-visible) .chat-item-delete,
187
+ .chat-item-child:hover .chat-item-delete,
188
+ .chat-item-child:has(.chat-item-delete:hover) .chat-item-delete,
189
+ .chat-item-child:has(.chat-item-delete:focus-visible) .chat-item-delete {
190
+ opacity: 1;
191
+ pointer-events: auto;
192
+ }
193
+
194
+ .chat-item-delete:hover {
195
+ opacity: 1;
196
+ pointer-events: auto;
197
+ color: var(--sn-danger-color);
198
+ }
199
+
200
+ .chat-expand-icon {
201
+ margin-left: auto;
202
+ font-size: 14px !important;
203
+ transition: transform 0.15s ease, opacity 0.15s ease;
204
+ cursor: pointer;
205
+ flex-shrink: 0;
206
+ opacity: 0.2;
207
+ }
208
+
209
+ :host([data-has-sub]) .chat-expand-icon,
210
+ chat-sidebar-item[data-has-sub] > .chat-item .chat-expand-icon,
211
+ chat-sidebar-sub-item[data-has-sub] > .chat-item-child .chat-expand-icon {
212
+ opacity: 0.5;
213
+ }
214
+
215
+ :host([data-has-sub]) .chat-expand-icon:hover,
216
+ chat-sidebar-item[data-has-sub] > .chat-item .chat-expand-icon:hover,
217
+ chat-sidebar-sub-item[data-has-sub] > .chat-item-child .chat-expand-icon:hover {
218
+ opacity: 1;
219
+ }
220
+
221
+ :host([data-expanded]) .chat-expand-icon,
222
+ chat-sidebar-item[data-expanded] > .chat-item .chat-expand-icon,
223
+ chat-sidebar-sub-item[data-expanded] > .chat-item-child .chat-expand-icon {
224
+ transform: rotate(90deg);
225
+ }
226
+
227
+ .chat-sub-items {
228
+ width: 100%;
229
+ max-height: 0;
230
+ overflow: hidden;
231
+ transition: max-height 0.2s ease;
232
+ }
233
+
234
+ :host([data-expanded]) .chat-sub-items,
235
+ chat-sidebar-item[data-expanded] > .chat-sub-items,
236
+ chat-sidebar-sub-item[data-expanded] > .chat-sub-items {
237
+ max-height: 500px;
238
+ }
239
+
240
+ .chat-item-child {
241
+ display: flex;
242
+ align-items: center;
243
+ gap: 8px;
244
+ padding: 4px 14px 4px 38px;
245
+ font-size: 12px;
246
+ min-height: 24px;
247
+ position: relative;
248
+ color: var(--sn-text-dim);
249
+ cursor: pointer;
250
+ transition: background 0.12s, color 0.12s;
251
+ }
252
+
253
+ .chat-item-child:hover {
254
+ background: var(--sn-node-hover);
255
+ color: var(--sn-text);
256
+ }
257
+
258
+ .chat-item-child::before {
259
+ content: '';
260
+ position: absolute;
261
+ left: 20px;
262
+ top: 0;
263
+ bottom: 0;
264
+ width: 1px;
265
+ background: var(--sn-node-hover);
266
+ }
267
+
268
+ chat-sidebar-sub-item .chat-sub-items chat-sidebar-sub-item .chat-item-child {
269
+ padding-left: 58px;
270
+ }
271
+
272
+ :host([data-active]) > .chat-item-child,
273
+ chat-sidebar-sub-item[data-active] > .chat-item-child {
274
+ padding-left: 36px;
275
+ }
276
+
277
+ chat-sidebar-sub-item .chat-sub-items chat-sidebar-sub-item[data-active] > .chat-item-child {
278
+ padding-left: 56px;
279
+ }
280
+
281
+ chat-sidebar-sub-item .chat-sub-items chat-sidebar-sub-item .chat-item-child::before {
282
+ left: 40px;
283
+ }
284
+
285
+ :host-context(.chat-nav[collapsed]) .chat-item-child::before,
286
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child::before {
287
+ content: none;
288
+ }
289
+
290
+ :host-context(.chat-nav[collapsed]) .chat-sub-items,
291
+ .chat-nav[collapsed] chat-sidebar-item .chat-sub-items,
292
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-sub-items {
293
+ display: none;
294
+ max-height: 0;
295
+ }
296
+
297
+ .chat-nav[collapsed] chat-sidebar-item[data-expanded] > .chat-sub-items,
298
+ .chat-nav[collapsed] chat-sidebar-sub-item[data-expanded] > .chat-sub-items {
299
+ display: block;
300
+ max-height: 500px;
301
+ overflow: visible;
302
+ }
303
+
304
+ :host-context(.chat-nav[collapsed]) .chat-item-adapter,
305
+ :host-context(.chat-nav[collapsed]) .chat-expand-icon,
306
+ :host-context(.chat-nav[collapsed]) .chat-status-icon,
307
+ :host-context(.chat-nav[collapsed]) .chat-item-type,
308
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-adapter,
309
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-adapter,
310
+ .chat-nav[collapsed] chat-sidebar-item .chat-expand-icon,
311
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-expand-icon,
312
+ .chat-nav[collapsed] chat-sidebar-item .chat-status-icon,
313
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-status-icon,
314
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-type {
315
+ display: none;
316
+ }
317
+
318
+ :host-context(.chat-nav[collapsed]) .chat-item,
319
+ :host-context(.chat-nav[collapsed]) .chat-item-child,
320
+ .chat-nav[collapsed] chat-sidebar-item .chat-item,
321
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child {
322
+ position: relative;
323
+ justify-content: center;
324
+ padding: 0;
325
+ overflow: visible;
326
+ }
327
+
328
+ :host-context(.chat-nav[collapsed]) .chat-item:hover,
329
+ :host-context(.chat-nav[collapsed]) .chat-item:focus-within,
330
+ :host-context(.chat-nav[collapsed]) .chat-item:has(.chat-item-delete:hover),
331
+ :host-context(.chat-nav[collapsed]) .chat-item:has(.chat-item-delete:focus-visible),
332
+ :host-context(.chat-nav[collapsed]) .chat-item-child:hover,
333
+ :host-context(.chat-nav[collapsed]) .chat-item-child:focus-within,
334
+ :host-context(.chat-nav[collapsed]) .chat-item-child:has(.chat-item-delete:hover),
335
+ :host-context(.chat-nav[collapsed]) .chat-item-child:has(.chat-item-delete:focus-visible),
336
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:hover,
337
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:focus-within,
338
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:has(.chat-item-delete:hover),
339
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:has(.chat-item-delete:focus-visible),
340
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:hover,
341
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:focus-within,
342
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:has(.chat-item-delete:hover),
343
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:has(.chat-item-delete:focus-visible),
344
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:hover,
345
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:focus-within,
346
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:has(.chat-item-delete:hover),
347
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:has(.chat-item-delete:focus-visible) {
348
+ z-index: 30;
349
+ }
350
+
351
+ :host-context(.chat-nav[collapsed]) .chat-item-label,
352
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-label,
353
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-label {
354
+ position: absolute;
355
+ inset-block: 0;
356
+ inset-inline-start: 46px;
357
+ inline-size: var(--sn-chat-compact-label-width);
358
+ display: flex;
359
+ align-items: center;
360
+ padding-inline: 10px 0;
361
+ background: var(--sn-node-bg);
362
+ color: var(--sn-text);
363
+ box-shadow: var(--sn-chat-item-child-shadow);
364
+ z-index: 29;
365
+ opacity: 0;
366
+ pointer-events: none;
367
+ transform: translateX(-4px);
368
+ transition: opacity 0.12s, transform 0.12s;
369
+ }
370
+
371
+ :host-context(.chat-nav[collapsed]) .chat-item:hover .chat-item-label,
372
+ :host-context(.chat-nav[collapsed]) .chat-item:focus-within .chat-item-label,
373
+ :host-context(.chat-nav[collapsed]) .chat-item:has(.chat-item-delete:hover) .chat-item-label,
374
+ :host-context(.chat-nav[collapsed]) .chat-item:has(.chat-item-delete:focus-visible) .chat-item-label,
375
+ :host-context(.chat-nav[collapsed]) .chat-item-child:hover .chat-item-label,
376
+ :host-context(.chat-nav[collapsed]) .chat-item-child:focus-within .chat-item-label,
377
+ :host-context(.chat-nav[collapsed]) .chat-item-child:has(.chat-item-delete:hover) .chat-item-label,
378
+ :host-context(.chat-nav[collapsed]) .chat-item-child:has(.chat-item-delete:focus-visible) .chat-item-label,
379
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:hover .chat-item-label,
380
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:focus-within .chat-item-label,
381
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:has(.chat-item-delete:hover) .chat-item-label,
382
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:has(.chat-item-delete:focus-visible) .chat-item-label,
383
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:hover .chat-item-label,
384
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:focus-within .chat-item-label,
385
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:has(.chat-item-delete:hover) .chat-item-label,
386
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:has(.chat-item-delete:focus-visible) .chat-item-label,
387
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:hover .chat-item-label,
388
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:focus-within .chat-item-label,
389
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:has(.chat-item-delete:hover) .chat-item-label,
390
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:has(.chat-item-delete:focus-visible) .chat-item-label {
391
+ opacity: 1;
392
+ pointer-events: auto;
393
+ transform: translateX(0);
394
+ }
395
+
396
+ :host-context(.chat-nav[collapsed]) .chat-item-icon-slot,
397
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-icon-slot,
398
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-icon-slot {
399
+ position: static;
400
+ }
401
+
402
+ :host-context(.chat-nav[collapsed]) .chat-item:hover .chat-item-icon,
403
+ :host-context(.chat-nav[collapsed]) .chat-item-child:hover .chat-item-icon,
404
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:hover .chat-item-icon,
405
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:hover .chat-item-icon,
406
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:hover .chat-item-icon {
407
+ opacity: 1;
408
+ }
409
+
410
+ :host-context(.chat-nav[collapsed]) .chat-item-delete,
411
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-delete,
412
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-delete {
413
+ inset: 0 auto 0 calc(46px + var(--sn-chat-compact-label-width));
414
+ width: var(--sn-chat-compact-delete-width);
415
+ height: 100%;
416
+ background: var(--sn-node-bg);
417
+ border-radius: 0 4px 4px 0;
418
+ z-index: 31;
419
+ transition: color 0.12s, opacity 0.12s;
420
+ }
421
+
422
+ :host-context(.chat-nav[collapsed]) .chat-item:hover .chat-item-delete,
423
+ :host-context(.chat-nav[collapsed]) .chat-item:focus-within .chat-item-delete,
424
+ :host-context(.chat-nav[collapsed]) .chat-item:has(.chat-item-delete:hover) .chat-item-delete,
425
+ :host-context(.chat-nav[collapsed]) .chat-item:has(.chat-item-delete:focus-visible) .chat-item-delete,
426
+ :host-context(.chat-nav[collapsed]) .chat-item-child:hover .chat-item-delete,
427
+ :host-context(.chat-nav[collapsed]) .chat-item-child:focus-within .chat-item-delete,
428
+ :host-context(.chat-nav[collapsed]) .chat-item-child:has(.chat-item-delete:hover) .chat-item-delete,
429
+ :host-context(.chat-nav[collapsed]) .chat-item-child:has(.chat-item-delete:focus-visible) .chat-item-delete,
430
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:hover .chat-item-delete,
431
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:focus-within .chat-item-delete,
432
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:has(.chat-item-delete:hover) .chat-item-delete,
433
+ .chat-nav[collapsed] chat-sidebar-item .chat-item:has(.chat-item-delete:focus-visible) .chat-item-delete,
434
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:hover .chat-item-delete,
435
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:focus-within .chat-item-delete,
436
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:has(.chat-item-delete:hover) .chat-item-delete,
437
+ .chat-nav[collapsed] chat-sidebar-item .chat-item-child:has(.chat-item-delete:focus-visible) .chat-item-delete,
438
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:hover .chat-item-delete,
439
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:focus-within .chat-item-delete,
440
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:has(.chat-item-delete:hover) .chat-item-delete,
441
+ .chat-nav[collapsed] chat-sidebar-sub-item .chat-item-child:has(.chat-item-delete:focus-visible) .chat-item-delete {
442
+ opacity: 1;
443
+ pointer-events: auto;
444
+ }
445
+ `;