@vizejs/vite-plugin-musea 0.101.0 → 0.104.0

package/dist/index.mjs

@@ -1,12 +1,12 @@
-import { i as MuseaVrtRunner, n as generateVrtJsonReport, r as generateVrtReport } from "./vrt-CjFf5GR0.mjs";
-import { t as MuseaA11yRunner } from "./a11y-DNCg2qCB.mjs";
-import { n as writeArtFile, t as generateArtFile } from "./autogen-3-y1d0ou.mjs";
+import { a as collectRequestBody, c as resolveInside, d as serializeScriptValue, f as validateDevApiRequest, i as HttpError, l as resolveInsideAny, n as generateGalleryModule, o as createDevSessionToken, s as decodeUrlComponent, u as resolveUrlPathInside } from "./gallery-zu8hc8Lc.mjs";
+import { i as MuseaVrtRunner, n as generateVrtJsonReport, r as generateVrtReport } from "./vrt-Cv1PK1EF.mjs";
+import { t as MuseaA11yRunner } from "./a11y-62l8G1tr.mjs";
+import { n as writeArtFile, t as generateArtFile } from "./autogen-CywxMrJH.mjs";
 import { createRequire } from "node:module";
 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
 /**
@@ -91,147 +91,6 @@ 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)))];
@@ -620,324 +479,6 @@ export default ${toPascalCase(defaultVariant.name)};
 	return code;
 }
 //#endregion
-//#region src/gallery/styles-base.css?inline
-var styles_base_default = ":root {\n  --musea-bg-primary: #e6e2d6;\n  --musea-bg-secondary: #ddd9cd;\n  --musea-bg-tertiary: #d4d0c4;\n  --musea-bg-elevated: #e6e2d6;\n  --musea-accent: #121212;\n  --musea-accent-hover: #2a2a2a;\n  --musea-accent-subtle: #12121214;\n  --musea-text: #121212;\n  --musea-text-secondary: #3a3a3a;\n  --musea-text-muted: #6b6b6b;\n  --musea-border: #c8c4b8;\n  --musea-border-subtle: #d4d0c4;\n  --musea-success: #16a34a;\n  --musea-shadow: 0 4px 24px #00000014;\n  --musea-radius-sm: 4px;\n  --musea-radius-md: 6px;\n  --musea-radius-lg: 8px;\n  --musea-transition: .15s ease;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  background: var(--musea-bg-primary);\n  color: var(--musea-text);\n  -webkit-font-smoothing: antialiased;\n  min-height: 100vh;\n  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n  line-height: 1.5;\n}\n";
-//#endregion
-//#region src/gallery/styles-layout.css?inline
-var styles_layout_default = ".header {\n  background: var(--musea-bg-secondary);\n  border-bottom: 1px solid var(--musea-border);\n  z-index: 100;\n  justify-content: space-between;\n  align-items: center;\n  height: 56px;\n  padding: 0 1.5rem;\n  display: flex;\n  position: sticky;\n  top: 0;\n}\n\n.header-left {\n  align-items: center;\n  gap: 1.5rem;\n  display: flex;\n}\n\n.logo {\n  color: var(--musea-accent);\n  align-items: center;\n  gap: .5rem;\n  font-size: 1.125rem;\n  font-weight: 700;\n  text-decoration: none;\n  display: flex;\n}\n\n.logo-svg {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n}\n\n.logo-icon svg {\n  width: 16px;\n  height: 16px;\n  color: var(--musea-text);\n}\n\n.header-subtitle {\n  color: var(--musea-text-muted);\n  border-left: 1px solid var(--musea-border);\n  padding-left: 1.5rem;\n  font-size: .8125rem;\n  font-weight: 500;\n}\n\n.search-container {\n  width: 280px;\n  position: relative;\n}\n\n.search-input {\n  background: var(--musea-bg-tertiary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-md);\n  width: 100%;\n  color: var(--musea-text);\n  transition: border-color var(--musea-transition),\n    background var(--musea-transition);\n  outline: none;\n  padding: .5rem .75rem .5rem 2.25rem;\n  font-size: .8125rem;\n}\n\n.search-input::placeholder {\n  color: var(--musea-text-muted);\n}\n\n.search-input:focus {\n  border-color: var(--musea-accent);\n  background: var(--musea-bg-elevated);\n}\n\n.search-icon {\n  color: var(--musea-text-muted);\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  left: .75rem;\n  transform: translateY(-50%);\n}\n\n.main {\n  grid-template-columns: 260px 1fr;\n  min-height: calc(100vh - 56px);\n  display: grid;\n}\n\n.sidebar {\n  background: var(--musea-bg-secondary);\n  border-right: 1px solid var(--musea-border);\n  overflow: hidden auto;\n}\n\n.sidebar::-webkit-scrollbar {\n  width: 6px;\n}\n\n.sidebar::-webkit-scrollbar-track {\n  background: none;\n}\n\n.sidebar::-webkit-scrollbar-thumb {\n  background: var(--musea-border);\n  border-radius: 3px;\n}\n\n.sidebar-section {\n  padding: .75rem;\n}\n\n.category-header {\n  text-transform: uppercase;\n  letter-spacing: .08em;\n  color: var(--musea-text-muted);\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--musea-radius-sm);\n  transition: background var(--musea-transition);\n  align-items: center;\n  gap: .5rem;\n  padding: .625rem .75rem;\n  font-size: .6875rem;\n  font-weight: 600;\n  display: flex;\n}\n\n.category-header:hover {\n  background: var(--musea-bg-tertiary);\n}\n\n.category-icon {\n  width: 16px;\n  height: 16px;\n  transition: transform var(--musea-transition);\n}\n\n.category-header.collapsed .category-icon {\n  transform: rotate(-90deg);\n}\n\n.category-count {\n  background: var(--musea-bg-tertiary);\n  border-radius: 4px;\n  margin-left: auto;\n  padding: .125rem .375rem;\n  font-size: .625rem;\n}\n\n.art-list {\n  margin-top: .25rem;\n  list-style: none;\n}\n\n.art-item {\n  border-radius: var(--musea-radius-sm);\n  cursor: pointer;\n  color: var(--musea-text-secondary);\n  transition: all var(--musea-transition);\n  align-items: center;\n  gap: .625rem;\n  padding: .5rem .75rem .5rem 1.75rem;\n  font-size: .8125rem;\n  display: flex;\n  position: relative;\n}\n\n.art-item:before {\n  content: \"\";\n  background: var(--musea-border);\n  width: 6px;\n  height: 6px;\n  transition: background var(--musea-transition);\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: .75rem;\n  transform: translateY(-50%);\n}\n\n.art-item:hover {\n  background: var(--musea-bg-tertiary);\n  color: var(--musea-text);\n}\n\n.art-item:hover:before {\n  background: var(--musea-text-muted);\n}\n\n.art-item.active {\n  background: var(--musea-accent-subtle);\n  color: var(--musea-accent-hover);\n}\n\n.art-item.active:before {\n  background: var(--musea-accent);\n}\n\n.art-variant-count {\n  color: var(--musea-text-muted);\n  opacity: 0;\n  transition: opacity var(--musea-transition);\n  margin-left: auto;\n  font-size: .6875rem;\n}\n\n.art-item:hover .art-variant-count {\n  opacity: 1;\n}\n\n.content {\n  background: var(--musea-bg-primary);\n  overflow-y: auto;\n}\n\n.content-inner {\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\n.content-header {\n  margin-bottom: 2rem;\n}\n\n.content-title {\n  margin-bottom: .5rem;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n\n.content-description {\n  color: var(--musea-text-muted);\n  max-width: 600px;\n  font-size: .9375rem;\n}\n\n.content-meta {\n  align-items: center;\n  gap: 1rem;\n  margin-top: 1rem;\n  display: flex;\n}\n\n.meta-tag {\n  background: var(--musea-bg-secondary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-sm);\n  color: var(--musea-text-muted);\n  align-items: center;\n  gap: .375rem;\n  padding: .25rem .625rem;\n  font-size: .75rem;\n  display: inline-flex;\n}\n\n.meta-tag svg {\n  width: 12px;\n  height: 12px;\n}\n";
-//#endregion
-//#region src/gallery/styles-components.css?inline
-var styles_components_default = ".gallery {\n  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n  gap: 1.25rem;\n  display: grid;\n}\n\n.variant-card {\n  background: var(--musea-bg-secondary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-lg);\n  overflow: hidden;\n}\n\n.variant-preview {\n  aspect-ratio: 16 / 7;\n  background: var(--musea-bg-tertiary);\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n}\n\n.variant-preview iframe {\n  border-radius: var(--musea-radius-md);\n  background: #fff;\n  border: none;\n  width: 70%;\n  max-width: 100%;\n  height: 100%;\n  max-height: 100%;\n  box-shadow: 0 12px 30px #0d0d0d1f;\n}\n\n.variant-preview-placeholder {\n  color: var(--musea-text-muted);\n  text-align: center;\n  padding: 1rem;\n  font-size: .8125rem;\n}\n\n.variant-preview-code {\n  color: var(--musea-text-muted);\n  background: var(--musea-bg-primary);\n  width: 100%;\n  max-height: 100%;\n  padding: 1rem;\n  font-family: JetBrains Mono, SF Mono, Fira Code, monospace;\n  font-size: .75rem;\n  overflow: auto;\n}\n\n.variant-info {\n  border-top: 1px solid var(--musea-border);\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n  display: flex;\n}\n\n.variant-name {\n  font-size: .875rem;\n  font-weight: 600;\n}\n\n.variant-badge {\n  text-transform: uppercase;\n  letter-spacing: .04em;\n  background: var(--musea-accent-subtle);\n  color: var(--musea-accent);\n  border-radius: 4px;\n  padding: .1875rem .5rem;\n  font-size: .625rem;\n  font-weight: 600;\n}\n\n.variant-actions {\n  gap: .5rem;\n  display: flex;\n}\n\n.variant-action-btn {\n  background: var(--musea-bg-tertiary);\n  border-radius: var(--musea-radius-sm);\n  width: 28px;\n  height: 28px;\n  color: var(--musea-text-muted);\n  cursor: pointer;\n  transition: all var(--musea-transition);\n  border: none;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.variant-action-btn:hover {\n  background: var(--musea-bg-elevated);\n  color: var(--musea-text);\n}\n\n.variant-action-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n.empty-state {\n  text-align: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  min-height: 400px;\n  padding: 2rem;\n  display: flex;\n}\n\n.empty-state-icon {\n  background: var(--musea-bg-secondary);\n  border-radius: var(--musea-radius-lg);\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n  margin-bottom: 1.5rem;\n  display: flex;\n}\n\n.empty-state-icon svg {\n  width: 40px;\n  height: 40px;\n  color: var(--musea-text-muted);\n}\n\n.empty-state-title {\n  margin-bottom: .5rem;\n  font-size: 1.125rem;\n  font-weight: 600;\n}\n\n.empty-state-text {\n  color: var(--musea-text-muted);\n  max-width: 300px;\n  font-size: .875rem;\n}\n\n.loading {\n  min-height: 200px;\n  color: var(--musea-text-muted);\n  justify-content: center;\n  align-items: center;\n  gap: .75rem;\n  display: flex;\n}\n\n.loading-spinner {\n  border: 2px solid var(--musea-border);\n  border-top-color: var(--musea-accent);\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  animation: .8s linear infinite spin;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (width <= 768px) {\n  .main {\n    grid-template-columns: 1fr;\n  }\n\n  .sidebar, .header-subtitle {\n    display: none;\n  }\n}\n";
-//#endregion
-//#region src/gallery/styles.ts
-/**
-* CSS theme variables and style definitions for the Musea gallery.
-*
-* CSS is split into separate .css files and imported as text
-* via tsdown's `?inline` support.
-*/
-/**
-* Generate the full gallery CSS styles string.
-*/
-function generateGalleryStyles() {
-	return `${styles_base_default}\n${styles_layout_default}\n${styles_components_default}`;
-}
-//#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.
-*/
-function escapeHtmlAttribute(value) {
-	return value.replace(/[&<>"']/g, (char) => {
-		switch (char) {
-			case "&": return "&amp;";
-			case "<": return "&lt;";
-			case ">": return "&gt;";
-			case "\"": return "&quot;";
-			case "'": return "&#39;";
-			default: return char;
-		}
-	});
-}
-/**
-* Generate the gallery HTML body (header, sidebar, content, and inline script).
-*/
-function generateGalleryBody(basePath) {
-	return `
-  <header class="header">
-    <div class="header-left">
-      <a href="${escapeHtmlAttribute(basePath)}" class="logo">
-        <svg class="logo-svg" width="32" height="32" viewBox="0 0 200 200" fill="none">
-          <g transform="translate(30, 25) scale(1.2)">
-            <g transform="translate(15, 10) skewX(-15)">
-              <path d="M 65 0 L 40 60 L 70 20 L 65 0 Z" fill="currentColor"/>
-              <path d="M 20 0 L 40 60 L 53 13 L 20 0 Z" fill="currentColor"/>
-            </g>
-          </g>
-          <g transform="translate(110, 120)">
-            <line x1="5" y1="10" x2="5" y2="50" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
-            <line x1="60" y1="10" x2="60" y2="50" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
-            <path d="M 0 10 L 32.5 0 L 65 10" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-            <rect x="15" y="18" width="14" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.7"/>
-            <rect x="36" y="18" width="14" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.7"/>
-            <rect x="23" y="35" width="18" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.6"/>
-          </g>
-        </svg>
-        Musea
-      </a>
-      <span class="header-subtitle">Component Gallery</span>
-    </div>
-    <div class="search-container">
-      <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
-      </svg>
-      <input type="text" class="search-input" placeholder="Search components..." id="search">
-    </div>
-  </header>
-
-  <main class="main">
-    <aside class="sidebar" id="sidebar">
-      <div class="loading">
-        <div class="loading-spinner"></div>
-        Loading...
-      </div>
-    </aside>
-    <section class="content" id="content">
-      <div class="empty-state">
-        <div class="empty-state-icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <path d="M4 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5Z"/>
-            <path d="M4 13a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6Z"/>
-            <path d="M16 13a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-6Z"/>
-          </svg>
-        </div>
-        <div class="empty-state-title">Select a component</div>
-        <div class="empty-state-text">Choose a component from the sidebar to view its variants and documentation</div>
-      </div>
-    </section>
-  </main>`;
-}
-/**
-* Generate the gallery inline script (SPA logic).
-*/
-function generateGalleryScript(basePath) {
-	return `
-    const basePath = ${serializeScriptValue(basePath)};
-    let arts = [];
-    let selectedArt = null;
-    let searchQuery = '';
-
-    async function loadArts() {
-      try {
-        const res = await fetch(basePath + '/api/arts');
-        arts = await res.json();
-        renderSidebar();
-      } catch (e) {
-        console.error('Failed to load arts:', e);
-        document.getElementById('sidebar').innerHTML = '<div class="loading">Failed to load</div>';
-      }
-    }
-
-    function renderSidebar() {
-      const sidebar = document.getElementById('sidebar');
-      const categories = {};
-
-      const filtered = searchQuery
-        ? arts.filter(a => a.metadata.title.toLowerCase().includes(searchQuery.toLowerCase()))
-        : arts;
-
-      for (const art of filtered) {
-        const cat = art.metadata.category || 'Components';
-        if (!categories[cat]) categories[cat] = [];
-        categories[cat].push(art);
-      }
-
-      if (Object.keys(categories).length === 0) {
-        sidebar.innerHTML = '<div class="sidebar-section"><div class="loading">No components found</div></div>';
-        return;
-      }
-
-      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="' + 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>' + escapedCategory + '</span>';
-        html += '<span class="category-count">' + items.length + '</span>';
-        html += '</div>';
-        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="' + escapeHtml(art.path) + '">';
-          html += '<span>' + escapeHtml(art.metadata.title) + '</span>';
-          html += '<span class="art-variant-count">' + variantCount + ' variant' + (variantCount !== 1 ? 's' : '') + '</span>';
-          html += '</li>';
-        }
-        html += '</ul>';
-        html += '</div>';
-      }
-
-      sidebar.innerHTML = html;
-
-      sidebar.querySelectorAll('.art-item').forEach(item => {
-        item.addEventListener('click', () => {
-          const artPath = item.dataset.path;
-          selectedArt = arts.find(a => a.path === artPath);
-          renderSidebar();
-          renderContent();
-        });
-      });
-
-      sidebar.querySelectorAll('.category-header').forEach(header => {
-        header.addEventListener('click', () => {
-          header.classList.toggle('collapsed');
-          const list = header.parentElement?.querySelector('.art-list');
-          if (list) list.style.display = header.classList.contains('collapsed') ? 'none' : 'block';
-        });
-      });
-    }
-
-    function renderContent() {
-      const content = document.getElementById('content');
-      if (!selectedArt) {
-        content.innerHTML = \`
-          <div class="empty-state">
-            <div class="empty-state-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M4 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5Z"/>
-                <path d="M4 13a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6Z"/>
-                <path d="M16 13a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-6Z"/>
-              </svg>
-            </div>
-            <div class="empty-state-title">Select a component</div>
-            <div class="empty-state-text">Choose a component from the sidebar to view its variants</div>
-          </div>
-        \`;
-        return;
-      }
-
-      const meta = selectedArt.metadata;
-      const tags = meta.tags || [];
-      const variantCount = selectedArt.variants?.length || 0;
-
-      let html = '<div class="content-inner">';
-      html += '<div class="content-header">';
-      html += '<h1 class="content-title">' + escapeHtml(meta.title) + '</h1>';
-      if (meta.description) {
-        html += '<p class="content-description">' + escapeHtml(meta.description) + '</p>';
-      }
-      html += '<div class="content-meta">';
-      html += '<span class="meta-tag"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>' + variantCount + ' variant' + (variantCount !== 1 ? 's' : '') + '</span>';
-      if (meta.category) {
-        html += '<span class="meta-tag"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>' + escapeHtml(meta.category) + '</span>';
-      }
-      for (const tag of tags) {
-        html += '<span class="meta-tag">#' + escapeHtml(tag) + '</span>';
-      }
-      html += '</div>';
-      html += '</div>';
-
-      html += '<div class="gallery">';
-      for (const variant of selectedArt.variants) {
-        const previewUrl = basePath + '/preview?art=' + encodeURIComponent(selectedArt.path) + '&variant=' + encodeURIComponent(variant.name);
-        const escapedPreviewUrl = escapeHtml(previewUrl);
-
-        html += '<div class="variant-card">';
-        html += '<div class="variant-preview">';
-        html += '<iframe src="' + escapedPreviewUrl + '" loading="lazy" title="' + escapeHtml(variant.name) + '"></iframe>';
-        html += '</div>';
-        html += '<div class="variant-info">';
-        html += '<div>';
-        html += '<span class="variant-name">' + escapeHtml(variant.name) + '</span>';
-        if (variant.isDefault) html += ' <span class="variant-badge">Default</span>';
-        html += '</div>';
-        html += '<div class="variant-actions">';
-        html += '<button class="variant-action-btn" title="Open in new tab" data-preview-url="' + escapedPreviewUrl + '"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></button>';
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-      }
-      html += '</div>';
-      html += '</div>';
-
-      content.innerHTML = html;
-
-      content.querySelectorAll('.variant-action-btn[data-preview-url]').forEach(button => {
-        button.addEventListener('click', () => {
-          const previewUrl = button.dataset.previewUrl;
-          if (previewUrl) window.open(previewUrl, '_blank', 'noopener');
-        });
-      });
-    }
-
-    function escapeHtml(str) {
-      if (!str) return '';
-      return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
-
-    // Search
-    document.getElementById('search').addEventListener('input', (e) => {
-      searchQuery = e.target.value;
-      renderSidebar();
-    });
-
-    // Keyboard shortcut for search
-    document.addEventListener('keydown', (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        document.getElementById('search').focus();
-      }
-    });
-
-    loadArts();`;
-}
-//#endregion
-//#region src/gallery/index.ts
-/**
-* 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.
-*/
-/**
-* Generate the inline gallery HTML page.
-*/
-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__=${serializeScriptValue(basePath)};window.__MUSEA_SESSION_TOKEN__=${serializeScriptValue(devSessionToken)};${themeScript}<\/script>
-  <style>${generateGalleryStyles()}
-  </style>
-</head>
-<body>${generateGalleryBody(basePath)}
-
-  <script type="module">${generateGalleryScript(basePath)}
-  <\/script>
-</body>
-</html>`;
-}
-/**
-* Generate the virtual gallery module code.
-*/
-function generateGalleryModule(basePath) {
-	return `
-export const basePath = ${serializeScriptValue(basePath)};
-export async function loadArts() {
-  const res = await fetch(basePath + '/api/arts');
-  return res.json();
-}
-`;
-}
-//#endregion
 //#region src/preview/addons.ts
 /**
 * Addon initialization code for Musea preview iframes.
@@ -1597,6 +1138,15 @@ mount();
 //#endregion
 //#region src/server-middleware.ts
 const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+const galleryAssetMimeTypes = {
+	".js": "application/javascript",
+	".css": "text/css",
+	".svg": "image/svg+xml",
+	".png": "image/png",
+	".ico": "image/x-icon",
+	".woff2": "font/woff2",
+	".woff": "font/woff"
+};
 function resolveGalleryDistDir() {
 	return path.resolve(moduleDir, "gallery");
 }
@@ -1624,6 +1174,29 @@ async function tryLoadSourceGalleryHtml(devServer, url, basePath, devSessionToke
 	html = html.replace("</head>", `<script>${generateDevGlobalsScript(basePath, devSessionToken, themeConfig)}<\/script></head>`);
 	return devServer.transformIndexHtml(url, html);
 }
+async function generateFallbackGalleryHtml(basePath, devSessionToken, themeConfig) {
+	const { generateGalleryHtml } = await import("./gallery-zu8hc8Lc.mjs").then((n) => n.t);
+	return generateGalleryHtml(basePath, devSessionToken, themeConfig);
+}
+async function serveGalleryAsset(galleryDistDir, requestUrl, res) {
+	try {
+		const filePath = resolveUrlPathInside(galleryDistDir, requestUrl, "asset path");
+		if (!(await fs.promises.stat(filePath)).isFile()) return false;
+		const content = await fs.promises.readFile(filePath);
+		const ext = path.extname(filePath);
+		res.setHeader("Content-Type", galleryAssetMimeTypes[ext] || "application/octet-stream");
+		res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
+		res.end(content);
+		return true;
+	} catch (error) {
+		if (error instanceof HttpError) {
+			res.statusCode = error.status;
+			res.end(error.message);
+			return true;
+		}
+		return false;
+	}
+}
 /**
 * Register all Musea middleware on the given dev server.
 *
@@ -1656,39 +1229,14 @@ function registerMiddleware(devServer, ctx) {
 					res.end(sourceHtml);
 					return;
 				}
-				const html = generateGalleryHtml(basePath, devSessionToken, themeConfig);
+				const html = await generateFallbackGalleryHtml(basePath, devSessionToken, themeConfig);
 				res.setHeader("Content-Type", "text/html");
 				res.end(html);
 				return;
 			}
 		}
 		if (url.startsWith("/assets/")) {
-			const galleryDistDir = resolveGalleryDistDir();
-			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);
-					res.setHeader("Content-Type", {
-						".js": "application/javascript",
-						".css": "text/css",
-						".svg": "image/svg+xml",
-						".png": "image/png",
-						".ico": "image/x-icon",
-						".woff2": "font/woff2",
-						".woff": "font/woff"
-					}[ext] || "application/octet-stream");
-					res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
-					res.end(content);
-					return;
-				}
-			} catch (error) {
-				if (error instanceof HttpError) {
-					res.statusCode = error.status;
-					res.end(error.message);
-					return;
-				}
-			}
+			if (await serveGalleryAsset(resolveGalleryDistDir(), url, res)) return;
 		}
 		next();
 	});
@@ -1767,7 +1315,17 @@ function registerMiddleware(devServer, ctx) {
 	});
 	devServer.middlewares.use(`${basePath}/art`, async (req, res, next) => {
 		const url = new URL(req.url || "", "http://localhost");
-		const artPath = decodeURIComponent(url.pathname.slice(1));
+		let artPath;
+		try {
+			artPath = decodeUrlComponent(url.pathname.slice(1), "art path");
+		} catch (error) {
+			if (error instanceof HttpError) {
+				res.statusCode = error.status;
+				res.end(error.message);
+				return;
+			}
+			throw error;
+		}
 		if (!artPath) {
 			next();
 			return;
@@ -1805,122 +1363,32 @@ function registerMiddleware(devServer, ctx) {
 	});
 }
 //#endregion
-//#region src/tokens/parser.ts
-/**
-* Token parsing utilities for Style Dictionary integration.
-*
-* Reads and parses design token files (JSON) and directories,
-* flattening nested structures into categorized token collections.
-*/
-/**
-* Parse Style Dictionary tokens file.
-*/
-async function parseTokens(tokensPath) {
-	const absolutePath = path.resolve(tokensPath);
-	if ((await fs.promises.stat(absolutePath)).isDirectory()) return parseTokenDirectory(absolutePath);
-	const content = await fs.promises.readFile(absolutePath, "utf-8");
-	return flattenTokens(JSON.parse(content));
+//#region src/tokens/native.ts
+function tokenNative() {
+	return loadNative();
 }
-/**
-* Parse tokens from a directory.
-*/
-async function parseTokenDirectory(dirPath) {
-	const mergedTokens = createRecord();
-	await mergeTokenDirectory(mergedTokens, dirPath);
-	return flattenTokens(mergedTokens);
-}
-async function mergeTokenDirectory(target, dirPath) {
-	const entries = await fs.promises.readdir(dirPath, { withFileTypes: true });
-	for (const entry of entries.sort((a, b) => a.name.localeCompare(b.name))) {
-		const fullPath = path.join(dirPath, entry.name);
-		if (entry.isDirectory()) {
-			await mergeTokenDirectory(target, fullPath);
-			continue;
-		}
-		if (!entry.isFile() || !entry.name.endsWith(".json") && !entry.name.endsWith(".tokens.json")) continue;
-		const content = await fs.promises.readFile(fullPath, "utf-8");
-		deepMergeTokenTrees(target, JSON.parse(content));
-	}
-}
-function deepMergeTokenTrees(target, source) {
-	for (const [key, value] of Object.entries(source)) {
-		const existing = target[key];
-		if (isPlainObject(existing) && isPlainObject(value) && !isTokenValue(existing) && !isTokenValue(value)) {
-			deepMergeTokenTrees(existing, value);
-			continue;
-		}
-		target[key] = cloneTokenTree(value);
-	}
-}
-/**
-* Flatten nested token structure into categories.
-*/
-function flattenTokens(tokens, prefix = []) {
-	const categories = [];
-	for (const [key, value] of Object.entries(tokens)) {
-		if (isTokenValue(value)) continue;
-		if (typeof value === "object" && value !== null) {
-			const categoryTokens = extractTokens(value);
-			const subcategories = flattenTokens(value, [...prefix, key]);
-			if (Object.keys(categoryTokens).length > 0 || subcategories.length > 0) categories.push({
-				name: formatCategoryName(key),
-				tokens: categoryTokens,
-				subcategories: subcategories.length > 0 ? subcategories : void 0
-			});
-		}
+function normalizeCategories(categories) {
+	for (const category of categories) {
+		category.tokens = nullRecord(category.tokens);
+		if (category.subcategories) normalizeCategories(category.subcategories);
 	}
 	return categories;
 }
-/**
-* Extract token values from an object.
-*/
-function extractTokens(obj) {
-	const tokens = createRecord();
-	for (const [key, value] of Object.entries(obj)) if (isTokenValue(value)) tokens[key] = normalizeToken(value);
-	return tokens;
-}
-function cloneTokenTree(value) {
-	if (Array.isArray(value)) return value.map(cloneTokenTree);
-	if (isPlainObject(value)) {
-		const cloned = createRecord();
-		for (const [key, child] of Object.entries(value)) cloned[key] = cloneTokenTree(child);
-		return cloned;
-	}
-	return value;
-}
-/**
-* Check if a value is a token definition.
-*/
-function isTokenValue(value) {
-	if (typeof value !== "object" || value === null) return false;
-	const obj = value;
-	return "value" in obj && (typeof obj.value === "string" || typeof obj.value === "number") || "$value" in obj && (typeof obj.$value === "string" || typeof obj.$value === "number");
-}
-function isPlainObject(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function createRecord() {
-	return Object.create(null);
+function nullRecord(record) {
+	return Object.assign(Object.create(null), record);
 }
+//#endregion
+//#region src/tokens/parser.ts
 /**
-* Normalize token to DesignToken interface.
+* Token parsing utilities for Style Dictionary integration.
+*
+* Thin native binding for design token files (JSON) and directories.
 */
-function normalizeToken(raw) {
-	const token = {
-		value: raw.value ?? raw.$value,
-		type: raw.type ?? raw.$type,
-		description: raw.description,
-		attributes: raw.attributes
-	};
-	if (raw.$tier === "primitive" || raw.$tier === "semantic") token.$tier = raw.$tier;
-	if (typeof raw.$reference === "string") token.$reference = raw.$reference;
-	return token;
-}
 /**
-* Format category name for display.
+* Parse Style Dictionary tokens file or directory.
 */
-function formatCategoryName(name) {
-	return name.replace(/[-_]/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+async function parseTokens(tokensPath) {
+	return normalizeCategories(tokenNative().parseDesignTokensFromPath(tokensPath));
 }
 //#endregion
 //#region src/tokens/usage.ts
@@ -2027,8 +1495,6 @@ function scanTokenUsage(artFiles, tokenMap) {
 * Handles building flat token maps from categories, resolving reference chains,
 * reading/writing raw token files, and validating semantic references.
 */
-const REFERENCE_PATTERN = /^\{(.+)\}$/;
-const MAX_RESOLVE_DEPTH = 10;
 const UNSAFE_TOKEN_PATH_SEGMENTS = new Set([
 	"__proto__",
 	"prototype",
@@ -2044,53 +1510,15 @@ function parseTokenPath(dotPath) {
 /**
 * Flatten nested categories into a flat map keyed by dot-path.
 */
-function buildTokenMap(categories, prefix = []) {
-	const map = Object.create(null);
-	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;
+function buildTokenMap(categories) {
+	return nullRecord(tokenNative().buildDesignTokenMap(categories));
 }
 /**
 * 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, /* @__PURE__ */ 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;
+function resolveReferences(categories, _tokenMap) {
+	const resolved = tokenNative().resolveDesignTokenReferences(categories);
+	categories.splice(0, categories.length, ...normalizeCategories(resolved.categories));
 }
 /**
 * Read raw JSON token file.
@@ -2158,48 +1586,13 @@ function deleteTokenAtPath(data, dotPath) {
 * 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 = /* @__PURE__ */ 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 };
+	return tokenNative().validateDesignTokenReference(tokenMap, reference, selfPath);
 }
 /**
 * Find all tokens that reference the given path.
 */
 function findDependentTokens(tokenMap, targetPath) {
-	const dependents = [];
-	for (const [path, 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);
-	}
-	return dependents;
+	return tokenNative().findDependentDesignTokens(tokenMap, targetPath);
 }
 //#endregion
 //#region src/tokens/generator.ts
@@ -2210,6 +1603,10 @@ function findDependentTokens(tokenMap, targetPath) {
 * and provides the main processStyleDictionary orchestrator function.
 */
 const SAFE_CSS_COLOR_PATTERN = /^(?:#[0-9a-fA-F]{3,8}|(?:rgb|hsl)a?\(\s*[-+.\d,%\s]+\))$/;
+const DANGEROUS_PROTOCOL_PATTERN = /\b(javascript|vbscript):/gi;
+function escapeTokenText(value) {
+	return escapeHtml(value).replace(DANGEROUS_PROTOCOL_PATTERN, "$1&#58;");
+}
 function safeCssColor(value, type) {
 	if (typeof value !== "string") return null;
 	const trimmed = value.trim();
@@ -2227,16 +1624,16 @@ function generateTokensHtml(categories) {
           ${color ? `<div class="color-swatch" style="background: ${color}"></div>` : ""}
         </div>
         <div class="token-info">
-          <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 class="token-name">${escapeTokenText(name)}</div>
+          <div class="token-value">${escapeTokenText(String(token.value))}</div>
+          ${token.description ? `<div class="token-description">${escapeTokenText(token.description)}</div>` : ""}
         </div>
       </div>
     `;
 	};
 	const renderCategory = (category, level = 2) => {
 		const heading = `h${Math.min(level, 6)}`;
-		let html = `<${heading}>${escapeHtml(category.name)}</${heading}>`;
+		let html = `<${heading}>${escapeTokenText(category.name)}</${heading}>`;
 		html += "<div class=\"tokens-grid\">";
 		for (const [name, token] of Object.entries(category.tokens)) html += renderToken(name, token);
 		html += "</div>";
@@ -2330,24 +1727,7 @@ function generateTokensHtml(categories) {
 * Generate Markdown documentation for tokens.
 */
 function generateTokensMarkdown(categories) {
-	const renderCategory = (category, level = 2) => {
-		let md = `\n${"#".repeat(level)} ${category.name}\n\n`;
-		if (Object.keys(category.tokens).length > 0) {
-			md += "| Token | Value | Description |\n";
-			md += "|-------|-------|-------------|\n";
-			for (const [name, token] of Object.entries(category.tokens)) {
-				const desc = token.description || "-";
-				md += `| \`${name}\` | \`${token.value}\` | ${desc} |\n`;
-			}
-			md += "\n";
-		}
-		if (category.subcategories) for (const sub of category.subcategories) md += renderCategory(sub, level + 1);
-		return md;
-	};
-	let markdown = "# Design Tokens\n\n";
-	markdown += `> Generated by Musea on ${(/* @__PURE__ */ new Date()).toISOString()}\n`;
-	for (const category of categories) markdown += renderCategory(category);
-	return markdown;
+	return tokenNative().generateDesignTokensMarkdown(categories, (/* @__PURE__ */ new Date()).toISOString());
 }
 /**
 * Style Dictionary plugin for Musea.
@@ -2577,7 +1957,7 @@ async function handleTokensDelete(ctx, readBody, sendJson, sendError) {
 */
 /** GET /api/arts/:path/palette */
 async function handleArtPalette(ctx, match, sendJson, sendError) {
-	const artPath = decodeURIComponent(match[1]);
+	const artPath = decodeUrlComponent(match[1], "art path");
 	const art = ctx.artFiles.get(artPath);
 	if (!art) {
 		sendError("Art not found", 404);
@@ -2655,7 +2035,7 @@ async function handleArtPalette(ctx, match, sendJson, sendError) {
 */
 /** GET /api/arts/:path/source */
 async function handleArtSource(ctx, match, sendJson, sendError) {
-	const artPath = decodeURIComponent(match[1]);
+	const artPath = decodeUrlComponent(match[1], "art path");
 	if (!ctx.artFiles.get(artPath)) {
 		sendError("Art not found", 404);
 		return;
@@ -2671,7 +2051,7 @@ async function handleArtSource(ctx, match, sendJson, sendError) {
 }
 /** GET /api/arts/:path/analysis */
 async function handleArtAnalysis(ctx, match, sendJson, sendError) {
-	const artPath = decodeURIComponent(match[1]);
+	const artPath = decodeUrlComponent(match[1], "art path");
 	const art = ctx.artFiles.get(artPath);
 	if (!art) {
 		sendError("Art not found", 404);
@@ -2694,7 +2074,7 @@ async function handleArtAnalysis(ctx, match, sendJson, sendError) {
 }
 /** GET /api/arts/:path/docs */
 async function handleArtDocs(ctx, match, sendJson, sendError) {
-	const artPath = decodeURIComponent(match[1]);
+	const artPath = decodeUrlComponent(match[1], "art path");
 	const art = ctx.artFiles.get(artPath);
 	if (!art) {
 		sendError("Art not found", 404);
@@ -2744,8 +2124,8 @@ async function handleArtDocs(ctx, match, sendJson, sendError) {
 }
 /** GET /api/arts/:path/variants/:name/a11y */
 function handleArtA11y(ctx, match, sendJson, sendError) {
-	const artPath = decodeURIComponent(match[1]);
-	decodeURIComponent(match[2]);
+	const artPath = decodeUrlComponent(match[1], "art path");
+	decodeUrlComponent(match[2], "variant name");
 	if (!ctx.artFiles.get(artPath)) {
 		sendError("Art not found", 404);
 		return;
@@ -2917,7 +2297,7 @@ function createApiMiddleware(ctx) {
 			if (url?.startsWith("/arts/") && req.method === "PUT") {
 				const sourceMatch = url.slice(6).match(/^(.+)\/source$/);
 				if (sourceMatch) {
-					const artPath = decodeURIComponent(sourceMatch[1]);
+					const artPath = decodeUrlComponent(sourceMatch[1], "art path");
 					if (!ctx.artFiles.get(artPath)) {
 						sendError("Art not found", 404);
 						return;
@@ -2964,7 +2344,7 @@ function createApiMiddleware(ctx) {
 					handleArtA11y(ctx, a11yMatch, sendJson, sendError);
 					return;
 				}
-				const artPath = decodeURIComponent(rest);
+				const artPath = decodeUrlComponent(rest, "art path");
 				const art = ctx.artFiles.get(artPath);
 				if (art) sendJson(art);
 				else sendError("Art not found", 404);