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

package/src/components/inputs-listbox.tsx

@@ -0,0 +1,154 @@
+import { Plus } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import type { SearchStatus } from './inputs-search';
+import { Spinner } from './Spinner';
+
+export type ListItem = {
+  value: string;
+  label: string;
+  /** Right-hand line: Customer · 3 projects. */
+  meta?: string | undefined;
+  /** Initials in the avatar square (HV). Derived from the label if omitted. */
+  initials?: string | undefined;
+};
+
+export function initialsOf(item: ListItem): string {
+  if (item.initials) return item.initials;
+  const words = item.label.trim().split(/\s+/);
+  const first = words[0] ?? '';
+  // One hanzi reads as an initial on its own (王).
+  if (/[㐀-鿿]/.test(first)) return first[0]!;
+  return ((first[0] ?? '') + (words.length > 1 ? (words[words.length - 1]![0] ?? '') : '')).toUpperCase();
+}
+
+export function Avatar({ item, className }: { item: ListItem; className?: string | undefined }) {
+  return (
+    <span aria-hidden className={cn('inline-grid size-6 shrink-0 place-items-center rounded-pill bg-well text-[10.5px] font-semibold text-fg', className)}>
+      {initialsOf(item)}
+    </span>
+  );
+}
+
+export type ListboxLabels = {
+  searching: string;
+  empty: (query: string) => string;
+  error: string;
+  retry: string;
+  create: (query: string) => string;
+};
+
+export const DEFAULT_LABELS: ListboxLabels = {
+  searching: 'Searching',
+  empty: (q) => `Nothing matches “${q}”.`,
+  error: 'Couldn’t load results.',
+  retry: 'Retry',
+  create: (q) => `Create “${q}”`,
+};
+
+/** Rows of an async listbox: results, then an optional Create row; or one state row. */
+export function ListboxBody({
+  id,
+  optionId,
+  items,
+  active,
+  status,
+  query,
+  canCreate,
+  labels,
+  onActive,
+  onChoose,
+  onRetry,
+  selectedValues,
+}: {
+  id: string;
+  optionId: (i: number) => string;
+  items: ListItem[];
+  /** Index of the active row; items.length means the Create row. */
+  active: number;
+  status: SearchStatus;
+  query: string;
+  canCreate: boolean;
+  labels: ListboxLabels;
+  onActive: (i: number) => void;
+  onChoose: (i: number) => void;
+  onRetry: () => void;
+  selectedValues?: ReadonlySet<string>;
+}) {
+  const row = (i: number, content: ReactNode, selected = false) => (
+    <div
+      key={optionId(i)}
+      id={optionId(i)}
+      role="option"
+      aria-selected={selected}
+      data-active={i === active || undefined}
+      onMouseMove={() => i !== active && onActive(i)}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => onChoose(i)}
+      className={cn(
+        'flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-[13px] leading-[1.35] text-fg',
+        i === active ? 'bg-brand-field text-ink' : selected && 'bg-hover',
+      )}
+    >
+      {content}
+    </div>
+  );
+
+  let state: ReactNode = null;
+  if (status === 'searching') {
+    state = (
+      <div className="flex items-center gap-2 px-2.5 py-2.5 text-[12.5px] text-fg-secondary">
+        <Spinner size={12} /> {labels.searching}
+      </div>
+    );
+  } else if (status === 'error') {
+    state = (
+      <div className="flex items-center gap-2 px-2.5 py-2 text-[12.5px] text-fg-secondary">
+        <span className="flex-1">{labels.error}</span>
+        <button
+          type="button"
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={onRetry}
+          className="cursor-pointer rounded-xs font-medium text-fg underline underline-offset-3 outline-none focus-visible:shadow-(--focus-ring)"
+        >
+          {labels.retry}
+        </button>
+      </div>
+    );
+  } else if (status === 'done' && items.length === 0 && !canCreate) {
+    state = <div className="px-2.5 py-2.5 text-[12.5px] text-fg-secondary">{labels.empty(query)}</div>;
+  }
+
+  return (
+    <div id={id} role="listbox" className="flex max-h-[260px] flex-col overflow-y-auto">
+      {status === 'done' &&
+        items.map((it, i) =>
+          row(
+            i,
+            <>
+              <Avatar item={it} className={i === active ? 'bg-ink text-linen' : undefined} />
+              <span className="min-w-0 flex-1 truncate">{it.label}</span>
+              {it.meta && <span className="shrink-0 text-meta text-fg-secondary">{it.meta}</span>}
+            </>,
+            selectedValues?.has(it.value),
+          ),
+        )}
+      {status === 'done' && items.length === 0 && canCreate && (
+        <div className="px-2.5 pt-1.5 pb-1 text-meta text-fg-secondary">{labels.empty(query)}</div>
+      )}
+      {status === 'done' &&
+        canCreate &&
+        row(
+          items.length,
+          <>
+            <span aria-hidden className="inline-grid size-6 shrink-0 place-items-center rounded-sm border border-dashed border-rule text-fg-secondary">
+              <Plus size={13} />
+            </span>
+            <span className="font-medium">{labels.create(query)}</span>
+          </>,
+        )}
+      {state}
+    </div>
+  );
+}

