@crewlethq/ui 0.17.0 → 0.18.0

package/dist/TimeWindowPicker/index.js

@@ -1,13 +1,13 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-JF7X673Z.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-ERV5BUS3.js';
 import '../chunk-FC4YTTFJ.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-4GB57WIT.js';
+import '../chunk-BWRGFKJP.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-BWRGFKJP.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Timeline/Timeline.d.ts

@@ -38,8 +38,13 @@ export interface TimelineItemProps extends LiHTMLAttributes<HTMLLIElement> {
      * numbered ledger wants; a glyph where the step has an identity of its own.
      */
     marker?: ReactNode;
-    /** Overrides the hidden label, for a step whose name is not its number. */
-    label?: string | undefined;
+    /**
+     * Overrides the hidden label, for a step whose name is not its number.
+     * `false` draws no hidden label at all, for an item whose own content
+     * already says what it is: a hidden "Version 12" in front of a visible
+     * "Version 12" is read twice.
+     */
+    label?: string | false | undefined;
 }
 /**
  * One step.

package/dist/Timeline/index.js

@@ -1,3 +1,3 @@
-export { Timeline, TimelineItem } from '../chunk-O67VF5MS.js';
+export { Timeline, TimelineItem } from '../chunk-AUQPBL4O.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/VersionTimeline/VersionTimeline.d.ts

@@ -0,0 +1,76 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type Principal } from '../Principal/index.js';
+import { type TimeValue } from '../RelativeTime/index.js';
+/**
+ * What made a version.
+ *
+ * A schema or a capability change has a row of its own, because it changes
+ * what the page CAN DO rather than what it shows. A restore is a publish of an
+ * old version as a new one, never a rewrite of history, so it names the
+ * version it brought back.
+ */
+export type VersionKind = 'publish' | 'restore' | 'schema' | 'capabilities';
+export interface VersionItem {
+    version: number;
+    kind?: VersionKind | undefined;
+    /** A name somebody gave this version ("Review draft"). */
+    label?: string | undefined;
+    /** What changed, in the author's words or the engine's ("Added totals row"). */
+    summary?: string | undefined;
+    author: Principal;
+    at: TimeValue;
+    /** Where it came from: a task and a turn, as a link or as words. */
+    source?: ReactNode;
+    /** For a restore: the version it brought back. */
+    restoredFrom?: number | undefined;
+}
+export interface VersionTimelineLabels {
+    list: string;
+    version: (version: number) => string;
+    latest: string;
+    publish: string;
+    restore: (from: number | undefined) => string;
+    schema: string;
+    capabilities: string;
+    compare: string;
+    /** The compare control's accessible name; it is a toggle, pressed while this version is compared. */
+    compareWith: (version: number) => string;
+    restoreAction: string;
+    restoreVersion: (version: number) => string;
+    labelAction: string;
+    labelVersion: (version: number) => string;
+    /** The line for versions the engine no longer keeps, given the oldest it does. */
+    retention: (oldestKept: number) => string;
+}
+export interface VersionTimelineProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect'> {
+    /** Newest first. */
+    versions: readonly VersionItem[];
+    /** The newest version. The highest one listed when left out. */
+    latest?: number | undefined;
+    /** The version on show. */
+    selected: number;
+    /** The version the one on show is compared with, if any. */
+    against?: number | undefined;
+    onSelect: (version: number) => void;
+    /** Compares the version on show with this one; `null` stops comparing. Without it there is no compare control. */
+    onCompare?: ((version: number | null) => void) | undefined;
+    /** Publishes this version again as a new one. Without it there is no restore control. */
+    onRestore?: ((version: number) => void) | undefined;
+    /** Names this version. Without it there is no name control. */
+    onLabel?: ((version: number) => void) | undefined;
+    /** The oldest version the engine still keeps; anything below it is said to be past retention. */
+    oldestKept?: number | undefined;
+    /** Overrides the shared clock, for a story or a suite. */
+    now?: number | undefined;
+    labels?: Partial<VersionTimelineLabels> | undefined;
+}
+/**
+ * An artifact's versions, newest first, with the one on show and the one it is
+ * compared with marked.
+ *
+ * SELECTING IS NOT RESTORING. Choosing a row shows that version; Restore is a
+ * separate control, and it publishes the old version as a new one, so nothing
+ * a reader does here rewrites history. The newest version offers no Restore,
+ * because it is already what everybody sees.
+ */
+export declare function VersionTimeline({ versions, latest, selected, against, onSelect, onCompare, onRestore, onLabel, oldestKept, now, labels, className, ...rest }: VersionTimelineProps): import("react").JSX.Element;

