@hankchen/canvas-editor-vue 0.6.1 → 0.8.0

package/dist/{property-panel-OBqd6D8W.js → property-panel-BkfqRva4.js}

@@ -1,10 +1,9 @@
 import { t as e } from "./createLucideIcon-SCvtEGVf.js";
 import { a as t, c as n, d as r, f as i, i as a, l as o, n as s, p as c, r as l, s as u, t as d, u as f } from "./dist-DGtNmLwo.js";
 import { a as p, i as m, r as h } from "./layerPath-uy2ywyld.js";
-import { o as g, s as _ } from "./popupPosition-Ck5Gsvjy.js";
-import { a as ee, n as v, r as y, t as b } from "./resourceTemplate-cdcQtp9a.js";
-import { a as te, d as x, f as ne, i as re, l as ie, n as S, o as ae, s as oe, t as C, u as se } from "./uploadFile-DbB-KhII.js";
-import { n as ce, r as le, t as ue } from "./usePathCompletion-Do17CQ6l.js";
+import { c as g, l as _, o as ee, s as v, t as y } from "./ExpressionPathPicker-DchGsK70.js";
+import { n as b, r as x, t as S } from "./resourceTemplate-D-DKEo7Z.js";
+import { a as C, f as te, h as ne, i as re, l as ie, m as ae, n as oe, o as se, p as ce, s as le, t as ue } from "./uploadFile-mXJVPEzm.js";
 import { Fragment as w, computed as T, createBlock as E, createCommentVNode as D, createElementBlock as O, createElementVNode as k, createTextVNode as de, createVNode as A, defineComponent as j, inject as fe, markRaw as M, nextTick as pe, normalizeClass as N, onScopeDispose as me, openBlock as P, provide as he, ref as F, renderList as I, resolveDynamicComponent as ge, shallowRef as L, toDisplayString as R, unref as z, vModelText as _e, watch as B, watchEffect as ve, withCtx as ye, withDirectives as be, withModifiers as V } from "vue";
 var xe = e({
 	name: "grid-2x2",
@@ -170,6 +169,38 @@ var Te = "当前层内容未绘制，padding 不影响预览", H = {
 		}
 	]
 }, Ee = {
+	title: "文本",
+	fields: [
+		{
+			key: ["text"],
+			label: "内容",
+			control: "textarea",
+			data: !0
+		},
+		{
+			key: ["font"],
+			label: "字体",
+			control: "font"
+		},
+		{
+			key: ["fontSize"],
+			label: "字号",
+			control: "number",
+			integer: !0,
+			min: 1
+		},
+		{
+			key: ["fontColor"],
+			label: "字色",
+			control: "color"
+		},
+		{
+			key: ["autowrap"],
+			label: "自动换行",
+			control: "boolean"
+		}
+	]
+}, De = "cover", Oe = "contain", ke = {
 	ImageLayer: [
 		H,
 		U,
@@ -182,6 +213,15 @@ var Te = "当前层内容未绘制，padding 不影响预览", H = {
 				control: "imageSrc",
 				data: !0,
 				resource: !0
+			}, {
+				key: ["fit"],
+				label: "适配",
+				control: "select",
+				domain: [De, Oe],
+				optionLabels: {
+					[De]: "铺满裁切",
+					[Oe]: "完整显示"
+				}
 			}]
 		}
 	],
@@ -189,39 +229,7 @@ var Te = "当前层内容未绘制，padding 不影响预览", H = {
 		H,
 		U,
 		W,
-		{
-			title: "文本",
-			fields: [
-				{
-					key: ["text"],
-					label: "内容",
-					control: "textarea",
-					data: !0
-				},
-				{
-					key: ["font"],
-					label: "字体",
-					control: "font"
-				},
-				{
-					key: ["fontSize"],
-					label: "字号",
-					control: "number",
-					integer: !0,
-					min: 1
-				},
-				{
-					key: ["fontColor"],
-					label: "字色",
-					control: "color"
-				},
-				{
-					key: ["autowrap"],
-					label: "自动换行",
-					control: "boolean"
-				}
-			]
-		}
+		Ee
 	],
 	QrCodeLayer: [
 		H,
@@ -246,11 +254,8 @@ var Te = "当前层内容未绘制，padding 不影响预览", H = {
 			title: "数据",
 			fields: [{
 				key: ["rowsPath"],
-				label: "数据行路径",
-				control: "text",
-				placeholder: "如 order.items",
-				nonEmpty: !0,
-				completion: "rowsPath",
+				label: "取行路径",
+				control: "rowsPath",
 				visibleWhen: (e) => e.type === "TableLayer" && e.template !== null
 			}]
 		}
@@ -280,15 +285,15 @@ var Te = "当前层内容未绘制，padding 不影响预览", H = {
 		}]
 	}]
 };
