basalt-ui 1.17.0 → 1.19.0

package/dist/shell/app-mobile-nav.module.css

@@ -1,3 +1,8 @@
+/*
+ * The mobile bottom bar. Slots are DESTINATIONS: a tap navigates, so the bar must read as a tab
+ * bar rather than as chrome — hence a pill behind the icon for the active slot instead of a
+ * full-tab fill, and a press that depresses the icon without moving the hit box.
+ */
 .bar {
   display: flex;
   align-items: stretch;
@@ -5,6 +10,21 @@
   height: 100%;
   background: var(--mantine-color-body);
   border-top: 1px solid var(--mantine-color-default-border);
+  -webkit-tap-highlight-color: transparent;
+  /* NO padding-bottom / env() here: Mantine's own AppShell `.footer` rule already does
+   * `height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom))` +
+   * `padding-bottom: env(safe-area-inset-bottom)`. Adding it here double-counts the inset. */
+}
+
+/* Mantine sets --app-shell-footer-OFFSET to the raw height WITHOUT the inset, so Main's
+ * padding-bottom is short by exactly one inset. This is the only real safe-area gap. */
+@media (max-width: 47.99375em) {
+  .mainSafeArea {
+    padding-bottom: calc(
+      var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding) +
+        env(safe-area-inset-bottom, 0px)
+    );
+  }
 }
 
 .tab {
@@ -16,18 +36,127 @@
   justify-content: center;
   gap: var(--vx-space-mobile-nav-tab-gap);
   color: var(--mantine-color-dimmed);
+  /* Kills the 300ms double-tap-zoom delay and the text-selection flash on a fast repeat tap. */
+  touch-action: manipulation;
+  user-select: none;
 }
 
-/* Active = neutral surface fill + plain text color. Never the identity blue (DESIGN.md). */
+.tabIcon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Deliberately sub-scale: the active pill hugs a 24px glyph, so it is a shape inset rather than
+   * layout spacing — the xs..xl scale has no step this tight. */
+  padding: 2px 12px; /* theme-allow */
+  border-radius: var(--vx-radius-ctrl);
+  transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* A consumer's sidebar icons are typically 18px; the bar normalizes them in CSS so the same
+ * `SidebarItem.icon` renders at slot size with zero consumer change. */
+.tabIcon > svg {
+  width: var(--vx-space-mobile-nav-icon-size);
+  height: var(--vx-space-mobile-nav-icon-size);
+}
+
+.tab:active .tabIcon {
+  transform: scale(0.9);
+}
+
+/* Active = a neutral pill behind the ICON only, plus plain text color. A full-tab fill is what
+ * makes the bar read as chrome instead of a tab bar. Never the identity blue (DESIGN.md). */
 .tab[data-active] {
   color: var(--mantine-color-text);
+}
+
+.tab[data-active] .tabIcon {
   background-color: color-mix(in srgb, var(--vx-ink) 10%, transparent);
 }
 
