@tenphi/tasty 0.0.0-snapshot.d2dcdeb → 0.0.0-snapshot.d4ccea8

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,61 +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) |
-| `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.fontFace` | `Record<string, FontFaceInput>` | — | Global `@font-face` definitions |
-| `config.counterStyle` | `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.funcs` | `Record<string, Function>` | — | Custom functions for the style parser (merged with existing) |
-| `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 |
+| 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' });
+```
 
 ---
 
@@ -189,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' },
+          },
         },
       },
-    }]
-  ]
+    ],
+  ],
 };
 ```
 
@@ -210,7 +242,7 @@ const card = tastyStatic({
   color: '#text',
 });
 
-<div className={card}>Styled card</div>
+<div className={card}>Styled card</div>;
 ```
 
 ---
@@ -221,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',
@@ -234,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
 
@@ -279,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)' },
+              },
             },
-          }],
+          ],
         ],
       },
     }),
@@ -318,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>;
@@ -366,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)' },
+        },
       },
-    }]
-  ]
+    ],
+  ],
 };
 ```
 
@@ -380,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',
@@ -412,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
@@ -427,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.
 
 ---
@@ -496,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)',
+  }}
+/>;
 ```
 
 ---
@@ -519,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)
-- [React API](react-api.md) — Runtime styling: `tasty()` factory, component props, variants, sub-elements, style functions
+- [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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "0.0.0-snapshot.d2dcdeb",
+  "version": "0.0.0-snapshot.d4ccea8",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",
@@ -32,7 +32,7 @@
       "import": "./dist/zero/index.js",
       "default": "./dist/zero/index.js"
     },
-    "./next": {
+    "./zero/next": {
       "types": "./dist/zero/next.d.ts",
       "import": "./dist/zero/next.js",
       "default": "./dist/zero/next.js"
@@ -62,6 +62,16 @@
       "import": "./dist/ssr/astro-client.js",
       "default": "./dist/ssr/astro-client.js"
     },
+    "./ssr/astro-middleware": {
+      "types": "./dist/ssr/astro-middleware.d.ts",
+      "import": "./dist/ssr/astro-middleware.js",
+      "default": "./dist/ssr/astro-middleware.js"
+    },
+    "./ssr/astro-middleware-static": {
+      "types": "./dist/ssr/astro-middleware-static.d.ts",
+      "import": "./dist/ssr/astro-middleware-static.js",
+      "default": "./dist/ssr/astro-middleware-static.js"
+    },
     "./tasty.config": "./tasty.config.ts"
   },
   "files": [
@@ -73,7 +83,9 @@
     "./dist/ssr/index.js",
     "./dist/ssr/next.js",
     "./dist/ssr/astro.js",
-    "./dist/ssr/astro-client.js"
+    "./dist/ssr/astro-client.js",
+    "./dist/ssr/astro-middleware.js",
+    "./dist/ssr/astro-middleware-static.js"
   ],
   "engines": {
     "node": ">=20"
@@ -81,6 +93,9 @@
   "scripts": {
     "build": "tsdown",
     "test": "vitest run",
+    "test:node": "vitest run --project node",
+    "test:browser": "vitest run --project browser",
+    "test:setup": "playwright install chromium",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "typecheck": "tsc --noEmit",
@@ -89,11 +104,17 @@
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
     "size": "size-limit",
-    "bench": "vitest bench",
+    "bench": "vitest bench --project node",
+    "bench:browser": "vitest bench --project browser",
+    "bench:overhead": "vitest bench --config vitest.production-browser-bench.config.ts src/tasty-overhead.bench.tsx",
+    "bench:injection": "vitest bench --config vitest.production-browser-bench.config.ts src/tasty-injection.bench.ts",
+    "bench:tree": "vitest bench --config vitest.production-browser-bench.config.ts src/tasty-tree.bench.tsx",
     "prepublishOnly": "pnpm run build",
     "changeset": "changeset",
     "version": "changeset version",
     "release": "changeset publish",
+    "knip": "knip",
+    "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"
   },
@@ -123,6 +144,7 @@
     "@babel/helper-plugin-utils": "^7.24.0",
     "@babel/types": "^7.24.0",
     "jiti": "^2.6.1",
+    "next": ">=14.0.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
@@ -140,6 +162,9 @@
     },
     "jiti": {
       "optional": true
+    },
+    "next": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -147,53 +172,56 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@changesets/changelog-github": "^0.6.0",
+    "@babel/helper-plugin-utils": "^7.24.0",
+    "@babel/types": "^7.24.0",
+    "@changesets/changelog-github": "^0.7.0",
     "@changesets/cli": "^2.29.8",
     "@eslint/js": "^10.0.1",
     "@size-limit/esbuild": "^12.0.0",
     "@size-limit/file": "^12.0.0",
