@likec4/diagram 1.60.0 → 1.61.0

package/dist/components/markdown/markdown-refs.mjs

@@ -0,0 +1,145 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+
+// src/components/markdown/markdown-refs.ts
+/**
+* Creates a resolver of Markdown refs against the model.
+* Without a model, every ref is rendered as is (fallback text), without links.
+*/
+function createMarkdownRefResolver(model, options) {
+	return (ref) => {
+		switch (true) {
+			case ref.kind === "element": {
+				if (!model) return {
+					state: "text",
+					text: ref.target
+				};
+				const element = model.findElement(ref.target);
+				if (!element) return {
+					state: "missing",
+					text: null,
+					message: `Element '${ref.target}' not found`
+				};
+				const text = element.title;
+				if (!options.elements) return {
+					state: "text",
+					text
+				};
+				return {
+					state: "link",
+					kind: "element",
+					fqn: element.id,
+					icon: element.icon,
+					text,
+					preview: {
+						title: element.title,
+						meta: element.technology ? `${element.id} · ${element.technology}` : element.id,
+						body: element.summary
+					}
+				};
+			}
+			case ref.kind === "view": {
+				if (!model) return {
+					state: "text",
+					text: ref.target
+				};
+				const view = model.findView(ref.target);
+				if (!view) return {
+					state: "missing",
+					text: null,
+					message: `View '${ref.target}' not found`
+				};
+				const text = view.titleOrId;
+				if (!options.views) return {
+					state: "text",
+					text
+				};
+				return {
+					state: "link",
+					kind: "view",
+					viewId: view.id,
+					viewType: view._type,
+					text,
+					preview: {
+						title: text,
+						meta: `${view._type} view`,
+						body: view.description
+					}
+				};
+			}
+			default: return {
+				state: "missing",
+				text: null,
+				message: ref.namespace !== null ? `Unknown link type '${ref.namespace}:'` : `Unknown link type for '${ref.target}'`
+			};
+		}
+	};
+}
+/**
+* Matches ref anchors in the sanitized HTML from `markdownToHtml`.
+* Attribute values never contain `"` (encoded as `&#x22;`) and text never contains `<` (encoded as `&#x3C;`).
+* The anchor has only a text child: refs never contain markup.
+*/
+const refAnchorRe = /<a data-likec4-ref="([^"]*)" data-likec4-ref-kind="(element|view|unknown)"(?: data-likec4-ref-namespace="([^"]*)")?( data-likec4-ref-label)?>([^<]*)<\/a>/g;
+const namedEntities = {
+	amp: "&",
+	lt: "<",
+	gt: ">",
+	quot: "\"",
+	apos: "'"
+};
+function decodeEntities(value) {
+	return value.replace(/&(#x[0-9a-f]+|#[0-9]+|[a-z]+);/gi, (match, entity) => {
+		switch (true) {
+			case entity[0] === "#": {
+				const codePoint = entity[1] === "x" || entity[1] === "X" ? Number.parseInt(entity.slice(2), 16) : Number.parseInt(entity.slice(1), 10);
+				return Number.isNaN(codePoint) ? match : String.fromCodePoint(codePoint);
+			}
+			default: return namedEntities[entity.toLowerCase()] ?? match;
+		}
+	});
+}
+function escapeHtml(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
+}
+/**
+* Parses the ref attributes of an element (used by event handlers).
+*/
+function parseMarkdownRefAnchor(el) {
+	const target = el.getAttribute("data-likec4-ref");
+	const kind = el.getAttribute("data-likec4-ref-kind");
+	if (target === null || kind !== "element" && kind !== "view" && kind !== "unknown") return null;
+	return {
+		target,
+		kind,
+		namespace: el.getAttribute("data-likec4-ref-namespace"),
+		hasLabel: el.hasAttribute("data-likec4-ref-label")
+	};
+}
+/**
+* Replaces ref anchors in the HTML rendered by `markdownToHtml` with resolved refs:
+* - link: `<a role="link" tabindex="0" data-likec4-ref-state="link">title or label</a>`,
+*   view links also have `data-likec4-ref-view-type="<view type>"` (styles pick the icon by it)
+* - text: `<span data-likec4-ref-state="text">title or label</span>`
+* - missing: `<span data-likec4-ref-state="missing">label or target</span>`
+*
+* Original `data-likec4-ref*` attributes are kept, so event handlers can read the target.
+* Titles are HTML-escaped; labels are kept as they were encoded by `markdownToHtml`.
+*/
+function resolveMarkdownRefs(html, resolve) {
+	if (!html.includes("data-likec4-ref")) return html;
+	return html.replace(refAnchorRe, (_match, rawTarget, kind, rawNamespace, label, rawText) => {
+		const hasLabel = !!label;
+		const resolved = resolve({
+			target: decodeEntities(rawTarget),
+			kind,
+			namespace: rawNamespace !== void 0 ? decodeEntities(rawNamespace) : null,
+			hasLabel
+		});
+		const text = hasLabel || resolved.text === null ? rawText : escapeHtml(resolved.text);
+		const attrs = `data-likec4-ref="${rawTarget}" data-likec4-ref-kind="${kind}"` + (rawNamespace !== void 0 ? ` data-likec4-ref-namespace="${rawNamespace}"` : "") + (hasLabel ? " data-likec4-ref-label" : "");
+		if (resolved.state === "link") return `<a ${attrs}${resolved.kind === "view" ? ` data-likec4-ref-view-type="${resolved.viewType}"` : ""} data-likec4-ref-state="link" role="link" tabindex="0">${text}</a>`;
+		return `<span ${attrs} data-likec4-ref-state="${resolved.state}">${text}</span>`;
+	});
+}
+
+export { createMarkdownRefResolver, parseMarkdownRefAnchor, resolveMarkdownRefs };

package/dist/components/markdown/useMarkdownRefsInteractivity.mjs

@@ -0,0 +1,126 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../../hooks/useCallbackRef.mjs";
+import { parseMarkdownRefAnchor } from "./markdown-refs.mjs";
+import { useId, useMemo, useRef } from "react";
+import { useSyncedRef, useUnmountEffect } from "@react-hookz/web";
+import { shallowEqual } from "fast-equals";
+import { nonexhaustive } from "@likec4/core";
+import { createAtom } from "@xstate/store";
+
+// src/components/markdown/useMarkdownRefsInteractivity.tsx
+const interactiveRefSelector = "[data-likec4-ref-state=\"link\"], [data-likec4-ref-state=\"missing\"]";
+const inactiveRefState = {
+	element: null,
+	resolved: null,
+	opened: false
+};
+/**
+* Delegated event handlers for refs: one set of listeners on the Markdown block for all refs in it.
+* Activates links on click and Enter, shows a preview card on hover and focus.
+* Handlers from props are composed (called for events that are not ref activations).
+*/
+function useMarkdownRefsInteractivity(actions2, resolver3) {
+	const actionsRef = useSyncedRef(actions2);
+	const resolve = useCallbackRef(resolver3);
+	const previewId = useId();
+	const timer = useRef(void 0);
+	const interactivity = useMemo(() => {
+		const $active = createAtom(inactiveRefState, { compare: shallowEqual });
+		const $activeElement = createAtom(() => $active.get().element, { compare: (a, b) => a === b });
+		const $opened = createAtom(() => {
+			const state = $active.get();
+			return state.opened && state.element.isConnected;
+		});
+		let animationFrame = null;
+		const clearTimer = () => {
+			clearTimeout(timer.current);
+			if (animationFrame) {
+				cancelAnimationFrame(animationFrame);
+				animationFrame = null;
+			}
+		};
+		const open = (target, delay = 0) => {
+			if (animationFrame) cancelAnimationFrame(animationFrame);
+			animationFrame = requestAnimationFrame(() => {
+				animationFrame = null;
+				const element = closestRef(target, interactiveRefSelector);
+				if (!element) return;
+				clearTimer();
+				const state = $active.get();
+				if (state.opened && state.element === element) return;
+				const anchor = parseMarkdownRefAnchor(element);
+				const resolved = anchor ? resolve(anchor) : null;
+				if (!resolved || resolved.state === "text") return;
+				const show = () => $active.set((s) => ({
+					...s,
+					element,
+					resolved,
+					opened: true
+				}));
+				if (delay === 0 || state.opened) show();
+				else timer.current = setTimeout(show, delay);
+			});
+		};
+		const close = (delay = 0) => {
+			clearTimer();
+			const hide = () => $active.set((s) => ({
+				...s,
+				opened: false
+			}));
+			if (delay === 0) hide();
+			else timer.current = setTimeout(hide, delay);
+		};
+		const openRef = (resolved) => {
+			close();
+			switch (resolved.kind) {
+				case "element":
+					actionsRef.current?.openElement?.(resolved.fqn);
+					break;
+				case "view":
+					actionsRef.current?.openView?.(resolved.viewId);
+					break;
+				default: nonexhaustive(resolved);
+			}
+		};
+		/**
+		* @returns true if the event activated a ref
+		*/
+		const activate = (e) => {
+			const element = closestRef(e.target, "[data-likec4-ref-state=\"link\"]");
+			const anchor = element ? parseMarkdownRefAnchor(element) : null;
+			const resolved = anchor ? resolve(anchor) : null;
+			if (resolved?.state !== "link") return false;
+			e.preventDefault();
+			e.stopPropagation();
+			openRef(resolved);
+			return true;
+		};
+		const isInsidePreview = (node) => node instanceof Node && !!document.getElementById(previewId)?.contains(node);
+		return {
+			previewId,
+			$active,
+			$activeElement,
+			$opened,
+			open,
+			close,
+			openRef,
+			activate,
+			isInsidePreview,
+			clearTimer,
+			closestRef: (target) => closestRef(target, interactiveRefSelector),
+			reset: () => {
+				clearTimer();
+				$active.set(inactiveRefState);
+			}
+		};
+	}, [previewId]);
+	useUnmountEffect(interactivity.reset);
+	return interactivity;
+}
+function closestRef(target, selector) {
+	if (!(target instanceof Element)) return null;
+	const element = target.closest(selector);
+	return element instanceof HTMLElement ? element : null;
+}
+
+export { closestRef, interactiveRefSelector, useMarkdownRefsInteractivity };

package/dist/context/ComparingLayoutsContext.mjs

@@ -0,0 +1,24 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext } from "react";
+
+// src/context/ComparingLayoutsContext.tsx
+const ComparingLayoutsContext = createContext(false);
+/**
+* Provides whether the diagram is comparing manual layout with the latest auto layout
+* (diagram actor is in `ready.comparing` state).
+*
+* Provided once by the diagram actor provider, so that nodes and edges
+* don't need to subscribe to the actor.
+*/
+const ComparingLayoutsProvider = ComparingLayoutsContext.Provider;
+/**
+* Returns true if the diagram is comparing manual layout with the latest auto layout.
+*
+* Unlike `useEnabledFeatures().enableCompareWithLatest` (feature is available),
+* this reflects whether comparing is active.
+*/
+function useIsComparingLayouts() {
+	return useContext(ComparingLayoutsContext);
+}
+
+export { ComparingLayoutsProvider, useIsComparingLayouts };

