@tenphi/tasty 0.0.0-snapshot.db103fd → 0.0.0-snapshot.dc62ea3

package/docs/styles.md

@@ -1,6 +1,6 @@
 # Style Properties Reference
 
-All standard CSS properties are supported in Tasty and benefit from its syntax sugar: design tokens (`$name`, `#name`), custom units (`2x`, `1r`, `1bw`), color opacity (`#purple.5`), auto-calc (`(100% - 2x)`), and custom functions. Values are parsed through the Tasty engine automatically.
+All standard CSS properties are supported in Tasty and benefit from its syntax sugar: design tokens (`$name`, `#name`), custom units (`2x`, `1r`, `1bw`), color opacity (`#purple.5`), auto-calc (`(100% - 2x)`), and [custom functions](dsl.md#functions-function) (`$$negative(10px)`). Values are parsed through the Tasty engine automatically.
 
 The properties documented below have **custom handlers** with enhanced syntax. They should be **preferred** over their raw CSS equivalents because they:
 
@@ -100,18 +100,26 @@ For flex/grid layouts, outputs native `gap`. For block layouts, emulates gap usi
 
 Element padding with directional modifiers and multi-group support. Use **comma-separated groups** to set a base value and then override specific directions.
 
-**Syntax:** `[value]` | `[top right]` | `[top right bottom left]` | `[value directions...]` — comma-separated for multiple groups
+**Syntax:** `[value]` | `[block inline]` | `[top right bottom left]` | `[value direction...]` — comma-separated for multiple groups
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`padding-top`, `padding-right`, `padding-bottom`, `padding-left`) instead of the `padding` shorthand. Useful when children need to selectively inherit individual directions.
+
+**One value per directional group.** A group that names direction modifiers takes **exactly one** value, applied to every direction it names. For different values per side, use comma-separated groups: `padding: '2x top, 4x right'`. Writing `padding: '2x 4x top right'` ignores `4x` and warns in development — the parser keeps values and modifiers in separate buckets, so their interleaving in the source is not recoverable and `'2x 4x top right'`, `'2x top 4x right'` and `'top 2x right 4x'` are all the same input.
+
+A group that names *no* direction keeps plain CSS shorthand order, which is unambiguous and unchanged.
+
 | Value | Effect |
 |-------|--------|
 | `"2x"` | All sides `2x` |
 | `"2x 1x"` | Top/bottom `2x`, left/right `1x` |
 | `"2x top"` | Top `2x`, right/bottom/left `0` |
 | `"1x left right"` | Left and right `1x`, top/bottom `0` |
+| `"2x top, 4x right"` | Top `2x`, right `4x`, bottom/left `0` |
 | `"1x, 2x top"` | All sides `1x`, then top overridden to `2x` |
 | `"1x, 2x top bottom"` | Left/right `1x`, top/bottom `2x` |
+| `"2x longhand"` | All sides `2x`, output as 4 individual `padding-*` properties |
 | `true` | All sides `1x` |
 | Number | Converted to `px` |
 
@@ -125,15 +133,20 @@ Individual props `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `
 
 Element margin. Same syntax, modifiers, and multi-group support as `padding`.
 