+.tab[data-active] .label {
+  font-weight: 600;
+}
+
+/* Unread dot. This is a BADGE, not the active state — the "never the identity blue" rule above
+ * governs the active fill and is unchanged. A count GLYPH is unreadable in a 56px slot. */
+.tabDot {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 8px;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background-color: var(--vx-accent);
+  box-shadow: 0 0 0 2px var(--mantine-color-body);
+}
+
+/* `text-overflow: clip`, never an ellipsis — a truncated word with a "…" in a 72px tab reads as
+ * broken rather than as abbreviated. `SidebarItem.short` is the fix, not the ellipsis. */
 .label {
   font-size: var(--vx-text-micro);
   line-height: 1;
   font-weight: 500;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+/* The menu pops UP out of its tab and is configured `flip: false` — flipping a bottom-anchored
+ * menu would put it under the footer. `menuMax` is what guarantees it fits (§2.2). */
+.menuDropdown {
+  padding: 4px;
+  max-height: min(60dvh, 360px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* The theme's `Menu.extend` pins `styles.item` padding + font-size to the dense DESKTOP values
+ * INLINE, so a touch-sized mobile row needs `!important` — same cascade problem, same reason, as
+ * `.row` below. */
+.menuItem {
+  min-height: var(--vx-space-mobile-nav-row-height) !important;
+  align-items: center;
+}
+
+.menuItem :global(.mantine-Menu-itemLabel) {
+  font-size: var(--mantine-font-size-md) !important;
+}
+
+/* An active destination reads the same in the More surface as it does in the sheet. */
+.menuItem[aria-current='page'] {
+  background-color: color-mix(in srgb, var(--vx-ink) 13%, transparent);
+  font-weight: 600;
+}
+
+/*
+ * A disabled destination still RENDERS in the menu (§2.3 rule 11) — it just must not be reachable.
+ * Mantine's `Menu.css` styles `[data-disabled]` with a dimmed color and nothing else, and the row
+ * is polymorphic (`component="a"`), so the native `disabled` attribute does not apply either: with
+ * no rule here the row stays fully clickable. `pointer-events: none` is the real guard; `menuRow`
+ * carries a matching handler guard for the paths pointers do not cover (keyboard, synthetic
+ * clicks, a consumer stylesheet that resets this).
+ */
+.menuItem[data-disabled] {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+/* Nesting survives to mobile — a child destination is an indented row, not a sibling of its own
+ * parent (which is what today's flattened projection makes it). */
+.menuItemNested {
+  padding-inline-start: calc(var(--mantine-spacing-md) + 12px) !important;
+}
+
+/* Overflow section heading inside the menu — inherits the theme's mono micro-label. */
+.menuLabel {
+  font-family: var(--basalt-font-mono);
+  font-size: var(--vx-text-micro);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--vx-faint);
 }
 
 /*
@@ -39,6 +168,8 @@
   box-shadow: var(--vx-shadow-card);
   border-top-left-radius: var(--mantine-radius-lg);
   border-top-right-radius: var(--mantine-radius-lg);
+  /* A Drawer is NOT an AppShell section, so Mantine adds no inset of its own here. */
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 /* Sheet title = a micro-label (docs/DESIGN-SPEC.md §3), matching the sidebar's `.sectionLabel`. */
@@ -51,7 +182,17 @@
   color: var(--vx-faint);
 }
 
-/* Large tap rows inside the group sheet. NavLink rows reuse the sidebar's neutral active fill.
+/* The dismiss affordance. There is no swipe-to-dismiss: Mantine ships no drag primitive and
+ * writing `transform` to Drawer.Content fights its own Transition on the same node. */
+.grabber {
+  width: 36px;
+  height: 4px;
+  margin: 0 auto 8px;
+  border-radius: 999px;
+  background-color: color-mix(in srgb, var(--vx-ink) 18%, transparent);
+}
+
+/* Large tap rows inside the sheet. NavLink rows reuse the sidebar's neutral active fill.
  * `padding` needs `!important`: the theme's `NavLink.extend` forces the dense desktop row padding
  * (6px 10px) INLINE on every NavLink root, which would shrink these touch targets otherwise. */
 .row {
@@ -59,13 +200,23 @@
   align-items: center;
   gap: var(--mantine-spacing-sm);
   width: 100%;
+  min-height: var(--vx-space-mobile-nav-row-height);
   padding: var(--mantine-spacing-sm) var(--mantine-spacing-md) !important;
   border-radius: var(--mantine-radius-sm);
   color: var(--mantine-color-text);
+  touch-action: manipulation;
+  user-select: none;
+}
+
+/* Hover must be gated: on touch an ungated :hover leaves the last-tapped row stuck lit. */
+@media (hover: hover) {
+  .row:hover {
+    background-color: color-mix(in srgb, var(--vx-ink) 8%, transparent);
+  }
 }
 
-.row:hover {
-  background-color: color-mix(in srgb, var(--vx-ink) 8%, transparent);
+.row:active {
+  background-color: color-mix(in srgb, var(--vx-ink) 10%, transparent);
 }
 
 /*
@@ -76,8 +227,7 @@
  * `classNames` are always injected, so the icon needs its own `!important` override here to hold
  * the mobile-only "never accent" doctrine.
  */
-.row[data-active],
-.row[data-active]:hover {
+.row[data-active] {
   --nl-color: var(--mantine-color-text);
   color: var(--mantine-color-text);
   background-color: color-mix(in srgb, var(--vx-ink) 13%, transparent);
@@ -88,13 +238,18 @@
   color: var(--mantine-color-text) !important;
 }
 
-.rowLabel {
-  font-size: var(--mantine-font-size-md);
-  line-height: 1.2;
+.rowNested {
+  padding-inline-start: calc(var(--mantine-spacing-md) + 12px) !important;
 }
 
-/* NavLink-rendered rows match `.rowLabel` — the theme pins the label at the dense desktop 13px
- * INLINE (`styles.label`), so `!important` is required to restore the mobile size. */
+/* Sheet rows read at the mobile body size — the theme pins the label at the dense desktop 13px
+ * INLINE (`styles.label`), so `!important` is required to restore it. */
 .row :global(.mantine-NavLink-label) {
   font-size: var(--mantine-font-size-md) !important;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .tabIcon {
+    transition: none;
+  }
+}

package/dist/shell/app-mobile-nav.module.css.d.ts

@@ -1,14 +1,23 @@
 /**
  * Typed CSS-module declaration (the S4 CSS-modules path). Named string props — not an index
- * signature — so dot access stays verbatim under the package's strict flags.
+ * signature — so dot access stays verbatim under the package's strict flags. HAND-MAINTAINED:
+ * there is no generator, so a new class in `app-mobile-nav.module.css` must be added here too.
  */
 declare const classes: {
   readonly bar: string
+  readonly mainSafeArea: string
   readonly tab: string
+  readonly tabIcon: string
+  readonly tabDot: string
   readonly label: string
+  readonly menuDropdown: string
+  readonly menuItem: string
+  readonly menuItemNested: string
+  readonly menuLabel: string
   readonly sheet: string
   readonly sheetTitle: string
+  readonly grabber: string
   readonly row: string
-  readonly rowLabel: string
+  readonly rowNested: string
 }
 export default classes

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

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

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

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

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