@clarify-labs/renderer 0.10.0 → 0.10.1

package/output/{ClarifyShell-CxhXBtsR.js → ClarifyShell-1LuBliwt.js}

@@ -1,18 +1,19 @@
-import { A as OpenApisContext, C as isExternalHref, D as useBuiltInText, E as copyTextToClipboard, M as useConfigOptional, N as useLocale, O as ConfigContext, S as themeCookieName, a as SectionProvider, b as storeLocalePreference, d as normalizeRoutePath, f as resolveLocalizedText, g as getStoredLocalePreference, h as useTheme, i as Navigation, j as useConfig, k as LocaleContext, m as ThemeProvider, r as Header, t as PageActionsProvider, u as isSameRoutePath, w as localizeHref } from "./PageActions-Dn8IGWoL.js";
+import { a as useConfig, i as OpenApiSpecsContext, n as ConfigContext, o as useConfigOptional, r as LocaleContext, s as useLocale, t as useBuiltInText } from "./i18n-DnqZHFT7.js";
+import { C as isExternalHref, E as copyTextToClipboard, S as themeCookieName, a as SectionProvider, b as storeLocalePreference, d as normalizeRoutePath, f as resolveLocalizedText, g as getStoredLocalePreference, h as useTheme, i as Navigation, m as ThemeProvider, o as useSectionStore, r as Header, t as PageActionsProvider, u as isSameRoutePath, w as localizeHref } from "./PageActions-D7K9LDGf.js";
 import clsx from "clsx";
 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";
 //#region source/slots/context.tsx
