@vizejs/vite-plugin-musea 0.0.1-alpha.101 → 0.0.1-alpha.103

package/dist/{a11y-CHcxz6UR.d.ts → a11y-Bvx5TJb8.d.ts}

@@ -1,4 +1,4 @@
-import { A11yOptions, A11yResult, ArtFileInfo, MuseaVrtRunner$1 as MuseaVrtRunner } from "./vrt-m01uFerp.js";
+import { A11yOptions, A11yResult, ArtFileInfo, MuseaVrtRunner$1 as MuseaVrtRunner } from "./vrt-Vb4aqPZE.js";
 import { Page } from "playwright";
 
 //#region src/a11y.d.ts
@@ -58,4 +58,4 @@ declare class MuseaA11yRunner {
 
 //# sourceMappingURL=a11y.d.ts.map
 export { A11ySummary, MuseaA11yRunner as MuseaA11yRunner$1 };
-//# sourceMappingURL=a11y-CHcxz6UR.d.ts.map
+//# sourceMappingURL=a11y-Bvx5TJb8.d.ts.map

package/dist/{a11y-CHcxz6UR.d.ts.map → a11y-Bvx5TJb8.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"a11y-CHcxz6UR.d.ts","names":[],"sources":["../src/a11y.ts"],"sourcesContent":null,"mappings":";;;;;;;;AAmBA;;;UAAiB,WAAA;EA4BJ,eAAA,EAAA,MAAe;EAAA,aAAA,EAAA,MAAA;EAAA,eAGL,EAAA,MAAA;EAAgB,aAczB,EAAA,MAAA;EAAW,YAET,EAAA,MAAA;EAAc,aACjB,EAAA,MAAA;EAAU,UAAlB,EAAA,MAAA;;;;;AAkGgC,cAtHxB,eAAA,CAsHwB;EAAW,QAkBlB,OAAA;EAAU,WA6IV,CAAA,OAAA,CAAA,EAlRP,WAkRO;EAAU;;;;sBApQ1B,4CAEE,iBACX,QAAQ;;;;kBA+DW,6CAA6C,QAAQ;;;;sBAmCvD,eAAe;;;;8BAkBP;;;;8BA6IA"}
+{"version":3,"file":"a11y-Bvx5TJb8.d.ts","names":[],"sources":["../src/a11y.ts"],"sourcesContent":null,"mappings":";;;;;;;;AAmBA;;;UAAiB,WAAA;EA4BJ,eAAA,EAAA,MAAe;EAAA,aAAA,EAAA,MAAA;EAAA,eAGL,EAAA,MAAA;EAAgB,aAczB,EAAA,MAAA;EAAW,YAET,EAAA,MAAA;EAAc,aACjB,EAAA,MAAA;EAAU,UAAlB,EAAA,MAAA;;;;;AAkGgC,cAtHxB,eAAA,CAsHwB;EAAW,QAkBlB,OAAA;EAAU,WA6IV,CAAA,OAAA,CAAA,EAlRP,WAkRO;EAAU;;;;sBApQ1B,4CAEE,iBACX,QAAQ;;;;kBA+DW,6CAA6C,QAAQ;;;;sBAmCvD,eAAe;;;;8BAkBP;;;;8BA6IA"}

package/dist/a11y.d.ts

@@ -1,3 +1,3 @@
-import "./vrt-m01uFerp.js";
-import { A11ySummary, MuseaA11yRunner$1 as MuseaA11yRunner } from "./a11y-CHcxz6UR.js";
+import "./vrt-Vb4aqPZE.js";
+import { A11ySummary, MuseaA11yRunner$1 as MuseaA11yRunner } from "./a11y-Bvx5TJb8.js";
 export { A11ySummary, MuseaA11yRunner };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { A11yOptions, A11yResult, AnalysisApiResponse, ArtFileInfo, ArtMetadata, ArtVariant, CaptureConfig, CiConfig, ComparisonConfig, CsfOutput, MuseaOptions, MuseaTheme, MuseaThemeColors, MuseaVrtRunner$1 as MuseaVrtRunner, PaletteApiResponse, ViewportConfig, VrtOptions, VrtResult, VrtSummary, generateVrtJsonReport$1 as generateVrtJsonReport, generateVrtReport$1 as generateVrtReport } from "./vrt-m01uFerp.js";
-import { A11ySummary, MuseaA11yRunner$1 as MuseaA11yRunner } from "./a11y-CHcxz6UR.js";
+import { A11yOptions, A11yResult, AnalysisApiResponse, ArtFileInfo, ArtMetadata, ArtVariant, CaptureConfig, CiConfig, ComparisonConfig, CsfOutput, MuseaOptions, MuseaTheme, MuseaThemeColors, MuseaVrtRunner$1 as MuseaVrtRunner, PaletteApiResponse, ViewportConfig, VrtOptions, VrtResult, VrtSummary, generateVrtJsonReport$1 as generateVrtJsonReport, generateVrtReport$1 as generateVrtReport } from "./vrt-Vb4aqPZE.js";
+import { A11ySummary, MuseaA11yRunner$1 as MuseaA11yRunner } from "./a11y-Bvx5TJb8.js";
 import { AutogenOptions, AutogenOutput, GeneratedVariant, PropDefinition, generateArtFile$1 as generateArtFile, writeArtFile$1 as writeArtFile } from "./autogen-D3Zjc3zI.js";
 import { Plugin } from "vite";
 

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/style-dictionary.ts","../src/index.ts"],"sourcesContent":null,"mappings":";;;;;;;;;;;;;;;;;;;;UAWiB,WAAA;;;;eAIF;;EAJE,UAAA,CAAA,EAAA,MAAW;;;;AAa5B;;AAEyB,UAFR,aAAA,CAEQ;EAAW,IAA1B,EAAA,MAAA;EAAM,MACE,EADR,MACQ,CAAA,MAAA,EADO,WACP,CAAA;EAAa,aAAA,CAAA,EAAb,aAAa,EAAA;;;;AAM/B;UAAiB,qBAAA;cACH;;IAWG,IAAA,EAAA,MAAA;;;;AA2BjB;;;;AAAgF,UA3B/D,qBAAA,CA2B+D;;;;EAK1D,UAAA,EAAA,MAAW;EAAA;;;AAA6B;;;;AAuJ9D;;EAA6B,SACf,CAAA,EAAA,MAAA;EAAa;;AAElB;eArKM;;;AAkMf;;AACc,KA7LF,cAAA,GA6LE,CAAA,KAAA,EA7LuB,WA6LvB,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,GA7LuD,WA6LvD;;;AACI;iBAzLI,WAAA,sBAAiC,QAAQ;;;AAsY/D;iBA/OgB,aAAA,aACF,qCAEX,eAAe;;;AA8WlB;iBAjVgB,iBAAA,aACF,2BACF,eAAe;;;AAqX3B;;;;;iBAxKgB,kBAAA,aAA+B;ACjO/C;;;AAAmD,iBDmWnC,sBAAA,CCnWmC,UAAA,EDmWA,aCnWA,EAAA,CAAA,EAAA,MAAA;AAAM;;;iBDyYnC,sBAAA,SACZ,wBACP,QAAQ;UA6CM,eAAA;;;;;UAMA,eAAA;;;;WAIN;;KAGC,aAAA,GAAgB,eAAe;;;;;;;;;;;iBAgC3B,cAAA,WACJ;;;;;;cACA,eAAe,eACxB;;;;AA/rB4B;;;iBCuNf,KAAA,WAAe,eAAoB"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/style-dictionary.ts","../src/index.ts"],"sourcesContent":null,"mappings":";;;;;;;;;;;;;;;;;;;;UAWiB,WAAA;;;;eAIF;;EAJE,UAAA,CAAA,EAAA,MAAW;;;;AAa5B;;AAEyB,UAFR,aAAA,CAEQ;EAAW,IAA1B,EAAA,MAAA;EAAM,MACE,EADR,MACQ,CAAA,MAAA,EADO,WACP,CAAA;EAAa,aAAA,CAAA,EAAb,aAAa,EAAA;;;;AAM/B;UAAiB,qBAAA;cACH;;IAWG,IAAA,EAAA,MAAA;;;;AA2BjB;;;;AAAgF,UA3B/D,qBAAA,CA2B+D;;;;EAK1D,UAAA,EAAA,MAAW;EAAA;;;AAA6B;;;;AA2J9D;;EAA6B,SACf,CAAA,EAAA,MAAA;EAAa;;AAElB;eAzKM;;;AAoMf;;AACc,KA/LF,cAAA,GA+LE,CAAA,KAAA,EA/LuB,WA+LvB,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,GA/LuD,WA+LvD;;;AACI;iBA3LI,WAAA,sBAAiC,QAAQ;;;AAgY/D;iBArOgB,aAAA,aACF,qCAEX,eAAe;;;AAoWlB;iBAzUgB,iBAAA,aACF,2BACF,eAAe;;;AA6W3B;;;;;iBAxKgB,kBAAA,aAA+B;ACtH/C;;;AAAmD,iBDwPnC,sBAAA,CCxPmC,UAAA,EDwPA,aCxPA,EAAA,CAAA,EAAA,MAAA;AAAM;;;iBD8RnC,sBAAA,SACZ,wBACP,QAAQ;UA6CM,eAAA;;;;;UAMA,eAAA;;;;WAIN;;KAGC,aAAA,GAAgB,eAAe;;;;;;;;;;;iBA8B3B,cAAA,WACJ;;;;;;cACA,eAAe,eACxB;;;;AAvrB4B;;;iBC4Tf,KAAA,WAAe,eAAoB"}

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,6 +666,8 @@ 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;
@@ -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;
@@ -669,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) {
@@ -704,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);
 			});
