@clarify-labs/renderer 0.7.2 → 0.8.2

package/output/{OpenApiOperation-tUKf7lZ4.js → OpenApiOperation-fJ3QQOJX.js}

@@ -1,13 +1,14 @@
-import { C as isExternalHref, D as useBuiltInText, E as copyTextToClipboard, M as useLocale, c as remToPx, j as useConfig, l as lucideIconRegistry, n as PageTitleActions, s as useSectionStore, u as resolveLucideIconName, w as localizeHref } from "./PageActions-yoDRjkq8.js";
+import { D as copyTextToClipboard, M as useConfig, N as useLocale, O as useBuiltInText, T as localizeHref, c as remToPx, g as useTheme, l as lucideIconRegistry, n as PageTitleActions, s as useSectionStore, u as resolveLucideIconName, w as isExternalHref } from "./PageActions-BwY7ierv.js";
 import { t as markdownRemarkPlugins } from "./remark-Dd2WU50s.js";
 import clsx from "clsx";
 import { Children, createContext, createElement, forwardRef, isValidElement, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition } from "@headlessui/react";
-import { AlertTriangle, ArrowRight, Check, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, Info, Lightbulb, LinkIcon, LockKeyholeIcon, PackageIcon, ServerIcon, UnlockKeyholeIcon, XCircle } from "lucide-react";
+import { AlertTriangle, ArrowRight, Check, CheckCircle2, CheckIcon, ChevronDown, ChevronDownIcon, ChevronRight, ChevronsUpDownIcon, CircleCheck, Clipboard, ClipboardIcon, CodeIcon, Info, Lightbulb, LinkIcon, LockKeyholeIcon, Maximize2, PackageIcon, ServerIcon, UnlockKeyholeIcon, XCircle, ZoomIn, ZoomOut } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useInView } from "framer-motion";
 import { create } from "zustand";
+import { TransformComponent, TransformWrapper, useControls } from "react-zoom-pan-pinch";
 import ReactMarkdown from "react-markdown";
 import { slug } from "github-slugger";
 import { snippetz } from "@scalar/snippetz";
@@ -207,6 +208,166 @@ function Card(arg0) {
 	});
 }
 //#endregion
