@hankchen/canvas-editor-vue 0.0.0-stage → 0.1.0

package/dist/property-panel-jt_rsTVW.js

@@ -0,0 +1,1719 @@
+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 };