boltdocs 3.2.2 → 3.3.0

package/dist/{mdx-BuO6a1f7.js → mdx-BRT71V5Q.js}

@@ -3,15 +3,15 @@
  * Copyright (c) 2026 Jesus Alcala
  * Licensed under the MIT License.
  */
-import { B as useConfig, D as Lightbulb, T as Info, c as AlertCircle, d as Check, g as Copy, l as AlertTriangle, r as cn, t as Link } from "./link-2PzgTnaP.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-Bz87fCla.js";
+import { W as useConfig, b as Copy, f as AlertCircle, h as Check, j as Lightbulb, k as Info, o as cn, p as AlertTriangle, t as Link } from "./link-CgdI6O2o.js";
+import { _ as useTheme, a as CodeBlockContent, c as CodeBlockHeader, h as Heading$1, i as CodeBlockActions, l as CodeBlockPre, n as Tooltip, o as CodeBlockExpand, r as CodeBlock$1, s as CodeBlockGroup, t as Image$1, u as Callout$1 } from "./image-B-NDSDuY.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { 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",
+const Field = ({ children, name, type, description, required, className }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("my-4 border border-subtle bg-surface/50 p-4 rounded-xl flex flex-col gap-1 text-sm select-none", className),
 	children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
@@ -25,7 +25,7 @@ const Field = ({ children, name, type, description, required }) => /* @__PURE__
 					children: type
 				}),
 				required && /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-rose-500 font-semibold",
+					className: "text-xs text-danger-500 font-semibold",
 					children: "required"
 				})
 			]
@@ -132,8 +132,8 @@ const Typographics = {
 
 //#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",
+const Table = ({ wrapperClassName, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("my-6 w-full overflow-x-auto rounded-xl border border-subtle bg-surface/30", wrapperClassName),
 	children: /* @__PURE__ */ jsx("table", {
 		className: "w-full border-collapse text-left text-sm",
 		...props
@@ -167,62 +167,60 @@ const TableComponents = {
 
 //#endregion
 //#region src/client/components/mdx/callout.tsx
-const variantStyles = {
+/**
+* Default styled callout. Built on the style-neutral Callout primitive and
+* themed through semantic variant tokens (`--color-{danger|success|warning|info|primary}-500`),
+* so a custom theme can restyle it entirely from CSS.
+*/
+const variantMeta = {
 	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",
+		container: "bg-primary-500/10 border-primary-500/50",
+		accent: "text-primary-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",
+		container: "bg-info-500/10 border-info-500/50",
+		accent: "text-info-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",
+		container: "bg-success-500/10 border-success-500/50",
+		accent: "text-success-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",
+		container: "bg-warning-500/10 border-warning-500/50",
+		accent: "text-warning-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",
+		container: "bg-danger-500/10 border-danger-500/50",
+		accent: "text-danger-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),
+function Callout({ children, className = "", variant = "note", title, iconClassName, titleClassName, bodyClassName, ...props }) {
+	const meta = variantMeta[variant] || variantMeta.note;
+	const Icon = meta.icon;
+	return /* @__PURE__ */ jsx(Callout$1, {
+		variant,
+		icon: /* @__PURE__ */ jsx("div", {
+			className: cn("pt-0.5", meta.accent, iconClassName),
 			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
-			})]
-		})]
+		}),
+		title: /* @__PURE__ */ jsx("div", {
+			className: cn("font-bold text-sm text-body", meta.accent, titleClassName),
+			children: title || meta.defaultTitle
+		}),
+		className: cn("my-6 rounded-xl border-2 text-body prose prose-neutral dark:prose-invert max-w-none", meta.container, className),
+		bodyClassName: cn("text-[0.875rem] leading-[1.6]", bodyClassName),
+		...props,
+		children
 	});
 }
 
@@ -251,109 +249,151 @@ const copyToClipboard = async (text) => {
 };
 
 //#endregion
