@marktiderman/genesis-ui 2.11.0 → 2.12.0

package/dist/{chunk-UYI3GLFJ.js → chunk-SZMXNC5Q.js}

@@ -4,14 +4,16 @@ import { Collapsible, CollapsibleContent } from './chunk-B2GIBUQD.js';
 import { Badge } from './chunk-NPNADZHM.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from './chunk-QJ6P2DW6.js';
 import { Switch } from './chunk-27ELYTGE.js';
+import { Tooltip } from './chunk-G5YKBPBF.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-22XB3Q6H.js';
 import { Button } from './chunk-NWSCYLPT.js';
 import { Label } from './chunk-F47U5KNW.js';
 import { cn } from './chunk-NZ5WBA4R.js';
-import { resolveNavigation, DefaultLink, isPathActive } from './chunk-WGMEVX3Y.js';
-import { useId, useState, useEffect, useMemo, useCallback } from 'react';
-import { ListFilter, MoreHorizontal, SlidersHorizontal, Menu, ArrowLeft, X, PanelLeft, PanelLeftClose, Sun, Moon, ChevronDown } from 'lucide-react';
+import { isPathActive, resolveNavigation, DefaultLink } from './chunk-KC43CNMA.js';
+import { createContext, useId, useState, useEffect, useMemo, useCallback, useContext, useRef, useLayoutEffect, useSyncExternalStore } from 'react';
+import { ListFilter, MoreHorizontal, SlidersHorizontal, Menu, ArrowLeft, X, Sun, Moon, PanelLeft, PanelLeftClose, ChevronRight, ChevronDown } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 
 // src/option-storage.ts
 function readStoredOptions(key) {
@@ -391,6 +393,206 @@ function PageHeader({
     ] }) })
   ] });
 }