-**Syntax:** `[value]` | `[top right]` | `[top right bottom left]` | `[value directions...]` — comma-separated for multiple groups
+**Syntax:** `[value]` | `[block inline]` | `[top right bottom left]` | `[value direction...]` — comma-separated for multiple groups
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`margin-top`, etc.) instead of the `margin` shorthand.
+
+The [one-value-per-directional-group rule](#padding) from `padding` applies here too.
+
 | Value | Effect |
 |-------|--------|
 | `"2x"` | All sides `2x` |
 | `"2x 1x"` | Top/bottom `2x`, left/right `1x` |
 | `"2x top"` | Top `2x`, right/bottom/left `0` |
+| `"2x top, 4x right"` | Top `2x`, right `4x`, bottom/left `0` |
 | `"auto left right, 1x top bottom"` | Left/right `auto`, top/bottom `1x` |
 | `true` | All sides `1x` |
 | Number | Converted to `px` |
@@ -186,17 +199,38 @@ Separate `minHeight` and `maxHeight` props are supported and override values fro
 
 Positioning offsets with directional modifiers and multi-group support. Same directional syntax as `padding`.
 
-**Syntax:** `[value]` | `[top right]` | `[top right bottom left]` | `[value directions...]` — comma-separated for multiple groups
+**Syntax:** `[value]` | `[block inline]` | `[top right bottom left]` | `[value direction...]` — comma-separated for multiple groups
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+The [one-value-per-directional-group rule](#padding) from `padding` applies here too, with `dock`
+as the single exception.
+
+**`dock` modifier:** pins the named edge and spans its full length, by also applying the value
+to the two perpendicular sides. `inset: 'bottom dock'` gives `inset: auto 0 0 0` — anchored to
+the bottom, full width. Without a direction, `dock` fills every side.
+
+`dock` is the one place a directional group takes **two** values: the first insets the named
+edge, the second the sides it spans. `inset: '2x 4x bottom dock'` pins the bottom at `2x` and
+insets the sides by `4x`. A third value, or a second value without `dock`, is ignored and warns
+in development. With several directions the first value applies to each named edge and the
+second to every side they span.
+
+**Output modifier:** `longhand` — forces output as individual CSS properties (`top`, `right`, `bottom`, `left`) instead of the `inset` shorthand.
+
 | Value | Effect |
 |-------|--------|
 | `"0"` | All sides `0` |
 | `"2x top"` | Top `2x`, right/bottom/left `auto` |
 | `"1x left right"` | Left and right `1x`, top/bottom `auto` |
 | `"0, 2x top"` | All sides `0`, then top overridden to `2x` |
+| `"0 longhand"` | All sides `0`, output as individual `top`/`right`/`bottom`/`left` |
 | `true` | All sides `0` |
+| `"bottom dock"` | Bottom/left/right `0`, top `auto` — bottom-anchored, full width |
+| `"right dock"` | Right/top/bottom `0`, left `auto` — right-anchored, full height |
+| `"2x bottom dock"` | Bottom/left/right `2x`, top `auto` |
+| `"2x 4x bottom dock"` | Bottom `2x`, left/right `4x`, top `auto` |
+| `"dock"` | All sides `0` |
 
 Later comma-separated groups override earlier groups for conflicting directions.
 
@@ -220,6 +254,7 @@ Background color with design token support. Preferred over `backgroundColor` and
 | `"#purple.10"` | Token color at 10% opacity |
 | `"#surface #primary.10"` | Background `#surface` with `#primary.10` overlay (two colors enable smooth transitions between both) |
 | `"rgb(255 128 0)"` | CSS color value |
+| `"color-mix(in oklab, #primary 50%, #surface)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
 | `true` | Default fill color |
 
 When two colors are provided, the first sets the background color and the second is applied as an overlay gradient layer. This enables independent CSS transitions on each color. The overlay is only applied when no explicit `image` or `backgroundImage` is set.
@@ -252,9 +287,17 @@ Text color with design token support.
 | `"#current"` | Current inherited color |
 | `"#current.5"` | Current inherited color at 50% opacity |
 | `"(#primary, #secondary)"` | Fallback: use `#primary`, fall back to `#secondary` |
+| `"light-dark(#dark, #light)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
 | `true` | `currentColor` |
 
-When set to a named color token, also sets `$current-color` and `$current-color-{colorSpace}` custom properties for downstream use (suffix depends on the configured `colorSpace`, default `oklch`).
+Also sets `$current-color` to the same color, for anything that needs the
+inherited color as a color rather than as the `currentcolor` keyword. Every color
+publishes it, not just a named token, so a reader below always takes the nearest
+`color` rather than the nearest *token* color. A value that already reads the
+inherited color — `#current` itself, a `#current` fade, a bare `currentColor` —
+is not republished: resolving it a second time one level down would fade it
+twice, and the variable into itself is a self-reference. `#current` does not go
+through it; it is the keyword.
 
 ### `svgFill`
 
@@ -262,7 +305,7 @@ SVG fill color. Same color token syntax as `fill` and `color`. Outputs the nativ
 
 ```jsx
 svgFill="#purple.10"
-svgFill="currentColor"
+svgFill="#current"
 ```
 
 ---
@@ -281,12 +324,15 @@ Border shorthand with directional and multi-group support. Use **comma-separated
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS properties (`border-top`, `border-right`, `border-bottom`, `border-left`) instead of the `border` shorthand. Useful when children need to selectively inherit individual sides.
+
 | Value | Effect |
 |-------|--------|
 | `true` | Default border (`1bw solid #border`) on all sides |
 | `"2bw dashed #purple"` | All sides: 2bw dashed purple |
 | `"2bw top"` | Top only: 2bw solid `#border`, others: 0 |
 | `"dotted #danger left right"` | Left/right: 1bw dotted `#danger`, others: 0 |
+| `"1bw longhand"` | All sides: 1bw solid `#border`, output as 4 individual `border-*` properties |
 | `"1bw #red, 2bw #blue top"` | All sides: 1bw solid `#red`, top overridden to 2bw solid `#blue` |
 | `"1bw, dashed top bottom, #purple left right"` | Base: 1bw solid `#border`, top/bottom: 1bw dashed `#border`, left/right: 1bw solid `#purple` |
 
@@ -308,7 +354,13 @@ Border radius with shape presets and directional modifiers.
 | `"backleaf"` | Asymmetric: round, sharp, round, sharp |
 | `"inherit"` | Inherit border-radius from parent |
 
-**Direction modifiers:** `top`, `right`, `bottom`, `left` — rounds only the specified corners.
+**Edge modifiers:** `top`, `right`, `bottom`, `left` — rounds the *pair* of corners along that edge.
+
+**Corner modifiers:** `top-left`, `top-right`, `bottom-right`, `bottom-left` — rounds a single corner.
+Use these when an edge modifier would round one corner too many. Edge and corner modifiers combine
+(`radius: 'top bottom-right'`).
+
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`) instead of the `border-radius` shorthand. Useful when children need to selectively inherit individual corners via `radius: 'inherit left'`.
 
 | Value | Effect |
 |-------|--------|
@@ -318,8 +370,12 @@ Border radius with shape presets and directional modifiers.
 | `"1r top"` | Top-left and top-right `1r`, bottom-left and bottom-right `0` |
 | `"leaf"` | Alternating sharp/round corners (top-left `0`, top-right `1r`, bottom-right `0`, bottom-left `1r`) |
 | `"backleaf"` | Inverse leaf (top-left `1r`, top-right `0`, bottom-right `1r`, bottom-left `0`) |
+| `"1r longhand"` | All corners `1r`, output as 4 individual `border-*-radius` properties |
 | `"inherit"` | All corners inherit from parent (`border-radius: inherit`) |
 | `"inherit right"` | Right corners inherit from parent (uses longhand properties) |
+| `"top-right"` | Top-right corner `1r`, every other corner `0` |
+| `"4px top-left"` | Top-left corner `4px`, every other corner `0` |
+| `"top bottom-right"` | Both top corners and bottom-right `1r`, bottom-left `0` |
 
 ### `outline`
 
@@ -364,11 +420,11 @@ Multiple shadows: `shadow="1x 1x 2x #dark.20, inset 0 0 4x #dark.10"`
 
 Typography preset that sets font-size, line-height, letter-spacing, font-weight, font-style, and text-transform from named design tokens.
 
-**Syntax:** `name`, `name / modifier`, or `modifier` (shorthand)
+**Syntax:** `name`, `name / modifier...`, or `modifier...` (shorthand)
 
 Preset names are project-specific (e.g. `h1`–`h6`, `t1`–`t4`, `p1`–`p4`). Register them for autocomplete by augmenting `TastyPresetNames`.
 
-Use `/` to separate the preset name from a modifier. When a modifier is used alone (without a name), the preset name defaults to `inherit`.
+Use `/` to separate the preset name from one or more space-separated modifiers. When modifiers are used alone (without a name), the preset name defaults to `inherit`. Modifiers can be combined freely because they target different properties.
 
 **Modifiers:**
 
@@ -380,11 +436,13 @@ Use `/` to separate the preset name from a modifier. When a modifier is used alo
 | `tight` | Sets line-height equal to font-size |
 
 ```jsx
-preset="h1"              // heading 1
-preset="h2 / strong"     // bold heading 2
-preset="t3 / italic"     // italic text 3
-preset="t2 / tight"      // text 2 with tight line-height
-preset="bold"             // inherit preset with bold (shorthand for "inherit / bold")
+preset="h1"                    // heading 1
+preset="h2 / strong"           // bold heading 2
+preset="h2 / strong italic"    // bold + italic heading 2
+preset="t3 / italic"           // italic text 3
+preset="t2 / strong tight"     // bold text 2 with tight line-height
+preset="bold"                  // inherit preset with bold (shorthand)
+preset="bold italic"           // inherit preset with bold + italic (shorthand)
 ```
 
 Individual typography props (`fontSize`, `lineHeight`, `letterSpacing`, `fontWeight`, `fontStyle`, `textTransform`) can be used alongside `preset` to override specific values, but using `preset` alone is recommended.
@@ -536,15 +594,20 @@ Scrollbar styling using CSS standard properties (`scrollbar-width`, `scrollbar-c
 
 Gradient-based edge fading using CSS masks. Use **comma-separated groups** to set different widths and colors per direction.
 
-**Syntax:** `[width] [directions...] [#from-color] [#to-color]` — comma-separated for multiple groups
+**Syntax:** `[width] [direction...] [#from-color] [#to-color]` — comma-separated for multiple groups
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+A group that names edges takes a **single** width, applied to every edge it names — different
+widths per edge come from comma groups. A group that names no edge covers all four and keeps
+plain CSS shorthand order, like `padding`. See the [`padding` rule](#padding).
+
 | Value | Effect |
 |-------|--------|
 | `"top"` | Fade top edge, default width (`2x`), all other edges unfaded |
 | `"2x left right"` | Fade left and right edges with `2x` width, top/bottom unfaded |
-| `"3x 1x top bottom"` | Fade top with `3x` width, bottom with `1x` width |
+| `"3x 1x"` | All edges faded — top/bottom `3x`, left/right `1x` (CSS shorthand order) |
+| `"3x top, 1x bottom"` | Fade top with `3x` width, bottom with `1x` width |
 | `"2x #transparent #dark"` | All edges faded with `2x` width, from `#transparent` to `#dark` |
 | `"top #a #b, bottom #c #d"` | Top fades from `#a` to `#b`, bottom fades from `#c` to `#d` |
 

package/docs/tasty-static.md

@@ -1,6 +1,8 @@
-# Zero Runtime Mode (tastyStatic)
+# Build-Time Extraction (`tastyStatic`)
 
-`tastyStatic` is a build-time utility for generating CSS with zero runtime overhead. It's designed for static sites, no-JS websites, and performance-critical applications where you want to eliminate all runtime styling code. For the broader docs map, see the [Docs Hub](README.md).
+`tastyStatic` is Tasty's framework-agnostic build-time utility for extracting CSS before rendering. It produces no client styling runtime in file mode, but it is not the only way to achieve zero-runtime delivery: server-only `tasty()` also ships no Tasty runtime to the browser while retaining the full React component API. Astro's `tastyIntegration({ islands: false })` is the clearest example; the same architecture applies to server-only Next.js RSC.
+
+Choose `tastyStatic` specifically when styles must be generated during the build, when the consumer is not React, or when you want static class-name objects instead of components. For the broader docs map, see the [Docs Hub](README.md).
 
 ---
 
@@ -8,19 +10,19 @@
 
 - **Static site generation (SSG)** — Pre-render all styles at build time
 - **No-JavaScript websites** — CSS works without any JS runtime
-- **Performance-critical pages** — Zero runtime overhead for styling
+- **Performance-critical pages** — CSS extracted before the application renders
 - **Landing pages** — Minimal bundle size with pre-generated CSS
 
 ## Requirements
 
-The zero-runtime mode is part of the main `@tenphi/tasty` package but requires additional peer dependencies depending on your setup:
+Build-time extraction is part of the main `@tenphi/tasty` package but requires additional peer dependencies depending on your setup:
 
-| Dependency | Version | Required for |
-|---|---|---|
-| `@babel/core` | >= 7.24 | Babel plugin (`@tenphi/tasty/babel-plugin`) |
-| `@babel/helper-plugin-utils` | >= 7.24 | Babel plugin |
-| `@babel/types` | >= 7.24 | Babel plugin |
-| `jiti` | >= 2.6 | Next.js wrapper (`@tenphi/tasty/next`) when using `configFile` option |
+| Dependency                   | Version | Required for                                                               |
+| ---------------------------- | ------- | -------------------------------------------------------------------------- |
+| `@babel/core`                | >= 7.24 | Babel plugin (`@tenphi/tasty/babel-plugin`)                                |
+| `@babel/helper-plugin-utils` | >= 7.24 | Babel plugin                                                               |
+| `@babel/types`               | >= 7.24 | Babel plugin                                                               |
+| `jiti`                       | >= 2.6  | Next.js wrapper (`@tenphi/tasty/zero/next`) when using `configFile` option |
 
 All of these are declared as optional peer dependencies of `@tenphi/tasty`. Install only what your setup requires:
 
@@ -107,11 +109,11 @@ tastyStatic('body', {
 
 ## StaticStyle Object
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `className` | `string` | Space-separated class names for use in JSX |
-| `styles` | `Styles` | The original (or merged) styles object |
-| `toString()` | `() => string` | Returns `className` for string coercion |
+| Property     | Type           | Description                                |
+| ------------ | -------------- | ------------------------------------------ |
+| `className`  | `string`       | Space-separated class names for use in JSX |
+| `styles`     | `Styles`       | The original (or merged) styles object     |
+| `toString()` | `() => string` | Returns `className` for string coercion    |
 
 ---
 
@@ -123,49 +125,83 @@ tastyStatic('body', {
 // babel.config.js
 module.exports = {
   plugins: [
-    ['@tenphi/tasty/babel-plugin', {
-      output: 'public/tasty.css',
-    }]
-  ]
+    [
+      '@tenphi/tasty/babel-plugin',
+      {
+        output: 'public/tasty.css',
+      },
+    ],
+  ],
 };
 ```
 
-These examples use `data-schema="dark"` as the root-state convention. If your app already uses a different root attribute such as `data-theme`, keep the same alias pattern and swap the attribute name consistently in your zero-runtime config.
+These examples use `data-schema="dark"` as the root-state convention. If your app already uses a different root attribute such as `data-theme`, keep the same alias pattern and swap the attribute name consistently in your build-time config.
 
 ### With Configuration
 
 ```javascript
 module.exports = {
   plugins: [
-    ['@tenphi/tasty/babel-plugin', {
-      output: 'public/tasty.css',
-      config: {
-        states: {
-          '@mobile': '@media(w < 768px)',
-          '@tablet': '@media(w < 1024px)',
-          '@dark': '@root(schema=dark)',
+    [
+      '@tenphi/tasty/babel-plugin',
+      {
+        output: 'public/tasty.css',
+        config: {
+          states: {
+            '@mobile': '@media(w < 768px)',
+            '@tablet': '@media(w < 1024px)',
+            '@dark': '@root(schema=dark)',
+          },
+          devMode: true,
         },
-        devMode: true,
       },
-    }]
-  ]
+    ],
+  ],
 };
 ```
 
 ### Plugin Options
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `output` | `string` | `'tasty.css'` | Path for generated CSS file |
-| `mode` | `'file' \| 'inject'` | `'file'` | `'file'` writes CSS to disk; `'inject'` embeds CSS inline in JS (see [Inject Mode](#inject-mode)) |
-| `configFile` | `string` | — | Absolute path to a TS/JS module that default-exports a `TastyZeroConfig` object. JSON-serializable alternative to `config` — required for Turbopack. |
-| `config` | `TastyZeroConfig \| () => TastyZeroConfig` | `{}` | Inline config object or factory function. Takes precedence over `configFile`. |
-| `configDeps` | `string[]` | `[]` | Absolute file paths that affect config (for cache invalidation) |
-| `config.states` | `Record<string, string>` | `{}` | Predefined state aliases |
-| `config.devMode` | `boolean` | `false` | Add source comments to CSS |
-| `config.recipes` | `Record<string, RecipeStyles>` | `{}` | Predefined style recipes |
-| `config.fontFace` | `Record<string, FontFaceInput>` | — | Global `@font-face` definitions |
-| `config.counterStyle` | `Record<string, CounterStyleDescriptors>` | — | Global `@counter-style` definitions |
+| Option                     | Type                                             | Default       | Description                                                                                                                                                                                      |
+| -------------------------- | ------------------------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `output`                   | `string`                                         | `'tasty.css'` | Path for generated CSS file                                                                                                                                                                      |
+| `mode`                     | `'file' \| 'inject'`                             | `'file'`      | `'file'` writes CSS to disk; `'inject'` embeds CSS inline in JS (see [Inject Mode](#inject-mode))                                                                                                |
+| `configFile`               | `string`                                         | —             | Absolute path to a TS/JS module that default-exports a `TastyZeroConfig` object. JSON-serializable alternative to `config` — required for Turbopack.                                             |
+| `config`                   | `TastyZeroConfig \| () => TastyZeroConfig`       | `{}`          | Inline config object or factory function. Takes precedence over `configFile`.                                                                                                                    |
+| `configDeps`               | `string[]`                                       | `[]`          | Absolute file paths that affect config (for cache invalidation)                                                                                                                                  |
+| `injectImport`             | `boolean`                                        | `true`        | Replace `@tenphi/tasty/static` imports with an import of the generated CSS file. Set to `false` to manage CSS imports manually.                                                                  |
+| `config.states`            | `Record<string, string>`                         | `{}`          | Predefined state aliases (e.g. `{ '@mobile': '@media(w < 768px)' }`)                                                                                                                             |
+| `config.devMode`           | `boolean`                                        | `false`       | Add source comments to CSS                                                                                                                                                                       |
+| `config.tokens`            | `ConfigTokens`                                   | —             | Design tokens injected as CSS custom properties on `:root`. Values are parsed through the Tasty DSL. Supports state maps for responsive/themed tokens.                                           |
+| `config.replaceTokens`     | `Record<string, string \| number>`               | —             | Parse-time token substitution. Keys use `$name` for custom properties and `#name` for color tokens.                                                                                              |
+| `config.recipes`           | `Record<string, RecipeStyles>`                   | `{}`          | Predefined style recipes                                                                                                                                                                         |
+| `config.keyframes`         | `Record<string, KeyframesSteps>`                 | —             | Global `@keyframes` definitions available to all `tastyStatic` calls                                                                                                                             |
+| `config.fontFaces`         | `Record<string, FontFaceInput>`                  | —             | Global `@font-face` definitions                                                                                                                                                                  |
+| `config.counterStyles`     | `Record<string, CounterStyleDescriptors>`        | —             | Global `@counter-style` definitions                                                                                                                                                              |
+| `config.units`             | `Record<string, string \| UnitHandler>`          | —             | Custom units for the style parser (merged with built-ins). E.g. `{ em: 'em', vw: 'vw' }`                                                                                                         |
+| `config.functions`         | `Record<string, FunctionDefinition \| Function>` | —             | Custom functions (merged). Bare keys → parse functions; `$$name` keys → declarative CSS `@function` definitions                                                                                  |
+| `config.polyfills`         | `{ functions?: boolean }`                        | `{}`          | Opt-in polyfills. `functions: true` inlines `@function` calls into plain CSS at build time                                                                                                       |
+| `config.plugins`           | `TastyPlugin[]`                                  | —             | Plugins that extend tasty with custom functions, units, states, and handlers                                                                                                                     |
+| `config.handlers`          | `Record<string, StyleHandlerDefinition>`         | —             | Custom style handlers that transform style properties into CSS declarations                                                                                                                      |
+| `config.presets`           | `Record<string, TypographyPreset>`               | —             | Typography presets — shorthand for `generateTypographyTokens()`. Generated tokens merge under explicit `tokens`.                                                                                 |
+| `config.globalStyles`      | `Record<string, Styles>`                         | —             | Global Tasty styles keyed by CSS selector. Supports the full style syntax.                                                                                                                       |
+| `config.autoPropertyTypes` | `boolean`                                        | `true`        | Automatically infer and register CSS `@property` declarations from values                                                                                                                        |
+| `config.parserCacheSize`   | `number`                                         | `1000`        | Parser LRU cache size. Larger values improve performance for builds with many unique style values                                                                                                |
+| `config.namePrefix`        | `string`                                         | `'ts'`        | Prefix prepended to every generated identifier. Defaults to `'ts'` so static classes never collide with runtime (`'t'`) classes. See [Configuration: Name prefix](configuration.md#name-prefix). |
+
+### Coexisting with `tasty()`
+
+When a page mixes `tastyStatic` with `tasty`, both must use **different** `namePrefix` values. The defaults handle this automatically (`'t'` for React rendering, `'ts'` for build-time extraction). If you customize one, customize the other:
+
+```ts
+// tasty-zero.config.ts (Babel plugin)
+export default { namePrefix: 'mbs' };
+```
+
+```ts
+// app entry (`tasty()` configure)
+configure({ namePrefix: 'mb' });
+```
 
 ---
 
@@ -177,16 +213,24 @@ Recipes work with `tastyStatic` the same way as with runtime `tasty`:
 // babel.config.js
 module.exports = {
   plugins: [
-    ['@tenphi/tasty/babel-plugin', {
-      output: 'public/tasty.css',
-      config: {
-        recipes: {
-          card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
-          elevated: { shadow: '2x 2x 4x #shadow' },
+    [
+      '@tenphi/tasty/babel-plugin',
+      {
+        output: 'public/tasty.css',
+        config: {
+          recipes: {
+            card: {
+              padding: '4x',
+              fill: '#surface',
+              radius: '1r',
+              border: true,
+            },
+            elevated: { shadow: '2x 2x 4x #shadow' },
+          },
         },
       },
-    }]
-  ]
+    ],
+  ],
 };
 ```
 
@@ -198,7 +242,7 @@ const card = tastyStatic({
   color: '#text',
 });
 
-<div className={card}>Styled card</div>
+<div className={card}>Styled card</div>;
 ```
 
 ---
@@ -209,7 +253,7 @@ The `withTastyZero` wrapper configures both **webpack** and **Turbopack** automa
 
 ```typescript
 // next.config.ts
-import { withTastyZero } from '@tenphi/tasty/next';
+import { withTastyZero } from '@tenphi/tasty/zero/next';
 
 export default withTastyZero({
   output: 'public/tasty.css',
@@ -222,14 +266,14 @@ export default withTastyZero({
 
 ### `withTastyZero` Options
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `output` | `string` | `'public/tasty.css'` | Output path for CSS relative to project root |
-| `mode` | `'file' \| 'inject'` | `'file'` | `'file'` writes CSS to disk; `'inject'` embeds CSS inline in JS |
-| `enabled` | `boolean` | `true` | Enable/disable the plugin |
-| `configFile` | `string` | — | Path to a TS/JS module that default-exports `TastyZeroConfig`. Recommended for Turbopack compatibility. |
-| `config` | `TastyZeroConfig` | — | Inline config object. For static configs that don't change during dev. |
-| `configDeps` | `string[]` | `[]` | Extra files the config depends on (for cache invalidation) |
+| Option       | Type                 | Default              | Description                                                                                             |
+| ------------ | -------------------- | -------------------- | ------------------------------------------------------------------------------------------------------- |
+| `output`     | `string`             | `'public/tasty.css'` | Output path for CSS relative to project root                                                            |
+| `mode`       | `'file' \| 'inject'` | `'file'`             | `'file'` writes CSS to disk; `'inject'` embeds CSS inline in JS                                         |
+| `enabled`    | `boolean`            | `true`               | Enable/disable the plugin                                                                               |
+| `configFile` | `string`             | —                    | Path to a TS/JS module that default-exports `TastyZeroConfig`. Recommended for Turbopack compatibility. |
+| `config`     | `TastyZeroConfig`    | —                    | Inline config object. For static configs that don't change during dev.                                  |
+| `configDeps` | `string[]`           | `[]`                 | Extra files the config depends on (for cache invalidation)                                              |
 
 ### Turbopack Support
 
@@ -267,12 +311,15 @@ export default defineConfig({
     react({
       babel: {
         plugins: [
-          ['@tenphi/tasty/babel-plugin', {
-            output: 'public/tasty.css',
-            config: {
-              states: { '@mobile': '@media(w < 768px)' },
+          [
+            '@tenphi/tasty/babel-plugin',
+            {
+              output: 'public/tasty.css',
+              config: {
+                states: { '@mobile': '@media(w < 768px)' },
+              },
             },
-          }],
+          ],
         ],
       },
     }),
@@ -306,7 +353,9 @@ export const Button = () => <button className={button}>Click</button>;
 const button = {
   className: 'ts3f2a1b ts8c4d2e',
   styles: { padding: '2x 4x', fill: '#purple', color: '#white' },
-  toString() { return this.className; }
+  toString() {
+    return this.className;
+  },
 };
 
 export const Button = () => <button className={button}>Click</button>;
@@ -354,13 +403,16 @@ This is ideal for **reusable components**, **extensions**, and **libraries** whe
 // babel.config.js
 module.exports = {
   plugins: [
-    ['@tenphi/tasty/babel-plugin', {
-      mode: 'inject',
-      config: {
-        states: { '@mobile': '@media(w < 768px)' },
+    [
+      '@tenphi/tasty/babel-plugin',
+      {
+        mode: 'inject',
+        config: {
+          states: { '@mobile': '@media(w < 768px)' },
+        },
       },
-    }]
-  ]
+    ],
+  ],
 };
 ```
 
@@ -368,7 +420,7 @@ With Next.js:
 
 ```typescript
 // next.config.ts
-import { withTastyZero } from '@tenphi/tasty/next';
+import { withTastyZero } from '@tenphi/tasty/zero/next';
 
 export default withTastyZero({
   mode: 'inject',
@@ -400,13 +452,20 @@ tastyStatic('.heading', { preset: 'h1' });
 ```tsx
 import { injectCSS as _$i } from '@tenphi/tasty/static/inject';
 
-const button = (_$i("ts3f2a1b ts8c4d2e", ".ts3f2a1b.ts3f2a1b{padding:16px 32px}\n.ts8c4d2e.ts8c4d2e{background:#9370db}"), {
-  className: 'ts3f2a1b ts8c4d2e',
-  styles: { padding: '2x 4x', fill: '#purple' },
-  toString() { return this.className; }
-});
-
-_$i(".heading", ".heading{font-size:2.5rem;font-weight:700;line-height:1.2}");
+const button =
+  (_$i(
+    'ts3f2a1b ts8c4d2e',
+    '.ts3f2a1b.ts3f2a1b{padding:16px 32px}\n.ts8c4d2e.ts8c4d2e{background:#9370db}',
+  ),
+  {
+    className: 'ts3f2a1b ts8c4d2e',
+    styles: { padding: '2x 4x', fill: '#purple' },
+    toString() {
+      return this.className;
+    },
+  });
+
+_$i('.heading', '.heading{font-size:2.5rem;font-weight:700;line-height:1.2}');
 ```
 
 ### Dev Mode / HMR
@@ -415,7 +474,7 @@ Class names are content-hashed (`ts` + MD5). When styles change, a new hash prod
 
 ### Limitations (inject mode)
 
-- **Client-side only** — Styles are injected via the DOM, so they are not available during SSR. For server-rendered apps, use `mode: 'file'` or the runtime `tasty()`.
+- **Client-side only** — Styles are injected via the DOM, so they are not available during SSR. For server-rendered apps, use `mode: 'file'` or React `tasty()`.
 - **Larger JS bundle** — CSS is embedded in JavaScript, increasing bundle size. Best suited for components and extensions, not full-app styling.
 
 ---
@@ -484,13 +543,15 @@ For dynamic styling needs, combine with regular CSS or CSS variables:
 ```tsx
 const card = tastyStatic({
   padding: '4x',
-  fill: 'var(--card-bg, #white)',
+  fill: '($card-bg, #white)',
 });
 
 <div
   className={card}
-  style={{ '--card-bg': isActive ? '#purple' : '#white' }}
-/>
+  style={{
+    '--card-bg': isActive ? 'var(--purple-color)' : 'var(--white-color)',
+  }}
+/>;
 ```
 
 ---
@@ -507,14 +568,15 @@ const card = tastyStatic({
 ## Common Issues
 
 - No CSS file is generated: make sure the Babel plugin actually runs for files importing `@tenphi/tasty/static`, and verify the `output` path is writable.
-- Styles stay dynamic by mistake: `tastyStatic()` only supports build-time-known values. Move runtime values to CSS variables or switch that component to runtime `tasty()`.
+- Styles stay dynamic by mistake: `tastyStatic()` only supports build-time-known values. Move dynamic values to CSS variables or switch that component to React `tasty()`.
 - Turbopack config behaves inconsistently: prefer `configFile` over inline functions so the setup stays JSON-serializable.
 
 ---
 
 ## Related
 
-- [Docs Hub](README.md) — Choose the right guide by task or rendering mode
+- [Docs Hub](README.md) — Choose the right guide by task or CSS delivery model
 - [Style DSL](dsl.md) — State maps, tokens, units, extending semantics (shared by runtime and static)
-- [Runtime API](runtime.md) — Runtime styling: `tasty()` factory, component props, variants, sub-elements, hooks
+- [React API](react-api.md) — Client or server rendering with `tasty()`: component props, variants, sub-elements, and style functions
 - [Configuration](configuration.md) — Global configuration: tokens, recipes, custom units, and style handlers
+- [Plugins & Extension Points](plugins.md) — Which extension points work at build time (`functions`, `units`, `states`, `handlers`, `recipes`) and which do not (`propHandlers` — `tastyStatic()` takes styles objects, not props)