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

package/src/components/UploadCheck.tsx

@@ -0,0 +1,118 @@
+import { Folder } from 'lucide-react';
+import { useMemo, useState, type ComponentProps } from 'react';
+
+import { cn } from '../lib/cn';
+import { Button } from './Button';
+import { Checkbox } from './Checkbox';
+import { Icon } from './Icon';
+import { checkFiles, DEFAULT_MAX_SIZE, formatBytes, isHidden, type DroppedFile, type FileRules, type Rejected } from './status-files';
+
+type Group = { key: string; label: string; files: DroppedFile[]; hidden: boolean };
+
+const REASON: Record<Rejected['reason'], string> = { type: 'Unsupported type', size: 'Too large', depth: 'Nested too deep' };
+
+/** Groups a folder's accepted files by their first sub-folder ("" = loose files in the root). */
+export function groupByFolder(items: DroppedFile[]): Group[] {
+  const map = new Map<string, DroppedFile[]>();
+  for (const it of items) {
+    const parts = it.path.split('/');
+    const key = parts.length > 2 ? parts[1]! : '';
+    map.set(key, [...(map.get(key) ?? []), it]);
+  }
+  return [...map.entries()]
+    .map(([key, files]) => ({ key, label: key, files, hidden: key ? key.startsWith('.') : files.every((f) => isHidden(f.path)) }))
+    .sort((a, b) => Number(a.hidden) - Number(b.hidden) || a.key.localeCompare(b.key));
+}
+
+export type UploadCheckLabels = {
+  looseFiles?: string;
+  wontUpload?: (n: number) => string;
+  upload?: (n: number) => string;
+  cancel?: string;
+  of?: (included: number, total: number) => string;
+  summary?: (files: number, size: string) => string;
+  refused?: (r: Rejected) => string;
+};
+
+export type UploadCheckProps = Omit<ComponentProps<'div'>, 'children'> &
+  FileRules & {
+    /** The dropped folder's name. */
+    folder: string;
+    /** Everything read from it, with paths ("<folder>/Financials/a.pdf"). */
+    items: DroppedFile[];
+    onConfirm: (files: DroppedFile[]) => void;
+    onCancel?: (() => void) | undefined;
+    labels?: UploadCheckLabels | undefined;
+  };
+
+/**
+ * UploadCheck — before a folder uploads: what will go (by sub-folder, with
+ * counts), what is unticked by default (hidden items such as .cache), and
+ * what won't upload and why (unsupported type, too large, nested too deep).
+ */
+export function UploadCheck({ folder, items, accept, maxSize = DEFAULT_MAX_SIZE, maxDepth, onConfirm, onCancel, labels, className, ...rest }: UploadCheckProps) {
+  const { accepted, rejected } = useMemo(() => checkFiles(items, { accept, maxSize, maxDepth }), [items, accept, maxSize, maxDepth]);
+  const groups = useMemo(() => groupByFolder(accepted), [accepted]);
+  const [off, setOff] = useState<Set<string>>(() => new Set(groups.filter((g) => g.hidden).map((g) => g.key)));
+
+  const chosen = groups.filter((g) => !off.has(g.key)).flatMap((g) => g.files);
+  const bytes = chosen.reduce((n, f) => n + f.file.size, 0);
+  const toggle = (key: string, on: boolean) =>
+    setOff((s) => {
+      const next = new Set(s);
+      if (on) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  const L = {
+    looseFiles: labels?.looseFiles ?? 'Files in this folder',
+    wontUpload: labels?.wontUpload ?? ((n: number) => `${n} won’t upload`),
+    upload: labels?.upload ?? ((n: number) => `Upload ${n} ${n === 1 ? 'file' : 'files'}`),
+    of: labels?.of ?? ((a: number, b: number) => `${a} of ${b}`),
+    refused: labels?.refused ?? ((r: Rejected) => REASON[r.reason]),
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-4 font-sans text-fg', className)} {...rest}>
+      <div className="flex items-center gap-2">
+        <Icon icon={Folder} size={18} />
+        <span className="flex-1 truncate text-ui font-medium">{folder}</span>
+        <span className="text-meta font-medium text-fg-secondary tabular-nums">{L.of(chosen.length, items.length)}</span>
+      </div>
+      <ul className="m-0 flex list-none flex-col rounded-md border border-rule p-0">
+        {groups.map((g) => (
+          <li key={g.key || '(root)'} className="flex items-center gap-3 border-b border-rule-soft px-3 py-2.5 last:border-b-0">
+            <Checkbox
+              checked={!off.has(g.key)}
+              onChange={(v) => toggle(g.key, v)}
+              label={g.key ? g.label : L.looseFiles}
+              rowClassName={cn('flex-1', off.has(g.key) && 'text-fg-secondary')}
+            />
+            <span className="text-meta text-fg-secondary tabular-nums">{g.files.length}</span>
+          </li>
+        ))}
+        {rejected.map((r) => (
+          <li key={r.path} data-rejected={r.reason} className="flex items-center gap-3 border-b border-rule-soft px-3 py-2.5 last:border-b-0">
+            <span className="size-4 shrink-0" />
+            <span className="flex-1 truncate text-small text-fg-secondary">{r.path.split('/').slice(1).join(' / ') || r.path}</span>
+            <span className="text-meta font-medium text-error-text">{L.refused(r)}</span>
+          </li>
+        ))}
+      </ul>
+      <div className="flex items-center gap-3">
+        <span className="flex-1 text-meta text-fg-secondary tabular-nums">
+          {(labels?.summary ?? ((n: number, s: string) => `${n} ${n === 1 ? 'file' : 'files'} · ${s}`))(chosen.length, formatBytes(bytes))}
+          {rejected.length > 0 && ` · ${L.wontUpload(rejected.length)}`}
+        </span>
+        {onCancel && (
+          <Button variant="ghost" onClick={onCancel}>
+            {labels?.cancel ?? 'Cancel'}
+          </Button>
+        )}
+        <Button disabled={chosen.length === 0} onClick={() => onConfirm(chosen)}>
+          {L.upload(chosen.length)}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/UploadList.tsx

@@ -0,0 +1,176 @@
+import { Check, File, Folder, X } from 'lucide-react';
+import { useEffect, useState, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { IconButton } from './IconButton';
+import { Progress } from './Progress';
+import { formatBytes } from './status-files';
+
+export type UploadState = 'queued' | 'uploading' | 'retrying' | 'failed' | 'done';
+
+export type UploadItem = {
+  id: string;
+  name: string;
+  state: UploadState;
+  /** 0–100 while uploading. */
+  progress?: number | undefined;
+  /** Bytes, for "1.2 of 3.4 MB". */
+  loaded?: number | undefined;
+  size?: number | undefined;
+  /** When the next attempt starts (epoch ms), while retrying. */
+  retryAt?: number | undefined;
+  /** Why it failed: "The connection dropped." */
+  error?: ReactNode;
+};
+
+export type UploadRowLabels = {
+  /** s is 0 once the retry has started. */
+  retryingIn?: (s: number) => string;
+  failed?: string;
+  retry?: string;
+  dismiss?: string;
+  cancel?: string;
+  done?: string;
+  queued?: string;
+  /** "1.2 MB of 3.4 MB" */
+  sizeOf?: (loaded: string, total: string) => string;
+};
+
+/** Seconds left until `at`, ticking once a second. */
+function useSecondsUntil(at: number | undefined): number {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (at === undefined) return;
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, [at]);
+  return at === undefined ? 0 : Math.max(0, Math.ceil((at - now) / 1000));
+}
+
+export type UploadRowProps = Omit<ComponentProps<'li'>, 'children'> & {
+  item: UploadItem;
+  onRetry?: ((id: string) => void) | undefined;
+  onDismiss?: ((id: string) => void) | undefined;
+  onCancel?: ((id: string) => void) | undefined;
+  labels?: UploadRowLabels | undefined;
+};
+
+/**
+ * UploadRow — one file: name, progress, cancel. Retrying counts down;
+ * a failure takes a red wash with the reason and Retry while the rest keep
+ * going; done confirms until the real card takes its place.
+ */
+export function UploadRow({ item, onRetry, onDismiss, onCancel, labels, className, ...rest }: UploadRowProps) {
+  const secs = useSecondsUntil(item.state === 'retrying' ? item.retryAt : undefined);
+  const L = {
+    retryingIn: labels?.retryingIn ?? ((s: number) => (s > 0 ? `Retrying in ${s} s` : 'Retrying…')),
+    failed: labels?.failed ?? 'Upload failed.',
+    retry: labels?.retry ?? 'Retry',
+    dismiss: labels?.dismiss ?? 'Dismiss',
+    cancel: labels?.cancel ?? 'Cancel',
+    done: labels?.done ?? 'Uploaded',
+    queued: labels?.queued ?? 'Waiting',
+  };
+  const pct = Math.round(item.progress ?? 0);
+  const text =
+    item.state === 'uploading'
+      ? item.size
+        ? (labels?.sizeOf ?? ((a: string, b: string) => `${a} of ${b}`))(formatBytes(item.loaded ?? (item.size * pct) / 100), formatBytes(item.size))
+        : `${pct}%`
+      : item.state === 'retrying'
+        ? L.retryingIn(secs)
+        : undefined;
+
+  return (
+    <li
+      data-state={item.state}
+      className={cn(
+        'flex list-none items-center gap-3 rounded-md px-3 py-2.5 font-sans',
+        item.state === 'failed' ? 'bg-error-wash text-ink ink:bg-error/20 ink:text-fg' : 'text-fg',
+        className,
+      )}
+      {...rest}
+    >
+      <Icon icon={item.state === 'done' ? Check : File} size={16} className={item.state === 'done' ? 'text-fg' : 'text-fg-secondary'} />
+      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+        <div className="flex items-center gap-2">
+          <span className="min-w-0 flex-1 truncate text-small">{item.name}</span>
+          {item.state === 'uploading' && <span className="text-meta font-medium text-fg-secondary tabular-nums">{pct}%</span>}
+          {item.state === 'done' && <span className="text-meta font-medium text-fg-secondary">{L.done}</span>}
+          {item.state === 'queued' && <span className="text-meta text-fg-secondary">{L.queued}</span>}
+        </div>
+        {(item.state === 'uploading' || item.state === 'retrying') && (
+          <Progress label={item.name} value={item.state === 'uploading' ? pct : undefined} text={text} status="active" />
+        )}
+        {item.state === 'failed' && (
+          <span role="alert" className="text-meta font-medium text-error-text ink:text-fg">
+            {L.failed} {item.error}
+          </span>
+        )}
+      </div>
+      {item.state === 'failed' ? (
+        <div className="flex items-center gap-1">
+          {onRetry && (
+            <Button size="sm" variant="secondary" ground="paper" onClick={() => onRetry(item.id)} className="ink:border-inv-rule ink:text-fg">
+              {L.retry}
+            </Button>
+          )}
+          {onDismiss && (
+            <Button size="sm" variant="ghost" ground="paper" onClick={() => onDismiss(item.id)} className="ink:text-fg">
+              {L.dismiss}
+            </Button>
+          )}
+        </div>
+      ) : (
+        onCancel &&
+        item.state !== 'done' && <IconButton icon={X} label={`${L.cancel} ${item.name}`} size="sm" onClick={() => onCancel(item.id)} />
+      )}
+    </li>
+  );
+}
+
+export type UploadFolderRowProps = Omit<ComponentProps<'li'>, 'children'> & {
+  name: string;
+  done: number;
+  total: number;
+  failed?: number | undefined;
+  labels?: { failed?: (n: number) => string } | undefined;
+};
+
+/** A folder's batch: a placeholder card that tracks "28 / 41 · 1 failed". */
+export function UploadFolderRow({ name, done, total, failed = 0, labels, className, ...rest }: UploadFolderRowProps) {
+  const failedText = labels?.failed ?? ((n: number) => `${n} failed`);
+  const text = `${done} / ${total}${failed ? ` · ${failedText(failed)}` : ''}`;
+  return (
+    <li className={cn('flex list-none items-center gap-3 rounded-md px-3 py-2.5 font-sans text-fg', className)} {...rest}>
+      <Icon icon={Folder} size={16} className="text-fg-secondary" />
+      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+        <div className="flex items-center gap-2">
+          <span className="min-w-0 flex-1 truncate text-small">{name}</span>
+          <span className={cn('text-meta font-medium tabular-nums', failed ? 'text-error-text' : 'text-fg-secondary')}>{text}</span>
+        </div>
+        <Progress label={name} value={done} max={total} status={done + failed >= total ? (failed ? 'failed' : 'done') : 'active'} />
+      </div>
+    </li>
+  );
+}
+
+/** UploadList — the rows of a batch. */
+export function UploadList({ className, ...rest }: ComponentProps<'ul'>) {
+  return <ul className={cn('m-0 flex flex-col gap-1 p-0', className)} {...rest} />;
+}
+
+/** While active, closing or reloading the page asks first. */
+export function useBeforeUnloadWhile(active: boolean): void {
+  useEffect(() => {
+    if (!active) return;
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = '';
+    };
+    window.addEventListener('beforeunload', onBeforeUnload);
+    return () => window.removeEventListener('beforeunload', onBeforeUnload);
+  }, [active]);
+}

package/src/components/VirtualList.tsx

@@ -0,0 +1,90 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useEffect, useRef, type CSSProperties, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Spinner } from './Spinner';
+
+export type VirtualListProps<T> = {
+  items: readonly T[];
+  /** Estimated row height in px (rows may differ; they are measured). @default 42 */
+  estimateSize?: number | undefined;
+  renderItem: (item: T, index: number) => ReactNode;
+  getKey?: ((item: T, index: number) => string | number) | undefined;
+  /** Rows rendered beyond the viewport. @default 8 */
+  overscan?: number | undefined;
+  /** The scroll box's height (the list scrolls inside it). */
+  height: number | string;
+  /** Accessible name of the list. */
+  label: string;
+  className?: string | undefined;
+  /** Rendered after the last row: an InfiniteLoader. */
+  footer?: ReactNode;
+};
+
+/**
+ * VirtualList — renders only the visible rows of a long list (thousands of
+ * items), measuring each as it appears. The rows are list items.
+ */
+export function VirtualList<T>({ items, estimateSize = 42, renderItem, getKey, overscan = 8, height, label, className, footer }: VirtualListProps<T>) {
+  const scroller = useRef<HTMLDivElement | null>(null);
+  const v = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scroller.current,
+    estimateSize: () => estimateSize,
+    overscan,
+    ...(getKey ? { getItemKey: (i: number) => getKey(items[i]!, i) } : {}),
+  });
+  return (
+    <div ref={scroller} className={cn('overflow-auto', className)} style={{ height }}>
+      <ul aria-label={label} className="relative m-0 list-none p-0" style={{ height: v.getTotalSize() }}>
+        {v.getVirtualItems().map((row) => (
+          <li
+            key={row.key}
+            data-index={row.index}
+            ref={v.measureElement}
+            className="absolute top-0 left-0 w-full"
+            style={{ transform: `translateY(${row.start}px)` } satisfies CSSProperties}
+          >
+            {renderItem(items[row.index]!, row.index)}
+          </li>
+        ))}
+      </ul>
+      {footer}
+    </div>
+  );
+}
+
+export type InfiniteLoaderProps = {
+  /** Called when the sentinel comes within `margin` of the viewport. */
+  onLoadMore: () => void;
+  hasMore: boolean;
+  loading?: boolean | undefined;
+  /** How early to load: the spec asks for 200px before the end. @default 200 */
+  margin?: number | undefined;
+  /** Read out while loading. @default "Loading more" */
+  loadingLabel?: string | undefined;
+  className?: string | undefined;
+};
+
+/** InfiniteLoader — a sentinel at the end of a list that asks for the next
+ *  page 200px before it comes into view. */
+export function InfiniteLoader({ onLoadMore, hasMore, loading = false, margin = 200, loadingLabel = 'Loading more', className }: InfiniteLoaderProps) {
+  const el = useRef<HTMLDivElement | null>(null);
+  const latest = useRef(onLoadMore);
+  latest.current = onLoadMore;
+
+  useEffect(() => {
+    const node = el.current;
+    if (!node || !hasMore || loading || typeof IntersectionObserver === 'undefined') return;
+    const io = new IntersectionObserver((entries) => entries.some((e) => e.isIntersecting) && latest.current(), { rootMargin: `0px 0px ${margin}px 0px` });
+    io.observe(node);
+    return () => io.disconnect();
+  }, [hasMore, loading, margin]);
+
+  if (!hasMore && !loading) return null;
+  return (
+    <div ref={el} className={cn('flex h-10 items-center justify-center text-fg-secondary', className)}>
+      {loading && <Spinner label={loadingLabel} />}
+    </div>
+  );
+}