+var useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function itemIsActive(item, activePath, isActive) {
+  if (item.end) {
+    return isPathActive(item.to, activePath, { end: true });
+  }
+  if (isActive(item.to, activePath)) return true;
+  return Boolean(
+    item.children?.some((child) => itemIsActive(child, activePath, isActive))
+  );
+}
+function mostSpecificActive(items, activePath, isActive) {
+  let best;
+  for (const item of items) {
+    if (!itemIsActive(item, activePath, isActive)) continue;
+    if (!best || item.to.length > best.to.length) best = item;
+  }
+  return best;
+}
+function BadgeChip({ badge, active }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums",
+        active ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+      ),
+      children: badge
+    }
+  );
+}
+function SubNavTabs({
+  items,
+  activePath,
+  linkComponent: LinkComp,
+  isActive = isPathActive,
+  end,
+  label = "Page sections",
+  className
+}) {
+  const current = mostSpecificActive(items, activePath, isActive);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex min-w-0 items-end gap-4 border-b", className),
+      "data-testid": "app-shell-sub-nav",
+      children: [
+        /* @__PURE__ */ jsx("nav", { "aria-label": label, className: "-mb-px min-w-0 flex-1 overflow-x-auto", children: /* @__PURE__ */ jsx("ul", { className: "flex items-end gap-6", children: items.map((item) => {
+          const active = item === current;
+          const Icon = item.icon;
+          const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+            Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0", "aria-hidden": true }) : null,
+            /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: item.label }),
+            item.badge != null ? /* @__PURE__ */ jsx(BadgeChip, { badge: item.badge, active }) : null
+          ] });
+          const cls = cn(
+            "flex items-center gap-1.5 border-b-2 pb-2.5 pt-2 text-sm transition-colors motion-reduce:transition-none",
+            active ? "border-primary font-semibold text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+          );
+          return /* @__PURE__ */ jsx("li", { className: "shrink-0", children: item.disabled ? /* @__PURE__ */ jsx("span", { className: cn(cls, "opacity-40"), role: "link", "aria-disabled": "true", children: body }) : /* @__PURE__ */ jsx(
+            LinkComp,
+            {
+              href: item.to,
+              "aria-current": active ? "page" : void 0,
+              className: cn(
+                cls,
+                "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              ),
+              testID: `app-shell-sub-nav-${item.label}`,
+              children: body
+            }
+          ) }, item.to + item.label);
+        }) }) }),
+        end != null ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center pb-2", children: end }) : null
+      ]
+    }
+  );
+}
+var SubNavContext = createContext(null);
+function innermost(claims) {
+  let best;
+  for (const c of claims) if (!best || c.order > best.order) best = c;
+  return best?.id;
+}
+function useSubNavChannel() {
+  const [entries, setEntries] = useState([]);
+  const [endSlot, setEndSlot] = useState(null);
+  const [headerSlot, setHeaderSlot] = useState(null);
+  const [claims, setClaims] = useState({ header: [], end: [] });
+  const register = useCallback((id, order, value) => {
+    setEntries(
+      (prev) => prev.some((e) => e.id === id) ? prev.map((e) => e.id === id ? { ...value, id, order } : e) : [...prev, { ...value, id, order }]
+    );
+  }, []);
+  const unregister = useCallback((id) => {
+    setEntries((prev) => prev.filter((e) => e.id !== id));
+  }, []);
+  const claimSlot = useCallback((slot, id, order) => {
+    setClaims(
+      (prev) => prev[slot].some((c) => c.id === id) ? prev : { ...prev, [slot]: [...prev[slot], { id, order }] }
+    );
+  }, []);
+  const releaseSlot = useCallback((slot, id) => {
+    setClaims(
+      (prev) => prev[slot].some((c) => c.id === id) ? { ...prev, [slot]: prev[slot].filter((c) => c.id !== id) } : prev
+    );
+  }, []);
+  const headerOwner = innermost(claims.header);
+  const endOwner = innermost(claims.end);
+  const channel = useMemo(
+    () => ({
+      register,
+      unregister,
+      claimSlot,
+      releaseSlot,
+      slots: {
+        header: { el: headerSlot, owner: headerOwner },
+        end: { el: endSlot, owner: endOwner }
+      }
+    }),
+    [register, unregister, claimSlot, releaseSlot, headerSlot, headerOwner, endSlot, endOwner]
+  );
+  const byDepth = [...entries].sort((a, b) => b.order - a.order);
+  const items = byDepth.find((e) => e.items)?.items;
+  const mode = byDepth.find((e) => e.mode)?.mode;
+  return {
+    page: items || mode ? { items, mode } : void 0,
+    channel,
+    setEndSlot,
+    setHeaderSlot,
+    hasHeader: headerOwner !== void 0,
+    hasEnd: endOwner !== void 0
+  };
+}
+var nextOrder = 0;
+var iconIds = /* @__PURE__ */ new WeakMap();
+var nextIconId = 1;
+function iconKey(icon) {
+  if (!icon || typeof icon !== "object" && typeof icon !== "function") return 0;
+  let id = iconIds.get(icon);
+  if (id == null) {
+    id = nextIconId++;
+    iconIds.set(icon, id);
+  }
+  return id;
+}
+function itemsKey(items) {
+  return JSON.stringify(
+    items.map((i) => [
+      i.to,
+      i.label,
+      i.badge ?? null,
+      Boolean(i.disabled),
+      Boolean(i.end),
+      iconKey(i.icon),
+      i.children ? itemsKey(i.children) : null
+    ])
+  );
+}
+function useAppShellSubNav(items, options) {
+  const channel = useContext(SubNavContext);
+  const id = useId();
+  const [order] = useState(() => ++nextOrder);
+  const latest = useRef(items);
+  latest.current = items;
+  const key = items ? itemsKey(items) : "";
+  const mode = options?.mode;
+  const register = channel?.register;
+  const unregister = channel?.unregister;
+  useIsoLayoutEffect(() => {
+    if (!register || !unregister) return;
+    const value = latest.current ?? void 0;
+    if (value || mode) register(id, order, { items: value, mode });
+    else unregister(id);
+  }, [register, unregister, id, order, key, mode]);
+  useIsoLayoutEffect(() => {
+    if (!unregister) return;
+    return () => unregister(id);
+  }, [unregister, id]);
+}
+function useSlotPortal(slot, children) {
+  const channel = useContext(SubNavContext);
+  const id = useId();
+  const [order] = useState(() => ++nextOrder);
+  const claimSlot = channel?.claimSlot;
+  const releaseSlot = channel?.releaseSlot;
+  useIsoLayoutEffect(() => {
+    if (!claimSlot || !releaseSlot) return;
+    claimSlot(slot, id, order);
+    return () => releaseSlot(slot, id);
+  }, [claimSlot, releaseSlot, slot, id, order]);
+  const target = channel?.slots[slot];
+  if (!target?.el || target.owner !== id) return null;
+  return createPortal(children, target.el);
+}
+function AppShellSubNavEnd({ children }) {
+  return useSlotPortal("end", children);
+}
+function AppShellPageHeader({ children }) {
+  return useSlotPortal("header", children);
+}
 var OPTION_DEFAULTS2 = {
   showLogo: true,
   showAppName: true,
@@ -401,11 +603,27 @@ var OPTION_DEFAULTS2 = {
   showSecondaryNav: true,
   showMobileBottomNav: true,
   defaultCollapsed: false,
+  collapseShortcut: false,
+  collapsedRailWidth: 56,
+  subNav: "section",
   configurable: void 0,
   density: "comfortable",
   railWidth: "narrow",
   scrollRoot: "container"
 };
+var collapsedListeners = /* @__PURE__ */ new Set();
+function subscribeCollapsed(listener) {
+  collapsedListeners.add(listener);
+  if (typeof window !== "undefined") {
+    window.addEventListener("storage", listener);
+  }
+  return () => {
+    collapsedListeners.delete(listener);
+    if (typeof window !== "undefined") {
+      window.removeEventListener("storage", listener);
+    }
+  };
+}
 function readStoredCollapsed(key) {
   if (typeof window === "undefined") return void 0;
   try {
@@ -420,10 +638,39 @@ function readStoredCollapsed(key) {
 function writeStoredCollapsed(key, collapsed) {
   if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(`${key}:collapsed`, collapsed ? "1" : "0");
+    if (collapsed === void 0) localStorage.removeItem(`${key}:collapsed`);
+    else localStorage.setItem(`${key}:collapsed`, collapsed ? "1" : "0");
   } catch {
   }
+  collapsedListeners.forEach((listener) => listener());
 }
+function useStoredCollapsed(key) {
+  return useSyncExternalStore(
+    subscribeCollapsed,
+    () => key ? readStoredCollapsed(key) : void 0,
+    () => void 0
+  );
+}
+function isTypingTarget(el) {
+  if (!el || typeof el.tagName !== "string") return false;
+  const node = el;
+  const tag = node.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || node.isContentEditable === true || node.closest?.('[contenteditable=""], [contenteditable="true"]') != null;
+}
+var useIsoLayoutEffect2 = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function ownsKeys(el) {
+  const node = el;
+  return Boolean(
+    node?.closest?.(
+      '[role="listbox"], [role="combobox"], [role="menu"], [role="menubar"], [role="menuitem"], [role="option"], [role="tree"], [role="grid"]'
+    )
+  );
+}
+function dialogOpen() {
+  if (typeof document === "undefined") return false;
+  return document.querySelector('[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"], [aria-modal="true"]') != null;
+}
+var DESKTOP_QUERY = "(min-width: 768px)";
 var PARAM = /^\$(.+)$/;
 function fillParams(to, params) {
   const cut = to.search(/[?#]/);
@@ -484,15 +731,26 @@ function ThemeToggle({ testId }) {
     }
   );
 }
-function itemIsActive(item, activePath, isActive) {
-  if (item.end) {
-    return isPathActive(item.to, activePath, { end: true });
+function NavIcon({ item, className }) {
+  if (item.icon) {
+    const Icon = item.icon;
+    return /* @__PURE__ */ jsx(Icon, { className });
   }
-  if (isActive(item.to, activePath)) return true;
-  return Boolean(
-    item.children?.some((child) => itemIsActive(child, activePath, isActive))
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        className,
+        "inline-flex items-center justify-center rounded text-[11px] font-semibold uppercase leading-none"
+      ),
+      "aria-hidden": true,
+      children: item.label.trim().charAt(0)
+    }
   );
 }
+function RailTooltip({ label, children }) {
+  return /* @__PURE__ */ jsx(Tooltip, { content: label, side: "right", className: "flex w-full", children: /* @__PURE__ */ jsx("span", { className: "flex w-full", children }) });
+}
 function NavLinkRow({
   item,
   collapsed,
@@ -501,51 +759,145 @@ function NavLinkRow({
   linkComponent: LinkComp,
   activePath,
   isActive,
-  notCurrent = false
+  notCurrent = false,
+  active: activeOverride
 }) {
-  const active = itemIsActive(item, activePath, isActive);
+  const active = activeOverride ?? itemIsActive(item, activePath, isActive);
   const pad = density === "compact" ? "px-2.5 py-1.5" : "px-3 py-2";
   if (item.disabled) {
-    return /* @__PURE__ */ jsxs(
+    if (!collapsed) {
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          title: item.label,
+          className: cn(
+            "flex items-center gap-3 rounded-lg text-sm font-medium opacity-40",
+            pad
+          ),
+          "aria-disabled": true,
+          children: [
+            /* @__PURE__ */ jsx(NavIcon, { item, className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(RailTooltip, { label: item.label, children: /* @__PURE__ */ jsx(
       "span",
       {
-        title: item.label,
-        className: cn(
-          "flex items-center gap-3 rounded-lg text-sm font-medium opacity-40",
-          pad,
-          collapsed && "justify-center px-2"
-        ),
-        "aria-disabled": true,
-        children: [
-          /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0" }),
-          !collapsed ? /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label }) : null
-        ]
+        role: "link",
+        "aria-disabled": "true",
+        "aria-label": item.label,
+        className: "flex h-10 w-full items-center justify-center rounded-lg text-sm font-medium opacity-40",
+        children: /* @__PURE__ */ jsx(NavIcon, { item, className: "h-4 w-4 shrink-0" })
       }
-    );
+    ) });
   }
-  return /* @__PURE__ */ jsxs(
+  const link = /* @__PURE__ */ jsxs(
     LinkComp,
     {
       href: item.to,
       onClick: onNavClick,
-      title: collapsed ? item.label : void 0,
-      "aria-label": collapsed ? item.label : void 0,
+      "aria-label": collapsed ? item.badge != null ? `${item.label} (${item.badge})` : item.label : void 0,
       "aria-current": active && !notCurrent ? "page" : void 0,
       className: cn(
         "flex items-center gap-3 rounded-lg text-sm font-medium transition-colors",
         pad,
-        collapsed && "justify-center px-2",
+        collapsed && "relative h-10 w-full justify-center px-0 py-0 motion-reduce:transition-none",
         active ? "bg-sidebar-accent text-sidebar-primary" : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
       ),
       children: [
-        /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0" }),
+        /* @__PURE__ */ jsx(NavIcon, { item, className: "h-4 w-4 shrink-0" }),
         !collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
           item.badge != null ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "h-5 shrink-0 px-1.5 text-[10px]", children: item.badge }) : null
-        ] }) : null
+        ] }) : item.badge != null ? (
+          // The rail has no room for the count: a dot shows there is one, and
+          // the accessible name carries the number.
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-sidebar-primary",
+              "aria-hidden": true
+            }
+          )
+        ) : null
       ]
     }
   );
