@hankchen/canvas-editor-vue 0.1.2 → 0.1.3

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

@@ -1,23 +1,76 @@
-import { a as e, i as t, n, r, t as i } from "./dist-B6-i-hhY.js";
-import { a, r as o } from "./layerPath-uy2ywyld.js";
-import { i as s, r as c } from "./completionAnchor-CDR5YZhu.js";
-import { i as l, n as u, r as d, t as f } from "./uploadFile-BOfv8aLG.js";
-import { n as p, r as m, t as h } from "./usePathCompletion-uJ5c_gQ0.js";
-import { Fragment as g, computed as _, createBlock as v, createCommentVNode as y, createElementBlock as b, createElementVNode as x, createTextVNode as S, createVNode as C, defineComponent as w, inject as T, markRaw as E, nextTick as D, normalizeClass as O, onScopeDispose as ee, openBlock as k, provide as te, ref as A, renderList as j, resolveDynamicComponent as ne, shallowRef as M, toDisplayString as N, unref as P, vModelText as F, watch as I, watchEffect as re, withCtx as ie, withDirectives as ae, withModifiers as L } from "vue";
-import { AlignCenterHorizontal as oe, AlignCenterVertical as se, AlignEndHorizontal as ce, AlignEndVertical as le, AlignStartHorizontal as ue, AlignStartVertical as de, ChevronDown as fe, Grid2x2 as pe, Square as me, SquareSplitVertical as he } from "@lucide/vue";
+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: [
+		["path", {
+			d: "M12 3v18",
+			key: "108xh3"
+		}],
+		["path", {
+			d: "M3 12h18",
+			key: "1i2n21"
+		}],
+		["rect", {
+			x: "3",
+			y: "3",
+			width: "18",
+			height: "18",
+			rx: "2",
+			key: "h1oib"
+		}]
+	],
+	aliases: ["grid-2-x-2"]
+}), me = e({
+	name: "square-split-vertical",
+	size: 24,
+	node: [
+		["path", {
+			d: "M2 12h20",
+			key: "9i4pu4"
+		}],
+		["path", {
+			d: "M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3",
+			key: "14rx03"
+		}],
+		["path", {
+			d: "M3 8V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3",
+			key: "1haecz"
+		}]
+	],
+	aliases: ["split-square-vertical"]
+}), he = e({
+	name: "square",
+	size: 24,
+	node: [["rect", {
+		width: "18",
+		height: "18",
+		x: "3",
+		y: "3",
+		rx: "2",
+		key: "afitv7"
+	}]]
+});
+//#endregion
 //#region ../canvas-editor/src/shared/resourceStatus.ts
