@clarify-labs/renderer 0.10.2 → 0.11.0

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

@@ -1,9 +1,9 @@
-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 { a as useConfig, i as OpenApiSpecsContext, n as ConfigContext, o as useConfigOptional, r as LocaleContext, s as useLocale, t as useBuiltInText } from "./i18n-BPrC45nD.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-bugd7GZh.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 { ArrowRight, 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 UISlotContextValue = createContext(null);
@@ -330,25 +330,36 @@ function PageBannerLink(props) {
 	const { href, label, external: externalProp, config, locale } = props;
 	const external = externalProp ?? isExternalHref(href);
 	const resolvedHref = external ? href : localizeHref(href, config, locale);
-	const className = "clarify-banner-link shrink-0 rounded-full bg-(--clarify-theme-tokens-colors-primary) px-3 py-1 text-xs/5 font-semibold text-white no-underline transition hover:opacity-90";
+	const className = "clarify-banner-link inline-flex h-7 shrink-0 items-center gap-1 rounded-(--clarify-theme-tokens-radius-md) px-2 text-xs/5 font-semibold text-(--clarify-ui-accent-text) no-underline transition hover:bg-(--clarify-ui-hover-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)";
+	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: "hidden sm:inline",
+		children: label
+	}), /* @__PURE__ */ jsx(ArrowRight, {
+		className: "size-3.5",
+		"aria-hidden": "true"
+	})] });
 	if (external) return /* @__PURE__ */ jsx("a", {
 		href: resolvedHref,
 		target: "_blank",
 		rel: "noreferrer",
 		className,
-		children: label
+		"aria-label": label,
+		title: label,
+		children
 	});
 	return /* @__PURE__ */ jsx(Link, {
 		to: resolvedHref,
 		className,
-		children: label
+		"aria-label": label,
+		title: label,
+		children
 	});
 }
 function PageBanner(props) {
 	const { currentLocale, onDismiss } = props;
 	const config = useConfig();
 	const banner = config.banner;
-	const content = banner ? resolveLocalizedText(banner.content, currentLocale, config.i18n?.defaultLocale) : "";
+	const content = banner ? resolveLocalizedText(banner.content, currentLocale, config.locales?.default) : "";
 	const storageKey = useMemo(() => {
 		if (!banner || !content) return "";
 		return bannerStorageKey(config, content);
@@ -368,13 +379,13 @@ function PageBanner(props) {
 	if (!content) return null;
 	if (dismissed) return null;
 	const link = banner.link;
-	const linkLabel = link ? resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale) : "";
+	const linkLabel = link ? resolveLocalizedText(link.label, currentLocale, config.locales?.default) : "";
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-banner relative flex min-h-12 items-center border-b border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) px-4 text-sm text-(--clarify-ui-text) dark:border-white/10",
+		className: "clarify-banner relative flex h-12 items-center border-b border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) px-4 text-sm text-(--clarify-ui-text) dark:border-white/10",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "mx-auto flex w-full max-w-(--clarify-theme-layout-max-width) items-center justify-center gap-3 pr-8 sm:pr-0",
+			className: "mx-auto flex min-w-0 w-full max-w-(--clarify-theme-layout-max-width) items-center justify-center gap-1 pr-9 sm:gap-2",
 			children: [/* @__PURE__ */ jsx("p", {
-				className: "clarify-banner-content m-0 text-center font-medium",
+				className: "clarify-banner-content m-0 min-w-0 truncate text-left font-medium sm:text-center",
 				children: content
 			}), link ? /* @__PURE__ */ jsx(PageBannerLink, {
 				href: link.href,
@@ -385,7 +396,7 @@ function PageBanner(props) {
 			}) : null]
 		}), banner.dismissible ? /* @__PURE__ */ jsx("button", {
 			type: "button",
-			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)",
+			className: "clarify-banner-dismiss absolute right-2 inline-flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) sm:right-3",
 			"aria-label": "Dismiss announcement",
 			onClick: () => {
 				if (storageKey && typeof window !== "undefined") window.localStorage.setItem(storageKey, "1");
@@ -401,17 +412,17 @@ function PageBanner(props) {
 //#endregion
 //#region source/app/PageFooter.tsx
 function localeForPath(config, pathname) {
-	const i18n = config.i18n;
-	if (!i18n) return void 0;
+	const locales = config.locales;
+	if (!locales) return void 0;
 	const firstSegment = pathname.split("/").filter(Boolean)[0];
-	return i18n.locales.find((locale) => locale.code === firstSegment)?.code ?? i18n.defaultLocale;
+	return locales.locales.find((locale) => locale.code === firstSegment)?.code ?? locales.default;
 }
 function FooterLink(arg0) {
 	const { link, locale, config } = arg0;
 	const external = link.external ?? isExternalHref(link.href);
 	const href = external ? link.href : localizeHref(link.href, config, locale);
 	const className = "clarify-footer-link no-underline transition";
-	const label = resolveLocalizedText(link.label, locale, config.i18n?.defaultLocale);
+	const label = resolveLocalizedText(link.label, locale, config.locales?.default);
 	if (external) return /* @__PURE__ */ jsx("a", {
 		href,
 		target: "_blank",
@@ -441,25 +452,22 @@ function PageFooter() {
 	const footer = config.footer;
 	const links = footer?.links ?? [];
 	const socials = Object.entries(footer?.socials ?? {});
-	const copyright = footer?.copyright ? resolveLocalizedText(footer.copyright, locale, config.i18n?.defaultLocale) : void 0;
-	if (!Boolean(copyright || links.length > 0 || socials.length > 0)) return /* @__PURE__ */ jsx("footer", {
-		"aria-hidden": "true",
-		className: "clarify-page-footer mt-16 w-full border-t border-(--clarify-theme-tokens-colors-border) pt-8 lg:mt-24"
-	});
+	const copyright = footer?.copyright ? resolveLocalizedText(footer.copyright, locale, config.locales?.default) : void 0;
+	if (!Boolean(copyright || links.length > 0 || socials.length > 0)) return null;
 	return /* @__PURE__ */ jsx("footer", {
-		className: "clarify-page-footer mt-16 flex w-full flex-col gap-4 border-t border-(--clarify-theme-tokens-colors-border) py-8 lg:mt-24",
+		className: "clarify-page-footer w-full",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: clsx("clarify-footer-content flex flex-col items-end gap-3 text-right", "sm:items-start sm:text-left"),
+			className: clsx("clarify-footer-content flex flex-col items-start gap-2.5 text-left"),
 			children: [copyright ? /* @__PURE__ */ jsx("p", {
 				className: "clarify-footer-copyright m-0",
 				children: copyright
 			}) : null, links.length > 0 || socials.length > 0 ? /* @__PURE__ */ jsxs("div", {
-				className: "clarify-footer-links flex flex-wrap justify-end gap-x-4 gap-y-2 sm:justify-start",
+				className: "clarify-footer-links flex flex-wrap justify-start gap-x-4 gap-y-2",
 				children: [links.map((link) => /* @__PURE__ */ jsx(FooterLink, {
 					link,
 					locale,
 					config
-				}, `${link.href}-${resolveLocalizedText(link.label, locale, config.i18n?.defaultLocale)}`)), socials.map(([name, href]) => /* @__PURE__ */ jsx(SocialLink, {
+				}, `${link.href}-${resolveLocalizedText(link.label, locale, config.locales?.default)}`)), socials.map(([name, href]) => /* @__PURE__ */ jsx(SocialLink, {
 					name,
 					href
 				}, name))]
@@ -482,40 +490,42 @@ function PageNavigation(arg0) {
 	const previous = pageRoutes[currentIndex - 1];
 	const next = pageRoutes[currentIndex + 1];
 	if (!previous && !next) return null;
+	const hasBothDirections = Boolean(previous && next);
 	return /* @__PURE__ */ jsxs("nav", {
-		className: "clarify-page-navigation mt-6 grid gap-3 @3xl:grid-cols-2",
+		className: clsx("clarify-page-navigation mt-12 grid border-t border-(--clarify-theme-tokens-colors-border)", hasBothDirections && "@3xl:grid-cols-2"),
 		"aria-label": t("navigation.previousNext"),
-		children: [/* @__PURE__ */ jsx(PageNavigationLink, {
+		children: [previous ? /* @__PURE__ */ jsx(PageNavigationLink, {
 			direction: "previous",
-			route: previous
-		}), /* @__PURE__ */ jsx(PageNavigationLink, {
+			route: previous,
+			separated: hasBothDirections
+		}) : null, next ? /* @__PURE__ */ jsx(PageNavigationLink, {
 			direction: "next",
-			route: next
-		})]
+			route: next,
+			separated: hasBothDirections
+		}) : null]
 	});
 }
 function PageNavigationLink(arg0) {
-	const { direction, route } = arg0;
+	const { direction, route, separated } = arg0;
 	const t = useBuiltInText();
-	if (!route) return /* @__PURE__ */ jsx("div", { className: "hidden @3xl:block" });
 	const isNext = direction === "next";
-	return /* @__PURE__ */ jsxs(Link, {
+	return /* @__PURE__ */ jsx(Link, {
 		to: normalizeRoutePath(route.path),
-		className: clsx("group flex min-w-0 items-center gap-3 rounded-lg border border-(--clarify-theme-tokens-colors-border) px-4 py-3 no-underline transition hover:border-(--clarify-theme-tokens-colors-primary) hover:bg-(--clarify-ui-hover-background)", isNext && "@3xl:justify-end @3xl:text-right"),
-		children: [
-			!isNext ? /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-muted) transition group-hover:text-(--clarify-theme-tokens-colors-primary)" }) : null,
-			/* @__PURE__ */ jsxs("span", {
-				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "clarify-page-navigation-label block font-medium uppercase tracking-wide text-(--clarify-theme-tokens-colors-muted)",
-					children: isNext ? t("navigation.next") : t("navigation.previous")
-				}), /* @__PURE__ */ jsx("span", {
-					className: "clarify-page-navigation-title mt-0.5 block truncate font-semibold text-(--clarify-theme-tokens-colors-foreground)",
-					children: route.title
-				})]
-			}),
-			isNext ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-muted) transition group-hover:text-(--clarify-theme-tokens-colors-primary)" }) : null
-		]
+		className: clsx("group flex min-w-0 py-5 no-underline outline-none focus-visible:bg-(--clarify-ui-hover-background)", !isNext && "@3xl:pr-8", isNext && "@3xl:justify-end @3xl:pl-8 @3xl:text-right", isNext && separated && "border-t border-(--clarify-theme-tokens-colors-border) @3xl:border-t-0 @3xl:border-l"),
+		children: /* @__PURE__ */ jsxs("span", {
+			className: clsx("min-w-0", isNext && "ml-auto"),
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: clsx("clarify-page-navigation-label flex items-center gap-1.5 text-xs/5 font-medium text-(--clarify-theme-tokens-colors-muted)", isNext && "justify-end"),
+				children: [
+					!isNext ? /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5 transition-transform group-hover:-translate-x-0.5" }) : null,
+					isNext ? t("navigation.next") : t("navigation.previous"),
+					isNext ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 transition-transform group-hover:translate-x-0.5" }) : null
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "clarify-page-navigation-title mt-1 block truncate text-base/6 font-semibold text-(--clarify-theme-tokens-colors-foreground) transition-colors group-hover:text-(--clarify-theme-tokens-colors-primary)",
+				children: route.title
+			})]
+		})
 	});
 }
 //#endregion
@@ -660,12 +670,19 @@ function useReleaseHashSyncOnManualScroll(hashScrollSuppressedUntilRef) {
 function SectionHashSync(arg0) {
 	const { hashScrollSuppressedUntilRef } = arg0;
 	const location = useLocation();
+	const pathnameRef = useRef(location.pathname);
 	const hashUpdateTimeoutRef = useRef(void 0);
 	const sections = useSectionStore((state) => state.sections);
 	const visibleSections = useSectionStore((state) => state.visibleSections);
+	useEffect(() => {
+		if (pathnameRef.current === location.pathname) return;
+		pathnameRef.current = location.pathname;
+		hashScrollSuppressedUntilRef.current = Date.now() + 1200;
+	}, [hashScrollSuppressedUntilRef, location.pathname]);
 	useReleaseHashSyncOnManualScroll(hashScrollSuppressedUntilRef);
 	useEffect(() => {
 		if (!sections.length || !visibleSections.length) return;
+		if (!location.hash && Date.now() < hashScrollSuppressedUntilRef.current) 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;
@@ -751,19 +768,19 @@ function scrollToHash(hash) {
 	});
 }
 function explicitLocaleForPath(config, pathname) {
-	const i18n = config.i18n;
-	if (!i18n) return void 0;
+	const locales = config.locales;
+	if (!locales) return void 0;
 	const firstSegment = pathname.split("/").filter(Boolean)[0];
-	return i18n.locales.find((locale) => locale.code === firstSegment)?.code;
+	return locales.locales.find((locale) => locale.code === firstSegment)?.code;
 }
 function fallbackLocale(config) {
-	return config.i18n?.defaultLocale;
+	return config.locales?.default;
 }
 function storedLocaleForConfig(config) {
-	return getStoredLocalePreference(config.i18n?.locales.map((locale) => locale.code));
+	return getStoredLocalePreference(config.locales?.locales.map((locale) => locale.code));
 }
 function isDefaultLocale(config, locale) {
-	return Boolean(locale && config.i18n?.defaultLocale === locale);
+	return Boolean(locale && config.locales?.default === locale);
 }
 function hasPath(nodes, pathname, locale) {
 	return nodes.some((node) => isSameRoutePath(node.path, pathname, locale) || hasPath(node.children ?? [], pathname, locale));
@@ -813,7 +830,7 @@ function useRouteState(config, routes, navigation, pathname) {
 		explicitLocale,
 		storedLocale,
 		currentLocale,
-		currentLocaleConfig: config.i18n?.locales.find((locale) => locale.code === currentLocale),
+		currentLocaleConfig: config.locales?.locales.find((locale) => locale.code === currentLocale),
 		notFoundRoute: currentRoute ? void 0 : notFoundRouteForPath(routes, pathname, currentLocale),
 		currentNavigation: navigationForLocale(navigation, currentLocale, pathname),
 		sections: sectionsForRoute(currentRoute)
@@ -837,7 +854,7 @@ function useStoredBannerDismissed(storageKey) {
 }
 function useBannerState(config, currentLocale) {
 	const banner = config.banner;
-	const bannerContent = banner ? resolveLocalizedText(banner.content, currentLocale, config.i18n?.defaultLocale) : "";
+	const bannerContent = banner ? resolveLocalizedText(banner.content, currentLocale, config.locales?.default) : "";
 	const bannerStorageKey = banner && bannerContent ? `clarify:banner:dismissed:${config.title}:${bannerContent}` : void 0;
 	const storedBannerDismissed = useStoredBannerDismissed(banner?.dismissible ? bannerStorageKey : void 0);
 	const [dismissedBannerKey, setDismissedBannerKey] = useState();
@@ -877,9 +894,11 @@ function useAppShellNavigationEffects(arg0) {
 			scrollToHash(location.hash);
 			return;
 		}
+		hashScrollSuppressedUntilRef.current = Date.now() + 1200;
 		window.scrollTo({
 			top: 0,
-			left: 0
+			left: 0,
+			behavior: "instant"
 		});
 		window.requestAnimationFrame(() => {
 			window.dispatchEvent(new Event("scroll"));
@@ -1068,17 +1087,19 @@ function AppShell(arg0) {
 		});
 	}
 	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",
+		return /* @__PURE__ */ jsxs("div", {
+			className: "clarify-page-footer-region mt-8 grid gap-5 border-t border-(--clarify-theme-tokens-colors-border) pt-6 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-end",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "clarify-page-footer-slot min-w-0",
+				children: [/* @__PURE__ */ jsx(RuntimeSlot, { name: "page.footer.before" }), /* @__PURE__ */ jsx(RuntimeSlot, {
+					name: "page.footer.replace",
+					default: DefaultFooterComponent
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "clarify-page-attribution flex justify-end sm:self-end",
 				children: /* @__PURE__ */ jsx(BuiltWithClarify, {})
-			})
-		] });
+			})]
+		});
 	}
 	function renderContent() {
 		return /* @__PURE__ */ jsx("div", {
@@ -1821,8 +1842,7 @@ function createRandomTheme() {
 			colors: createRandomThemeColors(selection),
 			radius: { ...selection.radius }
 		},
-		layout: { maxWidth: selection.maxWidth },
-		editor: false
+		layout: { maxWidth: selection.maxWidth }
 	};
 }
 //#endregion
@@ -1833,42 +1853,47 @@ var themePresets = {
 		preset: "default",
 		tokens: {
 			colors: {
-				primary: "#047857",
-				accent: "#0D9488",
+				primary: {
+					light: "#047857",
+					dark: "#34d399"
+				},
+				accent: {
+					light: "#0f766e",
+					dark: "#5eead4"
+				},
 				background: {
-					light: "#ffffff",
-					dark: "#09090b"
+					light: "#f8fafc",
+					dark: "#0a0a0b"
 				},
 				foreground: {
-					light: "#111827",
-					dark: "#ffffff"
+					light: "#172033",
+					dark: "#f4f4f5"
 				},
 				surface: {
 					light: "#ffffff",
 					dark: "#18181b"
 				},
 				muted: {
-					light: "#64748b",
+					light: "#667085",
 					dark: "#a1a1aa"
 				},
 				border: {
-					light: "rgb(15 23 42 / 0.12)",
-					dark: "rgb(255 255 255 / 0.1)"
+					light: "rgb(15 23 42 / 0.11)",
+					dark: "rgb(255 255 255 / 0.11)"
 				},
 				codeBackground: {
-					light: "#f6fbf8",
-					dark: "#18181b"
+					light: "#f1f5f3",
+					dark: "#171719"
 				}
 			},
 			radius: {
 				sm: "6px",
-				md: "10px",
-				lg: "14px",
-				xl: "18px"
+				md: "8px",
+				lg: "12px",
+				xl: "16px"
 			}
 		},
-		layout: { maxWidth: "82rem" },
-		editor: false
+		layout: { maxWidth: "82rem" }
 	},
 	base: {
 		preset: "base",
@@ -1908,8 +1933,7 @@ var themePresets = {
 				xl: "16px"
 			}
 		},
-		layout: { maxWidth: "80rem" },
-		editor: false
+		layout: { maxWidth: "80rem" }
 	}
 };
 function cloneThemeColorValue(value) {
@@ -1931,8 +1955,7 @@ function cloneTheme(theme) {
 			},
 			radius: { ...theme.tokens.radius }
 		},
-		layout: { ...theme.layout },
-		editor: theme.editor
+		layout: { ...theme.layout }
 	};
 }
 function isModeColorValue(value) {
@@ -2439,4 +2462,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-1LuBliwt.js.map
+//# sourceMappingURL=ClarifyShell-GoSXvgMg.js.map