basalt-ui 1.24.0 → 1.26.0

package/dist/shell/app-mobile-nav.js

@@ -3,6 +3,8 @@ import { Drawer, Menu, NavLink, ScrollArea, Stack, Text, UnstyledButton } from "
 import { useReducedMotion } from "@mantine/hooks";
 import { Fragment as Fragment2, useState } from "react";
 import { NavCountBadge } from "./nav-count-badge.js";
+import { SidebarBlockToneDot } from "./sidebar-blocks.js";
+import { sidebarBlockMobile } from "./sidebar-block-model.js";
 import { useBasaltSpacing } from "../theme/index.js";
 import classes from "./app-mobile-nav.module.css";
 const MENU_MIDDLEWARES = { flip: false, shift: { padding: 8 } };
@@ -134,9 +136,11 @@ function MobileNav({
   model,
   config,
   account,
-  settingsMenuItems
+  settingsMenuItems,
+  blocks
 }) {
   const [openKey, setOpenKey] = useState(null);
+  const [openBlockKey, setOpenBlockKey] = useState(null);
   const reduceMotion = useReducedMotion();
   const { step } = useBasaltSpacing();
   const close = () => setOpenKey(null);
@@ -145,6 +149,61 @@ function MobileNav({
     target.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" });
   };
   const extraRows = [...accountRows(account), ...settingsRows(settingsMenuItems)];
+  const moreBlocks = (blocks ?? []).filter(
+    (block) => block.kind !== "custom" && sidebarBlockMobile(block) === "more" && (block.kind !== "list" || block.items.length > 0)
+  );
+  const listBlocks = moreBlocks.filter((block) => block.kind === "list");
+  const activateBlock = (block) => {
+    close();
+    if (block.kind === "list") {
+      setOpenBlockKey(block.key);
+      return;
+    }
+    block.onClick?.();
+  };
+  const menuBlockRow = (block) => /* @__PURE__ */ jsx(Menu.Item, { className: classes.menuItem, onClick: () => activateBlock(block), children: blockRowLabel(block) }, block.key);
+  const sheetBlockRow = (block) => /* @__PURE__ */ jsx(
+    NavLink,
+    {
+      classNames: { root: classes.row },
+      label: blockRowLabel(block),
+      onClick: () => activateBlock(block)
+    },
+    block.key
+  );
+  const blockItemRow = (item) => {
+    const lead = item.icon ?? (item.tone !== void 0 ? /* @__PURE__ */ jsx(SidebarBlockToneDot, { tone: item.tone }) : void 0);
+    const meta = item.meta !== void 0 ? /* @__PURE__ */ jsx(Text, { component: "span", className: classes.rowMeta, children: item.meta }) : void 0;
+    const interactive = item.Anchor !== void 0 || item.href !== void 0 || item.onClick !== void 0;
+    if (!interactive) {
+      return /* @__PURE__ */ jsxs("div", { className: classes.row, children: [
+        lead,
+        /* @__PURE__ */ jsx(Text, { component: "span", children: item.label }),
+        meta
+      ] }, item.key);
+    }
+    const shared = {
+      classNames: { root: classes.row },
+      label: item.label,
+      ...lead !== void 0 && { leftSection: lead },
+      ...meta !== void 0 && { rightSection: meta },
+      onClick: () => {
+        item.onClick?.();
+        setOpenBlockKey(null);
+      }
+    };
+    const Anchor = item.Anchor;
+    if (Anchor) return /* @__PURE__ */ jsx(NavLink, { component: Anchor, ...shared }, item.key);
+    return /* @__PURE__ */ jsx(
+      NavLink,
+      {
+        component: "a",
+        ...item.href !== void 0 && { href: item.href },
+        ...shared
+      },
+      item.key
+    );
+  };
   const hasCount = (slot) => slot.kind === "link" ? Boolean(slot.item.count) : slot.groups.some((g) => groupHasCount(g.items));
   const tabInner = (slot) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("span", { className: classes.tabIcon, children: [
@@ -271,9 +330,9 @@ function MobileNav({
             ...group.label ? [/* @__PURE__ */ jsx(Menu.Label, { children: group.label }, `${group.key}-label`)] : [],
             ...rows(group.items, 0, menuRow)
           ]),
-          slot.isMore && extraRows.length > 0 && slotHasRows(slot) ? /* @__PURE__ */ jsx(Menu.Divider, {}) : null,
-          slot.isMore ? extraRows.map(menuActionRow) : null,
-          slot.isMore ? config?.moreExtra : null
+          slot.isMore && moreBlocks.length + extraRows.length > 0 && slotHasRows(slot) ? /* @__PURE__ */ jsx(Menu.Divider, {}) : null,
+          slot.isMore ? moreBlocks.map(menuBlockRow) : null,
+          slot.isMore ? extraRows.map(menuActionRow) : null
         ] })
       ]
     },
