basalt-ui 1.29.2 → 1.30.0

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

@@ -9,7 +9,14 @@
   align-items: stretch;
   width: 100%;
   height: 100%;
-  background: var(--mantine-color-body);
+  /* NOT `--mantine-color-body`: that is the EXACT fill the scrollport above paints (both resolve
+   * to `--vx-surface-bg`), so the only thing separating the bar from the page was the region
+   * seam's 9%-alpha hairline — invisible on a phone, which is the "it could also have a border"
+   * report. `--vx-surface-panel` is a derived step above bg on both schemes and is the same
+   * relation `.sheet` already uses, so the edge is a real tonal one with no new token, no drop
+   * shadow (DESIGN-CORE pins depth to three tokens, none of them an upward-cast footer shadow)
+   * and no `withBorder` on the shell region (basalt-mantine.md forbids drawing that ourselves). */
+  background-color: var(--vx-surface-panel);
   -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))` +
@@ -90,7 +97,8 @@
   height: 8px;
   border-radius: 999px;
   background-color: var(--vx-accent);
-  box-shadow: 0 0 0 2px var(--mantine-color-body);
+  /* The halo punches the dot out of whatever the BAR paints, so it tracks `.bar`'s fill. */
+  box-shadow: 0 0 0 2px var(--vx-surface-panel);
 }
 
 /* `text-overflow: clip`, never an ellipsis — a truncated word with a "…" in a 72px tab reads as
@@ -106,10 +114,25 @@
 }
 
 /* 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). */
+ * menu would put it under the footer, so something has to guarantee it fits. That something is the
+ * `max-height` below, not `menuMax` (§2.2 as it used to be written). */
 .menuDropdown {
-  padding: 4px;
-  max-height: min(60dvh, 360px);
+  padding: var(--vx-space-stack-xs);
+  /* THIS is what guarantees the menu never renders below the fold — not `menuMax`, which is only
+   * the menu-vs-sheet taste threshold (`mobile-nav-model.ts`'s module doc has the accounting).
+   *
+   * `min(62dvh, 440px)`, down from `min(72dvh, 560px)`. The old pair fit — but fitting was never
+   * the whole ask: MEASURED in headless Chrome at 390x844 the dropdown rendered 300x560 at
+   * y=221..781, i.e. 66% of the screen, which reads as a panel rather than as the "subtle, small
+   * menu" the More surface is supposed to be. At 440 the same phone gets 52%.
+   *
+   * The accounting, at both ends of the supported range. 390x844: headroom above the bar is 772px,
+   * 62dvh resolves to 523px, so the 440px term binds — 57% of the headroom. 320x568: headroom is
+   * ~496px, 62dvh resolves to 352px, so THAT term binds — 71% of the headroom. Either way the
+   * binding term is one of the two written here and it lands under the headroom, which is the
+   * property that matters: the cap, not `menuMax`, is the guarantee. Past it the dropdown scrolls
+   * inside itself instead of growing, so a long More list costs scroll, never fold. */
+  max-height: min(62dvh, 440px);
   overflow-y: auto;
   overscroll-behavior: contain;
 }
@@ -135,13 +158,16 @@
 /*
  * 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).
+ * is polymorphic (`component="a"`), so the native `disabled` attribute does not apply either.
+ *
+ * `pointer-events: none` USED to be the guard here and is deliberately gone. It made the row
+ * swallow a tap with zero feedback — no `:active`, no press state, nothing — which on a phone is
+ * indistinguishable from a button that is simply broken, and "I tap and nothing happens" is
+ * literally the report this change answers. The guard is now entirely in the handlers (`menuRow`,
+ * `sheetRow`), which cover the pointer path and every path a pointer never takes; the row still
+ * depresses under a finger and still goes nowhere, which is the honest version of dead.
  */
 .menuItem[data-disabled] {
-  pointer-events: none;
   cursor: not-allowed;
 }
 
@@ -151,7 +177,10 @@
   padding-inline-start: calc(var(--mantine-spacing-md) + 12px) !important;
 }
 
-/* Overflow section heading inside the menu — inherits the theme's mono micro-label. */
+/* Overflow section heading, in the menu AND in the sheet — inherits the theme's mono micro-label.
+ * The inset matches the rows' own (`--vx-space-row-inset-x`) so the heading and the labels under
+ * it share one left edge; the vertical padding is asymmetric on purpose — a heading belongs to
+ * what follows it, so it sits closer to its own rows than to the section above. */
 .menuLabel {
   font-family: var(--basalt-font-mono);
   font-size: var(--vx-text-micro);
@@ -159,6 +188,65 @@
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--vx-faint);
+  padding: 6px var(--vx-space-row-inset-x) 2px;
+}
+
+/*
+ * The popover's SECTION RHYTHM — what replaced the single `Menu.Divider`, and it is SPACE, not a
+ * line.
+ *
+ * The Drawer's bulk was never its row height (40px is a WCAG 2.5.5 floor pinned by
+ * `theme/density-relations.test.ts`); it was the stack rhythm around the rows — a 12px section
+ * gap, 18px of Drawer padding and a header row. A popover with one hairline through the middle and
+ * no rhythm at all is the other extreme, so each group opens its own band instead.
+ *
+ * A `border-top: 1px solid var(--vx-divider)` here was the obvious move and is deliberately NOT
+ * what shipped: `theme/divider-law.test.ts` inventories every horizontal hairline in the package
+ * and classifies it as `between-rows`, `region-boundary` or (inside `content/**` only)
+ * `prose-typography` — and it says in as many words that a rule under a HEADING in the chrome lane
+ * is none of the three, and that the fix is to delete it and let the type scale and the space do
+ * the work. A mono uppercase micro-label at `--vx-faint` over its own band of air is already a
+ * section boundary; a line under it would be the second one.
+ *
+ * `:not(:first-child)` keeps the first group flush with the dropdown's own padding instead of
+ * opening a band under the top edge with nothing above it — the same "a separator separates"
+ * property the guarded `Menu.Divider` used to carry in JSX. Scoped to `.menuDropdown` because
+ * `.menuLabel` is also the SHEET's group heading (`sheetGroupLabel`), where each label is its
+ * group Stack's first child and the rhythm is the Drawer's own to draw.
+ *
+ * The band is 6/4, down from 8/8 — the second half of the same "still too big" verdict the
+ * `max-height` above answers, and the cheaper half. MEASURED per heading at 8/8: 8px margin + 8px
+ * padding-top + 2px padding-bottom + a 17px line = a 35px box, and there are FIVE of them in the
+ * shipped More surface — 175px, 28% of the whole dropdown spent on five words. 6/4 takes each
+ * banded heading to 29px and hands 24px back to the rows. It does NOT touch the row height (40px
+ * is the WCAG 2.5.5 floor named at the top of this comment) and it does not add the line the
+ * paragraph above rules out: this is the same space that argument asked to carry the boundary,
+ * spent tighter.
+ */
+.menuDropdown .menuLabel:not(:first-child) {
+  margin-top: 6px;
+  padding-top: 4px;
+}
+
+/* The same band, on the first row of the UNLABELLED tail (blocks + account + settings) — the one
+ * boundary in the More surface with no heading to open it. Margin rather than padding: a row is a
+ * touch target with a `min-height` floor and symmetric inset, so growing one side of it would make
+ * that row read as a different size from its siblings. */
+.menuDropdown .menuSectionStart {
+  margin-top: 8px;
+}
+
+/*
+ * A sticky heading over a scrolling dropdown must be OPAQUE. `theme/index.ts` documents the same
+ * fix for the Drawer's header: basalt dropped that background to `transparent`, which reads fine
+ * until rows actually scroll under it and then shows every one of them straight through the title.
+ * `--vx-surface-overlay` is the dropdown's own fill, so the heading matches the box it sits in.
+ */
+.menuDropdown .menuLabel {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--vx-surface-overlay);
 }
 
 /*

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

@@ -13,6 +13,7 @@ declare const classes: {
   readonly menuItem: string
   readonly menuItemNested: string
   readonly menuLabel: string
+  readonly menuSectionStart: string
   readonly sheet: string
   readonly sheetTitle: string
   readonly sheetHeader: string

package/src/shell/app-mobile-nav.tsx

@@ -7,7 +7,8 @@
  * page used to cost a tap to open a sheet plus a tap to pick a row. An overlay now exists only
  * where a slot genuinely holds more than one destination (the trailing "More" slot, or an opt-in
  * group slot), and its surface is INFERRED from the row count rather than configured: a content-
- * sized `Menu` that pops out of the tab up to `menuMax` rows, a bottom `Drawer` past it.
+ * sized `Menu` that pops out of the tab up to `menuMax` rows, a bottom `Drawer` past it. The menu
+ * is bounded by its own `max-height`, so `menuMax` decides taste, never whether it fits.
  *
  * This component paints a finished `MobileNavModel` and owns exactly one piece of state — which
  * slot's surface is open. Every selection decision lives in `mobile-nav-model.ts`, which is pure.
@@ -45,8 +46,9 @@ import classes from './app-mobile-nav.module.css'
 
 /**
  * Floating-ui middlewares for a tab menu. `flip: false` is correct, not lazy: flipping a
- * bottom-anchored menu puts it UNDER the footer, off-screen — `menuMax` is what guarantees it fits
- * above the bar (§2.2). `shift.padding` is a viewport inset in px, not a layout spacing token.
+ * bottom-anchored menu puts it UNDER the footer, off-screen. What guarantees it fits above the bar
+ * is `.menuDropdown`'s own `max-height` (see the CSS module) — NOT `menuMax`, which is only the
+ * menu-vs-sheet threshold. `shift.padding` is a viewport inset in px, not a layout spacing token.
  */
 const MENU_MIDDLEWARES = { flip: false, shift: { padding: 8 } }
 
