@cube-dev/ui-kit 0.0.0-canary-bca8d09 → 0.0.0-canary-ec0a7f1

package/docs/components/content/InlineInput.md

@@ -0,0 +1,277 @@
+# InlineInput
+
+Inline editable text. Displays a value as inline content and swaps to an auto-sizing text input when entering edit mode. Designed to drop into any text context (tab title, heading, paragraph, table cell) without style customization — typography, color, and font family all inherit from the parent.
+
+Unlike `TextInput`, `InlineInput` is intentionally **not** a form field. It manages its own commit lifecycle (`onSubmit` / `onCancel`) rather than participating in form validation.
+
+## When to Use
+
+- **Renameable items**: Tab titles, file names, board columns, list items
+- **Edit-in-place fields**: Inline document titles, profile names, project labels
+- **Lightweight string edits**: Cases where launching a modal or full form would be heavy
+
+## When Not to Use
+
+- **Form fields**: Use `TextInput` (with `<Form>` + `Field`) for inputs that need validation rules
+- **Multi-line text**: Single-line only in this version (multiline planned)
+- **Complex inputs**: Use a proper input component when you need masks, prefixes/suffixes, or rich validation
+
+## Component
+
+---
+
+### Properties
+
+- **`value`** `string` — Controlled value. When provided, the component is controlled.
+- **`defaultValue`** `string` — Initial value for uncontrolled usage.
+- **`onChange`** `(value: string) => void` — Fires on commit **only when the value actually changed**. Use this to update external state (controlled pattern).
+- **`isEditing`** `boolean` — Controlled editing state. When provided, the editing state is controlled.
+- **`defaultIsEditing`** `boolean` (default: `false`) — Default editing state for uncontrolled usage.
+- **`onEditingChange`** `(isEditing: boolean) => void` — Called when editing mode starts or ends.
+- **`onSubmit`** `(value: string) => void` — Fires every commit (Enter / submit-on-blur / `ref.stopEditing(true)`), even when the value did not change. Use for side effects (analytics, save toasts).
+- **`onCancel`** `() => void` — Called when editing is cancelled (Escape or empty submit when `allowEmpty` is `false`).
+- **`editTrigger`** `'dblclick' | 'click' | 'none'` (default: `dblclick`) — How edit mode is activated from the display element. Programmatic entry via `ref.startEditing()` works regardless.
+- **`submitOnBlur`** `boolean` (default: `true`) — Whether to submit when focus leaves the input.
+- **`trimOnSubmit`** `boolean` (default: `true`) — Whether to trim the value on submit.
+- **`allowEmpty`** `boolean` (default: `false`) — When `false`, submitting an empty/whitespace value cancels instead.
+- **`isDisabled`** `boolean` (default: `false`) — When `true`, edit mode cannot be entered (programmatically or otherwise).
+- **`isReadOnly`** `boolean` (default: `false`) — When `true`, edit mode cannot be entered, but the display reads as enabled.
+- **`placeholder`** `string` — Placeholder text shown in the input when the draft is empty.
+- **`renderDisplay`** `(value: string) => ReactNode` — Custom render for display (non-editing) mode.
+- **`inputStyles`** `Styles` — Convenience prop for styling the `Input` sub-element.
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+### Imperative Ref
+
+The component exposes a ref with these methods:
+
+- **`startEditing()`** — Programmatically enter edit mode. Always works regardless of `editTrigger`; blocked only by `isDisabled` / `isReadOnly`.
+- **`stopEditing(submit?: boolean)`** — Programmatically exit edit mode. `submit=true` (default) commits, `submit=false` cancels.
+- **`focus()`** — Focus the underlying element (input when editing, root span otherwise).
+- **`getValue()`** — Get the current committed value.
+
+### Styling Properties
+
+#### styles
+
+Customizes the root element of the component.
+
+**Sub-elements:**
+
+- `Input` — The text input rendered in edit mode
+- `Measure` — The hidden text used to auto-size the input (rarely targeted)
+
+#### inputStyles
+
+Convenience prop equivalent to `styles={{ Input: { ... } }}`.
+
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
+
+### Modifiers
+
+The `mods` property is automatically populated. Consumers can target these in their own `styles`:
+
+| Modifier   | Type      | Description                                                          |
+| ---------- | --------- | -------------------------------------------------------------------- |
+| editing    | `boolean` | Currently in edit mode                                               |
+| editable   | `boolean` | `editTrigger` is `dblclick` or `click` and not disabled/read-only    |
+| disabled   | `boolean` | `isDisabled` is `true`                                               |
+| read-only  | `boolean` | `isReadOnly` is `true`                                               |
+| empty      | `boolean` | The committed value is empty                                         |
+
+## Examples
+
+### Basic Usage
+
+```jsx
+<InlineInput defaultValue="Edit me" />
+```
+
+### Single-click Trigger
+
+Enter edit mode on a single click instead of double-click:
+
+```jsx
+<InlineInput defaultValue="Click me to edit" editTrigger="click" />
+```
+
+### Manual / Programmatic Trigger
+
+When `editTrigger` is `none`, the display element is inert. Use the imperative ref to enter edit mode:
+
+```jsx
+const ref = useRef<CubeInlineInputRef>(null);
+
+<>
+  <InlineInput ref={ref} editTrigger="none" defaultValue="Use the button" />
+  <Button onPress={() => ref.current?.startEditing()}>Rename</Button>
+</>
+```
+
+### Controlled Value
+
+Track the value externally:
+
+```jsx
+const [value, setValue] = useState('Controlled value');
+
+<InlineInput value={value} onChange={setValue} />
+```
+
+### Controlled Editing State
+
+Drive the editing state from outside (e.g. from a "Rename" button in a parent menu):
+
+```jsx
+const [editing, setEditing] = useState(false);
+
+<InlineInput
+  isEditing={editing}
+  onEditingChange={setEditing}
+  defaultValue="Controlled isEditing"
+  editTrigger="none"
+/>
+```
+
+### Inside a Heading
+
+The component inherits all typography from its parent:
+
+```jsx
+<Title level={2}>
+  <InlineInput defaultValue="Editable heading" />
+</Title>
+```
+
+### Inline in Paragraph
+
+Sits naturally inside text flow:
+
+```jsx
+<p>
+  Hello, my name is <InlineInput defaultValue="John Doe" /> and I love editing
+  text in place.
+</p>
+```
+
+### Placeholder for Empty Values
+
+```jsx
+<InlineInput defaultValue="" placeholder="Untitled" />
+```
+
+### Allow Empty Values
+
+By default, submitting an empty value cancels. Set `allowEmpty` to keep the empty value:
+
+```jsx
+<InlineInput defaultValue="Clearable" allowEmpty placeholder="Empty allowed" />
+```
+
+### Disabled / Read-only
+
+```jsx
+<InlineInput defaultValue="You can't edit me" isDisabled />
+<InlineInput defaultValue="Read-only value" isReadOnly />
+```
+
+## Accessibility
+
+### Keyboard Navigation
+
+- `Enter` — Commit the current draft
+- `Escape` — Cancel and revert to the previous value
+- `Tab` / focus loss — Commits when `submitOnBlur` is `true` (default), otherwise no-op
+- Arrow keys, Space, Delete, Backspace — Work normally inside the input and do not bubble to the host
+
+### ARIA Properties
+
+- **`aria-label`** — Provide a label when the input has no visible label associated. Recommended in all cases.
+- **`aria-labelledby`** — Reference the id of a visible label element.
+
+### Focus Management
+
+When entering edit mode, focus is taken explicitly by a `FocusScope` with `autoFocus`. This makes the transition deterministic even when triggered from a closing menu (which would otherwise restore focus to the menu trigger). The text content is selected automatically.
+
+When leaving edit mode, focus is not restored automatically — the host is responsible for moving focus back to a meaningful element (e.g. the parent button or row).
+
+## Best Practices
+
+1. **Do**: Always provide an `aria-label` or `aria-labelledby` for screen reader users.
+
+   ```jsx
+   <InlineInput defaultValue="My document" aria-label="Document name" />
+   ```
+
+2. **Do**: Use `editTrigger="dblclick"` for items that are also clickable for selection (the default).
+
+3. **Don't**: Use `InlineInput` as a form field. Use `TextInput` inside a `<Form>` for that.
+
+4. **Don't**: Rely on `onChange` for keystroke-by-keystroke updates — it fires only on commit. Use `isEditing` + `onEditingChange` if you need to observe the editing lifecycle.
+
+### onChange vs onSubmit
+
+These look similar but fire under different conditions. Pick the one that matches your intent:
+
+| Event       | Fires when                                                                | Typical use                              |
+| ----------- | ------------------------------------------------------------------------- | ---------------------------------------- |
+| `onChange`  | The committed value is **different** from the previous value             | Updating state (controlled pattern)      |
+| `onSubmit`  | The user commits (Enter / blur / `ref.stopEditing(true)`) — always fires | Side effects (server save, toasts)       |
+| `onCancel`  | Escape, empty submit (when `allowEmpty=false`), or `ref.stopEditing(false)` | Reverting UI, cleanup                    |
+
+### Optimistic Display
+
+When the component is **controlled** and the parent updates `value` asynchronously, the component shows the just-committed value optimistically until the parent's `value` catches up. This prevents a flicker back to the old value between commit and re-render.
+
+### Async Save & Rollback
+
+`onSubmit` may return a `Promise`. The component does not block the UI on the promise, but it watches the outcome:
+
+- **Promise resolves** — the parent is expected to have updated `value` (or chose not to). Optimistic display clears when `value` next changes.
+- **Promise rejects** — the component treats this as a save failure and **automatically reverts** the optimistic display back to the actual `value` prop. Stale optimistic state never lingers.
+
+A typical async-save pattern:
+
+```jsx
+<InlineInput
+  value={title}
+  onSubmit={async (next) => {
+    await saveToServer(next);  // throws on failure
+    setTitle(next);            // only on success
+  }}
+/>
+```
+
+If `saveToServer` throws, `InlineInput` reverts to `title` automatically. If you want to show a toast on failure, wrap inside `onSubmit` and re-throw to keep the rollback:
+
+```jsx
+<InlineInput
+  value={title}
+  onSubmit={async (next) => {
+    try {
+      await saveToServer(next);
+      setTitle(next);
+    } catch (err) {
+      showToast('Save failed');
+      throw err;
+    }
+  }}
+/>
+```
+
+If the user starts a new edit before a pending promise settles, the older promise's outcome is ignored (no late rollback can clobber the newer commit).
+
+## Related Components
+
+- [TextInput](../fields/TextInput.md) — Full form-aware text input
+- [Tabs](../navigation/Tabs.md) — Uses `InlineInput` internally for editable tab titles

