@likec4/diagram 1.26.2 → 1.27.1

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 (487) hide show
  1. package/README.md +1 -1
  2. package/bundle/index.js +48937 -0
  3. package/dist/LikeC4CustomColors.js +27 -23
  4. package/dist/LikeC4Diagram.d.ts +1 -1
  5. package/dist/LikeC4Diagram.js +38 -43
  6. package/dist/LikeC4Diagram.props.d.ts +6 -0
  7. package/dist/LikeC4ModelProvider.js +6 -6
  8. package/dist/StaticLikeC4Diagram.js +5 -5
  9. package/dist/_virtual/_commonjsHelpers.js +5 -0
  10. package/dist/_virtual/default-map.js +7 -0
  11. package/dist/base/Background.js +6 -6
  12. package/dist/base/BaseXYFlow.d.ts +1 -1
  13. package/dist/base/BaseXYFlow.js +75 -46
  14. package/dist/base/const.js +2 -5
  15. package/dist/base/primitives/NodeHandles.js +5 -5
  16. package/dist/base/primitives/compound/CompoundActionButton.js +60 -33
  17. package/dist/base/primitives/compound/CompoundDetailsButton.js +66 -35
  18. package/dist/base/primitives/compound/CompoundNodeContainer.css.d.ts +35 -7
  19. package/dist/base/primitives/compound/CompoundNodeContainer.css.js +131 -12
  20. package/dist/base/primitives/compound/CompoundNodeContainer.d.ts +4 -20
  21. package/dist/base/primitives/compound/CompoundNodeContainer.js +99 -97
  22. package/dist/base/primitives/compound/CompoundTitle.d.ts +1 -1
  23. package/dist/base/primitives/compound/CompoundTitle.js +74 -12
  24. package/dist/base/primitives/compound/actionbtns.css.d.ts +11 -0
  25. package/dist/base/primitives/compound/actionbtns.css.js +32 -0
  26. package/dist/base/primitives/customEdge.d.ts +5 -5
  27. package/dist/base/primitives/customEdge.js +6 -7
  28. package/dist/base/primitives/customNode.js +5 -6
  29. package/dist/base/primitives/edge/EdgeActionButton.js +10 -12
  30. package/dist/base/primitives/edge/EdgeContainer.d.ts +1 -1
  31. package/dist/base/primitives/edge/EdgeContainer.js +21 -15
  32. package/dist/base/primitives/edge/EdgeLabel.css.d.ts +24 -10
  33. package/dist/base/primitives/edge/EdgeLabel.css.js +130 -20
  34. package/dist/base/primitives/edge/EdgeLabel.d.ts +4 -44
  35. package/dist/base/primitives/edge/EdgeLabel.js +35 -88
  36. package/dist/base/primitives/edge/EdgeLabelContainer.d.ts +18 -0
  37. package/dist/base/primitives/edge/EdgeLabelContainer.js +91 -0
  38. package/dist/base/primitives/edge/EdgeMarkers.js +5 -6
  39. package/dist/base/primitives/edge/EdgePath.d.ts +7 -7
  40. package/dist/base/primitives/edge/EdgePath.js +14 -29
  41. package/dist/base/primitives/edge/edge.css.d.ts +2 -2
  42. package/dist/base/primitives/edge/edge.css.js +125 -12
  43. package/dist/base/primitives/edge/xyvars.d.ts +24 -0
  44. package/dist/base/primitives/element/ElementActionButtons.js +35 -17
  45. package/dist/base/primitives/element/ElementDetailsButton.js +34 -16
  46. package/dist/base/primitives/element/ElementNodeContainer.css.d.ts +0 -1
  47. package/dist/base/primitives/element/ElementNodeContainer.css.js +51 -5
  48. package/dist/base/primitives/element/ElementNodeContainer.d.ts +1 -1
  49. package/dist/base/primitives/element/ElementNodeContainer.js +28 -19
  50. package/dist/base/primitives/element/ElementShape.css.js +107 -16
  51. package/dist/base/primitives/element/ElementShape.js +8 -10
  52. package/dist/base/primitives/element/ElementTitle.css.d.ts +33 -8
  53. package/dist/base/primitives/element/ElementTitle.css.js +196 -19
  54. package/dist/base/primitives/element/ElementTitle.js +25 -24
  55. package/dist/base/primitives/index.d.ts +1 -0
  56. package/dist/base/types.js +6 -6
  57. package/dist/base/updateEdges.js +5 -5
  58. package/dist/base/updateNodes.js +6 -6
  59. package/dist/bundle/LikeC4ModelProvider.d.ts +9 -0
  60. package/dist/bundle/LikeC4ModelProvider.js +5 -0
  61. package/dist/bundle/LikeC4View.d.ts +2 -0
  62. package/dist/bundle/LikeC4View.js +176 -0
  63. package/dist/bundle/LikeC4View.props.d.ts +207 -0
  64. package/dist/bundle/ReactLikeC4.d.ts +36 -0
  65. package/dist/bundle/ReactLikeC4.js +90 -0
  66. package/dist/bundle/ShadowRoot.d.ts +12 -0
  67. package/dist/bundle/ShadowRoot.js +52 -0
  68. package/dist/bundle/ViewNotFound.d.ts +5 -0
  69. package/dist/bundle/ViewNotFound.js +30 -0
  70. package/dist/bundle/font.css.js +3 -0
  71. package/dist/bundle/index.d.ts +5 -0
  72. package/dist/bundle/index.js +4 -0
  73. package/dist/bundle/styles.css.d.ts +10 -0
  74. package/dist/bundle/styles.css.js +145 -0
  75. package/dist/components/Link.js +62 -13
  76. package/dist/components/SearchControl.css.js +72 -9
  77. package/dist/components/SearchControl.js +11 -11
  78. package/dist/context/ControlsCustomLayout.js +5 -6
  79. package/dist/context/DiagramEventHandlers.js +8 -13
  80. package/dist/context/DiagramFeatures.js +7 -12
  81. package/dist/context/EnsureMantine.js +6 -6
  82. package/dist/context/FramerMotionConfig.js +8 -9
  83. package/dist/context/IconRenderer.js +7 -9
  84. package/dist/context/ReduceGraphics.d.ts +4 -5
  85. package/dist/context/ReduceGraphics.js +11 -43
  86. package/dist/context/RootContainer.js +23 -10
  87. package/dist/hooks/safeContext.js +5 -7
  88. package/dist/hooks/useCurrentViewId.js +6 -6
  89. package/dist/hooks/useDiagram.d.ts +5763 -5286
  90. package/dist/hooks/useDiagram.js +13 -17
  91. package/dist/hooks/useMantinePortalProps.js +5 -5
  92. package/dist/hooks/useOverlaysActor.d.ts +2 -0
  93. package/dist/hooks/useOverlaysActor.js +10 -0
  94. package/dist/hooks/useReducedGraphics.d.ts +1 -1
  95. package/dist/hooks/useSetState.js +5 -5
  96. package/dist/hooks/useUpdateEffect.js +6 -7
  97. package/dist/hooks/useXYFlow.d.ts +28 -28
  98. package/dist/hooks/useXYFlow.js +7 -11
  99. package/dist/index.d.ts +0 -1
  100. package/dist/index.js +10 -26
  101. package/dist/likec4diagram/DiagramUI.js +13 -13
  102. package/dist/likec4diagram/DiagramXYFlow.d.ts +1 -4
  103. package/dist/likec4diagram/DiagramXYFlow.js +83 -37
  104. package/dist/likec4diagram/custom/edges/NotePopover.css.js +21 -7
  105. package/dist/likec4diagram/custom/edges/NotePopover.js +18 -27
  106. package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts +9 -9
  107. package/dist/likec4diagram/custom/edges/RelationshipEdge.js +127 -122
  108. package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.d.ts +1 -0
  109. package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.js +38 -11
  110. package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.d.ts +3 -3
  111. package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js +28 -30
  112. package/dist/likec4diagram/custom/edges/edges.css.js +44 -9
  113. package/dist/likec4diagram/custom/edges/utils.js +6 -7
  114. package/dist/likec4diagram/custom/index.d.ts +9 -9
  115. package/dist/likec4diagram/custom/index.js +5 -6
  116. package/dist/likec4diagram/custom/nodes/CompoundActions.js +7 -7
  117. package/dist/likec4diagram/custom/nodes/ElementActions.js +8 -9
  118. package/dist/likec4diagram/custom/nodes/nodeTypes.js +22 -26
  119. package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js +10 -13
  120. package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.js +15 -16
  121. package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js +12 -13
  122. package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts +1 -1
  123. package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js +17 -14
  124. package/dist/likec4diagram/custom/nodes/toolbar/_shared.js +15 -20
  125. package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js +15 -5
  126. package/dist/likec4diagram/ui/controls/ChangeAutoLayoutButton.js +15 -15
  127. package/dist/likec4diagram/ui/controls/Controls.js +24 -24
  128. package/dist/likec4diagram/ui/controls/LayoutDriftNotification.js +19 -12
  129. package/dist/likec4diagram/ui/controls/ManualLayoutToolsButton.js +8 -8
  130. package/dist/likec4diagram/ui/controls/NavigationButtons.js +8 -8
  131. package/dist/likec4diagram/ui/controls/ToggleReadonly.js +7 -7
  132. package/dist/likec4diagram/ui/controls/_shared.js +4 -5
  133. package/dist/likec4diagram/ui/controls/styles.css.js +79 -17
  134. package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.js +49 -9
  135. package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js +12 -12
  136. package/dist/likec4diagram/ui/notation/NotationPanel.css.js +85 -15
  137. package/dist/likec4diagram/ui/notation/NotationPanel.js +32 -32
  138. package/dist/likec4diagram/ui/search/ElementsColumn.css.d.ts +0 -5
  139. package/dist/likec4diagram/ui/search/ElementsColumn.css.js +70 -30
  140. package/dist/likec4diagram/ui/search/ElementsColumn.js +40 -33
  141. package/dist/likec4diagram/ui/search/LikeC4Search.css.js +87 -20
  142. package/dist/likec4diagram/ui/search/LikeC4Search.js +18 -17
  143. package/dist/likec4diagram/ui/search/SearchInput.js +22 -24
  144. package/dist/likec4diagram/ui/search/ViewsColum.js +22 -22
  145. package/dist/likec4diagram/ui/search/ViewsColumn.css.d.ts +0 -2
  146. package/dist/likec4diagram/ui/search/ViewsColumn.css.js +29 -14
  147. package/dist/likec4diagram/ui/search/_shared.css.d.ts +3 -17
  148. package/dist/likec4diagram/ui/search/_shared.css.js +171 -0
  149. package/dist/likec4diagram/ui/search/state.js +12 -22
  150. package/dist/likec4diagram/ui/search/utils.js +2 -5
  151. package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.js +66 -10
  152. package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js +18 -27
  153. package/dist/likec4diagram/useLayoutConstraints.d.ts +11 -10
  154. package/dist/likec4diagram/useLayoutConstraints.js +100 -104
  155. package/dist/likec4diagram/useViewToNodesEdges.js +12 -13
  156. package/dist/likec4model/LikeC4ModelContext.js +4 -4
  157. package/dist/likec4model/useLikeC4ElementsTree.js +6 -7
  158. package/dist/likec4model/useLikeC4Model.js +6 -6
  159. package/dist/node_modules/.pnpm/mnemonist@0.40.3_patch_hash_5c12abb43fcff6fd81e53021b89075d53249640d165a2556cc1e58d71201a13a/node_modules/mnemonist/default-map.js +172 -0
  160. package/dist/overlays/Overlays.js +22 -22
  161. package/dist/overlays/element-details/ElementDetails.js +9 -9
  162. package/dist/overlays/element-details/ElementDetailsCard.css.d.ts +2 -3
  163. package/dist/overlays/element-details/ElementDetailsCard.css.js +237 -35
  164. package/dist/overlays/element-details/ElementDetailsCard.js +44 -46
  165. package/dist/overlays/element-details/TabPanelDeployments.css.js +62 -11
  166. package/dist/overlays/element-details/TabPanelDeployments.js +11 -11
  167. package/dist/overlays/element-details/TabPanelRelationships.css.js +99 -9
  168. package/dist/overlays/element-details/TabPanelRelationships.js +41 -14
  169. package/dist/overlays/element-details/TabPanelStructure.css.js +36 -7
  170. package/dist/overlays/element-details/TabPanelStructure.js +8 -9
  171. package/dist/overlays/element-details/actor.d.ts +21892 -22686
  172. package/dist/overlays/element-details/actor.js +18 -19
  173. package/dist/overlays/element-details/actorContext.js +4 -5
  174. package/dist/overlays/overlay/Overlay.css.d.ts +2 -2
  175. package/dist/overlays/overlay/Overlay.css.js +76 -98
  176. package/dist/overlays/overlay/Overlay.d.ts +2 -2
  177. package/dist/overlays/overlay/Overlay.js +99 -94
  178. package/dist/overlays/overlaysActor.d.ts +6 -6
  179. package/dist/overlays/overlaysActor.js +17 -18
  180. package/dist/overlays/relationship-details/RelationshipDetails.d.ts +49 -0
  181. package/dist/overlays/relationship-details/RelationshipDetails.js +24 -17
  182. package/dist/overlays/relationship-details/SelectEdge.css.js +82 -17
  183. package/dist/overlays/relationship-details/SelectEdge.js +15 -17
  184. package/dist/overlays/relationship-details/actor.js +9 -9
  185. package/dist/overlays/relationship-details/custom/ElementActions.js +8 -8
  186. package/dist/overlays/relationship-details/custom/edgeTypes.d.ts +44 -46
  187. package/dist/overlays/relationship-details/custom/edgeTypes.js +49 -50
  188. package/dist/overlays/relationship-details/custom/index.d.ts +2 -2
  189. package/dist/overlays/relationship-details/custom/nodeTypes.d.ts +28 -30
  190. package/dist/overlays/relationship-details/custom/nodeTypes.js +31 -35
  191. package/dist/overlays/relationship-details/hooks.js +9 -13
  192. package/dist/overlays/relationship-details/useLayoutedDetails.js +17 -19
  193. package/dist/overlays/relationships-browser/-useRelationshipsView.d.ts +8 -24
  194. package/dist/overlays/relationships-browser/-useRelationshipsView.js +50 -85
  195. package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts +48 -0
  196. package/dist/overlays/relationships-browser/RelationshipsBrowser.js +101 -101
  197. package/dist/overlays/relationships-browser/SelectElement.css.js +22 -9
  198. package/dist/overlays/relationships-browser/SelectElement.d.ts +2 -7
  199. package/dist/overlays/relationships-browser/SelectElement.js +196 -112
  200. package/dist/overlays/relationships-browser/_types.d.ts +4 -1
  201. package/dist/overlays/relationships-browser/actor.d.ts +478 -351
  202. package/dist/overlays/relationships-browser/actor.js +108 -94
  203. package/dist/overlays/relationships-browser/const.d.ts +1 -1
  204. package/dist/overlays/relationships-browser/const.js +3 -4
  205. package/dist/overlays/relationships-browser/custom/ElementActions.js +9 -9
  206. package/dist/overlays/relationships-browser/custom/EmptyNode.js +6 -6
  207. package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts +43 -44
  208. package/dist/overlays/relationships-browser/custom/edgeTypes.js +97 -65
  209. package/dist/overlays/relationships-browser/custom/index.d.ts +2 -2
  210. package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts +37 -37
  211. package/dist/overlays/relationships-browser/custom/nodeTypes.js +36 -40
  212. package/dist/overlays/relationships-browser/custom/styles.css.js +14 -5
  213. package/dist/overlays/relationships-browser/hooks.d.ts +14 -6
  214. package/dist/overlays/relationships-browser/hooks.js +25 -16
  215. package/dist/overlays/relationships-browser/useViewToNodesEdges.js +13 -18
  216. package/dist/packages/core/src/compute-view/relationships-view/compute.js +123 -0
  217. package/dist/packages/core/src/compute-view/relationships-view/utils.js +68 -0
  218. package/dist/packages/core/src/errors/index.js +15 -0
  219. package/dist/packages/core/src/utils/fqn.js +43 -0
  220. package/dist/packages/core/src/utils/guards.js +7 -0
  221. package/dist/packages/core/src/utils/iterable/filter.js +21 -0
  222. package/dist/packages/core/src/utils/iterable/map.js +18 -0
  223. package/dist/packages/core/src/utils/iterable/to.js +14 -0
  224. package/dist/src/index.ts.d.ts +2 -0
  225. package/dist/state/DiagramActorProvider.d.ts +4 -2
  226. package/dist/state/DiagramActorProvider.js +44 -52
  227. package/dist/state/aligners.js +22 -31
  228. package/dist/state/assign.js +13 -23
  229. package/dist/state/diagram-machine.d.ts +5988 -5461
  230. package/dist/state/diagram-machine.js +476 -376
  231. package/dist/state/hotkeyActor.js +5 -5
  232. package/dist/state/inspector.d.ts +1 -1
  233. package/dist/state/persistence.js +4 -4
  234. package/dist/state/syncManualLayoutActor.d.ts +1 -1
  235. package/dist/state/syncManualLayoutActor.js +10 -10
  236. package/dist/state/utils.js +4 -9
  237. package/dist/styles.css.js +3 -0
  238. package/dist/utils/vector.js +2 -4
  239. package/dist/utils/xyflow.js +7 -12
  240. package/package.json +43 -42
  241. package/src/LikeC4CustomColors.tsx +44 -20
  242. package/src/LikeC4Diagram.props.ts +32 -0
  243. package/src/LikeC4Diagram.tsx +17 -21
  244. package/src/base/BaseXYFlow.tsx +67 -43
  245. package/src/base/primitives/compound/CompoundActionButton.tsx +41 -20
  246. package/src/base/primitives/compound/CompoundDetailsButton.tsx +48 -25
  247. package/src/base/primitives/compound/CompoundNodeContainer.css.ts +111 -111
  248. package/src/base/primitives/compound/CompoundNodeContainer.tsx +92 -92
  249. package/src/base/primitives/compound/CompoundTitle.tsx +73 -7
  250. package/src/base/primitives/compound/actionbtns.css.ts +30 -0
  251. package/src/base/primitives/customEdge.ts +2 -3
  252. package/src/base/primitives/edge/EdgeActionButton.tsx +3 -5
  253. package/src/base/primitives/edge/EdgeContainer.tsx +17 -9
  254. package/src/base/primitives/edge/EdgeLabel.css.ts +110 -177
  255. package/src/base/primitives/edge/EdgeLabel.tsx +43 -114
  256. package/src/base/primitives/edge/EdgeLabelContainer.tsx +118 -0
  257. package/src/base/primitives/edge/EdgePath.tsx +28 -37
  258. package/src/base/primitives/edge/edge.css.ts +107 -132
  259. package/src/base/primitives/edge/xyvars.ts +31 -0
  260. package/src/base/primitives/element/ElementActionButtons.tsx +30 -10
  261. package/src/base/primitives/element/ElementDetailsButton.tsx +27 -8
  262. package/src/base/primitives/element/ElementNodeContainer.css.ts +44 -70
  263. package/src/base/primitives/element/ElementNodeContainer.tsx +18 -8
  264. package/src/base/primitives/element/ElementShape.css.ts +70 -114
  265. package/src/base/primitives/element/ElementShape.tsx +0 -1
  266. package/src/base/primitives/element/ElementTitle.css.ts +169 -124
  267. package/src/base/primitives/element/ElementTitle.tsx +16 -16
  268. package/src/base/primitives/index.ts +1 -0
  269. package/src/base/types.ts +2 -2
  270. package/src/bundle/LikeC4ModelProvider.tsx +12 -0
  271. package/src/bundle/LikeC4View.props.ts +249 -0
  272. package/src/bundle/LikeC4View.tsx +196 -0
  273. package/src/bundle/ReactLikeC4.tsx +148 -0
  274. package/src/bundle/ShadowRoot.tsx +60 -0
  275. package/src/bundle/ViewNotFound.tsx +25 -0
  276. package/src/bundle/font.css +251 -0
  277. package/src/bundle/index.ts +7 -0
  278. package/src/bundle/react-dom-server-mock.ts +3 -0
  279. package/src/bundle/styles.css.ts +168 -0
  280. package/src/components/Link.tsx +59 -6
  281. package/src/components/SearchControl.css.ts +52 -59
  282. package/src/components/SearchControl.tsx +2 -5
  283. package/src/context/ReduceGraphics.tsx +9 -47
  284. package/src/context/RootContainer.tsx +21 -5
  285. package/src/hooks/safeContext.tsx +2 -3
  286. package/src/hooks/useCurrentViewId.ts +4 -4
  287. package/src/hooks/useDiagram.ts +4 -3
  288. package/src/hooks/useOverlaysActor.ts +11 -0
  289. package/src/hooks/useReducedGraphics.ts +8 -1
  290. package/src/hooks/useXYFlow.ts +2 -2
  291. package/src/index.ts +1 -3
  292. package/src/likec4diagram/DiagramUI.tsx +2 -2
  293. package/src/likec4diagram/DiagramXYFlow.tsx +83 -27
  294. package/src/likec4diagram/custom/edges/NotePopover.css.ts +7 -13
  295. package/src/likec4diagram/custom/edges/RelationshipEdge.tsx +108 -90
  296. package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.ts +23 -44
  297. package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx +26 -24
  298. package/src/likec4diagram/custom/edges/edges.css.ts +25 -32
  299. package/src/likec4diagram/custom/nodes/nodeTypes.tsx +2 -2
  300. package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx +10 -6
  301. package/src/likec4diagram/custom/nodes/toolbar/styles.css.ts +8 -4
  302. package/src/likec4diagram/ui/controls/LayoutDriftNotification.tsx +8 -4
  303. package/src/likec4diagram/ui/controls/styles.css.ts +46 -57
  304. package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.ts +38 -34
  305. package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx +4 -4
  306. package/src/likec4diagram/ui/notation/NotationPanel.css.ts +44 -56
  307. package/src/likec4diagram/ui/notation/NotationPanel.tsx +17 -14
  308. package/src/likec4diagram/ui/search/ElementsColumn.css.ts +80 -85
  309. package/src/likec4diagram/ui/search/ElementsColumn.tsx +21 -14
  310. package/src/likec4diagram/ui/search/LikeC4Search.css.ts +50 -67
  311. package/src/likec4diagram/ui/search/LikeC4Search.tsx +1 -2
  312. package/src/likec4diagram/ui/search/SearchInput.tsx +2 -2
  313. package/src/likec4diagram/ui/search/ViewsColum.tsx +10 -7
  314. package/src/likec4diagram/ui/search/ViewsColumn.css.ts +29 -28
  315. package/src/likec4diagram/ui/search/_shared.css.ts +158 -74
  316. package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.ts +31 -34
  317. package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.tsx +6 -6
  318. package/src/likec4diagram/useLayoutConstraints.ts +84 -89
  319. package/src/likec4diagram/useViewToNodesEdges.ts +2 -1
  320. package/src/overlays/Overlays.tsx +7 -5
  321. package/src/overlays/element-details/ElementDetailsCard.css.ts +143 -177
  322. package/src/overlays/element-details/ElementDetailsCard.tsx +29 -29
  323. package/src/overlays/element-details/TabPanelDeployments.css.ts +49 -54
  324. package/src/overlays/element-details/TabPanelRelationships.css.ts +62 -66
  325. package/src/overlays/element-details/TabPanelRelationships.tsx +32 -3
  326. package/src/overlays/element-details/TabPanelStructure.css.ts +26 -26
  327. package/src/overlays/element-details/actor.ts +4 -2
  328. package/src/overlays/overlay/Overlay.css.ts +53 -47
  329. package/src/overlays/overlay/Overlay.tsx +102 -98
  330. package/src/overlays/overlaysActor.ts +1 -0
  331. package/src/overlays/relationship-details/RelationshipDetails.tsx +15 -3
  332. package/src/overlays/relationship-details/SelectEdge.css.ts +52 -71
  333. package/src/overlays/relationship-details/SelectEdge.tsx +1 -2
  334. package/src/overlays/relationship-details/custom/edgeTypes.tsx +35 -30
  335. package/src/overlays/relationship-details/custom/index.ts +2 -0
  336. package/src/overlays/relationship-details/custom/nodeTypes.tsx +20 -24
  337. package/src/overlays/relationship-details/custom/styles.css.ts +8 -8
  338. package/src/overlays/relationship-details/useLayoutedDetails.ts +1 -1
  339. package/src/overlays/relationships-browser/-useRelationshipsView.ts +55 -82
  340. package/src/overlays/relationships-browser/RelationshipsBrowser.tsx +39 -36
  341. package/src/overlays/relationships-browser/SelectElement.css.ts +9 -12
  342. package/src/overlays/relationships-browser/SelectElement.tsx +192 -105
  343. package/src/overlays/relationships-browser/_types.ts +4 -9
  344. package/src/overlays/relationships-browser/actor.ts +144 -123
  345. package/src/overlays/relationships-browser/const.ts +1 -1
  346. package/src/overlays/relationships-browser/custom/EmptyNode.tsx +2 -2
  347. package/src/overlays/relationships-browser/custom/edgeTypes.tsx +95 -59
  348. package/src/overlays/relationships-browser/custom/index.ts +2 -0
  349. package/src/overlays/relationships-browser/custom/nodeTypes.tsx +25 -26
  350. package/src/overlays/relationships-browser/custom/styles.css.ts +5 -6
  351. package/src/overlays/relationships-browser/hooks.ts +17 -3
  352. package/src/overlays/relationships-browser/useViewToNodesEdges.ts +4 -10
  353. package/src/state/DiagramActorProvider.tsx +37 -46
  354. package/src/state/assign.ts +2 -2
  355. package/src/state/diagram-machine.ts +477 -366
  356. package/src/state/inspector.ts +1 -1
  357. package/src/styles.css +3 -0
  358. package/dist/LikeC4Diagram.css.d.ts +0 -8
  359. package/dist/LikeC4Diagram.css.js +0 -11
  360. package/dist/base/example/RelationshipsBrowser.d.ts +0 -6
  361. package/dist/base/example/_types.d.ts +0 -20
  362. package/dist/base/example/custom.d.ts +0 -72
  363. package/dist/base/example/useViewToNodesEdges.d.ts +0 -6
  364. package/dist/base/primitives/compound/CompoundActionButton.css.d.ts +0 -2
  365. package/dist/base/primitives/compound/CompoundActionButton.css.js +0 -8
  366. package/dist/base/primitives/compound/CompoundDetailsButton.css.d.ts +0 -3
  367. package/dist/base/primitives/compound/CompoundDetailsButton.css.js +0 -8
  368. package/dist/base/primitives/compound/CompoundTitle.css.d.ts +0 -3
  369. package/dist/base/primitives/compound/CompoundTitle.css.js +0 -10
  370. package/dist/base/primitives/element/ElementActionButtons.css.d.ts +0 -3
  371. package/dist/base/primitives/element/ElementActionButtons.css.js +0 -10
  372. package/dist/base/primitives/element/ElementDetailsButton.css.d.ts +0 -3
  373. package/dist/base/primitives/element/ElementDetailsButton.css.js +0 -8
  374. package/dist/base/primitives/element/vars.css.d.ts +0 -3
  375. package/dist/base/primitives/element/vars.css.ts.vanilla.css.js +0 -1
  376. package/dist/components/Link.css.d.ts +0 -3
  377. package/dist/components/Link.css.js +0 -9
  378. package/dist/diagram.css +0 -1
  379. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Accordion/Accordion.module.css.mjs.vanilla.css.js +0 -1
  380. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.module.css.mjs.vanilla.css.js +0 -1
  381. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Affix/Affix.module.css.mjs.vanilla.css.js +0 -1
  382. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Alert/Alert.module.css.mjs.vanilla.css.js +0 -1
  383. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Anchor/Anchor.module.css.mjs.vanilla.css.js +0 -1
  384. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/AngleSlider/AngleSlider.module.css.mjs.vanilla.css.js +0 -1
  385. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/AppShell/AppShell.module.css.mjs.vanilla.css.js +0 -1
  386. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.module.css.mjs.vanilla.css.js +0 -1
  387. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Avatar/Avatar.module.css.mjs.vanilla.css.js +0 -1
  388. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/BackgroundImage/BackgroundImage.module.css.mjs.vanilla.css.js +0 -1
  389. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Badge/Badge.module.css.mjs.vanilla.css.js +0 -1
  390. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Blockquote/Blockquote.module.css.mjs.vanilla.css.js +0 -1
  391. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Breadcrumbs/Breadcrumbs.module.css.mjs.vanilla.css.js +0 -1
  392. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Burger/Burger.module.css.mjs.vanilla.css.js +0 -1
  393. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Button/Button.module.css.mjs.vanilla.css.js +0 -1
  394. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Card/Card.module.css.mjs.vanilla.css.js +0 -1
  395. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Center/Center.module.css.mjs.vanilla.css.js +0 -1
  396. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Checkbox/Checkbox.module.css.mjs.vanilla.css.js +0 -1
  397. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Checkbox/CheckboxCard/CheckboxCard.module.css.mjs.vanilla.css.js +0 -1
  398. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.css.mjs.vanilla.css.js +0 -1
  399. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Chip/Chip.module.css.mjs.vanilla.css.js +0 -1
  400. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/CloseButton/CloseButton.module.css.mjs.vanilla.css.js +0 -1
  401. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Code/Code.module.css.mjs.vanilla.css.js +0 -1
  402. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ColorInput/ColorInput.module.css.mjs.vanilla.css.js +0 -1
  403. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ColorPicker/ColorPicker.module.css.mjs.vanilla.css.js +0 -1
  404. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ColorSwatch/ColorSwatch.module.css.mjs.vanilla.css.js +0 -1
  405. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Combobox/Combobox.module.css.mjs.vanilla.css.js +0 -1
  406. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Container/Container.module.css.mjs.vanilla.css.js +0 -1
  407. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Dialog/Dialog.module.css.mjs.vanilla.css.js +0 -1
  408. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Divider/Divider.module.css.mjs.vanilla.css.js +0 -1
  409. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Drawer/Drawer.module.css.mjs.vanilla.css.js +0 -1
  410. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Fieldset/Fieldset.module.css.mjs.vanilla.css.js +0 -1
  411. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Flex/Flex.module.css.mjs.vanilla.css.js +0 -1
  412. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/FloatingIndicator/FloatingIndicator.module.css.mjs.vanilla.css.js +0 -1
  413. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Grid/Grid.module.css.mjs.vanilla.css.js +0 -1
  414. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Group/Group.module.css.mjs.vanilla.css.js +0 -1
  415. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Image/Image.module.css.mjs.vanilla.css.js +0 -1
  416. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Indicator/Indicator.module.css.mjs.vanilla.css.js +0 -1
  417. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/InlineInput/InlineInput.module.css.mjs.vanilla.css.js +0 -1
  418. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Input/Input.module.css.mjs.vanilla.css.js +0 -1
  419. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Kbd/Kbd.module.css.mjs.vanilla.css.js +0 -1
  420. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/List/List.module.css.mjs.vanilla.css.js +0 -1
  421. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Loader/Loader.module.css.mjs.vanilla.css.js +0 -1
  422. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/LoadingOverlay/LoadingOverlay.module.css.mjs.vanilla.css.js +0 -1
  423. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Mark/Mark.module.css.mjs.vanilla.css.js +0 -1
  424. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Menu/Menu.module.css.mjs.vanilla.css.js +0 -1
  425. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Modal/Modal.module.css.mjs.vanilla.css.js +0 -1
  426. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ModalBase/ModalBase.module.css.mjs.vanilla.css.js +0 -1
  427. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/NavLink/NavLink.module.css.mjs.vanilla.css.js +0 -1
  428. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Notification/Notification.module.css.mjs.vanilla.css.js +0 -1
  429. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/NumberInput/NumberInput.module.css.mjs.vanilla.css.js +0 -1
  430. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Overlay/Overlay.module.css.mjs.vanilla.css.js +0 -1
  431. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Pagination/Pagination.module.css.mjs.vanilla.css.js +0 -1
  432. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Paper/Paper.module.css.mjs.vanilla.css.js +0 -1
  433. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/PasswordInput/PasswordInput.module.css.mjs.vanilla.css.js +0 -1
  434. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Pill/Pill.module.css.mjs.vanilla.css.js +0 -1
  435. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/PillsInput/PillsInput.module.css.mjs.vanilla.css.js +0 -1
  436. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/PinInput/PinInput.module.css.mjs.vanilla.css.js +0 -1
  437. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Popover/Popover.module.css.mjs.vanilla.css.js +0 -1
  438. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Progress/Progress.module.css.mjs.vanilla.css.js +0 -1
  439. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Radio/Radio.module.css.mjs.vanilla.css.js +0 -1
  440. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Radio/RadioCard/RadioCard.module.css.mjs.vanilla.css.js +0 -1
  441. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Radio/RadioIndicator/RadioIndicator.module.css.mjs.vanilla.css.js +0 -1
  442. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Rating/Rating.module.css.mjs.vanilla.css.js +0 -1
  443. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/RingProgress/RingProgress.module.css.mjs.vanilla.css.js +0 -1
  444. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.module.css.mjs.vanilla.css.js +0 -1
  445. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/SegmentedControl/SegmentedControl.module.css.mjs.vanilla.css.js +0 -1
  446. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/SemiCircleProgress/SemiCircleProgress.module.css.mjs.vanilla.css.js +0 -1
  447. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/SimpleGrid/SimpleGrid.module.css.mjs.vanilla.css.js +0 -1
  448. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Skeleton/Skeleton.module.css.mjs.vanilla.css.js +0 -1
  449. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Slider/Slider.module.css.mjs.vanilla.css.js +0 -1
  450. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Spoiler/Spoiler.module.css.mjs.vanilla.css.js +0 -1
  451. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Stack/Stack.module.css.mjs.vanilla.css.js +0 -1
  452. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Stepper/Stepper.module.css.mjs.vanilla.css.js +0 -1
  453. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Switch/Switch.module.css.mjs.vanilla.css.js +0 -1
  454. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Table/Table.module.css.mjs.vanilla.css.js +0 -1
  455. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/TableOfContents/TableOfContents.module.css.mjs.vanilla.css.js +0 -1
  456. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Tabs/Tabs.module.css.mjs.vanilla.css.js +0 -1
  457. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Text/Text.module.css.mjs.vanilla.css.js +0 -1
  458. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/ThemeIcon/ThemeIcon.module.css.mjs.vanilla.css.js +0 -1
  459. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Timeline/Timeline.module.css.mjs.vanilla.css.js +0 -1
  460. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Title/Title.module.css.mjs.vanilla.css.js +0 -1
  461. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Tooltip/Tooltip.module.css.mjs.vanilla.css.js +0 -1
  462. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/Tree/Tree.module.css.mjs.vanilla.css.js +0 -1
  463. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/TypographyStylesProvider/TypographyStylesProvider.module.css.mjs.vanilla.css.js +0 -1
  464. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.module.css.mjs.vanilla.css.js +0 -1
  465. package/dist/node_modules/.pnpm/@mantine_core@7.17.1_@mantine_hooks@7.17.1_react@19.0.0__@types_react@19.0.10_react-dom_fbfa2b80048a2180882527b4a447e1ea/node_modules/@mantine/core/esm/components/VisuallyHidden/VisuallyHidden.module.css.mjs.vanilla.css.js +0 -1
  466. package/dist/theme-vars.css.d.ts +0 -63
  467. package/dist/theme-vars.css.js +0 -7
  468. package/dist/theme-vars.css.ts.vanilla.css.js +0 -1
  469. package/dist/theme-vars.d.ts +0 -16
  470. package/dist/theme-vars.js +0 -7
  471. package/dist/utils/css.js +0 -10
  472. package/src/LikeC4Diagram.css.ts +0 -198
  473. package/src/base/example/RelationshipsBrowser.tsx +0 -62
  474. package/src/base/example/_types.ts +0 -72
  475. package/src/base/example/custom.tsx +0 -58
  476. package/src/base/example/useViewToNodesEdges.ts +0 -194
  477. package/src/base/primitives/compound/CompoundActionButton.css.ts +0 -52
  478. package/src/base/primitives/compound/CompoundDetailsButton.css.ts +0 -58
  479. package/src/base/primitives/compound/CompoundTitle.css.ts +0 -65
  480. package/src/base/primitives/element/ElementActionButtons.css.ts +0 -52
  481. package/src/base/primitives/element/ElementDetailsButton.css.ts +0 -50
  482. package/src/base/primitives/element/vars.css.ts +0 -5
  483. package/src/components/Link.css.ts +0 -49
  484. package/src/overlays/relationship-details/custom/index.tsx +0 -2
  485. package/src/overlays/relationships-browser/custom/index.tsx +0 -2
  486. package/src/theme-vars.css.ts +0 -69
  487. package/src/theme-vars.ts +0 -25
