@clarify-labs/renderer 0.6.7 → 0.7.0

package/output/{shell-D4tS8Jts.cjs → shell-xxhV0p7k.cjs}

@@ -18,6 +18,9 @@ function useClarifyConfig() {
 	if (!config) throw new Error("[clarify] useClarifyConfig must be used within a ClarifyConfigContext.Provider");
 	return config;
 }
+function useClarifyLocale() {
+	return (0, react.useContext)(ClarifyLocaleContext);
+}
 function useOpenApis() {
 	return (0, react.useContext)(OpenApisContext);
 }
@@ -330,10 +333,10 @@ function ContentActions(arg0) {
 	const primaryAction = actions[0];
 	const PrimaryIcon = primaryAction && copied === primaryAction.key ? lucide_react.Check : primaryAction?.icon ?? lucide_react.PencilLine;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `clarify-content-actions sticky z-20 flex justify-end py-4 ${hasTabs ? "top-16 lg:top-30" : "top-16"}`,
+		className: `clarify-content-actions pointer-events-none sticky z-20 flex justify-end py-4 ${hasTabs ? "top-16 lg:top-30" : "top-16"}`,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
 			as: "div",
-			className: "clarify-content-actions-menu relative inline-flex text-sm font-medium",
+			className: "clarify-content-actions-menu pointer-events-auto relative inline-flex text-sm font-medium",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "clarify-content-actions-group inline-flex overflow-hidden rounded-full border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)/90 shadow-sm shadow-zinc-900/5 backdrop-blur",
 				children: [primaryAction ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -482,9 +485,178 @@ function ContentActions(arg0) {
 	});
 }
 //#endregion