package/src/components/inputs-search.ts

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export type SearchStatus = 'idle' | 'searching' | 'done' | 'error';
+
+/**
+ * Debounced, cancellable search. Each new query aborts the previous
+ * request (its AbortSignal fires) and a late answer to an old query is
+ * dropped, so results never flicker back. While a request is pending the
+ * status is "searching" — callers show a spinner, never "No results".
+ */
+export function useDebouncedSearch<T>(
+  query: string,
+  search: ((query: string, signal: AbortSignal) => Promise<T>) | undefined,
+  { delay = 250, minLength = 1 }: { delay?: number; minLength?: number } = {},
+) {
+  const [status, setStatus] = useState<SearchStatus>('idle');
+  const [result, setResult] = useState<T | undefined>(undefined);
+  const [error, setError] = useState<unknown>(null);
+  const [attempt, setAttempt] = useState(0);
+  const seq = useRef(0);
+  const ctrl = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    const q = query.trim();
+    ctrl.current?.abort();
+    ctrl.current = null;
+    if (!search || q.length < minLength) {
+      seq.current++;
+      setStatus('idle');
+      setResult(undefined);
+      setError(null);
+      return;
+    }
+    setStatus('searching');
+    const mine = ++seq.current;
+    const timer = setTimeout(() => {
+      const c = new AbortController();
+      ctrl.current = c;
+      search(q, c.signal).then(
+        (r) => {
+          if (mine !== seq.current || c.signal.aborted) return;
+          setResult(r);
+          setError(null);
+          setStatus('done');
+        },
+        (e: unknown) => {
+          if (mine !== seq.current || c.signal.aborted) return;
+          setError(e);
+          setStatus('error');
+        },
+      );
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [query, search, delay, minLength, attempt]);
+
+  useEffect(() => () => ctrl.current?.abort(), []);
+
+  const retry = useCallback(() => setAttempt((a) => a + 1), []);
+  return { status, result, error, retry };
+}

package/src/components/logo-art.ts

@@ -0,0 +1,4 @@
+// Generated by scripts/gen-logo.mjs from the COSX Design System 3.0
+// logo artwork. Do not edit — regenerate.
+export const WORDMARK = {"viewBox":"32 113 225 62","paths":["M242.79,170.43L228.93,152.02L215.07,170.43L204.43,170.43L223.66,145.02L204.29,119.29L214.99,119.29L229.06,137.89L243.14,119.29L253.58,119.29L234.34,144.85L253.7,170.43L242.79,170.43Z","M121.49,172.05a27.37,27.37,0,0,1-25.91-18.53l-1.17-3.42L84.33,161.86l-.49.58-.62.71A27.39,27.39,0,1,1,82,125l-5.92,5.89A18.25,18.25,0,0,0,63,125.36c-10.31,0-18.71,8.65-18.71,19.28s8.4,19.28,18.71,19.28A18.6,18.6,0,0,0,77.22,157c2.12-2.47,4.1-5.09,6-7.63,1-1.27,2-2.69,3.08-4l12.09-15.45.07-.09a25,25,0,0,1,2.91-3.48l.36-.38a27.07,27.07,0,0,1,19.74-8.69,27.38,27.38,0,1,1,0,54.76Zm0-46.69c-10.32,0-18.71,8.65-18.71,19.28s8.39,19.28,18.71,19.28,18.71-8.65,18.71-19.28S131.81,125.36,121.49,125.36Z","M177.23,171.65a34.27,34.27,0,0,1-22.3-8.3l3.65-7.11c5.58,4.82,12.57,7.68,18.81,7.68,6.85,0,10.93-2.65,10.93-7.08,0-5.71-6.22-7.48-12.82-9.35-8.16-2.31-17.41-4.94-17.41-15.42,0-8.94,7.83-14.72,19.94-14.72a36.71,36.71,0,0,1,19,5.31L193.51,130c-5.34-3.06-11.36-4.87-16.2-4.87-6,0-9.57,2.29-9.57,6.14,0,5.56,6.13,7.36,12.63,9.28,8.23,2.43,17.56,5.18,17.52,15.87C197.89,165.51,189.58,171.65,177.23,171.65Z"]} as const;
+export const LOOP = {"viewBox":"0 0 289.34 289.34","paths":["M193.32,99.1a45.06,45.06,0,0,0-32.85,14.46l-.59.64A41.46,41.46,0,0,0,155,120l-.1.16-20.13,25.7c-1.74,2.22-3.53,4.58-5.12,6.69-3.2,4.22-6.5,8.59-10,12.7-6.31,7.39-14.71,11.46-23.63,11.46-17.17,0-31.13-14.39-31.13-32.08h0c0-17.69,14-32.08,31.13-32.08a30.37,30.37,0,0,1,21.8,9.19l9.85-9.81a45.55,45.55,0,1,0,2,63.51l1-1.19.83-1,16.76-19.56,1.95,5.69a45.57,45.57,0,1,0,43.12-60.3Zm0,77.6c-17.17,0-31.14-14.39-31.14-32.08s14-32.08,31.14-32.08,31.13,14.39,31.13,32.08S210.49,176.7,193.32,176.7Z"]} as const;

package/src/components/status-files.ts

@@ -0,0 +1,124 @@
+// Shared by Dropzone, WindowDrop and UploadCheck: what was dropped, and
+// whether each item may upload.
+
+/** A file with its path inside a dropped folder ("Q3/Financials/a.pdf"). */
+export type DroppedFile = { file: File; path: string };
+
+export type RejectReason = 'type' | 'size' | 'depth';
+export type Rejected = DroppedFile & { reason: RejectReason };
+
+export type FileRules = {
+  /** e.g. ".pdf,.docx,image/*" — empty accepts everything. */
+  accept?: string | undefined;
+  /** Per-file limit in bytes. @default 2 GB */
+  maxSize?: number | undefined;
+  /** Deepest folder level accepted (a/b/c = 3). @default 6 */
+  maxDepth?: number | undefined;
+};
+
+export const DEFAULT_MAX_SIZE = 2 * 1000 ** 3; // "2 GB"
+export const DEFAULT_MAX_DEPTH = 6;
+
+/** A drag carries files (not text, links or cards dragged on the page). */
+export function hasFiles(dt: DataTransfer | null | undefined): boolean {
+  if (!dt) return false;
+  return Array.from(dt.types ?? []).includes('Files');
+}
+
+/** Decimal units, as the spec writes sizes (318 MB, 1.2 of 3.4 MB) and as macOS shows them. */
+export function formatBytes(n: number): string {
+  if (n < 1000) return `${n} B`;
+  const units = ['KB', 'MB', 'GB', 'TB'];
+  let v = n / 1000;
+  let i = 0;
+  while (v >= 1000 && i < units.length - 1) {
+    v /= 1000;
+    i++;
+  }
+  return `${v >= 10 || Number.isInteger(v) ? Math.round(v) : v.toFixed(1)} ${units[i]}`;
+}
+
+function matchesAccept(file: File, accept: string | undefined): boolean {
+  if (!accept?.trim()) return true;
+  const name = file.name.toLowerCase();
+  const type = (file.type || '').toLowerCase();
+  return accept
+    .split(',')
+    .map((a) => a.trim().toLowerCase())
+    .filter(Boolean)
+    .some((a) => (a.startsWith('.') ? name.endsWith(a) : a.endsWith('/*') ? type.startsWith(a.slice(0, -1)) : type === a));
+}
+
+/** Folder depth of a path: "a.pdf" → 0, "Q3/a.pdf" → 1. */
+export function depthOf(path: string): number {
+  return Math.max(0, path.split('/').length - 1);
+}
+
+/** Hidden items (a segment starting with "."), unticked by default. */
+export function isHidden(path: string): boolean {
+  return path.split('/').some((s) => s.startsWith('.'));
+}
+
+export function checkFiles(items: DroppedFile[], rules: FileRules = {}): { accepted: DroppedFile[]; rejected: Rejected[] } {
+  const maxSize = rules.maxSize ?? DEFAULT_MAX_SIZE;
+  const maxDepth = rules.maxDepth ?? DEFAULT_MAX_DEPTH;
+  const accepted: DroppedFile[] = [];
+  const rejected: Rejected[] = [];
+  for (const it of items) {
+    if (depthOf(it.path) > maxDepth) rejected.push({ ...it, reason: 'depth' });
+    else if (!matchesAccept(it.file, rules.accept)) rejected.push({ ...it, reason: 'type' });
+    else if (it.file.size > maxSize) rejected.push({ ...it, reason: 'size' });
+    else accepted.push(it);
+  }
+  return { accepted, rejected };
+}
+
+// Minimal shapes of the (non-standard, universally shipped) entry API.
+type Entry = { isFile: boolean; isDirectory: boolean; name: string; fullPath?: string };
+type FileEntry = Entry & { file: (ok: (f: File) => void, fail: (e: unknown) => void) => void };
+type DirEntry = Entry & { createReader: () => { readEntries: (ok: (e: Entry[]) => void, fail: (e: unknown) => void) => void } };
+
+async function walk(entry: Entry, prefix: string, out: DroppedFile[]): Promise<void> {
+  const path = prefix ? `${prefix}/${entry.name}` : entry.name;
+  if (entry.isFile) {
+    const file = await new Promise<File>((ok, fail) => (entry as FileEntry).file(ok, fail));
+    out.push({ file, path });
+    return;
+  }
+  if (!entry.isDirectory) return;
+  const reader = (entry as DirEntry).createReader();
+  // readEntries returns batches (≤100 in Chrome) until an empty one.
+  for (;;) {
+    const batch = await new Promise<Entry[]>((ok, fail) => reader.readEntries(ok, fail));
+    if (!batch.length) break;
+    for (const child of batch) await walk(child, path, out);
+  }
+}
+
+/** Everything in a drop, folders read recursively into files with paths. */
+export async function readDataTransfer(dt: DataTransfer): Promise<DroppedFile[]> {
+  const items = Array.from(dt.items ?? []);
+  const entries = items
+    .filter((i) => i.kind === 'file')
+    .map((i) => (i as DataTransferItem & { webkitGetAsEntry?: () => Entry | null }).webkitGetAsEntry?.() ?? null);
+  if (entries.length && entries.every(Boolean)) {
+    const out: DroppedFile[] = [];
+    for (const e of entries) await walk(e!, '', out);
+    return out;
+  }
+  return Array.from(dt.files ?? []).map((file) => ({ file, path: file.name }));
+}
+
+/** Files from an <input type="file"> (webkitdirectory gives relative paths). */
+export function fromInput(files: FileList | null): DroppedFile[] {
+  return Array.from(files ?? []).map((file) => ({
+    file,
+    path: (file as File & { webkitRelativePath?: string }).webkitRelativePath || file.name,
+  }));
+}
+
+/** "3 files · 1 folder" for what is being dragged or dropped. */
+export function describeDrop(items: DroppedFile[]): { files: number; folders: number } {
+  const folders = new Set(items.map((i) => i.path.split('/')).filter((p) => p.length > 1).map((p) => p[0]));
+  return { files: items.filter((i) => depthOf(i.path) === 0).length, folders: folders.size };
+}

package/src/components/status-motion.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState, type RefObject } from 'react';
+
+const REDUCE = '(prefers-reduced-motion: reduce)';
+
+/** Whether the person asked for reduced motion (live). */
+export function useReducedMotion(): boolean {
+  const [reduce, setReduce] = useState(() => typeof window !== 'undefined' && window.matchMedia?.(REDUCE).matches === true);
+  useEffect(() => {
+    const mq = window.matchMedia?.(REDUCE);
+    if (!mq) return;
+    const on = (e: MediaQueryListEvent) => setReduce(e.matches);
+    mq.addEventListener('change', on);
+    return () => mq.removeEventListener('change', on);
+  }, []);
+  return reduce;
+}
+
+/** A looping Web Animation on ref — none under reduced motion (the
+ *  element keeps its still style) and none where the API is missing. */
+export function useLoop(ref: RefObject<HTMLElement | null>, keyframes: Keyframe[], options: KeyframeAnimationOptions, on = true): void {
+  const reduce = useReducedMotion();
+  const key = JSON.stringify([keyframes, options]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!on || reduce || !el || typeof el.animate !== 'function') return;
+    const a = el.animate(keyframes, { iterations: Infinity, ...options });
+    return () => a.cancel();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [on, reduce, key]);
+}

