@likec4/diagram 1.30.0 → 1.32.0

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 (403) hide show
  1. package/README.md +324 -5
  2. package/bundle/chunk-BvTQaUYl.js +21851 -0
  3. package/bundle/custom.js +65 -0
  4. package/bundle/index.js +19910 -40570
  5. package/dist/LikeC4CustomColors.d.ts +2 -7
  6. package/dist/LikeC4CustomColors.js +17 -6
  7. package/dist/LikeC4Diagram.d.ts +3 -2
  8. package/dist/LikeC4Diagram.js +14 -16
  9. package/dist/LikeC4Diagram.props.d.ts +34 -23
  10. package/dist/LikeC4ModelProvider.d.ts +5 -4
  11. package/dist/LikeC4ModelProvider.js +0 -1
  12. package/dist/StaticLikeC4Diagram.d.ts +3 -2
  13. package/dist/StaticLikeC4Diagram.js +2 -2
  14. package/dist/base/BaseXYFlow.js +8 -8
  15. package/dist/base/const.d.ts +1 -1
  16. package/dist/base/const.js +1 -1
  17. package/dist/base/index.d.ts +2 -1
  18. package/dist/base/primitives/compound/CompoundActionButton.d.ts +3 -2
  19. package/dist/base/primitives/compound/CompoundActionButton.js +2 -1
  20. package/dist/base/primitives/compound/CompoundDetailsButton.d.ts +3 -2
  21. package/dist/base/primitives/compound/CompoundDetailsButton.js +2 -1
  22. package/dist/base/primitives/compound/CompoundNodeContainer.d.ts +7 -3
  23. package/dist/base/primitives/compound/CompoundNodeContainer.js +3 -2
  24. package/dist/base/primitives/compound/CompoundTitle.d.ts +1 -1
  25. package/dist/base/primitives/compound/CompoundTitle.js +2 -1
  26. package/dist/base/primitives/customEdge.d.ts +2 -35
  27. package/dist/base/primitives/customEdge.js +2 -2
  28. package/dist/base/primitives/customNode.d.ts +2 -2
  29. package/dist/base/primitives/customNode.js +9 -2
  30. package/dist/base/primitives/edge/EdgeContainer.d.ts +1 -1
  31. package/dist/base/primitives/edge/EdgeContainer.js +0 -1
  32. package/dist/base/primitives/edge/EdgeLabel.css.js +1 -0
  33. package/dist/base/primitives/edge/EdgeLabel.d.ts +3 -3
  34. package/dist/base/primitives/edge/EdgeLabel.js +6 -5
  35. package/dist/base/primitives/edge/EdgeLabelContainer.d.ts +1 -1
  36. package/dist/base/primitives/edge/EdgeLabelContainer.js +0 -2
  37. package/dist/base/primitives/edge/EdgeMarkers.d.ts +1 -1
  38. package/dist/base/primitives/edge/EdgePath.d.ts +1 -1
  39. package/dist/base/primitives/edge/EdgePath.js +2 -2
  40. package/dist/base/primitives/element/ElementActionButtons.js +10 -9
  41. package/dist/base/primitives/element/ElementDetailsButton.js +2 -1
  42. package/dist/base/primitives/element/ElementNodeContainer.d.ts +24 -22
  43. package/dist/base/primitives/element/ElementNodeContainer.js +66 -68
  44. package/dist/base/primitives/element/ElementShape.d.ts +8 -4
  45. package/dist/base/primitives/element/ElementShape.js +4 -3
  46. package/dist/base/primitives/element/ElementTags.d.ts +14 -0
  47. package/dist/base/primitives/element/ElementTags.js +176 -0
  48. package/dist/base/primitives/element/ElementTitle.css.d.ts +1 -1
  49. package/dist/base/primitives/element/ElementTitle.d.ts +5 -4
  50. package/dist/base/primitives/element/ElementTitle.js +6 -7
  51. package/dist/base/primitives/index.d.ts +1 -0
  52. package/dist/base/types.Base.d.ts +54 -0
  53. package/dist/base/types.Base.js +48 -0
  54. package/dist/base/types.d.ts +3 -53
  55. package/dist/bundle/LikeC4View.d.ts +2 -1
  56. package/dist/bundle/LikeC4View.js +13 -8
  57. package/dist/bundle/LikeC4View.props.d.ts +20 -5
  58. package/dist/bundle/ReactLikeC4.d.ts +4 -7
  59. package/dist/bundle/ReactLikeC4.js +4 -4
  60. package/dist/bundle/ShadowRoot.js +3 -3
  61. package/dist/bundle/custom.d.ts +1 -0
  62. package/dist/bundle/index.d.ts +3 -1
  63. package/dist/bundle/index.js +9 -0
  64. package/dist/bundle/styles.css.js +5 -5
  65. package/dist/components/ErrorFallback.d.ts +2 -0
  66. package/dist/components/ErrorFallback.js +29 -0
  67. package/dist/components/SearchControl.js +2 -2
  68. package/dist/context/ControlsCustomLayout.js +0 -1
  69. package/dist/context/DiagramEventHandlers.d.ts +6 -5
  70. package/dist/context/DiagramEventHandlers.js +5 -5
  71. package/dist/context/DiagramFeatures.d.ts +3 -5
  72. package/dist/context/DiagramFeatures.js +11 -40
  73. package/dist/context/EnsureMantine.js +9 -4
  74. package/dist/context/FramerMotionConfig.js +0 -1
  75. package/dist/context/IconRenderer.js +8 -11
  76. package/dist/context/ReduceGraphics.js +6 -6
  77. package/dist/context/RootContainer.js +10 -6
  78. package/dist/context/TagStylesContext.d.ts +7 -0
  79. package/dist/context/TagStylesContext.js +85 -0
  80. package/dist/context/index.d.ts +1 -1
  81. package/dist/custom/components.d.ts +5 -0
  82. package/dist/custom/customNodes.d.ts +228 -0
  83. package/dist/custom/hooks.d.ts +10 -0
  84. package/dist/custom/index.d.ts +4 -0
  85. package/dist/hooks/index.d.ts +1 -1
  86. package/dist/hooks/safeContext.js +3 -3
  87. package/dist/hooks/useCurrentViewId.d.ts +5 -1
  88. package/dist/hooks/useCurrentViewId.js +1 -2
  89. package/dist/hooks/useDiagram.d.ts +77 -12572
  90. package/dist/hooks/useDiagram.js +9 -7
  91. package/dist/hooks/useMantinePortalProps.d.ts +2 -2
  92. package/dist/hooks/useMantinePortalProps.js +2 -2
  93. package/dist/hooks/useSearchActor.d.ts +2 -0
  94. package/dist/hooks/useSearchActor.js +10 -0
  95. package/dist/hooks/useSetState.js +3 -3
  96. package/dist/hooks/useUpdateEffect.js +3 -1
  97. package/dist/hooks/useXYFlow.d.ts +75 -73
  98. package/dist/hooks/useXYFlow.js +7 -3
  99. package/dist/index.d.ts +2 -4
  100. package/dist/index.js +8 -3
  101. package/dist/likec4diagram/DiagramUI.js +9 -4
  102. package/dist/likec4diagram/DiagramXYFlow.d.ts +4 -3
  103. package/dist/likec4diagram/DiagramXYFlow.js +124 -109
  104. package/dist/likec4diagram/custom/edges/NotePopover.js +2 -2
  105. package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts +12 -15
  106. package/dist/likec4diagram/custom/edges/RelationshipEdge.js +16 -8
  107. package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js +19 -15
  108. package/dist/likec4diagram/custom/index.d.ts +18 -21
  109. package/dist/likec4diagram/custom/index.js +3 -3
  110. package/dist/likec4diagram/custom/nodes/CompoundActions.js +2 -2
  111. package/dist/likec4diagram/custom/nodes/ElementActions.d.ts +27 -4
  112. package/dist/likec4diagram/custom/nodes/ElementActions.js +67 -53
  113. package/dist/likec4diagram/custom/nodes/index.d.ts +8 -0
  114. package/dist/likec4diagram/custom/nodes/nodes.d.ts +10 -0
  115. package/dist/likec4diagram/custom/nodes/nodes.js +105 -0
  116. package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js +2 -2
  117. package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.js +6 -7
  118. package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js +3 -3
  119. package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts +3 -2
  120. package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js +2 -2
  121. package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts +5 -5
  122. package/dist/likec4diagram/custom/nodes/toolbar/_shared.js +2 -2
  123. package/dist/likec4diagram/types.d.ts +18 -10
  124. package/dist/likec4diagram/ui/controls/ChangeAutoLayoutButton.js +4 -4
  125. package/dist/likec4diagram/ui/controls/Controls.js +14 -6
  126. package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js +2 -2
  127. package/dist/likec4diagram/ui/notation/NotationPanel.js +7 -9
  128. package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js +4 -4
  129. package/dist/likec4diagram/useLayoutConstraints.js +3 -4
  130. package/dist/likec4diagram/useViewToNodesEdges.d.ts +5 -3
  131. package/dist/likec4diagram/useViewToNodesEdges.js +22 -30
  132. package/dist/likec4model/LikeC4ModelContext.d.ts +2 -2
  133. package/dist/likec4model/LikeC4ModelContext.js +2 -2
  134. package/dist/likec4model/useLikeC4ElementsTree.d.ts +1 -1
  135. package/dist/likec4model/useLikeC4ElementsTree.js +4 -4
  136. package/dist/likec4model/useLikeC4Model.d.ts +22 -10
  137. package/dist/likec4model/useLikeC4Model.js +13 -9
  138. package/dist/overlays/Overlays.d.ts +2 -3
  139. package/dist/overlays/Overlays.js +9 -33
  140. package/dist/overlays/element-details/ElementDetailsCard.css.js +13 -9
  141. package/dist/overlays/element-details/ElementDetailsCard.d.ts +1 -1
  142. package/dist/overlays/element-details/ElementDetailsCard.js +110 -110
  143. package/dist/overlays/element-details/TabPanelDeployments.d.ts +1 -1
  144. package/dist/overlays/element-details/TabPanelDeployments.js +5 -5
  145. package/dist/overlays/element-details/TabPanelRelationships.d.ts +1 -1
  146. package/dist/overlays/element-details/TabPanelRelationships.js +2 -2
  147. package/dist/overlays/element-details/TabPanelStructure.d.ts +1 -1
  148. package/dist/overlays/element-details/TabPanelStructure.js +3 -3
  149. package/dist/overlays/element-details/actor.d.ts +5482 -18265
  150. package/dist/overlays/element-details/actor.js +0 -2
  151. package/dist/overlays/element-details/actorContext.js +3 -3
  152. package/dist/overlays/overlay/Overlay.css.d.ts +57 -2
  153. package/dist/overlays/overlay/Overlay.css.js +76 -39
  154. package/dist/overlays/overlay/Overlay.d.ts +23 -1
  155. package/dist/overlays/overlay/Overlay.js +40 -29
  156. package/dist/overlays/overlaysActor.d.ts +5 -3
  157. package/dist/overlays/overlaysActor.js +2 -1
  158. package/dist/overlays/relationship-details/RelationshipDetails.d.ts +6 -9
  159. package/dist/overlays/relationship-details/RelationshipDetails.js +15 -15
  160. package/dist/overlays/relationship-details/SelectEdge.js +2 -3
  161. package/dist/overlays/relationship-details/_types.d.ts +7 -6
  162. package/dist/overlays/relationship-details/actor.d.ts +3 -3
  163. package/dist/overlays/relationship-details/actor.js +7 -7
  164. package/dist/overlays/relationship-details/compute.js +3 -3
  165. package/dist/overlays/relationship-details/custom/edgeTypes.d.ts +6 -9
  166. package/dist/overlays/relationship-details/custom/edgeTypes.js +2 -2
  167. package/dist/overlays/relationship-details/custom/nodeTypes.d.ts +3 -31
  168. package/dist/overlays/relationship-details/custom/nodeTypes.js +4 -0
  169. package/dist/overlays/relationship-details/hooks.d.ts +28 -27
  170. package/dist/overlays/relationship-details/hooks.js +4 -4
  171. package/dist/overlays/relationship-details/layout-to-xyflow.js +1 -0
  172. package/dist/overlays/relationship-details/layout.js +5 -4
  173. package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts +6 -9
  174. package/dist/overlays/relationships-browser/RelationshipsBrowser.js +8 -8
  175. package/dist/overlays/relationships-browser/SelectElement.js +6 -6
  176. package/dist/overlays/relationships-browser/_types.d.ts +7 -6
  177. package/dist/overlays/relationships-browser/actor.d.ts +64 -429
  178. package/dist/overlays/relationships-browser/actor.js +7 -7
  179. package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts +6 -9
  180. package/dist/overlays/relationships-browser/custom/edgeTypes.js +2 -2
  181. package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts +17 -18
  182. package/dist/overlays/relationships-browser/custom/nodeTypes.js +5 -2
  183. package/dist/overlays/relationships-browser/hooks.d.ts +4 -61
  184. package/dist/overlays/relationships-browser/hooks.js +4 -4
  185. package/dist/overlays/relationships-browser/layout.d.ts +2 -2
  186. package/dist/overlays/relationships-browser/layout.js +13 -10
  187. package/dist/overlays/relationships-browser/useViewToNodesEdges.js +4 -3
  188. package/dist/search/Search.d.ts +5 -0
  189. package/dist/search/Search.js +192 -0
  190. package/dist/{likec4diagram/ui/search → search/components}/ElementsColumn.css.js +0 -1
  191. package/dist/search/components/ElementsColumn.d.ts +2 -0
  192. package/dist/{likec4diagram/ui/search → search/components}/ElementsColumn.js +26 -25
  193. package/dist/search/components/PickView.d.ts +4 -0
  194. package/dist/search/components/PickView.js +135 -0
  195. package/dist/search/components/SearchByTags.d.ts +1 -0
  196. package/dist/search/components/SearchByTags.js +116 -0
  197. package/dist/search/components/SearchInput.d.ts +2 -0
  198. package/dist/{likec4diagram/ui/search → search/components}/SearchInput.js +53 -35
  199. package/dist/{likec4diagram/ui/search → search/components}/ViewsColum.d.ts +3 -2
  200. package/dist/{likec4diagram/ui/search → search/components}/ViewsColum.js +14 -13
  201. package/dist/search/components/_shared.css.d.ts +4 -0
  202. package/dist/{likec4diagram/ui/search → search/components}/_shared.css.js +26 -35
  203. package/dist/{likec4diagram/ui/search/LikeC4Search.css.d.ts → search/components/styles.css.d.ts} +0 -2
  204. package/dist/search/components/styles.css.js +60 -0
  205. package/dist/{likec4diagram/ui/search → search/components}/utils.d.ts +1 -0
  206. package/dist/{likec4diagram/ui/search → search/components}/utils.js +7 -1
  207. package/dist/search/hooks.d.ts +16 -0
  208. package/dist/search/hooks.js +35 -0
  209. package/dist/search/searchActor.d.ts +90 -0
  210. package/dist/search/searchActor.js +75 -0
  211. package/dist/state/DiagramActorProvider.d.ts +9 -7
  212. package/dist/state/DiagramActorProvider.js +24 -18
  213. package/dist/state/assign.d.ts +0 -1
  214. package/dist/state/assign.js +9 -19
  215. package/dist/state/diagram-machine.d.ts +749 -10678
  216. package/dist/state/diagram-machine.js +121 -55
  217. package/dist/state/hotkeyActor.d.ts +4 -2
  218. package/dist/state/syncManualLayoutActor.d.ts +15 -4
  219. package/dist/state/syncManualLayoutActor.js +2 -1
  220. package/dist/state/types.d.ts +7 -4
  221. package/dist/state/utils.d.ts +3 -1
  222. package/dist/state/utils.js +3 -0
  223. package/dist/styles-font.css +1 -0
  224. package/dist/styles-min.css +1 -0
  225. package/dist/styles-xyflow.css +1 -0
  226. package/dist/styles.css +1 -0
  227. package/dist/styles.css2.js +3 -0
  228. package/package.json +50 -25
  229. package/panda.buildinfo.json +1002 -0
  230. package/src/LikeC4CustomColors.tsx +21 -6
  231. package/src/LikeC4Diagram.props.ts +42 -31
  232. package/src/LikeC4Diagram.tsx +21 -20
  233. package/src/LikeC4ModelProvider.tsx +7 -6
  234. package/src/StaticLikeC4Diagram.tsx +9 -6
  235. package/src/base/Background.tsx +0 -4
  236. package/src/base/const.ts +1 -1
  237. package/src/base/index.ts +2 -1
  238. package/src/base/primitives/compound/CompoundActionButton.tsx +9 -5
  239. package/src/base/primitives/compound/CompoundDetailsButton.tsx +9 -5
  240. package/src/base/primitives/compound/CompoundNodeContainer.tsx +8 -7
  241. package/src/base/primitives/compound/CompoundTitle.tsx +3 -2
  242. package/src/base/primitives/customEdge.ts +1 -1
  243. package/src/base/primitives/{customNode.ts → customNode.tsx} +11 -3
  244. package/src/base/primitives/edge/EdgeContainer.tsx +2 -1
  245. package/src/base/primitives/edge/EdgeLabel.css.ts +1 -0
  246. package/src/base/primitives/edge/EdgeLabel.tsx +20 -15
  247. package/src/base/primitives/edge/EdgeLabelContainer.tsx +1 -1
  248. package/src/base/primitives/edge/EdgeMarkers.tsx +2 -1
  249. package/src/base/primitives/edge/EdgePath.tsx +1 -1
  250. package/src/base/primitives/element/ElementActionButtons.tsx +11 -10
  251. package/src/base/primitives/element/ElementDetailsButton.tsx +2 -1
  252. package/src/base/primitives/element/ElementNodeContainer.tsx +87 -80
  253. package/src/base/primitives/element/ElementShape.tsx +12 -10
  254. package/src/base/primitives/element/ElementTags.tsx +182 -0
  255. package/src/base/primitives/element/ElementTitle.tsx +21 -15
  256. package/src/base/primitives/index.ts +1 -0
  257. package/src/base/types.Base.ts +104 -0
  258. package/src/base/types.ts +4 -106
  259. package/src/bundle/LikeC4View.props.ts +23 -5
  260. package/src/bundle/LikeC4View.tsx +20 -19
  261. package/src/bundle/ReactLikeC4.tsx +15 -27
  262. package/src/bundle/custom.ts +1 -0
  263. package/src/bundle/index.ts +20 -1
  264. package/src/bundle/styles.css.ts +1 -1
  265. package/src/components/ErrorFallback.tsx +30 -0
  266. package/src/components/SearchControl.tsx +1 -1
  267. package/src/context/DiagramEventHandlers.tsx +5 -4
  268. package/src/context/DiagramFeatures.tsx +15 -30
  269. package/src/context/EnsureMantine.tsx +13 -3
  270. package/src/context/IconRenderer.tsx +2 -5
  271. package/src/context/ReduceGraphics.tsx +6 -6
  272. package/src/context/RootContainer.tsx +9 -3
  273. package/src/context/TagStylesContext.tsx +96 -0
  274. package/src/context/index.ts +0 -1
  275. package/src/custom/components.ts +49 -0
  276. package/src/custom/customNodes.tsx +254 -0
  277. package/src/custom/hooks.ts +36 -0
  278. package/src/custom/index.ts +5 -0
  279. package/src/hooks/index.ts +1 -1
  280. package/src/hooks/useCurrentViewId.ts +6 -1
  281. package/src/hooks/useDiagram.ts +131 -18
  282. package/src/hooks/useMantinePortalProps.ts +10 -1
  283. package/src/hooks/useSearchActor.ts +11 -0
  284. package/src/hooks/useUpdateEffect.ts +7 -4
  285. package/src/hooks/useXYFlow.ts +5 -0
  286. package/src/index.ts +4 -8
  287. package/src/likec4diagram/DiagramUI.tsx +5 -0
  288. package/src/likec4diagram/DiagramXYFlow.tsx +135 -115
  289. package/src/likec4diagram/custom/edges/RelationshipEdge.tsx +10 -1
  290. package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx +17 -14
  291. package/src/likec4diagram/custom/{index.tsx → index.ts} +2 -2
  292. package/src/likec4diagram/custom/nodes/CompoundActions.tsx +2 -2
  293. package/src/likec4diagram/custom/nodes/ElementActions.tsx +100 -57
  294. package/src/likec4diagram/custom/nodes/index.ts +17 -0
  295. package/src/likec4diagram/custom/nodes/nodes.tsx +127 -0
  296. package/src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx +3 -4
  297. package/src/likec4diagram/custom/nodes/toolbar/ElementToolbar.tsx +3 -3
  298. package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx +5 -4
  299. package/src/likec4diagram/custom/nodes/toolbar/_shared.tsx +11 -3
  300. package/src/likec4diagram/types.ts +24 -12
  301. package/src/likec4diagram/ui/controls/Controls.tsx +11 -4
  302. package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx +1 -1
  303. package/src/likec4diagram/ui/notation/NotationPanel.tsx +3 -4
  304. package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.tsx +1 -1
  305. package/src/likec4diagram/useViewToNodesEdges.ts +36 -36
  306. package/src/likec4model/LikeC4ModelContext.ts +2 -2
  307. package/src/likec4model/useLikeC4ElementsTree.ts +4 -2
  308. package/src/likec4model/useLikeC4Model.ts +18 -16
  309. package/src/overlays/Overlays.tsx +7 -35
  310. package/src/overlays/element-details/ElementDetailsCard.css.ts +14 -22
  311. package/src/overlays/element-details/ElementDetailsCard.tsx +43 -34
  312. package/src/overlays/element-details/TabPanelDeployments.tsx +3 -2
  313. package/src/overlays/element-details/TabPanelRelationships.tsx +2 -1
  314. package/src/overlays/element-details/TabPanelStructure.tsx +1 -1
  315. package/src/overlays/element-details/actor.ts +2 -2
  316. package/src/overlays/overlay/Overlay.css.ts +75 -38
  317. package/src/overlays/overlay/Overlay.tsx +45 -29
  318. package/src/overlays/overlaysActor.ts +5 -4
  319. package/src/overlays/relationship-details/RelationshipDetails.tsx +5 -5
  320. package/src/overlays/relationship-details/SelectEdge.tsx +0 -2
  321. package/src/overlays/relationship-details/_types.ts +18 -14
  322. package/src/overlays/relationship-details/custom/edgeTypes.tsx +2 -2
  323. package/src/overlays/relationship-details/custom/nodeTypes.tsx +4 -0
  324. package/src/overlays/relationship-details/layout-to-xyflow.ts +1 -0
  325. package/src/overlays/relationship-details/layout.ts +3 -1
  326. package/src/overlays/relationships-browser/SelectElement.tsx +1 -1
  327. package/src/overlays/relationships-browser/_types.ts +20 -16
  328. package/src/overlays/relationships-browser/actor.ts +2 -2
  329. package/src/overlays/relationships-browser/custom/edgeTypes.tsx +2 -2
  330. package/src/overlays/relationships-browser/custom/nodeTypes.tsx +5 -2
  331. package/src/overlays/relationships-browser/layout.ts +12 -7
  332. package/src/overlays/relationships-browser/useViewToNodesEdges.ts +4 -4
  333. package/src/search/Search.tsx +237 -0
  334. package/src/{likec4diagram/ui/search → search/components}/ElementsColumn.css.ts +0 -29
  335. package/src/{likec4diagram/ui/search → search/components}/ElementsColumn.tsx +25 -25
  336. package/src/search/components/PickView.tsx +140 -0
  337. package/src/search/components/SearchByTags.tsx +109 -0
  338. package/src/{likec4diagram/ui/search → search/components}/SearchInput.tsx +63 -36
  339. package/src/{likec4diagram/ui/search → search/components}/ViewsColum.tsx +17 -18
  340. package/src/{likec4diagram/ui/search → search/components}/_shared.css.ts +26 -37
  341. package/src/{likec4diagram/ui/search/LikeC4Search.css.ts → search/components/styles.css.ts} +9 -36
  342. package/src/{likec4diagram/ui/search → search/components}/utils.ts +7 -0
  343. package/src/search/hooks.ts +41 -0
  344. package/src/search/searchActor.ts +99 -0
  345. package/src/state/DiagramActorProvider.tsx +36 -25
  346. package/src/state/assign.ts +10 -10
  347. package/src/state/diagram-machine.ts +128 -60
  348. package/src/state/hotkeyActor.ts +4 -2
  349. package/src/state/syncManualLayoutActor.ts +10 -4
  350. package/src/state/types.ts +11 -3
  351. package/src/state/utils.ts +7 -3
  352. package/src/styles-min.css +2 -0
  353. package/src/styles-xyflow.css +1 -0
  354. package/dist/_virtual/_commonjsHelpers.js +0 -5
  355. package/dist/_virtual/default-map.js +0 -7
  356. package/dist/_virtual/index.js +0 -5
  357. package/dist/_virtual/index2.js +0 -3
  358. package/dist/_virtual/react.production.js +0 -3
  359. package/dist/_virtual/set.js +0 -5
  360. package/dist/_virtual/set2.js +0 -3
  361. package/dist/base/types.js +0 -54
  362. package/dist/base/xyflowMachine.d.ts +0 -212
  363. package/dist/likec4diagram/custom/nodes/nodeTypes.d.ts +0 -8
  364. package/dist/likec4diagram/custom/nodes/nodeTypes.js +0 -92
  365. package/dist/likec4diagram/ui/search/ElementsColumn.d.ts +0 -1
  366. package/dist/likec4diagram/ui/search/LikeC4Search.css.js +0 -87
  367. package/dist/likec4diagram/ui/search/LikeC4Search.d.ts +0 -2
  368. package/dist/likec4diagram/ui/search/LikeC4Search.js +0 -267
  369. package/dist/likec4diagram/ui/search/SearchInput.d.ts +0 -1
  370. package/dist/likec4diagram/ui/search/_shared.css.d.ts +0 -4
  371. package/dist/likec4diagram/ui/search/state.d.ts +0 -19
  372. package/dist/likec4diagram/ui/search/state.js +0 -64
  373. package/dist/node_modules/.pnpm/mnemonist@0.40.3_patch_hash_5c12abb43fcff6fd81e53021b89075d53249640d165a2556cc1e58d71201a13a/node_modules/mnemonist/default-map.js +0 -172
  374. package/dist/node_modules/.pnpm/mnemonist@0.40.3_patch_hash_5c12abb43fcff6fd81e53021b89075d53249640d165a2556cc1e58d71201a13a/node_modules/mnemonist/set.js +0 -369
  375. package/dist/node_modules/.pnpm/react@19.1.0/node_modules/react/cjs/react.production.js +0 -556
  376. package/dist/node_modules/.pnpm/react@19.1.0/node_modules/react/index.js +0 -15
  377. package/dist/packages/core/src/compute-view/relationships-view/compute.js +0 -123
  378. package/dist/packages/core/src/compute-view/relationships-view/utils.js +0 -68
  379. package/dist/packages/core/src/errors/index.js +0 -15
  380. package/dist/packages/core/src/model/connection/model/ConnectionModel.js +0 -121
  381. package/dist/packages/core/src/model/connection/model/find.js +0 -39
  382. package/dist/packages/core/src/model/connection/ops.js +0 -7
  383. package/dist/packages/core/src/utils/const.js +0 -3
  384. package/dist/packages/core/src/utils/fqn.js +0 -51
  385. package/dist/packages/core/src/utils/guards.js +0 -7
  386. package/dist/packages/core/src/utils/iterable/filter.js +0 -21
  387. package/dist/packages/core/src/utils/iterable/find.js +0 -21
  388. package/dist/packages/core/src/utils/iterable/map.js +0 -18
  389. package/dist/packages/core/src/utils/iterable/some.js +0 -21
  390. package/dist/packages/core/src/utils/iterable/to.js +0 -14
  391. package/dist/packages/core/src/utils/set.js +0 -48
  392. package/dist/packages/core/src/utils/string-hash.js +0 -13
  393. package/dist/styles.css.js +0 -3
  394. package/src/base/xyflowMachine.ts +0 -75
  395. package/src/likec4diagram/custom/nodes/nodeTypes.tsx +0 -109
  396. package/src/likec4diagram/ui/search/LikeC4Search.tsx +0 -301
  397. package/src/likec4diagram/ui/search/state.ts +0 -78
  398. /package/dist/{likec4diagram/ui/search → search/components}/ElementsColumn.css.d.ts +0 -0
  399. /package/dist/{likec4diagram/ui/search → search/components}/ViewsColumn.css.d.ts +0 -0
  400. /package/dist/{likec4diagram/ui/search → search/components}/ViewsColumn.css.js +0 -0
  401. /package/dist/{bundle/font.css.js → styles-font.css2.js} +0 -0
  402. /package/src/{likec4diagram/ui/search → search/components}/ViewsColumn.css.ts +0 -0
  403. /package/src/{bundle/font.css → styles-font.css} +0 -0
