npm - @vizejs/vite-plugin-musea - Versions diffs - 0.11.0 → 0.12.0 - Mend

@vizejs/vite-plugin-musea 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/{a11y-Bvx5TJb8.d.ts → a11y-cQIJXM5k.d.ts} +2 -2
package/dist/{a11y-Bvx5TJb8.d.ts.map → a11y-cQIJXM5k.d.ts.map} +1 -1
package/dist/a11y.d.ts +2 -2
package/dist/cli.js +1 -1
package/dist/index.d.ts +50 -40
package/dist/index.d.ts.map +1 -1
package/dist/index.js +2144 -2015
package/dist/index.js.map +1 -1
package/dist/{vrt-Vb4aqPZE.d.ts → vrt-BuMkTrLK.d.ts} +22 -2
package/dist/vrt-BuMkTrLK.d.ts.map +1 -0
package/dist/{vrt-DP87vGIA.js → vrt-CrjRhMVE.js} +126 -97
package/dist/vrt-CrjRhMVE.js.map +1 -0
package/dist/vrt.d.ts +1 -1
package/dist/vrt.js +1 -1
package/package.json +4 -4
package/dist/vrt-DP87vGIA.js.map +0 -1
package/dist/vrt-Vb4aqPZE.d.ts.map +0 -1

package/dist/index.js CHANGED Viewed

@@ -1,1660 +1,210 @@
 import { MuseaA11yRunner } from "./a11y-C6xqILwZ.js";
 import { generateArtFile, writeArtFile } from "./autogen-ymQnARZK.js";
