@clarify-labs/renderer 0.11.8 → 0.11.10

package/output/{PageActions-CqXr0SyW.js → PageActions-D52u18C8.js}

@@ -1,11 +1,11 @@
-import { a as useConfig, l as useLocale, t as useBuiltInText } from "./i18n-D4O3z-sP.js";
+import { a as useConfig, l as useLocale, t as useBuiltInText } from "./i18n-Zmmhz7FF.js";
 import clsx from "clsx";
 import { Suspense, createContext, forwardRef, lazy, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CloseButton, Dialog, DialogBackdrop, DialogPanel, Menu, MenuButton, MenuItem, MenuItems, TransitionChild } from "@headlessui/react";
 import * as LucideIcons from "lucide-react";
-import { Check, ChevronDown, ChevronLeft, ChevronRight, Copy, ExternalLink, FileText, Globe2, Link2, LoaderCircle, Menu as Menu$1, Monitor, Moon, MoreHorizontal, PencilLine, Search, Sun, Terminal, X } from "lucide-react";
+import { CalendarClock, Check, ChevronDown, ChevronLeft, ChevronRight, Copy, ExternalLink, FileText, Globe2, Link2, LoaderCircle, Menu as Menu$1, Monitor, Moon, MoreHorizontal, PencilLine, Search, Sun, Terminal, X } from "lucide-react";
 import { AnimatePresence, LayoutGroup, motion, useReducedMotion, useScroll, useTransform } from "framer-motion";
 import { create, createStore, useStore } from "zustand";
 //#region source/utils/clipboard.ts
@@ -89,7 +89,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" };
@@ -189,16 +189,7 @@ function ContentActions(arg0) {
 							className: "truncate",
 							children: primaryPhase === "idle" ? primaryAction.label : feedbackLabel
 						})]
-					}) : /* @__PURE__ */ 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__ */ jsx(PrimaryIcon, { className: "h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: t("contentActions.editPage")
-						})]
-					}), /* @__PURE__ */ jsx(MenuButton, {
+					}) : null, /* @__PURE__ */ jsx(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__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
@@ -214,29 +205,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__ */ jsx(MenuItem, { children: /* @__PURE__ */ 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__ */ 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__ */ jsx(PencilLine, { className: "h-4 w-4" })
-								}),
-								/* @__PURE__ */ jsxs("span", {
-									className: "flex min-w-0 flex-1 flex-col px-1",
-									children: [/* @__PURE__ */ jsxs("span", {
-										className: "clarify-ui-menu-title flex items-center gap-1",
-										children: [t("contentActions.editPage"), /* @__PURE__ */ jsx(ExternalLink, { className: "clarify-ui-menu-icon h-3 w-3" })]
-									}), /* @__PURE__ */ jsx("span", {
-										className: "clarify-ui-menu-description truncate",
-										children: t("contentActions.editPageDescription")
-									})]
-								}),
-								/* @__PURE__ */ jsx(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;
@@ -1181,7 +1149,7 @@ function useSearchProps() {
 }
 //#endregion
 //#region source/shell/Search.tsx
-var SearchDialog = lazy(() => import("./SearchDialog-BQcbGNvl.js"));
+var SearchDialog = lazy(() => import("./SearchDialog-Cq7w-uc7.js"));
 function getModifierKey() {
 	if (typeof navigator === "undefined") return "Ctrl ";
 	return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ";
@@ -1381,10 +1349,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 = clsx("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__ */ jsxs(CloseButton, {
+		as: "a",
+		href,
+		target: "_blank",
+		rel: "noreferrer",
+		className: linkClassName,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(NavigationIcon, {
+				name: item.icon,
+				className: "h-4 w-4"
+			}), label]
+		}), description ? /* @__PURE__ */ jsx("span", {
+			className: "block pl-6 text-xs opacity-70",
+			children: description
+		}) : null]
+	});
+	return /* @__PURE__ */ jsxs(CloseButton, {
+		as: Link,
+		to: href,
+		className: linkClassName,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(NavigationIcon, {
+				name: item.icon,
+				className: "h-4 w-4"
+			}), label]
+		}), description ? /* @__PURE__ */ 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__ */ jsxs("div", {
+			className: "pl-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-3 py-2 text-xs font-semibold opacity-60",
+				children: [/* @__PURE__ */ jsx(NavigationIcon, {
+					name: item.icon,
+					className: "h-3.5 w-3.5"
+				}), resolveLocalizedText(item.label, currentLocale, config.locales?.default)]
+			}), /* @__PURE__ */ jsx("div", { children: NavbarMenuItems({
+				items: item.items,
+				config,
+				currentLocale
+			}) })]
+		}, `${resolveLocalizedText(item.label, currentLocale, config.locales?.default)}-${index}`);
+		return /* @__PURE__ */ jsx(MenuItem, { children: ({ focus }) => /* @__PURE__ */ 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(useLocation().pathname);
+	if (!menus?.length) return null;
+	return /* @__PURE__ */ jsx("nav", {
+		className: "clarify-top-nav hidden md:block",
+		"aria-label": "Navigation",
+		children: /* @__PURE__ */ 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__ */ jsx(TopLevelNavItem, {
+						href,
+						active: !isExternalHref(href) && isSameRoutePath(href, pathname, currentLocale),
+						children: label
+					}, `${label}-${index}`);
+				}
+				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Menu, {
+					as: "div",
+					className: "relative",
+					children: [/* @__PURE__ */ jsxs(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__ */ jsxs("span", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(NavigationIcon, {
+								name: menu.icon,
+								className: "h-4 w-4"
+							}), label]
+						}), /* @__PURE__ */ jsx(ChevronRight, { className: "ml-1 h-3.5 w-3.5 rotate-90" })]
+					}), /* @__PURE__ */ jsx(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__ */ jsx(NavbarMenuItems, {
+							items: menu.items,
+							config,
+							currentLocale
+						})
+					})]
+				}) }, `${label}-${index}`);
+			})
+		})
+	});
+}
 function MobileNavbarMenu(arg0) {
-	const { links, config, currentLocale } = arg0;
+	const { menus, config, currentLocale } = arg0;
 	const t = useBuiltInText();
-	if (!links?.length) return null;
+	if (!menus?.length) return null;
 	return /* @__PURE__ */ jsxs(Menu, {
 		as: "div",
 		className: "clarify-mobile-navbar-menu relative md:hidden",
@@ -1396,24 +1481,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__ */ jsx(MenuItem, { children: ({ focus }) => {
-					const className = clsx("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__ */ jsx("a", {
-						href,
-						target: "_blank",
-						rel: "noreferrer",
-						className,
-						children: label
-					}) : /* @__PURE__ */ jsx(Link, {
-						to: href,
-						className,
-						children: label
-					});
-				} }, link.href);
+			children: /* @__PURE__ */ jsx(NavbarMenuItems, {
+				items: menus,
+				config,
+				currentLocale
 			})
 		})]
 	});
