basalt-ui 1.27.0 → 1.28.0

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

package/dist/shell/app-sidebar.js

@@ -1,6 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
-  ActionIcon,
   Box,
   Collapse,
   Group,
@@ -15,6 +14,8 @@ import {
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { useEffect, useRef } from "react";
+import { cx } from "../common/props.js";
+import { assertRequiredProps } from "../common/validate.js";
 import { NavCountBadge } from "./nav-count-badge.js";
 import { SidebarAccount } from "./app-sidebar-account.js";
 import { SidebarSearch } from "./sidebar-search.js";
@@ -32,27 +33,6 @@ import {
 import { VX } from "../tokens/index.js";
 import { useBasaltSpacing } from "../theme/index.js";
 import classes from "./app-sidebar.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 IconGear() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -76,30 +56,6 @@ function IconGear() {
 const HOVER_OPEN_DELAY = 150;
 const HOVER_CLOSE_DELAY = 200;
 const FLAT_SETTINGS_MAX = 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 hasActiveDescendant(item) {
   if (item.active) return true;
   return item.children?.some((c) => hasActiveDescendant(c)) ?? false;
@@ -263,17 +219,24 @@ function NavItemRow({ item, collapsed }) {
     item.key
   );
 }
-function AppSidebar({
-  brand,
-  sections,
-  collapsed,
-  onToggleCollapse,
-  settingsMenuItems,
-  settingsMenu = "auto",
-  account,
-  search,
-  blocks
-}) {
+function AppSidebar(props) {
+  assertRequiredProps("AppSidebar", props, ["brand"]);
+  const {
+    brand,
+    sections,
+    collapsed,
+    // `onToggleCollapse` is deliberately NOT read here any more — the toggle it drives moved into
+    // the header's leading zone with the brand (`app-brand.tsx`). The prop stays on
+    // `AppSidebarProps` because it is the shell's public seam for a consumer-owned collapse, and
+    // dropping it would break every call site for no gain.
+    settingsMenuItems,
+    settingsMenu = "auto",
+    account,
+    search,
+    blocks,
+    className,
+    style
+  } = props;
   const { step } = useBasaltSpacing();
   const navBlocks = (blocks ?? []).filter((block) => sidebarBlockPlacement(block) === "nav");
   const bottomBlocks = (blocks ?? []).filter((block) => sidebarBlockPlacement(block) === "bottom");
@@ -314,62 +277,45 @@ function AppSidebar({
       ] })
     ] })
   ] }) });
-  return /* @__PURE__ */ jsxs(Stack, { gap: 0, h: "100%", className: classes.root, "data-collapsed": collapsed || void 0, children: [
-    /* @__PURE__ */ jsxs(Group, { className: classes.brand, gap: "sm", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsxs(Group, { className: classes.brandLead, gap: "sm", wrap: "nowrap", children: [
-        brand.logoSrc && /* @__PURE__ */ jsx(
-          "img",
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      gap: 0,
+      h: "100%",
+      className: cx(classes.root, className),
+      "data-collapsed": collapsed || void 0,
+      ...style !== void 0 && { style },
+      children: [
+        search && /* @__PURE__ */ jsx("div", { className: classes.searchSlot, children: /* @__PURE__ */ jsx(SidebarSearch, { ...search, collapsed }) }),
+        /* @__PURE__ */ jsx(
+          ScrollArea,
           {
-            src: brand.logoSrc,
-            alt: brand.logoAlt ?? brand.name,
-            width: 26,
-            height: 26,
-            style: { display: "block" }
+            type: "hover",
+            scrollbars: "y",
+            scrollbarSize: 9,
+            className: classes.navScroll,
+            classNames: { viewport: classes.navViewport },
+            children: /* @__PURE__ */ jsxs(Stack, { gap: 0, className: classes.nav, children: [
+              sections.map((section) => /* @__PURE__ */ jsx(NavSection, { section, collapsed }, section.label)),
+              navBlocks.map((block) => /* @__PURE__ */ jsx(SidebarBlockView, { block }, block.key))
+            ] })
           }
         ),
-        /* @__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 })
-        }
-      )
-    ] }),
-    search && /* @__PURE__ */ jsx("div", { className: classes.searchSlot, children: /* @__PURE__ */ jsx(SidebarSearch, { ...search, collapsed }) }),
-    /* @__PURE__ */ jsx(
-      ScrollArea,
-      {
-        type: "hover",
-        scrollbars: "y",
-        scrollbarSize: 9,
-        className: classes.navScroll,
-        classNames: { viewport: classes.navViewport },
-        children: /* @__PURE__ */ jsxs(Stack, { gap: 0, className: classes.nav, children: [
-          sections.map((section) => /* @__PURE__ */ jsx(NavSection, { section, collapsed }, section.label)),
-          navBlocks.map((block) => /* @__PURE__ */ jsx(SidebarBlockView, { block }, block.key))
+        (bottomBlocks.length > 0 || settingsRow !== null || account !== void 0) && /* @__PURE__ */ jsxs(Stack, { gap: 0, className: classes.footer, children: [
+          bottomBlocks.map((block) => /* @__PURE__ */ jsx(SidebarBlockView, { block }, block.key)),
+          settingsRow,
+          account !== void 0 && /* @__PURE__ */ jsx(
+            SidebarAccount,
+            {
+              state: account.state,
+              ...account.actions !== void 0 && { actions: account.actions },
+              ...account.showEmail !== void 0 && { showEmail: account.showEmail }
+            }
+          )
         ] })
-      }
-    ),
-    (bottomBlocks.length > 0 || settingsRow !== null || account !== void 0) && /* @__PURE__ */ jsxs(Stack, { gap: 0, className: classes.footer, children: [
-      bottomBlocks.map((block) => /* @__PURE__ */ jsx(SidebarBlockView, { block }, block.key)),
-      settingsRow,
-      account !== void 0 && /* @__PURE__ */ jsx(
-        SidebarAccount,
-        {
-          state: account.state,
-          ...account.actions !== void 0 && { actions: account.actions },
-          ...account.showEmail !== void 0 && { showEmail: account.showEmail }
-        }
-      )
-    ] })
-  ] });
+      ]
+    }
+  );
 }
 export {
   AppSidebar