@neuronection/assistant-ui 0.13.1 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @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
+
+- [`d94e5a8`](https://github.com/neuronection/assistant-ui/commit/d94e5a82e3ddaa67e7157a8775b42347b2a6ecdb) Thanks [@constLiakos](https://github.com/constLiakos)! - `ModelRegistry` gains an app-supplied extra-field slot and a per-row enable
+  toggle. `extraFields` (`{ key, label, placeholder?, multiline? }[]`) renders
+  app-declared fields inside the add/edit modal — e.g. health-assistant's model
+  description — with the string values carried verbatim on
+  `Model.extra`/`Draft.extra`/`Patch.extra` (included in a patch only when the
+  user touched a field or the model already carried non-empty values).
+  `onToggleEnabled(model, enabled)` renders a native per-row checkbox
+  (`Enabled — <id>` accessible name, hidden for read-only providers) so apps can
+  persist the model's enabled flag from the row itself. Note: the visual
+  baseline for `model-registry--model-registry-story` needs a CI rebaseline.
+
+- [`4401664`](https://github.com/neuronection/assistant-ui/commit/4401664b46b0a76a70fbca4711c31f5277913982) Thanks [@constLiakos](https://github.com/constLiakos)! - `TaskAssignmentTask` gains `secondaryOnly` — renders ONLY the fallback picker
+  line for that row (Fallback badge + picker + info + clear, no primary line)
+  for tasks whose assignment itself is a fallback, e.g. an app's single global
+  default model; the value round-trips via `secondaryValue`/`onAssignSecondary`.
+  It implies `secondary`, so it works flat or inside a section without the
+  section-level flag.
+
+### Patch Changes
+
+- [`2e1fe5a`](https://github.com/neuronection/assistant-ui/commit/2e1fe5a0383d810cb01ed1d40c13dea30a7b9292) Thanks [@constLiakos](https://github.com/constLiakos)! - `ConnectionTestRow` wraps long error messages (`whitespace-pre-wrap` +
+  `break-words` instead of a single clipped line) so full provider API errors —
+  e.g. OpenAI's multi-line 400 payloads — stay readable in app cards.
+
+- [`6d6d6b4`](https://github.com/neuronection/assistant-ui/commit/6d6d6b4c4b8ea8fc73cfd1ff37956bbbe73e5aa2) Thanks [@constLiakos](https://github.com/constLiakos)! - `ModelRegistry` providers accept a `readOnly` flag: read-only providers render their model rows without the Edit/Remove controls and without the Add-model button — for org-managed providers the current user may not modify.
+
 ## 0.13.1
 
 ### Patch 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":";;;;;AAoCA,SAAS,eAAe,IAAA,EAAuB;AAC7C,EAAA,IAAI,CAAC,MAAM,OAAO,EAAA;AAClB,EAAA,MAAM,KAAA,GAAQ,KAAK,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA,CAAE,OAAO,OAAO,CAAA;AACrD,EAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,EAAA;AAC/B,EAAA,MAAM,QAAQ,KAAA,CAAM,CAAC,CAAA,EAAG,MAAA,CAAO,CAAC,CAAA,IAAK,EAAA;AACrC,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,MAAA,GAAS,CAAA,GAAK,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS,CAAC,CAAA,EAAG,MAAA,CAAO,CAAC,CAAA,IAAK,EAAA,GAAM,EAAA;AAC7E,EAAA,OAAA,CAAQ,KAAA,GAAQ,MAAM,WAAA,EAAY;AACpC;AAEA,SAAS,SAAA,GAAY;AACnB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAY,GAAA;AAAA,MACZ,aAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAe,OAAA;AAAA,MACf,SAAA,EAAU,QAAA;AAAA,MACV,aAAA,EAAW,IAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,YAAO,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,GAAA,EAAI,GAAE,GAAA,EAAI,CAAA;AAAA,wBAC7B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,6BAAA,EAA8B;AAAA;AAAA;AAAA,GACxC;AAEJ;AAEO,IAAM,QAAA,GAAiB,KAAA,CAAA,UAAA;AAAA,EAC5B,SAASA,SAAAA,CACP;AAAA,IACE,IAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA,GAAQ,KAAA;AAAA,IACR,MAAA;AAAA,IACA;AAAA,KAEF,GAAA,EACA;AACA,IAAA,MAAM,IAAA,GAAO,QAAA,IAAY,cAAA,CAAe,IAAI,CAAA;AAC5C,IAAA,MAAM,WAAA,GAAc,IAAA,KAAS,MAAA,IAAa,KAAA,KAAU,MAAA;AAEpD,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAQ,WAAA,EAAY,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA,EACvE,QAAA,kBAAA,IAAA,CAAC,IAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,YAAA,EAAY,QAAQ,QAAA,IAAY,gBAAA;AAAA,UAChC,eAAA,EAAc,MAAA;AAAA,UACd,SAAA,EAAU,qNAAA;AAAA,UAET,QAAA,EAAA;AAAA,YAAA,SAAA,mBACC,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,SAAA;AAAA,gBACL,GAAA,EAAI,EAAA;AAAA,gBACJ,SAAA,EAAU;AAAA;AAAA,aACZ,mBAEA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,aAAA,EAAW,IAAA;AAAA,gBACX,SAAA,EAAU,oIAAA;AAAA,gBAET,QAAA,EAAA,IAAA,wBAAS,SAAA,EAAA,EAAU;AAAA;AAAA,aACtB;AAAA,YAED,IAAA,IAAQ,KAAA,mBACP,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,+CAAA,EACb,QAAA,EAAA;AAAA,cAAA,IAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2DAAA,EACb,gBACH,CAAA,GACE,IAAA;AAAA,cACH,wBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,qDAAA,EACb,iBACH,CAAA,GACE;AAAA,aAAA,EACN,CAAA,GACE;AAAA;AAAA;AAAA,OACN;AAAA,2BACC,WAAA,EAAA,EAAY,KAAA,EAAc,UAAA,EAAY,CAAA,EAAG,WAAU,UAAA,EACjD,QAAA,EAAA;AAAA,QAAA,WAAA,mBACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,IAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gDAAA,EACb,gBACH,CAAA,GACE,IAAA;AAAA,YACH,wBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,4CAAA,EACb,iBACH,CAAA,GACE;AAAA,WAAA,EACN,CAAA;AAAA,8BACC,aAAA,EAAA,EAAc;AAAA,SAAA,EACjB,CAAA,GACE,IAAA;AAAA,QACH,KAAA,CAAM,GAAA;AAAA,UAAI,CAAC,IAAA,KACV,IAAA,CAAK,OAAA,KAAY,MAAA,mBACf,GAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cAEC,MAAM,IAAA,CAAK,IAAA;AAAA,cACX,MAAA,EAAQ,KAAK,IAAA,KAAS,QAAA;AAAA,cACtB,UAAU,IAAA,CAAK,QAAA;AAAA,cACf,SAAS,IAAA,CAAK,OAAA;AAAA,cACd,SAAS,IAAA,CAAK,OAAA;AAAA,cACd,QAAA,EAAU,MAAM,YAAA,CAAa,IAAA,CAAK,EAAE,CAAA;AAAA,cAEnC,QAAA,EAAA,IAAA,CAAK;AAAA,aAAA;AAAA,YARD,IAAA,CAAK;AAAA,WASZ,mBAEA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cAEC,MAAM,IAAA,CAAK,IAAA;AAAA,cACX,MAAA,EAAQ,KAAK,IAAA,KAAS,QAAA;AAAA,cACtB,UAAU,IAAA,CAAK,QAAA;AAAA,cACf,SAAS,IAAA,CAAK,OAAA;AAAA,cACd,QAAA,EAAU,MAAM,YAAA,CAAa,IAAA,CAAK,EAAE,CAAA;AAAA,cAEnC,QAAA,EAAA,IAAA,CAAK;AAAA,aAAA;AAAA,YAPD,IAAA,CAAK;AAAA;AAQZ;AAEJ,OAAA,EACF;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ;AACF","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"]}