@clarify-labs/renderer 0.11.7 → 0.11.8

package/output/{ClarifyShell-CKvXZj0f.js → ClarifyShell-CGoRrkn1.js}

@@ -1,10 +1,10 @@
-import { a as useConfig, i as OpenApiSpecsContext, n as ConfigContext, o as useConfigOptional, r as LocaleContext, s as useLocale, t as useBuiltInText } from "./i18n-Cff810G_.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, n as PageActionsProvider, o as useSectionStore, r as Header, u as isSameRoutePath, w as localizeHref } from "./PageActions-DviEypf6.js";
+import { a as useConfig, c as useConfigUpdaterOptional, i as OpenApiSpecsContext, l as useLocale, n as ConfigProvider, o as useConfigOptional, r as LocaleContext, s as useConfigUpdater, t as useBuiltInText } from "./i18n-D4O3z-sP.js";
+import { C as isExternalHref, D as copyTextToClipboard, E as resolveHomeHref, 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, n as PageActionsProvider, o as useSectionStore, r as Header, u as isSameRoutePath, w as localizeHref } from "./PageActions-CqXr0SyW.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 { ArrowRight, ChevronDown, ChevronLeft, ChevronRight, Settings, WandSparkles, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRight, ChevronDown, ChevronLeft, ChevronRight, Settings, WandSparkles, X } from "lucide-react";
 //#region source/slots/context.tsx
 var UISlotContextValue = createContext(null);
 /**
@@ -118,6 +118,39 @@ function safeDecodeURIComponent(value) {
 	}
 }
 //#endregion
+//#region source/app/BuiltInNotFoundPage.tsx
+function BuiltInNotFoundPage() {
+	const text = useBuiltInText();
+	const homeHref = resolveHomeHref(useConfig(), useLocale());
+	return /* @__PURE__ */ jsxs("section", {
+		className: "mx-auto flex min-h-(--clarify-error-page-min-height) max-w-2xl flex-col justify-center py-16 text-(--clarify-theme-tokens-colors-foreground)",
+		"aria-labelledby": "clarify-not-found-title",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-primary)",
+				children: text("notFound.label")
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				id: "clarify-not-found-title",
+				className: "mt-3 text-3xl/9 font-semibold tracking-tight text-(--clarify-theme-tokens-colors-foreground)",
+				children: text("notFound.title")
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-4 text-sm/6 text-(--clarify-theme-tokens-colors-muted)",
+				children: text("notFound.description")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-8",
+				children: /* @__PURE__ */ jsx(Link, {
+					className: "inline-flex items-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-theme-tokens-colors-primary) px-3 py-2 text-sm/5 font-semibold text-white shadow-xs transition hover:opacity-90",
+					to: homeHref,
+					children: text("notFound.home")
+				})
+			})
+		]
+	});
+}
+//#endregion
 //#region source/assets/clarify.svg?url
 var clarify_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='279px'%20height='200px'%20viewBox='0%200%20279%20200'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eclarify%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='clarify'%20transform='translate(-0,%200.0054)'%3e%3cpath%20d='M44.867217,0.0054376148%20C130.715579,1.00591567%20200,70.9091172%20200,156.994562%20L199.986321,155.127494%20C199.384888,180.009127%20179.026368,199.994562%20154,199.994562%20L46,199.994562%20C20.5949015,199.994562%200,179.399661%200,153.994562%20L0,45.9945624%20C0,21.0975659%2019.7793434,0.820282524%2044.4815926,0.0191499894%20Z'%20fill='%2300D492'%3e%3c/path%3e%3cpath%20d='M123.867217,0.0054376148%20C209.715579,1.00591567%20279,70.9091172%20279,156.994562%20L278.986321,155.127494%20C278.384888,180.009127%20258.026368,199.994562%20233,199.994562%20L125,199.994562%20C99.5949015,199.994562%2079,179.399661%2079,153.994562%20L79,45.9945624%20C79,21.0975659%2098.7793434,0.820282524%20123.481593,0.0191499894%20Z'%20id='clarify-right'%20fill-opacity='0.6'%20fill='%2300F6C9'%20transform='translate(179,%20100)%20rotate(-90)%20translate(-179,%20-100)'%3e%3c/path%3e%3cpath%20d='M199.979267,154.416906%20L199.984438,155.157125%20L199.962366,155.872459%20C198.977251,180.406837%20178.776104,199.994562%20154,199.994562%20L124.372438,199.994125%20L124.249053,199.994081%20C99.6939678,199.603921%2079.8122712,179.973634%2079.01915,155.518407%20L79.0054376,155.132783%20C79.5830823,105.566626%20103.129768,61.5221348%20139.498462,33.1463428%20C175.69419,61.3871018%20199.186123,105.143863%20199.979267,154.416906%20Z'%20id='形状结合'%20fill='%2300F692'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
 //#endregion
