@keboola/design 11.0.0 → 11.2.0

package/dist/MermaidDiagram-ChL3WIQT.js

@@ -0,0 +1,399 @@
+import { __exportAll } from "./rolldown-runtime-Bdc48AWt.js";
+import { cn } from "./classNames-BzrkDnOD.js";
+import { DiagramSkeleton } from "./DiagramSkeleton-lwBS2YBa.js";
+import { ZoomableSvg } from "./ZoomableSvg-CZEu6sAq.js";
+import { createTokenResolver, useThemeAttributes } from "./themeTokens-BNg98Mu9.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { renderMermaidSVG } from "beautiful-mermaid";
+//#region src/blocks/MermaidDiagram/mermaidTheme.ts
+const DIAGRAM_FONT = "Inter, system-ui, sans-serif";
+/**
+* Fallback channels for the tokens the diagram palette reads, mirroring the
+* `:root` / `[data-theme='dark']` blocks of `styles.css`.
+*
+* `resolveToken` only reaches these when the live custom property is missing —
+* SSR, or a unit test that loads no CSS. In the browser the computed value wins,
+* which is what makes a customer brand re-skin the diagram for free.
+*/
+const FALLBACK_CHANNELS = {
+	card: {
+		light: "255 255 255",
+		dark: "34 34 40"
+	},
+	"card-foreground": {
+		light: "30 41 59",
+		dark: "229 230 236"
+	},
+	foreground: {
+		light: "30 41 59",
+		dark: "229 230 236"
+	},
+	muted: {
+		light: "241 245 249",
+		dark: "38 38 45"
+	},
+	"muted-foreground": {
+		light: "100 116 139",
+		dark: "141 144 153"
+	},
+	border: {
+		light: "229 231 235",
+		dark: "52 53 62"
+	},
+	primary: {
+		light: "37 99 235",
+		dark: "31 143 255"
+	},
+	accent: {
+		light: "224 242 254",
+		dark: "30 58 95"
+	},
+	"accent-foreground": {
+		light: "13 65 127",
+		dark: "147 197 253"
+	},
+	warning: {
+		light: "138 82 16",
+		dark: "255 190 92"
+	},
+	success: {
+		light: "24 122 76",
+		dark: "62 207 127"
+	},
+	destructive: {
+		light: "220 38 38",
+		dark: "229 72 77"
+	}
+};
+/**
+* Binds a token lookup to one `getComputedStyle` snapshot for the whole palette.
+* Built per call, never hoisted: the values move with the scheme and the brand.
+*/
+const tokenReader = (scheme) => {
+	const resolve = createTokenResolver();
+	return (name, alpha) => resolve(name, FALLBACK_CHANNELS[name][scheme], alpha);
+};
+/**
+* Palette for `beautiful-mermaid`'s synchronous renderer. It sets these as CSS
+* variables on the `<svg>` and derives everything else it needs from `bg` + `fg`
+* with `color-mix()` — which is why leaving them at the library defaults painted
+* a near-white node fill (#f8f8f8, mixed from a white `bg`) on a dark page.
+*
+* `transparent` keeps the page background showing through, so `bg` only feeds
+* those derivations; the node fill is pinned explicitly via `surface`.
+*/
+const fastRenderOptions = (scheme) => {
+	const token = tokenReader(scheme);
+	return {
+		bg: token("card"),
+		fg: token("foreground"),
+		line: token("border"),
+		accent: token("primary"),
+		muted: token("muted-foreground"),
+		surface: token("muted"),
+		border: token("border"),
+		transparent: true,
+		font: DIAGRAM_FONT
+	};
+};
+/**
+* Config for the async `mermaid` renderer (the fallback for dialects the fast
+* renderer can't parse, and for icon-pack diagrams).
+*
+* Built on the `base` theme so every colour comes from `themeVariables` rather
+* than mermaid's own light/dark palettes. Node chrome maps to the `accent` pair
+* (a tinted surface with a legible foreground in both schemes), containers to
+* `card`, and the gantt/note states to the status tokens — consumed as a low
+* alpha tint plus a solid mark, per the brand-neutrality contract, since the
+* status tokens themselves are text-legible colours rather than fills.
+*/
+const mermaidConfig = (scheme) => {
+	const token = tokenReader(scheme);
+	const surface = token("accent");
+	const onSurface = token("accent-foreground");
+	const container = token("card");
+	const onContainer = token("card-foreground");
+	const line = token("border");
+	const stroke = token("primary");
+	const text = token("foreground");
+	return {
+		startOnLoad: false,
+		securityLevel: "strict",
+		theme: "base",
+		themeVariables: {
+			darkMode: scheme === "dark",
+			background: container,
+			primaryColor: surface,
+			primaryTextColor: onSurface,
+			primaryBorderColor: stroke,
+			secondaryColor: container,
+			secondaryTextColor: onContainer,
+			secondaryBorderColor: line,
+			tertiaryColor: token("warning", .15),
+			tertiaryTextColor: token("warning"),
+			tertiaryBorderColor: token("warning"),
+			lineColor: line,
+			textColor: text,
+			mainBkg: surface,
+			nodeBorder: stroke,
+			clusterBkg: container,
+			clusterBorder: line,
+			titleColor: text,
+			edgeLabelBackground: container,
+			nodeTextColor: onSurface,
+			actorBorder: stroke,
+			actorBkg: surface,
+			actorTextColor: onSurface,
+			actorLineColor: line,
+			signalColor: text,
+			signalTextColor: text,
+			labelBoxBkgColor: surface,
+			labelBoxBorderColor: stroke,
+			labelTextColor: onSurface,
+			loopTextColor: text,
+			noteBorderColor: token("warning"),
+			noteBkgColor: token("warning", .15),
+			noteTextColor: text,
+			sectionBkgColor: surface,
+			altSectionBkgColor: container,
+			sectionBkgColor2: token("muted"),
+			taskBorderColor: stroke,
+			taskBkgColor: surface,
+			taskTextColor: onSurface,
+			taskTextDarkColor: text,
+			taskTextLightColor: text,
+			activeTaskBorderColor: stroke,
+			activeTaskBkgColor: token("primary", .25),
+			doneTaskBorderColor: token("success"),
+			doneTaskBkgColor: token("success", .15),
+			critBorderColor: token("destructive"),
+			critBkgColor: token("destructive", .15),
+			fontFamily: DIAGRAM_FONT,
+			fontSize: "14px"
+		}
+	};
+};
+//#endregion
+//#region src/blocks/MermaidDiagram/svgTransforms.ts
+const HTML_TAG = /<[^>]+>/g;
+const FOREIGN_OBJECT = /(<foreignObject\b[^>]*>)([\s\S]*?)(<\/foreignObject>)/g;
+const ROOT_SVG_TAG = /^(\s*<svg\b)([^>]*)(>)/i;
+/**
+* Mermaid renders node labels — including icon-shape (`@{ icon: … }`) labels — as
+* HTML (`<div><span><p>…</p></span></div>`) inside an SVG `<foreignObject>`. The
+* ZoomableSvg DOMPurify pass runs the SVG namespace profile, which strips every
+* XHTML-namespaced element under an `<svg>` root, so those wrapped labels vanish
+* (icon rendered, text gone). DOMPurify keeps *bare text* directly inside a
+* `<foreignObject>`, so collapse each label's HTML to its text content. Mermaid
+* has already sanitized that text under `securityLevel: 'strict'`, and dropping
+* the wrapper tags is strictly safer than keeping them.
+*
+* Entities are left encoded (`&amp;`, `&lt;`, …): as text-node content inside the
+* `<foreignObject>` the browser renders them correctly, and decoding them here
+* would risk turning `&lt;`/`&gt;` back into real angle brackets that could form
+* markup in the sanitized SVG.
+*/
+const flattenForeignObjectLabels = (svg) => svg.replace(FOREIGN_OBJECT, (_match, open, inner, close) => {
+	return `${open}${inner.replace(HTML_TAG, " ").replace(/\s+/g, " ").trim()}${close}`;
+});
+/**
+* Make the diagram fluid: strip the root `<svg>`'s fixed width/height/style and
+* set `width="100%"` plus a `max-width` from the viewBox width so it never
+* overflows its container.
+*
+* Only the ROOT `<svg>` tag is rewritten (anchored to string start). Icon-shape
+* nodes embed their own inner `<svg>` icons with fixed width/height; an earlier
+* unanchored regex matched the first `<svg …height…>` anywhere, so when the root
+* tag carried no height (mermaid emits `width="100%"` alone) it stripped the
+* FIRST icon's height instead — detaching and mis-sizing that icon.
+*
+* The existing `style` attribute is preserved (only an existing `max-width` is
+* replaced): beautiful-mermaid carries theme CSS vars (`--bg`, `--fg`) there that
+* its inner `<style>` block derives node/text colors from — dropping the whole
+* attribute made every derived color resolve to black.
+*/
+const STYLE_ATTR = /\s+style="([^"]*)"/i;
+const makeResponsive = (svgString) => {
+	const viewBoxMatch = svgString.match(/viewBox="[^"]*\s([\d.]+)\s[\d.]+"/);
+	const vbWidth = viewBoxMatch ? Math.round(Number(viewBoxMatch[1])) : void 0;
+	return svgString.replace(ROOT_SVG_TAG, (_match, open, attrs, close) => {
+		const styleDecls = (attrs.match(STYLE_ATTR)?.[1] ?? "").replace(/max-width:\s*[^;"]*;?\s*/gi, "").replace(/\s+/g, " ").trim().replace(/;$/, "");
+		let nextAttrs = attrs.replace(/\s+width="[^"]*"/i, "").replace(/\s+height="[^"]*"/i, "").replace(STYLE_ATTR, "");
+		nextAttrs += " width=\"100%\"";
+		const styleParts = [styleDecls, vbWidth ? `max-width: ${vbWidth}px` : ""].filter(Boolean).join("; ");
+		if (styleParts) nextAttrs += ` style="${styleParts}"`;
+		return `${open}${nextAttrs}${close}`;
+	});
+};
+/**
+* Whether an SVG has drawn content, i.e. a non-degenerate viewBox.
+*
+* - beautiful-mermaid does not throw on every syntax it cannot lay out: an
+*   `erDiagram` entity whose quoted name contains a space (`"sample (Copy)"`)
+*   returns a well-formed SVG with `viewBox="0 0 0 0"` and an empty `<defs>`.
+* - Such output is truthy, so it would be cached and rendered as an empty box,
+*   and the async mermaid renderer — which parses the same code fine — would
+*   never run.
+* - A missing viewBox counts as drawn: mermaid's own output is sized via
+*   width/height attributes on some diagram types.
+* - Only the ROOT `<svg>` is inspected. Icon-shape nodes embed their own inner
+*   `<svg>` / `<symbol>`, so an unanchored search reads a nested viewBox when the
+*   root carries none — discarding a diagram that had in fact been drawn. Same
+*   trap `makeResponsive` documents above.
+* - Either quote style is accepted, and whitespace around the `=`. Both current
+*   renderers emit `viewBox="…"` exactly, so this is future-proofing rather than a
+*   live case: a miss reads as "no viewBox", i.e. drawn, silently restoring the
+*   empty-diagram bug.
+*/
+const ROOT_VIEWBOX = /^\s*<svg\b[^>]*\sviewBox\s*=\s*(["'])\s*[\d.eE+-]+\s+[\d.eE+-]+\s+([\d.eE+-]+)\s+([\d.eE+-]+)\s*\1/i;
+const hasDrawnContent = (svg) => {
+	const viewBox = svg.match(ROOT_VIEWBOX);
+	if (!viewBox) return true;
+	return Number(viewBox[2]) > 0 && Number(viewBox[3]) > 0;
+};
+//#endregion
+//#region src/blocks/MermaidDiagram/MermaidDiagram.tsx
+var MermaidDiagram_exports = /* @__PURE__ */ __exportAll({ MermaidDiagram: () => MermaidDiagram });
+let mermaidPromise = null;
+const registerLucideIconPack = (m) => {
+	m.registerIconPacks([{
+		name: "lucide",
+		loader: () => import("@iconify-json/lucide/icons.json").then((mod) => mod.default)
+	}]);
+};
+const getMermaid = () => {
+	if (!mermaidPromise) mermaidPromise = import("mermaid").then((m) => {
+		registerLucideIconPack(m.default);
+		return m;
+	}).catch((err) => {
+		mermaidPromise = null;
+		throw err;
+	});
+	return mermaidPromise;
+};
+const stripFontImports = (svg) => svg.replace(/@import\s+url\([^)]*fonts\.googleapis\.com[^)]*\);?\s*/g, "");
+const hasIconSyntax = (code) => /@\{[^}]*\bicon\s*:/.test(code) || /\b(?:icon|service|group)\b[^\n(]*\(\s*[\w-]+:/.test(code) || /\bfa[bslr]?:fa-/.test(code);
+const tryFastRender = (code, scheme) => {
+	if (hasIconSyntax(code)) return null;
+	try {
+		const svg = stripFontImports(renderMermaidSVG(code, fastRenderOptions(scheme)));
+		return hasDrawnContent(svg) ? svg : null;
+	} catch (err) {
+		console.debug("[MermaidDiagram] fast render unavailable, using async fallback:", err);
+		return null;
+	}
+};
+/**
+* Whether a mermaid parse error means "ran out of input" rather than "bad syntax".
+*
+* - Mermaid's jison parsers report the end of input as token `1`, so a source
+*   truncated mid-diagram — every intermediate frame of a streaming answer —
+*   fails with `hash.token === 1`.
+* - Genuinely invalid syntax fails on a real token (`'ONLY_ONE'`, …) instead.
+* - Only a lower bound: some truncations do land on a real token and read as
+*   invalid. Those fall through to the `<pre>` fallback for one frame and clear
+*   when the next chunk arrives, which is the pre-existing behaviour.
+*/
+const isTruncatedDiagram = (err) => typeof err === "object" && err !== null && "hash" in err ? err.hash?.token === 1 : false;
+const RENDER_DEBOUNCE_MS = 300;
+const TRUNCATION_GRACE_MS = 2e3;
+const svgCache = /* @__PURE__ */ new Map();
+const diagramCacheKey = (code, themeKey) => `${themeKey}\n${code}`;
+const resolveSyncSvg = (code, cacheKey, scheme) => {
+	const cached = svgCache.get(cacheKey);
+	if (cached) return cached;
+	const fast = tryFastRender(code, scheme);
+	if (fast) svgCache.set(cacheKey, fast);
+	return fast;
+};
+const MermaidDiagram = ({ code, renderActions }) => {
+	const id = useId();
+	const { scheme, cacheKey: themeKey } = useThemeAttributes();
+	const cacheKey = diagramCacheKey(code, themeKey);
+	const [svg, setSvg] = useState(() => resolveSyncSvg(code, cacheKey, scheme));
+	const [renderFailed, setRenderFailed] = useState(false);
+	const [truncated, setTruncated] = useState(false);
+	const debounceRef = useRef(null);
+	const renderIdRef = useRef(0);
+	const [prevKey, setPrevKey] = useState(cacheKey);
+	if (cacheKey !== prevKey) {
+		setPrevKey(cacheKey);
+		setSvg(resolveSyncSvg(code, cacheKey, scheme));
+		setRenderFailed(false);
+		setTruncated(false);
+	}
+	useEffect(() => {
+		if (svgCache.has(cacheKey)) return;
+		const currentRenderId = ++renderIdRef.current;
+		if (debounceRef.current) clearTimeout(debounceRef.current);
+		debounceRef.current = setTimeout(() => {
+			getMermaid().then(async (mermaidModule) => {
+				if (renderIdRef.current !== currentRenderId) return;
+				const rendererId = `mermaid-${id.replaceAll(":", "")}`;
+				const container = document.createElement("div");
+				container.style.visibility = "hidden";
+				container.style.position = "absolute";
+				container.style.top = "-9999px";
+				container.style.width = "900px";
+				document.body.appendChild(container);
+				mermaidModule.default.initialize(mermaidConfig(scheme));
+				try {
+					const result = await mermaidModule.default.render(rendererId, code, container);
+					if (renderIdRef.current === currentRenderId && result) {
+						const svgOutput = flattenForeignObjectLabels(result.svg);
+						svgCache.set(cacheKey, svgOutput);
+						setSvg(svgOutput);
+						setRenderFailed(false);
+						setTruncated(false);
+					}
+				} finally {
+					container.remove();
+				}
+			}).catch((err) => {
+				if (renderIdRef.current !== currentRenderId) return;
+				setSvg(null);
+				if (isTruncatedDiagram(err)) {
+					console.debug("[MermaidDiagram] incomplete diagram, awaiting more input:", err);
+					setTruncated(true);
+					return;
+				}
+				console.error("[MermaidDiagram] fallback failed:", err);
+				setRenderFailed(true);
+			});
+		}, RENDER_DEBOUNCE_MS);
+		const timer = debounceRef.current;
+		const renderId = renderIdRef;
+		return () => {
+			renderId.current++;
+			if (timer) clearTimeout(timer);
+		};
+	}, [
+		cacheKey,
+		code,
+		id,
+		scheme
+	]);
+	useEffect(() => {
+		if (!truncated) return;
+		const timer = setTimeout(() => setRenderFailed(true), TRUNCATION_GRACE_MS);
+		return () => clearTimeout(timer);
+	}, [truncated, cacheKey]);
+	const processedSvg = svg ? makeResponsive(svg) : null;
+	if (renderFailed) return /* @__PURE__ */ jsx("pre", {
+		className: cn("tw:my-3 tw:overflow-auto tw:whitespace-pre-wrap tw:break-all", "tw:py-3 tw:px-4", "tw:bg-muted", "tw:rounded-md tw:text-muted-foreground", "tw:text-sm tw:font-mono"),
+		children: /* @__PURE__ */ jsx("code", { children: code })
+	});
+	if (processedSvg) return /* @__PURE__ */ jsx(ZoomableSvg, {
+		html: processedSvg,
+		copyText: `\`\`\`mermaid\n${code}\n\`\`\``,
+		className: "tw:my-3",
+		allowForeignObject: true,
+		renderActions
+	}, code);
+	return /* @__PURE__ */ jsx(DiagramSkeleton, {});
+};
+//#endregion
+export { MermaidDiagram, MermaidDiagram_exports };
+
+//# sourceMappingURL=MermaidDiagram-ChL3WIQT.js.map

package/dist/MermaidDiagram-ChL3WIQT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidDiagram-ChL3WIQT.js","names":[],"sources":["../src/blocks/MermaidDiagram/mermaidTheme.ts","../src/blocks/MermaidDiagram/svgTransforms.ts","../src/blocks/MermaidDiagram/MermaidDiagram.tsx"],"sourcesContent":["import type { RenderOptions } from 'beautiful-mermaid';\nimport type { MermaidConfig } from 'mermaid';\n\nimport type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { createTokenResolver } from '../../utils/themeTokens';\n\nconst DIAGRAM_FONT = 'Inter, system-ui, sans-serif';\n\n/**\n * Fallback channels for the tokens the diagram palette reads, mirroring the\n * `:root` / `[data-theme='dark']` blocks of `styles.css`.\n *\n * `resolveToken` only reaches these when the live custom property is missing —\n * SSR, or a unit test that loads no CSS. In the browser the computed value wins,\n * which is what makes a customer brand re-skin the diagram for free.\n */\nconst FALLBACK_CHANNELS = {\n  card: { light: '255 255 255', dark: '34 34 40' },\n  'card-foreground': { light: '30 41 59', dark: '229 230 236' },\n  foreground: { light: '30 41 59', dark: '229 230 236' },\n  muted: { light: '241 245 249', dark: '38 38 45' },\n  'muted-foreground': { light: '100 116 139', dark: '141 144 153' },\n  border: { light: '229 231 235', dark: '52 53 62' },\n  primary: { light: '37 99 235', dark: '31 143 255' },\n  accent: { light: '224 242 254', dark: '30 58 95' },\n  'accent-foreground': { light: '13 65 127', dark: '147 197 253' },\n  warning: { light: '138 82 16', dark: '255 190 92' },\n  success: { light: '24 122 76', dark: '62 207 127' },\n  destructive: { light: '220 38 38', dark: '229 72 77' },\n} as const;\n\ntype TokenName = keyof typeof FALLBACK_CHANNELS;\n\n/**\n * Binds a token lookup to one `getComputedStyle` snapshot for the whole palette.\n * Built per call, never hoisted: the values move with the scheme and the brand.\n */\nconst tokenReader = (scheme: ResolvedColorScheme) => {\n  const resolve = createTokenResolver();\n  return (name: TokenName, alpha?: number): string =>\n    resolve(name, FALLBACK_CHANNELS[name][scheme], alpha);\n};\n\n/**\n * Palette for `beautiful-mermaid`'s synchronous renderer. It sets these as CSS\n * variables on the `<svg>` and derives everything else it needs from `bg` + `fg`\n * with `color-mix()` — which is why leaving them at the library defaults painted\n * a near-white node fill (#f8f8f8, mixed from a white `bg`) on a dark page.\n *\n * `transparent` keeps the page background showing through, so `bg` only feeds\n * those derivations; the node fill is pinned explicitly via `surface`.\n */\nexport const fastRenderOptions = (scheme: ResolvedColorScheme): RenderOptions => {\n  const token = tokenReader(scheme);\n\n  return {\n    bg: token('card'),\n    fg: token('foreground'),\n    line: token('border'),\n    accent: token('primary'),\n    muted: token('muted-foreground'),\n    surface: token('muted'),\n    border: token('border'),\n    transparent: true,\n    font: DIAGRAM_FONT,\n  };\n};\n\n/**\n * Config for the async `mermaid` renderer (the fallback for dialects the fast\n * renderer can't parse, and for icon-pack diagrams).\n *\n * Built on the `base` theme so every colour comes from `themeVariables` rather\n * than mermaid's own light/dark palettes. Node chrome maps to the `accent` pair\n * (a tinted surface with a legible foreground in both schemes), containers to\n * `card`, and the gantt/note states to the status tokens — consumed as a low\n * alpha tint plus a solid mark, per the brand-neutrality contract, since the\n * status tokens themselves are text-legible colours rather than fills.\n */\nexport const mermaidConfig = (scheme: ResolvedColorScheme): MermaidConfig => {\n  const token = tokenReader(scheme);\n\n  const surface = token('accent');\n  const onSurface = token('accent-foreground');\n  const container = token('card');\n  const onContainer = token('card-foreground');\n  const line = token('border');\n  const stroke = token('primary');\n  const text = token('foreground');\n\n  return {\n    startOnLoad: false,\n    securityLevel: 'strict',\n    theme: 'base',\n    themeVariables: {\n      darkMode: scheme === 'dark',\n      background: container,\n      primaryColor: surface,\n      primaryTextColor: onSurface,\n      primaryBorderColor: stroke,\n      secondaryColor: container,\n      secondaryTextColor: onContainer,\n      secondaryBorderColor: line,\n      tertiaryColor: token('warning', 0.15),\n      tertiaryTextColor: token('warning'),\n      tertiaryBorderColor: token('warning'),\n      lineColor: line,\n      textColor: text,\n      mainBkg: surface,\n      nodeBorder: stroke,\n      clusterBkg: container,\n      clusterBorder: line,\n      titleColor: text,\n      edgeLabelBackground: container,\n      nodeTextColor: onSurface,\n      actorBorder: stroke,\n      actorBkg: surface,\n      actorTextColor: onSurface,\n      actorLineColor: line,\n      signalColor: text,\n      signalTextColor: text,\n      labelBoxBkgColor: surface,\n      labelBoxBorderColor: stroke,\n      labelTextColor: onSurface,\n      loopTextColor: text,\n      noteBorderColor: token('warning'),\n      noteBkgColor: token('warning', 0.15),\n      noteTextColor: text,\n      sectionBkgColor: surface,\n      altSectionBkgColor: container,\n      sectionBkgColor2: token('muted'),\n      taskBorderColor: stroke,\n      taskBkgColor: surface,\n      taskTextColor: onSurface,\n      taskTextDarkColor: text,\n      taskTextLightColor: text,\n      activeTaskBorderColor: stroke,\n      activeTaskBkgColor: token('primary', 0.25),\n      doneTaskBorderColor: token('success'),\n      doneTaskBkgColor: token('success', 0.15),\n      critBorderColor: token('destructive'),\n      critBkgColor: token('destructive', 0.15),\n      fontFamily: DIAGRAM_FONT,\n      fontSize: '14px',\n    },\n  };\n};\n","// Pure post-processing of mermaid's SVG output, before it reaches ZoomableSvg's\n// DOMPurify pass. Extracted for unit testing.\n\nconst HTML_TAG = /<[^>]+>/g;\nconst FOREIGN_OBJECT = /(<foreignObject\\b[^>]*>)([\\s\\S]*?)(<\\/foreignObject>)/g;\n// The root <svg> open tag, anchored to the start of the string.\nconst ROOT_SVG_TAG = /^(\\s*<svg\\b)([^>]*)(>)/i;\n\n/**\n * Mermaid renders node labels — including icon-shape (`@{ icon: … }`) labels — as\n * HTML (`<div><span><p>…</p></span></div>`) inside an SVG `<foreignObject>`. The\n * ZoomableSvg DOMPurify pass runs the SVG namespace profile, which strips every\n * XHTML-namespaced element under an `<svg>` root, so those wrapped labels vanish\n * (icon rendered, text gone). DOMPurify keeps *bare text* directly inside a\n * `<foreignObject>`, so collapse each label's HTML to its text content. Mermaid\n * has already sanitized that text under `securityLevel: 'strict'`, and dropping\n * the wrapper tags is strictly safer than keeping them.\n *\n * Entities are left encoded (`&amp;`, `&lt;`, …): as text-node content inside the\n * `<foreignObject>` the browser renders them correctly, and decoding them here\n * would risk turning `&lt;`/`&gt;` back into real angle brackets that could form\n * markup in the sanitized SVG.\n */\nexport const flattenForeignObjectLabels = (svg: string): string =>\n  svg.replace(FOREIGN_OBJECT, (_match, open: string, inner: string, close: string) => {\n    const text = inner.replace(HTML_TAG, ' ').replace(/\\s+/g, ' ').trim();\n    return `${open}${text}${close}`;\n  });\n\n/**\n * Make the diagram fluid: strip the root `<svg>`'s fixed width/height/style and\n * set `width=\"100%\"` plus a `max-width` from the viewBox width so it never\n * overflows its container.\n *\n * Only the ROOT `<svg>` tag is rewritten (anchored to string start). Icon-shape\n * nodes embed their own inner `<svg>` icons with fixed width/height; an earlier\n * unanchored regex matched the first `<svg …height…>` anywhere, so when the root\n * tag carried no height (mermaid emits `width=\"100%\"` alone) it stripped the\n * FIRST icon's height instead — detaching and mis-sizing that icon.\n *\n * The existing `style` attribute is preserved (only an existing `max-width` is\n * replaced): beautiful-mermaid carries theme CSS vars (`--bg`, `--fg`) there that\n * its inner `<style>` block derives node/text colors from — dropping the whole\n * attribute made every derived color resolve to black.\n */\nconst STYLE_ATTR = /\\s+style=\"([^\"]*)\"/i;\n\nexport const makeResponsive = (svgString: string): string => {\n  const viewBoxMatch = svgString.match(/viewBox=\"[^\"]*\\s([\\d.]+)\\s[\\d.]+\"/);\n  const vbWidth = viewBoxMatch ? Math.round(Number(viewBoxMatch[1])) : undefined;\n\n  return svgString.replace(ROOT_SVG_TAG, (_match, open: string, attrs: string, close: string) => {\n    const existingStyle = attrs.match(STYLE_ATTR)?.[1] ?? '';\n    const styleDecls = existingStyle\n      .replace(/max-width:\\s*[^;\"]*;?\\s*/gi, '')\n      .replace(/\\s+/g, ' ')\n      .trim()\n      .replace(/;$/, '');\n\n    let nextAttrs = attrs\n      .replace(/\\s+width=\"[^\"]*\"/i, '')\n      .replace(/\\s+height=\"[^\"]*\"/i, '')\n      .replace(STYLE_ATTR, '');\n\n    nextAttrs += ' width=\"100%\"';\n\n    const styleParts = [styleDecls, vbWidth ? `max-width: ${vbWidth}px` : '']\n      .filter(Boolean)\n      .join('; ');\n    if (styleParts) nextAttrs += ` style=\"${styleParts}\"`;\n\n    return `${open}${nextAttrs}${close}`;\n  });\n};\n\n/**\n * Whether an SVG has drawn content, i.e. a non-degenerate viewBox.\n *\n * - beautiful-mermaid does not throw on every syntax it cannot lay out: an\n *   `erDiagram` entity whose quoted name contains a space (`\"sample (Copy)\"`)\n *   returns a well-formed SVG with `viewBox=\"0 0 0 0\"` and an empty `<defs>`.\n * - Such output is truthy, so it would be cached and rendered as an empty box,\n *   and the async mermaid renderer — which parses the same code fine — would\n *   never run.\n * - A missing viewBox counts as drawn: mermaid's own output is sized via\n *   width/height attributes on some diagram types.\n * - Only the ROOT `<svg>` is inspected. Icon-shape nodes embed their own inner\n *   `<svg>` / `<symbol>`, so an unanchored search reads a nested viewBox when the\n *   root carries none — discarding a diagram that had in fact been drawn. Same\n *   trap `makeResponsive` documents above.\n * - Either quote style is accepted, and whitespace around the `=`. Both current\n *   renderers emit `viewBox=\"…\"` exactly, so this is future-proofing rather than a\n *   live case: a miss reads as \"no viewBox\", i.e. drawn, silently restoring the\n *   empty-diagram bug.\n */\nconst ROOT_VIEWBOX =\n  /^\\s*<svg\\b[^>]*\\sviewBox\\s*=\\s*([\"'])\\s*[\\d.eE+-]+\\s+[\\d.eE+-]+\\s+([\\d.eE+-]+)\\s+([\\d.eE+-]+)\\s*\\1/i;\n\nexport const hasDrawnContent = (svg: string): boolean => {\n  const viewBox = svg.match(ROOT_VIEWBOX);\n  if (!viewBox) return true;\n  return Number(viewBox[2]) > 0 && Number(viewBox[3]) > 0;\n};\n","import { useEffect, useId, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { renderMermaidSVG } from 'beautiful-mermaid';\nimport type mermaid from 'mermaid';\n\nimport type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { useThemeAttributes } from '../../components/ThemeProvider/useThemeAttributes';\nimport { ZoomableSvg } from '../../components/ZoomableSvg';\nimport { cn } from '../../utils';\n\nimport { DiagramSkeleton } from './DiagramSkeleton';\nimport { fastRenderOptions, mermaidConfig } from './mermaidTheme';\nimport { flattenForeignObjectLabels, hasDrawnContent, makeResponsive } from './svgTransforms';\n\ntype MermaidModule = { default: typeof mermaid };\n\nlet mermaidPromise: Promise<MermaidModule> | null = null;\n\n// Iconify icon pack registered with mermaid so `@{ icon: \"lucide:name\" }` node\n// shapes and `architecture-beta service <id>(lucide:name)` render — keeping\n// diagram glyphs consistent with the Lucide icons used across the rest of the UI.\n// The pack JSON resolves from a workspace dependency (no CDN fetch) via a dynamic\n// import, so it lands in its own lazy chunk and icons render offline / under a\n// strict CSP without weighing down the initial bundle.\nconst registerLucideIconPack = (m: typeof mermaid): void => {\n  m.registerIconPacks([\n    {\n      name: 'lucide',\n      loader: () => import('@iconify-json/lucide/icons.json').then((mod) => mod.default),\n    },\n  ]);\n};\n\nconst getMermaid = (): Promise<MermaidModule> => {\n  if (!mermaidPromise) {\n    mermaidPromise = import('mermaid')\n      .then((m) => {\n        registerLucideIconPack(m.default);\n        return m;\n      })\n      .catch((err) => {\n        mermaidPromise = null;\n        throw err;\n      });\n  }\n  return mermaidPromise;\n};\n\nconst stripFontImports = (svg: string): string =>\n  svg.replace(/@import\\s+url\\([^)]*fonts\\.googleapis\\.com[^)]*\\);?\\s*/g, '');\n\n// beautiful-mermaid's synchronous renderer has no icon-pack support, so a diagram\n// using icon syntax must skip the fast path and take the async mermaid render\n// (which registers the pack). Matches:\n// - the flowchart / treeView icon shape `@{ icon: \"pack:name\" }`\n// - `architecture-beta` / `treeView` refs `icon|service|group <id>(pack:name)`\n//   (the id between keyword and `(` is optional)\n// - legacy FontAwesome refs `fa:fa-*` / `fab:` embedded in node text\nconst hasIconSyntax = (code: string): boolean =>\n  /@\\{[^}]*\\bicon\\s*:/.test(code) ||\n  /\\b(?:icon|service|group)\\b[^\\n(]*\\(\\s*[\\w-]+:/.test(code) ||\n  /\\bfa[bslr]?:fa-/.test(code);\n\nconst tryFastRender = (code: string, scheme: ResolvedColorScheme): string | null => {\n  if (hasIconSyntax(code)) return null;\n  try {\n    const svg = stripFontImports(renderMermaidSVG(code, fastRenderOptions(scheme)));\n    // A zero-sized result is a silent layout failure, not a diagram — take the\n    // async fallback rather than caching an empty box. See `hasDrawnContent`.\n    return hasDrawnContent(svg) ? svg : null;\n  } catch (err) {\n    // beautiful-mermaid can't parse every mermaid dialect; the async mermaid\n    // renderer is the fallback. Log at debug so regressions are diagnosable\n    // without noising up the console on the expected unsupported-syntax path.\n    console.debug('[MermaidDiagram] fast render unavailable, using async fallback:', err);\n    return null;\n  }\n};\n\n/**\n * Whether a mermaid parse error means \"ran out of input\" rather than \"bad syntax\".\n *\n * - Mermaid's jison parsers report the end of input as token `1`, so a source\n *   truncated mid-diagram — every intermediate frame of a streaming answer —\n *   fails with `hash.token === 1`.\n * - Genuinely invalid syntax fails on a real token (`'ONLY_ONE'`, …) instead.\n * - Only a lower bound: some truncations do land on a real token and read as\n *   invalid. Those fall through to the `<pre>` fallback for one frame and clear\n *   when the next chunk arrives, which is the pre-existing behaviour.\n */\nconst isTruncatedDiagram = (err: unknown): boolean =>\n  typeof err === 'object' && err !== null && 'hash' in err\n    ? (err as { hash?: { token?: unknown } }).hash?.token === 1\n    : false;\n\nconst RENDER_DEBOUNCE_MS = 300;\n\n// How long a truncated diagram is held as \"still arriving\" before it is shown as\n// source. Comfortably longer than the gap between streamed chunks, short enough\n// that an abandoned stream resolves while the reader is still looking at it.\nconst TRUNCATION_GRACE_MS = 2_000;\n\n// Module-level SVG cache — persists across component remounts (e.g. tab switches\n// that cause React to remount the tree). The colours are baked into the markup,\n// so the key is the code *plus* the theme key (scheme + brand): the same diagram\n// is a different SVG under a different colour scheme or brand.\nconst svgCache = new Map<string, string>();\n\nconst diagramCacheKey = (code: string, themeKey: string): string => `${themeKey}\\n${code}`;\n\n// Resolve an SVG synchronously: cache hit first, otherwise a fast synchronous\n// render. Caches the result and returns it, or null when neither is available\n// (the caller then falls back to the async mermaid render).\nconst resolveSyncSvg = (\n  code: string,\n  cacheKey: string,\n  scheme: ResolvedColorScheme,\n): string | null => {\n  const cached = svgCache.get(cacheKey);\n  if (cached) return cached;\n  const fast = tryFastRender(code, scheme);\n  if (fast) svgCache.set(cacheKey, fast);\n  return fast;\n};\n\ntype Props = {\n  /** Mermaid diagram source code. Supports flowchart, sequence, class, state, ER,\n   *  pie, gantt, and mindmap. Gantt `dateFormat HH:mm` (time-only) is not supported\n   *  by mermaid's dayjs parser — use `dateFormat YYYY-MM-DD HH:mm` with `axisFormat %H:%M` instead. */\n  code: string;\n  /** Extra toolbar controls (e.g. an `ExportMenu`), forwarded to `ZoomableSvg`.\n   *  Receives the sanitized SVG. Omit to keep the default toolbar. */\n  renderActions?: (safeSvg: string) => ReactNode;\n};\n\nexport const MermaidDiagram = ({ code, renderActions }: Props) => {\n  const id = useId();\n  // Re-renders whenever the active colour scheme or brand changes, so the\n  // diagram is re-rendered in the new palette instead of staying a light island\n  // on a dark page. The scheme comes out of the same read as the key, so the\n  // palette can never be resolved under one scheme and cached under the other —\n  // see `useThemeAttributes` for why the theme context is a step ahead of the\n  // CSS variables it stands for.\n  const { scheme, cacheKey: themeKey } = useThemeAttributes();\n  const cacheKey = diagramCacheKey(code, themeKey);\n\n  const [svg, setSvg] = useState<string | null>(() => resolveSyncSvg(code, cacheKey, scheme));\n  const [renderFailed, setRenderFailed] = useState(false);\n  const [truncated, setTruncated] = useState(false);\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const renderIdRef = useRef(0);\n\n  // Synchronously reset stale state when the code or the theme changes, to avoid\n  // a one-frame flash of the previous diagram.\n  const [prevKey, setPrevKey] = useState(cacheKey);\n  if (cacheKey !== prevKey) {\n    setPrevKey(cacheKey);\n    setSvg(resolveSyncSvg(code, cacheKey, scheme));\n    setRenderFailed(false);\n    setTruncated(false);\n  }\n\n  useEffect(() => {\n    // Synchronous results (cache hit / fast render) are already applied and\n    // cached by the useState initializer (mount) and the render-phase reset\n    // (code / theme change). Only the async fallback needs an effect.\n    if (svgCache.has(cacheKey)) return;\n\n    const currentRenderId = ++renderIdRef.current;\n\n    if (debounceRef.current) {\n      clearTimeout(debounceRef.current);\n    }\n\n    debounceRef.current = setTimeout(() => {\n      getMermaid()\n        .then(async (mermaidModule) => {\n          if (renderIdRef.current !== currentRenderId) return;\n          const rendererId = `mermaid-${id.replaceAll(':', '')}`;\n          const container = document.createElement('div');\n          container.style.visibility = 'hidden';\n          container.style.position = 'absolute';\n          container.style.top = '-9999px';\n          container.style.width = '900px';\n          document.body.appendChild(container);\n          // Re-applied per render rather than once at import: `initialize` is the\n          // only way to change mermaid's palette, and the palette follows the\n          // active scheme/brand.\n          mermaidModule.default.initialize(mermaidConfig(scheme));\n          try {\n            const result = await mermaidModule.default.render(rendererId, code, container);\n            if (renderIdRef.current === currentRenderId && result) {\n              const svgOutput = flattenForeignObjectLabels(result.svg);\n              svgCache.set(cacheKey, svgOutput);\n              setSvg(svgOutput);\n              setRenderFailed(false);\n              setTruncated(false);\n            }\n          } finally {\n            container.remove();\n          }\n        })\n        .catch((err: unknown) => {\n          if (renderIdRef.current !== currentRenderId) return;\n          setSvg(null);\n          // A diagram arriving a chunk at a time is invalid at almost every\n          // intermediate length, so a truncation is treated as \"not ready\" and\n          // holds the skeleton instead of the raw-code `<pre>`. It is held for a\n          // bounded wait, not indefinitely: a stream that dies mid-entity — or a\n          // diagram a user simply left unterminated — never gets a next chunk, and\n          // a skeleton that stays forever is worse than showing the source. The\n          // timer is cleared by the effect teardown, so any further chunk cancels\n          // it and re-renders.\n          if (isTruncatedDiagram(err)) {\n            console.debug('[MermaidDiagram] incomplete diagram, awaiting more input:', err);\n            setTruncated(true);\n            return;\n          }\n          console.error('[MermaidDiagram] fallback failed:', err);\n          setRenderFailed(true);\n        });\n    }, RENDER_DEBOUNCE_MS);\n\n    const timer = debounceRef.current;\n    const renderId = renderIdRef;\n    return () => {\n      renderId.current++;\n      if (timer) {\n        clearTimeout(timer);\n      }\n    };\n  }, [cacheKey, code, id, scheme]);\n\n  // A truncated diagram is held as \"still arriving\" for a bounded wait, not\n  // indefinitely: a stream that dies mid-entity — or a diagram a user left\n  // unterminated — never sends another chunk, and a skeleton that stays forever\n  // is worse than showing the source. Any further chunk changes `code`, which\n  // resets `truncated` and tears this timer down.\n  useEffect(() => {\n    if (!truncated) return;\n    const timer = setTimeout(() => setRenderFailed(true), TRUNCATION_GRACE_MS);\n    return () => clearTimeout(timer);\n  }, [truncated, cacheKey]);\n\n  const processedSvg = svg ? makeResponsive(svg) : null;\n\n  if (renderFailed) {\n    return (\n      <pre\n        className={cn(\n          'tw:my-3 tw:overflow-auto tw:whitespace-pre-wrap tw:break-all',\n          'tw:py-3 tw:px-4',\n          'tw:bg-muted',\n          'tw:rounded-md tw:text-muted-foreground',\n          'tw:text-sm tw:font-mono',\n        )}\n      >\n        <code>{code}</code>\n      </pre>\n    );\n  }\n\n  if (processedSvg) {\n    return (\n      <ZoomableSvg\n        key={code}\n        html={processedSvg}\n        copyText={`\\`\\`\\`mermaid\\n${code}\\n\\`\\`\\``}\n        className=\"tw:my-3\"\n        allowForeignObject\n        renderActions={renderActions}\n      />\n    );\n  }\n\n  return <DiagramSkeleton />;\n};\n"],"mappings":"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"}

package/dist/Modal-wqG8nJiK.js

@@ -0,0 +1,185 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { X } from "./icons-Cek151jC.js";
+import { Button } from "./Button-6xBX0nNl.js";
+import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-C76ke2eo.js";
+import { Separator } from "./internal/components/Separator.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Close, Content, Portal, Root, Trigger } from "@radix-ui/react-dialog";
+//#region src/components/Modal/ModalBody.tsx
+/**
+* Scrollable body slot for `Modal`. Place form fields, content blocks, or detail panels here.
+* Takes available height inside `Modal.Content` and scrolls when content overflows.
+*/
+const ModalBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "modal-body",
+	className: cn("tw:flex-1", "tw:overflow-y-auto", "tw:group-data-[argo=true]/modal:scroll-fade-y", "tw:group-data-[argo=false]/modal:px-7", "tw:group-data-[argo=true]/modal:px-4", "tw:py-1", "tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4", "tw:[&_svg]:shrink-0", className),
+	...props
+});
+//#endregion
+//#region src/components/Modal/ModalContent.tsx
+const ModalContent = ({ size = "medium", className, children, onEscapeKeyDown, ...props }) => {
+	const renderArgo = useArgoDesign();
+	const handleEscapeKeyDown = (event) => {
+		event.stopPropagation();
+		onEscapeKeyDown?.(event);
+	};
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsx(Content, {
+		...props,
+		"data-argo": renderArgo,
+		"data-size": size,
+		className: cn("tailwindcss-preflight", "tw:group/modal", "tw:fixed", "tw:left-1/2", "tw:-translate-x-1/2", "tw:z-[1051]", "tw:data-[argo=false]:top-20", "tw:data-[argo=true]:top-1/2", "tw:data-[argo=true]:-translate-y-1/2", "tw:w-full", "tw:max-w-2xl", "tw:max-h-[calc(100vh-2*theme(spacing.20))]", "tw:flex", "tw:flex-col", "tw:gap-4", "tw:data-[argo=false]:rounded-lg", "tw:data-[argo=true]:rounded-3xl", "tw:bg-card", "tw:text-card-foreground", "tw:data-[argo=false]:py-8", "tw:data-[argo=true]:py-4", "tw:duration-200", "tw:data-[state=open]:animate-in", "tw:data-[state=open]:fade-in-0", "tw:data-[state=closed]:animate-out", "tw:data-[state=closed]:fade-out-0", "tw:data-[argo=false]:data-[state=open]:zoom-in-80", "tw:data-[argo=false]:data-[state=open]:slide-in-from-top-[48%]", "tw:data-[argo=false]:data-[state=closed]:zoom-out-80", "tw:data-[argo=false]:data-[state=closed]:slide-out-to-top-[48%]", "tw:data-[argo=true]:data-[state=open]:zoom-in-95", "tw:data-[argo=true]:data-[state=closed]:zoom-out-95", {
+			"tw:max-w-[480px]": size === "small",
+			"tw:max-w-4xl": size === "large"
+		}, className),
+		onEscapeKeyDown: handleEscapeKeyDown,
+		children
+	}) }) });
+};
+//#endregion
+//#region src/components/Modal/ModalFooter.tsx
+const ModalFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: cn("tw:group-data-[argo=false]/modal:px-7", "tw:group-data-[argo=true]/modal:px-4", className)
+});
+//#endregion
+//#region src/components/Modal/ModalActions.tsx
+/**
+* Container for the header's top-right controls — any `actions` passed to `Modal.Header` plus the
+* close icon. Sits in the header grid's last column, top-aligned. Mirrors `Alert`'s action slot.
+*/
+const ModalActions = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("tw:col-start-3", "tw:row-start-1", "tw:self-start", "tw:flex", "tw:items-center", "tw:gap-1", "tw:group-data-[argo=true]/modal:ml-3", className),
+	...props
+});
+//#endregion
+//#region src/components/Modal/ModalHeader.tsx
+/** Modal header: `[icon] | title (children) | actions + close` on row 1, `description` on row 2. */
+const ModalHeader = ({ className, icon, description, "aria-description": ariaDescription, actions, hideCloseIcon = false, children, ...props }) => /* @__PURE__ */ jsxs("div", {
+	...props,
+	"data-slot": "modal-header",
+	className: cn("tw:grid", "tw:grid-cols-[auto_1fr_auto]", "tw:items-center", "tw:group-data-[argo=false]/modal:px-7", "tw:group-data-[argo=true]/modal:px-4", className),
+	children: [
+		icon,
+		children && /* @__PURE__ */ jsx(ModalTitle, {
+			className: "tw:col-start-2 tw:row-start-1",
+			children
+		}),
+		(actions || !hideCloseIcon) && /* @__PURE__ */ jsxs(ModalActions, { children: [actions, !hideCloseIcon && /* @__PURE__ */ jsx(Close, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "invisible",
+				size: "icon-sm",
+				children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
+					className: "tw:sr-only",
+					children: "Close"
+				})]
+			})
+		})] }),
+		(description || ariaDescription) && /* @__PURE__ */ jsx(ModalDescription, {
+			className: cn("tw:col-start-1", "tw:col-end-4", "tw:row-start-2", description ? "tw:mt-1" : "tw:sr-only"),
+			children: description ?? ariaDescription
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: cn("tw:col-start-1", "tw:col-end-4", "tw:mt-5", "tw:hidden", "tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body])_&]:block", "tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body]_[data-slot=tabs-root])_&]:!hidden"),
+			children: /* @__PURE__ */ jsx(Separator, { orientation: "horizontal" })
+		})
+	]
+});
+//#endregion
+//#region src/components/Modal/ModalIcon.tsx
+const NAMED_COLORS = /* @__PURE__ */ new Set([
+	"orange",
+	"blue",
+	"red",
+	"green",
+	"gray",
+	"violet"
+]);
+/**
+* Status-coloured icon for `Modal`. Authored inside `Modal.Header`. For a remote image badge (a
+* component or backend logo fetched by URL) use `Modal.Image` instead.
+*
+* - **Legacy anatomy:** a solid-filled circular badge docked to the top-left of `Modal.Content`
+*   (absolutely positioned, so it renders identically wherever it is authored).
+* - **Argo anatomy** (`data-argo` on `Modal.Content`): a small soft-tinted inline badge in the
+*   header grid, next to the title.
+*
+* Both variants are rendered and toggled purely via CSS (`group-data-[argo=true]/modal:`) — no
+* context. Use the categorical `color` (`red` destructive, `orange` warning, `green` success,
+* `blue` info, `gray` neutral, `violet` agent) to encode meaning; the palette stays fixed across
+* brand themes.
+*/
+const ModalIcon = ({ color, icon }) => {
+	const customColor = color && !NAMED_COLORS.has(color) ? color : void 0;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "modal-icon",
+		className: cn("tw:flex", "tw:shrink-0", "tw:items-center", "tw:justify-center", "tw:[&_svg]:aspect-square", "tw:group-data-[argo=false]/modal:absolute", "tw:group-data-[argo=false]/modal:top-0", "tw:group-data-[argo=false]/modal:left-8", "tw:group-data-[argo=false]/modal:-translate-y-1/2", "tw:group-data-[argo=false]/modal:size-12", "tw:group-data-[argo=false]/modal:rounded-full", "tw:group-data-[argo=false]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-6", "tw:group-data-[argo=true]/modal:col-start-1", "tw:group-data-[argo=true]/modal:row-start-1", "tw:group-data-[argo=true]/modal:self-start", "tw:group-data-[argo=true]/modal:mr-3", "tw:group-data-[argo=true]/modal:size-8", "tw:group-data-[argo=true]/modal:rounded", "tw:group-data-[argo=true]/modal:overflow-hidden", "tw:group-data-[argo=true]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-5", {
+			"tw:group-data-[argo=false]/modal:bg-warning-500": color === "orange",
+			"tw:group-data-[argo=false]/modal:bg-blue-500": color === "blue",
+			"tw:group-data-[argo=false]/modal:bg-green-500": color === "green",
+			"tw:group-data-[argo=false]/modal:bg-error-500": color === "red",
+			"tw:group-data-[argo=false]/modal:bg-neutral-150": color === "gray",
+			"tw:group-data-[argo=false]/modal:bg-purple-100": color === "violet",
+			"tw:group-data-[argo=false]/modal:text-white": color !== "violet",
+			"tw:group-data-[argo=false]/modal:text-purple-500": color === "violet"
+		}, {
+			"tw:group-data-[argo=true]/modal:bg-warning-100 tw:group-data-[argo=true]/modal:text-warning-500": color === "orange",
+			"tw:group-data-[argo=true]/modal:bg-blue-100 tw:group-data-[argo=true]/modal:text-blue-600": color === "blue",
+			"tw:group-data-[argo=true]/modal:bg-green-100 tw:group-data-[argo=true]/modal:text-green-900": color === "green",
+			"tw:group-data-[argo=true]/modal:bg-error-100 tw:group-data-[argo=true]/modal:text-error-500": color === "red",
+			"tw:group-data-[argo=true]/modal:bg-neutral-100 tw:group-data-[argo=true]/modal:text-neutral-500": color === "gray",
+			"tw:group-data-[argo=true]/modal:bg-purple-100 tw:group-data-[argo=true]/modal:text-purple-500": color === "violet"
+		}, { "tw:text-white": !!customColor }),
+		style: customColor ? { backgroundColor: customColor } : void 0,
+		children: icon
+	});
+};
+//#endregion
+//#region src/components/Modal/ModalImage.tsx
+const ModalImage = ({ src, alt = "" }) => {
+	const [hasImageError, setHasImageError] = useState(false);
+	useEffect(() => setHasImageError(false), [src]);
+	if (hasImageError) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "modal-image",
+		className: cn("tw:shrink-0", "tw:overflow-hidden", "tw:group-data-[argo=false]/modal:absolute", "tw:group-data-[argo=false]/modal:top-0", "tw:group-data-[argo=false]/modal:left-8", "tw:group-data-[argo=false]/modal:-translate-y-1/2", "tw:group-data-[argo=false]/modal:size-12", "tw:group-data-[argo=false]/modal:rounded-full", "tw:group-data-[argo=true]/modal:flex", "tw:group-data-[argo=true]/modal:col-start-1", "tw:group-data-[argo=true]/modal:row-start-1", "tw:group-data-[argo=true]/modal:self-start", "tw:group-data-[argo=true]/modal:mr-3", "tw:group-data-[argo=true]/modal:items-center", "tw:group-data-[argo=true]/modal:justify-center", "tw:group-data-[argo=true]/modal:rounded", "tw:group-data-[argo=true]/modal:size-8"),
+		children: /* @__PURE__ */ jsx("img", {
+			src,
+			alt,
+			className: "tw:size-full tw:object-contain",
+			onError: () => setHasImageError(true)
+		})
+	});
+};
+//#endregion
+//#region src/components/Modal/Modal.tsx
+/**
+* Blocking dialog for confirmations, forms, and detail views. Built on Radix Dialog.
+*
+* **When to use:** the user must act before continuing (confirm a destructive action, fill a short form,
+* view a focused detail panel). Use the compound parts `Modal.Trigger`, `Modal.Content`, `Modal.Header`,
+* `Modal.Body`, `Modal.Footer`, and optionally `Modal.Icon` for a status-coloured header glyph.
+* **When NOT to use:** for slide-in side editing use `Sheet`; for an inline destructive confirmation anchored
+* to its trigger use `Popconfirm`; for hover previews use `HoverCard`.
+* **Composition:** wrap `Modal.Content` around `Modal.Header` + `Modal.Body` + `Modal.Footer`. Put `useAppForm`
+* `FormBody` inside `Modal.Body` and the submit / cancel buttons inside `Modal.Footer`.
+*
+* @see RECIPES.md#modal-form — for the canonical form-in-modal composition
+* @see RECIPES.md#confirm-dialog — for destructive-confirm dialogs
+*/
+const Modal = (props) => /* @__PURE__ */ jsx(Root, { ...props });
+Modal.Close = Close;
+Modal.Trigger = Trigger;
+Modal.Content = ModalContent;
+Modal.Body = ModalBody;
+Modal.Icon = ModalIcon;
+Modal.Image = ModalImage;
+Modal.Footer = ModalFooter;
+Modal.Header = ModalHeader;
+Modal.Overlay = ModalOverlay;
+//#endregion
+export { Modal };
+
+//# sourceMappingURL=Modal-wqG8nJiK.js.map