paintress 0.6.0 → 0.7.0

package/dist/{render-BSf62388.js → render-DWs1iQ0v.js}

@@ -573,6 +573,322 @@ const DocumentSchema = DocumentObjectSchema.superRefine((doc, ctx) => {
 });
 /** .ptr 文档：pen_profile + x-paintress 必填 */
 const PtrDocumentSchema = DocumentSchema.and(z.object({ [X_PAINTRESS_KEY]: XPaintress }).passthrough());
+// src/doc/presets.ts
+const PRESET_TYPES = [
+	"color",
+	"radius",
+	"spacing",
+	"fontSize",
+	"font"
+];
+function isPresetType(v) {
+	return typeof v === "string" && PRESET_TYPES.includes(v);
+}
+/**
+* 属性 → 期望的 token 种类。**唯一映射表**：audit、establish、validate、写入提示都从这里取，
+* 各处不得再抄一份（2026-11-15：`fontSize` 曾因两处映射不一致而无法 token 化）。
+*
+* 刻意不含 `lineHeight`（它是 fontSize 的倍数，塞进任何数字种类都是错语义）；
+* `fontWeight` 同理（等独立种类，见 `.agents/memory/FUTURE.md`）。
+*/
+const PROP_TOKEN_KIND = {
+	fill: "color",
+	stroke: "color",
+	color: "color",
+	effect: "color",
+	cornerRadius: "radius",
+	gap: "spacing",
+	padding: "spacing",
+	strokeWidth: "spacing",
+	letterSpacing: "spacing",
+	fontSize: "fontSize",
+	fontFamily: "font"
+};
+/** 种类的人读名（校验与审计的提示语用） */
+const PRESET_TYPE_LABEL = {
+	color: "颜色",
+	radius: "倒角",
+	spacing: "间距",
+	fontSize: "字号",
+	font: "字体族"
+};
+/** 值是不是一个数字字串（老 `font` token 靠它识别字号；纯字体族名不会全是数字） */
+function isNumericPresetValue(value) {
+	return typeof value === "string" && value.trim() !== "" && Number.isFinite(Number(value));
+}
+function isRecord$7(v) {
+	return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+/** 文档里携带的预设组（`x-paintress.presets.groups`）；坏结构当没有 */
+function presetGroupsOf(doc) {
+	const meta = isRecord$7(doc) ? doc["x-paintress"] : void 0;
+	const presets = isRecord$7(meta) ? meta["presets"] : void 0;
+	const groups = isRecord$7(presets) ? presets["groups"] : void 0;
+	if (!isRecord$7(groups)) return {};
+	const out = {};
+	for (const [name, raw] of Object.entries(groups)) {
+		if (!isRecord$7(raw)) continue;
+		const target = typeof raw["target"] === "string" ? raw["target"] : "";
+		const props = {};
+		const rawProps = raw["props"];
+		if (isRecord$7(rawProps)) {
+			for (const [k, v] of Object.entries(rawProps)) if (typeof v === "string" && v.trim() !== "") props[k] = v;
+		}
+		if (target === "" || Object.keys(props).length === 0) continue;
+		out[name] = {
+			target,
+			props
+		};
+	}
+	return out;
+}
+/**
+* 渲染前把节点上的 `preset: '<name>'` 铺开：组属性打底，**节点自己的属性优先**。
+* 返回新树（不改输入，保存永远写原文档）；缺失/类型不符的引用只警告、不猜。
+*/
+function applyPresetRefs(nodes, groups, warnings) {
+	if (Object.keys(groups).length === 0) return nodes;
+	const walk = (list, where) => list.map((raw, i) => {
+		if (!isRecord$7(raw)) return raw;
+		let node = raw;
+		const name = node["preset"];
+		const label = `${String(node["type"] ?? "?")}${typeof node["name"] === "string" && node["name"] !== "" ? `: ${String(node["name"])}` : ""}`;
+		if (typeof name === "string" && name !== "") {
+			const group = groups[name];
+			if (group === void 0) warnings.push(`${label}: preset "${name}" 不存在`);
+			else if (group.target !== node["type"]) {
+				if (!Object.entries(group.props).every(([key, value]) => node[key] === value)) warnings.push(`${label}: preset "${name}" 适用于 ${group.target}，节点是 ${String(node["type"])}`);
+			} else node = {
+				...group.props,
+				...node
+			};
+		}
+		const kids = node["children"];
+		if (Array.isArray(kids)) node = {
+			...node,
+			children: walk(kids, `${where}/${i}`)
+		};
+		return node;
+	});
+	return walk(nodes, "children");
+}
+// src/doc/fonts.ts
+const FONT_SOURCE_KINDS = [
+	"web",
+	"css",
+	"file",
+	"system",
+	"bundle"
+];
+function isFontSourceKind(v) {
+	return typeof v === "string" && FONT_SOURCE_KINDS.includes(v);
+}
+/**
+* paintress 自己的字体观：不带字体文件，只给 jsDelivr 上的 fontsource CSS。
+* 版本钉死，换镜像/自托管只改这里与 seed 数据。
+*/
+const BUILTIN_FONT_LINKS = ["https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.3.0/wght.css", "https://cdn.jsdelivr.net/npm/@fontsource-variable/noto-sans-sc@5.3.1/wght.css"];
+/** 内置网络字体 CSS；`PAINTRESS_NO_WEB_FONTS=1` 时跳过（CI / 纯离线） */
+function webFontLinks() {
+	return process.env["PAINTRESS_NO_WEB_FONTS"] === "1" ? [] : [...BUILTIN_FONT_LINKS];
+}
+/** 无项目默认时的内置栈；系统字体只是栈尾兵底 */
+const BUILTIN_FONT_STACK = "\"Inter Variable\", \"Noto Sans SC Variable\", system-ui, -apple-system, \"Segoe UI\", sans-serif";
+const GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+	"sans-serif",
+	"serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"ui-monospace",
+	"ui-sans-serif",
+	"ui-serif",
+	"ui-rounded",
+	"emoji",
+	"math",
+	"fangsong"
+]);
+function isGenericFamily(family) {
+	return GENERIC_FAMILIES.has(family.trim().toLowerCase());
+}
+function isRecord$6(v) {
+	return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+/** `'Inter, "Noto Sans SC"'` → `['Inter', 'Noto Sans SC']`（去引号、去空项） */
+function splitFontStack(stack) {
+	return stack.split(",").map((part) => part.trim().replace(/^["']|["']$/g, "").trim()).filter((part) => part !== "");
+}
+function quoteFamily(family) {
+	return /[\s]/.test(family) ? `"${family}"` : family;
+}
+/**
+* 真字体在前、替代在后、`sans-serif` 兜底。替代值可以是 stack。
+* 已经出现过的 family 不重复加（先出现的那一层优先，语义与 CSS 一致）。
+*/
+function stackWithPreviews(stack, previews) {
+	const production = splitFontStack(stack);
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	const push = (family) => {
+		const key = family.toLowerCase();
+		if (seen.has(key)) return;
+		seen.add(key);
+		out.push(quoteFamily(family));
+	};
+	for (const family of production) {
+		push(family);
+		const preview = previews[family];
+		if (preview === void 0) continue;
+		for (const entry of splitFontStack(preview)) push(entry);
+	}
+	if (!production.some((family) => isGenericFamily(family))) out.push("sans-serif");
+	return out.join(", ");
+}
+/** 节点显式写了的字体族（不展开 `$token`；token 的解析由渲染器完成） */
+function stackFamilies(stack) {
+	return splitFontStack(stack).filter((family) => !isGenericFamily(family));
+}
+/** 解析 `x-paintress.fonts`；坏结构当空，不让一份手写文件把渲染搞崩 */
+function fontRegistryOf(doc) {
+	const meta = isRecord$6(doc) ? doc["x-paintress"] : void 0;
+	const fonts = isRecord$6(meta) ? meta["fonts"] : void 0;
+	if (!isRecord$6(fonts)) return { families: {} };
+	const rawFamilies = isRecord$6(fonts["families"]) ? fonts["families"] : {};
+	const families = {};
+	for (const [family, raw] of Object.entries(rawFamilies)) {
+		if (!isRecord$6(raw)) continue;
+		const sourceRaw = isRecord$6(raw["source"]) ? raw["source"] : void 0;
+		if (sourceRaw === void 0 || !isFontSourceKind(sourceRaw["kind"])) continue;
+		const target = [
+			sourceRaw["target"],
+			sourceRaw["url"],
+			sourceRaw["path"]
+		].find((v) => typeof v === "string");
+		const source = {
+			kind: sourceRaw["kind"],
+			...target !== void 0 ? { target } : {}
+		};
+		const metricsRaw = isRecord$6(raw["metrics"]) ? raw["metrics"] : void 0;
+		const metrics = {};
+		if (metricsRaw) {
+			for (const key of [
+				"sizeAdjust",
+				"ascentOverride",
+				"descentOverride",
+				"lineGapOverride"
+			]) if (typeof metricsRaw[key] === "string" && metricsRaw[key] !== "") metrics[key] = metricsRaw[key];
+		}
+		families[family] = {
+			source,
+			...typeof raw["preview"] === "string" && raw["preview"] !== "" ? { preview: raw["preview"] } : {},
+			...Object.keys(metrics).length > 0 ? { metrics } : {},
+			...typeof raw["note"] === "string" && raw["note"] !== "" ? { note: raw["note"] } : {}
+		};
+	}
+	return {
+		...typeof fonts["default"] === "string" && fonts["default"] !== "" ? { default: fonts["default"] } : {},
+		families
+	};
+}
+function varString(variables, key) {
+	const def = variables?.[key];
+	if (!isRecord$6(def)) return void 0;
+	const value = def["value"];
+	return typeof value === "string" ? value : void 0;
+}
+/** 默认栈：`default` 是 token key 就解析成值，否则按 family 用；未配置用内置栈 */
+function resolveDefaultStack(registry, doc) {
+	const raw = registry.default;
+	if (raw === void 0 || raw === "") return BUILTIN_FONT_STACK;
+	const fromToken = varString(doc?.variables, raw);
+	if (fromToken !== void 0) return fromToken;
+	return raw;
+}
+const FORMAT_BY_EXT = {
+	".woff2": "woff2",
+	".woff": "woff",
+	".ttf": "truetype",
+	".otf": "opentype"
+};
+function fontFormat(target) {
+	const dot = target.lastIndexOf(".");
+	if (dot < 0) return void 0;
+	return FORMAT_BY_EXT[target.slice(dot).toLowerCase()];
+}
+/**
+* 由注册表生成渲染计划。`resolveUrl` 决定 URL 的可达形式：
+* 查看器给 `/files/<project>/<path>`，截图给 `file:///<abs>`，导出可以给 data URI。
+*/
+function planFonts(registry, resolveUrl, doc) {
+	const links = webFontLinks();
+	const faces = [];
+	const previews = {};
+	for (const [family, entry] of Object.entries(registry.families)) {
+		const { source } = entry;
+		if (source.kind === "web" && source.target !== void 0) links.push(source.target);
+		else if (source.kind === "css" && source.target !== void 0) {
+			const url = resolveUrl(source);
+			if (url !== null) links.push(url);
+		} else if (source.kind === "file" && source.target !== void 0) {
+			const url = resolveUrl(source);
+			if (url !== null) {
+				const format = fontFormat(source.target);
+				faces.push({
+					family,
+					src: url,
+					...format !== void 0 ? { format } : {}
+				});
+			}
+		}
+		if (entry.preview !== void 0) {
+			const first = splitFontStack(entry.preview)[0];
+			if (entry.metrics !== void 0 && first !== void 0 && !isGenericFamily(first)) {
+				faces.push({
+					family: `Preview: ${family}`,
+					src: `local("${first}")`,
+					metrics: entry.metrics
+				});
+				previews[family] = `"Preview: ${family}", ${entry.preview}`;
+			} else previews[family] = entry.preview;
+		}
+	}
+	return {
+		links,
+		faces,
+		previews,
+		defaultStack: resolveDefaultStack(registry, doc)
+	};
+}
+/** 字体缺口：没写 family 的文本、没登记的 family —— MCP 的 doc_info / validate / hints 共用 */
+function textFontGaps(doc, registry) {
+	const ids = [];
+	const families = /* @__PURE__ */ new Set();
+	let textNodes = 0;
+	const walk = (nodes) => {
+		for (const raw of nodes) {
+			if (!isRecord$6(raw)) continue;
+			if (raw["type"] === "text") {
+				const ff = raw["fontFamily"];
+				if (typeof ff !== "string" || ff.trim() === "") {
+					textNodes += 1;
+					if (ids.length < 10 && typeof raw["id"] === "string") ids.push(raw["id"]);
+				} else if (!ff.startsWith("$")) for (const family of stackFamilies(ff)) families.add(family);
+			}
+			const kids = raw["children"];
+			if (Array.isArray(kids)) walk(kids);
+		}
+	};
+	walk(doc.children);
+	const list = [...families];
+	return {
+		textNodes,
+		ids,
+		families: list,
+		unregistered: list.filter((family) => registry.families[family] === void 0),
+		defaultStack: resolveDefaultStack(registry, doc)
+	};
+}
 // src/doc/id.ts
 /** id 生成：5 位 base62，禁 '/'。与既有文档 id 风格一致（如 zae8o、bi8Au）。 */
 const ALPHABET = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
@@ -596,6 +912,14 @@ function collectIds(children, out = []) {
 	return out;
 }
 // src/doc/validate.ts
+/** 一个属性值里出现的所有 `$token` 引用（结构化填充、数组、逐边对象都要覆盖） */
+function refsIn(value, out = []) {
+	if (typeof value === "string") {
+		if (VARIABLE_NAME.test(value)) out.push(value.slice(1));
+	} else if (Array.isArray(value)) for (const entry of value) refsIn(entry, out);
+	else if (value !== null && typeof value === "object") for (const entry of Object.values(value)) refsIn(entry, out);
+	return out;
+}
 /** 结构校验（schema）+ 语义校验（重复 id、悬空 ref、未知类型、未解析变量） */
 function validateDoc(input, opts = {}) {
 	const errors = [];
@@ -614,6 +938,11 @@ function validateDoc(input, opts = {}) {
 		};
 	}
 	const doc = parsed.data;
+	const presetGroups = {
+		...opts.presetGroups ?? {},
+		...presetGroupsOf(doc)
+	};
+	const presetKinds = opts.presetKinds ?? {};
 	const allIds = collectIds(doc.children);
 	const seen = /* @__PURE__ */ new Set();
 	const dup = /* @__PURE__ */ new Set();
@@ -643,11 +972,53 @@ function validateDoc(input, opts = {}) {
 				path: here,
 				message: `ref 指向不存在的组件 id "${String(rec["ref"])}"`
 			});
+			const presetName = rec["preset"];
+			if (typeof presetName === "string" && presetName !== "") {
+				const group = presetGroups[presetName];
+				if (group === void 0) warnings.push({
+					level: "warning",
+					path: here,
+					message: `preset "${presetName}" 不存在`
+				});
+				else if (group.target !== type) warnings.push({
+					level: "warning",
+					path: here,
+					message: `preset "${presetName}" 适用于 ${group.target}，这里是 ${String(type)}`
+				});
+			}
 			const kids = rec["children"];
 			if (Array.isArray(kids)) walk(kids, `${here}/children`);
+			for (const [prop, value] of Object.entries(rec)) {
+				if (prop === "children") continue;
+				const expected = PROP_TOKEN_KIND[prop];
+				if (expected === void 0) continue;
+				for (const ref of refsIn(value)) {
+					const actual = presetKinds[ref];
+					if (actual === void 0 || actual === expected) continue;
+					warnings.push({
+						level: "warning",
+						path: here,
+						message: `${prop} 需要${PRESET_TYPE_LABEL[expected]} token，$${ref} 是${PRESET_TYPE_LABEL[actual]}（类型 ${actual}）`
+					});
+				}
+			}
 		}
 	};
 	walk(doc.children, "children");
+	for (const [name, group] of Object.entries(presetGroups)) for (const [prop, value] of Object.entries(group.props)) if (!VARIABLE_NAME.test(value)) warnings.push({
+		level: "warning",
+		path: `<preset:${name}>`,
+		message: `preset 组里的 ${prop} 是字面量 "${value}"，应当写成 $token 引用`
+	});
+	else {
+		const expected = PROP_TOKEN_KIND[prop];
+		const actual = presetKinds[value.slice(1)];
+		if (expected !== void 0 && actual !== void 0 && actual !== expected) warnings.push({
+			level: "warning",
+			path: `<preset:${name}>`,
+			message: `${prop} 需要${PRESET_TYPE_LABEL[expected]} token，${value} 是${PRESET_TYPE_LABEL[actual]}（类型 ${actual}）`
+		});
+	}
 	const localNames = new Set(doc.variables ? Object.keys(doc.variables) : []);
 	const varNames = /* @__PURE__ */ new Set([...localNames, ...opts.knownVars ?? []]);
 	for (const name of opts.presetVars ?? []) if (localNames.has(name)) warnings.push({
@@ -662,11 +1033,40 @@ function validateDoc(input, opts = {}) {
 		else if (obj && typeof obj === "object") Object.values(obj).forEach(scan);
 	};
 	scan(doc.children);
+	for (const group of Object.values(presetGroups)) for (const value of Object.values(group.props)) scan(value);
 	for (const name of varRefs) if (!varNames.has(name)) warnings.push({
 		level: "warning",
 		path: "<variables>",
 		message: `字段引用了未定义的变量 $${name}`
 	});
+	if (opts.fontRegistry !== void 0) {
+		const gaps = textFontGaps(doc, opts.fontRegistry);
+		if (gaps.textNodes > 0) {
+			const sample = gaps.ids.length > 0 ? `（如 ${gaps.ids.join("、")}）` : "";
+			warnings.push({
+				level: "warning",
+				path: "<fonts>",
+				message: `${gaps.textNodes} 个 text 节点没有 fontFamily，当前用默认字体 ${gaps.defaultStack}${sample}`
+			});
+		}
+		for (const family of gaps.unregistered) warnings.push({
+			level: "warning",
+			path: "<fonts>",
+			message: `字体未登记：${family}（paintress_font add）`
+		});
+		for (const [family, entry] of Object.entries(opts.fontRegistry.families)) if ((entry.source.kind === "system" || entry.source.kind === "bundle") && entry.preview === void 0) warnings.push({
+			level: "warning",
+			path: `<font:${family}>`,
+			message: `${family} 是 ${entry.source.kind} 来源，没有 preview：截图侧可能不可用`
+		});
+		const def = opts.fontRegistry.default;
+		const known = new Set(opts.knownVars ?? []);
+		if (def !== void 0 && opts.fontRegistry.families[def] === void 0 && !known.has(def)) warnings.push({
+			level: "warning",
+			path: "<fonts>",
+			message: `默认字体 ${def} 没有登记`
+		});
+	}
 	return {
 		ok: errors.length === 0,
 		errors,
@@ -933,7 +1333,7 @@ function batch(doc, ops) {
 	return clone;
 }
 // src/render/vars.ts
-function isRecord$3(v) {
+function isRecord$5(v) {
 	return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function asVarValue(v) {
@@ -947,7 +1347,7 @@ function asVarValue(v) {
 */
 function resolveThemed(v, theme) {
 	if (Array.isArray(v)) {
-		const entries = v.filter(isRecord$3);
+		const entries = v.filter(isRecord$5);
 		if (entries.length === 0) return void 0;
 		let best = null;
 		for (const entry of entries) {
@@ -959,7 +1359,7 @@ function resolveThemed(v, theme) {
 				};
 				continue;
 			}
-			if (!isRecord$3(t)) continue;
+			if (!isRecord$5(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 = {
@@ -976,7 +1376,7 @@ function makeVarResolver(doc, warnings, theme = {}) {
 	const make = (scope) => {
 		const lookup = (name) => {
 			const def = vars[name];
-			if (!isRecord$3(def)) return void 0;
+			if (!isRecord$5(def)) return void 0;
 			return resolveThemed(def["value"], scope);
 		};
 		return {
@@ -1027,7 +1427,7 @@ function makeVarResolver(doc, warnings, theme = {}) {
 	return make(theme);
 }
 // src/render/expand.ts
-function isRecord$2(v) {
+function isRecord$4(v) {
 	return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function brokenRefPlaceholder(refNode, reason, warnings) {
@@ -1048,7 +1448,7 @@ function indexById(children) {
 	const map = /* @__PURE__ */ new Map();
 	const walk = (nodes) => {
 		for (const n of nodes) {
-			if (!isRecord$2(n)) continue;
+			if (!isRecord$4(n)) continue;
 			const id = n["id"];
 			if (typeof id === "string") map.set(id, n);
 			const kids = n["children"];
@@ -1065,7 +1465,7 @@ function findByPath(root, segments) {
 	for (const seg of segments) {
 		const kids = container["children"];
 		if (!Array.isArray(kids)) return null;
-		found = kids.find((k) => isRecord$2(k) && k["id"] === seg) ?? null;
+		found = kids.find((k) => isRecord$4(k) && k["id"] === seg) ?? null;
 		if (!found) return null;
 		container = found;
 	}
@@ -1076,7 +1476,7 @@ function findByPath(root, segments) {
 }
 function applyDescendants(expandedRoot, descendants, warnings, refId) {
 	for (const [path, overrideRaw] of Object.entries(descendants)) {
-		if (!isRecord$2(overrideRaw)) continue;
+		if (!isRecord$4(overrideRaw)) continue;
 		const hit = findByPath(expandedRoot, path.split("/").filter((s) => s !== ""));
 		if (!hit) {
 			warnings.push(`ref ${refId} 的 descendants 路径 "${path}" 未命中，已忽略`);
@@ -1096,7 +1496,7 @@ function applyDescendants(expandedRoot, descendants, warnings, refId) {
 /** 递归展开一个节点（就地修改克隆树） */
 function expandNode(node, index, stack, warnings) {
 	const kids = node["children"];
-	if (Array.isArray(kids)) node["children"] = kids.map((k) => isRecord$2(k) ? expandNode(k, index, stack, warnings) : k);
+	if (Array.isArray(kids)) node["children"] = kids.map((k) => isRecord$4(k) ? expandNode(k, index, stack, warnings) : k);
 	if (node["type"] !== "ref") return node;
 	const refId = typeof node["id"] === "string" ? node["id"] : "?";
 	const target = typeof node["ref"] === "string" ? node["ref"] : "";
@@ -1108,13 +1508,13 @@ function expandNode(node, index, stack, warnings) {
 		const clone = structuredClone(component);
 		clone["id"] = node["id"];
 		if (typeof node["name"] === "string") clone["name"] = node["name"];
-		if (Array.isArray(clone["children"])) clone["children"] = clone["children"].map((k) => isRecord$2(k) ? expandNode(k, index, stack, warnings) : k);
+		if (Array.isArray(clone["children"])) clone["children"] = clone["children"].map((k) => isRecord$4(k) ? expandNode(k, index, stack, warnings) : k);
 		for (const [k, v] of Object.entries(node)) {
 			if (k === "type" || k === "ref" || k === "descendants" || k === "id" || k === "name") continue;
 			clone[k] = structuredClone(v);
 		}
 		const desc = node["descendants"];
-		if (isRecord$2(desc)) applyDescendants(clone, desc, warnings, refId);
+		if (isRecord$4(desc)) applyDescendants(clone, desc, warnings, refId);
 		return clone;
 	} finally {
 		stack.delete(target);
@@ -1126,21 +1526,72 @@ function expandRefs(doc, warnings) {
 	return structuredClone(doc.children).map((n) => expandNode(n, index, /* @__PURE__ */ new Set(), warnings));
 }
 // src/render/style.ts
-function isRecord$1(v) {
+function isRecord$3(v) {
 	return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function colorFromFillEntry(entry, vars) {
 	if (typeof entry === "string") return vars.resolve(entry);
-	if (isRecord$1(entry)) {
+	if (isRecord$3(entry)) {
 		const c = entry["color"];
 		if (typeof c === "string") return vars.resolve(c);
 	}
 }
+/** 平均色：网格渐变的底色（解析不了就回落首个色） */
+function averageColor(colors) {
+	let r = 0;
+	let g = 0;
+	let b = 0;
+	let n = 0;
+	for (const c of colors) {
+		const hex = /^#((?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}))$/.exec(c.trim());
+		if (hex === null) continue;
+		let raw = hex[1];
+		if (raw.length === 3) raw = raw.split("").map((ch) => ch + ch).join("");
+		r += parseInt(raw.slice(0, 2), 16);
+		g += parseInt(raw.slice(2, 4), 16);
+		b += parseInt(raw.slice(4, 6), 16);
+		n += 1;
+	}
+	if (n === 0) return colors[0] ?? "#000000";
+	return `rgb(${Math.round(r / n)} ${Math.round(g / n)} ${Math.round(b / n)})`;
+}
+/**
+* mesh_gradient 近似：每个网格点一层径向渐变（该点颜色 → 透明），
+* 底下垫一层平均色。浏览器按预乘 alpha 插值，叠出来就是平滑的网格混色。
+* `columns × rows` 缺省、颜色数不足或网格过大时返回 null（调用方按首个顶点色降级）。
+*/
+function meshLayers(entry, vars) {
+	const cols = vars.resolveNum(entry["columns"]);
+	const rows = vars.resolveNum(entry["rows"]);
+	const raw = entry["colors"];
+	if (cols === void 0 || rows === void 0 || !Array.isArray(raw)) return null;
+	const c = Math.round(cols);
+	const r = Math.round(rows);
+	if (c < 1 || r < 1) return null;
+	const colors = raw.map((x) => colorFromFillEntry(x, vars));
+	if (colors.length < c * r || colors.some((x) => x === void 0)) return null;
+	const cells = c * r;
+	if (cells > 144) return null;
+	const images = [];
+	for (let row = 0; row < r; row++) for (let col = 0; col < c; col++) {
+		const color = colors[row * c + col];
+		const cx = (col + .5) / c * 100;
+		const cy = (row + .5) / r * 100;
+		const sx = 100 / c * 1.4;
+		const sy = 100 / r * 1.4;
+		images.push(`radial-gradient(ellipse ${sx.toFixed(2)}% ${sy.toFixed(2)}% at ${cx.toFixed(2)}% ${cy.toFixed(2)}%, ${color} 0%, transparent 72%)`);
+	}
+	return {
+		images,
+		base: averageColor(colors.filter((x) => x !== void 0)),
+		cells
+	};
+}
 function stopsToCssList(colors, vars) {
 	if (!Array.isArray(colors) || colors.length === 0) return void 0;
 	const parts = [];
 	for (const c of colors) {
-		if (!isRecord$1(c)) continue;
+		if (!isRecord$3(c)) continue;
 		const col = colorFromFillEntry(c["color"], vars);
 		const pos = vars.resolveNum(c["position"]);
 		if (col === void 0) continue;
@@ -1162,7 +1613,7 @@ function penAngleToCss(deg) {
 	return `${(((90 - deg) % 360 + 360) % 360).toFixed(1)}deg`;
 }
 function normCenter(c, vars) {
-	if (isRecord$1(c)) {
+	if (isRecord$3(c)) {
 		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 {
@@ -1181,7 +1632,7 @@ function normCenter(c, vars) {
 * 另一边按正方形处理（与 Pencil 的径向渐变一致）。
 */
 function normSize(size, vars) {
-	if (!isRecord$1(size)) return null;
+	if (!isRecord$3(size)) return null;
 	const rw = vars.resolveNum(size["width"]);
 	const rh = vars.resolveNum(size["height"]);
 	if (rw === void 0 && rh === void 0) return null;
@@ -1196,11 +1647,11 @@ function fillsToCss(fillsRaw, vars, warnings, what) {
 	const bgImages = [];
 	let bgColor;
 	for (const entry of entries) {
-		if (typeof entry === "string" || isRecord$1(entry) && entry["type"] === void 0) {
+		if (typeof entry === "string" || isRecord$3(entry) && entry["type"] === void 0) {
 			bgColor = colorFromFillEntry(entry, vars);
 			continue;
 		}
-		if (!isRecord$1(entry)) continue;
+		if (!isRecord$3(entry)) continue;
 		if (vars.resolveBool(entry["enabled"]) === false) continue;
 		const kind = entry["type"];
 		if (kind === "color") bgColor = colorFromFillEntry(entry, vars);
@@ -1231,11 +1682,17 @@ function fillsToCss(fillsRaw, vars, warnings, what) {
 				decls.push(["background-repeat", "no-repeat"]);
 			} else warnings.push(`${what}: 图像填充缺少 url，已跳过`);
 		} else if (kind === "mesh_gradient") {
-			const first = colorFromFillEntry(entry["colors"]?.[0], vars);
-			if (first) {
-				bgColor = first;
-				warnings.push(`${what}: mesh_gradient 降级为首个顶点色`);
-			} else warnings.push(`${what}: mesh_gradient 无法降级，已跳过`);
+			const mesh = meshLayers(entry, vars);
+			if (mesh !== null) {
+				bgImages.push(...mesh.images);
+				if (bgColor === void 0) bgColor = mesh.base;
+			} else {
+				const first = colorFromFillEntry(entry["colors"]?.[0], vars);
+				if (first) {
+					bgColor = first;
+					warnings.push(`${what}: mesh_gradient 网格不完整（或超过 144 格），降级为首个顶点色`);
+				} else warnings.push(`${what}: mesh_gradient 无法降级，已跳过`);
+			}
 		} else if (kind === "shader") warnings.push(`${what}: shader 填充暂不支持渲染，已跳过`);
 	}
 	if (bgImages.length > 0) decls.unshift(["background-image", bgImages.join(", ")]);
@@ -1256,7 +1713,7 @@ function fillsToCss(fillsRaw, vars, warnings, what) {
 function strokeToCss(node, vars, warnings, what) {
 	const stroke = node["stroke"];
 	if (stroke === void 0) return [];
-	const enabled = (Array.isArray(stroke) ? stroke : [stroke]).filter((e) => !(isRecord$1(e) && e["enabled"] === false));
+	const enabled = (Array.isArray(stroke) ? stroke : [stroke]).filter((e) => !(isRecord$3(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 [];
@@ -1265,8 +1722,8 @@ function strokeToCss(node, vars, warnings, 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") {
+	if (isRecord$3(widthRaw) && align !== "inner") warnings.push(`${what}: 逐边描边宽度 + strokeAlignment=${align} 暂按 inner（CSS border）渲染`);
+	if (!isRecord$3(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`]);
@@ -1276,7 +1733,7 @@ function strokeToCss(node, vars, warnings, what) {
 	if (typeof widthRaw === "number") {
 		decls.push(["border-width", `${widthRaw}px`]);
 		decls.push(["border-style", "solid"]);
-	} else if (isRecord$1(widthRaw)) {
+	} else if (isRecord$3(widthRaw)) {
 		const sides = [];
 		for (const [k, cssName] of [
 			["top", "border-top"],
@@ -1306,10 +1763,10 @@ function effectsToCss(effectsRaw, vars, warnings, what) {
 	let blurPx;
 	let bgBlurPx;
 	for (const e of entries) {
-		if (!isRecord$1(e)) continue;
+		if (!isRecord$3(e)) continue;
 		if (e["type"] === "shadow") {
 			const inner = e["shadowType"] === "inner";
-			const off = isRecord$1(e["offset"]) ? e["offset"] : {};
+			const off = isRecord$3(e["offset"]) ? e["offset"] : {};
 			const x = vars.resolveNum(off["x"]) ?? 0;
 			const y = vars.resolveNum(off["y"]) ?? 0;
 			const b = vars.resolveNum(e["blur"]) ?? 0;
@@ -1325,12 +1782,12 @@ function effectsToCss(effectsRaw, vars, warnings, what) {
 	return decls;
 }
 /** 文本样式；文本颜色来自 fill（实文件如此：text 节点 fill 即字色） */
-function textToCss(node, vars, warnings) {
+function textToCss(node, vars, warnings, fontPreviews) {
 	const decls = [];
 	const num = (k) => vars.resolveNum(node[k]);
 	const str = (k) => typeof node[k] === "string" ? vars.resolve(node[k]) : void 0;
 	const ff = str("fontFamily");
-	if (ff) decls.push(["font-family", ff]);
+	if (ff) decls.push(["font-family", fontPreviews === void 0 ? ff : stackWithPreviews(ff, fontPreviews)]);
 	const fs = num("fontSize");
 	if (fs !== void 0) decls.push(["font-size", `${fs}px`]);
 	const fw = str("fontWeight");
@@ -1507,6 +1964,198 @@ function resolveIconName(library, name) {
 	if (direct !== void 0) return direct;
 	return name;
 }
+// src/render/geometry.ts
+/**
+* 圆弧 / 圆环 / 圆角多边形的几何（C1、C2）。
+*
+* 只产出**路径字符串**，坐标系是画板像素（viewBox = `0 0 w h`），
+* 这样描边宽度不会被非等比缩放拉变形。尺寸拿不到数值时调用方退回旧渲染（+ 警告），
+* 不在几何层猜尺寸。
+*
+* 角度约定（format/spec.yaml §nodes.ellipse）：0° 在正右、逆时针为正、sweep 正逆负顺；
+* 而 SVG 的 y 轴向下、sweep-flag=1 是顺时针，所以正向扇形的 flag 是 0。
+*/
+function isRecord$2(v) {
+	return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+/** 角度 → 椭圆上的点（度，0° 正右，逆时针为正；渲染坐标系 y 向下） */
+function ellipsePoint(cx, cy, rx, ry, deg) {
+	const a = deg * Math.PI / 180;
+	return {
+		x: cx + rx * Math.cos(a),
+		y: cy - ry * Math.sin(a)
+	};
+}
+function fmt(n) {
+	return String(Math.round(n * 1e3) / 1e3);
+}
+function arcTo(rx, ry, large, ccw, p) {
+	return `A ${fmt(rx)} ${fmt(ry)} 0 ${large ? 1 : 0} ${ccw ? 0 : 1} ${fmt(p.x)} ${fmt(p.y)}`;
+}
+/** 是否需要走 SVG（整圆实心仍旧用 div 渲染，保证既有产物像素不变） */
+function needsEllipseSvg(input) {
+	const sweep = input.sweepAngle ?? 360;
+	return (input.innerRadius ?? 0) > 0 || Math.abs(sweep) < 360;
+}
+/**
+* 椭圆形状的 SVG path（px 坐标）。
+* - inner=0 + 整圆：不在本函数处理（调用方用 div）
+* - 整圆 + inner>0：外圆 + 内圆（evenodd）
+* - 部分弧：扇形（inner=0）或扇环（inner>0）
+*/
+function ellipsePath(input) {
+	const w = Math.max(1, input.width);
+	const h = Math.max(1, input.height);
+	const cx = w / 2;
+	const cy = h / 2;
+	const rx = w / 2;
+	const ry = h / 2;
+	const start = input.startAngle ?? 0;
+	const sweepRaw = input.sweepAngle ?? 360;
+	const sweep = Math.max(-360, Math.min(360, sweepRaw));
+	const inner = Math.max(0, Math.min(1, input.innerRadius ?? 0));
+	const full = Math.abs(sweep) >= 360;
+	if (sweep === 0) return "";
+	if (full) {
+		const rix = rx * inner;
+		const riy = ry * inner;
+		if (inner <= 0) return `M ${fmt(cx - rx)} ${fmt(cy)} ${arcTo(rx, ry, false, true, {
+			x: cx + rx,
+			y: cy
+		})} ${arcTo(rx, ry, false, true, {
+			x: cx - rx,
+			y: cy
+		})} Z`;
+		return `${`M ${fmt(cx - rx)} ${fmt(cy)} ${arcTo(rx, ry, false, true, {
+			x: cx + rx,
+			y: cy
+		})} ${arcTo(rx, ry, false, true, {
+			x: cx - rx,
+			y: cy
+		})} Z`} ${`M ${fmt(cx - rix)} ${fmt(cy)} ${arcTo(rix, riy, false, true, {
+			x: cx + rix,
+			y: cy
+		})} ${arcTo(rix, riy, false, true, {
+			x: cx - rix,
+			y: cy
+		})} Z`}`;
+	}
+	const a0 = start;
+	const a1 = start + sweep;
+	const large = Math.abs(sweep) > 180;
+	const ccw = sweep > 0;
+	const p0 = ellipsePoint(cx, cy, rx, ry, a0);
+	const p1 = ellipsePoint(cx, cy, rx, ry, a1);
+	if (inner <= 0) return `M ${fmt(cx)} ${fmt(cy)} L ${fmt(p0.x)} ${fmt(p0.y)} ${arcTo(rx, ry, large, ccw, p1)} Z`;
+	const rix = rx * inner;
+	const riy = ry * inner;
+	const q0 = ellipsePoint(cx, cy, rix, riy, a0);
+	const q1 = ellipsePoint(cx, cy, rix, riy, a1);
+	return [
+		`M ${fmt(p0.x)} ${fmt(p0.y)}`,
+		arcTo(rx, ry, large, ccw, p1),
+		`L ${fmt(q1.x)} ${fmt(q1.y)}`,
+		arcTo(rix, riy, large, !ccw, q0),
+		"Z"
+	].join(" ");
+}
+/** 多边形顶点：−90° 起、按屏幕顺时针排，和旧 clip-path 的位置一致 */
+function polygonPoints(input) {
+	const w = Math.max(1, input.width);
+	const h = Math.max(1, input.height);
+	const n = Math.max(3, Math.round(input.count ?? 3));
+	const cx = w / 2;
+	const cy = h / 2;
+	const rx = w / 2;
+	const ry = h / 2;
+	const pts = [];
+	for (let i = 0; i < n; i++) {
+		const a = (-90 + 360 / n * i) * Math.PI / 180;
+		pts.push({
+			x: cx + rx * Math.cos(a),
+			y: cy + ry * Math.sin(a)
+		});
+	}
+	return pts;
+}
+/**
+* 圆角多边形：每个顶点按内切圆半径 r 退让 d = r / tan(内角/2)，
+* 用二次贝塞尔过顶点圆角。d 被限制在相邻边长的 45% 以内，避免小边被吃穿。
+*/
+function polygonPath(input) {
+	const pts = polygonPoints(input);
+	const n = pts.length;
+	const r = Math.max(0, input.cornerRadius ?? 0);
+	if (r <= 0) return `M ${pts.map((p) => `${fmt(p.x)} ${fmt(p.y)}`).join(" L ")} Z`;
+	const parts = [];
+	for (let i = 0; i < n; i++) {
+		const prev = pts[(i - 1 + n) % n];
+		const cur = pts[i];
+		const next = pts[(i + 1) % n];
+		const v0 = {
+			x: prev.x - cur.x,
+			y: prev.y - cur.y
+		};
+		const v1 = {
+			x: next.x - cur.x,
+			y: next.y - cur.y
+		};
+		const len0 = Math.hypot(v0.x, v0.y) || 1;
+		const len1 = Math.hypot(v1.x, v1.y) || 1;
+		const cos = Math.max(-1, Math.min(1, (v0.x * v1.x + v0.y * v1.y) / (len0 * len1)));
+		const interior = Math.acos(cos);
+		const dWant = interior > 1e-6 ? r / Math.tan(interior / 2) : Number.POSITIVE_INFINITY;
+		const d = Math.min(dWant, len0 * .45, len1 * .45);
+		const a = {
+			x: cur.x + v0.x / len0 * d,
+			y: cur.y + v0.y / len0 * d
+		};
+		const b = {
+			x: cur.x + v1.x / len1 * d,
+			y: cur.y + v1.y / len1 * d
+		};
+		parts.push(i === 0 ? `M ${fmt(a.x)} ${fmt(a.y)}` : `L ${fmt(a.x)} ${fmt(a.y)}`);
+		parts.push(`Q ${fmt(cur.x)} ${fmt(cur.y)} ${fmt(b.x)} ${fmt(b.y)}`);
+	}
+	parts.push("Z");
+	return parts.join(" ");
+}
+/** 顶层实色（填充列表里最后一层生效的 color）；有渐变/图片/关闭层里夹着色时返回只认纯色的那一层 */
+function solidFillColor(fill, vars) {
+	const entries = Array.isArray(fill) ? fill : fill === void 0 ? [] : [fill];
+	let color = null;
+	for (const entry of entries) {
+		if (typeof entry === "string") {
+			color = vars.resolve(entry);
+			continue;
+		}
+		if (!isRecord$2(entry)) continue;
+		if (vars.resolveBool(entry["enabled"]) === false) continue;
+		if (entry["type"] !== "color") return null;
+		const c = entry["color"];
+		if (typeof c === "string") color = vars.resolve(c);
+	}
+	return color;
+}
+/** 单层、单色、非逐边的描边（否则返回 null，调用方降级） */
+function simpleStroke(node, vars) {
+	const raw = node["stroke"];
+	if (raw === void 0) return null;
+	const enabled = (Array.isArray(raw) ? raw : [raw]).filter((e) => !(isRecord$2(e) && vars.resolveBool(e["enabled"]) === false));
+	if (enabled.length !== 1) return null;
+	const entry = enabled[0];
+	const widthRaw = node["strokeWidth"];
+	if (isRecord$2(widthRaw)) return null;
+	let color = null;
+	if (typeof entry === "string") color = vars.resolve(entry);
+	else if (isRecord$2(entry) && entry["type"] === "color" && typeof entry["color"] === "string") color = vars.resolve(entry["color"]);
+	if (color === null) return null;
+	const width = vars.resolveNum(widthRaw) ?? 1;
+	return {
+		color,
+		width
+	};
+}
 // src/render/html.ts
 function escapeHtml(s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -1514,7 +2163,7 @@ function escapeHtml(s) {
 function escapeAttr(s) {
 	return escapeHtml(s).replace(/"/g, "&quot;");
 }
-function isRecord(v) {
+function isRecord$1(v) {
 	return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 /** 'fit_content(120)' → 120（sizing 字符串内的回退值） */
@@ -1661,9 +2310,75 @@ function boardAttrs(node, vars) {
 		`data-board-h="${numStr(box.h)}"`
 	];
 }
-function renderNode(node, parentLayout, vars, warnings, extraAttrs = []) {
+function planSvgShape(node, type, vars) {
+	if (type === "ellipse") {
+		const sweep = vars.resolveNum(node["sweepAngle"]);
+		const inner = vars.resolveNum(node["innerRadius"]);
+		const start = vars.resolveNum(node["startAngle"]);
+		if (!needsEllipseSvg({
+			width: 1,
+			height: 1,
+			...start !== void 0 ? { startAngle: start } : {},
+			...sweep !== void 0 ? { sweepAngle: sweep } : {},
+			...inner !== void 0 ? { innerRadius: inner } : {}
+		})) return null;
+		const w = numericSize(node["width"], vars);
+		const h = numericSize(node["height"], vars);
+		if (w === void 0 || h === void 0) return { reason: "弧形/圆环需要显式宽高，暂按整圆渲染" };
+		const rawFill = node["fill"];
+		const fill = rawFill === void 0 ? null : solidFillColor(rawFill, vars);
+		if (rawFill !== void 0 && fill === null) return { reason: "弧形/圆环只支持纯色填充，暂按整圆/实心渲染" };
+		const stroke = simpleStroke(node, vars);
+		return { shape: {
+			path: ellipsePath({
+				width: w,
+				height: h,
+				...start !== void 0 ? { startAngle: start } : {},
+				...sweep !== void 0 ? { sweepAngle: sweep } : {},
+				...inner !== void 0 ? { innerRadius: inner } : {}
+			}),
+			width: w,
+			height: h,
+			fill,
+			stroke,
+			evenodd: (inner ?? 0) > 0
+		} };
+	}
+	if (type === "polygon") {
+		const radius = vars.resolveNum(node["cornerRadius"]);
+		if (radius === void 0 || radius <= 0) return null;
+		const w = numericSize(node["width"], vars);
+		const h = numericSize(node["height"], vars);
+		if (w === void 0 || h === void 0) return { reason: "多边形圆角需要显式宽高，暂忽略圆角" };
+		const rawFill = node["fill"];
+		const fill = rawFill === void 0 ? null : solidFillColor(rawFill, vars);
+		if (rawFill !== void 0 && fill === null) return { reason: "多边形圆角只支持纯色填充，暂忽略圆角" };
+		const count = vars.resolveNum(node["polygonCount"]);
+		return { shape: {
+			path: polygonPath({
+				width: w,
+				height: h,
+				...count !== void 0 ? { count } : {},
+				cornerRadius: radius
+			}),
+			width: w,
+			height: h,
+			fill,
+			stroke: simpleStroke(node, vars),
+			evenodd: false
+		} };
+	}
+	return null;
+}
+function svgShapeHtml(shape) {
+	const fill = shape.fill === null ? " fill=\"none\"" : ` fill="${escapeAttr(shape.fill)}"`;
+	const rule = shape.evenodd ? " fill-rule=\"evenodd\"" : "";
+	const stroke = shape.stroke === null ? "" : ` stroke="${escapeAttr(shape.stroke.color)}" stroke-width="${numStr(shape.stroke.width)}"`;
+	return `<svg viewBox="0 0 ${numStr(shape.width)} ${numStr(shape.height)}" width="100%" height="100%" preserveAspectRatio="none" style="display:block;width:100%;height:100%"><path d="${escapeAttr(shape.path)}"${fill}${rule}${stroke}/></svg>`;
+}
+function renderNode(node, parentLayout, vars, warnings, extraAttrs = [], fonts) {
 	const type = String(node["type"] ?? "?");
-	const scoped = isRecord(node["theme"]) ? vars.withTheme(node["theme"]) : vars;
+	const scoped = isRecord$1(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";
@@ -1680,13 +2395,15 @@ function renderNode(node, parentLayout, vars, warnings, extraAttrs = []) {
 	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));
+	const plan = planSvgShape(node, type, scoped);
+	const svgShape = plan !== null && "shape" in plan ? plan.shape : null;
+	if (type !== "text" && svgShape === null) css.push(...fillsToCss(node["fill"], scoped, warnings, label));
+	if (svgShape === null) 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, scoped, warnings));
+			css.push(...textToCss(node, scoped, warnings, fonts?.previews));
 			inner = escapeHtml(typeof node["content"] === "string" ? scoped.resolve(node["content"]) : "");
 			break;
 		case "icon":
@@ -1710,19 +2427,28 @@ function renderNode(node, parentLayout, vars, warnings, extraAttrs = []) {
 			inner = escapeHtml(typeof node["content"] === "string" ? scoped.resolve(node["content"]) : "");
 			break;
 		}
-		case "ellipse": {
+		case "ellipse":
+			if (svgShape !== null) {
+				inner = svgShapeHtml(svgShape);
+				if (scoped.resolveNum(node["sweepAngle"]) === 0) warnings.push(`${label}: sweepAngle=0，空弧不绘制`);
+				const alignment = node["strokeAlignment"];
+				if (svgShape.stroke !== null && (alignment === "inner" || alignment === "outer")) warnings.push(`${label}: strokeAlignment=${alignment} 在 SVG 形状上暂按 center 渲染`);
+				break;
+			}
+			if (plan !== null && "reason" in plan) warnings.push(`${label}: ${plan.reason}`);
 			css.push(["border-radius", "50%"]);
-			const inner2 = scoped.resolveNum(node["innerRadius"]);
-			if (inner2 !== void 0 && inner2 > 0) warnings.push(`${label}: innerRadius 环形暂按实心椭圆渲染`);
-			const sweep = scoped.resolveNum(node["sweepAngle"]);
-			if (sweep !== void 0 && sweep !== 360) warnings.push(`${label}: 弧形（sweepAngle=${sweep}）暂按整圆渲染`);
 			break;
-		}
 		case "polygon": {
+			if (svgShape !== null) {
+				inner = svgShapeHtml(svgShape);
+				const alignment = node["strokeAlignment"];
+				if (svgShape.stroke !== null && (alignment === "inner" || alignment === "outer")) warnings.push(`${label}: strokeAlignment=${alignment} 在 SVG 形状上暂按 center 渲染`);
+				break;
+			}
 			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}: 多边形圆角暂忽略`);
+			if (plan !== null && "reason" in plan) warnings.push(`${label}: ${plan.reason}`);
 			css.push(["clip-path", polygonClip(n)]);
 			break;
 		}
@@ -1744,7 +2470,7 @@ function renderNode(node, parentLayout, vars, warnings, extraAttrs = []) {
 			if (type === "group" && node["effect"] !== void 0) {}
 	}
 	const kidsRaw = node["children"];
-	const childrenHtml = Array.isArray(kidsRaw) ? kidsRaw.filter(isRecord).map((k) => renderNode(k, effective, scoped, warnings)).join("") : "";
+	const childrenHtml = Array.isArray(kidsRaw) ? kidsRaw.filter(isRecord$1).map((k) => renderNode(k, effective, scoped, warnings, [], fonts)).join("") : "";
 	return openTag(node, css.map(([p, v]) => `${p}:${v}`).join(";"), extraAttrs) + inner + childrenHtml + "</div>";
 }
 const KNOWN_RENDER_TYPES = /* @__PURE__ */ new Set([
@@ -1766,7 +2492,7 @@ function computeCanvas(nodes, vars) {
 	let maxW = 0;
 	let maxH = 0;
 	for (const n of nodes) {
-		if (!isRecord(n)) continue;
+		if (!isRecord$1(n)) continue;
 		const box = nodeBox(n, vars);
 		maxW = Math.max(maxW, box.x + box.w);
 		maxH = Math.max(maxH, box.y + box.h);
@@ -1779,7 +2505,7 @@ function computeCanvas(nodes, vars) {
 function boardBoxes(nodes, vars) {
 	const out = [];
 	for (const n of nodes) {
-		if (!isRecord(n)) continue;
+		if (!isRecord$1(n)) continue;
 		const box = nodeBox(n, vars);
 		const name = typeof n["name"] === "string" && n["name"] !== "" ? n["name"] : void 0;
 		out.push({
@@ -1794,12 +2520,93 @@ function boardBoxes(nodes, vars) {
 	return out;
 }
 /** 渲染整棵（已展开的）树：顶层节点在画布上绝对定位，并带画布元数据 */
-function renderTree(nodes, vars, warnings) {
-	return nodes.filter(isRecord).map((n) => {
-		return renderNode(n, "none", vars, warnings, boardAttrs(n, isRecord(n["theme"]) ? vars.withTheme(n["theme"]) : vars));
+function renderTree(nodes, vars, warnings, fonts) {
+	return nodes.filter(isRecord$1).map((n) => {
+		return renderNode(n, "none", vars, warnings, boardAttrs(n, isRecord$1(n["theme"]) ? vars.withTheme(n["theme"]) : vars), fonts);
 	}).join("");
 }
 // src/render/entry.ts
+function metricsCss(metrics) {
+	if (metrics === void 0) return "";
+	const parts = [];
+	if (metrics.sizeAdjust !== void 0) parts.push(`size-adjust:${metrics.sizeAdjust}`);
+	if (metrics.ascentOverride !== void 0) parts.push(`ascent-override:${metrics.ascentOverride}`);
+	if (metrics.descentOverride !== void 0) parts.push(`descent-override:${metrics.descentOverride}`);
+	if (metrics.lineGapOverride !== void 0) parts.push(`line-gap-override:${metrics.lineGapOverride}`);
+	return parts.length > 0 ? `${parts.join(";")};` : "";
+}
+function faceCss(face) {
+	const src = face.src.startsWith("local(") ? face.src : `url("${face.src}")`;
+	const format = face.format !== void 0 ? ` format("${face.format}")` : "";
+	return `@font-face{font-family:${JSON.stringify(face.family)};src:${src}${format};${metricsCss(face.metrics)}}`;
+}
+function isRecord(v) {
+	return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+/** 探针要检查的 family：注册表里的、默认栈里的、文档里写死的 */
+function collectProbeFamilies(nodes, plan) {
+	const set = /* @__PURE__ */ new Set();
+	for (const family of Object.keys(plan?.previews ?? {})) set.add(family);
+	for (const family of splitFontStack(plan?.defaultStack ?? "\"Inter Variable\", \"Noto Sans SC Variable\", system-ui, -apple-system, \"Segoe UI\", sans-serif")) if (!isGenericFamily(family)) set.add(family);
+	const walk = (list) => {
+		for (const raw of list) {
+			if (!isRecord(raw)) continue;
+			if (raw["type"] === "text" && typeof raw["fontFamily"] === "string" && !raw["fontFamily"].startsWith("$")) {
+				for (const family of splitFontStack(raw["fontFamily"])) if (!isGenericFamily(family)) set.add(family);
+			}
+			const kids = raw["children"];
+			if (Array.isArray(kids)) walk(kids);
+		}
+	};
+	walk(nodes);
+	return [...set];
+}
+/**
+* 字体 CSS 异步加载：外链样式表会阻塞 load（测试与首屏都不该等 CDN），
+* 于是用脚本注入；`window.__paintressFontsReady` 给自己人（探针 / 截图）一个等待点。
+*/
+function fontLoaderScript(links) {
+	if (links.length === 0) return "";
+	return [
+		"<script>",
+		"(function(){",
+		`var hrefs=${JSON.stringify(links).replace(/</g, "\\u003c")};`,
+		"var loads=hrefs.map(function(href){return new Promise(function(resolve){",
+		"var l=document.createElement(\"link\");l.rel=\"stylesheet\";l.href=href;l.onload=resolve;l.onerror=resolve;document.head.appendChild(l);",
+		"});});",
+		"window.__paintressFontsReady=Promise.all(loads).then(function(){",
+		"return document.fonts&&document.fonts.ready?document.fonts.ready:null;});",
+		"})();",
+		"<\/script>"
+	].join("\n");
+}
+/**
+* 字体可用性探针（宽度法）：`document.fonts.check()` 对缺失的系统字体也返回 true，
+* 只有「候选 family 与缺失基线的宽度是否相同」能区分。
+*/
+function probeScript(families) {
+	if (families.length === 0) return "";
+	return [
+		"<script type=\"application/json\" id=\"ptr-fonts\">",
+		JSON.stringify(families).replace(/</g, "\\u003c").replace(/[\u2028\u2029]/g, (ch) => "\\u" + ch.charCodeAt(0).toString(16)),
+		"<\/script>",
+		"<script>",
+		"(function(){",
+		"var el=document.getElementById(\"ptr-fonts\");if(!el||window.parent===window)return;",
+		"var families=[];try{families=JSON.parse(el.textContent||\"[]\")}catch(e){return}",
+		"if(!families.length)return;",
+		"var c=document.createElement(\"canvas\").getContext(\"2d\");",
+		"var text=\"漢字Abc123 光伴\";",
+		"function w(f,b){c.font='32px \"'+f+'\", '+b;return c.measureText(text).width}",
+		"function missing(){var sb=w(\"__paintress_missing__\",\"serif\"),mb=w(\"__paintress_missing__\",\"monospace\");",
+		"var out=[];for(var i=0;i<families.length;i++){var f=families[i];",
+		"if(Math.abs(w(f,\"serif\")-sb)<0.5&&Math.abs(w(f,\"monospace\")-mb)<0.5)out.push(f)}return out}",
+		"function send(){var m=missing();var data={type:\"paintress-fonts\",checked:families,missing:m};window.parent.postMessage(data,\"*\");if(window.PAINTRESS_FONT_URL){fetch(window.PAINTRESS_FONT_URL,{method:\"POST\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify({checked:families,missing:m})}).catch(function(){})}}",
+		"Promise.resolve(window.__paintressFontsReady).then(function(){setTimeout(send,50)});",
+		"})();",
+		"<\/script>"
+	].join("\n");
+}
 /**
 * 渲染入口（决策 2/3/4/5 的兑现）：
 * 变量内联解析 → ref 展开 → 树 → HTML（每节点 data-node-id）。
@@ -1808,11 +2615,23 @@ function renderTree(nodes, vars, warnings) {
 function renderDocument(doc, opts = {}) {
 	const warnings = [];
 	const vars = makeVarResolver(doc, warnings);
-	const expanded = expandRefs(doc, warnings);
-	const canvas = computeCanvas(expanded, vars);
-	const boards = boardBoxes(expanded, vars);
+	const groups = presetGroupsOf(doc);
+	const seeded = applyPresetRefs(doc.children, groups, warnings);
+	const expanded = expandRefs({
+		...doc,
+		children: seeded
+	}, warnings);
+	const postWarnings = [];
+	const withPresets = applyPresetRefs(expanded, groups, postWarnings);
+	for (const message of postWarnings) if (!warnings.includes(message)) warnings.push(message);
+	const canvas = computeCanvas(withPresets, vars);
+	const boards = boardBoxes(withPresets, vars);
 	const title = opts.title ?? "paintress render";
-	const body = renderTree(expanded, vars, warnings);
+	const body = renderTree(withPresets, vars, warnings, { previews: opts.fonts?.previews ?? {} });
+	const links = [...new Set(opts.fonts?.links ?? [])];
+	const defaultStack = stackWithPreviews(opts.fonts?.defaultStack ?? "\"Inter Variable\", \"Noto Sans SC Variable\", system-ui, -apple-system, \"Segoe UI\", sans-serif", opts.fonts?.previews ?? {});
+	const faces = (opts.fonts?.faces ?? []).map(faceCss);
+	const probe = opts.probeFonts === true ? probeScript(collectProbeFamilies(withPresets, opts.fonts)) : "";
 	return {
 		html: [
 			"<!DOCTYPE html>",
@@ -1823,13 +2642,16 @@ function renderDocument(doc, opts = {}) {
 			"<style>",
 			"* { box-sizing: border-box; margin: 0; padding: 0; }",
 			`body { margin: 0; background: ${opts.transparent === true ? "transparent" : "#ffffff"}; }`,
-			".ptr-canvas { position: relative; }",
+			`.ptr-canvas { position: relative; font-family: ${defaultStack}; }`,
+			...faces,
 			"</style>",
 			"</head>",
 			"<body>",
 			`<div class="ptr-canvas" style="width:${canvas.width}px;height:${canvas.height}px">`,
 			body,
 			"</div>",
+			fontLoaderScript(links),
+			probe,
 			"</body>",
 			"</html>",
 			""
@@ -1839,4 +2661,4 @@ function renderDocument(doc, opts = {}) {
 		boards
 	};
 }
-export { RefSchema as $, genId as A, StrokeAlign as At, EllipseSchema as B, CornerRadius as Bt, update as C, GradientType as Ct, serializeDoc as D, MainAxis as Dt, saveDoc as E, LayoutDir as Et, PtrDocumentSchema as F, TextGrowth as Ft, KNOWN_NODE_TYPES as G, VARIABLE_NAME as Gt, GroupSchema as H, Padding as Ht, VariableDef as I, Affine as It, NodeSchema as J, LayoutBlock as K, VariableRef as Kt, XPaintress as L, BoolOrVar as Lt, DocumentSchema as M, StrokeJoin as Mt, PEN_DOC_VERSION as N, TextAlign as Nt, validateDoc as O, PositionMode as Ot, PTR_SPEC_VERSION as P, TextAlignVertical as Pt, RectangleSchema as Q, X_PAINTRESS_KEY as R, Color as Rt, remove as S, FillRule as St, loadDoc as T, ImageFit as Tt, IconFontSchema as U, Sizing as Ut, FrameSchema as V, NumOrVar as Vt, IconSchema as W, StringOrVar as Wt, PathSchema as X, NoteSchema as Y, PolygonSchema as Z, buildIndex as _, SolidFill as _t, escapeHtml as a, BlurEffect as at, move as b, BlendMode as bt, commonToCss as c, FillEntry as ct, fillsToCss as d, GraphicsBlock as dt, ScriptSchema as et, strokeToCss as f, ImageFill as ft, batch as g, ShadowEffect as gt, makeVarResolver as h, ShaderFill as ht, escapeAttr as i, BackgroundBlurEffect as it, DocumentObjectSchema as j, StrokeCap as jt, collectIds as k, ShadowKind as kt, cornerRadiusToCss as l, Fills as lt, expandRefs as m, ShaderEffect as mt, boardBoxes as n, UnknownNodeSchema as nt, renderTree as o, EffectEntry as ot, textToCss as p, MeshGradientFill as pt, NodeBase as q, VERSION as qt, computeCanvas as r, schemaForType as rt, getLucideIcon as s, Effects as st, renderDocument as t, TextSchema as tt, effectsToCss as u, GradientFill as ut, get as v, StrokeBlock as vt, FileChangedError as w, IconLibrary as wt, query as x, CrossAxis as xt, insert as y, StrokeWidth as yt, BrowserSchema as z, ColorOrVar as zt };
+export { IconFontSchema as $, Sizing as $t, genId as A, BlendMode as At, presetGroupsOf as B, StrokeAlign as Bt, update as C, MeshGradientFill as Ct, serializeDoc as D, SolidFill as Dt, saveDoc as E, ShadowEffect as Et, splitFontStack as F, ImageFit as Ft, PtrDocumentSchema as G, TextGrowth as Gt, DocumentSchema as H, StrokeJoin as Ht, textFontGaps as I, LayoutDir as It, X_PAINTRESS_KEY as J, Color as Jt, VariableDef as K, Affine as Kt, PROP_TOKEN_KIND as L, MainAxis as Lt, isFontSourceKind as M, FillRule as Mt, isGenericFamily as N, GradientType as Nt, validateDoc as O, StrokeBlock as Ot, planFonts as P, IconLibrary as Pt, GroupSchema as Q, Padding as Qt, isNumericPresetValue as R, PositionMode as Rt, remove as S, ImageFill as St, loadDoc as T, ShaderFill as Tt, PEN_DOC_VERSION as U, TextAlign as Ut, DocumentObjectSchema as V, StrokeCap as Vt, PTR_SPEC_VERSION as W, TextAlignVertical as Wt, EllipseSchema as X, CornerRadius as Xt, BrowserSchema as Y, ColorOrVar as Yt, FrameSchema as Z, NumOrVar as Zt, buildIndex as _, Effects as _t, escapeHtml as a, NoteSchema as at, move as b, GradientFill as bt, commonToCss as c, RectangleSchema as ct, fillsToCss as d, TextSchema as dt, StringOrVar as en, IconSchema as et, strokeToCss as f, UnknownNodeSchema as ft, batch as g, EffectEntry as gt, makeVarResolver as h, BlurEffect as ht, escapeAttr as i, NodeSchema as it, fontRegistryOf as j, CrossAxis as jt, collectIds as k, StrokeWidth as kt, cornerRadiusToCss as l, RefSchema as lt, expandRefs as m, BackgroundBlurEffect as mt, boardBoxes as n, VariableRef as nn, LayoutBlock as nt, renderTree as o, PathSchema as ot, textToCss as p, schemaForType as pt, XPaintress as q, BoolOrVar as qt, computeCanvas as r, VERSION as rn, NodeBase as rt, getLucideIcon as s, PolygonSchema as st, renderDocument as t, VARIABLE_NAME as tn, KNOWN_NODE_TYPES as tt, effectsToCss as u, ScriptSchema as ut, get as v, FillEntry as vt, FileChangedError as w, ShaderEffect as wt, query as x, GraphicsBlock as xt, insert as y, Fills as yt, isPresetType as z, ShadowKind as zt };