@@ -1544,7 +1615,6 @@ var Header = forwardRef(function Header(arg0, ref) {
 	const { navigation, tabs, routes, currentLocale, currentRoute, banner, topAreaRef, className, ...props } = arg0;
 	const config = useConfig();
 	const t = useBuiltInText();
-	const pathname = normalizeRoutePath(useLocation().pathname);
 	const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
 	const homeHref = resolveHomeHref(config, currentLocale);
@@ -1552,7 +1622,7 @@ var Header = forwardRef(function Header(arg0, ref) {
 	const { scrollY } = useScroll();
 	const bgOpacityLight = useTransform(scrollY, [0, 72], ["70%", "95%"]);
 	const bgOpacityDark = 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__ */ jsxs(CloseButton, {
@@ -1583,22 +1653,10 @@ var Header = forwardRef(function Header(arg0, ref) {
 		});
 	}
 	function renderTopLinks() {
-		if (!hasNavbarLinks) return null;
-		return /* @__PURE__ */ jsx("nav", {
-			className: "clarify-top-nav hidden md:block",
-			"aria-label": t("navbar.sections"),
-			children: /* @__PURE__ */ 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__ */ jsx(TopLevelNavItem, {
-						href,
-						active: !isExternalHref(href) && isSameRoutePath(href, pathname, currentLocale),
-						children: resolveLocalizedText(link.label, currentLocale, config.locales?.default)
-					}, link.href);
-				})
-			})
+		return /* @__PURE__ */ jsx(NavbarMenus, {
+			menus: config.navigation?.menus,
+			config,
+			currentLocale
 		});
 	}
 	function renderHeaderActions() {
@@ -1610,8 +1668,12 @@ var Header = forwardRef(function Header(arg0, ref) {
 					routes,
 					navigation
 				}) : null,
+				tabsInNavbar ? /* @__PURE__ */ jsx(NavbarTabs, {
+					tabs,
+					currentLocale
+				}) : null,
 				renderTopLinks(),
-				hasNavbarLinks ? /* @__PURE__ */ 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__ */ 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__ */ jsx(MobileSearch, {
 					routes,
 					navigation
@@ -1623,7 +1685,7 @@ var Header = forwardRef(function Header(arg0, ref) {
 				}),
 				/* @__PURE__ */ jsx(ThemeToggle, {}),
 				/* @__PURE__ */ jsx(MobileNavbarMenu, {
-					links: config.navigation?.links,
+					menus: config.navigation?.menus,
 					config,
 					currentLocale
 				})
@@ -1648,16 +1710,13 @@ var Header = forwardRef(function Header(arg0, ref) {
 						})
 					}), renderBrand()]
 				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "clarify-header-center absolute left-1/2 hidden -translate-x-1/2 lg:block",
-					children: tabsInNavbar ? /* @__PURE__ */ jsx(NavbarTabs, {
-						tabs,
-						currentLocale
-					}) : /* @__PURE__ */ jsx(Search$1, {
+				!tabsInNavbar ? /* @__PURE__ */ jsx("div", {
+					className: "clarify-header-center hidden min-w-0 flex-1 justify-center lg:flex",
+					children: /* @__PURE__ */ jsx(Search$1, {
 						routes,
 						navigation
 					})
-				}),
+				}) : null,
 				renderHeaderActions()
 			]
 		});
