@cube-dev/ui-kit 0.118.0 → 0.119.0

package/dist/tasty/debug.js

@@ -1,734 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { isDevEnv } from "./utils/is-dev-env.js";
-import { CHUNK_NAMES } from "./chunks/definitions.js";
-import { getCssTextForNode, injector } from "./injector/index.js";
-
-//#region src/tasty/debug.ts
-/**
-* Debug utilities for inspecting tasty-generated CSS at runtime
-*/
-/**
-* Pretty-print CSS with proper indentation and formatting
-*/
-function prettifyCSS(css) {
-	if (!css || css.trim() === "") return "";
-	let formatted = css.replace(/\s+/g, " ").trim();
-	formatted = formatted.replace(/\s*\{\s*/g, " {\n");
-	formatted = formatted.replace(/;(?![^"']*["'][^"']*$)(?![^()]*\))/g, ";\n");
-	formatted = formatted.replace(/\s*\}\s*/g, "\n}\n");
-	formatted = formatted.replace(/,(?![^"']*["'][^"']*$)(?![^()]*\))(?=.*:.*\{|.*\{)/g, ",\n");
-	const lines = formatted.split("\n");
-	let indentLevel = 0;
-	const indentSize = 2;
-	let result = lines.map((line) => {
-		const trimmed = line.trim();
-		if (!trimmed) return "";
-		if (trimmed === "}") {
-			indentLevel = Math.max(0, indentLevel - 1);
-			return " ".repeat(indentLevel * indentSize) + trimmed;
-		}
-		let result = " ".repeat(indentLevel * indentSize) + trimmed;
-		if (trimmed.endsWith("{")) indentLevel++;
-		return result;
-	}).filter((line) => line.trim()).join("\n").replace(/\n{3,}/g, "\n\n").trim();
-	result = result.replace(/,\s+/g, ", ");
-	return result;
-}
-function findAllTastyClasses(root = document) {
-	const classes = /* @__PURE__ */ new Set();
-	(root.querySelectorAll?.("[class]") || []).forEach((element) => {
-		const classList = element.getAttribute("class");
-		if (classList) classList.split(/\s+/).filter((cls) => /^t\d+$/.test(cls)).forEach((cls) => classes.add(cls));
-	});
-	return Array.from(classes).sort((a, b) => {
-		return parseInt(a.slice(1)) - parseInt(b.slice(1));
-	});
-}
-function findAllStyledClasses(root = document) {
-	const allCSS = injector.instance.getCssText({ root });
-	const classes = /* @__PURE__ */ new Set();
-	const classRegex = /\.t(\d+)/g;
-	let match;
-	while ((match = classRegex.exec(allCSS)) !== null) classes.add(`t${match[1]}`);
-	return Array.from(classes).sort((a, b) => {
-		return parseInt(a.slice(1)) - parseInt(b.slice(1));
-	});
-}
-function extractCSSRules(css) {
-	const rules = [];
-	let cleanCSS = css.replace(/\/\*[\s\S]*?\*\//g, "");
-	let i = 0;
-	while (i < cleanCSS.length) {
-		while (i < cleanCSS.length && /\s/.test(cleanCSS[i])) i++;
-		if (i >= cleanCSS.length) break;
-		const selectorStart = i;
-		let braceDepth = 0;
-		let inString = false;
-		let stringChar = "";
-		while (i < cleanCSS.length) {
-			const char = cleanCSS[i];
-			if (inString) {
-				if (char === stringChar && cleanCSS[i - 1] !== "\\") inString = false;
-			} else if (char === "\"" || char === "'") {
-				inString = true;
-				stringChar = char;
-			} else if (char === "{") {
-				braceDepth++;
-				if (braceDepth === 1) break;
-			}
-			i++;
-		}
-		if (i >= cleanCSS.length) break;
-		const selector = cleanCSS.substring(selectorStart, i).trim();
-		i++;
-		const contentStart = i;
-		braceDepth = 1;
-		inString = false;
-		while (i < cleanCSS.length && braceDepth > 0) {
-			const char = cleanCSS[i];
-			if (inString) {
-				if (char === stringChar && cleanCSS[i - 1] !== "\\") inString = false;
-			} else if (char === "\"" || char === "'") {
-				inString = true;
-				stringChar = char;
-			} else if (char === "{") braceDepth++;
-			else if (char === "}") braceDepth--;
-			i++;
-		}
-		const content = cleanCSS.substring(contentStart, i - 1).trim();
-		if (content && selector) rules.push({
-			selector,
-			declarations: content
-		});
-	}
-	return rules;
-}
-function getGlobalCSS(root = document) {
-	return prettifyCSS(extractCSSRules(injector.instance.getCssText({ root })).filter((rule) => {
-		return !rule.selector.split(",").map((s) => s.trim()).every((selector) => {
-			const parts = selector.replace(/[.#:\s>+~[\]()]/g, " ").split(/\s+/).filter(Boolean);
-			return parts.length > 0 && parts.every((part) => /^t\d+$/.test(part));
-		});
-	}).map((rule) => `${rule.selector} { ${rule.declarations} }`).join("\n"));
-}
-function getPageCSS(options) {
-	const root = options?.root || document;
-	const includeCrossOrigin = options?.includeCrossOrigin ?? false;
-	const cssChunks = [];
-	try {
-		if ("styleSheets" in root) {
-			const styleSheets = Array.from(root.styleSheets);
-			for (const sheet of styleSheets) try {
-				if (sheet.cssRules) {
-					const rules = Array.from(sheet.cssRules);
-					cssChunks.push(rules.map((rule) => rule.cssText).join("\n"));
-				}
-			} catch (e) {
-				if (includeCrossOrigin) cssChunks.push(`/* Cross-origin stylesheet: ${sheet.href || "inline"} */`);
-			}
-		}
-	} catch (e) {}
-	return cssChunks.join("\n");
-}
-function getPageStats(options) {
-	const root = options?.root || document;
-	options?.includeCrossOrigin;
-	let cssSize = 0;
-	let ruleCount = 0;
-	let stylesheetCount = 0;
-	let skippedStylesheets = 0;
-	try {
-		if ("styleSheets" in root) {
-			const styleSheets = Array.from(root.styleSheets);
-			stylesheetCount = styleSheets.length;
-			for (const sheet of styleSheets) try {
-				if (sheet.cssRules) {
-					const rules = Array.from(sheet.cssRules);
-					ruleCount += rules.length;
-					cssSize += rules.reduce((sum, rule) => sum + rule.cssText.length, 0);
-				}
-			} catch (e) {
-				skippedStylesheets++;
-			}
-		}
-	} catch (e) {}
-	return {
-		cssSize,
-		ruleCount,
-		stylesheetCount,
-		skippedStylesheets
-	};
-}
-/**
-* Extract chunk name from a cache key.
-*
-* Cache keys have the format: "chunkName\0key:value\0key:value..."
-* or "[states:...]\0chunkName\0..." for predefined states.
-*
-* @param cacheKey - The cache key to parse
-* @returns The chunk name, or null if not found
-*/
-function extractChunkNameFromCacheKey(cacheKey) {
-	const parts = cacheKey.split("\0");
-	for (const part of parts) {
-		if (part.startsWith("[states:")) continue;
-		if (!part.includes(":") && part.length > 0) return part;
-	}
-	return null;
-}
-/**
-* Get chunk info for a className by reverse-looking up its cache key.
-*
-* @param className - The tasty class name (e.g., "t0", "t123")
-* @param root - The document or shadow root to search in
-* @returns Object with chunk name and cache key, or nulls if not found
-*/
-function getChunkForClassName(className, root = document) {
-	const registry = injector.instance["sheetManager"]?.getRegistry(root);
-	if (!registry) return {
-		chunkName: null,
-		cacheKey: null
-	};
-	for (const [cacheKey, cn] of registry.cacheKeyToClassName) if (cn === className) return {
-		chunkName: extractChunkNameFromCacheKey(cacheKey),
-		cacheKey
-	};
-	return {
-		chunkName: null,
-		cacheKey: null
-	};
-}
-/**
-* Get chunk breakdown statistics for all styles.
-*
-* @param root - The document or shadow root to search in
-* @returns Object with breakdown by chunk type and totals
-*/
-function getChunkBreakdown(root = document) {
-	const registry = injector.instance["sheetManager"]?.getRegistry(root);
-	if (!registry) return {
-		byChunk: {},
-		totalChunkTypes: 0
-	};
-	const byChunk = {};
-	for (const [cacheKey, className] of registry.cacheKeyToClassName) {
-		const chunkName = extractChunkNameFromCacheKey(cacheKey) || "unknown";
-		if (!byChunk[chunkName]) byChunk[chunkName] = {
-			classes: [],
-			cssSize: 0,
-			ruleCount: 0
-		};
-		byChunk[chunkName].classes.push(className);
-		const css = injector.instance.getCssTextForClasses([className], { root });
-		byChunk[chunkName].cssSize += css.length;
-		byChunk[chunkName].ruleCount += (css.match(/\{[^}]*\}/g) || []).length;
-	}
-	for (const entry of Object.values(byChunk)) entry.classes.sort((a, b) => {
-		return parseInt(a.slice(1)) - parseInt(b.slice(1));
-	});
-	return {
-		byChunk,
-		totalChunkTypes: Object.keys(byChunk).length
-	};
-}
-/**
-* Concise tastyDebug API for inspecting styles at runtime
-*/
-const tastyDebug = {
-	css(target, opts) {
-		const { root = document, prettify = true, log = false } = opts || {};
-		let css = "";
-		if (typeof target === "string") if (target === "all") css = injector.instance.getCssText({ root });
-		else if (target === "global") css = getGlobalCSS(root);
-		else if (target === "active") {
-			const activeClasses = findAllTastyClasses(root);
-			css = injector.instance.getCssTextForClasses(activeClasses, { root });
-		} else if (target === "unused") {
-			const registry = injector.instance["sheetManager"]?.getRegistry(root);
-			const unusedClasses = registry ? Array.from(registry.refCounts.entries()).filter(([, refCount]) => refCount === 0).map(([className]) => className) : [];
-			css = injector.instance.getCssTextForClasses(unusedClasses, { root });
-		} else if (target === "page") css = getPageCSS({
-			root,
-			includeCrossOrigin: true
-		});
-		else if (/^t\d+$/.test(target)) css = injector.instance.getCssTextForClasses([target], { root });
-		else {
-			const element = root.querySelector?.(target);
-			if (element) css = getCssTextForNode(element, { 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 (log) {
-			console.group(`🎨 CSS for ${Array.isArray(target) ? `[${target.join(", ")}]` : target}`);
-			console.log(result || "(empty)");
-			console.groupEnd();
-		}
-		return result;
-	},
-	inspect(target, opts) {
-		const { root = document } = opts || {};
-		const element = typeof target === "string" ? root.querySelector?.(target) : target;
-		if (!element) return {
-			element: null,
-			classes: [],
-			chunks: [],
-			css: "",
-			size: 0,
-			rules: 0
-		};
-		const tastyClasses = (element.getAttribute("class") || "").split(/\s+/).filter((cls) => /^t\d+$/.test(cls));
-		const chunks = tastyClasses.map((className) => ({
-			className,
-			chunkName: getChunkForClassName(className, root).chunkName
-		}));
-		const css = getCssTextForNode(element, { root });
-		const prettifiedCSS = prettifyCSS(css);
-		const ruleCount = (css.match(/\{[^}]*\}/g) || []).length;
-		return {
-			element,
-			classes: tastyClasses,
-			chunks,
-			css: prettifiedCSS,
-			size: css.length,
-			rules: ruleCount
-		};
-	},
-	cache(opts) {
-		const { root = document } = opts || {};
-		const activeClasses = findAllTastyClasses(root);
-		findAllStyledClasses(root);
-		const registry = injector.instance["sheetManager"]?.getRegistry(root);
-		const unusedClasses = registry ? Array.from(registry.refCounts.entries()).filter(([, refCount]) => refCount === 0).map(([className]) => className) : [];
-		return {
-			classes: {
-				active: activeClasses,
-				unused: unusedClasses,
-				all: [...activeClasses, ...unusedClasses]
-			},
-			metrics: injector.instance.getMetrics({ root })
-		};
-	},
-	cleanup(opts) {
-		const { root } = opts || {};
-		injector.instance.cleanup(root);
-	},
-	metrics(opts) {
-		const { root } = opts || {};
-		return injector.instance.getMetrics({ root });
-	},
-	resetMetrics(opts) {
-		const { root } = opts || {};
-		injector.instance.resetMetrics({ root });
-	},
-	chunks(opts) {
-		const { root = document, log = false } = opts || {};
-		const breakdown = getChunkBreakdown(root);
-		const totalClasses = Object.values(breakdown.byChunk).reduce((sum, entry) => sum + entry.classes.length, 0);
-		if (log) {
-			console.group("🧩 Style Chunk Breakdown");
-			const displayOrder = [
-				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
-			];
-			for (const chunkName of displayOrder) {
-				const data = breakdown.byChunk[chunkName];
-				if (data) {
-					const sizeStr = data.cssSize > 1024 ? `${(data.cssSize / 1024).toFixed(1)}KB` : `${data.cssSize}B`;
-					console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
-				}
-			}
-			for (const [chunkName, data] of Object.entries(breakdown.byChunk)) if (!displayOrder.includes(chunkName)) {
-				const sizeStr = data.cssSize > 1024 ? `${(data.cssSize / 1024).toFixed(1)}KB` : `${data.cssSize}B`;
-				console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
-			}
-			console.log(`📊 Total: ${totalClasses} classes across ${breakdown.totalChunkTypes} chunk types`);
-			console.groupEnd();
-		}
-		return {
-			...breakdown,
-			totalClasses
-		};
-	},
-	getGlobalTypeCSS(type, opts) {
-		const { root = document } = opts || {};
-		const registry = injector.instance["sheetManager"]?.getRegistry(root);
-		if (!registry) return {
-			css: "",
-			ruleCount: 0,
-			size: 0
-		};
-		const cssChunks = [];
-		let ruleCount = 0;
-		if (type === "keyframes") for (const [, entry] of registry.keyframesCache) {
-			const info = entry.info;
-			const styleSheet = registry.sheets[info.sheetIndex]?.sheet?.sheet;
-			if (styleSheet && info.ruleIndex < styleSheet.cssRules.length) {
-				const rule = styleSheet.cssRules[info.ruleIndex];
-				if (rule) {
-					cssChunks.push(rule.cssText);
-					ruleCount++;
-				}
-			} else if (info.cssText) {
-				cssChunks.push(info.cssText);
-				ruleCount++;
-			}
-		}
-		else {
-			const prefix = type === "global" ? "global:" : type === "raw" ? "raw:" : "property:";
-			for (const [key, ruleInfo] of registry.globalRules) if (key.startsWith(prefix)) {
-				const styleSheet = registry.sheets[ruleInfo.sheetIndex]?.sheet?.sheet;
-				if (styleSheet) {
-					const start = Math.max(0, ruleInfo.ruleIndex);
-					const end = Math.min(styleSheet.cssRules.length - 1, ruleInfo.endRuleIndex ?? ruleInfo.ruleIndex);
-					if (start >= 0 && end >= start && start < styleSheet.cssRules.length) for (let i = start; i <= end; i++) {
-						const rule = styleSheet.cssRules[i];
-						if (rule) {
-							cssChunks.push(rule.cssText);
-							ruleCount++;
-						}
-					}
-				} else if (ruleInfo.cssText && ruleInfo.cssText.length) {
-					cssChunks.push(...ruleInfo.cssText);
-					ruleCount += ruleInfo.cssText.length;
-				}
-			}
-		}
-		const rawCSS = cssChunks.join("\n");
-		return {
-			css: prettifyCSS(rawCSS),
-			ruleCount,
-			size: rawCSS.length
-		};
-	},
-	defs(opts) {
-		const { root = document } = opts || {};
-		let properties = [];
-		try {
-			const registry = injector.instance["sheetManager"]?.getRegistry(root);
-			if (registry?.injectedProperties) properties = Array.from(registry.injectedProperties.keys()).sort();
-		} catch {
-			const allCSS = injector.instance.getCssText({ root });
-			const propRegex = /@property\s+(--[a-z0-9-]+)/gi;
-			const propSet = /* @__PURE__ */ new Set();
-			let match;
-			while ((match = propRegex.exec(allCSS)) !== null) propSet.add(match[1]);
-			properties = Array.from(propSet).sort();
-		}
-		let keyframes = [];
-		try {
-			const registry = injector.instance["sheetManager"]?.getRegistry(root);
-			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));
-			}
-		} catch {
-			const allCSS = injector.instance.getCssText({ root });
-			const keyframesRegex = /@keyframes\s+([a-zA-Z0-9_-]+)/gi;
-			const keyframesSet = /* @__PURE__ */ new Set();
-			let match;
-			while ((match = keyframesRegex.exec(allCSS)) !== null) keyframesSet.add(match[1]);
-			keyframes = Array.from(keyframesSet).sort().map((name) => ({
-				name,
-				refCount: 1
-			}));
-		}
-		return {
-			properties,
-			keyframes
-		};
-	},
-	summary(opts) {
-		const { root = document, log = false, includePageCSS = false } = opts || {};
-		const cacheStatus = this.cache({ root });
-		const definitions = this.defs({ root });
-		const metrics = this.metrics({ root });
-		const activeCSS = this.css("active", {
-			root,
-			prettify: false
-		});
-		const unusedCSS = this.css("unused", {
-			root,
-			prettify: false
-		});
-		const allCSS = this.css("all", {
-			root,
-			prettify: false
-		});
-		const classCSSSize = activeCSS.length + unusedCSS.length;
-		const totalGlobalCSSSize = allCSS.length - classCSSSize;
-		const globalData = this.getGlobalTypeCSS("global", { root });
-		const rawData = this.getGlobalTypeCSS("raw", { root });
-		const keyframesData = this.getGlobalTypeCSS("keyframes", { root });
-		const propertyData = this.getGlobalTypeCSS("property", { root });
-		const globalTypesTotalSize = globalData.size + rawData.size + keyframesData.size + propertyData.size;
-		const cleanupSummary = {
-			enabled: !!metrics,
-			totalCleanups: metrics?.cleanupHistory?.length || 0,
-			totalClassesDeleted: metrics?.cleanupHistory?.reduce((sum, c) => sum + c.classesDeleted, 0) || 0,
-			totalCssDeleted: metrics?.cleanupHistory?.reduce((sum, c) => sum + c.cssSize, 0) || 0,
-			totalRulesDeleted: metrics?.cleanupHistory?.reduce((sum, c) => sum + c.rulesDeleted, 0) || 0,
-			averageClassesPerCleanup: 0,
-			averageCssPerCleanup: 0,
-			averageRulesPerCleanup: 0,
-			lastCleanup: void 0
-		};
-		if (cleanupSummary.totalCleanups > 0) {
-			cleanupSummary.averageClassesPerCleanup = cleanupSummary.totalClassesDeleted / cleanupSummary.totalCleanups;
-			cleanupSummary.averageCssPerCleanup = cleanupSummary.totalCssDeleted / cleanupSummary.totalCleanups;
-			cleanupSummary.averageRulesPerCleanup = cleanupSummary.totalRulesDeleted / cleanupSummary.totalCleanups;
-			const lastCleanup = metrics?.cleanupHistory?.[metrics.cleanupHistory.length - 1];
-			if (lastCleanup) cleanupSummary.lastCleanup = {
-				...lastCleanup,
-				date: new Date(lastCleanup.timestamp).toISOString()
-			};
-		}
-		let page;
-		if (includePageCSS) page = {
-			...getPageStats({
-				root,
-				includeCrossOrigin: true
-			}),
-			css: includePageCSS === "all" ? getPageCSS({
-				root,
-				includeCrossOrigin: true
-			}) : void 0
-		};
-		const useIndividualSizes = Math.abs(globalTypesTotalSize - totalGlobalCSSSize) < 100;
-		let adjustedGlobalSizes;
-		if (useIndividualSizes) adjustedGlobalSizes = {
-			globalCSSSize: globalData.size,
-			rawCSSSize: rawData.size,
-			keyframesCSSSize: keyframesData.size,
-			propertyCSSSize: propertyData.size
-		};
-		else {
-			const scaleFactor = totalGlobalCSSSize / globalTypesTotalSize;
-			adjustedGlobalSizes = {
-				globalCSSSize: Math.round(globalData.size * scaleFactor),
-				rawCSSSize: Math.round(rawData.size * scaleFactor),
-				keyframesCSSSize: Math.round(keyframesData.size * scaleFactor),
-				propertyCSSSize: Math.round(propertyData.size * scaleFactor)
-			};
-		}
-		const chunkBreakdown = getChunkBreakdown(root);
-		const summary = {
-			activeClasses: cacheStatus.classes.active,
-			unusedClasses: cacheStatus.classes.unused,
-			totalStyledClasses: cacheStatus.classes.all,
-			activeCSSSize: activeCSS.length,
-			unusedCSSSize: unusedCSS.length,
-			...adjustedGlobalSizes,
-			totalCSSSize: allCSS.length,
-			activeCSS: prettifyCSS(activeCSS),
-			unusedCSS: prettifyCSS(unusedCSS),
-			globalCSS: globalData.css,
-			rawCSS: rawData.css,
-			keyframesCSS: keyframesData.css,
-			propertyCSS: propertyData.css,
-			allCSS: prettifyCSS(allCSS),
-			globalRuleCount: globalData.ruleCount,
-			rawRuleCount: rawData.ruleCount,
-			keyframesRuleCount: keyframesData.ruleCount,
-			propertyRuleCount: propertyData.ruleCount,
-			page,
-			metrics,
-			definedProperties: definitions.properties,
-			definedKeyframes: definitions.keyframes,
-			propertyCount: definitions.properties.length,
-			keyframeCount: definitions.keyframes.length,
-			cleanupSummary,
-			chunkBreakdown
-		};
-		if (log) {
-			console.group("🎨 Comprehensive Tasty Debug Summary");
-			console.log(`📊 Style Cache Status:`);
-			console.log(`  • Active classes (in DOM): ${summary.activeClasses.length}`);
-			console.log(`  • Unused classes (refCount = 0): ${summary.unusedClasses.length}`);
-			console.log(`  • Total styled classes: ${summary.totalStyledClasses.length}`);
-			console.log(`💾 CSS Size:`);
-			console.log(`  • Active CSS: ${summary.activeCSSSize} characters`);
-			console.log(`  • Unused CSS: ${summary.unusedCSSSize} characters`);
-			console.log(`  • Global CSS (injectGlobal): ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`);
-			console.log(`  • Raw CSS (injectRawCSS/useRawCSS): ${summary.rawCSSSize} characters (${summary.rawRuleCount} rules)`);
-			console.log(`  • Keyframes CSS: ${summary.keyframesCSSSize} characters (${summary.keyframesRuleCount} rules)`);
-			console.log(`  • Property CSS: ${summary.propertyCSSSize} characters (${summary.propertyRuleCount} rules)`);
-			const calculatedTotal = summary.activeCSSSize + summary.unusedCSSSize + summary.globalCSSSize + summary.rawCSSSize + summary.keyframesCSSSize + summary.propertyCSSSize;
-			console.log(`  • Calculated Total: ${calculatedTotal} characters`);
-			console.log(`  • Actual Total: ${summary.totalCSSSize} characters`);
-			const difference = Math.abs(calculatedTotal - summary.totalCSSSize);
-			if (difference > 100) {
-				console.warn(`  ⚠️  Size mismatch: ${difference} characters difference`);
-				console.group("🔍 Debugging size mismatch:");
-				console.log(`Active + Unused = ${summary.activeCSSSize + summary.unusedCSSSize}`);
-				console.log(`All Global Types = ${summary.globalCSSSize + summary.rawCSSSize + summary.keyframesCSSSize + summary.propertyCSSSize}`);
-				console.log(`Class-based vs Total difference = ${summary.totalCSSSize - (summary.activeCSSSize + summary.unusedCSSSize)}`);
-				console.log(`Raw global extraction total: ${globalTypesTotalSize}`);
-				console.log(`Calculated global size: ${totalGlobalCSSSize}`);
-				console.log(`Used individual sizes: ${useIndividualSizes}`);
-				if (!useIndividualSizes) console.log(`Scale factor applied: ${(totalGlobalCSSSize / globalTypesTotalSize).toFixed(3)}`);
-				console.groupEnd();
-			}
-			if (page) {
-				console.log(`📄 Page CSS:`);
-				console.log(`  • Total page CSS: ${page.cssSize} characters`);
-				console.log(`  • Total page rules: ${page.ruleCount}`);
-				console.log(`  • Stylesheets: ${page.stylesheetCount} (${page.skippedStylesheets} skipped)`);
-			}
-			console.log("🏷️ Properties & Keyframes:");
-			console.log(`  • Defined @property: ${summary.propertyCount}`);
-			console.log(`  • Defined @keyframes: ${summary.keyframeCount}`);
-			if (metrics) {
-				console.log(`⚡ Performance Metrics:`);
-				console.log(`  • Cache hits: ${metrics.hits}`);
-				console.log(`  • Cache misses: ${metrics.misses}`);
-				console.log(`  • Cached style reuses: ${metrics.unusedHits}`);
-				const hitRate = metrics.hits + metrics.misses > 0 ? ((metrics.hits + (metrics.unusedHits || 0)) / (metrics.hits + metrics.misses) * 100).toFixed(1) : "0";
-				console.log(`  • Overall cache hit rate: ${hitRate}%`);
-			}
-			if (summary.chunkBreakdown.totalChunkTypes > 0) {
-				console.log("🧩 Style Chunk Breakdown:");
-				const displayOrder = [
-					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
-				];
-				for (const chunkName of displayOrder) {
-					const data = summary.chunkBreakdown.byChunk[chunkName];
-					if (data) {
-						const sizeStr = data.cssSize > 1024 ? `${(data.cssSize / 1024).toFixed(1)}KB` : `${data.cssSize}B`;
-						console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
-					}
-				}
-			}
-			console.log("🔍 Details:");
-			console.log("  • Active classes:", summary.activeClasses);
-			console.log("  • Unused classes:", summary.unusedClasses);
-			console.groupEnd();
-		}
-		return summary;
-	},
-	pageCSS(opts) {
-		const { root = document, prettify = true, log = false, includeCrossOrigin = true } = opts || {};
-		const css = getPageCSS({
-			root,
-			includeCrossOrigin
-		});
-		const result = prettify ? prettifyCSS(css) : css;
-		if (log) {
-			console.group("📄 Page CSS (All Stylesheets)");
-			console.log(result || "(empty)");
-			console.groupEnd();
-		}
-		return result;
-	},
-	pageStats(opts) {
-		const { root = document, includeCrossOrigin = true } = opts || {};
-		return getPageStats({
-			root,
-			includeCrossOrigin
-		});
-	},
-	install() {
-		if (typeof window !== "undefined" && window.tastyDebug !== tastyDebug) {
-			window.tastyDebug = tastyDebug;
-			console.log("🎨 tastyDebug installed on window. Run tastyDebug.help() for quick start guide.");
-		}
-	},
-	log(target, opts) {
-		const { title, ...cssOpts } = opts || {};
-		const css = tastyDebug.css(target, cssOpts);
-		if (!css.trim()) {
-			console.warn(`🎨 No CSS found for target: ${String(target)}`);
-			return;
-		}
-		const targetStr = Array.isArray(target) ? target.join(", ") : String(target);
-		const displayTitle = title || `CSS for "${targetStr}"`;
-		const lines = css.split("\n").length;
-		const size = new Blob([css]).size;
-		const sizeStr = size > 1024 ? `${(size / 1024).toFixed(1)}KB` : `${size}B`;
-		const ruleCount = (css.match(/\{/g) || []).length;
-		console.group(`🎨 ${displayTitle} (${ruleCount} rules, ${lines} lines, ${sizeStr})`);
-		const subElementMatches = css.match(/\[data-element="([^"]+)"\]/g) || [];
-		const subElements = [...new Set(subElementMatches.map((match) => match.match(/\[data-element="([^"]+)"\]/)?.[1]).filter(Boolean))];
-		if (subElements.length > 0) {
-			console.log(`🧩 Sub-elements found: ${subElements.join(", ")}`);
-			subElements.forEach((element) => {
-				`${element}`;
-				const elementRegex = new RegExp(`[^}]*\\[data-element="${element.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}"\\][^{]*\\{[^}]*\\}`, "gm");
-				const elementCSS = (css.match(elementRegex) || []).join("\n");
-				if (elementCSS) {
-					const elementRules = (elementCSS.match(/\{/g) || []).length;
-					const elementLines = elementCSS.split("\n").length;
-					const elementSize = new Blob([elementCSS]).size;
-					const elementSizeStr = elementSize > 1024 ? `${(elementSize / 1024).toFixed(1)}KB` : `${elementSize}B`;
-					console.groupCollapsed(`🧩 ${element} (${elementRules} rules, ${elementLines} lines, ${elementSizeStr})`);
-					console.log(`%c${elementCSS}`, "color: #666; font-family: monospace; font-size: 12px; white-space: pre;");
-					console.groupEnd();
-				}
-			});
-		}
-		console.groupCollapsed("📄 Full CSS (click to expand)");
-		console.log(`%c${css}`, "color: #666; font-family: monospace; font-size: 12px; white-space: pre;");
-		console.groupEnd();
-		console.groupEnd();
-	},
-	help() {
-		console.group("🎨 tastyDebug - Quick Start Guide");
-		console.log("💡 Essential commands:");
-		console.log("  • tastyDebug.summary({ log: true }) - comprehensive overview");
-		console.log("  • tastyDebug.chunks({ log: true }) - style chunk breakdown");
-		console.log("  • tastyDebug.log(\"active\") - beautiful CSS display");
-		console.log("  • tastyDebug.css(\"active\") - get active CSS");
-		console.log("  • tastyDebug.inspect(\".my-element\") - element inspection with chunk info");
-		console.log("  • tastyDebug.cache() - cache status");
-		console.log("  • tastyDebug.defs() - defined properties & keyframes");
-		console.log("  • tastyDebug.pageCSS({ log: true }) - all page CSS");
-		console.log("");
-		console.log("📖 Common targets for css()/log():");
-		console.log("  • \"all\" - all tasty CSS + global CSS");
-		console.log("  • \"active\" - CSS for classes in DOM");
-		console.log("  • \"unused\" - CSS for classes with refCount = 0");
-		console.log("  • \"global\" - only global CSS (injectGlobal)");
-		console.log("  • \"page\" - ALL page CSS (including non-tasty)");
-		console.log("  • \"t123\" - specific tasty class");
-		console.log("  • [\".my-selector\"] - CSS selector");
-		console.log("");
-		console.log("🔧 Available options:");
-		console.log("  • { log: true } - auto-log results to console");
-		console.log("  • { title: \"Custom\" } - custom title for log()");
-		console.log("  • { root: shadowRoot } - target Shadow DOM");
-		console.log("  • { prettify: false } - skip CSS formatting");
-		console.log("");
-		console.log("🧩 Style Chunking:");
-		console.log("  Elements have multiple classes (one per chunk: appearance, font, dimension, etc.)");
-		console.log("  • tastyDebug.chunks({ log: true }) - breakdown by chunk type");
-		console.log("  • tastyDebug.inspect() - shows which chunk each class belongs to");
-		console.log("  Chunk types: combined (non-chunked), appearance, font, dimension, container, scrollbar, position, misc, subcomponents");
-		console.groupEnd();
-	}
-};
-/**
-* Auto-install in development
-*/
-if (typeof window !== "undefined" && isDevEnv()) tastyDebug.install();
-
-//#endregion
-export { tastyDebug };
-//# sourceMappingURL=debug.js.map