basalt-ui 1.27.0 → 1.29.0

package/dist/shell/app-breadcrumbs.js

@@ -16,30 +16,41 @@ function AppBreadcrumbs({
   parent,
   parentAnchor,
   parentHref,
-  page
+  page,
+  className,
+  style
 }) {
   if (!page) return null;
-  return /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", style: { minWidth: 0 }, children: [
-    (section !== void 0 || parent !== void 0) && /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", className: classes.crumbAncestors, style: { minWidth: 0 }, children: [
-      section && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Text, { style: crumbStyle, truncate: true, children: section }),
-        /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
-      ] }),
-      parent && parentAnchor && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Anchor, { style: crumbStyle, underline: "never", component: parentAnchor, truncate: true, children: parent }),
-        /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
-      ] }),
-      parent && !parentAnchor && parentHref && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Anchor, { style: crumbStyle, underline: "never", href: parentHref, truncate: true, children: parent }),
-        /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
-      ] }),
-      parent && !parentAnchor && !parentHref && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Text, { style: crumbStyle, truncate: true, children: parent }),
-        /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(Text, { style: currentStyle, truncate: true, children: page })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      gap: 6,
+      wrap: "nowrap",
+      ...className !== void 0 && { className },
+      style: { minWidth: 0, ...style },
+      children: [
+        (section !== void 0 || parent !== void 0) && /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", className: classes.crumbAncestors, style: { minWidth: 0 }, children: [
+          section && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { style: crumbStyle, truncate: true, children: section }),
+            /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
+          ] }),
+          parent && parentAnchor && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Anchor, { style: crumbStyle, underline: "never", component: parentAnchor, truncate: true, children: parent }),
+            /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
+          ] }),
+          parent && !parentAnchor && parentHref && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Anchor, { style: crumbStyle, underline: "never", href: parentHref, truncate: true, children: parent }),
+            /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
+          ] }),
+          parent && !parentAnchor && !parentHref && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { style: crumbStyle, truncate: true, children: parent }),
+            /* @__PURE__ */ jsx(Text, { style: separatorStyle, children: "/" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { style: currentStyle, truncate: true, children: page })
+      ]
+    }
+  );
 }
 export {
   AppBreadcrumbs

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

@@ -1,5 +1,9 @@
-/* App-shell top bar layout. ONE 48px row on every viewport —
- * [breadcrumb] ········ [page bar row 1] | [global actions].
+/* App-shell top bar layout. ONE 48px row on every viewport, spanning the FULL viewport width —
+ * [brand | collapse] [breadcrumb] ········ [page bar row 1] | [global actions].
+ *
+ * The leading zone is `app-brand.module.css`'s `.zone`: exactly `--app-shell-navbar-offset` wide,
+ * so its trailing edge lands on the sidebar|main seam and the breadcrumb after it starts on Main's
+ * own content edge. It is absent below `sm`, where there is no navbar to align with.
  *
  * The pre-1.26.0 mobile layout wrapped to a second, always-reserved row for the page actions and
  * scrolled it sideways. Both are gone (law C7 and law C14): the header height is now the
@@ -7,9 +11,10 @@
  * folds into `ActionGroup`'s kebab instead of scrolling out of view. */
 
 /*
- * Transparent header (docs/DESIGN-SPEC.md §5): NO bottom rule at all. The header and the page body
- * share the same page background, so a separator only draws a line across an already-continuous
- * surface. The AppShell's own built-in border is disabled too (`withBorder={false}` in index.tsx).
+ * Transparent header (docs/DESIGN-SPEC.md §5): background stays the page body's own. Its bottom
+ * edge is the `AppShell.Header` region seam, drawn by Mantine off `--app-shell-border-color` →
+ * `--vx-divider`, running edge to edge now that the shell uses Mantine's DEFAULT layout rather than
+ * `alt` — never a border in this module.
  */
 .bar {
   display: flex;

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

@@ -0,0 +1,118 @@
+/*
+ * The shell's in-flow column: the page-bar BAND, then `AppShell.Main` as the scrollport.
+ *
+ * Mantine's own `.m_8983817` rule offsets Main with PADDING (`padding-top: calc(header-offset +
+ * padding)`, and the same shape for the three other regions) and gives it `min-height: 100dvh`, so
+ * nothing in the shell is a scroll container and the DOCUMENT scrolls. That put the scrollbar at the
+ * far right of the viewport, outside the aside, and made every sticky offset in the package a
+ * window-scroll number. These rules restate those four offsets as MARGINS and bound Main's height to
+ * the band between the header and the footer, which makes Main the one scrolling element and parks
+ * its scrollbar on its own right edge — between the content and the aside.
+ *
+ * Main stays in NORMAL FLOW (margins + flex, never `position: fixed`): a fixed Main would create a
+ * stacking context over the whole page and take the scroll-restoration story with it.
+ *
+ * These rules win over Mantine's with no `!important` and no specificity games: the consumer imports
+ * `@mantine/core/styles.layer.css`, so every Mantine rule lives in `@layer mantine`, and an
+ * UNLAYERED rule always beats a layered one. Same mechanism `app-mobile-nav.module.css` documents
+ * for the bottom sheet's height law.
+ */
+
+/*
+ * The AppShell ROOT as a COLUMN FLEX, and it is load-bearing rather than tidying.
+ *
+ * Two jobs. First, it is what lets the band SIZE ITSELF: the band is `flex: 0 0 auto` and Main is
+ * `flex: 1 1 auto`, so Main's height is whatever the band leaves over — no measurement, no
+ * `--basalt-page-bar-h` arithmetic, and nothing to go stale for the frame between a route change
+ * and the ResizeObserver. Second, a flex container's items never margin-collapse: `.main`'s
+ * `margin-top` used to collapse THROUGH the root (which carries no border or padding in
+ * `mode="fixed"`) and push the whole shell down by a header height. MEASURED before the fix: the
+ * document's `scrollHeight` read 892 against an 844px viewport, i.e. the page scrolled by exactly
+ * the 48px the margin was supposed to consume.
+ *
+ * Header, navbar, aside and footer are `position: fixed`, so they are out of flow and are not flex
+ * items — the column really only holds the band and Main. Scoped away from `mode="static"` (a grid)
+ * so it can never fight Mantine's own display: `BasaltShell` never sets that mode, and this rule
+ * should not be the reason it cannot.
+ */
+.shell:not([data-mode='static']) {
+  display: flex;
+  flex-direction: column;
+}
+
+/*
+ * The page-bar band — `PageBar` row 2's home (`page-bar.tsx`'s `PageBarBandOutlet`), OUTSIDE the
+ * scrollport so it neither scrolls with the content nor has to stick against it.
+ *
+ * `:empty` is the whole of law C14 here: the outlet is always mounted (a portal needs a target that
+ * exists before anything portals into it), and with nothing inside it the box is zero-height, draws
+ * no seam and costs the page nothing. A route with no `PageBar` is pixel-identical to one rendered
+ * without an outlet at all.
+ */
+.band {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  min-width: 0;
+  margin-top: var(--app-shell-header-offset, 0rem);
+  margin-inline-start: var(--app-shell-navbar-offset, 0rem);
+  margin-inline-end: var(--app-shell-aside-offset, 0rem);
+  padding-inline: var(--app-shell-padding);
+  background-color: var(--vx-surface-bg);
+  /* Mantine's own AppShell timing, so the band and the regions it aligns to move as one box. */
+  transition-property: margin;
+  transition-duration: var(--app-shell-transition-duration);
+  transition-timing-function: var(--app-shell-transition-timing-function);
+}
+
+/*
+ * The ONE line under the page bar. The header's own seam belongs to `AppShell.Header` one region up
+ * and is painted by Mantine's `[data-with-border]`, so the two never double up — and because this
+ * rule is gated on the band actually holding something, a page with no bar paints no line at all.
+ */
+.band:not(:empty) {
+  border-bottom: 1px solid var(--vx-divider);
+}
+
+.main {
+  /* The remainder of the column: whatever the band left. `min-height: 0` is what lets a flex item
+   * shrink below its content and therefore scroll at all. */
+  flex: 1 1 auto;
+  min-height: 0;
+  box-sizing: border-box;
+  /*
+   * The footer's inset is subtracted SEPARATELY because `--app-shell-footer-offset` is the RAW
+   * footer height: Mantine's own `.footer` rule grows the painted box by
+   * `env(safe-area-inset-bottom)` on top of that (see `app-mobile-nav.module.css`). This is the
+   * same one-inset gap the deleted `.mainSafeArea` padding used to close — folded in here, where
+   * the box is decided, instead of as a second answer further down.
+   */
+  margin-bottom: calc(var(--app-shell-footer-offset, 0rem) + env(safe-area-inset-bottom, 0px));
+  margin-inline-start: var(--app-shell-navbar-offset, 0rem);
+  margin-inline-end: var(--app-shell-aside-offset, 0rem);
+  padding: var(--app-shell-padding);
+  /* Without this a wide flex/grid child (a bare table, a nowrap control row) sizes Main to ITSELF. */
+  min-width: 0;
+  overflow-y: auto;
+  /*
+   * `auto`, never `hidden`/`clip`. Clipping would make horizontal overflow invisible instead of
+   * absent — exactly the phone defect `no-horizontal-overflow.layout.test.ts` guards, and the guard
+   * reads `main.scrollWidth <= clientWidth`, which a clip would silently satisfy.
+   */
+  overflow-x: auto;
+  /* A page that bottoms out must not hand the scroll to the document behind it. */
+  overscroll-behavior: contain;
+  /* Mantine animates `padding` here; the offsets are margins now, so the navbar-collapse transition
+   * tracks those instead. The HEIGHT is flex's job and needs no transition of its own. */
+  transition-property: margin;
+}
+
+/* Installed PWA (C5 consolidation, seeded from argo's `styles/native.css`): clear the landscape
+ * notch on the side Main touches. `max()` is a FLOOR over `.main`'s own `padding` shorthand above
+ * — same mechanism as `app-sidebar.module.css`'s left counterpart. The bottom inset already rides
+ * `margin-bottom` above (`env(safe-area-inset-bottom)`); the PWA's top inset needs no rule here
+ * (the status bar uses the opaque `default` style, per argo's own seed comment). */
+@media (display-mode: standalone) {
+  .main {
+    padding-right: max(var(--app-shell-padding), env(safe-area-inset-right));
+  }
+}

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

@@ -0,0 +1,11 @@
+/**
+ * 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. HAND-MAINTAINED:
+ * there is no generator, so a new class in `app-main.module.css` must be added here too.
+ */
+declare const classes: {
+  readonly shell: string
+  readonly band: string
+  readonly main: string
+}
+export default classes

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

@@ -1,8 +1,9 @@
 import type { ReactElement } from 'react';
-import type { MobileNavConfig, MobileNavModel, SidebarBlock } from '../nav/types.js';
+import type { BasaltProps } from '../common/props.js';
+import type { MobileNavConfig, MobileNavModel, SidebarBlock } from './nav-types.js';
 import type { BasaltAccountProps } from './account-types.js';
 import type { SettingsMenuItem } from './index.js';
-export type MobileNavProps = {
+export type MobileNavProps = BasaltProps & {
     /** The projection from `projectMobileNav` — `BasaltShell` builds it, memoized. */
     model: MobileNavModel;
     config?: MobileNavConfig | undefined;
@@ -28,5 +29,5 @@ export type MobileNavProps = {
  * rows — still conjured a More slot that opened empty.
  */
 export declare function accountRowCount(account: BasaltAccountProps | undefined): number;
-export declare function MobileNav({ model, config, account, settingsMenuItems, blocks, }: MobileNavProps): ReactElement;
+export declare function MobileNav({ model, config, account, settingsMenuItems, blocks, className, style, }: MobileNavProps): ReactElement;
 //# sourceMappingURL=app-mobile-nav.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"app-mobile-nav.d.ts","sourceRoot":"","sources":["../../src/shell/app-mobile-nav.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAc,YAAY,EAAa,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAEd,YAAY,EAKb,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAmB/C,MAAM,MAAM,cAAc,GAAG;IAC3B,kFAAkF;IAClF,KAAK,EAAE,cAAc,CAAA;IACrB,MAAM,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IACpC;;wEAEoE;IACpE,OAAO,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACxC,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAA;IAClD;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,GAAG,SAAS,CAAA;CACpC,CAAA;AAkFD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG,SAAS,GAAG,MAAM,CAE/E;AAsFD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,OAAO,EACP,iBAAiB,EACjB,MAAM,GACP,EAAE,cAAc,GAAG,YAAY,CAuW/B"}
+{"version":3,"file":"app-mobile-nav.d.ts","sourceRoot":"","sources":["../../src/shell/app-mobile-nav.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAc,YAAY,EAAa,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAEd,YAAY,EAKb,MAAM,aAAa,CAAA;AACpB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAmB/C,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG;IACzC,kFAAkF;IAClF,KAAK,EAAE,cAAc,CAAA;IACrB,MAAM,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IACpC;;wEAEoE;IACpE,OAAO,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACxC,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAA;IAClD;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,GAAG,SAAS,CAAA;CACpC,CAAA;AAwGD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG,SAAS,GAAG,MAAM,CAE/E;AAyFD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,OAAO,EACP,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAmY/B"}

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

@@ -2,6 +2,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Drawer, Menu, NavLink, ScrollArea, Stack, Text, UnstyledButton } from "@mantine/core";
 import { useReducedMotion } from "@mantine/hooks";
 import { Fragment as Fragment2, useState } from "react";
+import { cx } from "../common/props.js";
+import { assertRequiredProps } from "../common/validate.js";
+import { SCROLLPORT_ATTRIBUTE } from "../common/scroll-parent.js";
 import { NavCountBadge } from "./nav-count-badge.js";
 import { SidebarBlockToneDot } from "./sidebar-blocks.js";
 import { sidebarBlockMobile } from "./sidebar-block-model.js";
@@ -30,6 +33,23 @@ function IconMore() {
     }
   );
 }
+function IconCheck() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 14,
+      height: 14,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5l10 -10" })
+    }
+  );
+}
 function accountRows(account) {
   if (!account || account.state.status === "loading") return [];
   const actions = account.actions;
@@ -82,7 +102,8 @@ function settingsRows(items) {
     key: item.key,
     label: item.label,
     icon: item.icon,
-    onClick: item.onClick
+    onClick: item.onClick,
+    ...item.active !== void 0 && { active: item.active }
   }));
 }
 const menuRow = (item, depth) => {
@@ -125,8 +146,10 @@ const menuActionRow = (row) => /* @__PURE__ */ jsx(
   {
     className: classes.menuItem,
     leftSection: row.icon,
+    rightSection: row.active ? /* @__PURE__ */ jsx(IconCheck, {}) : void 0,
     ...row.danger ? { color: "red" } : {},
     onClick: (event) => row.onClick?.(event),
+    "aria-current": row.active ? "true" : void 0,
     children: row.label
   },
   row.key
@@ -137,15 +160,18 @@ function MobileNav({
   config,
   account,
   settingsMenuItems,
-  blocks
+  blocks,
+  className,
+  style
 }) {
+  assertRequiredProps("MobileNav", { model }, ["model"], { model: "`model.slots`" });
   const [openKey, setOpenKey] = useState(null);
   const [openBlockKey, setOpenBlockKey] = useState(null);
   const reduceMotion = useReducedMotion();
   const { step } = useBasaltSpacing();
   const close = () => setOpenKey(null);
   const scrollToTop = () => {
-    const target = config?.getScrollElement?.() ?? document.scrollingElement ?? document.documentElement;
+    const target = config?.getScrollElement?.() ?? document.querySelector(`[${SCROLLPORT_ATTRIBUTE}]`) ?? document.scrollingElement ?? document.documentElement;
     target.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" });
   };
   const extraRows = [...accountRows(account), ...settingsRows(settingsMenuItems)];
@@ -292,11 +318,13 @@ function MobileNav({
       classNames: { root: classes.row },
       label: row.label,
       leftSection: row.icon,
+      rightSection: row.active ? /* @__PURE__ */ jsx(IconCheck, {}) : void 0,
       ...row.danger ? { color: "red" } : {},
       onClick: (event) => {
         row.onClick?.(event);
         close();
-      }
+      },
+      "aria-current": row.active ? "true" : void 0
     },
     row.key
   );
@@ -358,13 +386,13 @@ function MobileNav({
           duration: reduceMotion ? 0 : 220,
           timingFunction: "cubic-bezier(0.32, 0.72, 0, 1)"
         },
-        children: /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: "62dvh", type: "scroll", children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+        children: /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: "62dvh", type: "scroll", offsetScrollbars: "present", scrollbarSize: 8, children: /* @__PURE__ */ jsxs(Stack, { gap: "var(--vx-space-sidebar-section-gap)", children: [
           slot.groups.map((group) => /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
             sheetGroupLabel(group),
-            rows(group.items, 0, sheetRow)
+            /* @__PURE__ */ jsx(Stack, { gap: 1, children: rows(group.items, 0, sheetRow) })
           ] }, group.key)),
-          slot.isMore && moreBlocks.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 2, children: moreBlocks.map(sheetBlockRow) }) : null,
-          slot.isMore && extraRows.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 2, children: extraRows.map(sheetActionRow) }) : null
+          slot.isMore && moreBlocks.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 1, children: moreBlocks.map(sheetBlockRow) }) : null,
+          slot.isMore && extraRows.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 1, children: extraRows.map(sheetActionRow) }) : null
         ] }) })
       }
     )
