npm - @tenphi/tasty - Versions diffs - 0.14.0 → 0.14.2 - Mend

@tenphi/tasty 0.14.0 → 0.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md +74 -44
package/dist/pipeline/index.js +21 -10
package/dist/pipeline/index.js.map +1 -1
package/dist/styles/types.d.ts +18 -3
package/dist/tasty.d.ts +3 -3
package/docs/README.md +5 -4
package/docs/adoption.md +6 -4
package/docs/comparison.md +9 -7
package/docs/design-system.md +1 -1
package/docs/dsl.md +40 -0
package/docs/getting-started.md +11 -9
package/docs/methodology.md +3 -1
package/docs/runtime.md +1 -25
package/docs/ssr.md +2 -2
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -5,8 +5,8 @@
 <h1 align="center">Tasty</h1>
 <p align="center">
-  <strong>The styling engine built for design systems.</strong><br>
-  Deterministic CSS generation. State-aware DSL. Zero specificity conflicts. Ever.
+  <strong>Deterministic styling for stateful component systems.</strong><br>
+  A design-system styling engine that compiles component states into mutually exclusive selectors.
 </p>
 <p align="center">
@@ -17,23 +17,41 @@
 ---
-Most CSS-in-JS libraries emit rules that compete through cascade and specificity. Tasty emits **mutually exclusive CSS selectors** — for any component state combination, exactly one selector matches each property at a time. No cascade conflicts, no specificity wars, no `!important` escapes. Components compose and extend without breaking each other.
+Tasty is a styling engine for design systems that generates deterministic CSS for stateful components.
-That guarantee unlocks a concise, CSS-like DSL where design tokens, custom units, responsive states, container queries, sub-element styling, and theming all compose without surprises — one coherent system that scales from a single component to an enterprise design system.
+It compiles state maps into **mutually exclusive selectors**, so for a given property and component state, one branch wins by construction instead of competing through cascade and specificity.
+That is the core guarantee: component styling resolves from declared state logic, not from source-order accidents or specificity fights.
+Tasty fits best when you are building a design system or component library with intersecting states, variants, tokens, sub-elements, responsive rules, and extension semantics that need to stay predictable over time.
+On top of that foundation, Tasty gives teams a governed styling model: a CSS-like DSL, tokens, recipes, typed style props, sub-elements, and multiple rendering modes.
+- **New here?** Start with [Comparison](docs/comparison.md) if you are evaluating fit.
+- **Adopting Tasty?** Read the [Adoption Guide](docs/adoption.md).
+- **Want the mechanism first?** Jump to [How It Actually Works](#how-it-actually-works).
+- **Ready to build?** Go to [Getting Started](docs/getting-started.md).
 ## Why Tasty
-- **Deterministic at any scale** — Exclusive selector generation eliminates the entire class of cascade/specificity bugs. Every state combination resolves to exactly one CSS rule per property. Refactor freely. See [How It Actually Works](#how-it-actually-works).
-- **AI-friendly by design** — Style definitions are declarative, self-contained, and structurally consistent. AI tools can read, understand, and refactor even advanced state bindings as confidently as a human — because there's no hidden cascade logic or implicit ordering to second-guess.
-- **DSL that feels like CSS** — Property names you already know (`padding`, `color`, `display`) with syntax sugar that removes boilerplate. Learn the DSL in minutes, not days. Start with the [Style DSL](docs/dsl.md), then use [Style Properties](docs/styles.md) as the handler reference.
-- **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. Built-in units and standard color values work out of the box, and [Configuration](docs/configuration.md) lets teams define shared conventions on top.
-- **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, 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. 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.
-- **TypeScript-first** — Full type definitions, module augmentation for custom properties, and autocomplete for tokens, presets, and themes. See [Configuration](docs/configuration.md).
+- **Deterministic composition, not cascade fights** — Stateful styles resolve from the state map you declared, not from selector competition. See [How It Actually Works](#how-it-actually-works).
+- **Built for design-system teams** — Best fit for reusable component systems with complex state interactions.
+- **A governed styling model, not just syntax sugar** — Design-system authors define the styling language product teams consume.
+- **DSL that still feels like CSS** — Familiar property names, less selector boilerplate. Start with the [Style DSL](docs/dsl.md), then use [Style Properties](docs/styles.md) as the handler reference.
+### Supporting capabilities
+- **Typed style 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).
+- **Runtime, SSR, and zero-runtime options** — Use `tasty()` for runtime React components, add SSR integrations when your framework renders that runtime on the server, or use `tastyStatic()` when you specifically want build-time extraction instead of runtime styling.
+- **Broad modern CSS coverage** — Media queries, container queries, `@supports`, `:has()`, `@starting-style`, `@property`, `@keyframes`, and more. Features that do not fit the component model (such as `@layer` and `!important`) are intentionally left out.
+- **Performance and caching** — Runtime mode injects CSS on demand, reuses chunks aggressively, and relies on multi-level caching so large component systems stay practical.
+- **TypeScript-first and AI-friendly** — Style definitions are declarative, structurally consistent, and fully typed, which helps both humans and tooling understand advanced stateful styles without hidden cascade logic.
+## Why It Exists
+Modern component styling becomes fragile when multiple selectors can still win for the same property. Hover, disabled, theme, breakpoint, parent state, and root state rules start competing through specificity and source order.
+Tasty replaces that competition with explicit state-map resolution. Each property compiles into mutually exclusive branches, so component styling stays deterministic as systems grow. For the full mechanism, jump to [How It Actually Works](#how-it-actually-works).
 ## Installation
@@ -56,20 +74,15 @@ yarn add @tenphi/tasty
 ## Start Here
+For the fuller docs map beyond the quick routes above, start here:
+- **[Comparison](docs/comparison.md)** — read this first if you are evaluating whether Tasty fits your team's styling model
+- **[Adoption Guide](docs/adoption.md)** — understand who Tasty is for, where it fits, and how to introduce it incrementally
 - **[Getting Started](docs/getting-started.md)** — the canonical onboarding path: install, first component, optional shared `configure()`, ESLint, editor tooling, and rendering mode selection
-- **[Docs Hub](docs/README.md)** — choose docs by role and task: runtime, zero-runtime, SSR, design-system authoring, internals, and debugging
+- **[Style rendering pipeline](docs/PIPELINE.md)** — see the selector model behind deterministic style resolution
+- **[Docs Hub](docs/README.md)** — choose docs by role and task: runtime, zero-runtime, runtime SSR integration, design-system authoring, internals, and debugging
 - **[Methodology](docs/methodology.md)** — the recommended component model and public API conventions for design-system code
-## Choose a Rendering Mode
-| Mode | Entry point | Best for | Trade-off |
-|------|-------------|----------|-----------|
-| **Runtime** | `@tenphi/tasty` | Interactive apps and design systems | Full feature set; CSS is generated on demand at runtime |
-| **Zero-runtime** | `@tenphi/tasty/static` | Static sites, SSG, landing pages | Requires the Babel plugin; no component-level `styleProps` or runtime-only APIs |
-| **SSR** | `@tenphi/tasty/ssr/*` | Next.js, Astro, and other streaming React SSR setups | Uses runtime `tasty()` with server-collected CSS and hydration cache transfer |
-All three share the same DSL, tokens, units, and state mappings. See [Getting Started](docs/getting-started.md#choosing-a-rendering-mode), [Zero Runtime](docs/tasty-static.md), and [Server-Side Rendering](docs/ssr.md).
 ## Quick Start
 ### Create a styled component
@@ -82,12 +95,12 @@ const Card = tasty({
   styles: {
     display: 'flex',
     flow: 'column',
-    padding: '4x',
-    gap: '2x',
-    fill: 'okhsl(98% 0.02 255)',
-    color: 'okhsl(28% 0.03 255)',
-    border: 'okhsl(88% 0.02 255)',
-    radius: '1r',
+    padding: '24px',
+    gap: '12px',
+    fill: 'white',
+    color: '#222',
+    border: '1px solid #ddd',
+    radius: '12px',
   },
 });
@@ -95,7 +108,9 @@ const Card = tasty({
 <Card>Hello World</Card>
 ```
-Every value maps to CSS you'd recognize. This example is intentionally config-free: built-in units work immediately, and standard color values such as `rgb(...)`, `hsl(...)`, named colors, and `okhsl(...)` are all valid without setup. `okhsl(...)` is the recommended choice when you want a design-system-friendly color authoring path from day one.
+Every value maps to CSS you'd recognize. This example is intentionally a simple first contact, not a tour of the whole DSL.
+When you want a more design-system-shaped authoring model, Tasty also supports built-in units, tokens, recipes, state aliases, and color values such as `okhsl(...)` without extra runtime libraries.
 Use `configure()` when you want to define shared tokens, state aliases, recipes, or other conventions for your app or design system. For a fuller onboarding path, follow [Getting Started](docs/getting-started.md).
@@ -165,9 +180,9 @@ Use `configure()` once when your app or design system needs shared aliases, toke
 ### CSS properties as props
-With `styleProps`, a component can expose the styles you choose as normal typed props. That means you can adjust layout, spacing, alignment, or positioning right where the component is used, instead of introducing wrapper elements or reaching for a separate styling API.
+Beyond state resolution, Tasty can also expose selected style controls as typed component props. That lets design systems keep layout and composition inside governed component APIs instead of pushing teams toward wrapper elements or ad hoc styling escapes.
-This is especially good for prototyping and fast UI iteration: you can shape interfaces quickly, while still staying inside a typed, design-system-aware component API that scales to production.
+With `styleProps`, a component can expose the styles you choose as normal typed props. You can adjust layout, spacing, alignment, or positioning where the component is used while staying inside a typed, design-system-aware API.
 ```tsx
 import { tasty, FLOW_STYLES, POSITION_STYLES } from '@tenphi/tasty';
@@ -214,7 +229,18 @@ The same props also support state maps, so responsive values use the exact same
 </Space>
 ```
-Layout components can expose flow props. Buttons can expose positioning props. Each component can offer only the style props that make sense for its role, while still keeping tokens, custom units, and state maps fully typed. This works in runtime `tasty()` components, not in `tastyStatic()`.
+Layout components can expose flow props. Buttons can expose positioning props. Each component can offer only the style props that make sense for its role while keeping tokens, custom units, and state maps fully typed. This works in runtime `tasty()` components, not in `tastyStatic()`.
+## Choose a Styling Approach
+Once you understand the component model, pick the rendering mode that matches your app.
+| Approach | Entry point | Best for | Trade-off |
+|----------|-------------|----------|-----------|
+| **Runtime** | `@tenphi/tasty` | Interactive apps with reusable stateful components and design systems | Full feature set; CSS is generated on demand at runtime |
+| **Zero-runtime** | `@tenphi/tasty/static` | Static sites, SSG, landing pages | Requires the Babel plugin; no component-level `styleProps` or runtime-only APIs |
+If your framework can execute runtime React code on the server, you can also add **SSR on top of runtime** with `@tenphi/tasty/ssr/*`. This uses the same `tasty()` pipeline, but collects CSS during server rendering and hydrates the cache on the client. That is the model for Next.js, generic React SSR, and Astro islands. See [Getting Started](docs/getting-started.md#choosing-a-rendering-mode), [Zero Runtime](docs/tasty-static.md), and [Server-Side Rendering](docs/ssr.md).
 ## How It Actually Works
@@ -222,7 +248,7 @@ 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.
+### The structural problem with normal CSS
 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.
@@ -235,7 +261,11 @@ A small example makes this tangible. Two rules for a button's background:
 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.
+### Why real state logic is hard to author by hand
+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.
+### What Tasty generates instead
 Tasty solves both problems at once: **every state mapping compiles into mutually exclusive selectors.**
@@ -280,8 +310,6 @@ Better — but the bare `.t0` default still matches unconditionally. It matches
 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 */
 :root[data-schema="dark"] .t0.t0 {
@@ -308,9 +336,11 @@ Tasty generates the correct version automatically:
 }
 ```
+### What guarantee that gives you
 Every rule is guarded by the negation of higher-priority rules. No two rules can match at the same time. No specificity arithmetic. No source-order dependence. Components compose and extend without collisions.
-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.
+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 keeps the solution in CSS while removing much of the selector bookkeeping that is hard to maintain by hand.
 [Try it in the Cube UI Kit Storybook playground →](https://cube-ui-kit.vercel.app/?path=/story/getting-started-tasty-playground--playground)
@@ -533,7 +563,7 @@ module.exports = {
 | **Sub-elements** | Built-in (`<C.Title>`) | Manual (`data-element`) |
 | **Variants** | Built-in (`variants` option) | Separate static styles |
 | **Framework** | React | Any (requires Babel) |
-| **Best for** | Interactive apps, design systems | Static sites, SSG, landing pages |
+| **Best for** | Interactive apps with reusable stateful components, design systems | Static sites, SSG, landing pages |
 Both share the same DSL, tokens, units, state mappings, and recipes.
@@ -714,9 +744,9 @@ Open-source React UI kit built on Tasty + React Aria. 100+ production components
 ## Documentation
-Start from the docs hub if you want the shortest path to the right guide for your role or rendering mode.
+Start from the docs hub if you want the shortest path to the right guide for your role or styling approach.
-- **[Docs Hub](docs/README.md)** — audience-based navigation across onboarding, design-system authoring, runtime, zero-runtime, SSR, debugging, and internals
+- **[Docs Hub](docs/README.md)** — audience-based navigation across onboarding, design-system authoring, runtime, zero-runtime, runtime SSR integration, debugging, and internals
 ### Start here

package/dist/pipeline/index.js CHANGED Viewed

@@ -170,7 +170,8 @@ function getAllSelectors(key, styles) {
 * Supports:
 * - Direct child: '>'
 * - Chained elements: '>Body>Row>'
-* - HTML tags: 'a', '>ul>li', 'button:hover'
+* - HTML tags (no key injection): 'h1', '>ul>li', 'button:hover'
+* - Universal selector: '*', 'h1 *'
 * - Pseudo-elements on root: '::before'
 * - Pseudo on sub-element: '@::before', '>@:hover'
 * - Classes: '.active', '>@.active'
@@ -207,6 +208,7 @@ function processAffix(affix, key) {
 */
 const VALID_TOKEN_PATTERNS = [
 	/^[>+~]/,
+	/^\*/,
 	/^[A-Z][a-zA-Z0-9]*/,
 	/^@/,
 	/^::?[a-z][a-z0-9-]*(?:\([^)]*\))?/,
@@ -341,12 +343,13 @@ function processSinglePattern(pattern, key) {
 * The tokenizer handles these token types in order:
 * 1. Whitespace (skipped)
 * 2. Combinators: >, +, ~ (add surrounding spaces)
-* 3. Uppercase names: Body, Row (convert to [data-element="..."])
-* 4. @ placeholder (keep for later replacement)
-* 5. Pseudo: :hover, ::before (attach to previous token)
-* 6. Tags: a, div, button (keep as-is with spacing)
-* 7. Classes: .active (attach to previous element/tag/placeholder)
-* 8. Attributes: [type="text"] (keep as-is)
+* 3. Universal selector: * (keep as-is with spacing)
+* 4. Uppercase names: Body, Row (convert to [data-element="..."])
+* 5. @ placeholder (keep for later replacement)
+* 6. Pseudo: :hover, ::before (attach to previous token)
+* 7. Tags: a, div, button (keep as-is with spacing)
+* 8. Classes: .active (attach to previous element/tag/placeholder)
+* 9. Attributes: [type="text"] (keep as-is)
 *
 * @param pattern - The raw selector pattern to transform
 * @returns Transformed pattern with proper CSS selector syntax
@@ -375,6 +378,13 @@ function transformPattern(pattern) {
 			i++;
 			continue;
 		}
+		if (char === "*") {
+			if (result && lastCh !== " ") result += " ";
+			result += "*";
+			lastCh = "*";
+			i++;
+			continue;
+		}
 		if (/[A-Z]/.test(char)) {
 			const nameStart = i;
 			while (i < pattern.length && /[a-zA-Z0-9]/.test(pattern[i])) i++;
@@ -449,7 +459,8 @@ function transformPattern(pattern) {
 * |----------------|-------------|---------|--------|
 * | Combinator (>, +, ~) | Yes | `'>Body>'` | `> [data-element="Body"] > [el]` |
 * | Uppercase element | Yes | `'>Body>Row'` | `> [el1] > [el2] [key]` |
-* | Lowercase tag | Yes | `'>ul>li'` | `> ul > li [key]` |
+* | Lowercase tag | No | `'h1'` | ` h1` |
+* | Universal (*) | No | `'h1 *'` | ` h1 *` |
 * | Pseudo (:hover, ::before) | No | `'::before'` | `::before` |
 * | Class (.active) | No | `'.active'` | `.active` |
 * | Attribute ([type]) | No | `'[type="text"]'` | `[type="text"]` |
@@ -460,7 +471,8 @@ function transformPattern(pattern) {
 * @example
 * shouldInjectKey('>')           // → true (trailing combinator)
 * shouldInjectKey('>Body>Row')   // → true (ends with element)
-* shouldInjectKey('>ul>li')      // → true (ends with tag)
+* shouldInjectKey('h1')          // → false (ends with tag)
+* shouldInjectKey('*')           // → false (universal selector)
 * shouldInjectKey('::before')    // → false (ends with pseudo)
 * shouldInjectKey('.active')     // → false (ends with class)
 * shouldInjectKey('a:hover')     // → false (ends with pseudo)
@@ -470,7 +482,6 @@ function shouldInjectKey(pattern) {
 	const trimmed = pattern.trim();
 	if (/[>+~]$/.test(trimmed)) return true;
 	if (/(?:^|[\s>+~\]:])[A-Z][a-zA-Z0-9]*$/.test(trimmed)) return true;
-	if (/(?<![:.])(?:^|[\s>+~])[a-z][a-z0-9-]*$/.test(trimmed)) return true;
 	return false;
 }
 /**

package/dist/pipeline/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../src/pipeline/index.ts"],"sourcesContent":["/*\n Tasty Style Rendering Pipeline\n \n This is the main entrypoint for the new pipeline implementation.\n * It implements the complete flow from style objects to CSS rules.\n \n Pipeline stages:\n * 1. PARSE CONDITIONS - Parse state keys into ConditionNode trees\n * 2. BUILD EXCLUSIVE CONDITIONS - AND with negation of higher-priority conditions\n * 3. SIMPLIFY CONDITIONS - Apply boolean algebra, detect contradictions\n * 4. GROUP BY HANDLER - Collect styles per handler, compute combinations\n * 5. COMPUTE CSS VALUES - Call handlers to get CSS declarations\n * 6. MERGE BY VALUE - Merge rules with identical CSS output\n * 7. MATERIALIZE CSS - Convert conditions to CSS selectors + at-rules\n /\n\nimport { Lru } from '../parser/lru';\nimport type { StateParserContext } from '../states';\nimport {\n createStateParserContext,\n extractLocalPredefinedStates,\n} from '../states';\nimport { createStyle, STYLE_HANDLER_MAP } from '../styles';\nimport type { Styles } from '../styles/types';\nimport type {\n StyleHandler,\n StyleMap,\n StyleValue,\n StyleValueStateMap,\n} from '../utils/styles';\nimport { stringifyStyles } from '../utils/styles';\n\nimport type { ConditionNode } from './conditions';\nimport { and, or, trueCondition } from './conditions';\nimport type { ExclusiveStyleEntry } from './exclusive';\nimport {\n buildExclusiveConditions,\n expandExclusiveOrs,\n expandOrConditions,\n isValueMapping,\n parseStyleEntries,\n} from './exclusive';\nimport type { CSSRule, SelectorVariant } from './materialize';\nimport {\n branchToCSS,\n buildAtRulesFromVariant,\n conditionToCSS,\n mergeVariantsIntoSelectorGroups,\n optimizeGroups,\n parentGroupsToCSS,\n rootGroupsToCSS,\n selectorGroupToCSS,\n} from './materialize';\nimport { parseStateKey } from './parseStateKey';\nimport { simplifyCondition } from './simplify';\nimport { emitWarning } from './warnings';\n\n// ============================================================================\n// Types (compatible with old renderStyles API)\n// ============================================================================\n\n/\n Matches the old StyleResult interface for backward compatibility\n /\nexport interface StyleResult {\n selector: string;\n declarations: string;\n atRules?: string[];\n needsClassName?: boolean;\n rootPrefix?: string;\n}\n\n/\n Matches the old RenderResult interface for backward compatibility\n /\nexport interface RenderResult {\n rules: StyleResult[];\n className?: string;\n}\n\nexport interface PipelineResult {\n rules: CSSRule[];\n className?: string;\n}\n\ninterface ComputedRule {\n condition: ConditionNode;\n declarations: Record<string, string>;\n selectorSuffix: string;\n}\n\n// ============================================================================\n// Caching\n// ============================================================================\n\nconst pipelineCache = new Lru<string, CSSRule[]>(5000);\n\n// ============================================================================\n// Main Pipeline Function\n// ============================================================================\n\n/\n Render styles using the new pipeline.\n \n This is the main entrypoint that implements the complete flow.\n /\nexport function renderStylesPipeline(\n styles?: Styles,\n className?: string,\n pipelineCacheKey?: string,\n): PipelineResult {\n if (!styles) {\n return { rules: [], className };\n }\n\n // Use pre-computed cache key when available, falling back to stringifyStyles\n const cacheKey = pipelineCacheKey \|\| stringifyStyles(styles);\n let rules = pipelineCache.get(cacheKey);\n\n if (!rules) {\n // Create parser context\n const parserContext = createStateParserContext(styles);\n\n // Run pipeline\n rules = runPipeline(styles, parserContext);\n\n // Cache result\n pipelineCache.set(cacheKey, rules);\n }\n\n // If no className, rules need it to be prepended later\n if (!className) {\n return {\n rules: rules.map((r) => ({\n ...r,\n needsClassName: true,\n })),\n };\n }\n\n // Prepend className to selectors\n const finalRules = rules.map((rule) => {\n // Parse the selector to find where to insert className\n let selector = rule.selector;\n\n // If selector starts with :root, insert className after the :root part\n if (rule.rootPrefix) {\n selector = `${rule.rootPrefix} .${className}.${className}${selector}`;\n } else {\n selector = `.${className}.${className}${selector}`;\n }\n\n return {\n ...rule,\n selector,\n };\n });\n\n return {\n rules: finalRules,\n className,\n };\n}\n\n/\n Check if a cache key exists in the pipeline cache.\n * Used by renderStylesForChunk to avoid building filtered styles on cache hit.\n /\nexport function hasPipelineCacheEntry(cacheKey: string): boolean {\n return pipelineCache.get(cacheKey) !== undefined;\n}\n\n/\n Clear the pipeline cache (for testing)\n /\nexport function clearPipelineCache(): void {\n pipelineCache.clear();\n}\n\n// ============================================================================\n// Pipeline Implementation\n// ============================================================================\n\nfunction runPipeline(\n styles: Styles,\n parserContext: StateParserContext,\n): CSSRule[] {\n const allRules: CSSRule[] = [];\n\n // Process styles recursively (including nested selectors)\n processStyles(styles, '', parserContext, allRules);\n\n // Deduplicate rules\n const seen = new Set<string>();\n const dedupedRules = allRules.filter((rule) => {\n // Include rootPrefix in dedup key - rules with different root prefixes are distinct\n const key = `${rule.selector}\|${rule.declarations}\|${rule.atRules?.join('\|') ?? ''}\|${rule.rootPrefix \|\| ''}`;\n if (seen.has(key)) return false;\n seen.add(key);\n return true;\n });\n\n return dedupedRules;\n}\n\n/\n Process styles at a given nesting level\n /\nfunction processStyles(\n styles: Styles,\n selectorSuffix: string,\n parserContext: StateParserContext,\n allRules: CSSRule[],\n): void {\n const keys = Object.keys(styles);\n\n // Separate selector keys from style keys\n // Skip @keyframes (processed separately) and other @ prefixed keys (predefined states)\n const selectorKeys = keys.filter((key) => isSelector(key));\n const styleKeys = keys.filter(\n (key) => !isSelector(key) && !key.startsWith('@'),\n );\n\n // Process nested selectors first\n for (const key of selectorKeys) {\n const nestedStyles = styles[key] as Styles;\n if (!nestedStyles \|\| typeof nestedStyles !== 'object') continue;\n\n // Get all selectors (handles comma-separated patterns)\n const suffixes = getAllSelectors(key, nestedStyles);\n if (!suffixes) continue; // Invalid selector, skip\n\n // Remove $ from nested styles\n const { $: _$, ...cleanedStyles } = nestedStyles;\n\n // Extract local predefined states scoped to this sub-element\n const subLocalStates = extractLocalPredefinedStates(cleanedStyles);\n const hasSubStates = Object.keys(subLocalStates).length > 0;\n const subContext: StateParserContext = {\n ...parserContext,\n isSubElement: true,\n localPredefinedStates: hasSubStates\n ? { ...parserContext.localPredefinedStates, ...subLocalStates }\n : parserContext.localPredefinedStates,\n };\n\n // Process for each selector (multiple selectors = same styles applied to each)\n for (const suffix of suffixes) {\n processStyles(\n cleanedStyles,\n selectorSuffix + suffix,\n subContext,\n allRules,\n );\n }\n }\n\n // Build handler queue\n const handlerQueue = buildHandlerQueue(styleKeys, styles);\n\n // Process each handler\n for (const { handler, styleMap } of handlerQueue) {\n const lookupStyles = handler.__lookupStyles;\n\n // Stage 1 & 2: Parse and build exclusive conditions for each style\n // Exclusive conditions ensure each CSS rule applies to exactly one state.\n // OR conditions in exclusives are properly expanded to DNF (multiple CSS selectors).\n const exclusiveByStyle = new Map<string, ExclusiveStyleEntry[]>();\n\n for (const styleName of lookupStyles) {\n const value = styleMap[styleName];\n if (value === undefined) continue;\n\n if (isValueMapping(value)) {\n // Parse entries from value mapping\n const parsed = parseStyleEntries(styleName, value, (stateKey) =>\n parseStateKey(stateKey, { context: parserContext }),\n );\n\n // Expand OR conditions into exclusive branches\n // This ensures OR branches like `A \| B \| C` become:\n // A, B & !A, C & !A & !B\n const expanded = expandOrConditions(parsed);\n\n // Build exclusive conditions across all entries\n const exclusive = buildExclusiveConditions(expanded);\n\n // Expand ORs from De Morgan negation into exclusive branches\n // This transforms: !A \| !B → !A, (A & !B)\n // Ensures each CSS rule has proper at-rule context\n const fullyExpanded = expandExclusiveOrs(exclusive);\n exclusiveByStyle.set(styleName, fullyExpanded);\n } else {\n // Simple value - single entry with TRUE condition\n exclusiveByStyle.set(styleName, [\n {\n styleKey: styleName,\n stateKey: '',\n value,\n condition: trueCondition(),\n priority: 0,\n exclusiveCondition: trueCondition(),\n },\n ]);\n }\n }\n\n // Stage 4: Compute all valid state combinations\n const stateSnapshots = computeStateCombinations(\n exclusiveByStyle,\n lookupStyles,\n );\n\n // Stage 5: Call handler for each snapshot\n const computedRules: ComputedRule[] = [];\n\n for (const snapshot of stateSnapshots) {\n const result = handler(snapshot.values as StyleValueStateMap);\n if (!result) continue;\n\n // Handler may return single or array\n const results = Array.isArray(result) ? result : [result];\n\n for (const r of results) {\n if (!r \|\| typeof r !== 'object') continue;\n\n const { $, ...styleProps } = r;\n const declarations: Record<string, string> = {};\n\n for (const [prop, val] of Object.entries(styleProps)) {\n if (val != null && val !== '') {\n declarations[prop] = String(val);\n }\n }\n\n if (Object.keys(declarations).length === 0) continue;\n\n // Handle $ suffixes\n const suffixes = $\n ? (Array.isArray($) ? $ : [$]).map(\n (s) => selectorSuffix + normalizeSelectorSuffix(String(s)),\n )\n : [selectorSuffix];\n\n for (const suffix of suffixes) {\n computedRules.push({\n condition: snapshot.condition,\n declarations,\n selectorSuffix: suffix,\n });\n }\n }\n }\n\n // Stage 6: Merge rules with identical CSS output\n const mergedRules = mergeByValue(computedRules);\n\n // Stage 7: Materialize to CSS\n for (const rule of mergedRules) {\n const cssRules = materializeComputedRule(rule);\n allRules.push(...cssRules);\n }\n }\n}\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\n/\n Check if a key is a CSS selector\n /\nexport function isSelector(key: string): boolean {\n return key.startsWith('&') \|\| key.startsWith('.') \|\| /^[A-Z]/.test(key);\n}\n\n/\n Result of processing a selector affix ($) pattern.\n \n @example\n * // Valid result with multiple selectors\n * { valid: true, selectors: ['> [data-element=\"Cell\"]', ' [data-element=\"Body\"] > [data-element=\"Cell\"]'] }\n \n // Invalid result with error message\n * { valid: false, reason: 'Selector affix \"+\" targets elements outside the root scope.' }\n /\ntype AffixResult =\n \| { valid: true; selectors: string[] }\n \| { valid: false; reason: string };\n\n/\n Get all selector suffixes for a sub-element key.\n \n Handles three types of selector keys:\n * - `&` prefix: Raw selector suffix (e.g., `&:hover` → `:hover`)\n * - `.` prefix: Class selector (e.g., `.active` → ` .active`)\n * - Uppercase: Sub-element with optional `$` affix pattern\n \n @param key - The sub-element key (e.g., 'Label', '&:hover', '.active')\n * @param styles - The styles object, may contain `$` property for selector affix\n * @returns Array of selector suffixes, or null if invalid (with console warning)\n \n @example\n * getAllSelectors('Label', {})\n * // → [' [data-element=\"Label\"]']\n \n getAllSelectors('Cell', { $: '>, >Body>' })\n * // → ['> [data-element=\"Cell\"]', ' [data-element=\"Body\"] > [data-element=\"Cell\"]']\n /\nfunction getAllSelectors(key: string, styles?: Styles): string[] \| null {\n if (key.startsWith('&')) {\n return [key.slice(1)];\n }\n\n if (key.startsWith('.')) {\n return [` ${key}`];\n }\n\n if (/^[A-Z]/.test(key)) {\n const affix = styles?.$;\n if (affix !== undefined) {\n const result = processAffix(String(affix), key);\n if (!result.valid) {\n emitWarning('INVALID_SELECTOR_AFFIX', result.reason);\n return null;\n }\n return result.selectors;\n }\n return [` [data-element=\"${key}\"]`];\n }\n\n return null;\n}\n\n/\n Process selector affix pattern and return selector(s)\n \n Supports:\n * - Direct child: '>'\n * - Chained elements: '>Body>Row>'\n * - HTML tags: 'a', '>ul>li', 'button:hover'\n * - Pseudo-elements on root: '::before'\n * - Pseudo on sub-element: '@::before', '>@:hover'\n * - Classes: '.active', '>@.active'\n * - Multiple selectors: '>, >Body>'\n * - Sibling combinators (after element): '>Item+', '>Item~'\n /\nfunction processAffix(affix: string, key: string): AffixResult {\n const trimmed = affix.trim();\n\n // Empty = default behavior (descendant selector with key)\n if (!trimmed) {\n return { valid: true, selectors: [` [data-element=\"${key}\"]`] };\n }\n\n // Split by comma for multiple selectors\n const patterns = trimmed.split(',').map((p) => p.trim());\n const selectors: string[] = [];\n\n for (const pattern of patterns) {\n const validation = validatePattern(pattern);\n if (!validation.valid) {\n return validation;\n }\n\n const selector = processSinglePattern(pattern, key);\n selectors.push(selector);\n }\n\n return { valid: true, selectors };\n}\n\n/\n Recognized token patterns for selector affix validation.\n \n These patterns are used to tokenize and validate `$` affix strings.\n * Order matters: more specific patterns must come first to avoid\n * partial matches (e.g., `::before` must match before `:` alone).\n \n Unrecognized tokens (like `#id`, ``, or numbers) will cause validation to fail.\n /\nconst VALID_TOKEN_PATTERNS = [\n /^[>+~]/, // Combinators: >, +, ~\n /^[A-Z][a-zA-Z0-9]/, // Uppercase element names → [data-element=\"...\"]\n /^@/, // @ placeholder for key injection position\n /^::?[a-z][a-z0-9-](?:\$[^)]\$)?/, // Pseudo-elements/classes (:hover, ::before, :not(.x))\n /^\\.[a-zA-Z_-][a-zA-Z0-9_-]/, // Class selectors (.active, .is-open)\n /^\\[[^\\]]+\\]/, // Attribute selectors ([type=\"text\"], [role])\n /^[a-z][a-z0-9-]/, // HTML tag names (a, div, button, my-component)\n /^\\s+/, // Whitespace (ignored during parsing)\n /^&/, // Root reference (stripped, kept for backward compat)\n];\n\n/\n Scan a pattern for unrecognized tokens.\n \n Iterates through the pattern, consuming recognized tokens until\n * either the pattern is fully consumed (valid) or an unrecognized\n * character sequence is found (invalid).\n \n @param pattern - The selector pattern to validate\n * @returns The first unrecognized token found, or null if all tokens are valid\n \n @example\n * findUnrecognizedTokens('>Body>Row>') // → null (valid)\n * findUnrecognizedTokens('123') // → '123' (invalid)\n * findUnrecognizedTokens('#myId') // → '#' (invalid)\n /\nfunction findUnrecognizedTokens(pattern: string): string \| null {\n let remaining = pattern;\n\n while (remaining.length > 0) {\n let matched = false;\n\n for (const regex of VALID_TOKEN_PATTERNS) {\n const match = remaining.match(regex);\n if (match) {\n remaining = remaining.slice(match[0].length);\n matched = true;\n break;\n }\n }\n\n if (!matched) {\n // Found unrecognized content - extract the problematic part\n const unrecognized = remaining.match(/^[^\\s>+~@.:[\\]A-Z]+/);\n return unrecognized ? unrecognized[0] : remaining[0];\n }\n }\n\n return null;\n}\n\n/\n Validate a selector pattern for structural correctness.\n \n Checks for:\n * 1. Out-of-scope selectors: Patterns starting with `+` or `~` target siblings\n * of the root element, which is outside the component's DOM scope.\n * 2. Consecutive combinators: Patterns like `>>` or `>+` are malformed CSS.\n * 3. Unrecognized tokens: Characters/sequences not matching valid CSS selectors.\n \n @param pattern - A single selector pattern (already split by comma)\n * @returns AffixResult indicating validity and error reason if invalid\n \n @example\n * validatePattern('>Body>Row>') // → { valid: true, selectors: [] }\n * validatePattern('+') // → { valid: false, reason: '...outside root scope...' }\n * validatePattern('>>') // → { valid: false, reason: '...consecutive combinators...' }\n /\nfunction validatePattern(pattern: string): AffixResult {\n const trimmed = pattern.trim();\n\n // Patterns starting with + or ~ target siblings of the root element,\n // which is outside the component's scope. Valid sibling patterns must\n // be preceded by an element: \">Item+\", \">Item~\"\n if (/^[+~]/.test(trimmed)) {\n return {\n valid: false,\n reason:\n `Selector affix \"${pattern}\" targets elements outside the root scope. ` +\n `Sibling selectors (+, ~) must be preceded by an element inside the root. ` +\n `Use \">Element+\" or \">Element~\" instead.`,\n };\n }\n\n // Check for consecutive combinators\n if (/[>+~]{2,}/.test(trimmed.replace(/\\s+/g, ''))) {\n return {\n valid: false,\n reason: `Selector affix \"${pattern}\" contains consecutive combinators.`,\n };\n }\n\n // Check for unrecognized tokens (e.g., lowercase text like \"foo\")\n const unrecognized = findUnrecognizedTokens(trimmed);\n if (unrecognized) {\n return {\n valid: false,\n reason:\n `Selector affix \"${pattern}\" contains unrecognized token \"${unrecognized}\". ` +\n `Valid tokens: combinators (>, +, ~), element names (Uppercase), ` +\n `@ placeholder, pseudo (:hover, ::before), class (.name), attribute ([attr]).`,\n };\n }\n\n return { valid: true, selectors: [] };\n}\n\n/\n Process a single selector pattern into a CSS selector suffix.\n \n This is the main transformation function that converts a `$` affix pattern\n * into a valid CSS selector suffix. It handles:\n \n 1. `@` placeholder replacement with `[data-element=\"key\"]`\n * 2. Key injection based on pattern ending (see `shouldInjectKey`)\n * 3. Proper spacing for descendant vs direct child selectors\n \n @param pattern - A single validated selector pattern\n * @param key - The sub-element key to inject (e.g., 'Label', 'Cell')\n * @returns CSS selector suffix ready to append to the root selector\n \n @example\n * processSinglePattern('>', 'Row')\n * // → '> [data-element=\"Row\"]'\n \n processSinglePattern('>Body>Row>', 'Cell')\n * // → '> [data-element=\"Body\"] > [data-element=\"Row\"] > [data-element=\"Cell\"]'\n \n processSinglePattern('::before', 'Before')\n * // → '::before' (no key injection for pseudo on root)\n \n processSinglePattern('>@:hover', 'Item')\n * // → '> [data-element=\"Item\"]:hover'\n /\nfunction processSinglePattern(pattern: string, key: string): string {\n // Strip leading & if present (implicit root reference, kept for compat)\n const normalized = pattern.replace(/^&/, '').trim();\n\n if (!normalized) {\n return ` [data-element=\"${key}\"]`;\n }\n\n // Pseudo-elements/classes at start apply directly to root (no space prefix)\n const startsWithPseudo = /^::?[a-z]/.test(normalized);\n\n // Transform the pattern: convert element names and normalize spacing\n let result = transformPattern(normalized);\n\n // Handle @ placeholder: explicit key injection position\n if (result.includes('@')) {\n // Remove space between @ and following class/pseudo for proper attachment\n // e.g., \"@ .active\" → \"[el].active\", but \"@ > span\" → \"[el] > span\"\n result = result.replace(/@ (?=[.:])/g, '@');\n result = result.replace(/@/g, `[data-element=\"${key}\"]`);\n\n if (!startsWithPseudo && !result.startsWith(' ')) {\n result = ' ' + result;\n }\n return result;\n }\n\n // Auto-inject key based on pattern ending (see shouldInjectKey for rules)\n if (shouldInjectKey(normalized)) {\n result = result + ' ' + `[data-element=\"${key}\"]`;\n }\n\n // Add space prefix for selectors targeting inside root (not pseudo on root)\n if (!startsWithPseudo && !result.startsWith(' ')) {\n result = ' ' + result;\n }\n\n return result;\n}\n\n/\n Transform a selector pattern by converting element names and normalizing spacing.\n \n This is a character-by-character tokenizer that:\n * - Converts uppercase names to `[data-element=\"Name\"]` selectors\n * - Adds proper spacing around combinators (>, +, ~)\n * - Preserves lowercase tags, classes, pseudos, and attributes as-is\n * - Keeps @ placeholder for later replacement\n \n The tokenizer handles these token types in order:\n * 1. Whitespace (skipped)\n * 2. Combinators: >, +, ~ (add surrounding spaces)\n * 3. Uppercase names: Body, Row (convert to [data-element=\"...\"])\n * 4. @ placeholder (keep for later replacement)\n * 5. Pseudo: :hover, ::before (attach to previous token)\n * 6. Tags: a, div, button (keep as-is with spacing)\n * 7. Classes: .active (attach to previous element/tag/placeholder)\n * 8. Attributes: [type=\"text\"] (keep as-is)\n \n @param pattern - The raw selector pattern to transform\n * @returns Transformed pattern with proper CSS selector syntax\n \n @example\n * transformPattern('>Body>Row>')\n * // → '> [data-element=\"Body\"] > [data-element=\"Row\"] >'\n \n transformPattern('button.primary:hover')\n * // → 'button.primary:hover'\n /\nfunction transformPattern(pattern: string): string {\n let result = '';\n let lastCh = '';\n let i = 0;\n\n while (i < pattern.length) {\n const char = pattern[i];\n\n if (/\\s/.test(char)) {\n i++;\n continue;\n }\n\n if (/[>+~]/.test(char)) {\n if (result && lastCh !== ' ') {\n result += ' ';\n }\n result += char;\n lastCh = char;\n i++;\n continue;\n }\n\n if (/[A-Z]/.test(char)) {\n const nameStart = i;\n while (i < pattern.length && /[a-zA-Z0-9]/.test(pattern[i])) {\n i++;\n }\n if (result && lastCh !== ' ') {\n result += ' ';\n }\n const segment = `[data-element=\"${pattern.slice(nameStart, i)}\"]`;\n result += segment;\n lastCh = ']';\n continue;\n }\n\n if (char === '@') {\n if (result && lastCh !== ' ') {\n result += ' ';\n }\n result += '@';\n lastCh = '@';\n i++;\n continue;\n }\n\n if (char === ':') {\n const pseudoStart = i;\n while (\n i < pattern.length &&\n !/[\\s>+~,@]/.test(pattern[i]) &&\n !/[A-Z]/.test(pattern[i])\n ) {\n i++;\n }\n const segment = pattern.slice(pseudoStart, i);\n result += segment;\n lastCh = segment[segment.length - 1] \|\| lastCh;\n continue;\n }\n\n if (/[a-z]/.test(char)) {\n const tagStart = i;\n while (i < pattern.length && /[a-z0-9-]/.test(pattern[i])) {\n i++;\n }\n if (result && lastCh !== ' ') {\n result += ' ';\n }\n const segment = pattern.slice(tagStart, i);\n result += segment;\n lastCh = segment[segment.length - 1] \|\| lastCh;\n continue;\n }\n\n if (char === '.') {\n const attachToLast =\n lastCh === ']' \|\| lastCh === '@' \|\| /[a-zA-Z0-9-]/.test(lastCh);\n if (result && !attachToLast && lastCh !== ' ') {\n result += ' ';\n }\n const clsStart = i;\n i++;\n while (i < pattern.length && /[a-zA-Z0-9_-]/.test(pattern[i])) {\n i++;\n }\n const segment = pattern.slice(clsStart, i);\n result += segment;\n lastCh = segment[segment.length - 1] \|\| lastCh;\n continue;\n }\n\n if (char === '[') {\n const attachToLast =\n lastCh === ']' \|\| lastCh === '@' \|\| /[a-zA-Z0-9-]/.test(lastCh);\n if (result && !attachToLast && lastCh !== ' ') {\n result += ' ';\n }\n const attrStart = i;\n let depth = 0;\n while (i < pattern.length) {\n if (pattern[i] === '[') depth++;\n if (pattern[i] === ']') depth--;\n i++;\n if (depth === 0) break;\n }\n result += pattern.slice(attrStart, i);\n lastCh = ']';\n continue;\n }\n\n result += char;\n lastCh = char;\n i++;\n }\n\n return result;\n}\n\n/\n Determine if the sub-element key should be auto-injected based on pattern ending.\n \n Key injection rules (when no @ placeholder is present):\n \n \| Pattern Ending \| Inject Key? \| Example \| Result \|\n * \|----------------\|-------------\|---------\|--------\|\n * \| Combinator (>, +, ~) \| Yes \| `'>Body>'` \| `> [data-element=\"Body\"] > [el]` \|\n * \| Uppercase element \| Yes \| `'>Body>Row'` \| `> [el1] > [el2] [key]` \|\n * \| Lowercase tag \| Yes \| `'>ul>li'` \| `> ul > li [key]` \|\n * \| Pseudo (:hover, ::before) \| No \| `'::before'` \| `::before` \|\n * \| Class (.active) \| No \| `'.active'` \| `.active` \|\n * \| Attribute ([type]) \| No \| `'[type=\"text\"]'` \| `[type=\"text\"]` \|\n \n @param pattern - The normalized pattern (after stripping &)\n * @returns true if key should be injected, false otherwise\n \n @example\n * shouldInjectKey('>') // → true (trailing combinator)\n * shouldInjectKey('>Body>Row') // → true (ends with element)\n * shouldInjectKey('>ul>li') // → true (ends with tag)\n * shouldInjectKey('::before') // → false (ends with pseudo)\n * shouldInjectKey('.active') // → false (ends with class)\n * shouldInjectKey('a:hover') // → false (ends with pseudo)\n * shouldInjectKey('button.primary') // → false (ends with class)\n /\nfunction shouldInjectKey(pattern: string): boolean {\n const trimmed = pattern.trim();\n\n // Rule 1: Ends with combinator → inject key after it\n // e.g., '>' → '> [data-element=\"Key\"]'\n if (/[>+~]$/.test(trimmed)) {\n return true;\n }\n\n // Rule 2: Ends with uppercase element name → inject key as descendant\n // The lookbehind ensures we're matching a standalone element name, not\n // part of a class like .myClass (where C is preceded by lowercase)\n // e.g., '>Body' → '> [data-element=\"Body\"] [data-element=\"Key\"]'\n if (/(?:^\|[\\s>+~\\]:])[A-Z][a-zA-Z0-9]$/.test(trimmed)) {\n return true;\n }\n\n // Rule 3: Ends with lowercase tag name → inject key as descendant\n // The negative lookbehind (?<![:.]) ensures we don't match:\n // - ':hover' (pseudo ending)\n // - '.primary' (class ending)\n // e.g., '>ul>li' → '> ul > li [data-element=\"Key\"]'\n if (/(?<![:.])(?:^\|[\\s>+~])[a-z][a-z0-9-]$/.test(trimmed)) {\n return true;\n }\n\n // Rule 4: Otherwise (pseudo, class, attribute) → no injection\n // The pattern is complete as-is, applying to root or a specific selector\n return false;\n}\n\n/\n Normalize selector suffix from $ property\n /\nfunction normalizeSelectorSuffix(suffix: string): string {\n if (!suffix) return '';\n return suffix.startsWith('&') ? suffix.slice(1) : suffix;\n}\n\n/\n Build handler queue from style keys\n /\nfunction buildHandlerQueue(\n styleKeys: string[],\n styles: Styles,\n): { handler: StyleHandler; styleMap: StyleMap }[] {\n const queue: { handler: StyleHandler; styleMap: StyleMap }[] = [];\n const seenHandlers = new Set<StyleHandler>();\n\n for (const styleName of styleKeys) {\n let handlers: StyleHandler[] = STYLE_HANDLER_MAP[styleName];\n\n if (!handlers) {\n handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];\n }\n\n for (const handler of handlers) {\n if (seenHandlers.has(handler)) continue;\n seenHandlers.add(handler);\n\n const lookupStyles = handler.__lookupStyles;\n const styleMap: StyleMap = {};\n\n for (const name of lookupStyles) {\n const val = styles[name];\n if (val !== undefined) {\n styleMap[name] = val as StyleValue \| StyleValueStateMap;\n }\n }\n\n queue.push({ handler, styleMap });\n }\n }\n\n return queue;\n}\n\n/\n Compute all valid state combinations for a handler's lookup styles\n /\nfunction computeStateCombinations(\n exclusiveByStyle: Map<string, ExclusiveStyleEntry[]>,\n lookupStyles: string[],\n): { condition: ConditionNode; values: Record<string, StyleValue> }[] {\n // Get entries for each style\n const entriesPerStyle = lookupStyles.map(\n (style) => exclusiveByStyle.get(style) \|\| [],\n );\n\n // Cartesian product of all combinations\n const combinations = cartesianProduct(entriesPerStyle);\n\n // Build snapshots, simplifying and filtering impossible combinations\n const snapshots: {\n condition: ConditionNode;\n values: Record<string, StyleValue>;\n }[] = [];\n\n for (const combo of combinations) {\n // Combine all exclusive conditions with AND\n const conditions = combo.map((e) => e.exclusiveCondition);\n const combined = and(...conditions);\n const simplified = simplifyCondition(combined);\n\n // Skip impossible combinations\n if (simplified.kind === 'false') continue;\n\n // Build values map\n const values: Record<string, StyleValue> = {};\n for (const entry of combo) {\n values[entry.styleKey] = entry.value;\n }\n\n snapshots.push({\n condition: simplified,\n values,\n });\n }\n\n return snapshots;\n}\n\n/\n Cartesian product of arrays\n /\nfunction cartesianProduct<T>(arrays: T[][]): T[][] {\n if (arrays.length === 0) return [[]];\n\n const nonEmpty = arrays.filter((a) => a.length > 0);\n if (nonEmpty.length === 0) return [[]];\n\n let result: T[][] = [[]];\n for (const arr of nonEmpty) {\n const next: T[][] = [];\n for (const combo of result) {\n for (const item of arr) {\n const newCombo = new Array<T>(combo.length + 1);\n for (let i = 0; i < combo.length; i++) newCombo[i] = combo[i];\n newCombo[combo.length] = item;\n next.push(newCombo);\n }\n }\n result = next;\n }\n return result;\n}\n\nconst declStringCache = new WeakMap<Record<string, string>, string>();\n\nfunction stringifyDeclarations(decl: Record<string, string>): string {\n let cached = declStringCache.get(decl);\n if (cached === undefined) {\n cached = JSON.stringify(decl);\n declStringCache.set(decl, cached);\n }\n return cached;\n}\n\n/\n Merge rules with identical CSS output\n /\nfunction mergeByValue(rules: ComputedRule[]): ComputedRule[] {\n const groups = new Map<string, ComputedRule[]>();\n\n for (const rule of rules) {\n const key = `${rule.selectorSuffix}\|${stringifyDeclarations(rule.declarations)}`;\n if (!groups.has(key)) {\n groups.set(key, []);\n }\n groups.get(key)!.push(rule);\n }\n\n // Merge conditions with OR for each group\n const merged: ComputedRule[] = [];\n\n for (const [, groupRules] of groups) {\n if (groupRules.length === 1) {\n merged.push(groupRules[0]);\n } else {\n // Merge conditions with OR\n const mergedCondition = simplifyCondition(\n or(...groupRules.map((r) => r.condition)),\n );\n merged.push({\n condition: mergedCondition,\n declarations: groupRules[0].declarations,\n selectorSuffix: groupRules[0].selectorSuffix,\n });\n }\n }\n\n return merged;\n}\n\n/\n Build selector fragment from a variant (without className prefix)\n /\nfunction buildSelectorFromVariant(\n variant: SelectorVariant,\n selectorSuffix: string,\n): string {\n let selector = '';\n\n // Add flat modifier + pseudo selectors (sorted for canonical output)\n selector += branchToCSS([\n ...variant.modifierConditions,\n ...variant.pseudoConditions,\n ]);\n\n // Add selector groups (:is()/:not() on element)\n for (const group of variant.selectorGroups) {\n selector += selectorGroupToCSS(group);\n }\n\n // Add parent selectors (before sub-element suffix)\n if (variant.parentGroups.length > 0) {\n selector += parentGroupsToCSS(variant.parentGroups);\n }\n\n selector += selectorSuffix;\n\n // Add own groups (:is()/:not() on sub-element)\n const ownOptimized = optimizeGroups(variant.ownGroups);\n for (const group of ownOptimized) {\n selector += selectorGroupToCSS(group);\n }\n\n return selector;\n}\n\n/\n Materialize a computed rule to final CSS format\n \n Returns an array because OR conditions may generate multiple CSS rules\n * (when different branches have different at-rules)\n /\nfunction materializeComputedRule(rule: ComputedRule): CSSRule[] {\n const components = conditionToCSS(rule.condition);\n\n if (components.isImpossible \|\| components.variants.length === 0) {\n return [];\n }\n\n const declarations = Object.entries(rule.declarations)\n .map(([prop, value]) => `${prop}: ${value};`)\n .join(' ');\n\n // Helper to get root prefix key for grouping\n const getRootPrefixKey = (variant: SelectorVariant): string => {\n return rootGroupsToCSS(variant.rootGroups) \|\| '';\n };\n\n // Group variants by their at-rules (variants with same at-rules can be combined with commas)\n const byAtRules = new Map<\n string,\n { variants: SelectorVariant[]; atRules: string[]; rootPrefix?: string }\n >();\n\n for (const variant of components.variants) {\n const atRules = buildAtRulesFromVariant(variant);\n const key = atRules.sort().join('\|\|\|') + '###' + getRootPrefixKey(variant);\n\n const group = byAtRules.get(key);\n if (group) {\n group.variants.push(variant);\n } else {\n byAtRules.set(key, {\n variants: [variant],\n atRules,\n rootPrefix: rootGroupsToCSS(variant.rootGroups),\n });\n }\n }\n\n // Generate one CSSRule per at-rules group\n const rules: CSSRule[] = [];\n for (const [, group] of byAtRules) {\n // Merge variants that differ only in flat modifier/pseudo conditions\n // into :is() groups before building selector strings\n const mergedVariants = mergeVariantsIntoSelectorGroups(group.variants);\n\n // Build selector fragments for each variant (will be joined with className later)\n const selectorFragments = mergedVariants.map((v) =>\n buildSelectorFromVariant(v, rule.selectorSuffix),\n );\n\n // Store as array if multiple, string if single\n const selector =\n selectorFragments.length === 1 ? selectorFragments[0] : selectorFragments;\n\n const cssRule: CSSRule = {\n selector,\n declarations,\n };\n\n if (group.atRules.length > 0) {\n cssRule.atRules = group.atRules;\n }\n\n if (group.rootPrefix) {\n cssRule.rootPrefix = group.rootPrefix;\n }\n\n rules.push(cssRule);\n }\n\n return rules;\n}\n\n// ============================================================================\n// Public API: renderStyles (compatible with old API)\n// ============================================================================\n\n/\n Options for renderStyles when using direct selector mode.\n /\nexport interface RenderStylesOptions {\n /\n Whether to double the class selector for increased specificity.\n * When true, `.myClass` becomes `.myClass.myClass` for higher specificity.\n \n @default false - User-provided selectors are not doubled.\n \n Note: This only applies when a classNameOrSelector is provided.\n * When renderStyles returns RenderResult with needsClassName=true,\n * the injector handles doubling automatically.\n /\n doubleSelector?: boolean;\n}\n\n/\n Render styles to CSS rules.\n \n When called without classNameOrSelector, returns RenderResult with needsClassName=true.\n * When called with a selector/className string, returns StyleResult[] for direct injection.\n /\nexport function renderStyles(\n styles?: Styles,\n classNameOrSelector?: undefined,\n options?: undefined,\n pipelineCacheKey?: string,\n): RenderResult;\nexport function renderStyles(\n styles: Styles \| undefined,\n classNameOrSelector: string,\n options?: RenderStylesOptions,\n): StyleResult[];\nexport function renderStyles(\n styles?: Styles,\n classNameOrSelector?: string,\n options?: RenderStylesOptions,\n pipelineCacheKey?: string,\n): RenderResult \| StyleResult[] {\n // Check if we have a direct selector/className\n const directSelector = !!classNameOrSelector;\n\n // Check cache first when a pre-computed key is available.\n // This allows callers to skip building the styles object on cache hit.\n let rules: CSSRule[] \| undefined;\n if (pipelineCacheKey) {\n rules = pipelineCache.get(pipelineCacheKey);\n }\n\n if (!rules && !styles) {\n return directSelector ? [] : { rules: [] };\n }\n\n // Use pre-computed cache key when available (from chunk path),\n // falling back to stringifyStyles for direct renderStyles() calls\n const cacheKey = pipelineCacheKey \|\| stringifyStyles(styles!);\n if (!rules) {\n rules = pipelineCache.get(cacheKey);\n }\n\n if (!rules) {\n // styles is guaranteed non-null here: early return above handles (!rules && !styles)\n const parserContext = createStateParserContext(styles!);\n rules = runPipeline(styles!, parserContext);\n pipelineCache.set(cacheKey, rules);\n }\n\n // Direct selector/className mode: return StyleResult[] directly\n if (directSelector) {\n const shouldDouble = options?.doubleSelector ?? false;\n\n return rules.map((rule): StyleResult => {\n // Handle selector as array (OR conditions) or string\n const selectorParts = Array.isArray(rule.selector)\n ? rule.selector\n : rule.selector\n ? [rule.selector]\n : [''];\n\n const finalSelector = selectorParts\n .map((part) => {\n let sel = part\n ? `${classNameOrSelector}${part}`\n : classNameOrSelector;\n\n // Double class selector for increased specificity if requested\n // This is used when the caller explicitly wants higher specificity\n if (shouldDouble && sel.startsWith('.')) {\n const classMatch = sel.match(/^\\.[a-zA-Z_-][a-zA-Z0-9_-]/);\n if (classMatch) {\n const baseClass = classMatch[0];\n sel = baseClass + sel;\n }\n }\n\n // Handle root prefix for this selector\n if (rule.rootPrefix) {\n sel = `${rule.rootPrefix} ${sel}`;\n }\n\n return sel;\n })\n .join(', ');\n\n const result: StyleResult = {\n selector: finalSelector,\n declarations: rule.declarations,\n };\n\n if (rule.atRules && rule.atRules.length > 0) {\n result.atRules = rule.atRules;\n }\n\n return result;\n });\n }\n\n // No className mode: return RenderResult with needsClassName flag\n // Normalize selector to string (join array with placeholder that injector will handle)\n return {\n rules: rules.map(\n (r): StyleResult => ({\n selector: Array.isArray(r.selector)\n ? r.selector.join('\|\|\|')\n : r.selector,\n declarations: r.declarations,\n atRules: r.atRules,\n needsClassName: true,\n rootPrefix: r.rootPrefix,\n }),\n ),\n };\n}\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport type { ConditionNode } from './conditions';\nexport { and, or, not, trueCondition, falseCondition } from './conditions';\nexport { parseStateKey } from './parseStateKey';\nexport { simplifyCondition } from './simplify';\nexport { buildExclusiveConditions } from './exclusive';\nexport { conditionToCSS } from './materialize';\nexport type { CSSRule } from './materialize';\nexport { setWarningHandler, emitWarning } from './warnings';\nexport type {\n TastyWarning,\n TastyWarningCode,\n TastyWarningHandler,\n} from './warnings';\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../src/pipeline/index.ts"],"sourcesContent":["/*\n Tasty Style Rendering Pipeline\n \n This is the main entrypoint for the new pipeline implementation.\n * It implements the complete flow from style objects to CSS rules.\n \n Pipeline stages:\n * 1. PARSE CONDITIONS - Parse state keys into ConditionNode trees\n * 2. BUILD EXCLUSIVE CONDITIONS - AND with negation of higher-priority conditions\n * 3. SIMPLIFY CONDITIONS - Apply boolean algebra, detect contradictions\n * 4. GROUP BY HANDLER - Collect styles per handler, compute combinations\n * 5. COMPUTE CSS VALUES - Call handlers to get CSS declarations\n * 6. MERGE BY VALUE - Merge rules with identical CSS output\n * 7. MATERIALIZE CSS - Convert conditions to CSS selectors + at-rules\n /\n\nimport { Lru } from '../parser/lru';\nimport type { StateParserContext } from '../states';\nimport {\n createStateParserContext,\n extractLocalPredefinedStates,\n} from '../states';\nimport { createStyle, STYLE_HANDLER_MAP } from '../styles';\nimport type { Styles } from '../styles/types';\nimport type {\n StyleHandler,\n StyleMap,\n StyleValue,\n StyleValueStateMap,\n} from '../utils/styles';\nimport { stringifyStyles } from '../utils/styles';\n\nimport type { ConditionNode } from './conditions';\nimport { and, or, trueCondition } from './conditions';\nimport type { ExclusiveStyleEntry } from './exclusive';\nimport {\n buildExclusiveConditions,\n expandExclusiveOrs,\n expandOrConditions,\n isValueMapping,\n parseStyleEntries,\n} from './exclusive';\nimport type { CSSRule, SelectorVariant } from './materialize';\nimport {\n branchToCSS,\n buildAtRulesFromVariant,\n conditionToCSS,\n mergeVariantsIntoSelectorGroups,\n optimizeGroups,\n parentGroupsToCSS,\n rootGroupsToCSS,\n selectorGroupToCSS,\n} from './materialize';\nimport { parseStateKey } from './parseStateKey';\nimport { simplifyCondition } from './simplify';\nimport { emitWarning } from './warnings';\n\n// ============================================================================\n// Types (compatible with old renderStyles API)\n// ============================================================================\n\n/\n Matches the old StyleResult interface for backward compatibility\n /\nexport interface StyleResult {\n selector: string;\n declarations: string;\n atRules?: string[];\n needsClassName?: boolean;\n rootPrefix?: string;\n}\n\n/\n Matches the old RenderResult interface for backward compatibility\n /\nexport interface RenderResult {\n rules: StyleResult[];\n className?: string;\n}\n\nexport interface PipelineResult {\n rules: CSSRule[];\n className?: string;\n}\n\ninterface ComputedRule {\n condition: ConditionNode;\n declarations: Record<string, string>;\n selectorSuffix: string;\n}\n\n// ============================================================================\n// Caching\n// ============================================================================\n\nconst pipelineCache = new Lru<string, CSSRule[]>(5000);\n\n// ============================================================================\n// Main Pipeline Function\n// ============================================================================\n\n/\n Render styles using the new pipeline.\n \n This is the main entrypoint that implements the complete flow.\n /\nexport function renderStylesPipeline(\n styles?: Styles,\n className?: string,\n pipelineCacheKey?: string,\n): PipelineResult {\n if (!styles) {\n return { rules: [], className };\n }\n\n // Use pre-computed cache key when available, falling back to stringifyStyles\n const cacheKey = pipelineCacheKey \|\| stringifyStyles(styles);\n let rules = pipelineCache.get(cacheKey);\n\n if (!rules) {\n // Create parser context\n const parserContext = createStateParserContext(styles);\n\n // Run pipeline\n rules = runPipeline(styles, parserContext);\n\n // Cache result\n pipelineCache.set(cacheKey, rules);\n }\n\n // If no className, rules need it to be prepended later\n if (!className) {\n return {\n rules: rules.map((r) => ({\n ...r,\n needsClassName: true,\n })),\n };\n }\n\n // Prepend className to selectors\n const finalRules = rules.map((rule) => {\n // Parse the selector to find where to insert className\n let selector = rule.selector;\n\n // If selector starts with :root, insert className after the :root part\n if (rule.rootPrefix) {\n selector = `${rule.rootPrefix} .${className}.${className}${selector}`;\n } else {\n selector = `.${className}.${className}${selector}`;\n }\n\n return {\n ...rule,\n selector,\n };\n });\n\n return {\n rules: finalRules,\n className,\n };\n}\n\n/\n Check if a cache key exists in the pipeline cache.\n * Used by renderStylesForChunk to avoid building filtered styles on cache hit.\n /\nexport function hasPipelineCacheEntry(cacheKey: string): boolean {\n return pipelineCache.get(cacheKey) !== undefined;\n}\n\n/\n Clear the pipeline cache (for testing)\n /\nexport function clearPipelineCache(): void {\n pipelineCache.clear();\n}\n\n// ============================================================================\n// Pipeline Implementation\n// ============================================================================\n\nfunction runPipeline(\n styles: Styles,\n parserContext: StateParserContext,\n): CSSRule[] {\n const allRules: CSSRule[] = [];\n\n // Process styles recursively (including nested selectors)\n processStyles(styles, '', parserContext, allRules);\n\n // Deduplicate rules\n const seen = new Set<string>();\n const dedupedRules = allRules.filter((rule) => {\n // Include rootPrefix in dedup key - rules with different root prefixes are distinct\n const key = `${rule.selector}\|${rule.declarations}\|${rule.atRules?.join('\|') ?? ''}\|${rule.rootPrefix \|\| ''}`;\n if (seen.has(key)) return false;\n seen.add(key);\n return true;\n });\n\n return dedupedRules;\n}\n\n/\n Process styles at a given nesting level\n /\nfunction processStyles(\n styles: Styles,\n selectorSuffix: string,\n parserContext: StateParserContext,\n allRules: CSSRule[],\n): void {\n const keys = Object.keys(styles);\n\n // Separate selector keys from style keys\n // Skip @keyframes (processed separately) and other @ prefixed keys (predefined states)\n const selectorKeys = keys.filter((key) => isSelector(key));\n const styleKeys = keys.filter(\n (key) => !isSelector(key) && !key.startsWith('@'),\n );\n\n // Process nested selectors first\n for (const key of selectorKeys) {\n const nestedStyles = styles[key] as Styles;\n if (!nestedStyles \|\| typeof nestedStyles !== 'object') continue;\n\n // Get all selectors (handles comma-separated patterns)\n const suffixes = getAllSelectors(key, nestedStyles);\n if (!suffixes) continue; // Invalid selector, skip\n\n // Remove $ from nested styles\n const { $: _$, ...cleanedStyles } = nestedStyles;\n\n // Extract local predefined states scoped to this sub-element\n const subLocalStates = extractLocalPredefinedStates(cleanedStyles);\n const hasSubStates = Object.keys(subLocalStates).length > 0;\n const subContext: StateParserContext = {\n ...parserContext,\n isSubElement: true,\n localPredefinedStates: hasSubStates\n ? { ...parserContext.localPredefinedStates, ...subLocalStates }\n : parserContext.localPredefinedStates,\n };\n\n // Process for each selector (multiple selectors = same styles applied to each)\n for (const suffix of suffixes) {\n processStyles(\n cleanedStyles,\n selectorSuffix + suffix,\n subContext,\n allRules,\n );\n }\n }\n\n // Build handler queue\n const handlerQueue = buildHandlerQueue(styleKeys, styles);\n\n // Process each handler\n for (const { handler, styleMap } of handlerQueue) {\n const lookupStyles = handler.__lookupStyles;\n\n // Stage 1 & 2: Parse and build exclusive conditions for each style\n // Exclusive conditions ensure each CSS rule applies to exactly one state.\n // OR conditions in exclusives are properly expanded to DNF (multiple CSS selectors).\n const exclusiveByStyle = new Map<string, ExclusiveStyleEntry[]>();\n\n for (const styleName of lookupStyles) {\n const value = styleMap[styleName];\n if (value === undefined) continue;\n\n if (isValueMapping(value)) {\n // Parse entries from value mapping\n const parsed = parseStyleEntries(styleName, value, (stateKey) =>\n parseStateKey(stateKey, { context: parserContext }),\n );\n\n // Expand OR conditions into exclusive branches\n // This ensures OR branches like `A \| B \| C` become:\n // A, B & !A, C & !A & !B\n const expanded = expandOrConditions(parsed);\n\n // Build exclusive conditions across all entries\n const exclusive = buildExclusiveConditions(expanded);\n\n // Expand ORs from De Morgan negation into exclusive branches\n // This transforms: !A \| !B → !A, (A & !B)\n // Ensures each CSS rule has proper at-rule context\n const fullyExpanded = expandExclusiveOrs(exclusive);\n exclusiveByStyle.set(styleName, fullyExpanded);\n } else {\n // Simple value - single entry with TRUE condition\n exclusiveByStyle.set(styleName, [\n {\n styleKey: styleName,\n stateKey: '',\n value,\n condition: trueCondition(),\n priority: 0,\n exclusiveCondition: trueCondition(),\n },\n ]);\n }\n }\n\n // Stage 4: Compute all valid state combinations\n const stateSnapshots = computeStateCombinations(\n exclusiveByStyle,\n lookupStyles,\n );\n\n // Stage 5: Call handler for each snapshot\n const computedRules: ComputedRule[] = [];\n\n for (const snapshot of stateSnapshots) {\n const result = handler(snapshot.values as StyleValueStateMap);\n if (!result) continue;\n\n // Handler may return single or array\n const results = Array.isArray(result) ? result : [result];\n\n for (const r of results) {\n if (!r \|\| typeof r !== 'object') continue;\n\n const { $, ...styleProps } = r;\n const declarations: Record<string, string> = {};\n\n for (const [prop, val] of Object.entries(styleProps)) {\n if (val != null && val !== '') {\n declarations[prop] = String(val);\n }\n }\n\n if (Object.keys(declarations).length === 0) continue;\n\n // Handle $ suffixes\n const suffixes = $\n ? (Array.isArray($) ? $ : [$]).map(\n (s) => selectorSuffix + normalizeSelectorSuffix(String(s)),\n )\n : [selectorSuffix];\n\n for (const suffix of suffixes) {\n computedRules.push({\n condition: snapshot.condition,\n declarations,\n selectorSuffix: suffix,\n });\n }\n }\n }\n\n // Stage 6: Merge rules with identical CSS output\n const mergedRules = mergeByValue(computedRules);\n\n // Stage 7: Materialize to CSS\n for (const rule of mergedRules) {\n const cssRules = materializeComputedRule(rule);\n allRules.push(...cssRules);\n }\n }\n}\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\n/\n Check if a key is a CSS selector\n /\nexport function isSelector(key: string): boolean {\n return key.startsWith('&') \|\| key.startsWith('.') \|\| /^[A-Z]/.test(key);\n}\n\n/\n Result of processing a selector affix ($) pattern.\n \n @example\n * // Valid result with multiple selectors\n * { valid: true, selectors: ['> [data-element=\"Cell\"]', ' [data-element=\"Body\"] > [data-element=\"Cell\"]'] }\n \n // Invalid result with error message\n * { valid: false, reason: 'Selector affix \"+\" targets elements outside the root scope.' }\n /\ntype AffixResult =\n \| { valid: true; selectors: string[] }\n \| { valid: false; reason: string };\n\n/\n Get all selector suffixes for a sub-element key.\n \n Handles three types of selector keys:\n * - `&` prefix: Raw selector suffix (e.g., `&:hover` → `:hover`)\n * - `.` prefix: Class selector (e.g., `.active` → ` .active`)\n * - Uppercase: Sub-element with optional `$` affix pattern\n \n @param key - The sub-element key (e.g., 'Label', '&:hover', '.active')\n * @param styles - The styles object, may contain `$` property for selector affix\n * @returns Array of selector suffixes, or null if invalid (with console warning)\n \n @example\n * getAllSelectors('Label', {})\n * // → [' [data-element=\"Label\"]']\n \n getAllSelectors('Cell', { $: '>, >Body>' })\n * // → ['> [data-element=\"Cell\"]', ' [data-element=\"Body\"] > [data-element=\"Cell\"]']\n /\nfunction getAllSelectors(key: string, styles?: Styles): string[] \| null {\n if (key.startsWith('&')) {\n return [key.slice(1)];\n }\n\n if (key.startsWith('.')) {\n return [` ${key}`];\n }\n\n if (/^[A-Z]/.test(key)) {\n const affix = styles?.$;\n if (affix !== undefined) {\n const result = processAffix(String(affix), key);\n if (!result.valid) {\n emitWarning('INVALID_SELECTOR_AFFIX', result.reason);\n return null;\n }\n return result.selectors;\n }\n return [` [data-element=\"${key}\"]`];\n }\n\n return null;\n}\n\n/\n Process selector affix pattern and return selector(s)\n \n Supports:\n * - Direct child: '>'\n * - Chained elements: '>Body>Row>'\n * - HTML tags (no key injection): 'h1', '>ul>li', 'button:hover'\n * - Universal selector: '', 'h1 '\n * - Pseudo-elements on root: '::before'\n * - Pseudo on sub-element: '@::before', '>@:hover'\n * - Classes: '.active', '>@.active'\n * - Multiple selectors: '>, >Body>'\n * - Sibling combinators (after element): '>Item+', '>Item~'\n /\nfunction processAffix(affix: string, key: string): AffixResult {\n const trimmed = affix.trim();\n\n // Empty = default behavior (descendant selector with key)\n if (!trimmed) {\n return { valid: true, selectors: [` [data-element=\"${key}\"]`] };\n }\n\n // Split by comma for multiple selectors\n const patterns = trimmed.split(',').map((p) => p.trim());\n const selectors: string[] = [];\n\n for (const pattern of patterns) {\n const validation = validatePattern(pattern);\n if (!validation.valid) {\n return validation;\n }\n\n const selector = processSinglePattern(pattern, key);\n selectors.push(selector);\n }\n\n return { valid: true, selectors };\n}\n\n/\n Recognized token patterns for selector affix validation.\n \n These patterns are used to tokenize and validate `$` affix strings.\n * Order matters: more specific patterns must come first to avoid\n * partial matches (e.g., `::before` must match before `:` alone).\n \n Unrecognized tokens (like `#id`, ``, or numbers) will cause validation to fail.\n /\nconst VALID_TOKEN_PATTERNS = [\n /^[>+~]/, // Combinators: >, +, ~\n /^\\/, // Universal selector ()\n /^[A-Z][a-zA-Z0-9]/, // Uppercase element names → [data-element=\"...\"]\n /^@/, // @ placeholder for key injection position\n /^::?[a-z][a-z0-9-](?:\$[^)]\$)?/, // Pseudo-elements/classes (:hover, ::before, :not(.x))\n /^\\.[a-zA-Z_-][a-zA-Z0-9_-]/, // Class selectors (.active, .is-open)\n /^\\[[^\\]]+\\]/, // Attribute selectors ([type=\"text\"], [role])\n /^[a-z][a-z0-9-]/, // HTML tag names (a, div, button, my-component)\n /^\\s+/, // Whitespace (ignored during parsing)\n /^&/, // Root reference (stripped, kept for backward compat)\n];\n\n/\n Scan a pattern for unrecognized tokens.\n \n Iterates through the pattern, consuming recognized tokens until\n * either the pattern is fully consumed (valid) or an unrecognized\n * character sequence is found (invalid).\n \n @param pattern - The selector pattern to validate\n * @returns The first unrecognized token found, or null if all tokens are valid\n \n @example\n * findUnrecognizedTokens('>Body>Row>') // → null (valid)\n * findUnrecognizedTokens('123') // → '123' (invalid)\n * findUnrecognizedTokens('#myId') // → '#' (invalid)\n /\nfunction findUnrecognizedTokens(pattern: string): string \| null {\n let remaining = pattern;\n\n while (remaining.length > 0) {\n let matched = false;\n\n for (const regex of VALID_TOKEN_PATTERNS) {\n const match = remaining.match(regex);\n if (match) {\n remaining = remaining.slice(match[0].length);\n matched = true;\n break;\n }\n }\n\n if (!matched) {\n // Found unrecognized content - extract the problematic part\n const unrecognized = remaining.match(/^[^\\s>+~@.:[\\]A-Z]+/);\n return unrecognized ? unrecognized[0] : remaining[0];\n }\n }\n\n return null;\n}\n\n/\n Validate a selector pattern for structural correctness.\n \n Checks for:\n * 1. Out-of-scope selectors: Patterns starting with `+` or `~` target siblings\n * of the root element, which is outside the component's DOM scope.\n * 2. Consecutive combinators: Patterns like `>>` or `>+` are malformed CSS.\n * 3. Unrecognized tokens: Characters/sequences not matching valid CSS selectors.\n \n @param pattern - A single selector pattern (already split by comma)\n * @returns AffixResult indicating validity and error reason if invalid\n \n @example\n * validatePattern('>Body>Row>') // → { valid: true, selectors: [] }\n * validatePattern('+') // → { valid: false, reason: '...outside root scope...' }\n * validatePattern('>>') // → { valid: false, reason: '...consecutive combinators...' }\n /\nfunction validatePattern(pattern: string): AffixResult {\n const trimmed = pattern.trim();\n\n // Patterns starting with + or ~ target siblings of the root element,\n // which is outside the component's scope. Valid sibling patterns must\n // be preceded by an element: \">Item+\", \">Item~\"\n if (/^[+~]/.test(trimmed)) {\n return {\n valid: false,\n reason:\n `Selector affix \"${pattern}\" targets elements outside the root scope. ` +\n `Sibling selectors (+, ~) must be preceded by an element inside the root. ` +\n `Use \">Element+\" or \">Element~\" instead.`,\n };\n }\n\n // Check for consecutive combinators\n if (/[>+~]{2,}/.test(trimmed.replace(/\\s+/g, ''))) {\n return {\n valid: false,\n reason: `Selector affix \"${pattern}\" contains consecutive combinators.`,\n };\n }\n\n // Check for unrecognized tokens (e.g., lowercase text like \"foo\")\n const unrecognized = findUnrecognizedTokens(trimmed);\n if (unrecognized) {\n return {\n valid: false,\n reason:\n `Selector affix \"${pattern}\" contains unrecognized token \"${unrecognized}\". ` +\n `Valid tokens: combinators (>, +, ~), element names (Uppercase), ` +\n `@ placeholder, pseudo (:hover, ::before), class (.name), attribute ([attr]).`,\n };\n }\n\n return { valid: true, selectors: [] };\n}\n\n/\n Process a single selector pattern into a CSS selector suffix.\n \n This is the main transformation function that converts a `$` affix pattern\n * into a valid CSS selector suffix. It handles:\n \n 1. `@` placeholder replacement with `[data-element=\"key\"]`\n * 2. Key injection based on pattern ending (see `shouldInjectKey`)\n * 3. Proper spacing for descendant vs direct child selectors\n \n @param pattern - A single validated selector pattern\n * @param key - The sub-element key to inject (e.g., 'Label', 'Cell')\n * @returns CSS selector suffix ready to append to the root selector\n \n @example\n * processSinglePattern('>', 'Row')\n * // → '> [data-element=\"Row\"]'\n \n processSinglePattern('>Body>Row>', 'Cell')\n * // → '> [data-element=\"Body\"] > [data-element=\"Row\"] > [data-element=\"Cell\"]'\n \n processSinglePattern('::before', 'Before')\n * // → '::before' (no key injection for pseudo on root)\n \n processSinglePattern('>@:hover', 'Item')\n * // → '> [data-element=\"Item\"]:hover'\n /\nfunction processSinglePattern(pattern: string, key: string): string {\n // Strip leading & if present (implicit root reference, kept for compat)\n const normalized = pattern.replace(/^&/, '').trim();\n\n if (!normalized) {\n return ` [data-element=\"${key}\"]`;\n }\n\n // Pseudo-elements/classes at start apply directly to root (no space prefix)\n const startsWithPseudo = /^::?[a-z]/.test(normalized);\n\n // Transform the pattern: convert element names and normalize spacing\n let result = transformPattern(normalized);\n\n // Handle @ placeholder: explicit key injection position\n if (result.includes('@')) {\n // Remove space between @ and following class/pseudo for proper attachment\n // e.g., \"@ .active\" → \"[el].active\", but \"@ > span\" → \"[el] > span\"\n result = result.replace(/@ (?=[.:])/g, '@');\n result = result.replace(/@/g, `[data-element=\"${key}\"]`);\n\n if (!startsWithPseudo && !result.startsWith(' ')) {\n result = ' ' + result;\n }\n return result;\n }\n\n // Auto-inject key based on pattern ending (see shouldInjectKey for rules)\n if (shouldInjectKey(normalized)) {\n result = result + ' ' + `[data-element=\"${key}\"]`;\n }\n\n // Add space prefix for selectors targeting inside root (not pseudo on root)\n if (!startsWithPseudo && !result.startsWith(' ')) {\n result = ' ' + result;\n }\n\n return result;\n}\n\n/\n Transform a selector pattern by converting element names and normalizing spacing.\n \n This is a character-by-character tokenizer that:\n * - Converts uppercase names to `[data-element=\"Name\"]` selectors\n * - Adds proper spacing around combinators (>, +, ~)\n * - Preserves lowercase tags, classes, pseudos, and attributes as-is\n * - Keeps @ placeholder for later replacement\n \n The tokenizer handles these token types in order:\n * 1. Whitespace (skipped)\n * 2. Combinators: >, +, ~ (add surrounding spaces)\n * 3. Universal selector: * (keep as-is with spacing)\n * 4. Uppercase names: Body, Row (convert to [data-element=\"...\"])\n * 5. @ placeholder (keep for later replacement)\n * 6. Pseudo: :hover, ::before (attach to previous token)\n * 7. Tags: a, div, button (keep as-is with spacing)\n * 8. Classes: .active (attach to previous element/tag/placeholder)\n * 9. Attributes: [type=\"text\"] (keep as-is)\n \n @param pattern - The raw selector pattern to transform\n * @returns Transformed pattern with proper CSS selector syntax\n \n @example\n * transformPattern('>Body>Row>')\n * // → '> [data-element=\"Body\"] > [data-element=\"Row\"] >'\n \n transformPattern('button.primary:hover')\n * // → 'button.primary:hover'\n /\nfunction transformPattern(pattern: string): string {\n let result = '';\n let lastCh = '';\n let i = 0;\n\n while (i < pattern.length) {\n const char = pattern[i];\n\n if (/\\s/.test(char)) {\n i++;\n continue;\n }\n\n if (/[>+~]/.test(char)) {\n if (result && lastCh !== ' ') {\n result += ' ';\n }\n result += char;\n lastCh = char;\n i++;\n continue;\n }\n\n if (char === '') {\n if (result && lastCh !== ' ') {\n result += ' ';\n }\n result += '';\n lastCh = '';\n i++;\n continue;\n }\n\n if (/[A-Z]/.test(char)) {\n const nameStart = i;\n while (i < pattern.length && /[a-zA-Z0-9]/.test(pattern[i])) {\n i++;\n }\n if (result && lastCh !== ' ') {\n result += ' ';\n }\n const segment = `[data-element=\"${pattern.slice(nameStart, i)}\"]`;\n result += segment;\n lastCh = ']';\n continue;\n }\n\n if (char === '@') {\n if (result && lastCh !== ' ') {\n result += ' ';\n }\n result += '@';\n lastCh = '@';\n i++;\n continue;\n }\n\n if (char === ':') {\n const pseudoStart = i;\n while (\n i < pattern.length &&\n !/[\\s>+~,@]/.test(pattern[i]) &&\n !/[A-Z]/.test(pattern[i])\n ) {\n i++;\n }\n const segment = pattern.slice(pseudoStart, i);\n result += segment;\n lastCh = segment[segment.length - 1] \|\| lastCh;\n continue;\n }\n\n if (/[a-z]/.test(char)) {\n const tagStart = i;\n while (i < pattern.length && /[a-z0-9-]/.test(pattern[i])) {\n i++;\n }\n if (result && lastCh !== ' ') {\n result += ' ';\n }\n const segment = pattern.slice(tagStart, i);\n result += segment;\n lastCh = segment[segment.length - 1] \|\| lastCh;\n continue;\n }\n\n if (char === '.') {\n const attachToLast =\n lastCh === ']' \|\| lastCh === '@' \|\| /[a-zA-Z0-9-]/.test(lastCh);\n if (result && !attachToLast && lastCh !== ' ') {\n result += ' ';\n }\n const clsStart = i;\n i++;\n while (i < pattern.length && /[a-zA-Z0-9_-]/.test(pattern[i])) {\n i++;\n }\n const segment = pattern.slice(clsStart, i);\n result += segment;\n lastCh = segment[segment.length - 1] \|\| lastCh;\n continue;\n }\n\n if (char === '[') {\n const attachToLast =\n lastCh === ']' \|\| lastCh === '@' \|\| /[a-zA-Z0-9-]/.test(lastCh);\n if (result && !attachToLast && lastCh !== ' ') {\n result += ' ';\n }\n const attrStart = i;\n let depth = 0;\n while (i < pattern.length) {\n if (pattern[i] === '[') depth++;\n if (pattern[i] === ']') depth--;\n i++;\n if (depth === 0) break;\n }\n result += pattern.slice(attrStart, i);\n lastCh = ']';\n continue;\n }\n\n result += char;\n lastCh = char;\n i++;\n }\n\n return result;\n}\n\n/*\n Determine if the sub-element key should be auto-injected based on pattern ending.\n \n Key injection rules (when no @ placeholder is present):\n \n \| Pattern Ending \| Inject Key? \| Example \| Result \|\n * \|----------------\|-------------\|---------\|--------\|\n * \| Combinator (>, +, ~) \| Yes \| `'>Body>'` \| `> [data-element=\"Body\"] > [el]` \|\n * \| Uppercase element \| Yes \| `'>Body>Row'` \| `> [el1] > [el2] [key]` \|\n * \| Lowercase tag \| No \| `'h1'` \| ` h1` \|\n * \| Universal () \| No \| `'h1 '` \| ` h1 ` \|\n \| Pseudo (:hover, ::before) \| No \| `'::before'` \| `::before` \|\n * \| Class (.active) \| No \| `'.active'` \| `.active` \|\n * \| Attribute ([type]) \| No \| `'[type=\"text\"]'` \| `[type=\"text\"]` \|\n \n @param pattern - The normalized pattern (after stripping &)\n * @returns true if key should be injected, false otherwise\n \n @example\n * shouldInjectKey('>') // → true (trailing combinator)\n * shouldInjectKey('>Body>Row') // → true (ends with element)\n * shouldInjectKey('h1') // → false (ends with tag)\n * shouldInjectKey('') // → false (universal selector)\n shouldInjectKey('::before') // → false (ends with pseudo)\n * shouldInjectKey('.active') // → false (ends with class)\n * shouldInjectKey('a:hover') // → false (ends with pseudo)\n * shouldInjectKey('button.primary') // → false (ends with class)\n /\nfunction shouldInjectKey(pattern: string): boolean {\n const trimmed = pattern.trim();\n\n // Rule 1: Ends with combinator → inject key after it\n // e.g., '>' → '> [data-element=\"Key\"]'\n if (/[>+~]$/.test(trimmed)) {\n return true;\n }\n\n // Rule 2: Ends with uppercase element name → inject key as descendant\n // The lookbehind ensures we're matching a standalone element name, not\n // part of a class like .myClass (where C is preceded by lowercase)\n // e.g., '>Body' → '> [data-element=\"Body\"] [data-element=\"Key\"]'\n if (/(?:^\|[\\s>+~\\]:])[A-Z][a-zA-Z0-9]$/.test(trimmed)) {\n return true;\n }\n\n // Otherwise (tags, universal , pseudo, class, attribute) → no injection\n // The pattern is complete as-is, applying to root or a specific selector\n return false;\n}\n\n/\n Normalize selector suffix from $ property\n /\nfunction normalizeSelectorSuffix(suffix: string): string {\n if (!suffix) return '';\n return suffix.startsWith('&') ? suffix.slice(1) : suffix;\n}\n\n/\n Build handler queue from style keys\n /\nfunction buildHandlerQueue(\n styleKeys: string[],\n styles: Styles,\n): { handler: StyleHandler; styleMap: StyleMap }[] {\n const queue: { handler: StyleHandler; styleMap: StyleMap }[] = [];\n const seenHandlers = new Set<StyleHandler>();\n\n for (const styleName of styleKeys) {\n let handlers: StyleHandler[] = STYLE_HANDLER_MAP[styleName];\n\n if (!handlers) {\n handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];\n }\n\n for (const handler of handlers) {\n if (seenHandlers.has(handler)) continue;\n seenHandlers.add(handler);\n\n const lookupStyles = handler.__lookupStyles;\n const styleMap: StyleMap = {};\n\n for (const name of lookupStyles) {\n const val = styles[name];\n if (val !== undefined) {\n styleMap[name] = val as StyleValue \| StyleValueStateMap;\n }\n }\n\n queue.push({ handler, styleMap });\n }\n }\n\n return queue;\n}\n\n/\n Compute all valid state combinations for a handler's lookup styles\n /\nfunction computeStateCombinations(\n exclusiveByStyle: Map<string, ExclusiveStyleEntry[]>,\n lookupStyles: string[],\n): { condition: ConditionNode; values: Record<string, StyleValue> }[] {\n // Get entries for each style\n const entriesPerStyle = lookupStyles.map(\n (style) => exclusiveByStyle.get(style) \|\| [],\n );\n\n // Cartesian product of all combinations\n const combinations = cartesianProduct(entriesPerStyle);\n\n // Build snapshots, simplifying and filtering impossible combinations\n const snapshots: {\n condition: ConditionNode;\n values: Record<string, StyleValue>;\n }[] = [];\n\n for (const combo of combinations) {\n // Combine all exclusive conditions with AND\n const conditions = combo.map((e) => e.exclusiveCondition);\n const combined = and(...conditions);\n const simplified = simplifyCondition(combined);\n\n // Skip impossible combinations\n if (simplified.kind === 'false') continue;\n\n // Build values map\n const values: Record<string, StyleValue> = {};\n for (const entry of combo) {\n values[entry.styleKey] = entry.value;\n }\n\n snapshots.push({\n condition: simplified,\n values,\n });\n }\n\n return snapshots;\n}\n\n/\n Cartesian product of arrays\n /\nfunction cartesianProduct<T>(arrays: T[][]): T[][] {\n if (arrays.length === 0) return [[]];\n\n const nonEmpty = arrays.filter((a) => a.length > 0);\n if (nonEmpty.length === 0) return [[]];\n\n let result: T[][] = [[]];\n for (const arr of nonEmpty) {\n const next: T[][] = [];\n for (const combo of result) {\n for (const item of arr) {\n const newCombo = new Array<T>(combo.length + 1);\n for (let i = 0; i < combo.length; i++) newCombo[i] = combo[i];\n newCombo[combo.length] = item;\n next.push(newCombo);\n }\n }\n result = next;\n }\n return result;\n}\n\nconst declStringCache = new WeakMap<Record<string, string>, string>();\n\nfunction stringifyDeclarations(decl: Record<string, string>): string {\n let cached = declStringCache.get(decl);\n if (cached === undefined) {\n cached = JSON.stringify(decl);\n declStringCache.set(decl, cached);\n }\n return cached;\n}\n\n/\n Merge rules with identical CSS output\n /\nfunction mergeByValue(rules: ComputedRule[]): ComputedRule[] {\n const groups = new Map<string, ComputedRule[]>();\n\n for (const rule of rules) {\n const key = `${rule.selectorSuffix}\|${stringifyDeclarations(rule.declarations)}`;\n if (!groups.has(key)) {\n groups.set(key, []);\n }\n groups.get(key)!.push(rule);\n }\n\n // Merge conditions with OR for each group\n const merged: ComputedRule[] = [];\n\n for (const [, groupRules] of groups) {\n if (groupRules.length === 1) {\n merged.push(groupRules[0]);\n } else {\n // Merge conditions with OR\n const mergedCondition = simplifyCondition(\n or(...groupRules.map((r) => r.condition)),\n );\n merged.push({\n condition: mergedCondition,\n declarations: groupRules[0].declarations,\n selectorSuffix: groupRules[0].selectorSuffix,\n });\n }\n }\n\n return merged;\n}\n\n/\n Build selector fragment from a variant (without className prefix)\n /\nfunction buildSelectorFromVariant(\n variant: SelectorVariant,\n selectorSuffix: string,\n): string {\n let selector = '';\n\n // Add flat modifier + pseudo selectors (sorted for canonical output)\n selector += branchToCSS([\n ...variant.modifierConditions,\n ...variant.pseudoConditions,\n ]);\n\n // Add selector groups (:is()/:not() on element)\n for (const group of variant.selectorGroups) {\n selector += selectorGroupToCSS(group);\n }\n\n // Add parent selectors (before sub-element suffix)\n if (variant.parentGroups.length > 0) {\n selector += parentGroupsToCSS(variant.parentGroups);\n }\n\n selector += selectorSuffix;\n\n // Add own groups (:is()/:not() on sub-element)\n const ownOptimized = optimizeGroups(variant.ownGroups);\n for (const group of ownOptimized) {\n selector += selectorGroupToCSS(group);\n }\n\n return selector;\n}\n\n/\n Materialize a computed rule to final CSS format\n \n Returns an array because OR conditions may generate multiple CSS rules\n * (when different branches have different at-rules)\n /\nfunction materializeComputedRule(rule: ComputedRule): CSSRule[] {\n const components = conditionToCSS(rule.condition);\n\n if (components.isImpossible \|\| components.variants.length === 0) {\n return [];\n }\n\n const declarations = Object.entries(rule.declarations)\n .map(([prop, value]) => `${prop}: ${value};`)\n .join(' ');\n\n // Helper to get root prefix key for grouping\n const getRootPrefixKey = (variant: SelectorVariant): string => {\n return rootGroupsToCSS(variant.rootGroups) \|\| '';\n };\n\n // Group variants by their at-rules (variants with same at-rules can be combined with commas)\n const byAtRules = new Map<\n string,\n { variants: SelectorVariant[]; atRules: string[]; rootPrefix?: string }\n >();\n\n for (const variant of components.variants) {\n const atRules = buildAtRulesFromVariant(variant);\n const key = atRules.sort().join('\|\|\|') + '###' + getRootPrefixKey(variant);\n\n const group = byAtRules.get(key);\n if (group) {\n group.variants.push(variant);\n } else {\n byAtRules.set(key, {\n variants: [variant],\n atRules,\n rootPrefix: rootGroupsToCSS(variant.rootGroups),\n });\n }\n }\n\n // Generate one CSSRule per at-rules group\n const rules: CSSRule[] = [];\n for (const [, group] of byAtRules) {\n // Merge variants that differ only in flat modifier/pseudo conditions\n // into :is() groups before building selector strings\n const mergedVariants = mergeVariantsIntoSelectorGroups(group.variants);\n\n // Build selector fragments for each variant (will be joined with className later)\n const selectorFragments = mergedVariants.map((v) =>\n buildSelectorFromVariant(v, rule.selectorSuffix),\n );\n\n // Store as array if multiple, string if single\n const selector =\n selectorFragments.length === 1 ? selectorFragments[0] : selectorFragments;\n\n const cssRule: CSSRule = {\n selector,\n declarations,\n };\n\n if (group.atRules.length > 0) {\n cssRule.atRules = group.atRules;\n }\n\n if (group.rootPrefix) {\n cssRule.rootPrefix = group.rootPrefix;\n }\n\n rules.push(cssRule);\n }\n\n return rules;\n}\n\n// ============================================================================\n// Public API: renderStyles (compatible with old API)\n// ============================================================================\n\n/\n Options for renderStyles when using direct selector mode.\n /\nexport interface RenderStylesOptions {\n /\n Whether to double the class selector for increased specificity.\n * When true, `.myClass` becomes `.myClass.myClass` for higher specificity.\n \n @default false - User-provided selectors are not doubled.\n \n Note: This only applies when a classNameOrSelector is provided.\n * When renderStyles returns RenderResult with needsClassName=true,\n * the injector handles doubling automatically.\n /\n doubleSelector?: boolean;\n}\n\n/\n Render styles to CSS rules.\n \n When called without classNameOrSelector, returns RenderResult with needsClassName=true.\n * When called with a selector/className string, returns StyleResult[] for direct injection.\n /\nexport function renderStyles(\n styles?: Styles,\n classNameOrSelector?: undefined,\n options?: undefined,\n pipelineCacheKey?: string,\n): RenderResult;\nexport function renderStyles(\n styles: Styles \| undefined,\n classNameOrSelector: string,\n options?: RenderStylesOptions,\n): StyleResult[];\nexport function renderStyles(\n styles?: Styles,\n classNameOrSelector?: string,\n options?: RenderStylesOptions,\n pipelineCacheKey?: string,\n): RenderResult \| StyleResult[] {\n // Check if we have a direct selector/className\n const directSelector = !!classNameOrSelector;\n\n // Check cache first when a pre-computed key is available.\n // This allows callers to skip building the styles object on cache hit.\n let rules: CSSRule[] \| undefined;\n if (pipelineCacheKey) {\n rules = pipelineCache.get(pipelineCacheKey);\n }\n\n if (!rules && !styles) {\n return directSelector ? [] : { rules: [] };\n }\n\n // Use pre-computed cache key when available (from chunk path),\n // falling back to stringifyStyles for direct renderStyles() calls\n const cacheKey = pipelineCacheKey \|\| stringifyStyles(styles!);\n if (!rules) {\n rules = pipelineCache.get(cacheKey);\n }\n\n if (!rules) {\n // styles is guaranteed non-null here: early return above handles (!rules && !styles)\n const parserContext = createStateParserContext(styles!);\n rules = runPipeline(styles!, parserContext);\n pipelineCache.set(cacheKey, rules);\n }\n\n // Direct selector/className mode: return StyleResult[] directly\n if (directSelector) {\n const shouldDouble = options?.doubleSelector ?? false;\n\n return rules.map((rule): StyleResult => {\n // Handle selector as array (OR conditions) or string\n const selectorParts = Array.isArray(rule.selector)\n ? rule.selector\n : rule.selector\n ? [rule.selector]\n : [''];\n\n const finalSelector = selectorParts\n .map((part) => {\n let sel = part\n ? `${classNameOrSelector}${part}`\n : classNameOrSelector;\n\n // Double class selector for increased specificity if requested\n // This is used when the caller explicitly wants higher specificity\n if (shouldDouble && sel.startsWith('.')) {\n const classMatch = sel.match(/^\\.[a-zA-Z_-][a-zA-Z0-9_-]/);\n if (classMatch) {\n const baseClass = classMatch[0];\n sel = baseClass + sel;\n }\n }\n\n // Handle root prefix for this selector\n if (rule.rootPrefix) {\n sel = `${rule.rootPrefix} ${sel}`;\n }\n\n return sel;\n })\n .join(', ');\n\n const result: StyleResult = {\n selector: finalSelector,\n declarations: rule.declarations,\n };\n\n if (rule.atRules && rule.atRules.length > 0) {\n result.atRules = rule.atRules;\n }\n\n return result;\n });\n }\n\n // No className mode: return RenderResult with needsClassName flag\n // Normalize selector to string (join array with placeholder that injector will handle)\n return {\n rules: rules.map(\n (r): StyleResult => ({\n selector: Array.isArray(r.selector)\n ? r.selector.join('\|\|\|')\n : r.selector,\n declarations: r.declarations,\n atRules: r.atRules,\n needsClassName: true,\n rootPrefix: r.rootPrefix,\n }),\n ),\n };\n}\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport type { ConditionNode } from './conditions';\nexport { and, or, not, trueCondition, falseCondition } from './conditions';\nexport { parseStateKey } from './parseStateKey';\nexport { simplifyCondition } from './simplify';\nexport { buildExclusiveConditions } from './exclusive';\nexport { conditionToCSS } from './materialize';\nexport type { CSSRule } from './materialize';\nexport { setWarningHandler, emitWarning } from './warnings';\nexport type {\n TastyWarning,\n TastyWarningCode,\n TastyWarningHandler,\n} from './warnings';\n"],"mappings":"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"}

package/dist/styles/types.d.ts CHANGED Viewed

@@ -40,6 +40,7 @@ type PresetNameKey = Extract<keyof TastyPresetNames, string>;
 type PresetName = [PresetNameKey] extends [never] ? string : PresetNameKey;
 type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type OpaquePercentage = '' | `.${Digit}` | `.${Digit}${Digit}` | '.100';
+type ColorValue = `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})` | (string & {});
 type NoType = false | null | undefined;
 interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font' | 'outline' | 'type' | 'gap' | 'padding' | 'margin' | 'width' | 'height' | 'border' | 'transition' | 'placeContent' | 'placeItems'> {
   /**
@@ -57,13 +58,20 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
   /**
    * Set the background color of the element. Shortcut for `background-color` with enhanced support for Tasty color tokens and syntaxes.
    *
+   * Supports double-color syntax: the second color is applied as a foreground overlay via a CSS custom property.
+   *
    * Examples:
    * - `fill="#purple.10"` // purple background with 10% opacity
    * - `fill="#danger"` // danger theme color
    * - `fill="rgb(255 128 0)"` // custom RGB color
+   * - `fill="rgb(255 128 0 / 0.5)"` // RGB with opacity
+   * - `fill="hsl(200 100% 50%)"` // HSL color
+   * - `fill="okhsl(200 100% 50%)"` // perceptually uniform OKHSL color
+   * - `fill="oklch(0.7 0.15 200)"` // OKLCH color
+   * - `fill="#primary #secondary"` // double color (second as foreground overlay)
    * - `fill={true}` // default fill color
    */
-  fill?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | boolean | (string & {});
+  fill?: ColorValue | boolean;
   /**
    * @deprecated Use `fill` instead.
    */
@@ -92,19 +100,26 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    * - `svgFill="#purple.10"` // purple fill with 10% opacity
    * - `svgFill="#danger"` // danger theme color
    * - `svgFill="rgb(255 128 0)"` // custom RGB color
+   * - `svgFill="hsl(200 100% 50%)"` // HSL color
+   * - `svgFill="okhsl(200 100% 50%)"` // OKHSL color
+   * - `svgFill="oklch(0.7 0.15 200)"` // OKLCH color
    * - `svgFill="currentColor"` // inherit from parent color
    */
-  svgFill?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | (string & {});
+  svgFill?: ColorValue;
   /**
    * Set the text (current) color of the element. Shortcut for `color` with enhanced support for Tasty color tokens and syntaxes.
    *
    * Examples:
    * - `color="#purple"` // purple text color
    * - `color="#danger.6"` // danger color with 60% opacity
+   * - `color="rgb(255 128 0)"` // custom RGB color
+   * - `color="hsl(200 100% 50%)"` // HSL color
+   * - `color="okhsl(200 100% 50%)"` // OKHSL color
+   * - `color="oklch(0.7 0.15 200)"` // OKLCH color
    * - `color="red"` // CSS color name
    * - `color={true}` // currentColor
    */
-  color?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | boolean | string;
+  color?: ColorValue | boolean;
   /**
    * The fade style applies gradient-based fading masks to the edges of an element. Replaces complex CSS mask gradients with a simple, declarative API.
    *

package/dist/tasty.d.ts CHANGED Viewed

@@ -104,8 +104,8 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   image?: StyleValue<csstype.Property.BackgroundImage | undefined> | StyleValueStateMap<csstype.Property.BackgroundImage | undefined>;
   marker?: StyleValue<csstype.Property.Marker | undefined> | StyleValueStateMap<csstype.Property.Marker | undefined>;
   mask?: StyleValue<csstype.Property.Mask<string | number> | undefined> | StyleValueStateMap<csstype.Property.Mask<string | number> | undefined>;
-  fill?: StyleValue<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
-  color?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
+  fill?: StyleValue<boolean | ((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined> | StyleValueStateMap<boolean | ((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined>;
+  color?: StyleValue<boolean | ((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined> | StyleValueStateMap<boolean | ((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined>;
   font?: StyleValue<boolean | csstype.Property.FontFamily | undefined> | StyleValueStateMap<boolean | csstype.Property.FontFamily | undefined>;
   outline?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
   gap?: StyleValue<boolean | csstype.Property.Gap<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Gap<string | number> | undefined>;
@@ -957,7 +957,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   colorInterpolation?: StyleValue<csstype.Property.ColorInterpolation | undefined> | StyleValueStateMap<csstype.Property.ColorInterpolation | undefined>;
   colorRendering?: StyleValue<csstype.Property.ColorRendering | undefined> | StyleValueStateMap<csstype.Property.ColorRendering | undefined>;
   glyphOrientationVertical?: StyleValue<csstype.Property.GlyphOrientationVertical | undefined> | StyleValueStateMap<csstype.Property.GlyphOrientationVertical | undefined>;
-  svgFill?: StyleValue<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
+  svgFill?: StyleValue<((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined> | StyleValueStateMap<((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined>;
   fade?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
   scrollbar?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
   boldFontWeight?: StyleValue<number | undefined> | StyleValueStateMap<number | undefined>;

package/docs/README.md CHANGED Viewed

@@ -1,12 +1,13 @@
 # Tasty Docs
-Use this page when you know what you want to do, but not which document to open next.
+Tasty is a styling engine for design systems that turns component state into deterministic CSS by compiling state maps into mutually exclusive selectors. Use this hub to choose the right guide once you know whether you are evaluating the model, adopting it in a design system, or implementing reusable, stateful components day to day.
 ## Start Here
 - **New to Tasty**: [Getting Started](getting-started.md) for installation, the first component, optional shared `configure()`, ESLint, editor tooling, and rendering mode selection.
 - **Learning the component model**: [Methodology](methodology.md) for root + sub-elements, `styleProps`, tokens, extension, and recommended boundaries between `styles`, `style`, and wrappers.
-- **Evaluating fit**: [Comparison](comparison.md) for tool-selection context, then [Adoption Guide](adoption.md) for rollout strategy inside a design system.
+- **Evaluating the selector model**: [Style rendering pipeline](PIPELINE.md) for how mutually exclusive selectors make stateful styling deterministic.
+- **Evaluating fit**: [Comparison](comparison.md) for tool-selection context, then [Adoption Guide](adoption.md) for audience fit and rollout strategy inside a design system.
 ## By Role
@@ -14,11 +15,11 @@ Use this page when you know what you want to do, but not which document to open
 - **Design-system author**: [Methodology](methodology.md), [Building a Design System](design-system.md), [Configuration](configuration.md), and [Adoption Guide](adoption.md).
 - **Platform or tooling engineer**: [Configuration](configuration.md), [Zero Runtime (tastyStatic)](tasty-static.md), [Server-Side Rendering](ssr.md), and [Debug Utilities](debug.md).
-## By Rendering Mode
+## By Styling Approach
 - **Runtime React components**: [Runtime API](runtime.md)
 - **Zero-runtime / build-time extraction**: [Zero Runtime (tastyStatic)](tasty-static.md)
-- **SSR with runtime `tasty()`**: [Server-Side Rendering](ssr.md)
+- **Runtime `tasty()` with server collection and hydration**: [Server-Side Rendering](ssr.md)
 ## By Task

package/docs/adoption.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Adoption Guide
-Tasty is not a drop-in replacement for another styling library. It is a **substrate for building a design-system-defined styling language**. That means the adoption path is not "rewrite your classes" but "reshape your styling architecture."
+Tasty is not a drop-in replacement for another styling library. It is a **substrate for building a design-system-defined styling language**: what the comparison guide calls a house styling language. That means adoption usually starts where styling for reusable, stateful components has already become a composition problem, not with an all-at-once rewrite.
 This guide is for design-system maintainers and platform engineers evaluating Tasty or introducing it into an existing codebase. Use this document for rollout strategy and adoption sequencing; use the [Comparison guide](comparison.md) when the open question is whether Tasty is the right tool in the first place.
@@ -116,6 +116,8 @@ See [Configuration](configuration.md) for the full `configure()` API.
 You do not need to adopt everything at once. Tasty is designed to be introduced layer by layer.
+A practical way to start is with the components that already suffer from intersecting state and variant logic: buttons, inputs, menus, disclosures, dialogs, list items, interactive cards, and compound components. Those are the places where deterministic resolution pays off fastest.
 ### Phase 1 -- Tokens and units
 Start by defining your design tokens and custom units. This is the lowest-risk step: it only configures the parser and does not require rewriting any components.
@@ -161,7 +163,7 @@ configure({
 ### Phase 3 -- Migrate a few primitives
-Pick 2-3 simple, widely used components (Box, Text, Button) and rewrite them with `tasty()`. Keep the public API identical so product code does not need to change.
+Pick 2-3 widely used primitives (Box, Text, Button) and rewrite them with `tasty()`. Keep the public API identical so product code does not need to change.
 ```tsx
 const Box = tasty({
@@ -175,11 +177,11 @@ const Box = tasty({
 });
 ```
-At this point you can validate the DSL, token workflow, and component authoring experience before committing further.
+At this point you can validate the DSL, token workflow, and component authoring experience before expanding the rollout.
 ### Phase 4 -- Encode complex states
-Move components with intersecting states (buttons with hover + disabled + theme variants, inputs with focus + error + readonly) to Tasty's state map syntax. This is where mutually exclusive selectors start paying off.
+Move the components with the most painful intersecting states (buttons with hover + disabled + theme variants, inputs with focus + error + readonly) to Tasty's state map syntax. This is where mutually exclusive selectors start paying off.
 ```tsx
 const Button = tasty({

package/docs/comparison.md CHANGED Viewed

@@ -4,6 +4,10 @@ Use this guide when you are deciding whether Tasty is the right tool. If you hav
 Tasty is best understood not as a general-purpose CSS framework, but as a **styling engine for design systems and shared component APIs**.
+It targets a different layer: helping design-system teams define a **house styling language** on top of CSS.
+That does not require a big upfront configuration step. Tasty's built-in units and normal CSS color values work out of the box, and `okhsl(...)` is available immediately as the recommended path for color authoring. The extra setup comes later if a team wants shared tokens, aliases, recipes, or stricter conventions.
 Most styling tools focus on one of these layers:
 - direct app styling
@@ -12,9 +16,7 @@ Most styling tools focus on one of these layers:
 - utility composition
 - atomic CSS generation
-Tasty targets a different layer: it helps teams define a **house styling language** on top of CSS, including tokens, state semantics, style props, recipes, custom units, and sub-element rules.
-That does not mean a big upfront configuration step is required. Tasty's built-in units and normal CSS color values work out of the box, and `okhsl(...)` is available immediately as the recommended path for color authoring. The extra setup comes later if a team wants shared tokens, aliases, recipes, or stricter conventions.
+Tasty's house styling language can include tokens, state semantics, style props, recipes, custom units, and sub-element rules. In other words, it is a governed styling model, not just another syntax for writing CSS.
 That is why syntax-level comparisons are often shallow. The more meaningful comparison is about:
@@ -87,9 +89,9 @@ Tasty compiles this into selectors where `disabled` is guarded by `:not(:hover)`
 That makes Tasty less of a "better way to write CSS objects" and more of a **state-aware style compiler for design systems**.
-Beyond state resolution, Tasty includes several structural capabilities that most other tools do not offer:
+Beyond state resolution, Tasty also provides several structural capabilities that reinforce the design-system layer:
-- **CSS properties as typed React props** — `styleProps` lets a component expose selected style properties as normal props (`<Button placeSelf="end">`), including state maps for responsive values. No other tool provides this as a first-class, typed, design-system-aware feature.
+- **CSS properties as typed React props** — `styleProps` lets a component expose selected style properties as normal props (`<Button placeSelf="end">`), including state maps for responsive values. This keeps layout and composition controls inside a governed component API instead of pushing teams back to ad hoc styling escapes.
 - **Sub-element styling** — Compound components declare inner parts via capitalized keys in `styles` and `data-element` attributes. States, tokens, and recipes apply across the entire element tree from a single definition. See [Runtime API — Sub-element Styling](runtime.md#sub-element-styling).
 - **Auto-inferred `@property`** — When a custom property is assigned a concrete value, Tasty infers the CSS `@property` syntax and registers it automatically, enabling smooth transitions on custom properties without manual declarations.
 - **AI-friendly style definitions** — Style definitions are declarative, self-contained, and structurally consistent. AI tools can read, refactor, and generate Tasty styles as confidently as a human — no hidden cascade logic or implicit ordering to second-guess.
@@ -122,7 +124,7 @@ So this is not mainly a comparison of syntax. It is a comparison of **governance
 - Tailwind: developers author directly with framework vocabulary
 - Tasty: design-system authors define the vocabulary product teams consume
-Tailwind is usually a stronger fit for fast product styling with framework-owned vocabulary. Tasty is usually a stronger fit when teams want direct usability now, but also a path toward governed design-system architecture.
+Tailwind is a stronger fit for fast product styling with framework-owned vocabulary. Tasty is a stronger fit when styling should be exposed through a design-system-owned API and state resolution needs to stay deterministic as the component model grows.
 To make this concrete, consider a button with `hover`, `disabled`, and `theme=danger` states.
@@ -301,7 +303,7 @@ So while Stitches and Emotion are strong tools for building components, Tasty is
 That makes it narrower in audience, but deeper in architectural ambition.
-Tasty's runtime performance is also validated in enterprise-scale applications where styling overhead is not noticeable in normal UI flows — an important consideration for teams evaluating runtime CSS-in-JS at scale.
+For teams evaluating runtime styling at scale, Tasty also documents its runtime benchmarks and caching model in the main [README](../README.md#performance). That matters, but it is still secondary to the core question of whether you want Tasty's deterministic selector model.
 ---

package/docs/design-system.md CHANGED Viewed

@@ -2,7 +2,7 @@
 This guide walks through building a design-system styling layer on top of Tasty — defining tokens, state aliases, recipes, primitive components, and compound components with sub-elements.
-It assumes you have already decided to adopt Tasty. For evaluation criteria, audience fit, and incremental adoption phases, see the [Adoption Guide](adoption.md). For the recommended component patterns and mental model, see [Methodology](methodology.md).
+It assumes you have already decided to adopt Tasty. The goal is not just to centralize tokens, but to define a styling language whose component states resolve deterministically across variants, responsive rules, and sub-elements. For evaluation criteria, audience fit, and incremental adoption phases, see the [Adoption Guide](adoption.md). For the recommended component patterns and mental model, see [Methodology](methodology.md).
 ---

package/docs/dsl.md CHANGED Viewed

@@ -36,6 +36,46 @@ styles: { Title: { preset: 'h3' } }
 // Targets: <div data-element="Title">
 ```
+#### Selector Affix (`$`)
+Control how a sub-element selector attaches to the root selector using the `$` property inside the sub-element's styles:
+| Pattern | Result | Description |
+|---------|--------|-------------|
+| *(none)* | ` [el]` | Descendant (default) |
+| `>` | `> [el]` | Direct child |
+| `>Body>Row>` | `> [Body] > [Row] > [el]` | Chained elements |
+| `h1` | ` h1` | Tag selector (no key injection) |
+| `h1 >` | ` h1 > [el]` | Key is direct child of tag |
+| `h1 *` | ` h1 *` | Any descendant of tag |
+| `*` | ` *` | All descendants |
+| `::before` | `::before` | Root pseudo (no key) |
+| `@::before` | `[el]::before` | Pseudo on the sub-element |
+| `>@:hover` | `> [el]:hover` | Pseudo-class on the sub-element |
+| `>@.active` | `> [el].active` | Class on the sub-element |
+Rules for key injection (`[data-element="..."]`):
+- **Trailing combinator** (`>`, `+`, `~`) — key is injected after it
+- **Uppercase element name** (`Body`, `Row`) — key is injected as descendant
+- **HTML tag** (`h1`, `a`, `span`) — no key injection; the tag IS the selector
+- **Universal selector** (`*`) — no key injection
+- **Pseudo / class / attribute** — no key injection
+The `@` placeholder marks exactly where `[data-element="..."]` is injected, allowing you to attach pseudo-classes, pseudo-elements, or class selectors directly to the sub-element instead of the root:
+```jsx
+const List = tasty({
+  styles: {
+    Item: {
+      $: '>@:last-child',
+      border: 'none',
+    },
+  },
+});
+// → .t0 > [data-element="Item"]:last-child { border: none }
+```
 ### Color Token
 Named color prefixed with `#` that maps to CSS custom properties. Supports opacity with `.N` suffix:

package/docs/getting-started.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Getting Started
-This guide walks you from zero to a working Tasty component, then through the optional shared configuration and tooling layers. For a feature overview, see the [README](../README.md). For the full style language reference, see the [Style DSL](dsl.md). For the React API, see the [Runtime API](runtime.md). For the rest of the docs by role or task, see the [Docs Hub](README.md).
+This guide walks you from zero to a working Tasty component, then through the optional shared configuration and tooling layers. It is the right starting point when you already want to try Tasty in code. If you are still deciding whether Tasty fits your team, start with [Comparison](comparison.md) and [Adoption Guide](adoption.md) first. For a feature overview, see the [README](../README.md). For the full style language reference, see the [Style DSL](dsl.md). For the React API, see the [Runtime API](runtime.md). For the rest of the docs by role or task, see the [Docs Hub](README.md).
 ---
@@ -10,6 +10,8 @@ This guide walks you from zero to a working Tasty component, then through the op
 - **React** >= 18 (peer dependency)
 - **Package manager**: pnpm, npm, or yarn
+Tasty can be used immediately in a React app, but it is most compelling for teams building reusable components with intersecting states, variants, tokens, and design-system conventions.
 ---
 ## Install
@@ -177,25 +179,25 @@ export default [
 ## Choosing a rendering mode
-Tasty supports three rendering modes. Pick the one that fits your use case:
+Tasty has two styling approaches. Pick the one that fits your use case, then decide whether your runtime setup also needs server rendering support:
-| Mode | Entry point | Best for | Trade-off |
+| Approach | Entry point | Best for | Trade-off |
 |------|-------------|----------|-----------|
-| **Runtime** | `tasty()` from `@tenphi/tasty` | Interactive apps, design systems | CSS generated at runtime; full feature set (styleProps, sub-elements, variants) |
+| **Runtime** | `tasty()` from `@tenphi/tasty` | Interactive apps with reusable stateful components, design systems | CSS generated at runtime; full feature set (styleProps, sub-elements, variants) |
 | **Zero-runtime** | `tastyStatic()` from `@tenphi/tasty/static` | Static sites, landing pages, SSG | Zero JS overhead; requires Babel plugin; no dynamic props |
-| **SSR** | `@tenphi/tasty/ssr/next` or `@tenphi/tasty/ssr/astro` | Next.js, Astro, streaming SSR | Runtime `tasty()` with server-rendered CSS and zero-cost hydration |
-All three share the same DSL, tokens, units, and state mappings.
+Both share the same DSL, tokens, units, and state mappings.
 - Runtime is the default and requires no extra setup beyond `@tenphi/tasty`.
+- If your framework can execute runtime code during server rendering, add SSR support on top of runtime with `@tenphi/tasty/ssr/next`, `@tenphi/tasty/ssr/astro`, or the core SSR API. This still uses `tasty()`; it just collects CSS on the server and hydrates the cache on the client.
 - Zero-runtime requires the Babel plugin and additional peer dependencies. See [Zero Runtime (tastyStatic)](tasty-static.md).
-- SSR works with existing `tasty()` components — wrap your app with a registry or middleware. See [Server-Side Rendering](ssr.md).
+- SSR works with existing `tasty()` components — wrap your app with a registry, middleware, or collector. See [Server-Side Rendering](ssr.md).
 ---
 ## Next steps
-- **[Docs Hub](README.md)** — Pick the next guide by role, rendering mode, or task
+- **[Docs Hub](README.md)** — Pick the next guide by role, styling approach, or task
 - **[Methodology](methodology.md)** — The recommended patterns for structuring Tasty components: sub-elements, styleProps, tokens, extension
 - **[Style DSL](dsl.md)** — State maps, tokens, units, extending semantics, keyframes, @property
 - **[Runtime API](runtime.md)** — `tasty()` factory, component props, variants, sub-elements, hooks
@@ -212,4 +214,4 @@ All three share the same DSL, tokens, units, and state mappings.
 - Styles are missing on first render: make sure the file that calls `configure()` is imported before any `tasty()` component renders.
 - Token or unit values are not what you expect: check your `configure({ tokens, units })` setup, then inspect the generated CSS variables with [Debug Utilities](debug.md).
-- You need zero-runtime or SSR instead of the default runtime path: use [Zero Runtime (tastyStatic)](tasty-static.md) or [Server-Side Rendering](ssr.md) rather than trying to retrofit the runtime setup later.
+- You need build-time extraction or server-rendered CSS delivery: use [Zero Runtime (tastyStatic)](tasty-static.md) for extraction, or add [Server-Side Rendering](ssr.md) on top of runtime `tasty()` when your framework renders on the server.

package/docs/methodology.md CHANGED Viewed

@@ -1,11 +1,13 @@
 # Methodology
-Tasty has opinions about how components should be structured. The patterns described here are not mandatory — Tasty works without them — but following them gets the most out of the engine: better state resolution, cleaner component APIs, simpler overrides, and fewer surprises as the system grows.
+Tasty has opinions about how components should be structured. The patterns described here are not mandatory — Tasty works without them — but following them gets the most out of the engine: deterministic state resolution, cleaner component APIs, simpler overrides, and fewer surprises as the system grows.
 ---
 ## Component architecture: root + sub-elements
+This model matters most for design-system authors and platform teams building reusable, stateful components. It turns Tasty's selector guarantees into a component architecture that stays predictable as states, variants, and compound parts accumulate.
 ### The model
 Every Tasty component has a **root element** and zero or more **sub-elements**. The root owns the state context. Sub-elements participate in the same context by default.

package/docs/runtime.md CHANGED Viewed

@@ -178,31 +178,7 @@ const Card = tasty({
 ### Selector Affix (`$`)
-Control how a sub-element selector attaches to the root selector using the `$` property inside the sub-element's styles:
-| Pattern | Result | Description |
-|---------|--------|-------------|
-| *(none)* | ` [el]` | Descendant (default) |
-| `>` | `> [el]` | Direct child |
-| `>Body>Row>` | `> [Body] > [Row] > [el]` | Chained elements |
-| `::before` | `::before` | Root pseudo (no key) |
-| `@::before` | `[el]::before` | Pseudo on the sub-element |
-| `>@:hover` | `> [el]:hover` | Pseudo-class on the sub-element |
-| `>@.active` | `> [el].active` | Class on the sub-element |
-The `@` placeholder marks exactly where the `[data-element="..."]` selector is injected, allowing you to attach pseudo-classes, pseudo-elements, or class selectors directly to the sub-element instead of the root:
-```jsx
-const List = tasty({
-  styles: {
-    Item: {
-      $: '>@:last-child',
-      border: 'none',
-    },
-  },
-});
-// → .t0 > [data-element="Item"]:last-child { border: none }
-```
+The `$` property inside a sub-element's styles controls how its selector attaches to the root selector — combinators, HTML tags, pseudo-elements, the `@` placeholder, and more. For the full reference table and injection rules, see [DSL — Selector Affix](dsl.md#selector-affix-).
 For the mental model behind sub-elements — how they share root state context and how this differs from BEM — see [Methodology — Component architecture](methodology.md#component-architecture-root--sub-elements).

package/docs/ssr.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Server-Side Rendering (SSR)
-Tasty supports server-side rendering with zero-cost client hydration. Your existing `tasty()` components work unchanged -- SSR is opt-in and requires no per-component modifications. For the broader docs map, see the [Docs Hub](README.md).
+Tasty supports server-side rendering with zero-cost client hydration. This does **not** introduce a separate styling engine: SSR uses the same runtime `tasty()` pipeline you already use on the client, then adds server-side CSS collection and client-side cache hydration. Your existing `tasty()` components work unchanged, and SSR remains opt-in with no per-component modifications. For the broader docs map, see the [Docs Hub](README.md).
 ---
@@ -18,7 +18,7 @@ The Astro integration (`@tenphi/tasty/ssr/astro`) has no additional dependencies
 ## How It Works
-During server rendering, `useStyles()` detects a `ServerStyleCollector` and collects CSS into it instead of trying to access the DOM. The collector accumulates all styles, serializes them as `<style>` tags and a cache state script in the HTML. On the client, `hydrateTastyCache()` pre-populates the injector cache so that `useStyles()` skips the rendering pipeline entirely during hydration.
+When the environment can execute runtime React code during server rendering, the same `tasty()` and `useStyles()` calls can run there too. In Next.js, generic React SSR, and Astro islands, Tasty simply changes where that runtime-generated CSS goes: `useStyles()` detects a `ServerStyleCollector` and collects CSS into it instead of trying to access the DOM. The collector accumulates all styles, serializes them as `<style>` tags and a cache state script in the HTML. On the client, `hydrateTastyCache()` pre-populates the injector cache so that `useStyles()` skips the rendering pipeline entirely during hydration.
 ```
 Server                         Client

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",