@vizejs/vite-plugin-musea 0.0.1-alpha.100

package/dist/index.js

@@ -0,0 +1,2760 @@
+import { MuseaA11yRunner } from "./a11y-C6xqILwZ.js";
+import { generateArtFile, writeArtFile } from "./autogen-ymQnARZK.js";
+import { MuseaVrtRunner, generateVrtJsonReport, generateVrtReport } from "./vrt-DP87vGIA.js";
+import path from "node:path";
+import { createRequire } from "node:module";
+import fs from "node:fs";
+import { vizeConfigStore } from "@vizejs/vite-plugin";
+
+//#region src/style-dictionary.ts
+/**
+* Parse Style Dictionary tokens file.
+*/
+async function parseTokens(tokensPath) {
+	const absolutePath = path.resolve(tokensPath);
+	const stat = await fs.promises.stat(absolutePath);
+	if (stat.isDirectory()) return parseTokenDirectory(absolutePath);
+	const content = await fs.promises.readFile(absolutePath, "utf-8");
+	const tokens = JSON.parse(content);
+	return flattenTokens(tokens);
+}
+/**
+* Parse tokens from a directory.
+*/
+async function parseTokenDirectory(dirPath) {
+	const entries = await fs.promises.readdir(dirPath, { withFileTypes: true });
+	const categories = [];
+	for (const entry of entries) if (entry.isFile() && (entry.name.endsWith(".json") || entry.name.endsWith(".tokens.json"))) {
+		const filePath = path.join(dirPath, entry.name);
+		const content = await fs.promises.readFile(filePath, "utf-8");
+		const tokens = JSON.parse(content);
+		const categoryName = path.basename(entry.name, path.extname(entry.name)).replace(".tokens", "");
+		categories.push({
+			name: formatCategoryName(categoryName),
+			tokens: extractTokens(tokens),
+			subcategories: extractSubcategories(tokens)
+		});
+	}
+	return categories;
+}
+/**
+* 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;
+}
+/**
+* Extract subcategories from an object.
+*/
+function extractSubcategories(obj) {
+	const subcategories = [];
+	for (const [key, value] of Object.entries(obj)) if (!isTokenValue(value) && typeof value === "object" && value !== null) {
+		const categoryTokens = extractTokens(value);
+		const nested = extractSubcategories(value);
+		if (Object.keys(categoryTokens).length > 0 || nested && nested.length > 0) subcategories.push({
+			name: formatCategoryName(key),
+			tokens: categoryTokens,
+			subcategories: nested
+		});
+	}
+	return subcategories.length > 0 ? subcategories : void 0;
+}
+/**
+* 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");
+}
+/**
+* Normalize token to DesignToken interface.
+*/
+function normalizeToken(raw) {
+	const token = {
+		value: raw.value,
+		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(" ");
+}
+/**
+* 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;
+}
+const REFERENCE_PATTERN = /^\{(.+)\}$/;
+const MAX_RESOLVE_DEPTH = 10;
+/**
+* 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, 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 = 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$1, 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$1);
+	}
+	return dependents;
+}
+/**
+* Generate HTML documentation for tokens.
+*/
+function generateTokensHtml(categories) {
+	const renderToken = (name, token) => {
+		const isColor = typeof token.value === "string" && (token.value.startsWith("#") || token.value.startsWith("rgb") || token.value.startsWith("hsl") || token.type === "color");
+		return `
+      <div class="token">
+        <div class="token-preview">
+          ${isColor ? `<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) => {
+		const heading = "#".repeat(level);
+		let md = `\n${heading} ${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 ${new Date().toISOString()}\n`;
+	for (const category of categories) markdown += renderCategory(category);
+	return markdown;
+}
+/**
+* Style Dictionary plugin for Musea.
+*/
+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;
+		case "json":
+		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: new Date().toISOString()
+		}
+	};
+}
+/**
+* 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 = new Map();
+	for (const [tokenPath, token] of Object.entries(tokenMap)) {
+		const rawValue = token.$resolvedValue ?? token.value;
+		const normalized = normalizeTokenValue(rawValue);
+		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 valueStr = propMatch[2];
+				const valueParts = valueStr.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/index.ts
+const VIRTUAL_MUSEA_PREFIX = "\0musea:";
+const VIRTUAL_GALLERY = "\0musea-gallery";
+const VIRTUAL_MANIFEST = "\0musea-manifest";
+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)}`);
+	}
+}
+/**
+* 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
+	};
+}
+/**
+* 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);
+	let config;
+	let server = null;
+	const artFiles = new Map();
+	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;
+			}
+		},
+		configureServer(devServer) {
+			server = devServer;
+			devServer.middlewares.use(basePath, async (req, res, next) => {
+				const url = req.url || "/";
+				if (url === "/" || url === "/index.html" || url.startsWith("/tokens") || url.startsWith("/component/")) {
+					const galleryDistDir = path.resolve(path.dirname(new URL(import.meta.url).pathname), "gallery");
+					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>`);
+						html = await devServer.transformIndexHtml(basePath + url, html);
+						res.setHeader("Content-Type", "text/html");
+						res.end(html);
+						return;
+					} catch {
+						const html = generateGalleryHtml(basePath, themeConfig);
+						res.setHeader("Content-Type", "text/html");
+						res.end(html);
+						return;
+					}
+				}
+				if (url.startsWith("/assets/")) {
+					const galleryDistDir = path.resolve(path.dirname(new URL(import.meta.url).pathname), "gallery");
+					const filePath = path.join(galleryDistDir, url);
+					try {
+						const stat = await fs.promises.stat(filePath);
+						if (stat.isFile()) {
+							const content = await fs.promises.readFile(filePath);
+							const ext = path.extname(filePath);
+							const mimeTypes = {
+								".js": "application/javascript",
+								".css": "text/css",
+								".svg": "image/svg+xml",
+								".png": "image/png",
+								".ico": "image/x-icon",
+								".woff2": "font/woff2",
+								".woff": "font/woff"
+							};
+							res.setHeader("Content-Type", mimeTypes[ext] || "application/octet-stream");
+							res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
+							res.end(content);
+							return;
+						}
+					} catch {}
+				}
+				next();
+			});
+			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 variantComponentName = toPascalCase(variant.name);
+				const moduleCode = generatePreviewModule(art, variantComponentName, variant.name);
+				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 rawHtml = generatePreviewHtml(art, variant, basePath);
+				const html = await devServer.transformIndexHtml(`${basePath}/preview?art=${encodeURIComponent(artPath)}&variant=${encodeURIComponent(variantName)}`, rawHtml);
+				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);
+				}
+			});
+			devServer.middlewares.use(`${basePath}/api`, 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);
+				};
+				if (req.url === "/arts" && req.method === "GET") {
+					sendJson(Array.from(artFiles.values()));
+					return;
+				}
+				if (req.url === "/tokens/usage" && req.method === "GET") {
+					if (!tokensPath) {
+						sendJson({});
+						return;
+					}
+					try {
+						const absoluteTokensPath = path.resolve(config.root, tokensPath);
+						const categories = await parseTokens(absoluteTokensPath);
+						const tokenMap = buildTokenMap(categories);
+						resolveReferences(categories, tokenMap);
+						const resolvedTokenMap = buildTokenMap(categories);
+						const usage = scanTokenUsage(artFiles, resolvedTokenMap);
+						sendJson(usage);
+					} catch (e) {
+						console.error("[musea] Failed to scan token usage:", e);
+						sendJson({});
+					}
+					return;
+				}
+				if (req.url === "/tokens" && req.method === "GET") {
+					if (!tokensPath) {
+						sendJson({
+							categories: [],
+							tokenMap: {},
+							meta: {
+								filePath: "",
+								tokenCount: 0,
+								primitiveCount: 0,
+								semanticCount: 0
+							}
+						});
+						return;
+					}
+					try {
+						const absoluteTokensPath = path.resolve(config.root, tokensPath);
+						const categories = await parseTokens(absoluteTokensPath);
+						const tokenMap = buildTokenMap(categories);
+						resolveReferences(categories, tokenMap);
+						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)
+						});
+					}
+					return;
+				}
+				if (req.url === "/tokens" && req.method === "POST") {
+					if (!tokensPath) {
+						sendError("No tokens path configured", 400);
+						return;
+					}
+					let body = "";
+					req.on("data", (chunk) => {
+						body += chunk;
+					});
+					req.on("end", async () => {
+						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(config.root, tokensPath);
+							const rawData = await readRawTokenFile(absoluteTokensPath);
+							const currentCategories = await parseTokens(absoluteTokensPath);
+							const currentMap = buildTokenMap(currentCategories);
+							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);
+							const tokenMap = buildTokenMap(categories);
+							resolveReferences(categories, tokenMap);
+							const resolvedTokenMap = buildTokenMap(categories);
+							sendJson({
+								categories,
+								tokenMap: resolvedTokenMap
+							}, 201);
+						} catch (e) {
+							sendError(e instanceof Error ? e.message : String(e));
+						}
+					});
+					return;
+				}
+				if (req.url === "/tokens" && req.method === "PUT") {
+					if (!tokensPath) {
+						sendError("No tokens path configured", 400);
+						return;
+					}
+					let body = "";
+					req.on("data", (chunk) => {
+						body += chunk;
+					});
+					req.on("end", async () => {
+						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(config.root, tokensPath);
+							if (token.$reference) {
+								const currentCategories = await parseTokens(absoluteTokensPath);
+								const currentMap = buildTokenMap(currentCategories);
+								const validation = validateSemanticReference(currentMap, 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);
+							const tokenMap = buildTokenMap(categories);
+							resolveReferences(categories, tokenMap);
+							const resolvedTokenMap = buildTokenMap(categories);
+							sendJson({
+								categories,
+								tokenMap: resolvedTokenMap
+							});
+						} catch (e) {
+							sendError(e instanceof Error ? e.message : String(e));
+						}
+					});
+					return;
+				}
+				if (req.url === "/tokens" && req.method === "DELETE") {
+					if (!tokensPath) {
+						sendError("No tokens path configured", 400);
+						return;
+					}
+					let body = "";
+					req.on("data", (chunk) => {
+						body += chunk;
+					});
+					req.on("end", async () => {
+						try {
+							const { path: dotPath } = JSON.parse(body);
+							if (!dotPath) {
+								sendError("Missing required field: path", 400);
+								return;
+							}
+							const absoluteTokensPath = path.resolve(config.root, tokensPath);
+							const currentCategories = await parseTokens(absoluteTokensPath);
+							const currentMap = buildTokenMap(currentCategories);
+							const dependents = findDependentTokens(currentMap, dotPath);
+							const rawData = await readRawTokenFile(absoluteTokensPath);
+							const deleted = deleteTokenAtPath(rawData, dotPath);
+							if (!deleted) {
+								sendError(`Token not found at path "${dotPath}"`, 404);
+								return;
+							}
+							await writeRawTokenFile(absoluteTokensPath, rawData);
+							const categories = await parseTokens(absoluteTokensPath);
+							const tokenMap = buildTokenMap(categories);
+							resolveReferences(categories, tokenMap);
+							const resolvedTokenMap = buildTokenMap(categories);
+							sendJson({
+								categories,
+								tokenMap: resolvedTokenMap,
+								dependentsWarning: dependents.length > 0 ? dependents : void 0
+							});
+						} catch (e) {
+							sendError(e instanceof Error ? e.message : String(e));
+						}
+					});
+					return;
+				}
+				if (req.url?.startsWith("/arts/") && req.method === "PUT") {
+					const rest = req.url.slice(6);
+					const sourceMatch = rest.match(/^(.+)\/source$/);
+					if (sourceMatch) {
+						const artPath = decodeURIComponent(sourceMatch[1]);
+						const art = artFiles.get(artPath);
+						if (!art) {
+							sendError("Art not found", 404);
+							return;
+						}
+						let body = "";
+						req.on("data", (chunk) => {
+							body += chunk;
+						});
+						req.on("end", async () => {
+							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 processArtFile(artPath);
+								sendJson({ success: true });
+							} catch (e) {
+								sendError(e instanceof Error ? e.message : String(e));
+							}
+						});
+						return;
+					}
+					next();
+					return;
+				}
+				if (req.url?.startsWith("/arts/") && req.method === "GET") {
+					const rest = req.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) {
+						const artPath$1 = decodeURIComponent(sourceMatch[1]);
+						const art$1 = artFiles.get(artPath$1);
+						if (!art$1) {
+							sendError("Art not found", 404);
+							return;
+						}
+						try {
+							const source = await fs.promises.readFile(artPath$1, "utf-8");
+							sendJson({
+								source,
+								path: artPath$1
+							});
+						} catch (e) {
+							sendError(e instanceof Error ? e.message : String(e));
+						}
+						return;
+					}
+					if (paletteMatch) {
+						const artPath$1 = decodeURIComponent(paletteMatch[1]);
+						const art$1 = artFiles.get(artPath$1);
+						if (!art$1) {
+							sendError("Art not found", 404);
+							return;
+						}
+						try {
+							const source = await fs.promises.readFile(artPath$1, "utf-8");
+							const binding = loadNative();
+							if (binding.generateArtPalette) {
+								const palette = binding.generateArtPalette(source, { filename: artPath$1 });
+								sendJson(palette);
+							} else sendJson({
+								title: art$1.metadata.title,
+								controls: [],
+								groups: [],
+								json: "{}",
+								typescript: ""
+							});
+						} catch (e) {
+							sendError(e instanceof Error ? e.message : String(e));
+						}
+						return;
+					}
+					if (analysisMatch) {
+						const artPath$1 = decodeURIComponent(analysisMatch[1]);
+						const art$1 = artFiles.get(artPath$1);
+						if (!art$1) {
+							sendError("Art not found", 404);
+							return;
+						}
+						try {
+							const resolvedComponentPath = art$1.isInline && art$1.componentPath ? art$1.componentPath : art$1.metadata.component ? path.isAbsolute(art$1.metadata.component) ? art$1.metadata.component : path.resolve(path.dirname(artPath$1), art$1.metadata.component) : null;
+							if (resolvedComponentPath) {
+								const source = await fs.promises.readFile(resolvedComponentPath, "utf-8");
+								const binding = loadNative();
+								if (binding.analyzeSfc) {
+									const analysis = binding.analyzeSfc(source, { filename: resolvedComponentPath });
+									sendJson(analysis);
+								} else sendJson({
+									props: [],
+									emits: []
+								});
+							} else sendJson({
+								props: [],
+								emits: []
+							});
+						} catch (e) {
+							sendError(e instanceof Error ? e.message : String(e));
+						}
+						return;
+					}
+					if (docsMatch) {
+						const artPath$1 = decodeURIComponent(docsMatch[1]);
+						const art$1 = artFiles.get(artPath$1);
+						if (!art$1) {
+							sendError("Art not found", 404);
+							return;
+						}
+						try {
+							const source = await fs.promises.readFile(artPath$1, "utf-8");
+							const binding = loadNative();
+							if (binding.generateArtDoc) {
+								const doc = binding.generateArtDoc(source, { filename: artPath$1 });
+								let markdown = doc.markdown || "";
+								const componentName = art$1.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;
+									const formatted = lines.map((line) => line.slice(minIndent)).join("\n");
+									return "```" + lang + "\n" + formatted + "```";
+								});
+								sendJson({
+									...doc,
+									markdown
+								});
+							} else sendJson({
+								markdown: "",
+								title: art$1.metadata.title,
+								variant_count: art$1.variants.length
+							});
+						} catch (e) {
+							sendError(e instanceof Error ? e.message : String(e));
+						}
+						return;
+					}
+					if (a11yMatch) {
+						const artPath$1 = decodeURIComponent(a11yMatch[1]);
+						const _variantName = decodeURIComponent(a11yMatch[2]);
+						const art$1 = artFiles.get(artPath$1);
+						if (!art$1) {
+							sendError("Art not found", 404);
+							return;
+						}
+						sendJson({
+							violations: [],
+							passes: 0,
+							incomplete: 0
+						});
+						return;
+					}
+					const artPath = decodeURIComponent(rest);
+					const art = artFiles.get(artPath);
+					if (art) sendJson(art);
+					else sendError("Art not found", 404);
+					return;
+				}
+				if (req.url === "/preview-with-props" && req.method === "POST") {
+					let body = "";
+					req.on("data", (chunk) => {
+						body += chunk;
+					});
+					req.on("end", () => {
+						try {
+							const { artPath: reqArtPath, variantName, props: propsOverride } = JSON.parse(body);
+							const art = 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 variantComponentName = toPascalCase(variant.name);
+							const moduleCode = generatePreviewModuleWithProps(art, variantComponentName, variant.name, propsOverride);
+							res.setHeader("Content-Type", "application/javascript");
+							res.end(moduleCode);
+						} catch (e) {
+							sendError(e instanceof Error ? e.message : String(e));
+						}
+					});
+					return;
+				}
+				if (req.url === "/generate" && req.method === "POST") {
+					let body = "";
+					req.on("data", (chunk) => {
+						body += chunk;
+					});
+					req.on("end", async () => {
+						try {
+							const { componentPath: reqComponentPath, options: autogenOptions } = JSON.parse(body);
+							const { generateArtFile: genArt } = await import("./autogen.js");
+							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));
+						}
+					});
+					return;
+				}
+				if (req.url === "/run-vrt" && req.method === "POST") {
+					let body = "";
+					req.on("data", (chunk) => {
+						body += chunk;
+					});
+					req.on("end", async () => {
+						try {
+							const { artPath, updateSnapshots } = JSON.parse(body);
+							const { MuseaVrtRunner: MuseaVrtRunner$1 } = await import("./vrt.js");
+							const runner = new MuseaVrtRunner$1({ snapshotDir: path.resolve(config.root, ".vize/snapshots") });
+							const port = devServer.config.server.port || 5173;
+							const baseUrl = `http://localhost:${port}`;
+							let artsToTest = Array.from(artFiles.values());
+							if (artPath) artsToTest = artsToTest.filter((a) => a.path === artPath);
+							await runner.start();
+							const results = await runner.runTests(artsToTest, baseUrl, { updateSnapshots });
+							const summary = runner.getSummary(results);
+							await runner.stop();
+							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,
+									error: r.error
+								}))
+							});
+						} catch (e) {
+							sendError(e instanceof Error ? e.message : String(e));
+						}
+					});
+					return;
+				}
+				next();
+			});
+			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);
+					const source = await fs.promises.readFile(file, "utf-8");
+					if (source.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")) {
+					const source = await fs.promises.readFile(file, "utf-8");
+					if (source.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 host = rawHost === "::" || rawHost === "::1" || rawHost === "0.0.0.0" || rawHost === "127.0.0.1" ? "localhost" : rawHost;
+						const port = address.port;
+						const url = `${protocol}://${host}:${port}${basePath}`;
+						console.log();
+						console.log(`  \x1b[36m➜\x1b[0m  \x1b[1mMusea Gallery:\x1b[0m \x1b[36m${url}\x1b[0m`);
+					}
+				});
+			};
+		},
+		async buildStart() {
+			const files = await scanArtFiles(config.root, include, exclude, inlineArt);
+			console.log(`[musea] Found ${files.length} art files`);
+			for (const file of files) await processArtFile(file);
+			if (storybookCompat) await generateStorybookFiles(artFiles, config.root, storybookOutDir);
+		},
+		resolveId(id) {
+			if (id === VIRTUAL_GALLERY) return VIRTUAL_GALLERY;
+			if (id === VIRTUAL_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 (artFiles.has(artPath)) return "\0musea-art:" + artPath;
+			}
+			if (id.endsWith(".art.vue")) {
+				const resolved = path.resolve(config.root, id);
+				if (artFiles.has(resolved)) return VIRTUAL_MUSEA_PREFIX + resolved;
+			}
+			if (inlineArt && id.endsWith(".vue") && !id.endsWith(".art.vue")) {
+				const resolved = path.resolve(config.root, id);
+				if (artFiles.has(resolved)) return VIRTUAL_MUSEA_PREFIX + resolved;
+			}
+			return null;
+		},
+		load(id) {
+			if (id === VIRTUAL_GALLERY) return generateGalleryModule(basePath);
+			if (id === VIRTUAL_MANIFEST) return generateManifestModule(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 = artFiles.get(artPath);
+					if (art) {
+						const variantComponentName = toPascalCase(variantName);
+						return generatePreviewModule(art, variantComponentName, variantName);
+					}
+				}
+			}
+			if (id.startsWith("\0musea-art:")) {
+				const artPath = id.slice(11);
+				const art = artFiles.get(artPath);
+				if (art) return generateArtModule(art, artPath);
+			}
+			if (id.startsWith(VIRTUAL_MUSEA_PREFIX)) {
+				const realPath = id.slice(VIRTUAL_MUSEA_PREFIX.length);
+				const art = artFiles.get(realPath);
+				if (art) return generateArtModule(art, realPath);
+			}
+			return null;
+		},
+		async handleHotUpdate(ctx) {
+			const { file } = ctx;
+			if (file.endsWith(".art.vue") && artFiles.has(file)) {
+				await processArtFile(file);
+				const virtualId = VIRTUAL_MUSEA_PREFIX + file;
+				const modules = server?.moduleGraph.getModulesByFile(virtualId);
+				if (modules) return [...modules];
+			}
+			if (inlineArt && file.endsWith(".vue") && !file.endsWith(".art.vue") && artFiles.has(file)) {
+				await processArtFile(file);
+				const virtualId = VIRTUAL_MUSEA_PREFIX + file;
+				const modules = server?.moduleGraph.getModulesByFile(virtualId);
+				if (modules) return [...modules];
+			}
+			return void 0;
+		}
+	};
+	async function processArtFile(filePath) {
+		try {
+			const source = await fs.promises.readFile(filePath, "utf-8");
+			const binding = loadNative();
+			const parsed = binding.parseArt(source, { filename: filePath });
+			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
+				},
+				variants: parsed.variants.map((v) => ({
+					name: v.name,
+					template: v.template,
+					isDefault: v.is_default,
+					skipVrt: v.skip_vrt
+				})),
+				hasScriptSetup: parsed.has_script_setup,
+				hasScript: parsed.has_script,
+				styleCount: parsed.style_count,
+				isInline,
+				componentPath: isInline ? filePath : void 0
+			};
+			artFiles.set(filePath, info);
+		} catch (e) {
+			console.error(`[musea] Failed to process ${filePath}:`, e);
+		}
+	}
+	return [mainPlugin];
+}
+function shouldProcess(file, include, exclude, root) {
+	const relative = path.relative(root, file);
+	for (const pattern of exclude) if (matchGlob(relative, pattern)) return false;
+	for (const pattern of include) if (matchGlob(relative, pattern)) return true;
+	return false;
+}
+function matchGlob(filepath, pattern) {
+	const regex = pattern.replace(/\./g, "\\.").replace(/\*\*/g, ".*").replace(/\*(?!\*)/g, "[^/]*");
+	return new RegExp(`^${regex}$`).test(filepath);
+}
+async function scanArtFiles(root, include, exclude, scanInlineArt = false) {
+	const files = [];
+	async function scan(dir) {
+		const entries = await fs.promises.readdir(dir, { withFileTypes: true });
+		for (const entry of entries) {
+			const fullPath = path.join(dir, entry.name);
+			const relative = path.relative(root, fullPath);
+			let excluded = false;
+			for (const pattern of exclude) if (matchGlob(relative, pattern) || 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")) {
+				for (const pattern of include) if (matchGlob(relative, pattern)) {
+					files.push(fullPath);
+					break;
+				}
+			} else if (scanInlineArt && entry.isFile() && entry.name.endsWith(".vue") && !entry.name.endsWith(".art.vue")) {
+				const content = await fs.promises.readFile(fullPath, "utf-8");
+				if (content.includes("<art")) files.push(fullPath);
+			}
+		}
+	}
+	await scan(root);
+	return files;
+}
+function generateGalleryHtml(basePath, themeConfig) {
+	const themeScript = themeConfig ? `window.__MUSEA_THEME_CONFIG__=${JSON.stringify(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}';${themeScript}</script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --musea-bg-primary: #0d0d0d;
+      --musea-bg-secondary: #1a1815;
+      --musea-bg-tertiary: #252220;
+      --musea-bg-elevated: #2d2a27;
+      --musea-accent: #a34828;
+      --musea-accent-hover: #c45a32;
+      --musea-accent-subtle: rgba(163, 72, 40, 0.15);
+      --musea-text: #e6e9f0;
+      --musea-text-secondary: #c4c9d4;
+      --musea-text-muted: #7b8494;
+      --musea-border: #3a3530;
+      --musea-border-subtle: #2a2725;
+      --musea-success: #4ade80;
+      --musea-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+      --musea-radius-sm: 6px;
+      --musea-radius-md: 8px;
+      --musea-radius-lg: 12px;
+      --musea-transition: 0.15s ease;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--musea-bg-primary);
+      color: var(--musea-text);
+      min-height: 100vh;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* Header */
+    .header {
+      background: var(--musea-bg-secondary);
+      border-bottom: 1px solid var(--musea-border);
+      padding: 0 1.5rem;
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+    }
+
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: var(--musea-accent);
+      text-decoration: none;
+    }
+
+    .logo-svg {
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+    }
+
+    .logo-icon svg {
+      width: 16px;
+      height: 16px;
+      color: white;
+    }
+
+    .header-subtitle {
+      color: var(--musea-text-muted);
+      font-size: 0.8125rem;
+      font-weight: 500;
+      padding-left: 1.5rem;
+      border-left: 1px solid var(--musea-border);
+    }
+
+    .search-container {
+      position: relative;
+      width: 280px;
+    }
+
+    .search-input {
+      width: 100%;
+      background: var(--musea-bg-tertiary);
+      border: 1px solid var(--musea-border);
+      border-radius: var(--musea-radius-md);
+      padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+      color: var(--musea-text);
+      font-size: 0.8125rem;
+      outline: none;
+      transition: border-color var(--musea-transition), background var(--musea-transition);
+    }
+
+    .search-input::placeholder {
+      color: var(--musea-text-muted);
+    }
+
+    .search-input:focus {
+      border-color: var(--musea-accent);
+      background: var(--musea-bg-elevated);
+    }
+
+    .search-icon {
+      position: absolute;
+      left: 0.75rem;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--musea-text-muted);
+      pointer-events: none;
+    }
+
+    /* Layout */
+    .main {
+      display: grid;
+      grid-template-columns: 260px 1fr;
+      min-height: calc(100vh - 56px);
+    }
+
+    /* Sidebar */
+    .sidebar {
+      background: var(--musea-bg-secondary);
+      border-right: 1px solid var(--musea-border);
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    .sidebar::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .sidebar::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .sidebar::-webkit-scrollbar-thumb {
+      background: var(--musea-border);
+      border-radius: 3px;
+    }
+
+    .sidebar-section {
+      padding: 0.75rem;
+    }
+
+    .category-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.625rem 0.75rem;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--musea-text-muted);
+      cursor: pointer;
+      user-select: none;
+      border-radius: var(--musea-radius-sm);
+      transition: background var(--musea-transition);
+    }
+
+    .category-header:hover {
+      background: var(--musea-bg-tertiary);
+    }
+
+    .category-icon {
+      width: 16px;
+      height: 16px;
+      transition: transform var(--musea-transition);
+    }
+
+    .category-header.collapsed .category-icon {
+      transform: rotate(-90deg);
+    }
+
+    .category-count {
+      margin-left: auto;
+      background: var(--musea-bg-tertiary);
+      padding: 0.125rem 0.375rem;
+      border-radius: 4px;
+      font-size: 0.625rem;
+    }
+
+    .art-list {
+      list-style: none;
+      margin-top: 0.25rem;
+    }
+
+    .art-item {
+      display: flex;
+      align-items: center;
+      gap: 0.625rem;
+      padding: 0.5rem 0.75rem 0.5rem 1.75rem;
+      border-radius: var(--musea-radius-sm);
+      cursor: pointer;
+      font-size: 0.8125rem;
+      color: var(--musea-text-secondary);
+      transition: all var(--musea-transition);
+      position: relative;
+    }
+
+    .art-item::before {
+      content: '';
+      position: absolute;
+      left: 0.75rem;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--musea-border);
+      transition: background var(--musea-transition);
+    }
+
+    .art-item:hover {
+      background: var(--musea-bg-tertiary);
+      color: var(--musea-text);
+    }
+
+    .art-item:hover::before {
+      background: var(--musea-text-muted);
+    }
+
+    .art-item.active {
+      background: var(--musea-accent-subtle);
+      color: var(--musea-accent-hover);
+    }
+
+    .art-item.active::before {
+      background: var(--musea-accent);
+    }
+
+    .art-variant-count {
+      margin-left: auto;
+      font-size: 0.6875rem;
+      color: var(--musea-text-muted);
+      opacity: 0;
+      transition: opacity var(--musea-transition);
+    }
+
+    .art-item:hover .art-variant-count {
+      opacity: 1;
+    }
+
+    /* Content */
+    .content {
+      background: var(--musea-bg-primary);
+      overflow-y: auto;
+    }
+
+    .content-inner {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    .content-header {
+      margin-bottom: 2rem;
+    }
+
+    .content-title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+    }
+
+    .content-description {
+      color: var(--musea-text-muted);
+      font-size: 0.9375rem;
+      max-width: 600px;
+    }
+
+    .content-meta {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+
+    .meta-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding: 0.25rem 0.625rem;
+      background: var(--musea-bg-secondary);
+      border: 1px solid var(--musea-border);
+      border-radius: var(--musea-radius-sm);
+      font-size: 0.75rem;
+      color: var(--musea-text-muted);
+    }
+
+    .meta-tag svg {
+      width: 12px;
+      height: 12px;
+    }
+
+    /* Gallery Grid */
+    .gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+      gap: 1.25rem;
+    }
+
+    /* Variant Card */
+    .variant-card {
+      background: var(--musea-bg-secondary);
+      border: 1px solid var(--musea-border);
+      border-radius: var(--musea-radius-lg);
+      overflow: hidden;
+      transition: all var(--musea-transition);
+    }
+
+    .variant-card:hover {
+      border-color: var(--musea-text-muted);
+      box-shadow: var(--musea-shadow);
+      transform: translateY(-2px);
+    }
+
+    .variant-preview {
+      aspect-ratio: 16 / 10;
+      background: var(--musea-bg-tertiary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .variant-preview iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+      background: white;
+    }
+
+    .variant-preview-placeholder {
+      color: var(--musea-text-muted);
+      font-size: 0.8125rem;
+      text-align: center;
+      padding: 1rem;
+    }
+
+    .variant-preview-code {
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      font-size: 0.75rem;
+      color: var(--musea-text-muted);
+      background: var(--musea-bg-primary);
+      padding: 1rem;
+      overflow: auto;
+      max-height: 100%;
+      width: 100%;
+    }
+
+    .variant-info {
+      padding: 1rem;
+      border-top: 1px solid var(--musea-border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .variant-name {
+      font-weight: 600;
+      font-size: 0.875rem;
+    }
+
+    .variant-badge {
+      font-size: 0.625rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      padding: 0.1875rem 0.5rem;
+      border-radius: 4px;
+      background: var(--musea-accent-subtle);
+      color: var(--musea-accent);
+    }
+
+    .variant-actions {
+      display: flex;
+      gap: 0.5rem;
+    }
+
+    .variant-action-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: var(--musea-bg-tertiary);
+      border-radius: var(--musea-radius-sm);
+      color: var(--musea-text-muted);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all var(--musea-transition);
+    }
+
+    .variant-action-btn:hover {
+      background: var(--musea-bg-elevated);
+      color: var(--musea-text);
+    }
+
+    .variant-action-btn svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    /* Empty State */
+    .empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 400px;
+      text-align: center;
+      padding: 2rem;
+    }
+
+    .empty-state-icon {
+      width: 80px;
+      height: 80px;
+      background: var(--musea-bg-secondary);
+      border-radius: var(--musea-radius-lg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 1.5rem;
+    }
+
+    .empty-state-icon svg {
+      width: 40px;
+      height: 40px;
+      color: var(--musea-text-muted);
+    }
+
+    .empty-state-title {
+      font-size: 1.125rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+
+    .empty-state-text {
+      color: var(--musea-text-muted);
+      font-size: 0.875rem;
+      max-width: 300px;
+    }
+
+    /* Loading */
+    .loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 200px;
+      color: var(--musea-text-muted);
+      gap: 0.75rem;
+    }
+
+    .loading-spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--musea-border);
+      border-top-color: var(--musea-accent);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+      .main {
+        grid-template-columns: 1fr;
+      }
+      .sidebar {
+        display: none;
+      }
+      .header-subtitle {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <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">
+          <defs>
+            <linearGradient id="metal-grad" x1="0%" y1="0%" x2="100%" y2="20%">
+              <stop offset="0%" stop-color="#f0f2f5"/>
+              <stop offset="50%" stop-color="#9ca3b0"/>
+              <stop offset="100%" stop-color="#e07048"/>
+            </linearGradient>
+            <linearGradient id="metal-grad-dark" x1="0%" y1="0%" x2="100%" y2="30%">
+              <stop offset="0%" stop-color="#d0d4dc"/>
+              <stop offset="60%" stop-color="#6b7280"/>
+              <stop offset="100%" stop-color="#c45530"/>
+            </linearGradient>
+          </defs>
+          <g transform="translate(40, 40)">
+            <g transform="skewX(-12)">
+              <path d="M 100 0 L 60 120 L 105 30 L 100 0 Z" fill="url(#metal-grad-dark)" stroke="#4b5563" stroke-width="0.5"/>
+              <path d="M 30 0 L 60 120 L 80 20 L 30 0 Z" fill="url(#metal-grad)" stroke-width="0.5" stroke-opacity="0.4"/>
+            </g>
+          </g>
+          <g transform="translate(110, 120)">
+            <line x1="5" y1="10" x2="5" y2="50" stroke="#e07048" stroke-width="3" stroke-linecap="round"/>
+            <line x1="60" y1="10" x2="60" y2="50" stroke="#e07048" stroke-width="3" stroke-linecap="round"/>
+            <path d="M 0 10 L 32.5 0 L 65 10" fill="none" stroke="#e07048" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <rect x="15" y="18" width="14" height="12" rx="1" fill="none" stroke="#e07048" stroke-width="1.5" opacity="0.7"/>
+            <rect x="36" y="18" width="14" height="12" rx="1" fill="none" stroke="#e07048" stroke-width="1.5" opacity="0.7"/>
+            <rect x="23" y="35" width="18" height="12" rx="1" fill="none" stroke="#e07048" 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>
+
+  <script type="module">
+    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();
+  </script>
+</body>
+</html>`;
+}
+function generateGalleryModule(basePath) {
+	return `
+export const basePath = '${basePath}';
+export async function loadArts() {
+  const res = await fetch(basePath + '/api/arts');
+  return res.json();
+}
+`;
+}
+const MUSEA_ADDONS_INIT_CODE = `
+function __museaInitAddons(container, variantName) {
+  // === DOM event capture ===
+  // Note: mousemove, mouseenter, mouseleave, pointermove are excluded as they are too noisy
+  const CAPTURE_EVENTS = ['click','dblclick','input','change','submit','focus','blur','keydown','keyup','mousedown','mouseup','wheel','contextmenu','pointerdown','pointerup'];
+  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: evt,
+        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
+        (async () => {
+          try {
+            // Dynamically load axe-core from CDN if not already loaded
+            if (!window.axe) {
+              const script = document.createElement('script');
+              script.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.2/axe.min.js';
+              script.crossOrigin = 'anonymous';
+              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: {
+                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: {
+                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: {} }, '*');
+}
+`;
+function generatePreviewModule(art, variantComponentName, variantName) {
+	const artModuleId = `virtual:musea-art:${art.path}`;
+	const escapedVariantName = escapeTemplate(variantName);
+	return `
+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: '' });
+
+window.__museaSetProps = (props) => {
+  // Clear old keys
+  for (const key of Object.keys(propsOverride)) {
+    delete propsOverride[key];
+  }
+  Object.assign(propsOverride, props);
+};
+
+window.__museaSetSlots = (slots) => {
+  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);
+    container.innerHTML = '';
+    container.className = 'musea-variant';
+    app.mount(container);
+    currentApp = app;
+
+    console.log('[musea-preview] Mounted variant: ${escapedVariantName}');
+    __museaInitAddons(container, '${escapedVariantName}');
+
+    // Override set-props to remount with raw component + props
+    if (RawComponent) {
+      window.__museaSetProps = (props) => {
+        for (const key of Object.keys(propsOverride)) {
+          delete propsOverride[key];
+        }
+        Object.assign(propsOverride, props);
+        remountWithProps(RawComponent);
+      };
+      window.__museaSetSlots = (slots) => {
+        Object.assign(slotsOverride, slots);
+        remountWithProps(RawComponent);
+      };
+    }
+  } 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>
+    \`;
+  }
+}
+
+function remountWithProps(Component) {
+  if (currentApp) {
+    currentApp.unmount();
+  }
+  const app = createApp({
+    setup() {
+      return () => {
+        const slotFns = {};
+        if (slotsOverride.default) {
+          slotFns.default = () => h('span', { innerHTML: slotsOverride.default });
+        }
+        return h('div', { class: 'musea-variant' }, [
+          h(Component, { ...propsOverride }, slotFns)
+        ]);
+      };
+    }
+  });
+  container.innerHTML = '';
+  app.mount(container);
+  currentApp = app;
+}
+
+mount();
+`;
+}
+function generateManifestModule(artFiles) {
+	const arts = Array.from(artFiles.values());
+	return `export const arts = ${JSON.stringify(arts, null, 2)};`;
+}
+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");
+	}
+	let code = `
+// Auto-generated module for: ${path.basename(filePath)}
+import { defineComponent, h } from 'vue';
+`;
+	if (componentImportPath && componentName) {
+		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)};
+`;
+	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 class="musea-variant" data-variant="${variant.name}">${escapedTemplate}</div>`;
+		if (componentName) code += `
+export const ${variantComponentName} = {
+  name: '${variantComponentName}',
+  components: { ${componentName} },
+  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;
+}
+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) {
+	return str.split(/[\s\-_]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+function escapeTemplate(str) {
+	return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n");
+}
+function generatePreviewModuleWithProps(art, variantComponentName, variantName, propsOverride) {
+	const artModuleId = `virtual:musea-art:${art.path}`;
+	const escapedVariantName = escapeTemplate(variantName);
+	const propsJson = JSON.stringify(propsOverride);
+	return `
+import { createApp, h } from 'vue';
+import * as artModule from '${artModuleId}';
+
+const container = document.getElementById('app');
+const propsOverride = ${propsJson};
+
+${MUSEA_ADDONS_INIT_CODE}
+
+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);
+    container.innerHTML = '';
+    container.className = 'musea-variant';
+    app.mount(container);
+    console.log('[musea-preview] Mounted variant: ${escapedVariantName} with props override');
+    __museaInitAddons(container, '${escapedVariantName}');
+  } 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();
+`;
+}
+function generatePreviewHtml(art, variant, basePath) {
+	const previewModuleUrl = `${basePath}/preview-module?art=${encodeURIComponent(art.path)}&variant=${encodeURIComponent(variant.name)}`;
+	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>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body {
+      width: 100%;
+      height: 100%;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #ffffff;
+    }
+    .musea-variant {
+      padding: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+    }
+    .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>`;
+}
+function escapeHtml(str) {
+	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
+}
+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.js.map