@likec4/diagram 1.58.0 → 1.59.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 (229) hide show
  1. package/dist/LikeC4Diagram.js +1 -1
  2. package/dist/LikeC4Diagram.props.d.ts +1 -1
  3. package/dist/LikeC4Styles.js +1 -1
  4. package/dist/LikeC4View.js +2 -2
  5. package/dist/ReactLikeC4.d.ts +1 -1
  6. package/dist/base/Base.d.ts +3 -2
  7. package/dist/base/Base.js +14 -26
  8. package/dist/base/BaseXYFlow.d.ts +2 -1
  9. package/dist/base/BaseXYFlow.js +63 -4
  10. package/dist/base/keyboardZoom.d.ts +3 -0
  11. package/dist/base/keyboardZoom.js +20 -0
  12. package/dist/base/updateEdges.js +7 -16
  13. package/dist/base/updateNodes.js +3 -9
  14. package/dist/base-primitives/compound/CompoundActionButton.d.ts +2 -1
  15. package/dist/base-primitives/compound/CompoundActionButton.js +5 -2
  16. package/dist/base-primitives/compound/CompoundDetailsButton.d.ts +2 -1
  17. package/dist/base-primitives/compound/CompoundDetailsButton.js +5 -2
  18. package/dist/base-primitives/compound/CompoundTitle.d.ts +7 -1
  19. package/dist/base-primitives/compound/CompoundTitle.js +2 -1
  20. package/dist/base-primitives/compound/actionbtns.css.d.ts +1 -1
  21. package/dist/base-primitives/edge/EdgeActionButton.d.ts +2 -1
  22. package/dist/base-primitives/edge/EdgeActionButton.js +2 -1
  23. package/dist/base-primitives/edge/EdgeContainer.d.ts +1 -1
  24. package/dist/base-primitives/edge/EdgeContainer.js +4 -2
  25. package/dist/base-primitives/edge/EdgeLabel.d.ts +2 -0
  26. package/dist/base-primitives/edge/EdgeLabel.js +2 -5
  27. package/dist/base-primitives/element/ElementActionButtons.d.ts +1 -0
  28. package/dist/base-primitives/element/ElementActionButtons.js +4 -1
  29. package/dist/base-primitives/element/ElementData.d.ts +3 -1
  30. package/dist/base-primitives/element/ElementData.js +2 -1
  31. package/dist/base-primitives/element/ElementDetailsButton.d.ts +2 -1
  32. package/dist/base-primitives/element/ElementDetailsButton.js +5 -2
  33. package/dist/base-primitives/element/ElementNodeContainer.js +1 -1
  34. package/dist/base-primitives/element/ElementShape.js +3 -0
  35. package/dist/components/ErrorFallback.js +3 -5
  36. package/dist/components/Link.js +6 -6
  37. package/dist/components/NavigationPanel.js +1 -1
  38. package/dist/components/SearchControl.css.js +11 -11
  39. package/dist/context/TagStylesContext.d.ts +3 -3
  40. package/dist/context/TagStylesContext.js +16 -16
  41. package/dist/custom/index.d.ts +1 -0
  42. package/dist/custom/index.js +3 -2
  43. package/dist/editor/actor/actions.js +1 -1
  44. package/dist/editor/actor/machine.d.ts +4 -6
  45. package/dist/editor/actor/setup.d.ts +16 -2
  46. package/dist/editor/actor/setup.js +5 -4
  47. package/dist/hooks/index.d.ts +1 -1
  48. package/dist/hooks/safeContext.d.ts +156 -3
  49. package/dist/hooks/safeContext.js +60 -12
  50. package/dist/hooks/useCurrentViewModel.js +1 -1
  51. package/dist/hooks/useDiagram.d.ts +8 -0
  52. package/dist/hooks/useDiagram.js +9 -2
  53. package/dist/hooks/useEditorActor.js +1 -1
  54. package/dist/hooks/useLikeC4ElementsTree.js +1 -1
  55. package/dist/hooks/useLikeC4Model.js +1 -1
  56. package/dist/hooks/useXYFlow.d.ts +1 -0
  57. package/dist/hooks/useXYFlow.js +5 -3
  58. package/dist/index.d.ts +1 -1
  59. package/dist/index.js +2 -2
  60. package/dist/likec4diagram/DiagramUI.js +19 -6
  61. package/dist/likec4diagram/DiagramXYFlow.js +39 -14
  62. package/dist/likec4diagram/convert-to-xyflow.d.ts +3 -5
  63. package/dist/likec4diagram/convert-to-xyflow.js +29 -10
  64. package/dist/likec4diagram/custom/edges/RelationshipEdge.js +13 -4
  65. package/dist/likec4diagram/custom/edges/SequenceStepEdge.js +11 -4
  66. package/dist/likec4diagram/custom/edges/edges.css.js +1 -1
  67. package/dist/likec4diagram/custom/index.d.ts +2 -1
  68. package/dist/likec4diagram/custom/index.js +5 -3
  69. package/dist/likec4diagram/custom/nodes/CompoundActions.js +1 -0
  70. package/dist/likec4diagram/custom/nodes/ElementActions.d.ts +2 -2
  71. package/dist/likec4diagram/custom/nodes/ElementActions.js +13 -3
  72. package/dist/likec4diagram/custom/nodes/NodeNotes.js +0 -4
  73. package/dist/likec4diagram/custom/nodes/SequenceActorNode.js +32 -19
  74. package/dist/likec4diagram/custom/nodes/SequenceSubFlow.d.ts +2 -0
  75. package/dist/likec4diagram/custom/nodes/SequenceSubFlow.js +234 -0
  76. package/dist/likec4diagram/custom/nodes/index.d.ts +1 -0
  77. package/dist/likec4diagram/custom/nodes/nodes.js +20 -5
  78. package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js +1 -1
  79. package/dist/likec4diagram/custom/nodes/toolbar/_shared.js +1 -1
  80. package/dist/likec4diagram/relationship-popover/RelationshipPopover.js +15 -14
  81. package/dist/likec4diagram/relationship-popover/components.d.ts +1 -1
  82. package/dist/likec4diagram/state/DiagramActorProvider.js +11 -20
  83. package/dist/likec4diagram/state/aligners.js +1 -1
  84. package/dist/likec4diagram/state/assign.d.ts +1 -1
  85. package/dist/likec4diagram/state/assign.js +1 -1
  86. package/dist/likec4diagram/state/createViewChange.js +1 -1
  87. package/dist/likec4diagram/state/diagram-api.d.ts +18 -10
  88. package/dist/likec4diagram/state/diagram-api.js +333 -229
  89. package/dist/likec4diagram/state/machine.actions.d.ts +1026 -332
  90. package/dist/likec4diagram/state/machine.actions.js +115 -44
  91. package/dist/likec4diagram/state/machine.actions.layout.d.ts +123 -51
  92. package/dist/likec4diagram/state/machine.actions.layout.js +40 -33
  93. package/dist/likec4diagram/state/machine.d.ts +154 -16
  94. package/dist/likec4diagram/state/machine.js +5 -41
  95. package/dist/likec4diagram/state/machine.setup.d.ts +84 -19
  96. package/dist/likec4diagram/state/machine.setup.js +65 -12
  97. package/dist/likec4diagram/state/machine.state.initializing.d.ts +59 -33
  98. package/dist/likec4diagram/state/machine.state.navigating.js +7 -3
  99. package/dist/likec4diagram/state/machine.state.ready.d.ts +1540 -476
  100. package/dist/likec4diagram/state/machine.state.ready.focused.d.ts +294 -53
  101. package/dist/likec4diagram/state/machine.state.ready.focused.js +3 -3
  102. package/dist/likec4diagram/state/machine.state.ready.idle.d.ts +264 -73
  103. package/dist/likec4diagram/state/machine.state.ready.idle.js +31 -6
  104. package/dist/likec4diagram/state/machine.state.ready.js +22 -16
  105. package/dist/likec4diagram/state/machine.state.ready.printing.d.ts +23 -9
  106. package/dist/likec4diagram/state/machine.state.ready.walkthrough.d.ts +288 -84
  107. package/dist/likec4diagram/state/machine.state.ready.walkthrough.js +135 -66
  108. package/dist/likec4diagram/state/types.d.ts +4 -2
  109. package/dist/likec4diagram/state/utils.d.ts +7 -0
  110. package/dist/likec4diagram/state/utils.js +36 -34
  111. package/dist/likec4diagram/types.d.ts +47 -3
  112. package/dist/likec4diagram/ui/FloatingSequenceActors.d.ts +6 -0
  113. package/dist/likec4diagram/ui/FloatingSequenceActors.js +155 -0
  114. package/dist/likec4diagram/ui/LayoutDriftFrame.js +2 -2
  115. package/dist/likec4diagram/ui/index.d.ts +2 -0
  116. package/dist/likec4diagram/ui/notation/NotationPanel.css.js +5 -5
  117. package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.d.ts +2 -0
  118. package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.js +540 -0
  119. package/dist/likec4diagram/ui/sequence-outline/state.d.ts +36 -0
  120. package/dist/likec4diagram/ui/sequence-outline/state.js +55 -0
  121. package/dist/likec4diagram/xyflow-diagram/diagram-view.d.ts +1 -1
  122. package/dist/likec4diagram/xyflow-diagram/diagram-view.js +112 -60
  123. package/dist/likec4diagram/xyflow-sequence/_types.d.ts +55 -5
  124. package/dist/likec4diagram/xyflow-sequence/const.d.ts +5 -5
  125. package/dist/likec4diagram/xyflow-sequence/const.js +4 -4
  126. package/dist/likec4diagram/xyflow-sequence/layouter.d.ts +30 -6
  127. package/dist/likec4diagram/xyflow-sequence/layouter.js +566 -0
  128. package/dist/likec4diagram/xyflow-sequence/{sequence-layout.d.ts → sequence-view-to-xy.d.ts} +8 -2
  129. package/dist/likec4diagram/xyflow-sequence/{sequence-layout.js → sequence-view-to-xy.js} +111 -14
  130. package/dist/likec4diagram/xyflow-sequence/sequence-view.d.ts +2 -7
  131. package/dist/likec4diagram/xyflow-sequence/sequence-view.js +144 -0
  132. package/dist/likec4diagram/xyflow-sequence/utils.d.ts +9 -1
  133. package/dist/likec4diagram/xyflow-sequence/utils.js +96 -0
  134. package/dist/navigationpanel/NavigationPanel.d.ts +5 -2
  135. package/dist/navigationpanel/NavigationPanel.js +58 -59
  136. package/dist/navigationpanel/NavigationPanelDropdown.js +45 -38
  137. package/dist/navigationpanel/_common.js +2 -2
  138. package/dist/navigationpanel/actor.actions.d.ts +19 -0
  139. package/dist/navigationpanel/actor.actions.js +45 -0
  140. package/dist/navigationpanel/actor.d.ts +34 -96
  141. package/dist/navigationpanel/actor.js +21 -84
  142. package/dist/navigationpanel/actor.setup.d.ts +98 -0
  143. package/dist/navigationpanel/actor.setup.js +31 -0
  144. package/dist/navigationpanel/comparepanel/DriftsSummary.js +4 -5
  145. package/dist/navigationpanel/controls/DetailsControls.js +7 -8
  146. package/dist/navigationpanel/dropdown/ProjectsMenu.js +1 -1
  147. package/dist/navigationpanel/editorpanel/styles.js +8 -8
  148. package/dist/navigationpanel/hooks.d.ts +20 -5
  149. package/dist/navigationpanel/hooks.js +4 -18
  150. package/dist/navigationpanel/styles.css.d.ts +1 -1
  151. package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js +2 -2
  152. package/dist/navigationpanel/walkthrough/DynamicViewControls.d.ts +4 -4
  153. package/dist/navigationpanel/walkthrough/DynamicViewControls.js +23 -25
  154. package/dist/navigationpanel/walkthrough/WalkthroughPanel.js +5 -5
  155. package/dist/overlays/Overlays.d.ts +4 -2
  156. package/dist/overlays/Overlays.js +10 -10
  157. package/dist/overlays/element-details/ElementDetailsCard.css.js +17 -17
  158. package/dist/overlays/element-details/MetadataValue.js +15 -15
  159. package/dist/overlays/element-details/TabPanelDeployments.css.js +5 -5
  160. package/dist/overlays/element-details/TabPanelRelationships.css.js +11 -11
  161. package/dist/overlays/element-details/TabPanelRelationships.js +1 -1
  162. package/dist/overlays/element-details/TabPanelStructure.css.js +2 -2
  163. package/dist/overlays/element-details/TabPanelStructure.js +1 -1
  164. package/dist/overlays/element-details/actor.d.ts +2 -3
  165. package/dist/overlays/hooks.d.ts +28 -0
  166. package/dist/overlays/hooks.js +5 -0
  167. package/dist/overlays/overlay/Overlay.js +34 -25
  168. package/dist/overlays/overlaysActor.js +0 -1
  169. package/dist/overlays/relationship-details/custom/nodeTypes.js +1 -1
  170. package/dist/overlays/relationship-details/layout.js +1 -1
  171. package/dist/overlays/relationships-browser/SelectElement.css.js +2 -2
  172. package/dist/overlays/relationships-browser/actor.js +79 -78
  173. package/dist/overlays/relationships-browser/custom/nodeTypes.js +1 -1
  174. package/dist/overlays/relationships-browser/hooks.js +1 -1
  175. package/dist/overlays/relationships-browser/layout.js +2 -2
  176. package/dist/projects-overview/actor.js +4 -4
  177. package/dist/search/Search.js +1 -1
  178. package/dist/search/components/ElementsColumn.css.js +2 -2
  179. package/dist/search/components/ViewsColum.js +1 -1
  180. package/dist/search/components/_shared.css.d.ts +1 -1
  181. package/dist/search/components/_shared.css.js +23 -23
  182. package/dist/search/components/styles.css.js +4 -4
  183. package/dist/shadowroot/ShadowRoot.d.ts +1 -1
  184. package/dist/shadowroot/ShadowRoot.js +76 -28
  185. package/dist/styles2.js +1 -1
  186. package/dist/utils/defineActors.d.ts +21 -0
  187. package/dist/utils/defineActors.js +13 -0
  188. package/dist/utils/index.d.ts +1 -0
  189. package/dist/utils/index.js +5 -4
  190. package/dist/utils/readableText.d.ts +11 -0
  191. package/dist/utils/readableText.js +18 -0
  192. package/package.json +18 -30
  193. package/panda.buildinfo.json +270 -288
  194. package/styles-min.css +1 -1
  195. package/styles.css +1 -1
  196. package/adhoc-editor/package.json +0 -4
  197. package/dist/adhoc-editor/EditorPanel.d.ts +0 -1
  198. package/dist/adhoc-editor/EditorPanel.js +0 -106
  199. package/dist/adhoc-editor/ElementsTree.d.ts +0 -2
  200. package/dist/adhoc-editor/ElementsTree.js +0 -112
  201. package/dist/adhoc-editor/LikeC4AdHocViewEditor.d.ts +0 -4
  202. package/dist/adhoc-editor/LikeC4AdHocViewEditor.js +0 -83
  203. package/dist/adhoc-editor/components/Tree.d.ts +0 -48
  204. package/dist/adhoc-editor/components/Tree.js +0 -213
  205. package/dist/adhoc-editor/hooks.d.ts +0 -14
  206. package/dist/adhoc-editor/hooks.js +0 -34
  207. package/dist/adhoc-editor/index.d.ts +0 -2
  208. package/dist/adhoc-editor/index.js +0 -2
  209. package/dist/adhoc-editor/state/ActorProvider.d.ts +0 -5
  210. package/dist/adhoc-editor/state/ActorProvider.js +0 -37
  211. package/dist/adhoc-editor/state/actor.d.ts +0 -13
  212. package/dist/adhoc-editor/state/actor.editor.d.ts +0 -56
  213. package/dist/adhoc-editor/state/actor.editor.js +0 -167
  214. package/dist/adhoc-editor/state/actor.js +0 -14
  215. package/dist/adhoc-editor/state/actor.layouter.d.ts +0 -51
  216. package/dist/adhoc-editor/state/actor.layouter.js +0 -54
  217. package/dist/adhoc-editor/state/actor.types.d.ts +0 -63
  218. package/dist/adhoc-editor/state/actor.types.js +0 -25
  219. package/dist/adhoc-editor/state/panel.d.ts +0 -95
  220. package/dist/adhoc-editor/state/panel.js +0 -124
  221. package/dist/adhoc-editor/state/utils.d.ts +0 -17
  222. package/dist/adhoc-editor/state/utils.js +0 -25
  223. package/dist/adhoc-editor/useElementsTree.d.ts +0 -18
  224. package/dist/adhoc-editor/useElementsTree.js +0 -98
  225. package/dist/adhoc-editor/viewrules/ViewRulesPanel.d.ts +0 -6
  226. package/dist/context/ShadowRootContext.d.ts +0 -3
  227. package/dist/context/ShadowRootContext.js +0 -5
  228. package/dist/shadowroot/styles.d.ts +0 -13
  229. package/dist/shadowroot/styles.js +0 -60