package/src/components/WindowDrop.tsx

@@ -0,0 +1,131 @@
+import { Upload } from 'lucide-react';
+import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Icon } from './Icon';
+import { hasFiles, readDataTransfer, type DroppedFile } from './status-files';
+
+type WindowDropContextValue = {
+  /** Files are being dragged over the window: every drop target lights up. */
+  dragging: boolean;
+  /** A local zone under the pointer names its folder here (null on leave). */
+  setHoverTarget: (target: string | null) => void;
+};
+
+const WindowDropContext = createContext<WindowDropContextValue>({ dragging: false, setHoverTarget: () => {} });
+
+/** Inside a WindowDrop: whether files are being dragged over the window. */
+export function useWindowDrop(): WindowDropContextValue {
+  return useContext(WindowDropContext);
+}
+
+export type WindowDropProps = {
+  children: ReactNode;
+  /** Where a drop anywhere goes: the current folder, or "My uploads". */
+  target: string;
+  /** A drop outside any local zone. */
+  onDrop: (items: DroppedFile[], target: string) => void;
+  /** Read-only page: no layer — a line says you can only view here. */
+  readOnly?: boolean | undefined;
+  /** Force the layer open (previews, screenshots). */
+  open?: boolean | undefined;
+  onOpenChange?: ((open: boolean) => void) | undefined;
+  labels?: { release?: (target: string) => string; viewOnly?: string; close?: string } | undefined;
+};
+
+const dialogOpen = () => typeof document !== 'undefined' && document.querySelector('[role="dialog"], [role="alertdialog"]') !== null;
+
+/**
+ * WindowDrop — the whole window accepts a drop while files are dragged in
+ * (only files: text, links or cards dragged on the page never trigger it).
+ * A layer above the page, below dialogs, names where the files will go;
+ * hovering a folder or a local Dropzone changes that wording. It leaves at
+ * once when the drag exits the window, on Esc, or after the drop.
+ */
+export function WindowDrop({ children, target, onDrop, readOnly = false, open, onOpenChange, labels }: WindowDropProps) {
+  const [dragging, setDragging] = useState(false);
+  const [hoverTarget, setHoverTarget] = useState<string | null>(null);
+  const depth = useRef(0);
+
+  const set = useCallback(
+    (v: boolean) => {
+      setDragging(v);
+      if (!v) setHoverTarget(null);
+      onOpenChange?.(v);
+    },
+    [onOpenChange],
+  );
+
+  useEffect(() => {
+    const enter = (e: DragEvent) => {
+      if (!hasFiles(e.dataTransfer) || dialogOpen()) return;
+      depth.current += 1;
+      if (depth.current === 1) set(true);
+    };
+    const over = (e: DragEvent) => {
+      if (!hasFiles(e.dataTransfer) || dialogOpen()) return;
+      e.preventDefault(); // allow the drop
+      if (e.dataTransfer) e.dataTransfer.dropEffect = readOnly ? 'none' : 'copy';
+    };
+    const leave = (e: DragEvent) => {
+      if (!hasFiles(e.dataTransfer)) return;
+      depth.current = Math.max(0, depth.current - 1);
+      if (depth.current === 0) set(false);
+    };
+    const drop = (e: DragEvent) => {
+      if (!hasFiles(e.dataTransfer)) return;
+      e.preventDefault();
+      depth.current = 0;
+      set(false);
+      if (readOnly || !e.dataTransfer) return;
+      void readDataTransfer(e.dataTransfer).then((items) => items.length && onDrop(items, target));
+    };
+    const key = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        depth.current = 0;
+        set(false);
+      }
+    };
+    window.addEventListener('dragenter', enter);
+    window.addEventListener('dragover', over);
+    window.addEventListener('dragleave', leave);
+    window.addEventListener('drop', drop);
+    window.addEventListener('keydown', key);
+    return () => {
+      window.removeEventListener('dragenter', enter);
+      window.removeEventListener('dragover', over);
+      window.removeEventListener('dragleave', leave);
+      window.removeEventListener('drop', drop);
+      window.removeEventListener('keydown', key);
+    };
+  }, [onDrop, readOnly, set, target]);
+
+  const shown = open ?? dragging;
+  const release = labels?.release ?? ((t: string) => `Release to upload to ${t}`);
+
+  return (
+    <WindowDropContext.Provider value={{ dragging: shown, setHoverTarget }}>
+      {children}
+      {shown && (
+        <div
+          data-window-drop
+          role="presentation"
+          onClick={() => set(false)}
+          className="pointer-events-none fixed inset-0 z-40 flex items-end justify-center bg-page/60 p-6 font-sans"
+        >
+          <div
+            role="status"
+            aria-live="polite"
+            className={cn(
+              'pointer-events-auto flex items-center gap-3 rounded-lg px-5 py-4 text-body font-medium',
+              readOnly ? 'bg-ink text-linen' : 'border-2 border-ink bg-brand-field text-ink',
+            )}
+          >
+            {!readOnly && <Icon icon={Upload} size={18} />}
+            {readOnly ? (labels?.viewOnly ?? 'You can only view here') : release(hoverTarget ?? target)}
+          </div>
+        </div>
+      )}
+    </WindowDropContext.Provider>
+  );
+}