+//#region source/theme/variables.ts
+var themeStorageKey = "clarify:theme";
+var clarifyThemePresets = {
+	default: {
+		preset: "default",
+		tokens: {
+			colors: {
+				primary: "#047857",
+				accent: "#0D9488",
+				background: "#ffffff",
+				foreground: "#111827",
+				surface: "#ffffff",
+				muted: "#64748b",
+				border: "rgb(15 23 42 / 0.12)",
+				codeBackground: "#f6fbf8"
+			},
+			radius: {
+				sm: "6px",
+				md: "10px",
+				lg: "14px",
+				xl: "18px"
+			}
+		},
+		layout: { maxWidth: "82rem" },
+		editor: false
+	},
+	base: {
+		preset: "base",
+		tokens: {
+			colors: {
+				primary: "#18181b",
+				accent: "#52525b",
+				background: "#ffffff",
+				foreground: "#18181b",
+				surface: "#ffffff",
+				muted: "#71717a",
+				border: "rgb(24 24 27 / 0.12)",
+				codeBackground: "#f4f4f5"
+			},
+			radius: {
+				sm: "6px",
+				md: "8px",
+				lg: "12px",
+				xl: "16px"
+			}
+		},
+		layout: { maxWidth: "80rem" },
+		editor: false
+	}
+};
+function cloneThemeColorValue(value) {
+	return typeof value === "string" ? value : { ...value };
+}
+function cloneTheme(theme) {
+	return {
+		preset: theme.preset,
+		tokens: {
+			colors: {
+				primary: cloneThemeColorValue(theme.tokens.colors.primary),
+				accent: cloneThemeColorValue(theme.tokens.colors.accent),
+				background: cloneThemeColorValue(theme.tokens.colors.background),
+				foreground: cloneThemeColorValue(theme.tokens.colors.foreground),
+				surface: cloneThemeColorValue(theme.tokens.colors.surface),
+				muted: cloneThemeColorValue(theme.tokens.colors.muted),
+				border: cloneThemeColorValue(theme.tokens.colors.border),
+				codeBackground: cloneThemeColorValue(theme.tokens.colors.codeBackground)
+			},
+			radius: { ...theme.tokens.radius }
+		},
+		layout: { ...theme.layout },
+		editor: theme.editor
+	};
+}
+function isModeColorValue(value) {
+	return typeof value === "object" && value !== null;
+}
+function resolveThemeColorValue(value, resolvedTheme = "light") {
+	if (!isModeColorValue(value)) return value;
+	return value[resolvedTheme] ?? value.light ?? value.dark ?? "";
+}
+function resolveThemeColors(colors, resolvedTheme = "light") {
+	return {
+		primary: resolveThemeColorValue(colors.primary, resolvedTheme),
+		accent: resolveThemeColorValue(colors.accent, resolvedTheme),
+		background: resolveThemeColorValue(colors.background, resolvedTheme),
+		foreground: resolveThemeColorValue(colors.foreground, resolvedTheme),
+		surface: resolveThemeColorValue(colors.surface, resolvedTheme),
+		muted: resolveThemeColorValue(colors.muted, resolvedTheme),
+		border: resolveThemeColorValue(colors.border, resolvedTheme),
+		codeBackground: resolveThemeColorValue(colors.codeBackground, resolvedTheme)
+	};
+}
+function matchesPresetTheme(theme) {
+	const preset = clarifyThemePresets[theme.preset];
+	return JSON.stringify({
+		tokens: theme.tokens,
+		layout: theme.layout
+	}) === JSON.stringify({
+		tokens: preset.tokens,
+		layout: preset.layout
+	});
+}
+function effectiveTheme(theme, resolvedTheme) {
+	if (resolvedTheme !== "dark" || !matchesPresetTheme(theme)) return theme;
+	return {
+		...theme,
+		tokens: {
+			...theme.tokens,
+			colors: {
+				...theme.tokens.colors,
+				background: "#09090b",
+				foreground: "#ffffff",
+				surface: "#18181b",
+				muted: "#a1a1aa",
+				border: "rgb(255 255 255 / 0.1)",
+				codeBackground: "#18181b"
+			}
+		}
+	};
+}
+function themeToCssVariables(theme, resolvedTheme) {
+	const resolved = effectiveTheme(theme, resolvedTheme);
+	const colors = resolveThemeColors(resolved.tokens.colors, resolvedTheme);
+	const { radius } = resolved.tokens;
+	return {
+		"--clarify-theme-tokens-colors-primary": colors.primary,
+		"--clarify-theme-tokens-colors-accent": colors.accent,
+		"--clarify-theme-tokens-colors-background": colors.background,
+		"--clarify-theme-tokens-colors-foreground": colors.foreground,
+		"--clarify-theme-tokens-colors-surface": colors.surface,
+		"--clarify-theme-tokens-colors-muted": colors.muted,
+		"--clarify-theme-tokens-colors-border": colors.border,
+		"--clarify-theme-tokens-colors-code-background": colors.codeBackground,
+		"--clarify-theme-tokens-radius-sm": radius.sm,
+		"--clarify-theme-tokens-radius-md": radius.md,
+		"--clarify-theme-tokens-radius-lg": radius.lg,
+		"--clarify-theme-tokens-radius-xl": radius.xl,
+		"--clarify-theme-layout-max-width": resolved.layout.maxWidth
+	};
+}
+function themeBootstrapScript(theme = clarifyThemePresets.default) {
+	const darkVariables = themeToCssVariables(theme, "dark");
+	const lightVariables = themeToCssVariables(theme, "light");
+	return `(function(){try{var e=localStorage.getItem(${JSON.stringify(themeStorageKey)});var t=e==='dark'||e==='light'||e==='system'?e:'system';var r=t==='system'?window.matchMedia('(prefers-color-scheme: dark)').matches:t==='dark';var v=r?${JSON.stringify(darkVariables)}:${JSON.stringify(lightVariables)};var s=document.documentElement.style;for(var k in v)s.setProperty(k,v[k]);document.documentElement.classList.toggle('dark',r);document.documentElement.style.colorScheme=r?'dark':'light'}catch(e){}})();`;
+}
+function uniqueElements(elements) {
+	return Array.from(new Set(elements));
+}
+function resolveThemeVariableTargets(target) {
+	if (typeof document === "undefined") return [];
+	if (target instanceof HTMLElement) return [target];
+	if (typeof target === "string") return Array.from(document.querySelectorAll(target));
+	return uniqueElements([document.documentElement, ...Array.from(document.querySelectorAll(".clarify-app"))]);
+}
+function applyThemeCssVariables(variables, targets) {
+	const previousValues = /* @__PURE__ */ new Map();
+	for (const element of targets) {
+		const elementPreviousValues = /* @__PURE__ */ new Map();
+		for (const [property, value] of Object.entries(variables)) {
+			elementPreviousValues.set(property, element.style.getPropertyValue(property));
+			element.style.setProperty(property, value);
+		}
+		previousValues.set(element, elementPreviousValues);
+	}
+	return () => {
+		for (const [element, elementPreviousValues] of previousValues) for (const [property, previousValue] of elementPreviousValues) if (previousValue) element.style.setProperty(property, previousValue);
+		else element.style.removeProperty(property);
+	};
+}
+//#endregion
 //#region source/theme/ThemeProvider.tsx
 var ThemeContext = (0, react.createContext)(null);
