basalt-ui 1.27.0 → 1.29.0

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 { 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,aAAa,CAAA;AAG5E,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;AA4SD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAwKhD"}

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,7 +33,7 @@ import {
 import { VX } from "../tokens/index.js";
 import { useBasaltSpacing } from "../theme/index.js";
 import classes from "./app-sidebar.module.css";
-function IconCollapse({ collapsed }) {
+function IconGear() {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -46,60 +47,32 @@ function IconCollapse({ collapsed }) {
       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" })
+        /* @__PURE__ */ jsx("path", { d: "M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" })
       ]
     }
   );
 }
-function IconGear() {
-  return /* @__PURE__ */ jsxs(
+function IconCheck() {
+  return /* @__PURE__ */ jsx(
     "svg",
     {
-      width: 18,
-      height: 18,
+      width: 14,
+      height: 14,
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
-      strokeWidth: 2,
+      strokeWidth: 2.5,
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": true,
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" }),
-        /* @__PURE__ */ jsx("path", { d: "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" })
-      ]
+      children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5l10 -10" })
     }
   );
 }
 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 +236,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");
@@ -291,10 +271,12 @@ function AppSidebar({
         className: classes.footerBtn,
         onClick: entry.onClick,
         "aria-label": entry.label,
+        "aria-current": entry.active ? "true" : void 0,
         children: [
           /* @__PURE__ */ jsx("span", { className: classes.footerIconSlot, children: entry.icon ?? /* @__PURE__ */ jsx(IconGear, {}) }),
           /* @__PURE__ */ jsx(Text, { className: classes.footerText, fz: VX.text.md, children: entry.label }),
-          index === 0 ? ringMark : null
+          index === 0 ? ringMark : null,
+          entry.active ? /* @__PURE__ */ jsx(IconCheck, {}) : null
         ]
       },
       entry.key
@@ -307,69 +289,62 @@ function AppSidebar({
       ringMark
     ] }) }),
     /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
-      settingsItems.map((entry) => /* @__PURE__ */ jsx(Menu.Item, { leftSection: entry.icon, onClick: entry.onClick, children: entry.label }, entry.key)),
+      settingsItems.map((entry) => /* @__PURE__ */ jsx(
+        Menu.Item,
+        {
+          leftSection: entry.icon,
+          rightSection: entry.active ? /* @__PURE__ */ jsx(IconCheck, {}) : void 0,
+          onClick: entry.onClick,
+          "aria-current": entry.active ? "true" : void 0,
+          children: entry.label
+        },
+        entry.key
+      )),
       versionLabel !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Menu.Divider, {}),
         /* @__PURE__ */ jsx(Menu.Label, { children: versionLabel })
       ] })
     ] })
   ] }) });
-  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

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

@@ -4,7 +4,8 @@
  *
  * The mock sidebar has ZERO horizontal rules — separation comes from SPACING only. The one allowed
  * line is the child-list left guide (`--vx-divider`). Never reintroduce brand/section/footer
- * borders.
+ * borders. The column's trailing (right) edge is the `AppShell.Navbar` region seam
+ * (docs/DESIGN-SPEC.md §5) and is not this module's to draw.
  *
  * The active tint and icon-accent color live in the Mantine theme
  * (`NavLink.extend` + `theme/nav-link.module.css`) so they apply to EVERY render path, including a
@@ -25,6 +26,16 @@
   padding: 0 var(--vx-space-row-inset-x);
 }
 