+  return collapsed ? /* @__PURE__ */ jsx(RailTooltip, { label: item.label, children: link }) : link;
+}
+function RailGroup({
+  item,
+  density,
+  linkComponent,
+  activePath,
+  isActive,
+  notCurrent
+}) {
+  const [open, setOpen] = useState(false);
+  const children = item.children ?? [];
+  const active = itemIsActive(item, activePath, isActive);
+  const entries = item.to ? [{ ...item, children: void 0, end: true }, ...children] : children;
+  const current = mostSpecificActive(entries, activePath, isActive);
+  useEffect(() => {
+    setOpen(false);
+  }, [activePath]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RailTooltip, { label: item.label, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": item.label,
+        disabled: item.disabled,
+        "data-testid": `nav-rail-group-${item.label}`,
+        className: cn(
+          "relative flex h-10 w-full items-center justify-center rounded-lg transition-colors motion-reduce:transition-none",
+          active ? "bg-sidebar-accent text-sidebar-primary" : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+          item.disabled && "pointer-events-none opacity-40"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(NavIcon, { item, className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: "absolute right-0.5 h-3 w-3 opacity-50",
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        side: "right",
+        align: "start",
+        sideOffset: 8,
+        className: "w-56 p-1.5 motion-reduce:animate-none",
+        "aria-label": item.label,
+        "data-testid": `nav-rail-popover-${item.label}`,
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate px-2.5 pb-1 pt-1.5 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: item.label }),
+          /* @__PURE__ */ jsx("nav", { "aria-label": item.label, className: "space-y-0.5", children: entries.map((entry) => /* @__PURE__ */ jsx(
+            NavLinkRow,
+            {
+              item: entry,
+              collapsed: false,
+              density,
+              onNavClick: () => setOpen(false),
+              linkComponent,
+              activePath,
+              isActive,
+              notCurrent,
+              active: entry === current
+            },
+            entry.to + entry.label
+          )) })
+        ]
+      }
+    )
+  ] });
 }
 function NavGroup({
   item,
@@ -581,14 +933,11 @@ function NavGroup({
     );
   }
   if (collapsed) {
-    const target = item.to ? { ...item, children: void 0 } : { ...children[0], children: void 0 };
     return /* @__PURE__ */ jsx(
-      NavLinkRow,
+      RailGroup,
       {
-        item: target,
-        collapsed: true,
+        item,
         density,
-        onNavClick,
         linkComponent,
         activePath,
         isActive,
@@ -618,7 +967,7 @@ function NavGroup({
           "aria-current": selfExact && !notCurrent ? "page" : void 0,
           className: parentClass,
           children: [
-            /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx(NavIcon, { item, className: "h-4 w-4 shrink-0" }),
             /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label })
           ]
         }
@@ -632,7 +981,7 @@ function NavGroup({
           "aria-disabled": item.disabled || void 0,
           disabled: item.disabled,
           children: [
-            /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx(NavIcon, { item, className: "h-4 w-4 shrink-0" }),
             /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label })
           ]
         }
@@ -692,12 +1041,68 @@ function SidebarNav({
   onNavClick,
   linkComponent,
   activePath,
-  isActive
+  isActive,
+  subActive = false,
+  nest = false
 }) {
   const contextualLabelId = useId();
-  const contextualActive = Boolean(
+  const contextualActive = subActive || Boolean(
     contextualNavItems?.some((item) => itemIsActive(item, activePath, isActive))
   );
+  const contextual = contextualNavItems ?? [];
+  const host = nest && contextual.length > 0 ? mostSpecificActive(navItems, activePath, isActive) : void 0;
+  const contextualCurrent = mostSpecificActive(contextual, activePath, isActive);
+  const contextualGroup = (nested) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        nested ? "ml-3 space-y-0.5 border-l border-sidebar-border pl-2" : "mt-4 space-y-1 border-t border-sidebar-border pt-4",
+        !nested && collapsed && "mt-2 pt-2"
+      ),
+      "data-testid": "app-shell-contextual-nav",
+      role: "group",
+      "aria-labelledby": !collapsed && !nested && contextualNavLabel ? contextualLabelId : void 0,
+      "aria-label": collapsed || nested ? contextualNavLabel : void 0,
+      children: [
+        !collapsed && !nested && contextualNavLabel ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: contextualLabelId,
+            className: "mb-2 truncate px-3 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/40",
+            children: contextualNavLabel
+          }
+        ) : null,
+        contextual.map(
+          (item) => item.children?.length ? /* @__PURE__ */ jsx(
+            NavGroup,
+            {
+              item,
+              collapsed,
+              density,
+              onNavClick,
+              linkComponent,
+              activePath,
+              isActive
+            },
+            item.to + item.label
+          ) : /* @__PURE__ */ jsx(
+            NavLinkRow,
+            {
+              item,
+              collapsed,
+              density,
+              onNavClick,
+              linkComponent,
+              activePath,
+              isActive,
+              active: nest ? item === contextualCurrent : void 0
+            },
+            item.to + item.label
+          )
+        )
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs(
     "nav",
     {
@@ -707,56 +1112,42 @@ function SidebarNav({
       ),
       "aria-label": "Main",
       children: [
-        navItems.map((item) => /* @__PURE__ */ jsx(
-          NavGroup,
-          {
-            item,
-            collapsed,
-            density,
-            onNavClick,
-            linkComponent,
-            activePath,
-            isActive,
-            notCurrent: contextualActive
-          },
-          item.to + item.label
-        )),
-        contextualNavItems && contextualNavItems.length > 0 ? /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "mt-4 space-y-1 border-t border-sidebar-border pt-4",
-              collapsed && "mt-2 pt-2"
-            ),
-            "data-testid": "app-shell-contextual-nav",
-            role: "group",
-            "aria-labelledby": !collapsed && contextualNavLabel ? contextualLabelId : void 0,
-            "aria-label": collapsed ? contextualNavLabel : void 0,
-            children: [
-              !collapsed && contextualNavLabel ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  id: contextualLabelId,
-                  className: "mb-2 truncate px-3 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/40",
-                  children: contextualNavLabel
-                }
-              ) : null,
-              contextualNavItems.map((item) => /* @__PURE__ */ jsx(
-                NavGroup,
-                {
-                  item,
-                  collapsed,
-                  density,
-                  onNavClick,
-                  linkComponent,
-                  activePath,
-                  isActive
-                },
-                item.to + item.label
-              ))
-            ]
+        navItems.map((item) => {
+          if (item === host && collapsed) {
+            return /* @__PURE__ */ jsx(
+              RailGroup,
+              {
+                item: { ...item, children: [...item.children ?? [], ...contextual] },
+                density,
+                linkComponent,
+                activePath,
+                isActive,
+                notCurrent: false
+              },
+              item.to + item.label
+            );
           }
-        ) : null,
+          const row = /* @__PURE__ */ jsx(
+            NavGroup,
+            {
+              item,
+              collapsed,
+              density,
+              onNavClick,
+              linkComponent,
+              activePath,
+              isActive,
+              notCurrent: contextualActive
+            },
+            item.to + item.label
+          );
+          if (item !== host) return row;
+          return /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+            row,
+            contextualGroup(true)
+          ] }, item.to + item.label);
+        }),
+        contextual.length > 0 && !host ? contextualGroup(false) : null,
         showSecondary && secondaryNavItems && secondaryNavItems.length > 0 ? /* @__PURE__ */ jsxs(
           "div",
           {
@@ -803,7 +1194,18 @@ function SidebarBrand({
         collapsed && "justify-center"
       ),
       children: [
-        showLogo ? logo ? /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden", children: logo }) : appLogo ? /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-primary-foreground", children: appLogo }) }) : null : null,
+        showLogo ? logo ? /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden", children: logo }) : appLogo || collapsed ? (
+          // Collapsed with no logo at all: the app name's first letter keeps
+          // a mark at the top of the rail.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary",
+              "aria-hidden": !appLogo || void 0,
+              children: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-primary-foreground", children: appLogo || appName.trim().charAt(0).toUpperCase() })
+            }
+          )
+        ) : null : null,
         showAppName && !collapsed ? /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-sidebar-foreground", children: appName }) : null
       ]
     }
