@clarify-labs/renderer 0.11.6 → 0.11.8

package/output/{ClarifyShell-CukbPOAd.cjs → ClarifyShell-D8OGIUWq.cjs}

@@ -1,12 +1,12 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-Cjfk1N7i.cjs");
-const require_PageActions = require("./PageActions-ob2OJusG.cjs");
+const require_i18n = require("./i18n-Dw4Jlho-.cjs");
+const require_PageActions = require("./PageActions-DPYXFL6N.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
 let react = require("react");
 let react_router_dom = require("react-router-dom");
-let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 //#region source/slots/context.tsx
 var UISlotContextValue = (0, react.createContext)(null);
 /**
@@ -120,6 +120,39 @@ function safeDecodeURIComponent(value) {
 	}
 }
 //#endregion
+//#region source/app/BuiltInNotFoundPage.tsx
+function BuiltInNotFoundPage() {
+	const text = require_i18n.useBuiltInText();
+	const homeHref = require_PageActions.resolveHomeHref(require_i18n.useConfig(), require_i18n.useLocale());
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-primary)",
+				children: text("notFound.label")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-4 text-sm/6 text-(--clarify-theme-tokens-colors-muted)",
+				children: text("notFound.description")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-8",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.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
@@ -480,12 +513,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 ?? require_PageActions.isExternalHref(link.href);
@@ -517,7 +544,7 @@ function SocialLink(arg0) {
 }
 function PageFooter() {
 	const config = require_i18n.useConfig();
-	const locale = localeForPath(config, (0, react_router_dom.useLocation)().pathname);
+	const locale = require_i18n.useLocale() ?? config.locales?.default;
 	const footer = config.footer;
 	const links = footer?.links ?? [];
 	const socials = Object.entries(footer?.socials ?? {});
@@ -1049,43 +1076,14 @@ function getLayoutVariant(hasTabs, hasBanner) {
 function getAppShellLayoutConfig(hasTabs, hasBanner) {
 	return appShellLayoutConfig[getLayoutVariant(hasTabs, hasBanner)];
 }
-function BuiltInNotFoundPage() {
-	const text = require_i18n.useBuiltInText();
-	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-primary)",
-				children: text("notFound.label")
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "mt-4 text-sm/6 text-(--clarify-theme-tokens-colors-muted)",
-				children: text("notFound.description")
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-8",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.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__ */ (0, react_jsx_runtime.jsx)(BuiltInNotFoundPage, {});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RouteComponent, {});
 }
 function AppShell(arg0) {
-	const { config, routes, navigation, runtimeSlots } = arg0;
+	const { routes, navigation, runtimeSlots } = arg0;
+	const config = require_i18n.useConfig();
 	const location = (0, react_router_dom.useLocation)();
 	const navigate = (0, react_router_dom.useNavigate)();
 	const pathname = require_PageActions.normalizeRoutePath(location.pathname);
@@ -1095,7 +1093,7 @@ function AppShell(arg0) {
 	const { currentRoute, explicitLocale, storedLocale, currentLocale, currentLocaleConfig, notFoundRoute, currentNavigation, sections } = useRouteState(config, routes, navigation, pathname);
 	const text = require_i18n.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,
@@ -1128,7 +1126,6 @@ function AppShell(arg0) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Header, {
 			ref: headerRef,
 			topAreaRef: headerTopAreaRef,
-			config,
 			navigation: currentNavigation.items,
 			tabs: currentNavigation.tabs,
 			routes,
@@ -1203,7 +1200,6 @@ function AppShell(arg0) {
 			className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.PageActionsProvider, {
 				route: currentRoute,
-				routePrefix: config.routePrefix,
 				children: [
 					renderMain(),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigation, {
@@ -1856,6 +1852,7 @@ var randomLayoutWidths = [
 	"128rem",
 	"144rem"
 ];
+var randomTabsLayouts = ["subnav", "navbar"];
 var randomDarkAccentPairs = [
 	{
 		primary: "#34d399",
@@ -1942,6 +1939,9 @@ function createRandomTheme() {
 		layout: { maxWidth: selection.maxWidth }
 	};
 }
+function createRandomTabsLayout() {
+	return randomItem(randomTabsLayouts);
+}
 //#endregion
 //#region source/theme/variables.ts
 var themeStorageKey = require_PageActions.themeCookieName;
@@ -2285,18 +2285,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] = (0, react.useState)(() => cloneTheme(initialTheme ?? themeEditorPresets.default));
 	const [copyState, setCopyState] = (0, react.useState)("idle");
-	const configSource = (0, react.useMemo)(() => themeToConfigSource(theme), [theme]);
+	const config = require_i18n.useConfigOptional();
+	const configSource = (0, react.useMemo)(() => configToSource(theme, config?.layout?.tabs), [config?.layout?.tabs, theme]);
 	(0, react.useEffect)(() => applyThemeCssVariables(themeToCssVariables(theme, resolvedTheme), resolveThemeVariableTargets(target)), [
 		resolvedTheme,
 		target,
@@ -2365,6 +2369,8 @@ function useThemeEditorState(arg0) {
 }
 function ThemeEditor(props) {
 	const { initialTheme, onChange, target, defaultOpen = false, className } = props;
+	const config = require_i18n.useConfigOptional();
+	const updateConfig = require_i18n.useConfigUpdaterOptional();
 	const { resolvedTheme } = require_PageActions.useTheme();
 	const [isOpen, setIsOpen] = (0, react.useState)(defaultOpen);
 	const { theme, copyState, commit, updatePreset, updateColorToken, updateRadiusToken, updateLayoutToken, copyConfig } = useThemeEditorState({
@@ -2373,6 +2379,16 @@ function ThemeEditor(props) {
 		target,
 		resolvedTheme
 	});
+	function randomize() {
+		commit(createRandomTheme());
+		updateConfig?.((currentConfig) => ({
+			...currentConfig,
+			layout: {
+				...currentConfig.layout,
+				tabs: createRandomTabsLayout()
+			}
+		}));
+	}
 	function renderPanelHeader() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 			className: "shrink-0 flex items-start justify-between gap-4 border-b border-(--clarify-theme-tokens-colors-border) px-4 py-3",
@@ -2449,15 +2465,44 @@ function ThemeEditor(props) {
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
 						className: "grid gap-3",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
-							className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
-							children: "Layout"
-						}), layoutFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("legend", {
+								className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+								children: "Layout"
+							}),
+							config && updateConfig ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "relative block",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "subnav",
+											children: "Below navbar"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "navbar",
+											children: "Inside navbar"
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.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))
+						]
 					})
 				]
 			})
@@ -2476,7 +2521,7 @@ function ThemeEditor(props) {
 				}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.WandSparkles, { className: "size-3.5 stroke-current stroke-2" }), "Random"]
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -2514,14 +2559,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 = require_i18n.useConfig();
+	const updateConfig = require_i18n.useConfigUpdater();
+	const theme = config.theme;
 	const { resolvedTheme } = require_PageActions.useTheme();
 	const themeVariables = (0, react.useMemo)(() => themeToCssVariables(theme, resolvedTheme), [resolvedTheme, theme]);
 	(0, react.useEffect)(() => applyThemeCssVariables(themeVariables, resolveThemeVariableTargets(":root")), [themeVariables]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(ThemeEditor, { initialTheme: theme }) : null]
+		children: [children, themeEditor ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeEditor, {
+			initialTheme: theme,
+			onChange: (nextTheme) => updateConfig((currentConfig) => ({
+				...currentConfig,
+				theme: nextTheme
+			}))
+		}) : null]
 	});
 }
 //#endregion
@@ -2536,15 +2590,13 @@ function ThemeRoot(props) {
 */
 function ClarifyShell(props) {
 	const { config, routes, navigation, openApiSpecs, runtimeSlots, themeEditor = false } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_i18n.ConfigContext.Provider, {
-		value: config,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_i18n.ConfigProvider, {
+		config,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_i18n.OpenApiSpecsContext.Provider, {
 			value: openApiSpecs,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.ThemeProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeRoot, {
-				theme: config.theme,
 				themeEditor,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppShell, {
-					config,
 					routes,
 					navigation: navigation ?? {
 						kind: "flat",
@@ -2654,4 +2706,4 @@ Object.defineProperty(exports, "useSlot", {
 	}
 });
 
-//# sourceMappingURL=ClarifyShell-CukbPOAd.cjs.map
+//# sourceMappingURL=ClarifyShell-D8OGIUWq.cjs.map