@tenphi/tasty 0.0.0-snapshot.27b6708 → 0.0.0-snapshot.28eb83c

package/dist/chunks/react-runtime-so_X_yMo.js

@@ -0,0 +1,1526 @@
+import { M as normalizeDslName, d as normalizeColorTokenValue, p as parseStyle } from "./dsl-CXvoaLnj.js";
+import { n as isSelector, t as mergeStyles } from "./shared-utils-OIg0N_dp.js";
+import { C as hasLocalFontFace, D as makeClassName, G as registerFunctionPolyfill, H as formatFunctionRule, I as hasLocalProperties, K as registerLocalFunctionPolyfills, N as hashString, O as makeCounterStyleName, P as extractLocalProperties, R as parsePropertyToken, S as formatFontFaceRule, U as hasLocalFunctions, W as parseFunctionName, _ as formatCounterStyleRule, a as formatPropertyCSS, b as fontFaceContentHash, c as filterUsedKeyframes, d as referencesAnimation, f as replaceAnimationNames, h as extractLocalCounterStyle, i as formatKeyframesCSS, k as makeKeyframeName, l as hasLocalKeyframes, n as formatGlobalRules, o as extractAnimationNamesFromStyles, p as resolveKeyframesNames, r as formatRules, s as extractLocalKeyframes, u as mergeKeyframes, v as hasLocalCounterStyle, w as PropertyTypeResolver, y as extractLocalFontFace, z as extractLocalFunctions } from "./css-definitions-BZ9vm0ci.js";
+import { S as camelToKebab, U as isFunctionsPolyfillEnabled, b as renderStyles, i as baseStylePropsRegistry, n as generateChunkCacheKey, r as categorizeStyleKeys, s as BASE_STYLES, t as renderStylesForChunk } from "./style-engine-CBuOt1e4.js";
+import { D as touch, E as property, H as hasGlobalKeyframes, L as getGlobalInjector, Q as openBatchWindow, R as getGlobalKeyframes, T as ownKeyframes, V as getNamePrefix, Y as closeBatchWindow, a as getRegisteredSSRCollector, b as injectGlobal, et as propHandlerRegistry, f as fontFace, i as resolveRecipes, j as getConfig, l as counterStyle, n as createClientState, p as func, r as cacheWrapper, t as depsEqual, v as holdKeyframes, w as keyframes, x as injectRawCSS, y as inject } from "./runtime-engine-DQ5laRou.js";
+import { Fragment, cache, createContext, createElement, forwardRef, useContext, useInsertionEffect } from "react";
+//#region src/rsc-cache.ts
+/**
+* Shared RSC (React Server Components) inline style cache.
+*
+* Uses React.cache for per-request memoization in Server Components.
+* Both computeStyles() and standalone style functions (useGlobalStyles,
+* useRawCSS, useKeyframes, useProperty, useFontFace, useCounterStyle)
+* share this cache so that CSS accumulated by standalone functions is
+* flushed into inline <style> tags by the next tasty() component.
+*/
+/**
+* Per-request RSC style cache using React.cache.
+* React.cache provides per-request memoization in Server Components,
+* so each request gets its own isolated cache.
+*/
+const getRSCCache = cache(() => ({
+	cacheKeyToClassName: /* @__PURE__ */ new Map(),
+	emittedKeys: /* @__PURE__ */ new Set(),
+	internalsEmitted: false,
+	pendingCSS: [],
+	keyToIndex: /* @__PURE__ */ new Map(),
+	generatedNames: /* @__PURE__ */ new Map()
+}));
+function rscAllocateClassName(rscCache, cacheKey) {
+	const existing = rscCache.cacheKeyToClassName.get(cacheKey);
+	if (existing) return {
+		className: existing,
+		isNew: false
+	};
+	const className = makeClassName(getNamePrefix(), hashString(cacheKey));
+	rscCache.cacheKeyToClassName.set(cacheKey, className);
+	return {
+		className,
+		isNew: true
+	};
+}
+/**
+* Flush any pending CSS accumulated by standalone functions.
+* Returns the CSS string and clears the buffer.
+*/
+function flushPendingCSS(rscCache) {
+	if (rscCache.pendingCSS.length === 0) return "";
+	const css = rscCache.pendingCSS.join("\n");
+	rscCache.pendingCSS.length = 0;
+	rscCache.keyToIndex.clear();
+	return css;
+}
+/**
+* Push CSS into the RSC pending buffer with dedup via emittedKeys.
+* Returns true if the CSS was added, false if it was already emitted.
+*
+* Pass `replace` for slot-keyed entries (an explicit `id`), where the last write
+* must win to match the client's update-tracking behavior. If the slot has
+* already been flushed into a `<style>` tag the new CSS is appended instead,
+* which still wins by cascade order.
+*/
+function pushRSCCSS(rscCache, key, css, replace) {
+	if (replace) {
+		const pendingIndex = rscCache.keyToIndex.get(key);
+		if (pendingIndex !== void 0) {
+			rscCache.pendingCSS[pendingIndex] = css;
+			return true;
+		}
+	} else if (rscCache.emittedKeys.has(key)) return false;
+	rscCache.emittedKeys.add(key);
+	rscCache.keyToIndex.set(key, rscCache.pendingCSS.length);
+	rscCache.pendingCSS.push(css);
+	return true;
+}
+/**
+* Determine the current style injection target.
+* Centralizes the three-way detection (SSR collector / RSC cache / client DOM)
+* used by all style functions.
+*/
+function getStyleTarget() {
+	const collector = getRegisteredSSRCollector();
+	if (collector) return {
+		mode: "ssr",
+		collector
+	};
+	if (typeof document === "undefined") return {
+		mode: "rsc",
+		cache: getRSCCache()
+	};
+	return { mode: "client" };
+}
+//#endregion
+//#region src/ssr/collect-auto-properties.ts
+/**
+* Scan rendered rules for auto-inferable custom properties and emit
+* @property CSS via the provided callback.
+*/
+function scanAndEmitAutoProperties(rules, styles, emit) {
+	const registered = /* @__PURE__ */ new Set();
+	if (styles) {
+		const localProps = styles["@property"];
+		if (localProps && typeof localProps === "object") for (const token of Object.keys(localProps)) {
+			const parsed = parsePropertyToken(token);
+			if (parsed.isValid) registered.add(parsed.cssName);
+		}
+	}
+	const resolver = new PropertyTypeResolver();
+	for (const rule of rules) {
+		if (!rule.declarations) continue;
+		resolver.scanDeclarations(rule.declarations, (name) => registered.has(name), (name, syntax, initialValue) => {
+			registered.add(name);
+			const css = formatPropertyCSS(name, {
+				syntax,
+				inherits: true,
+				initialValue
+			});
+			if (css) emit(name, css);
+		});
+	}
+}
+/**
+* Scan rendered rules for custom property declarations and collect
+* auto-inferred @property rules via the SSR collector.
+*
+* @param rules - Rendered style rules containing CSS declarations
+* @param collector - SSR collector to emit @property CSS into
+* @param styles - Original styles object (used to skip explicit @property)
+*/
+function collectAutoInferredProperties(rules, collector, styles) {
+	scanAndEmitAutoProperties(rules, styles, (name, css) => {
+		collector.collectProperty(`__auto:${name}`, css);
+	});
+}
+/**
+* RSC variant: scan rendered rules and push auto-inferred @property CSS
+* into the RSC pending buffer.
+*/
+function collectAutoInferredPropertiesRSC(rules, rscCache, styles) {
+	scanAndEmitAutoProperties(rules, styles, (name, css) => {
+		pushRSCCSS(rscCache, `__auto:${name}`, css);
+	});
+}
+//#endregion
+//#region src/utils/has-keys.ts
+/**
+* Check if an object has any own enumerable keys.
+* Avoids the array allocation of Object.keys(obj).length > 0.
+*/
+function hasKeys(obj) {
+	for (const _ in obj) return true;
+	return false;
+}
+//#endregion
+//#region src/compute-styles.ts
+/**
+* Hook-free, synchronous style computation.
+*
+* Extracts the core logic from useStyles() into a plain function that can
+* be called during React render without any hooks. Three code paths:
+*
+* 1. SSR collector — styles collected via ServerStyleCollector
+* 2. Client inject — styles injected synchronously into the DOM
+* 3. RSC inline — styles returned as CSS strings for inline <style> emission
+*
+* This enables tasty() components to work as React Server Components.
+*/
+const EMPTY_RESULT = { className: "" };
+/**
+* Mark internals as emitted for this RSC request.
+*
+* Internals (tokens, @property, @font-face, @counter-style) are emitted
+* exclusively by the SSR collector via ServerStyleCollector.collectInternals().
+* The SSR path is reliable because TastyRegistry is always present as a
+* client component in the root layout, guaranteeing SSR runs for every page.
+*
+* Previously this function also emitted internals and coordinated with SSR
+* via a globalThis flag, but that flag leaked across requests in the same
+* Node.js process, causing pages without RSC-rendered tasty components
+* (e.g. the playground route) to lose all token CSS.
+*/
+function collectInternalsRSC(rscCache) {
+	if (rscCache.internalsEmitted) return "";
+	rscCache.internalsEmitted = true;
+	return "";
+}
+/**
+* Collect per-component ancillary CSS (keyframes, @property, font-face,
+* counter-style) for RSC mode.
+*/
+function collectAncillaryRSC(rscCache, styles) {
+	const parts = [];
+	const usedKf = getUsedKeyframes(styles);
+	const rscKeyframeNames = usedKf ? resolveKeyframesNames(usedKf) : null;
+	if (usedKf && rscKeyframeNames) for (const [authored, steps] of Object.entries(usedKf)) {
+		const name = rscKeyframeNames.get(authored);
+		const key = `__kf:${name}`;
+		if (!rscCache.emittedKeys.has(key)) {
+			rscCache.emittedKeys.add(key);
+			parts.push(formatKeyframesCSS(name, steps));
+		}
+	}
+	if (hasLocalProperties(styles)) {
+		const localProperties = extractLocalProperties(styles);
+		if (localProperties) for (const [token, definition] of Object.entries(localProperties)) {
+			const key = `__prop:${token}`;
+			if (!rscCache.emittedKeys.has(key)) {
+				rscCache.emittedKeys.add(key);
+				const css = formatPropertyCSS(token, definition);
+				if (css) parts.push(css);
+			}
+		}
+	}
+	if (hasLocalFontFace(styles)) {
+		const localFontFace = extractLocalFontFace(styles);
+		if (localFontFace) for (const [family, input] of Object.entries(localFontFace)) {
+			const descriptors = Array.isArray(input) ? input : [input];
+			for (const desc of descriptors) {
+				const key = `__ff:${fontFaceContentHash(family, desc)}`;
+				if (!rscCache.emittedKeys.has(key)) {
+					rscCache.emittedKeys.add(key);
+					parts.push(formatFontFaceRule(family, desc));
+				}
+			}
+		}
+	}
+	if (hasLocalCounterStyle(styles)) {
+		const localCounterStyle = extractLocalCounterStyle(styles);
+		if (localCounterStyle) for (const [name, descriptors] of Object.entries(localCounterStyle)) {
+			const key = `__cs:${name}:${JSON.stringify(descriptors)}`;
+			if (!rscCache.emittedKeys.has(key)) {
+				rscCache.emittedKeys.add(key);
+				parts.push(formatCounterStyleRule(name, descriptors));
+			}
+		}
+	}
+	if (!isFunctionsPolyfillEnabled() && hasLocalFunctions(styles)) {
+		const localFunctions = extractLocalFunctions(styles);
+		if (localFunctions) for (const [name, definition] of Object.entries(localFunctions)) {
+			const key = `__func:${parseFunctionName(name)}`;
+			if (!rscCache.emittedKeys.has(key)) {
+				rscCache.emittedKeys.add(key);
+				parts.push(formatFunctionRule(name, definition));
+			}
+		}
+	}
+	return parts.join("\n");
+}
+/**
+* Process all chunks in RSC mode: render CSS to strings, allocate classNames,
+* and return combined { className, css }.
+*/
+function computeStylesRSC(styles, chunkMap, stableStyles) {
+	const rscCache = getRSCCache();
+	const cssParts = [];
+	const classNames = [];
+	const rscUsedKf = getUsedKeyframes(styles);
+	const rscKeyframeNames = rscUsedKf ? resolveKeyframesNames(rscUsedKf) : null;
+	const pendingCSS = flushPendingCSS(rscCache);
+	if (pendingCSS) cssParts.push(pendingCSS);
+	const internalsCSS = collectInternalsRSC(rscCache);
+	if (internalsCSS) cssParts.push(internalsCSS);
+	for (const [chunkName, chunkStyleKeys] of chunkMap) {
+		if (chunkStyleKeys.length === 0) continue;
+		const baseKey = generateChunkCacheKey(styles, chunkName, chunkStyleKeys, stableStyles);
+		const renderResult = renderStylesForChunk(styles, chunkName, chunkStyleKeys);
+		if (renderResult.rules.length === 0) continue;
+		const { rules, cacheKey } = applyKeyframeNames(renderResult.rules, baseKey, rscKeyframeNames);
+		const { className, isNew } = rscAllocateClassName(rscCache, cacheKey);
+		classNames.push(className);
+		if (isNew) {
+			const css = formatRules(rules, className);
+			if (css) cssParts.push(css);
+		}
+	}
+	const ancillaryCSS = collectAncillaryRSC(rscCache, styles);
+	if (ancillaryCSS) cssParts.push(ancillaryCSS);
+	if (classNames.length === 0) return EMPTY_RESULT;
+	const css = cssParts.join("\n");
+	return {
+		className: classNames.join(" "),
+		css: css || void 0
+	};
+}
+/**
+* Get keyframes that are actually used in styles.
+* Returns null if no keyframes are used (fast path for zero overhead).
+*/
+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);
+}
+/**
+* Process a chunk on the SSR path: allocate via collector, render, collect CSS.
+*/
+function processChunkSSR(collector, styles, chunkName, styleKeys, stableStyles, keyframeNames) {
+	if (styleKeys.length === 0) return null;
+	const baseKey = generateChunkCacheKey(styles, chunkName, styleKeys, stableStyles);
+	const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);
+	if (renderResult.rules.length === 0) return null;
+	const { animations, rules, cacheKey } = applyKeyframeNames(renderResult.rules, baseKey, keyframeNames);
+	const { className, isNewAllocation } = collector.allocateClassName(cacheKey);
+	if (isNewAllocation) {
+		collector.collectChunk(cacheKey, className, rules);
+		return {
+			name: chunkName,
+			styleKeys,
+			cacheKey,
+			renderResult: {
+				...renderResult,
+				rules
+			},
+			className,
+			animations
+		};
+	}
+	return {
+		name: chunkName,
+		styleKeys,
+		cacheKey,
+		renderResult: { rules: [] },
+		className
+	};
+}
+/**
+* Point a chunk's rules at the resolved keyframe names, and fold those names
+* into its cache key.
+*
+* Both halves matter, and both have to happen before the rules are written
+* anywhere: the declarations have to name the animation that will exist, and
+* the key has to distinguish two components that authored the same shorthand
+* over different definitions. Shared by the client and the server so they
+* cannot disagree about either.
+*/
+function applyKeyframeNames(ruleset, baseKey, keyframeNames) {
+	if (!keyframeNames || keyframeNames.size === 0) return {
+		animations: [],
+		rules: ruleset,
+		cacheKey: baseKey
+	};
+	const animations = [...keyframeNames.keys()].filter((authored) => ruleset.some((rule) => referencesAnimation(rule.declarations, authored)));
+	if (animations.length === 0) return {
+		animations,
+		rules: ruleset,
+		cacheKey: baseKey
+	};
+	return {
+		animations,
+		rules: ruleset.map((rule) => ({
+			...rule,
+			declarations: replaceAnimationNames(rule.declarations, keyframeNames)
+		})),
+		cacheKey: `${baseKey}\u0000kf:${animations.map((authored) => `${authored}=${keyframeNames.get(authored)}`).sort().join(",")}`
+	};
+}
+/**
+* Process a chunk on the client: render, allocate className, and inject
+* CSS synchronously. The injector's cache makes this idempotent.
+*/
+function processChunkSync(styles, chunkName, styleKeys, stableStyles, root, keyframeNames) {
+	if (styleKeys.length === 0) return null;
+	const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys, stableStyles);
+	const renderResult = renderStylesForChunk(styles, chunkName, styleKeys, cacheKey);
+	if (renderResult.rules.length === 0) return null;
+	const { animations, rules, cacheKey: injectKey } = applyKeyframeNames(renderResult.rules, cacheKey, keyframeNames);
+	const { className } = inject(rules, {
+		cacheKey: injectKey,
+		root,
+		pin: false
+	});
+	return {
+		name: chunkName,
+		styleKeys,
+		cacheKey: injectKey,
+		renderResult: {
+			...renderResult,
+			rules
+		},
+		className,
+		animations
+	};
+}
+/**
+* Inject all ancillary rules (properties, font-faces, counter-styles) synchronously.
+*/
+function injectAncillarySync(styles, root) {
+	if (hasLocalProperties(styles)) {
+		const localProperties = extractLocalProperties(styles);
+		if (localProperties) for (const [token, definition] of Object.entries(localProperties)) property(token, {
+			...definition,
+			root
+		});
+	}
+	if (hasLocalFontFace(styles)) {
+		const localFontFace = extractLocalFontFace(styles);
+		if (localFontFace) for (const [family, input] of Object.entries(localFontFace)) {
+			const descriptors = Array.isArray(input) ? input : [input];
+			for (const desc of descriptors) fontFace(family, desc, { root });
+		}
+	}
+	if (hasLocalCounterStyle(styles)) {
+		const localCounterStyle = extractLocalCounterStyle(styles);
+		if (localCounterStyle) for (const [name, descriptors] of Object.entries(localCounterStyle)) counterStyle(name, descriptors, { root });
+	}
+	if (!isFunctionsPolyfillEnabled() && hasLocalFunctions(styles)) {
+		const localFunctions = extractLocalFunctions(styles);
+		if (localFunctions) for (const [name, definition] of Object.entries(localFunctions)) func(name, definition, { root });
+	}
+}
+/**
+* Collect all ancillary rules into the SSR collector.
+*/
+function collectAncillarySSR(collector, styles, chunks) {
+	const usedKf = getUsedKeyframes(styles);
+	if (usedKf) {
+		const names = resolveKeyframesNames(usedKf);
+		for (const [authored, steps] of Object.entries(usedKf)) {
+			const name = names.get(authored);
+			collector.collectKeyframes(name, formatKeyframesCSS(name, steps));
+		}
+	}
+	if (hasLocalProperties(styles)) {
+		const localProperties = extractLocalProperties(styles);
+		if (localProperties) for (const [token, definition] of Object.entries(localProperties)) {
+			const css = formatPropertyCSS(token, definition);
+			if (css) collector.collectProperty(token, css);
+		}
+	}
+	if (hasLocalFontFace(styles)) {
+		const localFontFace = extractLocalFontFace(styles);
+		if (localFontFace) for (const [family, input] of Object.entries(localFontFace)) {
+			const descriptors = Array.isArray(input) ? input : [input];
+			for (const desc of descriptors) {
+				const hash = fontFaceContentHash(family, desc);
+				const css = formatFontFaceRule(family, desc);
+				collector.collectFontFace(hash, css);
+			}
+		}
+	}
+	if (hasLocalCounterStyle(styles)) {
+		const localCounterStyle = extractLocalCounterStyle(styles);
+		if (localCounterStyle) for (const [name, descriptors] of Object.entries(localCounterStyle)) {
+			const css = formatCounterStyleRule(name, descriptors);
+			collector.collectCounterStyle(name, css);
+		}
+	}
+	if (!isFunctionsPolyfillEnabled() && hasLocalFunctions(styles)) {
+		const localFunctions = extractLocalFunctions(styles);
+		if (localFunctions) for (const [name, definition] of Object.entries(localFunctions)) {
+			const css = formatFunctionRule(name, definition);
+			collector.collectFunction(parseFunctionName(name), css);
+		}
+	}
+	if (getConfig().autoPropertyTypes !== false) {
+		const allRules = chunks.flatMap((c) => c.renderResult.rules);
+		if (allRules.length > 0) collectAutoInferredProperties(allRules, collector, styles);
+	}
+}
+/**
+* Synchronous, hook-free style computation.
+*
+* Resolves recipes, categorizes style keys into chunks, renders CSS rules,
+* allocates class names, and injects / collects / returns the CSS.
+*
+* Three code paths:
+* 1. SSR collector — discovered via ALS or passed explicitly; CSS collected
+* 2. RSC inline — no collector and no `document`; CSS returned as `result.css`
+*    for the caller to emit as an inline `<style>` tag
+* 3. Client inject — CSS injected synchronously into the DOM (idempotent)
+*
+* @param styles - Tasty styles object (or undefined for no styles)
+* @param options - Optional SSR collector override
+*/
+function computeStyles(styles, options) {
+	if (!styles || !hasKeys(styles)) return EMPTY_RESULT;
+	const resolved = resolveRecipes(styles);
+	const stableStyles = options?.stableStyles === true && resolved === styles;
+	if (isFunctionsPolyfillEnabled() && hasLocalFunctions(resolved)) registerLocalFunctionPolyfills(resolved);
+	const chunkMap = categorizeStyleKeys(resolved);
+	const collector = options?.ssrCollector !== void 0 ? options.ssrCollector : getRegisteredSSRCollector();
+	const chunks = [];
+	if (collector) {
+		collector.collectInternals();
+		const ssrKf = getUsedKeyframes(resolved);
+		const ssrKeyframeNames = ssrKf ? resolveKeyframesNames(ssrKf) : null;
+		for (const [chunkName, chunkStyleKeys] of chunkMap) {
+			const chunk = processChunkSSR(collector, resolved, chunkName, chunkStyleKeys, stableStyles, ssrKeyframeNames);
+			if (chunk) chunks.push(chunk);
+		}
+		collectAncillarySSR(collector, resolved, chunks);
+	} else if (typeof document === "undefined") return computeStylesRSC(resolved, chunkMap, stableStyles);
+	else {
+		const root = options?.root;
+		injectAncillarySync(resolved, root);
+		const usedKf = getUsedKeyframes(resolved);
+		const keyframeNames = usedKf ? resolveKeyframesNames(usedKf) : null;
+		const keyframeKeys = usedKf && keyframeNames ? holdKeyframes(usedKf, keyframeNames, { root }) : null;
+		for (const [chunkName, chunkStyleKeys] of chunkMap) {
+			const chunk = processChunkSync(resolved, chunkName, chunkStyleKeys, stableStyles, root, keyframeNames);
+			if (chunk) chunks.push(chunk);
+		}
+		if (keyframeKeys) for (const chunk of chunks) for (const authored of chunk.animations ?? []) {
+			const key = keyframeKeys.get(authored);
+			if (key) ownKeyframes(key, chunk.className, { root });
+		}
+		for (const chunk of chunks) touch(chunk.className, { root });
+	}
+	if (chunks.length === 0) return EMPTY_RESULT;
+	if (chunks.length === 1) return { className: chunks[0].className };
+	return { className: chunks.map((c) => c.className).join(" ") };
+}
+//#endregion
+//#region src/utils/filter-base-props.ts
+const DOMPropNames = new Set(["id"]);
+const BasePropNames = new Set([
+	"role",
+	"as",
+	"element",
+	"css",
+	"qa",
+	"mods",
+	"qaVal",
+	"hidden",
+	"isHidden",
+	"disabled",
+	"isDisabled",
+	"children",
+	"style",
+	"className",
+	"href",
+	"target",
+	"tabIndex"
+]);
+const ignoreEventPropsNames = new Set([
+	"onPress",
+	"onHoverStart",
+	"onHoverEnd",
+	"onPressStart",
+	"onPressEnd"
+]);
+const propRe = /^((data-).*)$/;
+const eventRe = /^on[A-Z].+$/;
+/**
+* Filters out all props that aren't valid DOM props or defined via override prop obj.
+* @param props - The component props to be filtered.
+* @param opts - Props to override.
+*/
+function filterBaseProps(props, opts = {}) {
+	const { propNames, eventProps } = opts;
+	const filteredProps = {};
+	for (const prop in props) if (Object.prototype.hasOwnProperty.call(props, prop) && (DOMPropNames.has(prop) || BasePropNames.has(prop) || prop.startsWith("aria-") || eventProps && eventRe.test(prop) && !ignoreEventPropsNames.has(prop) || propNames?.has(prop) || propRe.test(prop))) filteredProps[prop] = props[prop];
+	return filteredProps;
+}
+//#endregion
+//#region src/utils/mod-attrs.ts
+function modAttrs(map) {
+	return map ? Object.keys(map).reduce((attrs, key) => {
+		const value = map[key];
+		if (value == null || value === false) return attrs;
+		const attrName = `data-${camelToKebab(key)}`;
+		if (value === true) attrs[attrName] = "";
+		else if (typeof value === "string") attrs[attrName] = value;
+		else if (typeof value === "number") attrs[attrName] = String(value);
+		else console.warn(`[Tasty] Invalid mod value for "${key}". Expected boolean, string, or number, got ${typeof value}`);
+		return attrs;
+	}, {}) : null;
+}
+const _modAttrs = cacheWrapper(modAttrs);
+//#endregion
+//#region src/utils/process-tokens.ts
+/**
+* Check if a value is a valid token value (string, number, or boolean - not object).
+* Returns false for `false` values (they mean "skip this token").
+*/
+function isValidTokenValue(value) {
+	if (value === void 0 || value === null || value === false) return false;
+	if (typeof value === "object") {
+		console.warn("[Tasty] Object values are not allowed in tokens prop. Tokens do not support state-based styling. Use a primitive value instead.");
+		return false;
+	}
+	return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+/**
+* Process a single token value through the tasty parser.
+* Numbers are converted to strings; 0 stays as "0".
+*/
+function processTokenValue(value) {
+	if (typeof value === "number") {
+		if (value === 0) return "0";
+		return parseStyle(String(value)).output;
+	}
+	return parseStyle(value).output;
+}
+/**
+* Resolve one `$name` / `#name` entry to the custom property it declares and
+* the value to declare, or `null` when the entry declares nothing.
+*
+* The two sigils differ only in the property name they build and in how `true`
+* is read: for a custom property it is the empty value, for a color it is
+* `transparent`.
+*/
+function resolveTokenEntry(key, value) {
+	const name = `--${normalizeDslName(key.slice(1))}`;
+	if (key[0] === "$") return [name, processTokenValue(value === true ? "" : value)];
+	const colorValue = normalizeColorTokenValue(value);
+	if (colorValue === null) return null;
+	return [`${name}-color`, processTokenValue(colorValue)];
+}
+/**
+* Process tokens object into inline style properties.
+* - `$name` -> `--name` with the parsed value
+* - `#name` -> `--name-color` with the parsed value
+*
+* @param tokens - The tokens object to process
+* @returns CSSProperties object or undefined if no tokens to process
+*/
+function processTokens(tokens) {
+	if (!tokens) return;
+	const keys = Object.keys(tokens);
+	if (keys.length === 0) return;
+	let result;
+	for (const key of keys) {
+		const value = tokens[key];
+		if (!isValidTokenValue(value)) continue;
+		if (key[0] !== "$" && key[0] !== "#") continue;
+		const entry = resolveTokenEntry(key, value);
+		if (!entry) continue;
+		if (!result) result = {};
+		result[entry[0]] = entry[1];
+	}
+	return result;
+}
+//#endregion
+//#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 STABLE_STYLES = { stableStyles: true };
+	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, !useFactoryCache && allStyles === baseStyles ? STABLE_STYLES : void 0);
+			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 = /* @__PURE__ */ tasty({});
+//#endregion
+//#region src/ssr/context.ts
+/**
+* React context for SSR collector discovery.
+*
+* Used by Next.js TastyRegistry to provide the ServerStyleCollector
+* to useStyles() via React context (the streaming-compatible path).
+*
+* This avoids relying on globalThis for cross-layer communication,
+* which leaks between RSC and SSR module graphs in Next.js App Router.
+*
+* The context is created lazily to avoid calling createContext() at
+* module evaluation time, which would break Server Components that
+* import from `@tenphi/tasty` without using any React hooks.
+*/
+let _ctx;
+function getTastySSRContext() {
+	if (!_ctx) _ctx = createContext(null);
+	return _ctx;
+}
+//#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/hooks/useGlobalStyles.ts
+const getClientGlobalSlots = /* @__PURE__ */ 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/hooks/useRawCSS.ts
+const getClientState$1 = /* @__PURE__ */ 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 = /* @__PURE__ */ 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 = /* @__PURE__ */ 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 { computeStyles as _, useProperty as a, useGlobalStyles as c, Element as d, tasty as f, filterBaseProps as g, _modAttrs as h, useFontFace as i, useStyles as l, processTokens as m, useFunction as n, useKeyframes as o, getDisplayName as p, useCounterStyle as r, useRawCSS as s, TastyBatchProvider as t, getTastySSRContext as u };
+
+//# sourceMappingURL=react-runtime-so_X_yMo.js.map