@cube-dev/ui-kit 0.172.0 → 0.173.0

package/dist/tokens/typography.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/tokens/typography.ts
 /**
 * Typography presets for headings, text, and special styles.

package/dist/utils/ResizeSensor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/ResizeSensor.ts
 /**
 * Iterate over each of the provided element(s).

package/dist/utils/is-dev-env.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 function isDevEnv() {
 	if (typeof window !== "undefined" && window.localStorage) try {

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/disabledProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/react/disabledProps.ts
 /**
 * Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useScheme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 
 //#region src/utils/react/useScheme.ts

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.172.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.172.0";
-const TASTY_VERSION = "3.3.1";
+const VERSION = "0.173.0";
+const TASTY_VERSION = "3.5.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/tasty/README.md

@@ -1,25 +1,29 @@
 # Tasty Docs
 
-Tasty is a styling engine for design systems that turns component state into deterministic CSS by compiling state maps into mutually exclusive selectors. Use this hub to choose the right guide once you know whether you are evaluating the model, adopting it in a design system, or implementing reusable, stateful components day to day.
+Tasty is CSS-in-JS for React design systems. You describe hover, disabled, variants, themes, responsive behavior, and other conditions as state maps; Tasty compiles them so one branch wins without specificity fights or source-order surprises.
+
+Use this hub to move from the core idea to a working component, then into design-system patterns or API reference as needed.
 
 ## Start Here
 
-- **New to Tasty**: [Getting Started](getting-started.md) for installation, the first component, optional shared `configure()`, ESLint, editor tooling, and rendering mode selection.
-- **Learning the component model**: [Methodology](methodology.md) for root + sub-elements, `styleProps`, tokens, extension, and recommended boundaries between `styles`, `style`, and wrappers.
-- **Evaluating the selector model**: [Style rendering pipeline](pipeline.md) for how mutually exclusive selectors make stateful styling deterministic.
-- **Evaluating fit**: [Comparison](comparison.md) for tool-selection context, then [Adoption Guide](adoption.md) for audience fit and rollout strategy inside a design system.
+- **Understand why**: [Introduction](../README.md) for the problem, the state-map model, and the product overview.
+- **Try it**: [Getting Started](getting-started.md) to build a stateful component, add shared configuration, and choose a rendering mode.
+- **Build a component system**: [Methodology](methodology.md) for root + sub-elements, typed public APIs, tokens, and extension patterns; then [Building a Design System](design-system.md).
+- **Evaluate or adopt it**: [Comparison](comparison.md) for tool-selection context and [Adoption Guide](adoption.md) for an incremental rollout.
+- **Understand the compiler**: [Style rendering pipeline](pipeline.md) for how state maps become mutually exclusive selectors.
 
 ## By Role
 
 - **Application developer using an existing design system**: [Getting Started](getting-started.md), then [React API](react-api.md).
 - **Design-system author**: [Methodology](methodology.md), [Building a Design System](design-system.md), [Configuration](configuration.md), and [Adoption Guide](adoption.md).
-- **Platform or tooling engineer**: [Configuration](configuration.md), [Zero Runtime (tastyStatic)](tasty-static.md), [Server-Side Rendering](ssr.md), and [Debug Utilities](debug.md).
+- **Platform or tooling engineer**: [Configuration](configuration.md), [Build-Time Extraction (`tastyStatic`)](tasty-static.md), [Server-Side Rendering](ssr.md), and [Debug Utilities](debug.md).
 
 ## By Styling Approach
 
 - **React components**: [React API](react-api.md)
-- **Zero-runtime / build-time extraction**: [Zero Runtime (tastyStatic)](tasty-static.md)
-- **Runtime `tasty()` with server collection and hydration**: [Server-Side Rendering](ssr.md)
+- **Zero-client-runtime React with `tasty()`**: [Server-Side Rendering](ssr.md), especially the static Astro integration
+- **Build-time extraction with `tastyStatic()`**: [Build-Time Extraction](tasty-static.md)
+- **Hydrated `tasty()` with server collection**: [Server-Side Rendering](ssr.md)
 - **Upgrading from v2**: [Migration Guide (v2 → v3)](migration-v3.md)
 
 ## By Task
@@ -32,3 +36,4 @@ Tasty is a styling engine for design systems that turns component state into det
 - **Debug generated CSS or cache behavior**: [Debug Utilities](debug.md)
 - **Understand how selector generation works internally**: [Style rendering pipeline](pipeline.md)
 - **Understand runtime injection internals**: [Style Injector](injector.md)
+- **Reproduce and interpret performance measurements**: [Runtime Benchmarks](runtime-benchmarks.md)

package/docs/tasty/adoption.md

@@ -1,8 +1,10 @@
 # Adoption Guide
 
-Tasty is not a drop-in replacement for another styling library. It is a **substrate for building a design-system-defined styling language**: what the comparison guide calls a house styling language. That means adoption usually starts where styling for reusable, stateful components has already become a composition problem, not with an all-at-once rewrite.
+Tasty is most useful where reusable component styling has become a state-resolution problem: hover intersects with disabled, variants intersect with themes, and every extension makes selector behavior harder to predict.
 
-This guide is for design-system maintainers and platform engineers evaluating Tasty or introducing it into an existing codebase. Use this document for rollout strategy and adoption sequencing; use the [Comparison guide](comparison.md) when the open question is whether Tasty is the right tool in the first place.
+It normally sits underneath a design system’s existing components. You can preserve their public React APIs while moving their style logic into state maps that produce one declared winner. Adoption should start with a small, state-heavy component—not an all-at-once rewrite.
+
+This guide is for design-system maintainers and platform engineers evaluating Tasty or introducing it into an existing codebase. Use it for rollout strategy and adoption sequencing; use the [Comparison guide](comparison.md) when the open question is whether Tasty is the right tool.
 
 ---
 
@@ -18,12 +20,14 @@ Product code
 ```
 
 **What Tasty owns:**
+
 - The DSL and value parser (tokens, custom units, auto-calc, color opacity)
 - State compilation (mutually exclusive selectors from state maps)
 - Style injection and deduplication (runtime or build-time)
 - The `tasty()` component factory and hooks API
 
 **What the DS team owns:**
+
 - Token names and values (colors, spacing, typography)
 - Custom units and their semantics
 - State aliases (`@mobile`, `@dark`, `@compact`)
@@ -39,12 +43,14 @@ Two teams using Tasty can end up with very different authoring models. That is b
 ## Who should adopt Tasty
 
 **Strong fit:**
-- A design-system or platform team that wants to define a governed styling language
+
+- A design-system or platform team that owns shared component APIs
 - Components with complex, intersecting states (hover + disabled + theme + breakpoint)
 - Teams that need deterministic style resolution without cascade/specificity bugs
-- Organizations where styling decisions should be centralized, not distributed
+- Organizations that want tokens, states, and extension rules to stay consistent across products
 
 **Not the right fit:**
+
 - Solo developers building a one-off app with minimal UI structure
 - Teams that want a shared utility vocabulary and direct markup authoring (Tailwind is better here)
 - Projects where low ceremony matters more than central governance
@@ -58,16 +64,16 @@ For a detailed comparison with Tailwind, Panda CSS, vanilla-extract, StyleX, Sti
 
 Tasty provides the engine. The DS team defines the language that runs on it. Here is what that typically involves:
 
-| Layer | What you define | Where |
-|-------|----------------|-------|
-| **Tokens** | Color names, spacing scale, border widths, radii | `configure({ tokens })` |
-| **Units** | Custom multiplier units (`x`, `r`, `bw`, or your own) | `configure({ units })` |
-| **State aliases** | Responsive breakpoints, theme modes, feature flags | `configure({ states })` |
-| **Recipes** | Reusable style bundles (card, elevated, input-reset) | `configure({ recipes })` |
-| **Typography** | Preset definitions (h1-h6, t1-t4, etc.) | `configure({ presets: { ... } })` |
-| **Style props** | Which CSS properties each component exposes as React props | `styleProps` in each component |
-| **Sub-elements** | Inner parts of compound components (Title, Icon, Content) | `elements` + capitalized keys in `styles` |
-| **Override rules** | How product engineers extend or constrain components | Styled wrappers via `tasty(Base, { ... })` |
+| Layer              | What you define                                            | Where                                      |
+| ------------------ | ---------------------------------------------------------- | ------------------------------------------ |
+| **Tokens**         | Color names, spacing scale, border widths, radii           | `configure({ tokens })`                    |
+| **Units**          | Custom multiplier units (`x`, `r`, `bw`, or your own)      | `configure({ units })`                     |
+| **State aliases**  | Responsive breakpoints, theme modes, feature flags         | `configure({ states })`                    |
+| **Recipes**        | Reusable style bundles (card, elevated, input-reset)       | `configure({ recipes })`                   |
+| **Typography**     | Preset definitions (h1-h6, t1-t4, etc.)                    | `configure({ presets: { ... } })`          |
+| **Style props**    | Which CSS properties each component exposes as React props | `styleProps` in each component             |
+| **Sub-elements**   | Inner parts of compound components (Title, Icon, Content)  | `elements` + capitalized keys in `styles`  |
+| **Override rules** | How product engineers extend or constrain components       | Styled wrappers via `tasty(Base, { ... })` |
 
 The same engine can power a minimal design system with a handful of tokens:
 
@@ -85,9 +91,15 @@ Here is how the layers connect end-to-end. The DS team configures the engine, de
 ```tsx
 // ds/config.ts — DS team defines the language
 configure({
-  tokens: { '#primary': 'oklch(55% 0.25 265)', '#surface': '#fff', '#text': '#111' },
+  tokens: {
+    '#primary': 'oklch(55% 0.25 265)',
+    '#surface': '#fff',
+    '#text': '#111',
+  },
   states: { '@mobile': '@media(w < 768px)', '@dark': '@root(schema=dark)' },
-  recipes: { card: { padding: '4x', fill: '#surface', radius: '1r', border: true } },
+  recipes: {
+    card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
+  },
 });
 
 // ds/components/Card.tsx — DS team builds components on top
@@ -105,7 +117,7 @@ const Card = tasty({
 <Card padding={{ '': '4x', '@mobile': '2x' }}>
   <Card.Title>Monthly Revenue</Card.Title>
   <Card.Body>$1.2M — up 12% from last month</Card.Body>
-</Card>
+</Card>;
 ```
 
 See [Configuration](configuration.md) for the full `configure()` API.
@@ -116,9 +128,21 @@ See [Configuration](configuration.md) for the full `configure()` API.
 
 You do not need to adopt everything at once. Tasty is designed to be introduced layer by layer.
 
-A practical way to start is with the components that already suffer from intersecting state and variant logic: buttons, inputs, menus, disclosures, dialogs, list items, interactive cards, and compound components. Those are the places where deterministic resolution pays off fastest.
+A practical first slice is one component that already suffers from intersecting state and variant logic: a button, input, menu item, disclosure, or interactive card. Keep its public API unchanged, move one or two properties into Tasty state maps, and verify that the declared priority matches the behavior your team expects.
+
+This proves the differentiator before you invest in a complete token vocabulary or migrate an entire component library.
+
+### Phase 1 -- Pilot one state-heavy component
+
+Choose a component with a known hover/disabled, focus/error, or variant/theme interaction. Preserve its external props and visual behavior. The pilot should answer three questions:
+
+1. Is the state map easier to review than the existing selectors or conditional class logic?
+2. Does extending the component keep the intended state priority?
+3. Can your current tokens and component API move over without product-code churn?
+
+If the answer is yes, establish the shared design-system vocabulary around the successful slice.
 
-### Phase 1 -- Tokens and units
+### Phase 2 -- Tokens and units
 
 Start by defining your design tokens and custom units. This is the lowest-risk step: it only configures the parser and does not require rewriting any components.
 
@@ -136,14 +160,14 @@ configure({
   // A DS typically redefines them to use CSS custom properties
   // so that the actual scale is controlled via CSS, not JS:
   units: {
-    x: 'var(--gap)',   // 2x → calc(var(--gap) * 2)
+    x: 'var(--gap)', // 2x → calc(var(--gap) * 2)
     r: 'var(--radius)',
     bw: 'var(--border-width)',
   },
 });
 ```
 
-### Phase 2 -- State aliases and recipes
+### Phase 3 -- State aliases and recipes
 
 Define the state vocabulary your components will share. This is where you start encoding your team's conventions.
 
@@ -152,7 +176,8 @@ configure({
   states: {
     '@mobile': '@media(w < 768px)',
     '@tablet': '@media(w < 1024px)',
-    '@dark': '@root(schema=dark) | (!@root(schema) & @media(prefers-color-scheme: dark))',
+    '@dark':
+      '@root(schema=dark) | (!@root(schema) & @media(prefers-color-scheme: dark))',
   },
   recipes: {
     card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
@@ -161,7 +186,7 @@ configure({
 });
 ```
 
-### Phase 3 -- Migrate a few primitives
+### Phase 4 -- Migrate a few primitives
 
 Pick 2-3 widely used primitives (Box, Text, Button) and rewrite them with `tasty()`. Keep the public API identical so product code does not need to change.
 
@@ -179,7 +204,7 @@ const Box = tasty({
 
 At this point you can validate the DSL, token workflow, and component authoring experience before expanding the rollout.
 
-### Phase 4 -- Encode complex states
+### Phase 5 -- Expand state resolution
 
 Move the components with the most painful intersecting states (buttons with hover + disabled + theme variants, inputs with focus + error + readonly) to Tasty's state map syntax. This is where mutually exclusive selectors start paying off.
 
@@ -209,7 +234,7 @@ const Button = tasty({
 });
 ```
 
-### Phase 5 -- Standardize style props and sub-elements
+### Phase 6 -- Standardize style props and sub-elements
 
 Define which style props each component category exposes. Layout components get flow/gap/padding. Interactive components get positioning. Compound components declare sub-elements.
 
@@ -225,9 +250,9 @@ const Card = tasty({
 });
 ```
 
-### Phase 6 -- Expand to full DS coverage
+### Phase 7 -- Expand to full DS coverage
 
-Migrate the remaining components, add the [ESLint plugin](https://github.com/tenphi/eslint-plugin-tasty) to enforce style conventions at lint time, and consider [zero-runtime mode](tasty-static.md) for static or performance-critical pages.
+Migrate the remaining components, add the [ESLint plugin](https://github.com/tenphi/eslint-plugin-tasty) to enforce style conventions at lint time, and choose between [server-only `tasty()`](ssr.md) and [`tastyStatic()` build-time extraction](tasty-static.md) when a page should ship no Tasty styling runtime.
 
 ---
 
@@ -254,8 +279,8 @@ const DangerButton = tasty(Button, {
 const LoadingButton = tasty(Button, {
   styles: {
     fill: {
-      loading: '#yellow',       // new state appended
-      disabled: '#gray.20',     // existing state overridden in place
+      loading: '#yellow', // new state appended
+      disabled: '#gray.20', // existing state overridden in place
     },
   },
 });
@@ -270,7 +295,7 @@ const LoadingButton = tasty(Button, {
 </Space>
 ```
 
-**Components are server components by default.** All `tasty()` components and style functions are hook-free, so they work as React Server Components without `'use client'`. In server-only contexts (Next.js RSC, Astro without `client:*` directives), they produce zero client JavaScript. Product engineers only add `'use client'` when their component needs actual React interactivity (state, effects, event handlers), never because of styling.
+**Components are server components by default.** All `tasty()` components and style functions are hook-free, so they work as React Server Components without `'use client'`. In server-only contexts they ship no Tasty styling runtime. Astro without `client:*` directives ships no client JavaScript; server-only Next.js RSC follows the same Tasty architecture, while final output depends on the application deployment. Product engineers only add `'use client'` when their component needs actual React interactivity (state, effects, event handlers), never because of styling.
 
 **No cascade/specificity concerns.** Tasty's mutually exclusive selectors mean extending a component cannot accidentally break another. Import order, class name collisions, and specificity arithmetic are non-issues.
 
@@ -295,4 +320,4 @@ const LoadingButton = tasty(Button, {
 - [Configuration](configuration.md) -- tokens, recipes, custom units, style handlers, and TypeScript extensions
 - [Style Properties](styles.md) -- complete reference for all enhanced style properties
 - [Comparison](comparison.md) -- positioning and trade-offs vs. other styling systems
-- [Zero Runtime (tastyStatic)](tasty-static.md) -- build-time static styling with Babel plugin
+- [Build-Time Extraction (`tastyStatic`)](tasty-static.md) -- static styling with the Babel plugin