paintress 0.5.0 → 0.5.2

package/dist/{render-CzpO1cOe.js → render-CCxYNL6A.js}

@@ -1,8 +1,8 @@
 import { createRequire } from "node:module";
 import { copyFileSync, linkSync, mkdirSync, readFileSync, renameSync, statSync, unlinkSync, writeFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
-import { z } from "zod";
 import { basename, dirname, join } from "node:path";
+import { z } from "zod";
 // src/shared/version.ts
 /**
 * 包版本：运行时从 package.json 读取，避免在多处硬编码后忘记同步。
@@ -933,59 +933,92 @@ function isRecord$3(v) {
 function asVarValue(v) {
 	if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return v;
 }
-/** themed 列表 → 无主题项优先，否则首项；字面量直通 */
-function resolveThemed(v) {
+/**
+* themed 列表 → 按当前主题匹配。
+* 规则：主题键全匹配的条目优先（越具体的胜出），其次无主题项，最后首项。
+* 这样 `{value:'#202226', theme:{mode:'dark'}}` 在 dark 下胜出，
+* 而只写了 `{density:'loose'}` 的尺寸条目在 compact 下不会误命中。
+*/
+function resolveThemed(v, theme) {
 	if (Array.isArray(v)) {
 		const entries = v.filter(isRecord$3);
-		const plain = entries.find((e) => e["theme"] === void 0) ?? entries[0];
-		return plain ? asVarValue(plain["value"]) : void 0;
+		if (entries.length === 0) return void 0;
+		let best = null;
+		for (const entry of entries) {
+			const t = entry["theme"];
+			if (t === void 0) {
+				if (best === null) best = {
+					entry,
+					score: 0
+				};
+				continue;
+			}
+			if (!isRecord$3(t)) continue;
+			const keys = Object.keys(t);
+			if (!keys.every((k) => theme[k] === String(t[k]))) continue;
+			if (best === null || keys.length > best.score) best = {
+				entry,
+				score: keys.length
+			};
+		}
+		return best === null ? asVarValue(entries[0]?.["value"]) : asVarValue(best.entry["value"]);
 	}
 	return asVarValue(v);
 }
-function makeVarResolver(doc, warnings) {
+function makeVarResolver(doc, warnings, theme = {}) {
 	const vars = doc.variables ?? {};
-	const lookup = (name) => {
-		const def = vars[name];
-		if (!isRecord$3(def)) return void 0;
-		return resolveThemed(def["value"]);
-	};
-	return {
-		resolve(input) {
-			if (!VARIABLE_NAME.test(input)) return input;
-			const val = lookup(input.slice(1));
-			if (val === void 0) {
-				warnings.push(`未定义变量 ${input}，按原样输出`);
-				return input;
-			}
-			return String(val);
-		},
-		resolveNum(input) {
-			if (typeof input === "number") return input;
-			if (typeof input === "string") {
-				if (!VARIABLE_NAME.test(input)) {
-					const n = Number(input);
-					return Number.isFinite(n) ? n : void 0;
-				}
-				const val = lookup(input.slice(1));
-				if (typeof val === "number") return val;
-				warnings.push(`数字变量 ${input} 解析失败，按缺省处理`);
-				return;
-			}
-		},
-		resolveBool(input) {
-			if (typeof input === "boolean") return input;
-			if (typeof input === "string") {
-				if (!VARIABLE_NAME.test(input)) return input === "true";
+	const make = (scope) => {
+		const lookup = (name) => {
+			const def = vars[name];
+			if (!isRecord$3(def)) return void 0;
+			return resolveThemed(def["value"], scope);
+		};
+		return {
+			resolve(input) {
+				if (!VARIABLE_NAME.test(input)) return input;
 				const val = lookup(input.slice(1));
-				if (typeof val === "boolean") return val;
-				warnings.push(`布尔变量 ${input} 解析失败，按缺省处理`);
-				return;
+				if (val === void 0) {
+					warnings.push(`未定义变量 ${input}，按原样输出`);
+					return input;
+				}
+				return String(val);
+			},
+			resolveNum(input) {
+				if (typeof input === "number") return input;
+				if (typeof input === "string") {
+					if (!VARIABLE_NAME.test(input)) {
+						const n = Number(input);
+						return Number.isFinite(n) ? n : void 0;
+					}
+					const val = lookup(input.slice(1));
+					if (typeof val === "number") return val;
+					warnings.push(`数字变量 ${input} 解析失败，按缺省处理`);
+					return;
+				}
+			},
+			resolveBool(input) {
+				if (typeof input === "boolean") return input;
+				if (typeof input === "string") {
+					if (!VARIABLE_NAME.test(input)) return input === "true";
+					const val = lookup(input.slice(1));
+					if (typeof val === "boolean") return val;
+					warnings.push(`布尔变量 ${input} 解析失败，按缺省处理`);
+					return;
+				}
+			},
+			has(name) {
+				return lookup(name) !== void 0;
+			},
+			theme: () => scope,
+			withTheme(patch) {
+				if (patch === void 0) return make(scope);
+				const next = { ...scope };
+				for (const [k, v] of Object.entries(patch)) if (typeof v === "string") next[k] = v;
+				return make(next);
 			}
-		},
-		has(name) {
-			return lookup(name) !== void 0;
-		}
+		};
 	};
+	return make(theme);
 }
 // src/render/expand.ts
 function isRecord$2(v) {
@@ -1109,16 +1142,26 @@ function stopsToCssList(colors, vars) {
 	}
 	return parts.length > 0 ? parts.join(", ") : void 0;
 }
-/** .pen 逆时针度（0=上，90=左）→ CSS 角（0=上，顺时针正） */
+/**
+* .pen/.ptr 渐变角度 → CSS 角（度）。
+*
+* 基准：`0` = 从左往右（渐变方向指向右），正值顺时针（Figma 那套手感）。
+* 所以 0 → 90deg（to right）、90 → 0deg（to top）、180 → 270deg（to left）、270 → 180deg（to bottom）。
+*
+* 为什么不用「0 指向上」：设计稿里可见的渐变只剩「流光带」（透明→近白→透明，
+* 从左往右飘的光带），它只有按 0=向右 才是一条竖光带；按 0=向上 会变成横着的一大块。
+* 深色「渐隐覆盖」类节点是「同色→自身透明」，两条约定看不出差别，不必为它们拗。
+*/
 function penAngleToCss(deg) {
-	return `${((360 - (deg % 360 + 360) % 360) % 360).toFixed(1)}deg`;
+	return `${(((90 - deg) % 360 + 360) % 360).toFixed(1)}deg`;
 }
-function normCenter(c) {
+function normCenter(c, vars) {
 	if (isRecord$1(c)) {
-		const x = c["x"], y = c["y"];
-		if (typeof x === "number" && typeof y === "number") return {
-			x: `${(x * 100).toFixed(2)}%`,
-			y: `${(y * 100).toFixed(2)}%`
+		const rx = vars?.resolveNum(c["x"]) ?? (typeof c["x"] === "number" ? c["x"] : void 0);
+		const ry = vars?.resolveNum(c["y"]) ?? (typeof c["y"] === "number" ? c["y"] : void 0);
+		if (rx !== void 0 && ry !== void 0) return {
+			x: `${(rx * 100).toFixed(2)}%`,
+			y: `${(ry * 100).toFixed(2)}%`
 		};
 	}
 	return {
@@ -1126,6 +1169,20 @@ function normCenter(c) {
 		y: "50%"
 	};
 }
+/**
+* 径向渐变的椭圆直径（归一化到自身包围盒）→ CSS `ellipse <rx> <ry>`。
+* 缺省返回 null（用 CSS 默认的 farthest-corner）；`{height:1}` 这类只写一边的，
+* 另一边按正方形处理（与 Pencil 的径向渐变一致）。
+*/
+function normSize(size, vars) {
+	if (!isRecord$1(size)) return null;
+	const rw = vars.resolveNum(size["width"]);
+	const rh = vars.resolveNum(size["height"]);
+	if (rw === void 0 && rh === void 0) return null;
+	const w = rw ?? rh ?? 1;
+	const h = rh ?? rw ?? 1;
+	return `${(w * 100).toFixed(2)}% ${(h * 100).toFixed(2)}%`;
+}
 /** fill 集 → background 系列声明。纯色取「最后绘制的」作 background-color（顶层语义） */
 function fillsToCss(fillsRaw, vars, warnings, what) {
 	const entries = Array.isArray(fillsRaw) ? fillsRaw : fillsRaw !== void 0 ? [fillsRaw] : [];
@@ -1138,6 +1195,7 @@ function fillsToCss(fillsRaw, vars, warnings, what) {
 			continue;
 		}
 		if (!isRecord$1(entry)) continue;
+		if (vars.resolveBool(entry["enabled"]) === false) continue;
 		const kind = entry["type"];
 		if (kind === "color") bgColor = colorFromFillEntry(entry, vars);
 		else if (kind === "gradient") {
@@ -1150,8 +1208,9 @@ function fillsToCss(fillsRaw, vars, warnings, what) {
 			const rot = vars.resolveNum(entry["rotation"]) ?? 0;
 			if (gType === "linear") bgImages.push(`linear-gradient(${penAngleToCss(rot)}, ${stops})`);
 			else if (gType === "radial") {
-				const c = normCenter(entry["center"]);
-				bgImages.push(`radial-gradient(ellipse at ${c.x} ${c.y}, ${stops})`);
+				const c = normCenter(entry["center"], vars);
+				const sz = normSize(entry["size"], vars);
+				bgImages.push(sz === null ? `radial-gradient(ellipse at ${c.x} ${c.y}, ${stops})` : `radial-gradient(ellipse ${sz} at ${c.x} ${c.y}, ${stops})`);
 			} else if (gType === "angular") bgImages.push(`conic-gradient(from ${penAngleToCss(rot)} at 50% 50%, ${stops})`);
 			else bgImages.push(`linear-gradient(${penAngleToCss(rot)}, ${stops})`);
 		} else if (kind === "image") {
@@ -1177,16 +1236,37 @@ function fillsToCss(fillsRaw, vars, warnings, what) {
 	if (bgColor !== void 0) decls.unshift(["background-color", bgColor]);
 	return decls;
 }
-/** stroke → border 系列。v1 只支持纯色、均匀或四边宽度；alignment 非 inner 时警告 */
+/**
+* stroke → CSS。
+*
+* 对齐方式决定用哪套 CSS：
+* - `inner`（默认）：`border` 画在盒子内侧 —— 与 Pencil 的 inner 一致；
+* - `outer`：`outline` 画在外侧，且不占布局（不会把内容挤小）；
+* - `center`：`outline` + 负 offset 半个线宽，线心落在盒子边界上。
+*
+* 旧实现一律按 border 画并只发警告，`outer` 的线会整体偏进 1–2px；
+* 设计稿里 outer 比 inner 还多（editor.pen 76 : 26），值得按真实语义画。
+*/
 function strokeToCss(node, vars, warnings, what) {
 	const stroke = node["stroke"];
 	if (stroke === void 0) return [];
-	const entries = Array.isArray(stroke) ? stroke : [stroke];
-	const firstColor = entries.map((e) => colorFromFillEntry(e, vars)).find((c) => c !== void 0);
+	const enabled = (Array.isArray(stroke) ? stroke : [stroke]).filter((e) => !(isRecord$1(e) && e["enabled"] === false));
+	if (enabled.length === 0) return [];
+	const firstColor = enabled.map((e) => colorFromFillEntry(e, vars)).find((c) => c !== void 0);
+	if (firstColor === void 0) return [];
 	const decls = [];
-	if (firstColor !== void 0) decls.push(["border-color", firstColor]);
-	if (entries.length > 1) warnings.push(`${what}: 多层描边仅渲染第一层`);
+	if (enabled.length > 1) warnings.push(`${what}: 多层描边仅渲染第一层`);
+	const alignRaw = node["strokeAlignment"];
+	const align = alignRaw === "outer" || alignRaw === "center" ? alignRaw : "inner";
 	const widthRaw = node["strokeWidth"];
+	if (isRecord$1(widthRaw) && align !== "inner") warnings.push(`${what}: 逐边描边宽度 + strokeAlignment=${align} 暂按 inner（CSS border）渲染`);
+	if (!isRecord$1(widthRaw) && align !== "inner") {
+		const w = vars.resolveNum(widthRaw) ?? 1;
+		decls.push(["outline", `${w}px solid ${firstColor}`]);
+		decls.push(["outline-offset", align === "outer" ? "0" : `${-w / 2}px`]);
+		return decls;
+	}
+	decls.push(["border-color", firstColor]);
 	if (typeof widthRaw === "number") {
 		decls.push(["border-width", `${widthRaw}px`]);
 		decls.push(["border-style", "solid"]);
@@ -1205,12 +1285,10 @@ function strokeToCss(node, vars, warnings, what) {
 			}
 		}
 		decls.push(...sides);
-	} else if (firstColor !== void 0) {
+	} else {
 		decls.push(["border-width", "1px"]);
 		decls.push(["border-style", "solid"]);
 	}
-	const align = node["strokeAlignment"];
-	if (align === "outer" || align === "center") warnings.push(`${what}: strokeAlignment=${String(align)} 暂按 inner（CSS border）语义渲染`);
 	return decls;
 }
 /** effect → box-shadow / filter / backdrop-filter */
@@ -1263,10 +1341,20 @@ function textToCss(node, vars, warnings) {
 	if (vars.resolveBool(node["underline"])) deco.push("underline");
 	if (vars.resolveBool(node["strikethrough"])) deco.push("line-through");
 	if (deco.length > 0) decls.push(["text-decoration", deco.join(" ")]);
-	if (node["textAlignVertical"] !== void 0 && node["textAlignVertical"] !== "top") warnings.push("textAlignVertical 暂按 top 渲染");
-	const fillsRaw = node["fill"];
-	const color = (Array.isArray(fillsRaw) ? fillsRaw : fillsRaw !== void 0 ? [fillsRaw] : []).map((e) => colorFromFillEntry(e, vars)).find((c) => c !== void 0);
-	if (color !== void 0) decls.push(["color", color]);
+	const vaRaw = node["textAlignVertical"];
+	const va = typeof vaRaw === "string" ? vars.resolve(vaRaw) : void 0;
+	if (va === "middle" || va === "bottom") decls.push(["display", "flex"], ["flex-direction", "column"], ["justify-content", va === "middle" ? "center" : "flex-end"]);
+	else if (va !== void 0 && va !== "top") warnings.push(`${node["id"]}: textAlignVertical=${va} 不在 top/middle/bottom 内，按 top 渲染`);
+	const fillDecls = fillsToCss(node["fill"], vars, warnings, "text");
+	const image = fillDecls.find(([p]) => p === "background-image");
+	const color = fillDecls.find(([p]) => p === "background-color")?.[1];
+	if (image !== void 0) {
+		decls.push(image);
+		decls.push(["-webkit-background-clip", "text"]);
+		decls.push(["background-clip", "text"]);
+		decls.push(["color", "transparent"]);
+		decls.push(["-webkit-text-fill-color", "transparent"]);
+	} else if (color !== void 0) decls.push(["color", color]);
 	const growth = node["textGrowth"];
 	if (growth === "auto") decls.push(["white-space", "nowrap"]);
 	if (growth === "fixed-width-height") decls.push(["overflow", "visible"]);
@@ -1342,6 +1430,77 @@ function getLucideIcon(name, warnings) {
 	cache.set(name, result);
 	return result;
 }
+/**
+* 常见图标库 → lucide 的别名表。
+*
+* 设计稿里除 lucide 外最常出现的是 Material Symbols（名字是 `snake_case`），
+* 不映射就整块渲染成虚线占位框 —— 一个界面里几个关键操作图标全是框，
+* 可读性比「图标形状略有出人」差得多。
+*/
+const ALIASES = {
+	check_circle: "circle-check",
+	check: "check",
+	delete: "trash-2",
+	delete_forever: "trash-2",
+	delete_sweep: "trash-2",
+	do_not_disturb_on: "circle-slash",
+	download: "download",
+	upload: "upload",
+	filter_alt: "filter",
+	info: "info",
+	schedule: "clock",
+	history: "history",
+	settings_backup_restore: "history",
+	settings: "settings",
+	zoom_in: "zoom-in",
+	zoom_out: "zoom-out",
+	close: "x",
+	search: "search",
+	visibility: "eye",
+	visibility_off: "eye-off",
+	favorite: "heart",
+	star: "star",
+	play_arrow: "play",
+	pause: "pause",
+	stop: "square",
+	refresh: "rotate-cw",
+	restore: "rotate-ccw",
+	keyboard_arrow_down: "chevron-down",
+	keyboard_arrow_up: "chevron-up",
+	keyboard_arrow_left: "chevron-left",
+	keyboard_arrow_right: "chevron-right",
+	expand_more: "chevron-down",
+	expand_less: "chevron-up",
+	more_vert: "more-vertical",
+	more_horiz: "more-horizontal",
+	folder: "folder",
+	folder_open: "folder-open",
+	image: "image",
+	photo: "image",
+	edit: "pencil",
+	crop: "crop",
+	rotate_left: "rotate-ccw",
+	rotate_right: "rotate-cw",
+	fullscreen: "maximize",
+	fullscreen_exit: "minimize",
+	lock: "lock",
+	lock_open: "unlock",
+	warning: "triangle-alert",
+	error: "circle-alert",
+	help: "circle-help"
+};
+/**
+* 把任意图标库里的名字归一成 lucide 名。
+* lucide 自己的名字直接返回；Material Symbols 走别表；
+* 其它库（Font Awesome、自定义字体）也先试别名，再不中就由调用方降级占位。
+*/
+function resolveIconName(library, name) {
+	if (name === "") return name;
+	if (library === "lucide" || library === "feather") return name;
+	const direct = ALIASES[name];
+	if (direct !== void 0) return direct;
+	return name;
+}
 // src/render/html.ts
 function escapeHtml(s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -1437,7 +1596,9 @@ function layoutDecls(node, vars) {
 		else if (jc === "space_between") decls.push(["justify-content", "space-between"]);
 		else if (jc === "space_around") decls.push(["justify-content", "space-around"]);
 		const ai = node["alignItems"];
-		if (ai === "start" || ai === "center" || ai === "end") decls.push(["align-items", ai]);
+		if (ai === "start") decls.push(["align-items", "flex-start"]);
+		else if (ai === "center" || ai === "end") decls.push(["align-items", ai === "end" ? "flex-end" : "center"]);
+		else decls.push(["align-items", "flex-start"]);
 	}
 	return {
 		decls,
@@ -1496,60 +1657,63 @@ function boardAttrs(node, vars) {
 }
 function renderNode(node, parentLayout, vars, warnings, extraAttrs = []) {
 	const type = String(node["type"] ?? "?");
+	const scoped = isRecord(node["theme"]) ? vars.withTheme(node["theme"]) : vars;
+	if (scoped.resolveBool(node["enabled"]) === false) return "";
 	const label = typeof node["name"] === "string" && node["name"] !== "" ? `${type}: ${String(node["name"])}` : type;
 	const positioned = parentLayout === "none" || node["layoutPosition"] === "absolute";
 	if (type === "script" || type === "browser" || !KNOWN_RENDER_TYPES.has(type)) return openTag(node, "", extraAttrs) + placeholderBox(label, []) + "</div>";
 	const css = [];
 	if (positioned) {
 		css.push(["position", "absolute"]);
-		const x = numericSize(node["x"], vars);
-		const y = numericSize(node["y"], vars);
+		const x = numericSize(node["x"], scoped);
+		const y = numericSize(node["y"], scoped);
 		css.push(["left", `${x ?? 0}px`], ["top", `${y ?? 0}px`]);
-	}
-	const { decls: layoutCss, effective } = layoutDecls(node, vars);
+	} else css.push(["position", "relative"]);
+	const { decls: layoutCss, effective } = layoutDecls(node, scoped);
 	css.push(...layoutCss);
-	css.push(...sizeDecls(node["width"], node["height"], positioned, parentLayout, vars, warnings, label));
-	css.push(...commonToCss(node, vars));
-	if (type !== "text") css.push(...fillsToCss(node["fill"], vars, warnings, label));
-	css.push(...strokeToCss(node, vars, warnings, label));
-	css.push(...effectsToCss(node["effect"], vars, warnings, label));
+	if (parentLayout !== "none" && !positioned) css.push(["flex-shrink", "0"]);
+	css.push(...sizeDecls(node["width"], node["height"], positioned, parentLayout, scoped, warnings, label));
+	css.push(...commonToCss(node, scoped));
+	if (type !== "text") css.push(...fillsToCss(node["fill"], scoped, warnings, label));
+	css.push(...strokeToCss(node, scoped, warnings, label));
+	css.push(...effectsToCss(node["effect"], scoped, warnings, label));
 	let inner = "";
 	switch (type) {
 		case "text":
-			css.push(...textToCss(node, vars, warnings));
-			inner = escapeHtml(typeof node["content"] === "string" ? vars.resolve(node["content"]) : "");
+			css.push(...textToCss(node, scoped, warnings));
+			inner = escapeHtml(typeof node["content"] === "string" ? scoped.resolve(node["content"]) : "");
 			break;
 		case "icon":
 		case "icon_font": {
-			const colorCss = fillsToCss(node["fill"], vars, warnings, label).find(([p]) => p === "background-color");
+			const colorCss = fillsToCss(node["fill"], scoped, warnings, label).find(([p]) => p === "background-color");
 			if (colorCss) css.push(["color", colorCss[1]], ["background", "transparent"]);
 			const fontVariant = type === "icon_font";
 			const libField = fontVariant ? node["iconFontFamily"] : node["library"];
 			const nameField = fontVariant ? node["iconFontName"] : node["icon"];
 			const lib = typeof libField === "string" && libField !== "" ? libField : "lucide";
-			const iconName = typeof nameField === "string" ? vars.resolve(nameField) : "";
-			let svg = null;
-			if (lib === "lucide" || lib === "feather") svg = getLucideIcon(iconName, warnings);
-			else warnings.push(`${label}: 图标库 "${lib}" 暂只支持 lucide/feather，渲染为占位框`);
+			const iconName = typeof nameField === "string" ? scoped.resolve(nameField) : "";
+			const lucideName = resolveIconName(lib, iconName);
+			const svg = iconName === "" ? null : getLucideIcon(lucideName, warnings);
+			if (svg === null && lucideName === iconName && lib !== "lucide" && lib !== "feather") warnings.push(`${label}: 图标库 "${lib}" 的 "${iconName}" 没有可用的 lucide 等价图标，渲染为占位框`);
 			inner = svg ? svg.replace("<svg", "<svg style=\"width:100%;height:100%;display:block\"") : placeholderBox(`${lib}:${iconName}`, []);
 			break;
 		}
 		case "note": {
-			const bg = fillsToCss(node["fill"] ?? node["color"] ?? "#FEE484", vars, warnings, label).find(([p]) => p === "background-color")?.[1] ?? "#FEE484";
+			const bg = fillsToCss(node["fill"] ?? node["color"] ?? "#FEE484", scoped, warnings, label).find(([p]) => p === "background-color")?.[1] ?? "#FEE484";
 			css.push(["background", bg], ["padding", "8px 10px"], ["color", "#292524"], ["font", "12px/1.5 system-ui,sans-serif"], ["border-radius", "4px"], ["overflow", "hidden"]);
-			inner = escapeHtml(typeof node["content"] === "string" ? vars.resolve(node["content"]) : "");
+			inner = escapeHtml(typeof node["content"] === "string" ? scoped.resolve(node["content"]) : "");
 			break;
 		}
 		case "ellipse": {
 			css.push(["border-radius", "50%"]);
-			const inner2 = vars.resolveNum(node["innerRadius"]);
+			const inner2 = scoped.resolveNum(node["innerRadius"]);
 			if (inner2 !== void 0 && inner2 > 0) warnings.push(`${label}: innerRadius 环形暂按实心椭圆渲染`);
-			const sweep = vars.resolveNum(node["sweepAngle"]);
+			const sweep = scoped.resolveNum(node["sweepAngle"]);
 			if (sweep !== void 0 && sweep !== 360) warnings.push(`${label}: 弧形（sweepAngle=${sweep}）暂按整圆渲染`);
 			break;
 		}
 		case "polygon": {
-			const count = vars.resolveNum(node["polygonCount"]);
+			const count = scoped.resolveNum(node["polygonCount"]);
 			const n = count ?? 3;
 			if (count === void 0) warnings.push(`${label}: polygonCount 缺省按 3 渲染`);
 			if (node["cornerRadius"] !== void 0) warnings.push(`${label}: 多边形圆角暂忽略`);
@@ -1557,9 +1721,9 @@ function renderNode(node, parentLayout, vars, warnings, extraAttrs = []) {
 			break;
 		}
 		case "path": {
-			css.push(...cornerRadiusToCss(node["cornerRadius"], vars));
+			css.push(...cornerRadiusToCss(node["cornerRadius"], scoped));
 			const d = typeof node["geometry"] === "string" ? node["geometry"] : "";
-			const color = fillsToCss(node["fill"], vars, warnings, label).find(([p]) => p === "background-color")?.[1] ?? "#000000";
+			const color = fillsToCss(node["fill"], scoped, warnings, label).find(([p]) => p === "background-color")?.[1] ?? "#000000";
 			const vbRaw = node["viewBox"];
 			inner = `<svg viewBox="${(Array.isArray(vbRaw) && vbRaw.length === 4 && vbRaw.every((v) => typeof v === "number") ? vbRaw : [
 				0,
@@ -1570,11 +1734,11 @@ function renderNode(node, parentLayout, vars, warnings, extraAttrs = []) {
 			break;
 		}
 		default:
-			css.push(...cornerRadiusToCss(node["cornerRadius"], vars));
+			css.push(...cornerRadiusToCss(node["cornerRadius"], scoped));
 			if (type === "group" && node["effect"] !== void 0) {}
 	}
 	const kidsRaw = node["children"];
-	const childrenHtml = Array.isArray(kidsRaw) ? kidsRaw.filter(isRecord).map((k) => renderNode(k, effective, vars, warnings)).join("") : "";
+	const childrenHtml = Array.isArray(kidsRaw) ? kidsRaw.filter(isRecord).map((k) => renderNode(k, effective, scoped, warnings)).join("") : "";
 	return openTag(node, css.map(([p, v]) => `${p}:${v}`).join(";"), extraAttrs) + inner + childrenHtml + "</div>";
 }
 const KNOWN_RENDER_TYPES = /* @__PURE__ */ new Set([
@@ -1625,7 +1789,9 @@ function boardBoxes(nodes, vars) {
 }
 /** 渲染整棵（已展开的）树：顶层节点在画布上绝对定位，并带画布元数据 */
 function renderTree(nodes, vars, warnings) {
-	return nodes.filter(isRecord).map((n) => renderNode(n, "none", vars, warnings, boardAttrs(n, vars))).join("");
+	return nodes.filter(isRecord).map((n) => {
+		return renderNode(n, "none", vars, warnings, boardAttrs(n, isRecord(n["theme"]) ? vars.withTheme(n["theme"]) : vars));
+	}).join("");
 }
 // src/render/entry.ts
 /**