@@ -304,17 +363,45 @@ function MobileNav({
             sheetGroupLabel(group),
             rows(group.items, 0, sheetRow)
           ] }, group.key)),
-          slot.isMore && extraRows.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 2, children: extraRows.map(sheetActionRow) }) : null,
-          slot.isMore ? config?.moreExtra : null
+          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.key);
-  return /* @__PURE__ */ jsx("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);
-  }) });
+  const blockSheet = (block) => /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      opened: openBlockKey === block.key,
+      onClose: () => setOpenBlockKey(null),
+      position: "bottom",
+      padding: "md",
+      title: block.label,
+      classNames: {
+        content: classes.sheet,
+        title: classes.sheetTitle,
+        header: classes.sheetHeader
+      },
+      transitionProps: {
+        transition: "slide-up",
+        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) }) })
+    },
+    `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)
+  ] });
+}
+function blockRowLabel(block) {
+  return block.kind === "list" ? `${block.label} \xB7 ${block.count ?? block.items.length}` : `${block.label} \xB7 ${block.value} of ${block.total}`;
 }
 function slotHasRows(slot) {
   return slot.groups.some((group) => group.items.length > 0);

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

@@ -252,6 +252,14 @@
   background-color: color-mix(in srgb, var(--vx-ink) 10%, transparent);
 }
 
+/* Trailing meta on a block-item row (a timestamp, an owner) — the mobile twin of the sidebar's
+ * `.blockRowMeta`, so the same `SidebarBlockItem.meta` reads the same on both surfaces. */
+.rowMeta {
+  flex: none;
+  font-size: var(--vx-text-micro);
+  color: var(--vx-faint);
+}
+
 /*
  * Active = neutral surface fill + plain text color. Never the identity blue (DESIGN.md). --nl-color
  * forces NavLink's active text/icon color (otherwise the accent) to the plain text color. The

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

@@ -19,5 +19,6 @@ declare const classes: {
   readonly sheetHeader: string
   readonly row: string
   readonly rowNested: string
+  readonly rowMeta: string
 }
 export default classes

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

@@ -1,49 +1,76 @@
-import type { ReactNode } from 'react';
 import type { BrandConfig, SettingsMenuItem } from './index.js';
-import type { SidebarSection } from '../nav/types.js';
-import type { BasaltAccountProps } from './account-types.js';
-import type { SidebarSearchConfig } from './sidebar-search.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 = {
-    brand: BrandConfig;
+    /**
+     * Brand identity. Supplying `menu` turns the brand row into a `Name ▾` workspace switcher —
+     * the entries are the existing `AccountMenuItem` shape, so a consumer already mapping account
+     * actions needs no second vocabulary.
+     */
+    brand: BrandConfig & {
+        menu?: AccountMenuItem[];
+    };
     sections: SidebarSection[];
     collapsed: boolean;
     onToggleCollapse: () => void;
     /**
      * Footer settings-menu entries (theme switcher, devtools, …) — supplied by the consumer.
-     * The pinned footer "Settings" row renders ONLY when this is a non-empty list — apps that put
-     * Settings in a nav section (the common case) omit this and get no duplicate footer row. The
-     * `brand.version` label renders inside this menu, so it also only shows when the row does.
+     * The pinned footer row renders ONLY when this is a non-empty list — apps that put Settings in a
+     * nav section (the common case) omit this and get no duplicate footer row.
+     *
+     * **Three entries or fewer render FLAT**, as one link row each (Settings · Integrations · Invite
+     * teammates), and four or more collapse into the single gear "Settings" menu. A menu that opens
+     * to show two rows costs a click for nothing; a footer of eight rows costs the nav its height.
+     * That threshold is basalt's — `docs/CONTROLS-SPEC.md` §2.3 — and `settingsMenu` is the override
+     * for the cases the count cannot see. `brand.version` renders as a faint label under the flat
+     * rows, and inside the dropdown in the menu form.
      */
     settingsMenuItems?: SettingsMenuItem[];
+    /**
+     * Which footer form `settingsMenuItems` takes. `'auto'` (the default) is the count rule above;
+     * `'flat'` and `'menu'` force one regardless of how many entries there are.
+     *
+     * The override exists because the COUNT is not the whole question. Three rows that are each a
+     * theme radio group, a devtools switch and a density slider are three CONTROLS, not three
+     * destinations — flat they fill the footer with widgets and push the account row off the fold,
+     * and the count rule cannot tell them from three links. Equally, four short destinations may be
+     * worth their height on a tall sidebar. `'auto'` stays the default so nothing moves for a
+     * consumer that never had an opinion.
+     *
+     * DESKTOP FOOTER ONLY. Below `sm` there is no sidebar at all and the same entries are flat rows
+     * in the bottom bar's More surface either way — a dropdown inside that sheet would be a menu
+     * inside a menu.
+     *
+     * @default 'auto'
+     */
+    settingsMenu?: 'auto' | 'flat' | 'menu';
     /**
      * Optional account row rendered below the settings menu in the sidebar footer (see
-     * `SidebarAccount` / `BasaltAccountProps`), separated by its own top hairline. Omitting it
-     * reproduces today's footer unchanged.
+     * `SidebarAccount` / `BasaltAccountProps`) — no separating hairline, the row's own top padding
+     * supplies the separation. Omitting it reproduces today's footer unchanged.
      */
     account?: BasaltAccountProps;
     /**
      * Optional search field rendered directly below the brand and ABOVE the nav scroll region — a
-     * fixed, non-scrolling row. Pair with basalt-ui/commands' openSpotlight.
+     * fixed, non-scrolling row. Pair with basalt-ui/commands' openSpotlight. `actions` adds up to two
+     * icon-only buttons to the right of that row.
      */
-    search?: SidebarSearchConfig;
+    search?: SidebarSearchConfig & {
+        actions?: SidebarSearchActions;
+    };
     /**
-     * Arbitrary content appended after `sections` inside the nav `ScrollArea` — a tree, a filter
-     * panel, a project list, anything a set of `SidebarItem`s can't express. Renders as the last
-     * child of the scrolling nav column, so a long list scrolls with the rest of the nav instead of
-     * fighting it for height. Pass `sections={[]}` to use this slot exclusively; the section-spacing
-     * rule only fires between adjacent children, so an empty `sections` produces no orphan divider or
-     * dead padding above it.
+     * Declared blocks (`docs/CONTROLS-SPEC.md` §2.3, law C13) — an "Awaiting action" list, a
+     * "Recents" list, a "Getting started" progress row, or a `kind: 'custom'` node for a tree or
+     * filter panel no set of rows can express (`kind: 'custom'` is what replaced `navExtra`).
      *
-     * Hidden on the collapsed desktop rail; still present in the mobile drawer, which opens at full
-     * width. The rail is ~56px of icon buttons with no sensible representation for arbitrary
-     * consumer content, so the CSS media query that drives the rail hides this slot the same way it
-     * hides `.childList` — never a JS check on `collapsed`, since that one value is shared by the
-     * rail AND the drawer (only the media query tells them apart). `SidebarSearch` gets to adapt
-     * itself to the rail (it takes `collapsed` and renders its own icon-only form) because the shell
-     * owns that control; it cannot adapt content it knows nothing about, so this slot hides instead
-     * of squashing it.
+     * `placement: 'nav'` appends after `sections` INSIDE the nav scroll region, so a long list
+     * scrolls with the nav instead of fighting it for height; `'bottom'` pins above the settings
+     * footer. Because these are data and not a `ReactNode` slot, basalt owns both projections a slot
+     * could never express: the collapsed rail (a count dot on the icon, a ring on the settings row)
+     * and the mobile More sheet — see `sidebarBlockRail` / `sidebarBlockMobile`.
      */
-    navExtra?: ReactNode;
+    blocks?: SidebarBlock[];
 };
-export declare function AppSidebar({ brand, sections, collapsed, onToggleCollapse, settingsMenuItems, account, search, navExtra, }: AppSidebarProps): import("react").JSX.Element;
+export declare function AppSidebar({ brand, sections, collapsed, onToggleCollapse, settingsMenuItems, settingsMenu, account, search, blocks, }: 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":"AAgCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,cAAc,CAAA;AAG/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAK3D,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAA;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B;;;;;;;;;;;;;;;;OAgBG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAqQD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,MAAM,EACN,QAAQ,GACT,EAAE,eAAe,+BAuJjB"}
+{"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"}

package/dist/shell/app-sidebar.js

@@ -14,10 +14,21 @@ import {
   UnstyledButton
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { NavCountBadge } from "./nav-count-badge.js";
 import { SidebarAccount } from "./app-sidebar-account.js";
 import { SidebarSearch } from "./sidebar-search.js";
+import {
+  IconChevron,
+  SidebarBlockView,
+  SidebarProgressRing,
+  usePersistedFold
+} from "./sidebar-blocks.js";
+import {
+  sidebarBlockPlacement,
+  sidebarBlockRail,
+  sidebarSectionFoldKey
+} from "./sidebar-block-model.js";
 import { VX } from "../tokens/index.js";
 import { useBasaltSpacing } from "../theme/index.js";
 import classes from "./app-sidebar.module.css";
@@ -42,23 +53,6 @@ function IconCollapse({ collapsed }) {
     }
   );
 }
-function IconChevron({ open }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: 12,
-      height: 12,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": true,
-      children: open ? /* @__PURE__ */ jsx("path", { d: "M6 9l6 6l6 -6" }) : /* @__PURE__ */ jsx("path", { d: "M9 6l6 6l-6 6" })
-    }
-  );
-}
 function IconGear() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -81,6 +75,31 @@ 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;
@@ -93,6 +112,15 @@ function NavLinkBody({ item, active }) {
     leftSection: item.icon,
     rightSection: item.badge ?? (item.count ? /* @__PURE__ */ jsx(NavCountBadge, { count: item.count }) : void 0),
     active,
+    // Basalt is the one that stamps `aria-current`, not the theme and not a router `<Link>`'s own
+    // default (which a consumer's `SidebarItem.Anchor` may compute independently) — mirrors
+    // `app-mobile-nav.tsx`'s identical pattern so both surfaces agree on what "active" means.
+    "aria-current": active ? "page" : void 0,
+    // `item.ancestor` (a parent on the winner's path — `useNav`'s exclusivity pass) is NEVER
+    // active and never carries `aria-current`; it only earns a `data-ancestor` hook for CSS. A
+    // leaf item never has `ancestor` set, so this is a no-op there — shared here rather than
+    // duplicated per render path.
+    ...item.ancestor === true && { "data-ancestor": true },
     ...item.onClick !== void 0 && { onClick: item.onClick }
   };
   if (Anchor) {
@@ -100,8 +128,36 @@ function NavLinkBody({ item, active }) {
   }
   return /* @__PURE__ */ jsx(NavLink, { component: "a", ...item.href !== void 0 && { href: item.href }, ...shared });
 }
-function SectionLabel({ children, flush }) {
-  return /* @__PURE__ */ jsx(Text, { component: "div", px: flush ? 0 : "xs", mb: flush ? 0 : 4, className: classes.sectionLabel, children });
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ jsx(Text, { component: "div", px: 0, mb: 0, className: classes.sectionLabel, children });
+}
+function NavSection({ section, collapsed }) {
+  const [folded, setFolded] = usePersistedFold(
+    sidebarSectionFoldKey(section.label),
+    Boolean(section.defaultCollapsed)
+  );
+  const items = section.items.map((item) => /* @__PURE__ */ jsx(NavItemRow, { item, collapsed }, item.key));
+  if (!section.collapsible) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: classes.sectionBand, children: /* @__PURE__ */ jsx(SectionLabel, { children: section.label }) }),
+      /* @__PURE__ */ jsx(Stack, { gap: 1, children: items })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      UnstyledButton,
+      {
+        className: `${classes.sectionBand} ${classes.sectionHeader}`,
+        onClick: () => setFolded(!folded),
+        "aria-expanded": !folded,
+        children: [
+          /* @__PURE__ */ jsx(SectionLabel, { children: section.label }),
+          /* @__PURE__ */ jsx(IconChevron, { open: !folded })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { expanded: !folded, children: /* @__PURE__ */ jsx(Stack, { gap: 1, children: items }) })
+  ] });
 }
 function NavItemRow({ item, collapsed }) {
   const [opened, { open, close }] = useDisclosure(false);
@@ -213,33 +269,51 @@ function AppSidebar({
   collapsed,
   onToggleCollapse,
   settingsMenuItems,
+  settingsMenu = "auto",
   account,
   search,
-  navExtra
+  blocks
 }) {
   const { step } = useBasaltSpacing();
-  const [collapsedSections, setCollapsedSections] = useState(
-    () => Object.fromEntries(sections.map((s) => [s.label, Boolean(s.defaultCollapsed)]))
+  const navBlocks = (blocks ?? []).filter((block) => sidebarBlockPlacement(block) === "nav");
+  const bottomBlocks = (blocks ?? []).filter((block) => sidebarBlockPlacement(block) === "bottom");
+  const railRing = bottomBlocks.find(
+    (block) => block.kind === "progress" && sidebarBlockRail(block) === "ring"
   );
-  const renderSectionItems = (section) => section.items.map((item) => /* @__PURE__ */ jsx(NavItemRow, { item, collapsed }, item.key));
-  const hasSettingsMenu = (settingsMenuItems?.length ?? 0) > 0;
-  const settingsRow = hasSettingsMenu ? /* @__PURE__ */ jsx(Group, { ...account ? {} : { className: classes.footer }, gap: "xs", wrap: "nowrap", children: /* @__PURE__ */ jsxs(Menu, { position: "right-start", withArrow: true, width: step.sidebarSettingsMenuWidth, zIndex: 500, children: [
+  const settingsItems = settingsMenuItems ?? [];
+  const versionLabel = brand.version !== void 0 ? `${brand.name} v${brand.version}` : void 0;
+  const ringMark = collapsed && railRing !== void 0 && railRing.kind === "progress" ? /* @__PURE__ */ jsx(SidebarProgressRing, { value: railRing.value, total: railRing.total }) : null;
+  const flatSettings = settingsMenu === "flat" || settingsMenu === "auto" && settingsItems.length <= FLAT_SETTINGS_MAX;
+  const settingsRow = settingsItems.length === 0 ? null : flatSettings ? /* @__PURE__ */ jsxs("div", { className: classes.footerLinks, children: [
+    settingsItems.map((entry, index) => /* @__PURE__ */ jsxs(
+      UnstyledButton,
+      {
+        className: classes.footerBtn,
+        onClick: entry.onClick,
+        "aria-label": entry.label,
+        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
+        ]
+      },
+      entry.key
+    )),
+    versionLabel !== void 0 && /* @__PURE__ */ jsx(Text, { component: "div", className: classes.footerVersion, children: versionLabel })
+  ] }) : /* @__PURE__ */ jsx(Group, { gap: "xs", wrap: "nowrap", children: /* @__PURE__ */ jsxs(Menu, { position: "right-start", withArrow: true, width: step.sidebarSettingsMenuWidth, zIndex: 500, children: [
     /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, { className: classes.footerBtn, "aria-label": "Settings", children: [
       /* @__PURE__ */ jsx(IconGear, {}),
-      /* @__PURE__ */ jsx(Text, { className: classes.footerText, fz: VX.text.md, children: "Settings" })
+      /* @__PURE__ */ jsx(Text, { className: classes.footerText, fz: VX.text.md, children: "Settings" }),
+      ringMark
     ] }) }),
     /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
-      settingsMenuItems?.map((entry) => /* @__PURE__ */ jsx(Menu.Item, { leftSection: entry.icon, onClick: entry.onClick, children: entry.label }, entry.key)),
-      brand.version && /* @__PURE__ */ jsxs(Fragment, { children: [
+      settingsItems.map((entry) => /* @__PURE__ */ jsx(Menu.Item, { leftSection: entry.icon, onClick: entry.onClick, children: entry.label }, entry.key)),
+      versionLabel !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Menu.Divider, {}),
-        /* @__PURE__ */ jsxs(Menu.Label, { children: [
-          brand.name,
-          " v",
-          brand.version
-        ] })
+        /* @__PURE__ */ jsx(Menu.Label, { children: versionLabel })
       ] })
     ] })
-  ] }) }) : null;
+  ] }) });
   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: [
@@ -253,7 +327,7 @@ function AppSidebar({
             style: { display: "block" }
           }
         ),
-        /* @__PURE__ */ jsx(Text, { className: classes.brandName, fz: VX.text.xl, fw: 550, children: brand.name })
+        /* @__PURE__ */ jsx(BrandName, { brand, menuWidth: step.sidebarAccountMenuWidth })
       ] }),
       /* @__PURE__ */ jsx(
         ActionIcon,
@@ -278,40 +352,15 @@ function AppSidebar({
         className: classes.navScroll,
         classNames: { viewport: classes.navViewport },
         children: /* @__PURE__ */ jsxs(Stack, { gap: 0, className: classes.nav, children: [
-          sections.map((section) => {
-            if (!section.collapsible) {
-              return /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { className: classes.sectionBand, children: /* @__PURE__ */ jsx(SectionLabel, { flush: true, children: section.label }) }),
-                /* @__PURE__ */ jsx(Stack, { gap: 1, children: renderSectionItems(section) })
-              ] }, section.label);
-            }
-            const isOpen = !collapsedSections[section.label];
-            return /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs(
-                UnstyledButton,
-                {
-                  className: `${classes.sectionBand} ${classes.sectionHeader}`,
-                  onClick: () => setCollapsedSections((prev) => ({
-                    ...prev,
-                    [section.label]: !prev[section.label]
-                  })),
-                  "aria-expanded": isOpen,
-                  children: [
-                    /* @__PURE__ */ jsx(SectionLabel, { flush: true, children: section.label }),
-                    /* @__PURE__ */ jsx(IconChevron, { open: isOpen })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(Collapse, { expanded: isOpen, children: /* @__PURE__ */ jsx(Stack, { gap: 1, children: renderSectionItems(section) }) })
-            ] }, section.label);
-          }),
-          navExtra !== void 0 && navExtra !== null && /* @__PURE__ */ jsx("div", { className: classes.navExtra, children: navExtra })
+          sections.map((section) => /* @__PURE__ */ jsx(NavSection, { section, collapsed }, section.label)),
+          navBlocks.map((block) => /* @__PURE__ */ jsx(SidebarBlockView, { block }, block.key))
         ] })
       }
     ),
-    account ? /* @__PURE__ */ jsxs(Stack, { gap: 0, className: classes.footer, children: [
+    (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,
-      /* @__PURE__ */ jsx(
+      account !== void 0 && /* @__PURE__ */ jsx(
         SidebarAccount,
         {
           state: account.state,
@@ -319,7 +368,7 @@ function AppSidebar({
           ...account.showEmail !== void 0 && { showEmail: account.showEmail }
         }
       )
-    ] }) : settingsRow
+    ] })
   ] });
 }
 export {