@cube-dev/ui-kit 0.114.0 → 0.116.0

package/dist/tasty/hooks/useRawCSS.js

@@ -0,0 +1,29 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { injectRawCSS } from "../injector/index.js";
+import { useInsertionEffect, useMemo, useRef } from "react";
+
+//#region src/tasty/hooks/useRawCSS.ts
+function useRawCSS(cssOrFactory, depsOrOptions, options) {
+	const isFactory = typeof cssOrFactory === "function";
+	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
+	const opts = isFactory ? options : depsOrOptions;
+	const css = useMemo(() => isFactory ? cssOrFactory() : cssOrFactory, isFactory ? deps ?? [] : [cssOrFactory]);
+	const disposeRef = useRef(null);
+	useInsertionEffect(() => {
+		disposeRef.current?.();
+		if (!css.trim()) {
+			disposeRef.current = null;
+			return;
+		}
+		const { dispose } = injectRawCSS(css, opts);
+		disposeRef.current = dispose;
+		return () => {
+			disposeRef.current?.();
+			disposeRef.current = null;
+		};
+	}, [css, opts?.root]);
+}
+
+//#endregion
+export { useRawCSS };
+//# sourceMappingURL=useRawCSS.js.map

package/dist/tasty/hooks/useRawCSS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRawCSS.js","names":[],"sources":["../../../src/tasty/hooks/useRawCSS.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { injectRawCSS } from '../injector';\n\ntype UseRawCSSOptions = { root?: Document | ShadowRoot };\n\n/**\n * Hook to inject raw CSS text directly without parsing.\n * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.\n *\n * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts\n * with tasty's chunked style sheets.\n *\n * @example Static CSS string\n * ```tsx\n * function GlobalStyles() {\n *   useRawCSS(`\n *     body {\n *       margin: 0;\n *       padding: 0;\n *       font-family: sans-serif;\n *     }\n *   `);\n *\n *   return null;\n * }\n * ```\n *\n * @example Factory function with dependencies (like useMemo)\n * ```tsx\n * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {\n *   useRawCSS(() => `\n *     :root {\n *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};\n *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};\n *     }\n *   `, [theme]);\n *\n *   return null;\n * }\n * ```\n *\n * @example With options\n * ```tsx\n * function ShadowStyles({ shadowRoot }) {\n *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });\n *   return null;\n * }\n * ```\n */\n\n// Overload 1: Static CSS string\nexport function useRawCSS(css: string, options?: UseRawCSSOptions): void;\n\n// Overload 2: Factory function with dependencies\nexport function useRawCSS(\n  factory: () => string,\n  deps: readonly unknown[],\n  options?: UseRawCSSOptions,\n): void;\n\n// Implementation\nexport function useRawCSS(\n  cssOrFactory: string | (() => string),\n  depsOrOptions?: readonly unknown[] | UseRawCSSOptions,\n  options?: UseRawCSSOptions,\n): void {\n  // Detect which overload is being used\n  const isFactory = typeof cssOrFactory === 'function';\n\n  // Parse arguments based on overload\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseRawCSSOptions | undefined);\n\n  // Memoize CSS - for factory functions, use provided deps; for strings, use the string itself\n  const css = useMemo(\n    () =>\n      isFactory ? (cssOrFactory as () => string)() : (cssOrFactory as string),\n\n    isFactory ? deps ?? [] : [cssOrFactory],\n  );\n\n  const disposeRef = useRef<(() => void) | null>(null);\n\n  useInsertionEffect(() => {\n    // Dispose previous injection if any\n    disposeRef.current?.();\n\n    if (!css.trim()) {\n      disposeRef.current = null;\n      return;\n    }\n\n    // Inject new CSS\n    const { dispose } = injectRawCSS(css, opts);\n    disposeRef.current = dispose;\n\n    // Cleanup on unmount or when css changes\n    return () => {\n      disposeRef.current?.();\n      disposeRef.current = null;\n    };\n  }, [css, opts?.root]);\n}\n"],"mappings":";;;;;AA8DA,SAAgB,UACd,cACA,eACA,SACM;CAEN,MAAM,YAAY,OAAO,iBAAiB;CAG1C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,MAAM,cAER,YAAa,cAA+B,GAAI,cAElD,YAAY,QAAQ,EAAE,GAAG,CAAC,aAAa,CACxC;CAED,MAAM,aAAa,OAA4B,KAAK;AAEpD,0BAAyB;AAEvB,aAAW,WAAW;AAEtB,MAAI,CAAC,IAAI,MAAM,EAAE;AACf,cAAW,UAAU;AACrB;;EAIF,MAAM,EAAE,YAAY,aAAa,KAAK,KAAK;AAC3C,aAAW,UAAU;AAGrB,eAAa;AACX,cAAW,WAAW;AACtB,cAAW,UAAU;;IAEtB,CAAC,KAAK,MAAM,KAAK,CAAC"}

package/dist/tasty/hooks/useStyles.d.ts

@@ -0,0 +1,41 @@
+
+import { Styles } from "../styles/types.js";
+
+//#region src/tasty/hooks/useStyles.d.ts
+/**
+ * Tasty styles object to generate CSS classes for.
+ * Can be undefined or empty object for no styles.
+ */
+type UseStylesOptions = Styles | undefined;
+interface UseStylesResult {
+  /**
+   * Generated className(s) to apply to the element.
+   * Can be empty string if no styles are provided.
+   * With chunking enabled, may contain multiple space-separated class names.
+   */
+  className: string;
+}
+/**
+ * Hook to generate CSS classes from Tasty styles.
+ * Handles style rendering, className allocation, and CSS injection.
+ *
+ * Uses chunking to split styles into logical groups for better caching
+ * and CSS reuse across components.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { className } = useStyles({
+ *     padding: '2x',
+ *     fill: '#purple',
+ *     radius: '1r',
+ *   });
+ *
+ *   return <div className={className}>Styled content</div>;
+ * }
+ * ```
+ */
+declare function useStyles(styles: UseStylesOptions): UseStylesResult;
+//#endregion
+export { UseStylesOptions, UseStylesResult, useStyles };
+//# sourceMappingURL=useStyles.d.ts.map

