basalt-ui 1.18.0 → 1.19.0

package/dist/shell/app-sidebar.d.ts

@@ -1,36 +1,13 @@
 import type { ReactNode } from 'react';
-import type { BrandConfig, SettingsMenuItem, SidebarItem, SidebarSection } from './index.js';
+import type { BrandConfig, SettingsMenuItem } from './index.js';
+import type { SidebarSection } from '../nav/types.js';
 import type { BasaltAccountProps } from './account-types.js';
 import type { SidebarSearchConfig } from './sidebar-search.js';
-/**
- * Renders a single nav item. The consumer's router `Link` lives here; `active` is precomputed.
- *
- * `opts.close` (item 20) is the mobile "More" drawer's close handle — invoke-safe when absent, a
- * no-op on desktop. Call it from the rendered link's own `onClick` (e.g. before/after navigating)
- * so tapping a nav row in the mobile drawer also closes it; the built-in fallback `<a>` path does
- * this automatically.
- *
- * `opts.navLinkClassName` (item 18) is the internal `.link` CSS-module class the fallback `<a>`
- * path uses for inactive/hover treatment — present whenever `AppSidebar` renders this callback.
- * Apply it to the rendered link's `className` to match that styling exactly instead of
- * re-deriving it.
- */
-export type NavLinkRenderer = (item: SidebarItem, opts: {
-    active: boolean;
-    close?: (() => void) | undefined;
-    navLinkClassName?: string | undefined;
-}) => ReactNode;
 export type AppSidebarProps = {
     brand: BrandConfig;
     sections: SidebarSection[];
     collapsed: boolean;
     onToggleCollapse: () => void;
-    onClose: () => void;
-    /**
-     * Optional consumer link renderer (e.g. a router `<Link>`). Receives the precomputed `active`
-     * flag. When omitted, items fall back to a plain `<a href>` + `item.onClick`.
-     */
-    renderNavLink?: NavLinkRenderer;
     /**
      * Footer settings-menu entries (theme switcher, devtools, …) — supplied by the consumer.
      * The pinned footer "Settings" row renders ONLY when this is a non-empty list — apps that put
@@ -38,8 +15,6 @@ export type AppSidebarProps = {
      * `brand.version` label renders inside this menu, so it also only shows when the row does.
      */
     settingsMenuItems?: SettingsMenuItem[];
-    /** Extra content appended to the sidebar footer, beside the settings menu (mobile close, etc.). */
-    footerExtra?: ReactNode;
     /**
      * Optional account row rendered below the settings menu in the sidebar footer (see
      * `SidebarAccount` / `BasaltAccountProps`), separated by its own top hairline. Omitting it
@@ -70,5 +45,5 @@ export type AppSidebarProps = {
      */
     navExtra?: ReactNode;
 };
-export declare function AppSidebar({ brand, sections, collapsed, onToggleCollapse, onClose, renderNavLink, settingsMenuItems, footerExtra, account, search, navExtra, }: AppSidebarProps): import("react").JSX.Element;
+export declare function AppSidebar({ brand, sections, collapsed, onToggleCollapse, settingsMenuItems, account, search, navExtra, }: AppSidebarProps): import("react").JSX.Element;
 //# sourceMappingURL=app-sidebar.d.ts.map

package/dist/shell/app-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/app-sidebar.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAK3D;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,GAAG,CAC5B,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE;IACJ,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAA;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACtC,KACE,SAAS,CAAA;AAEd,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAA;IACtC,mGAAmG;IACnG,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B;;;;;;;;;;;;;;;;OAgBG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAkWD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,OAAO,EACP,MAAM,EACN,QAAQ,GACT,EAAE,eAAe,+BAyLjB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/app-sidebar.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,cAAc,CAAA;AAG/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAK3D,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAA;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B;;;;;;;;;;;;;;;;OAgBG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAqQD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,MAAM,EACN,QAAQ,GACT,EAAE,eAAe,+BAuJjB"}

package/dist/shell/app-sidebar.js

@@ -14,7 +14,8 @@ import {
   UnstyledButton
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { NavCountBadge } from "./nav-count-badge.js";
 import { SidebarAccount } from "./app-sidebar-account.js";
 import { SidebarSearch } from "./sidebar-search.js";
 import { VX } from "../tokens/index.js";
@@ -78,69 +79,34 @@ function IconGear() {
     }
   );
 }
