basalt-ui 1.27.0 → 1.28.0

package/dist/shell/app-brand.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ActionIcon, Group, Menu, Text, UnstyledButton } from "@mantine/core";
+import { cx } from "../common/props.js";
+import { IconChevron } from "./sidebar-blocks.js";
+import { VX } from "../tokens/index.js";
+import { useBasaltSpacing } from "../theme/index.js";
+import classes from "./app-brand.module.css";
+function IconCollapse({ collapsed }) {
+  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: "M4 4h16v16H4z" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 4v16" }),
+        collapsed ? /* @__PURE__ */ jsx("path", { d: "M14 9l3 3l-3 3" }) : /* @__PURE__ */ jsx("path", { d: "M16 9l-3 3l3 3" })
+      ]
+    }
+  );
+}
+function BrandName({
+  brand,
+  menuWidth
+}) {
+  const label = /* @__PURE__ */ jsx(Text, { className: classes.brandName, fz: VX.text.xl, fw: 550, children: brand.name });
+  const menu = brand.menu;
+  if (menu === void 0 || menu.length === 0) return label;
+  return /* @__PURE__ */ jsxs(Menu, { position: "bottom-start", withArrow: true, width: menuWidth, zIndex: 500, children: [
+    /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, { className: classes.brandButton, "aria-label": `${brand.name} workspace`, children: [
+      label,
+      /* @__PURE__ */ jsx(IconChevron, { open: true })
+    ] }) }),
+    /* @__PURE__ */ jsx(Menu.Dropdown, { children: menu.map((entry) => /* @__PURE__ */ jsx(
+      Menu.Item,
+      {
+        leftSection: entry.icon,
+        ...entry.danger === true && { color: "red" },
+        onClick: entry.onClick,
+        children: entry.label
+      },
+      entry.key
+    )) })
+  ] });
+}
+function AppBrand({ brand, collapsed, onToggleCollapse, className, style }) {
+  const { step } = useBasaltSpacing();
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      className: cx(classes.brand, className),
+      gap: "sm",
+      wrap: "nowrap",
+      ...style !== void 0 && { style },
+      children: [
+        /* @__PURE__ */ jsxs(Group, { className: classes.brandLead, gap: "sm", wrap: "nowrap", children: [
+          brand.logoSrc && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: brand.logoSrc,
+              alt: brand.logoAlt ?? brand.name,
+              width: 26,
+              height: 26,
+              style: { display: "block" }
+            }
+          ),
+          /* @__PURE__ */ jsx(BrandName, { brand, menuWidth: step.sidebarAccountMenuWidth })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "subtle",
+            size: 28,
+            visibleFrom: "sm",
+            className: classes.ghostIcon,
+            onClick: onToggleCollapse,
+            "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+            children: /* @__PURE__ */ jsx(IconCollapse, { collapsed })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AppBrand
+};

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

@@ -0,0 +1,109 @@
+/*
+ * The header's leading zone (docs/DESIGN-SPEC.md §5). Moved here from `app-sidebar.module.css`
+ * verbatim — the brand did not change, only where it is painted.
+ *
+ * NO border and no background: the zone is part of the header row, so the header's own
+ * `AppShell.Header` region seam is the only line under it. The sidebar column below now starts
+ * directly with `SidebarSearch`.
+ *
+ * The zone's WIDTH is `--app-shell-navbar-offset`, so it tracks the rail collapse with no React
+ * state and lands its trailing edge exactly on the sidebar|main seam. The negative
+ * `margin-inline-start` cancels `AppShell.Header`'s own `px` inset so the zone starts at the
+ * viewport edge and re-applies that inset as padding — which is what puts the brand lead on the
+ * same x as the sidebar rows below it.
+ */
+.zone {
+  flex: 0 0 var(--app-shell-navbar-offset, 0rem);
+  width: var(--app-shell-navbar-offset, 0rem);
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  /* The full header row, not just the toggle's own 28px — so the zone's box is the band it looks
+   * like, and the rail's centred toggle centres against the whole row. */
+  align-self: stretch;
+  margin-inline-start: calc(-1 * var(--app-shell-padding, 0px));
+  padding-inline: var(--app-shell-padding, 0px);
+  overflow: hidden;
+  /* Mantine's own AppShell timing, so the zone and the navbar under it move as one box. */
+  transition-property: flex-basis, width;
+  transition-duration: var(--app-shell-transition-duration);
+  transition-timing-function: var(--app-shell-transition-timing-function);
+}
+
+/* Below `sm` there is no navbar at all (the bottom bar is the whole nav), so the zone would be a
+ * zero-width box holding a hidden toggle. The breadcrumb owns the phone header's lead. */
+@media (max-width: 47.99375em) {
+  .zone {
+    display: none;
+  }
+}
+
+.brand {
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+}
+
+.brandLead {
+  min-width: 0;
+}
+
+/* Brand name — head font at stretch 88% (docs/DESIGN-SPEC.md §3); the 18px/550 land as `fz`/`fw`
+ * props (inline, deterministic against Mantine's own Text base rule). */
+.brandName {
+  font-family: var(--basalt-font-head);
+  font-stretch: 88%;
+}
+
+/* Workspace switcher (`brand.menu`) — the brand name plus a chevron, as a row-shaped trigger. The
+ * chevron is faint until hover so the brand still reads as the brand, not as a control. */
+.brandButton {
+  display: flex;
+  align-items: center;
+  gap: var(--vx-space-sidebar-section-label-gap);
+  min-width: 0;
+  padding: 0;
+  color: var(--vx-faint);
+  cursor: pointer;
+}
+
+.brandButton:hover {
+  color: var(--vx-ink);
+}
+
+/*
+ * Icon-only ghost button in shell chrome (the collapse toggle) — docs/DESIGN-SPEC.md §5:
+ * transparent, faint icon, hover ink-6% + ink, radius 6. `!important` because it competes with
+ * Mantine's own compiled ActionIcon variant CSS. This is the one copy — `sidebar-search.module.css`
+ * mirrors it rather than keeping its own duplicate.
+ */
+.ghostIcon {
+  color: var(--vx-faint) !important;
+  border-radius: var(--vx-radius-ctrl) !important;
+}
+
+.ghostIcon:hover {
+  background-color: color-mix(in srgb, var(--vx-ink) 6%, transparent) !important;
+  color: var(--vx-ink) !important;
+}
+
+/*
+ * The rail form, mirroring exactly what the sidebar's own brand row did when collapsed: the lead
+ * (logo + name) hides and the toggle centres. The zone drops its inset so the toggle's centre lands
+ * on the rail's icon column rather than 13px right of it.
+ */
+@media (min-width: 48em) {
+  .zone[data-collapsed] {
+    padding-inline: 0;
+  }
+
+  .zone[data-collapsed] .brand {
+    justify-content: center;
+  }
+
+  .zone[data-collapsed] .brandLead {
+    display: none;
+  }
+}

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

@@ -0,0 +1,14 @@
+/**
+ * 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-brand.module.css` must be added here too.
+ */
+declare const classes: {
+  readonly zone: string
+  readonly brand: string
+  readonly brandLead: string
+  readonly brandName: string
+  readonly brandButton: string
+  readonly ghostIcon: string
+}
+export default classes

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

@@ -1,5 +1,6 @@
 import type { NavAnchor } from '../nav/types.js';
-export declare function AppBreadcrumbs({ section, parent, parentAnchor, parentHref, page, }: {
+import type { BasaltProps } from '../common/props.js';
+export type AppBreadcrumbsProps = BasaltProps & {
     section?: string;
     /** Parent item label — shown when the active page is a nested child (e.g. "Dashboard"). */
     parent?: string | undefined;
@@ -11,5 +12,6 @@ export declare function AppBreadcrumbs({ section, parent, parentAnchor, parentHr
     /** Parent item href — the no-router fallback; ignored when `parentAnchor` is present. */
     parentHref?: string | undefined;
     page?: string;
-}): import("react").JSX.Element | null;
+};
+export declare function AppBreadcrumbs({ section, parent, parentAnchor, parentHref, page, className, style, }: AppBreadcrumbsProps): import("react").JSX.Element | null;
 //# sourceMappingURL=app-breadcrumbs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"app-breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/shell/app-breadcrumbs.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAmB7C,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,MAAM,EACN,YAAY,EACZ,UAAU,EACV,IAAI,GACL,EAAE;IACD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IACpC,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,sCAqDA"}
+{"version":3,"file":"app-breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/shell/app-breadcrumbs.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAkBlD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IACpC,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,MAAM,EACN,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,sCA0DrB"}

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,107 @@
+/*
+ * 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;
+}

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 { 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,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,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;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,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAiY/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";
@@ -137,15 +140,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)];
@@ -358,13 +364,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 +393,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}`;