@likec4/diagram 1.59.4 → 1.61.0

package/dist/likec4diagram/custom/nodes/ElementActions.d.mts

@@ -0,0 +1,89 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import "../../../base-primitives/index.mjs";
+import { BaseNodeData } from "../../../base/types.mjs";
+import { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.mjs";
+import { Types } from "../../types.mjs";
+import { SimplifyDeep } from "type-fest";
+type WithExtraButtons = {
+  /**
+   * Add extra action buttons
+   * @example
+   * ```tsx
+   * <ElementActions
+   *   extraButtons={[
+   *     {
+   *       key: 'extra',
+   *       icon: <IconZoomScan />,
+   *       onClick: (e) => {
+   *         e.stopPropagation()
+   *         console.log('extra action clicked')
+   *       },
+   *       },
+   *     },
+   *   ]}
+   * />
+   * ```
+   */
+  extraButtons?: ElementActionButtons.Item[];
+};
+export type ElementActionsProps = SimplifyDeep<{
+  selected?: boolean;
+  data: Pick<Types.ElementNodeData, 'id' | 'modelFqn' | 'navigateTo' | 'title'> & BaseNodeData;
+}> & WithExtraButtons;
+/**
+ * Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
+ * Intended to be used with model elements.
+ *
+ * Use generic {@link ElementActionButtons} for custom action buttons.
+ *
+ * @param extraButtons - Add extra action buttons
+ *
+ * @example
+ * ```tsx
+ * <ElementActions
+ *   extraButtons={[
+ *     {
+ *       key: 'extra',
+ *       icon: <IconZoomScan />,
+ *       onClick: (e) => {
+ *         e.stopPropagation()
+ *         console.log('extra action clicked')
+ *       },
+ *       },
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function ElementActions({ extraButtons, ...props }: ElementActionsProps): import("react").JSX.Element;
+export type DeploymentElementActionsProps = SimplifyDeep<{
+  selected?: boolean;
+  data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo' | 'title'> & BaseNodeData;
+}> & WithExtraButtons;
+/**
+ * Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
+ * Intended to be used with deployment elements.
+ *
+ * Use generic {@link ElementActionButtons} for custom action buttons.
+ *
+ * @param extraButtons - Add extra action buttons
+ *
+ * @example
+ * ```tsx
+ * <DeploymentElementActions
+ *   extraButtons={[
+ *     {
+ *       key: 'extra',
+ *       icon: <IconZoomScan />,
+ *       onClick: (e) => {
+ *         e.stopPropagation()
+ *         console.log('extra action clicked')
+ *       },
+ *       },
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const DeploymentElementActions: ({ extraButtons, ...props }: DeploymentElementActionsProps) => import("react").JSX.Element;
+export {};

package/dist/likec4diagram/custom/nodes/ElementActions.mjs

@@ -0,0 +1,146 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import IconTransform from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.mjs";
+import IconZoomScan from "../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.mjs";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
+import { readableText } from "../../../utils/readableText.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { hasAtLeast } from "remeda";
+
+// src/likec4diagram/custom/nodes/ElementActions.tsx
+/**
+* Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
+* Intended to be used with model elements.
+*
+* Use generic {@link ElementActionButtons} for custom action buttons.
+*
+* @param extraButtons - Add extra action buttons
+*
+* @example
+* ```tsx
+* <ElementActions
+*   extraButtons={[
+*     {
+*       key: 'extra',
+*       icon: <IconZoomScan />,
+*       onClick: (e) => {
+*         e.stopPropagation()
+*         console.log('extra action clicked')
+*       },
+*       },
+*     },
+*   ]}
+* />
+* ```
+*/
+function ElementActions({ extraButtons, ...props }) {
+	const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
+	const diagram = useDiagram();
+	const { id, navigateTo, modelFqn, title } = props.data;
+	let buttons = useMemo(() => {
+		const buttons = [];
+		const labelTitle = readableText(title) || id;
+		if (navigateTo && enableNavigateTo) buttons.push({
+			key: "navigate",
+			ariaLabel: "Navigate to view",
+			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.navigateTo(navigateTo, id);
+			}
+		});
+		if (enableRelationshipBrowser) buttons.push({
+			key: "relationships",
+			ariaLabel: `Browse ${labelTitle} relationships`,
+			icon: /* @__PURE__ */ jsx(IconTransform, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.openRelationshipsBrowser(modelFqn);
+			}
+		});
+		return buttons;
+	}, [
+		enableNavigateTo,
+		enableRelationshipBrowser,
+		modelFqn,
+		navigateTo,
+		id,
+		title,
+		diagram
+	]);
+	if (extraButtons && hasAtLeast(extraButtons, 1)) buttons = [...buttons, ...extraButtons];
+	return /* @__PURE__ */ jsx(ElementActionButtons, {
+		...props,
+		buttons
+	});
+}
+/**
+* Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
+* Intended to be used with deployment elements.
+*
+* Use generic {@link ElementActionButtons} for custom action buttons.
+*
+* @param extraButtons - Add extra action buttons
+*
+* @example
+* ```tsx
+* <DeploymentElementActions
+*   extraButtons={[
+*     {
+*       key: 'extra',
+*       icon: <IconZoomScan />,
+*       onClick: (e) => {
+*         e.stopPropagation()
+*         console.log('extra action clicked')
+*       },
+*       },
+*     },
+*   ]}
+* />
+* ```
+*/
+const DeploymentElementActions = ({ extraButtons, ...props }) => {
+	const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
+	const diagram = useDiagram();
+	const { id, navigateTo, modelFqn, title } = props.data;
+	let buttons = useMemo(() => {
+		const buttons = [];
+		const labelTitle = readableText(title) || id;
+		if (navigateTo && enableNavigateTo) buttons.push({
+			key: "navigate",
+			ariaLabel: "Navigate to view",
+			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.navigateTo(navigateTo, id);
+			}
+		});
+		if (enableRelationshipBrowser && !!modelFqn) buttons.push({
+			key: "relationships",
+			ariaLabel: `Browse ${labelTitle} relationships`,
+			icon: /* @__PURE__ */ jsx(IconTransform, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.openRelationshipsBrowser(modelFqn);
+			}
+		});
+		return buttons;
+	}, [
+		enableNavigateTo,
+		enableRelationshipBrowser,
+		modelFqn,
+		navigateTo,
+		id,
+		title,
+		diagram
+	]);
+	if (extraButtons && hasAtLeast(extraButtons, 1)) buttons = [...buttons, ...extraButtons];
+	return /* @__PURE__ */ jsx(ElementActionButtons, {
+		...props,
+		buttons
+	});
+};
+
+export { DeploymentElementActions, ElementActions };