-function IconClose() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: 18,
-      height: 18,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": true,
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M18 6l-12 12" }),
-        /* @__PURE__ */ jsx("path", { d: "M6 6l12 12" })
-      ]
-    }
-  );
-}
 const HOVER_OPEN_DELAY = 150;
 const HOVER_CLOSE_DELAY = 200;
 function hasActiveDescendant(item) {
   if (item.active) return true;
   return item.children?.some((c) => hasActiveDescendant(c)) ?? false;
 }
-function NavLinkBody({
-  item,
-  active,
-  renderNavLink,
-  close
-}) {
-  if (renderNavLink) {
-    return /* @__PURE__ */ jsx(Fragment, { children: renderNavLink(item, { active, close, navLinkClassName: classes.link }) });
+function NavLinkBody({ item, active }) {
+  const Anchor = item.Anchor;
+  const shared = {
+    classNames: { root: classes.link },
+    label: item.label,
+    leftSection: item.icon,
+    rightSection: item.badge ?? (item.count ? /* @__PURE__ */ jsx(NavCountBadge, { count: item.count }) : void 0),
+    active,
+    ...item.onClick !== void 0 && { onClick: item.onClick }
+  };
+  if (Anchor) {
+    return /* @__PURE__ */ jsx(NavLink, { component: Anchor, ...shared });
   }
-  return /* @__PURE__ */ jsx(
-    NavLink,
-    {
-      classNames: { root: classes.link },
-      component: "a",
-      label: item.label,
-      leftSection: item.icon,
-      rightSection: item.badge,
-      active,
-      ...item.href !== void 0 && { href: item.href },
-      onClick: (e) => {
-        item.onClick?.(e);
-        close?.();
-      }
-    }
-  );
+  return /* @__PURE__ */ jsx(NavLink, { component: "a", ...item.href !== void 0 && { href: item.href }, ...shared });
 }
 function SectionLabel({ children, flush }) {
   return /* @__PURE__ */ jsx(Text, { component: "div", px: flush ? 0 : "xs", mb: flush ? 0 : 4, className: classes.sectionLabel, children });
 }
-function NavItemRow({
-  item,
-  collapsed,
-  renderNavLink,
-  closeMobile
-}) {
+function NavItemRow({ item, collapsed }) {
   const [opened, { open, close }] = useDisclosure(false);
   const timer = useRef(void 0);
+  useEffect(() => () => clearTimeout(timer.current), []);
   const scheduleOpen = () => {
     clearTimeout(timer.current);
     timer.current = setTimeout(() => open(), HOVER_OPEN_DELAY);
@@ -164,28 +130,12 @@ function NavItemRow({
       ) }) }, item.key);
     }
     const active2 = Boolean(item.active);
-    return /* @__PURE__ */ jsx(Tooltip, { label: item.label, position: "right", withArrow: true, disabled: !collapsed, children: /* @__PURE__ */ jsx(Box, { className: classes.navItem, children: /* @__PURE__ */ jsx(
-      NavLinkBody,
-      {
-        item,
-        active: active2,
-        renderNavLink,
-        close: closeMobile
-      }
-    ) }) }, item.key);
+    return /* @__PURE__ */ jsx(Tooltip, { label: item.label, position: "right", withArrow: true, disabled: !collapsed, children: /* @__PURE__ */ jsx(Box, { className: classes.navItem, children: /* @__PURE__ */ jsx(NavLinkBody, { item, active: active2 }) }) }, item.key);
   }
   const active = Boolean(item.active);
   if (isExpanded) {
     return /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Tooltip, { label: item.label, position: "right", withArrow: true, disabled: !collapsed, children: /* @__PURE__ */ jsx(Box, { className: classes.navItem, children: /* @__PURE__ */ jsx(
-        NavLinkBody,
-        {
-          item,
-          active,
-          renderNavLink,
-          close: closeMobile
-        }
-      ) }) }),
+      /* @__PURE__ */ jsx(Tooltip, { label: item.label, position: "right", withArrow: true, disabled: !collapsed, children: /* @__PURE__ */ jsx(Box, { className: classes.navItem, children: /* @__PURE__ */ jsx(NavLinkBody, { item, active }) }) }),
       /* @__PURE__ */ jsx(Stack, { gap: 0, className: classes.childList, children: item.children.map((child) => {
         if (child.disabled) {
           return /* @__PURE__ */ jsx(Tooltip, { label: "Coming soon", position: "right", withArrow: true, children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
@@ -199,15 +149,7 @@ function NavItemRow({
           ) }) }, child.key);
         }
         const childActive = Boolean(child.active);
-        return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-          NavLinkBody,
-          {
-            item: child,
-            active: childActive,
-            renderNavLink,
-            close: closeMobile
-          }
-        ) }, child.key);
+        return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(NavLinkBody, { item: child, active: childActive }) }, child.key);
       }) })
     ] }, item.key);
   }
