@hankchen/canvas-editor-vue 0.2.0 → 0.4.0

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

@@ -1,11 +1,12 @@
 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, r as m } from "./layerPath-uy2ywyld.js";
-import { i as h, r as g } from "./completionAnchor-CDR5YZhu.js";
-import { i as _, n as ee, r as te, t as v } from "./uploadFile-BOfv8aLG.js";
-import { n as y, r as ne, t as re } from "./usePathCompletion-uJ5c_gQ0.js";
-import { Fragment as b, computed as x, createBlock as S, createCommentVNode as C, createElementBlock as w, createElementVNode as T, createTextVNode as ie, createVNode as E, defineComponent as D, inject as ae, markRaw as O, nextTick as oe, normalizeClass as k, onScopeDispose as se, openBlock as A, provide as ce, ref as j, renderList as M, resolveDynamicComponent as le, shallowRef as N, toDisplayString as P, unref as F, vModelText as I, watch as L, watchEffect as ue, withCtx as de, withDirectives as fe, withModifiers as R } from "vue";
-var pe = e({
+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({
 	name: "grid-2x2",
 	size: 24,
 	node: [
@@ -27,7 +28,7 @@ var pe = e({
 		}]
 	],
 	aliases: ["grid-2-x-2"]
-}), me = e({
+}), ye = e({
 	name: "square-split-vertical",
 	size: 24,
 	node: [
@@ -45,7 +46,7 @@ var pe = e({
 		}]
 	],
 	aliases: ["split-square-vertical"]
-}), he = e({
+}), be = e({
 	name: "square",
 	size: 24,
 	node: [["rect", {
@@ -59,7 +60,7 @@ var pe = e({
 });
 //#endregion
 //#region ../canvas-editor/src/shared/resourceStatus.ts
-function ge(e, n) {
+function xe(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) {
@@ -70,7 +71,7 @@ function ge(e, n) {
 }
 //#endregion
 //#region src/property-panel/fieldSchema.ts
-var _e = "当前层内容未绘制，padding 不影响预览", z = {
+var Se = "当前层内容未绘制，padding 不影响预览", U = {
 	title: "位置与尺寸",
 	fields: [
 		{
@@ -125,7 +126,7 @@ var _e = "当前层内容未绘制，padding 不影响预览", z = {
 			control: "anchor"
 		}
 	]
-}, B = {
+}, W = {
 	title: "对齐",
 	fields: [{
 		key: ["align", "horizontal"],
@@ -138,7 +139,7 @@ var _e = "当前层内容未绘制，padding 不影响预览", z = {
 		control: "align",
 		domain: l
 	}]
-}, V = {
+}, G = {
 	title: "形状",
 	fields: [
 		{
@@ -160,7 +161,7 @@ var _e = "当前层内容未绘制，padding 不影响预览", z = {
 			label: "内边距",
 			control: "padding",
 			title: "内边距作用于内容盒，不改变图层尺寸",
-			hint: (e, t) => ge(e, t) ? _e : null
+			hint: (e, t) => xe(e, t) ? Se : null
 		},
 		{
 			key: ["shape", "border"],
@@ -168,25 +169,26 @@ var _e = "当前层内容未绘制，padding 不影响预览", z = {
 			control: "border"
 		}
 	]
-}, ve = {
+}, Ce = {
 	ImageLayer: [
-		z,
-		B,
-		V,
+		U,
+		W,
+		G,
 		{
 			title: "图片",
 			fields: [{
 				key: ["src"],
 				label: "资源地址",
 				control: "imageSrc",
-				data: !0
+				data: !0,
+				resource: !0
 			}]
 		}
 	],
 	TextLayer: [
-		z,
-		B,
-		V,
+		U,
+		W,
+		G,
 		{
 			title: "文本",
 			fields: [
@@ -222,23 +224,24 @@ var _e = "当前层内容未绘制，padding 不影响预览", z = {
 		}
 	],
 	QrCodeLayer: [
-		z,
-		B,
-		V,
+		U,
+		W,
+		G,
 		{
 			title: "二维码",
 			fields: [{
 				key: ["value"],
 				label: "内容",
-				control: "text",
-				data: !0
+				control: "resourceValue",
+				data: !0,
+				resource: !0
 			}]
 		}
 	],
 	TableLayer: [
-		z,
-		B,
-		V,
+		U,
+		W,
+		G,
 		{
 			title: "数据",
 			fields: [{
@@ -253,14 +256,14 @@ var _e = "当前层内容未绘制，padding 不影响预览", z = {
 		}
 	],
 	TableRowLayer: [
-		z,
-		B,
-		V
+		U,
+		W,
+		G
 	],
 	TableCellLayer: [
-		z,
-		B,
-		V
+		U,
+		W,
+		G
 	],
 	TableRowTemplate: [{
 		title: "行模板（行宽由表宽同步）",
@@ -277,15 +280,15 @@ var _e = "当前层内容未绘制，padding 不影响预览", z = {
 		}]
 	}]
 };
-function ye(e) {
-	return ve[e] ?? [];
+function we(e) {
+	return Ce[e] ?? [];
 }
-function H(e) {
-	if (e[e.length - 1] === "content") return m(e) ? "templateContent" : "content";
+function Te(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 be = {
+var Ee = {
 	root: [],
 	cell: [],
 	row: ["shape.width", "shape.autoWidth"],
@@ -297,16 +300,16 @@ var be = {
 	],
 	templateContent: ["shape.width", "shape.autoWidth"]
 };
-function U(e, t) {
+function K(e, t) {
 	return [...e.key, ...t.key];
 }
-function W(e, t) {
-	let n = new Set(be[H(e)]), r = [];
-	for (let e of ye(t.type)) {
+function De(e, t) {
+	let n = new Set(Ee[Te(e)]), r = [];
+	for (let e of we(t.type)) {
 		let i = [];
 		for (let r of e.fields) {
 			if (r.items) {
-				let e = r.items.filter((e) => !n.has(U(r, e).join(".")) && (!e.visibleWhen || e.visibleWhen(t)));
+				let e = r.items.filter((e) => !n.has(K(r, e).join(".")) && (!e.visibleWhen || e.visibleWhen(t)));
 				e.length > 0 && i.push({
 					...r,
 					items: e
@@ -322,7 +325,7 @@ function W(e, t) {
 	}
 	return r;
 }
-var G = [{
+var Oe = [{
 	title: "画布",
 	fields: [{
 		key: ["width"],
@@ -338,7 +341,7 @@ var G = [{
 		min: 1
 	}]
 }];
-function K(e, t) {
+function q(e, t) {
 	let n = e;
 	for (let e = 0; e < t.length; e += 1) {
 		if (typeof n != "object" || !n) return { ok: !1 };
@@ -351,14 +354,14 @@ function K(e, t) {
 }
 //#endregion
 //#region src/property-panel/fields/AlignField.vue?vue&type=script&setup=true&lang.ts
-var xe = ["aria-label"], Se = [
+var ke = ["aria-label"], Ae = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], Ce = {
+], je = {
 	key: 1,
 	class: "truncate px-1 text-[10px] leading-none"
-}, we = /* @__PURE__ */ D({
+}, Me = /* @__PURE__ */ M({
 	__name: "AlignField",
 	props: {
 		field: {},
@@ -395,7 +398,7 @@ var xe = ["aria-label"], Se = [
 					title: "底对齐"
 				}
 			}
-		}, p = x(() => {
+		}, p = E(() => {
 			let e = a.field.domain ?? [], t = d[e.join(".")];
 			return e.map((e) => ({
 				value: e,
@@ -406,42 +409,42 @@ var xe = ["aria-label"], Se = [
 		function m(e) {
 			e !== a.modelValue && u("change", e);
 		}
-		return (t, n) => (A(), w("span", {
+		return (t, n) => (F(), k("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
-		}, [(A(!0), w(b, null, M(p.value, (t, n) => (A(), w("button", {
+		}, [(F(!0), k(T, null, L(p.value, (t, n) => (F(), k("button", {
 			key: t.value,
 			type: "button",
-			class: k(["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: 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"]]),
 			"aria-pressed": t.value === e.modelValue,
 			title: t.title,
-			onClick: R((e) => m(t.value), ["prevent"])
-		}, [t.icon ? (A(), S(h, {
+			onClick: H((e) => m(t.value), ["prevent"])
+		}, [t.icon ? (F(), D(_, {
 			key: 0,
 			icon: t.icon
-		}, null, 8, ["icon"])) : (A(), w("span", Ce, P(t.value), 1))], 10, Se))), 128))], 8, xe));
+		}, null, 8, ["icon"])) : (F(), k("span", je, z(t.value), 1))], 10, Ae))), 128))], 8, ke));
 	}
-}), Te = { class: "block" }, Ee = ["aria-expanded", "title"], De = { class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted" }, Oe = { class: "flex shrink-0 items-center gap-1.5" }, ke = {
+}), 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 = {
 	viewBox: "0 0 24 24",
 	class: "size-3.5",
 	"aria-hidden": "true"
-}, Ae = [
+}, Re = [
 	"cx",
 	"cy",
 	"r"
-], je = {
+], ze = {
 	key: 0,
 	class: "mt-2 flex justify-end"
-}, Me = {
+}, Be = {
 	class: "cn-anchor grid w-[66px] shrink-0 grid-cols-3 gap-[3px]",
 	role: "group",
 	"aria-label": "九宫锚点"
-}, Ne = [
+}, Ve = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], Pe = /* @__PURE__ */ D({
+], He = /* @__PURE__ */ M({
 	__name: "AnchorDisclosureField",
 	props: {
 		field: {},
@@ -450,42 +453,42 @@ var xe = ["aria-label"], Se = [
 	},
 	emits: ["change", "toggle"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = O(d), a = Array.from({ length: 9 }, (e, t) => ({
+		let n = e, r = t, i = N(d), a = Array.from({ length: 9 }, (e, t) => ({
 			index: t,
 			cx: 4 + t % 3 * 8,
 			cy: 4 + Math.floor(t / 3) * 8
-		})), o = x(() => {
+		})), o = E(() => {
 			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) => (A(), w("span", Te, [T("button", {
+		return (t, n) => (F(), k("span", Ne, [A("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")
-		}, [T("span", De, P(e.field.label), 1), T("span", Oe, [(A(), w("svg", ke, [(A(!0), w(b, null, M(F(a), (e) => (A(), w("circle", {
+		}, [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", {
 			key: e.index,
 			cx: e.cx,
 			cy: e.cy,
 			r: e.index === o.value ? 3.2 : 2.2,
-			class: k(e.index === o.value ? "fill-cn-accent" : "fill-cn-muted/35")
-		}, null, 10, Ae))), 128))])), E(h, {
-			icon: F(u),
-			class: k(["text-cn-muted transition-transform duration-150", { "rotate-180": e.expanded }])
-		}, null, 8, ["icon", "class"])])], 8, Ee), e.expanded ? (A(), w("span", je, [T("span", Me, [(A(!0), w(b, null, M(F(i), (t) => (A(), w("button", {
+			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", {
 			key: t,
 			type: "button",
-			class: k(["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: 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"]),
 			"aria-pressed": t === e.modelValue,
 			title: t,
 			onClick: (e) => s(t)
-		}, null, 10, Ne))), 128))])])) : C("", !0)]));
+		}, null, 10, Ve))), 128))])])) : O("", !0)]));
 	}
-}), Fe = { class: "cn-bool relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center" }, Ie = ["checked"], Le = /* @__PURE__ */ D({
+}), Ue = { class: "cn-bool relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center" }, We = ["checked"], Ge = /* @__PURE__ */ M({
 	__name: "BooleanField",
 	props: {
 		field: {},
@@ -493,26 +496,26 @@ var xe = ["aria-label"], Se = [
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = j(null);
+		let n = e, r = t, i = I(null);
 		async function a(e) {
-			r("change", e.target.checked), await oe(), i.value && (i.value.checked = n.modelValue);
+			r("change", e.target.checked), await ue(), i.value && (i.value.checked = n.modelValue);
 		}
-		return ue(() => {
+		return he(() => {
 			i.value && (i.value.checked = n.modelValue);
-		}), (t, n) => (A(), w("label", Fe, [
-			T("input", {
+		}), (t, n) => (F(), k("label", Ue, [
+			A("input", {
 				ref_key: "inputRef",
 				ref: i,
 				class: "cn-bool__input peer sr-only",
 				type: "checkbox",
 				checked: e.modelValue,
 				onChange: a
-			}, null, 40, Ie),
-			n[0] ||= T("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] ||= T("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, 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)
 		]));
 	}
-}), Re = {
+}), Ke = {
 	1: [{
 		label: "四边",
 		rep: "top",
@@ -555,13 +558,13 @@ var xe = ["aria-label"], Se = [
 		}
 	]
 };
-function ze(e) {
+function qe(e) {
 	return e === 1 ? 2 : e === 2 ? 4 : 1;
 }
-function Be(e) {
+function Je(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 Ve(e, t) {
+function Ye(e, t) {
 	if (t === 1) {
 		let { top: t } = e;
 		return {
@@ -582,17 +585,17 @@ function Ve(e, t) {
 	}
 	return e;
 }
-function He(e, t) {
+function Xe(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 Ue(e) {
+function Ze(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 We(e, t) {
+function Qe(e, t) {
 	let n = (e) => e === null ? null : { ...e };
 	if (t === 1) {
 		let t = n(e.top);
@@ -614,18 +617,18 @@ function We(e, t) {
 	}
 	return e;
 }
-function Ge(e, t) {
-	return q(e.top, t.top) && q(e.bottom, t.bottom) && q(e.left, t.left) && q(e.right, t.right);
+function $e(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 Ke(e, t) {
-	let n = x(() => t(e())), r = j(null), i = x(() => r.value ?? n.value);
-	L(e, () => {
+function et(e, t) {
+	let n = E(() => t(e())), r = I(null), i = E(() => r.value ?? n.value);
+	V(e, () => {
 		r.value = null;
 	});
 	function a() {
-		let e = i.value, t = ze(e);
+		let e = i.value, t = qe(e);
 		return r.value = t, {
 			from: e,
 			to: t
@@ -638,7 +641,7 @@ function Ke(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`, qe = J, Je = "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", Ye = "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", Xe = ["aria-label"], Ze = /* @__PURE__ */ D({
+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({
 	__name: "BorderWidthInput",
 	props: {
 		value: {},
@@ -646,8 +649,8 @@ 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, i = j(n.value === null ? "" : String(n.value)), a = j(!1);
-		L(() => n.value, (e) => {
+		let n = e, r = t, i = I(n.value === null ? "" : String(n.value)), a = I(!1);
+		V(() => n.value, (e) => {
 			a.value || (i.value = e === null ? "" : String(e));
 		});
 		function o(e) {
@@ -676,9 +679,9 @@ var J = "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) => fe((A(), w("input", {
+		return (t, n) => _e((F(), k("input", {
 			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
-			class: k(["cn-field cn-field--number min-w-0 flex-1", F(Y)]),
+			class: P(["cn-field cn-field--number min-w-0 flex-1", B(X)]),
 			type: "number",
 			"aria-label": e.label,
 			min: 0,
@@ -689,9 +692,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, Xe)), [[I, i.value]]);
+		}, null, 42, it)), [[me, i.value]]);
 	}
-}), Qe = ["aria-label", "title"], $e = /* @__PURE__ */ D({
+}), ot = ["aria-label", "title"], st = /* @__PURE__ */ M({
 	__name: "ShorthandModeButton",
 	props: {
 		mode: {},
@@ -701,35 +704,35 @@ var J = "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: he,
+				icon: be,
 				title: "统一值"
 			},
 			2: {
-				icon: me,
+				icon: ye,
 				title: "上下/左右"
 			},
 			4: {
-				icon: pe,
+				icon: ve,
 				title: "四边独立"
 			}
-		}, a = x(() => i[n.mode]), o = x(() => `${n.label}：${a.value.title}（点击切换值模式）`);
-		return (e, t) => (A(), w("button", {
+		}, a = E(() => i[n.mode]), o = E(() => `${n.label}：${a.value.title}（点击切换值模式）`);
+		return (e, t) => (F(), k("button", {
 			type: "button",
 			class: "cn-props__mode-toggle shrink-0",
 			"aria-label": o.value,
 			title: o.value,
-			onClick: t[0] ||= R((e) => r("cycle"), ["prevent"])
-		}, [E(h, {
+			onClick: t[0] ||= H((e) => r("cycle"), ["prevent"])
+		}, [j(_, {
 			icon: a.value.icon,
 			size: 12
-		}, null, 8, ["icon"])], 8, Qe));
+		}, null, 8, ["icon"])], 8, ot));
 	}
-}), et = { class: "cn-border flex w-full min-w-0 items-center gap-1" }, tt = { class: "grid min-w-0 flex-1 gap-1 grid-cols-1" }, nt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, rt = [
+}), 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 = [
 	"value",
 	"disabled",
 	"onInput",
 	"onChange"
-], it = "#000000", at = /* @__PURE__ */ D({
+], ft = "#000000", pt = /* @__PURE__ */ M({
 	__name: "BorderField",
 	props: {
 		field: {},
@@ -737,12 +740,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 } = Ke(() => n.modelValue, Ue), o = x(() => Re[i.value]);
+		let n = e, r = t, { mode: i, cycle: a } = et(() => n.modelValue, Ze), o = E(() => Ke[i.value]);
 		function s(e) {
 			return n.modelValue[e.rep]?.width ?? null;
 		}
 		function c(e) {
-			return n.modelValue[e.rep]?.color ?? it;
+			return n.modelValue[e.rep]?.color ?? ft;
 		}
 		function l(e, t, i) {
 			let a = { ...n.modelValue };
@@ -750,7 +753,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 ?? it;
+			let i = n.modelValue[e.rep]?.color ?? ft;
 			l(e, t <= 0 ? null : {
 				width: t,
 				color: i
@@ -768,20 +771,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 = We(n.modelValue, t);
-				Ge(e, n.modelValue) || r("change", e);
+				let e = Qe(n.modelValue, t);
+				$e(e, n.modelValue) || r("change", e);
 			}
 		}
-		return (t, n) => (A(), w("span", et, [E($e, {
-			mode: F(i),
+		return (t, n) => (F(), k("span", ct, [j(st, {
+			mode: B(i),
 			label: "边框",
 			onCycle: f
-		}, null, 8, ["mode"]), T("span", tt, [(A(!0), w(b, null, M(o.value, (t) => (A(), w("label", {
+		}, null, 8, ["mode"]), A("span", lt, [(F(!0), k(T, null, L(o.value, (t) => (F(), k("label", {
 			key: t.rep,
 			class: "flex items-center gap-1.5"
 		}, [
-			T("span", nt, P(t.label), 1),
-			E(Ze, {
+			A("span", ut, z(t.label), 1),
+			j(at, {
 				class: "cn-border__width",
 				value: s(t),
 				label: t.label,
@@ -793,7 +796,7 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 				"onInput",
 				"onChange"
 			]),
-			T("input", {
+			A("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: "边框颜色",
@@ -801,23 +804,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, rt)
+			}, null, 40, dt)
 		]))), 128))])]));
 	}
-}), ot = Symbol("canvas-font-picker");
-function st() {
-	return ae(ot, null);
-}
-//#endregion
-//#region src/property-panel/fields/FontField.vue?vue&type=script&setup=true&lang.ts
-var ct = ["value"], lt = {
+}), mt = ["value"], ht = {
 	key: 1,
 	class: "flex flex-1 items-center gap-1.5"
-}, ut = ["value"], dt = ["value"], ft = [
+}, gt = ["value"], _t = ["value"], vt = [
 	"disabled",
 	"title",
 	"data-upload-error"
-], pt = /* @__PURE__ */ D({
+], yt = /* @__PURE__ */ M({
 	__name: "FontField",
 	props: {
 		field: {},
@@ -825,7 +822,7 @@ var ct = ["value"], lt = {
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = st(), a = x(() => {
+		let n = e, r = t, i = y(), a = E(() => {
 			if (i === null) return [];
 			let e = [{
 				label: "内置默认字体",
@@ -860,7 +857,7 @@ var ct = ["value"], lt = {
 		function f(e) {
 			c = !1, r("change", e.target.value);
 		}
-		let p = j(!1), m = j(null), h = j(null);
+		let p = I(!1), m = I(null), h = I(null);
 		function g() {
 			m.value = null, h.value?.click();
 		}
@@ -869,7 +866,7 @@ var ct = ["value"], lt = {
 			if (t.value = "", i !== null && n && !p.value) {
 				p.value = !0;
 				try {
-					let e = await i.uploadFont(await v(n));
+					let e = await i.uploadFont(await C(n));
 					r("change", e);
 				} catch (e) {
 					m.value = e instanceof Error ? e.message : String(e);
@@ -878,25 +875,25 @@ var ct = ["value"], lt = {
 				}
 			}
 		}
-		return (t, n) => F(i) === null ? (A(), w("input", {
+		return (t, n) => B(i) === null ? (F(), k("input", {
 			key: 0,
-			class: k(["cn-field", F(qe)]),
+			class: P(["cn-field", B(tt)]),
 			type: "text",
 			value: e.modelValue,
 			onInput: l,
 			onCompositionstart: u,
 			onCompositionend: d,
 			onChange: f
-		}, null, 42, ct)) : (A(), w("div", lt, [
-			T("select", {
-				class: k(["cn-field cn-select", F(J)]),
+		}, null, 42, mt)) : (F(), k("div", ht, [
+			A("select", {
+				class: P(["cn-field cn-select", B(Y)]),
 				value: e.modelValue,
 				onChange: s
-			}, [(A(!0), w(b, null, M(a.value, (e) => (A(), w("option", {
+			}, [(F(!0), k(T, null, L(a.value, (e) => (F(), k("option", {
 				key: e.value,
 				value: e.value
-			}, P(e.label), 9, dt))), 128))], 42, ut),
-			T("input", {
+			}, z(e.label), 9, _t))), 128))], 42, gt),
+			A("input", {
 				ref_key: "fileInput",
 				ref: h,
 				type: "file",
@@ -904,7 +901,7 @@ var ct = ["value"], lt = {
 				accept: ".ttf,.otf,.woff,.woff2,font/ttf,font/otf,font/woff,font/woff2",
 				onChange: _
 			}, null, 544),
-			F(i).canUpload ? (A(), w("button", {
+			B(i).canUpload ? (F(), k("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",
@@ -912,10 +909,10 @@ var ct = ["value"], lt = {
 				title: m.value ?? "上传本机字体（加入清单后可选）",
 				"data-upload-error": m.value ?? void 0,
 				onClick: g
-			}, P(p.value ? "…" : m.value ? "!" : "上传"), 9, ft)) : C("", !0)
+			}, z(p.value ? "…" : m.value ? "!" : "上传"), 9, vt)) : O("", !0)
 		]));
 	}
-}), mt = { class: "cn-color flex min-w-0 flex-1 items-center gap-1.5" }, ht = ["checked"], gt = ["value", "disabled"], _t = ["value", "disabled"], vt = "#000000", yt = /* @__PURE__ */ D({
+}), 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({
 	__name: "ColorField",
 	props: {
 		field: {},
@@ -923,12 +920,12 @@ var ct = ["value"], lt = {
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = j(n.modelValue !== null), a = j(o(n.modelValue));
-		L(() => n.modelValue, (e) => {
+		let n = e, r = t, i = I(n.modelValue !== null), a = I(o(n.modelValue));
+		V(() => 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 : vt;
+			return e !== null && /^#[0-9a-fA-F]{6}$/.test(e) ? e : wt;
 		}
 		function s(e) {
 			let t = e.target.checked;
@@ -955,40 +952,40 @@ var ct = ["value"], lt = {
 			}
 			a.value = o(t), r("change", t);
 		}
-		return (t, n) => (A(), w("span", mt, [
-			e.field.nullable ? (A(), w("input", {
+		return (t, n) => (F(), k("span", bt, [
+			e.field.nullable ? (F(), k("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, ht)) : C("", !0),
-			T("input", {
-				class: k(["cn-color__swatch", F(Ye)]),
+			}, null, 40, xt)) : O("", !0),
+			A("input", {
+				class: P(["cn-color__swatch", B(rt)]),
 				type: "color",
 				value: a.value,
 				disabled: !i.value,
 				onInput: c,
 				onChange: l
-			}, null, 42, gt),
-			T("input", {
-				class: k(["cn-color__text min-w-0 flex-1", F(J)]),
+			}, null, 42, St),
+			A("input", {
+				class: P(["cn-color__text min-w-0 flex-1", B(Y)]),
 				type: "text",
 				value: e.modelValue ?? "",
 				disabled: !i.value,
 				placeholder: "无",
 				onChange: u
-			}, null, 42, _t)
+			}, null, 42, Ct)
 		]));
 	}
-}), X = Symbol("canvas-image-upload");
-function bt() {
-	return ae(X, null);
+}), Z = Symbol("canvas-image-upload");
+function Et() {
+	return le(Z, null);
 }
 //#endregion
 //#region src/property-panel/fields/TextField.vue?vue&type=script&setup=true&lang.ts
-var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
+var Dt = ["value", "placeholder"], Q = /* @__PURE__ */ M({
 	__name: "TextField",
 	props: {
 		field: {},
@@ -996,7 +993,7 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = !1, a = j(!1);
+		let n = e, r = t, i = !1, a = I(!1);
 		function o(e) {
 			return n.field.nonEmpty === !0 ? e.trim() === "" ? (a.value = !0, !0) : (a.value = !1, !1) : !1;
 		}
@@ -1017,8 +1014,8 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 			let t = e.target.value;
 			o(t) || r("change", t);
 		}
-		return (t, n) => (A(), w("input", {
-			class: k(["cn-field", [F(qe), a.value ? "cn-field--invalid" : ""]]),
+		return (t, n) => (F(), k("input", {
+			class: P(["cn-field", [B(tt), a.value ? "cn-field--invalid" : ""]]),
 			type: "text",
 			value: e.modelValue,
 			placeholder: e.field.placeholder,
@@ -1026,29 +1023,78 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 			onCompositionstart: c,
 			onCompositionend: l,
 			onChange: u
-		}, null, 42, xt));
+		}, null, 42, Dt));
+	}
+}), Ot = /* @__PURE__ */ M({
+	__name: "ResourceValueField",
+	props: {
+		field: {},
+		modelValue: {},
+		dataMode: {},
+		source: { type: [Function, null] },
+		disabled: { type: Boolean }
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = E(() => n.dataMode === "expression"), a = E(() => {
+			let e = n.modelValue ?? "";
+			return i.value ? ne(e) ?? e : "";
+		});
+		function o(e) {
+			let t = ie(e);
+			r("input", t), r("change", t);
+		}
+		return (t, n) => i.value ? (F(), D(re, {
+			key: 0,
+			"model-value": a.value,
+			source: e.source ?? null,
+			disabled: e.disabled,
+			"aria-label": e.field.label,
+			placeholder: "未选择字段",
+			"onUpdate:modelValue": o
+		}, null, 8, [
+			"model-value",
+			"source",
+			"disabled",
+			"aria-label"
+		])) : (F(), D(Q, {
+			key: 1,
+			field: e.field,
+			"model-value": e.modelValue ?? "",
+			"aria-label": e.field.label,
+			disabled: e.disabled,
+			onInput: n[0] ||= (e) => r("input", e),
+			onChange: n[1] ||= (e) => r("change", e)
+		}, null, 8, [
+			"field",
+			"model-value",
+			"aria-label",
+			"disabled"
+		]));
 	}
-}), St = {
+}), kt = {
 	key: 0,
 	class: "flex flex-col gap-1.5"
-}, Ct = [
+}, At = [
 	"disabled",
 	"title",
 	"data-upload-error"
-], wt = ["src"], Tt = {
+], jt = ["src"], Mt = {
 	key: 2,
 	class: "relative"
-}, Et = { class: "flex items-center gap-1.5" }, Dt = /* @__PURE__ */ D({
+}, Nt = { class: "flex items-center gap-1.5" }, Pt = /* @__PURE__ */ M({
 	__name: "ImageSrcField",
 	props: {
 		field: {},
 		modelValue: {},
 		dataMode: {},
-		resourceStatus: {}
+		resourceStatus: {},
+		source: { type: [Function, null] },
+		disabled: { type: Boolean }
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = bt(), a = x(() => i !== null && i.canUpload && n.dataMode !== "expression"), o = x(() => typeof n.modelValue == "string" && n.modelValue !== ""), s = x(() => n.resourceStatus === "pending" ? "装载中" : n.resourceStatus === "failed" ? "失败" : null), c = j(!1), l = j(null), u = j(null);
+		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);
 		function d() {
 			l.value = null, u.value?.click();
 		}
@@ -1057,7 +1103,7 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 			if (t.value = "", i !== null && n && !c.value) {
 				c.value = !0;
 				try {
-					let e = await i.uploadImage(await v(n));
+					let e = await i.uploadImage(await C(n));
 					e !== null && r("change", e);
 				} catch (e) {
 					l.value = e instanceof Error ? e.message : String(e);
@@ -1066,8 +1112,8 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 				}
 			}
 		}
-		return (t, n) => a.value ? (A(), w("div", St, [
-			T("button", {
+		return (t, n) => a.value ? (F(), k("div", kt, [
+			A("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,
@@ -1075,19 +1121,19 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 				"data-upload-error": l.value ?? void 0,
 				onClick: d
 			}, [
-				o.value ? (A(), w("img", {
+				o.value ? (F(), k("img", {
 					key: 0,
 					src: e.modelValue ?? void 0,
 					class: "absolute inset-0 size-full object-cover",
 					alt: ""
-				}, null, 8, wt)) : C("", !0),
-				s.value ? (A(), w("span", {
+				}, null, 8, jt)) : O("", !0),
+				s.value ? (F(), k("span", {
 					key: 1,
-					class: k(["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"])
-				}, P(s.value), 3)) : C("", !0),
-				o.value ? C("", !0) : (A(), w("span", Tt, P(c.value ? "…" : l.value ? "!" : "点击上传图片"), 1))
-			], 8, Ct),
-			T("input", {
+					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", {
 				ref_key: "fileInput",
 				ref: u,
 				type: "file",
@@ -1095,7 +1141,7 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 				accept: "image/*",
 				onChange: f
 			}, null, 544),
-			T("div", Et, [E(Z, {
+			A("div", Nt, [j(Q, {
 				class: "flex-1",
 				field: e.field,
 				"model-value": e.modelValue ?? "",
@@ -1106,32 +1152,46 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 				"field",
 				"model-value",
 				"aria-label"
-			]), o.value ? (A(), w("button", {
+			]), o.value ? (F(), k("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", "")
-			}, "清除")) : C("", !0)])
-		])) : (A(), S(Z, {
+			}, "清除")) : O("", !0)])
+		])) : e.dataMode === "expression" ? (F(), D(Ot, {
 			key: 1,
 			field: e.field,
-			"model-value": e.modelValue ?? "",
-			"aria-label": e.field.label,
+			"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)
+		}, null, 8, [
+			"field",
+			"model-value",
+			"source",
+			"disabled"
+		])) : (F(), D(Q, {
+			key: 2,
+			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)
 		}, null, 8, [
 			"field",
 			"model-value",
 			"aria-label"
 		]));
 	}
-}), Ot = [
+}), Ft = [
 	"aria-label",
 	"min",
 	"max",
 	"step"
-], Q = /* @__PURE__ */ D({
+], $ = /* @__PURE__ */ M({
 	__name: "NumberField",
 	props: {
 		field: {},
@@ -1139,8 +1199,8 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = j(String(n.modelValue)), a = j(!1);
-		L(() => n.modelValue, (e) => {
+		let n = e, r = t, i = I(String(n.modelValue)), a = I(!1);
+		V(() => n.modelValue, (e) => {
 			a.value || (i.value = String(e));
 		});
 		function o(e) {
@@ -1167,9 +1227,9 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 			let a = o(t);
 			i.value = String(a), r("change", a);
 		}
-		return (t, n) => fe((A(), w("input", {
+		return (t, n) => _e((F(), k("input", {
 			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
-			class: k(["cn-field cn-field--number", F(Y)]),
+			class: P(["cn-field cn-field--number", B(X)]),
 			type: "number",
 			"aria-label": e.field.label,
 			min: e.field.min,
@@ -1179,9 +1239,9 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 			onFocus: n[1] ||= (e) => a.value = !0,
 			onBlur: l,
 			onChange: l
-		}, null, 42, Ot)), [[I, i.value]]);
+		}, null, 42, Ft)), [[me, i.value]]);
 	}
-}), kt = { class: "cn-padding flex w-full min-w-0 items-center gap-1.5" }, At = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, jt = /* @__PURE__ */ D({
+}), 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({
 	__name: "PaddingField",
 	props: {
 		field: {},
@@ -1189,7 +1249,7 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { mode: i, cycle: a } = Ke(() => n.modelValue, Be), o = x(() => Re[i.value]);
+		let n = e, r = t, { mode: i, cycle: a } = et(() => n.modelValue, Je), o = E(() => Ke[i.value]);
 		function s(e) {
 			return {
 				key: ["padding", e.rep],
@@ -1205,18 +1265,18 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 		function l() {
 			let { from: e, to: t } = a();
 			if (t < e) {
-				let e = Ve(n.modelValue, t);
-				He(e, n.modelValue) || r("change", e);
+				let e = Ye(n.modelValue, t);
+				Xe(e, n.modelValue) || r("change", e);
 			}
 		}
-		return (t, n) => (A(), w("span", kt, [E($e, {
-			mode: F(i),
+		return (t, n) => (F(), k("span", It, [j(st, {
+			mode: B(i),
 			label: "内边距",
 			onCycle: l
-		}, null, 8, ["mode"]), T("span", { class: k(["grid min-w-0 flex-1 gap-1.5", F(i) === 1 ? "grid-cols-1" : "grid-cols-2"]) }, [(A(!0), w(b, null, M(o.value, (t) => (A(), w("label", {
+		}, 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", {
 			key: t.rep,
 			class: "flex min-w-0 items-center gap-1.5"
-		}, [T("span", At, P(t.label), 1), E(Q, {
+		}, [A("span", Lt, z(t.label), 1), j($, {
 			class: "min-w-0 flex-1",
 			field: s(t),
 			"model-value": e.modelValue[t.rep],
@@ -1229,16 +1289,16 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 			"onChange"
 		])]))), 128))], 2)]));
 	}
-}), Mt = { class: "grid w-full min-w-0 grid-cols-2 gap-1" }, Nt = ["title"], Pt = { class: "w-3.5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, Ft = [
+}), 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 = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], It = [
+], Ut = [
 	"aria-label",
 	"value",
 	"placeholder",
 	"title"
-], Lt = /* @__PURE__ */ D({
+], Wt = /* @__PURE__ */ M({
 	__name: "PairField",
 	props: {
 		field: {},
@@ -1251,16 +1311,16 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 		"sub-commit"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = x(() => n.field.items ?? []);
+		let n = e, r = t, i = E(() => 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) {
 			return {
 				...e,
-				key: U(n.field, e)
+				key: K(n.field, e)
 			};
 		}
 		function s(e) {
@@ -1277,11 +1337,11 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 			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) {
-			return n.displays?.[U(n.field, e).join(".")];
+			return n.displays?.[K(n.field, e).join(".")];
 		}
 		function f(e) {
 			let t = d(e);
@@ -1294,30 +1354,30 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 			let t = d(e);
 			return t?.preview ? "模板子树：预览盒尺寸（随行实例变化，非文档声明值）" : t === void 0 ? `${e.label}自适应：已开启` : `${e.label}自适应：布局解析值（与画布选择框同源）`;
 		}
-		return (e, t) => (A(), w("span", Mt, [(A(!0), w(b, null, M(i.value, (e) => (A(), w("label", {
+		return (e, t) => (F(), k("span", zt, [(F(!0), k(T, null, L(i.value, (e) => (F(), k("label", {
 			key: e.key.join("."),
 			class: "flex min-w-0 items-center gap-1",
 			title: e.auto ? void 0 : e.label
 		}, [
-			T("span", Pt, P(e.label), 1),
-			e.auto ? (A(), w("button", {
+			A("span", Vt, z(e.label), 1),
+			e.auto ? (F(), k("button", {
 				key: 0,
 				type: "button",
-				class: k(["cn-props__auto-toggle shrink-0", { "cn-props__auto-toggle--active": a(e) }]),
+				class: P(["cn-props__auto-toggle shrink-0", { "cn-props__auto-toggle--active": a(e) }]),
 				"aria-pressed": a(e),
 				title: p(e),
-				onClick: R((t) => l(e), ["prevent"])
-			}, "自", 10, Ft)) : C("", !0),
-			a(e) ? (A(), w("input", {
+				onClick: H((t) => l(e), ["prevent"])
+			}, "自", 10, Ht)) : O("", !0),
+			a(e) ? (F(), k("input", {
 				key: 2,
-				class: k(["cn-field cn-field--number min-w-0 flex-1", [F(Y), d(e)?.preview ? "cn-field--preview" : ""]]),
+				class: P(["cn-field cn-field--number min-w-0 flex-1", [B(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, It)) : (A(), S(Q, {
+			}, null, 10, Ut)) : (F(), D($, {
 				key: 1,
 				class: "min-w-0 flex-1",
 				field: e,
@@ -1330,9 +1390,9 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 				"onInput",
 				"onChange"
 			]))
-		], 8, Nt))), 128))]));
+		], 8, Bt))), 128))]));
 	}
-}), Rt = ["value"], zt = ["value"], Bt = /* @__PURE__ */ D({
+}), Gt = ["value"], Kt = ["value"], qt = /* @__PURE__ */ M({
 	__name: "SelectField",
 	props: {
 		field: {},
@@ -1344,20 +1404,21 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 		function r(e) {
 			n("change", e.target.value);
 		}
-		return (t, n) => (A(), w("select", {
+		return (t, n) => (F(), k("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
-		}, [(A(!0), w(b, null, M(e.field.domain ?? [], (e) => (A(), w("option", {
+		}, [(F(!0), k(T, null, L(e.field.domain ?? [], (e) => (F(), k("option", {
 			key: e,
 			value: e
-		}, P(e), 9, zt))), 128))], 40, Rt));
+		}, z(e), 9, Kt))), 128))], 40, Gt));
 	}
-}), Vt = ["value"], Ht = /* @__PURE__ */ D({
+}), Jt = ["value", "disabled"], Yt = /* @__PURE__ */ M({
 	__name: "TextareaField",
 	props: {
 		field: {},
-		modelValue: {}
+		modelValue: {},
+		disabled: { type: Boolean }
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
@@ -1375,70 +1436,76 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 		function s(e) {
 			r = !1, n("change", e.target.value);
 		}
-		return (t, n) => (A(), w("textarea", {
-			class: k(["cn-field", F(Je)]),
+		return (t, n) => (F(), k("textarea", {
+			class: P(["cn-field", B(nt)]),
 			rows: "3",
 			value: e.modelValue,
+			disabled: e.disabled,
 			onInput: i,
 			onCompositionstart: a,
 			onCompositionend: o,
 			onChange: s
-		}, null, 42, Vt));
+		}, null, 42, Jt));
 	}
-}), $ = {
-	number: O(Q),
-	text: O(Z),
-	textarea: O(Ht),
-	color: O(yt),
-	select: O(Bt),
-	boolean: O(Le),
-	pair: O(Lt),
-	anchor: O(Pe),
-	align: O(we),
-	padding: O(jt),
-	border: O(at),
-	font: O(pt),
-	imageSrc: O(Dt)
+}), 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)
 };
 //#endregion
 //#region src/property-panel/usePropertyPanel.ts
-function Ut(e) {
-	let t = N(e.store.doc), n = N(e.store.ui.selection), r = N(e.store.ui.anchorExpanded), i = N(e.store.ui.dataSourceSchema), a = N(e.store.ui.resourceStatuses), o = e.subscribe((o) => {
-		o.scope === "doc" ? (t.value = e.store.doc, n.value = e.store.ui.selection, a.value = e.store.ui.resourceStatuses) : o.scope === "ui" && (o.branch === "selection" ? (n.value = e.store.ui.selection, e.store.closeMerge()) : o.branch === "anchorExpanded" ? r.value = e.store.ui.anchorExpanded : o.branch === "dataSourceSchema" ? i.value = e.store.ui.dataSourceSchema : o.branch === "resourceStatuses" && (a.value = e.store.ui.resourceStatuses));
+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) => {
+		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));
 	});
-	se(o, !0);
-	let s = x(() => {
+	de(s, !0);
+	let c = E(() => {
 		let e = t.value, r = n.value;
 		return e && r ? p(e, r) : null;
-	}), c = x(() => t.value), l = x(() => {
-		let e = s.value, r = n.value;
-		return e && r ? W(r, e) : t.value ? G : [];
-	}), u = x(() => {
+	}), l = E(() => t.value), u = E(() => {
+		let e = c.value, r = n.value;
+		return e && r ? De(r, e) : t.value ? Oe : [];
+	}), d = E(() => {
 		let r = n.value;
 		return r && t.value ? e.layerBoxAt(r) : null;
-	}), d = x(() => {
+	}), f = E(() => {
 		let e = i.value;
-		return e === null ? null : te(e, _(e, t.value, n.value));
-	}), f = x(() => y(ne(t.value, n.value, i.value))), m = x(() => n.value?.includes("template") ?? !1);
-	function h(t) {
+		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(() => {
+		let e = o.value, t = n.value;
+		return e !== null && t !== null && m(e.path, t);
+	});
+	function ee(t) {
 		e.store.setAnchorExpanded(t);
 	}
-	function g(e) {
+	function y(e) {
 		if (!e.data) return !1;
-		let t = s.value;
+		if (_.value) return o.value?.expression === !0;
+		let t = c.value;
 		return t !== null && "expression" in t && t.expression !== null;
 	}
-	function ee(r, i, a) {
+	function S(r, i, a) {
 		if (!t.value) return;
 		let o = n.value;
 		if (!o) {
-			re(r, i, a);
+			w(r, i, a);
 			return;
 		}
-		let s = `sel:${o.join(".")}:${r.key.join(".")}`;
+		let s = x(o, r.key);
 		if (r.data) {
-			if (g(r)) {
-				let t = `sel:${o.join(".")}:data.expression`;
+			if (y(r)) {
+				let t = x(o, ["data", "expression"]);
 				e.updateDataExpression(o, i, { mergeKey: t }), a && e.store.closeMerge(t);
 				return;
 			}
@@ -1447,49 +1514,50 @@ function Ut(e) {
 		}
 		e.updateSpec(o, r.key, i, { mergeKey: s }), a && e.store.closeMerge(s);
 	}
-	function v(t) {
-		let r = s.value, i = n.value;
-		if (!r || !i || !t.data) return;
-		let a = K(r, t.key);
-		if (!a.ok) return;
-		let o = typeof a.value == "string" ? a.value : "";
-		g(t) ? e.updateData(i, o) : e.updateDataExpression(i, o);
+	function C(t) {
+		let r = n.value;
+		r && t.data && e.toggleDataMode(r);
 	}
-	function re(t, n, r) {
+	function w(t, n, r) {
 		let i = t.key[0];
 		if (i !== "width" && i !== "height" || typeof n != "number") return;
 		let a = `canvas:${i}`;
 		e.updateCanvasProp(i, n, { mergeKey: a }), r && e.store.closeMerge(a);
 	}
 	return {
-		selection: x(() => n.value),
-		layer: s,
-		canvas: c,
-		sections: l,
-		layerBox: u,
-		isPreviewBox: m,
-		completionSource: d,
-		rowsPathSource: f,
-		resourceStatuses: x(() => a.value),
-		anchorExpanded: x(() => r.value),
-		commit: ee,
-		toggleDataMode: v,
-		setAnchorExpanded: h
+		selection: E(() => n.value),
+		layer: c,
+		canvas: l,
+		sections: u,
+		layerBox: d,
+		isPreviewBox: g,
+		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
 	};
 }
 //#endregion
 //#region src/property-panel/fields/ValueTypeSegmented.vue?vue&type=script&setup=true&lang.ts
-var Wt = {
-	class: "cn-valuetype flex h-7 shrink-0 items-stretch overflow-hidden rounded-md border border-cn-field-line bg-cn-field",
-	role: "group",
-	"aria-label": "取值方式"
-}, Gt = [
+var Qt = ["aria-disabled"], $t = [
 	"aria-pressed",
 	"title",
+	"data-mode-static",
+	"data-mode-expression",
+	"disabled",
 	"onClick"
-], Kt = /* @__PURE__ */ D({
+], en = /* @__PURE__ */ M({
 	__name: "ValueTypeSegmented",
-	props: { mode: {} },
+	props: {
+		mode: {},
+		disabled: { type: Boolean }
+	},
 	emits: ["change"],
 	setup(e, { emit: t }) {
 		let n = e, r = t, i = [{
@@ -1502,26 +1570,35 @@ var Wt = {
 			title: "表达式值：内容为插值原文，画布显示解析镜像（{{路径}} / {{$index}} / {{$root.*}}）"
 		}];
 		function a(e) {
-			e !== n.mode && r("change", e);
+			n.disabled || e !== n.mode && r("change", e);
 		}
-		return (t, n) => (A(), w("span", Wt, [(A(), w(b, null, M(i, (t, n) => T("button", {
+		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 }]),
+			role: "group",
+			"aria-label": "取值方式",
+			"aria-disabled": e.disabled ? "true" : void 0
+		}, [(F(), k(T, null, L(i, (t, n) => A("button", {
 			key: t.value,
 			type: "button",
-			class: k(["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: 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"]]),
 			"aria-pressed": t.value === e.mode,
 			title: t.value === e.mode ? t.title : `${t.title}；点击切换`,
-			onClick: R((e) => a(t.value), ["prevent"])
-		}, P(t.label), 11, Gt)), 64))]));
+			"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));
 	}
-}), qt = ["title"], Jt = {
+}), tn = ["title"], nn = {
 	key: 2,
 	class: "cn-prop-field__hint col-span-2 block text-[11px] leading-4 text-cn-muted"
-}, Yt = /* @__PURE__ */ D({
+}, rn = ["title"], an = /* @__PURE__ */ M({
 	__name: "PropertyField",
 	props: {
 		field: {},
 		value: {},
 		dataMode: {},
+		locked: { type: Boolean },
 		completion: { type: [Function, null] },
 		displays: {},
 		hint: {},
@@ -1534,176 +1611,195 @@ var Wt = {
 		"sub-commit"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = x(() => $[n.field.control]), a = x(() => n.dataMode === "expression"), o = x(() => 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 = x(() => n.field.data === !0 ? "col-span-2" : ""), c = x(() => n.field.data === !0 && (n.field.control === "textarea" || n.field.control === "text" || n.field.control === "imageSrc")), l = x(() => n.field.completion === "rowsPath"), u = x(() => c.value || l.value), d = j(null), f = x(() => {
+		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");
+		function _() {
+			let e = p.value[0], t = f.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 = d.value?.$el;
+			let e = f.value?.$el;
 			return e instanceof HTMLTextAreaElement || e instanceof HTMLInputElement ? e : null;
-		}), p = j(null), m = x(() => p.value?.rootEl ?? null), { popup: h, accept: _ } = ee({
-			target: f,
+		}), y = I(null), b = E(() => y.value?.rootEl ?? null), { popup: x, accept: C } = S({
+			target: v,
 			enabled: () => c.value && a.value && n.completion != null,
 			pairing: () => c.value && a.value,
 			resolve: (e) => n.completion?.(e) ?? null,
-			popupEl: m
-		}), { popup: te, accept: v } = re({
-			target: f,
+			popupEl: b
+		}), { popup: ne, accept: re } = se({
+			target: v,
 			enabled: () => l.value && n.completion != null,
 			resolve: (e) => n.completion?.(e) ?? null,
-			popupEl: m
+			popupEl: b
 		});
-		function y(e, t, n) {
+		function ie(e, t, n) {
 			r("sub-commit", e, t, n);
 		}
-		return (t, n) => (A(), w(b, null, [(A(), S(le(e.field.control === "pair" || e.field.control === "imageSrc" ? "div" : "label"), { class: k(o.value) }, {
-			default: de(() => [
-				e.field.control === "pair" ? C("", !0) : (A(), w("span", {
+		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", {
 					key: 0,
 					class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted",
 					title: e.field.title
-				}, P(e.field.label), 9, qt)),
-				e.field.data ? (A(), S(Kt, {
+				}, z(e.field.label), 9, tn)),
+				e.field.data ? (F(), D(en, {
 					key: 1,
 					class: "justify-self-end",
 					mode: e.dataMode ?? "static",
+					disabled: e.locked,
 					onChange: n[0] ||= (e) => r("toggle-mode")
-				}, null, 8, ["mode"])) : C("", !0),
-				(A(), S(le(i.value), {
+				}, null, 8, ["mode", "disabled"])) : O("", !0),
+				(F(), D(pe(i.value), {
 					ref_key: "controlRef",
-					ref: d,
-					class: k(["cn-prop-field__control", [s.value, { "cn-field--expression": a.value }]]),
+					ref: f,
+					class: P(["cn-prop-field__control", [s.value, {
+						"cn-field--expression": a.value,
+						"cn-field--invalid": p.value.length > 0
+					}]]),
 					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.dataMode : void 0,
+					"data-mode": e.field.control === "imageSrc" || e.field.control === "resourceValue" ? e.dataMode : void 0,
+					source: d.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: y
+					onSubCommit: ie
 				}, null, 40, [
 					"class",
 					"field",
 					"model-value",
+					"disabled",
 					"displays",
 					"data-mode",
+					"source",
 					"resource-status"
 				])),
-				e.hint ? (A(), w("span", Jt, P(e.hint), 1)) : C("", !0)
+				e.hint ? (F(), k("span", nn, z(e.hint), 1)) : O("", !0),
+				m.value ? (F(), k("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,
+					onClick: _
+				}, z(m.value), 11, rn)) : O("", !0)
 			]),
 			_: 1
-		}, 8, ["class"])), c.value ? (A(), S(g, {
+		}, 8, ["class"])), c.value ? (F(), D(g, {
 			key: 0,
 			ref_key: "popupRef",
-			ref: p,
-			state: F(h),
-			onSelect: F(_)
-		}, null, 8, ["state", "onSelect"])) : l.value ? (A(), S(g, {
+			ref: y,
+			state: B(x),
+			onSelect: B(C)
+		}, null, 8, ["state", "onSelect"])) : l.value ? (F(), D(g, {
 			key: 1,
 			ref_key: "popupRef",
-			ref: p,
-			state: F(te),
-			onSelect: F(v)
-		}, null, 8, ["state", "onSelect"])) : C("", !0)], 64));
+			ref: y,
+			state: B(ne),
+			onSelect: B(re)
+		}, null, 8, ["state", "onSelect"])) : O("", !0)], 64));
 	}
-}), Xt = { 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)]" }, Zt = { 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" }, Qt = { class: "flex items-center gap-2" }, $t = { 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" }, en = { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, tn = {
+}), 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 = {
 	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"
-}, nn = { class: "cn-props__section-title mb-2 text-[10px] font-semibold uppercase tracking-[0.16em] text-cn-muted" }, rn = { class: "flex flex-col gap-2" }, an = /* @__PURE__ */ D({
+}, 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({
 	__name: "PropertyPanel",
 	props: { editor: {} },
 	setup(e) {
-		let t = e, n = Ut(t.editor);
-		ce(X, {
+		let t = e, n = Zt(t.editor);
+		fe(Z, {
 			canUpload: t.editor.canUpload,
 			uploadImage: (e) => t.editor.uploadImage(e)
 		});
 		function r(e) {
 			return e.completion === "rowsPath" ? n.rowsPathSource.value : n.completionSource.value;
 		}
-		let i = x(() => n.layer.value !== null), a = x(() => {
+		let i = E(() => n.layer.value !== null), a = E(() => {
 			let e = n.layer.value;
 			return e ? e.type : n.canvas.value ? "Canvas" : "—";
-		});
-		function o(e) {
-			let t = K(e, ["expression"]);
-			return t.ok && t.value !== null ? "expression" : "static";
-		}
-		let s = x(() => {
+		}), o = E(() => {
 			let e = n.layer.value ?? (n.selection.value ? null : n.canvas.value);
 			if (!e) return [];
 			let t = n.selection.value?.join(".") ?? "canvas", r = n.layer.value, i = n.resourceStatuses.value, a = [];
-			for (let s of n.sections.value) {
-				let n = [];
-				for (let a of s.fields) {
-					let s = K(e, a.key);
-					s.ok && n.push({
+			for (let o of n.sections.value) {
+				let s = [];
+				for (let a of o.fields) {
+					let o = q(e, a.key);
+					if (!o.ok) continue;
+					let c = n.contentLocked.value && a.data === !0;
+					s.push({
 						key: `${t}:${a.key.join(".")}`,
 						field: a,
-						value: s.value,
-						dataMode: a.data ? o(e) : void 0,
-						hint: a.hint && r ? a.hint(r, i) ?? void 0 : void 0,
-						resourceStatus: a.control === "imageSrc" && typeof s.value == "string" && s.value !== "" ? i[s.value] : void 0
+						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
 					});
 				}
-				n.length > 0 && a.push({
-					title: s.title,
-					fields: n
+				s.length > 0 && a.push({
+					title: o.title,
+					fields: s
 				});
 			}
 			return a;
-		}), c = x(() => {
+		}), s = E(() => {
 			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[U(r, t).join(".")] = {
+				a !== void 0 && (e[K(r, t).join(".")] = {
 					value: a,
 					preview: n.isPreviewBox.value
 				});
 			}
 			return e;
 		});
-		function l() {
+		function c() {
 			n.setAnchorExpanded(!n.anchorExpanded.value);
 		}
-		return (e, t) => (A(), w("aside", Xt, [
-			T("header", Zt, [T("div", Qt, [T("span", $t, [t[0] ||= T("i", {
+		return (e, t) => (F(), k("aside", on, [
+			A("header", sn, [A("div", cn, [A("span", ln, [t[0] ||= A("i", {
 				class: "size-1.5 rounded-full bg-cn-accent",
 				"aria-hidden": "true"
-			}, null, -1), ie(" " + P(a.value), 1)]), T("span", en, P(i.value ? "图层属性" : "画布属性"), 1)])]),
-			s.value.length === 0 ? (A(), w("p", tn, " 打开文档后可编辑属性 ")) : C("", !0),
-			(A(!0), w(b, null, M(s.value, (e) => (A(), w("section", {
+			}, 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", {
 				key: e.title,
 				class: "cn-props__section border-b border-cn-line/70 px-3.5 py-3 last:border-b-0"
-			}, [T("h3", nn, P(e.title), 1), T("div", rn, [(A(!0), w(b, null, M(e.fields, (e) => (A(), w(b, { key: e.key }, [e.field.control === "anchor" ? (A(), S(Pe, {
+			}, [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, {
 				key: 0,
 				field: e.field,
 				"model-value": e.value,
-				expanded: F(n).anchorExpanded.value,
-				onChange: (t) => F(n).commit(e.field, t, !0),
-				onToggle: l
+				expanded: B(n).anchorExpanded.value,
+				onChange: (t) => B(n).commit(e.field, t, !0),
+				onToggle: c
 			}, null, 8, [
 				"field",
 				"model-value",
 				"expanded",
 				"onChange"
-			])) : (A(), S(Yt, {
+			])) : (F(), D(an, {
 				key: 1,
 				field: e.field,
 				value: e.value,
 				"data-mode": e.dataMode,
+				locked: e.locked,
 				hint: e.hint,
 				completion: r(e.field),
-				displays: c.value,
+				displays: s.value,
 				"resource-status": e.resourceStatus,
-				onInput: (t) => F(n).commit(e.field, t, !1),
-				onChange: (t) => F(n).commit(e.field, t, !0),
-				onToggleMode: (t) => F(n).toggleDataMode(e.field),
-				onSubCommit: F(n).commit
+				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
 			}, null, 8, [
 				"field",
 				"value",
 				"data-mode",
+				"locked",
 				"hint",
 				"completion",
 				"displays",
@@ -1717,4 +1813,4 @@ var Wt = {
 	}
 });
 //#endregion
-export { X as a, st as c, W as d, ye as f, $ as i, G as l, K as m, Yt as n, bt as o, H as p, Ut as r, ot as s, an as t, ve as u };
+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 };