@@ -829,6 +1231,9 @@ function AppShell({
   optionsStorageKey,
   collapsed: collapsedProp,
   onCollapsedChange,
+  defaultCollapsed: defaultCollapsedProp,
+  subNav: subNavProp,
+  subNavLabel,
   linkComponent = DefaultLink,
   activePath,
   isActive = isPathActive
@@ -841,10 +1246,25 @@ function AppShell({
     const globalItems = fillItems(navigation.items, nav.params);
     const contextualItems = atRoot ? [] : fillItems(nav.items, nav.params);
     const parent = nav.parent && nav.trail.length > 2 && !nav.parent.path.split("/").some((p) => PARAM.test(p)) ? { href: nav.parent.path, label: nav.parent.label } : void 0;
-    return { current: nav.current, globalItems, contextualItems, parent };
+    const navDefaultCollapsed = [...nav.trail].reverse().find((node) => node.defaultCollapsed !== void 0)?.defaultCollapsed;
+    const navSubNav = [...nav.trail].reverse().find((node) => node.subNav !== void 0)?.subNav;
+    const navParentPath = nav.parent ? fillParams(nav.parent.path, nav.params) : void 0;
+    const backItem = nav.parent && navParentPath ? { href: navParentPath, label: nav.parent.label } : void 0;
+    return {
+      current: nav.current,
+      globalItems,
+      contextualItems,
+      parent,
+      navDefaultCollapsed,
+      navSubNav,
+      backItem
+    };
   }, [navigation, activePath]);
   const navItems = navItemsProp ?? derived?.globalItems ?? [];
-  const contextualNavItems = derived?.contextualItems ?? [];
+  const subNavChannel = useSubNavChannel();
+  const pageSubNav = subNavChannel.page;
+  const hasPageHeader = subNavChannel.hasHeader;
+  const contextualNavItems = pageSubNav?.items ?? derived?.contextualItems ?? [];
   const parentNavigation = parentNavigationProp === void 0 ? derived?.parent : parentNavigationProp ?? void 0;
   const [userOverrides, setUserOverrides] = useState(
     {}
@@ -908,32 +1328,104 @@ function AppShell({
     },
     [lockedOptions]
   );
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(
-    () => optionsProp?.defaultCollapsed ?? OPTION_DEFAULTS2.defaultCollapsed
+  const storedCollapsed = useStoredCollapsed(optionsStorageKey);
+  const [sessionCollapsed, setSessionCollapsed] = useState(
+    void 0
   );
-  useEffect(() => {
-    if (!optionsStorageKey || collapsedProp !== void 0) return;
-    const stored = readStoredCollapsed(optionsStorageKey);
-    if (stored !== void 0) setUncontrolledCollapsed(stored);
-  }, [optionsStorageKey, collapsedProp]);
+  const userCollapsed = optionsStorageKey ? storedCollapsed : sessionCollapsed;
+  const pageDefaultCollapsed = defaultCollapsedProp ?? derived?.navDefaultCollapsed ?? optionsProp?.defaultCollapsed ?? OPTION_DEFAULTS2.defaultCollapsed;
   const isCollapseControlled = collapsedProp !== void 0;
-  const collapsed = isCollapseControlled ? collapsedProp : uncontrolledCollapsed;
-  const setCollapsed = (next) => {
-    if (!isCollapseControlled) {
-      setUncontrolledCollapsed(next);
-      if (optionsStorageKey) writeStoredCollapsed(optionsStorageKey, next);
+  const collapsed = isCollapseControlled ? collapsedProp : userCollapsed ?? pageDefaultCollapsed;
+  const setCollapsed = useCallback(
+    (next) => {
+      if (!isCollapseControlled) {
+        if (optionsStorageKey) writeStoredCollapsed(optionsStorageKey, next);
+        else setSessionCollapsed(next);
+      }
+      onCollapsedChange?.(next);
+    },
+    [isCollapseControlled, optionsStorageKey, onCollapsedChange]
+  );
+  const sidebarRef = useRef(null);
+  const pendingFocus = useRef(null);
+  const toggleCollapsed = useCallback(
+    (fromToggle) => {
+      const aside = sidebarRef.current;
+      const focused = typeof document === "undefined" ? null : document.activeElement;
+      if (fromToggle) {
+        pendingFocus.current = { toggle: true };
+      } else if (aside && focused instanceof HTMLElement && aside.contains(focused)) {
+        const href = focused.getAttribute("href");
+        pendingFocus.current = href ? { href } : { toggle: true };
+      }
+      setCollapsed(!collapsed);
+    },
+    [collapsed, setCollapsed]
+  );
+  const renderedCollapsed = useRef(collapsed);
+  if (renderedCollapsed.current !== collapsed && !pendingFocus.current) {
+    const aside = sidebarRef.current;
+    const focused = typeof document === "undefined" ? null : document.activeElement;
+    if (aside && focused instanceof HTMLElement && aside.contains(focused)) {
+      const href = focused.getAttribute("href");
+      pendingFocus.current = href ? { href } : { toggle: true };
     }
-    onCollapsedChange?.(next);
-  };
+  }
+  useIsoLayoutEffect2(() => {
+    const changed = renderedCollapsed.current !== collapsed;
+    renderedCollapsed.current = collapsed;
+    const want = pendingFocus.current;
+    pendingFocus.current = null;
+    const aside = sidebarRef.current;
+    if (!changed || !want || !aside) return;
+    const toggleEl = aside.querySelector('[data-testid="app-shell-collapse"]');
+    let target = null;
+    if ("href" in want) {
+      target = Array.from(aside.querySelectorAll("a[href]")).find(
+        (a) => a.getAttribute("href") === want.href
+      ) ?? null;
+    }
+    (target ?? toggleEl)?.focus();
+  });
+  const showCollapseCtrl = resolved.showCollapse !== false;
+  const collapseShortcut = optionsProp?.collapseShortcut ?? OPTION_DEFAULTS2.collapseShortcut;
+  useEffect(() => {
+    if (!collapseShortcut || !showCollapseCtrl) return;
+    if (typeof window === "undefined") return;
+    const onKeyDown = (e) => {
+      if (e.key !== collapseShortcut || e.repeat || e.defaultPrevented) return;
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      if (isTypingTarget(e.target)) return;
+      if (ownsKeys(e.target)) return;
+      if (dialogOpen()) return;
+      if (window.matchMedia && !window.matchMedia(DESKTOP_QUERY).matches) return;
+      e.preventDefault();
+      toggleCollapsed(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [collapseShortcut, showCollapseCtrl, toggleCollapsed]);
   const ParentLink = linkComponent;
+  const LinkComp = linkComponent;
   const density = resolved.density ?? "comfortable";
   const scrollWindow = resolved.scrollRoot === "window";
   const railExpanded = resolved.railWidth === "wide" ? "md:w-64" : "md:w-52";
-  const railClass = collapsed ? "md:w-14" : railExpanded;
+  const railCollapsed = (optionsProp?.collapsedRailWidth ?? OPTION_DEFAULTS2.collapsedRailWidth) === 64 ? "md:w-16" : "md:w-14";
+  const railClass = collapsed ? railCollapsed : railExpanded;
+  const subNavMode = pageSubNav?.mode ?? subNavProp ?? derived?.navSubNav ?? resolved.subNav ?? OPTION_DEFAULTS2.subNav;
+  const subActive = contextualNavItems.some((i) => itemIsActive(i, activePath, isActive));
+  const subNavOn = subNavMode === "tabs" || subNavMode === "sidebar";
   const leaves = (items) => items.filter((i) => !i.children || i.children.length === 0);
-  const contextualLeaves = leaves(contextualNavItems);
-  const bottomItems = (mobileNavItems ?? (contextualLeaves.length > 0 ? contextualLeaves : leaves(navItems))).filter((i) => !i.disabled);
-  const bottomNotCurrent = !mobileNavItems && contextualLeaves.length === 0 && contextualNavItems.some((i) => itemIsActive(i, activePath, isActive));
+  const contextualLeaves = subNavMode === "off" ? [] : leaves(contextualNavItems);
+  const subBottom = subNavOn && contextualLeaves.length > 0;
+  const legacyBottom = !subNavOn && !mobileNavItems && contextualLeaves.length > 0;
+  const backTarget = subBottom ? parentNavigation ?? derived?.backItem ?? (() => {
+    const hostItem = mostSpecificActive(navItems, activePath, isActive);
+    return hostItem ? { href: hostItem.to, label: hostItem.label } : void 0;
+  })() : void 0;
+  const bottomItems = (subBottom ? contextualLeaves : mobileNavItems ?? (legacyBottom ? contextualLeaves : leaves(navItems))).filter((i) => !i.disabled);
+  const bottomNotCurrent = !mobileNavItems && !subBottom && !legacyBottom && subActive;
+  const bottomCurrent = subBottom ? mostSpecificActive(bottomItems, activePath, isActive) : void 0;
   const toggles = [
     { key: "showLogo", label: "Logo", available: hasLogo },
     { key: "showAppName", label: "App name", available: true },
@@ -957,11 +1449,11 @@ function AppShell({
     }
   ].filter((t) => t.available && !lockedOptions?.includes(t.key));
   const showTheme = resolved.showThemeToggle !== false;
-  const showCollapseCtrl = resolved.showCollapse !== false;
   const showSecondary = hasSecondary && resolved.showSecondaryNav !== false;
   const showFooterSlot = hasFooter && resolved.showFooter !== false;
   const showUser = hasUser && resolved.showUserSlot !== false;
   const showMobileBottom = bottomItems.length > 0 && resolved.showMobileBottomNav !== false;
+  const showTabs = subNavMode === "tabs" && contextualNavItems.length > 0;
   const optionsControl = resolved.configurable && toggles.length > 0 ? /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button,
@@ -1010,14 +1502,17 @@ function AppShell({
           t.key
         );
       }) }),
-      optionsStorageKey && Object.keys(userOverrides).length > 0 ? /* @__PURE__ */ jsx(
+      optionsStorageKey && (Object.keys(userOverrides).length > 0 || storedCollapsed !== void 0) ? /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
           variant: "ghost",
           size: "sm",
           className: "h-8 w-full text-xs",
-          onClick: () => setUserOverrides({}),
+          onClick: () => {
+            setUserOverrides({});
+            writeStoredCollapsed(optionsStorageKey, void 0);
+          },
           "data-testid": "app-shell-options-reset",
           "aria-label": "Reset sidebar options",
           testID: "app-shell-options-reset",
@@ -1026,6 +1521,23 @@ function AppShell({
       ) : null
     ] })
   ] }) : null;
+  const collapseLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
+  const collapseToggle = showCollapseCtrl ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: "h-8 w-8",
+      onClick: () => toggleCollapsed(true),
+      title: collapseShortcut ? `${collapseLabel} (${collapseShortcut})` : collapseLabel,
+      "aria-label": collapseLabel,
+      "aria-pressed": collapsed,
+      "aria-keyshortcuts": collapseShortcut || void 0,
+      "data-testid": "app-shell-collapse",
+      testID: "app-shell-collapse",
+      children: collapsed ? /* @__PURE__ */ jsx(PanelLeft, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
+    }
+  ) : null;
   const sidebarChrome = (opts) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -1057,24 +1569,14 @@ function AppShell({
               testID: "app-shell-mobile-close",
               children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
             }
-          ) : /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
-            showCollapseCtrl ? /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-8 w-8",
-                onClick: () => setCollapsed(!collapsed),
-                title: collapsed ? "Expand sidebar" : "Collapse sidebar",
-                "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-                "aria-pressed": collapsed,
-                "data-testid": "app-shell-collapse",
-                testID: "app-shell-collapse",
-                children: collapsed ? /* @__PURE__ */ jsx(PanelLeft, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
-              }
-            ) : null,
-            !collapsed ? optionsControl : null
-          ] })
+          ) : (
+            // Expanded: collapse sits beside the logo. Collapsed: the rail's
+            // header is the logo mark alone; expand moves to the rail's foot.
+            !collapsed ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+              collapseToggle,
+              optionsControl
+            ] }) : null
+          )
         ]
       }
     ),
