ardo 3.2.1 → 3.4.0

package/dist/{ui-3grzJSsq.js → ui-AGPGBunC.js}

@@ -1,66 +1,230 @@
-import { a as ArdoProvider, l as useArdoPageData, o as ArdoSiteConfigProvider, s as useArdoConfig, u as useArdoSidebar } from "./sidebar-utils-1Skqle1Q.js";
-import { c as TwitterIcon, i as LinkedinIcon, n as GithubIcon, o as NpmIcon, u as YoutubeIcon } from "./brand-icons-DLJKqTun.js";
-import { A as home, F as footerContainer, G as SearchIcon, H as MessageCircleIcon, K as SunIcon, L as footerLink, M as layout, O as ArdoLayout, U as MonitorIcon, V as ChevronDownIcon, W as MoonIcon, j as homeMain, q as XIcon, z as footerPrimary } from "./DocPage-CIBiCAxZ.js";
-import React, { Children, cloneElement, createContext, isValidElement, use, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { a as ArdoProvider, d as useArdoSidebar, l as useArdoContexts, o as ArdoSiteConfigProvider, s as useArdoConfig, u as useArdoPageData } from "./sidebar-utils-C06DJsx4.js";
+import { $ as footerLink, A as home, B as MonitorIcon, F as ChevronDownIcon, G as SunIcon, H as PackageIcon, I as CodeIcon, K as WrenchIcon, L as FileCodeIcon, M as layout, N as BookOpenIcon, O as ArdoLayout, P as BoxIcon, R as FileTextIcon, U as SearchIcon, V as MoonIcon, W as SettingsIcon, Y as footerArdoLink, Z as footerContainer, j as homeMain, nt as footerPrimary, q as XIcon, tt as footerOwl, z as MessageCircleIcon } from "./DocPage-Dy7OrCP2.js";
+import { c as TwitterIcon, i as LinkedinIcon, n as GithubIcon, o as NpmIcon, u as YoutubeIcon } from "./brand-icons-Di8w0Nu9.js";
+import React, { Children, cloneElement, createContext, isValidElement, use, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Link, NavLink, Outlet, useLocation, useNavigate } from "react-router";
+import { Link, NavLink, Outlet, isRouteErrorResponse, useLocation, useMatches, useNavigate, useRouteError } from "react-router";
+import "./assets/src/ui/components/HeaderSearch.css.ts.vanilla-KAo_Mlc-.css";
 import MiniSearch from "minisearch";
 import searchDocs from "virtual:ardo/search-index";
-import "./assets/src/ui/components/Search.css.ts.vanilla-BYpWHzky.css";
+import "./assets/src/ui/components/Search.css.ts.vanilla-NQZH1eLo.css";
 import { createPortal } from "react-dom";
 import "./assets/src/ui/components/ThemeToggle.css.ts.vanilla---sSUELC.css";
-import "./assets/src/ui/Header.css.ts.vanilla-8QL0Jzgk.css";
+import "./assets/src/ui/Header.css.ts.vanilla-DEcLj8r0.css";
 import "./assets/src/ui/Nav.css.ts.vanilla-CsAQjogy.css";
-import "./assets/src/ui/Sidebar.css.ts.vanilla-D70qXTEr.css";
+import "./assets/src/ui/Sidebar.css.ts.vanilla-IxNEQEBv.css";
 import "./assets/src/ui/theme/animations.css.ts.vanilla-D6ImVUKy.css";
-import "./assets/src/ui/components/Features.css.ts.vanilla-D-pNXM9Q.css";
-import "./assets/src/ui/components/Hero.css.ts.vanilla-DHJVZ6GX.css";
-//#region src/ui/components/Search.css.ts
-var search = "wxcdiv0";
-var searchField = "wxcdiv1";
-var searchFooter = "wxcdiv9";
-var searchInput = "wxcdiv2";
-var searchKbd = "wxcdivb";
-var searchNoResults = "wxcdiv8";
-var searchPopover = "wxcdiv3";
-var searchResult = "wxcdiv5";
-var searchResultTitle = "wxcdiv6";
-var searchResults = "wxcdiv4";
-//#endregion
-//#region src/ui/components/SearchPopover.tsx
+import "./assets/src/ui/components/Features.css.ts.vanilla-ggYasCFy.css";
+import "./assets/src/ui/components/Hero.css.ts.vanilla-DY_BH0W6.css";
+import "./assets/src/ui/ErrorBoundary.css.ts.vanilla-C4usIU4z.css";
+//#region src/ui/OwlMark.tsx
 /**
-* Renders the search popover as a portal attached to document.body.
-* Uses getBoundingClientRect to position it below the anchor element.
+* Decorative line-art owl, drawn in `currentColor`. Used by the default
+* error and empty states. Set `color` on the parent (or `style.color`)
+* to recolor; set `title` to give it accessible meaning.
 */
-function SearchPopover({ anchorRef, children }) {
-	const [pos, setPos] = useState({
-		top: 0,
-		left: 0,
-		width: 0
-	});
-	useLayoutEffect(() => {
-		const el = anchorRef.current;
-		if (!el) return;
-		const rect = el.getBoundingClientRect();
-		setPos({
-			top: rect.bottom + 8,
-			left: rect.left,
-			width: Math.max(rect.width, 400)
-		});
-	}, [anchorRef]);
-	if (typeof document === "undefined") return null;
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		className: searchPopover,
+function ArdoOwlMark({ size = 96, title, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 600 600",
+		width: size,
+		height: size,
 		style: {
-			top: pos.top,
-			left: pos.left,
-			width: Math.min(pos.width, globalThis.innerWidth - 32)
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
 		},
-		children
-	}), document.body);
+		role: title == null ? "presentation" : "img",
+		"aria-hidden": title == null ? true : void 0,
+		...props,
+		children: [
+			title == null ? null : /* @__PURE__ */ jsx("title", { children: title }),
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("symbol", {
+				id: "ardo-owl-eye",
+				overflow: "visible",
+				children: [
+					/* @__PURE__ */ jsx("path", { d: "M300 300 151 128l2 178-41 94h93c-35 32-55 68-63 107m63-106 95 81m-32-96 28 88" }),
+					/* @__PURE__ */ jsx("ellipse", {
+						cx: "222",
+						cy: "327",
+						rx: "20",
+						ry: "33",
+						fill: "currentColor",
+						opacity: "0.6"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "227",
+						cy: "324",
+						r: "71"
+					})
+				]
+			}) }),
+			/* @__PURE__ */ jsxs("g", {
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "16",
+				children: [
+					/* @__PURE__ */ jsx("path", { d: "M155 318c2-70 66-126 145-126s143 56 145 126" }),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "300",
+						cy: "290",
+						r: "270"
+					}),
+					/* @__PURE__ */ jsx("use", { href: "#ardo-owl-eye" }),
+					/* @__PURE__ */ jsx("use", {
+						href: "#ardo-owl-eye",
+						transform: "matrix(-1 0 0 1 600 0)"
+					})
+				]
+			})
+		]
+	});
 }
 //#endregion
