@likec4/diagram 1.59.4 → 1.61.0

package/dist/base-primitives/element/ElementTags.mjs

@@ -0,0 +1,135 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useCurrentZoomAtLeast } from "../../hooks/useXYFlow.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { forwardRef, memo, useCallback, useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { NodeToolbar, Position, useStore } from "@xyflow/react";
+import { deepEqual } from "fast-equals";
+import { hasAtLeast } from "remeda";
+import { useDebouncedState, useHover } from "@mantine/hooks";
+import { Box, HStack } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+import { likec4tag } from "@likec4/styles/recipes";
+
+// src/base-primitives/element/ElementTags.tsx
+const ElementTag = forwardRef(({ tag, cursor, className, style, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		"data-likec4-tag": tag,
+		className: cx(likec4tag(), className),
+		...props,
+		style: {
+			...cursor && { cursor },
+			...style
+		},
+		children: [/* @__PURE__ */ jsx("span", { children: "#" }), /* @__PURE__ */ jsx("span", { children: tag })]
+	});
+});
+const propsAreEqual = (prev, next) => {
+	return prev.id === next.id && prev.data.width === next.data.width && (prev.data.hovered ?? false) === (next.data.hovered ?? false) && deepEqual(prev.data.tags, next.data.tags);
+};
+const ElementTags = memo(({ id, data: { tags, width, hovered = false }, onTagClick, onTagMouseEnter, onTagMouseLeave }) => {
+	if (!tags || !hasAtLeast(tags, 1)) return null;
+	return /* @__PURE__ */ jsx(WithElementTags, {
+		id,
+		tags,
+		width,
+		hovered,
+		onTagClick,
+		onTagMouseEnter,
+		onTagMouseLeave
+	});
+}, propsAreEqual);
+ElementTags.displayName = "ElementTags";
+function WithElementTags({ id, tags, width, hovered, onTagClick, onTagMouseEnter, onTagMouseLeave }) {
+	const { hovered: isTagsBarHovered, ref: tagsBarRef } = useHover();
+	const { hovered: isTagsToolbarHovered, ref: tagsToolbarRef } = useHover();
+	const [isVisible, setVisible] = useDebouncedState(false, hovered ? 120 : 300);
+	useEffect(() => {
+		setVisible((visibleNow) => {
+			if (!visibleNow) return hovered && (isTagsBarHovered || isTagsToolbarHovered);
+			return hovered || isTagsBarHovered || isTagsToolbarHovered;
+		});
+	}, [
+		isTagsBarHovered,
+		isTagsToolbarHovered,
+		hovered
+	]);
+	const zoomIsLargeEnough = useCurrentZoomAtLeast(1.2);
+	const maxWidth = useStore(useCallback((state) => Math.max(Math.round(width * state.transform[2]) - 10, 200), [Math.round(width)]));
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: tagsBarRef,
+		className: cx("likec4-element-tags", hstack({
+			pointerEvents: "all",
+			gap: "1",
+			alignItems: "flex-end",
+			justifyItems: "stretch",
+			position: "absolute",
+			width: "100%",
+			bottom: "0",
+			left: "0",
+			padding: "1",
+			_shapeCylinder: { bottom: "[5px]" },
+			_shapeStorage: { bottom: "[5px]" },
+			_shapeQueue: {
+				bottom: "0",
+				paddingLeft: "[14px]"
+			}
+		})),
+		onClick: stopPropagation,
+		children: tags.map((tag) => /* @__PURE__ */ jsx(Box, {
+			"data-likec4-tag": tag,
+			className: css({
+				layerStyle: "likec4.tag",
+				flex: "1",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				maxWidth: "[50px]",
+				height: "[5px]",
+				_whenHovered: {
+					height: "[12px]",
+					borderRadius: "sm",
+					transitionDelay: "fastest"
+				},
+				transition: "fast"
+			})
+		}, id + "#" + tag))
+	}), isVisible && /* @__PURE__ */ jsx(NodeToolbar, {
+		align: "start",
+		position: Position.Bottom,
+		children: /* @__PURE__ */ jsx(HStack, {
+			ref: tagsToolbarRef,
+			css: {
+				gap: "0.5",
+				alignItems: "baseline",
+				flexWrap: "wrap",
+				pb: "sm",
+				translate: "auto",
+				x: "[-8px]"
+			},
+			style: { maxWidth },
+			children: tags.map((tag) => /* @__PURE__ */ jsx(ElementTag, {
+				tag,
+				cursor: "pointer",
+				className: css({
+					userSelect: "none",
+					...zoomIsLargeEnough && {
+						fontSize: "lg",
+						borderRadius: "sm",
+						px: "1.5"
+					}
+				}),
+				onClick: onTagClick ? ((e) => {
+					e.stopPropagation();
+					onTagClick(`#${tag}`);
+				}) : void 0,
+				onMouseEnter: onTagMouseEnter ? () => onTagMouseEnter(`#${tag}`) : void 0,
+				onMouseLeave: onTagMouseLeave ? () => onTagMouseLeave(`#${tag}`) : void 0
+			}, tag))
+		})
+	})] });
+}
+
+export { ElementTag, ElementTags };