-function De(e) {
-	return Ee[e] ?? [];
+function Ae(e) {
+	return ke[e] ?? [];
 }
-function Oe(e) {
+function je(e) {
 	if (e[e.length - 1] === "content") return h(e) ? "templateContent" : "content";
 	let t = e[e.length - 2];
 	return t === "rows" ? "row" : t === "cells" ? "cell" : "root";
 }
-var ke = {
+var Me = {
 	root: [],
 	cell: [],
 	row: ["shape.width", "shape.autoWidth"],
@@ -303,9 +308,9 @@ var ke = {
 function G(e, t) {
 	return [...e.key, ...t.key];
 }
-function Ae(e, t) {
-	let n = new Set(ke[Oe(e)]), r = [];
-	for (let e of De(t.type)) {
+function K(e, t) {
+	let n = new Set(Me[je(e)]), r = [];
+	for (let e of Ae(t.type)) {
 		let i = [];
 		for (let r of e.fields) {
 			if (r.items) {
@@ -325,7 +330,7 @@ function Ae(e, t) {
 	}
 	return r;
 }
-var je = [{
+var Ne = [{
 	title: "画布",
 	fields: [{
 		key: ["width"],
@@ -340,8 +345,36 @@ var je = [{
 		integer: !0,
 		min: 1
 	}]
+}, {
+	title: "背景",
+	fields: [{
+		key: ["background", "color"],
+		label: "背景色",
+		control: "color",
+		nullable: !0
+	}, {
+		key: ["background", "image"],
+		label: "背景图",
+		control: "imageSrc"
+	}]
 }];
-function K(e, t) {
+function Pe(e) {
+	return e === null ? null : e.background === null ? {
+		...e,
+		background: Fe
+	} : e;
+}
+var Fe = {
+	color: null,
+	image: null
+};
+function Ie(e) {
+	return e.type === "ImageLayer" && e.fit === void 0 ? {
+		...e,
+		fit: "cover"
+	} : e;
+}
+function q(e, t) {
 	let n = e;
 	for (let e = 0; e < t.length; e += 1) {
 		if (typeof n != "object" || !n) return { ok: !1 };
@@ -354,14 +387,14 @@ function K(e, t) {
 }
 //#endregion
 //#region src/property-panel/fields/AlignField.vue?vue&type=script&setup=true&lang.ts
-var Me = ["aria-label"], Ne = [
+var Le = ["aria-label"], Re = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], Pe = {
+], ze = {
 	key: 1,
 	class: "truncate px-1 text-[10px] leading-none"
-}, Fe = /* @__PURE__ */ j({
+}, Be = /* @__PURE__ */ j({
 	__name: "AlignField",
 	props: {
 		field: {},
@@ -420,31 +453,31 @@ var Me = ["aria-label"], Ne = [
 			"aria-pressed": t.value === e.modelValue,
 			title: t.title,
 			onClick: V((e) => m(t.value), ["prevent"])
-		}, [t.icon ? (P(), E(_, {
+		}, [t.icon ? (P(), E(g, {
 			key: 0,
 			icon: t.icon
-		}, null, 8, ["icon"])) : (P(), O("span", Pe, R(t.value), 1))], 10, Ne))), 128))], 8, Me));
+		}, null, 8, ["icon"])) : (P(), O("span", ze, R(t.value), 1))], 10, Re))), 128))], 8, Le));
 	}
-}), Ie = { class: "block" }, Le = ["aria-expanded", "title"], Re = { class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted" }, ze = { class: "flex shrink-0 items-center gap-1.5" }, Be = {
+}), Ve = { class: "block" }, He = ["aria-expanded", "title"], Ue = { class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted" }, We = { class: "flex shrink-0 items-center gap-1.5" }, Ge = {
 	viewBox: "0 0 24 24",
 	class: "size-3.5",
 	"aria-hidden": "true"
-}, Ve = [
+}, Ke = [
 	"cx",
 	"cy",
 	"r"
-], He = {
+], qe = {
 	key: 0,
 	class: "mt-2 flex justify-end"
-}, Ue = {
+}, Je = {
 	class: "cn-anchor grid w-[66px] shrink-0 grid-cols-3 gap-[3px]",
 	role: "group",
 	"aria-label": "九宫锚点"
-}, We = [
+}, Ye = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], Ge = /* @__PURE__ */ j({
+], Xe = /* @__PURE__ */ j({
 	__name: "AnchorDisclosureField",
 	props: {
 		field: {},
@@ -464,31 +497,31 @@ var Me = ["aria-label"], Ne = [
 		function s(e) {
 			r("change", e);
 		}
-		return (t, n) => (P(), O("span", Ie, [k("button", {
+		return (t, n) => (P(), O("span", Ve, [k("button", {
 			type: "button",
 			class: "cn-anchor-disclosure__header flex w-full items-center justify-between gap-2",
 			"aria-expanded": e.expanded,
 			title: e.expanded ? "收起锚点" : `锚点：${e.modelValue}（点击展开调整）`,
 			onClick: n[0] ||= (e) => r("toggle")
-		}, [k("span", Re, R(e.field.label), 1), k("span", ze, [(P(), O("svg", Be, [(P(!0), O(w, null, I(z(a), (e) => (P(), O("circle", {
+		}, [k("span", Ue, R(e.field.label), 1), k("span", We, [(P(), O("svg", Ge, [(P(!0), O(w, null, I(z(a), (e) => (P(), O("circle", {
 			key: e.index,
 			cx: e.cx,
 			cy: e.cy,
 			r: e.index === o.value ? 3.2 : 2.2,
 			class: N(e.index === o.value ? "fill-cn-accent" : "fill-cn-muted/35")
-		}, null, 10, Ve))), 128))])), A(_, {
+		}, null, 10, Ke))), 128))])), A(g, {
 			icon: z(u),
 			class: N(["text-cn-muted transition-transform duration-150", { "rotate-180": e.expanded }])
-		}, null, 8, ["icon", "class"])])], 8, Le), e.expanded ? (P(), O("span", He, [k("span", Ue, [(P(!0), O(w, null, I(z(i), (t) => (P(), O("button", {
+		}, null, 8, ["icon", "class"])])], 8, He), e.expanded ? (P(), O("span", qe, [k("span", Je, [(P(!0), O(w, null, I(z(i), (t) => (P(), O("button", {
 			key: t,
 			type: "button",
 			class: N(["cn-anchor__cell relative aspect-square min-w-0 rounded-[4px] border p-0 transition-colors duration-100", t === e.modelValue ? "cn-anchor__cell--active border-cn-accent bg-cn-accent shadow-[0_0_8px_rgba(56,189,248,0.35)]" : "border-cn-field-line bg-cn-field hover:border-cn-muted/50"]),
 			"aria-pressed": t === e.modelValue,
 			title: t,
 			onClick: (e) => s(t)
-		}, null, 10, We))), 128))])])) : D("", !0)]));
+		}, null, 10, Ye))), 128))])])) : D("", !0)]));
 	}
-}), Ke = { class: "cn-bool relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center" }, qe = ["checked"], Je = /* @__PURE__ */ j({
+}), Ze = { class: "cn-bool relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center" }, Qe = ["checked"], $e = /* @__PURE__ */ j({
 	__name: "BooleanField",
 	props: {
 		field: {},
@@ -502,7 +535,7 @@ var Me = ["aria-label"], Ne = [
 		}
 		return ve(() => {
 			i.value && (i.value.checked = n.modelValue);
-		}), (t, n) => (P(), O("label", Ke, [
+		}), (t, n) => (P(), O("label", Ze, [
 			k("input", {
 				ref_key: "inputRef",
 				ref: i,
@@ -510,12 +543,12 @@ var Me = ["aria-label"], Ne = [
 				type: "checkbox",
 				checked: e.modelValue,
 				onChange: a
-			}, null, 40, qe),
+			}, null, 40, Qe),
 			n[0] ||= k("span", { class: "absolute inset-0 rounded-full border border-cn-field-line bg-cn-field transition-colors duration-150 peer-checked:border-cn-accent/60 peer-checked:bg-cn-accent/30 peer-focus-visible:ring-[3px] peer-focus-visible:ring-cn-accent/20" }, null, -1),
 			n[1] ||= k("span", { class: "relative mx-0.5 size-3 rounded-full bg-cn-muted shadow-sm transition-transform duration-150 peer-checked:translate-x-3 peer-checked:bg-cn-accent" }, null, -1)
 		]));
 	}
-}), Ye = {
+}), et = {
 	1: [{
 		label: "四边",
 		rep: "top",
@@ -558,13 +591,13 @@ var Me = ["aria-label"], Ne = [
 		}
 	]
 };
-function Xe(e) {
+function tt(e) {
 	return e === 1 ? 2 : e === 2 ? 4 : 1;
 }
-function Ze(e) {
+function nt(e) {
 	return e.top === e.bottom && e.bottom === e.left && e.left === e.right ? 1 : e.top === e.bottom && e.left === e.right ? 2 : 4;
 }
-function Qe(e, t) {
+function rt(e, t) {
 	if (t === 1) {
 		let { top: t } = e;
 		return {
@@ -585,17 +618,17 @@ function Qe(e, t) {
 	}
 	return e;
 }
-function $e(e, t) {
+function it(e, t) {
 	return e.top === t.top && e.bottom === t.bottom && e.left === t.left && e.right === t.right;
 }
-function q(e, t) {
+function J(e, t) {
 	return e === null || t === null ? e === t : e.width === t.width && e.color === t.color;
 }
-function et(e) {
+function at(e) {
 	let { top: t, bottom: n, left: r, right: i } = e;
-	return t === null && n === null && r === null && i === null || t !== null && q(t, n) && q(t, r) && q(t, i) ? 1 : q(t, n) && q(r, i) ? 2 : 4;
+	return t === null && n === null && r === null && i === null || t !== null && J(t, n) && J(t, r) && J(t, i) ? 1 : J(t, n) && J(r, i) ? 2 : 4;
 }
-function tt(e, t) {
+function ot(e, t) {
 	let n = (e) => e === null ? null : { ...e };
 	if (t === 1) {
 		let t = n(e.top);
@@ -617,18 +650,18 @@ function tt(e, t) {
 	}
 	return e;
 }
-function nt(e, t) {
-	return q(e.top, t.top) && q(e.bottom, t.bottom) && q(e.left, t.left) && q(e.right, t.right);
+function st(e, t) {
+	return J(e.top, t.top) && J(e.bottom, t.bottom) && J(e.left, t.left) && J(e.right, t.right);
 }
 //#endregion
 //#region src/property-panel/useShorthandMode.ts
-function rt(e, t) {
+function ct(e, t) {
 	let n = T(() => t(e())), r = F(null), i = T(() => r.value ?? n.value);
 	B(e, () => {
 		r.value = null;
 	});
 	function a() {
-		let e = i.value, t = Xe(e);
+		let e = i.value, t = tt(e);
 		return r.value = t, {
 			from: e,
 			to: t
@@ -641,7 +674,7 @@ function rt(e, t) {
 }
 //#endregion
 //#region src/property-panel/controlStyles.ts
-var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-field text-[11.5px] leading-none text-cn-fg outline-none transition-[border-color,box-shadow,background-color] duration-100 placeholder:text-cn-muted/60 hover:border-cn-muted/40 focus:border-cn-accent/70 focus:ring-[3px] focus:ring-cn-accent/15 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-cn-field-line", Y = `${J} text-right font-mono tabular-nums`, it = J, at = "w-full flex-1 min-w-0 resize-y rounded-md border border-cn-field-line bg-cn-field px-2 py-1.5 text-[11.5px] leading-5 text-cn-fg outline-none transition-[border-color,box-shadow] duration-100 placeholder:text-cn-muted/60 hover:border-cn-muted/40 focus:border-cn-accent/70 focus:ring-[3px] focus:ring-cn-accent/15 disabled:cursor-not-allowed disabled:opacity-40", ot = "size-7 shrink-0 cursor-pointer self-center rounded-md border border-cn-field-line bg-cn-field p-0.5 transition-colors hover:border-cn-muted/40 disabled:cursor-not-allowed disabled:opacity-40", st = ["aria-label"], ct = /* @__PURE__ */ j({
+var Y = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-field text-[11.5px] leading-none text-cn-fg outline-none transition-[border-color,box-shadow,background-color] duration-100 placeholder:text-cn-muted/60 hover:border-cn-muted/40 focus:border-cn-accent/70 focus:ring-[3px] focus:ring-cn-accent/15 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-cn-field-line", X = `${Y} text-right font-mono tabular-nums`, lt = Y, ut = "w-full flex-1 min-w-0 resize-y rounded-md border border-cn-field-line bg-cn-field px-2 py-1.5 text-[11.5px] leading-5 text-cn-fg outline-none transition-[border-color,box-shadow] duration-100 placeholder:text-cn-muted/60 hover:border-cn-muted/40 focus:border-cn-accent/70 focus:ring-[3px] focus:ring-cn-accent/15 disabled:cursor-not-allowed disabled:opacity-40", dt = "size-7 shrink-0 cursor-pointer self-center rounded-md border border-cn-field-line bg-cn-field p-0.5 transition-colors hover:border-cn-muted/40 disabled:cursor-not-allowed disabled:opacity-40", ft = ["aria-label"], pt = /* @__PURE__ */ j({
 	__name: "BorderWidthInput",
 	props: {
 		value: {},
@@ -681,7 +714,7 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 		}
 		return (t, n) => be((P(), O("input", {
 			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
-			class: N(["cn-field cn-field--number min-w-0 flex-1", z(Y)]),
+			class: N(["cn-field cn-field--number min-w-0 flex-1", z(X)]),
 			type: "number",
 			"aria-label": e.label,
 			min: 0,
@@ -692,9 +725,9 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 			onFocus: n[1] ||= (e) => a.value = !0,
 			onBlur: u,
 			onChange: u
-		}, null, 42, st)), [[_e, i.value]]);
+		}, null, 42, ft)), [[_e, i.value]]);
 	}
-}), lt = ["aria-label", "title"], ut = /* @__PURE__ */ j({
+}), mt = ["aria-label", "title"], ht = /* @__PURE__ */ j({
 	__name: "ShorthandModeButton",
 	props: {
 		mode: {},
@@ -722,17 +755,17 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 			"aria-label": o.value,
 			title: o.value,
 			onClick: t[0] ||= V((e) => r("cycle"), ["prevent"])
-		}, [A(_, {
+		}, [A(g, {
 			icon: a.value.icon,
 			size: 12
-		}, null, 8, ["icon"])], 8, lt));
+		}, null, 8, ["icon"])], 8, mt));
 	}
-}), dt = { class: "cn-border flex w-full min-w-0 items-center gap-1" }, ft = { class: "grid min-w-0 flex-1 gap-1 grid-cols-1" }, pt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, mt = [
+}), gt = { class: "cn-border flex w-full min-w-0 items-center gap-1" }, _t = { class: "grid min-w-0 flex-1 gap-1 grid-cols-1" }, vt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, yt = [
 	"value",
 	"disabled",
 	"onInput",
 	"onChange"
-], X = "#000000", ht = /* @__PURE__ */ j({
+], bt = "#000000", xt = /* @__PURE__ */ j({
 	__name: "BorderField",
 	props: {
 		field: {},
@@ -740,12 +773,12 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { mode: i, cycle: a } = rt(() => n.modelValue, et), o = T(() => Ye[i.value]);
+		let n = e, r = t, { mode: i, cycle: a } = ct(() => n.modelValue, at), o = T(() => et[i.value]);
 		function s(e) {
 			return n.modelValue[e.rep]?.width ?? null;
 		}
 		function c(e) {
-			return n.modelValue[e.rep]?.color ?? X;
+			return n.modelValue[e.rep]?.color ?? bt;
 		}
 		function l(e, t, i) {
 			let a = { ...n.modelValue };
@@ -753,7 +786,7 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 			r(i ? "change" : "input", a);
 		}
 		function u(e, t, r) {
-			let i = n.modelValue[e.rep]?.color ?? X;
+			let i = n.modelValue[e.rep]?.color ?? bt;
 			l(e, t <= 0 ? null : {
 				width: t,
 				color: i
@@ -771,20 +804,20 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 		function f() {
 			let { from: e, to: t } = a();
 			if (t < e) {
-				let e = tt(n.modelValue, t);
-				nt(e, n.modelValue) || r("change", e);
+				let e = ot(n.modelValue, t);
+				st(e, n.modelValue) || r("change", e);
 			}
 		}
-		return (t, n) => (P(), O("span", dt, [A(ut, {
+		return (t, n) => (P(), O("span", gt, [A(ht, {
 			mode: z(i),
 			label: "边框",
 			onCycle: f
-		}, null, 8, ["mode"]), k("span", ft, [(P(!0), O(w, null, I(o.value, (t) => (P(), O("label", {
+		}, null, 8, ["mode"]), k("span", _t, [(P(!0), O(w, null, I(o.value, (t) => (P(), O("label", {
 			key: t.rep,
 			class: "flex items-center gap-1.5"
 		}, [
-			k("span", pt, R(t.label), 1),
-			A(ct, {
+			k("span", vt, R(t.label), 1),
+			A(pt, {
 				class: "cn-border__width",
 				value: s(t),
 				label: t.label,
@@ -804,17 +837,17 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 				disabled: e.modelValue[t.rep] === null,
 				onInput: (e) => d(t, e, !1),
 				onChange: (e) => d(t, e, !0)
-			}, null, 40, mt)
+			}, null, 40, yt)
 		]))), 128))])]));
 	}
-}), gt = ["value"], _t = {
+}), St = ["value"], Ct = {
 	key: 1,
 	class: "flex flex-1 items-center gap-1.5"
-}, vt = ["value"], yt = ["value"], bt = [
+}, wt = ["value"], Tt = ["value"], Et = [
 	"disabled",
 	"title",
 	"data-upload-error"
-], xt = /* @__PURE__ */ j({
+], Dt = /* @__PURE__ */ j({
 	__name: "FontField",
 	props: {
 		field: {},
@@ -866,7 +899,7 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 			if (t.value = "", i !== null && n && !p.value) {
 				p.value = !0;
 				try {
-					let e = await i.uploadFont(await C(n));
+					let e = await i.uploadFont(await ue(n));
 					r("change", e);
 				} catch (e) {
 					m.value = e instanceof Error ? e.message : String(e);
@@ -877,22 +910,22 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 		}
 		return (t, n) => z(i) === null ? (P(), O("input", {
 			key: 0,
-			class: N(["cn-field", z(it)]),
+			class: N(["cn-field", z(lt)]),
 			type: "text",
 			value: e.modelValue,
 			onInput: l,
 			onCompositionstart: u,
 			onCompositionend: d,
 			onChange: f
-		}, null, 42, gt)) : (P(), O("div", _t, [
+		}, null, 42, St)) : (P(), O("div", Ct, [
 			k("select", {
-				class: N(["cn-field cn-select", z(J)]),
+				class: N(["cn-field cn-select", z(Y)]),
 				value: e.modelValue,
 				onChange: s
 			}, [(P(!0), O(w, null, I(a.value, (e) => (P(), O("option", {
 				key: e.value,
 				value: e.value
-			}, R(e.label), 9, yt))), 128))], 42, vt),
+			}, R(e.label), 9, Tt))), 128))], 42, wt),
 			k("input", {
 				ref_key: "fileInput",
 				ref: h,
@@ -909,10 +942,10 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 				title: m.value ?? "上传本机字体（加入清单后可选）",
 				"data-upload-error": m.value ?? void 0,
 				onClick: g
-			}, R(p.value ? "…" : m.value ? "!" : "上传"), 9, bt)) : D("", !0)
+			}, R(p.value ? "…" : m.value ? "!" : "上传"), 9, Et)) : D("", !0)
 		]));
 	}
-}), St = { class: "cn-color flex min-w-0 flex-1 items-center gap-1.5" }, Ct = ["checked"], wt = ["value", "disabled"], Tt = ["value", "disabled"], Et = "#000000", Dt = /* @__PURE__ */ j({
+}), Ot = { class: "cn-color flex min-w-0 flex-1 items-center gap-1.5" }, kt = ["checked"], At = ["value", "disabled"], jt = ["value", "disabled"], Mt = "#000000", Nt = /* @__PURE__ */ j({
 	__name: "ColorField",
 	props: {
 		field: {},
@@ -925,7 +958,7 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 			i.value = e !== null, i.value && (a.value = o(e));
 		});
 		function o(e) {
-			return e !== null && /^#[0-9a-fA-F]{6}$/.test(e) ? e : Et;
+			return e !== null && /^#[0-9a-fA-F]{6}$/.test(e) ? e : Mt;
 		}
 		function s(e) {
 			let t = e.target.checked;
@@ -952,7 +985,7 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 			}
 			a.value = o(t), r("change", t);
 		}
-		return (t, n) => (P(), O("span", St, [
+		return (t, n) => (P(), O("span", Ot, [
 			e.field.nullable ? (P(), O("input", {
 				key: 0,
 				class: "cn-color__toggle size-3.5 shrink-0 cursor-pointer accent-cn-accent",
@@ -960,32 +993,43 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 				title: "启用颜色",
 				checked: i.value,
 				onChange: s
-			}, null, 40, Ct)) : D("", !0),
+			}, null, 40, kt)) : D("", !0),
 			k("input", {
-				class: N(["cn-color__swatch", z(ot)]),
+				class: N(["cn-color__swatch", z(dt)]),
 				type: "color",
 				value: a.value,
 				disabled: !i.value,
 				onInput: c,
 				onChange: l
-			}, null, 42, wt),
+			}, null, 42, At),
 			k("input", {
-				class: N(["cn-color__text min-w-0 flex-1", z(J)]),
+				class: N(["cn-color__text min-w-0 flex-1", z(Y)]),
 				type: "text",
 				value: e.modelValue ?? "",
 				disabled: !i.value,
 				placeholder: "无",
 				onChange: u
-			}, null, 42, Tt)
+			}, null, 42, jt)
 		]));
 	}
 }), Z = Symbol("canvas-image-upload");
