@cube-dev/ui-kit 0.0.0-canary-2ef7bcb → 0.0.0-canary-daad5bf

package/docs/tasty/methodology.md

@@ -122,10 +122,10 @@ Tasty exports predefined style prop lists that group properties by role. Use the
 | Preset             | Properties                                                                                                                                                                     | Typical use                                   |
 | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------- |
 | `FLOW_STYLES`      | flow, gap, columnGap, rowGap, align, justify, placeItems, placeContent, alignItems, alignContent, justifyItems, justifyContent, gridColumns, gridRows, gridTemplate, gridAreas | Layout containers (`Space`, `Grid`)           |
-| `POSITION_STYLES`  | gridArea, gridColumn, gridRow, order, placeSelf, alignSelf, justifySelf, zIndex, physical/logical margin, inset, scroll margin/padding, position                                 | Positioned elements (`Button`, `Badge`)       |
-| `DIMENSION_STYLES` | width, height, blockSize, inlineSize, flexBasis, flexGrow, flexShrink, flex                                                                                                    | Sized elements                                |
+| `POSITION_STYLES`  | gridArea, gridColumn, gridRow, order, placeSelf, alignSelf, justifySelf, zIndex, margin, inset, position                                                                       | Positioned elements (`Button`, `Badge`)       |
+| `DIMENSION_STYLES` | width, height, flexBasis, flexGrow, flexShrink, flex                                                                                                                           | Sized elements                                |
 | `COLOR_STYLES`     | color, fill, fade, image                                                                                                                                                       | Color-customizable elements                   |
-| `BLOCK_STYLES`     | padding, blockPadding, inlinePadding, overflow, scrollbar, textAlign, border, blockBorder, inlineBorder, radius, shadow, outline                                               | Block-level containers                        |
+| `BLOCK_STYLES`     | padding, paddingInline, paddingBlock, overflow, scrollbar, textAlign, border, radius, shadow, outline                                                                          | Block-level containers                        |
 | `CONTAINER_STYLES` | All of the above combined (+ BASE_STYLES)                                                                                                                                      | Fully flexible containers                     |
 | `OUTER_STYLES`     | POSITION_STYLES + DIMENSION_STYLES + block outer (border, radius, shadow, outline)                                                                                             | Components whose outer shell is customizable  |
 | `INNER_STYLES`     | BASE_STYLES + COLOR_STYLES + block inner (padding, overflow, scrollbar) + FLOW_STYLES                                                                                          | Components whose inner layout is customizable |

package/docs/tasty/pipeline.md

@@ -395,8 +395,6 @@ See the comment block in `exclusive.ts:500-523`: a default value whose higher-pr
 
 Computes the Cartesian product of all style entries for a handler, creating snapshots of which value each style has for each possible state combination.
 
-When every input is a direct value rather than a state map, the pipeline skips stages 0–4 and passes one unconditional snapshot directly to the handler. This avoids building exclusive entries and a Cartesian product for ordinary state-free styles.
-
 ### How It Works
 
 1. Collect exclusive entries for each style the handler uses
@@ -456,7 +454,6 @@ Style handlers encapsulate the logic for translating design tokens (like `'2x'`)
 ### What It Does
 
 Combines rules that have identical CSS output into a single rule with an OR condition.
-Zero- and one-rule inputs return unchanged because no merge is possible.
 
 ### How It Works
 

package/docs/tasty/runtime-benchmarks.md

@@ -40,44 +40,27 @@ of elements, rules or interactions. Machine load, browser versions, and CPU
 power will move the results — on a loaded machine the absolute columns drift
 several percent while the raw/Tasty delta holds, so read the delta.
 
-**On a laptop, check the power state first.** Low Power Mode caps CPU frequency,
-and it is the single largest source of error here — larger than background load.
-Measured on the machine below, running on battery with Low Power Mode enabled
-made every one of the 53 Node cases slower, by a median of 26%, and halving the
-background load recovered only 3 points of that. A frequency cap scales every
-case by roughly the same factor, so it does not look like noise; it looks like a
-uniformly slower library. Verify before trusting a run:
-
-```bash
-pmset -g ps | head -2      # want 'AC Power'
-pmset -g | grep -i lowpowermode   # want 0
-```
-
 ## Core Style Pipeline
 
