@cube-dev/ui-kit 0.0.0-canary-703d044 → 0.0.0-canary-82495e0

package/es/tasty/chunks/definitions.js

@@ -0,0 +1,273 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
+ * Released under the MIT license.
+ */
+
+/**
+ * Style chunk definitions for CSS chunking optimization.
+ *
+ * Styles are grouped into chunks based on:
+ * 1. Handler dependencies - styles that share a handler MUST be in the same chunk
+ * 2. Logical grouping - related styles grouped for better cache reuse
+ *
+ * See STYLE_CHUNKING_SPEC.md for detailed rationale.
+ */
+import { isSelector } from '../utils/renderStyles';
+// ============================================================================
+// Chunk Style Lists
+// ============================================================================
+/**
+ * Appearance chunk - visual styling with independent handlers
+ */
+export const APPEARANCE_CHUNK_STYLES = [
+    'fill', // fillStyle (independent)
+    'color', // colorStyle (independent)
+    'opacity', // independent
+    'border', // borderStyle (independent)
+    'radius', // radiusStyle (independent)
+    'outline', // outlineStyle (independent)
+    'shadow', // shadowStyle (independent)
+    'fade', // fadeStyle (independent)
+];
+/**
+ * Font chunk - typography styles
+ * ⚠️ presetStyle handler requires: preset, fontSize, lineHeight, letterSpacing,
+ *    textTransform, fontWeight, fontStyle, font - all MUST stay together
+ */
+export const FONT_CHUNK_STYLES = [
+    // All from presetStyle handler - MUST stay together
+    'preset',
+    'font',
+    'fontWeight',
+    'fontStyle',
+    'fontSize',
+    'lineHeight',
+    'letterSpacing',
+    'textTransform',
+    // Independent text styles grouped for cohesion
+    'textAlign',
+    'whiteSpace',
+    'textDecoration',
+    'textOverflow',
+    'wordBreak',
+    'wordWrap',
+    'boldFontWeight',
+];
+/**
+ * Dimension chunk - sizing and spacing
+ * ⚠️ paddingStyle handler requires all padding variants together
+ * ⚠️ marginStyle handler requires all margin variants together
+ */
+export const DIMENSION_CHUNK_STYLES = [
+    // All from paddingStyle handler - MUST stay together
+    'padding',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingBlock',
+    'paddingInline',
+    // All from marginStyle handler - MUST stay together
+    'margin',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'marginBlock',
+    'marginInline',
+    // Independent sizing styles
+    'width', // widthStyle (independent)
+    'height', // heightStyle (independent)
+    'minWidth',
+    'maxWidth',
+    'minHeight',
+    'maxHeight',
+    'flexBasis',
+    'flexGrow',
+    'flexShrink',
+    'flex',
+];
+/**
+ * Container chunk - display, flow, and grid layout
+ * ⚠️ FORCED TOGETHER by transitive handler dependencies:
+ *    displayStyle(display,hide) + flowStyle(display,flow) +
+ *    gapStyle(display,flow,gap) + groupRadiusAttr(groupRadius,flow)
+ */
+export const CONTAINER_CHUNK_STYLES = [
+    // Forced together by handler dependencies
+    'display', // displayStyle: display ↔ hide
+    'hide', // displayStyle: display ↔ hide
+    'flow', // flowStyle: display ↔ flow
+    'gap', // gapStyle: display ↔ flow ↔ gap
+    'groupRadius', // groupRadiusAttr: groupRadius ↔ flow
+    // Related container styles (independent but logically grouped)
+    'placeItems',
+    'placeContent',
+    'alignItems',
+    'alignContent',
+    'justifyItems',
+    'justifyContent',
+    'align', // alignStyle (independent)
+    'justify', // justifyStyle (independent)
+    'place', // placeStyle (independent)
+    'columnGap',
+    'rowGap',
+    'gridColumns',
+    'gridRows',
+    'gridTemplate',
+    'gridAreas',
+    'gridAutoFlow',
+    'gridAutoColumns',
+    'gridAutoRows',
+];
+/**
+ * Scrollbar chunk - scrollbar and overflow
+ * ⚠️ scrollbarStyle handler requires scrollbar ↔ overflow together
+ */
+export const SCROLLBAR_CHUNK_STYLES = [
+    'scrollbar', // scrollbarStyle: scrollbar ↔ overflow
+    'overflow', // scrollbarStyle: scrollbar ↔ overflow
+    'styledScrollbar', // styledScrollbarStyle (independent, deprecated)
+];
+/**
+ * Position chunk - element positioning (all independent handlers)
+ */
+export const POSITION_CHUNK_STYLES = [
+    'position',
+    'inset', // insetStyle (independent)
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'zIndex',
+    'gridArea',
+    'gridColumn',
+    'gridRow',
+    'order',
+    'placeSelf',
+    'alignSelf',
+    'justifySelf',
+];
+// ============================================================================
+// Chunk Names
+// ============================================================================
+export const CHUNK_NAMES = {
+    SUBCOMPONENTS: 'subcomponents',
+    APPEARANCE: 'appearance',
+    FONT: 'font',
+    DIMENSION: 'dimension',
+    CONTAINER: 'container',
+    SCROLLBAR: 'scrollbar',
+    POSITION: 'position',
+    MISC: 'misc',
+};
+// ============================================================================
+// Style-to-Chunk Lookup Map (O(1) categorization)
+// ============================================================================
+/**
+ * Pre-computed map for O(1) style-to-chunk lookup.
+ * Built once at module load time.
+ */
+export const STYLE_TO_CHUNK = new Map();
+// Populate the lookup map
+function populateStyleToChunkMap() {
+    for (const style of APPEARANCE_CHUNK_STYLES) {
+        STYLE_TO_CHUNK.set(style, CHUNK_NAMES.APPEARANCE);
+    }
+    for (const style of FONT_CHUNK_STYLES) {
+        STYLE_TO_CHUNK.set(style, CHUNK_NAMES.FONT);
+    }
+    for (const style of DIMENSION_CHUNK_STYLES) {
+        STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DIMENSION);
+    }
+    for (const style of CONTAINER_CHUNK_STYLES) {
+        STYLE_TO_CHUNK.set(style, CHUNK_NAMES.CONTAINER);
+    }
+    for (const style of SCROLLBAR_CHUNK_STYLES) {
+        STYLE_TO_CHUNK.set(style, CHUNK_NAMES.SCROLLBAR);
+    }
+    for (const style of POSITION_CHUNK_STYLES) {
+        STYLE_TO_CHUNK.set(style, CHUNK_NAMES.POSITION);
+    }
+}
+// Initialize at module load
+populateStyleToChunkMap();
+// ============================================================================
+// Chunk Priority Order
+// ============================================================================
+/**
+ * Chunk processing order. This ensures deterministic className allocation
+ * regardless of style key order in the input.
+ */
+const CHUNK_ORDER = [
+    CHUNK_NAMES.APPEARANCE,
+    CHUNK_NAMES.FONT,
+    CHUNK_NAMES.DIMENSION,
+    CHUNK_NAMES.CONTAINER,
+    CHUNK_NAMES.SCROLLBAR,
+    CHUNK_NAMES.POSITION,
+    CHUNK_NAMES.MISC,
+    CHUNK_NAMES.SUBCOMPONENTS,
+];
+/**
+ * Map from chunk name to its priority index for sorting.
+ */
+const CHUNK_PRIORITY = new Map(CHUNK_ORDER.map((name, index) => [name, index]));
+// ============================================================================
+// Style Categorization
+// ============================================================================
+/**
+ * Categorize style keys into chunks.
+ *
+ * Returns chunks in a deterministic order (by CHUNK_ORDER) regardless
+ * of the order of keys in the input styles object.
+ *
+ * @param styles - The styles object to categorize
+ * @returns Map of chunk name to array of style keys in that chunk (in priority order)
+ */
+export function categorizeStyleKeys(styles) {
+    // First pass: collect keys into chunks (unordered)
+    const chunkData = {};
+    const keys = Object.keys(styles);
+    for (const key of keys) {
+        // Skip the $ helper key (used for selector combinators)
+        if (key === '$') {
+            continue;
+        }
+        if (isSelector(key)) {
+            // All selectors go into the subcomponents chunk
+            if (!chunkData[CHUNK_NAMES.SUBCOMPONENTS]) {
+                chunkData[CHUNK_NAMES.SUBCOMPONENTS] = [];
+            }
+            chunkData[CHUNK_NAMES.SUBCOMPONENTS].push(key);
+        }
+        else {
+            // Look up the chunk for this style, default to misc
+            const chunkName = STYLE_TO_CHUNK.get(key) ?? CHUNK_NAMES.MISC;
+            if (!chunkData[chunkName]) {
+                chunkData[chunkName] = [];
+            }
+            chunkData[chunkName].push(key);
+        }
+    }
+    // Second pass: build ordered Map based on CHUNK_ORDER
+    const orderedChunks = new Map();
+    // Add chunks in priority order
+    for (const chunkName of CHUNK_ORDER) {
+        if (chunkData[chunkName] && chunkData[chunkName].length > 0) {
+            // Sort keys within chunk for consistent cache key generation
+            orderedChunks.set(chunkName, chunkData[chunkName].sort());
+        }
+    }
+    // Handle any unknown chunks (shouldn't happen, but be defensive)
+    for (const chunkName of Object.keys(chunkData)) {
+        if (!orderedChunks.has(chunkName)) {
+            orderedChunks.set(chunkName, chunkData[chunkName].sort());
+        }
+    }
+    return orderedChunks;
+}
+
+        