package/dist/base-primitives/index.d.mts

@@ -0,0 +1,21 @@
+import { CompoundActionButton } from "./compound/CompoundActionButton.mjs";
+import { CompoundDetailsButton } from "./compound/CompoundDetailsButton.mjs";
+import { CompoundNodeContainer } from "./compound/CompoundNodeContainer.mjs";
+import { CompoundTitle } from "./compound/CompoundTitle.mjs";
+import "./edge/EdgeActionButton.mjs";
+import "./edge/EdgeContainer.mjs";
+import "./edge/EdgeLabel.mjs";
+import "./edge/EdgeLabelContainer.mjs";
+import "./edge/EdgeMarkers.mjs";
+import "./edge/EdgePath.mjs";
+import { ElementActionButtons } from "./element/ElementActionButtons.mjs";
+import { ElementData } from "./element/ElementData.mjs";
+import { ElementDetailsButton } from "./element/ElementDetailsButton.mjs";
+import { ElementNodeContainer } from "./element/ElementNodeContainer.mjs";
+import { ElementShape, ElementShapeProps } from "./element/ElementShape.mjs";
+import { ElementTag, ElementTagProps, ElementTags, ElementTagsProps } from "./element/ElementTags.mjs";
+import { Markdown } from "./Markdown.mjs";
+import "./memoEdge.mjs";
+import "./memoNode.mjs";
+import { DefaultHandles } from "./NodeHandles.mjs";
+export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementData, ElementDetailsButton, ElementNodeContainer, ElementShape, type ElementShapeProps, ElementTag, type ElementTagProps, ElementTags, type ElementTagsProps, Markdown };

package/dist/base-primitives/memoEdge.d.mts

@@ -0,0 +1,2 @@
+import "../base/types.mjs";
+import { FunctionComponent } from "react";

package/dist/base-primitives/memoEdge.mjs

@@ -0,0 +1,16 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { memo } from "react";
+import { deepEqual } from "fast-equals";
+
+// src/base-primitives/memoEdge.ts
+const isSame = (a, b) => {
+	return Math.abs(a - b) < 2.5;
+};
+const edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? false, next.selected ?? false) && deepEqual(prev.animated ?? false, next.animated ?? false) && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.targetPosition, next.targetPosition) && deepEqual(prev.data, next.data);
+function memoEdge(Edge) {
+	const Memo = memo(Edge, edgePropsEqual);
+	Memo.displayName = `MemoEdge(${Edge.displayName || Edge.name})`;
+	return Memo;
+}
+
+export { memoEdge };

package/dist/base-primitives/memoNode.d.mts

@@ -0,0 +1,2 @@
+import "../base/types.mjs";
+import { FunctionComponent } from "react";

package/dist/components/EmptyBox.mjs

@@ -0,0 +1,10 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { isCssProperty, styled } from "@likec4/styles/jsx";
+import { emptyBox } from "@likec4/styles/recipes";
+
+// src/components/EmptyBox.tsx
+const EmptyBox = styled("div", emptyBox, { shouldForwardProp(prop, variantKeys) {
+	return !variantKeys.includes(prop) && !isCssProperty(prop);
+} });
+
+export { EmptyBox };

package/dist/components/ErrorFallback.d.mts

@@ -0,0 +1,8 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ErrorBoundaryProps, FallbackProps } from "react-error-boundary";
+export declare function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): import("react").JSX.Element;
+declare function ErrorBoundary$1({ variant, ...props }: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'> & {
+  /** @default 'dialog' */
+  variant?: 'dialog' | 'message';
+}): import("react").JSX.Element;
+export { ErrorBoundary$1 as ErrorBoundary };