-var SlotContextValue = createContext(null);
+var UISlotContextValue = 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__ */ jsx(SlotContextValue.Provider, {
+	return /* @__PURE__ */ jsx(UISlotContextValue.Provider, {
 		value,
 		children
 	});
@@ -25,7 +26,7 @@ function SlotProvider(arg0) {
 * not mounted through a Clarify slot.
 */
 function useSlot() {
-	const context = useContext(SlotContextValue);
+	const context = useContext(UISlotContextValue);
 	if (!context) throw new Error("[clarify] useSlot must be called inside a slot component");
 	return context;
 }
@@ -36,8 +37,8 @@ var RuntimeSlotsContext = createContext({ slots: {} });
 * Makes the compiled slot registry and the current route available to every
 * {@link RuntimeSlot} in the tree. Mounted once near the top of `AppShell`.
 */
-function RuntimeSlotsProvider(arg0) {
-	const { slots, route, children } = arg0;
+function RuntimeSlotsProvider(props) {
+	const { slots, route, children } = props;
 	return /* @__PURE__ */ jsx(RuntimeSlotsContext.Provider, {
 		value: {
 			slots: slots ?? {},
@@ -58,8 +59,8 @@ 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 } = useContext(RuntimeSlotsContext);
 	const locale = useLocale();
 	const entries = slots[name];
@@ -90,7 +91,7 @@ function RuntimeSlot(arg0) {
 function SlotEntryRenderer(props) {
 	const { entry } = props;
 	if (entry._resolved) return /* @__PURE__ */ jsx(entry._resolved, {});
-	return /* @__PURE__ */ jsx(LazySlotComponent, { loader: entry.component });
+	return /* @__PURE__ */ jsx(LazySlotComponent, { loader: entry.loadComponent });
 }
 function LazySlotComponent(props) {
 	const { loader } = props;
@@ -243,13 +244,15 @@ function PageErrorPanel(props) {
 	async function copyStack() {
 		if (!await copyTextToClipboard(stackText)) return;
 		setCopiedStack(true);
-		window.setTimeout(() => setCopiedStack(false), 1600);
+		setTimeout(() => setCopiedStack(false), 1600);
 	}
 	return /* @__PURE__ */ 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)
@@ -385,7 +388,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__ */ jsx(X, {
@@ -619,6 +622,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) {
+	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 = useLocation();
+	const hashUpdateTimeoutRef = useRef(void 0);
+	const sections = useSectionStore((state) => state.sections);
+	const visibleSections = useSectionStore((state) => state.visibleSections);
+	useReleaseHashSyncOnManualScroll(hashScrollSuppressedUntilRef);
+	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;
@@ -659,6 +727,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) => {
@@ -696,25 +765,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) => isSameRoutePath(node.path, pathname) || hasPath(node.children ?? [], pathname));
+function hasPath(nodes, pathname, locale) {
+	return nodes.some((node) => 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) => isSameRoutePath(tab.path, pathname) || hasPath(tab.children, pathname))?.children ?? navigation.tabs[0]?.children ?? [],
-		tabs: navigation.tabs
+		items: tabs.find((tab) => 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();
@@ -767,7 +833,7 @@ function emptySubscribe() {
 	return () => {};
 }
 function useStoredBannerDismissed(storageKey) {
-	return useSyncExternalStore(emptySubscribe, () => Boolean(storageKey && window.localStorage.getItem(storageKey) === "1"), () => true);
+	return useSyncExternalStore(emptySubscribe, () => Boolean(storageKey && typeof window !== "undefined" && window.localStorage.getItem(storageKey) === "1"), () => true);
 }
 function useBannerState(config, currentLocale) {
 	const banner = config.banner;
@@ -785,7 +851,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;
 	useEffect(() => {
 		if (explicitLocale) storeLocalePreference(explicitLocale);
 	}, [explicitLocale]);
@@ -805,7 +871,9 @@ function useAppShellNavigationEffects(arg0) {
 		storedLocale
 	]);
 	useEffect(() => {
+		if (typeof window === "undefined") return;
 		if (location.hash) {
+			hashScrollSuppressedUntilRef.current = Date.now() + 1200;
 			scrollToHash(location.hash);
 			return;
 		}
@@ -816,7 +884,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;
@@ -903,6 +975,7 @@ function AppShell(arg0) {
 	const pathname = normalizeRoutePath(location.pathname);
 	const headerRef = useRef(null);
 	const headerTopAreaRef = useRef(null);
+	const hashScrollSuppressedUntilRef = useRef(0);
 	const { currentRoute, explicitLocale, storedLocale, currentLocale, currentLocaleConfig, notFoundRoute, currentNavigation, sections } = useRouteState(config, routes, navigation, pathname);
 	const text = useBuiltInText(currentLocale);
 	const { activeBannerKey, bannerResolved, dismissedBannerKey, hasBanner, dismissBanner } = useBannerState(config, currentLocale);
@@ -912,6 +985,7 @@ function AppShell(arg0) {
 		config,
 		currentRoute,
 		explicitLocale,
+		hashScrollSuppressedUntilRef,
 		location,
 		navigate,
 		pathname,
@@ -953,7 +1027,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__ */ jsx("div", {
 				className: clsx("clarify-sidebar-scroll lg:sticky lg:z-30 lg:overflow-y-auto lg:pb-8", layoutConfig.sidebarScrollClassName),
-				children: /* @__PURE__ */ jsx(Navigation, { navigation: currentNavigation.items })
+				children: /* @__PURE__ */ jsx(Navigation, {
+					navigation: currentNavigation.items,
+					currentLocale
+				})
 			})
 		});
 	}
@@ -1035,7 +1112,11 @@ function AppShell(arg0) {
 			children: /* @__PURE__ */ jsxs(SectionProvider, {
 				sections,
 				headerTopAreaRef,
-				children: [renderHeader(), renderLayout()]
+				children: [
+					/* @__PURE__ */ jsx(SectionHashSync, { hashScrollSuppressedUntilRef }),
+					renderHeader(),
+					renderLayout()
+				]
 			})
 		})
 	});
@@ -2145,10 +2226,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 {
@@ -2327,25 +2408,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;
+	const { config, routes, navigation, openApiSpecs, runtimeSlots, themeEditor = false } = props;
 	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
 		value: config,
-		children: /* @__PURE__ */ jsx(OpenApisContext.Provider, {
-			value: openApis,
+		children: /* @__PURE__ */ jsx(OpenApiSpecsContext.Provider, {
+			value: openApiSpecs,
 			children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(ThemeRoot, {
 				theme: config.theme,
 				themeEditor,
 				children: /* @__PURE__ */ jsx(AppShell, {
 					config,
 					routes,
-					navigation: navigation ?? [],
+					navigation: navigation ?? {
+						kind: "flat",
+						nodes: []
+					},
 					runtimeSlots
 				})
 			}) })
@@ -2355,4 +2439,4 @@ function ClarifyShell(props) {
 //#endregion
 export { themeBootstrapScript as a, AppShell as c, RenderErrorPanel as d, BuiltWithClarify as f, useSlot as g, SlotProvider as h, themeEditorPresets as i, PageFooter as l, RuntimeSlotsProvider as m, ThemeEditor as n, themePresets as o, RuntimeSlot as p, applyThemeVariables as r, themeStorageKey as s, ClarifyShell as t, PageBanner as u };
 
-//# sourceMappingURL=ClarifyShell-CxhXBtsR.js.map
+//# sourceMappingURL=ClarifyShell-1LuBliwt.js.map