@tenphi/tasty 0.0.0-snapshot.1bb95b2 → 0.0.0-snapshot.2228af4

package/README.md

@@ -301,7 +301,7 @@ Every rule is guarded by the negation of higher-priority rules. No two rules can
 
 By absorbing selector complexity, Tasty makes advanced CSS patterns practical again — nested container queries, multi-condition `@supports` gates, and combined root-state/media branches. You stay in pure CSS instead of relying on JavaScript workarounds, so the browser can optimize layout, painting, and transitions natively. Tasty 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)
+[Try it in the playground →](https://tasty.style/playground)
 
 ## Capabilities
 

package/dist/chunks/definitions.d.ts

@@ -1,6 +1,6 @@
 //#region src/chunks/definitions.d.ts
 declare const CHUNK_NAMES: {
-  /** Special chunk for styles that cannot be split (e.g., @starting-style) */readonly COMBINED: "combined";
+  /** Special chunk for styles that cannot be split */readonly COMBINED: "combined";
   readonly SUBCOMPONENTS: "subcomponents";
   readonly APPEARANCE: "appearance";
   readonly FONT: "font";

package/dist/chunks/definitions.js.map

@@ -1 +1 @@
-{"version":3,"file":"definitions.js","names":[],"sources":["../../src/chunks/definitions.ts"],"sourcesContent":["/**\n * Style chunk definitions for CSS chunking optimization.\n *\n * Styles are grouped into chunks based on:\n * 1. Handler dependencies - styles that share a handler MUST be in the same chunk\n * 2. Logical grouping - related styles grouped for better cache reuse\n *\n * See STYLE_CHUNKING_SPEC.md for detailed rationale.\n *\n * ============================================================================\n * ⚠️  CRITICAL ARCHITECTURAL CONSTRAINT: NO CROSS-CHUNK HANDLER DEPENDENCIES\n * ============================================================================\n *\n * Style handlers declare their dependencies via `__lookupStyles` array.\n * This creates a dependency graph where handlers read multiple style props.\n *\n * **ALL styles in a handler's `__lookupStyles` MUST be in the SAME chunk.**\n *\n * Why this matters:\n * 1. Each chunk computes a cache key from ONLY its own style values\n * 2. If a handler reads a style from another chunk, that value isn't in the cache key\n * 3. Changing the cross-chunk style won't invalidate this chunk's cache\n * 4. Result: stale CSS output or incorrect cache hits\n *\n * Example of a violation:\n * ```\n * // flowStyle.__lookupStyles = ['display', 'flow']\n * // If 'display' is in DISPLAY chunk and 'flow' is in LAYOUT chunk:\n * // - User sets { display: 'grid', flow: 'column' }\n * // - LAYOUT chunk caches CSS with flow=column, display=grid\n * // - User changes to { display: 'flex', flow: 'column' }\n * // - LAYOUT chunk cache key unchanged (only has 'flow')\n * // - Returns stale CSS computed with display=grid!\n * ```\n *\n * Before adding/moving styles, verify:\n * 1. Find all handlers that use this style (grep for the style name in __lookupStyles)\n * 2. Ensure ALL styles from each handler's __lookupStyles are in the same chunk\n * ============================================================================\n */\n\nimport { isSelector } from '../pipeline';\n\n// ============================================================================\n// Chunk Style Lists\n// ============================================================================\n\n/**\n * Appearance chunk - visual styling with independent handlers\n */\nexport const APPEARANCE_CHUNK_STYLES = [\n  'fill', // fillStyle (independent)\n  'color', // colorStyle (independent)\n  'opacity', // independent\n  'border', // borderStyle (independent)\n  'radius', // radiusStyle (independent)\n  'outline', // outlineStyle: outline ↔ outlineOffset\n  'outlineOffset', // outlineStyle: outline ↔ outlineOffset\n  'shadow', // shadowStyle (independent)\n  'fade', // fadeStyle (independent)\n] as const;\n\n/**\n * Font chunk - typography styles\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ presetStyle: preset, fontSize, lineHeight, letterSpacing, textTransform,\n *    fontWeight, fontStyle, font\n */\nexport const FONT_CHUNK_STYLES = [\n  // All from presetStyle handler - MUST stay together\n  'preset',\n  'font',\n  'fontWeight',\n  'fontStyle',\n  'fontSize',\n  'lineHeight',\n  'letterSpacing',\n  'textTransform',\n  // Independent text styles grouped for cohesion\n  'fontFamily', // independent alias (logical grouping with font styles)\n  'textAlign',\n  'textDecoration',\n  'wordBreak',\n  'wordWrap',\n  'boldFontWeight',\n] as const;\n\n/**\n * Dimension chunk - sizing and spacing\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left, paddingBlock/Inline\n * ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left, marginBlock/Inline\n * ⚠️ widthStyle: width, minWidth, maxWidth\n * ⚠️ heightStyle: height, minHeight, maxHeight\n */\nexport const DIMENSION_CHUNK_STYLES = [\n  // All from paddingStyle handler - MUST stay together\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n  // All from marginStyle handler - MUST stay together\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n  // widthStyle handler - MUST stay together\n  'width',\n  'minWidth',\n  'maxWidth',\n  // heightStyle handler - MUST stay together\n  'height',\n  'minHeight',\n  'maxHeight',\n  'flexBasis',\n  'flexGrow',\n  'flexShrink',\n  'flex',\n] as const;\n\n/**\n * Display chunk - display mode, layout flow, text overflow, and scrollbar\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ displayStyle: display, hide, textOverflow, overflow, whiteSpace\n * ⚠️ flowStyle: display, flow\n * ⚠️ gapStyle: display, flow, gap\n * ⚠️ scrollbarStyle: scrollbar, overflow\n */\nexport const DISPLAY_CHUNK_STYLES = [\n  // displayStyle handler\n  'display',\n  'hide',\n  'textOverflow',\n  'overflow', // also used by scrollbarStyle\n  'whiteSpace',\n  // flowStyle handler (requires display)\n  'flow',\n  // gapStyle handler (requires display, flow)\n  'gap',\n  // scrollbarStyle handler (requires overflow)\n  'scrollbar',\n] as const;\n\n/**\n * Layout chunk - flex/grid alignment and grid templates\n *\n * Note: flow and gap are in DISPLAY chunk due to handler dependencies\n * (flowStyle and gapStyle both require 'display' prop).\n */\nexport const LAYOUT_CHUNK_STYLES = [\n  // Alignment styles (all independent handlers)\n  'placeItems',\n  'placeContent',\n  'alignItems',\n  'alignContent',\n  'justifyItems',\n  'justifyContent',\n  'align', // alignStyle (independent)\n  'justify', // justifyStyle (independent)\n  'place', // placeStyle (independent)\n  'columnGap',\n  'rowGap',\n  // Grid template styles\n  'gridColumns',\n  'gridRows',\n  'gridTemplate',\n  'gridAreas',\n  'gridAutoFlow',\n  'gridAutoColumns',\n  'gridAutoRows',\n] as const;\n\n/**\n * Position chunk - element positioning\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ insetStyle: inset, insetBlock, insetInline, top, right, bottom, left\n */\nexport const POSITION_CHUNK_STYLES = [\n  'position',\n  // All from insetStyle handler - MUST stay together\n  'inset',\n  'insetBlock',\n  'insetInline',\n  'top',\n  'right',\n  'bottom',\n  'left',\n  'zIndex',\n  'gridArea',\n  'gridColumn',\n  'gridRow',\n  'order',\n  'placeSelf',\n  'alignSelf',\n  'justifySelf',\n  'transform',\n  'transition',\n  'animation',\n] as const;\n\n// ============================================================================\n// Chunk Names\n// ============================================================================\n\nexport const CHUNK_NAMES = {\n  /** Special chunk for styles that cannot be split (e.g., @starting-style) */\n  COMBINED: 'combined',\n  SUBCOMPONENTS: 'subcomponents',\n  APPEARANCE: 'appearance',\n  FONT: 'font',\n  DIMENSION: 'dimension',\n  DISPLAY: 'display',\n  LAYOUT: 'layout',\n  POSITION: 'position',\n  MISC: 'misc',\n} as const;\n\nexport type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];\n\n// ============================================================================\n// Style-to-Chunk Lookup Map (O(1) categorization)\n// ============================================================================\n\n/**\n * Pre-computed map for O(1) style-to-chunk lookup.\n * Built once at module load time.\n */\nexport const STYLE_TO_CHUNK = new Map<string, ChunkName>();\n\n// Populate the lookup map\nfunction populateStyleToChunkMap() {\n  for (const style of APPEARANCE_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.APPEARANCE);\n  }\n  for (const style of FONT_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.FONT);\n  }\n  for (const style of DIMENSION_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DIMENSION);\n  }\n  for (const style of DISPLAY_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DISPLAY);\n  }\n  for (const style of LAYOUT_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.LAYOUT);\n  }\n  for (const style of POSITION_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.POSITION);\n  }\n}\n\n// Initialize at module load\npopulateStyleToChunkMap();\n\n// ============================================================================\n// Chunk Priority Order\n// ============================================================================\n\n/**\n * Chunk processing order. This ensures deterministic className allocation\n * regardless of style key order in the input.\n */\nconst CHUNK_ORDER: readonly string[] = [\n  CHUNK_NAMES.APPEARANCE,\n  CHUNK_NAMES.FONT,\n  CHUNK_NAMES.DIMENSION,\n  CHUNK_NAMES.DISPLAY,\n  CHUNK_NAMES.LAYOUT,\n  CHUNK_NAMES.POSITION,\n  CHUNK_NAMES.MISC,\n  CHUNK_NAMES.SUBCOMPONENTS,\n] as const;\n\n/**\n * Map from chunk name to its priority index for sorting.\n */\nconst _CHUNK_PRIORITY = new Map<string, number>(\n  CHUNK_ORDER.map((name, index) => [name, index]),\n);\n\n// ============================================================================\n// Chunk Info Interface\n// ============================================================================\n\nexport interface ChunkInfo {\n  /** Name of the chunk */\n  name: ChunkName | string;\n  /** Style keys belonging to this chunk */\n  styleKeys: string[];\n}\n\n// ============================================================================\n// Style Categorization\n// ============================================================================\n\n/**\n * Categorize style keys into chunks.\n *\n * Returns chunks in a deterministic order (by CHUNK_ORDER) regardless\n * of the order of keys in the input styles object.\n *\n * @param styles - The styles object to categorize\n * @returns Map of chunk name to array of style keys in that chunk (in priority order)\n */\nexport function categorizeStyleKeys(\n  styles: Record<string, unknown>,\n): Map<string, string[]> {\n  // First pass: collect keys into chunks (unordered)\n  const chunkData: Record<string, string[]> = {};\n  const keys = Object.keys(styles);\n\n  for (const key of keys) {\n    // Skip the $ helper key (used for selector combinators)\n    // Skip @keyframes and @properties (processed separately in useStyles)\n    // Skip recipe (resolved before pipeline by resolveRecipes)\n    if (\n      key === '$' ||\n      key === '@keyframes' ||\n      key === '@properties' ||\n      key === '@fontFace' ||\n      key === '@counterStyle' ||\n      key === 'recipe'\n    ) {\n      continue;\n    }\n\n    if (isSelector(key)) {\n      // All selectors go into the subcomponents chunk\n      if (!chunkData[CHUNK_NAMES.SUBCOMPONENTS]) {\n        chunkData[CHUNK_NAMES.SUBCOMPONENTS] = [];\n      }\n      chunkData[CHUNK_NAMES.SUBCOMPONENTS].push(key);\n    } else {\n      // Look up the chunk for this style, default to misc\n      const chunkName = STYLE_TO_CHUNK.get(key) ?? CHUNK_NAMES.MISC;\n      if (!chunkData[chunkName]) {\n        chunkData[chunkName] = [];\n      }\n      chunkData[chunkName].push(key);\n    }\n  }\n\n  // Second pass: build ordered Map based on CHUNK_ORDER\n  const orderedChunks = new Map<string, string[]>();\n\n  // Add chunks in priority order\n  for (const chunkName of CHUNK_ORDER) {\n    if (chunkData[chunkName] && chunkData[chunkName].length > 0) {\n      // Sort keys within chunk for consistent cache key generation\n      orderedChunks.set(chunkName, chunkData[chunkName].sort());\n    }\n  }\n\n  // Handle any unknown chunks (shouldn't happen, but be defensive)\n  for (const chunkName of Object.keys(chunkData)) {\n    if (!orderedChunks.has(chunkName)) {\n      orderedChunks.set(chunkName, chunkData[chunkName].sort());\n    }\n  }\n\n  return orderedChunks;\n}\n"],"mappings":"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"}
+{"version":3,"file":"definitions.js","names":[],"sources":["../../src/chunks/definitions.ts"],"sourcesContent":["/**\n * Style chunk definitions for CSS chunking optimization.\n *\n * Styles are grouped into chunks based on:\n * 1. Handler dependencies - styles that share a handler MUST be in the same chunk\n * 2. Logical grouping - related styles grouped for better cache reuse\n *\n * See STYLE_CHUNKING_SPEC.md for detailed rationale.\n *\n * ============================================================================\n * ⚠️  CRITICAL ARCHITECTURAL CONSTRAINT: NO CROSS-CHUNK HANDLER DEPENDENCIES\n * ============================================================================\n *\n * Style handlers declare their dependencies via `__lookupStyles` array.\n * This creates a dependency graph where handlers read multiple style props.\n *\n * **ALL styles in a handler's `__lookupStyles` MUST be in the SAME chunk.**\n *\n * Why this matters:\n * 1. Each chunk computes a cache key from ONLY its own style values\n * 2. If a handler reads a style from another chunk, that value isn't in the cache key\n * 3. Changing the cross-chunk style won't invalidate this chunk's cache\n * 4. Result: stale CSS output or incorrect cache hits\n *\n * Example of a violation:\n * ```\n * // flowStyle.__lookupStyles = ['display', 'flow']\n * // If 'display' is in DISPLAY chunk and 'flow' is in LAYOUT chunk:\n * // - User sets { display: 'grid', flow: 'column' }\n * // - LAYOUT chunk caches CSS with flow=column, display=grid\n * // - User changes to { display: 'flex', flow: 'column' }\n * // - LAYOUT chunk cache key unchanged (only has 'flow')\n * // - Returns stale CSS computed with display=grid!\n * ```\n *\n * Before adding/moving styles, verify:\n * 1. Find all handlers that use this style (grep for the style name in __lookupStyles)\n * 2. Ensure ALL styles from each handler's __lookupStyles are in the same chunk\n * ============================================================================\n */\n\nimport { isSelector } from '../pipeline';\n\n// ============================================================================\n// Chunk Style Lists\n// ============================================================================\n\n/**\n * Appearance chunk - visual styling with independent handlers\n */\nexport const APPEARANCE_CHUNK_STYLES = [\n  'fill', // fillStyle (independent)\n  'color', // colorStyle (independent)\n  'opacity', // independent\n  'border', // borderStyle (independent)\n  'radius', // radiusStyle (independent)\n  'outline', // outlineStyle: outline ↔ outlineOffset\n  'outlineOffset', // outlineStyle: outline ↔ outlineOffset\n  'shadow', // shadowStyle (independent)\n  'fade', // fadeStyle (independent)\n] as const;\n\n/**\n * Font chunk - typography styles\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ presetStyle: preset, fontSize, lineHeight, letterSpacing, textTransform,\n *    fontWeight, fontStyle, font\n */\nexport const FONT_CHUNK_STYLES = [\n  // All from presetStyle handler - MUST stay together\n  'preset',\n  'font',\n  'fontWeight',\n  'fontStyle',\n  'fontSize',\n  'lineHeight',\n  'letterSpacing',\n  'textTransform',\n  // Independent text styles grouped for cohesion\n  'fontFamily', // independent alias (logical grouping with font styles)\n  'textAlign',\n  'textDecoration',\n  'wordBreak',\n  'wordWrap',\n  'boldFontWeight',\n] as const;\n\n/**\n * Dimension chunk - sizing and spacing\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left, paddingBlock/Inline\n * ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left, marginBlock/Inline\n * ⚠️ widthStyle: width, minWidth, maxWidth\n * ⚠️ heightStyle: height, minHeight, maxHeight\n */\nexport const DIMENSION_CHUNK_STYLES = [\n  // All from paddingStyle handler - MUST stay together\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n  // All from marginStyle handler - MUST stay together\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n  // widthStyle handler - MUST stay together\n  'width',\n  'minWidth',\n  'maxWidth',\n  // heightStyle handler - MUST stay together\n  'height',\n  'minHeight',\n  'maxHeight',\n  'flexBasis',\n  'flexGrow',\n  'flexShrink',\n  'flex',\n] as const;\n\n/**\n * Display chunk - display mode, layout flow, text overflow, and scrollbar\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ displayStyle: display, hide, textOverflow, overflow, whiteSpace\n * ⚠️ flowStyle: display, flow\n * ⚠️ gapStyle: display, flow, gap\n * ⚠️ scrollbarStyle: scrollbar, overflow\n */\nexport const DISPLAY_CHUNK_STYLES = [\n  // displayStyle handler\n  'display',\n  'hide',\n  'textOverflow',\n  'overflow', // also used by scrollbarStyle\n  'whiteSpace',\n  // flowStyle handler (requires display)\n  'flow',\n  // gapStyle handler (requires display, flow)\n  'gap',\n  // scrollbarStyle handler (requires overflow)\n  'scrollbar',\n] as const;\n\n/**\n * Layout chunk - flex/grid alignment and grid templates\n *\n * Note: flow and gap are in DISPLAY chunk due to handler dependencies\n * (flowStyle and gapStyle both require 'display' prop).\n */\nexport const LAYOUT_CHUNK_STYLES = [\n  // Alignment styles (all independent handlers)\n  'placeItems',\n  'placeContent',\n  'alignItems',\n  'alignContent',\n  'justifyItems',\n  'justifyContent',\n  'align', // alignStyle (independent)\n  'justify', // justifyStyle (independent)\n  'place', // placeStyle (independent)\n  'columnGap',\n  'rowGap',\n  // Grid template styles\n  'gridColumns',\n  'gridRows',\n  'gridTemplate',\n  'gridAreas',\n  'gridAutoFlow',\n  'gridAutoColumns',\n  'gridAutoRows',\n] as const;\n\n/**\n * Position chunk - element positioning\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ insetStyle: inset, insetBlock, insetInline, top, right, bottom, left\n */\nexport const POSITION_CHUNK_STYLES = [\n  'position',\n  // All from insetStyle handler - MUST stay together\n  'inset',\n  'insetBlock',\n  'insetInline',\n  'top',\n  'right',\n  'bottom',\n  'left',\n  'zIndex',\n  'gridArea',\n  'gridColumn',\n  'gridRow',\n  'order',\n  'placeSelf',\n  'alignSelf',\n  'justifySelf',\n  'transform',\n  'transition',\n  'animation',\n] as const;\n\n// ============================================================================\n// Chunk Names\n// ============================================================================\n\nexport const CHUNK_NAMES = {\n  /** Special chunk for styles that cannot be split */\n  COMBINED: 'combined',\n  SUBCOMPONENTS: 'subcomponents',\n  APPEARANCE: 'appearance',\n  FONT: 'font',\n  DIMENSION: 'dimension',\n  DISPLAY: 'display',\n  LAYOUT: 'layout',\n  POSITION: 'position',\n  MISC: 'misc',\n} as const;\n\nexport type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];\n\n// ============================================================================\n// Style-to-Chunk Lookup Map (O(1) categorization)\n// ============================================================================\n\n/**\n * Pre-computed map for O(1) style-to-chunk lookup.\n * Built once at module load time.\n */\nexport const STYLE_TO_CHUNK = new Map<string, ChunkName>();\n\n// Populate the lookup map\nfunction populateStyleToChunkMap() {\n  for (const style of APPEARANCE_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.APPEARANCE);\n  }\n  for (const style of FONT_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.FONT);\n  }\n  for (const style of DIMENSION_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DIMENSION);\n  }\n  for (const style of DISPLAY_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DISPLAY);\n  }\n  for (const style of LAYOUT_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.LAYOUT);\n  }\n  for (const style of POSITION_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.POSITION);\n  }\n}\n\n// Initialize at module load\npopulateStyleToChunkMap();\n\n// ============================================================================\n// Chunk Priority Order\n// ============================================================================\n\n/**\n * Chunk processing order. This ensures deterministic className allocation\n * regardless of style key order in the input.\n */\nconst CHUNK_ORDER: readonly string[] = [\n  CHUNK_NAMES.APPEARANCE,\n  CHUNK_NAMES.FONT,\n  CHUNK_NAMES.DIMENSION,\n  CHUNK_NAMES.DISPLAY,\n  CHUNK_NAMES.LAYOUT,\n  CHUNK_NAMES.POSITION,\n  CHUNK_NAMES.MISC,\n  CHUNK_NAMES.SUBCOMPONENTS,\n] as const;\n\n/**\n * Map from chunk name to its priority index for sorting.\n */\nconst _CHUNK_PRIORITY = new Map<string, number>(\n  CHUNK_ORDER.map((name, index) => [name, index]),\n);\n\n// ============================================================================\n// Chunk Info Interface\n// ============================================================================\n\nexport interface ChunkInfo {\n  /** Name of the chunk */\n  name: ChunkName | string;\n  /** Style keys belonging to this chunk */\n  styleKeys: string[];\n}\n\n// ============================================================================\n// Style Categorization\n// ============================================================================\n\n/**\n * Categorize style keys into chunks.\n *\n * Returns chunks in a deterministic order (by CHUNK_ORDER) regardless\n * of the order of keys in the input styles object.\n *\n * @param styles - The styles object to categorize\n * @returns Map of chunk name to array of style keys in that chunk (in priority order)\n */\nexport function categorizeStyleKeys(\n  styles: Record<string, unknown>,\n): Map<string, string[]> {\n  // First pass: collect keys into chunks (unordered)\n  const chunkData: Record<string, string[]> = {};\n  const keys = Object.keys(styles);\n\n  for (const key of keys) {\n    // Skip the $ helper key (used for selector combinators)\n    // Skip @keyframes and @properties (processed separately in useStyles)\n    // Skip recipe (resolved before pipeline by resolveRecipes)\n    if (\n      key === '$' ||\n      key === '@keyframes' ||\n      key === '@properties' ||\n      key === '@fontFace' ||\n      key === '@counterStyle' ||\n      key === 'recipe'\n    ) {\n      continue;\n    }\n\n    if (isSelector(key)) {\n      // All selectors go into the subcomponents chunk\n      if (!chunkData[CHUNK_NAMES.SUBCOMPONENTS]) {\n        chunkData[CHUNK_NAMES.SUBCOMPONENTS] = [];\n      }\n      chunkData[CHUNK_NAMES.SUBCOMPONENTS].push(key);\n    } else {\n      // Look up the chunk for this style, default to misc\n      const chunkName = STYLE_TO_CHUNK.get(key) ?? CHUNK_NAMES.MISC;\n      if (!chunkData[chunkName]) {\n        chunkData[chunkName] = [];\n      }\n      chunkData[chunkName].push(key);\n    }\n  }\n\n  // Second pass: build ordered Map based on CHUNK_ORDER\n  const orderedChunks = new Map<string, string[]>();\n\n  // Add chunks in priority order\n  for (const chunkName of CHUNK_ORDER) {\n    if (chunkData[chunkName] && chunkData[chunkName].length > 0) {\n      // Sort keys within chunk for consistent cache key generation\n      orderedChunks.set(chunkName, chunkData[chunkName].sort());\n    }\n  }\n\n  // Handle any unknown chunks (shouldn't happen, but be defensive)\n  for (const chunkName of Object.keys(chunkData)) {\n    if (!orderedChunks.has(chunkName)) {\n      orderedChunks.set(chunkName, chunkData[chunkName].sort());\n    }\n  }\n\n  return orderedChunks;\n}\n"],"mappings":"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"}

package/dist/config.js

@@ -97,20 +97,18 @@ const INTERNAL_PROPERTIES = {
 		syntax: "<number>",
 		inherits: true,
 		initialValue: "700"
+	},
+	"$font-sans-fallback": {
+		syntax: "*",
+		inherits: true,
+		initialValue: "system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif"
+	},
+	"$font-mono-fallback": {
+		syntax: "*",
+		inherits: true,
+		initialValue: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
 	}
 };
-/**
-* Internal token defaults that cannot be expressed as CSS @property initial values
-* (e.g. font stacks, keyword colors). These are injected as :root CSS variables.
-* Consuming projects override them by setting their own tokens on :root.
-*
-* Keys are raw CSS custom property names (--name).
-*/
-const INTERNAL_TOKENS = {
-	"--font-sans": "system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif",
-	"--font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
-	"--border-color": "currentColor"
-};
 const GLOBAL_INJECTOR_KEY = "__TASTY_GLOBAL_INJECTOR__";
 /**
 * Detect if we're running in a test environment
@@ -152,14 +150,6 @@ function markStylesGenerated() {
 	stylesGenerated = true;
 	const injector = getGlobalInjector();
 	for (const [token, definition] of Object.entries(INTERNAL_PROPERTIES)) injector.property(token, definition);
-	const internalTokenEntries = Object.entries(INTERNAL_TOKENS);
-	if (internalTokenEntries.length > 0) {
-		const declarations = internalTokenEntries.map(([name, value]) => `${name}: ${value}`).join("; ");
-		injector.injectGlobal([{
-			selector: ":root",
-			declarations
-		}]);
-	}
 	if (globalProperties && Object.keys(globalProperties).length > 0) for (const [token, definition] of Object.entries(globalProperties)) injector.property(token, definition);
 	if (globalFontFace && Object.keys(globalFontFace).length > 0) for (const [family, input] of Object.entries(globalFontFace)) {
 		const descriptors = Array.isArray(input) ? input : [input];
@@ -510,5 +500,5 @@ function resetConfig() {
 }
 
 //#endregion
-export { INTERNAL_PROPERTIES, INTERNAL_TOKENS, configure, getConfig, getGlobalConfigTokens, getGlobalCounterStyle, getGlobalFontFace, getGlobalInjector, getGlobalKeyframes, getGlobalProperties, getGlobalRecipes, hasGlobalKeyframes, hasGlobalProperties, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, markStylesGenerated, resetConfig };
+export { INTERNAL_PROPERTIES, configure, getConfig, getGlobalConfigTokens, getGlobalCounterStyle, getGlobalFontFace, getGlobalInjector, getGlobalKeyframes, getGlobalProperties, getGlobalRecipes, hasGlobalKeyframes, hasGlobalProperties, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, markStylesGenerated, resetConfig };
 //# sourceMappingURL=config.js.map

package/dist/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":[],"sources":["../src/config.ts"],"sourcesContent":["/**\n * Tasty Configuration Module\n *\n * Centralizes all tasty configuration, including:\n * - Style injector settings (nonce, cleanup thresholds, etc.)\n * - Global predefined states for advanced state mapping\n * - stylesGenerated flag that locks configuration after first style generation\n *\n * Configuration must be done BEFORE any styles are generated.\n * After the first `inject()` call, configuration is locked and attempts to\n * reconfigure will emit a warning and be ignored.\n */\n\nimport { StyleInjector } from './injector/injector';\nimport { clearPipelineCache, isSelector, renderStyles } from './pipeline';\nimport { setGlobalPredefinedStates } from './states';\nimport {\n  normalizeHandlerDefinition,\n  registerHandler,\n  resetHandlers,\n} from './styles/predefined';\nimport { resetColorSpace, setColorSpace } from './utils/color-space';\nimport { isDevEnv } from './utils/is-dev-env';\nimport {\n  CUSTOM_UNITS,\n  getGlobalFuncs,\n  getGlobalParser,\n  normalizeColorTokenValue,\n  resetGlobalPredefinedTokens,\n  setGlobalPredefinedTokens,\n} from './utils/styles';\n\nimport type { ColorSpace } from './utils/color-space';\n\nimport type {\n  CounterStyleDescriptors,\n  FontFaceInput,\n  KeyframesSteps,\n  PropertyDefinition,\n} from './injector/types';\nimport type { StyleDetails, UnitHandler } from './parser/types';\nimport type { StyleResult } from './pipeline';\nimport type { TastyPlugin } from './plugins/types';\nimport type { RecipeStyles, ConfigTokens } from './styles/types';\nimport type { StyleHandlerDefinition } from './utils/styles';\n\n/**\n * Configuration options for the Tasty style system\n */\nexport interface TastyConfig {\n  /** CSP nonce for style elements */\n  nonce?: string;\n  /** Maximum rules per stylesheet (default: 8192) */\n  maxRulesPerSheet?: number;\n  /** Threshold for bulk cleanup of unused styles (default: 500) */\n  unusedStylesThreshold?: number;\n  /** Delay before bulk cleanup in ms, ignored if idleCleanup is true (default: 5000) */\n  bulkCleanupDelay?: number;\n  /** Use requestIdleCallback for cleanup when available (default: true) */\n  idleCleanup?: boolean;\n  /** Force text injection mode, auto-detected in test environments (default: auto) */\n  forceTextInjection?: boolean;\n  /** Enable development mode features: performance metrics and debug info (default: auto) */\n  devMode?: boolean;\n  /**\n   * Ratio of unused styles to delete per bulk cleanup run (0..1).\n   * Defaults to 0.5 (oldest half) to reduce risk of removing styles\n   * that may be restored shortly after being marked unused.\n   */\n  bulkCleanupBatchRatio?: number;\n  /**\n   * Minimum age (in ms) a style must remain unused before eligible for deletion.\n   * Helps avoid races during rapid mount/unmount cycles. Default: 10000ms.\n   */\n  unusedStylesMinAgeMs?: number;\n  /**\n   * Global predefined states for advanced state mapping.\n   * These are state aliases that can be used in any component.\n   * Example: { '@mobile': '@media(w < 920px)', '@dark': '@root(theme=dark)' }\n   */\n  states?: Record<string, string>;\n  /**\n   * Parser LRU cache size (default: 1000).\n   * Larger values improve performance for apps with many unique style values.\n   */\n  parserCacheSize?: number;\n  /**\n   * Custom units for the style parser (merged with built-in units).\n   * Units transform numeric values like `2x` → `calc(2 * var(--gap))`.\n   * @example { em: 'em', vw: 'vw', custom: (n) => `${n * 10}px` }\n   */\n  units?: Record<string, string | UnitHandler>;\n  /**\n   * Custom functions for the style parser (merged with existing).\n   * Functions process parsed style groups and return CSS values.\n   * @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }\n   */\n  funcs?: Record<string, (groups: StyleDetails[]) => string>;\n  /**\n   * Color space used for decomposed color token companion variables.\n   * Controls the CSS function and suffix for alpha composition.\n   *\n   * - `'rgb'`   — suffix `-rgb`, e.g. `rgb(var(--name-color-rgb) / .5)`\n   * - `'hsl'`   — suffix `-hsl`, e.g. `hsl(var(--name-color-hsl) / .5)`\n   * - `'oklch'` — suffix `-oklch`, e.g. `oklch(var(--name-color-oklch) / .5)`\n   *\n   * @default 'oklch'\n   */\n  colorSpace?: ColorSpace;\n  /**\n   * Automatically infer and register CSS @property declarations\n   * from custom property values found in styles, keyframes, and global config.\n   * Covers all types: \\<color\\>, \\<number\\>, \\<length\\>, \\<angle\\>, \\<percentage\\>, \\<time\\>.\n   * When false, only explicitly declared @properties are registered.\n   * @default true\n   */\n  autoPropertyTypes?: boolean;\n  /**\n   * Plugins that extend tasty with custom functions, units, or states.\n   * Plugins are processed in order, with later plugins overriding earlier ones.\n   * @example\n   * ```ts\n   * import { okhslPlugin } from '@tenphi/tasty';\n   *\n   * configure({\n   *   plugins: [okhslPlugin()],\n   * });\n   * ```\n   */\n  plugins?: TastyPlugin[];\n  /**\n   * Global keyframes definitions that can be referenced by animation names in styles.\n   * Keys are animation names, values are keyframes step definitions.\n   * Keyframes are only injected when actually used in styles.\n   * @example\n   * ```ts\n   * configure({\n   *   keyframes: {\n   *     fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } },\n   *     pulse: { '0%, 100%': { transform: 'scale(1)' }, '50%': { transform: 'scale(1.05)' } },\n   *   },\n   * });\n   * ```\n   */\n  keyframes?: Record<string, KeyframesSteps>;\n  /**\n   * Global CSS @property definitions for custom properties.\n   * Keys use tasty token syntax ($name for properties, #name for colors).\n   * Properties are only injected when the component using them is rendered.\n   *\n   * For color tokens (#name), `syntax: '<color>'` is auto-set and\n   * `initialValue` defaults to `'transparent'` if not specified.\n   *\n   * @example\n   * ```ts\n   * configure({\n   *   properties: {\n   *     '$rotation': { syntax: '<angle>', initialValue: '0deg' },\n   *     '$scale': { syntax: '<number>', inherits: false, initialValue: 1 },\n   *     '#accent': { initialValue: 'purple' }, // syntax: '<color>' auto-set\n   *   },\n   * });\n   *\n   * // Now use in styles - properties are registered when component renders:\n   * const Spinner = tasty({\n   *   styles: {\n   *     transform: 'rotate($rotation)',\n   *     transition: '$$rotation 0.3s', // outputs: --rotation 0.3s\n   *   },\n   * });\n   * ```\n   */\n  properties?: Record<string, PropertyDefinition>;\n  /**\n   * Global @font-face definitions.\n   * Keys are font-family names, values are descriptors or arrays of descriptors\n   * (for multiple weights/styles of the same family).\n   * Injected eagerly when styles are first generated.\n   * @example\n   * ```ts\n   * configure({\n   *   fontFace: {\n   *     'Brand Sans': [\n   *       { src: 'url(\"/fonts/brand-regular.woff2\") format(\"woff2\")', fontWeight: 400, fontDisplay: 'swap' },\n   *       { src: 'url(\"/fonts/brand-bold.woff2\") format(\"woff2\")', fontWeight: 700, fontDisplay: 'swap' },\n   *     ],\n   *     Icons: { src: 'url(\"/fonts/icons.woff2\") format(\"woff2\")', fontDisplay: 'block' },\n   *   },\n   * });\n   * ```\n   */\n  fontFace?: Record<string, FontFaceInput>;\n  /**\n   * Global @counter-style definitions.\n   * Keys are counter-style names, values are descriptor objects.\n   * Injected eagerly when styles are first generated.\n   * @example\n   * ```ts\n   * configure({\n   *   counterStyle: {\n   *     thumbs: { system: 'cyclic', symbols: '\"👍\"', suffix: '\" \"' },\n   *   },\n   * });\n   * ```\n   */\n  counterStyle?: Record<string, CounterStyleDescriptors>;\n  /**\n   * Custom style handlers that transform style properties into CSS declarations.\n   * Handlers replace built-in handlers for the same style name.\n   * @example\n   * ```ts\n   * import { styleHandlers } from '@tenphi/tasty';\n   *\n   * configure({\n   *   handlers: {\n   *     // Override fill with custom behavior\n   *     fill: ({ fill }) => {\n   *       if (fill?.startsWith('gradient:')) {\n   *         return { background: fill.slice(9) };\n   *       }\n   *       return styleHandlers.fill({ fill });\n   *     },\n   *     // Add new custom style\n   *     elevation: ({ elevation }) => {\n   *       const level = parseInt(elevation) || 1;\n   *       return {\n   *         'box-shadow': `0 ${level * 2}px ${level * 4}px rgba(0,0,0,0.1)`,\n   *         'z-index': String(level * 100),\n   *       };\n   *     },\n   *   },\n   * });\n   * ```\n   */\n  handlers?: Record<string, StyleHandlerDefinition>;\n  /**\n   * Design tokens injected as CSS custom properties on `:root`.\n   * Values are parsed through the Tasty DSL. Supports state maps\n   * for responsive/theme-aware tokens.\n   *\n   * - `$name` keys become `--name` CSS custom properties\n   * - `#name` keys become `--name-color` and `--name-color-{colorSpace}` properties\n   *\n   * Tokens are injected once when the first style is rendered.\n   *\n   * @example\n   * ```ts\n   * configure({\n   *   tokens: {\n   *     '$gap': '4px',\n   *     '#primary': {\n   *       '': '#purple',\n   *       '@dark': '#light-purple',\n   *     },\n   *   },\n   * });\n   * ```\n   */\n  tokens?: ConfigTokens;\n  /**\n   * Predefined tokens that are replaced during style parsing (parse-time substitution).\n   * Use `$name` for custom properties and `#name` for color tokens.\n   * Values are substituted inline before CSS generation, unlike `tokens` which\n   * inject CSS custom properties on `:root`.\n   *\n   * For color tokens (#name), boolean `true` is converted to `transparent`.\n   *\n   * @example\n   * ```ts\n   * configure({\n   *   replaceTokens: {\n   *     $spacing: '2x',\n   *     '#accent': '#purple',\n   *     '#overlay': true, // → transparent\n   *   },\n   * });\n   *\n   * // Now use in styles - tokens are replaced at parse time:\n   * const Card = tasty({\n   *   styles: {\n   *     padding: '$spacing',  // → calc(2 * var(--gap))\n   *     fill: '#accent',      // → var(--purple-color)\n   *   },\n   * });\n   * ```\n   */\n  replaceTokens?: Record<`$${string}`, string | number | boolean> &\n    Record<`#${string}`, string | number | boolean>;\n  /**\n   * Predefined style recipes -- named style bundles that can be applied via `recipe` style property.\n   * Recipe values are flat tasty styles (no sub-element keys). They may contain base styles,\n   * tokens (`$name`/`#name` definitions), local states, `@keyframes`, and `@properties`.\n   *\n   * Components reference recipes via: `recipe: 'name1 name2'` in their styles.\n   * Use `/` to separate base recipes from post recipes: `recipe: 'base1 base2 / post1'`.\n   * Use `none` to skip base recipes: `recipe: 'none / post1'`.\n   * Resolution order: `base_recipes → component styles → post_recipes`.\n   *\n   * Recipes cannot reference other recipes.\n   *\n   * @example\n   * ```ts\n   * configure({\n   *   recipes: {\n   *     card: { padding: '4x', fill: '#surface', radius: '1r', border: true },\n   *     elevated: { shadow: '2x 2x 4x #shadow' },\n   *   },\n   * });\n   *\n   * // Usage in styles:\n   * const Card = tasty({\n   *   styles: {\n   *     recipe: 'card elevated',\n   *     color: '#text', // Overrides recipe values\n   *   },\n   * });\n   * ```\n   */\n  recipes?: Record<string, RecipeStyles>;\n}\n\n// Warnings tracking to avoid duplicates\nconst emittedWarnings = new Set<string>();\n\nconst devMode = isDevEnv();\n\n/**\n * Emit a warning only once\n */\nfunction warnOnce(key: string, message: string): void {\n  if (devMode && !emittedWarnings.has(key)) {\n    emittedWarnings.add(key);\n    console.warn(message);\n  }\n}\n\n// ============================================================================\n// Configuration State\n// ============================================================================\n\n// Track whether styles have been generated (locks configuration)\nlet stylesGenerated = false;\n\n// Current configuration (null until first configure() or auto-configured on first use)\nlet currentConfig: TastyConfig | null = null;\n\n// Global keyframes storage (null = no keyframes configured, empty object checked via hasGlobalKeyframes)\nlet globalKeyframes: Record<string, KeyframesSteps> | null = null;\n\n// Global font-face storage (null = no font faces configured)\nlet globalFontFace: Record<string, FontFaceInput> | null = null;\n\n// Global counter-style storage (null = no counter styles configured)\nlet globalCounterStyle: Record<string, CounterStyleDescriptors> | null = null;\n\n// Global properties storage (null = no properties configured)\nlet globalProperties: Record<string, PropertyDefinition> | null = null;\n\n// Global recipes storage (null = no recipes configured)\nlet globalRecipes: Record<string, RecipeStyles> | null = null;\n\n// Global token styles storage (injected as :root CSS custom properties)\nlet globalConfigTokens: ConfigTokens | null = null;\n\n/**\n * Internal properties required by tasty core features.\n * These are always injected when styles are first generated.\n * Keys use tasty token syntax (#name for colors, $name for other properties).\n *\n * For properties with CSS @property-compatible types (length, time, number, color),\n * an `initialValue` is provided so the property works even without a project-level token.\n */\nexport const INTERNAL_PROPERTIES: Record<string, PropertyDefinition> = {\n  // Used by dual-fill feature to enable CSS transitions on the second fill color\n  '#tasty-second-fill': {\n    inherits: false,\n    initialValue: 'transparent',\n  },\n  // Current color context variable (set by the color style handler).\n  '#current': {\n    inherits: true,\n    initialValue: 'transparent',\n  },\n  // White and black are fundamental colors that need explicit initial values.\n  '#white': {\n    inherits: true,\n    initialValue: 'rgb(255 255 255)',\n  },\n  '#black': {\n    inherits: true,\n    initialValue: 'rgb(0 0 0)',\n  },\n\n  // ---- Core design tokens used by style handlers ----\n  // These provide sensible defaults so tasty works standalone without a design system.\n  // Consuming projects (e.g. uikit) override these by defining tokens on :root.\n\n  $gap: {\n    syntax: '<length>',\n    inherits: true,\n    initialValue: '4px',\n  },\n  $radius: {\n    syntax: '<length>',\n    inherits: true,\n    initialValue: '6px',\n  },\n  '$border-width': {\n    syntax: '<length>',\n    inherits: true,\n    initialValue: '1px',\n  },\n  '$outline-width': {\n    syntax: '<length>',\n    inherits: true,\n    initialValue: '3px',\n  },\n  $transition: {\n    syntax: '<time>',\n    inherits: true,\n    initialValue: '80ms',\n  },\n  // Used by radius.ts for `radius=\"leaf\"` modifier\n  '$sharp-radius': {\n    syntax: '<length>',\n    inherits: true,\n    initialValue: '0px',\n  },\n  // Used by preset.ts for `preset=\"... strong\"`\n  '$bold-font-weight': {\n    syntax: '<number>',\n    inherits: true,\n    initialValue: '700',\n  },\n};\n\n/**\n * Internal token defaults that cannot be expressed as CSS @property initial values\n * (e.g. font stacks, keyword colors). These are injected as :root CSS variables.\n * Consuming projects override them by setting their own tokens on :root.\n *\n * Keys are raw CSS custom property names (--name).\n */\nexport const INTERNAL_TOKENS: Record<string, string> = {\n  '--font-sans':\n    'system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif',\n  '--font-mono':\n    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\n  // Default border color to the element's current text color\n  '--border-color': 'currentColor',\n};\n\n// Global injector instance key\nconst GLOBAL_INJECTOR_KEY = '__TASTY_GLOBAL_INJECTOR__';\n\ninterface TastyGlobalStorage {\n  [GLOBAL_INJECTOR_KEY]?: StyleInjector;\n}\n\ndeclare global {\n  interface Window {\n    [GLOBAL_INJECTOR_KEY]?: StyleInjector;\n  }\n\n  var __TASTY_GLOBAL_INJECTOR__: StyleInjector | undefined;\n}\n\n/**\n * Detect if we're running in a test environment\n */\nexport function isTestEnvironment(): boolean {\n  // Check Node.js environment\n  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n    return true;\n  }\n\n  // Check for test runner globals (safely)\n  if (typeof global !== 'undefined') {\n    const g = global as unknown as Record<string, unknown>;\n    if (g.vi || g.jest || g.expect || g.describe || g.it) {\n      return true;\n    }\n  }\n\n  // Check for jsdom environment (common in tests)\n  if (\n    typeof window !== 'undefined' &&\n    window.navigator?.userAgent?.includes('jsdom')\n  ) {\n    return true;\n  }\n\n  // Check for other test runners\n  if (typeof globalThis !== 'undefined') {\n    const gt = globalThis as unknown as Record<string, unknown>;\n    if (gt.vitest || gt.mocha) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/**\n * Create default configuration with optional test environment detection\n */\nfunction createDefaultConfig(isTest?: boolean): TastyConfig {\n  return {\n    maxRulesPerSheet: 8192,\n    unusedStylesThreshold: 500,\n    bulkCleanupDelay: 5000,\n    idleCleanup: true,\n    forceTextInjection: isTest ?? false,\n    devMode: isDevEnv(),\n    bulkCleanupBatchRatio: 0.5,\n    unusedStylesMinAgeMs: 10000,\n  };\n}\n\n// ============================================================================\n// stylesGenerated Flag Management\n// ============================================================================\n\n/**\n * Mark that styles have been generated (called by injector on first inject)\n * This locks the configuration - no further changes allowed.\n * Also injects internal and global properties.\n */\nexport function markStylesGenerated(): void {\n  if (stylesGenerated) return; // Already marked, skip\n\n  stylesGenerated = true;\n\n  const injector = getGlobalInjector();\n\n  // Inject internal properties required by tasty core features\n  for (const [token, definition] of Object.entries(INTERNAL_PROPERTIES)) {\n    injector.property(token, definition);\n  }\n\n  // Inject internal token defaults as :root CSS variables.\n  // Use injectGlobal (not injectRawCSS) so the rule goes through the same\n  // injection path as all other tasty styles (consistent in both DOM and text/test mode).\n  const internalTokenEntries = Object.entries(INTERNAL_TOKENS);\n  if (internalTokenEntries.length > 0) {\n    const declarations = internalTokenEntries\n      .map(([name, value]) => `${name}: ${value}`)\n      .join('; ');\n    injector.injectGlobal([{ selector: ':root', declarations }]);\n  }\n\n  // Inject global properties if any were configured\n  // Properties are permanent and only need to be injected once\n  if (globalProperties && Object.keys(globalProperties).length > 0) {\n    for (const [token, definition] of Object.entries(globalProperties)) {\n      injector.property(token, definition);\n    }\n  }\n\n  // Inject global @font-face rules (eagerly — fonts should be available before render)\n  if (globalFontFace && Object.keys(globalFontFace).length > 0) {\n    for (const [family, input] of Object.entries(globalFontFace)) {\n      const descriptors = Array.isArray(input) ? input : [input];\n      for (const desc of descriptors) {\n        injector.fontFace(family, desc);\n      }\n    }\n  }\n\n  // Inject global @counter-style rules (eagerly)\n  if (globalCounterStyle && Object.keys(globalCounterStyle).length > 0) {\n    for (const [name, descriptors] of Object.entries(globalCounterStyle)) {\n      injector.counterStyle(name, descriptors);\n    }\n  }\n\n  // Inject configured tokens as :root CSS custom properties\n  if (globalConfigTokens && Object.keys(globalConfigTokens).length > 0) {\n    const tokenRules = renderStyles(\n      globalConfigTokens,\n      ':root',\n    ) as StyleResult[];\n    if (tokenRules.length > 0) {\n      injector.injectGlobal(tokenRules);\n    }\n  }\n}\n\n/**\n * Check if styles have been generated (configuration is locked)\n */\nexport function hasStylesGenerated(): boolean {\n  return stylesGenerated;\n}\n\n/**\n * Reset styles generated flag (for testing only)\n */\nexport function resetStylesGenerated(): void {\n  stylesGenerated = false;\n  emittedWarnings.clear();\n}\n\n// ============================================================================\n// Global Keyframes Management\n// ============================================================================\n\nlet _hasGlobalKeyframes = false;\n\n/**\n * Check if any global keyframes are configured.\n * Uses a pre-computed flag to avoid Object.keys() allocation on every call.\n */\nexport function hasGlobalKeyframes(): boolean {\n  return _hasGlobalKeyframes;\n}\n\n/**\n * Get global keyframes configuration.\n * Returns null if no keyframes configured (fast path for zero-overhead).\n */\nexport function getGlobalKeyframes(): Record<string, KeyframesSteps> | null {\n  return globalKeyframes;\n}\n\n/**\n * Set global keyframes (called from configure).\n * Internal use only.\n */\nfunction setGlobalKeyframes(keyframes: Record<string, KeyframesSteps>): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'keyframes-after-styles',\n      `[Tasty] Cannot update keyframes after styles have been generated.\\n` +\n        `The new keyframes will be ignored.`,\n    );\n    return;\n  }\n  globalKeyframes = keyframes;\n  _hasGlobalKeyframes = Object.keys(keyframes).length > 0;\n}\n\n// ============================================================================\n// Global Properties Management\n// ============================================================================\n\n/**\n * Check if any global properties are configured.\n * Fast path: returns false if no properties were ever set.\n */\nexport function hasGlobalProperties(): boolean {\n  return globalProperties !== null && Object.keys(globalProperties).length > 0;\n}\n\n/**\n * Get global properties configuration.\n * Returns null if no properties configured (fast path for zero-overhead).\n */\nexport function getGlobalProperties(): Record<\n  string,\n  PropertyDefinition\n> | null {\n  return globalProperties;\n}\n\n/**\n * Set global properties (called from configure).\n * Internal use only.\n */\nfunction setGlobalProperties(\n  properties: Record<string, PropertyDefinition>,\n): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'properties-after-styles',\n      `[Tasty] Cannot update properties after styles have been generated.\\n` +\n        `The new properties will be ignored.`,\n    );\n    return;\n  }\n  globalProperties = properties;\n}\n\n// ============================================================================\n// Global Font Face Management\n// ============================================================================\n\n/**\n * Get global font-face configuration.\n * Returns null if no font faces configured.\n */\nexport function getGlobalFontFace(): Record<string, FontFaceInput> | null {\n  return globalFontFace;\n}\n\n/**\n * Set global font faces (called from configure).\n * Internal use only.\n */\nfunction setGlobalFontFace(fontFace: Record<string, FontFaceInput>): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'fontface-after-styles',\n      `[Tasty] Cannot update fontFace after styles have been generated.\\n` +\n        `The new font faces will be ignored.`,\n    );\n    return;\n  }\n  globalFontFace = fontFace;\n}\n\n// ============================================================================\n// Global Counter Style Management\n// ============================================================================\n\n/**\n * Get global counter-style configuration.\n * Returns null if no counter styles configured.\n */\nexport function getGlobalCounterStyle(): Record<\n  string,\n  CounterStyleDescriptors\n> | null {\n  return globalCounterStyle;\n}\n\n/**\n * Set global counter styles (called from configure).\n * Internal use only.\n */\nfunction setGlobalCounterStyle(\n  counterStyle: Record<string, CounterStyleDescriptors>,\n): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'counterstyle-after-styles',\n      `[Tasty] Cannot update counterStyle after styles have been generated.\\n` +\n        `The new counter styles will be ignored.`,\n    );\n    return;\n  }\n  globalCounterStyle = counterStyle;\n}\n\n// ============================================================================\n// Global Recipes Management\n// ============================================================================\n\n/**\n * Check if any global recipes are configured.\n * Fast path: returns false if no recipes were ever set.\n */\nexport function hasGlobalRecipes(): boolean {\n  return globalRecipes !== null && Object.keys(globalRecipes).length > 0;\n}\n\n/**\n * Get global recipes configuration.\n * Returns null if no recipes configured (fast path for zero-overhead).\n */\nexport function getGlobalRecipes(): Record<string, RecipeStyles> | null {\n  return globalRecipes;\n}\n\n/**\n * Set global recipes (called from configure).\n * Internal use only.\n */\nfunction setGlobalRecipes(recipes: Record<string, RecipeStyles>): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'recipes-after-styles',\n      `[Tasty] Cannot update recipes after styles have been generated.\\n` +\n        `The new recipes will be ignored.`,\n    );\n    return;\n  }\n\n  // Dev-mode validation\n  if (devMode) {\n    for (const [name, recipeStyles] of Object.entries(recipes)) {\n      if (name === 'none') {\n        warnOnce(\n          'recipe-reserved-none',\n          `[Tasty] Recipe name \"none\" is reserved. ` +\n            `It is used as a keyword meaning \"no base recipes\" ` +\n            `(e.g. recipe: 'none / post-recipe'). ` +\n            `Choose a different name for your recipe.`,\n        );\n      }\n\n      for (const key of Object.keys(recipeStyles)) {\n        if (isSelector(key)) {\n          warnOnce(\n            `recipe-selector-${name}-${key}`,\n            `[Tasty] Recipe \"${name}\" contains sub-element key \"${key}\". ` +\n              `Recipes must be flat styles without sub-element keys. ` +\n              `Remove the sub-element key from the recipe definition.`,\n          );\n        }\n        if (key === 'recipe') {\n          warnOnce(\n            `recipe-recursive-${name}`,\n            `[Tasty] Recipe \"${name}\" contains a \"recipe\" key. ` +\n              `Recipes cannot reference other recipes. ` +\n              `Use space-separated names for composition: recipe: 'base elevated'.`,\n          );\n        }\n      }\n    }\n  }\n\n  globalRecipes = recipes;\n}\n\n// ============================================================================\n// Global Token Styles Management\n// ============================================================================\n\n/**\n * Get global token styles for :root injection.\n * Returns null if no tokens configured.\n */\nexport function getGlobalConfigTokens(): ConfigTokens | null {\n  return globalConfigTokens;\n}\n\n/**\n * Set global token styles (called from configure).\n * Internal use only.\n */\nfunction setGlobalConfigTokens(styles: ConfigTokens): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'tokens-after-styles',\n      `[Tasty] Cannot update tokens after styles have been generated.\\n` +\n        `The new tokens will be ignored.`,\n    );\n    return;\n  }\n  globalConfigTokens = globalConfigTokens\n    ? { ...globalConfigTokens, ...styles }\n    : styles;\n}\n\n/**\n * Check if configuration is locked (styles have been generated)\n */\nexport function isConfigLocked(): boolean {\n  return stylesGenerated;\n}\n\n// ============================================================================\n// Configuration API\n// ============================================================================\n\n/**\n * Configure the Tasty style system.\n *\n * Must be called BEFORE any styles are generated (before first render that uses tasty).\n * After styles are generated, configuration is locked and calls to configure() will\n * emit a warning and be ignored.\n *\n * @example\n * ```ts\n * import { configure } from '@tenphi/tasty';\n *\n * // Configure before app renders\n * configure({\n *   nonce: 'abc123',\n *   states: {\n *     '@mobile': '@media(w < 768px)',\n *     '@dark': '@root(theme=dark)',\n *   },\n * });\n * ```\n */\nexport function configure(config: Partial<TastyConfig> = {}): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'configure-after-styles',\n      `[Tasty] Cannot call configure() after styles have been generated.\\n` +\n        `Configuration must be done before the first render. The configuration will be ignored.`,\n    );\n    return;\n  }\n\n  // Collect merged values from plugins first, then override with direct config\n  let mergedStates: Record<string, string> = {};\n  let mergedUnits: Record<string, string | UnitHandler> = {};\n  let mergedFuncs: Record<string, (groups: StyleDetails[]) => string> = {};\n  let mergedHandlers: Record<string, StyleHandlerDefinition> = {};\n  let mergedReplaceTokens: Record<string, string | number | boolean> = {};\n  let mergedConfigTokens: ConfigTokens = {} as ConfigTokens;\n  let mergedRecipes: Record<string, RecipeStyles> = {};\n\n  // Process plugins in order\n  if (config.plugins) {\n    for (const plugin of config.plugins) {\n      if (plugin.states) {\n        mergedStates = { ...mergedStates, ...plugin.states };\n      }\n      if (plugin.units) {\n        mergedUnits = { ...mergedUnits, ...plugin.units };\n      }\n      if (plugin.funcs) {\n        mergedFuncs = { ...mergedFuncs, ...plugin.funcs };\n      }\n      if (plugin.handlers) {\n        mergedHandlers = { ...mergedHandlers, ...plugin.handlers };\n      }\n      if (plugin.replaceTokens) {\n        mergedReplaceTokens = {\n          ...mergedReplaceTokens,\n          ...plugin.replaceTokens,\n        };\n      }\n      if (plugin.tokens) {\n        mergedConfigTokens = { ...mergedConfigTokens, ...plugin.tokens };\n      }\n      if (plugin.recipes) {\n        mergedRecipes = { ...mergedRecipes, ...plugin.recipes };\n      }\n    }\n  }\n\n  // Direct config overrides plugins\n  if (config.states) {\n    mergedStates = { ...mergedStates, ...config.states };\n  }\n  if (config.units) {\n    mergedUnits = { ...mergedUnits, ...config.units };\n  }\n  if (config.funcs) {\n    mergedFuncs = { ...mergedFuncs, ...config.funcs };\n  }\n  if (config.handlers) {\n    mergedHandlers = { ...mergedHandlers, ...config.handlers };\n  }\n  if (config.replaceTokens) {\n    mergedReplaceTokens = { ...mergedReplaceTokens, ...config.replaceTokens };\n  }\n  if (config.tokens) {\n    mergedConfigTokens = { ...mergedConfigTokens, ...config.tokens };\n  }\n  if (config.recipes) {\n    mergedRecipes = { ...mergedRecipes, ...config.recipes };\n  }\n\n  // Warn on tokens/replaceTokens key conflicts\n  if (devMode) {\n    const tokenKeys = new Set(Object.keys(mergedConfigTokens));\n    for (const key of Object.keys(mergedReplaceTokens)) {\n      if (tokenKeys.has(key)) {\n        warnOnce(\n          `token-conflict-${key}`,\n          `[Tasty] Token \"${key}\" is defined in both \\`tokens\\` and \\`replaceTokens\\`. ` +\n            `\\`replaceTokens\\` performs parse-time substitution, so the \\`tokens\\` ` +\n            `CSS custom property will be injected but never used by Tasty styles. ` +\n            `Remove it from one of the two.`,\n        );\n      }\n    }\n  }\n\n  // Handle color space (must be set before any token processing)\n  if (config.colorSpace) {\n    setColorSpace(config.colorSpace);\n    // Color space affects parser output (e.g. #name.5 → oklch(...) vs rgb(...))\n    getGlobalParser().clearCache();\n  }\n\n  // Handle predefined states\n  if (Object.keys(mergedStates).length > 0) {\n    setGlobalPredefinedStates(mergedStates);\n  }\n\n  // Handle parser configuration (merge semantics - extend, not replace)\n  const parser = getGlobalParser();\n\n  if (config.parserCacheSize !== undefined) {\n    parser.updateOptions({ cacheSize: config.parserCacheSize });\n  }\n\n  if (Object.keys(mergedUnits).length > 0) {\n    // Merge with existing units\n    const currentUnits = parser.getUnits() ?? CUSTOM_UNITS;\n    parser.setUnits({ ...currentUnits, ...mergedUnits });\n  }\n\n  if (Object.keys(mergedFuncs).length > 0) {\n    // Merge with existing funcs\n    const currentFuncs = getGlobalFuncs();\n    const finalFuncs = { ...currentFuncs, ...mergedFuncs };\n    parser.setFuncs(finalFuncs);\n    // Also update the global registry so customFunc() continues to work\n    Object.assign(currentFuncs, mergedFuncs);\n  }\n\n  // Handle keyframes\n  if (config.keyframes) {\n    setGlobalKeyframes(config.keyframes);\n  }\n\n  // Handle properties\n  if (config.properties) {\n    setGlobalProperties(config.properties);\n  }\n\n  // Handle font faces\n  if (config.fontFace) {\n    setGlobalFontFace(config.fontFace);\n  }\n\n  // Handle counter styles\n  if (config.counterStyle) {\n    setGlobalCounterStyle(config.counterStyle);\n  }\n\n  // Handle custom handlers\n  if (Object.keys(mergedHandlers).length > 0) {\n    for (const [name, definition] of Object.entries(mergedHandlers)) {\n      const handler = normalizeHandlerDefinition(name, definition);\n      registerHandler(handler);\n    }\n  }\n\n  // Handle replaceTokens (parse-time substitution)\n  if (Object.keys(mergedReplaceTokens).length > 0) {\n    const processedTokens: Record<string, string> = {};\n    for (const [key, value] of Object.entries(mergedReplaceTokens)) {\n      if (key.startsWith('#')) {\n        const normalized = normalizeColorTokenValue(value);\n        if (normalized === null) continue;\n        processedTokens[key] = String(normalized);\n      } else if (value === false) {\n        continue;\n      } else {\n        processedTokens[key] = String(value);\n      }\n    }\n    setGlobalPredefinedTokens(processedTokens);\n  }\n\n  // Handle tokens (CSS custom properties on :root)\n  if (Object.keys(mergedConfigTokens).length > 0) {\n    setGlobalConfigTokens(mergedConfigTokens);\n  }\n\n  // Handle recipes\n  if (Object.keys(mergedRecipes).length > 0) {\n    setGlobalRecipes(mergedRecipes);\n  }\n\n  const {\n    states: _states,\n    parserCacheSize: _parserCacheSize,\n    units: _units,\n    funcs: _funcs,\n    plugins: _plugins,\n    keyframes: _keyframes,\n    properties: _properties,\n    fontFace: _fontFace,\n    counterStyle: _counterStyle,\n    handlers: _handlers,\n    tokens: _tokens,\n    replaceTokens: _replaceTokens,\n    recipes: _recipes,\n    colorSpace: _colorSpace,\n    ...injectorConfig\n  } = config;\n\n  const fullConfig: TastyConfig = {\n    ...createDefaultConfig(),\n    ...currentConfig,\n    ...injectorConfig,\n  };\n\n  // Store the config\n  currentConfig = fullConfig;\n\n  // Create/replace the global injector\n  const storage: TastyGlobalStorage =\n    typeof window !== 'undefined' ? window : globalThis;\n  storage[GLOBAL_INJECTOR_KEY] = new StyleInjector(fullConfig);\n}\n\n/**\n * Get the current configuration.\n * If not configured, returns default configuration.\n */\nexport function getConfig(): TastyConfig {\n  if (!currentConfig) {\n    currentConfig = createDefaultConfig(isTestEnvironment());\n  }\n  return currentConfig;\n}\n\n/**\n * Get the global injector instance.\n * Auto-configures with defaults if not already configured.\n */\nexport function getGlobalInjector(): StyleInjector {\n  const storage: TastyGlobalStorage =\n    typeof window !== 'undefined' ? window : globalThis;\n\n  if (!storage[GLOBAL_INJECTOR_KEY]) {\n    configure();\n  }\n\n  return storage[GLOBAL_INJECTOR_KEY]!;\n}\n\n/**\n * Reset configuration (for testing only).\n * Clears the global injector and allows reconfiguration.\n */\nexport function resetConfig(): void {\n  stylesGenerated = false;\n  currentConfig = null;\n  globalKeyframes = null;\n  _hasGlobalKeyframes = false;\n  globalProperties = null;\n  globalFontFace = null;\n  globalCounterStyle = null;\n  globalRecipes = null;\n  globalConfigTokens = null;\n  resetGlobalPredefinedTokens();\n  resetHandlers();\n  resetColorSpace();\n  clearPipelineCache();\n  emittedWarnings.clear();\n\n  const storage: TastyGlobalStorage =\n    typeof window !== 'undefined' ? window : globalThis;\n  delete storage[GLOBAL_INJECTOR_KEY];\n}\n\n// Re-export TastyConfig as StyleInjectorConfig for backward compatibility\nexport type { TastyConfig as StyleInjectorConfig };\n"],"mappings":"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"}
+{"version":3,"file":"config.js","names":[],"sources":["../src/config.ts"],"sourcesContent":["/**\n * Tasty Configuration Module\n *\n * Centralizes all tasty configuration, including:\n * - Style injector settings (nonce, cleanup thresholds, etc.)\n * - Global predefined states for advanced state mapping\n * - stylesGenerated flag that locks configuration after first style generation\n *\n * Configuration must be done BEFORE any styles are generated.\n * After the first `inject()` call, configuration is locked and attempts to\n * reconfigure will emit a warning and be ignored.\n */\n\nimport { StyleInjector } from './injector/injector';\nimport { clearPipelineCache, isSelector, renderStyles } from './pipeline';\nimport { setGlobalPredefinedStates } from './states';\nimport {\n  normalizeHandlerDefinition,\n  registerHandler,\n  resetHandlers,\n} from './styles/predefined';\nimport { resetColorSpace, setColorSpace } from './utils/color-space';\nimport { isDevEnv } from './utils/is-dev-env';\nimport {\n  CUSTOM_UNITS,\n  getGlobalFuncs,\n  getGlobalParser,\n  normalizeColorTokenValue,\n  resetGlobalPredefinedTokens,\n  setGlobalPredefinedTokens,\n} from './utils/styles';\n\nimport type { ColorSpace } from './utils/color-space';\n\nimport type {\n  CounterStyleDescriptors,\n  FontFaceInput,\n  KeyframesSteps,\n  PropertyDefinition,\n} from './injector/types';\nimport type { StyleDetails, UnitHandler } from './parser/types';\nimport type { StyleResult } from './pipeline';\nimport type { TastyPlugin } from './plugins/types';\nimport type { RecipeStyles, ConfigTokens } from './styles/types';\nimport type { StyleHandlerDefinition } from './utils/styles';\n\n/**\n * Configuration options for the Tasty style system\n */\nexport interface TastyConfig {\n  /** CSP nonce for style elements */\n  nonce?: string;\n  /** Maximum rules per stylesheet (default: 8192) */\n  maxRulesPerSheet?: number;\n  /** Threshold for bulk cleanup of unused styles (default: 500) */\n  unusedStylesThreshold?: number;\n  /** Delay before bulk cleanup in ms, ignored if idleCleanup is true (default: 5000) */\n  bulkCleanupDelay?: number;\n  /** Use requestIdleCallback for cleanup when available (default: true) */\n  idleCleanup?: boolean;\n  /** Force text injection mode, auto-detected in test environments (default: auto) */\n  forceTextInjection?: boolean;\n  /** Enable development mode features: performance metrics and debug info (default: auto) */\n  devMode?: boolean;\n  /**\n   * Ratio of unused styles to delete per bulk cleanup run (0..1).\n   * Defaults to 0.5 (oldest half) to reduce risk of removing styles\n   * that may be restored shortly after being marked unused.\n   */\n  bulkCleanupBatchRatio?: number;\n  /**\n   * Minimum age (in ms) a style must remain unused before eligible for deletion.\n   * Helps avoid races during rapid mount/unmount cycles. Default: 10000ms.\n   */\n  unusedStylesMinAgeMs?: number;\n  /**\n   * Global predefined states for advanced state mapping.\n   * These are state aliases that can be used in any component.\n   * Example: { '@mobile': '@media(w < 920px)', '@dark': '@root(theme=dark)' }\n   */\n  states?: Record<string, string>;\n  /**\n   * Parser LRU cache size (default: 1000).\n   * Larger values improve performance for apps with many unique style values.\n   */\n  parserCacheSize?: number;\n  /**\n   * Custom units for the style parser (merged with built-in units).\n   * Units transform numeric values like `2x` → `calc(2 * var(--gap))`.\n   * @example { em: 'em', vw: 'vw', custom: (n) => `${n * 10}px` }\n   */\n  units?: Record<string, string | UnitHandler>;\n  /**\n   * Custom functions for the style parser (merged with existing).\n   * Functions process parsed style groups and return CSS values.\n   * @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }\n   */\n  funcs?: Record<string, (groups: StyleDetails[]) => string>;\n  /**\n   * Color space used for decomposed color token companion variables.\n   * Controls the CSS function and suffix for alpha composition.\n   *\n   * - `'rgb'`   — suffix `-rgb`, e.g. `rgb(var(--name-color-rgb) / .5)`\n   * - `'hsl'`   — suffix `-hsl`, e.g. `hsl(var(--name-color-hsl) / .5)`\n   * - `'oklch'` — suffix `-oklch`, e.g. `oklch(var(--name-color-oklch) / .5)`\n   *\n   * @default 'oklch'\n   */\n  colorSpace?: ColorSpace;\n  /**\n   * Automatically infer and register CSS @property declarations\n   * from custom property values found in styles, keyframes, and global config.\n   * Covers all types: \\<color\\>, \\<number\\>, \\<length\\>, \\<angle\\>, \\<percentage\\>, \\<time\\>.\n   * When false, only explicitly declared @properties are registered.\n   * @default true\n   */\n  autoPropertyTypes?: boolean;\n  /**\n   * Plugins that extend tasty with custom functions, units, or states.\n   * Plugins are processed in order, with later plugins overriding earlier ones.\n   * @example\n   * ```ts\n   * import { okhslPlugin } from '@tenphi/tasty';\n   *\n   * configure({\n   *   plugins: [okhslPlugin()],\n   * });\n   * ```\n   */\n  plugins?: TastyPlugin[];\n  /**\n   * Global keyframes definitions that can be referenced by animation names in styles.\n   * Keys are animation names, values are keyframes step definitions.\n   * Keyframes are only injected when actually used in styles.\n   * @example\n   * ```ts\n   * configure({\n   *   keyframes: {\n   *     fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } },\n   *     pulse: { '0%, 100%': { transform: 'scale(1)' }, '50%': { transform: 'scale(1.05)' } },\n   *   },\n   * });\n   * ```\n   */\n  keyframes?: Record<string, KeyframesSteps>;\n  /**\n   * Global CSS @property definitions for custom properties.\n   * Keys use tasty token syntax ($name for properties, #name for colors).\n   * Properties are only injected when the component using them is rendered.\n   *\n   * For color tokens (#name), `syntax: '<color>'` is auto-set and\n   * `initialValue` defaults to `'transparent'` if not specified.\n   *\n   * @example\n   * ```ts\n   * configure({\n   *   properties: {\n   *     '$rotation': { syntax: '<angle>', initialValue: '0deg' },\n   *     '$scale': { syntax: '<number>', inherits: false, initialValue: 1 },\n   *     '#accent': { initialValue: 'purple' }, // syntax: '<color>' auto-set\n   *   },\n   * });\n   *\n   * // Now use in styles - properties are registered when component renders:\n   * const Spinner = tasty({\n   *   styles: {\n   *     transform: 'rotate($rotation)',\n   *     transition: '$$rotation 0.3s', // outputs: --rotation 0.3s\n   *   },\n   * });\n   * ```\n   */\n  properties?: Record<string, PropertyDefinition>;\n  /**\n   * Global @font-face definitions.\n   * Keys are font-family names, values are descriptors or arrays of descriptors\n   * (for multiple weights/styles of the same family).\n   * Injected eagerly when styles are first generated.\n   * @example\n   * ```ts\n   * configure({\n   *   fontFace: {\n   *     'Brand Sans': [\n   *       { src: 'url(\"/fonts/brand-regular.woff2\") format(\"woff2\")', fontWeight: 400, fontDisplay: 'swap' },\n   *       { src: 'url(\"/fonts/brand-bold.woff2\") format(\"woff2\")', fontWeight: 700, fontDisplay: 'swap' },\n   *     ],\n   *     Icons: { src: 'url(\"/fonts/icons.woff2\") format(\"woff2\")', fontDisplay: 'block' },\n   *   },\n   * });\n   * ```\n   */\n  fontFace?: Record<string, FontFaceInput>;\n  /**\n   * Global @counter-style definitions.\n   * Keys are counter-style names, values are descriptor objects.\n   * Injected eagerly when styles are first generated.\n   * @example\n   * ```ts\n   * configure({\n   *   counterStyle: {\n   *     thumbs: { system: 'cyclic', symbols: '\"👍\"', suffix: '\" \"' },\n   *   },\n   * });\n   * ```\n   */\n  counterStyle?: Record<string, CounterStyleDescriptors>;\n  /**\n   * Custom style handlers that transform style properties into CSS declarations.\n   * Handlers replace built-in handlers for the same style name.\n   * @example\n   * ```ts\n   * import { styleHandlers } from '@tenphi/tasty';\n   *\n   * configure({\n   *   handlers: {\n   *     // Override fill with custom behavior\n   *     fill: ({ fill }) => {\n   *       if (fill?.startsWith('gradient:')) {\n   *         return { background: fill.slice(9) };\n   *       }\n   *       return styleHandlers.fill({ fill });\n   *     },\n   *     // Add new custom style\n   *     elevation: ({ elevation }) => {\n   *       const level = parseInt(elevation) || 1;\n   *       return {\n   *         'box-shadow': `0 ${level * 2}px ${level * 4}px rgba(0,0,0,0.1)`,\n   *         'z-index': String(level * 100),\n   *       };\n   *     },\n   *   },\n   * });\n   * ```\n   */\n  handlers?: Record<string, StyleHandlerDefinition>;\n  /**\n   * Design tokens injected as CSS custom properties on `:root`.\n   * Values are parsed through the Tasty DSL. Supports state maps\n   * for responsive/theme-aware tokens.\n   *\n   * - `$name` keys become `--name` CSS custom properties\n   * - `#name` keys become `--name-color` and `--name-color-{colorSpace}` properties\n   *\n   * Tokens are injected once when the first style is rendered.\n   *\n   * @example\n   * ```ts\n   * configure({\n   *   tokens: {\n   *     '$gap': '4px',\n   *     '#primary': {\n   *       '': '#purple',\n   *       '@dark': '#light-purple',\n   *     },\n   *   },\n   * });\n   * ```\n   */\n  tokens?: ConfigTokens;\n  /**\n   * Predefined tokens that are replaced during style parsing (parse-time substitution).\n   * Use `$name` for custom properties and `#name` for color tokens.\n   * Values are substituted inline before CSS generation, unlike `tokens` which\n   * inject CSS custom properties on `:root`.\n   *\n   * For color tokens (#name), boolean `true` is converted to `transparent`.\n   *\n   * @example\n   * ```ts\n   * configure({\n   *   replaceTokens: {\n   *     $spacing: '2x',\n   *     '#accent': '#purple',\n   *     '#overlay': true, // → transparent\n   *   },\n   * });\n   *\n   * // Now use in styles - tokens are replaced at parse time:\n   * const Card = tasty({\n   *   styles: {\n   *     padding: '$spacing',  // → calc(2 * var(--gap))\n   *     fill: '#accent',      // → var(--purple-color)\n   *   },\n   * });\n   * ```\n   */\n  replaceTokens?: Record<`$${string}`, string | number | boolean> &\n    Record<`#${string}`, string | number | boolean>;\n  /**\n   * Predefined style recipes -- named style bundles that can be applied via `recipe` style property.\n   * Recipe values are flat tasty styles (no sub-element keys). They may contain base styles,\n   * tokens (`$name`/`#name` definitions), local states, `@keyframes`, and `@properties`.\n   *\n   * Components reference recipes via: `recipe: 'name1 name2'` in their styles.\n   * Use `/` to separate base recipes from post recipes: `recipe: 'base1 base2 / post1'`.\n   * Use `none` to skip base recipes: `recipe: 'none / post1'`.\n   * Resolution order: `base_recipes → component styles → post_recipes`.\n   *\n   * Recipes cannot reference other recipes.\n   *\n   * @example\n   * ```ts\n   * configure({\n   *   recipes: {\n   *     card: { padding: '4x', fill: '#surface', radius: '1r', border: true },\n   *     elevated: { shadow: '2x 2x 4x #shadow' },\n   *   },\n   * });\n   *\n   * // Usage in styles:\n   * const Card = tasty({\n   *   styles: {\n   *     recipe: 'card elevated',\n   *     color: '#text', // Overrides recipe values\n   *   },\n   * });\n   * ```\n   */\n  recipes?: Record<string, RecipeStyles>;\n}\n\n// Warnings tracking to avoid duplicates\nconst emittedWarnings = new Set<string>();\n\nconst devMode = isDevEnv();\n\n/**\n * Emit a warning only once\n */\nfunction warnOnce(key: string, message: string): void {\n  if (devMode && !emittedWarnings.has(key)) {\n    emittedWarnings.add(key);\n    console.warn(message);\n  }\n}\n\n// ============================================================================\n// Configuration State\n// ============================================================================\n\n// Track whether styles have been generated (locks configuration)\nlet stylesGenerated = false;\n\n// Current configuration (null until first configure() or auto-configured on first use)\nlet currentConfig: TastyConfig | null = null;\n\n// Global keyframes storage (null = no keyframes configured, empty object checked via hasGlobalKeyframes)\nlet globalKeyframes: Record<string, KeyframesSteps> | null = null;\n\n// Global font-face storage (null = no font faces configured)\nlet globalFontFace: Record<string, FontFaceInput> | null = null;\n\n// Global counter-style storage (null = no counter styles configured)\nlet globalCounterStyle: Record<string, CounterStyleDescriptors> | null = null;\n\n// Global properties storage (null = no properties configured)\nlet globalProperties: Record<string, PropertyDefinition> | null = null;\n\n// Global recipes storage (null = no recipes configured)\nlet globalRecipes: Record<string, RecipeStyles> | null = null;\n\n// Global token styles storage (injected as :root CSS custom properties)\nlet globalConfigTokens: ConfigTokens | null = null;\n\n/**\n * Internal properties required by tasty core features.\n * These are always injected when styles are first generated.\n * Keys use tasty token syntax (#name for colors, $name for other properties).\n *\n * For properties with CSS @property-compatible types (length, time, number, color),\n * an `initialValue` is provided so the property works even without a project-level token.\n */\nexport const INTERNAL_PROPERTIES: Record<string, PropertyDefinition> = {\n  // Used by dual-fill feature to enable CSS transitions on the second fill color\n  '#tasty-second-fill': {\n    inherits: false,\n    initialValue: 'transparent',\n  },\n  // Current color context variable (set by the color style handler).\n  '#current': {\n    inherits: true,\n    initialValue: 'transparent',\n  },\n  // White and black are fundamental colors that need explicit initial values.\n  '#white': {\n    inherits: true,\n    initialValue: 'rgb(255 255 255)',\n  },\n  '#black': {\n    inherits: true,\n    initialValue: 'rgb(0 0 0)',\n  },\n\n  // ---- Core design tokens used by style handlers ----\n  // These provide sensible defaults so tasty works standalone without a design system.\n  // Consuming projects (e.g. uikit) override these by defining tokens on :root.\n\n  $gap: {\n    syntax: '<length>',\n    inherits: true,\n    initialValue: '4px',\n  },\n  $radius: {\n    syntax: '<length>',\n    inherits: true,\n    initialValue: '6px',\n  },\n  '$border-width': {\n    syntax: '<length>',\n    inherits: true,\n    initialValue: '1px',\n  },\n  '$outline-width': {\n    syntax: '<length>',\n    inherits: true,\n    initialValue: '3px',\n  },\n  $transition: {\n    syntax: '<time>',\n    inherits: true,\n    initialValue: '80ms',\n  },\n  // Used by radius.ts for `radius=\"leaf\"` modifier\n  '$sharp-radius': {\n    syntax: '<length>',\n    inherits: true,\n    initialValue: '0px',\n  },\n  // Used by preset.ts for `preset=\"name / strong\"`\n  '$bold-font-weight': {\n    syntax: '<number>',\n    inherits: true,\n    initialValue: '700',\n  },\n  // Used by preset.ts as fallback font stacks\n  '$font-sans-fallback': {\n    syntax: '*',\n    inherits: true,\n    initialValue:\n      'system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif',\n  },\n  '$font-mono-fallback': {\n    syntax: '*',\n    inherits: true,\n    initialValue:\n      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\n  },\n};\n\n// Global injector instance key\nconst GLOBAL_INJECTOR_KEY = '__TASTY_GLOBAL_INJECTOR__';\n\ninterface TastyGlobalStorage {\n  [GLOBAL_INJECTOR_KEY]?: StyleInjector;\n}\n\ndeclare global {\n  interface Window {\n    [GLOBAL_INJECTOR_KEY]?: StyleInjector;\n  }\n\n  var __TASTY_GLOBAL_INJECTOR__: StyleInjector | undefined;\n}\n\n/**\n * Detect if we're running in a test environment\n */\nexport function isTestEnvironment(): boolean {\n  // Check Node.js environment\n  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n    return true;\n  }\n\n  // Check for test runner globals (safely)\n  if (typeof global !== 'undefined') {\n    const g = global as unknown as Record<string, unknown>;\n    if (g.vi || g.jest || g.expect || g.describe || g.it) {\n      return true;\n    }\n  }\n\n  // Check for jsdom environment (common in tests)\n  if (\n    typeof window !== 'undefined' &&\n    window.navigator?.userAgent?.includes('jsdom')\n  ) {\n    return true;\n  }\n\n  // Check for other test runners\n  if (typeof globalThis !== 'undefined') {\n    const gt = globalThis as unknown as Record<string, unknown>;\n    if (gt.vitest || gt.mocha) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/**\n * Create default configuration with optional test environment detection\n */\nfunction createDefaultConfig(isTest?: boolean): TastyConfig {\n  return {\n    maxRulesPerSheet: 8192,\n    unusedStylesThreshold: 500,\n    bulkCleanupDelay: 5000,\n    idleCleanup: true,\n    forceTextInjection: isTest ?? false,\n    devMode: isDevEnv(),\n    bulkCleanupBatchRatio: 0.5,\n    unusedStylesMinAgeMs: 10000,\n  };\n}\n\n// ============================================================================\n// stylesGenerated Flag Management\n// ============================================================================\n\n/**\n * Mark that styles have been generated (called by injector on first inject)\n * This locks the configuration - no further changes allowed.\n * Also injects internal and global properties.\n */\nexport function markStylesGenerated(): void {\n  if (stylesGenerated) return; // Already marked, skip\n\n  stylesGenerated = true;\n\n  const injector = getGlobalInjector();\n\n  // Inject internal properties required by tasty core features\n  for (const [token, definition] of Object.entries(INTERNAL_PROPERTIES)) {\n    injector.property(token, definition);\n  }\n\n  // Inject global properties if any were configured\n  // Properties are permanent and only need to be injected once\n  if (globalProperties && Object.keys(globalProperties).length > 0) {\n    for (const [token, definition] of Object.entries(globalProperties)) {\n      injector.property(token, definition);\n    }\n  }\n\n  // Inject global @font-face rules (eagerly — fonts should be available before render)\n  if (globalFontFace && Object.keys(globalFontFace).length > 0) {\n    for (const [family, input] of Object.entries(globalFontFace)) {\n      const descriptors = Array.isArray(input) ? input : [input];\n      for (const desc of descriptors) {\n        injector.fontFace(family, desc);\n      }\n    }\n  }\n\n  // Inject global @counter-style rules (eagerly)\n  if (globalCounterStyle && Object.keys(globalCounterStyle).length > 0) {\n    for (const [name, descriptors] of Object.entries(globalCounterStyle)) {\n      injector.counterStyle(name, descriptors);\n    }\n  }\n\n  // Inject configured tokens as :root CSS custom properties\n  if (globalConfigTokens && Object.keys(globalConfigTokens).length > 0) {\n    const tokenRules = renderStyles(\n      globalConfigTokens,\n      ':root',\n    ) as StyleResult[];\n    if (tokenRules.length > 0) {\n      injector.injectGlobal(tokenRules);\n    }\n  }\n}\n\n/**\n * Check if styles have been generated (configuration is locked)\n */\nexport function hasStylesGenerated(): boolean {\n  return stylesGenerated;\n}\n\n/**\n * Reset styles generated flag (for testing only)\n */\nexport function resetStylesGenerated(): void {\n  stylesGenerated = false;\n  emittedWarnings.clear();\n}\n\n// ============================================================================\n// Global Keyframes Management\n// ============================================================================\n\nlet _hasGlobalKeyframes = false;\n\n/**\n * Check if any global keyframes are configured.\n * Uses a pre-computed flag to avoid Object.keys() allocation on every call.\n */\nexport function hasGlobalKeyframes(): boolean {\n  return _hasGlobalKeyframes;\n}\n\n/**\n * Get global keyframes configuration.\n * Returns null if no keyframes configured (fast path for zero-overhead).\n */\nexport function getGlobalKeyframes(): Record<string, KeyframesSteps> | null {\n  return globalKeyframes;\n}\n\n/**\n * Set global keyframes (called from configure).\n * Internal use only.\n */\nfunction setGlobalKeyframes(keyframes: Record<string, KeyframesSteps>): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'keyframes-after-styles',\n      `[Tasty] Cannot update keyframes after styles have been generated.\\n` +\n        `The new keyframes will be ignored.`,\n    );\n    return;\n  }\n  globalKeyframes = keyframes;\n  _hasGlobalKeyframes = Object.keys(keyframes).length > 0;\n}\n\n// ============================================================================\n// Global Properties Management\n// ============================================================================\n\n/**\n * Check if any global properties are configured.\n * Fast path: returns false if no properties were ever set.\n */\nexport function hasGlobalProperties(): boolean {\n  return globalProperties !== null && Object.keys(globalProperties).length > 0;\n}\n\n/**\n * Get global properties configuration.\n * Returns null if no properties configured (fast path for zero-overhead).\n */\nexport function getGlobalProperties(): Record<\n  string,\n  PropertyDefinition\n> | null {\n  return globalProperties;\n}\n\n/**\n * Set global properties (called from configure).\n * Internal use only.\n */\nfunction setGlobalProperties(\n  properties: Record<string, PropertyDefinition>,\n): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'properties-after-styles',\n      `[Tasty] Cannot update properties after styles have been generated.\\n` +\n        `The new properties will be ignored.`,\n    );\n    return;\n  }\n  globalProperties = properties;\n}\n\n// ============================================================================\n// Global Font Face Management\n// ============================================================================\n\n/**\n * Get global font-face configuration.\n * Returns null if no font faces configured.\n */\nexport function getGlobalFontFace(): Record<string, FontFaceInput> | null {\n  return globalFontFace;\n}\n\n/**\n * Set global font faces (called from configure).\n * Internal use only.\n */\nfunction setGlobalFontFace(fontFace: Record<string, FontFaceInput>): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'fontface-after-styles',\n      `[Tasty] Cannot update fontFace after styles have been generated.\\n` +\n        `The new font faces will be ignored.`,\n    );\n    return;\n  }\n  globalFontFace = fontFace;\n}\n\n// ============================================================================\n// Global Counter Style Management\n// ============================================================================\n\n/**\n * Get global counter-style configuration.\n * Returns null if no counter styles configured.\n */\nexport function getGlobalCounterStyle(): Record<\n  string,\n  CounterStyleDescriptors\n> | null {\n  return globalCounterStyle;\n}\n\n/**\n * Set global counter styles (called from configure).\n * Internal use only.\n */\nfunction setGlobalCounterStyle(\n  counterStyle: Record<string, CounterStyleDescriptors>,\n): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'counterstyle-after-styles',\n      `[Tasty] Cannot update counterStyle after styles have been generated.\\n` +\n        `The new counter styles will be ignored.`,\n    );\n    return;\n  }\n  globalCounterStyle = counterStyle;\n}\n\n// ============================================================================\n// Global Recipes Management\n// ============================================================================\n\n/**\n * Check if any global recipes are configured.\n * Fast path: returns false if no recipes were ever set.\n */\nexport function hasGlobalRecipes(): boolean {\n  return globalRecipes !== null && Object.keys(globalRecipes).length > 0;\n}\n\n/**\n * Get global recipes configuration.\n * Returns null if no recipes configured (fast path for zero-overhead).\n */\nexport function getGlobalRecipes(): Record<string, RecipeStyles> | null {\n  return globalRecipes;\n}\n\n/**\n * Set global recipes (called from configure).\n * Internal use only.\n */\nfunction setGlobalRecipes(recipes: Record<string, RecipeStyles>): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'recipes-after-styles',\n      `[Tasty] Cannot update recipes after styles have been generated.\\n` +\n        `The new recipes will be ignored.`,\n    );\n    return;\n  }\n\n  // Dev-mode validation\n  if (devMode) {\n    for (const [name, recipeStyles] of Object.entries(recipes)) {\n      if (name === 'none') {\n        warnOnce(\n          'recipe-reserved-none',\n          `[Tasty] Recipe name \"none\" is reserved. ` +\n            `It is used as a keyword meaning \"no base recipes\" ` +\n            `(e.g. recipe: 'none / post-recipe'). ` +\n            `Choose a different name for your recipe.`,\n        );\n      }\n\n      for (const key of Object.keys(recipeStyles)) {\n        if (isSelector(key)) {\n          warnOnce(\n            `recipe-selector-${name}-${key}`,\n            `[Tasty] Recipe \"${name}\" contains sub-element key \"${key}\". ` +\n              `Recipes must be flat styles without sub-element keys. ` +\n              `Remove the sub-element key from the recipe definition.`,\n          );\n        }\n        if (key === 'recipe') {\n          warnOnce(\n            `recipe-recursive-${name}`,\n            `[Tasty] Recipe \"${name}\" contains a \"recipe\" key. ` +\n              `Recipes cannot reference other recipes. ` +\n              `Use space-separated names for composition: recipe: 'base elevated'.`,\n          );\n        }\n      }\n    }\n  }\n\n  globalRecipes = recipes;\n}\n\n// ============================================================================\n// Global Token Styles Management\n// ============================================================================\n\n/**\n * Get global token styles for :root injection.\n * Returns null if no tokens configured.\n */\nexport function getGlobalConfigTokens(): ConfigTokens | null {\n  return globalConfigTokens;\n}\n\n/**\n * Set global token styles (called from configure).\n * Internal use only.\n */\nfunction setGlobalConfigTokens(styles: ConfigTokens): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'tokens-after-styles',\n      `[Tasty] Cannot update tokens after styles have been generated.\\n` +\n        `The new tokens will be ignored.`,\n    );\n    return;\n  }\n  globalConfigTokens = globalConfigTokens\n    ? { ...globalConfigTokens, ...styles }\n    : styles;\n}\n\n/**\n * Check if configuration is locked (styles have been generated)\n */\nexport function isConfigLocked(): boolean {\n  return stylesGenerated;\n}\n\n// ============================================================================\n// Configuration API\n// ============================================================================\n\n/**\n * Configure the Tasty style system.\n *\n * Must be called BEFORE any styles are generated (before first render that uses tasty).\n * After styles are generated, configuration is locked and calls to configure() will\n * emit a warning and be ignored.\n *\n * @example\n * ```ts\n * import { configure } from '@tenphi/tasty';\n *\n * // Configure before app renders\n * configure({\n *   nonce: 'abc123',\n *   states: {\n *     '@mobile': '@media(w < 768px)',\n *     '@dark': '@root(theme=dark)',\n *   },\n * });\n * ```\n */\nexport function configure(config: Partial<TastyConfig> = {}): void {\n  if (stylesGenerated) {\n    warnOnce(\n      'configure-after-styles',\n      `[Tasty] Cannot call configure() after styles have been generated.\\n` +\n        `Configuration must be done before the first render. The configuration will be ignored.`,\n    );\n    return;\n  }\n\n  // Collect merged values from plugins first, then override with direct config\n  let mergedStates: Record<string, string> = {};\n  let mergedUnits: Record<string, string | UnitHandler> = {};\n  let mergedFuncs: Record<string, (groups: StyleDetails[]) => string> = {};\n  let mergedHandlers: Record<string, StyleHandlerDefinition> = {};\n  let mergedReplaceTokens: Record<string, string | number | boolean> = {};\n  let mergedConfigTokens: ConfigTokens = {} as ConfigTokens;\n  let mergedRecipes: Record<string, RecipeStyles> = {};\n\n  // Process plugins in order\n  if (config.plugins) {\n    for (const plugin of config.plugins) {\n      if (plugin.states) {\n        mergedStates = { ...mergedStates, ...plugin.states };\n      }\n      if (plugin.units) {\n        mergedUnits = { ...mergedUnits, ...plugin.units };\n      }\n      if (plugin.funcs) {\n        mergedFuncs = { ...mergedFuncs, ...plugin.funcs };\n      }\n      if (plugin.handlers) {\n        mergedHandlers = { ...mergedHandlers, ...plugin.handlers };\n      }\n      if (plugin.replaceTokens) {\n        mergedReplaceTokens = {\n          ...mergedReplaceTokens,\n          ...plugin.replaceTokens,\n        };\n      }\n      if (plugin.tokens) {\n        mergedConfigTokens = { ...mergedConfigTokens, ...plugin.tokens };\n      }\n      if (plugin.recipes) {\n        mergedRecipes = { ...mergedRecipes, ...plugin.recipes };\n      }\n    }\n  }\n\n  // Direct config overrides plugins\n  if (config.states) {\n    mergedStates = { ...mergedStates, ...config.states };\n  }\n  if (config.units) {\n    mergedUnits = { ...mergedUnits, ...config.units };\n  }\n  if (config.funcs) {\n    mergedFuncs = { ...mergedFuncs, ...config.funcs };\n  }\n  if (config.handlers) {\n    mergedHandlers = { ...mergedHandlers, ...config.handlers };\n  }\n  if (config.replaceTokens) {\n    mergedReplaceTokens = { ...mergedReplaceTokens, ...config.replaceTokens };\n  }\n  if (config.tokens) {\n    mergedConfigTokens = { ...mergedConfigTokens, ...config.tokens };\n  }\n  if (config.recipes) {\n    mergedRecipes = { ...mergedRecipes, ...config.recipes };\n  }\n\n  // Warn on tokens/replaceTokens key conflicts\n  if (devMode) {\n    const tokenKeys = new Set(Object.keys(mergedConfigTokens));\n    for (const key of Object.keys(mergedReplaceTokens)) {\n      if (tokenKeys.has(key)) {\n        warnOnce(\n          `token-conflict-${key}`,\n          `[Tasty] Token \"${key}\" is defined in both \\`tokens\\` and \\`replaceTokens\\`. ` +\n            `\\`replaceTokens\\` performs parse-time substitution, so the \\`tokens\\` ` +\n            `CSS custom property will be injected but never used by Tasty styles. ` +\n            `Remove it from one of the two.`,\n        );\n      }\n    }\n  }\n\n  // Handle color space (must be set before any token processing)\n  if (config.colorSpace) {\n    setColorSpace(config.colorSpace);\n    // Color space affects parser output (e.g. #name.5 → oklch(...) vs rgb(...))\n    getGlobalParser().clearCache();\n  }\n\n  // Handle predefined states\n  if (Object.keys(mergedStates).length > 0) {\n    setGlobalPredefinedStates(mergedStates);\n  }\n\n  // Handle parser configuration (merge semantics - extend, not replace)\n  const parser = getGlobalParser();\n\n  if (config.parserCacheSize !== undefined) {\n    parser.updateOptions({ cacheSize: config.parserCacheSize });\n  }\n\n  if (Object.keys(mergedUnits).length > 0) {\n    // Merge with existing units\n    const currentUnits = parser.getUnits() ?? CUSTOM_UNITS;\n    parser.setUnits({ ...currentUnits, ...mergedUnits });\n  }\n\n  if (Object.keys(mergedFuncs).length > 0) {\n    // Merge with existing funcs\n    const currentFuncs = getGlobalFuncs();\n    const finalFuncs = { ...currentFuncs, ...mergedFuncs };\n    parser.setFuncs(finalFuncs);\n    // Also update the global registry so customFunc() continues to work\n    Object.assign(currentFuncs, mergedFuncs);\n  }\n\n  // Handle keyframes\n  if (config.keyframes) {\n    setGlobalKeyframes(config.keyframes);\n  }\n\n  // Handle properties\n  if (config.properties) {\n    setGlobalProperties(config.properties);\n  }\n\n  // Handle font faces\n  if (config.fontFace) {\n    setGlobalFontFace(config.fontFace);\n  }\n\n  // Handle counter styles\n  if (config.counterStyle) {\n    setGlobalCounterStyle(config.counterStyle);\n  }\n\n  // Handle custom handlers\n  if (Object.keys(mergedHandlers).length > 0) {\n    for (const [name, definition] of Object.entries(mergedHandlers)) {\n      const handler = normalizeHandlerDefinition(name, definition);\n      registerHandler(handler);\n    }\n  }\n\n  // Handle replaceTokens (parse-time substitution)\n  if (Object.keys(mergedReplaceTokens).length > 0) {\n    const processedTokens: Record<string, string> = {};\n    for (const [key, value] of Object.entries(mergedReplaceTokens)) {\n      if (key.startsWith('#')) {\n        const normalized = normalizeColorTokenValue(value);\n        if (normalized === null) continue;\n        processedTokens[key] = String(normalized);\n      } else if (value === false) {\n        continue;\n      } else {\n        processedTokens[key] = String(value);\n      }\n    }\n    setGlobalPredefinedTokens(processedTokens);\n  }\n\n  // Handle tokens (CSS custom properties on :root)\n  if (Object.keys(mergedConfigTokens).length > 0) {\n    setGlobalConfigTokens(mergedConfigTokens);\n  }\n\n  // Handle recipes\n  if (Object.keys(mergedRecipes).length > 0) {\n    setGlobalRecipes(mergedRecipes);\n  }\n\n  const {\n    states: _states,\n    parserCacheSize: _parserCacheSize,\n    units: _units,\n    funcs: _funcs,\n    plugins: _plugins,\n    keyframes: _keyframes,\n    properties: _properties,\n    fontFace: _fontFace,\n    counterStyle: _counterStyle,\n    handlers: _handlers,\n    tokens: _tokens,\n    replaceTokens: _replaceTokens,\n    recipes: _recipes,\n    colorSpace: _colorSpace,\n    ...injectorConfig\n  } = config;\n\n  const fullConfig: TastyConfig = {\n    ...createDefaultConfig(),\n    ...currentConfig,\n    ...injectorConfig,\n  };\n\n  // Store the config\n  currentConfig = fullConfig;\n\n  // Create/replace the global injector\n  const storage: TastyGlobalStorage =\n    typeof window !== 'undefined' ? window : globalThis;\n  storage[GLOBAL_INJECTOR_KEY] = new StyleInjector(fullConfig);\n}\n\n/**\n * Get the current configuration.\n * If not configured, returns default configuration.\n */\nexport function getConfig(): TastyConfig {\n  if (!currentConfig) {\n    currentConfig = createDefaultConfig(isTestEnvironment());\n  }\n  return currentConfig;\n}\n\n/**\n * Get the global injector instance.\n * Auto-configures with defaults if not already configured.\n */\nexport function getGlobalInjector(): StyleInjector {\n  const storage: TastyGlobalStorage =\n    typeof window !== 'undefined' ? window : globalThis;\n\n  if (!storage[GLOBAL_INJECTOR_KEY]) {\n    configure();\n  }\n\n  return storage[GLOBAL_INJECTOR_KEY]!;\n}\n\n/**\n * Reset configuration (for testing only).\n * Clears the global injector and allows reconfiguration.\n */\nexport function resetConfig(): void {\n  stylesGenerated = false;\n  currentConfig = null;\n  globalKeyframes = null;\n  _hasGlobalKeyframes = false;\n  globalProperties = null;\n  globalFontFace = null;\n  globalCounterStyle = null;\n  globalRecipes = null;\n  globalConfigTokens = null;\n  resetGlobalPredefinedTokens();\n  resetHandlers();\n  resetColorSpace();\n  clearPipelineCache();\n  emittedWarnings.clear();\n\n  const storage: TastyGlobalStorage =\n    typeof window !== 'undefined' ? window : globalThis;\n  delete storage[GLOBAL_INJECTOR_KEY];\n}\n\n// Re-export TastyConfig as StyleInjectorConfig for backward compatibility\nexport type { TastyConfig as StyleInjectorConfig };\n"],"mappings":"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"}

package/dist/hooks/useStyles.js

@@ -3,7 +3,7 @@ import { stringifyStyles } from "../utils/styles.js";
 import { extractLocalFontFace, fontFaceContentHash, formatFontFaceRule, hasLocalFontFace } from "../font-face/index.js";
 import { extractLocalCounterStyle, formatCounterStyleRule, hasLocalCounterStyle } from "../counter-style/index.js";
 import { getConfig, getGlobalKeyframes, hasGlobalKeyframes } from "../config.js";
-import { CHUNK_NAMES, categorizeStyleKeys } from "../chunks/definitions.js";
+import { categorizeStyleKeys } from "../chunks/definitions.js";
 import { generateChunkCacheKey } from "../chunks/cacheKey.js";
 import { renderStylesForChunk } from "../chunks/renderChunk.js";
 import { allocateClassName, counterStyle, fontFace, inject, keyframes, property } from "../injector/index.js";
@@ -19,17 +19,6 @@ import { useContext, useInsertionEffect, useMemo, useRef } from "react";
 
 //#region src/hooks/useStyles.ts
 /**
-* Check if styles contain @starting-style rules.
-*
-* @starting-style CSS cannot be applied via multiple class names because
-* of cascade - later rules override earlier ones. When @starting is detected,
-* we combine top-level styles into a single chunk but keep sub-element styles
-* in their own chunk for better caching.
-*/
-function containsStartingStyle(styleKey) {
-	return styleKey.includes("@starting");
-}
-/**
 * Render, cache-key, and allocate a className for a single chunk.
 * Returns a ProcessedChunk, or null if the chunk produces no CSS rules.
 *
@@ -54,26 +43,6 @@ function processChunk(styles, chunkName, styleKeys) {
 	};
 }
 /**
-* Merge chunk map entries for @starting-style partial chunking.
-*
-* All non-subcomponent chunks are merged into a single COMBINED entry,
-* while SUBCOMPONENTS stays separate. This preserves CSS cascade for
-* @starting-style while still allowing sub-element styles to cache independently.
-*/
-function mergeChunksForStartingStyle(chunkMap) {
-	const merged = /* @__PURE__ */ new Map();
-	const combinedKeys = [];
-	for (const [chunkName, keys] of chunkMap) if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) merged.set(CHUNK_NAMES.SUBCOMPONENTS, keys);
-	else combinedKeys.push(...keys);
-	if (combinedKeys.length > 0) {
-		const result = /* @__PURE__ */ new Map();
-		result.set(CHUNK_NAMES.COMBINED, combinedKeys);
-		for (const [k, v] of merged) result.set(k, v);
-		return result;
-	}
-	return merged;
-}
-/**
 * Get keyframes that are actually used in styles.
 * Returns null if no keyframes are used (fast path for zero overhead).
 *
@@ -167,8 +136,7 @@ function useStyles(styles) {
 	const processedChunks = useMemo(() => {
 		const currentStyles = stylesRef.current.styles;
 		if (!styleKey || !currentStyles) return [];
-		let chunkMap = categorizeStyleKeys(currentStyles);
-		if (containsStartingStyle(styleKey)) chunkMap = mergeChunksForStartingStyle(chunkMap);
+		const chunkMap = categorizeStyleKeys(currentStyles);
 		const chunks = [];
 		if (ssrCollector) {
 			ssrCollector.collectInternals();

package/dist/hooks/useStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyles.js","names":[],"sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["import { useContext, useInsertionEffect, useMemo, useRef } from 'react';\n\nimport {\n  categorizeStyleKeys,\n  CHUNK_NAMES,\n  generateChunkCacheKey,\n  renderStylesForChunk,\n} from '../chunks';\nimport { getConfig, getGlobalKeyframes, hasGlobalKeyframes } from '../config';\nimport {\n  allocateClassName,\n  counterStyle,\n  fontFace,\n  inject,\n  keyframes,\n  property,\n} from '../injector';\nimport type { FontFaceDescriptors, KeyframesSteps } from '../injector/types';\nimport {\n  extractLocalCounterStyle,\n  formatCounterStyleRule,\n  hasLocalCounterStyle,\n} from '../counter-style';\nimport {\n  extractLocalFontFace,\n  fontFaceContentHash,\n  formatFontFaceRule,\n  hasLocalFontFace,\n} from '../font-face';\nimport {\n  extractAnimationNamesFromStyles,\n  extractLocalKeyframes,\n  filterUsedKeyframes,\n  hasLocalKeyframes,\n  mergeKeyframes,\n  replaceAnimationNames,\n} from '../keyframes';\nimport type { RenderResult } from '../pipeline';\nimport { extractLocalProperties, hasLocalProperties } from '../properties';\nimport { collectAutoInferredProperties } from '../ssr/collect-auto-properties';\nimport type { ServerStyleCollector } from '../ssr/collector';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\nimport { formatKeyframesCSS } from '../ssr/format-keyframes';\nimport { formatPropertyCSS } from '../ssr/format-property';\nimport type { Styles } from '../styles/types';\nimport { hasKeys } from '../utils/has-keys';\nimport { resolveRecipes } from '../utils/resolve-recipes';\nimport { stringifyStyles } from '../utils/styles';\n\n/**\n * Check if styles contain @starting-style rules.\n *\n * @starting-style CSS cannot be applied via multiple class names because\n * of cascade - later rules override earlier ones. When @starting is detected,\n * we combine top-level styles into a single chunk but keep sub-element styles\n * in their own chunk for better caching.\n */\nfunction containsStartingStyle(styleKey: string): boolean {\n  return styleKey.includes('@starting');\n}\n\n/**\n * Tasty styles object to generate CSS classes for.\n * Can be undefined or empty object for no styles.\n */\nexport type UseStylesOptions = Styles | undefined;\n\nexport interface UseStylesResult {\n  /**\n   * Generated className(s) to apply to the element.\n   * Can be empty string if no styles are provided.\n   * With chunking enabled, may contain multiple space-separated class names.\n   */\n  className: string;\n}\n\n/**\n * Information about a processed chunk\n */\ninterface ProcessedChunk {\n  name: string;\n  styleKeys: string[];\n  cacheKey: string;\n  renderResult: RenderResult;\n  className: string;\n}\n\n/**\n * Render, cache-key, and allocate a className for a single chunk.\n * Returns a ProcessedChunk, or null if the chunk produces no CSS rules.\n *\n * Always runs the pipeline and calls allocateClassName. The inject()\n * call in useInsertionEffect handles all edge cases: placeholders from\n * abandoned concurrent renders, hydration hits (ruleIndex -2), and\n * runtime cache hits (already injected). The pipeline's own LRU cache\n * makes repeated calls for identical styles cheap.\n */\nfunction processChunk(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const renderResult = renderStylesForChunk(\n    styles,\n    chunkName,\n    styleKeys,\n    cacheKey,\n  );\n  if (renderResult.rules.length === 0) return null;\n\n  const { className } = allocateClassName(cacheKey);\n\n  return { name: chunkName, styleKeys, cacheKey, renderResult, className };\n}\n\n/**\n * Merge chunk map entries for @starting-style partial chunking.\n *\n * All non-subcomponent chunks are merged into a single COMBINED entry,\n * while SUBCOMPONENTS stays separate. This preserves CSS cascade for\n * @starting-style while still allowing sub-element styles to cache independently.\n */\nfunction mergeChunksForStartingStyle(\n  chunkMap: Map<string, string[]>,\n): Map<string, string[]> {\n  const merged = new Map<string, string[]>();\n  const combinedKeys: string[] = [];\n\n  for (const [chunkName, keys] of chunkMap) {\n    if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) {\n      merged.set(CHUNK_NAMES.SUBCOMPONENTS, keys);\n    } else {\n      combinedKeys.push(...keys);\n    }\n  }\n\n  if (combinedKeys.length > 0) {\n    // Insert COMBINED first so it appears before SUBCOMPONENTS\n    const result = new Map<string, string[]>();\n    result.set(CHUNK_NAMES.COMBINED, combinedKeys);\n    for (const [k, v] of merged) {\n      result.set(k, v);\n    }\n    return result;\n  }\n\n  return merged;\n}\n\n/**\n * Get keyframes that are actually used in styles.\n * Returns null if no keyframes are used (fast path for zero overhead).\n *\n * Optimization order:\n * 1. Check if any keyframes are defined (local or global) - if not, return null\n * 2. Extract animation names from styles - if none, return null\n * 3. Merge and filter keyframes to only used ones\n */\nfunction getUsedKeyframes(\n  styles: Styles,\n): Record<string, KeyframesSteps> | null {\n  // Fast path: no keyframes defined anywhere\n  const hasLocal = hasLocalKeyframes(styles);\n  const hasGlobal = hasGlobalKeyframes();\n  if (!hasLocal && !hasGlobal) return null;\n\n  // Extract animation names from styles (not from rendered CSS - faster)\n  const usedNames = extractAnimationNamesFromStyles(styles);\n  if (usedNames.size === 0) return null;\n\n  // Merge local and global keyframes\n  const local = hasLocal ? extractLocalKeyframes(styles) : null;\n  const global = hasGlobal ? getGlobalKeyframes() : null;\n  const allKeyframes = mergeKeyframes(local, global);\n\n  // Filter to only used keyframes\n  return filterUsedKeyframes(allKeyframes, usedNames);\n}\n\n/**\n * Process a chunk on the SSR path: allocate via collector, render, collect CSS.\n * Returns null if the chunk produces no CSS rules.\n */\nfunction processChunkSSR(\n  collector: ServerStyleCollector,\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const { className, isNewAllocation } = collector.allocateClassName(cacheKey);\n\n  if (isNewAllocation) {\n    const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);\n    if (renderResult.rules.length > 0) {\n      collector.collectChunk(cacheKey, className, renderResult.rules);\n      return {\n        name: chunkName,\n        styleKeys,\n        cacheKey,\n        renderResult,\n        className,\n      };\n    }\n    return null;\n  }\n\n  return {\n    name: chunkName,\n    styleKeys,\n    cacheKey,\n    renderResult: { rules: [] },\n    className,\n  };\n}\n\n/**\n * Hook to generate CSS classes from Tasty styles.\n * Handles style rendering, className allocation, and CSS injection.\n *\n * SSR-aware: when a ServerStyleCollector is available (via React context\n * or AsyncLocalStorage), CSS is collected during the render phase instead\n * of being injected into the DOM. useInsertionEffect does not run on the\n * server, so the collector path is the only active path during SSR.\n *\n * Uses chunking to split styles into logical groups for better caching\n * and CSS reuse across components.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { className } = useStyles({\n *     padding: '2x',\n *     fill: '#purple',\n *     radius: '1r',\n *   });\n *\n *   return <div className={className}>Styled content</div>;\n * }\n * ```\n */\nexport function useStyles(styles: UseStylesOptions): UseStylesResult {\n  const ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\n\n  // Array of dispose functions for each chunk\n  const disposeRef = useRef<(() => void)[]>([]);\n\n  // Store styles by their stringified key to avoid recomputing when only reference changes\n  const stylesRef = useRef<{ key: string; styles: Styles | undefined }>({\n    key: '',\n    styles: undefined,\n  });\n\n  // Resolve recipes before any processing (zero overhead if no recipes configured)\n  const resolvedStyles = useMemo(() => {\n    if (!styles) return styles;\n    return resolveRecipes(styles);\n  }, [styles]);\n\n  // Compute style key - this is a primitive string that captures style content\n  const styleKey = useMemo(() => {\n    if (!resolvedStyles || !hasKeys(resolvedStyles)) {\n      return '';\n    }\n    return stringifyStyles(resolvedStyles);\n  }, [resolvedStyles]);\n\n  // Update ref when styleKey changes (content actually changed)\n  if (stylesRef.current.key !== styleKey) {\n    stylesRef.current = { key: styleKey, styles: resolvedStyles };\n  }\n\n  // Process chunks: categorize, generate cache keys, render, and allocate classNames\n  // Only depends on styleKey (primitive), not styles object reference\n  const processedChunks: ProcessedChunk[] = useMemo(() => {\n    const currentStyles = stylesRef.current.styles;\n    if (!styleKey || !currentStyles) {\n      return [];\n    }\n\n    // Categorize style keys into chunks\n    let chunkMap = categorizeStyleKeys(\n      currentStyles as Record<string, unknown>,\n    );\n\n    // Partial chunking for styles containing @starting-style rules.\n    // @starting-style CSS cannot work with multiple class names due to cascade,\n    // so we merge all top-level chunks into one but keep sub-element styles separate.\n    if (containsStartingStyle(styleKey)) {\n      chunkMap = mergeChunksForStartingStyle(chunkMap);\n    }\n\n    const chunks: ProcessedChunk[] = [];\n\n    if (ssrCollector) {\n      // Ensure internal @property and :root token CSS is included\n      ssrCollector.collectInternals();\n\n      // SERVER PATH: allocate via collector, collect CSS\n      for (const [chunkName, chunkStyleKeys] of chunkMap) {\n        const chunk = processChunkSSR(\n          ssrCollector,\n          currentStyles,\n          chunkName,\n          chunkStyleKeys,\n        );\n        if (chunk) chunks.push(chunk);\n      }\n\n      // Collect keyframes on the server\n      const usedKeyframes = getUsedKeyframes(currentStyles);\n      if (usedKeyframes) {\n        for (const [name, steps] of Object.entries(usedKeyframes)) {\n          const css = formatKeyframesCSS(name, steps);\n          ssrCollector.collectKeyframes(name, css);\n        }\n      }\n\n      // Collect explicit @property rules on the server\n      if (hasLocalProperties(currentStyles)) {\n        const localProperties = extractLocalProperties(currentStyles);\n        if (localProperties) {\n          for (const [token, definition] of Object.entries(localProperties)) {\n            const css = formatPropertyCSS(token, definition);\n            if (css) {\n              ssrCollector.collectProperty(token, css);\n            }\n          }\n        }\n      }\n\n      // Collect @font-face rules on the server\n      if (hasLocalFontFace(currentStyles)) {\n        const localFontFace = extractLocalFontFace(currentStyles);\n        if (localFontFace) {\n          for (const [family, input] of Object.entries(localFontFace)) {\n            const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n              ? input\n              : [input];\n            for (const desc of descriptors) {\n              const hash = fontFaceContentHash(family, desc);\n              const css = formatFontFaceRule(family, desc);\n              ssrCollector.collectFontFace(hash, css);\n            }\n          }\n        }\n      }\n\n      // Collect @counter-style rules on the server\n      if (hasLocalCounterStyle(currentStyles)) {\n        const localCounterStyle = extractLocalCounterStyle(currentStyles);\n        if (localCounterStyle) {\n          for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n            const css = formatCounterStyleRule(name, descriptors);\n            ssrCollector.collectCounterStyle(name, css);\n          }\n        }\n      }\n\n      // Auto-infer @property types from rendered declarations (SSR).\n      // On the client this happens inside StyleInjector.inject(), which\n      // runs in useInsertionEffect and therefore never executes on the server.\n      if (getConfig().autoPropertyTypes !== false) {\n        const allRules = chunks.flatMap((c) => c.renderResult.rules);\n        if (allRules.length > 0) {\n          collectAutoInferredProperties(allRules, ssrCollector, currentStyles);\n        }\n      }\n    } else {\n      // CLIENT PATH: unchanged behavior\n      for (const [chunkName, chunkStyleKeys] of chunkMap) {\n        const chunk = processChunk(currentStyles, chunkName, chunkStyleKeys);\n        if (chunk) chunks.push(chunk);\n      }\n    }\n\n    return chunks;\n  }, [styleKey]);\n\n  // Inject styles in insertion effect (avoids render phase side effects).\n  // Does NOT run on the server — the SSR path above handles collection.\n  useInsertionEffect(() => {\n    // Cleanup all previous disposals\n    disposeRef.current.forEach((dispose) => dispose?.());\n    disposeRef.current = [];\n\n    // Fast path: no chunks to inject\n    if (processedChunks.length === 0) {\n      return;\n    }\n\n    const currentStyles = stylesRef.current.styles;\n\n    // Register explicit @properties first so they take precedence over auto-inference\n    // that happens during keyframe and style chunk injection.\n    // Token formats: $name → --name, #name → --name-color (with auto syntax: '<color>')\n    // Note: Global properties are injected once when styles are first generated (see markStylesGenerated)\n    if (currentStyles && hasLocalProperties(currentStyles)) {\n      const localProperties = extractLocalProperties(currentStyles);\n      if (localProperties) {\n        for (const [token, definition] of Object.entries(localProperties)) {\n          property(token, definition);\n        }\n      }\n    }\n\n    // Inject @font-face rules (permanent, no cleanup needed)\n    if (currentStyles && hasLocalFontFace(currentStyles)) {\n      const localFontFace = extractLocalFontFace(currentStyles);\n      if (localFontFace) {\n        for (const [family, input] of Object.entries(localFontFace)) {\n          const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n            ? input\n            : [input];\n          for (const desc of descriptors) {\n            fontFace(family, desc);\n          }\n        }\n      }\n    }\n\n    // Inject @counter-style rules (permanent, no cleanup needed)\n    if (currentStyles && hasLocalCounterStyle(currentStyles)) {\n      const localCounterStyle = extractLocalCounterStyle(currentStyles);\n      if (localCounterStyle) {\n        for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n          counterStyle(name, descriptors);\n        }\n      }\n    }\n\n    // Get keyframes that are actually used (returns null if none - zero overhead)\n    const usedKeyframes = currentStyles\n      ? getUsedKeyframes(currentStyles)\n      : null;\n\n    // Inject keyframes and build name map (only if we have keyframes)\n    let nameMap: Map<string, string> | null = null;\n\n    if (usedKeyframes) {\n      nameMap = new Map();\n      for (const [name, steps] of Object.entries(usedKeyframes)) {\n        const result = keyframes(steps, { name });\n        const injectedName = result.toString();\n        // Only add to map if name differs (optimization for replacement check)\n        if (injectedName !== name) {\n          nameMap.set(name, injectedName);\n        }\n        disposeRef.current.push(result.dispose);\n      }\n      // Clear map if no replacements needed\n      if (nameMap.size === 0) {\n        nameMap = null;\n      }\n    }\n\n    // Inject each chunk\n    for (const chunk of processedChunks) {\n      if (chunk.renderResult.rules.length > 0) {\n        // Replace animation names only if needed\n        const rulesToInject = nameMap\n          ? chunk.renderResult.rules.map((rule) => ({\n              ...rule,\n              declarations: replaceAnimationNames(rule.declarations, nameMap!),\n            }))\n          : chunk.renderResult.rules;\n\n        const { dispose } = inject(rulesToInject, {\n          cacheKey: chunk.cacheKey,\n        });\n        disposeRef.current.push(dispose);\n      }\n    }\n\n    return () => {\n      disposeRef.current.forEach((dispose) => dispose?.());\n      disposeRef.current = [];\n    };\n  }, [processedChunks]);\n\n  // Combine all chunk classNames\n  const className = useMemo(() => {\n    return processedChunks.map((chunk) => chunk.className).join(' ');\n  }, [processedChunks]);\n\n  return {\n    className,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useStyles.js","names":[],"sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["import { useContext, useInsertionEffect, useMemo, useRef } from 'react';\n\nimport {\n  categorizeStyleKeys,\n  generateChunkCacheKey,\n  renderStylesForChunk,\n} from '../chunks';\nimport { getConfig, getGlobalKeyframes, hasGlobalKeyframes } from '../config';\nimport {\n  allocateClassName,\n  counterStyle,\n  fontFace,\n  inject,\n  keyframes,\n  property,\n} from '../injector';\nimport type { FontFaceDescriptors, KeyframesSteps } from '../injector/types';\nimport {\n  extractLocalCounterStyle,\n  formatCounterStyleRule,\n  hasLocalCounterStyle,\n} from '../counter-style';\nimport {\n  extractLocalFontFace,\n  fontFaceContentHash,\n  formatFontFaceRule,\n  hasLocalFontFace,\n} from '../font-face';\nimport {\n  extractAnimationNamesFromStyles,\n  extractLocalKeyframes,\n  filterUsedKeyframes,\n  hasLocalKeyframes,\n  mergeKeyframes,\n  replaceAnimationNames,\n} from '../keyframes';\nimport type { RenderResult } from '../pipeline';\nimport { extractLocalProperties, hasLocalProperties } from '../properties';\nimport { collectAutoInferredProperties } from '../ssr/collect-auto-properties';\nimport type { ServerStyleCollector } from '../ssr/collector';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\nimport { formatKeyframesCSS } from '../ssr/format-keyframes';\nimport { formatPropertyCSS } from '../ssr/format-property';\nimport type { Styles } from '../styles/types';\nimport { hasKeys } from '../utils/has-keys';\nimport { resolveRecipes } from '../utils/resolve-recipes';\nimport { stringifyStyles } from '../utils/styles';\n\n/**\n * Tasty styles object to generate CSS classes for.\n * Can be undefined or empty object for no styles.\n */\nexport type UseStylesOptions = Styles | undefined;\n\nexport interface UseStylesResult {\n  /**\n   * Generated className(s) to apply to the element.\n   * Can be empty string if no styles are provided.\n   * With chunking enabled, may contain multiple space-separated class names.\n   */\n  className: string;\n}\n\n/**\n * Information about a processed chunk\n */\ninterface ProcessedChunk {\n  name: string;\n  styleKeys: string[];\n  cacheKey: string;\n  renderResult: RenderResult;\n  className: string;\n}\n\n/**\n * Render, cache-key, and allocate a className for a single chunk.\n * Returns a ProcessedChunk, or null if the chunk produces no CSS rules.\n *\n * Always runs the pipeline and calls allocateClassName. The inject()\n * call in useInsertionEffect handles all edge cases: placeholders from\n * abandoned concurrent renders, hydration hits (ruleIndex -2), and\n * runtime cache hits (already injected). The pipeline's own LRU cache\n * makes repeated calls for identical styles cheap.\n */\nfunction processChunk(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const renderResult = renderStylesForChunk(\n    styles,\n    chunkName,\n    styleKeys,\n    cacheKey,\n  );\n  if (renderResult.rules.length === 0) return null;\n\n  const { className } = allocateClassName(cacheKey);\n\n  return { name: chunkName, styleKeys, cacheKey, renderResult, className };\n}\n\n/**\n * Get keyframes that are actually used in styles.\n * Returns null if no keyframes are used (fast path for zero overhead).\n *\n * Optimization order:\n * 1. Check if any keyframes are defined (local or global) - if not, return null\n * 2. Extract animation names from styles - if none, return null\n * 3. Merge and filter keyframes to only used ones\n */\nfunction getUsedKeyframes(\n  styles: Styles,\n): Record<string, KeyframesSteps> | null {\n  // Fast path: no keyframes defined anywhere\n  const hasLocal = hasLocalKeyframes(styles);\n  const hasGlobal = hasGlobalKeyframes();\n  if (!hasLocal && !hasGlobal) return null;\n\n  // Extract animation names from styles (not from rendered CSS - faster)\n  const usedNames = extractAnimationNamesFromStyles(styles);\n  if (usedNames.size === 0) return null;\n\n  // Merge local and global keyframes\n  const local = hasLocal ? extractLocalKeyframes(styles) : null;\n  const global = hasGlobal ? getGlobalKeyframes() : null;\n  const allKeyframes = mergeKeyframes(local, global);\n\n  // Filter to only used keyframes\n  return filterUsedKeyframes(allKeyframes, usedNames);\n}\n\n/**\n * Process a chunk on the SSR path: allocate via collector, render, collect CSS.\n * Returns null if the chunk produces no CSS rules.\n */\nfunction processChunkSSR(\n  collector: ServerStyleCollector,\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const { className, isNewAllocation } = collector.allocateClassName(cacheKey);\n\n  if (isNewAllocation) {\n    const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);\n    if (renderResult.rules.length > 0) {\n      collector.collectChunk(cacheKey, className, renderResult.rules);\n      return {\n        name: chunkName,\n        styleKeys,\n        cacheKey,\n        renderResult,\n        className,\n      };\n    }\n    return null;\n  }\n\n  return {\n    name: chunkName,\n    styleKeys,\n    cacheKey,\n    renderResult: { rules: [] },\n    className,\n  };\n}\n\n/**\n * Hook to generate CSS classes from Tasty styles.\n * Handles style rendering, className allocation, and CSS injection.\n *\n * SSR-aware: when a ServerStyleCollector is available (via React context\n * or AsyncLocalStorage), CSS is collected during the render phase instead\n * of being injected into the DOM. useInsertionEffect does not run on the\n * server, so the collector path is the only active path during SSR.\n *\n * Uses chunking to split styles into logical groups for better caching\n * and CSS reuse across components.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { className } = useStyles({\n *     padding: '2x',\n *     fill: '#purple',\n *     radius: '1r',\n *   });\n *\n *   return <div className={className}>Styled content</div>;\n * }\n * ```\n */\nexport function useStyles(styles: UseStylesOptions): UseStylesResult {\n  const ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\n\n  // Array of dispose functions for each chunk\n  const disposeRef = useRef<(() => void)[]>([]);\n\n  // Store styles by their stringified key to avoid recomputing when only reference changes\n  const stylesRef = useRef<{ key: string; styles: Styles | undefined }>({\n    key: '',\n    styles: undefined,\n  });\n\n  // Resolve recipes before any processing (zero overhead if no recipes configured)\n  const resolvedStyles = useMemo(() => {\n    if (!styles) return styles;\n    return resolveRecipes(styles);\n  }, [styles]);\n\n  // Compute style key - this is a primitive string that captures style content\n  const styleKey = useMemo(() => {\n    if (!resolvedStyles || !hasKeys(resolvedStyles)) {\n      return '';\n    }\n    return stringifyStyles(resolvedStyles);\n  }, [resolvedStyles]);\n\n  // Update ref when styleKey changes (content actually changed)\n  if (stylesRef.current.key !== styleKey) {\n    stylesRef.current = { key: styleKey, styles: resolvedStyles };\n  }\n\n  // Process chunks: categorize, generate cache keys, render, and allocate classNames\n  // Only depends on styleKey (primitive), not styles object reference\n  const processedChunks: ProcessedChunk[] = useMemo(() => {\n    const currentStyles = stylesRef.current.styles;\n    if (!styleKey || !currentStyles) {\n      return [];\n    }\n\n    // Categorize style keys into chunks\n    const chunkMap = categorizeStyleKeys(\n      currentStyles as Record<string, unknown>,\n    );\n\n    const chunks: ProcessedChunk[] = [];\n\n    if (ssrCollector) {\n      // Ensure internal @property and :root token CSS is included\n      ssrCollector.collectInternals();\n\n      // SERVER PATH: allocate via collector, collect CSS\n      for (const [chunkName, chunkStyleKeys] of chunkMap) {\n        const chunk = processChunkSSR(\n          ssrCollector,\n          currentStyles,\n          chunkName,\n          chunkStyleKeys,\n        );\n        if (chunk) chunks.push(chunk);\n      }\n\n      // Collect keyframes on the server\n      const usedKeyframes = getUsedKeyframes(currentStyles);\n      if (usedKeyframes) {\n        for (const [name, steps] of Object.entries(usedKeyframes)) {\n          const css = formatKeyframesCSS(name, steps);\n          ssrCollector.collectKeyframes(name, css);\n        }\n      }\n\n      // Collect explicit @property rules on the server\n      if (hasLocalProperties(currentStyles)) {\n        const localProperties = extractLocalProperties(currentStyles);\n        if (localProperties) {\n          for (const [token, definition] of Object.entries(localProperties)) {\n            const css = formatPropertyCSS(token, definition);\n            if (css) {\n              ssrCollector.collectProperty(token, css);\n            }\n          }\n        }\n      }\n\n      // Collect @font-face rules on the server\n      if (hasLocalFontFace(currentStyles)) {\n        const localFontFace = extractLocalFontFace(currentStyles);\n        if (localFontFace) {\n          for (const [family, input] of Object.entries(localFontFace)) {\n            const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n              ? input\n              : [input];\n            for (const desc of descriptors) {\n              const hash = fontFaceContentHash(family, desc);\n              const css = formatFontFaceRule(family, desc);\n              ssrCollector.collectFontFace(hash, css);\n            }\n          }\n        }\n      }\n\n      // Collect @counter-style rules on the server\n      if (hasLocalCounterStyle(currentStyles)) {\n        const localCounterStyle = extractLocalCounterStyle(currentStyles);\n        if (localCounterStyle) {\n          for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n            const css = formatCounterStyleRule(name, descriptors);\n            ssrCollector.collectCounterStyle(name, css);\n          }\n        }\n      }\n\n      // Auto-infer @property types from rendered declarations (SSR).\n      // On the client this happens inside StyleInjector.inject(), which\n      // runs in useInsertionEffect and therefore never executes on the server.\n      if (getConfig().autoPropertyTypes !== false) {\n        const allRules = chunks.flatMap((c) => c.renderResult.rules);\n        if (allRules.length > 0) {\n          collectAutoInferredProperties(allRules, ssrCollector, currentStyles);\n        }\n      }\n    } else {\n      // CLIENT PATH: unchanged behavior\n      for (const [chunkName, chunkStyleKeys] of chunkMap) {\n        const chunk = processChunk(currentStyles, chunkName, chunkStyleKeys);\n        if (chunk) chunks.push(chunk);\n      }\n    }\n\n    return chunks;\n  }, [styleKey]);\n\n  // Inject styles in insertion effect (avoids render phase side effects).\n  // Does NOT run on the server — the SSR path above handles collection.\n  useInsertionEffect(() => {\n    // Cleanup all previous disposals\n    disposeRef.current.forEach((dispose) => dispose?.());\n    disposeRef.current = [];\n\n    // Fast path: no chunks to inject\n    if (processedChunks.length === 0) {\n      return;\n    }\n\n    const currentStyles = stylesRef.current.styles;\n\n    // Register explicit @properties first so they take precedence over auto-inference\n    // that happens during keyframe and style chunk injection.\n    // Token formats: $name → --name, #name → --name-color (with auto syntax: '<color>')\n    // Note: Global properties are injected once when styles are first generated (see markStylesGenerated)\n    if (currentStyles && hasLocalProperties(currentStyles)) {\n      const localProperties = extractLocalProperties(currentStyles);\n      if (localProperties) {\n        for (const [token, definition] of Object.entries(localProperties)) {\n          property(token, definition);\n        }\n      }\n    }\n\n    // Inject @font-face rules (permanent, no cleanup needed)\n    if (currentStyles && hasLocalFontFace(currentStyles)) {\n      const localFontFace = extractLocalFontFace(currentStyles);\n      if (localFontFace) {\n        for (const [family, input] of Object.entries(localFontFace)) {\n          const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n            ? input\n            : [input];\n          for (const desc of descriptors) {\n            fontFace(family, desc);\n          }\n        }\n      }\n    }\n\n    // Inject @counter-style rules (permanent, no cleanup needed)\n    if (currentStyles && hasLocalCounterStyle(currentStyles)) {\n      const localCounterStyle = extractLocalCounterStyle(currentStyles);\n      if (localCounterStyle) {\n        for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n          counterStyle(name, descriptors);\n        }\n      }\n    }\n\n    // Get keyframes that are actually used (returns null if none - zero overhead)\n    const usedKeyframes = currentStyles\n      ? getUsedKeyframes(currentStyles)\n      : null;\n\n    // Inject keyframes and build name map (only if we have keyframes)\n    let nameMap: Map<string, string> | null = null;\n\n    if (usedKeyframes) {\n      nameMap = new Map();\n      for (const [name, steps] of Object.entries(usedKeyframes)) {\n        const result = keyframes(steps, { name });\n        const injectedName = result.toString();\n        // Only add to map if name differs (optimization for replacement check)\n        if (injectedName !== name) {\n          nameMap.set(name, injectedName);\n        }\n        disposeRef.current.push(result.dispose);\n      }\n      // Clear map if no replacements needed\n      if (nameMap.size === 0) {\n        nameMap = null;\n      }\n    }\n\n    // Inject each chunk\n    for (const chunk of processedChunks) {\n      if (chunk.renderResult.rules.length > 0) {\n        // Replace animation names only if needed\n        const rulesToInject = nameMap\n          ? chunk.renderResult.rules.map((rule) => ({\n              ...rule,\n              declarations: replaceAnimationNames(rule.declarations, nameMap!),\n            }))\n          : chunk.renderResult.rules;\n\n        const { dispose } = inject(rulesToInject, {\n          cacheKey: chunk.cacheKey,\n        });\n        disposeRef.current.push(dispose);\n      }\n    }\n\n    return () => {\n      disposeRef.current.forEach((dispose) => dispose?.());\n      disposeRef.current = [];\n    };\n  }, [processedChunks]);\n\n  // Combine all chunk classNames\n  const className = useMemo(() => {\n    return processedChunks.map((chunk) => chunk.className).join(' ');\n  }, [processedChunks]);\n\n  return {\n    className,\n  };\n}\n"],"mappings":"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"}

package/dist/injector/sheet-manager.js

@@ -94,7 +94,7 @@ var SheetManager = class {
 			const groupMap = /* @__PURE__ */ new Map();
 			const atKey = (at) => at && at.length ? at.join("|") : "";
 			flattenedRules.forEach((r) => {
-				const key = `${atKey(r.atRules)}||${r.selector}`;
+				const key = `${atKey(r.atRules)}||${r.selector}||${r.startingStyle ? "1" : "0"}`;
 				const existing = groupMap.get(key);
 				if (existing) existing.declarations = existing.declarations ? `${existing.declarations} ${r.declarations}` : r.declarations;
 				else {
@@ -102,6 +102,7 @@ var SheetManager = class {
 						idx: groupedRules.length,
 						selector: r.selector,
 						atRules: r.atRules,
+						startingStyle: r.startingStyle,
 						declarations: r.declarations
 					});
 					groupedRules.push({ ...r });
@@ -111,6 +112,7 @@ var SheetManager = class {
 				groupedRules[val.idx] = {
 					selector: val.selector,
 					atRules: val.atRules,
+					startingStyle: val.startingStyle,
 					declarations: val.declarations
 				};
 			});
@@ -121,7 +123,8 @@ var SheetManager = class {
 			let lastInsertedIndex = null;
 			for (const rule of groupedRules) {
 				const declarations = rule.declarations;
-				const baseRule = `${rule.selector} { ${declarations} }`;
+				const innerContent = rule.startingStyle ? `@starting-style { ${declarations} }` : declarations;
+				const baseRule = `${rule.selector} { ${innerContent} }`;
 				let fullRule = baseRule;
 				if (rule.atRules && rule.atRules.length > 0) fullRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, baseRule);
 				const styleElement = targetSheet.sheet;