package/dist/components/ErrorFallback.mjs

@@ -0,0 +1,120 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import IconX from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import { css } from "@likec4/styles/css";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, ScrollAreaAutosize, Text, ThemeIcon } from "@mantine/core";
+import { HStack, VStack } from "@likec4/styles/jsx";
+import { ErrorBoundary } from "react-error-boundary";
+
+// src/components/ErrorFallback.tsx
+function ErrorFallback({ error, resetErrorBoundary }) {
+	const dialogRef = useRef(null);
+	return /* @__PURE__ */ jsx("dialog", {
+		open: true,
+		ref: dialogRef,
+		className: css({
+			margin: "0",
+			padding: "0",
+			position: "fixed",
+			top: "5",
+			left: "5",
+			width: "[calc(100vw - ({spacing.5} * 2))]",
+			height: "max-content",
+			maxHeight: "[calc(100vh - ({spacing.5} * 3))]",
+			background: `likec4.overlay.body`,
+			rounded: "sm",
+			borderWidth: "extra",
+			borderColor: `likec4.overlay.border`,
+			shadow: "xl",
+			outline: "none",
+			zIndex: "toast",
+			_backdrop: {
+				cursor: "zoom-out",
+				backdropFilter: `[blur(18px)]`,
+				bg: "[color-mix(in oklab, {colors.likec4.overlay.backdrop} 60%, transparent)]"
+			}
+		}),
+		onClick: (e) => {
+			e.stopPropagation();
+			if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
+				dialogRef.current?.close();
+				return;
+			}
+		},
+		onClose: (e) => {
+			e.stopPropagation();
+			resetErrorBoundary();
+		},
+		children: /* @__PURE__ */ jsx(ErrorFallbackMessage, {
+			error,
+			resetErrorBoundary
+		})
+	});
+}
+function ErrorFallbackMessage({ error, resetErrorBoundary }) {
+	const errorString = error instanceof Error ? error.message : "Unknown error";
+	return /* @__PURE__ */ jsxs(HStack, {
+		p: "xl",
+		gap: "lg",
+		alignItems: "flex-start",
+		flexWrap: "nowrap",
+		children: [/* @__PURE__ */ jsx(ThemeIcon, {
+			size: "md",
+			radius: "xl",
+			color: "red",
+			children: /* @__PURE__ */ jsx(IconX, { style: {
+				width: 20,
+				height: 20
+			} })
+		}), /* @__PURE__ */ jsxs(VStack, {
+			flex: "1",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					fz: "md",
+					children: "Oops, something went wrong"
+				}),
+				/* @__PURE__ */ jsx(ScrollAreaAutosize, {
+					maw: "100%",
+					mah: 400,
+					type: "auto",
+					children: /* @__PURE__ */ jsx(Text, {
+						fz: "md",
+						c: "red",
+						style: {
+							whiteSpace: "pre-wrap",
+							userSelect: "all"
+						},
+						children: errorString
+					})
+				}),
+				/* @__PURE__ */ jsxs(HStack, {
+					gap: "md",
+					mt: "md",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "default",
+						onClick: () => resetErrorBoundary(),
+						children: "Reset"
+					}), /* @__PURE__ */ jsx(Text, {
+						fz: "sm",
+						c: "dimmed",
+						children: "See console for more details and report the issue if it persists."
+					})]
+				})
+			]
+		})]
+	});
+}
+function ErrorBoundary$1({ variant = "dialog", ...props }) {
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
+		FallbackComponent: variant === "dialog" ? ErrorFallback : ErrorFallbackMessage,
+		onError: (err, info) => {
+			console.error(err, info);
+		},
+		...props
+	});
+}
+__name(ErrorBoundary$1, "ErrorBoundary");
+
+export { ErrorBoundary$1 as ErrorBoundary, ErrorFallback, ErrorFallbackMessage };

package/dist/components/FloatingWindow.mjs

