@vizejs/vite-plugin-musea 0.81.0 → 0.83.0

package/dist/index.mjs

@@ -6,6 +6,7 @@ import { transformWithEsbuild } from "vite";
 import fs from "node:fs";
 import path from "node:path";
 import { vizeConfigStore } from "@vizejs/vite-plugin";
+import { randomBytes, timingSafeEqual } from "node:crypto";
 import { fileURLToPath } from "node:url";
 //#region src/native-loader.ts
 /**
@@ -90,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.
@@ -182,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;");
 }
@@ -226,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++;
@@ -394,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 = `
@@ -417,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)};
@@ -432,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({
@@ -452,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}\`,
@@ -564,7 +712,7 @@ function generateGalleryBody(basePath) {
 */
 function generateGalleryScript(basePath) {
 	return `
-    const basePath = '${basePath}';
+    const basePath = ${serializeScriptValue(basePath)};
     let arts = [];
     let selectedArt = null;
     let searchQuery = '';
@@ -601,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>';
@@ -634,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';
         });
       });
@@ -737,14 +886,15 @@ function generateGalleryScript(basePath) {
 /**
 * Generate the inline gallery HTML page.
 */
-function generateGalleryHtml(basePath, themeConfig) {
+function generateGalleryHtml(basePath, devSessionToken, themeConfig) {
+	const themeScript = themeConfig ? `window.__MUSEA_THEME_CONFIG__=${serializeScriptValue(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}';${themeConfig ? `window.__MUSEA_THEME_CONFIG__=${JSON.stringify(themeConfig)};` : ""}<\/script>
+  <script>window.__MUSEA_BASE_PATH__=${serializeScriptValue(basePath)};window.__MUSEA_SESSION_TOKEN__=${serializeScriptValue(devSessionToken)};${themeScript}<\/script>
   <style>${generateGalleryStyles()}
   </style>
 </head>
@@ -760,7 +910,7 @@ function generateGalleryHtml(basePath, themeConfig) {
 */
 function generateGalleryModule(basePath) {
 	return `
-export const basePath = '${basePath}';
+export const basePath = ${serializeScriptValue(basePath)};
 export async function loadArts() {
   const res = await fetch(basePath + '/api/arts');
   return res.json();
@@ -1189,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');
 
@@ -1209,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) {
@@ -1226,6 +1379,30 @@ function ensureArtStyles(styles) {
   }
 }
 
+function renderError(title, error) {
+  container.textContent = '';
+  const root = document.createElement('div');
+  root.className = 'musea-error';
+
+  const titleEl = document.createElement('div');
+  titleEl.className = 'musea-error-title';
+  titleEl.textContent = title;
+  root.appendChild(titleEl);
+
+  const messageEl = document.createElement('div');
+  messageEl.textContent = error instanceof Error ? error.message : String(error);
+  root.appendChild(messageEl);
+
+  const stack = error instanceof Error ? error.stack : '';
+  if (stack) {
+    const stackEl = document.createElement('pre');
+    stackEl.textContent = stack;
+    root.appendChild(stackEl);
+  }
+
+  container.appendChild(root);
+}
+
 window.__museaSetProps = (props) => {
   // Clear old keys
   for (const key of Object.keys(propsOverride)) {
@@ -1244,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
@@ -1260,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;
@@ -1281,13 +1458,7 @@ async function mount() {
     };
   } catch (error) {
     console.error('[musea-preview] Failed to mount:', error);
-    container.innerHTML = \`
-      <div class="musea-error">
-        <div class="musea-error-title">Failed to render component</div>
-        <div>\${error.message}</div>
-        <pre>\${error.stack || ''}</pre>
-      </div>
-    \`;
+    renderError('Failed to render component', error);
   }
 }
 
@@ -1300,7 +1471,7 @@ async function remountWithProps(Component) {
       return () => {
         const slotFns = {};
         for (const [name, content] of Object.entries(slotsOverride)) {
-          if (content) slotFns[name] = () => h('span', { innerHTML: content });
+          if (content) slotFns[name] = () => h('span', String(content));
         }
         return h(Component, { ...propsOverride }, slotFns);
       };
@@ -1318,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};
@@ -1336,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) {
@@ -1353,11 +1527,28 @@ function ensureArtStyles(styles) {
   }
 }
 
+function renderError(title, error) {
+  container.textContent = '';
+  const root = document.createElement('div');
+  root.className = 'musea-error';
+
+  const titleEl = document.createElement('div');
+  titleEl.className = 'musea-error-title';
+  titleEl.textContent = title;
+  root.appendChild(titleEl);
+
+  const messageEl = document.createElement('div');
+  messageEl.textContent = error instanceof Error ? error.message : String(error);
+  root.appendChild(messageEl);
+
+  container.appendChild(root);
+}
+
 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 = {
@@ -1372,11 +1563,11 @@ 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);
-    container.innerHTML = '<div class="musea-error"><div class="musea-error-title">Failed to render</div><div>' + error.message + '</div></div>';
+    renderError('Failed to render', error);
   }
 }
 
@@ -1395,7 +1586,11 @@ function resolveGallerySourceDir() {
 function toViteFsPath(filePath) {
 	return encodeURI(`/@fs${filePath.split(path.sep).join("/")}`);
 }
-async function tryLoadSourceGalleryHtml(devServer, url, basePath, themeConfig) {
+function generateDevGlobalsScript(basePath, devSessionToken, themeConfig) {
+	const themeScript = themeConfig ? `window.__MUSEA_THEME_CONFIG__=${serializeScriptValue(themeConfig)};` : "";
+	return `window.__MUSEA_BASE_PATH__=${serializeScriptValue(basePath)};window.__MUSEA_SESSION_TOKEN__=${serializeScriptValue(devSessionToken)};${themeScript}`;
+}
+async function tryLoadSourceGalleryHtml(devServer, url, basePath, devSessionToken, themeConfig) {
 	const gallerySourceDir = resolveGallerySourceDir();
 	const indexHtmlPath = path.join(gallerySourceDir, "index.html");
 	try {
@@ -1404,10 +1599,9 @@ async function tryLoadSourceGalleryHtml(devServer, url, basePath, themeConfig) {
 		return null;
 	}
 	const sourceEntryPath = toViteFsPath(path.join(gallerySourceDir, "main.ts"));
-	const themeScript = themeConfig ? `window.__MUSEA_THEME_CONFIG__=${JSON.stringify(themeConfig)};` : "";
 	let html = await fs.promises.readFile(indexHtmlPath, "utf-8");
 	html = html.replace("src=\"./main.ts\"", `src="${sourceEntryPath}"`);
-	html = html.replace("</head>", `<script>window.__MUSEA_BASE_PATH__='${basePath}';${themeScript}<\/script></head>`);
+	html = html.replace("</head>", `<script>${generateDevGlobalsScript(basePath, devSessionToken, themeConfig)}<\/script></head>`);
 	return devServer.transformIndexHtml(url, html);
 }
 /**
@@ -1422,7 +1616,7 @@ async function tryLoadSourceGalleryHtml(devServer, url, basePath, themeConfig) {
 * - Art module route
 */
 function registerMiddleware(devServer, ctx) {
-	const { basePath, themeConfig, artFiles } = ctx;
+	const { basePath, devSessionToken, themeConfig, artFiles } = ctx;
 	devServer.middlewares.use(basePath, async (req, res, next) => {
 		const url = req.url || "/";
 		if (url === "/" || url === "/index.html" || url.startsWith("/tokens") || url.startsWith("/component/") || url.startsWith("/tests")) {
@@ -1431,19 +1625,18 @@ function registerMiddleware(devServer, ctx) {
 			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>`);
+				html = html.replace("</head>", `<script>${generateDevGlobalsScript(basePath, devSessionToken, themeConfig)}<\/script></head>`);
 				res.setHeader("Content-Type", "text/html");
 				res.end(html);
 				return;
 			} catch {
-				const sourceHtml = await tryLoadSourceGalleryHtml(devServer, url, basePath, themeConfig);
+				const sourceHtml = await tryLoadSourceGalleryHtml(devServer, url, basePath, devSessionToken, themeConfig);
 				if (sourceHtml) {
 					res.setHeader("Content-Type", "text/html");
 					res.end(sourceHtml);
 					return;
 				}
-				const html = generateGalleryHtml(basePath, themeConfig);
+				const html = generateGalleryHtml(basePath, devSessionToken, themeConfig);
 				res.setHeader("Content-Type", "text/html");
 				res.end(html);
 				return;
@@ -1451,8 +1644,8 @@ function registerMiddleware(devServer, ctx) {
 		}
 		if (url.startsWith("/assets/")) {
 			const galleryDistDir = resolveGalleryDistDir();
-			const filePath = path.join(galleryDistDir, url);
 			try {
+				const filePath = resolveUrlPathInside(galleryDistDir, url, "asset path");
 				if ((await fs.promises.stat(filePath)).isFile()) {
 					const content = await fs.promises.readFile(filePath);
 					const ext = path.extname(filePath);
@@ -1469,7 +1662,13 @@ function registerMiddleware(devServer, ctx) {
 					res.end(content);
 					return;
 				}
-			} catch {}
+			} catch (error) {
+				if (error instanceof HttpError) {
+					res.statusCode = error.status;
+					res.end(error.message);
+					return;
+				}
+			}
 		}
 		next();
 	});
@@ -1567,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);
 		}