-//#region src/ui/components/Search.tsx
+//#region src/ui/Footer.tsx
+function formatBuildTime(iso) {
+	try {
+		return new Date(iso).toLocaleDateString("en-US", {
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		});
+	} catch {
+		return iso;
+	}
+}
+/**
+* Footer component with structured layout for project info, sponsor, and build metadata.
+*
+* Automatically pulls data from Ardo context (`config.project`, `config.buildTime`,
+* `config.buildHash`). Props serve as overrides.
+*
+* When `children` is provided, all automatic rendering is skipped.
+*
+* @example Automatic (zero-config)
+* ```tsx
+* <Footer />
+* ```
+*
+* @example With overrides
+* ```tsx
+* <Footer
+*   sponsor={{ text: "Sebastian Software", link: "https://sebastian-software.com/oss" }}
+*   message="Released under the MIT License."
+*   copyright="Copyright 2026 Sebastian Software GmbH"
+* />
+* ```
+*
+* @example Custom content
+* ```tsx
+* <Footer>
+*   <CustomFooterContent />
+* </Footer>
+* ```
+*/
+function FooterProjectLink({ project, config }) {
+	const resolved = project ?? config.project;
+	const name = resolved?.name ?? "";
+	const version = resolved?.version ?? "";
+	const homepage = resolved?.homepage ?? "";
+	if (name === "") return null;
+	const label = version !== "" ? `${name} v${version}` : name;
+	return homepage !== "" ? /* @__PURE__ */ jsx("a", {
+		href: homepage,
+		className: footerLink,
+		children: label
+	}) : /* @__PURE__ */ jsx("span", { children: label });
+}
+function FooterSponsorLink({ sponsor }) {
+	const text = sponsor?.text ?? "";
+	const link = sponsor?.link ?? "";
+	if (text === "" || link === "") return null;
+	return /* @__PURE__ */ jsxs("a", {
+		href: link,
+		className: footerLink,
+		children: ["Sponsored by ", text]
+	});
+}
+function FooterPrimaryLine({ project, sponsor, ardoLink, config }) {
+	const items = [];
+	const projectNode = /* @__PURE__ */ jsx(FooterProjectLink, {
+		project,
+		config
+	});
+	const sponsorNode = /* @__PURE__ */ jsx(FooterSponsorLink, { sponsor });
+	const hasProject = (project ?? config.project)?.name !== void 0 && (project ?? config.project)?.name !== "";
+	const hasSponsor = (sponsor?.text ?? "") !== "" && (sponsor?.link ?? "") !== "";
+	if (hasProject) items.push(projectNode);
+	if (ardoLink) items.push(/* @__PURE__ */ jsxs("a", {
+		href: "https://ardo-docs.dev",
+		className: footerArdoLink,
+		children: [/* @__PURE__ */ jsx(ArdoOwlMark, {
+			size: 16,
+			className: footerOwl,
+			title: ""
+		}), "Built with Ardo"]
+	}));
+	if (hasSponsor) items.push(sponsorNode);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("p", {
+		className: footerPrimary,
+		children: items.map((item, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
+			className: "_169q00b3",
+			"aria-hidden": "true"
+		}), item] }, i))
+	});
+}
+function ArdoFooter({ children, className, ardoLink = true, message, copyright, project, sponsor, buildTime, buildHash }) {
+	const config = useArdoConfig();
+	const resolvedBuildTime = buildTime ?? config.buildTime;
+	const resolvedBuildHash = buildHash ?? config.buildHash;
+	if (children != null) return /* @__PURE__ */ jsx("footer", {
+		className: className ?? "_169q00b0",
+		children: /* @__PURE__ */ jsx("div", {
+			className: footerContainer,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx("footer", {
+		className: className ?? "_169q00b0",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: footerContainer,
+			children: [
+				/* @__PURE__ */ jsx(FooterPrimaryLine, {
+					project,
+					sponsor,
+					ardoLink,
+					config
+				}),
+				(message ?? "") !== "" && /* @__PURE__ */ jsx("p", {
+					className: "_169q00b7",
+					dangerouslySetInnerHTML: { __html: message ?? "" }
+				}),
+				(copyright ?? "") !== "" && /* @__PURE__ */ jsx("p", {
+					className: "_169q00b8",
+					dangerouslySetInnerHTML: { __html: copyright ?? "" }
+				}),
+				(resolvedBuildTime ?? "") !== "" && /* @__PURE__ */ jsxs("p", {
+					className: "_169q00b9",
+					children: [
+						"Built on ",
+						formatBuildTime(resolvedBuildTime ?? ""),
+						(resolvedBuildHash ?? "") !== "" && /* @__PURE__ */ jsxs(Fragment, { children: [
+							" (",
+							resolvedBuildHash,
+							")"
+						] })
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/ui/components/HeaderSearch.css.ts
+var inline = "xapf7e0";
+var trigger = "xapf7e1";
+//#endregion
+//#region src/ui/components/search-hooks.ts
 function useGlobalSearchShortcut(inputRef, setIsOpen) {
 	useEffect(() => {
 		const handleGlobalKeyDown = (e) => {
@@ -100,6 +264,54 @@ function useOutsideClick({ containerRef, popoverClass, isOpen, setIsOpen }) {
 		setIsOpen
 	]);
 }
+//#endregion
+//#region src/ui/components/Search.css.ts
+var search = "wxcdiv0";
+var searchField = "wxcdiv1";
+var searchFooter = "wxcdiva";
+var searchInput = "wxcdiv2";
+var searchKbd = "wxcdivc";
+var searchNoResults = "wxcdiv8";
+var searchNoResultsOwl = "wxcdiv9";
+var searchPopover = "wxcdiv3";
+var searchResult = "wxcdiv5";
+var searchResultTitle = "wxcdiv6";
+var searchResults = "wxcdiv4";
+//#endregion
+//#region src/ui/components/SearchPopover.tsx
+/**
+* Renders the search popover as a portal attached to document.body.
+* Uses getBoundingClientRect to position it below the anchor element.
+*/
+function SearchPopover({ anchorRef, children }) {
+	const [pos, setPos] = useState({
+		top: 0,
+		left: 0,
+		width: 0
+	});
+	useLayoutEffect(() => {
+		const el = anchorRef.current;
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		setPos({
+			top: rect.bottom + 8,
+			left: rect.left,
+			width: Math.max(rect.width, 400)
+		});
+	}, [anchorRef]);
+	if (typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: searchPopover,
+		style: {
+			top: pos.top,
+			left: pos.left,
+			width: Math.min(pos.width, globalThis.innerWidth - 32)
+		},
+		children
+	}), document.body);
+}
+//#endregion
+//#region src/ui/components/Search.tsx
 function useSearchIndex() {
 	return useMemo(() => {
 		const index = new MiniSearch({
@@ -153,11 +365,15 @@ function SearchResults({ results, selectedIndex, query, onClose }) {
 		}) }, result.id))
 	}) : /* @__PURE__ */ jsxs("div", {
 		className: searchNoResults,
-		children: [
+		children: [/* @__PURE__ */ jsx(ArdoOwlMark, {
+			size: 36,
+			className: searchNoResultsOwl,
+			title: ""
+		}), /* @__PURE__ */ jsxs("span", { children: [
 			"No results found for \"",
 			query,
 			"\""
-		]
+		] })]
 	}), /* @__PURE__ */ jsxs("div", {
 		className: searchFooter,
 		children: [
@@ -219,7 +435,7 @@ function SearchInput({ inputRef, placeholder, query, hasQuery, onSearch, onKeyDo
 			}),
 			hasQuery && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "wxcdiva",
+				className: "wxcdivb",
 				onClick: (e) => {
 					e.stopPropagation();
 					onSearch("");
@@ -235,12 +451,15 @@ function SearchInput({ inputRef, placeholder, query, hasQuery, onSearch, onKeyDo
 		]
 	});
 }
-function ArdoSearch({ placeholder = "Search..." }) {
+function ArdoSearch({ placeholder = "Search...", autoFocus = false }) {
 	const navigate = useNavigate();
 	const containerRef = useRef(null);
 	const inputRef = useRef(null);
 	const state = useSearch(useSearchIndex());
 	const hasQuery = state.query.trim().length > 0;
+	useEffect(() => {
+		if (autoFocus) inputRef.current?.focus();
+	}, [autoFocus]);
 	useGlobalSearchShortcut(inputRef, state.setIsOpen);
 	useOutsideClick({
 		containerRef,
@@ -307,140 +526,63 @@ function ArdoSearch({ placeholder = "Search..." }) {
 	});
 }
 //#endregion
-//#region src/ui/Footer.tsx
-function formatBuildTime(iso) {
-	try {
-		return new Date(iso).toLocaleDateString("en-US", {
-			month: "long",
-			day: "numeric",
-			year: "numeric"
-		});
-	} catch {
-		return iso;
-	}
-}
+//#region src/ui/components/HeaderSearch.tsx
 /**
-* Footer component with structured layout for project info, sponsor, and build metadata.
-*
-* Automatically pulls data from Ardo context (`config.project`, `config.buildTime`,
-* `config.buildHash`). Props serve as overrides.
-*
-* When `children` is provided, all automatic rendering is skipped.
-*
-* @example Automatic (zero-config)
-* ```tsx
-* <Footer />
-* ```
-*
-* @example With overrides
-* ```tsx
-* <Footer
-*   sponsor={{ text: "Sebastian Software", link: "https://sebastian-software.com/oss" }}
-*   message="Released under the MIT License."
-*   copyright="Copyright 2026 Sebastian Software GmbH"
-* />
-* ```
-*
-* @example Custom content
-* ```tsx
-* <Footer>
-*   <CustomFooterContent />
-* </Footer>
-* ```
+* Header-hosted search. On desktop it renders the search input inline; on
+* narrow viewports it collapses to an icon button that opens a full-width
+* search overlay.
 */
-function FooterProjectLink({ project, config }) {
-	const resolved = project ?? config.project;
-	const name = resolved?.name ?? "";
-	const version = resolved?.version ?? "";
-	const homepage = resolved?.homepage ?? "";
-	if (name === "") return null;
-	const label = version !== "" ? `${name} v${version}` : name;
-	return homepage !== "" ? /* @__PURE__ */ jsx("a", {
-		href: homepage,
-		className: footerLink,
-		children: label
-	}) : /* @__PURE__ */ jsx("span", { children: label });
-}
-function FooterSponsorLink({ sponsor }) {
-	const text = sponsor?.text ?? "";
-	const link = sponsor?.link ?? "";
-	if (text === "" || link === "") return null;
-	return /* @__PURE__ */ jsxs("a", {
-		href: link,
-		className: footerLink,
-		children: ["Sponsored by ", text]
-	});
-}
-function FooterPrimaryLine({ project, sponsor, ardoLink, config }) {
-	const items = [];
-	const projectNode = /* @__PURE__ */ jsx(FooterProjectLink, {
-		project,
-		config
-	});
-	const sponsorNode = /* @__PURE__ */ jsx(FooterSponsorLink, { sponsor });
-	const hasProject = (project ?? config.project)?.name !== void 0 && (project ?? config.project)?.name !== "";
-	const hasSponsor = (sponsor?.text ?? "") !== "" && (sponsor?.link ?? "") !== "";
-	if (hasProject) items.push(projectNode);
-	if (ardoLink) items.push(/* @__PURE__ */ jsx("a", {
-		href: "https://ardo-docs.dev",
-		className: footerLink,
-		children: "Built with Ardo"
-	}));
-	if (hasSponsor) items.push(sponsorNode);
-	if (items.length === 0) return null;
-	return /* @__PURE__ */ jsx("p", {
-		className: footerPrimary,
-		children: items.map((item, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
-			className: "_169q00b3",
-			"aria-hidden": "true"
-		}), item] }, i))
-	});
-}
-function ArdoFooter({ children, className, ardoLink = true, message, copyright, project, sponsor, buildTime, buildHash }) {
-	const config = useArdoConfig();
-	const resolvedBuildTime = buildTime ?? config.buildTime;
-	const resolvedBuildHash = buildHash ?? config.buildHash;
-	if (children != null) return /* @__PURE__ */ jsx("footer", {
-		className: className ?? "_169q00b0",
-		children: /* @__PURE__ */ jsx("div", {
-			className: footerContainer,
-			children
-		})
-	});
-	return /* @__PURE__ */ jsx("footer", {
-		className: className ?? "_169q00b0",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: footerContainer,
-			children: [
-				/* @__PURE__ */ jsx(FooterPrimaryLine, {
-					project,
-					sponsor,
-					ardoLink,
-					config
-				}),
-				(message ?? "") !== "" && /* @__PURE__ */ jsx("p", {
-					className: "_169q00b5",
-					dangerouslySetInnerHTML: { __html: message ?? "" }
-				}),
-				(copyright ?? "") !== "" && /* @__PURE__ */ jsx("p", {
-					className: "_169q00b6",
-					dangerouslySetInnerHTML: { __html: copyright ?? "" }
-				}),
-				(resolvedBuildTime ?? "") !== "" && /* @__PURE__ */ jsxs("p", {
-					className: "_169q00b7",
-					children: [
-						"Built on ",
-						formatBuildTime(resolvedBuildTime ?? ""),
-						(resolvedBuildHash ?? "") !== "" && /* @__PURE__ */ jsxs(Fragment, { children: [
-							" (",
-							resolvedBuildHash,
-							")"
-						] })
-					]
-				})
-			]
+function ArdoHeaderSearch({ placeholder }) {
+	const [overlayOpen, setOverlayOpen] = useState(false);
+	useEffect(() => {
+		setOverlayOpen(false);
+	}, [useLocation().pathname]);
+	useEffect(() => {
+		if (!overlayOpen) return;
+		const handleKey = (event) => {
+			if (event.key === "Escape") setOverlayOpen(false);
+		};
+		document.addEventListener("keydown", handleKey);
+		return () => {
+			document.removeEventListener("keydown", handleKey);
+		};
+	}, [overlayOpen]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: inline,
+			children: /* @__PURE__ */ jsx(ArdoSearch, { placeholder })
+		}),
+		/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: trigger,
+			"aria-label": "Search",
+			onClick: () => {
+				setOverlayOpen(true);
+			},
+			children: /* @__PURE__ */ jsx(SearchIcon, { size: 20 })
+		}),
+		overlayOpen && /* @__PURE__ */ jsx("div", {
+			className: "xapf7e2",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "xapf7e3",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "xapf7e4",
+					children: /* @__PURE__ */ jsx(ArdoSearch, {
+						placeholder,
+						autoFocus: true
+					})
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "xapf7e5",
+					"aria-label": "Close search",
+					onClick: () => {
+						setOverlayOpen(false);
+					},
+					children: /* @__PURE__ */ jsx(XIcon, { size: 20 })
+				})]
+			})
 		})
-	});
+	] });
 }
 //#endregion
 //#region src/ui/components/ThemeToggle.css.ts
