@clarify-labs/renderer 0.11.9 → 0.11.11

package/output/{PageActions-DxGK-444.cjs → PageActions-CVOTIuxh.cjs}

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-BuvwT5W9.cjs");
+const require_i18n = require("./i18n-BMNCgF9o.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
 let react = require("react");
@@ -91,7 +91,7 @@ function ContentActions(arg0) {
 		}, 1600);
 		return () => clearTimeout(timeout);
 	}, [copyPhase]);
-	if (!route?.contentArtifactUrl && !route?.sourceEditUrl) return null;
+	if (!route?.contentArtifactUrl) return null;
 	const contentArtifactUrl = route.contentArtifactUrl ? resolveContentArtifactUrl(route.contentArtifactUrl, routePrefix) : void 0;
 	const isOpenApi = route.kind === "openapi";
 	const replacements = { contentType: isOpenApi ? "OpenAPI" : "Markdown" };
@@ -191,16 +191,7 @@ function ContentActions(arg0) {
 							className: "truncate",
 							children: primaryPhase === "idle" ? primaryAction.label : feedbackLabel
 						})]
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-						href: route.sourceEditUrl,
-						target: "_blank",
-						rel: "noreferrer",
-						className: "clarify-content-actions-primary clarify-ui-control inline-flex h-9 min-w-0 items-center gap-2 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-3 no-underline shadow-xs shadow-zinc-900/5 transition",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: "h-4 w-4 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "truncate",
-							children: t("contentActions.editPage")
-						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuButton, {
+					}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuButton, {
 						className: "clarify-content-actions-trigger clarify-ui-control inline-flex size-9 items-center justify-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-xs shadow-zinc-900/5 transition",
 						"aria-label": t("contentActions.copyOptions"),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-3.5 w-3.5" })
@@ -216,29 +207,6 @@ function ContentActions(arg0) {
 					anchor: "bottom end",
 					className: "clarify-content-actions-list clarify-ui-menu z-30 mt-2 w-(--clarify-ui-action-menu-width) origin-top-right rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1.5 shadow-xl shadow-zinc-900/5 transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0",
 					children: [
-						route.sourceEditUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-							href: route.sourceEditUrl,
-							target: "_blank",
-							rel: "noreferrer",
-							className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left no-underline transition",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PencilLine, { className: "h-4 w-4" })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "flex min-w-0 flex-1 flex-col px-1",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-										className: "clarify-ui-menu-title flex items-center gap-1",
-										children: [t("contentActions.editPage"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ExternalLink, { className: "clarify-ui-menu-icon h-3 w-3" })]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "clarify-ui-menu-description truncate",
-										children: t("contentActions.editPageDescription")
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) opacity-0" })
-							]
-						}) }) : null,
 						actions.slice(0, 1).map((action) => {
 							const Icon = action.icon;
 							const isCopied = copied === action.key;
@@ -1183,7 +1151,7 @@ function useSearchProps() {
 }
 //#endregion
 //#region source/shell/Search.tsx
-var SearchDialog = (0, react.lazy)(() => Promise.resolve().then(() => require("./SearchDialog-DexOW8E4.cjs")));
+var SearchDialog = (0, react.lazy)(() => Promise.resolve().then(() => require("./SearchDialog--OLp05za.cjs")));
 function getModifierKey() {
 	if (typeof navigator === "undefined") return "Ctrl ";
 	return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ";
@@ -1383,10 +1351,127 @@ function NavbarTabs(arg0) {
 		})
 	});
 }
