@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/mcp-server-panel.js

@@ -0,0 +1,114 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils.js";
+import { mono, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, PlugIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/mcp-server-panel.tsx
+var mcp_server_panel_exports = /* @__PURE__ */ __exportAll({ McpServerPanel: () => McpServerPanel });
+const DOT = {
+	connected: "bg-success",
+	connecting: "bg-foreground/30 animate-pulse",
+	"needs-auth": "bg-warning",
+	failed: "bg-destructive"
+};
+const LABEL = {
+	connected: "connected",
+	connecting: "connecting",
+	"needs-auth": "needs auth",
+	failed: "failed"
+};
+function McpServerPanel({ servers, expandedId, onToggle, onAuthorize, className, ...props }) {
+	const connected = servers.filter((server) => server.status === "connected").length;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "mcp-server-panel",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-2xl p-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between px-1 pb-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-[13.5px] font-medium",
+				children: "Servers"
+			}), /* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "text-muted-foreground tabular-nums"),
+				children: [
+					connected,
+					" of ",
+					servers.length,
+					" connected"
+				]
+			})]
+		}), servers.map((server) => {
+			const expanded = expandedId === server.id;
+			const rowClassName = cn("flex items-center gap-2.5 rounded-xl px-1.5 py-2 text-start", onToggle && "hover:bg-foreground/[0.04] transition-colors");
+			const row = /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("text-muted-foreground size-3 shrink-0 transition-transform duration-200 motion-reduce:transition-none", expanded && "rotate-90") }),
+				/* @__PURE__ */ jsx(PlugIcon, { className: "text-muted-foreground size-3.5 shrink-0" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-[13.5px]",
+					children: server.name
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-muted-foreground shrink-0"),
+					children: [
+						server.tools.length,
+						" ",
+						server.tools.length === 1 ? "tool" : "tools"
+					]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: cn("size-1.5 shrink-0 rounded-full", DOT[server.status])
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: LABEL[server.status]
+				})
+			] });
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [onToggle ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-expanded": expanded,
+					onClick: () => onToggle(server.id),
+					className: rowClassName,
+					children: row
+				}) : /* @__PURE__ */ jsx("div", {
+					className: rowClassName,
+					children: row
+				}), expanded && /* @__PURE__ */ jsxs("div", {
+					className: "fade-in slide-in-from-top-1 animate-in flex flex-col gap-1.5 px-1.5 ps-8 pb-2 duration-200",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground"),
+								children: server.transport
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground"),
+								children: ["· ", LABEL[server.status]]
+							}),
+							server.status === "needs-auth" && onAuthorize && /* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								size: "xs",
+								className: "ms-auto",
+								onClick: () => onAuthorize(server.id),
+								children: "Authorize"
+							})
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-1",
+						children: server.tools.map((tool) => /* @__PURE__ */ jsx("span", {
+							className: cn("bg-muted", "font-mono text-[11px] tracking-tight", "text-muted-foreground rounded-md px-1.5 py-0.5"),
+							children: tool
+						}, tool))
+					})]
+				})]
+			}, server.id);
+		})]
+	});
+}
+//#endregion
+export { McpServerPanel, mcp_server_panel_exports };

package/dist/components/assistant-ui/elements/media-player.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps } from "react";
+declare namespace media_player_d_exports {
+  export { AudioPlayer, AudioPlayerProps, VideoPlayer, VideoPlayerProps };
+}
+export interface AudioPlayerProps extends Omit<ComponentProps<"div">, "children"> {
+  src: string;
+  title?: string | undefined;
+  artwork?: string | undefined;
+  durationMs?: number | undefined;
+}
+export interface VideoPlayerProps extends Omit<ComponentProps<"div">, "children"> {
+  src: string;
+  poster?: string | undefined;
+  title?: string | undefined;
+  ratio?: "16:9" | "4:3" | "1:1" | "9:16" | "auto" | undefined;
+  durationMs?: number | undefined;
+}
+export declare function AudioPlayer({ src, title, artwork, durationMs, className, ...props }: AudioPlayerProps): import("react").JSX.Element;
+export declare function VideoPlayer({ src, poster, title, ratio, durationMs, className, ...props }: VideoPlayerProps): import("react").JSX.Element;
+//#endregion
+export { media_player_d_exports };