-function ge(n, r) {
-	if (n.type !== "ImageLayer") return !1;
-	if (n.expression !== null || n.src === null || e(n) <= 0 || t(n) <= 0) return !0;
-	if (r !== void 0) {
-		let e = r[n.src];
-		if (e !== void 0 && e !== "done") return !0;
+function ge(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) {
+		let t = n[e.src];
+		if (t !== void 0 && t !== "done") return !0;
 	}
 	return !1;
 }
 //#endregion
 //#region src/property-panel/fieldSchema.ts
-var _e = "当前层内容未绘制，padding 不影响预览", R = {
+var _e = "当前层内容未绘制，padding 不影响预览", z = {
 	title: "位置与尺寸",
 	fields: [
 		{
@@ -72,20 +125,20 @@ var _e = "当前层内容未绘制，padding 不影响预览", R = {
 			control: "anchor"
 		}
 	]
-}, z = {
+}, B = {
 	title: "对齐",
 	fields: [{
 		key: ["align", "horizontal"],
 		label: "水平",
 		control: "align",
-		domain: n
+		domain: s
 	}, {
 		key: ["align", "vertical"],
 		label: "垂直",
 		control: "align",
-		domain: r
+		domain: l
 	}]
-}, B = {
+}, V = {
 	title: "形状",
 	fields: [
 		{
@@ -115,11 +168,11 @@ var _e = "当前层内容未绘制，padding 不影响预览", R = {
 			control: "border"
 		}
 	]
-}, V = {
+}, ve = {
 	ImageLayer: [
-		R,
 		z,
 		B,
+		V,
 		{
 			title: "图片",
 			fields: [{
@@ -131,9 +184,9 @@ var _e = "当前层内容未绘制，padding 不影响预览", R = {
 		}
 	],
 	TextLayer: [
-		R,
 		z,
 		B,
+		V,
 		{
 			title: "文本",
 			fields: [
@@ -169,9 +222,9 @@ var _e = "当前层内容未绘制，padding 不影响预览", R = {
 		}
 	],
 	QrCodeLayer: [
-		R,
 		z,
 		B,
+		V,
 		{
 			title: "二维码",
 			fields: [{
@@ -183,9 +236,9 @@ var _e = "当前层内容未绘制，padding 不影响预览", R = {
 		}
 	],
 	TableLayer: [
-		R,
 		z,
 		B,
+		V,
 		{
 			title: "数据",
 			fields: [{
@@ -200,14 +253,14 @@ var _e = "当前层内容未绘制，padding 不影响预览", R = {
 		}
 	],
 	TableRowLayer: [
-		R,
 		z,
-		B
+		B,
+		V
 	],
 	TableCellLayer: [
-		R,
 		z,
-		B
+		B,
+		V
 	],
 	TableRowTemplate: [{
 		title: "行模板（行宽由表宽同步）",
@@ -224,15 +277,15 @@ var _e = "当前层内容未绘制，padding 不影响预览", R = {
 		}]
 	}]
 };
-function H(e) {
-	return V[e] ?? [];
+function ye(e) {
+	return ve[e] ?? [];
 }
-function U(e) {
-	if (e[e.length - 1] === "content") return o(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 ve = {
+var be = {
 	root: [],
 	cell: [],
 	row: ["shape.width", "shape.autoWidth"],
@@ -244,16 +297,16 @@ var ve = {
 	],
 	templateContent: ["shape.width", "shape.autoWidth"]
 };
-function W(e, t) {
+function U(e, t) {
 	return [...e.key, ...t.key];
 }
-function ye(e, t) {
-	let n = new Set(ve[U(e)]), r = [];
-	for (let e of H(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(W(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
@@ -269,7 +322,7 @@ function ye(e, t) {
 	}
 	return r;
 }
-var be = [{
+var G = [{
 	title: "画布",
 	fields: [{
 		key: ["width"],
@@ -285,7 +338,7 @@ var be = [{
 		min: 1
 	}]
 }];
-function G(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 };
@@ -305,7 +358,7 @@ var xe = ["aria-label"], Se = [
 ], Ce = {
 	key: 1,
 	class: "truncate px-1 text-[10px] leading-none"
-}, we = /* @__PURE__ */ w({
+}, we = /* @__PURE__ */ D({
 	__name: "AlignField",
 	props: {
 		field: {},
@@ -313,61 +366,61 @@ var xe = ["aria-label"], Se = [
 	},
 	emits: ["change"],
 	setup(e, { emit: t }) {
-		let i = e, a = t, o = {
-			[n.join(".")]: {
+		let a = e, u = t, d = {
+			[s.join(".")]: {
 				left: {
-					icon: de,
+					icon: n,
 					title: "左对齐"
 				},
 				center: {
-					icon: se,
+					icon: i,
 					title: "居中对齐"
 				},
 				right: {
-					icon: le,
+					icon: f,
 					title: "右对齐"
 				}
 			},
-			[r.join(".")]: {
+			[l.join(".")]: {
 				top: {
-					icon: ue,
+					icon: o,
 					title: "顶对齐"
 				},
 				center: {
-					icon: oe,
+					icon: c,
 					title: "居中对齐"
 				},
 				bottom: {
-					icon: ce,
+					icon: r,
 					title: "底对齐"
 				}
 			}
-		}, c = _(() => {
-			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 l(e) {
-			e !== i.modelValue && a("change", e);
+		function m(e) {
+			e !== a.modelValue && u("change", e);
 		}
-		return (t, n) => (k(), b("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
-		}, [(k(!0), b(g, null, j(c.value, (t, n) => (k(), b("button", {
+		}, [(A(!0), w(b, null, M(p.value, (t, n) => (A(), w("button", {
 			key: t.value,
 			type: "button",
-			class: O(["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: 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: L((e) => l(t.value), ["prevent"])
-		}, [t.icon ? (k(), v(s, {
+			onClick: R((e) => m(t.value), ["prevent"])
+		}, [t.icon ? (A(), S(h, {
 			key: 0,
 			icon: t.icon
-		}, null, 8, ["icon"])) : (k(), b("span", Ce, N(t.value), 1))], 10, Se))), 128))], 8, xe));
+		}, null, 8, ["icon"])) : (A(), w("span", Ce, P(t.value), 1))], 10, Se))), 128))], 8, xe));
 	}
 }), 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",
@@ -388,7 +441,7 @@ var xe = ["aria-label"], Se = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], K = /* @__PURE__ */ w({
+], Pe = /* @__PURE__ */ D({
 	__name: "AnchorDisclosureField",
 	props: {
 		field: {},
@@ -397,42 +450,42 @@ var xe = ["aria-label"], Se = [
 	},
 	emits: ["change", "toggle"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, a = E(i), o = Array.from({ length: 9 }, (e, 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
-		})), c = _(() => {
+		})), 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 l(e) {
+		function s(e) {
 			r("change", e);
 		}
-		return (t, n) => (k(), b("span", Te, [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: n[0] ||= (e) => r("toggle")
-		}, [x("span", De, N(e.field.label), 1), x("span", Oe, [(k(), b("svg", ke, [(k(!0), b(g, null, j(P(o), (e) => (k(), b("circle", {
+		}, [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 === c.value ? 3.2 : 2.2,
-			class: O(e.index === c.value ? "fill-cn-accent" : "fill-cn-muted/35")
-		}, null, 10, Ae))), 128))])), C(s, {
-			icon: P(fe),
-			class: O(["text-cn-muted transition-transform duration-150", { "rotate-180": e.expanded }])
-		}, null, 8, ["icon", "class"])])], 8, Ee), e.expanded ? (k(), b("span", je, [x("span", Me, [(k(!0), b(g, null, j(P(a), (t) => (k(), b("button", {
+			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: O(["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: 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) => l(t)
-		}, null, 10, Ne))), 128))])])) : y("", !0)]));
+			onClick: (e) => s(t)
+		}, null, 10, Ne))), 128))])])) : C("", !0)]));
 	}
-}), Pe = { class: "cn-bool relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center" }, Fe = ["checked"], Ie = /* @__PURE__ */ w({
+}), 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: {},
@@ -440,26 +493,26 @@ var xe = ["aria-label"], Se = [
 	},
 	emits: ["change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = A(null);
+		let n = e, r = t, i = j(null);
 		async function a(e) {
-			r("change", e.target.checked), await D(), i.value && (i.value.checked = n.modelValue);
+			r("change", e.target.checked), await oe(), i.value && (i.value.checked = n.modelValue);
 		}
-		return re(() => {
+		return ue(() => {
 			i.value && (i.value.checked = n.modelValue);
-		}), (t, n) => (k(), b("label", Pe, [
-			x("input", {
+		}), (t, n) => (A(), w("label", Fe, [
+			T("input", {
 				ref_key: "inputRef",
 				ref: i,
 				class: "cn-bool__input peer sr-only",
 				type: "checkbox",
 				checked: e.modelValue,
 				onChange: a
-			}, null, 40, Fe),
-			n[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),
-			n[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)
+			}, 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)
 		]));
 	}
-}), Le = {
+}), Re = {
 	1: [{
 		label: "四边",
 		rep: "top",
@@ -502,13 +555,13 @@ var xe = ["aria-label"], Se = [
 		}
 	]
 };
-function Re(e) {
+function ze(e) {
 	return e === 1 ? 2 : e === 2 ? 4 : 1;
 }
-function ze(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 Be(e, t) {
+function Ve(e, t) {
 	if (t === 1) {
 		let { top: t } = e;
 		return {
@@ -529,17 +582,17 @@ function Be(e, t) {
 	}
 	return e;
 }
-function Ve(e, t) {
+function He(e, t) {
 	return e.top === t.top && e.bottom === t.bottom && e.left === t.left && e.right === t.right;
 }
 function q(e, t) {
 	return e === null || t === null ? e === t : e.width === t.width && e.color === t.color;
 }
-function He(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 && q(t, n) && q(t, r) && q(t, i) ? 1 : q(t, n) && q(r, i) ? 2 : 4;
 }
-function Ue(e, t) {
+function We(e, t) {
 	let n = (e) => e === null ? null : { ...e };
 	if (t === 1) {
 		let t = n(e.top);
@@ -561,18 +614,18 @@ function Ue(e, t) {
 	}
 	return e;
 }
-function We(e, t) {
+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 Ge(e, t) {
-	let n = _(() => t(e())), r = A(null), i = _(() => r.value ?? n.value);
-	I(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 = Re(e);
+		let e = i.value, t = ze(e);
 		return r.value = t, {
 			from: e,
 			to: t
@@ -585,7 +638,7 @@ function Ge(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`, Ke = J, qe = "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", Je = "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", Ye = ["aria-label"], Xe = /* @__PURE__ */ w({
+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: {},
@@ -593,8 +646,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 = A(n.value === null ? "" : String(n.value)), a = A(!1);
-		I(() => n.value, (e) => {
+		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 o(e) {
@@ -623,9 +676,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) => ae((k(), b("input", {
+		return (t, n) => fe((A(), w("input", {
 			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
-			class: O(["cn-field cn-field--number min-w-0 flex-1", P(Y)]),
+			class: k(["cn-field cn-field--number min-w-0 flex-1", F(Y)]),
 			type: "number",
 			"aria-label": e.label,
 			min: 0,
@@ -636,9 +689,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, Ye)), [[F, i.value]]);
+		}, null, 42, Xe)), [[I, i.value]]);
 	}
-}), Ze = ["aria-label", "title"], Qe = /* @__PURE__ */ w({
+}), Qe = ["aria-label", "title"], $e = /* @__PURE__ */ D({
 	__name: "ShorthandModeButton",
 	props: {
 		mode: {},
@@ -648,35 +701,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: me,
+				icon: he,
 				title: "统一值"
 			},
 			2: {
-				icon: he,
+				icon: me,
 				title: "上下/左右"
 			},
 			4: {
 				icon: pe,
 				title: "四边独立"
 			}
-		}, a = _(() => i[n.mode]), o = _(() => `${n.label}：${a.value.title}（点击切换值模式）`);
-		return (e, t) => (k(), b("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": o.value,
 			title: o.value,
-			onClick: t[0] ||= L((e) => r("cycle"), ["prevent"])
-		}, [C(s, {
+			onClick: t[0] ||= R((e) => r("cycle"), ["prevent"])
+		}, [E(h, {
 			icon: a.value.icon,
 			size: 12
-		}, null, 8, ["icon"])], 8, Ze));
+		}, null, 8, ["icon"])], 8, Qe));
 	}
-}), $e = { class: "cn-border flex w-full min-w-0 items-center gap-1" }, et = { class: "grid min-w-0 flex-1 gap-1 grid-cols-1" }, tt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, nt = [
+}), 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"
-], rt = "#000000", it = /* @__PURE__ */ w({
+], it = "#000000", at = /* @__PURE__ */ D({
 	__name: "BorderField",
 	props: {
 		field: {},
@@ -684,12 +737,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 } = Ge(() => n.modelValue, He), o = _(() => Le[i.value]);
+		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 c(e) {
-			return n.modelValue[e.rep]?.color ?? rt;
+			return n.modelValue[e.rep]?.color ?? it;
 		}
 		function l(e, t, i) {
 			let a = { ...n.modelValue };
@@ -697,7 +750,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 ?? rt;
+			let i = n.modelValue[e.rep]?.color ?? it;
 			l(e, t <= 0 ? null : {
 				width: t,
 				color: i
@@ -715,20 +768,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 = Ue(n.modelValue, t);
-				We(e, n.modelValue) || r("change", e);
+				let e = We(n.modelValue, t);
+				Ge(e, n.modelValue) || r("change", e);
 			}
 		}
-		return (t, n) => (k(), b("span", $e, [C(Qe, {
-			mode: P(i),
+		return (t, n) => (A(), w("span", et, [E($e, {
+			mode: F(i),
 			label: "边框",
 			onCycle: f
-		}, null, 8, ["mode"]), x("span", et, [(k(!0), b(g, null, j(o.value, (t) => (k(), b("label", {
+		}, 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", tt, N(t.label), 1),
-			C(Xe, {
+			T("span", nt, P(t.label), 1),
+			E(Ze, {
 				class: "cn-border__width",
 				value: s(t),
 				label: t.label,
@@ -740,7 +793,7 @@ var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-
 				"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: "边框颜色",
@@ -748,23 +801,23 @@ 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, nt)
+			}, null, 40, rt)
 		]))), 128))])]));
 	}
-}), at = Symbol("canvas-font-picker");
-function ot() {
-	return T(at, null);
+}), 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 st = ["value"], ct = {
+var ct = ["value"], lt = {
 	key: 1,
 	class: "flex flex-1 items-center gap-1.5"
-}, lt = ["value"], ut = ["value"], dt = [
+}, ut = ["value"], dt = ["value"], ft = [
 	"disabled",
 	"title",
 	"data-upload-error"
-], ft = /* @__PURE__ */ w({
+], pt = /* @__PURE__ */ D({
 	__name: "FontField",
 	props: {
 		field: {},
@@ -772,7 +825,7 @@ var st = ["value"], ct = {
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = ot(), a = _(() => {
+		let n = e, r = t, i = st(), a = x(() => {
 			if (i === null) return [];
 			let e = [{
 				label: "内置默认字体",
@@ -804,65 +857,65 @@ var st = ["value"], ct = {
 		function d(e) {
 			c = !1, r("input", e.target.value);
 		}
-		function p(e) {
+		function f(e) {
 			c = !1, r("change", e.target.value);
 		}
-		let m = A(!1), h = A(null), v = A(null);
-		function S() {
-			h.value = null, v.value?.click();
+		let p = j(!1), m = j(null), h = j(null);
+		function g() {
+			m.value = null, h.value?.click();
 		}
-		async function C(e) {
+		async function _(e) {
 			let t = e.target, n = t.files?.[0];
-			if (t.value = "", i !== null && n && !m.value) {
-				m.value = !0;
+			if (t.value = "", i !== null && n && !p.value) {
+				p.value = !0;
 				try {
-					let e = await i.uploadFont(await f(n));
+					let e = await i.uploadFont(await v(n));
 					r("change", e);
 				} catch (e) {
-					h.value = e instanceof Error ? e.message : String(e);
+					m.value = e instanceof Error ? e.message : String(e);
 				} finally {
-					m.value = !1;
+					p.value = !1;
 				}
 			}
 		}
-		return (t, n) => P(i) === null ? (k(), b("input", {
+		return (t, n) => F(i) === null ? (A(), w("input", {
 			key: 0,
-			class: O(["cn-field", P(Ke)]),
+			class: k(["cn-field", F(qe)]),
 			type: "text",
 			value: e.modelValue,
 			onInput: l,
 			onCompositionstart: u,
 			onCompositionend: d,
-			onChange: p
-		}, null, 42, st)) : (k(), b("div", ct, [
-			x("select", {
-				class: O(["cn-field cn-select", P(J)]),
+			onChange: f
+		}, null, 42, ct)) : (A(), w("div", lt, [
+			T("select", {
+				class: k(["cn-field cn-select", F(J)]),
 				value: e.modelValue,
 				onChange: s
-			}, [(k(!0), b(g, null, j(a.value, (e) => (k(), b("option", {
+			}, [(A(!0), w(b, null, M(a.value, (e) => (A(), w("option", {
 				key: e.value,
 				value: e.value
-			}, N(e.label), 9, ut))), 128))], 42, lt),
-			x("input", {
+			}, P(e.label), 9, dt))), 128))], 42, ut),
+			T("input", {
 				ref_key: "fileInput",
-				ref: v,
+				ref: h,
 				type: "file",
 				class: "hidden",
 				accept: ".ttf,.otf,.woff,.woff2,font/ttf,font/otf,font/woff,font/woff2",
-				onChange: C
+				onChange: _
 			}, null, 544),
-			P(i).canUpload ? (k(), b("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: m.value,
-				title: h.value ?? "上传本机字体（加入清单后可选）",
-				"data-upload-error": h.value ?? void 0,
-				onClick: S
-			}, N(m.value ? "…" : h.value ? "!" : "上传"), 9, dt)) : y("", !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)
 		]));
 	}
-}), pt = { class: "cn-color flex min-w-0 flex-1 items-center gap-1.5" }, mt = ["checked"], ht = ["value", "disabled"], gt = ["value", "disabled"], _t = "#000000", vt = /* @__PURE__ */ w({
+}), 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: {},
@@ -870,12 +923,12 @@ var st = ["value"], ct = {
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = A(n.modelValue !== null), a = A(o(n.modelValue));
-		I(() => n.modelValue, (e) => {
+		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 o(e) {
-			return e !== null && /^#[0-9a-fA-F]{6}$/.test(e) ? e : _t;
+			return e !== null && /^#[0-9a-fA-F]{6}$/.test(e) ? e : vt;
 		}
 		function s(e) {
 			let t = e.target.checked;
@@ -902,40 +955,40 @@ var st = ["value"], ct = {
 			}
 			a.value = o(t), r("change", t);
 		}
-		return (t, n) => (k(), b("span", pt, [
-			e.field.nullable ? (k(), b("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: i.value,
 				onChange: s
-			}, null, 40, mt)) : y("", !0),
-			x("input", {
-				class: O(["cn-color__swatch", P(Je)]),
+			}, null, 40, ht)) : C("", !0),
+			T("input", {
+				class: k(["cn-color__swatch", F(Ye)]),
 				type: "color",
 				value: a.value,
 				disabled: !i.value,
 				onInput: c,
 				onChange: l
-			}, null, 42, ht),
-			x("input", {
-				class: O(["cn-color__text min-w-0 flex-1", P(J)]),
+			}, null, 42, gt),
+			T("input", {
+				class: k(["cn-color__text min-w-0 flex-1", F(J)]),
 				type: "text",
 				value: e.modelValue ?? "",
 				disabled: !i.value,
 				placeholder: "无",
 				onChange: u
-			}, null, 42, gt)
+			}, null, 42, _t)
 		]));
 	}
 }), X = Symbol("canvas-image-upload");
-function yt() {
-	return T(X, null);
+function bt() {
+	return ae(X, null);
 }
 //#endregion
 //#region src/property-panel/fields/TextField.vue?vue&type=script&setup=true&lang.ts
-var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
+var xt = ["value", "placeholder"], Z = /* @__PURE__ */ D({
 	__name: "TextField",
 	props: {
 		field: {},
@@ -943,7 +996,7 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = !1, a = A(!1);
+		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;
 		}
@@ -964,8 +1017,8 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 			let t = e.target.value;
 			o(t) || r("change", t);
 		}
-		return (t, n) => (k(), b("input", {
-			class: O(["cn-field", [P(Ke), a.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,
@@ -973,19 +1026,19 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 			onCompositionstart: c,
 			onCompositionend: l,
 			onChange: u
-		}, null, 42, bt));
+		}, null, 42, xt));
 	}
-}), xt = {
+}), St = {
 	key: 0,
 	class: "flex flex-col gap-1.5"
-}, St = [
+}, Ct = [
 	"disabled",
 	"title",
 	"data-upload-error"
-], Ct = ["src"], wt = {
+], wt = ["src"], Tt = {
 	key: 2,
 	class: "relative"
-}, Tt = { class: "flex items-center gap-1.5" }, Et = /* @__PURE__ */ w({
+}, Et = { class: "flex items-center gap-1.5" }, Dt = /* @__PURE__ */ D({
 	__name: "ImageSrcField",
 	props: {
 		field: {},
@@ -995,16 +1048,16 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = yt(), a = _(() => i !== null && i.canUpload && n.dataMode !== "expression"), o = _(() => typeof n.modelValue == "string" && n.modelValue !== ""), s = _(() => n.resourceStatus === "pending" ? "装载中" : n.resourceStatus === "failed" ? "失败" : null), c = A(!1), l = A(null), u = A(null);
+		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 p(e) {
+		async function f(e) {
 			let t = e.target, n = t.files?.[0];
 			if (t.value = "", i !== null && n && !c.value) {
 				c.value = !0;
 				try {
-					let e = await i.uploadImage(await f(n));
+					let e = await i.uploadImage(await v(n));
 					e !== null && r("change", e);
 				} catch (e) {
 					l.value = e instanceof Error ? e.message : String(e);
@@ -1013,8 +1066,8 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 				}
 			}
 		}
-		return (t, n) => a.value ? (k(), b("div", xt, [
-			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: c.value,
@@ -1022,27 +1075,27 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 				"data-upload-error": l.value ?? void 0,
 				onClick: d
 			}, [
-				o.value ? (k(), b("img", {
+				o.value ? (A(), w("img", {
 					key: 0,
 					src: e.modelValue ?? void 0,
 					class: "absolute inset-0 size-full object-cover",
 					alt: ""
-				}, null, 8, Ct)) : y("", !0),
-				s.value ? (k(), b("span", {
+				}, null, 8, wt)) : C("", !0),
+				s.value ? (A(), w("span", {
 					key: 1,
-					class: O(["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"])
-				}, N(s.value), 3)) : y("", !0),
-				o.value ? y("", !0) : (k(), b("span", wt, N(c.value ? "…" : l.value ? "!" : "点击上传图片"), 1))
-			], 8, St),
-			x("input", {
+					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", {
 				ref_key: "fileInput",
 				ref: u,
 				type: "file",
 				class: "hidden",
 				accept: "image/*",
-				onChange: p
+				onChange: f
 			}, null, 544),
-			x("div", Tt, [C(Z, {
+			T("div", Et, [E(Z, {
 				class: "flex-1",
 				field: e.field,
 				"model-value": e.modelValue ?? "",
@@ -1053,14 +1106,14 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 				"field",
 				"model-value",
 				"aria-label"
-			]), o.value ? (k(), b("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: n[2] ||= (e) => r("change", "")
-			}, "清除")) : y("", !0)])
-		])) : (k(), v(Z, {
+			}, "清除")) : C("", !0)])
+		])) : (A(), S(Z, {
 			key: 1,
 			field: e.field,
 			"model-value": e.modelValue ?? "",
@@ -1073,12 +1126,12 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 			"aria-label"
 		]));
 	}
-}), Dt = [
+}), Ot = [
 	"aria-label",
 	"min",
 	"max",
 	"step"
-], Q = /* @__PURE__ */ w({
+], Q = /* @__PURE__ */ D({
 	__name: "NumberField",
 	props: {
 		field: {},
@@ -1086,8 +1139,8 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = A(String(n.modelValue)), a = A(!1);
-		I(() => n.modelValue, (e) => {
+		let n = e, r = t, i = j(String(n.modelValue)), a = j(!1);
+		L(() => n.modelValue, (e) => {
 			a.value || (i.value = String(e));
 		});
 		function o(e) {
@@ -1114,9 +1167,9 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 			let a = o(t);
 			i.value = String(a), r("change", a);
 		}
-		return (t, n) => ae((k(), b("input", {
+		return (t, n) => fe((A(), w("input", {
 			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
-			class: O(["cn-field cn-field--number", P(Y)]),
+			class: k(["cn-field cn-field--number", F(Y)]),
 			type: "number",
 			"aria-label": e.field.label,
 			min: e.field.min,
@@ -1126,9 +1179,9 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 			onFocus: n[1] ||= (e) => a.value = !0,
 			onBlur: l,
 			onChange: l
-		}, null, 42, Dt)), [[F, i.value]]);
+		}, null, 42, Ot)), [[I, i.value]]);
 	}
-}), Ot = { class: "cn-padding flex w-full min-w-0 items-center gap-1.5" }, kt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, At = /* @__PURE__ */ w({
+}), 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: {},
@@ -1136,7 +1189,7 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 	},
 	emits: ["input", "change"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { mode: i, cycle: a } = Ge(() => n.modelValue, ze), o = _(() => Le[i.value]);
+		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],
@@ -1152,18 +1205,18 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 		function l() {
 			let { from: e, to: t } = a();
 			if (t < e) {
-				let e = Be(n.modelValue, t);
-				Ve(e, n.modelValue) || r("change", e);
+				let e = Ve(n.modelValue, t);
+				He(e, n.modelValue) || r("change", e);
 			}
 		}
-		return (t, n) => (k(), b("span", Ot, [C(Qe, {
-			mode: P(i),
+		return (t, n) => (A(), w("span", kt, [E($e, {
+			mode: F(i),
 			label: "内边距",
 			onCycle: l
-		}, null, 8, ["mode"]), x("span", { class: O(["grid min-w-0 flex-1 gap-1.5", P(i) === 1 ? "grid-cols-1" : "grid-cols-2"]) }, [(k(!0), b(g, null, j(o.value, (t) => (k(), b("label", {
+		}, 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", kt, N(t.label), 1), C(Q, {
+		}, [T("span", At, P(t.label), 1), E(Q, {
 			class: "min-w-0 flex-1",
 			field: s(t),
 			"model-value": e.modelValue[t.rep],
@@ -1176,16 +1229,16 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 			"onChange"
 		])]))), 128))], 2)]));
 	}
-}), jt = { class: "grid w-full min-w-0 grid-cols-2 gap-1" }, Mt = ["title"], Nt = { class: "w-3.5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, Pt = [
+}), 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 = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], Ft = [
+], It = [
 	"aria-label",
 	"value",
 	"placeholder",
 	"title"
-], It = /* @__PURE__ */ w({
+], Lt = /* @__PURE__ */ D({
 	__name: "PairField",
 	props: {
 		field: {},
@@ -1198,16 +1251,16 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 		"sub-commit"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = _(() => n.field.items ?? []);
+		let n = e, r = t, i = x(() => n.field.items ?? []);
 		function a(e) {
 			if (!e.auto) return !1;
-			let t = G(n.modelValue, e.auto.key);
+			let t = K(n.modelValue, e.auto.key);
 			return t.ok && t.value === !0;
 		}
 		function o(e) {
 			return {
 				...e,
-				key: W(n.field, e)
+				key: U(n.field, e)
 			};
 		}
 		function s(e) {
@@ -1224,11 +1277,11 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 			r("sub-commit", s(e), !a(e), !0);
 		}
 		function u(e) {
-			let t = G(n.modelValue, e.key);
+			let t = K(n.modelValue, e.key);
 			return t.ok && typeof t.value == "number" ? t.value : 0;
 		}
 		function d(e) {
-			return n.displays?.[W(n.field, e).join(".")];
+			return n.displays?.[U(n.field, e).join(".")];
 		}
 		function f(e) {
 			let t = d(e);
@@ -1241,30 +1294,30 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 			let t = d(e);
 			return t?.preview ? "模板子树：预览盒尺寸（随行实例变化，非文档声明值）" : t === void 0 ? `${e.label}自适应：已开启` : `${e.label}自适应：布局解析值（与画布选择框同源）`;
 		}
-		return (e, t) => (k(), b("span", jt, [(k(!0), b(g, null, j(i.value, (e) => (k(), b("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", Nt, N(e.label), 1),
-			e.auto ? (k(), b("button", {
+			T("span", Pt, P(e.label), 1),
+			e.auto ? (A(), w("button", {
 				key: 0,
 				type: "button",
-				class: O(["cn-props__auto-toggle shrink-0", { "cn-props__auto-toggle--active": a(e) }]),
+				class: k(["cn-props__auto-toggle shrink-0", { "cn-props__auto-toggle--active": a(e) }]),
 				"aria-pressed": a(e),
 				title: p(e),
-				onClick: L((t) => l(e), ["prevent"])
-			}, "自", 10, Pt)) : y("", !0),
-			a(e) ? (k(), b("input", {
+				onClick: R((t) => l(e), ["prevent"])
+			}, "自", 10, Ft)) : C("", !0),
+			a(e) ? (A(), w("input", {
 				key: 2,
-				class: O(["cn-field cn-field--number min-w-0 flex-1", [P(Y), d(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: f(e),
 				placeholder: e.auto?.placeholder ?? "",
 				title: m(e)
-			}, null, 10, Ft)) : (k(), v(Q, {
+			}, null, 10, It)) : (A(), S(Q, {
 				key: 1,
 				class: "min-w-0 flex-1",
 				field: e,
@@ -1277,9 +1330,9 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 				"onInput",
 				"onChange"
 			]))
-		], 8, Mt))), 128))]));
+		], 8, Nt))), 128))]));
 	}
-}), Lt = ["value"], Rt = ["value"], zt = /* @__PURE__ */ w({
+}), Rt = ["value"], zt = ["value"], Bt = /* @__PURE__ */ D({
 	__name: "SelectField",
 	props: {
 		field: {},
@@ -1291,16 +1344,16 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 		function r(e) {
 			n("change", e.target.value);
 		}
-		return (t, n) => (k(), b("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: r
-		}, [(k(!0), b(g, null, j(e.field.domain ?? [], (e) => (k(), b("option", {
+		}, [(A(!0), w(b, null, M(e.field.domain ?? [], (e) => (A(), w("option", {
 			key: e,
 			value: e
-		}, N(e), 9, Rt))), 128))], 40, Lt));
+		}, P(e), 9, zt))), 128))], 40, Rt));
 	}
-}), Bt = ["value"], Vt = /* @__PURE__ */ w({
+}), Vt = ["value"], Ht = /* @__PURE__ */ D({
 	__name: "TextareaField",
 	props: {
 		field: {},
@@ -1322,69 +1375,69 @@ var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
 		function s(e) {
 			r = !1, n("change", e.target.value);
 		}
-		return (t, n) => (k(), b("textarea", {
-			class: O(["cn-field", P(qe)]),
+		return (t, n) => (A(), w("textarea", {
+			class: k(["cn-field", F(Je)]),
 			rows: "3",
 			value: e.modelValue,
 			onInput: i,
 			onCompositionstart: a,
 			onCompositionend: o,
 			onChange: s
-		}, null, 42, Bt));
+		}, null, 42, Vt));
 	}
-}), Ht = {
-	number: E(Q),
-	text: E(Z),
-	textarea: E(Vt),
-	color: E(vt),
-	select: E(zt),
-	boolean: E(Ie),
-	pair: E(It),
-	anchor: E(K),
-	align: E(we),
-	padding: E(At),
-	border: E(it),
-	font: E(ft),
-	imageSrc: E(Et)
+}), $ = {
+	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 Ut(e) {
-	let t = M(e.store.doc), n = M(e.store.ui.selection), r = M(e.store.ui.anchorExpanded), i = M(e.store.ui.dataSourceSchema), o = M(e.store.ui.resourceStatuses), s = e.subscribe((a) => {
-		a.scope === "doc" ? (t.value = e.store.doc, n.value = e.store.ui.selection, o.value = e.store.ui.resourceStatuses) : a.scope === "ui" && (a.branch === "selection" ? (n.value = e.store.ui.selection, e.store.closeMerge()) : a.branch === "anchorExpanded" ? r.value = e.store.ui.anchorExpanded : a.branch === "dataSourceSchema" ? i.value = e.store.ui.dataSourceSchema : a.branch === "resourceStatuses" && (o.value = e.store.ui.resourceStatuses));
+	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));
 	});
-	ee(s, !0);
-	let c = _(() => {
+	se(o, !0);
+	let s = x(() => {
 		let e = t.value, r = n.value;
-		return e && r ? a(e, r) : null;
-	}), u = _(() => t.value), f = _(() => {
-		let e = c.value, r = n.value;
-		return e && r ? ye(r, e) : t.value ? be : [];
-	}), h = _(() => {
+		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;
-	}), g = _(() => {
+	}), d = x(() => {
 		let e = i.value;
-		return e === null ? null : d(e, l(e, t.value, n.value));
-	}), v = _(() => p(m(t.value, n.value, i.value))), y = _(() => n.value?.includes("template") ?? !1);
-	function b(t) {
+		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 x(e) {
+	function g(e) {
 		if (!e.data) return !1;
-		let t = c.value;
+		let t = s.value;
 		return t !== null && "expression" in t && t.expression !== null;
 	}
-	function S(r, i, a) {
+	function ee(r, i, a) {
 		if (!t.value) return;
 		let o = n.value;
 		if (!o) {
-			w(r, i, a);
+			re(r, i, a);
 			return;
 		}
 		let s = `sel:${o.join(".")}:${r.key.join(".")}`;
 		if (r.data) {
-			if (x(r)) {
+			if (g(r)) {
 				let t = `sel:${o.join(".")}:data.expression`;
 				e.updateDataExpression(o, i, { mergeKey: t }), a && e.store.closeMerge(t);
 				return;
@@ -1394,34 +1447,34 @@ function Ut(e) {
 		}
 		e.updateSpec(o, r.key, i, { mergeKey: s }), a && e.store.closeMerge(s);
 	}
-	function C(t) {
-		let r = c.value, i = n.value;
+	function v(t) {
+		let r = s.value, i = n.value;
 		if (!r || !i || !t.data) return;
-		let a = G(r, t.key);
+		let a = K(r, t.key);
 		if (!a.ok) return;
 		let o = typeof a.value == "string" ? a.value : "";
-		x(t) ? e.updateData(i, o) : e.updateDataExpression(i, o);
+		g(t) ? e.updateData(i, o) : e.updateDataExpression(i, o);
 	}
-	function w(t, n, r) {
+	function re(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: _(() => n.value),
-		layer: c,
-		canvas: u,
-		sections: f,
-		layerBox: h,
-		isPreviewBox: y,
-		completionSource: g,
-		rowsPathSource: v,
-		resourceStatuses: _(() => o.value),
-		anchorExpanded: _(() => r.value),
-		commit: S,
-		toggleDataMode: C,
-		setAnchorExpanded: b
+		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
@@ -1434,7 +1487,7 @@ var Wt = {
 	"aria-pressed",
 	"title",
 	"onClick"
-], Kt = /* @__PURE__ */ w({
+], Kt = /* @__PURE__ */ D({
 	__name: "ValueTypeSegmented",
 	props: { mode: {} },
 	emits: ["change"],
@@ -1451,19 +1504,19 @@ var Wt = {
 		function a(e) {
 			e !== n.mode && r("change", e);
 		}
-		return (t, n) => (k(), b("span", Wt, [(k(), b(g, null, j(i, (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: O(["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: L((e) => a(t.value), ["prevent"])
-		}, N(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"
-}, $ = /* @__PURE__ */ w({
+}, Yt = /* @__PURE__ */ D({
 	__name: "PropertyField",
 	props: {
 		field: {},
@@ -1481,42 +1534,42 @@ var Wt = {
 		"sub-commit"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, i = _(() => Ht[n.field.control]), a = _(() => n.dataMode === "expression"), o = _(() => 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 = _(() => n.field.data === !0 ? "col-span-2" : ""), l = _(() => n.field.data === !0 && (n.field.control === "textarea" || n.field.control === "text" || n.field.control === "imageSrc")), d = _(() => n.field.completion === "rowsPath"), f = _(() => l.value || d.value), p = A(null), m = _(() => {
-			if (!f.value) return null;
-			let e = p.value?.$el;
+		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;
-		}), x = A(null), S = _(() => x.value?.rootEl ?? null), { popup: C, accept: w } = u({
-			target: m,
-			enabled: () => l.value && a.value && n.completion != null,
-			pairing: () => l.value && a.value,
+		}), 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: S
-		}), { popup: T, accept: E } = h({
-			target: m,
-			enabled: () => d.value && n.completion != null,
+			popupEl: m
+		}), { popup: te, accept: v } = re({
+			target: f,
+			enabled: () => l.value && n.completion != null,
 			resolve: (e) => n.completion?.(e) ?? null,
-			popupEl: S
+			popupEl: m
 		});
-		function D(e, t, n) {
+		function y(e, t, n) {
 			r("sub-commit", e, t, n);
 		}
-		return (t, n) => (k(), b(g, null, [(k(), v(ne(e.field.control === "pair" || e.field.control === "imageSrc" ? "div" : "label"), { class: O(o.value) }, {
-			default: ie(() => [
-				e.field.control === "pair" ? y("", !0) : (k(), b("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
-				}, N(e.field.label), 9, qt)),
-				e.field.data ? (k(), 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: n[0] ||= (e) => r("toggle-mode")
-				}, null, 8, ["mode"])) : y("", !0),
-				(k(), v(ne(i.value), {
+				}, null, 8, ["mode"])) : C("", !0),
+				(A(), S(le(i.value), {
 					ref_key: "controlRef",
-					ref: p,
-					class: O(["cn-prop-field__control", [s.value, { "cn-field--expression": a.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,
@@ -1524,7 +1577,7 @@ var Wt = {
 					"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: D
+					onSubCommit: y
 				}, null, 40, [
 					"class",
 					"field",
@@ -1533,54 +1586,54 @@ var Wt = {
 					"data-mode",
 					"resource-status"
 				])),
-				e.hint ? (k(), b("span", Jt, N(e.hint), 1)) : y("", !0)
+				e.hint ? (A(), w("span", Jt, P(e.hint), 1)) : C("", !0)
 			]),
 			_: 1
-		}, 8, ["class"])), l.value ? (k(), v(c, {
+		}, 8, ["class"])), c.value ? (A(), S(g, {
 			key: 0,
 			ref_key: "popupRef",
-			ref: x,
-			state: P(C),
-			onSelect: P(w)
-		}, null, 8, ["state", "onSelect"])) : d.value ? (k(), v(c, {
+			ref: p,
+			state: F(h),
+			onSelect: F(_)
+		}, null, 8, ["state", "onSelect"])) : l.value ? (A(), S(g, {
 			key: 1,
 			ref_key: "popupRef",
-			ref: x,
-			state: P(T),
-			onSelect: P(E)
-		}, null, 8, ["state", "onSelect"])) : y("", !0)], 64));
+			ref: p,
+			state: F(te),
+			onSelect: F(v)
+		}, null, 8, ["state", "onSelect"])) : C("", !0)], 64));
 	}
-}), Yt = { 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)]" }, Xt = { 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" }, Zt = { class: "flex items-center gap-2" }, Qt = { 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" }, $t = { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, en = {
+}), 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"
-}, tn = { class: "cn-props__section-title mb-2 text-[10px] font-semibold uppercase tracking-[0.16em] text-cn-muted" }, nn = { class: "flex flex-col gap-2" }, rn = /* @__PURE__ */ w({
+}, 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 t = e, n = Ut(t.editor);
-		te(X, {
+		ce(X, {
 			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 = _(() => n.layer.value !== null), a = _(() => {
+		let i = x(() => n.layer.value !== null), a = x(() => {
 			let e = n.layer.value;
 			return e ? e.type : n.canvas.value ? "Canvas" : "—";
 		});
 		function o(e) {
-			let t = G(e, ["expression"]);
+			let t = K(e, ["expression"]);
 			return t.ok && t.value !== null ? "expression" : "static";
 		}
-		let s = _(() => {
+		let s = x(() => {
 			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 = G(e, a.key);
+					let s = K(e, a.key);
 					s.ok && n.push({
 						key: `${t}:${a.key.join(".")}`,
 						field: a,
@@ -1596,14 +1649,14 @@ var Wt = {
 				});
 			}
 			return a;
-		}), c = _(() => {
+		}), 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[W(r, t).join(".")] = {
+				a !== void 0 && (e[U(r, t).join(".")] = {
 					value: a,
 					preview: n.isPreviewBox.value
 				});
@@ -1613,28 +1666,28 @@ var Wt = {
 		function l() {
 			n.setAnchorExpanded(!n.anchorExpanded.value);
 		}
-		return (e, t) => (k(), b("aside", Yt, [
-			x("header", Xt, [x("div", Zt, [x("span", Qt, [t[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), S(" " + N(a.value), 1)]), x("span", $t, N(i.value ? "图层属性" : "画布属性"), 1)])]),
-			s.value.length === 0 ? (k(), b("p", en, " 打开文档后可编辑属性 ")) : y("", !0),
-			(k(!0), b(g, null, j(s.value, (e) => (k(), b("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", tn, N(e.title), 1), x("div", nn, [(k(!0), b(g, null, j(e.fields, (e) => (k(), b(g, { key: e.key }, [e.field.control === "anchor" ? (k(), v(K, {
+			}, [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: P(n).anchorExpanded.value,
-				onChange: (t) => P(n).commit(e.field, t, !0),
+				expanded: F(n).anchorExpanded.value,
+				onChange: (t) => F(n).commit(e.field, t, !0),
 				onToggle: l
 			}, null, 8, [
 				"field",
 				"model-value",
 				"expanded",
 				"onChange"
-			])) : (k(), v($, {
+			])) : (A(), S(Yt, {
 				key: 1,
 				field: e.field,
 				value: e.value,
@@ -1643,10 +1696,10 @@ var Wt = {
 				completion: r(e.field),
 				displays: c.value,
 				"resource-status": e.resourceStatus,
-				onInput: (t) => P(n).commit(e.field, t, !1),
-				onChange: (t) => P(n).commit(e.field, t, !0),
-				onToggleMode: (t) => P(n).toggleDataMode(e.field),
-				onSubCommit: P(n).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",
@@ -1664,4 +1717,4 @@ var Wt = {
 	}
 });
 //#endregion
-export { X as a, ot as c, ye as d, H as f, Ht as i, be as l, G as m, $ as n, yt as o, U as p, Ut as r, at as s, rn as t, V 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 };