@@ -231,15 +173,7 @@ function NavItemRow({
             onMouseLeave: scheduleClose,
             onFocus: scheduleOpen,
             onBlur: scheduleClose,
-            children: /* @__PURE__ */ jsx(
-              NavLinkBody,
-              {
-                item,
-                active,
-                renderNavLink,
-                close: closeMobile
-              }
-            )
+            children: /* @__PURE__ */ jsx(NavLinkBody, { item, active })
           }
         ) }) }),
         /* @__PURE__ */ jsx(
@@ -264,41 +198,10 @@ function NavItemRow({
                 ) }) }, child.key);
               }
               const childActive = Boolean(child.active);
-              return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-                NavLinkBody,
-                {
-                  item: child,
-                  active: childActive,
-                  renderNavLink,
-                  close: closeMobile
-                }
-              ) }, child.key);
+              return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(NavLinkBody, { item: child, active: childActive }) }, child.key);
             }) })
           }
-        ),
-        isExpanded && /* @__PURE__ */ jsx(Stack, { gap: 0, className: classes.childList, children: item.children.map((child) => {
-          if (child.disabled) {
-            return /* @__PURE__ */ jsx(Tooltip, { label: "Coming soon", position: "right", withArrow: true, children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-              NavLink,
-              {
-                classNames: { root: classes.link },
-                label: child.label,
-                leftSection: child.icon,
-                "data-disabled": true
-              }
-            ) }) }, child.key);
-          }
-          const childActive = Boolean(child.active);
-          return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-            NavLinkBody,
-            {
-              item: child,
-              active: childActive,
-              renderNavLink,
-              close: closeMobile
-            }
-          ) }, child.key);
-        }) })
+        )
       ]
     },
     item.key
