catch-ui

Versioned UI foundation: semantic CSS tokens, a React Button and Storybook. Additional primitives are pending.

Part of the CATCH engineering project. This is an independent repository.

Local development

Use Node.js 22 and pnpm 10.33.0. Install with pnpm install --frozen-lockfile.

pnpm storybook

Boundaries

See the repository design. Never import sibling repository source or commit credentials.

Package scope is @catchdotcool. Publishing is intentionally disabled with private: true until registry access, visibility and release credentials are configured. Builds can be tested with pnpm pack; no unpublished dependency is required by other bootstrap repositories.

Import the package component exports and its /tokens CSS export together. The consuming app supplies the licensed Inter font. Storybook demonstrates primitive states; domain components remain in catch-web.

Extracted CATCH prototype stylesheet

The existing HTML prototype now has a CSS-only presentation boundary. src/styles/prototype/theme.css holds global font/colors/spacing/radii; components.css preserves the accepted selector cascade; charts.css owns SVG chart presentation. The historical cascade is retained for visual compatibility rather than redesigned in this extraction.

The package exports an opt-in global stylesheet, @catchdotcool/ui/prototype.css, alongside existing React primitives. Import it only in the CATCH terminal, since it includes global body and element rules. Internal relative font URLs are bundled with the Inter font license. The package is still private/unpublished; these are prepared exports, not a registry release.

For a standalone prototype, export styles once or keep them synchronized during design work:

pnpm export:prototype-css /path/to/prototype
pnpm export:prototype-css /path/to/prototype --watch

With watch running, edit src/styles/prototype/theme.css and refresh the prototype. Export copies only CSS/font assets; it does not migrate HTML or interaction code. You may also edit assets/css/theme.css directly in the local prototype without any build; those local changes are not automatically imported back into this repository.

Validation: the prototype's sampled panel dimensions, colors and fonts matched before/after extraction. Changing only theme.css updated global type from 12px to 13px, panel radii and candle colors; defaults were then restored. Inline styles and JS style writes are prohibited by the prototype guard in catch-docs.