@clarify-labs/renderer 0.7.2 → 0.8.2

package/output/{ThemeRoot-QULrwQf6.js → ClarifyShell-BPv2bxI4.js}

@@ -1,9 +1,140 @@
-import { C as isExternalHref, D as useBuiltInText, E as copyTextToClipboard, S as themeCookieName, a as safeDecodeURIComponent, b as storeLocalePreference, d as isSameRoutePath, f as normalizeRoutePath, g as getStoredLocalePreference, h as useTheme, i as Navigation, j as useConfig, k as LocaleContext, o as SectionProvider, r as Header, t as PageActionsProvider, w as localizeHref } from "./PageActions-yoDRjkq8.js";
+import { A as LocaleContext, C as themeCookieName, D as copyTextToClipboard, M as useConfig, N as useLocale, O as useBuiltInText, T as localizeHref, _ as getStoredLocalePreference, a as safeDecodeURIComponent, d as isSameRoutePath, f as normalizeRoutePath, g as useTheme, h as ThemeProvider, i as Navigation, j as OpenApisContext, k as ConfigContext, o as SectionProvider, p as resolveLocalizedText, r as Header, t as PageActionsProvider, w as isExternalHref, x as storeLocalePreference } from "./PageActions-BwY7ierv.js";
 import clsx from "clsx";
