@neuronection/assistant-ui 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @neuronection/assistant-ui
 
+## 0.15.0
+
+### Minor Changes
+
+- [`e7a75e3`](https://github.com/neuronection/assistant-ui/commit/e7a75e3a3970e01f7bdcaf9060f54abe145d5a27) Thanks [@constLiakos](https://github.com/constLiakos)! - ChipInput: the typed draft now renders as a dashed pending chip
+  (`data-pending` on the container while a draft exists) so it is visually
+  explicit that each entry is its own separate item, and a new `hint` prop
+  renders helper text below the field wired to the input via
+  `aria-describedby` — use it to spell out the "press Enter or Add after each
+  one" contract.
+
+- [`163e5e4`](https://github.com/neuronection/assistant-ui/commit/163e5e4f13d5a097dea56727447fe7e1070e3395) Thanks [@constLiakos](https://github.com/constLiakos)! - ScaleSlider: modern track + thumb (filled progress, larger thumb, visible
+  focus ring) via new `styles.css` range rules scoped to
+  `[data-as='scale-slider']`; low/high labels are larger and readable
+  (text-xs, medium weight, muted color) instead of 9px uppercase.
+
+  ChipInput: new `addLabel` prop renders an explicit add button that commits
+  the draft (disabled while empty, re-focuses the input) — makes the
+  multi-entry affordance discoverable without keyboard knowledge.
+
+- [`3826518`](https://github.com/neuronection/assistant-ui/commit/3826518fd86f03cbef56344bec9b34b2234086c9) Thanks [@constLiakos](https://github.com/constLiakos)! - New `SidebarNav` component: the family-standard vertical navigation panel
+  (groups + section dividers, icons, badges, controlled `activeId`, optional
+  collapsed icon rail with hover flyouts, header/footer slots). Fully
+  presentational + controlled per ADR-006 — routing, role filtering and i18n
+  stay app-side. Ships with keyboard-nav + axe assertions, Ladle stories and
+  a docs page; adoption across the family apps is tracked in the nav
+  primitives program (family ADR-0007).
+
+- [`3df9ac1`](https://github.com/neuronection/assistant-ui/commit/3df9ac1dbc90079cf1910e34bd213f63e700688b) Thanks [@constLiakos](https://github.com/constLiakos)! - `SidebarNav`: top-level `NavItem` entries now accept `section` — a divider
+  label rendered above the item (first occurrence only) so flat sidebars can
+  group their entries visually without nested expand/collapse. Sections are
+  ignored in the collapsed rail. (Career's sidebar adoption is the first
+  consumer; matches the existing child-level `section` dividers.)
+
+- [`3826518`](https://github.com/neuronection/assistant-ui/commit/3826518fd86f03cbef56344bec9b34b2234086c9) Thanks [@constLiakos](https://github.com/constLiakos)! - New `UserMenu` component: the family-standard user menu (avatar or
+  initials-disc trigger with name/email, identity header in the panel, item
+  model with `tone: 'danger'`, `pending`, and checkable items for
+  theme/language toggles). Built on the `Menu` primitives; also adds
+  `MenuCheckboxItem` (Radix checkbox menu item with an indicator) to the
+  menu module. Health's hand-rolled header dropdown and career's plain
+  sign-out button are the adoption targets (family ADR-0007 program).
+
 ## 0.14.0
 
 ### Minor Changes

package/README.md

@@ -86,6 +86,8 @@ Visual reference: [gallery](https://neuronection.github.io/assistant-ui/).
 | [`info-button`](./docs/components/info-button.md) / [`field-label`](./docs/components/field-label.md) / [`copy-button`](./docs/components/copy-button.md) / [`breadcrumbs`](./docs/components/breadcrumbs.md) | `InfoButton` · `FieldLabel` · `CopyButton` (clipboard + copied state) · `Breadcrumbs` (SPA links via `linkComponent`) | [stories](https://neuronection.github.io/assistant-ui/?story=phase2--copy-buttons) |
 | [`ai-button`](./docs/components/ai-button.md) / [`ai-actions-dropdown`](./docs/components/ai-actions-dropdown.md) / [`ai-magic-fill`](./docs/components/ai-magic-fill.md) | AI affordances: ask-with-suggestions (controlled open, icon-only mode) · action menu + custom prompt · describe-in-words fill modal — API calls stay app-side | [stories](https://neuronection.github.io/assistant-ui/?story=ai-patterns--ai-buttons) |
 | [`settings-shell`](./docs/components/settings-shell.md) / [`provider-form`](./docs/components/provider-form.md) / [`connection-test-row`](./docs/components/connection-test-row.md) | `SettingsShell` (controlled two-pane nav) · `ProviderForm` (write-only API-key field) · `ConnectionTestRow` (idle/testing/ok/fail + latency, `inline` variant + meta slot) | [stories](https://neuronection.github.io/assistant-ui/?story=settings-trio--provider-form-story) |
+| [`sidebar-nav`](./docs/components/sidebar-nav.md) | `SidebarNav` (family-standard vertical nav: groups + sections, badges, controlled active id, optional collapsed icon rail with hover flyouts, header/footer slots) | [stories](https://neuronection.github.io/assistant-ui/?story=sidebar-nav--groups-story) |
+| [`user-menu`](./docs/components/user-menu.md) | `UserMenu` (avatar/identity trigger + action menu incl. checkable items; composed over `Menu`) | [stories](https://neuronection.github.io/assistant-ui/?story=user-menu--checkable-items-story) |
 | [`model-picker`](./docs/components/model-picker.md) / [`task-assignment-picker`](./docs/components/task-assignment-picker.md) / [`capability-chips`](./docs/components/capability-chips.md) | `ModelPicker` (grouped provider→model combobox, capability chips) · `TaskAssignmentPicker` (task → model mapping rows, capability-filtered, sections + fallback assignment, meta slot) · `CapabilityChips` (cap toggle group / badges, min-selected) | [stories](https://neuronection.github.io/assistant-ui/?story=model-assignment--task-assignment-v2-story) |
 | [`model-registry`](./docs/components/model-registry.md) | `ModelRegistry` (provider cards → registered model rows; add/edit in one catalog modal fed by app-fetched remote models; manual id entry; add-all of pending ids) | [stories](https://neuronection.github.io/assistant-ui/?story=model-registry--model-registry-story) |
 | [`upload-dropzone`](./docs/components/upload-dropzone.md) / [`file-card`](./docs/components/file-card.md) / [`file-queue`](./docs/components/file-queue.md) | file attachment surface: dropzone (block/row) · card (status, include toggle) · queue (summary + reorder) | [stories](https://neuronection.github.io/assistant-ui/?story=file-surface--dropzones) |

package/dist/chip-input.d.ts

@@ -7,6 +7,8 @@ interface ChipInputProps extends Omit<React.ComponentProps<'div'>, 'onChange'> {
     separators?: string[];
     inputLabel?: string;
     removeLabel?: string;
+    addLabel?: string;
+    hint?: string;
     disabled?: boolean;
 }
 declare const ChipInput: React.ForwardRefExoticComponent<Omit<ChipInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/chip-input.js

@@ -1,3 +1,3 @@
-export { ChipInput } from './chunk-TPLQL62V.js';
+export { ChipInput } from './chunk-HIRR2F4R.js';
 //# sourceMappingURL=chip-input.js.map
 //# sourceMappingURL=chip-input.js.map

package/dist/chunk-535TM7SK.js

@@ -0,0 +1,119 @@
+import { Menu, MenuTrigger, MenuContent, MenuSeparator, MenuCheckboxItem, MenuItem } from './chunk-XSJ3TWWZ.js';
+import { cn } from './chunk-BLJWR4ZV.js';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function deriveInitials(name) {
+  if (!name) return "";
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  const first = parts[0]?.charAt(0) ?? "";
+  const last = parts.length > 1 ? parts[parts.length - 1]?.charAt(0) ?? "" : "";
+  return (first + last).toUpperCase();
+}
+function UserGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "size-4",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "4" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 21c0-4 3.6-6 8-6s8 2 8 6" })
+      ]
+    }
+  );
+}
+var UserMenu = React.forwardRef(
+  function UserMenu2({
+    name,
+    email,
+    avatarUrl,
+    initials,
+    items,
+    onItemSelect,
+    align = "end",
+    labels,
+    className
+  }, ref) {
+    const disc = initials ?? deriveInitials(name);
+    const hasIdentity = name !== void 0 || email !== void 0;
+    return /* @__PURE__ */ jsx("div", { ref, "data-as": "user-menu", className: cn("inline-flex", className), children: /* @__PURE__ */ jsxs(Menu, { children: [
+      /* @__PURE__ */ jsxs(
+        MenuTrigger,
+        {
+          type: "button",
+          "aria-label": labels?.openMenu ?? "Open user menu",
+          "aria-haspopup": "menu",
+          className: "flex cursor-pointer items-center gap-2.5 rounded-full p-1 pr-3 transition-colors hover:bg-[var(--as-secondary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-focus-ring)]",
+          children: [
+            avatarUrl ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: avatarUrl,
+                alt: "",
+                className: "size-8 shrink-0 rounded-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-[var(--as-primary)] text-xs font-bold text-[var(--as-primary-fg)]",
+                children: disc || /* @__PURE__ */ jsx(UserGlyph, {})
+              }
+            ),
+            name || email ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col text-left leading-tight", children: [
+              name ? /* @__PURE__ */ jsx("span", { className: "max-w-40 truncate text-sm font-medium text-[var(--as-fg)]", children: name }) : null,
+              email ? /* @__PURE__ */ jsx("span", { className: "max-w-40 truncate text-xs text-[var(--as-muted-fg)]", children: email }) : null
+            ] }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(MenuContent, { align, sideOffset: 8, className: "min-w-48", children: [
+        hasIdentity ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-2 py-1.5", children: [
+            name ? /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-bold text-[var(--as-fg)]", children: name }) : null,
+            email ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-[var(--as-muted-fg)]", children: email }) : null
+          ] }),
+          /* @__PURE__ */ jsx(MenuSeparator, {})
+        ] }) : null,
+        items.map(
+          (item) => item.checked !== void 0 ? /* @__PURE__ */ jsx(
+            MenuCheckboxItem,
+            {
+              icon: item.icon,
+              danger: item.tone === "danger",
+              disabled: item.disabled,
+              pending: item.pending,
+              checked: item.checked,
+              onSelect: () => onItemSelect(item.id),
+              children: item.label
+            },
+            item.id
+          ) : /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: item.icon,
+              danger: item.tone === "danger",
+              disabled: item.disabled,
+              pending: item.pending,
+              onSelect: () => onItemSelect(item.id),
+              children: item.label
+            },
+            item.id
+          )
+        )
+      ] })
+    ] }) });
+  }
+);
+
+export { UserMenu };
+//# sourceMappingURL=chunk-535TM7SK.js.map
+//# sourceMappingURL=chunk-535TM7SK.js.map

