@cosxai/ui 1.0.0-alpha.0 → 1.0.0-alpha.2

package/src/components/PageHeader.tsx

@@ -0,0 +1,62 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type PageHeaderFigure = { value: ReactNode; label: ReactNode };
+
+export type PageHeaderProps = Omit<ComponentProps<'header'>, 'title'> & {
+  /** "Project · Series A" */
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  /** Beside the title: a Badge. */
+  status?: ReactNode;
+  /** A note line under the title: sync state, counts ("Syncing · 6,831 items"). */
+  note?: ReactNode;
+  /** A brand dot before the note (background work running). */
+  noteDot?: boolean | undefined;
+  /** Stat figures; hidden on phones. */
+  figures?: PageHeaderFigure[] | undefined;
+  /** Right-hand actions. */
+  actions?: ReactNode;
+  /** Heading level of the title. @default 1 */
+  level?: 1 | 2 | 3 | undefined;
+};
+
+/**
+ * PageHeader — the "seven in one" header card: eyebrow, title, status, a
+ * note line, figures (hidden on phones) and actions. Every part is optional
+ * but the title.
+ */
+export function PageHeader({ eyebrow, title, status, note, noteDot = false, figures, actions, level = 1, className, ...rest }: PageHeaderProps) {
+  const H = `h${level}` as const;
+  return (
+    <header className={cn('flex flex-col gap-4 rounded-lg bg-sunk p-5 text-fg', className)} {...rest}>
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex min-w-0 flex-col gap-1.5">
+          {eyebrow && <div className="text-meta font-medium text-fg-secondary">{eyebrow}</div>}
+          <div className="flex min-w-0 flex-wrap items-center gap-2.5">
+            <H className="m-0 truncate text-title leading-tight font-medium tracking-heading">{title}</H>
+            {status}
+          </div>
+          {note && (
+            <div className="flex items-center gap-2 text-meta text-fg-secondary">
+              {noteDot && <span aria-hidden className="size-1.5 shrink-0 rounded-pill bg-brand-mark" />}
+              <span className="truncate">{note}</span>
+            </div>
+          )}
+        </div>
+        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+      </div>
+      {figures && figures.length > 0 && (
+        <dl className="m-0 hidden flex-wrap gap-x-8 gap-y-3 sm:flex">
+          {figures.map((f, i) => (
+            <div key={i} className="flex flex-col-reverse">
+              <dt className="text-meta text-fg-secondary">{f.label}</dt>
+              <dd className="m-0 text-title leading-tight font-medium tabular-nums">{f.value}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
+    </header>
+  );
+}

package/src/components/PageState.tsx

@@ -0,0 +1,84 @@
+import { CloudOff, FileQuestion, FolderOpen, Info, Lock, RefreshCw, SearchX, TriangleAlert, type LucideIcon } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Icon } from './Icon';
+
+export type PageStateKind = 'empty' | 'no-results' | 'forbidden' | 'not-found' | 'error' | 'offline';
+
+const GLYPH: Record<PageStateKind, LucideIcon> = {
+  empty: FolderOpen,
+  'no-results': SearchX,
+  forbidden: Lock,
+  'not-found': FileQuestion,
+  error: TriangleAlert,
+  offline: CloudOff,
+};
+
+export type PageStateProps = Omit<ComponentProps<'div'>, 'title' | 'children'> & {
+  kind: PageStateKind;
+  /** The one sentence: "No documents yet", "Couldn't load; your work is saved". */
+  title: ReactNode;
+  /** Optional second line. */
+  description?: ReactNode;
+  /** The one action (a Button): Upload files, Try again, Go to my documents. */
+  action?: ReactNode;
+  /** Tighter, for a panel or a list rather than a page. */
+  compact?: boolean | undefined;
+};
+
+/**
+ * PageState — one sentence and one action per state: nothing yet, no
+ * results, no access, not found, error, offline. Never "No results" while a
+ * search is still running (show a Skeleton instead).
+ */
+export function PageState({ kind, title, description, action, compact = false, className, ...rest }: PageStateProps) {
+  return (
+    <div
+      role={kind === 'error' || kind === 'offline' ? 'alert' : 'status'}
+      data-kind={kind}
+      className={cn('flex flex-col items-center text-center font-sans', compact ? 'gap-2 py-8' : 'gap-3 py-16', className)}
+      {...rest}
+    >
+      <span className={cn('grid place-items-center rounded-lg bg-sunk text-fg-secondary', compact ? 'size-10' : 'size-12')}>
+        <Icon icon={GLYPH[kind]} size={compact ? 18 : 22} />
+      </span>
+      <div className="flex flex-col gap-1">
+        <p className={cn('m-0 font-medium text-fg', compact ? 'text-small' : 'text-body')}>{title}</p>
+        {description && <p className="m-0 max-w-[44ch] text-small text-fg-secondary">{description}</p>}
+      </div>
+      {action && <div className="mt-1">{action}</div>}
+    </div>
+  );
+}
+
+export type PageNoticeProps = Omit<ComponentProps<'div'>, 'children'> & {
+  /** info: a quiet sunk line (a truncated document); update: a new version is out. */
+  tone?: 'info' | 'update' | undefined;
+  children: ReactNode;
+  /** One action: Refresh. */
+  action?: ReactNode;
+};
+
+/**
+ * PageNotice — a full-width line above the content: "This document has
+ * 1,240 pages. Only the first 500 were processed…", or "MetaRoom has been
+ * updated. Refresh to load this page."
+ */
+export function PageNotice({ tone = 'info', children, action, className, ...rest }: PageNoticeProps) {
+  return (
+    <div
+      role={tone === 'update' ? 'alert' : 'status'}
+      className={cn(
+        'flex items-center gap-3 rounded-md px-4 py-2.5 font-sans text-small',
+        tone === 'update' ? 'bg-brand-field text-ink' : 'bg-sunk text-fg',
+        className,
+      )}
+      {...rest}
+    >
+      <Icon icon={tone === 'update' ? RefreshCw : Info} size={15} className={tone === 'update' ? undefined : 'text-fg-secondary'} />
+      <span className="flex-1">{children}</span>
+      {action}
+    </div>
+  );
+}

package/src/components/Progress.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef, useState, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { useLoop } from './status-motion';
+
+export type ProgressSegment = 'done' | 'current' | 'failed' | 'todo';
+
+export type ProgressProps = Omit<ComponentProps<'div'>, 'children'> & {
+  /** Accessible name ("Uploading Cap table.xlsx"). */
+  label: string;
+  /** Determinate: how far. Leave undefined (and no segments) for indeterminate. */
+  value?: number | undefined;
+  /** @default 100 */
+  max?: number | undefined;
+  /** Segmented: one entry per step — done ink, current the brand colour, failed red. */
+  segments?: ProgressSegment[] | undefined;
+  /** Always-visible progress text: "1.2 of 3.4 MB", "Preparing download", "Batch 3 of 5". */
+  text?: ReactNode;
+  /** Announced once when it ends. */
+  status?: 'active' | 'done' | 'failed' | undefined;
+  /** Words for the announcements. */
+  labels?: { done?: string; failed?: string } | undefined;
+};
+
+/** 0, 25, 50, 75 or 100 — screen readers hear these steps, not every tick. */
+export function progressStep(value: number, max: number): number {
+  if (max <= 0) return 0;
+  const pct = Math.min(100, Math.max(0, (value / max) * 100));
+  return Math.floor(pct / 25) * 25;
+}
+
+const SEGMENT = { done: 'bg-fg', current: 'bg-brand-mark', failed: 'bg-error', todo: 'bg-well' };
+
+/**
+ * Progress — one component, three forms: determinate, indeterminate,
+ * segmented. The text is always shown; screen readers hear 25% steps and
+ * the ending (done or failed), never every tick.
+ */
+export function Progress({ label, value, max = 100, segments, text, status = 'active', labels, className, ...rest }: ProgressProps) {
+  const determinate = value !== undefined && !segments;
+  const step = determinate ? progressStep(value, max) : null;
+  const [announce, setAnnounce] = useState('');
+  const lastStep = useRef<number | null>(null);
+  const lastStatus = useRef(status);
+
+  useEffect(() => {
+    if (status !== lastStatus.current) {
+      lastStatus.current = status;
+      if (status === 'done') setAnnounce(`${label}: ${labels?.done ?? 'done'}`);
+      if (status === 'failed') setAnnounce(`${label}: ${labels?.failed ?? 'failed'}`);
+      return;
+    }
+    if (step === null || step === lastStep.current) return;
+    const first = lastStep.current === null;
+    lastStep.current = step;
+    if (!first) setAnnounce(`${label}: ${step}%`);
+  }, [step, status, label, labels?.done, labels?.failed]);
+
+  const bar = useRef<HTMLDivElement | null>(null);
+  useLoop(bar, [{ transform: 'translateX(-100%)' }, { transform: 'translateX(250%)' }], { duration: 1400, easing: 'cubic-bezier(.2,0,.2,1)' }, value === undefined && !segments);
+
+  const aria =
+    determinate
+      ? { 'aria-valuemin': 0, 'aria-valuemax': max, 'aria-valuenow': Math.min(max, Math.max(0, value)) }
+      : segments
+        ? { 'aria-valuemin': 0, 'aria-valuemax': segments.length, 'aria-valuenow': segments.filter((s) => s === 'done').length }
+        : {};
+
+  return (
+    <div className={cn('flex flex-col gap-1.5 font-sans', className)} {...rest}>
+      <div role="progressbar" aria-label={label} {...aria} aria-valuetext={typeof text === 'string' ? text : undefined} className="relative">
+        {segments ? (
+          <div className="flex gap-1">
+            {segments.map((s, i) => (
+              <span key={i} data-segment={s} className={cn('h-1 flex-1 rounded-pill', SEGMENT[s])} />
+            ))}
+          </div>
+        ) : (
+          <div className={cn('h-1 overflow-hidden rounded-pill bg-well', status === 'failed' && 'bg-error-wash')}>
+            {determinate ? (
+              <div
+                className={cn('h-full rounded-pill transition-[width] duration-[180ms] ease-standard', status === 'failed' ? 'bg-error' : 'bg-brand-mark')}
+                style={{ width: `${Math.min(100, Math.max(0, (value / max) * 100))}%` }}
+              />
+            ) : (
+              <div ref={bar} className="h-full w-2/5 rounded-pill bg-brand-mark" />
+            )}
+          </div>
+        )}
+      </div>
+      {text !== undefined && <div className="text-meta font-medium text-fg-secondary tabular-nums">{text}</div>}
+      <span className="sr-only" aria-live="polite">
+        {announce}
+      </span>
+    </div>
+  );
+}

package/src/components/PulseDot.tsx

@@ -0,0 +1,31 @@
+import { useRef, type ComponentProps } from 'react';
+
+import { cn } from '../lib/cn';
+import { useLoop } from './status-motion';
+
+export type PulseDotProps = Omit<ComponentProps<'span'>, 'children'> & {
+  /** Pulse (background work or an agent running). Off: a still dot. @default true */
+  active?: boolean | undefined;
+  /** px. @default 9 */
+  size?: number | undefined;
+  /** Accessible text ("Agent running"). Without it the dot is decorative. */
+  label?: string | undefined;
+};
+
+/** PulseDot — a slowly pulsing brand dot while work runs; a still brand
+ *  dot under reduced motion. */
+export function PulseDot({ active = true, size = 9, label, className, style, ...rest }: PulseDotProps) {
+  const ref = useRef<HTMLSpanElement | null>(null);
+  useLoop(ref, [{ opacity: 1 }, { opacity: 0.35 }, { opacity: 1 }], { duration: 2400, easing: 'ease-in-out' }, active);
+  return (
+    <span
+      ref={ref}
+      role={label ? 'img' : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      className={cn('inline-block shrink-0 rounded-pill bg-brand-mark', className)}
+      style={{ width: size, height: size, ...style }}
+      {...rest}
+    />
+  );
+}

package/src/components/Radio.tsx

@@ -0,0 +1,72 @@
+import * as RadioPrimitive from '@radix-ui/react-radio-group';
+import { useId, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type RadioOption = {
+  value: string;
+  label: ReactNode;
+  /** A line below the label. */
+  description?: ReactNode;
+  disabled?: boolean | undefined;
+};
+
+export type RadioGroupProps = Omit<ComponentProps<typeof RadioPrimitive.Root>, 'value' | 'onValueChange' | 'onChange' | 'children' | 'orientation'> & {
+  /** Two to five exclusive options, all visible (more: a Select). */
+  options: Array<string | RadioOption>;
+  value?: string | undefined;
+  onChange?: ((value: string) => void) | undefined;
+  /** column (default) or row. Arrow keys move between options either way. */
+  direction?: 'column' | 'row' | undefined;
+};
+
+/**
+ * RadioGroup — round sunk controls, an ink dot on the chosen one. Arrow
+ * keys move and choose; the group is one tab stop.
+ */
+export function RadioGroup({ options, value, onChange, direction = 'column', disabled, className, ...rest }: RadioGroupProps) {
+  const auto = useId();
+  const items = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
+  return (
+    <RadioPrimitive.Root
+      {...(value !== undefined && { value })}
+      onValueChange={(v) => onChange?.(v)}
+      disabled={disabled}
+      orientation={direction === 'row' ? 'horizontal' : 'vertical'}
+      className={cn('flex font-sans', direction === 'row' ? 'flex-row flex-wrap gap-[22px]' : 'flex-col gap-2.5', className)}
+      {...rest}
+    >
+      {items.map((o) => {
+        const id = `rd${auto}-${o.value}`;
+        const off = Boolean(disabled || o.disabled);
+        return (
+          <div key={o.value} className={cn('inline-flex items-start gap-2.5', off && 'opacity-40')}>
+            <RadioPrimitive.Item
+              id={id}
+              value={o.value}
+              disabled={o.disabled}
+              aria-describedby={o.description ? `${id}-desc` : undefined}
+              className={cn(
+                'mt-0.5 grid size-4 shrink-0 cursor-pointer place-items-center rounded-pill border border-fg-secondary bg-sunk',
+                'transition-[border-color] duration-[120ms] ease-standard outline-none focus-visible:shadow-(--focus-ring)',
+                'data-[state=checked]:border-fg disabled:cursor-not-allowed',
+              )}
+            >
+              <RadioPrimitive.Indicator className="block size-2 rounded-pill bg-fg" />
+            </RadioPrimitive.Item>
+            <span className="flex flex-col gap-0.5">
+              <label htmlFor={id} className={cn('text-small leading-[1.45] text-fg', off ? 'cursor-not-allowed' : 'cursor-pointer')}>
+                {o.label}
+              </label>
+              {o.description && (
+                <span id={`${id}-desc`} className="text-meta leading-normal text-fg-secondary">
+                  {o.description}
+                </span>
+              )}
+            </span>
+          </div>
+        );
+      })}
+    </RadioPrimitive.Root>
+  );
+}

package/src/components/RecipientsInput.tsx

@@ -0,0 +1,252 @@
+import * as Popover from '@radix-ui/react-popover';
+import { X } from 'lucide-react';
+import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { useField } from './Field';
+import { DEFAULT_LABELS, ListboxBody, type ListboxLabels, type ListItem } from './inputs-listbox';
+import { useDebouncedSearch } from './inputs-search';
+
+export type RecipientStatus = 'valid' | 'invalid' | 'unverified';
+export type Recipient = { email: string; name?: string | undefined; status: RecipientStatus };
+
+export type RecipientsInputProps = {
+  value?: Recipient[] | undefined;
+  defaultValue?: Recipient[] | undefined;
+  onChange?: ((recipients: Recipient[]) => void) | undefined;
+  /** People to suggest while typing (value = email). */
+  search?: ((query: string, signal: AbortSignal) => Promise<ListItem[]>) | undefined;
+  /** Status for a typed address that is well formed: valid, or unverified (dashed) when the caller can't confirm it. @default () => 'valid' */
+  verify?: ((email: string) => 'valid' | 'unverified') | undefined;
+  /** @default "Add people or paste emails" */
+  placeholder?: string | undefined;
+  labels?: Partial<ListboxLabels> & { remove?: ((r: Recipient) => string) | undefined; invalid?: string | undefined; unverified?: string | undefined };
+  disabled?: boolean | undefined;
+  /** A leading word inside the field, e.g. "To". */
+  prefix?: ReactNode | undefined;
+  id?: string | undefined;
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+};
+
+const EMAIL = /^[^\s@,;<>]+@[^\s@,;<>]+\.[^\s@,;<>]+$/;
+const SPLIT = /[\s,;]+/;
+
+/** "Anna K <anna@x.co>" → the address; anything else as typed. */
+function addressOf(token: string): string {
+  const m = token.match(/<([^>]+)>/);
+  return (m ? m[1]! : token).trim();
+}
+
+/**
+ * RecipientsInput — the "To" field. Addresses become chips as they are
+ * confirmed (Enter, comma, space or leaving the field); pasting a list
+ * splits it. A malformed address gets the red outline and opens for
+ * editing in place when clicked; one the caller can't confirm is dashed.
+ * Backspace in the empty field removes the last chip.
+ */
+export function RecipientsInput({
+  value,
+  defaultValue = [],
+  onChange,
+  search,
+  verify = () => 'valid',
+  placeholder = 'Add people or paste emails',
+  labels: labelsIn,
+  disabled,
+  prefix,
+  id,
+  className,
+  ...aria
+}: RecipientsInputProps) {
+  const field = useField();
+  const auto = useId();
+  const listId = `ri${auto}-list`;
+  const optionId = (i: number) => `ri${auto}-o${i}`;
+  const labels = { ...DEFAULT_LABELS, ...labelsIn };
+  const [own, setOwn] = useState<Recipient[]>(defaultValue);
+  const list = value ?? own;
+  const [text, setText] = useState('');
+  const [editing, setEditing] = useState<number | null>(null);
+  const [active, setActive] = useState(0);
+  const input = useRef<HTMLInputElement | null>(null);
+  const off = Boolean(disabled || field?.disabled);
+  const { status, result, retry } = useDebouncedSearch(text, search, { delay: 250 });
+  const items = (status === 'done' ? (result ?? []) : []).filter((i) => !list.some((r) => r.email.toLowerCase() === i.value.toLowerCase()));
+  // Suggestions only while there is something to suggest: a new address
+  // that matches no one is normal here, not "nothing matches".
+  const showList = Boolean(search) && text.trim().length > 0 && editing === null && (status === 'searching' || status === 'error' || items.length > 0);
+
+  const commitList = (next: Recipient[]) => {
+    if (value === undefined) setOwn(next);
+    onChange?.(next);
+  };
+  const toRecipient = (token: string, name?: string): Recipient => {
+    const email = addressOf(token);
+    return { email, ...(name ? { name } : {}), status: EMAIL.test(email) ? verify(email) : 'invalid' };
+  };
+  /** Turn typed text into chips; returns true when something was added. */
+  const commitText = (raw: string, at: number | null = null) => {
+    const tokens = raw.split(SPLIT).map((t) => t.trim()).filter(Boolean);
+    if (!tokens.length) return false;
+    const fresh = tokens.map((t) => toRecipient(t)).filter((r) => !list.some((x, i) => i !== at && x.email.toLowerCase() === r.email.toLowerCase()));
+    const next = [...list];
+    if (at === null) next.push(...fresh);
+    else next.splice(at, 1, ...fresh);
+    commitList(next);
+    setText('');
+    setEditing(null);
+    return true;
+  };
+  const choose = (i: number) => {
+    const it = items[i];
+    if (!it) return;
+    commitList([...list, { email: it.value, name: it.label, status: 'valid' }]);
+    setText('');
+  };
+
+  const onKey = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (showList && items.length && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      e.preventDefault();
+      setActive((a) => (e.key === 'ArrowDown' ? Math.min(items.length - 1, a + 1) : Math.max(0, a - 1)));
+      return;
+    }
+    if (e.key === 'Enter' || e.key === ',' || e.key === ';' || (e.key === ' ' && text.trim()) || (e.key === 'Tab' && text.trim())) {
+      if (e.key === 'Enter' && showList && status === 'done' && items.length) {
+        e.preventDefault();
+        choose(active);
+        return;
+      }
+      if (commitText(text, editing)) e.preventDefault();
+      else if (e.key !== 'Tab' && e.key !== ' ') e.preventDefault();
+    } else if (e.key === 'Backspace' && !text && editing === null && list.length) {
+      e.preventDefault();
+      commitList(list.slice(0, -1));
+    } else if (e.key === 'Escape' && editing !== null) {
+      setEditing(null);
+      setText('');
+    }
+  };
+
+  const editInput = (
+    <input
+      ref={input}
+      id={editing === null ? (id ?? field?.id) : undefined}
+      value={text}
+      disabled={off}
+      placeholder={list.length || editing !== null ? undefined : placeholder}
+      aria-label={aria['aria-label'] ?? (field?.labelId ? undefined : placeholder)}
+      aria-labelledby={field?.labelId}
+      aria-describedby={field?.describedBy}
+      role={search ? 'combobox' : undefined}
+      aria-expanded={search ? showList : undefined}
+      aria-controls={search && showList ? listId : undefined}
+      aria-autocomplete={search ? 'list' : undefined}
+      aria-activedescendant={showList && status === 'done' && items.length ? optionId(active) : undefined}
+      autoComplete="off"
+      onChange={(e) => {
+        setText(e.target.value);
+        setActive(0);
+      }}
+      onPaste={(e) => {
+        const pasted = e.clipboardData.getData('text');
+        if (SPLIT.test(pasted.trim())) {
+          e.preventDefault();
+          commitText(text + pasted, editing);
+        }
+      }}
+      onBlur={() => text.trim() && commitText(text, editing)}
+      onKeyDown={onKey}
+      className={cn('min-w-[8ch] flex-1 border-none bg-transparent p-0 py-1 font-sans text-[13px] text-fg outline-none placeholder:text-fg-secondary', editing !== null && 'min-w-[16ch]')}
+    />
+  );
+
+  return (
+    <Popover.Root open={showList} onOpenChange={() => {}}>
+      <Popover.Anchor asChild>
+        <div
+          onClick={(e) => e.target === e.currentTarget && input.current?.focus()}
+          className={cn(
+            'flex min-h-[38px] w-full flex-wrap items-center gap-1.5 rounded-md border border-rule bg-sunk px-2 py-1 font-sans text-fg',
+            'transition-[border-color] duration-[120ms] ease-standard focus-within:border-fg focus-within:shadow-(--focus-ring)',
+            off && 'cursor-not-allowed bg-well text-fg-secondary',
+            className,
+          )}
+        >
+          {prefix !== undefined && <span className="pr-0.5 pl-1 text-[12.5px] text-fg-secondary">{prefix}</span>}
+          {list.map((r, i) =>
+            editing === i ? (
+              <span key={`edit-${i}`} className="inline-flex rounded-sm border border-error bg-page px-1.5">
+                {editInput}
+              </span>
+            ) : (
+              <span
+                key={r.email + i}
+                className={cn(
+                  'inline-flex max-w-full items-center gap-1 rounded-sm border bg-page py-0.5 pr-1 pl-2 text-[12.5px] leading-[1.4]',
+                  r.status === 'invalid' ? 'border-error bg-error-wash' : r.status === 'unverified' ? 'border-dashed border-fg-secondary' : 'border-rule',
+                )}
+              >
+                {r.status === 'invalid' ? (
+                  <button
+                    type="button"
+                    disabled={off}
+                    onClick={() => {
+                      setEditing(i);
+                      setText(r.email);
+                      requestAnimationFrame(() => input.current?.focus());
+                    }}
+                    className="cursor-text truncate rounded-xs outline-none focus-visible:shadow-(--focus-ring)"
+                  >
+                    {r.email}
+                    <span className="sr-only">, {labelsIn?.invalid ?? 'not a valid address — edit'}</span>
+                  </button>
+                ) : (
+                  <span className="truncate" title={r.name ? r.email : undefined}>
+                    {r.name ?? r.email}
+                    {r.status === 'unverified' && <span className="sr-only">, {labelsIn?.unverified ?? 'unverified'}</span>}
+                  </span>
+                )}
+                {!off && (
+                  <button
+                    type="button"
+                    aria-label={labelsIn?.remove?.(r) ?? `Remove ${r.name ?? r.email}`}
+                    onClick={() => commitList(list.filter((_, k) => k !== i))}
+                    className="inline-grid cursor-pointer place-items-center rounded-xs text-fg-secondary outline-none hover:text-fg focus-visible:shadow-(--focus-ring)"
+                  >
+                    <X size={12} aria-hidden />
+                  </button>
+                )}
+              </span>
+            ),
+          )}
+          {editing === null && editInput}
+        </div>
+      </Popover.Anchor>
+      <Popover.Portal>
+        <Popover.Content
+          align="start"
+          sideOffset={6}
+          collisionPadding={12}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          className="rise z-60 rounded-lg border border-rule bg-page p-1 font-sans [--motion-reveal:200ms]"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          <ListboxBody
+            id={listId}
+            optionId={optionId}
+            items={items}
+            active={active}
+            status={status}
+            query={text.trim()}
+            canCreate={false}
+            labels={labels}
+            onActive={setActive}
+            onChoose={choose}
+            onRetry={retry}
+          />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}