-Single-call throughput, three consecutive runs on an Apple M3 Pro with Node
-24.18.0 on AC power:
-
-| Operation                                                   |               ops/sec | Latency (mean) |
-| ----------------------------------------------------------- | --------------------: | -------------: |
-| `renderStyles` — 5 flat properties (cold)                   |       143,000–158,000 |     6.3–7.0 us |
-| `renderStyles` — state map with media/hover/modifier (cold) |         31,000–36,000 |       28–32 us |
-| `renderStyles` — OR state map across contexts (cold)        |         13,000–14,000 |       71–76 us |
-| `renderStyles` — same styles (cached)                       |  9,830,000–10,420,000 |       ~0.10 us |
-| `parseStateKey` — simple key like `:hover` (cold)           |   1,910,000–1,980,000 |       ~0.50 us |
-| `parseStateKey` — value modifier key (cold)                 |   1,120,000–1,160,000 |       ~0.90 us |
-| `parseStateKey` — complex OR/AND/NOT key (cold)             |       341,000–357,000 |     2.8–2.9 us |
-| `parseStateKey` — any key (cached)                          |  4,900,000–16,530,000 |    0.10–0.20 us |
-| `parseStyle` — value tokens like `2x 4x` (cold)             |       575,000–605,000 |       ~1.7 us |
-| `parseStyle` — color tokens (cold)                          |   1,160,000–1,240,000 |    0.80–0.90 us |
-| `parseStyle` — layered functions (cold)                     |       175,000–184,000 |     5.4–5.7 us |
-| `parseStyle` — any value (cached)                           | 29,500,000–30,750,000 |      ~0.03 us |
+The following numbers are single-call throughput measured on an Apple M1 Max
+with Node 22:
+
+| Operation                                                   |              ops/sec | Latency (mean) |
+| ----------------------------------------------------------- | -------------------: | -------------: |
+| `renderStyles` — 5 flat properties (cold)                   |              ~60,000 |         ~17 us |
+| `renderStyles` — state map with media/hover/modifier (cold) |              ~18,500 |         ~54 us |
+| `renderStyles` — same styles (cached)                       |           ~5,800,000 |       ~0.17 us |
+| `parseStateKey` — simple key like `:hover` (cold)           |             ~790,000 |        ~1.3 us |
+| `parseStateKey` — complex OR/AND/NOT key (cold)             |             ~140,000 |          ~7 us |
+| `parseStateKey` — any key (cached)                          | ~3,400,000–8,300,000 |    ~0.1–0.3 us |
+| `parseStyle` — value tokens like `2x 4x` (cold)             |             ~344,000 |        ~2.9 us |
+| `parseStyle` — color tokens (cold)                          |             ~567,000 |        ~1.8 us |
+| `parseStyle` — any value (cached)                           |          ~15,250,000 |       ~0.07 us |
 
 “Cold” cases use unique inputs to bypass the relevant caches. Cached cases
-reuse one input and measure the LRU hot path. Run-to-run spread on an idle
-machine was 1–7% for most cases, rising to 10–16% for the two `renderStyles`
-cold cases. These benchmarks do not include React, DOM work, stylesheet
-injection, style resolution, layout, or paint.
+reuse one input and measure the LRU hot path. Expect roughly ±10% between runs.
+These benchmarks do not include React, DOM work, stylesheet injection, style
+resolution, layout, or paint.
 
 The benchmark sources are colocated with the code they exercise:
 [`pipeline.bench.ts`](../src/pipeline/pipeline.bench.ts),
@@ -103,19 +86,19 @@ excludes layout, paint, and stylesheet matching. Every commit is wrapped in
 `flushSync`, keeping its synchronous reconciliation and commit inside the
 sample. This does not estimate React's concurrent scheduling latency.
 
-On an Apple M3 Pro with React 19.2.8 and Chromium 151, three consecutive runs
+On an Apple M3 Pro with React 19.2.4 and Chromium 151, three consecutive runs
 produced these ranges:
 
-| Work on 10,000 siblings             | Raw elements | `tasty({})` | Extra per wrapped element |
-| ----------------------------------- | -----------: | ----------: | ------------------------: |
-| Mount + remove                      |   4.2–4.3 ms |  9.2–9.7 ms |              0.50–0.54 us |
-| Rerender, same host props           |   1.2–1.3 ms |  6.3–6.5 ms |              0.51–0.52 us |
-| Rerender, change one host attribute |   2.5–2.7 ms | 11.2–11.6 ms |             0.86–0.91 us |
+| Work on 10,000 siblings             | Raw elements |  `tasty({})` | Extra per wrapped element |
+| ----------------------------------- | -----------: | -----------: | ------------------------: |
+| Mount + remove                      |   4.5–4.9 ms | 14.0–14.9 ms |              0.95–1.00 us |
+| Rerender, same host props           |   1.3–1.4 ms | 10.9–11.4 ms |              0.96–1.00 us |
+| Rerender, change one host attribute |   2.8–3.4 ms | 15.0–15.7 ms |              1.21–1.27 us |
 
 The useful result is the raw/Tasty time difference divided by 10,000, not the
 ratio between the two times. The ratio becomes large because the raw baseline
