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

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

@@ -0,0 +1,877 @@
+import { n as isSelector, t as mergeStyles } from "./shared-utils-Bgl8FNGJ.js";
+import { D as makeKeyframeName, E as makeCounterStyleName, U as parseFunctionName, V as formatFunctionRule, W as registerFunctionPolyfill, a as formatPropertyCSS, b as formatFontFaceRule, h as formatCounterStyleRule, i as formatKeyframesCSS, j as hashString, n as formatGlobalRules, v as fontFaceContentHash } from "./css-definitions-Crstltrf.js";
+import { U as isFunctionsPolyfillEnabled, b as renderStyles, i as baseStylePropsRegistry, s as BASE_STYLES } from "./style-engine-C4ZcOAPb.js";
+import { $ as propHandlerRegistry, B as getNamePrefix, E as injectRawCSS, I as getConfig, J as closeBatchWindow, L as getGlobalInjector, M as touch, T as injectGlobal, Z as openBatchWindow, c as hasKeys, d as getStyleTarget, f as pushRSCCSS, i as modAttrs, k as keyframes, l as collectAutoInferredProperties, n as createClientState, o as computeStyles, r as processTokens, s as resolveRecipes, t as depsEqual, u as collectAutoInferredPropertiesRSC } from "./runtime-engine-D2WOLvd6.js";
+import { Fragment, createContext, 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
+/** Transform one is* prop to its HTML and matching data attributes. */
+function handleIsProperty(props, isProperty, targetAttribute, dataAttribute) {
+	if (isProperty in props) {
+		props[targetAttribute] = props[isProperty];
+		delete props[isProperty];
+	}
+	if (!(dataAttribute in props) && props[targetAttribute]) props[dataAttribute] = "";
+}
+function handleIsProperties(props) {
+	handleIsProperty(props, "isDisabled", "disabled", "data-disabled");
+	handleIsProperty(props, "isHidden", "hidden", "data-hidden");
+	handleIsProperty(props, "isChecked", "checked", "data-checked");
+}
+/**
+* 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: isDisabled ?? htmlProps.disabled,
+			isHidden: isHidden ?? htmlProps.hidden,
+			isChecked: isChecked ?? htmlProps.checked,
+			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"];
+	for (const prop of Object.keys(defaultProps)) if (prop.endsWith("Styles")) propsWithStyles.push(prop);
+	const _WrappedComponent = forwardRef((props, ref) => {
+		const { as, element, ...restProps } = props;
+		const mergedStylesMap = {};
+		for (const prop of propsWithStyles) {
+			const restValue = restProps[prop];
+			const defaultValue = defaultProps[prop];
+			mergedStylesMap[prop] = restValue != null && defaultValue != null ? mergeStyles(defaultValue, restValue) : restValue ?? defaultValue;
+		}
+		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 = {};
+		for (const [variant, variantStyles] of Object.entries(variants)) variantStylesMap[variant] = extensionStyles ? mergeStyles(baseStyles, variantStyles, extensionStyles) : mergeStyles(baseStyles, variantStyles);
+		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;
+		const 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];
+			}
+		}
+		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 allStyles = styles && hasKeys(styles) || !!propStyles ? mergeStyles(baseStyles, styles, propStyles) : baseStyles;
+		const useFactoryCache = typeof document !== "undefined";
+		let generatedClassName = useFactoryCache && allStyles === baseStyles ? classNameCache.get(allStyles) : void 0;
+		let rscCSS;
+		if (generatedClassName !== void 0) touch(generatedClassName);
+		else {
+			const result = computeStyles(allStyles, !useFactoryCache && allStyles === baseStyles ? STABLE_STYLES : void 0);
+			generatedClassName = result.className;
+			rscCSS = result.css;
+			if (useFactoryCache && allStyles === baseStyles) classNameCache.set(allStyles, generatedClassName);
+		}
+		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);
+		let finalClassName = generatedClassName;
+		if (userClassName) finalClassName = finalClassName ? `${userClassName} ${finalClassName}` : userClassName;
+		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 (rscCSS) {
+			const nonce = getConfig().nonce;
+			return createElement(Fragment, null, createElement("style", {
+				"data-tasty-rsc": "",
+				nonce,
+				dangerouslySetInnerHTML: { __html: rscCSS }
+			}), el);
+		}
+		return el;
+	});
+	_TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
+	if (elements) {
+		const subElements = {};
+		for (const [name, definition] of Object.entries(elements)) subElements[name] = createSubElement(name, definition);
+		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(),
+	dedup: /* @__PURE__ */ new Set(),
+	deps: /* @__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 id = opts?.id;
+	const target = getStyleTarget();
+	const state = target.mode === "client" ? getClientState$1(opts?.root ?? document) : null;
+	if (isFactory && deps && id && state) {
+		const cachedDeps = state.deps.get(id);
+		if (cachedDeps && depsEqual(cachedDeps, deps)) return;
+	}
+	const css = isFactory ? cssOrFactory() : cssOrFactory;
+	if (!css.trim()) return;
+	if (target.mode !== "client") {
+		const key = `${target.mode === "rsc" ? "__" : ""}raw:${id || hashString(css)}`;
+		const replace = id != null;
+		if (target.mode === "ssr") target.collector.collectRawCSS(key, css, replace);
+		else pushRSCCSS(target.cache, key, css, replace);
+		return;
+	}
+	if (!state) return;
+	if (id) {
+		const existing = state.entries.get(id);
+		if (existing) {
+			if (existing.css === css) return;
+			existing.dispose();
+		}
+		const { dispose } = injectRawCSS(css, opts);
+		state.entries.set(id, {
+			css,
+			dispose
+		});
+		if (deps) state.deps.set(id, deps);
+	} else {
+		const contentKey = hashString(css);
+		if (state.dedup.has(contentKey)) return;
+		state.dedup.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 { useProperty as a, useGlobalStyles as c, Element as d, tasty as f, useFontFace as i, useStyles as l, useFunction as n, useKeyframes as o, getDisplayName as p, useCounterStyle as r, useRawCSS as s, TastyBatchProvider as t, getTastySSRContext as u };
+
+//# sourceMappingURL=react-runtime-UlZcbsEN.js.map