@tenphi/tasty 0.0.0-snapshot.1d29633 → 0.0.0-snapshot.1f1c00a

package/dist/index.js

@@ -1,921 +1,11 @@
-import { $ as SheetManager, A as FLOW_STYLES, At as STYLE_TO_CHUNK, B as createStateParserContext, Bt as getGlobalParser, C as BASE_STYLES, Ct as APPEARANCE_CHUNK_STYLES, D as COLOR_STYLES, Dt as FONT_CHUNK_STYLES, E as BLOCK_STYLES, Et as DISPLAY_CHUNK_STYLES, Ft as registerFunctionPolyfill, G as StyleInjector, Gt as stringifyStyles, Ht as normalizeColorTokenValue, I as isSelector, Jt as okhslFunction, Kt as okhstFunction, L as renderStyles, Lt as CUSTOM_UNITS, M as OUTER_STYLES, Mt as formatFunctionRule, N as POSITION_STYLES, O as CONTAINER_STYLES, Ot as LAYOUT_CHUNK_STYLES, P as TEXT_STYLES, Pt as parseFunctionName, Qt as StyleParser, R as parseStateKey, Rt as DIRECTIONS, S as baseStylePropsRegistry, St as propHandlerRegistry, T as BLOCK_OUTER_STYLES, Tt as DIMENSION_CHUNK_STYLES, U as getGlobalPredefinedStates, Ut as parseColor, Vt as getGlobalPredefinedTokens, W as setGlobalPredefinedStates, Wt as parseStyle, X as fontFaceContentHash, Xt as createColorFunc, Yt as okhslPlugin, Z as formatFontFaceRule, _ as isFunctionsPolyfillEnabled, _t as hashString, a as getGlobalCounterStyles, an as hslToRgbValues, at as closeBatchWindow, b as resetConfig, c as getGlobalInjector, ct as openBatchWindow, dt as DEFAULT_ZERO_NAME_PREFIX, en as resolveFunctionColor, f as getNamePrefix, g as isConfigLocked, h as hasStylesGenerated, in as hexToRgb, j as INNER_STYLES, k as DIMENSION_STYLES, kt as POSITION_CHUNK_STYLES, l as getGlobalKeyframes, lt as resetStyleBatch, m as hasGlobalRecipes, mt as makeKeyframeName, n as getConfig, nn as getNamedColorHex, nt as styleHandlers, o as getGlobalFontFaces, on as strToRgb, ot as flushStyles, p as hasGlobalKeyframes, pt as makeCounterStyleName, q as formatCounterStyleRule, qt as okhstPlugin, rn as getRgbValuesFromRgbaString, s as getGlobalFunctions, st as hasPendingStyleWrites, t as configure, tt as defineHandler, u as getGlobalRecipes, ut as DEFAULT_NAME_PREFIX, v as isTestEnvironment, w as BLOCK_INNER_STYLES, wt as CHUNK_NAMES, x as generateTypographyTokens, zt as filterMods } from "./config-DF93rL3u.js";
-import { l as categorizeStyleKeys } from "./keyframes-BedEzEXk.js";
-import { A as property, C as getRawCSSText, D as injector, E as injectRawCSS, M as ChunkSheetRegistry, N as chunkSheetRegistry, O as isPropertyDefined, S as getCSSTextForNode, T as injectGlobal, _ as destroy, a as color, b as gc, c as hasKeys, d as collectAutoInferredPropertiesRSC, f as getStyleTarget, g as createInjector, h as counterStyle, i as _modAttrs, j as touch, k as keyframes, l as formatKeyframesCSS, m as cleanup, n as processTokens, o as filterBaseProps, p as pushRSCCSS, r as dotize, s as computeStyles, t as tastyDebug, u as collectAutoInferredProperties, v as fontFace, w as inject, x as getCSSText, y as func } from "./core-B5ybnMP1.js";
-import { n as formatPropertyCSS } from "./format-rules-Cs4e3M9m.js";
-import { t as mergeStyles } from "./merge-styles-CkAcnd0Z.js";
-import { t as resolveRecipes } from "./resolve-recipes-CiyLtJG9.js";
-import { t as getTastySSRContext } from "./context-CA8YKeMn.js";
-import { t as formatGlobalRules } from "./format-global-rules-DklyaXv-.js";
-import { Fragment, createElement, forwardRef, useContext, useInsertionEffect } from "react";
-//#region src/utils/get-display-name.ts
-const DEFAULT_NAME = "Anonymous";
-function getDisplayName(Component, fallbackName = DEFAULT_NAME) {
-	if (typeof Component === "function") return Component.displayName ?? Component.name ?? fallbackName;
-	return fallbackName;
-}
-//#endregion
-//#region src/utils/is-valid-element-type.ts
-/**
-* Lightweight replacement for `react-is`'s isValidElementType.
-* Detects string tags, function/class components, and React exotic types
-* (forwardRef, memo, lazy, etc.) via their internal $$typeof symbol.
-*/
-function isValidElementType(value) {
-	if (typeof value === "string" || typeof value === "function") return true;
-	if (typeof value === "object" && value !== null) return typeof value.$$typeof === "symbol";
-	return false;
-}
-//#endregion
-//#region src/tasty.tsx
-/**
-* Precalculated entries for performance optimization
-*/
-const IS_PROPERTIES_ENTRIES = Object.entries({
-	isDisabled: "disabled",
-	isHidden: "hidden",
-	isChecked: "checked"
-});
-/**
-* Helper function to handle is* properties consistently
-* Transforms is* props to HTML attributes and adds corresponding data-* attributes
-*/
-function handleIsProperties(props) {
-	for (const [isProperty, targetAttribute] of IS_PROPERTIES_ENTRIES) {
-		if (isProperty in props) {
-			props[targetAttribute] = props[isProperty];
-			delete props[isProperty];
-		}
-		const dataAttribute = `data-${targetAttribute}`;
-		if (!(dataAttribute in props) && props[targetAttribute]) props[dataAttribute] = "";
-	}
-}
-/**
-* Creates a sub-element component for compound component patterns.
-* Sub-elements are lightweight components with data-element attribute for CSS targeting.
-*/
-function createSubElement(elementName, definition) {
-	const config = typeof definition === "string" ? { as: definition } : definition;
-	const tag = config.as ?? "div";
-	const defaultQa = config.qa;
-	const defaultQaVal = config.qaVal;
-	const SubElement = forwardRef((props, ref) => {
-		const { qa, qaVal, mods, tokens, isDisabled, isHidden, isChecked, className, style, ...htmlProps } = props;
-		let modDataAttrs;
-		if (mods) modDataAttrs = _modAttrs(mods);
-		const tokenStyle = tokens ? processTokens(tokens) : void 0;
-		let mergedStyle;
-		if (tokenStyle || style) mergedStyle = tokenStyle && style ? {
-			...tokenStyle,
-			...style
-		} : tokenStyle ?? style;
-		const elementProps = {
-			"data-element": elementName,
-			"data-qa": qa ?? defaultQa,
-			"data-qaval": qaVal ?? defaultQaVal,
-			...modDataAttrs || {},
-			...htmlProps,
-			className,
-			style: mergedStyle,
-			isDisabled,
-			isHidden,
-			isChecked,
-			ref
-		};
-		handleIsProperties(elementProps);
-		if (elementProps["data-qa"] === void 0) delete elementProps["data-qa"];
-		if (elementProps["data-qaval"] === void 0) delete elementProps["data-qaval"];
-		return createElement(tag, elementProps);
-	});
-	SubElement.displayName = `SubElement(${elementName})`;
-	return SubElement;
-}
-/**
-* Pre-compute the mapping from prop name to token key at component-creation time.
-* Array form: `'progress'` -> `'$progress'`, `'accentColor'` -> `'#accent'`.
-* Object form: entries used as-is.
-*/
-function buildTokenPropsMapping(def) {
-	if (Array.isArray(def)) return def.map((propName) => {
-		if (propName.endsWith("Color") && propName.length > 5) return [propName, `#${propName.slice(0, -5)}`];
-		return [propName, `$${propName}`];
-	});
-	return Object.entries(def);
-}
-function tasty(Component, options) {
-	if (isValidElementType(Component)) return tastyWrap(Component, options);
-	return tastyElement(Component);
-}
-function tastyWrap(Component, options) {
-	const { as: extendTag, element: extendElement, styleProps: _styleProps, modProps: _modProps, tokenProps: _tokenProps, variants: _variants, elements: _elements, ...defaultProps } = options ?? {};
-	const propsWithStyles = ["styles"].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith("Styles")));
-	const _WrappedComponent = forwardRef((props, ref) => {
-		const { as, element, ...restProps } = props;
-		const mergedStylesMap = propsWithStyles.reduce((map, prop) => {
-			const restValue = restProps[prop];
-			const defaultValue = defaultProps[prop];
-			if (restValue != null && defaultValue != null) map[prop] = mergeStyles(defaultValue, restValue);
-			else map[prop] = restValue ?? defaultValue;
-			return map;
-		}, {});
-		return createElement(Component, {
-			...defaultProps,
-			...restProps,
-			...mergedStylesMap,
-			as: as ?? extendTag,
-			element: element || extendElement,
-			ref
-		});
-	});
-	_WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(Component, defaultProps.qa ?? extendTag ?? "Anonymous")})`;
-	return _WrappedComponent;
-}
-function tastyElement(tastyOptions) {
-	const { as: originalAs = "div", element: defaultElement, styles: defaultStyles, styleProps, modProps: modPropsDef, tokenProps: tokenPropsDef, variants, tokens: defaultTokens, elements, ...defaultProps } = tastyOptions;
-	let variantStylesMap;
-	if (variants) {
-		let baseStyles = defaultStyles;
-		let extensionStyles;
-		if (defaultStyles) for (const key of Object.keys(defaultStyles)) {
-			if (isSelector(key)) continue;
-			const value = defaultStyles[key];
-			if (typeof value === "object" && value !== null && !Array.isArray(value) && !("" in value)) {
-				if (!extensionStyles) {
-					baseStyles = { ...defaultStyles };
-					extensionStyles = {};
-				}
-				extensionStyles[key] = value;
-				delete baseStyles[key];
-			}
-		}
-		variantStylesMap = Object.entries(variants).reduce((map, [variant, variantStyles]) => {
-			map[variant] = extensionStyles ? mergeStyles(baseStyles, variantStyles, extensionStyles) : mergeStyles(baseStyles, variantStyles);
-			return map;
-		}, {});
-		if (!variantStylesMap["default"]) variantStylesMap["default"] = defaultStyles;
-	}
-	const { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
-	const ownPropsToCheck = styleProps ? styleProps.concat(BASE_STYLES) : BASE_STYLES;
-	let propsToCheck = ownPropsToCheck;
-	let propsToCheckVersion = -1;
-	const modPropsKeys = modPropsDef ? Array.isArray(modPropsDef) ? modPropsDef : Object.keys(modPropsDef) : void 0;
-	const tokenPropsMapping = tokenPropsDef ? buildTokenPropsMapping(tokenPropsDef) : void 0;
-	const classNameCache = /* @__PURE__ */ new Map();
-	const _TastyComponent = forwardRef((incomingProps, ref) => {
-		const applyPropHandlers = propHandlerRegistry.apply;
-		const { as, styles: rawStyles, variant, mods, element, qa, qaVal, className: userClassName, tokens, style, theme, ...otherProps } = applyPropHandlers ? applyPropHandlers(incomingProps) : incomingProps;
-		let styles = rawStyles;
-		let propStyles = null;
-		if (propsToCheckVersion !== baseStylePropsRegistry.version) {
-			const promoted = baseStylePropsRegistry.list;
-			propsToCheck = promoted.length === 0 ? ownPropsToCheck : ownPropsToCheck.concat(promoted);
-			propsToCheckVersion = baseStylePropsRegistry.version;
-		}
-		for (const prop of propsToCheck) {
-			const key = prop;
-			if (key in otherProps) {
-				if (!propStyles) propStyles = {};
-				const value = otherProps[key];
-				propStyles[key] = value;
-				delete otherProps[key];
-			}
-		}
-		if (!styles || styles && !hasKeys(styles)) styles = void 0;
-		let propMods;
-		if (modPropsKeys) {
-			for (const key of modPropsKeys) if (key in otherProps) {
-				if (!propMods) propMods = {};
-				propMods[key] = otherProps[key];
-				delete otherProps[key];
-			}
-		}
-		let propTokens;
-		if (tokenPropsMapping) {
-			for (const [propName, tokenKey] of tokenPropsMapping) if (propName in otherProps) {
-				if (!propTokens) propTokens = {};
-				propTokens[tokenKey] = otherProps[propName];
-				delete otherProps[propName];
-			}
-		}
-		const baseStyles = variantStylesMap ? variantStylesMap[variant || "default"] ?? variantStylesMap["default"] : defaultStyles;
-		const hasInstanceStyles = styles && hasKeys(styles);
-		const hasPropStyles = propStyles && hasKeys(propStyles);
-		const allStyles = hasInstanceStyles || hasPropStyles ? mergeStyles(baseStyles, styles, propStyles) : baseStyles;
-		const useFactoryCache = typeof document !== "undefined";
-		let stylesResult;
-		if (useFactoryCache && allStyles === baseStyles && classNameCache.has(allStyles)) {
-			stylesResult = { className: classNameCache.get(allStyles) };
-			touch(stylesResult.className);
-		} else {
-			stylesResult = computeStyles(allStyles);
-			if (useFactoryCache && allStyles === baseStyles) classNameCache.set(allStyles, stylesResult.className);
-		}
-		let mergedTokens;
-		if (defaultTokens || tokens || propTokens) if (!defaultTokens && !propTokens) mergedTokens = tokens;
-		else if (!tokens && !propTokens) mergedTokens = defaultTokens;
-		else mergedTokens = {
-			...defaultTokens,
-			...tokens,
-			...propTokens
-		};
-		const processedTokenStyle = processTokens(mergedTokens);
-		let mergedStyle;
-		if (processedTokenStyle || style) if (!processedTokenStyle) mergedStyle = style;
-		else if (!style) mergedStyle = processedTokenStyle;
-		else mergedStyle = {
-			...processedTokenStyle,
-			...style
-		};
-		const mergedMods = propMods ? {
-			...mods,
-			...propMods
-		} : mods;
-		let modDataAttrs;
-		if (mergedMods) modDataAttrs = _modAttrs(mergedMods);
-		const finalClassName = [userClassName || "", stylesResult.className].filter(Boolean).join(" ");
-		const elementProps = {
-			"data-element": element || defaultElement,
-			"data-qa": qa || defaultQa,
-			"data-qaval": qaVal || defaultQaVal,
-			"data-theme": theme,
-			...otherDefaultProps,
-			...modDataAttrs || {},
-			...otherProps,
-			className: finalClassName,
-			style: mergedStyle,
-			ref
-		};
-		handleIsProperties(elementProps);
-		if (elementProps["data-theme"] === void 0) delete elementProps["data-theme"];
-		const el = createElement(as ?? originalAs, elementProps);
-		if (stylesResult.css) {
-			const nonce = getConfig().nonce;
-			return createElement(Fragment, null, createElement("style", {
-				"data-tasty-rsc": "",
-				nonce,
-				dangerouslySetInnerHTML: { __html: stylesResult.css }
-			}), el);
-		}
-		return el;
-	});
-	_TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
-	if (elements) {
-		const subElements = Object.entries(elements).reduce((acc, [name, definition]) => {
-			acc[name] = createSubElement(name, definition);
-			return acc;
-		}, {});
-		return Object.assign(_TastyComponent, subElements);
-	}
-	return _TastyComponent;
-}
-const Element = tasty({});
-//#endregion
-//#region src/hooks/useStyles.ts
-/**
-* Hook to generate CSS classes from Tasty styles.
-* Thin wrapper around `computeStyles()` that adds React context-based
-* SSR collector discovery for backward compatibility with TastyRegistry.
-*
-* For hook-free usage (e.g. in server components), use `computeStyles()` directly.
-*
-* @example
-* ```tsx
-* function MyComponent() {
-*   const { className } = useStyles({
-*     padding: '2x',
-*     fill: '#purple',
-*     radius: '1r',
-*   });
-*
-*   return <div className={className}>Styled content</div>;
-* }
-* ```
-*/
-function useStyles(styles, options) {
-	return computeStyles(styles, {
-		ssrCollector: useContext(getTastySSRContext()),
-		root: options?.root
-	});
-}
-//#endregion
-//#region src/utils/client-state.ts
-/**
-* Build a per-(injector, root) client state cache for the standalone style
-* functions (`useGlobalStyles`, `useRawCSS`, `useKeyframes`, `useCounterStyle`).
-*
-* Two levels, both weak:
-*
-* - **injector** — `configure()` replaces the global injector, and every dispose
-*   handle and generated name we cache belongs to the one that produced it.
-*   Keying by injector makes stale state fall away with it, instead of letting
-*   change-detection keys suppress re-injection into the new sheets.
-* - **root** — the same selector or slot name can be used in several shadow
-*   roots, and each holds its own injection.
-*/
-function createClientState(create) {
-	const byInjector = /* @__PURE__ */ new WeakMap();
-	return (root) => {
-		const injector = getGlobalInjector();
-		let byRoot = byInjector.get(injector);
-		if (!byRoot) {
-			byRoot = /* @__PURE__ */ new WeakMap();
-			byInjector.set(injector, byRoot);
-		}
-		let state = byRoot.get(root);
-		if (!state) {
-			state = create();
-			byRoot.set(root, state);
-		}
-		return state;
-	};
-}
-//#endregion
-//#region src/hooks/useGlobalStyles.ts
-const getClientGlobalSlots = createClientState(() => /* @__PURE__ */ new Map());
-const noop = () => {};
-/**
-* Inject global styles for a given selector.
-* Useful for styling elements by selector without generating classNames.
-*
-* SSR-aware: when a ServerStyleCollector is available, CSS is collected
-* during the render phase instead of being injected into the DOM.
-*
-* Works in all environments: client, SSR with collector, and React Server Components.
-*
-* Injected styles are permanent — they are not cleaned up on component unmount.
-* Use the `id` option for update tracking when styles change over the
-* component lifecycle.
-*
-* Update tracking is per-slot and per-root: a slot (`id`, or the selector when
-* no `id` is given) holds exactly one injection per `root`. Changing the styles
-* replaces it; rendering styles that produce no CSS clears it.
-*
-* @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
-* @param styles - Tasty styles object
-* @param options - Optional settings including `id` for update tracking
-*
-* @example
-* ```tsx
-* function MyComponent() {
-*   useGlobalStyles('.card', {
-*     padding: '2x',
-*     radius: '1r',
-*     fill: '#white',
-*   });
-*
-*   return <div className="card">Content</div>;
-* }
-* ```
-*/
-function useGlobalStyles(selector, styles, options) {
-	if (!styles) return;
-	if (!selector) {
-		console.warn("[Tasty] useGlobalStyles: selector is required and cannot be empty. Styles will not be injected.");
-		return;
-	}
-	const target = getStyleTarget();
-	const slots = target.mode === "client" ? getClientGlobalSlots(options?.root ?? document) : null;
-	const slotKey = options?.id ?? selector;
-	const stylesKey = slots ? JSON.stringify(styles) : "";
-	const existing = slots?.get(slotKey);
-	if (existing && existing.stylesKey === stylesKey) return;
-	const resolvedStyles = resolveRecipes(styles);
-	const styleResults = renderStyles(resolvedStyles, selector);
-	if (styleResults.length === 0) {
-		if (slots) {
-			existing?.dispose();
-			slots.set(slotKey, {
-				stylesKey,
-				dispose: noop
-			});
-		}
-		return;
-	}
-	if (target.mode === "ssr") {
-		target.collector.collectInternals();
-		const css = formatGlobalRules(styleResults);
-		if (css) {
-			const key = options?.id ? `global:${options.id}` : `global:${selector}:${hashString(css)}`;
-			target.collector.collectGlobalStyles(key, css, options?.id != null);
-		}
-		if (getConfig().autoPropertyTypes !== false) collectAutoInferredProperties(styleResults, target.collector, resolvedStyles);
-		return;
-	}
-	if (target.mode === "rsc") {
-		const css = formatGlobalRules(styleResults);
-		if (css) {
-			const key = options?.id ? `__global:${options.id}` : `__global:${selector}:${hashString(css)}`;
-			pushRSCCSS(target.cache, key, css, options?.id != null);
-		}
-		if (getConfig().autoPropertyTypes !== false) collectAutoInferredPropertiesRSC(styleResults, target.cache, resolvedStyles);
-		return;
-	}
-	if (slots) {
-		existing?.dispose();
-		const { dispose } = injectGlobal(styleResults, { root: options?.root });
-		slots.set(slotKey, {
-			stylesKey,
-			dispose
-		});
-	}
-}
-//#endregion
-//#region src/utils/deps-equal.ts
-/**
-* Shallow comparison of two dependency arrays using Object.is semantics.
-* Returns true when both arrays have the same length and every element
-* at the same index is identical.
-*/
-function depsEqual(a, b) {
-	if (a.length !== b.length) return false;
-	for (let i = 0; i < a.length; i++) if (!Object.is(a[i], b[i])) return false;
-	return true;
-}
-//#endregion
-//#region src/hooks/useRawCSS.ts
-const getClientState$1 = createClientState(() => ({
-	entries: /* @__PURE__ */ new Map(),
-	contentDedup: /* @__PURE__ */ new Set(),
-	factoryDeps: /* @__PURE__ */ new Map()
-}));
-/**
-* Inject raw CSS text directly without parsing.
-* This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.
-*
-* The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts
-* with tasty's chunked style sheets.
-*
-* Works in all environments: client, SSR with collector, and React Server Components.
-*
-* Injected styles are permanent — they are not cleaned up on component unmount.
-* Use the `id` option for update tracking when styles change over the
-* component lifecycle.
-*
-* @example Static CSS string
-* ```tsx
-* function GlobalStyles() {
-*   useRawCSS(`
-*     body {
-*       margin: 0;
-*       padding: 0;
-*       font-family: sans-serif;
-*     }
-*   `);
-*
-*   return null;
-* }
-* ```
-*
-* @example Factory function with dependencies
-* ```tsx
-* function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {
-*   useRawCSS(() => `
-*     :root {
-*       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};
-*       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};
-*     }
-*   `, [theme], { id: 'theme-vars' });
-*
-*   return null;
-* }
-* ```
-*
-* @example With options
-* ```tsx
-* function ShadowStyles({ shadowRoot }) {
-*   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });
-*   return null;
-* }
-* ```
-*/
-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 target = getStyleTarget();
-	const state = target.mode === "client" ? getClientState$1(opts?.root ?? document) : null;
-	if (isFactory && deps && opts?.id && state) {
-		const cachedDeps = state.factoryDeps.get(opts.id);
-		if (cachedDeps && depsEqual(cachedDeps, deps)) return;
-	}
-	const css = isFactory ? cssOrFactory() : cssOrFactory;
-	if (!css.trim()) return;
-	if (target.mode === "ssr") {
-		const key = opts?.id ? `raw:${opts.id}` : `raw:${hashString(css)}`;
-		target.collector.collectRawCSS(key, css, opts?.id != null);
-		return;
-	}
-	if (target.mode === "rsc") {
-		const key = opts?.id ? `__raw:${opts.id}` : `__raw:${hashString(css)}`;
-		pushRSCCSS(target.cache, key, css, opts?.id != null);
-		return;
-	}
-	if (!state) return;
-	const id = opts?.id;
-	if (id) {
-		const existing = state.entries.get(id);
-		if (existing) {
-			if (existing.contentKey === css) return;
-			existing.dispose();
-		}
-		const { dispose } = injectRawCSS(css, opts);
-		state.entries.set(id, {
-			contentKey: css,
-			dispose
-		});
-		if (deps) state.factoryDeps.set(id, deps);
-	} else {
-		const contentKey = hashString(css);
-		if (state.contentDedup.has(contentKey)) return;
-		state.contentDedup.add(contentKey);
-		injectRawCSS(css, opts);
-	}
-}
-//#endregion
-//#region src/hooks/useKeyframes.ts
-const getClientState = createClientState(() => ({
-	contentToName: /* @__PURE__ */ new Map(),
-	namedSlots: /* @__PURE__ */ new Map(),
-	factoryDeps: /* @__PURE__ */ new Map()
-}));
-function useKeyframes(stepsOrFactory, depsOrOptions, options) {
-	const isFactory = typeof stepsOrFactory === "function";
-	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
-	const opts = isFactory ? options : depsOrOptions;
-	const target = getStyleTarget();
-	const clientState = target.mode === "client" ? getClientState(opts?.root ?? document) : null;
-	if (isFactory && deps && opts?.name && clientState) {
-		const cached = clientState.factoryDeps.get(opts.name);
-		if (cached && depsEqual(cached.deps, deps)) return cached.name;
-	}
-	const steps = isFactory ? stepsOrFactory() : stepsOrFactory;
-	if (!steps || Object.keys(steps).length === 0) return "";
-	if (target.mode === "ssr") {
-		const actualName = target.collector.allocateKeyframeName(opts?.name);
-		const css = formatKeyframesCSS(actualName, steps);
-		target.collector.collectKeyframes(actualName, css);
-		return actualName;
-	}
-	if (target.mode === "rsc") {
-		const serializedContent = JSON.stringify(steps);
-		const key = `__kf:${opts?.name ?? ""}:${serializedContent}`;
-		const existingName = target.cache.generatedNames.get(key);
-		if (existingName) return existingName;
-		const actualName = opts?.name ?? makeKeyframeName(getNamePrefix(), hashString(serializedContent));
-		const css = formatKeyframesCSS(actualName, steps);
-		pushRSCCSS(target.cache, key, css);
-		target.cache.generatedNames.set(key, actualName);
-		return actualName;
-	}
-	const state = clientState ?? getClientState(opts?.root ?? document);
-	const serializedContent = JSON.stringify(steps);
-	const cacheKey = `${opts?.name ?? ""}:${serializedContent}`;
-	const cachedName = state.contentToName.get(cacheKey);
-	if (cachedName) return cachedName;
-	const providedName = opts?.name;
-	if (providedName) {
-		const slot = state.namedSlots.get(providedName);
-		if (slot && slot.cacheKey !== cacheKey) {
-			slot.dispose();
-			state.contentToName.delete(slot.cacheKey);
-			state.namedSlots.delete(providedName);
-		}
-	}
-	const result = keyframes(steps, {
-		name: providedName,
-		root: opts?.root
-	});
-	const name = result.toString();
-	state.contentToName.set(cacheKey, name);
-	if (providedName) {
-		state.namedSlots.set(providedName, {
-			cacheKey,
-			dispose: result.dispose
-		});
-		if (deps) state.factoryDeps.set(providedName, {
-			deps,
-			name
-		});
-	}
-	return name;
-}
-//#endregion
-//#region src/hooks/useProperty.ts
-/**
-* Register a CSS @property custom property.
-* This enables advanced features like animating custom properties.
-*
-* Note: @property rules are global and persistent once defined.
-* The function ensures the property is only registered once per root.
-*
-* Accepts tasty token syntax for the property name:
-* - `$name` → defines `--name`
-* - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
-* - `--name` → defines `--name` (legacy format)
-*
-* Works in all environments: client, SSR with collector, and React Server Components.
-*
-* @param name - The property token ($name, #name) or CSS property name (--name)
-* @param options - Property configuration
-*
-* @example Basic property with token syntax
-* ```tsx
-* function Spinner() {
-*   useProperty('$rotation', {
-*     syntax: '<angle>',
-*     inherits: false,
-*     initialValue: '0deg',
-*   });
-*
-*   return <div className="spinner" />;
-* }
-* ```
-*
-* @example Color property with token syntax (auto-sets syntax)
-* ```tsx
-* function MyComponent() {
-*   useProperty('#theme', {
-*     initialValue: 'red', // syntax: '<color>' is auto-set
-*   });
-*
-*   // Now --theme-color can be animated with CSS transitions
-*   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;
-* }
-* ```
-*
-* @example Legacy format (still supported)
-* ```tsx
-* function ResizableBox() {
-*   useProperty('--box-size', {
-*     syntax: '<length>',
-*     initialValue: '100px',
-*   });
-*
-*   return <div style={{ width: 'var(--box-size)' }} />;
-* }
-* ```
-*/
-function useProperty(name, options) {
-	if (!name) {
-		console.warn(`[Tasty] useProperty: property name is required`);
-		return;
-	}
-	const target = getStyleTarget();
-	if (target.mode === "ssr") {
-		target.collector.collectInternals();
-		const css = formatPropertyCSS(name, {
-			syntax: options?.syntax,
-			inherits: options?.inherits,
-			initialValue: options?.initialValue
-		});
-		if (css) target.collector.collectProperty(name, css);
-		return;
-	}
-	if (target.mode === "rsc") {
-		const css = formatPropertyCSS(name, {
-			syntax: options?.syntax,
-			inherits: options?.inherits,
-			initialValue: options?.initialValue
-		});
-		if (css) pushRSCCSS(target.cache, `__prop:${name}`, css);
-		return;
-	}
-	const injector = getGlobalInjector();
-	if (injector.isPropertyDefined(name, { root: options?.root })) return;
-	injector.property(name, {
-		syntax: options?.syntax,
-		inherits: options?.inherits,
-		initialValue: options?.initialValue,
-		root: options?.root
-	});
-}
-//#endregion
-//#region src/hooks/useFontFace.ts
-/**
-* Inject CSS @font-face rules.
-* Permanent — no cleanup on unmount. Deduplicates by content hash.
-*
-* Works in all environments: client, SSR with collector, and React Server Components.
-*
-* @param family - The font-family name
-* @param input - Single descriptor object or array of descriptors (for multiple weights/styles)
-* @param options - Optional settings (e.g. Shadow DOM root)
-*
-* @example Single weight
-* ```tsx
-* function App() {
-*   useFontFace('Brand Sans', {
-*     src: 'url("/fonts/brand-sans.woff2") format("woff2")',
-*     fontWeight: '400 700',
-*     fontDisplay: 'swap',
-*   });
-*
-*   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
-* }
-* ```
-*
-* @example Multiple weights
-* ```tsx
-* function App() {
-*   useFontFace('Brand Sans', [
-*     { src: 'url("/fonts/brand-regular.woff2") format("woff2")', fontWeight: 400, fontDisplay: 'swap' },
-*     { src: 'url("/fonts/brand-bold.woff2") format("woff2")', fontWeight: 700, fontDisplay: 'swap' },
-*   ]);
-*
-*   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
-* }
-* ```
-*/
-function useFontFace(family, input, options) {
-	if (!family) return;
-	const descriptors = Array.isArray(input) ? input : [input];
-	const target = getStyleTarget();
-	if (target.mode === "ssr") {
-		for (const desc of descriptors) {
-			const hash = fontFaceContentHash(family, desc);
-			const css = formatFontFaceRule(family, desc);
-			target.collector.collectFontFace(hash, css);
-		}
-		return;
-	}
-	if (target.mode === "rsc") {
-		for (const desc of descriptors) {
-			const hash = fontFaceContentHash(family, desc);
-			const css = formatFontFaceRule(family, desc);
-			pushRSCCSS(target.cache, `__ff:${hash}`, css);
-		}
-		return;
-	}
-	const injector = getGlobalInjector();
-	for (const desc of descriptors) injector.fontFace(family, desc, { root: options?.root });
-}
-//#endregion
-//#region src/hooks/useCounterStyle.ts
-let clientCounterStyleCounter = 0;
-const getClientContentToName = createClientState(() => /* @__PURE__ */ new Map());
-/**
-* Inject a CSS @counter-style rule and return the generated name.
-* Permanent — no cleanup on unmount. Deduplicates by name.
-*
-* Works in all environments: client, SSR with collector, and React Server Components.
-*
-* @example Basic usage
-* ```tsx
-* function EmojiList() {
-*   const styleName = useCounterStyle({
-*     system: 'cyclic',
-*     symbols: '"👍"',
-*     suffix: '" "',
-*   }, { name: 'thumbs' });
-*
-*   return (
-*     <ol style={{ listStyleType: styleName }}>
-*       <li>First</li>
-*       <li>Second</li>
-*     </ol>
-*   );
-* }
-* ```
-*
-*/
-function useCounterStyle(descriptors, options) {
-	if (!descriptors || !descriptors.system) return "";
-	const target = getStyleTarget();
-	if (target.mode === "ssr") {
-		const actualName = target.collector.allocateCounterStyleName(options?.name);
-		const css = formatCounterStyleRule(actualName, descriptors);
-		target.collector.collectCounterStyle(actualName, css);
-		return actualName;
-	}
-	if (target.mode === "rsc") {
-		const serializedContent = JSON.stringify(descriptors);
-		const key = `__cs:${options?.name ?? ""}:${serializedContent}`;
-		const existingName = target.cache.generatedNames.get(key);
-		if (existingName) return existingName;
-		const actualName = options?.name ?? makeCounterStyleName(getNamePrefix(), hashString(serializedContent));
-		const css = formatCounterStyleRule(actualName, descriptors);
-		pushRSCCSS(target.cache, key, css);
-		target.cache.generatedNames.set(key, actualName);
-		return actualName;
-	}
-	const contentToName = getClientContentToName(options?.root ?? document);
-	const serializedContent = JSON.stringify(descriptors);
-	const cacheKey = `${options?.name ?? ""}:${serializedContent}`;
-	const existingName = contentToName.get(cacheKey);
-	if (existingName) return existingName;
-	const name = options?.name ?? makeCounterStyleName(getNamePrefix(), String(clientCounterStyleCounter++));
-	contentToName.set(cacheKey, name);
-	getGlobalInjector().counterStyle(name, descriptors, { root: options?.root });
-	return name;
-}
-//#endregion
-//#region src/hooks/useFunction.ts
-/**
-* Register a CSS @function (custom function).
-*
-* @function rules are global and persistent once defined. The hook ensures the
-* function is only registered once per root (deduplicated by function name).
-*
-* Accepts tasty token syntax for the function name:
-* - `$$name` → defines `--name` (matches the call site `$$name(...)`)
-* - `$name` / `--name` → also accepted
-*
-* Works in all environments: client, SSR with collector, and React Server Components.
-*
-* @param name - The function name token (`$$name`, `$name`, or `--name`)
-* @param definition - Function definition (args, returns, result, local vars)
-*
-* Call the function through the Tasty DSL, not a raw `style` prop: an inline
-* `style` value reaches the browser unparsed, so the `$$name(...)` sugar is never
-* expanded and `polyfills.functions` cannot rewrite it either.
-*
-* @example
-* ```tsx
-* const Box = tasty({ styles: { marginTop: '$$negative(10px)' } });
-*
-* function Layout() {
-*   useFunction('$$negative', { args: ['$value'], result: '(-1 * $value)' });
-*   return <Box />;
-* }
-* ```
-*/
-function useFunction(name, definition, options) {
-	if (!name) {
-		console.warn(`[Tasty] useFunction: function name is required`);
-		return;
-	}
-	if (isFunctionsPolyfillEnabled()) {
-		registerFunctionPolyfill(name, definition);
-		return;
-	}
-	const target = getStyleTarget();
-	if (target.mode === "ssr") {
-		target.collector.collectInternals();
-		const css = formatFunctionRule(name, definition);
-		if (css) target.collector.collectFunction(parseFunctionName(name), css);
-		return;
-	}
-	if (target.mode === "rsc") {
-		const css = formatFunctionRule(name, definition);
-		if (css) pushRSCCSS(target.cache, `__func:${parseFunctionName(name)}`, css);
-		return;
-	}
-	getGlobalInjector().func(name, definition, { root: options?.root });
-}
-//#endregion
-//#region src/batch-provider.tsx
-/**
-* Opens a *batch window* for the commit it renders in, so `batchInjection`
-* can defer stylesheet writes without ever letting a layout effect measure an
-* unstyled element.
-*
-* Every `insertRule()` on a live sheet invalidates style for that sheet's
-* scope. When components inject during React's render phase while others read
-* layout in the same pass, the two interleave and the browser recalculates
-* style between every injection. Batching collapses that into one invalidation
-* per flush — but only if the flush happens before anything can measure.
-*
-* ```
-* provider renders          -> window OPEN
-*   children render         -> injections queued
-* provider insertionEffect  -> FLUSH, window CLOSED
-* layout effects run        -> rules are in the sheet
-* ```
-*
-* `useInsertionEffect` runs in React's mutation phase, after every render in
-* the commit and before any `useLayoutEffect` — which is exactly why React
-* added it for CSS-in-JS libraries. Effects fire child-first, so this
-* provider's runs after every descendant's and still before all layout
-* effects.
-*
-* A commit that does not re-render this provider gets no window, and those
-* injections are written synchronously instead. That is the point: turning
-* `batchInjection: true` on can only ever make injection cheaper, never make a
-* measurement wrong. It also means batching applies to commits this provider
-* takes part in, so mount it as high in the tree as you can.
-*
-* Requires `configure({ batchInjection: true })`; without it this component
-* only renders its children. `batchInjection: 'always'` does not need the
-* provider at all — see that option's docs for the trade-off it accepts.
-*
-* @example
-* ```tsx
-* configure({ batchInjection: true });
-*
-* createRoot(el).render(
-*   <TastyBatchProvider>
-*     <App />
-*   </TastyBatchProvider>,
-* );
-* ```
-*/
-function TastyBatchProvider({ children }) {
-	openBatchWindow();
-	useInsertionEffect(() => {
-		closeBatchWindow();
-	});
-	return children;
-}
-//#endregion
-export { APPEARANCE_CHUNK_STYLES, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CUSTOM_UNITS, ChunkSheetRegistry, DEFAULT_NAME_PREFIX, DEFAULT_ZERO_NAME_PREFIX, DIMENSION_CHUNK_STYLES, DIMENSION_STYLES, DIRECTIONS, DISPLAY_CHUNK_STYLES, Element, FLOW_STYLES, FONT_CHUNK_STYLES, INNER_STYLES, LAYOUT_CHUNK_STYLES, OUTER_STYLES, POSITION_CHUNK_STYLES, POSITION_STYLES, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, TastyBatchProvider, categorizeStyleKeys, chunkSheetRegistry, cleanup, color, computeStyles, configure, counterStyle, createColorFunc, createInjector, createStateParserContext, defineHandler, destroy, dotize, filterBaseProps, filterMods, flushStyles, fontFace, func, gc, generateTypographyTokens, getCSSText, getCSSTextForNode, getConfig, getDisplayName, getGlobalCounterStyles, getGlobalFontFaces, getGlobalFunctions, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getNamePrefix, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasPendingStyleWrites, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunction, okhslPlugin, okhstFunction, okhstPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetStyleBatch, resolveFunctionColor, resolveRecipes, setGlobalPredefinedStates, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useFunction, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles };
-
-//# sourceMappingURL=index.js.map
+import { A as strToRgb, C as StyleParser, D as getRgbValuesFromRgbaString, E as getNamedColorHex, O as hexToRgb, S as createColorFunc, _ as stringifyStyles, b as okhslFunction, c as getGlobalParser, d as parseColor, f as parseStyle, i as DIRECTIONS, k as hslToRgbValues, l as getGlobalPredefinedTokens, n as resolveFunctionColor, o as filterMods, r as CUSTOM_UNITS, t as color, u as normalizeColorTokenValue, v as okhstFunction, x as okhslPlugin, y as okhstPlugin } from "./chunks/dsl-DRhFWQzo.js";
+import { n as isSelector, t as mergeStyles } from "./chunks/shared-utils-y-HjvPN4.js";
+import { C as DEFAULT_NAME_PREFIX, w as DEFAULT_ZERO_NAME_PREFIX } from "./chunks/css-definitions-DotDkIXt.js";
+import { B as createStateParserContext, F as FONT_CHUNK_STYLES, H as setGlobalPredefinedStates, I as LAYOUT_CHUNK_STYLES, L as POSITION_CHUNK_STYLES, M as CHUNK_NAMES, N as DIMENSION_CHUNK_STYLES, P as DISPLAY_CHUNK_STYLES, R as STYLE_TO_CHUNK, T as defineHandler, U as hasStylesGenerated, V as getGlobalPredefinedStates, _ as POSITION_STYLES, b as renderStyles, c as BLOCK_INNER_STYLES, d as COLOR_STYLES, f as CONTAINER_STYLES, g as OUTER_STYLES, h as INNER_STYLES, j as APPEARANCE_CHUNK_STYLES, k as styleHandlers, l as BLOCK_OUTER_STYLES, m as FLOW_STYLES, p as DIMENSION_STYLES, r as categorizeStyleKeys, s as BASE_STYLES, u as BLOCK_STYLES, v as TEXT_STYLES, x as parseStateKey } from "./chunks/style-engine-BBbBuSkT.js";
+import { i as generateTypographyTokens } from "./chunks/config-engine-DEmmPPdp.js";
+import { c as getGlobalFunctions, o as getGlobalCounterStyles, s as getGlobalFontFaces } from "./chunks/runtime-state-BxaLhVdP.js";
+import { A as ownKeyframes, B as getNamePrefix, C as holdKeyframes, D as injector, E as injectRawCSS, F as configure, G as resetConfig, H as hasGlobalRecipes, I as getConfig, K as StyleInjector, M as touch, N as ChunkSheetRegistry, O as isPropertyDefined, P as chunkSheetRegistry, Q as resetStyleBatch, R as getGlobalKeyframes, S as getRawCSSText, T as injectGlobal, U as isConfigLocked, V as hasGlobalKeyframes, W as isTestEnvironment, X as hasPendingStyleWrites, Y as flushStyles, _ as fontFace, a as filterBaseProps, b as getCSSText, g as destroy, h as createInjector, i as modAttrs, j as property, k as keyframes, m as counterStyle, o as computeStyles, p as cleanup, q as SheetManager, r as processTokens, s as resolveRecipes, v as func, w as inject, x as getCSSTextForNode, y as gc, z as getGlobalRecipes } from "./chunks/runtime-engine-CKFXUH-A.js";
+import { t as tastyDebug } from "./chunks/debug-D8pg9RGI.js";
+import "./core/index.js";
+import { a as useProperty, c as useGlobalStyles, d as Element, f as tasty, i as useFontFace, l as useStyles, n as useFunction, o as useKeyframes, p as getDisplayName, r as useCounterStyle, s as useRawCSS, t as TastyBatchProvider } from "./chunks/react-runtime-BpxlOTbO.js";
+export { APPEARANCE_CHUNK_STYLES, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CUSTOM_UNITS, ChunkSheetRegistry, DEFAULT_NAME_PREFIX, DEFAULT_ZERO_NAME_PREFIX, DIMENSION_CHUNK_STYLES, DIMENSION_STYLES, DIRECTIONS, DISPLAY_CHUNK_STYLES, Element, FLOW_STYLES, FONT_CHUNK_STYLES, INNER_STYLES, LAYOUT_CHUNK_STYLES, OUTER_STYLES, POSITION_CHUNK_STYLES, POSITION_STYLES, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, TastyBatchProvider, categorizeStyleKeys, chunkSheetRegistry, cleanup, color, computeStyles, configure, counterStyle, createColorFunc, createInjector, createStateParserContext, defineHandler, destroy, filterBaseProps, filterMods, flushStyles, fontFace, func, gc, generateTypographyTokens, getCSSText, getCSSTextForNode, getConfig, getDisplayName, getGlobalCounterStyles, getGlobalFontFaces, getGlobalFunctions, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getNamePrefix, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasPendingStyleWrites, hasStylesGenerated, hexToRgb, holdKeyframes, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, modAttrs, normalizeColorTokenValue, okhslFunction, okhslPlugin, okhstFunction, okhstPlugin, ownKeyframes, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetStyleBatch, resolveFunctionColor, resolveRecipes, setGlobalPredefinedStates, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useFunction, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles };