boltdocs 3.2.1 → 3.3.0

package/dist/{image-C4TlpMHn.cjs → image-Hnaa2bJd.cjs}

@@ -3,12 +3,13 @@
  * Copyright (c) 2026 Jesus Alcala
  * Licensed under the MIT License.
  */
-const require_link = require('./link-D1Gjkb-2.cjs');
+const require_router = require('./router-C3kygdRK.cjs');
+const require_link = require('./link-vZjmD-es.cjs');
 let react = require("react");
-react = require_link.__toESM(react);
+react = require_router.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
-react_aria_components = require_link.__toESM(react_aria_components);
+react_aria_components = require_router.__toESM(react_aria_components);
 
 //#region src/client/app/theme-context.tsx
 const THEME_CONTEXT_SYMBOL = Symbol.for("__BDOCS_THEME_CONTEXT__");
@@ -91,11 +92,11 @@ function useTheme() {
 
 //#endregion
 //#region src/client/components/primitives/heading.tsx
-const Heading = react.forwardRef(({ level, id, children, className, showAnchor = true, anchorPosition = "wrap", anchorIcon, anchorClassName, ...props }, ref) => {
+const Heading = react.forwardRef(({ level, id, children, className, showAnchor = true, anchorPosition = "wrap", anchorIcon, anchorClassName, anchorIconClassName, ...props }, ref) => {
 	const Tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`;
 	const hasAnchor = !!(id && showAnchor);
 	const defaultIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_link.Link$1, {
-		className: require_link.cn("transition-all duration-200", anchorPosition === "wrap" ? "opacity-0 ml-2 text-muted/50 group-hover:text-primary-500 group-hover:opacity-100" : "text-muted/50 hover:text-primary-500"),
+		className: require_link.cn("transition-all duration-200", anchorPosition === "wrap" ? "opacity-0 ml-2 text-muted/50 group-hover:text-primary-500 group-hover:opacity-100" : "text-muted/50 hover:text-primary-500", anchorIconClassName),
 		size: 16
 	});
 	const icon = anchorIcon ?? defaultIcon;
@@ -133,6 +134,66 @@ const Heading = react.forwardRef(({ level, id, children, className, showAnchor =
 });
 Heading.displayName = "Heading";
 
+//#endregion
+//#region src/client/components/primitives/callout.tsx
+/**
+* Style-neutral callout primitives.
+*
+* Own structure and expose state via `data-callout-root` / `data-variant`.
+* No colors, borders, or sizes are baked in — the theme owns all visuals.
+*/
+function Callout({ children, variant = "note", title, icon, className, iconClassName, titleClassName, bodyClassName, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CalloutRoot, {
+		variant,
+		className,
+		...props,
+		children: [icon != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalloutIcon, {
+			className: iconClassName,
+			children: icon
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_link.cn("flex-1", bodyClassName),
+			children: [title != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalloutTitle, {
+				className: titleClassName,
+				children: title
+			}), children]
+		})]
+	});
+}
+function CalloutRoot({ variant, children, className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-callout-root": true,
+		"data-variant": variant,
+		className: require_link.cn("flex gap-4", className),
+		...props,
+		children
+	});
+}
+function CalloutIcon({ children, className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_link.cn("shrink-0", className),
+		...props,
+		children
+	});
+}
+function CalloutTitle({ children, className, as: Tag = "div", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		className,
+		...props,
+		children
+	});
+}
+function CalloutBody({ children, className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		...props,
+		children
+	});
+}
+Callout.Root = CalloutRoot;
+Callout.Icon = CalloutIcon;
+Callout.Title = CalloutTitle;
+Callout.Body = CalloutBody;
+
 //#endregion
 //#region src/client/components/primitives/code-block.tsx
 /**
@@ -168,6 +229,16 @@ function CodeBlockGroup({ children, className, ...props }) {
 	});
 }
 /**
+* Trailing action area in the header (copy, feedback, custom actions).
+*/
+function CodeBlockActions({ children, className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_link.cn("flex items-center gap-1 bg-(--color-code-bg) pl-2 z-10", className),
+		...props,
+		children
+	});
+}
+/**
 * Content area of the code block.
 * Wraps the `<pre>` or `<div>` containing the code.
 */
@@ -178,9 +249,53 @@ function CodeBlockContent({ className, children, shouldTruncate = false, ...prop
 		children
 	});
 }
+/**
+* The code area itself. Renders pre-rendered Shiki HTML when `highlightedHtml`
+* is provided, otherwise a plain `<pre>` with the default code styling.
+*/
+function CodeBlockPre({ className, highlightedHtml, isHighlighted = false, ref, children, ...props }) {
+	if (highlightedHtml) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: require_link.cn("shiki-wrapper overflow-x-auto", className),
+		dangerouslySetInnerHTML: { __html: highlightedHtml },
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		ref,
+		className: require_link.cn("m-0 rounded-none border-none bg-transparent", "text-[0.875rem] leading-[1.6] overflow-x-auto", {
+			"p-0 [&>code]:grid [&>code]:p-5 [&>code]:bg-transparent [&>code]:whitespace-pre": isHighlighted,
+			"p-5": !isHighlighted
+		}, className),
+		...props,
+		children
+	});
+}
+/**
+* Expand / collapse region for long code blocks. Renders nothing when the
+* block is not expandable.
+*/
+function CodeBlockExpand({ className, buttonClassName, isExpandable, shouldTruncate, isExpanded, onToggle, expandLabel = "Expand code", collapseLabel = "Show less", expandIcon, ...props }) {
+	if (!isExpandable) return null;
+	return /* @__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
+		}, className),
+		style: shouldTruncate ? { backgroundImage: "linear-gradient(to top, var(--color-code-bg) 10%, transparent)" } : void 0,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Button, {
+			onPress: onToggle,
+			className: require_link.cn("inline-flex items-center gap-2 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", buttonClassName),
+			children: [expandIcon, isExpanded ? collapseLabel : expandLabel]
+		})
+	});
+}
 CodeBlock.Header = CodeBlockHeader;
 CodeBlock.Group = CodeBlockGroup;
+CodeBlock.Actions = CodeBlockActions;
 CodeBlock.Content = CodeBlockContent;
+CodeBlock.Pre = CodeBlockPre;
+CodeBlock.Expand = CodeBlockExpand;
 
 //#endregion
 //#region src/client/components/primitives/tooltip.tsx
@@ -188,7 +303,7 @@ CodeBlock.Content = CodeBlockContent;
 * Modern, accessible Tooltip component built with React Aria Components.
 * Featuring glassmorphism, animations, and smart positioning.
 */
-function TooltipContent({ className, children, ...props }) {
+function TooltipContent({ className, arrowClassName, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Tooltip, {
 		...props,
 		offset: 8,
@@ -197,7 +312,7 @@ function TooltipContent({ className, children, ...props }) {
 			width: 8,
 			height: 8,
 			viewBox: "0 0 8 8",
-			className: "fill-bg-surface/90 stroke-border-subtle group-data-[placement=bottom]:rotate-180 group-data-[placement=left]:-rotate-90 group-data-[placement=right]:rotate-90",
+			className: require_link.cn("fill-bg-surface/90 stroke-border-subtle group-data-[placement=bottom]:rotate-180 group-data-[placement=left]:-rotate-90 group-data-[placement=right]:rotate-90", arrowClassName),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: "Arrow" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M0 0 L4 4 L8 0" })]
 		}) }), typeof children === "function" ? children(values) : children] })
 	});
@@ -221,28 +336,73 @@ Tooltip.Content = TooltipContent;
 * A responsive image component that automatically supports dark and light theme variations
 * via the `theme` prop.
 */
-function Image({ theme, className, ...props }) {
+function Image({ theme, className, src, alt, ...props }) {
 	const { resolvedTheme } = useTheme();
+	const config = require_link.useConfig();
 	if (theme && theme !== resolvedTheme) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		className: require_link.cn("max-w-full h-auto rounded-lg my-8", className),
-		...props
+		alt: alt ?? "",
+		...props,
+		src: typeof src === "string" ? require_link.resolvePublicAssetUrl(src, config.base) : src
 	});
 }
 
 //#endregion
+Object.defineProperty(exports, 'Callout', {
+  enumerable: true,
+  get: function () {
+    return Callout;
+  }
+});
+Object.defineProperty(exports, 'CalloutBody', {
+  enumerable: true,
+  get: function () {
+    return CalloutBody;
+  }
+});
+Object.defineProperty(exports, 'CalloutIcon', {
+  enumerable: true,
+  get: function () {
+    return CalloutIcon;
+  }
+});
+Object.defineProperty(exports, 'CalloutRoot', {
+  enumerable: true,
+  get: function () {
+    return CalloutRoot;
+  }
+});
+Object.defineProperty(exports, 'CalloutTitle', {
+  enumerable: true,
+  get: function () {
+    return CalloutTitle;
+  }
+});
 Object.defineProperty(exports, 'CodeBlock', {
   enumerable: true,
   get: function () {
     return CodeBlock;
   }
 });
+Object.defineProperty(exports, 'CodeBlockActions', {
+  enumerable: true,
+  get: function () {
+    return CodeBlockActions;
+  }
+});
 Object.defineProperty(exports, 'CodeBlockContent', {
   enumerable: true,
   get: function () {
     return CodeBlockContent;
   }
 });
+Object.defineProperty(exports, 'CodeBlockExpand', {
+  enumerable: true,
+  get: function () {
+    return CodeBlockExpand;
+  }
+});
 Object.defineProperty(exports, 'CodeBlockGroup', {
   enumerable: true,
   get: function () {
@@ -255,6 +415,12 @@ Object.defineProperty(exports, 'CodeBlockHeader', {
     return CodeBlockHeader;
   }
 });
+Object.defineProperty(exports, 'CodeBlockPre', {
+  enumerable: true,
+  get: function () {
+    return CodeBlockPre;
+  }
+});
 Object.defineProperty(exports, 'Heading', {
   enumerable: true,
   get: function () {