package/dist/VersionTimeline/index.d.ts

@@ -0,0 +1,3 @@
+import './VersionTimeline.css';
+export { VersionTimeline } from './VersionTimeline.js';
+export type { VersionItem, VersionKind, VersionTimelineLabels, VersionTimelineProps } from './VersionTimeline.js';

package/dist/VersionTimeline/index.js

@@ -0,0 +1,10 @@
+export { VersionTimeline } from '../chunk-WXAULPBH.js';
+import '../chunk-AUQPBL4O.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4KP4RC3O.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/VersionTimeline-EBJ6MIPJ.css

@@ -0,0 +1,108 @@
+/*
+ * A version list beside the version on show. The row's main line is the
+ * button that shows it; the controls sit under the facts, so a reader scanning
+ * the list reads numbers and names rather than a column of buttons.
+ */
+
+.crewlet-version-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-version-timeline__select {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.crewlet-version-timeline__select:hover {
+  background: var(--color-surface-hover);
+}
+
+/* The version on show. The accent means "where the reader is", which is
+   exactly what this row is. */
+.crewlet-version-timeline__select[aria-current='true'] {
+  background: var(--color-brand-accent-soft);
+  box-shadow: inset 2px 0 0 var(--color-brand-accent);
+}
+
+.crewlet-version-timeline__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--spacing-2);
+}
+
+.crewlet-version-timeline__number {
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-version-timeline__latest,
+.crewlet-version-timeline__label {
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-version-timeline__latest {
+  background: var(--color-surface-inset);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-version-timeline__label {
+  border: 1px solid var(--color-border-default);
+  color: var(--color-text-primary);
+}
+
+.crewlet-version-timeline__summary {
+  color: var(--color-text-secondary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-version-timeline__meta,
+.crewlet-version-timeline__source {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding-inline: var(--spacing-2);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-version-timeline__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+  padding-inline: var(--spacing-1);
+}
+
+/* The version compared against carries the same edge in the strong neutral:
+   it is the other side of the comparison, not where the reader is, so it does
+   not take the accent. */
+.is-compared > .crewlet-timeline__body > .crewlet-version-timeline__select {
+  box-shadow: inset 2px 0 0 var(--color-border-strong);
+}
+
+.crewlet-version-timeline__gap {
+  margin: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-md);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}

package/dist/{chunk-SBRE7IML.js → chunk-2ONWEDQT.js}

@@ -1,4 +1,4 @@
-import { useThemePreference, useDensityPreference } from './chunk-K3OWD7BJ.js';
+import { useThemePreference, useDensityPreference } from './chunk-Z24ZUSTX.js';
 import { SegmentedControl } from './chunk-26PEPONN.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';

package/dist/chunk-2YR5ZPQ3.js

@@ -0,0 +1,216 @@
+import { Select } from './chunk-FC4YTTFJ.js';
+import { Modal } from './chunk-2TZATTIU.js';
+import { CopyButton } from './chunk-W46LPU4R.js';
+import { Callout } from './chunk-SVSCLHHI.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ShareDialog-YZ4F37MW.css';
+import { useState, useId } from 'react';
+import { breakpoint } from '@crewlethq/tokens';
+import { XGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/ShareDialog/roles.ts
+var ARTIFACT_ROLES = ["viewer", "commenter", "contributor", "editor", "owner"];
+var SHAREABLE_ROLES = ["viewer", "commenter", "contributor", "editor"];
+function roleAtLeast(role, floor) {
+  return ARTIFACT_ROLES.indexOf(role) >= ARTIFACT_ROLES.indexOf(floor);
+}
+var AGENT_CAN = {
+  viewer: "read this artifact in its turns",
+  commenter: "read this artifact and comment on it in its turns",
+  contributor: "read this artifact in its turns and edit its data",
+  editor: "read this artifact, edit its data and publish versions in its turns",
+  owner: "read, edit, publish and share this artifact in its turns"
+};
+var LABELS = {
+  title: (artifact) => `Share "${artifact}"`,
+  addRole: "Role for people you add",
+  audience: "Who has access",
+  you: "(you)",
+  roles: { viewer: "Viewer", commenter: "Commenter", contributor: "Contributor", editor: "Editor", owner: "Owner" },
+  roleDescriptions: {
+    viewer: "Reads the artifact, its versions and its history",
+    commenter: "Also comments",
+    contributor: "Also edits its data",
+    editor: "Also publishes versions and changes the schema",
+    owner: "Also shares, trashes and transfers it"
+  },
+  roleFor: (name) => `Role for ${name}`,
+  remove: (name) => `Remove ${name}`,
+  saving: "Saving",
+  busy: "Wait for the change to finish.",
+  agentNote: (name, role) => `${name} can ${AGENT_CAN[role]}.`,
+  companyAccess: "Company access",
+  company: (company, access) => {
+    switch (access) {
+      case "none":
+        return "Only people with access above";
+      case "viewer":
+        return `Everyone in ${company} can view`;
+      case "commenter":
+        return `Everyone in ${company} can comment`;
+      case "contributor":
+        return `Everyone in ${company} can edit its data`;
+      case "editor":
+        return `Everyone in ${company} can edit`;
+    }
+  },
+  copyLink: "Copy link",
+  linkCopied: "Link copied",
+  linkNote: "Only people with access can open the link.",
+  done: "Done"
+};
+function ShareDialog({
+  open,
+  onClose,
+  title,
+  picker,
+  defaultAddRole = "viewer",
+  grantableRoles = SHAREABLE_ROLES,
+  audience,
+  onRoleChange,
+  onRemove,
+  companyName,
+  companyAccess,
+  onCompanyAccessChange,
+  companyPending = false,
+  companyRefusal,
+  link,
+  readOnly,
+  note,
+  labels
+}) {
+  const text = {
+    ...LABELS,
+    ...labels,
+    roles: { ...LABELS.roles, ...labels?.roles },
+    roleDescriptions: { ...LABELS.roleDescriptions, ...labels?.roleDescriptions }
+  };
+  const phone = useMediaMatch(`(width < ${breakpoint.phone})`);
+  const [addRole, setAddRole] = useState(defaultAddRole);
+  const level = useHeadingLevel();
+  const Heading = headingTag(level);
+  const audienceId = useId();
+  const companyId = useId();
+  const roleOptions = grantableRoles.map((role) => ({
+    value: role,
+    label: text.roles[role],
+    description: text.roleDescriptions[role]
+  }));
+  const companyOptions = ["none", ...grantableRoles].map((access) => ({
+    value: access,
+    label: text.company(companyName, access)
+  }));
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      open,
+      onClose,
+      title: text.title(title),
+      placement: phone ? "bottom" : "top",
+      size: "md",
+      stackBody: true,
+      footerStart: link ? /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__link", children: [
+        /* @__PURE__ */ jsx(CopyButton, { text: link, label: text.copyLink, copiedLabel: text.linkCopied, copiedMessage: text.linkCopied, size: "small", variant: "outline" }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__link-note", children: text.linkNote })
+      ] }) : void 0,
+      footer: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onClose, children: text.done }),
+      children: [
+        note ? /* @__PURE__ */ jsx(Callout, { variant: "info", children: note }) : null,
+        readOnly ? /* @__PURE__ */ jsx(Callout, { variant: "neutral", children: readOnly.reason }) : null,
+        !readOnly && picker ? /* @__PURE__ */ jsxs("div", { className: "crewlet-share-dialog__add", children: [
+          picker({ role: addRole }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: addRole,
+              options: roleOptions,
+              onChange: (value) => setAddRole(value),
+              ariaLabel: text.addRole,
+              size: "md",
+              width: "auto",
+              align: "right"
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxs("section", { className: "crewlet-share-dialog__section", "aria-labelledby": audienceId, children: [
+          /* @__PURE__ */ jsx(Heading, { id: audienceId, className: "crewlet-share-dialog__heading", children: text.audience }),
+          /* @__PURE__ */ jsx("ul", { className: "crewlet-share-dialog__audience", children: audience.map((row) => {
+            const direct = row.via === void 0 && row.role !== "owner";
+            const editable = !readOnly && onRoleChange !== void 0 && (row.editable ?? direct);
+            const removable = !readOnly && onRemove !== void 0 && (row.removable ?? (row.editable ?? direct));
+            const rowNote = row.note ?? (row.principal.kind === "agent" ? text.agentNote(row.principal.name, row.role) : void 0);
+            const detail = row.via ?? row.principal.detail;
+            return /* @__PURE__ */ jsxs("li", { className: cx("crewlet-share-dialog__row", row.pending && "is-pending"), "aria-busy": row.pending || void 0, children: [
+              /* @__PURE__ */ jsx(PrincipalAvatar, { principal: row.principal, size: "md" }),
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__who", children: [
+                /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__name", children: [
+                  row.principal.name,
+                  row.self ? /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__you", children: [
+                    " ",
+                    text.you
+                  ] }) : null
+                ] }),
+                detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__detail", children: detail }) : null
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__controls", children: [
+                row.pending ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__saving", children: text.saving }) : null,
+                editable && row.role !== "owner" ? /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    value: row.role,
+                    options: roleOptions,
+                    onChange: (value) => onRoleChange(row, value),
+                    ariaLabel: text.roleFor(row.principal.name),
+                    disabled: row.pending ?? false,
+                    size: "sm",
+                    width: "auto",
+                    align: "right"
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__role", children: text.roles[row.role] }),
+                removable ? /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    label: text.remove(row.principal.name),
+                    icon: /* @__PURE__ */ jsx(XGlyph, {}),
+                    size: "sm",
+                    variant: "ghost",
+                    disabledReason: row.pending ? text.busy : void 0,
+                    onClick: () => onRemove(row)
+                  }
+                ) : null
+              ] }),
+              rowNote ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__note", children: rowNote }) : null,
+              /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__refusal", "aria-live": "polite", children: row.refusal ?? "" })
+            ] }, row.id);
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("section", { className: "crewlet-share-dialog__section", "aria-labelledby": companyId, "aria-busy": companyPending || void 0, children: [
+          /* @__PURE__ */ jsx(Heading, { id: companyId, className: "crewlet-share-dialog__heading", children: text.companyAccess }),
+          readOnly || !onCompanyAccessChange ? /* @__PURE__ */ jsx("p", { className: "crewlet-share-dialog__company-text", children: text.company(companyName, companyAccess) }) : /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__company", children: [
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: companyAccess,
+                options: companyOptions,
+                onChange: (value) => onCompanyAccessChange(value),
+                ariaLabel: text.companyAccess,
+                disabled: companyPending,
+                size: "md"
+              }
+            ),
+            companyPending ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__saving", children: text.saving }) : null
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__refusal", "aria-live": "polite", children: companyRefusal ?? "" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast };

package/dist/chunk-3BYIWOTV.js

@@ -0,0 +1,29 @@
+import { presenceHueClass } from './chunk-I6POAB4V.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CursorFlag-AJQJBUGY.css';
+import { PencilGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function CursorFlag({ name, hue, kind = "human", editing = false, placement = "top-end", className, ...rest }) {
+  const text = typeof name === "string" ? name : name.join(", ");
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      "aria-hidden": "true",
+      className: cx(
+        "crewlet-cursor-flag",
+        presenceHueClass(hue),
+        `crewlet-cursor-flag--${kind}`,
+        `crewlet-cursor-flag--${placement}`,
+        className
+      ),
+      children: [
+        editing ? /* @__PURE__ */ jsx(PencilGlyph, { size: "xs", className: "crewlet-cursor-flag__glyph" }) : null,
+        /* @__PURE__ */ jsx("span", { className: "crewlet-cursor-flag__name", children: text })
+      ]
+    }
+  );
+}
+
+export { CursorFlag };

package/dist/chunk-3UAA4IWJ.js

@@ -0,0 +1,98 @@
+import { Combobox } from './chunk-ZFH7H7GS.js';
+import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PrincipalPicker-7NNZTGUP.css';
+import { useState, useId, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LABELS = {
+  groups: { person: "People", agent: "Agents", team: "Teams" },
+  empty: "Nobody matches. Try a name, a handle or a team.",
+  loading: "Searching"
+};
+var key = (principal) => `${principal.kind}:${principal.id}`;
+function PrincipalPicker({
+  query,
+  onQueryChange,
+  options,
+  onPick,
+  label,
+  placeholder,
+  loading = false,
+  disabled = false,
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels, groups: { ...LABELS.groups, ...labels?.groups } };
+  const [open, setOpen] = useState(false);
+  const groupId = useId();
+  const ordered = useMemo(
+    () => PRINCIPAL_KINDS.flatMap((kind) => options.filter((option) => option.kind === kind)),
+    [options]
+  );
+  const offered = useMemo(
+    () => ordered.map((option) => ({ value: key(option), label: option.name, disabled: option.disabled ?? false })),
+    [ordered]
+  );
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      value: query,
+      onValueChange: (next) => {
+        onQueryChange(next);
+        setOpen(true);
+      },
+      options: offered,
+      open: open && !disabled,
+      onOpenChange: setOpen,
+      label,
+      "aria-label": label,
+      placeholder,
+      disabled,
+      containerClassName: cx("crewlet-principal-picker", className),
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      emptyMessage: loading ? text.loading : query.trim() ? text.empty : void 0,
+      onCommit: (_option, index) => {
+        const picked = ordered[index];
+        if (!picked || picked.disabled) return;
+        onPick(picked);
+        onQueryChange("");
+      },
+      renderList: ordered.length > 0 ? ({ active, optionId, optionHandlers }) => PRINCIPAL_KINDS.map((kind) => {
+        const rows = ordered.map((option, index) => ({ option, index })).filter(({ option }) => option.kind === kind);
+        if (rows.length === 0) return null;
+        const headingId = `${groupId}-${kind}`;
+        return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": headingId, className: "crewlet-principal-picker__group", children: [
+          /* @__PURE__ */ jsx("div", { id: headingId, role: "presentation", className: "crewlet-principal-picker__heading", children: text.groups[kind] }),
+          rows.map(({ option, index }) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: optionId(index),
+              role: "option",
+              "aria-selected": index === active,
+              "aria-disabled": option.disabled || void 0,
+              className: cx(
+                "crewlet-listbox__option",
+                "crewlet-principal-picker__option",
+                index === active && "is-highlight",
+                option.disabled && "is-disabled"
+              ),
+              ...option.disabled ? {} : optionHandlers(index),
+              children: [
+                /* @__PURE__ */ jsx(PrincipalAvatar, { principal: option, size: "sm" }),
+                /* @__PURE__ */ jsxs("span", { className: "crewlet-principal-picker__text", children: [
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-principal-picker__name", children: option.name }),
+                  option.disabledReason ?? option.detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-listbox__hint", children: option.disabledReason ?? option.detail }) : null
+                ] })
+              ]
+            },
+            key(option)
+          ))
+        ] }, kind);
+      }) : void 0
+    }
+  );
+}
+
+export { PrincipalPicker };

package/dist/chunk-4KP4RC3O.js

@@ -0,0 +1,25 @@
+import { Avatar } from './chunk-5OM447RW.js';
+import { UsersGlyph } from '@crewlethq/icons/glyphs';
+import { jsx } from 'react/jsx-runtime';
+
+var PRINCIPAL_KINDS = ["person", "agent", "team"];
+function PrincipalAvatar({ principal, size = "sm", decorative = true }) {
+  const { kind, name, character, hue, src } = principal;
+  if (kind === "team") {
+    return /* @__PURE__ */ jsx(Avatar, { name, size, kind: "agent", icon: /* @__PURE__ */ jsx(UsersGlyph, {}), decorative });
+  }
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      name,
+      size,
+      kind: kind === "person" ? "human" : "agent",
+      character: kind === "agent" ? character : void 0,
+      hue: kind === "agent" ? hue : void 0,
+      src,
+      decorative
+    }
+  );
+}
+
+export { PRINCIPAL_KINDS, PrincipalAvatar };