-import { Component, Suspense, lazy, useEffect, useMemo, useState } from "react";
+import { Component, Suspense, createContext, lazy, useContext, useEffect, useMemo, useState } from "react";
 import { Link, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import { ChevronDown, ChevronLeft, ChevronRight, Settings, WandSparkles, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region source/slots/context.tsx
+var SlotContextValue = createContext(null);
+/**
+* Provides an isolated {@link SlotContext} for a single slot component.
+* `RuntimeSlot` wraps every rendered slot component with this provider.
+*/
+function SlotProvider(arg0) {
+	const { value, children } = arg0;
+	return /* @__PURE__ */ jsx(SlotContextValue.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Reads the current slot context.
+*
+* Must be called inside a slot component (or a descendant). Calling it outside a
+* slot provider throws, which helps plugin authors notice that the component was
+* not mounted through a Clarify slot.
+*/
+function useSlot() {
+	const context = useContext(SlotContextValue);
+	if (!context) throw new Error("[clarify] useSlot must be called inside a slot component");
+	return context;
+}
+//#endregion
+//#region source/slots/RuntimeSlot.tsx
+var RuntimeSlotsContext = createContext({ slots: {} });
+/**
+* Makes the compiled slot registry and the current route available to every
+* {@link RuntimeSlot} in the tree. Mounted once near the top of `AppShell`.
+*/
+function RuntimeSlotsProvider(arg0) {
+	const { slots, route, children } = arg0;
+	return /* @__PURE__ */ jsx(RuntimeSlotsContext.Provider, {
+		value: {
+			slots: slots ?? {},
+			route
+		},
+		children
+	});
+}
+/**
+* Renders plugin components registered for a slot, in registration order.
+*
+* For extension slots (*.before/*.after), renders all plugin components.
+* For replacement slots (*.replace), renders only the last registered plugin
+* component (if any), and passes the default component through context.
+*
+* Each component is loaded via the import factory. If `_resolved` is set
+* (SSR pre-resolution), the component is rendered synchronously for
+* compatibility with `renderToString`. Otherwise, `React.lazy` + `Suspense`
+* is used for client-side code-splitting.
+*/
+function RuntimeSlot(arg0) {
+	const { name, default: DefaultComponent } = arg0;
+	const { slots, route } = useContext(RuntimeSlotsContext);
+	const locale = useLocale();
+	const entries = slots[name];
+	if (!entries || entries.length === 0) return DefaultComponent ? /* @__PURE__ */ jsx(DefaultComponent, {}) : null;
+	if (name.endsWith(".replace")) {
+		const lastEntry = entries[entries.length - 1];
+		return /* @__PURE__ */ jsx(SlotProvider, {
+			value: {
+				name,
+				plugin: lastEntry.plugin,
+				route,
+				locale,
+				DefaultComponent
+			},
+			children: /* @__PURE__ */ jsx(SlotEntryRenderer, { entry: lastEntry })
+		});
+	}
+	return /* @__PURE__ */ jsx(Fragment$1, { children: entries.map((entry) => /* @__PURE__ */ jsx(SlotProvider, {
+		value: {
+			name,
+			plugin: entry.plugin,
+			route,
+			locale
+		},
+		children: /* @__PURE__ */ jsx(SlotEntryRenderer, { entry })
+	}, `${name}:${entry.plugin}`)) });
+}
+function SlotEntryRenderer(props) {
+	const { entry } = props;
+	if (entry._resolved) return /* @__PURE__ */ jsx(entry._resolved, {});
+	return /* @__PURE__ */ jsx(LazySlotComponent, { loader: entry.component });
+}
+function LazySlotComponent(props) {
+	const { loader } = props;
+	const [Component, setComponent] = useState(null);
+	useEffect(() => {
+		let cancelled = false;
+		loader().then((mod) => {
+			if (!cancelled) setComponent(() => mod.default);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [loader]);
+	if (!Component) return null;
+	return /* @__PURE__ */ jsx(Component, {});
+}
+//#endregion
+//#region source/assets/clarify.svg?url
+var clarify_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='279px'%20height='200px'%20viewBox='0%200%20279%20200'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eclarify%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='clarify'%20transform='translate(-0,%200.0054)'%3e%3cpath%20d='M44.867217,0.0054376148%20C130.715579,1.00591567%20200,70.9091172%20200,156.994562%20L199.986321,155.127494%20C199.384888,180.009127%20179.026368,199.994562%20154,199.994562%20L46,199.994562%20C20.5949015,199.994562%200,179.399661%200,153.994562%20L0,45.9945624%20C0,21.0975659%2019.7793434,0.820282524%2044.4815926,0.0191499894%20Z'%20fill='%2300D492'%3e%3c/path%3e%3cpath%20d='M123.867217,0.0054376148%20C209.715579,1.00591567%20279,70.9091172%20279,156.994562%20L278.986321,155.127494%20C278.384888,180.009127%20258.026368,199.994562%20233,199.994562%20L125,199.994562%20C99.5949015,199.994562%2079,179.399661%2079,153.994562%20L79,45.9945624%20C79,21.0975659%2098.7793434,0.820282524%20123.481593,0.0191499894%20Z'%20id='clarify-right'%20fill-opacity='0.6'%20fill='%2300F6C9'%20transform='translate(179,%20100)%20rotate(-90)%20translate(-179,%20-100)'%3e%3c/path%3e%3cpath%20d='M199.979267,154.416906%20L199.984438,155.157125%20L199.962366,155.872459%20C198.977251,180.406837%20178.776104,199.994562%20154,199.994562%20L124.372438,199.994125%20L124.249053,199.994081%20C99.6939678,199.603921%2079.8122712,179.973634%2079.01915,155.518407%20L79.0054376,155.132783%20C79.5830823,105.566626%20103.129768,61.5221348%20139.498462,33.1463428%20C175.69419,61.3871018%20199.186123,105.143863%20199.979267,154.416906%20Z'%20id='形状结合'%20fill='%2300F692'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+//#endregion
+//#region source/app/BuiltWithClarify.tsx
+function BuiltWithClarify() {
+	const t = useBuiltInText();
+	return /* @__PURE__ */ jsxs("a", {
+		href: "https://clarify.pub",
+		target: "_blank",
+		rel: "noreferrer",
+		"aria-label": t("builtWith.label"),
+		className: "clarify-built-with inline-flex items-center gap-1.5 rounded-full px-2 py-1 font-medium no-underline transition",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: t("builtWith.prefix") }),
+			/* @__PURE__ */ jsx("img", {
+				src: clarify_default,
+				alt: "",
+				className: "clarify-built-with-logo h-3.5 w-auto flex-none object-contain"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "clarify-built-with-brand font-semibold",
+				children: "Clarify"
+			})
+		]
+	});
+}
+//#endregion
 //#region source/app/ErrorBoundary.tsx
 function PageErrorPanel(props) {
 	const { title, description, reloadLabel, detailsLabel, pathLabel, typeLabel, messageLabel, stackLabel, componentStackLabel, timestampLabel, copyLabel, copiedLabel, path, error, errorInfo, occurredAt } = props;
@@ -86,7 +217,7 @@ function PageErrorPanel(props) {
 								children: messageLabel
 							}),
 							/* @__PURE__ */ jsx("p", {
-								className: "mt-2 break-words font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+								className: "mt-2 wrap-break-word font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
 								children: error.message
 							}),
 							/* @__PURE__ */ jsx("p", {
@@ -94,14 +225,14 @@ function PageErrorPanel(props) {
 								children: stackLabel
 							}),
 							/* @__PURE__ */ jsx("pre", {
-								className: "mt-2 max-h-(--clarify-error-details-max-height) overflow-auto whitespace-pre-wrap break-words font-mono",
+								className: "mt-2 max-h-(--clarify-error-details-max-height) overflow-auto whitespace-pre-wrap wrap-break-word font-mono",
 								children: stack
 							}),
 							componentStack ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
 								className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
 								children: componentStackLabel
 							}), /* @__PURE__ */ jsx("pre", {
-								className: "mt-2 max-h-(--clarify-error-component-stack-max-height) overflow-auto whitespace-pre-wrap break-words font-mono",
+								className: "mt-2 max-h-(--clarify-error-component-stack-max-height) overflow-auto whitespace-pre-wrap wrap-break-word font-mono",
 								children: componentStack
 							})] }) : null
 						]
