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

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/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

@@ -17,6 +17,7 @@ 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 { BrandLoader, loaderState, type BrandLoaderProps } from './components/BrandLoader';
 export { Tag, type TagProps } from './components/Tag';
 export { ThemeProvider, useTheme, type ThemeMode, type ThemeProviderProps } from './components/ThemeProvider';
 export { useButtonAction, type ButtonAction } from './components/useButtonAction';
@@ -31,5 +32,48 @@ 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 { ToastCard, Toaster, toast, type ToastCardProps, 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';
+
+// Stage 3 — sign-in (Metaroom sign-in, design.cosx.co)
+export { AuthIconTile, AuthLayout, AuthPanel, AuthStepHead, type AuthIconTileProps, type AuthLayoutProps, type AuthPanelProps, type AuthStepHeadProps } from './components/AuthLayout';
+export { ThemeSwitch, type ThemeSwitchLabels, type ThemeSwitchProps } from './components/ThemeSwitch';
+export { WorkspaceMark, WorkspaceRow, type WorkspaceMarkProps, type WorkspaceRowProps } from './components/WorkspaceRow';

package/src/theme-base.css

@@ -0,0 +1,123 @@
+/* @cosxai/ui — the design system's Tailwind utilities, without clearing
+ * Tailwind's own palette, sizes, radii, shadows, fonts and easings.
+ *
+ * For an app moving to the kit screen by screen (product-meta during the
+ * move): its existing classes keep working, and the kit's are added. Where
+ * both define a name (radius, font-sans, ease-in/out), the kit's value wins.
+ * New apps import theme.css, which is this plus the reset.
+ */
+/* ink: — styles for ink mode (data-mode="ink" on <html>, or inside
+   .ink-mode). The semantic colours switch by themselves; this is for the
+   rules that flip on ink (the primary becomes the yellow). */
+@custom-variant ink (&:where([data-mode="ink"], [data-mode="ink"] *, .ink-mode, .ink-mode *));
+
+@theme inline {
+
+  /* Materials — fixed, do not switch with ink mode */
+  --color-paper: var(--paper);
+  --color-linen: var(--linen);
+  --color-sunk-2: var(--sunk-2);
+  --color-sunk-3: var(--sunk-3);
+  --color-ink: var(--ink);
+  --color-ink-raised: var(--ink-raised);
+  --color-grey: var(--grey);
+  --color-grey-inverse: var(--grey-inverse);
+
+  /* The yellow — one hue, by area */
+  --color-yellow: var(--yellow);
+  --color-yellow-accent: var(--yellow-accent);
+  --color-yellow-accent-hover: var(--yellow-accent-hover);
+  --color-yellow-light: var(--yellow-light);
+  --color-yellow-hover: var(--yellow-hover);
+  --color-yellow-1: var(--yellow-1);
+  --color-yellow-2: var(--yellow-2);
+  --color-yellow-3: var(--yellow-3);
+  --color-yellow-4: var(--yellow-4);
+  --color-yellow-5: var(--yellow-5);
+  --color-yellow-wash-12: var(--yellow-12);
+  --color-yellow-wash-20: var(--yellow-20);
+  --color-yellow-wash-32: var(--yellow-32);
+  --color-yellow-wash-50: var(--yellow-50);
+  --color-marker: var(--marker);
+
+  /* Semantic — switch with ink mode. Product code uses these. */
+  --color-page: var(--bg-page);
+  --color-sunk: var(--bg-sunk);
+  --color-well: var(--bg-well);
+  --color-chrome: var(--bg-chrome);
+  --color-field: var(--bg-field);
+  --color-fg: var(--text-primary);
+  --color-fg-secondary: var(--text-secondary);
+  --color-fg-label: var(--text-label);
+  --color-fg-on-yellow-secondary: var(--text-on-yellow-secondary);
+  --color-rule: var(--rule);
+  --color-rule-soft: var(--rule-soft);
+  --color-hover: var(--hover);
+  --color-scrim: var(--scrim);
+
+  /* Workspace brand (brand.css): the COSX yellow unless a customer's
+     colour is injected. Selection and grounds use field; dots and
+     progress use mark. Never for text. */
+  --color-brand-field: var(--brand-field);
+  --color-brand-mark: var(--brand-mark);
+
+  /* On an ink surface inside a paper page */
+  --color-inv: var(--inv-bg);
+  --color-inv-raised: var(--inv-bg-raised);
+  --color-inv-fg: var(--inv-text);
+  --color-inv-fg-secondary: var(--inv-text-secondary);
+  --color-inv-rule: var(--inv-rule);
+
+  /* Product status: yellow, ink and one red. Progress is an ink outline and
+     complete a grey dot — they take no colour of their own. */
+  --color-attention: var(--status-attention);
+  --color-attention-wash: var(--status-attention-wash);
+  --color-error: var(--status-error);
+  --color-error-text: var(--status-error-text);
+  --color-error-wash: var(--status-error-wash);
+
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-white: #fff;
+
+  /* Radius ladder — same names and values as 3.0 spacing.css */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-pill: 999px;
+
+  /* One family. Same stacks as fonts.css (the ones in effect): font-sans
+     for Latin, font-sans-cjk for Chinese pages (Geist for Latin and
+     figures, Noto Sans SC for hanzi). */
+  --font-sans: "Geist Variable", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-sans-cjk: "Geist Variable", "Geist", "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Type scale (typography.css). Product UI body is 14px, content 15px. */
+  --text-meta: 12px;
+  --text-small: 13.5px;
+  --text-ui: 14px;
+  --text-body: 15px;
+  --text-h3: 18px;
+  --text-lede: 20px;
+  --text-title: 22px;
+  --text-figure: 32px;
+  --text-h2: var(--size-h2);
+  --text-h1: var(--size-h1);
+  --text-display: var(--size-display);
+
+  --tracking-display: -0.025em;
+  --tracking-heading: -0.015em;
+  --tracking-figure: -0.03em;
+
+  /* Motion — flat for state, ease-out for entry; nothing bounces */
+  --ease-standard: cubic-bezier(.2,0,.2,1);
+  --ease-out: cubic-bezier(.16,1,.3,1);
+  --ease-in: cubic-bezier(.4,0,1,1);
+}

package/src/theme-reset.css

@@ -0,0 +1,14 @@
+/* @cosxai/ui — clears Tailwind's defaults so only the design system's
+ * values exist (part of theme.css; see theme-base.css for incremental use). */
+@theme {
+  --color-*: initial;
+  --radius-*: initial;
+  --shadow-*: initial;
+  --inset-shadow-*: initial;
+  --drop-shadow-*: initial;
+  --font-*: initial;
+  --ease-*: initial;
+  --text-*: initial;
+  --font-weight-*: initial;
+  --tracking-*: initial;
+}

package/src/theme.css

@@ -16,128 +16,5 @@
  * (theme.test.ts). In particular font sizes avoid --text-primary /
  * --text-secondary / --text-label, which are colours in 3.0.
  */
-/* ink: — styles for ink mode (data-mode="ink" on <html>, or inside
-   .ink-mode). The semantic colours switch by themselves; this is for the
-   rules that flip on ink (the primary becomes the yellow). */
-@custom-variant ink (&:where([data-mode="ink"], [data-mode="ink"] *, .ink-mode, .ink-mode *));
-
-@theme inline {
-  --color-*: initial;
-  --radius-*: initial;
-  --shadow-*: initial;
-  --inset-shadow-*: initial;
-  --drop-shadow-*: initial;
-  --font-*: initial;
-  --ease-*: initial;
-  --text-*: initial;
-  --font-weight-*: initial;
-  --tracking-*: initial;
-
-  /* Materials — fixed, do not switch with ink mode */
-  --color-paper: var(--paper);
-  --color-linen: var(--linen);
-  --color-sunk-2: var(--sunk-2);
-  --color-sunk-3: var(--sunk-3);
-  --color-ink: var(--ink);
-  --color-ink-raised: var(--ink-raised);
-  --color-grey: var(--grey);
-  --color-grey-inverse: var(--grey-inverse);
-
-  /* The yellow — one hue, by area */
-  --color-yellow: var(--yellow);
-  --color-yellow-accent: var(--yellow-accent);
-  --color-yellow-accent-hover: var(--yellow-accent-hover);
-  --color-yellow-light: var(--yellow-light);
-  --color-yellow-hover: var(--yellow-hover);
-  --color-yellow-1: var(--yellow-1);
-  --color-yellow-2: var(--yellow-2);
-  --color-yellow-3: var(--yellow-3);
-  --color-yellow-4: var(--yellow-4);
-  --color-yellow-5: var(--yellow-5);
-  --color-yellow-wash-12: var(--yellow-12);
-  --color-yellow-wash-20: var(--yellow-20);
-  --color-yellow-wash-32: var(--yellow-32);
-  --color-yellow-wash-50: var(--yellow-50);
-  --color-marker: var(--marker);
-
-  /* Semantic — switch with ink mode. Product code uses these. */
-  --color-page: var(--bg-page);
-  --color-sunk: var(--bg-sunk);
-  --color-well: var(--bg-well);
-  --color-chrome: var(--bg-chrome);
-  --color-field: var(--bg-field);
-  --color-fg: var(--text-primary);
-  --color-fg-secondary: var(--text-secondary);
-  --color-fg-label: var(--text-label);
-  --color-fg-on-yellow-secondary: var(--text-on-yellow-secondary);
-  --color-rule: var(--rule);
-  --color-rule-soft: var(--rule-soft);
-  --color-hover: var(--hover);
-  --color-scrim: var(--scrim);
-
-  /* Workspace brand (brand.css): the COSX yellow unless a customer's
-     colour is injected. Selection and grounds use field; dots and
-     progress use mark. Never for text. */
-  --color-brand-field: var(--brand-field);
-  --color-brand-mark: var(--brand-mark);
-
-  /* On an ink surface inside a paper page */
-  --color-inv: var(--inv-bg);
-  --color-inv-raised: var(--inv-bg-raised);
-  --color-inv-fg: var(--inv-text);
-  --color-inv-fg-secondary: var(--inv-text-secondary);
-  --color-inv-rule: var(--inv-rule);
-
-  /* Product status: yellow, ink and one red. Progress is an ink outline and
-     complete a grey dot — they take no colour of their own. */
-  --color-attention: var(--status-attention);
-  --color-attention-wash: var(--status-attention-wash);
-  --color-error: var(--status-error);
-  --color-error-text: var(--status-error-text);
-  --color-error-wash: var(--status-error-wash);
-
-  --color-transparent: transparent;
-  --color-current: currentColor;
-  --color-white: #fff;
-
-  /* Radius ladder — same names and values as 3.0 spacing.css */
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 16px;
-  --radius-xl: 24px;
-  --radius-pill: 999px;
-
-  /* One family. Same stacks as fonts.css (the ones in effect): font-sans
-     for Latin, font-sans-cjk for Chinese pages (Geist for Latin and
-     figures, Noto Sans SC for hanzi). */
-  --font-sans: "Geist Variable", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --font-sans-cjk: "Geist Variable", "Geist", "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
-
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* Type scale (typography.css). Product UI body is 14px, content 15px. */
-  --text-meta: 12px;
-  --text-small: 13.5px;
-  --text-ui: 14px;
-  --text-body: 15px;
-  --text-h3: 18px;
-  --text-lede: 20px;
-  --text-title: 22px;
-  --text-figure: 32px;
-  --text-h2: var(--size-h2);
-  --text-h1: var(--size-h1);
-  --text-display: var(--size-display);
-
-  --tracking-display: -0.025em;
-  --tracking-heading: -0.015em;
-  --tracking-figure: -0.03em;
-
-  /* Motion — flat for state, ease-out for entry; nothing bounces */
-  --ease-standard: cubic-bezier(.2,0,.2,1);
-  --ease-out: cubic-bezier(.16,1,.3,1);
-  --ease-in: cubic-bezier(.4,0,1,1);
-}
+@import "./theme-reset.css";
+@import "./theme-base.css";