@lobehub/ui 5.48.2 → 5.49.0

package/es/dashboard/ConsoleNav/ConsoleNav.mjs

@@ -0,0 +1,275 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { Tooltip } from "../../base-ui/Tooltip/Tooltip.mjs";
+import ScrollShadow from "../../ScrollShadow/ScrollShadow.mjs";
+import { collectNavItems, findActiveBranch, resolveActiveHref } from "./active.mjs";
+import { useConsoleShellState } from "../ConsoleShell/context.mjs";
+import { useLocalStorage, usePrefersReducedMotion } from "../hooks.mjs";
+import { styles } from "./style.mjs";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Play } from "lucide-react";
+//#region src/dashboard/ConsoleNav/ConsoleNav.tsx
+const PANEL_TRANSITION_MS = 160;
+/** Older builds stored the closed group keys as an array. */
+function readOverrides(value) {
+	if (Array.isArray(value)) return Object.fromEntries(value.map((key) => [String(key), false]));
+	return value && typeof value === "object" ? value : {};
+}
+function scrollActiveIntoView(container) {
+	const link = container.querySelector("[aria-current=\"page\"]") ?? [...container.querySelectorAll("button[data-active=\"true\"]")].at(-1);
+	if (!link) return;
+	const containerRect = container.getBoundingClientRect();
+	const linkRect = link.getBoundingClientRect();
+	if (linkRect.top >= containerRect.top && linkRect.bottom <= containerRect.bottom) return;
+	container.scrollTop += linkRect.top - containerRect.top - (containerRect.height - linkRect.height) / 2;
+}
+function NavLink({ active, collapsed, context, href, icon, indent = 0, item, name }) {
+	const shell = useConsoleShellState();
+	const label = item?.label ?? name;
+	const follow = () => {
+		context.onNavigate?.(href);
+		shell?.closeNavigation();
+	};
+	const linkProps = {
+		"aria-current": active ? "page" : void 0,
+		"aria-label": collapsed ? name : void 0,
+		"children": /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			icon ? /* @__PURE__ */ jsx(Icon, {
+				icon,
+				size: 18
+			}) : null,
+			collapsed ? null : /* @__PURE__ */ jsx("span", {
+				className: styles.itemLabel,
+				children: label
+			}),
+			!collapsed && item?.badge ? /* @__PURE__ */ jsx("span", {
+				className: styles.badge,
+				children: item.badge
+			}) : null,
+			collapsed && item?.badge ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: styles.dot
+			}) : null
+		] }),
+		"className": styles.item,
+		"data-active": active,
+		"data-collapsed": collapsed,
+		"data-indent": indent,
+		"external": item?.external,
+		href,
+		"onClick": follow,
+		"title": collapsed ? void 0 : label
+	};
+	const link = context.renderLink ? context.renderLink(linkProps) : /* @__PURE__ */ jsx("a", {
+		"aria-current": linkProps["aria-current"],
+		"aria-label": linkProps["aria-label"],
+		className: linkProps.className,
+		"data-active": active,
+		"data-collapsed": collapsed,
+		"data-indent": indent,
+		href,
+		rel: item?.external ? "noreferrer" : void 0,
+		target: item?.external ? "_blank" : void 0,
+		title: linkProps.title,
+		onClick: (event) => {
+			if (context.onNavigate && !item?.external) event.preventDefault();
+			follow();
+		},
+		children: linkProps.children
+	});
+	if (!collapsed) return link;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		placement: "right",
+		title: name,
+		children: link
+	});
+}
+function ConsoleNav({ collapsed: collapsedProp, defaultExpanded = "all", groups = [], items = [], label = "Primary", onNavigate, pathname, renderLink, storageKey }) {
+	const id = useId();
+	const navRef = useRef(null);
+	const shell = useConsoleShellState();
+	const collapsed = collapsedProp ?? shell?.collapsed ?? false;
+	const reducedMotion = usePrefersReducedMotion();
+	const [storedOverrides, setStoredOverrides] = useLocalStorage(storageKey, {});
+	const overrides = readOverrides(storedOverrides);
+	const context = {
+		onNavigate,
+		renderLink
+	};
+	const activeHref = resolveActiveHref(pathname, [...items, ...collectNavItems(groups)]);
+	const activeBranch = findActiveBranch(pathname, groups, activeHref);
+	const [trackedPathname, setTrackedPathname] = useState(pathname);
+	if (trackedPathname !== pathname) {
+		setTrackedPathname(pathname);
+		if (activeBranch.some((key) => overrides[key] === false)) {
+			const next = { ...overrides };
+			for (const key of activeBranch) delete next[key];
+			setStoredOverrides(next);
+		}
+	}
+	const isExpanded = (group) => overrides[group.key] ?? (activeBranch.includes(group.key) || (group.defaultExpanded ?? defaultExpanded === "all"));
+	const toggleGroup = useCallback((key, expanded) => {
+		setStoredOverrides((current) => ({
+			...readOverrides(current),
+			[key]: !expanded
+		}));
+	}, [setStoredOverrides]);
+	useEffect(() => {
+		const container = navRef.current;
+		if (!container) return;
+		scrollActiveIntoView(container);
+		if (reducedMotion) return;
+		const timer = window.setTimeout(() => scrollActiveIntoView(container), PANEL_TRANSITION_MS);
+		return () => window.clearTimeout(timer);
+	}, [
+		activeHref,
+		collapsed,
+		pathname,
+		reducedMotion
+	]);
+	const renderItems = (list, indent, groupLabel) => list.map((item) => /* @__PURE__ */ jsx(NavLink, {
+		active: item.href === activeHref,
+		collapsed: false,
+		context,
+		href: item.href,
+		icon: item.icon,
+		indent: item.icon ? Math.max(0, indent - 1) : indent,
+		item,
+		name: groupLabel ? `${groupLabel} / ${item.label}` : item.label
+	}, item.href));
+	if (collapsed) {
+		const railItems = (list, groupLabel) => list.filter((item) => item.icon).map((item) => /* @__PURE__ */ jsx(NavLink, {
+			collapsed: true,
+			active: item.href === activeHref,
+			context,
+			href: item.href,
+			icon: item.icon,
+			item,
+			name: groupLabel ? `${groupLabel} / ${item.label}` : item.label
+		}, item.href));
+		const topRail = railItems(items);
+		const iconGroups = groups.filter((group) => group.icon);
+		return /* @__PURE__ */ jsxs(ScrollShadow, {
+			"aria-label": label,
+			as: "nav",
+			className: styles.nav,
+			"data-collapsed": "",
+			orientation: "vertical",
+			ref: navRef,
+			size: 8,
+			children: [
+				topRail.length > 0 ? /* @__PURE__ */ jsx("div", {
+					className: styles.railTop,
+					children: topRail
+				}) : null,
+				iconGroups.length > 0 ? /* @__PURE__ */ jsx("div", {
+					className: styles.railGroup,
+					"data-first": topRail.length === 0,
+					role: "group",
+					children: iconGroups.map((group) => {
+						const href = group.href ?? collectNavItems([group])[0]?.href;
+						if (!href) return null;
+						return /* @__PURE__ */ jsx(NavLink, {
+							collapsed: true,
+							active: activeBranch[0] === group.key,
+							context,
+							href,
+							icon: group.icon,
+							name: group.label
+						}, group.key);
+					})
+				}) : null,
+				groups.filter((group) => !group.icon).map((group, index) => {
+					const rail = railItems(collectNavItems([group]), group.label);
+					if (rail.length === 0) return null;
+					return /* @__PURE__ */ jsxs("div", {
+						className: styles.railGroup,
+						"data-first": topRail.length === 0 && iconGroups.length === 0 && index === 0,
+						role: "group",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: styles.srOnly,
+							children: group.label
+						}), rail]
+					}, group.key);
+				})
+			]
+		});
+	}
+	const renderGroup = (group, level, indent) => {
+		const expanded = isExpanded(group);
+		const panelId = `${id}-${group.key}`;
+		const childIndent = indent + (group.icon ? 1 : 0);
+		const active = activeBranch.includes(group.key);
+		return /* @__PURE__ */ jsxs("div", {
+			className: styles.group,
+			"data-icon": Boolean(group.icon),
+			"data-level": level,
+			children: [/* @__PURE__ */ jsxs("button", {
+				"aria-controls": panelId,
+				"aria-expanded": expanded,
+				className: styles.groupHeader,
+				"data-active": active,
+				"data-icon": Boolean(group.icon),
+				"data-indent": indent,
+				"data-level": level,
+				type: "button",
+				onClick: () => toggleGroup(group.key, expanded),
+				children: [
+					group.icon ? /* @__PURE__ */ jsx(Icon, {
+						icon: group.icon,
+						size: 16
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: styles.itemLabel,
+						"data-label": "",
+						children: group.label
+					}),
+					level === 0 ? /* @__PURE__ */ jsx(Icon, {
+						className: styles.chevron,
+						"data-expanded": expanded,
+						icon: ChevronDown,
+						size: 14
+					}) : /* @__PURE__ */ jsx("span", {
+						className: styles.indicator,
+						"data-expanded": expanded,
+						children: /* @__PURE__ */ jsx(Play, {
+							fill: "currentColor",
+							size: 7,
+							strokeWidth: 1
+						})
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				"aria-hidden": !expanded,
+				className: styles.groupPanel,
+				"data-expanded": expanded,
+				"data-instant": reducedMotion,
+				id: panelId,
+				inert: expanded ? void 0 : true,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: styles.groupItems,
+					children: [renderItems(group.items ?? [], childIndent, group.label), (group.groups ?? []).map((child) => renderGroup(child, level + 1, childIndent))]
+				})
+			})]
+		}, group.key);
+	};
+	return /* @__PURE__ */ jsxs(ScrollShadow, {
+		"aria-label": label,
+		as: "nav",
+		className: styles.nav,
+		orientation: "vertical",
+		ref: navRef,
+		size: 4,
+		children: [items.length > 0 ? /* @__PURE__ */ jsx("div", {
+			className: styles.topItems,
+			"data-divided": groups.length > 0,
+			children: renderItems(items, 0)
+		}) : null, groups.map((group) => renderGroup(group, 0, 0))]
+	});
+}
+ConsoleNav.displayName = "ConsoleNav";
+//#endregion
+export { ConsoleNav as default };
+
+//# sourceMappingURL=ConsoleNav.mjs.map