-var storageKey = "clarify:theme";
 function getSystemTheme() {
 	if (typeof window === "undefined") return "light";
 	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -492,7 +664,7 @@ function getSystemTheme() {
 function getStoredTheme() {
 	if (typeof window === "undefined") return "system";
 	try {
-		const storedTheme = window.localStorage.getItem(storageKey);
+		const storedTheme = window.localStorage.getItem(themeStorageKey);
 		return storedTheme === "light" || storedTheme === "dark" || storedTheme === "system" ? storedTheme : "system";
 	} catch {
 		return "system";
@@ -501,7 +673,7 @@ function getStoredTheme() {
 function storeTheme(theme) {
 	if (typeof window === "undefined") return;
 	try {
-		window.localStorage.setItem(storageKey, theme);
+		window.localStorage.setItem(themeStorageKey, theme);
 	} catch {}
 }
 function applyTheme(resolvedTheme) {
@@ -846,7 +1018,7 @@ function NavigationGroup(arg0) {
 	const [pathname, sections] = useInitialValue([normalizeRoutePath((0, react_router_dom.useLocation)().pathname), useSectionStore((s) => s.sections)], isInsideMobileNavigation);
 	const isActiveGroup = group.links.findIndex((link) => isSameRoutePath(link.href, pathname)) !== -1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-		className: (0, clsx.default)("clarify-navigation-group relative mt-6", className),
+		className: (0, clsx.default)("clarify-navigation-group relative mb-6", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h2", {
 			className: "clarify-navigation-group-title flex items-center gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
@@ -1045,7 +1217,7 @@ function MobileNavigation(arg0) {
 	});
 }
 //#endregion
-//#region source/shell/Search.tsx
+//#region source/shell/search/items.ts
 function routeGroupTitles(navigation) {
 	const titles = /* @__PURE__ */ new Map();
 	for (const node of navigation) if (node.children?.length) for (const child of node.children) titles.set(child.path, node.title);
@@ -1082,53 +1254,85 @@ function buildSearchItems(routes, navigation) {
 		})) ?? []];
 	});
 }
-function escapeRegExp(value) {
-	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-function HighlightQuery(arg0) {
-	const { text, query } = arg0;
-	if (!query) return text;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: text.split(new RegExp(`(${escapeRegExp(query)})`, "ig")).map((part, index) => part.toLowerCase() === query.toLowerCase() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", {
-		className: "bg-transparent text-(--clarify-theme-tokens-colors-primary) underline",
-		children: part
-	}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: part }, index)) });
+//#endregion
+//#region source/shell/search/pagefind.ts
+var pagefindPromises = /* @__PURE__ */ new Map();
+function pagefindCacheKey(routePrefix, locale) {
+	return `${routePrefix || "/"}:${locale || "default"}`;
 }