-function Ot() {
+function Pt() {
 	return fe(Z, null);
 }
 //#endregion
+//#region src/property-panel/fields/intrinsicSize.ts
+function Ft(e, t) {
+	let n = e, r = t;
+	for (; r !== 0;) [n, r] = [r, n % r];
+	let i = e / n, a = t / n;
+	return Math.max(i, a) <= 32 ? `${i}:${a}` : `${Math.round(e / t * 100) / 100}:1`;
+}
+function It(e, t) {
+	return !Number.isFinite(e) || !Number.isFinite(t) || e <= 0 || t <= 0 ? null : `${e}×${t} · ${Ft(e, t)}`;
+}
+//#endregion
 //#region src/property-panel/fields/TextField.vue?vue&type=script&setup=true&lang.ts
-var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
+var Lt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 	__name: "TextField",
 	props: {
 		field: {},
@@ -1015,7 +1059,7 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 			o(t) || r("change", t);
 		}
 		return (t, n) => (P(), O("input", {
-			class: N(["cn-field", [z(it), a.value ? "cn-field--invalid" : ""]]),
+			class: N(["cn-field", [z(lt), a.value ? "cn-field--invalid" : ""]]),
 			type: "text",
 			value: e.modelValue,
 			placeholder: e.field.placeholder,
@@ -1023,9 +1067,9 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 			onCompositionstart: c,
 			onCompositionend: l,
 			onChange: u
-		}, null, 42, kt));
+		}, null, 42, Lt));
 	}
