@hankchen/canvas-editor-vue 0.6.0 → 0.7.0

package/dist/{property-panel-B32ZBQdf.js → property-panel-DJQJzioT.js}

@@ -1,12 +1,11 @@
 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, c as v, i as y, l as b, n as x, s as S, t as C, u as w } from "./uploadFile-D1RY-ji0.js";
-import { a as te, n as ne, r as re, t as ie } from "./resourceTemplate-cdcQtp9a.js";
-import { n as ae, r as oe, t as se } from "./usePathCompletion-Do17CQ6l.js";
-import { Fragment as T, computed as E, createBlock as D, createCommentVNode as O, createElementBlock as k, createElementVNode as A, createTextVNode as ce, createVNode as j, defineComponent as M, inject as le, markRaw as N, nextTick as ue, normalizeClass as P, onScopeDispose as de, openBlock as F, provide as fe, ref as I, renderList as L, resolveDynamicComponent as pe, shallowRef as R, toDisplayString as z, unref as B, vModelText as me, watch as V, watchEffect as he, withCtx as ge, withDirectives as _e, withModifiers as H } from "vue";
-var ve = e({
+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",
 	size: 24,
 	node: [
@@ -28,7 +27,7 @@ var ve = e({
 		}]
 	],
 	aliases: ["grid-2-x-2"]
-}), ye = e({
+}), Se = e({
 	name: "square-split-vertical",
 	size: 24,
 	node: [
@@ -46,7 +45,7 @@ var ve = e({
 		}]
 	],
 	aliases: ["split-square-vertical"]
-}), be = e({
+}), Ce = e({
 	name: "square",
 	size: 24,
 	node: [["rect", {
@@ -60,7 +59,7 @@ var ve = e({
 });
 //#endregion
 //#region ../canvas-editor/src/shared/resourceStatus.ts
-function xe(e, n) {
+function we(e, n) {
 	if (e.type !== "ImageLayer") return !1;
 	if (e.expression !== null || e.src === null || t(e) <= 0 || a(e) <= 0) return !0;
 	if (n !== void 0) {
@@ -71,7 +70,7 @@ function xe(e, n) {
 }
 //#endregion
 //#region src/property-panel/fieldSchema.ts
-var Se = "当前层内容未绘制，padding 不影响预览", U = {
+var Te = "当前层内容未绘制，padding 不影响预览", H = {
 	title: "位置与尺寸",
 	fields: [
 		{
@@ -126,7 +125,7 @@ var Se = "当前层内容未绘制，padding 不影响预览", U = {
 			control: "anchor"
 		}
 	]
-}, W = {
+}, U = {
 	title: "对齐",
 	fields: [{
 		key: ["align", "horizontal"],
@@ -139,7 +138,7 @@ var Se = "当前层内容未绘制，padding 不影响预览", U = {
 		control: "align",
 		domain: l
 	}]
-}, G = {
+}, W = {
 	title: "形状",
 	fields: [
 		{
@@ -161,7 +160,7 @@ var Se = "当前层内容未绘制，padding 不影响预览", U = {
 			label: "内边距",
 			control: "padding",
 			title: "内边距作用于内容盒，不改变图层尺寸",
-			hint: (e, t) => xe(e, t) ? Se : null
+			hint: (e, t) => we(e, t) ? Te : null
 		},
 		{
 			key: ["shape", "border"],
@@ -169,11 +168,11 @@ var Se = "当前层内容未绘制，padding 不影响预览", U = {
 			control: "border"
 		}
 	]
-}, Ce = {
+}, Ee = {
 	ImageLayer: [
+		H,
 		U,
 		W,
-		G,
 		{
 			title: "图片",
 			fields: [{
@@ -186,9 +185,9 @@ var Se = "当前层内容未绘制，padding 不影响预览", U = {
 		}
 	],
 	TextLayer: [
+		H,
 		U,
 		W,
-		G,
 		{
 			title: "文本",
 			fields: [
@@ -224,9 +223,9 @@ var Se = "当前层内容未绘制，padding 不影响预览", U = {
 		}
 	],
 	QrCodeLayer: [
+		H,
 		U,
 		W,
-		G,
 		{
 			title: "二维码",
 			fields: [{
@@ -239,31 +238,28 @@ var Se = "当前层内容未绘制，padding 不影响预览", U = {
 		}
 	],
 	TableLayer: [
+		H,
 		U,
 		W,
-		G,
 		{
 			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
 			}]
 		}
 	],
 	TableRowLayer: [
+		H,
 		U,
-		W,
-		G
+		W
 	],
 	TableCellLayer: [
+		H,
 		U,
-		W,
-		G
+		W
 	],
 	TableRowTemplate: [{
 		title: "行模板（行宽由表宽同步）",
@@ -280,15 +276,15 @@ var Se = "当前层内容未绘制，padding 不影响预览", U = {
 		}]
 	}]
 };
-function we(e) {
-	return Ce[e] ?? [];
+function De(e) {
+	return Ee[e] ?? [];
 }
-function Te(e) {
+function Oe(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 Ee = {
+var ke = {
 	root: [],
 	cell: [],
 	row: ["shape.width", "shape.autoWidth"],
@@ -300,16 +296,16 @@ var Ee = {
 	],
 	templateContent: ["shape.width", "shape.autoWidth"]
 };
-function K(e, t) {
+function G(e, t) {
 	return [...e.key, ...t.key];
 }
-function De(e, t) {
-	let n = new Set(Ee[Te(e)]), r = [];
-	for (let e of we(t.type)) {
+function Ae(e, t) {
+	let n = new Set(ke[Oe(e)]), r = [];
+	for (let e of De(t.type)) {
 		let i = [];
 		for (let r of e.fields) {
 			if (r.items) {
-				let e = r.items.filter((e) => !n.has(K(r, e).join(".")) && (!e.visibleWhen || e.visibleWhen(t)));
+				let e = r.items.filter((e) => !n.has(G(r, e).join(".")) && (!e.visibleWhen || e.visibleWhen(t)));
 				e.length > 0 && i.push({
 					...r,
 					items: e
@@ -325,7 +321,7 @@ function De(e, t) {
 	}
 	return r;
 }
-var Oe = [{
+var je = [{
 	title: "画布",
 	fields: [{
 		key: ["width"],
@@ -340,7 +336,29 @@ var Oe = [{
 		integer: !0,
 		min: 1
 	}]
+}, {
+	title: "背景",
+	fields: [{
+		key: ["background", "color"],
+		label: "背景色",
+		control: "color",
+		nullable: !0
+	}, {
+		key: ["background", "image"],
+		label: "背景图",
+		control: "imageSrc"
+	}]
 }];
+function Me(e) {
+	return e === null ? null : e.background === null ? {
+		...e,
+		background: K
+	} : e;
+}
+var K = {
+	color: null,
+	image: null
+};
 function q(e, t) {
 	let n = e;
 	for (let e = 0; e < t.length; e += 1) {
@@ -354,14 +372,14 @@ function q(e, t) {
 }
 //#endregion
 //#region src/property-panel/fields/AlignField.vue?vue&type=script&setup=true&lang.ts
-var ke = ["aria-label"], Ae = [
+var Ne = ["aria-label"], Pe = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], je = {
+], Fe = {
 	key: 1,
 	class: "truncate px-1 text-[10px] leading-none"
-}, Me = /* @__PURE__ */ M({
+}, Ie = /* @__PURE__ */ j({
 	__name: "AlignField",
 	props: {
 		field: {},
@@ -398,7 +416,7 @@ var ke = ["aria-label"], Ae = [
 					title: "底对齐"
 				}
 			}
-		}, p = E(() => {
+		}, p = T(() => {
 			let e = a.field.domain ?? [], t = d[e.join(".")];
 			return e.map((e) => ({
 				value: e,
@@ -409,42 +427,42 @@ var ke = ["aria-label"], Ae = [
 		function m(e) {
 			e !== a.modelValue && u("change", e);
 		}
-		return (t, n) => (F(), k("span", {
+		return (t, n) => (P(), O("span", {
 			class: "cn-align flex h-7 min-w-0 flex-1 overflow-hidden rounded-md border border-cn-field-line bg-cn-field",
 			role: "group",
 			"aria-label": e.field.label
-		}, [(F(!0), k(T, null, L(p.value, (t, n) => (F(), k("button", {
+		}, [(P(!0), O(w, null, I(p.value, (t, n) => (P(), O("button", {
 			key: t.value,
 			type: "button",
-			class: P(["cn-align__option flex min-w-0 flex-1 items-center justify-center p-0 transition-colors duration-100 focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cn-accent/40", [n > 0 ? "border-l border-cn-field-line" : "", t.value === e.modelValue ? "cn-align__option--active bg-cn-accent-soft text-cn-accent" : "text-cn-muted hover:text-cn-fg"]]),
+			class: N(["cn-align__option flex min-w-0 flex-1 items-center justify-center p-0 transition-colors duration-100 focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cn-accent/40", [n > 0 ? "border-l border-cn-field-line" : "", t.value === e.modelValue ? "cn-align__option--active bg-cn-accent-soft text-cn-accent" : "text-cn-muted hover:text-cn-fg"]]),
 			"aria-pressed": t.value === e.modelValue,
 			title: t.title,
-			onClick: H((e) => m(t.value), ["prevent"])
-		}, [t.icon ? (F(), D(_, {
+			onClick: V((e) => m(t.value), ["prevent"])
+		}, [t.icon ? (P(), E(g, {
 			key: 0,
 			icon: t.icon
-		}, null, 8, ["icon"])) : (F(), k("span", je, z(t.value), 1))], 10, Ae))), 128))], 8, ke));
+		}, null, 8, ["icon"])) : (P(), O("span", Fe, R(t.value), 1))], 10, Pe))), 128))], 8, Ne));
 	}
-}), Ne = { class: "block" }, Pe = ["aria-expanded", "title"], Fe = { class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted" }, Ie = { class: "flex shrink-0 items-center gap-1.5" }, Le = {
+}), Le = { class: "block" }, Re = ["aria-expanded", "title"], ze = { class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted" }, Be = { class: "flex shrink-0 items-center gap-1.5" }, Ve = {
 	viewBox: "0 0 24 24",
 	class: "size-3.5",
 	"aria-hidden": "true"
-}, Re = [
+}, He = [
 	"cx",
 	"cy",
 	"r"
-], ze = {
+], Ue = {
 	key: 0,
 	class: "mt-2 flex justify-end"
-}, Be = {
+}, We = {
 	class: "cn-anchor grid w-[66px] shrink-0 grid-cols-3 gap-[3px]",
 	role: "group",
 	"aria-label": "九宫锚点"
-}, Ve = [
+}, Ge = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], He = /* @__PURE__ */ M({
+], Ke = /* @__PURE__ */ j({
 	__name: "AnchorDisclosureField",
 	props: {
 		field: {},
@@ -453,42 +471,42 @@ var ke = ["aria-label"], Ae = [
 	},
 	emits: ["change", "toggle"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = N(d), a = Array.from({ length: 9 }, (e, t) => ({
+		let n = e, r = t, i = M(d), a = Array.from({ length: 9 }, (e, t) => ({
 			index: t,
 			cx: 4 + t % 3 * 8,
 			cy: 4 + Math.floor(t / 3) * 8
-		})), o = E(() => {
+		})), o = T(() => {
 			let e = n.modelValue.includes("top") ? 0 : n.modelValue.includes("bottom") ? 2 : 1, t = n.modelValue.includes("left") ? 0 : n.modelValue.includes("right") ? 2 : 1;
 			return e * 3 + t;
 		});
 		function s(e) {
 			r("change", e);
 		}
-		return (t, n) => (F(), k("span", Ne, [A("button", {
+		return (t, n) => (P(), O("span", Le, [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")
-		}, [A("span", Fe, z(e.field.label), 1), A("span", Ie, [(F(), k("svg", Le, [(F(!0), k(T, null, L(B(a), (e) => (F(), k("circle", {
+		}, [k("span", ze, R(e.field.label), 1), k("span", Be, [(P(), O("svg", Ve, [(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: P(e.index === o.value ? "fill-cn-accent" : "fill-cn-muted/35")
-		}, null, 10, Re))), 128))])), j(_, {
-			icon: B(u),
-			class: P(["text-cn-muted transition-transform duration-150", { "rotate-180": e.expanded }])
-		}, null, 8, ["icon", "class"])])], 8, Pe), e.expanded ? (F(), k("span", ze, [A("span", Be, [(F(!0), k(T, null, L(B(i), (t) => (F(), k("button", {
+			class: N(e.index === o.value ? "fill-cn-accent" : "fill-cn-muted/35")
+		}, null, 10, He))), 128))])), A(g, {
+			icon: z(u),
+			class: N(["text-cn-muted transition-transform duration-150", { "rotate-180": e.expanded }])
+		}, null, 8, ["icon", "class"])])], 8, Re), e.expanded ? (P(), O("span", Ue, [k("span", We, [(P(!0), O(w, null, I(z(i), (t) => (P(), O("button", {
 			key: t,
 			type: "button",
-			class: P(["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"]),
+			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, Ve))), 128))])])) : O("", !0)]));
+		}, null, 10, Ge))), 128))])])) : D("", !0)]));
 	}
-}), Ue = { class: "cn-bool relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center" }, We = ["checked"], Ge = /* @__PURE__ */ M({
+}), qe = { class: "cn-bool relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center" }, Je = ["checked"], Ye = /* @__PURE__ */ j({
 	__name: "BooleanField",
 	props: {
 		field: {},
@@ -496,26 +514,26 @@ var ke = ["aria-label"], Ae = [
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = I(null);
+		let n = e, r = t, i = F(null);
 		async function a(e) {
-			r("change", e.target.checked), await ue(), i.value && (i.value.checked = n.modelValue);
+			r("change", e.target.checked), await pe(), i.value && (i.value.checked = n.modelValue);
 		}
-		return he(() => {
+		return ve(() => {
 			i.value && (i.value.checked = n.modelValue);
-		}), (t, n) => (F(), k("label", Ue, [
-			A("input", {
+		}), (t, n) => (P(), O("label", qe, [
+			k("input", {
 				ref_key: "inputRef",
 				ref: i,
 				class: "cn-bool__input peer sr-only",
 				type: "checkbox",
 				checked: e.modelValue,
 				onChange: a
-			}, null, 40, We),
-			n[0] ||= A("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] ||= A("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)
+			}, null, 40, Je),
+			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)
 		]));
 	}
-}), Ke = {
+}), Xe = {
 	1: [{
 		label: "四边",
 		rep: "top",
@@ -558,13 +576,13 @@ var ke = ["aria-label"], Ae = [
 		}
 	]
 };
-function qe(e) {
+function Ze(e) {
 	return e === 1 ? 2 : e === 2 ? 4 : 1;
 }
-function Je(e) {
+function Qe(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 Ye(e, t) {
+function $e(e, t) {
 	if (t === 1) {
 		let { top: t } = e;
 		return {
@@ -585,17 +603,17 @@ function Ye(e, t) {
 	}
 	return e;
 }
-function Xe(e, t) {
+function et(e, t) {
 	return e.top === t.top && e.bottom === t.bottom && e.left === t.left && e.right === t.right;
 }
 function J(e, t) {
 	return e === null || t === null ? e === t : e.width === t.width && e.color === t.color;
 }
-function Ze(e) {
+function tt(e) {
 	let { top: t, bottom: n, left: r, right: i } = e;
 	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 Qe(e, t) {
+function nt(e, t) {
 	let n = (e) => e === null ? null : { ...e };
 	if (t === 1) {
 		let t = n(e.top);
@@ -617,18 +635,18 @@ function Qe(e, t) {
 	}
 	return e;
 }
-function $e(e, t) {
+function rt(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 et(e, t) {
-	let n = E(() => t(e())), r = I(null), i = E(() => r.value ?? n.value);
-	V(e, () => {
+function it(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 = qe(e);
+		let e = i.value, t = Ze(e);
 		return r.value = t, {
 			from: e,
 			to: t
@@ -641,7 +659,7 @@ function et(e, t) {
 }
 //#endregion
 //#region src/property-panel/controlStyles.ts
-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`, tt = Y, nt = "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", rt = "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", it = ["aria-label"], at = /* @__PURE__ */ M({
+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`, at = Y, ot = "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", st = "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", ct = ["aria-label"], lt = /* @__PURE__ */ j({
 	__name: "BorderWidthInput",
 	props: {
 		value: {},
@@ -649,8 +667,8 @@ var Y = "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, i = I(n.value === null ? "" : String(n.value)), a = I(!1);
-		V(() => n.value, (e) => {
+		let n = e, r = t, i = F(n.value === null ? "" : String(n.value)), a = F(!1);
+		B(() => n.value, (e) => {
 			a.value || (i.value = e === null ? "" : String(e));
 		});
 		function o(e) {
@@ -679,9 +697,9 @@ var Y = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 			let a = o(t);
 			i.value = a === 0 ? "" : String(a), r("change", a);
 		}
-		return (t, n) => _e((F(), k("input", {
+		return (t, n) => be((P(), O("input", {
 			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
-			class: P(["cn-field cn-field--number min-w-0 flex-1", B(X)]),
+			class: N(["cn-field cn-field--number min-w-0 flex-1", z(X)]),
 			type: "number",
 			"aria-label": e.label,
 			min: 0,
@@ -692,9 +710,9 @@ var Y = "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, it)), [[me, i.value]]);
+		}, null, 42, ct)), [[_e, i.value]]);
 	}
-}), ot = ["aria-label", "title"], st = /* @__PURE__ */ M({
+}), ut = ["aria-label", "title"], dt = /* @__PURE__ */ j({
 	__name: "ShorthandModeButton",
 	props: {
 		mode: {},
@@ -704,35 +722,35 @@ var Y = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 	setup(e, { emit: t }) {
 		let n = e, r = t, i = {
 			1: {
-				icon: be,
+				icon: Ce,
 				title: "统一值"
 			},
 			2: {
-				icon: ye,
+				icon: Se,
 				title: "上下/左右"
 			},
 			4: {
-				icon: ve,
+				icon: xe,
 				title: "四边独立"
 			}
-		}, a = E(() => i[n.mode]), o = E(() => `${n.label}：${a.value.title}（点击切换值模式）`);
-		return (e, t) => (F(), k("button", {
+		}, a = T(() => i[n.mode]), o = T(() => `${n.label}：${a.value.title}（点击切换值模式）`);
+		return (e, t) => (P(), O("button", {
 			type: "button",
 			class: "cn-props__mode-toggle shrink-0",
 			"aria-label": o.value,
 			title: o.value,
-			onClick: t[0] ||= H((e) => r("cycle"), ["prevent"])
-		}, [j(_, {
+			onClick: t[0] ||= V((e) => r("cycle"), ["prevent"])
+		}, [A(g, {
 			icon: a.value.icon,
 			size: 12
-		}, null, 8, ["icon"])], 8, ot));
+		}, null, 8, ["icon"])], 8, ut));
 	}
-}), ct = { class: "cn-border flex w-full min-w-0 items-center gap-1" }, lt = { class: "grid min-w-0 flex-1 gap-1 grid-cols-1" }, ut = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, dt = [
+}), ft = { class: "cn-border flex w-full min-w-0 items-center gap-1" }, pt = { class: "grid min-w-0 flex-1 gap-1 grid-cols-1" }, mt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, ht = [
 	"value",
 	"disabled",
 	"onInput",
 	"onChange"
-], ft = "#000000", pt = /* @__PURE__ */ M({
+], gt = "#000000", _t = /* @__PURE__ */ j({
 	__name: "BorderField",
 	props: {
 		field: {},
@@ -740,12 +758,12 @@ var Y = "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 } = et(() => n.modelValue, Ze), o = E(() => Ke[i.value]);
+		let n = e, r = t, { mode: i, cycle: a } = it(() => n.modelValue, tt), o = T(() => Xe[i.value]);
 		function s(e) {
 			return n.modelValue[e.rep]?.width ?? null;
 		}
 		function c(e) {
-			return n.modelValue[e.rep]?.color ?? ft;
+			return n.modelValue[e.rep]?.color ?? gt;
 		}
 		function l(e, t, i) {
 			let a = { ...n.modelValue };
@@ -753,7 +771,7 @@ var Y = "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 ?? ft;
+			let i = n.modelValue[e.rep]?.color ?? gt;
 			l(e, t <= 0 ? null : {
 				width: t,
 				color: i
@@ -771,20 +789,20 @@ var Y = "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 = Qe(n.modelValue, t);
-				$e(e, n.modelValue) || r("change", e);
+				let e = nt(n.modelValue, t);
+				rt(e, n.modelValue) || r("change", e);
 			}
 		}
-		return (t, n) => (F(), k("span", ct, [j(st, {
-			mode: B(i),
+		return (t, n) => (P(), O("span", ft, [A(dt, {
+			mode: z(i),
 			label: "边框",
 			onCycle: f
-		}, null, 8, ["mode"]), A("span", lt, [(F(!0), k(T, null, L(o.value, (t) => (F(), k("label", {
+		}, null, 8, ["mode"]), k("span", pt, [(P(!0), O(w, null, I(o.value, (t) => (P(), O("label", {
 			key: t.rep,
 			class: "flex items-center gap-1.5"
 		}, [
-			A("span", ut, z(t.label), 1),
-			j(at, {
+			k("span", mt, R(t.label), 1),
+			A(lt, {
 				class: "cn-border__width",
 				value: s(t),
 				label: t.label,
@@ -796,7 +814,7 @@ var Y = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 				"onInput",
 				"onChange"
 			]),
-			A("input", {
+			k("input", {
 				class: "cn-border__color size-6 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",
 				type: "color",
 				title: "边框颜色",
@@ -804,17 +822,17 @@ var Y = "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, dt)
+			}, null, 40, ht)
 		]))), 128))])]));
 	}
-}), mt = ["value"], ht = {
+}), vt = ["value"], yt = {
 	key: 1,
 	class: "flex flex-1 items-center gap-1.5"
-}, gt = ["value"], _t = ["value"], vt = [
+}, bt = ["value"], xt = ["value"], St = [
 	"disabled",
 	"title",
 	"data-upload-error"
-], yt = /* @__PURE__ */ M({
+], Ct = /* @__PURE__ */ j({
 	__name: "FontField",
 	props: {
 		field: {},
@@ -822,7 +840,7 @@ var Y = "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, i = y(), a = E(() => {
+		let n = e, r = t, i = re(), a = T(() => {
 			if (i === null) return [];
 			let e = [{
 				label: "内置默认字体",
@@ -857,7 +875,7 @@ var Y = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 		function f(e) {
 			c = !1, r("change", e.target.value);
 		}
-		let p = I(!1), m = I(null), h = I(null);
+		let p = F(!1), m = F(null), h = F(null);
 		function g() {
 			m.value = null, h.value?.click();
 		}
@@ -866,7 +884,7 @@ var Y = "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);
@@ -875,25 +893,25 @@ var Y = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 				}
 			}
 		}
-		return (t, n) => B(i) === null ? (F(), k("input", {
+		return (t, n) => z(i) === null ? (P(), O("input", {
 			key: 0,
-			class: P(["cn-field", B(tt)]),
+			class: N(["cn-field", z(at)]),
 			type: "text",
 			value: e.modelValue,
 			onInput: l,
 			onCompositionstart: u,
 			onCompositionend: d,
 			onChange: f
-		}, null, 42, mt)) : (F(), k("div", ht, [
-			A("select", {
-				class: P(["cn-field cn-select", B(Y)]),
+		}, null, 42, vt)) : (P(), O("div", yt, [
+			k("select", {
+				class: N(["cn-field cn-select", z(Y)]),
 				value: e.modelValue,
 				onChange: s
-			}, [(F(!0), k(T, null, L(a.value, (e) => (F(), k("option", {
+			}, [(P(!0), O(w, null, I(a.value, (e) => (P(), O("option", {
 				key: e.value,
 				value: e.value
-			}, z(e.label), 9, _t))), 128))], 42, gt),
-			A("input", {
+			}, R(e.label), 9, xt))), 128))], 42, bt),
+			k("input", {
 				ref_key: "fileInput",
 				ref: h,
 				type: "file",
@@ -901,7 +919,7 @@ var Y = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 				accept: ".ttf,.otf,.woff,.woff2,font/ttf,font/otf,font/woff,font/woff2",
 				onChange: _
 			}, null, 544),
-			B(i).canUpload ? (F(), k("button", {
+			z(i).canUpload ? (P(), O("button", {
 				key: 0,
 				type: "button",
 				class: "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 disabled:cursor-not-allowed disabled:opacity-40",
@@ -909,10 +927,10 @@ var Y = "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
-			}, z(p.value ? "…" : m.value ? "!" : "上传"), 9, vt)) : O("", !0)
+			}, R(p.value ? "…" : m.value ? "!" : "上传"), 9, St)) : D("", !0)
 		]));
 	}
-}), bt = { class: "cn-color flex min-w-0 flex-1 items-center gap-1.5" }, xt = ["checked"], St = ["value", "disabled"], Ct = ["value", "disabled"], wt = "#000000", Tt = /* @__PURE__ */ M({
+}), wt = { class: "cn-color flex min-w-0 flex-1 items-center gap-1.5" }, Tt = ["checked"], Et = ["value", "disabled"], Dt = ["value", "disabled"], Ot = "#000000", kt = /* @__PURE__ */ j({
 	__name: "ColorField",
 	props: {
 		field: {},
@@ -920,12 +938,12 @@ var Y = "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, i = I(n.modelValue !== null), a = I(o(n.modelValue));
-		V(() => n.modelValue, (e) => {
+		let n = e, r = t, i = F(n.modelValue !== null), a = F(o(n.modelValue));
+		B(() => n.modelValue, (e) => {
 			i.value = e !== null, i.value && (a.value = o(e));
 		});
 		function o(e) {
-			return e !== null && /^#[0-9a-fA-F]{6}$/.test(e) ? e : wt;
+			return e !== null && /^#[0-9a-fA-F]{6}$/.test(e) ? e : Ot;
 		}
 		function s(e) {
 			let t = e.target.checked;
@@ -952,40 +970,40 @@ var Y = "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) => (F(), k("span", bt, [
-			e.field.nullable ? (F(), k("input", {
+		return (t, n) => (P(), O("span", wt, [
+			e.field.nullable ? (P(), O("input", {
 				key: 0,
 				class: "cn-color__toggle size-3.5 shrink-0 cursor-pointer accent-cn-accent",
 				type: "checkbox",
 				title: "启用颜色",
 				checked: i.value,
 				onChange: s
-			}, null, 40, xt)) : O("", !0),
-			A("input", {
-				class: P(["cn-color__swatch", B(rt)]),
+			}, null, 40, Tt)) : D("", !0),
+			k("input", {
+				class: N(["cn-color__swatch", z(st)]),
 				type: "color",
 				value: a.value,
 				disabled: !i.value,
 				onInput: c,
 				onChange: l
-			}, null, 42, St),
-			A("input", {
-				class: P(["cn-color__text min-w-0 flex-1", B(Y)]),
+			}, null, 42, Et),
+			k("input", {
+				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, Ct)
+			}, null, 42, Dt)
 		]));
 	}
 }), Z = Symbol("canvas-image-upload");
-function Et() {
-	return le(Z, null);
+function At() {
+	return fe(Z, null);
 }
 //#endregion
 //#region src/property-panel/fields/TextField.vue?vue&type=script&setup=true&lang.ts
-var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
+var jt = ["value", "placeholder"], Q = /* @__PURE__ */ j({
 	__name: "TextField",
 	props: {
 		field: {},
@@ -993,7 +1011,7 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = !1, a = I(!1);
+		let n = e, r = t, i = !1, a = F(!1);
 		function o(e) {
 			return n.field.nonEmpty === !0 ? e.trim() === "" ? (a.value = !0, !0) : (a.value = !1, !1) : !1;
 		}
@@ -1014,8 +1032,8 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			let t = e.target.value;
 			o(t) || r("change", t);
 		}
-		return (t, n) => (F(), k("input", {
-			class: P(["cn-field", [B(tt), a.value ? "cn-field--invalid" : ""]]),
+		return (t, n) => (P(), O("input", {
+			class: N(["cn-field", [z(at), a.value ? "cn-field--invalid" : ""]]),
 			type: "text",
 			value: e.modelValue,
 			placeholder: e.field.placeholder,
@@ -1023,9 +1041,9 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			onCompositionstart: c,
 			onCompositionend: l,
 			onChange: u
-		}, null, 42, Dt));
+		}, null, 42, jt));
 	}
-}), Ot = /* @__PURE__ */ M({
+}), Mt = /* @__PURE__ */ j({
 	__name: "ResourceValueField",
 	props: {
 		field: {},
@@ -1036,15 +1054,15 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = E(() => n.dataMode === "expression"), a = E(() => {
+		let n = e, r = t, i = T(() => n.dataMode === "expression"), a = T(() => {
 			let e = n.modelValue ?? "";
-			return i.value ? ne(e) ?? e : "";
+			return i.value ? b(e) ?? e : "";
 		});
 		function o(e) {
-			let t = ie(e);
+			let t = S(e);
 			r("input", t), r("change", t);
 		}
-		return (t, n) => i.value ? (F(), D(re, {
+		return (t, n) => i.value ? (P(), E(y, {
 			key: 0,
 			"model-value": a.value,
 			source: e.source ?? null,
@@ -1057,7 +1075,7 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			"source",
 			"disabled",
 			"aria-label"
-		])) : (F(), D(Q, {
+		])) : (P(), E(Q, {
 			key: 1,
 			field: e.field,
 			"model-value": e.modelValue ?? "",
@@ -1072,17 +1090,17 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			"disabled"
 		]));
 	}
-}), kt = {
+}), Nt = {
 	key: 0,
 	class: "flex flex-col gap-1.5"
-}, At = [
+}, Pt = [
 	"disabled",
 	"title",
 	"data-upload-error"
-], jt = ["src"], Mt = {
+], Ft = ["src"], It = {
 	key: 2,
 	class: "relative"
-}, Nt = { class: "flex items-center gap-1.5" }, Pt = /* @__PURE__ */ M({
+}, Lt = { class: "flex items-center gap-1.5" }, Rt = /* @__PURE__ */ j({
 	__name: "ImageSrcField",
 	props: {
 		field: {},
@@ -1094,7 +1112,7 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = Et(), a = E(() => i !== null && i.canUpload && n.dataMode !== "expression"), o = E(() => typeof n.modelValue == "string" && n.modelValue !== ""), s = E(() => n.resourceStatus === "pending" ? "装载中" : n.resourceStatus === "failed" ? "失败" : null), c = I(!1), l = I(null), u = I(null);
+		let n = e, r = t, i = At(), 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() {
 			l.value = null, u.value?.click();
 		}
@@ -1103,7 +1121,7 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			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,8 +1130,8 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 				}
 			}
 		}
-		return (t, n) => a.value ? (F(), k("div", kt, [
-			A("button", {
+		return (t, n) => a.value ? (P(), O("div", Nt, [
+			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,
@@ -1121,19 +1139,19 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 				"data-upload-error": l.value ?? void 0,
 				onClick: d
 			}, [
-				o.value ? (F(), k("img", {
+				o.value ? (P(), O("img", {
 					key: 0,
 					src: e.modelValue ?? void 0,
 					class: "absolute inset-0 size-full object-cover",
 					alt: ""
-				}, null, 8, jt)) : O("", !0),
-				s.value ? (F(), k("span", {
+				}, null, 8, Ft)) : D("", !0),
+				s.value ? (P(), O("span", {
 					key: 1,
-					class: P(["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"])
-				}, z(s.value), 3)) : O("", !0),
-				o.value ? O("", !0) : (F(), k("span", Mt, z(c.value ? "…" : l.value ? "!" : "点击上传图片"), 1))
-			], 8, At),
-			A("input", {
+					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", It, R(c.value ? "…" : l.value ? "!" : "点击上传图片"), 1))
+			], 8, Pt),
+			k("input", {
 				ref_key: "fileInput",
 				ref: u,
 				type: "file",
@@ -1141,7 +1159,7 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 				accept: "image/*",
 				onChange: f
 			}, null, 544),
-			A("div", Nt, [j(Q, {
+			k("div", Lt, [A(Q, {
 				class: "flex-1",
 				field: e.field,
 				"model-value": e.modelValue ?? "",
@@ -1152,14 +1170,14 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 				"field",
 				"model-value",
 				"aria-label"
-			]), o.value ? (F(), k("button", {
+			]), o.value ? (P(), O("button", {
 				key: 0,
 				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", "")
-			}, "清除")) : O("", !0)])
-		])) : e.dataMode === "expression" ? (F(), D(Ot, {
+			}, "清除")) : D("", !0)])
+		])) : e.dataMode === "expression" ? (P(), E(Mt, {
 			key: 1,
 			field: e.field,
 			"model-value": e.modelValue,
@@ -1173,7 +1191,7 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			"model-value",
 			"source",
 			"disabled"
-		])) : (F(), D(Q, {
+		])) : (P(), E(Q, {
 			key: 2,
 			field: e.field,
 			"model-value": e.modelValue ?? "",
@@ -1186,12 +1204,12 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			"aria-label"
 		]));
 	}
-}), Ft = [
+}), zt = [
 	"aria-label",
 	"min",
 	"max",
 	"step"
-], $ = /* @__PURE__ */ M({
+], $ = /* @__PURE__ */ j({
 	__name: "NumberField",
 	props: {
 		field: {},
@@ -1199,8 +1217,8 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = I(String(n.modelValue)), a = I(!1);
-		V(() => n.modelValue, (e) => {
+		let n = e, r = t, i = F(String(n.modelValue)), a = F(!1);
+		B(() => n.modelValue, (e) => {
 			a.value || (i.value = String(e));
 		});
 		function o(e) {
@@ -1227,9 +1245,9 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			let a = o(t);
 			i.value = String(a), r("change", a);
 		}
-		return (t, n) => _e((F(), k("input", {
+		return (t, n) => be((P(), O("input", {
 			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
-			class: P(["cn-field cn-field--number", B(X)]),
+			class: N(["cn-field cn-field--number", z(X)]),
 			type: "number",
 			"aria-label": e.field.label,
 			min: e.field.min,
@@ -1239,9 +1257,9 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			onFocus: n[1] ||= (e) => a.value = !0,
 			onBlur: l,
 			onChange: l
-		}, null, 42, Ft)), [[me, i.value]]);
+		}, null, 42, zt)), [[_e, i.value]]);
 	}
-}), It = { class: "cn-padding flex w-full min-w-0 items-center gap-1.5" }, Lt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, Rt = /* @__PURE__ */ M({
+}), Bt = { class: "cn-padding flex w-full min-w-0 items-center gap-1.5" }, Vt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, Ht = /* @__PURE__ */ j({
 	__name: "PaddingField",
 	props: {
 		field: {},
@@ -1249,7 +1267,7 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { mode: i, cycle: a } = et(() => n.modelValue, Je), o = E(() => Ke[i.value]);
+		let n = e, r = t, { mode: i, cycle: a } = it(() => n.modelValue, Qe), o = T(() => Xe[i.value]);
 		function s(e) {
 			return {
 				key: ["padding", e.rep],
@@ -1265,18 +1283,18 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 		function l() {
 			let { from: e, to: t } = a();
 			if (t < e) {
-				let e = Ye(n.modelValue, t);
-				Xe(e, n.modelValue) || r("change", e);
+				let e = $e(n.modelValue, t);
+				et(e, n.modelValue) || r("change", e);
 			}
 		}
-		return (t, n) => (F(), k("span", It, [j(st, {
-			mode: B(i),
+		return (t, n) => (P(), O("span", Bt, [A(dt, {
+			mode: z(i),
 			label: "内边距",
 			onCycle: l
-		}, null, 8, ["mode"]), A("span", { class: P(["grid min-w-0 flex-1 gap-1.5", B(i) === 1 ? "grid-cols-1" : "grid-cols-2"]) }, [(F(!0), k(T, null, L(o.value, (t) => (F(), k("label", {
+		}, 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"
-		}, [A("span", Lt, z(t.label), 1), j($, {
+		}, [k("span", Vt, R(t.label), 1), A($, {
 			class: "min-w-0 flex-1",
 			field: s(t),
 			"model-value": e.modelValue[t.rep],
@@ -1289,16 +1307,16 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			"onChange"
 		])]))), 128))], 2)]));
 	}
-}), zt = { class: "grid w-full min-w-0 grid-cols-2 gap-1" }, Bt = ["title"], Vt = { class: "w-3.5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, Ht = [
+}), Ut = { class: "grid w-full min-w-0 grid-cols-2 gap-1" }, Wt = ["title"], Gt = { class: "w-3.5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, Kt = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], Ut = [
+], qt = [
 	"aria-label",
 	"value",
 	"placeholder",
 	"title"
-], Wt = /* @__PURE__ */ M({
+], Jt = /* @__PURE__ */ j({
 	__name: "PairField",
 	props: {
 		field: {},
@@ -1311,7 +1329,7 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 		"sub-commit"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = E(() => n.field.items ?? []);
+		let n = e, r = t, i = T(() => n.field.items ?? []);
 		function a(e) {
 			if (!e.auto) return !1;
 			let t = q(n.modelValue, e.auto.key);
@@ -1320,7 +1338,7 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 		function o(e) {
 			return {
 				...e,
-				key: K(n.field, e)
+				key: G(n.field, e)
 			};
 		}
 		function s(e) {
@@ -1341,7 +1359,7 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			return t.ok && typeof t.value == "number" ? t.value : 0;
 		}
 		function d(e) {
-			return n.displays?.[K(n.field, e).join(".")];
+			return n.displays?.[G(n.field, e).join(".")];
 		}
 		function f(e) {
 			let t = d(e);
@@ -1354,30 +1372,30 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			let t = d(e);
 			return t?.preview ? "模板子树：预览盒尺寸（随行实例变化，非文档声明值）" : t === void 0 ? `${e.label}自适应：已开启` : `${e.label}自适应：布局解析值（与画布选择框同源）`;
 		}
-		return (e, t) => (F(), k("span", zt, [(F(!0), k(T, null, L(i.value, (e) => (F(), k("label", {
+		return (e, t) => (P(), O("span", Ut, [(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
 		}, [
-			A("span", Vt, z(e.label), 1),
-			e.auto ? (F(), k("button", {
+			k("span", Gt, R(e.label), 1),
+			e.auto ? (P(), O("button", {
 				key: 0,
 				type: "button",
-				class: P(["cn-props__auto-toggle shrink-0", { "cn-props__auto-toggle--active": a(e) }]),
+				class: N(["cn-props__auto-toggle shrink-0", { "cn-props__auto-toggle--active": a(e) }]),
 				"aria-pressed": a(e),
 				title: p(e),
-				onClick: H((t) => l(e), ["prevent"])
-			}, "自", 10, Ht)) : O("", !0),
-			a(e) ? (F(), k("input", {
+				onClick: V((t) => l(e), ["prevent"])
+			}, "自", 10, Kt)) : D("", !0),
+			a(e) ? (P(), O("input", {
 				key: 2,
-				class: P(["cn-field cn-field--number min-w-0 flex-1", [B(X), 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, Ut)) : (F(), D($, {
+			}, null, 10, qt)) : (P(), E($, {
 				key: 1,
 				class: "min-w-0 flex-1",
 				field: e,
@@ -1390,9 +1408,38 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 				"onInput",
 				"onChange"
 			]))
-		], 8, Bt))), 128))]));
+		], 8, Wt))), 128))]));
 	}
-}), Gt = ["value"], Kt = ["value"], qt = /* @__PURE__ */ M({
+}), Yt = /* @__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"
+		]));
+	}
+}), Xt = ["value"], Zt = ["value"], Qt = /* @__PURE__ */ j({
 	__name: "SelectField",
 	props: {
 		field: {},
@@ -1404,16 +1451,16 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 		function r(e) {
 			n("change", e.target.value);
 		}
-		return (t, n) => (F(), k("select", {
+		return (t, n) => (P(), O("select", {
 			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
-		}, [(F(!0), k(T, null, L(e.field.domain ?? [], (e) => (F(), k("option", {
+		}, [(P(!0), O(w, null, I(e.field.domain ?? [], (e) => (P(), O("option", {
 			key: e,
 			value: e
-		}, z(e), 9, Kt))), 128))], 40, Gt));
+		}, R(e), 9, Zt))), 128))], 40, Xt));
 	}
-}), Jt = ["value", "disabled"], Yt = /* @__PURE__ */ M({
+}), $t = ["value", "disabled"], en = /* @__PURE__ */ j({
 	__name: "TextareaField",
 	props: {
 		field: {},
@@ -1436,8 +1483,8 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 		function s(e) {
 			r = !1, n("change", e.target.value);
 		}
-		return (t, n) => (F(), k("textarea", {
-			class: P(["cn-field", B(nt)]),
+		return (t, n) => (P(), O("textarea", {
+			class: N(["cn-field", z(ot)]),
 			rows: "3",
 			value: e.modelValue,
 			disabled: e.disabled,
@@ -1445,67 +1492,71 @@ var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 			onCompositionstart: a,
 			onCompositionend: o,
 			onChange: s
-		}, null, 42, Jt));
+		}, null, 42, $t));
 	}
-}), Xt = {
-	number: N($),
-	text: N(Q),
-	textarea: N(Yt),
-	color: N(Tt),
-	select: N(qt),
-	boolean: N(Ge),
-	pair: N(Wt),
-	anchor: N(He),
-	align: N(Me),
-	padding: N(Rt),
-	border: N(pt),
-	font: N(yt),
-	imageSrc: N(Pt),
-	resourceValue: N(Ot)
+}), tn = {
+	number: M($),
+	text: M(Q),
+	textarea: M(en),
+	color: M(kt),
+	select: M(Qt),
+	boolean: M(Ye),
+	pair: M(Jt),
+	anchor: M(Ke),
+	align: M(Ie),
+	padding: M(Ht),
+	border: M(_t),
+	font: M(Ct),
+	imageSrc: M(Rt),
+	resourceValue: M(Mt),
+	rowsPath: M(Yt)
 };
 //#endregion
 //#region src/property-panel/usePropertyPanel.ts
-function Zt(e) {
-	let t = R(e.store.doc), n = R(e.store.ui.selection), r = R(e.store.ui.anchorExpanded), i = R(e.store.ui.dataSourceSchema), a = R(e.store.ui.resourceStatuses), o = R(e.store.ui.editing), s = e.subscribe((s) => {
+function nn(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));
 	});
-	de(s, !0);
-	let c = E(() => {
+	me(s, !0);
+	let c = T(() => {
 		let e = t.value, r = n.value;
 		return e && r ? p(e, r) : null;
-	}), l = E(() => t.value), u = E(() => {
+	}), l = T(() => t.value), u = T(() => {
 		let e = c.value, r = n.value;
-		return e && r ? De(r, e) : t.value ? Oe : [];
-	}), d = E(() => {
+		return e && r ? Ae(r, e) : t.value ? je : [];
+	}), d = T(() => {
 		let r = n.value;
 		return r && t.value ? e.layerBoxAt(r) : null;
-	}), f = E(() => {
+	}), f = T(() => {
 		let e = i.value;
-		return e === null ? null : v(e, b(e, t.value, n.value));
-	}), h = E(() => ae(oe(t.value, n.value, i.value))), g = E(() => n.value?.includes("template") ?? !1), _ = E(() => {
+		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 y(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 S(r, i, a) {
+	function ne(r, i, a) {
 		if (!t.value) return;
 		let o = n.value;
 		if (!o) {
-			w(r, i, a);
+			ie(r, i, a);
 			return;
 		}
-		let s = x(o, r.key);
+		let s = oe(o, r.key);
 		if (r.data) {
-			if (y(r)) {
-				let t = x(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 +1565,59 @@ function Zt(e) {
 		}
 		e.updateSpec(o, r.key, i, { mergeKey: s }), a && e.store.closeMerge(s);
 	}
-	function C(t) {
+	function re(t) {
 		let r = n.value;
 		r && t.data && e.toggleDataMode(r);
 	}
-	function w(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 ?? K, 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: E(() => n.value),
+		selection: T(() => n.value),
 		layer: c,
 		canvas: l,
 		sections: u,
 		layerBox: d,
-		isPreviewBox: g,
+		isPreviewBox: b,
 		completionSource: f,
-		rowsPathSource: h,
-		resourceStatuses: E(() => a.value),
-		anchorExpanded: E(() => r.value),
-		contentLocked: _,
-		editingSession: E(() => o.value),
-		isDataMarked: y,
-		commit: S,
-		toggleDataMode: C,
-		setAnchorExpanded: ee
+		rowsPathSource: g,
+		rowsPathDrifted: y,
+		resourceStatuses: T(() => a.value),
+		anchorExpanded: T(() => r.value),
+		contentLocked: x,
+		editingSession: T(() => o.value),
+		isDataMarked: C,
+		commit: ne,
+		toggleDataMode: re,
+		setAnchorExpanded: S
 	};
 }
 //#endregion
 //#region src/property-panel/fields/ValueTypeSegmented.vue?vue&type=script&setup=true&lang.ts
-var Qt = ["aria-disabled"], $t = [
+var rn = ["aria-disabled"], an = [
 	"aria-pressed",
 	"title",
 	"data-mode-static",
 	"data-mode-expression",
 	"disabled",
 	"onClick"
-], en = /* @__PURE__ */ M({
+], on = /* @__PURE__ */ j({
 	__name: "ValueTypeSegmented",
 	props: {
 		mode: {},
@@ -1572,27 +1637,30 @@ var Qt = ["aria-disabled"], $t = [
 		function a(e) {
 			n.disabled || e !== n.mode && r("change", e);
 		}
-		return (t, n) => (F(), k("span", {
-			class: P(["cn-valuetype flex h-7 shrink-0 items-stretch overflow-hidden rounded-md border border-cn-field-line bg-cn-field", { "opacity-60": e.disabled }]),
+		return (t, n) => (P(), O("span", {
+			class: N(["cn-valuetype flex h-7 shrink-0 items-stretch overflow-hidden rounded-md border border-cn-field-line bg-cn-field", { "opacity-60": e.disabled }]),
 			role: "group",
 			"aria-label": "取值方式",
 			"aria-disabled": e.disabled ? "true" : void 0
-		}, [(F(), k(T, null, L(i, (t, n) => A("button", {
+		}, [(P(), O(w, null, I(i, (t, n) => k("button", {
 			key: t.value,
 			type: "button",
-			class: P(["cn-valuetype__option flex items-center justify-center p-0 px-1.5 text-[10px] leading-none transition-colors duration-100 focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cn-accent/40", [n > 0 ? "border-l border-cn-field-line" : "", t.value === e.mode ? "cn-valuetype__option--active bg-cn-accent-soft text-cn-accent" : "text-cn-muted hover:text-cn-fg"]]),
+			class: N(["cn-valuetype__option flex items-center justify-center p-0 px-1.5 text-[10px] leading-none transition-colors duration-100 focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cn-accent/40", [n > 0 ? "border-l border-cn-field-line" : "", t.value === e.mode ? "cn-valuetype__option--active bg-cn-accent-soft text-cn-accent" : "text-cn-muted hover:text-cn-fg"]]),
 			"aria-pressed": t.value === e.mode,
 			title: t.value === e.mode ? t.title : `${t.title}；点击切换`,
 			"data-mode-static": t.value === "static" || void 0,
 			"data-mode-expression": t.value === "expression" || void 0,
 			disabled: e.disabled,
-			onClick: H((e) => a(t.value), ["prevent"])
-		}, z(t.label), 11, $t)), 64))], 10, Qt));
+			onClick: V((e) => a(t.value), ["prevent"])
+		}, R(t.label), 11, an)), 64))], 10, rn));
 	}
-}), tn = ["title"], nn = {
+}), sn = ["title"], cn = {
 	key: 2,
 	class: "cn-prop-field__hint col-span-2 block text-[11px] leading-4 text-cn-muted"
-}, rn = ["title"], an = /* @__PURE__ */ M({
+}, ln = ["title"], un = {
+	key: 4,
+	class: "cn-prop-field__hint col-span-2 block text-[11px] leading-4 text-cn-muted"
+}, dn = /* @__PURE__ */ j({
 	__name: "PropertyField",
 	props: {
 		field: {},
@@ -1602,7 +1670,8 @@ var Qt = ["aria-disabled"], $t = [
 		completion: { type: [Function, null] },
 		displays: {},
 		hint: {},
-		resourceStatus: {}
+		resourceStatus: {},
+		drifted: { type: Boolean }
 	},
 	emits: [
 		"input",
@@ -1611,61 +1680,56 @@ var Qt = ["aria-disabled"], $t = [
 		"sub-commit"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = E(() => Xt[n.field.control]), a = E(() => n.dataMode === "expression"), o = E(() => 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 = E(() => n.field.data === !0 ? "col-span-2" : ""), c = E(() => n.field.data === !0 && n.field.control === "textarea"), l = E(() => n.field.completion === "rowsPath"), u = E(() => c.value || l.value), d = E(() => n.field.resource === !0), f = I(null), p = E(() => n.field.data === !0 && a.value && typeof n.value == "string" ? n.field.resource === !0 ? te(n.value) : c.value ? w(n.value) : [] : []), m = E(() => ee(p.value)), h = E(() => n.field.control === "textarea");
+		let n = e, r = t, i = T(() => tn[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 = p.value[0], t = f.value?.$el;
+			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 v = E(() => {
-			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;
-		}), y = I(null), b = E(() => y.value?.rootEl ?? null), { popup: x, accept: C } = S({
-			target: v,
+		}), 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: b
-		}), { popup: ne, accept: re } = se({
-			target: v,
-			enabled: () => l.value && n.completion != null,
-			resolve: (e) => n.completion?.(e) ?? null,
-			popupEl: b
+			popupEl: y
 		});
-		function ie(e, t, n) {
+		function te(e, t, n) {
 			r("sub-commit", e, t, n);
 		}
-		return (t, n) => (F(), k(T, null, [(F(), D(pe(e.field.control === "pair" || e.field.control === "imageSrc" ? "div" : "label"), { class: P(o.value) }, {
-			default: ge(() => [
-				e.field.control === "pair" ? O("", !0) : (F(), k("span", {
+		return (t, n) => (P(), O(w, null, [(P(), E(ge(e.field.control === "pair" || e.field.control === "imageSrc" ? "div" : "label"), { class: N(o.value) }, {
+			default: ye(() => [
+				e.field.control === "pair" ? D("", !0) : (P(), O("span", {
 					key: 0,
 					class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted",
 					title: e.field.title
-				}, z(e.field.label), 9, tn)),
-				e.field.data ? (F(), D(en, {
+				}, R(e.field.label), 9, sn)),
+				e.field.data ? (P(), E(on, {
 					key: 1,
 					class: "justify-self-end",
 					mode: e.dataMode ?? "static",
 					disabled: e.locked,
 					onChange: n[0] ||= (e) => r("toggle-mode")
-				}, null, 8, ["mode", "disabled"])) : O("", !0),
-				(F(), D(pe(i.value), {
+				}, null, 8, ["mode", "disabled"])) : D("", !0),
+				(P(), E(ge(i.value), {
 					ref_key: "controlRef",
-					ref: f,
-					class: P(["cn-prop-field__control", [s.value, {
+					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: ie
+					onSubCommit: te
 				}, null, 40, [
 					"class",
 					"field",
@@ -1676,49 +1740,44 @@ var Qt = ["aria-disabled"], $t = [
 					"source",
 					"resource-status"
 				])),
-				e.hint ? (F(), k("span", nn, z(e.hint), 1)) : O("", !0),
-				m.value ? (F(), k("span", {
+				e.hint ? (P(), O("span", cn, R(e.hint), 1)) : D("", !0),
+				p.value ? (P(), O("span", {
 					key: 3,
-					class: P(["cn-prop-field__hint cn-prop-field__hint--error col-span-2 block text-[11px] leading-4 text-cn-danger", { "cursor-pointer": h.value }]),
-					title: h.value ? "点击选中出错片段" : void 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: _
-				}, z(m.value), 11, rn)) : O("", !0)
+				}, R(p.value), 11, ln)) : D("", !0),
+				m.value ? (P(), O("span", un, R(m.value), 1)) : D("", !0)
 			]),
 			_: 1
-		}, 8, ["class"])), c.value ? (F(), D(g, {
+		}, 8, ["class"])), c.value ? (P(), E(ae, {
 			key: 0,
 			ref_key: "popupRef",
-			ref: y,
-			state: B(x),
-			onSelect: B(C)
-		}, null, 8, ["state", "onSelect"])) : l.value ? (F(), D(g, {
-			key: 1,
-			ref_key: "popupRef",
-			ref: y,
-			state: B(ne),
-			onSelect: B(re)
-		}, null, 8, ["state", "onSelect"])) : O("", !0)], 64));
+			ref: v,
+			state: z(b),
+			onSelect: z(S)
+		}, null, 8, ["state", "onSelect"])) : D("", !0)], 64));
 	}
-}), on = { 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)]" }, sn = { 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" }, cn = { class: "flex items-center gap-2" }, ln = { 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" }, un = { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, dn = {
+}), fn = { 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)]" }, pn = { 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" }, mn = { class: "flex items-center gap-2" }, hn = { 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" }, gn = { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, _n = {
 	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"
-}, fn = { class: "cn-props__section-title mb-2 text-[10px] font-semibold uppercase tracking-[0.16em] text-cn-muted" }, pn = { class: "flex flex-col gap-2" }, mn = "内容编辑中：请在画布编辑框内修改，退出后此处更新", hn = /* @__PURE__ */ M({
+}, vn = { class: "cn-props__section-title mb-2 text-[10px] font-semibold uppercase tracking-[0.16em] text-cn-muted" }, yn = { class: "flex flex-col gap-2" }, bn = "内容编辑中：请在画布编辑框内修改，退出后此处更新", xn = /* @__PURE__ */ j({
 	__name: "PropertyPanel",
 	props: { editor: {} },
 	setup(e) {
-		let t = e, n = Zt(t.editor);
-		fe(Z, {
+		let t = e, n = nn(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 = E(() => n.layer.value !== null), a = E(() => {
+		let i = T(() => n.layer.value !== null), a = T(() => {
 			let e = n.layer.value;
 			return e ? e.type : n.canvas.value ? "Canvas" : "—";
-		}), o = E(() => {
-			let e = n.layer.value ?? (n.selection.value ? null : n.canvas.value);
+		}), o = T(() => {
+			let e = n.layer.value ?? (n.selection.value ? null : Me(n.canvas.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) {
@@ -1733,8 +1792,9 @@ var Qt = ["aria-disabled"], $t = [
 						value: o.value,
 						dataMode: a.data ? n.isDataMarked(a) ? "expression" : "static" : void 0,
 						locked: c,
-						hint: c ? mn : 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 ? bn : 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({
@@ -1743,14 +1803,14 @@ var Qt = ["aria-disabled"], $t = [
 				});
 			}
 			return a;
-		}), s = E(() => {
+		}), s = T(() => {
 			let e = {}, t = n.layerBox.value, r = n.layer.value;
 			if (!t || !r) return e;
 			let i = /* @__PURE__ */ new Map();
 			if (r.shape.autoWidth && i.set("autoWidth", Math.round(t.width * 100) / 100), r.shape.autoHeight && i.set("autoHeight", Math.round(t.height * 100) / 100), i.size === 0) return e;
 			for (let t of n.sections.value) for (let r of t.fields) for (let t of r.items ?? []) {
 				let a = t.auto ? i.get(t.auto.key.join(".")) : void 0;
-				a !== void 0 && (e[K(r, t).join(".")] = {
+				a !== void 0 && (e[G(r, t).join(".")] = {
 					value: a,
 					preview: n.isPreviewBox.value
 				});
@@ -1760,28 +1820,28 @@ var Qt = ["aria-disabled"], $t = [
 		function c() {
 			n.setAnchorExpanded(!n.anchorExpanded.value);
 		}
-		return (e, t) => (F(), k("aside", on, [
-			A("header", sn, [A("div", cn, [A("span", ln, [t[0] ||= A("i", {
+		return (e, t) => (P(), O("aside", fn, [
+			k("header", pn, [k("div", mn, [k("span", hn, [t[0] ||= k("i", {
 				class: "size-1.5 rounded-full bg-cn-accent",
 				"aria-hidden": "true"
-			}, null, -1), ce(" " + z(a.value), 1)]), A("span", un, z(i.value ? "图层属性" : "画布属性"), 1)])]),
-			o.value.length === 0 ? (F(), k("p", dn, " 打开文档后可编辑属性 ")) : O("", !0),
-			(F(!0), k(T, null, L(o.value, (e) => (F(), k("section", {
+			}, null, -1), de(" " + R(a.value), 1)]), k("span", gn, R(i.value ? "图层属性" : "画布属性"), 1)])]),
+			o.value.length === 0 ? (P(), O("p", _n, " 打开文档后可编辑属性 ")) : 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"
-			}, [A("h3", fn, z(e.title), 1), A("div", pn, [(F(!0), k(T, null, L(e.fields, (e) => (F(), k(T, { key: e.key }, [e.field.control === "anchor" ? (F(), D(He, {
+			}, [k("h3", vn, R(e.title), 1), k("div", yn, [(P(!0), O(w, null, I(e.fields, (e) => (P(), O(w, { key: e.key }, [e.field.control === "anchor" ? (P(), E(Ke, {
 				key: 0,
 				field: e.field,
 				"model-value": e.value,
-				expanded: B(n).anchorExpanded.value,
-				onChange: (t) => B(n).commit(e.field, t, !0),
+				expanded: z(n).anchorExpanded.value,
+				onChange: (t) => z(n).commit(e.field, t, !0),
 				onToggle: c
 			}, null, 8, [
 				"field",
 				"model-value",
 				"expanded",
 				"onChange"
-			])) : (F(), D(an, {
+			])) : (P(), E(dn, {
 				key: 1,
 				field: e.field,
 				value: e.value,
@@ -1791,10 +1851,11 @@ var Qt = ["aria-disabled"], $t = [
 				completion: r(e.field),
 				displays: s.value,
 				"resource-status": e.resourceStatus,
-				onInput: (t) => B(n).commit(e.field, t, !1),
-				onChange: (t) => B(n).commit(e.field, t, !0),
-				onToggleMode: (t) => B(n).toggleDataMode(e.field),
-				onSubCommit: B(n).commit
+				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),
+				onSubCommit: z(n).commit
 			}, null, 8, [
 				"field",
 				"value",
@@ -1804,6 +1865,7 @@ var Qt = ["aria-disabled"], $t = [
 				"completion",
 				"displays",
 				"resource-status",
+				"drifted",
 				"onInput",
 				"onChange",
 				"onToggleMode",
@@ -1813,4 +1875,4 @@ var Qt = ["aria-disabled"], $t = [
 	}
 });
 //#endregion
-export { Z as a, Ce as c, Te as d, q as f, Xt as i, De as l, an as n, Et as o, Zt as r, Oe as s, hn as t, we as u };
+export { Z as a, Ee as c, Oe as d, q as f, tn as i, Ae as l, dn as n, At as o, nn as r, je as s, xn as t, De as u };