@@ -1792,6 +1997,18 @@ function scanTokenUsage(artFiles, tokenMap) {
 */
 const REFERENCE_PATTERN = /^\{(.+)\}$/;
 const MAX_RESOLVE_DEPTH = 10;
+const UNSAFE_TOKEN_PATH_SEGMENTS = new Set([
+	"__proto__",
+	"prototype",
+	"constructor"
+]);
+function parseTokenPath(dotPath) {
+	const parts = dotPath.split(".");
+	if (parts.length === 0 || parts.some((part) => part.trim() === "")) throw new Error(`Invalid token path "${dotPath}"`);
+	const unsafeSegment = parts.find((part) => UNSAFE_TOKEN_PATH_SEGMENTS.has(part));
+	if (unsafeSegment) throw new Error(`Token path segment "${unsafeSegment}" is not allowed`);
+	return parts;
+}
 /**
 * Flatten nested categories into a flat map keyed by dot-path.
 */
@@ -1862,7 +2079,7 @@ async function writeRawTokenFile(tokensPath, data) {
 * Set a token at a dot-separated path in the raw JSON structure.
 */
 function setTokenAtPath(data, dotPath, token) {
-	const parts = dotPath.split(".");
+	const parts = parseTokenPath(dotPath);
 	let current = data;
 	for (let i = 0; i < parts.length - 1; i++) {
 		const key = parts[i];
@@ -1882,7 +2099,7 @@ function setTokenAtPath(data, dotPath, token) {
 * Delete a token at a dot-separated path, cleaning empty parents.
 */
 function deleteTokenAtPath(data, dotPath) {
-	const parts = dotPath.split(".");
+	const parts = parseTokenPath(dotPath);
 	const parents = [];
 	let current = data;
 	for (let i = 0; i < parts.length - 1; i++) {
@@ -1960,27 +2177,34 @@ function findDependentTokens(tokenMap, targetPath) {
 * Generates HTML, Markdown, and JSON documentation from parsed token categories,
 * and provides the main processStyleDictionary orchestrator function.
 */
+const SAFE_CSS_COLOR_PATTERN = /^(?:#[0-9a-fA-F]{3,8}|(?:rgb|hsl)a?\(\s*[-+.\d,%\s]+\))$/;
+function safeCssColor(value, type) {
+	if (typeof value !== "string") return null;
+	const trimmed = value.trim();
+	return (type === "color" || trimmed.startsWith("#") || trimmed.startsWith("rgb") || trimmed.startsWith("hsl")) && SAFE_CSS_COLOR_PATTERN.test(trimmed) ? trimmed : null;
+}
 /**
 * Generate HTML documentation for tokens.
 */
 function generateTokensHtml(categories) {
 	const renderToken = (name, token) => {
+		const color = safeCssColor(token.value, token.type);
 		return `
       <div class="token">
         <div class="token-preview">
-          ${typeof token.value === "string" && (token.value.startsWith("#") || token.value.startsWith("rgb") || token.value.startsWith("hsl") || token.type === "color") ? `<div class="color-swatch" style="background: ${token.value}"></div>` : ""}
+          ${color ? `<div class="color-swatch" style="background: ${color}"></div>` : ""}
         </div>
         <div class="token-info">
-          <div class="token-name">${name}</div>
-          <div class="token-value">${token.value}</div>
-          ${token.description ? `<div class="token-description">${token.description}</div>` : ""}
+          <div class="token-name">${escapeHtml(name)}</div>
+          <div class="token-value">${escapeHtml(String(token.value))}</div>
+          ${token.description ? `<div class="token-description">${escapeHtml(token.description)}</div>` : ""}
         </div>
       </div>
     `;
 	};
 	const renderCategory = (category, level = 2) => {
 		const heading = `h${Math.min(level, 6)}`;
-		let html = `<${heading}>${category.name}</${heading}>`;
+		let html = `<${heading}>${escapeHtml(category.name)}</${heading}>`;
 		html += "<div class=\"tokens-grid\">";
 		for (const [name, token] of Object.entries(category.tokens)) html += renderToken(name, token);
 		html += "</div>";
@@ -2130,16 +2354,20 @@ async function processStyleDictionary(config) {
 }
 //#endregion
 //#region src/api-tokens.ts
-/**
-* Musea gallery API token route handlers.
-*
-* Handles GET/POST/PUT/DELETE for /api/tokens endpoints:
-* - GET /tokens       -- list all resolved design tokens
-* - GET /tokens/usage -- token usage across art files
-* - POST /tokens      -- create a new token
-* - PUT /tokens       -- update an existing token
-* - DELETE /tokens    -- delete a token
-*/
+function resolveTokensPath(ctx) {
+	return resolveInside(ctx.config.root, ctx.tokensPath, "tokensPath");
+}
+function sendTokenMutationError(e, sendError) {
+	if (e instanceof HttpError) {
+		sendError(e.message, e.status);
+		return;
+	}
+	if (e instanceof Error && /token path/i.test(e.message)) {
+		sendError(e.message, 400);
+		return;
+	}
+	sendError(e instanceof Error ? e.message : String(e));
+}
 /** GET /api/tokens/usage */
 async function handleTokensUsage(ctx, sendJson) {
 	if (!ctx.tokensPath) {
@@ -2147,7 +2375,7 @@ async function handleTokensUsage(ctx, sendJson) {
 		return;
 	}
 	try {
-		const categories = await parseTokens(path.resolve(ctx.config.root, ctx.tokensPath));
+		const categories = await parseTokens(resolveTokensPath(ctx));
 		resolveReferences(categories, buildTokenMap(categories));
 		const resolvedTokenMap = buildTokenMap(categories);
 		sendJson(scanTokenUsage(ctx.artFiles, resolvedTokenMap));
@@ -2172,7 +2400,7 @@ async function handleTokensGet(ctx, sendJson) {
 		return;
 	}
 	try {
-		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const absoluteTokensPath = resolveTokensPath(ctx);
 		const categories = await parseTokens(absoluteTokensPath);
 		resolveReferences(categories, buildTokenMap(categories));
 		const resolvedTokenMap = buildTokenMap(categories);
@@ -2212,7 +2440,7 @@ async function handleTokensCreate(ctx, readBody, sendJson, sendError) {
 			sendError("Missing required fields: path, token.value", 400);
 			return;
 		}
-		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const absoluteTokensPath = resolveTokensPath(ctx);
 		const rawData = await readRawTokenFile(absoluteTokensPath);
 		const currentMap = buildTokenMap(await parseTokens(absoluteTokensPath));
 		if (currentMap[dotPath]) {
@@ -2237,7 +2465,7 @@ async function handleTokensCreate(ctx, readBody, sendJson, sendError) {
 			tokenMap: buildTokenMap(categories)
 		}, 201);
 	} catch (e) {
-		sendError(e instanceof Error ? e.message : String(e));
+		sendTokenMutationError(e, sendError);
 	}
 }
 /** PUT /api/tokens (update) */
@@ -2253,7 +2481,7 @@ async function handleTokensUpdate(ctx, readBody, sendJson, sendError) {
 			sendError("Missing required fields: path, token.value", 400);
 			return;
 		}
-		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const absoluteTokensPath = resolveTokensPath(ctx);
 		if (token.$reference) {
 			const validation = validateSemanticReference(buildTokenMap(await parseTokens(absoluteTokensPath)), token.$reference, dotPath);
 			if (!validation.valid) {
@@ -2273,7 +2501,7 @@ async function handleTokensUpdate(ctx, readBody, sendJson, sendError) {
 			tokenMap: buildTokenMap(categories)
 		});
 	} catch (e) {
-		sendError(e instanceof Error ? e.message : String(e));
+		sendTokenMutationError(e, sendError);
 	}
 }
 /** DELETE /api/tokens */
@@ -2289,7 +2517,7 @@ async function handleTokensDelete(ctx, readBody, sendJson, sendError) {
 			sendError("Missing required field: path", 400);
 			return;
 		}
-		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const absoluteTokensPath = resolveTokensPath(ctx);
 		const dependents = findDependentTokens(buildTokenMap(await parseTokens(absoluteTokensPath)), dotPath);
 		const rawData = await readRawTokenFile(absoluteTokensPath);
 		if (!deleteTokenAtPath(rawData, dotPath)) {
@@ -2305,7 +2533,7 @@ async function handleTokensDelete(ctx, readBody, sendJson, sendError) {
 			dependentsWarning: dependents.length > 0 ? dependents : void 0
 		});
 	} catch (e) {
-		sendError(e instanceof Error ? e.message : String(e));
+		sendTokenMutationError(e, sendError);
 	}
 }
 //#endregion
@@ -2336,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 });
@@ -2414,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();
@@ -2512,15 +2744,23 @@ function handlePreviewWithProps(ctx, body, res, sendJson, sendError) {
 		res.setHeader("Content-Type", "application/javascript");
 		res.end(moduleCode);
 	} catch (e) {
+		if (e instanceof HttpError) {
+			sendError(e.message, e.status);
+			return;
+		}
 		sendError(e instanceof Error ? e.message : String(e));
 	}
 }
 /** POST /api/generate */
-async function handleGenerate(body, sendJson, sendError) {
+async function handleGenerate(ctx, body, sendJson, sendError) {
 	try {
 		const { componentPath: reqComponentPath, options: autogenOptions } = JSON.parse(body);
+		if (typeof reqComponentPath !== "string") {
+			sendError("Missing required field: componentPath", 400);
+			return;
+		}
 		const { generateArtFile: genArt } = await import("./autogen/index.mjs");
-		const result = await genArt(reqComponentPath, autogenOptions);
+		const result = await genArt(resolveInside(ctx.config.root, reqComponentPath, "componentPath"), autogenOptions);
 		sendJson({
 			generated: true,
 			componentName: result.componentName,
@@ -2528,6 +2768,10 @@ async function handleGenerate(body, sendJson, sendError) {
 			artFileContent: result.artFileContent
 		});
 	} catch (e) {
+		if (e instanceof HttpError) {
+			sendError(e.message, e.status);
+			return;
+		}
 		sendError(e instanceof Error ? e.message : String(e));
 	}
 }
@@ -2590,16 +2834,6 @@ async function handleRunVrt(ctx, body, sendJson, sendError) {
 }
 //#endregion
 //#region src/api-routes/index.ts
-/** Helper to read the full request body as a string. */
-function collectBody(req) {
-	return new Promise((resolve) => {
-		let body = "";
-		req.on("data", (chunk) => {
-			body += chunk;
-		});
-		req.on("end", () => resolve(body));
-	});
-}
 /**
 * Create the API middleware handler for the Musea gallery.
 *
@@ -2616,107 +2850,117 @@ function createApiMiddleware(ctx) {
 		const sendError = (message, status = 500) => {
 			sendJson({ error: message }, status);
 		};
-		const readBody = () => collectBody(req);
+		const readBody = () => collectRequestBody(req, ctx.apiBodyLimit ?? 1048576);
 		const url = req.url || "/";
-		if (url === "/arts" && req.method === "GET") {
-			sendJson(Array.from(ctx.artFiles.values()));
-			return;
-		}
-		if (url === "/tokens/usage" && req.method === "GET") {
-			await handleTokensUsage(ctx, sendJson);
-			return;
-		}
-		if (url === "/tokens" && req.method === "GET") {
-			await handleTokensGet(ctx, sendJson);
-			return;
-		}
-		if (url === "/tokens" && req.method === "POST") {
-			await handleTokensCreate(ctx, readBody, sendJson, sendError);
-			return;
-		}
-		if (url === "/tokens" && req.method === "PUT") {
-			await handleTokensUpdate(ctx, readBody, sendJson, sendError);
-			return;
-		}
-		if (url === "/tokens" && req.method === "DELETE") {
-			await handleTokensDelete(ctx, readBody, sendJson, sendError);
-			return;
-		}
-		if (url?.startsWith("/arts/") && req.method === "PUT") {
-			const sourceMatch = url.slice(6).match(/^(.+)\/source$/);
-			if (sourceMatch) {
-				const artPath = decodeURIComponent(sourceMatch[1]);
-				if (!ctx.artFiles.get(artPath)) {
-					sendError("Art not found", 404);
-					return;
-				}
-				const body = await collectBody(req);
-				try {
-					const { source } = JSON.parse(body);
-					if (typeof source !== "string") {
-						sendError("Missing required field: source", 400);
-						return;
-					}
-					await fs.promises.writeFile(artPath, source, "utf-8");
-					await ctx.processArtFile(artPath);
-					sendJson({ success: true });
-				} catch (e) {
-					sendError(e instanceof Error ? e.message : String(e));
-				}
+		try {
+			const requestError = validateDevApiRequest(req, ctx.devSessionToken);
+			if (requestError) {
+				sendError(requestError.message, requestError.status);
 				return;
 			}
-			next();
-			return;
-		}
-		if (url?.startsWith("/arts/") && req.method === "GET") {
-			const rest = url.slice(6);
-			const sourceMatch = rest.match(/^(.+)\/source$/);
-			const paletteMatch = rest.match(/^(.+)\/palette$/);
-			const analysisMatch = rest.match(/^(.+)\/analysis$/);
-			const docsMatch = rest.match(/^(.+)\/docs$/);
-			const a11yMatch = rest.match(/^(.+)\/variants\/([^/]+)\/a11y$/);
-			if (sourceMatch) {
-				await handleArtSource(ctx, sourceMatch, sendJson, sendError);
+			if (url === "/arts" && req.method === "GET") {
+				sendJson(Array.from(ctx.artFiles.values()));
 				return;
 			}
-			if (paletteMatch) {
-				await handleArtPalette(ctx, paletteMatch, sendJson, sendError);
+			if (url === "/tokens/usage" && req.method === "GET") {
+				await handleTokensUsage(ctx, sendJson);
 				return;
 			}
-			if (analysisMatch) {
-				await handleArtAnalysis(ctx, analysisMatch, sendJson, sendError);
+			if (url === "/tokens" && req.method === "GET") {
+				await handleTokensGet(ctx, sendJson);
 				return;
 			}
-			if (docsMatch) {
-				await handleArtDocs(ctx, docsMatch, sendJson, sendError);
+			if (url === "/tokens" && req.method === "POST") {
+				await handleTokensCreate(ctx, readBody, sendJson, sendError);
 				return;
 			}
-			if (a11yMatch) {
-				handleArtA11y(ctx, a11yMatch, sendJson, sendError);
+			if (url === "/tokens" && req.method === "PUT") {
+				await handleTokensUpdate(ctx, readBody, sendJson, sendError);
 				return;
 			}
-			const artPath = decodeURIComponent(rest);
-			const art = ctx.artFiles.get(artPath);
-			if (art) sendJson(art);
-			else sendError("Art not found", 404);
-			return;
-		}
-		if (req.method === "POST") {
-			const body = await collectBody(req);
-			if (url === "/preview-with-props") {
-				handlePreviewWithProps(ctx, body, res, sendJson, sendError);
+			if (url === "/tokens" && req.method === "DELETE") {
+				await handleTokensDelete(ctx, readBody, sendJson, sendError);
 				return;
 			}
-			if (url === "/generate") {
-				await handleGenerate(body, sendJson, sendError);
+			if (url?.startsWith("/arts/") && req.method === "PUT") {
+				const sourceMatch = url.slice(6).match(/^(.+)\/source$/);
+				if (sourceMatch) {
+					const artPath = decodeURIComponent(sourceMatch[1]);
+					if (!ctx.artFiles.get(artPath)) {
+						sendError("Art not found", 404);
+						return;
+					}
+					const safeArtPath = resolveInside(ctx.config.root, artPath, "art path");
+					const body = await readBody();
+					const { source } = JSON.parse(body);
+					if (typeof source !== "string") {
+						sendError("Missing required field: source", 400);
+						return;
+					}
+					await fs.promises.writeFile(safeArtPath, source, "utf-8");
+					await ctx.processArtFile(safeArtPath);
+					sendJson({ success: true });
+					return;
+				}
+				next();
 				return;
 			}
-			if (url === "/run-vrt") {
-				await handleRunVrt(ctx, body, sendJson, sendError);
+			if (url?.startsWith("/arts/") && req.method === "GET") {
+				const rest = url.slice(6);
+				const sourceMatch = rest.match(/^(.+)\/source$/);
+				const paletteMatch = rest.match(/^(.+)\/palette$/);
+				const analysisMatch = rest.match(/^(.+)\/analysis$/);
+				const docsMatch = rest.match(/^(.+)\/docs$/);
+				const a11yMatch = rest.match(/^(.+)\/variants\/([^/]+)\/a11y$/);
+				if (sourceMatch) {
+					await handleArtSource(ctx, sourceMatch, sendJson, sendError);
+					return;
+				}
+				if (paletteMatch) {
+					await handleArtPalette(ctx, paletteMatch, sendJson, sendError);
+					return;
+				}
+				if (analysisMatch) {
+					await handleArtAnalysis(ctx, analysisMatch, sendJson, sendError);
+					return;
+				}
+				if (docsMatch) {
+					await handleArtDocs(ctx, docsMatch, sendJson, sendError);
+					return;
+				}
+				if (a11yMatch) {
+					handleArtA11y(ctx, a11yMatch, sendJson, sendError);
+					return;
+				}
+				const artPath = decodeURIComponent(rest);
+				const art = ctx.artFiles.get(artPath);
+				if (art) sendJson(art);
+				else sendError("Art not found", 404);
+				return;
+			}
+			if (req.method === "POST") {
+				const body = await readBody();
+				if (url === "/preview-with-props") {
+					handlePreviewWithProps(ctx, body, res, sendJson, sendError);
+					return;
+				}
+				if (url === "/generate") {
+					await handleGenerate(ctx, body, sendJson, sendError);
+					return;
+				}
+				if (url === "/run-vrt") {
+					await handleRunVrt(ctx, body, sendJson, sendError);
+					return;
+				}
+			}
+			next();
+		} catch (e) {
+			if (e instanceof HttpError) {
+				sendError(e.message, e.status);
 				return;
 			}
+			sendError(e instanceof Error ? e.message : String(e));
 		}
-		next();
 	};
 }
 //#endregion
@@ -2777,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;
 	};
@@ -2855,6 +3105,7 @@ function musea(options = {}) {
 	const themeConfig = buildThemeConfig(options.theme);
 	const previewCss = options.previewCss ?? [];
 	const previewSetup = options.previewSetup;
+	const devSessionToken = createDevSessionToken();
 	let config;
 	let server = null;
 	const artFiles = /* @__PURE__ */ new Map();
@@ -2870,6 +3121,7 @@ function musea(options = {}) {
 		resolvedPreviewCss,
 		resolvedPreviewSetup,
 		getConfigRoot: () => config.root,
+		getScanRoots: () => scanRoots,
 		getServer: () => server,
 		processArtFile
 	};
@@ -2902,18 +3154,22 @@ function musea(options = {}) {
 			devServer.watcher.add(scanRoots);
 			registerMiddleware(devServer, {
 				basePath,
+				devSessionToken,
 				themeConfig,
 				artFiles,
+				scanRoots,
 				resolvedPreviewCss,
 				resolvedPreviewSetup
 			});
 			devServer.middlewares.use(`${basePath}/api`, createApiMiddleware({
 				config,
 				artFiles,
+				scanRoots,
 				tokensPath,
 				basePath,
 				resolvedPreviewCss,
 				resolvedPreviewSetup,
+				devSessionToken,
 				processArtFile,
 				getDevServerPort: () => devServer.config.server.port || 5173
 			}));