@@ -456,10 +598,11 @@ function getInitialTheme() {
 }
 function ArdoThemeToggle() {
 	const [theme, setTheme] = useState(getInitialTheme);
-	const [mounted] = useState(isBrowser);
+	const mounted = useSyncExternalStore(subscribeMounted, getClientMounted, getServerMounted);
 	useEffect(() => {
+		if (!mounted) return;
 		applyTheme(theme);
-	}, [theme]);
+	}, [mounted, theme]);
 	const toggleTheme = () => {
 		const nextTheme = theme === "light" ? "dark" : theme === "dark" ? "system" : "light";
 		setTheme(nextTheme);
@@ -501,39 +644,56 @@ function applyTheme(theme) {
 		root.classList.toggle("light", theme === "light");
 	}
 }
+function subscribeMounted() {
+	return noop;
+}
+function getClientMounted() {
+	return true;
+}
+function getServerMounted() {
+	return false;
+}
+function noop() {}
 function isTheme(value) {
 	return value === "dark" || value === "light" || value === "system";
 }
 var headerContainer = "qjc2r51";
 var headerLeft = "qjc2r52";
-var headerRight = "qjc2r53";
-var logoLink = "qjc2r54";
-var mobileBackdrop = "qjc2r5a";
-var mobilePanel = "qjc2r5b";
-var mobilePanelClose = "qjc2r5d";
-var mobilePanelHeader = "qjc2r5c";
-var mobilePanelSidebar = "qjc2r5f";
+var headerRight = "qjc2r54";
+var logoLink = "qjc2r55";
+var mobileBackdrop = "qjc2r5b";
+var mobilePanel = "qjc2r5c";
+var mobilePanelClose = "qjc2r5e";
+var mobilePanelHeader = "qjc2r5d";
+var mobilePanelSidebar = "qjc2r5g";
 //#endregion
 //#region src/ui/Header.tsx
