@clarify-labs/renderer 0.8.2 → 0.9.1

package/output/{ClarifyShell-BPv2bxI4.js → ClarifyShell-291_IXxJ.js}

@@ -1,6 +1,6 @@
-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 { 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-DaXQgMYP.js";
 import clsx from "clsx";
-import { Component, Suspense, createContext, lazy, useContext, useEffect, useMemo, useState } from "react";
+import { Component, Suspense, createContext, lazy, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } 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";
@@ -580,9 +580,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__ */ jsx(PageBanner, {
 			currentLocale: locale,
 			onDismiss
@@ -683,6 +683,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 = useMemo(() => routes.map((route) => ({
+		...route,
+		component: resolveRouteComponent(route)
+	})), [routes]);
+	return {
+		renderRoutes,
+		NotFoundRouteComponent: notFoundRoute ? renderRoutes.find((route) => isSameRoutePath(route.path, notFoundRoute.path))?.component : void 0
+	};
+}
+function emptySubscribe() {
+	return () => {};
+}
+function useStoredBannerDismissed(storageKey) {
+	return useSyncExternalStore(emptySubscribe, () => Boolean(storageKey && window.localStorage.getItem(storageKey) === "1"), () => false);
+}
+function useBannerState(config, currentLocale) {
+	const banner = config.banner;
+	const bannerContent = banner ? 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] = 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) {
+	useEffect(() => {
+		if (explicitLocale) storeLocalePreference(explicitLocale);
+	}, [explicitLocale]);
+}
+function useStoredLocaleRedirect(arg0) {
+	const { config, currentRoute, explicitLocale, location, navigate, pathname, storedLocale } = arg0;
+	useEffect(() => {
+		if (explicitLocale || !storedLocale || isDefaultLocale(config, storedLocale)) return;
+		const localizedPath = currentRoute?.alternates?.[storedLocale];
+		if (!localizedPath || 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) {
+	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) {
+	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) {
+	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 clsx(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 clsx(classNames);
+}
 function BuiltInNotFoundPage() {
 	const text = useBuiltInText();
 	return /* @__PURE__ */ jsxs("section", {
@@ -723,68 +843,129 @@ function AppShell(arg0) {
 	const location = useLocation();
 	const navigate = useNavigate();
 	const pathname = 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 = useRef(null);
+	const { currentRoute, explicitLocale, storedLocale, currentLocale, currentLocaleConfig, notFoundRoute, currentNavigation, sections } = useRouteState(config, routes, navigation, pathname);
 	const text = useBuiltInText(currentLocale);
-	const currentNavigation = navigationForLocale(navigation, currentLocale, pathname);
-	const sections = sectionsForRoute(currentRoute);
-	const [dismissedBannerKey, setDismissedBannerKey] = 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 = useMemo(() => routes.map((route) => ({
-		...route,
-		component: resolveRouteComponent(route)
-	})), [routes]);
-	const NotFoundRouteComponent = notFoundRoute ? renderRoutes.find((route) => isSameRoutePath(route.path, notFoundRoute.path))?.component : void 0;
-	useEffect(() => {
-		if (explicitLocale) storeLocalePreference(explicitLocale);
-	}, [explicitLocale]);
-	useEffect(() => {
-		if (explicitLocale || !storedLocale || isDefaultLocale(config, storedLocale)) return;
-		const localizedPath = currentRoute?.alternates?.[storedLocale];
-		if (!localizedPath || 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
-	]);
-	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__ */ jsx(BannerSlot, {
+			activeBannerKey,
+			dismissedBannerKey,
+			bannerResolved,
+			onDismiss: dismissBanner,
+			config,
+			locale: currentLocale
 		});
-		window.requestAnimationFrame(() => {
-			window.dispatchEvent(new Event("scroll"));
+	}
+	function renderHeader() {
+		return /* @__PURE__ */ jsx(Header, {
+			ref: headerRef,
+			config,
+			navigation: currentNavigation.items,
+			tabs: currentNavigation.tabs,
+			routes,
+			currentLocale,
+			currentRoute,
+			banner: renderBannerSlot()
 		});
-	}, [location.hash, location.pathname]);
-	useEffect(() => {
-		if (!currentLocale) return;
-		document.documentElement.lang = currentLocale;
-		if (currentLocaleConfig?.dir) document.documentElement.dir = currentLocaleConfig.dir;
-		else document.documentElement.removeAttribute("dir");
-	}, [currentLocale, currentLocaleConfig?.dir]);
-	useEffect(() => {
-		applyDocumentMetadata(config, currentRoute ?? notFoundRoute);
-	}, [
-		config,
-		currentRoute,
-		notFoundRoute
-	]);
+	}
+	function renderSidebar() {
+		return /* @__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: sidebarScrollClassName(hasTabs, hasBanner),
+				children: /* @__PURE__ */ jsx(Navigation, { navigation: currentNavigation.items })
+			})
+		});
+	}
+	function renderRouteElements() {
+		return /* @__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 })
+		})] });
+	}
+	function renderMain() {
+		return /* @__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: renderRouteElements()
+				})
+			}, pathname)
+		});
+	}
+	function renderFooter() {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__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, {})
+			})
+		] });
+	}
+	function renderContent() {
+		return /* @__PURE__ */ jsx("div", {
+			className: contentClassName(hasTabs, hasBanner),
+			children: /* @__PURE__ */ jsxs(PageActionsProvider, {
+				route: currentRoute,
+				routePrefix: config.routePrefix,
+				children: [
+					renderMain(),
+					/* @__PURE__ */ jsx(PageNavigation, {
+						navigation: currentNavigation.items,
+						currentRoute
+					}),
+					renderFooter()
+				]
+			})
+		});
+	}
+	function renderLayout() {
+		return /* @__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: layoutStyle,
+			children: [renderSidebar(), renderContent()]
+		});
+	}
 	return /* @__PURE__ */ jsx(LocaleContext.Provider, {
 		value: currentLocale,
 		children: /* @__PURE__ */ jsx(RuntimeSlotsProvider, {
@@ -792,82 +973,8 @@ function AppShell(arg0) {
 			route: currentRoute,
 			children: /* @__PURE__ */ jsxs(SectionProvider, {
 				sections,
-				children: [/* @__PURE__ */ jsx(Header, {
-					config,
-					navigation: currentNavigation.items,
-					tabs: currentNavigation.tabs,
-					routes,
-					currentLocale,
-					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, {})
-								})
-							]
-						})
-					})]
-				})]
+				headerRef,
+				children: [renderHeader(), renderLayout()]
 			})
 		})
 	});
@@ -2155,4 +2262,4 @@ function ClarifyShell(props) {
 //#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=ClarifyShell-BPv2bxI4.js.map
+//# sourceMappingURL=ClarifyShell-291_IXxJ.js.map