@soroush.tech/markdown 0.1.0

package/dist/Control.mjs

@@ -0,0 +1,60 @@
+import { t as applyAction } from "./applyAction-BGWMbUYT.mjs";
+import { MarkdownContext } from "./MarkdownContext.mjs";
+import { useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Control/Control.tsx
+/**
+* The headless root of the Markdown compound: owns the shared value/selection state and exposes
+* it (plus a `dispatch` for toolbar actions) via context. It renders no UI of its own — the
+* consumer arranges the parts and decides which panes to show.
+*/
+function Control({ value, onChange, children }) {
+	const lastSelectionRef = useRef(null);
+	const pendingSelectionRef = useRef(null);
+	const context = useMemo(() => {
+		const dispatch = (action) => {
+			const { start, end } = lastSelectionRef.current ?? {
+				start: value.length,
+				end: value.length
+			};
+			const next = applyAction(action, {
+				value,
+				selectionStart: start,
+				selectionEnd: end
+			});
+			const selection = {
+				start: next.selectionStart,
+				end: next.selectionEnd
+			};
+			pendingSelectionRef.current = selection;
+			lastSelectionRef.current = selection;
+			onChange(next.value);
+		};
+		const rememberSelection = (selection) => {
+			lastSelectionRef.current = selection;
+		};
+		const queueSelection = (selection) => {
+			pendingSelectionRef.current = selection;
+			lastSelectionRef.current = selection;
+		};
+		const takeQueuedSelection = () => {
+			const selection = pendingSelectionRef.current;
+			pendingSelectionRef.current = null;
+			return selection;
+		};
+		return {
+			value,
+			onChange,
+			dispatch,
+			rememberSelection,
+			queueSelection,
+			takeQueuedSelection
+		};
+	}, [value, onChange]);
+	return /* @__PURE__ */ jsx(MarkdownContext.Provider, {
+		value: context,
+		children
+	});
+}
+//#endregion
+export { Control };

package/dist/Editor.cjs

@@ -0,0 +1,129 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_applyAction = require("./applyAction-BDkgYhOd.cjs");
+const require_MarkdownContext = require("./MarkdownContext.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_design_system_Flex = require("@soroush.tech/design-system/Flex");
+let _soroush_tech_design_system_Typography = require("@soroush.tech/design-system/Typography");
+let _soroush_tech_design_system = require("@soroush.tech/design-system");
+let _soroush_tech_design_system_theme = require("@soroush.tech/design-system/theme");
+let _soroush_tech_design_system_TextInput = require("@soroush.tech/design-system/TextInput");
+//#region src/Editor/Editor.tsx
+const EditorRoot = (0, _soroush_tech_design_system.styled)(_soroush_tech_design_system_Flex.Flex, {
+	name: "MarkdownEditor",
+	label: "MarkdownEditor"
+})();
+const INDENT_ACTION = {
+	id: "indent",
+	label: "",
+	ariaLabel: "",
+	kind: "linePrefix",
+	linePrefix: "	"
+};
+const noop = () => {};
+/**
+* The source `<textarea>`, with selection tracking and Tab-to-indent. Inside a `Control` it is
+* driven by context (so the `Toolbar` can act on it); on its own it is a plain controlled field
+* via `value`/`onChange`.
+*/
+function Editor({ value: valueProp, onChange: onChangeProp, placeholder = "Write your article in Markdown…", minRows = 16, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint = true }) {
+	const context = (0, react.useContext)(require_MarkdownContext.MarkdownContext);
+	const theme = (0, _soroush_tech_design_system_theme.useTheme)();
+	const textColor = textColorProp ?? (0, _soroush_tech_design_system_theme.themeDefault)(theme, "textColor", "initial");
+	const hintId = (0, react.useId)();
+	const localPendingRef = (0, react.useRef)(null);
+	const value = context?.value ?? valueProp ?? "";
+	const onChange = context?.onChange ?? onChangeProp ?? noop;
+	const paneRef = (0, react.useRef)(null);
+	const queueSelection = (selection) => {
+		if (context) context.queueSelection(selection);
+		else localPendingRef.current = selection;
+	};
+	const takeQueuedSelection = () => {
+		if (context) return context.takeQueuedSelection();
+		const selection = localPendingRef.current;
+		localPendingRef.current = null;
+		return selection;
+	};
+	const rememberSelection = (event) => {
+		if (!context) return;
+		const { selectionStart, selectionEnd } = event.currentTarget;
+		context.rememberSelection({
+			start: selectionStart,
+			end: selectionEnd
+		});
+	};
+	const handleKeyDown = (event) => {
+		const el = event.currentTarget;
+		if (event.key === "Escape" || (event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "m") {
+			event.preventDefault();
+			el.blur();
+			return;
+		}
+		if (event.key === "Tab" && !event.shiftKey) {
+			event.preventDefault();
+			const { selectionStart, selectionEnd } = el;
+			const next = value.slice(selectionStart, selectionEnd).includes("\n") ? require_applyAction.applyAction(INDENT_ACTION, {
+				value,
+				selectionStart,
+				selectionEnd
+			}) : {
+				value: value.slice(0, selectionStart) + "	" + value.slice(selectionEnd),
+				selectionStart: selectionStart + 1,
+				selectionEnd: selectionStart + 1
+			};
+			queueSelection({
+				start: next.selectionStart,
+				end: next.selectionEnd
+			});
+			onChange(next.value);
+		}
+	};
+	(0, react.useLayoutEffect)(() => {
+		const selection = takeQueuedSelection();
+		if (!selection) return;
+		const textarea = paneRef.current.querySelector("textarea");
+		textarea.focus();
+		textarea.setSelectionRange(selection.start, selection.end);
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EditorRoot, {
+		ref: paneRef,
+		flexDirection: "column",
+		flex: 1,
+		minWidth: 0,
+		gap: 1,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_TextInput.TextInput, {
+			multiline: true,
+			resize: true,
+			fullWidth: true,
+			variant,
+			color,
+			textColor,
+			size,
+			name,
+			id,
+			error,
+			required,
+			disabled,
+			minRows,
+			value,
+			placeholder,
+			onChange: (event) => onChange(event.target.value),
+			inputProps: {
+				"aria-label": "Markdown source",
+				"aria-describedby": showShortcutHint ? hintId : void 0,
+				onSelect: rememberSelection,
+				onBlur: rememberSelection,
+				onKeyDown: handleKeyDown
+			}
+		}), showShortcutHint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+			id: hintId,
+			variant: "caption",
+			color: "secondary",
+			m: 0,
+			children: "Tab inserts a tab · press Escape or Ctrl/Cmd+Shift+M to move focus out."
+		})]
+	});
+}
+//#endregion
+exports.Editor = Editor;

