@tenphi/tasty 0.0.0-snapshot.8f4d375 → 0.0.0-snapshot.9155dd5

package/README.md

@@ -29,7 +29,7 @@ That guarantee unlocks a concise, CSS-like DSL where design tokens, custom units
 - **CSS properties as normal component props** — `styleProps` lets you expose selected styles as typed React props. Use `<Button placeSelf="end">` or `<Space flow="row" gap="2x">` without extra wrappers, utility classes, or `styles` overrides. The same props also accept state maps, so responsive values work with the same API. See [CSS properties as props](#css-properties-as-props).
 - **Design-system native** — Color tokens (`#primary`), spacing units (`2x`), typography presets (`h1`, `t2`), border radius (`1r`), and recipes are first-class primitives, not afterthoughts. See [Configuration](docs/configuration.md).
 - **Near-complete modern CSS coverage** — Media queries, container queries, `@supports`, `:has()`, `@starting-style`, `@property`, `@keyframes`, etc. Some features that don't fit Tasty's component model (such as `@layer` and `!important`) are intentionally omitted, but real-world use cases are covered almost completely.
-- **Runtime or zero-runtime — your call** — Use `tasty()` for dynamic React components with runtime injection, or `tastyStatic()` with the Babel plugin for zero-runtime CSS extraction. Same DSL, same tokens, same output. See [Zero Runtime](docs/tasty-static.md).
+- **Runtime, zero-runtime, or SSR — your call** — Use `tasty()` for dynamic React components with runtime injection, `tastyStatic()` with the Babel plugin for zero-runtime CSS extraction, or enable SSR with zero-cost client hydration for Next.js, Astro, or any React framework (experimental). Same DSL, same tokens, same output.
 - **Only generate what is used** — In runtime mode, Tasty injects CSS on demand for mounted components/variants, so your app avoids shipping style rules for UI states that are never rendered.
 - **Runtime performance that holds at scale** — The runtime path is tested against enterprise-scale applications and tuned with multi-level caching, chunk-level style reuse, style garbage collection, and a dedicated injector.
 - **Composable and extensible by design** — Extend any component's styles with proper merge semantics, and evolve built-in behavior through configuration and plugins.
@@ -188,10 +188,21 @@ Layout components can expose flow props. Buttons can expose positioning props. E
 
 This is the core idea that makes everything else possible.
 
+For the end-to-end architecture — parsing state keys, building exclusive conditions, merging by output, and materializing selectors and at-rules — see **[Style rendering pipeline](docs/PIPELINE.md)**.
+
 Traditional CSS has two structural problems.
 
 First, the **cascade** resolves conflicts by specificity and source order: when multiple selectors match, the one with the highest specificity wins, or — if specificity is equal — the last one in source order wins. That makes styles inherently fragile. Reordering imports, adding a media query, or composing components from different libraries can silently break styling.
 
+A small example makes this tangible. Two rules for a button's background:
+
+```css
+.btn:hover     { background: dodgerblue; }
+.btn[disabled] { background: gray; }
+```
+
+Both selectors have specificity `(0, 1, 1)`. When the button is hovered **and** disabled, both match — and the last rule in source order wins. Swap the two lines and a hovered disabled button silently turns blue instead of gray. This class of bug is invisible in code review because the logic is correct; only the ordering is wrong.
+
 Second, **authoring selectors that capture real-world state logic is fundamentally hard.** A single state like "dark mode" may depend on a root attribute, an OS preference, or both — each branch needing its own selector, proper negation of competing branches, and correct `@media` nesting. The example below shows the CSS you'd write by hand for just *one* property with *one* state. Scale that across dozens of properties, then add breakpoints and container queries, and the selector logic quickly becomes unmanageable.
 
 Tasty solves both problems at once: **every state mapping compiles into mutually exclusive selectors.**
@@ -211,7 +222,33 @@ const Text = tasty({
 });
 ```
 
-If `@dark` expands to `@root(schema=dark) | (!@root(schema) & @media(prefers-color-scheme: dark))`, Tasty generates:
+If `@dark` expands to `@root(schema=dark) | (!@root(schema) & @media(prefers-color-scheme: dark))`, try writing the CSS by hand. A first attempt might look like this:
+
+```css
+/* First attempt — the @media branch is too broad */
+.t0 { color: var(--text-color); }
+:root[data-schema="dark"] .t0 { color: var(--text-on-dark-color); }
+@media (prefers-color-scheme: dark) {
+  .t0 { color: var(--text-on-dark-color); }
+}
+```
+
+The `@media` branch fires even when `data-schema="light"` is explicitly set. Fix that:
+
+```css
+/* Second attempt — @media is scoped, but the default is still too broad */
+.t0 { color: var(--text-color); }
+:root[data-schema="dark"] .t0 { color: var(--text-on-dark-color); }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-schema]) .t0 { color: var(--text-on-dark-color); }
+}
+```
+
+Better — but the bare `.t0` default still matches unconditionally. It matches in dark mode, it matches when `data-schema="dark"` is set, and it can beat the attribute selector by source order if another rule re-declares it later. There is no selector that says "apply this default only when none of the dark branches win."
+
+This is just *one* property with *one* state, and getting it right already takes multiple iterations. The correct selectors require negating every other branch — which is exactly what Tasty generates automatically:
+
+Tasty generates the correct version automatically:
 
 ```css
 /* Branch 1: Explicit dark schema */