package/dist/chunk-535TM7SK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/user-menu/UserMenu.tsx"],"names":["UserMenu"],"mappings":"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","file":"chunk-535TM7SK.js","sourcesContent":["import * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport {\n  Menu,\n  MenuCheckboxItem,\n  MenuContent,\n  MenuItem,\n  MenuSeparator,\n  MenuTrigger,\n} from '../menu/Menu'\nimport { cn } from '../../lib/utils'\n\nexport interface UserMenuItem {\n  id: string\n  label: string\n  icon?: LucideIcon\n  tone?: 'default' | 'danger'\n  disabled?: boolean\n  pending?: boolean\n  /** Renders as a checkable item (aria-checked) — e.g. theme/language toggles. */\n  checked?: boolean\n}\n\nexport interface UserMenuProps {\n  name?: string\n  email?: string\n  avatarUrl?: string\n  /** Fallback disc text when no avatarUrl; derived from `name` when omitted. */\n  initials?: string\n  items: UserMenuItem[]\n  onItemSelect: (id: string) => void\n  align?: 'start' | 'end'\n  labels?: { openMenu?: string }\n  className?: string\n}\n\nfunction deriveInitials(name?: string): string {\n  if (!name) return ''\n  const parts = name.trim().split(/\\s+/).filter(Boolean)\n  if (parts.length === 0) return ''\n  const first = parts[0]?.charAt(0) ?? ''\n  const last = parts.length > 1 ? (parts[parts.length - 1]?.charAt(0) ?? '') : ''\n  return (first + last).toUpperCase()\n}\n\nfunction UserGlyph() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-4\"\n      aria-hidden\n    >\n      <circle cx=\"12\" cy=\"8\" r=\"4\" />\n      <path d=\"M4 21c0-4 3.6-6 8-6s8 2 8 6\" />\n    </svg>\n  )\n}\n\nexport const UserMenu = React.forwardRef<HTMLDivElement, UserMenuProps>(\n  function UserMenu(\n    {\n      name,\n      email,\n      avatarUrl,\n      initials,\n      items,\n      onItemSelect,\n      align = 'end',\n      labels,\n      className,\n    },\n    ref,\n  ) {\n    const disc = initials ?? deriveInitials(name)\n    const hasIdentity = name !== undefined || email !== undefined\n\n    return (\n      <div ref={ref} data-as=\"user-menu\" className={cn('inline-flex', className)}>\n        <Menu>\n          <MenuTrigger\n            type=\"button\"\n            aria-label={labels?.openMenu ?? 'Open user menu'}\n            aria-haspopup=\"menu\"\n            className=\"flex cursor-pointer items-center gap-2.5 rounded-full p-1 pr-3 transition-colors hover:bg-[var(--as-secondary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-focus-ring)]\"\n          >\n            {avatarUrl ? (\n              <img\n                src={avatarUrl}\n                alt=\"\"\n                className=\"size-8 shrink-0 rounded-full object-cover\"\n              />\n            ) : (\n              <span\n                aria-hidden\n                className=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-[var(--as-primary)] text-xs font-bold text-[var(--as-primary-fg)]\"\n              >\n                {disc || <UserGlyph />}\n              </span>\n            )}\n            {name || email ? (\n              <span className=\"flex min-w-0 flex-col text-left leading-tight\">\n                {name ? (\n                  <span className=\"max-w-40 truncate text-sm font-medium text-[var(--as-fg)]\">\n                    {name}\n                  </span>\n                ) : null}\n                {email ? (\n                  <span className=\"max-w-40 truncate text-xs text-[var(--as-muted-fg)]\">\n                    {email}\n                  </span>\n                ) : null}\n              </span>\n            ) : null}\n          </MenuTrigger>\n          <MenuContent align={align} sideOffset={8} className=\"min-w-48\">\n            {hasIdentity ? (\n              <>\n                <div className=\"flex flex-col px-2 py-1.5\">\n                  {name ? (\n                    <span className=\"truncate text-sm font-bold text-[var(--as-fg)]\">\n                      {name}\n                    </span>\n                  ) : null}\n                  {email ? (\n                    <span className=\"truncate text-xs text-[var(--as-muted-fg)]\">\n                      {email}\n                    </span>\n                  ) : null}\n                </div>\n                <MenuSeparator />\n              </>\n            ) : null}\n            {items.map((item) =>\n              item.checked !== undefined ? (\n                <MenuCheckboxItem\n                  key={item.id}\n                  icon={item.icon}\n                  danger={item.tone === 'danger'}\n                  disabled={item.disabled}\n                  pending={item.pending}\n                  checked={item.checked}\n                  onSelect={() => onItemSelect(item.id)}\n                >\n                  {item.label}\n                </MenuCheckboxItem>\n              ) : (\n                <MenuItem\n                  key={item.id}\n                  icon={item.icon}\n                  danger={item.tone === 'danger'}\n                  disabled={item.disabled}\n                  pending={item.pending}\n                  onSelect={() => onItemSelect(item.id)}\n                >\n                  {item.label}\n                </MenuItem>\n              ),\n            )}\n          </MenuContent>\n        </Menu>\n      </div>\n    )\n  },\n)\n"]}

