@cube-dev/ui-kit 0.118.0 → 0.119.0

package/dist/tasty/chunks/definitions.js

@@ -1,261 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { isSelector } from "../pipeline/index.js";
-
-//#region src/tasty/chunks/definitions.ts
-/**
-* 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.
-*
-* ============================================================================
-* ⚠️  CRITICAL ARCHITECTURAL CONSTRAINT: NO CROSS-CHUNK HANDLER DEPENDENCIES
-* ============================================================================
-*
-* Style handlers declare their dependencies via `__lookupStyles` array.
-* This creates a dependency graph where handlers read multiple style props.
-*
-* **ALL styles in a handler's `__lookupStyles` MUST be in the SAME chunk.**
-*
-* Why this matters:
-* 1. Each chunk computes a cache key from ONLY its own style values
-* 2. If a handler reads a style from another chunk, that value isn't in the cache key
-* 3. Changing the cross-chunk style won't invalidate this chunk's cache
-* 4. Result: stale CSS output or incorrect cache hits
-*
-* Example of a violation:
-* ```
-* // flowStyle.__lookupStyles = ['display', 'flow']
-* // If 'display' is in DISPLAY chunk and 'flow' is in LAYOUT chunk:
-* // - User sets { display: 'grid', flow: 'column' }
-* // - LAYOUT chunk caches CSS with flow=column, display=grid
-* // - User changes to { display: 'flex', flow: 'column' }
-* // - LAYOUT chunk cache key unchanged (only has 'flow')
-* // - Returns stale CSS computed with display=grid!
-* ```
-*
-* Before adding/moving styles, verify:
-* 1. Find all handlers that use this style (grep for the style name in __lookupStyles)
-* 2. Ensure ALL styles from each handler's __lookupStyles are in the same chunk
-* ============================================================================
-*/
-/**
-* Appearance chunk - visual styling with independent handlers
-*/
-const APPEARANCE_CHUNK_STYLES = [
-	"fill",
-	"color",
-	"opacity",
-	"border",
-	"radius",
-	"outline",
-	"outlineOffset",
-	"shadow",
-	"fade"
-];
-/**
-* Font chunk - typography styles
-*
-* Handler dependencies (all styles in each handler MUST stay in this chunk):
-* ⚠️ presetStyle: preset, fontSize, lineHeight, letterSpacing, textTransform,
-*    fontWeight, fontStyle, font
-*/
-const FONT_CHUNK_STYLES = [
-	"preset",
-	"font",
-	"fontWeight",
-	"fontStyle",
-	"fontSize",
-	"lineHeight",
-	"letterSpacing",
-	"textTransform",
-	"fontFamily",
-	"textAlign",
-	"textDecoration",
-	"wordBreak",
-	"wordWrap",
-	"boldFontWeight"
-];
-/**
-* Dimension chunk - sizing and spacing
-*
-* Handler dependencies (all styles in each handler MUST stay in this chunk):
-* ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left, paddingBlock/Inline
-* ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left, marginBlock/Inline
-* ⚠️ widthStyle: width, minWidth, maxWidth
-* ⚠️ heightStyle: height, minHeight, maxHeight
-*/
-const DIMENSION_CHUNK_STYLES = [
-	"padding",
-	"paddingTop",
-	"paddingRight",
-	"paddingBottom",
-	"paddingLeft",
-	"paddingBlock",
-	"paddingInline",
-	"margin",
-	"marginTop",
-	"marginRight",
-	"marginBottom",
-	"marginLeft",
-	"marginBlock",
-	"marginInline",
-	"width",
-	"minWidth",
-	"maxWidth",
-	"height",
-	"minHeight",
-	"maxHeight",
-	"flexBasis",
-	"flexGrow",
-	"flexShrink",
-	"flex"
-];
-/**
-* Display chunk - display mode, layout flow, text overflow, and scrollbar
-*
-* Handler dependencies (all styles in each handler MUST stay in this chunk):
-* ⚠️ displayStyle: display, hide, textOverflow, overflow, whiteSpace
-* ⚠️ flowStyle: display, flow
-* ⚠️ gapStyle: display, flow, gap
-* ⚠️ scrollbarStyle: scrollbar, overflow
-*/
-const DISPLAY_CHUNK_STYLES = [
-	"display",
-	"hide",
-	"textOverflow",
-	"overflow",
-	"whiteSpace",
-	"flow",
-	"gap",
-	"scrollbar",
-	"styledScrollbar"
-];
-/**
-* Layout chunk - flex/grid alignment and grid templates
-*
-* Note: flow and gap are in DISPLAY chunk due to handler dependencies
-* (flowStyle and gapStyle both require 'display' prop).
-*/
-const LAYOUT_CHUNK_STYLES = [
-	"placeItems",
-	"placeContent",
-	"alignItems",
-	"alignContent",
-	"justifyItems",
-	"justifyContent",
-	"align",
-	"justify",
-	"place",
-	"columnGap",
-	"rowGap",
-	"gridColumns",
-	"gridRows",
-	"gridTemplate",
-	"gridAreas",
-	"gridAutoFlow",
-	"gridAutoColumns",
-	"gridAutoRows"
-];
-/**
-* Position chunk - element positioning
-*
-* Handler dependencies (all styles in each handler MUST stay in this chunk):
-* ⚠️ insetStyle: inset, insetBlock, insetInline, top, right, bottom, left
-*/
-const POSITION_CHUNK_STYLES = [
-	"position",
-	"inset",
-	"insetBlock",
-	"insetInline",
-	"top",
-	"right",
-	"bottom",
-	"left",
-	"zIndex",
-	"gridArea",
-	"gridColumn",
-	"gridRow",
-	"order",
-	"placeSelf",
-	"alignSelf",
-	"justifySelf",
-	"transform",
-	"transition",
-	"animation"
-];
-const CHUNK_NAMES = {
-	COMBINED: "combined",
-	SUBCOMPONENTS: "subcomponents",
-	APPEARANCE: "appearance",
-	FONT: "font",
-	DIMENSION: "dimension",
-	DISPLAY: "display",
-	LAYOUT: "layout",
-	POSITION: "position",
-	MISC: "misc"
-};
-/**
-* Pre-computed map for O(1) style-to-chunk lookup.
-* Built once at module load time.
-*/
-const STYLE_TO_CHUNK = /* @__PURE__ */ new 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 DISPLAY_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DISPLAY);
-	for (const style of LAYOUT_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.LAYOUT);
-	for (const style of POSITION_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.POSITION);
-}
-populateStyleToChunkMap();
-/**
-* 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.DISPLAY,
-	CHUNK_NAMES.LAYOUT,
-	CHUNK_NAMES.POSITION,
-	CHUNK_NAMES.MISC,
-	CHUNK_NAMES.SUBCOMPONENTS
-];
-new Map(CHUNK_ORDER.map((name, index) => [name, index]));
-/**
-* 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)
-*/
-function categorizeStyleKeys(styles) {
-	const chunkData = {};
-	const keys = Object.keys(styles);
-	for (const key of keys) {
-		if (key === "$" || key === "@keyframes" || key === "@properties" || key === "recipe") continue;
-		if (isSelector(key)) {
-			if (!chunkData[CHUNK_NAMES.SUBCOMPONENTS]) chunkData[CHUNK_NAMES.SUBCOMPONENTS] = [];
-			chunkData[CHUNK_NAMES.SUBCOMPONENTS].push(key);
-		} else {
-			const chunkName = STYLE_TO_CHUNK.get(key) ?? CHUNK_NAMES.MISC;
-			if (!chunkData[chunkName]) chunkData[chunkName] = [];
-			chunkData[chunkName].push(key);
-		}
-	}
-	const orderedChunks = /* @__PURE__ */ new Map();
-	for (const chunkName of CHUNK_ORDER) if (chunkData[chunkName] && chunkData[chunkName].length > 0) orderedChunks.set(chunkName, chunkData[chunkName].sort());
-	for (const chunkName of Object.keys(chunkData)) if (!orderedChunks.has(chunkName)) orderedChunks.set(chunkName, chunkData[chunkName].sort());
-	return orderedChunks;
-}
-
-//#endregion
-export { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys };
-//# sourceMappingURL=definitions.js.map

