basalt-ui 1.17.0 → 1.19.0

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":"AAsBA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMlD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,KAAK,EAAE,eAAe,EAA0B,cAAc,EAAE,MAAM,cAAc,CAAA;AAK3F,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjE,OAAO,EACL,gBAAgB,EAChB,KAAK,uBAAuB,EAC5B,uBAAuB,EACvB,uBAAuB,EACvB,eAAe,GAChB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAElF;;;;GAIG;AACH,YAAY,EACV,SAAS,EACT,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,eAAe,EACf,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,GACjB,MAAM,cAAc,CAAA;AAErB,gEAAgE;AAChE,MAAM,MAAM,WAAW,GAAG;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,6DAA6D;AAC7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,6CAA6C;IAC7C,KAAK,EAAE,WAAW,CAAA;IAClB,mGAAmG;IACnG,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B,4EAA4E;IAC5E,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,SAAS,CAAA;IAC3B,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,kGAAkG;IAClG,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAChD,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAgDD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,UAAuC,EACvC,SAAS,EAAE,aAAa,EACxB,iBAAiB,EACjB,OAAO,EACP,MAAM,EACN,QAAQ,GACT,EAAE,gBAAgB,+BAgGlB"}

package/dist/shell/index.js

@@ -1,44 +1,28 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AppShell, Badge } from "@mantine/core";
-import { useDisclosure, useLocalStorage } from "@mantine/hooks";
+import { AppShell } from "@mantine/core";
+import { useLocalStorage } from "@mantine/hooks";
+import { useMemo } from "react";
 import { AppSidebar } from "./app-sidebar.js";
-import { MobileNav } from "./app-mobile-nav.js";
+import { MobileNav, accountRowCount } from "./app-mobile-nav.js";
+import { projectMobileNav } from "./mobile-nav-model.js";
 import { AppBreadcrumbs } from "./app-breadcrumbs.js";
 import { PageActionsOutlet, PageHeaderProvider } from "./page-header.js";
-import { VX } from "../tokens/index.js";
 import { useBasaltSpacing } from "../theme/index.js";
 import headerClasses from "./app-header.module.css";
+import mobileNavClasses from "./app-mobile-nav.module.css";
 import { AppSidebar as AppSidebar2 } from "./app-sidebar.js";
+import { NavCountBadge } from "./nav-count-badge.js";
 import { SidebarSearch } from "./sidebar-search.js";
 import { SidebarAccount } from "./app-sidebar-account.js";
+import { MobileNav as MobileNav2 } from "./app-mobile-nav.js";
 import {
-  MobileNav as MobileNav2
-} from "./app-mobile-nav.js";
+  projectMobileNav as projectMobileNav2,
+  MOBILE_MAX_TABS_DEFAULT,
+  MOBILE_MENU_MAX_DEFAULT,
+  MOBILE_MORE_KEY
+} from "./mobile-nav-model.js";
 import { AppBreadcrumbs as AppBreadcrumbs2 } from "./app-breadcrumbs.js";
 import { PageHeaderProvider as PageHeaderProvider2, PageActions, PageActionsOutlet as PageActionsOutlet2 } from "./page-header.js";
