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

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

@@ -33,3 +33,41 @@ export { Tab, TabList, TabPanel, Tabs, type TabItem, type TabListProps, type Tab
 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/components/core.test.tsx

@@ -1,242 +0,0 @@
-import { act, render, renderHook, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Share2, Star } from 'lucide-react';
-import { describe, expect, it, vi } from 'vitest';
-
-import { a11y } from '../../test/a11y';
-import { Badge } from './Badge';
-import { Button, formatCount } from './Button';
-import { Card } from './Card';
-import { Figure } from './Figure';
-import { IconButton } from './IconButton';
-import { Logo } from './Logo';
-import { Marker } from './Marker';
-import { MetaLabel } from './MetaLabel';
-import { Tag } from './Tag';
-import { ThemeProvider, useTheme } from './ThemeProvider';
-import { useButtonAction } from './useButtonAction';
-
-describe('Button', () => {
-  it('is a type=button that clicks', async () => {
-    const onClick = vi.fn();
-    render(<Button onClick={onClick}>Publish register</Button>);
-    const b = screen.getByRole('button', { name: 'Publish register' });
-    expect(b).toHaveAttribute('type', 'button');
-    await userEvent.click(b);
-    expect(onClick).toHaveBeenCalledOnce();
-  });
-
-  it('disabled with a reason stays focusable, explains itself, ignores clicks', async () => {
-    const onClick = vi.fn();
-    render(
-      <Button disabled disabledReason="Downloads are off for this share" onClick={onClick}>
-        Share
-      </Button>,
-    );
-    const b = screen.getByRole('button', { name: 'Share' });
-    expect(b).not.toBeDisabled();
-    expect(b).toHaveAttribute('aria-disabled', 'true');
-    expect(b).toHaveAttribute('title', 'Downloads are off for this share');
-    await userEvent.click(b);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  it('busy: aria-busy, keeps its name, ignores clicks', async () => {
-    const onClick = vi.fn();
-    render(
-      <Button state="busy" onClick={onClick}>
-        Publish
-      </Button>,
-    );
-    const b = screen.getByRole('button', { name: 'Publish' });
-    expect(b).toHaveAttribute('aria-busy', 'true');
-    await userEvent.click(b);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  it('done shows the confirmation in place', () => {
-    render(
-      <Button state="done" doneLabel="Published">
-        Publish
-      </Button>,
-    );
-    expect(screen.getByRole('button')).toHaveTextContent('Published');
-  });
-
-  it('count: hidden at zero, 99+ above 99', () => {
-    expect(formatCount(0)).toBeNull();
-    expect(formatCount(12)).toBe('12');
-    expect(formatCount(140)).toBe('99+');
-  });
-
-  it('primary flips to the yellow on an ink ground', () => {
-    render(<Button ground="ink">See what we do</Button>);
-    expect(screen.getByRole('button').className).toMatch(/bg-yellow-accent/);
-  });
-
-  it('asChild renders the link with the button look', () => {
-    render(
-      <Button asChild variant="secondary">
-        <a href="/x">Open</a>
-      </Button>,
-    );
-    expect(screen.getByRole('link', { name: 'Open' }).className).toMatch(/rounded-md/);
-  });
-
-  it('passes axe', async () => {
-    const { container } = render(
-      <div>
-        <Button>Publish</Button>
-        <Button variant="secondary" count={12}>
-          Comments
-        </Button>
-        <Button disabled disabledReason="Still converting to PDF">
-          Download
-        </Button>
-      </div>,
-    );
-    expect(await a11y(container)).toHaveNoViolations();
-  });
-});
-
-describe('useButtonAction', () => {
-  it('busy → done → idle', async () => {
-    vi.useFakeTimers();
-    let resolve!: () => void;
-    const { result } = renderHook(() => useButtonAction(() => new Promise<void>((r) => (resolve = r))));
-    let p!: Promise<void>;
-    act(() => {
-      p = result.current.run();
-    });
-    expect(result.current.state).toBe('busy');
-    await act(async () => {
-      resolve();
-      await p;
-    });
-    expect(result.current.state).toBe('done');
-    act(() => vi.advanceTimersByTime(1600));
-    expect(result.current.state).toBe('idle');
-    vi.useRealTimers();
-  });
-
-  it('a failure returns to idle with the error, and runs are not doubled while busy', async () => {
-    const action = vi.fn().mockRejectedValue(new Error("Couldn't reach the mail server."));
-    const { result } = renderHook(() => useButtonAction(action));
-    await act(async () => {
-      await Promise.all([result.current.run(), result.current.run()]);
-    });
-    expect(action).toHaveBeenCalledOnce();
-    expect(result.current.state).toBe('idle');
-    expect(String(result.current.error)).toMatch(/mail server/);
-  });
-});
-
-describe('IconButton', () => {
-  it('has a label, and the count joins it', () => {
-    render(<IconButton icon={Star} label="Comments" count={120} />);
-    expect(screen.getByRole('button', { name: 'Comments (99+)' })).toBeInTheDocument();
-  });
-  it('passes axe', async () => {
-    const { container } = render(<IconButton icon={Share2} label="Share" variant="outline" />);
-    expect(await a11y(container)).toHaveNoViolations();
-  });
-});
-
-describe('Badge', () => {
-  it('defaults the appearance by status', () => {
-    const { container } = render(
-      <>
-        <Badge status="attention">Awaiting you</Badge>
-        <Badge status="progress">In progress</Badge>
-        <Badge status="complete">Delivered</Badge>
-      </>,
-    );
-    const [a, p, c] = container.querySelectorAll('[data-status]');
-    expect(a!.className).toMatch(/bg-brand-mark/);
-    expect(p!.className).toMatch(/border-fg/);
-    expect(c!.querySelector('[aria-hidden]')!.className).toMatch(/bg-fg\b/);
-  });
-  it('unknown status falls back to neutral', () => {
-    const { container } = render(<Badge status="quarantined-ish">Draft</Badge>);
-    expect(container.querySelector('[data-status]')).toHaveAttribute('data-status', 'neutral');
-  });
-  it('compact keeps the wording for screen readers and on hover', () => {
-    render(
-      <Badge status="error" compact>
-        Overdue
-      </Badge>,
-    );
-    const text = screen.getByText('Overdue');
-    expect(text).toHaveClass('sr-only');
-    expect(text.parentElement).toHaveAttribute('title', 'Overdue');
-  });
-});
-
-describe('Tag', () => {
-  it('removes', async () => {
-    const onRemove = vi.fn();
-    render(
-      <Tag onRemove={onRemove} removeLabel="Remove PDF">
-        PDF
-      </Tag>,
-    );
-    await userEvent.click(screen.getByRole('button', { name: 'Remove PDF' }));
-    expect(onRemove).toHaveBeenCalledOnce();
-  });
-});
-
-describe('Logo, Card, Figure, Marker, MetaLabel', () => {
-  it('logo has an accessible name and never paints itself yellow', () => {
-    render(<Logo />);
-    const svg = screen.getByRole('img', { name: 'COSX' });
-    expect(svg).toHaveAttribute('fill', 'currentColor');
-  });
-  it('card outline defaults by ground', () => {
-    const { container } = render(
-      <>
-        <Card>a</Card>
-        <Card ground="sunk">b</Card>
-      </>,
-    );
-    const [page, sunk] = container.querySelectorAll('div');
-    expect(page!.className).toMatch(/border-rule/);
-    expect(sunk!.className).not.toMatch(/border-rule/);
-  });
-  it('figure, marker and label render', async () => {
-    const { container } = render(
-      <div>
-        <Figure value="117" label="Organisations" source="Verified September 2026" />
-        <h2>
-          Of 47 organisations, <Marker>20 name no regulator</Marker>
-        </h2>
-        <MetaLabel rule="yellow">03 / Who we serve</MetaLabel>
-      </div>,
-    );
-    expect(container.querySelector('.marker')).toHaveTextContent('20 name no regulator');
-    expect(await a11y(container)).toHaveNoViolations();
-  });
-});
-
-describe('ThemeProvider', () => {
-  it('sets data-mode="ink" when ink is chosen and clears it for light', () => {
-    function Switch() {
-      const { setMode, resolved } = useTheme();
-      return (
-        <>
-          <span>{resolved}</span>
-          <button onClick={() => setMode('ink')}>ink</button>
-          <button onClick={() => setMode('light')}>light</button>
-        </>
-      );
-    }
-    render(
-      <ThemeProvider storageKey={null}>
-        <Switch />
-      </ThemeProvider>,
-    );
-    act(() => screen.getByText('ink', { selector: 'button' }).click());
-    expect(document.documentElement).toHaveAttribute('data-mode', 'ink');
-    act(() => screen.getByText('light', { selector: 'button' }).click());
-    expect(document.documentElement).not.toHaveAttribute('data-mode');
-  });
-});