@tenphi/tasty 0.0.0-snapshot.08a6610

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,8 @@
+//#region \0rolldown/runtime.js
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
+	if (typeof require !== "undefined") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+});
+
+//#endregion
+export { __require };

package/dist/chunks/cacheKey.js

@@ -0,0 +1,70 @@
+import { extractLocalPredefinedStates, extractPredefinedStateRefs } from "../states/index.js";
+
+//#region src/chunks/cacheKey.ts
+/**
+* Chunk-specific cache key generation.
+*
+* Generates cache keys that only include styles relevant to a specific chunk,
+* enabling more granular caching and reuse.
+*
+* Enhanced to support predefined states:
+* - Global predefined states don't affect cache keys (constant across app)
+* - Local predefined states only affect cache keys if referenced in the chunk
+*/
+/**
+* Recursively serialize a value with sorted keys for stable output.
+* This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.
+*/
+function stableStringify(value) {
+	if (value === null) return "null";
+	if (value === void 0) return "undefined";
+	if (typeof value !== "object") return JSON.stringify(value);
+	if (Array.isArray(value)) return "[" + value.map(stableStringify).join(",") + "]";
+	const obj = value;
+	const sortedKeys = Object.keys(obj).sort();
+	const parts = [];
+	for (const key of sortedKeys) if (obj[key] !== void 0) parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);
+	return "{" + parts.join(",") + "}";
+}
+/**
+* Generate a cache key for a specific chunk.
+*
+* Only includes the styles that belong to this chunk, allowing
+* chunks to be cached independently.
+*
+* Also includes relevant local predefined states that are referenced
+* by this chunk's styles.
+*
+* @param styles - The full styles object
+* @param chunkName - Name of the chunk
+* @param styleKeys - Keys of styles belonging to this chunk
+* @returns A stable cache key string
+*/
+function generateChunkCacheKey(styles, chunkName, styleKeys) {
+	const parts = [chunkName];
+	const sortedKeys = styleKeys.slice().sort();
+	let chunkStylesStr = "";
+	for (const key of sortedKeys) {
+		const value = styles[key];
+		if (value !== void 0) {
+			const serialized = stableStringify(value);
+			parts.push(`${key}:${serialized}`);
+			chunkStylesStr += serialized;
+		}
+	}
+	const localStates = extractLocalPredefinedStates(styles);
+	if (Object.keys(localStates).length > 0) {
+		const referencedStates = extractPredefinedStateRefs(chunkStylesStr);
+		const relevantLocalStates = [];
+		for (const stateName of referencedStates) if (localStates[stateName]) relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);
+		if (relevantLocalStates.length > 0) {
+			relevantLocalStates.sort();
+			parts.unshift(`[states:${relevantLocalStates.join("|")}]`);
+		}
+	}
+	return parts.join("\0");
+}
+
+//#endregion
+export { generateChunkCacheKey };
+//# sourceMappingURL=cacheKey.js.map