@@ -148,10 +279,6 @@ var PageErrorBoundary = class extends Component {
 };
 //#endregion
 //#region source/app/PageBanner.tsx
-function resolveLocalizedText$1(text, locale, fallbackLocale) {
-	if (typeof text === "string") return text;
-	return (locale ? text[locale] : void 0) ?? (fallbackLocale ? text[fallbackLocale] : void 0) ?? Object.values(text)[0] ?? "";
-}
 function bannerStorageKey(config, content) {
 	return `clarify:banner:dismissed:${config.title}:${content}`;
 }
@@ -174,29 +301,30 @@ function PageBannerLink(props) {
 	});
 }
 function PageBanner(props) {
-	const { component: CustomBanner, currentLocale, onDismiss } = props;
+	const { currentLocale, onDismiss } = props;
 	const config = useConfig();
 	const banner = config.banner;
-	const builtInBanner = banner && typeof banner === "object" ? banner : void 0;
-	const content = builtInBanner ? resolveLocalizedText$1(builtInBanner.content, currentLocale, config.i18n?.defaultLocale) : "";
-	const link = builtInBanner?.link;
-	const linkLabel = link ? resolveLocalizedText$1(link.label, currentLocale, config.i18n?.defaultLocale) : "";
-	const storageKey = useMemo(() => content ? bannerStorageKey(config, content) : "", [config, content]);
+	const content = banner ? resolveLocalizedText(banner.content, currentLocale, config.i18n?.defaultLocale) : "";
+	const storageKey = useMemo(() => {
+		if (!banner || !content) return "";
+		return bannerStorageKey(config, content);
+	}, [
+		config,
+		content,
+		banner
+	]);
 	const [dismissed, setDismissed] = useState(() => {
-		if (!storageKey || !builtInBanner?.dismissible || typeof window === "undefined") return false;
+		if (!banner?.dismissible || typeof window === "undefined") return false;
 		return window.localStorage.getItem(storageKey) === "1";
 	});
 	useEffect(() => {
 		if (dismissed) onDismiss?.();
 	}, [dismissed, onDismiss]);
-	if (CustomBanner) return /* @__PURE__ */ jsx("div", {
-		className: "clarify-banner clarify-banner-custom flex min-h-12 items-center border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-4 text-sm text-(--clarify-theme-tokens-colors-foreground) dark:border-white/10 dark:bg-zinc-950",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "mx-auto w-full max-w-(--clarify-theme-layout-max-width)",
-			children: /* @__PURE__ */ jsx(CustomBanner, {})
-		})
-	});
-	if (!builtInBanner || !content || dismissed) return null;
+	if (!banner) return null;
+	if (!content) return null;
+	if (dismissed) return null;
+	const link = banner.link;
+	const linkLabel = link ? resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale) : "";
 	return /* @__PURE__ */ jsxs("div", {
 		className: "clarify-banner relative flex min-h-12 items-center border-b border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) px-4 text-sm text-(--clarify-ui-text) dark:border-white/10",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -211,7 +339,7 @@ function PageBanner(props) {
 				config,
 				locale: currentLocale
 			}) : null]
-		}), builtInBanner.dismissible ? /* @__PURE__ */ jsx("button", {
+		}), banner.dismissible ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: "clarify-banner-dismiss absolute right-3 inline-flex size-8 items-center justify-center rounded-full text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong)",
 			"aria-label": "Dismiss announcement",
@@ -227,38 +355,7 @@ function PageBanner(props) {
 	});
 }
 //#endregion
