@likec4/diagram 1.59.2 → 1.59.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (233) hide show
  1. package/README.md +53 -0
  2. package/dist/LikeC4Diagram.d.ts +1 -1
  3. package/dist/LikeC4Diagram.js +36 -21
  4. package/dist/LikeC4Diagram.props.d.ts +23 -0
  5. package/dist/LikeC4MantineProvider.d.ts +24 -0
  6. package/dist/LikeC4MantineProvider.js +156 -0
  7. package/dist/LikeC4ProjectsOverview.js +1 -1
  8. package/dist/LikeC4ProjectsProvider.d.ts +17 -2
  9. package/dist/LikeC4Styles.d.ts +13 -3
  10. package/dist/LikeC4Styles.js +10 -6
  11. package/dist/LikeC4View.js +2 -2
  12. package/dist/StaticLikeC4Diagram.d.ts +1 -1
  13. package/dist/base/BaseXYFlow.d.ts +1 -1
  14. package/dist/base/BaseXYFlow.js +19 -9
  15. package/dist/base/const.d.ts +1 -0
  16. package/dist/base/const.js +3 -1
  17. package/dist/base-primitives/Markdown.d.ts +3 -3
  18. package/dist/base-primitives/compound/CompoundNodeContainer.js +2 -3
  19. package/dist/base-primitives/compound/CompoundTitle.js +5 -4
  20. package/dist/base-primitives/compound/actionbtns.css.d.ts +3 -3
  21. package/dist/base-primitives/compound/actionbtns.css.js +3 -3
  22. package/dist/base-primitives/element/ElementData.js +6 -1
  23. package/dist/base-primitives/element/ElementShape.js +9 -10
  24. package/dist/base-primitives/element/ElementTags.d.ts +2 -2
  25. package/dist/base-primitives/element/ElementTags.js +5 -5
  26. package/dist/components/EmptyBox.d.ts +3 -0
  27. package/dist/components/EmptyBox.js +9 -0
  28. package/dist/components/ErrorFallback.js +7 -6
  29. package/dist/components/FloatingWindow.d.ts +18 -0
  30. package/dist/components/FloatingWindow.js +89 -0
  31. package/dist/components/Link.js +7 -7
  32. package/dist/components/NavigationPanel.d.ts +2 -2
  33. package/dist/components/NavigationPanel.js +5 -6
  34. package/dist/components/SearchControl.css.js +10 -12
  35. package/dist/components/ViewIcon.d.ts +11 -0
  36. package/dist/components/ViewIcon.js +71 -0
  37. package/dist/context/CurrentViewModelProvider.js +2 -1
  38. package/dist/context/DiagramEventHandlers.js +4 -2
  39. package/dist/context/EnsureMantine.js +3 -3
  40. package/dist/context/IconRenderer.d.ts +2 -1
  41. package/dist/context/IconRenderer.js +78 -26
  42. package/dist/context/LikeC4ProjectsContext.d.ts +3 -2
  43. package/dist/context/TagStylesContext.d.ts +11 -4
  44. package/dist/context/TagStylesContext.js +39 -27
  45. package/dist/custom/index.d.ts +3 -0
  46. package/dist/custom/index.js +7 -4
  47. package/dist/editor/LikeC4EditorCallbacks.d.ts +20 -1
  48. package/dist/editor/LikeC4EditorCallbacks.js +4 -1
  49. package/dist/editor/actor/setup.d.ts +1 -0
  50. package/dist/editor/actor/setup.js +17 -12
  51. package/dist/editor/actor/state.sync-queue.js +1 -0
  52. package/dist/editor/applyChangesToManualLayout.js +5 -2
  53. package/dist/editor/index.d.ts +1 -1
  54. package/dist/editor/useEditorActorLogic.js +10 -3
  55. package/dist/hooks/safeContext.d.ts +12 -4
  56. package/dist/hooks/safeContext.js +2 -2
  57. package/dist/hooks/useCurrentView.js +5 -5
  58. package/dist/hooks/useDiagram.js +3 -23
  59. package/dist/hooks/useDiagramCompareLayout.d.ts +16 -6
  60. package/dist/hooks/useDiagramCompareLayout.js +20 -17
  61. package/dist/hooks/useEditorActor.js +3 -5
  62. package/dist/hooks/useLikeC4Model.js +8 -3
  63. package/dist/hooks/useLikeC4Project.d.ts +4 -3
  64. package/dist/hooks/useOverlaysActor.d.ts +1 -1
  65. package/dist/hooks/useUpdateEffect.js +2 -1
  66. package/dist/index.d.ts +6 -4
  67. package/dist/index.js +8 -6
  68. package/dist/likec4diagram/DiagramUI.js +4 -3
  69. package/dist/likec4diagram/DiagramXYFlow.d.ts +6 -0
  70. package/dist/likec4diagram/DiagramXYFlow.js +33 -19
  71. package/dist/likec4diagram/custom/edges/EdgeDrifts.js +4 -4
  72. package/dist/likec4diagram/custom/edges/RelationshipEdge.js +2 -4
  73. package/dist/likec4diagram/custom/edges/SequenceStepEdge.js +1 -3
  74. package/dist/likec4diagram/custom/edges/edges.css.js +13 -13
  75. package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.js +3 -2
  76. package/dist/likec4diagram/custom/nodes/NodeDrifts.js +2 -2
  77. package/dist/likec4diagram/custom/nodes/NodeNotes.js +4 -4
  78. package/dist/likec4diagram/custom/nodes/SequenceActorNode.js +2 -2
  79. package/dist/likec4diagram/custom/nodes/SequenceSubFlow.js +8 -5
  80. package/dist/likec4diagram/custom/nodes/nodes.js +8 -5
  81. package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js +2 -2
  82. package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js +9 -8
  83. package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js +1 -1
  84. package/dist/likec4diagram/relationship-popover/RelationshipPopover.js +3 -2
  85. package/dist/likec4diagram/relationship-popover/components.d.ts +1 -1
  86. package/dist/likec4diagram/relationship-popover/components.js +6 -2
  87. package/dist/likec4diagram/state/DiagramActorProvider.d.ts +7 -2
  88. package/dist/likec4diagram/state/DiagramActorProvider.js +20 -4
  89. package/dist/likec4diagram/state/assign.js +1 -1
  90. package/dist/likec4diagram/state/createViewChange.js +1 -6
  91. package/dist/likec4diagram/state/diagram-api.d.ts +2 -2
  92. package/dist/likec4diagram/state/diagram-api.js +3 -2
  93. package/dist/likec4diagram/state/machine.actions.js +15 -8
  94. package/dist/likec4diagram/state/machine.actions.layout.d.ts +1 -0
  95. package/dist/likec4diagram/state/machine.actions.layout.js +7 -5
  96. package/dist/likec4diagram/state/machine.setup.d.ts +10 -1
  97. package/dist/likec4diagram/state/machine.setup.js +15 -9
  98. package/dist/likec4diagram/state/machine.state.initializing.d.ts +2 -26
  99. package/dist/likec4diagram/state/machine.state.initializing.js +9 -6
  100. package/dist/likec4diagram/state/machine.state.navigating.js +1 -1
  101. package/dist/likec4diagram/state/machine.state.ready.d.ts +134 -3
  102. package/dist/likec4diagram/state/machine.state.ready.js +2 -1
  103. package/dist/likec4diagram/state/machine.state.ready.walkthrough.d.ts +106 -1
  104. package/dist/likec4diagram/state/machine.state.ready.walkthrough.js +40 -7
  105. package/dist/likec4diagram/state/utils.d.ts +1 -1
  106. package/dist/likec4diagram/state/utils.js +7 -4
  107. package/dist/likec4diagram/ui/FloatingSequenceActors.js +2 -1
  108. package/dist/likec4diagram/ui/LayoutDriftFrame.js +16 -10
  109. package/dist/likec4diagram/ui/index.d.ts +1 -1
  110. package/dist/likec4diagram/ui/notation/NotationPanel.css.js +13 -15
  111. package/dist/likec4diagram/ui/notation/NotationPanel.js +9 -9
  112. package/dist/likec4diagram/ui/sequence-outline/ActiveTrail.d.ts +9 -0
  113. package/dist/likec4diagram/ui/sequence-outline/ActiveTrail.js +81 -0
  114. package/dist/likec4diagram/ui/sequence-outline/FlowRow.d.ts +11 -0
  115. package/dist/likec4diagram/ui/sequence-outline/FlowRow.js +70 -0
  116. package/dist/likec4diagram/ui/sequence-outline/OutlineBody.d.ts +2 -0
  117. package/dist/likec4diagram/ui/sequence-outline/OutlineBody.js +106 -0
  118. package/dist/likec4diagram/ui/sequence-outline/OutlineHeader.d.ts +2 -0
  119. package/dist/likec4diagram/ui/sequence-outline/OutlineHeader.js +140 -0
  120. package/dist/likec4diagram/ui/sequence-outline/OutlineNodes.d.ts +17 -0
  121. package/dist/likec4diagram/ui/sequence-outline/OutlineNodes.js +83 -0
  122. package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.d.ts +4 -0
  123. package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.js +49 -525
  124. package/dist/likec4diagram/ui/sequence-outline/StepBadge.d.ts +8 -0
  125. package/dist/likec4diagram/ui/sequence-outline/StepBadge.js +52 -0
  126. package/dist/likec4diagram/ui/sequence-outline/StepRow.d.ts +7 -0
  127. package/dist/likec4diagram/ui/sequence-outline/StepRow.js +190 -0
  128. package/dist/likec4diagram/ui/sequence-outline/StoreProvider.d.ts +238 -0
  129. package/dist/likec4diagram/ui/sequence-outline/StoreProvider.js +94 -0
  130. package/dist/likec4diagram/ui/sequence-outline/depth-of-field.d.ts +21 -0
  131. package/dist/likec4diagram/ui/sequence-outline/depth-of-field.js +71 -0
  132. package/dist/likec4diagram/ui/sequence-outline/index.d.ts +2 -0
  133. package/dist/likec4diagram/ui/sequence-outline/motion.d.ts +13 -0
  134. package/dist/likec4diagram/ui/sequence-outline/motion.js +21 -0
  135. package/dist/likec4diagram/ui/sequence-outline/presentation.d.ts +10 -0
  136. package/dist/likec4diagram/ui/sequence-outline/presentation.js +80 -0
  137. package/dist/likec4diagram/ui/sequence-outline/tree.d.ts +9 -0
  138. package/dist/likec4diagram/ui/sequence-outline/tree.js +67 -0
  139. package/dist/likec4diagram/ui/sequence-outline/{state.d.ts → types.d.ts} +4 -2
  140. package/dist/likec4diagram/ui/sequence-outline/types.js +12 -0
  141. package/dist/likec4diagram/useLayoutConstraints.js +13 -1
  142. package/dist/likec4diagram/xyflow-sequence/layouter.js +8 -10
  143. package/dist/likec4diagram/xyflow-sequence/sequence-view-to-xy.js +1 -0
  144. package/dist/likec4diagram/xyflow-sequence/utils.js +0 -1
  145. package/dist/navigationpanel/NavigationPanel.js +45 -41
  146. package/dist/navigationpanel/NavigationPanelControls.js +102 -63
  147. package/dist/navigationpanel/NavigationPanelDropdown.js +52 -77
  148. package/dist/navigationpanel/_common.d.ts +6 -6
  149. package/dist/navigationpanel/_common.js +31 -42
  150. package/dist/navigationpanel/actor.actions.js +6 -5
  151. package/dist/navigationpanel/actor.js +2 -2
  152. package/dist/navigationpanel/actor.setup.d.ts +6 -6
  153. package/dist/navigationpanel/actor.setup.js +2 -1
  154. package/dist/navigationpanel/comparepanel/CompareActionsMenu.js +2 -4
  155. package/dist/navigationpanel/comparepanel/ComparePanel.js +8 -10
  156. package/dist/navigationpanel/comparepanel/DriftsSummary.d.ts +1 -1
  157. package/dist/navigationpanel/comparepanel/DriftsSummary.js +11 -9
  158. package/dist/navigationpanel/controls/LayoutWarning.js +69 -72
  159. package/dist/navigationpanel/controls/NavigationButtons.d.ts +1 -1
  160. package/dist/navigationpanel/controls/NavigationButtons.js +8 -8
  161. package/dist/navigationpanel/controls/OpenSource.d.ts +1 -1
  162. package/dist/navigationpanel/controls/OpenSource.js +5 -8
  163. package/dist/navigationpanel/controls/SearchControl.js +24 -9
  164. package/dist/navigationpanel/controls/ToggleReadonly.d.ts +4 -1
  165. package/dist/navigationpanel/controls/ToggleReadonly.js +56 -76
  166. package/dist/navigationpanel/controls/ViewDetailsButton.d.ts +5 -0
  167. package/dist/navigationpanel/controls/ViewDetailsButton.js +121 -0
  168. package/dist/navigationpanel/controls/index.d.ts +1 -1
  169. package/dist/navigationpanel/dropdown/ProjectsMenu.js +27 -16
  170. package/dist/navigationpanel/editorpanel/ApplySemanticLayout.js +2 -1
  171. package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js +12 -10
  172. package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.d.ts +2 -0
  173. package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js +19 -10
  174. package/dist/navigationpanel/editorpanel/styles.js +8 -15
  175. package/dist/navigationpanel/hooks.d.ts +6 -2
  176. package/dist/navigationpanel/styles.css.d.ts +2 -2
  177. package/dist/navigationpanel/styles.css.js +0 -1
  178. package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js +3 -2
  179. package/dist/navigationpanel/walkthrough/DynamicViewControls.d.ts +5 -4
  180. package/dist/navigationpanel/walkthrough/DynamicViewControls.js +10 -39
  181. package/dist/navigationpanel/walkthrough/DynamicViewModeSwitcher.d.ts +1 -0
  182. package/dist/navigationpanel/walkthrough/DynamicViewModeSwitcher.js +49 -0
  183. package/dist/navigationpanel/walkthrough/WalkthroughPanel.js +8 -8
  184. package/dist/navigationpanel/windows/ViewDetailsWindow.d.ts +1 -0
  185. package/dist/navigationpanel/windows/ViewDetailsWindow.js +379 -0
  186. package/dist/overlays/Overlays.js +29 -17
  187. package/dist/overlays/element-details/ElementDetailsCard.css.js +28 -36
  188. package/dist/overlays/element-details/ElementDetailsCard.js +3 -3
  189. package/dist/overlays/element-details/MetadataValue.js +18 -16
  190. package/dist/overlays/element-details/TabPanelDeployments.css.js +6 -14
  191. package/dist/overlays/element-details/TabPanelRelationships.css.js +8 -12
  192. package/dist/overlays/element-details/TabPanelStructure.css.js +4 -8
  193. package/dist/overlays/hooks.d.ts +3 -1
  194. package/dist/overlays/overlay/Overlay.js +8 -7
  195. package/dist/overlays/overlaysActor.js +20 -17
  196. package/dist/overlays/relationship-details/RelationshipDetails.js +2 -1
  197. package/dist/overlays/relationship-details/SelectEdge.css.js +14 -9
  198. package/dist/overlays/relationship-details/actor.js +1 -1
  199. package/dist/overlays/relationship-details/hooks.js +2 -1
  200. package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts +6 -0
  201. package/dist/overlays/relationships-browser/RelationshipsBrowser.js +15 -8
  202. package/dist/overlays/relationships-browser/SelectElement.css.js +2 -8
  203. package/dist/overlays/relationships-browser/SelectElement.js +5 -1
  204. package/dist/overlays/relationships-browser/actor.js +3 -2
  205. package/dist/overlays/relationships-browser/custom/ElementActions.js +39 -38
  206. package/dist/overlays/relationships-browser/custom/EmptyNode.js +7 -9
  207. package/dist/overlays/relationships-browser/hooks.js +2 -1
  208. package/dist/projects-overview/ProjectsOverview.js +8 -7
  209. package/dist/projects-overview/actor.js +1 -1
  210. package/dist/projects-overview/hooks.js +2 -1
  211. package/dist/search/Search.js +9 -7
  212. package/dist/search/components/ElementsColumn.css.js +6 -5
  213. package/dist/search/components/ElementsColumn.js +4 -3
  214. package/dist/search/components/SearchByTags.js +3 -3
  215. package/dist/search/components/ViewsColum.js +46 -43
  216. package/dist/search/components/ViewsColumn.css.js +4 -4
  217. package/dist/search/components/_shared.css.d.ts +2 -2
  218. package/dist/search/components/_shared.css.js +31 -46
  219. package/dist/search/components/styles.css.js +4 -4
  220. package/dist/search/hooks.js +2 -1
  221. package/dist/shadowroot/ShadowRoot.js +6 -5
  222. package/dist/styles2.js +1 -1
  223. package/dist/utils/index.js +3 -3
  224. package/package.json +29 -29
  225. package/panda.buildinfo.json +342 -299
  226. package/styles-min.css +1 -1
  227. package/styles-xyflow.css +1 -1
  228. package/styles.css +1 -1
  229. package/dist/context/DefaultMantineProvider.d.ts +0 -2
  230. package/dist/context/DefaultMantineProvider.js +0 -48
  231. package/dist/likec4diagram/ui/sequence-outline/state.js +0 -55
  232. package/dist/navigationpanel/controls/DetailsControls.d.ts +0 -2
  233. package/dist/navigationpanel/controls/DetailsControls.js +0 -223