package/dist/chunks/cacheKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cacheKey.js","names":[],"sources":["../../src/chunks/cacheKey.ts"],"sourcesContent":["/**\n * Chunk-specific cache key generation.\n *\n * Generates cache keys that only include styles relevant to a specific chunk,\n * enabling more granular caching and reuse.\n *\n * Enhanced to support predefined states:\n * - Global predefined states don't affect cache keys (constant across app)\n * - Local predefined states only affect cache keys if referenced in the chunk\n */\n\nimport {\n  extractLocalPredefinedStates,\n  extractPredefinedStateRefs,\n} from '../states';\nimport type { Styles } from '../styles/types';\n\n/**\n * Recursively serialize a value with sorted keys for stable output.\n * This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.\n */\nfunction stableStringify(value: unknown): string {\n  if (value === null) {\n    return 'null';\n  }\n  if (value === undefined) {\n    return 'undefined';\n  }\n  if (typeof value !== 'object') {\n    return JSON.stringify(value);\n  }\n  if (Array.isArray(value)) {\n    return '[' + value.map(stableStringify).join(',') + ']';\n  }\n  // Object: sort keys for stable order\n  const obj = value as Record<string, unknown>;\n  const sortedKeys = Object.keys(obj).sort();\n  const parts: string[] = [];\n  for (const key of sortedKeys) {\n    if (obj[key] !== undefined) {\n      parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);\n    }\n  }\n  return '{' + parts.join(',') + '}';\n}\n\n/**\n * Generate a cache key for a specific chunk.\n *\n * Only includes the styles that belong to this chunk, allowing\n * chunks to be cached independently.\n *\n * Also includes relevant local predefined states that are referenced\n * by this chunk's styles.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns A stable cache key string\n */\nexport function generateChunkCacheKey(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): string {\n  // Start with chunk name for namespace separation\n  const parts: string[] = [chunkName];\n\n  // Sort keys for stable ordering\n  const sortedKeys = styleKeys.slice().sort();\n\n  // Build the chunk-specific styles string for predefined state detection\n  let chunkStylesStr = '';\n\n  for (const key of sortedKeys) {\n    const value = styles[key];\n    if (value !== undefined) {\n      // Use stable stringify for consistent serialization regardless of key order\n      const serialized = stableStringify(value);\n      parts.push(`${key}:${serialized}`);\n      chunkStylesStr += serialized;\n    }\n  }\n\n  // Extract local predefined states from the full styles object\n  const localStates = extractLocalPredefinedStates(styles);\n\n  // Only include local predefined states that are actually referenced in this chunk\n  if (Object.keys(localStates).length > 0) {\n    const referencedStates = extractPredefinedStateRefs(chunkStylesStr);\n    const relevantLocalStates: string[] = [];\n\n    for (const stateName of referencedStates) {\n      if (localStates[stateName]) {\n        relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);\n      }\n    }\n\n    // Add relevant local states to the cache key (sorted for stability)\n    if (relevantLocalStates.length > 0) {\n      relevantLocalStates.sort();\n      parts.unshift(`[states:${relevantLocalStates.join('|')}]`);\n    }\n  }\n\n  // Use null character as separator (safe, not in JSON output)\n  return parts.join('\\0');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,SAAS,gBAAgB,OAAwB;AAC/C,KAAI,UAAU,KACZ,QAAO;AAET,KAAI,UAAU,OACZ,QAAO;AAET,KAAI,OAAO,UAAU,SACnB,QAAO,KAAK,UAAU,MAAM;AAE9B,KAAI,MAAM,QAAQ,MAAM,CACtB,QAAO,MAAM,MAAM,IAAI,gBAAgB,CAAC,KAAK,IAAI,GAAG;CAGtD,MAAM,MAAM;CACZ,MAAM,aAAa,OAAO,KAAK,IAAI,CAAC,MAAM;CAC1C,MAAM,QAAkB,EAAE;AAC1B,MAAK,MAAM,OAAO,WAChB,KAAI,IAAI,SAAS,OACf,OAAM,KAAK,GAAG,KAAK,UAAU,IAAI,CAAC,GAAG,gBAAgB,IAAI,KAAK,GAAG;AAGrE,QAAO,MAAM,MAAM,KAAK,IAAI,GAAG;;;;;;;;;;;;;;;;AAiBjC,SAAgB,sBACd,QACA,WACA,WACQ;CAER,MAAM,QAAkB,CAAC,UAAU;CAGnC,MAAM,aAAa,UAAU,OAAO,CAAC,MAAM;CAG3C,IAAI,iBAAiB;AAErB,MAAK,MAAM,OAAO,YAAY;EAC5B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,QAAW;GAEvB,MAAM,aAAa,gBAAgB,MAAM;AACzC,SAAM,KAAK,GAAG,IAAI,GAAG,aAAa;AAClC,qBAAkB;;;CAKtB,MAAM,cAAc,6BAA6B,OAAO;AAGxD,KAAI,OAAO,KAAK,YAAY,CAAC,SAAS,GAAG;EACvC,MAAM,mBAAmB,2BAA2B,eAAe;EACnE,MAAM,sBAAgC,EAAE;AAExC,OAAK,MAAM,aAAa,iBACtB,KAAI,YAAY,WACd,qBAAoB,KAAK,GAAG,UAAU,GAAG,YAAY,aAAa;AAKtE,MAAI,oBAAoB,SAAS,GAAG;AAClC,uBAAoB,MAAM;AAC1B,SAAM,QAAQ,WAAW,oBAAoB,KAAK,IAAI,CAAC,GAAG;;;AAK9D,QAAO,MAAM,KAAK,KAAK"}

package/dist/chunks/definitions.d.ts

@@ -0,0 +1,37 @@
+//#region src/chunks/definitions.d.ts
+declare const CHUNK_NAMES: {
+  /** Special chunk for styles that cannot be split (e.g., @starting-style) */readonly COMBINED: "combined";
+  readonly SUBCOMPONENTS: "subcomponents";
+  readonly APPEARANCE: "appearance";
+  readonly FONT: "font";
+  readonly DIMENSION: "dimension";
+  readonly DISPLAY: "display";
+  readonly LAYOUT: "layout";
+  readonly POSITION: "position";
+  readonly MISC: "misc";
+};
+type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];
+/**
+ * Pre-computed map for O(1) style-to-chunk lookup.
+ * Built once at module load time.
+ */
+declare const STYLE_TO_CHUNK: Map<string, ChunkName>;
+interface ChunkInfo {
+  /** Name of the chunk */
+  name: ChunkName | string;
+  /** Style keys belonging to this chunk */
+  styleKeys: string[];
+}
+/**
+ * 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)
+ */
+declare function categorizeStyleKeys(styles: Record<string, unknown>): Map<string, string[]>;
+//#endregion
+export { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys };
+//# sourceMappingURL=definitions.d.ts.map

package/dist/chunks/definitions.js

@@ -0,0 +1,259 @@
+import { isSelector } from "../pipeline/index.js";
+
+//#region src/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"
+];
+/**
+* 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/chunks/definitions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definitions.js","names":[],"sources":["../../src/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] 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 = new Map<string, ChunkName>();\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 = new Map<string, number>(\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;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,iCAAiB,IAAI,KAAwB;AAG1D,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;AAKuB,IAAI,IAC1B,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/chunks/renderChunk.js

@@ -0,0 +1,61 @@
+import { extractLocalPredefinedStates } from "../states/index.js";
+import { renderStyles } from "../pipeline/index.js";
+import { CHUNK_NAMES } from "./definitions.js";
+
+//#region src/chunks/renderChunk.ts
+/**
+* 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/chunks/renderChunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderChunk.js","names":[],"sources":["../../src/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 type { RenderResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport { extractLocalPredefinedStates } from '../states';\nimport type { 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":";;;;;;;;;;;;;;;;;;;;;AA8BA,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"}