@cube-dev/ui-kit 0.0.0-canary-57b4f47 → 0.0.0-canary-be6dbe9

package/dist/version.js

@@ -1,21 +1,13 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-57b4f47 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-be6dbe9 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-57b4f47";
-const TASTY_VERSION = "2.5.0";
+const VERSION = "0.0.0-canary-be6dbe9";
 if (typeof window !== "undefined") {
 	const version = VERSION;
-	const tastyVersion = TASTY_VERSION;
-	window.CubeUIKit = window.CubeUIKit || {
-		version,
-		tastyVersion
-	};
+	window.CubeUIKit = window.CubeUIKit || { version };
 	if (window.CubeUIKit.version && window.CubeUIKit.version !== version) console.error("More than one version of CubeUIKit is loaded", { loadedVersions: [window.CubeUIKit.version, version] });
-	else {
-		window.CubeUIKit.version = version;
-		window.CubeUIKit.tastyVersion = tastyVersion;
-	}
+	else window.CubeUIKit.version = version;
 }
 
 //#endregion
-export { TASTY_VERSION, VERSION };
+export { VERSION };
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","names":[],"sources":["../src/version.ts"],"sourcesContent":["declare global {\n  interface Window {\n    CubeUIKit: {\n      version: string;\n      tastyVersion: string;\n    };\n  }\n\n  /** Replaced at build time by tsdown `define` */\n  const __UIKIT_VERSION__: string;\n  /** Replaced at build time by tsdown `define` */\n  const __TASTY_VERSION__: string;\n}\n\n// eslint-disable-next-line no-undef -- replaced at build time by tsdown `define`\nexport const VERSION: string = __UIKIT_VERSION__;\n// eslint-disable-next-line no-undef -- replaced at build time by tsdown `define`\nexport const TASTY_VERSION: string = __TASTY_VERSION__;\n\nif (typeof window !== 'undefined') {\n  const version = VERSION;\n  const tastyVersion = TASTY_VERSION;\n\n  // Ensure CubeUIKit is defined on window in a way bundlers recognize\n  window.CubeUIKit = window.CubeUIKit || { version, tastyVersion };\n\n  // Check for multiple versions\n  if (window.CubeUIKit.version && window.CubeUIKit.version !== version) {\n    console.error('More than one version of CubeUIKit is loaded', {\n      loadedVersions: [window.CubeUIKit.version, version],\n    });\n  } else {\n    window.CubeUIKit.version = version;\n    window.CubeUIKit.tastyVersion = tastyVersion;\n  }\n}\n"],"mappings":";;AAeA,MAAa;AAEb,MAAa;AAEb,IAAI,OAAO,WAAW,aAAa;CACjC,MAAM,UAAU;CAChB,MAAM,eAAe;AAGrB,QAAO,YAAY,OAAO,aAAa;EAAE;EAAS;EAAc;AAGhE,KAAI,OAAO,UAAU,WAAW,OAAO,UAAU,YAAY,QAC3D,SAAQ,MAAM,gDAAgD,EAC5D,gBAAgB,CAAC,OAAO,UAAU,SAAS,QAAQ,EACpD,CAAC;MACG;AACL,SAAO,UAAU,UAAU;AAC3B,SAAO,UAAU,eAAe"}
+{"version":3,"file":"version.js","names":[],"sources":["../src/version.ts"],"sourcesContent":["declare global {\n  interface Window {\n    CubeUIKit: {\n      version: string;\n    };\n  }\n\n  /** Replaced at build time by tsdown `define` */\n  const __UIKIT_VERSION__: string;\n}\n\n// eslint-disable-next-line no-undef -- replaced at build time by tsdown `define`\nexport const VERSION: string = __UIKIT_VERSION__;\n\nif (typeof window !== 'undefined') {\n  const version = VERSION;\n\n  // Ensure CubeUIKit is defined on window in a way bundlers recognize\n  window.CubeUIKit = window.CubeUIKit || { version };\n\n  // Check for multiple versions\n  if (window.CubeUIKit.version && window.CubeUIKit.version !== version) {\n    console.error('More than one version of CubeUIKit is loaded', {\n      loadedVersions: [window.CubeUIKit.version, version],\n    });\n  } else {\n    // Set version if not already set\n    window.CubeUIKit.version = version;\n  }\n}\n"],"mappings":";;AAYA,MAAa;AAEb,IAAI,OAAO,WAAW,aAAa;CACjC,MAAM,UAAU;AAGhB,QAAO,YAAY,OAAO,aAAa,EAAE,SAAS;AAGlD,KAAI,OAAO,UAAU,WAAW,OAAO,UAAU,YAAY,QAC3D,SAAQ,MAAM,gDAAgD,EAC5D,gBAAgB,CAAC,OAAO,UAAU,SAAS,QAAQ,EACpD,CAAC;KAGF,QAAO,UAAU,UAAU"}

