@tenphi/tasty 2.0.3 → 2.1.0

package/dist/core-BqO8pplb.js

@@ -0,0 +1,1592 @@
+import { $ as parseStyle, A as extractLocalCounterStyle, C as camelToKebab, Ct as Lru, F as formatFontFaceRule, H as createStyle, I as hasLocalFontFace, M as hasLocalCounterStyle, N as extractLocalFontFace, P as fontFaceContentHash, R as STYLE_HANDLER_MAP, U as PropertyTypeResolver, Z as normalizeColorTokenValue, c as getGlobalKeyframes, ct as hashString, d as hasGlobalKeyframes, dt as hasLocalProperties, ft as parsePropertyToken, g as markStylesGenerated, gt as getColorSpaceSuffix, h as isTestEnvironment, ht as getColorSpaceFunc, j as formatCounterStyleRule, k as StyleInjector, lt as extractLocalProperties, mt as getColorSpaceComponents, n as getConfig, s as getGlobalInjector, st as isDevEnv } from "./config-_aQ_PZ-P.js";
+import { a as mergeKeyframes, c as generateChunkCacheKey, d as categorizeStyleKeys, i as hasLocalKeyframes, l as CHUNK_NAMES, n as extractLocalKeyframes, o as replaceAnimationNames, r as filterUsedKeyframes, s as renderStylesForChunk, t as extractAnimationNamesFromStyles } from "./keyframes-ClPFWy33.js";
+import { n as formatPropertyCSS, r as getRegisteredSSRCollector, t as formatRules } from "./format-rules-xwteB7a1.js";
+import { t as resolveRecipes } from "./resolve-recipes-C0-AMzCz.js";
+import { cache } from "react";
+//#region src/styles/list.ts
+const BASE_STYLES = [
+	"display",
+	"font",
+	"preset",
+	"hide",
+	"whiteSpace",
+	"opacity",
+	"transition"
+];
+const POSITION_STYLES = [
+	"gridArea",
+	"order",
+	"gridColumn",
+	"gridRow",
+	"placeSelf",
+	"alignSelf",
+	"justifySelf",
+	"zIndex",
+	"margin",
+	"inset",
+	"position",
+	"scrollMargin"
+];
+const BLOCK_INNER_STYLES = [
+	"padding",
+	"paddingInline",
+	"paddingBlock",
+	"overflow",
+	"scrollbar",
+	"textAlign"
+];
+const BLOCK_OUTER_STYLES = [
+	"border",
+	"radius",
+	"shadow",
+	"outline"
+];
+const BLOCK_STYLES = [...BLOCK_INNER_STYLES, ...BLOCK_OUTER_STYLES];
+const COLOR_STYLES = [
+	"color",
+	"fill",
+	"fade",
+	"image"
+];
+const TEXT_STYLES = [
+	"textTransform",
+	"fontWeight",
+	"fontStyle"
+];
+const DIMENSION_STYLES = [
+	"width",
+	"height",
+	"flexBasis",
+	"flexGrow",
+	"flexShrink",
+	"flex"
+];
+const FLOW_STYLES = [
+	"flow",
+	"place",
+	"placeItems",
+	"placeContent",
+	"alignItems",
+	"alignContent",
+	"justifyItems",
+	"justifyContent",
+	"align",
+	"justify",
+	"gap",
+	"columnGap",
+	"rowGap",
+	"gridColumns",
+	"gridRows",
+	"gridTemplate",
+	"gridAreas"
+];
+const CONTAINER_STYLES = [
+	...BASE_STYLES,
+	...COLOR_STYLES,
+	...DIMENSION_STYLES,
+	...POSITION_STYLES,
+	...BLOCK_STYLES,
+	...FLOW_STYLES
+];
+const OUTER_STYLES = [
+	...POSITION_STYLES,
+	...DIMENSION_STYLES,
+	...BLOCK_OUTER_STYLES
+];
+const INNER_STYLES = [
+	...BASE_STYLES,
+	...COLOR_STYLES,
+	...BLOCK_INNER_STYLES,
+	...FLOW_STYLES
+];
+//#endregion
+//#region src/injector/chunk-sheet-registry.ts
+/**
+* Global registry mapping CSS content hashes to shared constructable
+* CSSStyleSheet objects with reference counting.
+*
+* Multiple shadow roots adopting the same chunk share a single underlying
+* stylesheet object — parse once, adopt everywhere.
+*/
+var ChunkSheetRegistry = class {
+	sheets = /* @__PURE__ */ new Map();
+	sheetToHash = /* @__PURE__ */ new WeakMap();
+	/**
+	* Get or create a CSSStyleSheet for the given CSS text.
+	* Increments refCount. Uses content hash as the dedup key.
+	*/
+	acquire(cssText) {
+		const hash = hashString(cssText);
+		const existing = this.sheets.get(hash);
+		if (existing) {
+			existing.refCount++;
+			return existing.sheet;
+		}
+		const sheet = new CSSStyleSheet();
+		sheet.replaceSync(cssText);
+		const entry = {
+			sheet,
+			cssText,
+			refCount: 1
+		};
+		this.sheets.set(hash, entry);
+		this.sheetToHash.set(sheet, hash);
+		return sheet;
+	}
+	/**
+	* Decrement refCount for a sheet. When refCount reaches 0,
+	* the sheet is removed from the registry.
+	*/
+	release(sheet) {
+		const hash = this.sheetToHash.get(sheet);
+		if (!hash) return;
+		const entry = this.sheets.get(hash);
+		if (!entry) return;
+		entry.refCount--;
+		if (entry.refCount <= 0) {
+			this.sheets.delete(hash);
+			this.sheetToHash.delete(sheet);
+		}
+	}
+	/**
+	* Bulk acquire — returns an array of CSSStyleSheet in the same order.
+	*/
+	acquireAll(cssTexts) {
+		return cssTexts.map((text) => this.acquire(text));
+	}
+	/**
+	* Bulk release — decrements refCount for each sheet.
+	*/
+	releaseAll(sheets) {
+		for (const sheet of sheets) this.release(sheet);
+	}
+	/** Number of unique sheets currently held. */
+	get size() {
+		return this.sheets.size;
+	}
+};
+/** Module-level singleton shared across the entire application. */
+const chunkSheetRegistry = new ChunkSheetRegistry();
+//#endregion
+//#region src/injector/index.ts
+/**
+* Inject styles and return className with dispose function
+*/
+function inject(rules, options) {
+	const injector = getGlobalInjector();
+	markStylesGenerated();
+	return injector.inject(rules, options);
+}
+/**
+* Inject global rules that should not reserve tasty class names
+*/
+function injectGlobal(rules, options) {
+	return getGlobalInjector().injectGlobal(rules, options);
+}
+/**
+* Inject raw CSS text directly without parsing
+* This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
+* The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
+*
+* @example
+* ```tsx
+* // Inject raw CSS
+* const { dispose } = injectRawCSS(`
+*   body { margin: 0; padding: 0; }
+*   .my-class { color: red; }
+* `);
+*
+* // Later, remove the injected CSS
+* dispose();
+* ```
+*/
+function injectRawCSS(css, options) {
+	return getGlobalInjector().injectRawCSS(css, options);
+}
+/**
+* Get raw CSS text for SSR
+*/
+function getRawCSSText(options) {
+	return getGlobalInjector().getRawCSSText(options);
+}
+/**
+* Inject keyframes and return object with toString() and dispose()
+*/
+function keyframes(steps, nameOrOptions) {
+	return getGlobalInjector().keyframes(steps, nameOrOptions);
+}
+/**
+* Define a CSS @property custom property.
+* This enables advanced features like animating custom properties.
+*
+* Note: @property rules are global and persistent once defined.
+* Re-registering the same property name is a no-op.
+*
+* @param name - The custom property name (must start with --)
+* @param options - Property configuration
+*
+* @example
+* ```ts
+* // Define a color property that can be animated
+* property('--my-color', {
+*   syntax: '<color>',
+*   initialValue: 'red',
+* });
+*
+* // Define an angle property
+* property('--rotation', {
+*   syntax: '<angle>',
+*   inherits: false,
+*   initialValue: '0deg',
+* });
+* ```
+*/
+function property(name, options) {
+	return getGlobalInjector().property(name, options);
+}
+/**
+* Check if a CSS @property has already been defined
+*
+* @param name - The custom property name to check
+* @param options - Options including root
+*/
+function isPropertyDefined(name, options) {
+	return getGlobalInjector().isPropertyDefined(name, options);
+}
+/**
+* Inject a CSS @font-face rule.
+*
+* Permanent and global — no dispose or ref-counting.
+* Deduplicates by content hash (family + descriptors).
+*/
+function fontFace(family, descriptors, options) {
+	return getGlobalInjector().fontFace(family, descriptors, options);
+}
+/**
+* Inject a CSS @counter-style rule.
+*
+* Permanent and global — no dispose or ref-counting.
+* Deduplicates by name (first definition wins).
+*/
+function counterStyle(name, descriptors, options) {
+	return getGlobalInjector().counterStyle(name, descriptors, options);
+}
+/**
+* Get CSS text from all sheets (for SSR)
+*/
+function getCssText(options) {
+	return getGlobalInjector().getCssText(options);
+}
+/**
+* Collect only CSS used by a rendered subtree (like jest-styled-components).
+* Pass the container returned by render(...).
+*/
+function getCssTextForNode(node, options) {
+	const classSet = /* @__PURE__ */ new Set();
+	const readClasses = (el) => {
+		const cls = el.getAttribute("class");
+		if (!cls) return;
+		for (const token of cls.split(/\s+/)) if (/^t[a-z0-9]+$/.test(token)) classSet.add(token);
+	};
+	if (node.getAttribute) readClasses(node);
+	const elements = node.querySelectorAll ? node.querySelectorAll("[class]") : [];
+	if (elements) elements.forEach(readClasses);
+	return getGlobalInjector().getCssTextForClasses(classSet, options);
+}
+/**
+* Force cleanup of unused rules
+*/
+function cleanup(root) {
+	return getGlobalInjector().cleanup(root);
+}
+/**
+* Record a render-time usage hit for one or more classNames.
+* Used internally by computeStyles and tasty() to track usage for GC.
+* When the global touch counter reaches `touchInterval`, schedules GC.
+*/
+function touch(className, options) {
+	if (!getConfig().gc) return;
+	getGlobalInjector().touch(className, options);
+}
+/**
+* Synchronous garbage collection of unused styles.
+* Evicts the oldest unused styles when usageMap exceeds capacity.
+* With `{ force: true }`, removes ALL unused styles regardless of capacity.
+*
+* @returns Number of styles evicted.
+*/
+function gc(options) {
+	return getGlobalInjector().gc(options);
+}
+/**
+* Check if we're currently running in a test environment
+*/
+function getIsTestEnvironment() {
+	return isTestEnvironment();
+}
+/**
+* Get the global injector instance for debugging
+*/
+const injector = { get instance() {
+	return getGlobalInjector();
+} };
+/**
+* Destroy all resources and clean up
+*/
+function destroy(root) {
+	return getGlobalInjector().destroy(root);
+}
+/**
+* Create a new isolated injector instance
+*/
+function createInjector(config = {}) {
+	return new StyleInjector({
+		...getConfig(),
+		forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),
+		...config
+	});
+}
+//#endregion
+//#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: [],
+	generatedNames: /* @__PURE__ */ new Map()
+}));
+function rscAllocateClassName(rscCache, cacheKey) {
+	const existing = rscCache.cacheKeyToClassName.get(cacheKey);
+	if (existing) return {
+		className: existing,
+		isNew: false
+	};
+	const className = `t${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;
+	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.
+*/
+function pushRSCCSS(rscCache, key, css) {
+	if (rscCache.emittedKeys.has(key)) return false;
+	rscCache.emittedKeys.add(key);
+	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["@properties"];
+		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 @properties)
+*/
+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/ssr/format-keyframes.ts
+/**
+* Convert keyframes steps to a CSS string.
+* Replicates SheetManager.stepsToCSS() without the class instance.
+*/
+function stepsToCSS(steps) {
+	const rules = [];
+	for (const [key, value] of Object.entries(steps)) {
+		if (typeof value === "string") {
+			rules.push(`${key} { ${value.trim()} }`);
+			continue;
+		}
+		const styleMap = value || {};
+		const styleNames = Object.keys(styleMap).sort();
+		const handlerQueue = [];
+		const seenHandlers = /* @__PURE__ */ new Set();
+		styleNames.forEach((styleName) => {
+			let handlers = STYLE_HANDLER_MAP[styleName];
+			if (!handlers) handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];
+			handlers.forEach((handler) => {
+				if (!seenHandlers.has(handler)) {
+					seenHandlers.add(handler);
+					handlerQueue.push(handler);
+				}
+			});
+		});
+		const declarationPairs = [];
+		handlerQueue.forEach((handler) => {
+			const result = handler(handler.__lookupStyles.reduce((acc, name) => {
+				const v = styleMap[name];
+				if (v !== void 0) acc[name] = v;
+				return acc;
+			}, {}));
+			if (!result) return;
+			(Array.isArray(result) ? result : [result]).forEach((cssMap) => {
+				if (!cssMap || typeof cssMap !== "object") return;
+				const { $: _$, ...props } = cssMap;
+				Object.entries(props).forEach(([prop, val]) => {
+					if (val == null || val === "") return;
+					if (Array.isArray(val)) val.forEach((v) => {
+						if (v != null && v !== "") declarationPairs.push({
+							prop,
+							value: String(v)
+						});
+					});
+					else declarationPairs.push({
+						prop,
+						value: String(val)
+					});
+				});
+			});
+		});
+		const declarations = declarationPairs.map((d) => `${d.prop}: ${d.value}`).join("; ");
+		rules.push(`${key} { ${declarations.trim()} }`);
+	}
+	return rules.join(" ");
+}
+/**
+* Format a @keyframes rule as a CSS string.
+*/
+function formatKeyframesCSS(name, steps) {
+	return `@keyframes ${name} { ${stepsToCSS(steps)} }`;
+}
+//#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);
+	if (usedKf) for (const [name, steps] of Object.entries(usedKf)) {
+		const key = `__kf:${name}:${JSON.stringify(steps)}`;
+		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));
+			}
+		}
+	}
+	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) {
+	const rscCache = getRSCCache();
+	const cssParts = [];
+	const classNames = [];
+	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 { className, isNew } = rscAllocateClassName(rscCache, generateChunkCacheKey(styles, chunkName, chunkStyleKeys));
+		classNames.push(className);
+		if (isNew) {
+			const renderResult = renderStylesForChunk(styles, chunkName, chunkStyleKeys);
+			if (renderResult.rules.length > 0) {
+				const css = formatRules(renderResult.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) {
+	if (styleKeys.length === 0) return null;
+	const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);
+	const { className, isNewAllocation } = collector.allocateClassName(cacheKey);
+	if (isNewAllocation) {
+		const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);
+		if (renderResult.rules.length > 0) {
+			collector.collectChunk(cacheKey, className, renderResult.rules);
+			return {
+				name: chunkName,
+				styleKeys,
+				cacheKey,
+				renderResult,
+				className
+			};
+		}
+		return null;
+	}
+	return {
+		name: chunkName,
+		styleKeys,
+		cacheKey,
+		renderResult: { rules: [] },
+		className
+	};
+}
+/**
+* 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, root) {
+	if (styleKeys.length === 0) return null;
+	const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);
+	const renderResult = renderStylesForChunk(styles, chunkName, styleKeys, cacheKey);
+	if (renderResult.rules.length === 0) return null;
+	const { className } = inject(renderResult.rules, {
+		cacheKey,
+		root
+	});
+	return {
+		name: chunkName,
+		styleKeys,
+		cacheKey,
+		renderResult,
+		className
+	};
+}
+/**
+* Inject keyframes synchronously and return a name replacement map.
+* On the client, keyframes are injected into the DOM.
+*/
+function injectKeyframesSync(usedKeyframes, root) {
+	let nameMap = null;
+	for (const [name, steps] of Object.entries(usedKeyframes)) {
+		const injectedName = keyframes(steps, {
+			name,
+			root
+		}).toString();
+		if (injectedName !== name) {
+			if (!nameMap) nameMap = /* @__PURE__ */ new Map();
+			nameMap.set(name, injectedName);
+		}
+	}
+	return nameMap;
+}
+/**
+* Inject chunk rules synchronously, replacing animation names if needed.
+*/
+function injectChunkRulesSync(chunks, nameMap, root) {
+	for (const chunk of chunks) if (chunk.renderResult.rules.length > 0) inject(nameMap ? chunk.renderResult.rules.map((rule) => ({
+		...rule,
+		declarations: replaceAnimationNames(rule.declarations, nameMap)
+	})) : chunk.renderResult.rules, {
+		cacheKey: chunk.cacheKey,
+		root
+	});
+}
+/**
+* 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 });
+	}
+}
+/**
+* Collect all ancillary rules into the SSR collector.
+*/
+function collectAncillarySSR(collector, styles, chunks) {
+	const usedKf = getUsedKeyframes(styles);
+	if (usedKf) for (const [name, steps] of Object.entries(usedKf)) {
+		const css = formatKeyframesCSS(name, steps);
+		collector.collectKeyframes(name, css);
+	}
+	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 (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 chunkMap = categorizeStyleKeys(resolved);
+	const collector = options?.ssrCollector !== void 0 ? options.ssrCollector : getRegisteredSSRCollector();
+	const chunks = [];
+	if (collector) {
+		collector.collectInternals();
+		for (const [chunkName, chunkStyleKeys] of chunkMap) {
+			const chunk = processChunkSSR(collector, resolved, chunkName, chunkStyleKeys);
+			if (chunk) chunks.push(chunk);
+		}
+		collectAncillarySSR(collector, resolved, chunks);
+	} else if (typeof document === "undefined") return computeStylesRSC(resolved, chunkMap);
+	else {
+		const root = options?.root;
+		injectAncillarySync(resolved, root);
+		const usedKf = getUsedKeyframes(resolved);
+		const nameMap = usedKf ? injectKeyframesSync(usedKf, root) : null;
+		for (const [chunkName, chunkStyleKeys] of chunkMap) {
+			const chunk = processChunkSync(resolved, chunkName, chunkStyleKeys, root);
+			if (chunk) chunks.push(chunk);
+		}
+		if (nameMap) injectChunkRulesSync(chunks, nameMap, 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/colors.ts
+function color(name, opacity = 1) {
+	if (opacity !== 1) return `${getColorSpaceFunc()}(var(--${name}-color-${getColorSpaceSuffix()}) / ${opacity})`;
+	return `var(--${name}-color)`;
+}
+//#endregion
+//#region src/utils/cache-wrapper.ts
+/**
+* Create a function that caches the result with LRU eviction.
+*/
+function cacheWrapper(handler, limit = 1e3) {
+	const cache = new Lru(limit);
+	return (firstArg, secondArg) => {
+		const key = typeof firstArg === "string" && secondArg == null ? firstArg : JSON.stringify([firstArg, secondArg]);
+		let result = cache.get(key);
+		if (result === void 0) {
+			result = secondArg == null ? handler(firstArg) : handler(firstArg, secondArg);
+			cache.set(key, result);
+		}
+		return result;
+	};
+}
+//#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/dotize.ts
+const dotize = {
+	valTypes: {
+		none: "NONE",
+		primitive: "PRIM",
+		object: "OBJECT",
+		array: "ARRAY"
+	},
+	getValType: function(val) {
+		if (!val || typeof val != "object" || Array.isArray(val)) return dotize.valTypes.primitive;
+		if (typeof val == "object") return dotize.valTypes.object;
+	},
+	getPathType: function(arrPath) {
+		const arrPathTypes = [];
+		for (const path in arrPath) {
+			const pathVal = arrPath[path];
+			if (!pathVal) arrPathTypes.push(dotize.valTypes.none);
+			else if (dotize.isNumber(pathVal)) arrPathTypes.push(dotize.valTypes.array);
+			else arrPathTypes.push(dotize.valTypes.object);
+		}
+		return arrPathTypes;
+	},
+	isUndefined: function(obj) {
+		return typeof obj == "undefined";
+	},
+	isNumber: function(f) {
+		return !isNaN(parseInt(f));
+	},
+	isEmptyObj: function(obj) {
+		for (const prop in obj) if (Object.hasOwnProperty.call(obj, prop)) return false;
+		return JSON.stringify(obj) === JSON.stringify({});
+	},
+	isPlainObject: function(obj) {
+		if (typeof obj !== "object" || obj === null) return false;
+		return Object.getPrototypeOf(obj) === Object.prototype;
+	},
+	isNotObject: function(obj) {
+		return !obj || !this.isPlainObject(obj);
+	},
+	isEmptyArray: function(arr) {
+		return Array.isArray(arr) && arr.length == 0;
+	},
+	isNotArray: function(arr) {
+		return Array.isArray(arr) == false;
+	},
+	removeEmptyArrayItem: function(arr) {
+		return arr.filter(function(el) {
+			return el != null && el != "";
+		});
+	},
+	getFieldName: function(field, prefix, isRoot, isArrayItem, isArray) {
+		if (isArray) return (prefix ? prefix : "") + (dotize.isNumber(field) ? "[" + field + "]" : (isRoot && !prefix ? "" : ".") + field);
+		else if (isArrayItem) return (prefix ? prefix : "") + "[" + field + "]";
+		else return (prefix ? prefix + "." : "") + field;
+	},
+	startsWith: function(val, valToSearch) {
+		return val.indexOf(valToSearch) == 0;
+	},
+	convert: function(obj, prefix = "") {
+		let newObj = {};
+		if (dotize.isNotObject(obj)) if (prefix) {
+			newObj[prefix] = obj;
+			return newObj;
+		} else return obj;
+		return (function recurse(o, p, isRoot) {
+			const isArrayItem = Array.isArray(o);
+			for (const f in o) {
+				const currentProp = o[f];
+				if (currentProp && typeof currentProp === "object" && !Array.isArray(currentProp) && dotize.isPlainObject(currentProp)) {
+					if (isArrayItem && dotize.isEmptyObj(currentProp) == false) newObj = recurse(currentProp, dotize.getFieldName(f, p, isRoot, true));
+					else if (dotize.isEmptyObj(currentProp) == false) newObj = recurse(currentProp, dotize.getFieldName(f, p, isRoot));
+					else if (dotize.isEmptyObj(currentProp)) newObj[dotize.getFieldName(f, p, isRoot, isArrayItem)] = currentProp;
+				} else if (isArrayItem || dotize.isNumber(f)) newObj[dotize.getFieldName(f, p, isRoot, true)] = currentProp;
+				else newObj[dotize.getFieldName(f, p, isRoot)] = currentProp;
+			}
+			return newObj;
+		})(obj, prefix, true);
+	},
+	backward: function(obj, prefix) {
+		let newObj = {};
+		const arStartRegex = /\[(\d+)\]/g;
+		if (dotize.isNotObject(obj) && dotize.isNotArray(obj)) if (prefix) return obj[prefix];
+		else return obj;
+		for (let tProp in obj) {
+			const tPropVal = obj[tProp];
+			if (prefix) {
+				const prefixRegex = new RegExp("^" + prefix);
+				tProp = tProp.replace(prefixRegex, "");
+			}
+			tProp = tProp.replace(arStartRegex, ".$1");
+			if (dotize.startsWith(tProp, ".")) tProp = tProp.replace(/^\./, "");
+			const arrPath = tProp.split(".");
+			const arrPathTypes = dotize.getPathType(arrPath);
+			if (!dotize.isUndefined(arrPathTypes) && arrPathTypes[0] == dotize.valTypes.array && Array.isArray(newObj) == false) newObj = [];
+			(function recurse(rPropVal, rObj, rPropValPrev, rObjPrev) {
+				let currentPath = arrPath.shift();
+				const currentPathType = arrPathTypes.shift();
+				if (typeof currentPath == "undefined" || currentPath == "") {
+					newObj = rPropVal;
+					return;
+				}
+				const isArray = currentPathType == dotize.valTypes.array;
+				if (dotize.isNumber(currentPath)) currentPath = parseInt(currentPath);
+				if (arrPath.length > 0) {
+					if (typeof rObj[currentPath] == "undefined") if (isArray) rObj[currentPath] = [];
+					else rObj[currentPath] = {};
+					recurse(rPropVal, rObj[currentPath], currentPath, rObj);
+					return;
+				}
+				if (currentPathType == dotize.valTypes.array && rPropValPrev && rObjPrev) {
+					if (Array.isArray(rObjPrev[rPropValPrev]) == false) rObjPrev[rPropValPrev] = [];
+					rObjPrev[rPropValPrev].push(rPropVal);
+				} else rObj[currentPath] = rPropVal;
+			})(tPropVal, newObj);
+		}
+		return newObj;
+	}
+};
+//#endregion
+//#region src/utils/process-tokens.ts
+/**
+* Extract color components in the configured color space.
+* Returns a CSS variable reference for token colors, or decomposed
+* components as a space-separated string.
+*/
+function extractColorSpaceValue(colorValue, parsedOutput) {
+	const suffix = getColorSpaceSuffix();
+	const varMatch = parsedOutput.match(/var\(--([a-z0-9-]+)-color\)/);
+	if (varMatch) return `var(--${varMatch[1]}-color-${suffix})`;
+	const components = getColorSpaceComponents(colorValue);
+	if (components !== colorValue) return components;
+	const componentsFromParsed = getColorSpaceComponents(parsedOutput);
+	if (componentsFromParsed !== parsedOutput) return componentsFromParsed;
+	return parsedOutput;
+}
+/**
+* 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;
+}
+/**
+* Process tokens object into inline style properties.
+* - $name -> --name with parsed value
+* - #name -> --name-color AND --name-color-{colorSpace} with parsed values
+*
+* @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.startsWith("$")) {
+			const propName = `--${key.slice(1)}`;
+			const processedValue = processTokenValue(value === true ? "" : value);
+			if (!result) result = {};
+			result[propName] = processedValue;
+		} else if (key.startsWith("#")) {
+			const colorName = key.slice(1);
+			const suffix = getColorSpaceSuffix();
+			const effectiveValue = normalizeColorTokenValue(value);
+			if (effectiveValue === null) continue;
+			const originalValue = typeof effectiveValue === "number" ? String(effectiveValue) : effectiveValue;
+			const lowerValue = originalValue.toLowerCase();
+			const processedValue = processTokenValue(effectiveValue);
+			if (!result) result = {};
+			result[`--${colorName}-color`] = processedValue;
+			if (/^#current(?:\.|$)/i.test(lowerValue)) continue;
+			result[`--${colorName}-color-${suffix}`] = extractColorSpaceValue(originalValue, processedValue);
+		}
+	}
+	return result;
+}
+//#endregion
+//#region src/debug.ts
+function fmtSize(bytes) {
+	return bytes > 1024 ? `${(bytes / 1024).toFixed(1)}KB` : `${bytes}B`;
+}
+function countRules(css) {
+	return (css.match(/\{[^}]*\}/g) || []).length;
+}
+function sortTastyClasses(classes) {
+	return Array.from(classes).sort((a, b) => a.localeCompare(b));
+}
+function getRegistry(root = document) {
+	return injector.instance._sheetManager?.getRegistry(root);
+}
+function getUnusedClasses(root = document) {
+	const registry = getRegistry(root);
+	if (!registry) return [];
+	const result = [];
+	for (const [cls, rc] of registry.refCounts) if (rc === 0) result.push(cls);
+	return sortTastyClasses(result);
+}
+function findDomTastyClasses(root = document) {
+	const classes = /* @__PURE__ */ new Set();
+	(root.querySelectorAll?.("[class]") || []).forEach((el) => {
+		const attr = el.getAttribute("class");
+		if (attr) {
+			for (const cls of attr.split(/\s+/)) if (/^t[a-z0-9]+$/.test(cls)) classes.add(cls);
+		}
+	});
+	return sortTastyClasses(classes);
+}
+function prettifyCSS(css) {
+	if (!css || !css.trim()) return "";
+	const out = [];
+	let depth = 0;
+	const indent = () => "  ".repeat(depth);
+	let normalized = css.replace(/\s+/g, " ").trim();
+	normalized = normalized.replace(/\s*\{\s*/g, " { ");
+	normalized = normalized.replace(/\s*\}\s*/g, " } ");
+	normalized = normalized.replace(/;\s*/g, "; ");
+	const tokens = normalized.split(/\s+/);
+	let buf = "";
+	for (const t of tokens) if (t === "{") {
+		const header = buf.trim();
+		if (header) {
+			const parts = splitOutsideParens(header, ",");
+			if (parts.length > 1) out.push(parts.map((p, idx) => idx === 0 ? `${indent()}${p.trim()},` : `${indent()}${p.trim()}${idx < parts.length - 1 ? "," : ""}`).join("\n") + " {");
+			else out.push(`${indent()}${header} {`);
+		} else out.push(`${indent()}{`);
+		depth++;
+		buf = "";
+	} else if (t === "}") {
+		if (buf.trim()) {
+			for (const decl of buf.split(";").filter((s) => s.trim())) out.push(`${indent()}${decl.trim()};`);
+			buf = "";
+		}
+		depth = Math.max(0, depth - 1);
+		out.push(`${indent()}}`);
+	} else if (t.endsWith(";")) {
+		buf += ` ${t}`;
+		const full = buf.trim();
+		if (full) out.push(`${indent()}${full}`);
+		buf = "";
+	} else buf += ` ${t}`;
+	if (buf.trim()) out.push(buf.trim());
+	return out.filter((l) => l.trim()).join("\n").replace(/\n{3,}/g, "\n\n").trim();
+}
+/** Split `str` by `sep` only when not inside parentheses */
+function splitOutsideParens(str, sep) {
+	const parts = [];
+	let depth = 0;
+	let start = 0;
+	for (let i = 0; i < str.length; i++) {
+		const ch = str[i];
+		if (ch === "(") depth++;
+		else if (ch === ")") depth--;
+		else if (depth === 0 && str.startsWith(sep, i)) {
+			parts.push(str.slice(start, i));
+			start = i + sep.length;
+		}
+	}
+	parts.push(str.slice(start));
+	return parts;
+}
+function extractChunkName(cacheKey) {
+	for (const part of cacheKey.split("\0")) {
+		if (part.startsWith("[states:")) continue;
+		if (!part.includes(":") && part.length > 0) return part;
+	}
+	return null;
+}
+function getChunkForClass(className, root = document) {
+	const registry = getRegistry(root);
+	if (!registry) return null;
+	for (const [key, cn] of registry.cacheKeyToClassName) if (cn === className) return extractChunkName(key);
+	return null;
+}
+function buildChunkBreakdown(root = document) {
+	const registry = getRegistry(root);
+	if (!registry) return {
+		byChunk: {},
+		totalChunkTypes: 0,
+		totalClasses: 0
+	};
+	const byChunk = {};
+	for (const [cacheKey, className] of registry.cacheKeyToClassName) {
+		const chunk = extractChunkName(cacheKey) || "unknown";
+		if (!byChunk[chunk]) byChunk[chunk] = {
+			classes: [],
+			cssSize: 0,
+			ruleCount: 0
+		};
+		byChunk[chunk].classes.push(className);
+		const css = injector.instance.getCssTextForClasses([className], { root });
+		byChunk[chunk].cssSize += css.length;
+		byChunk[chunk].ruleCount += countRules(css);
+	}
+	for (const entry of Object.values(byChunk)) entry.classes = sortTastyClasses(entry.classes);
+	const totalClasses = Object.values(byChunk).reduce((s, e) => s + e.classes.length, 0);
+	return {
+		byChunk,
+		totalChunkTypes: Object.keys(byChunk).length,
+		totalClasses
+	};
+}
+function getGlobalTypeCSS(type, root = document) {
+	const registry = getRegistry(root);
+	if (!registry) return {
+		css: "",
+		ruleCount: 0,
+		size: 0
+	};
+	const chunks = [];
+	let rc = 0;
+	if (type === "keyframes") for (const [, entry] of registry.keyframesCache) {
+		const info = entry.info;
+		const sheetInfo = registry.sheets[info.sheetIndex];
+		const sm = injector.instance._sheetManager;
+		const ss = sheetInfo && sm ? sm.getCSSSheet(sheetInfo) : null;
+		if (ss && info.ruleIndex < ss.cssRules.length) {
+			const rule = ss.cssRules[info.ruleIndex];
+			if (rule) {
+				chunks.push(rule.cssText);
+				rc++;
+			}
+		} else if (info.cssText) {
+			chunks.push(info.cssText);
+			rc++;
+		}
+	}
+	else {
+		const prefix = type === "global" ? "global:" : type === "raw" ? "raw:" : "property:";
+		for (const [key, ri] of registry.globalRules) {
+			if (!key.startsWith(prefix)) continue;
+			const sheetInfo = registry.sheets[ri.sheetIndex];
+			const sm = injector.instance._sheetManager;
+			const ss = sheetInfo && sm ? sm.getCSSSheet(sheetInfo) : null;
+			if (ss) {
+				const start = Math.max(0, ri.ruleIndex);
+				const end = Math.min(ss.cssRules.length - 1, ri.endRuleIndex ?? ri.ruleIndex);
+				if (start >= 0 && end >= start && start < ss.cssRules.length) for (let i = start; i <= end; i++) {
+					const rule = ss.cssRules[i];
+					if (rule) {
+						chunks.push(rule.cssText);
+						rc++;
+					}
+				}
+			} else if (ri.cssText?.length) {
+				chunks.push(...ri.cssText);
+				rc += ri.cssText.length;
+			}
+		}
+	}
+	const raw = chunks.join("\n");
+	return {
+		css: prettifyCSS(raw),
+		ruleCount: rc,
+		size: raw.length
+	};
+}
+function getSourceCssForClasses(classNames, root = document) {
+	const registry = getRegistry(root);
+	if (!registry) return null;
+	const chunks = [];
+	let found = false;
+	for (const cls of classNames) {
+		const info = registry.rules.get(cls);
+		if (info?.cssText?.length) {
+			chunks.push(...info.cssText);
+			found = true;
+		}
+	}
+	return found ? chunks.join("\n") : null;
+}
+function getDefs(root = document) {
+	const registry = getRegistry(root);
+	let properties = [];
+	if (registry?.injectedProperties) properties = Array.from(registry.injectedProperties.keys()).sort();
+	const keyframes = [];
+	if (registry) {
+		for (const entry of registry.keyframesCache.values()) keyframes.push({
+			name: entry.name,
+			refCount: entry.refCount
+		});
+		keyframes.sort((a, b) => a.name.localeCompare(b.name));
+	}
+	return {
+		properties,
+		keyframes
+	};
+}
+const CHUNK_ORDER = [
+	CHUNK_NAMES.COMBINED,
+	CHUNK_NAMES.APPEARANCE,
+	CHUNK_NAMES.FONT,
+	CHUNK_NAMES.DIMENSION,
+	CHUNK_NAMES.DISPLAY,
+	CHUNK_NAMES.LAYOUT,
+	CHUNK_NAMES.POSITION,
+	CHUNK_NAMES.MISC,
+	CHUNK_NAMES.SUBCOMPONENTS
+];
+const tastyDebug = {
+	css(target, opts) {
+		const { root = document, prettify = true, raw = false, source = false } = opts || {};
+		let css = "";
+		if (source && typeof target === "string" && /^t[a-z0-9]+$/.test(target)) {
+			const src = getSourceCssForClasses([target], root);
+			if (src) css = src;
+			else {
+				if (!raw) console.warn("tastyDebug: source CSS not available (requires dev mode or TASTY_DEBUG=true). Falling back to live CSSOM.");
+				css = injector.instance.getCssTextForClasses([target], { root });
+			}
+		} else if (source && Array.isArray(target)) {
+			const src = getSourceCssForClasses(target, root);
+			if (src) css = src;
+			else {
+				if (!raw) console.warn("tastyDebug: source CSS not available. Falling back to live CSSOM.");
+				css = injector.instance.getCssTextForClasses(target, { root });
+			}
+		} else if (typeof target === "string") if (target === "all") css = injector.instance.getCssText({ root });
+		else if (target === "global") {
+			css = getGlobalTypeCSS("global", root).css;
+			return css;
+		} else if (target === "active") {
+			const active = findDomTastyClasses(root);
+			css = injector.instance.getCssTextForClasses(active, { root });
+		} else if (target === "unused") {
+			const unused = getUnusedClasses(root);
+			css = injector.instance.getCssTextForClasses(unused, { root });
+		} else if (target === "page") css = getPageCSS(root);
+		else if (/^t[a-z0-9]+$/.test(target)) css = injector.instance.getCssTextForClasses([target], { root });
+		else {
+			const el = root.querySelector?.(target);
+			if (el) css = getCssTextForNode(el, { root });
+		}
+		else if (Array.isArray(target)) css = injector.instance.getCssTextForClasses(target, { root });
+		else if (target instanceof Element) css = getCssTextForNode(target, { root });
+		const result = prettify ? prettifyCSS(css) : css;
+		if (!raw) {
+			const label = Array.isArray(target) ? `[${target.join(", ")}]` : target;
+			const rc = countRules(css);
+			console.group(`CSS for ${label} (${rc} rules, ${fmtSize(css.length)})`);
+			console.log(result || "(empty)");
+			console.groupEnd();
+		}
+		return result;
+	},
+	inspect(target, opts) {
+		const { root = document, raw = false } = opts || {};
+		const element = typeof target === "string" ? root.querySelector?.(target) : target;
+		if (!element) {
+			const empty = {
+				element: null,
+				classes: [],
+				chunks: [],
+				css: "",
+				size: 0,
+				rules: 0
+			};
+			if (!raw) console.warn("tastyDebug.inspect: element not found");
+			return empty;
+		}
+		const tastyClasses = (element.getAttribute("class") || "").split(/\s+/).filter((cls) => /^t[a-z0-9]+$/.test(cls));
+		const chunks = tastyClasses.map((className) => ({
+			className,
+			chunkName: getChunkForClass(className, root)
+		}));
+		const css = getCssTextForNode(element, { root });
+		const rules = countRules(css);
+		const result = {
+			element,
+			classes: tastyClasses,
+			chunks,
+			css: prettifyCSS(css),
+			size: css.length,
+			rules
+		};
+		if (!raw) {
+			const tag = element.tagName.toLowerCase();
+			const id = element.id ? `#${element.id}` : "";
+			console.group(`inspect ${tag}${id} — ${tastyClasses.length} classes, ${rules} rules, ${fmtSize(css.length)}`);
+			if (chunks.length) console.log("Chunks:", chunks.map((c) => `${c.className}→${c.chunkName || "?"}`).join(", "));
+			console.groupCollapsed("CSS");
+			console.log(result.css || "(empty)");
+			console.groupEnd();
+			console.groupEnd();
+		}
+		return result;
+	},
+	summary(opts) {
+		const { root = document, raw = false } = opts || {};
+		const activeClasses = findDomTastyClasses(root);
+		const unusedClasses = getUnusedClasses(root);
+		const totalStyledClasses = [...activeClasses, ...unusedClasses];
+		const activeCSS = injector.instance.getCssTextForClasses(activeClasses, { root });
+		const unusedCSS = injector.instance.getCssTextForClasses(unusedClasses, { root });
+		const allCSS = injector.instance.getCssText({ root });
+		const activeRuleCount = countRules(activeCSS);
+		const unusedRuleCount = countRules(unusedCSS);
+		const globalData = getGlobalTypeCSS("global", root);
+		const rawData = getGlobalTypeCSS("raw", root);
+		const kfData = getGlobalTypeCSS("keyframes", root);
+		const propData = getGlobalTypeCSS("property", root);
+		const totalRuleCount = activeRuleCount + unusedRuleCount + globalData.ruleCount + rawData.ruleCount + kfData.ruleCount + propData.ruleCount;
+		const metrics = injector.instance.getMetrics({ root });
+		const defs = getDefs(root);
+		const chunkBreakdown = buildChunkBreakdown(root);
+		const summary = {
+			activeClasses,
+			unusedClasses,
+			totalStyledClasses,
+			activeCSSSize: activeCSS.length,
+			unusedCSSSize: unusedCSS.length,
+			globalCSSSize: globalData.size,
+			rawCSSSize: rawData.size,
+			keyframesCSSSize: kfData.size,
+			propertyCSSSize: propData.size,
+			totalCSSSize: allCSS.length,
+			activeRuleCount,
+			unusedRuleCount,
+			globalRuleCount: globalData.ruleCount,
+			rawRuleCount: rawData.ruleCount,
+			keyframesRuleCount: kfData.ruleCount,
+			propertyRuleCount: propData.ruleCount,
+			totalRuleCount,
+			metrics,
+			definedProperties: defs.properties,
+			definedKeyframes: defs.keyframes,
+			chunkBreakdown
+		};
+		if (!raw) {
+			console.group("Tasty Summary");
+			console.log(`Active:   ${activeClasses.length} classes, ${activeRuleCount} rules, ${fmtSize(activeCSS.length)}`);
+			console.log(`Unused:   ${unusedClasses.length} classes, ${unusedRuleCount} rules, ${fmtSize(unusedCSS.length)}`);
+			console.log(`Global:   ${globalData.ruleCount} rules, ${fmtSize(globalData.size)}`);
+			if (rawData.ruleCount) console.log(`Raw:      ${rawData.ruleCount} rules, ${fmtSize(rawData.size)}`);
+			if (kfData.ruleCount) console.log(`Keyframes: ${kfData.ruleCount} rules, ${fmtSize(kfData.size)}`);
+			if (propData.ruleCount) console.log(`@property: ${propData.ruleCount} rules, ${fmtSize(propData.size)}`);
+			console.log(`Total:    ${totalStyledClasses.length} classes, ${totalRuleCount} rules, ${fmtSize(allCSS.length)}`);
+			if (metrics) {
+				const total = metrics.hits + metrics.misses;
+				const rate = total > 0 ? (metrics.hits / total * 100).toFixed(1) : 0;
+				console.log(`Cache:    ${rate}% hit rate (${total} lookups)`);
+			}
+			if (chunkBreakdown.totalChunkTypes > 0) {
+				console.groupCollapsed(`Chunks (${chunkBreakdown.totalChunkTypes} types, ${chunkBreakdown.totalClasses} classes)`);
+				for (const name of CHUNK_ORDER) {
+					const d = chunkBreakdown.byChunk[name];
+					if (d) console.log(`  ${name}: ${d.classes.length} cls, ${d.ruleCount} rules, ${fmtSize(d.cssSize)}`);
+				}
+				for (const [name, d] of Object.entries(chunkBreakdown.byChunk)) if (!CHUNK_ORDER.includes(name)) console.log(`  ${name}: ${d.classes.length} cls, ${d.ruleCount} rules, ${fmtSize(d.cssSize)}`);
+				console.groupEnd();
+			}
+			if (defs.properties.length || defs.keyframes.length) console.log(`Defs:     ${defs.properties.length} @property, ${defs.keyframes.length} @keyframes`);
+			console.groupEnd();
+		}
+		return summary;
+	},
+	chunks(opts) {
+		const { root = document, raw = false } = opts || {};
+		const breakdown = buildChunkBreakdown(root);
+		if (!raw) {
+			console.group(`Chunks (${breakdown.totalChunkTypes} types, ${breakdown.totalClasses} classes)`);
+			for (const name of CHUNK_ORDER) {
+				const d = breakdown.byChunk[name];
+				if (d) console.log(`  ${name}: ${d.classes.length} cls, ${d.ruleCount} rules, ${fmtSize(d.cssSize)}`);
+			}
+			for (const [name, d] of Object.entries(breakdown.byChunk)) if (!CHUNK_ORDER.includes(name)) console.log(`  ${name}: ${d.classes.length} cls, ${d.ruleCount} rules, ${fmtSize(d.cssSize)}`);
+			console.groupEnd();
+		}
+		return breakdown;
+	},
+	cache(opts) {
+		const { root = document, raw = false } = opts || {};
+		const active = findDomTastyClasses(root);
+		const unused = getUnusedClasses(root);
+		const metrics = injector.instance.getMetrics({ root });
+		const status = {
+			classes: {
+				active,
+				unused,
+				all: [...active, ...unused]
+			},
+			metrics
+		};
+		if (!raw) {
+			console.group("Cache");
+			console.log(`Active: ${active.length}, Unused: ${unused.length}`);
+			if (metrics) {
+				const total = metrics.hits + metrics.misses;
+				const rate = total > 0 ? (metrics.hits / total * 100).toFixed(1) : 0;
+				console.log(`Hits: ${metrics.hits}, Misses: ${metrics.misses}, Rate: ${rate}%`);
+			}
+			console.groupEnd();
+		}
+		return status;
+	},
+	cleanup(opts) {
+		injector.instance.cleanup(opts?.root);
+	},
+	help() {
+		console.log(`tastyDebug API:
+  .summary()            — overview (classes, rules, sizes)
+  .css("active")        — CSS for classes in DOM
+  .css("t42")           — CSS for a specific class
+  .css("t42",{source:1})— original CSS before browser parsing (dev only)
+  .css(".selector")     — CSS for a DOM element
+  .inspect(".selector") — element details (classes, chunks, rules)
+  .chunks()             — style chunk breakdown
+  .cache()              — cache status and metrics
+  .cleanup()            — force unused style cleanup
+Options: { raw: true } suppresses logging, { root: shadowRoot } targets Shadow DOM`);
+	},
+	install() {
+		if (typeof window !== "undefined" && window.tastyDebug !== tastyDebug) {
+			window.tastyDebug = tastyDebug;
+			console.log("tastyDebug installed. Run tastyDebug.help() for commands.");
+		}
+	}
+};
+function getPageCSS(root = document) {
+	const chunks = [];
+	try {
+		if ("styleSheets" in root) for (const sheet of Array.from(root.styleSheets)) try {
+			if (sheet.cssRules) chunks.push(Array.from(sheet.cssRules).map((r) => r.cssText).join("\n"));
+		} catch {}
+	} catch {}
+	return chunks.join("\n");
+}
+if (typeof window !== "undefined" && isDevEnv()) tastyDebug.install();
+//#endregion
+export { property as A, DIMENSION_STYLES as B, getRawCSSText as C, injector as D, injectRawCSS as E, BLOCK_INNER_STYLES as F, TEXT_STYLES as G, INNER_STYLES as H, BLOCK_OUTER_STYLES as I, BLOCK_STYLES as L, ChunkSheetRegistry as M, chunkSheetRegistry as N, isPropertyDefined as O, BASE_STYLES as P, COLOR_STYLES as R, getIsTestEnvironment as S, injectGlobal as T, OUTER_STYLES as U, FLOW_STYLES as V, POSITION_STYLES as W, destroy as _, color as a, getCssText as b, hasKeys as c, collectAutoInferredPropertiesRSC as d, getStyleTarget as f, createInjector as g, counterStyle as h, _modAttrs as i, touch as j, keyframes as k, formatKeyframesCSS as l, cleanup as m, processTokens as n, filterBaseProps as o, pushRSCCSS as p, dotize as r, computeStyles as s, tastyDebug as t, collectAutoInferredProperties as u, fontFace as v, inject as w, getCssTextForNode as x, gc as y, CONTAINER_STYLES as z };
+
+//# sourceMappingURL=core-BqO8pplb.js.map