@likec4/diagram 1.60.0 → 1.61.0

package/dist/components/Logo.mjs

@@ -1,41 +1,34 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { customizable } from "../customization/customizable.mjs";
 import { css } from "@likec4/styles/css";
-import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/components/Logo.tsx
-const Logo = forwardRef((props, ref) => {
-	return /* @__PURE__ */ jsxs("svg", {
-		ref,
-		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 = forwardRef((props, ref) => {
-	return /* @__PURE__ */ jsx("svg", {
-		ref,
-		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"
-		})
-	});
-});
+// 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"
+	})
+}));
 
-//#endregion
 export { Logo, LogoIcon };

package/dist/components/NavigationLink.mjs

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { NavLink } from "@mantine/core";
 import { navigationLink } from "@likec4/styles/recipes";
 
-//#region src/components/NavigationLink.tsx
+// src/components/NavigationLink.tsx
 const NavigationLink = forwardRef(({ className, truncateLabel = true, ...others }, ref) => /* @__PURE__ */ jsx(NavLink, {
 	...others,
 	component: "button",
@@ -15,5 +15,4 @@ const NavigationLink = forwardRef(({ className, truncateLabel = true, ...others
 }));
 NavigationLink.displayName = "NavigationLink";
 
-//#endregion
 export { NavigationLink };

package/dist/components/NavigationPanel.mjs

@@ -1,35 +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 { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { isValidMotionProp, m } from "motion/react";
+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";
 
-//#region src/components/NavigationPanel.tsx
+// src/components/NavigationPanel.tsx
 const { withProvider, withContext } = createStyleContext(navigationPanel);
 const shouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && (isValidMotionProp(prop) || !isCssProperty(prop));
-const LogoButton = forwardRef(({ className, ...props }, ref) => {
+const LogoButton = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		...props,
-		ref,
 		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.div, "root", { shouldForwardProp });
-const Body = withContext(m.div, "body", { shouldForwardProp });
+};
+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.div, "label", { shouldForwardProp });
-const Dropdown = withContext(m.div, "dropdown", { 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
 };
 
-//#endregion
 export { NavigationPanel };

package/dist/components/PortalToContainer.d.mts

@@ -1,9 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { PropsWithChildren } from "react";
-//#region src/components/PortalToContainer.d.ts
 /**
  * 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;
-//#endregion
+export declare function PortalToContainer({ children }: PropsWithChildren): import("react").JSX.Element;

package/dist/components/PortalToContainer.mjs

@@ -3,7 +3,7 @@ import { useRootContainerContext } from "../context/RootContainerContext.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Portal } from "@mantine/core";
 
-//#region src/components/PortalToContainer.tsx
+// src/components/PortalToContainer.tsx
 /**
 * PortalToContainer is used to render elements outside the LikeC4DiagramXYFlow, but inside the container.
 * It is used internally by the library.
@@ -17,5 +17,4 @@ function PortalToContainer({ children }) {
 	});
 }
 
-//#endregion
 export { PortalToContainer };

package/dist/components/RootContainer.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import { useStore } from "@nanostores/react";
 import { atom } from "nanostores";
 
-//#region src/components/RootContainer.tsx
+// src/components/RootContainer.tsx
 function RootContainer({ id, className, reduceGraphics = false, children }) {
 	const ref = useRef(null);
 	const [$isPanning] = useState(() => atom(false));
@@ -36,5 +36,4 @@ function RootContainer({ id, className, reduceGraphics = false, children }) {
 	});
 }
 
-//#endregion
 export { RootContainer };

package/dist/components/SearchControl.css.mjs

@@ -1,6 +1,6 @@
 import { css } from "@likec4/styles/css";
 
-//#region src/components/SearchControl.css.ts
+// src/components/SearchControl.css.ts
 const root = css({
 	height: "control.sm",
 	paddingLeft: "sm",
@@ -65,5 +65,4 @@ const shortcut = css({
 	}
 });
 
-//#endregion
 export { placeholder, root, shortcut };

package/dist/components/SearchControl.d.mts

@@ -1,6 +1,5 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { ElementProps, UnstyledButtonProps } from "@mantine/core";
-//#region src/components/SearchControl.d.ts
 interface SearchControlProps extends Omit<UnstyledButtonProps, 'className'>, ElementProps<'button'> {}
 export declare function SearchControl({ className, ...others }: SearchControlProps): import("react").JSX.Element;
-//#endregion
+export {};

package/dist/components/SearchControl.mjs

@@ -1,12 +1,12 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import IconSearch from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs";
+import IconSearch from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs";
 import { placeholder, root, shortcut } from "./SearchControl.css.mjs";
 import { cx } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Group, Text, UnstyledButton } from "@mantine/core";
 import { isMacOs } from "@xyflow/system";
 
-//#region src/components/SearchControl.tsx
+// src/components/SearchControl.tsx
 function SearchControl({ className, ...others }) {
 	const isMac = isMacOs();
 	return /* @__PURE__ */ jsx(UnstyledButton, {
@@ -37,5 +37,4 @@ function SearchControl({ className, ...others }) {
 	});
 }
 
-//#endregion
 export { SearchControl };

package/dist/components/ViewIcon.mjs

@@ -1,13 +1,13 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import IconStack2 from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.mjs";
-import IconZoomScan from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
-import IconDirectionSignFilled from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.mjs";
-import IconStarFilled from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.mjs";
+import IconDirectionSignFilled from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.mjs";
+import IconStack2 from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.mjs";
+import IconStarFilled from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.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 { css, cx } from "@likec4/styles/css";
 import { jsx } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
 
-//#region src/components/ViewIcon.tsx
+// src/components/ViewIcon.tsx
 const viewTypeIconCss = css({
 	verticalAlign: "middle",
 	opacity: {
@@ -72,5 +72,4 @@ function ViewIcon({ type, className, ...props }) {
 	nonexhaustive(type);
 }
 
-//#endregion
 export { ViewIcon, viewIcon };

package/dist/components/ViewNotFound.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/components/ViewNotFound.tsx
+// src/components/ViewNotFound.tsx
 function ErrorMessage({ children }) {
 	return /* @__PURE__ */ jsx("div", {
 		style: { margin: "1em 0" },
@@ -25,5 +25,4 @@ function ViewNotFound({ viewId }) {
 	] });
 }
 
-//#endregion
 export { ErrorMessage, ViewNotFound };

package/dist/components/markdown/MarkdownWithRefs.mjs

@@ -0,0 +1,268 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { Markdown } from "../../base-primitives/Markdown.mjs";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
+import { IconRenderer } from "../../context/IconRenderer.mjs";
+import { useOptionalLikeC4Model } from "../../context/LikeC4ModelContext.mjs";
+import { useRootContainerRef } from "../../context/RootContainerContext.mjs";
+import { useCallbackRef } from "../../hooks/useCallbackRef.mjs";
+import { useDiagramMarkdownRefActions } from "../../hooks/useDiagramMarkdownRefActions.mjs";
+import { ViewIcon } from "../ViewIcon.mjs";
+import { createMarkdownRefResolver, resolveMarkdownRefs } from "./markdown-refs.mjs";
+import { useMarkdownRefsInteractivity } from "./useMarkdownRefsInteractivity.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { memo, useEffect, useLayoutEffect, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { deepEqual, shallowEqual } from "fast-equals";
+import { Button, Popover, PopoverDropdown, Text, usePopoverContext } from "@mantine/core";
+import { token } from "@likec4/styles/tokens";
+import { Box as Box$1, Txt } from "@likec4/styles/jsx";
+import { useAtom } from "@xstate/store-react";
+
+// src/components/markdown/MarkdownWithRefs.tsx
+const refsStyles = css({
+	"& :where([data-likec4-ref-state=\"link\"])": {
+		cursor: "pointer",
+		_focusVisible: {
+			outline: "[2px solid var(--mantine-primary-color-filled)]",
+			outlineOffset: "[1px]",
+			borderRadius: "xs"
+		}
+	},
+	"& :where([data-likec4-ref-state=\"missing\"])": {
+		opacity: "0.6",
+		textDecorationLine: "underline",
+		textDecorationStyle: "dotted",
+		textUnderlineOffset: "2px"
+	}
+});
+const MarkdownWithRefs = memo((props) => {
+	const value = props.value;
+	if (value.isEmpty || !value.isMarkdown) return /* @__PURE__ */ jsx(Markdown, { ...props });
+	return /* @__PURE__ */ jsx(GuardedMarkdown, {
+		...props,
+		value
+	});
+}, ({ value: prevValue, ...prev }, { value: nextValue, ...next }) => {
+	return prevValue.equals(nextValue) && shallowEqual(prev, next);
+});
+MarkdownWithRefs.displayName = "MarkdownWithRefs";
+function GuardedMarkdown({ value, ...props }) {
+	const model = useOptionalLikeC4Model();
+	const { enableElementDetails: canOpenElement, enableNavigateTo: canOpenView } = useEnabledFeatures();
+	const resolver = useMemo(() => createMarkdownRefResolver(model, {
+		elements: canOpenElement,
+		views: canOpenView
+	}), [
+		model,
+		canOpenElement,
+		canOpenView
+	]);
+	const originalHtml = value.html;
+	const resolvedValue = useMemo(() => ({ html: resolveMarkdownRefs(originalHtml, resolver) }), [originalHtml, resolver]);
+	if (!resolvedValue.html.includes("data-likec4-ref")) return /* @__PURE__ */ jsx(Markdown, {
+		...props,
+		value: resolvedValue
+	});
+	return /* @__PURE__ */ jsx(MarkdownWithExistingRefs, {
+		...props,
+		value: resolvedValue,
+		resolver
+	});
+}
+function MarkdownWithExistingRefs({ className, resolver, onClick, onKeyDown, onMouseOver, onMouseOut, onFocus, onBlur, ...props }) {
+	const actions = useDiagramMarkdownRefActions();
+	const interactivity = useMarkdownRefsInteractivity(actions, resolver);
+	const handlers = {
+		onClick: useCallbackRef((e) => {
+			if (!interactivity.activate(e)) onClick?.(e);
+		}),
+		onKeyDown: useCallbackRef((e) => {
+			if (e.key !== "Enter" || !interactivity.activate(e)) onKeyDown?.(e);
+		}),
+		onMouseOver: useCallbackRef((e) => {
+			interactivity.open(e.target, OPEN_DELAY);
+			onMouseOver?.(e);
+		}),
+		onMouseOut: useCallbackRef((e) => {
+			const from = interactivity.closestRef(e.target);
+			if (from && !(e.relatedTarget instanceof Node && from.contains(e.relatedTarget))) interactivity.close(CLOSE_DELAY);
+			onMouseOut?.(e);
+		}),
+		onFocus: useCallbackRef((e) => {
+			interactivity.open(e.target);
+			onFocus?.(e);
+		}),
+		onBlur: useCallbackRef((e) => {
+			if (!interactivity.isInsidePreview(e.relatedTarget)) interactivity.close();
+			onBlur?.(e);
+		})
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Markdown, {
+		...props,
+		...handlers,
+		className: cx(refsStyles, className)
+	}), /* @__PURE__ */ jsx(MarkdownRefPopover, { interactivity })] });
+}
+const OPEN_DELAY = 400;
+const CLOSE_DELAY = 150;
+function MarkdownRefPopover({ interactivity }) {
+	const rootContainer = useRootContainerRef();
+	const previewId = interactivity.previewId;
+	const { opened, activeElement } = useAtom(interactivity.$active, (state) => ({
+		opened: state.opened,
+		activeElement: state.opened ? state.element : null
+	}), shallowEqual);
+	const portalProps = useAtom(interactivity.$activeElement, (element) => ({ target: element?.closest("dialog") ?? rootContainer.current ?? "body" }), shallowEqual);
+	useEffect(() => {
+		if (!activeElement || !opened) return;
+		activeElement.setAttribute("aria-describedby", previewId);
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				e.stopPropagation();
+				interactivity.close();
+			}
+		};
+		window.addEventListener("keydown", onKeyDown, { capture: true });
+		return () => {
+			activeElement.removeAttribute("aria-describedby");
+			window.removeEventListener("keydown", onKeyDown, { capture: true });
+		};
+	}, [
+		activeElement,
+		opened,
+		interactivity
+	]);
+	const { close, clearTimer } = interactivity;
+	if (!activeElement) return null;
+	return /* @__PURE__ */ jsxs(Popover, {
+		opened,
+		onClose: () => close(),
+		position: "bottom-start",
+		offset: 6,
+		shadow: "md",
+		zIndex: token.var("zIndex.tooltip"),
+		withRoles: false,
+		trapFocus: false,
+		returnFocus: false,
+		transitionProps: { duration: 100 },
+		portalProps,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, { element: activeElement }), /* @__PURE__ */ jsx(PopoverDropdown, {
+			id: previewId,
+			role: "tooltip",
+			className: previewStyles,
+			onMouseEnter: () => clearTimer(),
+			onMouseLeave: () => close(CLOSE_DELAY),
+			onClick: stopPropagation,
+			onDoubleClick: stopPropagation,
+			onPointerDown: stopPropagation,
+			onMouseDown: stopPropagation,
+			children: /* @__PURE__ */ jsx(MarkdownRefPreviewCard, { interactivity })
+		})]
+	});
+}
+/**
+* Anchors the popover to an element that is not a React child (refs are rendered from HTML)
+*/
+function PopoverAnchor({ element }) {
+	const { reference } = usePopoverContext();
+	useLayoutEffect(() => {
+		reference(element);
+	}, [reference, element]);
+	return null;
+}
+const previewStyles = css({
+	maxWidth: "[320px]",
+	paddingX: "3",
+	paddingY: "2"
+});
+const previewHeaderStyles = css({
+	display: "flex",
+	alignItems: "flex-start",
+	gap: "2"
+});
+const previewIconStyles = css({
+	flex: "[0 0 20px]",
+	boxSize: "[20px]",
+	marginTop: "[1px]",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	"& :where(svg, img)": {
+		width: "100%",
+		height: "auto",
+		maxHeight: "100%",
+		pointerEvents: "none"
+	},
+	"& img": { objectFit: "contain" }
+});
+const previewBodyStyles = css({
+	marginTop: "1.5",
+	lineClamp: 4,
+	"& :where(p:last-child)": { marginBottom: "0" }
+});
+/**
+* Content of the preview card of a ref (exported for tests)
+*/
+function MarkdownRefPreviewCard({ interactivity }) {
+	const resolved = useAtom(interactivity.$active, (s) => s.resolved, deepEqual);
+	if (!resolved) return null;
+	if (resolved.state === "missing") return /* @__PURE__ */ jsx(Text, {
+		fz: "xs",
+		c: "dimmed",
+		children: resolved.message
+	});
+	const { title, meta, body } = resolved.preview;
+	const icon = resolved.kind === "element" ? /* @__PURE__ */ jsx(IconRenderer, {
+		element: {
+			id: resolved.fqn,
+			title,
+			icon: resolved.icon
+		},
+		className: previewIconStyles
+	}) : /* @__PURE__ */ jsx("div", {
+		className: previewIconStyles,
+		children: /* @__PURE__ */ jsx(ViewIcon, {
+			type: resolved.viewType,
+			size: 16
+		})
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: previewHeaderStyles,
+			children: [icon, /* @__PURE__ */ jsxs(Box$1, {
+				minW: "0",
+				children: [/* @__PURE__ */ jsx(Text, {
+					fz: "sm",
+					fw: 500,
+					lh: 1.3,
+					children: title
+				}), /* @__PURE__ */ jsx(Txt, {
+					size: "xxs",
+					dimmed: true,
+					mt: "1",
+					children: meta
+				})]
+			})]
+		}),
+		body.nonEmpty && /* @__PURE__ */ jsx(Markdown, {
+			value: body,
+			fontSize: "sm",
+			textScale: .8,
+			className: previewBodyStyles
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			size: "compact-xs",
+			variant: "default",
+			fz: "xxs",
+			mt: "xs",
+			onClick: () => interactivity.openRef(resolved),
+			children: resolved.kind === "element" ? "Open details" : "Open view"
+		})
+	] });
+}
+function stopPropagation(e) {
+	e.stopPropagation();
+}
+
+export { MarkdownRefPreviewCard, MarkdownWithRefs };