@cube-dev/ui-kit 0.0.0-canary-ffcf9d9 → 0.0.0-canary-04d65e8

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { c } from "react-compiler-runtime";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | 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.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react-compiler-runtime";
 import { useSyncExternalStore } from "react";

package/dist/utils/react/useMergeStyles.js

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

package/dist/utils/react/useOverlayEscapeGuard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react-compiler-runtime";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { c } from "react-compiler-runtime";
 import { useContext, useEffect, useRef } from "react";

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | 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.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | 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.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 
 //#region src/utils/react/wrapNodeIfPlain.ts

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | 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.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | Cube Dev Team */
 import { isSelector, mergeStyles } from "@tenphi/tasty";
 
 //#region src/utils/styles.ts

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | 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.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 
 //#region src/utils/warnings.ts

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ffcf9d9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-04d65e8 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-ffcf9d9";
-const TASTY_VERSION = "3.9.6";
+const VERSION = "0.0.0-canary-04d65e8";
+const TASTY_VERSION = "3.9.9";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/components/actions/Link.md

@@ -59,8 +59,6 @@ These properties allow direct style application without using the `styles` prop:
 <Link to="../parent-page">Parent</Link>
 ```
 
-A string is external only when it starts with a URL scheme (`https:`, `mailto:`, `tel:`) or with `//`. A colon later in a path or query, as in `/models/cube:orders` or `..?thread=a:b`, stays router navigation. Write a relative path whose first segment holds a colon as `./cube:orders`.
-
 ### 2) Open in a new tab (`!` prefix)
 
 ```jsx

package/docs/components/content/HotKeys.md

@@ -16,7 +16,7 @@ A component that displays keyboard shortcuts in a visually appealing and accessi
 
 ### Properties
 
-- **`children`** `string | (string | number)[]` — Key combination string (e.g., "mod+k, ctrl+k"). An array of text, such as the one `<Trans>` passes to a component slot, is joined into one string first.
+- **`children`** `string` — Key combination string (e.g., "mod+k, ctrl+k")
 - **`type`** `'default' | 'primary' | 'inherit'` (default: `default`) — Visual appearance type: default (subtle), primary (high contrast), or inherit (adapts to parent color)
 
 ### Base Properties
@@ -102,18 +102,6 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 </div>
 ```
 
-### Inside a Translation
-
-`HotKeys` can fill a `<Trans>` component slot. The keys come from the translated string:
-
-```jsx
-<Trans
-  i18nKey="search.hint"
-  defaults="Press <hotkeys>mod+k</hotkeys> to search"
-  components={{ hotkeys: <HotKeys type="inherit" /> }}
-/>
-```
-
 ### With Accessibility Labels
 
 ```jsx
@@ -217,7 +205,7 @@ The inherit type is particularly useful when the HotKeys component needs to matc
 
 ## Key Format
 
-The keys (a string, or text children joined into one string) use the following format:
+The component children accepts a string with the following format:
 
 - **Single key**: `"enter"`, `"space"`, `"a"`
 - **Key combinations**: `"mod+k"`, `"ctrl+shift+p"`

package/docs/components/content/Skeleton.md

@@ -17,7 +17,6 @@ A skeleton loading indicator with preset layouts. Composes `Placeholder` compone
 - **`tabs`** `number` (default: `3`) — Number of tabs (for tabs layout)
 - **`cards`** `number` (default: `3`) — Number of stat cards (for stats layout)
 - **`isStatic`** `boolean` (default: `false`) — Disable shimmer animation
-- **`children`** `ReactNode` — Replaces the placeholder body in the `page`, `content` and `tabs` layouts. The page's header row and the tab strip stay. Other layouts ignore it.
 - **`size`** `string` (default: `'2x'`) — Height of individual placeholder elements (from Placeholder)
 - **`circle`** `boolean` — Render placeholder as a circle (1:1 aspect ratio with round radius)
 - **`template`** `string` — CSS grid-template shorthand for the skeleton root grid layout
@@ -49,11 +48,3 @@ These properties allow direct style application without using the `styles` prop:
 
 <Skeleton layout="chart" columns={8} />
 ```
-
-### Custom Body
-
-```jsx
-<Skeleton layout="tabs" tabs={5}>
-  <Placeholder height="30x" />
-</Skeleton>
-```

package/docs/components/content/Tree.md

@@ -47,7 +47,6 @@ The component's data shape (`treeData`) and the public callback shape are design
 - **`menuTriggerProps`** `Partial<CubeMenuTriggerProps>` — Forwarded to every per-row `MenuTrigger`.
 - **`menuProps`** `Partial<CubeMenuProps<object>>` — Forwarded to every per-row `Menu` (both the overflow `⋮` menu and the right-click context menu). If you pass `onAction` here, it is **chained with** the tree-level `onAction`/per-node `data.onAction` callbacks (it does not override them) and receives the same normalized action key.
 - **`rowStyles`** `Styles` — Override styles for `[data-element="Row"]`.
-- **`itemProps`** `TreeItemProps | ((data: CubeTreeNodeData, state: TreeNodeState) => TreeItemProps)` — Per-row `Item` props (`prefix`, `suffix`, `actions`, `description`, `tooltip`, …), as an object or resolved for each row from its data and state. `TreeItemProps` and `TreeNodeState` are exported for typing the callback.
 
 #### `CubeTreeNodeData`
 
@@ -114,7 +113,7 @@ The following row-level modifiers are emitted automatically. They are useful whe
 
 ### Selection Modes
 
