@vizejs/vite-plugin-musea 0.0.1-alpha.99 → 0.2.0

package/dist/index.js

@@ -86,15 +86,15 @@ 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) {
 	const token = {
-		value: raw.value,
-		type: raw.type,
+		value: raw.value ?? raw.$value,
+		type: raw.type ?? raw.$type,
 		description: raw.description,
 		attributes: raw.attributes
 	};
@@ -549,6 +549,71 @@ 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) {
@@ -577,9 +642,13 @@ function musea(options = {}) {
 	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",
@@ -597,12 +666,14 @@ function musea(options = {}) {
 				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/")) {
+				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 {
@@ -610,7 +681,6 @@ function musea(options = {}) {
 						let html = await fs.promises.readFile(indexHtmlPath, "utf-8");
 						const themeScript = themeConfig ? `window.__MUSEA_THEME_CONFIG__=${JSON.stringify(themeConfig)};` : "";
 						html = html.replace("</head>", `<script>window.__MUSEA_BASE_PATH__='${basePath}';${themeScript}</script></head>`);
-						html = await devServer.transformIndexHtml(basePath + url, html);
 						res.setHeader("Content-Type", "text/html");
 						res.end(html);
 						return;
@@ -647,6 +717,19 @@ function musea(options = {}) {
 				}
 				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");
@@ -669,7 +752,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) {
@@ -704,8 +787,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);
 			});
@@ -1021,16 +1103,57 @@ function musea(options = {}) {
 						try {
 							const source = await fs.promises.readFile(artPath$1, "utf-8");
 							const binding = loadNative();
-							if (binding.generateArtPalette) {
-								const palette = binding.generateArtPalette(source, { filename: artPath$1 });
-								sendJson(palette);
-							} else sendJson({
+							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));
 						}
@@ -1051,10 +1174,10 @@ function musea(options = {}) {
 								if (binding.analyzeSfc) {
 									const analysis = binding.analyzeSfc(source, { filename: resolvedComponentPath });
 									sendJson(analysis);
-								} else sendJson({
-									props: [],
-									emits: []
-								});
+								} else {
+									const analysis = analyzeSfcFallback(source, { filename: resolvedComponentPath });
+									sendJson(analysis);
+								}
 							} else sendJson({
 								props: [],
 								emits: []
@@ -1087,7 +1210,17 @@ function musea(options = {}) {
 										minIndent = Math.min(minIndent, indent);
 									}
 									if (minIndent === Infinity) minIndent = 0;
-									const formatted = lines.map((line) => line.slice(minIndent)).join("\n");
+									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({
@@ -1144,7 +1277,7 @@ function musea(options = {}) {
 								return;
 							}
 							const variantComponentName = toPascalCase(variant.name);
-							const moduleCode = generatePreviewModuleWithProps(art, variantComponentName, variant.name, propsOverride);
+							const moduleCode = generatePreviewModuleWithProps(art, variantComponentName, variant.name, propsOverride, resolvedPreviewCss, resolvedPreviewSetup);
 							res.setHeader("Content-Type", "application/javascript");
 							res.end(moduleCode);
 						} catch (e) {
@@ -1266,6 +1399,7 @@ function musea(options = {}) {
 			};
 		},
 		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);
@@ -1277,15 +1411,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;
+				if (artFiles.has(resolved)) return VIRTUAL_MUSEA_PREFIX + resolved + "?musea-virtual";
 			}
 			return null;
 		},
@@ -1301,17 +1435,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);
 			}
@@ -1321,7 +1455,7 @@ function musea(options = {}) {
 			const { file } = ctx;
 			if (file.endsWith(".art.vue") && artFiles.has(file)) {
 				await processArtFile(file);
-				const virtualId = VIRTUAL_MUSEA_PREFIX + file;
+				const virtualId = VIRTUAL_MUSEA_PREFIX + file + "?musea-virtual";
 				const modules = server?.moduleGraph.getModulesByFile(virtualId);
 				if (modules) return [...modules];
 			}
@@ -1355,12 +1489,13 @@ 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
 			};
