@vizejs/vite-plugin-musea 0.13.0 → 0.15.0

package/dist/index.js

@@ -1,10 +1,10 @@
-import { MuseaA11yRunner } from "./a11y-C6xqILwZ.js";
-import { generateArtFile, writeArtFile } from "./autogen-ymQnARZK.js";
-import { MuseaVrtRunner, generateVrtJsonReport, generateVrtReport } from "./vrt-CrjRhMVE.js";
-import path from "node:path";
-import { createRequire } from "node:module";
+import { MuseaVrtRunner, generateVrtJsonReport, generateVrtReport } from "./vrt-5_c9P1YY.js";
+import { MuseaA11yRunner } from "./a11y-7maCHrYD.js";
+import { generateArtFile, writeArtFile } from "./autogen-dfLosbY_.js";
 import fs from "node:fs";
+import path from "node:path";
 import { vizeConfigStore } from "@vizejs/vite-plugin";
+import { createRequire } from "node:module";
 
 //#region src/native-loader.ts
 let native = null;
@@ -85,514 +85,253 @@ function analyzeSfcFallback(source, _options) {
 }
 
 //#endregion
-//#region src/gallery.ts
+//#region src/utils.ts
+function shouldProcess(file, include, exclude, root) {
+	const relative = path.relative(root, file);
+	for (const pattern of exclude) if (matchGlob(relative, pattern)) return false;
+	for (const pattern of include) if (matchGlob(relative, pattern)) return true;
+	return false;
+}
+function matchGlob(filepath, pattern) {
+	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) {
+	const files = [];
+	async function scan(dir) {
+		const entries = await fs.promises.readdir(dir, { withFileTypes: true });
+		for (const entry of entries) {
+			const fullPath = path.join(dir, entry.name);
+			const relative = path.relative(root, fullPath);
+			let excluded = false;
+			for (const pattern of exclude) if (matchGlob(relative, pattern) || matchGlob(entry.name, pattern)) {
+				excluded = true;
+				break;
+			}
+			if (excluded) continue;
+			if (entry.isDirectory()) await scan(fullPath);
+			else if (entry.isFile() && entry.name.endsWith(".art.vue")) {
+				for (const pattern of include) if (matchGlob(relative, pattern)) {
+					files.push(fullPath);
+					break;
+				}
+			} else if (scanInlineArt && entry.isFile() && entry.name.endsWith(".vue") && !entry.name.endsWith(".art.vue")) {
+				const content = await fs.promises.readFile(fullPath, "utf-8");
+				if (content.includes("<art")) files.push(fullPath);
+			}
+		}
+	}
+	await scan(root);
+	return files;
+}
+async function generateStorybookFiles(artFiles, root, outDir) {
+	const binding = loadNative();
+	const outputDir = path.resolve(root, outDir);
+	await fs.promises.mkdir(outputDir, { recursive: true });
+	for (const [filePath, _art] of artFiles) try {
+		const source = await fs.promises.readFile(filePath, "utf-8");
+		const csf = binding.artToCsf(source, { filename: filePath });
+		const outputPath = path.join(outputDir, csf.filename);
+		await fs.promises.writeFile(outputPath, csf.code, "utf-8");
+		console.log(`[musea] Generated: ${path.relative(root, outputPath)}`);
+	} catch (e) {
+		console.error(`[musea] Failed to generate CSF for ${filePath}:`, e);
+	}
+}
+function toPascalCase(str) {
+	return str.split(/[\s\-_]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+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;");
+}
 /**
-* Gallery HTML generation for the Musea component gallery.
-*
-* Contains the inline gallery SPA template (used as a fallback when the
-* pre-built gallery is not available) and the gallery virtual module.
+* Build the theme config object from plugin options for runtime injection.
 */
+function buildThemeConfig(theme) {
+	if (!theme) return void 0;
+	if (typeof theme === "string") return { default: theme };
+	const themes = Array.isArray(theme) ? theme : [theme];
+	const custom = {};
+	for (const t of themes) custom[t.name] = {
+		base: t.base,
+		colors: t.colors
+	};
+	return {
+		default: themes[0].name,
+		custom
+	};
+}
+
+//#endregion
+//#region src/art-module.ts
 /**
-* Generate the inline gallery HTML page.
+* Extract the content of the first <script setup> block from a Vue SFC source.
 */
-function generateGalleryHtml(basePath, themeConfig) {
-	const themeScript = themeConfig ? `window.__MUSEA_THEME_CONFIG__=${JSON.stringify(themeConfig)};` : "";
-	return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Musea - Component Gallery</title>
-  <script>window.__MUSEA_BASE_PATH__='${basePath}';${themeScript}</script>
-  <style>
-    :root {
-      --musea-bg-primary: #E6E2D6;
-      --musea-bg-secondary: #ddd9cd;
-      --musea-bg-tertiary: #d4d0c4;
-      --musea-bg-elevated: #E6E2D6;
-      --musea-accent: #121212;
-      --musea-accent-hover: #2a2a2a;
-      --musea-accent-subtle: rgba(18, 18, 18, 0.08);
-      --musea-text: #121212;
-      --musea-text-secondary: #3a3a3a;
-      --musea-text-muted: #6b6b6b;
-      --musea-border: #c8c4b8;
-      --musea-border-subtle: #d4d0c4;
-      --musea-success: #16a34a;
-      --musea-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
-      --musea-radius-sm: 4px;
-      --musea-radius-md: 6px;
-      --musea-radius-lg: 8px;
-      --musea-transition: 0.15s ease;
-    }
-
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-      background: var(--musea-bg-primary);
-      color: var(--musea-text);
-      min-height: 100vh;
-      line-height: 1.5;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    /* Header */
-    .header {
-      background: var(--musea-bg-secondary);
-      border-bottom: 1px solid var(--musea-border);
-      padding: 0 1.5rem;
-      height: 56px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 1.5rem;
-    }
-
-    .logo {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 1.125rem;
-      font-weight: 700;
-      color: var(--musea-accent);
-      text-decoration: none;
-    }
-
-    .logo-svg {
-      width: 32px;
-      height: 32px;
-      flex-shrink: 0;
-    }
-
-    .logo-icon svg {
-      width: 16px;
-      height: 16px;
-      color: var(--musea-text);
-    }
-
-    .header-subtitle {
-      color: var(--musea-text-muted);
-      font-size: 0.8125rem;
-      font-weight: 500;
-      padding-left: 1.5rem;
-      border-left: 1px solid var(--musea-border);
-    }
-
-    .search-container {
-      position: relative;
-      width: 280px;
-    }
-
-    .search-input {
-      width: 100%;
-      background: var(--musea-bg-tertiary);
-      border: 1px solid var(--musea-border);
-      border-radius: var(--musea-radius-md);
-      padding: 0.5rem 0.75rem 0.5rem 2.25rem;
-      color: var(--musea-text);
-      font-size: 0.8125rem;
-      outline: none;
-      transition: border-color var(--musea-transition), background var(--musea-transition);
-    }
-
-    .search-input::placeholder {
-      color: var(--musea-text-muted);
-    }
-
-    .search-input:focus {
-      border-color: var(--musea-accent);
-      background: var(--musea-bg-elevated);
-    }
-
-    .search-icon {
-      position: absolute;
-      left: 0.75rem;
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--musea-text-muted);
-      pointer-events: none;
-    }
-
-    /* Layout */
-    .main {
-      display: grid;
-      grid-template-columns: 260px 1fr;
-      min-height: calc(100vh - 56px);
-    }
-
-    /* Sidebar */
-    .sidebar {
-      background: var(--musea-bg-secondary);
-      border-right: 1px solid var(--musea-border);
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-
-    .sidebar::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    .sidebar::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    .sidebar::-webkit-scrollbar-thumb {
-      background: var(--musea-border);
-      border-radius: 3px;
-    }
-
-    .sidebar-section {
-      padding: 0.75rem;
-    }
-
-    .category-header {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.625rem 0.75rem;
-      font-size: 0.6875rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: var(--musea-text-muted);
-      cursor: pointer;
-      user-select: none;
-      border-radius: var(--musea-radius-sm);
-      transition: background var(--musea-transition);
-    }
-
-    .category-header:hover {
-      background: var(--musea-bg-tertiary);
-    }
-
-    .category-icon {
-      width: 16px;
-      height: 16px;
-      transition: transform var(--musea-transition);
-    }
-
-    .category-header.collapsed .category-icon {
-      transform: rotate(-90deg);
-    }
-
-    .category-count {
-      margin-left: auto;
-      background: var(--musea-bg-tertiary);
-      padding: 0.125rem 0.375rem;
-      border-radius: 4px;
-      font-size: 0.625rem;
-    }
-
-    .art-list {
-      list-style: none;
-      margin-top: 0.25rem;
-    }
-
-    .art-item {
-      display: flex;
-      align-items: center;
-      gap: 0.625rem;
-      padding: 0.5rem 0.75rem 0.5rem 1.75rem;
-      border-radius: var(--musea-radius-sm);
-      cursor: pointer;
-      font-size: 0.8125rem;
-      color: var(--musea-text-secondary);
-      transition: all var(--musea-transition);
-      position: relative;
-    }
-
-    .art-item::before {
-      content: '';
-      position: absolute;
-      left: 0.75rem;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: var(--musea-border);
-      transition: background var(--musea-transition);
-    }
-
-    .art-item:hover {
-      background: var(--musea-bg-tertiary);
-      color: var(--musea-text);
-    }
-
-    .art-item:hover::before {
-      background: var(--musea-text-muted);
-    }
-
-    .art-item.active {
-      background: var(--musea-accent-subtle);
-      color: var(--musea-accent-hover);
-    }
-
-    .art-item.active::before {
-      background: var(--musea-accent);
-    }
-
-    .art-variant-count {
-      margin-left: auto;
-      font-size: 0.6875rem;
-      color: var(--musea-text-muted);
-      opacity: 0;
-      transition: opacity var(--musea-transition);
-    }
-
-    .art-item:hover .art-variant-count {
-      opacity: 1;
-    }
-
-    /* Content */
-    .content {
-      background: var(--musea-bg-primary);
-      overflow-y: auto;
-    }
-
-    .content-inner {
-      max-width: 1400px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-
-    .content-header {
-      margin-bottom: 2rem;
-    }
-
-    .content-title {
-      font-size: 1.5rem;
-      font-weight: 700;
-      margin-bottom: 0.5rem;
-    }
-
-    .content-description {
-      color: var(--musea-text-muted);
-      font-size: 0.9375rem;
-      max-width: 600px;
-    }
-
-    .content-meta {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      margin-top: 1rem;
-    }
-
-    .meta-tag {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.375rem;
-      padding: 0.25rem 0.625rem;
-      background: var(--musea-bg-secondary);
-      border: 1px solid var(--musea-border);
-      border-radius: var(--musea-radius-sm);
-      font-size: 0.75rem;
-      color: var(--musea-text-muted);
-    }
-
-    .meta-tag svg {
-      width: 12px;
-      height: 12px;
-    }
-
-    /* Gallery Grid */
-    .gallery {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-      gap: 1.25rem;
-    }
-
-    /* Variant Card */
-    .variant-card {
-      background: var(--musea-bg-secondary);
-      border: 1px solid var(--musea-border);
-      border-radius: var(--musea-radius-lg);
-      overflow: hidden;
-      transition: all var(--musea-transition);
-    }
-
-    .variant-card:hover {
-      border-color: var(--musea-text-muted);
-      box-shadow: var(--musea-shadow);
-      transform: translateY(-2px);
-    }
-
-    .variant-preview {
-      aspect-ratio: 16 / 10;
-      background: var(--musea-bg-tertiary);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .variant-preview iframe {
-      width: 100%;
-      height: 100%;
-      border: none;
-      background: white;
-    }
-
-    .variant-preview-placeholder {
-      color: var(--musea-text-muted);
-      font-size: 0.8125rem;
-      text-align: center;
-      padding: 1rem;
-    }
-
-    .variant-preview-code {
-      font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
-      font-size: 0.75rem;
-      color: var(--musea-text-muted);
-      background: var(--musea-bg-primary);
-      padding: 1rem;
-      overflow: auto;
-      max-height: 100%;
-      width: 100%;
-    }
-
-    .variant-info {
-      padding: 1rem;
-      border-top: 1px solid var(--musea-border);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .variant-name {
-      font-weight: 600;
-      font-size: 0.875rem;
-    }
-
-    .variant-badge {
-      font-size: 0.625rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-      padding: 0.1875rem 0.5rem;
-      border-radius: 4px;
-      background: var(--musea-accent-subtle);
-      color: var(--musea-accent);
-    }
-
-    .variant-actions {
-      display: flex;
-      gap: 0.5rem;
-    }
-
-    .variant-action-btn {
-      width: 28px;
-      height: 28px;
-      border: none;
-      background: var(--musea-bg-tertiary);
-      border-radius: var(--musea-radius-sm);
-      color: var(--musea-text-muted);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all var(--musea-transition);
-    }
-
-    .variant-action-btn:hover {
-      background: var(--musea-bg-elevated);
-      color: var(--musea-text);
-    }
-
-    .variant-action-btn svg {
-      width: 14px;
-      height: 14px;
-    }
-
-    /* Empty State */
-    .empty-state {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      min-height: 400px;
-      text-align: center;
-      padding: 2rem;
-    }
-
-    .empty-state-icon {
-      width: 80px;
-      height: 80px;
-      background: var(--musea-bg-secondary);
-      border-radius: var(--musea-radius-lg);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 1.5rem;
-    }
-
-    .empty-state-icon svg {
-      width: 40px;
-      height: 40px;
-      color: var(--musea-text-muted);
-    }
-
-    .empty-state-title {
-      font-size: 1.125rem;
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-    }
+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;
+	if (art.isInline && art.componentPath) {
+		componentImportPath = art.componentPath;
+		componentName = path.basename(art.componentPath, ".vue");
+	} else if (art.metadata.component) {
+		const comp = art.metadata.component;
+		componentImportPath = path.isAbsolute(comp) ? comp : path.resolve(path.dirname(filePath), comp);
+		componentName = path.basename(comp, ".vue");
+	}
+	const 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) {
+		const alreadyImported = scriptSetup?.imports.some((imp) => {
+			if (imp.includes(`from '${componentImportPath}'`) || imp.includes(`from "${componentImportPath}"`)) return true;
+			return new RegExp(`^import\\s+${componentName}[\\s,]`).test(imp.trim());
+		});
+		if (!alreadyImported) code += `import ${componentName} from '${componentImportPath}';\n`;
+		code += `export const __component__ = ${componentName};\n`;
+	}
+	code += `
+export const metadata = ${JSON.stringify(art.metadata)};
+export const variants = ${JSON.stringify(art.variants)};
+`;
+	for (const variant of art.variants) {
+		const variantComponentName = toPascalCase(variant.name);
+		let template = variant.template;
+		if (componentName) template = template.replace(/<Self/g, `<${componentName}`).replace(/<\/Self>/g, `</${componentName}>`);
+		const escapedTemplate = template.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
+		const fullTemplate = `<div data-variant="${variant.name}">${escapedTemplate}</div>`;
+		const componentNames = new Set();
+		if (componentName) componentNames.add(componentName);
+		if (scriptSetup) {
+			for (const name of scriptSetup.returnNames) if (/^[A-Z]/.test(name)) componentNames.add(name);
+		}
+		const components = componentNames.size > 0 ? `  components: { ${[...componentNames].join(", ")} },\n` : "";
+		if (scriptSetup && scriptSetup.setupBody.length > 0) code += `
+export const ${variantComponentName} = defineComponent({
+  name: '${variantComponentName}',
+${components}  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 += `
+export const ${variantComponentName} = {
+  name: '${variantComponentName}',
+  template: \`${fullTemplate}\`,
+};
+`;
+	}
+	const defaultVariant = art.variants.find((v) => v.isDefault) || art.variants[0];
+	if (defaultVariant) code += `
+export default ${toPascalCase(defaultVariant.name)};
+`;
+	return code;
+}
 
-    .empty-state-text {
-      color: var(--musea-text-muted);
-      font-size: 0.875rem;
-      max-width: 300px;
-    }
+//#endregion
+//#region src/gallery/styles-base.css
+var styles_base_default = {};
 
-    /* Loading */
-    .loading {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 200px;
-      color: var(--musea-text-muted);
-      gap: 0.75rem;
-    }
+//#endregion
+//#region src/gallery/styles-layout.css
+var styles_layout_default = {};
 
-    .loading-spinner {
-      width: 20px;
-      height: 20px;
-      border: 2px solid var(--musea-border);
-      border-top-color: var(--musea-accent);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
+//#endregion
+//#region src/gallery/styles-components.css
+var styles_components_default = {};
 
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
+//#endregion
+//#region src/gallery/styles.ts
+/**
+* Generate the full gallery CSS styles string.
+*/
+function generateGalleryStyles() {
+	return `${styles_base_default}\n${styles_layout_default}\n${styles_components_default}`;
+}
 
-    /* Responsive */
-    @media (max-width: 768px) {
-      .main {
-        grid-template-columns: 1fr;
-      }
-      .sidebar {
-        display: none;
-      }
-      .header-subtitle {
-        display: none;
-      }
-    }
-  </style>
-</head>
-<body>
+//#endregion
+//#region src/gallery/template.ts
+/**
+* HTML structure and inline JS generation for the Musea gallery.
+*
+* Extracted from gallery.ts to keep file sizes manageable.
+*/
+/**
+* Generate the gallery HTML body (header, sidebar, content, and inline script).
+*/
+function generateGalleryBody(basePath) {
+	return `
   <header class="header">
     <div class="header-left">
       <a href="${basePath}" class="logo">
@@ -644,9 +383,13 @@ function generateGalleryHtml(basePath, themeConfig) {
         <div class="empty-state-text">Choose a component from the sidebar to view its variants and documentation</div>
       </div>
     </section>
-  </main>
-
-  <script type="module">
+  </main>`;
+}
+/**
+* Generate the gallery inline script (SPA logic).
+*/
+function generateGalleryScript(basePath) {
+	return `
     const basePath = '${basePath}';
     let arts = [];
     let selectedArt = null;
@@ -807,7 +550,29 @@ function generateGalleryHtml(basePath, themeConfig) {
       }
     });
 
-    loadArts();
+    loadArts();`;
+}
+
+//#endregion
+//#region src/gallery/index.ts
+/**
+* Generate the inline gallery HTML page.
+*/
+function generateGalleryHtml(basePath, themeConfig) {
+	const themeScript = themeConfig ? `window.__MUSEA_THEME_CONFIG__=${JSON.stringify(themeConfig)};` : "";
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Musea - Component Gallery</title>
+  <script>window.__MUSEA_BASE_PATH__='${basePath}';${themeScript}</script>
+  <style>${generateGalleryStyles()}
+  </style>
+</head>
+<body>${generateGalleryBody(basePath)}
+
+  <script type="module">${generateGalleryScript(basePath)}
   </script>
 </body>
 </html>`;
@@ -826,89 +591,19 @@ export async function loadArts() {
 }
 
 //#endregion
-//#region src/utils.ts
-function shouldProcess(file, include, exclude, root) {
-	const relative = path.relative(root, file);
-	for (const pattern of exclude) if (matchGlob(relative, pattern)) return false;
-	for (const pattern of include) if (matchGlob(relative, pattern)) return true;
-	return false;
-}
-function matchGlob(filepath, pattern) {
-	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) {
-	const files = [];
-	async function scan(dir) {
-		const entries = await fs.promises.readdir(dir, { withFileTypes: true });
-		for (const entry of entries) {
-			const fullPath = path.join(dir, entry.name);
-			const relative = path.relative(root, fullPath);
-			let excluded = false;
-			for (const pattern of exclude) if (matchGlob(relative, pattern) || matchGlob(entry.name, pattern)) {
-				excluded = true;
-				break;
-			}
-			if (excluded) continue;
-			if (entry.isDirectory()) await scan(fullPath);
-			else if (entry.isFile() && entry.name.endsWith(".art.vue")) {
-				for (const pattern of include) if (matchGlob(relative, pattern)) {
-					files.push(fullPath);
-					break;
-				}
-			} else if (scanInlineArt && entry.isFile() && entry.name.endsWith(".vue") && !entry.name.endsWith(".art.vue")) {
-				const content = await fs.promises.readFile(fullPath, "utf-8");
-				if (content.includes("<art")) files.push(fullPath);
-			}
-		}
-	}
-	await scan(root);
-	return files;
-}
-async function generateStorybookFiles(artFiles, root, outDir) {
-	const binding = loadNative();
-	const outputDir = path.resolve(root, outDir);
-	await fs.promises.mkdir(outputDir, { recursive: true });
-	for (const [filePath, _art] of artFiles) try {
-		const source = await fs.promises.readFile(filePath, "utf-8");
-		const csf = binding.artToCsf(source, { filename: filePath });
-		const outputPath = path.join(outputDir, csf.filename);
-		await fs.promises.writeFile(outputPath, csf.code, "utf-8");
-		console.log(`[musea] Generated: ${path.relative(root, outputPath)}`);
-	} catch (e) {
-		console.error(`[musea] Failed to generate CSF for ${filePath}:`, e);
-	}
-}
-function toPascalCase(str) {
-	return str.split(/[\s\-_]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
-}
-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;");
-}
+//#region src/preview/addons.ts
 /**
-* Build the theme config object from plugin options for runtime injection.
+* Addon initialization code for Musea preview iframes.
+*
+* Contains DOM event capture, measure overlay, and message handler logic
+* injected into preview modules.
+*
+* Extracted from preview.ts to keep file sizes manageable.
+*/
+/**
+* Addon initialization code injected into preview iframe modules.
+* Shared between generatePreviewModule and generatePreviewModuleWithProps.
 */
-function buildThemeConfig(theme) {
-	if (!theme) return void 0;
-	if (typeof theme === "string") return { default: theme };
-	const themes = Array.isArray(theme) ? theme : [theme];
-	const custom = {};
-	for (const t of themes) custom[t.name] = {
-		base: t.base,
-		colors: t.colors
-	};
-	return {
-		default: themes[0].name,
-		custom
-	};
-}
-
-//#endregion
-//#region src/preview.ts
 const MUSEA_ADDONS_INIT_CODE = `
 function __museaInitAddons(container, variantName) {
   // === DOM event capture ===
@@ -1196,7 +891,111 @@ function __museaInitAddons(container, variantName) {
   // Notify parent that iframe is ready
   window.parent.postMessage({ type: 'musea:ready', payload: {} }, '*');
 }
-`;
+`;
+
+//#endregion
+//#region src/preview/html.ts
+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 {
+      width: 100%;
+      height: 100%;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #ffffff;
+    }
+    .musea-variant {
+      min-height: 100vh;
+    }
+    .musea-error {
+      color: #dc2626;
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 8px;
+      padding: 1rem;
+      font-size: 0.875rem;
+      max-width: 400px;
+    }
+    .musea-error-title {
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+    .musea-error pre {
+      font-family: monospace;
+      font-size: 0.75rem;
+      white-space: pre-wrap;
+      word-break: break-all;
+      margin-top: 0.5rem;
+      padding: 0.5rem;
+      background: #fff;
+      border-radius: 4px;
+    }
+    .musea-loading {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      color: #6b7280;
+      font-size: 0.875rem;
+    }
+    .musea-spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid #e5e7eb;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* Musea Addons: Checkerboard background for transparent mode */
+    .musea-bg-checkerboard {
+      background-image:
+        linear-gradient(45deg, #ccc 25%, transparent 25%),
+        linear-gradient(-45deg, #ccc 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #ccc 75%),
+        linear-gradient(-45deg, transparent 75%, #ccc 75%) !important;
+      background-size: 20px 20px !important;
+      background-position: 0 0, 0 10px, 10px -10px, -10px 0 !important;
+    }
+
+    /* Musea Addons: Measure label */
+    .musea-measure-label {
+      position: fixed;
+      background: #333;
+      color: #fff;
+      font-size: 11px;
+      padding: 2px 6px;
+      border-radius: 3px;
+      pointer-events: none;
+      z-index: 100000;
+    }
+  </style>
+</head>
+<body>
+  <div id="app" class="musea-variant" data-art="${escapeHtml(art.path)}" data-variant="${escapeHtml(variant.name)}">
+    <div class="musea-loading">
+      <div class="musea-spinner"></div>
+      Loading component...
+    </div>
+  </div>
+  <script type="module" src="${previewModuleUrl}"></script>
+</body>
+</html>`;
+}
+
+//#endregion
+//#region src/preview/index.ts
 function generatePreviewModule(art, variantComponentName, variantName, cssImports = [], previewSetup = null) {
 	const artModuleId = `virtual:musea-art:${art.path}`;
 	const escapedVariantName = escapeTemplate(variantName);
@@ -1352,247 +1151,6 @@ async function mount() {
 mount();
 `;
 }
-function generatePreviewHtml(art, variant, _basePath, viteBase) {
-	const previewModuleUrl = `${_basePath}/preview-module?art=${encodeURIComponent(art.path)}&variant=${encodeURIComponent(variant.name)}`;
-	const base = (viteBase || "/").replace(/\/$/, "");
-	return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${escapeHtml(art.metadata.title)} - ${escapeHtml(variant.name)}</title>
-  <script type="module" src="${base}/@vite/client"></script>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    html, body {
-      width: 100%;
-      height: 100%;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #ffffff;
-    }
-    .musea-variant {
-      min-height: 100vh;
-    }
-    .musea-error {
-      color: #dc2626;
-      background: #fef2f2;
-      border: 1px solid #fecaca;
-      border-radius: 8px;
-      padding: 1rem;
-      font-size: 0.875rem;
-      max-width: 400px;
-    }
-    .musea-error-title {
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-    }
-    .musea-error pre {
-      font-family: monospace;
-      font-size: 0.75rem;
-      white-space: pre-wrap;
-      word-break: break-all;
-      margin-top: 0.5rem;
-      padding: 0.5rem;
-      background: #fff;
-      border-radius: 4px;
-    }
-    .musea-loading {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      color: #6b7280;
-      font-size: 0.875rem;
-    }
-    .musea-spinner {
-      width: 20px;
-      height: 20px;
-      border: 2px solid #e5e7eb;
-      border-top-color: #3b82f6;
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
-    @keyframes spin { to { transform: rotate(360deg); } }
-
-    /* Musea Addons: Checkerboard background for transparent mode */
-    .musea-bg-checkerboard {
-      background-image:
-        linear-gradient(45deg, #ccc 25%, transparent 25%),
-        linear-gradient(-45deg, #ccc 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #ccc 75%),
-        linear-gradient(-45deg, transparent 75%, #ccc 75%) !important;
-      background-size: 20px 20px !important;
-      background-position: 0 0, 0 10px, 10px -10px, -10px 0 !important;
-    }
-
-    /* Musea Addons: Measure label */
-    .musea-measure-label {
-      position: fixed;
-      background: #333;
-      color: #fff;
-      font-size: 11px;
-      padding: 2px 6px;
-      border-radius: 3px;
-      pointer-events: none;
-      z-index: 100000;
-    }
-  </style>
-</head>
-<body>
-  <div id="app" class="musea-variant" data-art="${escapeHtml(art.path)}" data-variant="${escapeHtml(variant.name)}">
-    <div class="musea-loading">
-      <div class="musea-spinner"></div>
-      Loading component...
-    </div>
-  </div>
-  <script type="module" src="${previewModuleUrl}"></script>
-</body>
-</html>`;
-}
-
-//#endregion
-//#region src/manifest.ts
-/**
-* Generate the virtual manifest module code containing all art file metadata.
-*/
-function generateManifestModule(artFiles) {
-	const arts = Array.from(artFiles.values());
-	return `export const arts = ${JSON.stringify(arts, null, 2)};`;
-}
-
-//#endregion
-//#region src/art-module.ts
-/**
-* 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;
-	if (art.isInline && art.componentPath) {
-		componentImportPath = art.componentPath;
-		componentName = path.basename(art.componentPath, ".vue");
-	} else if (art.metadata.component) {
-		const comp = art.metadata.component;
-		componentImportPath = path.isAbsolute(comp) ? comp : path.resolve(path.dirname(filePath), comp);
-		componentName = path.basename(comp, ".vue");
-	}
-	const 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) {
-		const alreadyImported = scriptSetup?.imports.some((imp) => {
-			if (imp.includes(`from '${componentImportPath}'`) || imp.includes(`from "${componentImportPath}"`)) return true;
-			return new RegExp(`^import\\s+${componentName}[\\s,]`).test(imp.trim());
-		});
-		if (!alreadyImported) code += `import ${componentName} from '${componentImportPath}';\n`;
-		code += `export const __component__ = ${componentName};\n`;
-	}
-	code += `
-export const metadata = ${JSON.stringify(art.metadata)};
-export const variants = ${JSON.stringify(art.variants)};
-`;
-	for (const variant of art.variants) {
-		const variantComponentName = toPascalCase(variant.name);
-		let template = variant.template;
-		if (componentName) template = template.replace(/<Self/g, `<${componentName}`).replace(/<\/Self>/g, `</${componentName}>`);
-		const escapedTemplate = template.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
-		const fullTemplate = `<div data-variant="${variant.name}">${escapedTemplate}</div>`;
-		const componentNames = new Set();
-		if (componentName) componentNames.add(componentName);
-		if (scriptSetup) {
-			for (const name of scriptSetup.returnNames) if (/^[A-Z]/.test(name)) componentNames.add(name);
-		}
-		const components = componentNames.size > 0 ? `  components: { ${[...componentNames].join(", ")} },\n` : "";
-		if (scriptSetup && scriptSetup.setupBody.length > 0) code += `
-export const ${variantComponentName} = defineComponent({
-  name: '${variantComponentName}',
-${components}  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 += `
-export const ${variantComponentName} = {
-  name: '${variantComponentName}',
-  template: \`${fullTemplate}\`,
-};
-`;
-	}
-	const defaultVariant = art.variants.find((v) => v.isDefault) || art.variants[0];
-	if (defaultVariant) code += `
-export default ${toPascalCase(defaultVariant.name)};
-`;
-	return code;
-}
 
 //#endregion
 //#region src/server-middleware.ts
@@ -1869,169 +1427,7 @@ function formatCategoryName(name) {
 }
 
 //#endregion
-//#region src/tokens/resolver.ts
-const REFERENCE_PATTERN = /^\{(.+)\}$/;
-const MAX_RESOLVE_DEPTH = 10;
-/**
-* Flatten nested categories into a flat map keyed by dot-path.
-*/
-function buildTokenMap(categories, prefix = []) {
-	const map = {};
-	for (const cat of categories) {
-		const catKey = cat.name.toLowerCase().replace(/\s+/g, "-");
-		const catPath = [...prefix, catKey];
-		for (const [name, token] of Object.entries(cat.tokens)) {
-			const dotPath = [...catPath, name].join(".");
-			map[dotPath] = token;
-		}
-		if (cat.subcategories) {
-			const subMap = buildTokenMap(cat.subcategories, catPath);
-			Object.assign(map, subMap);
-		}
-	}
-	return map;
-}
-/**
-* Resolve references in categories, setting $tier, $reference, and $resolvedValue.
-*/
-function resolveReferences(categories, tokenMap) {
-	for (const cat of categories) {
-		for (const token of Object.values(cat.tokens)) resolveTokenReference(token, tokenMap);
-		if (cat.subcategories) resolveReferences(cat.subcategories, tokenMap);
-	}
-}
-function resolveTokenReference(token, tokenMap) {
-	if (typeof token.value === "string") {
-		const match = token.value.match(REFERENCE_PATTERN);
-		if (match) {
-			token.$tier = token.$tier ?? "semantic";
-			token.$reference = match[1];
-			token.$resolvedValue = resolveValue(match[1], tokenMap, 0, new Set());
-			return;
-		}
-	}
-	token.$tier = token.$tier ?? "primitive";
-}
-function resolveValue(ref, tokenMap, depth, visited) {
-	if (depth >= MAX_RESOLVE_DEPTH || visited.has(ref)) return void 0;
-	visited.add(ref);
-	const target = tokenMap[ref];
-	if (!target) return void 0;
-	if (typeof target.value === "string") {
-		const match = target.value.match(REFERENCE_PATTERN);
-		if (match) return resolveValue(match[1], tokenMap, depth + 1, visited);
-	}
-	return target.value;
-}
-/**
-* Read raw JSON token file.
-*/
-async function readRawTokenFile(tokensPath) {
-	const content = await fs.promises.readFile(tokensPath, "utf-8");
-	return JSON.parse(content);
-}
-/**
-* Write raw JSON token file atomically (write tmp, rename).
-*/
-async function writeRawTokenFile(tokensPath, data) {
-	const tmpPath = tokensPath + ".tmp";
-	await fs.promises.writeFile(tmpPath, JSON.stringify(data, null, 2) + "\n", "utf-8");
-	await fs.promises.rename(tmpPath, tokensPath);
-}
-/**
-* Set a token at a dot-separated path in the raw JSON structure.
-*/
-function setTokenAtPath(data, dotPath, token) {
-	const parts = dotPath.split(".");
-	let current = data;
-	for (let i = 0; i < parts.length - 1; i++) {
-		const key = parts[i];
-		if (typeof current[key] !== "object" || current[key] === null) current[key] = {};
-		current = current[key];
-	}
-	const leafKey = parts[parts.length - 1];
-	const raw = { value: token.value };
-	if (token.type) raw.type = token.type;
-	if (token.description) raw.description = token.description;
-	if (token.$tier) raw.$tier = token.$tier;
-	if (token.$reference) raw.$reference = token.$reference;
-	if (token.attributes) raw.attributes = token.attributes;
-	current[leafKey] = raw;
-}
-/**
-* Delete a token at a dot-separated path, cleaning empty parents.
-*/
-function deleteTokenAtPath(data, dotPath) {
-	const parts = dotPath.split(".");
-	const parents = [];
-	let current = data;
-	for (let i = 0; i < parts.length - 1; i++) {
-		const key = parts[i];
-		if (typeof current[key] !== "object" || current[key] === null) return false;
-		parents.push({
-			obj: current,
-			key
-		});
-		current = current[key];
-	}
-	const leafKey = parts[parts.length - 1];
-	if (!(leafKey in current)) return false;
-	delete current[leafKey];
-	for (let i = parents.length - 1; i >= 0; i--) {
-		const { obj, key } = parents[i];
-		const child = obj[key];
-		if (Object.keys(child).length === 0) delete obj[key];
-		else break;
-	}
-	return true;
-}
-/**
-* Validate that a semantic reference points to an existing token and has no cycles.
-*/
-function validateSemanticReference(tokenMap, reference, selfPath) {
-	if (!tokenMap[reference]) return {
-		valid: false,
-		error: `Reference target "${reference}" does not exist`
-	};
-	const visited = new Set();
-	if (selfPath) visited.add(selfPath);
-	let current = reference;
-	let depth = 0;
-	while (depth < MAX_RESOLVE_DEPTH) {
-		if (visited.has(current)) return {
-			valid: false,
-			error: `Circular reference detected at "${current}"`
-		};
-		visited.add(current);
-		const target = tokenMap[current];
-		if (!target) break;
-		if (typeof target.value === "string") {
-			const match = target.value.match(REFERENCE_PATTERN);
-			if (match) {
-				current = match[1];
-				depth++;
-				continue;
-			}
-		}
-		break;
-	}
-	if (depth >= MAX_RESOLVE_DEPTH) return {
-		valid: false,
-		error: "Reference chain too deep (max 10)"
-	};
-	return { valid: true };
-}
-/**
-* Find all tokens that reference the given path.
-*/
-function findDependentTokens(tokenMap, targetPath) {
-	const dependents = [];
-	for (const [path$1, token] of Object.entries(tokenMap)) if (typeof token.value === "string") {
-		const match = token.value.match(REFERENCE_PATTERN);
-		if (match && match[1] === targetPath) dependents.push(path$1);
-	}
-	return dependents;
-}
+//#region src/tokens/usage.ts
 /**
 * Normalize a token value for comparison.
 * - Lowercase, trim
@@ -2121,7 +1517,172 @@ function scanTokenUsage(artFiles, tokenMap) {
 			}
 		}
 	}
-	return usageMap;
+	return usageMap;
+}
+
+//#endregion
+//#region src/tokens/resolver.ts
+const REFERENCE_PATTERN = /^\{(.+)\}$/;
+const MAX_RESOLVE_DEPTH = 10;
+/**
+* Flatten nested categories into a flat map keyed by dot-path.
+*/
+function buildTokenMap(categories, prefix = []) {
+	const map = {};
+	for (const cat of categories) {
+		const catKey = cat.name.toLowerCase().replace(/\s+/g, "-");
+		const catPath = [...prefix, catKey];
+		for (const [name, token] of Object.entries(cat.tokens)) {
+			const dotPath = [...catPath, name].join(".");
+			map[dotPath] = token;
+		}
+		if (cat.subcategories) {
+			const subMap = buildTokenMap(cat.subcategories, catPath);
+			Object.assign(map, subMap);
+		}
+	}
+	return map;
+}
+/**
+* Resolve references in categories, setting $tier, $reference, and $resolvedValue.
+*/
+function resolveReferences(categories, tokenMap) {
+	for (const cat of categories) {
+		for (const token of Object.values(cat.tokens)) resolveTokenReference(token, tokenMap);
+		if (cat.subcategories) resolveReferences(cat.subcategories, tokenMap);
+	}
+}
+function resolveTokenReference(token, tokenMap) {
+	if (typeof token.value === "string") {
+		const match = token.value.match(REFERENCE_PATTERN);
+		if (match) {
+			token.$tier = token.$tier ?? "semantic";
+			token.$reference = match[1];
+			token.$resolvedValue = resolveValue(match[1], tokenMap, 0, new Set());
+			return;
+		}
+	}
+	token.$tier = token.$tier ?? "primitive";
+}
+function resolveValue(ref, tokenMap, depth, visited) {
+	if (depth >= MAX_RESOLVE_DEPTH || visited.has(ref)) return void 0;
+	visited.add(ref);
+	const target = tokenMap[ref];
+	if (!target) return void 0;
+	if (typeof target.value === "string") {
+		const match = target.value.match(REFERENCE_PATTERN);
+		if (match) return resolveValue(match[1], tokenMap, depth + 1, visited);
+	}
+	return target.value;
+}
+/**
+* Read raw JSON token file.
+*/
+async function readRawTokenFile(tokensPath) {
+	const content = await fs.promises.readFile(tokensPath, "utf-8");
+	return JSON.parse(content);
+}
+/**
+* Write raw JSON token file atomically (write tmp, rename).
+*/
+async function writeRawTokenFile(tokensPath, data) {
+	const tmpPath = tokensPath + ".tmp";
+	await fs.promises.writeFile(tmpPath, JSON.stringify(data, null, 2) + "\n", "utf-8");
+	await fs.promises.rename(tmpPath, tokensPath);
+}
+/**
+* Set a token at a dot-separated path in the raw JSON structure.
+*/
+function setTokenAtPath(data, dotPath, token) {
+	const parts = dotPath.split(".");
+	let current = data;
+	for (let i = 0; i < parts.length - 1; i++) {
+		const key = parts[i];
+		if (typeof current[key] !== "object" || current[key] === null) current[key] = {};
+		current = current[key];
+	}
+	const leafKey = parts[parts.length - 1];
+	const raw = { value: token.value };
+	if (token.type) raw.type = token.type;
+	if (token.description) raw.description = token.description;
+	if (token.$tier) raw.$tier = token.$tier;
+	if (token.$reference) raw.$reference = token.$reference;
+	if (token.attributes) raw.attributes = token.attributes;
+	current[leafKey] = raw;
+}
+/**
+* Delete a token at a dot-separated path, cleaning empty parents.
+*/
+function deleteTokenAtPath(data, dotPath) {
+	const parts = dotPath.split(".");
+	const parents = [];
+	let current = data;
+	for (let i = 0; i < parts.length - 1; i++) {
+		const key = parts[i];
+		if (typeof current[key] !== "object" || current[key] === null) return false;
+		parents.push({
+			obj: current,
+			key
+		});
+		current = current[key];
+	}
+	const leafKey = parts[parts.length - 1];
+	if (!(leafKey in current)) return false;
+	delete current[leafKey];
+	for (let i = parents.length - 1; i >= 0; i--) {
+		const { obj, key } = parents[i];
+		const child = obj[key];
+		if (Object.keys(child).length === 0) delete obj[key];
+		else break;
+	}
+	return true;
+}
+/**
+* Validate that a semantic reference points to an existing token and has no cycles.
+*/
+function validateSemanticReference(tokenMap, reference, selfPath) {
+	if (!tokenMap[reference]) return {
+		valid: false,
+		error: `Reference target "${reference}" does not exist`
+	};
+	const visited = new Set();
+	if (selfPath) visited.add(selfPath);
+	let current = reference;
+	let depth = 0;
+	while (depth < MAX_RESOLVE_DEPTH) {
+		if (visited.has(current)) return {
+			valid: false,
+			error: `Circular reference detected at "${current}"`
+		};
+		visited.add(current);
+		const target = tokenMap[current];
+		if (!target) break;
+		if (typeof target.value === "string") {
+			const match = target.value.match(REFERENCE_PATTERN);
+			if (match) {
+				current = match[1];
+				depth++;
+				continue;
+			}
+		}
+		break;
+	}
+	if (depth >= MAX_RESOLVE_DEPTH) return {
+		valid: false,
+		error: "Reference chain too deep (max 10)"
+	};
+	return { valid: true };
+}
+/**
+* Find all tokens that reference the given path.
+*/
+function findDependentTokens(tokenMap, targetPath) {
+	const dependents = [];
+	for (const [path$1, token] of Object.entries(tokenMap)) if (typeof token.value === "string") {
+		const match = token.value.match(REFERENCE_PATTERN);
+		if (match && match[1] === targetPath) dependents.push(path$1);
+	}
+	return dependents;
 }
 
 //#endregion
@@ -2441,278 +2002,52 @@ async function handleTokensUpdate(ctx, readBody, sendJson, sendError) {
 		const resolvedTokenMap = buildTokenMap(categories);
 		sendJson({
 			categories,
-			tokenMap: resolvedTokenMap
-		});
-	} catch (e) {
-		sendError(e instanceof Error ? e.message : String(e));
-	}
-}
-/** DELETE /api/tokens */
-async function handleTokensDelete(ctx, readBody, sendJson, sendError) {
-	if (!ctx.tokensPath) {
-		sendError("No tokens path configured", 400);
-		return;
-	}
-	const body = await readBody();
-	try {
-		const { path: dotPath } = JSON.parse(body);
-		if (!dotPath) {
-			sendError("Missing required field: path", 400);
-			return;
-		}
-		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
-		const currentCategories = await parseTokens(absoluteTokensPath);
-		const currentMap = buildTokenMap(currentCategories);
-		const dependents = findDependentTokens(currentMap, dotPath);
-		const rawData = await readRawTokenFile(absoluteTokensPath);
-		const deleted = deleteTokenAtPath(rawData, dotPath);
-		if (!deleted) {
-			sendError(`Token not found at path "${dotPath}"`, 404);
-			return;
-		}
-		await writeRawTokenFile(absoluteTokensPath, rawData);
-		const categories = await parseTokens(absoluteTokensPath);
-		const tokenMap = buildTokenMap(categories);
-		resolveReferences(categories, tokenMap);
-		const resolvedTokenMap = buildTokenMap(categories);
-		sendJson({
-			categories,
-			tokenMap: resolvedTokenMap,
-			dependentsWarning: dependents.length > 0 ? dependents : void 0
-		});
-	} catch (e) {
-		sendError(e instanceof Error ? e.message : String(e));
-	}
-}
-
-//#endregion
-//#region src/api-routes.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.
-*
-* Returns a Connect-compatible middleware function that handles all
-* `/api/...` sub-routes under the configured basePath.
-*/
-function createApiMiddleware(ctx) {
-	return async (req, res, next) => {
-		const sendJson = (data, status = 200) => {
-			res.statusCode = status;
-			res.setHeader("Content-Type", "application/json");
-			res.end(JSON.stringify(data));
-		};
-		const sendError = (message, status = 500) => {
-			sendJson({ error: message }, status);
-		};
-		const readBody = () => collectBody(req);
-		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 rest = url.slice(6);
-			const sourceMatch = rest.match(/^(.+)\/source$/);
-			if (sourceMatch) {
-				const artPath = decodeURIComponent(sourceMatch[1]);
-				const art = ctx.artFiles.get(artPath);
-				if (!art) {
-					sendError("Art not found", 404);
-					return;
-				}
-				let body = "";
-				req.on("data", (chunk) => {
-					body += chunk;
-				});
-				req.on("end", async () => {
-					try {
-						const { source } = JSON.parse(body);
-						if (typeof source !== "string") {
-							sendError("Missing required field: source", 400);
-							return;
-						}
-						await fs.promises.writeFile(artPath, source, "utf-8");
-						await ctx.processArtFile(artPath);
-						sendJson({ success: true });
-					} catch (e) {
-						sendError(e instanceof Error ? e.message : String(e));
-					}
-				});
-				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);
-				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 (url === "/preview-with-props" && req.method === "POST") {
-			let body = "";
-			req.on("data", (chunk) => {
-				body += chunk;
-			});
-			req.on("end", () => {
-				try {
-					const { artPath: reqArtPath, variantName, props: propsOverride } = JSON.parse(body);
-					const art = ctx.artFiles.get(reqArtPath);
-					if (!art) {
-						sendError("Art not found", 404);
-						return;
-					}
-					const variant = art.variants.find((v) => v.name === variantName);
-					if (!variant) {
-						sendError("Variant not found", 404);
-						return;
-					}
-					const variantComponentName = toPascalCase(variant.name);
-					const moduleCode = generatePreviewModuleWithProps(art, variantComponentName, variant.name, propsOverride, ctx.resolvedPreviewCss, ctx.resolvedPreviewSetup);
-					res.setHeader("Content-Type", "application/javascript");
-					res.end(moduleCode);
-				} catch (e) {
-					sendError(e instanceof Error ? e.message : String(e));
-				}
-			});
-			return;
-		}
-		if (url === "/generate" && req.method === "POST") {
-			let body = "";
-			req.on("data", (chunk) => {
-				body += chunk;
-			});
-			req.on("end", async () => {
-				try {
-					const { componentPath: reqComponentPath, options: autogenOptions } = JSON.parse(body);
-					const { generateArtFile: genArt } = await import("./autogen.js");
-					const result = await genArt(reqComponentPath, autogenOptions);
-					sendJson({
-						generated: true,
-						componentName: result.componentName,
-						variants: result.variants,
-						artFileContent: result.artFileContent
-					});
-				} catch (e) {
-					sendError(e instanceof Error ? e.message : String(e));
-				}
-			});
-			return;
-		}
-		if (url === "/run-vrt" && req.method === "POST") {
-			let body = "";
-			req.on("data", (chunk) => {
-				body += chunk;
-			});
-			req.on("end", async () => {
-				try {
-					const { artPath, updateSnapshots } = JSON.parse(body);
-					const { MuseaVrtRunner: MuseaVrtRunner$1 } = await import("./vrt.js");
-					const runner = new MuseaVrtRunner$1({ snapshotDir: path.resolve(ctx.config.root, ".vize/snapshots") });
-					const port = ctx.getDevServerPort();
-					const baseUrl = `http://localhost:${port}`;
-					let artsToTest = Array.from(ctx.artFiles.values());
-					if (artPath) artsToTest = artsToTest.filter((a) => a.path === artPath);
-					await runner.start();
-					const results = await runner.runTests(artsToTest, baseUrl, { updateSnapshots });
-					const summary = runner.getSummary(results);
-					await runner.stop();
-					sendJson({
-						success: true,
-						summary,
-						results: results.map((r) => ({
-							artPath: r.artPath,
-							variantName: r.variantName,
-							viewport: r.viewport.name,
-							passed: r.passed,
-							isNew: r.isNew,
-							diffPercentage: r.diffPercentage,
-							error: r.error
-						}))
-					});
-				} catch (e) {
-					sendError(e instanceof Error ? e.message : String(e));
-				}
-			});
-			return;
-		}
-		next();
-	};
+			tokenMap: resolvedTokenMap
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
 }
-/** GET /api/arts/:path/source */
-async function handleArtSource(ctx, match, sendJson, sendError) {
-	const artPath = decodeURIComponent(match[1]);
-	const art = ctx.artFiles.get(artPath);
-	if (!art) {
-		sendError("Art not found", 404);
+/** DELETE /api/tokens */
+async function handleTokensDelete(ctx, readBody, sendJson, sendError) {
+	if (!ctx.tokensPath) {
+		sendError("No tokens path configured", 400);
 		return;
 	}
+	const body = await readBody();
 	try {
-		const source = await fs.promises.readFile(artPath, "utf-8");
+		const { path: dotPath } = JSON.parse(body);
+		if (!dotPath) {
+			sendError("Missing required field: path", 400);
+			return;
+		}
+		const absoluteTokensPath = path.resolve(ctx.config.root, ctx.tokensPath);
+		const currentCategories = await parseTokens(absoluteTokensPath);
+		const currentMap = buildTokenMap(currentCategories);
+		const dependents = findDependentTokens(currentMap, dotPath);
+		const rawData = await readRawTokenFile(absoluteTokensPath);
+		const deleted = deleteTokenAtPath(rawData, dotPath);
+		if (!deleted) {
+			sendError(`Token not found at path "${dotPath}"`, 404);
+			return;
+		}
+		await writeRawTokenFile(absoluteTokensPath, rawData);
+		const categories = await parseTokens(absoluteTokensPath);
+		const tokenMap = buildTokenMap(categories);
+		resolveReferences(categories, tokenMap);
+		const resolvedTokenMap = buildTokenMap(categories);
 		sendJson({
-			source,
-			path: artPath
+			categories,
+			tokenMap: resolvedTokenMap,
+			dependentsWarning: dependents.length > 0 ? dependents : void 0
 		});
 	} catch (e) {
 		sendError(e instanceof Error ? e.message : String(e));
 	}
 }
+
+//#endregion
+//#region src/api-routes/handler-palette.ts
 /** GET /api/arts/:path/palette */
 async function handleArtPalette(ctx, match, sendJson, sendError) {
 	const artPath = decodeURIComponent(match[1]);
@@ -2779,6 +2114,27 @@ async function handleArtPalette(ctx, match, sendJson, sendError) {
 		sendError(e instanceof Error ? e.message : String(e));
 	}
 }
+
+//#endregion
+//#region src/api-routes/handlers.ts
+/** GET /api/arts/:path/source */
+async function handleArtSource(ctx, match, sendJson, sendError) {
+	const artPath = decodeURIComponent(match[1]);
+	const art = ctx.artFiles.get(artPath);
+	if (!art) {
+		sendError("Art not found", 404);
+		return;
+	}
+	try {
+		const source = await fs.promises.readFile(artPath, "utf-8");
+		sendJson({
+			source,
+			path: artPath
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
 /** GET /api/arts/:path/analysis */
 async function handleArtAnalysis(ctx, match, sendJson, sendError) {
 	const artPath = decodeURIComponent(match[1]);
@@ -2874,10 +2230,300 @@ function handleArtA11y(ctx, match, sendJson, sendError) {
 }
 
 //#endregion
-//#region src/plugin.ts
+//#region src/api-routes/post-handlers.ts
+/** POST /api/preview-with-props */
+function handlePreviewWithProps(ctx, body, res, sendJson, sendError) {
+	try {
+		const { artPath: reqArtPath, variantName, props: propsOverride } = JSON.parse(body);
+		const art = ctx.artFiles.get(reqArtPath);
+		if (!art) {
+			sendError("Art not found", 404);
+			return;
+		}
+		const variant = art.variants.find((v) => v.name === variantName);
+		if (!variant) {
+			sendError("Variant not found", 404);
+			return;
+		}
+		const variantComponentName = toPascalCase(variant.name);
+		const moduleCode = generatePreviewModuleWithProps(art, variantComponentName, variant.name, propsOverride, ctx.resolvedPreviewCss, ctx.resolvedPreviewSetup);
+		res.setHeader("Content-Type", "application/javascript");
+		res.end(moduleCode);
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+/** POST /api/generate */
+async function handleGenerate(body, sendJson, sendError) {
+	try {
+		const { componentPath: reqComponentPath, options: autogenOptions } = JSON.parse(body);
+		const { generateArtFile: genArt } = await import("./autogen-Dx-SIBf_.js");
+		const result = await genArt(reqComponentPath, autogenOptions);
+		sendJson({
+			generated: true,
+			componentName: result.componentName,
+			variants: result.variants,
+			artFileContent: result.artFileContent
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+/** POST /api/run-vrt */
+async function handleRunVrt(ctx, body, sendJson, sendError) {
+	try {
+		const { artPath, updateSnapshots } = JSON.parse(body);
+		const { MuseaVrtRunner: MuseaVrtRunner$1 } = await import("./vrt.js");
+		const runner = new MuseaVrtRunner$1({ snapshotDir: path.resolve(ctx.config.root, ".vize/snapshots") });
+		const port = ctx.getDevServerPort();
+		const baseUrl = `http://localhost:${port}`;
+		let artsToTest = Array.from(ctx.artFiles.values());
+		if (artPath) artsToTest = artsToTest.filter((a) => a.path === artPath);
+		await runner.start();
+		const results = await runner.runTests(artsToTest, baseUrl, { updateSnapshots });
+		const summary = runner.getSummary(results);
+		await runner.stop();
+		sendJson({
+			success: true,
+			summary,
+			results: results.map((r) => ({
+				artPath: r.artPath,
+				variantName: r.variantName,
+				viewport: r.viewport.name,
+				passed: r.passed,
+				isNew: r.isNew,
+				diffPercentage: r.diffPercentage,
+				error: r.error
+			}))
+		});
+	} catch (e) {
+		sendError(e instanceof Error ? e.message : String(e));
+	}
+}
+
+//#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.
+*
+* Returns a Connect-compatible middleware function that handles all
+* `/api/...` sub-routes under the configured basePath.
+*/
+function createApiMiddleware(ctx) {
+	return async (req, res, next) => {
+		const sendJson = (data, status = 200) => {
+			res.statusCode = status;
+			res.setHeader("Content-Type", "application/json");
+			res.end(JSON.stringify(data));
+		};
+		const sendError = (message, status = 500) => {
+			sendJson({ error: message }, status);
+		};
+		const readBody = () => collectBody(req);
+		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 rest = url.slice(6);
+			const sourceMatch = rest.match(/^(.+)\/source$/);
+			if (sourceMatch) {
+				const artPath = decodeURIComponent(sourceMatch[1]);
+				const art = ctx.artFiles.get(artPath);
+				if (!art) {
+					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));
+				}
+				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);
+				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 collectBody(req);
+			if (url === "/preview-with-props") {
+				handlePreviewWithProps(ctx, body, res, sendJson, sendError);
+				return;
+			}
+			if (url === "/generate") {
+				await handleGenerate(body, sendJson, sendError);
+				return;
+			}
+			if (url === "/run-vrt") {
+				await handleRunVrt(ctx, body, sendJson, sendError);
+				return;
+			}
+		}
+		next();
+	};
+}
+
+//#endregion
+//#region src/manifest.ts
+/**
+* Generate the virtual manifest module code containing all art file metadata.
+*/
+function generateManifestModule(artFiles) {
+	const arts = Array.from(artFiles.values());
+	return `export const arts = ${JSON.stringify(arts, null, 2)};`;
+}
+
+//#endregion
+//#region src/plugin/virtual.ts
 const VIRTUAL_MUSEA_PREFIX = "\0musea:";
 const VIRTUAL_GALLERY = "\0musea-gallery";
 const VIRTUAL_MANIFEST = "\0musea-manifest";
+function createResolveId(state) {
+	return function resolveId(id) {
+		const root = state.getConfigRoot();
+		if (id === VIRTUAL_GALLERY) return VIRTUAL_GALLERY;
+		if (id === VIRTUAL_MANIFEST) return VIRTUAL_MANIFEST;
+		if (id.startsWith("virtual:musea-preview:")) return "\0musea-preview:" + id.slice(22);
+		if (id.startsWith("virtual:musea-art:")) {
+			const artPath = id.slice(18);
+			if (state.artFiles.has(artPath)) return "\0musea-art:" + artPath + "?musea-virtual";
+		}
+		if (id.endsWith(".art.vue")) {
+			const resolved = path.resolve(root, id);
+			if (state.artFiles.has(resolved)) return VIRTUAL_MUSEA_PREFIX + resolved + "?musea-virtual";
+		}
+		if (state.inlineArt && id.endsWith(".vue") && !id.endsWith(".art.vue")) {
+			const resolved = path.resolve(root, id);
+			if (state.artFiles.has(resolved)) return VIRTUAL_MUSEA_PREFIX + resolved + "?musea-virtual";
+		}
+		return null;
+	};
+}
+function createLoad(state) {
+	return function load(id) {
+		if (id === VIRTUAL_GALLERY) return generateGalleryModule(state.basePath);
+		if (id === VIRTUAL_MANIFEST) return generateManifestModule(state.artFiles);
+		if (id.startsWith("\0musea-preview:")) {
+			const rest = id.slice(15);
+			const lastColonIndex = rest.lastIndexOf(":");
+			if (lastColonIndex !== -1) {
+				const artPath = rest.slice(0, lastColonIndex);
+				const variantName = rest.slice(lastColonIndex + 1);
+				const art = state.artFiles.get(artPath);
+				if (art) {
+					const variantComponentName = toPascalCase(variantName);
+					return generatePreviewModule(art, variantComponentName, variantName, state.resolvedPreviewCss, state.resolvedPreviewSetup);
+				}
+			}
+		}
+		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 (id.startsWith(VIRTUAL_MUSEA_PREFIX)) {
+			const realPath = id.slice(VIRTUAL_MUSEA_PREFIX.length).replace(/\?musea-virtual$/, "");
+			const art = state.artFiles.get(realPath);
+			if (art) return generateArtModule(art, realPath);
+		}
+		return null;
+	};
+}
+function createHandleHotUpdate(state) {
+	return async function handleHotUpdate(ctx) {
+		const { file } = ctx;
+		if (file.endsWith(".art.vue") && state.artFiles.has(file)) {
+			await state.processArtFile(file);
+			const virtualId = VIRTUAL_MUSEA_PREFIX + file + "?musea-virtual";
+			const server = state.getServer();
+			const modules = server?.moduleGraph.getModulesByFile(virtualId);
+			if (modules) return [...modules];
+		}
+		if (state.inlineArt && file.endsWith(".vue") && !file.endsWith(".art.vue") && state.artFiles.has(file)) {
+			await state.processArtFile(file);
+			const virtualId = VIRTUAL_MUSEA_PREFIX + file;
+			const server = state.getServer();
+			const modules = server?.moduleGraph.getModulesByFile(virtualId);
+			if (modules) return [...modules];
+		}
+		return void 0;
+	};
+}
+
+//#endregion
+//#region src/plugin/index.ts
 /**
 * Create Musea Vite plugin.
 */
@@ -2897,6 +2543,21 @@ function musea(options = {}) {
 	const artFiles = new Map();
 	let resolvedPreviewCss = [];
 	let resolvedPreviewSetup = null;
+	const virtualState = {
+		basePath,
+		get inlineArt() {
+			return inlineArt;
+		},
+		artFiles,
+		resolvedPreviewCss,
+		resolvedPreviewSetup,
+		getConfigRoot: () => config.root,
+		getServer: () => server,
+		processArtFile
+	};
+	const resolveId = createResolveId(virtualState);
+	const load = createLoad(virtualState);
+	const handleHotUpdate = createHandleHotUpdate(virtualState);
 	const mainPlugin = {
 		name: "vite-plugin-musea",
 		enforce: "pre",
@@ -2914,8 +2575,11 @@ 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;
 			}
+			virtualState.basePath = basePath;
 			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);
+			virtualState.resolvedPreviewCss = resolvedPreviewCss;
+			virtualState.resolvedPreviewSetup = resolvedPreviewSetup;
 		},
 		configureServer(devServer) {
 			server = devServer;
@@ -2994,68 +2658,9 @@ function musea(options = {}) {
 			for (const file of files) await processArtFile(file);
 			if (storybookCompat) await generateStorybookFiles(artFiles, config.root, storybookOutDir);
 		},
-		resolveId(id) {
-			if (id === VIRTUAL_GALLERY) return VIRTUAL_GALLERY;
-			if (id === VIRTUAL_MANIFEST) return VIRTUAL_MANIFEST;
-			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 + "?musea-virtual";
-			}
-			if (id.endsWith(".art.vue")) {
-				const resolved = path.resolve(config.root, id);
-				if (artFiles.has(resolved)) return VIRTUAL_MUSEA_PREFIX + resolved + "?musea-virtual";
-			}
-			if (inlineArt && id.endsWith(".vue") && !id.endsWith(".art.vue")) {
-				const resolved = path.resolve(config.root, id);
-				if (artFiles.has(resolved)) return VIRTUAL_MUSEA_PREFIX + resolved + "?musea-virtual";
-			}
-			return null;
-		},
-		load(id) {
-			if (id === VIRTUAL_GALLERY) return generateGalleryModule(basePath);
-			if (id === VIRTUAL_MANIFEST) return generateManifestModule(artFiles);
-			if (id.startsWith("\0musea-preview:")) {
-				const rest = id.slice(15);
-				const lastColonIndex = rest.lastIndexOf(":");
-				if (lastColonIndex !== -1) {
-					const artPath = rest.slice(0, lastColonIndex);
-					const variantName = rest.slice(lastColonIndex + 1);
-					const art = artFiles.get(artPath);
-					if (art) {
-						const variantComponentName = toPascalCase(variantName);
-						return generatePreviewModule(art, variantComponentName, variantName, resolvedPreviewCss, resolvedPreviewSetup);
-					}
-				}
-			}
-			if (id.startsWith("\0musea-art:")) {
-				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).replace(/\?musea-virtual$/, "");
-				const art = artFiles.get(realPath);
-				if (art) return generateArtModule(art, realPath);
-			}
-			return null;
-		},
-		async handleHotUpdate(ctx) {
-			const { file } = ctx;
-			if (file.endsWith(".art.vue") && artFiles.has(file)) {
-				await processArtFile(file);
-				const virtualId = VIRTUAL_MUSEA_PREFIX + file + "?musea-virtual";
-				const modules = server?.moduleGraph.getModulesByFile(virtualId);
-				if (modules) return [...modules];
-			}
-			if (inlineArt && file.endsWith(".vue") && !file.endsWith(".art.vue") && artFiles.has(file)) {
-				await processArtFile(file);
-				const virtualId = VIRTUAL_MUSEA_PREFIX + file;
-				const modules = server?.moduleGraph.getModulesByFile(virtualId);
-				if (modules) return [...modules];
-			}
-			return void 0;
-		}
+		resolveId,
+		load,
+		handleHotUpdate
 	};
 	async function processArtFile(filePath) {
 		try {