-}), At = /* @__PURE__ */ j({
+}), Rt = /* @__PURE__ */ j({
 	__name: "ResourceValueField",
 	props: {
 		field: {},
@@ -1038,10 +1082,10 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 	setup(e, { emit: t }) {
 		let n = e, r = t, i = T(() => n.dataMode === "expression"), a = T(() => {
 			let e = n.modelValue ?? "";
-			return i.value ? v(e) ?? e : "";
+			return i.value ? b(e) ?? e : "";
 		});
 		function o(e) {
-			let t = b(e);
+			let t = S(e);
 			r("input", t), r("change", t);
 		}
 		return (t, n) => i.value ? (P(), E(y, {
@@ -1072,17 +1116,20 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 			"disabled"
 		]));
 	}
-}), jt = {
+}), zt = {
 	key: 0,
 	class: "flex flex-col gap-1.5"
-}, Mt = [
+}, Bt = [
 	"disabled",
 	"title",
 	"data-upload-error"
-], Nt = ["src"], Pt = {
+], Vt = ["src"], Ht = {
 	key: 2,
 	class: "relative"
-}, Ft = { class: "flex items-center gap-1.5" }, It = /* @__PURE__ */ j({
+}, Ut = { class: "flex items-center gap-1.5" }, Wt = {
+	key: 0,
+	class: "cn-imagesrc__intrinsic text-[11px] leading-4 text-cn-muted"
+}, Gt = /* @__PURE__ */ j({
 	__name: "ImageSrcField",
 	props: {
 		field: {},
@@ -1094,16 +1141,26 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = Ot(), a = T(() => i !== null && i.canUpload && n.dataMode !== "expression"), o = T(() => typeof n.modelValue == "string" && n.modelValue !== ""), s = T(() => n.resourceStatus === "pending" ? "装载中" : n.resourceStatus === "failed" ? "失败" : null), c = F(!1), l = F(null), u = F(null);
-		function d() {
+		let n = e, r = t, i = Pt(), a = T(() => i !== null && i.canUpload && n.dataMode !== "expression"), o = T(() => typeof n.modelValue == "string" && n.modelValue !== ""), s = T(() => n.resourceStatus === "pending" ? "装载中" : n.resourceStatus === "failed" ? "失败" : null), c = F(!1), l = F(null), u = F(null), d = F(null), f = T(() => d.value === null ? null : It(d.value.width, d.value.height));
+		function p(e) {
+			let t = e.target;
+			d.value = t.naturalWidth > 0 && t.naturalHeight > 0 ? {
+				width: t.naturalWidth,
+				height: t.naturalHeight
+			} : null;
+		}
+		B(() => n.modelValue, () => {
+			d.value = null;
+		});
+		function m() {
 			l.value = null, u.value?.click();
 		}
-		async function f(e) {
+		async function h(e) {
 			let t = e.target, n = t.files?.[0];
 			if (t.value = "", i !== null && n && !c.value) {
 				c.value = !0;
 				try {
-					let e = await i.uploadImage(await C(n));
+					let e = await i.uploadImage(await ue(n));
 					e !== null && r("change", e);
 				} catch (e) {
 					l.value = e instanceof Error ? e.message : String(e);
@@ -1112,42 +1169,44 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 				}
 			}
 		}
-		return (t, n) => a.value ? (P(), O("div", jt, [
+		return (t, n) => a.value ? (P(), O("div", zt, [
 			k("button", {
 				type: "button",
 				class: "cn-imagesrc__thumb relative flex h-16 w-full items-center justify-center overflow-hidden rounded-md border border-dashed border-cn-field-line bg-cn-field/40 text-[11px] leading-none text-cn-muted transition-colors duration-100 hover:border-cn-muted/40 disabled:cursor-not-allowed disabled:opacity-40",
 				disabled: c.value,
 				title: l.value ?? (o.value ? "点击替换图片" : "点击上传图片"),
 				"data-upload-error": l.value ?? void 0,
-				onClick: d
+				onClick: m
 			}, [
 				o.value ? (P(), O("img", {
 					key: 0,
 					src: e.modelValue ?? void 0,
 					class: "absolute inset-0 size-full object-cover",
-					alt: ""
-				}, null, 8, Nt)) : D("", !0),
+					alt: "",
+					onLoad: p,
+					onError: n[0] ||= (e) => d.value = null
+				}, null, 40, Vt)) : D("", !0),
 				s.value ? (P(), O("span", {
 					key: 1,
 					class: N(["cn-imagesrc__status absolute right-1 top-1 rounded bg-cn-bg-elevated/90 px-1 py-0.5 text-[10px] leading-none", e.resourceStatus === "failed" ? "text-red-400" : "text-cn-muted"])
 				}, R(s.value), 3)) : D("", !0),
-				o.value ? D("", !0) : (P(), O("span", Pt, R(c.value ? "…" : l.value ? "!" : "点击上传图片"), 1))
-			], 8, Mt),
+				o.value ? D("", !0) : (P(), O("span", Ht, R(c.value ? "…" : l.value ? "!" : "点击上传图片"), 1))
+			], 8, Bt),
 			k("input", {
 				ref_key: "fileInput",
 				ref: u,
 				type: "file",
 				class: "hidden",
 				accept: "image/*",
-				onChange: f
+				onChange: h
 			}, null, 544),
-			k("div", Ft, [A(Q, {
+			k("div", Ut, [A(Q, {
 				class: "flex-1",
 				field: e.field,
 				"model-value": e.modelValue ?? "",
 				"aria-label": e.field.label,
-				onInput: n[0] ||= (e) => r("input", e),
-				onChange: n[1] ||= (e) => r("change", e)
+				onInput: n[1] ||= (e) => r("input", e),
+				onChange: n[2] ||= (e) => r("change", e)
 			}, null, 8, [
 				"field",
 				"model-value",
@@ -1157,17 +1216,18 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 				type: "button",
 				class: "cn-imagesrc__clear h-7 shrink-0 rounded-md border border-cn-field-line bg-cn-field px-2 text-[11px] leading-none text-cn-fg transition-colors duration-100 hover:border-cn-muted/40",
 				title: "清除图片（资源地址置空）",
-				onClick: n[2] ||= (e) => r("change", "")
-			}, "清除")) : D("", !0)])
-		])) : e.dataMode === "expression" ? (P(), E(At, {
+				onClick: n[3] ||= (e) => r("change", "")
+			}, "清除")) : D("", !0)]),
+			f.value ? (P(), O("span", Wt, "源图 " + R(f.value), 1)) : D("", !0)
+		])) : e.dataMode === "expression" ? (P(), E(Rt, {
 			key: 1,
 			field: e.field,
 			"model-value": e.modelValue,
 			"data-mode": "expression",
 			source: e.source ?? null,
 			disabled: e.disabled,
-			onInput: n[3] ||= (e) => r("input", e),
-			onChange: n[4] ||= (e) => r("change", e)
+			onInput: n[4] ||= (e) => r("input", e),
+			onChange: n[5] ||= (e) => r("change", e)
 		}, null, 8, [
 			"field",
 			"model-value",
@@ -1178,15 +1238,15 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 			field: e.field,
 			"model-value": e.modelValue ?? "",
 			"aria-label": e.field.label,
-			onInput: n[5] ||= (e) => r("input", e),
-			onChange: n[6] ||= (e) => r("change", e)
+			onInput: n[6] ||= (e) => r("input", e),
+			onChange: n[7] ||= (e) => r("change", e)
 		}, null, 8, [
 			"field",
 			"model-value",
 			"aria-label"
 		]));
 	}
-}), Lt = [
+}), Kt = [
 	"aria-label",
 	"min",
 	"max",
@@ -1229,7 +1289,7 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 		}
 		return (t, n) => be((P(), O("input", {
 			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
-			class: N(["cn-field cn-field--number", z(Y)]),
+			class: N(["cn-field cn-field--number", z(X)]),
 			type: "number",
 			"aria-label": e.field.label,
 			min: e.field.min,
@@ -1239,9 +1299,9 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 			onFocus: n[1] ||= (e) => a.value = !0,
 			onBlur: l,
 			onChange: l
-		}, null, 42, Lt)), [[_e, i.value]]);
+		}, null, 42, Kt)), [[_e, i.value]]);
 	}
