@tenphi/tasty 0.0.0-snapshot.ce10eff → 0.0.0-snapshot.ce578cb

package/README.md

@@ -385,7 +385,7 @@ const Pulse = tasty({
 });
 ```
 
-Here, `$pulse-scale: 1` is inferred as `<number>`, so Tasty injects `@property --pulse-scale` automatically before using it in the animation. Supported inferred syntaxes: `<number>`, `<length>`, `<percentage>`, `<angle>`, `<time>`, and `<color>`.
+Here, `$pulse-scale: 1` is inferred as `<number>`, so Tasty injects `@property --pulse-scale` automatically before using it in the animation. Numeric types (`<number>`, `<length>`, `<percentage>`, `<angle>`, `<time>`) are inferred from values; `<color>` is inferred from the `#name` token convention.
 
 If you prefer full manual control, disable auto-inference globally with `configure({ autoPropertyTypes: false })`.
 

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 } from './pipeline';\nimport { setGlobalPredefinedStates } from './states';\nimport {\n  normalizeHandlerDefinition,\n  registerHandler,\n  resetHandlers,\n} from './styles/predefined';\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 { KeyframesSteps, PropertyDefinition } from './injector/types';\nimport type { StyleDetails, UnitHandler } from './parser/types';\nimport type { TastyPlugin } from './plugins/types';\nimport type { RecipeStyles } 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   * 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   * 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   * Predefined tokens that are replaced during style parsing.\n   * Token values are processed through the parser (like component tokens).\n   * Use `$name` for custom properties and `#name` for color tokens.\n   *\n   * For color tokens (#name), boolean `true` is converted to `transparent`.\n   *\n   * @example\n   * ```ts\n   * configure({\n   *   tokens: {\n   *     $spacing: '2x',\n   *     '$card-padding': '4x',\n   *     '#accent': '#purple',\n   *     '#surface': '#white',\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: '$card-padding',  // → calc(4 * var(--gap))\n   *     fill: '#surface',          // → var(--white-color)\n   *   },\n   * });\n   * ```\n   */\n  tokens?: 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 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/**\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  // Companion --current-color-rgb is auto-created.\n  '#current': {\n    inherits: true,\n    initialValue: 'transparent',\n  },\n  // White and black are fundamental colors that need explicit initial values.\n  // Companion -rgb properties are auto-created from the color 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':\n    'system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif',\n  '--monospace-font':\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\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\n/**\n * Check if any global keyframes are configured.\n * Fast path: returns false if no keyframes were ever set.\n */\nexport function hasGlobalKeyframes(): boolean {\n  return globalKeyframes !== null && Object.keys(globalKeyframes).length > 0;\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}\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 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 * 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 mergedTokens: Record<string, string | number | boolean> = {};\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.tokens) {\n        mergedTokens = { ...mergedTokens, ...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.tokens) {\n    mergedTokens = { ...mergedTokens, ...config.tokens };\n  }\n  if (config.recipes) {\n    mergedRecipes = { ...mergedRecipes, ...config.recipes };\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 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 predefined tokens\n  // Note: Tokens are processed by the classifier, not here.\n  // We just store the raw values; the classifier will process them when encountered.\n  if (Object.keys(mergedTokens).length > 0) {\n    // Store tokens (keys are normalized to lowercase by setGlobalPredefinedTokens)\n    const processedTokens: Record<string, string> = {};\n    for (const [key, value] of Object.entries(mergedTokens)) {\n      if (key.startsWith('#')) {\n        // Color token - use shared helper for boolean handling\n        const normalized = normalizeColorTokenValue(value);\n        if (normalized === null) continue; // Skip false values\n        processedTokens[key] = String(normalized);\n      } else if (value === false) {\n        // Skip false values for non-color tokens\n        continue;\n      } else {\n        processedTokens[key] = String(value);\n      }\n    }\n    setGlobalPredefinedTokens(processedTokens);\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    handlers: _handlers,\n    tokens: _tokens,\n    recipes: _recipes,\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  globalProperties = null;\n  globalRecipes = null;\n  resetGlobalPredefinedTokens();\n  resetHandlers();\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 } from './pipeline';\nimport { setGlobalPredefinedStates } from './states';\nimport {\n  normalizeHandlerDefinition,\n  registerHandler,\n  resetHandlers,\n} from './styles/predefined';\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 { KeyframesSteps, PropertyDefinition } from './injector/types';\nimport type { StyleDetails, UnitHandler } from './parser/types';\nimport type { TastyPlugin } from './plugins/types';\nimport type { RecipeStyles } 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   * 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   * 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   * Predefined tokens that are replaced during style parsing.\n   * Token values are processed through the parser (like component tokens).\n   * Use `$name` for custom properties and `#name` for color tokens.\n   *\n   * For color tokens (#name), boolean `true` is converted to `transparent`.\n   *\n   * @example\n   * ```ts\n   * configure({\n   *   tokens: {\n   *     $spacing: '2x',\n   *     '$card-padding': '4x',\n   *     '#accent': '#purple',\n   *     '#surface': '#white',\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: '$card-padding',  // → calc(4 * var(--gap))\n   *     fill: '#surface',          // → var(--white-color)\n   *   },\n   * });\n   * ```\n   */\n  tokens?: 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 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/**\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':\n    'system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif',\n  '--monospace-font':\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\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\n/**\n * Check if any global keyframes are configured.\n * Fast path: returns false if no keyframes were ever set.\n */\nexport function hasGlobalKeyframes(): boolean {\n  return globalKeyframes !== null && Object.keys(globalKeyframes).length > 0;\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}\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 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 * 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 mergedTokens: Record<string, string | number | boolean> = {};\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.tokens) {\n        mergedTokens = { ...mergedTokens, ...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.tokens) {\n    mergedTokens = { ...mergedTokens, ...config.tokens };\n  }\n  if (config.recipes) {\n    mergedRecipes = { ...mergedRecipes, ...config.recipes };\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 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 predefined tokens\n  // Note: Tokens are processed by the classifier, not here.\n  // We just store the raw values; the classifier will process them when encountered.\n  if (Object.keys(mergedTokens).length > 0) {\n    // Store tokens (keys are normalized to lowercase by setGlobalPredefinedTokens)\n    const processedTokens: Record<string, string> = {};\n    for (const [key, value] of Object.entries(mergedTokens)) {\n      if (key.startsWith('#')) {\n        // Color token - use shared helper for boolean handling\n        const normalized = normalizeColorTokenValue(value);\n        if (normalized === null) continue; // Skip false values\n        processedTokens[key] = String(normalized);\n      } else if (value === false) {\n        // Skip false values for non-color tokens\n        continue;\n      } else {\n        processedTokens[key] = String(value);\n      }\n    }\n    setGlobalPredefinedTokens(processedTokens);\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    handlers: _handlers,\n    tokens: _tokens,\n    recipes: _recipes,\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  globalProperties = null;\n  globalRecipes = null;\n  resetGlobalPredefinedTokens();\n  resetHandlers();\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

@@ -1,5 +1,5 @@
-import { stringifyStyles } from "../utils/styles.js";
 import { extractLocalProperties, hasLocalProperties } from "../properties/index.js";
+import { stringifyStyles } from "../utils/styles.js";
 import { getGlobalKeyframes, hasGlobalKeyframes } from "../config.js";
 import { CHUNK_NAMES, categorizeStyleKeys } from "../chunks/definitions.js";
 import { generateChunkCacheKey } from "../chunks/cacheKey.js";

package/dist/injector/injector.js

@@ -1,6 +1,6 @@
+import { getEffectiveDefinition, normalizePropertyDefinition } from "../properties/index.js";
 import { isDevEnv } from "../utils/is-dev-env.js";
 import { parseStyle } from "../utils/styles.js";
-import { colorInitialValueToRgb, getEffectiveDefinition, normalizePropertyDefinition } from "../properties/index.js";
 import { SheetManager } from "./sheet-manager.js";
 
 //#region src/injector/injector.ts
@@ -94,9 +94,10 @@ var StyleInjector = class {
 		});
 		if (this.config.autoPropertyTypes !== false) {
 			const resolver = registry.propertyTypeResolver;
+			const defined = registry.injectedProperties;
 			for (const rule of rulesToInsert) {
 				if (!rule.declarations) continue;
-				resolver.scanDeclarations(rule.declarations, (name) => this.isPropertyDefined(name, { root }), (name, syntax, initialValue) => {
+				resolver.scanDeclarations(rule.declarations, (name) => defined.has(name), (name, syntax, initialValue) => {
 					this.property(name, {
 						syntax,
 						inherits: true,
@@ -140,9 +141,10 @@ var StyleInjector = class {
 		if (!rules || rules.length === 0) return { dispose: () => {} };
 		if (this.config.autoPropertyTypes !== false) {
 			const resolver = registry.propertyTypeResolver;
+			const defined = registry.injectedProperties;
 			for (const rule of rules) {
 				if (!rule.declarations) continue;
-				resolver.scanDeclarations(rule.declarations, (name) => this.isPropertyDefined(name, { root }), (name, syntax, initialValue) => {
+				resolver.scanDeclarations(rule.declarations, (name) => defined.has(name), (name, syntax, initialValue) => {
 					this.property(name, {
 						syntax,
 						inherits: true,
@@ -301,15 +303,6 @@ var StyleInjector = class {
 		};
 		if (!this.sheetManager.insertGlobalRule(registry, [rule], `property:${name}`, root)) return;
 		registry.injectedProperties.set(cssName, normalizedDef);
-		if (effectiveResult.isColor) {
-			const rgbCssName = `${cssName}-rgb`;
-			if (!this.isPropertyDefined(rgbCssName, { root })) this.property(rgbCssName, {
-				syntax: "<number>+",
-				inherits: definition.inherits,
-				initialValue: colorInitialValueToRgb(definition.initialValue),
-				root
-			});
-		}
 	}
 	/**
 	* Check whether a given @property name was already injected by this injector.
@@ -368,7 +361,7 @@ var StyleInjector = class {
 			dispose: () => {}
 		};
 		const { info, declarations } = result;
-		if (this.config.autoPropertyTypes !== false && declarations) registry.propertyTypeResolver.scanDeclarations(declarations, (name) => this.isPropertyDefined(name, { root }), (name, syntax, initialValue) => {
+		if (this.config.autoPropertyTypes !== false && declarations) registry.propertyTypeResolver.scanDeclarations(declarations, (name) => registry.injectedProperties.has(name), (name, syntax, initialValue) => {
 			this.property(name, {
 				syntax,
 				inherits: true,

package/dist/injector/injector.js.map

@@ -1 +1 @@
-{"version":3,"file":"injector.js","names":[],"sources":["../../src/injector/injector.ts"],"sourcesContent":["/**\n * Style injector that works with structured style objects\n * Eliminates CSS string parsing for better performance\n */\n\nimport type { StyleResult } from '../pipeline';\nimport {\n  colorInitialValueToRgb,\n  getEffectiveDefinition,\n  normalizePropertyDefinition,\n} from '../properties';\nimport { isDevEnv } from '../utils/is-dev-env';\nimport type { StyleValue } from '../utils/styles';\nimport { parseStyle } from '../utils/styles';\n\nimport { SheetManager } from './sheet-manager';\nimport type {\n  CacheMetrics,\n  GlobalInjectResult,\n  InjectResult,\n  KeyframesResult,\n  KeyframesSteps,\n  PropertyDefinition,\n  RawCSSResult,\n  RootRegistry,\n  StyleInjectorConfig,\n  StyleRule,\n} from './types';\n\n/**\n * Generate sequential class name with format t{number}\n */\nfunction generateClassName(counter: number): string {\n  return `t${counter}`;\n}\n\nexport class StyleInjector {\n  private sheetManager: SheetManager;\n  private config: StyleInjectorConfig;\n  private cleanupScheduled = false;\n  private globalRuleCounter = 0;\n\n  /** @internal — exposed for debug utilities only */\n  get _sheetManager(): SheetManager {\n    return this.sheetManager;\n  }\n\n  constructor(config: StyleInjectorConfig = {}) {\n    this.config = config;\n    this.sheetManager = new SheetManager(config);\n  }\n\n  /**\n   * Allocate a className for a cacheKey without injecting styles yet.\n   * This allows separating className allocation (render phase) from style injection (insertion phase).\n   */\n  allocateClassName(\n    cacheKey: string,\n    options?: { root?: Document | ShadowRoot },\n  ): { className: string; isNewAllocation: boolean } {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    // Check if we can reuse existing className for this cache key\n    if (registry.cacheKeyToClassName.has(cacheKey)) {\n      const className = registry.cacheKeyToClassName.get(cacheKey)!;\n      return {\n        className,\n        isNewAllocation: false,\n      };\n    }\n\n    // Generate new className and reserve it\n    const className = generateClassName(registry.classCounter++);\n\n    // Create placeholder RuleInfo to reserve the className\n    const placeholderRuleInfo = {\n      className,\n      ruleIndex: -1, // Placeholder - will be set during actual injection\n      sheetIndex: -1, // Placeholder - will be set during actual injection\n    };\n\n    // Store RuleInfo only once by className, and map cacheKey separately\n    registry.rules.set(className, placeholderRuleInfo);\n    registry.cacheKeyToClassName.set(cacheKey, className);\n\n    return {\n      className,\n      isNewAllocation: true,\n    };\n  }\n\n  /**\n   * Inject styles from StyleResult objects\n   */\n  inject(\n    rules: StyleResult[],\n    options?: { root?: Document | ShadowRoot; cacheKey?: string },\n  ): InjectResult {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    if (rules.length === 0) {\n      return {\n        className: '',\n        dispose: () => {\n          /* noop */\n        },\n      };\n    }\n\n    // Rules are now in StyleRule format directly\n\n    // Check if we can reuse based on cache key\n    const cacheKey = options?.cacheKey;\n    let className: string;\n    let isPreAllocated = false;\n\n    if (cacheKey && registry.cacheKeyToClassName.has(cacheKey)) {\n      // Reuse existing class for this cache key\n      className = registry.cacheKeyToClassName.get(cacheKey)!;\n      const existingRuleInfo = registry.rules.get(className)!;\n\n      // Check if this is a placeholder (pre-allocated but not yet injected)\n      isPreAllocated =\n        existingRuleInfo.ruleIndex === -1 && existingRuleInfo.sheetIndex === -1;\n\n      if (!isPreAllocated) {\n        // Already injected - just increment refCount\n        const currentRefCount = registry.refCounts.get(className) || 0;\n        registry.refCounts.set(className, currentRefCount + 1);\n\n        // Update metrics\n        if (registry.metrics) {\n          registry.metrics.hits++;\n        }\n\n        return {\n          className,\n          dispose: () => this.dispose(className, registry),\n        };\n      }\n    } else {\n      // Generate new className\n      className = generateClassName(registry.classCounter++);\n    }\n\n    // Process rules: handle needsClassName flag and apply specificity\n    const rulesToInsert = rules.map((rule) => {\n      let newSelector = rule.selector;\n\n      // If rule needs className prepended\n      if (rule.needsClassName) {\n        // Handle multiple selectors (separated by ||| for OR conditions)\n        const selectorParts = newSelector ? newSelector.split('|||') : [''];\n\n        const classPrefix = `.${className}.${className}`;\n\n        newSelector = selectorParts\n          .map((part) => {\n            const classSelector = part ? `${classPrefix}${part}` : classPrefix;\n\n            // If there's a root prefix, add it before the class selector\n            if (rule.rootPrefix) {\n              return `${rule.rootPrefix} ${classSelector}`;\n            }\n            return classSelector;\n          })\n          .join(', ');\n      }\n\n      return {\n        ...rule,\n        selector: newSelector,\n        needsClassName: undefined, // Remove the flag after processing\n        rootPrefix: undefined, // Remove rootPrefix after processing\n      };\n    });\n\n    // Auto-register @property for custom properties with inferable types.\n    // Subsumes the previous color-only scan — now covers <number>, <length>,\n    // <angle>, <percentage>, <time>, and <color>.\n    if (this.config.autoPropertyTypes !== false) {\n      const resolver = registry.propertyTypeResolver;\n      for (const rule of rulesToInsert) {\n        if (!rule.declarations) continue;\n        resolver.scanDeclarations(\n          rule.declarations,\n          (name) => this.isPropertyDefined(name, { root }),\n          (name, syntax, initialValue) => {\n            this.property(name, {\n              syntax,\n              inherits: true,\n              initialValue,\n              root,\n            });\n          },\n        );\n      }\n    }\n\n    // Insert rules using existing sheet manager\n    const ruleInfo = this.sheetManager.insertRule(\n      registry,\n      rulesToInsert,\n      className,\n      root,\n    );\n\n    if (!ruleInfo) {\n      // Update metrics\n      if (registry.metrics) {\n        registry.metrics.misses++;\n      }\n\n      return {\n        className,\n        dispose: () => {\n          /* noop */\n        },\n      };\n    }\n\n    // Store in registry\n    registry.refCounts.set(className, 1);\n\n    if (isPreAllocated) {\n      // Update the existing placeholder entry with real rule info\n      registry.rules.set(className, ruleInfo);\n      // cacheKey mapping already exists from allocation\n    } else {\n      // Store new entries\n      registry.rules.set(className, ruleInfo);\n      if (cacheKey) {\n        registry.cacheKeyToClassName.set(cacheKey, className);\n      }\n    }\n\n    // Update metrics\n    if (registry.metrics) {\n      registry.metrics.totalInsertions++;\n      registry.metrics.misses++;\n    }\n\n    return {\n      className,\n      dispose: () => this.dispose(className, registry),\n    };\n  }\n\n  /**\n   * Inject global styles (rules without a generated tasty class selector)\n   * This ensures we don't reserve a tasty class name (t{number}) for global rules,\n   * which could otherwise collide with element-level styles and break lookups.\n   */\n  injectGlobal(\n    rules: StyleResult[],\n    options?: { root?: Document | ShadowRoot },\n  ): GlobalInjectResult {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    if (!rules || rules.length === 0) {\n      return {\n        dispose: () => {\n          /* noop */\n        },\n      };\n    }\n\n    // Auto-register @property for custom properties in global rules\n    if (this.config.autoPropertyTypes !== false) {\n      const resolver = registry.propertyTypeResolver;\n      for (const rule of rules) {\n        if (!rule.declarations) continue;\n        resolver.scanDeclarations(\n          rule.declarations,\n          (name) => this.isPropertyDefined(name, { root }),\n          (name, syntax, initialValue) => {\n            this.property(name, {\n              syntax,\n              inherits: true,\n              initialValue,\n              root,\n            });\n          },\n        );\n      }\n    }\n\n    // Use a non-tasty identifier to avoid any collisions with .t{number} classes\n    const key = `global:${this.globalRuleCounter++}`;\n\n    const info = this.sheetManager.insertGlobalRule(\n      registry,\n      rules as unknown as StyleRule[],\n      key,\n      root,\n    );\n\n    if (registry.metrics) {\n      registry.metrics.totalInsertions++;\n    }\n\n    return {\n      dispose: () => {\n        if (info) this.sheetManager.deleteGlobalRule(registry, key);\n      },\n    };\n  }\n\n  /**\n   * Inject raw CSS text directly without parsing\n   * This is a low-overhead alternative to createGlobalStyle for raw CSS\n   * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking\n   */\n  injectRawCSS(\n    css: string,\n    options?: { root?: Document | ShadowRoot },\n  ): RawCSSResult {\n    const root = options?.root || document;\n    return this.sheetManager.injectRawCSS(css, root);\n  }\n\n  /**\n   * Get raw CSS text for SSR\n   */\n  getRawCSSText(options?: { root?: Document | ShadowRoot }): string {\n    const root = options?.root || document;\n    return this.sheetManager.getRawCSSText(root);\n  }\n\n  /**\n   * Dispose of a className\n   */\n  private dispose(className: string, registry: RootRegistry): void {\n    const currentRefCount = registry.refCounts.get(className);\n    // Guard against stale double-dispose or mismatched lifecycle\n    if (currentRefCount == null || currentRefCount <= 0) {\n      return;\n    }\n\n    const newRefCount = currentRefCount - 1;\n    registry.refCounts.set(className, newRefCount);\n\n    if (newRefCount === 0) {\n      // Update metrics\n      if (registry.metrics) {\n        registry.metrics.totalUnused++;\n      }\n\n      // Check if cleanup should be scheduled\n      this.sheetManager.checkCleanupNeeded(registry);\n    }\n  }\n\n  /**\n   * Force bulk cleanup of unused styles\n   */\n  cleanup(root?: Document | ShadowRoot): void {\n    const registry = this.sheetManager.getRegistry(root || document);\n    // Clean up ALL unused rules regardless of batch ratio\n    this.sheetManager.forceCleanup(registry);\n  }\n\n  /**\n   * Get CSS text from all sheets (for SSR)\n   */\n  getCssText(options?: { root?: Document | ShadowRoot }): string {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n    return this.sheetManager.getCssText(registry);\n  }\n\n  /**\n   * Get CSS only for the provided tasty classNames (e.g., [\"t0\",\"t3\"])\n   */\n  getCssTextForClasses(\n    classNames: Iterable<string>,\n    options?: { root?: Document | ShadowRoot },\n  ): string {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    const cssChunks: string[] = [];\n    for (const cls of classNames) {\n      const info = registry.rules.get(cls);\n      if (info) {\n        // Always prefer reading from the live stylesheet, since indices can change\n        const sheet = registry.sheets[info.sheetIndex];\n        const styleSheet = sheet?.sheet?.sheet;\n        if (styleSheet) {\n          const start = Math.max(0, info.ruleIndex);\n          const end = Math.min(\n            styleSheet.cssRules.length - 1,\n            (info.endRuleIndex as number) ?? info.ruleIndex,\n          );\n          // Additional validation: ensure indices are valid and in correct order\n          if (\n            start >= 0 &&\n            end >= start &&\n            start < styleSheet.cssRules.length\n          ) {\n            for (let i = start; i <= end; i++) {\n              const rule = styleSheet.cssRules[i] as CSSRule | undefined;\n              if (rule) cssChunks.push(rule.cssText);\n            }\n          }\n        } else if (info.cssText && info.cssText.length) {\n          // Fallback in environments without CSSOM access\n          cssChunks.push(...info.cssText);\n        }\n      }\n    }\n    return cssChunks.join('\\n');\n  }\n\n  /**\n   * Get cache performance metrics\n   */\n  getMetrics(options?: { root?: Document | ShadowRoot }): CacheMetrics | null {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n    return this.sheetManager.getMetrics(registry);\n  }\n\n  /**\n   * Reset cache performance metrics\n   */\n  resetMetrics(options?: { root?: Document | ShadowRoot }): void {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n    this.sheetManager.resetMetrics(registry);\n  }\n\n  /**\n   * Define a CSS @property custom property.\n   *\n   * Accepts tasty token syntax for the property name:\n   * - `$name` → defines `--name`\n   * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')\n   * - `--name` → defines `--name` (legacy format)\n   *\n   * Example:\n   * @property --rotation { syntax: \"<angle>\"; inherits: false; initial-value: 45deg; }\n   *\n   * Note: No caching or dispose — this defines a global property.\n   *\n   * If the same property is registered with different options, a warning is emitted\n   * but the original definition is preserved (CSS @property cannot be redefined).\n   */\n  property(\n    name: string,\n    options?: PropertyDefinition & {\n      root?: Document | ShadowRoot;\n    },\n  ): void {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    // Parse the token and get effective definition\n    // This handles $name, #name, --name formats and auto-sets syntax for colors\n    const userDefinition: PropertyDefinition = {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n    };\n\n    const effectiveResult = getEffectiveDefinition(name, userDefinition);\n\n    if (!effectiveResult.isValid) {\n      if (isDevEnv()) {\n        console.warn(\n          `[Tasty] property(): ${effectiveResult.error}. Got: \"${name}\"`,\n        );\n      }\n      return;\n    }\n\n    const cssName = effectiveResult.cssName;\n    const definition = effectiveResult.definition;\n\n    // Normalize the definition for comparison\n    const normalizedDef = normalizePropertyDefinition(definition);\n\n    // Check if already defined\n    const existingDef = registry.injectedProperties.get(cssName);\n    if (existingDef !== undefined) {\n      // Property already exists - check if definitions match\n      if (existingDef !== normalizedDef) {\n        // Different definition - warn but don't replace (CSS @property can't be redefined)\n        if (isDevEnv()) {\n          console.warn(\n            `[Tasty] @property ${cssName} was already defined with a different declaration. ` +\n              `The new declaration will be ignored. ` +\n              `Original: ${existingDef}, New: ${normalizedDef}`,\n          );\n        }\n      }\n      // Either exact match or warned - skip injection\n      return;\n    }\n\n    const parts: string[] = [];\n\n    if (definition.syntax != null) {\n      let syntax = String(definition.syntax).trim();\n      if (!/^['\"]/u.test(syntax)) syntax = `\"${syntax}\"`;\n      parts.push(`syntax: ${syntax};`);\n    }\n\n    // inherits is required by the CSS @property spec - default to true\n    const inherits = definition.inherits ?? true;\n    parts.push(`inherits: ${inherits ? 'true' : 'false'};`);\n\n    if (definition.initialValue != null) {\n      let initialValueStr: string;\n      if (typeof definition.initialValue === 'number') {\n        initialValueStr = String(definition.initialValue);\n      } else {\n        // Process via tasty parser to resolve custom units/functions\n        initialValueStr = parseStyle(\n          definition.initialValue as StyleValue,\n        ).output;\n      }\n      parts.push(`initial-value: ${initialValueStr};`);\n    }\n\n    const declarations = parts.join(' ').trim();\n\n    const rule: StyleRule = {\n      selector: `@property ${cssName}`,\n      declarations,\n    } as StyleRule;\n\n    // Insert as a global rule; only mark injected when insertion succeeds\n    const info = this.sheetManager.insertGlobalRule(\n      registry,\n      [rule],\n      `property:${name}`,\n      root,\n    );\n\n    if (!info) {\n      return;\n    }\n\n    // Track that this property was injected with its normalized definition\n    registry.injectedProperties.set(cssName, normalizedDef);\n\n    // Auto-register companion -rgb property for color properties.\n    // E.g. --white-color gets a companion --white-color-rgb with syntax: '<number>+'\n    if (effectiveResult.isColor) {\n      const rgbCssName = `${cssName}-rgb`;\n      if (!this.isPropertyDefined(rgbCssName, { root })) {\n        this.property(rgbCssName, {\n          syntax: '<number>+',\n          inherits: definition.inherits,\n          initialValue: colorInitialValueToRgb(definition.initialValue),\n          root,\n        });\n      }\n    }\n  }\n\n  /**\n   * Check whether a given @property name was already injected by this injector.\n   *\n   * Accepts tasty token syntax:\n   * - `$name` → checks `--name`\n   * - `#name` → checks `--name-color`\n   * - `--name` → checks `--name` (legacy format)\n   */\n  isPropertyDefined(\n    name: string,\n    options?: { root?: Document | ShadowRoot },\n  ): boolean {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    // Parse the token to get the CSS property name\n    const effectiveResult = getEffectiveDefinition(name, {});\n    if (!effectiveResult.isValid) {\n      return false;\n    }\n\n    return registry.injectedProperties.has(effectiveResult.cssName);\n  }\n\n  /**\n   * Inject keyframes and return object with toString() and dispose()\n   *\n   * Keyframes are cached by content (steps). If the same content is injected\n   * multiple times with different provided names, the first injected name is reused.\n   *\n   * If the same name is provided with different content (collision), a unique\n   * name is generated to avoid overwriting the existing keyframes.\n   */\n  keyframes(\n    steps: KeyframesSteps,\n    nameOrOptions?: string | { root?: Document | ShadowRoot; name?: string },\n  ): KeyframesResult {\n    // Parse parameters\n    const isStringName = typeof nameOrOptions === 'string';\n    const providedName = isStringName ? nameOrOptions : nameOrOptions?.name;\n    const root = isStringName ? document : nameOrOptions?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    if (Object.keys(steps).length === 0) {\n      return {\n        toString: () => '',\n        dispose: () => {\n          /* noop */\n        },\n      };\n    }\n\n    // Generate content-based cache key (independent of provided name)\n    const contentHash = JSON.stringify(steps);\n\n    // Check if this exact content is already cached\n    const existing = registry.keyframesCache.get(contentHash);\n    if (existing) {\n      existing.refCount++;\n      return {\n        toString: () => existing.name,\n        dispose: () => this.disposeKeyframes(contentHash, registry),\n      };\n    }\n\n    // Determine the actual name to use\n    let actualName: string;\n\n    if (providedName) {\n      // Check if this name is already used with different content\n      const existingContentForName =\n        registry.keyframesNameToContent.get(providedName);\n\n      if (existingContentForName && existingContentForName !== contentHash) {\n        // Name collision: same name, different content\n        // Generate a unique name to avoid overwriting\n        actualName = `${providedName}-k${registry.keyframesCounter++}`;\n      } else {\n        // Name is available or used with same content\n        actualName = providedName;\n        // Track this name -> content mapping\n        registry.keyframesNameToContent.set(providedName, contentHash);\n      }\n    } else {\n      // No name provided, generate one\n      actualName = `k${registry.keyframesCounter++}`;\n    }\n\n    // Insert keyframes\n    const result = this.sheetManager.insertKeyframes(\n      registry,\n      steps,\n      actualName,\n      root,\n    );\n    if (!result) {\n      return {\n        toString: () => '',\n        dispose: () => {\n          /* noop */\n        },\n      };\n    }\n\n    const { info, declarations } = result;\n\n    // Auto-register @property for custom properties found in keyframe declarations\n    if (this.config.autoPropertyTypes !== false && declarations) {\n      const resolver = registry.propertyTypeResolver;\n      resolver.scanDeclarations(\n        declarations,\n        (name) => this.isPropertyDefined(name, { root }),\n        (name, syntax, initialValue) => {\n          this.property(name, {\n            syntax,\n            inherits: true,\n            initialValue,\n            root,\n          });\n        },\n      );\n    }\n\n    // Cache the result by content hash\n    registry.keyframesCache.set(contentHash, {\n      name: actualName,\n      refCount: 1,\n      info,\n    });\n\n    // Update metrics\n    if (registry.metrics) {\n      registry.metrics.totalInsertions++;\n      registry.metrics.misses++;\n    }\n\n    return {\n      toString: () => actualName,\n      dispose: () => this.disposeKeyframes(contentHash, registry),\n    };\n  }\n\n  /**\n   * Dispose keyframes\n   */\n  private disposeKeyframes(contentHash: string, registry: RootRegistry): void {\n    const entry = registry.keyframesCache.get(contentHash);\n    if (!entry) return;\n\n    entry.refCount--;\n    if (entry.refCount <= 0) {\n      // Dispose immediately - keyframes are global and safe to clean up right away\n      this.sheetManager.deleteKeyframes(registry, entry.info);\n      registry.keyframesCache.delete(contentHash);\n\n      // Clean up name-to-content mapping if this name was tracked\n      // Find and remove the mapping for this content hash\n      for (const [name, hash] of registry.keyframesNameToContent.entries()) {\n        if (hash === contentHash) {\n          registry.keyframesNameToContent.delete(name);\n          break;\n        }\n      }\n\n      // Update metrics\n      if (registry.metrics) {\n        registry.metrics.totalUnused++;\n        registry.metrics.stylesCleanedUp++;\n      }\n    }\n  }\n\n  /**\n   * Destroy all resources for a root\n   */\n  destroy(root?: Document | ShadowRoot): void {\n    const targetRoot = root || document;\n    this.sheetManager.cleanup(targetRoot);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"injector.js","names":[],"sources":["../../src/injector/injector.ts"],"sourcesContent":["/**\n * Style injector that works with structured style objects\n * Eliminates CSS string parsing for better performance\n */\n\nimport type { StyleResult } from '../pipeline';\nimport {\n  getEffectiveDefinition,\n  normalizePropertyDefinition,\n} from '../properties';\nimport { isDevEnv } from '../utils/is-dev-env';\nimport type { StyleValue } from '../utils/styles';\nimport { parseStyle } from '../utils/styles';\n\nimport { SheetManager } from './sheet-manager';\nimport type {\n  CacheMetrics,\n  GlobalInjectResult,\n  InjectResult,\n  KeyframesResult,\n  KeyframesSteps,\n  PropertyDefinition,\n  RawCSSResult,\n  RootRegistry,\n  StyleInjectorConfig,\n  StyleRule,\n} from './types';\n\n/**\n * Generate sequential class name with format t{number}\n */\nfunction generateClassName(counter: number): string {\n  return `t${counter}`;\n}\n\nexport class StyleInjector {\n  private sheetManager: SheetManager;\n  private config: StyleInjectorConfig;\n  private cleanupScheduled = false;\n  private globalRuleCounter = 0;\n\n  /** @internal — exposed for debug utilities only */\n  get _sheetManager(): SheetManager {\n    return this.sheetManager;\n  }\n\n  constructor(config: StyleInjectorConfig = {}) {\n    this.config = config;\n    this.sheetManager = new SheetManager(config);\n  }\n\n  /**\n   * Allocate a className for a cacheKey without injecting styles yet.\n   * This allows separating className allocation (render phase) from style injection (insertion phase).\n   */\n  allocateClassName(\n    cacheKey: string,\n    options?: { root?: Document | ShadowRoot },\n  ): { className: string; isNewAllocation: boolean } {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    // Check if we can reuse existing className for this cache key\n    if (registry.cacheKeyToClassName.has(cacheKey)) {\n      const className = registry.cacheKeyToClassName.get(cacheKey)!;\n      return {\n        className,\n        isNewAllocation: false,\n      };\n    }\n\n    // Generate new className and reserve it\n    const className = generateClassName(registry.classCounter++);\n\n    // Create placeholder RuleInfo to reserve the className\n    const placeholderRuleInfo = {\n      className,\n      ruleIndex: -1, // Placeholder - will be set during actual injection\n      sheetIndex: -1, // Placeholder - will be set during actual injection\n    };\n\n    // Store RuleInfo only once by className, and map cacheKey separately\n    registry.rules.set(className, placeholderRuleInfo);\n    registry.cacheKeyToClassName.set(cacheKey, className);\n\n    return {\n      className,\n      isNewAllocation: true,\n    };\n  }\n\n  /**\n   * Inject styles from StyleResult objects\n   */\n  inject(\n    rules: StyleResult[],\n    options?: { root?: Document | ShadowRoot; cacheKey?: string },\n  ): InjectResult {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    if (rules.length === 0) {\n      return {\n        className: '',\n        dispose: () => {\n          /* noop */\n        },\n      };\n    }\n\n    // Rules are now in StyleRule format directly\n\n    // Check if we can reuse based on cache key\n    const cacheKey = options?.cacheKey;\n    let className: string;\n    let isPreAllocated = false;\n\n    if (cacheKey && registry.cacheKeyToClassName.has(cacheKey)) {\n      // Reuse existing class for this cache key\n      className = registry.cacheKeyToClassName.get(cacheKey)!;\n      const existingRuleInfo = registry.rules.get(className)!;\n\n      // Check if this is a placeholder (pre-allocated but not yet injected)\n      isPreAllocated =\n        existingRuleInfo.ruleIndex === -1 && existingRuleInfo.sheetIndex === -1;\n\n      if (!isPreAllocated) {\n        // Already injected - just increment refCount\n        const currentRefCount = registry.refCounts.get(className) || 0;\n        registry.refCounts.set(className, currentRefCount + 1);\n\n        // Update metrics\n        if (registry.metrics) {\n          registry.metrics.hits++;\n        }\n\n        return {\n          className,\n          dispose: () => this.dispose(className, registry),\n        };\n      }\n    } else {\n      // Generate new className\n      className = generateClassName(registry.classCounter++);\n    }\n\n    // Process rules: handle needsClassName flag and apply specificity\n    const rulesToInsert = rules.map((rule) => {\n      let newSelector = rule.selector;\n\n      // If rule needs className prepended\n      if (rule.needsClassName) {\n        // Handle multiple selectors (separated by ||| for OR conditions)\n        const selectorParts = newSelector ? newSelector.split('|||') : [''];\n\n        const classPrefix = `.${className}.${className}`;\n\n        newSelector = selectorParts\n          .map((part) => {\n            const classSelector = part ? `${classPrefix}${part}` : classPrefix;\n\n            // If there's a root prefix, add it before the class selector\n            if (rule.rootPrefix) {\n              return `${rule.rootPrefix} ${classSelector}`;\n            }\n            return classSelector;\n          })\n          .join(', ');\n      }\n\n      return {\n        ...rule,\n        selector: newSelector,\n        needsClassName: undefined, // Remove the flag after processing\n        rootPrefix: undefined, // Remove rootPrefix after processing\n      };\n    });\n\n    // Auto-register @property for custom properties with inferable types.\n    // Colors are detected by --*-color name pattern, numeric types by value.\n    if (this.config.autoPropertyTypes !== false) {\n      const resolver = registry.propertyTypeResolver;\n      const defined = registry.injectedProperties;\n      for (const rule of rulesToInsert) {\n        if (!rule.declarations) continue;\n        resolver.scanDeclarations(\n          rule.declarations,\n          (name) => defined.has(name),\n          (name, syntax, initialValue) => {\n            this.property(name, {\n              syntax,\n              inherits: true,\n              initialValue,\n              root,\n            });\n          },\n        );\n      }\n    }\n\n    // Insert rules using existing sheet manager\n    const ruleInfo = this.sheetManager.insertRule(\n      registry,\n      rulesToInsert,\n      className,\n      root,\n    );\n\n    if (!ruleInfo) {\n      // Update metrics\n      if (registry.metrics) {\n        registry.metrics.misses++;\n      }\n\n      return {\n        className,\n        dispose: () => {\n          /* noop */\n        },\n      };\n    }\n\n    // Store in registry\n    registry.refCounts.set(className, 1);\n\n    if (isPreAllocated) {\n      // Update the existing placeholder entry with real rule info\n      registry.rules.set(className, ruleInfo);\n      // cacheKey mapping already exists from allocation\n    } else {\n      // Store new entries\n      registry.rules.set(className, ruleInfo);\n      if (cacheKey) {\n        registry.cacheKeyToClassName.set(cacheKey, className);\n      }\n    }\n\n    // Update metrics\n    if (registry.metrics) {\n      registry.metrics.totalInsertions++;\n      registry.metrics.misses++;\n    }\n\n    return {\n      className,\n      dispose: () => this.dispose(className, registry),\n    };\n  }\n\n  /**\n   * Inject global styles (rules without a generated tasty class selector)\n   * This ensures we don't reserve a tasty class name (t{number}) for global rules,\n   * which could otherwise collide with element-level styles and break lookups.\n   */\n  injectGlobal(\n    rules: StyleResult[],\n    options?: { root?: Document | ShadowRoot },\n  ): GlobalInjectResult {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    if (!rules || rules.length === 0) {\n      return {\n        dispose: () => {\n          /* noop */\n        },\n      };\n    }\n\n    // Auto-register @property for custom properties in global rules\n    if (this.config.autoPropertyTypes !== false) {\n      const resolver = registry.propertyTypeResolver;\n      const defined = registry.injectedProperties;\n      for (const rule of rules) {\n        if (!rule.declarations) continue;\n        resolver.scanDeclarations(\n          rule.declarations,\n          (name) => defined.has(name),\n          (name, syntax, initialValue) => {\n            this.property(name, {\n              syntax,\n              inherits: true,\n              initialValue,\n              root,\n            });\n          },\n        );\n      }\n    }\n\n    // Use a non-tasty identifier to avoid any collisions with .t{number} classes\n    const key = `global:${this.globalRuleCounter++}`;\n\n    const info = this.sheetManager.insertGlobalRule(\n      registry,\n      rules as unknown as StyleRule[],\n      key,\n      root,\n    );\n\n    if (registry.metrics) {\n      registry.metrics.totalInsertions++;\n    }\n\n    return {\n      dispose: () => {\n        if (info) this.sheetManager.deleteGlobalRule(registry, key);\n      },\n    };\n  }\n\n  /**\n   * Inject raw CSS text directly without parsing\n   * This is a low-overhead alternative to createGlobalStyle for raw CSS\n   * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking\n   */\n  injectRawCSS(\n    css: string,\n    options?: { root?: Document | ShadowRoot },\n  ): RawCSSResult {\n    const root = options?.root || document;\n    return this.sheetManager.injectRawCSS(css, root);\n  }\n\n  /**\n   * Get raw CSS text for SSR\n   */\n  getRawCSSText(options?: { root?: Document | ShadowRoot }): string {\n    const root = options?.root || document;\n    return this.sheetManager.getRawCSSText(root);\n  }\n\n  /**\n   * Dispose of a className\n   */\n  private dispose(className: string, registry: RootRegistry): void {\n    const currentRefCount = registry.refCounts.get(className);\n    // Guard against stale double-dispose or mismatched lifecycle\n    if (currentRefCount == null || currentRefCount <= 0) {\n      return;\n    }\n\n    const newRefCount = currentRefCount - 1;\n    registry.refCounts.set(className, newRefCount);\n\n    if (newRefCount === 0) {\n      // Update metrics\n      if (registry.metrics) {\n        registry.metrics.totalUnused++;\n      }\n\n      // Check if cleanup should be scheduled\n      this.sheetManager.checkCleanupNeeded(registry);\n    }\n  }\n\n  /**\n   * Force bulk cleanup of unused styles\n   */\n  cleanup(root?: Document | ShadowRoot): void {\n    const registry = this.sheetManager.getRegistry(root || document);\n    // Clean up ALL unused rules regardless of batch ratio\n    this.sheetManager.forceCleanup(registry);\n  }\n\n  /**\n   * Get CSS text from all sheets (for SSR)\n   */\n  getCssText(options?: { root?: Document | ShadowRoot }): string {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n    return this.sheetManager.getCssText(registry);\n  }\n\n  /**\n   * Get CSS only for the provided tasty classNames (e.g., [\"t0\",\"t3\"])\n   */\n  getCssTextForClasses(\n    classNames: Iterable<string>,\n    options?: { root?: Document | ShadowRoot },\n  ): string {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    const cssChunks: string[] = [];\n    for (const cls of classNames) {\n      const info = registry.rules.get(cls);\n      if (info) {\n        // Always prefer reading from the live stylesheet, since indices can change\n        const sheet = registry.sheets[info.sheetIndex];\n        const styleSheet = sheet?.sheet?.sheet;\n        if (styleSheet) {\n          const start = Math.max(0, info.ruleIndex);\n          const end = Math.min(\n            styleSheet.cssRules.length - 1,\n            (info.endRuleIndex as number) ?? info.ruleIndex,\n          );\n          // Additional validation: ensure indices are valid and in correct order\n          if (\n            start >= 0 &&\n            end >= start &&\n            start < styleSheet.cssRules.length\n          ) {\n            for (let i = start; i <= end; i++) {\n              const rule = styleSheet.cssRules[i] as CSSRule | undefined;\n              if (rule) cssChunks.push(rule.cssText);\n            }\n          }\n        } else if (info.cssText && info.cssText.length) {\n          // Fallback in environments without CSSOM access\n          cssChunks.push(...info.cssText);\n        }\n      }\n    }\n    return cssChunks.join('\\n');\n  }\n\n  /**\n   * Get cache performance metrics\n   */\n  getMetrics(options?: { root?: Document | ShadowRoot }): CacheMetrics | null {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n    return this.sheetManager.getMetrics(registry);\n  }\n\n  /**\n   * Reset cache performance metrics\n   */\n  resetMetrics(options?: { root?: Document | ShadowRoot }): void {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n    this.sheetManager.resetMetrics(registry);\n  }\n\n  /**\n   * Define a CSS @property custom property.\n   *\n   * Accepts tasty token syntax for the property name:\n   * - `$name` → defines `--name`\n   * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')\n   * - `--name` → defines `--name` (legacy format)\n   *\n   * Example:\n   * @property --rotation { syntax: \"<angle>\"; inherits: false; initial-value: 45deg; }\n   *\n   * Note: No caching or dispose — this defines a global property.\n   *\n   * If the same property is registered with different options, a warning is emitted\n   * but the original definition is preserved (CSS @property cannot be redefined).\n   */\n  property(\n    name: string,\n    options?: PropertyDefinition & {\n      root?: Document | ShadowRoot;\n    },\n  ): void {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    // Parse the token and get effective definition\n    // This handles $name, #name, --name formats and auto-sets syntax for colors\n    const userDefinition: PropertyDefinition = {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n    };\n\n    const effectiveResult = getEffectiveDefinition(name, userDefinition);\n\n    if (!effectiveResult.isValid) {\n      if (isDevEnv()) {\n        console.warn(\n          `[Tasty] property(): ${effectiveResult.error}. Got: \"${name}\"`,\n        );\n      }\n      return;\n    }\n\n    const cssName = effectiveResult.cssName;\n    const definition = effectiveResult.definition;\n\n    // Normalize the definition for comparison\n    const normalizedDef = normalizePropertyDefinition(definition);\n\n    // Check if already defined\n    const existingDef = registry.injectedProperties.get(cssName);\n    if (existingDef !== undefined) {\n      // Property already exists - check if definitions match\n      if (existingDef !== normalizedDef) {\n        // Different definition - warn but don't replace (CSS @property can't be redefined)\n        if (isDevEnv()) {\n          console.warn(\n            `[Tasty] @property ${cssName} was already defined with a different declaration. ` +\n              `The new declaration will be ignored. ` +\n              `Original: ${existingDef}, New: ${normalizedDef}`,\n          );\n        }\n      }\n      // Either exact match or warned - skip injection\n      return;\n    }\n\n    const parts: string[] = [];\n\n    if (definition.syntax != null) {\n      let syntax = String(definition.syntax).trim();\n      if (!/^['\"]/u.test(syntax)) syntax = `\"${syntax}\"`;\n      parts.push(`syntax: ${syntax};`);\n    }\n\n    // inherits is required by the CSS @property spec - default to true\n    const inherits = definition.inherits ?? true;\n    parts.push(`inherits: ${inherits ? 'true' : 'false'};`);\n\n    if (definition.initialValue != null) {\n      let initialValueStr: string;\n      if (typeof definition.initialValue === 'number') {\n        initialValueStr = String(definition.initialValue);\n      } else {\n        // Process via tasty parser to resolve custom units/functions\n        initialValueStr = parseStyle(\n          definition.initialValue as StyleValue,\n        ).output;\n      }\n      parts.push(`initial-value: ${initialValueStr};`);\n    }\n\n    const declarations = parts.join(' ').trim();\n\n    const rule: StyleRule = {\n      selector: `@property ${cssName}`,\n      declarations,\n    } as StyleRule;\n\n    // Insert as a global rule; only mark injected when insertion succeeds\n    const info = this.sheetManager.insertGlobalRule(\n      registry,\n      [rule],\n      `property:${name}`,\n      root,\n    );\n\n    if (!info) {\n      return;\n    }\n\n    // Track that this property was injected with its normalized definition\n    registry.injectedProperties.set(cssName, normalizedDef);\n  }\n\n  /**\n   * Check whether a given @property name was already injected by this injector.\n   *\n   * Accepts tasty token syntax:\n   * - `$name` → checks `--name`\n   * - `#name` → checks `--name-color`\n   * - `--name` → checks `--name` (legacy format)\n   */\n  isPropertyDefined(\n    name: string,\n    options?: { root?: Document | ShadowRoot },\n  ): boolean {\n    const root = options?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    // Parse the token to get the CSS property name\n    const effectiveResult = getEffectiveDefinition(name, {});\n    if (!effectiveResult.isValid) {\n      return false;\n    }\n\n    return registry.injectedProperties.has(effectiveResult.cssName);\n  }\n\n  /**\n   * Inject keyframes and return object with toString() and dispose()\n   *\n   * Keyframes are cached by content (steps). If the same content is injected\n   * multiple times with different provided names, the first injected name is reused.\n   *\n   * If the same name is provided with different content (collision), a unique\n   * name is generated to avoid overwriting the existing keyframes.\n   */\n  keyframes(\n    steps: KeyframesSteps,\n    nameOrOptions?: string | { root?: Document | ShadowRoot; name?: string },\n  ): KeyframesResult {\n    // Parse parameters\n    const isStringName = typeof nameOrOptions === 'string';\n    const providedName = isStringName ? nameOrOptions : nameOrOptions?.name;\n    const root = isStringName ? document : nameOrOptions?.root || document;\n    const registry = this.sheetManager.getRegistry(root);\n\n    if (Object.keys(steps).length === 0) {\n      return {\n        toString: () => '',\n        dispose: () => {\n          /* noop */\n        },\n      };\n    }\n\n    // Generate content-based cache key (independent of provided name)\n    const contentHash = JSON.stringify(steps);\n\n    // Check if this exact content is already cached\n    const existing = registry.keyframesCache.get(contentHash);\n    if (existing) {\n      existing.refCount++;\n      return {\n        toString: () => existing.name,\n        dispose: () => this.disposeKeyframes(contentHash, registry),\n      };\n    }\n\n    // Determine the actual name to use\n    let actualName: string;\n\n    if (providedName) {\n      // Check if this name is already used with different content\n      const existingContentForName =\n        registry.keyframesNameToContent.get(providedName);\n\n      if (existingContentForName && existingContentForName !== contentHash) {\n        // Name collision: same name, different content\n        // Generate a unique name to avoid overwriting\n        actualName = `${providedName}-k${registry.keyframesCounter++}`;\n      } else {\n        // Name is available or used with same content\n        actualName = providedName;\n        // Track this name -> content mapping\n        registry.keyframesNameToContent.set(providedName, contentHash);\n      }\n    } else {\n      // No name provided, generate one\n      actualName = `k${registry.keyframesCounter++}`;\n    }\n\n    // Insert keyframes\n    const result = this.sheetManager.insertKeyframes(\n      registry,\n      steps,\n      actualName,\n      root,\n    );\n    if (!result) {\n      return {\n        toString: () => '',\n        dispose: () => {\n          /* noop */\n        },\n      };\n    }\n\n    const { info, declarations } = result;\n\n    // Auto-register @property for custom properties found in keyframe declarations\n    if (this.config.autoPropertyTypes !== false && declarations) {\n      const resolver = registry.propertyTypeResolver;\n      resolver.scanDeclarations(\n        declarations,\n        (name) => registry.injectedProperties.has(name),\n        (name, syntax, initialValue) => {\n          this.property(name, {\n            syntax,\n            inherits: true,\n            initialValue,\n            root,\n          });\n        },\n      );\n    }\n\n    // Cache the result by content hash\n    registry.keyframesCache.set(contentHash, {\n      name: actualName,\n      refCount: 1,\n      info,\n    });\n\n    // Update metrics\n    if (registry.metrics) {\n      registry.metrics.totalInsertions++;\n      registry.metrics.misses++;\n    }\n\n    return {\n      toString: () => actualName,\n      dispose: () => this.disposeKeyframes(contentHash, registry),\n    };\n  }\n\n  /**\n   * Dispose keyframes\n   */\n  private disposeKeyframes(contentHash: string, registry: RootRegistry): void {\n    const entry = registry.keyframesCache.get(contentHash);\n    if (!entry) return;\n\n    entry.refCount--;\n    if (entry.refCount <= 0) {\n      // Dispose immediately - keyframes are global and safe to clean up right away\n      this.sheetManager.deleteKeyframes(registry, entry.info);\n      registry.keyframesCache.delete(contentHash);\n\n      // Clean up name-to-content mapping if this name was tracked\n      // Find and remove the mapping for this content hash\n      for (const [name, hash] of registry.keyframesNameToContent.entries()) {\n        if (hash === contentHash) {\n          registry.keyframesNameToContent.delete(name);\n          break;\n        }\n      }\n\n      // Update metrics\n      if (registry.metrics) {\n        registry.metrics.totalUnused++;\n        registry.metrics.stylesCleanedUp++;\n      }\n    }\n  }\n\n  /**\n   * Destroy all resources for a root\n   */\n  destroy(root?: Document | ShadowRoot): void {\n    const targetRoot = root || document;\n    this.sheetManager.cleanup(targetRoot);\n  }\n}\n"],"mappings":"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"}

package/dist/properties/index.js

@@ -1,5 +1,4 @@
-import { COLOR_FUNCS, RE_HEX, RE_NUMBER, RE_RAW_UNIT } from "../parser/const.js";
-import { getRgbValuesFromRgbaString, strToRgb } from "../utils/styles.js";
+import { RE_NUMBER, RE_RAW_UNIT } from "../parser/const.js";
 
 //#region src/properties/index.ts
 const PROPERTIES_KEY = "@properties";
@@ -89,7 +88,11 @@ function parsePropertyToken(token) {
 }
 /**
 * Normalize a property definition to a consistent string representation.
-* Used for comparing definitions to detect changes/conflicts.
+* Used for comparing definitions to detect type conflicts.
+*
+* Only `syntax` and `inherits` are compared — `initialValue` is intentionally
+* excluded because different components may set different defaults for the
+* same typed property (e.g. auto-inferred `0px` vs explicit `6px`).
 *
 * Keys are sorted alphabetically to ensure consistent comparison:
 * { inherits: true, syntax: '<color>' } === { syntax: '<color>', inherits: true }
@@ -97,7 +100,6 @@ function parsePropertyToken(token) {
 function normalizePropertyDefinition(def) {
 	const normalized = {};
 	if (def.inherits !== void 0) normalized.inherits = def.inherits;
-	if (def.initialValue !== void 0) normalized.initialValue = String(def.initialValue);
 	if (def.syntax !== void 0) normalized.syntax = def.syntax;
 	return JSON.stringify(normalized);
 }
@@ -135,44 +137,6 @@ function getEffectiveDefinition(token, userDefinition) {
 		isValid: true
 	};
 }
-/**
-* Extract RGB triplet string from a color initial value.
-* Used when auto-creating the companion `-rgb` property for color @property definitions.
-*
-* @param initialValue - The color property's initial value (e.g., 'rgb(255 255 255)', 'transparent', '#fff')
-* @returns Space-separated RGB triplet (e.g., '255 255 255'), defaults to '0 0 0'
-*/
-function colorInitialValueToRgb(initialValue) {
-	if (initialValue == null) return "0 0 0";
-	const str = String(initialValue).trim();
-	if (!str || str === "transparent") return "0 0 0";
-	const rgba = strToRgb(str);
-	if (rgba) {
-		const values = getRgbValuesFromRgbaString(rgba);
-		if (values.length >= 3) return values.slice(0, 3).join(" ");
-	}
-	return "0 0 0";
-}
-const VAR_COLOR_PATTERN = /^var\(--[a-z0-9-]+-color/;
-/**
-* Check whether a CSS value is a color.
-* Detects named CSS colors, hex values, color functions (rgb, hsl, oklch, etc.),
-* transparent, currentcolor, and var(--*-color) references.
-*/
-function isColorValue(value) {
-	if (!value || typeof value !== "string") return false;
-	const trimmed = value.trim().toLowerCase();
-	if (!trimmed) return false;
-	if (trimmed === "transparent" || trimmed === "currentcolor") return true;
-	if (VAR_COLOR_PATTERN.test(trimmed)) return true;
-	if (trimmed.startsWith("#") && RE_HEX.test(trimmed.slice(1))) return true;
-	const parenIdx = trimmed.indexOf("(");
-	if (parenIdx > 0) {
-		const fname = trimmed.slice(0, parenIdx);
-		if (COLOR_FUNCS.has(fname)) return true;
-	}
-	return strToRgb(trimmed) != null;
-}
 const UNIT_TO_SYNTAX = {};
 const LENGTH_UNITS = [
 	"px",
@@ -226,21 +190,17 @@ for (const u of TIME_UNITS) UNIT_TO_SYNTAX[u] = {
 };
 /**
 * Infer CSS @property syntax from a concrete value.
-* Inference is purely value-based; name-based checks (e.g. --*-color naming)
-* are handled by the validator in PropertyTypeResolver.
+* Only detects numeric types: \<number\>, \<length\>, \<percentage\>, \<angle\>, \<time\>.
+* Color properties are handled separately via the #name token convention
+* (--name-color gets \<color\> syntax automatically in getEffectiveDefinition).
 *
 * @param value - The CSS value to infer from (e.g. '10px', '1', '45deg')
-* @param _propName - Unused, kept for API compatibility
 * @returns Inferred syntax and initial value, or null if not inferable
 */
-function inferSyntaxFromValue(value, _propName) {
+function inferSyntaxFromValue(value) {
 	if (!value || typeof value !== "string") return null;
 	const trimmed = value.trim();
 	if (!trimmed) return null;
-	if (isColorValue(trimmed)) return {
-		syntax: "<color>",
-		initialValue: "transparent"
-	};
 	if (RE_NUMBER.test(trimmed)) return {
 		syntax: "<number>",
 		initialValue: "0"
@@ -254,5 +214,5 @@ function inferSyntaxFromValue(value, _propName) {
 }
 
 //#endregion
-export { colorInitialValueToRgb, extractLocalProperties, getEffectiveDefinition, hasLocalProperties, inferSyntaxFromValue, normalizePropertyDefinition };
+export { extractLocalProperties, getEffectiveDefinition, hasLocalProperties, inferSyntaxFromValue, normalizePropertyDefinition };
 //# sourceMappingURL=index.js.map

package/dist/properties/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/properties/index.ts"],"sourcesContent":["/**\n * Properties Utilities\n *\n * Utilities for extracting and processing CSS @property definitions in styles.\n * Unlike keyframes, properties are permanent once registered and don't need cleanup.\n *\n * Property names use tasty token syntax:\n * - `$name` for regular properties → `--name`\n * - `#name` for color properties → `--name-color` (auto-sets syntax: '<color>')\n */\n\nimport type { PropertyDefinition } from '../injector/types';\nimport { COLOR_FUNCS, RE_HEX, RE_NUMBER, RE_RAW_UNIT } from '../parser/const';\nimport type { Styles } from '../styles/types';\nimport { getRgbValuesFromRgbaString, strToRgb } from '../utils/styles';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst PROPERTIES_KEY = '@properties';\n\n/**\n * Valid CSS custom property name pattern (after the -- prefix).\n * Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.\n */\nconst VALID_PROPERTY_NAME_PATTERN = /^[a-z_][a-z0-9-_]*$/i;\n\n// ============================================================================\n// Validation Functions\n// ============================================================================\n\n/**\n * Validate a CSS custom property name (the part after --).\n * Returns true if the name is valid for use as a CSS custom property.\n */\nexport function isValidPropertyName(name: string): boolean {\n  return VALID_PROPERTY_NAME_PATTERN.test(name);\n}\n\n/**\n * Result of parsing a property token.\n */\nexport interface ParsedPropertyToken {\n  /** The CSS custom property name (e.g., '--my-prop') */\n  cssName: string;\n  /** Whether this is a color property */\n  isColor: boolean;\n  /** Whether the token was valid */\n  isValid: boolean;\n  /** Error message if invalid */\n  error?: string;\n}\n\n// ============================================================================\n// Extraction Functions\n// ============================================================================\n\n/**\n * Check if styles object has local @properties definition.\n * Fast path: single property lookup.\n */\nexport function hasLocalProperties(styles: Styles): boolean {\n  return PROPERTIES_KEY in styles;\n}\n\n/**\n * Extract local @properties from styles object.\n * Returns null if no local properties (fast path).\n */\nexport function extractLocalProperties(\n  styles: Styles,\n): Record<string, PropertyDefinition> | null {\n  const properties = styles[PROPERTIES_KEY];\n  if (!properties || typeof properties !== 'object') {\n    return null;\n  }\n  return properties as Record<string, PropertyDefinition>;\n}\n\n// ============================================================================\n// Token Parsing Functions\n// ============================================================================\n\n/**\n * Parse a property token name and return the CSS property name and whether it's a color.\n * Supports tasty token syntax and validates the property name.\n *\n * Token formats:\n * - `$name` → { cssName: '--name', isColor: false }\n * - `#name` → { cssName: '--name-color', isColor: true }\n * - `--name` → { cssName: '--name', isColor: false } (legacy, auto-detect color by suffix)\n * - `name` → { cssName: '--name', isColor: false } (legacy)\n *\n * @param token - The property token to parse\n * @returns Parsed result with cssName, isColor, isValid, and optional error\n */\nexport function parsePropertyToken(token: string): ParsedPropertyToken {\n  if (!token || typeof token !== 'string') {\n    return {\n      cssName: '',\n      isColor: false,\n      isValid: false,\n      error: 'Property token must be a non-empty string',\n    };\n  }\n\n  let name: string;\n  let isColor: boolean;\n\n  if (token.startsWith('$')) {\n    // Regular property token: $name → --name\n    name = token.slice(1);\n    isColor = false;\n  } else if (token.startsWith('#')) {\n    // Color property token: #name → --name-color\n    name = token.slice(1);\n    isColor = true;\n  } else if (token.startsWith('--')) {\n    // Legacy format with -- prefix\n    name = token.slice(2);\n    isColor = token.endsWith('-color');\n  } else {\n    // Legacy format without prefix\n    name = token;\n    isColor = token.endsWith('-color');\n  }\n\n  // Validate the name\n  if (!name) {\n    return {\n      cssName: '',\n      isColor,\n      isValid: false,\n      error: 'Property name cannot be empty',\n    };\n  }\n\n  if (!isValidPropertyName(name)) {\n    return {\n      cssName: '',\n      isColor,\n      isValid: false,\n      error: `Invalid property name \"${name}\". Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.`,\n    };\n  }\n\n  // Build the CSS custom property name\n  // For #name tokens, we add -color suffix\n  // For legacy formats (--name-color or name-color), the name already includes -color\n  let cssName: string;\n  if (token.startsWith('#')) {\n    // Color token: #name → --name-color\n    cssName = `--${name}-color`;\n  } else {\n    // All other formats: just add -- prefix\n    cssName = `--${name}`;\n  }\n\n  return {\n    cssName,\n    isColor,\n    isValid: true,\n  };\n}\n\n// ============================================================================\n// Normalization Functions\n// ============================================================================\n\n/**\n * Normalize a property name to the CSS custom property format.\n *\n * @deprecated Use parsePropertyToken instead for proper token handling\n */\nexport function normalizePropertyName(name: string): string {\n  const result = parsePropertyToken(name);\n  return result.isValid ? result.cssName : `--${name}`;\n}\n\n/**\n * Normalize a property definition to a consistent string representation.\n * Used for comparing definitions to detect changes/conflicts.\n *\n * Keys are sorted alphabetically to ensure consistent comparison:\n * { inherits: true, syntax: '<color>' } === { syntax: '<color>', inherits: true }\n */\nexport function normalizePropertyDefinition(def: PropertyDefinition): string {\n  const normalized: Record<string, unknown> = {};\n\n  // Add properties in alphabetical order\n  if (def.inherits !== undefined) {\n    normalized.inherits = def.inherits;\n  }\n  if (def.initialValue !== undefined) {\n    normalized.initialValue = String(def.initialValue);\n  }\n  if (def.syntax !== undefined) {\n    normalized.syntax = def.syntax;\n  }\n\n  return JSON.stringify(normalized);\n}\n\n/**\n * Result of getEffectiveDefinition.\n */\nexport interface EffectiveDefinitionResult {\n  /** The CSS custom property name */\n  cssName: string;\n  /** The effective property definition */\n  definition: PropertyDefinition;\n  /** Whether this is a color property */\n  isColor: boolean;\n  /** Whether the token was valid */\n  isValid: boolean;\n  /** Error message if invalid */\n  error?: string;\n}\n\n/**\n * Get the effective property definition for a token.\n * For color tokens (#name), auto-sets syntax to '<color>' and defaults initialValue to 'transparent'.\n *\n * @param token - Property token ($name, #name, --name, or plain name)\n * @param userDefinition - User-provided definition options\n * @returns Effective definition with cssName, definition, isValid, and optional error\n */\nexport function getEffectiveDefinition(\n  token: string,\n  userDefinition: PropertyDefinition,\n): EffectiveDefinitionResult {\n  const parsed = parsePropertyToken(token);\n\n  if (!parsed.isValid) {\n    return {\n      cssName: '',\n      definition: userDefinition,\n      isColor: false,\n      isValid: false,\n      error: parsed.error,\n    };\n  }\n\n  if (parsed.isColor) {\n    // Color properties have fixed syntax and default initialValue\n    return {\n      cssName: parsed.cssName,\n      definition: {\n        syntax: '<color>', // Always '<color>' for color tokens, cannot be overridden\n        inherits: userDefinition.inherits, // Allow inherits to be customized\n        initialValue: userDefinition.initialValue ?? 'transparent', // Default to transparent\n      },\n      isColor: true,\n      isValid: true,\n    };\n  }\n\n  // Regular properties use the definition as-is\n  return {\n    cssName: parsed.cssName,\n    definition: userDefinition,\n    isColor: false,\n    isValid: true,\n  };\n}\n\n// ============================================================================\n// Color RGB Companion Helpers\n// ============================================================================\n\n/**\n * Extract RGB triplet string from a color initial value.\n * Used when auto-creating the companion `-rgb` property for color @property definitions.\n *\n * @param initialValue - The color property's initial value (e.g., 'rgb(255 255 255)', 'transparent', '#fff')\n * @returns Space-separated RGB triplet (e.g., '255 255 255'), defaults to '0 0 0'\n */\nexport function colorInitialValueToRgb(initialValue?: string | number): string {\n  if (initialValue == null) return '0 0 0';\n\n  const str = String(initialValue).trim();\n  if (!str || str === 'transparent') return '0 0 0';\n\n  const rgba = strToRgb(str);\n  if (rgba) {\n    const values = getRgbValuesFromRgbaString(rgba);\n    if (values.length >= 3) return values.slice(0, 3).join(' ');\n  }\n\n  return '0 0 0';\n}\n\n// ============================================================================\n// Value Type Inference\n// ============================================================================\n\nconst VAR_COLOR_PATTERN = /^var\\(--[a-z0-9-]+-color/;\n\n/**\n * Check whether a CSS value is a color.\n * Detects named CSS colors, hex values, color functions (rgb, hsl, oklch, etc.),\n * transparent, currentcolor, and var(--*-color) references.\n */\nexport function isColorValue(value: string): boolean {\n  if (!value || typeof value !== 'string') return false;\n\n  const trimmed = value.trim().toLowerCase();\n  if (!trimmed) return false;\n\n  if (trimmed === 'transparent' || trimmed === 'currentcolor') return true;\n\n  if (VAR_COLOR_PATTERN.test(trimmed)) return true;\n\n  // Check for #hex values\n  if (trimmed.startsWith('#') && RE_HEX.test(trimmed.slice(1))) return true;\n\n  // Check for color functions: rgb(...), hsl(...), oklch(...), etc.\n  const parenIdx = trimmed.indexOf('(');\n  if (parenIdx > 0) {\n    const fname = trimmed.slice(0, parenIdx);\n    if (COLOR_FUNCS.has(fname)) return true;\n  }\n\n  // Check for named CSS colors via strToRgb\n  const rgb = strToRgb(trimmed);\n  return rgb != null;\n}\n\n/**\n * Result of inferring a CSS @property syntax from a value.\n */\nexport interface InferredSyntax {\n  syntax: string;\n  initialValue: string;\n}\n\nconst UNIT_TO_SYNTAX: Record<string, InferredSyntax> = {};\n\nconst LENGTH_UNITS = [\n  'px',\n  'em',\n  'rem',\n  'vw',\n  'vh',\n  'vmin',\n  'vmax',\n  'ch',\n  'ex',\n  'cap',\n  'ic',\n  'lh',\n  'rlh',\n  'svw',\n  'svh',\n  'lvw',\n  'lvh',\n  'dvw',\n  'dvh',\n  'cqw',\n  'cqh',\n  'cqi',\n  'cqb',\n  'cqmin',\n  'cqmax',\n];\n\nconst ANGLE_UNITS = ['deg', 'rad', 'grad', 'turn'];\nconst TIME_UNITS = ['ms', 's'];\n\nfor (const u of LENGTH_UNITS) {\n  UNIT_TO_SYNTAX[u] = { syntax: '<length>', initialValue: '0px' };\n}\nUNIT_TO_SYNTAX['%'] = { syntax: '<percentage>', initialValue: '0%' };\nfor (const u of ANGLE_UNITS) {\n  UNIT_TO_SYNTAX[u] = { syntax: '<angle>', initialValue: '0deg' };\n}\nfor (const u of TIME_UNITS) {\n  UNIT_TO_SYNTAX[u] = { syntax: '<time>', initialValue: '0s' };\n}\n\n/**\n * Infer CSS @property syntax from a concrete value.\n * Inference is purely value-based; name-based checks (e.g. --*-color naming)\n * are handled by the validator in PropertyTypeResolver.\n *\n * @param value - The CSS value to infer from (e.g. '10px', '1', '45deg')\n * @param _propName - Unused, kept for API compatibility\n * @returns Inferred syntax and initial value, or null if not inferable\n */\nexport function inferSyntaxFromValue(\n  value: string,\n  _propName?: string,\n): InferredSyntax | null {\n  if (!value || typeof value !== 'string') return null;\n\n  const trimmed = value.trim();\n  if (!trimmed) return null;\n\n  // Value-based color detection\n  if (isColorValue(trimmed)) {\n    return { syntax: '<color>', initialValue: 'transparent' };\n  }\n\n  // Bare number\n  if (RE_NUMBER.test(trimmed)) {\n    return { syntax: '<number>', initialValue: '0' };\n  }\n\n  // Number with unit\n  const unitMatch = trimmed.match(RE_RAW_UNIT);\n  if (unitMatch) {\n    const unit = unitMatch[2];\n    const mapping = UNIT_TO_SYNTAX[unit];\n    if (mapping) return mapping;\n  }\n\n  return null;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/properties/index.ts"],"sourcesContent":["/**\n * Properties Utilities\n *\n * Utilities for extracting and processing CSS @property definitions in styles.\n * Unlike keyframes, properties are permanent once registered and don't need cleanup.\n *\n * Property names use tasty token syntax:\n * - `$name` for regular properties → `--name`\n * - `#name` for color properties → `--name-color` (auto-sets syntax: '<color>')\n */\n\nimport type { PropertyDefinition } from '../injector/types';\nimport { RE_NUMBER, RE_RAW_UNIT } from '../parser/const';\nimport type { Styles } from '../styles/types';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst PROPERTIES_KEY = '@properties';\n\n/**\n * Valid CSS custom property name pattern (after the -- prefix).\n * Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.\n */\nconst VALID_PROPERTY_NAME_PATTERN = /^[a-z_][a-z0-9-_]*$/i;\n\n// ============================================================================\n// Validation Functions\n// ============================================================================\n\n/**\n * Validate a CSS custom property name (the part after --).\n * Returns true if the name is valid for use as a CSS custom property.\n */\nexport function isValidPropertyName(name: string): boolean {\n  return VALID_PROPERTY_NAME_PATTERN.test(name);\n}\n\n/**\n * Result of parsing a property token.\n */\nexport interface ParsedPropertyToken {\n  /** The CSS custom property name (e.g., '--my-prop') */\n  cssName: string;\n  /** Whether this is a color property */\n  isColor: boolean;\n  /** Whether the token was valid */\n  isValid: boolean;\n  /** Error message if invalid */\n  error?: string;\n}\n\n// ============================================================================\n// Extraction Functions\n// ============================================================================\n\n/**\n * Check if styles object has local @properties definition.\n * Fast path: single property lookup.\n */\nexport function hasLocalProperties(styles: Styles): boolean {\n  return PROPERTIES_KEY in styles;\n}\n\n/**\n * Extract local @properties from styles object.\n * Returns null if no local properties (fast path).\n */\nexport function extractLocalProperties(\n  styles: Styles,\n): Record<string, PropertyDefinition> | null {\n  const properties = styles[PROPERTIES_KEY];\n  if (!properties || typeof properties !== 'object') {\n    return null;\n  }\n  return properties as Record<string, PropertyDefinition>;\n}\n\n// ============================================================================\n// Token Parsing Functions\n// ============================================================================\n\n/**\n * Parse a property token name and return the CSS property name and whether it's a color.\n * Supports tasty token syntax and validates the property name.\n *\n * Token formats:\n * - `$name` → { cssName: '--name', isColor: false }\n * - `#name` → { cssName: '--name-color', isColor: true }\n * - `--name` → { cssName: '--name', isColor: false } (legacy, auto-detect color by suffix)\n * - `name` → { cssName: '--name', isColor: false } (legacy)\n *\n * @param token - The property token to parse\n * @returns Parsed result with cssName, isColor, isValid, and optional error\n */\nexport function parsePropertyToken(token: string): ParsedPropertyToken {\n  if (!token || typeof token !== 'string') {\n    return {\n      cssName: '',\n      isColor: false,\n      isValid: false,\n      error: 'Property token must be a non-empty string',\n    };\n  }\n\n  let name: string;\n  let isColor: boolean;\n\n  if (token.startsWith('$')) {\n    // Regular property token: $name → --name\n    name = token.slice(1);\n    isColor = false;\n  } else if (token.startsWith('#')) {\n    // Color property token: #name → --name-color\n    name = token.slice(1);\n    isColor = true;\n  } else if (token.startsWith('--')) {\n    // Legacy format with -- prefix\n    name = token.slice(2);\n    isColor = token.endsWith('-color');\n  } else {\n    // Legacy format without prefix\n    name = token;\n    isColor = token.endsWith('-color');\n  }\n\n  // Validate the name\n  if (!name) {\n    return {\n      cssName: '',\n      isColor,\n      isValid: false,\n      error: 'Property name cannot be empty',\n    };\n  }\n\n  if (!isValidPropertyName(name)) {\n    return {\n      cssName: '',\n      isColor,\n      isValid: false,\n      error: `Invalid property name \"${name}\". Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.`,\n    };\n  }\n\n  // Build the CSS custom property name\n  // For #name tokens, we add -color suffix\n  // For legacy formats (--name-color or name-color), the name already includes -color\n  let cssName: string;\n  if (token.startsWith('#')) {\n    // Color token: #name → --name-color\n    cssName = `--${name}-color`;\n  } else {\n    // All other formats: just add -- prefix\n    cssName = `--${name}`;\n  }\n\n  return {\n    cssName,\n    isColor,\n    isValid: true,\n  };\n}\n\n// ============================================================================\n// Normalization Functions\n// ============================================================================\n\n/**\n * Normalize a property name to the CSS custom property format.\n *\n * @deprecated Use parsePropertyToken instead for proper token handling\n */\nexport function normalizePropertyName(name: string): string {\n  const result = parsePropertyToken(name);\n  return result.isValid ? result.cssName : `--${name}`;\n}\n\n/**\n * Normalize a property definition to a consistent string representation.\n * Used for comparing definitions to detect type conflicts.\n *\n * Only `syntax` and `inherits` are compared — `initialValue` is intentionally\n * excluded because different components may set different defaults for the\n * same typed property (e.g. auto-inferred `0px` vs explicit `6px`).\n *\n * Keys are sorted alphabetically to ensure consistent comparison:\n * { inherits: true, syntax: '<color>' } === { syntax: '<color>', inherits: true }\n */\nexport function normalizePropertyDefinition(def: PropertyDefinition): string {\n  const normalized: Record<string, unknown> = {};\n\n  if (def.inherits !== undefined) {\n    normalized.inherits = def.inherits;\n  }\n  if (def.syntax !== undefined) {\n    normalized.syntax = def.syntax;\n  }\n\n  return JSON.stringify(normalized);\n}\n\n/**\n * Result of getEffectiveDefinition.\n */\nexport interface EffectiveDefinitionResult {\n  /** The CSS custom property name */\n  cssName: string;\n  /** The effective property definition */\n  definition: PropertyDefinition;\n  /** Whether this is a color property */\n  isColor: boolean;\n  /** Whether the token was valid */\n  isValid: boolean;\n  /** Error message if invalid */\n  error?: string;\n}\n\n/**\n * Get the effective property definition for a token.\n * For color tokens (#name), auto-sets syntax to '<color>' and defaults initialValue to 'transparent'.\n *\n * @param token - Property token ($name, #name, --name, or plain name)\n * @param userDefinition - User-provided definition options\n * @returns Effective definition with cssName, definition, isValid, and optional error\n */\nexport function getEffectiveDefinition(\n  token: string,\n  userDefinition: PropertyDefinition,\n): EffectiveDefinitionResult {\n  const parsed = parsePropertyToken(token);\n\n  if (!parsed.isValid) {\n    return {\n      cssName: '',\n      definition: userDefinition,\n      isColor: false,\n      isValid: false,\n      error: parsed.error,\n    };\n  }\n\n  if (parsed.isColor) {\n    // Color properties have fixed syntax and default initialValue\n    return {\n      cssName: parsed.cssName,\n      definition: {\n        syntax: '<color>', // Always '<color>' for color tokens, cannot be overridden\n        inherits: userDefinition.inherits, // Allow inherits to be customized\n        initialValue: userDefinition.initialValue ?? 'transparent', // Default to transparent\n      },\n      isColor: true,\n      isValid: true,\n    };\n  }\n\n  // Regular properties use the definition as-is\n  return {\n    cssName: parsed.cssName,\n    definition: userDefinition,\n    isColor: false,\n    isValid: true,\n  };\n}\n\n// ============================================================================\n// Value Type Inference\n// ============================================================================\n\n/**\n * Result of inferring a CSS @property syntax from a value.\n */\nexport interface InferredSyntax {\n  syntax: string;\n  initialValue: string;\n}\n\nconst UNIT_TO_SYNTAX: Record<string, InferredSyntax> = {};\n\nconst LENGTH_UNITS = [\n  'px',\n  'em',\n  'rem',\n  'vw',\n  'vh',\n  'vmin',\n  'vmax',\n  'ch',\n  'ex',\n  'cap',\n  'ic',\n  'lh',\n  'rlh',\n  'svw',\n  'svh',\n  'lvw',\n  'lvh',\n  'dvw',\n  'dvh',\n  'cqw',\n  'cqh',\n  'cqi',\n  'cqb',\n  'cqmin',\n  'cqmax',\n];\n\nconst ANGLE_UNITS = ['deg', 'rad', 'grad', 'turn'];\nconst TIME_UNITS = ['ms', 's'];\n\nfor (const u of LENGTH_UNITS) {\n  UNIT_TO_SYNTAX[u] = { syntax: '<length>', initialValue: '0px' };\n}\nUNIT_TO_SYNTAX['%'] = { syntax: '<percentage>', initialValue: '0%' };\nfor (const u of ANGLE_UNITS) {\n  UNIT_TO_SYNTAX[u] = { syntax: '<angle>', initialValue: '0deg' };\n}\nfor (const u of TIME_UNITS) {\n  UNIT_TO_SYNTAX[u] = { syntax: '<time>', initialValue: '0s' };\n}\n\n/**\n * Infer CSS @property syntax from a concrete value.\n * Only detects numeric types: \\<number\\>, \\<length\\>, \\<percentage\\>, \\<angle\\>, \\<time\\>.\n * Color properties are handled separately via the #name token convention\n * (--name-color gets \\<color\\> syntax automatically in getEffectiveDefinition).\n *\n * @param value - The CSS value to infer from (e.g. '10px', '1', '45deg')\n * @returns Inferred syntax and initial value, or null if not inferable\n */\nexport function inferSyntaxFromValue(value: string): InferredSyntax | null {\n  if (!value || typeof value !== 'string') return null;\n\n  const trimmed = value.trim();\n  if (!trimmed) return null;\n\n  if (RE_NUMBER.test(trimmed)) {\n    return { syntax: '<number>', initialValue: '0' };\n  }\n\n  const unitMatch = trimmed.match(RE_RAW_UNIT);\n  if (unitMatch) {\n    const unit = unitMatch[2];\n    const mapping = UNIT_TO_SYNTAX[unit];\n    if (mapping) return mapping;\n  }\n\n  return null;\n}\n"],"mappings":"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"}

package/dist/properties/property-type-resolver.d.ts

@@ -17,11 +17,6 @@ declare class PropertyTypeResolver {
   scanDeclarations(declarations: string, isPropertyDefined: (name: string) => boolean, registerProperty: (name: string, syntax: string, initialValue: string) => void): void;
   private addDependency;
   private resolve;
-  /**
-   * Validate that the inferred type matches the token naming convention.
-   * Returns false (and warns) on mismatch.
-   */
-  private validateTokenType;
   private isComplexValue;
 }
 //#endregion

package/dist/properties/property-type-resolver.js

@@ -1,4 +1,3 @@
-import { isDevEnv } from "../utils/is-dev-env.js";
 import { inferSyntaxFromValue } from "./index.js";
 
 //#region src/properties/property-type-resolver.ts
@@ -20,6 +19,7 @@ var PropertyTypeResolver = class {
 	* whose types can be inferred from their values.
 	*/
 	scanDeclarations(declarations, isPropertyDefined, registerProperty) {
+		if (!declarations.includes("--")) return;
 		const parts = declarations.split(/;+/);
 		for (const part of parts) {
 			if (!part.trim()) continue;
@@ -28,6 +28,10 @@ var PropertyTypeResolver = class {
 			const propName = match[1];
 			const value = match[2].trim();
 			if (isPropertyDefined(propName)) continue;
+			if (propName.endsWith("-color")) {
+				registerProperty(propName, "<color>", "transparent");
+				continue;
+			}
 			const varMatch = SINGLE_VAR_REF.exec(value);
 			if (varMatch) {
 				const depName = varMatch[1];
@@ -35,9 +39,8 @@ var PropertyTypeResolver = class {
 				continue;
 			}
 			if (this.isComplexValue(value)) continue;
-			const inferred = inferSyntaxFromValue(value, propName);
+			const inferred = inferSyntaxFromValue(value);
 			if (!inferred) continue;
-			if (!this.validateTokenType(propName, inferred.syntax)) continue;
 			this.resolve(propName, inferred.syntax, inferred.initialValue, isPropertyDefined, registerProperty);
 		}
 	}
@@ -62,39 +65,16 @@ var PropertyTypeResolver = class {
 			for (const dependent of dependents) {
 				this.pendingDeps.delete(dependent);
 				if (isPropertyDefined(dependent)) continue;
-				if (!this.validateTokenType(dependent, syntax)) continue;
 				this.resolve(dependent, syntax, initialValue, isPropertyDefined, registerProperty, resolving);
 			}
 		}
 	}
-	/**
-	* Validate that the inferred type matches the token naming convention.
-	* Returns false (and warns) on mismatch.
-	*/
-	validateTokenType(propName, syntax) {
-		const isColorProp = propName.endsWith("-color");
-		if (isColorProp && syntax !== "<color>") {
-			if (isDevEnv()) {
-				const tokenName = propName.replace(/^--/, "#").replace(/-color$/, "");
-				console.warn(`[Tasty] Color token ${tokenName} has a non-color value. Skipping @property auto-registration.`);
-			}
-			return false;
-		}
-		if (!isColorProp && syntax === "<color>") {
-			if (isDevEnv()) {
-				const tokenName = "$" + propName.replace(/^--/, "");
-				console.warn(`[Tasty] Token ${tokenName} has a color value but uses $ prefix instead of #. Use the # prefix for color properties. Skipping @property auto-registration.`);
-			}
-			return false;
-		}
-		return true;
-	}
 	isComplexValue(value) {
 		if (value.includes("calc(")) return true;
-		const varCount = (value.match(/var\(/g) || []).length;
-		if (varCount > 1) return true;
-		if (varCount === 1 && !SINGLE_VAR_REF.test(value)) return true;
-		return false;
+		const firstVar = value.indexOf("var(");
+		if (firstVar === -1) return false;
+		if (value.indexOf("var(", firstVar + 4) !== -1) return true;
+		return !SINGLE_VAR_REF.test(value);
 	}
 };
 

package/dist/properties/property-type-resolver.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-type-resolver.js","names":[],"sources":["../../src/properties/property-type-resolver.ts"],"sourcesContent":["/**\n * PropertyTypeResolver\n *\n * Automatically infers CSS @property types from custom property values.\n * Supports deferred resolution for var() reference chains of arbitrary depth.\n */\n\nimport { isDevEnv } from '../utils/is-dev-env';\n\nimport { inferSyntaxFromValue } from './index';\n\nconst CUSTOM_PROP_DECL = /^\\s*(--[a-z0-9_-]+)\\s*:\\s*(.+?)\\s*$/i;\nconst SINGLE_VAR_REF = /^var\\((--[a-z0-9_-]+)\\)$/i;\n\nexport class PropertyTypeResolver {\n  /** propName → the prop it depends on */\n  private pendingDeps = new Map<string, string>();\n  /** propName → list of props waiting on it */\n  private reverseDeps = new Map<string, string[]>();\n\n  /**\n   * Scan CSS declarations and auto-register @property for custom properties\n   * whose types can be inferred from their values.\n   */\n  scanDeclarations(\n    declarations: string,\n    isPropertyDefined: (name: string) => boolean,\n    registerProperty: (\n      name: string,\n      syntax: string,\n      initialValue: string,\n    ) => void,\n  ): void {\n    const parts = declarations.split(/;+/);\n\n    for (const part of parts) {\n      if (!part.trim()) continue;\n\n      const match = CUSTOM_PROP_DECL.exec(part);\n      if (!match) continue;\n\n      const propName = match[1];\n      const value = match[2].trim();\n\n      if (isPropertyDefined(propName)) continue;\n\n      // Single var() reference → record dependency for deferred resolution\n      const varMatch = SINGLE_VAR_REF.exec(value);\n      if (varMatch) {\n        const depName = varMatch[1];\n        this.addDependency(propName, depName);\n        continue;\n      }\n\n      // Skip complex expressions (calc, multiple var, etc.)\n      if (this.isComplexValue(value)) continue;\n\n      const inferred = inferSyntaxFromValue(value, propName);\n      if (!inferred) continue;\n\n      if (!this.validateTokenType(propName, inferred.syntax)) continue;\n\n      this.resolve(\n        propName,\n        inferred.syntax,\n        inferred.initialValue,\n        isPropertyDefined,\n        registerProperty,\n      );\n    }\n  }\n\n  private addDependency(propName: string, depName: string): void {\n    // Avoid self-references\n    if (propName === depName) return;\n\n    this.pendingDeps.set(propName, depName);\n\n    let dependents = this.reverseDeps.get(depName);\n    if (!dependents) {\n      dependents = [];\n      this.reverseDeps.set(depName, dependents);\n    }\n    if (!dependents.includes(propName)) {\n      dependents.push(propName);\n    }\n  }\n\n  private resolve(\n    propName: string,\n    syntax: string,\n    initialValue: string,\n    isPropertyDefined: (name: string) => boolean,\n    registerProperty: (\n      name: string,\n      syntax: string,\n      initialValue: string,\n    ) => void,\n    resolving?: Set<string>,\n  ): void {\n    // Guard against circular references\n    if (!resolving) resolving = new Set();\n    if (resolving.has(propName)) return;\n    resolving.add(propName);\n\n    if (!isPropertyDefined(propName)) {\n      registerProperty(propName, syntax, initialValue);\n    }\n\n    // Propagate to dependents\n    const dependents = this.reverseDeps.get(propName);\n    if (dependents) {\n      this.reverseDeps.delete(propName);\n\n      for (const dependent of dependents) {\n        this.pendingDeps.delete(dependent);\n\n        if (isPropertyDefined(dependent)) continue;\n        if (!this.validateTokenType(dependent, syntax)) continue;\n\n        this.resolve(\n          dependent,\n          syntax,\n          initialValue,\n          isPropertyDefined,\n          registerProperty,\n          resolving,\n        );\n      }\n    }\n  }\n\n  /**\n   * Validate that the inferred type matches the token naming convention.\n   * Returns false (and warns) on mismatch.\n   */\n  private validateTokenType(propName: string, syntax: string): boolean {\n    const isColorProp = propName.endsWith('-color');\n\n    if (isColorProp && syntax !== '<color>') {\n      if (isDevEnv()) {\n        const tokenName = propName.replace(/^--/, '#').replace(/-color$/, '');\n        console.warn(\n          `[Tasty] Color token ${tokenName} has a non-color value. ` +\n            `Skipping @property auto-registration.`,\n        );\n      }\n      return false;\n    }\n\n    if (!isColorProp && syntax === '<color>') {\n      if (isDevEnv()) {\n        const tokenName = '$' + propName.replace(/^--/, '');\n        console.warn(\n          `[Tasty] Token ${tokenName} has a color value but uses $ prefix instead of #. ` +\n            `Use the # prefix for color properties. ` +\n            `Skipping @property auto-registration.`,\n        );\n      }\n      return false;\n    }\n\n    return true;\n  }\n\n  private isComplexValue(value: string): boolean {\n    if (value.includes('calc(')) return true;\n    // Multiple var() references\n    const varCount = (value.match(/var\\(/g) || []).length;\n    if (varCount > 1) return true;\n    // var() with additional content around it (e.g. \"var(--x) + 1\")\n    if (varCount === 1 && !SINGLE_VAR_REF.test(value)) return true;\n    return false;\n  }\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAM,mBAAmB;AACzB,MAAM,iBAAiB;AAEvB,IAAa,uBAAb,MAAkC;;CAEhC,AAAQ,8BAAc,IAAI,KAAqB;;CAE/C,AAAQ,8BAAc,IAAI,KAAuB;;;;;CAMjD,iBACE,cACA,mBACA,kBAKM;EACN,MAAM,QAAQ,aAAa,MAAM,KAAK;AAEtC,OAAK,MAAM,QAAQ,OAAO;AACxB,OAAI,CAAC,KAAK,MAAM,CAAE;GAElB,MAAM,QAAQ,iBAAiB,KAAK,KAAK;AACzC,OAAI,CAAC,MAAO;GAEZ,MAAM,WAAW,MAAM;GACvB,MAAM,QAAQ,MAAM,GAAG,MAAM;AAE7B,OAAI,kBAAkB,SAAS,CAAE;GAGjC,MAAM,WAAW,eAAe,KAAK,MAAM;AAC3C,OAAI,UAAU;IACZ,MAAM,UAAU,SAAS;AACzB,SAAK,cAAc,UAAU,QAAQ;AACrC;;AAIF,OAAI,KAAK,eAAe,MAAM,CAAE;GAEhC,MAAM,WAAW,qBAAqB,OAAO,SAAS;AACtD,OAAI,CAAC,SAAU;AAEf,OAAI,CAAC,KAAK,kBAAkB,UAAU,SAAS,OAAO,CAAE;AAExD,QAAK,QACH,UACA,SAAS,QACT,SAAS,cACT,mBACA,iBACD;;;CAIL,AAAQ,cAAc,UAAkB,SAAuB;AAE7D,MAAI,aAAa,QAAS;AAE1B,OAAK,YAAY,IAAI,UAAU,QAAQ;EAEvC,IAAI,aAAa,KAAK,YAAY,IAAI,QAAQ;AAC9C,MAAI,CAAC,YAAY;AACf,gBAAa,EAAE;AACf,QAAK,YAAY,IAAI,SAAS,WAAW;;AAE3C,MAAI,CAAC,WAAW,SAAS,SAAS,CAChC,YAAW,KAAK,SAAS;;CAI7B,AAAQ,QACN,UACA,QACA,cACA,mBACA,kBAKA,WACM;AAEN,MAAI,CAAC,UAAW,6BAAY,IAAI,KAAK;AACrC,MAAI,UAAU,IAAI,SAAS,CAAE;AAC7B,YAAU,IAAI,SAAS;AAEvB,MAAI,CAAC,kBAAkB,SAAS,CAC9B,kBAAiB,UAAU,QAAQ,aAAa;EAIlD,MAAM,aAAa,KAAK,YAAY,IAAI,SAAS;AACjD,MAAI,YAAY;AACd,QAAK,YAAY,OAAO,SAAS;AAEjC,QAAK,MAAM,aAAa,YAAY;AAClC,SAAK,YAAY,OAAO,UAAU;AAElC,QAAI,kBAAkB,UAAU,CAAE;AAClC,QAAI,CAAC,KAAK,kBAAkB,WAAW,OAAO,CAAE;AAEhD,SAAK,QACH,WACA,QACA,cACA,mBACA,kBACA,UACD;;;;;;;;CASP,AAAQ,kBAAkB,UAAkB,QAAyB;EACnE,MAAM,cAAc,SAAS,SAAS,SAAS;AAE/C,MAAI,eAAe,WAAW,WAAW;AACvC,OAAI,UAAU,EAAE;IACd,MAAM,YAAY,SAAS,QAAQ,OAAO,IAAI,CAAC,QAAQ,WAAW,GAAG;AACrE,YAAQ,KACN,uBAAuB,UAAU,+DAElC;;AAEH,UAAO;;AAGT,MAAI,CAAC,eAAe,WAAW,WAAW;AACxC,OAAI,UAAU,EAAE;IACd,MAAM,YAAY,MAAM,SAAS,QAAQ,OAAO,GAAG;AACnD,YAAQ,KACN,iBAAiB,UAAU,iIAG5B;;AAEH,UAAO;;AAGT,SAAO;;CAGT,AAAQ,eAAe,OAAwB;AAC7C,MAAI,MAAM,SAAS,QAAQ,CAAE,QAAO;EAEpC,MAAM,YAAY,MAAM,MAAM,SAAS,IAAI,EAAE,EAAE;AAC/C,MAAI,WAAW,EAAG,QAAO;AAEzB,MAAI,aAAa,KAAK,CAAC,eAAe,KAAK,MAAM,CAAE,QAAO;AAC1D,SAAO"}
+{"version":3,"file":"property-type-resolver.js","names":[],"sources":["../../src/properties/property-type-resolver.ts"],"sourcesContent":["/**\n * PropertyTypeResolver\n *\n * Automatically infers CSS @property types from custom property values.\n * Supports deferred resolution for var() reference chains of arbitrary depth.\n */\n\nimport { inferSyntaxFromValue } from './index';\n\nconst CUSTOM_PROP_DECL = /^\\s*(--[a-z0-9_-]+)\\s*:\\s*(.+?)\\s*$/i;\nconst SINGLE_VAR_REF = /^var\\((--[a-z0-9_-]+)\\)$/i;\n\nexport class PropertyTypeResolver {\n  /** propName → the prop it depends on */\n  private pendingDeps = new Map<string, string>();\n  /** propName → list of props waiting on it */\n  private reverseDeps = new Map<string, string[]>();\n\n  /**\n   * Scan CSS declarations and auto-register @property for custom properties\n   * whose types can be inferred from their values.\n   */\n  scanDeclarations(\n    declarations: string,\n    isPropertyDefined: (name: string) => boolean,\n    registerProperty: (\n      name: string,\n      syntax: string,\n      initialValue: string,\n    ) => void,\n  ): void {\n    if (!declarations.includes('--')) return;\n\n    const parts = declarations.split(/;+/);\n\n    for (const part of parts) {\n      if (!part.trim()) continue;\n\n      const match = CUSTOM_PROP_DECL.exec(part);\n      if (!match) continue;\n\n      const propName = match[1];\n      const value = match[2].trim();\n\n      if (isPropertyDefined(propName)) continue;\n\n      // Name-based: --*-color properties are always <color> (from #name tokens)\n      if (propName.endsWith('-color')) {\n        registerProperty(propName, '<color>', 'transparent');\n        continue;\n      }\n\n      // Single var() reference → record dependency for deferred resolution\n      const varMatch = SINGLE_VAR_REF.exec(value);\n      if (varMatch) {\n        const depName = varMatch[1];\n        this.addDependency(propName, depName);\n        continue;\n      }\n\n      // Skip complex expressions (calc, multiple var, etc.)\n      if (this.isComplexValue(value)) continue;\n\n      const inferred = inferSyntaxFromValue(value);\n      if (!inferred) continue;\n\n      this.resolve(\n        propName,\n        inferred.syntax,\n        inferred.initialValue,\n        isPropertyDefined,\n        registerProperty,\n      );\n    }\n  }\n\n  private addDependency(propName: string, depName: string): void {\n    if (propName === depName) return;\n\n    this.pendingDeps.set(propName, depName);\n\n    let dependents = this.reverseDeps.get(depName);\n    if (!dependents) {\n      dependents = [];\n      this.reverseDeps.set(depName, dependents);\n    }\n    if (!dependents.includes(propName)) {\n      dependents.push(propName);\n    }\n  }\n\n  private resolve(\n    propName: string,\n    syntax: string,\n    initialValue: string,\n    isPropertyDefined: (name: string) => boolean,\n    registerProperty: (\n      name: string,\n      syntax: string,\n      initialValue: string,\n    ) => void,\n    resolving?: Set<string>,\n  ): void {\n    if (!resolving) resolving = new Set();\n    if (resolving.has(propName)) return;\n    resolving.add(propName);\n\n    if (!isPropertyDefined(propName)) {\n      registerProperty(propName, syntax, initialValue);\n    }\n\n    const dependents = this.reverseDeps.get(propName);\n    if (dependents) {\n      this.reverseDeps.delete(propName);\n\n      for (const dependent of dependents) {\n        this.pendingDeps.delete(dependent);\n\n        if (isPropertyDefined(dependent)) continue;\n\n        this.resolve(\n          dependent,\n          syntax,\n          initialValue,\n          isPropertyDefined,\n          registerProperty,\n          resolving,\n        );\n      }\n    }\n  }\n\n  private isComplexValue(value: string): boolean {\n    if (value.includes('calc(')) return true;\n    const firstVar = value.indexOf('var(');\n    if (firstVar === -1) return false;\n    if (value.indexOf('var(', firstVar + 4) !== -1) return true;\n    return !SINGLE_VAR_REF.test(value);\n  }\n}\n"],"mappings":";;;;;;;;;AASA,MAAM,mBAAmB;AACzB,MAAM,iBAAiB;AAEvB,IAAa,uBAAb,MAAkC;;CAEhC,AAAQ,8BAAc,IAAI,KAAqB;;CAE/C,AAAQ,8BAAc,IAAI,KAAuB;;;;;CAMjD,iBACE,cACA,mBACA,kBAKM;AACN,MAAI,CAAC,aAAa,SAAS,KAAK,CAAE;EAElC,MAAM,QAAQ,aAAa,MAAM,KAAK;AAEtC,OAAK,MAAM,QAAQ,OAAO;AACxB,OAAI,CAAC,KAAK,MAAM,CAAE;GAElB,MAAM,QAAQ,iBAAiB,KAAK,KAAK;AACzC,OAAI,CAAC,MAAO;GAEZ,MAAM,WAAW,MAAM;GACvB,MAAM,QAAQ,MAAM,GAAG,MAAM;AAE7B,OAAI,kBAAkB,SAAS,CAAE;AAGjC,OAAI,SAAS,SAAS,SAAS,EAAE;AAC/B,qBAAiB,UAAU,WAAW,cAAc;AACpD;;GAIF,MAAM,WAAW,eAAe,KAAK,MAAM;AAC3C,OAAI,UAAU;IACZ,MAAM,UAAU,SAAS;AACzB,SAAK,cAAc,UAAU,QAAQ;AACrC;;AAIF,OAAI,KAAK,eAAe,MAAM,CAAE;GAEhC,MAAM,WAAW,qBAAqB,MAAM;AAC5C,OAAI,CAAC,SAAU;AAEf,QAAK,QACH,UACA,SAAS,QACT,SAAS,cACT,mBACA,iBACD;;;CAIL,AAAQ,cAAc,UAAkB,SAAuB;AAC7D,MAAI,aAAa,QAAS;AAE1B,OAAK,YAAY,IAAI,UAAU,QAAQ;EAEvC,IAAI,aAAa,KAAK,YAAY,IAAI,QAAQ;AAC9C,MAAI,CAAC,YAAY;AACf,gBAAa,EAAE;AACf,QAAK,YAAY,IAAI,SAAS,WAAW;;AAE3C,MAAI,CAAC,WAAW,SAAS,SAAS,CAChC,YAAW,KAAK,SAAS;;CAI7B,AAAQ,QACN,UACA,QACA,cACA,mBACA,kBAKA,WACM;AACN,MAAI,CAAC,UAAW,6BAAY,IAAI,KAAK;AACrC,MAAI,UAAU,IAAI,SAAS,CAAE;AAC7B,YAAU,IAAI,SAAS;AAEvB,MAAI,CAAC,kBAAkB,SAAS,CAC9B,kBAAiB,UAAU,QAAQ,aAAa;EAGlD,MAAM,aAAa,KAAK,YAAY,IAAI,SAAS;AACjD,MAAI,YAAY;AACd,QAAK,YAAY,OAAO,SAAS;AAEjC,QAAK,MAAM,aAAa,YAAY;AAClC,SAAK,YAAY,OAAO,UAAU;AAElC,QAAI,kBAAkB,UAAU,CAAE;AAElC,SAAK,QACH,WACA,QACA,cACA,mBACA,kBACA,UACD;;;;CAKP,AAAQ,eAAe,OAAwB;AAC7C,MAAI,MAAM,SAAS,QAAQ,CAAE,QAAO;EACpC,MAAM,WAAW,MAAM,QAAQ,OAAO;AACtC,MAAI,aAAa,GAAI,QAAO;AAC5B,MAAI,MAAM,QAAQ,QAAQ,WAAW,EAAE,KAAK,GAAI,QAAO;AACvD,SAAO,CAAC,eAAe,KAAK,MAAM"}

package/dist/tasty.d.ts

@@ -99,6 +99,10 @@ type TastyComponentPropsWithDefaults<Props extends PropsWithStyles, DefaultProps
 declare function tasty<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, Tag extends keyof JSX.IntrinsicElements = 'div'>(options: TastyElementOptions<K, V, E, Tag>, secondArg?: never): ForwardRefExoticComponent<PropsWithoutRef<TastyElementProps<K, V, Tag>> & RefAttributes<unknown>> & SubElementComponents<E>;
 declare function tasty<Props extends PropsWithStyles, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, never, Record<string, never>, Props>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
 declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementTagNameMap> & {
+  top?: StyleValue<csstype.Property.Top<string | number> | undefined> | StyleValueStateMap<csstype.Property.Top<string | number> | undefined>;
+  right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
+  bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
+  left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
   color?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
   fill?: StyleValue<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
   font?: StyleValue<boolean | csstype.Property.FontFamily | undefined> | StyleValueStateMap<boolean | csstype.Property.FontFamily | undefined>;
@@ -187,7 +191,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   borderTopRightRadius?: StyleValue<csstype.Property.BorderTopRightRadius<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderTopRightRadius<string | number> | undefined>;
   borderTopStyle?: StyleValue<csstype.Property.BorderTopStyle | undefined> | StyleValueStateMap<csstype.Property.BorderTopStyle | undefined>;
   borderTopWidth?: StyleValue<csstype.Property.BorderTopWidth<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderTopWidth<string | number> | undefined>;
-  bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
   boxDecorationBreak?: StyleValue<csstype.Property.BoxDecorationBreak | undefined> | StyleValueStateMap<csstype.Property.BoxDecorationBreak | undefined>;
   boxShadow?: StyleValue<csstype.Property.BoxShadow | undefined> | StyleValueStateMap<csstype.Property.BoxShadow | undefined>;
   boxSizing?: StyleValue<csstype.Property.BoxSizing | undefined> | StyleValueStateMap<csstype.Property.BoxSizing | undefined>;
@@ -300,7 +303,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   justifyItems?: StyleValue<csstype.Property.JustifyItems | undefined> | StyleValueStateMap<csstype.Property.JustifyItems | undefined>;
   justifySelf?: StyleValue<csstype.Property.JustifySelf | undefined> | StyleValueStateMap<csstype.Property.JustifySelf | undefined>;
   justifyTracks?: StyleValue<csstype.Property.JustifyTracks | undefined> | StyleValueStateMap<csstype.Property.JustifyTracks | undefined>;
-  left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
   letterSpacing?: StyleValue<csstype.Property.LetterSpacing<string | number> | undefined> | StyleValueStateMap<csstype.Property.LetterSpacing<string | number> | undefined>;
   lightingColor?: StyleValue<csstype.Property.LightingColor | undefined> | StyleValueStateMap<csstype.Property.LightingColor | undefined>;
   lineBreak?: StyleValue<csstype.Property.LineBreak | undefined> | StyleValueStateMap<csstype.Property.LineBreak | undefined>;
@@ -406,7 +408,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   quotes?: StyleValue<csstype.Property.Quotes | undefined> | StyleValueStateMap<csstype.Property.Quotes | undefined>;
   r?: StyleValue<csstype.Property.R<string | number> | undefined> | StyleValueStateMap<csstype.Property.R<string | number> | undefined>;
   resize?: StyleValue<csstype.Property.Resize | undefined> | StyleValueStateMap<csstype.Property.Resize | undefined>;
-  right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
   rotate?: StyleValue<csstype.Property.Rotate | undefined> | StyleValueStateMap<csstype.Property.Rotate | undefined>;
   rowGap?: StyleValue<csstype.Property.RowGap<string | number> | undefined> | StyleValueStateMap<csstype.Property.RowGap<string | number> | undefined>;
   rubyAlign?: StyleValue<csstype.Property.RubyAlign | undefined> | StyleValueStateMap<csstype.Property.RubyAlign | undefined>;
@@ -495,7 +496,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   textWrapMode?: StyleValue<csstype.Property.TextWrapMode | undefined> | StyleValueStateMap<csstype.Property.TextWrapMode | undefined>;
   textWrapStyle?: StyleValue<csstype.Property.TextWrapStyle | undefined> | StyleValueStateMap<csstype.Property.TextWrapStyle | undefined>;
   timelineScope?: StyleValue<csstype.Property.TimelineScope | undefined> | StyleValueStateMap<csstype.Property.TimelineScope | undefined>;
-  top?: StyleValue<csstype.Property.Top<string | number> | undefined> | StyleValueStateMap<csstype.Property.Top<string | number> | undefined>;
   touchAction?: StyleValue<csstype.Property.TouchAction | undefined> | StyleValueStateMap<csstype.Property.TouchAction | undefined>;
   transform?: StyleValue<csstype.Property.Transform | undefined> | StyleValueStateMap<csstype.Property.Transform | undefined>;
   transformBox?: StyleValue<csstype.Property.TransformBox | undefined> | StyleValueStateMap<csstype.Property.TransformBox | undefined>;
@@ -971,12 +971,12 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   gridRows?: StyleValue<csstype.Property.GridTemplateRows<string | number> | undefined> | StyleValueStateMap<csstype.Property.GridTemplateRows<string | number> | undefined>;
   preset?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
   align?: StyleValue<(string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | undefined> | StyleValueStateMap<(string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | undefined>;
-  justify?: StyleValue<(string & {}) | "left" | "right" | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined> | StyleValueStateMap<(string & {}) | "left" | "right" | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined>;
+  justify?: StyleValue<"right" | "left" | (string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined> | StyleValueStateMap<"right" | "left" | (string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined>;
   place?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
   "@keyframes"?: StyleValue<Record<string, KeyframesSteps> | undefined> | StyleValueStateMap<Record<string, KeyframesSteps> | undefined>;
   "@properties"?: StyleValue<Record<string, PropertyDefinition> | undefined> | StyleValueStateMap<Record<string, PropertyDefinition> | undefined>;
   recipe?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
-} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "qa" | "qaVal" | "color" | "fill" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "image" | "svgFill" | "fade" | "styledScrollbar" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "recipe" | "style" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
+} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "top" | "right" | "bottom" | "left" | "qa" | "qaVal" | "color" | "fill" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "image" | "svgFill" | "fade" | "styledScrollbar" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "recipe" | "style" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
 //#endregion
 export { AllBasePropsWithMods, Element, ElementsDefinition, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, VariantMap, WithVariant, tasty };
 //# sourceMappingURL=tasty.d.ts.map

package/package.json

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