package/docs/components/content/PrismCode.md

@@ -24,27 +24,6 @@ Syntax-highlighted code block using Prism. Supports multiple languages.
 
 Supports [Base properties](../../BaseProperties.md).
 
-## Theme
-
-Syntax colors are driven by a dedicated, scheme-aware palette of `code-*`
-tokens. Each token uses a different hue so token classes stay visually
-separable, and every token meets at least **WCAG AA (4.5:1)** contrast
-against `#surface` in light, dark, and high-contrast schemes (AAA in HC).
-
-| Token                | Hue            | Used for                                                       |
-| -------------------- | -------------- | -------------------------------------------------------------- |
-| `#code-comment`      | gray           | comments, prolog, doctype, cdata                               |
-| `#code-punctuation`  | muted pink     | operators, punctuation                                         |
-| `#code-keyword`      | pink           | keywords, booleans, constants, atrules (`font-weight: 500`)    |
-| `#code-string`       | primary purple | strings, characters, attribute values, URLs                    |
-| `#code-number`       | green          | numbers, numeric entities                                      |
-| `#code-function`     | pink           | functions, class names, regex, variables                       |
-| `#code-attribute`    | cyan           | tags, attribute names, properties, selectors, built-ins, keys  |
-
-Diff insertion (`+`) and deletion (`-`) intentionally re-use the existing
-`#success-*` / `#danger-*` ramps — both the line background tint and the
-foreground color adapt to the active scheme.
-
 ## Examples
 
 ```jsx

package/docs/components/form/Field.md

@@ -197,7 +197,7 @@ const InputElement = tasty({
     padding: '1x 1.5x',
     border: true,
     radius: '1r',
-    fill: '#surface',
+    fill: '#white',
     color: '#dark-02',
     transition: 'theme',
 

package/docs/components/layout/ResizablePanel.md

@@ -50,7 +50,7 @@ These properties allow direct style application without using the `styles` prop:
 ### Resizable sidebar
 
 ```jsx