-}), Rt = { class: "cn-padding flex w-full min-w-0 items-center gap-1.5" }, zt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, Bt = /* @__PURE__ */ j({
+}), qt = { class: "cn-padding flex w-full min-w-0 items-center gap-1.5" }, Jt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, Yt = /* @__PURE__ */ j({
 	__name: "PaddingField",
 	props: {
 		field: {},
@@ -1249,7 +1309,7 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { mode: i, cycle: a } = rt(() => n.modelValue, Ze), o = T(() => Ye[i.value]);
+		let n = e, r = t, { mode: i, cycle: a } = ct(() => n.modelValue, nt), o = T(() => et[i.value]);
 		function s(e) {
 			return {
 				key: ["padding", e.rep],
@@ -1265,18 +1325,18 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 		function l() {
 			let { from: e, to: t } = a();
 			if (t < e) {
-				let e = Qe(n.modelValue, t);
-				$e(e, n.modelValue) || r("change", e);
+				let e = rt(n.modelValue, t);
+				it(e, n.modelValue) || r("change", e);
 			}
 		}
-		return (t, n) => (P(), O("span", Rt, [A(ut, {
+		return (t, n) => (P(), O("span", qt, [A(ht, {
 			mode: z(i),
 			label: "内边距",
 			onCycle: l
 		}, null, 8, ["mode"]), k("span", { class: N(["grid min-w-0 flex-1 gap-1.5", z(i) === 1 ? "grid-cols-1" : "grid-cols-2"]) }, [(P(!0), O(w, null, I(o.value, (t) => (P(), O("label", {
 			key: t.rep,
 			class: "flex min-w-0 items-center gap-1.5"
-		}, [k("span", zt, R(t.label), 1), A($, {
+		}, [k("span", Jt, R(t.label), 1), A($, {
 			class: "min-w-0 flex-1",
 			field: s(t),
 			"model-value": e.modelValue[t.rep],
@@ -1289,16 +1349,16 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 			"onChange"
 		])]))), 128))], 2)]));
 	}
-}), Vt = { class: "grid w-full min-w-0 grid-cols-2 gap-1" }, Ht = ["title"], Ut = { class: "w-3.5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, Wt = [
+}), Xt = { class: "grid w-full min-w-0 grid-cols-2 gap-1" }, Zt = ["title"], Qt = { class: "w-3.5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, $t = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], Gt = [
+], en = [
 	"aria-label",
 	"value",
 	"placeholder",
 	"title"
-], Kt = /* @__PURE__ */ j({
+], tn = /* @__PURE__ */ j({
 	__name: "PairField",
 	props: {
 		field: {},
@@ -1314,7 +1374,7 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 		let n = e, r = t, i = T(() => n.field.items ?? []);
 		function a(e) {
 			if (!e.auto) return !1;
-			let t = K(n.modelValue, e.auto.key);
+			let t = q(n.modelValue, e.auto.key);
 			return t.ok && t.value === !0;
 		}
 		function o(e) {
@@ -1337,7 +1397,7 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 			r("sub-commit", s(e), !a(e), !0);
 		}
 		function u(e) {
-			let t = K(n.modelValue, e.key);
+			let t = q(n.modelValue, e.key);
 			return t.ok && typeof t.value == "number" ? t.value : 0;
 		}
 		function d(e) {
@@ -1354,12 +1414,12 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 			let t = d(e);
 			return t?.preview ? "模板子树：预览盒尺寸（随行实例变化，非文档声明值）" : t === void 0 ? `${e.label}自适应：已开启` : `${e.label}自适应：布局解析值（与画布选择框同源）`;
 		}
-		return (e, t) => (P(), O("span", Vt, [(P(!0), O(w, null, I(i.value, (e) => (P(), O("label", {
+		return (e, t) => (P(), O("span", Xt, [(P(!0), O(w, null, I(i.value, (e) => (P(), O("label", {
 			key: e.key.join("."),
 			class: "flex min-w-0 items-center gap-1",
 			title: e.auto ? void 0 : e.label
 		}, [
-			k("span", Ut, R(e.label), 1),
+			k("span", Qt, R(e.label), 1),
 			e.auto ? (P(), O("button", {
 				key: 0,
 				type: "button",
@@ -1367,17 +1427,17 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 				"aria-pressed": a(e),
 				title: p(e),
 				onClick: V((t) => l(e), ["prevent"])
-			}, "自", 10, Wt)) : D("", !0),
+			}, "自", 10, $t)) : D("", !0),
 			a(e) ? (P(), O("input", {
 				key: 2,
-				class: N(["cn-field cn-field--number min-w-0 flex-1", [z(Y), d(e)?.preview ? "cn-field--preview" : ""]]),
+				class: N(["cn-field cn-field--number min-w-0 flex-1", [z(X), d(e)?.preview ? "cn-field--preview" : ""]]),
 				type: "number",
 				disabled: "",
 				"aria-label": e.label,
 				value: f(e),
 				placeholder: e.auto?.placeholder ?? "",
 				title: m(e)
-			}, null, 10, Gt)) : (P(), E($, {
+			}, null, 10, en)) : (P(), E($, {
 				key: 1,
 				class: "min-w-0 flex-1",
 				field: e,
@@ -1390,9 +1450,38 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 				"onInput",
 				"onChange"
 			]))
-		], 8, Ht))), 128))]));
+		], 8, Zt))), 128))]));
 	}
-}), qt = ["value"], Jt = ["value"], Yt = /* @__PURE__ */ j({
+}), nn = /* @__PURE__ */ j({
+	__name: "RowsPathField",
+	props: {
+		field: {},
+		modelValue: {},
+		source: { type: [Function, null] },
+		disabled: { type: Boolean }
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: t }) {
+		let n = t;
+		function r(e) {
+			n("input", e), n("change", e);
+		}
+		return (t, n) => (P(), E(y, {
+			mode: "rowsPath",
+			"model-value": e.modelValue,
+			source: e.source ?? null,
+			disabled: e.disabled,
+			"aria-label": e.field.label,
+			placeholder: "未选择行路径",
+			"onUpdate:modelValue": r
+		}, null, 8, [
+			"model-value",
+			"source",
+			"disabled",
+			"aria-label"
+		]));
+	}
+}), rn = ["value"], an = ["value"], on = /* @__PURE__ */ j({
 	__name: "SelectField",
 	props: {
 		field: {},
@@ -1408,12 +1497,12 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 			class: "cn-select h-7 w-full min-w-0 flex-1 cursor-pointer appearance-none rounded-md border border-cn-field-line bg-cn-field py-0 pl-2 pr-6 text-[11px] leading-none text-cn-fg outline-none transition-[border-color,box-shadow] duration-100 hover:border-cn-muted/40 focus:border-cn-accent/70 focus:ring-[3px] focus:ring-cn-accent/15 disabled:cursor-not-allowed disabled:opacity-40",
 			value: e.modelValue,
 			onChange: r
-		}, [(P(!0), O(w, null, I(e.field.domain ?? [], (e) => (P(), O("option", {
-			key: e,
-			value: e
-		}, R(e), 9, Jt))), 128))], 40, qt));
+		}, [(P(!0), O(w, null, I(e.field.domain ?? [], (t) => (P(), O("option", {
+			key: t,
+			value: t
+		}, R(e.field.optionLabels?.[t] ?? t), 9, an))), 128))], 40, rn));
 	}
-}), Xt = ["value", "disabled"], Zt = /* @__PURE__ */ j({
+}), sn = ["value", "disabled"], cn = /* @__PURE__ */ j({
 	__name: "TextareaField",
 	props: {
 		field: {},
@@ -1437,7 +1526,7 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 			r = !1, n("change", e.target.value);
 		}
 		return (t, n) => (P(), O("textarea", {
-			class: N(["cn-field", z(at)]),
+			class: N(["cn-field", z(ut)]),
 			rows: "3",
 			value: e.modelValue,
 			disabled: e.disabled,
@@ -1445,27 +1534,28 @@ var kt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 			onCompositionstart: a,
 			onCompositionend: o,
 			onChange: s
-		}, null, 42, Xt));
+		}, null, 42, sn));
 	}