+function navbarMenuHref(item, config, currentLocale) {
+	if ("page" in item) return localizeHref(item.page, config, currentLocale);
+	if ("href" in item) return localizeHref(item.href, config, currentLocale);
+}
+function NavbarMenuItemLink(arg0) {
+	const { item, config, currentLocale, nested = false } = arg0;
+	const href = navbarMenuHref(item, config, currentLocale);
+	if (!href) return null;
+	const label = resolveLocalizedText(item.label, currentLocale, config.locales?.default);
+	const description = item.description ? resolveLocalizedText(item.description, currentLocale, config.locales?.default) : void 0;
+	const linkClassName = (0, clsx.default)("clarify-ui-menu-item block rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2 no-underline transition", nested ? "text-sm" : "min-w-40", arg0.className);
+	if (isExternalHref(href)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
+		as: "a",
+		href,
+		target: "_blank",
+		rel: "noreferrer",
+		className: linkClassName,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+				name: item.icon,
+				className: "h-4 w-4"
+			}), label]
+		}), description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "block pl-6 text-xs opacity-70",
+			children: description
+		}) : null]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
+		as: react_router_dom.Link,
+		to: href,
+		className: linkClassName,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+				name: item.icon,
+				className: "h-4 w-4"
+			}), label]
+		}), description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "block pl-6 text-xs opacity-70",
+			children: description
+		}) : null]
+	});
+}
+function NavbarMenuItems(arg0) {
+	const { items, config, currentLocale } = arg0;
+	return items.map((item, index) => {
+		if ("items" in item) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "pl-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2 px-3 py-2 text-xs font-semibold opacity-60",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+					name: item.icon,
+					className: "h-3.5 w-3.5"
+				}), resolveLocalizedText(item.label, currentLocale, config.locales?.default)]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: NavbarMenuItems({
+				items: item.items,
+				config,
+				currentLocale
+			}) })]
+		}, `${resolveLocalizedText(item.label, currentLocale, config.locales?.default)}-${index}`);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: ({ focus }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavbarMenuItemLink, {
+			item,
+			config,
+			currentLocale,
+			className: focus ? "clarify-ui-menu-item-focus" : void 0
+		}) }, "page" in item ? item.page : item.href);
+	});
+}
+function NavbarMenus(arg0) {
+	const { menus, config, currentLocale } = arg0;
+	const pathname = normalizeRoutePath((0, react_router_dom.useLocation)().pathname);
+	if (!menus?.length) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		className: "clarify-top-nav hidden md:block",
+		"aria-label": "Navigation",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			role: "list",
+			className: "flex items-center gap-0.5",
+			children: menus.map((menu, index) => {
+				const label = resolveLocalizedText(menu.label, currentLocale, config.locales?.default);
+				if (!("items" in menu)) {
+					const href = navbarMenuHref(menu, config, currentLocale);
+					if (!href) return null;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem, {
+						href,
+						active: !isExternalHref(href) && isSameRoutePath(href, pathname, currentLocale),
+						children: label
+					}, `${label}-${index}`);
+				}
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
+					as: "div",
+					className: "relative",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.MenuButton, {
+						className: "clarify-ui-top-link inline-flex h-9 items-center rounded-(--clarify-theme-tokens-radius-md) px-3 no-underline transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+								name: menu.icon,
+								className: "h-4 w-4"
+							}), label]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "ml-1 h-3.5 w-3.5 rotate-90" })]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItems, {
+						anchor: "bottom start",
+						transition: true,
+						className: "clarify-ui-menu z-50 mt-2 min-w-48 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavbarMenuItems, {
+							items: menu.items,
+							config,
+							currentLocale
+						})
+					})]
+				}) }, `${label}-${index}`);
+			})
+		})
+	});
+}
 function MobileNavbarMenu(arg0) {
-	const { links, config, currentLocale } = arg0;
+	const { menus, config, currentLocale } = arg0;
 	const t = require_i18n.useBuiltInText();
-	if (!links?.length) return null;
+	if (!menus?.length) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
 		as: "div",
 		className: "clarify-mobile-navbar-menu relative md:hidden",
@@ -1398,24 +1483,10 @@ function MobileNavbarMenu(arg0) {
 			transition: true,
 			anchor: "bottom end",
 			className: "clarify-mobile-navbar-menu-list clarify-ui-menu z-50 mt-2 w-(--clarify-ui-menu-width) rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900",
-			children: links.map((link) => {
-				const label = resolveLocalizedText(link.label, currentLocale, config.locales?.default);
-				const href = localizeHref(link.href, config, currentLocale);
-				const external = isExternalHref(href);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: ({ focus }) => {
-					const className = (0, clsx.default)("clarify-mobile-navbar-menu-item clarify-ui-menu-item block rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2 no-underline transition", focus && "clarify-ui-menu-item-focus");
-					return external ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-						href,
-						target: "_blank",
-						rel: "noreferrer",
-						className,
-						children: label
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
-						to: href,
-						className,
-						children: label
-					});
-				} }, link.href);
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavbarMenuItems, {
+				items: menus,
+				config,
+				currentLocale
 			})
 		})]
 	});
@@ -1546,7 +1617,6 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 	const { navigation, tabs, routes, currentLocale, currentRoute, banner, topAreaRef, className, ...props } = arg0;
 	const config = require_i18n.useConfig();
 	const t = require_i18n.useBuiltInText();
-	const pathname = normalizeRoutePath((0, react_router_dom.useLocation)().pathname);
 	const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
 	const homeHref = resolveHomeHref(config, currentLocale);
@@ -1554,7 +1624,7 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 	const { scrollY } = (0, framer_motion.useScroll)();
 	const bgOpacityLight = (0, framer_motion.useTransform)(scrollY, [0, 72], ["70%", "95%"]);
 	const bgOpacityDark = (0, framer_motion.useTransform)(scrollY, [0, 72], ["60%", "92%"]);