-//#region src/client/components/mdx/use-code-block.ts
-function useCodeBlock(props) {
+//#region src/client/components/mdx/use-copy-button.ts
+/**
+* Copy-to-clipboard state for a code block (or any copyable surface).
+* `handleCopy(code)` copies the given text and shows a transient "copied"
+* confirmation for 2 seconds.
+*/
+function useCopyButton() {
 	const [copied, setCopied] = useState(false);
-	const [isExpanded, setIsExpanded] = useState(false);
-	const [isExpandable, setIsExpandable] = useState(false);
-	const [rated, setRated] = useState(null);
-	const preRef = useRef(null);
 	const timerRef = useRef(null);
-	const customConfig = useConfig().integrations?.feedback?.custom;
-	const showCodeBlockFeedback = !!(customConfig?.enabled && !props.plain);
-	const lang = props.lang || props["data-lang"] || "";
-	const isHighlighted = props["data-highlighted"] === "true" || typeof props.className === "string" && props.className.includes("shiki");
-	const rawHighlightedHtml = props.highlightedHtml || props["data-highlighted-html"];
-	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 = props.title || props["data-title"];
-	const handleRate = useCallback(async (type) => {
-		if (rated) return;
-		setRated(type);
-		try {
-			const code = preRef.current?.textContent ?? "";
-			const snippet = code.trim().slice(0, 100) + (code.length > 100 ? "..." : "");
-			const blockId = `Code Block (${lang || "plain"}): \`${snippet}\``;
-			const endpoint = customConfig?.endpoint || "/api/feedback";
-			await fetch(endpoint, {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({
-					rating: type === "up" ? "good" : "bad",
-					comment: `Rated code block: ${type === "up" ? "Helpful" : "Unhelpful"}`,
-					path: window.location.pathname,
-					title: document.title,
-					blockId
-				})
-			});
-		} catch (err) {
-			console.error("Failed to submit code block feedback:", err);
-		}
-	}, [
-		rated,
-		lang,
-		customConfig?.endpoint
-	]);
 	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,
+		handleCopy: useCallback((code) => {
+			copyToClipboard(code);
+			setCopied(true);
+			if (timerRef.current) clearTimeout(timerRef.current);
+			timerRef.current = setTimeout(() => {
+				setCopied(false);
+				timerRef.current = null;
+			}, 2e3);
+		}, [])
+	};
+}
+
+//#endregion
+//#region src/client/components/mdx/use-expandable.ts
+/**
+* Expand / collapse behavior for long code blocks. Measures the rendered code
+* through `preRef` and exposes whether the block is expandable, whether it
+* should be visually truncated, and a toggle handler.
+*/
+function useExpandable(options = {}) {
+	const { children, highlightedHtml, maxLines = 6 } = options;
+	const [isExpanded, setIsExpanded] = useState(false);
+	const [isExpandable, setIsExpandable] = useState(false);
+	const preRef = useRef(null);
+	const shouldTruncate = isExpandable && !isExpanded;
+	const toggle = () => setIsExpanded((prev) => !prev);
+	useEffect(() => {
+		const node = preRef.current;
+		if (!node) {
+			setIsExpandable(false);
+			return;
+		}
+		const lines = (node.textContent ?? "").trim().split("\n").length;
+		const hasOverflow = "scrollHeight" in node && "clientHeight" in node && Number(node.scrollHeight) > Number(node.clientHeight);
+		setIsExpandable(lines > maxLines || hasOverflow);
+	}, [
+		children,
+		highlightedHtml,
+		maxLines
+	]);
+	return {
 		isExpanded,
 		setIsExpanded,
 		isExpandable,
-		preRef,
-		handleCopy,
-		shouldTruncate: isExpandable && !isExpanded,
-		isHighlighted,
-		effectiveHighlightedHtml,
-		effectiveTitle,
-		lang,
-		showCodeBlockFeedback,
+		shouldTruncate,
+		toggle,
+		preRef
+	};
+}
+
+//#endregion
+//#region src/client/components/mdx/use-code-block-feedback.ts
+/**
+* Thumbs-up / thumbs-down feedback for code blocks. Only enabled when the
+* `feedback.custom` integration is configured in the site config. The submit
+* behavior can be overridden via `submitFeedback`.
+*/
+function useCodeBlockFeedback(options = {}) {
+	const { plain = false, lang = "", submitFeedback } = options;
+	const [rated, setRated] = useState(null);
+	const customConfig = useConfig().integrations?.feedback?.custom;
+	const enabled = !!(customConfig?.enabled && !plain);
+	return {
 		rated,
-		handleRate
+		handleRate: useCallback(async (type, code) => {
+			if (rated) return;
+			setRated(type);
+			const snippet = code ? code.trim().slice(0, 100) + (code.length > 100 ? "..." : "") : "";
+			const blockId = `Code Block (${lang || "plain"}): \`${snippet}\``;
+			const payload = {
+				rating: type === "up" ? "good" : "bad",
+				comment: `Rated code block: ${type === "up" ? "Helpful" : "Unhelpful"}`,
+				path: window.location.pathname,
+				title: document.title,
+				blockId,
+				lang,
+				snippet
+			};
+			try {
+				if (submitFeedback) {
+					await submitFeedback(payload);
+					return;
+				}
+				const endpoint = customConfig?.endpoint || "/api/feedback";
+				await fetch(endpoint, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(payload)
+				});
+			} catch (err) {
+				console.error("Failed to submit code block feedback:", err);
+			}
+		}, [
+			rated,
+			lang,
+			customConfig?.endpoint,
+			submitFeedback
+		]),
+		enabled
 	};
 }
 
 //#endregion
 //#region src/client/components/mdx/code-block.tsx