@@ -1,2 +0,0 @@
1
- import { MantineProviderProps } from '@mantine/core';
2
- export declare function DefaultMantineProvider({ children, theme, ...props }: MantineProviderProps): import("react").JSX.Element;
@@ -1,48 +0,0 @@
1
- import "../_virtual/_rolldown/runtime.js";
2
- import { jsx } from "react/jsx-runtime";
3
- import { MantineProvider, Portal, SegmentedControl, Tooltip, createTheme } from "@mantine/core";
4
- //#region src/context/DefaultMantineProvider.tsx
5
- var DefaultTheme = createTheme({
6
- autoContrast: true,
7
- primaryColor: "indigo",
8
- cursorType: "pointer",
9
- defaultRadius: "sm",
10
- fontFamily: "var(--likec4-app-font, var(--likec4-app-font-default))",
11
- headings: {
12
- fontWeight: "medium",
13
- sizes: {
14
- h1: { fontWeight: "bold" },
15
- h2: { fontWeight: "medium" }
16
- }
17
- },
18
- fontSizes: {
19
- xxs: "var(--font-sizes-xxs)",
20
- xs: "var(--font-sizes-xs)",
21
- sm: "var(--font-sizes-sm)",
22
- md: "var(--font-sizes-md)",
23
- lg: "var(--font-sizes-lg)",
24
- xl: "var(--font-sizes-xl)"
25
- },
26
- spacing: {
27
- xs: "var(--spacing-xs)",
28
- sm: "var(--spacing-sm)",
29
- md: "var(--spacing-md)",
30
- lg: "var(--spacing-lg)",
31
- xl: "var(--spacing-xl)"
32
- },
33
- components: {
34
- SegmentedControl: SegmentedControl.extend({ vars: (theme, props) => ({ root: { "--sc-font-size": theme.fontSizes[props.fz ?? props.size] } }) }),
35
- Portal: Portal.extend({ defaultProps: { reuseTargetNode: true } }),
36
- Tooltip: Tooltip.extend({ defaultProps: { color: "dark" } })
37
- }
38
- });
39
- function DefaultMantineProvider({ children, theme, ...props }) {
40
- return /* @__PURE__ */ jsx(MantineProvider, {
41
- defaultColorScheme: "auto",
42
- theme: theme ?? DefaultTheme,
43
- ...props,
44
- children
45
- });
46
- }
47
- //#endregion
48
- export { DefaultMantineProvider };
@@ -1,55 +0,0 @@
1
- import "../../../_virtual/_rolldown/runtime.js";
2
- import { useMemo } from "react";
3
- import "@likec4/core";
4
- //#region src/likec4diagram/ui/sequence-outline/state.ts
5
- function buildTree(flow, collapsedFlows) {
6
- const tree = [];
7
- let currentFlow = tree;
8
- let isCollapsed = false;
9
- flow.walk({
10
- step: ({ step, stepnum, source, target, edge }) => {
11
- if (isCollapsed) return;
12
- currentFlow.push({
13
- label: edge.label ?? `${source.title} → ${target.title}`,
14
- value: step,
15
- nodeProps: {
16
- type: "step",
17
- stepnum: stepnum.global,
18
- source: source.title,
19
- target: target.title,
20
- label: edge.label,
21
- notes: edge.notes ?? null
22
- }
23
- });
24
- },
25
- subflow: ({ subflow }) => {
26
- if (collapsedFlows[subflow.id]) {
27
- isCollapsed = true;
28
- return () => {
29
- isCollapsed = false;
30
- };
31
- }
32
- const node = {
33
- label: subflow.title ?? subflow._type,
34
- value: subflow.id,
35
- nodeProps: {
36
- type: subflow._type,
37
- title: subflow.title
38
- },
39
- children: []
40
- };
41
- const parent = currentFlow;
42
- parent.push(node);
43
- currentFlow = node.children;
44
- return () => {
45
- currentFlow = parent;
46
- };
47
- }
48
- });
49
- return tree;
50
- }
51
- function useTreeData(flow, collapsed) {
52
- return useMemo(() => buildTree(flow, collapsed), [flow, collapsed]);
53
- }
54
- //#endregion
55
- export { useTreeData };
@@ -1,2 +0,0 @@
1
- import { PopoverProps } from '@mantine/core';
2
- export declare const DetailsControls: (props: PopoverProps) => import("react").JSX.Element;
@@ -1,223 +0,0 @@
1
- import "../../_virtual/_rolldown/runtime.js";
2
- import { useDiagram } from "../../hooks/safeContext.js";
3
- import { useOnDiagramEvent } from "../../hooks/useDiagram.js";
4
- import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
5
- import { selectNavigationContext, useNavigationActorSelector } from "../hooks.js";
6
- import { Markdown } from "../../base-primitives/Markdown.js";
7
- import { ElementTag } from "../../base-primitives/element/ElementTags.js";
8
- import { Link } from "../../components/Link.js";
9
- import { css, cx } from "@likec4/styles/css";
10
- import { IconId, IconLink } from "@tabler/icons-react";
11
- import { useState } from "react";
12
- import { jsx, jsxs } from "react/jsx-runtime";
13
- import { Badge, Popover, Text, UnstyledButton } from "@mantine/core";
14
- import { Box as Box$1, HStack, styled } from "@likec4/styles/jsx";
15
- import { RichText } from "@likec4/core/types";
16
- import { hstack, vstack } from "@likec4/styles/patterns";
17
- import * as m from "motion/react-m";
18
- import { extractViewTitleFromPath } from "@likec4/core/model";
19
- //#region src/navigationpanel/controls/DetailsControls.tsx
20
- var selector = selectNavigationContext((context) => {
21
- const view = context.view;
22
- return {
23
- id: view.id,
24
- title: context.viewModel?.title ?? (view.title && extractViewTitleFromPath(view.title)) ?? "Untitled View",
25
- description: context.viewModel?.description ?? RichText.from(view.description),
26
- tags: view.tags ?? [],
27
- links: view.links ?? []
28
- };
29
- });
30
- var DetailsControls = (props) => {
31
- const [opened, setOpened] = useState(false);
32
- const data = useNavigationActorSelector(selector);
33
- return /* @__PURE__ */ jsxs(Popover, {
34
- position: "bottom-end",
35
- shadow: "xl",
36
- clickOutsideEvents: [
37
- "pointerdown",
38
- "mousedown",
39
- "click"
40
- ],
41
- offset: { mainAxis: 4 },
42
- opened,
43
- onChange: setOpened,
44
- ...useMantinePortalProps(),
45
- ...props,
46
- children: [/* @__PURE__ */ jsx(ViewDetailsCardTrigger, {
47
- linksCount: data.links.length,
48
- onOpen: () => setOpened(true)
49
- }), opened && /* @__PURE__ */ jsx(ViewDetailsCardDropdown, {
50
- data,
51
- onClose: () => setOpened(false)
52
- })]
53
- });
54
- };
55
- var ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, {
56
- component: m.button,
57
- layout: "position",
58
- whileTap: {
59
- scale: .95,
60
- translateY: 1
61
- },
62
- onClick: (e) => {
63
- e.stopPropagation();
64
- onOpen();
65
- },
66
- className: cx("group", hstack({
67
- gap: "2",
68
- paddingInline: "2",
69
- paddingBlock: "1",
70
- rounded: "sm",
71
- userSelect: "none",
72
- cursor: "pointer",
73
- color: {
74
- base: "likec4.panel.action",
75
- _hover: "likec4.panel.action.hover"
76
- },
77
- backgroundColor: { _hover: "likec4.panel.action.bg.hover" },
78
- display: {
79
- base: "none",
80
- "@/xs": "flex"
81
- }
82
- }), ``),
83
- children: [/* @__PURE__ */ jsx(IconId, {
84
- size: 16,
85
- stroke: 1.8
86
- }), linksCount > 0 && /* @__PURE__ */ jsxs(HStack, {
87
- gap: "[1px]",
88
- children: [/* @__PURE__ */ jsx(IconLink, {
89
- size: 14,
90
- stroke: 2
91
- }), /* @__PURE__ */ jsx(Box$1, {
92
- css: {
93
- fontSize: "11px",
94
- fontWeight: "bold",
95
- lineHeight: 1,
96
- opacity: .8
97
- },
98
- children: linksCount
99
- })]
100
- })]
101
- }) });
102
- var SectionHeader = styled("div", { base: {
103
- fontSize: "xs",
104
- color: "text.dimmed",
105
- fontWeight: "medium",
106
- userSelect: "none",
107
- mb: "xxs"
108
- } });
109
- var ViewDetailsCardDropdown = ({ data: { id, title, description, tags, links }, onClose }) => {
110
- const diagram = useDiagram();
111
- useOnDiagramEvent("paneClick", onClose);
112
- useOnDiagramEvent("nodeClick", onClose);
113
- return /* @__PURE__ */ jsxs(Popover.Dropdown, {
114
- className: cx("nowheel nopan nodrag", vstack({
115
- margin: "xs",
116
- layerStyle: "likec4.dropdown",
117
- gap: "md",
118
- padding: "md",
119
- paddingBottom: "lg",
120
- pointerEvents: "all",
121
- maxWidth: "calc(100cqw - 52px)",
122
- minWidth: "200px",
123
- maxHeight: "calc(100cqh - 100px)",
124
- width: "max-content",
125
- cursor: "default",
126
- overflow: "auto",
127
- overscrollBehavior: "contain",
128
- "@/sm": {
129
- minWidth: 400,
130
- maxWidth: 550
131
- },
132
- "@/lg": { maxWidth: 700 }
133
- })),
134
- children: [
135
- /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(Text, {
136
- component: "div",
137
- fw: 500,
138
- size: "xl",
139
- lh: "sm",
140
- children: title
141
- }), /* @__PURE__ */ jsxs(HStack, {
142
- alignItems: "flex-start",
143
- mt: "1",
144
- children: [/* @__PURE__ */ jsx(ViewBadge, {
145
- label: "id",
146
- value: id
147
- }), /* @__PURE__ */ jsx(HStack, {
148
- gap: "xs",
149
- flexWrap: "wrap",
150
- children: tags.map((tag) => /* @__PURE__ */ jsx(ElementTag, {
151
- tag,
152
- cursor: "pointer",
153
- onClick: (e) => {
154
- e.stopPropagation();
155
- diagram.openSearch(`#${tag}`);
156
- }
157
- }, tag))
158
- })]
159
- })] }),
160
- links.length > 0 && /* @__PURE__ */ jsxs("section", {
161
- className: hstack({ alignItems: "baseline" }),
162
- children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Links" }), /* @__PURE__ */ jsx(HStack, {
163
- gap: "xs",
164
- flexWrap: "wrap",
165
- children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`))
166
- })]
167
- }),
168
- description.isEmpty && /* @__PURE__ */ jsx(Text, {
169
- component: "div",
170
- fw: 500,
171
- size: "xs",
172
- c: "dimmed",
173
- style: { userSelect: "none" },
174
- children: "No description"
175
- }),
176
- description.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Description" }), /* @__PURE__ */ jsx(Markdown, {
177
- value: description,
178
- fontSize: "sm",
179
- emptyText: "No description",
180
- className: css({ userSelect: "all" })
181
- })] })
182
- ]
183
- });
184
- };
185
- var ViewBadge = ({ label, value }) => {
186
- return /* @__PURE__ */ jsxs(HStack, {
187
- gap: "0.5",
188
- children: [/* @__PURE__ */ jsx(ViewBadgeLabel, { children: label }), /* @__PURE__ */ jsx(Badge, {
189
- size: "sm",
190
- radius: "sm",
191
- variant: "light",
192
- color: "gray",
193
- tt: "none",
194
- fw: 500,
195
- classNames: {
196
- root: css({
197
- width: "max-content",
198
- overflow: "visible",
199
- px: "1",
200
- color: {
201
- _dark: "mantine.gray[4]",
202
- _light: "mantine.gray[8]"
203
- }
204
- }),
205
- label: css({ overflow: "visible" }),
206
- section: css({
207
- opacity: .5,
208
- userSelect: "none",
209
- marginInlineEnd: "0.5"
210
- })
211
- },
212
- children: value
213
- })]
214
- });
215
- };
216
- var ViewBadgeLabel = styled("div", { base: {
217
- color: "text.dimmed",
218
- fontWeight: "medium",
219
- fontSize: "xxs",
220
- userSelect: "none"
221
- } });
222
- //#endregion
223
- export { DetailsControls };