@vizejs/vite-plugin-musea 0.0.1-alpha.11 → 0.0.1-alpha.113

package/dist/index.js

@@ -1,7 +1,10 @@
-import { MuseaVrtRunner, generateVrtJsonReport, generateVrtReport } from "./vrt-DRwtnkE5.js";
-import fs from "node:fs";
+import { MuseaA11yRunner } from "./a11y-C6xqILwZ.js";
+import { generateArtFile, writeArtFile } from "./autogen-ymQnARZK.js";
+import { MuseaVrtRunner, generateVrtJsonReport, generateVrtReport } from "./vrt-DP87vGIA.js";
 import path from "node:path";
 import { createRequire } from "node:module";
+import fs from "node:fs";
+import { vizeConfigStore } from "@vizejs/vite-plugin";
 
 //#region src/style-dictionary.ts
 /**
@@ -83,18 +86,21 @@ function extractSubcategories(obj) {
 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");
+	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) {
-	return {
-		value: raw.value,
-		type: raw.type,
+	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.
@@ -103,6 +109,168 @@ function formatCategoryName(name) {
 	return name.replace(/[-_]/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
 }
 /**
+* Flatten nested categories into a flat map keyed by dot-path.
+*/
+function buildTokenMap(categories, prefix = []) {
+	const map = {};
+	for (const cat of categories) {
+		const catKey = cat.name.toLowerCase().replace(/\s+/g, "-");
+		const catPath = [...prefix, catKey];
+		for (const [name, token] of Object.entries(cat.tokens)) {
+			const dotPath = [...catPath, name].join(".");
+			map[dotPath] = token;
+		}
+		if (cat.subcategories) {
+			const subMap = buildTokenMap(cat.subcategories, catPath);
+			Object.assign(map, subMap);
+		}
+	}
+	return map;
+}
+const REFERENCE_PATTERN = /^\{(.+)\}$/;
+const MAX_RESOLVE_DEPTH = 10;
+/**
+* Resolve references in categories, setting $tier, $reference, and $resolvedValue.
+*/
+function resolveReferences(categories, tokenMap) {
+	for (const cat of categories) {
+		for (const token of Object.values(cat.tokens)) resolveTokenReference(token, tokenMap);
+		if (cat.subcategories) resolveReferences(cat.subcategories, tokenMap);
+	}
+}
+function resolveTokenReference(token, tokenMap) {
+	if (typeof token.value === "string") {
+		const match = token.value.match(REFERENCE_PATTERN);
+		if (match) {
+			token.$tier = token.$tier ?? "semantic";
+			token.$reference = match[1];
+			token.$resolvedValue = resolveValue(match[1], tokenMap, 0, new Set());
+			return;
+		}
+	}
+	token.$tier = token.$tier ?? "primitive";
+}
+function resolveValue(ref, tokenMap, depth, visited) {
+	if (depth >= MAX_RESOLVE_DEPTH || visited.has(ref)) return void 0;
+	visited.add(ref);
+	const target = tokenMap[ref];
+	if (!target) return void 0;
+	if (typeof target.value === "string") {
+		const match = target.value.match(REFERENCE_PATTERN);
+		if (match) return resolveValue(match[1], tokenMap, depth + 1, visited);
+	}
+	return target.value;
+}
+/**
+* Read raw JSON token file.
+*/
+async function readRawTokenFile(tokensPath) {
+	const content = await fs.promises.readFile(tokensPath, "utf-8");
+	return JSON.parse(content);
+}
+/**
+* Write raw JSON token file atomically (write tmp, rename).
+*/
+async function writeRawTokenFile(tokensPath, data) {
+	const tmpPath = tokensPath + ".tmp";
+	await fs.promises.writeFile(tmpPath, JSON.stringify(data, null, 2) + "\n", "utf-8");
+	await fs.promises.rename(tmpPath, tokensPath);
+}
+/**
+* Set a token at a dot-separated path in the raw JSON structure.
+*/
+function setTokenAtPath(data, dotPath, token) {
+	const parts = dotPath.split(".");
+	let current = data;
+	for (let i = 0; i < parts.length - 1; i++) {
+		const key = parts[i];
+		if (typeof current[key] !== "object" || current[key] === null) current[key] = {};
+		current = current[key];
+	}
+	const leafKey = parts[parts.length - 1];
+	const raw = { value: token.value };
+	if (token.type) raw.type = token.type;
+	if (token.description) raw.description = token.description;
+	if (token.$tier) raw.$tier = token.$tier;
+	if (token.$reference) raw.$reference = token.$reference;
+	if (token.attributes) raw.attributes = token.attributes;
+	current[leafKey] = raw;
+}
+/**
+* Delete a token at a dot-separated path, cleaning empty parents.
+*/
+function deleteTokenAtPath(data, dotPath) {
+	const parts = dotPath.split(".");
+	const parents = [];
+	let current = data;
+	for (let i = 0; i < parts.length - 1; i++) {
+		const key = parts[i];
+		if (typeof current[key] !== "object" || current[key] === null) return false;
+		parents.push({
+			obj: current,
+			key
+		});
+		current = current[key];
+	}
+	const leafKey = parts[parts.length - 1];
+	if (!(leafKey in current)) return false;
+	delete current[leafKey];
+	for (let i = parents.length - 1; i >= 0; i--) {
+		const { obj, key } = parents[i];
+		const child = obj[key];
+		if (Object.keys(child).length === 0) delete obj[key];
+		else break;
+	}
+	return true;
+}
+/**
+* Validate that a semantic reference points to an existing token and has no cycles.
+*/
+function validateSemanticReference(tokenMap, reference, selfPath) {
+	if (!tokenMap[reference]) return {
+		valid: false,
+		error: `Reference target "${reference}" does not exist`
+	};
+	const visited = new Set();
+	if (selfPath) visited.add(selfPath);
+	let current = reference;
+	let depth = 0;
+	while (depth < MAX_RESOLVE_DEPTH) {
+		if (visited.has(current)) return {
+			valid: false,
+			error: `Circular reference detected at "${current}"`
+		};
+		visited.add(current);
+		const target = tokenMap[current];
+		if (!target) break;
+		if (typeof target.value === "string") {
+			const match = target.value.match(REFERENCE_PATTERN);
+			if (match) {
+				current = match[1];
+				depth++;
+				continue;
+			}
+		}
+		break;
+	}
+	if (depth >= MAX_RESOLVE_DEPTH) return {
+		valid: false,
+		error: "Reference chain too deep (max 10)"
+	};
+	return { valid: true };
+}
+/**
+* Find all tokens that reference the given path.
+*/
+function findDependentTokens(tokenMap, targetPath) {
+	const dependents = [];
+	for (const [path$1, token] of Object.entries(tokenMap)) if (typeof token.value === "string") {
+		const match = token.value.match(REFERENCE_PATTERN);
+		if (match && match[1] === targetPath) dependents.push(path$1);
+	}
+	return dependents;
+}
+/**
 * Generate HTML documentation for tokens.
 */
 function generateTokensHtml(categories) {
@@ -272,6 +440,97 @@ async function processStyleDictionary(config) {
 		}
 	};
 }
