@clarify-labs/renderer 0.7.2 → 0.8.2

package/output/{ThemeRoot-UWj0iK1X.cjs → ClarifyShell-B74Fq4UU.cjs}

@@ -1,11 +1,142 @@
 const require_chunk = require("./chunk-DakpK96I.cjs");
-const require_PageActions = require("./PageActions-1RDCHcUY.cjs");
+const require_PageActions = require("./PageActions-DOKkt2zo.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
 let react = require("react");
 let react_router_dom = require("react-router-dom");
 let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
+//#region source/slots/context.tsx
+var SlotContextValue = (0, react.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__ */ (0, react_jsx_runtime.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 = (0, react.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 = (0, react.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__ */ (0, react_jsx_runtime.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 } = (0, react.useContext)(RuntimeSlotsContext);
+	const locale = require_PageActions.useLocale();
+	const entries = slots[name];
+	if (!entries || entries.length === 0) return DefaultComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultComponent, {}) : null;
+	if (name.endsWith(".replace")) {
+		const lastEntry = entries[entries.length - 1];
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotProvider, {
+			value: {
+				name,
+				plugin: lastEntry.plugin,
+				route,
+				locale,
+				DefaultComponent
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotEntryRenderer, { entry: lastEntry })
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: entries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotProvider, {
+		value: {
+			name,
+			plugin: entry.plugin,
+			route,
+			locale
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotEntryRenderer, { entry })
+	}, `${name}:${entry.plugin}`)) });
+}
+function SlotEntryRenderer(props) {
+	const { entry } = props;
+	if (entry._resolved) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(entry._resolved, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LazySlotComponent, { loader: entry.component });
+}
+function LazySlotComponent(props) {
+	const { loader } = props;
+	const [Component, setComponent] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		let cancelled = false;
+		loader().then((mod) => {
+			if (!cancelled) setComponent(() => mod.default);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [loader]);
+	if (!Component) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.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 = require_PageActions.useBuiltInText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { children: t("builtWith.prefix") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: clarify_default,
+				alt: "",
+				className: "clarify-built-with-logo h-3.5 w-auto flex-none object-contain"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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;
@@ -88,7 +219,7 @@ function PageErrorPanel(props) {
 								children: messageLabel
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -96,14 +227,14 @@ function PageErrorPanel(props) {
 								children: stackLabel
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
 								children: componentStackLabel
 							}), /* @__PURE__ */ (0, react_jsx_runtime.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
 						]
@@ -150,10 +281,6 @@ var PageErrorBoundary = class extends react.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}`;
 }
@@ -176,29 +303,30 @@ function PageBannerLink(props) {
 	});
 }
 function PageBanner(props) {
-	const { component: CustomBanner, currentLocale, onDismiss } = props;
+	const { currentLocale, onDismiss } = props;
 	const config = require_PageActions.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 = (0, react.useMemo)(() => content ? bannerStorageKey(config, content) : "", [config, content]);
+	const content = banner ? require_PageActions.resolveLocalizedText(banner.content, currentLocale, config.i18n?.defaultLocale) : "";
+	const storageKey = (0, react.useMemo)(() => {
+		if (!banner || !content) return "";
+		return bannerStorageKey(config, content);
+	}, [
+		config,
+		content,
+		banner
+	]);
 	const [dismissed, setDismissed] = (0, react.useState)(() => {
-		if (!storageKey || !builtInBanner?.dismissible || typeof window === "undefined") return false;
+		if (!banner?.dismissible || typeof window === "undefined") return false;
 		return window.localStorage.getItem(storageKey) === "1";
 	});
 	(0, react.useEffect)(() => {
 		if (dismissed) onDismiss?.();
 	}, [dismissed, onDismiss]);
-	if (CustomBanner) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mx-auto w-full max-w-(--clarify-theme-layout-max-width)",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.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 ? require_PageActions.resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale) : "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -213,7 +341,7 @@ function PageBanner(props) {
 				config,
 				locale: currentLocale
 			}) : null]
-		}), builtInBanner.dismissible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		}), banner.dismissible ? /* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -229,38 +357,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 = require_PageActions.useBuiltInText();
-	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { children: t("builtWith.prefix") }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-				src: clarify_default,
-				alt: "",
-				className: "clarify-built-with-logo h-3.5 w-auto flex-none object-contain"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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;
@@ -272,7 +369,7 @@ function FooterLink(arg0) {
 	const external = link.external ?? require_PageActions.isExternalHref(link.href);
 	const href = external ? link.href : require_PageActions.localizeHref(link.href, config, locale);
 	const className = "clarify-footer-link no-underline transition";
-	const label = resolveLocalizedText(link.label, locale, config.i18n?.defaultLocale);
+	const label = require_PageActions.resolveLocalizedText(link.label, locale, config.i18n?.defaultLocale);
 	if (external) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 		href,
 		target: "_blank",
@@ -296,23 +393,21 @@ function SocialLink(arg0) {
 		children: name
 	});
 }
-function PageFooter(props = {}) {
+function PageFooter() {
 	const config = require_PageActions.useConfig();
 	const locale = localeForPath(config, (0, react_router_dom.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__ */ (0, react_jsx_runtime.jsxs)("footer", {
+	const links = footer?.links ?? [];
+	const socials = Object.entries(footer?.socials ?? {});
+	const copyright = footer?.copyright ? require_PageActions.resolveLocalizedText(footer.copyright, locale, config.i18n?.defaultLocale) : void 0;
+	if (!Boolean(copyright || links.length > 0 || socials.length > 0)) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "clarify-footer-custom w-full",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomFooter, {})
-		}) : hasBuiltInFooter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, clsx.default)("clarify-footer-content flex flex-col items-end gap-3 text-right", hasBuiltInFooter && "sm:items-start sm:text-left"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("clarify-footer-content flex flex-col items-end gap-3 text-right", "sm:items-start sm:text-left"),
 			children: [copyright ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "clarify-footer-copyright m-0",
 				children: copyright
@@ -322,15 +417,12 @@ function PageFooter(props = {}) {
 					link,
 					locale,
 					config
-				}, `${link.href}-${resolveLocalizedText(link.label, locale, config.i18n?.defaultLocale)}`)), socials.map(([name, href]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SocialLink, {
+				}, `${link.href}-${require_PageActions.resolveLocalizedText(link.label, locale, config.i18n?.defaultLocale)}`)), socials.map(([name, href]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SocialLink, {
 					name,
 					href
 				}, name))]
 			}) : null]
-		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "clarify-footer-brand flex justify-end self-end",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BuiltWithClarify, {})
-		})]
+		})
 	});
 }
 //#endregion
@@ -489,6 +581,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__ */ (0, react_jsx_runtime.jsx)(PageBanner, {
+			currentLocale: locale,
+			onDismiss
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlot, {
+		name: "page.banner.replace",
+		default: DefaultBannerComponent
+	});
+}
+function DefaultFooterComponent() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageFooter, {});
+}
 function routeForPath(routes, pathname) {
 	return routes.find((route) => require_PageActions.isSameRoutePath(route.path, pathname));
 }
@@ -612,13 +721,13 @@ function NotFoundRouteElement(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RouteComponent, {});
 }
 function AppShell(arg0) {
-	const { config, routes, navigation, bannerComponent, footerComponent } = arg0;
+	const { config, routes, navigation, runtimeSlots } = arg0;
 	const location = (0, react_router_dom.useLocation)();
 	const navigate = (0, react_router_dom.useNavigate)();
 	const pathname = require_PageActions.normalizeRoutePath(location.pathname);
 	const currentRoute = routeForPath(routes, pathname);
 	const explicitLocale = explicitLocaleForPath(config, pathname);
-	const [storedLocale] = (0, react.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);
@@ -680,74 +789,88 @@ function AppShell(arg0) {
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.LocaleContext.Provider, {
 		value: currentLocale,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.SectionProvider, {
-			sections,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Header, {
-				config,
-				navigation: currentNavigation.items,
-				tabs: currentNavigation.tabs,
-				routes,
-				currentLocale,
-				currentRoute,
-				banner: hasBanner ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageBanner, {
-					component: bannerComponent,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlotsProvider, {
+			slots: runtimeSlots,
+			route: currentRoute,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.SectionProvider, {
+				sections,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Header, {
+					config,
+					navigation: currentNavigation.items,
+					tabs: currentNavigation.tabs,
+					routes,
 					currentLocale,
-					onDismiss: () => setDismissedBannerKey(activeBannerKey)
-				}) : void 0
-			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Navigation, { navigation: currentNavigation.items })
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.PageActionsProvider, {
-						route: currentRoute,
-						routePrefix: config.routePrefix,
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
-								className: "clarify-main min-w-0 flex-auto",
-								"data-pagefind-body": true,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
-										fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSkeleton, {}),
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Routes, { children: [renderRoutes.map((route) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
-											path: route.path,
-											element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(route.component, {})
-										}, route.path)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
-											path: "*",
-											element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotFoundRouteElement, { component: NotFoundRouteComponent })
-										})] })
-									})
-								}, pathname)
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigation, {
-								navigation: currentNavigation.items,
-								currentRoute
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageFooter, { component: footerComponent })
-						]
+					currentRoute,
+					banner: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerSlot, {
+						activeBannerKey,
+						dismissedBannerKey,
+						onDismiss: () => setDismissedBannerKey(activeBannerKey),
+						config,
+						locale: currentLocale
 					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Navigation, { navigation: currentNavigation.items })
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.PageActionsProvider, {
+							route: currentRoute,
+							routePrefix: config.routePrefix,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
+									className: "clarify-main min-w-0 flex-auto",
+									"data-pagefind-body": true,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+											fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSkeleton, {}),
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Routes, { children: [renderRoutes.map((route) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
+												path: route.path,
+												element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(route.component, {})
+											}, route.path)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
+												path: "*",
+												element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotFoundRouteElement, { component: NotFoundRouteComponent })
+											})] })
+										})
+									}, pathname)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigation, {
+									navigation: currentNavigation.items,
+									currentRoute
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlot, { name: "page.footer.before" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlot, {
+									name: "page.footer.replace",
+									default: DefaultFooterComponent
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "flex justify-end",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BuiltWithClarify, {})
+								})
+							]
+						})
+					})]
 				})]
-			})]
+			})
 		})
 	});
 }
@@ -1368,6 +1491,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)];
 }
@@ -1380,26 +1545,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
 	};
 }
@@ -1951,6 +2126,35 @@ function ThemeRoot(props) {
 	});
 }
 //#endregion
+//#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__ */ (0, react_jsx_runtime.jsx)(require_PageActions.ConfigContext.Provider, {
+		value: config,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.OpenApisContext.Provider, {
+			value: openApis,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.ThemeProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeRoot, {
+				theme: config.theme,
+				themeEditor,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppShell, {
+					config,
+					routes,
+					navigation: navigation ?? [],
+					runtimeSlots
+				})
+			}) })
+		})
+	});
+}
+//#endregion
 Object.defineProperty(exports, "AppShell", {
 	enumerable: true,
 	get: function() {
@@ -1963,6 +2167,12 @@ Object.defineProperty(exports, "BuiltWithClarify", {
 		return BuiltWithClarify;
 	}
 });
+Object.defineProperty(exports, "ClarifyShell", {
+	enumerable: true,
+	get: function() {
+		return ClarifyShell;
+	}
+});
 Object.defineProperty(exports, "PageBanner", {
 	enumerable: true,
 	get: function() {
@@ -1975,16 +2185,28 @@ Object.defineProperty(exports, "PageFooter", {
 		return PageFooter;
 	}
 });
-Object.defineProperty(exports, "ThemeEditor", {
+Object.defineProperty(exports, "RuntimeSlot", {
 	enumerable: true,
 	get: function() {
-		return ThemeEditor;
+		return RuntimeSlot;
 	}
 });
-Object.defineProperty(exports, "ThemeRoot", {
+Object.defineProperty(exports, "RuntimeSlotsProvider", {
 	enumerable: true,
 	get: function() {
-		return ThemeRoot;
+		return RuntimeSlotsProvider;
+	}
+});
+Object.defineProperty(exports, "SlotProvider", {
+	enumerable: true,
+	get: function() {
+		return SlotProvider;
+	}
+});
+Object.defineProperty(exports, "ThemeEditor", {
+	enumerable: true,
+	get: function() {
+		return ThemeEditor;
 	}
 });
 Object.defineProperty(exports, "applyThemeVariables", {
@@ -2017,5 +2239,11 @@ Object.defineProperty(exports, "themeStorageKey", {
 		return themeStorageKey;
 	}
 });
+Object.defineProperty(exports, "useSlot", {
+	enumerable: true,
+	get: function() {
+		return useSlot;
+	}
+});
 
-//# sourceMappingURL=ThemeRoot-UWj0iK1X.cjs.map
+//# sourceMappingURL=ClarifyShell-B74Fq4UU.cjs.map