Skip to content

Changelog

Notable changes to the Control Room design system. The format follows Keep a Changelog and the project follows Semantic Versioning.

From 1.0.0 onward each package also carries its own CHANGELOG.md, generated by Changesets.

First release, published privately to GitHub Packages under the @alebianco scope. Installing needs a GitHub token with read:packages — see Getting Started.

  • Design language — the nine laws. Each law is a decision procedure with explicit MUST / SHOULD / NEVER rules, grounded in research rather than taste. See design language.
  • Token layer. One machine-readable source (packages/tokens/tokens/tokens.json) drives four core themes — dark, light, extreme, phosphor — plus six brand themes (aurora, boardroom, ember, harbor, porcelain, slate) and theme-independent chassis, typography, and motion tokens. Any component built from tokens survives a theme flip with zero per-theme code. Exported as theme CSS, a Tailwind v4 @theme layer, a flat map, DTCG, and a machine-readable theme contract.
  • Component library. 83 catalogued entries — components, blocks, and utilities — each with an anatomy, token list, variants, copy-ready markup, motion, and accessibility notes. The CSS layer ships as 73 framework-agnostic cr- parts.
  • Interactive components for six frameworks. Anything with real state, keyboard behaviour, or ARIA is authored once as Mitosis .lite.tsx and compiled to React, Vue, Svelte, Angular, Solid, and Qwik. The compiled output applies cr- classes and carries no styling of its own.
  • Styling contract. A PrimeVue-shaped pt / dt / unstyled override API over the single-source model, so consumers can restyle without forking.
  • Forms. Declarative form controls with an ArkType / JSON-Schema validation contract and per-field re-render isolation.
  • Motion. Four motion tiers, the glitch/CRT vocabulary, and a reduced-motion contract.
  • Accessibility. A WCAG 2.1 AA contract for the aesthetic, enforced in CI by an axe-core gate across every theme — not merely documented.
  • Responsive architecture. Container-query driven, with a CI gate against horizontal overflow at 375 / 768 / 1024.
  • Decoration. Seeded pixel-cat and pixel-sigil generators (identity from seed, pose/hue from state), seeded ASCII density fields, and a decorative-only contract (aria-hidden, whisper, mask-faded).
  • 24 pixel icons, filled on a consistent 24×24 grid.
  • AI-native surfaces. An MCP server (npx @alebianco/cr-mcp) exposing the catalog, theme contract, and reference docs as tools and resources; llms.txt / llms-full.txt; a queryable catalog.json; and the whole system as an installable agent skill.
  • Docs site — Astro + Starlight, with a live gallery and a component browser covering every theme.
PackageContents
@alebianco/cr-tokensToken layer — theme CSS, Tailwind @theme, DTCG, theme contract
@alebianco/cr-stylesThe cr- component CSS (73 parts)
@alebianco/cr-componentsInteractive components for six frameworks
@alebianco/cr-iconsPixel icon set
@alebianco/cr-utilscn, theme switching, duration/time-scale, form validation
@alebianco/cr-mcpMCP server over the catalog and docs
@alebianco/cr-skillThe system as an installable agent skill