+/**
+* 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
@@ -290,17 +549,106 @@ function loadNative() {
 	}
 }
 /**
+* 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 = {}) {
-	const include = options.include ?? ["**/*.art.vue"];
-	const exclude = options.exclude ?? ["node_modules/**", "dist/**"];
-	const basePath = options.basePath ?? "/__musea__";
-	const storybookCompat = options.storybookCompat ?? false;
+	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",
@@ -309,15 +657,63 @@ function musea(options = {}) {
 		},
 		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) => {
-				if (req.url === "/" || req.url === "/index.html") {
-					const html = generateGalleryHtml(basePath);
-					res.setHeader("Content-Type", "text/html");
-					res.end(html);
-					return;
+				const url = req.url || "/";
+				if (url === "/" || url === "/index.html" || url.startsWith("/tokens") || url.startsWith("/component/")) {
+					const galleryDistDir = path.resolve(path.dirname(new URL(import.meta.url).pathname), "gallery");
+					const indexHtmlPath = path.join(galleryDistDir, "index.html");
+					try {
+						await fs.promises.access(indexHtmlPath);
+						let html = await fs.promises.readFile(indexHtmlPath, "utf-8");
+						const themeScript = themeConfig ? `window.__MUSEA_THEME_CONFIG__=${JSON.stringify(themeConfig)};` : "";
+						html = html.replace("</head>", `<script>window.__MUSEA_BASE_PATH__='${basePath}';${themeScript}</script></head>`);
+						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();
 			});
@@ -343,7 +739,7 @@ function musea(options = {}) {
 					return;
 				}
 				const variantComponentName = toPascalCase(variant.name);
-				const moduleCode = generatePreviewModule(art, variantComponentName, variant.name);
+				const moduleCode = generatePreviewModule(art, variantComponentName, variant.name, resolvedPreviewCss, resolvedPreviewSetup);
 				try {
 					const result = await devServer.transformRequest(`virtual:musea-preview:${artPath}:${variantName}`);
 					if (result) {
@@ -378,8 +774,7 @@ function musea(options = {}) {
 					res.end("Variant not found");
 					return;
 				}
-				const rawHtml = generatePreviewHtml(art, variant, basePath);
-				const html = await devServer.transformIndexHtml(`${basePath}/preview?art=${encodeURIComponent(artPath)}&variant=${encodeURIComponent(variantName)}`, rawHtml);
+				const html = generatePreviewHtml(art, variant, basePath, config.base);
 				res.setHeader("Content-Type", "text/html");
 				res.end(html);
 			});
@@ -416,21 +811,525 @@ function musea(options = {}) {
 				}
 			});
 			devServer.middlewares.use(`${basePath}/api`, async (req, res, next) => {
-				if (req.url === "/arts" && req.method === "GET") {
+				const sendJson = (data, status = 200) => {
+					res.statusCode = status;
 					res.setHeader("Content-Type", "application/json");
-					res.end(JSON.stringify(Array.from(artFiles.values())));
+					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 artPath = decodeURIComponent(req.url.slice(6));
-					const art = artFiles.get(artPath);
-					if (art) {
-						res.setHeader("Content-Type", "application/json");
-						res.end(JSON.stringify(art));
-					} else {
-						res.statusCode = 404;
-						res.end(JSON.stringify({ error: "Art not found" }));
+					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();
@@ -440,12 +1339,30 @@ function musea(options = {}) {
 					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)) {
@@ -453,9 +1370,24 @@ function musea(options = {}) {
 					console.log(`[musea] Removed: ${path.relative(config.root, file)}`);
 				}
 			});
+			return () => {
+				devServer.httpServer?.once("listening", () => {
+					const address = devServer.httpServer?.address();
+					if (address && typeof address === "object") {
+						const protocol = devServer.config.server.https ? "https" : "http";
+						const rawHost = address.address;
+						const host = rawHost === "::" || rawHost === "::1" || rawHost === "0.0.0.0" || rawHost === "127.0.0.1" ? "localhost" : rawHost;
+						const port = address.port;
+						const url = `${protocol}://${host}:${port}${basePath}`;
+						console.log();
+						console.log(`  \x1b[36m➜\x1b[0m  \x1b[1mMusea Gallery:\x1b[0m \x1b[36m${url}\x1b[0m`);
+					}
+				});
+			};
 		},
 		async buildStart() {
-			const files = await scanArtFiles(config.root, include, exclude);
+			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);
@@ -466,11 +1398,15 @@ function musea(options = {}) {
 			if (id.startsWith("virtual:musea-preview:")) return "\0musea-preview:" + id.slice(22);
 			if (id.startsWith("virtual:musea-art:")) {
 				const artPath = id.slice(18);
-				if (artFiles.has(artPath)) return "\0musea-art:" + artPath;
+				if (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;
+				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;
 		},
@@ -486,17 +1422,17 @@ function musea(options = {}) {
 					const art = artFiles.get(artPath);
 					if (art) {
 						const variantComponentName = toPascalCase(variantName);
-						return generatePreviewModule(art, variantComponentName, variantName);
+						return generatePreviewModule(art, variantComponentName, variantName, resolvedPreviewCss, resolvedPreviewSetup);
 					}
 				}
 			}
 			if (id.startsWith("\0musea-art:")) {
-				const artPath = id.slice(11);
+				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);
+				const realPath = id.slice(VIRTUAL_MUSEA_PREFIX.length).replace(/\?musea-virtual$/, "");
 				const art = artFiles.get(realPath);
 				if (art) return generateArtModule(art, realPath);
 			}
@@ -505,6 +1441,12 @@ function musea(options = {}) {
 		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);
@@ -518,12 +1460,14 @@ function musea(options = {}) {
 			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,
+					title: parsed.metadata.title || (isInline ? path.basename(filePath, ".vue") : ""),
 					description: parsed.metadata.description,
-					component: parsed.metadata.component,
+					component: isInline ? void 0 : parsed.metadata.component,
 					category: parsed.metadata.category,
 					tags: parsed.metadata.tags,
 					status: parsed.metadata.status,
@@ -532,12 +1476,15 @@ function musea(options = {}) {
 				variants: parsed.variants.map((v) => ({
 					name: v.name,
 					template: v.template,
-					isDefault: v.is_default,
-					skipVrt: v.skip_vrt
+					isDefault: v.isDefault,
+					skipVrt: v.skipVrt
 				})),
-				hasScriptSetup: parsed.has_script_setup,
-				hasScript: parsed.has_script,
-				styleCount: parsed.style_count
+				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) {
@@ -553,10 +1500,11 @@ function shouldProcess(file, include, exclude, root) {
 	return false;
 }
 function matchGlob(filepath, pattern) {
-	const regex = pattern.replace(/\./g, "\\.").replace(/\*\*/g, ".*").replace(/\*(?!\*)/g, "[^/]*");
+	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) {
+async function scanArtFiles(root, include, exclude, scanInlineArt = false) {
 	const files = [];
 	async function scan(dir) {
 		const entries = await fs.promises.readdir(dir, { withFileTypes: true });
@@ -575,19 +1523,24 @@ async function scanArtFiles(root, include, exclude) {
 					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) {
+function generateGalleryHtml(basePath, themeConfig) {
+	const themeScript = themeConfig ? `window.__MUSEA_THEME_CONFIG__=${JSON.stringify(themeConfig)};` : "";
 	return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Musea - Component Gallery</title>
+  <script>window.__MUSEA_BASE_PATH__='${basePath}';${themeScript}</script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -1320,19 +2273,334 @@ export async function loadArts() {
 }
 `;
 }
-function generatePreviewModule(art, variantComponentName, variantName) {
+const MUSEA_ADDONS_INIT_CODE = `
+function __museaInitAddons(container, variantName) {
+  // === DOM event capture ===
+  // Note: mousemove, mouseenter, mouseleave, pointermove are excluded as they are too noisy
+  const CAPTURE_EVENTS = ['click','dblclick','input','change','submit','focus','blur','keydown','keyup','mousedown','mouseup','wheel','contextmenu','pointerdown','pointerup'];
+  for (const evt of CAPTURE_EVENTS) {
+    container.addEventListener(evt, (e) => {
+      // Extract raw event properties
+      const rawEvent = {
+        type: e.type,
+        bubbles: e.bubbles,
+        cancelable: e.cancelable,
+        composed: e.composed,
+        defaultPrevented: e.defaultPrevented,
+        eventPhase: e.eventPhase,
+        isTrusted: e.isTrusted,
+        timeStamp: e.timeStamp,
+      };
+      // Mouse/Pointer event properties
+      if ('clientX' in e) {
+        rawEvent.clientX = e.clientX;
+        rawEvent.clientY = e.clientY;
+        rawEvent.screenX = e.screenX;
+        rawEvent.screenY = e.screenY;
+        rawEvent.pageX = e.pageX;
+        rawEvent.pageY = e.pageY;
+        rawEvent.offsetX = e.offsetX;
+        rawEvent.offsetY = e.offsetY;
+        rawEvent.button = e.button;
+        rawEvent.buttons = e.buttons;
+        rawEvent.altKey = e.altKey;
+        rawEvent.ctrlKey = e.ctrlKey;
+        rawEvent.metaKey = e.metaKey;
+        rawEvent.shiftKey = e.shiftKey;
+      }
+      // Keyboard event properties
+      if ('key' in e) {
+        rawEvent.key = e.key;
+        rawEvent.code = e.code;
+        rawEvent.repeat = e.repeat;
+        rawEvent.altKey = e.altKey;
+        rawEvent.ctrlKey = e.ctrlKey;
+        rawEvent.metaKey = e.metaKey;
+        rawEvent.shiftKey = e.shiftKey;
+      }
+      // Input event properties
+      if ('inputType' in e) {
+        rawEvent.inputType = e.inputType;
+        rawEvent.data = e.data;
+      }
+      // Wheel event properties
+      if ('deltaX' in e) {
+        rawEvent.deltaX = e.deltaX;
+        rawEvent.deltaY = e.deltaY;
+        rawEvent.deltaZ = e.deltaZ;
+        rawEvent.deltaMode = e.deltaMode;
+      }
+      const payload = {
+        name: evt,
+        target: e.target?.tagName,
+        timestamp: Date.now(),
+        source: 'dom',
+        rawEvent,
+        variantName
+      };
+      if (e.target && 'value' in e.target) {
+        payload.value = e.target.value;
+      }
+      window.parent.postMessage({ type: 'musea:event', payload }, '*');
+    }, true);
+  }
+
+  // === Message handler for parent commands ===
+  let measureActive = false;
+  let measureOverlay = null;
+  let measureLabel = null;
+
+  function toggleStyleById(id, enabled, css) {
+    let el = document.getElementById(id);
+    if (enabled) {
+      if (!el) {
+        el = document.createElement('style');
+        el.id = id;
+        el.textContent = css;
+        document.head.appendChild(el);
+      }
+    } else {
+      if (el) el.remove();
+    }
+  }
+
+  function createMeasureOverlay() {
+    if (measureOverlay) return;
+    measureOverlay = document.createElement('div');
+    measureOverlay.id = 'musea-measure-overlay';
+    measureOverlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99999;';
+    document.body.appendChild(measureOverlay);
+
+    measureLabel = document.createElement('div');
+    measureLabel.className = 'musea-measure-label';
+    measureLabel.style.cssText = 'position:fixed;background:#333;color:#fff;font-size:11px;padding:2px 6px;border-radius:3px;pointer-events:none;z-index:100000;display:none;';
+    document.body.appendChild(measureLabel);
+  }
+
+  function removeMeasureOverlay() {
+    if (measureOverlay) { measureOverlay.remove(); measureOverlay = null; }
+    if (measureLabel) { measureLabel.remove(); measureLabel = null; }
+  }
+
+  function onMeasureMouseMove(e) {
+    if (!measureActive || !measureOverlay) return;
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    if (!el || el === measureOverlay || el === measureLabel) return;
+
+    const rect = el.getBoundingClientRect();
+    const cs = getComputedStyle(el);
+    const mt = parseFloat(cs.marginTop) || 0;
+    const mr = parseFloat(cs.marginRight) || 0;
+    const mb = parseFloat(cs.marginBottom) || 0;
+    const ml = parseFloat(cs.marginLeft) || 0;
+    const bt = parseFloat(cs.borderTopWidth) || 0;
+    const br = parseFloat(cs.borderRightWidth) || 0;
+    const bb = parseFloat(cs.borderBottomWidth) || 0;
+    const blw = parseFloat(cs.borderLeftWidth) || 0;
+    const pt = parseFloat(cs.paddingTop) || 0;
+    const pr = parseFloat(cs.paddingRight) || 0;
+    const pb = parseFloat(cs.paddingBottom) || 0;
+    const pl = parseFloat(cs.paddingLeft) || 0;
+
+    const cw = rect.width - blw - br - pl - pr;
+    const ch = rect.height - bt - bb - pt - pb;
+
+    measureOverlay.innerHTML = ''
+      // Margin
+      + '<div style="position:fixed;background:rgba(255,165,0,0.3);'
+      + 'left:' + (rect.left - ml) + 'px;top:' + (rect.top - mt) + 'px;'
+      + 'width:' + (rect.width + ml + mr) + 'px;height:' + mt + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,165,0,0.3);'
+      + 'left:' + (rect.left - ml) + 'px;top:' + (rect.bottom) + 'px;'
+      + 'width:' + (rect.width + ml + mr) + 'px;height:' + mb + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,165,0,0.3);'
+      + 'left:' + (rect.left - ml) + 'px;top:' + rect.top + 'px;'
+      + 'width:' + ml + 'px;height:' + rect.height + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,165,0,0.3);'
+      + 'left:' + rect.right + 'px;top:' + rect.top + 'px;'
+      + 'width:' + mr + 'px;height:' + rect.height + 'px;"></div>'
+      // Border
+      + '<div style="position:fixed;background:rgba(255,255,0,0.3);'
+      + 'left:' + rect.left + 'px;top:' + rect.top + 'px;'
+      + 'width:' + rect.width + 'px;height:' + bt + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,255,0,0.3);'
+      + 'left:' + rect.left + 'px;top:' + (rect.bottom - bb) + 'px;'
+      + 'width:' + rect.width + 'px;height:' + bb + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,255,0,0.3);'
+      + 'left:' + rect.left + 'px;top:' + (rect.top + bt) + 'px;'
+      + 'width:' + blw + 'px;height:' + (rect.height - bt - bb) + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(255,255,0,0.3);'
+      + 'left:' + (rect.right - br) + 'px;top:' + (rect.top + bt) + 'px;'
+      + 'width:' + br + 'px;height:' + (rect.height - bt - bb) + 'px;"></div>'
+      // Padding
+      + '<div style="position:fixed;background:rgba(144,238,144,0.3);'
+      + 'left:' + (rect.left + blw) + 'px;top:' + (rect.top + bt) + 'px;'
+      + 'width:' + (rect.width - blw - br) + 'px;height:' + pt + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(144,238,144,0.3);'
+      + 'left:' + (rect.left + blw) + 'px;top:' + (rect.bottom - bb - pb) + 'px;'
+      + 'width:' + (rect.width - blw - br) + 'px;height:' + pb + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(144,238,144,0.3);'
+      + 'left:' + (rect.left + blw) + 'px;top:' + (rect.top + bt + pt) + 'px;'
+      + 'width:' + pl + 'px;height:' + (rect.height - bt - bb - pt - pb) + 'px;"></div>'
+      + '<div style="position:fixed;background:rgba(144,238,144,0.3);'
+      + 'left:' + (rect.right - br - pr) + 'px;top:' + (rect.top + bt + pt) + 'px;'
+      + 'width:' + pr + 'px;height:' + (rect.height - bt - bb - pt - pb) + 'px;"></div>'
+      // Content
+      + '<div style="position:fixed;background:rgba(100,149,237,0.3);'
+      + 'left:' + (rect.left + blw + pl) + 'px;top:' + (rect.top + bt + pt) + 'px;'
+      + 'width:' + cw + 'px;height:' + ch + 'px;"></div>';
+
+    // Label
+    measureLabel.textContent = Math.round(rect.width) + ' x ' + Math.round(rect.height);
+    measureLabel.style.display = 'block';
+    measureLabel.style.left = (rect.right + 8) + 'px';
+    measureLabel.style.top = rect.top + 'px';
+  }
+
+  window.addEventListener('message', (e) => {
+    if (!e.data?.type?.startsWith('musea:')) return;
+    const { type, payload } = e.data;
+    switch (type) {
+      case 'musea:set-background': {
+        if (payload.pattern === 'checkerboard') {
+          document.body.style.background = '';
+          document.body.classList.add('musea-bg-checkerboard');
+        } else {
+          document.body.classList.remove('musea-bg-checkerboard');
+          document.body.style.background = payload.color || '';
+        }
+        break;
+      }
+      case 'musea:toggle-outline': {
+        toggleStyleById('musea-outline', payload.enabled,
+          '* { outline: 1px solid rgba(255, 0, 0, 0.3) !important; }');
+        break;
+      }
+      case 'musea:toggle-measure': {
+        measureActive = payload.enabled;
+        if (measureActive) {
+          createMeasureOverlay();
+          document.addEventListener('mousemove', onMeasureMouseMove);
+        } else {
+          document.removeEventListener('mousemove', onMeasureMouseMove);
+          removeMeasureOverlay();
+        }
+        break;
+      }
+      case 'musea:set-props': {
+        // Store props for remount - handled by preview module
+        if (window.__museaSetProps) {
+          window.__museaSetProps(payload.props || {});
+        }
+        break;
+      }
+      case 'musea:set-slots': {
+        // Store slots for remount - handled by preview module
+        if (window.__museaSetSlots) {
+          window.__museaSetSlots(payload.slots || {});
+        }
+        break;
+      }
+      case 'musea:run-a11y': {
+        // Run axe-core a11y test
+        (async () => {
+          try {
+            // Dynamically load axe-core from CDN if not already loaded
+            if (!window.axe) {
+              const script = document.createElement('script');
+              script.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.2/axe.min.js';
+              script.crossOrigin = 'anonymous';
+              await new Promise((resolve, reject) => {
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+              });
+            }
+            // Run axe-core on the .musea-variant container only (not the full document)
+            const context = document.querySelector('.musea-variant') || document;
+            const results = await window.axe.run(context, {
+              // Run all rules without restrictions for comprehensive testing
+              resultTypes: ['violations', 'incomplete', 'passes']
+            });
+            window.parent.postMessage({
+              type: 'musea:a11y-result',
+              payload: {
+                violations: results.violations.map(v => ({
+                  id: v.id,
+                  impact: v.impact,
+                  description: v.description,
+                  helpUrl: v.helpUrl,
+                  nodes: v.nodes.map(n => ({
+                    html: n.html,
+                    target: n.target,
+                    failureSummary: n.failureSummary
+                  }))
+                })),
+                passes: results.passes.length,
+                incomplete: results.incomplete.length
+              }
+            }, '*');
+          } catch (err) {
+            window.parent.postMessage({
+              type: 'musea:a11y-result',
+              payload: {
+                error: err instanceof Error ? err.message : String(err),
+                violations: [],
+                passes: 0,
+                incomplete: 0
+              }
+            }, '*');
+          }
+        })();
+        break;
+      }
+    }
+  });
+
+  // Notify parent that iframe is ready
+  window.parent.postMessage({ type: 'musea:ready', payload: {} }, '*');
+}
+`;
+function generatePreviewModule(art, variantComponentName, variantName, 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 `
-import { createApp } from 'vue';
+${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');
@@ -1340,11 +2608,31 @@ async function mount() {
 
     // 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 = \`
@@ -1357,6 +2645,27 @@ async function mount() {
   }
 }
 
+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();
 `;
 }
@@ -1364,32 +2673,121 @@ function generateManifestModule(artFiles) {
 	const arts = Array.from(artFiles.values());
 	return `export const arts = ${JSON.stringify(arts, null, 2)};`;
 }
+/**
+* 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) {
-	const componentPath = art.metadata.component;
-	let resolvedComponentPath = componentPath;
-	if (componentPath && !path.isAbsolute(componentPath)) {
-		const artDir = path.dirname(filePath);
-		resolvedComponentPath = path.resolve(artDir, componentPath);
+	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 componentName = componentPath ? path.basename(componentPath, ".vue") : null;
+	const scriptSetup = art.scriptSetupContent ? parseScriptSetupForArt(art.scriptSetupContent) : null;
 	let code = `
 // Auto-generated module for: ${path.basename(filePath)}
 import { defineComponent, h } from 'vue';
 `;
-	if (resolvedComponentPath && componentName) code += `import ${componentName} from '${resolvedComponentPath}';\n`;
+	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);
-		const escapedTemplate = variant.template.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
-		const fullTemplate = `<div class="musea-variant" data-variant="${variant.name}">${escapedTemplate}</div>`;
-		if (componentName) code += `
-export const ${variantComponentName} = {
+		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: { ${componentName} },
+${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 += `
@@ -1425,14 +2823,63 @@ function toPascalCase(str) {
 function escapeTemplate(str) {
 	return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n");
 }
-function generatePreviewHtml(art, variant, basePath) {
-	const previewModuleUrl = `${basePath}/preview-module?art=${encodeURIComponent(art.path)}&variant=${encodeURIComponent(variant.name)}`;
+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 {
@@ -1444,10 +2891,6 @@ function generatePreviewHtml(art, variant, basePath) {
       background: #ffffff;
     }
     .musea-variant {
-      padding: 1.5rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
       min-height: 100vh;
     }
     .musea-error {
@@ -1489,6 +2932,29 @@ function generatePreviewHtml(art, variant, basePath) {
       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>
@@ -1508,5 +2974,5 @@ function escapeHtml(str) {
 var src_default = musea;
 
 //#endregion
-export { MuseaVrtRunner, src_default as default, generateTokensHtml, generateTokensMarkdown, generateVrtJsonReport, generateVrtReport, musea, parseTokens, processStyleDictionary };
+export { MuseaA11yRunner, MuseaVrtRunner, buildTokenMap, src_default as default, generateArtFile, generateTokensHtml, generateTokensMarkdown, generateVrtJsonReport, generateVrtReport, musea, parseTokens, processStyleDictionary, resolveReferences, scanTokenUsage, writeArtFile };
 //# sourceMappingURL=index.js.map