@tenphi/tasty 0.0.0-snapshot.fa94a5a → 0.0.0-snapshot.fdb16ea

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,48 +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 |
-| `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' });
+```
 
 ---
 
@@ -176,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' },
+          },
         },
       },
-    }]
-  ]
+    ],
+  ],
 };
 ```
 
@@ -197,7 +242,7 @@ const card = tastyStatic({
   color: '#text',
 });
 
-<div className={card}>Styled card</div>
+<div className={card}>Styled card</div>;
 ```
 
 ---
@@ -208,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',
@@ -221,13 +266,14 @@ export default withTastyZero({
 
 ### `withTastyZero` Options
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `output` | `string` | `'public/tasty.css'` | Output path for CSS relative to project root |
-| `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
 
@@ -265,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)' },
+              },
             },
-          }],
+          ],
         ],
       },
     }),
@@ -304,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>;
@@ -333,6 +384,101 @@ export const Button = () => <button className={button}>Click</button>;
 
 ---
 
+## Inject Mode
+
+By default the Babel plugin writes CSS to a file (`mode: 'file'`). **Inject mode** (`mode: 'inject'`) embeds CSS inline in your JavaScript and injects it at runtime via a tiny injector. No CSS file is produced.
+
+This is ideal for **reusable components**, **extensions**, and **libraries** where consumers shouldn't need to manage an external CSS file.
+
+### How It Works
+
+1. The Babel plugin extracts CSS at build time (same pipeline as file mode).
+2. Instead of writing to a `.css` file, the CSS is embedded as string literals in the JS output.
+3. The `@tenphi/tasty/static` import is rewritten to `@tenphi/tasty/static/inject`.
+4. Each `tastyStatic` call becomes a self-contained expression that injects its CSS and evaluates to a `StaticStyle` object.
+
+### Configuration
+
+```javascript
+// babel.config.js
+module.exports = {
+  plugins: [
+    [
+      '@tenphi/tasty/babel-plugin',
+      {
+        mode: 'inject',
+        config: {
+          states: { '@mobile': '@media(w < 768px)' },
+        },
+      },
+    ],
+  ],
+};
+```
+
+With Next.js:
+
+```typescript
+// next.config.ts
+import { withTastyZero } from '@tenphi/tasty/zero/next';
+
+export default withTastyZero({
+  mode: 'inject',
+  configFile: './app/tasty-zero.config.ts',
+})({
+  reactStrictMode: true,
+});
+```
+
+When `mode` is `'inject'`, the `output` and `injectImport` options are ignored.
+
+### Build Transformation (inject mode)
+
+**Before:**
+
+```tsx
+import { tastyStatic } from '@tenphi/tasty/static';
+
+const button = tastyStatic({
+  padding: '2x 4x',
+  fill: '#purple',
+});
+
+tastyStatic('.heading', { preset: 'h1' });
+```
+
+**After:**
+
+```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}');
+```
+
+### Dev Mode / HMR
+
+Class names are content-hashed (`ts` + MD5). When styles change, a new hash produces a new `_$i` call that injects fresh CSS. The injector deduplicates by id, so unchanged styles are skipped. Old CSS stays in the DOM but is harmless since no elements reference those class names.
+
+### 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 React `tasty()`.
+- **Larger JS bundle** — CSS is embedded in JavaScript, increasing bundle size. Best suited for components and extensions, not full-app styling.
+
+---
+
 ## Style Extension
 
 ```tsx
@@ -397,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)',
+  }}
+/>;
 ```
 
 ---
@@ -420,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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "0.0.0-snapshot.fa94a5a",
+  "version": "0.0.0-snapshot.fdb16ea",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,6 +17,11 @@
       "import": "./dist/static/index.js",
       "default": "./dist/static/index.js"
     },
+    "./static/inject": {
+      "types": "./dist/static/inject.d.ts",
+      "import": "./dist/static/inject.js",
+      "default": "./dist/static/inject.js"
+    },
     "./babel-plugin": {
       "types": "./dist/zero/babel.d.ts",
       "import": "./dist/zero/babel.js",
@@ -27,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"
@@ -52,6 +57,21 @@
       "import": "./dist/ssr/astro.js",
       "default": "./dist/ssr/astro.js"
     },
+    "./ssr/astro-client": {
+      "types": "./dist/ssr/astro-client.d.ts",
+      "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": [
@@ -62,7 +82,10 @@
   "sideEffects": [
     "./dist/ssr/index.js",
     "./dist/ssr/next.js",
-    "./dist/ssr/astro.js"
+    "./dist/ssr/astro.js",
+    "./dist/ssr/astro-client.js",
+    "./dist/ssr/astro-middleware.js",
+    "./dist/ssr/astro-middleware-static.js"
   ],
   "engines": {
     "node": ">=20"
@@ -70,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",
@@ -78,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"
   },
@@ -112,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": {
@@ -129,6 +162,9 @@
     },
     "jiti": {
       "optional": true
+    },
+    "next": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -136,53 +172,56 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@changesets/changelog-github": "^0.5.2",
+    "@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": "^28.1.0",
+    "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.20.3",
-    "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": "47 kB"
+      "limit": "56.6 kB"
     },
     {
       "name": "core (import *)",
       "path": "dist/core/index.js",
       "import": "*",
-      "limit": "45 kB"
+      "limit": "53.65 kB"
     },
     {
       "name": "static",
       "path": "dist/static/index.js",
       "import": "*",
-      "limit": "2 kB"
+      "limit": "16.8 kB"
     },
     {
       "name": "zero",
@@ -193,7 +232,7 @@
         "path",
         "crypto"
       ],
-      "limit": "28 kB"
+      "limit": "31.25 kB"
     },
     {
       "name": "babel-plugin",
@@ -204,7 +243,7 @@
         "path",
         "crypto"
       ],
-      "limit": "40 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,8 +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 };