@vizejs/vite-plugin-musea 0.82.0 → 0.83.0

package/dist/index.mjs

@@ -6,8 +6,8 @@ import { transformWithEsbuild } from "vite";
 import fs from "node:fs";
 import path from "node:path";
 import { vizeConfigStore } from "@vizejs/vite-plugin";
-import { fileURLToPath } from "node:url";
 import { randomBytes, timingSafeEqual } from "node:crypto";
+import { fileURLToPath } from "node:url";
 //#region src/native-loader.ts
 /**
 * Native binding loader for @vizejs/native.
@@ -91,6 +91,156 @@ function analyzeSfcFallback(source, _options) {
 	}
 }
 //#endregion
+//#region src/security.ts
+const DEFAULT_API_BODY_LIMIT_BYTES = 1024 * 1024;
+var HttpError = class extends Error {
+	status;
+	constructor(message, status) {
+		super(message);
+		this.name = "HttpError";
+		this.status = status;
+	}
+};
+function createDevSessionToken() {
+	return randomBytes(32).toString("base64url");
+}
+function realpathNearest(targetPath) {
+	let current = path.resolve(targetPath);
+	const missingParts = [];
+	while (true) try {
+		const real = fs.realpathSync.native(current);
+		return missingParts.length > 0 ? path.join(real, ...missingParts.reverse()) : real;
+	} catch {
+		const parent = path.dirname(current);
+		if (parent === current) return path.resolve(targetPath);
+		missingParts.push(path.basename(current));
+		current = parent;
+	}
+}
+function isResolvedPathInside(parentDir, candidatePath) {
+	const parent = path.resolve(parentDir);
+	const candidate = path.resolve(candidatePath);
+	const relative = path.relative(parent, candidate);
+	return relative === "" || !relative.startsWith("..") && !path.isAbsolute(relative);
+}
+function isPathInsideAny(parentDirs, candidatePath) {
+	const candidate = realpathNearest(candidatePath);
+	return parentDirs.some((parentDir) => isResolvedPathInside(realpathNearest(parentDir), candidate));
+}
+function resolveInside(parentDir, candidatePath, label = "path") {
+	return resolveInsideAny([parentDir], candidatePath, label);
+}
+function resolveInsideAny(parentDirs, candidatePath, label = "path") {
+	if (candidatePath.includes("\0")) throw new HttpError(`${label} contains an invalid character`, 400);
+	if (parentDirs.length === 0) throw new HttpError(`No allowed directories configured for ${label}`, 500);
+	const parent = path.resolve(parentDirs[0] ?? ".");
+	const resolved = path.isAbsolute(candidatePath) ? path.resolve(candidatePath) : path.resolve(parent, candidatePath);
+	if (!isPathInsideAny(parentDirs, resolved)) throw new HttpError(`${label} escapes the allowed directory`, 400);
+	return resolved;
+}
+function resolveUrlPathInside(parentDir, requestUrl, label = "path") {
+	const rawPath = requestUrl.split(/[?#]/, 1)[0] || "/";
+	let pathname;
+	try {
+		pathname = decodeURIComponent(rawPath);
+	} catch {
+		throw new HttpError(`${label} is not valid URL encoding`, 400);
+	}
+	pathname = pathname.replaceAll("\\", "/");
+	if (pathname.split("/").includes("..")) throw new HttpError(`${label} must not contain parent directory segments`, 400);
+	return resolveInside(parentDir, `.${pathname}`, label);
+}
+function collectRequestBody(req, limit = DEFAULT_API_BODY_LIMIT_BYTES) {
+	return new Promise((resolve, reject) => {
+		let body = "";
+		let size = 0;
+		let completed = false;
+		req.on("data", (chunk) => {
+			if (completed) return;
+			const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
+			size += buffer.byteLength;
+			if (size > limit) {
+				completed = true;
+				reject(new HttpError(`Request body exceeds ${limit} bytes`, 413));
+				return;
+			}
+			body += buffer.toString("utf-8");
+		});
+		req.on("end", () => {
+			if (!completed) {
+				completed = true;
+				resolve(body);
+			}
+		});
+		req.on("error", (error) => {
+			if (!completed) {
+				completed = true;
+				reject(error);
+			}
+		});
+	});
+}
+function validateDevApiRequest(req, sessionToken) {
+	const originError = validateOrigin(req);
+	if (originError) return originError;
+	if (!isUnsafeMethod(req.method)) return null;
+	if (!hasValidSessionToken(req, sessionToken)) return new HttpError("Invalid Musea dev session token", 403);
+	if (!isJsonRequest(req)) return new HttpError("Content-Type must be application/json", 415);
+	return null;
+}
+function serializeScriptValue(value) {
+	return (JSON.stringify(value) ?? "undefined").replace(/[<>&\u2028\u2029]/g, (char) => {
+		switch (char) {
+			case "<": return "\\u003C";
+			case ">": return "\\u003E";
+			case "&": return "\\u0026";
+			case "\u2028": return "\\u2028";
+			case "\u2029": return "\\u2029";
+			default: return char;
+		}
+	});
+}
+function isUnsafeMethod(method) {
+	return method === "POST" || method === "PUT" || method === "PATCH" || method === "DELETE";
+}
+function isJsonRequest(req) {
+	return getHeader(req, "content-type")?.split(";")[0]?.trim().toLowerCase() === "application/json";
+}
+function validateOrigin(req) {
+	if (getHeader(req, "sec-fetch-site") === "cross-site") return new HttpError("Cross-origin Musea API requests are not allowed", 403);
+	const origin = getHeader(req, "origin");
+	if (!origin) return null;
+	const host = getHeader(req, "host");
+	if (!host) return new HttpError("Missing Host header", 400);
+	try {
+		if (new URL(origin).host !== host) return new HttpError("Cross-origin Musea API requests are not allowed", 403);
+	} catch {
+		return new HttpError("Invalid Origin header", 400);
+	}
+	return null;
+}
+function hasValidSessionToken(req, expectedToken) {
+	const actualToken = getHeader(req, "x-musea-session");
+	if (!actualToken) return false;
+	const actual = Buffer.from(actualToken);
+	const expected = Buffer.from(expectedToken);
+	return actual.length === expected.length && timingSafeEqual(actual, expected);
+}
+function getHeader(req, name) {
+	const value = req.headers[name];
+	if (Array.isArray(value)) return value[0];
+	return value;
+}
+//#endregion
+//#region src/component-source.ts
+function allowedSourceRoots(root, scanRoots = []) {
+	return [...new Set([root, ...scanRoots].map((sourceRoot) => path.resolve(sourceRoot)))];
+}
+function resolveComponentSourcePath(art, artPath, sourceRoots) {
+	const componentPath = art.isInline && art.componentPath ? art.componentPath : art.metadata.component ? path.isAbsolute(art.metadata.component) ? art.metadata.component : path.resolve(path.dirname(artPath), art.metadata.component) : null;
+	return componentPath ? resolveInsideAny(sourceRoots, componentPath, "component path") : null;
+}
+//#endregion
 //#region src/utils.ts
 /**
 * Shared utility functions for the Musea Vite plugin.
@@ -183,9 +333,6 @@ function toPascalCase(str) {
 	if (!pascal) return "Variant";
 	return /^[\p{L}_$]/u.test(pascal) ? pascal : `Variant${pascal}`;
 }
-function escapeTemplate(str) {
-	return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n");
-}
 function escapeHtml(str) {
 	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
 }
@@ -227,6 +374,9 @@ function resolveRelativeSpecifier(specifier, artDir) {
 function rewriteRelativeImportStatement(statement, artDir) {
 	return statement.replace(/\bfrom\s+(['"])([^'"]+)\1/g, (_match, quote, specifier) => `from ${quote}${resolveRelativeSpecifier(specifier, artDir)}${quote}`).replace(/^(\s*import\s+)(['"])([^'"]+)\2(\s*;?\s*)$/s, (_match, prefix, quote, specifier, suffix) => `${prefix}${quote}${resolveRelativeSpecifier(specifier, artDir)}${quote}${suffix}`);
 }
+function escapeTemplateLiteral(str) {
+	return str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
+}
 function countCharBalance(source, openChar, closeChar) {
 	let balance = 0;
 	for (const char of source) if (char === openChar) balance++;
@@ -395,16 +545,16 @@ function parseScriptSetupForArt(content) {
 		returnNames: [...returnNames]
 	};
 }
-function generateArtModule(art, filePath) {
+function generateArtModule(art, filePath, options = {}) {
 	let componentImportPath;
-	let componentName;
+	let componentTagName;
+	const componentBindingName = "__MuseaComponent";
 	if (art.isInline && art.componentPath) {
-		componentImportPath = art.componentPath;
-		componentName = path.basename(art.componentPath, ".vue");
+		componentImportPath = options.root ? resolveComponentSourcePath(art, filePath, allowedSourceRoots(options.root, options.scanRoots ?? [])) ?? void 0 : art.componentPath;
+		componentTagName = "MuseaComponent";
 	} 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");
+		componentImportPath = options.root ? resolveComponentSourcePath(art, filePath, allowedSourceRoots(options.root, options.scanRoots ?? [])) ?? void 0 : path.isAbsolute(art.metadata.component) ? art.metadata.component : path.resolve(path.dirname(filePath), art.metadata.component);
+		componentTagName = "MuseaComponent";
 	}
 	const scriptSetup = art.scriptSetupContent ? parseScriptSetupForArt(art.scriptSetupContent) : null;
 	let code = `
@@ -418,12 +568,9 @@ import { defineComponent, h } from 'vue';
 			code += `${resolved}\n`;
 		}
 	}
-	if (componentImportPath && componentName) {
-		if (!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());
-		})) code += `import ${componentName} from '${componentImportPath}';\n`;
-		code += `export const __component__ = ${componentName};\n`;
+	if (componentImportPath && componentTagName) {
+		if (!scriptSetup?.imports.some((imp) => new RegExp(`^import\\s+${componentBindingName}[\\s,]`).test(imp.trim()))) code += `import ${componentBindingName} from ${JSON.stringify(componentImportPath)};\n`;
+		code += `export const __component__ = ${componentBindingName};\n`;
 	}
 	code += `
 export const metadata = ${JSON.stringify(art.metadata)};
@@ -433,15 +580,15 @@ export const __styles__ = ${JSON.stringify(art.styleBlocks ?? [])};
 	for (const variant of art.variants) {
 		const variantComponentName = toPascalCase(variant.name);
 		let template = variant.template;
-		if (componentName) template = template.replace(/<Self/g, `<${componentName}`).replace(/<\/Self>/g, `</${componentName}>`);
-		const escapedTemplate = template.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
-		const fullTemplate = `<div data-variant="${variant.name}">${escapedTemplate}</div>`;
-		const componentNames = /* @__PURE__ */ new Set();
-		if (componentName) componentNames.add(componentName);
+		if (componentTagName) template = template.replace(/<Self/g, `<${componentTagName}`).replace(/<\/Self>/g, `</${componentTagName}>`);
+		const escapedTemplate = escapeTemplateLiteral(template);
+		const fullTemplate = `<div data-variant="${escapeTemplateLiteral(escapeHtml(variant.name))}">${escapedTemplate}</div>`;
+		const componentNames = /* @__PURE__ */ new Map();
+		if (componentTagName) componentNames.set(componentTagName, componentBindingName);
 		if (scriptSetup) {
-			for (const name of scriptSetup.returnNames) if (/^[A-Z]/.test(name)) componentNames.add(name);
+			for (const name of scriptSetup.returnNames) if (/^[A-Z]/.test(name)) componentNames.set(name, name);
 		}
