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

package/CHANGELOG.md

@@ -1,3 +1,112 @@
+## 1.0.0-alpha.10 (2026-09-30)
+
+- BrandLoader: the COSX loop as a loading indicator (Claude Design, COSX
+  Loader). A short stroke runs the loop, blooms into the full mark, holds,
+  gathers back — 3.4 s a round, the head's speed continuous; at rest it
+  is the logo itself. Tones ink / linen / accent / current, an optional
+  faint track, `speed`; the full mark, still, under reduced motion. For
+  whole-page and start-up waits; buttons, rows and inputs keep Spinner.
+
+## 1.0.0-alpha.9 (2026-09-30)
+
+- WorkspaceRow: `badge` — what the workspace still needs, as an attention
+  badge beside the chevron ("Needs setup"; Metaroom Sign In, Set up your
+  workspace).
+
+## 1.0.0-alpha.8 (2026-09-30)
+
+- ThemeSwitch: `defaultOpen` starts it opened (documentation specimens).
+- WorkspaceMark: a logo that failed before React hydrated (a server-rendered
+  page) now falls back to the initial too — onError had already fired.
+- design.cosx.co: Patterns · Sign-in, every specimen the real component.
+
+## 1.0.0-alpha.7 (2026-09-30)
+
+Sign-in patterns checked against design.cosx.co Patterns · Sign-in:
+
+- AuthPanel: the highlight band runs 40–94% with a hair of overhang each
+  side; Chinese sets at 1.35, untracked, band from 50% (typography-cjk's
+  :lang(zh) line-height is unlayered, so this one is important).
+- WorkspaceRow: 14px name at 1.35, the outline an inset rule on the page
+  colour (no border box).
+
+## 1.0.0-alpha.6 (2026-09-29)
+
+Sign-in patterns (Metaroom sign-in, design.cosx.co), moved here from the
+COSX app so every product signs in with the same pages:
+
+- AuthLayout: the step under the product lockup, header end (theme switch),
+  help line, footer, and the yellow panel — dropped under 900px (container
+  query, so a narrow window or pane works too). AuthPanel for the panel's
+  text, AuthStepHead and AuthIconTile for a step.
+- ThemeSwitch: match system · light · dark, folded to the current choice;
+  hover or focus opens it, a quick click steps, a settled click picks.
+  Follows the ThemeProvider unless given value / onChange.
+- WorkspaceRow and WorkspaceMark: a workspace in a chooser (logo or
+  initial, name, detail, busy).
+- Every string is a prop with an English default.
+
+## 1.0.0-alpha.5 (2026-09-29)
+
+- Builds under the consuming app's TypeScript settings without
+  DOM.Iterable (ActionBar no longer spreads a NodeList); `typecheck` checks it.
+
+## 1.0.0-alpha.4 (2026-09-29)
+
+- ToastCard: one toast drawn in place (documentation specimens, previews).
+- theme.css is now theme-reset.css + theme-base.css. An app moving to the
+  kit screen by screen imports `@cosxai/ui/theme-base.css`: the kit's
+  utilities are added and Tailwind's own palette and sizes keep working.
+  New apps keep importing theme.css (unchanged result).
+
+## 1.0.0-alpha.3 (2026-09-29)
+
+- Button: busy and done draw over the idle content, kept in place and
+  hidden, so the width never changes — also when the button first
+  renders busy (it used to shrink to the spinner). No width measuring.
+
+## 1.0.0-alpha.2 (2026-09-29)
+
+Metaroom product patterns (spec P0), checked light / ink × en / zh.
+
+- Surfaces: ActionBar (pages register actions; idle / selection / mode,
+  Esc steps back; folds by group and past six; responsive, fold handle
+  with status dot, drag + remembered position), Menu, CommandPalette
+  (async sources, no "No results" until all return), SidePanel (one
+  right-hand slot), Dialog sizes 800 / 1120, ConfirmDialog (type to
+  confirm), PromptDialog, StepUpDialog.
+- Data display: useSelection, FileCard, FileList/FileRow, ListToolbar,
+  VirtualList + InfiniteLoader, FolderTree (WAI-ARIA tree, lazy,
+  reveal, partial ticks), Breadcrumb, PageHeader, Steps, ActivityTimeline.
+- Inputs: SearchField, CopyField, SegmentedControl, ChoiceCards,
+  DateInput, FuzzyDateInput, CodeInput, AsyncSelect, RecipientsInput,
+  MentionInput.
+- Upload and status: Progress, StageProgress, Dropzone, WindowDrop,
+  UploadCheck, UploadList, SyncStatus, PulseDot, Skeleton, PageState.
+- Button: disabled sinks into the well with grey text (was opacity);
+  busy keeps its look. Dialog returns focus to whatever opened it.
+- 144 tests (behaviour + axe). Test files no longer ship in the package.
+
+## 1.0.0-alpha.1 (2026-09-29)
+
+All 22 COSX Design System 3.0 primitives, checked against their
+design.cosx.co pages in light / ink × English / Chinese.
+
+- Core: Button (six types, grounds, 32/38/44, shortcut and count,
+  disabled-with-reason, busy/done in place + `useButtonAction`),
+  IconButton, Badge (shape carries urgency; compact dot keeps the
+  wording), Tag, Card, Figure, Marker, MetaLabel, Logo, Icon (Lucide),
+  Spinner, ThemeProvider (system / light / ink).
+- Forms: Field (label, hint, error, prefix/suffix, read-only), Input,
+  Textarea, Select (portal, auto placement, keyboard, groups, disabled
+  rows, meta, filter above 8), Checkbox (indeterminate), RadioGroup, Switch.
+- Tabs (underline, pills), Dialog, Toast (`toast()` + `<Toaster>`),
+  Tooltip, Table (sortable, washes for attention/overdue, cards on phones).
+- `--brand-field` / `--brand-mark` for workspace brands; the 3.0 ink
+  marker rule for `data-mode="ink"`; an `ink:` Tailwind variant.
+- 65 tests (behaviour + axe). Spec/source differences and what was
+  built: docs/workdocs/2026-09-29_feature-ui-1.0.
+
 ## 1.0.0-alpha.0 (2026-09-29)
 
 **A new system — breaking for every 0.x consumer.** 0.x continues on the

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cosxai/ui",
-  "version": "1.0.0-alpha.0",
-  "description": "COSX Design System 3.0 — tokens, Tailwind v4 theme and React components",
+  "version": "1.0.0-alpha.10",
+  "description": "COSX Design System 3.0 \u2014 tokens, Tailwind v4 theme and React components",
   "license": "UNLICENSED",
   "type": "module",
   "main": "./src/index.ts",