-is tiny. In this synthetic workload, an empty wrapper adds roughly 0.5 us per
-participating element, or ~0.9 us when React also changes a DOM attribute.
+is tiny. In this synthetic workload, an empty wrapper adds roughly 1 us per
+participating element, or 1.2–1.3 us when React also changes a DOM attribute.
 
 This is the floor Tasty consumes when it has no styling job. It is not a
 page-level score. Real trees include application components, effects, layout,
@@ -160,23 +143,17 @@ ranges:
 
 | Workload                                             | CSS already present |  Tasty runtime | Incremental Tasty cost |
 | ---------------------------------------------------- | ------------------: | -------------: | ---------------------: |
-| One new rule + immediate resolution, per transaction |          2.6–3.0 us | 102.8–107.0 us |         100.3–104.3 us |
-| 1,000 new rules + one resolution                     |        1.69–1.79 ms |   7.42–7.67 ms |           5.73–5.94 ms |
-| 1,000-rule workload, incremental cost per rule       |                   — |              — |             5.7–5.9 us |
+| One new rule + immediate resolution, per transaction |          2.8–3.3 us | 110.3–113.8 us |         107.3–111.0 us |
+| 1,000 new rules + one resolution                     |        1.86–2.06 ms |   9.01–9.98 ms |           7.13–7.92 ms |
+| 1,000-rule workload, incremental cost per rule       |                   — |              — |             7.1–7.9 us |
 
 Directly compared, injecting 1,000 rules before one resolution boundary cost
-about 55–59 times as much in total as injecting one rule and resolving it—not
-1,000 times as much. Its average incremental cost per rule was about 17–18
+about 66–71 times as much in total as injecting one rule and resolving it—not
+1,000 times as much. Its average incremental cost per rule was about 14–16
 times lower. This is the same Tasty generation and injection path in both cases;
 the group amortizes fixed transaction work and lets the browser resolve all the
 stylesheet writes together.
 
-The per-transaction single-rule figure is the one number here that engine work
-does not move: it is dominated by the browser's injection-to-resolution
-boundary, which is crossed once per rule regardless of how fast generation is.
-The 1,000-rule column, where Tasty's own generation dominates, is where engine
-changes show up.
-
 The subtraction is the meaningful result. It includes Tasty's cold style
 generation, cache and injector bookkeeping, rule insertion, and any additional
 style invalidation exposed by that workload's resolution boundary. It does not
@@ -230,25 +207,25 @@ if the hovered rule is not already there. That a style map's states all ship in
 one chunk on first render is the premise of this case; if the hovered rule
 arrived lazily, the first sample would be timing injection.
 
-On an Apple M3 Pro with React 19.2.8 and Chromium 151, three consecutive runs:
+On an Apple M1 Max with React 19.2.8 and Chromium 151, across several runs:
 
-| Workload                                             | Raw elements | Tasty mods |           Extra per unit |
-| ---------------------------------------------------- | -----------: | ---------: | -----------------------: |
-| 300 single-element mod toggles in a 100-element tree |   1.7–1.8 ms | 2.0–2.1 ms | 1.2–1.3 us / interaction |
-| 20 mount + unmount cycles of a 200-element subtree    |   5.2–5.4 ms | 8.3–8.6 ms |   0.77–0.81 us / element |
+| Workload                                             | Raw elements |   Tasty mods |           Extra per unit |
+| ---------------------------------------------------- | -----------: | -----------: | -----------------------: |
+| 300 single-element mod toggles in a 100-element tree |   2.1–2.5 ms |   2.7–3.1 ms | 1.6–2.1 us / interaction |
+| 20 mount + unmount cycles of a 200-element subtree    |   7.6–8.0 ms | 12.6–12.7 ms |   1.22–1.27 us / element |
 
 The absolute columns move several percent with machine load; the delta between
 the arms is the stable quantity, so read that rather than either column.
 
 Two things are worth reading out of this.
 
-A mod flip on an already-mounted element costs about 1.2 us. The CSS for both
+A mod flip on an already-mounted element costs about 2 us. The CSS for both
 states already exists — Tasty emits every state of a style map in one chunk on
 first render — so both arms perform the same commit, and what is left is
