@likec4/diagram 1.59.4 → 1.61.0

package/dist/components/RootContainer.mjs

@@ -0,0 +1,39 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { RootContainerContextProvider } from "../context/RootContainerContext.mjs";
+import { cx } from "@likec4/styles/css";
+import { useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStore } from "@nanostores/react";
+import { atom } from "nanostores";
+
+// src/components/RootContainer.tsx
+function RootContainer({ id, className, reduceGraphics = false, children }) {
+	const ref = useRef(null);
+	const [$isPanning] = useState(() => atom(false));
+	const isPanning = useStore($isPanning);
+	const ctx = useMemo(() => ({
+		id,
+		ref,
+		selector: `#${id}`,
+		reducedGraphics: reduceGraphics,
+		$panning: $isPanning
+	}), [
+		id,
+		ref,
+		reduceGraphics,
+		$isPanning
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: cx("likec4-root", className),
+		ref,
+		"data-likec4-diagram-panning": isPanning,
+		...reduceGraphics && { ["data-likec4-reduced-graphics"]: true },
+		children: /* @__PURE__ */ jsx(RootContainerContextProvider, {
+			value: ctx,
+			children
+		})
+	});
+}
+
+export { RootContainer };

package/dist/components/SearchControl.css.mjs

@@ -0,0 +1,68 @@
+import { css } from "@likec4/styles/css";
+
+// src/components/SearchControl.css.ts
+const root = css({
+	height: "control.sm",
+	paddingLeft: "sm",
+	paddingRight: "1",
+	borderRadius: "sm",
+	border: "default",
+	borderColor: {
+		base: "border.default",
+		_light: "mantine.gray[4]",
+		_dark: "mantine.dark[4]",
+		_hover: "border.default"
+	},
+	cursor: "pointer",
+	background: {
+		base: "surface.default",
+		_hover: "surface.hover"
+	},
+	width: "100%",
+	"& .tabler-icon": { color: "text" },
+	transition: {
+		base: "fast",
+		_whenPanning: "none !important"
+	},
+	boxShadow: {
+		base: "xs",
+		_hover: "sm",
+		_whenPanning: "none !important"
+	}
+});
+const placeholder = css({
+	fontSize: "sm",
+	fontWeight: "medium",
+	paddingRight: "2.5",
+	color: "text.non-essential",
+	flex: "1",
+	sm: { paddingRight: "[30px]" },
+	md: { paddingRight: "[50px]" }
+});
+const shortcut = css({
+	fontSize: "xxs",
+	fontWeight: "bold",
+	lineHeight: "tight",
+	padding: "[4px 7px]",
+	borderRadius: "sm",
+	border: "default",
+	transition: "fast",
+	_light: {
+		color: "mantine.gray[7]",
+		borderColor: "mantine.gray[2]"
+	},
+	_dark: {
+		color: "mantine.dark[0]",
+		borderColor: "mantine.dark[7]"
+	},
+	backgroundColor: {
+		_light: "mantine.gray[2]/70",
+		_dark: "mantine.dark[8]/70",
+		_groupHover: {
+			_light: "mantine.gray[2]",
+			_dark: "mantine.dark[8]"
+		}
+	}
+});
+
+export { placeholder, root, shortcut };

package/dist/components/SearchControl.d.mts

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

package/dist/components/SearchControl.mjs

@@ -0,0 +1,40 @@
+import { __name } from "../_virtual/_rolldown/runtime.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";
+
+// src/components/SearchControl.tsx
+function SearchControl({ className, ...others }) {
+	const isMac = isMacOs();
+	return /* @__PURE__ */ jsx(UnstyledButton, {
+		...others,
+		className: cx("group", root, className),
+		children: /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			children: [
+				/* @__PURE__ */ jsx(IconSearch, {
+					style: {
+						width: "15px",
+						height: "15px"
+					},
+					stroke: 2
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					component: "div",
+					className: placeholder,
+					children: "Search"
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					component: "div",
+					className: shortcut,
+					children: isMac ? "⌘ + K" : "Ctrl + K"
+				})
+			]
+		})
+	});
+}
+
+export { SearchControl };

package/dist/components/ViewIcon.mjs

@@ -0,0 +1,75 @@
+import { __name } from "../_virtual/_rolldown/runtime.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";
+
+// src/components/ViewIcon.tsx
+const viewTypeIconCss = css({
+	verticalAlign: "middle",
+	opacity: {
+		base: "0.4",
+		_dark: "0.5",
+		_groupHover: "0.8",
+		_groupActive: "0.8",
+		_groupFocus: "0.8"
+	}
+});
+const viewIcons = {
+	index: /* @__PURE__ */ jsx(IconStarFilled, {
+		size: 16,
+		className: viewTypeIconCss
+	}),
+	element: /* @__PURE__ */ jsx(IconZoomScan, {
+		size: 18,
+		stroke: 2,
+		className: viewTypeIconCss
+	}),
+	deployment: /* @__PURE__ */ jsx(IconStack2, {
+		size: 16,
+		stroke: 1.5,
+		className: viewTypeIconCss
+	}),
+	dynamic: /* @__PURE__ */ jsx(IconDirectionSignFilled, {
+		size: 18,
+		className: viewTypeIconCss
+	})
+};
+/**
+* Returns the appropriate icon component for a given view type.
+* @param viewType - The type of view ('index', 'element', 'deployment', or 'dynamic')
+* @returns The corresponding icon component
+*/
+function viewIcon(viewType) {
+	return viewIcons[viewType];
+}
+function ViewIcon({ type, className, ...props }) {
+	if (type === "index") return /* @__PURE__ */ jsx(IconStarFilled, {
+		size: 16,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	if (type === "element") return /* @__PURE__ */ jsx(IconZoomScan, {
+		size: 18,
+		stroke: 2,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	if (type === "deployment") return /* @__PURE__ */ jsx(IconStack2, {
+		size: 16,
+		stroke: 1.5,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	if (type === "dynamic") return /* @__PURE__ */ jsx(IconDirectionSignFilled, {
+		size: 18,
+		className: cx(viewTypeIconCss, className),
+		...props
+	});
+	nonexhaustive(type);
+}
+
+export { ViewIcon, viewIcon };

package/dist/components/ViewNotFound.mjs

@@ -0,0 +1,28 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/components/ViewNotFound.tsx
+function ErrorMessage({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: { margin: "1em 0" },
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				margin: "0 auto",
+				display: "inline-block",
+				padding: "2em",
+				background: "rgba(250,82,82,.15)",
+				color: "#ffa8a8"
+			},
+			children
+		})
+	});
+}
+function ViewNotFound({ viewId }) {
+	return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+		"View ",
+		/* @__PURE__ */ jsx("code", { children: viewId }),
+		" not found"
+	] });
+}
+
+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 };

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 };