@vizejs/vite-plugin-musea 0.212.0 → 0.214.0

package/dist/index.mjs

@@ -876,63 +876,70 @@ function generatePreviewHtml(art, variant, _basePath, viteBase) {
   <title>${escapeHtml(art.metadata.title)} - ${escapeHtml(variant.name)}</title>
   <script type="module" src="${base}/@vite/client"><\/script>
   <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    :root {
-      --musea-preview-padding: clamp(1rem, 2vw, 1.5rem);
-    }
-    html, body {
-      width: 100%;
-      height: 100%;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #ffffff;
-      padding: var(--musea-preview-padding);
-      overflow: auto;
-    }
-    .musea-variant {
-      width: 100%;
-      min-height: calc(100vh - (var(--musea-preview-padding) * 2));
-    }
-    .musea-error {
-      color: #dc2626;
-      background: #fef2f2;
-      border: 1px solid #fecaca;
-      border-radius: 8px;
-      padding: 1rem;
-      font-size: 0.875rem;
-      max-width: 400px;
-    }
-    .musea-error-title {
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-    }
-    .musea-error pre {
-      font-family: monospace;
-      font-size: 0.75rem;
-      white-space: pre-wrap;
-      word-break: break-all;
-      margin-top: 0.5rem;
-      padding: 0.5rem;
-      background: #fff;
-      border-radius: 4px;
-    }
-    .musea-loading {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      color: #6b7280;
-      font-size: 0.875rem;
-    }
-    .musea-spinner {
-      width: 20px;
-      height: 20px;
-      border: 2px solid #e5e7eb;
-      border-top-color: #3b82f6;
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
+    @layer musea-preview {
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      :root {
+        --musea-preview-padding: clamp(1rem, 2vw, 1.5rem);
+      }
+      html, body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        background: #ffffff;
+        padding: var(--musea-preview-padding);
+        overflow: auto;
+      }
+      .musea-variant {
+        width: 100%;
+        min-height: calc(100vh - (var(--musea-preview-padding) * 2));
+      }
+      .musea-error {
+        color: #dc2626;
+        background: #fef2f2;
+        border: 1px solid #fecaca;
+        border-radius: 8px;
+        padding: 1rem;
+        font-size: 0.875rem;
+        max-width: 400px;
+      }
+      .musea-error-title {
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+      }
+      .musea-error pre {
+        font-family: monospace;
+        font-size: 0.75rem;
+        white-space: pre-wrap;
+        word-break: break-all;
+        margin-top: 0.5rem;
+        padding: 0.5rem;
+        background: #fff;
+        border-radius: 4px;
+      }
+      .musea-loading {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        color: #6b7280;
+        font-size: 0.875rem;
+      }
+      .musea-spinner {
+        width: 20px;
+        height: 20px;
+        border: 2px solid #e5e7eb;
+        border-top-color: #3b82f6;
+        border-radius: 50%;
+        animation: musea-preview-spin 0.8s linear infinite;
+      }
     }
-    @keyframes spin { to { transform: rotate(360deg); } }
+    @keyframes musea-preview-spin { to { transform: rotate(360deg); } }
 
     /* Musea Addons: Checkerboard background for transparent mode */
     .musea-bg-checkerboard {
@@ -1483,6 +1490,220 @@ function nullRecord(record) {
 	return Object.assign(Object.create(null), record);
 }
 //#endregion
+//#region src/tokens/tailwind.ts
+const TAILWIND_TOKEN_EXTENSIONS = new Set([
+	".css",
+	".pcss",
+	".postcss"
+]);
+const VARIABLE_DECLARATION_RE = /(--[A-Za-z0-9_-]+)\s*:\s*([^;{}]+);/g;
+const CSS_COMMENT_RE = /\/\*[\s\S]*?\*\//g;
+const NAMESPACE_MAPPINGS = [
+	{
+		prefix: "inset-shadow",
+		category: "shadow",
+		pathPrefix: ["inset"],
+		type: "shadow"
+	},
+	{
+		prefix: "drop-shadow",
+		category: "shadow",
+		pathPrefix: ["drop"],
+		type: "shadow"
+	},
+	{
+		prefix: "font-weight",
+		category: "typography",
+		pathPrefix: ["fontWeight"],
+		type: "fontWeight"
+	},
+	{
+		prefix: "color",
+		category: "color",
+		type: "color"
+	},
+	{
+		prefix: "spacing",
+		category: "spacing",
+		type: "dimension"
+	},
+	{
+		prefix: "font",
+		category: "typography",
+		pathPrefix: ["font"],
+		type: "fontFamily"
+	},
+	{
+		prefix: "text",
+		category: "typography",
+		pathPrefix: ["fontSize"],
+		type: "dimension"
+	},
+	{
+		prefix: "leading",
+		category: "typography",
+		pathPrefix: ["lineHeight"],
+		type: "number"
+	},
+	{
+		prefix: "tracking",
+		category: "typography",
+		pathPrefix: ["letterSpacing"],
+		type: "dimension"
+	},
+	{
+		prefix: "radius",
+		category: "radius",
+		type: "dimension"
+	},
+	{
+		prefix: "shadow",
+		category: "shadow",
+		type: "shadow"
+	},
+	{
+		prefix: "breakpoint",
+		category: "breakpoint",
+		type: "dimension"
+	},
+	{
+		prefix: "container",
+		category: "container",
+		type: "dimension"
+	},
+	{
+		prefix: "ease",
+		category: "easing",
+		type: "cubicBezier"
+	},
+	{
+		prefix: "animate",
+		category: "animation",
+		type: "transition"
+	},
+	{
+		prefix: "blur",
+		category: "blur",
+		type: "dimension"
+	},
+	{
+		prefix: "perspective",
+		category: "perspective",
+		type: "dimension"
+	},
+	{
+		prefix: "aspect",
+		category: "aspectRatio",
+		type: "number"
+	}
+];
+async function isTailwindTokenPath(tokensPath) {
+	const stat = await fs.promises.stat(tokensPath).catch(() => null);
+	if (!stat) return false;
+	if (stat.isFile()) return TAILWIND_TOKEN_EXTENSIONS.has(path.extname(tokensPath));
+	if (!stat.isDirectory()) return false;
+	return (await fs.promises.readdir(tokensPath, { withFileTypes: true })).some((entry) => entry.isFile() && TAILWIND_TOKEN_EXTENSIONS.has(path.extname(entry.name)));
+}
+async function parseTailwindTokens(tokensPath) {
+	const files = await collectTailwindTokenFiles(tokensPath);
+	const candidates = [];
+	for (const file of files) {
+		const css = await fs.promises.readFile(file, "utf-8");
+		candidates.push(...extractTailwindTokenCandidates(css));
+	}
+	return normalizeCategories(buildCategories(candidates));
+}
+async function collectTailwindTokenFiles(tokensPath) {
+	if ((await fs.promises.stat(tokensPath)).isFile()) return [tokensPath];
+	return (await fs.promises.readdir(tokensPath, { withFileTypes: true })).filter((entry) => entry.isFile() && TAILWIND_TOKEN_EXTENSIONS.has(path.extname(entry.name))).map((entry) => path.join(tokensPath, entry.name)).sort();
+}
+function extractTailwindTokenCandidates(css) {
+	const source = css.replace(CSS_COMMENT_RE, "");
+	const candidates = [];
+	let match;
+	VARIABLE_DECLARATION_RE.lastIndex = 0;
+	while ((match = VARIABLE_DECLARATION_RE.exec(source)) !== null) {
+		const variable = match[1];
+		const value = match[2].trim();
+		const mapped = mapTailwindVariable(variable);
+		if (!mapped || !value) continue;
+		candidates.push({
+			variable,
+			value,
+			...mapped
+		});
+	}
+	return candidates;
+}
+function mapTailwindVariable(variable) {
+	const name = variable.replace(/^--/, "");
+	const mapping = NAMESPACE_MAPPINGS.find((candidate) => name === candidate.prefix || name.startsWith(`${candidate.prefix}-`));
+	if (!mapping) return null;
+	const rest = name === mapping.prefix ? "DEFAULT" : name.slice(mapping.prefix.length + 1);
+	const pathParts = [...mapping.pathPrefix ?? [], ...tailwindNameToPath(rest)];
+	if (pathParts.length === 0) return null;
+	return {
+		category: mapping.category,
+		path: pathParts,
+		type: mapping.type
+	};
+}
+function tailwindNameToPath(name) {
+	if (!name || name === "DEFAULT") return ["DEFAULT"];
+	const parts = name.split("-").filter(Boolean);
+	if (parts.length <= 1) return parts;
+	const last = parts[parts.length - 1];
+	if (/^\d+$/.test(last)) return [...parts.slice(0, -1), last];
+	return [parts.join("-")];
+}
+function buildCategories(candidates) {
+	const variableToPath = /* @__PURE__ */ new Map();
+	for (const candidate of candidates) variableToPath.set(candidate.variable, [candidate.category, ...candidate.path].join("."));
+	const categoryMap = /* @__PURE__ */ new Map();
+	for (const candidate of candidates) {
+		const category = categoryMap.get(candidate.category) ?? {
+			name: candidate.category,
+			tokens: nullRecord({})
+		};
+		categoryMap.set(candidate.category, category);
+		const valueReference = parseTailwindVariableReference(candidate.value);
+		const referencedPath = valueReference ? variableToPath.get(valueReference) : void 0;
+		const token = {
+			value: referencedPath ? `{${referencedPath}}` : candidate.value,
+			type: candidate.type,
+			description: `Tailwind theme variable ${candidate.variable}`,
+			attributes: { tailwindVariable: candidate.variable },
+			$tier: referencedPath ? "semantic" : "primitive",
+			...referencedPath ? { $reference: referencedPath } : {}
+		};
+		setCategoryToken(category, candidate.path, token);
+	}
+	return [...categoryMap.values()];
+}
+function parseTailwindVariableReference(value) {
+	return value.match(/^var\(\s*(--[A-Za-z0-9_-]+)\s*(?:,[^)]+)?\)$/)?.[1];
+}
+function setCategoryToken(category, pathParts, token) {
+	if (pathParts.length === 1) {
+		category.tokens[pathParts[0]] = token;
+		return;
+	}
+	let current = category;
+	for (const part of pathParts.slice(0, -1)) {
+		current.subcategories ??= [];
+		let next = current.subcategories.find((subcategory) => subcategory.name === part);
+		if (!next) {
+			next = {
+				name: part,
+				tokens: nullRecord({})
+			};
+			current.subcategories.push(next);
+		}
+		current = next;
+	}
+	current.tokens[pathParts[pathParts.length - 1]] = token;
+}
+//#endregion
 //#region src/tokens/parser.ts
 /**
 * Token parsing utilities for Style Dictionary integration.
@@ -1490,9 +1711,10 @@ function nullRecord(record) {
 * Thin native binding for design token files (JSON) and directories.
 */
 /**
-* Parse Style Dictionary tokens file or directory.
+* Parse Style Dictionary tokens file/directory or Tailwind CSS theme variables.
 */
 async function parseTokens(tokensPath) {
+	if (await isTailwindTokenPath(tokensPath)) return parseTailwindTokens(tokensPath);
 	return normalizeCategories(tokenNative().parseDesignTokensFromPath(tokensPath));
 }
 //#endregion
@@ -1532,6 +1754,13 @@ function scanTokenUsage(artFiles, tokenMap) {
 		const existing = valueLookup.get(normalized);
 		if (existing) existing.push(tokenPath);
 		else valueLookup.set(normalized, [tokenPath]);
+		const tailwindVariable = token.attributes?.tailwindVariable;
+		if (typeof tailwindVariable === "string") {
+			const normalizedVariable = normalizeTokenValue(`var(${tailwindVariable})`);
+			const variableMatches = valueLookup.get(normalizedVariable);
+			if (variableMatches) variableMatches.push(tokenPath);
+			else valueLookup.set(normalizedVariable, [tokenPath]);
+		}
 	}
 	const usageMap = {};
 	for (const [artPath, artInfo] of artFiles) {
@@ -1600,6 +1829,7 @@ function scanTokenUsage(artFiles, tokenMap) {
 * Handles building flat token maps from categories, resolving reference chains,
 * reading/writing raw token files, and validating semantic references.
 */
+const JSON_TOKEN_EXTENSIONS = new Set([".json", ".tokens.json"]);
 const UNSAFE_TOKEN_PATH_SEGMENTS = new Set([
 	"__proto__",
 	"prototype",
@@ -1629,6 +1859,7 @@ function resolveReferences(categories, _tokenMap) {
 * Read raw JSON token file.
 */
 async function readRawTokenFile(tokensPath) {
+	if (!isJsonTokenPath(tokensPath)) throw new Error("Token editing is only supported for JSON token files");
 	const content = await fs.promises.readFile(tokensPath, "utf-8");
 	return JSON.parse(content);
 }
@@ -1636,10 +1867,14 @@ async function readRawTokenFile(tokensPath) {
 * Write raw JSON token file atomically (write tmp, rename).
 */
 async function writeRawTokenFile(tokensPath, data) {
+	if (!isJsonTokenPath(tokensPath)) throw new Error("Token editing is only supported for JSON token files");
 	const tmpPath = tokensPath + ".tmp";
 	await fs.promises.writeFile(tmpPath, JSON.stringify(data, null, 2) + "\n", "utf-8");
 	await fs.promises.rename(tmpPath, tokensPath);
 }
+function isJsonTokenPath(tokensPath) {
+	return JSON_TOKEN_EXTENSIONS.has(path.extname(tokensPath)) || tokensPath.endsWith(".tokens.json");
+}
 /**
 * Set a token at a dot-separated path in the raw JSON structure.
 */
@@ -1707,7 +1942,7 @@ function findDependentTokens(tokenMap, targetPath) {
 * Generates HTML, Markdown, and JSON documentation from parsed token categories,
 * and provides the main processStyleDictionary orchestrator function.
 */
-const SAFE_CSS_COLOR_PATTERN = /^(?:#[0-9a-fA-F]{3,8}|(?:rgb|hsl)a?\(\s*[-+.\d,%\s]+\))$/;
+const SAFE_CSS_COLOR_PATTERN = /^(?:#[0-9a-fA-F]{3,8}|(?:rgb|hsl)a?\(\s*[-+.\d,%\s/]+\)|(?:oklch|oklab|lab|lch)\(\s*[-+.\d,%\s/]+\))$/;
 const DANGEROUS_PROTOCOL_PATTERN = /\b(javascript|vbscript):/gi;
 function escapeTokenText(value) {
 	return escapeHtml(value).replace(DANGEROUS_PROTOCOL_PATTERN, "$1&#58;");
@@ -1879,7 +2114,7 @@ function sendTokenMutationError(e, sendError) {
 		sendError(e.message, e.status);
 		return;
 	}
-	if (e instanceof Error && /token path/i.test(e.message)) {
+	if (e instanceof Error && /(token path|token editing)/i.test(e.message)) {
 		sendError(e.message, 400);
 		return;
 	}
@@ -2080,56 +2315,123 @@ async function handleArtPalette(ctx, match, sendJson, sendError) {
 			json: "{}",
 			typescript: ""
 		};
-		if (palette.controls.length === 0) {
-			const resolvedComponentPath = resolveComponentSourcePath(art, artPath, allowedSourceRoots(ctx.config.root, ctx.scanRoots));
-			if (!resolvedComponentPath) {
-				sendJson(palette);
-				return;
-			}
-			try {
-				const componentSource = await fs.promises.readFile(resolvedComponentPath, "utf-8");
-				const analysis = binding.analyzeSfc ? binding.analyzeSfc(componentSource, { filename: resolvedComponentPath }) : analyzeSfcFallback(componentSource, { filename: resolvedComponentPath });
-				if (analysis.props.length > 0) {
-					palette.controls = analysis.props.map((prop) => {
-						let control = "text";
-						if (prop.type === "boolean") control = "boolean";
-						else if (prop.type === "number") control = "number";
-						else if (prop.type.includes("|") && !prop.type.includes("=>")) control = "select";
-						const options = [];
-						if (control === "select") {
-							const optionMatches = prop.type.match(/"([^"]+)"/g);
-							if (optionMatches) for (const opt of optionMatches) {
-								const val = opt.replace(/"/g, "");
-								options.push({
-									label: val,
-									value: val
-								});
-							}
-						}
-						return {
-							name: prop.name,
-							control,
-							default_value: prop.default_value !== void 0 ? prop.default_value === "true" ? true : prop.default_value === "false" ? false : typeof prop.default_value === "string" && prop.default_value.startsWith("\"") ? prop.default_value.replace(/^"|"$/g, "") : prop.default_value : void 0,
-							description: void 0,
-							required: prop.required,
-							options,
-							range: void 0,
-							group: void 0
-						};
-					});
-					palette.json = JSON.stringify({
-						title: palette.title,
-						controls: palette.controls
-					}, null, 2);
-					palette.typescript = `export interface ${palette.title}Props {\n${palette.controls.map((c) => `  ${c.name}${c.required ? "" : "?"}: ${c.control === "boolean" ? "boolean" : c.control === "number" ? "number" : c.control === "select" ? c.options.map((o) => `"${String(o.value)}"`).join(" | ") : "string"};`).join("\n")}\n}\n`;
-				}
-			} catch {}
+		const resolvedComponentPath = resolveComponentSourcePath(art, artPath, allowedSourceRoots(ctx.config.root, ctx.scanRoots));
+		if (!resolvedComponentPath) {
+			sendJson(palette);
+			return;
 		}
+		try {
+			const componentSource = await fs.promises.readFile(resolvedComponentPath, "utf-8");
+			const analysis = binding.analyzeSfc ? binding.analyzeSfc(componentSource, { filename: resolvedComponentPath }) : analyzeSfcFallback(componentSource, { filename: resolvedComponentPath });
+			if (analysis.props.length > 0) mergeSfcPropsIntoPalette(palette, analysis.props);
+		} catch {}
 		sendJson(palette);
 	} catch (e) {
 		sendError(e instanceof Error ? e.message : String(e));
 	}
 }
+function mergeSfcPropsIntoPalette(palette, props) {
+	const controlsByName = /* @__PURE__ */ new Map();
+	for (const control of palette.controls) controlsByName.set(normalizePropName(control.name), control);
+	for (const prop of props) {
+		const control = controlsByName.get(normalizePropName(prop.name));
+		if (control) applyPropMetadata(control, prop);
+		else palette.controls.push(controlFromProp(prop));
+	}
+	palette.json = JSON.stringify({
+		title: palette.title,
+		controls: palette.controls
+	}, null, 2);
+	palette.typescript = generateTypescript(palette);
+}
+function applyPropMetadata(control, prop) {
+	const inferred = inferControl(prop.type);
+	control.name = prop.name;
+	control.required = prop.required;
+	if (control.default_value === void 0 && prop.default_value !== void 0) control.default_value = parseDefault(prop.default_value);
+	if (inferred.control !== "text" || control.control === "text") control.control = inferred.control;
+	if (inferred.options.length > 0) control.options = inferred.options;
+}
+function controlFromProp(prop) {
+	const inferred = inferControl(prop.type);
+	return {
+		name: prop.name,
+		control: inferred.control,
+		default_value: prop.default_value === void 0 ? void 0 : parseDefault(prop.default_value),
+		description: void 0,
+		required: prop.required,
+		options: inferred.options,
+		range: void 0,
+		group: void 0
+	};
+}
+function inferControl(type) {
+	const normalized = type.trim();
+	const options = literalOptions(normalized);
+	if (options.length > 0) return {
+		control: "select",
+		options
+	};
+	if (normalized === "boolean") return {
+		control: "boolean",
+		options: []
+	};
+	if (normalized === "number") return {
+		control: "number",
+		options: []
+	};
+	if (normalized.includes("[]") || normalized.startsWith("Array<")) return {
+		control: "array",
+		options: []
+	};
+	if (normalized.startsWith("{") || normalized.startsWith("Record<")) return {
+		control: "object",
+		options: []
+	};
+	return {
+		control: "text",
+		options: []
+	};
+}
+function literalOptions(type) {
+	if (!type.includes("|") || type.includes("=>")) return [];
+	return type.split("|").map((part) => part.trim()).map((part) => {
+		const stringMatch = part.match(/^["']([^"']+)["']$/);
+		if (stringMatch) return stringMatch[1];
+		if (part === "true") return true;
+		if (part === "false") return false;
+		const numberValue = Number(part);
+		return Number.isFinite(numberValue) ? numberValue : void 0;
+	}).filter((value) => value !== void 0).map((value) => ({
+		label: String(value),
+		value
+	}));
+}
+function parseDefault(value) {
+	if (typeof value !== "string") return value;
+	if (value === "true") return true;
+	if (value === "false") return false;
+	if (/^-?\d+(?:\.\d+)?$/.test(value)) return Number(value);
+	return value.replace(/^["']|["']$/g, "");
+}
+function normalizePropName(name) {
+	return name.replace(/[-_]/g, "").toLowerCase();
+}
+function generateTypescript(palette) {
+	const fields = palette.controls.map((control) => `  ${control.name}${control.required ? "" : "?"}: ${controlTsType(control)};`).join("\n");
+	return `export interface ${pascalCase(palette.title)}Props {\n${fields}\n}\n`;
+}
+function controlTsType(control) {
+	if (control.control === "boolean") return "boolean";
+	if (control.control === "number" || control.control === "range") return "number";
+	if (control.control === "array") return "unknown[]";
+	if (control.control === "object") return "Record<string, unknown>";
+	if (control.control === "select" && control.options.length > 0) return control.options.map((option) => JSON.stringify(option.value)).join(" | ");
+	return "string";
+}
+function pascalCase(value) {
+	return value.split(/[^A-Za-z0-9]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
 //#endregion
 //#region src/api-routes/handlers.ts
 /**