+//#region source/components/Mermaid.tsx
+var mermaidModulePromise;
+async function loadMermaid() {
+	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
+	return mermaidModulePromise;
+}
+function ZoomControls() {
+	const { zoomIn, zoomOut, resetTransform } = useControls();
+	const t = useBuiltInText();
+	const buttonClassName = "flex h-7 w-7 items-center justify-center rounded-md bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "clarify-mermaid-controls absolute top-2 right-2 z-10 flex gap-1 opacity-0 transition group-hover:opacity-100 focus-within:opacity-100",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t("mermaid.zoomIn"),
+				title: t("mermaid.zoomIn"),
+				onClick: () => zoomIn(),
+				className: buttonClassName,
+				children: /* @__PURE__ */ jsx(ZoomIn, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t("mermaid.zoomOut"),
+				title: t("mermaid.zoomOut"),
+				onClick: () => zoomOut(),
+				className: buttonClassName,
+				children: /* @__PURE__ */ jsx(ZoomOut, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t("mermaid.resetZoom"),
+				title: t("mermaid.resetZoom"),
+				onClick: () => resetTransform(),
+				className: buttonClassName,
+				children: /* @__PURE__ */ jsx(Maximize2, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}
+function Mermaid(arg0) {
+	const { chart, className } = arg0;
+	const t = useBuiltInText();
+	const { resolvedTheme } = useTheme();
+	const renderId = `clarify-mermaid-${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+	const containerRef = useRef(null);
+	const [svg, setSvg] = useState("");
+	const [error, setError] = useState(void 0);
+	const [focused, setFocused] = useState(false);
+	useEffect(() => {
+		let cancelled = false;
+		async function renderChart() {
+			const source = chart.trim();
+			if (!source) {
+				setSvg("");
+				setError(void 0);
+				return;
+			}
+			try {
+				const mermaid = await loadMermaid();
+				mermaid.initialize({
+					startOnLoad: false,
+					securityLevel: "strict",
+					theme: resolvedTheme === "dark" ? "dark" : "default",
+					fontFamily: "inherit"
+				});
+				const { svg: renderedSvg } = await mermaid.render(renderId, source);
+				if (!cancelled) {
+					setSvg(renderedSvg);
+					setError(void 0);
+				}
+			} catch (renderError) {
+				if (!cancelled) {
+					setSvg("");
+					setError(renderError instanceof Error ? renderError.message : String(renderError));
+				}
+			}
+		}
+		renderChart();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		chart,
+		renderId,
+		resolvedTheme
+	]);
+	if (error) return /* @__PURE__ */ jsxs("div", {
+		className: clsx("clarify-mermaid clarify-mermaid-error my-6 overflow-x-auto rounded-2xl border border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) p-4", className),
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-semibold text-(--clarify-error-accent-text)",
+				children: t("mermaid.renderError")
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				className: "mt-2 text-xs whitespace-pre-wrap text-(--clarify-ui-text-soft)",
+				children: error
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				className: "mt-2 text-xs whitespace-pre-wrap text-(--clarify-ui-text-faint)",
+				children: chart.trim()
+			})
+		]
+	});
+	if (!svg) return /* @__PURE__ */ jsx("div", {
+		className: clsx("clarify-mermaid clarify-mermaid-loading not-prose my-6 overflow-x-auto rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-4", className),
+		children: /* @__PURE__ */ jsx("pre", {
+			className: "text-xs text-(--clarify-ui-text-soft)",
+			children: chart.trim()
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		tabIndex: 0,
+		role: "group",
+		onPointerDown: () => containerRef.current?.focus(),
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+		className: clsx("clarify-mermaid group not-prose relative my-6 overflow-hidden rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", className),
+		children: /* @__PURE__ */ jsxs(TransformWrapper, {
+			minScale: .5,
+			maxScale: 8,
+			initialScale: 1,
+			centerOnInit: true,
+			smooth: true,
+			wheel: {
+				step: .05,
+				wheelDisabled: !focused,
+				touchPadDisabled: !focused
+			},
+			doubleClick: { mode: "reset" },
+			children: [
+				/* @__PURE__ */ jsx(ZoomControls, {}),
+				/* @__PURE__ */ jsx(TransformComponent, {
+					wrapperClass: "!w-full !cursor-grab active:!cursor-grabbing",
+					contentClass: "!w-full justify-center [&_svg]:h-auto [&_svg]:max-w-full",
+					wrapperStyle: { height: "min(70vh, 32rem)" },
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex h-full w-full items-center justify-center p-4",
+						dangerouslySetInnerHTML: { __html: svg }
+					})
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: clsx("clarify-mermaid-hint pointer-events-none absolute bottom-2 left-1/2 z-10 -translate-x-1/2 rounded-full bg-(--clarify-theme-tokens-colors-surface)/90 px-2.5 py-1 text-2xs text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) backdrop-blur-sm transition", focused ? "opacity-0" : "opacity-0 group-hover:opacity-100"),
+					children: t("mermaid.scrollHint")
+				})
+			]
+		})
+	});
+}
+//#endregion
 //#region source/components/Code.tsx
 var languageNames = {
 	js: "JavaScript",
@@ -428,8 +589,10 @@ function Code(arg0) {
 	});
 }
 function Pre(arg0) {
-	const { children, ...props } = arg0;
-	if (useContext(CodeGroupContext)) return children;
+	const { children, language, code, ...props } = arg0;
+	const isGrouped = useContext(CodeGroupContext);
+	if (language === "mermaid") return /* @__PURE__ */ jsx(Mermaid, { chart: code ?? getNodeText(children) });
+	if (isGrouped) return children;
 	return /* @__PURE__ */ jsx(CodeGroup, {
 		...props,
 		children
@@ -747,7 +910,7 @@ function HeroPattern() {
 function Prose(arg0) {
 	const { as, className, ...props } = arg0;
 	return /* @__PURE__ */ jsx(as ?? "div", {
-		className: clsx(className, "clarify-prose prose max-w-none dark:prose-invert", "[html_:where(&>*)]:w-full [html_:where(&>*)]:min-w-0 [html_:where(&>*)]:max-w-full"),
+		className: clsx(className, "clarify-prose prose max-w-none min-w-0 dark:prose-invert wrap-break-word", "[html_:where(&>*)]:w-full [html_:where(&>*)]:min-w-0 [html_:where(&>*)]:max-w-full"),
 		...props
 	});
 }
@@ -822,18 +985,29 @@ var primitives_exports = /* @__PURE__ */ __exportAll({
 	h2: () => h2,
 	h3: () => h3,
 	pre: () => pre,
+	table: () => table,
 	wrapper: () => wrapper
 });
 function wrapper(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ jsx("article", {
-		className: "clarify-mdx-page flex h-full flex-col pt-14 pb-10",
+		className: "clarify-mdx-page flex h-full min-w-0 flex-col pt-14 pb-10",
 		children: /* @__PURE__ */ jsx(Prose, {
 			className: "flex-auto",
 			children
 		})
 	});
 }
+function table(arg0) {
+	const { className, ...props } = arg0;
+	return /* @__PURE__ */ jsx("div", {
+		className: "overflow-x-auto",
+		children: /* @__PURE__ */ jsx("table", {
+			className,
+			...props
+		})
+	});
+}
 function a(arg0) {
 	const { href = "", ...props } = arg0;
 	return /* @__PURE__ */ jsx(LocalizedLink, {
@@ -937,6 +1111,23 @@ function Property(arg0) {
 }
 //#endregion
 //#region source/mdx/Markdown.tsx
+function getMermaidChart(children) {
+	if (!isValidElement(children)) return void 0;
+	const props = children.props;
+	const className = typeof props.className === "string" ? props.className : "";
+	if (!/\blanguage-mermaid\b/.test(className)) return void 0;
+	return typeof props.children === "string" ? props.children : void 0;
+}
+function MarkdownTable(arg0) {
+	const { className, ...props } = arg0;
+	return /* @__PURE__ */ jsx("div", {
+		className: "overflow-x-auto",
+		children: /* @__PURE__ */ jsx("table", {
+			className,
+			...props
+		})
+	});
+}
 var markdownComponents = {
 	a(props) {
 		return /* @__PURE__ */ jsx(a, { ...props });
@@ -946,10 +1137,15 @@ var markdownComponents = {
 	},
 	pre(arg0) {
 		const { children, ...props } = arg0;
+		const chart = getMermaidChart(children);
+		if (chart !== void 0) return /* @__PURE__ */ jsx(Mermaid, { chart });
 		return /* @__PURE__ */ jsx(pre, {
 			...props,
 			children
 		});
+	},
+	table(props) {
+		return /* @__PURE__ */ jsx(MarkdownTable, { ...props });
 	}
 };
 function Markdown(arg0) {
@@ -2512,7 +2708,7 @@ function OpenApiOperation(arg0) {
 		header: parameters.filter((parameter) => parameter.in === "header")
 	};
 	return /* @__PURE__ */ jsxs("section", {
-		className: "clarify-api-endpoint scroll-mt-24 py-16 first:pt-0 last:pb-0",
+		className: "clarify-api-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
 		children: [
 			/* @__PURE__ */ jsx(Heading, {
@@ -2579,6 +2775,6 @@ function OpenApiOperation(arg0) {
 	});
 }
 //#endregion
-export { Code as C, CardGroup as D, Card as E, Callout as O, Collapse as S, Pre as T, HeroPattern as _, authPlaceholder as a, Tag as b, getServerKey as c, getRequestBody$1 as d, Markdown as f, GridPattern as g, Prose as h, ResponseExamplesPanel as i, Button as k, getServers as l, WebFrame as m, OpenApiOperation as n, defaultServerVariables as o, primitives_exports as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getMediaTypeEntries as u, Logo as v, CodeGroup as w, Feedback as x, Heading as y };
+export { Button as A, Code as C, Card as D, Mermaid as E, CardGroup as O, Collapse as S, Pre as T, HeroPattern as _, authPlaceholder as a, Tag as b, getServerKey as c, getRequestBody$1 as d, Markdown as f, GridPattern as g, Prose as h, ResponseExamplesPanel as i, Callout as k, getServers as l, WebFrame as m, OpenApiOperation as n, defaultServerVariables as o, primitives_exports as p, RequestExamplesPanel as r, getAuthOptions as s, EndpointIdentity as t, getMediaTypeEntries as u, Logo as v, CodeGroup as w, Feedback as x, Heading as y };
 
-//# sourceMappingURL=OpenApiOperation-tUKf7lZ4.js.map
+//# sourceMappingURL=OpenApiOperation-fJ3QQOJX.js.map