-Tasty's props and mod handling. That is the same order as the ~0.5 us empty
+Tasty's props and mod handling. That is the same order as the ~1 us empty
 wrapper measured above, which is most of where it comes from.
 
-Subtree churn is not about styling at all. Its ~0.8 us per element sits right
+Subtree churn is not about styling at all. Its ~1.25 us per element sits right
 on the empty-wrapper mount cost, because the styles are already cached:
 reopening a menu re-pays the React wrapper, not the style pipeline.
 
@@ -280,7 +257,7 @@ Two things about the payload decide whether this measures a deployment or a
 straw man, so both are enforced rather than assumed:
 
 - **Assets are served brotli-compressed**, the way a static host serves them.
-  The bundle is 51.5 KB on the wire and 180 KB decoded; putting the decoded
+  The bundle is 52.0 KB on the wire and 186 KB decoded; putting the decoded
   bytes on a 1.6 Mbps link would add ~700 ms and charge it to Tasty. The run
   reads `encodedBodySize` back out of resource timing and fails if what
   crossed the wire is not the compressed size the table reports.
@@ -289,48 +266,35 @@ straw man, so both are enforced rather than assumed:
   would be. Re-exporting the whole library adds ~4 KB brotli of code no page
   here calls.
 
-On an Apple M3 Pro with React 19.2.8 and Chromium 151, first contentful paint,
-median of three full runs of the matrix:
-
-| Link / CPU            | baseline | runtime | prewarm | Tasty's cost | noise |
-| --------------------- | -------: | ------: | ------: | -----------: | ----: |
-| No throttling, 1x     |    36 ms |   40 ms |   40 ms |        +4 ms |  0 ms |
-| Fast 4G, 1x           |   628 ms |  672 ms |  688 ms |       +44 ms | 20 ms |
-| Slow 4G, 1x           |  2044 ms | 2308 ms | 2308 ms |      +264 ms | 24 ms |
-| No throttling, 4x CPU |   112 ms |  144 ms |  144 ms |       +32 ms | 16 ms |
-| Fast 4G, 4x CPU       |   656 ms |  728 ms |  736 ms |       +72 ms |  4 ms |
-| Slow 4G, 4x CPU       |  2064 ms | 2360 ms | 2360 ms |      +296 ms |  8 ms |
-
-The `noise` column is not an estimate. The `baseline` page contains no Tasty at
-all, so its three samples should be identical; the spread they actually show is
-this cell's measurement error, and it applies to the other columns too.
+On an Apple M1 Max with React 19.2.8 and Chromium 151, first contentful paint:
 
-Read that column before any other. Only the Slow 4G rows carry a cost an order
-of magnitude above their own noise. The unthrottled 1x row (+4 ms) means "too
-small to measure this way", not "4 ms". And a single run is genuinely not
-enough here: taken alone, the first of these three runs put Fast 4G 1x at
-+72 ms, which the median over three corrects to +44 ms.
+| Link / CPU            | baseline | runtime | prewarm | Tasty's cost |
+| --------------------- | -------: | ------: | ------: | -----------: |
+| No throttling, 1x     |    40 ms |   52 ms |   52 ms |       +12 ms |
+| Fast 4G, 1x           |   624 ms |  680 ms |  676 ms |       +56 ms |
+| Slow 4G, 1x           |  2028 ms | 2304 ms | 2304 ms |      +276 ms |
+| No throttling, 4x CPU |   148 ms |  196 ms |  196 ms |       +48 ms |
+| Fast 4G, 4x CPU       |   684 ms |  784 ms |  788 ms |      +100 ms |
+| Slow 4G, 4x CPU       |  2096 ms | 2416 ms | 2408 ms |      +320 ms |
 
-For the same reason, `prewarm` landing above `runtime` in the Fast 4G 1x row is
-noise, not a cost — the two modes differ only in when the engine compiles, and
-that difference is measured in the phase table below, not in FCP.
+That is one full run of the matrix; a second moved every cell by a few percent.
 
 **The cost is the bundle, not the work.** On Slow 4G the extra transfer alone
-accounts for 263 ms of the 264 ms FCP delta — effectively all of it. Everything
-Tasty then *does* is small by comparison (median of three runs):
+accounts for 262 ms of the 276 ms FCP delta — nearly all of it. Everything
+Tasty then *does* is small by comparison:
 
 | Phase (Slow 4G, 1x)     | baseline | runtime | prewarm |
 | ----------------------- | -------: | ------: | ------: |