@@ -1021,16 +1090,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 +1161,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: []
@@ -1144,7 +1254,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) {
@@ -1278,15 +1388,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;
 		},
@@ -1302,17 +1412,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);
 			}
@@ -1322,7 +1432,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];
 			}
@@ -1356,12 +1466,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: parsed.hasScriptSetup,
+				scriptSetupContent: parsed.hasScriptSetup ? extractScriptSetupContent(source) : void 0,
+				hasScript: parsed.hasScript,
+				styleCount: parsed.styleCount,
 				isInline,
 				componentPath: isInline ? filePath : void 0
 			};
@@ -1379,7 +1490,8 @@ function shouldProcess(file, include, exclude, root) {
 	return false;
 }
 function matchGlob(filepath, pattern) {
-	const regex = pattern.replace(/\*\*/g, "\0GLOBSTAR\0").replace(/\./g, "\\.").replace(/\*/g, "[^/]*").replace(/\0GLOBSTAR\0/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) {
@@ -2439,10 +2551,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}';
 
@@ -2478,6 +2595,7 @@ async function mount() {
 
     // Create and mount the app
     const app = createApp(VariantComponent);
+    ${setupCall}
     container.innerHTML = '';
     container.className = 'musea-variant';
     app.mount(container);
@@ -2512,7 +2630,7 @@ async function mount() {
   }
 }
 
-function remountWithProps(Component) {
+async function remountWithProps(Component) {
   if (currentApp) {
     currentApp.unmount();
   }
@@ -2523,12 +2641,11 @@ function remountWithProps(Component) {
         if (slotsOverride.default) {
           slotFns.default = () => h('span', { innerHTML: slotsOverride.default });
         }
-        return h('div', { class: 'musea-variant' }, [
-          h(Component, { ...propsOverride }, slotFns)
-        ]);
+        return h(Component, { ...propsOverride }, slotFns);
       };
     }
   });
