/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-f1f3d22 | 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, categorizeStyleKeys };
//# sourceMappingURL=definitions.js.map