-function SearchResult(arg0) {
-	const { result, query, active, onSelect } = arg0;
-	const id = (0, react.useId)();
-	const hierarchy = [result.sectionTitle, result.pageTitle].filter((value) => typeof value === "string");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-		id,
-		className: (0, clsx.default)("clarify-search-result group block cursor-default px-4 py-3", active && "clarify-search-result-active"),
-		"aria-selected": active,
-		onMouseDown: (event) => {
-			event.preventDefault();
-			onSelect();
-		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "clarify-search-result-title",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightQuery, {
-				text: result.title,
-				query
-			})
-		}), hierarchy.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "clarify-search-result-hierarchy mt-1 truncate whitespace-nowrap",
-			children: hierarchy.map((item, itemIndex, items) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightQuery, {
-				text: item,
-				query
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: itemIndex === items.length - 1 ? "sr-only" : "clarify-search-result-separator mx-2",
-				children: "/"
-			})] }, `${item}-${itemIndex}`))
-		}) : null]
+function logSearchDebug(message, data) {
+	if (typeof window === "undefined") return;
+	console.info(`[clarify:search] ${message}`, data ?? "");
+}
+function loadPagefind(routePrefix, locale) {
+	if (typeof window === "undefined") return Promise.resolve(null);
+	const language = locale ?? document.documentElement.lang;
+	const cacheKey = pagefindCacheKey(routePrefix, language);
+	const cachedPagefind = pagefindPromises.get(cacheKey);
+	if (cachedPagefind) {
+		logSearchDebug("reuse Pagefind instance promise", {
+			cacheKey,
+			language,
+			routePrefix
+		});
+		return cachedPagefind;
+	}
+	const pagefindUrl = prefixHref("/pagefind/pagefind.js", routePrefix);
+	logSearchDebug("create Pagefind instance promise", {
+		cacheKey,
+		language,
+		pagefindUrl,
+		routePrefix
+	});
+	const pagefindPromise = import(
+		/* @vite-ignore */
+		pagefindUrl
+).then(async (module) => {
+		const previousLanguage = document.documentElement.lang;
+		if (language) document.documentElement.lang = language;
+		logSearchDebug("create Pagefind instance", {
+			cacheKey,
+			detectedLanguage: document.documentElement.lang,
+			previousLanguage
+		});
+		const pagefind = module.createInstance();
+		if (previousLanguage && previousLanguage !== language) document.documentElement.lang = previousLanguage;
+		await pagefind.init?.();
+		logSearchDebug("Pagefind instance ready", {
+			cacheKey,
+			language
+		});
+		return pagefind;
+	}).catch((error) => {
+		pagefindPromises.delete(cacheKey);
+		console.warn("[clarify:search] Pagefind instance failed", {
+			cacheKey,
+			language,
+			error
+		});
+		return null;
 	});
+	pagefindPromises.set(cacheKey, pagefindPromise);
+	return pagefindPromise;
+}
+function normalizePagefindUrl(url, routePrefix) {
+	const parsedUrl = new URL(url, window.location.origin);
+	let pathname = parsedUrl.pathname;
+	const prefix = routePrefix && routePrefix !== "/" ? `/${routePrefix.replace(/^\/+|\/+$/g, "")}` : "";
+	if (prefix && (pathname === prefix || pathname.startsWith(`${prefix}/`))) pathname = pathname.slice(prefix.length) || "/";
+	return `${pathname}${parsedUrl.search}${parsedUrl.hash}`;
 }