-import { MuseaVrtRunner, generateVrtJsonReport, generateVrtReport } from "./vrt-DP87vGIA.js";
+import { MuseaVrtRunner, generateVrtJsonReport, generateVrtReport } from "./vrt-CrjRhMVE.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
-		});
+//#region src/native-loader.ts
+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)}`);
 	}
-	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") || "$value" in obj && (typeof obj.$value === "string" || typeof obj.$value === "number");
-}
-/**
-* Normalize token to DesignToken interface.
-*/
-function normalizeToken(raw) {
-	const token = {
-		value: raw.value ?? raw.$value,
-		type: raw.type ?? raw.$type,
-		description: raw.description,
-		attributes: raw.attributes
-	};
-	if (raw.$tier === "primitive" || raw.$tier === "semantic") token.$tier = raw.$tier;
-	if (typeof raw.$reference === "string") token.$reference = raw.$reference;
-	return token;
-}
-/**
-* Format category name for display.
-*/
-function formatCategoryName(name) {
-	return name.replace(/[-_]/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
 }
 /**
-* Flatten nested categories into a flat map keyed by dot-path.
+* JS-based fallback for SFC analysis when native `analyzeSfc` is not available.
+* Uses regex parsing to extract props and emits from Vue SFC source.
 */
-function 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;
+function analyzeSfcFallback(source, _options) {
+	try {
+		const props = [];
+		const emits = [];
+		const scriptSetupMatch = source.match(/<script\s+[^>]*setup[^>]*>([\s\S]*?)<\/script>/);
+		if (!scriptSetupMatch) {
+			const scriptMatch = source.match(/<script[^>]*>([\s\S]*?)<\/script>/);
+			if (!scriptMatch) return {
+				props: [],
+				emits: []
+			};
 		}
-		if (cat.subcategories) {
-			const subMap = buildTokenMap(cat.subcategories, catPath);
-			Object.assign(map, subMap);
+		const scriptContent = scriptSetupMatch?.[1] || "";
+		const propsMatch = scriptContent.match(/defineProps\s*<\s*\{([\s\S]*?)\}>\s*\(/);
+		const propsMatch2 = scriptContent.match(/defineProps\s*<\s*\{([\s\S]*?)\}>/);
+		const propsBody = propsMatch?.[1] || propsMatch2?.[1];
+		if (propsBody) {
+			const lines = propsBody.split("\n");
+			let i = 0;
+			while (i < lines.length) {
+				const line = lines[i].trim();
+				if (line.startsWith("/**") || line.startsWith("*") || line.startsWith("*/")) {
+					i++;
+					continue;
+				}
+				const propMatch = line.match(/^(\w+)(\?)?:\s*(.+?)(?:;?\s*)$/);
+				if (propMatch) {
+					const name = propMatch[1];
+					const optional = !!propMatch[2];
+					let type = propMatch[3].replace(/;$/, "").trim();
+					const defaultPattern = new RegExp(`\\b${name}\\s*=\\s*([^,}\\n]+)`);
+					const defaultMatch = scriptContent.match(defaultPattern);
+					const defaultValue = defaultMatch ? defaultMatch[1].trim() : void 0;
+					props.push({
+						name,
+						type,
+						required: !optional && defaultValue === void 0,
+						...defaultValue !== void 0 ? { default_value: defaultValue } : {}
+					});
+				}
+				i++;
+			}
 		}
-	}
-	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;
+		const emitsMatch = scriptContent.match(/defineEmits\s*<\s*\{([\s\S]*?)\}>/);
+		if (emitsMatch) {
+			const emitsBody = emitsMatch[1];
+			const emitRegex = /(\w+)\s*:/g;
+			let match;
+			while ((match = emitRegex.exec(emitsBody)) !== null) emits.push(match[1]);
 		}
+		return {
+			props,
+			emits
+		};
+	} catch {
+		return {
+			props: [],
+			emits: []
+		};
 	}
-	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);
 }
+//#endregion
+//#region src/gallery.ts
 /**
-* Set a token at a dot-separated path in the raw JSON structure.
+* Gallery HTML generation for the Musea component gallery.
+*
+* Contains the inline gallery SPA template (used as a fallback when the
+* pre-built gallery is not available) and the gallery virtual module.
 */
-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.
+* Generate the inline gallery HTML page.
 */
-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;
-	};
+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>Design Tokens - Musea</title>
+  <title>Musea - Component Gallery</title>
+  <script>window.__MUSEA_BASE_PATH__='${basePath}';${themeScript}</script>
   <style>
     :root {
-      --musea-bg: #0d0d0d;
-      --musea-bg-secondary: #1a1815;
-      --musea-text: #e6e9f0;
-      --musea-text-muted: #7b8494;
-      --musea-accent: #a34828;
-      --musea-border: #3a3530;
+      --musea-bg-primary: #E6E2D6;
+      --musea-bg-secondary: #ddd9cd;
+      --musea-bg-tertiary: #d4d0c4;
+      --musea-bg-elevated: #E6E2D6;
+      --musea-accent: #121212;
+      --musea-accent-hover: #2a2a2a;
+      --musea-accent-subtle: rgba(18, 18, 18, 0.08);
+      --musea-text: #121212;
+      --musea-text-secondary: #3a3a3a;
+      --musea-text-muted: #6b6b6b;
+      --musea-border: #c8c4b8;
+      --musea-border-subtle: #d4d0c4;
+      --musea-success: #16a34a;
+      --musea-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+      --musea-radius-sm: 4px;
+      --musea-radius-md: 6px;
+      --musea-radius-lg: 8px;
+      --musea-transition: 0.15s ease;
     }
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      font-family: 'Inter', -apple-system, sans-serif;
-      background: var(--musea-bg);
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      background: var(--musea-bg-primary);
       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;
+      min-height: 100vh;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
     }
-    .token {
+    /* Header */
+    .header {
       background: var(--musea-bg-secondary);
-      border: 1px solid var(--musea-border);
-      border-radius: 8px;
-      padding: 1rem;
+      border-bottom: 1px solid var(--musea-border);
+      padding: 0 1.5rem;
+      height: 56px;
       display: flex;
-      gap: 1rem;
       align-items: center;
+      justify-content: space-between;
+      position: sticky;
+      top: 0;
+      z-index: 100;
     }
-    .token-preview {
-      flex-shrink: 0;
-      width: 48px;
-      height: 48px;
+    .header-left {
       display: flex;
       align-items: center;
-      justify-content: center;
+      gap: 1.5rem;
     }
-    .color-swatch {
-      width: 48px;
-      height: 48px;
-      border-radius: 8px;
-      border: 1px solid var(--musea-border);
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: var(--musea-accent);
+      text-decoration: none;
     }
-    .token-info {
-      flex: 1;
-      min-width: 0;
+    .logo-svg {
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
     }
-    .token-name {
-      font-weight: 600;
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.875rem;
+    .logo-icon svg {
+      width: 16px;
+      height: 16px;
+      color: var(--musea-text);
     }
-    .token-value {
+    .header-subtitle {
       color: var(--musea-text-muted);
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.75rem;
-      word-break: break-all;
+      font-size: 0.8125rem;
+      font-weight: 500;
+      padding-left: 1.5rem;
+      border-left: 1px solid var(--musea-border);
     }
-    .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)}`);
-	}
-}
-/**
-* JS-based fallback for SFC analysis when native `analyzeSfc` is not available.
-* Uses regex parsing to extract props and emits from Vue SFC source.
-*/
-function analyzeSfcFallback(source, _options) {
-	try {
-		const props = [];
-		const emits = [];
-		const scriptSetupMatch = source.match(/<script\s+[^>]*setup[^>]*>([\s\S]*?)<\/script>/);
-		if (!scriptSetupMatch) {
-			const scriptMatch = source.match(/<script[^>]*>([\s\S]*?)<\/script>/);
-			if (!scriptMatch) return {
-				props: [],
-				emits: []
-			};
-		}
-		const scriptContent = scriptSetupMatch?.[1] || "";
-		const propsMatch = scriptContent.match(/defineProps\s*<\s*\{([\s\S]*?)\}>\s*\(/);
-		const propsMatch2 = scriptContent.match(/defineProps\s*<\s*\{([\s\S]*?)\}>/);
-		const propsBody = propsMatch?.[1] || propsMatch2?.[1];
-		if (propsBody) {
-			const lines = propsBody.split("\n");
-			let i = 0;
-			while (i < lines.length) {
-				const line = lines[i].trim();
-				if (line.startsWith("/**") || line.startsWith("*") || line.startsWith("*/")) {
-					i++;
-					continue;
-				}
-				const propMatch = line.match(/^(\w+)(\?)?:\s*(.+?)(?:;?\s*)$/);
-				if (propMatch) {
-					const name = propMatch[1];
-					const optional = !!propMatch[2];
-					let type = propMatch[3].replace(/;$/, "").trim();
-					const defaultPattern = new RegExp(`\\b${name}\\s*=\\s*([^,}\\n]+)`);
-					const defaultMatch = scriptContent.match(defaultPattern);
-					const defaultValue = defaultMatch ? defaultMatch[1].trim() : void 0;
-					props.push({
-						name,
-						type,
-						required: !optional && defaultValue === void 0,
-						...defaultValue !== void 0 ? { default_value: defaultValue } : {}
-					});
-				}
-				i++;
-			}
-		}
-		const emitsMatch = scriptContent.match(/defineEmits\s*<\s*\{([\s\S]*?)\}>/);
-		if (emitsMatch) {
-			const emitsBody = emitsMatch[1];
-			const emitRegex = /(\w+)\s*:/g;
-			let match;
-			while ((match = emitRegex.exec(emitsBody)) !== null) emits.push(match[1]);
-		}
-		return {
-			props,
-			emits
-		};
-	} catch {
-		return {
-			props: [],
-			emits: []
-		};
-	}
-}
-/**
-* 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);
-	const previewCss = options.previewCss ?? [];
-	const previewSetup = options.previewSetup;
-	let config;
-	let server = null;
-	const artFiles = new Map();
-	let resolvedPreviewCss = [];
-	let resolvedPreviewSetup = null;
-	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;
-			}
-			resolvedPreviewCss = previewCss.map((cssPath) => path.isAbsolute(cssPath) ? cssPath : path.resolve(resolvedConfig.root, cssPath));
-			if (previewSetup) resolvedPreviewSetup = path.isAbsolute(previewSetup) ? previewSetup : path.resolve(resolvedConfig.root, previewSetup);
-		},
-		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/") || url.startsWith("/tests")) {
-					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>`);
-						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}/vendor/axe-core.min.js`, async (_req, res, _next) => {
-				try {
-					const require = createRequire(import.meta.url);
-					const axeCorePath = require.resolve("axe-core/axe.min.js");
-					const content = await fs.promises.readFile(axeCorePath, "utf-8");
-					res.setHeader("Content-Type", "application/javascript");
-					res.setHeader("Cache-Control", "public, max-age=86400");
-					res.end(content);
-				} catch {
-					res.statusCode = 404;
-					res.end("axe-core not installed");
-				}
-			});
-			devServer.middlewares.use(`${basePath}/preview-module`, async (req, res, _next) => {
-				const url = new URL(req.url || "", `http://localhost`);
-				const artPath = url.searchParams.get("art");
-				const variantName = url.searchParams.get("variant");
-				if (!artPath || !variantName) {
-					res.statusCode = 400;
-					res.end("Missing art or variant parameter");
-					return;
-				}
-				const art = artFiles.get(artPath);
-				if (!art) {
-					res.statusCode = 404;
-					res.end("Art not found");
-					return;
-				}
-				const variant = art.variants.find((v) => v.name === variantName);
-				if (!variant) {
-					res.statusCode = 404;
-					res.end("Variant not found");
-					return;
-				}
-				const variantComponentName = toPascalCase(variant.name);
-				const moduleCode = generatePreviewModule(art, variantComponentName, variant.name, resolvedPreviewCss, resolvedPreviewSetup);
-				try {
-					const result = await devServer.transformRequest(`virtual:musea-preview:${artPath}:${variantName}`);
-					if (result) {
-						res.setHeader("Content-Type", "application/javascript");
-						res.setHeader("Cache-Control", "no-cache");
-						res.end(result.code);
-						return;
-					}
-				} catch {}
-				res.setHeader("Content-Type", "application/javascript");
-				res.setHeader("Cache-Control", "no-cache");
-				res.end(moduleCode);
-			});
-			devServer.middlewares.use(`${basePath}/preview`, async (req, res, _next) => {
-				const url = new URL(req.url || "", `http://localhost`);
-				const artPath = url.searchParams.get("art");
-				const variantName = url.searchParams.get("variant");
-				if (!artPath || !variantName) {
-					res.statusCode = 400;
-					res.end("Missing art or variant parameter");
-					return;
-				}
-				const art = artFiles.get(artPath);
-				if (!art) {
-					res.statusCode = 404;
-					res.end("Art not found");
-					return;
-				}
-				const variant = art.variants.find((v) => v.name === variantName);
-				if (!variant) {
-					res.statusCode = 404;
-					res.end("Variant not found");
-					return;
-				}
-				const html = generatePreviewHtml(art, variant, basePath, config.base);
-				res.setHeader("Content-Type", "text/html");
-				res.end(html);
-			});
-			devServer.middlewares.use(`${basePath}/art`, async (req, res, next) => {
-				const url = new URL(req.url || "", "http://localhost");
-				const artPath = decodeURIComponent(url.pathname.slice(1));
-				if (!artPath) {
-					next();
-					return;
-				}
-				const art = artFiles.get(artPath);
-				if (!art) {
-					res.statusCode = 404;
-					res.end("Art not found: " + artPath);
-					return;
-				}
-				try {
-					const virtualId = `virtual:musea-art:${artPath}`;
-					const result = await devServer.transformRequest(virtualId);
-					if (result) {
-						res.setHeader("Content-Type", "application/javascript");
-						res.setHeader("Cache-Control", "no-cache");
-						res.end(result.code);
-					} else {
-						const moduleCode = generateArtModule(art, artPath);
-						res.setHeader("Content-Type", "application/javascript");
-						res.end(moduleCode);
-					}
-				} catch (err) {
-					console.error("[musea] Failed to transform art module:", err);
-					const moduleCode = generateArtModule(art, artPath);
-					res.setHeader("Content-Type", "application/javascript");
-					res.end(moduleCode);
-				}
-			});
-			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();
-							let palette;
-							if (binding.generateArtPalette) palette = binding.generateArtPalette(source, { filename: artPath$1 });
-							else palette = {
-								title: art$1.metadata.title,
-								controls: [],
-								groups: [],
-								json: "{}",
-								typescript: ""
-							};
-							if (palette.controls.length === 0 && art$1.metadata.component) {
-								const resolvedComponentPath = path.isAbsolute(art$1.metadata.component) ? art$1.metadata.component : path.resolve(path.dirname(artPath$1), art$1.metadata.component);
-								try {
-									const componentSource = await fs.promises.readFile(resolvedComponentPath, "utf-8");
-									const analysis = binding.analyzeSfc ? binding.analyzeSfc(componentSource, { filename: resolvedComponentPath }) : analyzeSfcFallback(componentSource, { filename: resolvedComponentPath });
-									if (analysis.props.length > 0) {
-										palette.controls = analysis.props.map((prop) => {
-											let control = "text";
-											if (prop.type === "boolean") control = "boolean";
-											else if (prop.type === "number") control = "number";
-											else if (prop.type.includes("|") && !prop.type.includes("=>")) control = "select";
-											const options$1 = [];
-											if (control === "select") {
-												const optionMatches = prop.type.match(/"([^"]+)"/g);
-												if (optionMatches) for (const opt of optionMatches) {
-													const val = opt.replace(/"/g, "");
-													options$1.push({
-														label: val,
-														value: val
-													});
-												}
-											}
-											return {
-												name: prop.name,
-												control,
-												default_value: prop.default_value !== void 0 ? prop.default_value === "true" ? true : prop.default_value === "false" ? false : typeof prop.default_value === "string" && prop.default_value.startsWith("\"") ? prop.default_value.replace(/^"|"$/g, "") : prop.default_value : void 0,
-												description: void 0,
-												required: prop.required,
-												options: options$1,
-												range: void 0,
-												group: void 0
-											};
-										});
-										palette.json = JSON.stringify({
-											title: palette.title,
-											controls: palette.controls
-										}, null, 2);
-										palette.typescript = `export interface ${palette.title}Props {\n${palette.controls.map((c) => `  ${c.name}${c.required ? "" : "?"}: ${c.control === "boolean" ? "boolean" : c.control === "number" ? "number" : c.control === "select" ? c.options.map((o) => `"${String(o.value)}"`).join(" | ") : "string"};`).join("\n")}\n}\n`;
-									}
-								} catch {}
-							}
-							sendJson(palette);
-						} catch (e) {
-							sendError(e instanceof Error ? e.message : String(e));
-						}
-						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 {
-									const analysis = analyzeSfcFallback(source, { filename: resolvedComponentPath });
-									sendJson(analysis);
-								}
-							} 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;
-									let formatted;
-									if (minIndent > 0) formatted = lines.map((line) => line.slice(minIndent)).join("\n");
-									else {
-										let restIndent = Infinity;
-										for (let i = 1; i < lines.length; i++) if (lines[i].trim()) {
-											const indent = lines[i].match(/^(\s*)/)?.[1].length || 0;
-											restIndent = Math.min(restIndent, indent);
-										}
-										if (restIndent === Infinity || restIndent === 0) formatted = lines.join("\n");
-										else formatted = lines.map((line, i) => i === 0 ? line : line.slice(restIndent)).join("\n");
-									}
-									return "```" + lang + "\n" + formatted + "```";
-								});
-								sendJson({
-									...doc,
-									markdown
-								});
-							} else sendJson({
-								markdown: "",
-								title: art$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, resolvedPreviewCss, resolvedPreviewSetup);
-							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() {
-			console.log(`[musea] config.root: ${config.root}, include: ${JSON.stringify(include)}`);
-			const files = await scanArtFiles(config.root, include, exclude, inlineArt);
-			console.log(`[musea] Found ${files.length} art files`);
-			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 + "?musea-virtual";
-			}
-			if (id.endsWith(".art.vue")) {
-				const resolved = path.resolve(config.root, id);
-				if (artFiles.has(resolved)) return VIRTUAL_MUSEA_PREFIX + resolved + "?musea-virtual";
-			}
-			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 + "?musea-virtual";
-			}
-			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, resolvedPreviewCss, resolvedPreviewSetup);
-					}
-				}
-			}
-			if (id.startsWith("\0musea-art:")) {
-				const artPath = id.slice(11).replace(/\?musea-virtual$/, "");
-				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).replace(/\?musea-virtual$/, "");
-				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 + "?musea-virtual";
-				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.isDefault,
-					skipVrt: v.skipVrt
-				})),
-				hasScriptSetup: isInline ? false : parsed.hasScriptSetup,
-				scriptSetupContent: !isInline && parsed.hasScriptSetup ? extractScriptSetupContent(source) : void 0,
-				hasScript: parsed.hasScript,
-				styleCount: parsed.styleCount,
-				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 PLACEHOLDER = "<<GLOBSTAR>>";
-	const regex = pattern.replaceAll("**", PLACEHOLDER).replace(/\./g, "\\.").replace(/\*/g, "[^/]*").replaceAll(PLACEHOLDER, ".*");
-	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>
-  <style>
-    :root {
-      --musea-bg-primary: #E6E2D6;
-      --musea-bg-secondary: #ddd9cd;
-      --musea-bg-tertiary: #d4d0c4;
-      --musea-bg-elevated: #E6E2D6;
-      --musea-accent: #121212;
-      --musea-accent-hover: #2a2a2a;
-      --musea-accent-subtle: rgba(18, 18, 18, 0.08);
-      --musea-text: #121212;
-      --musea-text-secondary: #3a3a3a;
-      --musea-text-muted: #6b6b6b;
-      --musea-border: #c8c4b8;
-      --musea-border-subtle: #d4d0c4;
-      --musea-success: #16a34a;
-      --musea-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
-      --musea-radius-sm: 4px;
-      --musea-radius-md: 6px;
-      --musea-radius-lg: 8px;
-      --musea-transition: 0.15s ease;
-    }
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: 'Helvetica Neue', Helvetica, Arial, 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: var(--musea-text);
-    }
-    .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 {
+    .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);
     }