package/dist/Editor.d.cts

@@ -0,0 +1,40 @@
+import { TextInputColor, TextInputSize, TextInputTextColor, TextInputVariant } from "@soroush.tech/design-system/TextInput";
+//#region src/Editor/Editor.d.ts
+interface EditorProps {
+  /** Standalone source value — used when rendered outside a `Control`. Ignored inside one. */
+  value?: string;
+  /** Standalone change handler — used when rendered outside a `Control`. Ignored inside one. */
+  onChange?: (value: string) => void;
+  /** Placeholder shown while the source is empty. */
+  placeholder?: string;
+  /** Minimum visible rows of the source textarea. Default: `16`. */
+  minRows?: number;
+  /** Visual style of the source input — forwarded to `TextInput`. Default: `'default'`. */
+  variant?: TextInputVariant;
+  /** Focus/active border colour — forwarded to `TextInput`. */
+  color?: TextInputColor;
+  /** Text colour of the typed source — forwarded to `TextInput`. Default: `'initial'`. */
+  textColor?: TextInputTextColor;
+  /** Padding/font-size density — forwarded to `TextInput`. */
+  size?: TextInputSize;
+  /** Native `name` on the textarea — set it for native `<form>` submission / FormData. */
+  name?: string;
+  /** `id` for label association. Falls back to the enclosing `FormControl`. */
+  id?: string;
+  /** Marks the field invalid (error border). Falls back to the enclosing `FormControl`. */
+  error?: boolean;
+  /** Marks the field required. Falls back to the enclosing `FormControl`. */
+  required?: boolean;
+  /** Disables editing. Falls back to the enclosing `FormControl`. */
+  disabled?: boolean;
+  /** Shows a one-line hint about the Tab / focus-release shortcuts under the field. Default: `true`. */
+  showShortcutHint?: boolean;
+}
+/**
+ * The source `<textarea>`, with selection tracking and Tab-to-indent. Inside a `Control` it is
+ * driven by context (so the `Toolbar` can act on it); on its own it is a plain controlled field
+ * via `value`/`onChange`.
+ */
+declare function Editor({ value: valueProp, onChange: onChangeProp, placeholder, minRows, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint }: Readonly<EditorProps>): import("react").JSX.Element;
+//#endregion
+export { Editor, EditorProps };