-| js+css transfer         |  1423 ms | 1686 ms | 1690 ms |
-| module compile (shared) |   3.5 ms |  3.3 ms |  3.0 ms |
-| tasty top-level execute |        — |  1.2 ms |  0.8 ms |
-| `configure()`           |        — |  0.6 ms |  0.4 ms |
-| prewarm                 |        — |       — |  3.3 ms |
-| render 1st component    |   3.0 ms |  7.3 ms |  1.9 ms |
-| render 49 more          |   1.3 ms |  5.2 ms |  3.8 ms |
+| js+css transfer         |  1420 ms | 1682 ms | 1681 ms |
+| module compile (shared) |   1.2 ms |  1.5 ms |  2.0 ms |
+| tasty top-level execute |        — |  1.2 ms |  0.9 ms |
+| `configure()`           |        — |  0.6 ms |  0.5 ms |
+| prewarm                 |        — |       — |  5.3 ms |
+| render 1st component    |   2.0 ms |  8.2 ms |  2.7 ms |
+| render 49 more          |   1.0 ms |  7.1 ms |  6.0 ms |
 
 Importing Tasty costs about 1 ms of top-level execution; `configure()` costs
-half of one. The rest of the CPU delta — about 10 ms for 50 components — is
+half of one. The rest of the CPU delta — about 13 ms for 50 components — is
 generation and injection, which is the cost the injection benchmark isolates.
 
 One asymmetry is worth naming: the control links a render-blocking stylesheet
@@ -340,21 +304,20 @@ delivery models, not a thumb on the scale, but it means the FCP delta is not
 purely "what Tasty costs to execute".
 
 **Prewarming moves the wake-up, it does not remove it.** The first styled render
-is ~5.4 ms more expensive than the ones after it, because that is when the
+is ~5 ms more expensive than the ones after it, because that is when the
 engine's deferred payload is actually compiled. A throwaway `computeStyles()`
-against a detached root pays it early: `render 1st` drops from 7.3 ms to
-1.9 ms. The prewarm itself costs 3.3 ms, so the work is moved rather than
-removed and FCP does not move. It is worth doing only when something else can
-overlap it, or when the first render is on a latency-critical path and the page
-has idle time before it.
+against a detached root pays it early: `render 1st` drops from 8.2 ms to
+2.7 ms. The prewarm itself costs 5.3 ms, so FCP does not move. It is worth
+doing only when something else can overlap it, or when the first render is on a
+latency-critical path and the page has idle time before it.
 
 **Retained heap.** After a forced collection, the runtime page holds about
-985 KB more than the control (2,605 KB vs 1,619 KB) for 50 components — the
+1,013 KB more than the control (2,632 KB vs 1,619 KB) for 50 components — the
 parser caches, the chunk cache, the injector's registry and the generated CSS.
 The control is not zero either; most of its 1.6 MB is React and the DOM.
 
 CPU throttling changes which line moves. At 4x, module compilation of the
-larger graph becomes visible (2.6 ms → 19 ms) where at 1x it is free: V8
+larger graph becomes visible (5.9 ms → 25 ms) where at 1x it is free: V8
 pre-parses at import and compiles lazily, so a slower CPU pays for code the
 faster one never fully compiled. Transfer numbers from the unthrottled cells
 are not worth reading — with no emulated link, resource timings are scheduling
@@ -378,8 +341,8 @@ blindly. They describe different paths:
 
 The cold-start measurement is the one that puts the rest in proportion. On a
 slow connection, nearly all of Tasty's page-load cost is transferring the
-library — 263 ms of a 264 ms delta — while the generation and injection the
-microbenchmarks obsess over is ~10 ms for 50 components. Bundle size is
+library — 262 ms of a 276 ms delta — while the generation and injection the
+microbenchmarks obsess over is ~13 ms for 50 components. Bundle size is
 therefore the lever with the largest effect on first paint, and the runtime
 levers matter for what happens after it.
 

package/docs/tasty/ssr.md