package/src/components/WorkspaceRow.tsx

@@ -0,0 +1,80 @@
+import { ChevronRight } from 'lucide-react';
+import { forwardRef, useEffect, useRef, useState, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Badge } from './Badge';
+import { Spinner } from './Spinner';
+
+export type WorkspaceMarkProps = {
+  name: string;
+  /** The workspace's logo; its initial on the yellow when unset or it fails to load. */
+  logoUrl?: string | undefined;
+  /** px. @default 36 */
+  size?: number | undefined;
+};
+
+/** WorkspaceMark — a workspace's logo, or its initial on the brand yellow. */
+export function WorkspaceMark({ name, logoUrl, size = 36 }: WorkspaceMarkProps) {
+  const [failed, setFailed] = useState(false);
+  const img = useRef<HTMLImageElement>(null);
+  // A server-rendered page can fail the image before React is listening:
+  // onError never fires, so look once it is.
+  useEffect(() => {
+    const el = img.current;
+    if (el?.complete && el.naturalWidth === 0) setFailed(true);
+  }, [logoUrl]);
+  if (logoUrl && !failed) {
+    return <img ref={img} src={logoUrl} alt="" aria-hidden style={{ width: size, height: size }} className="shrink-0 rounded-[8px] object-cover" onError={() => setFailed(true)} />;
+  }
+  return (
+    <span aria-hidden style={{ width: size, height: size }} className="grid shrink-0 place-items-center rounded-[8px] bg-brand-field text-[13px] font-semibold text-ink">
+      {name.trim().charAt(0).toUpperCase()}
+    </span>
+  );
+}
+
+export type WorkspaceRowProps = Omit<ComponentProps<'button'>, 'children'> & {
+  name: string;
+  /** The second line: the workspace's short name or address. */
+  detail?: ReactNode;
+  logoUrl?: string | undefined;
+  /** Being opened: a spinner in place of the chevron. */
+  busy?: boolean | undefined;
+  /** A state beside the chevron, as an attention badge: "Needs setup". */
+  badge?: ReactNode;
+};
+
+/**
+ * WorkspaceRow — one workspace in a chooser: mark, name, detail, chevron;
+ * `badge` says what it still needs ("Needs setup").
+ * The whole row is the button; `busy` shows it opening (disable the others).
+ */
+export const WorkspaceRow = forwardRef<HTMLButtonElement, WorkspaceRowProps>(function WorkspaceRow(
+  { name, detail, logoUrl, busy = false, badge, className, ...rest },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-busy={busy || undefined}
+      className={cn(
+        'flex w-full cursor-pointer items-center gap-3 rounded-[12px] border-0 bg-page px-3.5 py-3 text-left text-fg shadow-[inset_0_0_0_1px_var(--rule)] outline-none transition-colors duration-[120ms] hover:bg-hover focus-visible:shadow-(--focus-ring) disabled:cursor-default',
+        className,
+      )}
+      {...rest}
+    >
+      <WorkspaceMark name={name} logoUrl={logoUrl} />
+      <span className="flex min-w-0 flex-1 flex-col leading-[1.35]">
+        <span className="truncate text-[14px] font-medium">{name}</span>
+        {detail && <span className="truncate text-[12px] text-fg-secondary">{detail}</span>}
+      </span>
+      {badge && (
+        <span className="flex shrink-0">
+          <Badge status="attention">{badge}</Badge>
+        </span>
+      )}
+      {busy ? <Spinner size={16} /> : <ChevronRight size={16} aria-hidden className="text-fg-secondary" />}
+    </button>
+  );
+});