@@ -0,0 +1,90 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useId as useId$2 } from "../hooks/useId.mjs";
+import { useMantinePortalProps } from "../hooks/useMantinePortalProps.mjs";
+import { cx } from "@likec4/styles/css";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRafCallback } from "@react-hookz/web";
+import { CloseButton, FloatingWindow } from "@mantine/core";
+import { useSessionStorage } from "@mantine/hooks";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { floatingWindow } from "@likec4/styles/recipes";
+
+// src/components/FloatingWindow.tsx
+function FloatingWindow$1({ children, windowId, onClose, dimensions, initialPosition, className, nonResizeable = false, ...props }) {
+	const portalProps = useMantinePortalProps();
+	const id = useId$2();
+	const [windowState, setWindowState] = useSessionStorage({
+		key: `likec4:window:${windowId ?? id}`,
+		getInitialValueInEffect: false,
+		defaultValue: {
+			dimensions: {
+				minWidth: 220,
+				minHeight: 250,
+				initialWidth: 260,
+				initialHeight: 360,
+				...dimensions
+			},
+			initialPosition: {
+				top: 65,
+				left: 32,
+				...initialPosition
+			}
+		}
+	});
+	const initialStateRef = useRef(windowState);
+	const [updateWindowState] = useRafCallback((update) => {
+		setWindowState((state) => ({
+			dimensions: {
+				...state.dimensions,
+				...update.dimensions
+			},
+			initialPosition: {
+				...state.initialPosition,
+				...update.initialPosition
+			}
+		}));
+	});
+	return /* @__PURE__ */ jsxs(FloatingWindow, {
+		constrainToViewport: true,
+		constrainOffset: 4,
+		dragHandleSelector: ".drag-handle",
+		excludeDragHandleSelector: "button, .nodrag, .mantine-ScrollArea-root",
+		className: cx(floatingWindow(), className),
+		...portalProps,
+		...props,
+		...initialStateRef.current,
+		onPositionChange: (position) => {
+			updateWindowState({ initialPosition: {
+				top: position.y,
+				left: position.x
+			} });
+			props.onPositionChange?.(position);
+		},
+		onSizeChange: (size) => {
+			updateWindowState({ dimensions: {
+				initialHeight: size.height,
+				initialWidth: size.width
+			} });
+			props.onSizeChange?.(size);
+		},
+		children: [
+			children,
+			!nonResizeable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FloatingWindow.ResizeHandle, {
+				"data-resize-handler": "right",
+				tabIndex: -1
+			}), /* @__PURE__ */ jsx(FloatingWindow.ResizeHandle, { "data-resize-handler": "bottom" })] }),
+			/* @__PURE__ */ jsx(Box$1, {
+				className: "drag-header drag-handle",
+				pr: "1",
+				children: onClose && /* @__PURE__ */ jsx(CloseButton, {
+					size: 16,
+					onClick: onClose
+				})
+			})
+		]
+	});
+}
+__name(FloatingWindow$1, "FloatingWindow");
+
+export { FloatingWindow$1 as FloatingWindow };

package/dist/components/GithubIcon.mjs

@@ -0,0 +1,16 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+// src/components/GithubIcon.tsx
+const GithubIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx("svg", {
+	height: "24",
+	width: "24",
+	fill: "currentColor",
+	...props,
+	viewBox: "0 0 24 24",
+	ref,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z" })
+}));
+
+export { GithubIcon };

package/dist/components/Link.mjs