-}), Qt = {
+}), ln = {
 	number: M($),
 	text: M(Q),
-	textarea: M(Zt),
-	color: M(Dt),
-	select: M(Yt),
-	boolean: M(Je),
-	pair: M(Kt),
-	anchor: M(Ge),
-	align: M(Fe),
-	padding: M(Bt),
-	border: M(ht),
-	font: M(xt),
-	imageSrc: M(It),
-	resourceValue: M(At)
+	textarea: M(cn),
+	color: M(Nt),
+	select: M(on),
+	boolean: M($e),
+	pair: M(tn),
+	anchor: M(Xe),
+	align: M(Be),
+	padding: M(Yt),
+	border: M(xt),
+	font: M(Dt),
+	imageSrc: M(Gt),
+	resourceValue: M(Rt),
+	rowsPath: M(nn)
 };
 //#endregion
 //#region src/property-panel/usePropertyPanel.ts
-function $t(e) {
+function un(e) {
 	let t = L(e.store.doc), n = L(e.store.ui.selection), r = L(e.store.ui.anchorExpanded), i = L(e.store.ui.dataSourceSchema), a = L(e.store.ui.resourceStatuses), o = L(e.store.ui.editing), s = e.subscribe((s) => {
 		s.scope === "doc" ? (t.value = e.store.doc, n.value = e.store.ui.selection, a.value = e.store.ui.resourceStatuses, o.value = e.store.ui.editing) : s.scope === "ui" && (s.branch === "selection" ? (n.value = e.store.ui.selection, e.store.closeMerge()) : s.branch === "anchorExpanded" ? r.value = e.store.ui.anchorExpanded : s.branch === "dataSourceSchema" ? i.value = e.store.ui.dataSourceSchema : s.branch === "resourceStatuses" ? a.value = e.store.ui.resourceStatuses : s.branch === "editing" && (o.value = e.store.ui.editing));
 	});
@@ -1475,37 +1565,40 @@ function $t(e) {
 		return e && r ? p(e, r) : null;
 	}), l = T(() => t.value), u = T(() => {
 		let e = c.value, r = n.value;
-		return e && r ? Ae(r, e) : t.value ? je : [];
+		return e && r ? K(r, e) : t.value ? Ne : [];
 	}), d = T(() => {
 		let r = n.value;
 		return r && t.value ? e.layerBoxAt(r) : null;
 	}), f = T(() => {
 		let e = i.value;
-		return e === null ? null : se(e, x(e, t.value, n.value));
-	}), h = T(() => ce(le(t.value, n.value, i.value))), g = T(() => n.value?.includes("template") ?? !1), _ = T(() => {
+		return e === null ? null : te(e, ce(e, t.value, n.value));
+	}), h = T(() => _(t.value, n.value, i.value)), g = T(() => ee(h.value)), y = T(() => {
+		let e = c.value;
+		return e === null || e.type !== "TableLayer" || e.template === null ? !1 : v(h.value, e.rowsPath);
+	}), b = T(() => n.value?.includes("template") ?? !1), x = T(() => {
 		let e = o.value, t = n.value;
 		return e !== null && t !== null && m(e.path, t);
 	});
-	function ee(t) {
+	function S(t) {
 		e.store.setAnchorExpanded(t);
 	}
-	function v(e) {
+	function C(e) {
 		if (!e.data) return !1;
-		if (_.value) return o.value?.expression === !0;
+		if (x.value) return o.value?.expression === !0;
 		let t = c.value;
 		return t !== null && "expression" in t && t.expression !== null;
 	}
-	function y(r, i, a) {
+	function ne(r, i, a) {
 		if (!t.value) return;
 		let o = n.value;
 		if (!o) {
-			te(r, i, a);
+			ie(r, i, a);
 			return;
 		}
-		let s = S(o, r.key);
+		let s = oe(o, r.key);
 		if (r.data) {
-			if (v(r)) {
-				let t = S(o, ["data", "expression"]);
+			if (C(r)) {
+				let t = oe(o, ["data", "expression"]);
 				e.updateDataExpression(o, i, { mergeKey: t }), a && e.store.closeMerge(t);
 				return;
 			}
@@ -1514,45 +1607,59 @@ function $t(e) {
 		}
 		e.updateSpec(o, r.key, i, { mergeKey: s }), a && e.store.closeMerge(s);
 	}
-	function b(t) {
+	function re(t) {
 		let r = n.value;
 		r && t.data && e.toggleDataMode(r);
 	}
-	function te(t, n, r) {
+	function ie(t, n, r) {
 		let i = t.key[0];
+		if (i === "background") {
+			ae(t, n, r);
+			return;
+		}
 		if (i !== "width" && i !== "height" || typeof n != "number") return;
 		let a = `canvas:${i}`;
 		e.updateCanvasProp(i, n, { mergeKey: a }), r && e.store.closeMerge(a);
 	}
+	function ae(t, n, r) {
+		let i = t.key[1];
+		if (i !== "color" && i !== "image") return;
+		let a = l.value?.background ?? Fe, o = typeof n == "string" && n !== "" ? n : null, s = {
+			...a,
+			[i]: o
+		}, c = `canvas:background.${i}`;
+		e.updateCanvasProp("background", s, { mergeKey: c }), r && e.store.closeMerge(c);
+	}
 	return {
 		selection: T(() => n.value),
 		layer: c,
 		canvas: l,
 		sections: u,
 		layerBox: d,
-		isPreviewBox: g,
+		isPreviewBox: b,
 		completionSource: f,
-		rowsPathSource: h,
+		rowsPathSource: g,
+		rowsPathDrifted: y,
 		resourceStatuses: T(() => a.value),
 		anchorExpanded: T(() => r.value),
-		contentLocked: _,
+		contentLocked: x,
 		editingSession: T(() => o.value),
-		isDataMarked: v,
-		commit: y,
-		toggleDataMode: b,
-		setAnchorExpanded: ee
+		isDataMarked: C,
+		commit: ne,
+		toggleDataMode: re,
+		setAnchorExpanded: S
 	};
 }
 //#endregion
 //#region src/property-panel/fields/ValueTypeSegmented.vue?vue&type=script&setup=true&lang.ts
-var en = ["aria-disabled"], tn = [
+var dn = ["aria-disabled"], fn = [
 	"aria-pressed",
 	"title",
 	"data-mode-static",
 	"data-mode-expression",
 	"disabled",
 	"onClick"
-], nn = /* @__PURE__ */ j({
+], pn = /* @__PURE__ */ j({
 	__name: "ValueTypeSegmented",
 	props: {
 		mode: {},
@@ -1587,15 +1694,15 @@ var en = ["aria-disabled"], tn = [
 			"data-mode-expression": t.value === "expression" || void 0,
 			disabled: e.disabled,
 			onClick: V((e) => a(t.value), ["prevent"])
-		}, R(t.label), 11, tn)), 64))], 10, en));
+		}, R(t.label), 11, fn)), 64))], 10, dn));
 	}