@@ -1378,7 +1513,8 @@ 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, scanInlineArt = false) {
@@ -1418,35 +1554,32 @@ function generateGalleryHtml(basePath, themeConfig) {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Musea - Component Gallery</title>
   <script>window.__MUSEA_BASE_PATH__='${basePath}';${themeScript}</script>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
     :root {
-      --musea-bg-primary: #0d0d0d;
-      --musea-bg-secondary: #1a1815;
-      --musea-bg-tertiary: #252220;
-      --musea-bg-elevated: #2d2a27;
-      --musea-accent: #a34828;
-      --musea-accent-hover: #c45a32;
-      --musea-accent-subtle: rgba(163, 72, 40, 0.15);
-      --musea-text: #e6e9f0;
-      --musea-text-secondary: #c4c9d4;
-      --musea-text-muted: #7b8494;
-      --musea-border: #3a3530;
-      --musea-border-subtle: #2a2725;
-      --musea-success: #4ade80;
-      --musea-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
-      --musea-radius-sm: 6px;
-      --musea-radius-md: 8px;
-      --musea-radius-lg: 12px;
+      --musea-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, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
       background: var(--musea-bg-primary);
       color: var(--musea-text);
       min-height: 100vh;
@@ -1493,7 +1626,7 @@ function generateGalleryHtml(basePath, themeConfig) {
     .logo-icon svg {
       width: 16px;
       height: 16px;
-      color: white;
+      color: var(--musea-text);
     }
 
     .header-subtitle {
@@ -1769,7 +1902,7 @@ function generateGalleryHtml(basePath, themeConfig) {
     }
 
     .variant-preview-code {
-      font-family: 'SF Mono', 'Fira Code', monospace;
+      font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
       font-size: 0.75rem;
       color: var(--musea-text-muted);
       background: var(--musea-bg-primary);
@@ -1914,31 +2047,19 @@ function generateGalleryHtml(basePath, themeConfig) {
     <div class="header-left">
       <a href="${basePath}" class="logo">
         <svg class="logo-svg" width="32" height="32" viewBox="0 0 200 200" fill="none">
-          <defs>
-            <linearGradient id="metal-grad" x1="0%" y1="0%" x2="100%" y2="20%">
-              <stop offset="0%" stop-color="#f0f2f5"/>
-              <stop offset="50%" stop-color="#9ca3b0"/>
-              <stop offset="100%" stop-color="#e07048"/>
-            </linearGradient>
-            <linearGradient id="metal-grad-dark" x1="0%" y1="0%" x2="100%" y2="30%">
-              <stop offset="0%" stop-color="#d0d4dc"/>
-              <stop offset="60%" stop-color="#6b7280"/>
-              <stop offset="100%" stop-color="#c45530"/>
-            </linearGradient>
-          </defs>
-          <g transform="translate(40, 40)">
-            <g transform="skewX(-12)">
-              <path d="M 100 0 L 60 120 L 105 30 L 100 0 Z" fill="url(#metal-grad-dark)" stroke="#4b5563" stroke-width="0.5"/>
-              <path d="M 30 0 L 60 120 L 80 20 L 30 0 Z" fill="url(#metal-grad)" stroke-width="0.5" stroke-opacity="0.4"/>
+          <g transform="translate(30, 25) scale(1.2)">
+            <g transform="translate(15, 10) skewX(-15)">
+              <path d="M 65 0 L 40 60 L 70 20 L 65 0 Z" fill="currentColor"/>
+              <path d="M 20 0 L 40 60 L 53 13 L 20 0 Z" fill="currentColor"/>
             </g>
           </g>
           <g transform="translate(110, 120)">
-            <line x1="5" y1="10" x2="5" y2="50" stroke="#e07048" stroke-width="3" stroke-linecap="round"/>
-            <line x1="60" y1="10" x2="60" y2="50" stroke="#e07048" stroke-width="3" stroke-linecap="round"/>
-            <path d="M 0 10 L 32.5 0 L 65 10" fill="none" stroke="#e07048" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-            <rect x="15" y="18" width="14" height="12" rx="1" fill="none" stroke="#e07048" stroke-width="1.5" opacity="0.7"/>
-            <rect x="36" y="18" width="14" height="12" rx="1" fill="none" stroke="#e07048" stroke-width="1.5" opacity="0.7"/>
-            <rect x="23" y="35" width="18" height="12" rx="1" fill="none" stroke="#e07048" stroke-width="1.5" opacity="0.6"/>
+            <line x1="5" y1="10" x2="5" y2="50" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
+            <line x1="60" y1="10" x2="60" y2="50" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
+            <path d="M 0 10 L 32.5 0 L 65 10" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <rect x="15" y="18" width="14" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.7"/>
+            <rect x="36" y="18" width="14" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.7"/>
+            <rect x="23" y="35" width="18" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.6"/>
           </g>
         </svg>
         Musea
@@ -2382,11 +2503,11 @@ function __museaInitAddons(container, variantName) {
         // Run axe-core a11y test
         (async () => {
           try {
-            // Dynamically load axe-core from CDN if not already loaded
+            // Dynamically load axe-core from local vendor route 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';
+              const _basePath = location.pathname.replace(/\\/preview$/, '');
+              script.src = _basePath + '/vendor/axe-core.min.js';
               await new Promise((resolve, reject) => {
                 script.onload = resolve;
                 script.onerror = reject;
@@ -2438,10 +2559,15 @@ function __museaInitAddons(container, variantName) {
   window.parent.postMessage({ type: 'musea:ready', payload: {} }, '*');
 }
 `;
-function generatePreviewModule(art, variantComponentName, variantName) {
+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}';
 
@@ -2462,6 +2588,9 @@ window.__museaSetProps = (props) => {
 };
 
 window.__museaSetSlots = (slots) => {
+  for (const key of Object.keys(slotsOverride)) {
+    delete slotsOverride[key];
+  }
   Object.assign(slotsOverride, slots);
 };
 
@@ -2477,6 +2606,7 @@ async function mount() {
 
     // Create and mount the app
     const app = createApp(VariantComponent);
+    ${setupCall}
     container.innerHTML = '';
     container.className = 'musea-variant';
     app.mount(container);
@@ -2486,19 +2616,21 @@ async function mount() {
     __museaInitAddons(container, '${escapedVariantName}');
 
     // Override set-props to remount with raw component + props
-    if (RawComponent) {
-      window.__museaSetProps = (props) => {
-        for (const key of Object.keys(propsOverride)) {
-          delete propsOverride[key];
-        }
-        Object.assign(propsOverride, props);
-        remountWithProps(RawComponent);
-      };
-      window.__museaSetSlots = (slots) => {
-        Object.assign(slotsOverride, slots);
-        remountWithProps(RawComponent);
-      };
-    }
+    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 = \`
@@ -2511,7 +2643,7 @@ async function mount() {
   }
 }
 
-function remountWithProps(Component) {
+async function remountWithProps(Component) {
   if (currentApp) {
     currentApp.unmount();
   }
@@ -2519,15 +2651,14 @@ function remountWithProps(Component) {
     setup() {
       return () => {
         const slotFns = {};
-        if (slotsOverride.default) {
-          slotFns.default = () => h('span', { innerHTML: slotsOverride.default });
+        for (const [name, content] of Object.entries(slotsOverride)) {
+          if (content) slotFns[name] = () => h('span', { innerHTML: content });
         }
-        return h('div', { class: 'musea-variant' }, [
-          h(Component, { ...propsOverride }, slotFns)
-        ]);
+        return h(Component, { ...propsOverride }, slotFns);
       };
     }
   });
+  ${setupCall}
   container.innerHTML = '';
   app.mount(container);
   currentApp = app;
@@ -2540,6 +2671,57 @@ 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) {
 	let componentImportPath;
 	let componentName;
@@ -2551,12 +2733,27 @@ function generateArtModule(art, filePath) {
 		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) {
-		code += `import ${componentName} from '${componentImportPath}';\n`;
+		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 += `
@@ -2568,12 +2765,27 @@ export const variants = ${JSON.stringify(art.variants)};
 		let template = variant.template;
 		if (componentName) template = template.replace(/<Self/g, `<${componentName}`).replace(/<\/Self>/g, `</${componentName}>`);
 		const escapedTemplate = template.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
-		const fullTemplate = `<div class="musea-variant" data-variant="${variant.name}">${escapedTemplate}</div>`;
-		if (componentName) code += `
-export const ${variantComponentName} = {
+		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 += `
@@ -2609,11 +2821,16 @@ function toPascalCase(str) {
 function escapeTemplate(str) {
 	return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n");
 }
-function generatePreviewModuleWithProps(art, variantComponentName, variantName, propsOverride) {
+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}';
 
@@ -2636,6 +2853,7 @@ async function mount() {
     };
 
     const app = createApp(WrappedComponent);
+    ${setupCall}
     container.innerHTML = '';
     container.className = 'musea-variant';
     app.mount(container);
@@ -2650,14 +2868,16 @@ async function mount() {
 mount();
 `;
 }
-function generatePreviewHtml(art, variant, basePath) {
-	const previewModuleUrl = `${basePath}/preview-module?art=${encodeURIComponent(art.path)}&variant=${encodeURIComponent(variant.name)}`;
+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 {
@@ -2669,10 +2889,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 {