@@ -0,0 +1,102 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import IconCheck from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs";
+import IconCopy from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.mjs";
+import { GithubIcon } from "./GithubIcon.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ActionIcon, Badge, CopyButton } from "@mantine/core";
+import { styled } from "@likec4/styles/jsx";
+
+// src/components/Link.tsx
+const GITHUB_PREFIX = "https://github.com/";
+const Link = forwardRef(({ value, className, ...props }, ref) => {
+	const url = value.url.includes("://") ? value.url : new window.URL(value.url, window.location.href).toString();
+	let isGithub = url.startsWith(GITHUB_PREFIX);
+	return /* @__PURE__ */ jsx(Badge, {
+		ref,
+		variant: "default",
+		radius: "sm",
+		size: "sm",
+		tt: "none",
+		leftSection: null,
+		rightSection: /* @__PURE__ */ jsx(CopyButton, {
+			value: url,
+			timeout: 1500,
+			children: ({ copy, copied }) => /* @__PURE__ */ jsx(ActionIcon, {
+				className: css({
+					opacity: copied ? "1" : "0.45",
+					transition: "fast",
+					_hover: { opacity: "1" }
+				}),
+				tabIndex: -1,
+				size: "20",
+				variant: copied ? "light" : "transparent",
+				color: copied ? "teal" : "gray",
+				"data-active": copied,
+				onClick: (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					copy();
+				},
+				children: copied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, { stroke: 2.5 })
+			})
+		}),
+		...props,
+		className: cx(className, "group"),
+		classNames: {
+			root: css({
+				flexWrap: "nowrap",
+				minHeight: "[24px]",
+				maxWidth: "[500px]",
+				userSelect: "all",
+				pr: "0",
+				backgroundColor: {
+					base: "transparent",
+					_hover: {
+						base: "mantine.gray[1]",
+						_dark: "mantine.dark[5]"
+					}
+				}
+			}),
+			section: css({ "&:is([data-position=\"left\"])": {
+				color: "text.dimmed",
+				userSelect: "none",
+				pointerEvents: "none",
+				_groupHover: {
+					color: "[var(--badge-color)]",
+					opacity: "0.7"
+				}
+			} })
+		},
+		children: /* @__PURE__ */ jsxs(styled.a, {
+			href: url,
+			target: "_blank",
+			style: {
+				color: "var(--badge-color)",
+				cursor: "pointer"
+			},
+			css: {
+				transition: "fast",
+				opacity: {
+					base: "0.7",
+					_hover: "1"
+				},
+				textDecoration: {
+					base: "none",
+					_hover: "underline"
+				}
+			},
+			children: [!value.title && isGithub && /* @__PURE__ */ jsx(GithubIcon, {
+				height: "12",
+				width: "12",
+				style: {
+					verticalAlign: "middle",
+					marginRight: "4px"
+				}
+			}), value.title ?? (isGithub ? url.replace(GITHUB_PREFIX, "") : url)]
+		})
+	});
+});
+
+export { Link };

package/dist/components/Logo.d.mts

@@ -0,0 +1,5 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Customizable } from "../customization/customization-types.mjs";
+import { SVGProps } from "react";
+export declare const Logo: Customizable<(props: SVGProps<SVGSVGElement>) => import("react").JSX.Element, "LogoSvg">;
+export declare const LogoIcon: Customizable<(props: SVGProps<SVGSVGElement>) => import("react").JSX.Element, "LogoIconSvg">;

package/dist/components/Logo.mjs