package/dist/tasty/hooks/useStyles.js

@@ -0,0 +1,170 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { stringifyStyles } from "../utils/styles.js";
+import { extractLocalProperties, hasLocalProperties } from "../properties/index.js";
+import { getGlobalKeyframes, hasGlobalKeyframes } from "../config.js";
+import { CHUNK_NAMES, categorizeStyleKeys } from "../chunks/definitions.js";
+import { generateChunkCacheKey } from "../chunks/cacheKey.js";
+import { renderStylesForChunk } from "../chunks/renderChunk.js";
+import { allocateClassName, inject, keyframes, property } from "../injector/index.js";
+import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames } from "../keyframes/index.js";
+import { resolveRecipes } from "../utils/resolve-recipes.js";
+import { useInsertionEffect, useMemo, useRef } from "react";
+
+//#region src/tasty/hooks/useStyles.ts
+/**
+* Check if styles contain @starting-style rules.
+*
+* @starting-style CSS cannot be applied via multiple class names because
+* of cascade - later rules override earlier ones. When @starting is detected,
+* we combine top-level styles into a single chunk but keep sub-element styles
+* in their own chunk for better caching.
+*/
+function containsStartingStyle(styleKey) {
+	return styleKey.includes("@starting");
+}
+/**
+* Render, cache-key, and allocate a className for a single chunk.
+* Returns a ProcessedChunk, or null if the chunk produces no CSS rules.
+*/
+function processChunk(styles, chunkName, styleKeys) {
+	if (styleKeys.length === 0) return null;
+	const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);
+	if (renderResult.rules.length === 0) return null;
+	const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);
+	const { className } = allocateClassName(cacheKey);
+	return {
+		name: chunkName,
+		styleKeys,
+		cacheKey,
+		renderResult,
+		className
+	};
+}
+/**
+* Merge chunk map entries for @starting-style partial chunking.
+*
+* All non-subcomponent chunks are merged into a single COMBINED entry,
+* while SUBCOMPONENTS stays separate. This preserves CSS cascade for
+* @starting-style while still allowing sub-element styles to cache independently.
+*/
+function mergeChunksForStartingStyle(chunkMap) {
+	const merged = /* @__PURE__ */ new Map();
+	const combinedKeys = [];
+	for (const [chunkName, keys] of chunkMap) if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) merged.set(CHUNK_NAMES.SUBCOMPONENTS, keys);
+	else combinedKeys.push(...keys);
+	if (combinedKeys.length > 0) {
+		const result = /* @__PURE__ */ new Map();
+		result.set(CHUNK_NAMES.COMBINED, combinedKeys);
+		for (const [k, v] of merged) result.set(k, v);
+		return result;
+	}
+	return merged;
+}
+/**
+* Get keyframes that are actually used in styles.
+* Returns null if no keyframes are used (fast path for zero overhead).
+*
+* Optimization order:
+* 1. Check if any keyframes are defined (local or global) - if not, return null
+* 2. Extract animation names from styles - if none, return null
+* 3. Merge and filter keyframes to only used ones
+*/
+function getUsedKeyframes(styles) {
+	const hasLocal = hasLocalKeyframes(styles);
+	const hasGlobal = hasGlobalKeyframes();
+	if (!hasLocal && !hasGlobal) return null;
+	const usedNames = extractAnimationNamesFromStyles(styles);
+	if (usedNames.size === 0) return null;
+	return filterUsedKeyframes(mergeKeyframes(hasLocal ? extractLocalKeyframes(styles) : null, hasGlobal ? getGlobalKeyframes() : null), usedNames);
+}
+/**
+* Hook to generate CSS classes from Tasty styles.
+* Handles style rendering, className allocation, and CSS injection.
+*
+* Uses chunking to split styles into logical groups for better caching
+* and CSS reuse across components.
+*
+* @example
+* ```tsx
+* function MyComponent() {
+*   const { className } = useStyles({
+*     padding: '2x',
+*     fill: '#purple',
+*     radius: '1r',
+*   });
+*
+*   return <div className={className}>Styled content</div>;
+* }
+* ```
+*/
+function useStyles(styles) {
+	const disposeRef = useRef([]);
+	const stylesRef = useRef({
+		key: "",
+		styles: void 0
+	});
+	const resolvedStyles = useMemo(() => {
+		if (!styles) return styles;
+		return resolveRecipes(styles);
+	}, [styles]);
+	const styleKey = useMemo(() => {
+		if (!resolvedStyles || Object.keys(resolvedStyles).length === 0) return "";
+		return stringifyStyles(resolvedStyles);
+	}, [resolvedStyles]);
+	if (stylesRef.current.key !== styleKey) stylesRef.current = {
+		key: styleKey,
+		styles: resolvedStyles
+	};
+	const processedChunks = useMemo(() => {
+		const currentStyles = stylesRef.current.styles;
+		if (!styleKey || !currentStyles) return [];
+		let chunkMap = categorizeStyleKeys(currentStyles);
+		if (containsStartingStyle(styleKey)) chunkMap = mergeChunksForStartingStyle(chunkMap);
+		const chunks = [];
+		for (const [chunkName, chunkStyleKeys] of chunkMap) {
+			const chunk = processChunk(currentStyles, chunkName, chunkStyleKeys);
+			if (chunk) chunks.push(chunk);
+		}
+		return chunks;
+	}, [styleKey]);
+	useInsertionEffect(() => {
+		disposeRef.current.forEach((dispose) => dispose?.());
+		disposeRef.current = [];
+		if (processedChunks.length === 0) return;
+		const currentStyles = stylesRef.current.styles;
+		const usedKeyframes = currentStyles ? getUsedKeyframes(currentStyles) : null;
+		let nameMap = null;
+		if (usedKeyframes) {
+			nameMap = /* @__PURE__ */ new Map();
+			for (const [name, steps] of Object.entries(usedKeyframes)) {
+				const result = keyframes(steps, { name });
+				const injectedName = result.toString();
+				if (injectedName !== name) nameMap.set(name, injectedName);
+				disposeRef.current.push(result.dispose);
+			}
+			if (nameMap.size === 0) nameMap = null;
+		}
+		if (currentStyles && hasLocalProperties(currentStyles)) {
+			const localProperties = extractLocalProperties(currentStyles);
+			if (localProperties) for (const [token, definition] of Object.entries(localProperties)) property(token, definition);
+		}
+		for (const chunk of processedChunks) if (chunk.renderResult.rules.length > 0) {
+			const { dispose } = inject(nameMap ? chunk.renderResult.rules.map((rule) => ({
+				...rule,
+				declarations: replaceAnimationNames(rule.declarations, nameMap)
+			})) : chunk.renderResult.rules, { cacheKey: chunk.cacheKey });
+			disposeRef.current.push(dispose);
+		}
+		return () => {
+			disposeRef.current.forEach((dispose) => dispose?.());
+			disposeRef.current = [];
+		};
+	}, [processedChunks]);
+	return { className: useMemo(() => {
+		return processedChunks.map((chunk) => chunk.className).join(" ");
+	}, [processedChunks]) };
+}
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=useStyles.js.map