package/es/dashboard/ConsoleNav/ConsoleNav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsoleNav.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/ConsoleNav.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown, Play } from 'lucide-react';\nimport { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport Tooltip from '@/base-ui/Tooltip';\nimport Icon from '@/Icon';\nimport ScrollShadow from '@/ScrollShadow';\n\nimport { useConsoleShellState } from '../ConsoleShell/context';\nimport { useLocalStorage, usePrefersReducedMotion } from '../hooks';\nimport { collectNavItems, findActiveBranch, resolveActiveHref } from './active';\nimport { styles } from './style';\nimport type { ConsoleNavGroup, ConsoleNavItem, ConsoleNavLinkProps, ConsoleNavProps } from './type';\n\nconst PANEL_TRANSITION_MS = 160;\n\ntype ExpandedOverrides = Record<string, boolean>;\n\n/** Older builds stored the closed group keys as an array. */\nfunction readOverrides(value: unknown): ExpandedOverrides {\n  if (Array.isArray(value)) {\n    return Object.fromEntries(value.map((key) => [String(key), false]));\n  }\n  return value && typeof value === 'object' ? (value as ExpandedOverrides) : {};\n}\n\nfunction scrollActiveIntoView(container: HTMLElement) {\n  const link =\n    container.querySelector<HTMLElement>('[aria-current=\"page\"]') ??\n    [...container.querySelectorAll<HTMLElement>('button[data-active=\"true\"]')].at(-1);\n  if (!link) return;\n  const containerRect = container.getBoundingClientRect();\n  const linkRect = link.getBoundingClientRect();\n  if (linkRect.top >= containerRect.top && linkRect.bottom <= containerRect.bottom) return;\n  container.scrollTop +=\n    linkRect.top - containerRect.top - (containerRect.height - linkRect.height) / 2;\n}\n\ninterface LinkContext {\n  onNavigate?: (href: string) => void;\n  renderLink?: ConsoleNavProps['renderLink'];\n}\n\nfunction NavLink({\n  active,\n  collapsed,\n  context,\n  href,\n  icon,\n  indent = 0,\n  item,\n  name,\n}: {\n  active: boolean;\n  collapsed: boolean;\n  context: LinkContext;\n  href: string;\n  icon?: ConsoleNavItem['icon'];\n  indent?: number;\n  item?: ConsoleNavItem;\n  name: string;\n}) {\n  const shell = useConsoleShellState();\n  const label = item?.label ?? name;\n  const follow = () => {\n    context.onNavigate?.(href);\n    shell?.closeNavigation();\n  };\n  const linkProps: ConsoleNavLinkProps = {\n    'aria-current': active ? 'page' : undefined,\n    'aria-label': collapsed ? name : undefined,\n    'children': (\n      <>\n        {icon ? <Icon icon={icon} size={18} /> : null}\n        {collapsed ? null : <span className={styles.itemLabel}>{label}</span>}\n        {!collapsed && item?.badge ? <span className={styles.badge}>{item.badge}</span> : null}\n        {collapsed && item?.badge ? <span aria-hidden className={styles.dot} /> : null}\n      </>\n    ),\n    'className': styles.item,\n    'data-active': active,\n    'data-collapsed': collapsed,\n    'data-indent': indent,\n    'external': item?.external,\n    href,\n    'onClick': follow,\n    'title': collapsed ? undefined : label,\n  };\n\n  const link = context.renderLink ? (\n    context.renderLink(linkProps)\n  ) : (\n    <a\n      aria-current={linkProps['aria-current']}\n      aria-label={linkProps['aria-label']}\n      className={linkProps.className}\n      data-active={active}\n      data-collapsed={collapsed}\n      data-indent={indent}\n      href={href}\n      rel={item?.external ? 'noreferrer' : undefined}\n      target={item?.external ? '_blank' : undefined}\n      title={linkProps.title}\n      onClick={(event) => {\n        if (context.onNavigate && !item?.external) event.preventDefault();\n        follow();\n      }}\n    >\n      {linkProps.children}\n    </a>\n  );\n\n  if (!collapsed) return link;\n  return (\n    <Tooltip placement=\"right\" title={name}>\n      {link}\n    </Tooltip>\n  );\n}\n\nfunction ConsoleNav({\n  collapsed: collapsedProp,\n  defaultExpanded = 'all',\n  groups = [],\n  items = [],\n  label = 'Primary',\n  onNavigate,\n  pathname,\n  renderLink,\n  storageKey,\n}: ConsoleNavProps) {\n  const id = useId();\n  const navRef = useRef<HTMLDivElement>(null);\n  const shell = useConsoleShellState();\n  const collapsed = collapsedProp ?? shell?.collapsed ?? false;\n  const reducedMotion = usePrefersReducedMotion();\n  const [storedOverrides, setStoredOverrides] = useLocalStorage<unknown>(storageKey, {});\n  const overrides = readOverrides(storedOverrides);\n  const context: LinkContext = { onNavigate, renderLink };\n\n  const activeHref = resolveActiveHref(pathname, [...items, ...collectNavItems(groups)]);\n  const activeBranch = findActiveBranch(pathname, groups, activeHref);\n\n  // Arriving on a page reopens its branch even if it was closed by hand earlier.\n  const [trackedPathname, setTrackedPathname] = useState(pathname);\n  if (trackedPathname !== pathname) {\n    setTrackedPathname(pathname);\n    if (activeBranch.some((key) => overrides[key] === false)) {\n      const next = { ...overrides };\n      for (const key of activeBranch) delete next[key];\n      setStoredOverrides(next);\n    }\n  }\n\n  const isExpanded = (group: ConsoleNavGroup) =>\n    overrides[group.key] ??\n    (activeBranch.includes(group.key) || (group.defaultExpanded ?? defaultExpanded === 'all'));\n\n  const toggleGroup = useCallback(\n    (key: string, expanded: boolean) => {\n      setStoredOverrides((current: unknown) => ({ ...readOverrides(current), [key]: !expanded }));\n    },\n    [setStoredOverrides],\n  );\n\n  useEffect(() => {\n    const container = navRef.current;\n    if (!container) return;\n    scrollActiveIntoView(container);\n    if (reducedMotion) return;\n    const timer = window.setTimeout(() => scrollActiveIntoView(container), PANEL_TRANSITION_MS);\n    return () => window.clearTimeout(timer);\n  }, [activeHref, collapsed, pathname, reducedMotion]);\n\n  const renderItems = (list: ConsoleNavItem[], indent: number, groupLabel?: string) =>\n    list.map((item) => (\n      <NavLink\n        active={item.href === activeHref}\n        collapsed={false}\n        context={context}\n        href={item.href}\n        icon={item.icon}\n        indent={item.icon ? Math.max(0, indent - 1) : indent}\n        item={item}\n        key={item.href}\n        name={groupLabel ? `${groupLabel} / ${item.label}` : item.label}\n      />\n    ));\n\n  if (collapsed) {\n    const railItems = (list: ConsoleNavItem[], groupLabel?: string) =>\n      list\n        .filter((item) => item.icon)\n        .map((item) => (\n          <NavLink\n            collapsed\n            active={item.href === activeHref}\n            context={context}\n            href={item.href}\n            icon={item.icon}\n            item={item}\n            key={item.href}\n            name={groupLabel ? `${groupLabel} / ${item.label}` : item.label}\n          />\n        ));\n    const topRail = railItems(items);\n    const iconGroups = groups.filter((group) => group.icon);\n\n    return (\n      <ScrollShadow\n        aria-label={label}\n        as={'nav'}\n        className={styles.nav}\n        data-collapsed=\"\"\n        orientation={'vertical'}\n        ref={navRef}\n        size={8}\n      >\n        {topRail.length > 0 ? <div className={styles.railTop}>{topRail}</div> : null}\n        {iconGroups.length > 0 ? (\n          <div className={styles.railGroup} data-first={topRail.length === 0} role=\"group\">\n            {iconGroups.map((group) => {\n              const href = group.href ?? collectNavItems([group])[0]?.href;\n              if (!href) return null;\n              return (\n                <NavLink\n                  collapsed\n                  active={activeBranch[0] === group.key}\n                  context={context}\n                  href={href}\n                  icon={group.icon}\n                  key={group.key}\n                  name={group.label}\n                />\n              );\n            })}\n          </div>\n        ) : null}\n        {groups\n          .filter((group) => !group.icon)\n          .map((group, index) => {\n            const rail = railItems(collectNavItems([group]), group.label);\n            if (rail.length === 0) return null;\n            return (\n              <div\n                className={styles.railGroup}\n                data-first={topRail.length === 0 && iconGroups.length === 0 && index === 0}\n                key={group.key}\n                role=\"group\"\n              >\n                <h2 className={styles.srOnly}>{group.label}</h2>\n                {rail}\n              </div>\n            );\n          })}\n      </ScrollShadow>\n    );\n  }\n\n  const renderGroup = (group: ConsoleNavGroup, level: number, indent: number) => {\n    const expanded = isExpanded(group);\n    const panelId = `${id}-${group.key}`;\n    // Nested groups are headings over their items, so the items keep the same indent.\n    const childIndent = indent + (group.icon ? 1 : 0);\n    const active = activeBranch.includes(group.key);\n\n    return (\n      <div\n        className={styles.group}\n        data-icon={Boolean(group.icon)}\n        data-level={level}\n        key={group.key}\n      >\n        <button\n          aria-controls={panelId}\n          aria-expanded={expanded}\n          className={styles.groupHeader}\n          data-active={active}\n          data-icon={Boolean(group.icon)}\n          data-indent={indent}\n          data-level={level}\n          type=\"button\"\n          onClick={() => toggleGroup(group.key, expanded)}\n        >\n          {group.icon ? <Icon icon={group.icon} size={16} /> : null}\n          <span className={styles.itemLabel} data-label=\"\">\n            {group.label}\n          </span>\n          {level === 0 ? (\n            <Icon\n              className={styles.chevron}\n              data-expanded={expanded}\n              icon={ChevronDown}\n              size={14}\n            />\n          ) : (\n            <span className={styles.indicator} data-expanded={expanded}>\n              <Play fill={'currentColor'} size={7} strokeWidth={1} />\n            </span>\n          )}\n        </button>\n        <div\n          aria-hidden={!expanded}\n          className={styles.groupPanel}\n          data-expanded={expanded}\n          data-instant={reducedMotion}\n          id={panelId}\n          inert={expanded ? undefined : true}\n        >\n          <div className={styles.groupItems}>\n            {renderItems(group.items ?? [], childIndent, group.label)}\n            {(group.groups ?? []).map((child) => renderGroup(child, level + 1, childIndent))}\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <ScrollShadow\n      aria-label={label}\n      as={'nav'}\n      className={styles.nav}\n      orientation={'vertical'}\n      ref={navRef}\n      size={4}\n    >\n      {items.length > 0 ? (\n        <div className={styles.topItems} data-divided={groups.length > 0}>\n          {renderItems(items, 0)}\n        </div>\n      ) : null}\n      {groups.map((group) => renderGroup(group, 0, 0))}\n    </ScrollShadow>\n  );\n}\n\nConsoleNav.displayName = 'ConsoleNav';\n\nexport default ConsoleNav;\n"],"mappings":"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"}

package/es/dashboard/ConsoleNav/active.d.mts

@@ -0,0 +1,7 @@
+import { ConsoleNavItem } from "./type.mjs";
+//#region src/dashboard/ConsoleNav/active.d.ts
+/** Longest matching href wins, so `/resources/new` does not also light up `/`. */
+declare function resolveActiveHref(pathname: string, items: readonly ConsoleNavItem[]): string;
+//#endregion
+export { resolveActiveHref };
+//# sourceMappingURL=active.d.mts.map

package/es/dashboard/ConsoleNav/active.mjs

@@ -0,0 +1,29 @@
+//#region src/dashboard/ConsoleNav/active.ts
+function matchesNavPath(pathname, item) {
+	if (item.end || item.href === "/") return pathname === item.href;
+	return pathname === item.href || pathname.startsWith(`${item.href}/`);
+}
+/** Longest matching href wins, so `/resources/new` does not also light up `/`. */
+function resolveActiveHref(pathname, items) {
+	return items.filter((item) => matchesNavPath(pathname, item)).sort((left, right) => right.href.length - left.href.length)[0]?.href;
+}
+function collectNavItems(groups) {
+	return groups.flatMap((group) => [...group.items ?? [], ...collectNavItems(group.groups ?? [])]);
+}
+/**
+* Keys of the groups on the path to the active page, outermost first. A group
+* overview page (`href`) counts as being inside that group.
+*/
+function findActiveBranch(pathname, groups, activeHref) {
+	for (const group of groups) {
+		if (group.href && pathname === group.href) return [group.key];
+		const nested = findActiveBranch(pathname, group.groups ?? [], activeHref);
+		if (nested.length > 0) return [group.key, ...nested];
+		if (activeHref && group.items?.some((item) => item.href === activeHref)) return [group.key];
+	}
+	return [];
+}
+//#endregion
+export { collectNavItems, findActiveBranch, matchesNavPath, resolveActiveHref };
+
+//# sourceMappingURL=active.mjs.map

package/es/dashboard/ConsoleNav/active.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"active.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/active.ts"],"sourcesContent":["import type { ConsoleNavGroup, ConsoleNavItem } from './type';\n\nexport function matchesNavPath(pathname: string, item: Pick<ConsoleNavItem, 'end' | 'href'>) {\n  if (item.end || item.href === '/') return pathname === item.href;\n  return pathname === item.href || pathname.startsWith(`${item.href}/`);\n}\n\n/** Longest matching href wins, so `/resources/new` does not also light up `/`. */\nexport function resolveActiveHref(pathname: string, items: readonly ConsoleNavItem[]) {\n  return items\n    .filter((item) => matchesNavPath(pathname, item))\n    .sort((left, right) => right.href.length - left.href.length)[0]?.href;\n}\n\nexport function collectNavItems(groups: readonly ConsoleNavGroup[]): ConsoleNavItem[] {\n  return groups.flatMap((group) => [\n    ...(group.items ?? []),\n    ...collectNavItems(group.groups ?? []),\n  ]);\n}\n\n/**\n * Keys of the groups on the path to the active page, outermost first. A group\n * overview page (`href`) counts as being inside that group.\n */\nexport function findActiveBranch(\n  pathname: string,\n  groups: readonly ConsoleNavGroup[],\n  activeHref: string | undefined,\n): string[] {\n  for (const group of groups) {\n    if (group.href && pathname === group.href) return [group.key];\n    const nested = findActiveBranch(pathname, group.groups ?? [], activeHref);\n    if (nested.length > 0) return [group.key, ...nested];\n    if (activeHref && group.items?.some((item) => item.href === activeHref)) return [group.key];\n  }\n  return [];\n}\n"],"mappings":";AAEA,SAAgB,eAAe,UAAkB,MAA4C;CAC3F,IAAI,KAAK,OAAO,KAAK,SAAS,KAAK,OAAO,aAAa,KAAK;CAC5D,OAAO,aAAa,KAAK,QAAQ,SAAS,WAAW,GAAG,KAAK,KAAK,EAAE;AACtE;;AAGA,SAAgB,kBAAkB,UAAkB,OAAkC;CACpF,OAAO,MACJ,QAAQ,SAAS,eAAe,UAAU,IAAI,CAAC,CAAC,CAChD,MAAM,MAAM,UAAU,MAAM,KAAK,SAAS,KAAK,KAAK,MAAM,CAAC,CAAC,EAAE,EAAE;AACrE;AAEA,SAAgB,gBAAgB,QAAsD;CACpF,OAAO,OAAO,SAAS,UAAU,CAC/B,GAAI,MAAM,SAAS,CAAC,GACpB,GAAG,gBAAgB,MAAM,UAAU,CAAC,CAAC,CACvC,CAAC;AACH;;;;;AAMA,SAAgB,iBACd,UACA,QACA,YACU;CACV,KAAK,MAAM,SAAS,QAAQ;EAC1B,IAAI,MAAM,QAAQ,aAAa,MAAM,MAAM,OAAO,CAAC,MAAM,GAAG;EAC5D,MAAM,SAAS,iBAAiB,UAAU,MAAM,UAAU,CAAC,GAAG,UAAU;EACxE,IAAI,OAAO,SAAS,GAAG,OAAO,CAAC,MAAM,KAAK,GAAG,MAAM;EACnD,IAAI,cAAc,MAAM,OAAO,MAAM,SAAS,KAAK,SAAS,UAAU,GAAG,OAAO,CAAC,MAAM,GAAG;CAC5F;CACA,OAAO,CAAC;AACV"}