@@ -2262,15 +812,103 @@ function generateGalleryHtml(basePath, themeConfig) {
 </body>
 </html>`;
 }
-function generateGalleryModule(basePath) {
-	return `
-export const basePath = '${basePath}';
-export async function loadArts() {
-  const res = await fetch(basePath + '/api/arts');
-  return res.json();
+/**
+* Generate the virtual gallery module code.
+*/
+function generateGalleryModule(basePath) {
+	return `
+export const basePath = '${basePath}';
+export async function loadArts() {
+  const res = await fetch(basePath + '/api/arts');
+  return res.json();
+}
+`;
+}
+//#endregion
+//#region src/utils.ts
+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 PLACEHOLDER = "<<GLOBSTAR>>";
+	const regex = pattern.replaceAll("**", PLACEHOLDER).replace(/\./g, "\\.").replace(/\*/g, "[^/]*").replaceAll(PLACEHOLDER, ".*");
+	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;
 }
-`;
+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 escapeHtml(str) {
+	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
+}
+/**
+* Build the theme config object from plugin options for runtime injection.
+*/
+function buildThemeConfig(theme) {
+	if (!theme) return void 0;
+	if (typeof theme === "string") return { default: theme };
+	const themes = Array.isArray(theme) ? theme : [theme];
+	const custom = {};
+	for (const t of themes) custom[t.name] = {
+		base: t.base,
+		colors: t.colors
+	};
+	return {
+		default: themes[0].name,
+		custom
+	};
 }
+//#endregion
+//#region src/preview.ts
 const MUSEA_ADDONS_INIT_CODE = `
 function __museaInitAddons(container, variantName) {
   // === DOM event capture ===
@@ -2553,422 +1191,1913 @@ function __museaInitAddons(container, variantName) {
         break;
       }
     }
-  });
+  });
+  // Notify parent that iframe is ready
+  window.parent.postMessage({ type: 'musea:ready', payload: {} }, '*');
+}
+`;
+function generatePreviewModule(art, variantComponentName, variantName, cssImports = [], previewSetup = null) {
+	const artModuleId = `virtual:musea-art:${art.path}`;
+	const escapedVariantName = escapeTemplate(variantName);
+	const cssImportStatements = cssImports.map((cssPath) => `import '${cssPath}';`).join("\n");
+	const setupImport = previewSetup ? `import __museaPreviewSetup from '${previewSetup}';` : "";
+	const setupCall = previewSetup ? "await __museaPreviewSetup(app);" : "";
+	return `
+${cssImportStatements}
+${setupImport}
+import { createApp, reactive, h } from 'vue';
+import * as artModule from '${artModuleId}';
+const container = document.getElementById('app');
+${MUSEA_ADDONS_INIT_CODE}
+let currentApp = null;
+const propsOverride = reactive({});
+const slotsOverride = reactive({ default: '' });
+window.__museaSetProps = (props) => {
+  // Clear old keys
+  for (const key of Object.keys(propsOverride)) {
+    delete propsOverride[key];
+  }
+  Object.assign(propsOverride, props);
+};
+window.__museaSetSlots = (slots) => {
+  for (const key of Object.keys(slotsOverride)) {
+    delete slotsOverride[key];
+  }
+  Object.assign(slotsOverride, slots);
+};
+async function mount() {
+  try {
+    // Get the specific variant component
+    const VariantComponent = artModule['${variantComponentName}'];
+    const RawComponent = artModule.__component__;
+    if (!VariantComponent) {
+      throw new Error('Variant component "${variantComponentName}" not found in art module');
+    }
+    // Create and mount the app
+    const app = createApp(VariantComponent);
+    ${setupCall}
+    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
+    const TargetComponent = RawComponent || VariantComponent;
+    window.__museaSetProps = (props) => {
+      for (const key of Object.keys(propsOverride)) {
+        delete propsOverride[key];
+      }
+      Object.assign(propsOverride, props);
+      remountWithProps(TargetComponent);
+    };
+    window.__museaSetSlots = (slots) => {
+      for (const key of Object.keys(slotsOverride)) {
+        delete slotsOverride[key];
+      }
+      Object.assign(slotsOverride, slots);
+      remountWithProps(TargetComponent);
+    };
+  } catch (error) {
+    console.error('[musea-preview] Failed to mount:', error);
+    container.innerHTML = \`
+      <div class="musea-error">
+        <div class="musea-error-title">Failed to render component</div>
+        <div>\${error.message}</div>
+        <pre>\${error.stack || ''}</pre>
+      </div>
+    \`;
+  }
+}
+async function remountWithProps(Component) {
+  if (currentApp) {
+    currentApp.unmount();
+  }
+  const app = createApp({
+    setup() {
+      return () => {
+        const slotFns = {};
+        for (const [name, content] of Object.entries(slotsOverride)) {
+          if (content) slotFns[name] = () => h('span', { innerHTML: content });
+        }
+        return h(Component, { ...propsOverride }, slotFns);
+      };
+    }
+  });
+  ${setupCall}
+  container.innerHTML = '';
+  app.mount(container);
+  currentApp = app;
+}
+mount();
+`;
+}
+function generatePreviewModuleWithProps(art, variantComponentName, variantName, propsOverride, cssImports = [], previewSetup = null) {
+	const artModuleId = `virtual:musea-art:${art.path}`;
+	const escapedVariantName = escapeTemplate(variantName);
+	const propsJson = JSON.stringify(propsOverride);
+	const cssImportStatements = cssImports.map((cssPath) => `import '${cssPath}';`).join("\n");
+	const setupImport = previewSetup ? `import __museaPreviewSetup from '${previewSetup}';` : "";
+	const setupCall = previewSetup ? "await __museaPreviewSetup(app);" : "";
+	return `
+${cssImportStatements}
+${setupImport}
+import { createApp, h } from 'vue';
+import * as artModule from '${artModuleId}';
+const container = document.getElementById('app');
+const propsOverride = ${propsJson};
+${MUSEA_ADDONS_INIT_CODE}
+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);
+    ${setupCall}
+    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, viteBase) {
+	const previewModuleUrl = `${_basePath}/preview-module?art=${encodeURIComponent(art.path)}&variant=${encodeURIComponent(variant.name)}`;
+	const base = (viteBase || "/").replace(/\/$/, "");
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(art.metadata.title)} - ${escapeHtml(variant.name)}</title>
+  <script type="module" src="${base}/@vite/client"></script>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body {
+      width: 100%;
+      height: 100%;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #ffffff;
+    }
+    .musea-variant {
+      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>`;
+}
+//#endregion
+//#region src/manifest.ts
+/**
+* Generate the virtual manifest module code containing all art file metadata.
+*/
+function generateManifestModule(artFiles) {
+	const arts = Array.from(artFiles.values());
+	return `export const arts = ${JSON.stringify(arts, null, 2)};`;
+}
+//#endregion
+//#region src/art-module.ts
+/**
+* Extract the content of the first <script setup> block from a Vue SFC source.
+*/
+function extractScriptSetupContent(source) {
+	const match = source.match(/<script\s+[^>]*setup[^>]*>([\s\S]*?)<\/script>/);
+	return match?.[1]?.trim();
+}
+/**
+* Parse script setup content into imports and setup body.
+* Returns the import lines, setup body lines, and all identifiers to expose.
+*/
+function parseScriptSetupForArt(content) {
+	const lines = content.split("\n");
+	const imports = [];
+	const setupBody = [];
+	const returnNames = new Set();
+	for (const line of lines) {
+		const trimmed = line.trim();
+		if (!trimmed || trimmed.startsWith("//")) continue;
+		if (trimmed.startsWith("import ")) {
+			imports.push(line);
+			const defaultMatch = trimmed.match(/^import\s+(\w+)/);
+			if (defaultMatch && defaultMatch[1] !== "type") returnNames.add(defaultMatch[1]);
+			const namedMatch = trimmed.match(/\{([^}]+)\}/);
+			if (namedMatch) for (const part of namedMatch[1].split(",")) {
+				const name = part.trim().split(/\s+as\s+/).pop()?.trim();
+				if (name && !name.startsWith("type ")) returnNames.add(name);
+			}
+		} else {
+			setupBody.push(line);
+			const constMatch = trimmed.match(/^(?:const|let|var)\s+(\w+)/);
+			if (constMatch) returnNames.add(constMatch[1]);
+			const destructMatch = trimmed.match(/^(?:const|let|var)\s+\{([^}]+)\}/);
+			if (destructMatch) for (const part of destructMatch[1].split(",")) {
+				const name = part.trim().split(/\s*:\s*/).shift()?.trim();
+				if (name) returnNames.add(name);
+			}
+			const arrayMatch = trimmed.match(/^(?:const|let|var)\s+\[([^\]]+)\]/);
+			if (arrayMatch) for (const part of arrayMatch[1].split(",")) {
+				const name = part.trim();
+				if (name && name !== "...") returnNames.add(name);
+			}
+		}
+	}
+	returnNames.delete("type");
+	return {
+		imports,
+		setupBody,
+		returnNames: [...returnNames]
+	};
+}
+function generateArtModule(art, filePath) {
+	let componentImportPath;
+	let componentName;
+	if (art.isInline && art.componentPath) {
+		componentImportPath = art.componentPath;
+		componentName = path.basename(art.componentPath, ".vue");
+	} else if (art.metadata.component) {
+		const comp = art.metadata.component;
+		componentImportPath = path.isAbsolute(comp) ? comp : path.resolve(path.dirname(filePath), comp);
+		componentName = path.basename(comp, ".vue");
+	}
+	const scriptSetup = art.scriptSetupContent ? parseScriptSetupForArt(art.scriptSetupContent) : null;
+	let code = `
+// Auto-generated module for: ${path.basename(filePath)}
+import { defineComponent, h } from 'vue';
+`;
+	if (scriptSetup) {
+		const artDir = path.dirname(filePath);
+		for (const imp of scriptSetup.imports) {
+			const resolved = imp.replace(/from\s+(['"])(\.[^'"]+)\1/, (_match, quote, relPath) => {
+				const absPath = path.resolve(artDir, relPath);
+				return `from ${quote}${absPath}${quote}`;
+			});
+			code += `${resolved}\n`;
+		}
+	}
+	if (componentImportPath && componentName) {
+		const alreadyImported = scriptSetup?.imports.some((imp) => {
+			if (imp.includes(`from '${componentImportPath}'`) || imp.includes(`from "${componentImportPath}"`)) return true;
+			return new RegExp(`^import\\s+${componentName}[\\s,]`).test(imp.trim());
+		});
+		if (!alreadyImported) 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 data-variant="${variant.name}">${escapedTemplate}</div>`;
+		const componentNames = new Set();
+		if (componentName) componentNames.add(componentName);
+		if (scriptSetup) {
+			for (const name of scriptSetup.returnNames) if (/^[A-Z]/.test(name)) componentNames.add(name);
+		}
+		const components = componentNames.size > 0 ? `  components: { ${[...componentNames].join(", ")} },\n` : "";
+		if (scriptSetup && scriptSetup.setupBody.length > 0) code += `
+export const ${variantComponentName} = defineComponent({
+  name: '${variantComponentName}',
+${components}  setup() {
+${scriptSetup.setupBody.map((l) => `    ${l}`).join("\n")}
+    return { ${scriptSetup.returnNames.join(", ")} };
+  },
+  template: \`${fullTemplate}\`,
+});
+`;
+		else if (componentName) code += `
+export const ${variantComponentName} = {
+  name: '${variantComponentName}',
+${components}  template: \`${fullTemplate}\`,
+};
+`;
+		else code += `
+export const ${variantComponentName} = {
+  name: '${variantComponentName}',
+  template: \`${fullTemplate}\`,
+};
+`;
+	}
+	const defaultVariant = art.variants.find((v) => v.isDefault) || art.variants[0];
+	if (defaultVariant) code += `
+export default ${toPascalCase(defaultVariant.name)};
+`;
+	return code;
+}
+//#endregion
+//#region src/server-middleware.ts
+/**
+* Register all Musea middleware on the given dev server.
+*
+* This sets up:
+* - Gallery SPA route (serves built SPA or inline HTML fallback)
+* - Gallery static assets (/assets/)
+* - axe-core vendor script
+* - Preview module route
+* - VRT preview route
+* - Art module route
+*/
+function registerMiddleware(devServer, ctx) {
+	const { basePath, themeConfig, artFiles } = ctx;
+	devServer.middlewares.use(basePath, async (req, res, next) => {
+		const url = req.url || "/";
+		if (url === "/" || url === "/index.html" || url.startsWith("/tokens") || url.startsWith("/component/") || url.startsWith("/tests")) {
+			const galleryDistDir = 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>`);
+				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}/vendor/axe-core.min.js`, async (_req, res, _next) => {
+		try {
+			const require = createRequire(import.meta.url);
+			const axeCorePath = require.resolve("axe-core/axe.min.js");
+			const content = await fs.promises.readFile(axeCorePath, "utf-8");
+			res.setHeader("Content-Type", "application/javascript");
+			res.setHeader("Cache-Control", "public, max-age=86400");
+			res.end(content);
+		} catch {
+			res.statusCode = 404;
+			res.end("axe-core not installed");
+		}
+	});
+	devServer.middlewares.use(`${basePath}/preview-module`, async (req, res, _next) => {
+		const url = new URL(req.url || "", `http://localhost`);
+		const artPath = url.searchParams.get("art");
+		const variantName = url.searchParams.get("variant");
+		if (!artPath || !variantName) {
+			res.statusCode = 400;
+			res.end("Missing art or variant parameter");
+			return;
+		}
+		const art = artFiles.get(artPath);
+		if (!art) {
+			res.statusCode = 404;
+			res.end("Art not found");
+			return;
+		}
+		const variant = art.variants.find((v) => v.name === variantName);
+		if (!variant) {
+			res.statusCode = 404;
+			res.end("Variant not found");
+			return;
+		}
+		const variantComponentName = toPascalCase(variant.name);
+		const moduleCode = generatePreviewModule(art, variantComponentName, variant.name, ctx.resolvedPreviewCss, ctx.resolvedPreviewSetup);
+		try {
+			const result = await devServer.transformRequest(`virtual:musea-preview:${artPath}:${variantName}`);
+			if (result) {
+				res.setHeader("Content-Type", "application/javascript");
+				res.setHeader("Cache-Control", "no-cache");
+				res.end(result.code);
+				return;
+			}
+		} catch {}
+		res.setHeader("Content-Type", "application/javascript");
+		res.setHeader("Cache-Control", "no-cache");
+		res.end(moduleCode);
+	});
+	devServer.middlewares.use(`${basePath}/preview`, async (req, res, _next) => {
+		const url = new URL(req.url || "", `http://localhost`);
+		const artPath = url.searchParams.get("art");
+		const variantName = url.searchParams.get("variant");
+		if (!artPath || !variantName) {
+			res.statusCode = 400;
+			res.end("Missing art or variant parameter");
+			return;
+		}
+		const art = artFiles.get(artPath);
+		if (!art) {
+			res.statusCode = 404;
+			res.end("Art not found");
+			return;
+		}
+		const variant = art.variants.find((v) => v.name === variantName);
+		if (!variant) {
+			res.statusCode = 404;
+			res.end("Variant not found");
+			return;
+		}
+		const config = devServer.config;
+		const html = generatePreviewHtml(art, variant, basePath, config.base);
+		res.setHeader("Content-Type", "text/html");
+		res.end(html);
+	});
+	devServer.middlewares.use(`${basePath}/art`, async (req, res, next) => {
+		const url = new URL(req.url || "", "http://localhost");
+		const artPath = decodeURIComponent(url.pathname.slice(1));
+		if (!artPath) {
+			next();
+			return;
+		}
+		const art = artFiles.get(artPath);
+		if (!art) {
+			res.statusCode = 404;
+			res.end("Art not found: " + artPath);
+			return;
+		}
+		try {
+			const virtualId = `virtual:musea-art:${artPath}`;
+			const result = await devServer.transformRequest(virtualId);
+			if (result) {
+				res.setHeader("Content-Type", "application/javascript");
+				res.setHeader("Cache-Control", "no-cache");
+				res.end(result.code);
+			} else {
+				const moduleCode = generateArtModule(art, artPath);
+				res.setHeader("Content-Type", "application/javascript");
+				res.end(moduleCode);
+			}
+		} catch (err) {
+			console.error("[musea] Failed to transform art module:", err);
+			const moduleCode = generateArtModule(art, artPath);
+			res.setHeader("Content-Type", "application/javascript");
+			res.end(moduleCode);
+		}
+	});
+}
-  // Notify parent that iframe is ready
-  window.parent.postMessage({ type: 'musea:ready', payload: {} }, '*');
+//#endregion
+//#region src/tokens/parser.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") || "$value" in obj && (typeof obj.$value === "string" || typeof obj.$value === "number");
+}
+/**
+* Normalize token to DesignToken interface.
+*/
+function normalizeToken(raw) {
+	const token = {
+		value: raw.value ?? raw.$value,
+		type: raw.type ?? raw.$type,
+		description: raw.description,
+		attributes: raw.attributes
+	};
+	if (raw.$tier === "primitive" || raw.$tier === "semantic") token.$tier = raw.$tier;
+	if (typeof raw.$reference === "string") token.$reference = raw.$reference;
+	return token;
+}
+/**
+* Format category name for display.
+*/
+function formatCategoryName(name) {
+	return name.replace(/[-_]/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+//#endregion
+//#region src/tokens/resolver.ts
+const REFERENCE_PATTERN = /^\{(.+)\}$/;
+const MAX_RESOLVE_DEPTH = 10;
+/**
+* Flatten nested categories into a flat map keyed by dot-path.
+*/
+function buildTokenMap(categories, prefix = []) {
+	const map = {};
+	for (const cat of categories) {
+		const catKey = cat.name.toLowerCase().replace(/\s+/g, "-");
+		const catPath = [...prefix, catKey];
+		for (const [name, token] of Object.entries(cat.tokens)) {
+			const dotPath = [...catPath, name].join(".");
+			map[dotPath] = token;
+		}
+		if (cat.subcategories) {
+			const subMap = buildTokenMap(cat.subcategories, catPath);
+			Object.assign(map, subMap);
+		}
+	}
+	return map;
+}
+/**
+* Resolve references in categories, setting $tier, $reference, and $resolvedValue.
+*/
+function resolveReferences(categories, tokenMap) {
+	for (const cat of categories) {
+		for (const token of Object.values(cat.tokens)) resolveTokenReference(token, tokenMap);
+		if (cat.subcategories) resolveReferences(cat.subcategories, tokenMap);
+	}
+}
+function resolveTokenReference(token, tokenMap) {
+	if (typeof token.value === "string") {
+		const match = token.value.match(REFERENCE_PATTERN);
+		if (match) {
+			token.$tier = token.$tier ?? "semantic";
+			token.$reference = match[1];
+			token.$resolvedValue = resolveValue(match[1], tokenMap, 0, 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;
+}
+/**
+* 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;
 }
-`;
-function generatePreviewModule(art, variantComponentName, variantName, cssImports = [], previewSetup = null) {
-	const artModuleId = `virtual:musea-art:${art.path}`;
-	const escapedVariantName = escapeTemplate(variantName);
-	const cssImportStatements = cssImports.map((cssPath) => `import '${cssPath}';`).join("\n");
-	const setupImport = previewSetup ? `import __museaPreviewSetup from '${previewSetup}';` : "";
-	const setupCall = previewSetup ? "await __museaPreviewSetup(app);" : "";
-	return `
-${cssImportStatements}
-${setupImport}
-import { createApp, reactive, h } from 'vue';
-import * as artModule from '${artModuleId}';
-const container = document.getElementById('app');
-${MUSEA_ADDONS_INIT_CODE}
-let currentApp = null;
-const propsOverride = reactive({});
-const slotsOverride = reactive({ default: '' });
-window.__museaSetProps = (props) => {
-  // Clear old keys
-  for (const key of Object.keys(propsOverride)) {
-    delete propsOverride[key];
-  }
-  Object.assign(propsOverride, props);
-};
-window.__museaSetSlots = (slots) => {
-  for (const key of Object.keys(slotsOverride)) {
-    delete slotsOverride[key];
-  }
-  Object.assign(slotsOverride, slots);
-};
-async function mount() {
-  try {
-    // Get the specific variant component
-    const VariantComponent = artModule['${variantComponentName}'];
-    const RawComponent = artModule.__component__;
-    if (!VariantComponent) {
-      throw new Error('Variant component "${variantComponentName}" not found in art module');
+//#endregion
+//#region src/tokens/generator.ts
+/**
+* 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.
+* Parses tokens and generates documentation in the specified format.
+*/
+async function processStyleDictionary(config) {
+	const categories = await parseTokens(config.tokensPath);
+	const outputDir = config.outputDir ?? ".vize/tokens";
+	const outputFormat = config.outputFormat ?? "html";
+	await fs.promises.mkdir(outputDir, { recursive: true });
+	let content;
+	let filename;
+	switch (outputFormat) {
+		case "html":
+			content = generateTokensHtml(categories);
+			filename = "tokens.html";
+			break;
+		case "markdown":
+			content = generateTokensMarkdown(categories);
+			filename = "tokens.md";
+			break;
+		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()
+		}
+	};
+}
-    // Create and mount the app
-    const app = createApp(VariantComponent);
-    ${setupCall}
-    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
-    const TargetComponent = RawComponent || VariantComponent;
-    window.__museaSetProps = (props) => {
-      for (const key of Object.keys(propsOverride)) {
-        delete propsOverride[key];
-      }
-      Object.assign(propsOverride, props);
-      remountWithProps(TargetComponent);
-    };
-    window.__museaSetSlots = (slots) => {
-      for (const key of Object.keys(slotsOverride)) {
-        delete slotsOverride[key];
-      }
-      Object.assign(slotsOverride, slots);
-      remountWithProps(TargetComponent);
-    };
-  } catch (error) {
-    console.error('[musea-preview] Failed to mount:', error);
-    container.innerHTML = \`
-      <div class="musea-error">
-        <div class="musea-error-title">Failed to render component</div>
-        <div>\${error.message}</div>
-        <pre>\${error.stack || ''}</pre>
-      </div>
-    \`;
-  }
+//#endregion
+//#region src/api-tokens.ts
+/** GET /api/tokens/usage */
+async function handleTokensUsage(ctx, sendJson) {
+	if (!ctx.tokensPath) {
+		sendJson({});
+		return;
+	}
+	try {
+		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const categories = await parseTokens(absoluteTokensPath);
+		const tokenMap = buildTokenMap(categories);
+		resolveReferences(categories, tokenMap);
+		const resolvedTokenMap = buildTokenMap(categories);
+		const usage = scanTokenUsage(ctx.artFiles, resolvedTokenMap);
+		sendJson(usage);
+	} catch (e) {
+		console.error("[musea] Failed to scan token usage:", e);
+		sendJson({});
+	}
+}
+/** GET /api/tokens */
+async function handleTokensGet(ctx, sendJson) {
+	if (!ctx.tokensPath) {
+		sendJson({
+			categories: [],
+			tokenMap: {},
+			meta: {
+				filePath: "",
+				tokenCount: 0,
+				primitiveCount: 0,
+				semanticCount: 0
+			}
+		});
+		return;
+	}
+	try {
+		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const categories = await parseTokens(absoluteTokensPath);
+		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)
+		});
+	}
+}
+/** POST /api/tokens (create) */
+async function handleTokensCreate(ctx, readBody, sendJson, sendError) {
+	if (!ctx.tokensPath) {
+		sendError("No tokens path configured", 400);
+		return;
+	}
+	const body = await readBody();
+	try {
+		const { path: dotPath, token } = JSON.parse(body);
+		if (!dotPath || !token || token.value === void 0) {
+			sendError("Missing required fields: path, token.value", 400);
+			return;
+		}
+		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const rawData = await readRawTokenFile(absoluteTokensPath);
+		const 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));
+	}
+}
+/** PUT /api/tokens (update) */
+async function handleTokensUpdate(ctx, readBody, sendJson, sendError) {
+	if (!ctx.tokensPath) {
+		sendError("No tokens path configured", 400);
+		return;
+	}
+	const body = await readBody();
+	try {
+		const { path: dotPath, token } = JSON.parse(body);
+		if (!dotPath || !token || token.value === void 0) {
+			sendError("Missing required fields: path, token.value", 400);
+			return;
+		}
+		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		if (token.$reference) {
+			const 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));
+	}
+}
+/** DELETE /api/tokens */
+async function handleTokensDelete(ctx, readBody, sendJson, sendError) {
+	if (!ctx.tokensPath) {
+		sendError("No tokens path configured", 400);
+		return;
+	}
+	const body = await readBody();
+	try {
+		const { path: dotPath } = JSON.parse(body);
+		if (!dotPath) {
+			sendError("Missing required field: path", 400);
+			return;
+		}
+		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const 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));
+	}
 }
-async function remountWithProps(Component) {
-  if (currentApp) {
-    currentApp.unmount();
-  }
-  const app = createApp({
-    setup() {
-      return () => {
-        const slotFns = {};
-        for (const [name, content] of Object.entries(slotsOverride)) {
-          if (content) slotFns[name] = () => h('span', { innerHTML: content });
-        }
-        return h(Component, { ...propsOverride }, slotFns);
-      };
-    }
-  });
-  ${setupCall}
-  container.innerHTML = '';
-  app.mount(container);
-  currentApp = app;
+//#endregion
+//#region src/api-routes.ts
+/** Helper to read the full request body as a string. */
+function collectBody(req) {
+	return new Promise((resolve) => {
+		let body = "";
+		req.on("data", (chunk) => {
+			body += chunk;
+		});
+		req.on("end", () => resolve(body));
+	});
+}
+/**
+* Create the API middleware handler for the Musea gallery.
+*
+* Returns a Connect-compatible middleware function that handles all
+* `/api/...` sub-routes under the configured basePath.
+*/
+function createApiMiddleware(ctx) {
+	return async (req, res, next) => {
+		const sendJson = (data, status = 200) => {
+			res.statusCode = status;
+			res.setHeader("Content-Type", "application/json");
+			res.end(JSON.stringify(data));
+		};
+		const sendError = (message, status = 500) => {
+			sendJson({ error: message }, status);
+		};
+		const readBody = () => collectBody(req);
+		const url = req.url || "/";
+		if (url === "/arts" && req.method === "GET") {
+			sendJson(Array.from(ctx.artFiles.values()));
+			return;
+		}
+		if (url === "/tokens/usage" && req.method === "GET") {
+			await handleTokensUsage(ctx, sendJson);
+			return;
+		}
+		if (url === "/tokens" && req.method === "GET") {
+			await handleTokensGet(ctx, sendJson);
+			return;
+		}
+		if (url === "/tokens" && req.method === "POST") {
+			await handleTokensCreate(ctx, readBody, sendJson, sendError);
+			return;
+		}
+		if (url === "/tokens" && req.method === "PUT") {
+			await handleTokensUpdate(ctx, readBody, sendJson, sendError);
+			return;
+		}
+		if (url === "/tokens" && req.method === "DELETE") {
+			await handleTokensDelete(ctx, readBody, sendJson, sendError);
+			return;
+		}
+		if (url?.startsWith("/arts/") && req.method === "PUT") {
+			const rest = url.slice(6);
+			const sourceMatch = rest.match(/^(.+)\/source$/);
+			if (sourceMatch) {
+				const artPath = decodeURIComponent(sourceMatch[1]);
+				const art = ctx.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 ctx.processArtFile(artPath);
+						sendJson({ success: true });
+					} catch (e) {
+						sendError(e instanceof Error ? e.message : String(e));
+					}
+				});
+				return;
+			}
+			next();
+			return;
+		}
+		if (url?.startsWith("/arts/") && req.method === "GET") {
+			const rest = url.slice(6);
+			const sourceMatch = rest.match(/^(.+)\/source$/);
+			const paletteMatch = rest.match(/^(.+)\/palette$/);
+			const analysisMatch = rest.match(/^(.+)\/analysis$/);
+			const docsMatch = rest.match(/^(.+)\/docs$/);
+			const a11yMatch = rest.match(/^(.+)\/variants\/([^/]+)\/a11y$/);
+			if (sourceMatch) {
+				await handleArtSource(ctx, sourceMatch, sendJson, sendError);
+				return;
+			}
+			if (paletteMatch) {
+				await handleArtPalette(ctx, paletteMatch, sendJson, sendError);
+				return;
+			}
+			if (analysisMatch) {
+				await handleArtAnalysis(ctx, analysisMatch, sendJson, sendError);
+				return;
+			}
+			if (docsMatch) {
+				await handleArtDocs(ctx, docsMatch, sendJson, sendError);
+				return;
+			}
+			if (a11yMatch) {
+				handleArtA11y(ctx, a11yMatch, sendJson, sendError);
+				return;
+			}
+			const artPath = decodeURIComponent(rest);
+			const art = ctx.artFiles.get(artPath);
+			if (art) sendJson(art);
+			else sendError("Art not found", 404);
+			return;
+		}
+		if (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 = ctx.artFiles.get(reqArtPath);
+					if (!art) {
+						sendError("Art not found", 404);
+						return;
+					}
+					const variant = art.variants.find((v) => v.name === variantName);
+					if (!variant) {
+						sendError("Variant not found", 404);
+						return;
+					}
+					const variantComponentName = toPascalCase(variant.name);
+					const moduleCode = generatePreviewModuleWithProps(art, variantComponentName, variant.name, propsOverride, ctx.resolvedPreviewCss, ctx.resolvedPreviewSetup);
+					res.setHeader("Content-Type", "application/javascript");
+					res.end(moduleCode);
+				} catch (e) {
+					sendError(e instanceof Error ? e.message : String(e));
+				}
+			});
+			return;
+		}
+		if (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 (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(ctx.config.root, ".vize/snapshots") });
+					const port = ctx.getDevServerPort();
+					const baseUrl = `http://localhost:${port}`;
+					let artsToTest = Array.from(ctx.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();
+	};
+}
+/** GET /api/arts/:path/source */
+async function handleArtSource(ctx, match, sendJson, sendError) {
+	const artPath = decodeURIComponent(match[1]);
+	const art = ctx.artFiles.get(artPath);
+	if (!art) {
+		sendError("Art not found", 404);
+		return;
+	}
+	try {
+		const source = await fs.promises.readFile(artPath, "utf-8");
+		sendJson({
+			source,
+			path: artPath
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+/** GET /api/arts/:path/palette */
+async function handleArtPalette(ctx, match, sendJson, sendError) {
+	const artPath = decodeURIComponent(match[1]);
+	const art = ctx.artFiles.get(artPath);
+	if (!art) {
+		sendError("Art not found", 404);
+		return;
+	}
+	try {
+		const source = await fs.promises.readFile(artPath, "utf-8");
+		const binding = loadNative();
+		let palette;
+		if (binding.generateArtPalette) palette = binding.generateArtPalette(source, { filename: artPath });
+		else palette = {
+			title: art.metadata.title,
+			controls: [],
+			groups: [],
+			json: "{}",
+			typescript: ""
+		};
+		if (palette.controls.length === 0 && art.metadata.component) {
+			const resolvedComponentPath = path.isAbsolute(art.metadata.component) ? art.metadata.component : path.resolve(path.dirname(artPath), art.metadata.component);
+			try {
+				const componentSource = await fs.promises.readFile(resolvedComponentPath, "utf-8");
+				const analysis = binding.analyzeSfc ? binding.analyzeSfc(componentSource, { filename: resolvedComponentPath }) : analyzeSfcFallback(componentSource, { filename: resolvedComponentPath });
+				if (analysis.props.length > 0) {
+					palette.controls = analysis.props.map((prop) => {
+						let control = "text";
+						if (prop.type === "boolean") control = "boolean";
+						else if (prop.type === "number") control = "number";
+						else if (prop.type.includes("|") && !prop.type.includes("=>")) control = "select";
+						const options = [];
+						if (control === "select") {
+							const optionMatches = prop.type.match(/"([^"]+)"/g);
+							if (optionMatches) for (const opt of optionMatches) {
+								const val = opt.replace(/"/g, "");
+								options.push({
+									label: val,
+									value: val
+								});
+							}
+						}
+						return {
+							name: prop.name,
+							control,
+							default_value: prop.default_value !== void 0 ? prop.default_value === "true" ? true : prop.default_value === "false" ? false : typeof prop.default_value === "string" && prop.default_value.startsWith("\"") ? prop.default_value.replace(/^"|"$/g, "") : prop.default_value : void 0,
+							description: void 0,
+							required: prop.required,
+							options,
+							range: void 0,
+							group: void 0
+						};
+					});
+					palette.json = JSON.stringify({
+						title: palette.title,
+						controls: palette.controls
+					}, null, 2);
+					palette.typescript = `export interface ${palette.title}Props {\n${palette.controls.map((c) => `  ${c.name}${c.required ? "" : "?"}: ${c.control === "boolean" ? "boolean" : c.control === "number" ? "number" : c.control === "select" ? c.options.map((o) => `"${String(o.value)}"`).join(" | ") : "string"};`).join("\n")}\n}\n`;
+				}
+			} catch {}
+		}
+		sendJson(palette);
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
 }
-mount();
-`;
+/** GET /api/arts/:path/analysis */
+async function handleArtAnalysis(ctx, match, sendJson, sendError) {
+	const artPath = decodeURIComponent(match[1]);
+	const art = ctx.artFiles.get(artPath);
+	if (!art) {
+		sendError("Art not found", 404);
+		return;
+	}
+	try {
+		const resolvedComponentPath = art.isInline && art.componentPath ? art.componentPath : art.metadata.component ? path.isAbsolute(art.metadata.component) ? art.metadata.component : path.resolve(path.dirname(artPath), art.metadata.component) : null;
+		if (resolvedComponentPath) {
+			const source = await fs.promises.readFile(resolvedComponentPath, "utf-8");
+			const binding = loadNative();
+			if (binding.analyzeSfc) {
+				const analysis = binding.analyzeSfc(source, { filename: resolvedComponentPath });
+				sendJson(analysis);
+			} else {
+				const analysis = analyzeSfcFallback(source, { filename: resolvedComponentPath });
+				sendJson(analysis);
+			}
+		} else sendJson({
+			props: [],
+			emits: []
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
 }
-function generateManifestModule(artFiles) {
-	const arts = Array.from(artFiles.values());
-	return `export const arts = ${JSON.stringify(arts, null, 2)};`;
+/** GET /api/arts/:path/docs */
+async function handleArtDocs(ctx, match, sendJson, sendError) {
+	const artPath = decodeURIComponent(match[1]);
+	const art = ctx.artFiles.get(artPath);
+	if (!art) {
+		sendError("Art not found", 404);
+		return;
+	}
+	try {
+		const source = await fs.promises.readFile(artPath, "utf-8");
+		const binding = loadNative();
+		if (binding.generateArtDoc) {
+			const doc = binding.generateArtDoc(source, { filename: artPath });
+			let markdown = doc.markdown || "";
+			const componentName = art.metadata.title || "Component";
+			markdown = markdown.replace(/<Self(\s|>|\/)/g, `<${componentName}$1`).replace(/<\/Self>/g, `</${componentName}>`);
+			markdown = markdown.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
+				const lines = code.split("\n");
+				let minIndent = Infinity;
+				for (const line of lines) if (line.trim()) {
+					const indent = line.match(/^(\s*)/)?.[1].length || 0;
+					minIndent = Math.min(minIndent, indent);
+				}
+				if (minIndent === Infinity) minIndent = 0;
+				let formatted;
+				if (minIndent > 0) formatted = lines.map((line) => line.slice(minIndent)).join("\n");
+				else {
+					let restIndent = Infinity;
+					for (let i = 1; i < lines.length; i++) if (lines[i].trim()) {
+						const indent = lines[i].match(/^(\s*)/)?.[1].length || 0;
+						restIndent = Math.min(restIndent, indent);
+					}
+					if (restIndent === Infinity || restIndent === 0) formatted = lines.join("\n");
+					else formatted = lines.map((line, i) => i === 0 ? line : line.slice(restIndent)).join("\n");
+				}
+				return "```" + lang + "\n" + formatted + "```";
+			});
+			sendJson({
+				...doc,
+				markdown
+			});
+		} else sendJson({
+			markdown: "",
+			title: art.metadata.title,
+			variant_count: art.variants.length
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
 }
-/**
-* Extract the content of the first <script setup> block from a Vue SFC source.
-*/
-function extractScriptSetupContent(source) {
-	const match = source.match(/<script\s+[^>]*setup[^>]*>([\s\S]*?)<\/script>/);
-	return match?.[1]?.trim();
+/** GET /api/arts/:path/variants/:name/a11y */
+function handleArtA11y(ctx, match, sendJson, sendError) {
+	const artPath = decodeURIComponent(match[1]);
+	const _variantName = decodeURIComponent(match[2]);
+	const art = ctx.artFiles.get(artPath);
+	if (!art) {
+		sendError("Art not found", 404);
+		return;
+	}
+	sendJson({
+		violations: [],
+		passes: 0,
+		incomplete: 0
+	});
 }
+//#endregion
+//#region src/plugin.ts
+const VIRTUAL_MUSEA_PREFIX = "\0musea:";
+const VIRTUAL_GALLERY = "\0musea-gallery";
+const VIRTUAL_MANIFEST = "\0musea-manifest";
 /**
-* Parse script setup content into imports and setup body.
-* Returns the import lines, setup body lines, and all identifiers to expose.
+* Create Musea Vite plugin.
 */
-function parseScriptSetupForArt(content) {
-	const lines = content.split("\n");
-	const imports = [];
-	const setupBody = [];
-	const returnNames = new Set();
-	for (const line of lines) {
-		const trimmed = line.trim();
-		if (!trimmed || trimmed.startsWith("//")) continue;
-		if (trimmed.startsWith("import ")) {
-			imports.push(line);
-			const defaultMatch = trimmed.match(/^import\s+(\w+)/);
-			if (defaultMatch && defaultMatch[1] !== "type") returnNames.add(defaultMatch[1]);
-			const namedMatch = trimmed.match(/\{([^}]+)\}/);
-			if (namedMatch) for (const part of namedMatch[1].split(",")) {
-				const name = part.trim().split(/\s+as\s+/).pop()?.trim();
-				if (name && !name.startsWith("type ")) returnNames.add(name);
+function musea(options = {}) {
+	let include = options.include ?? ["**/*.art.vue"];
+	let exclude = options.exclude ?? ["node_modules/**", "dist/**"];
+	let basePath = options.basePath ?? "/__musea__";
+	let storybookCompat = options.storybookCompat ?? false;
+	const storybookOutDir = options.storybookOutDir ?? ".storybook/stories";
+	let inlineArt = options.inlineArt ?? false;
+	const tokensPath = options.tokensPath;
+	const themeConfig = buildThemeConfig(options.theme);
+	const previewCss = options.previewCss ?? [];
+	const previewSetup = options.previewSetup;
+	let config;
+	let server = null;
+	const artFiles = new Map();
+	let resolvedPreviewCss = [];
+	let resolvedPreviewSetup = null;
+	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;
 			}
-		} else {
-			setupBody.push(line);
-			const constMatch = trimmed.match(/^(?:const|let|var)\s+(\w+)/);
-			if (constMatch) returnNames.add(constMatch[1]);
-			const destructMatch = trimmed.match(/^(?:const|let|var)\s+\{([^}]+)\}/);
-			if (destructMatch) for (const part of destructMatch[1].split(",")) {
-				const name = part.trim().split(/\s*:\s*/).shift()?.trim();
-				if (name) returnNames.add(name);
+			resolvedPreviewCss = previewCss.map((cssPath) => path.isAbsolute(cssPath) ? cssPath : path.resolve(resolvedConfig.root, cssPath));
+			if (previewSetup) resolvedPreviewSetup = path.isAbsolute(previewSetup) ? previewSetup : path.resolve(resolvedConfig.root, previewSetup);
+		},
+		configureServer(devServer) {
+			server = devServer;
+			registerMiddleware(devServer, {
+				basePath,
+				themeConfig,
+				artFiles,
+				resolvedPreviewCss,
+				resolvedPreviewSetup
+			});
+			devServer.middlewares.use(`${basePath}/api`, createApiMiddleware({
+				config,
+				artFiles,
+				tokensPath,
+				basePath,
+				resolvedPreviewCss,
+				resolvedPreviewSetup,
+				processArtFile,
+				getDevServerPort: () => devServer.config.server.port || 5173
+			}));
+			devServer.watcher.on("change", async (file) => {
+				if (file.endsWith(".art.vue") && shouldProcess(file, include, exclude, config.root)) {
+					await processArtFile(file);
+					console.log(`[musea] Reloaded: ${path.relative(config.root, file)}`);
+				}
+				if (inlineArt && file.endsWith(".vue") && !file.endsWith(".art.vue")) {
+					const hadArt = artFiles.has(file);
+					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() {
+			console.log(`[musea] config.root: ${config.root}, include: ${JSON.stringify(include)}`);
+			const files = await scanArtFiles(config.root, include, exclude, inlineArt);
+			console.log(`[musea] Found ${files.length} art files`);
+			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 + "?musea-virtual";
 			}
-			const arrayMatch = trimmed.match(/^(?:const|let|var)\s+\[([^\]]+)\]/);
-			if (arrayMatch) for (const part of arrayMatch[1].split(",")) {
-				const name = part.trim();
-				if (name && name !== "...") returnNames.add(name);
+			if (id.endsWith(".art.vue")) {
+				const resolved = path.resolve(config.root, id);
+				if (artFiles.has(resolved)) return VIRTUAL_MUSEA_PREFIX + resolved + "?musea-virtual";
 			}
+			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 + "?musea-virtual";
+			}
+			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, resolvedPreviewCss, resolvedPreviewSetup);
+					}
+				}
+			}
+			if (id.startsWith("\0musea-art:")) {
+				const artPath = id.slice(11).replace(/\?musea-virtual$/, "");
+				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).replace(/\?musea-virtual$/, "");
+				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 + "?musea-virtual";
+				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;
 		}
-	}
-	returnNames.delete("type");
-	return {
-		imports,
-		setupBody,
-		returnNames: [...returnNames]
-	};
-}
-function generateArtModule(art, filePath) {
-	let componentImportPath;
-	let componentName;
-	if (art.isInline && art.componentPath) {
-		componentImportPath = art.componentPath;
-		componentName = path.basename(art.componentPath, ".vue");
-	} else if (art.metadata.component) {
-		const comp = art.metadata.component;
-		componentImportPath = path.isAbsolute(comp) ? comp : path.resolve(path.dirname(filePath), comp);
-		componentName = path.basename(comp, ".vue");
-	}
-	const scriptSetup = art.scriptSetupContent ? parseScriptSetupForArt(art.scriptSetupContent) : null;
-	let code = `
-// Auto-generated module for: ${path.basename(filePath)}
-import { defineComponent, h } from 'vue';
-`;
-	if (scriptSetup) {
-		const artDir = path.dirname(filePath);
-		for (const imp of scriptSetup.imports) {
-			const resolved = imp.replace(/from\s+(['"])(\.[^'"]+)\1/, (_match, quote, relPath) => {
-				const absPath = path.resolve(artDir, relPath);
-				return `from ${quote}${absPath}${quote}`;
-			});
-			code += `${resolved}\n`;
-		}
-	}
-	if (componentImportPath && componentName) {
-		const alreadyImported = scriptSetup?.imports.some((imp) => {
-			if (imp.includes(`from '${componentImportPath}'`) || imp.includes(`from "${componentImportPath}"`)) return true;
-			return new RegExp(`^import\\s+${componentName}[\\s,]`).test(imp.trim());
-		});
-		if (!alreadyImported) 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 data-variant="${variant.name}">${escapedTemplate}</div>`;
-		const componentNames = new Set();
-		if (componentName) componentNames.add(componentName);
-		if (scriptSetup) {
-			for (const name of scriptSetup.returnNames) if (/^[A-Z]/.test(name)) componentNames.add(name);
+	};
+	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.isDefault,
+					skipVrt: v.skipVrt
+				})),
+				hasScriptSetup: isInline ? false : parsed.hasScriptSetup,
+				scriptSetupContent: !isInline && parsed.hasScriptSetup ? extractScriptSetupContent(source) : void 0,
+				hasScript: parsed.hasScript,
+				styleCount: parsed.styleCount,
+				isInline,
+				componentPath: isInline ? filePath : void 0
+			};
+			artFiles.set(filePath, info);
+		} catch (e) {
+			console.error(`[musea] Failed to process ${filePath}:`, e);
 		}
-		const components = componentNames.size > 0 ? `  components: { ${[...componentNames].join(", ")} },\n` : "";
-		if (scriptSetup && scriptSetup.setupBody.length > 0) code += `
-export const ${variantComponentName} = defineComponent({
-  name: '${variantComponentName}',
-${components}  setup() {
-${scriptSetup.setupBody.map((l) => `    ${l}`).join("\n")}
-    return { ${scriptSetup.returnNames.join(", ")} };
-  },
-  template: \`${fullTemplate}\`,
-});
-`;
-		else if (componentName) code += `
-export const ${variantComponentName} = {
-  name: '${variantComponentName}',
-${components}  template: \`${fullTemplate}\`,
-};
-`;
-		else code += `
-export const ${variantComponentName} = {
-  name: '${variantComponentName}',
-  template: \`${fullTemplate}\`,
-};
-`;
-	}
-	const defaultVariant = art.variants.find((v) => v.isDefault) || art.variants[0];
-	if (defaultVariant) code += `
-export default ${toPascalCase(defaultVariant.name)};
-`;
-	return code;
-}
-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);
 	}
+	return [mainPlugin];
 }
-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, cssImports = [], previewSetup = null) {
-	const artModuleId = `virtual:musea-art:${art.path}`;
-	const escapedVariantName = escapeTemplate(variantName);
-	const propsJson = JSON.stringify(propsOverride);
-	const cssImportStatements = cssImports.map((cssPath) => `import '${cssPath}';`).join("\n");
-	const setupImport = previewSetup ? `import __museaPreviewSetup from '${previewSetup}';` : "";
-	const setupCall = previewSetup ? "await __museaPreviewSetup(app);" : "";
-	return `
-${cssImportStatements}
-${setupImport}
-import { createApp, h } from 'vue';
-import * as artModule from '${artModuleId}';
-const container = document.getElementById('app');
-const propsOverride = ${propsJson};
-${MUSEA_ADDONS_INIT_CODE}
-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);
-    ${setupCall}
-    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, viteBase) {
-	const previewModuleUrl = `${_basePath}/preview-module?art=${encodeURIComponent(art.path)}&variant=${encodeURIComponent(variant.name)}`;
-	const base = (viteBase || "/").replace(/\/$/, "");
-	return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${escapeHtml(art.metadata.title)} - ${escapeHtml(variant.name)}</title>
-  <script type="module" src="${base}/@vite/client"></script>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    html, body {
-      width: 100%;
-      height: 100%;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #ffffff;
-    }
-    .musea-variant {
-      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;");
-}
+//#endregion
+//#region src/index.ts
 var src_default = musea;
 //#endregion