@@ -0,0 +1,34 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { customizable } from "../customization/customizable.mjs";
+import { css } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/components/Logo.tsx
+const Logo = customizable("LogoSvg")((props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 222 56",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#5E98AF",
+		d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
+	}), /* @__PURE__ */ jsx("path", {
+		className: css({
+			fill: "[#FCFBF7]",
+			_light: { fill: "[#222221]" }
+		}),
+		d: "M71.61 12.08c-.06 3.61.3 29.95.23 31.87 0 1.8 0 3.6.06 5.41 0 .3.18.58.47.58 4.1.18 8.13-.17 12.22-.11 1.34.05 2.69 0 3.97 0 1.29-.06 1.4-.59 1.35-1.63-.06-1.63-.06-3.08-.06-4.65-.06-.82-.53-1.11-1.23-1.11-2.4.06-4.8-.06-7.19.06-.4.06-.82.06-1.23.06-.7-.06-.87-.24-.93-1v-.86c-.18-4.83.17-9.83.17-14.66-.06-4.07 0-7.73-.06-11.34 0-1.57 0-3.14-.05-4.65-.06-.93 0-1.92-.24-2.85-.11-.35-.29-.81-.7-.81h-5.5c-.93 0-1.22.64-1.28 1.57v4.12ZM103.81 35c-.17-6.63-.1-13.67-.05-20.24 0-2.04-.12-4.25-.12-6.28 0-2.21-.87-2.1-2.04-2.15-1.7-.06-2.46-.06-4.15-.06-1.11-.06-1.58.23-1.58 1.34 0 5.7-.18 21.8-.12 24.13.06 2.33.3 12.91.18 15.24-.06.81 0 1.62.06 2.44.05.29.23.58.7.58 1.93-.12 3.74-.12 5.67-.17.7-.06 1.28-.24 1.58-1 .05-.4-.12-11.04-.12-13.83Zm13.92 4.47c0-2.03-.3-7.56-.23-8.72 0-.17.11-.4.17-.4.12 0 .35.11.41.17 1.87 2.44 10.64 19.36 11.7 19.42.28.06.58.06.87.06 1.99-.12 3.74 0 5.73 0 2.04 0 .7-1.98.35-2.5-.53-.76-7.48-13.14-7.9-13.9-1.16-1.98-2.16-4.13-3.32-6.05-.12-.23-.24-.58-.18-.81.12-.7.3-1.34.59-1.98a93.18 93.18 0 0 1 4.55-8.14c1.88-2.97 2.93-4.83 4.45-7.5.35-.64.58-1.34.82-2.1.05-.29-.18-.58-.53-.58-1.11-.05-5.15 0-6.43 0-.59 0-1.17.12-1.46.64-.76 1.46-8.6 15.7-9.35 16.98-.06.12-.24.18-.41.18 0 0-.12-.18-.12-.3-.06-3.25.53-13.9.4-16.04-.05-1.28-.28-1.4-1.57-1.46-1.4-.05-3.33-.05-4.73-.05-1.3 0-1.4.7-1.58 1.62-.06.18-.06 5.64-.06 8.09 0 3.54-.3 25.76.11 32.8 0 .7.18 1.1.77 1.1 1.57-.12 3.91 0 5.49 0 1.11 0 1.29-.12 1.29-1.98 0-2.5.23-4.77.23-7.85 0-.23-.06-.46-.06-.7Zm25.66-1.4h-.06c0 1.46-.05 2.97 0 4.49.06 1.86.18 3.72.3 5.58 0 .64.17.81.76.93 1.22.29 2.4.35 3.62.35 3.16-.12 6.31.11 9.47 0 1.29-.06 1.87.06 3.16-.18 1.17-.23 1.58-.87 1.58-2.61-.12-1.1-.06-1.57-.06-2.91 0-1.92-1.35-2.56-2.52-2.5-.81.06-4.73-.06-6.31-.06-2.63.06-2.22.4-2.22-2.33 0-2.2.06-5.05.06-7.32 0-1.22.11-1.63 1.28-1.63h7.31c1.17.17 1.99-.64 1.99-1.86 0-1.22.12-1.28.12-2.5l-.18-1.75c-.12-.99-.47-1.33-1.46-1.33-.64 0-1.29.05-1.93.11-2.52.18-3.68-.17-6.14 0-.82 0-.93-.11-1-.87-.23-2.27 0-4.77.24-7.04.06-.93.3-1.1 1.17-1.16l8.24-.06c1.11-.11 1.46-.06 1.4-1.16-.11-1.69.06-3.43-.11-5.12-.12-.93-.41-1.1-1.46-1.1-1.76.05-2.17.05-3.92.17-1.75.06-8.77.06-10.46.06-2.46 0-2.63-.18-2.7 2.8-.1 2.32-.05 4.7-.05 7.09 0 4.07-.23 18.66-.12 21.92Zm47.76-24.82c.06-1.92 0-3.5 0-5.35 0-2.15-3.92-1.92-5.32-1.86a18.95 18.95 0 0 0-15.08 9.77c-.82 1.57-1.4 3.2-1.81 4.88a34 34 0 0 0-.59 12.15c.41 3.78 1.4 7.56 3.74 10.59 4.04 5.3 11.46 7.15 17.83 6.16.3-.06.59-.11.82-.29.18-.11.35-.35.35-.58l.18-3.31c.06-1.05 0-1 0-2.04 0-1.4-2.93-.35-4.74-.35-1.75 0-3.62-.06-5.2-.87-2.8-1.57-4.38-4.71-5.26-7.68-1-3.2-1.23-6.63-.64-9.88.7-4.25 2.74-9.13 7.25-10.59 2.57-.87 5.31-.58 7.89-.29.35.06.58-.17.58-.46Zm26.77 15.3c.06-2.5 0-14.84 0-18.38.06-.82 0-1.63-.11-2.45-.06-.99-.24-1.28-1.29-1.33h-4.44c-.82 0-1.35.4-1.82 1.27-1.34 3.2-10.75 24.02-12.15 26.58-.53.99-1 1.63-1 2.68v4.24c0 .76-.06 1.28 1.23 1.28l11.1-.06c1.47 0 1.47.3 1.47 1.1 0 .88-.12 4.9-.12 5.3 0 .58.12 1.16 1.23 1.16h5.08c1.23 0 1.23-.7 1.23-2.03.06-1.17-.06-3.5-.06-4.66 0-.93.18-.98 1.76-.98 1.22 0 1.75-.12 1.75-.88.06-1.57 0-2.67 0-4.42 0-1.04-.93-.98-2.92-.98-.65 0-.7-.18-.7-1.05-.12-1.8-.24-4.6-.24-6.4Zm-7.25-5.94c-.05.7-.11 10.82-.11 12.27-.06.81-.24 1.05-1 1.1-1.93.06-3.85.06-5.78.06-.47 0-.65-.4-.41-.87.23-.4 4.85-11.57 6.13-14.48.18-.17.24-.35.41-.52.18-.12.41-.18.59-.23.06 0 .23.29.23.46 0 .76-.06 1.51-.06 2.21Z"
+	})]
+}));
+const LogoIcon = customizable("LogoIconSvg")((props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 56 56",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "#5E98AF",
+		d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
+	})
+}));
+
+export { Logo, LogoIcon };