+/* Installed PWA (C5 consolidation, seeded from argo's `styles/native.css`): clear the landscape
+ * notch on the side the sidebar touches. `max()` is a FLOOR — the inset only grows the padding
+ * past its normal value, never shrinks it. Right inset is `app-main.module.css`'s to draw; the
+ * PWA's top inset needs no rule here (the status bar uses the opaque `default` style). */
+@media (display-mode: standalone) {
+  .root {
+    padding-left: max(var(--vx-space-row-inset-x), env(safe-area-inset-left));
+  }
+}
+
 .link {
   font-size: var(--vx-text-md);
   border-radius: var(--vx-radius-ctrl) !important;
@@ -39,28 +50,31 @@
 }
 
 /* Inactive rows: muted text + faint icon. Active rows keep the theme's ink text (via `--nl-color`)
- * untouched — this selector only ever matches when neither `data-active` nor `aria-current="page"`
- * is present. `[data-ancestor]` is excluded too: it gets its own ink/accent treatment below and
- * must not fall through to muted/faint here. */
-.link:not([data-active]):not([aria-current='page']):not([data-ancestor]) {
+ * untouched — this selector only ever matches when `data-active` is absent. `aria-current` is no
+ * longer part of the exclusion: `use-nav.ts` is the sole authority on active, stamping exactly one
+ * `data-active` winner, and keying this off `aria-current` too let the router's own looser match
+ * disagree with basalt's model. `[data-ancestor]` is excluded too: it gets its own ink/accent
+ * treatment below and must not fall through to muted/faint here. */
+.link:not([data-active]):not([data-ancestor]) {
   color: var(--vx-muted) !important;
 }
 
-.link:not([data-active]):not([aria-current='page']):not([data-ancestor])
+.link:not([data-active]):not([data-ancestor])
   :global(.mantine-NavLink-section[data-position='left']) {
   color: var(--vx-faint);
 }
 
-/* Hover — ink-6% tint + ink text, for inactive rows only (an active row already carries the
- * theme's stronger ink-9% tint and keeps its own hover via `--nl-hover`; an ancestor row gets its
- * own hover rule below so its accent icon survives the pointer). */
+/* Hover — ink-5% tint + ink text, for inactive rows only (an active row carries the theme's
+ * stronger 12% accent fill via `theme/nav-link.module.css` and keeps its own accent hover; an
+ * ancestor row gets its own hover rule below so its accent icon survives the pointer). Dropped from
+ * 6% alongside the theme-level hover so it reads clearly below the active row's accent fill. */
 @media (hover: hover) {
-  .link:not([data-active]):not([aria-current='page']):not([data-ancestor]):hover {
-    background-color: color-mix(in srgb, var(--vx-ink) 6%, transparent) !important;
+  .link:not([data-active]):not([data-ancestor]):hover {
+    background-color: color-mix(in srgb, var(--vx-ink) 5%, transparent) !important;
     color: var(--vx-ink) !important;
   }
 
-  .link:not([data-active]):not([aria-current='page']):not([data-ancestor]):hover
+  .link:not([data-active]):not([data-ancestor]):hover
     :global(.mantine-NavLink-section[data-position='left']) {
     color: var(--vx-ink);
   }
@@ -68,12 +82,12 @@
 
 /*
  * Ancestor row (`SidebarItem.ancestor` — a parent on the path to the active row, never active
- * itself, never `aria-current`): must read visibly WEAKER than active and visibly STRONGER than a
- * hovered inactive row, since all three now share the same 6%/9% ink-tint family. Active carries a
- * persistent `--nl-bg` ink-9% fill + weight 600 (theme `nav-link.module.css`); a hovered inactive
- * row carries a transient ink-6% fill. An ancestor therefore gets NO fill at rest (unlike active)
- * and NO weight change (still 400, unlike active's 600) — only the ink label + accent icon that an
- * active row also carries, so it reads as "on the path" without claiming to BE the destination.
+ * itself, never `data-active`): must read visibly WEAKER than active and visibly STRONGER than a
+ * hovered inactive row. Active carries a persistent accent-12% fill + weight 600 (theme
+ * `nav-link.module.css`); a hovered inactive row carries a transient ink-5% fill. An ancestor
+ * therefore gets NO fill at rest (unlike active) and NO weight change (still 400, unlike active's
+ * 600) — only the ink label + accent icon that an active row also carries, so it reads as "on the
+ * path" without claiming to BE the destination.
  */
 .link[data-ancestor] {
   color: var(--vx-ink) !important;
@@ -98,70 +112,18 @@
 }
 
 /*
- * Icon-only ghost buttons in shell chrome (collapse toggle, mobile close) — docs/DESIGN-SPEC.md
- * §5: transparent, faint icon, hover ink-6% + ink, radius 6. `!important` for the same reason as
- * the nav-row overrides above: these compete with Mantine's own compiled ActionIcon variant CSS.
- */
-.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;
-}
-
-/*
- * Brand row — NO border (the mock's brand row has none; the header divider exists only over the
- * content column). Spacing alone (12px bottom padding) separates it from the nav.
- */
-.brand {
-  justify-content: space-between;
-  padding: var(--vx-space-sidebar-brand-inset-top) var(--vx-space-sidebar-brand-inset-x)
-    var(--vx-space-sidebar-region-gap);
-  flex-shrink: 0;
-}
-
-.brandLead {
-  min-width: 0;
-}
-
-/*
- * Search slot — fixed row between the brand and the nav scroll region. Horizontal padding aligns
- * the field with the brand lead / nav column; the bottom gap opens the nav region the same way the
- * brand row's own bottom padding does.
+ * Search slot — the sidebar's FIRST row now that the brand moved into the header
+ * (`app-brand.module.css`), optional (absent, the nav starts the column). `padding-block` is the
+ * only air above it, so the token that used to merely top up the brand band's centred `min-height`
+ * now owns the whole gap under the header seam.
  */
 /* No horizontal padding — the field spans the same width as the nav rows below it (both sit at the
  * `.root` 10px inset), so the search box edge-aligns with the nav column. */
 .searchSlot {
-  padding: 0 0 var(--vx-space-sidebar-region-gap);
+  padding-block: var(--vx-space-sidebar-region-gap);
   flex-shrink: 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);
-}
-
 /*
  * Nav scroll region — a Mantine ScrollArea, whose overlay scrollbar is absolutely positioned inside
  * the (position: relative; overflow: hidden) root, so it floats over the rows instead of reserving
@@ -186,7 +148,8 @@
 }
 
 /* Sections separate by SPACING only — 15px between sections, nothing above the first (the brand
- * row's own bottom padding already opens the region). */
+ * band's centred `min-height` already opens the region's air, and the optional search slot's own
+ * `padding-block` opens more when it renders). */
 .nav > div + div {
   margin-top: var(--vx-space-sidebar-section-gap);
 }
