@tenphi/tasty 3.9.11 → 3.11.0

package/dist/zero/next.js

@@ -1,5 +1,5 @@
+import { t as loadConfigFile } from "../chunks/config-file-DlZXJMj8.js";
 import * as path from "path";
-import { createJiti } from "jiti";
 import { createRequire } from "module";
 import { fileURLToPath } from "url";
 //#region src/zero/next.ts
@@ -64,12 +64,8 @@ function withTastyZero(options = {}) {
 					injectImport: true,
 					...mode ? { mode } : {}
 				};
-				if (wpAbsoluteConfigFile) {
-					const jiti = createJiti(wpProjectDir, { moduleCache: false });
-					babelPluginOptions.config = () => {
-						return jiti(wpAbsoluteConfigFile);
-					};
-				} else if (tastyConfig) babelPluginOptions.config = tastyConfig;
+				if (wpAbsoluteConfigFile) babelPluginOptions.config = () => loadConfigFile(wpAbsoluteConfigFile, wpProjectDir);
+				else if (tastyConfig) babelPluginOptions.config = tastyConfig;
 				if (wpAllDeps.length > 0) babelPluginOptions.configDeps = wpAllDeps;
 				const babelPluginConfig = [babelPluginPath, babelPluginOptions];
 				const existingRule = config.module?.rules?.find((rule) => rule.use?.loader === "babel-loader" || rule.use?.some?.((u) => u.loader === "babel-loader"));

package/dist/zero/next.js.map