package/dist/components/NavigationLink.mjs

@@ -0,0 +1,18 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { cx } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { NavLink } from "@mantine/core";
+import { navigationLink } from "@likec4/styles/recipes";
+
+// src/components/NavigationLink.tsx
+const NavigationLink = forwardRef(({ className, truncateLabel = true, ...others }, ref) => /* @__PURE__ */ jsx(NavLink, {
+	...others,
+	component: "button",
+	classNames: navigationLink({ truncateLabel }),
+	className: cx("group", "mantine-active", className),
+	ref
+}));
+NavigationLink.displayName = "NavigationLink";
+
+export { NavigationLink };

package/dist/components/NavigationPanel.mjs

@@ -0,0 +1,35 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Logo as Logo$1, LogoIcon } from "./Logo.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidMotionProp } from "motion/react";
+import { createStyleContext, isCssProperty } from "@likec4/styles/jsx";
+import * as m$1 from "motion/react-m";
+import { navigationPanel } from "@likec4/styles/recipes";
+
+// src/components/NavigationPanel.tsx
+const { withProvider, withContext } = createStyleContext(navigationPanel);
+const shouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && (isValidMotionProp(prop) || !isCssProperty(prop));
+const LogoButton = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		className: cx("mantine-active", className),
+		children: [/* @__PURE__ */ jsx(LogoIcon, { "data-logo-icon": true }), /* @__PURE__ */ jsx(Logo$1, { "data-logo-full": true })]
+	});
+};
+const Root = withProvider(m$1.div, "root", { shouldForwardProp });
+const Body = withContext(m$1.div, "body", { shouldForwardProp });
+const Logo = withContext(LogoButton, "logo", { shouldForwardProp });
+const Label = withContext(m$1.div, "label", { shouldForwardProp });
+const Breadcrumb = withContext(m$1.button, "breadcrumb", { shouldForwardProp });
+const Dropdown = withContext(m$1.div, "dropdown", { shouldForwardProp });
+const NavigationPanel = {
+	Root,
+	Body,
+	Logo,
+	Label,
+	Breadcrumb,
+	Dropdown
+};
+
+export { NavigationPanel };

package/dist/components/PortalToContainer.d.mts

@@ -0,0 +1,7 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { PropsWithChildren } from "react";
+/**
+ * PortalToContainer is used to render elements outside the LikeC4DiagramXYFlow, but inside the container.
+ * It is used internally by the library.
+ */
+export declare function PortalToContainer({ children }: PropsWithChildren): import("react").JSX.Element;

package/dist/components/PortalToContainer.mjs

@@ -0,0 +1,20 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useRootContainerContext } from "../context/RootContainerContext.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Portal } from "@mantine/core";
+
+// src/components/PortalToContainer.tsx
+/**
+* PortalToContainer is used to render elements outside the LikeC4DiagramXYFlow, but inside the container.
+* It is used internally by the library.
+*/
+function PortalToContainer({ children }) {
+	const ctx = useRootContainerContext();
+	if (!ctx) throw new Error("PortalToContainer must be used within RootContainer");
+	return /* @__PURE__ */ jsx(Portal, {
+		target: ctx.ref.current ?? ctx.selector,
+		children
+	});
+}
+
+export { PortalToContainer };