+//#endregion
+//#region source/shell/search/SearchInput.tsx
 var SearchInput = (0, react.forwardRef)(function SearchInput(arg0, inputRef) {
-	const { query, setQuery, onClose, onSubmit, activeDescendantId } = arg0;
+	const { query, setQuery, onClose, onSubmit, activeDescendantId, loading = false } = arg0;
 	const t = useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "clarify-search-input group relative flex h-12",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { className: "pointer-events-none absolute top-0 left-3 h-full w-5 stroke-(--clarify-theme-tokens-colors-muted)" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(loading ? lucide_react.LoaderCircle : lucide_react.Search, {
+			"aria-hidden": "true",
+			className: (0, clsx.default)("pointer-events-none absolute top-0 left-3 h-full w-5 stroke-(--clarify-theme-tokens-colors-muted)", loading && "animate-spin")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			ref: inputRef,
 			"data-autofocus": true,
 			role: "combobox",
@@ -1150,20 +1354,120 @@ var SearchInput = (0, react.forwardRef)(function SearchInput(arg0, inputRef) {
 		})]
 	});
 });
+//#endregion
+//#region source/shell/search/Highlight.tsx
+function stripHtml(value) {
+	if (typeof document === "undefined") return value.replace(/<[^>]*>/g, "");
+	const template = document.createElement("template");
+	template.innerHTML = value;
+	return template.content.textContent ?? "";
+}
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function HighlightQuery(arg0) {
+	const { text, query } = arg0;
+	if (!query) return text;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: text.split(new RegExp(`(${escapeRegExp(query)})`, "ig")).map((part, index) => part.toLowerCase() === query.toLowerCase() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", {
+		className: "bg-transparent text-(--clarify-theme-tokens-colors-primary) underline",
+		children: part
+	}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: part }, index)) });
+}
+function renderExcerptNode(node, key) {
+	if (node.nodeType === Node.TEXT_NODE) return node.textContent;
+	if (node.nodeType !== Node.ELEMENT_NODE) return null;
+	const element = node;
+	const children = Array.from(element.childNodes).map((child, index) => renderExcerptNode(child, `${key}-${index}`));
+	if (element.tagName.toLowerCase() === "mark") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", {
+		className: "bg-transparent text-(--clarify-theme-tokens-colors-primary) underline",
+		children
+	}, key);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children }, key);
+}
+function HighlightExcerpt(arg0) {
+	const { excerpt, query } = arg0;
+	if (typeof document === "undefined" || !excerpt.includes("<mark")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightQuery, {
+		text: stripHtml(excerpt),
+		query
+	});
+	const template = document.createElement("template");
+	template.innerHTML = excerpt;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: Array.from(template.content.childNodes).map((node, index) => renderExcerptNode(node, String(index))) });
+}
+//#endregion
+//#region source/shell/search/SearchResult.tsx
+function SearchResult(arg0) {
+	const { result, query, active, onActive, onSelect } = arg0;
+	const id = (0, react.useId)();
+	const hierarchy = result.type === "quick" ? [result.sectionTitle, result.pageTitle].filter((value) => typeof value === "string") : [];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		id,
+		className: (0, clsx.default)("clarify-search-result group block cursor-pointer px-4 py-3", active && "clarify-search-result-active"),
+		"aria-selected": active,
+		onMouseEnter: onActive,
+		onMouseMove: onActive,
+		onMouseDown: (event) => {
+			event.preventDefault();
+			onSelect();
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "clarify-search-result-title",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightQuery, {
+					text: result.title,
+					query
+				})
+			}),
+			hierarchy.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "clarify-search-result-hierarchy mt-1 truncate whitespace-nowrap",
+				children: hierarchy.map((item, itemIndex, items) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightQuery, {
+					text: item,
+					query
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: itemIndex === items.length - 1 ? "sr-only" : "clarify-search-result-separator mx-2",
+					children: "/"
+				})] }, `${item}-${itemIndex}`))
+			}) : null,
+			result.type === "full-text" && result.excerpt ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "clarify-search-result-excerpt mt-1 line-clamp-2 text-xs leading-5 text-(--clarify-theme-tokens-colors-muted)",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightExcerpt, {
+					excerpt: result.excerpt,
+					query
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region source/shell/search/SearchDialog.tsx
 function SearchDialog(arg0) {
-	const { open, setOpen, routes, navigation, className, onNavigate = () => {} } = arg0;
+	const { open, setOpen, routes, navigation, routePrefix = "/", currentLocale, className, onNavigate = () => {} } = arg0;
 	const t = useBuiltInText();
 	const navigate = (0, react_router_dom.useNavigate)();
 	const location = (0, react_router_dom.useLocation)();
 	const inputRef = (0, react.useRef)(null);
 	const [query, setQuery] = (0, react.useState)("");
 	const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+	const [fullTextState, setFullTextState] = (0, react.useState)(null);
+	const [pagefindState, setPagefindState] = (0, react.useState)(null);
 	const searchItems = (0, react.useMemo)(() => buildSearchItems(routes, navigation), [navigation, routes]);
-	const results = (0, react.useMemo)(() => {
+	const quickResults = (0, react.useMemo)(() => {
 		const normalizedQuery = query.trim().toLowerCase();
 		if (!normalizedQuery) return [];
-		return searchItems.filter((item) => item.keywords.includes(normalizedQuery)).slice(0, 8);
+		return searchItems.filter((item) => item.keywords.includes(normalizedQuery)).slice(0, 8).map((item) => ({
+			...item,
+			type: "quick"
+		}));
 	}, [query, searchItems]);
+	const pagefindKey = pagefindCacheKey(routePrefix, currentLocale);
+	const activePagefindState = pagefindState?.key === pagefindKey ? pagefindState : null;
+	const pagefind = activePagefindState?.pagefind ?? null;
+	const pagefindAvailable = activePagefindState?.available ?? null;
+	const trimmedQuery = query.trim();
+	const fullTextKey = `${pagefindKey}:${trimmedQuery}`;
+	const results = (fullTextState?.key === fullTextKey ? fullTextState.results : null) ?? quickResults;
+	const searchInputLoading = pagefindAvailable === null || Boolean(trimmedQuery && pagefind && fullTextState?.key !== fullTextKey);
+	const showNoResults = query && results.length === 0 && pagefindAvailable !== null;
 	(0, react.useEffect)(() => {
 		setOpen(false);
 	}, [
@@ -1172,6 +1476,98 @@ function SearchDialog(arg0) {
 		location.hash,
 		setOpen
 	]);
+	(0, react.useEffect)(() => {
+		let cancelled = false;
+		logSearchDebug("locale or route prefix changed; reload Pagefind", {
+			currentLocale,
+			routePrefix,
+			documentLanguage: document.documentElement.lang
+		});
+		loadPagefind(routePrefix, currentLocale).then((loadedPagefind) => {
+			if (cancelled) {
+				logSearchDebug("ignore stale Pagefind load", {
+					currentLocale,
+					routePrefix
+				});
+				return;
+			}
+			logSearchDebug("Pagefind load applied", {
+				currentLocale,
+				routePrefix,
+				available: Boolean(loadedPagefind)
+			});
+			setPagefindState({
+				key: pagefindKey,
+				pagefind: loadedPagefind,
+				available: Boolean(loadedPagefind)
+			});
+		});
+		return () => {
+			cancelled = true;
+			logSearchDebug("cancel Pagefind load effect", {
+				currentLocale,
+				routePrefix
+			});
+		};
+	}, [
+		currentLocale,
+		pagefindKey,
+		routePrefix
+	]);
+	(0, react.useEffect)(() => {
+		let cancelled = false;
+		if (!trimmedQuery || !pagefind) return void 0;
+		Promise.resolve().then(async () => {
+			if (cancelled) return;
+			try {
+				logSearchDebug("run Pagefind search", {
+					currentLocale,
+					query: trimmedQuery,
+					routePrefix
+				});
+				const search = await pagefind.search(trimmedQuery, { limit: 8 });
+				const data = await Promise.all(search.results.map(async (result) => ({
+					id: result.id,
+					data: await result.data()
+				})));
+				if (cancelled) return;
+				logSearchDebug("Pagefind search results", {
+					currentLocale,
+					query: trimmedQuery,
+					count: data.length
+				});
+				setFullTextState({
+					key: fullTextKey,
+					results: data.map(({ id, data }) => ({
+						type: "full-text",
+						id,
+						title: data.meta.title || data.url,
+						url: normalizePagefindUrl(data.url, routePrefix),
+						excerpt: data.excerpt
+					}))
+				});
+			} catch (error) {
+				console.warn("[clarify:search] Pagefind search failed", {
+					currentLocale,
+					query: trimmedQuery,
+					error
+				});
+				if (!cancelled) setFullTextState({
+					key: fullTextKey,
+					results: null
+				});
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		currentLocale,
+		fullTextKey,
+		pagefind,
+		routePrefix,
+		trimmedQuery
+	]);
 	(0, react.useEffect)(() => {
 		if (open) return void 0;
 		function onKeyDown(event) {
@@ -1224,10 +1620,11 @@ function SearchDialog(arg0) {
 					query,
 					setQuery: updateQuery,
 					onClose: closeDialog,
-					onSubmit: () => selectResult()
+					onSubmit: () => selectResult(),
+					loading: searchInputLoading
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5",
-					children: [query && results.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					children: [showNoResults ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "p-6 text-center",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchX, { className: "mx-auto h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-zinc-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							className: "mt-2 text-xs text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-400",
@@ -1241,14 +1638,17 @@ function SearchDialog(arg0) {
 							result,
 							query,
 							active: resultIndex === activeIndex,
+							onActive: () => setActiveIndex(resultIndex),
 							onSelect: () => selectResult(result)
-						}, result.url))
+						}, result.type === "full-text" ? result.id : result.url))
 					}) : null]
 				})]
 			})
 		})]
 	});
 }