package/src/components/useButtonAction.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { ButtonState } from './Button';
+
+export type ButtonAction<A extends unknown[]> = {
+  /** Pass to <Button state>. */
+  state: ButtonState;
+  /** The last failure, to explain beside the button (with a Retry). Cleared on the next run. */
+  error: unknown;
+  /** Run the action: busy → done for `doneFor` ms → idle; on failure → idle with `error` set. */
+  run: (...args: A) => Promise<void>;
+};
+
+/**
+ * useButtonAction — the async button of the spec: busy while the action
+ * runs, the result confirmed in place for 1.6s, a failure kept for the
+ * caller to explain in place. Repeat runs while busy are ignored.
+ */
+export function useButtonAction<A extends unknown[]>(action: (...args: A) => Promise<unknown>, { doneFor = 1600 }: { doneFor?: number } = {}): ButtonAction<A> {
+  const [state, setState] = useState<ButtonState>('idle');
+  const [error, setError] = useState<unknown>(null);
+  const busy = useRef(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const alive = useRef(true);
+
+  useEffect(
+    () => () => {
+      alive.current = false;
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  const run = useCallback(
+    async (...args: A) => {
+      if (busy.current) return;
+      busy.current = true;
+      setError(null);
+      setState('busy');
+      try {
+        await action(...args);
+        if (!alive.current) return;
+        setState('done');
+        timer.current = setTimeout(() => alive.current && setState('idle'), doneFor);
+      } catch (e) {
+        if (!alive.current) return;
+        setError(e);
+        setState('idle');
+      } finally {
+        busy.current = false;
+      }
+    },
+    [action, doneFor],
+  );
+
+  return { state, error, run };
+}

package/src/components/useSelection.ts

@@ -0,0 +1,142 @@
+import { useCallback, useMemo, useRef, useState, type KeyboardEvent, type MouseEvent } from 'react';
+
+export type SelectionOptions = {
+  /** Every selectable id, in display order (ranges follow this order). */
+  ids: readonly string[];
+  /** Controlled selection. */
+  selected?: ReadonlySet<string> | readonly string[] | undefined;
+  /** Uncontrolled starting selection. */
+  defaultSelected?: readonly string[] | undefined;
+  onChange?: ((selected: Set<string>) => void) | undefined;
+  /**
+   * Selection mode: a plain click toggles instead of opening. Unset: on
+   * while anything is selected (ticking one box enters it, clearing leaves).
+   */
+  selectionMode?: boolean | undefined;
+};
+
+export type Selection = {
+  selected: Set<string>;
+  count: number;
+  isSelected: (id: string) => boolean;
+  /** True when a plain click toggles (see SelectionOptions.selectionMode). */
+  selectionMode: boolean;
+  toggle: (id: string) => void;
+  /** Select from the anchor (last clicked) to id, keeping what is selected. */
+  selectRange: (id: string) => void;
+  selectAll: () => void;
+  clear: () => void;
+  set: (ids: Iterable<string>) => void;
+  /**
+   * The click on an item: ⇧ selects a range, ⌘/Ctrl toggles, a plain click
+   * toggles in selection mode. Returns true when it handled the click —
+   * otherwise the caller opens the item.
+   */
+  handleClick: (id: string, event: Pick<MouseEvent, 'shiftKey' | 'metaKey' | 'ctrlKey'>) => boolean;
+  /** For the list container: ⌘/Ctrl-A selects all, Esc clears. */
+  onKeyDown: (event: KeyboardEvent) => void;
+};
+
+function toSet(v: ReadonlySet<string> | readonly string[] | undefined): Set<string> | undefined {
+  if (v === undefined) return undefined;
+  return new Set(v);
+}
+
+/**
+ * useSelection — the selection model every list and grid shares: click,
+ * ⇧-click range, ⌘/Ctrl-click toggle, ⌘A, Esc. In selection mode the whole
+ * card or row is the checkbox.
+ */
+export function useSelection({ ids, selected, defaultSelected, onChange, selectionMode }: SelectionOptions): Selection {
+  const [inner, setInner] = useState<Set<string>>(() => new Set(defaultSelected ?? []));
+  const controlled = toSet(selected);
+  const current = useMemo(() => controlled ?? inner, [controlled, inner]);
+  const anchor = useRef<string | null>(null);
+
+  const commit = useCallback(
+    (next: Set<string>) => {
+      if (!controlled) setInner(next);
+      onChange?.(next);
+    },
+    [controlled, onChange],
+  );
+
+  const toggle = useCallback(
+    (id: string) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      anchor.current = id;
+      commit(next);
+    },
+    [current, commit],
+  );
+
+  const selectRange = useCallback(
+    (id: string) => {
+      const from = anchor.current === null ? -1 : ids.indexOf(anchor.current);
+      const to = ids.indexOf(id);
+      if (to < 0) return;
+      const next = new Set(current);
+      if (from < 0) next.add(id);
+      else for (let i = Math.min(from, to); i <= Math.max(from, to); i++) next.add(ids[i]!);
+      anchor.current = id;
+      commit(next);
+    },
+    [ids, current, commit],
+  );
+
+  const selectAll = useCallback(() => commit(new Set(ids)), [ids, commit]);
+  const clear = useCallback(() => {
+    anchor.current = null;
+    commit(new Set());
+  }, [commit]);
+  const set = useCallback((next: Iterable<string>) => commit(new Set(next)), [commit]);
+
+  const mode = selectionMode ?? current.size > 0;
+
+  const handleClick = useCallback<Selection['handleClick']>(
+    (id, e) => {
+      if (e.shiftKey) {
+        selectRange(id);
+        return true;
+      }
+      if (e.metaKey || e.ctrlKey || mode) {
+        toggle(id);
+        return true;
+      }
+      anchor.current = id;
+      return false;
+    },
+    [mode, selectRange, toggle],
+  );
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement | null;
+      const typing = target?.closest('input, textarea, [contenteditable="true"]');
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'a' && !typing) {
+        e.preventDefault();
+        selectAll();
+      } else if (e.key === 'Escape' && current.size > 0) {
+        e.preventDefault();
+        clear();
+      }
+    },
+    [selectAll, clear, current.size],
+  );
+
+  return {
+    selected: current,
+    count: current.size,
+    isSelected: (id) => current.has(id),
+    selectionMode: mode,
+    toggle,
+    selectRange,
+    selectAll,
+    clear,
+    set,
+    handleClick,
+    onKeyDown,
+  };
+}

