@cube-dev/ui-kit 0.0.0-canary-05c61de → 0.0.0-canary-5b75dce

package/docs/components/content/Layout.md

@@ -266,6 +266,7 @@ Collapsible side panel with resizing, transitions, and multiple rendering modes.
 - **`onSizeChange`** `(size: number) => void` — Size change callback
 - **`sizeStorageKey`** `string` — localStorage key for persisting size
 - **`hasTransition`** `boolean` (default: `false`) — Enable slide animation
+- **`hideOnClose`** `boolean` (default: `false`) — Hide the closed panel instead of unmounting its content, so the content keeps its state (an unsent draft, scroll position, a request in flight) until the panel reopens. The hidden panel takes no space, no focus and no resize handle. The content mounts once, even when the panel starts closed, so mount effects and a native `autoFocus` do not run again on reopen. Content that mounts while closed is hidden: `autoFocus` does nothing and measurements read zero until the panel opens. Not used in dialog mode
 - **`isDismissable`** `boolean` (default: `true`) — Allow dismissing overlay/dialog by click or Escape, and an overlay panel by focus moving into the main content
 - **`overlayStyles`** `Styles` — Styles for the overlay backdrop in overlay mode
 - **`isDialogOpen`** `boolean` — Controlled dialog state (mode="dialog")
@@ -290,6 +291,7 @@ Collapsible side panel with resizing, transitions, and multiple rendering modes.
 - `horizontal` `boolean` — Left or right panel
 - `has-transition` `boolean` — Transition enabled
 - `offscreen` `boolean` — Panel is collapsed
+- `hidden` `boolean` — Closed panel kept mounted by `hideOnClose`
 
 ---
 
@@ -591,6 +593,51 @@ function PanelWithTransitionExample() {
 }
 ```
 
+### Keep Panel Content Mounted
+
+With `hideOnClose`, a closed panel is hidden instead of unmounted, so an unsent message or a running request survives closing it. The content does not remount on reopen, so move focus yourself when the panel opens, without scrolling: the panel enters from offscreen. Menus and popovers opened from the panel stay open when code closes it, so close them first.
+
+```jsx
+function ChatPanelExample() {
+  const [isOpen, setIsOpen] = useState(false);
+  const messageRef = useRef(null);
+
+  useEffect(() => {
+    if (isOpen) messageRef.current?.focus({ preventScroll: true });
+  }, [isOpen]);
+
+  return (
+    <Layout height="100dvh">
+      <Layout.Panel
+        hideOnClose
+        hasTransition
+        side="right"
+        size={320}
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+      >
+        <Layout.PanelHeader
+          isClosable
+          title="Chat"
+          onClose={() => setIsOpen(false)}
+        />
+        <Layout.Content>
+          <TextArea label="Message" inputRef={messageRef} />
+        </Layout.Content>
+      </Layout.Panel>
+      <Layout.Toolbar>
+        <Button onPress={() => setIsOpen(!isOpen)}>
+          {isOpen ? 'Close' : 'Open'} Chat
+        </Button>
+      </Layout.Toolbar>
+      <Layout.Content>
+        <Text>Main content area</Text>
+      </Layout.Content>
+    </Layout>
+  );
+}
+```
+
 ### Multiple Panels
 
 ```jsx

package/docs/tasty/configuration.md

@@ -631,7 +631,7 @@ configure({
 });
 ```
 
-Each key is a CSS selector (a list such as `'.uni-checkbox, uni-checkbox'` styles every item), and each value is a Tasty `Styles` object supporting the full style syntax including style properties, tokens, state maps, `@keyframes`, and selector-based sub-styling (e.g. `$: '> .app'` for elements outside React scope). Global styles are injected alongside `:root` tokens when the first style is rendered.
+Each key is a CSS selector, and each value is a Tasty `Styles` object supporting the full style syntax including style properties, tokens, state maps, and selector-based sub-styling (e.g. `$: '> .app'` for elements outside React scope). Global styles are injected alongside `:root` tokens when the first style is rendered.
 
 Global styles are automatically emitted in all delivery modes: client rendering, server rendering, and build-time extraction with the Babel plugin. Plugins can also provide `globalStyles`; they are merged per selector with config global styles (config wins on conflict).
 

package/docs/tasty/dsl.md

@@ -865,8 +865,6 @@ const Pulse = tasty({
 });
 ```
 