@@ -10,11 +10,13 @@
     ".": "./src/index.ts",
     "./styles.css": "./src/styles.css",
     "./theme.css": "./src/theme.css",
-    "./tokens/*": "./src/tokens/*"
+    "./tokens/*": "./src/tokens/*",
+    "./theme-base.css": "./src/theme-base.css"
   },
   "files": [
     "src",
     "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
     "README.md",
     "CHANGELOG.md",
     "NOTICE"
@@ -29,9 +31,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.consumer.json",
     "test": "vitest run",
-    "check:css": "tailwindcss -i test/fixture.css -o test/out.css"
+    "check:css": "tailwindcss -i test/fixture.css -o test/out.css",
+    "playground": "vite --config playground/vite.config.ts"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -40,12 +43,23 @@
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/node": "^26.6.3",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "axe-core": "^4.13.0",
+    "jsdom": "^30.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "^4",
     "typescript": "^5.6.0",
-    "vitest": "^3.2.0"
+    "vite": "^6.0.0",
+    "vitest": "^3.2.0",
+    "vitest-axe": "^0.1.0"
   },
   "sideEffects": [
     "**/*.css"
@@ -53,7 +67,23 @@
   "dependencies": {
     "@fontsource-variable/geist": "^5.3.0",
     "@fontsource-variable/noto-sans-sc": "^5.3.0",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toast": "^1.2.23",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@tanstack/react-virtual": "^3.14.13",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^1.48.0",
+    "react-day-picker": "^10.0.1",
     "tailwind-merge": "^3.3.1"
   },
   "peerDependenciesMeta": {

package/src/brand.css

@@ -0,0 +1,13 @@
+/* @cosxai/ui — workspace brand injection (Metaroom spec §01).
+ *
+ * A customer's colour replaces the COSX yellow through two variables;
+ * everything else stays ink, so any colour keeps text readable:
+ *   --brand-field  large areas: selected nav and tabs, section grounds
+ *   --brand-mark   small marks: dots, progress, highlights, attention fills
+ * Ink (text, primary button, icons) and --status-error are not injectable.
+ * Default: the COSX yellow. A workspace sets both on <html>.
+ */
+:root {
+  --brand-field: var(--yellow);
+  --brand-mark: var(--yellow-accent);
+}