package/es/dashboard/ConsoleNav/index.d.mts

@@ -0,0 +1,4 @@
+import { ConsoleNavGroup, ConsoleNavItem, ConsoleNavLinkProps, ConsoleNavProps } from "./type.mjs";
+import { resolveActiveHref } from "./active.mjs";
+import ConsoleNav from "./ConsoleNav.mjs";
+export { type ConsoleNavGroup, type ConsoleNavItem, type ConsoleNavProps, ConsoleNav as default, resolveActiveHref };

package/es/dashboard/ConsoleNav/style.mjs

@@ -0,0 +1,283 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/ConsoleNav/style.ts
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	badge: css`
+    flex: none;
+
+    min-inline-size: 20px;
+    padding-inline: 6px;
+    border-radius: 999px;
+
+    font-size: ${cssVar.fontSizeSM};
+    font-variant-numeric: tabular-nums;
+    color: ${cssVar.colorError};
+    text-align: center;
+
+    background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);
+  `,
+	chevron: css`
+    flex: none;
+    transition: transform 160ms ease;
+
+    &[data-expanded='false'] {
+      transform: rotate(-90deg);
+    }
+  `,
+	indicator: css`
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    width: 18px;
+    height: 18px;
+    margin-inline-start: -6px;
+
+    color: ${cssVar.colorTextDescription};
+
+    transition: transform 160ms ease;
+
+    &[data-expanded='true'] {
+      transform: rotate(90deg);
+    }
+  `,
+	dot: css`
+    position: absolute;
+    inset-block-start: 7px;
+    inset-inline-end: 9px;
+
+    inline-size: 7px;
+    block-size: 7px;
+    border-radius: 999px;
+
+    background: ${cssVar.colorError};
+  `,
+	group: css`
+    display: flex;
+    flex-direction: column;
+    margin-block-start: 12px;
+
+    &[data-level='0'][data-icon='true'] {
+      margin-block-start: 2px;
+    }
+
+    &:not([data-level='0']) {
+      margin-block-start: 6px;
+    }
+  `,
+	groupHeader: css`
+    cursor: pointer;
+
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+
+    min-block-size: 32px;
+    padding-inline: 10px;
+    border: none;
+    border-radius: ${cssVar.borderRadius};
+
+    font-size: ${cssVar.fontSizeSM};
+    font-weight: 500;
+    color: ${cssVar.colorTextSecondary};
+    text-align: start;
+
+    background: none;
+
+    &:hover,
+    &[data-active='true'] {
+      color: ${cssVar.colorText};
+    }
+
+    &[data-icon='true'] {
+      gap: 12px;
+      justify-content: flex-start;
+      min-block-size: 36px;
+      font-size: ${cssVar.fontSize};
+    }
+
+    &[data-level='0'][data-icon='true']:hover {
+      background: ${cssVar.colorFillTertiary};
+    }
+
+    /* Nested groups read as quiet subheadings with the indicator right after the label. */
+    &:not([data-level='0']) {
+      gap: 8px;
+      justify-content: flex-start;
+
+      min-block-size: 26px;
+
+      font-size: ${cssVar.fontSizeSM};
+      font-weight: 400;
+      color: ${cssVar.colorTextDescription};
+
+      > [data-label] {
+        flex: 0 1 auto;
+      }
+
+      &:hover,
+      &[data-active='true'] {
+        color: ${cssVar.colorTextSecondary};
+      }
+    }
+
+    &[data-indent='1'] {
+      padding-inline-start: 38px;
+    }
+
+    &[data-indent='2'] {
+      padding-inline-start: 56px;
+    }
+
+    > [role='img'] {
+      display: flex;
+      flex: none;
+    }
+  `,
+	groupItems: css`
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-block-size: 0;
+  `,
+	groupPanel: css`
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows 160ms ease;
+
+    > div {
+      overflow: hidden;
+    }
+
+    &[data-expanded='false'] {
+      grid-template-rows: 0fr;
+    }
+
+    &[data-instant='true'] {
+      transition: none;
+    }
+  `,
+	item: css`
+    position: relative;
+
+    display: flex;
+    gap: 10px;
+    align-items: center;
+
+    min-block-size: 36px;
+    padding-inline: 10px;
+    border-radius: ${cssVar.borderRadius};
+
+    color: ${cssVar.colorTextSecondary};
+    text-decoration: none;
+
+    transition:
+      background 120ms ease,
+      color 120ms ease;
+
+    &:hover {
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillTertiary};
+    }
+
+    &[data-active='true'] {
+      font-weight: 500;
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillSecondary};
+    }
+
+    &[data-indent='1'],
+    &[data-indent='2'] {
+      min-block-size: 32px;
+      color: ${cssVar.colorText};
+    }
+
+    &[data-indent='1'] {
+      padding-inline-start: 38px;
+    }
+
+    &[data-indent='2'] {
+      padding-inline-start: 56px;
+    }
+
+    > [role='img'] {
+      display: flex;
+      flex: none;
+    }
+
+    &[data-collapsed='true'] {
+      justify-content: center;
+      min-block-size: 40px;
+      padding-inline: 0;
+    }
+
+    ${responsive.mobile} {
+      min-block-size: 44px;
+    }
+  `,
+	itemLabel: css`
+    overflow: hidden;
+    flex: 1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	nav: css`
+    scrollbar-width: thin;
+
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 2px;
+
+    min-block-size: 0;
+    padding-block-end: 12px;
+    padding-inline: 8px;
+  `,
+	railGroup: css`
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    margin-block-start: 6px;
+    padding-block-start: 6px;
+    border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+
+    &[data-first='true'] {
+      margin-block-start: 0;
+      border-block-start: none;
+    }
+  `,
+	railTop: css`
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  `,
+	topItems: css`
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    &[data-divided='true'] {
+      margin-block-end: 6px;
+      padding-block-end: 8px;
+      border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+    }
+  `,
+	srOnly: css`
+    position: absolute;
+
+    overflow: hidden;
+
+    inline-size: 1px;
+    block-size: 1px;
+
+    white-space: nowrap;
+
+    clip-path: inset(50%);
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/dashboard/ConsoleNav/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  badge: css`\n    flex: none;\n\n    min-inline-size: 20px;\n    padding-inline: 6px;\n    border-radius: 999px;\n\n    font-size: ${cssVar.fontSizeSM};\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorError};\n    text-align: center;\n\n    background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);\n  `,\n  chevron: css`\n    flex: none;\n    transition: transform 160ms ease;\n\n    &[data-expanded='false'] {\n      transform: rotate(-90deg);\n    }\n  `,\n  indicator: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    width: 18px;\n    height: 18px;\n    margin-inline-start: -6px;\n\n    color: ${cssVar.colorTextDescription};\n\n    transition: transform 160ms ease;\n\n    &[data-expanded='true'] {\n      transform: rotate(90deg);\n    }\n  `,\n  dot: css`\n    position: absolute;\n    inset-block-start: 7px;\n    inset-inline-end: 9px;\n\n    inline-size: 7px;\n    block-size: 7px;\n    border-radius: 999px;\n\n    background: ${cssVar.colorError};\n  `,\n  group: css`\n    display: flex;\n    flex-direction: column;\n    margin-block-start: 12px;\n\n    &[data-level='0'][data-icon='true'] {\n      margin-block-start: 2px;\n    }\n\n    &:not([data-level='0']) {\n      margin-block-start: 6px;\n    }\n  `,\n  groupHeader: css`\n    cursor: pointer;\n\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    min-block-size: 32px;\n    padding-inline: 10px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: ${cssVar.fontSizeSM};\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    text-align: start;\n\n    background: none;\n\n    &:hover,\n    &[data-active='true'] {\n      color: ${cssVar.colorText};\n    }\n\n    &[data-icon='true'] {\n      gap: 12px;\n      justify-content: flex-start;\n      min-block-size: 36px;\n      font-size: ${cssVar.fontSize};\n    }\n\n    &[data-level='0'][data-icon='true']:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    /* Nested groups read as quiet subheadings with the indicator right after the label. */\n    &:not([data-level='0']) {\n      gap: 8px;\n      justify-content: flex-start;\n\n      min-block-size: 26px;\n\n      font-size: ${cssVar.fontSizeSM};\n      font-weight: 400;\n      color: ${cssVar.colorTextDescription};\n\n      > [data-label] {\n        flex: 0 1 auto;\n      }\n\n      &:hover,\n      &[data-active='true'] {\n        color: ${cssVar.colorTextSecondary};\n      }\n    }\n\n    &[data-indent='1'] {\n      padding-inline-start: 38px;\n    }\n\n    &[data-indent='2'] {\n      padding-inline-start: 56px;\n    }\n\n    > [role='img'] {\n      display: flex;\n      flex: none;\n    }\n  `,\n  groupItems: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-block-size: 0;\n  `,\n  groupPanel: css`\n    display: grid;\n    grid-template-rows: 1fr;\n    transition: grid-template-rows 160ms ease;\n\n    > div {\n      overflow: hidden;\n    }\n\n    &[data-expanded='false'] {\n      grid-template-rows: 0fr;\n    }\n\n    &[data-instant='true'] {\n      transition: none;\n    }\n  `,\n  item: css`\n    position: relative;\n\n    display: flex;\n    gap: 10px;\n    align-items: center;\n\n    min-block-size: 36px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n\n    color: ${cssVar.colorTextSecondary};\n    text-decoration: none;\n\n    transition:\n      background 120ms ease,\n      color 120ms ease;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &[data-active='true'] {\n      font-weight: 500;\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &[data-indent='1'],\n    &[data-indent='2'] {\n      min-block-size: 32px;\n      color: ${cssVar.colorText};\n    }\n\n    &[data-indent='1'] {\n      padding-inline-start: 38px;\n    }\n\n    &[data-indent='2'] {\n      padding-inline-start: 56px;\n    }\n\n    > [role='img'] {\n      display: flex;\n      flex: none;\n    }\n\n    &[data-collapsed='true'] {\n      justify-content: center;\n      min-block-size: 40px;\n      padding-inline: 0;\n    }\n\n    ${responsive.mobile} {\n      min-block-size: 44px;\n    }\n  `,\n  itemLabel: css`\n    overflow: hidden;\n    flex: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  nav: css`\n    scrollbar-width: thin;\n\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 2px;\n\n    min-block-size: 0;\n    padding-block-end: 12px;\n    padding-inline: 8px;\n  `,\n  railGroup: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n\n    margin-block-start: 6px;\n    padding-block-start: 6px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n\n    &[data-first='true'] {\n      margin-block-start: 0;\n      border-block-start: none;\n    }\n  `,\n  railTop: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  `,\n  topItems: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n\n    &[data-divided='true'] {\n      margin-block-end: 6px;\n      padding-block-end: 8px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  srOnly: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;;iBAOK,OAAO,WAAW;;aAEtB,OAAO,WAAW;;;qCAGM,OAAO,WAAW;;CAErD,SAAS,GAAG;;;;;;;;CAQZ,WAAW,GAAG;;;;;;;;;;aAUH,OAAO,qBAAqB;;;;;;;;CAQvC,KAAK,GAAG;;;;;;;;;kBASQ,OAAO,WAAW;;CAElC,OAAO,GAAG;;;;;;;;;;;;;CAaV,aAAa,GAAG;;;;;;;;;;;qBAWG,OAAO,aAAa;;iBAExB,OAAO,WAAW;;aAEtB,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;;;;;;;mBAOb,OAAO,SAAS;;;;oBAIf,OAAO,kBAAkB;;;;;;;;;;mBAU1B,OAAO,WAAW;;eAEtB,OAAO,qBAAqB;;;;;;;;iBAQ1B,OAAO,mBAAmB;;;;;;;;;;;;;;;;;CAiBzC,YAAY,GAAG;;;;;;CAMf,YAAY,GAAG;;;;;;;;;;;;;;;;;CAiBf,MAAM,GAAG;;;;;;;;;qBASU,OAAO,aAAa;;aAE5B,OAAO,mBAAmB;;;;;;;;eAQxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;;;eAK9B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;eAM/B,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;MAsB1B,WAAW,OAAO;;;;CAItB,WAAW,GAAG;;;;;;CAMd,KAAK,GAAG;;;;;;;;;;;;CAYR,WAAW,GAAG;;;;;;;oCAOoB,OAAO,qBAAqB;;;;;;;CAO9D,SAAS,GAAG;;;;;CAKZ,UAAU,GAAG;;;;;;;;oCAQqB,OAAO,qBAAqB;;;CAG9D,QAAQ,GAAG;;;;;;;;;;;;AAYb,EAAE"}