-function ArdoHeader({ logo: logo$1, title, nav, actions, search = false, searchPlaceholder, themeToggle = true, mobileMenuContent, className }) {
+/**
+* Mobile menu open state — resets on navigation and locks body scroll
+* while open.
+*/
+function useMobileMenu() {
 	const location = useLocation();
-	const config = useArdoConfig();
-	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-	const resolvedLogo = logo$1;
-	const resolvedTitle = title ?? config.title;
-	const hasLogo = resolvedLogo !== void 0;
-	const hasTitle = resolvedTitle !== "";
-	const hasMobileMenu = mobileMenuContent != null;
+	const [open, setOpen] = useState(false);
 	useEffect(() => {
-		setMobileMenuOpen(false);
+		setOpen(false);
 	}, [location.pathname]);
 	useEffect(() => {
-		if (mobileMenuOpen) document.body.style.overflow = "hidden";
-		else document.body.style.overflow = "";
+		document.body.style.overflow = open ? "hidden" : "";
 		return () => {
 			document.body.style.overflow = "";
 		};
-	}, [mobileMenuOpen]);
+	}, [open]);
+	return [open, setOpen];
+}
+function ArdoHeader({ logo: logo$2, title, nav, actions, search = true, searchPlaceholder, themeToggle = true, mobileMenuContent, className }) {
+	const config = useArdoConfig();
+	const [mobileMenuOpen, setMobileMenuOpen] = useMobileMenu();
+	const resolvedLogo = logo$2;
+	const resolvedTitle = title ?? config.title;
+	const hasLogo = resolvedLogo !== void 0;
+	const hasTitle = resolvedTitle !== "";
+	const hasMobileMenu = mobileMenuContent != null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("header", {
 		className: className ?? "qjc2r50",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -543,14 +703,14 @@ function ArdoHeader({ logo: logo$1, title, nav, actions, search = false, searchP
 					className: headerLeft,
 					children: [hasMobileMenu && /* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: "qjc2r57",
+						className: "qjc2r58",
 						onClick: () => {
 							setMobileMenuOpen(!mobileMenuOpen);
 						},
 						"aria-label": "Toggle menu",
 						"aria-expanded": mobileMenuOpen,
 						children: /* @__PURE__ */ jsxs("span", {
-							className: "qjc2r58",
+							className: "qjc2r59",
 							children: [
 								/* @__PURE__ */ jsx("span", {}),
 								/* @__PURE__ */ jsx("span", {}),
@@ -563,21 +723,24 @@ function ArdoHeader({ logo: logo$1, title, nav, actions, search = false, searchP
 						children: [hasLogo && /* @__PURE__ */ jsx("img", {
 							src: typeof resolvedLogo === "string" ? resolvedLogo : resolvedLogo.light,
 							alt: resolvedTitle,
-							className: "qjc2r55"
+							className: "qjc2r56"
 						}), hasTitle && /* @__PURE__ */ jsx("span", {
-							className: "qjc2r56",
+							className: "qjc2r57",
 							children: resolvedTitle
 						})]
 					})]
 				}),
-				nav != null && /* @__PURE__ */ jsx("div", {
-					className: "qjc2r59",
-					children: nav
+				search && /* @__PURE__ */ jsx("div", {
+					className: "qjc2r53",
+					children: /* @__PURE__ */ jsx(ArdoHeaderSearch, { placeholder: searchPlaceholder })
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: headerRight,
 					children: [
-						search && /* @__PURE__ */ jsx(ArdoSearch, { placeholder: searchPlaceholder }),
+						nav != null && /* @__PURE__ */ jsx("div", {
+							className: "qjc2r5a",
+							children: nav
+						}),
 						themeToggle && /* @__PURE__ */ jsx(ArdoThemeToggle, {}),
 						actions
 					]
@@ -596,7 +759,7 @@ function ArdoHeader({ logo: logo$1, title, nav, actions, search = false, searchP
 		children: mobileMenuContent
 	})] });
 }
-function MobileSlidePanel({ isOpen, logo: logo$2, title, nav, themeToggle, children, onClose }) {
+function MobileSlidePanel({ isOpen, logo: logo$1, title, nav, themeToggle, children, onClose }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: mobileBackdrop,
 		"data-open": isOpen,
@@ -612,10 +775,10 @@ function MobileSlidePanel({ isOpen, logo: logo$2, title, nav, themeToggle, child
 					to: "/",
 					className: logoLink,
 					onClick: onClose,
-					children: logo$2 != null && /* @__PURE__ */ jsx("img", {
-						src: typeof logo$2 === "string" ? logo$2 : logo$2.light,
+					children: logo$1 != null && /* @__PURE__ */ jsx("img", {
+						src: typeof logo$1 === "string" ? logo$1 : logo$1.light,
 						alt: title,
-						className: "qjc2r55"
+						className: "qjc2r56"
 					})
 				}), /* @__PURE__ */ jsxs("div", {
 					style: {
@@ -633,7 +796,7 @@ function MobileSlidePanel({ isOpen, logo: logo$2, title, nav, themeToggle, child
 				})]
 			}),
 			nav != null && /* @__PURE__ */ jsx("div", {
-				className: "qjc2r5e",
+				className: "qjc2r5f",
 				onClickCapture: handleLinkClick(onClose),
 				children: nav
 			}),
@@ -672,15 +835,130 @@ function SocialIcon({ icon }) {
 	const IconComponent = socialIcons[icon];
 	return /* @__PURE__ */ jsx(IconComponent, { size: 20 });
 }
-var sidebarItem = "_1057ydn6";
-var sidebarItemHeader = "_1057ydn7";
-var sidebarLink = "_1057ydn8";
-var sidebarList = "_1057ydn3";
-var sidebarList0 = "_1057ydn4";
-var sidebarList1 = "_1057ydn5";
-var sidebarNav = "_1057ydn2";
-var sidebarText = "_1057ydn9";
-var sidebarTextButton = "_1057ydna";
+var sidebarItem = "_1057ydnc";
+var sidebarItemHeader = "_1057ydne";
+var sidebarLink = "_1057ydnf";
+var sidebarList = "_1057ydn9";
+var sidebarList0 = "_1057ydna";
+var sidebarList1 = "_1057ydnb";
+var sidebarNav = "_1057ydn8";
+var sidebarPanel = "_1057ydn6";
+var sidebarRail = "_1057ydn1";
+var sidebarRailItem = "_1057ydn2";
+var sidebarRailLabel = "_1057ydn3";
+var sidebarRailLink = "_1057ydn5";
+var sidebarRailList = "_1057ydn4";
+var sidebarText = "_1057ydng";
+var sidebarTextButton = "_1057ydnh";
+//#endregion
+//#region src/ui/SidebarRail.tsx
+function SidebarRail({ items }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Documentation sections",
+		className: sidebarRail,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: sidebarRailList,
+			children: items.map((item, index) => /* @__PURE__ */ jsxs("li", {
+				className: sidebarRailItem,
+				children: [item.to !== void 0 ? /* @__PURE__ */ jsx(NavLink, {
+					to: item.to,
+					"aria-label": item.label,
+					className: ({ isActive }) => [sidebarRailLink, (item.active || isActive) && "active"].filter(Boolean).join(" "),
+					children: resolveRailIcon(item, index)
+				}) : /* @__PURE__ */ jsx("span", {
+					className: sidebarRailLink,
+					"aria-label": item.label,
+					children: resolveRailIcon(item, index)
+				}), /* @__PURE__ */ jsx("span", {
+					className: sidebarRailLabel,
+					"aria-hidden": "true",
+					children: item.label
+				})]
+			}, item.key))
+		})
+	});
+}
+function getContextRailItems(contexts, activeId) {
+	return contexts.map((ctx) => ({
+		key: ctx.id,
+		label: ctx.label,
+		to: ctx.href,
+		iconKey: inferContextIconKey(ctx),
+		active: ctx.id === activeId
+	}));
+}
+function inferContextIconKey(ctx) {
+	const normalized = `${ctx.id} ${ctx.label}`.toLowerCase();
+	if (normalized.includes("api")) return "api";
+	if (normalized.includes("component")) return "components";
+	if (normalized.includes("custom") || normalized.includes("config")) return "settings";
+	if (normalized.includes("deploy") || normalized.includes("trouble")) return "tools";
+	if (normalized.includes("guide") || normalized.includes("intro")) return "guide";
+	if (normalized.includes("writing") || normalized.includes("markdown")) return "docs";
+	return "book";
+}
+function getDataRailItems(items, currentPath) {
+	return items.map((item, index) => ({
+		key: item.link ?? `${item.text}-${String(index)}`,
+		label: item.text,
+		to: item.link ?? findFirstItemLink(item.items ?? []),
+		iconKey: item.icon,
+		active: item.link === currentPath || hasActiveDataChild(item, currentPath)
+	}));
+}
+function getTextLabel(children, fallback) {
+	if (typeof children === "string") return children;
+	if (typeof children === "number") return String(children);
+	return fallback;
+}
+function findFirstItemLink(items) {
+	for (const item of items) {
+		if ((item.link ?? "") !== "") return item.link;
+		const nested = findFirstItemLink(item.items ?? []);
+		if (nested !== void 0) return nested;
+	}
+}
+function hasActiveDataChild(item, currentPath) {
+	return (item.items ?? []).some((child) => child.link === currentPath || hasActiveDataChild(child, currentPath));
+}
+function resolveRailIcon(item, index) {
+	if (item.icon !== void 0) return item.icon;
+	const Icon = iconByKey[item.iconKey ?? inferIconKey(item.label, index)];
+	return /* @__PURE__ */ jsx(Icon, {
+		size: 18,
+		strokeWidth: 1.8
+	});
+}
+function inferIconKey(label, index) {
+	const normalized = label.toLowerCase();
+	if (normalized.includes("api")) return "api";
+	if (normalized.includes("component")) return "components";
+	if (normalized.includes("custom") || normalized.includes("config")) return "settings";
+	if (normalized.includes("deploy") || normalized.includes("trouble")) return "tools";
+	if (normalized.includes("writing") || normalized.includes("markdown")) return "docs";
+	if (normalized.includes("intro") || normalized.includes("guide")) return "guide";
+	return fallbackIconKeys[index % fallbackIconKeys.length];
+}
+const iconByKey = {
+	api: CodeIcon,
+	book: BookOpenIcon,
+	box: BoxIcon,
+	code: FileCodeIcon,
+	components: PackageIcon,
+	docs: FileTextIcon,
+	guide: BookOpenIcon,
+	settings: SettingsIcon,
+	tools: WrenchIcon
+};
+const fallbackIconKeys = [
+	"guide",
+	"docs",
+	"settings",
+	"tools",
+	"components",
+	"box"
+];
 //#endregion
 //#region src/ui/Sidebar.tsx
 const SidebarContext = createContext({ currentPath: "" });
@@ -721,26 +999,31 @@ function useSidebarContext() {
 function ArdoSidebar({ items, children, header, className }) {
 	const { pathname } = useLocation();
 	const contextSidebar = useArdoSidebar();
+	const { items: contexts, activeId } = useArdoContexts();
 	const hasCustomChildren = children != null;
 	const resolvedItems = items ?? (hasCustomChildren ? void 0 : contextSidebar);
 	const hasResolvedItems = (resolvedItems?.length ?? 0) > 0;
+	const railItems = contexts.length > 0 ? getContextRailItems(contexts, activeId) : hasCustomChildren ? getRailItemsFromChildren(children, pathname) : getDataRailItems(resolvedItems ?? [], pathname);
 	return /* @__PURE__ */ jsx(SidebarContext, {
 		value: useMemo(() => ({ currentPath: pathname }), [pathname]),
 		children: /* @__PURE__ */ jsxs("aside", {
 			className: className ?? "_1057ydn0",
-			children: [header != null && /* @__PURE__ */ jsx("div", {
-				className: "_1057ydn1",
-				children: header
-			}), /* @__PURE__ */ jsx("nav", {
-				"aria-label": "Main navigation",
-				className: sidebarNav,
-				children: hasCustomChildren ? /* @__PURE__ */ jsx("ul", {
-					className: `${sidebarList} ${sidebarList0}`,
-					children
-				}) : hasResolvedItems ? /* @__PURE__ */ jsx(SidebarItems, {
-					items: resolvedItems ?? [],
-					depth: 0
-				}) : null
+			children: [/* @__PURE__ */ jsx(SidebarRail, { items: railItems }), /* @__PURE__ */ jsxs("div", {
+				className: sidebarPanel,
+				children: [header != null && /* @__PURE__ */ jsx("div", {
+					className: "_1057ydn7",
+					children: header
+				}), /* @__PURE__ */ jsx("nav", {
+					"aria-label": "Main navigation",
+					className: sidebarNav,
+					children: hasCustomChildren ? /* @__PURE__ */ jsx("ul", {
+						className: `${sidebarList} ${sidebarList0}`,
+						children
+					}) : hasResolvedItems ? /* @__PURE__ */ jsx(SidebarItems, {
+						items: resolvedItems ?? [],
+						depth: 0
+					}) : null
+				})]
 			})]
 		})
 	});
@@ -772,7 +1055,7 @@ function ArdoSidebarGroup({ title, to, collapsed: initialCollapsed = false, coll
 	const hasTo = (to ?? "") !== "";
 	const canToggle = collapsible && hasChildren;
 	return /* @__PURE__ */ jsxs("li", {
-		className: className ?? "_1057ydn6",
+		className: className ?? ["_1057ydnc", hasChildren && "_1057ydnd"].filter(Boolean).join(" "),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: sidebarItemHeader,
 			children: [hasTo ? /* @__PURE__ */ jsx(NavLink, {
@@ -789,7 +1072,7 @@ function ArdoSidebarGroup({ title, to, collapsed: initialCollapsed = false, coll
 				children: title
 			}), canToggle && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: ["_1057ydnb", collapsed && "collapsed"].filter(Boolean).join(" "),
+				className: ["_1057ydni", collapsed && "collapsed"].filter(Boolean).join(" "),
 				onClick: () => {
 					setCollapsed(!collapsed);
 				},
@@ -797,12 +1080,12 @@ function ArdoSidebarGroup({ title, to, collapsed: initialCollapsed = false, coll
 				children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
 			})]
 		}), hasChildren && /* @__PURE__ */ jsx("div", {
-			className: "_1057ydnc",
+			className: "_1057ydnj",
 			"data-collapsed": collapsed,
 			children: /* @__PURE__ */ jsx("div", {
-				className: "_1057ydnd",
+				className: "_1057ydnk",
 				children: /* @__PURE__ */ jsx("ul", {
-					className: `_1057ydn3 _1057ydn5`,
+					className: `_1057ydn9 _1057ydnb`,
 					children
 				})
 			})
@@ -818,7 +1101,7 @@ function ArdoSidebarGroup({ title, to, collapsed: initialCollapsed = false, coll
 * ```
 */
 function ArdoSidebarLink({ to, children, className }) {
-	const baseClassName = className ?? "_1057ydn8";
+	const baseClassName = className ?? "_1057ydnf";
 	return /* @__PURE__ */ jsx("li", {
 		className: sidebarItem,
 		children: /* @__PURE__ */ jsx(NavLink, {
@@ -847,7 +1130,7 @@ function SidebarItemComponent({ item, depth }) {
 	const linkClassName = [sidebarLink, hasActiveChild && "child-active"].filter(Boolean).join(" ");
 	const textButtonClassName = [[sidebarText, hasActiveChild && "child-active"].filter(Boolean).join(" "), sidebarTextButton].join(" ");
 	return /* @__PURE__ */ jsxs("li", {
-		className: sidebarItem,
+		className: [sidebarItem, hasChildren && "_1057ydnd"].filter(Boolean).join(" "),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: sidebarItemHeader,
 			children: [hasItemLink ? /* @__PURE__ */ jsx(NavLink, {
@@ -863,7 +1146,7 @@ function SidebarItemComponent({ item, depth }) {
 				children: item.text
 			}), hasChildren && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: ["_1057ydnb", collapsed && "collapsed"].filter(Boolean).join(" "),
+				className: ["_1057ydni", collapsed && "collapsed"].filter(Boolean).join(" "),
 				onClick: () => {
 					setCollapsed(!collapsed);
 				},
@@ -871,10 +1154,10 @@ function SidebarItemComponent({ item, depth }) {
 				children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
 			})]
 		}), hasChildren && /* @__PURE__ */ jsx("div", {
-			className: "_1057ydnc",
+			className: "_1057ydnj",
 			"data-collapsed": collapsed,
 			children: /* @__PURE__ */ jsx("div", {
-				className: "_1057ydnd",
+				className: "_1057ydnk",
 				children: /* @__PURE__ */ jsx(SidebarItems, {
 					items: childItems,
 					depth: depth + 1
@@ -883,6 +1166,40 @@ function SidebarItemComponent({ item, depth }) {
 		})]
 	});
 }
+function getRailItemsFromChildren(children, currentPath) {
+	return Children.toArray(children).filter(isValidElement).map((child, index) => {
+		if (isSidebarGroupElement(child)) {
+			const { title, to, icon } = child.props;
+			return {
+				key: to ?? title,
+				label: title,
+				to: to ?? findFirstChildLink(child.props.children),
+				icon,
+				active: to === currentPath || checkChildrenActive(child.props.children, currentPath)
+			};
+		}
+		if (isSidebarLinkElement(child)) {
+			const label = getTextLabel(child.props.children, `Section ${String(index + 1)}`);
+			return {
+				key: `${label}-${String(index)}`,
+				label,
+				to: child.props.to,
+				active: child.props.to === currentPath
+			};
+		}
+	}).filter((item) => item !== void 0);
+}
+function findFirstChildLink(children) {
+	for (const child of Children.toArray(children)) {
+		if (!isValidElement(child)) continue;
+		if (isSidebarLinkElement(child)) return child.props.to;
+		if (isSidebarGroupElement(child)) return findFirstGroupLink(child);
+	}
+}
+function findFirstGroupLink(child) {
+	if ((child.props.to ?? "") !== "") return child.props.to;
+	return findFirstChildLink(child.props.children);
+}
 function isSidebarChildActive(child, currentPath) {
 	if (isSidebarLinkElement(child)) return child.props.to === currentPath;
 	if (isSidebarGroupElement(child)) {
@@ -951,20 +1268,51 @@ function resolveRootHeader(header, headerProps, mobileMenuContent) {
 		mobileMenuContent: headerProps?.mobileMenuContent ?? mobileMenuContent
 	});
 }
-function resolveLayoutClassName(className, isHomePage) {
+function resolveLayoutClassName(className, isBareLayout) {
 	if (className != null) return className;
-	return isHomePage ? `${layout} ${home}` : layout;
+	return isBareLayout ? `${layout} ${home}` : layout;
 }
-function ArdoRoot({ config, sidebar, header, sidebarContent, footer, headerProps, sidebarProps, footerProps, editLink, lastUpdated, tocLabel, className, children }) {
+function readLayoutHandle(handle) {
+	if (typeof handle !== "object" || handle === null) return void 0;
+	if (!("layout" in handle)) return void 0;
+	const { layout } = handle;
+	return typeof layout === "string" ? layout : void 0;
+}
+/**
+* Reads the React Router `handle` exports from every active route match and
+* returns the most specific `layout` value (the deepest match wins). MDX
+* routes get this export auto-generated from `frontmatter.layout`; .tsx
+* routes set it directly with `export const handle = { layout: "bare" }`.
+*/
+function useRouteLayout() {
+	const matches = useMatches();
+	for (let i = matches.length - 1; i >= 0; i--) {
+		const layout = readLayoutHandle(matches[i].handle);
+		if (layout !== void 0) return layout;
+	}
+}
+function contextMatchesPath(ctx, pathname) {
+	if (ctx.match != null) return typeof ctx.match === "string" ? pathname.startsWith(ctx.match) : ctx.match.test(pathname);
+	const firstSegment = ctx.href.split("/").find((segment) => segment !== "");
+	if (firstSegment === void 0) return false;
+	const root = `/${firstSegment}`;
+	return pathname === root || pathname.startsWith(`${root}/`);
+}
+function findActiveContext(contexts, pathname) {
+	return contexts?.find((ctx) => contextMatchesPath(ctx, pathname));
+}
+function resolveContextSidebar(sidebar, activeContext) {
+	if (Array.isArray(sidebar)) return sidebar;
+	if (activeContext == null) return [];
+	return sidebar[activeContext.id] ?? [];
+}
+function ArdoRoot({ config, sidebar, contexts, header, sidebarContent, footer, headerProps, sidebarProps, footerProps, editLink, lastUpdated, tocLabel, className, children }) {
 	const location = useLocation();
-	const isHomePage = location.pathname === "/" || location.pathname === "";
-	const searchPlaceholder = headerProps?.searchPlaceholder;
-	const showSearch = headerProps?.search !== false;
-	const resolvedSidebar = isHomePage ? void 0 : wrapSidebarWithSearch(sidebarContent, sidebarProps, !isHomePage && showSearch ? /* @__PURE__ */ jsx(ArdoSearch, { placeholder: searchPlaceholder }) : void 0);
-	const resolvedHeader = resolveRootHeader(header, {
-		...headerProps,
-		search: false
-	}, isHomePage ? void 0 : resolvedSidebar);
+	const isBareLayout = useRouteLayout() === "bare" || location.pathname === "/" || location.pathname === "";
+	const activeContext = useMemo(() => findActiveContext(contexts, location.pathname), [contexts, location.pathname]);
+	const sidebarItems = useMemo(() => resolveContextSidebar(sidebar, activeContext), [sidebar, activeContext]);
+	const resolvedSidebar = isBareLayout ? void 0 : resolveSidebar(sidebarContent, sidebarProps);
+	const resolvedHeader = resolveRootHeader(header, headerProps, isBareLayout ? void 0 : resolvedSidebar);
 	const siteConfig = useMemo(() => ({
 		editLink,
 		lastUpdated,
@@ -976,9 +1324,11 @@ function ArdoRoot({ config, sidebar, header, sidebarContent, footer, headerProps
 	]);
 	const content = /* @__PURE__ */ jsx(ArdoProvider, {
 		config,
-		sidebar,
+		sidebar: sidebarItems,
+		contexts,
+		activeContextId: activeContext?.id,
 		children: /* @__PURE__ */ jsx(ArdoLayout, {
-			className: resolveLayoutClassName(className, isHomePage),
+			className: resolveLayoutClassName(className, isBareLayout),
 			header: resolvedHeader,
 			sidebar: resolvedSidebar,
 			footer: footer ?? /* @__PURE__ */ jsx(ArdoFooter, { ...footerProps }),
@@ -991,21 +1341,13 @@ function ArdoRoot({ config, sidebar, header, sidebarContent, footer, headerProps
 	}) : content;
 }
 /**
-* Wraps sidebar content with a search field header.
-* If the user provides custom sidebarContent (which is typically an <ArdoSidebar>),
-* we clone it and inject the search as its `header` prop.
-* Otherwise we create a default <ArdoSidebar> with search.
+* Resolves the sidebar element. Custom content is passed through as-is;
+* when none is given, a default data-driven <ArdoSidebar> is created.
 */
-function wrapSidebarWithSearch(sidebarContent, sidebarProps, search) {
-	if (sidebarContent == null) return /* @__PURE__ */ jsx(ArdoSidebar, {
-		...sidebarProps,
-		header: search
-	});
-	if (isValidElement(sidebarContent) && sidebarContent.type === ArdoSidebar) return cloneElement(sidebarContent, { header: sidebarContent.props.header ?? search });
-	return /* @__PURE__ */ jsx(ArdoSidebar, {
-		header: search,
-		children: sidebarContent
-	});
+function resolveSidebar(sidebarContent, sidebarProps) {
+	if (sidebarContent == null) return /* @__PURE__ */ jsx(ArdoSidebar, { ...sidebarProps });
+	if (isValidElement(sidebarContent)) return sidebarContent;
+	return /* @__PURE__ */ jsx(ArdoSidebar, { children: sidebarContent });
 }
 function enhanceHeaderWithMobileMenuContent(header, mobileMenuContent) {
 	if (!isValidElement(header) || header.type !== ArdoHeader) return header;
@@ -1175,6 +1517,113 @@ function ArdoHero({ name, text, tagline, image, actions, className, version }) {
 	});
 }
 //#endregion
+//#region src/ui/ErrorBoundary.css.ts
+var actions = "tbxn4v6";
+var card = "tbxn4v1";
+var description = "tbxn4v5";
+var owl = "tbxn4v2";
+var primaryAction = "tbxn4v7";
+var root = "tbxn4v0";
+var status = "tbxn4v3";
+var title = "tbxn4v4";
+//#endregion
+//#region src/ui/ErrorBoundary.tsx
+const defaults = {
+	notFound: {
+		title: "This page wandered off",
+		description: "The page you were looking for has moved, been renamed, or never existed. The owl is on the case.",
+		homeLabel: "Back to home",
+		homeHref: "/"
+	},
+	error: {
+		title: "Something went wrong",
+		description: "An unexpected error happened while loading this page. Try again, or head back to safer ground.",
+		homeLabel: "Back to home",
+		homeHref: "/"
+	}
+};
+/**
+* Themed error/404 page. Drop into a React Router route as `ErrorBoundary`
+* to replace the default unstyled fallback with a layout-aware page.
+*
+* @example
+* ```tsx
+* // app/root.tsx
+* export { ArdoErrorBoundary as ErrorBoundary } from "ardo/ui"
+* ```
+*/
+function ArdoErrorBoundary(props = {}) {
+	const error = useRouteError();
+	const is404 = isRouteErrorResponse(error) && error.status === 404;
+	const isRouteError = isRouteErrorResponse(error);
+	const copy = is404 ? {
+		...defaults.notFound,
+		...props.notFound
+	} : {
+		...defaults.error,
+		...props.error
+	};
+	const statusLabel = isRouteError ? `Error ${String(error.status)}` : "Error";
+	const errorDetails = is404 ? void 0 : formatErrorDetails(error);
+	return /* @__PURE__ */ jsx("main", {
+		className: root,
+		children: /* @__PURE__ */ jsxs("section", {
+			className: card,
+			children: [
+				/* @__PURE__ */ jsx(ArdoOwlMark, {
+					size: 120,
+					className: owl,
+					title: ""
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: status,
+					children: statusLabel
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					className: title,
+					children: copy.title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: description,
+					children: copy.description
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: actions,
+					children: [/* @__PURE__ */ jsx(Link, {
+						to: copy.homeHref,
+						className: primaryAction,
+						children: copy.homeLabel
+					}), !is404 && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							globalThis.location.reload();
+						},
+						className: "tbxn4v8",
+						children: "Reload"
+					})]
+				}),
+				errorDetails != null && /* @__PURE__ */ jsxs("details", {
+					className: "tbxn4v9",
+					children: [/* @__PURE__ */ jsx("summary", {
+						className: "tbxn4va",
+						children: "Technical details"
+					}), /* @__PURE__ */ jsx("pre", {
+						className: "tbxn4vb",
+						children: errorDetails
+					})]
+				})
+			]
+		})
+	});
+}
+function formatErrorDetails(error) {
+	if (isRouteErrorResponse(error)) {
+		if (typeof error.data === "string" && error.data.length > 0) return error.data;
+		return;
+	}
+	if (error instanceof Error) return error.stack ?? error.message;
+}
+//#endregion
 //#region src/ui/HomePage.tsx
 function HomeHeroSection({ hero: hero$1, fallbackTitle }) {
 	if (hero$1 === void 0) return null;
@@ -1309,6 +1758,6 @@ function ArdoNavLink({ to, href, children, className, activeMatch: _activeMatch
 	});
 }
 //#endregion
-export { ArdoFeatureCard as a, ArdoSidebar as c, ArdoHeader as d, ArdoSocialLink as f, ArdoSearch as h, ArdoHero as i, ArdoSidebarGroup as l, ArdoFooter as m, ArdoNavLink as n, ArdoFeatures as o, ArdoThemeToggle as p, ArdoHomePage as r, ArdoRoot as s, ArdoNav as t, ArdoSidebarLink as u };
+export { ArdoOwlMark as _, ArdoHero as a, ArdoRoot as c, ArdoSidebarLink as d, ArdoHeader as f, ArdoFooter as g, ArdoSearch as h, ArdoErrorBoundary as i, ArdoSidebar as l, ArdoThemeToggle as m, ArdoNavLink as n, ArdoFeatureCard as o, ArdoSocialLink as p, ArdoHomePage as r, ArdoFeatures as s, ArdoNav as t, ArdoSidebarGroup as u };
 
-//# sourceMappingURL=ui-3grzJSsq.js.map
+//# sourceMappingURL=ui-AGPGBunC.js.map