@clarify-labs/renderer 0.10.2 → 0.11.0

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

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-b4iTLeia.cjs");
-const require_PageActions = require("./PageActions-BjB6PYmL.cjs");
+const require_i18n = require("./i18n-wXINKKV0.cjs");
+const require_PageActions = require("./PageActions-DJRXlGhz.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
 let react = require("react");
@@ -332,25 +332,36 @@ function PageBannerLink(props) {
 	const { href, label, external: externalProp, config, locale } = props;
 	const external = externalProp ?? require_PageActions.isExternalHref(href);
 	const resolvedHref = external ? href : require_PageActions.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "hidden sm:inline",
+		children: label
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, {
+		className: "size-3.5",
+		"aria-hidden": "true"
+	})] });
 	if (external) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 		href: resolvedHref,
 		target: "_blank",
 		rel: "noreferrer",
 		className,
-		children: label
+		"aria-label": label,
+		title: label,
+		children
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
 		to: resolvedHref,
 		className,
-		children: label
+		"aria-label": label,
+		title: label,
+		children
 	});
 }
 function PageBanner(props) {
 	const { currentLocale, onDismiss } = props;
 	const config = require_i18n.useConfig();
 	const banner = config.banner;
-	const content = banner ? require_PageActions.resolveLocalizedText(banner.content, currentLocale, config.i18n?.defaultLocale) : "";
+	const content = banner ? require_PageActions.resolveLocalizedText(banner.content, currentLocale, config.locales?.default) : "";
 	const storageKey = (0, react.useMemo)(() => {
 		if (!banner || !content) return "";
 		return bannerStorageKey(config, content);
@@ -370,13 +381,13 @@ function PageBanner(props) {
 	if (!content) return null;
 	if (dismissed) return null;
 	const link = banner.link;
-	const linkLabel = link ? require_PageActions.resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale) : "";
+	const linkLabel = link ? require_PageActions.resolveLocalizedText(link.label, currentLocale, config.locales?.default) : "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(PageBannerLink, {
 				href: link.href,
@@ -387,7 +398,7 @@ function PageBanner(props) {
 			}) : null]
 		}), banner.dismissible ? /* @__PURE__ */ (0, react_jsx_runtime.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");
@@ -403,17 +414,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 ?? require_PageActions.isExternalHref(link.href);
 	const href = external ? link.href : require_PageActions.localizeHref(link.href, config, locale);
 	const className = "clarify-footer-link no-underline transition";
-	const label = require_PageActions.resolveLocalizedText(link.label, locale, config.i18n?.defaultLocale);
+	const label = require_PageActions.resolveLocalizedText(link.label, locale, config.locales?.default);
 	if (external) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 		href,
 		target: "_blank",
@@ -443,25 +454,22 @@ function PageFooter() {
 	const footer = config.footer;
 	const links = footer?.links ?? [];
 	const socials = Object.entries(footer?.socials ?? {});
-	const copyright = footer?.copyright ? require_PageActions.resolveLocalizedText(footer.copyright, locale, config.i18n?.defaultLocale) : void 0;
-	if (!Boolean(copyright || links.length > 0 || socials.length > 0)) return /* @__PURE__ */ (0, react_jsx_runtime.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 ? require_PageActions.resolveLocalizedText(footer.copyright, locale, config.locales?.default) : void 0;
+	if (!Boolean(copyright || links.length > 0 || socials.length > 0)) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, clsx.default)("clarify-footer-content flex flex-col items-end gap-3 text-right", "sm:items-start sm:text-left"),
+			className: (0, clsx.default)("clarify-footer-content flex flex-col items-start gap-2.5 text-left"),
 			children: [copyright ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "clarify-footer-copyright m-0",
 				children: copyright
 			}) : null, links.length > 0 || socials.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(FooterLink, {
 					link,
 					locale,
 					config
-				}, `${link.href}-${require_PageActions.resolveLocalizedText(link.label, locale, config.i18n?.defaultLocale)}`)), socials.map(([name, href]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SocialLink, {
+				}, `${link.href}-${require_PageActions.resolveLocalizedText(link.label, locale, config.locales?.default)}`)), socials.map(([name, href]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SocialLink, {
 					name,
 					href
 				}, name))]