package/dist/components/assistant-ui/elements/media-player.js

@@ -0,0 +1,302 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, inkButton, mono, paper } from "./surfaces.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PauseIcon, PlayIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/media-player.tsx
+var media_player_exports = /* @__PURE__ */ __exportAll({
+	AudioPlayer: () => AudioPlayer,
+	VideoPlayer: () => VideoPlayer
+});
+function formatDuration(seconds) {
+	const wholeSeconds = Math.max(0, Math.floor(seconds));
+	return `${Math.floor(wholeSeconds / 60)}:${(wholeSeconds % 60).toString().padStart(2, "0")}`;
+}
+function useMediaDuration(mediaRef, src, durationMs) {
+	const [metadata, setMetadata] = useState({ src });
+	useEffect(() => {
+		const media = mediaRef.current;
+		if (!media || media.readyState < HTMLMediaElement.HAVE_METADATA) return;
+		if (Number.isFinite(media.duration) && media.duration >= 0) setMetadata({
+			src,
+			duration: media.duration
+		});
+	}, [mediaRef, src]);
+	const fallbackDuration = durationMs !== void 0 && Number.isFinite(durationMs) ? Math.max(0, durationMs / 1e3) : void 0;
+	return {
+		duration: metadata.src === src ? metadata.duration ?? fallbackDuration : fallbackDuration,
+		setDurationFromMetadata: (duration) => {
+			if (Number.isFinite(duration) && duration >= 0) setMetadata({
+				src,
+				duration
+			});
+		}
+	};
+}
+function AudioPlayer({ src, title, artwork, durationMs, className, ...props }) {
+	const audioRef = useRef(null);
+	const [playback, setPlayback] = useState({
+		src,
+		currentTime: 0,
+		playing: false,
+		hasError: false
+	});
+	const { duration, setDurationFromMetadata } = useMediaDuration(audioRef, src, durationMs);
+	const { currentTime, playing, hasError } = playback.src === src ? playback : {
+		src,
+		currentTime: 0,
+		playing: false,
+		hasError: false
+	};
+	const update = (patch) => setPlayback((current) => ({
+		...current.src === src ? current : {
+			src,
+			currentTime: 0,
+			playing: false,
+			hasError: false
+		},
+		...patch
+	}));
+	const displayTitle = title ?? "Audio";
+	const playbackLabel = title ? ` ${title}` : " audio";
+	const durationLabel = duration === void 0 ? "--:--" : formatDuration(duration);
+	useEffect(() => {
+		if (audioRef.current?.error) setPlayback({
+			src,
+			currentTime: 0,
+			playing: false,
+			hasError: true
+		});
+	}, [src]);
+	const togglePlayback = () => {
+		const audio = audioRef.current;
+		if (!audio || hasError) return;
+		if (playing) {
+			audio.pause();
+			update({ playing: false });
+			return;
+		}
+		audio.play().then(() => update({ playing: true }), () => update(audio.error ? {
+			hasError: true,
+			playing: false
+		} : { playing: false }));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "audio-player",
+		className: cn(paper, "flex w-full max-w-md items-center gap-3 rounded-2xl p-3", className),
+		...props,
+		children: [
+			artwork ? /* @__PURE__ */ jsx("img", {
+				src: artwork,
+				alt: "",
+				className: "size-10 shrink-0 rounded-lg object-cover"
+			}) : null,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `${playing ? "Pause" : "Play"}${playbackLabel}`,
+				disabled: hasError,
+				onClick: togglePlayback,
+				className: cn(inkButton, "flex size-9 shrink-0 items-center justify-center rounded-full disabled:cursor-default disabled:opacity-40"),
+				children: playing ? /* @__PURE__ */ jsx(PauseIcon, {
+					"aria-hidden": true,
+					className: "size-4"
+				}) : /* @__PURE__ */ jsx(PlayIcon, {
+					"aria-hidden": true,
+					className: "ml-0.5 size-4"
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate text-[13.5px] font-medium",
+					children: displayTitle
+				}), /* @__PURE__ */ jsx("input", {
+					type: "range",
+					min: 0,
+					max: duration ?? 0,
+					step: .1,
+					value: Math.min(currentTime, duration ?? 0),
+					"aria-label": "Seek",
+					"aria-valuetext": `${formatDuration(currentTime)} of ${durationLabel}`,
+					disabled: hasError,
+					onChange: (event) => {
+						const nextTime = Number(event.currentTarget.value);
+						if (!Number.isFinite(nextTime)) return;
+						const resolvedTime = Math.min(nextTime, duration ?? nextTime);
+						if (audioRef.current) audioRef.current.currentTime = resolvedTime;
+						update({ currentTime: resolvedTime });
+					},
+					className: "accent-foreground w-full cursor-pointer disabled:cursor-default"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "text-muted-foreground shrink-0 tabular-nums"),
+				children: [
+					formatDuration(currentTime),
+					" / ",
+					durationLabel
+				]
+			}),
+			/* @__PURE__ */ jsx("audio", {
+				ref: audioRef,
+				src,
+				preload: "metadata",
+				className: "hidden",
+				onLoadedMetadata: (event) => {
+					setDurationFromMetadata(event.currentTarget.duration);
+				},
+				onTimeUpdate: (event) => update({ currentTime: event.currentTarget.currentTime }),
+				onPlay: () => update({ playing: true }),
+				onPause: () => update({ playing: false }),
+				onError: () => update({
+					hasError: true,
+					playing: false
+				})
+			}),
+			hasError ? /* @__PURE__ */ jsx("span", {
+				role: "alert",
+				className: "text-muted-foreground shrink-0 text-xs",
+				children: "Can't play this audio"
+			}) : null
+		]
+	});
+}
+function VideoPlayer({ src, poster, title, ratio = "16:9", durationMs, className, ...props }) {
+	const videoRef = useRef(null);
+	const [playback, setPlayback] = useState({
+		src,
+		currentTime: 0,
+		playing: false,
+		hasError: false
+	});
+	const { duration, setDurationFromMetadata } = useMediaDuration(videoRef, src, durationMs);
+	const { currentTime, playing, hasError } = playback.src === src ? playback : {
+		src,
+		currentTime: 0,
+		playing: false,
+		hasError: false
+	};
+	const update = (patch) => setPlayback((current) => ({
+		...current.src === src ? current : {
+			src,
+			currentTime: 0,
+			playing: false,
+			hasError: false
+		},
+		...patch
+	}));
+	const displayTitle = title ?? "Video";
+	const durationLabel = duration === void 0 ? "--:--" : formatDuration(duration);
+	const ratioClassName = ratio === "1:1" ? "aspect-square" : ratio === "4:3" ? "aspect-[4/3]" : ratio === "16:9" ? "aspect-video" : ratio === "9:16" ? "aspect-[9/16]" : void 0;
+	useEffect(() => {
+		if (videoRef.current?.error) setPlayback({
+			src,
+			currentTime: 0,
+			playing: false,
+			hasError: true
+		});
+	}, [src]);
+	const togglePlayback = () => {
+		const video = videoRef.current;
+		if (!video || hasError) return;
+		if (playing) {
+			video.pause();
+			update({ playing: false });
+			return;
+		}
+		video.play().then(() => update({ playing: true }), () => update(video.error ? {
+			hasError: true,
+			playing: false
+		} : { playing: false }));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "video-player",
+		className: cn(paper, "flex w-full max-w-xl flex-col gap-2.5 rounded-2xl p-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn(field, "overflow-hidden rounded-xl", ratioClassName),
+				children: /* @__PURE__ */ jsx("video", {
+					ref: videoRef,
+					src,
+					poster,
+					playsInline: true,
+					preload: "metadata",
+					"aria-label": displayTitle,
+					className: cn("block max-w-full", ratio !== "auto" && "h-full w-full object-contain"),
+					onLoadedMetadata: (event) => {
+						setDurationFromMetadata(event.currentTarget.duration);
+					},
+					onTimeUpdate: (event) => update({ currentTime: event.currentTarget.currentTime }),
+					onPlay: () => update({ playing: true }),
+					onPause: () => update({ playing: false }),
+					onError: () => update({
+						hasError: true,
+						playing: false
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3 px-1",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `${playing ? "Pause" : "Play"} ${displayTitle}`,
+						disabled: hasError,
+						onClick: togglePlayback,
+						className: cn(inkButton, "flex size-8 shrink-0 items-center justify-center rounded-full disabled:cursor-default disabled:opacity-40"),
+						children: playing ? /* @__PURE__ */ jsx(PauseIcon, {
+							"aria-hidden": true,
+							className: "size-3.5"
+						}) : /* @__PURE__ */ jsx(PlayIcon, {
+							"aria-hidden": true,
+							className: "ml-0.5 size-3.5"
+						})
+					}),
+					/* @__PURE__ */ jsx("input", {
+						type: "range",
+						min: 0,
+						max: duration ?? 0,
+						step: .1,
+						value: Math.min(currentTime, duration ?? 0),
+						"aria-label": "Seek",
+						"aria-valuetext": `${formatDuration(currentTime)} of ${durationLabel}`,
+						disabled: hasError,
+						onChange: (event) => {
+							const nextTime = Number(event.currentTarget.value);
+							if (!Number.isFinite(nextTime)) return;
+							const resolvedTime = Math.min(nextTime, duration ?? nextTime);
+							if (videoRef.current) videoRef.current.currentTime = resolvedTime;
+							update({ currentTime: resolvedTime });
+						},
+						className: "accent-foreground w-full cursor-pointer disabled:cursor-default"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: cn(mono, "text-muted-foreground shrink-0 tabular-nums"),
+						children: [
+							formatDuration(currentTime),
+							" / ",
+							durationLabel
+						]
+					}),
+					hasError ? /* @__PURE__ */ jsx("span", {
+						role: "alert",
+						className: "text-muted-foreground shrink-0 text-xs",
+						children: "Can't play this video"
+					}) : null
+				]
+			}),
+			title ? /* @__PURE__ */ jsx("div", {
+				className: "min-w-0 px-1 pb-0.5",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "truncate text-[13.5px] font-medium",
+					children: title
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { AudioPlayer, VideoPlayer, media_player_exports };

package/dist/components/assistant-ui/elements/memory-chips.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+declare namespace memory_chips_d_exports {
+  export { MemoryChange, MemoryChip, MemoryChips };
+}
+export type MemoryChange = "added" | "updated" | "existing";
+export interface MemoryChip {
+  id: string;
+  text: string;
+  change: MemoryChange;
+}
+export declare function MemoryChips({ chips, onForget, className, ...props }: Omit<ComponentProps<"div">, "children" | "chips" | "onForget"> & {
+  chips: readonly MemoryChip[];
+  onForget?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { memory_chips_d_exports };

package/dist/components/assistant-ui/elements/memory-chips.js

@@ -0,0 +1,44 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, mono } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BrainIcon, XIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/memory-chips.tsx
+var memory_chips_exports = /* @__PURE__ */ __exportAll({ MemoryChips: () => MemoryChips });
+function MemoryChips({ chips, onForget, className, ...props }) {
+	const fresh = chips.filter((chip) => chip.change !== "existing").length;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "memory-chips",
+		className: cn("flex w-full max-w-sm flex-col gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx(BrainIcon, { className: "text-muted-foreground size-3.5" }), /* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-muted-foreground"),
+				children: fresh > 0 ? `remembered ${fresh}` : "memory"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-1.5",
+			children: chips.map((chip) => /* @__PURE__ */ jsxs("span", {
+				className: cn("fade-in zoom-in-95 animate-in fill-mode-both group flex items-center gap-1 rounded-full py-1 pl-2.5 text-xs duration-300", onForget ? "pr-1" : "pr-2.5", chip.change === "existing" ? cn(field, "text-muted-foreground") : "bg-foreground/[0.07] text-foreground dark:bg-foreground/[0.1]"),
+				children: [
+					chip.change !== "existing" && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "bg-foreground/70 size-1.5 shrink-0 rounded-full"
+					}),
+					chip.text,
+					onForget && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Forget "${chip.text}"`,
+						onClick: () => onForget(chip.id),
+						className: cn("flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]", "size-4"),
+						children: /* @__PURE__ */ jsx(XIcon, { className: "size-2.5" })
+					})
+				]
+			}, chip.id))
+		})]
+	});
+}
+//#endregion
+export { MemoryChips, memory_chips_exports };

package/dist/components/assistant-ui/elements/mermaid-diagram.aui.d.ts

@@ -0,0 +1,14 @@
+import { MermaidZoom } from "./mermaid-diagram.js";
+import { FC } from "react";
+import { SyntaxHighlighterProps } from "@assistant-ui/react-markdown";
+declare namespace mermaid_diagram_aui_d_exports {
+  export { MermaidDiagram, MermaidDiagramProps, MermaidZoom };
+}
+export type MermaidDiagramProps = SyntaxHighlighterProps & {
+  className?: string;
+};
+declare const MermaidDiagram: FC<MermaidDiagramProps> & {
+  Zoom: typeof MermaidZoom;
+};
+//#endregion
+export { MermaidDiagram, MermaidZoom, mermaid_diagram_aui_d_exports };

package/dist/components/assistant-ui/elements/mermaid-diagram.aui.js

@@ -0,0 +1,43 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { MermaidDiagram as MermaidDiagram$1, MermaidZoom } from "./mermaid-diagram.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useAuiState } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/mermaid-diagram.aui.tsx
+var mermaid_diagram_aui_exports = /* @__PURE__ */ __exportAll({
+	MermaidDiagram: () => MermaidDiagram,
+	MermaidZoom: () => MermaidZoom
+});
+/**
+* Use it by passing to `componentsByLanguage` for mermaid in `markdown-text.tsx`.
+*
+* @example
+* const MarkdownTextImpl = () => {
+*   return (
+*     <MarkdownTextPrimitive
+*       remarkPlugins={[remarkGfm]}
+*       className="aui-md"
+*       components={defaultComponents}
+*       componentsByLanguage={{
+*         mermaid: {
+*           SyntaxHighlighter: MermaidDiagram
+*         },
+*       }}
+*     />
+*   );
+* };
+*/
+const MermaidDiagramImpl = ({ code, className, node: _node, components: _components, language: _language }) => {
+	const isStreaming = useAuiState((s) => s.optional.part?.status.type === "running");
+	return /* @__PURE__ */ jsx(MermaidDiagram$1, {
+		code,
+		...className !== void 0 ? { className } : {},
+		streaming: isStreaming
+	});
+};
+const MermaidDiagram = memo(MermaidDiagramImpl);
+MermaidDiagram.displayName = "MermaidDiagram";
+MermaidDiagram.Zoom = MermaidZoom;
+//#endregion
+export { MermaidDiagram, MermaidZoom, mermaid_diagram_aui_exports };

package/dist/components/assistant-ui/elements/mermaid-diagram.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+declare namespace mermaid_diagram_d_exports {
+  export { MermaidDiagram, MermaidDiagramProps, MermaidZoom };
+}
+export type MermaidDiagramProps = {
+  code: string;
+  className?: string;
+  /** Renders a skeleton instead of the diagram while `true`. */
+  streaming?: boolean;
+};
+type MermaidZoomProps = {
+  svg: string;
+  children: ReactNode;
+};
+declare function MermaidZoom({ svg, children }: MermaidZoomProps): import("react").JSX.Element;
+declare const MermaidDiagram: FC<MermaidDiagramProps> & {
+  Zoom: typeof MermaidZoom;
+};
+//#endregion
+export { MermaidDiagram, MermaidZoom, mermaid_diagram_d_exports };