basalt-ui 1.26.0 → 1.28.0

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}`;

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"}

package/dist/shell/app-sidebar-account.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Group, Menu, Skeleton, Stack, Text, UnstyledButton } from "@mantine/core";
 import { useBasaltSpacing } from "../theme/index.js";
+import { cx } from "../common/props.js";
+import { assertRequiredProps } from "../common/validate.js";
 import classes from "./app-sidebar.module.css";
 function getInitials(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
@@ -31,37 +33,70 @@ function IconUser() {
     }
   );
 }
-function AccountSkeleton() {
-  return /* @__PURE__ */ jsxs(Group, { className: classes.accountRow, gap: "sm", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsx(Skeleton, { height: 28, width: 28, style: { borderRadius: "var(--vx-radius-card)" } }),
-    /* @__PURE__ */ jsxs(Stack, { gap: 4, className: classes.accountText, children: [
-      /* @__PURE__ */ jsx(Skeleton, { height: 10, width: "70%", radius: "sm" }),
-      /* @__PURE__ */ jsx(Skeleton, { height: 9, width: "50%", radius: "sm" })
-    ] })
-  ] });
+function AccountSkeleton({ className, style }) {
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      className: cx(classes.accountRow, className),
+      gap: "sm",
+      wrap: "nowrap",
+      ...style !== void 0 && { style },
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { height: 28, width: 28, style: { borderRadius: "var(--vx-radius-card)" } }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, className: classes.accountText, children: [
+          /* @__PURE__ */ jsx(Skeleton, { height: 10, width: "70%", radius: "sm" }),
+          /* @__PURE__ */ jsx(Skeleton, { height: 9, width: "50%", radius: "sm" })
+        ] })
+      ]
+    }
+  );
 }
-function SidebarAccount({ state, actions, showEmail }) {
+function SidebarAccount(props) {
+  assertRequiredProps("SidebarAccount", props, ["state"]);
+  const { state, actions, showEmail, className, style } = props;
   const { step } = useBasaltSpacing();
   if (state.status === "loading") {
-    return /* @__PURE__ */ jsx(AccountSkeleton, {});
+    return /* @__PURE__ */ jsx(
+      AccountSkeleton,
+      {
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style }
+      }
+    );
   }
   if (state.status === "unauthenticated") {
-    return /* @__PURE__ */ jsxs(UnstyledButton, { className: classes.accountRow, onClick: actions?.onSignIn, children: [
-      /* @__PURE__ */ jsx(IconUser, {}),
-      /* @__PURE__ */ jsx(Text, { className: classes.accountText, size: "sm", fw: 500, children: "Sign in" })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      UnstyledButton,
+      {
+        className: cx(classes.accountRow, className),
+        onClick: actions?.onSignIn,
+        ...style !== void 0 && { style },
+        children: [
+          /* @__PURE__ */ jsx(IconUser, {}),
+          /* @__PURE__ */ jsx(Text, { className: classes.accountText, size: "sm", fw: 500, children: "Sign in" })
+        ]
+      }
+    );
   }
   const { identity, role, plan } = state;
   const canUpgrade = Boolean(plan?.isFree && actions?.onUpgrade);
   return /* @__PURE__ */ jsxs(Menu, { position: "right-end", withArrow: true, width: step.sidebarAccountMenuWidth, zIndex: 500, children: [
-    /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, { className: classes.accountRow, "aria-label": "Account menu", children: [
-      /* @__PURE__ */ jsx(InitialsBlock, { name: identity.name }),
-      /* @__PURE__ */ jsxs(Stack, { gap: 2, className: classes.accountText, children: [
-        /* @__PURE__ */ jsx(Text, { className: classes.accountName, truncate: true, children: identity.name }),
-        showEmail && identity.email && /* @__PURE__ */ jsx(Text, { className: classes.accountMeta, truncate: true, children: identity.email }),
-        (plan || role) && /* @__PURE__ */ jsx(Text, { className: classes.accountMeta, truncate: true, children: [plan?.label, role?.label].filter(Boolean).join(" \xB7 ") })
-      ] })
-    ] }) }),
+    /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(
+      UnstyledButton,
+      {
+        className: cx(classes.accountRow, className),
+        "aria-label": "Account menu",
+        ...style !== void 0 && { style },
+        children: [
+          /* @__PURE__ */ jsx(InitialsBlock, { name: identity.name }),
+          /* @__PURE__ */ jsxs(Stack, { gap: 2, className: classes.accountText, children: [
+            /* @__PURE__ */ jsx(Text, { className: classes.accountName, truncate: true, children: identity.name }),
+            showEmail && identity.email && /* @__PURE__ */ jsx(Text, { className: classes.accountMeta, truncate: true, children: identity.email }),
+            (plan || role) && /* @__PURE__ */ jsx(Text, { className: classes.accountMeta, truncate: true, children: [plan?.label, role?.label].filter(Boolean).join(" \xB7 ") })
+          ] })
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
       actions?.onManageAccount && /* @__PURE__ */ jsx(Menu.Item, { onClick: actions.onManageAccount, children: "Account settings" }),
       actions?.onManageBilling && /* @__PURE__ */ jsx(Menu.Item, { onClick: actions.onManageBilling, children: "Billing & payment" }),

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

@@ -1,10 +1,11 @@
+import type { BasaltProps } from '../common/props.js';
 import type { BrandConfig, SettingsMenuItem } from './index.js';
 import type { SidebarBlock, SidebarSection } from '../nav/types.js';
 import type { AccountMenuItem, BasaltAccountProps } from './account-types.js';
 import type { SidebarSearchActions, SidebarSearchConfig } from './sidebar-search.js';
-export type AppSidebarProps = {
+export type AppSidebarProps = BasaltProps & {
     /**
-     * Brand identity. Supplying `menu` turns the brand row into a `Name ▾` workspace switcher —
+     * Brand identity. Supplying `menu` turns the header's brand into a `Name ▾` workspace switcher —
      * the entries are the existing `AccountMenuItem` shape, so a consumer already mapping account
      * actions needs no second vocabulary.
      */
@@ -13,6 +14,11 @@ export type AppSidebarProps = {
     };
     sections: SidebarSection[];
     collapsed: boolean;
+    /**
+     * Consumed by the HEADER's brand zone (`app-brand.tsx`), not by this component — the collapse
+     * toggle moved up there with the brand. Still declared here because it is part of the sidebar's
+     * collapse contract and `BasaltShell` feeds both halves from one place.
+     */
     onToggleCollapse: () => void;
     /**
      * Footer settings-menu entries (theme switcher, devtools, …) — supplied by the consumer.
@@ -72,5 +78,5 @@ export type AppSidebarProps = {
      */
     blocks?: SidebarBlock[];
 };
-export declare function AppSidebar({ brand, sections, collapsed, onToggleCollapse, settingsMenuItems, settingsMenu, account, search, blocks, }: AppSidebarProps): import("react").JSX.Element;
+export declare function AppSidebar(props: 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":"AAoCA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,cAAc,CAAA;AAG7E,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAE1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAgBjF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;OAIG;IACH,KAAK,EAAE,WAAW,GAAG;QAAE,IAAI,CAAC,EAAE,eAAe,EAAE,CAAA;KAAE,CAAA;IACjD,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAA;IACtC;;;;;;;;;;;;;;;;OAgBG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,mBAAmB,GAAG;QAAE,OAAO,CAAC,EAAE,oBAAoB,CAAA;KAAE,CAAA;IACjE;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAA;CACxB,CAAA;AA4VD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAqB,EACrB,OAAO,EACP,MAAM,EACN,MAAM,GACP,EAAE,eAAe,+BAiKjB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/app-sidebar.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,cAAc,CAAA;AAG7E,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAE1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAgBjF,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C;;;;OAIG;IACH,KAAK,EAAE,WAAW,GAAG;QAAE,IAAI,CAAC,EAAE,eAAe,EAAE,CAAA;KAAE,CAAA;IACjD,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAA;IACtC;;;;;;;;;;;;;;;;OAgBG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,mBAAmB,GAAG;QAAE,OAAO,CAAC,EAAE,oBAAoB,CAAA;KAAE,CAAA;IACjE;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAA;CACxB,CAAA;AAuRD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAgKhD"}