package/docs/Usage.md

@@ -69,14 +69,13 @@ Defined in `src/tokens/sizes.ts`. Used for component heights and icon sizes.
 
 ## Shadow Tokens
 
-Defined in `src/tokens/shadows.ts`. Shadow colors (`#shadow-sm`, `#shadow-md`, `#shadow-lg`) are generated by Glaze and adapt automatically to dark / high-contrast schemes.
+Defined in `src/tokens/shadows.ts`.
 
 | Token | Value |
 |-------|-------|
-| `$item-shadow` | `0 1bw 0.375x #shadow-sm` |
-| `$card-shadow` | `0 0.5x 2x #shadow-md` |
-| `$shadow` | `0 0.5x 2x #shadow-md` |
-| `$dialog-shadow` | `0 1x 4x #shadow-lg` |
+| `$item-shadow` | `0 1bw 0.375x #dark.15` |
+| `$card-shadow` | `0 0.5x 2x #shadow` |
+| `$dialog-shadow` | `0 1x 4x #dark.15` |
 
 ## Layout Tokens
 
@@ -90,110 +89,43 @@ Defined in `src/tokens/layout.ts`.
 
 ## Color Tokens
 
-All color tokens use `#name` syntax in styles. Opacity variants use `#name.NN` (e.g. `#surface-text.06` for 6% opacity).
+All color tokens use `#name` syntax in styles. Opacity variants use `#name.NN` (e.g. `#dark.06` for 6% opacity). Defined in `src/tokens/colors.ts`.
 