@@ -478,12 +511,6 @@ function PageBanner(props) {
 }
 //#endregion
 //#region source/app/PageFooter.tsx
-function localeForPath(config, pathname) {
-	const locales = config.locales;
-	if (!locales) return void 0;
-	const firstSegment = pathname.split("/").filter(Boolean)[0];
-	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);
@@ -515,7 +542,7 @@ function SocialLink(arg0) {
 }
 function PageFooter() {
 	const config = useConfig();
-	const locale = localeForPath(config, useLocation().pathname);
+	const locale = useLocale() ?? config.locales?.default;
 	const footer = config.footer;
 	const links = footer?.links ?? [];
 	const socials = Object.entries(footer?.socials ?? {});
@@ -1047,43 +1074,14 @@ function getLayoutVariant(hasTabs, hasBanner) {
 function getAppShellLayoutConfig(hasTabs, hasBanner) {
 	return appShellLayoutConfig[getLayoutVariant(hasTabs, hasBanner)];
 }
-function BuiltInNotFoundPage() {
-	const text = useBuiltInText();
-	return /* @__PURE__ */ jsxs("section", {
-		className: "mx-auto flex min-h-(--clarify-error-page-min-height) max-w-2xl flex-col justify-center py-16 text-(--clarify-theme-tokens-colors-foreground)",
-		"aria-labelledby": "clarify-not-found-title",
-		children: [
-			/* @__PURE__ */ jsx("p", {
-				className: "text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-primary)",
-				children: text("notFound.label")
-			}),
-			/* @__PURE__ */ jsx("h1", {
-				id: "clarify-not-found-title",
-				className: "mt-3 text-3xl/9 font-semibold tracking-tight text-(--clarify-theme-tokens-colors-foreground)",
-				children: text("notFound.title")
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "mt-4 text-sm/6 text-(--clarify-theme-tokens-colors-muted)",
-				children: text("notFound.description")
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "mt-8",
-				children: /* @__PURE__ */ jsx(Link, {
-					className: "inline-flex items-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-theme-tokens-colors-primary) px-3 py-2 text-sm/5 font-semibold text-white shadow-xs transition hover:opacity-90",
-					to: "/",
-					children: text("notFound.home")
-				})
-			})
-		]
-	});
-}
 function NotFoundRouteElement(props) {
 	const { component: RouteComponent } = props;
 	if (!RouteComponent) return /* @__PURE__ */ jsx(BuiltInNotFoundPage, {});
 	return /* @__PURE__ */ jsx(RouteComponent, {});
 }
 function AppShell(arg0) {
-	const { config, routes, navigation, runtimeSlots } = arg0;
+	const { routes, navigation, runtimeSlots } = arg0;
+	const config = useConfig();
 	const location = useLocation();
 	const navigate = useNavigate();
 	const pathname = normalizeRoutePath(location.pathname);
@@ -1093,7 +1091,7 @@ function AppShell(arg0) {
 	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);
-	const layoutConfig = getAppShellLayoutConfig(Boolean(currentNavigation.tabs?.length), hasBanner);
+	const layoutConfig = getAppShellLayoutConfig(Boolean(currentNavigation.tabs?.length) && config.layout?.tabs !== "navbar", hasBanner);
 	const { renderRoutes, NotFoundRouteComponent } = useRenderedRoutes(routes, notFoundRoute);
 	useAppShellNavigationEffects({
 		config,
@@ -1126,7 +1124,6 @@ function AppShell(arg0) {
 		return /* @__PURE__ */ jsx(Header, {
 			ref: headerRef,
 			topAreaRef: headerTopAreaRef,
-			config,
 			navigation: currentNavigation.items,
 			tabs: currentNavigation.tabs,
 			routes,
@@ -1201,7 +1198,6 @@ function AppShell(arg0) {
 			className: clsx("clarify-content @container relative flex min-h-screen min-w-0 flex-col px-4 pb-12 sm:px-6 lg:px-8 xl:px-10", layoutConfig.contentClassName),
 			children: /* @__PURE__ */ jsxs(PageActionsProvider, {
 				route: currentRoute,
-				routePrefix: config.routePrefix,
 				children: [
 					renderMain(),
 					/* @__PURE__ */ jsx(PageNavigation, {
@@ -1854,6 +1850,7 @@ var randomLayoutWidths = [
 	"128rem",
 	"144rem"
 ];
+var randomTabsLayouts = ["subnav", "navbar"];
 var randomDarkAccentPairs = [
 	{
 		primary: "#34d399",
@@ -1940,6 +1937,9 @@ function createRandomTheme() {
 		layout: { maxWidth: selection.maxWidth }
 	};
 }
+function createRandomTabsLayout() {
+	return randomItem(randomTabsLayouts);
+}
 //#endregion
 //#region source/theme/variables.ts
 var themeStorageKey = themeCookieName;
@@ -2283,18 +2283,22 @@ function ColorModeInput(props) {
 		})]
 	});
 }
-function themeToConfigSource(theme) {
-	return JSON.stringify({ theme: {
-		preset: theme.preset,
-		tokens: theme.tokens,
-		layout: theme.layout
-	} }, null, 2);
+function configToSource(theme, tabs = "subnav") {
+	return JSON.stringify({
+		theme: {
+			preset: theme.preset,
+			tokens: theme.tokens,
+			layout: theme.layout
+		},
+		layout: { tabs }
+	}, null, 2);
 }
 function useThemeEditorState(arg0) {
 	const { initialTheme, onChange, target, resolvedTheme } = arg0;
 	const [theme, setTheme] = useState(() => cloneTheme(initialTheme ?? themeEditorPresets.default));
 	const [copyState, setCopyState] = useState("idle");
-	const configSource = useMemo(() => themeToConfigSource(theme), [theme]);
+	const config = useConfigOptional();
+	const configSource = useMemo(() => configToSource(theme, config?.layout?.tabs), [config?.layout?.tabs, theme]);
 	useEffect(() => applyThemeCssVariables(themeToCssVariables(theme, resolvedTheme), resolveThemeVariableTargets(target)), [
 		resolvedTheme,
 		target,
@@ -2363,6 +2367,8 @@ function useThemeEditorState(arg0) {
 }
 function ThemeEditor(props) {
 	const { initialTheme, onChange, target, defaultOpen = false, className } = props;
+	const config = useConfigOptional();
+	const updateConfig = useConfigUpdaterOptional();
 	const { resolvedTheme } = useTheme();
 	const [isOpen, setIsOpen] = useState(defaultOpen);
 	const { theme, copyState, commit, updatePreset, updateColorToken, updateRadiusToken, updateLayoutToken, copyConfig } = useThemeEditorState({
@@ -2371,6 +2377,16 @@ function ThemeEditor(props) {
 		target,
 		resolvedTheme
 	});
+	function randomize() {
+		commit(createRandomTheme());
+		updateConfig?.((currentConfig) => ({
+			...currentConfig,
+			layout: {
+				...currentConfig.layout,
+				tabs: createRandomTabsLayout()
+			}
+		}));
+	}
 	function renderPanelHeader() {
 		return /* @__PURE__ */ jsxs("header", {
 			className: "shrink-0 flex items-start justify-between gap-4 border-b border-(--clarify-theme-tokens-colors-border) px-4 py-3",
@@ -2447,15 +2463,44 @@ function ThemeEditor(props) {
 					}),
 					/* @__PURE__ */ jsxs("fieldset", {
 						className: "grid gap-3",
-						children: [/* @__PURE__ */ jsx("legend", {
-							className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
-							children: "Layout"
-						}), layoutFields.map((field) => /* @__PURE__ */ jsx(TextField, {
-							id: `clarify-theme-editor-layout-${field.key}`,
-							label: field.label,
-							value: theme.layout[field.key],
-							onChange: (value) => updateLayoutToken(field.key, value)
-						}, field.key))]
+						children: [
+							/* @__PURE__ */ jsx("legend", {
+								className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+								children: "Layout"
+							}),
+							config && updateConfig ? /* @__PURE__ */ jsxs("label", {
+								htmlFor: "clarify-theme-editor-tabs-position",
+								className: "grid gap-1.5 text-xs/5 font-medium text-(--clarify-ui-text)",
+								children: ["Tabs position", /* @__PURE__ */ jsxs("span", {
+									className: "relative block",
+									children: [/* @__PURE__ */ jsxs("select", {
+										id: "clarify-theme-editor-tabs-position",
+										value: config.layout?.tabs ?? "subnav",
+										className: "h-9 w-full appearance-none rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2.5 pr-9 text-sm text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-none transition focus:border-(--clarify-theme-tokens-colors-primary) focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
+										onChange: (event) => updateConfig((currentConfig) => ({
+											...currentConfig,
+											layout: {
+												...currentConfig.layout,
+												tabs: event.target.value
+											}
+										})),
+										children: [/* @__PURE__ */ jsx("option", {
+											value: "subnav",
+											children: "Below navbar"
+										}), /* @__PURE__ */ jsx("option", {
+											value: "navbar",
+											children: "Inside navbar"
+										})]
+									}), /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 stroke-current stroke-2 text-(--clarify-ui-text-faint)" })]
+								})]
+							}) : null,
+							layoutFields.map((field) => /* @__PURE__ */ jsx(TextField, {
+								id: `clarify-theme-editor-layout-${field.key}`,
+								label: field.label,
+								value: theme.layout[field.key],
+								onChange: (value) => updateLayoutToken(field.key, value)
+							}, field.key))
+						]
 					})
 				]
 			})
@@ -2474,7 +2519,7 @@ function ThemeEditor(props) {
 				}), /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					className: "inline-flex items-center gap-1.5 rounded-(--clarify-theme-tokens-radius-md) px-2.5 py-1.5 text-xs/5 font-semibold text-(--clarify-ui-text) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong)",
-					onClick: () => commit(createRandomTheme()),
+					onClick: randomize,
 					children: [/* @__PURE__ */ jsx(WandSparkles, { className: "size-3.5 stroke-current stroke-2" }), "Random"]
 				})]
 			}), /* @__PURE__ */ jsx("button", {
@@ -2512,14 +2557,23 @@ function ThemeEditor(props) {
 //#endregion
 //#region source/theme/ThemeRoot.tsx
 function ThemeRoot(props) {
-	const { children, theme, themeEditor = false } = props;
+	const { children, themeEditor = false } = props;
+	const config = useConfig();
+	const updateConfig = useConfigUpdater();
+	const theme = config.theme;
 	const { resolvedTheme } = useTheme();
 	const themeVariables = useMemo(() => themeToCssVariables(theme, resolvedTheme), [resolvedTheme, theme]);
 	useEffect(() => applyThemeCssVariables(themeVariables, resolveThemeVariableTargets(":root")), [themeVariables]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "clarify-app h-full min-h-screen bg-(--clarify-theme-tokens-colors-background) text-(--clarify-theme-tokens-colors-foreground)",
 		"data-theme-preset": theme.preset,
-		children: [children, themeEditor ? /* @__PURE__ */ jsx(ThemeEditor, { initialTheme: theme }) : null]
+		children: [children, themeEditor ? /* @__PURE__ */ jsx(ThemeEditor, {
+			initialTheme: theme,
+			onChange: (nextTheme) => updateConfig((currentConfig) => ({
+				...currentConfig,
+				theme: nextTheme
+			}))
+		}) : null]
 	});
 }
 //#endregion
@@ -2534,15 +2588,13 @@ function ThemeRoot(props) {
 */
 function ClarifyShell(props) {
 	const { config, routes, navigation, openApiSpecs, runtimeSlots, themeEditor = false } = props;
-	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
-		value: config,
+	return /* @__PURE__ */ jsx(ConfigProvider, {
+		config,
 		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 ?? {
 						kind: "flat",
@@ -2557,4 +2609,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-CKvXZj0f.js.map
+//# sourceMappingURL=ClarifyShell-CGoRrkn1.js.map