@clarify-labs/renderer 0.10.0 → 0.10.2

package/output/{ClarifyShell-DjLRRW8T.cjs → ClarifyShell-C6li72Ce.cjs}

@@ -1,5 +1,6 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_PageActions = require("./PageActions-GS_cxeJN.cjs");
+const require_i18n = require("./i18n-b4iTLeia.cjs");
+const require_PageActions = require("./PageActions-BjB6PYmL.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
 let react = require("react");
@@ -7,14 +8,14 @@ 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);
+var UISlotContextValue = (0, react.createContext)(null);
 /**
-* Provides an isolated {@link SlotContext} for a single slot component.
+* Provides an isolated {@link UISlotContext} 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, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UISlotContextValue.Provider, {
 		value,
 		children
 	});
@@ -27,7 +28,7 @@ function SlotProvider(arg0) {
 * not mounted through a Clarify slot.
 */
 function useSlot() {
-	const context = (0, react.useContext)(SlotContextValue);
+	const context = (0, react.useContext)(UISlotContextValue);
 	if (!context) throw new Error("[clarify] useSlot must be called inside a slot component");
 	return context;
 }
@@ -38,8 +39,8 @@ 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;
+function RuntimeSlotsProvider(props) {
+	const { slots, route, children } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlotsContext.Provider, {
 		value: {
 			slots: slots ?? {},
@@ -60,10 +61,10 @@ function RuntimeSlotsProvider(arg0) {
 * compatibility with `renderToString`. Otherwise, `React.lazy` + `Suspense`
 * is used for client-side code-splitting.
 */
-function RuntimeSlot(arg0) {
-	const { name, default: DefaultComponent } = arg0;
+function RuntimeSlot(props) {
+	const { name, default: DefaultComponent } = props;
 	const { slots, route } = (0, react.useContext)(RuntimeSlotsContext);
-	const locale = require_PageActions.useLocale();
+	const locale = require_i18n.useLocale();
 	const entries = slots[name];
 	if (!entries || entries.length === 0) return DefaultComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultComponent, {}) : null;
 	if (name.endsWith(".replace")) {
@@ -92,7 +93,7 @@ function RuntimeSlot(arg0) {
 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 });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LazySlotComponent, { loader: entry.loadComponent });
 }
 function LazySlotComponent(props) {
 	const { loader } = props;
@@ -124,7 +125,7 @@ var clarify_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UT
 //#endregion
 //#region source/app/BuiltWithClarify.tsx
 function BuiltWithClarify() {
-	const t = require_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 		href: "https://clarify.pub",
 		target: "_blank",
@@ -149,8 +150,8 @@ function BuiltWithClarify() {
 //#region source/app/RenderErrorPanel.tsx
 function RenderErrorPanel(props) {
 	const { title, description, eyebrowLabel = "Render error", action, metadata = [], detailsLabel, detailsHeaderAction, detailsContent, titleId = "clarify-render-error-title", refreshLabel, onRefresh } = props;
-	const t = require_PageActions.useBuiltInText();
-	const config = require_PageActions.useConfigOptional();
+	const t = require_i18n.useBuiltInText();
+	const config = require_i18n.useConfigOptional();
 	const resolvedRefreshLabel = refreshLabel ?? t("renderError.reload");
 	const resolvedVersion = config?.version ?? "0.0.0";
 	const resolvedMetadata = [...metadata, {
@@ -245,13 +246,15 @@ function PageErrorPanel(props) {
 	async function copyStack() {
 		if (!await require_PageActions.copyTextToClipboard(stackText)) return;
 		setCopiedStack(true);
-		window.setTimeout(() => setCopiedStack(false), 1600);
+		setTimeout(() => setCopiedStack(false), 1600);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderErrorPanel, {
 		title,
 		description,
 		refreshLabel: reloadLabel,
-		onRefresh: () => window.location.reload(),
+		onRefresh: () => {
+			if (typeof window !== "undefined") window.location.reload();
+		},
 		metadata: [[pathLabel, path], [typeLabel, error.name]].map(([label, value]) => ({
 			label,
 			value: String(value)
@@ -345,7 +348,7 @@ function PageBannerLink(props) {
 }
 function PageBanner(props) {
 	const { currentLocale, onDismiss } = props;
-	const config = require_PageActions.useConfig();
+	const config = require_i18n.useConfig();
 	const banner = config.banner;
 	const content = banner ? require_PageActions.resolveLocalizedText(banner.content, currentLocale, config.i18n?.defaultLocale) : "";
 	const storageKey = (0, react.useMemo)(() => {
@@ -387,7 +390,7 @@ function PageBanner(props) {
 			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",
 			onClick: () => {
-				if (storageKey) window.localStorage.setItem(storageKey, "1");
+				if (storageKey && typeof window !== "undefined") window.localStorage.setItem(storageKey, "1");
 				setDismissed(true);
 			},
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
@@ -435,7 +438,7 @@ function SocialLink(arg0) {
 	});
 }
 function PageFooter() {
-	const config = require_PageActions.useConfig();
+	const config = require_i18n.useConfig();
 	const locale = localeForPath(config, (0, react_router_dom.useLocation)().pathname);
 	const footer = config.footer;
 	const links = footer?.links ?? [];
@@ -473,7 +476,7 @@ function flattenNavigation(nodes) {
 }
 function PageNavigation(arg0) {
 	const { navigation, currentRoute } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	if (!currentRoute) return null;
 	const pageRoutes = flattenNavigation(navigation);
 	const currentIndex = pageRoutes.findIndex((route) => require_PageActions.isSameRoutePath(route.path, currentRoute.path));
@@ -495,7 +498,7 @@ function PageNavigation(arg0) {
 }
 function PageNavigationLink(arg0) {
 	const { direction, route } = arg0;
-	const t = require_PageActions.useBuiltInText();
+	const t = require_i18n.useBuiltInText();
 	if (!route) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden @3xl:block" });
 	const isNext = direction === "next";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
@@ -621,6 +624,71 @@ function PageSkeleton() {
 	});
 }
 //#endregion
+//#region source/app/SectionHashSync.tsx
+var HASH_UPDATE_DEBOUNCE_MS = 120;
+function replaceHash(sectionId) {
+	if (typeof window === "undefined") return;
+	const nextHash = sectionId ? `#${encodeURIComponent(sectionId)}` : "";
+	if (window.location.hash === nextHash) return;
+	window.history.replaceState(window.history.state, "", `${window.location.pathname}${window.location.search}${nextHash}`);
+}
+function useReleaseHashSyncOnManualScroll(hashScrollSuppressedUntilRef) {
+	(0, react.useEffect)(() => {
+		if (typeof window === "undefined") return;
+		const release = () => {
+			hashScrollSuppressedUntilRef.current = 0;
+		};
+		const releaseOnScrollKey = (event) => {
+			if ([
+				"ArrowDown",
+				"ArrowUp",
+				"End",
+				"Home",
+				"PageDown",
+				"PageUp",
+				" "
+			].includes(event.key)) release();
+		};
+		window.addEventListener("wheel", release, { passive: true });
+		window.addEventListener("touchmove", release, { passive: true });
+		window.addEventListener("keydown", releaseOnScrollKey);
+		return () => {
+			window.removeEventListener("wheel", release);
+			window.removeEventListener("touchmove", release);
+			window.removeEventListener("keydown", releaseOnScrollKey);
+		};
+	}, [hashScrollSuppressedUntilRef]);
+}
+function SectionHashSync(arg0) {
+	const { hashScrollSuppressedUntilRef } = arg0;
+	const location = (0, react_router_dom.useLocation)();
+	const hashUpdateTimeoutRef = (0, react.useRef)(void 0);
+	const sections = require_PageActions.useSectionStore((state) => state.sections);
+	const visibleSections = require_PageActions.useSectionStore((state) => state.visibleSections);
+	useReleaseHashSyncOnManualScroll(hashScrollSuppressedUntilRef);
+	(0, react.useEffect)(() => {
+		if (!sections.length || !visibleSections.length) return;
+		const visibleSectionId = visibleSections.find((id) => id !== "_top" && sections.some((section) => section.id === id));
+		const hashSectionId = location.hash ? safeDecodeURIComponent(location.hash.slice(1)) : void 0;
+		if (hashSectionId && Date.now() < hashScrollSuppressedUntilRef.current && !visibleSections.includes(hashSectionId)) return;
+		hashUpdateTimeoutRef.current = setTimeout(() => {
+			replaceHash(visibleSections[0] === "_top" ? void 0 : visibleSectionId);
+		}, HASH_UPDATE_DEBOUNCE_MS);
+		return () => {
+			if (hashUpdateTimeoutRef.current !== void 0) {
+				clearTimeout(hashUpdateTimeoutRef.current);
+				hashUpdateTimeoutRef.current = void 0;
+			}
+		};
+	}, [
+		hashScrollSuppressedUntilRef,
+		location.hash,
+		sections,
+		visibleSections
+	]);
+	return null;
+}
+//#endregion
 //#region source/app/AppShell.tsx
 function BannerSlot(props) {
 	const { activeBannerKey, dismissedBannerKey, bannerResolved, onDismiss, config, locale } = props;
@@ -661,6 +729,7 @@ function resolveRouteComponent(route) {
 	return route.component;
 }
 function scrollToHash(hash) {
+	if (typeof window === "undefined" || typeof document === "undefined") return;
 	if (!hash) return;
 	const targetId = safeDecodeURIComponent(hash.slice(1));
 	const tryScrollToTarget = (attempt = 0) => {
@@ -698,25 +767,22 @@ function storedLocaleForConfig(config) {
 function isDefaultLocale(config, locale) {
 	return Boolean(locale && config.i18n?.defaultLocale === locale);
 }
-function isTabbedNavigation(navigation) {
-	return !Array.isArray(navigation) && "tabs" in navigation;
-}
-function hasPath(nodes, pathname) {
-	return nodes.some((node) => require_PageActions.isSameRoutePath(node.path, pathname) || hasPath(node.children ?? [], pathname));
+function hasPath(nodes, pathname, locale) {
+	return nodes.some((node) => require_PageActions.isSameRoutePath(node.path, pathname, locale) || hasPath(node.children ?? [], pathname, locale));
 }
-function navigationFromTabs(navigation, pathname) {
+function navigationFromTabs(tabs, pathname, locale) {
 	return {
-		items: navigation.tabs.find((tab) => require_PageActions.isSameRoutePath(tab.path, pathname) || hasPath(tab.children, pathname))?.children ?? navigation.tabs[0]?.children ?? [],
-		tabs: navigation.tabs
+		items: tabs.find((tab) => require_PageActions.isSameRoutePath(tab.path, pathname, locale) || hasPath(tab.children, pathname, locale))?.children ?? tabs[0]?.children ?? [],
+		tabs
 	};
 }
 function navigationForLocale(navigation, locale, pathname) {
-	if (Array.isArray(navigation)) return { items: navigation };
-	if (isTabbedNavigation(navigation)) return navigationFromTabs(navigation, pathname);
-	if (!locale) return { items: [] };
-	const localizedNavigation = navigation[locale];
-	if (!localizedNavigation) return { items: [] };
-	return Array.isArray(localizedNavigation) ? { items: localizedNavigation } : navigationFromTabs(localizedNavigation, pathname);
+	switch (navigation.kind) {
+		case "flat": return { items: navigation.nodes };
+		case "tabbed": return navigationFromTabs(navigation.tabs, pathname, locale);
+		case "localized": return { items: locale ? navigation.locales[locale] ?? [] : [] };
+		case "localized-tabbed": return locale && navigation.locales[locale] ? navigationFromTabs(navigation.locales[locale].tabs, pathname, locale) : { items: [] };
+	}
 }
 function pageTitle(config, route) {
 	const routeTitle = route?.title?.trim();
@@ -769,7 +835,7 @@ function emptySubscribe() {
 	return () => {};
 }
 function useStoredBannerDismissed(storageKey) {
-	return (0, react.useSyncExternalStore)(emptySubscribe, () => Boolean(storageKey && window.localStorage.getItem(storageKey) === "1"), () => true);
+	return (0, react.useSyncExternalStore)(emptySubscribe, () => Boolean(storageKey && typeof window !== "undefined" && window.localStorage.getItem(storageKey) === "1"), () => true);
 }
 function useBannerState(config, currentLocale) {
 	const banner = config.banner;
@@ -787,7 +853,7 @@ function useBannerState(config, currentLocale) {
 	};
 }
 function useAppShellNavigationEffects(arg0) {
-	const { config, currentRoute, explicitLocale, location, navigate, pathname, storedLocale } = arg0;
+	const { config, currentRoute, explicitLocale, hashScrollSuppressedUntilRef, location, navigate, pathname, storedLocale } = arg0;
 	(0, react.useEffect)(() => {
 		if (explicitLocale) require_PageActions.storeLocalePreference(explicitLocale);
 	}, [explicitLocale]);
@@ -807,7 +873,9 @@ function useAppShellNavigationEffects(arg0) {
 		storedLocale
 	]);
 	(0, react.useEffect)(() => {
+		if (typeof window === "undefined") return;
 		if (location.hash) {
+			hashScrollSuppressedUntilRef.current = Date.now() + 1200;
 			scrollToHash(location.hash);
 			return;
 		}
@@ -818,7 +886,11 @@ function useAppShellNavigationEffects(arg0) {
 		window.requestAnimationFrame(() => {
 			window.dispatchEvent(new Event("scroll"));
 		});
-	}, [location.hash, location.pathname]);
+	}, [
+		hashScrollSuppressedUntilRef,
+		location.hash,
+		location.pathname
+	]);
 }
 function useAppShellDocumentEffects(arg0) {
 	const { currentLocale, currentLocaleConfig, config, route } = arg0;
@@ -864,7 +936,7 @@ function getAppShellLayoutConfig(hasTabs, hasBanner) {
 	return appShellLayoutConfig[getLayoutVariant(hasTabs, hasBanner)];
 }
 function BuiltInNotFoundPage() {
-	const text = require_PageActions.useBuiltInText();
+	const text = require_i18n.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: "mx-auto flex min-h-(--clarify-error-page-min-height) max-w-2xl flex-col justify-center py-16 text-(--clarify-theme-tokens-colors-foreground)",
 		"aria-labelledby": "clarify-not-found-title",
@@ -905,8 +977,9 @@ function AppShell(arg0) {
 	const pathname = require_PageActions.normalizeRoutePath(location.pathname);
 	const headerRef = (0, react.useRef)(null);
 	const headerTopAreaRef = (0, react.useRef)(null);
+	const hashScrollSuppressedUntilRef = (0, react.useRef)(0);
 	const { currentRoute, explicitLocale, storedLocale, currentLocale, currentLocaleConfig, notFoundRoute, currentNavigation, sections } = useRouteState(config, routes, navigation, pathname);
-	const text = require_PageActions.useBuiltInText(currentLocale);
+	const text = require_i18n.useBuiltInText(currentLocale);
 	const { activeBannerKey, bannerResolved, dismissedBannerKey, hasBanner, dismissBanner } = useBannerState(config, currentLocale);
 	const layoutConfig = getAppShellLayoutConfig(Boolean(currentNavigation.tabs?.length), hasBanner);
 	const { renderRoutes, NotFoundRouteComponent } = useRenderedRoutes(routes, notFoundRoute);
@@ -914,6 +987,7 @@ function AppShell(arg0) {
 		config,
 		currentRoute,
 		explicitLocale,
+		hashScrollSuppressedUntilRef,
 		location,
 		navigate,
 		pathname,
@@ -955,7 +1029,10 @@ function AppShell(arg0) {
 			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", layoutConfig.sidebarScrollClassName),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Navigation, { navigation: currentNavigation.items })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Navigation, {
+					navigation: currentNavigation.items,
+					currentLocale
+				})
 			})
 		});
 	}
@@ -1029,7 +1106,7 @@ function AppShell(arg0) {
 			children: [renderSidebar(), renderContent()]
 		});
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.LocaleContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_i18n.LocaleContext.Provider, {
 		value: currentLocale,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlotsProvider, {
 			slots: runtimeSlots,
@@ -1037,7 +1114,11 @@ function AppShell(arg0) {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.SectionProvider, {
 				sections,
 				headerTopAreaRef,
-				children: [renderHeader(), renderLayout()]
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHashSync, { hashScrollSuppressedUntilRef }),
+					renderHeader(),
+					renderLayout()
+				]
 			})
 		})
 	});
@@ -2147,10 +2228,10 @@ function useThemeEditorState(arg0) {
 		try {
 			await navigator.clipboard.writeText(configSource);
 			setCopyState("copied");
-			window.setTimeout(() => setCopyState("idle"), 1400);
+			setTimeout(() => setCopyState("idle"), 1400);
 		} catch {
 			setCopyState("failed");
-			window.setTimeout(() => setCopyState("idle"), 1400);
+			setTimeout(() => setCopyState("idle"), 1400);
 		}
 	}
 	return {
@@ -2329,25 +2410,28 @@ function ThemeRoot(props) {
 //#region source/runtime/ClarifyShell.tsx
 /**
 * Shared provider chain used by both client-side render and server-side
-* renderToHTML.  Wraps AppShell with ConfigContext → OpenApisContext →
+* renderToHTML.  Wraps AppShell with ConfigContext → OpenApiSpecsContext →
 * 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, {
+	const { config, routes, navigation, openApiSpecs, runtimeSlots, themeEditor = false } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_i18n.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_i18n.OpenApiSpecsContext.Provider, {
+			value: openApiSpecs,
 			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 ?? [],
+					navigation: navigation ?? {
+						kind: "flat",
+						nodes: []
+					},
 					runtimeSlots
 				})
 			}) })
@@ -2452,4 +2536,4 @@ Object.defineProperty(exports, "useSlot", {
 	}
 });
 
-//# sourceMappingURL=ClarifyShell-DjLRRW8T.cjs.map
+//# sourceMappingURL=ClarifyShell-C6li72Ce.cjs.map