@jinmi/ui 0.0.0-stage → 6.0.1

package/es/dashboard/ConsoleNav/ConsoleNav.mjs

@@ -0,0 +1,273 @@
+"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;
+const RAIL_TRANSITION_MS = 200;
+/** 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, behavior = "auto") {
+	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.scrollBy({
+		behavior,
+		top: linkRect.top - containerRect.top - (containerRect.height - linkRect.height) / 2
+	});
+}
+function renderAnchor(context, linkProps, onFollow) {
+	if (context.renderLink) return context.renderLink(linkProps);
+	return /* @__PURE__ */ jsx("a", {
+		"aria-current": linkProps["aria-current"],
+		"aria-label": linkProps["aria-label"],
+		className: linkProps.className,
+		"data-active": linkProps["data-active"],
+		"data-collapsed": linkProps["data-collapsed"],
+		"data-indent": linkProps["data-indent"],
+		href: linkProps.href,
+		rel: linkProps.external ? "noreferrer" : void 0,
+		target: linkProps.external ? "_blank" : void 0,
+		title: linkProps.title,
+		onClick: (event) => {
+			if (context.onNavigate && !linkProps.external) event.preventDefault();
+			onFollow();
+		},
+		children: linkProps.children
+	});
+}
+function NavLink({ active, collapsed, context, href, icon, indent = 0, item, name, overlay = false }) {
+	const shell = useConsoleShellState();
+	const label = item?.label ?? name;
+	const follow = () => {
+		context.onNavigate?.(href);
+		shell?.closeNavigation();
+	};
+	const link = renderAnchor(context, {
+		"aria-current": active ? "page" : void 0,
+		"aria-label": collapsed ? name : void 0,
+		"children": overlay ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			icon ? /* @__PURE__ */ jsx(Icon, {
+				icon,
+				size: 18
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: styles.itemLabel,
+				children: label
+			}),
+			item?.badge ? /* @__PURE__ */ jsx("span", {
+				className: styles.badge,
+				children: item.badge
+			}) : null,
+			item?.badge ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: styles.dot
+			}) : null
+		] }),
+		"className": overlay ? styles.railLink : styles.item,
+		"data-active": active,
+		"data-collapsed": collapsed,
+		"data-indent": indent,
+		"external": item?.external,
+		href,
+		"onClick": follow,
+		"title": collapsed ? void 0 : label
+	}, follow);
+	if (!icon && !overlay) return link;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		disabled: !collapsed,
+		placement: "right",
+		title: name,
+		children: link
+	});
+}
+function Fold({ children, folded }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": folded || void 0,
+		className: styles.fold,
+		"data-folded": folded,
+		inert: folded || void 0,
+		children: /* @__PURE__ */ jsx("div", { children })
+	});
+}
+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,
+		pathname,
+		reducedMotion
+	]);
+	useEffect(() => {
+		const container = navRef.current;
+		if (!container) return;
+		const timer = window.setTimeout(() => scrollActiveIntoView(container, reducedMotion ? "auto" : "smooth"), reducedMotion ? 0 : RAIL_TRANSITION_MS);
+		return () => window.clearTimeout(timer);
+	}, [collapsed, reducedMotion]);
+	const renderItems = (list, indent, groupLabel, foldable) => list.map((item) => {
+		const link = /* @__PURE__ */ jsx(NavLink, {
+			active: item.href === activeHref,
+			collapsed,
+			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 (item.icon || !foldable) return link;
+		return /* @__PURE__ */ jsx(Fold, {
+			folded: collapsed,
+			children: link
+		}, item.href);
+	});
+	const renderGroup = (group, level, indent, underRailIcon) => {
+		const expanded = isExpanded(group);
+		const panelId = `${id}-${group.key}`;
+		const childIndent = indent + (group.icon ? 1 : 0);
+		const active = activeBranch.includes(group.key);
+		const railIcon = level === 0 && Boolean(group.icon);
+		const onRail = collapsed && !underRailIcon;
+		const open = onRail ? !railIcon : expanded;
+		const railHref = railIcon ? group.href ?? collectNavItems([group])[0]?.href : void 0;
+		const railEmpty = !railIcon && !collectNavItems([group]).some((item) => item.icon);
+		const header = /* @__PURE__ */ jsxs("button", {
+			"aria-controls": panelId,
+			"aria-expanded": open,
+			"aria-hidden": onRail && railIcon || void 0,
+			className: styles.groupHeader,
+			"data-active": active,
+			"data-icon": Boolean(group.icon),
+			"data-indent": indent,
+			"data-level": level,
+			tabIndex: onRail && railIcon ? -1 : void 0,
+			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
+					})
+				})
+			]
+		});
+		let head = header;
+		if (railIcon) head = /* @__PURE__ */ jsxs("div", {
+			className: styles.groupHead,
+			children: [header, onRail && railHref ? /* @__PURE__ */ jsx(NavLink, {
+				collapsed: true,
+				overlay: true,
+				active: activeBranch[0] === group.key,
+				context,
+				href: railHref,
+				name: group.label
+			}) : null]
+		});
+		else if (!underRailIcon) head = /* @__PURE__ */ jsx(Fold, {
+			folded: onRail,
+			children: header
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: styles.group,
+			"data-icon": Boolean(group.icon),
+			"data-level": level,
+			"data-rail-empty": railEmpty,
+			children: [head, /* @__PURE__ */ jsx("div", {
+				"aria-hidden": !open,
+				className: styles.groupPanel,
+				"data-expanded": open,
+				"data-instant": reducedMotion,
+				id: panelId,
+				inert: open ? void 0 : true,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: styles.groupItems,
+					children: [renderItems(group.items ?? [], childIndent, group.label, !(underRailIcon || railIcon)), (group.groups ?? []).map((child) => renderGroup(child, level + 1, childIndent, underRailIcon || railIcon))]
+				})
+			})]
+		}, group.key);
+	};
+	return /* @__PURE__ */ jsxs(ScrollShadow, {
+		"aria-label": label,
+		as: "nav",
+		className: styles.nav,
+		"data-collapsed": collapsed,
+		orientation: "vertical",
+		ref: navRef,
+		size: 4,
+		children: [items.length > 0 ? /* @__PURE__ */ jsx("div", {
+			className: styles.topItems,
+			"data-divided": groups.length > 0,
+			"data-rail-empty": !items.some((item) => item.icon),
+			children: renderItems(items, 0, void 0, true)
+		}) : null, groups.map((group) => renderGroup(group, 0, 0, false))]
+	});
+}
+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';\r\n\r\nimport { ChevronDown, Play } from 'lucide-react';\r\nimport { type ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react';\r\n\r\nimport Tooltip from '@/base-ui/Tooltip';\r\nimport Icon from '@/Icon';\r\nimport ScrollShadow from '@/ScrollShadow';\r\n\r\nimport { useConsoleShellState } from '../ConsoleShell/context';\r\nimport { useLocalStorage, usePrefersReducedMotion } from '../hooks';\r\nimport { collectNavItems, findActiveBranch, resolveActiveHref } from './active';\r\nimport { styles } from './style';\r\nimport type { ConsoleNavGroup, ConsoleNavItem, ConsoleNavLinkProps, ConsoleNavProps } from './type';\r\n\r\nconst PANEL_TRANSITION_MS = 160;\r\nconst RAIL_TRANSITION_MS = 200;\r\n\r\ntype ExpandedOverrides = Record<string, boolean>;\r\n\r\n/** Older builds stored the closed group keys as an array. */\r\nfunction readOverrides(value: unknown): ExpandedOverrides {\r\n  if (Array.isArray(value)) {\r\n    return Object.fromEntries(value.map((key) => [String(key), false]));\r\n  }\r\n  return value && typeof value === 'object' ? (value as ExpandedOverrides) : {};\r\n}\r\n\r\nfunction scrollActiveIntoView(container: HTMLElement, behavior: ScrollBehavior = 'auto') {\r\n  const link =\r\n    container.querySelector<HTMLElement>('[aria-current=\"page\"]') ??\r\n    [...container.querySelectorAll<HTMLElement>('button[data-active=\"true\"]')].at(-1);\r\n  if (!link) return;\r\n  const containerRect = container.getBoundingClientRect();\r\n  const linkRect = link.getBoundingClientRect();\r\n  if (linkRect.top >= containerRect.top && linkRect.bottom <= containerRect.bottom) return;\r\n  container.scrollBy({\r\n    behavior,\r\n    top: linkRect.top - containerRect.top - (containerRect.height - linkRect.height) / 2,\r\n  });\r\n}\r\n\r\ninterface LinkContext {\r\n  onNavigate?: (href: string) => void;\r\n  renderLink?: ConsoleNavProps['renderLink'];\r\n}\r\n\r\nfunction renderAnchor(context: LinkContext, linkProps: ConsoleNavLinkProps, onFollow: () => void) {\r\n  if (context.renderLink) return context.renderLink(linkProps);\r\n  return (\r\n    <a\r\n      aria-current={linkProps['aria-current']}\r\n      aria-label={linkProps['aria-label']}\r\n      className={linkProps.className}\r\n      data-active={linkProps['data-active']}\r\n      data-collapsed={linkProps['data-collapsed']}\r\n      data-indent={linkProps['data-indent']}\r\n      href={linkProps.href}\r\n      rel={linkProps.external ? 'noreferrer' : undefined}\r\n      target={linkProps.external ? '_blank' : undefined}\r\n      title={linkProps.title}\r\n      onClick={(event) => {\r\n        if (context.onNavigate && !linkProps.external) event.preventDefault();\r\n        onFollow();\r\n      }}\r\n    >\r\n      {linkProps.children}\r\n    </a>\r\n  );\r\n}\r\n\r\nfunction NavLink({\r\n  active,\r\n  collapsed,\r\n  context,\r\n  href,\r\n  icon,\r\n  indent = 0,\r\n  item,\r\n  name,\r\n  overlay = false,\r\n}: {\r\n  active: boolean;\r\n  collapsed: boolean;\r\n  context: LinkContext;\r\n  href: string;\r\n  icon?: ConsoleNavItem['icon'];\r\n  indent?: number;\r\n  item?: ConsoleNavItem;\r\n  name: string;\r\n  overlay?: boolean;\r\n}) {\r\n  const shell = useConsoleShellState();\r\n  const label = item?.label ?? name;\r\n  const follow = () => {\r\n    context.onNavigate?.(href);\r\n    shell?.closeNavigation();\r\n  };\r\n  const linkProps: ConsoleNavLinkProps = {\r\n    'aria-current': active ? 'page' : undefined,\r\n    'aria-label': collapsed ? name : undefined,\r\n    'children': overlay ? null : (\r\n      <>\r\n        {icon ? <Icon icon={icon} size={18} /> : null}\r\n        <span className={styles.itemLabel}>{label}</span>\r\n        {item?.badge ? <span className={styles.badge}>{item.badge}</span> : null}\r\n        {item?.badge ? <span aria-hidden className={styles.dot} /> : null}\r\n      </>\r\n    ),\r\n    'className': overlay ? styles.railLink : styles.item,\r\n    'data-active': active,\r\n    'data-collapsed': collapsed,\r\n    'data-indent': indent,\r\n    'external': item?.external,\r\n    href,\r\n    'onClick': follow,\r\n    'title': collapsed ? undefined : label,\r\n  };\r\n\r\n  const link = renderAnchor(context, linkProps, follow);\r\n\r\n  if (!icon && !overlay) return link;\r\n  // Always mounted so toggling the rail keeps the same link element and its label can fade.\r\n  return (\r\n    <Tooltip disabled={!collapsed} placement=\"right\" title={name}>\r\n      {link}\r\n    </Tooltip>\r\n  );\r\n}\r\n\r\nfunction Fold({ children, folded }: { children: ReactNode; folded: boolean }) {\r\n  return (\r\n    <div\r\n      aria-hidden={folded || undefined}\r\n      className={styles.fold}\r\n      data-folded={folded}\r\n      inert={folded || undefined}\r\n    >\r\n      <div>{children}</div>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction ConsoleNav({\r\n  collapsed: collapsedProp,\r\n  defaultExpanded = 'all',\r\n  groups = [],\r\n  items = [],\r\n  label = 'Primary',\r\n  onNavigate,\r\n  pathname,\r\n  renderLink,\r\n  storageKey,\r\n}: ConsoleNavProps) {\r\n  const id = useId();\r\n  const navRef = useRef<HTMLDivElement>(null);\r\n  const shell = useConsoleShellState();\r\n  const collapsed = collapsedProp ?? shell?.collapsed ?? false;\r\n  const reducedMotion = usePrefersReducedMotion();\r\n  const [storedOverrides, setStoredOverrides] = useLocalStorage<unknown>(storageKey, {});\r\n  const overrides = readOverrides(storedOverrides);\r\n  const context: LinkContext = { onNavigate, renderLink };\r\n\r\n  const activeHref = resolveActiveHref(pathname, [...items, ...collectNavItems(groups)]);\r\n  const activeBranch = findActiveBranch(pathname, groups, activeHref);\r\n\r\n  // Arriving on a page reopens its branch even if it was closed by hand earlier.\r\n  const [trackedPathname, setTrackedPathname] = useState(pathname);\r\n  if (trackedPathname !== pathname) {\r\n    setTrackedPathname(pathname);\r\n    if (activeBranch.some((key) => overrides[key] === false)) {\r\n      const next = { ...overrides };\r\n      for (const key of activeBranch) delete next[key];\r\n      setStoredOverrides(next);\r\n    }\r\n  }\r\n\r\n  const isExpanded = (group: ConsoleNavGroup) =>\r\n    overrides[group.key] ??\r\n    (activeBranch.includes(group.key) || (group.defaultExpanded ?? defaultExpanded === 'all'));\r\n\r\n  const toggleGroup = useCallback(\r\n    (key: string, expanded: boolean) => {\r\n      setStoredOverrides((current: unknown) => ({ ...readOverrides(current), [key]: !expanded }));\r\n    },\r\n    [setStoredOverrides],\r\n  );\r\n\r\n  useEffect(() => {\r\n    const container = navRef.current;\r\n    if (!container) return;\r\n    scrollActiveIntoView(container);\r\n    if (reducedMotion) return;\r\n    const timer = window.setTimeout(() => scrollActiveIntoView(container), PANEL_TRANSITION_MS);\r\n    return () => window.clearTimeout(timer);\r\n  }, [activeHref, pathname, reducedMotion]);\r\n\r\n  useEffect(() => {\r\n    const container = navRef.current;\r\n    if (!container) return;\r\n    const timer = window.setTimeout(\r\n      () => scrollActiveIntoView(container, reducedMotion ? 'auto' : 'smooth'),\r\n      reducedMotion ? 0 : RAIL_TRANSITION_MS,\r\n    );\r\n    return () => window.clearTimeout(timer);\r\n  }, [collapsed, reducedMotion]);\r\n\r\n  // The rail folds rows out of this same tree instead of rendering its own, so icons stay put\r\n  // while the sidebar width animates.\r\n  const renderItems = (\r\n    list: ConsoleNavItem[],\r\n    indent: number,\r\n    groupLabel: string | undefined,\r\n    foldable: boolean,\r\n  ) =>\r\n    list.map((item) => {\r\n      const link = (\r\n        <NavLink\r\n          active={item.href === activeHref}\r\n          collapsed={collapsed}\r\n          context={context}\r\n          href={item.href}\r\n          icon={item.icon}\r\n          indent={item.icon ? Math.max(0, indent - 1) : indent}\r\n          item={item}\r\n          key={item.href}\r\n          name={groupLabel ? `${groupLabel} / ${item.label}` : item.label}\r\n        />\r\n      );\r\n      if (item.icon || !foldable) return link;\r\n      return (\r\n        <Fold folded={collapsed} key={item.href}>\r\n          {link}\r\n        </Fold>\r\n      );\r\n    });\r\n\r\n  const renderGroup = (\r\n    group: ConsoleNavGroup,\r\n    level: number,\r\n    indent: number,\r\n    underRailIcon: boolean,\r\n  ) => {\r\n    const expanded = isExpanded(group);\r\n    const panelId = `${id}-${group.key}`;\r\n    // Nested groups are headings over their items, so the items keep the same indent.\r\n    const childIndent = indent + (group.icon ? 1 : 0);\r\n    const active = activeBranch.includes(group.key);\r\n    const railIcon = level === 0 && Boolean(group.icon);\r\n    const onRail = collapsed && !underRailIcon;\r\n    const open = onRail ? !railIcon : expanded;\r\n    const railHref = railIcon ? (group.href ?? collectNavItems([group])[0]?.href) : undefined;\r\n    const railEmpty = !railIcon && !collectNavItems([group]).some((item) => item.icon);\r\n\r\n    const header = (\r\n      <button\r\n        aria-controls={panelId}\r\n        aria-expanded={open}\r\n        aria-hidden={(onRail && railIcon) || undefined}\r\n        className={styles.groupHeader}\r\n        data-active={active}\r\n        data-icon={Boolean(group.icon)}\r\n        data-indent={indent}\r\n        data-level={level}\r\n        tabIndex={onRail && railIcon ? -1 : undefined}\r\n        type=\"button\"\r\n        onClick={() => toggleGroup(group.key, expanded)}\r\n      >\r\n        {group.icon ? <Icon icon={group.icon} size={16} /> : null}\r\n        <span className={styles.itemLabel} data-label=\"\">\r\n          {group.label}\r\n        </span>\r\n        {level === 0 ? (\r\n          <Icon className={styles.chevron} data-expanded={expanded} icon={ChevronDown} size={14} />\r\n        ) : (\r\n          <span className={styles.indicator} data-expanded={expanded}>\r\n            <Play fill={'currentColor'} size={7} strokeWidth={1} />\r\n          </span>\r\n        )}\r\n      </button>\r\n    );\r\n\r\n    let head: ReactNode = header;\r\n    if (railIcon) {\r\n      head = (\r\n        <div className={styles.groupHead}>\r\n          {header}\r\n          {onRail && railHref ? (\r\n            <NavLink\r\n              collapsed\r\n              overlay\r\n              active={activeBranch[0] === group.key}\r\n              context={context}\r\n              href={railHref}\r\n              name={group.label}\r\n            />\r\n          ) : null}\r\n        </div>\r\n      );\r\n    } else if (!underRailIcon) {\r\n      head = <Fold folded={onRail}>{header}</Fold>;\r\n    }\r\n\r\n    return (\r\n      <div\r\n        className={styles.group}\r\n        data-icon={Boolean(group.icon)}\r\n        data-level={level}\r\n        data-rail-empty={railEmpty}\r\n        key={group.key}\r\n      >\r\n        {head}\r\n        <div\r\n          aria-hidden={!open}\r\n          className={styles.groupPanel}\r\n          data-expanded={open}\r\n          data-instant={reducedMotion}\r\n          id={panelId}\r\n          inert={open ? undefined : true}\r\n        >\r\n          <div className={styles.groupItems}>\r\n            {renderItems(group.items ?? [], childIndent, group.label, !(underRailIcon || railIcon))}\r\n            {(group.groups ?? []).map((child) =>\r\n              renderGroup(child, level + 1, childIndent, underRailIcon || railIcon),\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ScrollShadow\r\n      aria-label={label}\r\n      as={'nav'}\r\n      className={styles.nav}\r\n      data-collapsed={collapsed}\r\n      orientation={'vertical'}\r\n      ref={navRef}\r\n      size={4}\r\n    >\r\n      {items.length > 0 ? (\r\n        <div\r\n          className={styles.topItems}\r\n          data-divided={groups.length > 0}\r\n          data-rail-empty={!items.some((item) => item.icon)}\r\n        >\r\n          {renderItems(items, 0, undefined, true)}\r\n        </div>\r\n      ) : null}\r\n      {groups.map((group) => renderGroup(group, 0, 0, false))}\r\n    </ScrollShadow>\r\n  );\r\n}\r\n\r\nConsoleNav.displayName = 'ConsoleNav';\r\n\r\nexport default ConsoleNav;\r\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';\r\n\r\nexport function matchesNavPath(pathname: string, item: Pick<ConsoleNavItem, 'end' | 'href'>) {\r\n  if (item.end || item.href === '/') return pathname === item.href;\r\n  return pathname === item.href || pathname.startsWith(`${item.href}/`);\r\n}\r\n\r\n/** Longest matching href wins, so `/resources/new` does not also light up `/`. */\r\nexport function resolveActiveHref(pathname: string, items: readonly ConsoleNavItem[]) {\r\n  return items\r\n    .filter((item) => matchesNavPath(pathname, item))\r\n    .sort((left, right) => right.href.length - left.href.length)[0]?.href;\r\n}\r\n\r\nexport function collectNavItems(groups: readonly ConsoleNavGroup[]): ConsoleNavItem[] {\r\n  return groups.flatMap((group) => [\r\n    ...(group.items ?? []),\r\n    ...collectNavItems(group.groups ?? []),\r\n  ]);\r\n}\r\n\r\n/**\r\n * Keys of the groups on the path to the active page, outermost first. A group\r\n * overview page (`href`) counts as being inside that group.\r\n */\r\nexport function findActiveBranch(\r\n  pathname: string,\r\n  groups: readonly ConsoleNavGroup[],\r\n  activeHref: string | undefined,\r\n): string[] {\r\n  for (const group of groups) {\r\n    if (group.href && pathname === group.href) return [group.key];\r\n    const nested = findActiveBranch(pathname, group.groups ?? [], activeHref);\r\n    if (nested.length > 0) return [group.key, ...nested];\r\n    if (activeHref && group.items?.some((item) => item.href === activeHref)) return [group.key];\r\n  }\r\n  return [];\r\n}\r\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 };