package/src/index.ts

@@ -2,7 +2,72 @@
  * @cosxai/ui 1.x — the COSX Design System 3.0 in React.
  *
  * Foundations: import "@cosxai/ui/styles.css" (tokens + fonts) and, in a
- * Tailwind v4 app, "@cosxai/ui/theme.css". Components arrive in the 1.0
- * alphas (docs/workdocs/2026-09-29_feature-ui-1.0).
+ * Tailwind v4 app, "@cosxai/ui/theme.css". Plan and status:
+ * docs/workdocs/2026-09-29_feature-ui-1.0.
  */
 export { cn } from './lib/cn';
+
+export { Badge, type BadgeAppearance, type BadgeProps, type BadgeStatus } from './components/Badge';
+export { Button, formatCount, type ButtonGround, type ButtonProps, type ButtonState, type ButtonVariant } from './components/Button';
+export { Card, type CardProps } from './components/Card';
+export { Figure, type FigureProps } from './components/Figure';
+export { Icon, type IconProps } from './components/Icon';
+export { IconButton, type IconButtonProps } from './components/IconButton';
+export { Logo, type LogoProps } from './components/Logo';
+export { Marker, type MarkerProps } from './components/Marker';
+export { MetaLabel, type MetaLabelProps } from './components/MetaLabel';
+export { Spinner, type SpinnerProps } from './components/Spinner';
+export { Tag, type TagProps } from './components/Tag';
+export { ThemeProvider, useTheme, type ThemeMode, type ThemeProviderProps } from './components/ThemeProvider';
+export { useButtonAction, type ButtonAction } from './components/useButtonAction';
+
+export { Checkbox, type CheckboxProps } from './components/Checkbox';
+export { Dialog, DialogClose, DialogContent, DialogTrigger, type DialogContentProps } from './components/Dialog';
+export { Field, useField, type FieldContextValue, type FieldProps } from './components/Field';
+export { Input, type InputProps } from './components/Input';
+export { RadioGroup, type RadioGroupProps, type RadioOption } from './components/Radio';
+export { Select, type SelectOption, type SelectProps } from './components/Select';
+export { Switch, type SwitchProps } from './components/Switch';
+export { Table, type TableColumn, type TableProps, type TableRowBase, type TableSort, type TableSortDirection } from './components/Table';
+export { Tab, TabList, TabPanel, Tabs, type TabItem, type TabListProps, type TabPanelProps, type TabProps, type TabsProps, type TabsVariant } from './components/Tabs';
+export { Textarea, type TextareaProps } from './components/Textarea';
+export { Toaster, toast, type ToasterProps, type ToastLabels, type ToastOptions, type ToastStatus } from './components/Toast';
+export { Tooltip, TooltipProvider, type TooltipProps } from './components/Tooltip';
+
+// Stage 2 — product patterns
+export { ActionBar, ActionBarProvider, arrange, formatShortcut, useActionBarActivity, useActionBarHidden, useActionBarItems, useActionBarMode, useActionBarSelection, type ActionBarAction, type ActionBarLabels, type ActionBarMode, type ActionBarPresentation, type ActionBarProps, type ActionBarProviderProps, type ActionBarSelection, type ActionBarState } from './components/ActionBar';
+export { ActivityTimeline, initialsOf, type ActivityEvent, type ActivityGroup, type ActivityTimelineProps } from './components/ActivityTimeline';
+export { AsyncSelect, type AsyncSelectProps } from './components/AsyncSelect';
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps } from './components/Breadcrumb';
+export { ChoiceCards, type Choice, type ChoiceCardsProps } from './components/ChoiceCards';
+export { CodeInput, type CodeInputProps } from './components/CodeInput';
+export { CommandPalette, useCommandPaletteHotkey, type CommandItem, type CommandPaletteLabels, type CommandPaletteProps, type CommandSource } from './components/CommandPalette';
+export { ConfirmDialog, PromptDialog, StepUpDialog, type ConfirmDialogProps, type PromptDialogProps, type StepUpDialogProps } from './components/ConfirmDialog';
+export { CopyField, type CopyFieldProps } from './components/CopyField';
+export { DateInput, FuzzyDateInput, type DateInputProps, type DatePrecision, type FuzzyDateInputProps } from './components/DateInput';
+export { Dropzone, refusedText, type DropzoneLabels, type DropzoneProps } from './components/Dropzone';
+export { FileCard, type FileCardProps, type FileCardState } from './components/FileCard';
+export { FileList, FileRow, type FileListProps, type FileRowProps } from './components/FileRow';
+export { FolderTree, type FolderTreeProps, type TreeNode } from './components/FolderTree';
+export { type ListItem } from './components/inputs-listbox';
+export { ListToolbar, type ListFilter, type ListToolbarLabels, type ListToolbarProps, type ListView, type SearchScope } from './components/ListToolbar';
+export { MentionInput, mentionAt, type Mention, type MentionInputProps } from './components/MentionInput';
+export { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, type MenuCheckboxItemProps, type MenuContentProps, type MenuItemProps, type MenuSubTriggerProps } from './components/Menu';
+export { PageHeader, type PageHeaderFigure, type PageHeaderProps } from './components/PageHeader';
+export { PageNotice, PageState, type PageNoticeProps, type PageStateKind, type PageStateProps } from './components/PageState';
+export { Progress, progressStep, type ProgressProps, type ProgressSegment } from './components/Progress';
+export { PulseDot, type PulseDotProps } from './components/PulseDot';
+export { RecipientsInput, type Recipient, type RecipientStatus, type RecipientsInputProps } from './components/RecipientsInput';
+export { SearchField, type SearchFieldProps } from './components/SearchField';
+export { SegmentedControl, type Segment, type SegmentedControlProps } from './components/SegmentedControl';
+export { SidePanel, SidePanelProvider, SidePanelSlot, useSidePanel, type SidePanelProps } from './components/SidePanel';
+export { Skeleton, SkeletonCards, SkeletonList, SkeletonViewer, type SkeletonProps, type SkeletonViewerProps } from './components/Skeleton';
+export { StageProgress, type Stage, type StageProgressProps } from './components/StageProgress';
+export { checkFiles, formatBytes, hasFiles, readDataTransfer, type DroppedFile, type FileRules, type Rejected, type RejectReason } from './components/status-files';
+export { Steps, type Step, type StepState, type StepsProps } from './components/Steps';
+export { SyncStatus, type SyncState, type SyncStatusProps } from './components/SyncStatus';
+export { UploadCheck, groupByFolder, type UploadCheckLabels, type UploadCheckProps } from './components/UploadCheck';
+export { UploadFolderRow, UploadList, UploadRow, useBeforeUnloadWhile, type UploadItem, type UploadRowLabels, type UploadRowProps, type UploadState } from './components/UploadList';
+export { useSelection, type Selection, type SelectionOptions } from './components/useSelection';
+export { InfiniteLoader, VirtualList, type InfiniteLoaderProps, type VirtualListProps } from './components/VirtualList';
+export { WindowDrop, useWindowDrop, type WindowDropProps } from './components/WindowDrop';

package/src/modes.css

@@ -0,0 +1,10 @@
+/* @cosxai/ui — ink mode, completed.
+ *
+ * 3.0 switches its colours on either data-mode="ink" (root) or .ink-mode
+ * (subtree) — colors.css — but its marker rules (typography.css,
+ * typography-cjk.css) only know .ink-mode. Same rules for data-mode, so a
+ * page in ink mode gets the ink marker: no band, the finding in accent
+ * yellow. Reported to the design system; drop this when 3.0 covers it.
+ */
+[data-mode="ink"] .marker { color: var(--yellow-accent); background: none; padding: 0; margin: 0; border-radius: 0; }
+[data-mode="ink"] :lang(zh) .marker, :lang(zh)[data-mode="ink"] .marker { background: none; }

package/src/styles.css

@@ -14,4 +14,6 @@
 @import "./tokens/elevation.css";
 @import "./tokens/motion.css";
 @import "./tokens/compat.css";
+@import "./brand.css";
+@import "./modes.css";
 @import "./fonts.css";