package/src/components/forms-control.ts

@@ -0,0 +1,36 @@
+import { cva } from 'class-variance-authority';
+
+/**
+ * The shared frame of text controls (Input, Textarea, Select trigger):
+ * sunk to linen, a --rule edge, ink edge + focus ring on focus, the one
+ * red on error, well + grey text when disabled. Single-line heights are
+ * fixed at 32 · 38 · 44 (Textarea overrides with h-auto).
+ */
+export const controlFrame = cva(
+  [
+    'flex w-full items-center gap-2 rounded-md border font-sans text-fg',
+    'transition-[border-color,background-color] duration-[120ms] ease-standard',
+  ],
+  {
+    variants: {
+      variant: {
+        default: 'border-rule bg-sunk focus-within:border-fg focus-within:shadow-(--focus-ring)',
+        borderless:
+          'border-transparent bg-transparent hover:bg-hover focus-within:border-fg focus-within:bg-sunk focus-within:shadow-(--focus-ring)',
+      },
+      size: {
+        sm: 'h-8 px-2.5 text-[13px]',
+        md: 'h-[38px] px-2.5 text-[13px]',
+        lg: 'h-11 px-3 text-[15px]',
+      },
+      invalid: { true: 'border-error focus-within:border-error', false: '' },
+      disabled: { true: 'cursor-not-allowed border-rule-soft bg-well text-fg-secondary', false: '' },
+      readOnly: { true: 'border-rule-soft', false: '' },
+    },
+    defaultVariants: { variant: 'default', size: 'md', invalid: false, disabled: false, readOnly: false },
+  },
+);
+
+/** The bare native element inside the frame. */
+export const controlInner =
+  'min-w-0 flex-1 border-none bg-transparent p-0 font-sans text-inherit outline-none placeholder:text-fg-secondary disabled:cursor-not-allowed';

package/src/components/inputs-aria.ts

@@ -0,0 +1,5 @@
+/** Only the aria props that were given — Radix roots reject explicit
+ *  undefined under exactOptionalPropertyTypes. */
+export function definedAria(aria: Record<string, string | undefined>): Record<string, string> {
+  return Object.fromEntries(Object.entries(aria).filter(([, v]) => v !== undefined)) as Record<string, string>;
+}