@tenphi/tasty 0.0.0-snapshot.bbd10c7 → 0.0.0-snapshot.bbfcd75

package/dist/zero/extractor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"extractor.js","names":[],"sources":["../../src/zero/extractor.ts"],"sourcesContent":["import { createHash } from 'crypto';\n\nimport {\n  categorizeStyleKeys,\n  generateChunkCacheKey,\n  renderStylesForChunk,\n} from '../chunks';\nimport type {\n  CounterStyleDescriptors,\n  FontFaceDescriptors,\n  FontFaceInput,\n  KeyframesSteps,\n} from '../injector/types';\nimport {\n  extractLocalCounterStyle,\n  formatCounterStyleRule,\n  hasLocalCounterStyle,\n} from '../counter-style';\nimport {\n  extractLocalFontFace,\n  formatFontFaceRule,\n  hasLocalFontFace,\n} from '../font-face';\nimport {\n  extractAnimationNamesFromStyles,\n  extractLocalKeyframes,\n  filterUsedKeyframes,\n  hasLocalKeyframes,\n  mergeKeyframes,\n} from '../keyframes';\nimport type { StyleResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport { extractLocalProperties, hasLocalProperties } from '../properties';\nimport { PropertyTypeResolver } from '../properties/property-type-resolver';\nimport type { Styles } from '../styles/types';\n\nexport interface ExtractedChunk {\n  className: string;\n  css: string;\n}\n\nexport interface ExtractedSelector {\n  selector: string;\n  css: string;\n}\n\nexport interface ExtractedKeyframes {\n  name: string;\n  css: string;\n}\n\nexport interface KeyframesExtractionResult {\n  /** Keyframes to inject (deduplicated by content) */\n  keyframes: ExtractedKeyframes[];\n  /** Map from original animation name to canonical name (for replacement) */\n  nameMap: Map<string, string>;\n}\n\n/**\n * Generate a deterministic className from a cache key using content hash.\n * This ensures the same styles always produce the same className,\n * regardless of build order or incremental compilation.\n */\nfunction generateClassName(cacheKey: string): string {\n  const hash = createHash('md5').update(cacheKey).digest('hex').slice(0, 6);\n  return `ts${hash}`; // 'ts' prefix for \"tasty-static\" to distinguish from runtime 't' classes\n}\n\n/**\n * Extract styles using chunking (for className mode).\n * Returns multiple classes, one per chunk.\n */\nexport function extractStylesWithChunks(styles: Styles): ExtractedChunk[] {\n  const chunks: ExtractedChunk[] = [];\n\n  // Categorize style keys into chunks\n  const chunkMap = categorizeStyleKeys(styles as Record<string, unknown>);\n\n  for (const [chunkName, chunkStyleKeys] of chunkMap) {\n    if (chunkStyleKeys.length === 0) continue;\n\n    // Generate cache key for this chunk (used for className hash)\n    const cacheKey = generateChunkCacheKey(styles, chunkName, chunkStyleKeys);\n\n    // Render styles for this chunk\n    const renderResult = renderStylesForChunk(\n      styles,\n      chunkName,\n      chunkStyleKeys,\n    );\n\n    if (renderResult.rules.length === 0) continue;\n\n    // Generate deterministic className from content hash\n    const className = generateClassName(cacheKey);\n    const selector = `.${className}.${className}`;\n\n    // Format CSS\n    const css = formatRulesToCSS(renderResult.rules, selector);\n\n    chunks.push({ className, css });\n  }\n\n  return chunks;\n}\n\n/**\n * Extract styles for a specific selector (for global/selector mode).\n * Returns a single CSS block.\n */\nexport function extractStylesForSelector(\n  selector: string,\n  styles: Styles,\n): ExtractedSelector {\n  // renderStyles with selector returns StyleResult[] with selectors already applied\n  const rules = renderStyles(styles, selector);\n  // Format without re-prefixing - rules already have the full selector\n  const css = formatRulesDirectly(rules);\n\n  return { selector, css };\n}\n\n/**\n * Format StyleResult[] to CSS string.\n * Prefixes each rule's selector with the base selector.\n * Used for chunked styles where rules have relative selectors.\n */\nfunction formatRulesToCSS(rules: StyleResult[], baseSelector: string): string {\n  return rules\n    .map((rule) => {\n      // Handle selector as array (OR conditions) or string\n      // Note: renderStyles without className joins array selectors with '|||' placeholder\n      const selectorParts = Array.isArray(rule.selector)\n        ? rule.selector\n        : rule.selector\n          ? rule.selector.split('|||')\n          : [''];\n\n      // Prefix each selector part with the base selector\n      const fullSelector = selectorParts\n        .map((part) => {\n          // Build selector: [rootPrefix] baseSelector[part]\n          let selector: string;\n\n          // If part is empty, just use base selector\n          if (!part) {\n            selector = baseSelector;\n          } else if (part.startsWith(':') || part.startsWith('[')) {\n            // If part starts with a pseudo-class or pseudo-element, append to base\n            selector = `${baseSelector}${part}`;\n          } else if (\n            part.startsWith('>') ||\n            part.startsWith('+') ||\n            part.startsWith('~')\n          ) {\n            // If part starts with >, +, ~ combinator, append with space\n            selector = `${baseSelector}${part}`;\n          } else {\n            // Otherwise, combine base with part\n            selector = `${baseSelector}${part}`;\n          }\n\n          // Prepend rootPrefix if present (for @root() states)\n          if (rule.rootPrefix) {\n            selector = `${rule.rootPrefix} ${selector}`;\n          }\n\n          return selector;\n        })\n        .join(', ');\n\n      let css = `${fullSelector} { ${rule.declarations} }`;\n\n      // Wrap in at-rules (in reverse order for proper nesting)\n      if (rule.atRules && rule.atRules.length > 0) {\n        for (const atRule of [...rule.atRules].reverse()) {\n          css = `${atRule} {\\n  ${css}\\n}`;\n        }\n      }\n\n      return css;\n    })\n    .join('\\n\\n');\n}\n\n/**\n * Format StyleResult[] to CSS string directly without prefixing.\n * Used for global styles where rules already have the full selector.\n */\nfunction formatRulesDirectly(rules: StyleResult[]): string {\n  return rules\n    .map((rule) => {\n      // Prepend rootPrefix if present (for @root() states)\n      const selector = rule.rootPrefix\n        ? `${rule.rootPrefix} ${rule.selector}`\n        : rule.selector;\n\n      let css = `${selector} { ${rule.declarations} }`;\n\n      // Wrap in at-rules (in reverse order for proper nesting)\n      if (rule.atRules && rule.atRules.length > 0) {\n        for (const atRule of [...rule.atRules].reverse()) {\n          css = `${atRule} {\\n  ${css}\\n}`;\n        }\n      }\n\n      return css;\n    })\n    .join('\\n\\n');\n}\n\n// Note: With hash-based className generation, counter management functions\n// are no longer needed. ClassNames are deterministic based on content.\n\n/**\n * Generate a deterministic keyframes name from content hash.\n * This ensures the same keyframes content always produces the same name,\n * enabling automatic deduplication across elements and files.\n */\nfunction generateKeyframesName(steps: KeyframesSteps): string {\n  const content = JSON.stringify(steps);\n  const hash = createHash('md5').update(content).digest('hex').slice(0, 6);\n  return `kf${hash}`; // 'kf' prefix for \"keyframes\"\n}\n\n/**\n * Extract keyframes that are used in styles.\n * Merges local @keyframes with global keyframes, filters to only used ones.\n * Generates hash-based names from content for automatic deduplication.\n *\n * @param styles - The styles object (may contain @keyframes and animation properties)\n * @param globalKeyframes - Optional global keyframes from config\n * @returns Keyframes to inject and name mapping for replacement\n */\nexport function extractKeyframesFromStyles(\n  styles: Styles,\n  globalKeyframes?: Record<string, KeyframesSteps> | null,\n): KeyframesExtractionResult {\n  const emptyResult: KeyframesExtractionResult = {\n    keyframes: [],\n    nameMap: new Map(),\n  };\n\n  // Extract animation names from styles\n  const usedNames = extractAnimationNamesFromStyles(styles);\n  if (usedNames.size === 0) return emptyResult;\n\n  // Merge local and global keyframes\n  const local = hasLocalKeyframes(styles)\n    ? extractLocalKeyframes(styles)\n    : null;\n  const allKeyframes = mergeKeyframes(local, globalKeyframes ?? null);\n\n  // Filter to only used keyframes\n  const usedKeyframes = filterUsedKeyframes(allKeyframes, usedNames);\n  if (!usedKeyframes) return emptyResult;\n\n  // Generate hash-based names and collect unique keyframes\n  const seenHashes = new Set<string>();\n  const nameMap = new Map<string, string>();\n  const keyframesToEmit: ExtractedKeyframes[] = [];\n\n  for (const [originalName, steps] of Object.entries(usedKeyframes)) {\n    const hashedName = generateKeyframesName(steps);\n\n    // Always map original name to hashed name (for CSS replacement)\n    nameMap.set(originalName, hashedName);\n\n    // Only emit each unique keyframe once\n    if (!seenHashes.has(hashedName)) {\n      seenHashes.add(hashedName);\n      const css = keyframesToCSS(hashedName, steps);\n      keyframesToEmit.push({ name: hashedName, css });\n    }\n  }\n\n  return { keyframes: keyframesToEmit, nameMap };\n}\n\n/**\n * Convert keyframes steps to CSS string.\n */\nfunction keyframesToCSS(name: string, steps: KeyframesSteps): string {\n  const stepRules: string[] = [];\n\n  for (const [key, value] of Object.entries(steps)) {\n    if (typeof value === 'string') {\n      // Raw CSS string\n      stepRules.push(`${key} { ${value.trim()} }`);\n    } else if (value && typeof value === 'object') {\n      // Style map - convert to CSS declarations\n      const declarations = Object.entries(value)\n        .map(([prop, val]) => {\n          const cssProperty = camelToKebab(prop);\n          return `${cssProperty}: ${val}`;\n        })\n        .join('; ');\n      stepRules.push(`${key} { ${declarations} }`);\n    }\n  }\n\n  return `@keyframes ${name} { ${stepRules.join(' ')} }`;\n}\n\n/**\n * Convert camelCase to kebab-case.\n */\nfunction camelToKebab(str: string): string {\n  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n}\n\n// ============================================================================\n// Property Extraction (auto-infer @property types for zero-runtime)\n// ============================================================================\n\nexport interface ExtractedProperty {\n  name: string;\n  css: string;\n}\n\n/**\n * Extract auto-inferred @property declarations from styles.\n * Scans rendered style declarations and keyframe declarations for custom properties\n * whose types can be inferred from their values.\n *\n * @param styles - The styles object\n * @param options - Options including autoPropertyTypes flag\n * @returns Array of @property CSS rules to inject\n */\nexport function extractPropertiesFromStyles(\n  styles: Styles,\n  options?: { autoPropertyTypes?: boolean },\n): ExtractedProperty[] {\n  if (options?.autoPropertyTypes === false) return [];\n\n  const registered = new Set<string>();\n  const results: ExtractedProperty[] = [];\n\n  // Collect explicitly declared properties (they take precedence)\n  if (hasLocalProperties(styles)) {\n    const localProps = extractLocalProperties(styles);\n    if (localProps) {\n      for (const token of Object.keys(localProps)) {\n        // Normalize token to CSS name\n        let cssName: string;\n        if (token.startsWith('#')) {\n          cssName = `--${token.slice(1)}-color`;\n        } else if (token.startsWith('$')) {\n          cssName = `--${token.slice(1)}`;\n        } else if (token.startsWith('--')) {\n          cssName = token;\n        } else {\n          cssName = `--${token}`;\n        }\n        registered.add(cssName);\n      }\n    }\n  }\n\n  const resolver = new PropertyTypeResolver();\n\n  const registerProperty = (\n    name: string,\n    syntax: string,\n    initialValue: string,\n  ) => {\n    if (registered.has(name)) return;\n    registered.add(name);\n\n    const parts: string[] = [];\n    parts.push(`syntax: \"${syntax}\";`);\n    parts.push(`inherits: true;`);\n    parts.push(`initial-value: ${initialValue};`);\n\n    const css = `@property ${name} { ${parts.join(' ')} }`;\n    results.push({ name, css });\n  };\n\n  const isPropertyDefined = (name: string) => registered.has(name);\n\n  // Scan rendered style declarations\n  const chunkMap = categorizeStyleKeys(styles as Record<string, unknown>);\n  for (const [chunkName, chunkStyleKeys] of chunkMap) {\n    if (chunkStyleKeys.length === 0) continue;\n    const renderResult = renderStylesForChunk(\n      styles,\n      chunkName,\n      chunkStyleKeys,\n    );\n    for (const rule of renderResult.rules) {\n      if (!rule.declarations) continue;\n      resolver.scanDeclarations(\n        rule.declarations,\n        isPropertyDefined,\n        registerProperty,\n      );\n    }\n  }\n\n  // Scan keyframe declarations\n  if (hasLocalKeyframes(styles)) {\n    const localKf = extractLocalKeyframes(styles);\n    if (localKf) {\n      for (const steps of Object.values(localKf)) {\n        scanKeyframeSteps(steps, resolver, isPropertyDefined, registerProperty);\n      }\n    }\n  }\n\n  return results;\n}\n\nfunction scanKeyframeSteps(\n  steps: KeyframesSteps,\n  resolver: PropertyTypeResolver,\n  isPropertyDefined: (name: string) => boolean,\n  registerProperty: (\n    name: string,\n    syntax: string,\n    initialValue: string,\n  ) => void,\n): void {\n  for (const value of Object.values(steps)) {\n    if (typeof value === 'string') {\n      resolver.scanDeclarations(value, isPropertyDefined, registerProperty);\n    } else if (value && typeof value === 'object') {\n      const declarations = Object.entries(value)\n        .map(([prop, val]) => {\n          const cssProperty = camelToKebab(prop);\n          return `${cssProperty}: ${val}`;\n        })\n        .join('; ');\n      resolver.scanDeclarations(\n        declarations,\n        isPropertyDefined,\n        registerProperty,\n      );\n    }\n  }\n}\n\n// ============================================================================\n// Font Face Extraction (zero-runtime)\n// ============================================================================\n\nexport interface ExtractedFontFace {\n  css: string;\n}\n\n/**\n * Extract @font-face rules from styles, merging with global config.\n * Deduplicates by content hash.\n */\nexport function extractFontFaceFromStyles(\n  styles: Styles,\n  globalFontFace?: Record<string, FontFaceInput> | null,\n): ExtractedFontFace[] {\n  const results: ExtractedFontFace[] = [];\n  const seenHashes = new Set<string>();\n\n  function addFontFace(family: string, input: FontFaceInput) {\n    const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n      ? input\n      : [input];\n    for (const desc of descriptors) {\n      const hash = createHash('md5')\n        .update(JSON.stringify({ family, ...desc }))\n        .digest('hex')\n        .slice(0, 8);\n      if (!seenHashes.has(hash)) {\n        seenHashes.add(hash);\n        results.push({ css: formatFontFaceRule(family, desc) });\n      }\n    }\n  }\n\n  // Global font faces first\n  if (globalFontFace) {\n    for (const [family, input] of Object.entries(globalFontFace)) {\n      addFontFace(family, input);\n    }\n  }\n\n  // Local font faces (override globals with same hash)\n  if (hasLocalFontFace(styles)) {\n    const local = extractLocalFontFace(styles);\n    if (local) {\n      for (const [family, input] of Object.entries(local)) {\n        addFontFace(family, input);\n      }\n    }\n  }\n\n  return results;\n}\n\n// ============================================================================\n// Counter Style Extraction (zero-runtime)\n// ============================================================================\n\nexport interface ExtractedCounterStyle {\n  name: string;\n  css: string;\n}\n\n/**\n * Extract @counter-style rules from styles, merging with global config.\n * Deduplicates by name (first definition wins).\n */\nexport function extractCounterStyleFromStyles(\n  styles: Styles,\n  globalCounterStyle?: Record<string, CounterStyleDescriptors> | null,\n): ExtractedCounterStyle[] {\n  const results: ExtractedCounterStyle[] = [];\n  const seenNames = new Set<string>();\n\n  function addCounterStyle(name: string, descriptors: CounterStyleDescriptors) {\n    if (!seenNames.has(name)) {\n      seenNames.add(name);\n      results.push({ name, css: formatCounterStyleRule(name, descriptors) });\n    }\n  }\n\n  // Global counter styles first\n  if (globalCounterStyle) {\n    for (const [name, descriptors] of Object.entries(globalCounterStyle)) {\n      addCounterStyle(name, descriptors);\n    }\n  }\n\n  // Local counter styles (override globals with same name)\n  if (hasLocalCounterStyle(styles)) {\n    const local = extractLocalCounterStyle(styles);\n    if (local) {\n      for (const [name, descriptors] of Object.entries(local)) {\n        addCounterStyle(name, descriptors);\n      }\n    }\n  }\n\n  return results;\n}\n"],"mappings":"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"}