package/dist/Editor.d.mts

@@ -0,0 +1,40 @@
+import { TextInputColor, TextInputSize, TextInputTextColor, TextInputVariant } from "@soroush.tech/design-system/TextInput";
+//#region src/Editor/Editor.d.ts
+interface EditorProps {
+  /** Standalone source value — used when rendered outside a `Control`. Ignored inside one. */
+  value?: string;
+  /** Standalone change handler — used when rendered outside a `Control`. Ignored inside one. */
+  onChange?: (value: string) => void;
+  /** Placeholder shown while the source is empty. */
+  placeholder?: string;
+  /** Minimum visible rows of the source textarea. Default: `16`. */
+  minRows?: number;
+  /** Visual style of the source input — forwarded to `TextInput`. Default: `'default'`. */
+  variant?: TextInputVariant;
+  /** Focus/active border colour — forwarded to `TextInput`. */
+  color?: TextInputColor;
+  /** Text colour of the typed source — forwarded to `TextInput`. Default: `'initial'`. */
+  textColor?: TextInputTextColor;
+  /** Padding/font-size density — forwarded to `TextInput`. */
+  size?: TextInputSize;
+  /** Native `name` on the textarea — set it for native `<form>` submission / FormData. */
+  name?: string;
+  /** `id` for label association. Falls back to the enclosing `FormControl`. */
+  id?: string;
+  /** Marks the field invalid (error border). Falls back to the enclosing `FormControl`. */
+  error?: boolean;
+  /** Marks the field required. Falls back to the enclosing `FormControl`. */
+  required?: boolean;
+  /** Disables editing. Falls back to the enclosing `FormControl`. */
+  disabled?: boolean;
+  /** Shows a one-line hint about the Tab / focus-release shortcuts under the field. Default: `true`. */
+  showShortcutHint?: boolean;
+}
+/**
+ * The source `<textarea>`, with selection tracking and Tab-to-indent. Inside a `Control` it is
+ * driven by context (so the `Toolbar` can act on it); on its own it is a plain controlled field
+ * via `value`/`onChange`.
+ */
+declare function Editor({ value: valueProp, onChange: onChangeProp, placeholder, minRows, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint }: Readonly<EditorProps>): import("react").JSX.Element;
+//#endregion
+export { Editor, EditorProps };

package/dist/Editor.mjs

