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

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/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>;
+}

package/src/components/inputs-date.ts

@@ -0,0 +1,92 @@
+// Date parsing for DateInput / FuzzyDateInput. Values are ISO strings
+// (YYYY-MM-DD, or YYYY-MM / YYYY for a fuzzy date) — no time zones.
+
+const MONTHS = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
+const MONTH_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+export type PartialDate = { year: number; month?: number | undefined; day?: number | undefined };
+
+const pad = (n: number) => String(n).padStart(2, '0');
+
+export function daysIn(year: number, month: number): number {
+  return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+
+function valid(p: PartialDate): boolean {
+  if (!Number.isInteger(p.year) || p.year < 1000 || p.year > 9999) return false;
+  if (p.month === undefined) return p.day === undefined;
+  if (p.month < 1 || p.month > 12) return false;
+  if (p.day === undefined) return true;
+  return p.day >= 1 && p.day <= daysIn(p.year, p.month);
+}
+
+function monthOf(word: string): number | undefined {
+  const i = MONTHS.indexOf(word.slice(0, 3).toLowerCase());
+  return i < 0 ? undefined : i + 1;
+}
+
+/**
+ * Parse what people type: 12/03/2019 (day first, British), 12.03.2019,
+ * 2019-03-12, 12 Mar 2019, March 12 2019, 2019年3月12日 — and, when
+ * `partial`, 2019-03, 03/2019, Mar 2019, 2019年3月, 2019. Returns null when
+ * it cannot tell.
+ */
+export function parseDate(text: string, { partial = false }: { partial?: boolean } = {}): PartialDate | null {
+  const t = text.trim().replace(/\s+/g, ' ');
+  if (!t) return null;
+  let m: RegExpMatchArray | null;
+  let p: PartialDate | null = null;
+  if ((m = t.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})$/))) p = { year: +m[1]!, month: +m[2]!, day: +m[3]! };
+  else if ((m = t.match(/^(\d{1,2})[-/.](\d{1,2})[-/.](\d{4})$/))) p = { year: +m[3]!, month: +m[2]!, day: +m[1]! };
+  else if ((m = t.match(/^(\d{1,2}) ([a-z]+)\.?,? (\d{4})$/i)) && monthOf(m[2]!)) p = { year: +m[3]!, month: monthOf(m[2]!), day: +m[1]! };
+  else if ((m = t.match(/^([a-z]+)\.? (\d{1,2}),? (\d{4})$/i)) && monthOf(m[1]!)) p = { year: +m[3]!, month: monthOf(m[1]!), day: +m[2]! };
+  else if ((m = t.match(/^(\d{4}) ?年 ?(\d{1,2}) ?月 ?(\d{1,2}) ?日?$/))) p = { year: +m[1]!, month: +m[2]!, day: +m[3]! };
+  else if (partial) {
+    if ((m = t.match(/^(\d{4})[-/.](\d{1,2})$/))) p = { year: +m[1]!, month: +m[2]! };
+    else if ((m = t.match(/^(\d{1,2})[-/.](\d{4})$/))) p = { year: +m[2]!, month: +m[1]! };
+    else if ((m = t.match(/^([a-z]+)\.? (\d{4})$/i)) && monthOf(m[1]!)) p = { year: +m[2]!, month: monthOf(m[1]!) };
+    else if ((m = t.match(/^(\d{4}) ?年 ?(\d{1,2}) ?月$/))) p = { year: +m[1]!, month: +m[2]! };
+    else if ((m = t.match(/^(\d{4})$/))) p = { year: +m[1]! };
+  }
+  return p && valid(p) ? p : null;
+}
+
+/** 2019-03-12 · 2019-03 · 2019 */
+export function toIso(p: PartialDate): string {
+  if (p.month === undefined) return String(p.year);
+  if (p.day === undefined) return `${p.year}-${pad(p.month)}`;
+  return `${p.year}-${pad(p.month)}-${pad(p.day)}`;
+}
+
+/** Inverse of toIso; null for anything else. */
+export function fromIso(iso: string | null | undefined): PartialDate | null {
+  if (!iso) return null;
+  const m = iso.match(/^(\d{4})(?:-(\d{2})(?:-(\d{2}))?)?$/);
+  if (!m) return null;
+  const p: PartialDate = { year: +m[1]!, month: m[2] ? +m[2] : undefined, day: m[3] ? +m[3] : undefined };
+  return valid(p) ? p : null;
+}
+
+/** 12 Mar 2019 · Mar 2019 · 2019 — or 2019 年 3 月 12 日 in Chinese. */
+export function formatDate(p: PartialDate, lang: 'en' | 'zh' = 'en'): string {
+  if (lang === 'zh') {
+    return `${p.year} 年${p.month ? ` ${p.month} 月` : ''}${p.day ? ` ${p.day} 日` : ''}`;
+  }
+  if (p.month === undefined) return String(p.year);
+  const mon = MONTH_NAMES[p.month - 1]!;
+  return p.day === undefined ? `${mon} ${p.year}` : `${p.day} ${mon} ${p.year}`;
+}
+
+export function toDate(p: PartialDate): Date {
+  return new Date(p.year, (p.month ?? 1) - 1, p.day ?? 1);
+}
+
+export function fromDate(d: Date): PartialDate {
+  return { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() };
+}
+
+/** zh when the element (or page) is Chinese. */
+export function langOf(el: Element | null): 'en' | 'zh' {
+  const lang = (el?.closest('[lang]')?.getAttribute('lang') ?? (typeof document !== 'undefined' ? document.documentElement.lang : '')).toLowerCase();
+  return lang.startsWith('zh') ? 'zh' : 'en';
+}

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/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]);
+}