@tenphi/tasty 0.0.0-snapshot.d656d18 → 0.0.0-snapshot.d7129ca

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 { 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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"}

package/docs/ai-agents.md

@@ -128,7 +128,11 @@ Value-only properties reject both colors and modifiers: `gap`, `columnGap`, `row
 
 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`.
 
-❌ `transition: 'background-color 0.2s'` → ✅ `transition: 'fill 0.2s'`
+❌ `transition: 'background-color 0.2s'` → ✅ `transition: 'fill'`
+
+Omit the duration to use `$fill-transition` with `$transition` as fallback, or
+use a duration token explicitly (`transition: 'fill $transition'`). Avoid raw
+time values in duration slots. An explicit zero can be useful to disable motion.
 
 ## 4. State maps
 

package/docs/dsl.md

@@ -701,7 +701,7 @@ const FadeIn = tasty({
   styles: {
     opacity: { '': '1', '@starting': '0' },
     transform: { '': 'scale(1)', '@starting': 'scale(0.95)' },
-    transition: 'opacity 0.3s, translate 0.3s',
+    transition: 'opacity, translate',
   },
 });
 ```
@@ -833,7 +833,7 @@ const AnimatedGradient = tasty({
     '$gradient-angle': '0deg',
     '#theme': 'okhst(280 80% 50%)',
     image: 'linear-gradient($gradient-angle, #theme, #clear)',
-    transition: '$$gradient-angle 0.3s, ##theme 0.3s',
+    transition: '$$gradient-angle, ##theme',
   },
 });
 ```

package/docs/getting-started.md

@@ -169,20 +169,21 @@ export default [
 
 ### What `recommended` catches
 
-The `recommended` config enables 18 of the plugin's 27 total rules. It covers the most common issues without turning on the stricter governance rules:
-
-| Category            | Rules                                                                                                  | Examples                                                     |
-| ------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------ |
-| Property validation | `known-property`, `valid-boolean-property`, `valid-sub-element`                                        | Flags typos like `pading` or invalid boolean usage           |
-| Value validation    | `valid-value`, `valid-color-token`, `valid-custom-unit`                                                | Catches `#nonexistent` tokens, bad unit syntax               |
-| State validation    | `valid-state-key`, `no-nested-state-map`, `require-default-state`                                      | Validates state key syntax, ensures `''` default exists      |
-| Structure           | `valid-styles-structure`, `no-important`, `no-nested-selector`                                         | Prevents `!important`, invalid nesting                       |
-| Static mode         | `static-no-dynamic-values`, `static-valid-selector`                                                    | Enforces build-time constraints in `tastyStatic()`           |
-| Style properties    | `valid-preset`, `valid-recipe`, `valid-transition`, `valid-directional-modifier`, `valid-radius-shape` | Validates preset names, recipe references, transition syntax |
+The `recommended` config covers common correctness and style issues:
+
+| Category            | Rules                                                                                                  | Examples                                                              |
+| ------------------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- |
+| Property validation | `known-property`, `valid-boolean-property`, `valid-sub-element`                                        | Flags typos like `pading` or invalid boolean usage                    |
+| Value validation    | `valid-value`, `valid-color-token`, `valid-custom-unit`                                                | Catches `#nonexistent` tokens, bad unit syntax                        |
+| State validation    | `valid-state-key`, `no-nested-state-map`, `require-default-state`                                      | Validates state key syntax, ensures `''` default exists               |
+| Structure           | `valid-styles-structure`, `no-important`, `no-nested-selector`                                         | Prevents `!important`, invalid nesting                                |
+| Static mode         | `static-no-dynamic-values`, `static-valid-selector`                                                    | Enforces build-time constraints in `tastyStatic()`                    |
+| Style properties    | `valid-preset`, `valid-recipe`, `valid-transition`, `valid-directional-modifier`, `valid-radius-shape` | Validates preset names, recipe references, transition syntax          |
+| Motion guidance     | `no-raw-transition-duration`                                                                           | Suggests timing tokens or the default timing for transition durations |
 
 ### Strict config
 
-For stricter governance, use `tasty.configs.strict`. It adds rules that enforce best practices like preferring shorthand properties, consistent token usage, and flagging direct `styles` prop usage:
+For stricter governance, use `tasty.configs.strict`. It adds rules that flag direct `styles` prop usage and other patterns:
 
 ```js
 export default [tasty.configs.strict];

package/docs/methodology.md

@@ -236,7 +236,7 @@ const ProgressBar = tasty({
       width: '$progress',
       height: '100%',
       fill: '#primary',
-      transition: 'width 0.3s',
+      transition: 'width',
     },
   },
   elements: { Bar: 'div' },
@@ -534,7 +534,7 @@ See [Configuration](configuration.md) for the full `configure()` API.
 
 - **Create styled wrappers** instead of passing `styles` directly — faster, composable, inspectable
 - **Use design tokens and custom units** (`#text`, `2x`, `1r`) instead of raw CSS values
-- **Use semantic transition names** (`transition: 'theme 0.3s'`) instead of listing CSS properties
+- **Use semantic transition names** (`transition: 'theme'`) instead of listing CSS properties; omit the duration to use the motion tokens
 - **Use `elements` prop** to declare typed sub-components for compound components
 - **Use `styleProps`** to define what product engineers can customize
 - **Use `modProps`** to expose known modifier states as clean component props

package/docs/pipeline.md

@@ -395,6 +395,8 @@ See the comment block in `exclusive.ts:500-523`: a default value whose higher-pr
 
 Computes the Cartesian product of all style entries for a handler, creating snapshots of which value each style has for each possible state combination.
 
+When every input is a direct value rather than a state map, the pipeline skips stages 0–4 and passes one unconditional snapshot directly to the handler. This avoids building exclusive entries and a Cartesian product for ordinary state-free styles.
+
 ### How It Works
 
 1. Collect exclusive entries for each style the handler uses
@@ -454,6 +456,7 @@ Style handlers encapsulate the logic for translating design tokens (like `'2x'`)
 ### What It Does
 
 Combines rules that have identical CSS output into a single rule with an OR condition.
+Zero- and one-rule inputs return unchanged because no merge is possible.
 
 ### How It Works
 

package/docs/plugins.md

@@ -246,7 +246,7 @@ function glazeStyles(value: GlazeValue): Styles {
     styles = Object.freeze({
       '#glaze-bg': `#${tone}.${intensity}`,
       fill: '#glaze-bg',
-      transition: 'fill 0.2s',
+      transition: 'fill',
     }) as Styles;
     cache.set(key, styles);
   }

package/docs/runtime-benchmarks.md

@@ -40,27 +40,44 @@ of elements, rules or interactions. Machine load, browser versions, and CPU
 power will move the results — on a loaded machine the absolute columns drift
 several percent while the raw/Tasty delta holds, so read the delta.
 
+**On a laptop, check the power state first.** Low Power Mode caps CPU frequency,
+and it is the single largest source of error here — larger than background load.
+Measured on the machine below, running on battery with Low Power Mode enabled
+made every one of the 53 Node cases slower, by a median of 26%, and halving the
+background load recovered only 3 points of that. A frequency cap scales every
+case by roughly the same factor, so it does not look like noise; it looks like a
+uniformly slower library. Verify before trusting a run:
+
+```bash
+pmset -g ps | head -2      # want 'AC Power'
+pmset -g | grep -i lowpowermode   # want 0
+```
+
 ## Core Style Pipeline
 
-The following numbers are single-call throughput measured on an Apple M1 Max
-with Node 22:
-
-| Operation                                                   |              ops/sec | Latency (mean) |
-| ----------------------------------------------------------- | -------------------: | -------------: |
-| `renderStyles` — 5 flat properties (cold)                   |              ~60,000 |         ~17 us |
-| `renderStyles` — state map with media/hover/modifier (cold) |              ~18,500 |         ~54 us |
-| `renderStyles` — same styles (cached)                       |           ~5,800,000 |       ~0.17 us |
-| `parseStateKey` — simple key like `:hover` (cold)           |             ~790,000 |        ~1.3 us |
-| `parseStateKey` — complex OR/AND/NOT key (cold)             |             ~140,000 |          ~7 us |
-| `parseStateKey` — any key (cached)                          | ~3,400,000–8,300,000 |    ~0.1–0.3 us |
-| `parseStyle` — value tokens like `2x 4x` (cold)             |             ~344,000 |        ~2.9 us |
-| `parseStyle` — color tokens (cold)                          |             ~567,000 |        ~1.8 us |
-| `parseStyle` — any value (cached)                           |          ~15,250,000 |       ~0.07 us |
+Single-call throughput, three consecutive runs on an Apple M3 Pro with Node
+24.18.0 on AC power:
+
+| Operation                                                   |               ops/sec | Latency (mean) |
+| ----------------------------------------------------------- | --------------------: | -------------: |
+| `renderStyles` — 5 flat properties (cold)                   |       143,000–158,000 |     6.3–7.0 us |
+| `renderStyles` — state map with media/hover/modifier (cold) |         31,000–36,000 |       28–32 us |
+| `renderStyles` — OR state map across contexts (cold)        |         13,000–14,000 |       71–76 us |
+| `renderStyles` — same styles (cached)                       |  9,830,000–10,420,000 |       ~0.10 us |
+| `parseStateKey` — simple key like `:hover` (cold)           |   1,910,000–1,980,000 |       ~0.50 us |
+| `parseStateKey` — value modifier key (cold)                 |   1,120,000–1,160,000 |       ~0.90 us |
+| `parseStateKey` — complex OR/AND/NOT key (cold)             |       341,000–357,000 |     2.8–2.9 us |
+| `parseStateKey` — any key (cached)                          |  4,900,000–16,530,000 |    0.10–0.20 us |
+| `parseStyle` — value tokens like `2x 4x` (cold)             |       575,000–605,000 |       ~1.7 us |
+| `parseStyle` — color tokens (cold)                          |   1,160,000–1,240,000 |    0.80–0.90 us |
+| `parseStyle` — layered functions (cold)                     |       175,000–184,000 |     5.4–5.7 us |
+| `parseStyle` — any value (cached)                           | 29,500,000–30,750,000 |      ~0.03 us |
 
 “Cold” cases use unique inputs to bypass the relevant caches. Cached cases
-reuse one input and measure the LRU hot path. Expect roughly ±10% between runs.
-These benchmarks do not include React, DOM work, stylesheet injection, style
-resolution, layout, or paint.
+reuse one input and measure the LRU hot path. Run-to-run spread on an idle
+machine was 1–7% for most cases, rising to 10–16% for the two `renderStyles`
+cold cases. These benchmarks do not include React, DOM work, stylesheet
+injection, style resolution, layout, or paint.
 
 The benchmark sources are colocated with the code they exercise:
 [`pipeline.bench.ts`](../src/pipeline/pipeline.bench.ts),
@@ -86,19 +103,19 @@ excludes layout, paint, and stylesheet matching. Every commit is wrapped in
 `flushSync`, keeping its synchronous reconciliation and commit inside the
 sample. This does not estimate React's concurrent scheduling latency.
 
-On an Apple M3 Pro with React 19.2.4 and Chromium 151, three consecutive runs
+On an Apple M3 Pro with React 19.2.8 and Chromium 151, three consecutive runs
 produced these ranges:
 
-| Work on 10,000 siblings             | Raw elements |  `tasty({})` | Extra per wrapped element |
-| ----------------------------------- | -----------: | -----------: | ------------------------: |
-| Mount + remove                      |   4.5–4.9 ms | 14.0–14.9 ms |              0.95–1.00 us |
-| Rerender, same host props           |   1.3–1.4 ms | 10.9–11.4 ms |              0.96–1.00 us |
-| Rerender, change one host attribute |   2.8–3.4 ms | 15.0–15.7 ms |              1.21–1.27 us |
+| Work on 10,000 siblings             | Raw elements | `tasty({})` | Extra per wrapped element |
+| ----------------------------------- | -----------: | ----------: | ------------------------: |
+| Mount + remove                      |   4.2–4.3 ms |  9.2–9.7 ms |              0.50–0.54 us |
+| Rerender, same host props           |   1.2–1.3 ms |  6.3–6.5 ms |              0.51–0.52 us |
+| Rerender, change one host attribute |   2.5–2.7 ms | 11.2–11.6 ms |             0.86–0.91 us |
 
 The useful result is the raw/Tasty time difference divided by 10,000, not the
 ratio between the two times. The ratio becomes large because the raw baseline
-is tiny. In this synthetic workload, an empty wrapper adds roughly 1 us per
-participating element, or 1.2–1.3 us when React also changes a DOM attribute.
+is tiny. In this synthetic workload, an empty wrapper adds roughly 0.5 us per
+participating element, or ~0.9 us when React also changes a DOM attribute.
 
 This is the floor Tasty consumes when it has no styling job. It is not a
 page-level score. Real trees include application components, effects, layout,
@@ -143,17 +160,23 @@ ranges:
 
 | Workload                                             | CSS already present |  Tasty runtime | Incremental Tasty cost |
 | ---------------------------------------------------- | ------------------: | -------------: | ---------------------: |
-| One new rule + immediate resolution, per transaction |          2.8–3.3 us | 110.3–113.8 us |         107.3–111.0 us |
-| 1,000 new rules + one resolution                     |        1.86–2.06 ms |   9.01–9.98 ms |           7.13–7.92 ms |
-| 1,000-rule workload, incremental cost per rule       |                   — |              — |             7.1–7.9 us |
+| One new rule + immediate resolution, per transaction |          2.6–3.0 us | 102.8–107.0 us |         100.3–104.3 us |
+| 1,000 new rules + one resolution                     |        1.69–1.79 ms |   7.42–7.67 ms |           5.73–5.94 ms |
+| 1,000-rule workload, incremental cost per rule       |                   — |              — |             5.7–5.9 us |
 
 Directly compared, injecting 1,000 rules before one resolution boundary cost
-about 66–71 times as much in total as injecting one rule and resolving it—not
-1,000 times as much. Its average incremental cost per rule was about 14–16
+about 55–59 times as much in total as injecting one rule and resolving it—not
+1,000 times as much. Its average incremental cost per rule was about 17–18
 times lower. This is the same Tasty generation and injection path in both cases;
 the group amortizes fixed transaction work and lets the browser resolve all the
 stylesheet writes together.
 
+The per-transaction single-rule figure is the one number here that engine work
+does not move: it is dominated by the browser's injection-to-resolution
+boundary, which is crossed once per rule regardless of how fast generation is.
+The 1,000-rule column, where Tasty's own generation dominates, is where engine
+changes show up.
+
 The subtraction is the meaningful result. It includes Tasty's cold style
 generation, cache and injector bookkeeping, rule insertion, and any additional
 style invalidation exposed by that workload's resolution boundary. It does not
@@ -207,25 +230,25 @@ if the hovered rule is not already there. That a style map's states all ship in
 one chunk on first render is the premise of this case; if the hovered rule
 arrived lazily, the first sample would be timing injection.
 
-On an Apple M1 Max with React 19.2.8 and Chromium 151, across several runs:
+On an Apple M3 Pro with React 19.2.8 and Chromium 151, three consecutive runs:
 
-| Workload                                             | Raw elements |   Tasty mods |           Extra per unit |
-| ---------------------------------------------------- | -----------: | -----------: | -----------------------: |
-| 300 single-element mod toggles in a 100-element tree |   2.1–2.5 ms |   2.7–3.1 ms | 1.6–2.1 us / interaction |
-| 20 mount + unmount cycles of a 200-element subtree    |   7.6–8.0 ms | 12.6–12.7 ms |   1.22–1.27 us / element |
+| Workload                                             | Raw elements | Tasty mods |           Extra per unit |
+| ---------------------------------------------------- | -----------: | ---------: | -----------------------: |
+| 300 single-element mod toggles in a 100-element tree |   1.7–1.8 ms | 2.0–2.1 ms | 1.2–1.3 us / interaction |
+| 20 mount + unmount cycles of a 200-element subtree    |   5.2–5.4 ms | 8.3–8.6 ms |   0.77–0.81 us / element |
 
 The absolute columns move several percent with machine load; the delta between
 the arms is the stable quantity, so read that rather than either column.
 
 Two things are worth reading out of this.
 
-A mod flip on an already-mounted element costs about 2 us. The CSS for both
+A mod flip on an already-mounted element costs about 1.2 us. The CSS for both
 states already exists — Tasty emits every state of a style map in one chunk on
 first render — so both arms perform the same commit, and what is left is
-Tasty's props and mod handling. That is the same order as the ~1 us empty
+Tasty's props and mod handling. That is the same order as the ~0.5 us empty
 wrapper measured above, which is most of where it comes from.
 
-Subtree churn is not about styling at all. Its ~1.25 us per element sits right
+Subtree churn is not about styling at all. Its ~0.8 us per element sits right
 on the empty-wrapper mount cost, because the styles are already cached:
 reopening a menu re-pays the React wrapper, not the style pipeline.
 
@@ -257,7 +280,7 @@ Two things about the payload decide whether this measures a deployment or a
 straw man, so both are enforced rather than assumed:
 
 - **Assets are served brotli-compressed**, the way a static host serves them.
-  The bundle is 52.0 KB on the wire and 186 KB decoded; putting the decoded
+  The bundle is 51.5 KB on the wire and 180 KB decoded; putting the decoded
   bytes on a 1.6 Mbps link would add ~700 ms and charge it to Tasty. The run
   reads `encodedBodySize` back out of resource timing and fails if what
   crossed the wire is not the compressed size the table reports.
@@ -266,35 +289,48 @@ straw man, so both are enforced rather than assumed:
   would be. Re-exporting the whole library adds ~4 KB brotli of code no page
   here calls.
 
-On an Apple M1 Max with React 19.2.8 and Chromium 151, first contentful paint:
+On an Apple M3 Pro with React 19.2.8 and Chromium 151, first contentful paint,
+median of three full runs of the matrix:
+
+| Link / CPU            | baseline | runtime | prewarm | Tasty's cost | noise |
+| --------------------- | -------: | ------: | ------: | -----------: | ----: |
+| No throttling, 1x     |    36 ms |   40 ms |   40 ms |        +4 ms |  0 ms |
+| Fast 4G, 1x           |   628 ms |  672 ms |  688 ms |       +44 ms | 20 ms |
+| Slow 4G, 1x           |  2044 ms | 2308 ms | 2308 ms |      +264 ms | 24 ms |
+| No throttling, 4x CPU |   112 ms |  144 ms |  144 ms |       +32 ms | 16 ms |
+| Fast 4G, 4x CPU       |   656 ms |  728 ms |  736 ms |       +72 ms |  4 ms |
+| Slow 4G, 4x CPU       |  2064 ms | 2360 ms | 2360 ms |      +296 ms |  8 ms |
+
+The `noise` column is not an estimate. The `baseline` page contains no Tasty at
+all, so its three samples should be identical; the spread they actually show is
+this cell's measurement error, and it applies to the other columns too.
 
-| Link / CPU            | baseline | runtime | prewarm | Tasty's cost |
-| --------------------- | -------: | ------: | ------: | -----------: |
-| No throttling, 1x     |    40 ms |   52 ms |   52 ms |       +12 ms |
-| Fast 4G, 1x           |   624 ms |  680 ms |  676 ms |       +56 ms |
-| Slow 4G, 1x           |  2028 ms | 2304 ms | 2304 ms |      +276 ms |
-| No throttling, 4x CPU |   148 ms |  196 ms |  196 ms |       +48 ms |
-| Fast 4G, 4x CPU       |   684 ms |  784 ms |  788 ms |      +100 ms |
-| Slow 4G, 4x CPU       |  2096 ms | 2416 ms | 2408 ms |      +320 ms |
+Read that column before any other. Only the Slow 4G rows carry a cost an order
+of magnitude above their own noise. The unthrottled 1x row (+4 ms) means "too
+small to measure this way", not "4 ms". And a single run is genuinely not
+enough here: taken alone, the first of these three runs put Fast 4G 1x at
++72 ms, which the median over three corrects to +44 ms.
 
-That is one full run of the matrix; a second moved every cell by a few percent.
+For the same reason, `prewarm` landing above `runtime` in the Fast 4G 1x row is
+noise, not a cost — the two modes differ only in when the engine compiles, and
+that difference is measured in the phase table below, not in FCP.
 
 **The cost is the bundle, not the work.** On Slow 4G the extra transfer alone
-accounts for 262 ms of the 276 ms FCP delta — nearly all of it. Everything
-Tasty then *does* is small by comparison:
+accounts for 263 ms of the 264 ms FCP delta — effectively all of it. Everything
+Tasty then *does* is small by comparison (median of three runs):
 
 | Phase (Slow 4G, 1x)     | baseline | runtime | prewarm |
 | ----------------------- | -------: | ------: | ------: |
-| js+css transfer         |  1420 ms | 1682 ms | 1681 ms |
-| module compile (shared) |   1.2 ms |  1.5 ms |  2.0 ms |
-| tasty top-level execute |        — |  1.2 ms |  0.9 ms |
-| `configure()`           |        — |  0.6 ms |  0.5 ms |
-| prewarm                 |        — |       — |  5.3 ms |
-| render 1st component    |   2.0 ms |  8.2 ms |  2.7 ms |
-| render 49 more          |   1.0 ms |  7.1 ms |  6.0 ms |
+| js+css transfer         |  1423 ms | 1686 ms | 1690 ms |
+| module compile (shared) |   3.5 ms |  3.3 ms |  3.0 ms |
+| tasty top-level execute |        — |  1.2 ms |  0.8 ms |
+| `configure()`           |        — |  0.6 ms |  0.4 ms |
+| prewarm                 |        — |       — |  3.3 ms |
+| render 1st component    |   3.0 ms |  7.3 ms |  1.9 ms |
+| render 49 more          |   1.3 ms |  5.2 ms |  3.8 ms |
 
 Importing Tasty costs about 1 ms of top-level execution; `configure()` costs
-half of one. The rest of the CPU delta — about 13 ms for 50 components — is
+half of one. The rest of the CPU delta — about 10 ms for 50 components — is
 generation and injection, which is the cost the injection benchmark isolates.
 
 One asymmetry is worth naming: the control links a render-blocking stylesheet
@@ -304,20 +340,21 @@ delivery models, not a thumb on the scale, but it means the FCP delta is not
 purely "what Tasty costs to execute".
 
 **Prewarming moves the wake-up, it does not remove it.** The first styled render
-is ~5 ms more expensive than the ones after it, because that is when the
+is ~5.4 ms more expensive than the ones after it, because that is when the
 engine's deferred payload is actually compiled. A throwaway `computeStyles()`
-against a detached root pays it early: `render 1st` drops from 8.2 ms to
-2.7 ms. The prewarm itself costs 5.3 ms, so FCP does not move. It is worth
-doing only when something else can overlap it, or when the first render is on a
-latency-critical path and the page has idle time before it.
+against a detached root pays it early: `render 1st` drops from 7.3 ms to
+1.9 ms. The prewarm itself costs 3.3 ms, so the work is moved rather than
+removed and FCP does not move. It is worth doing only when something else can
+overlap it, or when the first render is on a latency-critical path and the page
+has idle time before it.
 
 **Retained heap.** After a forced collection, the runtime page holds about
-1,013 KB more than the control (2,632 KB vs 1,619 KB) for 50 components — the
+985 KB more than the control (2,605 KB vs 1,619 KB) for 50 components — the
 parser caches, the chunk cache, the injector's registry and the generated CSS.
 The control is not zero either; most of its 1.6 MB is React and the DOM.
 
 CPU throttling changes which line moves. At 4x, module compilation of the
-larger graph becomes visible (5.9 ms → 25 ms) where at 1x it is free: V8
+larger graph becomes visible (2.6 ms → 19 ms) where at 1x it is free: V8
 pre-parses at import and compiles lazily, so a slower CPU pays for code the
 faster one never fully compiled. Transfer numbers from the unthrottled cells
 are not worth reading — with no emulated link, resource timings are scheduling
@@ -341,8 +378,8 @@ blindly. They describe different paths:
 
 The cold-start measurement is the one that puts the rest in proportion. On a
 slow connection, nearly all of Tasty's page-load cost is transferring the
-library — 262 ms of a 276 ms delta — while the generation and injection the
-microbenchmarks obsess over is ~13 ms for 50 components. Bundle size is
+library — 263 ms of a 264 ms delta — while the generation and injection the
+microbenchmarks obsess over is ~10 ms for 50 components. Bundle size is
 therefore the lever with the largest effect on first paint, and the runtime
 levers matter for what happens after it.
 

package/docs/ssr.md

@@ -506,7 +506,7 @@ const stream = await runWithCollector(collector, () =>
 | `@tenphi/tasty/ssr/next-config`                                                                                                                                                            | Next.js config wrapper: shared, content-hashed global stylesheet                                                                                                                                                |
 | `@tenphi/tasty/ssr/astro`                                                                                                                                                                  | Astro: `tastyIntegration`, `tastyMiddleware`                                                                                                                                                                    |
 | `@tenphi/tasty/ssr/astro-client`                                                                                                                                                           | Astro: client-side cache hydration (auto-injected by integration, or import manually)                                                                                                                           |
-| `@tenphi/tasty/ssr/astro-middleware`<br>`@tenphi/tasty/ssr/astro-middleware-static`<br>`@tenphi/tasty/ssr/astro-middleware-extract`<br>`@tenphi/tasty/ssr/astro-middleware-extract-static` | Astro: the middleware entrypoints `tastyIntegration()` registers via `addMiddleware()`. Exported so Astro can resolve them by specifier; you should not import them. For manual setups use `tastyMiddleware()`. |
+| `@tenphi/tasty/ssr/astro-middleware`<br />`@tenphi/tasty/ssr/astro-middleware-static`<br />`@tenphi/tasty/ssr/astro-middleware-extract`<br />`@tenphi/tasty/ssr/astro-middleware-extract-static` | Astro: the middleware entrypoints `tastyIntegration()` registers via `addMiddleware()`. Exported so Astro can resolve them by specifier; you should not import them. For manual setups use `tastyMiddleware()`. |
 
 ### `ServerStyleCollector`
 

package/docs/styles.md

@@ -566,15 +566,15 @@ When easing is provided without a duration, the default timing variable is used
 | `zIndex` | `z-index` |
 | `inset` | `inset`, `top`, `right`, `bottom`, `left` |
 
-Default timing: `$transition` (or `${name}-transition` with `$transition` fallback per semantic name).
+Default timing: `$transition` (or `${name}-transition` with `$transition` fallback per semantic name). Prefer omitting the duration or using a duration token instead of repeating raw time values across components. Explicit zero can disable motion.
 
 ```jsx
-transition="theme 0.3s"
-transition="fill 0.2s, radius 0.3s"
-transition="fade 0.15s ease-in"
+transition="theme"
+transition="fill, radius"
+transition="fade $transition ease-in"
 transition="fill ease-in"           // easing without duration (uses default timing)
 transition="radius ease-in-out"     // easing keyword only
-transition="$$custom-prop 0.3s"     // custom property transition
+transition="$$custom-prop"          // custom property transition
 ```
 
 **Recognized easing keywords:** `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`, `step-start`, `step-end`. CSS easing functions (`cubic-bezier(...)`, `steps(...)`, `linear(...)`) are also recognized.

package/docs/tasty-static.md

@@ -489,7 +489,7 @@ const button = tastyStatic({
   radius: '1r',
   fill: '#gray.20',
   color: '#text',
-  transition: 'fill 0.15s',
+  transition: 'fill',
 });
 
 // Variants

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "0.0.0-snapshot.d656d18",
+  "version": "0.0.0-snapshot.d7129ca",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",
@@ -133,6 +133,7 @@
     "release": "changeset publish",
     "knip": "knip",
     "check:build": "node scripts/check-built-entries.mjs",
+    "check:react-compat": "node scripts/check-react-compat.mjs",
     "check:test-only": "node scripts/check-test-only-code.mjs",
     "hygiene": "pnpm lint && pnpm format:check && pnpm typecheck",
     "hygiene:fix": "pnpm lint:fix && pnpm format && pnpm typecheck"
@@ -231,43 +232,43 @@
       "name": "main (import *)",
       "path": "dist/index.js",
       "import": "*",
-      "limit": "58.5 kB"
+      "limit": "57.5 kB"
     },
     {
       "name": "main (tasty)",
       "path": "dist/index.js",
       "import": "{ tasty }",
-      "limit": "51.5 kB"
+      "limit": "50.61 kB"
     },
     {
       "name": "main (StyleParser)",
       "path": "dist/index.js",
       "import": "{ StyleParser }",
-      "limit": "7.5 kB"
+      "limit": "6.94 kB"
     },
     {
       "name": "main (parseColor)",
       "path": "dist/index.js",
       "import": "{ parseColor }",
-      "limit": "8 kB"
+      "limit": "7.59 kB"
     },
     {
       "name": "main (useRawCSS)",
       "path": "dist/index.js",
       "import": "{ useRawCSS }",
-      "limit": "32 kB"
+      "limit": "31.2 kB"
     },
     {
       "name": "core (import *)",
       "path": "dist/core/index.js",
       "import": "*",
-      "limit": "55.5 kB"
+      "limit": "54.3 kB"
     },
     {
       "name": "static",
       "path": "dist/static/index.js",
       "import": "*",
-      "limit": "2.1 kB"
+      "limit": "1.08 kB"
     },
     {
       "name": "zero",
@@ -278,7 +279,7 @@
         "path",
         "crypto"
       ],
-      "limit": "33.3 kB"
+      "limit": "32.29 kB"
     },
     {
       "name": "babel-plugin",
@@ -289,7 +290,25 @@
         "path",
         "crypto"
       ],
-      "limit": "51.7 kB"
+      "limit": "41.1 kB"
+    },
+    {
+      "name": "astro client",
+      "path": "dist/ssr/astro-client.js",
+      "import": "*",
+      "limit": "0.5 kB"
+    },
+    {
+      "name": "Next.js config",
+      "path": "dist/ssr/next-config.js",
+      "import": "{ withTastyNext }",
+      "ignore": [
+        "node:crypto",
+        "node:fs",
+        "node:module",
+        "node:path"
+      ],
+      "limit": "37.2 kB"
     }
   ]
 }