-	const hasNavbarLinks = Boolean(config.navigation?.links?.length);
+	const hasNavbarMenus = Boolean(config.navigation?.menus?.length);
 	const tabsInNavbar = config.layout?.tabs === "navbar";
 	function renderBrand() {
 		if (homeExternal) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
@@ -1585,22 +1655,10 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 		});
 	}
 	function renderTopLinks() {
-		if (!hasNavbarLinks) return null;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-			className: "clarify-top-nav hidden md:block",
-			"aria-label": t("navbar.sections"),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-				role: "list",
-				className: "flex items-center gap-0.5",
-				children: config.navigation?.links?.map((link) => {
-					const href = localizeHref(link.href, config, currentLocale);
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem, {
-						href,
-						active: !isExternalHref(href) && isSameRoutePath(href, pathname, currentLocale),
-						children: resolveLocalizedText(link.label, currentLocale, config.locales?.default)
-					}, link.href);
-				})
-			})
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavbarMenus, {
+			menus: config.navigation?.menus,
+			config,
+			currentLocale
 		});
 	}
 	function renderHeaderActions() {
@@ -1617,7 +1675,7 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 					currentLocale
 				}) : null,
 				renderTopLinks(),
-				hasNavbarLinks ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mx-2 hidden h-5 w-px bg-(--clarify-theme-tokens-colors-border) md:block md:dark:bg-white/15" }) : null,
+				hasNavbarMenus ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mx-2 hidden h-5 w-px bg-(--clarify-theme-tokens-colors-border) md:block md:dark:bg-white/15" }) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSearch, {
 					routes,
 					navigation
@@ -1629,7 +1687,7 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeToggle, {}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavbarMenu, {
-					links: config.navigation?.links,
+					menus: config.navigation?.menus,
 					config,
 					currentLocale
 				})
@@ -1655,7 +1713,7 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 					}), renderBrand()]
 				}),
 				!tabsInNavbar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "clarify-header-center absolute left-1/2 hidden -translate-x-1/2 lg:block",
+					className: "clarify-header-center hidden min-w-0 flex-1 justify-center lg:flex",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
 						routes,
 						navigation
@@ -1694,12 +1752,39 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 	});
 });
 //#endregion
+//#region source/app/PageUpdatedAt.tsx
+function PageUpdatedAt(props) {
+	const { updatedAt, locale } = props;
+	if (!updatedAt) return null;
+	const date = new Date(updatedAt);
+	if (Number.isNaN(date.getTime())) return null;
+	const label = locale?.toLowerCase().startsWith("zh") ? "最后更新" : "Last updated";
+	const formattedDate = new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+		className: "clarify-page-updated-at m-0 flex items-center gap-1.5 text-xs text-(--clarify-ui-text-faint)",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarClock, {
+				className: "size-3.5",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+				dateTime: updatedAt,
+				children: formattedDate
+			})
+		]
+	});
+}
+//#endregion
 //#region source/app/PageActions.tsx
 var PageActionsContext = (0, react.createContext)({});
 function PageActionsProvider(props) {
-	const { children, route } = props;
+	const { children, route, locale } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageActionsContext.Provider, {
-		value: { route },
+		value: {
+			route,
+			locale
+		},
 		children
 	});
 }
@@ -1707,6 +1792,33 @@ function PageActions() {
 	const { route } = (0, react.useContext)(PageActionsContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentActions, { route });
 }
+function PageMetadata(props) {
+	const { route, locale: contextLocale } = (0, react.useContext)(PageActionsContext);
+	const { updatedAt = route?.updatedAt, locale = contextLocale } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "clarify-page-metadata flex w-full items-center justify-end gap-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageUpdatedAt, {
+			updatedAt,
+			locale
+		}), route?.sourceEditUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+			href: route.sourceEditUrl,
+			target: "_blank",
+			rel: "noreferrer",
+			className: "clarify-page-edit-link inline-flex items-center gap-1.5 text-xs text-(--clarify-ui-text-faint) no-underline transition hover:text-(--clarify-ui-text)",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PencilLine, {
+					className: "size-3.5",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: locale?.toLowerCase().startsWith("zh") ? "编辑此页面" : "Edit this page" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ExternalLink, {
+					className: "size-3",
+					"aria-hidden": "true"
+				})
+			]
+		}) : null]
+	});
+}
 //#endregion
 Object.defineProperty(exports, "Header", {
 	enumerable: true,
@@ -1732,6 +1844,12 @@ Object.defineProperty(exports, "PageActionsProvider", {
 		return PageActionsProvider;
 	}
 });
+Object.defineProperty(exports, "PageMetadata", {
+	enumerable: true,
+	get: function() {
+		return PageMetadata;
+	}
+});
 Object.defineProperty(exports, "SectionProvider", {
 	enumerable: true,
 	get: function() {
@@ -1871,4 +1989,4 @@ Object.defineProperty(exports, "useTheme", {
 	}
 });
 
-//# sourceMappingURL=PageActions-DxGK-444.cjs.map
+//# sourceMappingURL=PageActions-CVOTIuxh.cjs.map