@clarify-labs/renderer 0.8.2 → 0.9.1

package/output/{ClarifyShell-B74Fq4UU.cjs → ClarifyShell-DJ4fOVOd.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-DakpK96I.cjs");
-const require_PageActions = require("./PageActions-DOKkt2zo.cjs");
+const require_PageActions = require("./PageActions-GI1t-JrR.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
 let react = require("react");
@@ -582,9 +582,9 @@ function PageSkeleton() {
 //#endregion
 //#region source/app/AppShell.tsx
 function BannerSlot(props) {
-	const { activeBannerKey, dismissedBannerKey, onDismiss, config, locale } = props;
+	const { activeBannerKey, dismissedBannerKey, bannerResolved, onDismiss, config, locale } = props;
 	function DefaultBannerComponent() {
-		if (!(Boolean(config.banner) && dismissedBannerKey !== activeBannerKey)) return null;
+		if (!(bannerResolved && Boolean(config.banner) && dismissedBannerKey !== activeBannerKey)) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageBanner, {
 			currentLocale: locale,
 			onDismiss
@@ -685,6 +685,126 @@ function applyDocumentMetadata(config, route) {
 	setNamedMeta("description", route?.description ?? config.description);
 	setNamedMeta("keywords", route?.keywords?.join(", "));
 }
+function useRouteState(config, routes, navigation, pathname) {
+	const currentRoute = routeForPath(routes, pathname);
+	const explicitLocale = explicitLocaleForPath(config, pathname);
+	const storedLocale = storedLocaleForConfig(config);
+	const currentLocale = explicitLocale ?? storedLocale ?? fallbackLocale(config);
+	return {
+		currentRoute,
+		explicitLocale,
+		storedLocale,
+		currentLocale,
+		currentLocaleConfig: config.i18n?.locales.find((locale) => locale.code === currentLocale),
+		notFoundRoute: currentRoute ? void 0 : notFoundRouteForPath(routes, pathname, currentLocale),
+		currentNavigation: navigationForLocale(navigation, currentLocale, pathname),
+		sections: sectionsForRoute(currentRoute)
+	};
+}
+function useRenderedRoutes(routes, notFoundRoute) {
+	const renderRoutes = (0, react.useMemo)(() => routes.map((route) => ({
+		...route,
+		component: resolveRouteComponent(route)
+	})), [routes]);
+	return {
+		renderRoutes,
+		NotFoundRouteComponent: notFoundRoute ? renderRoutes.find((route) => require_PageActions.isSameRoutePath(route.path, notFoundRoute.path))?.component : void 0
+	};
+}
+function emptySubscribe() {
+	return () => {};
+}
+function useStoredBannerDismissed(storageKey) {
+	return (0, react.useSyncExternalStore)(emptySubscribe, () => Boolean(storageKey && window.localStorage.getItem(storageKey) === "1"), () => false);
+}
+function useBannerState(config, currentLocale) {
+	const banner = config.banner;
+	const bannerContent = banner ? require_PageActions.resolveLocalizedText(banner.content, currentLocale, config.i18n?.defaultLocale) : "";
+	const bannerStorageKey = banner && bannerContent ? `clarify:banner:dismissed:${config.title}:${bannerContent}` : void 0;
+	const storedBannerDismissed = useStoredBannerDismissed(banner?.dismissible ? bannerStorageKey : void 0);
+	const [dismissedBannerKey, setDismissedBannerKey] = (0, react.useState)();
+	const activeBannerKey = banner ? JSON.stringify(banner) : void 0;
+	return {
+		activeBannerKey,
+		bannerResolved: !banner?.dismissible || !storedBannerDismissed,
+		dismissedBannerKey,
+		hasBanner: Boolean(banner && bannerContent) && !storedBannerDismissed && dismissedBannerKey !== activeBannerKey,
+		dismissBanner: () => setDismissedBannerKey(activeBannerKey)
+	};
+}
+function useStoredLocalePreference(explicitLocale) {
+	(0, react.useEffect)(() => {
+		if (explicitLocale) require_PageActions.storeLocalePreference(explicitLocale);
+	}, [explicitLocale]);
+}
+function useStoredLocaleRedirect(arg0) {
+	const { config, currentRoute, explicitLocale, location, navigate, pathname, storedLocale } = arg0;
+	(0, react.useEffect)(() => {
+		if (explicitLocale || !storedLocale || isDefaultLocale(config, storedLocale)) return;
+		const localizedPath = currentRoute?.alternates?.[storedLocale];
+		if (!localizedPath || require_PageActions.isSameRoutePath(localizedPath, pathname)) return;
+		navigate(`${localizedPath}${location.search}${location.hash}`, { replace: true });
+	}, [
+		config,
+		currentRoute,
+		explicitLocale,
+		location.hash,
+		location.search,
+		navigate,
+		pathname,
+		storedLocale
+	]);
+}
+function useRouteScroll(location) {
+	(0, react.useEffect)(() => {
+		if (location.hash) {
+			scrollToHash(location.hash);
+			return;
+		}
+		window.scrollTo({
+			top: 0,
+			left: 0
+		});
+		window.requestAnimationFrame(() => {
+			window.dispatchEvent(new Event("scroll"));
+		});
+	}, [location.hash, location.pathname]);
+}
+function useDocumentLanguage(currentLocale, currentLocaleConfig) {
+	(0, react.useEffect)(() => {
+		if (!currentLocale) return;
+		document.documentElement.lang = currentLocale;
+		if (currentLocaleConfig?.dir) document.documentElement.dir = currentLocaleConfig.dir;
+		else document.documentElement.removeAttribute("dir");
+	}, [currentLocale, currentLocaleConfig?.dir]);
+}
+function useDocumentMetadata(config, route) {
+	(0, react.useEffect)(() => {
+		applyDocumentMetadata(config, route);
+	}, [config, route]);
+}
+function headerOffsetForLayout(hasTabs, hasBanner) {
+	if (hasTabs && hasBanner) return "10rem";
+	if (hasTabs) return "7rem";
+	if (hasBanner) return "6.5rem";
+	return "3.5rem";
+}
+function sidebarScrollClassName(hasTabs, hasBanner) {
+	const classNames = ["clarify-sidebar-scroll lg:sticky lg:z-30 lg:overflow-y-auto lg:pb-8"];
+	if (hasTabs && hasBanner) classNames.push("lg:top-40 lg:h-(--clarify-sidebar-height-with-tabs-and-banner) lg:pt-10");
+	else if (hasTabs) classNames.push("lg:top-28 lg:h-(--clarify-sidebar-height-with-tabs) lg:pt-10");
+	else if (hasBanner) classNames.push("lg:top-26 lg:h-(--clarify-sidebar-height-with-banner) lg:pt-10");
+	else classNames.push("lg:top-14 lg:h-(--clarify-sidebar-height) lg:pt-10");
+	return (0, clsx.default)(classNames);
+}
+function contentClassName(hasTabs, hasBanner) {
+	const classNames = ["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"];
+	if (hasTabs && hasBanner) classNames.push("pt-26 lg:pt-40");
+	else if (hasTabs) classNames.push("pt-14 lg:pt-28");
+	else if (hasBanner) classNames.push("pt-26");
+	else classNames.push("pt-14");
+	return (0, clsx.default)(classNames);
+}
 function BuiltInNotFoundPage() {
 	const text = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
@@ -725,68 +845,129 @@ function AppShell(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 = 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);
+	const headerRef = (0, react.useRef)(null);
+	const { currentRoute, explicitLocale, storedLocale, currentLocale, currentLocaleConfig, notFoundRoute, currentNavigation, sections } = useRouteState(config, routes, navigation, pathname);
 	const text = require_PageActions.useBuiltInText(currentLocale);
-	const currentNavigation = navigationForLocale(navigation, currentLocale, pathname);
-	const sections = sectionsForRoute(currentRoute);
-	const [dismissedBannerKey, setDismissedBannerKey] = (0, react.useState)();
-	const activeBannerKey = config.banner ? JSON.stringify(config.banner) : void 0;
-	const hasBanner = Boolean(config.banner) && dismissedBannerKey !== activeBannerKey;
+	const { activeBannerKey, bannerResolved, dismissedBannerKey, hasBanner, dismissBanner } = useBannerState(config, currentLocale);
 	const hasTabs = Boolean(currentNavigation.tabs?.length);
-	const renderRoutes = (0, react.useMemo)(() => routes.map((route) => ({
-		...route,
-		component: resolveRouteComponent(route)
-	})), [routes]);
-	const NotFoundRouteComponent = notFoundRoute ? renderRoutes.find((route) => require_PageActions.isSameRoutePath(route.path, notFoundRoute.path))?.component : void 0;
-	(0, react.useEffect)(() => {
-		if (explicitLocale) require_PageActions.storeLocalePreference(explicitLocale);
-	}, [explicitLocale]);
-	(0, react.useEffect)(() => {
-		if (explicitLocale || !storedLocale || isDefaultLocale(config, storedLocale)) return;
-		const localizedPath = currentRoute?.alternates?.[storedLocale];
-		if (!localizedPath || require_PageActions.isSameRoutePath(localizedPath, pathname)) return;
-		navigate(`${localizedPath}${location.search}${location.hash}`, { replace: true });
-	}, [
+	const { renderRoutes, NotFoundRouteComponent } = useRenderedRoutes(routes, notFoundRoute);
+	useStoredLocalePreference(explicitLocale);
+	useStoredLocaleRedirect({
 		config,
 		currentRoute,
 		explicitLocale,
-		location.hash,
-		location.search,
+		location,
 		navigate,
 		pathname,
 		storedLocale
-	]);
-	(0, react.useEffect)(() => {
-		if (location.hash) {
-			scrollToHash(location.hash);
-			return;
-		}
-		window.scrollTo({
-			top: 0,
-			left: 0
+	});
+	useRouteScroll(location);
+	useDocumentLanguage(currentLocale, currentLocaleConfig);
+	useDocumentMetadata(config, currentRoute ?? notFoundRoute);
+	const layoutStyle = { "--clarify-header-offset": headerOffsetForLayout(hasTabs, hasBanner) };
+	function renderBannerSlot() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerSlot, {
+			activeBannerKey,
+			dismissedBannerKey,
+			bannerResolved,
+			onDismiss: dismissBanner,
+			config,
+			locale: currentLocale
 		});
-		window.requestAnimationFrame(() => {
-			window.dispatchEvent(new Event("scroll"));
+	}
+	function renderHeader() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Header, {
+			ref: headerRef,
+			config,
+			navigation: currentNavigation.items,
+			tabs: currentNavigation.tabs,
+			routes,
+			currentLocale,
+			currentRoute,
+			banner: renderBannerSlot()
 		});
-	}, [location.hash, location.pathname]);
-	(0, react.useEffect)(() => {
-		if (!currentLocale) return;
-		document.documentElement.lang = currentLocale;
-		if (currentLocaleConfig?.dir) document.documentElement.dir = currentLocaleConfig.dir;
-		else document.documentElement.removeAttribute("dir");
-	}, [currentLocale, currentLocaleConfig?.dir]);
-	(0, react.useEffect)(() => {
-		applyDocumentMetadata(config, currentRoute ?? notFoundRoute);
-	}, [
-		config,
-		currentRoute,
-		notFoundRoute
-	]);
+	}
+	function renderSidebar() {
+		return /* @__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: sidebarScrollClassName(hasTabs, hasBanner),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Navigation, { navigation: currentNavigation.items })
+			})
+		});
+	}
+	function renderRouteElements() {
+		return /* @__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 })
+		})] });
+	}
+	function renderMain() {
+		return /* @__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: renderRouteElements()
+				})
+			}, pathname)
+		});
+	}
+	function renderFooter() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__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, {})
+			})
+		] });
+	}
+	function renderContent() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: contentClassName(hasTabs, hasBanner),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.PageActionsProvider, {
+				route: currentRoute,
+				routePrefix: config.routePrefix,
+				children: [
+					renderMain(),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigation, {
+						navigation: currentNavigation.items,
+						currentRoute
+					}),
+					renderFooter()
+				]
+			})
+		});
+	}
+	function renderLayout() {
+		return /* @__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: layoutStyle,
+			children: [renderSidebar(), renderContent()]
+		});
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.LocaleContext.Provider, {
 		value: currentLocale,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlotsProvider, {
@@ -794,82 +975,8 @@ function AppShell(arg0) {
 			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,
-					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, {})
-								})
-							]
-						})
-					})]
-				})]
+				headerRef,
+				children: [renderHeader(), renderLayout()]
 			})
 		})
 	});
@@ -2246,4 +2353,4 @@ Object.defineProperty(exports, "useSlot", {
 	}
 });
 
-//# sourceMappingURL=ClarifyShell-B74Fq4UU.cjs.map
+//# sourceMappingURL=ClarifyShell-DJ4fOVOd.cjs.map