package/dist/tasty/hooks/useStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyles.js","names":[],"sources":["../../../src/tasty/hooks/useStyles.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport {\n  categorizeStyleKeys,\n  CHUNK_NAMES,\n  generateChunkCacheKey,\n  renderStylesForChunk,\n} from '../chunks';\nimport { getGlobalKeyframes, hasGlobalKeyframes } from '../config';\nimport { allocateClassName, inject, keyframes, property } from '../injector';\nimport { KeyframesSteps, PropertyDefinition } from '../injector/types';\nimport {\n  extractAnimationNamesFromStyles,\n  extractLocalKeyframes,\n  filterUsedKeyframes,\n  hasLocalKeyframes,\n  mergeKeyframes,\n  replaceAnimationNames,\n} from '../keyframes';\nimport { RenderResult } from '../pipeline';\nimport { extractLocalProperties, hasLocalProperties } from '../properties';\nimport { Styles } from '../styles/types';\nimport { resolveRecipes } from '../utils/resolve-recipes';\nimport { stringifyStyles } from '../utils/styles';\n\n/**\n * Check if styles contain @starting-style rules.\n *\n * @starting-style CSS cannot be applied via multiple class names because\n * of cascade - later rules override earlier ones. When @starting is detected,\n * we combine top-level styles into a single chunk but keep sub-element styles\n * in their own chunk for better caching.\n */\nfunction containsStartingStyle(styleKey: string): boolean {\n  return styleKey.includes('@starting');\n}\n\n/**\n * Tasty styles object to generate CSS classes for.\n * Can be undefined or empty object for no styles.\n */\nexport type UseStylesOptions = Styles | undefined;\n\nexport interface UseStylesResult {\n  /**\n   * Generated className(s) to apply to the element.\n   * Can be empty string if no styles are provided.\n   * With chunking enabled, may contain multiple space-separated class names.\n   */\n  className: string;\n}\n\n/**\n * Information about a processed chunk\n */\ninterface ProcessedChunk {\n  name: string;\n  styleKeys: string[];\n  cacheKey: string;\n  renderResult: RenderResult;\n  className: string;\n}\n\n/**\n * Render, cache-key, and allocate a className for a single chunk.\n * Returns a ProcessedChunk, or null if the chunk produces no CSS rules.\n */\nfunction processChunk(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);\n  if (renderResult.rules.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const { className } = allocateClassName(cacheKey);\n\n  return { name: chunkName, styleKeys, cacheKey, renderResult, className };\n}\n\n/**\n * Merge chunk map entries for @starting-style partial chunking.\n *\n * All non-subcomponent chunks are merged into a single COMBINED entry,\n * while SUBCOMPONENTS stays separate. This preserves CSS cascade for\n * @starting-style while still allowing sub-element styles to cache independently.\n */\nfunction mergeChunksForStartingStyle(\n  chunkMap: Map<string, string[]>,\n): Map<string, string[]> {\n  const merged = new Map<string, string[]>();\n  const combinedKeys: string[] = [];\n\n  for (const [chunkName, keys] of chunkMap) {\n    if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) {\n      merged.set(CHUNK_NAMES.SUBCOMPONENTS, keys);\n    } else {\n      combinedKeys.push(...keys);\n    }\n  }\n\n  if (combinedKeys.length > 0) {\n    // Insert COMBINED first so it appears before SUBCOMPONENTS\n    const result = new Map<string, string[]>();\n    result.set(CHUNK_NAMES.COMBINED, combinedKeys);\n    for (const [k, v] of merged) {\n      result.set(k, v);\n    }\n    return result;\n  }\n\n  return merged;\n}\n\n/**\n * Get keyframes that are actually used in styles.\n * Returns null if no keyframes are used (fast path for zero overhead).\n *\n * Optimization order:\n * 1. Check if any keyframes are defined (local or global) - if not, return null\n * 2. Extract animation names from styles - if none, return null\n * 3. Merge and filter keyframes to only used ones\n */\nfunction getUsedKeyframes(\n  styles: Styles,\n): Record<string, KeyframesSteps> | null {\n  // Fast path: no keyframes defined anywhere\n  const hasLocal = hasLocalKeyframes(styles);\n  const hasGlobal = hasGlobalKeyframes();\n  if (!hasLocal && !hasGlobal) return null;\n\n  // Extract animation names from styles (not from rendered CSS - faster)\n  const usedNames = extractAnimationNamesFromStyles(styles);\n  if (usedNames.size === 0) return null;\n\n  // Merge local and global keyframes\n  const local = hasLocal ? extractLocalKeyframes(styles) : null;\n  const global = hasGlobal ? getGlobalKeyframes() : null;\n  const allKeyframes = mergeKeyframes(local, global);\n\n  // Filter to only used keyframes\n  return filterUsedKeyframes(allKeyframes, usedNames);\n}\n\n/**\n * Hook to generate CSS classes from Tasty styles.\n * Handles style rendering, className allocation, and CSS injection.\n *\n * Uses chunking to split styles into logical groups for better caching\n * and CSS reuse across components.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { className } = useStyles({\n *     padding: '2x',\n *     fill: '#purple',\n *     radius: '1r',\n *   });\n *\n *   return <div className={className}>Styled content</div>;\n * }\n * ```\n */\nexport function useStyles(styles: UseStylesOptions): UseStylesResult {\n  // Array of dispose functions for each chunk\n  const disposeRef = useRef<(() => void)[]>([]);\n\n  // Store styles by their stringified key to avoid recomputing when only reference changes\n  const stylesRef = useRef<{ key: string; styles: Styles | undefined }>({\n    key: '',\n    styles: undefined,\n  });\n\n  // Resolve recipes before any processing (zero overhead if no recipes configured)\n  const resolvedStyles = useMemo(() => {\n    if (!styles) return styles;\n    return resolveRecipes(styles);\n  }, [styles]);\n\n  // Compute style key - this is a primitive string that captures style content\n  const styleKey = useMemo(() => {\n    if (!resolvedStyles || Object.keys(resolvedStyles).length === 0) {\n      return '';\n    }\n    return stringifyStyles(resolvedStyles);\n  }, [resolvedStyles]);\n\n  // Update ref when styleKey changes (content actually changed)\n  if (stylesRef.current.key !== styleKey) {\n    stylesRef.current = { key: styleKey, styles: resolvedStyles };\n  }\n\n  // Process chunks: categorize, generate cache keys, render, and allocate classNames\n  // Only depends on styleKey (primitive), not styles object reference\n  const processedChunks: ProcessedChunk[] = useMemo(() => {\n    const currentStyles = stylesRef.current.styles;\n    if (!styleKey || !currentStyles) {\n      return [];\n    }\n\n    // Categorize style keys into chunks\n    let chunkMap = categorizeStyleKeys(\n      currentStyles as Record<string, unknown>,\n    );\n\n    // Partial chunking for styles containing @starting-style rules.\n    // @starting-style CSS cannot work with multiple class names due to cascade,\n    // so we merge all top-level chunks into one but keep sub-element styles separate.\n    if (containsStartingStyle(styleKey)) {\n      chunkMap = mergeChunksForStartingStyle(chunkMap);\n    }\n\n    // Process each chunk: render → cache key → allocate className\n    const chunks: ProcessedChunk[] = [];\n\n    for (const [chunkName, chunkStyleKeys] of chunkMap) {\n      const chunk = processChunk(currentStyles, chunkName, chunkStyleKeys);\n      if (chunk) {\n        chunks.push(chunk);\n      }\n    }\n\n    return chunks;\n  }, [styleKey]);\n\n  // Inject styles in insertion effect (avoids render phase side effects)\n  useInsertionEffect(() => {\n    // Cleanup all previous disposals\n    disposeRef.current.forEach((dispose) => dispose?.());\n    disposeRef.current = [];\n\n    // Fast path: no chunks to inject\n    if (processedChunks.length === 0) {\n      return;\n    }\n\n    const currentStyles = stylesRef.current.styles;\n\n    // Get keyframes that are actually used (returns null if none - zero overhead)\n    const usedKeyframes = currentStyles\n      ? getUsedKeyframes(currentStyles)\n      : null;\n\n    // Inject keyframes and build name map (only if we have keyframes)\n    let nameMap: Map<string, string> | null = null;\n\n    if (usedKeyframes) {\n      nameMap = new Map();\n      for (const [name, steps] of Object.entries(usedKeyframes)) {\n        const result = keyframes(steps, { name });\n        const injectedName = result.toString();\n        // Only add to map if name differs (optimization for replacement check)\n        if (injectedName !== name) {\n          nameMap.set(name, injectedName);\n        }\n        disposeRef.current.push(result.dispose);\n      }\n      // Clear map if no replacements needed\n      if (nameMap.size === 0) {\n        nameMap = null;\n      }\n    }\n\n    // Register local @properties if defined (no dispose needed - properties are permanent)\n    // Token formats: $name → --name, #name → --name-color (with auto syntax: '<color>')\n    // The injector.property() handles token parsing and auto-settings internally\n    // Note: Global properties are injected once when styles are first generated (see markStylesGenerated)\n    if (currentStyles && hasLocalProperties(currentStyles)) {\n      const localProperties = extractLocalProperties(currentStyles);\n      if (localProperties) {\n        for (const [token, definition] of Object.entries(localProperties)) {\n          // Pass the token directly - injector handles parsing\n          property(token, definition);\n        }\n      }\n    }\n\n    // Inject each chunk\n    for (const chunk of processedChunks) {\n      if (chunk.renderResult.rules.length > 0) {\n        // Replace animation names only if needed\n        const rulesToInject = nameMap\n          ? chunk.renderResult.rules.map((rule) => ({\n              ...rule,\n              declarations: replaceAnimationNames(rule.declarations, nameMap!),\n            }))\n          : chunk.renderResult.rules;\n\n        const { dispose } = inject(rulesToInject, {\n          cacheKey: chunk.cacheKey,\n        });\n        disposeRef.current.push(dispose);\n      }\n    }\n\n    return () => {\n      disposeRef.current.forEach((dispose) => dispose?.());\n      disposeRef.current = [];\n    };\n  }, [processedChunks]);\n\n  // Combine all chunk classNames\n  const className = useMemo(() => {\n    return processedChunks.map((chunk) => chunk.className).join(' ');\n  }, [processedChunks]);\n\n  return {\n    className,\n  };\n}\n"],"mappings":"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"}

package/dist/tasty/index.d.ts

@@ -0,0 +1,38 @@
+
+import { AtRuleContext, ParsedAdvancedState, StateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
+import { COMPUTE_FUNC_MAP, CSSMap, CUSTOM_UNITS, ComputeModel, DIRECTIONS, ParsedColor, RawStyleHandler, STATE_OPERATORS, STATE_OPERATOR_LIST, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "./utils/styles.js";
+import { NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames } from "./styles/types.js";
+import { RenderResult, StyleResult, isSelector, renderStyles } from "./pipeline/index.js";
+import { CacheMetrics, DisposeFunction, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from "./injector/types.js";
+import { StyleInjector } from "./injector/injector.js";
+import { SheetManager } from "./injector/sheet-manager.js";
+import { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "./injector/index.js";
+import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
+import { AllBaseProps, BaseProps, BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens } from "./types.js";
+import { AllBasePropsWithMods, Element, ElementsDefinition, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, tasty } from "./tasty.js";
+import { UseStylesOptions, UseStylesResult, useStyles } from "./hooks/useStyles.js";
+import { useGlobalStyles } from "./hooks/useGlobalStyles.js";
+import { useRawCSS } from "./hooks/useRawCSS.js";
+import { useKeyframes } from "./hooks/useKeyframes.js";
+import { UsePropertyOptions, useProperty } from "./hooks/useProperty.js";
+import "./hooks/index.js";
+import { TastyPlugin, TastyPluginFactory } from "./plugins/types.js";
+import { TastyConfig, configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
+import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
+import "./plugins/index.js";
+import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
+import "./chunks/index.js";
+import { filterBaseProps } from "./utils/filter-base-props.js";
+import { color } from "./utils/colors.js";
+import { _modAttrs } from "./utils/mod-attrs.js";
+import { styleHandlers } from "./styles/predefined.js";
+import "./styles/index.js";
+import { dotize } from "./utils/dotize.js";
+import { mergeStyles } from "./utils/merge-styles.js";
+import { resolveRecipes } from "./utils/resolve-recipes.js";
+import { deprecationWarning, warn } from "./utils/warnings.js";
+import { getDisplayName } from "./utils/get-display-name.js";
+import { hslToRgbValues, processTokens, stringifyTokens } from "./utils/process-tokens.js";
+import { TypographyPreset } from "../tokens/typography.js";
+import { generateTypographyTokens } from "./utils/typography.js";
+import { tastyDebug } from "./debug.js";

package/dist/tasty/injector/index.d.ts

@@ -0,0 +1,158 @@
+
+import { StyleResult } from "../pipeline/index.js";
+import { CacheMetrics, DisposeFunction, GlobalInjectResult, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from "./types.js";
+import { StyleInjector } from "./injector.js";
+import { SheetManager } from "./sheet-manager.js";
+
+//#region src/tasty/injector/index.d.ts
+/**
+ * Allocate a className for a cacheKey without injecting styles yet
+ */
+declare function allocateClassName(cacheKey: string, options?: {
+  root?: Document | ShadowRoot;
+}): {
+  className: string;
+  isNewAllocation: boolean;
+};
+/**
+ * Inject styles and return className with dispose function
+ */
+declare function inject(rules: StyleResult[], options?: {
+  root?: Document | ShadowRoot;
+  cacheKey?: string;
+}): InjectResult;
+/**
+ * Inject global rules that should not reserve tasty class names
+ */
+declare function injectGlobal(rules: StyleResult[], options?: {
+  root?: Document | ShadowRoot;
+}): GlobalInjectResult;
+/**
+ * Inject raw CSS text directly without parsing
+ * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
+ * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
+ *
+ * @example
+ * ```tsx
+ * // Inject raw CSS
+ * const { dispose } = injectRawCSS(`
+ *   body { margin: 0; padding: 0; }
+ *   .my-class { color: red; }
+ * `);
+ *
+ * // Later, remove the injected CSS
+ * dispose();
+ * ```
+ */
+declare function injectRawCSS(css: string, options?: {
+  root?: Document | ShadowRoot;
+}): {
+  dispose: () => void;
+};
+/**
+ * Get raw CSS text for SSR
+ */
+declare function getRawCSSText(options?: {
+  root?: Document | ShadowRoot;
+}): string;
+/**
+ * Inject keyframes and return object with toString() and dispose()
+ */
+declare function keyframes(steps: KeyframesSteps, nameOrOptions?: string | {
+  root?: Document | ShadowRoot;
+  name?: string;
+}): KeyframesResult;
+interface PropertyOptions {
+  /**
+   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
+   */
+  syntax?: string;
+  /**
+   * Whether the property inherits from parent elements
+   * @default true
+   */
+  inherits?: boolean;
+  /**
+   * Initial value for the property
+   */
+  initialValue?: string | number;
+  /**
+   * Shadow root or document to inject into
+   */
+  root?: Document | ShadowRoot;
+}
+/**
+ * Define a CSS @property custom property.
+ * This enables advanced features like animating custom properties.
+ *
+ * Note: @property rules are global and persistent once defined.
+ * Re-registering the same property name is a no-op.
+ *
+ * @param name - The custom property name (must start with --)
+ * @param options - Property configuration
+ *
+ * @example
+ * ```ts
+ * // Define a color property that can be animated
+ * property('--my-color', {
+ *   syntax: '<color>',
+ *   initialValue: 'red',
+ * });
+ *
+ * // Define an angle property
+ * property('--rotation', {
+ *   syntax: '<angle>',
+ *   inherits: false,
+ *   initialValue: '0deg',
+ * });
+ * ```
+ */
+declare function property(name: string, options?: PropertyOptions): void;
+/**
+ * Check if a CSS @property has already been defined
+ *
+ * @param name - The custom property name to check
+ * @param options - Options including root
+ */
+declare function isPropertyDefined(name: string, options?: {
+  root?: Document | ShadowRoot;
+}): boolean;
+/**
+ * Get CSS text from all sheets (for SSR)
+ */
+declare function getCssText(options?: {
+  root?: Document | ShadowRoot;
+}): string;
+/**
+ * Collect only CSS used by a rendered subtree (like jest-styled-components).
+ * Pass the container returned by render(...).
+ */
+declare function getCssTextForNode(node: ParentNode | Element | DocumentFragment, options?: {
+  root?: Document | ShadowRoot;
+}): string;
+/**
+ * Force cleanup of unused rules
+ */
+declare function cleanup(root?: Document | ShadowRoot): void;
+/**
+ * Check if we're currently running in a test environment
+ */
+declare function getIsTestEnvironment(): boolean;
+/**
+ * Get the global injector instance for debugging
+ */
+declare const injector: {
+  readonly instance: StyleInjector;
+};
+/**
+ * Destroy all resources and clean up
+ */
+declare function destroy(root?: Document | ShadowRoot): void;
+/**
+ * Create a new isolated injector instance
+ */
+declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
+//#endregion
+export { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property };
+//# sourceMappingURL=index.d.ts.map

package/dist/tasty/injector/index.js

@@ -0,0 +1,155 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { SheetManager } from "./sheet-manager.js";
+import { StyleInjector } from "./injector.js";
+import { getConfig, getGlobalInjector, isTestEnvironment, markStylesGenerated } from "../config.js";
+
+//#region src/tasty/injector/index.ts
+/**
+* Allocate a className for a cacheKey without injecting styles yet
+*/
+function allocateClassName(cacheKey, options) {
+	return getGlobalInjector().allocateClassName(cacheKey, options);
+}
+/**
+* Inject styles and return className with dispose function
+*/
+function inject(rules, options) {
+	markStylesGenerated();
+	return getGlobalInjector().inject(rules, options);
+}
+/**
+* Inject global rules that should not reserve tasty class names
+*/
+function injectGlobal(rules, options) {
+	return getGlobalInjector().injectGlobal(rules, options);
+}
+/**
+* Inject raw CSS text directly without parsing
+* This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
+* The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
+*
+* @example
+* ```tsx
+* // Inject raw CSS
+* const { dispose } = injectRawCSS(`
+*   body { margin: 0; padding: 0; }
+*   .my-class { color: red; }
+* `);
+*
+* // Later, remove the injected CSS
+* dispose();
+* ```
+*/
+function injectRawCSS(css, options) {
+	return getGlobalInjector().injectRawCSS(css, options);
+}
+/**
+* Get raw CSS text for SSR
+*/
+function getRawCSSText(options) {
+	return getGlobalInjector().getRawCSSText(options);
+}
+/**
+* Inject keyframes and return object with toString() and dispose()
+*/
+function keyframes(steps, nameOrOptions) {
+	return getGlobalInjector().keyframes(steps, nameOrOptions);
+}
+/**
+* Define a CSS @property custom property.
+* This enables advanced features like animating custom properties.
+*
+* Note: @property rules are global and persistent once defined.
+* Re-registering the same property name is a no-op.
+*
+* @param name - The custom property name (must start with --)
+* @param options - Property configuration
+*
+* @example
+* ```ts
+* // Define a color property that can be animated
+* property('--my-color', {
+*   syntax: '<color>',
+*   initialValue: 'red',
+* });
+*
+* // Define an angle property
+* property('--rotation', {
+*   syntax: '<angle>',
+*   inherits: false,
+*   initialValue: '0deg',
+* });
+* ```
+*/
+function property(name, options) {
+	return getGlobalInjector().property(name, options);
+}
+/**
+* Check if a CSS @property has already been defined
+*
+* @param name - The custom property name to check
+* @param options - Options including root
+*/
+function isPropertyDefined(name, options) {
+	return getGlobalInjector().isPropertyDefined(name, options);
+}
+/**
+* Get CSS text from all sheets (for SSR)
+*/
+function getCssText(options) {
+	return getGlobalInjector().getCssText(options);
+}
+/**
+* Collect only CSS used by a rendered subtree (like jest-styled-components).
+* Pass the container returned by render(...).
+*/
+function getCssTextForNode(node, options) {
+	const classSet = /* @__PURE__ */ new Set();
+	const readClasses = (el) => {
+		const cls = el.getAttribute("class");
+		if (!cls) return;
+		for (const token of cls.split(/\s+/)) if (/^t\d+$/.test(token)) classSet.add(token);
+	};
+	if (node.getAttribute) readClasses(node);
+	const elements = node.querySelectorAll ? node.querySelectorAll("[class]") : [];
+	elements && elements.forEach(readClasses);
+	return getGlobalInjector().getCssTextForClasses(classSet, options);
+}
+/**
+* Force cleanup of unused rules
+*/
+function cleanup(root) {
+	return getGlobalInjector().cleanup(root);
+}
+/**
+* Check if we're currently running in a test environment
+*/
+function getIsTestEnvironment() {
+	return isTestEnvironment();
+}
+/**
+* Get the global injector instance for debugging
+*/
+const injector = { get instance() {
+	return getGlobalInjector();
+} };
+/**
+* Destroy all resources and clean up
+*/
+function destroy(root) {
+	return getGlobalInjector().destroy(root);
+}
+/**
+* Create a new isolated injector instance
+*/
+function createInjector(config = {}) {
+	return new StyleInjector({
+		...getConfig(),
+		forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),
+		...config
+	});
+}
+
+//#endregion
+export { allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property };
+//# sourceMappingURL=index.js.map

package/dist/tasty/injector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/tasty/injector/index.ts"],"sourcesContent":["import {\n  getConfig,\n  getGlobalInjector,\n  isTestEnvironment,\n  markStylesGenerated,\n} from '../config';\nimport { StyleResult } from '../pipeline';\n\nimport { StyleInjector } from './injector';\nimport {\n  DisposeFunction,\n  GlobalInjectResult,\n  InjectResult,\n  StyleInjectorConfig,\n} from './types';\n\n/**\n * Allocate a className for a cacheKey without injecting styles yet\n */\nexport function allocateClassName(\n  cacheKey: string,\n  options?: { root?: Document | ShadowRoot },\n): { className: string; isNewAllocation: boolean } {\n  return getGlobalInjector().allocateClassName(cacheKey, options);\n}\n\n/**\n * Inject styles and return className with dispose function\n */\nexport function inject(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot; cacheKey?: string },\n): InjectResult {\n  // Mark that styles have been generated (prevents configuration changes)\n  markStylesGenerated();\n\n  return getGlobalInjector().inject(rules, options);\n}\n\n/**\n * Inject global rules that should not reserve tasty class names\n */\nexport function injectGlobal(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot },\n): GlobalInjectResult {\n  return getGlobalInjector().injectGlobal(rules, options);\n}\n\n/**\n * Inject raw CSS text directly without parsing\n * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.\n * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.\n *\n * @example\n * ```tsx\n * // Inject raw CSS\n * const { dispose } = injectRawCSS(`\n *   body { margin: 0; padding: 0; }\n *   .my-class { color: red; }\n * `);\n *\n * // Later, remove the injected CSS\n * dispose();\n * ```\n */\nexport function injectRawCSS(\n  css: string,\n  options?: { root?: Document | ShadowRoot },\n): { dispose: () => void } {\n  return getGlobalInjector().injectRawCSS(css, options);\n}\n\n/**\n * Get raw CSS text for SSR\n */\nexport function getRawCSSText(options?: {\n  root?: Document | ShadowRoot;\n}): string {\n  return getGlobalInjector().getRawCSSText(options);\n}\n\n/**\n * Inject keyframes and return object with toString() and dispose()\n */\nexport function keyframes(\n  steps: import('./types').KeyframesSteps,\n  nameOrOptions?: string | { root?: Document | ShadowRoot; name?: string },\n): import('./types').KeyframesResult {\n  return getGlobalInjector().keyframes(steps, nameOrOptions);\n}\n\nexport interface PropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax\n   */\n  syntax?: string;\n  /**\n   * Whether the property inherits from parent elements\n   * @default true\n   */\n  inherits?: boolean;\n  /**\n   * Initial value for the property\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Define a CSS @property custom property.\n * This enables advanced features like animating custom properties.\n *\n * Note: @property rules are global and persistent once defined.\n * Re-registering the same property name is a no-op.\n *\n * @param name - The custom property name (must start with --)\n * @param options - Property configuration\n *\n * @example\n * ```ts\n * // Define a color property that can be animated\n * property('--my-color', {\n *   syntax: '<color>',\n *   initialValue: 'red',\n * });\n *\n * // Define an angle property\n * property('--rotation', {\n *   syntax: '<angle>',\n *   inherits: false,\n *   initialValue: '0deg',\n * });\n * ```\n */\nexport function property(name: string, options?: PropertyOptions): void {\n  return getGlobalInjector().property(name, options);\n}\n\n/**\n * Check if a CSS @property has already been defined\n *\n * @param name - The custom property name to check\n * @param options - Options including root\n */\nexport function isPropertyDefined(\n  name: string,\n  options?: { root?: Document | ShadowRoot },\n): boolean {\n  return getGlobalInjector().isPropertyDefined(name, options);\n}\n\n/**\n * Get CSS text from all sheets (for SSR)\n */\nexport function getCssText(options?: { root?: Document | ShadowRoot }): string {\n  return getGlobalInjector().getCssText(options);\n}\n\n/**\n * Collect only CSS used by a rendered subtree (like jest-styled-components).\n * Pass the container returned by render(...).\n */\nexport function getCssTextForNode(\n  node: ParentNode | Element | DocumentFragment,\n  options?: { root?: Document | ShadowRoot },\n): string {\n  // Collect tasty-generated class names (t<number>) from the subtree\n  const classSet = new Set<string>();\n\n  const readClasses = (el: Element) => {\n    const cls = el.getAttribute('class');\n    if (!cls) return;\n    for (const token of cls.split(/\\s+/)) {\n      if (/^t\\d+$/.test(token)) classSet.add(token);\n    }\n  };\n\n  // Include node itself if it's an Element\n  if ((node as Element).getAttribute) {\n    readClasses(node as Element);\n  }\n  // Walk descendants\n  const elements = (node as ParentNode).querySelectorAll\n    ? (node as ParentNode).querySelectorAll('[class]')\n    : ([] as unknown as NodeListOf<Element>);\n  elements && elements.forEach(readClasses);\n\n  return getGlobalInjector().getCssTextForClasses(classSet, options);\n}\n\n/**\n * Force cleanup of unused rules\n */\nexport function cleanup(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().cleanup(root);\n}\n\n/**\n * Check if we're currently running in a test environment\n */\nexport function getIsTestEnvironment(): boolean {\n  return isTestEnvironment();\n}\n\n/**\n * Get the global injector instance for debugging\n */\nexport const injector = {\n  get instance() {\n    return getGlobalInjector();\n  },\n};\n\n/**\n * Destroy all resources and clean up\n */\nexport function destroy(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().destroy(root);\n}\n\n/**\n * Create a new isolated injector instance\n */\nexport function createInjector(\n  config: Partial<StyleInjectorConfig> = {},\n): StyleInjector {\n  const defaultConfig = getConfig();\n\n  const fullConfig: StyleInjectorConfig = {\n    ...defaultConfig,\n    // Auto-enable forceTextInjection in test environments\n    forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),\n    ...config,\n  };\n\n  return new StyleInjector(fullConfig);\n}\n\n// Re-export types\nexport type {\n  StyleInjectorConfig,\n  InjectResult,\n  DisposeFunction,\n  RuleInfo,\n  SheetInfo,\n  RootRegistry,\n  StyleRule,\n  KeyframesInfo,\n  KeyframesResult,\n  KeyframesSteps,\n  KeyframesCacheEntry,\n  CacheMetrics,\n  RawCSSResult,\n  PropertyDefinition,\n} from './types';\n\nexport { StyleInjector } from './injector';\nexport { SheetManager } from './sheet-manager';\n"],"mappings":";;;;;;;;;AAmBA,SAAgB,kBACd,UACA,SACiD;AACjD,QAAO,mBAAmB,CAAC,kBAAkB,UAAU,QAAQ;;;;;AAMjE,SAAgB,OACd,OACA,SACc;AAEd,sBAAqB;AAErB,QAAO,mBAAmB,CAAC,OAAO,OAAO,QAAQ;;;;;AAMnD,SAAgB,aACd,OACA,SACoB;AACpB,QAAO,mBAAmB,CAAC,aAAa,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;AAoBzD,SAAgB,aACd,KACA,SACyB;AACzB,QAAO,mBAAmB,CAAC,aAAa,KAAK,QAAQ;;;;;AAMvD,SAAgB,cAAc,SAEnB;AACT,QAAO,mBAAmB,CAAC,cAAc,QAAQ;;;;;AAMnD,SAAgB,UACd,OACA,eACmC;AACnC,QAAO,mBAAmB,CAAC,UAAU,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkD5D,SAAgB,SAAS,MAAc,SAAiC;AACtE,QAAO,mBAAmB,CAAC,SAAS,MAAM,QAAQ;;;;;;;;AASpD,SAAgB,kBACd,MACA,SACS;AACT,QAAO,mBAAmB,CAAC,kBAAkB,MAAM,QAAQ;;;;;AAM7D,SAAgB,WAAW,SAAoD;AAC7E,QAAO,mBAAmB,CAAC,WAAW,QAAQ;;;;;;AAOhD,SAAgB,kBACd,MACA,SACQ;CAER,MAAM,2BAAW,IAAI,KAAa;CAElC,MAAM,eAAe,OAAgB;EACnC,MAAM,MAAM,GAAG,aAAa,QAAQ;AACpC,MAAI,CAAC,IAAK;AACV,OAAK,MAAM,SAAS,IAAI,MAAM,MAAM,CAClC,KAAI,SAAS,KAAK,MAAM,CAAE,UAAS,IAAI,MAAM;;AAKjD,KAAK,KAAiB,aACpB,aAAY,KAAgB;CAG9B,MAAM,WAAY,KAAoB,mBACjC,KAAoB,iBAAiB,UAAU,GAC/C,EAAE;AACP,aAAY,SAAS,QAAQ,YAAY;AAEzC,QAAO,mBAAmB,CAAC,qBAAqB,UAAU,QAAQ;;;;;AAMpE,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;AAM1C,SAAgB,uBAAgC;AAC9C,QAAO,mBAAmB;;;;;AAM5B,MAAa,WAAW,EACtB,IAAI,WAAW;AACb,QAAO,mBAAmB;GAE7B;;;;AAKD,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;AAM1C,SAAgB,eACd,SAAuC,EAAE,EAC1B;AAUf,QAAO,IAAI,cAP6B;EACtC,GAHoB,WAAW;EAK/B,oBAAoB,OAAO,sBAAsB,mBAAmB;EACpE,GAAG;EACJ,CAEmC"}