package/dist/context/CurrentViewModelProvider.mjs

@@ -3,7 +3,7 @@ import { useCurrentViewId } from "../hooks/useCurrentView.mjs";
 import { CurrentViewModelContext, useOptionalLikeC4Model } from "./LikeC4ModelContext.mjs";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/context/CurrentViewModelProvider.tsx
+// src/context/CurrentViewModelProvider.tsx
 function CurrentViewModelProvider({ children }) {
 	const viewId = useCurrentViewId();
 	const viewmodel = useOptionalLikeC4Model()?.findView(viewId) ?? null;
@@ -13,5 +13,4 @@ function CurrentViewModelProvider({ children }) {
 	});
 }
 
-//#endregion
 export { CurrentViewModelProvider };

package/dist/context/DiagramEventHandlers.mjs

@@ -1,9 +1,10 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { createContext, useContext, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useSyncedRef } from "@react-hookz/web";
 import { isFunction, keys, mapToObj } from "remeda";
 
-//#region src/context/DiagramEventHandlers.tsx
+// src/context/DiagramEventHandlers.tsx
 const defaultHandlers = {
 	onNavigateTo: null,
 	onNodeClick: null,
@@ -25,8 +26,7 @@ const DiagramEventHandlersReactContext = createContext({
 	handlersRef: { current: defaultHandlers }
 });
 function DiagramEventHandlers({ handlers, children }) {
-	const handlersRef = useRef(handlers);
-	handlersRef.current = handlers;
+	const handlersRef = useSyncedRef(handlers);
 	const deps = HandlerNames.map((name) => isFunction(handlers[name]) ? name : "-").join(",");
 	const value = useMemo(() => ({
 		...mapToObj(HandlerNames, (name) => {
@@ -44,5 +44,4 @@ function useDiagramEventHandlers() {
 	return useContext(DiagramEventHandlersReactContext);
 }
 
-//#endregion
 export { DiagramEventHandlers, useDiagramEventHandlers };

package/dist/context/DiagramFeatures.d.mts

@@ -2,10 +2,9 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { PropsWithChildren } from "react";
 import { JSX as JSX$1 } from "react/jsx-runtime";
 import { ExclusiveUnion } from "@likec4/core/types";
-//#region src/context/DiagramFeatures.d.ts
 declare const FeatureNames: readonly ["Controls", "Editor", "AISemanticLayout", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Notes", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
-export type TogglableFeature = ('ReadOnly' | 'CompareWithLatest') & FeatureName;
+export type TogglableFeature = 'ReadOnly' & FeatureName;
 export type EnabledFeatures = { [P in `enable${FeatureName}`]: boolean; };
 export declare function useEnabledFeatures(): EnabledFeatures;
 /**
@@ -26,4 +25,4 @@ export declare function IfNotEnabled({ feature, children }: PropsWithChildren<{
 }>): JSX$1.Element | null;
 export declare function IfReadOnly({ children }: PropsWithChildren): JSX$1.Element | null;
 export declare function IfNotReadOnly({ children }: PropsWithChildren): JSX$1.Element | null;
-//#endregion
+export {};

package/dist/context/DiagramFeatures.mjs

@@ -1,10 +1,11 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { useUpdateEffect } from "../hooks/useUpdateEffect.mjs";
 import { useSetState } from "../hooks/useSetState.mjs";
+import { useUpdateEffect } from "../hooks/useUpdateEffect.mjs";
+import { ComparingLayoutsProvider } from "./ComparingLayoutsContext.mjs";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 
-//#region src/context/DiagramFeatures.tsx
+// src/context/DiagramFeatures.tsx
 const DefaultFeatures = {
 	enableEditor: false,
 	/**
@@ -62,7 +63,10 @@ const overridesForOverlays = {
 DiagramFeatures.Overlays = ({ children }) => {
 	return /* @__PURE__ */ jsx(DiagramFeatures, {
 		overrides: overridesForOverlays,
-		children
+		children: /* @__PURE__ */ jsx(ComparingLayoutsProvider, {
+			value: false,
+			children
+		})
 	});
 };
 function useEnabledFeatures() {
@@ -78,18 +82,20 @@ function useEnabledFeatures() {
 * </IfEnabled>
 */
 function IfEnabled({ feature, children, and = true }) {
-	return useEnabledFeatures()[`enable${feature}`] === true && and ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
+	const enabled = useEnabledFeatures()[`enable${feature}`] === true;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: enabled && and ? children : null });
 }
 function IfNotEnabled({ feature, children }) {
-	return useEnabledFeatures()[`enable${feature}`] !== true ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
+	const notEnabled = useEnabledFeatures()[`enable${feature}`] !== true;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: notEnabled ? children : null });
 }
 function IfReadOnly({ children }) {
-	return useEnabledFeatures().enableReadOnly === true ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
+	const isReadOnly = useEnabledFeatures().enableReadOnly === true;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: isReadOnly ? children : null });
 }
 function IfNotReadOnly({ children }) {
-	if (useEnabledFeatures().enableReadOnly === true) return null;
-	return /* @__PURE__ */ jsx(Fragment$1, { children });
+	const isReadOnly = useEnabledFeatures().enableReadOnly === true;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: isReadOnly ? null : children });
 }
 
-//#endregion
 export { DefaultFeatures, DiagramFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures };

package/dist/context/EnsureMantine.mjs

@@ -4,7 +4,7 @@ import { useContext, useEffect } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { MantineContext } from "@mantine/core";
 
-//#region src/context/EnsureMantine.tsx
+// src/context/EnsureMantine.tsx
 function EnsureMantine({ children }) {
 	const mantineCtx = useContext(MantineContext);
 	useEffect(() => {
@@ -14,5 +14,4 @@ function EnsureMantine({ children }) {
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
 
-//#endregion
 export { EnsureMantine };

package/dist/context/FramerMotionConfig.d.mts

@@ -1,11 +1,9 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { PropsWithChildren } from "react";
-//#region src/context/FramerMotionConfig.d.ts
 export declare function FramerMotionConfig({ reducedMotion, children }: PropsWithChildren<{
   /**
    * If true, will respect the device prefersReducedMotion setting by switching
    * transform animations off.
    */
   reducedMotion?: 'always' | 'never' | 'user' | undefined;
-}>): import("react").JSX.Element;
-//#endregion
+}>): import("react").JSX.Element;

package/dist/context/FramerMotionConfig.mjs

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useMantineStyleNonce } from "@mantine/core";
 import { LazyMotion, MotionConfig, domMax } from "motion/react";
 
-//#region src/context/FramerMotionConfig.tsx
+// src/context/FramerMotionConfig.tsx
 function FramerMotionConfig({ reducedMotion = "user", children }) {
 	const nonce = useMantineStyleNonce()?.();
 	return /* @__PURE__ */ jsx(LazyMotion, {
@@ -17,5 +17,4 @@ function FramerMotionConfig({ reducedMotion = "user", children }) {
 	});
 }
 
-//#endregion
 export { FramerMotionConfig };

package/dist/context/IconRenderer.d.mts

@@ -2,7 +2,6 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { ElementIconRenderer, ElementIconRendererProps } from "../LikeC4Diagram.props.mjs";
 import { CSSProperties, PropsWithChildren, ReactNode } from "react";
 import { ElementShape } from "@likec4/core";
-//#region src/context/IconRenderer.d.ts
 /**
  * Provider for custom element icon renderers
  *
@@ -20,5 +19,4 @@ import { ElementShape } from "@likec4/core";
 export declare function IconRendererProvider({ value, children }: PropsWithChildren<{
   value: ElementIconRenderer | null;
 }>): import("react").JSX.Element;
-export declare function DefaultIconRenderer({ node, ...props }: ElementIconRendererProps): import("react").JSX.Element | null;
-//#endregion
+export declare function DefaultIconRenderer({ node, ...props }: ElementIconRendererProps): import("react").JSX.Element | null;

package/dist/context/IconRenderer.mjs

@@ -1,17 +1,17 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import IconBrowser from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.mjs";
-import IconCylinder from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.mjs";
-import IconDeviceMobile from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.mjs";
-import IconFileText from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.mjs";
-import IconRectangularPrism from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.mjs";
-import IconReorder from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.mjs";
-import IconRobot from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRobot.mjs";
-import IconUser from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.mjs";
+import IconBrowser from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.mjs";
+import IconCylinder from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.mjs";
+import IconDeviceMobile from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.mjs";
+import IconFileText from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.mjs";
+import IconRectangularPrism from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.mjs";
+import IconReorder from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.mjs";
+import IconRobot from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRobot.mjs";
+import IconUser from "../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.mjs";
 import { cx } from "@likec4/styles/css";
 import { createContext, useContext, useMemo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 
-//#region src/context/IconRenderer.tsx
+// src/context/IconRenderer.tsx
 const IconRendererContext = createContext(null);
 /**
 * Provider for custom element icon renderers
@@ -139,8 +139,8 @@ function decodeSvgDataUrl(dataUrl) {
 	}
 }
 const iconUrl = (group, name) => `https://icons.like-c4.dev/${encodeURIComponent(group)}/${encodeURIComponent(name)}.svg`;
-function BootstrapIconMask({ name, ...props }) {
-	const url = iconUrl("bootstrap", name);
+function MaskedIcon({ name, group, ...props }) {
+	const url = iconUrl(group, name);
 	const style = {
 		display: "inline-block",
 		width: "100%",
@@ -165,9 +165,10 @@ function DefaultIconRenderer({ node, ...props }) {
 	if (!node.icon || node.icon === "none") return null;
 	const [group, name, ...rest] = node.icon.split(":");
 	if (!group || !name || rest.length > 0) return null;
-	if (group === "bootstrap") return /* @__PURE__ */ jsx(BootstrapIconMask, {
+	if (group === "bootstrap" || group === "md") return /* @__PURE__ */ jsx(MaskedIcon, {
 		...props,
-		name
+		name,
+		group
 	});
 	return /* @__PURE__ */ jsx("img", {
 		...props,
@@ -175,5 +176,4 @@ function DefaultIconRenderer({ node, ...props }) {
 	});
 }
 
-//#endregion
 export { DefaultIconRenderer, IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/LikeC4ModelContext.d.mts

@@ -3,7 +3,6 @@ import { PropsWithChildren } from "react";
 import * as t from "@likec4/core/types";
 import { LayoutedView } from "@likec4/core/types";
 import { LikeC4Model, LikeC4ViewModel } from "@likec4/core/model";
-//#region src/context/LikeC4ModelContext.d.ts
 type UnknownLayouted$1 = t.aux.UnknownLayouted;
 export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted$1, LayoutedView<UnknownLayouted$1>>;
 /**
@@ -11,4 +10,4 @@ export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted$1, LayoutedView<U
  */
 export declare function useOptionalLikeC4Model<A extends t.aux.Any = UnknownLayouted$1>(): LikeC4Model<A> | null;
 export declare function useOptionalCurrentViewModel(): CurrentViewModel | null;
-//#endregion
+export {};

package/dist/context/LikeC4ModelContext.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 
-//#region src/context/LikeC4ModelContext.tsx
+// src/context/LikeC4ModelContext.tsx
 const LikeC4ModelContext = createContext(null);
 const LikeC4ModelContextProvider = LikeC4ModelContext.Provider;
 const CurrentViewModelCtx = createContext(null);
@@ -17,5 +17,4 @@ function useOptionalCurrentViewModel() {
 	return useContext(CurrentViewModelCtx);
 }
 
-//#endregion
 export { CurrentViewModelContext, LikeC4ModelContextProvider, useOptionalCurrentViewModel, useOptionalLikeC4Model };

package/dist/context/LikeC4ProjectsContext.d.mts

@@ -1,9 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { LikeC4ProjectData } from "../LikeC4ProjectsProvider.mjs";
 import { ProjectId } from "@likec4/core/types";
-//#region src/context/LikeC4ProjectsContext.d.ts
 export type LikeC4ProjectsContext = {
   projects: ReadonlyArray<LikeC4ProjectData>;
   onProjectChange: (id: ProjectId) => void;
-};
-//#endregion
+};

package/dist/context/LikeC4ProjectsContext.mjs

@@ -1,12 +1,11 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { createContext, useContext } from "react";
 
-//#region src/context/LikeC4ProjectsContext.ts
+// src/context/LikeC4ProjectsContext.ts
 const LikeC4ProjectsContext = createContext(null);
 const LikeC4ProjectsContextProvider = LikeC4ProjectsContext.Provider;
 function useOptionalProjectsContext() {
 	return useContext(LikeC4ProjectsContext);
 }
 
-//#endregion
 export { LikeC4ProjectsContextProvider, useOptionalProjectsContext };

package/dist/context/RootContainerContext.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { createContext, useContext } from "react";
 import { useStore } from "@nanostores/react";
 
-//#region src/context/RootContainerContext.tsx
+// src/context/RootContainerContext.tsx
 const RootContainerContext = createContext(null);
 const RootContainerContextProvider = RootContainerContext.Provider;
 function useRootContainerContext() {
@@ -20,5 +20,4 @@ function useRootContainerElement() {
 	return useRootContainer().ref.current;
 }
 
-//#endregion
 export { RootContainerContextProvider, useRootContainer, useRootContainerContext, useRootContainerElement, useRootContainerRef };

package/dist/context/TagStylesContext.d.mts

@@ -2,7 +2,6 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { PropsWithChildren } from "react";
 import "@likec4/core";
 import { LikeC4Styles } from "@likec4/core/styles";
-//#region src/context/TagStylesContext.d.ts
 type TagStylesProviderProps = PropsWithChildren<{
   /**
    * Root element selector to scope the tag styles to (e.g., "#diagram-root")
@@ -11,4 +10,4 @@ type TagStylesProviderProps = PropsWithChildren<{
   rootSelector: string;
 }>;
 export declare function TagStylesProvider({ children, rootSelector }: TagStylesProviderProps): import("react").JSX.Element;
-//#endregion
+export {};