package/docs/PIPELINE.md

@@ -1,519 +0,0 @@
-# Tasty Style Rendering Pipeline
-
-This document describes the style rendering pipeline that transforms style objects into CSS rules. The pipeline ensures that each style value is applied to exactly one condition through exclusive condition building, boolean simplification, and intelligent CSS generation.
-
-**Implementation:** [`src/pipeline/`](../src/pipeline/) — TypeScript file names below are relative to that directory.
-
-## Overview
-
-The pipeline takes a `Styles` object and produces an array of `CSSRule` objects ready for injection into the DOM. Entry points include `renderStylesPipeline` (full pipeline + optional class-name prefixing) and `renderStyles` (direct selector/class mode). The per-handler flow has seven main stages:
-
-```
-Input: Styles Object
-         ↓
-    ┌─────────────────────────────────────┐
-    │  1. PARSE CONDITIONS                │
-    │     parseStyleEntries + parseStateKey│
-    └─────────────────────────────────────┘
-         ↓
-    ┌─────────────────────────────────────┐
-    │  2. BUILD EXCLUSIVE CONDITIONS      │
-    │     Negate higher-priority entries  │
-    └─────────────────────────────────────┘
-         ↓
-    ┌─────────────────────────────────────┐
-    │  3. EXPAND AT-RULE OR BRANCHES       │
-    │     expandExclusiveOrs (when needed)│
-    └─────────────────────────────────────┘
-         ↓
-    ┌─────────────────────────────────────┐
-    │  4. COMPUTE STATE COMBINATIONS      │
-    │     Cartesian product across styles │
-    └─────────────────────────────────────┘
-         ↓
-    ┌─────────────────────────────────────┐
-    │  5. CALL HANDLERS                   │
-    │     Compute CSS declarations        │
-    └─────────────────────────────────────┘
-         ↓
-    ┌─────────────────────────────────────┐
-    │  6. MERGE BY VALUE                  │
-    │     Combine rules with same output  │
-    └─────────────────────────────────────┘
-         ↓
-    ┌─────────────────────────────────────┐
-    │  7. MATERIALIZE CSS                 │
-    │     Condition → selectors + at-rules│
-    └─────────────────────────────────────┘
-         ↓
-    ┌─────────────────────────────────────┐
-    │  runPipeline: dedupe identical rules │
-    └─────────────────────────────────────┘
-         ↓
-Output: CSSRule[]
-```
-
-**Simplification** (`simplifyCondition` in `simplify.ts`) is not a separate numbered stage. It runs inside exclusive building, `expandExclusiveOrs` branch cleanup, combination ANDs, merge-by-value ORs, and materialization as needed.
-
-**Post-pass:** After `processStyles` collects rules from every handler, `runPipeline` filters duplicates using a key of `selector|declarations|atRules|rootPrefix` so identical emitted rules appear once.
-
----
-
-## Stage 1: Parse Conditions
-
-**Files:** `exclusive.ts` (`parseStyleEntries`), `parseStateKey.ts` (`parseStateKey`)
-
-### What It Does
-
-Converts each state key in a style value map (like `'hovered & !disabled'`, `'@media(w < 768px)'`) into `ConditionNode` trees. `parseStyleEntries` walks the object keys in source order and assigns priorities; `parseStateKey` parses a single key string.
-
-### How It Works
-
-1. **Tokenization**: The state key is split into tokens using a regex pattern that recognizes:
-   - Operators: `&` (AND), `|` (OR), `!` (NOT), `^` (XOR)
-   - Parentheses for grouping
-   - State tokens: `@media(...)`, `@root(...)`, `@parent(...)`, `@own(...)`, `@supports(...)`, `@(...)`, `@starting`, predefined states, modifiers, pseudo-classes
-
-2. **Recursive Descent Parsing**: Tokens are parsed with operator precedence:
-   ```
-   ! (NOT) > ^ (XOR) > | (OR) > & (AND)
-   ```
-
-3. **State Token Interpretation**: Each state token is converted to a specific condition type:
-   - `hovered` → `ModifierCondition` with `attribute: 'data-hovered'`
-   - `theme=dark` → `ModifierCondition` with `attribute: 'data-theme', value: 'dark'`
-   - `:hover` → `PseudoCondition`
-   - `@media(w < 768px)` → `MediaCondition` (`subtype: 'dimension'`) with bounds
-   - `@media(prefers-color-scheme: dark)` → `MediaCondition` (`subtype: 'feature'`, `feature` + `featureValue`)
-   - `@root(schema=dark)` → `RootCondition` wrapping the inner condition
-   - `@parent(hovered)` → `ParentCondition` (optional `direct` for immediate parent)
-   - `@own(hovered)` → `OwnCondition` wrapping the parsed inner condition
-   - `@supports(display: grid)` → `SupportsCondition`
-   - `@(w < 600px)` → `ContainerCondition` (dimension, style, or raw subtypes)
-   - `@mobile` → Resolved via predefined states, then parsed recursively
-
-Pipeline warnings for invalid inputs (e.g. bad `$` selector affix) are emitted from `warnings.ts`.
-
-### Why
-
-The condition tree representation enables:
-- Boolean algebra operations (simplification, negation)
-- Semantic analysis (detect contradictions)
-- Flexible CSS generation (different output for media vs. selectors)
-
-### Example
-
-```typescript
-// Input
-'hovered & @media(w < 768px)'
-
-// Output ConditionNode
-{
-  kind: 'compound',
-  operator: 'AND',
-  children: [
-    { kind: 'state', type: 'modifier', attribute: 'data-hovered', ... },
-    { kind: 'state', type: 'media', subtype: 'dimension', upperBound: { value: '768px', ... }, ... }
-  ]
-}
-```
-
----
-
-## Stage 2: Build Exclusive Conditions
-
-**File:** `exclusive.ts` (`buildExclusiveConditions`)
-
-### What It Does
-
-Ensures each style entry applies in exactly one scenario by ANDing each condition with the negation of all higher-priority conditions.
-
-### How It Works
-
-Given entries ordered by priority (highest first):
-```
-A: value1 (priority 2)
-B: value2 (priority 1)
-C: value3 (priority 0)
-```
-
-Produces:
-```
-A: A                    (highest priority, no negation needed)
-B: B & !A               (applies only when A doesn't)
-C: C & !A & !B          (applies only when neither A nor B)
-```
-
-Each exclusive condition is passed through `simplifyCondition`. Entries that simplify to `FALSE` (impossible) are filtered out. The default state (`''` → `TrueCondition`) is not added to the “prior” list for negation (see `buildExclusiveConditions`).
-
-### Why
-
-This eliminates CSS specificity wars. Instead of relying on cascade order, each CSS rule matches in exactly one scenario. Benefits:
-- Predictable styling regardless of rule order
-- No conflicts from overlapping conditions
-- Easier debugging (each rule is mutually exclusive)
-
-### Example
-
-```typescript
-// Style value mapping
-{ padding: { '': '2x', 'compact': '1x', '@media(w < 768px)': '0.5x' } }
-
-// After exclusive building (highest priority first):
-// @media(w < 768px): applies when media matches
-// compact & !@media(w < 768px): applies when compact but NOT media
-// !compact & !@media(w < 768px): default, applies when neither
-```
-
----
-
-## Stage 3: Expand At-Rule OR Branches
-
-**File:** `exclusive.ts` (`expandExclusiveOrs`)
-
-### What It Does
-
-Runs **after** `buildExclusiveConditions`. When an entry’s **exclusive** condition contains a top-level OR that mixes **at-rule** context (`media`, `container`, `supports`, `starting`) with other branches, those ORs are split into mutually exclusive branches so each branch keeps the correct at-rule wrapping (e.g. after De Morgan: `!(A & B)` → `!A | !B`).
-
-### How It Works
-
-1. Collect top-level OR branches of `exclusiveCondition`.
-2. If there is no OR, or **no** branch involves at-rule context, the entry is unchanged (pure selector ORs are handled later via `:is()` / variant merging in materialization).
-3. Otherwise, branches are sorted with `sortOrBranchesForExpansion` so at-rule-heavy branches come first, then each branch is made exclusive against prior branches: `branch & !prior[0] & !prior[1] & ...`, then simplified.
-4. Impossible branches are dropped; expanded entries get a synthetic `stateKey` suffix like `[or:0]`.
-
-### Why
-
-Without this pass, a condition like `!(@supports & :has)` could produce one rule missing the `@supports` wrapper. Exclusive OR expansion ensures negated at-rule groups still nest modifiers correctly.
-
-### Example (conceptual)
-
-See the comment block in `exclusive.ts` (~195–206): a default value’s exclusive condition can become `!@supports | !:has`; expansion yields one branch under `@supports (not …)` and another under `@supports (…) { :not(:has()) }` instead of a bare `:not(:has())` rule.
-
----
-
-## Stage 4: Compute State Combinations
-
-**File:** `index.ts` (`computeStateCombinations`)
-
-### What It Does
-
-Computes the Cartesian product of all style entries for a handler, creating snapshots of which value each style has for each possible state combination.
-
-### How It Works
-
-1. Collect exclusive entries for each style the handler uses
-2. Compute Cartesian product: every combination of entries
-3. For each combination:
-   - AND all `exclusiveCondition` values together
-   - `simplifyCondition` the result
-   - Skip if simplified to `FALSE`
-   - Record the values for each style
-
-### Why
-
-Style handlers often depend on multiple style properties (e.g., `padding` might look at both `padding` and `gap`). By computing all valid combinations, we can call the handler once per unique state and get the correct CSS output.
-
-### Example
-
-```typescript
-// Handler looks up: ['padding', 'size']
-// padding has entries: [{ value: '2x', condition: A }, { value: '1x', condition: B }]
-// size has entries: [{ value: 'large', condition: C }, { value: 'small', condition: D }]
-
-// Combinations:
-// { padding: '2x', size: 'large', condition: A & C }
-// { padding: '2x', size: 'small', condition: A & D }
-// { padding: '1x', size: 'large', condition: B & C }
-// { padding: '1x', size: 'small', condition: B & D }
-```
-
----
-
-## Stage 5: Call Handlers
-
-**File:** `index.ts` (within `processStyles`)
-
-### What It Does
-
-Invokes style handlers with computed value snapshots to produce CSS declarations.
-
-### How It Works
-
-1. For each state snapshot (condition + values):
-   - Call the handler with the values
-   - Handler returns CSS properties (e.g., `{ 'padding-top': '16px', 'padding-bottom': '16px' }`)
-   - Handler may also return `$` (selector suffix) for pseudo-elements
-2. Create computed rules with the condition, declarations, and selector suffix
-
-### Why
-
-Style handlers encapsulate the logic for translating design tokens (like `'2x'`) to actual CSS values (like `'16px'`). They can also handle complex multi-property styles (e.g., `padding` → `padding-top`, `padding-right`, etc.).
-
----
-
-## Stage 6: Merge By Value
-
-**File:** `index.ts` (`mergeByValue`)
-
-### What It Does
-
-Combines rules that have identical CSS output into a single rule with an OR condition.
-
-### How It Works
-
-1. Group rules by `selectorSuffix` plus a stable string for declarations (JSON via an internal `declStringCache` `WeakMap` on declaration objects)
-2. For rules in the same group:
-   - Merge their conditions with OR
-   - `simplifyCondition` the resulting condition
-3. Output one rule per group
-
-### Why
-
-Different state combinations might produce the same CSS output. Rather than emitting duplicate CSS, we combine them into a single rule. This reduces CSS size and improves performance.
-
-### Example
-
-```typescript
-// Before merging:
-// condition: A → { color: 'red' }
-// condition: B → { color: 'red' }
-
-// After merging:
-// condition: A | B → { color: 'red' }
-```
-
----
-
-## Stage 7: Materialize CSS
-
-**File:** `materialize.ts` (`conditionToCSS`, `materializeComputedRule` in `index.ts`)
-
-### What It Does
-
-Converts condition trees into actual CSS selectors and at-rules.
-
-### How It Works
-
-1. **Condition to CSS components** (`conditionToCSS`): Walk the condition tree and build `SelectorVariant` data:
-   - `ModifierCondition` → attribute selectors (e.g. `[data-hovered]`); optional `operator` (`=`, `^=`, `$=`, `*=`)
-   - `PseudoCondition` → pseudo-class (e.g. `:hover`)
-   - `MediaCondition` → `@media` (dimension, feature, or type)
-   - `ContainerCondition` → `@container` (dimension, style query, or raw)
-   - `RootCondition` → `rootGroups` / root prefix fragments
-   - `ParentCondition` → `parentGroups` / ancestor selectors (`direct` → child combinator path)
-   - `OwnCondition` → `ownGroups` on the **styled** element (sub-element / `&` scope), optimized with `optimizeGroups`
-   - `SupportsCondition` → `@supports` at-rules
-   - `StartingCondition` → `@starting-style` wrapper
-
-2. **AND / OR on variants**: AND merges variant dimensions; OR yields multiple variants (later merged into `:is()` / `:not()` groups where appropriate).
-
-3. **Contradiction detection**: During variant merging, impossible combinations are dropped (e.g. conflicting media, root, or modifier negations).
-
-4. **`materializeComputedRule`**: Groups variants by sorted at-rules plus root-prefix key; within each group, `mergeVariantsIntoSelectorGroups` merges variants that differ only in flat modifier/pseudo parts; builds selector strings and emits one or more `CSSRule` objects.
-
-### Why
-
-CSS has different mechanisms for different condition types:
-- Modifiers → attribute selectors
-- Media queries → `@media` blocks
-- Container queries → `@container` blocks
-- Root state → `:root` / root groups
-- Supports → `@supports` blocks
-
-The materialization layer handles these differences while maintaining the logical semantics of the condition tree.
-
-### Output Structure
-
-```typescript
-interface CSSRule {
-  selector: string | string[]; // Selector fragment(s); array when OR’d selector branches
-  declarations: string; // CSS declarations (e.g. 'color: red;')
-  atRules?: string[]; // Wrapping at-rules
-  rootPrefix?: string; // Root state prefix
-}
-```
-
-When `renderStylesPipeline` runs **without** a class name, returned rules include `needsClassName: true` (compatibility field for the injector); that flag is not part of `CSSRule` inside `materialize.ts`.
-
----
-
-## Condition Types
-
-**File:** `conditions.ts`
-
-### ConditionNode Hierarchy
-
-```
-ConditionNode
-├── TrueCondition     (matches everything)
-├── FalseCondition    (matches nothing)
-├── CompoundCondition (AND/OR of children)
-└── StateCondition
-    ├── ModifierCondition    (data attributes; optional value + match operator)
-    ├── PseudoCondition      (CSS pseudo-classes: :hover)
-    ├── MediaCondition       (subtype: dimension | feature | type)
-    ├── ContainerCondition   (subtype: dimension | style | raw)
-    ├── RootCondition        (inner condition under :root)
-    ├── ParentCondition      (@parent(...); optional direct parent)
-    ├── OwnCondition         (@own(...); scoped to styled / sub-element)
-    ├── SupportsCondition    (@supports(...))
-    └── StartingCondition    (@starting-style wrapper)
-```
-
-### Key Operations
-
-- `and(...conditions)`: Create AND with short-circuit and flattening
-- `or(...conditions)`: Create OR with short-circuit and flattening
-- `not(condition)`: Negate with De Morgan's law support
-- `getConditionUniqueId(condition)`: Get canonical ID for comparison
-
----
-
-## Simplification
-
-**File:** `simplify.ts`
-
-### What It Does
-
-Applies boolean algebra rules to reduce condition complexity and detect impossible combinations.
-
-### Rules Applied
-
-1. **Identity Laws**:
-   - `A & TRUE = A`
-   - `A | FALSE = A`
-
-2. **Annihilator Laws**:
-   - `A & FALSE = FALSE`
-   - `A | TRUE = TRUE`
-
-3. **Contradiction Detection**:
-   - `A & !A = FALSE`
-
-4. **Tautology Detection**:
-   - `A | !A = TRUE`
-
-5. **Idempotent Laws** (via deduplication):
-   - `A & A = A`
-   - `A | A = A`
-
-6. **Absorption Laws**:
-   - `A & (A | B) = A`
-   - `A | (A & B) = A`
-
-7. **Range intersection**: For **media and container** dimension queries, impossible ranges simplify to `FALSE` (e.g. `@media(w > 400px) & @media(w < 300px)`).
-
-8. **Container style queries**: Conflicting or redundant `@container` style conditions on the same property can be reduced (see `simplify.ts` around the container-style conflict pass).
-
-9. **Attribute conflict detection**:
-   - `[data-theme="dark"] & [data-theme="light"] = FALSE`
-
-### Why
-
-Simplification reduces CSS output size and catches impossible combinations early, preventing invalid CSS rules from being generated.
-
----
-
-## Caching Strategy
-
-LRU and small auxiliary caches:
-
-| Cache | Size | Key | Purpose |
-|-------|------|-----|---------|
-| `pipelineCache` | 5000 | `pipelineCacheKey \|\| stringifyStyles(styles)` | Skip full pipeline for identical styles |
-| `parseCache` | 5000 | `trimmedStateKey + '\\0' + isSubElement + '\\0' + JSON.stringify(localPredefinedStates)` | Skip re-parsing identical state keys in context |
-| `simplifyCache` | 5000 | `getConditionUniqueId(node)` | Skip re-simplifying identical conditions |
-| `conditionCache` | 3000 | `getConditionUniqueId(node)` in `conditionToCSS` | Skip re-materializing identical conditions |
-| `variantKeyCache` | — | `WeakMap<SelectorVariant, string>` | Stable string keys for variants during materialization |
-| `declStringCache` | — | `WeakMap<Record<string,string>, string>` | Stable JSON keys for declaration objects in `mergeByValue` |
-
----
-
-## Example Walkthrough
-
-### Input
-
-```typescript
-const styles = {
-  color: {
-    '': '#white',
-    '@media(prefers-color-scheme: dark)': '#dark',
-    hovered: '#highlight',
-  },
-};
-```
-
-### Stage 1: Parse Conditions
-
-```
-'' → TrueCondition
-'@media(prefers-color-scheme: dark)' → MediaCondition(subtype: 'feature', feature: 'prefers-color-scheme', featureValue: 'dark')
-'hovered' → ModifierCondition(attribute: 'data-hovered')
-```
-
-### Stages 2–3: Exclusive conditions + expand OR
-
-Processing order (highest priority first): `hovered`, `@media(dark)`, default.
-
-```
-hovered: [data-hovered]
-@media(dark) & !hovered: @media(dark) & :not([data-hovered])
-!hovered & !@media(dark): :not([data-hovered]) & not @media(dark)
-```
-
-No at-rule OR expansion needed on these exclusives.
-
-### Stages 4–5: Compute combinations and call handler
-
-Single style, three snapshots; the `color` handler emits `color` plus `--current-color*` variables.
-
-### Stage 6: Merge by value
-
-Each snapshot yields distinct declarations; no merge.
-
-### Stage 7: Materialize CSS
-
-Using `renderStyles(styles, '.t1')` (single class prefix; `renderStylesPipeline` doubles the class for specificity when a class name is supplied):
-
-```css
-.t1[data-hovered] {
-  color: var(--highlight-color);
-  --current-color: var(--highlight-color);
-  --current-color-oklch: var(--highlight-color-oklch);
-}
-@media (prefers-color-scheme: dark) {
-  .t1:not([data-hovered]) {
-    color: var(--dark-color);
-    --current-color: var(--dark-color);
-    --current-color-oklch: var(--dark-color-oklch);
-  }
-}
-@media (not (prefers-color-scheme: dark)) {
-  .t1:not([data-hovered]) {
-    color: var(--white-color);
-    --current-color: var(--white-color);
-    --current-color-oklch: var(--white-color-oklch);
-  }
-}
-```
-
----
-
-## Key Design Decisions
-
-### 1. Exclusive Conditions Over CSS Specificity
-
-Rather than relying on CSS cascade rules, we generate mutually exclusive selectors. This makes styling predictable and debuggable.
-
-### 2. OR Handling: DNF, `:is()`, and `expandExclusiveOrs`
-
-OR of conditions is ultimately expressed as DNF (OR of ANDs) for CSS—comma-separated selectors, multiple rules, or `:is()` / `:not()` groups. **User-authored** ORs on pure selector conditions are handled in materialization. **`expandExclusiveOrs`** is an additional, **post-exclusive** pass for ORs that appear on **exclusive** conditions and involve **at-rule** branches (often from De Morgan on `@supports` / `@media` / `@container` / `@starting`), so each branch keeps correct at-rule nesting.
-
-### 3. Early Contradiction Detection
-
-Impossible combinations are detected at multiple levels (simplification, variant merging) to avoid generating invalid CSS.
-
-### 4. Aggressive Caching
-
-Parse, simplify, condition-to-CSS, and full-pipeline results are cached independently, enabling fast re-rendering when only parts of the style object change.