@@ -1691,12 +1750,39 @@ var Header = 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__ */ jsxs("p", {
+		className: "clarify-page-updated-at m-0 flex items-center gap-1.5 text-xs text-(--clarify-ui-text-faint)",
+		children: [
+			/* @__PURE__ */ jsx(CalendarClock, {
+				className: "size-3.5",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx("span", { children: label }),
+			/* @__PURE__ */ jsx("time", {
+				dateTime: updatedAt,
+				children: formattedDate
+			})
+		]
+	});
+}
+//#endregion
 //#region source/app/PageActions.tsx
 var PageActionsContext = createContext({});
 function PageActionsProvider(props) {
-	const { children, route } = props;
+	const { children, route, locale } = props;
 	return /* @__PURE__ */ jsx(PageActionsContext.Provider, {
-		value: { route },
+		value: {
+			route,
+			locale
+		},
 		children
 	});
 }
@@ -1704,7 +1790,34 @@ function PageActions() {
 	const { route } = useContext(PageActionsContext);
 	return /* @__PURE__ */ jsx(ContentActions, { route });
 }
+function PageMetadata(props) {
+	const { route, locale: contextLocale } = useContext(PageActionsContext);
+	const { updatedAt = route?.updatedAt, locale = contextLocale } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "clarify-page-metadata flex w-full items-center justify-end gap-3",
+		children: [/* @__PURE__ */ jsx(PageUpdatedAt, {
+			updatedAt,
+			locale
+		}), route?.sourceEditUrl ? /* @__PURE__ */ 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__ */ jsx(PencilLine, {
+					className: "size-3.5",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", { children: locale?.toLowerCase().startsWith("zh") ? "编辑此页面" : "Edit this page" }),
+				/* @__PURE__ */ jsx(ExternalLink, {
+					className: "size-3",
+					"aria-hidden": "true"
+				})
+			]
+		}) : null]
+	});
+}
 //#endregion
-export { isExternalHref as C, copyTextToClipboard as D, resolveHomeHref as E, themeCookieName as S, prefixHref as T, getStoredThemePreference as _, SectionProvider as a, storeLocalePreference as b, lucideIconRegistry as c, normalizeRoutePath as d, resolveLocalizedText as f, getStoredLocalePreference as g, useTheme as h, Navigation as i, resolveLucideIconName as l, ThemeProvider as m, PageActionsProvider as n, useSectionStore as o, ThemeToggle as p, Header as r, remToPx as s, PageActions as t, isSameRoutePath as u, localeCookieName as v, localizeHref as w, storeThemePreference as x, readLocaleCookie as y };
+export { themeCookieName as C, resolveHomeHref as D, prefixHref as E, copyTextToClipboard as O, storeThemePreference as S, localizeHref as T, getStoredLocalePreference as _, Navigation as a, readLocaleCookie as b, remToPx as c, isSameRoutePath as d, normalizeRoutePath as f, useTheme as g, ThemeProvider as h, Header as i, lucideIconRegistry as l, ThemeToggle as m, PageActionsProvider as n, SectionProvider as o, resolveLocalizedText as p, PageMetadata as r, useSectionStore as s, PageActions as t, resolveLucideIconName as u, getStoredThemePreference as v, isExternalHref as w, storeLocalePreference as x, localeCookieName as y };
 
-//# sourceMappingURL=PageActions-CqXr0SyW.js.map
+//# sourceMappingURL=PageActions-D52u18C8.js.map