package/es/tasty/chunks/index.js

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
+ * Released under the MIT license.
+ */
+
+export { APPEARANCE_CHUNK_STYLES, FONT_CHUNK_STYLES, DIMENSION_CHUNK_STYLES, CONTAINER_CHUNK_STYLES, SCROLLBAR_CHUNK_STYLES, POSITION_CHUNK_STYLES, CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys, } from './definitions';
+export { generateChunkCacheKey } from './cacheKey';
+export { renderStylesForChunk } from './renderChunk';
+
+        

package/es/tasty/chunks/renderChunk.js

@@ -0,0 +1,75 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
+ * Released under the MIT license.
+ */
+
+/**
+ * Chunk-specific style rendering.
+ *
+ * Renders styles for a specific chunk by filtering the styles object
+ * to only include relevant keys before passing to renderStyles.
+ */
+import { renderStyles } from '../utils/renderStyles';
+import { CHUNK_NAMES } from './definitions';
+/**
+ * Render styles for a specific chunk.
+ *
+ * Creates a filtered styles object containing only the keys for this chunk,
+ * then delegates to the existing renderStyles function.
+ *
+ * @param styles - The full styles object
+ * @param chunkName - Name of the chunk being rendered
+ * @param styleKeys - Keys of styles belonging to this chunk
+ * @returns RenderResult with rules for this chunk
+ */
+export function renderStylesForChunk(styles, chunkName, styleKeys) {
+    // Empty chunk - return empty result
+    if (styleKeys.length === 0) {
+        return { rules: [], className: '' };
+    }
+    // For subcomponents, we need to preserve the nested structure
+    if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) {
+        return renderSubcomponentsChunk(styles, styleKeys);
+    }
+    // For regular chunks, create a filtered styles object
+    // This is memory-efficient: we only create a shallow copy with filtered keys
+    const filteredStyles = {};
+    for (const key of styleKeys) {
+        const value = styles[key];
+        if (value !== undefined) {
+            filteredStyles[key] = value;
+        }
+    }
+    // Delegate to existing renderStyles
+    return renderStyles(filteredStyles);
+}
+/**
+ * Render the subcomponents chunk.
+ *
+ * Subcomponents (selectors like Label, &::before, etc.) contain nested
+ * style objects that need to be preserved in their entirety.
+ *
+ * @param styles - The full styles object
+ * @param selectorKeys - Keys of selectors in this chunk
+ * @returns RenderResult with rules for all subcomponents
+ */
+function renderSubcomponentsChunk(styles, selectorKeys) {
+    // Create a styles object containing only the selector keys
+    const filteredStyles = {};
+    for (const key of selectorKeys) {
+        const value = styles[key];
+        if (value !== undefined) {
+            filteredStyles[key] = value;
+        }
+    }
+    // Also copy the $ helper if present (used for selector combinators)
+    if (styles.$ !== undefined) {
+        filteredStyles.$ = styles.$;
+    }
+    // Delegate to existing renderStyles
+    return renderStyles(filteredStyles);
+}
+
+        