package/dist/theme-vars.css.d.ts DELETED
@@ -1,63 +0,0 @@
1
- export declare const vars: {
2
- safariAnimationHook: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3
- default: {
4
- font: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
5
- };
6
- likec4: {
7
- font: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8
- background: {
9
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10
- pattern: {
11
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
12
- };
13
- };
14
- };
15
- compound: {
16
- font: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17
- titleColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
18
- };
19
- element: {
20
- font: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
21
- fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
22
- stroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
23
- hiContrast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
24
- loContrast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
25
- };
26
- relation: {
27
- lineColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
- labelColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
29
- labelBgColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
- };
31
- optionsPanel: {
32
- top: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
33
- right: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
34
- };
35
- navigationPanel: {
36
- top: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
37
- left: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
38
- };
39
- };
40
- export declare const xyvars: {
41
- background: {
42
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
43
- pattern: {
44
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
45
- };
46
- };
47
- edge: {
48
- stroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
49
- strokeSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
50
- labelColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
51
- labelBgColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
52
- strokeWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
53
- };
54
- node: {
55
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
56
- border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
57
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
- groupBackgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
- boxshadowHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
- boxshadowSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
- };
63
- };
package/dist/theme-vars.css.js DELETED
@@ -1,7 +0,0 @@
1
- import "./theme-vars.css.ts.vanilla.css.js";
2
- var vars = { safariAnimationHook: "var(--likec4-safari-animation-hook)", "default": { font: "var(--likec4-default-font-family)" }, likec4: { font: "var(--likec4-font-family)", background: { color: "var(--likec4-background-color)", pattern: { color: "var(--likec4-background-pattern-color)" } } }, compound: { font: "var(--likec4-compound-font-family)", titleColor: "var(--likec4-compound-title-color)" }, element: { font: "var(--likec4-element-font-family)", fill: "var(--likec4-element-fill)", stroke: "var(--likec4-element-stroke)", hiContrast: "var(--likec4-element-hiContrast)", loContrast: "var(--likec4-element-loContrast)" }, relation: { lineColor: "var(--likec4-relation-lineColor)", labelColor: "var(--likec4-relation-labelColor)", labelBgColor: "var(--likec4-relation-labelBg)" }, optionsPanel: { top: "var(--likec4-options-webview-top)", right: "var(--likec4-options-webview-right)" }, navigationPanel: { top: "var(--likec4-navigation-webview-top)", left: "var(--likec4-navigation-webview-left)" } };
3
- var xyvars = { background: { color: "var(--xy-background-color)", pattern: { color: "var(--xy-background-pattern-color)" } }, edge: { stroke: "var(--xy-edge-stroke)", strokeSelected: "var(--xy-edge-stroke-selected)", labelColor: "var(--xy-edge-label-color)", labelBgColor: "var(--xy-edge-label-background-color)", strokeWidth: "var(--xy-edge-stroke-width)" }, node: { color: "var(--xy-node-color)", border: "var(--xy-node-border)", backgroundColor: "var(--xy-node-background-color)", groupBackgroundColor: "var(--xy-node-group-background-color)", boxshadowHover: "var(--xy-node-boxshadow-hover)", boxshadowSelected: "var(--xy-node-boxshadow-selected)", borderRadius: "var(--xy-node-border-radius)" } };
4
- export {
5
- vars,
6
- xyvars
7
- };
package/dist/theme-vars.css.ts.vanilla.css.js DELETED
@@ -1 +0,0 @@
1
-
package/dist/theme-vars.d.ts DELETED
@@ -1,16 +0,0 @@
1
- import { MantineVars } from '@mantine/vanilla-extract';
2
- export { vars, xyvars, } from './theme-vars.css';
3
- export declare const rootClassName = "likec4-diagram-root";
4
- export declare const whereNotReducedGraphics = ":where(.likec4-diagram-root:not([data-likec4-reduced-graphics]))";
5
- export declare const whereReducedGraphics = ":where(.likec4-diagram-root:is([data-likec4-reduced-graphics=\"true\"]))";
6
- export declare const whereSmallZoom = ":where([data-likec4-zoom-small=\"true\"])";
7
- export declare const whereLight = ":where([data-mantine-color-scheme=\"light\"])";
8
- export declare const whereDark = ":where([data-mantine-color-scheme=\"dark\"])";
9
- export declare const easings: {
10
- out: string;
11
- inOut: string;
12
- };
13
- export declare const transitions: {
14
- fast: string;
15
- };
16
- export declare const mantine: MantineVars;
package/dist/theme-vars.js DELETED
@@ -1,7 +0,0 @@
1
- import { themeToVars } from "@mantine/vanilla-extract";
2
- const rootClassName = "likec4-diagram-root";
3
- const mantine = themeToVars({});
4
- export {
5
- mantine,
6
- rootClassName
7
- };
package/dist/utils/css.js DELETED
@@ -1,10 +0,0 @@
1
- function getVarName(variable) {
2
- var matches = variable.match(/^var\((.*)\)$/);
3
- if (matches) {
4
- return matches[1];
5
- }
6
- return variable;
7
- }
8
- export {
9
- getVarName
10
- };
package/src/LikeC4Diagram.css.ts DELETED
@@ -1,198 +0,0 @@
1
- import { defaultTheme } from '@likec4/core'
2
- import { createGlobalTheme, globalStyle, style } from '@vanilla-extract/css'
3
- import { scale, toHex } from 'khroma'
4
- import { keys, omit } from 'remeda'
5
- import {
6
- mantine,
7
- rootClassName,
8
- vars,
9
- whereDark,
10
- whereNotReducedGraphics,
11
- whereReducedGraphics,
12
- xyvars,
13
- } from './theme-vars'
14
-
15
- export const cssReactFlow = style({
16
- '@supports': {
17
- // https://wojtek.im/journal/targeting-safari-with-css-media-query
18
- '(hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)': {
19
- // TODO: this workaround disables animations in Safari (to improve performance)
20
- vars: {
21
- [vars.safariAnimationHook]: '',
22
- },
23
- },
24
- },
25
- })
26
-
27
- export const reactFlowReducedGraphics = `${whereReducedGraphics} ${cssReactFlow}`
28
- export const reactFlow = `${whereNotReducedGraphics} ${cssReactFlow}`
29
-
30
- export const notInitialized = style({
31
- opacity: 0,
32
- })
33
- globalStyle(`.react-flow.not-initialized`, {
34
- opacity: 0,
35
- })
36
-
37
- globalStyle(`.react-flow${cssReactFlow}`, {
38
- vars: {
39
- [xyvars.background.color]: vars.likec4.background.color,
40
- [xyvars.background.pattern.color]: vars.likec4.background.pattern.color,
41
- },
42
- })
43
-
44
- globalStyle(`.react-flow${cssReactFlow} .react-flow__pane`, {
45
- WebkitUserSelect: 'none',
46
- })
47
- export const cssDisablePan = style({})
48
-
49
- export const cssTransparentBg = style({})
50
-
51
- globalStyle(`.react-flow${cssReactFlow}${cssTransparentBg}`, {
52
- backgroundColor: 'transparent !important',
53
- vars: {
54
- [vars.likec4.background.color]: 'transparent !important',
55
- [xyvars.background.color]: 'transparent !important',
56
- },
57
- })
58
-
59
- globalStyle(`:where(.react-flow${cssReactFlow}, ${cssTransparentBg}) .react-flow__attribution`, {
60
- display: 'none',
61
- })
62
-
63
- export const hiddenIfZoomTooSmall = style({
64
- selectors: {
65
- [`:where([data-likec4-zoom-small="true"]) &`]: {
66
- visibility: 'hidden',
67
- },
68
- },
69
- })
70
-
71
- export const hiddenIfReducedGraphics = style({
72
- selectors: {
73
- [`${reactFlowReducedGraphics} &`]: {
74
- visibility: 'hidden',
75
- },
76
- },
77
- })
78
-
79
- globalStyle(`.${rootClassName}`, {
80
- overflow: 'hidden',
81
- position: 'relative',
82
- width: '100%',
83
- height: '100%',
84
- padding: 0,
85
- margin: 0,
86
- boxSizing: 'border-box',
87
- WebkitFontSmoothing: mantine.webkitFontSmoothing,
88
- MozOsxFontSmoothing: mantine.mozFontSmoothing,
89
- })
90
- globalStyle(`:where(.${rootClassName}) .mantine-ActionIcon-icon .tabler-icon`, {
91
- width: '75%',
92
- height: '75%',
93
- })
94
-
95
- createGlobalTheme(`.${rootClassName}`, {
96
- ...omit(vars, ['optionsPanel', 'navigationPanel', 'safariAnimationHook', 'default']),
97
- }, {
98
- likec4: {
99
- font:
100
- `var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"')`,
101
- background: {
102
- color: mantine.colors.body,
103
- pattern: {
104
- color: mantine.colors.gray[4],
105
- },
106
- },
107
- },
108
- compound: {
109
- font: vars.likec4.font,
110
- titleColor: vars.element.loContrast,
111
- },
112
- element: {
113
- font: vars.likec4.font,
114
- ...defaultTheme.elements.primary,
115
- },
116
- relation: {
117
- ...defaultTheme.relationships.slate,
118
- },
119
- })
120
-
121
- createGlobalTheme(`${whereDark} .${rootClassName}`, {
122
- likec4: {
123
- background: {
124
- pattern: {
125
- color: vars.likec4.background.pattern.color,
126
- },
127
- },
128
- },
129
- }, {
130
- likec4: {
131
- background: {
132
- pattern: {
133
- color: mantine.colors.dark[5],
134
- },
135
- },
136
- },
137
- })
138
-
139
- for (const color of keys(defaultTheme.elements)) {
140
- createGlobalTheme(`:where([data-likec4-color='${color}'])`, {
141
- element: {
142
- fill: vars.element.fill,
143
- stroke: vars.element.stroke,
144
- hiContrast: vars.element.hiContrast,
145
- loContrast: vars.element.loContrast,
146
- },
147
- compound: {
148
- titleColor: vars.compound.titleColor,
149
- },
150
- relation: vars.relation,
151
- }, {
152
- element: defaultTheme.elements[color],
153
- compound: {
154
- titleColor: defaultTheme.elements[color].loContrast,
155
- },
156
- relation: defaultTheme.relationships[color],
157
- })
158
-
159
- const compoundDarkColor = (color: string, depth: number) =>
160
- toHex(
161
- scale(color, {
162
- l: -22 - 5 * depth,
163
- s: -10 - 6 * depth,
164
- }),
165
- )
166
- const compoundLightColor = (color: string, depth: number) =>
167
- toHex(
168
- scale(color, {
169
- l: -20 - 3 * depth,
170
- s: -3 - 6 * depth,
171
- }),
172
- )
173
-
174
- const compounds = {
175
- fill: vars.element.fill,
176
- stroke: vars.element.stroke,
177
- }
178
-
179
- for (let depth = 1; depth <= 6; depth++) {
180
- createGlobalTheme(
181
- `:where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
182
- compounds,
183
- {
184
- fill: compoundLightColor(defaultTheme.elements[color].fill, depth),
185
- stroke: compoundLightColor(defaultTheme.elements[color].stroke, depth),
186
- },
187
- )
188
-
189
- createGlobalTheme(
190
- `${whereDark} :where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
191
- compounds,
192
- {
193
- fill: compoundDarkColor(defaultTheme.elements[color].fill, depth),
194
- stroke: compoundDarkColor(defaultTheme.elements[color].stroke, depth),
195
- },
196
- )
197
- }
198
- }
package/src/base/example/RelationshipsBrowser.tsx DELETED
@@ -1,62 +0,0 @@
1
- import type { DiagramView } from '@likec4/core'
2
- import { useEdgesState, useNodesState } from '@xyflow/react'
3
- import { useRef } from 'react'
4
- import { BaseXYFlow } from '../../base/BaseXYFlow'
5
- import { updateEdges } from '../../base/updateEdges'
6
- import { updateNodes } from '../../base/updateNodes'
7
- import { DiagramFeatures } from '../../context'
8
- import { useUpdateEffect } from '../../hooks'
9
- import type { ExampleTypes as Types } from './_types'
10
- import { edgeTypes, nodeTypes } from './custom'
11
- import { useViewToNodesEdges } from './useViewToNodesEdges'
12
-
13
- type ExampleProps = {
14
- view: DiagramView
15
- }
16
-
17
- export function Example({ view }: ExampleProps) {
18
- const initialRef = useRef<{
19
- defaultNodes: Types.Node[]
20
- defaultEdges: Types.Edge[]
21
- initialWidth: number
22
- initialHeight: number
23
- }>(null)
24
-
25
- const {
26
- xynodes,
27
- xyedges,
28
- } = useViewToNodesEdges(view)
29
-
30
- if (initialRef.current == null) {
31
- initialRef.current = {
32
- defaultNodes: xynodes,
33
- defaultEdges: xyedges,
34
- initialWidth: view.bounds.width,
35
- initialHeight: view.bounds.height,
36
- }
37
- }
38
-
39
- const [nodes, setNodes, onNodesChange] = useNodesState(xynodes)
40
- const [edges, setEdges, onEdgesChange] = useEdgesState(xyedges)
41
-
42
- useUpdateEffect(() => {
43
- setNodes(updateNodes(xynodes))
44
- setEdges(updateEdges(xyedges))
45
- }, [xynodes, xyedges])
46
-
47
- return (
48
- <DiagramFeatures.Overlays>
49
- <BaseXYFlow<Types.Node, Types.Edge>
50
- id="example"
51
- nodes={nodes}
52
- edges={edges}
53
- nodeTypes={nodeTypes}
54
- edgeTypes={edgeTypes}
55
- onEdgesChange={onEdgesChange}
56
- onNodesChange={onNodesChange}
57
- pannable
58
- zoomable
59
- />
60
- </DiagramFeatures.Overlays>
61
- )
62
- }
package/src/base/example/_types.ts DELETED
@@ -1,72 +0,0 @@
1
- import type { Color, DiagramNode, Fqn, IconUrl } from '@likec4/core'
2
- import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../types'
3
-
4
- export namespace ExampleTypes {
5
- // type Column = 'incomers' | 'subjects' | 'outgoers'
6
-
7
- export type ElementNodeData = Base.NodeData<
8
- & NonOptional<
9
- Pick<
10
- DiagramNode,
11
- | 'title'
12
- | 'technology'
13
- | 'description'
14
- | 'color'
15
- | 'shape'
16
- | 'style'
17
- | 'width'
18
- | 'height'
19
- | 'navigateTo'
20
- >
21
- >
22
- & {
23
- // column: Column
24
- fqn: Fqn
25
- icon: string | null
26
- }
27
- >
28
-
29
- export type CompoundNodeData = Base.NodeData<
30
- & NonOptional<
31
- Pick<
32
- DiagramNode,
33
- | 'title'
34
- | 'color'
35
- | 'shape'
36
- | 'style'
37
- >
38
- >
39
- & {
40
- // column: Column
41
- fqn: Fqn
42
- depth: number
43
- icon: IconUrl
44
- }
45
- >
46
-
47
- export type ElementNode = ReactFlowNode<ElementNodeData, 'element'>
48
-
49
- export type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>
50
-
51
- // export type NonEmptyNode = ElementNode | CompoundNode
52
-
53
- // export type EmptyNode = AddNodeData<SharedFlowTypes.EmptyNode, RelationshipsOfNodeData>
54
-
55
- export type Node = ElementNode | CompoundNode
56
-
57
- /**
58
- * Data that is exclusive to the relationships-of overlay. It will be merged into the edge types
59
- * provided by SharedFlowTypes.
60
- */
61
- type RelationshipsOfEdgeData = {
62
- existsInCurrentView: boolean
63
- }
64
-
65
- // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
66
-
67
- export type EdgeData = Base.EdgeData<{
68
- color: Color | undefined
69
- }>
70
-
71
- export type Edge = ReactFlowEdge<EdgeData, 'relationships'>
72
- }