package/dist/likec4diagram/custom/nodes/GraphElementNode.d.mts

@@ -0,0 +1,6 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { Types } from "../../types.mjs";
+/**
+ * Renders an element as a compact circle, used in the "graph" display variant of element views.
+ */
+export declare function GraphElementNode(props: Types.NodeProps<'graph-element'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/GraphElementNode.mjs

@@ -0,0 +1,83 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { DefaultHandles } from "../../../base-primitives/NodeHandles.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
+import { css } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "@likec4/styles/jsx";
+import * as m from "motion/react-m";
+
+// src/likec4diagram/custom/nodes/GraphElementNode.tsx
+const circle = css({
+	flexShrink: 0,
+	width: "[100%]",
+	height: "[100%]",
+	borderRadius: "[50%]",
+	backgroundColor: "var(--likec4-palette-fill)",
+	border: "[2px solid var(--likec4-palette-stroke)]"
+});
+const label = css({
+	position: "absolute",
+	left: "[calc(100% + 6px)]",
+	top: "[50%]",
+	translate: "auto",
+	translateY: "-1/2",
+	display: "flex",
+	flexDirection: "column",
+	gap: "0",
+	whiteSpace: "nowrap",
+	pointerEvents: "none",
+	fontSize: "xs",
+	lineHeight: "[1.2]",
+	color: "text"
+});
+/**
+* Renders an element as a compact circle, used in the "graph" display variant of element views.
+*/
+function GraphElementNode(props) {
+	const diagram = useDiagram();
+	const { data, selected } = props;
+	return /* @__PURE__ */ jsxs(m.div, {
+		"data-likec4-color": data.color,
+		className: css({
+			position: "relative",
+			width: "[100%]",
+			height: "[100%]",
+			cursor: data.navigateTo ? "pointer" : "default"
+		}),
+		initial: false,
+		animate: { scale: selected || data.hovered ? 1.2 : 1 },
+		transition: {
+			type: "spring",
+			stiffness: 400,
+			damping: 30
+		},
+		onDoubleClick: (e) => {
+			if (!data.navigateTo) return;
+			e.stopPropagation();
+			diagram.navigateTo(data.navigateTo);
+		},
+		children: [
+			/* @__PURE__ */ jsx(Box, { className: circle }),
+			/* @__PURE__ */ jsxs(Box, {
+				className: label,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: css({ fontWeight: "medium" }),
+					children: data.title
+				}), data.technology && /* @__PURE__ */ jsxs("span", {
+					className: css({
+						opacity: "[0.7]",
+						fontSize: "xxs"
+					}),
+					children: [
+						"[",
+						data.technology,
+						"]"
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(DefaultHandles, {})
+		]
+	});
+}
+
+export { GraphElementNode };

package/dist/likec4diagram/custom/nodes/NodeDrifts.d.mts

@@ -0,0 +1,6 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { Types } from "../../types.mjs";
+export type NodeDriftsProps = {
+  nodeProps: Types.NodeProps;
+};
+export declare function NodeDrifts({ nodeProps: { data } }: NodeDriftsProps): import("react").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/NodeDrifts.mjs

@@ -0,0 +1,25 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { useIsComparingLayouts } from "../../../context/ComparingLayoutsContext.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@likec4/styles/jsx";
+
+// src/likec4diagram/custom/nodes/NodeDrifts.tsx
+function NodeDrifts({ nodeProps: { data } }) {
+	const isComparing = useIsComparingLayouts();
+	const drifts = data.drifts;
+	if (!isComparing || !drifts || drifts.length === 0) return null;
+	return /* @__PURE__ */ jsx(Box, {
+		className: "likec4-node-drifts",
+		css: {
+			display: "contents",
+			"& + .likec4-element-shape": {
+				outlineColor: "likec4.compare.outline",
+				outlineWidth: "[4px]",
+				outlineStyle: "dashed",
+				outlineOffset: "1.5"
+			}
+		}
+	});
+}
+
+export { NodeDrifts };

package/dist/likec4diagram/custom/nodes/NodeNotes.mjs

@@ -0,0 +1,224 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { MarkdownWithRefs } from "../../../components/markdown/MarkdownWithRefs.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../../../hooks/useCallbackRef.mjs";
+import { useOnDiagramEvent } from "../../../hooks/useDiagram.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ViewportPortal } from "@xyflow/react";
+import { clamp, isEmptyish } from "remeda";
+import { RichText, hasProp } from "@likec4/core";
+import { ScrollAreaAutosize } from "@mantine/core";
+import { stringHash } from "@likec4/core/utils";
+import { AnimatePresence, m } from "motion/react";
+import { useDisclosure } from "@mantine/hooks";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { nodeNotes } from "@likec4/styles/recipes";
+
+// src/likec4diagram/custom/nodes/NodeNotes.tsx
+function NodeNotes({ data }) {
+	if (!hasProp(data, "notes") || isEmptyish(data.notes.md || data.notes.txt)) return null;
+	return /* @__PURE__ */ jsx(NodeNotesInternal2, { data });
+}
+function stopPropagation(e) {
+	e.nativeEvent.stopImmediatePropagation();
+	e.stopPropagation();
+}
+function NodeNotesInternal2({ data }) {
+	return /* @__PURE__ */ jsx(NodeNotesInternal, { data });
+}
+function NodeNotesInternal({ data }) {
+	const markdown = data.notes;
+	const width = clamp(data.width ?? 0, {
+		min: 250,
+		max: 500
+	});
+	const [expanded, handlers] = useDisclosure(false, {});
+	const id = stringHash(data.id + (markdown.md ?? markdown.txt));
+	const onClickCapture = useCallbackRef$1((e) => {
+		if (e) {
+			e.preventDefault();
+			if ("nativeEvent" in e) e.nativeEvent.stopImmediatePropagation();
+			e.stopPropagation();
+		}
+		handlers.toggle();
+	});
+	const hovered = data.hovered ?? false;
+	const layoutDependency = expanded;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AnimatePresence, { children: [/* @__PURE__ */ jsxs(m.div, {
+		className: cx("nopan nodrag", nodeNotes({ opened: expanded })),
+		variants: variants.root,
+		initial: "initial",
+		animate: expanded ? "expanded" : hovered ? "hovered" : "initial",
+		whileHover: "whileHover",
+		exit: "exit",
+		...!expanded && { onPointerDownCapture: onClickCapture },
+		onMouseDownCapture: onClickCapture,
+		onClickCapture,
+		onClick: stopPropagation,
+		"data-state": expanded ? "expanded" : "collapsed",
+		children: [/* @__PURE__ */ jsx(m.div, {
+			variants: variants.paper1,
+			className: "__paper __paper-back"
+		}, "paper-back"), !expanded && /* @__PURE__ */ jsx(m.div, {
+			layout: true,
+			layoutId: id,
+			variants: variants.paper2,
+			"data-state": expanded ? "expanded" : "collapsed",
+			className: "__paper __paper-front"
+		}, id)]
+	}, `node-notes-${id}`), expanded && /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(m.div, {
+		layout: true,
+		layoutDependency,
+		layoutId: id,
+		className: css({
+			position: "absolute",
+			zIndex: "[300]",
+			top: "0",
+			left: "0",
+			display: "flex",
+			pointerEvents: "all",
+			rounded: "sm",
+			backgroundColor: "likec4.overlay.body",
+			padding: "0",
+			alignItems: "stretch",
+			justifyContent: "stretch",
+			overflow: "hidden",
+			width: "fit-content",
+			height: "fit-content",
+			maxHeight: "[70cqh]",
+			maxWidth: "[50cqw]"
+		}),
+		"data-likec4-notes": id,
+		style: {
+			top: data.y + 20,
+			left: data.x + 10,
+			maxWidth: `min(calc(${width}px * 2), 50cqw)`
+		},
+		onMouseDownCapture: stopPropagation,
+		onClick: stopPropagation,
+		children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+			component: m.div,
+			className: cx("nowheel", css({
+				flex: "1",
+				padding: "xs",
+				paddingRight: "xxs"
+			})),
+			children: /* @__PURE__ */ jsx(MarkdownWithRefs, {
+				className: css({ paddingRight: "xxs" }),
+				value: RichText.from(markdown)
+			})
+		})
+	}, id) }, "portal")] }), expanded && /* @__PURE__ */ jsx(Catch, {
+		data,
+		onCatchClick: onClickCapture
+	})] });
+}
+const base_paper1 = {
+	rotateZ: "-5deg",
+	y: 0,
+	x: 1,
+	scale: 1,
+	originX: "55%",
+	originY: "80%"
+};
+const base_paper2 = {
+	rotateZ: "3deg",
+	y: -2,
+	scale: 1,
+	backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 8%, #FFF)",
+	originX: "45%",
+	originY: "80%"
+};
+const variants = {
+	root: {
+		initial: { ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)" },
+		hovered: {},
+		whileHover: { ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 3%, #FFF)" },
+		exit: { ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)" }
+	},
+	paper1: {
+		initial: {
+			...base_paper1,
+			rotateZ: "-3.5deg",
+			y: 1,
+			scale: .95
+		},
+		hovered: { ...base_paper1 },
+		whileHover: {
+			...base_paper1,
+			["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 3%, #FFF)",
+			scale: 1.04
+		},
+		expanded: {
+			...base_paper1,
+			y: [
+				0,
+				1,
+				20
+			],
+			scale: .95
+		},
+		exit: {
+			...base_paper1,
+			rotateZ: "-3.5deg",
+			y: 1,
+			scale: .95
+		}
+	},
+	paper2: {
+		initial: {
+			...base_paper2,
+			rotateZ: "2deg",
+			y: 2,
+			scale: .95,
+			backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
+		},
+		hovered: { ...base_paper2 },
+		whileHover: {
+			...base_paper2,
+			scale: 1.08
+		},
+		expanded: {
+			...base_paper2,
+			y: [
+				0,
+				1,
+				20
+			],
+			scale: .95
+		},
+		exit: {
+			...base_paper2,
+			rotateZ: "2deg",
+			y: 2,
+			scale: .95,
+			backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
+		}
+	}
+};
+function Catch({ data, onCatchClick }) {
+	useOnDiagramEvent("paneClick", () => {
+		onCatchClick();
+	});
+	return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(Box$1, {
+		css: {
+			display: "block",
+			position: "absolute",
+			zIndex: "[200]",
+			pointerEvents: "all",
+			left: "0",
+			top: "0",
+			cursor: "zoom-out"
+		},
+		style: {
+			transform: `translate(${data.x - 40}px, ${data.y - 40}px)`,
+			width: (data.width ?? 250) + 80,
+			height: (data.height ?? 200) + 80
+		},
+		onMouseDownCapture: onCatchClick,
+		onClickCapture: onCatchClick,
+		onClick: stopPropagation
+	}) }, "catch-all");
+}
+
+export { NodeNotes };

package/dist/likec4diagram/custom/nodes/SequenceActorNode.d.mts

@@ -0,0 +1,4 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { Types } from "../../types.mjs";
+export declare function SequenceActorNode(props: Types.NodeProps<'seq-actor'>): import("react").JSX.Element;
+export declare function SequenceParallelArea(props: Types.NodeProps<'seq-parallel'>): import("react").JSX.Element;