-function NavCountBadge({ count }) {
-  if (!count) return null;
-  return /* @__PURE__ */ jsx(
-    Badge,
-    {
-      size: "sm",
-      styles: {
-        root: {
-          backgroundColor: "color-mix(in srgb, var(--vx-ink) 8%, transparent)",
-          color: "var(--vx-muted)",
-          fontFamily: "var(--basalt-font-mono)",
-          fontSize: VX.text.micro,
-          fontWeight: 500,
-          height: 16,
-          padding: "0 5px",
-          marginLeft: "auto",
-          borderRadius: "var(--vx-radius-tight)"
-        }
-      },
-      children: count
-    }
-  );
-}
 function findActiveCrumb(sections) {
   for (const section of sections) {
     const found = findActiveWithParent(section.items);
@@ -46,67 +30,38 @@ function findActiveCrumb(sections) {
       return {
         section: section.label,
         parent: found.parent,
+        parentAnchor: found.parentAnchor,
         parentHref: found.parentHref,
         page: found.page
       };
   }
   return void 0;
 }
-function findActiveWithParent(items, parentLabel, parentHref) {
+function findActiveWithParent(items, parentLabel, parentAnchor, parentHref) {
   for (const item of items) {
     if (item.children) {
-      const found = findActiveWithParent(item.children, item.label, item.href);
+      const found = findActiveWithParent(item.children, item.label, item.Anchor, item.href);
       if (found) return found;
     }
-    if (item.active) return { parent: parentLabel, parentHref, page: item.label };
+    if (item.active) return { parent: parentLabel, parentAnchor, parentHref, page: item.label };
   }
   return void 0;
 }
-function toMobileSections(sections, closeMobile) {
-  return sections.filter((s) => s.mobileTab !== false).map((s) => ({
-    key: s.label,
-    label: s.label,
-    icon: s.icon,
-    active: s.items.some((i) => i.active),
-    items: flattenSidebarItems(s.items).map(
-      (i) => ({
-        key: i.key,
-        label: i.label,
-        icon: i.icon,
-        ...i.href !== void 0 && { href: i.href },
-        ...i.active !== void 0 && { active: i.active },
-        onClick: (e) => {
-          i.onClick?.(e);
-          closeMobile();
-        }
-      })
-    )
-  }));
-}
-function flattenSidebarItems(items) {
-  return items.flatMap((item) => [
-    item,
-    ...item.children ? flattenSidebarItems(item.children) : []
-  ]);
-}
 function BasaltShell({
   brand,
   sections,
-  renderNavLink,
+  mobileNav,
   globalActions,
-  sidebarFooterExtra,
   sidebarNavExtra,
   settingsMenuItems,
   storageKey = "basalt-sidebar-collapsed",
   collapsed: collapsedProp,
   onCollapsedChange,
-  renderBreadcrumbLink,
   account,
   search,
   children
 }) {
   const { step } = useBasaltSpacing();
-  const [mobileOpened, { toggle: toggleMobile, close: closeMobile }] = useDisclosure();
   const [storedCollapsed, setStoredCollapsed] = useLocalStorage({
     key: storageKey,
     defaultValue: false,
@@ -120,7 +75,11 @@ function BasaltShell({
     onCollapsedChange?.(next);
   };
   const activeCrumb = findActiveCrumb(sections);
-  const mobileSections = toMobileSections(sections, closeMobile);
+  const extraMoreRows = accountRowCount(account) + (settingsMenuItems?.length ?? 0) + (mobileNav?.moreExtra ? 1 : 0);
+  const model = useMemo(
+    () => projectMobileNav(sections, { config: mobileNav, extraMoreRows }),
+    [sections, mobileNav, extraMoreRows]
+  );
   return /* @__PURE__ */ jsx(PageHeaderProvider, { children: /* @__PURE__ */ jsxs(
     AppShell,
     {
@@ -135,13 +94,14 @@ function BasaltShell({
           sm: collapsed ? step.appShellNavbarRailWidth : step.appShellNavbarWidth
         },
         breakpoint: "sm",
-        collapsed: { mobile: !mobileOpened }
+        // No mobile sidebar drawer, ever — the bottom bar is the entire mobile nav.
+        collapsed: { mobile: true }
       },
-      footer: { height: { base: 52, sm: 0 } },
+      footer: { height: { base: step.mobileNavBarHeight, sm: 0 } },
       padding: "sm",
       children: [
         /* @__PURE__ */ jsx(AppShell.Header, { px: "md", withBorder: false, children: /* @__PURE__ */ jsxs("div", { className: headerClasses.bar, children: [
-          /* @__PURE__ */ jsx("div", { className: headerClasses.lead, children: /* @__PURE__ */ jsx(AppBreadcrumbs, { ...activeCrumb, renderBreadcrumbLink }) }),
+          /* @__PURE__ */ jsx("div", { className: headerClasses.lead, children: /* @__PURE__ */ jsx(AppBreadcrumbs, { ...activeCrumb }) }),
           /* @__PURE__ */ jsx(PageActionsOutlet, { className: headerClasses.pageActions }),
           globalActions && /* @__PURE__ */ jsx("div", { className: headerClasses.global, children: globalActions })
         ] }) }),
@@ -152,22 +112,20 @@ function BasaltShell({
             sections,
             collapsed,
             onToggleCollapse: toggleCollapse,
-            onClose: closeMobile,
-            footerExtra: sidebarFooterExtra,
             navExtra: sidebarNavExtra,
-            ...renderNavLink !== void 0 && { renderNavLink },
             ...settingsMenuItems !== void 0 && { settingsMenuItems },
             ...account !== void 0 && { account },
             ...search !== void 0 && { search }
           }
         ) }),
-        /* @__PURE__ */ jsx(AppShell.Main, { children }),
-        /* @__PURE__ */ jsx(AppShell.Footer, { hiddenFrom: "sm", p: 0, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(AppShell.Main, { className: mobileNavClasses.mainSafeArea, children }),
+        /* @__PURE__ */ jsx(AppShell.Footer, { hiddenFrom: "sm", p: 0, withBorder: false, children: /* @__PURE__ */ jsx(
           MobileNav,
           {
-            sections: mobileSections,
-            onOpenMore: toggleMobile,
-            ...renderNavLink !== void 0 && { renderNavLink }
+            model,
+            config: mobileNav,
+            ...account !== void 0 && { account },
+            ...settingsMenuItems !== void 0 && { settingsMenuItems }
           }
         ) })
       ]
@@ -178,11 +136,15 @@ export {
   AppBreadcrumbs2 as AppBreadcrumbs,
   AppSidebar2 as AppSidebar,
   BasaltShell,
+  MOBILE_MAX_TABS_DEFAULT,
+  MOBILE_MENU_MAX_DEFAULT,
+  MOBILE_MORE_KEY,
   MobileNav2 as MobileNav,
   NavCountBadge,
   PageActions,
   PageActionsOutlet2 as PageActionsOutlet,
   PageHeaderProvider2 as PageHeaderProvider,
   SidebarAccount,
-  SidebarSearch
+  SidebarSearch,
+  projectMobileNav2 as projectMobileNav
 };

package/dist/shell/mobile-nav-model.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The mobile-bar projection — `SidebarSection[]` + `MobileNavConfig` → `MobileNavModel`.
+ *
+ * PURE BY CONTRACT: no React, no Mantine, no DOM, no JSX. Everything the bottom bar decides —
+ * which destinations get a slot, which slot is a plain navigation link and which raises a surface,
+ * whether that surface is a menu or a sheet, what falls into the overflow "More" slot — is decided
+ * here and unit-testable with no renderer. `app-mobile-nav.tsx` only paints the result.
+ *
+ * The law it implements is the interaction model, not a heuristic: a slot is a DESTINATION, so a
+ * tap navigates with no overlay to dismiss. An overlay exists only where a slot genuinely holds
+ * more than one destination, and its surface is INFERRED from how many rows it holds rather than
+ * configured — six rows is the arithmetic ceiling for a menu that pops out of a 56px bar without
+ * ever rendering below the fold (6 x 44px + 8px padding = 272px against 415px of headroom on the
+ * smallest supported viewport), so past that the surface becomes a bottom sheet.
+ */
+import type { MobileNavConfig, MobileNavModel, SidebarSection } from '../nav/types.js';
+/** Hard cap on bar slots, INCLUDING More. Five 72px slots is the widest a 360px viewport holds. */
+export declare const MOBILE_MAX_TABS_DEFAULT = 5;
+/**
+ * Rows a slot may hold before it becomes a sheet instead of a menu. Arithmetic, not taste — see
+ * the module doc: six rows is the last count a bottom-anchored, non-flipping menu fits above the
+ * bar on the smallest supported viewport.
+ */
+export declare const MOBILE_MENU_MAX_DEFAULT = 6;
+/** The overflow slot's reserved key. A slot like any other — it just exists only when needed. */
+export declare const MOBILE_MORE_KEY = "__more";
+export type ProjectMobileNavOptions = {
+    config?: MobileNavConfig | undefined;
+    /**
+     * Extra rows the More surface will hold — account + settings + `moreExtra`. Drives both
+     * `needsMore` and the menu-vs-sheet threshold. The model cannot see those rows (they are
+     * Mantine-rendered chrome, not `SidebarItem`s), so the shell counts them and passes the total.
+     */
+    extraMoreRows?: number;
+};
+/**
+ * Projects `sections` onto the bar. Implements §2.3's thirteen rules in order, and is the ONLY
+ * place slot selection happens — `MobileNav` receives a finished model and paints it.
+ */
+export declare function projectMobileNav(sections: SidebarSection[], opts?: ProjectMobileNavOptions): MobileNavModel;
+//# sourceMappingURL=mobile-nav-model.d.ts.map

package/dist/shell/mobile-nav-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-nav-model.d.ts","sourceRoot":"","sources":["../../src/shell/mobile-nav-model.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAId,cAAc,EACf,MAAM,cAAc,CAAA;AAErB,mGAAmG;AACnG,eAAO,MAAM,uBAAuB,IAAI,CAAA;AAExC;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,IAAI,CAAA;AAExC,iGAAiG;AACjG,eAAO,MAAM,eAAe,WAAW,CAAA;AAEvC,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAoQD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,cAAc,EAAE,EAC1B,IAAI,CAAC,EAAE,uBAAuB,GAC7B,cAAc,CA2EhB"}

package/dist/shell/mobile-nav-model.js

@@ -0,0 +1,244 @@
+const MOBILE_MAX_TABS_DEFAULT = 5;
+const MOBILE_MENU_MAX_DEFAULT = 6;
+const MOBILE_MORE_KEY = "__more";
+const DEV = process.env["NODE_ENV"] !== "production";
+function placementOf(item, sectionHidden) {
+  if (sectionHidden) return "hidden";
+  const mobile = item.mobile;
+  if (mobile === void 0) return "more";
+  if (mobile === true) return "tab";
+  if (mobile === false) return "hidden";
+  return mobile;
+}
+function isSectionHidden(section) {
+  return section.mobile === false;
+}
+function hasActiveDestination(item) {
+  if (item.active) return true;
+  return item.children?.some(hasActiveDestination) ?? false;
+}
+function countRows(items) {
+  return items.reduce((total, item) => total + 1 + countRows(item.children ?? []), 0);
+}
+function collectKeys(items, out) {
+  for (const item of items) {
+    out.add(item.key);
+    collectKeys(item.children ?? [], out);
+  }
+}
+function flattenItems(items, out) {
+  for (const item of items) {
+    out.push(item);
+    flattenItems(item.children ?? [], out);
+  }
+}
+function pruneTree(items, keep) {
+  const out = [];
+  for (const item of items) {
+    const children = pruneTree(item.children ?? [], keep);
+    if (!keep(item)) {
+      out.push(...children);
+      continue;
+    }
+    const next = { ...item };
+    if (children.length > 0) next.children = children;
+    else delete next.children;
+    out.push(next);
+  }
+  return out;
+}
+function itemCandidate(item) {
+  return {
+    key: item.key,
+    covered: /* @__PURE__ */ new Set([item.key]),
+    toSlot: () => ({
+      kind: "link",
+      key: item.key,
+      label: item.label,
+      short: item.short ?? item.label,
+      icon: item.icon,
+      active: hasActiveDestination(item),
+      item
+    })
+  };
+}
+function sectionCandidate(section, menuMax) {
+  const mobile = section.mobile === false || section.mobile === void 0 ? void 0 : section.mobile;
+  const items = pruneTree(section.items, (item) => placementOf(item, false) !== "hidden");
+  const covered = /* @__PURE__ */ new Set();
+  collectKeys(items, covered);
+  const label = mobile?.label ?? section.label;
+  const rows = countRows(items);
+  const only = items[0];
+  return {
+    key: section.label,
+    covered,
+    toSlot: () => {
+      if (rows === 0) return void 0;
+      if (rows === 1 && only !== void 0 && !only.disabled) {
+        return {
+          kind: "link",
+          key: only.key,
+          label,
+          short: label,
+          // The section's own identity wins when it declares one — the consumer configured the
+          // SLOT — and falls back to the single destination's icon when it does not.
+          icon: mobile?.icon ?? section.icon ?? only.icon,
+          active: hasActiveDestination(only),
+          item: only
+        };
+      }
+      return {
+        kind: rows <= menuMax ? "menu" : "sheet",
+        key: section.label,
+        label,
+        short: label,
+        icon: mobile?.icon ?? section.icon,
+        active: items.some(hasActiveDestination),
+        // One section, so the rows need no group heading — the tab itself names them.
+        groups: [{ key: section.label, items }],
+        isMore: false
+      };
+    }
+  };
+}
+function buildCandidates(sections, config, maxTabs, menuMax) {
+  const flat = [];
+  for (const section of sections) {
+    if (isSectionHidden(section)) continue;
+    flattenItems(section.items, flat);
+  }
+  const tabbable = (item) => {
+    if (!item.disabled) return true;
+    if (DEV) {
+      console.warn(
+        `[basalt] MobileNav: "${item.key}" asks for a bar slot but is disabled \u2014 a disabled destination never becomes a tab. It still renders, disabled, in the More surface.`
+      );
+    }
+    return false;
+  };
+  if (config?.tabs !== void 0) {
+    const candidates2 = [];
+    for (const id of config.tabs) {
+      const item = flat.find((candidate) => candidate.key === id);
+      if (item !== void 0) {
+        if (tabbable(item)) candidates2.push(itemCandidate(item));
+        continue;
+      }
+      const section = sections.find((s) => s.label === id && !isSectionHidden(s));
+      if (section !== void 0) {
+        candidates2.push(sectionCandidate(section, menuMax));
+        continue;
+      }
+      if (DEV) {
+        console.warn(
+          `[basalt] MobileNav: mobileNav.tabs names "${id}", which is neither a destination key nor a visible section label \u2014 ignoring it.`
+        );
+      }
+    }
+    return candidates2;
+  }
+  const candidates = [];
+  for (const section of sections) {
+    if (isSectionHidden(section)) continue;
+    if (section.mobile !== void 0 && section.mobile !== false && section.mobile.tab === true) {
+      candidates.push(sectionCandidate(section, menuMax));
+      continue;
+    }
+    const items = [];
+    flattenItems(section.items, items);
+    for (const item of items) {
+      if (placementOf(item, false) !== "tab") continue;
+      if (tabbable(item)) candidates.push(itemCandidate(item));
+    }
+  }
+  if (candidates.length > 0) return candidates;
+  const fallback = [];
+  for (const section of sections) {
+    if (isSectionHidden(section)) continue;
+    for (const item of section.items) {
+      if (fallback.length >= maxTabs - 1) return fallback;
+      if (item.disabled) continue;
+      if (placementOf(item, false) === "hidden") continue;
+      fallback.push(itemCandidate(item));
+    }
+  }
+  return fallback;
+}
+function buildOverflow(sections, covered) {
+  const groups = [];
+  for (const section of sections) {
+    const hidden = isSectionHidden(section);
+    if (hidden) continue;
+    const items = pruneTree(
+      section.items,
+      (item) => placementOf(item, hidden) !== "hidden" && !covered.has(item.key)
+    );
+    if (items.length === 0) continue;
+    groups.push({ key: section.label, label: section.label, items });
+  }
+  return groups;
+}
+function projectMobileNav(sections, opts) {
+  const config = opts?.config;
+  const maxTabs = Math.max(1, config?.maxTabs ?? MOBILE_MAX_TABS_DEFAULT);
+  const menuMax = Math.max(1, config?.menuMax ?? MOBILE_MENU_MAX_DEFAULT);
+  const extraMoreRows = opts?.extraMoreRows ?? 0;
+  const candidates = buildCandidates(sections, config, maxTabs, menuMax);
+  const coveredByAll = /* @__PURE__ */ new Set();
+  for (const candidate of candidates) for (const key of candidate.covered) coveredByAll.add(key);
+  const overflowIfNoneDropped = buildOverflow(sections, coveredByAll);
+  const needsMore = countRows(overflowIfNoneDropped.flatMap((group) => group.items)) > 0 || extraMoreRows > 0 || candidates.length > maxTabs;
+  const limit = needsMore ? maxTabs - 1 : maxTabs;
+  const kept = candidates.slice(0, limit);
+  const dropped = candidates.slice(limit);
+  if (DEV && dropped.length > 0) {
+    console.warn(
+      `[basalt] MobileNav: ${candidates.length} slot candidates for ${limit} available slot(s) \u2014 the last ${dropped.length} moved into the More surface: ${dropped.map((candidate) => `"${candidate.key}"`).join(", ")}. Raise mobileNav.maxTabs or drop a mobile: 'tab'.`
+    );
+  }
+  const covered = /* @__PURE__ */ new Set();
+  for (const candidate of kept) for (const key of candidate.covered) covered.add(key);
+  const slots = [];
+  for (const candidate of kept) {
+    const slot = candidate.toSlot();
+    if (slot !== void 0) slots.push(slot);
+  }
+  if (!needsMore) return { slots };
+  const groups = buildOverflow(sections, covered);
+  const overflowItems = groups.flatMap((group) => group.items);
+  const rows = countRows(overflowItems) + extraMoreRows;
+  if (rows === 0) return { slots };
+  const label = config?.moreLabel ?? "More";
+  const only = overflowItems[0];
+  if (rows === 1 && extraMoreRows === 0 && only !== void 0 && !only.disabled) {
+    slots.push({
+      kind: "link",
+      key: only.key,
+      label: only.label,
+      short: only.short ?? only.label,
+      icon: only.icon,
+      active: hasActiveDestination(only),
+      item: only
+    });
+    return { slots };
+  }
+  slots.push({
+    kind: rows <= menuMax ? "menu" : "sheet",
+    key: MOBILE_MORE_KEY,
+    label,
+    short: label,
+    // No icon: the More glyph is chrome the renderer owns, and this module holds no JSX.
+    icon: void 0,
+    active: overflowItems.some(hasActiveDestination),
+    groups,
+    isMore: true
+  });
+  return { slots };
+}
+export {
+  MOBILE_MAX_TABS_DEFAULT,
+  MOBILE_MENU_MAX_DEFAULT,
+  MOBILE_MORE_KEY,
+  projectMobileNav
+};

package/dist/shell/mobile-nav-model.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=mobile-nav-model.test.d.ts.map

package/dist/shell/mobile-nav-model.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-nav-model.test.d.ts","sourceRoot":"","sources":["../../src/shell/mobile-nav-model.test.ts"],"names":[],"mappings":""}

package/dist/shell/nav-count-badge.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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;
+//# sourceMappingURL=nav-count-badge.d.ts.map

package/dist/shell/nav-count-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-count-badge.d.ts","sourceRoot":"","sources":["../../src/shell/nav-count-badge.tsx"],"names":[],"mappings":"AASA;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,sCAsBzD"}