-const CopyButton = ({ copied, handleCopy }) => {
+const CopyButton = ({ copied, onCopy, className }) => {
 	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"),
+			onPress: onCopy,
+			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", className),
 			"aria-label": "Copy code",
 			children: copied ? /* @__PURE__ */ jsx(Check, { size: 20 }) : /* @__PURE__ */ jsx(Copy, { size: 20 })
 		})
 	});
 };
-const CodeBlockFeedback = ({ rated, onRate }) => {
+const CodeBlockFeedback = ({ rated, onRate, className }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-0.5 border-r border-subtle pr-1.5 mr-1",
+		className: cn("flex items-center gap-0.5 border-r border-subtle pr-1.5 mr-1", className),
 		children: [/* @__PURE__ */ jsx(Tooltip, {
 			content: rated === "up" ? "Helpful!" : "This code is helpful",
 			children: /* @__PURE__ */ jsx(Button, {
-				onPress: (() => onRate("up")),
+				onPress: () => onRate("up"),
 				isDisabled: rated !== null,
 				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", rated === "up" ? "text-emerald-500 dark:text-emerald-400" : rated === "down" ? "opacity-30 cursor-not-allowed text-muted" : "text-muted hover:text-body"),
 				"aria-label": "Mark as helpful",
 				children: /* @__PURE__ */ jsx("svg", {
 					xmlns: "http://www.w3.org/2000/svg",
+					role: "img",
+					"aria-label": "Thumb up",
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
@@ -366,12 +406,14 @@ const CodeBlockFeedback = ({ rated, onRate }) => {
 		}), /* @__PURE__ */ jsx(Tooltip, {
 			content: rated === "down" ? "Unhelpful" : "This code is unhelpful",
 			children: /* @__PURE__ */ jsx(Button, {
-				onPress: (() => onRate("down")),
+				onPress: () => onRate("down"),
 				isDisabled: rated !== null,
 				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", rated === "down" ? "text-rose-500 dark:text-rose-400" : rated === "up" ? "opacity-30 cursor-not-allowed text-muted" : "text-muted hover:text-body"),
 				"aria-label": "Mark as unhelpful",
 				children: /* @__PURE__ */ jsx("svg", {
 					xmlns: "http://www.w3.org/2000/svg",
+					role: "img",
+					"aria-label": "Thumb down",
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
@@ -385,49 +427,51 @@ const CodeBlockFeedback = ({ rated, onRate }) => {
 	});
 };
 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 { className: shikiClassName, ...cleanRest } = rest;
-	const { copied, isExpanded, setIsExpanded, isExpandable, preRef, handleCopy, shouldTruncate, isHighlighted, effectiveHighlightedHtml, effectiveTitle, showCodeBlockFeedback, rated, handleRate } = useCodeBlock(props);
+	const { children, hideCopy = false, highlightedHtml, "data-highlighted-html": dataHighlightedHtml, "data-highlighted": dataHighlighted, title, "data-title": dataTitle, lang: langProp, "data-lang": dataLang, plain = false, className: shikiClassName, lineNumbers, showLineNumbers, wordWrap, "word-wrap": wordWrapHyphen, metastring, feedbackClassName, copyButtonClassName, ...rest } = props;
+	const lang = langProp || dataLang || "";
+	const isHighlighted = dataHighlighted === "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 { copied, handleCopy } = useCopyButton();
+	const { isExpanded, isExpandable, shouldTruncate, toggle, preRef } = useExpandable({
+		children,
+		highlightedHtml: effectiveHighlightedHtml
+	});
+	const { rated, handleRate, enabled: showCodeBlockFeedback } = useCodeBlockFeedback({
+		plain,
+		lang
+	});
+	const onCopy = () => handleCopy(preRef.current?.textContent ?? "");
+	const onRate = (type) => handleRate(type, preRef.current?.textContent ?? "");
 	return /* @__PURE__ */ jsxs(CodeBlock$1, {
 		plain,
-		className: props.className,
+		className: shikiClassName,
 		children: [(effectiveTitle || !hideCopy) && /* @__PURE__ */ jsxs(CodeBlockHeader, {
 			className: cn({ "absolute top-2 left-0 w-full": !effectiveTitle }),
-			children: [/* @__PURE__ */ jsx(CodeBlockGroup, { children: effectiveTitle && /* @__PURE__ */ jsx("span", { children: effectiveTitle }) }), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-1 bg-(--color-code-bg) pl-2 z-10",
-				children: [showCodeBlockFeedback && /* @__PURE__ */ jsx(CodeBlockFeedback, {
-					rated,
-					onRate: handleRate
-				}), !hideCopy && /* @__PURE__ */ jsx(CopyButton, {
-					copied,
-					handleCopy
-				})]
-			})]
+			children: [/* @__PURE__ */ jsx(CodeBlockGroup, { children: effectiveTitle && /* @__PURE__ */ jsx("span", { children: effectiveTitle }) }), (showCodeBlockFeedback || !hideCopy) && /* @__PURE__ */ jsxs(CodeBlockActions, { children: [showCodeBlockFeedback && /* @__PURE__ */ jsx(CodeBlockFeedback, {
+				rated,
+				onRate,
+				className: feedbackClassName
+			}), !hideCopy && /* @__PURE__ */ jsx(CopyButton, {
+				copied,
+				onCopy,
+				className: copyButtonClassName
+			})] })]
 		}), /* @__PURE__ */ jsxs(CodeBlockContent, {
 			shouldTruncate,
-			children: [effectiveHighlightedHtml ? /* @__PURE__ */ jsx("div", {
+			children: [/* @__PURE__ */ jsx(CodeBlockPre, {
 				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,
+				highlightedHtml: effectiveHighlightedHtml,
+				isHighlighted,
+				className: shikiClassName,
+				...rest,
 				children
-			}), isExpandable && /* @__PURE__ */ jsx("div", {
-				className: cn({
-					"absolute bottom-0 inset-x-0 h-32 flex items-end justify-center pb-4 z-10": shouldTruncate,
-					"relative flex justify-center pb-4 pt-1 -mt-4": !shouldTruncate
-				}),
-				style: shouldTruncate ? { backgroundImage: "linear-gradient(to top, var(--color-code-bg) 10%, transparent)" } : void 0,
-				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"
-				})
+			}), /* @__PURE__ */ jsx(CodeBlockExpand, {
+				isExpandable,
+				shouldTruncate,
+				isExpanded,
+				onToggle: toggle
 			})]
 		})]
 	});
@@ -435,15 +479,15 @@ function CodeBlock(props) {
 
 //#endregion
 //#region src/client/components/mdx/image.tsx
-const Image = ({ src, alt, title, theme, className, ...props }) => {
+const Image = ({ src, alt, title, theme, className, figureClassName, figureInnerClassName, figcaptionClassName, ...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",
+		className: cn("my-6 sm:my-8 flex flex-col items-center justify-center group not-prose", figureClassName),
 		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",
+			className: cn("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", figureInnerClassName),
 			children: /* @__PURE__ */ jsx(Image$1, {
 				src,
 				alt: alt || "",
@@ -454,7 +498,7 @@ const Image = ({ src, alt, title, theme, className, ...props }) => {
 				...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",
+			className: cn("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", figcaptionClassName),
 			children: caption
 		})]
 	});
@@ -466,7 +510,7 @@ const ImageComponents = {
 
 //#endregion
 //#region src/client/components/mdx/card.tsx
-function Card({ className, title, icon, href, children, ...props }) {
+function Card({ className, title, icon, href, children, headerClassName, iconClassName, titleClassName, bodyClassName, ...props }) {
 	const cardRef = useRef(null);
 	const handleMouseMove = (e) => {
 		if (!cardRef.current) return;
@@ -477,7 +521,7 @@ function Card({ className, title, icon, href, children, ...props }) {
 		cardRef.current.style.setProperty("--mouse-y", `${y}px`);
 	};
 	const Wrapper = href ? "a" : "div";
-	const spotlightColor = "var(--color-primary-500, #eb5828)";
+	const spotlightColor = "var(--color-primary-500)";
 	return /* @__PURE__ */ jsxs(Wrapper, {
 		ref: cardRef,
 		href,
@@ -500,17 +544,17 @@ function Card({ className, title, icon, href, children, ...props }) {
 				}
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "relative z-10 flex items-center gap-3",
+				className: cn("relative z-10 flex items-center gap-3", headerClassName),
 				children: [icon && /* @__PURE__ */ jsx("div", {
-					className: cn("shrink-0 transition-transform duration-500 group-hover:rotate-15 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]"),
+					className: cn("shrink-0 transition-transform duration-500 group-hover:rotate-15 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]", iconClassName),
 					children: icon
 				}), title && /* @__PURE__ */ jsx("h3", {
-					className: "font-semibold text-base m-0 leading-none text-body",
+					className: cn("font-semibold text-base m-0 leading-none text-body", titleClassName),
 					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",
+				className: cn("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", bodyClassName),
 				children
 			})
 		]
@@ -538,7 +582,7 @@ function Cards({ children, className, cols = 2, ...props }) {
 * 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 }) {
+function LastUpdated({ date, className }) {
 	if (!date) return null;
 	const d = new Date(date);
 	if (Number.isNaN(d.getTime())) return null;
@@ -548,7 +592,7 @@ function LastUpdated({ date }) {
 		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",
+		className: cn("mt-16 pt-6 border-t border-subtle flex items-center justify-between text-xs text-muted select-none", className),
 		children: [/* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("span", {
 			className: "italic",
 			children: ["Last updated on ", formattedDate]
@@ -672,18 +716,17 @@ const VARIANT_DEFAULT_ICON = {
 	warning: AlertTriangle,
 	danger: AlertCircle
 };
-function TimelineRoot({ children, className, compact = false, ...props }) {
+function TimelineRoot({ children, className, compact = false, connectorClassName, ...props }) {
 	return /* @__PURE__ */ jsxs("ol", {
-		role: "list",
 		className: cn("relative my-8 ms-3", compact ? "space-y-3" : "space-y-7", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			className: "pointer-events-none absolute top-3 bottom-3 start-[5.5px] w-px bg-subtle"
+			className: cn("pointer-events-none absolute top-3 bottom-3 start-[5.5px] w-px bg-subtle", connectorClassName)
 		}), children]
 	});
 }
-function TimelineItem({ date, title, badge, icon, variant = "primary", locale, className, children, ...props }) {
+function TimelineItem({ date, title, badge, icon, variant = "primary", locale, className, children, dotClassName, headerClassName, timeClassName, badgeClassName, titleClassName, bodyClassName, ...props }) {
 	const palette = VARIANT_PALETTE[variant] ?? VARIANT_PALETTE.primary;
 	const formatted = formatDate(date, locale);
 	const badgeCfg = normalizeBadge(badge);
@@ -707,26 +750,26 @@ function TimelineItem({ date, title, badge, icon, variant = "primary", locale, c
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				...a11yProps,
-				className: cn("absolute start-0 top-1 flex items-center justify-center w-3 h-3 rounded-full", "bg-surface border-2 shadow-sm", palette.ring),
+				className: cn("absolute start-0 top-1 flex items-center justify-center w-3 h-3 rounded-full", "bg-surface border-2 shadow-sm", palette.ring, dotClassName),
 				children: dot
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 flex-wrap mb-1",
+				className: cn("flex items-center gap-2 flex-wrap mb-1", headerClassName),
 				children: [formatted && /* @__PURE__ */ jsx("time", {
 					dateTime: date instanceof Date ? date.toISOString() : new Date(date).toISOString(),
-					className: "text-[11px] uppercase tracking-wider font-mono tabular-nums text-muted select-none",
+					className: cn("text-[11px] uppercase tracking-wider font-mono tabular-nums text-muted select-none", timeClassName),
 					children: formatted
 				}), badgeCfg && /* @__PURE__ */ jsx("span", {
-					className: cn("inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border", palette.badgeBg, palette.badgeText, palette.badgeBorder),
+					className: cn("inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border", palette.badgeBg, palette.badgeText, palette.badgeBorder, badgeClassName),
 					children: badgeCfg.text
 				})]
 			}),
 			/* @__PURE__ */ jsx("h3", {
-				className: "text-base font-semibold text-body m-0 leading-snug",
+				className: cn("text-base font-semibold text-body m-0 leading-snug", titleClassName),
 				children: title
 			}),
 			children && /* @__PURE__ */ jsx("div", {
-				className: "mt-2 text-[0.9rem] leading-[1.6] text-paragraph prose prose-neutral dark:prose-invert max-w-none [&>p]:m-0 [&>p+p]:mt-2 [&_a]:text-primary-500 [&_a]:no-underline hover:[&_a]:underline",
+				className: cn("mt-2 text-[0.9rem] leading-[1.6] text-paragraph prose prose-neutral dark:prose-invert max-w-none [&>p]:m-0 [&>p+p]:mt-2 [&_a]:text-primary-500 [&_a]:no-underline hover:[&_a]:underline", bodyClassName),
 				children
 			})
 		]
@@ -750,4 +793,4 @@ const mdx_components_default = {
 };
 
 //#endregion
-export { copyToClipboard as i, Timeline as n, useCodeBlock as r, mdx_components_default as t };
+export { useCopyButton as a, useExpandable as i, Timeline as n, copyToClipboard as o, useCodeBlockFeedback as r, mdx_components_default as t };