@@ -1 +1 @@
-{"version":3,"file":"next.js","names":[],"sources":["../../src/zero/next.ts"],"sourcesContent":["/**\n * Next.js configuration wrapper for tasty-zero.\n *\n * Supports both webpack and Turbopack bundlers:\n * - **webpack**: Injects a babel-loader rule with the tasty-zero Babel plugin\n *   via `webpack()` config hook. Config is passed as a jiti factory function.\n * - **Turbopack**: Adds a `turbopack.rules` entry with babel-loader and\n *   JSON-serializable options (`configFile` path instead of a function).\n *   The Babel plugin loads the config internally via jiti.\n *\n * The generated CSS is injected automatically — `@tenphi/tasty/static`\n * imports are replaced with an import of the output CSS file at build time.\n * No manual CSS import in layout files is needed.\n *\n * @example\n * ```javascript\n * // next.config.js\n * const { withTastyZero } = require('@tenphi/tasty/zero/next');\n *\n * module.exports = withTastyZero({\n *   output: 'public/tasty.css',\n *   configFile: './app/tasty-zero.config.ts',\n * })({\n *   // your Next.js config\n * });\n * ```\n */\n\nimport { createRequire } from 'module';\nimport * as path from 'path';\nimport { fileURLToPath } from 'url';\n\nimport { createJiti } from 'jiti';\n\nimport type { TastyZeroBabelOptions, TastyZeroConfig } from './babel';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\n// Next.js types (inline to avoid requiring next as a dependency)\ninterface WebpackConfigContext {\n  isServer: boolean;\n  dev: boolean;\n  buildId: string;\n  dir: string;\n}\n\n/* eslint-disable @typescript-eslint/no-explicit-any -- webpack/Next.js config types are complex */\ninterface TurbopackLoaderItem {\n  loader: string;\n  options?: Record<string, unknown>;\n}\n\ninterface TurbopackRuleConfig {\n  loaders: (string | TurbopackLoaderItem)[];\n  as?: string;\n  condition?: unknown;\n}\n\ninterface TurbopackConfig {\n  rules?: Record<string, TurbopackRuleConfig | TurbopackRuleConfig[]>;\n  [key: string]: unknown;\n}\n\ninterface NextConfig {\n  webpack?: (config: any, context: WebpackConfigContext) => any;\n  turbopack?: TurbopackConfig;\n  [key: string]: unknown;\n}\n\nexport interface TastyZeroNextOptions {\n  /**\n   * Output path for CSS relative to project root.\n   * @default 'public/tasty.css'\n   */\n  output?: string;\n\n  /**\n   * Whether to enable the plugin.\n   * @default true\n   */\n  enabled?: boolean;\n\n  /**\n   * Tasty configuration for build-time processing.\n   * For static configs that don't change during dev.\n   *\n   * For configs that depend on theme files, use `configFile` instead.\n   */\n  config?: TastyZeroConfig;\n\n  /**\n   * Path to a TypeScript/JavaScript module that exports the tasty zero config\n   * as its default export. The module is re-evaluated on each\n   * compilation, enabling hot reload when the file (or its imports) change.\n   *\n   * @example './app/tasty-zero.config.ts'\n   */\n  configFile?: string;\n\n  /**\n   * Extra file paths (relative to project root) that the config depends on.\n   * When any of these files change, the Babel cache is invalidated and\n   * the config is re-evaluated.\n   *\n   * The `configFile` itself is always tracked automatically.\n   * Use this for transitive dependencies that aren't directly imported\n   * by the config file, or when using `config` instead of `configFile`.\n   *\n   * @example ['./app/theme.ts']\n   */\n  configDeps?: string[];\n\n  /**\n   * Output mode for extracted CSS.\n   *\n   * - `'file'` (default): CSS is written to a single output file.\n   * - `'inject'`: CSS is embedded inline in JS and injected at runtime.\n   *   No CSS file is written. Best for reusable components and extensions.\n   *\n   * When `mode` is `'inject'`, `output` is ignored.\n   *\n   * @default 'file'\n   */\n  mode?: 'file' | 'inject';\n}\n\n/**\n * Next.js configuration wrapper for tasty-zero.\n * Configures both webpack and Turbopack bundlers automatically.\n */\nexport function withTastyZero(options: TastyZeroNextOptions = {}) {\n  const {\n    output = 'public/tasty.css',\n    enabled = true,\n    config: tastyConfig,\n    configFile,\n    configDeps = [],\n    mode,\n  } = options;\n\n  return (nextConfig: NextConfig = {}): NextConfig => {\n    if (!enabled) {\n      return nextConfig;\n    }\n\n    const projectDir = process.cwd();\n    const absoluteOutput = path.resolve(projectDir, output);\n    const babelPluginPath = path.resolve(__dirname, 'babel.js');\n\n    const absoluteConfigFile = configFile\n      ? path.resolve(projectDir, configFile)\n      : undefined;\n\n    const allDeps = [\n      ...(absoluteConfigFile ? [absoluteConfigFile] : []),\n      ...configDeps.map((dep) => path.resolve(projectDir, dep)),\n    ];\n\n    // --- Turbopack configuration ---\n    // Turbopack loader options must be JSON-serializable (no functions).\n    // The Babel plugin loads config internally via `configFile` path + jiti.\n    const turbopackBabelOptions: Record<string, unknown> = {\n      babelrc: false,\n      configFile: false,\n      parserOpts: {\n        plugins: ['typescript', 'jsx', 'decorators-legacy'],\n      },\n      plugins: [\n        [\n          babelPluginPath,\n          {\n            output: absoluteOutput,\n            injectImport: true,\n            ...(mode ? { mode } : {}),\n            ...(absoluteConfigFile\n              ? { configFile: absoluteConfigFile }\n              : tastyConfig\n                ? { config: tastyConfig }\n                : {}),\n            ...(allDeps.length > 0 ? { configDeps: allDeps } : {}),\n          },\n        ],\n      ],\n    };\n\n    const existingTurbopack = nextConfig.turbopack || {};\n    const existingRules = existingTurbopack.rules || {};\n\n    const existingExperimental =\n      (nextConfig.experimental as Record<string, unknown>) || {};\n\n    return {\n      ...nextConfig,\n\n      experimental: {\n        ...existingExperimental,\n        turbopackUseBuiltinBabel: true,\n      },\n\n      turbopack: {\n        ...existingTurbopack,\n        rules: {\n          ...existingRules,\n          '*.{ts,tsx,js,jsx}': {\n            condition: { not: 'foreign' },\n            loaders: [\n              {\n                loader: 'babel-loader',\n                options: turbopackBabelOptions,\n              },\n            ],\n          },\n        },\n      },\n\n      webpack(config: any, context: WebpackConfigContext) {\n        const { dir } = context;\n\n        const wpProjectDir = dir || projectDir;\n        const wpAbsoluteOutput = path.resolve(wpProjectDir, output);\n        const projectRequire = createRequire(\n          path.resolve(wpProjectDir, 'package.json'),\n        );\n\n        const wpAbsoluteConfigFile = configFile\n          ? path.resolve(wpProjectDir, configFile)\n          : undefined;\n\n        const wpAllDeps = [\n          ...(wpAbsoluteConfigFile ? [wpAbsoluteConfigFile] : []),\n          ...configDeps.map((dep) => path.resolve(wpProjectDir, dep)),\n        ];\n\n        const babelPluginOptions: TastyZeroBabelOptions = {\n          output: wpAbsoluteOutput,\n          injectImport: true,\n          ...(mode ? { mode } : {}),\n        };\n\n        if (wpAbsoluteConfigFile) {\n          const jiti = createJiti(wpProjectDir, {\n            moduleCache: false,\n          });\n\n          babelPluginOptions.config = () => {\n            return jiti(wpAbsoluteConfigFile) as TastyZeroConfig;\n          };\n        } else if (tastyConfig) {\n          babelPluginOptions.config = tastyConfig;\n        }\n\n        if (wpAllDeps.length > 0) {\n          babelPluginOptions.configDeps = wpAllDeps;\n        }\n\n        const babelPluginConfig = [babelPluginPath, babelPluginOptions];\n\n        const existingRule = config.module?.rules?.find(\n          (rule: any) =>\n            rule.use?.loader === 'babel-loader' ||\n            rule.use?.some?.((u: any) => u.loader === 'babel-loader'),\n        );\n\n        if (existingRule) {\n          const babelUse = Array.isArray(existingRule.use)\n            ? existingRule.use.find((u: any) => u.loader === 'babel-loader')\n            : existingRule.use;\n\n          if (babelUse?.options) {\n            babelUse.options.plugins = babelUse.options.plugins || [];\n            babelUse.options.plugins.push(babelPluginConfig);\n          }\n        } else {\n          config.module = config.module || {};\n          config.module.rules = config.module.rules || [];\n          config.module.rules.push({\n            test: /\\.(tsx?|jsx?)$/,\n            exclude: /node_modules/,\n            use: [\n              {\n                loader: projectRequire.resolve('babel-loader'),\n                options: {\n                  babelrc: false,\n                  configFile: false,\n                  parserOpts: {\n                    plugins: ['typescript', 'jsx', 'decorators-legacy'],\n                  },\n                  plugins: [babelPluginConfig],\n                },\n              },\n            ],\n          });\n        }\n\n        if (typeof nextConfig.webpack === 'function') {\n          return nextConfig.webpack(config, context);\n        }\n\n        return config;\n      },\n    };\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"next.js","names":[],"sources":["../../src/zero/next.ts"],"sourcesContent":["/**\n * Next.js configuration wrapper for tasty-zero.\n *\n * Supports both webpack and Turbopack bundlers:\n * - **webpack**: Injects a babel-loader rule with the tasty-zero Babel plugin\n *   via `webpack()` config hook. Config is passed as a jiti factory function.\n * - **Turbopack**: Adds a `turbopack.rules` entry with babel-loader and\n *   JSON-serializable options (`configFile` path instead of a function).\n *   The Babel plugin loads the config internally via jiti.\n *\n * The generated CSS is injected automatically — `@tenphi/tasty/static`\n * imports are replaced with an import of the output CSS file at build time.\n * No manual CSS import in layout files is needed.\n *\n * @example\n * ```javascript\n * // next.config.js\n * const { withTastyZero } = require('@tenphi/tasty/zero/next');\n *\n * module.exports = withTastyZero({\n *   output: 'public/tasty.css',\n *   configFile: './app/tasty-zero.config.ts',\n * })({\n *   // your Next.js config\n * });\n * ```\n */\n\nimport { createRequire } from 'module';\nimport * as path from 'path';\nimport { fileURLToPath } from 'url';\n\nimport type { TastyZeroBabelOptions, TastyZeroConfig } from './babel';\nimport { loadConfigFile } from './config-file';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\n// Next.js types (inline to avoid requiring next as a dependency)\ninterface WebpackConfigContext {\n  isServer: boolean;\n  dev: boolean;\n  buildId: string;\n  dir: string;\n}\n\n/* eslint-disable @typescript-eslint/no-explicit-any -- webpack/Next.js config types are complex */\ninterface TurbopackLoaderItem {\n  loader: string;\n  options?: Record<string, unknown>;\n}\n\ninterface TurbopackRuleConfig {\n  loaders: (string | TurbopackLoaderItem)[];\n  as?: string;\n  condition?: unknown;\n}\n\ninterface TurbopackConfig {\n  rules?: Record<string, TurbopackRuleConfig | TurbopackRuleConfig[]>;\n  [key: string]: unknown;\n}\n\ninterface NextConfig {\n  webpack?: (config: any, context: WebpackConfigContext) => any;\n  turbopack?: TurbopackConfig;\n  [key: string]: unknown;\n}\n\nexport interface TastyZeroNextOptions {\n  /**\n   * Output path for CSS relative to project root.\n   * @default 'public/tasty.css'\n   */\n  output?: string;\n\n  /**\n   * Whether to enable the plugin.\n   * @default true\n   */\n  enabled?: boolean;\n\n  /**\n   * Tasty configuration for build-time processing.\n   * For static configs that don't change during dev.\n   *\n   * For configs that depend on theme files, use `configFile` instead.\n   */\n  config?: TastyZeroConfig;\n\n  /**\n   * Path to a TypeScript/JavaScript module that exports the tasty zero config\n   * as its default export. The module is re-evaluated on each\n   * compilation, enabling hot reload when the file (or its imports) change.\n   *\n   * @example './app/tasty-zero.config.ts'\n   */\n  configFile?: string;\n\n  /**\n   * Extra file paths (relative to project root) that the config depends on.\n   * When any of these files change, the Babel cache is invalidated and\n   * the config is re-evaluated.\n   *\n   * The `configFile` itself is always tracked automatically.\n   * Use this for transitive dependencies that aren't directly imported\n   * by the config file, or when using `config` instead of `configFile`.\n   *\n   * @example ['./app/theme.ts']\n   */\n  configDeps?: string[];\n\n  /**\n   * Output mode for extracted CSS.\n   *\n   * - `'file'` (default): CSS is written to a single output file.\n   * - `'inject'`: CSS is embedded inline in JS and injected at runtime.\n   *   No CSS file is written. Best for reusable components and extensions.\n   *\n   * When `mode` is `'inject'`, `output` is ignored.\n   *\n   * @default 'file'\n   */\n  mode?: 'file' | 'inject';\n}\n\n/**\n * Next.js configuration wrapper for tasty-zero.\n * Configures both webpack and Turbopack bundlers automatically.\n */\nexport function withTastyZero(options: TastyZeroNextOptions = {}) {\n  const {\n    output = 'public/tasty.css',\n    enabled = true,\n    config: tastyConfig,\n    configFile,\n    configDeps = [],\n    mode,\n  } = options;\n\n  return (nextConfig: NextConfig = {}): NextConfig => {\n    if (!enabled) {\n      return nextConfig;\n    }\n\n    const projectDir = process.cwd();\n    const absoluteOutput = path.resolve(projectDir, output);\n    const babelPluginPath = path.resolve(__dirname, 'babel.js');\n\n    const absoluteConfigFile = configFile\n      ? path.resolve(projectDir, configFile)\n      : undefined;\n\n    const allDeps = [\n      ...(absoluteConfigFile ? [absoluteConfigFile] : []),\n      ...configDeps.map((dep) => path.resolve(projectDir, dep)),\n    ];\n\n    // --- Turbopack configuration ---\n    // Turbopack loader options must be JSON-serializable (no functions).\n    // The Babel plugin loads config internally via `configFile` path + jiti.\n    const turbopackBabelOptions: Record<string, unknown> = {\n      babelrc: false,\n      configFile: false,\n      parserOpts: {\n        plugins: ['typescript', 'jsx', 'decorators-legacy'],\n      },\n      plugins: [\n        [\n          babelPluginPath,\n          {\n            output: absoluteOutput,\n            injectImport: true,\n            ...(mode ? { mode } : {}),\n            ...(absoluteConfigFile\n              ? { configFile: absoluteConfigFile }\n              : tastyConfig\n                ? { config: tastyConfig }\n                : {}),\n            ...(allDeps.length > 0 ? { configDeps: allDeps } : {}),\n          },\n        ],\n      ],\n    };\n\n    const existingTurbopack = nextConfig.turbopack || {};\n    const existingRules = existingTurbopack.rules || {};\n\n    const existingExperimental =\n      (nextConfig.experimental as Record<string, unknown>) || {};\n\n    return {\n      ...nextConfig,\n\n      experimental: {\n        ...existingExperimental,\n        turbopackUseBuiltinBabel: true,\n      },\n\n      turbopack: {\n        ...existingTurbopack,\n        rules: {\n          ...existingRules,\n          '*.{ts,tsx,js,jsx}': {\n            condition: { not: 'foreign' },\n            loaders: [\n              {\n                loader: 'babel-loader',\n                options: turbopackBabelOptions,\n              },\n            ],\n          },\n        },\n      },\n\n      webpack(config: any, context: WebpackConfigContext) {\n        const { dir } = context;\n\n        const wpProjectDir = dir || projectDir;\n        const wpAbsoluteOutput = path.resolve(wpProjectDir, output);\n        const projectRequire = createRequire(\n          path.resolve(wpProjectDir, 'package.json'),\n        );\n\n        const wpAbsoluteConfigFile = configFile\n          ? path.resolve(wpProjectDir, configFile)\n          : undefined;\n\n        const wpAllDeps = [\n          ...(wpAbsoluteConfigFile ? [wpAbsoluteConfigFile] : []),\n          ...configDeps.map((dep) => path.resolve(wpProjectDir, dep)),\n        ];\n\n        const babelPluginOptions: TastyZeroBabelOptions = {\n          output: wpAbsoluteOutput,\n          injectImport: true,\n          ...(mode ? { mode } : {}),\n        };\n\n        if (wpAbsoluteConfigFile) {\n          babelPluginOptions.config = () =>\n            loadConfigFile<TastyZeroConfig>(wpAbsoluteConfigFile, wpProjectDir);\n        } else if (tastyConfig) {\n          babelPluginOptions.config = tastyConfig;\n        }\n\n        if (wpAllDeps.length > 0) {\n          babelPluginOptions.configDeps = wpAllDeps;\n        }\n\n        const babelPluginConfig = [babelPluginPath, babelPluginOptions];\n\n        const existingRule = config.module?.rules?.find(\n          (rule: any) =>\n            rule.use?.loader === 'babel-loader' ||\n            rule.use?.some?.((u: any) => u.loader === 'babel-loader'),\n        );\n\n        if (existingRule) {\n          const babelUse = Array.isArray(existingRule.use)\n            ? existingRule.use.find((u: any) => u.loader === 'babel-loader')\n            : existingRule.use;\n\n          if (babelUse?.options) {\n            babelUse.options.plugins = babelUse.options.plugins || [];\n            babelUse.options.plugins.push(babelPluginConfig);\n          }\n        } else {\n          config.module = config.module || {};\n          config.module.rules = config.module.rules || [];\n          config.module.rules.push({\n            test: /\\.(tsx?|jsx?)$/,\n            exclude: /node_modules/,\n            use: [\n              {\n                loader: projectRequire.resolve('babel-loader'),\n                options: {\n                  babelrc: false,\n                  configFile: false,\n                  parserOpts: {\n                    plugins: ['typescript', 'jsx', 'decorators-legacy'],\n                  },\n                  plugins: [babelPluginConfig],\n                },\n              },\n            ],\n          });\n        }\n\n        if (typeof nextConfig.webpack === 'function') {\n          return nextConfig.webpack(config, context);\n        }\n\n        return config;\n      },\n    };\n  };\n}\n"],"mappings":";;;;;AAmCA,MAAM,aAAa,cAAc,YAAY,GAAG;AAChD,MAAM,YAAY,KAAK,QAAQ,UAAU;AA8FzC,SAAgB,cAAc,UAAgC,CAAC,GAAG;CAChE,MAAM,EACJ,SAAS,oBACT,UAAU,MACV,QAAQ,aACR,YACA,aAAa,CAAC,GACd,SACE;CAEJ,QAAQ,aAAyB,CAAC,MAAkB;EAClD,IAAI,CAAC,SACH,OAAO;EAGT,MAAM,aAAa,QAAQ,IAAI;EAC/B,MAAM,iBAAiB,KAAK,QAAQ,YAAY,MAAM;EACtD,MAAM,kBAAkB,KAAK,QAAQ,WAAW,UAAU;EAE1D,MAAM,qBAAqB,aACvB,KAAK,QAAQ,YAAY,UAAU,IACnC,KAAA;EAEJ,MAAM,UAAU,CACd,GAAI,qBAAqB,CAAC,kBAAkB,IAAI,CAAC,GACjD,GAAG,WAAW,KAAK,QAAQ,KAAK,QAAQ,YAAY,GAAG,CAAC,CAC1D;EAKA,MAAM,wBAAiD;GACrD,SAAS;GACT,YAAY;GACZ,YAAY,EACV,SAAS;IAAC;IAAc;IAAO;GAAmB,EACpD;GACA,SAAS,CACP,CACE,iBACA;IACE,QAAQ;IACR,cAAc;IACd,GAAI,OAAO,EAAE,KAAK,IAAI,CAAC;IACvB,GAAI,qBACA,EAAE,YAAY,mBAAmB,IACjC,cACE,EAAE,QAAQ,YAAY,IACtB,CAAC;IACP,GAAI,QAAQ,SAAS,IAAI,EAAE,YAAY,QAAQ,IAAI,CAAC;GACtD,CACF,CACF;EACF;EAEA,MAAM,oBAAoB,WAAW,aAAa,CAAC;EACnD,MAAM,gBAAgB,kBAAkB,SAAS,CAAC;EAElD,MAAM,uBACH,WAAW,gBAA4C,CAAC;EAE3D,OAAO;GACL,GAAG;GAEH,cAAc;IACZ,GAAG;IACH,0BAA0B;GAC5B;GAEA,WAAW;IACT,GAAG;IACH,OAAO;KACL,GAAG;KACH,qBAAqB;MACnB,WAAW,EAAE,KAAK,UAAU;MAC5B,SAAS,CACP;OACE,QAAQ;OACR,SAAS;MACX,CACF;KACF;IACF;GACF;GAEA,QAAQ,QAAa,SAA+B;IAClD,MAAM,EAAE,QAAQ;IAEhB,MAAM,eAAe,OAAO;IAC5B,MAAM,mBAAmB,KAAK,QAAQ,cAAc,MAAM;IAC1D,MAAM,iBAAiB,cACrB,KAAK,QAAQ,cAAc,cAAc,CAC3C;IAEA,MAAM,uBAAuB,aACzB,KAAK,QAAQ,cAAc,UAAU,IACrC,KAAA;IAEJ,MAAM,YAAY,CAChB,GAAI,uBAAuB,CAAC,oBAAoB,IAAI,CAAC,GACrD,GAAG,WAAW,KAAK,QAAQ,KAAK,QAAQ,cAAc,GAAG,CAAC,CAC5D;IAEA,MAAM,qBAA4C;KAChD,QAAQ;KACR,cAAc;KACd,GAAI,OAAO,EAAE,KAAK,IAAI,CAAC;IACzB;IAEA,IAAI,sBACF,mBAAmB,eACjB,eAAgC,sBAAsB,YAAY;SAC/D,IAAI,aACT,mBAAmB,SAAS;IAG9B,IAAI,UAAU,SAAS,GACrB,mBAAmB,aAAa;IAGlC,MAAM,oBAAoB,CAAC,iBAAiB,kBAAkB;IAE9D,MAAM,eAAe,OAAO,QAAQ,OAAO,MACxC,SACC,KAAK,KAAK,WAAW,kBACrB,KAAK,KAAK,QAAQ,MAAW,EAAE,WAAW,cAAc,CAC5D;IAEA,IAAI,cAAc;KAChB,MAAM,WAAW,MAAM,QAAQ,aAAa,GAAG,IAC3C,aAAa,IAAI,MAAM,MAAW,EAAE,WAAW,cAAc,IAC7D,aAAa;KAEjB,IAAI,UAAU,SAAS;MACrB,SAAS,QAAQ,UAAU,SAAS,QAAQ,WAAW,CAAC;MACxD,SAAS,QAAQ,QAAQ,KAAK,iBAAiB;KACjD;IACF,OAAO;KACL,OAAO,SAAS,OAAO,UAAU,CAAC;KAClC,OAAO,OAAO,QAAQ,OAAO,OAAO,SAAS,CAAC;KAC9C,OAAO,OAAO,MAAM,KAAK;MACvB,MAAM;MACN,SAAS;MACT,KAAK,CACH;OACE,QAAQ,eAAe,QAAQ,cAAc;OAC7C,SAAS;QACP,SAAS;QACT,YAAY;QACZ,YAAY,EACV,SAAS;SAAC;SAAc;SAAO;QAAmB,EACpD;QACA,SAAS,CAAC,iBAAiB;OAC7B;MACF,CACF;KACF,CAAC;IACH;IAEA,IAAI,OAAO,WAAW,YAAY,YAChC,OAAO,WAAW,QAAQ,QAAQ,OAAO;IAG3C,OAAO;GACT;EACF;CACF;AACF"}

package/docs/README.md

@@ -16,7 +16,7 @@ Use this hub to move from the core idea to a working component, then into design
 
 - **Application developer using an existing design system**: [Getting Started](getting-started.md), then [React API](react-api.md).
 - **Design-system author**: [Methodology](methodology.md), [Building a Design System](design-system.md), [Configuration](configuration.md), and [Adoption Guide](adoption.md).
-- **Platform or tooling engineer**: [Configuration](configuration.md), [Build-Time Extraction (`tastyStatic`)](tasty-static.md), [Server-Side Rendering](ssr.md), and [Debug Utilities](debug.md).
+- **Platform or tooling engineer**: [Configuration](configuration.md), [Plugins & Extension Points](plugins.md), [Build-Time Extraction (`tastyStatic`)](tasty-static.md), [Server-Side Rendering](ssr.md), and [Debug Utilities](debug.md).
 
 ## By Styling Approach
 
@@ -29,6 +29,9 @@ Use this hub to move from the core idea to a working component, then into design
 ## By Task
 
 - **Learn the style language**: [Style DSL](dsl.md)
+- **Set up linting and autocomplete**: [Getting Started — ESLint plugin](getting-started.md#eslint-plugin) and [TypeScript autocomplete](getting-started.md#typescript-autocomplete)
+- **Design a component's public API** (`styleProps`, `modProps`, `tokenProps`, variants, sub-elements): [React API](react-api.md), then [Methodology](methodology.md)
+- **Generate a color palette with contrast solving**: [Glaze](../README.md#glaze)
 - **Brief an AI agent (or yourself) on writing correct styles**: [Style Rules for AI Agents](ai-agents.md)
 - **Look up a property handler**: [Style Properties](styles.md)
 - **Define tokens, units, recipes, keyframes, properties, functions, or polyfills globally**: [Configuration](configuration.md)

package/docs/adoption.md

@@ -24,7 +24,8 @@ Product code
 - The DSL and value parser (tokens, custom units, auto-calc, color opacity)
 - State compilation (mutually exclusive selectors from state maps)
 - Style injection and deduplication (runtime or build-time)
-- The `tasty()` component factory and hooks API
+- The `tasty()` component factory and style functions (`useStyles`, `useGlobalStyles`, …)
+- The lint rules and TypeScript extension interfaces that check usage against your vocabulary
 
 **What the DS team owns:**
 
@@ -64,16 +65,18 @@ For a detailed comparison with Tailwind, Panda CSS, vanilla-extract, StyleX, Sti
 
 Tasty provides the engine. The DS team defines the language that runs on it. Here is what that typically involves:
 
-| Layer              | What you define                                            | Where                                      |
-| ------------------ | ---------------------------------------------------------- | ------------------------------------------ |
-| **Tokens**         | Color names, spacing scale, border widths, radii           | `configure({ tokens })`                    |
-| **Units**          | Custom multiplier units (`x`, `r`, `bw`, or your own)      | `configure({ units })`                     |
-| **State aliases**  | Responsive breakpoints, theme modes, feature flags         | `configure({ states })`                    |
-| **Recipes**        | Reusable style bundles (card, elevated, input-reset)       | `configure({ recipes })`                   |
-| **Typography**     | Preset definitions (h1-h6, t1-t4, etc.)                    | `configure({ presets: { ... } })`          |
-| **Style props**    | Which CSS properties each component exposes as React props | `styleProps` in each component             |
-| **Sub-elements**   | Inner parts of compound components (Title, Icon, Content)  | `elements` + capitalized keys in `styles`  |
-| **Override rules** | How product engineers extend or constrain components       | Styled wrappers via `tasty(Base, { ... })` |
+| Layer              | What you define                                                                     | Where                                               |
+| ------------------ | ----------------------------------------------------------------------------------- | --------------------------------------------------- |
+| **Tokens**         | Color names and named values (`#surface`, `$sidebar-width`)                         | `configure({ tokens })`                             |
+| **Units**          | Spacing step, radius, border and outline widths (`x`, `r`, `bw`, `ow`, or your own) | `configure({ units })`                              |
+| **State aliases**  | Responsive breakpoints, theme modes, feature flags                                  | `configure({ states })`                             |
+| **Recipes**        | Reusable style bundles (card, elevated, input-reset)                                | `configure({ recipes })`                            |
+| **Typography**     | Preset definitions (h1-h6, t1-t4, etc.)                                             | `configure({ presets: { ... } })`                   |
+| **Style props**    | Which CSS properties each component exposes as React props                          | `styleProps` in each component                      |
+| **Sub-elements**   | Inner parts of compound components (Title, Icon, Content)                           | `elements` + capitalized keys in `styles`           |
+| **Component API**  | Typed props for states, values, and looks                                           | `modProps`, `tokenProps`, `variants`                |
+| **Override rules** | How product engineers extend or constrain components                                | Styled wrappers via `tasty(Base, { ... })`          |
+| **Guardrails**     | The names the linter and TypeScript check against                                   | `tasty.config.ts`, `declare module '@tenphi/tasty'` |
 
 The same engine can power a minimal design system with a handful of tokens:
 
@@ -155,18 +158,23 @@ configure({
     '#surface': '#white',
     '#text': '#111',
     '$card-padding': '4x',
+    $gap: '8px',
+    $radius: '6px',
+    '$border-width': '1px',
   },
-  // Common units (x, r, bw, ow, cr) are built-in.
-  // A DS typically redefines them to use CSS custom properties
-  // so that the actual scale is controlled via CSS, not JS:
+  // Built-in units (x, r, cr, bw, ow) compile to fixed values by default.
+  // A DS often points them at the custom properties above, so the scale
+  // is controlled by CSS at runtime rather than fixed at build time:
   units: {
-    x: 'var(--gap)', // 2x → calc(var(--gap) * 2)
+    x: 'var(--gap)', // 2x → calc(2 * var(--gap))
     r: 'var(--radius)',
     bw: 'var(--border-width)',
   },
 });
 ```
 
+Turn on the guardrails in the same step. Add [`@tenphi/eslint-plugin-tasty`](https://github.com/tenphi/eslint-plugin-tasty) with `tasty.configs.recommended` and a `tasty.config.ts` that lists the tokens, units, states, presets, and recipes as you define them, and register the same color and preset names for TypeScript autocomplete (`TastyNamedColors`, `TastyPresetNames`). Every component you migrate from here on is checked against the vocabulary. See [Getting Started — ESLint plugin](getting-started.md#eslint-plugin).
+
 ### Phase 3 -- State aliases and recipes
 
 Define the state vocabulary your components will share. This is where you start encoding your team's conventions.
@@ -175,7 +183,7 @@ Define the state vocabulary your components will share. This is where you start
 configure({
   states: {
     '@mobile': '@media(w < 768px)',
-    '@tablet': '@media(w < 1024px)',
+    '@tablet': '@media(768px <= w < 1024px)',
     '@dark':
       '@root(schema=dark) | (!@root(schema) & @media(prefers-color-scheme: dark))',
   },
@@ -252,7 +260,7 @@ const Card = tasty({
 
 ### Phase 7 -- Expand to full DS coverage
 
-Migrate the remaining components, add the [ESLint plugin](https://github.com/tenphi/eslint-plugin-tasty) to enforce style conventions at lint time, and choose between [server-only `tasty()`](ssr.md) and [`tastyStatic()` build-time extraction](tasty-static.md) when a page should ship no Tasty styling runtime.
+Migrate the remaining components, switch the [ESLint plugin](https://github.com/tenphi/eslint-plugin-tasty) to `tasty.configs.strict` to also catch unknown `$` tokens and state aliases, and choose between [server-only `tasty()`](ssr.md) and [`tastyStatic()` build-time extraction](tasty-static.md) when a page should ship no Tasty styling runtime.
 
 ---
 

package/docs/ai-agents.md

@@ -64,19 +64,20 @@ The last row goes the other way — longhands over the shorthand — because `fl
 
 ### Tokens
 
-| Syntax                | Meaning                                                                   |
-| --------------------- | ------------------------------------------------------------------------- |
-| `#name`               | color token → `var(--name-color)`                                         |
-| `#name.50`            | token at 50% opacity (`0`–`100`)                                          |
-| `#name.$opacity`      | opacity from a custom property                                            |
-| `#clear` / `#current` | `transparent` / `currentcolor`                                            |
-| `$name`               | custom property → `var(--name)`                                           |
-| `(#a, #b)`            | fallback chain                                                            |
-| `$$name` / `##name`   | the custom property _name_ (not its value) — inside `transition`          |
-| `$$name(…)`           | call a CSS `@function` declared via `@function`, `useFunction`, or config |
-
-- ❌ `#f5f5f5`, `rgb(0 0 0)`, `oklch(…)`, `okhsl(…)`, `red` → ✅ `#surface` (add the token to the config if it doesn't exist).
+| Syntax                | Meaning                                                                                            |
+| --------------------- | -------------------------------------------------------------------------------------------------- |
+| `#name`               | color token → `var(--name-color)`                                                                  |
+| `#name.50`            | token at 50% opacity — digits are a decimal fraction: `.5` = `.50` = 50%, `.05` = 5%, `.100` = 10% |
+| `#name.$opacity`      | opacity from a custom property                                                                     |
+| `#clear` / `#current` | `transparent` / `currentcolor`                                                                     |
+| `$name`               | custom property → `var(--name)`                                                                    |
+| `(#a, #b)`            | fallback chain                                                                                     |
+| `$$name` / `##name`   | the custom property _name_ (not its value) — inside `transition`                                   |
+| `$$name(…)`           | call a CSS `@function` declared via `@function`, `useFunction`, or config                          |
+
+- ❌ `#f5f5f5`, `rgb(0 0 0)`, `oklch(…)`, `okhsl(…)`, `okhst(…)`, `red` → ✅ `#surface` (add the token to the config if it doesn't exist).
 - ❌ `var(--gap)` → ✅ `$gap` · ❌ `$accent-color` → ✅ `#accent` · ❌ `transparent` → ✅ `#clear` · ❌ `currentColor` → ✅ `#current`.
+- `#clear` is a default replace token for `transparent`, so `#clear.5` and `#clear.$opacity` stay transparent. It does not read `--clear-color`; override it through `replaceTokens` if needed.
 - A `$name` must be declared as a `'$name': value` key in the same styles object, or in the config.
 - Names are case-sensitive and start lowercase — `$myVar` → `--myVar`; a leading capital folds (`$Foo` → `--foo`). Prefer kebab-case.
 - A `$name` reference is untyped: it fills the first free slot in a shorthand (`border: '1bw $my-style'` → the line style). Write colors as `#name`; `$name-color` is a fallback for pointing at a raw CSS custom property that holds a color.
@@ -84,7 +85,7 @@ The last row goes the other way — longhands over the shorthand — because `fl
 
 ### Units
 
-Tasty units: `x` (gap multiple), `r` (radius), `cr` (card radius), `bw` (border width), `ow` (outline width), `sf` (`minmax(0, Nfr)`). All CSS units work too, plus anything in `units` in the config. Any other unit is an error.
+Tasty units and their defaults: `x` 8px spacing step, `r` 6px radius, `cr` 10px card radius, `bw` 1px border width, `ow` 3px outline width, `sf` → `minmax(0, Nfr)`. They compile to literal values; change them through `units` in the config, not with `$gap`/`$radius` tokens. All CSS units work too, plus anything in `units` in the config. Any other unit is an error. Units are not resolved inside `@media(…)` / `@(…)` conditions — write query lengths in `px`, `em`, or `rem`.
 
 Prefer units over raw pixels: `8px` → `1x` … `64px` → `8x`; `radius: '6px'` → `'1r'`; `border: '1px …'` → `'1bw …'`.
 
@@ -94,7 +95,7 @@ Prefer units over raw pixels: `8px` → `1x` … `64px` → `8x`; `radius: '6px'
 
 ### `true`
 
-`true` means "the design-system default" and is accepted **only** by: `border`, `radius`, `outline`, `shadow`, `padding`, `margin`, `gap`, `inset`, `width`, `height`, `fill`, `color`, `fade`, `preset`, `font`, `scrollbar`, `scrollMargin`, `scrollPadding`, and the enhanced logical category styles listed above, plus `hide`. Anywhere else it is an error.
+`true` means "the design-system default" and is accepted **only** by: `border`, `radius`, `outline`, `shadow`, `padding`, `margin`, `gap`, `inset`, `width`, `height`, `color`, `fade`, `preset`, `font`, `scrollbar`, `scrollMargin`, `scrollPadding`, and the enhanced logical category styles listed above, plus `hide`. Anywhere else it is an error.
 
 ### `!important`
 
@@ -104,21 +105,23 @@ Never use it. Tasty owns specificity through doubled selectors and state orderin
 
 A value is `[values…] [modifiers…]`, and several groups can be comma-separated (later groups override earlier ones). A group that names **direction** modifiers takes a **single** value, applied to every direction it names — per-side values come from comma groups. A group naming no direction keeps plain CSS shorthand order (1–4 values). (`inset` + `dock` is the one exception: a second value insets the spanned sides.) Only the modifiers a property knows are valid:
 
-| Property                             | Modifiers                                                                                                  |
-| ------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
-| `padding`, `margin`, `inset`, `fade` | `top` `right` `bottom` `left`                                                                              |
-| `border`                             | the four directions + `solid` `dashed` `dotted` `double` `groove` `ridge` `inset` `outset` `none` `hidden` |
-| logical axis spacing/inset styles    | `start` `end`                                                                                              |
-| `blockBorder`, `inlineBorder`         | `start` `end` + the border style keywords above                                                            |
-| `outline`                            | the style keywords above                                                                                   |
-| `radius`                             | `top` `right` `bottom` `left` + shapes `round` `ellipse` `leaf` `backleaf`                                 |
-| `width`, `height`, `blockSize`, `inlineSize` | `min` `max` `fixed`                                                                                |
-| `flow`                               | `row` `column` `row-reverse` `column-reverse` `wrap` `nowrap` `dense`                                      |
-| `overflow`                           | `visible` `hidden` `scroll` `clip` `auto` `overlay`                                                        |
-| `position`                           | `static` `relative` `absolute` `fixed` `sticky`                                                            |
-| `shadow`                             | `inset`                                                                                                    |
-| `preset`                             | `name / strong` (or `bold`) `italic` `icon` `tight`                                                        |
-| box properties                       | `longhand` — emit CSS longhands instead of the shorthand                                                   |
+| Property                                     | Modifiers                                                                                                                                          |
+| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `padding`, `margin`, `fade`                  | `top` `right` `bottom` `left`                                                                                                                      |
+| `inset`                                      | the four directions + `dock`                                                                                                                       |
+| `border`                                     | the four directions + `solid` `dashed` `dotted` `double` `groove` `ridge` `inset` `outset` `none` `hidden`                                         |
+| logical axis spacing/inset styles            | `start` `end`                                                                                                                                      |
+| `blockBorder`, `inlineBorder`                | `start` `end` + the border style keywords above                                                                                                    |
+| `outline`                                    | the style keywords above                                                                                                                           |
+| `radius`                                     | `top` `right` `bottom` `left`, corners `top-left` `top-right` `bottom-right` `bottom-left`, `inherit` + shapes `round` `ellipse` `leaf` `backleaf` |
+| `width`, `height`, `blockSize`, `inlineSize` | `min` `max` `fixed`                                                                                                                                |
+| `flow`                                       | `row` `column` `row-reverse` `column-reverse` `wrap` `nowrap` `dense`                                                                              |
+| `overflow`                                   | `visible` `hidden` `scroll` `clip` `auto` `overlay`                                                                                                |
+| `position`                                   | `static` `relative` `absolute` `fixed` `sticky`                                                                                                    |
+| `shadow`                                     | `inset`                                                                                                                                            |
+| `preset`                                     | `name / strong` (or `bold`) `italic` `icon` `tight` `normal`                                                                                       |
+| `scrollbar`                                  | `thin` `auto` `none` `stable` `both-edges` `always`                                                                                                |
+| box properties                               | `longhand` — emit CSS longhands instead of the shorthand                                                                                           |
 
 Directional modifiers beat placeholder zeros:
 
@@ -128,11 +131,11 @@ Directional modifiers beat placeholder zeros:
 - ❌ `padding: '2x 4x top right'` — a directional group takes one value, so `4x` is dropped → ✅ `padding: '2x top, 4x right'`
 - ❌ `fade: '3x 1x top bottom'` → ✅ `fade: '3x top, 1x bottom'`
 
-Value-only properties reject both colors and modifiers: `gap`, `columnGap`, `rowGap`, `opacity`, `zIndex`, `order`, `flexGrow`, `flexShrink`, `flexBasis`, `aspectRatio`, `lineClamp`, and `tabSize`. Logical axis category styles accept one or two values in start/end order and the `start`, `end`, and `longhand` modifiers. `fill` and `color` take a color (plus `none` / `transparent`); `caretColor` and `accentColor` take a color only.
+Value-only properties reject both colors and modifiers: `gap`, `columnGap`, `rowGap`, `opacity`, `zIndex`, `order`, `flexGrow`, `flexShrink`, `flexBasis`, `aspectRatio`, `lineClamp`, and `tabSize`. Logical axis category styles accept one or two values in start/end order and the `start`, `end`, and `longhand` modifiers. `fill`, `color`, `caretColor`, and `accentColor` take a color only (use `#clear` for transparent).
 
 ### `transition`
 
-Use semantic names, not CSS property names: `fade` `fill` `color` `theme` `border` `radius` `shadow` `outline` `preset` `text` `gap` `opacity` `translate` `rotate` `scale` `filter` `image` `background` `width` `height` `zIndex` `inset` `flow` `dimension`.
+Use semantic names, not CSS property names: `fade` `fill` `color` `theme` `border` `radius` `shadow` `outline` `preset` `text` `gap` `opacity` `translate` `rotate` `scale` `filter` `image` `background` `width` `height` `zIndex` `inset`.
 
 ❌ `transition: 'background-color 0.2s'` → ✅ `transition: 'fill'`
 
@@ -168,13 +171,13 @@ Precedence `!` > `^` > `|` > `&`; use parentheses to override.
 
 Rules:
 
-1. **`''` comes first.** The bare default is the lowest-priority state; placing it later would override everything above it.
+1. **`''` comes first.** The bare default is the lowest-priority state. Written later, it triggers a `MISPLACED_DEFAULT_STATE` warning and Tasty moves it to the front.
 2. **Every state map needs `''` or `_`** — except when extending (`tasty(Parent, …)`), where omitting `''` merges into the parent's states and including `''` replaces them wholesale.
 3. **`_` is standalone-only** and always first (with `''` right after it, if present). `_` is a never-negated fallback floor for cases where a higher-priority branch may be _unknown_ (`@supports`, container queries). If a map contains only `_` and `''`, drop the `''`.
 4. **No nested maps:** ❌ `{ hovered: { pressed: 'x' } }` → ✅ `{ 'hovered & pressed': 'x' }`
 5. **State keys never sit at the top level** of a styles object — `:hover`, `.active`, `[open]` belong inside a property value.
 6. **Write keys Tasty can fully read.** Names start with a letter (a single letter is fine: `x` → `[data-x]`); join states with an operator (`hovered & focused`, not `hovered focused`); no space between `@media` and `(`. Tasty warns (`INVALID_STATE_KEY`) and skips what it cannot read.
-7. **Prefer automatic native states:** use `disabled` and `checked` in Tasty component styles instead of `[disabled]` and `[checked]`. The concise states track the corresponding native prop or attribute automatically.
+7. **Prefer automatic native states:** use `disabled`, `checked`, and `hidden` in Tasty component styles instead of `[disabled]`, `[checked]`, and `[hidden]`. Tasty sets `data-disabled`, `data-checked`, and `data-hidden` from the native props automatically.
 
 ```jsx
 color: { '': '#text', hovered: '#accent', disabled: '#text.40' }
@@ -204,7 +207,7 @@ When extending a parent's state map: `'@inherit'` reuses the parent's value for
 A **capitalized** key targets `[data-element="Name"]`, and its value must be a style object.
 
 ```jsx
-styles: { Title: { preset: 'h3' }, Icon: { $: '>@:last-child', color: '#accent' } }
+styles: { Title: { preset: 'h3' }, Icon: { $: '>', color: { '': '#text', '@own(:last-child)': '#accent' } } }
 ```
 
 ❌ nested-selector keys (`'& .title'`, `'&:hover'`) → ✅ sub-elements and state maps. Use the `$` affix property inside a sub-element to control how its selector attaches (`>` direct child, `@` placeholder for the element itself, `&::before` for a root pseudo-element).

package/docs/comparison.md

@@ -6,7 +6,7 @@ Tasty is CSS-in-JS for React design systems. It is built for the point where reu
 
 Its distinctive guarantee is narrow and concrete: each property’s state map compiles into selectors that cannot compete, so one declared branch wins regardless of CSS source order.
 
-That does not require a big upfront configuration step. Tasty's built-in units and normal CSS color values work out of the box, and `okhsl(...)` is available immediately as the recommended path for color authoring. The extra setup comes later if a team wants shared tokens, aliases, recipes, or stricter conventions.
+That does not require a big upfront configuration step. Tasty's built-in units and normal CSS color values work out of the box, and the built-in `okhsl(...)` and `okhst(...)` color functions are available immediately as the recommended path for color authoring. The extra setup comes later if a team wants shared tokens, aliases, recipes, or stricter conventions.
 
 Most styling tools focus on one of these layers:
 
@@ -95,11 +95,12 @@ That makes Tasty less of a "better way to write CSS objects" and more of a **sta
 
 Beyond state resolution, Tasty also provides several structural capabilities that reinforce the design-system layer:
 
-- **CSS properties as typed React props** — `styleProps` lets a component expose selected style properties as normal props (`<Button placeSelf="end">`), including state maps for responsive values. This keeps layout and composition controls inside a governed component API instead of pushing teams back to ad hoc styling escapes.
-- **Sub-element styling** — Compound components declare inner parts via capitalized keys in `styles` and `data-element` attributes. States, tokens, and recipes apply across the entire element tree from a single definition. See [React API — Sub-element Styling](react-api.md#sub-element-styling).
+- **Typed component APIs** — `styleProps` exposes selected style properties as normal props (`<Button placeSelf="end">`, with state maps for responsive values), `modProps` turns modifiers into typed props (`size: ['sm', 'md', 'lg'] as const`), `tokenProps` passes per-instance values without generating new CSS, and `variants` gives a typed `variant` prop. Layout and composition controls stay inside a governed component API instead of pushing teams back to ad hoc styling escapes.
+- **Sub-element styling** — Compound components declare inner parts via capitalized keys in `styles` and the `elements` option, which produces typed sub-components (`<Card.Title>`) that share the root's state context. States, tokens, and recipes apply across the entire element tree from a single definition. See [React API — Sub-element Styling](react-api.md#sub-element-styling).
+- **Modern CSS as state keys** — Container queries, `@supports`, `:has()`, root and parent states, and `@starting-style` live in the same state maps as `:hover`, and `@keyframes`, `@property`, `@font-face`, `@counter-style`, and `@function` are built in.
 - **Auto-inferred `@property`** — When a custom property is assigned a concrete value, Tasty infers the CSS `@property` syntax and registers it automatically, enabling smooth transitions on custom properties without manual declarations.
 - **AI-friendly style definitions** — Style definitions are declarative, self-contained, and structurally consistent. AI tools can read, refactor, and generate Tasty styles as confidently as a human — no hidden cascade logic or implicit ordering to second-guess.
-- **Companion ecosystem** — An [ESLint plugin](https://github.com/tenphi/eslint-plugin-tasty) with 27 lint rules, a [VS Code extension](https://github.com/tenphi/tasty-vscode-extension) for syntax highlighting, and [Glaze](https://github.com/tenphi/glaze) for OKHSL color theme generation with automatic WCAG contrast solving.
+- **Companion ecosystem** — An [ESLint and oxlint plugin](https://github.com/tenphi/eslint-plugin-tasty) with 40+ rules that validate styles against your project's `tasty.config.ts`, TypeScript augmentation for autocompleting your own token and preset names, a [VS Code extension](https://github.com/tenphi/tasty-vscode-extension) for syntax highlighting and snippets, and [Glaze](https://github.com/tenphi/glaze) for OKHST palette generation with WCAG and APCA contrast solving.
 
 ---
 
@@ -184,7 +185,7 @@ Every new state doubles the selector count. Miss one intersection and you ship a
 )}>
 ```
 
-The `theme` branch is runtime JS, not CSS. Intersections like `disabled + hover` need manual `!important` or extra utilities to override correctly.
+The `theme` branch is runtime JS, not CSS. Tailwind resolves `hover:` against `disabled:` by its global variant order, not per component; when your priority differs from that order, or two base utilities conflict (`bg-primary` vs `bg-danger`), you need `tailwind-merge`, `!` modifiers, or more conditional class logic.
 
 **Tasty** — each property declares all its states in one map. The engine generates mutually exclusive selectors:
 
@@ -196,10 +197,10 @@ const Button = tasty({
       '': '#primary',
       ':hover': '#primary-hover',
       ':active': '#primary-pressed',
-      disabled: '#surface',
       'theme=danger': '#danger',
       'theme=danger & :hover': '#danger-hover',
       'theme=danger & :active': '#danger-pressed',
+      disabled: '#surface',
     },
     color: {
       '': '#on-primary',
@@ -213,7 +214,7 @@ const Button = tasty({
 });
 ```
 
-`disabled` always wins over `:hover` because Tasty emits negation selectors — no source-order dependence, no manual intersection management, no `!important`.
+`disabled` is declared last, so it wins over `:hover`, `:active`, and `theme=danger`: Tasty guards every earlier branch with `:not([data-disabled])` — no source-order dependence, no manual intersection management, no `!important`.
 
 ---
 
@@ -328,7 +329,7 @@ That makes it narrower in audience, but deeper in architectural ambition.
 
 There is also a fundamental architectural difference: Emotion and styled-components rely on React context and hooks internally, which means they require `'use client'` in modern React and cannot run as React Server Components. Tasty's style functions and `tasty()` components are hook-free, so they work as server components by default and ship no Tasty styling runtime in server-only contexts. This is not a minor compatibility detail — it means Tasty-based components stay as server components until _your_ code needs interactivity, while Emotion and styled-components force the client boundary at the styling layer.
 
-For teams evaluating runtime styling at scale, Tasty also documents its runtime benchmarks and caching model in the main [README](../README.md#performance). That matters, but it is still secondary to the core question of whether you want Tasty's deterministic selector model.
+For teams evaluating runtime styling at scale, Tasty publishes reproducible [Runtime Benchmarks](runtime-benchmarks.md) and summarizes its caching model in the [README](../README.md#performance). That matters, but it is still secondary to the core question of whether you want Tasty's deterministic selector model.
 
 ---