@@ -484,40 +492,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__ */ (0, react_jsx_runtime.jsxs)("nav", {
-		className: "clarify-page-navigation mt-6 grid gap-3 @3xl:grid-cols-2",
+		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(PageNavigationLink, {
+		children: [previous ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigationLink, {
 			direction: "previous",
-			route: previous
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigationLink, {
+			route: previous,
+			separated: hasBothDirections
+		}) : null, next ? /* @__PURE__ */ (0, react_jsx_runtime.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 = 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, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
 		to: require_PageActions.normalizeRoutePath(route.path),
-		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.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: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: (0, clsx.default)("min-w-0", isNext && "ml-auto"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "size-3.5 transition-transform group-hover:-translate-x-0.5" }) : null,
+					isNext ? t("navigation.next") : t("navigation.previous"),
+					isNext ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "size-3.5 transition-transform group-hover:translate-x-0.5" }) : null
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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
@@ -662,12 +672,19 @@ function useReleaseHashSyncOnManualScroll(hashScrollSuppressedUntilRef) {
 function SectionHashSync(arg0) {
 	const { hashScrollSuppressedUntilRef } = arg0;
 	const location = (0, react_router_dom.useLocation)();
+	const pathnameRef = (0, react.useRef)(location.pathname);
 	const hashUpdateTimeoutRef = (0, react.useRef)(void 0);
 	const sections = require_PageActions.useSectionStore((state) => state.sections);
 	const visibleSections = require_PageActions.useSectionStore((state) => state.visibleSections);
+	(0, react.useEffect)(() => {
+		if (pathnameRef.current === location.pathname) return;
+		pathnameRef.current = location.pathname;
+		hashScrollSuppressedUntilRef.current = Date.now() + 1200;
+	}, [hashScrollSuppressedUntilRef, location.pathname]);
 	useReleaseHashSyncOnManualScroll(hashScrollSuppressedUntilRef);
 	(0, react.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;
@@ -753,19 +770,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 require_PageActions.getStoredLocalePreference(config.i18n?.locales.map((locale) => locale.code));
+	return require_PageActions.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) => require_PageActions.isSameRoutePath(node.path, pathname, locale) || hasPath(node.children ?? [], pathname, locale));
@@ -815,7 +832,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)
@@ -839,7 +856,7 @@ function useStoredBannerDismissed(storageKey) {
 }
 function useBannerState(config, currentLocale) {
 	const banner = config.banner;
-	const bannerContent = banner ? require_PageActions.resolveLocalizedText(banner.content, currentLocale, config.i18n?.defaultLocale) : "";
+	const bannerContent = banner ? require_PageActions.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] = (0, react.useState)();
@@ -879,9 +896,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"));
@@ -1070,17 +1089,19 @@ function AppShell(arg0) {
 		});
 	}
 	function renderFooter() {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlot, { name: "page.footer.before" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlot, {
-				name: "page.footer.replace",
-				default: DefaultFooterComponent
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex justify-end",
+		return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "clarify-page-footer-slot min-w-0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlot, { name: "page.footer.before" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlot, {
+					name: "page.footer.replace",
+					default: DefaultFooterComponent
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "clarify-page-attribution flex justify-end sm:self-end",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BuiltWithClarify, {})
-			})
-		] });
+			})]
+		});
 	}
 	function renderContent() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1823,8 +1844,7 @@ function createRandomTheme() {
 			colors: createRandomThemeColors(selection),
 			radius: { ...selection.radius }
 		},
-		layout: { maxWidth: selection.maxWidth },
-		editor: false
+		layout: { maxWidth: selection.maxWidth }
 	};
 }
 //#endregion
@@ -1835,42 +1855,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",
@@ -1910,8 +1935,7 @@ var themePresets = {
 				xl: "16px"
 			}
 		},
-		layout: { maxWidth: "80rem" },
-		editor: false
+		layout: { maxWidth: "80rem" }
 	}
 };
 function cloneThemeColorValue(value) {
@@ -1933,8 +1957,7 @@ function cloneTheme(theme) {
 			},
 			radius: { ...theme.tokens.radius }
 		},
-		layout: { ...theme.layout },
-		editor: theme.editor
+		layout: { ...theme.layout }
 	};
 }
 function isModeColorValue(value) {
@@ -2536,4 +2559,4 @@ Object.defineProperty(exports, "useSlot", {
 	}
 });
 
-//# sourceMappingURL=ClarifyShell-C6li72Ce.cjs.map
+//# sourceMappingURL=ClarifyShell-BAjq876Z.cjs.map