-<Panel isFlex isStretched height="min 30x" fill="#surface">
+<Panel isFlex isStretched height="min 30x" fill="#white">
   <ResizablePanel direction="right">
     <Block padding="1x">Sidebar content</Block>
   </ResizablePanel>

package/docs/components/navigation/Tabs.md

@@ -343,7 +343,7 @@ Add dropdown menus to tabs using the `menu` prop. This replaces the need for man
 
 ### Editable Tabs with Menu
 
-Combine editable tabs with a menu for rename, duplicate, and delete actions.
+Combine editable tabs with a menu for rename, duplicate, and delete actions. The inline editing UI is provided by [InlineInput](../content/InlineInput.md), which can also be used standalone elsewhere.
 
 ```jsx
 <Tabs

package/docs/components/organisms/FileTabs.md

@@ -21,7 +21,7 @@ A tab bar for file-like items with close buttons and dirty state indicators. Des
 
 - Tab `radius` — `1r 1r 0 0`
 - Tab `padding` — `1x 1.5x`
-- Tab `fill` — `#dark.04` (active tabs use `#surface`)
+- Tab `fill` — `#dark.04` (active tabs use `#white`)
 - Tab gap — `.5x`
 
 ### Base Properties

package/docs/components/organisms/StatsCard.md

@@ -22,7 +22,7 @@ Extends Card with:
 - `placeContent` — `space-between`
 - `gap` — `1x`
 - `border` — none