@@ -309,10 +212,7 @@ function AppSidebar({
   sections,
   collapsed,
   onToggleCollapse,
-  onClose,
-  renderNavLink,
   settingsMenuItems,
-  footerExtra,
   account,
   search,
   navExtra
@@ -321,59 +221,25 @@ function AppSidebar({
   const [collapsedSections, setCollapsedSections] = useState(
     () => Object.fromEntries(sections.map((s) => [s.label, Boolean(s.defaultCollapsed)]))
   );
-  const renderSectionItems = (section) => section.items.map((item) => /* @__PURE__ */ jsx(
-    NavItemRow,
-    {
-      item,
-      collapsed,
-      renderNavLink,
-      closeMobile: onClose
-    },
-    item.key
-  ));
-  const mobileControls = /* @__PURE__ */ jsxs(Group, { gap: 2, wrap: "nowrap", hiddenFrom: "sm", children: [
-    footerExtra,
-    /* @__PURE__ */ jsx(
-      ActionIcon,
-      {
-        variant: "subtle",
-        className: classes.ghostIcon,
-        onClick: onClose,
-        "aria-label": "Close navigation",
-        children: /* @__PURE__ */ jsx(IconClose, {})
-      }
-    )
-  ] });
+  const renderSectionItems = (section) => section.items.map((item) => /* @__PURE__ */ jsx(NavItemRow, { item, collapsed }, item.key));
   const hasSettingsMenu = (settingsMenuItems?.length ?? 0) > 0;
-  const settingsRow = hasSettingsMenu ? /* @__PURE__ */ jsxs(Group, { ...account ? {} : { className: classes.footer }, gap: "xs", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsxs(Menu, { position: "right-start", withArrow: true, width: step.sidebarSettingsMenuWidth, zIndex: 500, children: [
-      /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, { className: classes.footerBtn, "aria-label": "Settings", children: [
-        /* @__PURE__ */ jsx(IconGear, {}),
-        /* @__PURE__ */ jsx(Text, { className: classes.footerText, fz: VX.text.md, children: "Settings" })
-      ] }) }),
-      /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
-        settingsMenuItems?.map((entry) => /* @__PURE__ */ jsx(Menu.Item, { leftSection: entry.icon, onClick: entry.onClick, children: entry.label }, entry.key)),
-        brand.version && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Menu.Divider, {}),
-          /* @__PURE__ */ jsxs(Menu.Label, { children: [
-            brand.name,
-            " v",
-            brand.version
-          ] })
+  const settingsRow = hasSettingsMenu ? /* @__PURE__ */ jsx(Group, { ...account ? {} : { className: classes.footer }, gap: "xs", wrap: "nowrap", children: /* @__PURE__ */ jsxs(Menu, { position: "right-start", withArrow: true, width: step.sidebarSettingsMenuWidth, zIndex: 500, children: [
+    /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, { className: classes.footerBtn, "aria-label": "Settings", children: [
+      /* @__PURE__ */ jsx(IconGear, {}),
+      /* @__PURE__ */ jsx(Text, { className: classes.footerText, fz: VX.text.md, children: "Settings" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
+      settingsMenuItems?.map((entry) => /* @__PURE__ */ jsx(Menu.Item, { leftSection: entry.icon, onClick: entry.onClick, children: entry.label }, entry.key)),
+      brand.version && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Menu.Divider, {}),
+        /* @__PURE__ */ jsxs(Menu.Label, { children: [
+          brand.name,
+          " v",
+          brand.version
         ] })
       ] })
-    ] }),
-    mobileControls
-  ] }) : /* @__PURE__ */ jsx(
-    Group,
-    {
-      ...account ? {} : { className: classes.footer },
-      gap: "xs",
-      wrap: "nowrap",
-      hiddenFrom: "sm",
-      children: mobileControls
-    }
-  );
+    ] })
+  ] }) }) : null;
   return /* @__PURE__ */ jsxs(Stack, { gap: 0, h: "100%", className: classes.root, "data-collapsed": collapsed || void 0, children: [
     /* @__PURE__ */ jsxs(Group, { className: classes.brand, gap: "sm", wrap: "nowrap", children: [
       /* @__PURE__ */ jsxs(Group, { className: classes.brandLead, gap: "sm", wrap: "nowrap", children: [
@@ -395,7 +261,7 @@ function AppSidebar({
           variant: "subtle",
           size: 28,
           visibleFrom: "sm",
-          className: `${classes.collapseBtn} ${classes.ghostIcon}`,
+          className: classes.ghostIcon,
           onClick: onToggleCollapse,
           "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
           children: /* @__PURE__ */ jsx(IconCollapse, { collapsed })

package/dist/shell/app-sidebar.module.css

@@ -8,7 +8,8 @@
  *
  * The active tint and icon-accent color live in the Mantine theme
  * (`NavLink.extend` + `theme/nav-link.module.css`) so they apply to EVERY render path, including a
- * consumer's router `<Link>` via `renderNavLink` (which never sees this CSS module). This module
+ * consumer's router `<Link>` hosted through `SidebarItem.Anchor` (which never sees this CSS
+ * module). This module
  * owns the shell-local layout (docs/DESIGN-SPEC.md §5) and the INACTIVE state (muted text, faint
  * icon, ink-6% hover) — the active state is left to the theme.
  *
@@ -382,7 +383,7 @@
   }
 
   /* Collapse every nav row to its icon. Targets `.navItem` — the wrapper Box present on EVERY render
-   * path — so it covers the shell's fallback NavLink AND a consumer's `renderNavLink` (e.g. a router
+   * path — so it covers the shell's fallback NavLink AND a consumer's `SidebarItem.Anchor` (e.g. a router
    * <Link>), both of which render a Mantine NavLink inside. Keying off `.link` alone missed consumer
    * links, so their labels overflowed the 64px rail. */
   .root[data-collapsed] .navItem :global(.mantine-NavLink-root) {

package/dist/shell/app-sidebar.module.css.d.ts

@@ -2,7 +2,6 @@
  * Typed CSS-module declaration (the S4 CSS-modules path). Named string props — not an index
  * signature — so dot access (`classes.link`) stays verbatim under the package's strict flags
  * (`noUncheckedIndexedAccess`, `noPropertyAccessFromIndexSignature`, `exactOptionalPropertyTypes`).
- * `collapseBtn` is referenced by the component for parity with argo though it has no CSS rule.
  */
 declare const classes: {
   readonly root: string
@@ -15,7 +14,6 @@ declare const classes: {
   readonly navScroll: string
   readonly navViewport: string
   readonly nav: string
-  readonly collapseBtn: string
   readonly footer: string
   readonly footerBtn: string
   readonly footerText: string

package/dist/shell/index.d.ts

@@ -1,45 +1,22 @@
 import type { MouseEvent, ReactNode } from 'react';
-import type { NavLinkRenderer } from './app-sidebar.js';
-import type { BreadcrumbLinkRenderer } from './app-breadcrumbs.js';
 import type { BasaltAccountProps } from './account-types.js';
 import type { SidebarSearchConfig } from './sidebar-search.js';
-export { AppSidebar, type AppSidebarProps, type NavLinkRenderer } from './app-sidebar.js';
+import type { MobileNavConfig, SidebarSection } from '../nav/types.js';
+export { AppSidebar, type AppSidebarProps } from './app-sidebar.js';
+export { NavCountBadge } from './nav-count-badge.js';
 export { SidebarSearch, type SidebarSearchConfig } from './sidebar-search.js';
 export { SidebarAccount } from './app-sidebar-account.js';
 export type { AccountBadgeTone, BasaltIdentity, BasaltRole, BasaltPlan, AccountMenuItem, BasaltAccountState, BasaltAccountActions, BasaltAccountProps, } from './account-types.js';
-export { MobileNav, type MobileNavItem, type MobileNavSection, type MobileNavLinkRenderer, } from './app-mobile-nav.js';
-export { AppBreadcrumbs, type BreadcrumbLinkRenderer } from './app-breadcrumbs.js';
+export { MobileNav, type MobileNavProps } from './app-mobile-nav.js';
+export { projectMobileNav, type ProjectMobileNavOptions, MOBILE_MAX_TABS_DEFAULT, MOBILE_MENU_MAX_DEFAULT, MOBILE_MORE_KEY, } from './mobile-nav-model.js';
+export { AppBreadcrumbs } from './app-breadcrumbs.js';
 export { PageHeaderProvider, PageActions, PageActionsOutlet } from './page-header.js';
-/** A single sidebar destination. Grounded verbatim in argo's `SidebarItem`. */
-export type SidebarItem = {
-    key: string;
-    label: string;
-    /** Short label for the mobile bottom-nav; falls back to `label`. */
-    short?: string;
-    /** Whether this destination appears in the mobile bottom-nav. */
-    mobile?: boolean;
-    icon: ReactNode;
-    href?: string;
-    active?: boolean;
-    disabled?: boolean;
-    onClick?: (e: MouseEvent) => void;
-    badge?: ReactNode;
-    /** Nested sub-navigation items — surfaced in a hover popover and inline when active. */
-    children?: SidebarItem[];
-};
-/** A labelled group of sidebar items. Grounded verbatim in argo's `SidebarSection`. */
-export type SidebarSection = {
-    label: string;
-    items: SidebarItem[];
-    /** Group icon, used by the mobile tabs. */
-    icon?: ReactNode;
-    /** Desktop: render a clickable group header that collapses its items. */
-    collapsible?: boolean;
-    /** Initial collapsed state when `collapsible`. */
-    defaultCollapsed?: boolean;
-    /** `false` excludes the section from the primary mobile group tabs. */
-    mobileTab?: boolean;
-};
+/**
+ * The shared nav vocabulary lives in `src/nav/types.ts` so the headless router bridge can `import
+ * type` it without reaching into the Mantine layer. Re-exported here so `SidebarItem` /
+ * `SidebarSection` keep resolving straight from `basalt-ui`, exactly as before.
+ */
+export type { NavAnchor, NavAnchorProps, NavMobilePlacement, NavSectionMobile, SidebarItem, SidebarSection, MobileNavConfig, MobileNavGroup, MobileNavModel, MobileNavSlot, MobileNavSurface, } from '../nav/types.js';
 /** Brand identity shown in the sidebar header (logo + name). */
 export type BrandConfig = {
     /** Display name (e.g. "Argo"). */
@@ -61,25 +38,21 @@ export type SettingsMenuItem = {
 export type BasaltShellProps = {
     /** Brand identity for the sidebar header. */
     brand: BrandConfig;
-    /** Grouped nav sections rendered in the sidebar (and projected to the mobile bottom nav). */
+    /** Grouped nav sections — the ONE definition, rendered as the sidebar and projected to the bar. */
     sections: SidebarSection[];
     /**
-     * Optional consumer link renderer (e.g. a router `<Link>`). Receives the precomputed `active`
-     * flag. When omitted, items fall back to a plain `<a href>` + `item.onClick`. This is the router
-     * seam — no router primitive is imported by the shell.
+     * Mobile bar tuning. Every field optional — the defaults ARE the design, and a nav with nothing
+     * configured still produces a working bar (see `projectMobileNav`'s zero-config fallback).
      */
-    renderNavLink?: NavLinkRenderer;
+    mobileNav?: MobileNavConfig;
     /** Persistent, shell-owned top-bar slot (timer, refresh, notifications). */
     globalActions?: ReactNode;
-    /** Extra content appended to the sidebar footer, beside the settings menu (mobile close, etc.). */
-    sidebarFooterExtra?: ReactNode;
     /**
-     * Arbitrary content appended after `sections` inside the sidebar's nav scroll region (a tree, a
-     * filter panel, a project list, …). Hidden on the collapsed desktop rail; still present in the
-     * mobile drawer, which opens at full width — see `AppSidebarProps.navExtra`'s JSDoc for why.
-     * `AppSidebar` renders once and serves both the desktop rail and the mobile drawer (collapse
-     * styling is gated behind a `min-width: sm` media query, not a second render), so this slot
-     * reaches both.
+     * DESKTOP ONLY. Arbitrary content appended after `sections` inside the sidebar's nav scroll
+     * region (a tree, a filter panel, a project list, …), for anything a set of `SidebarItem`s can't
+     * express. Hidden on the collapsed desktop rail; the sidebar itself no longer exists below the
+     * `sm` breakpoint, so this slot has no mobile representation — put mobile-reachable extras in
+     * `mobileNav.moreExtra` instead.
      */
     sidebarNavExtra?: ReactNode;
     /** Entries appended to the sidebar settings menu. */
@@ -109,24 +82,8 @@ export type BasaltShellProps = {
      * a no-op when omitted.
      */
     onCollapsedChange?: (collapsed: boolean) => void;
-    /**
-     * Optional router link renderer for the breadcrumb parent segment. When provided, the parent
-     * breadcrumb label is rendered through this callback (e.g. a TanStack `<Link>`) instead of a
-     * plain `<a href>`, enabling client-side navigation.
-     */
-    renderBreadcrumbLink?: BreadcrumbLinkRenderer | undefined;
     /** Page content. */
     children?: ReactNode;
 };
-/**
- * Sidebar nav count badge (docs/DESIGN-SPEC.md §5): mono 10.5px, ink-8% bg, radius 5, height 16,
- * padding 0 5px, muted text; `marginLeft: auto` pins it to the row end on any render path.
- * `styles` (inline) rather than a token color prop, since none of Mantine's variant/color
- * combinations land on the ink-tint idiom. Returns `null` for a zero/empty count so the badge slot
- * stays clean ("ink earns its color", DESIGN.md).
- */
-export declare function NavCountBadge({ count }: {
-    count: number;
-}): import("react").JSX.Element | null;
-export declare function BasaltShell({ brand, sections, renderNavLink, globalActions, sidebarFooterExtra, sidebarNavExtra, settingsMenuItems, storageKey, collapsed: collapsedProp, onCollapsedChange, renderBreadcrumbLink, account, search, children, }: BasaltShellProps): import("react").JSX.Element;
+export declare function BasaltShell({ brand, sections, mobileNav, globalActions, sidebarNavExtra, settingsMenuItems, storageKey, collapsed: collapsedProp, onCollapsedChange, account, search, children, }: BasaltShellProps): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/shell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shell/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shell/index.tsx"],"names":[],"mappings":"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"}