package/es/tasty/debug.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 

package/es/tasty/hooks/index.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
+ * Released under the MIT license.
+ */
+
+export { useStyles } from './useStyles';
+export { useGlobalStyles } from './useGlobalStyles';
+
+        

package/es/tasty/hooks/useGlobalStyles.js

@@ -0,0 +1,59 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
+ * Released under the MIT license.
+ */
+
+import { useInsertionEffect, useMemo, useRef } from 'react';
+import { injectGlobal } from '../injector';
+import { renderStyles } from '../utils/renderStyles';
+/**
+ * Hook to inject global styles for a given selector.
+ * Useful for styling elements by selector without generating classNames.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   useGlobalStyles({
+ *     selector: '.card',
+ *     styles: {
+ *       padding: '2x',
+ *       radius: '1r',
+ *       fill: '#white',
+ *     }
+ *   });
+ *
+ *   return <div className="card">Content</div>;
+ * }
+ * ```
+ */
+export function useGlobalStyles({ selector, styles, }) {
+    const disposeRef = useRef(null);
+    // Render styles with the provided selector
+    // Note: renderStyles overload with selector string returns StyleResult[] directly
+    const styleResults = useMemo(() => {
+        if (!styles)
+            return [];
+        const result = renderStyles(styles, selector);
+        // When a selector is provided, renderStyles returns StyleResult[]
+        return result;
+    }, [styles, selector]);
+    // Inject as global styles
+    useInsertionEffect(() => {
+        disposeRef.current?.();
+        if (styleResults.length > 0) {
+            const { dispose } = injectGlobal(styleResults);
+            disposeRef.current = dispose;
+        }
+        else {
+            disposeRef.current = null;
+        }
+        return () => {
+            disposeRef.current?.();
+            disposeRef.current = null;
+        };
+    }, [styleResults]);
+}
+
+        