@@ -573,21 +536,32 @@
 }
 
 /*
- * Active child = accent text, weight 600, NO fill (docs/DESIGN-SPEC.md §5) — unlike a top-level
- * active row (ink-9% tint). Overrides the `--nl-*` custom properties the theme sets inline on the
- * SAME NavLink root, so `!important` is required.
+ * Active child = the SAME accent-tinted fill as a top-level active row (accent-12% resting,
+ * accent-16% hover), plus accent text, weight 600 (inherited from `.root[data-active]` in
+ * `theme/nav-link.module.css`, which every NavLink root carries regardless of nesting). Previously
+ * NO fill at rest — that read ambiguously once a hovered sibling landed in the same ink-tint family
+ * a stale ink-9% active fill also used; the shared accent family removes the ambiguity outright.
+ * `background-color` is set directly (not via `--nl-bg`): the theme's own active rule now paints
+ * `background-color` as a plain declaration rather than through that custom property, so overriding
+ * only the property would no longer reach the painted color. `[data-active]` alone is the hook —
+ * `use-nav.ts` is the sole authority on active, so `aria-current` is not matched here either.
  */
-.childList :global(.mantine-NavLink-root[data-active]),
-.childList :global(.mantine-NavLink-root[aria-current='page']) {
+.childList :global(.mantine-NavLink-root[data-active]) {
   --nl-color: var(--vx-accent) !important;
-  --nl-bg: transparent !important;
-  --nl-hover: color-mix(in srgb, var(--vx-ink) 5%, transparent) !important;
+  background-color: color-mix(in srgb, var(--vx-accent) 12%, transparent) !important;
+}
+
+@media (hover: hover) {
+  .childList :global(.mantine-NavLink-root[data-active]):hover {
+    background-color: color-mix(in srgb, var(--vx-accent) 16%, transparent) !important;
+  }
 }
 
-/* Child hover (inactive) — ink-5% + ink, one step quieter than the parent rows' 6%. Outranks the
- * `.link` hover rule above on specificity. */
+/* Child hover (inactive) — ink-5%, matching the top-level inactive hover now that both share the
+ * same percentage. `data-active` is excluded so an active child keeps its accent hover above.
+ * Outranks the `.link` hover rule above on specificity. */
 @media (hover: hover) {
-  .childList :global(.mantine-NavLink-root:not([data-active]):not([aria-current='page'])):hover {
+  .childList :global(.mantine-NavLink-root:not([data-active])):hover {
     background-color: color-mix(in srgb, var(--vx-ink) 5%, transparent) !important;
     color: var(--vx-ink) !important;
   }
@@ -609,19 +583,12 @@
 /*
  * Icon-rail (collapsed) — desktop only. Gated behind min-width: sm (48em) so the sidebar doesn't
  * exist at all below that breakpoint (see `MobileNav`) regardless of the persisted collapse flag.
- * Hide the brand text, section labels and nav labels; center the remaining icons.
+ * Hide the section labels and nav labels; center the remaining icons. The brand's own rail form
+ * lives in `app-brand.module.css` now, keyed off the same `data-collapsed` attribute.
  */
 @media (min-width: 48em) {
-  .root[data-collapsed] .brand {
-    justify-content: center;
-  }
-
-  .root[data-collapsed] .brandLead {
-    display: none;
-  }
-
   .root[data-collapsed] .searchSlot {
-    padding: 0 0 var(--vx-space-sidebar-region-gap);
+    padding-block: var(--vx-space-sidebar-region-gap);
     display: flex;
     justify-content: center;
   }