@hankchen/canvas-editor-vue 0.1.1 → 0.1.2

package/dist/property-panel-jt_rsTVW.js

@@ -1,1719 +0,0 @@
-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({
-	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"]
-}), _e = A({
-	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"]
-}), ve = A({
-	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 ye(e, t) {
-	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;
-	}
-	return !1;
-}
-//#endregion
-//#region src/property-panel/fieldSchema.ts
-var be = "当前层内容未绘制，padding 不影响预览", I = {
-	title: "位置与尺寸",
-	fields: [
-		{
-			key: ["position"],
-			label: "位置",
-			control: "pair",
-			items: [{
-				key: ["x"],
-				label: "X",
-				control: "number",
-				integer: !0
-			}, {
-				key: ["y"],
-				label: "Y",
-				control: "number",
-				integer: !0
-			}]
-		},
-		{
-			key: ["shape"],
-			label: "尺寸",
-			control: "pair",
-			items: [{
-				key: ["width"],
-				label: "宽",
-				control: "number",
-				integer: !0,
-				min: 0,
-				auto: {
-					key: ["autoWidth"],
-					placeholder: "自动"
-				}
-			}, {
-				key: ["height"],
-				label: "高",
-				control: "number",
-				integer: !0,
-				min: 0,
-				auto: { key: ["autoHeight"] }
-			}]
-		},
-		{
-			key: ["angle"],
-			label: "旋转角",
-			control: "number",
-			integer: !0,
-			visibleWhen: (e) => e.type === "TextLayer"
-		},
-		{
-			key: ["position", "anchor"],
-			label: "锚点",
-			control: "anchor"
-		}
-	]
-}, L = {
-	title: "对齐",
-	fields: [{
-		key: ["align", "horizontal"],
-		label: "水平",
-		control: "align",
-		domain: M
-	}, {
-		key: ["align", "vertical"],
-		label: "垂直",
-		control: "align",
-		domain: N
-	}]
-}, R = {
-	title: "形状",
-	fields: [
-		{
-			key: ["shape", "backgroundColor"],
-			label: "背景色",
-			control: "color",
-			nullable: !0
-		},
-		{
-			key: ["shape", "lineHeight"],
-			label: "行高倍数",
-			control: "number",
-			step: .1,
-			min: 0,
-			visibleWhen: (e) => e.type === "TextLayer"
-		},
-		{
-			key: ["shape", "padding"],
-			label: "内边距",
-			control: "padding",
-			title: "内边距作用于内容盒，不改变图层尺寸",
-			hint: (e, t) => ye(e, t) ? be : null
-		},
-		{
-			key: ["shape", "border"],
-			label: "边框",
-			control: "border"
-		}
-	]
-}, xe = {
-	ImageLayer: [
-		I,
-		L,
-		R,
-		{
-			title: "图片",
-			fields: [{
-				key: ["src"],
-				label: "资源地址",
-				control: "imageSrc",
-				data: !0
-			}]
-		}
-	],
-	TextLayer: [
-		I,
-		L,
-		R,
-		{
-			title: "文本",
-			fields: [
-				{
-					key: ["text"],
-					label: "内容",
-					control: "textarea",
-					data: !0
-				},
-				{
-					key: ["font"],
-					label: "字体",
-					control: "font"
-				},
-				{
-					key: ["fontSize"],
-					label: "字号",
-					control: "number",
-					integer: !0,
-					min: 1
-				},
-				{
-					key: ["fontColor"],
-					label: "字色",
-					control: "color"
-				},
-				{
-					key: ["autowrap"],
-					label: "自动换行",
-					control: "boolean"
-				}
-			]
-		}
-	],
-	QrCodeLayer: [
-		I,
-		L,
-		R,
-		{
-			title: "二维码",
-			fields: [{
-				key: ["value"],
-				label: "内容",
-				control: "text",
-				data: !0
-			}]
-		}
-	],
-	TableLayer: [
-		I,
-		L,
-		R,
-		{
-			title: "数据",
-			fields: [{
-				key: ["rowsPath"],
-				label: "数据行路径",
-				control: "text",
-				placeholder: "如 order.items",
-				nonEmpty: !0,
-				completion: "rowsPath",
-				visibleWhen: (e) => e.type === "TableLayer" && e.template !== null
-			}]
-		}
-	],
-	TableRowLayer: [
-		I,
-		L,
-		R
-	],
-	TableCellLayer: [
-		I,
-		L,
-		R
-	],
-	TableRowTemplate: [{
-		title: "行模板（行宽由表宽同步）",
-		fields: [{
-			key: ["shape", "height"],
-			label: "高",
-			control: "number",
-			integer: !0,
-			min: 0
-		}, {
-			key: ["shape", "autoHeight"],
-			label: "高自适应",
-			control: "boolean"
-		}]
-	}]
-};
-function Se(e) {
-	return xe[e] ?? [];
-}
-function Ce(e) {
-	if (e[e.length - 1] === "content") return C(e) ? "templateContent" : "content";
-	let t = e[e.length - 2];
-	return t === "rows" ? "row" : t === "cells" ? "cell" : "root";
-}
-var we = {
-	root: [],
-	cell: [],
-	row: ["shape.width", "shape.autoWidth"],
-	content: [
-		"shape.width",
-		"shape.autoWidth",
-		"shape.height",
-		"shape.autoHeight"
-	],
-	templateContent: ["shape.width", "shape.autoWidth"]
-};
-function z(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)) {
-		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)));
-				e.length > 0 && i.push({
-					...r,
-					items: e
-				});
-				continue;
-			}
-			n.has(r.key.join(".")) || (!r.visibleWhen || r.visibleWhen(t)) && i.push(r);
-		}
-		i.length > 0 && r.push({
-			title: e.title,
-			fields: i
-		});
-	}
-	return r;
-}
-var B = [{
-	title: "画布",
-	fields: [{
-		key: ["width"],
-		label: "宽",
-		control: "number",
-		integer: !0,
-		min: 1
-	}, {
-		key: ["height"],
-		label: "高",
-		control: "number",
-		integer: !0,
-		min: 1
-	}]
-}];
-function V(e, t) {
-	let n = e;
-	for (let e = 0; e < t.length; e += 1) {
-		if (typeof n != "object" || !n) return { ok: !1 };
-		n = n[t[e]];
-	}
-	return n === void 0 ? { ok: !1 } : {
-		ok: !0,
-		value: n
-	};
-}
-//#endregion
-//#region src/property-panel/fields/AlignField.vue?vue&type=script&setup=true&lang.ts
-var Ee = ["aria-label"], De = [
-	"aria-pressed",
-	"title",
-	"onClick"
-], Oe = {
-	key: 1,
-	class: "truncate px-1 text-[10px] leading-none"
-}, ke = /* @__PURE__ */ h({
-	__name: "AlignField",
-	props: {
-		field: {},
-		modelValue: {}
-	},
-	emits: ["change"],
-	setup(e, { emit: n }) {
-		let i = e, a = n, o = {
-			[M.join(".")]: {
-				left: {
-					icon: ee,
-					title: "左对齐"
-				},
-				center: {
-					icon: ne,
-					title: "居中对齐"
-				},
-				right: {
-					icon: ce,
-					title: "右对齐"
-				}
-			},
-			[N.join(".")]: {
-				top: {
-					icon: ie,
-					title: "顶对齐"
-				},
-				center: {
-					icon: ae,
-					title: "居中对齐"
-				},
-				bottom: {
-					icon: te,
-					title: "底对齐"
-				}
-			}
-		}, s = S(() => {
-			let e = i.field.domain ?? [], t = o[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}`
-			}));
-		});
-		function c(e) {
-			e !== i.modelValue && a("change", e);
-		}
-		return (n, i) => (t(), p("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,
-			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, {
-			key: 0,
-			icon: n.icon
-		}, null, 8, ["icon"])) : (t(), p("span", Oe, r(n.value), 1))], 10, De))), 128))], 8, Ee));
-	}
-}), 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 = {
-	viewBox: "0 0 24 24",
-	class: "size-3.5",
-	"aria-hidden": "true"
-}, Fe = [
-	"cx",
-	"cy",
-	"r"
-], Ie = {
-	key: 0,
-	class: "mt-2 flex justify-end"
-}, Le = {
-	class: "cn-anchor grid w-[66px] shrink-0 grid-cols-3 gap-[3px]",
-	role: "group",
-	"aria-label": "九宫锚点"
-}, Re = [
-	"aria-pressed",
-	"title",
-	"onClick"
-], H = /* @__PURE__ */ h({
-	__name: "AnchorDisclosureField",
-	props: {
-		field: {},
-		modelValue: {},
-		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) => ({
-			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;
-			return e * 3 + t;
-		});
-		function d(e) {
-			s("change", e);
-		}
-		return (n, a) => (t(), p("span", Ae, [x("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", {
-			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,
-			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)]));
-	}
-}), ze = { class: "cn-bool relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center" }, Be = ["checked"], Ve = /* @__PURE__ */ h({
-	__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", {
-				ref_key: "inputRef",
-				ref: a,
-				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)
-		]));
-	}
-}), U = {
-	1: [{
-		label: "四边",
-		rep: "top",
-		sides: [
-			"top",
-			"bottom",
-			"left",
-			"right"
-		]
-	}],
-	2: [{
-		label: "上下",
-		rep: "top",
-		sides: ["top", "bottom"]
-	}, {
-		label: "左右",
-		rep: "left",
-		sides: ["left", "right"]
-	}],
-	4: [
-		{
-			label: "上",
-			rep: "top",
-			sides: ["top"]
-		},
-		{
-			label: "下",
-			rep: "bottom",
-			sides: ["bottom"]
-		},
-		{
-			label: "左",
-			rep: "left",
-			sides: ["left"]
-		},
-		{
-			label: "右",
-			rep: "right",
-			sides: ["right"]
-		}
-	]
-};
-function He(e) {
-	return e === 1 ? 2 : e === 2 ? 4 : 1;
-}
-function Ue(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) {
-	if (t === 1) {
-		let { top: t } = e;
-		return {
-			top: t,
-			bottom: t,
-			left: t,
-			right: t
-		};
-	}
-	if (t === 2) {
-		let { top: t, left: n } = e;
-		return {
-			top: t,
-			bottom: t,
-			left: n,
-			right: n
-		};
-	}
-	return e;
-}
-function Ge(e, t) {
-	return e.top === t.top && e.bottom === t.bottom && e.left === t.left && e.right === t.right;
-}
-function W(e, t) {
-	return e === null || t === null ? e === t : e.width === t.width && e.color === t.color;
-}
-function Ke(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;
-}
-function qe(e, t) {
-	let n = (e) => e === null ? null : { ...e };
-	if (t === 1) {
-		let t = n(e.top);
-		return {
-			top: t,
-			bottom: n(t),
-			left: n(t),
-			right: n(t)
-		};
-	}
-	if (t === 2) {
-		let t = n(e.top), r = n(e.left);
-		return {
-			top: t,
-			bottom: n(t),
-			left: r,
-			right: n(r)
-		};
-	}
-	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);
-}
-//#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, () => {
-		r.value = null;
-	});
-	function a() {
-		let e = i.value, t = He(e);
-		return r.value = t, {
-			from: e,
-			to: t
-		};
-	}
-	return {
-		mode: i,
-		cycle: a
-	};
-}
-//#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({
-	__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));
-		});
-		function u(e) {
-			return Math.max(0, Math.trunc(e));
-		}
-		function d(e) {
-			if (e.value.trim() === "") return null;
-			let t = Number(e.value);
-			return Number.isFinite(t) ? t : null;
-		}
-		function m(e) {
-			return e === null ? "" : String(e);
-		}
-		function h(e) {
-			let t = e.target;
-			c.value = t.value;
-			let n = d(t);
-			n !== null && o("input", u(n));
-		}
-		function g(e) {
-			let t = d(e.target);
-			if (t === null) {
-				c.value = m(a.value);
-				return;
-			}
-			let n = u(t);
-			c.value = n === 0 ? "" : String(n), o("change", n);
-		}
-		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)]),
-			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]]);
-	}
-}), $e = ["aria-label", "title"], Y = /* @__PURE__ */ h({
-	__name: "ShorthandModeButton",
-	props: {
-		mode: {},
-		label: {}
-	},
-	emits: ["cycle"],
-	setup(e, { emit: n }) {
-		let r = e, i = n, a = {
-			1: {
-				icon: ve,
-				title: "统一值"
-			},
-			2: {
-				icon: _e,
-				title: "上下/左右"
-			},
-			4: {
-				icon: ge,
-				title: "四边独立"
-			}
-		}, o = S(() => a[r.mode]), s = S(() => `${r.label}：${o.value.title}（点击切换值模式）`);
-		return (e, n) => (t(), p("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,
-			size: 12
-		}, null, 8, ["icon"])], 8, $e));
-	}
-}), 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({
-	__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;
-		}
-		function d(e) {
-			return a.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 m(e, t, n) {
-			let r = a.modelValue[e.rep]?.color ?? it;
-			f(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();
-			if (t < e) {
-				let e = qe(a.modelValue, t);
-				Je(e, a.modelValue) || o("change", e);
-			}
-		}
-		return (n, a) => (t(), p("span", et, [O(Y, {
-			mode: i(s),
-			label: "边框",
-			onCycle: _
-		}, null, 8, ["mode"]), x("span", tt, [(t(!0), p(g, null, b(l.value, (n) => (t(), p("label", {
-			key: n.rep,
-			class: "flex items-center gap-1.5"
-		}, [
-			x("span", nt, r(n.label), 1),
-			O(Qe, {
-				class: "cn-border__width",
-				value: u(n),
-				label: n.label,
-				onInput: (e) => m(n, e, !1),
-				onChange: (e) => m(n, e, !0)
-			}, null, 8, [
-				"value",
-				"label",
-				"onInput",
-				"onChange"
-			]),
-			x("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)
-			}, null, 40, rt)
-		]))), 128))])]));
-	}
-}), ot = Symbol("canvas-font-picker");
-function st() {
-	return d(ot, null);
-}
-//#endregion
-//#region src/property-panel/fields/FontField.vue?vue&type=script&setup=true&lang.ts
-var ct = ["value"], lt = {
-	key: 1,
-	class: "flex flex-1 items-center gap-1.5"
-}, ut = ["value"], dt = ["value"], ft = [
-	"disabled",
-	"title",
-	"data-upload-error"
-], pt = /* @__PURE__ */ h({
-	__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 [];
-			let e = [{
-				label: "内置默认字体",
-				value: ""
-			}];
-			for (let t of s.entries.value) t.ref !== "" && e.push({
-				label: t.label,
-				value: t.ref
-			});
-			let t = a.modelValue;
-			return t !== "" && !e.some((e) => e.value === t) && e.push({
-				label: `${l(t)}（清单外引用）`,
-				value: t
-			}), e;
-		});
-		function l(e) {
-			return e.startsWith("data:") ? "自定义字体（内联）" : e.split("/").pop() || e;
-		}
-		function u(e) {
-			o("change", e.target.value);
-		}
-		let d = !1;
-		function m(e) {
-			d || e.isComposing || o("input", e.target.value);
-		}
-		function h() {
-			d = !0;
-		}
-		function v(e) {
-			d = !1, o("input", e.target.value);
-		}
-		function y(e) {
-			d = !1, o("change", e.target.value);
-		}
-		let C = k(!1), w = k(null), T = k(null);
-		function E() {
-			w.value = null, T.value?.click();
-		}
-		async function D(e) {
-			let t = e.target, n = t.files?.[0];
-			if (t.value = "", s !== null && n && !C.value) {
-				C.value = !0;
-				try {
-					let e = await s.uploadFont(await F(n));
-					o("change", e);
-				} catch (e) {
-					w.value = e instanceof Error ? e.message : String(e);
-				} finally {
-					C.value = !1;
-				}
-			}
-		}
-		return (n, a) => i(s) === null ? (t(), p("input", {
-			key: 0,
-			class: f(["cn-field", i(J)]),
-			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)]),
-				value: e.modelValue,
-				onChange: u
-			}, [(t(!0), p(g, null, b(c.value, (e) => (t(), p("option", {
-				key: e.value,
-				value: e.value
-			}, r(e.label), 9, dt))), 128))], 42, ut),
-			x("input", {
-				ref_key: "fileInput",
-				ref: T,
-				type: "file",
-				class: "hidden",
-				accept: ".ttf,.otf,.woff,.woff2,font/ttf,font/otf,font/woff,font/woff2",
-				onChange: D
-			}, null, 544),
-			i(s).canUpload ? (t(), p("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)
-		]));
-	}
-}), 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({
-	__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));
-		});
-		function l(e) {
-			return e !== null && /^#[0-9a-fA-F]{6}$/.test(e) ? e : vt;
-		}
-		function u(e) {
-			let t = e.target.checked;
-			if (o.value = t, !t) {
-				a("change", null);
-				return;
-			}
-			let n = c.value;
-			a("change", n);
-		}
-		function d(e) {
-			let t = e.target.value;
-			c.value = t, a("input", t);
-		}
-		function m(e) {
-			let t = e.target.value;
-			c.value = t, a("change", t);
-		}
-		function h(e) {
-			let t = e.target.value.trim();
-			if (t === "") {
-				r.field.nullable && a("change", null);
-				return;
-			}
-			c.value = l(t), a("change", t);
-		}
-		return (n, r) => (t(), p("span", mt, [
-			e.field.nullable ? (t(), p("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)]),
-				type: "color",
-				value: c.value,
-				disabled: !o.value,
-				onInput: d,
-				onChange: m
-			}, null, 42, gt),
-			x("input", {
-				class: f(["cn-color__text min-w-0 flex-1", i(K)]),
-				type: "text",
-				value: e.modelValue ?? "",
-				disabled: !o.value,
-				placeholder: "无",
-				onChange: h
-			}, null, 42, _t)
-		]));
-	}
-}), X = Symbol("canvas-image-upload");
-function bt() {
-	return d(X, null);
-}
-//#endregion
-//#region src/property-panel/fields/TextField.vue?vue&type=script&setup=true&lang.ts
-var xt = ["value", "placeholder"], Z = /* @__PURE__ */ h({
-	__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;
-		}
-		function l(e) {
-			let t = e.target.value;
-			o || e.isComposing || c(t) || a("input", t);
-		}
-		function u() {
-			o = !0;
-		}
-		function d(e) {
-			o = !1;
-			let t = e.target.value;
-			c(t) || a("input", t);
-		}
-		function m(e) {
-			o = !1;
-			let t = e.target.value;
-			c(t) || a("change", t);
-		}
-		return (n, r) => (t(), p("input", {
-			class: f(["cn-field", [i(J), s.value ? "cn-field--invalid" : ""]]),
-			type: "text",
-			value: e.modelValue,
-			placeholder: e.field.placeholder,
-			onInput: l,
-			onCompositionstart: u,
-			onCompositionend: d,
-			onChange: m
-		}, null, 42, xt));
-	}
-}), St = {
-	key: 0,
-	class: "flex flex-col gap-1.5"
-}, Ct = [
-	"disabled",
-	"title",
-	"data-upload-error"
-], wt = ["src"], Tt = {
-	key: 2,
-	class: "relative"
-}, Et = { class: "flex items-center gap-1.5" }, Dt = /* @__PURE__ */ h({
-	__name: "ImageSrcField",
-	props: {
-		field: {},
-		modelValue: {},
-		dataMode: {},
-		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();
-		}
-		async function g(e) {
-			let t = e.target, n = t.files?.[0];
-			if (t.value = "", o !== null && n && !u.value) {
-				u.value = !0;
-				try {
-					let e = await o.uploadImage(await F(n));
-					e !== null && a("change", e);
-				} catch (e) {
-					d.value = e instanceof Error ? e.message : String(e);
-				} finally {
-					u.value = !1;
-				}
-			}
-		}
-		return (n, i) => s.value ? (t(), p("div", St, [
-			x("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
-			}, [
-				c.value ? (t(), p("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", {
-					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))
-			], 8, Ct),
-			x("input", {
-				ref_key: "fileInput",
-				ref: m,
-				type: "file",
-				class: "hidden",
-				accept: "image/*",
-				onChange: g
-			}, null, 544),
-			x("div", Et, [O(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)
-			}, null, 8, [
-				"field",
-				"model-value",
-				"aria-label"
-			]), c.value ? (t(), p("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, {
-			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)
-		}, null, 8, [
-			"field",
-			"model-value",
-			"aria-label"
-		]));
-	}
-}), Ot = [
-	"aria-label",
-	"min",
-	"max",
-	"step"
-], Q = /* @__PURE__ */ h({
-	__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));
-		});
-		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 d(e) {
-			if (e.value.trim() === "") return null;
-			let t = Number(e.value);
-			return Number.isFinite(t) ? t : null;
-		}
-		function m(e) {
-			let t = e.target;
-			c.value = t.value;
-			let n = d(t);
-			n !== null && o("input", u(n));
-		}
-		function h(e) {
-			let t = d(e.target);
-			if (t === null) {
-				c.value = String(a.modelValue);
-				return;
-			}
-			let n = u(t);
-			c.value = String(n), o("change", n);
-		}
-		return (r, a) => n((t(), p("input", {
-			"onUpdate:modelValue": a[0] ||= (e) => c.value = e,
-			class: f(["cn-field cn-field--number", i(q)]),
-			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]]);
-	}
-}), 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({
-	__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) {
-			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 m() {
-			let { from: e, to: t } = c();
-			if (t < e) {
-				let e = We(a.modelValue, t);
-				Ge(e, a.modelValue) || o("change", e);
-			}
-		}
-		return (n, a) => (t(), p("span", kt, [O(Y, {
-			mode: i(s),
-			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,
-			class: "flex min-w-0 items-center gap-1.5"
-		}, [x("span", At, r(n.label), 1), O(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)
-		}, null, 8, [
-			"field",
-			"model-value",
-			"onInput",
-			"onChange"
-		])]))), 128))], 2)]));
-	}
-}), Mt = { class: "grid w-full min-w-0 grid-cols-2 gap-1" }, Nt = ["title"], Pt = { class: "w-3.5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, Ft = [
-	"aria-pressed",
-	"title",
-	"onClick"
-], It = [
-	"aria-label",
-	"value",
-	"placeholder",
-	"title"
-], Lt = /* @__PURE__ */ h({
-	__name: "PairField",
-	props: {
-		field: {},
-		modelValue: {},
-		displays: {}
-	},
-	emits: [
-		"input",
-		"change",
-		"sub-commit"
-	],
-	setup(e, { emit: n }) {
-		let a = e, o = n, s = S(() => a.field.items ?? []);
-		function c(e) {
-			if (!e.auto) return !1;
-			let t = V(a.modelValue, e.auto.key);
-			return t.ok && t.value === !0;
-		}
-		function l(e) {
-			return {
-				...e,
-				key: z(a.field, e)
-			};
-		}
-		function u(e) {
-			return {
-				key: [...a.field.key, ...e.auto?.key ?? []],
-				label: `${e.label}自适应`,
-				control: "boolean"
-			};
-		}
-		function d(e, t, n) {
-			o("sub-commit", l(e), t, n);
-		}
-		function m(e) {
-			o("sub-commit", u(e), !c(e), !0);
-		}
-		function h(e) {
-			let t = V(a.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 C(e) {
-			let t = y(e);
-			return t === void 0 ? "" : String(t.value);
-		}
-		function w(e) {
-			return c(e) ? `${e.label}自适应：已开启（输入框禁用）` : `${e.label}自适应：开启后由内容决定，输入框禁用`;
-		}
-		function E(e) {
-			let t = y(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", {
-			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", {
-				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", {
-				key: 2,
-				class: f(["cn-field cn-field--number min-w-0 flex-1", [i(q), y(e)?.preview ? "cn-field--preview" : ""]]),
-				type: "number",
-				disabled: "",
-				"aria-label": e.label,
-				value: C(e),
-				placeholder: e.auto?.placeholder ?? "",
-				title: E(e)
-			}, null, 10, It)) : (t(), v(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)
-			}, null, 8, [
-				"field",
-				"model-value",
-				"onInput",
-				"onChange"
-			]))
-		], 8, Nt))), 128))]));
-	}
-}), Rt = ["value"], zt = ["value"], Bt = /* @__PURE__ */ h({
-	__name: "SelectField",
-	props: {
-		field: {},
-		modelValue: {}
-	},
-	emits: ["change"],
-	setup(e, { emit: n }) {
-		let i = n;
-		function a(e) {
-			i("change", e.target.value);
-		}
-		return (n, i) => (t(), p("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", {
-			key: e,
-			value: e
-		}, r(e), 9, zt))), 128))], 40, Rt));
-	}
-}), Vt = ["value"], Ht = /* @__PURE__ */ h({
-	__name: "TextareaField",
-	props: {
-		field: {},
-		modelValue: {}
-	},
-	emits: ["input", "change"],
-	setup(e, { emit: n }) {
-		let r = n, a = !1;
-		function o(e) {
-			let t = e.target.value;
-			a || e.isComposing || r("input", t);
-		}
-		function s() {
-			a = !0;
-		}
-		function c(e) {
-			a = !1, r("input", e.target.value);
-		}
-		function l(e) {
-			a = !1, r("change", e.target.value);
-		}
-		return (n, r) => (t(), p("textarea", {
-			class: f(["cn-field", i(Ye)]),
-			rows: "3",
-			value: e.modelValue,
-			onInput: o,
-			onCompositionstart: s,
-			onCompositionend: c,
-			onChange: l
-		}, 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)
-};
-//#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));
-	});
-	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);
-	}
-	function v(e) {
-		if (!e.data) return !1;
-		let t = l.value;
-		return t !== null && "expression" in t && t.expression !== null;
-	}
-	function y(e, i, a) {
-		if (!n.value) return;
-		let o = r.value;
-		if (!o) {
-			x(e, 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);
-				return;
-			}
-			t.updateData(o, i, { mergeKey: s }), a && t.store.closeMerge(s);
-			return;
-		}
-		t.updateSpec(o, e.key, i, { mergeKey: s }), a && t.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);
-		if (!a.ok) return;
-		let o = typeof a.value == "string" ? a.value : "";
-		v(e) ? t.updateData(i, o) : t.updateDataExpression(i, o);
-	}
-	function x(e, n, r) {
-		let i = e.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);
-	}
-	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: _
-	};
-}
-//#endregion
-//#region src/property-panel/fields/ValueTypeSegmented.vue?vue&type=script&setup=true&lang.ts
-var Wt = {
-	class: "cn-valuetype flex h-7 shrink-0 items-stretch overflow-hidden rounded-md border border-cn-field-line bg-cn-field",
-	role: "group",
-	"aria-label": "取值方式"
-}, Gt = [
-	"aria-pressed",
-	"title",
-	"onClick"
-], Kt = /* @__PURE__ */ h({
-	__name: "ValueTypeSegmented",
-	props: { mode: {} },
-	emits: ["change"],
-	setup(e, { emit: n }) {
-		let i = e, a = n, o = [{
-			value: "static",
-			label: "静态",
-			title: "静态值：输入的字面内容直接显示在画布上"
-		}, {
-			value: "expression",
-			label: "表达式",
-			title: "表达式值：内容为插值原文，画布显示解析镜像（{{路径}} / {{$index}} / {{$root.*}}）"
-		}];
-		function s(e) {
-			e !== i.mode && a("change", e);
-		}
-		return (n, i) => (t(), p("span", Wt, [(t(), p(g, null, b(o, (t, n) => x("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"]]),
-			"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))]));
-	}
-}), qt = ["title"], Jt = {
-	key: 2,
-	class: "cn-prop-field__hint col-span-2 block text-[11px] leading-4 text-cn-muted"
-}, Yt = /* @__PURE__ */ h({
-	__name: "PropertyField",
-	props: {
-		field: {},
-		value: {},
-		dataMode: {},
-		completion: { type: [Function, null] },
-		displays: {},
-		hint: {},
-		resourceStatus: {}
-	},
-	emits: [
-		"input",
-		"change",
-		"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;
-			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
-		});
-		function j(e, t, n) {
-			o("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", {
-					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, {
-					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), {
-					ref_key: "controlRef",
-					ref: x,
-					class: f(["cn-prop-field__control", [d.value, { "cn-field--expression": c.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
-				}, null, 40, [
-					"class",
-					"field",
-					"model-value",
-					"displays",
-					"data-mode",
-					"resource-status"
-				])),
-				e.hint ? (t(), p("span", Jt, r(e.hint), 1)) : _("", !0)
-			]),
-			_: 1
-		}, 8, ["class"])), m.value ? (t(), v(le, {
-			key: 0,
-			ref_key: "popupRef",
-			ref: w,
-			state: i(E),
-			onSelect: i(D)
-		}, null, 8, ["state", "onSelect"])) : h.value ? (t(), v(le, {
-			key: 1,
-			ref_key: "popupRef",
-			ref: w,
-			state: i(O),
-			onSelect: i(A)
-		}, null, 8, ["state", "onSelect"])) : _("", !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({
-	__name: "PropertyPanel",
-	props: { editor: {} },
-	setup(e) {
-		let n = e, a = $(n.editor);
-		l(X, {
-			canUpload: n.editor.canUpload,
-			uploadImage: (e) => n.editor.uploadImage(e)
-		});
-		function o(e) {
-			return e.completion === "rowsPath" ? a.rowsPathSource.value : a.completionSource.value;
-		}
-		let s = S(() => a.layer.value !== null), c = S(() => {
-			let e = a.layer.value;
-			return e ? e.type : a.canvas.value ? "Canvas" : "—";
-		});
-		function u(e) {
-			let t = V(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);
-			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
-					});
-				}
-				a.length > 0 && i.push({
-					title: o.title,
-					fields: a
-				});
-			}
-			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 e;
-		});
-		function m() {
-			a.setAnchorExpanded(!a.anchorExpanded.value);
-		}
-		return (e, n) => (t(), p("aside", Xt, [
-			x("header", Zt, [x("div", Qt, [x("span", $t, [n[0] ||= x("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", {
-				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, {
-				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
-			}, null, 8, [
-				"field",
-				"model-value",
-				"expanded",
-				"onChange"
-			])) : (t(), v(Yt, {
-				key: 1,
-				field: e.field,
-				value: e.value,
-				"data-mode": e.dataMode,
-				hint: e.hint,
-				completion: o(e.field),
-				displays: f.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
-			}, null, 8, [
-				"field",
-				"value",
-				"data-mode",
-				"hint",
-				"completion",
-				"displays",
-				"resource-status",
-				"onInput",
-				"onChange",
-				"onToggleMode",
-				"onSubCommit"
-			]))], 64))), 128))])]))), 128))
-		]));
-	}
-});
-//#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 };