package/es/tasty/hooks/useStyles.js

@@ -0,0 +1,116 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
+ * Released under the MIT license.
+ */
+
+import { useInsertionEffect, useMemo, useRef } from 'react';
+import { categorizeStyleKeys, generateChunkCacheKey, renderStylesForChunk, } from '../chunks';
+import { allocateClassName, inject } from '../injector';
+import { stringifyStyles } from '../utils/styles';
+/**
+ * Hook to generate CSS classes from Tasty styles.
+ * Handles style rendering, className allocation, and CSS injection.
+ *
+ * Uses chunking to split styles into logical groups for better caching
+ * and CSS reuse across components.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { className } = useStyles({
+ *     styles: {
+ *       padding: '2x',
+ *       fill: '#purple',
+ *       radius: '1r',
+ *     }
+ *   });
+ *
+ *   return <div className={className}>Styled content</div>;
+ * }
+ * ```
+ */
+export function useStyles({ styles }) {
+    // Array of dispose functions for each chunk
+    const disposeRef = useRef([]);
+    // Store styles by their stringified key to avoid recomputing when only reference changes
+    const stylesRef = useRef({
+        key: '',
+        styles: undefined,
+    });
+    // Compute style key - this is a primitive string that captures style content
+    const styleKey = useMemo(() => {
+        if (!styles || Object.keys(styles).length === 0) {
+            return '';
+        }
+        return stringifyStyles(styles);
+    }, [styles]);
+    // Update ref when styleKey changes (content actually changed)
+    if (stylesRef.current.key !== styleKey) {
+        stylesRef.current = { key: styleKey, styles };
+    }
+    // Process chunks: categorize, generate cache keys, render, and allocate classNames
+    // Only depends on styleKey (primitive), not styles object reference
+    const processedChunks = useMemo(() => {
+        const currentStyles = stylesRef.current.styles;
+        if (!styleKey || !currentStyles) {
+            return [];
+        }
+        // Categorize style keys into chunks
+        const chunkMap = categorizeStyleKeys(currentStyles);
+        const chunks = [];
+        for (const [chunkName, chunkStyleKeys] of chunkMap) {
+            // Skip empty chunks
+            if (chunkStyleKeys.length === 0) {
+                continue;
+            }
+            // Generate cache key for this chunk
+            const cacheKey = generateChunkCacheKey(currentStyles, chunkName, chunkStyleKeys);
+            // Render styles for this chunk
+            const renderResult = renderStylesForChunk(currentStyles, chunkName, chunkStyleKeys);
+            // Skip chunks with no rules
+            if (renderResult.rules.length === 0) {
+                continue;
+            }
+            // Allocate className for this chunk (safe in render phase)
+            const { className } = allocateClassName(cacheKey);
+            chunks.push({
+                name: chunkName,
+                styleKeys: chunkStyleKeys,
+                cacheKey,
+                renderResult,
+                className,
+            });
+        }
+        return chunks;
+    }, [styleKey]);
+    // Inject styles in insertion effect (avoids render phase side effects)
+    useInsertionEffect(() => {
+        // Cleanup all previous chunk disposals
+        disposeRef.current.forEach((dispose) => dispose?.());
+        disposeRef.current = [];
+        // Inject each chunk and collect dispose functions
+        for (const chunk of processedChunks) {
+            if (chunk.renderResult.rules.length > 0) {
+                const { dispose } = inject(chunk.renderResult.rules, {
+                    cacheKey: chunk.cacheKey,
+                });
+                disposeRef.current.push(dispose);
+            }
+        }
+        return () => {
+            disposeRef.current.forEach((dispose) => dispose?.());
+            disposeRef.current = [];
+        };
+    }, [processedChunks]);
+    // Combine all chunk classNames
+    const className = useMemo(() => {
+        return processedChunks.map((chunk) => chunk.className).join(' ');
+    }, [processedChunks]);
+    return {
+        className,
+    };
+}
+
+        

package/es/tasty/index.js

@@ -1,11 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 
 export { tasty, Element } from './tasty';
+export { useStyles, useGlobalStyles } from './hooks';
+// Chunk utilities for advanced use cases
+export { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from './chunks';
 export * from './utils/filterBaseProps';
 export * from './utils/colors';
 export * from './utils/styles';

package/es/tasty/injector/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 

package/es/tasty/injector/sheet-manager.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 

package/es/tasty/injector/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/classify.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/const.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/lru.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/parser.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/tokenizer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/align.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-703d044
+ * @cube-dev/ui-kit v0.0.0-canary-82495e0
  * Released under the MIT license.
  */