boltdocs 2.7.10 → 2.8.0

package/dist/mdx-D3A2_l7P.js

@@ -0,0 +1,520 @@
+/**
+ * Boltdocs - https://boltdocs.vercel.app
+ * Copyright (c) 2026 Jesus Alcala
+ * Licensed under the MIT License.
+ */
+import { D as Check, F as File, M as Copy, T as AlertTriangle, V as Lightbulb, _ as Link, a as Csv, c as JavaScript, d as React$1, f as Rust, g as Yaml, i as Css, l as Json, m as TypeScript, n as BracketsOrange, p as Shell, r as BracketsRed, u as Markdown, w as AlertCircle, y as cn, z as Info } from "./icons-dev-Oju24Wjp.js";
+import { a as CodeBlockGroup, i as CodeBlockContent, l as useTheme, n as Tooltip, o as CodeBlockHeader, r as CodeBlock$1, s as Heading$1, t as Image$1 } from "./image-Do8V9PCW.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "react-aria-components";
+
+//#region src/client/components/mdx/field.tsx
+const Field = ({ children, name, type, description, required }) => /* @__PURE__ */ jsxs("div", {
+	className: "my-4 border border-subtle bg-surface/50 p-4 rounded-xl flex flex-col gap-1 text-sm select-none",
+	children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "font-mono font-bold text-primary-500",
+					children: name
+				}),
+				type && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted font-mono bg-soft px-1.5 py-0.5 rounded-md",
+					children: type
+				}),
+				required && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-rose-500 font-semibold",
+					children: "required"
+				})
+			]
+		}),
+		description && /* @__PURE__ */ jsx("div", {
+			className: "text-muted text-xs mt-1",
+			children: description
+		}),
+		children && /* @__PURE__ */ jsx("div", {
+			className: "mt-2",
+			children
+		})
+	]
+});
+
+//#endregion
+//#region src/client/components/mdx/typographics.tsx
+const Anchor = ({ href, children, className, ...props }) => {
+	return /* @__PURE__ */ jsx(Link, {
+		href: href || "",
+		className: cn("text-primary-500 hover:text-primary-400 dark:text-primary-500 hover:underline font-medium transition-colors duration-200", className),
+		...props,
+		children
+	});
+};
+const HEADING_CLASSES = {
+	1: "text-3xl sm:text-[2.5rem] font-extrabold tracking-tight text-body mb-4 leading-tight",
+	2: "text-2xl sm:text-[1.75rem] font-bold tracking-tight text-body mt-14 mb-5 pb-2 border-b border-subtle scroll-mt-24",
+	3: "text-lg sm:text-[1.4rem] font-semibold tracking-tight text-body mt-10 mb-4 scroll-mt-24",
+	4: "text-base sm:text-[1.1rem] font-semibold tracking-tight text-body mt-8 mb-3 scroll-mt-24",
+	5: "text-sm sm:text-[0.9rem] font-semibold tracking-tight text-body mt-6 mb-2 scroll-mt-24",
+	6: "text-xs sm:text-[0.75rem] font-semibold tracking-tight text-body mt-6 mb-2 scroll-mt-24"
+};
+const Heading = ({ level, className, ...props }) => {
+	return /* @__PURE__ */ jsx(Heading$1, {
+		level,
+		className: cn(HEADING_CLASSES[level] || "", className),
+		...props
+	});
+};
+const Typographics = {
+	a: Anchor,
+	h1: (props) => /* @__PURE__ */ jsx(Heading, {
+		level: 1,
+		...props
+	}),
+	h2: (props) => /* @__PURE__ */ jsx(Heading, {
+		level: 2,
+		...props
+	}),
+	h3: (props) => /* @__PURE__ */ jsx(Heading, {
+		level: 3,
+		...props
+	}),
+	h4: (props) => /* @__PURE__ */ jsx(Heading, {
+		level: 4,
+		...props
+	}),
+	h5: (props) => /* @__PURE__ */ jsx(Heading, {
+		level: 5,
+		...props
+	}),
+	h6: (props) => /* @__PURE__ */ jsx(Heading, {
+		level: 6,
+		...props
+	}),
+	p: ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
+		className: cn("text-paragraph leading-relaxed my-5", className),
+		...props
+	}),
+	strong: ({ className, ...props }) => /* @__PURE__ */ jsx("strong", {
+		className: cn("font-semibold text-body", className),
+		...props
+	}),
+	mark: ({ className, ...props }) => /* @__PURE__ */ jsx("mark", {
+		className: cn("bg-primary-500/10 text-primary-500 font-semibold px-1.5 py-0.5 rounded-md", className),
+		...props
+	}),
+	blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx("blockquote", {
+		className: cn("border-l-4 border-primary-500 bg-soft/30 pl-4 py-2 my-6 italic text-muted rounded-r-lg", className),
+		...props
+	}),
+	hr: ({ className, ...props }) => /* @__PURE__ */ jsx("hr", {
+		className: cn("my-8 border-t border-subtle", className),
+		...props
+	}),
+	ul: ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
+		className: cn("list-disc pl-6 my-5 space-y-2 text-paragraph", className),
+		...props
+	}),
+	ol: ({ className, ...props }) => /* @__PURE__ */ jsx("ol", {
+		className: cn("list-decimal pl-6 my-5 space-y-2 text-paragraph", className),
+		...props
+	}),
+	li: ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+		className: cn("pl-1", className),
+		...props
+	})
+};
+
+//#endregion
+//#region src/client/components/mdx/table.tsx
+const Table = (props) => /* @__PURE__ */ jsx("div", {
+	className: "my-6 w-full overflow-x-auto rounded-xl border border-subtle bg-surface/30",
+	children: /* @__PURE__ */ jsx("table", {
+		className: "w-full border-collapse text-left text-sm",
+		...props
+	})
+});
+const TableHead = (props) => /* @__PURE__ */ jsx("thead", {
+	className: cn("border-b border-subtle bg-soft/50", props.className),
+	...props
+});
+const TableBody = (props) => /* @__PURE__ */ jsx("tbody", { ...props });
+const TableRow = (props) => /* @__PURE__ */ jsx("tr", {
+	className: cn("border-b border-subtle last:border-0 even:bg-soft/10 hover:bg-soft/20 transition-colors", props.className),
+	...props
+});
+const TableHeader = (props) => /* @__PURE__ */ jsx("th", {
+	className: cn("px-4 py-3 font-semibold text-body text-xs font-mono", props.className),
+	...props
+});
+const TableCell = (props) => /* @__PURE__ */ jsx("td", {
+	className: cn("px-4 py-3 text-paragraph leading-relaxed", props.className),
+	...props
+});
+const TableComponents = {
+	table: Table,
+	thead: TableHead,
+	tbody: TableBody,
+	tr: TableRow,
+	th: TableHeader,
+	td: TableCell
+};
+
+//#endregion
+//#region src/client/components/mdx/callout.tsx
+const variantStyles = {
+	note: {
+		container: "bg-slate-500/5 dark:bg-slate-500/10 border-slate-500/40 text-slate-800 dark:text-slate-200",
+		titleText: "text-slate-900 dark:text-slate-100",
+		iconColor: "text-slate-500",
+		icon: Info,
+		defaultTitle: "Note"
+	},
+	info: {
+		container: "bg-indigo-500/5 dark:bg-indigo-500/10 border-indigo-500/40 text-indigo-800 dark:text-indigo-200",
+		titleText: "text-indigo-900 dark:text-indigo-100",
+		iconColor: "text-indigo-500",
+		icon: Info,
+		defaultTitle: "Info"
+	},
+	tip: {
+		container: "bg-green-500/5 dark:bg-green-500/10 border-green-500/40 text-green-800 dark:text-green-200",
+		titleText: "text-green-900 dark:text-green-100",
+		iconColor: "text-green-500",
+		icon: Lightbulb,
+		defaultTitle: "Tip"
+	},
+	warning: {
+		container: "bg-amber-500/5 dark:bg-amber-500/10 border-amber-500/40 text-amber-800 dark:text-amber-200",
+		titleText: "text-amber-900 dark:text-amber-100",
+		iconColor: "text-amber-500",
+		icon: AlertTriangle,
+		defaultTitle: "Warning"
+	},
+	danger: {
+		container: "bg-rose-500/5 dark:bg-rose-500/10 border-rose-500/40 text-rose-800 dark:text-rose-200",
+		titleText: "text-rose-900 dark:text-rose-100",
+		iconColor: "text-rose-500",
+		icon: AlertCircle,
+		defaultTitle: "Danger"
+	}
+};
+function Callout({ children, className = "", variant = "note", title, ...props }) {
+	const styles = variantStyles[variant] || variantStyles.note;
+	const Icon = styles.icon;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("my-6 flex gap-4 p-4 rounded-xl border-2", styles.container, className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("shrink-0 pt-0.5", styles.iconColor),
+			children: /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5 stroke-[2]" })
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 text-[0.875rem] leading-[1.6]",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("font-bold text-sm mb-1", styles.titleText),
+				children: title || styles.defaultTitle
+			}), /* @__PURE__ */ jsx("div", {
+				className: "prose prose-neutral dark:prose-invert max-w-none [&>p]:m-0 [&>p+p]:mt-2",
+				children
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/client/utils/copy-clipboard.ts
+/**
+* Copy text to clipboard.
+* @param text - The text to copy.
+* @returns True if the text was copied successfully.
+*/
+const copyToClipboard = async (text) => {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		const textarea = document.createElement("textarea");
+		textarea.value = text;
+		textarea.style.position = "fixed";
+		textarea.style.opacity = "0";
+		document.body.appendChild(textarea);
+		textarea.select();
+		document.execCommand("copy");
+		document.body.removeChild(textarea);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/client/components/mdx/use-code-block.ts
+function useCodeBlock(props) {
+	const [copied, setCopied] = useState(false);
+	const [isExpanded, setIsExpanded] = useState(false);
+	const [isExpandable, setIsExpandable] = useState(false);
+	const preRef = useRef(null);
+	const timerRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, []);
+	const handleCopy = useCallback(async () => {
+		copyToClipboard(preRef.current?.textContent ?? "");
+		setCopied(true);
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => {
+			setCopied(false);
+			timerRef.current = null;
+		}, 2e3);
+	}, []);
+	useEffect(() => {
+		const lines = (preRef.current?.textContent ?? "").trim().split("\n").length;
+		setIsExpandable(lines > 6);
+	}, [props.children, props.highlightedHtml]);
+	return {
+		copied,
+		isExpanded,
+		setIsExpanded,
+		isExpandable,
+		preRef,
+		handleCopy,
+		shouldTruncate: isExpandable && !isExpanded
+	};
+}
+
+//#endregion
+//#region src/client/components/mdx/code-block.tsx
+const langIconMap = {
+	ts: TypeScript,
+	tsx: React$1,
+	js: JavaScript,
+	jsx: React$1,
+	json: Json,
+	css: Css,
+	html: BracketsOrange,
+	md: Markdown,
+	mdx: Markdown,
+	bash: Shell,
+	sh: Shell,
+	yaml: Yaml,
+	yml: Yaml,
+	rs: Rust,
+	rust: Rust,
+	toml: BracketsRed,
+	csv: Csv
+};
+const CopyButton = ({ copied, handleCopy }) => {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: copied ? "Copied!" : "Copy code",
+		children: /* @__PURE__ */ jsx(Button, {
+			onPress: handleCopy,
+			className: cn("grid place-items-center size-8 bg-transparent outline-none cursor-pointer transition-all duration-200 hover:scale-110 active:scale-95 [&>svg]:size-4 [&>svg]:stroke-2 z-10", copied ? "text-emerald-400" : "text-muted hover:text-body"),
+			"aria-label": "Copy code",
+			children: copied ? /* @__PURE__ */ jsx(Check, { size: 20 }) : /* @__PURE__ */ jsx(Copy, { size: 20 })
+		})
+	});
+};
+function CodeBlock(props) {
+	const { children, hideCopy = false, highlightedHtml, "data-highlighted-html": dataHighlightedHtml, title, "data-title": dataTitle, "data-lang": dataLang, plain = false, lineNumbers, showLineNumbers, wordWrap, "word-wrap": wordWrapHyphen, metastring, ...rest } = props;
+	const { style, className: shikiClassName, ...cleanRest } = rest;
+	const isHighlighted = props["data-highlighted"] === "true" || typeof shikiClassName === "string" && shikiClassName.includes("shiki");
+	const rawHighlightedHtml = highlightedHtml || dataHighlightedHtml;
+	const effectiveHighlightedHtml = typeof rawHighlightedHtml === "string" ? rawHighlightedHtml.replace(/<span class="line">\s*(?:<span[^>]*>\s*<\/span>)?\s*<\/span>\s*(<\/code>\s*<\/pre>)/g, "$1") : rawHighlightedHtml;
+	const effectiveTitle = title || dataTitle;
+	const lang = props.lang || dataLang || "";
+	const { copied, isExpanded, setIsExpanded, isExpandable, preRef, handleCopy, shouldTruncate } = useCodeBlock(props);
+	const LangIcon = langIconMap[lang];
+	return /* @__PURE__ */ jsxs(CodeBlock$1, {
+		plain,
+		className: props.className,
+		children: [(effectiveTitle || !hideCopy) && /* @__PURE__ */ jsxs(CodeBlockHeader, {
+			className: cn({ "absolute top-2 left-0 w-full": !effectiveTitle }),
+			children: [/* @__PURE__ */ jsx(CodeBlockGroup, { children: effectiveTitle && /* @__PURE__ */ jsxs(Fragment, { children: [LangIcon ? /* @__PURE__ */ jsx(LangIcon, { size: 14 }) : /* @__PURE__ */ jsx(File, {
+				size: 14,
+				className: "opacity-60"
+			}), /* @__PURE__ */ jsx("span", { children: effectiveTitle })] }) }), /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-1",
+				children: !hideCopy && /* @__PURE__ */ jsx(CopyButton, {
+					copied,
+					handleCopy
+				})
+			})]
+		}), /* @__PURE__ */ jsxs(CodeBlockContent, {
+			shouldTruncate,
+			children: [effectiveHighlightedHtml ? /* @__PURE__ */ jsx("div", {
+				ref: preRef,
+				className: "shiki-wrapper overflow-x-auto [&>pre]:m-0! [&>pre]:rounded-none! [&>pre]:border-none! [&>pre]:bg-inherit! [&>pre>code]:grid! [&>pre>code]:p-5! [&>pre>code]:text-[0.875rem]! [&>pre>code]:leading-[1.6]! [&>.shiki.shiki-themes]:bg-transparent!",
+				dangerouslySetInnerHTML: { __html: effectiveHighlightedHtml }
+			}) : /* @__PURE__ */ jsx("pre", {
+				ref: preRef,
+				className: cn("m-0! rounded-none! border-none! bg-transparent!", "text-[0.875rem] leading-[1.6] overflow-x-auto", shikiClassName, {
+					"p-0! [&>code]:grid! [&>code]:p-5! [&>code]:bg-transparent!": isHighlighted,
+					"p-5!": !isHighlighted
+				}),
+				...cleanRest,
+				children
+			}), isExpandable && /* @__PURE__ */ jsx("div", {
+				className: cn(shouldTruncate ? "absolute bottom-0 inset-x-0 h-24 bg-linear-to-t from-(--color-code-bg) to-transparent flex items-end justify-center pb-4 z-10" : "relative flex justify-center pb-4 pt-1 -mt-4"),
+				children: /* @__PURE__ */ jsx(Button, {
+					onPress: () => setIsExpanded(!isExpanded),
+					className: "rounded-full bg-surface border border-subtle px-5 py-2 text-[0.8125rem] font-medium text-body outline-none cursor-pointer transition-all hover:bg-soft hover:-translate-y-px backdrop-blur-md",
+					children: isExpanded ? "Show less" : "Expand code"
+				})
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/client/components/mdx/image.tsx
+const Image = ({ src, alt, title, theme, className, ...props }) => {
+	const { theme: themeContext } = useTheme();
+	if (!src) return null;
+	if (theme !== themeContext) return null;
+	const caption = title || alt;
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "my-6 sm:my-8 flex flex-col items-center justify-center group not-prose",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "relative w-full overflow-hidden rounded-lg sm:rounded-2xl border border-subtle bg-soft/30 transition-all duration-300 sm:max-w-[85%] lg:max-w-full",
+			children: /* @__PURE__ */ jsx(Image$1, {
+				src,
+				alt: alt || "",
+				theme,
+				loading: "lazy",
+				decoding: "async",
+				className: cn("w-full h-auto object-contain transition-transform duration-500 group-hover:scale-[1.01] my-0 rounded-md sm:rounded-xl block", className),
+				...props
+			})
+		}), caption && /* @__PURE__ */ jsx("figcaption", {
+			className: "mt-2 sm:mt-3 text-center text-xs sm:text-sm text-muted font-medium select-none tracking-wide opacity-90 sm:opacity-80 group-hover:opacity-100 transition-opacity duration-300 px-2",
+			children: caption
+		})]
+	});
+};
+const ImageComponents = {
+	img: Image,
+	Image
+};
+
+//#endregion
+//#region src/client/components/mdx/card.tsx
+function Card({ className, title, icon, href, children, ...props }) {
+	const [position, setPosition] = useState({
+		x: 0,
+		y: 0
+	});
+	const [opacity, setOpacity] = useState(0);
+	const cardRef = useRef(null);
+	const handleMouseMove = (e) => {
+		if (!cardRef.current) return;
+		const rect = cardRef.current.getBoundingClientRect();
+		setPosition({
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top
+		});
+	};
+	const handleMouseEnter = () => setOpacity(1);
+	const handleMouseLeave = () => setOpacity(0);
+	const Wrapper = href ? "a" : "div";
+	const spotlightColor = "var(--color-primary-500, #eb5828)";
+	return /* @__PURE__ */ jsxs(Wrapper, {
+		ref: cardRef,
+		href,
+		onMouseMove: handleMouseMove,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		className: cn("group relative flex flex-col gap-3 rounded-2xl border p-6 overflow-hidden transition-all duration-300", "hover:shadow-lg dark:hover:shadow-none hover:-translate-y-0.5", "bg-surface border-subtle text-paragraph", href && "cursor-pointer", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-0 transition-opacity duration-300",
+				style: {
+					opacity,
+					background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, color-mix(in srgb, ${spotlightColor} 8%, transparent), transparent 40%)`
+				}
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-0 rounded-2xl transition-opacity duration-300",
+				style: {
+					opacity,
+					padding: "1px",
+					background: `radial-gradient(400px circle at ${position.x}px ${position.y}px, color-mix(in srgb, ${spotlightColor} 50%, transparent), transparent 40%)`,
+					WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+					WebkitMaskComposite: "xor",
+					maskComposite: "exclude"
+				}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative z-10 flex items-center gap-3",
+				children: [icon && /* @__PURE__ */ jsx("div", {
+					className: cn("shrink-0 transition-transform duration-500 group-hover:rotate-[15deg] group-hover:scale-110 flex items-center justify-center text-muted group-hover:text-primary-500", "[&>svg]:w-6 [&>svg]:h-6 [&>svg]:stroke-[1.5]"),
+					children: icon
+				}), title && /* @__PURE__ */ jsx("h3", {
+					className: "font-semibold text-base m-0 leading-none text-body",
+					children: title
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative z-10 text-[0.875rem] leading-[1.6] opacity-90 prose prose-neutral dark:prose-invert max-w-none [&>p]:m-0 [&>p+p]:mt-2",
+				children
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/client/components/mdx/cards.tsx
+function Cards({ children, className, cols = 2, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-4 my-6", {
+			"grid-cols-1": cols === 1,
+			"grid-cols-1 sm:grid-cols-2": cols === 2,
+			"grid-cols-1 sm:grid-cols-2 md:grid-cols-3": cols === 3,
+			"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4": cols === 4
+		}, className),
+		...props,
+		children
+	});
+}
+
+//#endregion
+//#region src/client/components/mdx/last-updated.tsx
+/**
+* A subtle display for when the page was last updated.
+* Small, opaque, and positioned at the bottom of the content with a thin top border divider.
+*/
+function LastUpdated({ date }) {
+	if (!date) return null;
+	const d = new Date(date);
+	if (Number.isNaN(d.getTime())) return null;
+	const formattedDate = d.toLocaleDateString(void 0, {
+		year: "numeric",
+		month: "long",
+		day: "numeric"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-16 pt-6 border-t border-subtle flex items-center justify-between text-xs text-muted select-none",
+		children: [/* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("span", {
+			className: "italic",
+			children: ["Last updated on ", formattedDate]
+		})]
+	});
+}
+
+//#endregion
+//#region src/client/components/mdx/index.ts
+const mdx_components_default = {
+	...Typographics,
+	...TableComponents,
+	...ImageComponents,
+	LastUpdated,
+	pre: CodeBlock,
+	Field,
+	Callout,
+	Card,
+	Cards
+};
+
+//#endregion
+export { copyToClipboard as n, mdx_components_default as t };