package/dist/tasty/chunks/definitions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"definitions.js","names":[],"sources":["../../../src/tasty/chunks/definitions.ts"],"sourcesContent":["/**\n * Style chunk definitions for CSS chunking optimization.\n *\n * Styles are grouped into chunks based on:\n * 1. Handler dependencies - styles that share a handler MUST be in the same chunk\n * 2. Logical grouping - related styles grouped for better cache reuse\n *\n * See STYLE_CHUNKING_SPEC.md for detailed rationale.\n *\n * ============================================================================\n * ⚠️  CRITICAL ARCHITECTURAL CONSTRAINT: NO CROSS-CHUNK HANDLER DEPENDENCIES\n * ============================================================================\n *\n * Style handlers declare their dependencies via `__lookupStyles` array.\n * This creates a dependency graph where handlers read multiple style props.\n *\n * **ALL styles in a handler's `__lookupStyles` MUST be in the SAME chunk.**\n *\n * Why this matters:\n * 1. Each chunk computes a cache key from ONLY its own style values\n * 2. If a handler reads a style from another chunk, that value isn't in the cache key\n * 3. Changing the cross-chunk style won't invalidate this chunk's cache\n * 4. Result: stale CSS output or incorrect cache hits\n *\n * Example of a violation:\n * ```\n * // flowStyle.__lookupStyles = ['display', 'flow']\n * // If 'display' is in DISPLAY chunk and 'flow' is in LAYOUT chunk:\n * // - User sets { display: 'grid', flow: 'column' }\n * // - LAYOUT chunk caches CSS with flow=column, display=grid\n * // - User changes to { display: 'flex', flow: 'column' }\n * // - LAYOUT chunk cache key unchanged (only has 'flow')\n * // - Returns stale CSS computed with display=grid!\n * ```\n *\n * Before adding/moving styles, verify:\n * 1. Find all handlers that use this style (grep for the style name in __lookupStyles)\n * 2. Ensure ALL styles from each handler's __lookupStyles are in the same chunk\n * ============================================================================\n */\n\nimport { isSelector } from '../pipeline';\n\n// ============================================================================\n// Chunk Style Lists\n// ============================================================================\n\n/**\n * Appearance chunk - visual styling with independent handlers\n */\nexport const APPEARANCE_CHUNK_STYLES = [\n  'fill', // fillStyle (independent)\n  'color', // colorStyle (independent)\n  'opacity', // independent\n  'border', // borderStyle (independent)\n  'radius', // radiusStyle (independent)\n  'outline', // outlineStyle: outline ↔ outlineOffset\n  'outlineOffset', // outlineStyle: outline ↔ outlineOffset\n  'shadow', // shadowStyle (independent)\n  'fade', // fadeStyle (independent)\n] as const;\n\n/**\n * Font chunk - typography styles\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ presetStyle: preset, fontSize, lineHeight, letterSpacing, textTransform,\n *    fontWeight, fontStyle, font\n */\nexport const FONT_CHUNK_STYLES = [\n  // All from presetStyle handler - MUST stay together\n  'preset',\n  'font',\n  'fontWeight',\n  'fontStyle',\n  'fontSize',\n  'lineHeight',\n  'letterSpacing',\n  'textTransform',\n  // Independent text styles grouped for cohesion\n  'fontFamily', // independent alias (logical grouping with font styles)\n  'textAlign',\n  'textDecoration',\n  'wordBreak',\n  'wordWrap',\n  'boldFontWeight',\n] as const;\n\n/**\n * Dimension chunk - sizing and spacing\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left, paddingBlock/Inline\n * ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left, marginBlock/Inline\n * ⚠️ widthStyle: width, minWidth, maxWidth\n * ⚠️ heightStyle: height, minHeight, maxHeight\n */\nexport const DIMENSION_CHUNK_STYLES = [\n  // All from paddingStyle handler - MUST stay together\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n  // All from marginStyle handler - MUST stay together\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n  // widthStyle handler - MUST stay together\n  'width',\n  'minWidth',\n  'maxWidth',\n  // heightStyle handler - MUST stay together\n  'height',\n  'minHeight',\n  'maxHeight',\n  'flexBasis',\n  'flexGrow',\n  'flexShrink',\n  'flex',\n] as const;\n\n/**\n * Display chunk - display mode, layout flow, text overflow, and scrollbar\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ displayStyle: display, hide, textOverflow, overflow, whiteSpace\n * ⚠️ flowStyle: display, flow\n * ⚠️ gapStyle: display, flow, gap\n * ⚠️ scrollbarStyle: scrollbar, overflow\n */\nexport const DISPLAY_CHUNK_STYLES = [\n  // displayStyle handler\n  'display',\n  'hide',\n  'textOverflow',\n  'overflow', // also used by scrollbarStyle\n  'whiteSpace',\n  // flowStyle handler (requires display)\n  'flow',\n  // gapStyle handler (requires display, flow)\n  'gap',\n  // scrollbarStyle handler (requires overflow)\n  'scrollbar',\n  'styledScrollbar', // styledScrollbarStyle (deprecated)\n] as const;\n\n/**\n * Layout chunk - flex/grid alignment and grid templates\n *\n * Note: flow and gap are in DISPLAY chunk due to handler dependencies\n * (flowStyle and gapStyle both require 'display' prop).\n */\nexport const LAYOUT_CHUNK_STYLES = [\n  // Alignment styles (all independent handlers)\n  'placeItems',\n  'placeContent',\n  'alignItems',\n  'alignContent',\n  'justifyItems',\n  'justifyContent',\n  'align', // alignStyle (independent)\n  'justify', // justifyStyle (independent)\n  'place', // placeStyle (independent)\n  'columnGap',\n  'rowGap',\n  // Grid template styles\n  'gridColumns',\n  'gridRows',\n  'gridTemplate',\n  'gridAreas',\n  'gridAutoFlow',\n  'gridAutoColumns',\n  'gridAutoRows',\n] as const;\n\n/**\n * Position chunk - element positioning\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ insetStyle: inset, insetBlock, insetInline, top, right, bottom, left\n */\nexport const POSITION_CHUNK_STYLES = [\n  'position',\n  // All from insetStyle handler - MUST stay together\n  'inset',\n  'insetBlock',\n  'insetInline',\n  'top',\n  'right',\n  'bottom',\n  'left',\n  'zIndex',\n  'gridArea',\n  'gridColumn',\n  'gridRow',\n  'order',\n  'placeSelf',\n  'alignSelf',\n  'justifySelf',\n  'transform',\n  'transition',\n  'animation',\n] as const;\n\n// ============================================================================\n// Chunk Names\n// ============================================================================\n\nexport const CHUNK_NAMES = {\n  /** Special chunk for styles that cannot be split (e.g., @starting-style) */\n  COMBINED: 'combined',\n  SUBCOMPONENTS: 'subcomponents',\n  APPEARANCE: 'appearance',\n  FONT: 'font',\n  DIMENSION: 'dimension',\n  DISPLAY: 'display',\n  LAYOUT: 'layout',\n  POSITION: 'position',\n  MISC: 'misc',\n} as const;\n\nexport type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];\n\n// ============================================================================\n// Style-to-Chunk Lookup Map (O(1) categorization)\n// ============================================================================\n\n/**\n * Pre-computed map for O(1) style-to-chunk lookup.\n * Built once at module load time.\n */\nexport const STYLE_TO_CHUNK: Map<string, ChunkName> = new Map();\n\n// Populate the lookup map\nfunction populateStyleToChunkMap() {\n  for (const style of APPEARANCE_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.APPEARANCE);\n  }\n  for (const style of FONT_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.FONT);\n  }\n  for (const style of DIMENSION_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DIMENSION);\n  }\n  for (const style of DISPLAY_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DISPLAY);\n  }\n  for (const style of LAYOUT_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.LAYOUT);\n  }\n  for (const style of POSITION_CHUNK_STYLES) {\n    STYLE_TO_CHUNK.set(style, CHUNK_NAMES.POSITION);\n  }\n}\n\n// Initialize at module load\npopulateStyleToChunkMap();\n\n// ============================================================================\n// Chunk Priority Order\n// ============================================================================\n\n/**\n * Chunk processing order. This ensures deterministic className allocation\n * regardless of style key order in the input.\n */\nconst CHUNK_ORDER: readonly string[] = [\n  CHUNK_NAMES.APPEARANCE,\n  CHUNK_NAMES.FONT,\n  CHUNK_NAMES.DIMENSION,\n  CHUNK_NAMES.DISPLAY,\n  CHUNK_NAMES.LAYOUT,\n  CHUNK_NAMES.POSITION,\n  CHUNK_NAMES.MISC,\n  CHUNK_NAMES.SUBCOMPONENTS,\n] as const;\n\n/**\n * Map from chunk name to its priority index for sorting.\n */\nconst CHUNK_PRIORITY: Map<string, number> = new Map(\n  CHUNK_ORDER.map((name, index) => [name, index]),\n);\n\n// ============================================================================\n// Chunk Info Interface\n// ============================================================================\n\nexport interface ChunkInfo {\n  /** Name of the chunk */\n  name: ChunkName | string;\n  /** Style keys belonging to this chunk */\n  styleKeys: string[];\n}\n\n// ============================================================================\n// Style Categorization\n// ============================================================================\n\n/**\n * Categorize style keys into chunks.\n *\n * Returns chunks in a deterministic order (by CHUNK_ORDER) regardless\n * of the order of keys in the input styles object.\n *\n * @param styles - The styles object to categorize\n * @returns Map of chunk name to array of style keys in that chunk (in priority order)\n */\nexport function categorizeStyleKeys(\n  styles: Record<string, unknown>,\n): Map<string, string[]> {\n  // First pass: collect keys into chunks (unordered)\n  const chunkData: Record<string, string[]> = {};\n  const keys = Object.keys(styles);\n\n  for (const key of keys) {\n    // Skip the $ helper key (used for selector combinators)\n    // Skip @keyframes and @properties (processed separately in useStyles)\n    // Skip recipe (resolved before pipeline by resolveRecipes)\n    if (\n      key === '$' ||\n      key === '@keyframes' ||\n      key === '@properties' ||\n      key === 'recipe'\n    ) {\n      continue;\n    }\n\n    if (isSelector(key)) {\n      // All selectors go into the subcomponents chunk\n      if (!chunkData[CHUNK_NAMES.SUBCOMPONENTS]) {\n        chunkData[CHUNK_NAMES.SUBCOMPONENTS] = [];\n      }\n      chunkData[CHUNK_NAMES.SUBCOMPONENTS].push(key);\n    } else {\n      // Look up the chunk for this style, default to misc\n      const chunkName = STYLE_TO_CHUNK.get(key) ?? CHUNK_NAMES.MISC;\n      if (!chunkData[chunkName]) {\n        chunkData[chunkName] = [];\n      }\n      chunkData[chunkName].push(key);\n    }\n  }\n\n  // Second pass: build ordered Map based on CHUNK_ORDER\n  const orderedChunks = new Map<string, string[]>();\n\n  // Add chunks in priority order\n  for (const chunkName of CHUNK_ORDER) {\n    if (chunkData[chunkName] && chunkData[chunkName].length > 0) {\n      // Sort keys within chunk for consistent cache key generation\n      orderedChunks.set(chunkName, chunkData[chunkName].sort());\n    }\n  }\n\n  // Handle any unknown chunks (shouldn't happen, but be defensive)\n  for (const chunkName of Object.keys(chunkData)) {\n    if (!orderedChunks.has(chunkName)) {\n      orderedChunks.set(chunkName, chunkData[chunkName].sort());\n    }\n  }\n\n  return orderedChunks;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;AASD,MAAa,oBAAoB;CAE/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;AAWD,MAAa,yBAAyB;CAEpC;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;AAWD,MAAa,uBAAuB;CAElC;CACA;CACA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACD;;;;;;;AAQD,MAAa,sBAAsB;CAEjC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;AAQD,MAAa,wBAAwB;CACnC;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAMD,MAAa,cAAc;CAEzB,UAAU;CACV,eAAe;CACf,YAAY;CACZ,MAAM;CACN,WAAW;CACX,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;CACP;;;;;AAYD,MAAa,iCAAyC,IAAI,KAAK;AAG/D,SAAS,0BAA0B;AACjC,MAAK,MAAM,SAAS,wBAClB,gBAAe,IAAI,OAAO,YAAY,WAAW;AAEnD,MAAK,MAAM,SAAS,kBAClB,gBAAe,IAAI,OAAO,YAAY,KAAK;AAE7C,MAAK,MAAM,SAAS,uBAClB,gBAAe,IAAI,OAAO,YAAY,UAAU;AAElD,MAAK,MAAM,SAAS,qBAClB,gBAAe,IAAI,OAAO,YAAY,QAAQ;AAEhD,MAAK,MAAM,SAAS,oBAClB,gBAAe,IAAI,OAAO,YAAY,OAAO;AAE/C,MAAK,MAAM,SAAS,sBAClB,gBAAe,IAAI,OAAO,YAAY,SAAS;;AAKnD,yBAAyB;;;;;AAUzB,MAAM,cAAiC;CACrC,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACb;AAK2C,IAAI,IAC9C,YAAY,KAAK,MAAM,UAAU,CAAC,MAAM,MAAM,CAAC,CAChD;;;;;;;;;;AA0BD,SAAgB,oBACd,QACuB;CAEvB,MAAM,YAAsC,EAAE;CAC9C,MAAM,OAAO,OAAO,KAAK,OAAO;AAEhC,MAAK,MAAM,OAAO,MAAM;AAItB,MACE,QAAQ,OACR,QAAQ,gBACR,QAAQ,iBACR,QAAQ,SAER;AAGF,MAAI,WAAW,IAAI,EAAE;AAEnB,OAAI,CAAC,UAAU,YAAY,eACzB,WAAU,YAAY,iBAAiB,EAAE;AAE3C,aAAU,YAAY,eAAe,KAAK,IAAI;SACzC;GAEL,MAAM,YAAY,eAAe,IAAI,IAAI,IAAI,YAAY;AACzD,OAAI,CAAC,UAAU,WACb,WAAU,aAAa,EAAE;AAE3B,aAAU,WAAW,KAAK,IAAI;;;CAKlC,MAAM,gCAAgB,IAAI,KAAuB;AAGjD,MAAK,MAAM,aAAa,YACtB,KAAI,UAAU,cAAc,UAAU,WAAW,SAAS,EAExD,eAAc,IAAI,WAAW,UAAU,WAAW,MAAM,CAAC;AAK7D,MAAK,MAAM,aAAa,OAAO,KAAK,UAAU,CAC5C,KAAI,CAAC,cAAc,IAAI,UAAU,CAC/B,eAAc,IAAI,WAAW,UAAU,WAAW,MAAM,CAAC;AAI7D,QAAO"}