@@ -0,0 +1,1002 @@
1
+ {
2
+ "schemaVersion": "0.53.6",
3
+ "styles": {
4
+ "atomic": [
5
+ "background]___[value:dots",
6
+ "background]___[value:transparent",
7
+ "gap]___[value:20",
8
+ "background]___[value:transparent !important",
9
+ "--xy-background-color]___[value:transparent !important",
10
+ "--xy-background-color]___[value:{colors.mantine.colors.body}",
11
+ "--xy-background-pattern-color]___[value:{colors.mantine.colors.dark[5]}]___[cond:_dark",
12
+ "--xy-background-pattern-color]___[value:{colors.mantine.colors.gray[4]}]___[cond:_light",
13
+ "WebkitUserSelect]___[value:none]___[cond:& .react-flow__pane",
14
+ "display]___[value:none]___[cond:& .react-flow__attribution",
15
+ "position]___[value:absolute",
16
+ "top]___[value:5px",
17
+ "left]___[value:4px",
18
+ "display]___[value:none]___[cond:_smallZoom",
19
+ "stroke]___[value:2",
20
+ "top]___[value:[2px]",
21
+ "right]___[value:[2px]",
22
+ "opacity]___[value:0.75]___[cond:_whenHovered",
23
+ "opacity]___[value:1]___[cond:_hover",
24
+ "stroke]___[value:1.8",
25
+ "position]___[value:relative",
26
+ "width]___[value:100%",
27
+ "height]___[value:100%",
28
+ "padding]___[value:0",
29
+ "margin]___[value:0",
30
+ "border]___[value:transparent",
31
+ "pointerEvents]___[value:none",
32
+ "borderRadius]___[value:var(--_border-radius, 4px)]___[cond:_before",
33
+ "content]___[value:\" \"]___[cond:_before",
34
+ "position]___[value:absolute]___[cond:_before",
35
+ "top]___[value:0]___[cond:_before",
36
+ "left]___[value:0]___[cond:_before",
37
+ "width]___[value:100%]___[cond:_before",
38
+ "height]___[value:100%]___[cond:_before",
39
+ "border]___[value:transparent]___[cond:_before",
40
+ "background]___[value:likec4.palette.fill]___[cond:_before",
41
+ "backgroundClip]___[value:padding-box]___[cond:_before",
42
+ "transitionDelay]___[value:.075ms]___[cond:_before",
43
+ "transition]___[value:all {durations.slow} {easings.inOut}]___[cond:_noReduceGraphics<___>_before",
44
+ "transitionDelay]___[value:.2s]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
45
+ "transitionTimingFunction]___[value:in]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
46
+ "opacity]___[value:var(--_compound-opacity, 1)]___[cond:&:is([data-compound-transparent])<___>_before",
47
+ "borderWidth]___[value:calc(var(--_border-width, 2px) - 1px)]___[cond:&:is([data-compound-transparent])<___>_before",
48
+ "borderRadius]___[value:var(--_border-radius, 4px)",
49
+ "transition]___[value:all 250ms {easings.inOut}",
50
+ "cursor]___[value:default",
51
+ "top]___[value:0",
52
+ "left]___[value:0",
53
+ "borderStyle]___[value:dashed",
54
+ "borderWidth]___[value:[var(--_border-width, 2px)]",
55
+ "borderColor]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} var(--_border-opacity-percent, 100%), transparent)]",
56
+ "overflow]___[value:visible",
57
+ "visibility]___[value:hidden",
58
+ "visibility]___[value:visible]___[cond:_whenFocused",
59
+ "visibility]___[value:visible]___[cond:_whenSelected",
60
+ "display]___[value:none]___[cond:_whenPanning",
61
+ "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 60%, {colors.likec4.palette.hiContrast})]",
62
+ "strokeWidth]___[value:4",
63
+ "fill]___[value:[none]",
64
+ "animationStyle]___[value:indicator",
65
+ "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 80%, {colors.likec4.palette.hiContrast})]]___[cond:_light",
66
+ "boxShadow]___[value:0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)]___[cond:_before<___>_noReduceGraphics",
67
+ "boxShadow]___[value:none]___[cond:_before<___>_whenSelected",
68
+ "boxShadow]___[value:none !important]___[cond:_before<___>_whenPanning",
69
+ "display]___[value:flex",
70
+ "alignItems]___[value:center",
71
+ "gap]___[value:6px",
72
+ "left]___[value:14px",
73
+ "top]___[value:4px",
74
+ "right]___[value:30px",
75
+ "width]___[value:auto",
76
+ "minHeight]___[value:30px",
77
+ "pointerEvents]___[value:all]___[cond::where(.react-flow__node.draggable) &",
78
+ "cursor]___[value:grab]___[cond::where(.react-flow__node.draggable) &",
79
+ "paddingLeft]___[value:22px]___[cond:.likec4-compound-node:has(.compound-action) &",
80
+ "flex]___[value:1",
81
+ "fontFamily]___[value:likec4.compound",
82
+ "fontWeight]___[value:600",
83
+ "fontSize]___[value:15px",
84
+ "textTransform]___[value:uppercase",
85
+ "letterSpacing]___[value:0.2px",
86
+ "color]___[value:likec4.palette.loContrast",
87
+ "color]___[value:[color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]]___[cond:[data-compound-title-inverse] &",
88
+ "color]___[value:likec4.palette.stroke]___[cond:[data-compound-title-inverse] &<___>_light",
89
+ "flex]___[value:0 0 20px",
90
+ "height]___[value:20px",
91
+ "width]___[value:20px",
92
+ "justifyContent]___[value:center",
93
+ "mixBlendMode]___[value:hard-light",
94
+ "mixBlendMode]___[value:normal]___[cond:_reduceGraphicsOnPan",
95
+ "width]___[value:100%]___[cond:& svg, & img",
96
+ "height]___[value:auto]___[cond:& svg, & img",
97
+ "maxHeight]___[value:100%]___[cond:& svg, & img",
98
+ "pointerEvents]___[value:none]___[cond:& svg, & img",
99
+ "filter]___[value:drop-shadow(0 0 3px rgb(0 0 0 / 12%))]___[cond:& svg, & img",
100
+ "filter]___[value:drop-shadow(0 1px 8px rgb(0 0 0 / 8%))]___[cond:& svg, & img<___>xs",
101
+ "filter]___[value:drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))]___[cond:& svg, & img<___>sm",
102
+ "filter]___[value:none]___[cond:& svg, & img<___>_reduceGraphicsOnPan",
103
+ "objectFit]___[value:contain]___[cond:& img",
104
+ "truncate]___[value:end",
105
+ "transitionDuration]___[value:normal",
106
+ "--actionbtn-color]___[value:color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]___[cond:[data-compound-title-inverse] &<___>_dark",
107
+ "--actionbtn-color]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
108
+ "--actionbtn-color-hovered]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
109
+ "--actionbtn-color-hovered-btn]___[value:{colors.likec4.palette.hiContrast}]___[cond:[data-compound-title-inverse] &<___>_light",
110
+ "--actionbtn-bg-hovered]___[value:{colors.likec4.palette.fill/50}]___[cond:[data-compound-title-inverse] &<___>_light",
111
+ "--actionbtn-bg-hovered-btn]___[value:{colors.likec4.palette.fill}]___[cond:[data-compound-title-inverse] &<___>_light",
112
+ "transitionDelay]___[value:0.2s",
113
+ "transitionDelay]___[value:0s]___[cond:_hover",
114
+ "likec4RelationPalette]___[value:gray",
115
+ "top]___[value:4",
116
+ "right]___[value:4",
117
+ "userSelect]___[value:all",
118
+ "textAlign]___[value:left",
119
+ "whiteSpaceCollapse]___[value:preserve-breaks",
120
+ "textWrap]___[value:pretty",
121
+ "lineHeight]___[value:1.25",
122
+ "--text-fz]___[value:{fontSizes.sm}",
123
+ "--text-fz]___[value:{fontSizes.md}]___[cond:md",
124
+ "pointerEvents]___[value:all",
125
+ "cursor]___[value:pointer",
126
+ "height]___[value:auto",
127
+ "background]___[value:[var(--xy-edge-label-background-color)]",
128
+ "color]___[value:[var(--xy-edge-label-color)]",
129
+ "border]___[value:0px solid transparent",
130
+ "borderRadius]___[value:4px",
131
+ "transform]___[value:var(--edge-translate)",
132
+ "transition]___[value:fast",
133
+ "transition]___[value:all 190ms {easings.inOut}]___[cond:&:is([data-likec4-hovered='true'])",
134
+ "transform]___[value:var(--edge-translate, translate(0px, 0px)) scale(1.12)]___[cond:&:is([data-likec4-hovered='true'])",
135
+ "transitionDelay]___[value:100ms]___[cond:&:is([data-likec4-hovered='true'])",
136
+ "mixBlendMode]___[value:plus-lighter]___[cond:_noReduceGraphics<___>_dark",
137
+ "mixBlendMode]___[value:screen]___[cond:_noReduceGraphics<___>_light",
138
+ "display]___[value:none]___[cond:_reduceGraphicsOnPan",
139
+ "fontFamily]___[value:likec4.relation",
140
+ "padding]___[value:3px 5px 5px 5px",
141
+ "flexDirection]___[value:column",
142
+ "width]___[value:max-content",
143
+ "maxWidth]___[value:100%",
144
+ "gap]___[value:4px",
145
+ "flexDirection]___[value:row",
146
+ "padding]___[value:0px",
147
+ "alignSelf]___[value:stretch",
148
+ "flex]___[value:0 0 auto",
149
+ "fontSize]___[value:14px",
150
+ "lineHeight]___[value:1",
151
+ "padding]___[value:5px 5px",
152
+ "textAlign]___[value:center",
153
+ "minWidth]___[value:22px",
154
+ "borderTopLeftRadius]___[value:4px",
155
+ "borderBottomLeftRadius]___[value:4px",
156
+ "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]",
157
+ "fontVariantNumeric]___[value:tabular-nums",
158
+ "background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]]___[cond::where([data-likec4-color=\"gray\"]) &<___>_dark",
159
+ "display]___[value:contents",
160
+ "display]___[value:none !important]___[cond:_empty",
161
+ "padding]___[value:2px 5px 4px 0px",
162
+ "lineHeight]___[value:1.185",
163
+ "padding]___[value:2px 6px 4px 0px",
164
+ "fontSize]___[value:11px",
165
+ "opacity]___[value:0.75",
166
+ "lineClamp]___[value:5",
167
+ "strokeOpacity]___[value:0",
168
+ "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke}",
169
+ "--xy-edge-stroke-selected]___[value:{colors.likec4.relation.stroke.selected}",
170
+ "--xy-edge-label-color]___[value:{colors.likec4.relation.label}",
171
+ "--xy-edge-label-color]___[value:color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)]___[cond:_light",
172
+ "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/60}]___[cond:_light",
173
+ "--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/50}]___[cond:_dark",
174
+ "--xy-edge-stroke-width]___[value:3",
175
+ "--xy-edge-stroke]___[value:{colors.likec4.relation.stroke.selected}]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])",
176
+ "--xy-edge-stroke-width]___[value:4]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])<___>_whenSelected",
177
+ "transition]___[value:none]___[cond:_reduceGraphics",
178
+ "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
179
+ "strokeOpacity]___[value:0.08",
180
+ "transitionProperty]___[value:stroke-width, stroke-opacity",
181
+ "transitionDuration]___[value:fast",
182
+ "transitionTimingFunction]___[value:inOut",
183
+ "transitionTimingFunction]___[value:out]___[cond:_whenHovered",
184
+ "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 4)]___[cond:_whenHovered",
185
+ "strokeOpacity]___[value:0.2]___[cond:_whenHovered",
186
+ "strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 6)]___[cond:_whenSelected",
187
+ "strokeOpacity]___[value:0.25]___[cond:_whenSelected",
188
+ "strokeOpacity]___[value:0.4]___[cond:_whenSelected<___>_whenHovered",
189
+ "fill]___[value:[var(--xy-edge-stroke)]",
190
+ "stroke]___[value:[var(--xy-edge-stroke)]",
191
+ "fill]___[value:[none!]",
192
+ "strokeDashoffset]___[value:10",
193
+ "transition]___[value:stroke 130ms ease-out,stroke-width 130ms ease-out]___[cond:_noReduceGraphics",
194
+ "animationStyle]___[value:xyedgeAnimated]___[cond:_whenHovered",
195
+ "animationDelay]___[value:450ms]___[cond:_whenHovered",
196
+ "animationStyle]___[value:xyedgeAnimated]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
197
+ "animationDelay]___[value:0ms]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
198
+ "animationDirection]___[value:reverse]___[cond::where([data-edge-dir='back']) &",
199
+ "animationPlayState]___[value:paused]___[cond:_whenDimmed",
200
+ "animationName]___[value:none]___[cond:_smallZoom",
201
+ "strokeDasharray]___[value:none !important]___[cond:_whenPanning",
202
+ "animationName]___[value:none]___[cond:_whenPanning",
203
+ "--ai-bg]___[value:var(--xy-edge-label-background-color)",
204
+ "--ai-hover]___[value:color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)",
205
+ "--ai-size]___[value:var(--ai-size-sm)",
206
+ "--ai-radius]___[value:var(--mantine-radius-sm)",
207
+ "translateY]___[value:1px]___[cond:_hover",
208
+ "scale]___[value:1.15]___[cond:_hover",
209
+ "translateY]___[value:-1px]___[cond:_active",
210
+ "scale]___[value:0.9]___[cond:_active",
211
+ "opacity]___[value:1]___[cond:_whenHovered",
212
+ "width]___[value:80%]___[cond:& .tabler-icon",
213
+ "height]___[value:80%]___[cond:& .tabler-icon",
214
+ "strokeWidth]___[value:2]___[cond:& .tabler-icon",
215
+ "zIndex]___[value:1",
216
+ "top]___[value:calc(100% - 30px)",
217
+ "transform]___[value:translateX(-50%)",
218
+ "left]___[value:50%",
219
+ "top]___[value:2",
220
+ "right]___[value:2",
221
+ "right]___[value:5px]___[cond:_shapeBrowser",
222
+ "top]___[value:14px]___[cond:_shapeCylinder",
223
+ "top]___[value:14px]___[cond:_shapeStorage",
224
+ "top]___[value:1px]___[cond:_shapeQueue",
225
+ "right]___[value:12px]___[cond:_shapeQueue",
226
+ "top]___[value:calc(100% - 4px)]___[cond:_before",
227
+ "height]___[value:24px]___[cond:_before",
228
+ "background]___[value:[transparent]]___[cond:_before",
229
+ "pointerEvents]___[value:all]___[cond:_before",
230
+ "outline]___[value:none]___[cond:_focusVisible",
231
+ "display]___[value:none]___[cond:_reduceGraphicsOnPan<___>_before",
232
+ "cursor]___[value:pointer]___[cond::where(.react-flow__node.selectable:not(.dragging)) &",
233
+ "visibility]___[value:hidden]___[cond:_smallZoom",
234
+ "stroke]___[value:likec4.palette.loContrast",
235
+ "strokeWidth]___[value:8",
236
+ "strokeOpacity]___[value:0.8",
237
+ "stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]]___[cond:_light",
238
+ "visibility]___[value:visible]___[cond:_groupFocusVisible",
239
+ "animationStyle]___[value:indicator]___[cond:_whenSelected",
240
+ "fill]___[value:likec4.palette.fill",
241
+ "fill]___[value:likec4.palette.stroke",
242
+ "fill]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]",
243
+ "fill]___[value:likec4.palette.fill]___[cond:.shape-svg-multiple &",
244
+ "stroke]___[value:likec4.palette.stroke",
245
+ "transformOrigin]___[value:50% 50%",
246
+ "transformOrigin]___[value:75% 25%]___[cond:_shapeQueue",
247
+ "transformOrigin]___[value:50% 100%]___[cond:_shapeCylinder",
248
+ "transformOrigin]___[value:50% 100%]___[cond:_shapeStorage",
249
+ "transform]___[value:translate(14px, 14px) perspective(300px) translateZ(-8px)",
250
+ "filter]___[value:brightness(0.65) saturate(0.8)",
251
+ "stroke]___[value:[none]",
252
+ "display]___[value:none]___[cond:_whenSelected",
253
+ "display]___[value:none]___[cond:_whenFocused",
254
+ "transition]___[value:fill 120ms linear, filter 130ms {easings.inOut}",
255
+ "transitionDelay]___[value:0ms",
256
+ "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21)) drop-shadow(0 1px 1px color-mix(in srgb, {colors.likec4.palette.stroke} 40%, transparent)) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1)) ",
257
+ "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05)) ]___[cond:_whenHovered",
258
+ "filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05)) ]___[cond::where([data-likec4-level='true']) &",
259
+ "filter]___[value:none]___[cond:_whenSelected",
260
+ "filter]___[value:none]___[cond:_smallZoom",
261
+ "transition]___[value:none]___[cond:_whenPanning",
262
+ "filter]___[value:none]___[cond:_whenPanning",
263
+ "position]___[value:bottom-start",
264
+ "mainAxis]___[value:8",
265
+ "alignItems]___[value:flex-end",
266
+ "gap]___[value:4",
267
+ "justifyItems]___[value:stretch",
268
+ "bottom]___[value:0",
269
+ "padding]___[value:4",
270
+ "bottom]___[value:5]___[cond:_shapeCylinder",
271
+ "bottom]___[value:5]___[cond:_shapeStorage",
272
+ "bottom]___[value:0]___[cond:_shapeQueue",
273
+ "paddingLeft]___[value:14]___[cond:_shapeQueue",
274
+ "layerStyle]___[value:likec4.tag",
275
+ "maxWidth]___[value:50",
276
+ "height]___[value:5",
277
+ "height]___[value:12]___[cond:_whenHovered",
278
+ "borderRadius]___[value:4]___[cond:_whenHovered",
279
+ "transitionDelay]___[value:.08s]___[cond:_whenHovered",
280
+ "border]___[value:none",
281
+ "userSelect]___[value:none",
282
+ "fontSize]___[value:lg",
283
+ "borderRadius]___[value:4",
284
+ "paddingInline]___[value:6",
285
+ "flexWrap]___[value:wrap",
286
+ "paddingBottom]___[value:sm",
287
+ "gap]___[value:sm",
288
+ "textStyle]___[value:likec4.node.primary",
289
+ "color]___[value:likec4.palette.hiContrast",
290
+ "flex]___[value:0 1 auto",
291
+ "textStyle]___[value:likec4.node.secondary",
292
+ "textOverflow]___[value:ellipsis",
293
+ "overflow]___[value:hidden",
294
+ "display]___[value:none]___[cond:_shapeSizeXs",
295
+ "fontSize]___[value:calc(var(--likec4-text-size) * 0.635)",
296
+ "lineHeight]___[value:1.125",
297
+ "textWrap]___[value:balance",
298
+ "opacity]___[value:0.92",
299
+ "display]___[value:none]___[cond:_shapeSizeSm",
300
+ "flex]___[value:0 0 var(--icon-size)",
301
+ "height]___[value:var(--icon-size)",
302
+ "width]___[value:var(--icon-size)",
303
+ "alignSelf]___[value:flex-start",
304
+ "height]___[value:fit-content",
305
+ "width]___[value:fit-content",
306
+ "margin]___[value:0 auto",
307
+ "paddingTop]___[value:var(--likec4-spacing)",
308
+ "paddingBottom]___[value:var(--likec4-spacing)",
309
+ "paddingLeft]___[value:calc(var(--likec4-spacing) + 8px)",
310
+ "paddingRight]___[value:calc(var(--likec4-spacing) + 8px)",
311
+ "gap]___[value:12px",
312
+ "paddingLeft]___[value:46px]___[cond:_shapeQueue",
313
+ "paddingRight]___[value:16px]___[cond:_shapeQueue",
314
+ "paddingLeft]___[value:46px]___[cond:_shapeMobile",
315
+ "paddingRight]___[value:16px]___[cond:_shapeMobile",
316
+ "paddingTop]___[value:30px]___[cond:_shapeCylinder",
317
+ "paddingTop]___[value:30px]___[cond:_shapeStorage",
318
+ "paddingTop]___[value:32px]___[cond:_shapeBrowser",
319
+ "paddingBottom]___[value:28px]___[cond:_shapeBrowser",
320
+ "--icon-size]___[value:24px]___[cond:_shapeSizeXs",
321
+ "--icon-size]___[value:36px]___[cond:_shapeSizeSm",
322
+ "--icon-size]___[value:60px]___[cond:_shapeSizeMd",
323
+ "--icon-size]___[value:82px]___[cond:_shapeSizeLg",
324
+ "gap]___[value:16px]___[cond:_shapeSizeLg",
325
+ "--icon-size]___[value:90px]___[cond:_shapeSizeXl",
326
+ "gap]___[value:16px]___[cond:_shapeSizeXl",
327
+ "gap]___[value:16px",
328
+ "alignItems]___[value:stretch",
329
+ "flexWrap]___[value:nowrap",
330
+ "gap]___[value:8px",
331
+ "minWidth]___[value:calc(50% + var(--icon-size))",
332
+ "alignItems]___[value:flex-start",
333
+ "lineClamp]___[value:2",
334
+ "lineClamp]___[value:3",
335
+ "top]___[value:1rem",
336
+ "right]___[value:1rem",
337
+ "color]___[value:gray",
338
+ "--mantine-cursor-pointer]___[value:pointer",
339
+ "cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
340
+ "position]___[value:fixed",
341
+ "color]___[value:red",
342
+ "padding]___[value:xl",
343
+ "gap]___[value:xs",
344
+ "marginTop]___[value:xl",
345
+ "gap]___[value:micro",
346
+ "justifyContent]___[value:stretch",
347
+ "transitionProperty]___[value:all",
348
+ "border]___[value:1px dashed {colors.mantine.colors.defaultBorder}",
349
+ "borderRadius]___[value:sm",
350
+ "color]___[value:mantine.colors.gray[7]",
351
+ "color]___[value:mantine.colors.dark[1]]___[cond:_dark",
352
+ "transitionTimingFunction]___[value:out]___[cond:_hover",
353
+ "color]___[value:mantine.colors.defaultColor]___[cond:_hover",
354
+ "background]___[value:mantine.colors.defaultHover]___[cond:_hover",
355
+ "minHeight]___[value:22px",
356
+ "padding]___[value:2px 8px 2px 2px",
357
+ "padding]___[value:3px 16px 3px 3px",
358
+ "flex]___[value:1 1 100%",
359
+ "transition]___[value:transform 100ms {easings.inOut}",
360
+ "transitionTimingFunction]___[value:out]___[cond:_groupHover",
361
+ "transitionDelay]___[value:50ms]___[cond:_groupHover",
362
+ "transform]___[value:translateX(1px)]___[cond:_groupHover",
363
+ "flex]___[value:0",
364
+ "color]___[value:teal",
365
+ "truncate]___[value:true",
366
+ "height]___[value:30px",
367
+ "paddingLeft]___[value:sm",
368
+ "paddingRight]___[value:4px",
369
+ "border]___[value:1px solid",
370
+ "borderColor]___[value:mantine.colors.defaultBorder",
371
+ "borderColor]___[value:mantine.colors.gray[4]]___[cond:_light",
372
+ "borderColor]___[value:mantine.colors.dark[4]]___[cond:_dark",
373
+ "borderColor]___[value:mantine.colors.defaultBorder]___[cond:_hover",
374
+ "background]___[value:mantine.colors.default",
375
+ "background]___[value:mantine.colors.white]___[cond:_light",
376
+ "background]___[value:mantine.colors.dark[6]]___[cond:_dark",
377
+ "color]___[value:mantine.colors.text]___[cond:& .tabler-icon",
378
+ "transition]___[value:none !important]___[cond:_whenPanning",
379
+ "boxShadow]___[value:xs",
380
+ "boxShadow]___[value:sm]___[cond:_hover",
381
+ "boxShadow]___[value:none !important]___[cond:_whenPanning",
382
+ "fontSize]___[value:sm",
383
+ "fontWeight]___[value:500",
384
+ "paddingRight]___[value:10px",
385
+ "color]___[value:mantine.colors.placeholder",
386
+ "paddingRight]___[value:30px]___[cond:sm",
387
+ "paddingRight]___[value:50px]___[cond:md",
388
+ "padding]___[value:4px 7px",
389
+ "color]___[value:mantine.colors.gray[7]]___[cond:_light",
390
+ "borderColor]___[value:mantine.colors.gray[2]]___[cond:_light",
391
+ "color]___[value:mantine.colors.dark[0]]___[cond:_dark",
392
+ "borderColor]___[value:mantine.colors.dark[7]]___[cond:_dark",
393
+ "backgroundColor]___[value:mantine.colors.gray[2]/70]___[cond:_light",
394
+ "backgroundColor]___[value:mantine.colors.dark[8]/70]___[cond:_dark",
395
+ "backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_groupHover<___>_light",
396
+ "backgroundColor]___[value:mantine.colors.dark[8]]___[cond:_groupHover<___>_dark",
397
+ "top]___[value:1",
398
+ "right]___[value:1",
399
+ "zIndex]___[value:9",
400
+ "offset]___[value:16",
401
+ "padding]___[value:xs",
402
+ "marginInline]___[value:auto",
403
+ "marginTop]___[value:2",
404
+ "gap]___[value:0",
405
+ "overflowY]___[value:scroll",
406
+ "minWidth]___[value:250px",
407
+ "maxWidth]___[value:min(90vw, 500px)",
408
+ "display]___[value:block",
409
+ "fontSize]___[value:xxs",
410
+ "whiteSpace]___[value:nowrap",
411
+ "padding]___[value:2px 4px",
412
+ "borderRadius]___[value:2",
413
+ "background]___[value:likec4.palette.fill/30",
414
+ "lineHeight]___[value:[1.11]",
415
+ "color]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]]___[cond:_light",
416
+ "color]___[value:likec4.palette.loContrast]___[cond:_dark",
417
+ "fontSize]___[value:xs",
418
+ "opacity]___[value:0.65",
419
+ "top]___[value:5",
420
+ "right]___[value:6",
421
+ "gap]___[value:10px",
422
+ "gap]___[value:3",
423
+ "stroke]___[value:2.5",
424
+ "width]___[value:xs",
425
+ "mixBlendMode]___[value:normal",
426
+ "fill]___[value:likec4.relation.stroke",
427
+ "stroke]___[value:likec4.relation.stroke",
428
+ "fillOpacity]___[value:0.75",
429
+ "strokeWidth]___[value:1",
430
+ "cursor]___[value:grab",
431
+ "pointerEvents]___[value:auto",
432
+ "fillOpacity]___[value:1]___[cond:_hover",
433
+ "stroke]___[value:mantine.colors.primary.filledHover]___[cond:_hover",
434
+ "strokeWidth]___[value:10]___[cond:_hover",
435
+ "transition]___[value:stroke 100ms ease-out, stroke-width 100ms ease-out]___[cond:_hover",
436
+ "visibility]___[value:visible]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
437
+ "transition]___[value:fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
438
+ "transitionDelay]___[value:50ms]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
439
+ "fillOpacity]___[value:1]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
440
+ "strokeWidth]___[value:5]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
441
+ "cursor]___[value:grabbing",
442
+ "cursor]___[value:grabbing !important]___[cond:& *",
443
+ "cursor]___[value:grabbing !important]___[cond:& .react-flow__edge-interaction",
444
+ "position]___[value:right-end",
445
+ "offset]___[value:2",
446
+ "paddingInline]___[value:3",
447
+ "height]___[value:xs",
448
+ "--thickness]___[value:1px",
449
+ "borderBlockEndWidth]___[value:var(--thickness)",
450
+ "gap]___[value:2",
451
+ "justifyContent]___[value:flex-start",
452
+ "gap]___[value:6",
453
+ "marginTop]___[value:sm",
454
+ "color]___[value:dark",
455
+ "position]___[value:left-start",
456
+ "position]___[value:top-start",
457
+ "offset]___[value:4",
458
+ "paddingInline]___[value:5",
459
+ "paddingBottom]___[value:8",
460
+ "paddingTop]___[value:4",
461
+ "boxShadow]___[value:xl",
462
+ "paddingInline]___[value:4px",
463
+ "color]___[value:mantine.colors.dimmed",
464
+ "fontSize]___[value:10px",
465
+ "maxWidth]___[value:220px",
466
+ "position]___[value:right-start",
467
+ "boxShadow]___[value:lg",
468
+ "mainAxis]___[value:10",
469
+ "opacity]___[value:0.6",
470
+ "opacity]___[value:1",
471
+ "padding]___[value:8",
472
+ "paddingTop]___[value:6",
473
+ "marginBottom]___[value:10",
474
+ "marginBlock]___[value:10",
475
+ "paddingTop]___[value:100%",
476
+ "left]___[value:2",
477
+ "bottom]___[value:2",
478
+ "stroke]___[value:1.5",
479
+ "color]___[value:pink",
480
+ "color]___[value:orange",
481
+ "background]___[value:mantine.colors.orange.light",
482
+ "marginTop]___[value:xs",
483
+ "position]___[value:top",
484
+ "position]___[value:top-end",
485
+ "display]___[value:none]___[cond:_empty",
486
+ "left]___[value:1rem",
487
+ "pointerEvents]___[value:all]___[cond:& :where(button, .action-icon, [role='dialog'])",
488
+ "--ai-size]___[value:2rem]___[cond:& .action-icon",
489
+ "width]___[value:65%]___[cond:& .tabler-icon",
490
+ "height]___[value:65%]___[cond:& .tabler-icon",
491
+ "--ai-radius]___[value:0px]___[cond:_reduceGraphics<___>& .action-icon",
492
+ "boxShadow]___[value:md",
493
+ "boxShadow]___[value:none]___[cond:_whenPanning",
494
+ "flex]___[value:1 1 40%",
495
+ "padding]___[value:4px 6px",
496
+ "background]___[value:mantine.colors.gray[2]",
497
+ "borderColor]___[value:mantine.colors.gray[4]",
498
+ "background]___[value:mantine.colors.dark[5]]___[cond:_dark",
499
+ "background]___[value:mantine.colors.gray[3]",
500
+ "boxShadow]___[value:inset 1px 1px 3px 0px #00000024",
501
+ "background]___[value:mantine.colors.dark[7]]___[cond:_dark",
502
+ "width]___[value:8",
503
+ "height]___[value:8",
504
+ "border]___[value:2px solid",
505
+ "borderColor]___[value:mantine.colors.gray[5]",
506
+ "borderRadius]___[value:3",
507
+ "transform]___[value:translate(-50%, -50%)",
508
+ "minWidth]___[value:200",
509
+ "maxWidth]___[value:calc(100vw - 16px)",
510
+ "minWidth]___[value:250]___[cond:sm",
511
+ "maxWidth]___[value:90vw]___[cond:sm",
512
+ "minWidth]___[value:350]___[cond:md",
513
+ "maxWidth]___[value:70vw]___[cond:md",
514
+ "backgroundColor]___[value:mantine.colors.body/80",
515
+ "backgroundColor]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
516
+ "backgroundColor]___[value:mantine.colors.body]___[cond:_whenPanning",
517
+ "color]___[value:mantine.colors.gray[5]]___[cond:_dark",
518
+ "padding]___[value:sm",
519
+ "padding]___[value:md",
520
+ "marginBottom]___[value:xs",
521
+ "height]___[value:sm",
522
+ "paddingBlock]___[value:2",
523
+ "opacity]___[value:0.7",
524
+ "marginBottom]___[value:sm",
525
+ "maxHeight]___[value:42",
526
+ "display]___[value:inline-block",
527
+ "right]___[value:0",
528
+ "--ai-radius]___[value:0px",
529
+ "--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
530
+ "maxWidth]___[value:calc(100vw - 20px)",
531
+ "minWidth]___[value:300]___[cond:sm",
532
+ "maxWidth]___[value:65vw]___[cond:sm",
533
+ "maxWidth]___[value:40vw]___[cond:md",
534
+ "padding]___[value:2xs",
535
+ "backgroundColor]___[value:transparent",
536
+ "transition]___[value:all 100ms ease-in",
537
+ "transition]___[value:all 120ms ease-out]___[cond:_hover",
538
+ "backgroundColor]___[value:mantine.colors.primary[2]/50]___[cond:_hover",
539
+ "backgroundColor]___[value:mantine.colors.dark[3]/40]___[cond:_dark<___>_hover",
540
+ "filter]___[value: drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%)) ",
541
+ "paddingTop]___[value:0",
542
+ "paddingBottom]___[value:0",
543
+ "textTransform]___[value:lowercase",
544
+ "transition]___[value:all 150ms ease-in-out",
545
+ "--badge-radius]___[value:2px",
546
+ "--badge-fz]___[value:9.5px",
547
+ "--badge-padding-x]___[value:3px",
548
+ "--badge-height]___[value:13.5px",
549
+ "--badge-lh]___[value:1",
550
+ "--badge-bg]___[value:{colors.likec4.palette.fill}",
551
+ "--badge-color]___[value:{colors.likec4.palette.hiContrast}",
552
+ "boxShadow]___[value:none",
553
+ "paddingInline]___[value:xs",
554
+ "paddingBlock]___[value:sm",
555
+ "likec4Palette]___[value:primary",
556
+ "flex]___[value:0 0 70px",
557
+ "opacity]___[value:0.25",
558
+ "marginLeft]___[value:2",
559
+ "bottom]___[value:0.5rem",
560
+ "gap]___[value:0.4rem",
561
+ "gap]___[value:0.6rem]___[cond:md",
562
+ "backdropFilter]___[value:blur(8px)",
563
+ "transition]___[value:all 175ms ease-in",
564
+ "transform]___[value:scale(1.1)]___[cond:_hover",
565
+ "transitionDuration]___[value:100ms]___[cond:_active",
566
+ "transform]___[value:scale(0.98) translateY(3px)]___[cond:_active",
567
+ "width]___[value:0.85em]___[cond:& .tabler-icon",
568
+ "height]___[value:0.85em]___[cond:& .tabler-icon",
569
+ "background]___[value:mantine.colors.primary.filled/65",
570
+ "background]___[value:mantine.colors.primary.filledHover/65]___[cond:_hover",
571
+ "background]___[value:mantine.colors.primary.filled/85]___[cond:_light",
572
+ "background]___[value:mantine.colors.primary.filledHover/85]___[cond:_light<___>_hover",
573
+ "borderColor]___[value:mantine.colors.orange[6]",
574
+ "borderWidth]___[value:4]___[cond:md",
575
+ "paddingInline]___[value:xl",
576
+ "paddingLeft]___[value:lg",
577
+ "paddingInline]___[value:md",
578
+ "paddingRight]___[value:lg",
579
+ "boxSizing]___[value:border-box",
580
+ "inset]___[value:0",
581
+ "width]___[value:100vw",
582
+ "height]___[value:100vh",
583
+ "maxWidth]___[value:100vw",
584
+ "maxHeight]___[value:100vh",
585
+ "background]___[value:[transparent]",
586
+ "backdropFilter]___[value:auto]___[cond:_backdrop",
587
+ "backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
588
+ "backgroundColor]___[value:[rgb(36 36 36 / var(--_opacity, 5%))]]___[cond:_backdrop",
589
+ "gap]___[value:lg",
590
+ "backgroundColor]___[value:mantine.colors.body",
591
+ "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
592
+ "backgroundImage]___[value: linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent), color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px, color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px) ",
593
+ "cursor]___[value:move",
594
+ "fontFamily]___[value:likec4.element",
595
+ "fontOpticalSizing]___[value:auto",
596
+ "fontStyle]___[value:normal",
597
+ "fontSize]___[value:24px",
598
+ "lineHeight]___[value:xs",
599
+ "flex]___[value:0 0 40px",
600
+ "height]___[value:40px",
601
+ "width]___[value:40px",
602
+ "mixBlendMode]___[value:hard-light]___[cond:_dark",
603
+ "width]___[value:100%]___[cond:& :where(svg, img)",
604
+ "height]___[value:auto]___[cond:& :where(svg, img)",
605
+ "maxHeight]___[value:100%]___[cond:& :where(svg, img)",
606
+ "pointerEvents]___[value:none]___[cond:& :where(svg, img)",
607
+ "filter]___[value: drop-shadow(0 0 3px rgb(0 0 0 / 10%)) drop-shadow(0 1px 8px rgb(0 0 0 / 5%)) drop-shadow(1px 1px 16px rgb(0 0 0 / 2%)) ]___[cond:& :where(svg, img)",
608
+ "background]___[value:mantine.colors.body",
609
+ "padding]___[value:10px 8px",
610
+ "border]___[value:1px dashed",
611
+ "--view-title-color]___[value:{colors.mantine.colors.dark[1]}",
612
+ "--icon-color]___[value:{colors.mantine.colors.dark[1]}]___[cond:_hover",
613
+ "--view-title-color]___[value:{colors.mantine.colors.defaultColor}]___[cond:_hover",
614
+ "--icon-color]___[value:{colors.mantine.colors.gray[6]}]___[cond:_light",
615
+ "--view-title-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light",
616
+ "--icon-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light<___>_hover",
617
+ "transition]___[value:fast]___[cond:& .mantine-ThemeIcon-root",
618
+ "color]___[value:[var(--icon-color, {colors.mantine.colors.dark[2]})]]___[cond:& .mantine-ThemeIcon-root",
619
+ "--ti-size]___[value:22px]___[cond:& .mantine-ThemeIcon-root",
620
+ "color]___[value:mantine.colors.defaultColor]___[cond:& .mantine-ThemeIcon-root<___>_hover",
621
+ "transition]___[value:all 130ms {easings.inOut}]___[cond:& > *",
622
+ "transitionTimingFunction]___[value:out]___[cond:&:hover > *",
623
+ "transform]___[value:translateX(1.6px)]___[cond:&:hover > *",
624
+ "color]___[value:[var(--view-title-color, {colors.mantine.colors.gray[7]})]",
625
+ "lineHeight]___[value:1.4",
626
+ "background]___[value:mantine.colors.gray[1]",
627
+ "padding]___[value:4px",
628
+ "flexGrow]___[value:1",
629
+ "padding]___[value:6px 8px",
630
+ "background]___[value:mantine.colors.gray[3]]___[cond:_hover",
631
+ "transition]___[value:none]___[cond:&[data-active]",
632
+ "background]___[value:mantine.colors.white]___[cond:&[data-active]",
633
+ "boxShadow]___[value:xs]___[cond:&[data-active]",
634
+ "color]___[value:mantine.colors.defaultColor]___[cond:&[data-active]",
635
+ "color]___[value:mantine.colors.white]___[cond:_dark<___>_hover",
636
+ "background]___[value:mantine.colors.dark[6]]___[cond:_dark<___>_hover",
637
+ "color]___[value:mantine.colors.white]___[cond:_dark<___>&:is([data-active])",
638
+ "background]___[value:mantine.colors.dark[5]]___[cond:_dark<___>&:is([data-active])",
639
+ "paddingLeft]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
640
+ "paddingRight]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
641
+ "width]___[value:100%]___[cond:& .mantine-ScrollArea-root",
642
+ "height]___[value:100%]___[cond:& .mantine-ScrollArea-root",
643
+ "paddingLeft]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
644
+ "paddingRight]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
645
+ "display]___[value:grid",
646
+ "gridTemplateColumns]___[value:min-content 1fr",
647
+ "gridAutoRows]___[value:min-content max-content",
648
+ "gap]___[value:[20px 16px]",
649
+ "alignItems]___[value:baseline",
650
+ "justifySelf]___[value:end",
651
+ "width]___[value:14px",
652
+ "height]___[value:14px",
653
+ "border]___[value:3.5px solid",
654
+ "borderColor]___[value:mantine.colors.dark[3]",
655
+ "borderTop]___[value:none",
656
+ "borderLeft]___[value:none",
657
+ "borderRadius]___[value:2px",
658
+ "bottom]___[value:2px",
659
+ "right]___[value:2px",
660
+ "cursor]___[value:se-resize",
661
+ "borderWidth]___[value:4px]___[cond:_hover",
662
+ "borderColor]___[value:mantine.colors.dark[1]]___[cond:_hover",
663
+ "lineClamp]___[value:1",
664
+ "marginTop]___[value:6",
665
+ "stroke]___[value:1.6",
666
+ "paddingTop]___[value:xs",
667
+ "marginBottom]___[value:sm]___[cond:&[data-level='1']",
668
+ "marginTop]___[value:0",
669
+ "marginBottom]___[value:0",
670
+ "transition]___[value:fast]___[cond:& > *",
671
+ "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > :not([data-no-transform])",
672
+ "transform]___[value:translateX(1px)]___[cond:_hover<___>& > :not([data-no-transform])",
673
+ "height]___[value:36px",
674
+ "paddingInlineStart]___[value:16px",
675
+ "paddingInlineEnd]___[value:10px",
676
+ "color]___[value:mantine.colors.gray.lightColor]___[cond:_dark",
677
+ "background]___[value:mantine.colors.gray.lightHover]___[cond:_hover",
678
+ "transition]___[value:fast]___[cond:& .tabler-icon",
679
+ "width]___[value:90%]___[cond:& .tabler-icon",
680
+ "opacity]___[value:0.65]___[cond:& .tabler-icon",
681
+ "stroke]___[value:1.2",
682
+ "offset]___[value:0",
683
+ "paddingBlock]___[value:4",
684
+ "padding]___[value:3px 6px",
685
+ "background]___[value:likec4.palette.fill/75",
686
+ "lineHeight]___[value:1.2",
687
+ "background]___[value:mantine.colors.gray[1]]___[cond:_light",
688
+ "color]___[value:mantine.colors.orange[4]]___[cond:&[data-missing]",
689
+ "background]___[value:mantine.colors.orange[8]/15]___[cond:&[data-missing]",
690
+ "borderColor]___[value:mantine.colors.orange[5]/20]___[cond:&[data-missing]",
691
+ "color]___[value:mantine.colors.orange[8]]___[cond:&[data-missing]<___>_light",
692
+ "border]___[value:1px solid {colors.mantine.colors.defaultBorder}",
693
+ "borderColor]___[value:mantine.colors.gray[3]]___[cond:_light",
694
+ "content]___[value:\"scope:\"]___[cond:_before",
695
+ "left]___[value:8]___[cond:_before",
696
+ "fontSize]___[value:2xs]___[cond:_before",
697
+ "fontWeight]___[value:500]___[cond:_before",
698
+ "lineHeight]___[value:1]___[cond:_before",
699
+ "color]___[value:mantine.colors.dimmed]___[cond:_before",
700
+ "opacity]___[value:0.85]___[cond:_before",
701
+ "transform]___[value:translateY(-100%) translateY(-2px)]___[cond:_before",
702
+ "background]___[value:mantine.colors.gray[3]]___[cond:_light<___>& .mantine-SegmentedControl-root",
703
+ "fontSize]___[value:xl",
704
+ "padding]___[value:1px 5px",
705
+ "minWidth]___[value:24",
706
+ "background]___[value:mantine.colors.dark[7]",
707
+ "color]___[value:mantine.colors.defaultColor",
708
+ "color]___[value:mantine.colors.dimmed]___[cond:&[data-zero]",
709
+ "background]___[value:mantine.colors.orange[8]/20]___[cond:&[data-missing]",
710
+ "gap]___[value:8",
711
+ "marginBottom]___[value:4",
712
+ "top]___[value:12",
713
+ "right]___[value:12",
714
+ "paddingBlock]___[value:xs",
715
+ "display]___[value:inline-flex",
716
+ "borderStyle]___[value:solid]___[cond:_hover",
717
+ "transitionTimingFunction]___[value:out]___[cond:_hover<___>& > *",
718
+ "transform]___[value:translateX(1px)]___[cond:_hover<___>& > *",
719
+ "background]___[value:mantine.colors.defaultBorder/50",
720
+ "outline]___[value:none",
721
+ "borderRadius]___[value:var(--_border-radius)",
722
+ "--_blur]___[value:0px",
723
+ "--_level]___[value:0",
724
+ "--_offset]___[value:0px",
725
+ "--_inset]___[value:calc((1 + var(--_level) * 0.75) * var(--_offset))",
726
+ "--_opacity]___[value:0%",
727
+ "--_border-radius]___[value:0px",
728
+ "cursor]___[value:zoom-out]___[cond:_backdrop",
729
+ "containerName]___[value:overlay-dialog",
730
+ "containerType]___[value:size",
731
+ "border]___[value:0 solid transparent",
732
+ "inset]___[value:[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]]___[cond:sm",
733
+ "width]___[value:calc(100vw - 2 * var(--_inset))]___[cond:sm",
734
+ "height]___[value:calc(100vh - var(--_offset) - var(--_inset))]___[cond:sm",
735
+ "--_border-radius]___[value:6px]___[cond:sm",
736
+ "padding]___[value:6px]___[cond:sm",
737
+ "--_offset]___[value:1rem]___[cond:sm",
738
+ "--_offset]___[value:1rem]___[cond:md",
739
+ "--_offset]___[value:2rem]___[cond:lg",
740
+ "--_offset]___[value:4rem]___[cond:xl",
741
+ "display]___[value:none]___[cond:_backdrop",
742
+ "backdropFilter]___[value:blur(var(--_blur))]___[cond:_backdrop",
743
+ "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity))]]___[cond:_backdrop<___>_dark",
744
+ "backgroundColor]___[value:[rgb(15 15 15/ var(--_opacity))]]___[cond:_backdrop<___>_light",
745
+ "borderRadius]___[value:calc(var(--_border-radius) - 2px)]___[cond:sm",
746
+ "position]___[value:top-right",
747
+ "position]___[value:top-left",
748
+ "marginLeft]___[value:sm",
749
+ "padding]___[value:6px 2px 0 2px",
750
+ "color]___[value:mantine.colors.text/90]___[cond:& .mantine-Text-root",
751
+ "fontSize]___[value:xs]___[cond:& .mantine-Text-root",
752
+ "fontWeight]___[value:500]___[cond:& .mantine-Text-root",
753
+ "lineHeight]___[value:1.2]___[cond:& .mantine-Text-root",
754
+ "paddingLeft]___[value:4",
755
+ "gridColumn]___[value:1",
756
+ "gridColumn]___[value:2",
757
+ "gridColumn]___[value:3",
758
+ "paddingRight]___[value:4",
759
+ "gridColumnStart]___[value:1",
760
+ "gridColumnEnd]___[value:4",
761
+ "borderBottom]___[value:1px solid",
762
+ "borderBottomColor]___[value:mantine.colors.defaultBorder",
763
+ "marginBottom]___[value:0px",
764
+ "padding]___[value:0 4px 5px 4px",
765
+ "fontSize]___[value:xxs]___[cond:& .mantine-Text-root",
766
+ "fontWeight]___[value:400]___[cond:& .mantine-Text-root",
767
+ "lineHeight]___[value:xs]___[cond:& .mantine-Text-root",
768
+ "color]___[value:mantine.colors.dimmed]___[cond:& .mantine-Text-root",
769
+ "borderBottom]___[value:none]___[cond:&:last-child .likec4-edge-label",
770
+ "marginBottom]___[value:0]___[cond:&:last-child .likec4-edge-label",
771
+ "transition]___[value:all 0.15s ease-in]___[cond:& > *",
772
+ "transition]___[value:all 0.15s ease-out]___[cond:&:is(:hover, [data-selected=true]) > *",
773
+ "cursor]___[value:pointer]___[cond:&:is(:hover, [data-selected=true]) > *",
774
+ "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:&:is(:hover, [data-selected=true]) > *",
775
+ "gridTemplateColumns]___[value:1fr 30px 1fr",
776
+ "gap]___[value:10px 12px",
777
+ "justifyItems]___[value:start",
778
+ "maxHeight]___[value:70vh",
779
+ "maxHeight]___[value:calc(100cqh - 70px)]___[cond:xs",
780
+ "borderWidth]___[value:3px",
781
+ "borderRadius]___[value:md",
782
+ "backgroundColor]___[value:mantine.colors.gray[0]]___[cond:_hover",
783
+ "backgroundColor]___[value:mantine.colors.defaultHover]___[cond:_hover<___>_dark",
784
+ "color]___[value:mantine.colors.white]___[cond:_hover<___>_dark",
785
+ "paddingBlock]___[value:3",
786
+ "stroke]___[value:3.5",
787
+ "flex]___[value:1 0 auto",
788
+ "strokeWidth]___[value:5",
789
+ "border]___[value:3px dashed",
790
+ "backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity, 95%))]",
791
+ "backgroundColor]___[value:[rgb(250 250 250 / var(--_opacity, 95%))]]___[cond:_light",
792
+ "backdropFilter]___[value:auto",
793
+ "backdropBlur]___[value:var(--_blur, 10px)",
794
+ "paddingTop]___[value:20",
795
+ "paddingLeft]___[value:16",
796
+ "paddingRight]___[value:16",
797
+ "height]___[value:100cqh]___[cond:xs",
798
+ "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport",
799
+ "minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
800
+ "height]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
801
+ "containerName]___[value:likec4-search-elements",
802
+ "paddingInline]___[value:sm",
803
+ "order]___[value:6",
804
+ "paddingRight]___[value:xs",
805
+ "marginBottom]___[value:8px",
806
+ "containerName]___[value:likec4-tree",
807
+ "containerType]___[value:inline-size",
808
+ "outline]___[value:none !important",
809
+ "marginTop]___[value:8px",
810
+ "flexDirection]___[value:column-reverse]___[cond:@container likec4-tree (max-width: 450px)",
811
+ "alignItems]___[value:flex-start]___[cond:@container likec4-tree (max-width: 450px)",
812
+ "gap]___[value:2]___[cond:@container likec4-tree (max-width: 450px)",
813
+ "lineHeight]___[value:1.3",
814
+ "background]___[value:mantine.colors.dark[9]/30",
815
+ "background]___[value:mantine.colors.gray[3]/20]___[cond:_light",
816
+ "--likec4-icon-size]___[value:24px",
817
+ "--likec4-icon-size]___[value:18px]___[cond:@container likec4-tree (max-width: 450px)",
818
+ "lineHeight]___[value:1.1",
819
+ "display]___[value:none]___[cond:@container likec4-tree (max-width: 450px)",
820
+ "maxWidth]___[value:8xl",
821
+ "paddingInline]___[value:4",
822
+ "paddingInline]___[value:6]___[cond:md",
823
+ "paddingInline]___[value:8]___[cond:lg",
824
+ "paddingBlock]___[value:md",
825
+ "order]___[value:2",
826
+ "gap]___[value:md",
827
+ "paddingLeft]___[value:48",
828
+ "opacity]___[value:0.3",
829
+ "grayscale]___[value:0",
830
+ "grayscale]___[value:0.9",
831
+ "filter]___[value:auto",
832
+ "opacity]___[value:1]___[cond:_groupHover",
833
+ "grayscale]___[value:0]___[cond:_groupHover",
834
+ "opacity]___[value:1]___[cond:_groupFocusWithin",
835
+ "grayscale]___[value:0]___[cond:_groupFocusWithin",
836
+ "opacity]___[value:0.5",
837
+ "marginRight]___[value:1",
838
+ "mainAxis]___[value:4",
839
+ "crossAxis]___[value:50",
840
+ "srOnly]___[value:true",
841
+ "opacity]___[value:0.45]___[cond:&[data-disabled] .mantine-ThemeIcon-root",
842
+ "marginTop]___[value:4px",
843
+ "fontSize]___[value:13px",
844
+ "opacity]___[value:0.85]___[cond::where(.likec4-view-btn[data-disabled]) &",
845
+ "background]___[value:mantine.colors.primary[8]",
846
+ "borderColor]___[value:mantine.colors.primary[9]",
847
+ "padding]___[value:12px 8px 12px 14px",
848
+ "minHeight]___[value:60px",
849
+ "outline]___[value:none]___[cond:_hover",
850
+ "borderColor]___[value:mantine.colors.primary[9]]___[cond:_hover",
851
+ "background]___[value:mantine.colors.primary[8]/60]___[cond:_hover",
852
+ "outline]___[value:none]___[cond:_focus",
853
+ "background]___[value:mantine.colors.primary[8]]___[cond:_focus",
854
+ "borderColor]___[value:mantine.colors.primary[9]]___[cond:_focus",
855
+ "outline]___[value:none]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
856
+ "background]___[value:mantine.colors.primary[8]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
857
+ "borderColor]___[value:mantine.colors.primary[9]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
858
+ "borderColor]___[value:transparent]___[cond:_dark",
859
+ "background]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
860
+ "background]___[value:mantine.colors.white/80]___[cond:_light",
861
+ "borderColor]___[value:mantine.colors.primary[6]]___[cond:_light<___>_hover",
862
+ "backgroundColor]___[value:mantine.colors.primary[5]]___[cond:_light<___>_hover",
863
+ "color]___[value:mantine.colors.gray[5]]___[cond:_light",
864
+ "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover",
865
+ "color]___[value:mantine.colors.primary[0]]___[cond:_groupFocus",
866
+ "color]___[value:mantine.colors.primary[0]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
867
+ "flex]___[value:0 0 var(--likec4-icon-size, 24px)",
868
+ "height]___[value:var(--likec4-icon-size, 24px)",
869
+ "width]___[value:var(--likec4-icon-size, 24px)",
870
+ "--ti-size]___[value:var(--likec4-icon-size, 24px)",
871
+ "strokeWidth]___[value:1.5]___[cond:&.likec4-shape-icon svg",
872
+ "fontSize]___[value:16px",
873
+ "opacity]___[value:0.4]___[cond::where([data-disabled]) &",
874
+ "color]___[value:mantine.colors.dark[1]",
875
+ "color]___[value:mantine.colors.primary[1]]___[cond:_groupHover",
876
+ "color]___[value:mantine.colors.white]___[cond:_groupHover<___>_light",
877
+ "color]___[value:mantine.colors.primary[1]]___[cond:_groupFocus",
878
+ "color]___[value:mantine.colors.white]___[cond:_groupFocus<___>_light",
879
+ "color]___[value:mantine.colors.primary[1]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
880
+ "color]___[value:mantine.colors.white]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &<___>_light",
881
+ "color]___[value:mantine.colors.primary[0]]___[cond:_groupHover<___>_light",
882
+ "fontSize]___[value:12px",
883
+ "opacity]___[value:0.85]___[cond::where([data-disabled]) &",
884
+ "border]___[value:2px dashed",
885
+ "fontSize]___[value:md",
886
+ "paddingBlock]___[value:xl",
887
+ "background]___[value:mantine.colors.gray[4]/55 !important]___[cond:_focusWithin",
888
+ "background]___[value:mantine.colors.dark[5]/55 !important]___[cond:_focusWithin<___>_dark",
889
+ "background]___[value:mantine.colors.gray[3]/35]___[cond:_groupHover",
890
+ "background]___[value:mantine.colors.dark[5]/35]___[cond:_groupHover<___>_dark",
891
+ "backgroundColor]___[value:[rgb(34 34 34 / 0.7)]",
892
+ "zIndex]___[value:902",
893
+ "backdropBlur]___[value:10px",
894
+ "backgroundColor]___[value:[rgb(255 255 255 / 0.6)]]___[cond:_light",
895
+ "top]___[value:2rem",
896
+ "maxWidth]___[value:600px",
897
+ "minWidth]___[value:200px",
898
+ "zIndex]___[value:903",
899
+ "marginTop]___[value:32px]___[cond:& + &",
900
+ "likec4Palette]___[value:amber",
901
+ "likec4Palette]___[value:blue",
902
+ "likec4Palette]___[value:gray",
903
+ "likec4Palette]___[value:slate",
904
+ "likec4Palette]___[value:green",
905
+ "likec4Palette]___[value:indigo",
906
+ "likec4Palette]___[value:muted",
907
+ "likec4Palette]___[value:red",
908
+ "likec4Palette]___[value:secondary",
909
+ "likec4Palette]___[value:sky",
910
+ "likec4Palette]___[value:amber.1",
911
+ "likec4Palette]___[value:amber.2",
912
+ "likec4Palette]___[value:amber.3",
913
+ "likec4Palette]___[value:amber.4",
914
+ "likec4Palette]___[value:amber.5",
915
+ "likec4Palette]___[value:blue.1",
916
+ "likec4Palette]___[value:blue.2",
917
+ "likec4Palette]___[value:blue.3",
918
+ "likec4Palette]___[value:blue.4",
919
+ "likec4Palette]___[value:blue.5",
920
+ "likec4Palette]___[value:gray.1",
921
+ "likec4Palette]___[value:gray.2",
922
+ "likec4Palette]___[value:gray.3",
923
+ "likec4Palette]___[value:gray.4",
924
+ "likec4Palette]___[value:gray.5",
925
+ "likec4Palette]___[value:slate.1",
926
+ "likec4Palette]___[value:slate.2",
927
+ "likec4Palette]___[value:slate.3",
928
+ "likec4Palette]___[value:slate.4",
929
+ "likec4Palette]___[value:slate.5",
930
+ "likec4Palette]___[value:green.1",
931
+ "likec4Palette]___[value:green.2",
932
+ "likec4Palette]___[value:green.3",
933
+ "likec4Palette]___[value:green.4",
934
+ "likec4Palette]___[value:green.5",
935
+ "likec4Palette]___[value:indigo.1",
936
+ "likec4Palette]___[value:indigo.2",
937
+ "likec4Palette]___[value:indigo.3",
938
+ "likec4Palette]___[value:indigo.4",
939
+ "likec4Palette]___[value:indigo.5",
940
+ "likec4Palette]___[value:muted.1",
941
+ "likec4Palette]___[value:muted.2",
942
+ "likec4Palette]___[value:muted.3",
943
+ "likec4Palette]___[value:muted.4",
944
+ "likec4Palette]___[value:muted.5",
945
+ "likec4Palette]___[value:primary.1",
946
+ "likec4Palette]___[value:primary.2",
947
+ "likec4Palette]___[value:primary.3",
948
+ "likec4Palette]___[value:primary.4",
949
+ "likec4Palette]___[value:primary.5",
950
+ "likec4Palette]___[value:red.1",
951
+ "likec4Palette]___[value:red.2",
952
+ "likec4Palette]___[value:red.3",
953
+ "likec4Palette]___[value:red.4",
954
+ "likec4Palette]___[value:red.5",
955
+ "likec4Palette]___[value:secondary.1",
956
+ "likec4Palette]___[value:secondary.2",
957
+ "likec4Palette]___[value:secondary.3",
958
+ "likec4Palette]___[value:secondary.4",
959
+ "likec4Palette]___[value:secondary.5",
960
+ "likec4Palette]___[value:sky.1",
961
+ "likec4Palette]___[value:sky.2",
962
+ "likec4Palette]___[value:sky.3",
963
+ "likec4Palette]___[value:sky.4",
964
+ "likec4Palette]___[value:sky.5",
965
+ "likec4RelationPalette]___[value:amber",
966
+ "likec4RelationPalette]___[value:blue",
967
+ "likec4RelationPalette]___[value:slate",
968
+ "likec4RelationPalette]___[value:green",
969
+ "likec4RelationPalette]___[value:indigo",
970
+ "likec4RelationPalette]___[value:muted",
971
+ "likec4RelationPalette]___[value:primary",
972
+ "likec4RelationPalette]___[value:red",
973
+ "likec4RelationPalette]___[value:secondary",
974
+ "likec4RelationPalette]___[value:sky"
975
+ ],
976
+ "recipes": {
977
+ "actionBtn": [
978
+ "size]___[value:md]___[recipe:actionBtn",
979
+ "radius]___[value:md]___[recipe:actionBtn",
980
+ "variant]___[value:filled]___[recipe:actionBtn",
981
+ "variant]___[value:transparent]___[recipe:actionBtn",
982
+ "size]___[value:md]___[cond:_whenHovered]___[recipe:actionBtn",
983
+ "size]___[value:md]___[cond:_hover]___[recipe:actionBtn",
984
+ "reducedGraphics]___[value:md]___[recipe:actionBtn",
985
+ "radius]___[value:md]___[cond:_whenHovered]___[recipe:actionBtn",
986
+ "radius]___[value:md]___[cond:_hover]___[recipe:actionBtn",
987
+ "variant]___[value:transparent]___[cond:_whenHovered]___[recipe:actionBtn",
988
+ "variant]___[value:transparent]___[cond:_hover]___[recipe:actionBtn",
989
+ "reducedGraphics]___[value:transparent]___[recipe:actionBtn",
990
+ "variant]___[value:filled]___[cond:_whenHovered]___[recipe:actionBtn",
991
+ "variant]___[value:filled]___[cond:_hover]___[recipe:actionBtn",
992
+ "reducedGraphics]___[value:filled]___[recipe:actionBtn"
993
+ ],
994
+ "likec4tag": [
995
+ "autoTextColor]___[value:false]___[recipe:likec4tag",
996
+ "autoTextColor]___[value:true]___[recipe:likec4tag",
997
+ "autoTextColor]___[value:true]___[cond:_hover]___[recipe:likec4tag",
998
+ "autoTextColor]___[value:false]___[cond:_hover]___[recipe:likec4tag"
999
+ ]
1000
+ }
1001
+ }
1002
+ }