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