boltdocs 3.2.2 → 3.3.1

package/dist/{mdx-CD-tSjRG.cjs → mdx-D0Absdq5.cjs}

@@ -3,15 +3,16 @@
  * Copyright (c) 2026 Jesus Alcala
  * Licensed under the MIT License.
  */
-const require_link = require('./link-D1Gjkb-2.cjs');
-const require_image = require('./image-C4TlpMHn.cjs');
+const require_router = require('./router-C3kygdRK.cjs');
+const require_link = require('./link-vZjmD-es.cjs');
+const require_image = require('./image-Hnaa2bJd.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
 
 //#region src/client/components/mdx/field.tsx
-const Field = ({ children, name, type, description, required }) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: require_link.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center gap-2",
@@ -25,7 +26,7 @@ const Field = ({ children, name, type, description, required }) => /* @__PURE__
 					children: type
 				}),
 				required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-xs text-rose-500 font-semibold",
+					className: "text-xs text-danger-500 font-semibold",
 					children: "required"
 				})
 			]
@@ -132,8 +133,8 @@ const Typographics = {
 
 //#endregion
 //#region src/client/components/mdx/table.tsx
-const Table = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: "my-6 w-full overflow-x-auto rounded-xl border border-subtle bg-surface/30",
+const Table = ({ wrapperClassName, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: require_link.cn("my-6 w-full overflow-x-auto rounded-xl border border-subtle bg-surface/30", wrapperClassName),
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
 		className: "w-full border-collapse text-left text-sm",
 		...props
@@ -167,62 +168,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: require_link.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: require_link.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: require_link.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: require_link.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: require_link.AlertCircle,
 		defaultTitle: "Danger"
 	}
 };
-function Callout({ children, className = "", variant = "note", title, ...props }) {
-	const styles = variantStyles[variant] || variantStyles.note;
-	const Icon = styles.icon;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_link.cn("my-6 flex gap-4 p-4 rounded-xl border-2", styles.container, className),
-		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_link.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__ */ (0, react_jsx_runtime.jsx)(require_image.Callout, {
+		variant,
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_link.cn("pt-0.5", meta.accent, iconClassName),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "w-5 h-5 stroke-2" })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex-1 text-[0.875rem] leading-[1.6]",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_link.cn("font-bold text-sm mb-1", styles.titleText),
-				children: title || styles.defaultTitle
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "prose prose-neutral dark:prose-invert max-w-none [&>p]:m-0 [&>p+p]:mt-2",
-				children
-			})]
-		})]
+		}),
+		title: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_link.cn("font-bold text-sm text-body", meta.accent, titleClassName),
+			children: title || meta.defaultTitle
+		}),
+		className: require_link.cn("my-6 rounded-xl border-2 text-body prose prose-neutral dark:prose-invert max-w-none", meta.container, className),
+		bodyClassName: require_link.cn("text-[0.875rem] leading-[1.6]", bodyClassName),
+		...props,
+		children
 	});
 }
 
@@ -251,109 +250,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] = (0, react.useState)(false);
-	const [isExpanded, setIsExpanded] = (0, react.useState)(false);
-	const [isExpandable, setIsExpandable] = (0, react.useState)(false);
-	const [rated, setRated] = (0, react.useState)(null);
-	const preRef = (0, react.useRef)(null);
 	const timerRef = (0, react.useRef)(null);
-	const customConfig = require_link.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 = (0, react.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
-	]);
 	(0, react.useEffect)(() => {
 		return () => {
 			if (timerRef.current) clearTimeout(timerRef.current);
 		};
 	}, []);