+//#endregion
+//#region source/shell/search/useSearchProps.ts
 function useSearchProps() {
 	const buttonRef = (0, react.useRef)(null);
 	const [open, setOpen] = (0, react.useState)(false);
@@ -1265,12 +1665,14 @@ function useSearchProps() {
 		}
 	};
 }
+//#endregion
+//#region source/shell/Search.tsx
 function getModifierKey() {
 	if (typeof navigator === "undefined") return "Ctrl ";
 	return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ";
 }
 function Search(arg0) {
-	const { routes, navigation } = arg0;
+	const { routes, navigation, routePrefix, currentLocale } = arg0;
 	const t = useBuiltInText();
 	const modifierKey = getModifierKey();
 	const { buttonProps, dialogProps } = useSearchProps();
@@ -1300,13 +1702,15 @@ function Search(arg0) {
 				className: "hidden lg:block",
 				routes,
 				navigation,
+				routePrefix,
+				currentLocale,
 				...dialogProps
 			})
 		})]
 	});
 }
 function MobileSearch(arg0) {
-	const { routes, navigation, onNavigate } = arg0;
+	const { routes, navigation, routePrefix, currentLocale, onNavigate } = arg0;
 	const t = useBuiltInText();
 	const { buttonProps, dialogProps } = useSearchProps();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1323,6 +1727,8 @@ function MobileSearch(arg0) {
 				className: "lg:hidden",
 				routes,
 				navigation,
+				routePrefix,
+				currentLocale,
 				onNavigate,
 				...dialogProps
 			})