-- `none` — Row click does not select; pressing an expandable row toggles it. Useful in pure-display or pure- checkable trees.
+- `none` — Row click does not select. Useful in pure-display or pure- checkable trees.
 - `single` (default) — One row selected at a time.
 - `multiple` — Multi-select with keyboard modifiers and shift-range.
 
@@ -263,11 +262,10 @@ Tree implements the [`treegrid` ARIA pattern](https://www.w3.org/WAI/ARIA/apg/pa
 - `ArrowLeft` — Collapse the focused row (or move to its parent if already collapsed).
 - `Home` / `End` — Move focus to the first / last visible row.
 - `Space` / `Enter` — Toggle selection on the focused row (in `single` or `multiple` mode).
-- `Escape` — Clears the selection when rows are selected. Otherwise it reaches the surrounding overlay, such as a popover or dialog, so it can close, from a row and from a row's checkbox alike.
 
 ### Screen Reader Support
 
-- Each row reports `aria-level`, `aria-posinset` and `aria-setsize`. Expandable rows also report `aria-expanded`, including a lazy row (`isLeaf: false`) whose children have not loaded yet.
+- Each row reports `aria-level`, `aria-posinset`, `aria-setsize`, and `aria-expanded` so screen readers can announce the position and expansion state.
 - When `isCheckable` is enabled, the row carries `aria-checked` (`true`, `false`, or `mixed` for the indeterminate state).
 - Disabled rows expose `aria-disabled="true"`.
 

package/docs/tasty/ai-agents.md

@@ -220,6 +220,8 @@ styles: { Title: { preset: 'h3' }, Icon: { $: '>@:last-child', color: '#accent'
 | `@function`      | `{ '$$name': { args, returns?, result, '$local'? } }`                                                       |
 | `recipe`         | a **string** of configured recipe names: `'card elevated'`, `'reset input / autofill'`, `'none / disabled'` |
 
+`recipe` resolves on the component root and independently in each sub-element's styles: `styles: { Panel: { recipe: 'card elevated' } }` is supported. Configured recipe definitions must be flat and cannot contain their own `recipe` key; references inside recipe values are not recursively expanded. Compose names where the recipe is applied, not inside `configure({ recipes })`. See [Recipes](dsl.md#recipes).
+
 At-rule keys match the real CSS at-rule names, so they are kebab-case, not camelCase. Inside `@function`, the callable is `$$name` but its parameters and local variables are `$name`:
 
 ```jsx

package/docs/tasty/configuration.md

@@ -549,7 +549,23 @@ configure({
 });
 ```
 
-Recipe values are flat tasty styles (no sub-element keys). They may contain base styles, tokens, local states, `@keyframes`, and `@property`. Recipes cannot reference other recipes.
+Recipe values are flat tasty styles (no sub-element keys). They may contain base styles, tokens, local states, `@keyframes`, and `@property`.
+
+**Recipes cannot reference other recipes.** A `recipe` key inside a configured recipe's value is not recursively resolved:
+
+```jsx
+// Unsupported: applying 'elevatedCard' does not expand 'card elevated'.
+configure({
+  recipes: {
+    elevatedCard: {
+      recipe: 'card elevated',
+      padding: '6x',
+    },
+  },
+});
+```
+
+Instead, compose the names where you apply the styles: `styles: { recipe: 'card elevated', padding: '6x' }`. Recipe references are resolved on the component root and independently inside each sub-element's styles (for example, `styles: { Panel: { recipe: 'card elevated' } }`). This sub-element support does not allow one recipe definition to inherit another. Tasty warns in development when a recipe definition contains a `recipe` key.
 
 For how to apply, compose, and override recipes in components, see [Recipes](dsl.md#recipes) in the Style DSL reference.
 

package/docs/tasty/dsl.md

@@ -343,6 +343,26 @@ const ElevatedCard = tasty({
 });
 ```
 
+**Where recipes resolve:**
+
+The `recipe` property is resolved on the component root and independently inside each sub-element's styles:
+
+```jsx
+const CardWithPanel = tasty({
+  styles: {
+    recipe: 'card',
+    Panel: {
+      recipe: 'card elevated',
+      padding: '2x', // Overrides the panel's base recipe padding
+    },
+  },
+});
+```
+
+At each level, base recipes are collected in name order (later recipes replace earlier values for the same property), then local styles are merged, then post recipes are merged. The merges with local styles and post recipes follow the [state-map extension and replacement rules](#extending-vs-replacing-state-maps).
+
+Recipe definitions themselves cannot contain a `recipe` reference to another recipe: there is no recursive expansion or recipe inheritance. Compose names in the root or sub-element `recipe` property instead. See [Configuration — Recipes](configuration.md#recipes) for an unsupported nesting example.
+
 **Post-merge recipes (`/` separator):**
 
 Recipes listed after `/` are applied _after_ component styles using `mergeStyles`:

package/docs/tasty/react-api.md

@@ -70,6 +70,8 @@ const Span = tasty({
 
 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.
 
+Props forwarded to the `as` component keep their declared types and requiredness. For example, a component with `position: 'top-right' | 'bottom-left'` accepts those values through `tasty({ as: Component })`; CSS positioning can still be set through `styles.position`. A prop explicitly listed in `styleProps` is consumed as a style value instead. The always-available base style props below are also consumed by Tasty, so keep component-specific prop names separate from those reserved names.
+
 ---
 
 ## Style Props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-ffcf9d9",
+  "version": "0.0.0-canary-04d65e8",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -108,7 +108,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "2.0.0",
-    "@tenphi/tasty": "^3.9.6",
+    "@tenphi/tasty": "3.9.9",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -147,7 +147,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.5.1",
+    "@tenphi/eslint-plugin-tasty": "^1.5.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",