-}), rn = ["title"], an = {
+}), mn = ["title"], hn = {
 	key: 2,
 	class: "cn-prop-field__hint col-span-2 block text-[11px] leading-4 text-cn-muted"
-}, on = ["title"], sn = {
+}, gn = ["title"], _n = {
 	key: 4,
 	class: "cn-prop-field__hint col-span-2 block text-[11px] leading-4 text-cn-muted"
-}, cn = /* @__PURE__ */ j({
+}, vn = /* @__PURE__ */ j({
 	__name: "PropertyField",
 	props: {
 		field: {},
@@ -1605,7 +1712,8 @@ var en = ["aria-disabled"], tn = [
 		completion: { type: [Function, null] },
 		displays: {},
 		hint: {},
-		resourceStatus: {}
+		resourceStatus: {},
+		drifted: { type: Boolean }
 	},
 	emits: [
 		"input",
@@ -1614,28 +1722,23 @@ var en = ["aria-disabled"], tn = [
 		"sub-commit"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = T(() => Qt[n.field.control]), a = T(() => n.dataMode === "expression"), o = T(() => n.field.control === "pair" ? "cn-prop-field block" : "cn-prop-field grid grid-cols-[60px_minmax(0,1fr)] items-center gap-x-2 gap-y-1.5"), s = T(() => n.field.data === !0 ? "col-span-2" : ""), c = T(() => n.field.data === !0 && n.field.control === "textarea"), l = T(() => n.field.completion === "rowsPath"), u = T(() => c.value || l.value), d = T(() => n.field.resource === !0), f = F(null), p = T(() => n.field.data === !0 && a.value && typeof n.value == "string" ? n.field.resource === !0 ? n.value === "" ? [] : ee(n.value) : c.value ? ne(n.value) : [] : []), m = T(() => p.value.length === 0 ? "" : n.field.resource === !0 ? oe(n.completion != null) : ae(p.value)), h = T(() => n.field.resource === !0 && a.value && n.completion == null && p.value.length === 0 ? te : ""), _ = T(() => n.field.control === "textarea");
-		function v() {
-			let e = p.value[0], t = f.value?.$el;
+		let n = e, r = t, i = T(() => ln[n.field.control]), a = T(() => n.dataMode === "expression"), o = T(() => n.field.control === "pair" ? "cn-prop-field block" : "cn-prop-field grid grid-cols-[60px_minmax(0,1fr)] items-center gap-x-2 gap-y-1.5"), s = T(() => n.field.data === !0 ? "col-span-2" : ""), c = T(() => n.field.data === !0 && n.field.control === "textarea"), l = T(() => n.field.control === "rowsPath"), u = T(() => n.field.resource === !0 || l.value), d = F(null), f = T(() => n.field.data === !0 && a.value && typeof n.value == "string" ? n.field.resource === !0 ? n.value === "" ? [] : x(n.value) : c.value ? ne(n.value) : [] : []), p = T(() => f.value.length === 0 ? "" : n.field.resource === !0 ? le(n.completion != null) : se(f.value)), m = T(() => (n.field.resource === !0 ? a.value : l.value) && n.completion == null && f.value.length === 0 ? C : ""), h = T(() => f.value.length > 0 || l.value && n.drifted === !0), g = T(() => n.field.control === "textarea");
+		function _() {
+			let e = f.value[0], t = d.value?.$el;
 			e !== void 0 && (t instanceof HTMLTextAreaElement || t instanceof HTMLInputElement) && (t.focus(), t.setSelectionRange(e.at.start, e.at.end));
 		}
-		let y = T(() => {
-			if (!u.value) return null;
-			let e = f.value?.$el;
+		let ee = T(() => {
+			if (!c.value) return null;
+			let e = d.value?.$el;
 			return e instanceof HTMLTextAreaElement || e instanceof HTMLInputElement ? e : null;
-		}), b = F(null), x = T(() => b.value?.rootEl ?? null), { popup: re, accept: S } = ie({
-			target: y,
+		}), v = F(null), y = T(() => v.value?.rootEl ?? null), { popup: b, accept: S } = ie({
+			target: ee,
 			enabled: () => c.value && a.value && n.completion != null,
 			pairing: () => c.value && a.value,
 			resolve: (e) => n.completion?.(e) ?? null,
-			popupEl: x
-		}), { popup: C, accept: se } = ue({
-			target: y,
-			enabled: () => l.value && n.completion != null,
-			resolve: (e) => n.completion?.(e) ?? null,
-			popupEl: x
+			popupEl: y
 		});
-		function ce(e, t, n) {
+		function te(e, t, n) {
 			r("sub-commit", e, t, n);
 		}
 		return (t, n) => (P(), O(w, null, [(P(), E(ge(e.field.control === "pair" || e.field.control === "imageSrc" ? "div" : "label"), { class: N(o.value) }, {
@@ -1644,8 +1747,8 @@ var en = ["aria-disabled"], tn = [
 					key: 0,
 					class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted",
 					title: e.field.title
-				}, R(e.field.label), 9, rn)),
-				e.field.data ? (P(), E(nn, {
+				}, R(e.field.label), 9, mn)),
+				e.field.data ? (P(), E(pn, {
 					key: 1,
 					class: "justify-self-end",
 					mode: e.dataMode ?? "static",
@@ -1654,21 +1757,21 @@ var en = ["aria-disabled"], tn = [
 				}, null, 8, ["mode", "disabled"])) : D("", !0),
 				(P(), E(ge(i.value), {
 					ref_key: "controlRef",
-					ref: f,
+					ref: d,
 					class: N(["cn-prop-field__control", [s.value, {
 						"cn-field--expression": a.value,
-						"cn-field--invalid": p.value.length > 0
+						"cn-field--invalid": h.value
 					}]]),
 					field: e.field,
 					"model-value": e.value,
 					disabled: e.locked,
 					displays: e.field.control === "pair" ? e.displays : void 0,
 					"data-mode": e.field.control === "imageSrc" || e.field.control === "resourceValue" ? e.dataMode : void 0,
-					source: d.value ? e.completion : void 0,
+					source: u.value ? e.completion : void 0,
 					"resource-status": e.field.control === "imageSrc" ? e.resourceStatus : void 0,
 					onInput: n[1] ||= (e) => r("input", e),
 					onChange: n[2] ||= (e) => r("change", e),
-					onSubCommit: ce
+					onSubCommit: te
 				}, null, 40, [
 					"class",
 					"field",
@@ -1679,56 +1782,50 @@ var en = ["aria-disabled"], tn = [
 					"source",
 					"resource-status"
 				])),
-				e.hint ? (P(), O("span", an, R(e.hint), 1)) : D("", !0),
-				m.value ? (P(), O("span", {
+				e.hint ? (P(), O("span", hn, R(e.hint), 1)) : D("", !0),
+				p.value ? (P(), O("span", {
 					key: 3,
-					class: N(["cn-prop-field__hint cn-prop-field__hint--error col-span-2 block text-[11px] leading-4 text-cn-danger", { "cursor-pointer": _.value }]),
-					title: _.value ? "点击选中出错片段" : void 0,
-					onClick: v
-				}, R(m.value), 11, on)) : D("", !0),
-				h.value ? (P(), O("span", sn, R(h.value), 1)) : D("", !0)
+					class: N(["cn-prop-field__hint cn-prop-field__hint--error col-span-2 block text-[11px] leading-4 text-cn-danger", { "cursor-pointer": g.value }]),
+					title: g.value ? "点击选中出错片段" : void 0,
+					onClick: _
+				}, R(p.value), 11, gn)) : D("", !0),
+				m.value ? (P(), O("span", _n, R(m.value), 1)) : D("", !0)
 			]),
 			_: 1
-		}, 8, ["class"])), c.value ? (P(), E(g, {
+		}, 8, ["class"])), c.value ? (P(), E(ae, {
 			key: 0,
 			ref_key: "popupRef",
-			ref: b,
-			state: z(re),
+			ref: v,
+			state: z(b),
 			onSelect: z(S)
-		}, null, 8, ["state", "onSelect"])) : l.value ? (P(), E(g, {
-			key: 1,
-			ref_key: "popupRef",
-			ref: b,
-			state: z(C),
-			onSelect: z(se)
 		}, null, 8, ["state", "onSelect"])) : D("", !0)], 64));
 	}
-}), ln = { class: "cn-props flex w-[288px] shrink-0 flex-col overflow-y-auto rounded-xl border border-cn-line bg-cn-bg text-cn-fg shadow-[0_16px_40px_-12px_rgba(2,6,23,0.55)]" }, un = { class: "sticky top-0 z-10 border-b border-cn-line bg-cn-bg-elevated/95 px-3.5 py-2.5 backdrop-blur-sm" }, dn = { class: "flex items-center gap-2" }, fn = { class: "inline-flex items-center gap-1.5 rounded border border-cn-accent/25 bg-cn-accent-soft px-1.5 py-0.5 font-mono text-[10px] leading-4 text-cn-accent" }, pn = { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, mn = {
+}), yn = { class: "cn-props flex w-[288px] shrink-0 flex-col overflow-y-auto rounded-xl border border-cn-line bg-cn-bg text-cn-fg shadow-[0_16px_40px_-12px_rgba(2,6,23,0.55)]" }, bn = { class: "sticky top-0 z-10 border-b border-cn-line bg-cn-bg-elevated/95 px-3.5 py-2.5 backdrop-blur-sm" }, xn = { class: "flex items-center gap-2" }, Sn = { class: "inline-flex items-center gap-1.5 rounded border border-cn-accent/25 bg-cn-accent-soft px-1.5 py-0.5 font-mono text-[10px] leading-4 text-cn-accent" }, Cn = { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, wn = {
 	key: 0,
 	class: "mx-3.5 my-4 rounded-lg border border-dashed border-cn-line px-3 py-6 text-center text-[11px] leading-5 text-cn-muted"
-}, hn = { class: "cn-props__section-title mb-2 text-[10px] font-semibold uppercase tracking-[0.16em] text-cn-muted" }, gn = { class: "flex flex-col gap-2" }, _n = "内容编辑中：请在画布编辑框内修改，退出后此处更新", vn = /* @__PURE__ */ j({
+}, Tn = { class: "cn-props__section-title mb-2 text-[10px] font-semibold uppercase tracking-[0.16em] text-cn-muted" }, En = { class: "flex flex-col gap-2" }, Dn = "内容编辑中：请在画布编辑框内修改，退出后此处更新", On = /* @__PURE__ */ j({
 	__name: "PropertyPanel",
 	props: { editor: {} },
 	setup(e) {
-		let t = e, n = $t(t.editor);
+		let t = e, n = un(t.editor);
 		he(Z, {
 			canUpload: t.editor.canUpload,
 			uploadImage: (e) => t.editor.uploadImage(e)
 		});
 		function r(e) {
-			return e.completion === "rowsPath" ? n.rowsPathSource.value : n.completionSource.value;
+			return e.control === "rowsPath" ? n.rowsPathSource.value : n.completionSource.value;
 		}
 		let i = T(() => n.layer.value !== null), a = T(() => {
 			let e = n.layer.value;
 			return e ? e.type : n.canvas.value ? "Canvas" : "—";
 		}), o = T(() => {
-			let e = n.layer.value ?? (n.selection.value ? null : n.canvas.value);
+			let e = n.layer.value === null ? n.selection.value ? null : Pe(n.canvas.value) : Ie(n.layer.value);
 			if (!e) return [];
 			let t = n.selection.value?.join(".") ?? "canvas", r = n.layer.value, i = n.resourceStatuses.value, a = [];
 			for (let o of n.sections.value) {
 				let s = [];
 				for (let a of o.fields) {
-					let o = K(e, a.key);
+					let o = q(e, a.key);
 					if (!o.ok) continue;
 					let c = n.contentLocked.value && a.data === !0;
 					s.push({
@@ -1737,8 +1834,9 @@ var en = ["aria-disabled"], tn = [
 						value: o.value,
 						dataMode: a.data ? n.isDataMarked(a) ? "expression" : "static" : void 0,
 						locked: c,
-						hint: c ? _n : a.hint && r ? a.hint(r, i) ?? void 0 : void 0,
-						resourceStatus: a.control === "imageSrc" && typeof o.value == "string" && o.value !== "" ? i[o.value] : void 0
+						hint: c ? Dn : a.hint && r ? a.hint(r, i) ?? void 0 : void 0,
+						resourceStatus: a.control === "imageSrc" && typeof o.value == "string" && o.value !== "" ? i[o.value] : void 0,
+						drifted: a.control === "rowsPath" ? n.rowsPathDrifted.value : void 0
 					});
 				}
 				s.length > 0 && a.push({
@@ -1764,16 +1862,16 @@ var en = ["aria-disabled"], tn = [
 		function c() {
 			n.setAnchorExpanded(!n.anchorExpanded.value);
 		}
-		return (e, t) => (P(), O("aside", ln, [
-			k("header", un, [k("div", dn, [k("span", fn, [t[0] ||= k("i", {
+		return (e, t) => (P(), O("aside", yn, [
+			k("header", bn, [k("div", xn, [k("span", Sn, [t[0] ||= k("i", {
 				class: "size-1.5 rounded-full bg-cn-accent",
 				"aria-hidden": "true"
-			}, null, -1), de(" " + R(a.value), 1)]), k("span", pn, R(i.value ? "图层属性" : "画布属性"), 1)])]),
-			o.value.length === 0 ? (P(), O("p", mn, " 打开文档后可编辑属性 ")) : D("", !0),
+			}, null, -1), de(" " + R(a.value), 1)]), k("span", Cn, R(i.value ? "图层属性" : "画布属性"), 1)])]),
+			o.value.length === 0 ? (P(), O("p", wn, " 打开文档后可编辑属性 ")) : D("", !0),
 			(P(!0), O(w, null, I(o.value, (e) => (P(), O("section", {
 				key: e.title,
 				class: "cn-props__section border-b border-cn-line/70 px-3.5 py-3 last:border-b-0"
-			}, [k("h3", hn, R(e.title), 1), k("div", gn, [(P(!0), O(w, null, I(e.fields, (e) => (P(), O(w, { key: e.key }, [e.field.control === "anchor" ? (P(), E(Ge, {
+			}, [k("h3", Tn, R(e.title), 1), k("div", En, [(P(!0), O(w, null, I(e.fields, (e) => (P(), O(w, { key: e.key }, [e.field.control === "anchor" ? (P(), E(Xe, {
 				key: 0,
 				field: e.field,
 				"model-value": e.value,
@@ -1785,7 +1883,7 @@ var en = ["aria-disabled"], tn = [
 				"model-value",
 				"expanded",
 				"onChange"
-			])) : (P(), E(cn, {
+			])) : (P(), E(vn, {
 				key: 1,
 				field: e.field,
 				value: e.value,
@@ -1795,6 +1893,7 @@ var en = ["aria-disabled"], tn = [
 				completion: r(e.field),
 				displays: s.value,
 				"resource-status": e.resourceStatus,
+				drifted: e.drifted,
 				onInput: (t) => z(n).commit(e.field, t, !1),
 				onChange: (t) => z(n).commit(e.field, t, !0),
 				onToggleMode: (t) => z(n).toggleDataMode(e.field),
@@ -1808,6 +1907,7 @@ var en = ["aria-disabled"], tn = [
 				"completion",
 				"displays",
 				"resource-status",
+				"drifted",
 				"onInput",
 				"onChange",
 				"onToggleMode",
@@ -1817,4 +1917,4 @@ var en = ["aria-disabled"], tn = [
 	}
 });
 //#endregion
-export { Z as a, Ee as c, Oe as d, K as f, Qt as i, Ae as l, cn as n, Ot as o, $t as r, je as s, vn as t, De as u };
+export { Z as a, ke as c, je as d, q as f, ln as i, K as l, vn as n, Pt as o, un as r, Ne as s, On as t, Ae as u };