@hankchen/canvas-editor-vue 0.1.1 → 0.1.3

package/dist/{property-panel-jt_rsTVW.js → property-panel-CigAECN_.js}

@@ -1,10 +1,11 @@
-import { B as e, D as t, F as n, G as r, H as i, I as a, L as o, M as s, N as c, O as l, P as u, S as d, U as f, _ as p, a as m, b as h, d as g, g as _, h as v, j as y, k as b, m as x, p as S, r as C, s as w, u as T, v as E, w as D, y as O, z as k } from "./layerPath-BRZK9ka1.js";
-import { t as A } from "./createLucideIcon-CMq8ZKo2.js";
-import { a as j, c as ee, d as te, f as ne, i as re, l as ie, n as M, p as ae, r as N, s as oe, t as se, u as ce } from "./dist-DuXLYZZ9.js";
-import { i as P, r as le } from "./completionAnchor-4lhR2kJz.js";
-import { i as ue, n as de, r as fe, t as F } from "./uploadFile-CutE_xI-.js";
-import { n as pe, r as me, t as he } from "./usePathCompletion-DkHoGla4.js";
-var ge = A({
+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({
 	name: "grid-2x2",
 	size: 24,
 	node: [
@@ -26,7 +27,7 @@ var ge = A({
 		}]
 	],
 	aliases: ["grid-2-x-2"]
-}), _e = A({
+}), me = e({
 	name: "square-split-vertical",
 	size: 24,
 	node: [
@@ -44,7 +45,7 @@ var ge = A({
 		}]
 	],
 	aliases: ["split-square-vertical"]
-}), ve = A({
+}), he = e({
 	name: "square",
 	size: 24,
 	node: [["rect", {
@@ -58,18 +59,18 @@ var ge = A({
 });
 //#endregion
 //#region ../canvas-editor/src/shared/resourceStatus.ts
-function ye(e, t) {
+function ge(e, n) {
 	if (e.type !== "ImageLayer") return !1;
-	if (e.expression !== null || e.src === null || j(e) <= 0 || re(e) <= 0) return !0;
-	if (t !== void 0) {
-		let n = t[e.src];
-		if (n !== void 0 && n !== "done") return !0;
+	if (e.expression !== null || e.src === null || t(e) <= 0 || a(e) <= 0) return !0;
+	if (n !== void 0) {
+		let t = n[e.src];
+		if (t !== void 0 && t !== "done") return !0;
 	}
 	return !1;
 }
 //#endregion
 //#region src/property-panel/fieldSchema.ts
-var be = "当前层内容未绘制，padding 不影响预览", I = {
+var _e = "当前层内容未绘制，padding 不影响预览", z = {
 	title: "位置与尺寸",
 	fields: [
 		{
@@ -124,20 +125,20 @@ var be = "当前层内容未绘制，padding 不影响预览", I = {
 			control: "anchor"
 		}
 	]
-}, L = {
+}, B = {
 	title: "对齐",
 	fields: [{
 		key: ["align", "horizontal"],
 		label: "水平",
 		control: "align",
-		domain: M
+		domain: s
 	}, {
 		key: ["align", "vertical"],
 		label: "垂直",
 		control: "align",
-		domain: N
+		domain: l
 	}]
-}, R = {
+}, V = {
 	title: "形状",
 	fields: [
 		{
@@ -159,7 +160,7 @@ var be = "当前层内容未绘制，padding 不影响预览", I = {
 			label: "内边距",
 			control: "padding",
 			title: "内边距作用于内容盒，不改变图层尺寸",
-			hint: (e, t) => ye(e, t) ? be : null
+			hint: (e, t) => ge(e, t) ? _e : null
 		},
 		{
 			key: ["shape", "border"],
@@ -167,11 +168,11 @@ var be = "当前层内容未绘制，padding 不影响预览", I = {
 			control: "border"
 		}
 	]
-}, xe = {
+}, ve = {
 	ImageLayer: [
-		I,
-		L,
-		R,
+		z,
+		B,
+		V,
 		{
 			title: "图片",
 			fields: [{
@@ -183,9 +184,9 @@ var be = "当前层内容未绘制，padding 不影响预览", I = {
 		}
 	],
 	TextLayer: [
-		I,
-		L,
-		R,
+		z,
+		B,
+		V,
 		{
 			title: "文本",
 			fields: [
@@ -221,9 +222,9 @@ var be = "当前层内容未绘制，padding 不影响预览", I = {
 		}
 	],
 	QrCodeLayer: [
-		I,
-		L,
-		R,
+		z,
+		B,
+		V,
 		{
 			title: "二维码",
 			fields: [{
@@ -235,9 +236,9 @@ var be = "当前层内容未绘制，padding 不影响预览", I = {
 		}
 	],
 	TableLayer: [
-		I,
-		L,
-		R,
+		z,
+		B,
+		V,
 		{
 			title: "数据",
 			fields: [{
@@ -252,14 +253,14 @@ var be = "当前层内容未绘制，padding 不影响预览", I = {
 		}
 	],
 	TableRowLayer: [
-		I,
-		L,
-		R
+		z,
+		B,
+		V
 	],
 	TableCellLayer: [
-		I,
-		L,
-		R
+		z,
+		B,
+		V
 	],
 	TableRowTemplate: [{
 		title: "行模板（行宽由表宽同步）",
@@ -276,15 +277,15 @@ var be = "当前层内容未绘制，padding 不影响预览", I = {
 		}]
 	}]
 };
-function Se(e) {
-	return xe[e] ?? [];
+function ye(e) {
+	return ve[e] ?? [];
 }
-function Ce(e) {
-	if (e[e.length - 1] === "content") return C(e) ? "templateContent" : "content";
+function H(e) {
+	if (e[e.length - 1] === "content") return m(e) ? "templateContent" : "content";
 	let t = e[e.length - 2];
 	return t === "rows" ? "row" : t === "cells" ? "cell" : "root";
 }
-var we = {
+var be = {
 	root: [],
 	cell: [],
 	row: ["shape.width", "shape.autoWidth"],
@@ -296,16 +297,16 @@ var we = {
 	],
 	templateContent: ["shape.width", "shape.autoWidth"]
 };
-function z(e, t) {
+function U(e, t) {
 	return [...e.key, ...t.key];
 }
-function Te(e, t) {
-	let n = new Set(we[Ce(e)]), r = [];
-	for (let e of Se(t.type)) {
+function W(e, t) {
+	let n = new Set(be[H(e)]), r = [];
+	for (let e of ye(t.type)) {
 		let i = [];
 		for (let r of e.fields) {
 			if (r.items) {
-				let e = r.items.filter((e) => !n.has(z(r, e).join(".")) && (!e.visibleWhen || e.visibleWhen(t)));
+				let e = r.items.filter((e) => !n.has(U(r, e).join(".")) && (!e.visibleWhen || e.visibleWhen(t)));
 				e.length > 0 && i.push({
 					...r,
 					items: e
@@ -321,7 +322,7 @@ function Te(e, t) {
 	}
 	return r;
 }
-var B = [{
+var G = [{
 	title: "画布",
 	fields: [{
 		key: ["width"],
@@ -337,7 +338,7 @@ var B = [{
 		min: 1
 	}]
 }];
-function V(e, t) {
+function K(e, t) {
 	let n = e;
 	for (let e = 0; e < t.length; e += 1) {
 		if (typeof n != "object" || !n) return { ok: !1 };
@@ -350,97 +351,97 @@ function V(e, t) {
 }
 //#endregion
 //#region src/property-panel/fields/AlignField.vue?vue&type=script&setup=true&lang.ts
-var Ee = ["aria-label"], De = [
+var xe = ["aria-label"], Se = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], Oe = {
+], Ce = {
 	key: 1,
 	class: "truncate px-1 text-[10px] leading-none"
-}, ke = /* @__PURE__ */ h({
+}, we = /* @__PURE__ */ D({
 	__name: "AlignField",
 	props: {
 		field: {},
 		modelValue: {}
 	},
 	emits: ["change"],
-	setup(e, { emit: n }) {
-		let i = e, a = n, o = {
-			[M.join(".")]: {
+	setup(e, { emit: t }) {
+		let a = e, u = t, d = {
+			[s.join(".")]: {
 				left: {
-					icon: ee,
+					icon: n,
 					title: "左对齐"
 				},
 				center: {
-					icon: ne,
+					icon: i,
 					title: "居中对齐"
 				},
 				right: {
-					icon: ce,
+					icon: f,
 					title: "右对齐"
 				}
 			},
-			[N.join(".")]: {
+			[l.join(".")]: {
 				top: {
-					icon: ie,
+					icon: o,
 					title: "顶对齐"
 				},
 				center: {
-					icon: ae,
+					icon: c,
 					title: "居中对齐"
 				},
 				bottom: {
-					icon: te,
+					icon: r,
 					title: "底对齐"
 				}
 			}
-		}, s = S(() => {
-			let e = i.field.domain ?? [], t = o[e.join(".")];
+		}, p = x(() => {
+			let e = a.field.domain ?? [], t = d[e.join(".")];
 			return e.map((e) => ({
 				value: e,
 				icon: t?.[e]?.icon,
-				title: t?.[e] ? `${i.field.label}：${t[e].title}` : `${i.field.label}：${e}`
+				title: t?.[e] ? `${a.field.label}：${t[e].title}` : `${a.field.label}：${e}`
 			}));
 		});
-		function c(e) {
-			e !== i.modelValue && a("change", e);
+		function m(e) {
+			e !== a.modelValue && u("change", e);
 		}
-		return (n, i) => (t(), p("span", {
+		return (t, n) => (A(), w("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
-		}, [(t(!0), p(g, null, b(s.value, (n, i) => (t(), p("button", {
-			key: n.value,
+		}, [(A(!0), w(b, null, M(p.value, (t, n) => (A(), w("button", {
+			key: t.value,
 			type: "button",
-			class: f(["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", [i > 0 ? "border-l border-cn-field-line" : "", n.value === e.modelValue ? "cn-align__option--active bg-cn-accent-soft text-cn-accent" : "text-cn-muted hover:text-cn-fg"]]),
-			"aria-pressed": n.value === e.modelValue,
-			title: n.title,
-			onClick: T((e) => c(n.value), ["prevent"])
-		}, [n.icon ? (t(), v(P, {
+			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"]]),
+			"aria-pressed": t.value === e.modelValue,
+			title: t.title,
+			onClick: R((e) => m(t.value), ["prevent"])
+		}, [t.icon ? (A(), S(h, {
 			key: 0,
-			icon: n.icon
-		}, null, 8, ["icon"])) : (t(), p("span", Oe, r(n.value), 1))], 10, De))), 128))], 8, Ee));
+			icon: t.icon
+		}, null, 8, ["icon"])) : (A(), w("span", Ce, P(t.value), 1))], 10, Se))), 128))], 8, xe));
 	}
-}), Ae = { class: "block" }, je = ["aria-expanded", "title"], Me = { class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted" }, Ne = { class: "flex shrink-0 items-center gap-1.5" }, Pe = {
+}), 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 = {
 	viewBox: "0 0 24 24",
 	class: "size-3.5",
 	"aria-hidden": "true"
-}, Fe = [
+}, Ae = [
 	"cx",
 	"cy",
 	"r"
-], Ie = {
+], je = {
 	key: 0,
 	class: "mt-2 flex justify-end"
-}, Le = {
+}, Me = {
 	class: "cn-anchor grid w-[66px] shrink-0 grid-cols-3 gap-[3px]",
 	role: "group",
 	"aria-label": "九宫锚点"
-}, Re = [
+}, Ne = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], H = /* @__PURE__ */ h({
+], Pe = /* @__PURE__ */ D({
 	__name: "AnchorDisclosureField",
 	props: {
 		field: {},
@@ -448,70 +449,70 @@ var Ee = ["aria-label"], De = [
 		expanded: { type: Boolean }
 	},
 	emits: ["change", "toggle"],
-	setup(e, { emit: n }) {
-		let o = e, s = n, c = a(se), l = Array.from({ length: 9 }, (e, t) => ({
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = O(d), a = Array.from({ length: 9 }, (e, t) => ({
 			index: t,
 			cx: 4 + t % 3 * 8,
 			cy: 4 + Math.floor(t / 3) * 8
-		})), u = S(() => {
-			let e = o.modelValue.includes("top") ? 0 : o.modelValue.includes("bottom") ? 2 : 1, t = o.modelValue.includes("left") ? 0 : o.modelValue.includes("right") ? 2 : 1;
+		})), o = x(() => {
+			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 d(e) {
-			s("change", e);
+		function s(e) {
+			r("change", e);
 		}
-		return (n, a) => (t(), p("span", Ae, [x("button", {
+		return (t, n) => (A(), w("span", Te, [T("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: a[0] ||= (e) => s("toggle")
-		}, [x("span", Me, r(e.field.label), 1), x("span", Ne, [(t(), p("svg", Pe, [(t(!0), p(g, null, b(i(l), (e) => (t(), p("circle", {
+			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", {
 			key: e.index,
 			cx: e.cx,
 			cy: e.cy,
-			r: e.index === u.value ? 3.2 : 2.2,
-			class: f(e.index === u.value ? "fill-cn-accent" : "fill-cn-muted/35")
-		}, null, 10, Fe))), 128))])), O(P, {
-			icon: i(oe),
-			class: f(["text-cn-muted transition-transform duration-150", { "rotate-180": e.expanded }])
-		}, null, 8, ["icon", "class"])])], 8, je), e.expanded ? (t(), p("span", Ie, [x("span", Le, [(t(!0), p(g, null, b(i(c), (n) => (t(), p("button", {
-			key: n,
+			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", {
+			key: t,
 			type: "button",
-			class: f(["cn-anchor__cell relative aspect-square min-w-0 rounded-[4px] border p-0 transition-colors duration-100", n === 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": n === e.modelValue,
-			title: n,
-			onClick: (e) => d(n)
-		}, null, 10, Re))), 128))])])) : _("", !0)]));
+			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"]),
+			"aria-pressed": t === e.modelValue,
+			title: t,
+			onClick: (e) => s(t)
+		}, null, 10, Ne))), 128))])])) : C("", !0)]));
 	}
-}), ze = { class: "cn-bool relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center" }, Be = ["checked"], Ve = /* @__PURE__ */ h({
+}), Fe = { class: "cn-bool relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center" }, Ie = ["checked"], Le = /* @__PURE__ */ D({
 	__name: "BooleanField",
 	props: {
 		field: {},
 		modelValue: { type: Boolean }
 	},
 	emits: ["change"],
-	setup(e, { emit: n }) {
-		let r = e, i = n, a = k(null);
-		async function o(e) {
-			i("change", e.target.checked), await D(), a.value && (a.value.checked = r.modelValue);
-		}
-		return c(() => {
-			a.value && (a.value.checked = r.modelValue);
-		}), (n, r) => (t(), p("label", ze, [
-			x("input", {
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = j(null);
+		async function a(e) {
+			r("change", e.target.checked), await oe(), i.value && (i.value.checked = n.modelValue);
+		}
+		return ue(() => {
+			i.value && (i.value.checked = n.modelValue);
+		}), (t, n) => (A(), w("label", Fe, [
+			T("input", {
 				ref_key: "inputRef",
-				ref: a,
+				ref: i,
 				class: "cn-bool__input peer sr-only",
 				type: "checkbox",
 				checked: e.modelValue,
-				onChange: o
-			}, null, 40, Be),
-			r[0] ||= x("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),
-			r[1] ||= x("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)
+				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)
 		]));
 	}
-}), U = {
+}), Re = {
 	1: [{
 		label: "四边",
 		rep: "top",
@@ -554,13 +555,13 @@ var Ee = ["aria-label"], De = [
 		}
 	]
 };
-function He(e) {
+function ze(e) {
 	return e === 1 ? 2 : e === 2 ? 4 : 1;
 }
-function Ue(e) {
+function Be(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 We(e, t) {
+function Ve(e, t) {
 	if (t === 1) {
 		let { top: t } = e;
 		return {
@@ -581,17 +582,17 @@ function We(e, t) {
 	}
 	return e;
 }
-function Ge(e, t) {
+function He(e, t) {
 	return e.top === t.top && e.bottom === t.bottom && e.left === t.left && e.right === t.right;
 }
-function W(e, t) {
+function q(e, t) {
 	return e === null || t === null ? e === t : e.width === t.width && e.color === t.color;
 }
-function Ke(e) {
+function Ue(e) {
 	let { top: t, bottom: n, left: r, right: i } = e;
-	return t === null && n === null && r === null && i === null || t !== null && W(t, n) && W(t, r) && W(t, i) ? 1 : W(t, n) && W(r, i) ? 2 : 4;
+	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;
 }
-function qe(e, t) {
+function We(e, t) {
 	let n = (e) => e === null ? null : { ...e };
 	if (t === 1) {
 		let t = n(e.top);
@@ -613,18 +614,18 @@ function qe(e, t) {
 	}
 	return e;
 }
-function Je(e, t) {
-	return W(e.top, t.top) && W(e.bottom, t.bottom) && W(e.left, t.left) && W(e.right, t.right);
+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);
 }
 //#endregion
 //#region src/property-panel/useShorthandMode.ts
-function G(e, t) {
-	let n = S(() => t(e())), r = k(null), i = S(() => r.value ?? n.value);
-	s(e, () => {
+function Ke(e, t) {
+	let n = x(() => t(e())), r = j(null), i = x(() => r.value ?? n.value);
+	L(e, () => {
 		r.value = null;
 	});
 	function a() {
-		let e = i.value, t = He(e);
+		let e = i.value, t = ze(e);
 		return r.value = t, {
 			from: e,
 			to: t
@@ -637,175 +638,175 @@ function G(e, t) {
 }
 //#endregion
 //#region src/property-panel/controlStyles.ts
-var K = "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", q = `${K} text-right font-mono tabular-nums`, J = K, Ye = "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", Xe = "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", Ze = ["aria-label"], Qe = /* @__PURE__ */ h({
+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({
 	__name: "BorderWidthInput",
 	props: {
 		value: {},
 		label: {}
 	},
 	emits: ["input", "change"],
-	setup(e, { emit: r }) {
-		let a = e, o = r, c = k(a.value === null ? "" : String(a.value)), l = k(!1);
-		s(() => a.value, (e) => {
-			l.value || (c.value = e === null ? "" : String(e));
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = j(n.value === null ? "" : String(n.value)), a = j(!1);
+		L(() => n.value, (e) => {
+			a.value || (i.value = e === null ? "" : String(e));
 		});
-		function u(e) {
+		function o(e) {
 			return Math.max(0, Math.trunc(e));
 		}
-		function d(e) {
+		function s(e) {
 			if (e.value.trim() === "") return null;
 			let t = Number(e.value);
 			return Number.isFinite(t) ? t : null;
 		}
-		function m(e) {
+		function c(e) {
 			return e === null ? "" : String(e);
 		}
-		function h(e) {
+		function l(e) {
 			let t = e.target;
-			c.value = t.value;
-			let n = d(t);
-			n !== null && o("input", u(n));
+			i.value = t.value;
+			let n = s(t);
+			n !== null && r("input", o(n));
 		}
-		function g(e) {
-			let t = d(e.target);
+		function u(e) {
+			let t = s(e.target);
 			if (t === null) {
-				c.value = m(a.value);
+				i.value = c(n.value);
 				return;
 			}
-			let n = u(t);
-			c.value = n === 0 ? "" : String(n), o("change", n);
+			let a = o(t);
+			i.value = a === 0 ? "" : String(a), r("change", a);
 		}
-		return (r, a) => n((t(), p("input", {
-			"onUpdate:modelValue": a[0] ||= (e) => c.value = e,
-			class: f(["cn-field cn-field--number min-w-0 flex-1", i(q)]),
+		return (t, n) => fe((A(), w("input", {
+			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
+			class: k(["cn-field cn-field--number min-w-0 flex-1", F(Y)]),
 			type: "number",
 			"aria-label": e.label,
 			min: 0,
 			step: "1",
 			placeholder: "无边框",
 			title: "宽度归 0 即关闭该边",
-			onInput: h,
-			onFocus: a[1] ||= (e) => l.value = !0,
-			onBlur: g,
-			onChange: g
-		}, null, 42, Ze)), [[w, c.value]]);
+			onInput: l,
+			onFocus: n[1] ||= (e) => a.value = !0,
+			onBlur: u,
+			onChange: u
+		}, null, 42, Xe)), [[I, i.value]]);
 	}
-}), $e = ["aria-label", "title"], Y = /* @__PURE__ */ h({
+}), Qe = ["aria-label", "title"], $e = /* @__PURE__ */ D({
 	__name: "ShorthandModeButton",
 	props: {
 		mode: {},
 		label: {}
 	},
 	emits: ["cycle"],
-	setup(e, { emit: n }) {
-		let r = e, i = n, a = {
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = {
 			1: {
-				icon: ve,
+				icon: he,
 				title: "统一值"
 			},
 			2: {
-				icon: _e,
+				icon: me,
 				title: "上下/左右"
 			},
 			4: {
-				icon: ge,
+				icon: pe,
 				title: "四边独立"
 			}
-		}, o = S(() => a[r.mode]), s = S(() => `${r.label}：${o.value.title}（点击切换值模式）`);
-		return (e, n) => (t(), p("button", {
+		}, a = x(() => i[n.mode]), o = x(() => `${n.label}：${a.value.title}（点击切换值模式）`);
+		return (e, t) => (A(), w("button", {
 			type: "button",
 			class: "cn-props__mode-toggle shrink-0",
-			"aria-label": s.value,
-			title: s.value,
-			onClick: n[0] ||= T((e) => i("cycle"), ["prevent"])
-		}, [O(P, {
-			icon: o.value.icon,
+			"aria-label": o.value,
+			title: o.value,
+			onClick: t[0] ||= R((e) => r("cycle"), ["prevent"])
+		}, [E(h, {
+			icon: a.value.icon,
 			size: 12
-		}, null, 8, ["icon"])], 8, $e));
+		}, null, 8, ["icon"])], 8, Qe));
 	}
 }), 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 = [
 	"value",
 	"disabled",
 	"onInput",
 	"onChange"
-], it = "#000000", at = /* @__PURE__ */ h({
+], it = "#000000", at = /* @__PURE__ */ D({
 	__name: "BorderField",
 	props: {
 		field: {},
 		modelValue: {}
 	},
 	emits: ["input", "change"],
-	setup(e, { emit: n }) {
-		let a = e, o = n, { mode: s, cycle: c } = G(() => a.modelValue, Ke), l = S(() => U[s.value]);
-		function u(e) {
-			return a.modelValue[e.rep]?.width ?? null;
+	setup(e, { emit: t }) {
+		let n = e, r = t, { mode: i, cycle: a } = Ke(() => n.modelValue, Ue), o = x(() => Re[i.value]);
+		function s(e) {
+			return n.modelValue[e.rep]?.width ?? null;
 		}
-		function d(e) {
-			return a.modelValue[e.rep]?.color ?? it;
+		function c(e) {
+			return n.modelValue[e.rep]?.color ?? it;
 		}
-		function f(e, t, n) {
-			let r = { ...a.modelValue };
-			for (let n of e.sides) r[n] = t === null ? null : { ...t };
-			o(n ? "change" : "input", r);
+		function l(e, t, i) {
+			let a = { ...n.modelValue };
+			for (let n of e.sides) a[n] = t === null ? null : { ...t };
+			r(i ? "change" : "input", a);
 		}
-		function m(e, t, n) {
-			let r = a.modelValue[e.rep]?.color ?? it;
-			f(e, t <= 0 ? null : {
+		function u(e, t, r) {
+			let i = n.modelValue[e.rep]?.color ?? it;
+			l(e, t <= 0 ? null : {
 				width: t,
-				color: r
-			}, n);
-		}
-		function h(e, t, n) {
-			let r = a.modelValue[e.rep];
-			if (!r) return;
-			let i = t.target.value.trim();
-			i !== "" && f(e, {
-				width: r.width,
 				color: i
-			}, n);
-		}
-		function _() {
-			let { from: e, to: t } = c();
+			}, r);
+		}
+		function d(e, t, r) {
+			let i = n.modelValue[e.rep];
+			if (!i) return;
+			let a = t.target.value.trim();
+			a !== "" && l(e, {
+				width: i.width,
+				color: a
+			}, r);
+		}
+		function f() {
+			let { from: e, to: t } = a();
 			if (t < e) {
-				let e = qe(a.modelValue, t);
-				Je(e, a.modelValue) || o("change", e);
+				let e = We(n.modelValue, t);
+				Ge(e, n.modelValue) || r("change", e);
 			}
 		}
-		return (n, a) => (t(), p("span", et, [O(Y, {
-			mode: i(s),
+		return (t, n) => (A(), w("span", et, [E($e, {
+			mode: F(i),
 			label: "边框",
-			onCycle: _
-		}, null, 8, ["mode"]), x("span", tt, [(t(!0), p(g, null, b(l.value, (n) => (t(), p("label", {
-			key: n.rep,
+			onCycle: f
+		}, null, 8, ["mode"]), T("span", tt, [(A(!0), w(b, null, M(o.value, (t) => (A(), w("label", {
+			key: t.rep,
 			class: "flex items-center gap-1.5"
 		}, [
-			x("span", nt, r(n.label), 1),
-			O(Qe, {
+			T("span", nt, P(t.label), 1),
+			E(Ze, {
 				class: "cn-border__width",
-				value: u(n),
-				label: n.label,
-				onInput: (e) => m(n, e, !1),
-				onChange: (e) => m(n, e, !0)
+				value: s(t),
+				label: t.label,
+				onInput: (e) => u(t, e, !1),
+				onChange: (e) => u(t, e, !0)
 			}, null, 8, [
 				"value",
 				"label",
 				"onInput",
 				"onChange"
 			]),
-			x("input", {
+			T("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: "边框颜色",
-				value: d(n),
-				disabled: e.modelValue[n.rep] === null,
-				onInput: (e) => h(n, e, !1),
-				onChange: (e) => h(n, e, !0)
+				value: c(t),
+				disabled: e.modelValue[t.rep] === null,
+				onInput: (e) => d(t, e, !1),
+				onChange: (e) => d(t, e, !0)
 			}, null, 40, rt)
 		]))), 128))])]));
 	}
 }), ot = Symbol("canvas-font-picker");
 function st() {
-	return d(ot, null);
+	return ae(ot, null);
 }
 //#endregion
 //#region src/property-panel/fields/FontField.vue?vue&type=script&setup=true&lang.ts
@@ -816,215 +817,215 @@ var ct = ["value"], lt = {
 	"disabled",
 	"title",
 	"data-upload-error"
-], pt = /* @__PURE__ */ h({
+], pt = /* @__PURE__ */ D({
 	__name: "FontField",
 	props: {
 		field: {},
 		modelValue: {}
 	},
 	emits: ["input", "change"],
-	setup(e, { emit: n }) {
-		let a = e, o = n, s = st(), c = S(() => {
-			if (s === null) return [];
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = st(), a = x(() => {
+			if (i === null) return [];
 			let e = [{
 				label: "内置默认字体",
 				value: ""
 			}];
-			for (let t of s.entries.value) t.ref !== "" && e.push({
+			for (let t of i.entries.value) t.ref !== "" && e.push({
 				label: t.label,
 				value: t.ref
 			});
-			let t = a.modelValue;
+			let t = n.modelValue;
 			return t !== "" && !e.some((e) => e.value === t) && e.push({
-				label: `${l(t)}（清单外引用）`,
+				label: `${o(t)}（清单外引用）`,
 				value: t
 			}), e;
 		});
-		function l(e) {
+		function o(e) {
 			return e.startsWith("data:") ? "自定义字体（内联）" : e.split("/").pop() || e;
 		}
-		function u(e) {
-			o("change", e.target.value);
+		function s(e) {
+			r("change", e.target.value);
 		}
-		let d = !1;
-		function m(e) {
-			d || e.isComposing || o("input", e.target.value);
+		let c = !1;
+		function l(e) {
+			c || e.isComposing || r("input", e.target.value);
 		}
-		function h() {
-			d = !0;
+		function u() {
+			c = !0;
 		}
-		function v(e) {
-			d = !1, o("input", e.target.value);
+		function d(e) {
+			c = !1, r("input", e.target.value);
 		}
-		function y(e) {
-			d = !1, o("change", e.target.value);
+		function f(e) {
+			c = !1, r("change", e.target.value);
 		}
-		let C = k(!1), w = k(null), T = k(null);
-		function E() {
-			w.value = null, T.value?.click();
+		let p = j(!1), m = j(null), h = j(null);
+		function g() {
+			m.value = null, h.value?.click();
 		}
-		async function D(e) {
+		async function _(e) {
 			let t = e.target, n = t.files?.[0];
-			if (t.value = "", s !== null && n && !C.value) {
-				C.value = !0;
+			if (t.value = "", i !== null && n && !p.value) {
+				p.value = !0;
 				try {
-					let e = await s.uploadFont(await F(n));
-					o("change", e);
+					let e = await i.uploadFont(await v(n));
+					r("change", e);
 				} catch (e) {
-					w.value = e instanceof Error ? e.message : String(e);
+					m.value = e instanceof Error ? e.message : String(e);
 				} finally {
-					C.value = !1;
+					p.value = !1;
 				}
 			}
 		}
-		return (n, a) => i(s) === null ? (t(), p("input", {
+		return (t, n) => F(i) === null ? (A(), w("input", {
 			key: 0,
-			class: f(["cn-field", i(J)]),
+			class: k(["cn-field", F(qe)]),
 			type: "text",
 			value: e.modelValue,
-			onInput: m,
-			onCompositionstart: h,
-			onCompositionend: v,
-			onChange: y
-		}, null, 42, ct)) : (t(), p("div", lt, [
-			x("select", {
-				class: f(["cn-field cn-select", i(K)]),
+			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)]),
 				value: e.modelValue,
-				onChange: u
-			}, [(t(!0), p(g, null, b(c.value, (e) => (t(), p("option", {
+				onChange: s
+			}, [(A(!0), w(b, null, M(a.value, (e) => (A(), w("option", {
 				key: e.value,
 				value: e.value
-			}, r(e.label), 9, dt))), 128))], 42, ut),
-			x("input", {
+			}, P(e.label), 9, dt))), 128))], 42, ut),
+			T("input", {
 				ref_key: "fileInput",
-				ref: T,
+				ref: h,
 				type: "file",
 				class: "hidden",
 				accept: ".ttf,.otf,.woff,.woff2,font/ttf,font/otf,font/woff,font/woff2",
-				onChange: D
+				onChange: _
 			}, null, 544),
-			i(s).canUpload ? (t(), p("button", {
+			F(i).canUpload ? (A(), w("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",
-				disabled: C.value,
-				title: w.value ?? "上传本机字体（加入清单后可选）",
-				"data-upload-error": w.value ?? void 0,
-				onClick: E
-			}, r(C.value ? "…" : w.value ? "!" : "上传"), 9, ft)) : _("", !0)
+				disabled: p.value,
+				title: m.value ?? "上传本机字体（加入清单后可选）",
+				"data-upload-error": m.value ?? void 0,
+				onClick: g
+			}, P(p.value ? "…" : m.value ? "!" : "上传"), 9, ft)) : C("", !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__ */ h({
+}), 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({
 	__name: "ColorField",
 	props: {
 		field: {},
 		modelValue: {}
 	},
 	emits: ["input", "change"],
-	setup(e, { emit: n }) {
-		let r = e, a = n, o = k(r.modelValue !== null), c = k(l(r.modelValue));
-		s(() => r.modelValue, (e) => {
-			o.value = e !== null, o.value && (c.value = l(e));
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = j(n.modelValue !== null), a = j(o(n.modelValue));
+		L(() => n.modelValue, (e) => {
+			i.value = e !== null, i.value && (a.value = o(e));
 		});
-		function l(e) {
+		function o(e) {
 			return e !== null && /^#[0-9a-fA-F]{6}$/.test(e) ? e : vt;
 		}
-		function u(e) {
+		function s(e) {
 			let t = e.target.checked;
-			if (o.value = t, !t) {
-				a("change", null);
+			if (i.value = t, !t) {
+				r("change", null);
 				return;
 			}
-			let n = c.value;
-			a("change", n);
+			let n = a.value;
+			r("change", n);
 		}
-		function d(e) {
+		function c(e) {
 			let t = e.target.value;
-			c.value = t, a("input", t);
+			a.value = t, r("input", t);
 		}
-		function m(e) {
+		function l(e) {
 			let t = e.target.value;
-			c.value = t, a("change", t);
+			a.value = t, r("change", t);
 		}
-		function h(e) {
+		function u(e) {
 			let t = e.target.value.trim();
 			if (t === "") {
-				r.field.nullable && a("change", null);
+				n.field.nullable && r("change", null);
 				return;
 			}
-			c.value = l(t), a("change", t);
+			a.value = o(t), r("change", t);
 		}
-		return (n, r) => (t(), p("span", mt, [
-			e.field.nullable ? (t(), p("input", {
+		return (t, n) => (A(), w("span", mt, [
+			e.field.nullable ? (A(), w("input", {
 				key: 0,
 				class: "cn-color__toggle size-3.5 shrink-0 cursor-pointer accent-cn-accent",
 				type: "checkbox",
 				title: "启用颜色",
-				checked: o.value,
-				onChange: u
-			}, null, 40, ht)) : _("", !0),
-			x("input", {
-				class: f(["cn-color__swatch", i(Xe)]),
+				checked: i.value,
+				onChange: s
+			}, null, 40, ht)) : C("", !0),
+			T("input", {
+				class: k(["cn-color__swatch", F(Ye)]),
 				type: "color",
-				value: c.value,
-				disabled: !o.value,
-				onInput: d,
-				onChange: m
+				value: a.value,
+				disabled: !i.value,
+				onInput: c,
+				onChange: l
 			}, null, 42, gt),
-			x("input", {
-				class: f(["cn-color__text min-w-0 flex-1", i(K)]),
+			T("input", {
+				class: k(["cn-color__text min-w-0 flex-1", F(J)]),
 				type: "text",
 				value: e.modelValue ?? "",
-				disabled: !o.value,
+				disabled: !i.value,
 				placeholder: "无",
-				onChange: h
+				onChange: u
 			}, null, 42, _t)
 		]));
 	}
 }), X = Symbol("canvas-image-upload");
 function bt() {
-	return d(X, null);
+	return ae(X, null);
 }
 //#endregion
 //#region src/property-panel/fields/TextField.vue?vue&type=script&setup=true&lang.ts
-var xt = ["value", "placeholder"], Z = /* @__PURE__ */ h({
+var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 	__name: "TextField",
 	props: {
 		field: {},
 		modelValue: {}
 	},
 	emits: ["input", "change"],
-	setup(e, { emit: n }) {
-		let r = e, a = n, o = !1, s = k(!1);
-		function c(e) {
-			return r.field.nonEmpty === !0 ? e.trim() === "" ? (s.value = !0, !0) : (s.value = !1, !1) : !1;
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = !1, a = j(!1);
+		function o(e) {
+			return n.field.nonEmpty === !0 ? e.trim() === "" ? (a.value = !0, !0) : (a.value = !1, !1) : !1;
 		}
-		function l(e) {
+		function s(e) {
 			let t = e.target.value;
-			o || e.isComposing || c(t) || a("input", t);
+			i || e.isComposing || o(t) || r("input", t);
 		}
-		function u() {
-			o = !0;
+		function c() {
+			i = !0;
 		}
-		function d(e) {
-			o = !1;
+		function l(e) {
+			i = !1;
 			let t = e.target.value;
-			c(t) || a("input", t);
+			o(t) || r("input", t);
 		}
-		function m(e) {
-			o = !1;
+		function u(e) {
+			i = !1;
 			let t = e.target.value;
-			c(t) || a("change", t);
+			o(t) || r("change", t);
 		}
-		return (n, r) => (t(), p("input", {
-			class: f(["cn-field", [i(J), s.value ? "cn-field--invalid" : ""]]),
+		return (t, n) => (A(), w("input", {
+			class: k(["cn-field", [F(qe), a.value ? "cn-field--invalid" : ""]]),
 			type: "text",
 			value: e.modelValue,
 			placeholder: e.field.placeholder,
-			onInput: l,
-			onCompositionstart: u,
-			onCompositionend: d,
-			onChange: m
+			onInput: s,
+			onCompositionstart: c,
+			onCompositionend: l,
+			onChange: u
 		}, null, 42, xt));
 	}
 }), St = {
@@ -1037,7 +1038,7 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ h({
 ], wt = ["src"], Tt = {
 	key: 2,
 	class: "relative"
-}, Et = { class: "flex items-center gap-1.5" }, Dt = /* @__PURE__ */ h({
+}, Et = { class: "flex items-center gap-1.5" }, Dt = /* @__PURE__ */ D({
 	__name: "ImageSrcField",
 	props: {
 		field: {},
@@ -1046,79 +1047,79 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ h({
 		resourceStatus: {}
 	},
 	emits: ["input", "change"],
-	setup(e, { emit: n }) {
-		let i = e, a = n, o = bt(), s = S(() => o !== null && o.canUpload && i.dataMode !== "expression"), c = S(() => typeof i.modelValue == "string" && i.modelValue !== ""), l = S(() => i.resourceStatus === "pending" ? "装载中" : i.resourceStatus === "failed" ? "失败" : null), u = k(!1), d = k(null), m = k(null);
-		function h() {
-			d.value = null, m.value?.click();
+	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);
+		function d() {
+			l.value = null, u.value?.click();
 		}
-		async function g(e) {
+		async function f(e) {
 			let t = e.target, n = t.files?.[0];
-			if (t.value = "", o !== null && n && !u.value) {
-				u.value = !0;
+			if (t.value = "", i !== null && n && !c.value) {
+				c.value = !0;
 				try {
-					let e = await o.uploadImage(await F(n));
-					e !== null && a("change", e);
+					let e = await i.uploadImage(await v(n));
+					e !== null && r("change", e);
 				} catch (e) {
-					d.value = e instanceof Error ? e.message : String(e);
+					l.value = e instanceof Error ? e.message : String(e);
 				} finally {
-					u.value = !1;
+					c.value = !1;
 				}
 			}
 		}
-		return (n, i) => s.value ? (t(), p("div", St, [
-			x("button", {
+		return (t, n) => a.value ? (A(), w("div", St, [
+			T("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: u.value,
-				title: d.value ?? (c.value ? "点击替换图片" : "点击上传图片"),
-				"data-upload-error": d.value ?? void 0,
-				onClick: h
+				disabled: c.value,
+				title: l.value ?? (o.value ? "点击替换图片" : "点击上传图片"),
+				"data-upload-error": l.value ?? void 0,
+				onClick: d
 			}, [
-				c.value ? (t(), p("img", {
+				o.value ? (A(), w("img", {
 					key: 0,
 					src: e.modelValue ?? void 0,
 					class: "absolute inset-0 size-full object-cover",
 					alt: ""
-				}, null, 8, wt)) : _("", !0),
-				l.value ? (t(), p("span", {
+				}, null, 8, wt)) : C("", !0),
+				s.value ? (A(), w("span", {
 					key: 1,
-					class: f(["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(l.value), 3)) : _("", !0),
-				c.value ? _("", !0) : (t(), p("span", Tt, r(u.value ? "…" : d.value ? "!" : "点击上传图片"), 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),
-			x("input", {
+			T("input", {
 				ref_key: "fileInput",
-				ref: m,
+				ref: u,
 				type: "file",
 				class: "hidden",
 				accept: "image/*",
-				onChange: g
+				onChange: f
 			}, null, 544),
-			x("div", Et, [O(Z, {
+			T("div", Et, [E(Z, {
 				class: "flex-1",
 				field: e.field,
 				"model-value": e.modelValue ?? "",
 				"aria-label": e.field.label,
-				onInput: i[0] ||= (e) => a("input", e),
-				onChange: i[1] ||= (e) => a("change", e)
+				onInput: n[0] ||= (e) => r("input", e),
+				onChange: n[1] ||= (e) => r("change", e)
 			}, null, 8, [
 				"field",
 				"model-value",
 				"aria-label"
-			]), c.value ? (t(), p("button", {
+			]), o.value ? (A(), w("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: i[2] ||= (e) => a("change", "")
-			}, "清除")) : _("", !0)])
-		])) : (t(), v(Z, {
+				onClick: n[2] ||= (e) => r("change", "")
+			}, "清除")) : C("", !0)])
+		])) : (A(), S(Z, {
 			key: 1,
 			field: e.field,
 			"model-value": e.modelValue ?? "",
 			"aria-label": e.field.label,
-			onInput: i[3] ||= (e) => a("input", e),
-			onChange: i[4] ||= (e) => a("change", e)
+			onInput: n[3] ||= (e) => r("input", e),
+			onChange: n[4] ||= (e) => r("change", e)
 		}, null, 8, [
 			"field",
 			"model-value",
@@ -1130,97 +1131,97 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ h({
 	"min",
 	"max",
 	"step"
-], Q = /* @__PURE__ */ h({
+], Q = /* @__PURE__ */ D({
 	__name: "NumberField",
 	props: {
 		field: {},
 		modelValue: {}
 	},
 	emits: ["input", "change"],
-	setup(e, { emit: r }) {
-		let a = e, o = r, c = k(String(a.modelValue)), l = k(!1);
-		s(() => a.modelValue, (e) => {
-			l.value || (c.value = String(e));
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = j(String(n.modelValue)), a = j(!1);
+		L(() => n.modelValue, (e) => {
+			a.value || (i.value = String(e));
 		});
-		function u(e) {
-			let t = a.field.integer ? Math.trunc(e) : e;
-			return a.field.min !== void 0 && (t = Math.max(a.field.min, t)), a.field.max !== void 0 && (t = Math.min(a.field.max, t)), t;
+		function o(e) {
+			let t = n.field.integer ? Math.trunc(e) : e;
+			return n.field.min !== void 0 && (t = Math.max(n.field.min, t)), n.field.max !== void 0 && (t = Math.min(n.field.max, t)), t;
 		}
-		function d(e) {
+		function s(e) {
 			if (e.value.trim() === "") return null;
 			let t = Number(e.value);
 			return Number.isFinite(t) ? t : null;
 		}
-		function m(e) {
+		function c(e) {
 			let t = e.target;
-			c.value = t.value;
-			let n = d(t);
-			n !== null && o("input", u(n));
+			i.value = t.value;
+			let n = s(t);
+			n !== null && r("input", o(n));
 		}
-		function h(e) {
-			let t = d(e.target);
+		function l(e) {
+			let t = s(e.target);
 			if (t === null) {
-				c.value = String(a.modelValue);
+				i.value = String(n.modelValue);
 				return;
 			}
-			let n = u(t);
-			c.value = String(n), o("change", n);
+			let a = o(t);
+			i.value = String(a), r("change", a);
 		}
-		return (r, a) => n((t(), p("input", {
-			"onUpdate:modelValue": a[0] ||= (e) => c.value = e,
-			class: f(["cn-field cn-field--number", i(q)]),
+		return (t, n) => fe((A(), w("input", {
+			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
+			class: k(["cn-field cn-field--number", F(Y)]),
 			type: "number",
 			"aria-label": e.field.label,
 			min: e.field.min,
 			max: e.field.max,
 			step: e.field.step ?? (e.field.integer ? 1 : .1),
-			onInput: m,
-			onFocus: a[1] ||= (e) => l.value = !0,
-			onBlur: h,
-			onChange: h
-		}, null, 42, Ot)), [[w, c.value]]);
+			onInput: c,
+			onFocus: n[1] ||= (e) => a.value = !0,
+			onBlur: l,
+			onChange: l
+		}, null, 42, Ot)), [[I, 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__ */ h({
+}), 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({
 	__name: "PaddingField",
 	props: {
 		field: {},
 		modelValue: {}
 	},
 	emits: ["input", "change"],
-	setup(e, { emit: n }) {
-		let a = e, o = n, { mode: s, cycle: c } = G(() => a.modelValue, Ue), l = S(() => U[s.value]);
-		function u(e) {
+	setup(e, { emit: t }) {
+		let n = e, r = t, { mode: i, cycle: a } = Ke(() => n.modelValue, Be), o = x(() => Re[i.value]);
+		function s(e) {
 			return {
 				key: ["padding", e.rep],
 				label: e.label,
 				control: "number"
 			};
 		}
-		function d(e, t, n) {
-			let r = { ...a.modelValue };
-			for (let n of e.sides) r[n] = t;
-			o(n ? "change" : "input", r);
+		function c(e, t, i) {
+			let a = { ...n.modelValue };
+			for (let n of e.sides) a[n] = t;
+			r(i ? "change" : "input", a);
 		}
-		function m() {
-			let { from: e, to: t } = c();
+		function l() {
+			let { from: e, to: t } = a();
 			if (t < e) {
-				let e = We(a.modelValue, t);
-				Ge(e, a.modelValue) || o("change", e);
+				let e = Ve(n.modelValue, t);
+				He(e, n.modelValue) || r("change", e);
 			}
 		}
-		return (n, a) => (t(), p("span", kt, [O(Y, {
-			mode: i(s),
+		return (t, n) => (A(), w("span", kt, [E($e, {
+			mode: F(i),
 			label: "内边距",
-			onCycle: m
-		}, null, 8, ["mode"]), x("span", { class: f(["grid min-w-0 flex-1 gap-1.5", i(s) === 1 ? "grid-cols-1" : "grid-cols-2"]) }, [(t(!0), p(g, null, b(l.value, (n) => (t(), p("label", {
-			key: n.rep,
+			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", {
+			key: t.rep,
 			class: "flex min-w-0 items-center gap-1.5"
-		}, [x("span", At, r(n.label), 1), O(Q, {
+		}, [T("span", At, P(t.label), 1), E(Q, {
 			class: "min-w-0 flex-1",
-			field: u(n),
-			"model-value": e.modelValue[n.rep],
-			onInput: (e) => d(n, e, !1),
-			onChange: (e) => d(n, e, !0)
+			field: s(t),
+			"model-value": e.modelValue[t.rep],
+			onInput: (e) => c(t, e, !1),
+			onChange: (e) => c(t, e, !0)
 		}, null, 8, [
 			"field",
 			"model-value",
@@ -1237,7 +1238,7 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ h({
 	"value",
 	"placeholder",
 	"title"
-], Lt = /* @__PURE__ */ h({
+], Lt = /* @__PURE__ */ D({
 	__name: "PairField",
 	props: {
 		field: {},
@@ -1249,80 +1250,80 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ h({
 		"change",
 		"sub-commit"
 	],
-	setup(e, { emit: n }) {
-		let a = e, o = n, s = S(() => a.field.items ?? []);
-		function c(e) {
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = x(() => n.field.items ?? []);
+		function a(e) {
 			if (!e.auto) return !1;
-			let t = V(a.modelValue, e.auto.key);
+			let t = K(n.modelValue, e.auto.key);
 			return t.ok && t.value === !0;
 		}
-		function l(e) {
+		function o(e) {
 			return {
 				...e,
-				key: z(a.field, e)
+				key: U(n.field, e)
 			};
 		}
-		function u(e) {
+		function s(e) {
 			return {
-				key: [...a.field.key, ...e.auto?.key ?? []],
+				key: [...n.field.key, ...e.auto?.key ?? []],
 				label: `${e.label}自适应`,
 				control: "boolean"
 			};
 		}
-		function d(e, t, n) {
-			o("sub-commit", l(e), t, n);
+		function c(e, t, n) {
+			r("sub-commit", o(e), t, n);
 		}
-		function m(e) {
-			o("sub-commit", u(e), !c(e), !0);
+		function l(e) {
+			r("sub-commit", s(e), !a(e), !0);
 		}
-		function h(e) {
-			let t = V(a.modelValue, e.key);
+		function u(e) {
+			let t = K(n.modelValue, e.key);
 			return t.ok && typeof t.value == "number" ? t.value : 0;
 		}
-		function y(e) {
-			return a.displays?.[z(a.field, e).join(".")];
+		function d(e) {
+			return n.displays?.[U(n.field, e).join(".")];
 		}
-		function C(e) {
-			let t = y(e);
+		function f(e) {
+			let t = d(e);
 			return t === void 0 ? "" : String(t.value);
 		}
-		function w(e) {
-			return c(e) ? `${e.label}自适应：已开启（输入框禁用）` : `${e.label}自适应：开启后由内容决定，输入框禁用`;
+		function p(e) {
+			return a(e) ? `${e.label}自适应：已开启（输入框禁用）` : `${e.label}自适应：开启后由内容决定，输入框禁用`;
 		}
-		function E(e) {
-			let t = y(e);
+		function m(e) {
+			let t = d(e);
 			return t?.preview ? "模板子树：预览盒尺寸（随行实例变化，非文档声明值）" : t === void 0 ? `${e.label}自适应：已开启` : `${e.label}自适应：布局解析值（与画布选择框同源）`;
 		}
-		return (e, n) => (t(), p("span", Mt, [(t(!0), p(g, null, b(s.value, (e) => (t(), p("label", {
+		return (e, t) => (A(), w("span", Mt, [(A(!0), w(b, null, M(i.value, (e) => (A(), w("label", {
 			key: e.key.join("."),
 			class: "flex min-w-0 items-center gap-1",
 			title: e.auto ? void 0 : e.label
 		}, [
-			x("span", Pt, r(e.label), 1),
-			e.auto ? (t(), p("button", {
+			T("span", Pt, P(e.label), 1),
+			e.auto ? (A(), w("button", {
 				key: 0,
 				type: "button",
-				class: f(["cn-props__auto-toggle shrink-0", { "cn-props__auto-toggle--active": c(e) }]),
-				"aria-pressed": c(e),
-				title: w(e),
-				onClick: T((t) => m(e), ["prevent"])
-			}, "自", 10, Ft)) : _("", !0),
-			c(e) ? (t(), p("input", {
+				class: k(["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", {
 				key: 2,
-				class: f(["cn-field cn-field--number min-w-0 flex-1", [i(q), y(e)?.preview ? "cn-field--preview" : ""]]),
+				class: k(["cn-field cn-field--number min-w-0 flex-1", [F(Y), d(e)?.preview ? "cn-field--preview" : ""]]),
 				type: "number",
 				disabled: "",
 				"aria-label": e.label,
-				value: C(e),
+				value: f(e),
 				placeholder: e.auto?.placeholder ?? "",
-				title: E(e)
-			}, null, 10, It)) : (t(), v(Q, {
+				title: m(e)
+			}, null, 10, It)) : (A(), S(Q, {
 				key: 1,
 				class: "min-w-0 flex-1",
 				field: e,
-				"model-value": h(e),
-				onInput: (t) => d(e, t, !1),
-				onChange: (t) => d(e, t, !0)
+				"model-value": u(e),
+				onInput: (t) => c(e, t, !1),
+				onChange: (t) => c(e, t, !0)
 			}, null, 8, [
 				"field",
 				"model-value",
@@ -1331,149 +1332,149 @@ var xt = ["value", "placeholder"], Z = /* @__PURE__ */ h({
 			]))
 		], 8, Nt))), 128))]));
 	}
-}), Rt = ["value"], zt = ["value"], Bt = /* @__PURE__ */ h({
+}), Rt = ["value"], zt = ["value"], Bt = /* @__PURE__ */ D({
 	__name: "SelectField",
 	props: {
 		field: {},
 		modelValue: {}
 	},
 	emits: ["change"],
-	setup(e, { emit: n }) {
-		let i = n;
-		function a(e) {
-			i("change", e.target.value);
+	setup(e, { emit: t }) {
+		let n = t;
+		function r(e) {
+			n("change", e.target.value);
 		}
-		return (n, i) => (t(), p("select", {
+		return (t, n) => (A(), w("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: a
-		}, [(t(!0), p(g, null, b(e.field.domain ?? [], (e) => (t(), p("option", {
+			onChange: r
+		}, [(A(!0), w(b, null, M(e.field.domain ?? [], (e) => (A(), w("option", {
 			key: e,
 			value: e
-		}, r(e), 9, zt))), 128))], 40, Rt));
+		}, P(e), 9, zt))), 128))], 40, Rt));
 	}
-}), Vt = ["value"], Ht = /* @__PURE__ */ h({
+}), Vt = ["value"], Ht = /* @__PURE__ */ D({
 	__name: "TextareaField",
 	props: {
 		field: {},
 		modelValue: {}
 	},
 	emits: ["input", "change"],
-	setup(e, { emit: n }) {
-		let r = n, a = !1;
-		function o(e) {
+	setup(e, { emit: t }) {
+		let n = t, r = !1;
+		function i(e) {
 			let t = e.target.value;
-			a || e.isComposing || r("input", t);
+			r || e.isComposing || n("input", t);
 		}
-		function s() {
-			a = !0;
+		function a() {
+			r = !0;
 		}
-		function c(e) {
-			a = !1, r("input", e.target.value);
+		function o(e) {
+			r = !1, n("input", e.target.value);
 		}
-		function l(e) {
-			a = !1, r("change", e.target.value);
+		function s(e) {
+			r = !1, n("change", e.target.value);
 		}
-		return (n, r) => (t(), p("textarea", {
-			class: f(["cn-field", i(Ye)]),
+		return (t, n) => (A(), w("textarea", {
+			class: k(["cn-field", F(Je)]),
 			rows: "3",
 			value: e.modelValue,
-			onInput: o,
-			onCompositionstart: s,
-			onCompositionend: c,
-			onChange: l
+			onInput: i,
+			onCompositionstart: a,
+			onCompositionend: o,
+			onChange: s
 		}, null, 42, Vt));
 	}
-}), Ut = {
-	number: a(Q),
-	text: a(Z),
-	textarea: a(Ht),
-	color: a(yt),
-	select: a(Bt),
-	boolean: a(Ve),
-	pair: a(Lt),
-	anchor: a(H),
-	align: a(ke),
-	padding: a(jt),
-	border: a(at),
-	font: a(pt),
-	imageSrc: a(Dt)
+}), $ = {
+	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)
 };
 //#endregion
 //#region src/property-panel/usePropertyPanel.ts
-function $(t) {
-	let n = e(t.store.doc), r = e(t.store.ui.selection), i = e(t.store.ui.anchorExpanded), a = e(t.store.ui.dataSourceSchema), s = e(t.store.ui.resourceStatuses), c = t.subscribe((e) => {
-		e.scope === "doc" ? (n.value = t.store.doc, r.value = t.store.ui.selection, s.value = t.store.ui.resourceStatuses) : e.scope === "ui" && (e.branch === "selection" ? (r.value = t.store.ui.selection, t.store.closeMerge()) : e.branch === "anchorExpanded" ? i.value = t.store.ui.anchorExpanded : e.branch === "dataSourceSchema" ? a.value = t.store.ui.dataSourceSchema : e.branch === "resourceStatuses" && (s.value = t.store.ui.resourceStatuses));
+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));
 	});
-	o(c, !0);
-	let l = S(() => {
-		let e = n.value, t = r.value;
-		return e && t ? m(e, t) : null;
-	}), u = S(() => n.value), d = S(() => {
-		let e = l.value, t = r.value;
-		return e && t ? Te(t, e) : n.value ? B : [];
-	}), f = S(() => {
-		let e = r.value;
-		return e && n.value ? t.layerBoxAt(e) : null;
-	}), p = S(() => {
-		let e = a.value;
-		return e === null ? null : fe(e, ue(e, n.value, r.value));
-	}), h = S(() => pe(me(n.value, r.value, a.value))), g = S(() => r.value?.includes("template") ?? !1);
-	function _(e) {
-		t.store.setAnchorExpanded(e);
+	se(o, !0);
+	let s = x(() => {
+		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(() => {
+		let r = n.value;
+		return r && t.value ? e.layerBoxAt(r) : null;
+	}), d = x(() => {
+		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) {
+		e.store.setAnchorExpanded(t);
 	}
-	function v(e) {
+	function g(e) {
 		if (!e.data) return !1;
-		let t = l.value;
+		let t = s.value;
 		return t !== null && "expression" in t && t.expression !== null;
 	}
-	function y(e, i, a) {
-		if (!n.value) return;
-		let o = r.value;
+	function ee(r, i, a) {
+		if (!t.value) return;
+		let o = n.value;
 		if (!o) {
-			x(e, i, a);
+			re(r, i, a);
 			return;
 		}
-		let s = `sel:${o.join(".")}:${e.key.join(".")}`;
-		if (e.data) {
-			if (v(e)) {
-				let e = `sel:${o.join(".")}:data.expression`;
-				t.updateDataExpression(o, i, { mergeKey: e }), a && t.store.closeMerge(e);
+		let s = `sel:${o.join(".")}:${r.key.join(".")}`;
+		if (r.data) {
+			if (g(r)) {
+				let t = `sel:${o.join(".")}:data.expression`;
+				e.updateDataExpression(o, i, { mergeKey: t }), a && e.store.closeMerge(t);
 				return;
 			}
-			t.updateData(o, i, { mergeKey: s }), a && t.store.closeMerge(s);
+			e.updateData(o, i, { mergeKey: s }), a && e.store.closeMerge(s);
 			return;
 		}
-		t.updateSpec(o, e.key, i, { mergeKey: s }), a && t.store.closeMerge(s);
+		e.updateSpec(o, r.key, i, { mergeKey: s }), a && e.store.closeMerge(s);
 	}
-	function b(e) {
-		let n = l.value, i = r.value;
-		if (!n || !i || !e.data) return;
-		let a = V(n, e.key);
+	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 : "";
-		v(e) ? t.updateData(i, o) : t.updateDataExpression(i, o);
+		g(t) ? e.updateData(i, o) : e.updateDataExpression(i, o);
 	}
-	function x(e, n, r) {
-		let i = e.key[0];
+	function re(t, n, r) {
+		let i = t.key[0];
 		if (i !== "width" && i !== "height" || typeof n != "number") return;
 		let a = `canvas:${i}`;
-		t.updateCanvasProp(i, n, { mergeKey: a }), r && t.store.closeMerge(a);
+		e.updateCanvasProp(i, n, { mergeKey: a }), r && e.store.closeMerge(a);
 	}
 	return {
-		selection: S(() => r.value),
-		layer: l,
-		canvas: u,
-		sections: d,
-		layerBox: f,
-		isPreviewBox: g,
-		completionSource: p,
-		rowsPathSource: h,
-		resourceStatuses: S(() => s.value),
-		anchorExpanded: S(() => i.value),
-		commit: y,
-		toggleDataMode: b,
-		setAnchorExpanded: _
+		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
 	};
 }
 //#endregion
@@ -1486,12 +1487,12 @@ var Wt = {
 	"aria-pressed",
 	"title",
 	"onClick"
-], Kt = /* @__PURE__ */ h({
+], Kt = /* @__PURE__ */ D({
 	__name: "ValueTypeSegmented",
 	props: { mode: {} },
 	emits: ["change"],
-	setup(e, { emit: n }) {
-		let i = e, a = n, o = [{
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = [{
 			value: "static",
 			label: "静态",
 			title: "静态值：输入的字面内容直接显示在画布上"
@@ -1500,22 +1501,22 @@ var Wt = {
 			label: "表达式",
 			title: "表达式值：内容为插值原文，画布显示解析镜像（{{路径}} / {{$index}} / {{$root.*}}）"
 		}];
-		function s(e) {
-			e !== i.mode && a("change", e);
+		function a(e) {
+			e !== n.mode && r("change", e);
 		}
-		return (n, i) => (t(), p("span", Wt, [(t(), p(g, null, b(o, (t, n) => x("button", {
+		return (t, n) => (A(), w("span", Wt, [(A(), w(b, null, M(i, (t, n) => T("button", {
 			key: t.value,
 			type: "button",
-			class: f(["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: 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"]]),
 			"aria-pressed": t.value === e.mode,
 			title: t.value === e.mode ? t.title : `${t.title}；点击切换`,
-			onClick: T((e) => s(t.value), ["prevent"])
-		}, r(t.label), 11, Gt)), 64))]));
+			onClick: R((e) => a(t.value), ["prevent"])
+		}, P(t.label), 11, Gt)), 64))]));
 	}
 }), qt = ["title"], Jt = {
 	key: 2,
 	class: "cn-prop-field__hint col-span-2 block text-[11px] leading-4 text-cn-muted"
-}, Yt = /* @__PURE__ */ h({
+}, Yt = /* @__PURE__ */ D({
 	__name: "PropertyField",
 	props: {
 		field: {},
@@ -1532,51 +1533,51 @@ var Wt = {
 		"toggle-mode",
 		"sub-commit"
 	],
-	setup(e, { emit: n }) {
-		let a = e, o = n, s = S(() => Ut[a.field.control]), c = S(() => a.dataMode === "expression"), l = S(() => a.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"), d = S(() => a.field.data === !0 ? "col-span-2" : ""), m = S(() => a.field.data === !0 && (a.field.control === "textarea" || a.field.control === "text" || a.field.control === "imageSrc")), h = S(() => a.field.completion === "rowsPath"), b = S(() => m.value || h.value), x = k(null), C = S(() => {
-			if (!b.value) return null;
-			let e = x.value?.$el;
+	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(() => {
+			if (!u.value) return null;
+			let e = d.value?.$el;
 			return e instanceof HTMLTextAreaElement || e instanceof HTMLInputElement ? e : null;
-		}), w = k(null), T = S(() => w.value?.rootEl ?? null), { popup: E, accept: D } = de({
-			target: C,
-			enabled: () => m.value && c.value && a.completion != null,
-			pairing: () => m.value && c.value,
-			resolve: (e) => a.completion?.(e) ?? null,
-			popupEl: T
-		}), { popup: O, accept: A } = he({
-			target: C,
-			enabled: () => h.value && a.completion != null,
-			resolve: (e) => a.completion?.(e) ?? null,
-			popupEl: T
+		}), p = j(null), m = x(() => p.value?.rootEl ?? null), { popup: h, accept: _ } = ee({
+			target: f,
+			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,
+			enabled: () => l.value && n.completion != null,
+			resolve: (e) => n.completion?.(e) ?? null,
+			popupEl: m
 		});
-		function j(e, t, n) {
-			o("sub-commit", e, t, n);
+		function y(e, t, n) {
+			r("sub-commit", e, t, n);
 		}
-		return (n, a) => (t(), p(g, null, [(t(), v(y(e.field.control === "pair" || e.field.control === "imageSrc" ? "div" : "label"), { class: f(l.value) }, {
-			default: u(() => [
-				e.field.control === "pair" ? _("", !0) : (t(), p("span", {
+		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", {
 					key: 0,
 					class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted",
 					title: e.field.title
-				}, r(e.field.label), 9, qt)),
-				e.field.data ? (t(), v(Kt, {
+				}, P(e.field.label), 9, qt)),
+				e.field.data ? (A(), S(Kt, {
 					key: 1,
 					class: "justify-self-end",
 					mode: e.dataMode ?? "static",
-					onChange: a[0] ||= (e) => o("toggle-mode")
-				}, null, 8, ["mode"])) : _("", !0),
-				(t(), v(y(s.value), {
+					onChange: n[0] ||= (e) => r("toggle-mode")
+				}, null, 8, ["mode"])) : C("", !0),
+				(A(), S(le(i.value), {
 					ref_key: "controlRef",
-					ref: x,
-					class: f(["cn-prop-field__control", [d.value, { "cn-field--expression": c.value }]]),
+					ref: d,
+					class: k(["cn-prop-field__control", [s.value, { "cn-field--expression": a.value }]]),
 					field: e.field,
 					"model-value": e.value,
 					displays: e.field.control === "pair" ? e.displays : void 0,
 					"data-mode": e.field.control === "imageSrc" ? e.dataMode : void 0,
 					"resource-status": e.field.control === "imageSrc" ? e.resourceStatus : void 0,
-					onInput: a[1] ||= (e) => o("input", e),
-					onChange: a[2] ||= (e) => o("change", e),
-					onSubCommit: j
+					onInput: n[1] ||= (e) => r("input", e),
+					onChange: n[2] ||= (e) => r("change", e),
+					onSubCommit: y
 				}, null, 40, [
 					"class",
 					"field",
@@ -1585,120 +1586,120 @@ var Wt = {
 					"data-mode",
 					"resource-status"
 				])),
-				e.hint ? (t(), p("span", Jt, r(e.hint), 1)) : _("", !0)
+				e.hint ? (A(), w("span", Jt, P(e.hint), 1)) : C("", !0)
 			]),
 			_: 1
-		}, 8, ["class"])), m.value ? (t(), v(le, {
+		}, 8, ["class"])), c.value ? (A(), S(g, {
 			key: 0,
 			ref_key: "popupRef",
-			ref: w,
-			state: i(E),
-			onSelect: i(D)
-		}, null, 8, ["state", "onSelect"])) : h.value ? (t(), v(le, {
+			ref: p,
+			state: F(h),
+			onSelect: F(_)
+		}, null, 8, ["state", "onSelect"])) : l.value ? (A(), S(g, {
 			key: 1,
 			ref_key: "popupRef",
-			ref: w,
-			state: i(O),
-			onSelect: i(A)
-		}, null, 8, ["state", "onSelect"])) : _("", !0)], 64));
+			ref: p,
+			state: F(te),
+			onSelect: F(v)
+		}, null, 8, ["state", "onSelect"])) : C("", !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 = {
 	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__ */ h({
+}, 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({
 	__name: "PropertyPanel",
 	props: { editor: {} },
 	setup(e) {
-		let n = e, a = $(n.editor);
-		l(X, {
-			canUpload: n.editor.canUpload,
-			uploadImage: (e) => n.editor.uploadImage(e)
+		let t = e, n = Ut(t.editor);
+		ce(X, {
+			canUpload: t.editor.canUpload,
+			uploadImage: (e) => t.editor.uploadImage(e)
 		});
-		function o(e) {
-			return e.completion === "rowsPath" ? a.rowsPathSource.value : a.completionSource.value;
+		function r(e) {
+			return e.completion === "rowsPath" ? n.rowsPathSource.value : n.completionSource.value;
 		}
-		let s = S(() => a.layer.value !== null), c = S(() => {
-			let e = a.layer.value;
-			return e ? e.type : a.canvas.value ? "Canvas" : "—";
+		let i = x(() => n.layer.value !== null), a = x(() => {
+			let e = n.layer.value;
+			return e ? e.type : n.canvas.value ? "Canvas" : "—";
 		});
-		function u(e) {
-			let t = V(e, ["expression"]);
+		function o(e) {
+			let t = K(e, ["expression"]);
 			return t.ok && t.value !== null ? "expression" : "static";
 		}
-		let d = S(() => {
-			let e = a.layer.value ?? (a.selection.value ? null : a.canvas.value);
+		let s = x(() => {
+			let e = n.layer.value ?? (n.selection.value ? null : n.canvas.value);
 			if (!e) return [];
-			let t = a.selection.value?.join(".") ?? "canvas", n = a.layer.value, r = a.resourceStatuses.value, i = [];
-			for (let o of a.sections.value) {
-				let a = [];
-				for (let i of o.fields) {
-					let o = V(e, i.key);
-					o.ok && a.push({
-						key: `${t}:${i.key.join(".")}`,
-						field: i,
-						value: o.value,
-						dataMode: i.data ? u(e) : void 0,
-						hint: i.hint && n ? i.hint(n, r) ?? void 0 : void 0,
-						resourceStatus: i.control === "imageSrc" && typeof o.value == "string" && o.value !== "" ? r[o.value] : void 0
+			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({
+						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
 					});
 				}
-				a.length > 0 && i.push({
-					title: o.title,
-					fields: a
+				n.length > 0 && a.push({
+					title: s.title,
+					fields: n
 				});
 			}
-			return i;
-		}), f = S(() => {
-			let e = {}, t = a.layerBox.value, n = a.layer.value;
-			if (!t || !n) return e;
-			let r = /* @__PURE__ */ new Map();
-			if (n.shape.autoWidth && r.set("autoWidth", Math.round(t.width * 100) / 100), n.shape.autoHeight && r.set("autoHeight", Math.round(t.height * 100) / 100), r.size === 0) return e;
-			for (let t of a.sections.value) for (let n of t.fields) for (let t of n.items ?? []) {
-				let i = t.auto ? r.get(t.auto.key.join(".")) : void 0;
-				i !== void 0 && (e[z(n, t).join(".")] = {
-					value: i,
-					preview: a.isPreviewBox.value
+			return a;
+		}), c = x(() => {
+			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(".")] = {
+					value: a,
+					preview: n.isPreviewBox.value
 				});
 			}
 			return e;
 		});
-		function m() {
-			a.setAnchorExpanded(!a.anchorExpanded.value);
+		function l() {
+			n.setAnchorExpanded(!n.anchorExpanded.value);
 		}
-		return (e, n) => (t(), p("aside", Xt, [
-			x("header", Zt, [x("div", Qt, [x("span", $t, [n[0] ||= x("i", {
+		return (e, t) => (A(), w("aside", Xt, [
+			T("header", Zt, [T("div", Qt, [T("span", $t, [t[0] ||= T("i", {
 				class: "size-1.5 rounded-full bg-cn-accent",
 				"aria-hidden": "true"
-			}, null, -1), E(" " + r(c.value), 1)]), x("span", en, r(s.value ? "图层属性" : "画布属性"), 1)])]),
-			d.value.length === 0 ? (t(), p("p", tn, " 打开文档后可编辑属性 ")) : _("", !0),
-			(t(!0), p(g, null, b(d.value, (e) => (t(), p("section", {
+			}, 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", {
 				key: e.title,
 				class: "cn-props__section border-b border-cn-line/70 px-3.5 py-3 last:border-b-0"
-			}, [x("h3", nn, r(e.title), 1), x("div", rn, [(t(!0), p(g, null, b(e.fields, (e) => (t(), p(g, { key: e.key }, [e.field.control === "anchor" ? (t(), v(H, {
+			}, [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, {
 				key: 0,
 				field: e.field,
 				"model-value": e.value,
-				expanded: i(a).anchorExpanded.value,
-				onChange: (t) => i(a).commit(e.field, t, !0),
-				onToggle: m
+				expanded: F(n).anchorExpanded.value,
+				onChange: (t) => F(n).commit(e.field, t, !0),
+				onToggle: l
 			}, null, 8, [
 				"field",
 				"model-value",
 				"expanded",
 				"onChange"
-			])) : (t(), v(Yt, {
+			])) : (A(), S(Yt, {
 				key: 1,
 				field: e.field,
 				value: e.value,
 				"data-mode": e.dataMode,
 				hint: e.hint,
-				completion: o(e.field),
-				displays: f.value,
+				completion: r(e.field),
+				displays: c.value,
 				"resource-status": e.resourceStatus,
-				onInput: (t) => i(a).commit(e.field, t, !1),
-				onChange: (t) => i(a).commit(e.field, t, !0),
-				onToggleMode: (t) => i(a).toggleDataMode(e.field),
-				onSubCommit: i(a).commit
+				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
 			}, null, 8, [
 				"field",
 				"value",
@@ -1716,4 +1717,4 @@ var Wt = {
 	}
 });
 //#endregion
-export { X as a, st as c, Te as d, Se as f, Ut as i, B as l, V as m, Yt as n, bt as o, Ce as p, $ as r, ot as s, an as t, xe as u };
+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 };