docblocks-react-ui 0.0.0-stage → 0.1.0

package/dist/mermaid/index.mjs

@@ -0,0 +1,252 @@
+import { Ht as AlertDescription, Nt as Eye, Pt as CodeXml, Ut as AlertTitle, Vt as Alert, c as CodeHeader, h as textOf, hn as INLINE_CODE_CLASS, k as useEditorContext, m as TextBlock, s as childrenSlot, z as SegmentSelector } from "../Editor-CiJY5R4v.mjs";
+import { n as TriangleAlert } from "../constants-D4FTL0ph.mjs";
+import { t as LoaderCircle } from "../LoaderCircle-AGVFE4IP.mjs";
+import { t as Skeleton } from "../Skeleton-D922Ths5.mjs";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import mermaid from "mermaid";
+//#region src/mermaid/mermaid-config.ts
+/** The mermaid renderer's config stand (the v1 security + behavior stand —
+* `securityLevel: "strict"` — the user's diagram source is sanitized and
+* no click handlers or foreign scripts are bound — and
+* `suppressErrorRendering: true`, so a rejected render removes its
+* working container from the page before the parse error propagates —
+* without it mermaid leaves a visible temp element in `body` per failed
+* render; a looser mode is a consumer decision outside this package) +
+* the theme setter (Mermaid 12 reads the config synchronously at the
+* start of `render` (before its first await), so setting it in the same
+* task as the render call is race-free across the page's instances — the
+* global config is the only theme lever — `render` takes no per-render
+* config) + the module-scope stand (the light default before the first
+* mount) + the safe id (the block id with the characters that are not
+* valid in a DOM id stripped). */
+const MERMAID_CONFIG_STAND = {
+	startOnLoad: false,
+	securityLevel: "strict",
+	suppressErrorRendering: true
+};
+/**
+* Sets the global mermaid config for the editor's theme. Mermaid 12
+* reads the config synchronously at the start of `render` (before its
+* first await), so setting it in the same task as the render call is
+* race-free across the page's instances (the global config is the only
+* theme lever — `render` takes no per-render config).
+*/
+function configureMermaidTheme(theme) {
+	mermaid.initialize({
+		...MERMAID_CONFIG_STAND,
+		theme: theme === "dark" ? "dark" : "default"
+	});
+}
+configureMermaidTheme("light");
+/** The block id with the characters that are not valid in a DOM id stripped. */
+function safeId(id) {
+	return id.replace(/[^a-zA-Z0-9_-]/g, "");
+}
+//#endregion
+//#region src/mermaid/useContainerTheme.ts
+/** The editor's theme for one ref'd element, reactive to a theme flip:
+* a single MutationObserver watches the `class` attribute of the
+* element's ancestor chain (collected on mount — the preview's branch
+* swap keeps the same ancestors). A flip re-renders the diagram through
+* the value change (a repeat of the current value is a React no-op). The
+* editor's theme as seen from one element: the `dark` class on the
+* element or any ancestor. */
+/** The editor's theme as seen from one element: the `dark` class on the element or any ancestor. */
+function detectEditorTheme(el) {
+	return el !== null && el.closest(".dark") !== null ? "dark" : "light";
+}
+/**
+* The editor's theme for one ref'd element, reactive to a theme flip:
+* a single MutationObserver watches the `class` attribute of the
+* element's ancestor chain (collected on mount — the preview's branch
+* swap keeps the same ancestors). A flip re-renders the diagram through
+* the value change (a repeat of the current value is a React no-op).
+*/
+function useContainerTheme(ref) {
+	const [theme, setTheme] = useState(() => detectEditorTheme(ref.current));
+	useEffect(() => {
+		const apply = () => setTheme(detectEditorTheme(ref.current));
+		apply();
+		const targets = [];
+		for (let node = ref.current; node !== null; node = node.parentElement) targets.push(node);
+		if (targets.length === 0) return;
+		const observer = new MutationObserver(apply);
+		for (const target of targets) observer.observe(target, {
+			attributes: true,
+			attributeFilter: ["class"]
+		});
+		return () => observer.disconnect();
+	}, [ref]);
+	return theme;
+}
+//#endregion
+//#region src/mermaid/MermaidDiagram.tsx
+/** The live diagram preview of one mermaid code block: `mermaid.render`
+* into a unique id per attempt, the svg injected into a container. The
+* previous svg stays put while a (re-)render runs (no flicker while
+* typing); a parse error drops the svg and shows the raw text with the
+* error flag. The effect re-runs on every text change (the store-driven
+* re-render passes a fresh block snapshot, so the text prop is the
+* re-render trigger) and on an editor-theme flip (the theme is the
+* global config's stand, set in the same task as the render call). */
+/** A unique mermaid render id per attempt (mermaid requires one per render). */
+let renderSeq = 0;
+function MermaidDiagram({ id, text }) {
+	const containerRef = useRef(null);
+	const theme = useContainerTheme(containerRef);
+	const [state, setState] = useState({
+		svg: null,
+		error: null
+	});
+	useEffect(() => {
+		renderSeq += 1;
+		const renderId = `mb-${renderSeq}-${safeId(id)}`;
+		let cancelled = false;
+		configureMermaidTheme(theme);
+		(async () => {
+			try {
+				const { svg } = await mermaid.render(renderId, text);
+				if (!cancelled) setState({
+					svg,
+					error: null
+				});
+			} catch (error) {
+				if (!cancelled) setState({
+					svg: null,
+					error: error instanceof Error ? error.message : String(error)
+				});
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		id,
+		text,
+		theme
+	]);
+	if (state.error !== null) return /* @__PURE__ */ jsxs(Alert, {
+		ref: containerRef,
+		"data-slot": "docblocks/mermaid",
+		"data-state": "error",
+		variant: "destructive",
+		className: "mt-(--docblocks-block-spacing)",
+		children: [
+			/* @__PURE__ */ jsx(TriangleAlert, {}),
+			/* @__PURE__ */ jsx(AlertTitle, {
+				"data-slot": "docblocks/mermaid-error-message",
+				className: "line-clamp-none",
+				children: state.error
+			}),
+			/* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsx("code", {
+				"data-slot": "docblocks/mermaid-error",
+				className: INLINE_CODE_CLASS,
+				children: text
+			}) })
+		]
+	});
+	if (state.svg !== null) return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		"data-slot": "docblocks/mermaid",
+		"data-state": "diagram",
+		className: "mt-(--docblocks-block-spacing)",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "docblocks/mermaid-diagram",
+			dangerouslySetInnerHTML: { __html: state.svg }
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		"data-slot": "docblocks/mermaid",
+		"data-state": "loading",
+		className: "relative mt-(--docblocks-block-spacing)",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full" }), /* @__PURE__ */ jsxs("div", {
+			className: "absolute inset-0 flex items-center justify-center gap-2",
+			children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin" }), /* @__PURE__ */ jsx("span", {
+				"data-slot": "docblocks/mermaid-loading",
+				children: "rendering…"
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/mermaid/MermaidCodeRenderer.tsx
+function MermaidModeSelector({ id, block }) {
+	const { doc } = useEditorContext();
+	const mode = block.attrs?.mermaidMode ?? "code";
+	const pick = (next) => {
+		if (next === mode) return;
+		doc.updateBlock(id, { mermaidMode: next });
+	};
+	return /* @__PURE__ */ jsx(SegmentSelector, {
+		options: [{
+			value: "code",
+			label: "Show the code",
+			icon: /* @__PURE__ */ jsx(CodeXml, { className: "size-4" })
+		}, {
+			value: "preview",
+			label: "Show the diagram preview",
+			icon: /* @__PURE__ */ jsx(Eye, { className: "size-4" })
+		}],
+		value: mode,
+		onChange: pick,
+		ariaLabel: "Mermaid display mode",
+		slot: "docblocks/mermaid-mode",
+		pillSlot: "docblocks/mermaid-mode-pill",
+		buttonAttrName: "mermaid-mode-button"
+	});
+}
+/**
+* One code block with the diagram capability: a `language: "mermaid"`
+* block renders per its `mermaidMode` (default "code") — the modes are
+* exclusive: `code` renders the editable code only (the diagram stands
+* hidden), `preview` renders the diagram only (the code body hidden —
+* the editable stays mounted for the text sync); every other code block
+* is the plain built-in code rendering.
+*/
+function MermaidCodeBlock({ id, block }) {
+	const nested = childrenSlot(id, block.children);
+	if (block.attrs?.language !== "mermaid") return /* @__PURE__ */ jsx(TextBlock, {
+		id,
+		block,
+		tag: "pre",
+		header: /* @__PURE__ */ jsx(CodeHeader, {
+			id,
+			block
+		}),
+		nested
+	});
+	const mode = block.attrs?.mermaidMode ?? "code";
+	return /* @__PURE__ */ jsx(TextBlock, {
+		id,
+		block,
+		tag: "pre",
+		header: /* @__PURE__ */ jsx(CodeHeader, {
+			id,
+			block,
+			center: /* @__PURE__ */ jsx(MermaidModeSelector, {
+				id,
+				block
+			})
+		}),
+		codeBodyHidden: mode === "preview",
+		nested: mode === "preview" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MermaidDiagram, {
+			id,
+			text: textOf(block.content)
+		}), nested] }) : nested
+	});
+}
+/**
+* A BlockRenderer for the `code` type. The registry dispatches by type:
+* a renderer registered under "code" only receives code blocks (the union
+* cannot express that narrowing at the call site).
+*/
+function MermaidCodeRenderer({ id, block }) {
+	return /* @__PURE__ */ jsx(MermaidCodeBlock, {
+		id,
+		block
+	});
+}
+//#endregion
+export { MermaidCodeRenderer };

package/dist/motion/index.d.mts

@@ -0,0 +1,8 @@
+import { n as EditorView } from "../Editor-DT7RkRXf.mjs";
+//#region src/motion/MotionEditor.d.ts
+declare function MotionEditor({ view, formatPalette }: {
+  view?: EditorView;
+  formatPalette?: readonly string[];
+}): import("react").JSX.Element;
+//#endregion
+export { MotionEditor };