@@ -0,0 +1,128 @@
+import { t as applyAction } from "./applyAction-BGWMbUYT.mjs";
+import { MarkdownContext } from "./MarkdownContext.mjs";
+import { useContext, useId, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Flex } from "@soroush.tech/design-system/Flex";
+import { Typography } from "@soroush.tech/design-system/Typography";
+import { styled } from "@soroush.tech/design-system";
+import { themeDefault, useTheme } from "@soroush.tech/design-system/theme";
+import { TextInput } from "@soroush.tech/design-system/TextInput";
+//#region src/Editor/Editor.tsx
+const EditorRoot = styled(Flex, {
+	name: "MarkdownEditor",
+	label: "MarkdownEditor"
+})();
+const INDENT_ACTION = {
+	id: "indent",
+	label: "",
+	ariaLabel: "",
+	kind: "linePrefix",
+	linePrefix: "	"
+};
+const noop = () => {};
+/**
+* The source `<textarea>`, with selection tracking and Tab-to-indent. Inside a `Control` it is
+* driven by context (so the `Toolbar` can act on it); on its own it is a plain controlled field
+* via `value`/`onChange`.
+*/
+function Editor({ value: valueProp, onChange: onChangeProp, placeholder = "Write your article in Markdown…", minRows = 16, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint = true }) {
+	const context = useContext(MarkdownContext);
+	const theme = useTheme();
+	const textColor = textColorProp ?? themeDefault(theme, "textColor", "initial");
+	const hintId = useId();
+	const localPendingRef = useRef(null);
+	const value = context?.value ?? valueProp ?? "";
+	const onChange = context?.onChange ?? onChangeProp ?? noop;
+	const paneRef = useRef(null);
+	const queueSelection = (selection) => {
+		if (context) context.queueSelection(selection);
+		else localPendingRef.current = selection;
+	};
+	const takeQueuedSelection = () => {
+		if (context) return context.takeQueuedSelection();
+		const selection = localPendingRef.current;
+		localPendingRef.current = null;
+		return selection;
+	};
+	const rememberSelection = (event) => {
+		if (!context) return;
+		const { selectionStart, selectionEnd } = event.currentTarget;
+		context.rememberSelection({
+			start: selectionStart,
+			end: selectionEnd
+		});
+	};
+	const handleKeyDown = (event) => {
+		const el = event.currentTarget;
+		if (event.key === "Escape" || (event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "m") {
+			event.preventDefault();
+			el.blur();
+			return;
+		}
+		if (event.key === "Tab" && !event.shiftKey) {
+			event.preventDefault();
+			const { selectionStart, selectionEnd } = el;
+			const next = value.slice(selectionStart, selectionEnd).includes("\n") ? applyAction(INDENT_ACTION, {
+				value,
+				selectionStart,
+				selectionEnd
+			}) : {
+				value: value.slice(0, selectionStart) + "	" + value.slice(selectionEnd),
+				selectionStart: selectionStart + 1,
+				selectionEnd: selectionStart + 1
+			};
+			queueSelection({
+				start: next.selectionStart,
+				end: next.selectionEnd
+			});
+			onChange(next.value);
+		}
+	};
+	useLayoutEffect(() => {
+		const selection = takeQueuedSelection();
+		if (!selection) return;
+		const textarea = paneRef.current.querySelector("textarea");
+		textarea.focus();
+		textarea.setSelectionRange(selection.start, selection.end);
+	});
+	return /* @__PURE__ */ jsxs(EditorRoot, {
+		ref: paneRef,
+		flexDirection: "column",
+		flex: 1,
+		minWidth: 0,
+		gap: 1,
+		children: [/* @__PURE__ */ jsx(TextInput, {
+			multiline: true,
+			resize: true,
+			fullWidth: true,
+			variant,
+			color,
+			textColor,
+			size,
+			name,
+			id,
+			error,
+			required,
+			disabled,
+			minRows,
+			value,
+			placeholder,
+			onChange: (event) => onChange(event.target.value),
+			inputProps: {
+				"aria-label": "Markdown source",
+				"aria-describedby": showShortcutHint ? hintId : void 0,
+				onSelect: rememberSelection,
+				onBlur: rememberSelection,
+				onKeyDown: handleKeyDown
+			}
+		}), showShortcutHint && /* @__PURE__ */ jsx(Typography, {
+			id: hintId,
+			variant: "caption",
+			color: "secondary",
+			m: 0,
+			children: "Tab inserts a tab · press Escape or Ctrl/Cmd+Shift+M to move focus out."
+		})]
+	});
+}
+//#endregion
+export { Editor };

package/dist/MarkdownContext.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+//#region src/MarkdownContext/MarkdownContext.ts
+const MarkdownContext = (0, react.createContext)(null);
+/** Reads the Markdown compound context; throws if used outside `<Markdown.Control>`. */
+function useMarkdownContext() {
+	const context = (0, react.useContext)(MarkdownContext);
+	if (!context) throw new Error("Markdown parts must be rendered inside <Markdown.Control>");
+	return context;
+}
+//#endregion
+exports.MarkdownContext = MarkdownContext;
+exports.useMarkdownContext = useMarkdownContext;

package/dist/MarkdownContext.d.cts

@@ -0,0 +1,2 @@
+import { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-rGZIhUgj.cjs";
+export { MarkdownContext, MarkdownContextValue, MarkdownSelection, useMarkdownContext };

package/dist/MarkdownContext.d.mts

@@ -0,0 +1,2 @@
+import { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-rGZIhUgj.mjs";
+export { MarkdownContext, MarkdownContextValue, MarkdownSelection, useMarkdownContext };

package/dist/MarkdownContext.mjs

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+//#region src/MarkdownContext/MarkdownContext.ts
+const MarkdownContext = createContext(null);
+/** Reads the Markdown compound context; throws if used outside `<Markdown.Control>`. */
+function useMarkdownContext() {
+	const context = useContext(MarkdownContext);
+	if (!context) throw new Error("Markdown parts must be rendered inside <Markdown.Control>");
+	return context;
+}
+//#endregion
+export { MarkdownContext, useMarkdownContext };

package/dist/Mermaid-BclI9A7e.mjs

@@ -0,0 +1,231 @@
+import { r as CodeBlock } from "./CodeBlock-CVlrvVPP.mjs";
+import { useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@soroush.tech/design-system/Button";
+import { Flex } from "@soroush.tech/design-system/Flex";
+import { Icon } from "@soroush.tech/design-system/Icon";
+import { useTheme } from "@soroush.tech/design-system/theme";
+import { View } from "@soroush.tech/design-system/View";
+import { Grid } from "@soroush.tech/design-system/Grid";
+import { Modal } from "@soroush.tech/design-system/Modal";
+//#region src/Mermaid/DiagramViewer.tsx
+const MIN_SCALE = .2;
+const MAX_SCALE = 5;
+const ZOOM_STEP = .2;
+const PAN_STEP = 48;
+const MIN_HEIGHT = 180;
+const MAX_HEIGHT = 640;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+* Wraps a rendered mermaid diagram in a zoom/pan viewport with a themed control cluster
+* (bottom-right: a pan d-pad around a reset, plus zoom in/out) and an expand control
+* (top-right) that opens the diagram in a fullscreen dialog. Drag-to-pan and wheel-to-zoom
+* work too. Only the diagram layer clips; the controls sit above it, so a short diagram never
+* hides them. Everything is a CSS transform — no dependency.
+*/
+function DiagramViewer({ svg, expandable = true, fill = false }) {
+	const [scale, setScale] = useState(1);
+	const [offset, setOffset] = useState({
+		x: 0,
+		y: 0
+	});
+	const [dragging, setDragging] = useState(false);
+	const [fullscreen, setFullscreen] = useState(false);
+	const [naturalHeight, setNaturalHeight] = useState(0);
+	const dragOrigin = useRef(null);
+	const contentRef = useRef(null);
+	useEffect(() => {
+		setNaturalHeight(contentRef.current.offsetHeight);
+	}, [svg]);
+	const zoomBy = (delta) => setScale((current) => clamp(current + delta, MIN_SCALE, MAX_SCALE));
+	const panBy = (dx, dy) => setOffset((current) => ({
+		x: current.x + dx,
+		y: current.y + dy
+	}));
+	const reset = () => {
+		setScale(1);
+		setOffset({
+			x: 0,
+			y: 0
+		});
+	};
+	const closeFullscreen = () => setFullscreen(false);
+	const onWheel = (event) => {
+		event.preventDefault();
+		zoomBy(event.deltaY < 0 ? ZOOM_STEP : -.2);
+	};
+	const onMouseDown = (event) => {
+		dragOrigin.current = {
+			x: event.clientX - offset.x,
+			y: event.clientY - offset.y
+		};
+		setDragging(true);
+	};
+	const onMouseMove = (event) => {
+		if (!dragOrigin.current) return;
+		setOffset({
+			x: event.clientX - dragOrigin.current.x,
+			y: event.clientY - dragOrigin.current.y
+		});
+	};
+	const endDrag = () => {
+		dragOrigin.current = null;
+		setDragging(false);
+	};
+	const control = (label, icon, onClick) => /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outlined",
+		shape: "rounded",
+		size: "sm",
+		"aria-label": label,
+		onClick,
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			size: "1.1rem"
+		})
+	}, label);
+	const inlineHeight = Math.max(MIN_HEIGHT, clamp(naturalHeight, MIN_HEIGHT, MAX_HEIGHT) * scale);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(View, {
+		my: fill ? 0 : 2,
+		position: "relative",
+		maxWidth: "100%",
+		borderRadius: "md",
+		height: fill ? "100%" : void 0,
+		children: [
+			/* @__PURE__ */ jsx(Flex, {
+				onWheel: fill ? onWheel : void 0,
+				onMouseDown,
+				onMouseMove,
+				onMouseUp: endDrag,
+				onMouseLeave: endDrag,
+				overflow: "hidden",
+				borderRadius: "md",
+				alignItems: "center",
+				justifyContent: "center",
+				height: fill ? "100%" : `${inlineHeight}px`,
+				style: {
+					cursor: dragging ? "grabbing" : "grab",
+					userSelect: "none",
+					WebkitUserSelect: "none"
+				},
+				children: /* @__PURE__ */ jsx(View, {
+					ref: contentRef,
+					"data-testid": "diagram-transform",
+					style: {
+						transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+						transformOrigin: "center",
+						transition: dragging ? "none" : "transform 0.12s ease-out"
+					},
+					dangerouslySetInnerHTML: { __html: svg }
+				})
+			}),
+			expandable && /* @__PURE__ */ jsx(View, {
+				position: "absolute",
+				top: 1,
+				right: 1,
+				zIndex: 1,
+				children: control("Expand diagram", "fullscreen", () => setFullscreen(true))
+			}),
+			/* @__PURE__ */ jsxs(Grid, {
+				position: "absolute",
+				bottom: 1,
+				right: 1,
+				zIndex: 1,
+				gridTemplateColumns: "repeat(3, auto)",
+				gap: .5,
+				children: [
+					/* @__PURE__ */ jsx("span", { "aria-hidden": true }),
+					control("Pan up", "expand_less", () => panBy(0, -48)),
+					control("Zoom in", "zoom_in", () => zoomBy(ZOOM_STEP)),
+					control("Pan left", "chevron_left", () => panBy(-48, 0)),
+					control("Reset view", "refresh", reset),
+					control("Pan right", "chevron_right", () => panBy(PAN_STEP, 0)),
+					/* @__PURE__ */ jsx("span", { "aria-hidden": true }),
+					control("Pan down", "expand_more", () => panBy(0, PAN_STEP)),
+					control("Zoom out", "zoom_out", () => zoomBy(-.2))
+				]
+			})
+		]
+	}), expandable && /* @__PURE__ */ jsx(Modal, {
+		isOpen: fullscreen,
+		onClose: closeFullscreen,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			bg: "paper",
+			role: "dialog",
+			"aria-label": "Diagram fullscreen",
+			position: "fixed",
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0,
+			p: 2,
+			children: [/* @__PURE__ */ jsx(View, {
+				position: "absolute",
+				top: 2,
+				right: 2,
+				zIndex: 1,
+				children: control("Close", "close", closeFullscreen)
+			}), /* @__PURE__ */ jsx(Flex, {
+				flex: 1,
+				minHeight: 0,
+				children: /* @__PURE__ */ jsx(DiagramViewer, {
+					svg,
+					expandable: false,
+					fill: true
+				})
+			})]
+		})
+	})] });
+}
+//#endregion
+//#region src/Mermaid/Mermaid.tsx
+async function toSvg(id, chart, theme) {
+	const { default: mermaid } = await import("mermaid");
+	mermaid.initialize({
+		startOnLoad: false,
+		securityLevel: "strict",
+		suppressErrorRendering: true,
+		theme: theme.colorScheme === "dark" ? "dark" : "default",
+		themeVariables: {
+			darkMode: theme.colorScheme === "dark",
+			background: theme.background.paper,
+			fontFamily: theme.fonts.body,
+			mainBkg: theme.background.primary,
+			...theme.mermaid
+		}
+	});
+	const { svg } = await mermaid.render(id, chart);
+	return svg;
+}
+/**
+* Renders a mermaid diagram. Until the client renders the SVG — and if the source is
+* invalid — it falls back to the diagram source in a `CodeBlock`, so server output and
+* no-JS readers still show something useful and hydration stays stable.
+*/
+function Mermaid({ chart, diagram }) {
+	const theme = useTheme();
+	const id = `mermaid-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`;
+	const [svg, setSvg] = useState(null);
+	useEffect(() => {
+		let active = true;
+		toSvg(id, chart, theme).then((rendered) => {
+			if (active) setSvg(rendered);
+		}).catch(() => {
+			if (active) setSvg(null);
+		});
+		return () => {
+			active = false;
+		};
+	}, [
+		chart,
+		id,
+		theme
+	]);
+	if (svg) return /* @__PURE__ */ jsx(DiagramViewer, {
+		svg,
+		...diagram
+	});
+	return /* @__PURE__ */ jsx(CodeBlock, { children: chart });
+}
+//#endregion
+export { Mermaid as t };