package/dist/tasty/chunks/renderChunk.js

@@ -1,68 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { extractLocalPredefinedStates } from "../states/index.js";
-import { renderStyles } from "../pipeline/index.js";
-import { CHUNK_NAMES } from "./definitions.js";
-
-//#region src/tasty/chunks/renderChunk.ts
-/**
-* Chunk-specific style rendering.
-*
-* Renders styles for a specific chunk by filtering the styles object
-* to only include relevant keys before passing to renderStyles.
-*/
-/**
-* 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.
-*
-* IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')
-* are always included in the filtered styles, regardless of which chunk is
-* being rendered. This ensures that state references like '@mobile' in any
-* chunk can be properly resolved by the pipeline.
-*
-* @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
-*/
-function renderStylesForChunk(styles, chunkName, styleKeys) {
-	if (styleKeys.length === 0) return {
-		rules: [],
-		className: ""
-	};
-	if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) return renderSubcomponentsChunk(styles, styleKeys);
-	const localPredefinedStates = extractLocalPredefinedStates(styles);
-	const filteredStyles = {};
-	for (const [key, value] of Object.entries(localPredefinedStates)) filteredStyles[key] = value;
-	for (const key of styleKeys) {
-		const value = styles[key];
-		if (value !== void 0) filteredStyles[key] = value;
-	}
-	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) {
-	const localPredefinedStates = extractLocalPredefinedStates(styles);
-	const filteredStyles = {};
-	for (const [key, value] of Object.entries(localPredefinedStates)) filteredStyles[key] = value;
-	for (const key of selectorKeys) {
-		const value = styles[key];
-		if (value !== void 0) filteredStyles[key] = value;
-	}
-	if (styles.$ !== void 0) filteredStyles.$ = styles.$;
-	return renderStyles(filteredStyles);
-}
-
-//#endregion
-export { renderStylesForChunk };
-//# sourceMappingURL=renderChunk.js.map