-	const handleCopy = (0, react.useCallback)(async () => {
-		copyToClipboard(preRef.current?.textContent ?? "");
-		setCopied(true);
-		if (timerRef.current) clearTimeout(timerRef.current);
-		timerRef.current = setTimeout(() => {
-			setCopied(false);
-			timerRef.current = null;
-		}, 2e3);
-	}, []);
-	(0, react.useEffect)(() => {
-		const lines = (preRef.current?.textContent ?? "").trim().split("\n").length;
-		setIsExpandable(lines > 6);
-	}, [props.children, props.highlightedHtml]);
 	return {
 		copied,
+		handleCopy: (0, react.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] = (0, react.useState)(false);
+	const [isExpandable, setIsExpandable] = (0, react.useState)(false);
+	const preRef = (0, react.useRef)(null);
+	const shouldTruncate = isExpandable && !isExpanded;
+	const toggle = () => setIsExpanded((prev) => !prev);
+	(0, react.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] = (0, react.useState)(null);
+	const customConfig = require_link.useConfig().integrations?.feedback?.custom;
+	const enabled = !!(customConfig?.enabled && !plain);
+	return {
 		rated,
-		handleRate
+		handleRate: (0, react.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__ */ (0, react_jsx_runtime.jsx)(require_image.Tooltip, {
 		content: copied ? "Copied!" : "Copy code",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
-			onPress: handleCopy,
-			className: require_link.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: require_link.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__ */ (0, react_jsx_runtime.jsx)(require_link.Check, { size: 20 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_link.Copy, { size: 20 })
 		})
 	});
 };
-const CodeBlockFeedback = ({ rated, onRate }) => {
+const CodeBlockFeedback = ({ rated, onRate, className }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-0.5 border-r border-subtle pr-1.5 mr-1",
+		className: require_link.cn("flex items-center gap-0.5 border-r border-subtle pr-1.5 mr-1", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.Tooltip, {
 			content: rated === "up" ? "Helpful!" : "This code is helpful",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
-				onPress: (() => onRate("up")),
+				onPress: () => onRate("up"),
 				isDisabled: rated !== null,
 				className: require_link.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__ */ (0, react_jsx_runtime.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 +407,14 @@ const CodeBlockFeedback = ({ rated, onRate }) => {
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.Tooltip, {
 			content: rated === "down" ? "Unhelpful" : "This code is unhelpful",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
-				onPress: (() => onRate("down")),
+				onPress: () => onRate("down"),
 				isDisabled: rated !== null,
 				className: require_link.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__ */ (0, react_jsx_runtime.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 +428,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__ */ (0, react_jsx_runtime.jsxs)(require_image.CodeBlock, {
 		plain,
-		className: props.className,
+		className: shikiClassName,
 		children: [(effectiveTitle || !hideCopy) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_image.CodeBlockHeader, {
 			className: require_link.cn({ "absolute top-2 left-0 w-full": !effectiveTitle }),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.CodeBlockGroup, { children: effectiveTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: effectiveTitle }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-1 bg-(--color-code-bg) pl-2 z-10",
-				children: [showCodeBlockFeedback && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeBlockFeedback, {
-					rated,
-					onRate: handleRate
-				}), !hideCopy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, {
-					copied,
-					handleCopy
-				})]
-			})]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.CodeBlockGroup, { children: effectiveTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: effectiveTitle }) }), (showCodeBlockFeedback || !hideCopy) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_image.CodeBlockActions, { children: [showCodeBlockFeedback && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeBlockFeedback, {
+				rated,
+				onRate,
+				className: feedbackClassName
+			}), !hideCopy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, {
+				copied,
+				onCopy,
+				className: copyButtonClassName
+			})] })]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_image.CodeBlockContent, {
 			shouldTruncate,
-			children: [effectiveHighlightedHtml ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("pre", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.CodeBlockPre, {
 				ref: preRef,
-				className: require_link.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__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_link.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__ */ (0, react_jsx_runtime.jsx)(react_aria_components.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__ */ (0, react_jsx_runtime.jsx)(require_image.CodeBlockExpand, {
+				isExpandable,
+				shouldTruncate,
+				isExpanded,
+				onToggle: toggle
 			})]
 		})]
 	});
@@ -435,15 +480,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 } = require_image.useTheme();
 	if (!src) return null;
 	if (theme !== themeContext) return null;
 	const caption = title || alt;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