package/dist/chunk-EZTQMJ5I.js

@@ -0,0 +1,428 @@
+import { cn } from './chunk-BLJWR4ZV.js';
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { ChevronRight, ChevronLeft, ChevronDown } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var FLYOUT_DELAY_MS = 150;
+var itemButtonClass = (active) => cn(
+  "flex w-full cursor-pointer items-center gap-3 rounded-[var(--as-radius)] px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)] disabled:pointer-events-none disabled:opacity-50",
+  active ? "bg-[color-mix(in_srgb,var(--as-primary)_12%,transparent)] font-bold text-[var(--as-primary)]" : "font-medium text-[var(--as-fg)] hover:bg-[var(--as-muted)]"
+);
+var flyoutContentClass = "as-anim-pop z-[var(--as-z-popover)] min-w-44 rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface-raised)] p-1 text-[var(--as-fg)] shadow-[var(--as-shadow-3)] focus:outline-none";
+function Badge({ value, active }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 py-0.5 text-[11px] font-bold leading-none",
+        active ? "bg-[var(--as-primary)] text-[var(--as-primary-fg)]" : "bg-[var(--as-muted)] text-[var(--as-muted-fg)]"
+      ),
+      children: value
+    }
+  );
+}
+function ItemBadge({ badge, active }) {
+  if (badge === void 0) return null;
+  return /* @__PURE__ */ jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsx(Badge, { value: badge, active }) });
+}
+var SidebarNav = React.forwardRef(
+  function SidebarNav2({
+    items,
+    activeId,
+    onNavigate,
+    collapsed = false,
+    onCollapsedChange,
+    collapsible = false,
+    expandedIds,
+    onExpandedIdsChange,
+    header,
+    footer,
+    labels,
+    className,
+    navClassName
+  }, ref) {
+    const baseId = React.useId();
+    const listRef = React.useRef(null);
+    const flyoutTimer = React.useRef(null);
+    const [openFlyout, setOpenFlyout] = React.useState(null);
+    const [internalExpanded, setInternalExpanded] = React.useState([]);
+    const controlledExpanded = expandedIds !== void 0 && onExpandedIdsChange !== void 0;
+    const expanded = controlledExpanded ? expandedIds : internalExpanded;
+    const setExpandedList = React.useCallback(
+      (next) => {
+        if (controlledExpanded) onExpandedIdsChange?.(next);
+        else setInternalExpanded(next);
+      },
+      [controlledExpanded, onExpandedIdsChange]
+    );
+    const toggleGroup = React.useCallback(
+      (id) => {
+        setExpandedList(
+          expanded.includes(id) ? expanded.filter((g) => g !== id) : [...expanded, id]
+        );
+      },
+      [expanded, setExpandedList]
+    );
+    React.useEffect(() => {
+      if (controlledExpanded || activeId == null) return;
+      const owner = items.find((it) => it.children?.some((c) => c.id === activeId));
+      if (owner && !expanded.includes(owner.id)) {
+        setExpandedList([...expanded, owner.id]);
+      }
+    }, [activeId, items, controlledExpanded]);
+    React.useEffect(() => {
+      return () => {
+        if (flyoutTimer.current) clearTimeout(flyoutTimer.current);
+      };
+    }, []);
+    const flyoutEnter = (id) => {
+      if (flyoutTimer.current) clearTimeout(flyoutTimer.current);
+      flyoutTimer.current = setTimeout(() => setOpenFlyout(id), FLYOUT_DELAY_MS);
+    };
+    const flyoutLeave = () => {
+      if (flyoutTimer.current) clearTimeout(flyoutTimer.current);
+      flyoutTimer.current = setTimeout(() => setOpenFlyout(null), FLYOUT_DELAY_MS);
+    };
+    const flyoutEnterCancel = () => {
+      if (flyoutTimer.current) clearTimeout(flyoutTimer.current);
+    };
+    const navigate = (id) => {
+      setOpenFlyout(null);
+      onNavigate?.(id);
+    };
+    const visibleItems = () => {
+      const list = listRef.current;
+      if (!list) return [];
+      return Array.from(
+        list.querySelectorAll("[data-as-nav-item]")
+      ).filter((el) => el.closest("[hidden]") === null);
+    };
+    const focusSibling = (current, offset) => {
+      const all = visibleItems();
+      const index = all.indexOf(current);
+      if (index === -1) return;
+      const next = all[Math.min(Math.max(index + offset, 0), all.length - 1)];
+      next?.focus();
+    };
+    const handleFlyoutArrowKeys = (e) => {
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+      e.preventDefault();
+      const buttons = Array.from(
+        e.currentTarget.querySelectorAll(
+          "button[data-as-flyout-item]:not([disabled])"
+        )
+      );
+      const index = buttons.indexOf(document.activeElement);
+      const step = e.key === "ArrowDown" ? 1 : buttons.length - 1;
+      buttons[(index + step) % buttons.length]?.focus();
+    };
+    const groupTriggerFor = (id) => Array.from(
+      listRef.current?.querySelectorAll(
+        "[data-as-nav-group-id]"
+      ) ?? []
+    ).find((b) => b.dataset.asNavGroupId === id);
+    const firstChildFor = (id) => Array.from(
+      listRef.current?.querySelectorAll(
+        "[data-as-nav-parent-id]"
+      ) ?? []
+    ).find((b) => b.dataset.asNavParentId === id && !b.disabled);
+    const handleListKeyDown = (e) => {
+      const button = e.target.closest(
+        "[data-as-nav-item]"
+      );
+      if (!button) return;
+      const groupId = button.dataset.asNavGroupId;
+      const parentId = button.dataset.asNavParentId;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          focusSibling(button, 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          focusSibling(button, -1);
+          break;
+        case "Home": {
+          e.preventDefault();
+          visibleItems()[0]?.focus();
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const all = visibleItems();
+          all[all.length - 1]?.focus();
+          break;
+        }
+        case "ArrowRight":
+          if (groupId) {
+            e.preventDefault();
+            if (!expanded.includes(groupId)) {
+              setExpandedList([...expanded, groupId]);
+            } else {
+              firstChildFor(groupId)?.focus();
+            }
+          }
+          break;
+        case "ArrowLeft":
+          if (parentId) {
+            e.preventDefault();
+            groupTriggerFor(parentId)?.focus();
+          } else if (groupId && expanded.includes(groupId)) {
+            e.preventDefault();
+            toggleGroup(groupId);
+          }
+          break;
+      }
+    };
+    const navAria = labels?.navAria ?? "Main navigation";
+    const rail = collapsed;
+    const flyoutHeader = (text) => /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--as-border)] px-2 py-1.5 text-xs font-bold text-[var(--as-muted-fg)]", children: text });
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "data-as": "sidebar-nav",
+        "aria-label": navAria,
+        className: cn(
+          "relative flex h-full flex-col border-r border-[var(--as-border)] bg-[var(--as-surface)] text-[var(--as-fg)] transition-[width] duration-200",
+          rail ? "w-20" : "w-64",
+          className
+        ),
+        children: [
+          collapsible ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 -right-3 z-10 hidden flex-col justify-center lg:flex", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onCollapsedChange?.(!collapsed),
+              title: collapsed ? labels?.expand ?? "Expand sidebar" : labels?.collapse ?? "Collapse sidebar",
+              "aria-label": collapsed ? labels?.expand ?? "Expand sidebar" : labels?.collapse ?? "Collapse sidebar",
+              className: "pointer-events-auto flex size-6 items-center justify-center rounded-lg border border-[var(--as-border)] bg-[var(--as-surface-raised)] text-[var(--as-muted-fg)] shadow-[var(--as-shadow-2)] transition-colors hover:text-[var(--as-fg)] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]",
+              children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5", "aria-hidden": true })
+            }
+          ) }) : null,
+          header ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: header }) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: listRef,
+              onKeyDown: handleListKeyDown,
+              className: cn("min-h-0 flex-1 overflow-y-auto px-3 py-3", navClassName),
+              children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: items.map((item, index) => {
+                if (item.children !== void 0 && item.children.length === 0) {
+                  return null;
+                }
+                const sectionSeen = !rail && item.section !== void 0 && items.findIndex((i) => i.section === item.section) === index;
+                const sectionDivider = sectionSeen ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "presentation",
+                    className: "mt-2 border-t border-[var(--as-border)] px-3 pb-1 pt-3 text-[11px] font-bold uppercase tracking-wide text-[var(--as-muted-fg)]",
+                    children: item.section
+                  }
+                ) : null;
+                const active = item.id === activeId;
+                const childActive = item.children?.some((c) => c.id === activeId) ?? false;
+                const isExpanded = expanded.includes(item.id);
+                const Icon = item.icon;
+                const groupId = `${baseId}-group-${item.id}`;
+                if (item.children && item.children.length > 0 && rail) {
+                  return /* @__PURE__ */ jsxs("li", { children: [
+                    sectionDivider,
+                    /* @__PURE__ */ jsxs(
+                      PopoverPrimitive.Root,
+                      {
+                        open: openFlyout === item.id,
+                        onOpenChange: (open) => {
+                          if (!open) setOpenFlyout(null);
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              "data-as-nav-item": true,
+                              "data-as-nav-group-id": item.id,
+                              disabled: item.disabled,
+                              "aria-label": labels?.openGroup ?? `Open ${item.label} menu`,
+                              "aria-haspopup": "true",
+                              "aria-expanded": openFlyout === item.id,
+                              onClick: () => setOpenFlyout(item.id),
+                              onKeyDown: (e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                  e.preventDefault();
+                                  setOpenFlyout(item.id);
+                                }
+                              },
+                              onMouseEnter: () => flyoutEnter(item.id),
+                              onMouseLeave: flyoutLeave,
+                              className: cn(itemButtonClass(active || childActive), "justify-center px-0"),
+                              children: Icon ? /* @__PURE__ */ jsx(
+                                Icon,
+                                {
+                                  className: cn(
+                                    "size-5 shrink-0",
+                                    active || childActive ? "text-[var(--as-primary)]" : "text-[var(--as-muted-fg)]"
+                                  ),
+                                  "aria-hidden": true
+                                }
+                              ) : null
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+                            PopoverPrimitive.Content,
+                            {
+                              side: "right",
+                              sideOffset: 8,
+                              "aria-label": item.label,
+                              onCloseAutoFocus: (e) => {
+                                e.preventDefault();
+                                groupTriggerFor(item.id)?.focus();
+                              },
+                              onMouseEnter: flyoutEnterCancel,
+                              onMouseLeave: flyoutLeave,
+                              onKeyDown: handleFlyoutArrowKeys,
+                              className: flyoutContentClass,
+                              children: [
+                                flyoutHeader(item.label),
+                                /* @__PURE__ */ jsx("ul", { className: "mt-1 space-y-0.5", children: item.children.map((child) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    "data-as-flyout-item": true,
+                                    disabled: child.disabled,
+                                    onClick: () => navigate(child.id),
+                                    "aria-current": child.id === activeId ? "page" : void 0,
+                                    className: cn(
+                                      "flex w-full cursor-pointer items-center gap-2 rounded-[calc(var(--as-radius-sm)-2px)] px-2 py-1.5 text-left text-sm outline-none transition-colors focus:bg-[var(--as-secondary)] disabled:pointer-events-none disabled:opacity-50",
+                                      child.id === activeId && "font-bold text-[var(--as-primary)]"
+                                    ),
+                                    children: [
+                                      child.icon ? /* @__PURE__ */ jsx(child.icon, { "aria-hidden": true }) : null,
+                                      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: child.label }),
+                                      /* @__PURE__ */ jsx(ItemBadge, { badge: child.badge, active: child.id === activeId })
+                                    ]
+                                  }
+                                ) }, child.id)) })
+                              ]
+                            }
+                          ) })
+                        ]
+                      }
+                    )
+                  ] }, item.id);
+                }
+                if (item.children && item.children.length > 0) {
+                  return /* @__PURE__ */ jsxs("li", { children: [
+                    sectionDivider,
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        "data-as-nav-item": true,
+                        "data-as-nav-group-id": item.id,
+                        disabled: item.disabled,
+                        "aria-expanded": isExpanded,
+                        "aria-controls": groupId,
+                        onClick: () => toggleGroup(item.id),
+                        className: itemButtonClass(active || childActive),
+                        children: [
+                          Icon ? /* @__PURE__ */ jsx(
+                            Icon,
+                            {
+                              className: cn(
+                                "size-4 shrink-0",
+                                active || childActive ? "text-[var(--as-primary)]" : "text-[var(--as-muted-fg)]"
+                              ),
+                              "aria-hidden": true
+                            }
+                          ) : null,
+                          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+                          /* @__PURE__ */ jsx(ItemBadge, { badge: item.badge, active: active || childActive }),
+                          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-[var(--as-muted-fg)]", "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-[var(--as-muted-fg)]", "aria-hidden": true })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("ul", { id: groupId, hidden: !isExpanded, className: "mt-1 space-y-0.5 pl-6", children: item.children.map((child) => {
+                      const childActiveItem = child.id === activeId;
+                      const ChildIcon = child.icon;
+                      const sectionSeen2 = child.section !== void 0 && item.children.findIndex(
+                        (c) => c.section === child.section
+                      ) === item.children.indexOf(child);
+                      return /* @__PURE__ */ jsxs("li", { children: [
+                        sectionSeen2 ? /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            role: "presentation",
+                            className: "mt-2 border-t border-[var(--as-border)] px-3 pb-1 pt-3 text-[11px] font-bold uppercase tracking-wide text-[var(--as-muted-fg)]",
+                            children: child.section
+                          }
+                        ) : null,
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            "data-as-nav-item": true,
+                            "data-as-nav-parent-id": item.id,
+                            disabled: child.disabled,
+                            "aria-current": childActiveItem ? "page" : void 0,
+                            onClick: () => navigate(child.id),
+                            className: cn(
+                              itemButtonClass(childActiveItem),
+                              "py-2 pl-3 pr-2"
+                            ),
+                            children: [
+                              ChildIcon ? /* @__PURE__ */ jsx(ChildIcon, { className: "size-4 shrink-0", "aria-hidden": true }) : null,
+                              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: child.label }),
+                              /* @__PURE__ */ jsx(ItemBadge, { badge: child.badge, active: childActiveItem })
+                            ]
+                          }
+                        )
+                      ] }, child.id);
+                    }) })
+                  ] }, item.id);
+                }
+                return /* @__PURE__ */ jsxs("li", { children: [
+                  sectionDivider,
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "data-as-nav-item": true,
+                      disabled: item.disabled,
+                      title: rail ? item.label : void 0,
+                      "aria-label": rail ? item.label : void 0,
+                      "aria-current": active ? "page" : void 0,
+                      onClick: () => navigate(item.id),
+                      className: cn(itemButtonClass(active), rail && "justify-center px-0"),
+                      children: [
+                        Icon ? /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            className: cn(
+                              "shrink-0",
+                              rail ? "size-5" : "size-4",
+                              active ? "text-[var(--as-primary)]" : "text-[var(--as-muted-fg)]"
+                            ),
+                            "aria-hidden": true
+                          }
+                        ) : null,
+                        !rail ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }) : null,
+                        !rail ? /* @__PURE__ */ jsx(ItemBadge, { badge: item.badge, active }) : null
+                      ]
+                    }
+                  )
+                ] }, item.id);
+              }) })
+            }
+          ),
+          footer ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-[var(--as-border)] p-3", children: footer }) : null
+        ]
+      }
+    );
+  }
+);
+
+export { SidebarNav };
+//# sourceMappingURL=chunk-EZTQMJ5I.js.map
+//# sourceMappingURL=chunk-EZTQMJ5I.js.map