-//#region source/assets/clarify.svg?url
-var clarify_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='279px'%20height='200px'%20viewBox='0%200%20279%20200'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eclarify%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='clarify'%20transform='translate(-0,%200.0054)'%3e%3cpath%20d='M44.867217,0.0054376148%20C130.715579,1.00591567%20200,70.9091172%20200,156.994562%20L199.986321,155.127494%20C199.384888,180.009127%20179.026368,199.994562%20154,199.994562%20L46,199.994562%20C20.5949015,199.994562%200,179.399661%200,153.994562%20L0,45.9945624%20C0,21.0975659%2019.7793434,0.820282524%2044.4815926,0.0191499894%20Z'%20fill='%2300D492'%3e%3c/path%3e%3cpath%20d='M123.867217,0.0054376148%20C209.715579,1.00591567%20279,70.9091172%20279,156.994562%20L278.986321,155.127494%20C278.384888,180.009127%20258.026368,199.994562%20233,199.994562%20L125,199.994562%20C99.5949015,199.994562%2079,179.399661%2079,153.994562%20L79,45.9945624%20C79,21.0975659%2098.7793434,0.820282524%20123.481593,0.0191499894%20Z'%20id='clarify-right'%20fill-opacity='0.6'%20fill='%2300F6C9'%20transform='translate(179,%20100)%20rotate(-90)%20translate(-179,%20-100)'%3e%3c/path%3e%3cpath%20d='M199.979267,154.416906%20L199.984438,155.157125%20L199.962366,155.872459%20C198.977251,180.406837%20178.776104,199.994562%20154,199.994562%20L124.372438,199.994125%20L124.249053,199.994081%20C99.6939678,199.603921%2079.8122712,179.973634%2079.01915,155.518407%20L79.0054376,155.132783%20C79.5830823,105.566626%20103.129768,61.5221348%20139.498462,33.1463428%20C175.69419,61.3871018%20199.186123,105.143863%20199.979267,154.416906%20Z'%20id='形状结合'%20fill='%2300F692'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
-//#endregion
-//#region source/app/BuiltWithClarify.tsx
-function BuiltWithClarify() {
-	const t = useBuiltInText();
-	return /* @__PURE__ */ jsxs("a", {
-		href: "https://clarify.pub",
-		target: "_blank",
-		rel: "noreferrer",
-		"aria-label": t("builtWith.label"),
-		className: "clarify-built-with inline-flex items-center gap-1.5 rounded-full px-2 py-1 font-medium no-underline transition",
-		children: [
-			/* @__PURE__ */ jsx("span", { children: t("builtWith.prefix") }),
-			/* @__PURE__ */ jsx("img", {
-				src: clarify_default,
-				alt: "",
-				className: "clarify-built-with-logo h-3.5 w-auto flex-none object-contain"
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "clarify-built-with-brand font-semibold",
-				children: "Clarify"
-			})
-		]
-	});
-}
-//#endregion
 //#region source/app/PageFooter.tsx
-function resolveLocalizedText(text, locale, fallbackLocale) {
-	if (typeof text === "string") return text;
-	return (locale ? text[locale] : void 0) ?? (fallbackLocale ? text[fallbackLocale] : void 0) ?? Object.values(text)[0] ?? "";
-}
 function localeForPath(config, pathname) {
 	const i18n = config.i18n;
 	if (!i18n) return void 0;
@@ -294,23 +391,21 @@ function SocialLink(arg0) {
 		children: name
 	});
 }
-function PageFooter(props = {}) {
+function PageFooter() {
 	const config = useConfig();
 	const locale = localeForPath(config, useLocation().pathname);
 	const footer = config.footer;
-	const builtInFooter = footer && typeof footer === "object" ? footer : void 0;
-	const CustomFooter = props.component;
-	const links = builtInFooter?.links ?? [];
-	const socials = Object.entries(builtInFooter?.socials ?? {});
-	const copyright = builtInFooter?.copyright ? resolveLocalizedText(builtInFooter.copyright, locale, config.i18n?.defaultLocale) : void 0;
-	const hasBuiltInFooter = Boolean(copyright || links.length > 0 || socials.length > 0);
-	return /* @__PURE__ */ jsxs("footer", {
+	const links = footer?.links ?? [];
+	const socials = Object.entries(footer?.socials ?? {});
+	const copyright = footer?.copyright ? resolveLocalizedText(footer.copyright, locale, config.i18n?.defaultLocale) : void 0;
+	if (!Boolean(copyright || links.length > 0 || socials.length > 0)) return /* @__PURE__ */ jsx("footer", {
+		"aria-hidden": "true",
+		className: "clarify-page-footer mt-16 w-full border-t border-(--clarify-theme-tokens-colors-border) pt-8 lg:mt-24"
+	});
+	return /* @__PURE__ */ jsx("footer", {
 		className: "clarify-page-footer mt-16 flex w-full flex-col gap-4 border-t border-(--clarify-theme-tokens-colors-border) py-8 lg:mt-24",
-		children: [CustomFooter ? /* @__PURE__ */ jsx("div", {
-			className: "clarify-footer-custom w-full",
-			children: /* @__PURE__ */ jsx(CustomFooter, {})
-		}) : hasBuiltInFooter ? /* @__PURE__ */ jsxs("div", {
-			className: clsx("clarify-footer-content flex flex-col items-end gap-3 text-right", hasBuiltInFooter && "sm:items-start sm:text-left"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("clarify-footer-content flex flex-col items-end gap-3 text-right", "sm:items-start sm:text-left"),
 			children: [copyright ? /* @__PURE__ */ jsx("p", {
 				className: "clarify-footer-copyright m-0",
 				children: copyright
@@ -325,10 +420,7 @@ function PageFooter(props = {}) {
 					href
 				}, name))]
 			}) : null]
-		}) : null, /* @__PURE__ */ jsx("div", {
-			className: "clarify-footer-brand flex justify-end self-end",
-			children: /* @__PURE__ */ jsx(BuiltWithClarify, {})
-		})]
+		})
 	});
 }
 //#endregion