@@ -387,18 +415,26 @@ function MobileNav({
         duration: reduceMotion ? 0 : 220,
         timingFunction: "cubic-bezier(0.32, 0.72, 0, 1)"
       },
-      children: /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: "62dvh", type: "scroll", children: /* @__PURE__ */ jsx(Stack, { gap: 2, children: block.items.map(blockItemRow) }) })
+      children: /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: "62dvh", type: "scroll", offsetScrollbars: "present", scrollbarSize: 8, children: /* @__PURE__ */ jsx(Stack, { gap: 1, children: block.items.map(blockItemRow) }) })
     },
     `block-${block.key}`
   );
-  return /* @__PURE__ */ jsxs("nav", { className: classes.bar, "aria-label": "Primary", children: [
-    model.slots.map((slot) => {
-      if (slot.kind === "link") return linkTab(slot);
-      if (slot.kind === "menu") return menuSlot(slot);
-      return sheetSlot(slot);
-    }),
-    listBlocks.map(blockSheet)
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: cx(classes.bar, className),
+      "aria-label": "Primary",
+      ...style !== void 0 && { style },
+      children: [
+        model.slots.map((slot) => {
+          if (slot.kind === "link") return linkTab(slot);
+          if (slot.kind === "menu") return menuSlot(slot);
+          return sheetSlot(slot);
+        }),
+        listBlocks.map(blockSheet)
+      ]
+    }
+  );
 }
 function blockRowLabel(block) {
   return block.kind === "list" ? `${block.label} \xB7 ${block.count ?? block.items.length}` : `${block.label} \xB7 ${block.value} of ${block.total}`;

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

@@ -1,7 +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.
+ * full-tab fill, and a press that depresses the icon without moving the hit box. The top edge is
+ * the shell's `AppShell.Footer` region seam (docs/DESIGN-SPEC.md §5), not this module's to draw.
  */
 .bar {
   display: flex;
@@ -9,23 +10,16 @@
   width: 100%;
   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)
-    );
-  }
-}
+/* The `.mainSafeArea` padding-bottom that used to live here is GONE, not moved wholesale: Mantine
+ * sets --app-shell-footer-OFFSET to the raw height WITHOUT the inset, and `app-main.module.css`
+ * now subtracts the offset AND the inset from Main's height, so the one real safe-area gap is
+ * closed where the scrollport's box is decided. A padding here would double-count it. */
 
 .tab {
   flex: 1 1 0;
@@ -120,9 +114,9 @@
   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. */
+/* The theme's `Menu.extend` already pins `styles.item` to the row-inset tokens INLINE (the same
+ * vocabulary the sheet's `.row` now reads too) but sets no `min-height` — that's the one thing
+ * this override still supplies, over the theme's own unset default. */
 .menuItem {
   min-height: var(--vx-space-mobile-nav-row-height) !important;
   align-items: center;
@@ -201,6 +195,22 @@
   max-height: min(70dvh, 100%);
 }
 
+/*
+ * M5 — symmetric row insets. Mantine's Drawer `padding="md"` (18px) is symmetric by construction,
+ * but `offsetScrollbars="present"` (the M4 scrollbar-gutter fix) reserves its gutter INSIDE the
+ * body on top of that padding, on the scrollbar side only — measured 18px left / 30px right before
+ * this rule (18 body padding + the then-12px default gutter). Trimming the body's own right inset
+ * by exactly `scrollbarSize` (8px, set alongside `offsetScrollbars` in the JSX) leaves the reserved
+ * gutter to fill the gap it opened instead of stacking on top of it: 10 body + 8 gutter = 18,
+ * matching the untouched left side. The thumb still lives entirely inside that 8px zone, past the
+ * row's own right edge — it never overlaps a row, which is the invariant `offsetScrollbars` exists
+ * to hold; only its OWN width moved, not whether it reserves one. No `!important`: this module is
+ * unlayered and already wins over Mantine's `@layer mantine` body rule (see `.sheet` above).
+ */
+.sheet :global(.mantine-Drawer-body) {
+  padding-inline-end: calc(var(--mantine-spacing-md) - 8px);
+}
+
 /* Sheet title = a micro-label (docs/DESIGN-SPEC.md §3), matching the sidebar's `.sectionLabel`. */
 .sheetTitle {
   font-family: var(--basalt-font-mono);
@@ -214,7 +224,7 @@
 /*
  * Mantine's `ModalBase` header forces a `min-height` of `calc(3.75rem * var(--mantine-scale))`
  * (60px) — sized for a real dialog title, not a 10px micro-label, and a big share of "unnecessarily
- * big". `--vx-space-mobile-nav-row-height` pins it to the same 44px touch-target floor as every
+ * big". `--vx-space-mobile-nav-row-height` pins it to the same touch-target floor as every
  * other row in this bar instead. The header's close button IS the dismiss affordance now — no
  * separate grabber: there was never swipe-to-dismiss behind it (Mantine ships no drag primitive),
  * so a plain decorative bar bought nothing an explicit, focusable close control doesn't already
@@ -225,16 +235,22 @@
   padding: 0 var(--mantine-spacing-md);
 }
 
-/* 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. */
+/*
+ * Large tap rows inside the sheet — ONE row vocabulary with the desktop sidebar's `.link`
+ * (docs/DESIGN-SPEC.md §5): the theme's `NavLink.extend` already forces `--vx-space-row-inset-y`/
+ * `-x` padding, `VX.text.md` font-size and `--vx-space-row-line-height` line-height INLINE on every
+ * NavLink root AND its label (`theme/index.ts`'s `styles.root`/`styles.label`), so this rule no
+ * longer fights that — it used to force the dense desktop row's padding back OPEN with
+ * `!important`, which is exactly how a "44px touch row" and a "29px sidebar row" ended up as two
+ * unrelated geometries for the same list. What is left here is only what the theme does not supply:
+ * the touch-target `min-height` floor (`--vx-space-mobile-nav-row-height`, 40px — WCAG 2.5.5 AA).
+ */
 .row {
   display: flex;
   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;
@@ -279,14 +295,19 @@
   color: var(--mantine-color-text) !important;
 }
 
+/*
+ * Nested (child) rows — same idiom as the sidebar's `.childList` (docs/DESIGN-SPEC.md §5, "Child
+ * items"): a 1px `--vx-divider` left guide plus the sidebar's own child indent, reusing the exact
+ * tokens rather than inventing a mobile-only indent. The sidebar draws the guide on a wrapper
+ * around the whole child group; a flat sheet has no such wrapper, so the guide is drawn per row
+ * instead and `width` is pulled in by the same amount the row is pushed out, so it still ends flush
+ * with its parent's right edge.
+ */
 .rowNested {
-  padding-inline-start: calc(var(--mantine-spacing-md) + 12px) !important;
-}
-
-/* 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;
+  width: calc(100% - var(--vx-space-sidebar-child-list-indent));
+  margin-inline-start: var(--vx-space-sidebar-child-list-indent);
+  border-left: 1px solid var(--vx-divider);
+  padding-inline-start: var(--vx-space-sidebar-child-row-indent) !important;
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -5,7 +5,6 @@
  */
 declare const classes: {
   readonly bar: string
-  readonly mainSafeArea: string
   readonly tab: string
   readonly tabIcon: string
   readonly tabDot: string

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

@@ -1,3 +1,4 @@
+import type { BasaltProps } from '../common/props.js';
 import type { BasaltAccountProps } from './account-types.js';
-export declare function SidebarAccount({ state, actions, showEmail }: BasaltAccountProps): import("react").JSX.Element;
+export declare function SidebarAccount(props: BasaltAccountProps & BasaltProps): import("react").JSX.Element;
 //# sourceMappingURL=app-sidebar-account.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar-account.d.ts","sourceRoot":"","sources":["../../src/shell/app-sidebar-account.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAqDzD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,kBAAkB,+BA2E/E"}
+{"version":3,"file":"app-sidebar-account.d.ts","sourceRoot":"","sources":["../../src/shell/app-sidebar-account.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AA0DzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,kBAAkB,GAAG,WAAW,+BA0FrE"}