@@ -506,7 +506,7 @@ const stream = await runWithCollector(collector, () =>
 | `@tenphi/tasty/ssr/next-config`                                                                                                                                                            | Next.js config wrapper: shared, content-hashed global stylesheet                                                                                                                                                |
 | `@tenphi/tasty/ssr/astro`                                                                                                                                                                  | Astro: `tastyIntegration`, `tastyMiddleware`                                                                                                                                                                    |
 | `@tenphi/tasty/ssr/astro-client`                                                                                                                                                           | Astro: client-side cache hydration (auto-injected by integration, or import manually)                                                                                                                           |
-| `@tenphi/tasty/ssr/astro-middleware`<br />`@tenphi/tasty/ssr/astro-middleware-static`<br />`@tenphi/tasty/ssr/astro-middleware-extract`<br />`@tenphi/tasty/ssr/astro-middleware-extract-static` | Astro: the middleware entrypoints `tastyIntegration()` registers via `addMiddleware()`. Exported so Astro can resolve them by specifier; you should not import them. For manual setups use `tastyMiddleware()`. |
+| `@tenphi/tasty/ssr/astro-middleware`<br>`@tenphi/tasty/ssr/astro-middleware-static`<br>`@tenphi/tasty/ssr/astro-middleware-extract`<br>`@tenphi/tasty/ssr/astro-middleware-extract-static` | Astro: the middleware entrypoints `tastyIntegration()` registers via `addMiddleware()`. Exported so Astro can resolve them by specifier; you should not import them. For manual setups use `tastyMiddleware()`. |
 
 ### `ServerStyleCollector`
 

package/docs/tasty/styles.md

@@ -20,10 +20,9 @@ Use these instead of their raw CSS counterparts:
 |-----|------------|
 | `fill` | `backgroundColor`, `background` |
 | `image` | `backgroundImage` |
-| `padding` (with physical direction modifiers) | `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft` |
-| `margin` (with physical direction modifiers) | `marginTop`, `marginRight`, `marginBottom`, `marginLeft` |
-| Logical block/inline category styles (with `start`/`end` modifiers) | Native logical axis/edge declarations |
-| `width` / `blockSize` / `inlineSize` (with `min`/`max` modifiers) | Their separate min/max declarations when one state map is sufficient |
+| `padding` (with direction modifiers) | `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft` |
+| `margin` (with direction modifiers) | `marginTop`, `marginRight`, `marginBottom`, `marginLeft` |
+| `width` (with `min`/`max` modifiers) | `minWidth`, `maxWidth` |
 | `height` (with `min`/`max` modifiers) | `minHeight`, `maxHeight` |
 | `border` | `borderColor`, `borderWidth`, `borderStyle` |
 | `radius` | `borderRadius` |
@@ -126,7 +125,9 @@ A group that names *no* direction keeps plain CSS shorthand order, which is unam
 
 Later comma-separated groups override earlier groups for conflicting directions.
 
-Individual physical props `paddingTop`, `paddingRight`, `paddingBottom`, and `paddingLeft` are supported, but `padding` with modifiers is recommended. Use `blockPadding` or `inlinePadding` for an enhanced logical-axis shorthand; native declarations such as `paddingInlineStart` remain ordinary CSS properties. See [Logical properties](#logical-properties).
+Individual props `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingBlock`, `paddingInline` are supported but `padding` with modifiers is recommended.
+
+**Priority:** `padding` < `paddingBlock`/`paddingInline` < `paddingTop`/`paddingRight`/`paddingBottom`/`paddingLeft`
 
 ### `margin`
 
@@ -152,7 +153,9 @@ The [one-value-per-directional-group rule](#padding) from `padding` applies here
 
 Later comma-separated groups override earlier groups for conflicting directions.
 
-Individual physical props `marginTop`, `marginRight`, `marginBottom`, and `marginLeft` are supported, but `margin` with modifiers is recommended. Use `blockMargin` or `inlineMargin` for an enhanced logical-axis shorthand; native declarations such as `marginInlineStart` remain ordinary CSS properties. See [Logical properties](#logical-properties).
+Individual props `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginBlock`, `marginInline` are supported but `margin` with modifiers is recommended.
+
+**Priority:** `margin` < `marginBlock`/`marginInline` < `marginTop`/`marginRight`/`marginBottom`/`marginLeft`
 
 ### `width`
 
@@ -231,44 +234,9 @@ second to every side they span.
 
 Later comma-separated groups override earlier groups for conflicting directions.
 
-Individual physical props `top`, `right`, `bottom`, and `left` are supported. When only those props are used (without `inset`), individual CSS properties are output for correct cascade behavior with state overrides. Use `blockInset` or `inlineInset` for logical axes; native declarations such as `insetInlineStart` remain ordinary CSS properties.
-
-### Logical properties
-
-Tasty provides one enhanced handler for each logical axis/category pair. Each handler emits native logical CSS instead of converting values to `top`, `right`, `bottom`, `left`, `width`, or `height`. The browser therefore resolves `block`, `inline`, `start`, and `end` from the element's `writingMode` and `direction`.
-
-```jsx
-styles: {
-  direction: 'rtl',
-  inlinePadding: '1x start, 2x end',
-  inlineBorder: '1bw solid #accent start',
-  blockInset: '0 end',
-}
-```
-
-An axis handler accepts one value for both edges or two values in logical **start/end** order. Use `start` and `end` modifiers, with comma-separated groups for different edge values. Unspecified padding, margin, and scroll edges reset to `0`; unspecified inset edges reset to `auto`. The `longhand` modifier emits the two native start/end declarations.
-
-| Category | Block axis | Inline axis |
-|----------|------------|-------------|
-| Size | `blockSize` | `inlineSize` |
-| Padding | `blockPadding` | `inlinePadding` |
-| Margin | `blockMargin` | `inlineMargin` |
-| Inset | `blockInset` | `inlineInset` |
-| Scroll margin | `blockScrollMargin` | `inlineScrollMargin` |
-| Scroll padding | `blockScrollPadding` | `inlineScrollPadding` |
-| Border | `blockBorder` | `inlineBorder` |
-
-`blockSize` and `inlineSize` use the same enhanced one/two/three-value and `min`/`max`/`fixed` syntax as `width`. Separate `minBlockSize`, `maxBlockSize`, `minInlineSize`, and `maxInlineSize` declarations override constraints produced by that shorthand.
-
-`blockBorder` and `inlineBorder` use the same width/style/color parsing and defaults as `border`, including `1bw`, color tokens, and `true`. Logical padding, margin, scroll margin, and scroll padding default to `1x` for `true`; logical inset defaults to `0`.
-
-Native logical CSS names—such as `paddingInlineStart`, `borderBlockColor`, and `borderStartStartRadius`—remain available as ordinary CSS properties. They support Tasty tokens and units through the normal value parser, but do not get category defaults or directional shorthand behavior.
-
-The physical `scrollMargin` and `scrollPadding` shorthands support the same values and physical direction modifiers as `padding`. Their logical counterparts stay in separate axis handlers.
-
-`writingMode`, `direction`, and `textOrientation` are standard CSS control properties. They use Tasty's normal value parser and need no special handler.
+Individual props `top`, `right`, `bottom`, `left`, `insetBlock`, `insetInline` are supported. When only individual direction props are used (without `inset`), individual CSS properties are output for correct cascade behavior with state overrides.
 
-Avoid setting physical and logical declarations that resolve to the same edge in one style block. Tasty keeps them separate and lets the native CSS cascade resolve the overlap, whose result also depends on writing mode and direction.
+**Priority:** `inset` < `insetBlock`/`insetInline` < `top`/`right`/`bottom`/`left`
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-2ef7bcb",
+  "version": "0.0.0-canary-daad5bf",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -97,7 +97,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "2.0.0",
-    "@tenphi/tasty": "^3.9.1",
+    "@tenphi/tasty": "^3.7.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",

package/dist/utils/dotize.js

@@ -1,50 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2ef7bcb | Cube Dev Team */
-//#region src/utils/dotize.ts
-/**
-* Flattens a nested object into dot paths: `{ a: { b: 1 } }` becomes
-* `{ 'a.b': 1 }`. Numeric keys use bracket notation — `{ a: { 0: 'x' } }`
-* becomes `{ 'a[0]': 'x' }`.
-*
-* `Form` uses it so `setFieldsValue({ user: { name: 'A' } })` also reaches a
-* field registered as `name="user.name"`.
-*
-* Only plain objects are walked into: arrays, class instances and everything
-* else stay as leaf values under their own path.
-*
-* Ported from `@tenphi/tasty`, which exported `dotize` until v3.8 and then
-* dropped it. Only `convert` was ever used here, so the inverse (`backward`)
-* is not carried over.
-*/
-function isPlainObject(value) {
-	if (typeof value !== "object" || value === null) return false;
-	return Object.getPrototypeOf(value) === Object.prototype;
-}
-/** `parseInt` semantics on purpose: an index arrives as a string key. */
-function isIndexLike(key) {
-	return !isNaN(parseInt(key));
-}
-function dotName(field, prefix) {
-	return prefix ? `${prefix}.${field}` : field;
-}
-function bracketName(field, prefix) {
-	return `${prefix ?? ""}[${field}]`;
-}
-function dotizeConvert(obj, prefix = "") {
-	if (!isPlainObject(obj)) return prefix ? { [prefix]: obj } : obj;
-	const result = {};
-	(function recurse(source, currentPrefix) {
-		for (const field in source) {
-			const value = source[field];
-			if (isPlainObject(value)) {
-				const name = dotName(field, currentPrefix);
-				if (Object.keys(value).length > 0) recurse(value, name);
-				else result[name] = value;
-			} else result[isIndexLike(field) ? bracketName(field, currentPrefix) : dotName(field, currentPrefix)] = value;
-		}
-	})(obj, prefix || void 0);
-	return result;
-}
-
-//#endregion
-export { dotizeConvert };
-//# sourceMappingURL=dotize.js.map

package/dist/utils/dotize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dotize.js","names":[],"sources":["../../src/utils/dotize.ts"],"sourcesContent":["/**\n * Flattens a nested object into dot paths: `{ a: { b: 1 } }` becomes\n * `{ 'a.b': 1 }`. Numeric keys use bracket notation — `{ a: { 0: 'x' } }`\n * becomes `{ 'a[0]': 'x' }`.\n *\n * `Form` uses it so `setFieldsValue({ user: { name: 'A' } })` also reaches a\n * field registered as `name=\"user.name\"`.\n *\n * Only plain objects are walked into: arrays, class instances and everything\n * else stay as leaf values under their own path.\n *\n * Ported from `@tenphi/tasty`, which exported `dotize` until v3.8 and then\n * dropped it. Only `convert` was ever used here, so the inverse (`backward`)\n * is not carried over.\n */\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n  if (typeof value !== 'object' || value === null) return false;\n\n  return Object.getPrototypeOf(value) === Object.prototype;\n}\n\n/** `parseInt` semantics on purpose: an index arrives as a string key. */\nfunction isIndexLike(key: string): boolean {\n  return !isNaN(parseInt(key));\n}\n\nfunction dotName(field: string, prefix?: string): string {\n  return prefix ? `${prefix}.${field}` : field;\n}\n\nfunction bracketName(field: string, prefix?: string): string {\n  return `${prefix ?? ''}[${field}]`;\n}\n\nexport function dotizeConvert(obj: unknown, prefix = ''): any {\n  if (!isPlainObject(obj)) {\n    return prefix ? { [prefix]: obj } : obj;\n  }\n\n  const result: Record<string, unknown> = {};\n\n  (function recurse(source: Record<string, unknown>, currentPrefix?: string) {\n    for (const field in source) {\n      const value = source[field];\n\n      if (isPlainObject(value)) {\n        // Nested objects keep dot notation even under a numeric key, and an\n        // empty one has nothing to flatten into, so it stays a leaf.\n        const name = dotName(field, currentPrefix);\n\n        if (Object.keys(value).length > 0) {\n          recurse(value, name);\n        } else {\n          result[name] = value;\n        }\n      } else {\n        result[\n          isIndexLike(field)\n            ? bracketName(field, currentPrefix)\n            : dotName(field, currentPrefix)\n        ] = value;\n      }\n    }\n  })(obj, prefix || undefined);\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,SAAS,cAAc,OAAkD;AACvE,KAAI,OAAO,UAAU,YAAY,UAAU,KAAM,QAAO;AAExD,QAAO,OAAO,eAAe,MAAM,KAAK,OAAO;;;AAIjD,SAAS,YAAY,KAAsB;AACzC,QAAO,CAAC,MAAM,SAAS,IAAI,CAAC;;AAG9B,SAAS,QAAQ,OAAe,QAAyB;AACvD,QAAO,SAAS,GAAG,OAAO,GAAG,UAAU;;AAGzC,SAAS,YAAY,OAAe,QAAyB;AAC3D,QAAO,GAAG,UAAU,GAAG,GAAG,MAAM;;AAGlC,SAAgB,cAAc,KAAc,SAAS,IAAS;AAC5D,KAAI,CAAC,cAAc,IAAI,CACrB,QAAO,SAAS,GAAG,SAAS,KAAK,GAAG;CAGtC,MAAM,SAAkC,EAAE;AAE1C,EAAC,SAAS,QAAQ,QAAiC,eAAwB;AACzE,OAAK,MAAM,SAAS,QAAQ;GAC1B,MAAM,QAAQ,OAAO;AAErB,OAAI,cAAc,MAAM,EAAE;IAGxB,MAAM,OAAO,QAAQ,OAAO,cAAc;AAE1C,QAAI,OAAO,KAAK,MAAM,CAAC,SAAS,EAC9B,SAAQ,OAAO,KAAK;QAEpB,QAAO,QAAQ;SAGjB,QACE,YAAY,MAAM,GACd,YAAY,OAAO,cAAc,GACjC,QAAQ,OAAO,cAAc,IAC/B;;IAGP,KAAK,UAAU,OAAU;AAE5B,QAAO"}