@@ -487,6 +579,23 @@ function PageSkeleton() {
 }
 //#endregion
 //#region source/app/AppShell.tsx
+function BannerSlot(props) {
+	const { activeBannerKey, dismissedBannerKey, onDismiss, config, locale } = props;
+	function DefaultBannerComponent() {
+		if (!(Boolean(config.banner) && dismissedBannerKey !== activeBannerKey)) return null;
+		return /* @__PURE__ */ jsx(PageBanner, {
+			currentLocale: locale,
+			onDismiss
+		});
+	}
+	return /* @__PURE__ */ jsx(RuntimeSlot, {
+		name: "page.banner.replace",
+		default: DefaultBannerComponent
+	});
+}
+function DefaultFooterComponent() {
+	return /* @__PURE__ */ jsx(PageFooter, {});
+}
 function routeForPath(routes, pathname) {
 	return routes.find((route) => isSameRoutePath(route.path, pathname));
 }
@@ -610,13 +719,13 @@ function NotFoundRouteElement(props) {
 	return /* @__PURE__ */ jsx(RouteComponent, {});
 }
 function AppShell(arg0) {
-	const { config, routes, navigation, bannerComponent, footerComponent } = arg0;
+	const { config, routes, navigation, runtimeSlots } = arg0;
 	const location = useLocation();
 	const navigate = useNavigate();
 	const pathname = normalizeRoutePath(location.pathname);
 	const currentRoute = routeForPath(routes, pathname);
 	const explicitLocale = explicitLocaleForPath(config, pathname);
-	const [storedLocale] = useState(() => storedLocaleForConfig(config));
+	const storedLocale = storedLocaleForConfig(config);
 	const currentLocale = explicitLocale ?? storedLocale ?? fallbackLocale(config);
 	const currentLocaleConfig = config.i18n?.locales.find((locale) => locale.code === currentLocale);
 	const notFoundRoute = currentRoute ? void 0 : notFoundRouteForPath(routes, pathname, currentLocale);
@@ -678,74 +787,88 @@ function AppShell(arg0) {
 	]);
 	return /* @__PURE__ */ jsx(LocaleContext.Provider, {
 		value: currentLocale,
-		children: /* @__PURE__ */ jsxs(SectionProvider, {
-			sections,
-			children: [/* @__PURE__ */ jsx(Header, {
-				config,
-				navigation: currentNavigation.items,
-				tabs: currentNavigation.tabs,
-				routes,
-				currentLocale,
-				currentRoute,
-				banner: hasBanner ? /* @__PURE__ */ jsx(PageBanner, {
-					component: bannerComponent,
+		children: /* @__PURE__ */ jsx(RuntimeSlotsProvider, {
+			slots: runtimeSlots,
+			route: currentRoute,
+			children: /* @__PURE__ */ jsxs(SectionProvider, {
+				sections,
+				children: [/* @__PURE__ */ jsx(Header, {
+					config,
+					navigation: currentNavigation.items,
+					tabs: currentNavigation.tabs,
+					routes,
 					currentLocale,
-					onDismiss: () => setDismissedBannerKey(activeBannerKey)
-				}) : void 0
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "clarify-layout mx-auto grid w-full max-w-(--clarify-theme-layout-max-width) grid-cols-1 lg:grid-cols-(--clarify-layout-sidebar-grid) xl:grid-cols-(--clarify-layout-sidebar-grid-wide)",
-				style: { "--clarify-header-offset": hasTabs && hasBanner ? "10rem" : hasTabs && !hasBanner ? "7rem" : !hasTabs && hasBanner ? "6.5rem" : "3.5rem" },
-				children: [/* @__PURE__ */ jsx("aside", {
-					"data-pagefind-ignore": true,
-					className: "clarify-sidebar hidden lg:block lg:self-stretch lg:bg-(--clarify-theme-tokens-colors-background) lg:px-5 xl:px-6",
-					children: /* @__PURE__ */ jsx("div", {
-						className: clsx("clarify-sidebar-scroll lg:sticky lg:z-30 lg:overflow-y-auto lg:pb-8", hasTabs && hasBanner && "lg:top-40 lg:h-(--clarify-sidebar-height-with-tabs-and-banner) lg:pt-10", hasTabs && !hasBanner && "lg:top-28 lg:h-(--clarify-sidebar-height-with-tabs) lg:pt-10", !hasTabs && hasBanner && "lg:top-[6.5rem] lg:h-(--clarify-sidebar-height-with-banner) lg:pt-10", !hasTabs && !hasBanner && "lg:top-14 lg:h-(--clarify-sidebar-height) lg:pt-10"),
-						children: /* @__PURE__ */ jsx(Navigation, { navigation: currentNavigation.items })
-					})
-				}), /* @__PURE__ */ jsx("div", {
-					className: clsx("clarify-content @container relative flex min-h-screen min-w-0 flex-col px-4 pb-12 sm:px-6 lg:px-8 xl:px-10", hasTabs && hasBanner && "pt-[6.5rem] lg:pt-40", hasTabs && !hasBanner && "pt-14 lg:pt-28", !hasTabs && hasBanner && "pt-[6.5rem]", !hasTabs && !hasBanner && "pt-14"),
-					children: /* @__PURE__ */ jsxs(PageActionsProvider, {
-						route: currentRoute,
-						routePrefix: config.routePrefix,
-						children: [
-							/* @__PURE__ */ jsx("main", {
-								className: "clarify-main min-w-0 flex-auto",
-								"data-pagefind-body": true,
-								children: /* @__PURE__ */ jsx(PageErrorBoundary, {
-									title: text("renderError.title"),
-									description: text("renderError.description"),
-									reloadLabel: text("renderError.reload"),
-									detailsLabel: text("renderError.details"),
-									pathLabel: text("renderError.path"),
-									typeLabel: text("renderError.type"),
-									messageLabel: text("renderError.message"),
-									stackLabel: text("renderError.stack"),
-									componentStackLabel: text("renderError.componentStack"),
-									timestampLabel: text("renderError.timestamp"),
-									copyLabel: text("actions.copy"),
-									copiedLabel: text("actions.copied"),
-									path: pathname,
-									children: /* @__PURE__ */ jsx(Suspense, {
-										fallback: /* @__PURE__ */ jsx(PageSkeleton, {}),
-										children: /* @__PURE__ */ jsxs(Routes, { children: [renderRoutes.map((route) => /* @__PURE__ */ jsx(Route, {
-											path: route.path,
-											element: /* @__PURE__ */ jsx(route.component, {})
-										}, route.path)), /* @__PURE__ */ jsx(Route, {
-											path: "*",
-											element: /* @__PURE__ */ jsx(NotFoundRouteElement, { component: NotFoundRouteComponent })
-										})] })
-									})
-								}, pathname)
-							}),
-							/* @__PURE__ */ jsx(PageNavigation, {
-								navigation: currentNavigation.items,
-								currentRoute
-							}),
-							/* @__PURE__ */ jsx(PageFooter, { component: footerComponent })
-						]
+					currentRoute,
+					banner: /* @__PURE__ */ jsx(BannerSlot, {
+						activeBannerKey,
+						dismissedBannerKey,
+						onDismiss: () => setDismissedBannerKey(activeBannerKey),
+						config,
+						locale: currentLocale
 					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "clarify-layout mx-auto grid w-full max-w-(--clarify-theme-layout-max-width) grid-cols-1 lg:grid-cols-(--clarify-layout-sidebar-grid) xl:grid-cols-(--clarify-layout-sidebar-grid-wide)",
+					style: { "--clarify-header-offset": hasTabs && hasBanner ? "10rem" : hasTabs && !hasBanner ? "7rem" : !hasTabs && hasBanner ? "6.5rem" : "3.5rem" },
+					children: [/* @__PURE__ */ jsx("aside", {
+						"data-pagefind-ignore": true,
+						className: "clarify-sidebar hidden lg:block lg:self-stretch lg:bg-(--clarify-theme-tokens-colors-background) lg:px-5 xl:px-6",
+						children: /* @__PURE__ */ jsx("div", {
+							className: clsx("clarify-sidebar-scroll lg:sticky lg:z-30 lg:overflow-y-auto lg:pb-8", hasTabs && hasBanner && "lg:top-40 lg:h-(--clarify-sidebar-height-with-tabs-and-banner) lg:pt-10", hasTabs && !hasBanner && "lg:top-28 lg:h-(--clarify-sidebar-height-with-tabs) lg:pt-10", !hasTabs && hasBanner && "lg:top-26 lg:h-(--clarify-sidebar-height-with-banner) lg:pt-10", !hasTabs && !hasBanner && "lg:top-14 lg:h-(--clarify-sidebar-height) lg:pt-10"),
+							children: /* @__PURE__ */ jsx(Navigation, { navigation: currentNavigation.items })
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: clsx("clarify-content @container relative flex min-h-screen min-w-0 flex-col px-4 pb-12 sm:px-6 lg:px-8 xl:px-10", hasTabs && hasBanner && "pt-26 lg:pt-40", hasTabs && !hasBanner && "pt-14 lg:pt-28", !hasTabs && hasBanner && "pt-26", !hasTabs && !hasBanner && "pt-14"),
+						children: /* @__PURE__ */ jsxs(PageActionsProvider, {
+							route: currentRoute,
+							routePrefix: config.routePrefix,
+							children: [
+								/* @__PURE__ */ jsx("main", {
+									className: "clarify-main min-w-0 flex-auto",
+									"data-pagefind-body": true,
+									children: /* @__PURE__ */ jsx(PageErrorBoundary, {
+										title: text("renderError.title"),
+										description: text("renderError.description"),
+										reloadLabel: text("renderError.reload"),
+										detailsLabel: text("renderError.details"),
+										pathLabel: text("renderError.path"),
+										typeLabel: text("renderError.type"),
+										messageLabel: text("renderError.message"),
+										stackLabel: text("renderError.stack"),
+										componentStackLabel: text("renderError.componentStack"),
+										timestampLabel: text("renderError.timestamp"),
+										copyLabel: text("actions.copy"),
+										copiedLabel: text("actions.copied"),
+										path: pathname,
+										children: /* @__PURE__ */ jsx(Suspense, {
+											fallback: /* @__PURE__ */ jsx(PageSkeleton, {}),
+											children: /* @__PURE__ */ jsxs(Routes, { children: [renderRoutes.map((route) => /* @__PURE__ */ jsx(Route, {
+												path: route.path,
+												element: /* @__PURE__ */ jsx(route.component, {})
+											}, route.path)), /* @__PURE__ */ jsx(Route, {
+												path: "*",
+												element: /* @__PURE__ */ jsx(NotFoundRouteElement, { component: NotFoundRouteComponent })
+											})] })
+										})
+									}, pathname)
+								}),
+								/* @__PURE__ */ jsx(PageNavigation, {
+									navigation: currentNavigation.items,
+									currentRoute
+								}),
+								/* @__PURE__ */ jsx(RuntimeSlot, { name: "page.footer.before" }),
+								/* @__PURE__ */ jsx(RuntimeSlot, {
+									name: "page.footer.replace",
+									default: DefaultFooterComponent
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "flex justify-end",
+									children: /* @__PURE__ */ jsx(BuiltWithClarify, {})
+								})
+							]
+						})
+					})]
 				})]
-			})]
+			})
 		})
 	});
 }
@@ -1366,6 +1489,48 @@ var randomLayoutWidths = [
 	"128rem",
 	"144rem"
 ];
+var randomDarkAccentPairs = [
+	{
+		primary: "#34d399",
+		accent: "#2dd4bf"
+	},
+	{
+		primary: "#60a5fa",
+		accent: "#38bdf8"
+	},
+	{
+		primary: "#a78bfa",
+		accent: "#c084fc"
+	},
+	{
+		primary: "#f472b6",
+		accent: "#fb7185"
+	},
+	{
+		primary: "#fb923c",
+		accent: "#facc15"
+	},
+	{
+		primary: "#a3e635",
+		accent: "#22c55e"
+	},
+	{
+		primary: "#22d3ee",
+		accent: "#818cf8"
+	},
+	{
+		primary: "#f87171",
+		accent: "#fb923c"
+	},
+	{
+		primary: "#e879f9",
+		accent: "#f472b6"
+	},
+	{
+		primary: "#5eead4",
+		accent: "#60a5fa"
+	}
+];
 function randomItem(items) {
 	return items[Math.floor(Math.random() * items.length)];
 }
@@ -1378,26 +1543,36 @@ function modeColor(light, dark) {
 		dark
 	};
 }
+function createRandomThemeSelection() {
+	return {
+		palette: randomItem(randomThemePalettes),
+		darkAccents: randomItem(randomDarkAccentPairs),
+		radius: randomItem(randomRadiusSets),
+		maxWidth: randomItem(randomLayoutWidths)
+	};
+}
+function createRandomThemeColors(selection) {
+	const { palette, darkAccents } = selection;
+	return {
+		primary: modeColor(palette.primary, darkAccents.primary),
+		accent: modeColor(palette.accent, darkAccents.accent),
+		background: modeColor(palette.background, "#09090b"),
+		foreground: modeColor(palette.foreground, "#f8fafc"),
+		surface: modeColor(palette.surface, "#18181b"),
+		muted: modeColor(palette.muted, "#a1a1aa"),
+		border: modeColor(randomRgbMix(palette.foreground, palette.borderMix), "rgb(255 255 255 / 0.1)"),
+		codeBackground: modeColor(randomRgbMix(palette.primary, palette.codeMix), "#18181b")
+	};
+}
 function createRandomTheme() {
-	const palette = randomItem(randomThemePalettes);
-	const radius = randomItem(randomRadiusSets);
-	const maxWidth = randomItem(randomLayoutWidths);
+	const selection = createRandomThemeSelection();
 	return {
 		preset: "default",
 		tokens: {
-			colors: {
-				primary: modeColor(palette.primary, palette.accent),
-				accent: modeColor(palette.accent, palette.primary),
-				background: modeColor(palette.background, "#09090b"),
-				foreground: modeColor(palette.foreground, "#f8fafc"),
-				surface: modeColor(palette.surface, "#18181b"),
-				muted: modeColor(palette.muted, "#a1a1aa"),
-				border: modeColor(randomRgbMix(palette.foreground, palette.borderMix), "rgb(255 255 255 / 0.1)"),
-				codeBackground: modeColor(randomRgbMix(palette.primary, palette.codeMix), "#18181b")
-			},
-			radius: { ...radius }
+			colors: createRandomThemeColors(selection),
+			radius: { ...selection.radius }
 		},
-		layout: { maxWidth },
+		layout: { maxWidth: selection.maxWidth },
 		editor: false
 	};
 }
@@ -1949,6 +2124,35 @@ function ThemeRoot(props) {
 	});
 }
 //#endregion
-export { themeBootstrapScript as a, AppShell as c, PageBanner as d, themeEditorPresets as i, PageFooter as l, ThemeEditor as n, themePresets as o, applyThemeVariables as r, themeStorageKey as s, ThemeRoot as t, BuiltWithClarify as u };
+//#region source/runtime/ClarifyShell.tsx
+/**
+* Shared provider chain used by both client-side render and server-side
+* renderToHTML.  Wraps AppShell with ConfigContext → OpenApisContext →
+* ThemeProvider → ThemeRoot.
+*
+* The outer Router (BrowserRouter / StaticRouter) is left to the caller
+* so each entry point can supply the correct router variant.
+*/
+function ClarifyShell(props) {
+	const { config, routes, navigation, openApis, runtimeSlots, themeEditor = false } = props;
+	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
+		value: config,
+		children: /* @__PURE__ */ jsx(OpenApisContext.Provider, {
+			value: openApis,
+			children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(ThemeRoot, {
+				theme: config.theme,
+				themeEditor,
+				children: /* @__PURE__ */ jsx(AppShell, {
+					config,
+					routes,
+					navigation: navigation ?? [],
+					runtimeSlots
+				})
+			}) })
+		})
+	});
+}
+//#endregion
+export { themeBootstrapScript as a, AppShell as c, BuiltWithClarify as d, RuntimeSlot as f, useSlot as h, themeEditorPresets as i, PageFooter as l, SlotProvider as m, ThemeEditor as n, themePresets as o, RuntimeSlotsProvider as p, applyThemeVariables as r, themeStorageKey as s, ClarifyShell as t, PageBanner as u };
 
-//# sourceMappingURL=ThemeRoot-QULrwQf6.js.map
+//# sourceMappingURL=ClarifyShell-BPv2bxI4.js.map