+    "@tenphi/eslint-plugin-tasty": "^0.11.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-plugin-utils": "^7.10.3",
     "@types/node": "^25.3.2",
     "@types/react": "^19.0.0",
-    "@vitest/runner": "^4.0.18",
+    "@types/react-dom": "^19.0.0",
+    "@vitest/browser-playwright": "^4.1.10",
     "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
-    "jsdom": "^29.0.1",
+    "jiti": "^2.6.1",
+    "knip": "^5.61.3",
+    "next": "^16.0.0",
+    "playwright": "^1.62.1",
     "prettier": "^3.8.1",
     "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "size-limit": "^12.0.0",
-    "tsdown": "^0.21.7",
-    "typescript": "^5.9.3",
+    "tsdown": "^0.22.0",
+    "typescript": "^6.0.2",
     "typescript-eslint": "^8.56.0",
-    "vitest": "^4.0.18"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "esbuild"
-    ]
+    "vitest": "^4.1.10"
   },
-  "packageManager": "pnpm@10.32.1",
+  "packageManager": "pnpm@11.24.0",
   "size-limit": [
     {
       "name": "main (import *)",
       "path": "dist/index.js",
       "import": "*",
-      "limit": "49 kB"
+      "limit": "56.6 kB"
     },
     {
       "name": "core (import *)",
       "path": "dist/core/index.js",
       "import": "*",
-      "limit": "46 kB"
+      "limit": "53.65 kB"
     },
     {
       "name": "static",
       "path": "dist/static/index.js",
       "import": "*",
-      "limit": "2 kB"
+      "limit": "16.8 kB"
     },
     {
       "name": "zero",
@@ -204,7 +232,7 @@
         "path",
         "crypto"
       ],
-      "limit": "28.5 kB"
+      "limit": "31.25 kB"
     },
     {
       "name": "babel-plugin",
@@ -215,7 +243,7 @@
         "path",
         "crypto"
       ],
-      "limit": "42 kB"
+      "limit": "49.35 kB"
     }
   ]
 }

package/tasty.config.ts

@@ -3,6 +3,7 @@ export default {
     '#white',
     '#black',
     '#current',
+    '#clear',
     '$gap',
     '$radius',
     '$border-width',
@@ -11,4 +12,9 @@ export default {
     '$sharp-radius',
     '$bold-font-weight',
   ],
+  styles: ['viewTransitionName'],
+  // This repo imports its own API relatively, so the plugin's default
+  // `@tenphi/tasty` import tracking never matches. List the local entry points so
+  // `tasty({ styles })` call sites are actually linted.
+  importSources: ['@tenphi/tasty', './tasty', '../tasty', './src/tasty'],
 };

package/dist/_virtual/_rolldown/runtime.js

@@ -1,7 +0,0 @@
-//#region \0rolldown/runtime.js
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
-	if (typeof require !== "undefined") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-});
-//#endregion
-export { __require };

package/dist/chunks/cacheKey.d.ts

@@ -1 +0,0 @@
-export { };