@vizejs/vite-plugin-musea 0.373.0 → 0.375.0

package/dist/{template-ByMVejqE.mjs → template-CrnwdQfB.mjs}

@@ -1,156 +1,4 @@
-import fs from "node:fs";
-import path from "node:path";
-import { randomBytes, timingSafeEqual } from "node:crypto";
-//#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") {
-	let pathname = decodeUrlComponent(requestUrl.split(/[?#]/, 1)[0] || "/", label);
-	pathname = pathname.replaceAll("\\", "/");
-	if (pathname.split("/").includes("..")) throw new HttpError(`${label} must not contain parent directory segments`, 400);
-	return resolveInside(parentDir, `.${pathname}`, label);
-}
-function decodeUrlComponent(value, label = "path") {
-	try {
-		return decodeURIComponent(value);
-	} catch {
-		throw new HttpError(`${label} is not valid URL encoding`, 400);
-	}
-}
-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 parseJsonBody(body) {
-	try {
-		return JSON.parse(body);
-	} catch (error) {
-		if (error instanceof SyntaxError) throw new HttpError("Malformed JSON body", 400);
-		throw 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
+import { v as serializeScriptValue } from "./art-processing-e4a94Wa4.mjs";
 //#region src/gallery/globals.ts
 function generateGalleryGlobalsScript(globals) {
 	const parts = [`window.__MUSEA_BASE_PATH__=${serializeScriptValue(globals.basePath)};`];
@@ -436,6 +284,6 @@ function generateGalleryScript(basePath) {
     loadArts();`;
 }
 //#endregion
-export { generateGalleryGlobalsScript as a, collectRequestBody as c, parseJsonBody as d, resolveInside as f, validateDevApiRequest as g, serializeScriptValue as h, generateDevGlobalsScript as i, createDevSessionToken as l, resolveUrlPathInside as m, generateGalleryScript as n, DEFAULT_API_BODY_LIMIT_BYTES as o, resolveInsideAny as p, generateGalleryModule as r, HttpError as s, generateGalleryBody as t, decodeUrlComponent as u };
+export { generateGalleryGlobalsScript as a, generateDevGlobalsScript as i, generateGalleryScript as n, generateGalleryModule as r, generateGalleryBody as t };
 
-//# sourceMappingURL=template-ByMVejqE.mjs.map
+//# sourceMappingURL=template-CrnwdQfB.mjs.map

package/dist/template-CrnwdQfB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-CrnwdQfB.mjs","names":[],"sources":["../src/gallery/globals.ts","../src/gallery/module.ts","../src/gallery/template.ts"],"sourcesContent":["import { serializeScriptValue } from \"../security.js\";\nimport type { MuseaTokenPreviewConfig } from \"../tokens/preview.js\";\n\nexport interface MuseaGalleryGlobals {\n  basePath: string;\n  devSessionToken?: string;\n  staticPreviews?: Record<string, Record<string, string>>;\n  themeConfig?: { default: string; custom?: Record<string, unknown> };\n  tokenPreviewConfig?: MuseaTokenPreviewConfig;\n}\n\nexport function generateGalleryGlobalsScript(globals: MuseaGalleryGlobals): string {\n  const parts = [`window.__MUSEA_BASE_PATH__=${serializeScriptValue(globals.basePath)};`];\n  if (globals.devSessionToken !== undefined) {\n    parts.push(`window.__MUSEA_SESSION_TOKEN__=${serializeScriptValue(globals.devSessionToken)};`);\n  }\n  if (globals.staticPreviews !== undefined) {\n    parts.push(\"window.__MUSEA_STATIC__=true;\");\n    parts.push(`window.__MUSEA_STATIC_PREVIEWS__=${serializeScriptValue(globals.staticPreviews)};`);\n  }\n  if (globals.themeConfig) {\n    parts.push(`window.__MUSEA_THEME_CONFIG__=${serializeScriptValue(globals.themeConfig)};`);\n  }\n  if (globals.tokenPreviewConfig) {\n    parts.push(\n      `window.__MUSEA_TOKEN_PREVIEWS__=${serializeScriptValue(globals.tokenPreviewConfig)};`,\n    );\n  }\n  return parts.join(\"\");\n}\n\nexport function generateDevGlobalsScript(\n  basePath: string,\n  devSessionToken: string,\n  themeConfig?: MuseaGalleryGlobals[\"themeConfig\"],\n  tokenPreviewConfig?: MuseaTokenPreviewConfig,\n): string {\n  return generateGalleryGlobalsScript({\n    basePath,\n    devSessionToken,\n    themeConfig,\n    tokenPreviewConfig,\n  });\n}\n","import { serializeScriptValue } from \"../security.js\";\n\nexport function generateGalleryModule(basePath: string): string {\n  return `\nexport const basePath = ${serializeScriptValue(basePath)};\nexport async function loadArts() {\n  const res = await fetch(basePath + '/api/arts');\n  return res.json();\n}\n`;\n}\n","/**\n * HTML structure and inline JS generation for the Musea gallery.\n *\n * Extracted from gallery.ts to keep file sizes manageable.\n */\n\nimport { serializeScriptValue } from \"../security.js\";\n\nfunction escapeHtmlAttribute(value: string): string {\n  return value.replace(/[&<>\"']/g, (char) => {\n    switch (char) {\n      case \"&\":\n        return \"&amp;\";\n      case \"<\":\n        return \"&lt;\";\n      case \">\":\n        return \"&gt;\";\n      case '\"':\n        return \"&quot;\";\n      case \"'\":\n        return \"&#39;\";\n      default:\n        return char;\n    }\n  });\n}\n\n/**\n * Generate the gallery HTML body (header, sidebar, content, and inline script).\n */\nexport function generateGalleryBody(basePath: string): string {\n  const escapedBasePath = escapeHtmlAttribute(basePath);\n\n  return `\n  <header class=\"header\">\n    <div class=\"header-left\">\n      <a href=\"${escapedBasePath}\" class=\"logo\">\n        <svg class=\"logo-svg\" width=\"32\" height=\"32\" viewBox=\"0 0 200 200\" fill=\"none\">\n          <g transform=\"translate(30, 25) scale(1.2)\">\n            <g transform=\"translate(15, 10) skewX(-15)\">\n              <path d=\"M 65 0 L 40 60 L 70 20 L 65 0 Z\" fill=\"currentColor\"/>\n              <path d=\"M 20 0 L 40 60 L 53 13 L 20 0 Z\" fill=\"currentColor\"/>\n            </g>\n          </g>\n          <g transform=\"translate(110, 120)\">\n            <line x1=\"5\" y1=\"10\" x2=\"5\" y2=\"50\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n            <line x1=\"60\" y1=\"10\" x2=\"60\" y2=\"50\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n            <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\"/>\n            <rect x=\"15\" y=\"18\" width=\"14\" height=\"12\" rx=\"1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" opacity=\"0.7\"/>\n            <rect x=\"36\" y=\"18\" width=\"14\" height=\"12\" rx=\"1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" opacity=\"0.7\"/>\n            <rect x=\"23\" y=\"35\" width=\"18\" height=\"12\" rx=\"1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" opacity=\"0.6\"/>\n          </g>\n        </svg>\n        Musea\n      </a>\n      <span class=\"header-subtitle\">Component Gallery</span>\n    </div>\n    <div class=\"search-container\">\n      <svg class=\"search-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/>\n      </svg>\n      <input type=\"text\" class=\"search-input\" placeholder=\"Search components...\" id=\"search\">\n    </div>\n  </header>\n\n  <main class=\"main\">\n    <aside class=\"sidebar\" id=\"sidebar\">\n      <div class=\"loading\">\n        <div class=\"loading-spinner\"></div>\n        Loading...\n      </div>\n    </aside>\n    <section class=\"content\" id=\"content\">\n      <div class=\"empty-state\">\n        <div class=\"empty-state-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n            <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\"/>\n            <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\"/>\n            <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\"/>\n          </svg>\n        </div>\n        <div class=\"empty-state-title\">Select a component</div>\n        <div class=\"empty-state-text\">Choose a component from the sidebar to view its variants and documentation</div>\n      </div>\n    </section>\n  </main>`;\n}\n\n/**\n * Generate the gallery inline script (SPA logic).\n */\nexport function generateGalleryScript(basePath: string): string {\n  return `\n    const basePath = ${serializeScriptValue(basePath)};\n    let arts = [];\n    let selectedArt = null;\n    let searchQuery = '';\n\n    async function loadArts() {\n      try {\n        const res = await fetch(basePath + '/api/arts');\n        arts = await res.json();\n        renderSidebar();\n      } catch (e) {\n        console.error('Failed to load arts:', e);\n        document.getElementById('sidebar').innerHTML = '<div class=\"loading\">Failed to load</div>';\n      }\n    }\n\n    function renderSidebar() {\n      const sidebar = document.getElementById('sidebar');\n      const categories = {};\n\n      const filtered = searchQuery\n        ? arts.filter(a => a.metadata.title.toLowerCase().includes(searchQuery.toLowerCase()))\n        : arts;\n\n      for (const art of filtered) {\n        const cat = art.metadata.category || 'Components';\n        if (!categories[cat]) categories[cat] = [];\n        categories[cat].push(art);\n      }\n\n      if (Object.keys(categories).length === 0) {\n        sidebar.innerHTML = '<div class=\"sidebar-section\"><div class=\"loading\">No components found</div></div>';\n        return;\n      }\n\n      let html = '';\n      for (const [category, items] of Object.entries(categories)) {\n        const escapedCategory = escapeHtml(category);\n        html += '<div class=\"sidebar-section\">';\n        html += '<div class=\"category-header\" data-category=\"' + escapedCategory + '\">';\n        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>';\n        html += '<span>' + escapedCategory + '</span>';\n        html += '<span class=\"category-count\">' + items.length + '</span>';\n        html += '</div>';\n        html += '<ul class=\"art-list\" data-category=\"' + escapedCategory + '\">';\n        for (const art of items) {\n          const active = selectedArt?.path === art.path ? 'active' : '';\n          const variantCount = art.variants?.length || 0;\n          html += '<li class=\"art-item ' + active + '\" data-path=\"' + escapeHtml(art.path) + '\">';\n          html += '<span>' + escapeHtml(art.metadata.title) + '</span>';\n          html += '<span class=\"art-variant-count\">' + variantCount + ' variant' + (variantCount !== 1 ? 's' : '') + '</span>';\n          html += '</li>';\n        }\n        html += '</ul>';\n        html += '</div>';\n      }\n\n      sidebar.innerHTML = html;\n\n      sidebar.querySelectorAll('.art-item').forEach(item => {\n        item.addEventListener('click', () => {\n          const artPath = item.dataset.path;\n          selectedArt = arts.find(a => a.path === artPath);\n          renderSidebar();\n          renderContent();\n        });\n      });\n\n      sidebar.querySelectorAll('.category-header').forEach(header => {\n        header.addEventListener('click', () => {\n          header.classList.toggle('collapsed');\n          const list = header.parentElement?.querySelector('.art-list');\n          if (list) list.style.display = header.classList.contains('collapsed') ? 'none' : 'block';\n        });\n      });\n    }\n\n    function renderContent() {\n      const content = document.getElementById('content');\n      if (!selectedArt) {\n        content.innerHTML = \\`\n          <div class=\"empty-state\">\n            <div class=\"empty-state-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                <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\"/>\n                <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\"/>\n                <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\"/>\n              </svg>\n            </div>\n            <div class=\"empty-state-title\">Select a component</div>\n            <div class=\"empty-state-text\">Choose a component from the sidebar to view its variants</div>\n          </div>\n        \\`;\n        return;\n      }\n\n      const meta = selectedArt.metadata;\n      const tags = meta.tags || [];\n      const variantCount = selectedArt.variants?.length || 0;\n\n      let html = '<div class=\"content-inner\">';\n      html += '<div class=\"content-header\">';\n      html += '<h1 class=\"content-title\">' + escapeHtml(meta.title) + '</h1>';\n      if (meta.description) {\n        html += '<p class=\"content-description\">' + escapeHtml(meta.description) + '</p>';\n      }\n      html += '<div class=\"content-meta\">';\n      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>';\n      if (meta.category) {\n        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>';\n      }\n      for (const tag of tags) {\n        html += '<span class=\"meta-tag\">#' + escapeHtml(tag) + '</span>';\n      }\n      html += '</div>';\n      html += '</div>';\n\n      html += '<div class=\"gallery\">';\n      for (const variant of selectedArt.variants) {\n        const previewUrl = basePath + '/preview?art=' + encodeURIComponent(selectedArt.path) + '&variant=' + encodeURIComponent(variant.name);\n        const escapedPreviewUrl = escapeHtml(previewUrl);\n\n        html += '<div class=\"variant-card\">';\n        html += '<div class=\"variant-preview\">';\n        html += '<iframe src=\"' + escapedPreviewUrl + '\" loading=\"lazy\" title=\"' + escapeHtml(variant.name) + '\"></iframe>';\n        html += '</div>';\n        html += '<div class=\"variant-info\">';\n        html += '<div>';\n        html += '<span class=\"variant-name\">' + escapeHtml(variant.name) + '</span>';\n        if (variant.isDefault) html += ' <span class=\"variant-badge\">Default</span>';\n        html += '</div>';\n        html += '<div class=\"variant-actions\">';\n        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>';\n        html += '</div>';\n        html += '</div>';\n        html += '</div>';\n      }\n      html += '</div>';\n      html += '</div>';\n\n      content.innerHTML = html;\n\n      content.querySelectorAll('.variant-action-btn[data-preview-url]').forEach(button => {\n        button.addEventListener('click', () => {\n          const previewUrl = button.dataset.previewUrl;\n          if (previewUrl) window.open(previewUrl, '_blank', 'noopener');\n        });\n      });\n    }\n\n    function escapeHtml(str) {\n      if (!str) return '';\n      return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#39;');\n    }\n\n    // Search\n    document.getElementById('search').addEventListener('input', (e) => {\n      searchQuery = e.target.value;\n      renderSidebar();\n    });\n\n    // Keyboard shortcut for search\n    document.addEventListener('keydown', (e) => {\n      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {\n        e.preventDefault();\n        document.getElementById('search').focus();\n      }\n    });\n\n    loadArts();`;\n}\n"],"mappings":";;AAWA,SAAgB,6BAA6B,SAAsC;CACjF,MAAM,QAAQ,CAAC,8BAA8B,qBAAqB,QAAQ,QAAQ,EAAE,EAAE;CACtF,IAAI,QAAQ,oBAAoB,KAAA,GAC9B,MAAM,KAAK,kCAAkC,qBAAqB,QAAQ,eAAe,EAAE,EAAE;CAE/F,IAAI,QAAQ,mBAAmB,KAAA,GAAW;EACxC,MAAM,KAAK,+BAA+B;EAC1C,MAAM,KAAK,oCAAoC,qBAAqB,QAAQ,cAAc,EAAE,EAAE;CAChG;CACA,IAAI,QAAQ,aACV,MAAM,KAAK,iCAAiC,qBAAqB,QAAQ,WAAW,EAAE,EAAE;CAE1F,IAAI,QAAQ,oBACV,MAAM,KACJ,mCAAmC,qBAAqB,QAAQ,kBAAkB,EAAE,EACtF;CAEF,OAAO,MAAM,KAAK,EAAE;AACtB;AAEA,SAAgB,yBACd,UACA,iBACA,aACA,oBACQ;CACR,OAAO,6BAA6B;EAClC;EACA;EACA;EACA;CACF,CAAC;AACH;;;ACzCA,SAAgB,sBAAsB,UAA0B;CAC9D,OAAO;0BACiB,qBAAqB,QAAQ,EAAE;;;;;;AAMzD;;;;;;;;ACFA,SAAS,oBAAoB,OAAuB;CAClD,OAAO,MAAM,QAAQ,aAAa,SAAS;EACzC,QAAQ,MAAR;GACE,KAAK,KACH,OAAO;GACT,KAAK,KACH,OAAO;GACT,KAAK,KACH,OAAO;GACT,KAAK,MACH,OAAO;GACT,KAAK,KACH,OAAO;GACT,SACE,OAAO;EACX;CACF,CAAC;AACH;;;;AAKA,SAAgB,oBAAoB,UAA0B;CAG5D,OAAO;;;iBAFiB,oBAAoB,QAKf,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDjC;;;;AAKA,SAAgB,sBAAsB,UAA0B;CAC9D,OAAO;uBACc,qBAAqB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0KtD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/vite-plugin-musea",
-  "version": "0.373.0",
+  "version": "0.375.0",
   "description": "Vite plugin for Musea - Component gallery for Vue components",
   "keywords": [
     "component-gallery",
@@ -62,7 +62,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@vizejs/native": "0.373.0",
+    "@vizejs/native": "0.375.0",
     "pngjs": "7.0.0"
   },
   "devDependencies": {
@@ -71,7 +71,7 @@
     "@types/node": "25.9.2",
     "@types/pngjs": "6.0.5",
     "@vitejs/plugin-vue": "6.0.7",
-    "@vizejs/vite-plugin": "0.373.0",
+    "@vizejs/vite-plugin": "0.375.0",
     "highlight.js": "11.11.1",
     "marked": "18.0.9",
     "marked-highlight": "2.2.4",
@@ -84,7 +84,7 @@
     "vue-router": "4.5.1"
   },
   "peerDependencies": {
-    "@vizejs/vite-plugin": "0.373.0",
+    "@vizejs/vite-plugin": "0.375.0",
     "axe-core": "^4.7.0",
     "playwright": "^1.40.0",
     "vite": "^7.3.0 || ^8.0.0"

package/dist/template-ByMVejqE.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"template-ByMVejqE.mjs","names":[],"sources":["../src/security.ts","../src/gallery/globals.ts","../src/gallery/module.ts","../src/gallery/template.ts"],"sourcesContent":["import { randomBytes, timingSafeEqual } from \"node:crypto\";\nimport fs from \"node:fs\";\nimport type { IncomingMessage } from \"node:http\";\nimport path from \"node:path\";\n\nexport const DEFAULT_API_BODY_LIMIT_BYTES = 1024 * 1024;\n\nexport class HttpError extends Error {\n  readonly status: number;\n\n  constructor(message: string, status: number) {\n    super(message);\n    this.name = \"HttpError\";\n    this.status = status;\n  }\n}\n\nexport function createDevSessionToken(): string {\n  return randomBytes(32).toString(\"base64url\");\n}\n\nfunction realpathNearest(targetPath: string): string {\n  let current = path.resolve(targetPath);\n  const missingParts: string[] = [];\n\n  while (true) {\n    try {\n      const real = fs.realpathSync.native(current);\n      return missingParts.length > 0 ? path.join(real, ...missingParts.reverse()) : real;\n    } catch {\n      const parent = path.dirname(current);\n      if (parent === current) {\n        return path.resolve(targetPath);\n      }\n      missingParts.push(path.basename(current));\n      current = parent;\n    }\n  }\n}\n\nfunction isResolvedPathInside(parentDir: string, candidatePath: string): boolean {\n  const parent = path.resolve(parentDir);\n  const candidate = path.resolve(candidatePath);\n  const relative = path.relative(parent, candidate);\n  return relative === \"\" || (!relative.startsWith(\"..\") && !path.isAbsolute(relative));\n}\n\nexport function isPathInside(parentDir: string, candidatePath: string): boolean {\n  return isResolvedPathInside(realpathNearest(parentDir), realpathNearest(candidatePath));\n}\n\nexport function isPathInsideAny(parentDirs: string[], candidatePath: string): boolean {\n  const candidate = realpathNearest(candidatePath);\n  return parentDirs.some((parentDir) =>\n    isResolvedPathInside(realpathNearest(parentDir), candidate),\n  );\n}\n\nexport function resolveInside(parentDir: string, candidatePath: string, label = \"path\"): string {\n  return resolveInsideAny([parentDir], candidatePath, label);\n}\n\nexport function resolveInsideAny(\n  parentDirs: string[],\n  candidatePath: string,\n  label = \"path\",\n): string {\n  if (candidatePath.includes(\"\\0\")) {\n    throw new HttpError(`${label} contains an invalid character`, 400);\n  }\n\n  if (parentDirs.length === 0) {\n    throw new HttpError(`No allowed directories configured for ${label}`, 500);\n  }\n\n  const parent = path.resolve(parentDirs[0] ?? \".\");\n  const resolved = path.isAbsolute(candidatePath)\n    ? path.resolve(candidatePath)\n    : path.resolve(parent, candidatePath);\n\n  if (!isPathInsideAny(parentDirs, resolved)) {\n    throw new HttpError(`${label} escapes the allowed directory`, 400);\n  }\n\n  return resolved;\n}\n\nexport function resolveUrlPathInside(\n  parentDir: string,\n  requestUrl: string,\n  label = \"path\",\n): string {\n  const rawPath = requestUrl.split(/[?#]/, 1)[0] || \"/\";\n  let pathname = decodeUrlComponent(rawPath, label);\n\n  pathname = pathname.replaceAll(\"\\\\\", \"/\");\n  if (pathname.split(\"/\").includes(\"..\")) {\n    throw new HttpError(`${label} must not contain parent directory segments`, 400);\n  }\n\n  const relativePath = `.${pathname}`;\n  return resolveInside(parentDir, relativePath, label);\n}\n\nexport function decodeUrlComponent(value: string, label = \"path\"): string {\n  try {\n    return decodeURIComponent(value);\n  } catch {\n    throw new HttpError(`${label} is not valid URL encoding`, 400);\n  }\n}\n\nexport function collectRequestBody(\n  req: IncomingMessage,\n  limit = DEFAULT_API_BODY_LIMIT_BYTES,\n): Promise<string> {\n  return new Promise((resolve, reject) => {\n    let body = \"\";\n    let size = 0;\n    let completed = false;\n\n    req.on(\"data\", (chunk: Buffer | string) => {\n      if (completed) return;\n\n      const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);\n      size += buffer.byteLength;\n      if (size > limit) {\n        completed = true;\n        reject(new HttpError(`Request body exceeds ${limit} bytes`, 413));\n        return;\n      }\n\n      body += buffer.toString(\"utf-8\");\n    });\n\n    req.on(\"end\", () => {\n      if (!completed) {\n        completed = true;\n        resolve(body);\n      }\n    });\n\n    req.on(\"error\", (error) => {\n      if (!completed) {\n        completed = true;\n        reject(error);\n      }\n    });\n  });\n}\n\nexport function parseJsonBody<T = unknown>(body: string): T {\n  try {\n    return JSON.parse(body) as T;\n  } catch (error) {\n    if (error instanceof SyntaxError) {\n      throw new HttpError(\"Malformed JSON body\", 400);\n    }\n    throw error;\n  }\n}\n\nexport function validateDevApiRequest(\n  req: IncomingMessage,\n  sessionToken: string,\n): HttpError | null {\n  const originError = validateOrigin(req);\n  if (originError) return originError;\n\n  if (!isUnsafeMethod(req.method)) {\n    return null;\n  }\n\n  if (!hasValidSessionToken(req, sessionToken)) {\n    return new HttpError(\"Invalid Musea dev session token\", 403);\n  }\n\n  if (!isJsonRequest(req)) {\n    return new HttpError(\"Content-Type must be application/json\", 415);\n  }\n\n  return null;\n}\n\nexport function serializeScriptValue(value: unknown): string {\n  return (JSON.stringify(value) ?? \"undefined\").replace(/[<>&\\u2028\\u2029]/g, (char) => {\n    switch (char) {\n      case \"<\":\n        return \"\\\\u003C\";\n      case \">\":\n        return \"\\\\u003E\";\n      case \"&\":\n        return \"\\\\u0026\";\n      case \"\\u2028\":\n        return \"\\\\u2028\";\n      case \"\\u2029\":\n        return \"\\\\u2029\";\n      default:\n        return char;\n    }\n  });\n}\n\nfunction isUnsafeMethod(method: string | undefined): boolean {\n  return method === \"POST\" || method === \"PUT\" || method === \"PATCH\" || method === \"DELETE\";\n}\n\nfunction isJsonRequest(req: IncomingMessage): boolean {\n  const contentType = getHeader(req, \"content-type\");\n  return contentType?.split(\";\")[0]?.trim().toLowerCase() === \"application/json\";\n}\n\nfunction validateOrigin(req: IncomingMessage): HttpError | null {\n  const secFetchSite = getHeader(req, \"sec-fetch-site\");\n  if (secFetchSite === \"cross-site\") {\n    return new HttpError(\"Cross-origin Musea API requests are not allowed\", 403);\n  }\n\n  const origin = getHeader(req, \"origin\");\n  if (!origin) return null;\n\n  const host = getHeader(req, \"host\");\n  if (!host) {\n    return new HttpError(\"Missing Host header\", 400);\n  }\n\n  try {\n    const originUrl = new URL(origin);\n    if (originUrl.host !== host) {\n      return new HttpError(\"Cross-origin Musea API requests are not allowed\", 403);\n    }\n  } catch {\n    return new HttpError(\"Invalid Origin header\", 400);\n  }\n\n  return null;\n}\n\nfunction hasValidSessionToken(req: IncomingMessage, expectedToken: string): boolean {\n  const actualToken = getHeader(req, \"x-musea-session\");\n  if (!actualToken) return false;\n\n  const actual = Buffer.from(actualToken);\n  const expected = Buffer.from(expectedToken);\n  return actual.length === expected.length && timingSafeEqual(actual, expected);\n}\n\nfunction getHeader(req: IncomingMessage, name: string): string | undefined {\n  const value = req.headers[name];\n  if (Array.isArray(value)) return value[0];\n  return value;\n}\n","import { serializeScriptValue } from \"../security.js\";\nimport type { MuseaTokenPreviewConfig } from \"../tokens/preview.js\";\n\nexport interface MuseaGalleryGlobals {\n  basePath: string;\n  devSessionToken?: string;\n  staticPreviews?: Record<string, Record<string, string>>;\n  themeConfig?: { default: string; custom?: Record<string, unknown> };\n  tokenPreviewConfig?: MuseaTokenPreviewConfig;\n}\n\nexport function generateGalleryGlobalsScript(globals: MuseaGalleryGlobals): string {\n  const parts = [`window.__MUSEA_BASE_PATH__=${serializeScriptValue(globals.basePath)};`];\n  if (globals.devSessionToken !== undefined) {\n    parts.push(`window.__MUSEA_SESSION_TOKEN__=${serializeScriptValue(globals.devSessionToken)};`);\n  }\n  if (globals.staticPreviews !== undefined) {\n    parts.push(\"window.__MUSEA_STATIC__=true;\");\n    parts.push(`window.__MUSEA_STATIC_PREVIEWS__=${serializeScriptValue(globals.staticPreviews)};`);\n  }\n  if (globals.themeConfig) {\n    parts.push(`window.__MUSEA_THEME_CONFIG__=${serializeScriptValue(globals.themeConfig)};`);\n  }\n  if (globals.tokenPreviewConfig) {\n    parts.push(\n      `window.__MUSEA_TOKEN_PREVIEWS__=${serializeScriptValue(globals.tokenPreviewConfig)};`,\n    );\n  }\n  return parts.join(\"\");\n}\n\nexport function generateDevGlobalsScript(\n  basePath: string,\n  devSessionToken: string,\n  themeConfig?: MuseaGalleryGlobals[\"themeConfig\"],\n  tokenPreviewConfig?: MuseaTokenPreviewConfig,\n): string {\n  return generateGalleryGlobalsScript({\n    basePath,\n    devSessionToken,\n    themeConfig,\n    tokenPreviewConfig,\n  });\n}\n","import { serializeScriptValue } from \"../security.js\";\n\nexport function generateGalleryModule(basePath: string): string {\n  return `\nexport const basePath = ${serializeScriptValue(basePath)};\nexport async function loadArts() {\n  const res = await fetch(basePath + '/api/arts');\n  return res.json();\n}\n`;\n}\n","/**\n * HTML structure and inline JS generation for the Musea gallery.\n *\n * Extracted from gallery.ts to keep file sizes manageable.\n */\n\nimport { serializeScriptValue } from \"../security.js\";\n\nfunction escapeHtmlAttribute(value: string): string {\n  return value.replace(/[&<>\"']/g, (char) => {\n    switch (char) {\n      case \"&\":\n        return \"&amp;\";\n      case \"<\":\n        return \"&lt;\";\n      case \">\":\n        return \"&gt;\";\n      case '\"':\n        return \"&quot;\";\n      case \"'\":\n        return \"&#39;\";\n      default:\n        return char;\n    }\n  });\n}\n\n/**\n * Generate the gallery HTML body (header, sidebar, content, and inline script).\n */\nexport function generateGalleryBody(basePath: string): string {\n  const escapedBasePath = escapeHtmlAttribute(basePath);\n\n  return `\n  <header class=\"header\">\n    <div class=\"header-left\">\n      <a href=\"${escapedBasePath}\" class=\"logo\">\n        <svg class=\"logo-svg\" width=\"32\" height=\"32\" viewBox=\"0 0 200 200\" fill=\"none\">\n          <g transform=\"translate(30, 25) scale(1.2)\">\n            <g transform=\"translate(15, 10) skewX(-15)\">\n              <path d=\"M 65 0 L 40 60 L 70 20 L 65 0 Z\" fill=\"currentColor\"/>\n              <path d=\"M 20 0 L 40 60 L 53 13 L 20 0 Z\" fill=\"currentColor\"/>\n            </g>\n          </g>\n          <g transform=\"translate(110, 120)\">\n            <line x1=\"5\" y1=\"10\" x2=\"5\" y2=\"50\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n            <line x1=\"60\" y1=\"10\" x2=\"60\" y2=\"50\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n            <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\"/>\n            <rect x=\"15\" y=\"18\" width=\"14\" height=\"12\" rx=\"1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" opacity=\"0.7\"/>\n            <rect x=\"36\" y=\"18\" width=\"14\" height=\"12\" rx=\"1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" opacity=\"0.7\"/>\n            <rect x=\"23\" y=\"35\" width=\"18\" height=\"12\" rx=\"1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" opacity=\"0.6\"/>\n          </g>\n        </svg>\n        Musea\n      </a>\n      <span class=\"header-subtitle\">Component Gallery</span>\n    </div>\n    <div class=\"search-container\">\n      <svg class=\"search-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/>\n      </svg>\n      <input type=\"text\" class=\"search-input\" placeholder=\"Search components...\" id=\"search\">\n    </div>\n  </header>\n\n  <main class=\"main\">\n    <aside class=\"sidebar\" id=\"sidebar\">\n      <div class=\"loading\">\n        <div class=\"loading-spinner\"></div>\n        Loading...\n      </div>\n    </aside>\n    <section class=\"content\" id=\"content\">\n      <div class=\"empty-state\">\n        <div class=\"empty-state-icon\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n            <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\"/>\n            <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\"/>\n            <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\"/>\n          </svg>\n        </div>\n        <div class=\"empty-state-title\">Select a component</div>\n        <div class=\"empty-state-text\">Choose a component from the sidebar to view its variants and documentation</div>\n      </div>\n    </section>\n  </main>`;\n}\n\n/**\n * Generate the gallery inline script (SPA logic).\n */\nexport function generateGalleryScript(basePath: string): string {\n  return `\n    const basePath = ${serializeScriptValue(basePath)};\n    let arts = [];\n    let selectedArt = null;\n    let searchQuery = '';\n\n    async function loadArts() {\n      try {\n        const res = await fetch(basePath + '/api/arts');\n        arts = await res.json();\n        renderSidebar();\n      } catch (e) {\n        console.error('Failed to load arts:', e);\n        document.getElementById('sidebar').innerHTML = '<div class=\"loading\">Failed to load</div>';\n      }\n    }\n\n    function renderSidebar() {\n      const sidebar = document.getElementById('sidebar');\n      const categories = {};\n\n      const filtered = searchQuery\n        ? arts.filter(a => a.metadata.title.toLowerCase().includes(searchQuery.toLowerCase()))\n        : arts;\n\n      for (const art of filtered) {\n        const cat = art.metadata.category || 'Components';\n        if (!categories[cat]) categories[cat] = [];\n        categories[cat].push(art);\n      }\n\n      if (Object.keys(categories).length === 0) {\n        sidebar.innerHTML = '<div class=\"sidebar-section\"><div class=\"loading\">No components found</div></div>';\n        return;\n      }\n\n      let html = '';\n      for (const [category, items] of Object.entries(categories)) {\n        const escapedCategory = escapeHtml(category);\n        html += '<div class=\"sidebar-section\">';\n        html += '<div class=\"category-header\" data-category=\"' + escapedCategory + '\">';\n        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>';\n        html += '<span>' + escapedCategory + '</span>';\n        html += '<span class=\"category-count\">' + items.length + '</span>';\n        html += '</div>';\n        html += '<ul class=\"art-list\" data-category=\"' + escapedCategory + '\">';\n        for (const art of items) {\n          const active = selectedArt?.path === art.path ? 'active' : '';\n          const variantCount = art.variants?.length || 0;\n          html += '<li class=\"art-item ' + active + '\" data-path=\"' + escapeHtml(art.path) + '\">';\n          html += '<span>' + escapeHtml(art.metadata.title) + '</span>';\n          html += '<span class=\"art-variant-count\">' + variantCount + ' variant' + (variantCount !== 1 ? 's' : '') + '</span>';\n          html += '</li>';\n        }\n        html += '</ul>';\n        html += '</div>';\n      }\n\n      sidebar.innerHTML = html;\n\n      sidebar.querySelectorAll('.art-item').forEach(item => {\n        item.addEventListener('click', () => {\n          const artPath = item.dataset.path;\n          selectedArt = arts.find(a => a.path === artPath);\n          renderSidebar();\n          renderContent();\n        });\n      });\n\n      sidebar.querySelectorAll('.category-header').forEach(header => {\n        header.addEventListener('click', () => {\n          header.classList.toggle('collapsed');\n          const list = header.parentElement?.querySelector('.art-list');\n          if (list) list.style.display = header.classList.contains('collapsed') ? 'none' : 'block';\n        });\n      });\n    }\n\n    function renderContent() {\n      const content = document.getElementById('content');\n      if (!selectedArt) {\n        content.innerHTML = \\`\n          <div class=\"empty-state\">\n            <div class=\"empty-state-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                <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\"/>\n                <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\"/>\n                <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\"/>\n              </svg>\n            </div>\n            <div class=\"empty-state-title\">Select a component</div>\n            <div class=\"empty-state-text\">Choose a component from the sidebar to view its variants</div>\n          </div>\n        \\`;\n        return;\n      }\n\n      const meta = selectedArt.metadata;\n      const tags = meta.tags || [];\n      const variantCount = selectedArt.variants?.length || 0;\n\n      let html = '<div class=\"content-inner\">';\n      html += '<div class=\"content-header\">';\n      html += '<h1 class=\"content-title\">' + escapeHtml(meta.title) + '</h1>';\n      if (meta.description) {\n        html += '<p class=\"content-description\">' + escapeHtml(meta.description) + '</p>';\n      }\n      html += '<div class=\"content-meta\">';\n      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>';\n      if (meta.category) {\n        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>';\n      }\n      for (const tag of tags) {\n        html += '<span class=\"meta-tag\">#' + escapeHtml(tag) + '</span>';\n      }\n      html += '</div>';\n      html += '</div>';\n\n      html += '<div class=\"gallery\">';\n      for (const variant of selectedArt.variants) {\n        const previewUrl = basePath + '/preview?art=' + encodeURIComponent(selectedArt.path) + '&variant=' + encodeURIComponent(variant.name);\n        const escapedPreviewUrl = escapeHtml(previewUrl);\n\n        html += '<div class=\"variant-card\">';\n        html += '<div class=\"variant-preview\">';\n        html += '<iframe src=\"' + escapedPreviewUrl + '\" loading=\"lazy\" title=\"' + escapeHtml(variant.name) + '\"></iframe>';\n        html += '</div>';\n        html += '<div class=\"variant-info\">';\n        html += '<div>';\n        html += '<span class=\"variant-name\">' + escapeHtml(variant.name) + '</span>';\n        if (variant.isDefault) html += ' <span class=\"variant-badge\">Default</span>';\n        html += '</div>';\n        html += '<div class=\"variant-actions\">';\n        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>';\n        html += '</div>';\n        html += '</div>';\n        html += '</div>';\n      }\n      html += '</div>';\n      html += '</div>';\n\n      content.innerHTML = html;\n\n      content.querySelectorAll('.variant-action-btn[data-preview-url]').forEach(button => {\n        button.addEventListener('click', () => {\n          const previewUrl = button.dataset.previewUrl;\n          if (previewUrl) window.open(previewUrl, '_blank', 'noopener');\n        });\n      });\n    }\n\n    function escapeHtml(str) {\n      if (!str) return '';\n      return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#39;');\n    }\n\n    // Search\n    document.getElementById('search').addEventListener('input', (e) => {\n      searchQuery = e.target.value;\n      renderSidebar();\n    });\n\n    // Keyboard shortcut for search\n    document.addEventListener('keydown', (e) => {\n      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {\n        e.preventDefault();\n        document.getElementById('search').focus();\n      }\n    });\n\n    loadArts();`;\n}\n"],"mappings":"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"}