@@ -1083,8 +1585,10 @@ function AppShell({
       SidebarNav,
       {
         navItems,
-        contextualNavItems,
+        contextualNavItems: (opts.mobile ? subNavMode !== "off" : subNavMode === "sidebar" || subNavMode === "section") ? contextualNavItems : void 0,
+        nest: subNavMode === "sidebar" || opts.mobile && subNavOn,
         contextualNavLabel: derived?.current.label,
+        subActive,
         secondaryNavItems,
         secondaryNavLabel,
         showSecondary,
@@ -1096,7 +1600,7 @@ function AppShell({
         isActive
       }
     ),
-    (showFooterSlot || showUser || showTheme || collapsed && optionsControl) && !opts.mobile ? /* @__PURE__ */ jsxs("div", { className: "mt-auto shrink-0 space-y-2 border-t border-sidebar-border p-2", children: [
+    (showFooterSlot || showUser || showTheme || collapsed && (optionsControl || collapseToggle)) && !opts.mobile ? /* @__PURE__ */ jsxs("div", { className: "mt-auto shrink-0 space-y-2 border-t border-sidebar-border p-2", children: [
       showFooterSlot && !collapsed ? footer : null,
       showUser ? /* @__PURE__ */ jsx(
         "div",
@@ -1116,7 +1620,8 @@ function AppShell({
           ),
           children: [
             collapsed ? optionsControl : null,
-            showTheme ? /* @__PURE__ */ jsx(ThemeToggle, { testId: "app-shell-theme-toggle-desktop" }) : null
+            showTheme ? /* @__PURE__ */ jsx(ThemeToggle, { testId: "app-shell-theme-toggle-desktop" }) : null,
+            collapsed ? collapseToggle : null
           ]
         }
       )
@@ -1139,10 +1644,11 @@ function AppShell({
           "aside",
           {
             className: cn(
-              "hidden flex-col border-r border-sidebar-border bg-sidebar transition-[width] duration-200 md:flex",
+              "hidden flex-col border-r border-sidebar-border bg-sidebar transition-[width] duration-200 motion-reduce:transition-none md:flex",
               scrollWindow && "sticky top-0 h-screen",
               railClass
             ),
+            ref: sidebarRef,
             "data-collapsed": collapsed || void 0,
             "data-testid": "app-shell-sidebar",
             children: sidebarChrome({})
@@ -1241,46 +1747,103 @@ function AppShell({
                         )
                       }
                     ) : null,
+                    hasPageHeader ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: subNavChannel.setHeaderSlot,
+                        className: cn(
+                          "min-w-0 px-4 sm:px-6 lg:px-8",
+                          parentNavigation ? "pt-2 sm:pt-3 lg:pt-4" : "pt-4 sm:pt-6 lg:pt-8"
+                        ),
+                        "data-testid": "app-shell-page-header"
+                      }
+                    ) : null,
+                    showTabs ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "px-4 sm:px-6 lg:px-8",
+                          // Phones use the bottom bar, unless the app turned it off.
+                          showMobileBottom && "hidden md:block",
+                          (!parentNavigation || hasPageHeader) && "pt-2 sm:pt-3 lg:pt-4"
+                        ),
+                        children: /* @__PURE__ */ jsx(
+                          SubNavTabs,
+                          {
+                            items: contextualNavItems,
+                            activePath,
+                            isActive,
+                            linkComponent,
+                            label: subNavLabel ?? derived?.current.label ?? "Page sections",
+                            end: subNavChannel.hasEnd ? /* @__PURE__ */ jsx("div", { ref: subNavChannel.setEndSlot, className: "flex items-center" }) : void 0
+                          }
+                        )
+                      }
+                    ) : null,
                     /* @__PURE__ */ jsx(
                       "div",
                       {
                         className: cn(
                           "min-w-0 p-4 sm:p-6 lg:p-8",
-                          parentNavigation && "pt-2 sm:pt-3 lg:pt-4"
+                          (parentNavigation || hasPageHeader) && !showTabs && "pt-2 sm:pt-3 lg:pt-4"
                         ),
-                        children
+                        children: /* @__PURE__ */ jsx(SubNavContext.Provider, { value: subNavChannel.channel, children })
                       }
                     )
                   ]
                 }
               ),
-              showMobileBottom ? /* @__PURE__ */ jsx(
+              showMobileBottom ? /* @__PURE__ */ jsxs(
                 "nav",
                 {
                   className: "fixed bottom-0 left-0 right-0 z-30 flex border-t bg-background md:hidden",
                   "aria-label": "Primary",
-                  children: bottomItems.map((item) => {
-                    const LinkComp = linkComponent;
-                    const active = itemIsActive(item, activePath, isActive);
-                    return /* @__PURE__ */ jsxs(
+                  children: [
+                    backTarget ? /* @__PURE__ */ jsxs(
                       LinkComp,
                       {
-                        href: item.to,
-                        title: item.label,
-                        "aria-label": item.label,
-                        "aria-current": active && !bottomNotCurrent ? "page" : void 0,
-                        className: cn(
-                          "flex flex-1 flex-col items-center gap-1 py-2 text-xs font-medium transition-colors",
-                          active ? "text-primary" : "text-muted-foreground"
-                        ),
+                        href: backTarget.href,
+                        "aria-label": `Back to ${backTarget.label}`,
+                        className: "flex flex-1 flex-col items-center gap-1 py-2 text-xs font-medium text-muted-foreground transition-colors",
+                        testID: "app-shell-mobile-back",
                         children: [
-                          /* @__PURE__ */ jsx(item.icon, { className: "h-5 w-5" }),
-                          /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: item.label })
+                          /* @__PURE__ */ jsx(ArrowLeft, { className: "h-5 w-5", "aria-hidden": true }),
+                          /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: backTarget.label })
                         ]
-                      },
-                      item.to + item.label
-                    );
-                  })
+                      }
+                    ) : null,
+                    bottomItems.map((item) => {
+                      const active = bottomCurrent ? item === bottomCurrent : itemIsActive(item, activePath, isActive);
+                      return /* @__PURE__ */ jsxs(
+                        LinkComp,
+                        {
+                          href: item.to,
+                          title: item.label,
+                          "aria-label": subNavOn && item.badge != null ? `${item.label} (${item.badge})` : item.label,
+                          "aria-current": active && !bottomNotCurrent ? "page" : void 0,
+                          className: cn(
+                            "flex flex-1 flex-col items-center gap-1 py-2 text-xs font-medium transition-colors",
+                            active ? "text-primary" : "text-muted-foreground"
+                          ),
+                          children: [
+                            subNavOn && item.badge != null ? /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+                              /* @__PURE__ */ jsx(NavIcon, { item, className: "h-5 w-5" }),
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: "absolute -top-1.5 left-full -ml-1 inline-flex h-4 min-w-4 items-center justify-center whitespace-nowrap rounded-full bg-primary px-1 text-[10px] font-semibold leading-none text-primary-foreground ring-2 ring-background",
+                                  "aria-hidden": true,
+                                  children: item.badge
+                                }
+                              )
+                            ] }) : /* @__PURE__ */ jsx(NavIcon, { item, className: "h-5 w-5" }),
+                            /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: item.label })
+                          ]
+                        },
+                        item.to + item.label
+                      );
+                    })
+                  ]
                 }
               ) : null
             ]
@@ -1291,6 +1854,6 @@ function AppShell({
   );
 }
 
-export { AppShell, PageHeader };
-//# sourceMappingURL=chunk-UYI3GLFJ.js.map
-//# sourceMappingURL=chunk-UYI3GLFJ.js.map
+export { AppShell, AppShellPageHeader, AppShellSubNavEnd, PageHeader, SubNavTabs, useAppShellSubNav };
+//# sourceMappingURL=chunk-SZMXNC5Q.js.map
+//# sourceMappingURL=chunk-SZMXNC5Q.js.map