-		const components = componentNames.size > 0 ? `  components: { ${[...componentNames].join(", ")} },\n` : "";
+		const components = componentNames.size > 0 ? `  components: { ${[...componentNames].map(([name, value]) => `${JSON.stringify(name)}: ${value}`).join(", ")} },\n` : "";
 		const hasSetupBody = scriptSetup?.setupBody.some((line) => line.trim().length > 0) ?? false;
 		if (scriptSetup && (hasSetupBody || scriptSetup.returnNames.length > 0)) code += `
 export const ${variantComponentName} = defineComponent({
@@ -453,7 +600,7 @@ ${scriptSetup.setupBody.map((l) => `    ${l}`).join("\n")}
   template: \`${fullTemplate}\`,
 });
 `;
-		else if (componentName) code += `
+		else if (componentTagName) code += `
 export const ${variantComponentName} = {
   name: '${variantComponentName}',
 ${components}  template: \`${fullTemplate}\`,
@@ -496,126 +643,6 @@ function generateGalleryStyles() {
 	return `${styles_base_default}\n${styles_layout_default}\n${styles_components_default}`;
 }
 //#endregion
-//#region src/security.ts
-const DEFAULT_API_BODY_LIMIT_BYTES = 1024 * 1024;
-var HttpError = class extends Error {
-	status;
-	constructor(message, status) {
-		super(message);
-		this.name = "HttpError";
-		this.status = status;
-	}
-};
-function createDevSessionToken() {
-	return randomBytes(32).toString("base64url");
-}
-function isPathInside(parentDir, candidatePath) {
-	const parent = path.resolve(parentDir);
-	const candidate = path.resolve(candidatePath);
-	const relative = path.relative(parent, candidate);
-	return relative === "" || !relative.startsWith("..") && !path.isAbsolute(relative);
-}
-function resolveInside(parentDir, candidatePath, label = "path") {
-	if (candidatePath.includes("\0")) throw new HttpError(`${label} contains an invalid character`, 400);
-	const parent = path.resolve(parentDir);
-	const resolved = path.isAbsolute(candidatePath) ? path.resolve(candidatePath) : path.resolve(parent, candidatePath);
-	if (!isPathInside(parent, resolved)) throw new HttpError(`${label} escapes the allowed directory`, 400);
-	return resolved;
-}
-function resolveUrlPathInside(parentDir, requestUrl, label = "path") {
-	const rawPath = requestUrl.split(/[?#]/, 1)[0] || "/";
-	let pathname;
-	try {
-		pathname = decodeURIComponent(rawPath);
-	} catch {
-		throw new HttpError(`${label} is not valid URL encoding`, 400);
-	}
-	pathname = pathname.replaceAll("\\", "/");
-	if (pathname.split("/").includes("..")) throw new HttpError(`${label} must not contain parent directory segments`, 400);
-	return resolveInside(parentDir, `.${pathname}`, label);
-}
-function collectRequestBody(req, limit = DEFAULT_API_BODY_LIMIT_BYTES) {
-	return new Promise((resolve, reject) => {
-		let body = "";
-		let size = 0;
-		let completed = false;
-		req.on("data", (chunk) => {
-			if (completed) return;
-			const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
-			size += buffer.byteLength;
-			if (size > limit) {
-				completed = true;
-				reject(new HttpError(`Request body exceeds ${limit} bytes`, 413));
-				return;
-			}
-			body += buffer.toString("utf-8");
-		});
-		req.on("end", () => {
-			if (!completed) {
-				completed = true;
-				resolve(body);
-			}
-		});
-		req.on("error", (error) => {
-			if (!completed) {
-				completed = true;
-				reject(error);
-			}
-		});
-	});
-}
-function validateDevApiRequest(req, sessionToken) {
-	const originError = validateOrigin(req);
-	if (originError) return originError;
-	if (!isUnsafeMethod(req.method)) return null;
-	if (!hasValidSessionToken(req, sessionToken)) return new HttpError("Invalid Musea dev session token", 403);
-	if (!isJsonRequest(req)) return new HttpError("Content-Type must be application/json", 415);
-	return null;
-}
-function serializeScriptValue(value) {
-	return (JSON.stringify(value) ?? "undefined").replace(/[<>&\u2028\u2029]/g, (char) => {
-		switch (char) {
-			case "<": return "\\u003C";
-			case ">": return "\\u003E";
-			case "&": return "\\u0026";
-			case "\u2028": return "\\u2028";
-			case "\u2029": return "\\u2029";
-			default: return char;
-		}
-	});
-}
-function isUnsafeMethod(method) {
-	return method === "POST" || method === "PUT" || method === "PATCH" || method === "DELETE";
-}
-function isJsonRequest(req) {
-	return getHeader(req, "content-type")?.split(";")[0]?.trim().toLowerCase() === "application/json";
-}
-function validateOrigin(req) {
-	if (getHeader(req, "sec-fetch-site") === "cross-site") return new HttpError("Cross-origin Musea API requests are not allowed", 403);
-	const origin = getHeader(req, "origin");
-	if (!origin) return null;
-	const host = getHeader(req, "host");
-	if (!host) return new HttpError("Missing Host header", 400);
-	try {
-		if (new URL(origin).host !== host) return new HttpError("Cross-origin Musea API requests are not allowed", 403);
-	} catch {
-		return new HttpError("Invalid Origin header", 400);
-	}
-	return null;
-}
-function hasValidSessionToken(req, expectedToken) {
-	const actualToken = getHeader(req, "x-musea-session");
-	if (!actualToken) return false;
-	const actual = Buffer.from(actualToken);
-	const expected = Buffer.from(expectedToken);
-	return actual.length === expected.length && timingSafeEqual(actual, expected);
-}
-function getHeader(req, name) {
-	const value = req.headers[name];
-	if (Array.isArray(value)) return value[0];
-	return value;
-}
-//#endregion
 //#region src/gallery/template.ts
 /**
 * HTML structure and inline JS generation for the Musea gallery.
@@ -722,17 +749,18 @@ function generateGalleryScript(basePath) {
 
       let html = '';
       for (const [category, items] of Object.entries(categories)) {
+        const escapedCategory = escapeHtml(category);
         html += '<div class="sidebar-section">';
-        html += '<div class="category-header" data-category="' + category + '">';
+        html += '<div class="category-header" data-category="' + escapedCategory + '">';
         html += '<svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>';
-        html += '<span>' + category + '</span>';
+        html += '<span>' + escapedCategory + '</span>';
         html += '<span class="category-count">' + items.length + '</span>';
         html += '</div>';
-        html += '<ul class="art-list" data-category="' + category + '">';
+        html += '<ul class="art-list" data-category="' + escapedCategory + '">';
         for (const art of items) {
           const active = selectedArt?.path === art.path ? 'active' : '';
           const variantCount = art.variants?.length || 0;
-          html += '<li class="art-item ' + active + '" data-path="' + art.path + '">';
+          html += '<li class="art-item ' + active + '" data-path="' + escapeHtml(art.path) + '">';
           html += '<span>' + escapeHtml(art.metadata.title) + '</span>';
           html += '<span class="art-variant-count">' + variantCount + ' variant' + (variantCount !== 1 ? 's' : '') + '</span>';
           html += '</li>';
@@ -755,7 +783,7 @@ function generateGalleryScript(basePath) {
       sidebar.querySelectorAll('.category-header').forEach(header => {
         header.addEventListener('click', () => {
           header.classList.toggle('collapsed');
-          const list = sidebar.querySelector('.art-list[data-category="' + header.dataset.category + '"]');
+          const list = header.parentElement?.querySelector('.art-list');
           if (list) list.style.display = header.classList.contains('collapsed') ? 'none' : 'block';
         });
       });
@@ -1311,16 +1339,19 @@ function generatePreviewHtml(art, variant, _basePath, viteBase) {
 //#region src/preview/index.ts
 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 artModuleIdLiteral = JSON.stringify(artModuleId);
+	const variantNameLiteral = JSON.stringify(variantName);
+	const variantComponentNameLiteral = JSON.stringify(variantComponentName);
+	const cssImportStatements = cssImports.map((cssPath) => `import ${JSON.stringify(cssPath)};`).join("\n");
+	const setupImport = previewSetup ? `import __museaPreviewSetup from ${JSON.stringify(previewSetup)};` : "";
 	const setupCall = previewSetup ? "await __museaPreviewSetup(app);" : "";
 	const actionEvents = JSON.stringify(art.metadata.actionEvents ?? []);
+	const artStyleId = `musea-art-styles-${art.path.replace(/[^\w-]+/g, "_")}`;
 	return `
 ${cssImportStatements}
 ${setupImport}
 import { createApp, reactive, h } from 'vue';
-import * as artModule from '${artModuleId}';
+import * as artModule from ${artModuleIdLiteral};
 
 const container = document.getElementById('app');
 
@@ -1331,7 +1362,7 @@ const propsOverride = reactive({});
 const slotsOverride = reactive({ default: '' });
 
 function ensureArtStyles(styles) {
-  const styleId = '${`musea-art-styles-${art.path.replace(/[^\w-]+/g, "_")}`}';
+  const styleId = ${JSON.stringify(artStyleId)};
   const existing = document.getElementById(styleId);
 
   if (!Array.isArray(styles) || styles.length === 0) {
@@ -1390,11 +1421,11 @@ window.__museaSetSlots = (slots) => {
 async function mount() {
   try {
     // Get the specific variant component
-    const VariantComponent = artModule['${variantComponentName}'];
+    const VariantComponent = artModule[${variantComponentNameLiteral}];
     const RawComponent = artModule.__component__;
 
     if (!VariantComponent) {
-      throw new Error('Variant component "${variantComponentName}" not found in art module');
+      throw new Error('Variant component ' + ${variantComponentNameLiteral} + ' not found in art module');
     }
 
     // Create and mount the app
@@ -1406,8 +1437,8 @@ async function mount() {
     app.mount(container);
     currentApp = app;
 
-    console.log('[musea-preview] Mounted variant: ${escapedVariantName}');
-    __museaInitAddons(container, '${escapedVariantName}', ${actionEvents});
+    console.log('[musea-preview] Mounted variant:', ${variantNameLiteral});
+    __museaInitAddons(container, ${variantNameLiteral}, ${actionEvents});
 
     // Override set-props to remount with raw component + props
     const TargetComponent = RawComponent || VariantComponent;
@@ -1458,17 +1489,20 @@ mount();
 }
 function generatePreviewModuleWithProps(art, variantComponentName, variantName, propsOverride, cssImports = [], previewSetup = null) {
 	const artModuleId = `virtual:musea-art:${art.path}`;
-	const escapedVariantName = escapeTemplate(variantName);
+	const artModuleIdLiteral = JSON.stringify(artModuleId);
+	const variantNameLiteral = JSON.stringify(variantName);
+	const variantComponentNameLiteral = JSON.stringify(variantComponentName);
 	const propsJson = JSON.stringify(propsOverride);
-	const cssImportStatements = cssImports.map((cssPath) => `import '${cssPath}';`).join("\n");
-	const setupImport = previewSetup ? `import __museaPreviewSetup from '${previewSetup}';` : "";
+	const cssImportStatements = cssImports.map((cssPath) => `import ${JSON.stringify(cssPath)};`).join("\n");
+	const setupImport = previewSetup ? `import __museaPreviewSetup from ${JSON.stringify(previewSetup)};` : "";
 	const setupCall = previewSetup ? "await __museaPreviewSetup(app);" : "";
 	const actionEvents = JSON.stringify(art.metadata.actionEvents ?? []);
+	const artStyleId = `musea-art-styles-${art.path.replace(/[^\w-]+/g, "_")}`;
 	return `
 ${cssImportStatements}
 ${setupImport}
 import { createApp, h } from 'vue';
-import * as artModule from '${artModuleId}';
+import * as artModule from ${artModuleIdLiteral};
 
 const container = document.getElementById('app');
 const propsOverride = ${propsJson};
@@ -1476,7 +1510,7 @@ const propsOverride = ${propsJson};
 ${MUSEA_ADDONS_INIT_CODE}
 
 function ensureArtStyles(styles) {
-  const styleId = '${`musea-art-styles-${art.path.replace(/[^\w-]+/g, "_")}`}';
+  const styleId = ${JSON.stringify(artStyleId)};
   const existing = document.getElementById(styleId);
 
   if (!Array.isArray(styles) || styles.length === 0) {
@@ -1512,9 +1546,9 @@ function renderError(title, error) {
 
 async function mount() {
   try {
-    const VariantComponent = artModule['${variantComponentName}'];
+    const VariantComponent = artModule[${variantComponentNameLiteral}];
     if (!VariantComponent) {
-      throw new Error('Variant component "${variantComponentName}" not found');
+      throw new Error('Variant component ' + ${variantComponentNameLiteral} + ' not found');
     }
 
     const WrappedComponent = {
@@ -1529,8 +1563,8 @@ async function mount() {
     container.innerHTML = '';
     container.className = 'musea-variant';
     app.mount(container);
-    console.log('[musea-preview] Mounted variant: ${escapedVariantName} with props override');
-    __museaInitAddons(container, '${escapedVariantName}', ${actionEvents});
+    console.log('[musea-preview] Mounted variant with props override:', ${variantNameLiteral});
+    __museaInitAddons(container, ${variantNameLiteral}, ${actionEvents});
   } catch (error) {
     console.error('[musea-preview] Failed to mount:', error);
     renderError('Failed to render', error);
@@ -1732,13 +1766,19 @@ function registerMiddleware(devServer, ctx) {
 				res.setHeader("Cache-Control", "no-cache");
 				res.end(result.code);
 			} else {
-				const moduleCode = generateArtModule(art, artPath);
+				const moduleCode = generateArtModule(art, artPath, {
+					root: devServer.config.root,
+					scanRoots: ctx.scanRoots
+				});
 				res.setHeader("Content-Type", "application/javascript");
 				res.end(moduleCode);
 			}
 		} catch (err) {
 			console.error("[musea] Failed to transform art module:", err);
-			const moduleCode = generateArtModule(art, artPath);
+			const moduleCode = generateArtModule(art, artPath, {
+				root: devServer.config.root,
+				scanRoots: ctx.scanRoots
+			});
 			res.setHeader("Content-Type", "application/javascript");
 			res.end(moduleCode);
 		}
@@ -2524,7 +2564,11 @@ async function handleArtPalette(ctx, match, sendJson, sendError) {
 			typescript: ""
 		};
 		if (palette.controls.length === 0 && art.metadata.component) {
-			const resolvedComponentPath = path.isAbsolute(art.metadata.component) ? art.metadata.component : path.resolve(path.dirname(artPath), art.metadata.component);
+			const resolvedComponentPath = resolveComponentSourcePath(art, artPath, allowedSourceRoots(ctx.config.root, ctx.scanRoots));
+			if (!resolvedComponentPath) {
+				sendJson(palette);
+				return;
+			}
 			try {
 				const componentSource = await fs.promises.readFile(resolvedComponentPath, "utf-8");
 				const analysis = binding.analyzeSfc ? binding.analyzeSfc(componentSource, { filename: resolvedComponentPath }) : analyzeSfcFallback(componentSource, { filename: resolvedComponentPath });
@@ -2602,7 +2646,7 @@ async function handleArtAnalysis(ctx, match, sendJson, sendError) {
 		return;
 	}
 	try {
-		const resolvedComponentPath = art.isInline && art.componentPath ? art.componentPath : art.metadata.component ? path.isAbsolute(art.metadata.component) ? art.metadata.component : path.resolve(path.dirname(artPath), art.metadata.component) : null;
+		const resolvedComponentPath = resolveComponentSourcePath(art, artPath, allowedSourceRoots(ctx.config.root, ctx.scanRoots));
 		if (resolvedComponentPath) {
 			const source = await fs.promises.readFile(resolvedComponentPath, "utf-8");
 			const binding = loadNative();
@@ -2977,12 +3021,18 @@ function createLoad(state) {
 		if (id.startsWith("\0musea-art:")) {
 			const artPath = id.slice(11).replace(/\?musea-virtual$/, "");
 			const art = state.artFiles.get(artPath);
-			if (art) return generateArtModule(art, artPath);
+			if (art) return generateArtModule(art, artPath, {
+				root: state.getConfigRoot(),
+				scanRoots: state.getScanRoots()
+			});
 		}
 		if (id.startsWith("\0musea:")) {
 			const realPath = id.slice(7).replace(/\?musea-virtual$/, "");
 			const art = state.artFiles.get(realPath);
-			if (art) return generateArtModule(art, realPath);
+			if (art) return generateArtModule(art, realPath, {
+				root: state.getConfigRoot(),
+				scanRoots: state.getScanRoots()
+			});
 		}
 		return null;
 	};
@@ -3071,6 +3121,7 @@ function musea(options = {}) {
 		resolvedPreviewCss,
 		resolvedPreviewSetup,
 		getConfigRoot: () => config.root,
+		getScanRoots: () => scanRoots,
 		getServer: () => server,
 		processArtFile
 	};
@@ -3106,12 +3157,14 @@ function musea(options = {}) {
 				devSessionToken,
 				themeConfig,
 				artFiles,
+				scanRoots,
 				resolvedPreviewCss,
 				resolvedPreviewSetup
 			});
 			devServer.middlewares.use(`${basePath}/api`, createApiMiddleware({
 				config,
 				artFiles,
+				scanRoots,
 				tokensPath,
 				basePath,
 				resolvedPreviewCss,