-		className: "my-6 sm:my-8 flex flex-col items-center justify-center group not-prose",
+		className: require_link.cn("my-6 sm:my-8 flex flex-col items-center justify-center group not-prose", figureClassName),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.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: require_link.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__ */ (0, react_jsx_runtime.jsx)(require_image.Image, {
 				src,
 				alt: alt || "",
@@ -454,7 +499,7 @@ const Image = ({ src, alt, title, theme, className, ...props }) => {
 				...props
 			})
 		}), caption && /* @__PURE__ */ (0, react_jsx_runtime.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: require_link.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 +511,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 = (0, react.useRef)(null);
 	const handleMouseMove = (e) => {
 		if (!cardRef.current) return;
@@ -477,7 +522,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__ */ (0, react_jsx_runtime.jsxs)(Wrapper, {
 		ref: cardRef,
 		href,
@@ -500,17 +545,17 @@ function Card({ className, title, icon, href, children, ...props }) {
 				}
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "relative z-10 flex items-center gap-3",
+				className: require_link.cn("relative z-10 flex items-center gap-3", headerClassName),
 				children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: require_link.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: require_link.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__ */ (0, react_jsx_runtime.jsx)("h3", {
-					className: "font-semibold text-base m-0 leading-none text-body",
+					className: require_link.cn("font-semibold text-base m-0 leading-none text-body", titleClassName),
 					children: title
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.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: require_link.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 +583,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 +593,7 @@ function LastUpdated({ date }) {
 		day: "numeric"
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "mt-16 pt-6 border-t border-subtle flex items-center justify-between text-xs text-muted select-none",
+		className: require_link.cn("mt-16 pt-6 border-t border-subtle flex items-center justify-between text-xs text-muted select-none", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "italic",
 			children: ["Last updated on ", formattedDate]
@@ -672,18 +717,17 @@ const VARIANT_DEFAULT_ICON = {
 	warning: require_link.AlertTriangle,
 	danger: require_link.AlertCircle
 };
-function TimelineRoot({ children, className, compact = false, ...props }) {
+function TimelineRoot({ children, className, compact = false, connectorClassName, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ol", {
-		role: "list",
 		className: require_link.cn("relative my-8 ms-3", compact ? "space-y-3" : "space-y-7", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"aria-hidden": "true",
-			className: "pointer-events-none absolute top-3 bottom-3 start-[5.5px] w-px bg-subtle"
+			className: require_link.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 +751,26 @@ function TimelineItem({ date, title, badge, icon, variant = "primary", locale, c
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				...a11yProps,
-				className: require_link.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: require_link.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2 flex-wrap mb-1",
+				className: require_link.cn("flex items-center gap-2 flex-wrap mb-1", headerClassName),
 				children: [formatted && /* @__PURE__ */ (0, react_jsx_runtime.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: require_link.cn("text-[11px] uppercase tracking-wider font-mono tabular-nums text-muted select-none", timeClassName),
 					children: formatted
 				}), badgeCfg && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: require_link.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: require_link.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__ */ (0, react_jsx_runtime.jsx)("h3", {
-				className: "text-base font-semibold text-body m-0 leading-snug",
+				className: require_link.cn("text-base font-semibold text-body m-0 leading-snug", titleClassName),
 				children: title
 			}),
 			children && /* @__PURE__ */ (0, react_jsx_runtime.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: require_link.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
 			})
 		]
@@ -768,9 +812,21 @@ Object.defineProperty(exports, 'mdx_components_default', {
     return mdx_components_default;
   }
 });
-Object.defineProperty(exports, 'useCodeBlock', {
+Object.defineProperty(exports, 'useCodeBlockFeedback', {
+  enumerable: true,
+  get: function () {
+    return useCodeBlockFeedback;
+  }
+});
+Object.defineProperty(exports, 'useCopyButton', {
+  enumerable: true,
+  get: function () {
+    return useCopyButton;
+  }
+});
+Object.defineProperty(exports, 'useExpandable', {
   enumerable: true,
   get: function () {
-    return useCodeBlock;
+    return useExpandable;
   }
 });

package/dist/native-BNCY7PRF.cjs

@@ -0,0 +1,6 @@
+/**
+ * Boltdocs - https://boltdocs.vercel.app
+ * Copyright (c) 2026 Jesus Alcala
+ * Licensed under the MIT License.
+ */
+const e=require(`./chunk-D1Md3oWO.cjs`),t=require(`./utils-ej6_SjIZ.cjs`),n=require(`./errors-vKw8CkiX.cjs`),r=require(`./cache-CJE9nWLE.cjs`);let i=require(`node:path`);i=e.r(i);function a(e){return(e||``).replace(/\\/g,`/`).split(`/`).filter(Boolean)}function o(e,t){return t.length>0&&t.every((t,n)=>e[n]===t)}function s(e,t){let n=t?.versions;if(!n)return{publicSegments:[],consumed:0};let r=n.prefix||``,i=a(r);for(let t of n.versions){let n=a(t.path);if(n.length===0)continue;if(o(e,n))return{version:t.path,publicSegments:n,consumed:n.length};let s=[...i,...n];if(o(e,s))return{version:t.path,publicSegments:s,consumed:s.length};if(r&&!r.includes(`/`)&&e[0]===`${r}${t.path}`)return{version:t.path,publicSegments:[`${r}${t.path}`],consumed:1}}return{publicSegments:[],consumed:0}}function c(e,n,r,a,o){let c=i.default.relative(n,e).replace(/\\/g,`/`),l=c.split(`/`).filter(Boolean),u,d,f,p,m=s(l,a);if(d=m.version,l=l.slice(m.consumed),a?.i18n&&l.length>0){let e=l[0];(Array.isArray(a.i18n.locales)?a.i18n.locales.includes(e):a.i18n.locales[e])&&(u=e,l=l.slice(1))}if(l.length>0){let e=l[0].match(/^\((.+)\)$/);e&&(f=e[1].toLowerCase(),l=l.slice(1))}if(l.length>0){let e=l[0].match(/^\[(.+)\]$/);e&&(p=e[1].toLowerCase(),l=l.slice(1))}let h=[...l],g=l.map(e=>t.h(e)).join(`/`),_=o?o.startsWith(`/`)?o:`/${o}`:t.a(g||`index.md`),v=r.replace(/\\/g,`/`).replace(/\/$/,``)||`/`,y=[...m.publicSegments,u,!o&&!p?f:void 0].filter(Boolean),b=(p?[...y,p,_]:[v,...y,_]).join(`/`).replace(/\\/g,`/`).replace(/\/+/g,`/`).replace(/\/$/,``)||`/`;return{relativePath:c,finalPath:b.startsWith(`/`)?b:`/${b}`,remainingParts:h,locale:u,version:d,inferredTab:f,subRouteGroup:void 0,collection:p}}const l=[`og:`,`twitter:`,`article:`,`music:`,`video:`,`profile:`,`book:`],u=[`noindex`,`robots`,`canonical`,`keywords`,`author`];function d(e){let t={};e.seo&&typeof e.seo==`object`&&Object.assign(t,e.seo);for(let n of Object.keys(e))(u.includes(n)||l.some(e=>n.startsWith(e)))&&(t[n]=e[n]);return e.hidden===!0&&t.noindex===void 0&&(t.noindex=!0),Object.keys(t).length>0?t:void 0}function f(e){return{title:e.title?t.p(String(e.title)):void 0,badge:e.badge?t.p(String(e.badge)):void 0,description:e.description?t.p(String(e.description)):void 0}}function p(e,n){if(e.groupPosition!==void 0)return e.groupPosition;if(e.sidebarPosition!==void 0)return e.sidebarPosition;if(n.remainingParts.length<=1)return;let r=t.i(n.remainingParts[n.remainingParts.length-2]);return r===void 0?void 0:Number(r)}function m(e){let r;try{r=decodeURIComponent(e)}catch{throw t.l(`SECURITY_ERROR`,`Invalid encoding in path`,{file:e}),new n.t(`Security breach: Invalid characters or encoding in path`)}if(r.length>260)throw new n.n(`Path length exceeds limit`);return r}function h(e,r){let a=e.replace(/\\/g,`/`),o=r.replace(/\\/g,`/`),s=m(a),c=i.default.resolve(s),l=i.default.resolve(o);if(i.default.sep===`/`){let e=e=>{let t=e.replace(/\\/g,`/`);return/^[a-zA-Z]:/.test(t)&&(t=t.replace(/^[a-zA-Z]:/,``)),i.default.resolve(t)};c=e(s),l=e(o)}let u=i.default.relative(l,c).replace(/\\/g,`/`);if(u.startsWith(`../`)||u!==`.`&&!t._.test(u))throw new n.n(`Security breach: File is outside of docs directory, contains null bytes, or invalid path characters: ${i.default.basename(s)}`);return{normalizedFile:a,normalizedDocsDir:o,relativePath:u}}async function g(e,n,a,o,s,l){let u=l??r.t,{normalizedFile:m,normalizedDocsDir:g}=h(e,a),_=n.frontmatter??{},v=c(i.default.resolve(m),i.default.resolve(g),o,s,_.permalink),y=f(_),b=d(_),x=i.default.basename(v.relativePath),S=t.h(x),C=v.remainingParts.map(e=>t.h(e)).slice(0,-1),w=/^_?index\.mdx?$/.test(S),T=_.sidebarPosition??t.i(x),E=C.join(`/`),D=_.description?t.p(String(_.description)).trim():n.description,O={route:{path:v.finalPath,componentPath:e,filePath:v.relativePath,title:y.title||t.h(i.default.basename(m,i.default.extname(m))),description:D,sidebarPosition:T,headings:n.headings,locale:v.locale,version:v.version,badge:y.badge,icon:_.icon?String(_.icon):void 0,tab:v.inferredTab,subRouteGroup:v.subRouteGroup,slugParts:C,_content:n.plainText,_rawContent:n.content,date:_.date,lastUpdated:_.lastUpdated,category:_.category,order:_.order,sidebarLabel:_.sidebarLabel,sidebarHidden:_.sidebarHidden||_.hidden,seo:b,frontmatter:_,collection:v.collection,tags:_.tags,author:typeof _.author==`string`?_.author:_.author?.name,draft:_.draft,excerpt:_.excerpt,coverImage:_.coverImage||_.cover},relativeDir:v.collection?void 0:E||void 0,isGroupIndex:w,inferredTab:v.inferredTab,inferredCollection:v.collection,groupMeta:w?{title:_.groupTitle||y.title||(C.length>0?t.t(C[C.length-1]):``),position:p(_,v),icon:_.icon?String(_.icon):void 0}:void 0,inferredGroupPosition:v.remainingParts.length>1?t.i(v.remainingParts[v.remainingParts.length-2]):void 0};return await u.set(e,O),O}Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}});