@@ -1520,6 +1926,7 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.header, {
 		...props,
 		ref,
+		"data-pagefind-ignore": true,
 		className: (0, clsx.default)(className, "clarify-header fixed inset-x-0 top-0 z-50 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background)/(--bg-opacity-light) backdrop-blur-xs transition dark:border-white/10 dark:bg-zinc-950/(--bg-opacity-dark) dark:backdrop-blur-sm", isInsideMobileNavigation && "bg-(--clarify-theme-tokens-colors-background) dark:bg-zinc-950"),
 		style: {
 			"--bg-opacity-light": bgOpacityLight,
@@ -1547,7 +1954,7 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 						className: "clarify-brand flex min-w-0 items-center gap-2 no-underline",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SiteLogo, {
 							logo: config.logo,
-							className: "h-6 w-6 shrink-0"
+							className: "h-6 w-auto shrink-0 object-contain"
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "clarify-brand-title truncate font-semibold",
 							children: config.title
@@ -1558,7 +1965,9 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 					className: "clarify-header-center absolute left-1/2 hidden -translate-x-1/2 lg:block",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
 						routes,
-						navigation
+						navigation,
+						routePrefix: config.routePrefix,
+						currentLocale
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1578,7 +1987,9 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 						config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden md:block md:h-5 md:w-px md:bg-(--clarify-theme-tokens-colors-border) md:dark:bg-white/15" }) : null,
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSearch, {
 							routes,
-							navigation
+							navigation,
+							routePrefix: config.routePrefix,
+							currentLocale
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LanguageSwitcher, {
 							config,
@@ -1652,6 +2063,24 @@ Object.defineProperty(exports, "ThemeToggle", {
 		return ThemeToggle;
 	}
 });
+Object.defineProperty(exports, "applyThemeCssVariables", {
+	enumerable: true,
+	get: function() {
+		return applyThemeCssVariables;
+	}
+});
+Object.defineProperty(exports, "clarifyThemePresets", {
+	enumerable: true,
+	get: function() {
+		return clarifyThemePresets;
+	}
+});
+Object.defineProperty(exports, "cloneTheme", {
+	enumerable: true,
+	get: function() {
+		return cloneTheme;
+	}
+});
 Object.defineProperty(exports, "copyTextToClipboard", {
 	enumerable: true,
 	get: function() {
@@ -1706,12 +2135,42 @@ Object.defineProperty(exports, "resolveLucideIconName", {
 		return resolveLucideIconName;
 	}
 });
+Object.defineProperty(exports, "resolveThemeColorValue", {
+	enumerable: true,
+	get: function() {
+		return resolveThemeColorValue;
+	}
+});
+Object.defineProperty(exports, "resolveThemeVariableTargets", {
+	enumerable: true,
+	get: function() {
+		return resolveThemeVariableTargets;
+	}
+});
 Object.defineProperty(exports, "safeDecodeURIComponent", {
 	enumerable: true,
 	get: function() {
 		return safeDecodeURIComponent;
 	}
 });
+Object.defineProperty(exports, "themeBootstrapScript", {
+	enumerable: true,
+	get: function() {
+		return themeBootstrapScript;
+	}
+});
+Object.defineProperty(exports, "themeStorageKey", {
+	enumerable: true,
+	get: function() {
+		return themeStorageKey;
+	}
+});
+Object.defineProperty(exports, "themeToCssVariables", {
+	enumerable: true,
+	get: function() {
+		return themeToCssVariables;
+	}
+});
 Object.defineProperty(exports, "useBuiltInText", {
 	enumerable: true,
 	get: function() {
@@ -1724,6 +2183,12 @@ Object.defineProperty(exports, "useClarifyConfig", {
 		return useClarifyConfig;
 	}
 });
+Object.defineProperty(exports, "useClarifyLocale", {
+	enumerable: true,
+	get: function() {
+		return useClarifyLocale;
+	}
+});
 Object.defineProperty(exports, "useOpenApis", {
 	enumerable: true,
 	get: function() {
@@ -1743,4 +2208,4 @@ Object.defineProperty(exports, "useTheme", {
 	}
 });
 
-//# sourceMappingURL=shell-D4tS8Jts.cjs.map
+//# sourceMappingURL=shell-xxhV0p7k.cjs.map