-- `shadow` — `$shadow` (design-system elevation token, scheme-aware via `#shadow-md`)
+- `shadow` — `0 2px 6px #dark.10`
 - `padding` — `2.5x`
 
 ### Base Properties

package/docs/tasty/configuration.md

@@ -61,7 +61,6 @@ These docs use `data-schema="dark"` in examples. If your app already standardize
 | `presets` | `Record<string, TypographyPreset>` | - | Typography presets — shorthand for `generateTypographyTokens()` |
 | `globalStyles` | `Record<string, Styles>` | - | Global Tasty styles keyed by CSS selector |
 | `colorSpace` | `'rgb' \| 'hsl' \| 'oklch'` | `'oklch'` | Color space for decomposed color token companion variables |
-| `namePrefix` | `string` | `'t'` (runtime) / `'ts'` (zero-runtime) | Prefix prepended to every generated identifier (class, keyframe, counter-style names). See [Name prefix](#name-prefix). |
 
 ---
 
@@ -85,49 +84,6 @@ The `oklch` color space is the default because it provides perceptually uniform
 
 ---
 
-## Name Prefix
-
-Every identifier Tasty generates — class names, keyframe names, counter-style names — starts with a configurable prefix. The runtime, SSR, and RSC paths default to `'t'`; the zero-runtime build path (`tastyStatic` via the Babel plugin) defaults to `'ts'` so static-extracted classes can never collide with runtime classes when both are loaded on the same page.
-
-```jsx
-configure({
-  namePrefix: 'mb',
-});
-```
-
-The prefix is prepended verbatim to the hash, so include any separator inside the prefix string itself:
-
-| Setting | Class | Keyframe | Counter-style |
-|---|---|---|---|
-| `'t'` (runtime default) | `t1a2b3` | `tk1a2b3` | `tc1a2b3` |
-| `'ts'` (zero-runtime default) | `ts1a2b3` | `tsk1a2b3` | `tsc1a2b3` |
-| `'mb'` | `mb1a2b3` | `mbk1a2b3` | `mbc1a2b3` |
-| `'myapp-'` | `myapp-1a2b3` | `myapp-k1a2b3` | `myapp-c1a2b3` |
-
-The single-letter discriminators (`k` for keyframes, `c` for counter-styles) keep the three kinds visually distinct in devtools — they are not required for correctness because CSS keeps these in separate namespaces.
-
-### Rules
-
-- Must match `^[a-zA-Z_][a-zA-Z0-9_-]{0,31}$`. Examples that pass: `'t'`, `'ts'`, `'app'`, `'myapp-'`, `'_foo'`. Examples that fail: `''`, `'1foo'`, `'my app'`.
-- Validated at `configure()` time; an invalid prefix throws synchronously rather than silently producing broken hydration.
-- Locked once styles have been generated, like all other config.
-
-### Coexistence with the zero-runtime build
-
-The runtime and zero-runtime builds **must use different prefixes** when both are loaded on the same page. Defaults already guarantee this; if you customize one, customize the other accordingly:
-
-```jsx
-// app config (runtime / SSR / RSC)
-configure({ namePrefix: 'mb' });
-
-// tasty-zero.config.ts (Babel plugin)
-export default { namePrefix: 'mbs' };
-```
-
-If you only use one of the two builds, you only need to set `namePrefix` on that path.
-
----
-
 ## Design Tokens
 
 Design tokens define CSS custom properties on `:root`. They are injected automatically when the first style is rendered. Values are parsed through the Tasty DSL, so you can use units, color syntax, and other DSL features.

package/docs/tasty/dsl.md

@@ -52,23 +52,22 @@ styles: { Title: { preset: 'h3' } }
 
 #### Selector Affix (`$`)
 
-Control how a sub-element selector attaches to the root selector using the `$` property inside the sub-element's styles.
-
-Examples below assume the sub-element key is **Cell** (i.e. `[data-element="Cell"]` in CSS):
+Control how a sub-element selector attaches to the root selector using the `$` property inside the sub-element's styles:
 
 | Pattern | Result | Description |
 |---------|--------|-------------|
-| *(none)* | `[data-element="Cell"]` | Descendant (default) |
-| `>` | `> [data-element="Cell"]` | Direct child |
-| `>Body>` | `> [data-element="Body"] > [data-element="Cell"]` | Chained elements |
-| `> Cell` | `> [data-element="Cell"]` | Self-name shorthand — when the trailing element name matches the sub-element's own key, it acts as the placeholder (same as `@`); no duplication |
-| `h1` | `h1` | Tag selector (no key injection) |
-| `h1 >` | `h1 > [data-element="Cell"]` | Key is direct child of tag |
-| `h1 *` | `h1 *` | Any descendant of tag |
-| `*` | `*` | All descendants |
-| `&::before` | `::before` | Root pseudo (no key); `&` is required |
-| `@::before` | `[data-element="Cell"]::before` | Pseudo on the sub-element |
-| `>@.active` | `> [data-element="Cell"].active` | Class on the sub-element |
+| *(none)* | ` [el]` | Descendant (default) |
+| `>` | `> [el]` | Direct child |
+| `>Body>Row>` | `> [Body] > [Row] > [el]` | Chained elements |
+| `> SubElementName` | `> [SubElementName]` | Self-name shorthand — when the trailing element name matches the sub-element's own key, it acts as the placeholder (same as `@`); no duplication |
+| `h1` | ` h1` | Tag selector (no key injection) |
+| `h1 >` | ` h1 > [el]` | Key is direct child of tag |
+| `h1 *` | ` h1 *` | Any descendant of tag |
+| `*` | ` *` | All descendants |
+| `::before` | `::before` | Root pseudo (no key) |
+| `@::before` | `[el]::before` | Pseudo on the sub-element |
+| `>@:hover` | `> [el]:hover` | Pseudo-class on the sub-element |
+| `>@.active` | `> [el].active` | Class on the sub-element |
 
 Rules for key injection (`[data-element="..."]`):
 

package/docs/tasty/methodology.md

@@ -399,32 +399,6 @@ tasty(Button, {
 
 For full details on merge semantics, `@inherit`, `null`, and `false` tombstones, see [Style DSL — Extending vs. Replacing State Maps](dsl.md#extending-vs-replacing-state-maps).
 
-### Styling non-Tasty components or string tags
-
-`tasty(Component, { ... })` always forwards every prop to `Component`, which means `Component` must be Tasty-aware (i.e. it knows how to consume `styles`, `mods`, `qa`, etc.). To apply styles to a third-party component (Next.js `Link`, `react-router`'s `Link`, Radix primitives, MUI, etc.) or to a plain DOM tag, use the options-only form with `as`:
-
-```tsx
-import NextLink from 'next/link';
-
-const Link = tasty({
-  as: NextLink,
-  styles: {
-    color: { '': '#accent-text', ':hover': '#text' },
-    textDecoration: 'underline',
-  },
-  styleProps: ['padding'],
-});
-
-const Span = tasty({
-  as: 'span',
-  styles: { fontWeight: 'bold' },
-});
-
-<Link href="/blog" padding="1x">Blog</Link>;
-```
-
-The wrapped component only needs to forward `className` (and ideally `style` and `ref`) to its underlying DOM node. Tasty-specific props (`qa`, `qaVal`, `mods`, `tokens`, `isDisabled`, `isHidden`, `isChecked`, and any `styleProps`/`modProps`/`tokenProps` you declared) are consumed by the wrapper and converted to `data-*` attributes or CSS custom properties — they never leak to the DOM.
-
 ### When to use styleProps vs wrapping
 
 If the component exposes the properties you need as `styleProps`, use them directly — that is what they are for:

package/docs/tasty/react-api.md

@@ -42,30 +42,6 @@ const PrimaryButton = tasty(Button, {
 
 Style maps merge intelligently — see [Style DSL — Extending vs. Replacing State Maps](dsl.md#extending-vs-replacing-state-maps) for extend mode, replace mode, `@inherit`, `null`, and `false` tombstones.
 
-`tasty(Component, ...)` always wraps `Component` and forwards every prop to it, so `Component` must be Tasty-aware (i.e. it accepts `styles`, `mods`, `qa`, etc. and renders them through its own Tasty pipeline). To apply styles to a third-party component or a string DOM tag via `className`, use the options-only form with `as`:
-
-```jsx
-import NextLink from 'next/link';
-
-const Link = tasty({
-  as: NextLink,
-  styles: {
-    color: { '': '#accent-text', ':hover': '#text' },
-    textDecoration: 'underline',
-  },
-  styleProps: ['padding'],
-});
-
-const Span = tasty({
-  as: 'span',
-  styles: { fontWeight: 'bold' },
-});
-
-<Link href="/blog" padding="1x">Blog</Link>;
-```
-
-The wrapped component only needs to forward `className` (and ideally `style`/`ref`). Tasty-specific props (`qa`, `qaVal`, `mods`, `tokens`, `styleProps`, `modProps`, `tokenProps`) are consumed by Tasty and never leak to the DOM.
-
 ---
 
 ## Style Props

package/docs/tasty/ssr.md

@@ -358,18 +358,16 @@ const stream = await runWithCollector(collector, () =>
 
 Server-safe style collector. One instance per request.
 
-Constructor: `new ServerStyleCollector(namePrefix?)`. The optional `namePrefix` overrides the value from `configure({ namePrefix })`; in normal usage you pass nothing and let the global config drive it. See [Configuration: Name prefix](configuration.md#name-prefix).
-
 | Method | Description |
 |---|---|
-| `allocateClassName(cacheKey)` | Allocate a deterministic, content-hashed class name for a cache key (e.g. `t1a2b3` with the default prefix). The same `cacheKey` always produces the same class name on server and client when both share the same `namePrefix`. Returns `{ className, isNewAllocation }`. |
+| `allocateClassName(cacheKey)` | Allocate a sequential class name (`t0`, `t1`, ...) for a cache key. Returns `{ className, isNewAllocation }`. |
 | `collectChunk(cacheKey, className, rules)` | Record CSS rules for a chunk. Deduplicated by `cacheKey`. |
 | `collectKeyframes(name, css)` | Record a `@keyframes` rule. Deduplicated by name. |
-| `allocateKeyframeName(providedName?)` | Allocate a keyframe name. Returns `providedName` if given, otherwise generates one using `${namePrefix}k${counter}` (e.g. `tk0`, `tk1`, ...). |
+| `allocateKeyframeName(providedName?)` | Allocate a keyframe name. Returns `providedName` if given, otherwise generates one (`k0`, `k1`, ...). |
 | `collectProperty(name, css)` | Record a `@property` rule. Deduplicated by name. |
 | `collectFontFace(key, css)` | Record a `@font-face` rule. Deduplicated by content hash. |
 | `collectCounterStyle(name, css)` | Record a `@counter-style` rule. Deduplicated by name. |
-| `allocateCounterStyleName(providedName?)` | Allocate a counter-style name. Returns `providedName` if given, otherwise generates one using `${namePrefix}c${counter}` (e.g. `tc0`, `tc1`, ...). |
+| `allocateCounterStyleName(providedName?)` | Allocate a counter-style name. Returns `providedName` if given, otherwise generates one (`cs0`, `cs1`, ...). |
 | `collectGlobalStyles(key, css)` | Record global styles (from `useGlobalStyles`). Deduplicated by key. |
 | `collectRawCSS(key, css)` | Record raw CSS text (from `useRawCSS`). Deduplicated by key. |
 | `collectInternals()` | Collect internal `@property` rules, `:root` token defaults, `@font-face`, and `@counter-style` rules from the global config. Called automatically on first chunk collection; idempotent. |

package/docs/tasty/styles.md

@@ -378,11 +378,11 @@ Multiple shadows: `shadow="1x 1x 2x #dark.20, inset 0 0 4x #dark.10"`
 
 Typography preset that sets font-size, line-height, letter-spacing, font-weight, font-style, and text-transform from named design tokens.
 
-**Syntax:** `name`, `name / modifier...`, or `modifier...` (shorthand)
+**Syntax:** `name`, `name / modifier`, or `modifier` (shorthand)
 
 Preset names are project-specific (e.g. `h1`–`h6`, `t1`–`t4`, `p1`–`p4`). Register them for autocomplete by augmenting `TastyPresetNames`.
 
-Use `/` to separate the preset name from one or more space-separated modifiers. When modifiers are used alone (without a name), the preset name defaults to `inherit`. Modifiers can be combined freely because they target different properties.
+Use `/` to separate the preset name from a modifier. When a modifier is used alone (without a name), the preset name defaults to `inherit`.
 
 **Modifiers:**
 
@@ -394,13 +394,11 @@ Use `/` to separate the preset name from one or more space-separated modifiers.
 | `tight` | Sets line-height equal to font-size |
 
 ```jsx
-preset="h1"                    // heading 1
-preset="h2 / strong"           // bold heading 2
-preset="h2 / strong italic"    // bold + italic heading 2
-preset="t3 / italic"           // italic text 3
-preset="t2 / strong tight"     // bold text 2 with tight line-height
-preset="bold"                  // inherit preset with bold (shorthand)
-preset="bold italic"           // inherit preset with bold + italic (shorthand)
+preset="h1"              // heading 1
+preset="h2 / strong"     // bold heading 2
+preset="t3 / italic"     // italic text 3
+preset="t2 / tight"      // text 2 with tight line-height
+preset="bold"             // inherit preset with bold (shorthand for "inherit / bold")
 ```
 
 Individual typography props (`fontSize`, `lineHeight`, `letterSpacing`, `fontWeight`, `fontStyle`, `textTransform`) can be used alongside `preset` to override specific values, but using `preset` alone is recommended.

package/docs/tasty/tasty-static.md

@@ -178,21 +178,6 @@ module.exports = {
 | `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 runtime tasty
-
-When a page mixes `tastyStatic` with runtime `tasty`, both must use **different** `namePrefix` values. The defaults handle this automatically (`'t'` for runtime, `'ts'` for zero-runtime). If you customize one, customize the other:
-
-```ts
-// tasty-zero.config.ts (Babel plugin)
-export default { namePrefix: 'mbs' };
-```
-
-```ts
-// app entry (runtime configure)
-configure({ namePrefix: 'mb' });
-```
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-bca8d09",
+  "version": "0.0.0-canary-ec0a7f1",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -10,7 +10,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": false,
-  "packageManager": "pnpm@11.0.8",
+  "packageManager": "pnpm@10.32.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -74,8 +74,7 @@
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
-    "@tenphi/glaze": "0.11.0",
-    "@tenphi/tasty": "2.6.0",
+    "@tenphi/tasty": "2.1.1",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -109,8 +108,8 @@
     "@size-limit/webpack": "^8.2.4",
     "@size-limit/webpack-why": "^8.2.4",
     "@statoscope/cli": "^5.20.1",
-    "@storybook/addon-docs": "^10.3.6",
-    "@storybook/react-vite": "^10.3.6",
+    "@storybook/addon-docs": "^10.2.3",
+    "@storybook/react-vite": "^10.2.3",
     "@tenphi/eslint-plugin-tasty": "^0.6.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
@@ -140,7 +139,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^10.3.6",
+    "eslint-plugin-storybook": "^10.2.3",
     "globals": "^16.0.0",
     "husky": "^6.0.0",
     "jsdom": "^29.1.1",
@@ -156,8 +155,7 @@
     "rimraf": "^6.0.1",
     "serve-handler": "^6.1.6",
     "size-limit": "^8.2.6",
-    "storybook": "^10.3.6",
-    "storybook-dark-mode": "^5.0.0",
+    "storybook": "^10.2.3",
     "tsdown": "^0.20.3",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.31.0",
@@ -172,6 +170,6 @@
   "license": "MIT",
   "engines": {
     "node": ">=22.14.0",
-    "pnpm": "^11.0.0"
+    "pnpm": "^10.0.0"
   }
 }