+  ${setupCall}
   container.innerHTML = '';
   app.mount(container);
   currentApp = app;
@@ -2541,6 +2658,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;
@@ -2552,12 +2720,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 += `
@@ -2569,12 +2752,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 += `
@@ -2610,11 +2808,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}';
 
@@ -2637,6 +2840,7 @@ async function mount() {
     };
 
     const app = createApp(WrappedComponent);
+    ${setupCall}
     container.innerHTML = '';
     container.className = 'musea-variant';
     app.mount(container);
@@ -2651,14 +2855,16 @@ async function mount() {
 mount();
 `;
 }
-function generatePreviewHtml(art, variant, _basePath) {
-	const importSpecifier = JSON.stringify(`virtual:musea-preview:${art.path}:${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 {
@@ -2670,10 +2876,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 {
@@ -2747,13 +2949,7 @@ function generatePreviewHtml(art, variant, _basePath) {
       Loading component...
     </div>
   </div>
-  <script type="module">
-  import(${importSpecifier}).catch(function(e) {
-    console.error('[musea-preview] Failed to load module:', e);
-    var c = document.getElementById('app');
-    if (c) c.innerHTML = '<div class="musea-error"><div class="musea-error-title">Failed to load preview module</div><div>' + e.message + '</div></div>';
-  });
-  </script>
+  <script type="module" src="${previewModuleUrl}"></script>
 </body>
 </html>`;
 }