package/dist/tasty/chunks/renderChunk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderChunk.js","names":[],"sources":["../../../src/tasty/chunks/renderChunk.ts"],"sourcesContent":["/**\n * Chunk-specific style rendering.\n *\n * Renders styles for a specific chunk by filtering the styles object\n * to only include relevant keys before passing to renderStyles.\n */\n\nimport { RenderResult, renderStyles } from '../pipeline';\nimport { extractLocalPredefinedStates } from '../states';\nimport { Styles } from '../styles/types';\n\nimport { CHUNK_NAMES } from './definitions';\n\n/**\n * Render styles for a specific chunk.\n *\n * Creates a filtered styles object containing only the keys for this chunk,\n * then delegates to the existing renderStyles function.\n *\n * IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')\n * are always included in the filtered styles, regardless of which chunk is\n * being rendered. This ensures that state references like '@mobile' in any\n * chunk can be properly resolved by the pipeline.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk being rendered\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns RenderResult with rules for this chunk\n */\nexport function renderStylesForChunk(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): RenderResult {\n  // Empty chunk - return empty result\n  if (styleKeys.length === 0) {\n    return { rules: [], className: '' };\n  }\n\n  // For subcomponents, we need to preserve the nested structure\n  if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) {\n    return renderSubcomponentsChunk(styles, styleKeys);\n  }\n\n  // Extract local predefined states from the full styles object\n  // These must be included for state resolution to work across chunks\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n\n  // For regular chunks, create a filtered styles object\n  // This is memory-efficient: we only create a shallow copy with filtered keys\n  const filteredStyles: Styles = {};\n\n  // First, add local predefined states so they're available for resolution\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  // Then add the chunk's style keys\n  for (const key of styleKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  // Delegate to existing renderStyles\n  return renderStyles(filteredStyles);\n}\n\n/**\n * Render the subcomponents chunk.\n *\n * Subcomponents (selectors like Label, &::before, etc.) contain nested\n * style objects that need to be preserved in their entirety.\n *\n * @param styles - The full styles object\n * @param selectorKeys - Keys of selectors in this chunk\n * @returns RenderResult with rules for all subcomponents\n */\nfunction renderSubcomponentsChunk(\n  styles: Styles,\n  selectorKeys: string[],\n): RenderResult {\n  // Extract local predefined states from the full styles object\n  // These must be included for state resolution to work in nested styles\n  const localPredefinedStates = extractLocalPredefinedStates(styles);\n\n  // Create a styles object containing only the selector keys\n  const filteredStyles: Styles = {};\n\n  // First, add local predefined states so they're available for resolution\n  for (const [key, value] of Object.entries(localPredefinedStates)) {\n    filteredStyles[key] = value;\n  }\n\n  // Then add the selector keys\n  for (const key of selectorKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      filteredStyles[key] = value;\n    }\n  }\n\n  // Also copy the $ helper if present (used for selector combinators)\n  if (styles.$ !== undefined) {\n    filteredStyles.$ = styles.$;\n  }\n\n  // Delegate to existing renderStyles\n  return renderStyles(filteredStyles);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,qBACd,QACA,WACA,WACc;AAEd,KAAI,UAAU,WAAW,EACvB,QAAO;EAAE,OAAO,EAAE;EAAE,WAAW;EAAI;AAIrC,KAAI,cAAc,YAAY,cAC5B,QAAO,yBAAyB,QAAQ,UAAU;CAKpD,MAAM,wBAAwB,6BAA6B,OAAO;CAIlE,MAAM,iBAAyB,EAAE;AAGjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAIxB,MAAK,MAAM,OAAO,WAAW;EAC3B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAK1B,QAAO,aAAa,eAAe;;;;;;;;;;;;AAarC,SAAS,yBACP,QACA,cACc;CAGd,MAAM,wBAAwB,6BAA6B,OAAO;CAGlE,MAAM,iBAAyB,EAAE;AAGjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAIxB,MAAK,MAAM,OAAO,cAAc;EAC9B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAK1B,KAAI,OAAO,MAAM,OACf,gBAAe,IAAI,OAAO;AAI5B,QAAO,aAAa,eAAe"}

package/dist/tasty/config.d.ts

@@ -1,283 +0,0 @@
-
-import { StyleDetails, UnitHandler } from "./parser/types.js";
-import { StyleHandlerDefinition } from "./utils/styles.js";
-import { RecipeStyles } from "./styles/types.js";
-import { KeyframesSteps, PropertyDefinition } from "./injector/types.js";
-import { StyleInjector } from "./injector/injector.js";
-import { TastyPlugin } from "./plugins/types.js";
-
-//#region src/tasty/config.d.ts
-/**
- * Configuration options for the Tasty style system
- */
-interface TastyConfig {
-  /** CSP nonce for style elements */
-  nonce?: string;
-  /** Maximum rules per stylesheet (default: 8192) */
-  maxRulesPerSheet?: number;
-  /** Threshold for bulk cleanup of unused styles (default: 500) */
-  unusedStylesThreshold?: number;
-  /** Delay before bulk cleanup in ms, ignored if idleCleanup is true (default: 5000) */
-  bulkCleanupDelay?: number;
-  /** Use requestIdleCallback for cleanup when available (default: true) */
-  idleCleanup?: boolean;
-  /** Force text injection mode, auto-detected in test environments (default: auto) */
-  forceTextInjection?: boolean;
-  /** Enable development mode features: performance metrics and debug info (default: auto) */
-  devMode?: boolean;
-  /**
-   * Ratio of unused styles to delete per bulk cleanup run (0..1).
-   * Defaults to 0.5 (oldest half) to reduce risk of removing styles
-   * that may be restored shortly after being marked unused.
-   */
-  bulkCleanupBatchRatio?: number;
-  /**
-   * Minimum age (in ms) a style must remain unused before eligible for deletion.
-   * Helps avoid races during rapid mount/unmount cycles. Default: 10000ms.
-   */
-  unusedStylesMinAgeMs?: number;
-  /**
-   * Global predefined states for advanced state mapping.
-   * These are state aliases that can be used in any component.
-   * Example: { '@mobile': '@media(w < 920px)', '@dark': '@root(theme=dark)' }
-   */
-  states?: Record<string, string>;
-  /**
-   * Parser LRU cache size (default: 1000).
-   * Larger values improve performance for apps with many unique style values.
-   */
-  parserCacheSize?: number;
-  /**
-   * Custom units for the style parser (merged with built-in units).
-   * Units transform numeric values like `2x` → `calc(2 * var(--gap))`.
-   * @example { em: 'em', vw: 'vw', custom: (n) => `${n * 10}px` }
-   */
-  units?: Record<string, string | UnitHandler>;
-  /**
-   * Custom functions for the style parser (merged with existing).
-   * Functions process parsed style groups and return CSS values.
-   * @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }
-   */
-  funcs?: Record<string, (groups: StyleDetails[]) => string>;
-  /**
-   * Plugins that extend tasty with custom functions, units, or states.
-   * Plugins are processed in order, with later plugins overriding earlier ones.
-   * @example
-   * ```ts
-   * import { okhslPlugin } from '@cube-dev/ui-kit/tasty/plugins';
-   *
-   * configure({
-   *   plugins: [okhslPlugin()],
-   * });
-   * ```
-   */
-  plugins?: TastyPlugin[];
-  /**
-   * Global keyframes definitions that can be referenced by animation names in styles.
-   * Keys are animation names, values are keyframes step definitions.
-   * Keyframes are only injected when actually used in styles.
-   * @example
-   * ```ts
-   * configure({
-   *   keyframes: {
-   *     fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } },
-   *     pulse: { '0%, 100%': { transform: 'scale(1)' }, '50%': { transform: 'scale(1.05)' } },
-   *   },
-   * });
-   * ```
-   */
-  keyframes?: Record<string, KeyframesSteps>;
-  /**
-   * Global CSS @property definitions for custom properties.
-   * Keys use tasty token syntax ($name for properties, #name for colors).
-   * Properties are only injected when the component using them is rendered.
-   *
-   * For color tokens (#name), `syntax: '<color>'` is auto-set and
-   * `initialValue` defaults to `'transparent'` if not specified.
-   *
-   * @example
-   * ```ts
-   * configure({
-   *   properties: {
-   *     '$rotation': { syntax: '<angle>', initialValue: '0deg' },
-   *     '$scale': { syntax: '<number>', inherits: false, initialValue: 1 },
-   *     '#accent': { initialValue: 'purple' }, // syntax: '<color>' auto-set
-   *   },
-   * });
-   *
-   * // Now use in styles - properties are registered when component renders:
-   * const Spinner = tasty({
-   *   styles: {
-   *     transform: 'rotate($rotation)',
-   *     transition: '$$rotation 0.3s', // outputs: --rotation 0.3s
-   *   },
-   * });
-   * ```
-   */
-  properties?: Record<string, PropertyDefinition>;
-  /**
-   * Custom style handlers that transform style properties into CSS declarations.
-   * Handlers replace built-in handlers for the same style name.
-   * @example
-   * ```ts
-   * import { styleHandlers } from '@cube-dev/ui-kit';
-   *
-   * configure({
-   *   handlers: {
-   *     // Override fill with custom behavior
-   *     fill: ({ fill }) => {
-   *       if (fill?.startsWith('gradient:')) {
-   *         return { background: fill.slice(9) };
-   *       }
-   *       return styleHandlers.fill({ fill });
-   *     },
-   *     // Add new custom style
-   *     elevation: ({ elevation }) => {
-   *       const level = parseInt(elevation) || 1;
-   *       return {
-   *         'box-shadow': `0 ${level * 2}px ${level * 4}px rgba(0,0,0,0.1)`,
-   *         'z-index': String(level * 100),
-   *       };
-   *     },
-   *   },
-   * });
-   * ```
-   */
-  handlers?: Record<string, StyleHandlerDefinition>;
-  /**
-   * Predefined tokens that are replaced during style parsing.
-   * Token values are processed through the parser (like component tokens).
-   * Use `$name` for custom properties and `#name` for color tokens.
-   *
-   * For color tokens (#name), boolean `true` is converted to `transparent`.
-   *
-   * @example
-   * ```ts
-   * configure({
-   *   tokens: {
-   *     $spacing: '2x',
-   *     '$card-padding': '4x',
-   *     '#accent': '#purple',
-   *     '#surface': '#white',
-   *     '#overlay': true, // → transparent
-   *   },
-   * });
-   *
-   * // Now use in styles - tokens are replaced at parse time:
-   * const Card = tasty({
-   *   styles: {
-   *     padding: '$card-padding',  // → calc(4 * var(--gap))
-   *     fill: '#surface',          // → var(--white-color)
-   *   },
-   * });
-   * ```
-   */
-  tokens?: {
-    [key: `$${string}`]: string | number | boolean;
-  } & {
-    [key: `#${string}`]: string | number | boolean;
-  };
-  /**
-   * Predefined style recipes -- named style bundles that can be applied via `recipe` style property.
-   * Recipe values are flat tasty styles (no sub-element keys). They may contain base styles,
-   * tokens (`$name`/`#name` definitions), local states, `@keyframes`, and `@properties`.
-   *
-   * Components reference recipes via: `recipe: 'name1 name2'` in their styles.
-   * Use `|` to separate base recipes from post recipes: `recipe: 'base1 base2 | post1'`.
-   * Resolution order: `base_recipes → component styles → post_recipes`.
-   *
-   * Recipes cannot reference other recipes.
-   *
-   * @example
-   * ```ts
-   * configure({
-   *   recipes: {
-   *     card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
-   *     elevated: { shadow: '2x 2x 4x #shadow' },
-   *   },
-   * });
-   *
-   * // Usage in styles:
-   * const Card = tasty({
-   *   styles: {
-   *     recipe: 'card elevated',
-   *     color: '#text', // Overrides recipe values
-   *   },
-   * });
-   * ```
-   */
-  recipes?: Record<string, RecipeStyles>;
-}
-declare const GLOBAL_INJECTOR_KEY = "__TASTY_GLOBAL_INJECTOR__";
-declare global {
-  interface Window {
-    [GLOBAL_INJECTOR_KEY]?: StyleInjector;
-  }
-}
-/**
- * Detect if we're running in a test environment
- */
-declare function isTestEnvironment(): boolean;
-/**
- * Check if styles have been generated (configuration is locked)
- */
-declare function hasStylesGenerated(): boolean;
-/**
- * Check if any global keyframes are configured.
- * Fast path: returns false if no keyframes were ever set.
- */
-declare function hasGlobalKeyframes(): boolean;
-/**
- * Get global keyframes configuration.
- * Returns null if no keyframes configured (fast path for zero-overhead).
- */
-declare function getGlobalKeyframes(): Record<string, KeyframesSteps> | null;
-/**
- * Check if any global recipes are configured.
- * Fast path: returns false if no recipes were ever set.
- */
-declare function hasGlobalRecipes(): boolean;
-/**
- * Get global recipes configuration.
- * Returns null if no recipes configured (fast path for zero-overhead).
- */
-declare function getGlobalRecipes(): Record<string, RecipeStyles> | null;
-/**
- * Check if configuration is locked (styles have been generated)
- */
-declare function isConfigLocked(): boolean;
-/**
- * Configure the Tasty style system.
- *
- * Must be called BEFORE any styles are generated (before first render that uses tasty).
- * After styles are generated, configuration is locked and calls to configure() will
- * emit a warning and be ignored.
- *
- * @example
- * ```ts
- * import { configure } from '@cube-dev/ui-kit';
- *
- * // Configure before app renders
- * configure({
- *   nonce: 'abc123',
- *   states: {
- *     '@mobile': '@media(w < 768px)',
- *     '@dark': '@root(theme=dark)',
- *   },
- * });
- * ```
- */
-declare function configure(config?: Partial<TastyConfig>): void;
-/**
- * Get the current configuration.
- * If not configured, returns default configuration.
- */
-declare function getConfig(): TastyConfig;
-/**
- * Reset configuration (for testing only).
- * Clears the global injector and allows reconfiguration.
- */
-declare function resetConfig(): void;
-//#endregion
-export { TastyConfig, configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig };
-//# sourceMappingURL=config.d.ts.map