@cube-dev/ui-kit 0.0.0-canary-0d47ea4 → 0.0.0-canary-73c0d53

package/dist/providers/TrackingProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { createContext, useContext, useMemo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/providers/navigationAdapter.default.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/providers/navigationAdapter.default.ts
 /**
 * Converts a Path object to a string URL

package/dist/tokens/base.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/tokens/base.ts
 /**
 * Base design system tokens.

package/dist/tokens/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/tokens/colors.ts
 const PINK_HUE = 5;
 const PURPLE_HUE = 280.3;

package/dist/tokens/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { BASE_TOKENS } from "./base.js";
 import { COLOR_TOKENS } from "./colors.js";
 import { LAYOUT_TOKENS } from "./layout.js";

package/dist/tokens/layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/tokens/layout.ts
 /**
 * Layout-related tokens for common UI dimensions.

package/dist/tokens/shadows.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/tokens/shadows.ts
 /**
 * Shadow tokens using tasty shorthand syntax.

package/dist/tokens/sizes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/tokens/sizes.ts
 /**
 * Component size values in pixels.

package/dist/tokens/spacing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/tokens/spacing.ts
 /**
 * Spacing tokens using tasty multiplier syntax.

package/dist/tokens/typography.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/tokens/typography.ts
 /**
 * Typography presets for headings, text, and special styles.

package/dist/utils/ResizeSensor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/ResizeSensor.ts
 /**
 * Iterate over each of the provided element(s).

package/dist/utils/is-dev-env.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 function isDevEnv() {
 	if (typeof window !== "undefined" && window.localStorage) try {

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | 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-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

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

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | 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-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | 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-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d47ea4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-73c0d53 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-0d47ea4";
+const VERSION = "0.0.0-canary-73c0d53";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	window.CubeUIKit = window.CubeUIKit || { version };

package/docs/tasty/injector.md

@@ -207,13 +207,15 @@ import { configure } from '@tenphi/tasty';
 configure({
   devMode: true,                     // Enable development features (auto-detected)
   maxRulesPerSheet: 8192,            // Cap rules per stylesheet (default: 8192)
-  unusedStylesThreshold: 500,        // Trigger cleanup threshold (CSS rules only)
-  bulkCleanupDelay: 5000,            // Cleanup delay (ms) - ignored if idleCleanup is true
-  idleCleanup: true,                 // Use requestIdleCallback for cleanup
-  bulkCleanupBatchRatio: 0.5,        // Clean up oldest 50% per batch
-  unusedStylesMinAgeMs: 10000,       // Minimum age before cleanup (ms)
   forceTextInjection: false,         // Force textContent insertion (auto-detected for tests)
   nonce: 'csp-nonce',                // CSP nonce for security
+  gc: {                              // Garbage collection for unused styles
+    auto: true,                      // Enable automatic background sweep
+    baseMaxAge: 60000,               // Base TTL (ms) for single-use styles
+    cooldown: 30000,                 // Minimum time between GC runs
+    autoInterval: 300000,            // Background sweep interval (ms)
+    cacheCapacity: 5000,             // Hard cap on cached styles (optional)
+  },
   states: {                          // Global predefined states for advanced state mapping
     '@mobile': '@media(w < 768px)',
     '@dark': '@root(schema=dark)',
@@ -229,7 +231,9 @@ configure({
 - Most options have sensible defaults and auto-detection
 - `configure()` is optional - the injector works with defaults
 - **Configuration is locked after styles are generated** - calling `configure()` after first render will emit a warning and be ignored
-- `unusedStylesMinAgeMs`: Minimum time (ms) a style must remain unused before being eligible for cleanup. Helps prevent removal of styles that might be quickly reactivated.
+- `gc.baseMaxAge`: Base TTL for a style rendered only once. Popular styles get longer TTLs via logarithmic scaling (`baseMaxAge * log2(hitCount + 1)`).
+- `gc.auto`: When true, runs a periodic background sweep at `gc.autoInterval` intervals using `requestIdleCallback`.
+- `gc.cooldown`: Minimum time between GC runs to avoid thrashing.
 
 ---
 
@@ -291,21 +295,31 @@ comp3.dispose(); // refCount: 1 → 0, eligible for bulk cleanup
 // Next inject() with same styles will increment refCount and reuse immediately
 ```
 
-### Smart Cleanup System
+### Garbage Collection
 
 ```typescript
-import { configure } from '@tenphi/tasty';
+import { configure, gc, maybeGC } from '@tenphi/tasty';
 
-// CSS rules: Not immediately deleted, marked for bulk cleanup (refCount = 0)
 // Keyframes: Disposed immediately when refCount = 0 (safer for global scope)
+// CSS rules: Tracked by popularity and cleaned up via gc()
 
 configure({
-  unusedStylesThreshold: 100,    // Cleanup when 100+ unused CSS rules
-  bulkCleanupBatchRatio: 0.3,    // Remove oldest 30% each time
+  gc: {
+    auto: true,          // Enable background sweep
+    baseMaxAge: 60000,   // 1-minute base TTL
+    cooldown: 30000,     // 30s between runs
+  },
 });
 
+// Manual GC (synchronous, returns number of swept styles):
+gc();
+
+// Event-driven GC with cooldown (e.g. on route change):
+maybeGC();
+
 // Benefits:
-// - CSS rules: Batch cleanup prevents DOM manipulation overhead  
+// - Popularity-aware: frequently used styles survive longer
+// - DOM-safe: styles currently in the DOM are never evicted
 // - Keyframes: Immediate cleanup prevents global namespace pollution
 // - Unused styles can be instantly reactivated (just increment refCount)
 ```
@@ -462,13 +476,14 @@ injectGlobal([
   { selector: '.container', declarations: 'max-width: 1200px;' }
 ]);
 
-// ✅ Configure appropriate thresholds for your app (BEFORE first render!)
+// ✅ Configure GC for your app (BEFORE first render!)
 import { configure } from '@tenphi/tasty';
 
 configure({
-  unusedStylesThreshold: 500,      // Default threshold (adjust based on app size)
-  bulkCleanupBatchRatio: 0.5,      // Default: clean oldest 50% per batch
-  unusedStylesMinAgeMs: 10000,     // Wait 10s before cleanup eligibility
+  gc: {
+    auto: true,            // Enable background sweep for long-lived pages
+    baseMaxAge: 60000,     // Default base TTL (adjust based on app size)
+  },
 });
 ```
 
@@ -480,8 +495,8 @@ configure({
 // 1. Hash-based deduplication - same CSS = same className
 // 2. Reference counting - styles stay alive while in use (refCount > 0)
 // 3. Immediate keyframes cleanup - disposed instantly when refCount = 0
-// 4. Batch CSS cleanup - unused CSS rules (refCount = 0) cleaned in batches
-// 5. Non-stacking cleanups - prevents timeout accumulation
+// 4. Popularity-aware GC - unused CSS rules are scored by hitCount and age
+// 5. DOM safety guard - styles visible in the DOM are never evicted
 
 // Manual cleanup is rarely needed but available:
 cleanup(); // Force immediate cleanup of all unused CSS rules (refCount = 0)

package/docs/tasty/ssr.md

@@ -82,15 +82,15 @@ That's it. All `tasty()` components inside the tree automatically get SSR suppor
 
 ### How it works
 
-- `TastyRegistry` is a `'use client'` component, but Next.js still server-renders it on initial page load.
-- During SSR, `computeStyles()` finds the collector (registered globally by `TastyRegistry`) and collects CSS rules into it.
-- `TastyRegistry` uses `useServerInsertedHTML` to flush collected CSS into the HTML stream as `<style data-tasty-ssr>` tags. This is fully streaming-compatible -- styles are injected alongside each Suspense boundary as it resolves.
+- `TastyRegistry` is a `'use client'` component, but Next.js still server-renders it on initial page load. The `'use client'` boundary is required solely to access `useServerInsertedHTML` — **not** because `tasty()` components need the client.
+- During SSR, `TastyRegistry` creates a `ServerStyleCollector` and registers it via a module-level global getter. All style computation — whether from `tasty()` components, `computeStyles()`, `useStyles()`, or other hooks like `useGlobalStyles()` — discovers the collector through this single global getter. No React context is involved.
+- `TastyRegistry` uses `useServerInsertedHTML` to flush collected CSS into the HTML stream as `<style data-tasty-ssr>` tags. This is fully streaming-compatible — styles are injected alongside each Suspense boundary as it resolves.
 - A companion `<script>` tag transfers the `cacheKey → className` mapping to the client.
 - When the module loads on the client, `hydrateTastyCache()` runs automatically and pre-populates the injector cache. During hydration, `computeStyles()` hits the cache and skips the entire pipeline.
 
 ### Using tasty() in Server Components
 
-`tasty()` components are hook-free and do not require `'use client'`. They can be used directly in React Server Components. Dynamic `styleProps` like `<Grid flow="column">` work normally in server components. During SSR, the `TastyRegistry` registers its collector globally so that `computeStyles()` can discover it without React context.
+`tasty()` components are hook-free and do not require `'use client'`. They can be used directly in React Server Components. Dynamic `styleProps` like `<Grid flow="column">` work normally in server components. During SSR, `computeStyles()` discovers the collector via the same global getter registered by `TastyRegistry` — no React context or client boundary needed for this path.
 
 ### Options
 
@@ -197,12 +197,12 @@ Same as Next.js -- call `configure({ nonce: '...' })` before any rendering happe
 
 ## Generic Framework Integration
 
-Any React-based framework can integrate using the core SSR API:
+Any React-based framework can integrate using `runWithCollector`, which binds a `ServerStyleCollector` to the current async context via `AsyncLocalStorage`. All `computeStyles()` and hook calls within the render automatically discover the collector.
 
 ```tsx
 import {
   ServerStyleCollector,
-  TastySSRContext,
+  runWithCollector,
   hydrateTastyCache,
 } from '@tenphi/tasty/ssr';
 import { renderToString } from 'react-dom/server';
@@ -212,10 +212,8 @@ import { hydrateRoot } from 'react-dom/client';
 
 const collector = new ServerStyleCollector();
 
-const html = renderToString(
-  <TastySSRContext.Provider value={collector}>
-    <App />
-  </TastySSRContext.Provider>
+const html = await runWithCollector(collector, () =>
+  renderToString(<App />)
 );
 
 const css = collector.getCSS();
@@ -251,11 +249,8 @@ For streaming with `renderToPipeableStream`, use `flushCSS()` instead of `getCSS
 ```tsx
 const collector = new ServerStyleCollector();
 
-const stream = renderToPipeableStream(
-  <TastySSRContext.Provider value={collector}>
-    <App />
-  </TastySSRContext.Provider>,
-  {
+const stream = await runWithCollector(collector, () =>
+  renderToPipeableStream(<App />, {
     onShellReady() {
       // Flush styles collected so far
       const css = collector.flushCSS();
@@ -270,31 +265,10 @@ const stream = renderToPipeableStream(
       const state = collector.getCacheState();
       res.write(`<script data-tasty-cache type="application/json">${JSON.stringify(state)}</script>`);
     },
-  }
+  })
 );
 ```
 
-### AsyncLocalStorage (no React context)
-
-If your framework doesn't support wrapping the React tree with a provider, use `runWithCollector`:
-
-```tsx
-import {
-  ServerStyleCollector,
-  runWithCollector,
-  hydrateTastyCache,
-} from '@tenphi/tasty/ssr';
-
-const collector = new ServerStyleCollector();
-
-const html = await runWithCollector(collector, () =>
-  renderToString(<App />)
-);
-
-const css = collector.getCSS();
-// ... inject into HTML as above
-```
-
 ---
 
 ## API Reference
@@ -303,7 +277,7 @@ const css = collector.getCSS();
 
 | Import path | Description |
 |---|---|
-| `@tenphi/tasty/ssr` | Core SSR API: `ServerStyleCollector`, `TastySSRContext`, `runWithCollector`, `hydrateTastyCache` |
+| `@tenphi/tasty/ssr` | Core SSR API: `ServerStyleCollector`, `runWithCollector`, `hydrateTastyCache` |
 | `@tenphi/tasty/ssr/next` | Next.js App Router: `TastyRegistry` component |
 | `@tenphi/tasty/ssr/astro` | Astro: `tastyMiddleware`, auto-hydration on import |
 
@@ -323,10 +297,6 @@ Server-safe style collector. One instance per request.
 | `flushCSS()` | Get only CSS collected since the last flush. For streaming SSR. |
 | `getCacheState()` | Serialize `{ entries: Record<cacheKey, className>, classCounter }` for client hydration. |
 
-### `TastySSRContext`
-
-React context (`createContext<ServerStyleCollector | null>(null)`). Used by the `useStyles()` hook to find the collector during SSR. Not needed when using `computeStyles()` directly (which discovers the collector via `AsyncLocalStorage` or the global getter registered by `TastyRegistry`).
-
 ### `TastyRegistry`
 
 Next.js App Router component. Props:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-0d47ea4",
+  "version": "0.0.0-canary-73c0d53",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -74,7 +74,7 @@
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
-    "@tenphi/tasty": "0.0.0-snapshot.e8f14d4",
+    "@tenphi/tasty": "0.0.0-snapshot.be4449a",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",