@tenphi/tasty 0.0.0-snapshot.2f99c73

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Andrey Yamanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,261 @@
+<p align="center">
+  <img src="assets/tasty.svg" width="128" height="128" alt="Tasty logo">
+</p>
+
+<h1 align="center">Tasty</h1>
+
+<p align="center">
+  A design-system-integrated styling system and DSL for concise, state-aware UI styling
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@tenphi/tasty"><img src="https://img.shields.io/npm/v/@tenphi/tasty.svg" alt="npm version"></a>
+  <a href="https://github.com/tenphi/tasty/actions/workflows/ci.yml"><img src="https://github.com/tenphi/tasty/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI"></a>
+  <a href="https://github.com/tenphi/tasty/blob/main/LICENSE"><img src="https://img.shields.io/github/license/tenphi/tasty" alt="license"></a>
+</p>
+
+---
+
+Tasty is a powerful CSS-in-JS styling system for React that combines declarative state-aware styling with design system integration. It provides a concise DSL for creating maintainable, themeable components with built-in support for responsive design, dark mode, container queries, and more.
+
+## Features
+
+- **Declarative state-aware styling** — style objects with state keys (`hovered`, `disabled`, `@media`, `@root`, etc.)
+- **Design token integration** — color tokens (`#purple`), custom units (`2x`, `1r`), typography presets
+- **Sub-element styling** — style inner elements via capitalized keys with `data-element` attributes
+- **Advanced state mapping** — media queries, container queries, root states, supports queries with boolean logic
+- **Zero-runtime mode** — Babel plugin extracts CSS at build time for static sites
+- **Plugin system** — extensible with custom color functions (OKHSL, etc.)
+- **React hooks** — `useStyles`, `useGlobalStyles`, `useRawCSS` for programmatic style injection
+- **Style extension** — compose and extend styled components with proper merge semantics
+- **Recipes** — named style bundles for reusable patterns
+- **TypeScript-first** — full type definitions with module augmentation support
+- **Tree-shakeable ESM** — unbundled output with `sideEffects: false`
+
+## Installation
+
+```bash
+pnpm add @tenphi/tasty
+```
+
+```bash
+npm install @tenphi/tasty
+```
+
+```bash
+yarn add @tenphi/tasty
+```
+
+## Quick Start
+
+### Creating Styled Components
+
+```tsx
+import { tasty } from '@tenphi/tasty';
+
+const Card = tasty({
+  as: 'div',
+  styles: {
+    padding: '4x',
+    fill: '#white',
+    border: true,
+    radius: true,
+  },
+});
+
+<Card>Hello World</Card>
+```
+
+### State-Based Styling
+
+```tsx
+const InteractiveCard = tasty({
+  styles: {
+    fill: {
+      '': '#white',
+      'hovered': '#gray.05',
+      'pressed': '#gray.10',
+      '@media(w < 768px)': '#surface',
+    },
+    padding: {
+      '': '4x',
+      '@media(w < 768px)': '2x',
+    },
+  },
+});
+```
+
+### Extending Components
+
+```tsx
+import { Button } from 'my-ui-lib';
+
+const PrimaryButton = tasty(Button, {
+  styles: {
+    fill: '#purple',
+    color: '#white',
+    padding: '2x 4x',
+  },
+});
+```
+
+### Configuration
+
+```tsx
+import { configure } from '@tenphi/tasty';
+
+configure({
+  states: {
+    '@mobile': '@media(w < 768px)',
+    '@dark': '@root(theme=dark)',
+  },
+  recipes: {
+    card: {
+      padding: '4x',
+      fill: '#surface',
+      radius: '1r',
+      border: true,
+    },
+  },
+});
+```
+
+## Entry Points
+
+| Import | Description | Platform |
+|--------|-------------|----------|
+| `@tenphi/tasty` | Runtime style engine | Browser |
+| `@tenphi/tasty/static` | Build-time static style generation | Browser |
+| `@tenphi/tasty/babel-plugin` | Babel plugin for zero-runtime | Node |
+| `@tenphi/tasty/zero` | Programmatic extraction API | Node |
+| `@tenphi/tasty/next` | Next.js integration wrapper | Node |
+
+## Core Concepts
+
+### Design Tokens
+
+```tsx
+const TokenCard = tasty({
+  styles: {
+    fill: '#surface',        // Color token → var(--surface-color)
+    color: '#text',          // Color token
+    padding: '2x',           // Gap multiplier → calc(var(--gap) * 2)
+    radius: '1r',            // Border radius → var(--radius)
+    border: '1bw solid #border',
+  },
+});
+```
+
+### Sub-Element Styling
+
+```tsx
+const Card = tasty({
+  styles: {
+    padding: '4x',
+    Title: { preset: 'h3', color: '#primary' },
+    Content: { color: '#text' },
+  },
+  elements: {
+    Title: 'h2',
+    Content: 'div',
+  },
+});
+
+<Card>
+  <Card.Title>Title</Card.Title>
+  <Card.Content>Content</Card.Content>
+</Card>
+```
+
+### Hooks
+
+```tsx
+import { useStyles, useGlobalStyles } from '@tenphi/tasty';
+
+function MyComponent() {
+  const { className } = useStyles({
+    padding: '2x',
+    fill: '#surface',
+  });
+
+  useGlobalStyles('.card', {
+    border: '1bw solid #border',
+    radius: '1r',
+  });
+
+  return <div className={className}>Styled</div>;
+}
+```
+
+### Zero-Runtime Mode
+
+```tsx
+import { tastyStatic } from '@tenphi/tasty/static';
+
+const button = tastyStatic({
+  display: 'inline-flex',
+  padding: '2x 4x',
+  fill: '#purple',
+  color: '#white',
+});
+
+<button className={button}>Click me</button>
+```
+
+Configure the Babel plugin:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['@tenphi/tasty/babel-plugin', { output: 'public/tasty.css' }],
+  ],
+};
+```
+
+## Built-in Units
+
+| Unit | Description | Example | CSS Output |
+|------|-------------|---------|------------|
+| `x` | Gap multiplier | `2x` | `calc(var(--gap) * 2)` |
+| `r` | Border radius | `1r` | `var(--radius)` |
+| `cr` | Card border radius | `1cr` | `var(--card-radius)` |
+| `bw` | Border width | `2bw` | `calc(var(--border-width) * 2)` |
+| `ow` | Outline width | `1ow` | `var(--outline-width)` |
+| `fs` | Font size | `1fs` | `var(--font-size)` |
+| `lh` | Line height | `1lh` | `var(--line-height)` |
+| `sf` | Stable fraction | `1sf` | `minmax(0, 1fr)` |
+
+## `tasty` vs `tastyStatic`
+
+Tasty ships two styling APIs with different trade-offs. Pick the one that fits your project:
+
+| | `tasty` (runtime) | `tastyStatic` (zero-runtime) |
+|---|---|---|
+| **Framework** | React only | Framework-agnostic (requires Babel) |
+| **Import** | `@tenphi/tasty` | `@tenphi/tasty/static` |
+| **Output** | React component | CSS class name (string) |
+| **CSS injection** | At runtime via `<style>` tags | At build time via Babel plugin |
+| **Runtime overhead** | Style generation + injection on mount | None — CSS is pre-extracted |
+| **Requires Babel plugin** | No | Yes (`@tenphi/tasty/babel-plugin`) |
+| **Component creation** | `tasty({ as, styles, ... })` | `tastyStatic({ ... })` returns a class |
+| **Extending components** | `tasty(BaseComponent, { styles })` | `tastyStatic(baseStyle, { ... })` |
+| **Global / selector styles** | `useGlobalStyles(selector, styles)` | `tastyStatic(selector, styles)` |
+| **Style props at runtime** | Yes — `styleProps`, `styles`, `mods` | No — all values must be static |
+| **Dynamic values** | Fully supported | Only via CSS custom properties |
+| **Sub-elements** | Built-in (`elements` + `<C.Title>`) | Manual (use `data-element` + CSS) |
+| **Variants** | Built-in (`variants` option) | Manual (create separate static styles) |
+| **Tokens** | `tokens` prop → inline CSS vars | `processTokens()` helper |
+| **Design tokens & units** | Full support (`#color`, `2x`, `1r`) | Full support (`#color`, `2x`, `1r`) |
+| **State mappings** | Full support (modifiers, media, etc.) | Full support (modifiers, media, etc.) |
+| **Recipes** | Supported via `configure()` | Supported via Babel plugin config |
+| **Best for** | Interactive React apps, design systems | Static sites, landing pages, SSG |
+
+## Documentation
+
+- [Runtime API (tasty)](docs/tasty.md) — Full runtime styling documentation
+- [Zero Runtime (tastyStatic)](docs/tasty-static.md) — Build-time static styling documentation
+
+## License
+
+[MIT](LICENSE)

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.d.ts

@@ -0,0 +1 @@
+import "../styles/types.js";

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,260 @@
+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",
+	"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