@@ -243,6 +280,8 @@ Every rule is guarded by the negation of higher-priority rules. No two rules can
 
 By absorbing selector complexity, Tasty makes advanced CSS patterns practical again — nested container queries, multi-condition `@supports` gates, and combined root-state/media branches. You stay in pure CSS instead of relying on JavaScript workarounds, so the browser can optimize layout, painting, and transitions natively. Tasty doesn't limit CSS; it unlocks its full potential by removing the complexity that held teams back.
 
+[Try it in the Tasty Playground →](https://cube-ui-kit.vercel.app/?path=/story/getting-started-tasty-playground--playground)
+
 ## Capabilities
 
 ### Design Tokens and Custom Units
@@ -408,8 +447,8 @@ import { useStyles, useGlobalStyles, useRawCSS } from '@tenphi/tasty';
 
 function App() {
   const { className } = useStyles({ padding: '2x', fill: '#surface' });
-  useGlobalStyles(':root', { '#primary': 'purple', '$gap': '8px' });
-  useRawCSS('body { margin: 0; }');
+  useGlobalStyles('body', { margin: '0' });
+  useRawCSS('@font-face { font-family: "Custom"; src: url(...); }');
 
   return <main className={className}>...</main>;
 }
@@ -476,6 +515,48 @@ If you choose the runtime approach, performance is usually a non-issue in practi
 - A dedicated style injector minimizes DOM/style-tag overhead.
 - This approach is validated in enterprise-scale apps where runtime styling overhead is not noticeable in normal UI flows.
 
+### Server-Side Rendering (Experimental)
+
+SSR with zero-cost client hydration. Existing `tasty()` components work unchanged — SSR is opt-in and requires no per-component modifications. Supports Next.js (App Router with streaming), Astro (middleware + islands), and any React-based framework via the core API. Requires React 19+.
+
+**Next.js setup:**
+
+```tsx
+// app/tasty-registry.tsx
+'use client';
+
+import { TastyRegistry } from '@tenphi/tasty/ssr/next';
+
+export default function TastyStyleRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <TastyRegistry>{children}</TastyRegistry>;
+}
+```
+
+```tsx
+// app/layout.tsx
+import TastyStyleRegistry from './tasty-registry';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html>
+      <body>
+        <TastyStyleRegistry>{children}</TastyStyleRegistry>
+      </body>
+    </html>
+  );
+}
+```
+
+See the [full SSR guide](docs/ssr.md) for Astro integration, streaming SSR, generic framework usage, and the complete API reference.
+
 ## Entry Points
 
 | Import | Description | Platform |
@@ -486,6 +567,9 @@ If you choose the runtime approach, performance is usually a non-issue in practi
 | `@tenphi/tasty/babel-plugin` | Babel plugin for zero-runtime CSS extraction | Node |
 | `@tenphi/tasty/zero` | Programmatic extraction API | Node |
 | `@tenphi/tasty/next` | Next.js integration wrapper | Node |
+| `@tenphi/tasty/ssr` | Core SSR API (collector, context, hydration) | Node |
+| `@tenphi/tasty/ssr/next` | Next.js App Router SSR integration | Node |
+| `@tenphi/tasty/ssr/astro` | Astro middleware + auto-hydration | Node / Browser |
 
 ## Ecosystem
 
@@ -528,19 +612,58 @@ Syntax highlighting for Tasty styles in TypeScript, TSX, JavaScript, and JSX. Hi
   <img src="assets/tasty-vscode-highlight.png" width="512" alt="Tasty VS Code syntax highlighting example">
 </p>
 
-### [Cube UI Kit](https://github.com/cube-js/cube-ui-kit)
+## Built with Tasty
+
+### [tasty.style](https://tasty.style) ([source](https://github.com/tenphi/tasty.style))
+
+The official Tasty documentation and landing page — itself built entirely with Tasty. A showcase for zero-runtime styling via `tastyStatic`, SSR with Next.js, and OKHSL color theming with Glaze.
+
+### [Cube Cloud](https://cube.dev/)
+
+Enterprise universal semantic layer platform by Cube Dev, Inc. Cube Cloud unifies data modeling, caching, access control, and APIs (REST, GraphQL, SQL, AI) for analytics at scale. Tasty has powered its frontend for over 5 years in production.
+
+### [Cube Cloud for Excel and Google Sheets](https://cube.dev/)
+
+A single spreadsheet add-in deployed to both [Microsoft Excel](https://marketplace.microsoft.com/en-us/product/office/WA200008486) and [Google Sheets](https://workspace.google.com/u/0/marketplace/app/cube_cloud_for_sheets/641460343379). Connects spreadsheets to any cloud data platform (BigQuery, Databricks, Snowflake, Redshift, and more) via Cube Cloud's universal semantic layer.
+
+### [Cube UI Kit](https://github.com/cube-js/cube-ui-kit) ([storybook](https://cube-ui-kit.vercel.app/))
 
 Open-source React UI kit built on Tasty + React Aria. 100+ production components proving Tasty works at design-system scale. A reference implementation and a ready-to-use component library.
 
 ## Documentation
 
-- **[Usage Guide](docs/usage.md)** — Runtime styling: component creation, state mappings, sub-elements, variants, and hooks
+### Start here
+
+- **[Getting Started](docs/getting-started.md)** — Installation, first component, configuration, ESLint plugin setup, editor tooling, and rendering mode decision tree
+- **[Methodology](docs/methodology.md)** — The recommended patterns for structuring Tasty components: root + sub-elements, styleProps, tokens, styles vs style, wrapping and extension
+
+### Guides
+
+- **[Building a Design System](docs/design-system.md)** — Practical guide to building a DS layer: token vocabulary, state aliases, recipes, primitives, compound components, override contracts
+- **[Adoption Guide](docs/adoption.md)** — Where Tasty sits in the stack, who should adopt it, what you define yourself, and how to introduce it incrementally into an existing design system
+
+### Reference
+
+- **[Style DSL](docs/dsl.md)** — The Tasty style language: state maps, tokens, units, color syntax, extending semantics, recipes, keyframes, and @property
+- **[Runtime API](docs/runtime.md)** — React-specific API: `tasty()` factory, component props, variants, sub-elements, and hooks
 - **[Configuration](docs/configuration.md)** — Global configuration: tokens, recipes, custom units, style handlers, and TypeScript extensions
 - **[Style Properties](docs/styles.md)** — Complete reference for all enhanced style properties: syntax, values, modifiers, and recommendations
+
+### Rendering modes
+
 - **[Zero Runtime (tastyStatic)](docs/tasty-static.md)** — Build-time static styling: Babel plugin setup, Next.js integration, and static style patterns
+- **[Server-Side Rendering](docs/ssr.md)** — SSR setup for Next.js, Astro, and generic frameworks: streaming support, cache hydration, and troubleshooting
+
+### Internals
+
+- **[Style rendering pipeline](docs/PIPELINE.md)** — How `Styles` become mutually exclusive CSS rules: parse → exclusives → combinations → handlers → merge → materialize (`src/pipeline/`)
 - **[Style Injector](docs/injector.md)** — Internal CSS injection engine: `inject()`, `injectGlobal()`, `injectRawCSS()`, `keyframes()`, deduplication, reference counting, cleanup, SSR support, and Shadow DOM
 - **[Debug Utilities](docs/debug.md)** — Runtime CSS inspection via `tastyDebug`: CSS extraction, element inspection, cache metrics, chunk breakdown, and performance monitoring
 
+### Context
+
+- **[Comparison](docs/comparison.md)** — How Tasty compares to Tailwind, Panda CSS, vanilla-extract, StyleX, Stitches, and Emotion: positioning, trade-offs, and when each tool fits best
+
 ## License
 
 [MIT](LICENSE)

package/dist/chunks/cacheKey.js

@@ -11,20 +11,29 @@ import { extractLocalPredefinedStates, extractPredefinedStateRefs } from "../sta
 * - Global predefined states don't affect cache keys (constant across app)
 * - Local predefined states only affect cache keys if referenced in the chunk
 */
+const _stableStringifyCache = /* @__PURE__ */ new WeakMap();
 /**
 * Recursively serialize a value with sorted keys for stable output.
 * This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.
+* Uses a WeakMap cache for object values to avoid re-serializing the same references.
 */
 function stableStringify(value) {
 	if (value === null) return "null";
 	if (value === void 0) return "undefined";
 	if (typeof value !== "object") return JSON.stringify(value);
-	if (Array.isArray(value)) return "[" + value.map(stableStringify).join(",") + "]";
-	const obj = value;
-	const sortedKeys = Object.keys(obj).sort();
-	const parts = [];
-	for (const key of sortedKeys) if (obj[key] !== void 0) parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);
-	return "{" + parts.join(",") + "}";
+	const cached = _stableStringifyCache.get(value);
+	if (cached !== void 0) return cached;
+	let result;
+	if (Array.isArray(value)) result = "[" + value.map(stableStringify).join(",") + "]";
+	else {
+		const obj = value;
+		const sortedKeys = Object.keys(obj).sort();
+		const parts = [];
+		for (const key of sortedKeys) if (obj[key] !== void 0) parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);
+		result = "{" + parts.join(",") + "}";
+	}
+	_stableStringifyCache.set(value, result);
+	return result;
 }
 /**
 * Generate a cache key for a specific chunk.
@@ -42,9 +51,8 @@ function stableStringify(value) {
 */
 function generateChunkCacheKey(styles, chunkName, styleKeys) {
 	const parts = [chunkName];
-	const sortedKeys = styleKeys.slice().sort();
 	let chunkStylesStr = "";
-	for (const key of sortedKeys) {
+	for (const key of styleKeys) {
 		const value = styles[key];
 		if (value !== void 0) {
 			const serialized = stableStringify(value);

package/dist/chunks/cacheKey.js.map

@@ -1 +1 @@
-{"version":3,"file":"cacheKey.js","names":[],"sources":["../../src/chunks/cacheKey.ts"],"sourcesContent":["/**\n * Chunk-specific cache key generation.\n *\n * Generates cache keys that only include styles relevant to a specific chunk,\n * enabling more granular caching and reuse.\n *\n * Enhanced to support predefined states:\n * - Global predefined states don't affect cache keys (constant across app)\n * - Local predefined states only affect cache keys if referenced in the chunk\n */\n\nimport {\n  extractLocalPredefinedStates,\n  extractPredefinedStateRefs,\n} from '../states';\nimport type { Styles } from '../styles/types';\n\n/**\n * Recursively serialize a value with sorted keys for stable output.\n * This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.\n */\nfunction stableStringify(value: unknown): string {\n  if (value === null) {\n    return 'null';\n  }\n  if (value === undefined) {\n    return 'undefined';\n  }\n  if (typeof value !== 'object') {\n    return JSON.stringify(value);\n  }\n  if (Array.isArray(value)) {\n    return '[' + value.map(stableStringify).join(',') + ']';\n  }\n  // Object: sort keys for stable order\n  const obj = value as Record<string, unknown>;\n  const sortedKeys = Object.keys(obj).sort();\n  const parts: string[] = [];\n  for (const key of sortedKeys) {\n    if (obj[key] !== undefined) {\n      parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);\n    }\n  }\n  return '{' + parts.join(',') + '}';\n}\n\n/**\n * Generate a cache key for a specific chunk.\n *\n * Only includes the styles that belong to this chunk, allowing\n * chunks to be cached independently.\n *\n * Also includes relevant local predefined states that are referenced\n * by this chunk's styles.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns A stable cache key string\n */\nexport function generateChunkCacheKey(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): string {\n  // Start with chunk name for namespace separation\n  const parts: string[] = [chunkName];\n\n  // Sort keys for stable ordering\n  const sortedKeys = styleKeys.slice().sort();\n\n  // Build the chunk-specific styles string for predefined state detection\n  let chunkStylesStr = '';\n\n  for (const key of sortedKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      // Use stable stringify for consistent serialization regardless of key order\n      const serialized = stableStringify(value);\n      parts.push(`${key}:${serialized}`);\n      chunkStylesStr += serialized;\n    }\n  }\n\n  // Extract local predefined states from the full styles object\n  const localStates = extractLocalPredefinedStates(styles);\n\n  // Only include local predefined states that are actually referenced in this chunk\n  if (Object.keys(localStates).length > 0) {\n    const referencedStates = extractPredefinedStateRefs(chunkStylesStr);\n    const relevantLocalStates: string[] = [];\n\n    for (const stateName of referencedStates) {\n      if (localStates[stateName]) {\n        relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);\n      }\n    }\n\n    // Add relevant local states to the cache key (sorted for stability)\n    if (relevantLocalStates.length > 0) {\n      relevantLocalStates.sort();\n      parts.unshift(`[states:${relevantLocalStates.join('|')}]`);\n    }\n  }\n\n  // Use null character as separator (safe, not in JSON output)\n  return parts.join('\\0');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,SAAS,gBAAgB,OAAwB;AAC/C,KAAI,UAAU,KACZ,QAAO;AAET,KAAI,UAAU,OACZ,QAAO;AAET,KAAI,OAAO,UAAU,SACnB,QAAO,KAAK,UAAU,MAAM;AAE9B,KAAI,MAAM,QAAQ,MAAM,CACtB,QAAO,MAAM,MAAM,IAAI,gBAAgB,CAAC,KAAK,IAAI,GAAG;CAGtD,MAAM,MAAM;CACZ,MAAM,aAAa,OAAO,KAAK,IAAI,CAAC,MAAM;CAC1C,MAAM,QAAkB,EAAE;AAC1B,MAAK,MAAM,OAAO,WAChB,KAAI,IAAI,SAAS,OACf,OAAM,KAAK,GAAG,KAAK,UAAU,IAAI,CAAC,GAAG,gBAAgB,IAAI,KAAK,GAAG;AAGrE,QAAO,MAAM,MAAM,KAAK,IAAI,GAAG;;;;;;;;;;;;;;;;AAiBjC,SAAgB,sBACd,QACA,WACA,WACQ;CAER,MAAM,QAAkB,CAAC,UAAU;CAGnC,MAAM,aAAa,UAAU,OAAO,CAAC,MAAM;CAG3C,IAAI,iBAAiB;AAErB,MAAK,MAAM,OAAO,YAAY;EAC5B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,QAAW;GAEvB,MAAM,aAAa,gBAAgB,MAAM;AACzC,SAAM,KAAK,GAAG,IAAI,GAAG,aAAa;AAClC,qBAAkB;;;CAKtB,MAAM,cAAc,6BAA6B,OAAO;AAGxD,KAAI,OAAO,KAAK,YAAY,CAAC,SAAS,GAAG;EACvC,MAAM,mBAAmB,2BAA2B,eAAe;EACnE,MAAM,sBAAgC,EAAE;AAExC,OAAK,MAAM,aAAa,iBACtB,KAAI,YAAY,WACd,qBAAoB,KAAK,GAAG,UAAU,GAAG,YAAY,aAAa;AAKtE,MAAI,oBAAoB,SAAS,GAAG;AAClC,uBAAoB,MAAM;AAC1B,SAAM,QAAQ,WAAW,oBAAoB,KAAK,IAAI,CAAC,GAAG;;;AAK9D,QAAO,MAAM,KAAK,KAAK"}
+{"version":3,"file":"cacheKey.js","names":[],"sources":["../../src/chunks/cacheKey.ts"],"sourcesContent":["/**\n * Chunk-specific cache key generation.\n *\n * Generates cache keys that only include styles relevant to a specific chunk,\n * enabling more granular caching and reuse.\n *\n * Enhanced to support predefined states:\n * - Global predefined states don't affect cache keys (constant across app)\n * - Local predefined states only affect cache keys if referenced in the chunk\n */\n\nimport {\n  extractLocalPredefinedStates,\n  extractPredefinedStateRefs,\n} from '../states';\nimport type { Styles } from '../styles/types';\n\nconst _stableStringifyCache = new WeakMap<object, string>();\n\n/**\n * Recursively serialize a value with sorted keys for stable output.\n * This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.\n * Uses a WeakMap cache for object values to avoid re-serializing the same references.\n */\nfunction stableStringify(value: unknown): string {\n  if (value === null) {\n    return 'null';\n  }\n  if (value === undefined) {\n    return 'undefined';\n  }\n  if (typeof value !== 'object') {\n    return JSON.stringify(value);\n  }\n\n  const cached = _stableStringifyCache.get(value as object);\n  if (cached !== undefined) return cached;\n\n  let result: string;\n  if (Array.isArray(value)) {\n    result = '[' + value.map(stableStringify).join(',') + ']';\n  } else {\n    const obj = value as Record<string, unknown>;\n    const sortedKeys = Object.keys(obj).sort();\n    const parts: string[] = [];\n    for (const key of sortedKeys) {\n      if (obj[key] !== undefined) {\n        parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);\n      }\n    }\n    result = '{' + parts.join(',') + '}';\n  }\n\n  _stableStringifyCache.set(value as object, result);\n  return result;\n}\n\n/**\n * Generate a cache key for a specific chunk.\n *\n * Only includes the styles that belong to this chunk, allowing\n * chunks to be cached independently.\n *\n * Also includes relevant local predefined states that are referenced\n * by this chunk's styles.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns A stable cache key string\n */\nexport function generateChunkCacheKey(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): string {\n  // Start with chunk name for namespace separation\n  const parts: string[] = [chunkName];\n\n  // styleKeys are already sorted by categorizeStyleKeys\n  let chunkStylesStr = '';\n\n  for (const key of styleKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      // Use stable stringify for consistent serialization regardless of key order\n      const serialized = stableStringify(value);\n      parts.push(`${key}:${serialized}`);\n      chunkStylesStr += serialized;\n    }\n  }\n\n  // Extract local predefined states from the full styles object\n  const localStates = extractLocalPredefinedStates(styles);\n\n  // Only include local predefined states that are actually referenced in this chunk\n  if (Object.keys(localStates).length > 0) {\n    const referencedStates = extractPredefinedStateRefs(chunkStylesStr);\n    const relevantLocalStates: string[] = [];\n\n    for (const stateName of referencedStates) {\n      if (localStates[stateName]) {\n        relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);\n      }\n    }\n\n    // Add relevant local states to the cache key (sorted for stability)\n    if (relevantLocalStates.length > 0) {\n      relevantLocalStates.sort();\n      parts.unshift(`[states:${relevantLocalStates.join('|')}]`);\n    }\n  }\n\n  // Use null character as separator (safe, not in JSON output)\n  return parts.join('\\0');\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAM,wCAAwB,IAAI,SAAyB;;;;;;AAO3D,SAAS,gBAAgB,OAAwB;AAC/C,KAAI,UAAU,KACZ,QAAO;AAET,KAAI,UAAU,OACZ,QAAO;AAET,KAAI,OAAO,UAAU,SACnB,QAAO,KAAK,UAAU,MAAM;CAG9B,MAAM,SAAS,sBAAsB,IAAI,MAAgB;AACzD,KAAI,WAAW,OAAW,QAAO;CAEjC,IAAI;AACJ,KAAI,MAAM,QAAQ,MAAM,CACtB,UAAS,MAAM,MAAM,IAAI,gBAAgB,CAAC,KAAK,IAAI,GAAG;MACjD;EACL,MAAM,MAAM;EACZ,MAAM,aAAa,OAAO,KAAK,IAAI,CAAC,MAAM;EAC1C,MAAM,QAAkB,EAAE;AAC1B,OAAK,MAAM,OAAO,WAChB,KAAI,IAAI,SAAS,OACf,OAAM,KAAK,GAAG,KAAK,UAAU,IAAI,CAAC,GAAG,gBAAgB,IAAI,KAAK,GAAG;AAGrE,WAAS,MAAM,MAAM,KAAK,IAAI,GAAG;;AAGnC,uBAAsB,IAAI,OAAiB,OAAO;AAClD,QAAO;;;;;;;;;;;;;;;;AAiBT,SAAgB,sBACd,QACA,WACA,WACQ;CAER,MAAM,QAAkB,CAAC,UAAU;CAGnC,IAAI,iBAAiB;AAErB,MAAK,MAAM,OAAO,WAAW;EAC3B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,QAAW;GAEvB,MAAM,aAAa,gBAAgB,MAAM;AACzC,SAAM,KAAK,GAAG,IAAI,GAAG,aAAa;AAClC,qBAAkB;;;CAKtB,MAAM,cAAc,6BAA6B,OAAO;AAGxD,KAAI,OAAO,KAAK,YAAY,CAAC,SAAS,GAAG;EACvC,MAAM,mBAAmB,2BAA2B,eAAe;EACnE,MAAM,sBAAgC,EAAE;AAExC,OAAK,MAAM,aAAa,iBACtB,KAAI,YAAY,WACd,qBAAoB,KAAK,GAAG,UAAU,GAAG,YAAY,aAAa;AAKtE,MAAI,oBAAoB,SAAS,GAAG;AAClC,uBAAoB,MAAM;AAC1B,SAAM,QAAQ,WAAW,oBAAoB,KAAK,IAAI,CAAC,GAAG;;;AAK9D,QAAO,MAAM,KAAK,KAAK"}

package/dist/chunks/renderChunk.js

@@ -1,30 +1,12 @@
 import { extractLocalPredefinedStates } from "../states/index.js";
-import { renderStyles } from "../pipeline/index.js";
+import { hasPipelineCacheEntry, renderStyles } from "../pipeline/index.js";
 import { CHUNK_NAMES } from "./definitions.js";
 
 //#region src/chunks/renderChunk.ts
 /**
-* Render styles for a specific chunk.
-*
-* Creates a filtered styles object containing only the keys for this chunk,
-* then delegates to the existing renderStyles function.
-*
-* IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')
-* are always included in the filtered styles, regardless of which chunk is
-* being rendered. This ensures that state references like '@mobile' in any
-* chunk can be properly resolved by the pipeline.
-*
-* @param styles - The full styles object
-* @param chunkName - Name of the chunk being rendered
-* @param styleKeys - Keys of styles belonging to this chunk
-* @returns RenderResult with rules for this chunk
+* Build a filtered styles object for a regular chunk.
 */
-function renderStylesForChunk(styles, chunkName, styleKeys) {
-	if (styleKeys.length === 0) return {
-		rules: [],
-		className: ""
-	};
-	if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) return renderSubcomponentsChunk(styles, styleKeys);
+function buildFilteredStyles(styles, styleKeys) {
 	const localPredefinedStates = extractLocalPredefinedStates(styles);
 	const filteredStyles = {};
 	for (const [key, value] of Object.entries(localPredefinedStates)) filteredStyles[key] = value;
@@ -32,19 +14,12 @@ function renderStylesForChunk(styles, chunkName, styleKeys) {
 		const value = styles[key];
 		if (value !== void 0) filteredStyles[key] = value;
 	}
-	return renderStyles(filteredStyles);
+	return filteredStyles;
 }
 /**
-* Render the subcomponents chunk.
-*
-* Subcomponents (selectors like Label, &::before, etc.) contain nested
-* style objects that need to be preserved in their entirety.
-*
-* @param styles - The full styles object
-* @param selectorKeys - Keys of selectors in this chunk
-* @returns RenderResult with rules for all subcomponents
+* Build a filtered styles object for the subcomponents chunk.
 */
-function renderSubcomponentsChunk(styles, selectorKeys) {
+function buildSubcomponentFilteredStyles(styles, selectorKeys) {
 	const localPredefinedStates = extractLocalPredefinedStates(styles);
 	const filteredStyles = {};
 	for (const [key, value] of Object.entries(localPredefinedStates)) filteredStyles[key] = value;
@@ -53,7 +28,31 @@ function renderSubcomponentsChunk(styles, selectorKeys) {
 		if (value !== void 0) filteredStyles[key] = value;
 	}
 	if (styles.$ !== void 0) filteredStyles.$ = styles.$;
-	return renderStyles(filteredStyles);
+	return filteredStyles;
+}
+/**
+* Render styles for a specific chunk.
+*
+* On pipeline cache hit, avoids building the filtered styles object entirely.
+* Only constructs it on cache miss when the pipeline actually needs the styles.
+*
+* IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')
+* are always included in the filtered styles, regardless of which chunk is
+* being rendered. This ensures that state references like '@mobile' in any
+* chunk can be properly resolved by the pipeline.
+*
+* @param styles - The full styles object
+* @param chunkName - Name of the chunk being rendered
+* @param styleKeys - Keys of styles belonging to this chunk
+* @returns RenderResult with rules for this chunk
+*/
+function renderStylesForChunk(styles, chunkName, styleKeys, pipelineCacheKey) {
+	if (styleKeys.length === 0) return {
+		rules: [],
+		className: ""
+	};
+	if (pipelineCacheKey && hasPipelineCacheEntry(pipelineCacheKey)) return renderStyles(void 0, void 0, void 0, pipelineCacheKey);
+	return renderStyles(chunkName === CHUNK_NAMES.SUBCOMPONENTS ? buildSubcomponentFilteredStyles(styles, styleKeys) : buildFilteredStyles(styles, styleKeys), void 0, void 0, pipelineCacheKey);
 }
 
 //#endregion

package/dist/chunks/renderChunk.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderChunk.js","names":[],"sources":["../../src/chunks/renderChunk.ts"],"sourcesContent":["/**\n * Chunk-specific style rendering.\n *\n * Renders styles for a specific chunk by filtering the styles object\n * to only include relevant keys before passing to renderStyles.\n */\n\nimport type { RenderResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport { extractLocalPredefinedStates } from '../states';\nimport type { Styles } from '../styles/types';\n\nimport { CHUNK_NAMES } from './definitions';\n\n/**\n * Render styles for a specific chunk.\n *\n * Creates a filtered styles object containing only the keys for this chunk,\n * then delegates to the existing renderStyles function.\n *\n * IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')\n * are always included in the filtered styles, regardless of which chunk is\n * being rendered. This ensures that state references like '@mobile' in any\n * chunk can be properly resolved by the pipeline.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk being rendered\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns RenderResult with rules for this chunk\n */\nexport function renderStylesForChunk(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): RenderResult {\n  // Empty chunk - return empty result\n  if (styleKeys.length === 0) {\n    return { rules: [], className: '' };\n  }\n\n  // For subcomponents, we need to preserve the nested structure\n  if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) {\n    return renderSubcomponentsChunk(styles, styleKeys);\n  }\n\n  // Extract local predefined states from the full styles object\n  // These must be included for state resolution to work across chunks\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n\n  // For regular chunks, create a filtered styles object\n  // This is memory-efficient: we only create a shallow copy with filtered keys\n  const filteredStyles: Styles = {};\n\n  // First, add local predefined states so they're available for resolution\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  // Then add the chunk's style keys\n  for (const key of styleKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  // Delegate to existing renderStyles\n  return renderStyles(filteredStyles);\n}\n\n/**\n * Render the subcomponents chunk.\n *\n * Subcomponents (selectors like Label, &::before, etc.) contain nested\n * style objects that need to be preserved in their entirety.\n *\n * @param styles - The full styles object\n * @param selectorKeys - Keys of selectors in this chunk\n * @returns RenderResult with rules for all subcomponents\n */\nfunction renderSubcomponentsChunk(\n  styles: Styles,\n  selectorKeys: string[],\n): RenderResult {\n  // Extract local predefined states from the full styles object\n  // These must be included for state resolution to work in nested styles\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n\n  // Create a styles object containing only the selector keys\n  const filteredStyles: Styles = {};\n\n  // First, add local predefined states so they're available for resolution\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  // Then add the selector keys\n  for (const key of selectorKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  // Also copy the $ helper if present (used for selector combinators)\n  if (styles.$ !== undefined) {\n    filteredStyles.$ = styles.$;\n  }\n\n  // Delegate to existing renderStyles\n  return renderStyles(filteredStyles);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,qBACd,QACA,WACA,WACc;AAEd,KAAI,UAAU,WAAW,EACvB,QAAO;EAAE,OAAO,EAAE;EAAE,WAAW;EAAI;AAIrC,KAAI,cAAc,YAAY,cAC5B,QAAO,yBAAyB,QAAQ,UAAU;CAKpD,MAAM,wBAAwB,6BAA6B,OAAO;CAIlE,MAAM,iBAAyB,EAAE;AAGjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAIxB,MAAK,MAAM,OAAO,WAAW;EAC3B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAK1B,QAAO,aAAa,eAAe;;;;;;;;;;;;AAarC,SAAS,yBACP,QACA,cACc;CAGd,MAAM,wBAAwB,6BAA6B,OAAO;CAGlE,MAAM,iBAAyB,EAAE;AAGjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAIxB,MAAK,MAAM,OAAO,cAAc;EAC9B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAK1B,KAAI,OAAO,MAAM,OACf,gBAAe,IAAI,OAAO;AAI5B,QAAO,aAAa,eAAe"}
+{"version":3,"file":"renderChunk.js","names":[],"sources":["../../src/chunks/renderChunk.ts"],"sourcesContent":["/**\n * Chunk-specific style rendering.\n *\n * Renders styles for a specific chunk by filtering the styles object\n * to only include relevant keys before passing to renderStyles.\n */\n\nimport type { RenderResult } from '../pipeline';\nimport { hasPipelineCacheEntry, renderStyles } from '../pipeline';\nimport { extractLocalPredefinedStates } from '../states';\nimport type { Styles } from '../styles/types';\n\nimport { CHUNK_NAMES } from './definitions';\n\n/**\n * Build a filtered styles object for a regular chunk.\n */\nfunction buildFilteredStyles(styles: Styles, styleKeys: string[]): Styles {\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n  const filteredStyles: Styles = {};\n\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  for (const key of styleKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  return filteredStyles;\n}\n\n/**\n * Build a filtered styles object for the subcomponents chunk.\n */\nfunction buildSubcomponentFilteredStyles(\n  styles: Styles,\n  selectorKeys: string[],\n): Styles {\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n  const filteredStyles: Styles = {};\n\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  for (const key of selectorKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  if (styles.$ !== undefined) {\n    filteredStyles.$ = styles.$;\n  }\n\n  return filteredStyles;\n}\n\n/**\n * Render styles for a specific chunk.\n *\n * On pipeline cache hit, avoids building the filtered styles object entirely.\n * Only constructs it on cache miss when the pipeline actually needs the styles.\n *\n * IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')\n * are always included in the filtered styles, regardless of which chunk is\n * being rendered. This ensures that state references like '@mobile' in any\n * chunk can be properly resolved by the pipeline.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk being rendered\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns RenderResult with rules for this chunk\n */\nexport function renderStylesForChunk(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n  pipelineCacheKey?: string,\n): RenderResult {\n  if (styleKeys.length === 0) {\n    return { rules: [], className: '' };\n  }\n\n  // Fast path: skip building filteredStyles when pipeline has a cached result\n  if (pipelineCacheKey && hasPipelineCacheEntry(pipelineCacheKey)) {\n    return renderStyles(undefined, undefined, undefined, pipelineCacheKey);\n  }\n\n  // Cache miss: build filtered styles and run pipeline\n  const filteredStyles =\n    chunkName === CHUNK_NAMES.SUBCOMPONENTS\n      ? buildSubcomponentFilteredStyles(styles, styleKeys)\n      : buildFilteredStyles(styles, styleKeys);\n\n  return renderStyles(filteredStyles, undefined, undefined, pipelineCacheKey);\n}\n"],"mappings":";;;;;;;;AAiBA,SAAS,oBAAoB,QAAgB,WAA6B;CACxE,MAAM,wBAAwB,6BAA6B,OAAO;CAClE,MAAM,iBAAyB,EAAE;AAEjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAGxB,MAAK,MAAM,OAAO,WAAW;EAC3B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAI1B,QAAO;;;;;AAMT,SAAS,gCACP,QACA,cACQ;CACR,MAAM,wBAAwB,6BAA6B,OAAO;CAClE,MAAM,iBAAyB,EAAE;AAEjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAGxB,MAAK,MAAM,OAAO,cAAc;EAC9B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAI1B,KAAI,OAAO,MAAM,OACf,gBAAe,IAAI,OAAO;AAG5B,QAAO;;;;;;;;;;;;;;;;;;AAmBT,SAAgB,qBACd,QACA,WACA,WACA,kBACc;AACd,KAAI,UAAU,WAAW,EACvB,QAAO;EAAE,OAAO,EAAE;EAAE,WAAW;EAAI;AAIrC,KAAI,oBAAoB,sBAAsB,iBAAiB,CAC7D,QAAO,aAAa,QAAW,QAAW,QAAW,iBAAiB;AASxE,QAAO,aAJL,cAAc,YAAY,gBACtB,gCAAgC,QAAQ,UAAU,GAClD,oBAAoB,QAAQ,UAAU,EAER,QAAW,QAAW,iBAAiB"}

package/dist/config.d.ts

@@ -1,8 +1,9 @@
 import { KeyframesSteps, PropertyDefinition } from "./injector/types.js";
 import { StyleDetails, UnitHandler } from "./parser/types.js";
 import { StyleHandlerDefinition } from "./utils/styles.js";
-import { RecipeStyles } from "./styles/types.js";
+import { ConfigTokens, RecipeStyles } from "./styles/types.js";
 import { StyleInjector } from "./injector/injector.js";
+import { ColorSpace } from "./utils/color-space.js";
 import { TastyPlugin } from "./plugins/types.js";
 
 //#region src/config.d.ts
@@ -58,6 +59,17 @@ interface TastyConfig {
    * @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }
    */
   funcs?: Record<string, (groups: StyleDetails[]) => string>;
+  /**
+   * Color space used for decomposed color token companion variables.
+   * Controls the CSS function and suffix for alpha composition.
+   *
+   * - `'rgb'`   — suffix `-rgb`, e.g. `rgb(var(--name-color-rgb) / .5)`
+   * - `'hsl'`   — suffix `-hsl`, e.g. `hsl(var(--name-color-hsl) / .5)`
+   * - `'oklch'` — suffix `-oklch`, e.g. `oklch(var(--name-color-oklch) / .5)`
+   *
+   * @default 'oklch'
+   */
+  colorSpace?: ColorSpace;
   /**
    * Automatically infer and register CSS @property declarations
    * from custom property values found in styles, keyframes, and global config.
@@ -152,20 +164,43 @@ interface TastyConfig {
    */
   handlers?: Record<string, StyleHandlerDefinition>;
   /**
-   * Predefined tokens that are replaced during style parsing.
-   * Token values are processed through the parser (like component tokens).
+   * Design tokens injected as CSS custom properties on `:root`.
+   * Values are parsed through the Tasty DSL. Supports state maps
+   * for responsive/theme-aware tokens.
+   *
+   * - `$name` keys become `--name` CSS custom properties
+   * - `#name` keys become `--name-color` and `--name-color-{colorSpace}` properties
+   *
+   * Tokens are injected once when the first style is rendered.
+   *
+   * @example
+   * ```ts
+   * configure({
+   *   tokens: {
+   *     '$gap': '4px',
+   *     '#primary': {
+   *       '': '#purple',
+   *       '@dark': '#light-purple',
+   *     },
+   *   },
+   * });
+   * ```
+   */
+  tokens?: ConfigTokens;
+  /**
+   * Predefined tokens that are replaced during style parsing (parse-time substitution).
    * Use `$name` for custom properties and `#name` for color tokens.
+   * Values are substituted inline before CSS generation, unlike `tokens` which
+   * inject CSS custom properties on `:root`.
    *
    * For color tokens (#name), boolean `true` is converted to `transparent`.
    *
    * @example
    * ```ts
    * configure({
-   *   tokens: {
+   *   replaceTokens: {
    *     $spacing: '2x',
-   *     '$card-padding': '4x',
    *     '#accent': '#purple',
-   *     '#surface': '#white',
    *     '#overlay': true, // → transparent
    *   },
    * });
@@ -173,13 +208,13 @@ interface TastyConfig {
    * // Now use in styles - tokens are replaced at parse time:
    * const Card = tasty({
    *   styles: {
-   *     padding: '$card-padding',  // → calc(4 * var(--gap))
-   *     fill: '#surface',          // → var(--white-color)
+   *     padding: '$spacing',  // → calc(2 * var(--gap))
+   *     fill: '#accent',      // → var(--purple-color)
    *   },
    * });
    * ```
    */
-  tokens?: Record<`$${string}`, string | number | boolean> & Record<`#${string}`, string | number | boolean>;
+  replaceTokens?: Record<`$${string}`, string | number | boolean> & Record<`#${string}`, string | number | boolean>;
   /**
    * Predefined style recipes -- named style bundles that can be applied via `recipe` style property.
    * Recipe values are flat tasty styles (no sub-element keys). They may contain base styles,
@@ -229,7 +264,7 @@ declare function isTestEnvironment(): boolean;
 declare function hasStylesGenerated(): boolean;
 /**
  * Check if any global keyframes are configured.
- * Fast path: returns false if no keyframes were ever set.
+ * Uses a pre-computed flag to avoid Object.keys() allocation on every call.
  */
 declare function hasGlobalKeyframes(): boolean;
 /**