@@ -1,4 +0,0 @@
1
- {
2
- "types": "../dist/adhoc-editor/index.d.ts",
3
- "module": "../dist/adhoc-editor/index.js"
4
- }
@@ -1 +0,0 @@
1
- export declare const EditorPanel: () => import("react").JSX.Element;
@@ -1,106 +0,0 @@
1
- import "../_virtual/_rolldown/runtime.js";
2
- import { Logo } from "../components/Logo.js";
3
- import { EditorPanelStoreProvider, selectEditorPanelState, useEditorPanelState, useEditorPanelTrigger } from "./state/panel.js";
4
- import { ElementsTree } from "./ElementsTree.js";
5
- import { IconTrash } from "@tabler/icons-react";
6
- import { Suspense } from "react";
7
- import { jsx, jsxs } from "react/jsx-runtime";
8
- import { prop } from "remeda";
9
- import { ActionIcon, CloseButton, Input } from "@mantine/core";
10
- import { AnimatePresence } from "motion/react";
11
- import { Box as Box$1, HStack, Txt, VStack } from "@likec4/styles/jsx";
12
- //#region src/adhoc-editor/EditorPanel.tsx
13
- var EditorPanel = () => {
14
- return /* @__PURE__ */ jsx(EditorPanelStoreProvider, { children: /* @__PURE__ */ jsx(AnimatePresence, {
15
- mode: "popLayout",
16
- children: /* @__PURE__ */ jsxs(VStack, {
17
- css: {
18
- position: "fixed",
19
- top: "0",
20
- left: "0",
21
- gap: "1",
22
- bottom: "0",
23
- height: "auto",
24
- overflow: "hidden",
25
- layerStyle: "likec4.panel",
26
- width: "[300px]",
27
- rounded: "0"
28
- },
29
- onClick: (e) => {
30
- e.stopPropagation();
31
- const input = document.getElementById("search-input");
32
- if (input) input.focus();
33
- },
34
- children: [
35
- /* @__PURE__ */ jsxs(HStack, {
36
- p: "2",
37
- gap: "4",
38
- justifyItems: "stretch",
39
- children: [
40
- /* @__PURE__ */ jsx(Logo, { style: { height: 16 } }),
41
- /* @__PURE__ */ jsx(Txt, {
42
- size: "sm",
43
- fontWeight: "medium",
44
- flex: "1",
45
- children: "Explore"
46
- }),
47
- /* @__PURE__ */ jsx(HStack, {
48
- gap: "1",
49
- children: /* @__PURE__ */ jsx(ActionIcon, { children: /* @__PURE__ */ jsx(IconTrash, {}) })
50
- })
51
- ]
52
- }),
53
- /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(SearchInput, {}) }),
54
- /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ElementsTree, {}) })
55
- ]
56
- })
57
- }) });
58
- };
59
- var selectInput = selectEditorPanelState(prop("searchInput"));
60
- function SearchInput() {
61
- const input = useEditorPanelState(selectInput);
62
- const trigger = useEditorPanelTrigger();
63
- const onChange = useEditorPanelTrigger((trigger, event) => {
64
- trigger.inputChange({ value: event.currentTarget.value });
65
- });
66
- const clear = useEditorPanelTrigger((trigger) => {
67
- trigger.inputChange({ value: "" });
68
- });
69
- return /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Input, {
70
- id: "search-input",
71
- size: "xs",
72
- variant: "filled",
73
- placeholder: "Search by title, description or start with # or kind:",
74
- value: input,
75
- onChange,
76
- "data-likec4-search-input": true,
77
- rightSectionPointerEvents: "all",
78
- rightSection: /* @__PURE__ */ jsx(CloseButton, {
79
- size: "sm",
80
- "aria-label": "Clear input",
81
- onClick: clear,
82
- style: { display: input ? void 0 : "none" }
83
- }),
84
- onKeyDownCapture: (e) => {
85
- switch (e.key) {
86
- case "Escape":
87
- e.stopPropagation();
88
- e.preventDefault();
89
- clear();
90
- break;
91
- case "Enter":
92
- e.stopPropagation();
93
- e.preventDefault();
94
- break;
95
- case "ArrowDown":
96
- e.stopPropagation();
97
- e.preventDefault();
98
- trigger.inputKeyDown();
99
- break;
100
- default: return;
101
- }
102
- }
103
- }) });
104
- }
105
- //#endregion
106
- export { EditorPanel };
@@ -1,2 +0,0 @@
1
- import { MemoExoticComponent } from 'react';
2
- export declare const ElementsTree: MemoExoticComponent<() => import("react").JSX.Element>;
@@ -1,112 +0,0 @@
1
- import "../_virtual/_rolldown/runtime.js";
2
- import { Tree as Tree$1 } from "./components/Tree.js";
3
- import { useElementsTree } from "./useElementsTree.js";
4
- import { useEditorPanelTrigger } from "./state/panel.js";
5
- import { memo } from "react";
6
- import { jsx, jsxs } from "react/jsx-runtime";
7
- import { ScrollArea } from "@mantine/core";
8
- import { invariant } from "@likec4/core/utils";
9
- import { Box as Box$1 } from "@likec4/styles/jsx";
10
- import { mergeProps } from "@zag-js/react";
11
- //#region src/adhoc-editor/ElementsTree.tsx
12
- var ElementsTree = memo(() => {
13
- const api = useElementsTree();
14
- const onClick = useEditorPanelTrigger((trigger, event) => {
15
- const id = event.currentTarget.closest("[data-value]")?.getAttribute("data-value");
16
- if (!id) return;
17
- try {
18
- event.stopPropagation();
19
- event.preventDefault();
20
- api.expand([id]);
21
- trigger.elementClick({ id });
22
- } catch (err) {
23
- console.error("Failed to handle element click", err);
24
- }
25
- });
26
- return /* @__PURE__ */ jsx(ScrollArea, {
27
- flex: "1 1 100%",
28
- scrollbars: "y",
29
- type: "scroll",
30
- scrollbarSize: "4px",
31
- ...mergeProps(api.getRootProps(), { onKeyDown: (e) => {
32
- switch (e.key) {
33
- case "Escape": {
34
- const input = document.getElementById("search-input");
35
- if (input) {
36
- e.stopPropagation();
37
- e.preventDefault();
38
- input.focus();
39
- }
40
- break;
41
- }
42
- case "ArrowUp": break;
43
- default: return;
44
- }
45
- } }),
46
- children: /* @__PURE__ */ jsxs(Tree$1.Root, {
47
- ...api.getTreeProps(),
48
- children: [api.collection.rootNode.children.map((node, index) => /* @__PURE__ */ jsx(TreeNode, {
49
- node,
50
- api,
51
- onClick
52
- }, node.id)), !api.collection.getFirstNode() && /* @__PURE__ */ jsx(Box$1, {
53
- css: {
54
- p: "4",
55
- textAlign: "center"
56
- },
57
- children: "Nothing found"
58
- })]
59
- })
60
- });
61
- });
62
- var TreeNode = ({ api, node, onClick }) => {
63
- const indexPath = api.collection.getIndexPath(node.id);
64
- invariant(indexPath, "Node not found in collection");
65
- const nodeProps = {
66
- indexPath,
67
- node
68
- };
69
- const state = api.getNodeState(nodeProps);
70
- if (state.isBranch) return /* @__PURE__ */ jsxs(Tree$1.Branch, {
71
- ...api.getBranchProps(nodeProps),
72
- children: [/* @__PURE__ */ jsxs(Tree$1.Control, {
73
- ...api.getBranchControlProps(nodeProps),
74
- children: [
75
- /* @__PURE__ */ jsx(Tree$1.Icon, { element: node }),
76
- /* @__PURE__ */ jsxs(Tree$1.Label, {
77
- ...api.getBranchTextProps(nodeProps),
78
- children: [node.title, /* @__PURE__ */ jsx(Tree$1.Indicator, { ...api.getBranchIndicatorProps(nodeProps) })]
79
- }),
80
- /* @__PURE__ */ jsx(Tree$1.State, {
81
- node,
82
- state: node.state,
83
- onClick
84
- })
85
- ]
86
- }), /* @__PURE__ */ jsx(Tree$1.Content, {
87
- ...api.getBranchContentProps(nodeProps),
88
- children: state.expanded && node.children.map((childNode, index) => /* @__PURE__ */ jsx(TreeNode, {
89
- node: childNode,
90
- api,
91
- onClick
92
- }, childNode.id))
93
- })]
94
- });
95
- return /* @__PURE__ */ jsxs(Tree$1.Item, {
96
- ...api.getItemProps(nodeProps),
97
- children: [
98
- /* @__PURE__ */ jsx(Tree$1.Icon, { element: node }),
99
- /* @__PURE__ */ jsx(Tree$1.Label, {
100
- ...api.getItemTextProps(nodeProps),
101
- children: node.title
102
- }),
103
- /* @__PURE__ */ jsx(Tree$1.State, {
104
- node,
105
- state: node.state,
106
- onClick
107
- })
108
- ]
109
- });
110
- };
111
- //#endregion
112
- export { ElementsTree };
@@ -1,4 +0,0 @@
1
- import { AdhocViewService } from './state/actor.types';
2
- export declare function LikeC4AdHocViewEditor({ service }: {
3
- service: AdhocViewService;
4
- }): import("react").JSX.Element;
@@ -1,83 +0,0 @@
1
- import "../_virtual/_rolldown/runtime.js";
2
- import { IconRendererProvider } from "../context/IconRenderer.js";
3
- import { FitViewPaddings } from "../base/const.js";
4
- import { RootContainer } from "../components/RootContainer.js";
5
- import { DefaultFeatures, DiagramFeatures } from "../context/DiagramFeatures.js";
6
- import { EnsureMantine } from "../context/EnsureMantine.js";
7
- import { FramerMotionConfig } from "../context/FramerMotionConfig.js";
8
- import { useDiagram } from "../hooks/safeContext.js";
9
- import { TagStylesProvider } from "../context/TagStylesContext.js";
10
- import { useId } from "../hooks/useId.js";
11
- import { LikeC4DiagramXYFlow } from "../likec4diagram/DiagramXYFlow.js";
12
- import { DiagramActorProvider } from "../likec4diagram/state/DiagramActorProvider.js";
13
- import { LikeC4Styles } from "../LikeC4Styles.js";
14
- import { useAdhocEditorActor, useAdhocView } from "./hooks.js";
15
- import { EditorPanel } from "./EditorPanel.js";
16
- import { AdhocEditorActorProvider } from "./state/ActorProvider.js";
17
- import { Profiler, memo, useEffect, useRef } from "react";
18
- import { jsx, jsxs } from "react/jsx-runtime";
19
- import { ReactFlowProvider } from "@xyflow/react";
20
- import { mapValues } from "remeda";
21
- //#region src/adhoc-editor/LikeC4AdHocViewEditor.tsx
22
- var noop = () => {};
23
- var defaultFeatures = {
24
- ...mapValues(DefaultFeatures, () => false),
25
- enableFitView: true,
26
- enableReadOnly: true
27
- };
28
- function LikeC4AdHocViewEditor({ service }) {
29
- const id = useId();
30
- const initialRef = useRef({
31
- fitView: true,
32
- defaultNodes: [],
33
- defaultEdges: []
34
- });
35
- return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsx(Profiler, {
36
- id: "LikeC4AdHocViewEditor",
37
- onRender: noop,
38
- children: /* @__PURE__ */ jsx(IconRendererProvider, {
39
- value: null,
40
- children: /* @__PURE__ */ jsx(AdhocEditorActorProvider, {
41
- service,
42
- children: /* @__PURE__ */ jsxs(DiagramFeatures, {
43
- features: defaultFeatures,
44
- children: [/* @__PURE__ */ jsx(LikeC4Styles, { id }), /* @__PURE__ */ jsx(TagStylesProvider, {
45
- rootSelector: `#${id}`,
46
- children: /* @__PURE__ */ jsx(RootContainer, {
47
- id,
48
- children: /* @__PURE__ */ jsxs(ReactFlowProvider, {
49
- ...initialRef.current,
50
- children: [/* @__PURE__ */ jsx(LikeC4AdHocView, { id }), /* @__PURE__ */ jsx(EditorPanel, {})]
51
- })
52
- })
53
- })]
54
- })
55
- })
56
- })
57
- }) }) });
58
- }
59
- var LikeC4AdHocView = memo(({ id }) => {
60
- return /* @__PURE__ */ jsxs(DiagramActorProvider, {
61
- id,
62
- view: useAdhocView(),
63
- zoomable: true,
64
- pannable: true,
65
- fitViewPadding: FitViewPaddings.withControls,
66
- nodesDraggable: false,
67
- nodesSelectable: true,
68
- children: [/* @__PURE__ */ jsx(LikeC4DiagramXYFlow, {}), /* @__PURE__ */ jsx(LikeC4AdHocEditorEvents, {})]
69
- });
70
- });
71
- var LikeC4AdHocEditorEvents = memo(() => {
72
- const actorRef = useAdhocEditorActor();
73
- const diagram = useDiagram();
74
- useEffect(() => {
75
- const subscription = actorRef.on("click.element", ({ id }) => {
76
- diagram.focusOnElement(id);
77
- });
78
- return () => subscription.unsubscribe();
79
- }, [actorRef, diagram]);
80
- return null;
81
- });
82
- //#endregion
83
- export { LikeC4AdHocViewEditor };
@@ -1,48 +0,0 @@
1
- import { RecipeVariantProps } from '../../../styled-system/css';
2
- import { MouseEventHandler, PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
3
- import { IconOrShapeRenderer } from '../../context/IconRenderer';
4
- import { TreeNodeData } from '../useElementsTree';
5
- import { RecipeRuntimeFn, SlotRecipeRuntimeFn } from '../../../styled-system';
6
- import { StyleContextRootProvider, StyleContextConsumer } from '../../../styled-system/jsx';
7
- import { IconProps } from '@tabler/icons-react';
8
- declare const statebtn: RecipeRuntimeFn<{
9
- state: {
10
- "include-explicit": {
11
- backgroundColor: "grass.6";
12
- color: "text";
13
- };
14
- "include-implicit": {
15
- backgroundColor: "grass.6";
16
- color: "text";
17
- };
18
- exclude: {
19
- backgroundColor: "red.6";
20
- color: "text";
21
- };
22
- disabled: {
23
- color: "text.dimmed";
24
- };
25
- 'not-present': {
26
- color: "text.dimmed";
27
- backgroundColor: "default.hover/50";
28
- };
29
- };
30
- }>;
31
- declare const tree: SlotRecipeRuntimeFn<"content" | "icon" | "label" | "item" | "indicator" | "branch" | "control" | "state", {}>;
32
- export type TreeVariants = RecipeVariantProps<typeof tree>;
33
- export declare const Tree: {
34
- Root: StyleContextRootProvider<"div", SlotRecipeRuntimeFn<"content" | "icon" | "label" | "item" | "indicator" | "branch" | "control" | "state", {}>>;
35
- Branch: StyleContextConsumer<"div">;
36
- Item: StyleContextConsumer<"div">;
37
- Control: StyleContextConsumer<"div">;
38
- State: ({ node, state, onClick, className, ...props }: PropsWithChildren<RecipeVariantProps<typeof statebtn> & {
39
- node: TreeNodeData;
40
- className?: string;
41
- onClick?: MouseEventHandler<HTMLElement>;
42
- }>) => import("react").JSX.Element;
43
- Icon: typeof IconOrShapeRenderer;
44
- Label: StyleContextConsumer<"div">;
45
- Content: StyleContextConsumer<"div">;
46
- Indicator: StyleContextConsumer<ForwardRefExoticComponent< IconProps & RefAttributes<SVGSVGElement>>>;
47
- };
48
- export {};
@@ -1,213 +0,0 @@
1
- import "../../_virtual/_rolldown/runtime.js";
2
- import { IconOrShapeRenderer } from "../../context/IconRenderer.js";
3
- import { css, cva, cx, sva } from "@likec4/styles/css";
4
- import { IconChevronRight } from "@tabler/icons-react";
5
- import { jsx } from "react/jsx-runtime";
6
- import { createStyleContext } from "@likec4/styles/jsx";
7
- //#region src/adhoc-editor/components/Tree.tsx
8
- var statebtn = cva({
9
- base: {
10
- border: "none",
11
- display: "inline-flex",
12
- alignItems: "center",
13
- justifyContent: "center",
14
- justifySelf: "flex-end",
15
- fontSize: "[8px]",
16
- fontFamily: "mono",
17
- fontWeight: "bold",
18
- letterSpacing: "[0.5px]",
19
- marginLeft: "2",
20
- py: "1",
21
- px: "1.5",
22
- lineHeight: "1",
23
- rounded: "sm",
24
- minWidth: 32,
25
- transition: "normal",
26
- _hover: { color: "text.bright" }
27
- },
28
- variants: { state: {
29
- ["include-explicit"]: {
30
- backgroundColor: "grass.6",
31
- color: "text"
32
- },
33
- ["include-implicit"]: {
34
- backgroundColor: "grass.6",
35
- color: "text"
36
- },
37
- exclude: {
38
- backgroundColor: "red.6",
39
- color: "text"
40
- },
41
- ["disabled"]: { color: "text.dimmed" },
42
- "not-present": {
43
- color: "text.dimmed",
44
- backgroundColor: "default.hover/50"
45
- }
46
- } },
47
- defaultVariants: { state: "not-present" }
48
- });
49
- var icon = css.raw({
50
- flex: 0,
51
- display: "flex",
52
- alignItems: "center",
53
- color: "text.dimmed",
54
- _groupHover: { color: "text" },
55
- _groupFocusWithin: { color: "mantine.colors.primary.lightColor!" },
56
- _groupFocusVisible: { color: "mantine.colors.primary.lightColor!" },
57
- "& :where(.likec4-shape-icon, .likec4-element-icon)": { display: "contents" },
58
- "& :where(svg, img)": {
59
- width: "10px",
60
- height: "10px"
61
- },
62
- "@/md": { "& :where(svg, img)": {
63
- width: "14px",
64
- height: "14px"
65
- } },
66
- "@/lg": { "& :where(svg, img)": {
67
- width: "16px",
68
- height: "16px"
69
- } },
70
- opacity: {
71
- base: .8,
72
- _groupFocusVisible: 1,
73
- _groupHover: 1
74
- }
75
- });
76
- var control = css.raw({
77
- paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.2} + {spacing.1})]",
78
- px: "1",
79
- py: "1",
80
- mb: "0",
81
- columnGap: "1",
82
- "@/md": {
83
- paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.2} + {spacing.2})]",
84
- px: "2",
85
- py: "1.5",
86
- mb: "0.5",
87
- columnGap: "2"
88
- },
89
- "@/lg": {
90
- paddingLeft: "[calc((var(--depth, 1) - 1) * {spacing.3} + {spacing.2.5})]",
91
- py: "2.5"
92
- },
93
- cursor: "pointer",
94
- border: "none",
95
- appearance: "none",
96
- width: "full",
97
- alignItems: "center",
98
- display: "grid",
99
- gridTemplateColumns: "auto 1fr auto",
100
- gridTemplateRows: "auto auto",
101
- rounded: "sm",
102
- backgroundColor: {
103
- base: "transparent",
104
- _hover: {
105
- base: "mantine.colors.gray[1]",
106
- _dark: "mantine.colors.dark[5]"
107
- },
108
- _focusWithin: "mantine.colors.primary.lightHover!",
109
- _focusVisible: "mantine.colors.primary.lightHover!"
110
- },
111
- color: {
112
- base: "text",
113
- _hover: "text.bright",
114
- _focusWithin: "mantine.colors.primary.lightColor!",
115
- _focusVisible: "mantine.colors.primary.lightColor!"
116
- },
117
- _focusVisible: { outline: "none" }
118
- });
119
- var { withRootProvider, withContext } = createStyleContext(sva({
120
- slots: [
121
- "branch",
122
- "item",
123
- "control",
124
- "state",
125
- "icon",
126
- "label",
127
- "content",
128
- "indicator"
129
- ],
130
- base: {
131
- branch: {},
132
- item: { ...control },
133
- control: { ...control },
134
- state: {
135
- border: "none",
136
- display: "inline-flex",
137
- alignItems: "center",
138
- justifySelf: "flex-end",
139
- marginLeft: "2",
140
- "--chip-fz": "9px",
141
- "--chip-checked-padding": "{spacing.1}",
142
- "--chip-padding": "{spacing.1}",
143
- "--chip-spacing": "0",
144
- "--chip-size": "16px",
145
- transition: "opacity 150ms ease-out"
146
- },
147
- icon: { ...icon },
148
- label: {
149
- cursor: "inherit",
150
- color: "inherit",
151
- userSelect: "none",
152
- textStyle: "xxs",
153
- truncate: "ellipsis",
154
- "@/sm": { textStyle: "xs" },
155
- "@/md": { textStyle: "sm" },
156
- fontWeight: "[450]",
157
- display: "inline-flex",
158
- alignItems: "center",
159
- gap: "2"
160
- },
161
- indicator: {
162
- color: "inherit",
163
- transition: "transform 150ms ease-out",
164
- width: "12px",
165
- opacity: .75,
166
- "@/md": { width: "14px" },
167
- _open: { transform: "rotate(90deg)" }
168
- },
169
- content: {}
170
- },
171
- variants: {},
172
- defaultVariants: {}
173
- }));
174
- var Root = withRootProvider("div");
175
- var Branch = withContext("div", "branch");
176
- var Item = withContext("div", "item", {
177
- forwardProps: [],
178
- defaultProps: { className: "group" }
179
- });
180
- var Control = withContext("div", "control", {
181
- forwardProps: [],
182
- defaultProps: { className: "group" }
183
- });
184
- var ElementState = ({ node, state, onClick, className, ...props }) => {
185
- const cls = cx(className, "mantine-active", statebtn({ state }));
186
- return /* @__PURE__ */ jsx("div", {
187
- ...props,
188
- onClick,
189
- className: cls,
190
- children: state
191
- });
192
- };
193
- var Tree = {
194
- Root,
195
- Branch,
196
- Item,
197
- Control,
198
- State: withContext(ElementState, "state", { forwardProps: [
199
- "node",
200
- "state",
201
- "onClick",
202
- "className"
203
- ] }),
204
- Icon: withContext(IconOrShapeRenderer, "icon", { forwardProps: ["element", "className"] }),
205
- Label: withContext("div", "label", { forwardProps: [] }),
206
- Content: withContext("div", "content", { forwardProps: [] }),
207
- Indicator: withContext(IconChevronRight, "indicator", {
208
- forwardProps: [],
209
- defaultProps: { size: 14 }
210
- })
211
- };
212
- //#endregion
213
- export { Tree };
@@ -1,14 +0,0 @@
1
- import { LayoutedElementView, Any } from '@likec4/core';
2
- import { AdhocEditorActorRef, AdhocEditorSnapshot } from './state/actor';
3
- import { Provider } from 'react';
4
- export declare const AdhocEditorActorContextProvider: Provider<AdhocEditorActorRef | null>;
5
- export declare function useAdhocEditorActor(): AdhocEditorActorRef;
6
- export declare function useAdhocEditor(): {
7
- open: () => void;
8
- close: () => void;
9
- toggleRule: (ruleId: string) => void;
10
- };
11
- export declare function useAdhocEditorSnapshot<T = unknown>(selector: (state: AdhocEditorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
12
- export declare function useAdhocView(): LayoutedElementView< Any>;
13
- export declare function selectFromSnapshot<T = unknown>(selector: (state: AdhocEditorSnapshot) => T): (state: AdhocEditorSnapshot) => T;
14
- export declare function selectFromContext<T = unknown>(selector: (state: AdhocEditorSnapshot['context']) => T): (state: AdhocEditorSnapshot) => T;
@@ -1,34 +0,0 @@
1
- import "../_virtual/_rolldown/runtime.js";
2
- import { createContext, useContext } from "react";
3
- import "fast-equals";
4
- import { nonNullable } from "@likec4/core";
5
- import { useSelector } from "@xstate/react";
6
- //#region src/adhoc-editor/hooks.ts
7
- var AdhocEditorActorContext = createContext(null);
8
- var AdhocEditorActorContextProvider = AdhocEditorActorContext.Provider;
9
- function useAdhocEditorActor() {
10
- return nonNullable(useContext(AdhocEditorActorContext), "No AdhocEditorActorContext");
11
- }
12
- var EMPTY_VIEW = {
13
- id: "adhoc",
14
- ["_type"]: "element",
15
- autoLayout: { direction: "LR" },
16
- nodes: [],
17
- edges: [],
18
- bounds: {
19
- x: 0,
20
- y: 0,
21
- width: 0,
22
- height: 0
23
- },
24
- ["_stage"]: "layouted",
25
- title: null,
26
- description: null,
27
- hash: ""
28
- };
29
- var selectView = ({ context }) => context.view ?? EMPTY_VIEW;
30
- function useAdhocView() {
31
- return useSelector(useAdhocEditorActor(), selectView);
32
- }
33
- //#endregion
34
- export { AdhocEditorActorContextProvider, useAdhocEditorActor, useAdhocView };
@@ -1,2 +0,0 @@
1
- export { LikeC4AdHocViewEditor } from './LikeC4AdHocViewEditor';
2
- export type { AdhocViewService } from './state/actor.types';
@@ -1,2 +0,0 @@
1
- import { LikeC4AdHocViewEditor } from "./LikeC4AdHocViewEditor.js";
2
- export { LikeC4AdHocViewEditor };
@@ -1,5 +0,0 @@
1
- import { PropsWithChildren } from 'react';
2
- import { AdhocViewService } from './actor.types';
3
- export declare function AdhocEditorActorProvider({ children, service }: PropsWithChildren<{
4
- service: AdhocViewService;
5
- }>): import("react").JSX.Element;
@@ -1,37 +0,0 @@
1
- import "../../_virtual/_rolldown/runtime.js";
2
- import { AdhocEditorActorContextProvider } from "../hooks.js";
3
- import { adhocEditorLogic } from "./actor.js";
4
- import { useEffect, useMemo, useRef } from "react";
5
- import { jsx } from "react/jsx-runtime";
6
- import { useActorRef } from "@xstate/react";
7
- import { fromPromise } from "xstate";
8
- //#region src/adhoc-editor/state/ActorProvider.tsx
9
- var State = {
10
- read: () => JSON.parse(sessionStorage.getItem("adhoc-editor-state") || "null") ?? void 0,
11
- write: (state) => sessionStorage.setItem("adhoc-editor-state", JSON.stringify(state))
12
- };
13
- function AdhocEditorActorProvider({ children, service }) {
14
- const serviceRef = useRef(service);
15
- serviceRef.current = service;
16
- const provided = useMemo(() => ({ actors: { service: fromPromise(({ input }) => serviceRef.current.process(input)) } }), []);
17
- const actorRef = useActorRef(adhocEditorLogic.provide(provided), {
18
- id: "adhoc-editor",
19
- snapshot: State.read(),
20
- systemId: "adhoc-editor",
21
- inspect: (event) => {
22
- console.log("[AdhocEditorActor]", event);
23
- }
24
- });
25
- useEffect(() => {
26
- const subscription = actorRef.subscribe((state) => {
27
- State.write(state);
28
- });
29
- return () => subscription.unsubscribe();
30
- }, [actorRef]);
31
- return /* @__PURE__ */ jsx(AdhocEditorActorContextProvider, {
32
- value: actorRef,
33
- children
34
- });
35
- }
36
- //#endregion
37
- export { AdhocEditorActorProvider };