-The palette is generated by [`@tenphi/glaze`](https://github.com/tenphi/glaze) (see `src/tokens/palette.ts`). Every color token is emitted as a state map with `light`, `@dark`, and `@hc` (high-contrast) variants, so the entire UI Kit adapts to dark / high-contrast schemes automatically.
+### Base Colors
 
-### Color Schemes
-
-The `@dark` and `@hc` predefined states are wired up in `src/components/Root.tsx` to support both an attribute opt-in and the user's system preference:
-
-```html
-<!-- Force dark scheme -->
-<html data-schema="dark">
-
-<!-- Force high-contrast scheme -->
-<html data-contrast="high">
-
-<!-- Both can be combined -->
-<html data-schema="dark" data-contrast="high">
-```
-
-When the attribute is absent, the scheme falls back to `@media (prefers-color-scheme: dark)` and `@media (prefers-contrast: more)`.
-
-### Surface & Text Vocabulary
-
-The neutral palette uses a `surface` / `surface-text` model. Each surface depth has its own AAA text color, plus a soft (AA) variant for secondary copy:
-
-| Token | Role |
-|-------|------|
-| `#surface` | Primary background |
-| `#surface-2` | Slightly recessed background (cards, inputs) |
-| `#surface-3` | Deepest background (panels, code blocks) |
-| `#surface-text` | AAA text on `#surface` |
-| `#surface-text-soft` | AA text on `#surface` (secondary copy, body text) |
-| `#surface-text-soft-2` | AA-large text on `#surface` (placeholders, captions) |
-| `#surface-2-text`, `#surface-2-text-soft` | Same scale, anchored to `#surface-2` |
-| `#surface-3-text`, `#surface-3-text-soft` | Same scale, anchored to `#surface-3` |
-
-### Other Neutral Tokens
-
-| Token | Role |
-|-------|------|
+| Token | Description |
+|-------|-------------|
+| `#white`, `#black`, `#clear` | Absolute white, black, and transparent |
+| `#text` | Default text color |
 | `#border` | Default border color |
 | `#placeholder` | Input placeholder text |
+| `#shadow` | Shadow color |
+| `#minor` | Secondary/muted text |
 | `#focus` | Focus ring color |
-| `#disabled` | Disabled state fill / text |
-| `#pink` | Accent pink (independent hue) |
-| `#shadow-sm` / `#shadow-md` / `#shadow-lg` | Tinted shadow colors (used by `$*-shadow` tokens) |
-| `#overlay` | Dim backdrop (50% transparent) |
-| `#clear` | `transparent` |
+| `#pink` | Accent pink |
+| `#light` | Light background |
+
+### Semantic Color Groups
 
-### Accent System
+Each semantic group provides a base color and variants following the pattern: `#name`, `#name-text`, `#name-bg`, `#name-icon`, `#name-desaturated`, `#name-disabled`.
 
-Each themed color (default, primary, success, danger, warning, note) provides an `accent-*` family anchored to a fixed white "accent surface text". These tokens stay recognizable across schemes (used for branded buttons, CTAs, etc.):
+| Group | Hue | Purpose |
+|-------|-----|---------|
+| `#primary` / `#purple` | 280.3° | Primary actions, brand color |
+| `#danger` | 23.1° | Errors, destructive actions |
+| `#success` | 156.9° | Success states, confirmations |
+| `#warning` | 84.3° | Warning states, caution |
+| `#note` | 302.3° | Informational notes |
 
-| Token (default theme; prefixed in others) | Role |
-|-------|------|
-| `#accent-surface` | Saturated brand fill (button bg) |
-| `#accent-surface-2`, `#accent-surface-3` | Darker / more saturated variants |
-| `#accent-surface-text` | Near-white text on accent fill |
-| `#accent-text` | Saturated colored text (used on neutral surface) |
-| `#accent-icon` | Saturated colored icon |
+### Neutral Scales
 
-In the `default` theme these tokens are unprefixed (`#accent-surface`). In colored themes they are prefixed (`#success-accent-surface`, `#danger-accent-text`, …).
+**Dark scale:** `#dark`, `#dark-01` through `#dark-05` — neutral scale from near-black to light gray. **Surfaces:** `#surface`, `#surface-2`, `#surface-3` — layered UI backgrounds.
 
-### Themed Surfaces
+**Purple scale:** `#purple-01` through `#purple-04` — additional purple shades for gradients and accents.
 
-Each colored theme (`primary`, `purple`, `success`, `danger`, `warning`, `note`) also provides its own tinted `<theme>-surface` (banner / chip background) and `<theme>-surface-text` (banner text):
+### Disabled Colors
 
-| Group | Hue | Purpose |
-|-------|-----|---------|
-| `#primary-*` / `#purple-*` | 280.3° | Primary actions, brand color |
-| `#success-*` | 156.9° | Success states, confirmations |
-| `#danger-*` | 23.1° | Errors, destructive actions |
-| `#warning-*` | 84.3° | Warning states, caution |
-| `#note-*` | 302.3° | Informational notes |
-
-For example, a success banner uses `fill: '#success-surface'` + `color: '#success-surface-text'`, while a primary button uses `fill: '#primary-accent-surface'` + `color: '#primary-accent-surface-text'`.
-
-### Legacy Aliases
-
-The previous token names continue to work as aliases (defined at the bottom of `src/tokens/colors.ts`). New code should prefer the Glaze tokens, but existing components do not need to be migrated:
-
-| Legacy | Resolves to |
-|-------|------------|
-| `#text` | `#surface-text-soft` |
-| `#dark` / `#dark-01` | `#surface-text` |
-| `#dark-02` | `#surface-text-soft` |
-| `#dark-03` | `#surface-text-soft-2` |
-| `#dark-04` | `#placeholder` |
-| `#dark-05` | `#border` |
-| `#minor` | `#surface-text-soft.65` |
-| `#shadow` | `#shadow-md` |
-| `#light` | `#surface-3` |
-| `#dark-bg` | `#surface-2` |
-| `#primary` / `#purple` | `#primary-accent-surface` |
-| `#primary-text` / `#purple-text` | `#primary-accent-text` |
-| `#primary-bg` / `#purple-bg` | `#primary-surface` |
-| `#primary-icon` / `#purple-icon` | `#primary-accent-icon` |
-| `#<status>` | `#<status>-accent-surface` |
-| `#<status>-text` | `#<status>-accent-text` |
-| `#<status>-bg` | `#<status>-surface` |
-| `#<status>-icon` | `#<status>-accent-icon` |
-| `#<status>-disabled` | `#disabled` |
-
-`#white`, `#black`, and `#clear` are not defined in the palette — `#white` and `#black` are tasty's built-in named colors, and `#clear` is an alias for `transparent`.
+`#disabled`, `#disabled-text`, `#disabled-bg` — dedicated colors for disabled UI elements.
 
 ## Typography Presets
 

package/docs/components/content/Card.md

@@ -17,7 +17,7 @@ No component-specific props. Use style props directly.
 - `display` — `block`
 - `flow` — `column`
 - `radius` — `(1cr + 1bw)`
-- `fill` — `#surface`
+- `fill` — `#white`
 - `border` — `#border`
 - `padding` — `1.5x`
 - `preset` — `t3`

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/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/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-57b4f47",
+  "version": "0.0.0-canary-be6dbe9",
   "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.10.0",
-    "@tenphi/tasty": "2.5.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,10 +139,9 @@
     "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": "^20.0.3",
     "lint-staged": "^10.0.0",
     "markdown-table": "^3.0.3",
     "npm-run-all": "^4.1.5",
@@ -156,8 +154,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 +169,6 @@
   "license": "MIT",
   "engines": {
     "node": ">=22.14.0",
-    "pnpm": "^11.0.0"
+    "pnpm": "^10.0.0"
   }
 }