@@ -198,49 +200,36 @@ function settingsRows(items: SettingsMenuItem[] | undefined): ActionRow[] {
   }))
 }
 
-/** One destination row, in a `Menu` dropdown. `depth` indents a nested child. */
-const menuRow = (item: SidebarItem, depth: number): ReactElement => {
-  // `.menuItem[data-disabled] { pointer-events: none }` is the primary guard, but it cannot be the
-  // only one: Mantine's `MenuItem` composes the CALLER's `onClick` first and only then checks
-  // `data-disabled` itself, so anything that reaches the node without a pointer — a keyboard
-  // activation, a synthetic click, a consumer stylesheet resetting `pointer-events` — would still
-  // fire the destination's handler on a row the projection deliberately rendered dead (§2.9).
-  const onClick = (event: MouseEvent<HTMLElement>) => {
-    if (item.disabled) {
-      event.preventDefault()
-      return
+/**
+ * The deepest element inside `root` that is CURRENTLY scrolled, or `null`.
+ *
+ * `common/scroll-parent.ts`'s `scrollParentOf` asks the opposite question — which ANCESTOR scrolls
+ * a given element — and this twin deliberately stays local rather than joining it there. That
+ * module is a shared vocabulary with several consumers and one meaning ("which box scrolls this");
+ * this is a scroll-to-top TARGET search with exactly one call site, a visibility rule and a
+ * deepest-wins tiebreak that only make sense for it. Per the consolidation doctrine a new shared
+ * export needs a named consumer outside the module that wanted it; this one does not have a second.
+ *
+ * Deepest wins because nested scrollers nest by specificity: a page scroller holding a thread pane
+ * means the pane is the surface the user is looking at. Visibility is part of "actually scrolled" —
+ * a hidden box keeps its `scrollTop` forever — but `getClientRects()` is only asked of the handful
+ * of nodes that pass the cheap `scrollTop` test, never of the whole tree.
+ */
+function deepestScrolledDescendant(root: ParentNode | null): HTMLElement | null {
+  if (root === null) return null
+  let best: HTMLElement | null = null
+  let bestDepth = -1
+  for (const node of root.querySelectorAll<HTMLElement>('*')) {
+    if (node.scrollTop <= 0) continue
+    if (node.getClientRects().length === 0) continue
+    let depth = 0
+    for (let parent = node.parentElement; parent !== null; parent = parent.parentElement) depth += 1
+    if (depth > bestDepth) {
+      best = node
+      bestDepth = depth
     }
-    item.onClick?.(event)
-  }
-  const shared = {
-    className: depth > 0 ? `${classes.menuItem} ${classes.menuItemNested}` : classes.menuItem,
-    leftSection: item.icon,
-    disabled: Boolean(item.disabled),
-    // Mantine emits `data-disabled` (a STYLING hook) and nothing else, so the ARIA state is ours
-    // to set — a disabled destination still renders (§2.3 rule 11), so it has to announce itself.
-    'aria-disabled': item.disabled || undefined,
-    'aria-current': item.active ? ('page' as const) : undefined,
-    rightSection: item.count ? <NavCountBadge count={item.count} /> : undefined,
-    onClick,
   }
-  const Anchor = item.Anchor
-  if (Anchor && !item.disabled) {
-    return (
-      <Menu.Item key={item.key} component={Anchor} {...shared}>
-        {item.label}
-      </Menu.Item>
-    )
-  }
-  return (
-    <Menu.Item
-      key={item.key}
-      component="a"
-      {...(item.href !== undefined && !item.disabled && { href: item.href })}
-      {...shared}
-    >
-      {item.label}
-    </Menu.Item>
-  )
+  return best
 }
 
 /** Depth-first: parent, then its children as indented rows — nesting survives to mobile. */
@@ -251,11 +240,12 @@ const rows = (
 ): ReactElement[] =>
   items.flatMap((item) => [render(item, depth), ...rows(item.children ?? [], depth + 1, render)])
 
-/** An account/settings row, in a `Menu` dropdown. */
-const menuActionRow = (row: ActionRow) => (
+/** An account/settings row, in a `Menu` dropdown. `sectionStart` draws the tail's own top rule
+ *  (see `tailRule` and `menuSlot`) when this is the first row of the unlabelled tail. */
+const menuActionRow = (row: ActionRow, sectionStart = false) => (
   <Menu.Item
     key={row.key}
-    className={classes.menuItem}
+    className={sectionStart ? `${classes.menuItem} ${classes.menuSectionStart}` : classes.menuItem}
     leftSection={row.icon}
     rightSection={row.active ? <IconCheck /> : undefined}
     {...(row.danger ? { color: 'red' } : {})}
@@ -296,20 +286,63 @@ export function MobileNav({
 
   const close = () => setOpenKey(null)
 
+  /** Scrolls `target` only if it has somewhere to go. The return value is the whole point — see
+   *  `scrollToTop`: "I asked it to scroll" and "it scrolled" are different facts. */
+  const scrollElementToTop = (target: Element | null | undefined): boolean => {
+    if (!target || target.scrollTop <= 0) return false
+    target.scrollTo({ top: 0, behavior: reduceMotion ? 'auto' : 'smooth' })
+    return true
+  }
+
   /**
    * §2.5 — re-tapping the ACTIVE slot scrolls to top instead of pushing a redundant history entry.
    *
-   * `AppShell.Main` is the shell's scrollport (`app-main.module.css`), so `document.scrollingElement`
-   * scrolls nothing inside a shell and the tap read as dead. The declared handle comes FIRST after
-   * the consumer's own override, and the document stays the fallback for a shell-less app.
+   * RETURNS WHETHER ANYTHING ACTUALLY SCROLLED, and that is the fix for the reported dead tap. The
+   * old version resolved `[data-basalt-scrollport]` (= `AppShell.Main`) and scrolled it
+   * unconditionally, while the caller had ALREADY suppressed the navigation. On any page whose
+   * real scroller is an INNER element — `/agent`'s thread panes, `/data`'s
+   * `Table.ScrollContainer`, `/content`'s article body — Main's own `scrollTop` is 0, so the scroll
+   * moved nothing and the navigation was gone too: a 100% dead tap, on exactly the pages that have
+   * the most to scroll.
+   *
+   * So the search widens and the answer is honest. The consumer's handle wins, then the declared
+   * scrollport, then the deepest inner scroller that is genuinely scrolled, then the document for a
+   * shell-less app. A `false` here means the caller must let the navigation through — a redundant
+   * same-route navigation is strictly better than silence.
    */
-  const scrollToTop = () => {
-    const target =
-      config?.getScrollElement?.() ??
-      document.querySelector(`[${SCROLLPORT_ATTRIBUTE}]`) ??
-      document.scrollingElement ??
-      document.documentElement
-    target.scrollTo({ top: 0, behavior: reduceMotion ? 'auto' : 'smooth' })
+  const scrollToTop = (): boolean => {
+    const declared =
+      config?.getScrollElement?.() ?? document.querySelector(`[${SCROLLPORT_ATTRIBUTE}]`)
+    if (scrollElementToTop(declared)) return true
+    if (scrollElementToTop(deepestScrolledDescendant(declared ?? document.body))) return true
+    return scrollElementToTop(document.scrollingElement ?? document.documentElement)
+  }
+
+  /**
+   * §2.5 + §2.9 in ONE place, because the three row builders used to disagree about what a tap on
+   * a row MEANS. `linkTab` implemented the active-retap rule and `menuRow`/`sheetRow` did not, so
+   * a row inside the More surface rendered `aria-current="page"` and then navigated to the route
+   * it was already on — the router no-ops, the surface closes, nothing moves. Since More is where
+   * most destinations live the moment the bar is full, that was the MORE common dead tap of the
+   * two. `sheetRow` was also missing the disabled guard `menuRow` carries.
+   *
+   * Order is load-bearing: the scroll is ATTEMPTED FIRST and the navigation is suppressed only if
+   * something really moved (`scrollToTop`'s doc). Returns `false` when the tap was swallowed by
+   * the disabled guard, so a caller owning a surface knows not to dismiss it.
+   */
+  const onActivate = (item: SidebarItem, event: MouseEvent<HTMLElement>): boolean => {
+    // Mantine emits `data-disabled` as a STYLING hook and the rows are polymorphic
+    // (`component="a"`/the consumer's Anchor), so the native `disabled` attribute never applies —
+    // and `MenuItem` composes the CALLER's `onClick` before checking `data-disabled` itself. The
+    // CSS no longer sets `pointer-events: none` (a row that swallows a tap with no press state is
+    // indistinguishable from a broken one), which makes this the ONLY guard, on every path.
+    if (item.disabled) {
+      event.preventDefault()
+      return false
+    }
+    if (item.active === true && scrollToTop()) event.preventDefault()
+    item.onClick?.(event)
+    return true
   }
 
   const extraRows = [...accountRows(account), ...settingsRows(settingsMenuItems)]
@@ -326,18 +359,38 @@ export function MobileNav({
   )
   const listBlocks = moreBlocks.filter((block): block is SidebarListBlock => block.kind === 'list')
 
+  /**
+   * Whether the More surface's UNLABELLED tail (blocks + account + settings) opens its own band —
+   * the guard the deleted `Menu.Divider` used to carry inline. A separator separates: with no
+   * destination rows above it, a More slot raised purely by those rows would open a band under the
+   * dropdown's top edge with nothing on the other side of it.
+   */
+  const tailRule = (slot: SurfaceSlot): boolean =>
+    moreBlocks.length + extraRows.length > 0 && slotHasRows(slot)
+
   /** A list block raises its nested sheet; a progress block just fires its own handler. */
   const activateBlock = (block: (typeof moreBlocks)[number]) => {
     close()
     if (block.kind === 'list') {
-      setOpenBlockKey(block.key)
+      // ONE FRAME, deliberately. `close()` starts the Menu's `returnFocus` (it restores focus to
+      // the More tab) while the nested Drawer traps focus on mount — in the same handler the two
+      // race, and focus lands wherever the loser wrote last, which is how a tap on a block row
+      // could leave the sheet open with focus back on the bar behind it. Deferring the open by one
+      // rAF lets the return finish before the trap starts.
+      requestAnimationFrame(() => setOpenBlockKey(block.key))
       return
     }
     block.onClick?.()
   }
 
-  const menuBlockRow = (block: (typeof moreBlocks)[number]) => (
-    <Menu.Item key={block.key} className={classes.menuItem} onClick={() => activateBlock(block)}>
+  const menuBlockRow = (block: (typeof moreBlocks)[number], sectionStart = false) => (
+    <Menu.Item
+      key={block.key}
+      className={
+        sectionStart ? `${classes.menuItem} ${classes.menuSectionStart}` : classes.menuItem
+      }
+      onClick={() => activateBlock(block)}
+    >
       {blockRowLabel(block)}
     </Menu.Item>
   )
@@ -411,17 +464,25 @@ export function MobileNav({
   )
 
   /**
-   * The trigger for a `menu`/`sheet` slot. A plain button: Mantine's `Menu.Target` clones
-   * `aria-haspopup`/`aria-expanded`/`aria-controls` onto it (`withRoles` default), so hand-setting
-   * them here would double them up (§2.9).
+   * The trigger for a `menu`/`sheet` slot.
+   *
+   * The two paths differ in who owns the ARIA, and the guard below is what keeps them apart. On
+   * the MENU path the button is a `Menu.Target` child, so Mantine clones
+   * `aria-haspopup`/`aria-expanded`/`aria-controls` onto it (`withRoles` default) and setting them
+   * here would double them up (§2.9). On the SHEET path there is no `Menu.Target` and no clone at
+   * all, so the trigger announced nothing — a button that opens a dialog and says so only to
+   * sighted users. `onClick` is present on exactly the sheet path, which is why it is the
+   * discriminator rather than a second parameter that could disagree with reality.
    */
-  const surfaceTab = (slot: SurfaceSlot, onClick?: () => void) => (
+  const surfaceTab = (slot: SurfaceSlot, onClick?: () => void, expanded?: boolean) => (
     <UnstyledButton
       className={classes.tab}
       data-active={slot.active || undefined}
       aria-current={slot.active ? 'page' : undefined}
       aria-label={slot.label}
-      {...(onClick ? { onClick } : {})}
+      {...(onClick
+        ? { onClick, 'aria-haspopup': 'dialog' as const, 'aria-expanded': Boolean(expanded) }
+        : {})}
     >
       {tabInner(slot)}
     </UnstyledButton>
@@ -429,14 +490,12 @@ export function MobileNav({
 
   /** A `link` slot: the consumer's router anchor IS the tab, so preload/back/middle-click all work. */
   const linkTab = (slot: LinkSlot) => {
+    // VERIFIED in @tanstack/react-router: `Link` composes the caller's handler FIRST and returns
+    // early when `defaultPrevented`, so `onActivate` suppresses navigation without touching
+    // preload. A link slot's `active` and its item's `active` are the same fact by construction —
+    // every path that builds one reads `isActiveDestination` (`mobile-nav-model.ts`).
     const onClick = (e: MouseEvent<HTMLElement>) => {
-      // VERIFIED in @tanstack/react-router: `Link` composes the caller's handler FIRST and returns
-      // early when `defaultPrevented`, so this suppresses navigation without touching preload.
-      if (slot.active) {
-        e.preventDefault()
-        scrollToTop()
-      }
-      slot.item.onClick?.(e)
+      onActivate(slot.item, e)
     }
     const shared = {
       className: classes.tab,
@@ -465,10 +524,53 @@ export function MobileNav({
     )
   }
 
+  /**
+   * One destination row, in a `Menu` dropdown. `depth` indents a nested child.
+   *
+   * Lives INSIDE the component (it used to be a module-level const) for one reason: it needs
+   * `onActivate`, which needs `scrollToTop`, which needs `config` and `reduceMotion`. Recreating
+   * it per render costs what `sheetRow` already costs and buys all three row builders one handler.
+   */
+  const menuRow = (item: SidebarItem, depth: number): ReactElement => {
+    const shared = {
+      className: depth > 0 ? `${classes.menuItem} ${classes.menuItemNested}` : classes.menuItem,
+      leftSection: item.icon,
+      disabled: Boolean(item.disabled),
+      // Mantine emits `data-disabled` (a STYLING hook) and nothing else, so the ARIA state is ours
+      // to set — a disabled destination still renders (§2.3 rule 11), so it has to announce itself.
+      'aria-disabled': item.disabled || undefined,
+      'aria-current': item.active ? ('page' as const) : undefined,
+      rightSection: item.count ? <NavCountBadge count={item.count} /> : undefined,
+      onClick: (event: MouseEvent<HTMLElement>) => {
+        onActivate(item, event)
+      },
+    }
+    const Anchor = item.Anchor
+    if (Anchor && !item.disabled) {
+      return (
+        <Menu.Item key={item.key} component={Anchor} {...shared}>
+          {item.label}
+        </Menu.Item>
+      )
+    }
+    return (
+      <Menu.Item
+        key={item.key}
+        component="a"
+        {...(item.href !== undefined && !item.disabled && { href: item.href })}
+        {...shared}
+      >
+        {item.label}
+      </Menu.Item>
+    )
+  }
+
   /** One destination row, in the sheet. 44px minimum, per the touch-target floor. */
   const sheetRow = (item: SidebarItem, depth: number): ReactElement => {
     const onClick = (e: MouseEvent<HTMLElement>) => {
-      item.onClick?.(e)
+      // The disabled guard `menuRow` always had, now shared — a dead row must not dismiss the
+      // sheet either, or the tap reads as "it did something" while going nowhere.
+      if (!onActivate(item, e)) return
       close()
     }
     const shared = {
@@ -522,7 +624,12 @@ export function MobileNav({
       onChange={(opened) => setOpenKey(opened ? slot.key : null)}
       position={slot.isMore ? 'top-end' : 'top'}
       offset={8}
-      width={step.mobileNavMenuWidth}
+      // Only the More dropdown widens. `mobileNavMenuWidth` (232px) is sized for a section slot's
+      // short destination labels; More also carries block rows like `Awaiting action · 3` and
+      // account rows like `Billing & payment`, which wrap or clip at that width. A viewport-
+      // relative cap rather than a second token: it is a fraction of the phone it opens on, and it
+      // is the only surface in the bar whose contents are not the consumer's nav labels.
+      width={slot.isMore ? 'min(78vw, 300px)' : step.mobileNavMenuWidth}
       withinPortal
       // AppShell itself sits at z-index 100 (`getDefaultZIndex('app')`), so the menu must clear it.
       zIndex={400}
@@ -550,25 +657,50 @@ export function MobileNav({
             : []),
           ...rows(group.items, 0, menuRow),
         ])}
-        {/* A separator separates. With nothing above it — a More slot raised purely by the block,
-            account and settings rows — it would render as the dropdown's first child, a rule under
-            the top edge. Both sides have to exist. */}
-        {slot.isMore && moreBlocks.length + extraRows.length > 0 && slotHasRows(slot) ? (
-          <Menu.Divider />
-        ) : null}
-        {slot.isMore ? moreBlocks.map(menuBlockRow) : null}
-        {slot.isMore ? extraRows.map(menuActionRow) : null}
+        {/* The `Menu.Divider` node that used to sit here is gone: section rhythm is SPACE opened
+            by each group's own heading (`.menuDropdown .menuLabel:not(:first-child)` in the CSS
+            module, which explains why it is space and not a line — `theme/divider-law.test.ts`
+            bans a hairline under a heading in the chrome lane). That is what makes the popover
+            read as sections instead of as one long list, which is the structure the More surface
+            needed a whole Drawer to get. The unlabelled tail (blocks + account + settings) has no
+            heading to open its band, so its FIRST row carries `.menuSectionStart` instead. The old
+            guard survives verbatim in `tailRule`: a separator separates, so with nothing above it
+            — a More slot raised purely by those rows — no band opens at all. */}
+        {slot.isMore
+          ? moreBlocks.map((block, index) => menuBlockRow(block, tailRule(slot) && index === 0))
+          : null}
+        {slot.isMore
+          ? extraRows.map((row, index) =>
+              menuActionRow(row, tailRule(slot) && moreBlocks.length === 0 && index === 0),
+            )
+          : null}
       </Menu.Dropdown>
     </Menu>
   )
 
   const sheetSlot = (slot: SurfaceSlot) => (
     <Fragment key={slot.key}>
-      {surfaceTab(slot, () => setOpenKey(slot.key))}
+      {/* A real TOGGLE, not a setter. It used to be `() => setOpenKey(slot.key)`, so re-tapping an
+          open sheet's own tab did nothing at all — while the menu path, which gets Mantine's
+          disclosure behaviour for free, closed on the second tap. Same trigger, same gesture, two
+          different answers. */}
+      {surfaceTab(
+        slot,
+        () => setOpenKey(openKey === slot.key ? null : slot.key),
+        openKey === slot.key,
+      )}
       <Drawer
         opened={openKey === slot.key}
         onClose={close}
         position="bottom"
+        // The bar is inside `AppShell.Footer` at z-index 100 and Mantine's modal default is 200, so
+        // the Drawer's OVERLAY covered the bar. Combined with `lockScroll` and a 220ms exit, that
+        // overlay stayed hit-testable after `onClose`: with a sheet open, a tap on another tab
+        // dismissed the sheet and did nothing else, and a quick second tap was eaten by the exiting
+        // overlay. Matching the Menu's 400 puts the bar and its surfaces on one layer, and a
+        // shorter exit shrinks the window in which a closing overlay can still swallow a tap.
+        zIndex={400}
+        overlayProps={{ zIndex: 400 }}
         // NO `size` prop — `size="auto"` used to be here, but it is a no-op on a bottom Drawer in
         // Mantine 9.3.0 (see the `.sheet` rule in the CSS module for the full trap). The sheet's
         // actual height/max-height comes entirely from that unlayered CSS rule, which overrides
@@ -589,6 +721,10 @@ export function MobileNav({
         transitionProps={{
           transition: 'slide-up',
           duration: reduceMotion ? 0 : 220,
+          // Asymmetric on purpose: the entrance may take its time, the EXIT is a hit-test window.
+          // Mantine's default exit equals the duration, so a dismissed sheet left 220ms of live
+          // overlay over the bar — long enough to eat the next tab tap.
+          exitDuration: reduceMotion ? 0 : 120,
           timingFunction: 'cubic-bezier(0.32, 0.72, 0, 1)',
         }}
       >
@@ -636,6 +772,10 @@ export function MobileNav({
       opened={openBlockKey === block.key}
       onClose={() => setOpenBlockKey(null)}
       position="bottom"
+      // Same layer as `sheetSlot`'s Drawer and the Menu — see that one's note. This sheet is
+      // reached FROM the More surface, so it inherits the same overlay-over-the-bar problem.
+      zIndex={400}
+      overlayProps={{ zIndex: 400 }}
       padding="md"
       title={block.label}
       classNames={{
@@ -646,6 +786,8 @@ export function MobileNav({
       transitionProps={{
         transition: 'slide-up',
         duration: reduceMotion ? 0 : 220,
+        // Same reasoning as `sheetSlot`'s Drawer — a long exit leaves a live overlay over the bar.
+        exitDuration: reduceMotion ? 0 : 120,
         timingFunction: 'cubic-bezier(0.32, 0.72, 0, 1)',
       }}
     >