design-embed 0.1.1 → 0.2.0

package/dist/core-BLV62TaX.mjs

@@ -0,0 +1,907 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, isAbsolute, relative, resolve } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+//#region packages/design-embed/src/config/index.ts
+function defineConfig(config) {
+	return config;
+}
+function fromFile(htmlPath, cssPath) {
+	const resolvedHtml = htmlPath instanceof URL ? fileURLToPath(htmlPath) : null;
+	const resolvedCss = cssPath ? cssPath instanceof URL ? fileURLToPath(cssPath) : null : null;
+	return {
+		name: "html-file",
+		async run({ cwd }) {
+			return {
+				html: readFileSync(resolvedHtml ?? resolve(cwd, htmlPath), "utf-8"),
+				css: cssPath ? readFileSync(resolvedCss ?? resolve(cwd, cssPath), "utf-8") : void 0,
+				diagnostics: []
+			};
+		}
+	};
+}
+async function loadConfig(configPath, cwd = process.cwd()) {
+	const diagnostics = [];
+	const resolvedPath = isAbsolute(configPath) ? configPath : resolve(cwd, configPath);
+	if (!existsSync(resolvedPath)) return { diagnostics: [{
+		code: "CONFIG_NOT_FOUND",
+		message: `Config file not found: ${resolvedPath}`,
+		severity: "error"
+	}] };
+	if (!/\.(ts|js|mjs)$/.test(resolvedPath)) return { diagnostics: [{
+		code: "CONFIG_UNSUPPORTED_FORMAT",
+		message: `Unsupported config format: ${resolvedPath}. Only .ts, .js, and .mjs are supported.`,
+		severity: "error"
+	}] };
+	try {
+		const module = await import(pathToFileURL(resolvedPath).href);
+		const config = module.default ?? module.config;
+		if (!config) return { diagnostics: [{
+			code: "CONFIG_INVALID",
+			message: `Config file must export a default object or a named 'config' object: ${resolvedPath}`,
+			severity: "error"
+		}] };
+		diagnostics.push(...validateConfig(config));
+		return {
+			config,
+			configPath: resolvedPath,
+			diagnostics
+		};
+	} catch (error) {
+		return { diagnostics: [{
+			code: "CONFIG_INVALID",
+			message: `Failed to load config file: ${error instanceof Error ? error.message : String(error)}`,
+			severity: "error"
+		}] };
+	}
+}
+function validateConfig(config) {
+	const diagnostics = [];
+	const target = config.output?.target;
+	const styleMode = config.output?.styleMode;
+	if (target && target !== "html" && (typeof target !== "object" || typeof target.emit !== "function")) diagnostics.push({
+		code: "TARGET_ADAPTER_INVALID",
+		message: "output.target must be a target adapter with emit().",
+		severity: "error"
+	});
+	if (styleMode && styleMode !== "inline" && styleMode !== "css-modules" && styleMode !== "tailwind") diagnostics.push({
+		code: "STYLE_MODE_UNSUPPORTED",
+		message: `Unsupported style mode: ${styleMode}`,
+		severity: "error"
+	});
+	for (const [index, component] of (config.components ?? []).entries()) {
+		if (!component.selector || typeof component.selector !== "string") diagnostics.push({
+			code: "COMPONENT_SELECTOR_INVALID",
+			message: `Component mapping ${index} must include a selector.`,
+			severity: "error"
+		});
+		if (!component.component || typeof component.component !== "string") diagnostics.push({
+			code: "COMPONENT_IMPORT_INVALID",
+			message: `Component mapping ${index} must include a component name.`,
+			severity: "error"
+		});
+	}
+	const spacing = config.tokens?.spacing;
+	if (spacing?.unit && spacing.unit !== "px" && spacing.unit !== "rem") diagnostics.push({
+		code: "TOKEN_SPACING_UNIT_INVALID",
+		message: `Unsupported spacing unit: ${spacing.unit}`,
+		severity: "error"
+	});
+	if (spacing?.threshold !== void 0 && !Number.isFinite(spacing.threshold)) diagnostics.push({
+		code: "TOKEN_SPACING_THRESHOLD_INVALID",
+		message: "Spacing threshold must be a finite number.",
+		severity: "error"
+	});
+	for (const [name, value] of Object.entries(spacing?.values ?? {})) if (!Number.isFinite(value)) diagnostics.push({
+		code: "TOKEN_SPACING_VALUE_INVALID",
+		message: `Spacing token ${name} must be a finite number.`,
+		severity: "error"
+	});
+	for (const [name, value] of Object.entries(config.tokens?.colors ?? {})) if (!/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(value)) diagnostics.push({
+		code: "TOKEN_COLOR_INVALID",
+		message: `Color token ${name} must be a hex color.`,
+		severity: "error"
+	});
+	if (config.tokens?.colorThreshold !== void 0 && !Number.isFinite(config.tokens.colorThreshold)) diagnostics.push({
+		code: "TOKEN_COLOR_THRESHOLD_INVALID",
+		message: "Color threshold must be a finite number.",
+		severity: "error"
+	});
+	for (const [groupName, group] of Object.entries({
+		sizing: config.tokens?.sizing,
+		typography: config.tokens?.typography
+	})) {
+		if (!group) continue;
+		if (group.unit && group.unit !== "px" && group.unit !== "rem") diagnostics.push({
+			code: "TOKEN_NUMERIC_UNIT_INVALID",
+			message: `Unsupported ${groupName} unit: ${group.unit}`,
+			severity: "error"
+		});
+		if (group.threshold !== void 0 && !Number.isFinite(group.threshold)) diagnostics.push({
+			code: "TOKEN_NUMERIC_THRESHOLD_INVALID",
+			message: `${groupName} threshold must be a finite number.`,
+			severity: "error"
+		});
+		for (const [name, value] of Object.entries(group.values ?? {})) if (!Number.isFinite(value)) diagnostics.push({
+			code: "TOKEN_NUMERIC_VALUE_INVALID",
+			message: `${groupName} token ${name} must be a finite number.`,
+			severity: "error"
+		});
+	}
+	validateTestGeneration(config.tests, diagnostics);
+	return diagnostics;
+}
+function validateTestGeneration(tests, diagnostics) {
+	if (!tests) return;
+	if (tests.runner && tests.runner !== "playwright") diagnostics.push({
+		code: "TEST_RUNNER_UNSUPPORTED",
+		message: `Unsupported test runner: ${tests.runner}`,
+		severity: "error"
+	});
+	for (const [index, viewport] of (tests.viewports ?? []).entries()) {
+		if (!Number.isFinite(viewport.width) || viewport.width <= 0) diagnostics.push({
+			code: "TEST_VIEWPORT_WIDTH_INVALID",
+			message: `Test viewport ${index} width must be a positive finite number.`,
+			severity: "error"
+		});
+		if (!Number.isFinite(viewport.height) || viewport.height <= 0) diagnostics.push({
+			code: "TEST_VIEWPORT_HEIGHT_INVALID",
+			message: `Test viewport ${index} height must be a positive finite number.`,
+			severity: "error"
+		});
+	}
+	for (const [index, state] of (tests.states ?? []).entries()) if (!state.name || typeof state.name !== "string") diagnostics.push({
+		code: "TEST_STATE_NAME_INVALID",
+		message: `Test state ${index} must include a name.`,
+		severity: "error"
+	});
+	if (tests.assertions?.layoutTolerance !== void 0 && (!Number.isFinite(tests.assertions.layoutTolerance) || tests.assertions.layoutTolerance < 0)) diagnostics.push({
+		code: "TEST_LAYOUT_TOLERANCE_INVALID",
+		message: "Test layout tolerance must be a finite number greater than or equal to 0.",
+		severity: "error"
+	});
+}
+//#endregion
+//#region packages/design-embed/src/targets/html.ts
+var HtmlTarget = class {
+	domModel;
+	constructor(options = {}) {
+		this.domModel = options.domModel ?? "light";
+	}
+	emit({ nodes, css, config }) {
+		const viewsDir = String(config?.output?.viewsDir ?? "src/generated/views");
+		const viewName = config?.output?.viewName ?? "index";
+		const components = collectComponents(nodes);
+		const scriptTag = components.length > 0 ? `<script defer src="./${viewName}.js"><\/script>\n` : "";
+		const files = [{
+			path: `${viewsDir}/${viewName}.html`,
+			contents: emitHtml(nodes, css) + scriptTag
+		}];
+		if (components.length > 0) files.push({
+			path: `${viewsDir}/${viewName}.ts`,
+			contents: emitWebComponentFile(components, this.domModel)
+		});
+		return { files };
+	}
+	generateTests(input) {
+		return htmlTestGenerator.generateTests(input);
+	}
+};
+const htmlTarget = new HtmlTarget();
+const htmlTestGenerator = { generateTests({ html, css, config }) {
+	const diagnostics = [];
+	const tests = config.tests;
+	if (tests?.runner && tests.runner !== "playwright") {
+		diagnostics.push({
+			code: "TEST_RUNNER_UNSUPPORTED",
+			message: `Unsupported test runner: ${tests.runner}`,
+			severity: "error"
+		});
+		return {
+			files: [],
+			diagnostics
+		};
+	}
+	const viewsDir = config.output?.viewsDir ?? "src/generated/views";
+	const viewName = config.output?.viewName ?? "index";
+	const outputDir = tests?.outputDir ?? `${viewsDir}/tests`;
+	const fixturePath = `${outputDir}/${viewName}.reference.html`;
+	const specPath = `${outputDir}/${viewName}.spec.ts`;
+	const outputHtmlPath = `${viewsDir}/${viewName}.html`;
+	const referenceHtml = `${css?.trim() ? `<style>\n${css}\n</style>\n` : ""}${html}`;
+	return {
+		diagnostics,
+		files: [{
+			path: fixturePath,
+			contents: referenceHtml.endsWith("\n") ? referenceHtml : `${referenceHtml}\n`
+		}, {
+			path: specPath,
+			contents: emitHtmlVisualSpec({
+				viewName,
+				relativeOutputPath: toRelativeFilePath(specPath, outputHtmlPath),
+				fixtureFileName: `${viewName}.reference.html`,
+				viewports: tests?.viewports ?? [{
+					name: "default",
+					width: 1440,
+					height: 900
+				}],
+				states: tests?.states ?? [{ name: "default" }],
+				assertions: {
+					screenshot: tests?.assertions?.screenshot ?? true,
+					layout: tests?.assertions?.layout ?? true,
+					layoutTolerance: tests?.assertions?.layoutTolerance ?? 0,
+					selectors: tests?.assertions?.selectors ?? [":scope", ":scope *"],
+					screenshotThreshold: tests?.assertions?.screenshotThreshold ?? .1,
+					screenshotMaxDiffPixels: tests?.assertions?.screenshotMaxDiffPixels ?? 0
+				}
+			})
+		}]
+	};
+} };
+function emitHtml(nodes, css) {
+	const body = nodes.map((node) => emitNode(node, 0)).join("");
+	if (!css?.trim()) return body;
+	return `<style>\n${css.trim()}\n</style>\n${body}\n`;
+}
+function emitNode(node, depth) {
+	const indent = "	".repeat(depth);
+	if (node.kind === "text") return `${indent}${escapeHtml(node.text ?? "")}\n`;
+	if (node.kind === "component") return emitComponentHtml(node, depth);
+	const attributes = Object.entries(node.attributes ?? {}).sort(([left], [right]) => left.localeCompare(right)).map(([name, value]) => value === "" ? name : `${name}="${escapeAttribute(value)}"`).join(" ");
+	const openTag = attributes ? `<${node.tagName} ${attributes}>` : `<${node.tagName}>`;
+	const children = node.children ?? [];
+	if (children.length === 0) return `${indent}${openTag}</${node.tagName}>\n`;
+	return `${indent}${openTag}\n${children.map((child) => emitNode(child, depth + 1)).join("")}${indent}</${node.tagName}>\n`;
+}
+function emitComponentHtml(node, depth) {
+	const indent = "	".repeat(depth);
+	const tag = toCustomElementTag(node.component ?? "component");
+	const attrParts = Object.entries(node.props ?? {}).filter(([name, prop]) => name !== "children" && prop.kind !== "children").sort(([left], [right]) => left.localeCompare(right)).flatMap(([name, prop]) => {
+		const part = formatPropAsAttribute(name, prop);
+		return part !== null ? [part] : [];
+	}).join(" ");
+	const openTag = attrParts ? `<${tag} ${attrParts}>` : `<${tag}>`;
+	const childrenProp = node.props?.children;
+	if (childrenProp?.kind === "text") return `${indent}${openTag}${escapeHtml(childrenProp.value)}</${tag}>\n`;
+	if (childrenProp?.kind === "children") {
+		const kids = childrenProp.value;
+		if (kids.length === 0) return `${indent}${openTag}</${tag}>\n`;
+		return `${indent}${openTag}\n${kids.map((child) => emitNode(child, depth + 1)).join("")}${indent}</${tag}>\n`;
+	}
+	const children = node.children ?? [];
+	if (children.length === 0) return `${indent}${openTag}</${tag}>\n`;
+	return `${indent}${openTag}\n${children.map((child) => emitNode(child, depth + 1)).join("")}${indent}</${tag}>\n`;
+}
+function formatPropAsAttribute(name, prop) {
+	if (prop.kind === "children") return null;
+	if (prop.value === false) return null;
+	if (prop.value === true) return name;
+	const value = String(prop.value);
+	return value === "" ? name : `${name}="${escapeAttribute(value)}"`;
+}
+const VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+function collectComponents(nodes) {
+	const seen = /* @__PURE__ */ new Map();
+	function visit(node) {
+		if (node.kind === "component") {
+			const key = `${node.importPath ?? ""}::${node.importName ?? ""}`;
+			if (!seen.has(key) && node.importPath && node.importName) seen.set(key, buildComponentInfo(node));
+			for (const child of node.children ?? []) visit(child);
+			for (const prop of Object.values(node.props ?? {})) if (prop.kind === "children") for (const child of prop.value) visit(child);
+		} else if (node.kind === "element") for (const child of node.children ?? []) visit(child);
+	}
+	for (const node of nodes) visit(node);
+	return Array.from(seen.values());
+}
+function buildComponentInfo(node) {
+	const tagName = toCustomElementTag(node.importName ?? node.component ?? "Component");
+	const className = toPascalCase(tagName);
+	const observedAttributes = [];
+	const propBindings = [];
+	const mappedOriginalAttrs = /* @__PURE__ */ new Set();
+	for (const [name, prop] of Object.entries(node.props ?? {})) if (prop.kind === "literal") {
+		observedAttributes.push(name);
+		if (prop.attribute) {
+			propBindings.push({
+				propName: name,
+				attrName: prop.attribute
+			});
+			mappedOriginalAttrs.add(prop.attribute);
+		}
+	}
+	observedAttributes.sort();
+	propBindings.sort((a, b) => a.attrName.localeCompare(b.attrName));
+	const sourceEl = node.sourceElement;
+	let sourceTagName;
+	let staticAttrEntries = [];
+	if (sourceEl?.kind === "element" && sourceEl.tagName) {
+		sourceTagName = sourceEl.tagName;
+		staticAttrEntries = Object.entries(sourceEl.attributes ?? {}).filter(([attr]) => !mappedOriginalAttrs.has(attr)).sort(([a], [b]) => a.localeCompare(b));
+	}
+	return {
+		tagName,
+		className,
+		observedAttributes,
+		sourceTagName,
+		staticAttrEntries,
+		propBindings
+	};
+}
+function emitWebComponentFile(components, domModel) {
+	return `${components.map((c) => emitWebComponentClass(c, domModel)).join("\n\n")}\n\n${components.map((c) => `customElements.define("${c.tagName}", ${c.className});`).join("\n")}\n`;
+}
+function emitWebComponentClass(info, domModel) {
+	const hasShadow = domModel === "shadow";
+	const { className, observedAttributes, sourceTagName, staticAttrEntries, propBindings } = info;
+	const attrArray = observedAttributes.length === 0 ? "[]" : `[${observedAttributes.map((a) => JSON.stringify(a)).join(", ")}]`;
+	const shadowSetup = hasShadow ? `\tprivate shadow: ShadowRoot;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.shadow = this.attachShadow({ mode: "open" });\n\t}\n\n` : "";
+	let renderBody;
+	if (sourceTagName && !hasShadow) {
+		const isVoid = VOID_ELEMENTS.has(sourceTagName);
+		const lines = ["		if (!this.parentNode) return;"];
+		if (observedAttributes.length > 0) for (const a of observedAttributes) lines.push(`\t\tconst ${a} = this.getAttribute(${JSON.stringify(a)});`);
+		lines.push(`\t\tconst el = document.createElement(${JSON.stringify(sourceTagName)});`);
+		for (const [attr, value] of staticAttrEntries) lines.push(`\t\tel.setAttribute(${JSON.stringify(attr)}, ${JSON.stringify(value)});`);
+		for (const { propName, attrName } of propBindings) lines.push(`\t\tif (${propName} !== null) el.setAttribute(${JSON.stringify(attrName)}, ${propName});`);
+		if (!isVoid) lines.push("		el.innerHTML = this.innerHTML;");
+		lines.push("		this.replaceWith(el);");
+		renderBody = lines.join("\n");
+	} else {
+		const attrVars = observedAttributes.map((a) => `\t\tconst ${a} = this.getAttribute("${a}");`).join("\n");
+		const fallbackLines = [];
+		if (attrVars) fallbackLines.push(attrVars);
+		if (hasShadow) fallbackLines.push(`\t\tthis.shadow.innerHTML = \`<slot></slot>\`;`);
+		renderBody = fallbackLines.join("\n");
+	}
+	return `class ${className} extends HTMLElement {
+${shadowSetup}\tstatic get observedAttributes(): string[] {
+\t\treturn ${attrArray};
+\t}
+
+\tconnectedCallback(): void {
+\t\tthis.render();
+\t}
+
+\tattributeChangedCallback(): void {
+\t\tthis.render();
+\t}
+
+${renderBody ? `\tprivate render(): void {\n${renderBody}\n\t}` : `\tprivate render(): void {\n\t}`}
+}`;
+}
+function emitHtmlVisualSpec(input) {
+	const viewports = JSON.stringify(input.viewports, null, 2);
+	const states = JSON.stringify(input.states, null, 2);
+	const selectors = JSON.stringify(input.assertions.selectors, null, 2);
+	const screenshotEnabled = JSON.stringify(input.assertions.screenshot);
+	const layoutEnabled = JSON.stringify(input.assertions.layout);
+	const layoutTolerance = JSON.stringify(input.assertions.layoutTolerance);
+	const screenshotThreshold = JSON.stringify(input.assertions.screenshotThreshold);
+	const screenshotMaxDiffPixels = JSON.stringify(input.assertions.screenshotMaxDiffPixels);
+	return `import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { expect, test } from "@playwright/test";
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+
+const currentDir = dirname(fileURLToPath(import.meta.url));
+const referenceHtml = readFileSync(resolve(currentDir, "./${input.fixtureFileName}"), "utf-8");
+const outputHtmlPath = resolve(currentDir, "${input.relativeOutputPath}");
+const viewports = ${viewports};
+const states = ${states};
+const selectors = ${selectors};
+const screenshotEnabled = ${screenshotEnabled};
+const layoutEnabled = ${layoutEnabled};
+const layoutTolerance = ${layoutTolerance};
+const screenshotThreshold = ${screenshotThreshold};
+const screenshotMaxDiffPixels = ${screenshotMaxDiffPixels};
+
+for (const viewport of viewports) {
+\tfor (const state of states) {
+\t\tconst viewportName = viewport.name ?? String(viewport.width) + "x" + String(viewport.height);
+\t\ttest("${input.viewName} matches source at " + viewportName + " / " + state.name, async ({ page }) => {
+\t\t\tawait page.setViewportSize({ width: viewport.width, height: viewport.height });
+
+\t\t\tawait page.setContent(referenceHtml);
+\t\t\tawait applyState(page, state);
+\t\t\tconst expectedScreenshot = screenshotEnabled ? await page.screenshot({ fullPage: true }) : undefined;
+\t\t\tconst expectedLayout = layoutEnabled ? await readLayout(page.locator("body > *").first(), selectors) : [];
+
+\t\t\tawait page.goto("file://" + outputHtmlPath);
+\t\t\tawait page.evaluate(() => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))));
+\t\t\tawait applyState(page, state);
+\t\t\tconst actualScreenshot = screenshotEnabled ? await page.screenshot({ fullPage: true }) : undefined;
+\t\t\tconst actualLayout = layoutEnabled ? await readLayout(page.locator("body > *").first(), selectors) : [];
+
+\t\t\tif (screenshotEnabled) {
+\t\t\t\tconst expectedPng = PNG.sync.read(expectedScreenshot);
+\t\t\t\tconst actualPng = PNG.sync.read(actualScreenshot);
+\t\t\t\texpect(actualPng.width, "screenshot width").toBe(expectedPng.width);
+\t\t\t\texpect(actualPng.height, "screenshot height").toBe(expectedPng.height);
+\t\t\t\tconst diff = new PNG({ width: expectedPng.width, height: expectedPng.height });
+\t\t\t\tconst diffPixelCount = pixelmatch(expectedPng.data, actualPng.data, diff.data, expectedPng.width, expectedPng.height, { threshold: screenshotThreshold });
+\t\t\t\texpect(diffPixelCount, "screenshot diff pixels").toBeLessThanOrEqual(screenshotMaxDiffPixels);
+\t\t\t}
+\t\t\tif (layoutEnabled) {
+\t\t\t\texpectLayoutToMatch(actualLayout, expectedLayout, layoutTolerance);
+\t\t\t}
+\t\t});
+\t}
+}
+
+async function applyState(page, state) {
+\tif (state.waitFor) {
+\t\tawait page.waitForSelector(state.waitFor);
+\t}
+\tif (state.hover) {
+\t\tawait page.hover(state.hover);
+\t}
+\tif (state.focus) {
+\t\tawait page.focus(state.focus);
+\t}
+\tif (state.click) {
+\t\tawait page.click(state.click);
+\t}
+}
+
+async function readLayout(root, selectorsToRead) {
+\treturn root.evaluate((element, values) => {
+\t\treturn values.flatMap((selector) => {
+\t\t\tconst matches = selector === ":scope" ? [element] : Array.from(element.querySelectorAll(selector));
+\t\t\treturn matches.map((matchedElement, index) => {
+\t\t\t\tconst rect = matchedElement.getBoundingClientRect();
+\t\t\t\treturn {
+\t\t\t\t\tselector,
+\t\t\t\t\tindex,
+\t\t\t\t\ttagName: matchedElement.tagName.toLowerCase(),
+\t\t\t\t\tx: rect.x,
+\t\t\t\t\ty: rect.y,
+\t\t\t\t\twidth: rect.width,
+\t\t\t\t\theight: rect.height,
+\t\t\t\t};
+\t\t\t});
+\t\t});
+\t}, selectorsToRead);
+}
+
+function expectLayoutToMatch(actual, expected, tolerance) {
+\texpect(actual.length).toBe(expected.length);
+\tfor (let index = 0; index < expected.length; index += 1) {
+\t\tconst actualRect = actual[index];
+\t\tconst expectedRect = expected[index];
+\t\texpect(actualRect.selector).toBe(expectedRect.selector);
+\t\texpect(actualRect.index).toBe(expectedRect.index);
+\t\texpect(actualRect.tagName).toBe(expectedRect.tagName);
+\t\tfor (const key of ["x", "y", "width", "height"]) {
+\t\t\tconst drift = Math.abs(actualRect[key] - expectedRect[key]);
+\t\t\texpect(drift, \`\${expectedRect.selector}[\${expectedRect.index}] \${key} drift\`).toBeLessThanOrEqual(tolerance);
+\t\t}
+\t}
+}
+`;
+}
+function toRelativeFilePath(fromFile, toFile) {
+	const fromParts = fromFile.split("/").slice(0, -1);
+	const toParts = toFile.split("/");
+	while (fromParts.length > 0 && toParts.length > 0 && fromParts[0] === toParts[0]) {
+		fromParts.shift();
+		toParts.shift();
+	}
+	const relative = [...fromParts.map(() => ".."), ...toParts].join("/");
+	return relative.startsWith(".") ? relative : `./${relative}`;
+}
+function escapeHtml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttribute(value) {
+	return escapeHtml(value).replace(/"/g, "&quot;");
+}
+function toCustomElementTag(name) {
+	const kebab = name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().replace(/^-/, "");
+	return kebab.includes("-") ? kebab : `${kebab}-el`;
+}
+function toPascalCase(kebab) {
+	return kebab.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+}
+//#endregion
+//#region packages/design-embed/src/core/diagnostics/jsonDiagnostic.ts
+function toJsonDiagnostic(diagnostic) {
+	const details = {
+		...diagnostic.details,
+		...diagnostic.selector ? { selector: diagnostic.selector } : {},
+		...diagnostic.property ? { property: diagnostic.property } : {}
+	};
+	return {
+		code: diagnostic.code,
+		severity: diagnostic.severity,
+		message: redactSecrets(diagnostic.message),
+		...diagnostic.file ? { file: diagnostic.file } : {},
+		...diagnostic.source ? { line: diagnostic.source.line } : {},
+		...diagnostic.source ? { column: diagnostic.source.column } : {},
+		...Object.keys(details).length > 0 ? { details } : {}
+	};
+}
+function toJsonDiagnostics(diagnostics) {
+	return diagnostics.map(toJsonDiagnostic);
+}
+function formatDiagnosticText(diagnostic) {
+	const location = [
+		diagnostic.file,
+		diagnostic.source?.line,
+		diagnostic.source?.column
+	].filter((part) => part !== void 0).join(":");
+	return `${location ? `${location}: ` : ""}${diagnostic.severity}: ${diagnostic.code}: ${redactSecrets(diagnostic.message)}`;
+}
+function redactSecrets(value) {
+	return value.replace(/figma[_-]?token\s*[:=]\s*[^\s]+/gi, "FIGMA_TOKEN=[redacted]").replace(/bearer\s+[a-z0-9._-]+/gi, "Bearer [redacted]");
+}
+//#endregion
+//#region packages/design-embed/src/core/pipeline/checkMode.ts
+function checkGeneratedFiles(input) {
+	const diagnostics = [];
+	for (const file of input.files) {
+		const absolutePath = resolve(input.cwd, file.path);
+		const current = input.readFile(absolutePath);
+		if (current === void 0) {
+			diagnostics.push({
+				code: "CHECK_FILE_MISSING",
+				message: `Generated file is missing: ${file.path}`,
+				severity: "error",
+				file: file.path
+			});
+			continue;
+		}
+		if (current !== file.contents) diagnostics.push({
+			code: "CHECK_FILE_STALE",
+			message: `Generated file is stale: ${file.path}`,
+			severity: "error",
+			file: file.path
+		});
+	}
+	return {
+		ok: diagnostics.length === 0,
+		diagnostics
+	};
+}
+//#endregion
+//#region packages/design-embed/src/core/index.ts
+/**
+* The main compiler entry point.
+* Parses HTML, applies component mappings, and emits files.
+*
+* @param input - The compilation input.
+* @returns A promise resolving to the compilation result.
+*
+*/
+async function embed(input) {
+	const cwd = input.cwd ?? process.cwd();
+	if (!input.config?.source) return {
+		html: "",
+		files: [],
+		diagnostics: [{
+			code: "PLUGIN_REQUIRED",
+			message: "Config must include a source plugin.",
+			severity: "error"
+		}]
+	};
+	const sourceResult = await input.config.source.run({ cwd });
+	const diagnostics = [...sourceResult.diagnostics];
+	if (diagnostics.some((d) => d.severity === "error")) return {
+		html: "",
+		files: [],
+		diagnostics
+	};
+	if (!sourceResult.html) return {
+		html: "",
+		files: [],
+		diagnostics: [...diagnostics, {
+			code: "PLUGIN_NO_HTML",
+			message: "Source plugin produced no HTML.",
+			severity: "error"
+		}]
+	};
+	const html = sourceResult.html;
+	const css = sourceResult.css;
+	const config = patchOutputPaths(input.config, cwd);
+	const target = config?.output?.target;
+	const targetObj = !target || target === "html" ? htmlTarget : target;
+	const mappingDiagnostics = validateComponentMappings(config?.components ?? []);
+	diagnostics.push(...mappingDiagnostics);
+	if (diagnostics.some((d) => d.severity === "error")) return {
+		html,
+		files: [],
+		diagnostics
+	};
+	const mappedNodes = applyComponentMappings(parseHtml(html), config?.components ?? [], diagnostics);
+	const { files } = targetObj.emit({
+		nodes: mappedNodes,
+		css,
+		config,
+		diagnostics
+	});
+	if (input.generateTests && "generateTests" in targetObj) {
+		const testResult = targetObj.generateTests({
+			html,
+			css,
+			config
+		});
+		diagnostics.push(...testResult.diagnostics);
+		if (!diagnostics.some((d) => d.severity === "error")) files.push(...testResult.files);
+	}
+	if (!input.dryRun) for (const file of files) {
+		const outPath = resolve(cwd, file.path);
+		mkdirSync(dirname(outPath), { recursive: true });
+		writeFileSync(outPath, file.contents, "utf-8");
+	}
+	return {
+		html,
+		css,
+		files,
+		diagnostics
+	};
+}
+function patchOutputPaths(config, cwd) {
+	const viewsDir = config.output?.viewsDir;
+	if (!viewsDir) return config;
+	return {
+		...config,
+		output: {
+			...config.output,
+			viewsDir: resolveDir(viewsDir, cwd)
+		}
+	};
+}
+function resolveDir(dir, cwd) {
+	if (!dir) return void 0;
+	if (dir instanceof URL) return relative(cwd, fileURLToPath(dir));
+	return dir;
+}
+function applyComponentMappings(nodes, mappings, diagnostics = []) {
+	const parsedMappings = mappings.map((mapping, index) => ({
+		index,
+		mapping,
+		selector: parseSelector(mapping.selector)
+	})).filter(({ selector }) => selector !== void 0);
+	return nodes.map((node) => {
+		if (node.kind !== "element") return node;
+		const match = parsedMappings.find(({ selector }) => matchesSelector(node, selector));
+		if (match) {
+			const props = extractProps(node, match.mapping, diagnostics);
+			return {
+				kind: "component",
+				component: match.mapping.component,
+				importName: match.mapping.component,
+				importPath: `./${match.mapping.component}.view`,
+				props,
+				children: props.children?.kind === "children" ? void 0 : applyComponentMappings(node.children ?? [], mappings, diagnostics),
+				source: node.source,
+				sourceElement: node
+			};
+		}
+		return {
+			...node,
+			children: applyComponentMappings(node.children ?? [], mappings, diagnostics)
+		};
+	});
+}
+function parseSelector(selector) {
+	const trimmed = selector.trim();
+	if (!trimmed || /[\s>+~,:]/.test(trimmed)) return;
+	const parsed = {
+		classes: [],
+		attributes: {}
+	};
+	let rest = trimmed;
+	const tagMatch = rest.match(/^[a-zA-Z][a-zA-Z0-9-]*/);
+	if (tagMatch?.[0]) {
+		parsed.tagName = tagMatch[0].toLowerCase();
+		rest = rest.slice(tagMatch[0].length);
+	}
+	while (rest) {
+		if (rest.startsWith(".")) {
+			const match = rest.match(/^\.([a-zA-Z_][a-zA-Z0-9_-]*)/);
+			if (!match?.[1]) return;
+			parsed.classes.push(match[1]);
+			rest = rest.slice(match[0].length);
+			continue;
+		}
+		if (rest.startsWith("#")) {
+			const match = rest.match(/^#([a-zA-Z_][a-zA-Z0-9_-]*)/);
+			if (!match?.[1] || parsed.id) return;
+			parsed.id = match[1];
+			rest = rest.slice(match[0].length);
+			continue;
+		}
+		if (rest.startsWith("[")) {
+			const match = rest.match(/^\[([a-zA-Z_][a-zA-Z0-9_.:-]*)(?:=(?:"([^"]*)"|'([^']*)'|([^\]]+)))?\]/);
+			if (!match?.[1]) return;
+			parsed.attributes[match[1]] = match[2] ?? match[3] ?? match[4] ?? "";
+			rest = rest.slice(match[0].length);
+			continue;
+		}
+		return;
+	}
+	return parsed;
+}
+function matchesSelector(node, selector) {
+	if (node.kind !== "element") return false;
+	const attributes = node.attributes ?? {};
+	if (selector.tagName && node.tagName !== selector.tagName) return false;
+	if (selector.id && attributes.id !== selector.id) return false;
+	const classNames = new Set((attributes.class ?? "").split(/\s+/).filter(Boolean));
+	for (const className of selector.classes) if (!classNames.has(className)) return false;
+	for (const [name, value] of Object.entries(selector.attributes)) {
+		if (!(name in attributes)) return false;
+		if (value !== "" && attributes[name] !== value) return false;
+	}
+	return true;
+}
+function parseHtml(html) {
+	const root = {
+		kind: "element",
+		tagName: "root",
+		attributes: {},
+		styles: {},
+		children: []
+	};
+	const stack = [root];
+	const tokens = html.matchAll(/<!--[\s\S]*?-->|<\/?[a-zA-Z][^>]*>|[^<]+/g);
+	for (const token of tokens) {
+		const value = token[0];
+		const offset = token.index;
+		const source = getSourceLocation(html, offset);
+		if (value.startsWith("<!--")) continue;
+		if (value.startsWith("</")) {
+			const tagName = value.slice(2, -1).trim().toLowerCase();
+			while (stack.length > 1) if (stack.pop()?.tagName === tagName) break;
+			continue;
+		}
+		if (value.startsWith("<")) {
+			const selfClosing = /\/>$/.test(value) || isVoidElement(value);
+			const node = parseElement(value, source);
+			currentParent(stack).children?.push(node);
+			if (!selfClosing) stack.push(node);
+			continue;
+		}
+		if (value.trim()) currentParent(stack).children?.push({
+			kind: "text",
+			text: collapseWhitespace(value),
+			source
+		});
+	}
+	return root.children ?? [];
+}
+function parseInlineStyle(style) {
+	const styles = {};
+	if (!style) return styles;
+	for (const declaration of style.split(";")) {
+		const [property, ...valueParts] = declaration.split(":");
+		const value = valueParts.join(":").trim();
+		if (!property?.trim() || !value) continue;
+		styles[property.trim().toLowerCase()] = value;
+	}
+	return styles;
+}
+function parseElement(rawTag, source) {
+	const tagBody = rawTag.replace(/^</, "").replace(/\/?>$/, "").trim();
+	const tagName = tagBody.split(/\s+/, 1)[0]?.toLowerCase() ?? "div";
+	const attributes = parseAttributes(tagBody.slice(tagName.length).trim());
+	return {
+		kind: "element",
+		tagName,
+		attributes,
+		styles: parseInlineStyle(attributes.style),
+		children: [],
+		source
+	};
+}
+function parseAttributes(source) {
+	const attributes = {};
+	for (const match of source.matchAll(/([:@a-zA-Z_][:@a-zA-Z0-9_.-]*)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g)) {
+		const name = match[1];
+		if (!name) continue;
+		attributes[name] = match[3] ?? match[4] ?? match[5] ?? "";
+	}
+	return attributes;
+}
+function validateComponentMappings(mappings) {
+	const diagnostics = [];
+	for (const [index, mapping] of mappings.entries()) {
+		if (mapping.selector && !parseSelector(mapping.selector)) diagnostics.push({
+			code: "SELECTOR_UNSUPPORTED",
+			message: `Component mapping ${index} uses an unsupported selector: ${mapping.selector}`,
+			severity: "error"
+		});
+		for (const [propName, expression] of Object.entries(mapping.props ?? {})) if (!isSupportedPropExpression(expression)) diagnostics.push({
+			code: "PROP_EXPRESSION_UNSUPPORTED",
+			message: `Component mapping ${index} prop "${propName}" uses an unsupported expression: ${expression}`,
+			severity: "error"
+		});
+	}
+	return diagnostics;
+}
+function isSupportedPropExpression(expression) {
+	return !expression.startsWith("$") || expression === "$text" || expression === "$children" || /^\$attr\.[a-zA-Z_][a-zA-Z0-9_.:-]*$/.test(expression);
+}
+function extractProps(node, mapping, diagnostics) {
+	const props = {};
+	for (const [propName, expression] of Object.entries(mapping.props ?? {})) {
+		if (expression === "$text") {
+			props[propName] = {
+				kind: "text",
+				value: collectText(node)
+			};
+			continue;
+		}
+		if (expression === "$children") {
+			props[propName] = {
+				kind: "children",
+				value: node.children ?? []
+			};
+			continue;
+		}
+		if (expression.startsWith("$attr.")) {
+			const attributeName = expression.slice(6);
+			const value = node.attributes?.[attributeName];
+			if (value === void 0) {
+				diagnostics.push({
+					code: "PROP_ATTRIBUTE_MISSING",
+					message: `Attribute "${attributeName}" is missing for prop "${propName}".`,
+					severity: "warning"
+				});
+				continue;
+			}
+			props[propName] = {
+				kind: "literal",
+				value,
+				attribute: attributeName
+			};
+			continue;
+		}
+		props[propName] = {
+			kind: "literal",
+			value: expression
+		};
+	}
+	return props;
+}
+function collectText(node) {
+	if (node.kind === "text") return node.text ?? "";
+	return (node.children ?? []).map((child) => collectText(child)).filter(Boolean).join(" ").trim();
+}
+function currentParent(stack) {
+	const parent = stack[stack.length - 1];
+	if (!parent) throw new Error("HTML parser stack is empty.");
+	return parent;
+}
+function getSourceLocation(source, offset) {
+	const lines = source.slice(0, offset).split(/\r?\n/);
+	return {
+		offset,
+		line: lines.length,
+		column: (lines[lines.length - 1]?.length ?? 0) + 1
+	};
+}
+function collapseWhitespace(value) {
+	return value.replace(/\s+/g, " ").trim();
+}
+function isVoidElement(tag) {
+	return /^<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)(\s|>|\/)/i.test(tag);
+}
+//#endregion
+export { formatDiagnosticText as a, htmlTarget as c, loadConfig as d, validateConfig as f, checkGeneratedFiles as i, defineConfig as l, embed as n, toJsonDiagnostics as o, parseHtml as r, HtmlTarget as s, applyComponentMappings as t, fromFile as u };