-Keyframes names are case-sensitive and keep their authored case in `animation` and `animationName` (`fadeIn`, not `fadein`), so they match `@keyframes` defined here, in `configure({ keyframes })`, or in plain CSS. Everything else in the value — durations, timing functions, keywords — is parsed as usual.
-
 ---
 
 ## Properties (`@property`)

package/docs/tasty/pipeline.md

@@ -2,7 +2,7 @@
 
 This document describes the style rendering pipeline that transforms style objects into CSS rules. The pipeline ensures that each style value is applied to exactly one condition through exclusive condition building, boolean simplification, and intelligent CSS generation.
 
-**Implementation:** [`src/pipeline/`](https://github.com/tenphi/tasty/tree/main/src/pipeline) — TypeScript file names below are relative to that directory.
+**Implementation:** [`src/pipeline/`](../src/pipeline/) — TypeScript file names below are relative to that directory.
 
 ## Overview
 
@@ -522,7 +522,7 @@ Converts condition trees into actual CSS selectors and at-rules.
    - the flat root modifiers + pseudos and the root element's `:is()`/`:not()` groups are combined into one `:where(...)` (`buildSelectorFromVariant`);
    - the sub-element (`@own`) groups are wrapped in a **separate** `:where(...)` so the sub-element's structural `[data-element="X"]` specificity is preserved while its states are zeroed;
    - `@parent` ancestors (`parentGroupsToCSS`) become `:where(... *)` / `:where(:not(... *))`;
-   - the `@root` context prefix (`rootStateToPrefix`) becomes `:where(:root...)` (zeroing the `:root` pseudo too). When a direct selector can only match the root itself (`:root`, `html`, `:where(:root)`), the state segment joins it instead — `:root:where([data-schema="dark"])` — since an ancestor prefix would ask for a `:root` inside the root.
+   - the `@root` context prefix (`rootGroupsToCSS`) becomes `:where(:root...)` (zeroing the `:root` pseudo too).
 
    The only specificity anchors that remain are the doubled component class (`.tXX.tXX`, added by the injector) and sub-element `[data-element]` attributes. Because Stage 2b already makes ordinary rules mutually exclusive, zeroing specificity never changes *which* rule matches — it only makes additive layering (`_` fallback floor, `@starting-style`) resolve deterministically by source order (see the post-pass). Canonical sorting/dedup/subsumption still run first; `:where()` is only the final wrapper, and both output paths (injector and direct-selector / SSR) consume the same wrapped fragments.
 

package/docs/tasty/react-api.md

@@ -447,13 +447,6 @@ function ThemeStyles() {
 }
 ```
 
-The selector can be a list (`'.uni-checkbox, uni-checkbox'`) — every item gets
-the states and sub-elements, with no `:is()` wrapping needed. Root states
-(`@root(...)`) on a selector that is the root itself (`:root`, `html`) apply to
-that element. Local `@keyframes` are injected with the rules, under the same
-resolved names `tasty()` components use, and `@starting` states emit
-`@starting-style`.
-
 A slot — the `id`, or the selector when no `id` is given — holds exactly one
 injection **per `root`**. So:
 

package/docs/tasty/runtime-benchmarks.md

@@ -80,9 +80,9 @@ cold cases. 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`](https://github.com/tenphi/tasty/blob/main/src/pipeline/pipeline.bench.ts),
-[`parseStateKey.bench.ts`](https://github.com/tenphi/tasty/blob/main/src/pipeline/parseStateKey.bench.ts), and the
-parser benchmark files under [`src/parser`](https://github.com/tenphi/tasty/tree/main/src/parser).
+[`pipeline.bench.ts`](../src/pipeline/pipeline.bench.ts),
+[`parseStateKey.bench.ts`](../src/pipeline/parseStateKey.bench.ts), and the
+parser benchmark files under [`src/parser`](../src/parser).
 
 ## Empty Wrapper Overhead
 
@@ -91,7 +91,7 @@ Skipping the style pipeline does not make a `tasty()` component free. Even
 tracks another fiber, and Tasty still processes and forwards the element's
 props.
 
-[`tasty-overhead.bench.tsx`](https://github.com/tenphi/tasty/blob/main/src/tasty-overhead.bench.tsx) compares 10,000
+[`tasty-overhead.bench.tsx`](../src/tasty-overhead.bench.tsx) compares 10,000
 raw `<div className>` siblings with 10,000 instances of one module-scoped
 `tasty({})` component. Both receive the same props, and the benchmark fails if
 they do not produce equivalent DOM.
@@ -125,7 +125,7 @@ snapshot experiment with controlled garbage collection.
 
 ## Cold Generation and Injection
 
-[`tasty-injection.bench.ts`](https://github.com/tenphi/tasty/blob/main/src/tasty-injection.bench.ts) measures the extra
+[`tasty-injection.bench.ts`](../src/tasty-injection.bench.ts) measures the extra
 work when Tasty must generate and inject CSS that an otherwise equivalent page
 already has. It does not compare different stylesheet insertion techniques.
 
@@ -201,7 +201,7 @@ and dialogs open. Both paths go through the state-map and ref-counting
 machinery rather than the parser, so a regression in them is invisible to every
 other benchmark here.
 
-[`tasty-interaction.bench.tsx`](https://github.com/tenphi/tasty/blob/main/src/tasty-interaction.bench.tsx) pairs each
+[`tasty-interaction.bench.tsx`](../src/tasty-interaction.bench.tsx) pairs each
 case with a raw-DOM equivalent driven by a hand-written stylesheet that
 produces the same computed color and background in both states. The benchmark
 fails if either arm resolves to anything else, so an arm that quietly rendered
@@ -255,7 +255,7 @@ reopening a menu re-pays the React wrapper, not the style pipeline.
 ## Page-Load Cold Start
 
 Every benchmark above deliberately excludes the network, module compilation and
-the first render. [`scripts/cold-start`](https://github.com/tenphi/tasty/tree/main/scripts/cold-start) measures exactly
+the first render. [`scripts/cold-start`](../scripts/cold-start) measures exactly
 those: what a visitor waits for between requesting a page and seeing styled
 content, in a real Chromium under CDP network and CPU throttling.
 

package/docs/tasty/tasty-static.md

@@ -105,8 +105,6 @@ tastyStatic('body', {
 });
 ```
 
-The selector can be a list (`'.uni-checkbox, uni-checkbox'`): every item gets the states and sub-elements. Local `@keyframes` and `@starting` states work as in `tastyStatic(styles)`.
-
 ---
 
 ## StaticStyle Object
@@ -301,37 +299,6 @@ public/tasty.css
 
 ---
 
-## Programmatic API
-
-`@tenphi/tasty/zero` turns styles into CSS in Node without Babel or React — for build scripts, or CSS shipped to other frameworks:
-
-```ts
-import {
-  configure,
-  extractStylesForSelector,
-  extractStylesWithChunks,
-} from '@tenphi/tasty/zero';
-
-configure({
-  units: { u: 'var(--unit)' },
-  states: { '@dark': '@root(schema=dark)' },
-});
-
-extractStylesForSelector('.card', { padding: '2u', fill: '#surface' }).css;
-// → '.card { padding: calc(2 * var(--unit)); background-color: … }'
-
-extractStylesWithChunks({ display: 'flex', gap: '1u' });
-// → [{ className: 'ts…', css: '.ts….ts… { … }' }]
-```
-
-`configure()` takes the same options as the Babel plugin's `config` (see [Plugin Options](#plugin-options)) and replaces the previous configuration on each call; `resetConfig()` returns to the defaults. Options that shape the extracted rules apply — `states`, `units`, parse `functions`, `handlers`, `replaceTokens`, `recipes`, `plugins`, `namePrefix`. Definitions that become at-rules or global CSS of their own are not emitted: `tokens`, `globalStyles`, `fontFaces`, `counterStyles`, `properties` and `$$` `@function` definitions. Render tokens and global styles with `extractStylesForSelector(':root', tokens)` and `extractStylesForSelector(selector, styles)`.
-
-The configuration is process-wide and shared with the Babel plugin and the runtime `configure()` from `@tenphi/tasty`. The extractors re-apply their own configuration when the Babel plugin replaced it, but not after a runtime `configure()` — don't mix the runtime and build-time configuration in one process.
-
-`extractStylesForSelector()` output starts with the `@keyframes` its rules animate — local `@keyframes` and configured `keyframes` — under hashed names the `animation` declarations are rewritten to. `extractStylesWithChunks()` returns class rules only.
-
----
-
 ## Vite Integration
 
 ```typescript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-05c61de",
+  "version": "0.0.0-canary-5b75dce",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -111,7 +111,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "2.0.0",
-    "@tenphi/tasty": "3.10.0",
+    "@tenphi/tasty": "3.9.9",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",