@clarify-labs/renderer 0.10.3 → 0.11.0

package/output/{ClarifyShell-Cq5Af46F.js → ClarifyShell-GoSXvgMg.js}

@@ -1,5 +1,5 @@
-import { a as useConfig, i as OpenApiSpecsContext, n as ConfigContext, o as useConfigOptional, r as LocaleContext, s as useLocale, t as useBuiltInText } from "./i18n-Bqth9d6Q.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-BQeEmXbT.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";
@@ -359,7 +359,7 @@ 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);
@@ -379,7 +379,7 @@ 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 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", {
@@ -412,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",
@@ -452,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))]
@@ -493,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
@@ -769,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));
@@ -831,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)
@@ -855,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();
@@ -1088,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", {
@@ -1841,8 +1842,7 @@ function createRandomTheme() {
 			colors: createRandomThemeColors(selection),
 			radius: { ...selection.radius }
 		},
-		layout: { maxWidth: selection.maxWidth },
-		editor: false
+		layout: { maxWidth: selection.maxWidth }
 	};
 }
 //#endregion
@@ -1853,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",
@@ -1928,8 +1933,7 @@ var themePresets = {
 				xl: "16px"
 			}
 		},
-		layout: { maxWidth: "80rem" },
-		editor: false
+		layout: { maxWidth: "80rem" }
 	}
 };
 function cloneThemeColorValue(value) {
@@ -1951,8 +1955,7 @@ function cloneTheme(theme) {
 			},
 			radius: { ...theme.tokens.radius }
 		},
-		layout: { ...theme.layout },
-		editor: theme.editor
+		layout: { ...theme.layout }
 	};
 }
 function isModeColorValue(value) {
@@ -2459,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-Cq5Af46F.js.map
+//# sourceMappingURL=ClarifyShell-GoSXvgMg.js.map