style-capture 0.0.1 → 0.0.3

package/dist/cli.js

@@ -0,0 +1,1768 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import { cancel, group, intro, log, outro, select, spinner, text } from "@clack/prompts";
+import { chromium } from "playwright";
+//#region ../../packages/core/dist/index.js
+const CAPTURE_NODE_ATTRIBUTE = "data-lc";
+const MAX_TAILWIND_SUGGESTIONS = 6;
+const MAX_OPEN_QUESTION_ITEMS = 8;
+const CLAUDE_CAPTURE_INSTRUCTION = "Recreate or refactor this UI faithfully. html_capture + css_capture are ground truth. Preserve structure unless simplifying is clearly better. Tailwind hints are hints. Use the smallest codebase-ready change and state ambiguities instead of inventing details.";
+const compactInlineText = (value) => value.replaceAll(/\s+/g, " ").trim();
+const escapeXmlAttribute = (value) => value.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+const compactSelector = (selector) => selector.replaceAll(/\s*([>+~])\s*/g, "$1").replaceAll(/,\s+/g, ",").replaceAll(/\s+/g, " ").trim();
+const buildCompactRefs = (order) => {
+	const refs = {};
+	for (const [index, elementId] of order.entries()) refs[elementId] = index.toString(36);
+	return refs;
+};
+const buildCompactSelector = (ref) => `[${CAPTURE_NODE_ATTRIBUTE}="${ref}"]`;
+const buildFallbackSelectors = (capture) => {
+	const selectors = {};
+	for (const elementId of capture.order) {
+		const snapshot = capture.elements[elementId];
+		if (!snapshot) continue;
+		selectors[elementId] = compactSelector(snapshot.selector);
+	}
+	return selectors;
+};
+const stripCommentNodes = (root) => {
+	const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+	const comments = [];
+	while (walker.nextNode()) if (walker.currentNode instanceof Comment) comments.push(walker.currentNode);
+	for (const comment of comments) comment.remove();
+};
+const minifyHtmlString = (html) => html.replaceAll(/<!--[\s\S]*?-->/g, "").replaceAll(/>\s+</g, "><").trim();
+const elementMatchesSnapshot = (element, snapshot) => {
+	if (element.tagName.toLowerCase() !== snapshot.tagName) return false;
+	for (const className of snapshot.classList) if (!element.classList.contains(className)) return false;
+	for (const [name, value] of Object.entries(snapshot.attributes)) {
+		if (name === "class") continue;
+		if (element.getAttribute(name) !== value) return false;
+	}
+	return true;
+};
+const findMatchingElementIndex = (candidates, snapshot, startIndex) => {
+	for (let index = startIndex; index < candidates.length; index += 1) if (elementMatchesSnapshot(candidates[index], snapshot)) return index;
+	return -1;
+};
+const annotateCaptureHtml = (capture) => {
+	const refs = buildCompactRefs(capture.order);
+	if (!capture.rootOuterHtml.trim()) return {
+		html: "",
+		refs,
+		selectors: buildFallbackSelectors(capture)
+	};
+	if (typeof DOMParser === "undefined") return {
+		html: minifyHtmlString(capture.rootOuterHtml),
+		refs,
+		selectors: buildFallbackSelectors(capture)
+	};
+	const root = new DOMParser().parseFromString(capture.rootOuterHtml, "text/html").body.firstElementChild;
+	if (!root) return {
+		html: minifyHtmlString(capture.rootOuterHtml),
+		refs,
+		selectors: buildFallbackSelectors(capture)
+	};
+	stripCommentNodes(root);
+	const candidates = [root, ...root.querySelectorAll("*")];
+	const selectors = buildFallbackSelectors(capture);
+	let searchStartIndex = 0;
+	for (const elementId of capture.order) {
+		const snapshot = capture.elements[elementId];
+		const ref = refs[elementId];
+		if (!(snapshot && ref)) continue;
+		const matchIndex = findMatchingElementIndex(candidates, snapshot, searchStartIndex);
+		if (matchIndex === -1) continue;
+		candidates[matchIndex].setAttribute(CAPTURE_NODE_ATTRIBUTE, ref);
+		selectors[elementId] = buildCompactSelector(ref);
+		searchStartIndex = matchIndex + 1;
+	}
+	return {
+		html: minifyHtmlString(root.outerHTML),
+		refs,
+		selectors
+	};
+};
+const formatCssPropertyName = (property) => {
+	if (property.includes("-")) return property;
+	return property.replaceAll(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+};
+const formatDeclarationBlock = (styles) => Object.entries(styles).filter(([, value]) => value.trim().length > 0).toSorted(([left], [right]) => left.localeCompare(right)).map(([property, value]) => `${formatCssPropertyName(property)}:${compactInlineText(value)}`).join(";");
+const formatPseudoBlock = (selector, pseudo) => {
+	if (!pseudo) return "";
+	const declarationBlock = formatDeclarationBlock(pseudo.styles);
+	if (!declarationBlock) return "";
+	return `${selector}::${pseudo.kind}{${declarationBlock}}`;
+};
+const formatElementCssBlock = (snapshot, selector) => {
+	const parts = [];
+	const declarationBlock = formatDeclarationBlock(snapshot.styles);
+	const beforeBlock = formatPseudoBlock(selector, snapshot.pseudo.before);
+	const afterBlock = formatPseudoBlock(selector, snapshot.pseudo.after);
+	if (declarationBlock) parts.push(`${selector}{${declarationBlock}}`);
+	if (beforeBlock) parts.push(beforeBlock);
+	if (afterBlock) parts.push(afterBlock);
+	return parts.join("");
+};
+const formatCaptureCss = (capture, selectors) => capture.order.map((elementId) => {
+	const snapshot = capture.elements[elementId];
+	if (!snapshot) return "";
+	return formatElementCssBlock(snapshot, selectors[elementId] ?? snapshot.selector);
+}).filter(Boolean).join("");
+const buildTailwindHintEntries = (capture, mapping, refs) => {
+	if (!mapping) return [];
+	const entries = [];
+	const rootMapping = mapping.elements[capture.rootElementId];
+	if (rootMapping?.suggestedClassName || rootMapping?.className) entries.push({
+		key: "root",
+		value: rootMapping.suggestedClassName || rootMapping.className
+	});
+	const topSuggestions = capture.order.filter((elementId) => elementId !== capture.rootElementId).map((elementId) => mapping.elements[elementId]).filter((element) => Boolean(element?.suggestedClassName || element?.className)).slice(0, MAX_TAILWIND_SUGGESTIONS);
+	for (const suggestion of topSuggestions) entries.push({
+		key: refs[suggestion.elementId] ?? suggestion.elementId,
+		value: suggestion.suggestedClassName || suggestion.className
+	});
+	return entries;
+};
+const buildOpenQuestionEntries = (mapping, refs) => {
+	if (!mapping || mapping.reviewQueue.length === 0) return [];
+	return mapping.reviewQueue.slice(0, MAX_OPEN_QUESTION_ITEMS).map((item) => ({
+		key: refs[item.elementId] ?? item.elementId,
+		value: item.reasons.join("; ")
+	}));
+};
+const buildClaudeCapturePrompt = (capture, mapping) => {
+	const annotation = annotateCaptureHtml(capture);
+	const rootElement = capture.elements[capture.rootElementId];
+	return {
+		cssCapture: formatCaptureCss(capture, annotation.selectors),
+		htmlCapture: annotation.html,
+		instruction: CLAUDE_CAPTURE_INSTRUCTION,
+		metadata: {
+			elementCount: capture.summary.elementCount,
+			mode: capture.settings.captureMode,
+			pseudoCount: capture.summary.pseudoElementCount,
+			rootRef: annotation.refs[capture.rootElementId] ?? capture.rootElementId,
+			rootSelector: rootElement?.selector ?? "Unavailable",
+			url: capture.metadata.url
+		},
+		openQuestions: buildOpenQuestionEntries(mapping, annotation.refs),
+		tailwindHints: buildTailwindHintEntries(capture, mapping, annotation.refs)
+	};
+};
+const formatCaptureForClaudeMarkdown = (capture, mapping) => {
+	const prompt = buildClaudeCapturePrompt(capture, mapping);
+	const sections = [
+		`<style_capture url="${escapeXmlAttribute(prompt.metadata.url)}" mode="${prompt.metadata.mode}" root_ref="${prompt.metadata.rootRef}" root_selector="${escapeXmlAttribute(prompt.metadata.rootSelector)}" elements="${prompt.metadata.elementCount}" pseudos="${prompt.metadata.pseudoCount}">`,
+		prompt.instruction,
+		`<html_capture>${prompt.htmlCapture}</html_capture>`,
+		`<css_capture>${prompt.cssCapture}</css_capture>`
+	];
+	if (prompt.tailwindHints.length > 0) sections.push("<tailwind_hints>", ...prompt.tailwindHints.map((entry) => `${entry.key}=${compactInlineText(entry.value)}`), "</tailwind_hints>");
+	if (prompt.openQuestions.length > 0) sections.push("<open_questions>", ...prompt.openQuestions.map((entry) => `${entry.key}:${compactInlineText(entry.value)}`), "</open_questions>");
+	sections.push("</style_capture>");
+	return sections.join("\n").trim();
+};
+const createDefaultSettings = () => ({
+	captureMode: "curated",
+	includeHiddenElements: false,
+	includePseudoElements: true
+});
+const HIGH_CONFIDENCE = .92;
+const MEDIUM_CONFIDENCE = .72;
+const LOW_CONFIDENCE = .45;
+const PASSIVE_CONFIDENCE = .84;
+const LENGTH_PATTERN = /^(-?\d*\.?\d+)(px|rem|em|%|vh|vw)?$/;
+const RGB_PATTERN = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([0-9.]+))?\)$/;
+const WHITESPACE_SPLIT_PATTERN = /\s+/;
+const SPACING_SCALE = new Map([
+	[0, "0"],
+	[1, "px"],
+	[2, "0.5"],
+	[4, "1"],
+	[6, "1.5"],
+	[8, "2"],
+	[10, "2.5"],
+	[12, "3"],
+	[14, "3.5"],
+	[16, "4"],
+	[20, "5"],
+	[24, "6"],
+	[28, "7"],
+	[32, "8"],
+	[36, "9"],
+	[40, "10"],
+	[44, "11"],
+	[48, "12"],
+	[56, "14"],
+	[64, "16"],
+	[80, "20"],
+	[96, "24"],
+	[112, "28"],
+	[128, "32"],
+	[144, "36"],
+	[160, "40"],
+	[176, "44"],
+	[192, "48"],
+	[224, "56"],
+	[256, "64"],
+	[288, "72"],
+	[320, "80"],
+	[384, "96"]
+]);
+const FONT_SIZE_SCALE = new Map([
+	[12, "xs"],
+	[14, "sm"],
+	[16, "base"],
+	[18, "lg"],
+	[20, "xl"],
+	[24, "2xl"],
+	[30, "3xl"],
+	[36, "4xl"],
+	[48, "5xl"],
+	[60, "6xl"],
+	[72, "7xl"],
+	[96, "8xl"],
+	[128, "9xl"]
+]);
+const LINE_HEIGHT_SCALE = new Map([
+	[12, "3"],
+	[16, "4"],
+	[20, "5"],
+	[24, "6"],
+	[28, "7"],
+	[32, "8"],
+	[36, "9"],
+	[40, "10"]
+]);
+const RADIUS_SCALE = new Map([
+	[0, "none"],
+	[2, "sm"],
+	[4, ""],
+	[6, "md"],
+	[8, "lg"],
+	[12, "xl"],
+	[16, "2xl"],
+	[24, "3xl"]
+]);
+const BORDER_WIDTH_SCALE = new Map([
+	[1, ""],
+	[2, "2"],
+	[4, "4"],
+	[8, "8"]
+]);
+const Z_INDEX_SCALE = new Set([
+	0,
+	10,
+	20,
+	30,
+	40,
+	50
+]);
+const OPACITY_SCALE = new Set([
+	0,
+	5,
+	10,
+	15,
+	20,
+	25,
+	30,
+	35,
+	40,
+	45,
+	50,
+	55,
+	60,
+	65,
+	70,
+	75,
+	80,
+	85,
+	90,
+	95,
+	100
+]);
+const CLEAN_ARBITRARY_SOURCE_PROPERTIES = new Set([
+	"background-color",
+	"border-color",
+	"color",
+	"text-decoration-color"
+]);
+const REVIEW_ONLY_SOURCE_PROPERTIES = new Set([
+	"background-image",
+	"bottom",
+	"font-family",
+	"grid-template-columns",
+	"grid-template-rows",
+	"height",
+	"left",
+	"pseudo-elements",
+	"right",
+	"top",
+	"transform",
+	"transform-origin",
+	"width"
+]);
+const DISPLAY_MAP = {
+	contents: "contents",
+	flex: "flex",
+	"flow-root": "flow-root",
+	grid: "grid",
+	inline: "inline",
+	"inline-block": "inline-block",
+	"inline-flex": "inline-flex",
+	"inline-grid": "inline-grid",
+	none: "hidden"
+};
+const POSITION_MAP = {
+	absolute: "absolute",
+	fixed: "fixed",
+	relative: "relative",
+	sticky: "sticky"
+};
+const FLEX_DIRECTION_MAP = {
+	column: "flex-col",
+	"column-reverse": "flex-col-reverse",
+	"row-reverse": "flex-row-reverse"
+};
+const FLEX_WRAP_MAP = {
+	wrap: "flex-wrap",
+	"wrap-reverse": "flex-wrap-reverse"
+};
+const ALIGN_ITEMS_MAP = {
+	baseline: "items-baseline",
+	center: "items-center",
+	end: "items-end",
+	"flex-end": "items-end",
+	"flex-start": "items-start",
+	start: "items-start"
+};
+const JUSTIFY_CONTENT_MAP = {
+	center: "justify-center",
+	end: "justify-end",
+	"flex-end": "justify-end",
+	"flex-start": "justify-start",
+	left: "justify-start",
+	right: "justify-end",
+	"space-around": "justify-around",
+	"space-between": "justify-between",
+	"space-evenly": "justify-evenly",
+	start: "justify-start"
+};
+const GRID_AUTO_FLOW_MAP = {
+	column: "grid-flow-col",
+	"column dense": "grid-flow-col-dense",
+	dense: "grid-flow-dense",
+	"row dense": "grid-flow-row-dense"
+};
+const TEXT_ALIGN_MAP = {
+	center: "text-center",
+	end: "text-end",
+	justify: "text-justify",
+	right: "text-right"
+};
+const TEXT_TRANSFORM_MAP = {
+	capitalize: "capitalize",
+	lowercase: "lowercase",
+	uppercase: "uppercase"
+};
+const WHITE_SPACE_MAP = {
+	"break-spaces": "whitespace-break-spaces",
+	nowrap: "whitespace-nowrap",
+	pre: "whitespace-pre",
+	"pre-line": "whitespace-pre-line",
+	"pre-wrap": "whitespace-pre-wrap"
+};
+const LIST_STYLE_MAP = {
+	decimal: "list-decimal",
+	none: "list-none"
+};
+const OBJECT_FIT_MAP = {
+	contain: "object-contain",
+	cover: "object-cover",
+	none: "object-none",
+	"scale-down": "object-scale-down"
+};
+const OVERFLOW_MAP = {
+	auto: "auto",
+	clip: "clip",
+	hidden: "hidden",
+	scroll: "scroll",
+	visible: "visible"
+};
+const BORDER_STYLE_MAP = {
+	dashed: "border-dashed",
+	dotted: "border-dotted",
+	double: "border-double"
+};
+const FONT_WEIGHT_MAP = {
+	"100": "thin",
+	"200": "extralight",
+	"300": "light",
+	"500": "medium",
+	"600": "semibold",
+	"700": "bold",
+	"800": "extrabold",
+	"900": "black"
+};
+const POSITION_KEYWORD_MAP = {
+	"0% 0%": "top-left",
+	"0% 100%": "bottom-left",
+	"0% 50%": "left",
+	"100% 0%": "top-right",
+	"100% 100%": "bottom-right",
+	"100% 50%": "right",
+	"50% 0%": "top",
+	"50% 100%": "bottom"
+};
+const DIMENSION_KEYWORD_MAP = {
+	"100%": "full",
+	"100vh": "screen",
+	"100vw": "screen",
+	"fit-content": "fit",
+	"max-content": "max",
+	"min-content": "min"
+};
+const FONT_FAMILY_MAP = [
+	{
+		keyword: "monospace",
+		utility: "font-mono"
+	},
+	{
+		keyword: "sans-serif",
+		utility: "font-sans"
+	},
+	{
+		keyword: "system-ui",
+		utility: "font-sans"
+	},
+	{
+		keyword: "serif",
+		utility: "font-serif"
+	}
+];
+const roundToTwo = (value) => Math.round(value * 100) / 100;
+const dedupe = (values) => [...new Set((values ?? []).filter(Boolean))];
+const allEqual = (values) => values.every((value) => value === values[0]);
+const normalizeWhitespace = (value) => value.replaceAll(/\s+/g, " ").trim();
+const parseLength = (value) => {
+	const match = value.trim().match(LENGTH_PATTERN);
+	if (!match) return null;
+	return {
+		unit: match[2] ?? "px",
+		value: Number(match[1])
+	};
+};
+const isZeroLength = (value) => {
+	const length = parseLength(value);
+	return Boolean(length && Math.abs(length.value) <= .01);
+};
+const isTransparentColor = (value) => {
+	const normalized = value.trim().replaceAll(/\s+/g, "").toLowerCase();
+	return normalized === "rgba(0,0,0,0)" || normalized === "transparent";
+};
+const normalizeColor = (value) => {
+	const trimmed = value.trim().toLowerCase();
+	if (trimmed === "transparent" || isTransparentColor(trimmed)) return "transparent";
+	const rgbMatch = trimmed.match(RGB_PATTERN);
+	if (!rgbMatch) return trimmed;
+	const { 1: redRaw, 2: greenRaw, 3: blueRaw, 4: alpha } = rgbMatch;
+	const red = Number(redRaw).toString(16).padStart(2, "0");
+	const green = Number(greenRaw).toString(16).padStart(2, "0");
+	const blue = Number(blueRaw).toString(16).padStart(2, "0");
+	if (!alpha || alpha === "1") return `#${red}${green}${blue}`;
+	return trimmed.replaceAll(/\s+/g, "");
+};
+const sanitizeArbitraryValue = (value) => value.trim().replaceAll(/\s*,\s*/g, ",").replaceAll(/\s*\/\s*/g, "/").replaceAll(/\s+/g, "_");
+const createArbitraryUtility = (prefix, value) => `${prefix}-[${sanitizeArbitraryValue(value)}]`;
+const createArbitraryPropertyClass = (property, value) => `[${property}:${sanitizeArbitraryValue(value)}]`;
+const lookupMappedUtility = (map, value) => map[value] ?? null;
+const labelFromConfidence = (confidence) => {
+	if (confidence >= .85) return "high";
+	if (confidence >= .62) return "medium";
+	return "low";
+};
+const addMatch = (accumulator, match) => {
+	const utility = match.utility.trim();
+	if (!utility) return;
+	const nextMatch = {
+		...match,
+		label: labelFromConfidence(match.confidence),
+		notes: dedupe(match.notes),
+		sourceProperties: dedupe(match.sourceProperties),
+		sourceValues: dedupe(match.sourceValues),
+		utility
+	};
+	const existing = accumulator.matches.find((entry) => entry.utility === utility);
+	if (existing) {
+		existing.confidence = Math.max(existing.confidence, nextMatch.confidence);
+		existing.label = labelFromConfidence(existing.confidence);
+		existing.notes = dedupe([...existing.notes, ...nextMatch.notes]);
+		existing.sourceProperties = dedupe([...existing.sourceProperties, ...nextMatch.sourceProperties]);
+		existing.sourceValues = dedupe([...existing.sourceValues, ...nextMatch.sourceValues]);
+	} else accumulator.matches.push(nextMatch);
+	if (accumulator.classSet.has(utility)) return;
+	accumulator.classSet.add(utility);
+	accumulator.classes.push(utility);
+};
+const addUnsupported = (accumulator, property, value, reason) => {
+	const key = `${property}:${value}:${reason}`;
+	if (accumulator.unsupported.some((entry) => `${entry.property}:${entry.value}:${entry.reason}` === key)) return;
+	accumulator.unsupported.push({
+		property,
+		reason,
+		value
+	});
+};
+const addCandidateMatch = (accumulator, property, value, candidate) => {
+	if (!(value && candidate)) return;
+	addMatch(accumulator, {
+		confidence: candidate.confidence,
+		notes: candidate.notes ?? [],
+		sourceProperties: property.includes("|") ? property.split("|") : [property],
+		sourceValues: [value],
+		strategy: candidate.strategy,
+		utility: candidate.utility
+	});
+};
+const addMappedUtility = (accumulator, property, value, map, shouldAdd = true) => {
+	if (!(shouldAdd && value)) return;
+	const utility = lookupMappedUtility(map, value);
+	if (!utility) {
+		addUnsupported(accumulator, property, value, `${property} needs manual review.`);
+		return;
+	}
+	addMatch(accumulator, {
+		confidence: HIGH_CONFIDENCE,
+		sourceProperties: [property],
+		sourceValues: [value],
+		strategy: "semantic",
+		utility
+	});
+};
+const addArbitraryPropertyMatch = (accumulator, property, value, note) => {
+	if (!value || value === "none") return;
+	addMatch(accumulator, {
+		confidence: LOW_CONFIDENCE,
+		notes: [note],
+		sourceProperties: [property],
+		sourceValues: [value],
+		strategy: "arbitrary",
+		utility: createArbitraryPropertyClass(property, value)
+	});
+};
+const shouldEmitInheritedValue = (property, value, parentValue) => {
+	if (!value) return false;
+	if (!parentValue) return true;
+	if (property === "color") return normalizeColor(value) !== normalizeColor(parentValue);
+	return value !== parentValue;
+};
+const shouldMapDimension = (property, value) => {
+	if (!value) return false;
+	if (property.startsWith("min-")) return value !== "0px" && value !== "auto";
+	if (property.startsWith("max-")) return value !== "none";
+	return value !== "auto";
+};
+const buildSpacingCandidate = (prefix, value, allowNegative) => {
+	if (isZeroLength(value)) return null;
+	if (value === "auto" && prefix.startsWith("m")) return {
+		confidence: HIGH_CONFIDENCE,
+		strategy: "semantic",
+		utility: `${prefix}-auto`
+	};
+	const length = parseLength(value);
+	if (!length) return {
+		confidence: MEDIUM_CONFIDENCE,
+		notes: ["Spacing required an arbitrary value."],
+		strategy: "arbitrary",
+		utility: createArbitraryUtility(prefix, value)
+	};
+	if (length.value < 0 && !allowNegative) return null;
+	const token = length.unit === "px" ? SPACING_SCALE.get(Math.abs(length.value)) : null;
+	if (!token) return {
+		confidence: MEDIUM_CONFIDENCE,
+		notes: ["Spacing required an arbitrary value."],
+		strategy: "arbitrary",
+		utility: createArbitraryUtility(prefix, value)
+	};
+	const baseUtility = token === "px" ? `${prefix}-px` : `${prefix}-${token}`;
+	return {
+		confidence: HIGH_CONFIDENCE,
+		strategy: "scale",
+		utility: length.value < 0 ? `-${baseUtility}` : baseUtility
+	};
+};
+const buildDimensionCandidate = (prefix, value, options) => {
+	if (value === "auto") return {
+		confidence: HIGH_CONFIDENCE,
+		strategy: "semantic",
+		utility: `${prefix}-auto`
+	};
+	const keywordSuffix = DIMENSION_KEYWORD_MAP[value];
+	if (keywordSuffix) return {
+		confidence: HIGH_CONFIDENCE,
+		strategy: "semantic",
+		utility: `${prefix}-${keywordSuffix}`
+	};
+	const length = parseLength(value);
+	const token = length && length.unit === "px" ? SPACING_SCALE.get(Math.abs(length.value)) : null;
+	if (token) return {
+		confidence: options.confidence,
+		notes: options.note ? [options.note] : [],
+		strategy: "scale",
+		utility: token === "px" ? `${prefix}-px` : `${prefix}-${token}`
+	};
+	return {
+		confidence: options.confidence,
+		notes: options.note ? [options.note] : ["Length required an arbitrary value."],
+		strategy: "arbitrary",
+		utility: createArbitraryUtility(prefix, value)
+	};
+};
+const buildScaleCandidate = (prefix, value, scale, note) => {
+	const length = parseLength(value);
+	const token = length && length.unit === "px" ? scale.get(length.value) : null;
+	if (token) return {
+		confidence: HIGH_CONFIDENCE,
+		strategy: "scale",
+		utility: `${prefix}-${token}`
+	};
+	return {
+		confidence: MEDIUM_CONFIDENCE,
+		notes: [note],
+		strategy: "arbitrary",
+		utility: createArbitraryUtility(prefix, value)
+	};
+};
+const buildColorCandidate = (prefix, value) => {
+	const normalized = normalizeColor(value);
+	let semanticUtility = null;
+	if (normalized === "transparent") semanticUtility = `${prefix}-transparent`;
+	else if (normalized === "#000000") semanticUtility = `${prefix}-black`;
+	else if (normalized === "#ffffff") semanticUtility = `${prefix}-white`;
+	if (semanticUtility) return {
+		confidence: HIGH_CONFIDENCE,
+		strategy: "semantic",
+		utility: semanticUtility
+	};
+	return {
+		confidence: MEDIUM_CONFIDENCE,
+		strategy: "arbitrary",
+		utility: createArbitraryUtility(prefix, normalized)
+	};
+};
+const buildFontFamilyCandidate = (value) => {
+	const normalized = value.toLowerCase();
+	for (const { keyword, utility } of FONT_FAMILY_MAP) if (normalized.includes(keyword)) return {
+		confidence: MEDIUM_CONFIDENCE,
+		notes: ["Mapped to the nearest generic Tailwind family."],
+		strategy: "heuristic",
+		utility
+	};
+	return {
+		confidence: LOW_CONFIDENCE,
+		notes: ["Font family required an arbitrary property utility."],
+		strategy: "arbitrary",
+		utility: createArbitraryPropertyClass("font-family", value)
+	};
+};
+const buildBorderWidthCandidate = (prefix, value) => {
+	const length = parseLength(value);
+	const token = length && length.unit === "px" ? BORDER_WIDTH_SCALE.get(length.value) : null;
+	if (token !== void 0) return {
+		confidence: HIGH_CONFIDENCE,
+		strategy: "scale",
+		utility: token ? `${prefix}-${token}` : prefix
+	};
+	return {
+		confidence: MEDIUM_CONFIDENCE,
+		notes: ["Border width required an arbitrary value."],
+		strategy: "arbitrary",
+		utility: createArbitraryUtility(prefix, value)
+	};
+};
+const buildBorderColorCandidate = (value) => buildColorCandidate("border", value);
+const buildRadiusCandidate = (prefix, value) => {
+	const length = parseLength(value);
+	if (length && length.value >= 9999) return {
+		confidence: HIGH_CONFIDENCE,
+		strategy: "semantic",
+		utility: `${prefix}-full`
+	};
+	const token = length && length.unit === "px" ? RADIUS_SCALE.get(length.value) : null;
+	if (token !== void 0) return {
+		confidence: HIGH_CONFIDENCE,
+		strategy: "scale",
+		utility: token ? `${prefix}-${token}` : prefix
+	};
+	return {
+		confidence: MEDIUM_CONFIDENCE,
+		notes: ["Border radius required an arbitrary value."],
+		strategy: "arbitrary",
+		utility: createArbitraryUtility(prefix, value)
+	};
+};
+const buildZIndexCandidate = (value) => {
+	const numericValue = Number(value);
+	if (Number.isFinite(numericValue) && Z_INDEX_SCALE.has(numericValue)) return {
+		confidence: HIGH_CONFIDENCE,
+		strategy: "scale",
+		utility: `z-${numericValue}`
+	};
+	return {
+		confidence: MEDIUM_CONFIDENCE,
+		notes: ["Resolved z-index required an arbitrary value."],
+		strategy: "arbitrary",
+		utility: `z-[${sanitizeArbitraryValue(value)}]`
+	};
+};
+const addGapMatches = (accumulator, gap, rowGap, columnGap) => {
+	if (gap && gap !== "normal" && !isZeroLength(gap)) {
+		addCandidateMatch(accumulator, "gap", gap, buildSpacingCandidate("gap", gap, false));
+		return;
+	}
+	addCandidateMatch(accumulator, "row-gap", rowGap, rowGap ? buildSpacingCandidate("gap-y", rowGap, false) : null);
+	addCandidateMatch(accumulator, "column-gap", columnGap, columnGap ? buildSpacingCandidate("gap-x", columnGap, false) : null);
+};
+const addFlexNumberMatch = (accumulator, property, value, prefix) => {
+	if (!value) return;
+	let utility = createArbitraryUtility(prefix, value);
+	if (value === "1") utility = prefix;
+	else if (value === "0") utility = `${prefix}-0`;
+	const confidence = value === "0" || value === "1" ? HIGH_CONFIDENCE : LOW_CONFIDENCE;
+	const strategy = value === "0" || value === "1" ? "semantic" : "arbitrary";
+	addMatch(accumulator, {
+		confidence,
+		notes: strategy === "semantic" ? [] : [`${property} required an arbitrary value.`],
+		sourceProperties: [property],
+		sourceValues: [value],
+		strategy,
+		utility
+	});
+};
+const addAxisSpacingMatch = (accumulator, prefix, first, second, allowNegative) => {
+	if (!(first[1] && second[1]) || first[1] !== second[1]) return;
+	addCandidateMatch(accumulator, `${first[0]}|${second[0]}`, first[1], buildSpacingCandidate(prefix, first[1], allowNegative));
+};
+const addEdgeSpacingMatch = (accumulator, prefix, entry, allowNegative) => {
+	if (!entry[1] || isZeroLength(entry[1])) return;
+	addCandidateMatch(accumulator, entry[0], entry[1], buildSpacingCandidate(prefix, entry[1], allowNegative));
+};
+const addBoxSpacingMatches = (accumulator, prefix, entries) => {
+	const values = entries.map((entry) => entry[1]);
+	if (values.some((value) => !value)) return;
+	const normalizedValues = values;
+	if (normalizedValues.every((value) => isZeroLength(value))) return;
+	if (allEqual(normalizedValues)) {
+		addCandidateMatch(accumulator, entries[0][0], normalizedValues[0], buildSpacingCandidate(prefix, normalizedValues[0], prefix === "m"));
+		return;
+	}
+	addAxisSpacingMatch(accumulator, `${prefix}y`, entries[0], entries[2], prefix === "m");
+	addAxisSpacingMatch(accumulator, `${prefix}x`, entries[1], entries[3], prefix === "m");
+	addEdgeSpacingMatch(accumulator, `${prefix}t`, entries[0], prefix === "m");
+	addEdgeSpacingMatch(accumulator, `${prefix}r`, entries[1], prefix === "m");
+	addEdgeSpacingMatch(accumulator, `${prefix}b`, entries[2], prefix === "m");
+	addEdgeSpacingMatch(accumulator, `${prefix}l`, entries[3], prefix === "m");
+};
+const addColorMatch = (accumulator, prefix, property, value, shouldAdd) => {
+	if (!(shouldAdd && value)) return;
+	addCandidateMatch(accumulator, property, value, buildColorCandidate(prefix, value));
+};
+const addFontFamilyMatch = (accumulator, value, shouldAdd) => {
+	if (!(shouldAdd && value)) return;
+	addCandidateMatch(accumulator, "font-family", value, buildFontFamilyCandidate(value));
+};
+const addScaleMatch = (accumulator, property, value, shouldAdd, scale, prefix, note) => {
+	if (!(shouldAdd && value)) return;
+	addCandidateMatch(accumulator, property, value, buildScaleCandidate(prefix, value, scale, note));
+};
+const addFontWeightMatch = (accumulator, value, shouldAdd) => {
+	if (!(shouldAdd && value) || value === "400") return;
+	const utility = lookupMappedUtility(FONT_WEIGHT_MAP, value);
+	addMatch(accumulator, {
+		confidence: utility ? HIGH_CONFIDENCE : LOW_CONFIDENCE,
+		notes: utility ? [] : ["Font weight required an arbitrary value."],
+		sourceProperties: ["font-weight"],
+		sourceValues: [value],
+		strategy: utility ? "semantic" : "arbitrary",
+		utility: utility ? `font-${utility}` : createArbitraryUtility("font", value)
+	});
+};
+const addFontStyleMatch = (accumulator, value, shouldAdd) => {
+	if (!(shouldAdd && value) || value === "normal") return;
+	addMatch(accumulator, {
+		confidence: HIGH_CONFIDENCE,
+		sourceProperties: ["font-style"],
+		sourceValues: [value],
+		strategy: "semantic",
+		utility: value === "italic" ? "italic" : "not-italic"
+	});
+};
+const addTrackingMatch = (accumulator, value, shouldAdd) => {
+	if (!(shouldAdd && value) || value === "normal" || isZeroLength(value)) return;
+	addMatch(accumulator, {
+		confidence: LOW_CONFIDENCE,
+		notes: ["Letter spacing required an arbitrary value."],
+		sourceProperties: ["letter-spacing"],
+		sourceValues: [value],
+		strategy: "arbitrary",
+		utility: createArbitraryUtility("tracking", value)
+	});
+};
+const addDecorationLineMatches = (accumulator, value) => {
+	if (!value || value === "none") return;
+	for (const part of value.split(WHITESPACE_SPLIT_PATTERN)) {
+		const utility = {
+			"line-through": "line-through",
+			overline: "overline",
+			underline: "underline"
+		}[part] ?? null;
+		if (!utility) continue;
+		addMatch(accumulator, {
+			confidence: HIGH_CONFIDENCE,
+			sourceProperties: ["text-decoration-line"],
+			sourceValues: [value],
+			strategy: "semantic",
+			utility
+		});
+	}
+};
+const addUniformBorderMatch = (element, accumulator) => {
+	const widths = [
+		element.styles["border-top-width"],
+		element.styles["border-right-width"],
+		element.styles["border-bottom-width"],
+		element.styles["border-left-width"]
+	];
+	const styles = [
+		element.styles["border-top-style"],
+		element.styles["border-right-style"],
+		element.styles["border-bottom-style"],
+		element.styles["border-left-style"]
+	];
+	const colors = [
+		element.styles["border-top-color"],
+		element.styles["border-right-color"],
+		element.styles["border-bottom-color"],
+		element.styles["border-left-color"]
+	];
+	if (widths.some((value) => !value || isZeroLength(value)) || styles.some((value) => !value || value === "none")) return;
+	if (!(allEqual(widths) && allEqual(styles) && allEqual(colors))) {
+		addUnsupported(accumulator, "border", "mixed sides", "Per-side border variations need manual review.");
+		return;
+	}
+	const width = widths[0];
+	const borderStyle = styles[0];
+	const color = colors[0];
+	addCandidateMatch(accumulator, "border-width", width, buildBorderWidthCandidate("border", width));
+	if (borderStyle !== "solid") {
+		const utility = lookupMappedUtility(BORDER_STYLE_MAP, borderStyle);
+		if (utility) addMatch(accumulator, {
+			confidence: HIGH_CONFIDENCE,
+			sourceProperties: ["border-style"],
+			sourceValues: [borderStyle],
+			strategy: "semantic",
+			utility
+		});
+		else addUnsupported(accumulator, "border-style", borderStyle, "Border style needs manual review.");
+	}
+	addCandidateMatch(accumulator, "border-color", color, buildBorderColorCandidate(color));
+};
+const addRadiusMatches = (element, accumulator) => {
+	const values = [
+		element.styles["border-top-left-radius"],
+		element.styles["border-top-right-radius"],
+		element.styles["border-bottom-right-radius"],
+		element.styles["border-bottom-left-radius"]
+	];
+	if (values.some((value) => !value) || values.every((value) => isZeroLength(value))) return;
+	const radiusValues = values;
+	if (allEqual(radiusValues)) {
+		addCandidateMatch(accumulator, "border-radius", radiusValues[0], buildRadiusCandidate("rounded", radiusValues[0]));
+		return;
+	}
+	addUnsupported(accumulator, "border-radius", radiusValues.join(", "), "Mixed corner radii need manual review.");
+};
+const addShadowMatch = (accumulator, value) => {
+	if (!value || value === "none") return;
+	addMatch(accumulator, {
+		confidence: MEDIUM_CONFIDENCE,
+		sourceProperties: ["box-shadow"],
+		sourceValues: [value],
+		strategy: "arbitrary",
+		utility: createArbitraryUtility("shadow", value)
+	});
+};
+const addOpacityMatch = (accumulator, value) => {
+	if (!value || value === "1") return;
+	const numericValue = Number(value);
+	if (!Number.isFinite(numericValue)) return;
+	const percent = Math.round(numericValue * 100);
+	const semantic = OPACITY_SCALE.has(percent);
+	addMatch(accumulator, {
+		confidence: semantic ? MEDIUM_CONFIDENCE : LOW_CONFIDENCE,
+		notes: semantic ? [] : ["Opacity required an arbitrary value."],
+		sourceProperties: ["opacity"],
+		sourceValues: [value],
+		strategy: semantic ? "scale" : "arbitrary",
+		utility: semantic ? `opacity-${percent}` : createArbitraryUtility("opacity", value)
+	});
+};
+const addPositionMatch = (accumulator, prefix, property, value) => {
+	if (!value || value === "50% 50%") return;
+	const keyword = POSITION_KEYWORD_MAP[normalizeWhitespace(value)];
+	const named = keyword ? `${prefix}-${keyword}` : null;
+	addMatch(accumulator, {
+		confidence: named ? HIGH_CONFIDENCE : MEDIUM_CONFIDENCE,
+		notes: named ? [] : [`${property} required an arbitrary value.`],
+		sourceProperties: [property],
+		sourceValues: [value],
+		strategy: named ? "semantic" : "arbitrary",
+		utility: named ?? createArbitraryUtility(prefix, value)
+	});
+};
+const addOverflowAxisMatch = (accumulator, property, value) => {
+	if (value === "visible") return;
+	const suffix = lookupMappedUtility(OVERFLOW_MAP, value);
+	if (!suffix) {
+		addUnsupported(accumulator, property, value, "Overflow needs manual review.");
+		return;
+	}
+	addMatch(accumulator, {
+		confidence: HIGH_CONFIDENCE,
+		sourceProperties: [property],
+		sourceValues: [value],
+		strategy: "semantic",
+		utility: `${property}-${suffix}`
+	});
+};
+const addObjectPositionMatch = (accumulator, value) => {
+	addPositionMatch(accumulator, "object", "object-position", value);
+};
+const mapDisplay = (context, accumulator) => {
+	const { display } = context.element.styles;
+	if (!display || display === "block") return;
+	const utility = lookupMappedUtility(DISPLAY_MAP, display);
+	if (utility) {
+		addMatch(accumulator, {
+			confidence: HIGH_CONFIDENCE,
+			sourceProperties: ["display"],
+			sourceValues: [display],
+			strategy: "semantic",
+			utility
+		});
+		return;
+	}
+	addUnsupported(accumulator, "display", display, "Display needs manual review.");
+};
+const mapPositioning = (context, accumulator) => {
+	const { styles } = context.element;
+	const { position } = styles;
+	if (position && position !== "static") {
+		const utility = lookupMappedUtility(POSITION_MAP, position);
+		if (utility) addMatch(accumulator, {
+			confidence: HIGH_CONFIDENCE,
+			sourceProperties: ["position"],
+			sourceValues: [position],
+			strategy: "semantic",
+			utility
+		});
+	}
+	if (!position || position === "static") return;
+	for (const property of [
+		"top",
+		"right",
+		"bottom",
+		"left"
+	]) {
+		const value = styles[property];
+		if (!value || value === "auto") continue;
+		addCandidateMatch(accumulator, property, value, buildDimensionCandidate(property, value, {
+			confidence: LOW_CONFIDENCE,
+			note: "Computed insets are layout-derived and need review."
+		}));
+	}
+	const zIndex = styles["z-index"];
+	if (!zIndex || zIndex === "auto") return;
+	addCandidateMatch(accumulator, "z-index", zIndex, buildZIndexCandidate(zIndex));
+};
+const mapFlexLayout = (context, accumulator) => {
+	const { styles } = context.element;
+	const { display } = styles;
+	if (display !== "flex" && display !== "inline-flex") return;
+	addMappedUtility(accumulator, "flex-direction", styles["flex-direction"], FLEX_DIRECTION_MAP);
+	addMappedUtility(accumulator, "flex-wrap", styles["flex-wrap"], FLEX_WRAP_MAP);
+	addMappedUtility(accumulator, "justify-content", styles["justify-content"], JUSTIFY_CONTENT_MAP);
+	addMappedUtility(accumulator, "align-items", styles["align-items"], ALIGN_ITEMS_MAP);
+	addGapMatches(accumulator, styles.gap, styles["row-gap"], styles["column-gap"]);
+	addFlexNumberMatch(accumulator, "flex-grow", styles["flex-grow"], "grow");
+	addFlexNumberMatch(accumulator, "flex-shrink", styles["flex-shrink"], "shrink");
+	const basis = styles["flex-basis"];
+	if (!basis || basis === "auto") return;
+	addCandidateMatch(accumulator, "flex-basis", basis, buildDimensionCandidate("basis", basis, { confidence: MEDIUM_CONFIDENCE }));
+};
+const mapGridLayout = (context, accumulator) => {
+	const { styles } = context.element;
+	const { display } = styles;
+	if (display !== "grid" && display !== "inline-grid") return;
+	addGapMatches(accumulator, styles.gap, styles["row-gap"], styles["column-gap"]);
+	addMappedUtility(accumulator, "grid-auto-flow", styles["grid-auto-flow"], GRID_AUTO_FLOW_MAP);
+	for (const [property, prefix] of [
+		["grid-column-start", "col-start"],
+		["grid-column-end", "col-end"],
+		["grid-row-start", "row-start"],
+		["grid-row-end", "row-end"]
+	]) {
+		const value = styles[property];
+		if (!value || value === "auto") continue;
+		addMatch(accumulator, {
+			confidence: MEDIUM_CONFIDENCE,
+			sourceProperties: [property],
+			sourceValues: [value],
+			strategy: "arbitrary",
+			utility: createArbitraryUtility(prefix, value)
+		});
+	}
+	addArbitraryPropertyMatch(accumulator, "grid-template-columns", styles["grid-template-columns"], "Computed grid tracks lose authored repeat syntax.");
+	addArbitraryPropertyMatch(accumulator, "grid-template-rows", styles["grid-template-rows"], "Computed grid tracks lose authored repeat syntax.");
+};
+const mapSpacing = (context, accumulator) => {
+	addBoxSpacingMatches(accumulator, "p", [
+		["padding-top", context.element.styles["padding-top"]],
+		["padding-right", context.element.styles["padding-right"]],
+		["padding-bottom", context.element.styles["padding-bottom"]],
+		["padding-left", context.element.styles["padding-left"]]
+	]);
+	addBoxSpacingMatches(accumulator, "m", [
+		["margin-top", context.element.styles["margin-top"]],
+		["margin-right", context.element.styles["margin-right"]],
+		["margin-bottom", context.element.styles["margin-bottom"]],
+		["margin-left", context.element.styles["margin-left"]]
+	]);
+};
+const mapSizing = (context, accumulator) => {
+	const { styles } = context.element;
+	for (const [property, prefix, confidence] of [
+		[
+			"min-width",
+			"min-w",
+			MEDIUM_CONFIDENCE
+		],
+		[
+			"min-height",
+			"min-h",
+			MEDIUM_CONFIDENCE
+		],
+		[
+			"max-width",
+			"max-w",
+			MEDIUM_CONFIDENCE
+		],
+		[
+			"max-height",
+			"max-h",
+			MEDIUM_CONFIDENCE
+		],
+		[
+			"width",
+			"w",
+			LOW_CONFIDENCE
+		],
+		[
+			"height",
+			"h",
+			LOW_CONFIDENCE
+		]
+	]) {
+		const value = styles[property];
+		if (!shouldMapDimension(property, value)) continue;
+		addCandidateMatch(accumulator, property, value, buildDimensionCandidate(prefix, value, {
+			confidence,
+			note: property === "width" || property === "height" ? "Computed size values are often layout-dependent." : void 0
+		}));
+	}
+};
+const mapTypographyBasics = (context, accumulator) => {
+	const { element, parent } = context;
+	addColorMatch(accumulator, "text", "color", element.styles.color, shouldEmitInheritedValue("color", element.styles.color, parent?.styles.color));
+	addFontFamilyMatch(accumulator, element.styles["font-family"], shouldEmitInheritedValue("font-family", element.styles["font-family"], parent?.styles["font-family"]));
+	addScaleMatch(accumulator, "font-size", element.styles["font-size"], shouldEmitInheritedValue("font-size", element.styles["font-size"], parent?.styles["font-size"]), FONT_SIZE_SCALE, "text", "Font size required an arbitrary value.");
+	addFontWeightMatch(accumulator, element.styles["font-weight"], shouldEmitInheritedValue("font-weight", element.styles["font-weight"], parent?.styles["font-weight"]));
+	addFontStyleMatch(accumulator, element.styles["font-style"], shouldEmitInheritedValue("font-style", element.styles["font-style"], parent?.styles["font-style"]));
+	addScaleMatch(accumulator, "line-height", element.styles["line-height"], shouldEmitInheritedValue("line-height", element.styles["line-height"], parent?.styles["line-height"]) && element.styles["line-height"] !== "normal", LINE_HEIGHT_SCALE, "leading", "Line height required an arbitrary value.");
+	addTrackingMatch(accumulator, element.styles["letter-spacing"], shouldEmitInheritedValue("letter-spacing", element.styles["letter-spacing"], parent?.styles["letter-spacing"]));
+};
+const mapTypographyPresentation = (context, accumulator) => {
+	const { element, parent } = context;
+	addMappedUtility(accumulator, "text-align", element.styles["text-align"], TEXT_ALIGN_MAP, shouldEmitInheritedValue("text-align", element.styles["text-align"], parent?.styles["text-align"]) && !["left", "start"].includes(element.styles["text-align"] ?? ""));
+	addMappedUtility(accumulator, "text-transform", element.styles["text-transform"], TEXT_TRANSFORM_MAP, shouldEmitInheritedValue("text-transform", element.styles["text-transform"], parent?.styles["text-transform"]) && element.styles["text-transform"] !== "none");
+	addMappedUtility(accumulator, "white-space", element.styles["white-space"], WHITE_SPACE_MAP, shouldEmitInheritedValue("white-space", element.styles["white-space"], parent?.styles["white-space"]) && element.styles["white-space"] !== "normal");
+	addMappedUtility(accumulator, "list-style-type", element.styles["list-style-type"], LIST_STYLE_MAP, shouldEmitInheritedValue("list-style-type", element.styles["list-style-type"], parent?.styles["list-style-type"]) && element.styles["list-style-type"] !== "disc");
+	addDecorationLineMatches(accumulator, element.styles["text-decoration-line"]);
+	addColorMatch(accumulator, "decoration", "text-decoration-color", element.styles["text-decoration-color"], element.styles["text-decoration-line"] !== "none" && Boolean(element.styles["text-decoration-color"]));
+};
+const mapBackground = (context, accumulator) => {
+	addColorMatch(accumulator, "bg", "background-color", context.element.styles["background-color"], !isTransparentColor(context.element.styles["background-color"] ?? ""));
+	addArbitraryPropertyMatch(accumulator, "background-image", context.element.styles["background-image"], "Background images are emitted as arbitrary properties.");
+};
+const mapBorder = (context, accumulator) => {
+	addUniformBorderMatch(context.element, accumulator);
+	addRadiusMatches(context.element, accumulator);
+};
+const mapEffects = (context, accumulator) => {
+	const { styles } = context.element;
+	addShadowMatch(accumulator, styles["box-shadow"]);
+	addOpacityMatch(accumulator, styles.opacity);
+	addArbitraryPropertyMatch(accumulator, "transform", styles.transform, "Computed transforms are emitted as raw properties.");
+	addPositionMatch(accumulator, "origin", "transform-origin", styles["transform-origin"]);
+	if (styles.visibility === "hidden") addMatch(accumulator, {
+		confidence: HIGH_CONFIDENCE,
+		sourceProperties: ["visibility"],
+		sourceValues: ["hidden"],
+		strategy: "semantic",
+		utility: "invisible"
+	});
+};
+const mapOverflow = (context, accumulator) => {
+	const overflowX = context.element.styles["overflow-x"];
+	const overflowY = context.element.styles["overflow-y"];
+	if (!(overflowX && overflowY)) return;
+	if (overflowX === overflowY && overflowX !== "visible") {
+		const suffix = lookupMappedUtility(OVERFLOW_MAP, overflowX);
+		if (suffix) addMatch(accumulator, {
+			confidence: HIGH_CONFIDENCE,
+			sourceProperties: ["overflow-x", "overflow-y"],
+			sourceValues: [overflowX, overflowY],
+			strategy: "semantic",
+			utility: `overflow-${suffix}`
+		});
+		return;
+	}
+	addOverflowAxisMatch(accumulator, "overflow-x", overflowX);
+	addOverflowAxisMatch(accumulator, "overflow-y", overflowY);
+};
+const mapObjectLayout = (context, accumulator) => {
+	const objectFit = context.element.styles["object-fit"];
+	if (objectFit && objectFit !== "fill") {
+		const utility = lookupMappedUtility(OBJECT_FIT_MAP, objectFit);
+		if (utility) addMatch(accumulator, {
+			confidence: HIGH_CONFIDENCE,
+			sourceProperties: ["object-fit"],
+			sourceValues: [objectFit],
+			strategy: "semantic",
+			utility
+		});
+	}
+	addObjectPositionMatch(accumulator, context.element.styles["object-position"]);
+};
+const mapPseudoElements = (context, accumulator) => {
+	const pseudoKinds = Object.keys(context.element.pseudo);
+	if (pseudoKinds.length === 0) return;
+	addUnsupported(accumulator, "pseudo-elements", pseudoKinds.join(", "), "Pseudo-elements were captured, but Tailwind output still needs manual content utilities.");
+};
+const isReviewOnlyNote = (note) => {
+	const normalizedNote = note.toLowerCase();
+	return normalizedNote.includes("manual review") || normalizedNote.includes("layout-dependent") || normalizedNote.includes("layout-derived") || normalizedNote.includes("arbitrary property utility") || normalizedNote.includes("required an arbitrary value") || normalizedNote.includes("computed transforms") || normalizedNote.includes("lose authored repeat syntax");
+};
+const shouldMoveMatchToReview = (match) => {
+	if (match.label === "low" || match.utility.startsWith("[")) return true;
+	if (match.sourceProperties.some((property) => REVIEW_ONLY_SOURCE_PROPERTIES.has(property))) return true;
+	if (match.strategy === "arbitrary" && !match.sourceProperties.every((property) => CLEAN_ARBITRARY_SOURCE_PROPERTIES.has(property))) return true;
+	return match.notes.some((note) => isReviewOnlyNote(note));
+};
+const splitMatchesForSuggestion = (matches) => {
+	const reviewMatches = [];
+	const suggestedMatches = [];
+	for (const match of matches) if (shouldMoveMatchToReview(match)) reviewMatches.push(match);
+	else suggestedMatches.push(match);
+	return {
+		reviewMatches,
+		suggestedMatches
+	};
+};
+const calculateElementConfidence = (accumulator) => {
+	if (accumulator.matches.length === 0) return accumulator.unsupported.length > 0 ? LOW_CONFIDENCE : PASSIVE_CONFIDENCE;
+	const average = accumulator.matches.reduce((sum, match) => sum + match.confidence, 0) / accumulator.matches.length;
+	if (accumulator.unsupported.length === 0) return roundToTwo(average);
+	return roundToTwo(Math.max(LOW_CONFIDENCE, average - .12));
+};
+const buildReviewFallbackNote = (match) => {
+	if (match.label === "low") return "Low-confidence utility needs manual review.";
+	if (match.sourceProperties.some((property) => REVIEW_ONLY_SOURCE_PROPERTIES.has(property))) return "Computed layout or custom CSS was kept out of the clean suggestion.";
+	if (match.strategy === "arbitrary") return "Arbitrary utility was kept out of the clean suggestion.";
+	return "Utility was kept out of the clean suggestion for review.";
+};
+const buildReviewItem = (mapping) => {
+	const reasons = [...mapping.unsupported.map((entry) => `${entry.property}: ${entry.reason}`), ...mapping.matches.filter((match) => shouldMoveMatchToReview(match)).flatMap((match) => {
+		return (match.notes.length ? match.notes : [buildReviewFallbackNote(match)]).map((note) => `${match.utility}: ${note}`);
+	})];
+	if (reasons.length === 0) return null;
+	return {
+		confidence: mapping.confidence,
+		confidenceLabel: mapping.confidenceLabel,
+		elementId: mapping.elementId,
+		reasons: dedupe(reasons).slice(0, 6),
+		selector: mapping.selector,
+		unsupportedCount: mapping.unsupported.length
+	};
+};
+const createAccumulator = () => ({
+	classSet: /* @__PURE__ */ new Set(),
+	classes: [],
+	matches: [],
+	unsupported: []
+});
+const MAPPING_STEPS = [
+	mapDisplay,
+	mapPositioning,
+	mapFlexLayout,
+	mapGridLayout,
+	mapSpacing,
+	mapSizing,
+	mapTypographyBasics,
+	mapTypographyPresentation,
+	mapBackground,
+	mapBorder,
+	mapEffects,
+	mapOverflow,
+	mapObjectLayout,
+	mapPseudoElements
+];
+const mapElementSnapshot = (context) => {
+	const accumulator = createAccumulator();
+	for (const step of MAPPING_STEPS) step(context, accumulator);
+	const confidence = calculateElementConfidence(accumulator);
+	const { reviewMatches, suggestedMatches } = splitMatchesForSuggestion(accumulator.matches);
+	return {
+		className: accumulator.classes.join(" "),
+		confidence,
+		confidenceLabel: labelFromConfidence(confidence),
+		elementId: context.element.id,
+		matchCount: accumulator.matches.length,
+		matches: accumulator.matches,
+		reviewClassName: reviewMatches.map((match) => match.utility).join(" "),
+		reviewMatchCount: reviewMatches.length,
+		selector: context.element.selector,
+		suggestedClassName: suggestedMatches.map((match) => match.utility).join(" "),
+		suggestedMatchCount: suggestedMatches.length,
+		tagName: context.element.tagName,
+		unsupported: accumulator.unsupported
+	};
+};
+const mapCaptureToTailwind = (capture) => {
+	const elements = {};
+	const reviewQueue = [];
+	let cleanUtilityCount = 0;
+	let confidenceSum = 0;
+	let lowConfidenceElementCount = 0;
+	let mappedElementCount = 0;
+	let reviewUtilityCount = 0;
+	let unsupportedPropertyCount = 0;
+	let utilityCount = 0;
+	for (const elementId of capture.order) {
+		const element = capture.elements[elementId];
+		if (!element) continue;
+		const mapping = mapElementSnapshot({
+			element,
+			parent: element.parentId === null ? null : capture.elements[element.parentId] ?? null
+		});
+		elements[elementId] = mapping;
+		confidenceSum += mapping.confidence;
+		if (mapping.confidenceLabel === "low") lowConfidenceElementCount += 1;
+		if (mapping.matchCount > 0) mappedElementCount += 1;
+		unsupportedPropertyCount += mapping.unsupported.length;
+		cleanUtilityCount += mapping.suggestedMatchCount;
+		reviewUtilityCount += mapping.reviewMatchCount;
+		utilityCount += mapping.matches.length;
+		const reviewItem = buildReviewItem(mapping);
+		if (reviewItem) reviewQueue.push(reviewItem);
+	}
+	reviewQueue.sort((left, right) => {
+		if (left.confidence !== right.confidence) return left.confidence - right.confidence;
+		return right.unsupportedCount - left.unsupportedCount;
+	});
+	const elementCount = capture.order.length;
+	return {
+		elements,
+		order: capture.order,
+		reviewQueue,
+		summary: {
+			averageConfidence: elementCount ? roundToTwo(confidenceSum / elementCount) : 0,
+			cleanUtilityCount,
+			elementCount,
+			lowConfidenceElementCount,
+			mappedElementCount,
+			reviewCount: reviewQueue.length,
+			reviewUtilityCount,
+			unsupportedPropertyCount,
+			utilityCount
+		}
+	};
+};
+//#endregion
+//#region src/capture.ts
+/**
+* Runs the capture pipeline inside a Playwright page context.
+* This mirrors the extension's `buildCapture` from `run-picker.ts`,
+* adapted to run via `page.evaluate()`.
+*/
+const captureElement = async (page, selector, settings) => {
+	return await page.evaluate(({ selector: sel, settings: opts }) => {
+		const OMITTED_ELEMENT_NAMES = new Set([
+			"base",
+			"iframe",
+			"link",
+			"meta",
+			"noscript",
+			"object",
+			"script",
+			"style",
+			"template"
+		]);
+		const OMITTED_ATTRIBUTE_NAMES = new Set([
+			"checked",
+			"selected",
+			"value"
+		]);
+		const OMITTED_URL_ATTRIBUTE_NAMES = new Set([
+			"action",
+			"formaction",
+			"href",
+			"poster",
+			"src",
+			"srcdoc",
+			"srcset",
+			"xlink:href"
+		]);
+		const BASELINE_ATTRIBUTE_NAMES = [
+			"checked",
+			"cols",
+			"disabled",
+			"multiple",
+			"open",
+			"rows",
+			"selected",
+			"size",
+			"type",
+			"wrap"
+		];
+		const INHERITED_PROPERTIES = new Set([
+			"color",
+			"font-family",
+			"font-size",
+			"font-style",
+			"font-weight",
+			"letter-spacing",
+			"line-height",
+			"list-style-type",
+			"text-align",
+			"text-decoration-color",
+			"text-decoration-line",
+			"text-transform",
+			"visibility",
+			"white-space"
+		]);
+		const CURATED_PROPERTIES = [
+			"align-items",
+			"background-color",
+			"background-image",
+			"border-bottom-color",
+			"border-bottom-left-radius",
+			"border-bottom-right-radius",
+			"border-bottom-style",
+			"border-bottom-width",
+			"border-left-color",
+			"border-left-style",
+			"border-left-width",
+			"border-right-color",
+			"border-right-style",
+			"border-right-width",
+			"border-top-color",
+			"border-top-left-radius",
+			"border-top-right-radius",
+			"border-top-style",
+			"border-top-width",
+			"bottom",
+			"box-shadow",
+			"color",
+			"column-gap",
+			"display",
+			"flex-basis",
+			"flex-direction",
+			"flex-grow",
+			"flex-shrink",
+			"flex-wrap",
+			"font-family",
+			"font-size",
+			"font-style",
+			"font-weight",
+			"gap",
+			"grid-auto-flow",
+			"grid-column-end",
+			"grid-column-start",
+			"grid-row-end",
+			"grid-row-start",
+			"grid-template-columns",
+			"grid-template-rows",
+			"height",
+			"justify-content",
+			"left",
+			"letter-spacing",
+			"line-height",
+			"list-style-type",
+			"margin-bottom",
+			"margin-left",
+			"margin-right",
+			"margin-top",
+			"max-height",
+			"max-width",
+			"min-height",
+			"min-width",
+			"object-fit",
+			"object-position",
+			"opacity",
+			"overflow-x",
+			"overflow-y",
+			"padding-bottom",
+			"padding-left",
+			"padding-right",
+			"padding-top",
+			"position",
+			"right",
+			"row-gap",
+			"text-align",
+			"text-decoration-color",
+			"text-decoration-line",
+			"text-transform",
+			"top",
+			"transform",
+			"transform-origin",
+			"visibility",
+			"white-space",
+			"width",
+			"z-index"
+		];
+		const rootEl = document.querySelector(sel);
+		if (!rootEl) throw new Error(`No element found for selector: ${sel}`);
+		const elements = {};
+		const order = [];
+		const idByElement = /* @__PURE__ */ new WeakMap();
+		let pseudoElementCount = 0;
+		let nextId = 0;
+		const defaultStyleFrame = document.createElement("iframe");
+		defaultStyleFrame.setAttribute("aria-hidden", "true");
+		defaultStyleFrame.tabIndex = -1;
+		defaultStyleFrame.style.cssText = "position:fixed;top:-9999px;left:-9999px;width:0;height:0;border:0;opacity:0;pointer-events:none";
+		document.documentElement.append(defaultStyleFrame);
+		const defaultDoc = defaultStyleFrame.contentDocument;
+		if (defaultDoc) {
+			defaultDoc.open();
+			defaultDoc.write("<!doctype html><html><body></body></html>");
+			defaultDoc.close();
+		}
+		const defaultStyleCache = /* @__PURE__ */ new Map();
+		const getDefaultStyles = (element) => {
+			const parts = [element.tagName.toLowerCase()];
+			for (const attr of BASELINE_ATTRIBUTE_NAMES) if (element.hasAttribute(attr)) parts.push(`${attr}=${element.getAttribute(attr) ?? ""}`);
+			const key = parts.join("|");
+			const cached = defaultStyleCache.get(key);
+			if (cached) return cached;
+			const frameDoc = defaultStyleFrame.contentDocument;
+			const frameWin = defaultStyleFrame.contentWindow;
+			if (!(frameDoc && frameWin)) return {};
+			const baseline = frameDoc.createElement(element.tagName.toLowerCase());
+			for (const attr of BASELINE_ATTRIBUTE_NAMES) if (element.hasAttribute(attr)) baseline.setAttribute(attr, element.getAttribute(attr) ?? "");
+			frameDoc.body.append(baseline);
+			const computed = frameWin.getComputedStyle(baseline);
+			const defaults = {};
+			for (const prop of CURATED_PROPERTIES) {
+				const val = computed.getPropertyValue(prop).trim();
+				if (val) defaults[prop] = val;
+			}
+			baseline.remove();
+			defaultStyleCache.set(key, defaults);
+			return defaults;
+		};
+		const snapshotStyles = (element, styles, includeAll, parentStyles) => {
+			const output = {};
+			const properties = includeAll ? [...styles] : [...CURATED_PROPERTIES];
+			const defaultStyles = includeAll ? null : getDefaultStyles(element);
+			for (const property of properties) {
+				const value = styles.getPropertyValue(property);
+				if (!value) continue;
+				const trimmed = value.trim();
+				if (!trimmed) continue;
+				if (defaultStyles?.[property] === trimmed) continue;
+				if (parentStyles && INHERITED_PROPERTIES.has(property) && parentStyles[property] === trimmed) continue;
+				output[property] = trimmed;
+			}
+			return output;
+		};
+		const snapshotPseudo = (element, kind, includeAll) => {
+			const styles = window.getComputedStyle(element, `::${kind}`);
+			const content = styles.getPropertyValue("content").trim();
+			const display = styles.getPropertyValue("display").trim();
+			const w = styles.getPropertyValue("width").trim();
+			const h = styles.getPropertyValue("height").trim();
+			const bg = styles.getPropertyValue("background-color").trim();
+			const bw = styles.getPropertyValue("border-top-width").trim();
+			if (content === "none" && display === "inline" && w === "auto" && h === "auto" && bg === "rgba(0, 0, 0, 0)" && bw === "0px") return null;
+			return {
+				kind,
+				styles: snapshotStyles(element, styles, includeAll, null)
+			};
+		};
+		const buildSelector = (element) => {
+			if (element.id) return `#${CSS.escape(element.id)}`;
+			const segments = [];
+			let current = element;
+			while (current && current.nodeType === Node.ELEMENT_NODE && segments.length < 4) {
+				const tag = current.tagName.toLowerCase();
+				const classes = [...current.classList].slice(0, 2).map((c) => `.${CSS.escape(c)}`).join("");
+				const idx = current.parentElement ? [...current.parentElement.children].indexOf(current) + 1 : 1;
+				segments.unshift(`${tag}${classes}:nth-child(${idx})`);
+				current = current.parentElement;
+			}
+			return segments.join(" > ");
+		};
+		const shouldOmitAttr = (name) => {
+			const n = name.toLowerCase();
+			return n.startsWith("on") || n === "nonce" || OMITTED_ATTRIBUTE_NAMES.has(n) || OMITTED_URL_ATTRIBUTE_NAMES.has(n);
+		};
+		const getSafeAttributes = (el) => {
+			const safe = {};
+			for (const attr of el.attributes) if (!shouldOmitAttr(attr.name)) safe[attr.name] = attr.value;
+			return safe;
+		};
+		const getBoundingBox = (rect) => ({
+			bottom: rect.bottom,
+			height: rect.height,
+			left: rect.left,
+			right: rect.right,
+			top: rect.top,
+			width: rect.width,
+			x: rect.x,
+			y: rect.y
+		});
+		const isHidden = (el) => {
+			const s = window.getComputedStyle(el);
+			return s.display === "none" || s.visibility === "hidden";
+		};
+		const pruneExcludedDescendants = (sourceRoot, cloneRoot, includeHiddenElements) => {
+			const sourceElements = [...sourceRoot.querySelectorAll("*")];
+			const cloneElements = [...cloneRoot.querySelectorAll("*")];
+			for (let index = cloneElements.length - 1; index >= 0; index -= 1) {
+				const sourceElement = sourceElements[index];
+				const cloneElement = cloneElements[index];
+				if (!(sourceElement && cloneElement)) continue;
+				if (OMITTED_ELEMENT_NAMES.has(sourceElement.tagName.toLowerCase()) || !includeHiddenElements && isHidden(sourceElement)) cloneElement.replaceWith(cloneElement.ownerDocument.createComment(cloneElement.tagName.toLowerCase()));
+			}
+		};
+		const sanitizeOuterHtml = (el, includeHiddenElements) => {
+			const clone = el.cloneNode(true);
+			if (!(clone instanceof Element)) return "";
+			if (OMITTED_ELEMENT_NAMES.has(el.tagName.toLowerCase()) || !includeHiddenElements && isHidden(el)) return `<!--${el.tagName.toLowerCase()}-->`;
+			pruneExcludedDescendants(el, clone, includeHiddenElements);
+			const sanitize = (target) => {
+				for (const attr of [...target.attributes]) if (shouldOmitAttr(attr.name)) target.removeAttribute(attr.name);
+				if (target instanceof HTMLTextAreaElement) target.textContent = "";
+			};
+			sanitize(clone);
+			for (const child of clone.querySelectorAll("*")) sanitize(child);
+			return clone.outerHTML;
+		};
+		const captureEl = (element, parentId) => {
+			const id = `node-${nextId}`;
+			nextId += 1;
+			idByElement.set(element, id);
+			order.push(id);
+			const snapshot = {
+				attributes: getSafeAttributes(element),
+				boundingBox: getBoundingBox(element.getBoundingClientRect()),
+				children: [],
+				classList: [...element.classList],
+				id,
+				parentId,
+				pseudo: {},
+				selector: buildSelector(element),
+				styles: snapshotStyles(element, window.getComputedStyle(element), opts.captureMode === "full", parentId ? elements[parentId]?.styles ?? null : null),
+				tagName: element.tagName.toLowerCase()
+			};
+			if (opts.includePseudoElements) {
+				const before = snapshotPseudo(element, "before", opts.captureMode === "full");
+				const after = snapshotPseudo(element, "after", opts.captureMode === "full");
+				if (before) {
+					snapshot.pseudo.before = before;
+					pseudoElementCount += 1;
+				}
+				if (after) {
+					snapshot.pseudo.after = after;
+					pseudoElementCount += 1;
+				}
+			}
+			elements[id] = snapshot;
+			if (parentId && elements[parentId]) elements[parentId].children.push(id);
+			return id;
+		};
+		const rootElementId = captureEl(rootEl, null);
+		const walker = document.createTreeWalker(rootEl, NodeFilter.SHOW_ELEMENT, { acceptNode(node) {
+			if (node instanceof Element && node !== rootEl && !opts.includeHiddenElements && isHidden(node)) return NodeFilter.FILTER_REJECT;
+			return NodeFilter.FILTER_ACCEPT;
+		} });
+		while (walker.nextNode()) {
+			const current = walker.currentNode;
+			if (!(current instanceof Element)) continue;
+			captureEl(current, current.parentElement ? idByElement.get(current.parentElement) ?? null : null);
+		}
+		defaultStyleFrame.remove();
+		return {
+			elements,
+			metadata: {
+				title: document.title,
+				url: window.location.href
+			},
+			order,
+			rootElementId,
+			rootOuterHtml: sanitizeOuterHtml(rootEl, opts.includeHiddenElements),
+			settings: opts,
+			summary: {
+				elementCount: order.length,
+				pseudoElementCount
+			},
+			version: 1
+		};
+	}, {
+		selector,
+		settings
+	});
+};
+//#endregion
+//#region src/interactive.ts
+const interactive = async () => {
+	intro("style-capture");
+	const inputs = await group({
+		mode: () => select({
+			message: "Capture mode",
+			options: [{
+				hint: "Common visual properties only",
+				label: "Curated",
+				value: "curated"
+			}, {
+				hint: "All computed styles",
+				label: "Full",
+				value: "full"
+			}]
+		}),
+		output: () => select({
+			message: "Output",
+			options: [{
+				label: "Clipboard",
+				value: "clipboard"
+			}, {
+				label: "Stdout",
+				value: "stdout"
+			}]
+		}),
+		selector: () => text({
+			message: "CSS selector for target element",
+			placeholder: "main, .hero, #app",
+			validate: (val) => {
+				if (!val?.trim()) return "Selector is required";
+			}
+		}),
+		url: () => text({
+			message: "URL to capture",
+			placeholder: "https://example.com",
+			validate: (val) => {
+				if (!val) return "URL is required";
+				if (!URL.canParse(val)) return "Please enter a valid URL";
+			}
+		})
+	}, { onCancel: () => {
+		cancel("Cancelled.");
+		process.exit(0);
+	} });
+	const settings = {
+		...createDefaultSettings(),
+		captureMode: inputs.mode
+	};
+	const spin = spinner();
+	spin.start("Launching browser");
+	const browser = await chromium.launch({ headless: true });
+	try {
+		const page = await browser.newPage();
+		spin.message(`Loading ${inputs.url}`);
+		await page.goto(inputs.url, { waitUntil: "networkidle" });
+		spin.message("Verifying selector");
+		const found = await page.locator(inputs.selector).count();
+		if (found === 0) {
+			spin.stop("No element found");
+			log.error(`Selector "${inputs.selector}" matched 0 elements on ${inputs.url}`);
+			await browser.close();
+			process.exit(1);
+		}
+		if (found > 1) log.warn(`Selector matched ${found} elements — capturing the first one`);
+		spin.message(`Capturing ${found} element(s)`);
+		const capture = await captureElement(page, inputs.selector, settings);
+		spin.message("Mapping to Tailwind");
+		const mapping = mapCaptureToTailwind(capture);
+		spin.message("Formatting");
+		const markdown = formatCaptureForClaudeMarkdown(capture, mapping);
+		spin.stop("Capture complete");
+		log.info(`${capture.summary.elementCount} elements, ${capture.summary.pseudoElementCount} pseudo-elements`);
+		log.info(`Tailwind: ${mapping.summary.utilityCount} utilities mapped (${mapping.summary.averageConfidence.toFixed(0)}% avg confidence)`);
+		if (inputs.output === "clipboard") {
+			const { default: clipboardy } = await import("clipboardy");
+			await clipboardy.write(markdown);
+			log.success("Copied to clipboard");
+		} else console.log(`\n${markdown}`);
+	} finally {
+		await browser.close();
+	}
+	outro("Done");
+};
+//#endregion
+//#region src/run.ts
+/**
+* Non-interactive capture — designed for agent/skill usage.
+* Returns the formatted style_capture prompt as a string.
+*/
+const run = async (options) => {
+	const settings = {
+		...createDefaultSettings(),
+		captureMode: options.mode ?? "curated"
+	};
+	const browser = await chromium.launch({ headless: true });
+	try {
+		const page = await browser.newPage();
+		await page.goto(options.url, { waitUntil: "networkidle" });
+		const count = await page.locator(options.selector).count();
+		if (count === 0) throw new Error(`Selector "${options.selector}" matched 0 elements on ${options.url}`);
+		if (count > 1) process.stderr.write(`Warning: selector matched ${count} elements, capturing the first\n`);
+		const capture = await captureElement(page, options.selector, settings);
+		const mapping = mapCaptureToTailwind(capture);
+		const output = formatCaptureForClaudeMarkdown(capture, mapping);
+		process.stderr.write(`Captured ${capture.summary.elementCount} elements, ${mapping.summary.utilityCount} Tailwind utilities mapped\n`);
+		return output;
+	} finally {
+		await browser.close();
+	}
+};
+//#endregion
+//#region src/cli.ts
+const program = new Command();
+program.name("style-capture").description("Capture computed CSS and HTML from web pages, map to Tailwind utilities").version("0.0.1").argument("[url]", "URL to capture").argument("[selector]", "CSS selector for target element").option("-m, --mode <mode>", "capture mode: curated or full", "curated").action(async (url, selector, options) => {
+	if (url && selector) {
+		const result = await run({
+			mode: options?.mode ?? "curated",
+			selector,
+			url
+		});
+		process.stdout.write(result);
+	} else await interactive();
+});
+program.parse();
+//#endregion
+export {};
+
+//# sourceMappingURL=cli.js.map