@tenphi/tasty 0.0.0-snapshot.c8bdaeb → 0.0.0-snapshot.c8c7b2a

package/dist/debug.js

@@ -1,733 +1,453 @@
 import { isDevEnv } from "./utils/is-dev-env.js";
 import { CHUNK_NAMES } from "./chunks/definitions.js";
 import { getCssTextForNode, injector } from "./injector/index.js";
-
 //#region src/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;
-		}
-		const 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 fmtSize(bytes) {
+	return bytes > 1024 ? `${(bytes / 1024).toFixed(1)}KB` : `${bytes}B`;
 }
-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 countRules(css) {
+	return (css.match(/\{[^}]*\}/g) || []).length;
 }
-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 sortTastyClasses(classes) {
+	return Array.from(classes).sort((a, b) => a.localeCompare(b));
 }
-function extractCSSRules(css) {
-	const rules = [];
-	const 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 getRegistry(root = document) {
+	return injector.instance._sheetManager?.getRegistry(root);
 }
-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 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 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 {
-				if (includeCrossOrigin) cssChunks.push(`/* Cross-origin stylesheet: ${sheet.href || "inline"} */`);
-			}
+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);
 		}
-	} catch {}
-	return cssChunks.join("\n");
+	});
+	return sortTastyClasses(classes);
 }
-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 {
-				skippedStylesheets++;
-			}
+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 = "";
 		}
-	} catch {}
-	return {
-		cssSize,
-		ruleCount,
-		stylesheetCount,
-		skippedStylesheets
-	};
+		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();
 }
-/**
-* 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) {
+/** 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;
 }
-/**
-* 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
-	};
+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;
 }
-/**
-* 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);
+function buildChunkBreakdown(root = document) {
+	const registry = getRegistry(root);
 	if (!registry) return {
 		byChunk: {},
-		totalChunkTypes: 0
+		totalChunkTypes: 0,
+		totalClasses: 0
 	};
 	const byChunk = {};
 	for (const [cacheKey, className] of registry.cacheKeyToClassName) {
-		const chunkName = extractChunkNameFromCacheKey(cacheKey) || "unknown";
-		if (!byChunk[chunkName]) byChunk[chunkName] = {
+		const chunk = extractChunkName(cacheKey) || "unknown";
+		if (!byChunk[chunk]) byChunk[chunk] = {
 			classes: [],
 			cssSize: 0,
 			ruleCount: 0
 		};
-		byChunk[chunkName].classes.push(className);
+		byChunk[chunk].classes.push(className);
 		const css = injector.instance.getCssTextForClasses([className], { root });
-		byChunk[chunkName].cssSize += css.length;
-		byChunk[chunkName].ruleCount += (css.match(/\{[^}]*\}/g) || []).length;
+		byChunk[chunk].cssSize += css.length;
+		byChunk[chunk].ruleCount += countRules(css);
 	}
-	for (const entry of Object.values(byChunk)) entry.classes.sort((a, b) => {
-		return parseInt(a.slice(1)) - parseInt(b.slice(1));
-	});
+	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
+		totalChunkTypes: Object.keys(byChunk).length,
+		totalClasses
 	};
 }
-/**
-* Concise tastyDebug API for inspecting styles at runtime
-*/
+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 ss = registry.sheets[info.sheetIndex]?.sheet?.sheet;
+		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 ss = registry.sheets[ri.sheetIndex]?.sheet?.sheet;
+			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, log = false } = opts || {};
+		const { root = document, prettify = true, raw = false, source = 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 });
+		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 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 });
+			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 element = root.querySelector?.(target);
-			if (element) css = getCssTextForNode(element, { root });
+			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 (log) {
-			console.group(`🎨 CSS for ${Array.isArray(target) ? `[${target.join(", ")}]` : target}`);
+		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 } = opts || {};
+		const { root = document, raw = false } = 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));
+		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: getChunkForClassName(className, root).chunkName
+			chunkName: getChunkForClass(className, root)
 		}));
 		const css = getCssTextForNode(element, { root });
-		const prettifiedCSS = prettifyCSS(css);
-		const ruleCount = (css.match(/\{[^}]*\}/g) || []).length;
-		return {
+		const rules = countRules(css);
+		const result = {
 			element,
 			classes: tastyClasses,
 			chunks,
-			css: prettifiedCSS,
+			css: prettifyCSS(css),
 			size: css.length,
-			rules: ruleCount
+			rules
 		};
-	},
-	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`);
+		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 {
-			...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
-		};
+		return result;
 	},
 	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 { 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: cacheStatus.classes.active,
-			unusedClasses: cacheStatus.classes.unused,
-			totalStyledClasses: cacheStatus.classes.all,
+			activeClasses,
+			unusedClasses,
+			totalStyledClasses,
 			activeCSSSize: activeCSS.length,
 			unusedCSSSize: unusedCSS.length,
-			...adjustedGlobalSizes,
+			globalCSSSize: globalData.size,
+			rawCSSSize: rawData.size,
+			keyframesCSSSize: kfData.size,
+			propertyCSSSize: propData.size,
 			totalCSSSize: allCSS.length,
-			activeCSS: prettifyCSS(activeCSS),
-			unusedCSS: prettifyCSS(unusedCSS),
-			globalCSS: globalData.css,
-			rawCSS: rawData.css,
-			keyframesCSS: keyframesData.css,
-			propertyCSS: propertyData.css,
-			allCSS: prettifyCSS(allCSS),
+			activeRuleCount,
+			unusedRuleCount,
 			globalRuleCount: globalData.ruleCount,
 			rawRuleCount: rawData.ruleCount,
-			keyframesRuleCount: keyframesData.ruleCount,
-			propertyRuleCount: propertyData.ruleCount,
-			page,
+			keyframesRuleCount: kfData.ruleCount,
+			propertyRuleCount: propData.ruleCount,
+			totalRuleCount,
 			metrics,
-			definedProperties: definitions.properties,
-			definedKeyframes: definitions.keyframes,
-			propertyCount: definitions.properties.length,
-			keyframeCount: definitions.keyframes.length,
-			cleanupSummary,
+			definedProperties: defs.properties,
+			definedKeyframes: defs.keyframes,
 			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 (!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) {
-				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}%`);
+				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 (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`);
-					}
+			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();
 			}
-			console.log("🔍 Details:");
-			console.log("  • Active classes:", summary.activeClasses);
-			console.log("  • Unused classes:", summary.unusedClasses);
+			if (defs.properties.length || defs.keyframes.length) console.log(`Defs:     ${defs.properties.length} @property, ${defs.keyframes.length} @keyframes`);
 			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)");
+	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 result;
+		return breakdown;
 	},
-	pageStats(opts) {
-		const { root = document, includeCrossOrigin = true } = opts || {};
-		return getPageStats({
-			root,
-			includeCrossOrigin
-		});
+	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 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;
+			console.log("tastyDebug installed. Run tastyDebug.help() for commands.");
 		}
-		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((v) => !!v))];
-		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
-*/
+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 { tastyDebug };
+
 //# sourceMappingURL=debug.js.map