@vizejs/vite-plugin-musea 0.58.0 → 0.60.0

package/dist/index.mjs

@@ -0,0 +1,3039 @@
+import { i as MuseaVrtRunner, n as generateVrtJsonReport, r as generateVrtReport } from "./vrt-CjFf5GR0.mjs";
+import { t as MuseaA11yRunner } from "./a11y-DNCg2qCB.mjs";
+import { n as writeArtFile, t as generateArtFile } from "./autogen-3-y1d0ou.mjs";
+import { createRequire } from "node:module";
+import { transformWithEsbuild } from "vite";
+import fs from "node:fs";
+import path from "node:path";
+import { vizeConfigStore } from "@vizejs/vite-plugin";
+import { fileURLToPath } from "node:url";
+//#region src/native-loader.ts
+/**
+* Native binding loader for @vizejs/native.
+*
+* Provides lazy-loading of the native Rust-based parser and a JS fallback
+* for SFC analysis when the native `analyzeSfc` function is unavailable.
+*/
+let native = null;
+function loadNative() {
+	if (native) return native;
+	const require = createRequire(import.meta.url);
+	try {
+		native = require("@vizejs/native");
+		return native;
+	} catch (e) {
+		throw new Error(`Failed to load @vizejs/native. Make sure it's installed and built:\n${String(e)}`);
+	}
+}
+/**
+* JS-based fallback for SFC analysis when native `analyzeSfc` is not available.
+* Uses regex parsing to extract props and emits from Vue SFC source.
+*/
+function analyzeSfcFallback(source, _options) {
+	try {
+		const props = [];
+		const emits = [];
+		const scriptSetupMatch = source.match(/<script\s+[^>]*setup[^>]*>([\s\S]*?)<\/script>/);
+		if (!scriptSetupMatch) {
+			if (!source.match(/<script[^>]*>([\s\S]*?)<\/script>/)) return {
+				props: [],
+				emits: []
+			};
+		}
+		const scriptContent = scriptSetupMatch?.[1] || "";
+		const propsMatch = scriptContent.match(/defineProps\s*<\s*\{([\s\S]*?)\}>\s*\(/);
+		const propsMatch2 = scriptContent.match(/defineProps\s*<\s*\{([\s\S]*?)\}>/);
+		const propsBody = propsMatch?.[1] || propsMatch2?.[1];
+		if (propsBody) {
+			const lines = propsBody.split("\n");
+			let i = 0;
+			while (i < lines.length) {
+				const line = lines[i].trim();
+				if (line.startsWith("/**") || line.startsWith("*") || line.startsWith("*/")) {
+					i++;
+					continue;
+				}
+				const propMatch = line.match(/^(\w+)(\?)?:\s*(.+?)(?:;?\s*)$/);
+				if (propMatch) {
+					const name = propMatch[1];
+					const optional = !!propMatch[2];
+					let type = propMatch[3].replace(/;$/, "").trim();
+					const defaultPattern = new RegExp(`\\b${name}\\s*=\\s*([^,}\\n]+)`);
+					const defaultMatch = scriptContent.match(defaultPattern);
+					const defaultValue = defaultMatch ? defaultMatch[1].trim() : void 0;
+					props.push({
+						name,
+						type,
+						required: !optional && defaultValue === void 0,
+						...defaultValue !== void 0 ? { default_value: defaultValue } : {}
+					});
+				}
+				i++;
+			}
+		}
+		const emitsMatch = scriptContent.match(/defineEmits\s*<\s*\{([\s\S]*?)\}>/);
+		if (emitsMatch) {
+			const emitsBody = emitsMatch[1];
+			const emitRegex = /(\w+)\s*:/g;
+			let match;
+			while ((match = emitRegex.exec(emitsBody)) !== null) emits.push(match[1]);
+		}
+		return {
+			props,
+			emits
+		};
+	} catch {
+		return {
+			props: [],
+			emits: []
+		};
+	}
+}
+//#endregion
+//#region src/utils.ts
+/**
+* Shared utility functions for the Musea Vite plugin.
+*/
+function normalizeGlobPath(filepath) {
+	return filepath.split(path.sep).join("/");
+}
+function matchesPattern(file, pattern, root) {
+	const normalizedPattern = normalizeGlobPath(pattern);
+	return matchGlob(path.isAbsolute(pattern) ? path.resolve(file) : path.relative(root, file), normalizedPattern);
+}
+function shouldProcess(file, include, exclude, root) {
+	for (const pattern of exclude) if (matchesPattern(file, pattern, root)) return false;
+	for (const pattern of include) if (matchesPattern(file, pattern, root)) return true;
+	return false;
+}
+function matchGlob(filepath, pattern) {
+	const normalizedFilepath = normalizeGlobPath(filepath);
+	const normalizedPattern = normalizeGlobPath(pattern);
+	const PLACEHOLDER = "<<GLOBSTAR>>";
+	const SEGMENT_PLACEHOLDER = "<<GLOBSTAR_SEGMENT>>";
+	const regex = normalizedPattern.replaceAll("**/", SEGMENT_PLACEHOLDER).replaceAll("**", PLACEHOLDER).replace(/[|\\{}()[\]^$+?.]/g, "\\$&").replace(/\*/g, "[^/]*").replaceAll(SEGMENT_PLACEHOLDER, "(?:.*/)?").replaceAll(PLACEHOLDER, ".*");
+	return new RegExp(`^${regex}$`).test(normalizedFilepath);
+}
+function resolveScanRoot(root, pattern) {
+	const absolutePattern = path.isAbsolute(pattern) ? pattern : path.resolve(root, pattern);
+	const normalizedPattern = normalizeGlobPath(absolutePattern);
+	const globIndex = normalizedPattern.search(/[*[{]/);
+	if (globIndex === -1) return path.dirname(absolutePattern);
+	const staticPrefix = normalizedPattern.slice(0, globIndex);
+	if (!staticPrefix) return root;
+	if (staticPrefix.endsWith("/")) return path.resolve(staticPrefix.slice(0, -1));
+	return path.resolve(path.dirname(staticPrefix));
+}
+function resolveScanRoots(root, include) {
+	const roots = /* @__PURE__ */ new Set();
+	for (const pattern of include) roots.add(resolveScanRoot(root, pattern));
+	if (roots.size === 0) roots.add(root);
+	return [...roots];
+}
+async function scanArtFiles(root, include, exclude, scanInlineArt = false) {
+	const files = /* @__PURE__ */ new Set();
+	const scanRoots = resolveScanRoots(root, include);
+	const visitedDirs = /* @__PURE__ */ new Set();
+	async function scan(dir) {
+		const resolvedDir = path.resolve(dir);
+		if (visitedDirs.has(resolvedDir)) return;
+		visitedDirs.add(resolvedDir);
+		let entries;
+		try {
+			entries = await fs.promises.readdir(resolvedDir, { withFileTypes: true });
+		} catch {
+			return;
+		}
+		for (const entry of entries) {
+			const fullPath = path.join(resolvedDir, entry.name);
+			let excluded = false;
+			for (const pattern of exclude) if (matchesPattern(fullPath, pattern, root) || matchGlob(entry.name, pattern)) {
+				excluded = true;
+				break;
+			}
+			if (excluded) continue;
+			if (entry.isDirectory()) await scan(fullPath);
+			else if (entry.isFile() && entry.name.endsWith(".art.vue")) {
+				if (shouldProcess(fullPath, include, exclude, root)) files.add(fullPath);
+			} else if (scanInlineArt && entry.isFile() && entry.name.endsWith(".vue") && !entry.name.endsWith(".art.vue")) {
+				if ((await fs.promises.readFile(fullPath, "utf-8")).includes("<art")) files.add(fullPath);
+			}
+		}
+	}
+	for (const scanRoot of scanRoots) await scan(scanRoot);
+	return [...files];
+}
+async function generateStorybookFiles(artFiles, root, outDir) {
+	const binding = loadNative();
+	const outputDir = path.resolve(root, outDir);
+	await fs.promises.mkdir(outputDir, { recursive: true });
+	for (const [filePath, _art] of artFiles) try {
+		const source = await fs.promises.readFile(filePath, "utf-8");
+		const csf = binding.artToCsf(source, { filename: filePath });
+		const outputPath = path.join(outputDir, csf.filename);
+		await fs.promises.writeFile(outputPath, csf.code, "utf-8");
+		console.log(`[musea] Generated: ${path.relative(root, outputPath)}`);
+	} catch (e) {
+		console.error(`[musea] Failed to generate CSF for ${filePath}:`, e);
+	}
+}
+function toPascalCase(str) {
+	const pascal = str.normalize("NFKD").replace(/[^\p{L}\p{N}]+/gu, " ").trim().split(/\s+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+	if (!pascal) return "Variant";
+	return /^[\p{L}_$]/u.test(pascal) ? pascal : `Variant${pascal}`;
+}
+function escapeTemplate(str) {
+	return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n");
+}
+function escapeHtml(str) {
+	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
+}
+/**
+* Build the theme config object from plugin options for runtime injection.
+*/
+function buildThemeConfig(theme) {
+	if (!theme) return void 0;
+	if (typeof theme === "string") return { default: theme };
+	const themes = Array.isArray(theme) ? theme : [theme];
+	const custom = {};
+	for (const t of themes) custom[t.name] = {
+		base: t.base,
+		colors: t.colors
+	};
+	return {
+		default: themes[0].name,
+		custom
+	};
+}
+//#endregion
+//#region src/art-module.ts
+/**
+* Art module generation for Musea.
+*
+* Generates the virtual ES modules that represent parsed `.art.vue` files,
+* including variant component definitions and script setup handling.
+*/
+/**
+* Extract the content of the first <script setup> block from a Vue SFC source.
+*/
+function extractScriptSetupContent(source) {
+	return source.match(/<script\s+[^>]*setup[^>]*>([\s\S]*?)<\/script>/)?.[1]?.trim();
+}
+function resolveRelativeSpecifier(specifier, artDir) {
+	if (!specifier.startsWith(".")) return specifier;
+	return path.resolve(artDir, specifier);
+}
+function rewriteRelativeImportStatement(statement, artDir) {
+	return statement.replace(/\bfrom\s+(['"])([^'"]+)\1/g, (_match, quote, specifier) => `from ${quote}${resolveRelativeSpecifier(specifier, artDir)}${quote}`).replace(/^(\s*import\s+)(['"])([^'"]+)\2(\s*;?\s*)$/s, (_match, prefix, quote, specifier, suffix) => `${prefix}${quote}${resolveRelativeSpecifier(specifier, artDir)}${quote}${suffix}`);
+}
+function countCharBalance(source, openChar, closeChar) {
+	let balance = 0;
+	for (const char of source) if (char === openChar) balance++;
+	else if (char === closeChar) balance--;
+	return balance;
+}
+function isCompleteImportStatement(statement) {
+	const trimmed = statement.trim();
+	if (!trimmed.startsWith("import ")) return false;
+	if (countCharBalance(statement, "{", "}") > 0) return false;
+	return /^import\s+[\s\S]+?\s+from\s+['"][^'"]+['"]\s*;?$/s.test(trimmed) || /^import\s+['"][^'"]+['"]\s*;?$/s.test(trimmed);
+}
+function splitTopLevelCommaList(source) {
+	const parts = [];
+	let current = "";
+	let braceDepth = 0;
+	let bracketDepth = 0;
+	let parenDepth = 0;
+	for (const char of source) {
+		if (char === "," && braceDepth === 0 && bracketDepth === 0 && parenDepth === 0) {
+			const trimmed = current.trim();
+			if (trimmed) parts.push(trimmed);
+			current = "";
+			continue;
+		}
+		current += char;
+		if (char === "{") braceDepth++;
+		else if (char === "}") braceDepth--;
+		else if (char === "[") bracketDepth++;
+		else if (char === "]") bracketDepth--;
+		else if (char === "(") parenDepth++;
+		else if (char === ")") parenDepth--;
+	}
+	const trimmed = current.trim();
+	if (trimmed) parts.push(trimmed);
+	return parts;
+}
+function collectImportedNames(statement, returnNames) {
+	const fromMatch = statement.replace(/\s+/g, " ").trim().replace(/;$/, "").match(/^import\s+(type\s+)?(.+?)\s+from\s+['"][^'"]+['"]$/);
+	if (!fromMatch) return;
+	if (fromMatch[1]) return;
+	const specifierParts = splitTopLevelCommaList(fromMatch[2].trim());
+	const defaultOrNamespace = specifierParts[0]?.trim() ?? "";
+	const trailing = specifierParts.slice(1).join(", ").trim();
+	if (defaultOrNamespace && !defaultOrNamespace.startsWith("{")) {
+		const namespaceMatch = defaultOrNamespace.match(/^\*\s+as\s+([A-Za-z_$][\w$]*)$/);
+		if (namespaceMatch) returnNames.add(namespaceMatch[1]);
+		else if (!defaultOrNamespace.startsWith("type ")) returnNames.add(defaultOrNamespace);
+	}
+	const namedBlock = defaultOrNamespace.startsWith("{") ? defaultOrNamespace : trailing.startsWith("{") ? trailing : "";
+	if (!namedBlock) return;
+	const namedContent = namedBlock.slice(1, -1);
+	for (const part of splitTopLevelCommaList(namedContent)) {
+		const trimmed = part.trim();
+		if (!trimmed || trimmed.startsWith("type ")) continue;
+		const alias = trimmed.split(/\s+as\s+/).pop()?.trim();
+		if (alias) returnNames.add(alias);
+	}
+}
+function collectObjectDestructuredNames(statement, returnNames) {
+	const match = statement.match(/^(?:export\s+)?(?:const|let|var)\s+\{([\s\S]*?)\}\s*=/);
+	if (!match) return;
+	for (const part of splitTopLevelCommaList(match[1])) {
+		let name = part.trim();
+		if (!name) continue;
+		if (name.startsWith("...")) name = name.slice(3).trim();
+		else if (name.includes(":")) name = name.split(":").pop().trim();
+		else if (name.includes("=")) name = name.split("=")[0].trim();
+		if (name.includes("=")) name = name.split("=")[0].trim();
+		if (/^[A-Za-z_$][\w$]*$/.test(name)) returnNames.add(name);
+	}
+}
+function collectArrayDestructuredNames(statement, returnNames) {
+	const match = statement.match(/^(?:export\s+)?(?:const|let|var)\s+\[([\s\S]*?)\]\s*=/);
+	if (!match) return;
+	for (const part of splitTopLevelCommaList(match[1])) {
+		let name = part.trim();
+		if (!name) continue;
+		if (name.startsWith("...")) name = name.slice(3).trim();
+		if (name.includes("=")) name = name.split("=")[0].trim();
+		if (/^[A-Za-z_$][\w$]*$/.test(name)) returnNames.add(name);
+	}
+}
+function collectTopLevelReturnNames(setupBody, returnNames) {
+	let braceDepth = 0;
+	for (let i = 0; i < setupBody.length; i++) {
+		const line = setupBody[i];
+		const trimmed = line.trim();
+		if (braceDepth === 0) {
+			if (/^(?:export\s+)?(?:const|let|var)\s+\{/.test(trimmed)) {
+				const statementLines = [line];
+				let balance = countCharBalance(line, "{", "}") + countCharBalance(line, "[", "]") + countCharBalance(line, "(", ")");
+				while (balance > 0 && i + 1 < setupBody.length) {
+					i++;
+					statementLines.push(setupBody[i]);
+					balance += countCharBalance(setupBody[i], "{", "}") + countCharBalance(setupBody[i], "[", "]") + countCharBalance(setupBody[i], "(", ")");
+				}
+				collectObjectDestructuredNames(statementLines.join("\n"), returnNames);
+				continue;
+			}
+			if (/^(?:export\s+)?(?:const|let|var)\s+\[/.test(trimmed)) {
+				const statementLines = [line];
+				let balance = countCharBalance(line, "{", "}") + countCharBalance(line, "[", "]") + countCharBalance(line, "(", ")");
+				while (balance > 0 && i + 1 < setupBody.length) {
+					i++;
+					statementLines.push(setupBody[i]);
+					balance += countCharBalance(setupBody[i], "{", "}") + countCharBalance(setupBody[i], "[", "]") + countCharBalance(setupBody[i], "(", ")");
+				}
+				collectArrayDestructuredNames(statementLines.join("\n"), returnNames);
+				continue;
+			}
+			const constMatch = trimmed.match(/^(?:export\s+)?(?:const|let|var)\s+([A-Za-z_$][\w$]*)/);
+			if (constMatch) returnNames.add(constMatch[1]);
+			const functionMatch = trimmed.match(/^(?:export\s+)?(?:async\s+)?function\s+([A-Za-z_$][\w$]*)\s*\(/);
+			if (functionMatch) returnNames.add(functionMatch[1]);
+			const classMatch = trimmed.match(/^(?:export\s+)?class\s+([A-Za-z_$][\w$]*)\b/);
+			if (classMatch) returnNames.add(classMatch[1]);
+		}
+		braceDepth += countCharBalance(line, "{", "}");
+	}
+}
+/**
+* Parse script setup content into imports and setup body.
+* Returns the import lines, setup body lines, and all identifiers to expose.
+*/
+function parseScriptSetupForArt(content) {
+	const lines = content.split("\n");
+	const imports = [];
+	const setupBody = [];
+	const returnNames = /* @__PURE__ */ new Set();
+	let currentImport = null;
+	for (const line of lines) {
+		const trimmed = line.trim();
+		if (currentImport) {
+			currentImport.push(line);
+			const statement = currentImport.join("\n");
+			if (isCompleteImportStatement(statement)) {
+				imports.push(statement);
+				collectImportedNames(statement, returnNames);
+				currentImport = null;
+			}
+			continue;
+		}
+		if (trimmed.startsWith("import ")) {
+			currentImport = [line];
+			const statement = currentImport.join("\n");
+			if (isCompleteImportStatement(statement)) {
+				imports.push(statement);
+				collectImportedNames(statement, returnNames);
+				currentImport = null;
+			}
+			continue;
+		}
+		setupBody.push(line);
+	}
+	if (currentImport) {
+		const statement = currentImport.join("\n");
+		imports.push(statement);
+		collectImportedNames(statement, returnNames);
+	}
+	collectTopLevelReturnNames(setupBody, returnNames);
+	returnNames.delete("type");
+	return {
+		imports,
+		setupBody,
+		returnNames: [...returnNames]
+	};
+}
+function generateArtModule(art, filePath) {
+	let componentImportPath;
+	let componentName;
+	if (art.isInline && art.componentPath) {
+		componentImportPath = art.componentPath;
+		componentName = path.basename(art.componentPath, ".vue");
+	} else if (art.metadata.component) {
+		const comp = art.metadata.component;
+		componentImportPath = path.isAbsolute(comp) ? comp : path.resolve(path.dirname(filePath), comp);
+		componentName = path.basename(comp, ".vue");
+	}
+	const scriptSetup = art.scriptSetupContent ? parseScriptSetupForArt(art.scriptSetupContent) : null;
+	let code = `
+// Auto-generated module for: ${path.basename(filePath)}
+import { defineComponent, h } from 'vue';
+`;
+	if (scriptSetup) {
+		const artDir = path.dirname(filePath);
+		for (const imp of scriptSetup.imports) {
+			const resolved = rewriteRelativeImportStatement(imp, artDir);
+			code += `${resolved}\n`;
+		}
+	}
+	if (componentImportPath && componentName) {
+		if (!scriptSetup?.imports.some((imp) => {
+			if (imp.includes(`from '${componentImportPath}'`) || imp.includes(`from "${componentImportPath}"`)) return true;
+			return new RegExp(`^import\\s+${componentName}[\\s,]`).test(imp.trim());
+		})) code += `import ${componentName} from '${componentImportPath}';\n`;
+		code += `export const __component__ = ${componentName};\n`;
+	}
+	code += `
+export const metadata = ${JSON.stringify(art.metadata)};
+export const variants = ${JSON.stringify(art.variants)};
+export const __styles__ = ${JSON.stringify(art.styleBlocks ?? [])};
+`;
+	for (const variant of art.variants) {
+		const variantComponentName = toPascalCase(variant.name);
+		let template = variant.template;
+		if (componentName) template = template.replace(/<Self/g, `<${componentName}`).replace(/<\/Self>/g, `</${componentName}>`);
+		const escapedTemplate = template.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
+		const fullTemplate = `<div data-variant="${variant.name}">${escapedTemplate}</div>`;
+		const componentNames = /* @__PURE__ */ new Set();
+		if (componentName) componentNames.add(componentName);
+		if (scriptSetup) {
+			for (const name of scriptSetup.returnNames) if (/^[A-Z]/.test(name)) componentNames.add(name);
+		}
+		const components = componentNames.size > 0 ? `  components: { ${[...componentNames].join(", ")} },\n` : "";
+		const hasSetupBody = scriptSetup?.setupBody.some((line) => line.trim().length > 0) ?? false;
+		if (scriptSetup && (hasSetupBody || scriptSetup.returnNames.length > 0)) code += `
+export const ${variantComponentName} = defineComponent({
+  name: '${variantComponentName}',
+${components}  setup() {
+${scriptSetup.setupBody.map((l) => `    ${l}`).join("\n")}
+    return { ${scriptSetup.returnNames.join(", ")} };
+  },
+  template: \`${fullTemplate}\`,
+});
+`;
+		else if (componentName) code += `
+export const ${variantComponentName} = {
+  name: '${variantComponentName}',
+${components}  template: \`${fullTemplate}\`,
+};
+`;
+		else code += `
+export const ${variantComponentName} = {
+  name: '${variantComponentName}',
+  template: \`${fullTemplate}\`,
+};
+`;
+	}
+	const defaultVariant = art.variants.find((v) => v.isDefault) || art.variants[0];
+	if (defaultVariant) code += `
+export default ${toPascalCase(defaultVariant.name)};
+`;
+	return code;
+}
+//#endregion
+//#region src/gallery/styles-base.css?inline
+var styles_base_default = ":root {\n  --musea-bg-primary: #e6e2d6;\n  --musea-bg-secondary: #ddd9cd;\n  --musea-bg-tertiary: #d4d0c4;\n  --musea-bg-elevated: #e6e2d6;\n  --musea-accent: #121212;\n  --musea-accent-hover: #2a2a2a;\n  --musea-accent-subtle: #12121214;\n  --musea-text: #121212;\n  --musea-text-secondary: #3a3a3a;\n  --musea-text-muted: #6b6b6b;\n  --musea-border: #c8c4b8;\n  --musea-border-subtle: #d4d0c4;\n  --musea-success: #16a34a;\n  --musea-shadow: 0 4px 24px #00000014;\n  --musea-radius-sm: 4px;\n  --musea-radius-md: 6px;\n  --musea-radius-lg: 8px;\n  --musea-transition: .15s ease;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  background: var(--musea-bg-primary);\n  color: var(--musea-text);\n  -webkit-font-smoothing: antialiased;\n  min-height: 100vh;\n  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n  line-height: 1.5;\n}\n";
+//#endregion
+//#region src/gallery/styles-layout.css?inline
+var styles_layout_default = ".header {\n  background: var(--musea-bg-secondary);\n  border-bottom: 1px solid var(--musea-border);\n  z-index: 100;\n  justify-content: space-between;\n  align-items: center;\n  height: 56px;\n  padding: 0 1.5rem;\n  display: flex;\n  position: sticky;\n  top: 0;\n}\n\n.header-left {\n  align-items: center;\n  gap: 1.5rem;\n  display: flex;\n}\n\n.logo {\n  color: var(--musea-accent);\n  align-items: center;\n  gap: .5rem;\n  font-size: 1.125rem;\n  font-weight: 700;\n  text-decoration: none;\n  display: flex;\n}\n\n.logo-svg {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n}\n\n.logo-icon svg {\n  width: 16px;\n  height: 16px;\n  color: var(--musea-text);\n}\n\n.header-subtitle {\n  color: var(--musea-text-muted);\n  border-left: 1px solid var(--musea-border);\n  padding-left: 1.5rem;\n  font-size: .8125rem;\n  font-weight: 500;\n}\n\n.search-container {\n  width: 280px;\n  position: relative;\n}\n\n.search-input {\n  background: var(--musea-bg-tertiary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-md);\n  width: 100%;\n  color: var(--musea-text);\n  transition: border-color var(--musea-transition),\n    background var(--musea-transition);\n  outline: none;\n  padding: .5rem .75rem .5rem 2.25rem;\n  font-size: .8125rem;\n}\n\n.search-input::placeholder {\n  color: var(--musea-text-muted);\n}\n\n.search-input:focus {\n  border-color: var(--musea-accent);\n  background: var(--musea-bg-elevated);\n}\n\n.search-icon {\n  color: var(--musea-text-muted);\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  left: .75rem;\n  transform: translateY(-50%);\n}\n\n.main {\n  grid-template-columns: 260px 1fr;\n  min-height: calc(100vh - 56px);\n  display: grid;\n}\n\n.sidebar {\n  background: var(--musea-bg-secondary);\n  border-right: 1px solid var(--musea-border);\n  overflow: hidden auto;\n}\n\n.sidebar::-webkit-scrollbar {\n  width: 6px;\n}\n\n.sidebar::-webkit-scrollbar-track {\n  background: none;\n}\n\n.sidebar::-webkit-scrollbar-thumb {\n  background: var(--musea-border);\n  border-radius: 3px;\n}\n\n.sidebar-section {\n  padding: .75rem;\n}\n\n.category-header {\n  text-transform: uppercase;\n  letter-spacing: .08em;\n  color: var(--musea-text-muted);\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--musea-radius-sm);\n  transition: background var(--musea-transition);\n  align-items: center;\n  gap: .5rem;\n  padding: .625rem .75rem;\n  font-size: .6875rem;\n  font-weight: 600;\n  display: flex;\n}\n\n.category-header:hover {\n  background: var(--musea-bg-tertiary);\n}\n\n.category-icon {\n  width: 16px;\n  height: 16px;\n  transition: transform var(--musea-transition);\n}\n\n.category-header.collapsed .category-icon {\n  transform: rotate(-90deg);\n}\n\n.category-count {\n  background: var(--musea-bg-tertiary);\n  border-radius: 4px;\n  margin-left: auto;\n  padding: .125rem .375rem;\n  font-size: .625rem;\n}\n\n.art-list {\n  margin-top: .25rem;\n  list-style: none;\n}\n\n.art-item {\n  border-radius: var(--musea-radius-sm);\n  cursor: pointer;\n  color: var(--musea-text-secondary);\n  transition: all var(--musea-transition);\n  align-items: center;\n  gap: .625rem;\n  padding: .5rem .75rem .5rem 1.75rem;\n  font-size: .8125rem;\n  display: flex;\n  position: relative;\n}\n\n.art-item:before {\n  content: \"\";\n  background: var(--musea-border);\n  width: 6px;\n  height: 6px;\n  transition: background var(--musea-transition);\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: .75rem;\n  transform: translateY(-50%);\n}\n\n.art-item:hover {\n  background: var(--musea-bg-tertiary);\n  color: var(--musea-text);\n}\n\n.art-item:hover:before {\n  background: var(--musea-text-muted);\n}\n\n.art-item.active {\n  background: var(--musea-accent-subtle);\n  color: var(--musea-accent-hover);\n}\n\n.art-item.active:before {\n  background: var(--musea-accent);\n}\n\n.art-variant-count {\n  color: var(--musea-text-muted);\n  opacity: 0;\n  transition: opacity var(--musea-transition);\n  margin-left: auto;\n  font-size: .6875rem;\n}\n\n.art-item:hover .art-variant-count {\n  opacity: 1;\n}\n\n.content {\n  background: var(--musea-bg-primary);\n  overflow-y: auto;\n}\n\n.content-inner {\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\n.content-header {\n  margin-bottom: 2rem;\n}\n\n.content-title {\n  margin-bottom: .5rem;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n\n.content-description {\n  color: var(--musea-text-muted);\n  max-width: 600px;\n  font-size: .9375rem;\n}\n\n.content-meta {\n  align-items: center;\n  gap: 1rem;\n  margin-top: 1rem;\n  display: flex;\n}\n\n.meta-tag {\n  background: var(--musea-bg-secondary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-sm);\n  color: var(--musea-text-muted);\n  align-items: center;\n  gap: .375rem;\n  padding: .25rem .625rem;\n  font-size: .75rem;\n  display: inline-flex;\n}\n\n.meta-tag svg {\n  width: 12px;\n  height: 12px;\n}\n";
+//#endregion
+//#region src/gallery/styles-components.css?inline
+var styles_components_default = ".gallery {\n  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n  gap: 1.25rem;\n  display: grid;\n}\n\n.variant-card {\n  background: var(--musea-bg-secondary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-lg);\n  overflow: hidden;\n}\n\n.variant-preview {\n  aspect-ratio: 16 / 7;\n  background: var(--musea-bg-tertiary);\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n}\n\n.variant-preview iframe {\n  border-radius: var(--musea-radius-md);\n  background: #fff;\n  border: none;\n  width: 70%;\n  max-width: 100%;\n  height: 100%;\n  max-height: 100%;\n  box-shadow: 0 12px 30px #0d0d0d1f;\n}\n\n.variant-preview-placeholder {\n  color: var(--musea-text-muted);\n  text-align: center;\n  padding: 1rem;\n  font-size: .8125rem;\n}\n\n.variant-preview-code {\n  color: var(--musea-text-muted);\n  background: var(--musea-bg-primary);\n  width: 100%;\n  max-height: 100%;\n  padding: 1rem;\n  font-family: JetBrains Mono, SF Mono, Fira Code, monospace;\n  font-size: .75rem;\n  overflow: auto;\n}\n\n.variant-info {\n  border-top: 1px solid var(--musea-border);\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n  display: flex;\n}\n\n.variant-name {\n  font-size: .875rem;\n  font-weight: 600;\n}\n\n.variant-badge {\n  text-transform: uppercase;\n  letter-spacing: .04em;\n  background: var(--musea-accent-subtle);\n  color: var(--musea-accent);\n  border-radius: 4px;\n  padding: .1875rem .5rem;\n  font-size: .625rem;\n  font-weight: 600;\n}\n\n.variant-actions {\n  gap: .5rem;\n  display: flex;\n}\n\n.variant-action-btn {\n  background: var(--musea-bg-tertiary);\n  border-radius: var(--musea-radius-sm);\n  width: 28px;\n  height: 28px;\n  color: var(--musea-text-muted);\n  cursor: pointer;\n  transition: all var(--musea-transition);\n  border: none;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.variant-action-btn:hover {\n  background: var(--musea-bg-elevated);\n  color: var(--musea-text);\n}\n\n.variant-action-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n.empty-state {\n  text-align: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  min-height: 400px;\n  padding: 2rem;\n  display: flex;\n}\n\n.empty-state-icon {\n  background: var(--musea-bg-secondary);\n  border-radius: var(--musea-radius-lg);\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n  margin-bottom: 1.5rem;\n  display: flex;\n}\n\n.empty-state-icon svg {\n  width: 40px;\n  height: 40px;\n  color: var(--musea-text-muted);\n}\n\n.empty-state-title {\n  margin-bottom: .5rem;\n  font-size: 1.125rem;\n  font-weight: 600;\n}\n\n.empty-state-text {\n  color: var(--musea-text-muted);\n  max-width: 300px;\n  font-size: .875rem;\n}\n\n.loading {\n  min-height: 200px;\n  color: var(--musea-text-muted);\n  justify-content: center;\n  align-items: center;\n  gap: .75rem;\n  display: flex;\n}\n\n.loading-spinner {\n  border: 2px solid var(--musea-border);\n  border-top-color: var(--musea-accent);\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  animation: .8s linear infinite spin;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (width <= 768px) {\n  .main {\n    grid-template-columns: 1fr;\n  }\n\n  .sidebar, .header-subtitle {\n    display: none;\n  }\n}\n";
+//#endregion
+//#region src/gallery/styles.ts
+/**
+* CSS theme variables and style definitions for the Musea gallery.
+*
+* CSS is split into separate .css files and imported as text
+* via tsdown's `?inline` support.
+*/
+/**
+* Generate the full gallery CSS styles string.
+*/
+function generateGalleryStyles() {
+	return `${styles_base_default}\n${styles_layout_default}\n${styles_components_default}`;
+}
+//#endregion
+//#region src/gallery/template.ts
+/**
+* HTML structure and inline JS generation for the Musea gallery.
+*
+* Extracted from gallery.ts to keep file sizes manageable.
+*/
+/**
+* Generate the gallery HTML body (header, sidebar, content, and inline script).
+*/
+function generateGalleryBody(basePath) {
+	return `
+  <header class="header">
+    <div class="header-left">
+      <a href="${basePath}" class="logo">
+        <svg class="logo-svg" width="32" height="32" viewBox="0 0 200 200" fill="none">
+          <g transform="translate(30, 25) scale(1.2)">
+            <g transform="translate(15, 10) skewX(-15)">
+              <path d="M 65 0 L 40 60 L 70 20 L 65 0 Z" fill="currentColor"/>
+              <path d="M 20 0 L 40 60 L 53 13 L 20 0 Z" fill="currentColor"/>
+            </g>
+          </g>
+          <g transform="translate(110, 120)">
+            <line x1="5" y1="10" x2="5" y2="50" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
+            <line x1="60" y1="10" x2="60" y2="50" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
+            <path d="M 0 10 L 32.5 0 L 65 10" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <rect x="15" y="18" width="14" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.7"/>
+            <rect x="36" y="18" width="14" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.7"/>
+            <rect x="23" y="35" width="18" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.6"/>
+          </g>
+        </svg>
+        Musea
+      </a>
+      <span class="header-subtitle">Component Gallery</span>
+    </div>
+    <div class="search-container">
+      <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+      </svg>
+      <input type="text" class="search-input" placeholder="Search components..." id="search">
+    </div>
+  </header>
+
+  <main class="main">
+    <aside class="sidebar" id="sidebar">
+      <div class="loading">
+        <div class="loading-spinner"></div>
+        Loading...
+      </div>
+    </aside>
+    <section class="content" id="content">
+      <div class="empty-state">
+        <div class="empty-state-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M4 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5Z"/>
+            <path d="M4 13a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6Z"/>
+            <path d="M16 13a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-6Z"/>
+          </svg>
+        </div>
+        <div class="empty-state-title">Select a component</div>
+        <div class="empty-state-text">Choose a component from the sidebar to view its variants and documentation</div>
+      </div>
+    </section>
+  </main>`;
+}
+/**
+* Generate the gallery inline script (SPA logic).
+*/
+function generateGalleryScript(basePath) {
+	return `
+    const basePath = '${basePath}';
+    let arts = [];
+    let selectedArt = null;
+    let searchQuery = '';
+
+    async function loadArts() {
+      try {
+        const res = await fetch(basePath + '/api/arts');
+        arts = await res.json();
+        renderSidebar();
+      } catch (e) {
+        console.error('Failed to load arts:', e);
+        document.getElementById('sidebar').innerHTML = '<div class="loading">Failed to load</div>';
+      }
+    }
+
+    function renderSidebar() {
+      const sidebar = document.getElementById('sidebar');
+      const categories = {};
+
+      const filtered = searchQuery
+        ? arts.filter(a => a.metadata.title.toLowerCase().includes(searchQuery.toLowerCase()))
+        : arts;
+
+      for (const art of filtered) {
+        const cat = art.metadata.category || 'Components';
+        if (!categories[cat]) categories[cat] = [];
+        categories[cat].push(art);
+      }
+
+      if (Object.keys(categories).length === 0) {
+        sidebar.innerHTML = '<div class="sidebar-section"><div class="loading">No components found</div></div>';
+        return;
+      }
+
+      let html = '';
+      for (const [category, items] of Object.entries(categories)) {
+        html += '<div class="sidebar-section">';
+        html += '<div class="category-header" data-category="' + category + '">';
+        html += '<svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>';
+        html += '<span>' + category + '</span>';
+        html += '<span class="category-count">' + items.length + '</span>';
+        html += '</div>';
+        html += '<ul class="art-list" data-category="' + category + '">';
+        for (const art of items) {
+          const active = selectedArt?.path === art.path ? 'active' : '';
+          const variantCount = art.variants?.length || 0;
+          html += '<li class="art-item ' + active + '" data-path="' + art.path + '">';
+          html += '<span>' + escapeHtml(art.metadata.title) + '</span>';
+          html += '<span class="art-variant-count">' + variantCount + ' variant' + (variantCount !== 1 ? 's' : '') + '</span>';
+          html += '</li>';
+        }
+        html += '</ul>';
+        html += '</div>';
+      }
+
+      sidebar.innerHTML = html;
+
+      sidebar.querySelectorAll('.art-item').forEach(item => {
+        item.addEventListener('click', () => {
+          const artPath = item.dataset.path;
+          selectedArt = arts.find(a => a.path === artPath);
+          renderSidebar();
+          renderContent();
+        });
+      });
+
+      sidebar.querySelectorAll('.category-header').forEach(header => {
+        header.addEventListener('click', () => {
+          header.classList.toggle('collapsed');
+          const list = sidebar.querySelector('.art-list[data-category="' + header.dataset.category + '"]');
+          if (list) list.style.display = header.classList.contains('collapsed') ? 'none' : 'block';
+        });
+      });
+    }
+
+    function renderContent() {
+      const content = document.getElementById('content');
+      if (!selectedArt) {
+        content.innerHTML = \`
+          <div class="empty-state">
+            <div class="empty-state-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M4 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5Z"/>
+                <path d="M4 13a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6Z"/>
+                <path d="M16 13a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-6Z"/>
+              </svg>
+            </div>
+            <div class="empty-state-title">Select a component</div>
+            <div class="empty-state-text">Choose a component from the sidebar to view its variants</div>
+          </div>
+        \`;
+        return;
+      }
+
+      const meta = selectedArt.metadata;
+      const tags = meta.tags || [];
+      const variantCount = selectedArt.variants?.length || 0;
+
+      let html = '<div class="content-inner">';
+      html += '<div class="content-header">';
+      html += '<h1 class="content-title">' + escapeHtml(meta.title) + '</h1>';
+      if (meta.description) {
+        html += '<p class="content-description">' + escapeHtml(meta.description) + '</p>';
+      }
+      html += '<div class="content-meta">';
+      html += '<span class="meta-tag"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>' + variantCount + ' variant' + (variantCount !== 1 ? 's' : '') + '</span>';
+      if (meta.category) {
+        html += '<span class="meta-tag"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>' + escapeHtml(meta.category) + '</span>';
+      }
+      for (const tag of tags) {
+        html += '<span class="meta-tag">#' + escapeHtml(tag) + '</span>';
+      }
+      html += '</div>';
+      html += '</div>';
+
+      html += '<div class="gallery">';
+      for (const variant of selectedArt.variants) {
+        const previewUrl = basePath + '/preview?art=' + encodeURIComponent(selectedArt.path) + '&variant=' + encodeURIComponent(variant.name);
+
+        html += '<div class="variant-card">';
+        html += '<div class="variant-preview">';
+        html += '<iframe src="' + previewUrl + '" loading="lazy" title="' + escapeHtml(variant.name) + '"></iframe>';
+        html += '</div>';
+        html += '<div class="variant-info">';
+        html += '<div>';
+        html += '<span class="variant-name">' + escapeHtml(variant.name) + '</span>';
+        if (variant.isDefault) html += ' <span class="variant-badge">Default</span>';
+        html += '</div>';
+        html += '<div class="variant-actions">';
+        html += '<button class="variant-action-btn" title="Open in new tab" onclick="window.open(\\'' + previewUrl + '\\', \\'_blank\\')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></button>';
+        html += '</div>';
+        html += '</div>';
+        html += '</div>';
+      }
+      html += '</div>';
+      html += '</div>';
+
+      content.innerHTML = html;
+    }
+
+    function escapeHtml(str) {
+      if (!str) return '';
+      return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+
+    // Search
+    document.getElementById('search').addEventListener('input', (e) => {
+      searchQuery = e.target.value;
+      renderSidebar();
+    });
+
+    // Keyboard shortcut for search
+    document.addEventListener('keydown', (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        document.getElementById('search').focus();
+      }
+    });
+
+    loadArts();`;
+}
+//#endregion
+//#region src/gallery/index.ts
+/**
+* Gallery HTML generation for the Musea component gallery.
+*
+* Contains the inline gallery SPA template (used as a fallback when the
+* pre-built gallery is not available) and the gallery virtual module.
+*/
+/**
+* Generate the inline gallery HTML page.
+*/
+function generateGalleryHtml(basePath, themeConfig) {
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Musea - Component Gallery</title>
+  <script>window.__MUSEA_BASE_PATH__='${basePath}';${themeConfig ? `window.__MUSEA_THEME_CONFIG__=${JSON.stringify(themeConfig)};` : ""}<\/script>
+  <style>${generateGalleryStyles()}
+  </style>
+</head>
+<body>${generateGalleryBody(basePath)}
+
+  <script type="module">${generateGalleryScript(basePath)}
+  <\/script>
+</body>
+</html>`;
+}
+/**
+* Generate the virtual gallery module code.
+*/
+function generateGalleryModule(basePath) {
+	return `
+export const basePath = '${basePath}';
+export async function loadArts() {
+  const res = await fetch(basePath + '/api/arts');
+  return res.json();
+}
+`;
+}
+//#endregion
+//#region src/preview/addons.ts
+/**
+* Addon initialization code for Musea preview iframes.
+*
+* Contains DOM event capture, measure overlay, and message handler logic
+* injected into preview modules.
+*
+* Extracted from preview.ts to keep file sizes manageable.
+*/
+/**
+* Addon initialization code injected into preview iframe modules.
+* Shared between generatePreviewModule and generatePreviewModuleWithProps.
+*/
+const MUSEA_ADDONS_INIT_CODE = `
+function __museaInitAddons(container, variantName, extraCaptureEvents = []) {
+  // === DOM event capture ===
+  // Note: wheel and hover-style events are excluded by default because they are too noisy.
+  const BASE_CAPTURE_EVENTS = ['click','dblclick','input','change','submit','focus','blur','keydown','keyup','mousedown','mouseup','contextmenu','pointerdown','pointerup'];
+  const CAPTURE_EVENTS = [...new Set([
+    ...BASE_CAPTURE_EVENTS,
+    ...((Array.isArray(extraCaptureEvents) ? extraCaptureEvents : [])
+      .filter((eventName) => typeof eventName === 'string')
+      .map((eventName) => eventName.trim())
+      .filter(Boolean))
+  ])];
+  for (const evt of CAPTURE_EVENTS) {
+    container.addEventListener(evt, (e) => {
+      // Extract raw event properties
+      const rawEvent = {
+        type: e.type,
+        bubbles: e.bubbles,
+        cancelable: e.cancelable,
+        composed: e.composed,
+        defaultPrevented: e.defaultPrevented,
+        eventPhase: e.eventPhase,
+        isTrusted: e.isTrusted,
+        timeStamp: e.timeStamp,
+      };
+      // Mouse/Pointer event properties
+      if ('clientX' in e) {
+        rawEvent.clientX = e.clientX;
+        rawEvent.clientY = e.clientY;
+        rawEvent.screenX = e.screenX;
+        rawEvent.screenY = e.screenY;
+        rawEvent.pageX = e.pageX;
+        rawEvent.pageY = e.pageY;
+        rawEvent.offsetX = e.offsetX;
+        rawEvent.offsetY = e.offsetY;
+        rawEvent.button = e.button;
+        rawEvent.buttons = e.buttons;
+        rawEvent.altKey = e.altKey;
+        rawEvent.ctrlKey = e.ctrlKey;
+        rawEvent.metaKey = e.metaKey;
+        rawEvent.shiftKey = e.shiftKey;
+      }
+      // Keyboard event properties
+      if ('key' in e) {
+        rawEvent.key = e.key;
+        rawEvent.code = e.code;
+        rawEvent.repeat = e.repeat;
+        rawEvent.altKey = e.altKey;
+        rawEvent.ctrlKey = e.ctrlKey;
+        rawEvent.metaKey = e.metaKey;
+        rawEvent.shiftKey = e.shiftKey;
+      }
+      // Input event properties
+      if ('inputType' in e) {
+        rawEvent.inputType = e.inputType;
+        rawEvent.data = e.data;
+      }
+      // Wheel event properties
+      if ('deltaX' in e) {
+        rawEvent.deltaX = e.deltaX;
+        rawEvent.deltaY = e.deltaY;
+        rawEvent.deltaZ = e.deltaZ;
+        rawEvent.deltaMode = e.deltaMode;
+      }
+      const payload = {
+        name: e.type,
+        target: e.target?.tagName,
+        timestamp: Date.now(),
+        source: 'dom',
+        rawEvent,
+        variantName
+      };
+      if (e.target && 'value' in e.target) {
+        payload.value = e.target.value;
+      }
+      window.parent.postMessage({ type: 'musea:event', payload }, '*');
+    }, true);
+  }
+
+  // === Message handler for parent commands ===
+  let measureActive = false;
+  let measureOverlay = null;
+  let measureLabel = null;
+
+  function toggleStyleById(id, enabled, css) {
+    let el = document.getElementById(id);
+    if (enabled) {
+      if (!el) {
+        el = document.createElement('style');
+        el.id = id;
+        el.textContent = css;
+        document.head.appendChild(el);
+      }
+    } else {
+      if (el) el.remove();
+    }
+  }
+
+  function createMeasureOverlay() {
+    if (measureOverlay) return;
+    measureOverlay = document.createElement('div');
+    measureOverlay.id = 'musea-measure-overlay';
+    measureOverlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99999;';
+    document.body.appendChild(measureOverlay);
+
+    measureLabel = document.createElement('div');
+    measureLabel.className = 'musea-measure-label';
+    measureLabel.style.cssText = 'position:fixed;background:#333;color:#fff;font-size:11px;padding:2px 6px;border-radius:3px;pointer-events:none;z-index:100000;display:none;';
+    document.body.appendChild(measureLabel);
+  }
+
+  function removeMeasureOverlay() {
+    if (measureOverlay) { measureOverlay.remove(); measureOverlay = null; }
+    if (measureLabel) { measureLabel.remove(); measureLabel = null; }
+  }
+
+  function onMeasureMouseMove(e) {
+    if (!measureActive || !measureOverlay) return;
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    if (!el || el === measureOverlay || el === measureLabel) return;
+
+    const rect = el.getBoundingClientRect();
+    const cs = getComputedStyle(el);
+    const mt = parseFloat(cs.marginTop) || 0;
+    const mr = parseFloat(cs.marginRight) || 0;
+    const mb = parseFloat(cs.marginBottom) || 0;
+    const ml = parseFloat(cs.marginLeft) || 0;
+    const bt = parseFloat(cs.borderTopWidth) || 0;
+    const br = parseFloat(cs.borderRightWidth) || 0;
+    const bb = parseFloat(cs.borderBottomWidth) || 0;
+    const blw = parseFloat(cs.borderLeftWidth) || 0;
+    const pt = parseFloat(cs.paddingTop) || 0;
+    const pr = parseFloat(cs.paddingRight) || 0;
+    const pb = parseFloat(cs.paddingBottom) || 0;
+    const pl = parseFloat(cs.paddingLeft) || 0;
+
+    const cw = rect.width - blw - br - pl - pr;
+    const ch = rect.height - bt - bb - pt - pb;
+
+    measureOverlay.innerHTML = ''
+      // Margin
+      + '<div style="position:fixed;background:rgba(255,165,0,0.3);'
+      + 'left:' + (rect.left - ml) + 'px;top:' + (rect.top - mt) + 'px;'
+      + 'width:' + (rect.width + ml + mr) + 'px;height:' + mt + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,165,0,0.3);'
+      + 'left:' + (rect.left - ml) + 'px;top:' + (rect.bottom) + 'px;'
+      + 'width:' + (rect.width + ml + mr) + 'px;height:' + mb + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,165,0,0.3);'
+      + 'left:' + (rect.left - ml) + 'px;top:' + rect.top + 'px;'
+      + 'width:' + ml + 'px;height:' + rect.height + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,165,0,0.3);'
+      + 'left:' + rect.right + 'px;top:' + rect.top + 'px;'
+      + 'width:' + mr + 'px;height:' + rect.height + 'px;"></div>'
+      // Border
+      + '<div style="position:fixed;background:rgba(255,255,0,0.3);'
+      + 'left:' + rect.left + 'px;top:' + rect.top + 'px;'
+      + 'width:' + rect.width + 'px;height:' + bt + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,255,0,0.3);'
+      + 'left:' + rect.left + 'px;top:' + (rect.bottom - bb) + 'px;'
+      + 'width:' + rect.width + 'px;height:' + bb + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,255,0,0.3);'
+      + 'left:' + rect.left + 'px;top:' + (rect.top + bt) + 'px;'
+      + 'width:' + blw + 'px;height:' + (rect.height - bt - bb) + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,255,0,0.3);'
+      + 'left:' + (rect.right - br) + 'px;top:' + (rect.top + bt) + 'px;'
+      + 'width:' + br + 'px;height:' + (rect.height - bt - bb) + 'px;"></div>'
+      // Padding
+      + '<div style="position:fixed;background:rgba(144,238,144,0.3);'
+      + 'left:' + (rect.left + blw) + 'px;top:' + (rect.top + bt) + 'px;'
+      + 'width:' + (rect.width - blw - br) + 'px;height:' + pt + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(144,238,144,0.3);'
+      + 'left:' + (rect.left + blw) + 'px;top:' + (rect.bottom - bb - pb) + 'px;'
+      + 'width:' + (rect.width - blw - br) + 'px;height:' + pb + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(144,238,144,0.3);'
+      + 'left:' + (rect.left + blw) + 'px;top:' + (rect.top + bt + pt) + 'px;'
+      + 'width:' + pl + 'px;height:' + (rect.height - bt - bb - pt - pb) + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(144,238,144,0.3);'
+      + 'left:' + (rect.right - br - pr) + 'px;top:' + (rect.top + bt + pt) + 'px;'
+      + 'width:' + pr + 'px;height:' + (rect.height - bt - bb - pt - pb) + 'px;"></div>'
+      // Content
+      + '<div style="position:fixed;background:rgba(100,149,237,0.3);'
+      + 'left:' + (rect.left + blw + pl) + 'px;top:' + (rect.top + bt + pt) + 'px;'
+      + 'width:' + cw + 'px;height:' + ch + 'px;"></div>';
+
+    // Label
+    measureLabel.textContent = Math.round(rect.width) + ' x ' + Math.round(rect.height);
+    measureLabel.style.display = 'block';
+    measureLabel.style.left = (rect.right + 8) + 'px';
+    measureLabel.style.top = rect.top + 'px';
+  }
+
+  window.addEventListener('message', (e) => {
+    if (!e.data?.type?.startsWith('musea:')) return;
+    const { type, payload } = e.data;
+    switch (type) {
+      case 'musea:set-background': {
+        if (payload.pattern === 'checkerboard') {
+          document.body.style.background = '';
+          document.body.classList.add('musea-bg-checkerboard');
+        } else {
+          document.body.classList.remove('musea-bg-checkerboard');
+          document.body.style.background = payload.color || '';
+        }
+        break;
+      }
+      case 'musea:toggle-outline': {
+        toggleStyleById('musea-outline', payload.enabled,
+          '* { outline: 1px solid rgba(255, 0, 0, 0.3) !important; }');
+        break;
+      }
+      case 'musea:toggle-measure': {
+        measureActive = payload.enabled;
+        if (measureActive) {
+          createMeasureOverlay();
+          document.addEventListener('mousemove', onMeasureMouseMove);
+        } else {
+          document.removeEventListener('mousemove', onMeasureMouseMove);
+          removeMeasureOverlay();
+        }
+        break;
+      }
+      case 'musea:set-props': {
+        // Store props for remount - handled by preview module
+        if (window.__museaSetProps) {
+          window.__museaSetProps(payload.props || {});
+        }
+        break;
+      }
+      case 'musea:set-slots': {
+        // Store slots for remount - handled by preview module
+        if (window.__museaSetSlots) {
+          window.__museaSetSlots(payload.slots || {});
+        }
+        break;
+      }
+      case 'musea:run-a11y': {
+        // Run axe-core a11y test
+        const requestId = typeof payload?.requestId === 'string' ? payload.requestId : undefined;
+        (async () => {
+          try {
+            // Dynamically load axe-core from local vendor route if not already loaded
+            if (!window.axe) {
+              const script = document.createElement('script');
+              const _basePath = location.pathname.replace(/\\/preview$/, '');
+              script.src = _basePath + '/vendor/axe-core.min.js';
+              await new Promise((resolve, reject) => {
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+              });
+            }
+            // Run axe-core on the .musea-variant container only (not the full document)
+            const context = document.querySelector('.musea-variant') || document;
+            const results = await window.axe.run(context, {
+              // Run all rules without restrictions for comprehensive testing
+              resultTypes: ['violations', 'incomplete', 'passes']
+            });
+            window.parent.postMessage({
+              type: 'musea:a11y-result',
+              payload: {
+                requestId,
+                violations: results.violations.map(v => ({
+                  id: v.id,
+                  impact: v.impact,
+                  description: v.description,
+                  helpUrl: v.helpUrl,
+                  nodes: v.nodes.map(n => ({
+                    html: n.html,
+                    target: n.target,
+                    failureSummary: n.failureSummary
+                  }))
+                })),
+                passes: results.passes.length,
+                incomplete: results.incomplete.length
+              }
+            }, '*');
+          } catch (err) {
+            window.parent.postMessage({
+              type: 'musea:a11y-result',
+              payload: {
+                requestId,
+                error: err instanceof Error ? err.message : String(err),
+                violations: [],
+                passes: 0,
+                incomplete: 0
+              }
+            }, '*');
+          }
+        })();
+        break;
+      }
+    }
+  });
+
+  // Notify parent that iframe is ready
+  window.parent.postMessage({ type: 'musea:ready', payload: {} }, '*');
+}
+`;
+//#endregion
+//#region src/preview/html.ts
+function generatePreviewHtml(art, variant, _basePath, viteBase) {
+	const previewModuleUrl = `${_basePath}/preview-module?art=${encodeURIComponent(art.path)}&variant=${encodeURIComponent(variant.name)}`;
+	const base = (viteBase || "/").replace(/\/$/, "");
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(art.metadata.title)} - ${escapeHtml(variant.name)}</title>
+  <script type="module" src="${base}/@vite/client"><\/script>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --musea-preview-padding: clamp(1rem, 2vw, 1.5rem);
+    }
+    html, body {
+      width: 100%;
+      height: 100%;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #ffffff;
+      padding: var(--musea-preview-padding);
+      overflow: auto;
+    }
+    .musea-variant {
+      width: 100%;
+      min-height: calc(100vh - (var(--musea-preview-padding) * 2));
+    }
+    .musea-error {
+      color: #dc2626;
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 8px;
+      padding: 1rem;
+      font-size: 0.875rem;
+      max-width: 400px;
+    }
+    .musea-error-title {
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+    .musea-error pre {
+      font-family: monospace;
+      font-size: 0.75rem;
+      white-space: pre-wrap;
+      word-break: break-all;
+      margin-top: 0.5rem;
+      padding: 0.5rem;
+      background: #fff;
+      border-radius: 4px;
+    }
+    .musea-loading {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      color: #6b7280;
+      font-size: 0.875rem;
+    }
+    .musea-spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid #e5e7eb;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* Musea Addons: Checkerboard background for transparent mode */
+    .musea-bg-checkerboard {
+      background-image:
+        linear-gradient(45deg, #ccc 25%, transparent 25%),
+        linear-gradient(-45deg, #ccc 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #ccc 75%),
+        linear-gradient(-45deg, transparent 75%, #ccc 75%) !important;
+      background-size: 20px 20px !important;
+      background-position: 0 0, 0 10px, 10px -10px, -10px 0 !important;
+    }
+
+    /* Musea Addons: Measure label */
+    .musea-measure-label {
+      position: fixed;
+      background: #333;
+      color: #fff;
+      font-size: 11px;
+      padding: 2px 6px;
+      border-radius: 3px;
+      pointer-events: none;
+      z-index: 100000;
+    }
+  </style>
+</head>
+<body>
+  <div id="app" class="musea-variant" data-art="${escapeHtml(art.path)}" data-variant="${escapeHtml(variant.name)}">
+    <div class="musea-loading">
+      <div class="musea-spinner"></div>
+      Loading component...
+    </div>
+  </div>
+  <script type="module" src="${previewModuleUrl}"><\/script>
+</body>
+</html>`;
+}
+//#endregion
+//#region src/preview/index.ts
+function generatePreviewModule(art, variantComponentName, variantName, cssImports = [], previewSetup = null) {
+	const artModuleId = `virtual:musea-art:${art.path}`;
+	const escapedVariantName = escapeTemplate(variantName);
+	const cssImportStatements = cssImports.map((cssPath) => `import '${cssPath}';`).join("\n");
+	const setupImport = previewSetup ? `import __museaPreviewSetup from '${previewSetup}';` : "";
+	const setupCall = previewSetup ? "await __museaPreviewSetup(app);" : "";
+	const actionEvents = JSON.stringify(art.metadata.actionEvents ?? []);
+	return `
+${cssImportStatements}
+${setupImport}
+import { createApp, reactive, h } from 'vue';
+import * as artModule from '${artModuleId}';
+
+const container = document.getElementById('app');
+
+${MUSEA_ADDONS_INIT_CODE}
+
+let currentApp = null;
+const propsOverride = reactive({});
+const slotsOverride = reactive({ default: '' });
+
+function ensureArtStyles(styles) {
+  const styleId = '${`musea-art-styles-${art.path.replace(/[^\w-]+/g, "_")}`}';
+  const existing = document.getElementById(styleId);
+
+  if (!Array.isArray(styles) || styles.length === 0) {
+    existing?.remove();
+    return;
+  }
+
+  const tag = existing ?? document.createElement('style');
+  tag.id = styleId;
+  tag.textContent = styles.join('\\n\\n');
+
+  if (!existing) {
+    document.head.appendChild(tag);
+  }
+}
+
+window.__museaSetProps = (props) => {
+  // Clear old keys
+  for (const key of Object.keys(propsOverride)) {
+    delete propsOverride[key];
+  }
+  Object.assign(propsOverride, props);
+};
+
+window.__museaSetSlots = (slots) => {
+  for (const key of Object.keys(slotsOverride)) {
+    delete slotsOverride[key];
+  }
+  Object.assign(slotsOverride, slots);
+};
+
+async function mount() {
+  try {
+    // Get the specific variant component
+    const VariantComponent = artModule['${variantComponentName}'];
+    const RawComponent = artModule.__component__;
+
+    if (!VariantComponent) {
+      throw new Error('Variant component "${variantComponentName}" not found in art module');
+    }
+
+    // Create and mount the app
+    const app = createApp(VariantComponent);
+    ensureArtStyles(artModule.__styles__);
+    ${setupCall}
+    container.innerHTML = '';
+    container.className = 'musea-variant';
+    app.mount(container);
+    currentApp = app;
+
+    console.log('[musea-preview] Mounted variant: ${escapedVariantName}');
+    __museaInitAddons(container, '${escapedVariantName}', ${actionEvents});
+
+    // Override set-props to remount with raw component + props
+    const TargetComponent = RawComponent || VariantComponent;
+    window.__museaSetProps = (props) => {
+      for (const key of Object.keys(propsOverride)) {
+        delete propsOverride[key];
+      }
+      Object.assign(propsOverride, props);
+      remountWithProps(TargetComponent);
+    };
+    window.__museaSetSlots = (slots) => {
+      for (const key of Object.keys(slotsOverride)) {
+        delete slotsOverride[key];
+      }
+      Object.assign(slotsOverride, slots);
+      remountWithProps(TargetComponent);
+    };
+  } catch (error) {
+    console.error('[musea-preview] Failed to mount:', error);
+    container.innerHTML = \`
+      <div class="musea-error">
+        <div class="musea-error-title">Failed to render component</div>
+        <div>\${error.message}</div>
+        <pre>\${error.stack || ''}</pre>
+      </div>
+    \`;
+  }
+}
+
+async function remountWithProps(Component) {
+  if (currentApp) {
+    currentApp.unmount();
+  }
+  const app = createApp({
+    setup() {
+      return () => {
+        const slotFns = {};
+        for (const [name, content] of Object.entries(slotsOverride)) {
+          if (content) slotFns[name] = () => h('span', { innerHTML: content });
+        }
+        return h(Component, { ...propsOverride }, slotFns);
+      };
+    }
+  });
+  ensureArtStyles(artModule.__styles__);
+  ${setupCall}
+  container.innerHTML = '';
+  app.mount(container);
+  currentApp = app;
+}
+
+mount();
+`;
+}
+function generatePreviewModuleWithProps(art, variantComponentName, variantName, propsOverride, cssImports = [], previewSetup = null) {
+	const artModuleId = `virtual:musea-art:${art.path}`;
+	const escapedVariantName = escapeTemplate(variantName);
+	const propsJson = JSON.stringify(propsOverride);
+	const cssImportStatements = cssImports.map((cssPath) => `import '${cssPath}';`).join("\n");
+	const setupImport = previewSetup ? `import __museaPreviewSetup from '${previewSetup}';` : "";
+	const setupCall = previewSetup ? "await __museaPreviewSetup(app);" : "";
+	const actionEvents = JSON.stringify(art.metadata.actionEvents ?? []);
+	return `
+${cssImportStatements}
+${setupImport}
+import { createApp, h } from 'vue';
+import * as artModule from '${artModuleId}';
+
+const container = document.getElementById('app');
+const propsOverride = ${propsJson};
+
+${MUSEA_ADDONS_INIT_CODE}
+
+function ensureArtStyles(styles) {
+  const styleId = '${`musea-art-styles-${art.path.replace(/[^\w-]+/g, "_")}`}';
+  const existing = document.getElementById(styleId);
+
+  if (!Array.isArray(styles) || styles.length === 0) {
+    existing?.remove();
+    return;
+  }
+
+  const tag = existing ?? document.createElement('style');
+  tag.id = styleId;
+  tag.textContent = styles.join('\\n\\n');
+
+  if (!existing) {
+    document.head.appendChild(tag);
+  }
+}
+
+async function mount() {
+  try {
+    const VariantComponent = artModule['${variantComponentName}'];
+    if (!VariantComponent) {
+      throw new Error('Variant component "${variantComponentName}" not found');
+    }
+
+    const WrappedComponent = {
+      render() {
+        return h(VariantComponent, propsOverride);
+      }
+    };
+
+    const app = createApp(WrappedComponent);
+    ensureArtStyles(artModule.__styles__);
+    ${setupCall}
+    container.innerHTML = '';
+    container.className = 'musea-variant';
+    app.mount(container);
+    console.log('[musea-preview] Mounted variant: ${escapedVariantName} with props override');
+    __museaInitAddons(container, '${escapedVariantName}', ${actionEvents});
+  } catch (error) {
+    console.error('[musea-preview] Failed to mount:', error);
+    container.innerHTML = '<div class="musea-error"><div class="musea-error-title">Failed to render</div><div>' + error.message + '</div></div>';
+  }
+}
+
+mount();
+`;
+}
+//#endregion
+//#region src/server-middleware.ts
+const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+function resolveGalleryDistDir() {
+	return path.resolve(moduleDir, "gallery");
+}
+function resolveGallerySourceDir() {
+	return path.resolve(moduleDir, "../gallery");
+}
+function toViteFsPath(filePath) {
+	return encodeURI(`/@fs${filePath.split(path.sep).join("/")}`);
+}
+async function tryLoadSourceGalleryHtml(devServer, url, basePath, themeConfig) {
+	const gallerySourceDir = resolveGallerySourceDir();
+	const indexHtmlPath = path.join(gallerySourceDir, "index.html");
+	try {
+		await fs.promises.access(indexHtmlPath);
+	} catch {
+		return null;
+	}
+	const sourceEntryPath = toViteFsPath(path.join(gallerySourceDir, "main.ts"));
+	const themeScript = themeConfig ? `window.__MUSEA_THEME_CONFIG__=${JSON.stringify(themeConfig)};` : "";
+	let html = await fs.promises.readFile(indexHtmlPath, "utf-8");
+	html = html.replace("src=\"./main.ts\"", `src="${sourceEntryPath}"`);
+	html = html.replace("</head>", `<script>window.__MUSEA_BASE_PATH__='${basePath}';${themeScript}<\/script></head>`);
+	return devServer.transformIndexHtml(url, html);
+}
+/**
+* Register all Musea middleware on the given dev server.
+*
+* This sets up:
+* - Gallery SPA route (serves built SPA or inline HTML fallback)
+* - Gallery static assets (/assets/)
+* - axe-core vendor script
+* - Preview module route
+* - VRT preview route
+* - Art module route
+*/
+function registerMiddleware(devServer, ctx) {
+	const { basePath, themeConfig, artFiles } = ctx;
+	devServer.middlewares.use(basePath, async (req, res, next) => {
+		const url = req.url || "/";
+		if (url === "/" || url === "/index.html" || url.startsWith("/tokens") || url.startsWith("/component/") || url.startsWith("/tests")) {
+			const galleryDistDir = resolveGalleryDistDir();
+			const indexHtmlPath = path.join(galleryDistDir, "index.html");
+			try {
+				await fs.promises.access(indexHtmlPath);
+				let html = await fs.promises.readFile(indexHtmlPath, "utf-8");
+				const themeScript = themeConfig ? `window.__MUSEA_THEME_CONFIG__=${JSON.stringify(themeConfig)};` : "";
+				html = html.replace("</head>", `<script>window.__MUSEA_BASE_PATH__='${basePath}';${themeScript}<\/script></head>`);
+				res.setHeader("Content-Type", "text/html");
+				res.end(html);
+				return;
+			} catch {
+				const sourceHtml = await tryLoadSourceGalleryHtml(devServer, url, basePath, themeConfig);
+				if (sourceHtml) {
+					res.setHeader("Content-Type", "text/html");
+					res.end(sourceHtml);
+					return;
+				}
+				const html = generateGalleryHtml(basePath, themeConfig);
+				res.setHeader("Content-Type", "text/html");
+				res.end(html);
+				return;
+			}
+		}
+		if (url.startsWith("/assets/")) {
+			const galleryDistDir = resolveGalleryDistDir();
+			const filePath = path.join(galleryDistDir, url);
+			try {
+				if ((await fs.promises.stat(filePath)).isFile()) {
+					const content = await fs.promises.readFile(filePath);
+					const ext = path.extname(filePath);
+					res.setHeader("Content-Type", {
+						".js": "application/javascript",
+						".css": "text/css",
+						".svg": "image/svg+xml",
+						".png": "image/png",
+						".ico": "image/x-icon",
+						".woff2": "font/woff2",
+						".woff": "font/woff"
+					}[ext] || "application/octet-stream");
+					res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
+					res.end(content);
+					return;
+				}
+			} catch {}
+		}
+		next();
+	});
+	devServer.middlewares.use(`${basePath}/vendor/axe-core.min.js`, async (_req, res, _next) => {
+		try {
+			const axeCorePath = createRequire(import.meta.url).resolve("axe-core/axe.min.js");
+			const content = await fs.promises.readFile(axeCorePath, "utf-8");
+			res.setHeader("Content-Type", "application/javascript");
+			res.setHeader("Cache-Control", "public, max-age=86400");
+			res.end(content);
+		} catch {
+			res.statusCode = 404;
+			res.end("axe-core not installed");
+		}
+	});
+	devServer.middlewares.use(`${basePath}/preview-module`, async (req, res, _next) => {
+		const url = new URL(req.url || "", `http://localhost`);
+		const artPath = url.searchParams.get("art");
+		const variantName = url.searchParams.get("variant");
+		if (!artPath || !variantName) {
+			res.statusCode = 400;
+			res.end("Missing art or variant parameter");
+			return;
+		}
+		const art = artFiles.get(artPath);
+		if (!art) {
+			res.statusCode = 404;
+			res.end("Art not found");
+			return;
+		}
+		const variant = art.variants.find((v) => v.name === variantName);
+		if (!variant) {
+			res.statusCode = 404;
+			res.end("Variant not found");
+			return;
+		}
+		const moduleCode = generatePreviewModule(art, toPascalCase(variant.name), variant.name, ctx.resolvedPreviewCss, ctx.resolvedPreviewSetup);
+		try {
+			const result = await devServer.transformRequest(`virtual:musea-preview:${artPath}:${variantName}`);
+			if (result) {
+				res.setHeader("Content-Type", "application/javascript");
+				res.setHeader("Cache-Control", "no-cache");
+				res.end(result.code);
+				return;
+			}
+		} catch {}
+		res.setHeader("Content-Type", "application/javascript");
+		res.setHeader("Cache-Control", "no-cache");
+		res.end(moduleCode);
+	});
+	devServer.middlewares.use(`${basePath}/preview`, async (req, res, _next) => {
+		const url = new URL(req.url || "", `http://localhost`);
+		const artPath = url.searchParams.get("art");
+		const variantName = url.searchParams.get("variant");
+		if (!artPath || !variantName) {
+			res.statusCode = 400;
+			res.end("Missing art or variant parameter");
+			return;
+		}
+		const art = artFiles.get(artPath);
+		if (!art) {
+			res.statusCode = 404;
+			res.end("Art not found");
+			return;
+		}
+		const variant = art.variants.find((v) => v.name === variantName);
+		if (!variant) {
+			res.statusCode = 404;
+			res.end("Variant not found");
+			return;
+		}
+		const config = devServer.config;
+		const html = generatePreviewHtml(art, variant, basePath, config.base);
+		res.setHeader("Content-Type", "text/html");
+		res.end(html);
+	});
+	devServer.middlewares.use(`${basePath}/art`, async (req, res, next) => {
+		const url = new URL(req.url || "", "http://localhost");
+		const artPath = decodeURIComponent(url.pathname.slice(1));
+		if (!artPath) {
+			next();
+			return;
+		}
+		const art = artFiles.get(artPath);
+		if (!art) {
+			res.statusCode = 404;
+			res.end("Art not found: " + artPath);
+			return;
+		}
+		try {
+			const virtualId = `virtual:musea-art:${artPath}`;
+			const result = await devServer.transformRequest(virtualId);
+			if (result) {
+				res.setHeader("Content-Type", "application/javascript");
+				res.setHeader("Cache-Control", "no-cache");
+				res.end(result.code);
+			} else {
+				const moduleCode = generateArtModule(art, artPath);
+				res.setHeader("Content-Type", "application/javascript");
+				res.end(moduleCode);
+			}
+		} catch (err) {
+			console.error("[musea] Failed to transform art module:", err);
+			const moduleCode = generateArtModule(art, artPath);
+			res.setHeader("Content-Type", "application/javascript");
+			res.end(moduleCode);
+		}
+	});
+}
+//#endregion
+//#region src/tokens/parser.ts
+/**
+* Token parsing utilities for Style Dictionary integration.
+*
+* Reads and parses design token files (JSON) and directories,
+* flattening nested structures into categorized token collections.
+*/
+/**
+* Parse Style Dictionary tokens file.
+*/
+async function parseTokens(tokensPath) {
+	const absolutePath = path.resolve(tokensPath);
+	if ((await fs.promises.stat(absolutePath)).isDirectory()) return parseTokenDirectory(absolutePath);
+	const content = await fs.promises.readFile(absolutePath, "utf-8");
+	return flattenTokens(JSON.parse(content));
+}
+/**
+* Parse tokens from a directory.
+*/
+async function parseTokenDirectory(dirPath) {
+	const mergedTokens = {};
+	await mergeTokenDirectory(mergedTokens, dirPath);
+	return flattenTokens(mergedTokens);
+}
+async function mergeTokenDirectory(target, dirPath) {
+	const entries = await fs.promises.readdir(dirPath, { withFileTypes: true });
+	for (const entry of entries.sort((a, b) => a.name.localeCompare(b.name))) {
+		const fullPath = path.join(dirPath, entry.name);
+		if (entry.isDirectory()) {
+			await mergeTokenDirectory(target, fullPath);
+			continue;
+		}
+		if (!entry.isFile() || !entry.name.endsWith(".json") && !entry.name.endsWith(".tokens.json")) continue;
+		const content = await fs.promises.readFile(fullPath, "utf-8");
+		deepMergeTokenTrees(target, JSON.parse(content));
+	}
+}
+function deepMergeTokenTrees(target, source) {
+	for (const [key, value] of Object.entries(source)) {
+		const existing = target[key];
+		if (isPlainObject(existing) && isPlainObject(value) && !isTokenValue(existing) && !isTokenValue(value)) {
+			deepMergeTokenTrees(existing, value);
+			continue;
+		}
+		target[key] = value;
+	}
+}
+/**
+* Flatten nested token structure into categories.
+*/
+function flattenTokens(tokens, prefix = []) {
+	const categories = [];
+	for (const [key, value] of Object.entries(tokens)) {
+		if (isTokenValue(value)) continue;
+		if (typeof value === "object" && value !== null) {
+			const categoryTokens = extractTokens(value);
+			const subcategories = flattenTokens(value, [...prefix, key]);
+			if (Object.keys(categoryTokens).length > 0 || subcategories.length > 0) categories.push({
+				name: formatCategoryName(key),
+				tokens: categoryTokens,
+				subcategories: subcategories.length > 0 ? subcategories : void 0
+			});
+		}
+	}
+	return categories;
+}
+/**
+* Extract token values from an object.
+*/
+function extractTokens(obj) {
+	const tokens = {};
+	for (const [key, value] of Object.entries(obj)) if (isTokenValue(value)) tokens[key] = normalizeToken(value);
+	return tokens;
+}
+/**
+* Check if a value is a token definition.
+*/
+function isTokenValue(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const obj = value;
+	return "value" in obj && (typeof obj.value === "string" || typeof obj.value === "number") || "$value" in obj && (typeof obj.$value === "string" || typeof obj.$value === "number");
+}
+function isPlainObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/**
+* Normalize token to DesignToken interface.
+*/
+function normalizeToken(raw) {
+	const token = {
+		value: raw.value ?? raw.$value,
+		type: raw.type ?? raw.$type,
+		description: raw.description,
+		attributes: raw.attributes
+	};
+	if (raw.$tier === "primitive" || raw.$tier === "semantic") token.$tier = raw.$tier;
+	if (typeof raw.$reference === "string") token.$reference = raw.$reference;
+	return token;
+}
+/**
+* Format category name for display.
+*/
+function formatCategoryName(name) {
+	return name.replace(/[-_]/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+//#endregion
+//#region src/tokens/usage.ts
+/**
+* Token usage scanning and value normalization.
+*
+* Scans art file `<style>` blocks for CSS property values that match
+* design token values, and provides value normalization utilities.
+*/
+/**
+* Normalize a token value for comparison.
+* - Lowercase, trim
+* - Leading-zero: `.5rem` -> `0.5rem`
+* - Short hex: `#fff` -> `#ffffff`
+*/
+function normalizeTokenValue(value) {
+	let v = String(value).trim().toLowerCase();
+	const shortHex = v.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/);
+	if (shortHex) {
+		const [, r, g, b, a] = shortHex;
+		v = a ? `#${r}${r}${g}${g}${b}${b}${a}${a}` : `#${r}${r}${g}${g}${b}${b}`;
+	}
+	v = v.replace(/(?<![0-9])\.(\d)/g, "0.$1");
+	return v;
+}
+const STYLE_BLOCK_RE = /<style[^>]*>([\s\S]*?)<\/style>/g;
+const CSS_PROPERTY_RE = /^\s*([\w-]+)\s*:\s*(.+?)\s*;?\s*$/;
+/**
+* Scan art file sources for token value matches in `<style>` blocks.
+*/
+function scanTokenUsage(artFiles, tokenMap) {
+	const valueLookup = /* @__PURE__ */ new Map();
+	for (const [tokenPath, token] of Object.entries(tokenMap)) {
+		const normalized = normalizeTokenValue(token.$resolvedValue ?? token.value);
+		if (!normalized) continue;
+		const existing = valueLookup.get(normalized);
+		if (existing) existing.push(tokenPath);
+		else valueLookup.set(normalized, [tokenPath]);
+	}
+	const usageMap = {};
+	for (const [artPath, artInfo] of artFiles) {
+		let source;
+		try {
+			source = fs.readFileSync(artPath, "utf-8");
+		} catch {
+			continue;
+		}
+		const allLines = source.split("\n");
+		const styleRegions = [];
+		let match;
+		STYLE_BLOCK_RE.lastIndex = 0;
+		while ((match = STYLE_BLOCK_RE.exec(source)) !== null) {
+			const beforeMatch = source.slice(0, match.index);
+			const startTag = source.slice(match.index, match.index + match[0].indexOf(match[1]));
+			const startLine = beforeMatch.split("\n").length + startTag.split("\n").length - 1;
+			styleRegions.push({
+				startLine,
+				content: match[1]
+			});
+		}
+		for (const region of styleRegions) {
+			const lines = region.content.split("\n");
+			for (let i = 0; i < lines.length; i++) {
+				const line = lines[i];
+				const propMatch = line.match(CSS_PROPERTY_RE);
+				if (!propMatch) continue;
+				const property = propMatch[1];
+				const valueParts = propMatch[2].split(/\s+/);
+				for (const part of valueParts) {
+					const normalizedPart = normalizeTokenValue(part);
+					const matchingTokens = valueLookup.get(normalizedPart);
+					if (!matchingTokens) continue;
+					const lineNumber = region.startLine + i;
+					const lineContent = allLines[lineNumber - 1]?.trim() ?? line.trim();
+					for (const tokenPath of matchingTokens) {
+						if (!usageMap[tokenPath]) usageMap[tokenPath] = [];
+						let entry = usageMap[tokenPath].find((e) => e.artPath === artPath);
+						if (!entry) {
+							entry = {
+								artPath,
+								artTitle: artInfo.metadata.title,
+								artCategory: artInfo.metadata.category,
+								matches: []
+							};
+							usageMap[tokenPath].push(entry);
+						}
+						if (!entry.matches.some((m) => m.line === lineNumber && m.property === property)) entry.matches.push({
+							line: lineNumber,
+							lineContent,
+							property
+						});
+					}
+				}
+			}
+		}
+	}
+	return usageMap;
+}
+//#endregion
+//#region src/tokens/resolver.ts
+/**
+* Token resolution, CRUD operations, and validation.
+*
+* Handles building flat token maps from categories, resolving reference chains,
+* reading/writing raw token files, and validating semantic references.
+*/
+const REFERENCE_PATTERN = /^\{(.+)\}$/;
+const MAX_RESOLVE_DEPTH = 10;
+/**
+* Flatten nested categories into a flat map keyed by dot-path.
+*/
+function buildTokenMap(categories, prefix = []) {
+	const map = {};
+	for (const cat of categories) {
+		const catKey = cat.name.toLowerCase().replace(/\s+/g, "-");
+		const catPath = [...prefix, catKey];
+		for (const [name, token] of Object.entries(cat.tokens)) {
+			const dotPath = [...catPath, name].join(".");
+			map[dotPath] = token;
+		}
+		if (cat.subcategories) {
+			const subMap = buildTokenMap(cat.subcategories, catPath);
+			Object.assign(map, subMap);
+		}
+	}
+	return map;
+}
+/**
+* Resolve references in categories, setting $tier, $reference, and $resolvedValue.
+*/
+function resolveReferences(categories, tokenMap) {
+	for (const cat of categories) {
+		for (const token of Object.values(cat.tokens)) resolveTokenReference(token, tokenMap);
+		if (cat.subcategories) resolveReferences(cat.subcategories, tokenMap);
+	}
+}
+function resolveTokenReference(token, tokenMap) {
+	if (typeof token.value === "string") {
+		const match = token.value.match(REFERENCE_PATTERN);
+		if (match) {
+			token.$tier = token.$tier ?? "semantic";
+			token.$reference = match[1];
+			token.$resolvedValue = resolveValue(match[1], tokenMap, 0, /* @__PURE__ */ new Set());
+			return;
+		}
+	}
+	token.$tier = token.$tier ?? "primitive";
+}
+function resolveValue(ref, tokenMap, depth, visited) {
+	if (depth >= MAX_RESOLVE_DEPTH || visited.has(ref)) return void 0;
+	visited.add(ref);
+	const target = tokenMap[ref];
+	if (!target) return void 0;
+	if (typeof target.value === "string") {
+		const match = target.value.match(REFERENCE_PATTERN);
+		if (match) return resolveValue(match[1], tokenMap, depth + 1, visited);
+	}
+	return target.value;
+}
+/**
+* Read raw JSON token file.
+*/
+async function readRawTokenFile(tokensPath) {
+	const content = await fs.promises.readFile(tokensPath, "utf-8");
+	return JSON.parse(content);
+}
+/**
+* Write raw JSON token file atomically (write tmp, rename).
+*/
+async function writeRawTokenFile(tokensPath, data) {
+	const tmpPath = tokensPath + ".tmp";
+	await fs.promises.writeFile(tmpPath, JSON.stringify(data, null, 2) + "\n", "utf-8");
+	await fs.promises.rename(tmpPath, tokensPath);
+}
+/**
+* Set a token at a dot-separated path in the raw JSON structure.
+*/
+function setTokenAtPath(data, dotPath, token) {
+	const parts = dotPath.split(".");
+	let current = data;
+	for (let i = 0; i < parts.length - 1; i++) {
+		const key = parts[i];
+		if (typeof current[key] !== "object" || current[key] === null) current[key] = {};
+		current = current[key];
+	}
+	const leafKey = parts[parts.length - 1];
+	const raw = { value: token.value };
+	if (token.type) raw.type = token.type;
+	if (token.description) raw.description = token.description;
+	if (token.$tier) raw.$tier = token.$tier;
+	if (token.$reference) raw.$reference = token.$reference;
+	if (token.attributes) raw.attributes = token.attributes;
+	current[leafKey] = raw;
+}
+/**
+* Delete a token at a dot-separated path, cleaning empty parents.
+*/
+function deleteTokenAtPath(data, dotPath) {
+	const parts = dotPath.split(".");
+	const parents = [];
+	let current = data;
+	for (let i = 0; i < parts.length - 1; i++) {
+		const key = parts[i];
+		if (typeof current[key] !== "object" || current[key] === null) return false;
+		parents.push({
+			obj: current,
+			key
+		});
+		current = current[key];
+	}
+	const leafKey = parts[parts.length - 1];
+	if (!(leafKey in current)) return false;
+	delete current[leafKey];
+	for (let i = parents.length - 1; i >= 0; i--) {
+		const { obj, key } = parents[i];
+		const child = obj[key];
+		if (Object.keys(child).length === 0) delete obj[key];
+		else break;
+	}
+	return true;
+}
+/**
+* Validate that a semantic reference points to an existing token and has no cycles.
+*/
+function validateSemanticReference(tokenMap, reference, selfPath) {
+	if (!tokenMap[reference]) return {
+		valid: false,
+		error: `Reference target "${reference}" does not exist`
+	};
+	const visited = /* @__PURE__ */ new Set();
+	if (selfPath) visited.add(selfPath);
+	let current = reference;
+	let depth = 0;
+	while (depth < MAX_RESOLVE_DEPTH) {
+		if (visited.has(current)) return {
+			valid: false,
+			error: `Circular reference detected at "${current}"`
+		};
+		visited.add(current);
+		const target = tokenMap[current];
+		if (!target) break;
+		if (typeof target.value === "string") {
+			const match = target.value.match(REFERENCE_PATTERN);
+			if (match) {
+				current = match[1];
+				depth++;
+				continue;
+			}
+		}
+		break;
+	}
+	if (depth >= MAX_RESOLVE_DEPTH) return {
+		valid: false,
+		error: "Reference chain too deep (max 10)"
+	};
+	return { valid: true };
+}
+/**
+* Find all tokens that reference the given path.
+*/
+function findDependentTokens(tokenMap, targetPath) {
+	const dependents = [];
+	for (const [path, token] of Object.entries(tokenMap)) if (typeof token.value === "string") {
+		const match = token.value.match(REFERENCE_PATTERN);
+		if (match && match[1] === targetPath) dependents.push(path);
+	}
+	return dependents;
+}
+//#endregion
+//#region src/tokens/generator.ts
+/**
+* Token documentation generators for Style Dictionary integration.
+*
+* Generates HTML, Markdown, and JSON documentation from parsed token categories,
+* and provides the main processStyleDictionary orchestrator function.
+*/
+/**
+* Generate HTML documentation for tokens.
+*/
+function generateTokensHtml(categories) {
+	const renderToken = (name, token) => {
+		return `
+      <div class="token">
+        <div class="token-preview">
+          ${typeof token.value === "string" && (token.value.startsWith("#") || token.value.startsWith("rgb") || token.value.startsWith("hsl") || token.type === "color") ? `<div class="color-swatch" style="background: ${token.value}"></div>` : ""}
+        </div>
+        <div class="token-info">
+          <div class="token-name">${name}</div>
+          <div class="token-value">${token.value}</div>
+          ${token.description ? `<div class="token-description">${token.description}</div>` : ""}
+        </div>
+      </div>
+    `;
+	};
+	const renderCategory = (category, level = 2) => {
+		const heading = `h${Math.min(level, 6)}`;
+		let html = `<${heading}>${category.name}</${heading}>`;
+		html += "<div class=\"tokens-grid\">";
+		for (const [name, token] of Object.entries(category.tokens)) html += renderToken(name, token);
+		html += "</div>";
+		if (category.subcategories) for (const sub of category.subcategories) html += renderCategory(sub, level + 1);
+		return html;
+	};
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Design Tokens - Musea</title>
+  <style>
+    :root {
+      --musea-bg: #0d0d0d;
+      --musea-bg-secondary: #1a1815;
+      --musea-text: #e6e9f0;
+      --musea-text-muted: #7b8494;
+      --musea-accent: #a34828;
+      --musea-border: #3a3530;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: 'Inter', -apple-system, sans-serif;
+      background: var(--musea-bg);
+      color: var(--musea-text);
+      line-height: 1.6;
+      padding: 2rem;
+    }
+    h1 { margin-bottom: 2rem; color: var(--musea-accent); }
+    h2 { margin: 2rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--musea-border); }
+    h3, h4, h5, h6 { margin: 1.5rem 0 0.75rem; }
+    .tokens-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 1rem;
+      margin-bottom: 1.5rem;
+    }
+    .token {
+      background: var(--musea-bg-secondary);
+      border: 1px solid var(--musea-border);
+      border-radius: 8px;
+      padding: 1rem;
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+    .token-preview {
+      flex-shrink: 0;
+      width: 48px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .color-swatch {
+      width: 48px;
+      height: 48px;
+      border-radius: 8px;
+      border: 1px solid var(--musea-border);
+    }
+    .token-info {
+      flex: 1;
+      min-width: 0;
+    }
+    .token-name {
+      font-weight: 600;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.875rem;
+    }
+    .token-value {
+      color: var(--musea-text-muted);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.75rem;
+      word-break: break-all;
+    }
+    .token-description {
+      color: var(--musea-text-muted);
+      font-size: 0.75rem;
+      margin-top: 0.25rem;
+    }
+  </style>
+</head>
+<body>
+  <h1>Design Tokens</h1>
+  ${categories.map((cat) => renderCategory(cat)).join("")}
+</body>
+</html>`;
+}
+/**
+* Generate Markdown documentation for tokens.
+*/
+function generateTokensMarkdown(categories) {
+	const renderCategory = (category, level = 2) => {
+		let md = `\n${"#".repeat(level)} ${category.name}\n\n`;
+		if (Object.keys(category.tokens).length > 0) {
+			md += "| Token | Value | Description |\n";
+			md += "|-------|-------|-------------|\n";
+			for (const [name, token] of Object.entries(category.tokens)) {
+				const desc = token.description || "-";
+				md += `| \`${name}\` | \`${token.value}\` | ${desc} |\n`;
+			}
+			md += "\n";
+		}
+		if (category.subcategories) for (const sub of category.subcategories) md += renderCategory(sub, level + 1);
+		return md;
+	};
+	let markdown = "# Design Tokens\n\n";
+	markdown += `> Generated by Musea on ${(/* @__PURE__ */ new Date()).toISOString()}\n`;
+	for (const category of categories) markdown += renderCategory(category);
+	return markdown;
+}
+/**
+* Style Dictionary plugin for Musea.
+* Parses tokens and generates documentation in the specified format.
+*/
+async function processStyleDictionary(config) {
+	const categories = await parseTokens(config.tokensPath);
+	const outputDir = config.outputDir ?? ".vize/tokens";
+	const outputFormat = config.outputFormat ?? "html";
+	await fs.promises.mkdir(outputDir, { recursive: true });
+	let content;
+	let filename;
+	switch (outputFormat) {
+		case "html":
+			content = generateTokensHtml(categories);
+			filename = "tokens.html";
+			break;
+		case "markdown":
+			content = generateTokensMarkdown(categories);
+			filename = "tokens.md";
+			break;
+		default:
+			content = JSON.stringify({ categories }, null, 2);
+			filename = "tokens.json";
+	}
+	const outputPath = path.join(outputDir, filename);
+	await fs.promises.writeFile(outputPath, content, "utf-8");
+	console.log(`[musea] Generated token documentation: ${outputPath}`);
+	return {
+		categories,
+		metadata: {
+			name: path.basename(config.tokensPath),
+			generatedAt: (/* @__PURE__ */ new Date()).toISOString()
+		}
+	};
+}
+//#endregion
+//#region src/api-tokens.ts
+/**
+* Musea gallery API token route handlers.
+*
+* Handles GET/POST/PUT/DELETE for /api/tokens endpoints:
+* - GET /tokens       -- list all resolved design tokens
+* - GET /tokens/usage -- token usage across art files
+* - POST /tokens      -- create a new token
+* - PUT /tokens       -- update an existing token
+* - DELETE /tokens    -- delete a token
+*/
+/** GET /api/tokens/usage */
+async function handleTokensUsage(ctx, sendJson) {
+	if (!ctx.tokensPath) {
+		sendJson({});
+		return;
+	}
+	try {
+		const categories = await parseTokens(path.resolve(ctx.config.root, ctx.tokensPath));
+		resolveReferences(categories, buildTokenMap(categories));
+		const resolvedTokenMap = buildTokenMap(categories);
+		sendJson(scanTokenUsage(ctx.artFiles, resolvedTokenMap));
+	} catch (e) {
+		console.error("[musea] Failed to scan token usage:", e);
+		sendJson({});
+	}
+}
+/** GET /api/tokens */
+async function handleTokensGet(ctx, sendJson) {
+	if (!ctx.tokensPath) {
+		sendJson({
+			categories: [],
+			tokenMap: {},
+			meta: {
+				filePath: "",
+				tokenCount: 0,
+				primitiveCount: 0,
+				semanticCount: 0
+			}
+		});
+		return;
+	}
+	try {
+		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const categories = await parseTokens(absoluteTokensPath);
+		resolveReferences(categories, buildTokenMap(categories));
+		const resolvedTokenMap = buildTokenMap(categories);
+		let primitiveCount = 0;
+		let semanticCount = 0;
+		for (const token of Object.values(resolvedTokenMap)) if (token.$tier === "semantic") semanticCount++;
+		else primitiveCount++;
+		sendJson({
+			categories,
+			tokenMap: resolvedTokenMap,
+			meta: {
+				filePath: absoluteTokensPath,
+				tokenCount: Object.keys(resolvedTokenMap).length,
+				primitiveCount,
+				semanticCount
+			}
+		});
+	} catch (e) {
+		console.error("[musea] Failed to load tokens:", e);
+		sendJson({
+			categories: [],
+			tokenMap: {},
+			error: String(e)
+		});
+	}
+}
+/** POST /api/tokens (create) */
+async function handleTokensCreate(ctx, readBody, sendJson, sendError) {
+	if (!ctx.tokensPath) {
+		sendError("No tokens path configured", 400);
+		return;
+	}
+	const body = await readBody();
+	try {
+		const { path: dotPath, token } = JSON.parse(body);
+		if (!dotPath || !token || token.value === void 0) {
+			sendError("Missing required fields: path, token.value", 400);
+			return;
+		}
+		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const rawData = await readRawTokenFile(absoluteTokensPath);
+		const currentMap = buildTokenMap(await parseTokens(absoluteTokensPath));
+		if (currentMap[dotPath]) {
+			sendError(`Token already exists at path "${dotPath}"`, 409);
+			return;
+		}
+		if (token.$reference) {
+			const validation = validateSemanticReference(currentMap, token.$reference, dotPath);
+			if (!validation.valid) {
+				sendError(validation.error, 400);
+				return;
+			}
+			token.value = `{${token.$reference}}`;
+			token.$tier = "semantic";
+		}
+		setTokenAtPath(rawData, dotPath, token);
+		await writeRawTokenFile(absoluteTokensPath, rawData);
+		const categories = await parseTokens(absoluteTokensPath);
+		resolveReferences(categories, buildTokenMap(categories));
+		sendJson({
+			categories,
+			tokenMap: buildTokenMap(categories)
+		}, 201);
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+/** PUT /api/tokens (update) */
+async function handleTokensUpdate(ctx, readBody, sendJson, sendError) {
+	if (!ctx.tokensPath) {
+		sendError("No tokens path configured", 400);
+		return;
+	}
+	const body = await readBody();
+	try {
+		const { path: dotPath, token } = JSON.parse(body);
+		if (!dotPath || !token || token.value === void 0) {
+			sendError("Missing required fields: path, token.value", 400);
+			return;
+		}
+		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		if (token.$reference) {
+			const validation = validateSemanticReference(buildTokenMap(await parseTokens(absoluteTokensPath)), token.$reference, dotPath);
+			if (!validation.valid) {
+				sendError(validation.error, 400);
+				return;
+			}
+			token.value = `{${token.$reference}}`;
+			token.$tier = "semantic";
+		}
+		const rawData = await readRawTokenFile(absoluteTokensPath);
+		setTokenAtPath(rawData, dotPath, token);
+		await writeRawTokenFile(absoluteTokensPath, rawData);
+		const categories = await parseTokens(absoluteTokensPath);
+		resolveReferences(categories, buildTokenMap(categories));
+		sendJson({
+			categories,
+			tokenMap: buildTokenMap(categories)
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+/** DELETE /api/tokens */
+async function handleTokensDelete(ctx, readBody, sendJson, sendError) {
+	if (!ctx.tokensPath) {
+		sendError("No tokens path configured", 400);
+		return;
+	}
+	const body = await readBody();
+	try {
+		const { path: dotPath } = JSON.parse(body);
+		if (!dotPath) {
+			sendError("Missing required field: path", 400);
+			return;
+		}
+		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const dependents = findDependentTokens(buildTokenMap(await parseTokens(absoluteTokensPath)), dotPath);
+		const rawData = await readRawTokenFile(absoluteTokensPath);
+		if (!deleteTokenAtPath(rawData, dotPath)) {
+			sendError(`Token not found at path "${dotPath}"`, 404);
+			return;
+		}
+		await writeRawTokenFile(absoluteTokensPath, rawData);
+		const categories = await parseTokens(absoluteTokensPath);
+		resolveReferences(categories, buildTokenMap(categories));
+		sendJson({
+			categories,
+			tokenMap: buildTokenMap(categories),
+			dependentsWarning: dependents.length > 0 ? dependents : void 0
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+//#endregion
+//#region src/api-routes/handler-palette.ts
+/**
+* Palette handler for the Musea gallery API.
+*
+* Handles GET /api/arts/:path/palette endpoint.
+*/
+/** GET /api/arts/:path/palette */
+async function handleArtPalette(ctx, match, sendJson, sendError) {
+	const artPath = decodeURIComponent(match[1]);
+	const art = ctx.artFiles.get(artPath);
+	if (!art) {
+		sendError("Art not found", 404);
+		return;
+	}
+	try {
+		const source = await fs.promises.readFile(artPath, "utf-8");
+		const binding = loadNative();
+		let palette;
+		if (binding.generateArtPalette) palette = binding.generateArtPalette(source, { filename: artPath });
+		else palette = {
+			title: art.metadata.title,
+			controls: [],
+			groups: [],
+			json: "{}",
+			typescript: ""
+		};
+		if (palette.controls.length === 0 && art.metadata.component) {
+			const resolvedComponentPath = path.isAbsolute(art.metadata.component) ? art.metadata.component : path.resolve(path.dirname(artPath), art.metadata.component);
+			try {
+				const componentSource = await fs.promises.readFile(resolvedComponentPath, "utf-8");
+				const analysis = binding.analyzeSfc ? binding.analyzeSfc(componentSource, { filename: resolvedComponentPath }) : analyzeSfcFallback(componentSource, { filename: resolvedComponentPath });
+				if (analysis.props.length > 0) {
+					palette.controls = analysis.props.map((prop) => {
+						let control = "text";
+						if (prop.type === "boolean") control = "boolean";
+						else if (prop.type === "number") control = "number";
+						else if (prop.type.includes("|") && !prop.type.includes("=>")) control = "select";
+						const options = [];
+						if (control === "select") {
+							const optionMatches = prop.type.match(/"([^"]+)"/g);
+							if (optionMatches) for (const opt of optionMatches) {
+								const val = opt.replace(/"/g, "");
+								options.push({
+									label: val,
+									value: val
+								});
+							}
+						}
+						return {
+							name: prop.name,
+							control,
+							default_value: prop.default_value !== void 0 ? prop.default_value === "true" ? true : prop.default_value === "false" ? false : typeof prop.default_value === "string" && prop.default_value.startsWith("\"") ? prop.default_value.replace(/^"|"$/g, "") : prop.default_value : void 0,
+							description: void 0,
+							required: prop.required,
+							options,
+							range: void 0,
+							group: void 0
+						};
+					});
+					palette.json = JSON.stringify({
+						title: palette.title,
+						controls: palette.controls
+					}, null, 2);
+					palette.typescript = `export interface ${palette.title}Props {\n${palette.controls.map((c) => `  ${c.name}${c.required ? "" : "?"}: ${c.control === "boolean" ? "boolean" : c.control === "number" ? "number" : c.control === "select" ? c.options.map((o) => `"${String(o.value)}"`).join(" | ") : "string"};`).join("\n")}\n}\n`;
+				}
+			} catch {}
+		}
+		sendJson(palette);
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+//#endregion
+//#region src/api-routes/handlers.ts
+/**
+* Individual route handler functions for the Musea gallery API.
+*
+* Extracted from api-routes.ts to keep file sizes manageable.
+* These handle GET /api/arts/:path/... sub-routes.
+*/
+/** GET /api/arts/:path/source */
+async function handleArtSource(ctx, match, sendJson, sendError) {
+	const artPath = decodeURIComponent(match[1]);
+	if (!ctx.artFiles.get(artPath)) {
+		sendError("Art not found", 404);
+		return;
+	}
+	try {
+		sendJson({
+			source: await fs.promises.readFile(artPath, "utf-8"),
+			path: artPath
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+/** GET /api/arts/:path/analysis */
+async function handleArtAnalysis(ctx, match, sendJson, sendError) {
+	const artPath = decodeURIComponent(match[1]);
+	const art = ctx.artFiles.get(artPath);
+	if (!art) {
+		sendError("Art not found", 404);
+		return;
+	}
+	try {
+		const resolvedComponentPath = art.isInline && art.componentPath ? art.componentPath : art.metadata.component ? path.isAbsolute(art.metadata.component) ? art.metadata.component : path.resolve(path.dirname(artPath), art.metadata.component) : null;
+		if (resolvedComponentPath) {
+			const source = await fs.promises.readFile(resolvedComponentPath, "utf-8");
+			const binding = loadNative();
+			if (binding.analyzeSfc) sendJson(binding.analyzeSfc(source, { filename: resolvedComponentPath }));
+			else sendJson(analyzeSfcFallback(source, { filename: resolvedComponentPath }));
+		} else sendJson({
+			props: [],
+			emits: []
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+/** GET /api/arts/:path/docs */
+async function handleArtDocs(ctx, match, sendJson, sendError) {
+	const artPath = decodeURIComponent(match[1]);
+	const art = ctx.artFiles.get(artPath);
+	if (!art) {
+		sendError("Art not found", 404);
+		return;
+	}
+	try {
+		const source = await fs.promises.readFile(artPath, "utf-8");
+		const binding = loadNative();
+		if (binding.generateArtDoc) {
+			const doc = binding.generateArtDoc(source, { filename: artPath });
+			let markdown = doc.markdown || "";
+			const componentName = art.metadata.title || "Component";
+			markdown = markdown.replace(/<Self(\s|>|\/)/g, `<${componentName}$1`).replace(/<\/Self>/g, `</${componentName}>`);
+			markdown = markdown.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
+				const lines = code.split("\n");
+				let minIndent = Infinity;
+				for (const line of lines) if (line.trim()) {
+					const indent = line.match(/^(\s*)/)?.[1].length || 0;
+					minIndent = Math.min(minIndent, indent);
+				}
+				if (minIndent === Infinity) minIndent = 0;
+				let formatted;
+				if (minIndent > 0) formatted = lines.map((line) => line.slice(minIndent)).join("\n");
+				else {
+					let restIndent = Infinity;
+					for (let i = 1; i < lines.length; i++) if (lines[i].trim()) {
+						const indent = lines[i].match(/^(\s*)/)?.[1].length || 0;
+						restIndent = Math.min(restIndent, indent);
+					}
+					if (restIndent === Infinity || restIndent === 0) formatted = lines.join("\n");
+					else formatted = lines.map((line, i) => i === 0 ? line : line.slice(restIndent)).join("\n");
+				}
+				return "```" + lang + "\n" + formatted + "```";
+			});
+			sendJson({
+				...doc,
+				markdown
+			});
+		} else sendJson({
+			markdown: "",
+			title: art.metadata.title,
+			variant_count: art.variants.length
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+/** GET /api/arts/:path/variants/:name/a11y */
+function handleArtA11y(ctx, match, sendJson, sendError) {
+	const artPath = decodeURIComponent(match[1]);
+	decodeURIComponent(match[2]);
+	if (!ctx.artFiles.get(artPath)) {
+		sendError("Art not found", 404);
+		return;
+	}
+	sendJson({
+		violations: [],
+		passes: 0,
+		incomplete: 0
+	});
+}
+//#endregion
+//#region src/api-routes/post-handlers.ts
+/** POST /api/preview-with-props */
+function handlePreviewWithProps(ctx, body, res, sendJson, sendError) {
+	try {
+		const { artPath: reqArtPath, variantName, props: propsOverride } = JSON.parse(body);
+		const art = ctx.artFiles.get(reqArtPath);
+		if (!art) {
+			sendError("Art not found", 404);
+			return;
+		}
+		const variant = art.variants.find((v) => v.name === variantName);
+		if (!variant) {
+			sendError("Variant not found", 404);
+			return;
+		}
+		const moduleCode = generatePreviewModuleWithProps(art, toPascalCase(variant.name), variant.name, propsOverride, ctx.resolvedPreviewCss, ctx.resolvedPreviewSetup);
+		res.setHeader("Content-Type", "application/javascript");
+		res.end(moduleCode);
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+/** POST /api/generate */
+async function handleGenerate(body, sendJson, sendError) {
+	try {
+		const { componentPath: reqComponentPath, options: autogenOptions } = JSON.parse(body);
+		const { generateArtFile: genArt } = await import("./autogen/index.mjs");
+		const result = await genArt(reqComponentPath, autogenOptions);
+		sendJson({
+			generated: true,
+			componentName: result.componentName,
+			variants: result.variants,
+			artFileContent: result.artFileContent
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+/** POST /api/run-vrt */
+async function handleRunVrt(ctx, body, sendJson, sendError) {
+	try {
+		const { artPath, updateSnapshots } = JSON.parse(body);
+		const { MuseaVrtRunner, generateVrtJsonReport, generateVrtReport } = await import("./vrt.mjs");
+		const snapshotDir = path.resolve(ctx.config.root, ".vize/snapshots");
+		const reportDir = path.resolve(ctx.config.root, ".vize/reports");
+		const runner = new MuseaVrtRunner({ snapshotDir });
+		const baseUrl = `http://localhost:${ctx.getDevServerPort()}`;
+		let artsToTest = Array.from(ctx.artFiles.values());
+		if (artPath) artsToTest = artsToTest.filter((a) => a.path === artPath);
+		const { results, summary } = await (async () => {
+			await runner.start();
+			try {
+				const results = await runner.runTests(artsToTest, baseUrl, { updateSnapshots });
+				return {
+					results,
+					summary: runner.getSummary(results)
+				};
+			} finally {
+				await runner.stop();
+			}
+		})();
+		const reportBaseName = artPath ? `vrt-${path.basename(artPath, ".art.vue")}` : "vrt";
+		const jsonReportPath = path.join(reportDir, `${reportBaseName}-report.json`);
+		const htmlReportPath = path.join(reportDir, `${reportBaseName}-report.html`);
+		await fs.promises.mkdir(reportDir, { recursive: true });
+		await fs.promises.writeFile(jsonReportPath, generateVrtJsonReport(results, summary), "utf-8");
+		await fs.promises.writeFile(htmlReportPath, generateVrtReport(results, summary), "utf-8");
+		sendJson({
+			success: true,
+			summary,
+			results: results.map((r) => ({
+				artPath: r.artPath,
+				variantName: r.variantName,
+				viewport: r.viewport.name,
+				passed: r.passed,
+				isNew: r.isNew,
+				diffPercentage: r.diffPercentage,
+				snapshotPath: r.snapshotPath,
+				currentPath: r.currentPath,
+				diffPath: r.diffPath,
+				error: r.error
+			})),
+			artifacts: {
+				reportDir,
+				htmlReportPath,
+				jsonReportPath,
+				snapshotDir,
+				currentDir: path.join(snapshotDir, "current"),
+				diffDir: path.join(snapshotDir, "diff")
+			}
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+//#endregion
+//#region src/api-routes/index.ts
+/** Helper to read the full request body as a string. */
+function collectBody(req) {
+	return new Promise((resolve) => {
+		let body = "";
+		req.on("data", (chunk) => {
+			body += chunk;
+		});
+		req.on("end", () => resolve(body));
+	});
+}
+/**
+* Create the API middleware handler for the Musea gallery.
+*
+* Returns a Connect-compatible middleware function that handles all
+* `/api/...` sub-routes under the configured basePath.
+*/
+function createApiMiddleware(ctx) {
+	return async (req, res, next) => {
+		const sendJson = (data, status = 200) => {
+			res.statusCode = status;
+			res.setHeader("Content-Type", "application/json");
+			res.end(JSON.stringify(data));
+		};
+		const sendError = (message, status = 500) => {
+			sendJson({ error: message }, status);
+		};
+		const readBody = () => collectBody(req);
+		const url = req.url || "/";
+		if (url === "/arts" && req.method === "GET") {
+			sendJson(Array.from(ctx.artFiles.values()));
+			return;
+		}
+		if (url === "/tokens/usage" && req.method === "GET") {
+			await handleTokensUsage(ctx, sendJson);
+			return;
+		}
+		if (url === "/tokens" && req.method === "GET") {
+			await handleTokensGet(ctx, sendJson);
+			return;
+		}
+		if (url === "/tokens" && req.method === "POST") {
+			await handleTokensCreate(ctx, readBody, sendJson, sendError);
+			return;
+		}
+		if (url === "/tokens" && req.method === "PUT") {
+			await handleTokensUpdate(ctx, readBody, sendJson, sendError);
+			return;
+		}
+		if (url === "/tokens" && req.method === "DELETE") {
+			await handleTokensDelete(ctx, readBody, sendJson, sendError);
+			return;
+		}
+		if (url?.startsWith("/arts/") && req.method === "PUT") {
+			const sourceMatch = url.slice(6).match(/^(.+)\/source$/);
+			if (sourceMatch) {
+				const artPath = decodeURIComponent(sourceMatch[1]);
+				if (!ctx.artFiles.get(artPath)) {
+					sendError("Art not found", 404);
+					return;
+				}
+				const body = await collectBody(req);
+				try {
+					const { source } = JSON.parse(body);
+					if (typeof source !== "string") {
+						sendError("Missing required field: source", 400);
+						return;
+					}
+					await fs.promises.writeFile(artPath, source, "utf-8");
+					await ctx.processArtFile(artPath);
+					sendJson({ success: true });
+				} catch (e) {
+					sendError(e instanceof Error ? e.message : String(e));
+				}
+				return;
+			}
+			next();
+			return;
+		}
+		if (url?.startsWith("/arts/") && req.method === "GET") {
+			const rest = url.slice(6);
+			const sourceMatch = rest.match(/^(.+)\/source$/);
+			const paletteMatch = rest.match(/^(.+)\/palette$/);
+			const analysisMatch = rest.match(/^(.+)\/analysis$/);
+			const docsMatch = rest.match(/^(.+)\/docs$/);
+			const a11yMatch = rest.match(/^(.+)\/variants\/([^/]+)\/a11y$/);
+			if (sourceMatch) {
+				await handleArtSource(ctx, sourceMatch, sendJson, sendError);
+				return;
+			}
+			if (paletteMatch) {
+				await handleArtPalette(ctx, paletteMatch, sendJson, sendError);
+				return;
+			}
+			if (analysisMatch) {
+				await handleArtAnalysis(ctx, analysisMatch, sendJson, sendError);
+				return;
+			}
+			if (docsMatch) {
+				await handleArtDocs(ctx, docsMatch, sendJson, sendError);
+				return;
+			}
+			if (a11yMatch) {
+				handleArtA11y(ctx, a11yMatch, sendJson, sendError);
+				return;
+			}
+			const artPath = decodeURIComponent(rest);
+			const art = ctx.artFiles.get(artPath);
+			if (art) sendJson(art);
+			else sendError("Art not found", 404);
+			return;
+		}
+		if (req.method === "POST") {
+			const body = await collectBody(req);
+			if (url === "/preview-with-props") {
+				handlePreviewWithProps(ctx, body, res, sendJson, sendError);
+				return;
+			}
+			if (url === "/generate") {
+				await handleGenerate(body, sendJson, sendError);
+				return;
+			}
+			if (url === "/run-vrt") {
+				await handleRunVrt(ctx, body, sendJson, sendError);
+				return;
+			}
+		}
+		next();
+	};
+}
+//#endregion
+//#region src/manifest.ts
+/**
+* Generate the virtual manifest module code containing all art file metadata.
+*/
+function generateManifestModule(artFiles) {
+	const arts = Array.from(artFiles.values());
+	return `export const arts = ${JSON.stringify(arts, null, 2)};`;
+}
+//#endregion
+//#region src/plugin/virtual.ts
+/**
+* Virtual module handling for the Musea Vite plugin.
+*
+* Contains `resolveId`, `load`, and `handleHotUpdate` hooks that
+* manage virtual modules for gallery, manifest, preview, and art files.
+*/
+const VIRTUAL_MUSEA_PREFIX = "\0musea:";
+const VIRTUAL_GALLERY = "\0musea-gallery";
+const VIRTUAL_MANIFEST = "\0musea-manifest";
+function createResolveId(state) {
+	return function resolveId(id) {
+		const root = state.getConfigRoot();
+		if (id === "\0musea-gallery") return VIRTUAL_GALLERY;
+		if (id === "\0musea-manifest") return VIRTUAL_MANIFEST;
+		if (id.startsWith("virtual:musea-preview:")) return "\0musea-preview:" + id.slice(22);
+		if (id.startsWith("virtual:musea-art:")) {
+			const artPath = id.slice(18);
+			if (state.artFiles.has(artPath)) return "\0musea-art:" + artPath + "?musea-virtual";
+		}
+		if (id.endsWith(".art.vue")) {
+			const resolved = path.resolve(root, id);
+			if (state.artFiles.has(resolved)) return VIRTUAL_MUSEA_PREFIX + resolved + "?musea-virtual";
+		}
+		if (state.inlineArt && id.endsWith(".vue") && !id.endsWith(".art.vue")) {
+			const resolved = path.resolve(root, id);
+			if (state.artFiles.has(resolved)) return VIRTUAL_MUSEA_PREFIX + resolved + "?musea-virtual";
+		}
+		return null;
+	};
+}
+function createLoad(state) {
+	return function load(id) {
+		if (id === "\0musea-gallery") return generateGalleryModule(state.basePath);
+		if (id === "\0musea-manifest") return generateManifestModule(state.artFiles);
+		if (id.startsWith("\0musea-preview:")) {
+			const rest = id.slice(15);
+			const lastColonIndex = rest.lastIndexOf(":");
+			if (lastColonIndex !== -1) {
+				const artPath = rest.slice(0, lastColonIndex);
+				const variantName = rest.slice(lastColonIndex + 1);
+				const art = state.artFiles.get(artPath);
+				if (art) return generatePreviewModule(art, toPascalCase(variantName), variantName, state.resolvedPreviewCss, state.resolvedPreviewSetup);
+			}
+		}
+		if (id.startsWith("\0musea-art:")) {
+			const artPath = id.slice(11).replace(/\?musea-virtual$/, "");
+			const art = state.artFiles.get(artPath);
+			if (art) return generateArtModule(art, artPath);
+		}
+		if (id.startsWith("\0musea:")) {
+			const realPath = id.slice(7).replace(/\?musea-virtual$/, "");
+			const art = state.artFiles.get(realPath);
+			if (art) return generateArtModule(art, realPath);
+		}
+		return null;
+	};
+}
+function createHandleHotUpdate(state) {
+	return async function handleHotUpdate(ctx) {
+		const { file } = ctx;
+		if (file.endsWith(".art.vue") && state.artFiles.has(file)) {
+			await state.processArtFile(file);
+			const virtualId = VIRTUAL_MUSEA_PREFIX + file + "?musea-virtual";
+			const modules = state.getServer()?.moduleGraph.getModulesByFile(virtualId);
+			if (modules) return [...modules];
+		}
+		if (state.inlineArt && file.endsWith(".vue") && !file.endsWith(".art.vue") && state.artFiles.has(file)) {
+			await state.processArtFile(file);
+			const virtualId = VIRTUAL_MUSEA_PREFIX + file;
+			const modules = state.getServer()?.moduleGraph.getModulesByFile(virtualId);
+			if (modules) return [...modules];
+		}
+	};
+}
+//#endregion
+//#region src/plugin/index.ts
+function extractArtTagAttributes(source) {
+	const artTagMatch = source.match(/<art\b([\s\S]*?)>/i);
+	if (!artTagMatch) return {};
+	const attributes = {};
+	for (const match of artTagMatch[1].matchAll(/([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'))?/g)) {
+		const name = match[1];
+		if (!name || name === "/") continue;
+		attributes[name] = match[2] ?? match[3] ?? true;
+	}
+	return attributes;
+}
+function parseActionEvents(value) {
+	if (typeof value !== "string") return void 0;
+	const events = value.split(",").map((eventName) => eventName.trim().toLowerCase()).filter(Boolean);
+	return events.length > 0 ? [...new Set(events)] : void 0;
+}
+function extractCustomArtMetadata(source) {
+	const attrs = extractArtTagAttributes(source);
+	const actionEvents = new Set(parseActionEvents(attrs["action-events"]) ?? []);
+	const captureMousemove = attrs["capture-mousemove"];
+	if (captureMousemove === true || captureMousemove === "true") actionEvents.add("mousemove");
+	return { actionEvents: actionEvents.size > 0 ? [...actionEvents] : void 0 };
+}
+function extractStyleBlocks(source) {
+	const styles = [];
+	for (const match of source.matchAll(/<style\b([^>]*)>([\s\S]*?)<\/style>/gi)) {
+		const attrs = match[1] ?? "";
+		const content = match[2]?.trim();
+		const lang = attrs.match(/\blang\s*=\s*["']([^"']+)["']/i)?.[1]?.toLowerCase();
+		if (!content) continue;
+		if (lang && lang !== "css") continue;
+		styles.push(content);
+	}
+	return styles;
+}
+/**
+* Create Musea Vite plugin.
+*/
+function musea(options = {}) {
+	let include = options.include ?? ["**/*.art.vue"];
+	let exclude = options.exclude ?? ["node_modules/**", "dist/**"];
+	let basePath = options.basePath ?? "/__musea__";
+	let storybookCompat = options.storybookCompat ?? false;
+	const storybookOutDir = options.storybookOutDir ?? ".storybook/stories";
+	let inlineArt = options.inlineArt ?? false;
+	const tokensPath = options.tokensPath;
+	const themeConfig = buildThemeConfig(options.theme);
+	const previewCss = options.previewCss ?? [];
+	const previewSetup = options.previewSetup;
+	let config;
+	let server = null;
+	const artFiles = /* @__PURE__ */ new Map();
+	let resolvedPreviewCss = [];
+	let resolvedPreviewSetup = null;
+	let scanRoots = [];
+	const virtualState = {
+		basePath,
+		get inlineArt() {
+			return inlineArt;
+		},
+		artFiles,
+		resolvedPreviewCss,
+		resolvedPreviewSetup,
+		getConfigRoot: () => config.root,
+		getServer: () => server,
+		processArtFile
+	};
+	const mainPlugin = {
+		name: "vite-plugin-musea",
+		enforce: "pre",
+		config() {
+			return { resolve: { alias: { vue: "vue/dist/vue.esm-bundler.js" } } };
+		},
+		configResolved(resolvedConfig) {
+			config = resolvedConfig;
+			const vizeConfig = vizeConfigStore.get(resolvedConfig.root);
+			if (vizeConfig?.musea) {
+				const mc = vizeConfig.musea;
+				if (!options.include && mc.include) include = mc.include;
+				if (!options.exclude && mc.exclude) exclude = mc.exclude;
+				if (!options.basePath && mc.basePath) basePath = mc.basePath;
+				if (options.storybookCompat === void 0 && mc.storybookCompat !== void 0) storybookCompat = mc.storybookCompat;
+				if (options.inlineArt === void 0 && mc.inlineArt !== void 0) inlineArt = mc.inlineArt;
+			}
+			virtualState.basePath = basePath;
+			resolvedPreviewCss = previewCss.map((cssPath) => path.isAbsolute(cssPath) ? cssPath : path.resolve(resolvedConfig.root, cssPath));
+			if (previewSetup) resolvedPreviewSetup = path.isAbsolute(previewSetup) ? previewSetup : path.resolve(resolvedConfig.root, previewSetup);
+			virtualState.resolvedPreviewCss = resolvedPreviewCss;
+			virtualState.resolvedPreviewSetup = resolvedPreviewSetup;
+			scanRoots = resolveScanRoots(resolvedConfig.root, include);
+		},
+		configureServer(devServer) {
+			server = devServer;
+			devServer.watcher.add(scanRoots);
+			registerMiddleware(devServer, {
+				basePath,
+				themeConfig,
+				artFiles,
+				resolvedPreviewCss,
+				resolvedPreviewSetup
+			});
+			devServer.middlewares.use(`${basePath}/api`, createApiMiddleware({
+				config,
+				artFiles,
+				tokensPath,
+				basePath,
+				resolvedPreviewCss,
+				resolvedPreviewSetup,
+				processArtFile,
+				getDevServerPort: () => devServer.config.server.port || 5173
+			}));
+			devServer.watcher.on("change", async (file) => {
+				if (file.endsWith(".art.vue") && shouldProcess(file, include, exclude, config.root)) {
+					await processArtFile(file);
+					console.log(`[musea] Reloaded: ${path.relative(config.root, file)}`);
+				}
+				if (inlineArt && file.endsWith(".vue") && !file.endsWith(".art.vue")) {
+					const hadArt = artFiles.has(file);
+					if ((await fs.promises.readFile(file, "utf-8")).includes("<art")) {
+						await processArtFile(file);
+						console.log(`[musea] Reloaded inline art: ${path.relative(config.root, file)}`);
+					} else if (hadArt) {
+						artFiles.delete(file);
+						console.log(`[musea] Removed inline art: ${path.relative(config.root, file)}`);
+					}
+				}
+			});
+			devServer.watcher.on("add", async (file) => {
+				if (file.endsWith(".art.vue") && shouldProcess(file, include, exclude, config.root)) {
+					await processArtFile(file);
+					console.log(`[musea] Added: ${path.relative(config.root, file)}`);
+				}
+				if (inlineArt && file.endsWith(".vue") && !file.endsWith(".art.vue")) {
+					if ((await fs.promises.readFile(file, "utf-8")).includes("<art")) {
+						await processArtFile(file);
+						console.log(`[musea] Added inline art: ${path.relative(config.root, file)}`);
+					}
+				}
+			});
+			devServer.watcher.on("unlink", (file) => {
+				if (artFiles.has(file)) {
+					artFiles.delete(file);
+					console.log(`[musea] Removed: ${path.relative(config.root, file)}`);
+				}
+			});
+			return () => {
+				devServer.httpServer?.once("listening", () => {
+					const address = devServer.httpServer?.address();
+					if (address && typeof address === "object") {
+						const protocol = devServer.config.server.https ? "https" : "http";
+						const rawHost = address.address;
+						const url = `${protocol}://${rawHost === "::" || rawHost === "::1" || rawHost === "0.0.0.0" || rawHost === "127.0.0.1" ? "localhost" : rawHost}:${address.port}${basePath}`;
+						console.log();
+						console.log(`  \x1b[36m➜\x1b[0m  \x1b[1mMusea Gallery:\x1b[0m \x1b[36m${url}\x1b[0m`);
+					}
+				});
+			};
+		},
+		async buildStart() {
+			console.log(`[musea] config.root: ${config.root}, include: ${JSON.stringify(include)}`);
+			const files = await scanArtFiles(config.root, include, exclude, inlineArt);
+			console.log(`[musea] Found ${files.length} art files`);
+			if (server) {
+				server.watcher.add(scanRoots);
+				server.watcher.add(files);
+			}
+			for (const file of files) await processArtFile(file);
+			if (storybookCompat) await generateStorybookFiles(artFiles, config.root, storybookOutDir);
+		},
+		resolveId: createResolveId(virtualState),
+		load: createLoad(virtualState),
+		async transform(code, id) {
+			if (!id.includes("?musea-virtual")) return null;
+			if (!id.includes("musea-art:") && !id.includes("\0musea:")) return null;
+			const safeId = id.replaceAll("\0", "").replace(/[^\w./-]+/g, "_").replace(/_+/g, "_");
+			return transformWithEsbuild(code, path.join(config.root, `.musea-${safeId}.ts`), {
+				loader: "ts",
+				format: "esm",
+				sourcemap: config.command === "serve",
+				target: "esnext"
+			});
+		},
+		handleHotUpdate: createHandleHotUpdate(virtualState)
+	};
+	async function processArtFile(filePath) {
+		try {
+			const source = await fs.promises.readFile(filePath, "utf-8");
+			const parsed = loadNative().parseArt(source, { filename: filePath });
+			const customMetadata = extractCustomArtMetadata(source);
+			if (!parsed.variants || parsed.variants.length === 0) return;
+			const isInline = !filePath.endsWith(".art.vue");
+			const info = {
+				path: filePath,
+				metadata: {
+					title: parsed.metadata.title || (isInline ? path.basename(filePath, ".vue") : ""),
+					description: parsed.metadata.description,
+					component: isInline ? void 0 : parsed.metadata.component,
+					category: parsed.metadata.category,
+					tags: parsed.metadata.tags,
+					status: parsed.metadata.status,
+					order: parsed.metadata.order,
+					actionEvents: customMetadata.actionEvents ?? parsed.metadata.actionEvents
+				},
+				variants: parsed.variants.map((v) => ({
+					name: v.name,
+					template: v.template,
+					isDefault: v.isDefault,
+					skipVrt: v.skipVrt
+				})),
+				hasScriptSetup: isInline ? false : parsed.hasScriptSetup,
+				scriptSetupContent: !isInline && parsed.hasScriptSetup ? extractScriptSetupContent(source) : void 0,
+				hasScript: parsed.hasScript,
+				styleCount: parsed.styleCount,
+				styleBlocks: isInline ? [] : extractStyleBlocks(source),
+				isInline,
+				componentPath: isInline ? filePath : void 0
+			};
+			artFiles.set(filePath, info);
+		} catch (e) {
+			console.error(`[musea] Failed to process ${filePath}:`, e);
+		}
+	}
+	return [mainPlugin];
+}
+//#endregion
+//#region src/index.ts
+var src_default = musea;
+//#endregion
+export { MuseaA11yRunner, MuseaVrtRunner, buildTokenMap, src_default as default, generateArtFile, generateTokensHtml, generateTokensMarkdown, generateVrtJsonReport, generateVrtReport, musea, parseTokens, processStyleDictionary, resolveReferences, scanTokenUsage, writeArtFile };
+
+//# sourceMappingURL=index.mjs.map