@hankchen/canvas-editor-vue 0.1.0 → 0.1.2

package/dist/property-panel-Cw6T9dAQ.js

@@ -0,0 +1,1667 @@
+import { a as e, i as t, n, r, t as i } from "./dist-B6-i-hhY.js";
+import { a, r as o } from "./layerPath-uy2ywyld.js";
+import { i as s, r as c } from "./completionAnchor-CDR5YZhu.js";
+import { i as l, n as u, r as d, t as f } from "./uploadFile-BOfv8aLG.js";
+import { n as p, r as m, t as h } from "./usePathCompletion-uJ5c_gQ0.js";
+import { Fragment as g, computed as _, createBlock as v, createCommentVNode as y, createElementBlock as b, createElementVNode as x, createTextVNode as S, createVNode as C, defineComponent as w, inject as T, markRaw as E, nextTick as D, normalizeClass as O, onScopeDispose as ee, openBlock as k, provide as te, ref as A, renderList as j, resolveDynamicComponent as ne, shallowRef as M, toDisplayString as N, unref as P, vModelText as F, watch as I, watchEffect as re, withCtx as ie, withDirectives as ae, withModifiers as L } from "vue";
+import { AlignCenterHorizontal as oe, AlignCenterVertical as se, AlignEndHorizontal as ce, AlignEndVertical as le, AlignStartHorizontal as ue, AlignStartVertical as de, ChevronDown as fe, Grid2x2 as pe, Square as me, SquareSplitVertical as he } from "@lucide/vue";
+//#region ../canvas-editor/src/shared/resourceStatus.ts
+function ge(n, r) {
+	if (n.type !== "ImageLayer") return !1;
+	if (n.expression !== null || n.src === null || e(n) <= 0 || t(n) <= 0) return !0;
+	if (r !== void 0) {
+		let e = r[n.src];
+		if (e !== void 0 && e !== "done") return !0;
+	}
+	return !1;
+}
+//#endregion
+//#region src/property-panel/fieldSchema.ts
+var _e = "当前层内容未绘制，padding 不影响预览", R = {
+	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"
+		}
+	]
+}, z = {
+	title: "对齐",
+	fields: [{
+		key: ["align", "horizontal"],
+		label: "水平",
+		control: "align",
+		domain: n
+	}, {
+		key: ["align", "vertical"],
+		label: "垂直",
+		control: "align",
+		domain: r
+	}]
+}, B = {
+	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) => ge(e, t) ? _e : null
+		},
+		{
+			key: ["shape", "border"],
+			label: "边框",
+			control: "border"
+		}
+	]
+}, V = {
+	ImageLayer: [
+		R,
+		z,
+		B,
+		{
+			title: "图片",
+			fields: [{
+				key: ["src"],
+				label: "资源地址",
+				control: "imageSrc",
+				data: !0
+			}]
+		}
+	],
+	TextLayer: [
+		R,
+		z,
+		B,
+		{
+			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: [
+		R,
+		z,
+		B,
+		{
+			title: "二维码",
+			fields: [{
+				key: ["value"],
+				label: "内容",
+				control: "text",
+				data: !0
+			}]
+		}
+	],
+	TableLayer: [
+		R,
+		z,
+		B,
+		{
+			title: "数据",
+			fields: [{
+				key: ["rowsPath"],
+				label: "数据行路径",
+				control: "text",
+				placeholder: "如 order.items",
+				nonEmpty: !0,
+				completion: "rowsPath",
+				visibleWhen: (e) => e.type === "TableLayer" && e.template !== null
+			}]
+		}
+	],
+	TableRowLayer: [
+		R,
+		z,
+		B
+	],
+	TableCellLayer: [
+		R,
+		z,
+		B
+	],
+	TableRowTemplate: [{
+		title: "行模板（行宽由表宽同步）",
+		fields: [{
+			key: ["shape", "height"],
+			label: "高",
+			control: "number",
+			integer: !0,
+			min: 0
+		}, {
+			key: ["shape", "autoHeight"],
+			label: "高自适应",
+			control: "boolean"
+		}]
+	}]
+};
+function H(e) {
+	return V[e] ?? [];
+}
+function U(e) {
+	if (e[e.length - 1] === "content") return o(e) ? "templateContent" : "content";
+	let t = e[e.length - 2];
+	return t === "rows" ? "row" : t === "cells" ? "cell" : "root";
+}
+var ve = {
+	root: [],
+	cell: [],
+	row: ["shape.width", "shape.autoWidth"],
+	content: [
+		"shape.width",
+		"shape.autoWidth",
+		"shape.height",
+		"shape.autoHeight"
+	],
+	templateContent: ["shape.width", "shape.autoWidth"]
+};
+function W(e, t) {
+	return [...e.key, ...t.key];
+}
+function ye(e, t) {
+	let n = new Set(ve[U(e)]), r = [];
+	for (let e of H(t.type)) {
+		let i = [];
+		for (let r of e.fields) {
+			if (r.items) {
+				let e = r.items.filter((e) => !n.has(W(r, e).join(".")) && (!e.visibleWhen || e.visibleWhen(t)));
+				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 be = [{
+	title: "画布",
+	fields: [{
+		key: ["width"],
+		label: "宽",
+		control: "number",
+		integer: !0,
+		min: 1
+	}, {
+		key: ["height"],
+		label: "高",
+		control: "number",
+		integer: !0,
+		min: 1
+	}]
+}];
+function G(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 xe = ["aria-label"], Se = [
+	"aria-pressed",
+	"title",
+	"onClick"
+], Ce = {
+	key: 1,
+	class: "truncate px-1 text-[10px] leading-none"
+}, we = /* @__PURE__ */ w({
+	__name: "AlignField",
+	props: {
+		field: {},
+		modelValue: {}
+	},
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let i = e, a = t, o = {
+			[n.join(".")]: {
+				left: {
+					icon: de,
+					title: "左对齐"
+				},
+				center: {
+					icon: se,
+					title: "居中对齐"
+				},
+				right: {
+					icon: le,
+					title: "右对齐"
+				}
+			},
+			[r.join(".")]: {
+				top: {
+					icon: ue,
+					title: "顶对齐"
+				},
+				center: {
+					icon: oe,
+					title: "居中对齐"
+				},
+				bottom: {
+					icon: ce,
+					title: "底对齐"
+				}
+			}
+		}, c = _(() => {
+			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 l(e) {
+			e !== i.modelValue && a("change", e);
+		}
+		return (t, n) => (k(), b("span", {
+			class: "cn-align flex h-7 min-w-0 flex-1 overflow-hidden rounded-md border border-cn-field-line bg-cn-field",
+			role: "group",
+			"aria-label": e.field.label
+		}, [(k(!0), b(g, null, j(c.value, (t, n) => (k(), b("button", {
+			key: t.value,
+			type: "button",
+			class: O(["cn-align__option flex min-w-0 flex-1 items-center justify-center p-0 transition-colors duration-100 focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cn-accent/40", [n > 0 ? "border-l border-cn-field-line" : "", t.value === e.modelValue ? "cn-align__option--active bg-cn-accent-soft text-cn-accent" : "text-cn-muted hover:text-cn-fg"]]),
+			"aria-pressed": t.value === e.modelValue,
+			title: t.title,
+			onClick: L((e) => l(t.value), ["prevent"])
+		}, [t.icon ? (k(), v(s, {
+			key: 0,
+			icon: t.icon
+		}, null, 8, ["icon"])) : (k(), b("span", Ce, N(t.value), 1))], 10, Se))), 128))], 8, xe));
+	}
+}), Te = { class: "block" }, Ee = ["aria-expanded", "title"], De = { class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted" }, Oe = { class: "flex shrink-0 items-center gap-1.5" }, ke = {
+	viewBox: "0 0 24 24",
+	class: "size-3.5",
+	"aria-hidden": "true"
+}, Ae = [
+	"cx",
+	"cy",
+	"r"
+], je = {
+	key: 0,
+	class: "mt-2 flex justify-end"
+}, Me = {
+	class: "cn-anchor grid w-[66px] shrink-0 grid-cols-3 gap-[3px]",
+	role: "group",
+	"aria-label": "九宫锚点"
+}, Ne = [
+	"aria-pressed",
+	"title",
+	"onClick"
+], K = /* @__PURE__ */ w({
+	__name: "AnchorDisclosureField",
+	props: {
+		field: {},
+		modelValue: {},
+		expanded: { type: Boolean }
+	},
+	emits: ["change", "toggle"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, a = E(i), o = Array.from({ length: 9 }, (e, t) => ({
+			index: t,
+			cx: 4 + t % 3 * 8,
+			cy: 4 + Math.floor(t / 3) * 8
+		})), c = _(() => {
+			let e = n.modelValue.includes("top") ? 0 : n.modelValue.includes("bottom") ? 2 : 1, t = n.modelValue.includes("left") ? 0 : n.modelValue.includes("right") ? 2 : 1;
+			return e * 3 + t;
+		});
+		function l(e) {
+			r("change", e);
+		}
+		return (t, n) => (k(), b("span", Te, [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: n[0] ||= (e) => r("toggle")
+		}, [x("span", De, N(e.field.label), 1), x("span", Oe, [(k(), b("svg", ke, [(k(!0), b(g, null, j(P(o), (e) => (k(), b("circle", {
+			key: e.index,
+			cx: e.cx,
+			cy: e.cy,
+			r: e.index === c.value ? 3.2 : 2.2,
+			class: O(e.index === c.value ? "fill-cn-accent" : "fill-cn-muted/35")
+		}, null, 10, Ae))), 128))])), C(s, {
+			icon: P(fe),
+			class: O(["text-cn-muted transition-transform duration-150", { "rotate-180": e.expanded }])
+		}, null, 8, ["icon", "class"])])], 8, Ee), e.expanded ? (k(), b("span", je, [x("span", Me, [(k(!0), b(g, null, j(P(a), (t) => (k(), b("button", {
+			key: t,
+			type: "button",
+			class: O(["cn-anchor__cell relative aspect-square min-w-0 rounded-[4px] border p-0 transition-colors duration-100", t === e.modelValue ? "cn-anchor__cell--active border-cn-accent bg-cn-accent shadow-[0_0_8px_rgba(56,189,248,0.35)]" : "border-cn-field-line bg-cn-field hover:border-cn-muted/50"]),
+			"aria-pressed": t === e.modelValue,
+			title: t,
+			onClick: (e) => l(t)
+		}, null, 10, Ne))), 128))])])) : y("", !0)]));
+	}
+}), Pe = { class: "cn-bool relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center" }, Fe = ["checked"], Ie = /* @__PURE__ */ w({
+	__name: "BooleanField",
+	props: {
+		field: {},
+		modelValue: { type: Boolean }
+	},
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = A(null);
+		async function a(e) {
+			r("change", e.target.checked), await D(), i.value && (i.value.checked = n.modelValue);
+		}
+		return re(() => {
+			i.value && (i.value.checked = n.modelValue);
+		}), (t, n) => (k(), b("label", Pe, [
+			x("input", {
+				ref_key: "inputRef",
+				ref: i,
+				class: "cn-bool__input peer sr-only",
+				type: "checkbox",
+				checked: e.modelValue,
+				onChange: a
+			}, null, 40, Fe),
+			n[0] ||= x("span", { class: "absolute inset-0 rounded-full border border-cn-field-line bg-cn-field transition-colors duration-150 peer-checked:border-cn-accent/60 peer-checked:bg-cn-accent/30 peer-focus-visible:ring-[3px] peer-focus-visible:ring-cn-accent/20" }, null, -1),
+			n[1] ||= x("span", { class: "relative mx-0.5 size-3 rounded-full bg-cn-muted shadow-sm transition-transform duration-150 peer-checked:translate-x-3 peer-checked:bg-cn-accent" }, null, -1)
+		]));
+	}
+}), Le = {
+	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 Re(e) {
+	return e === 1 ? 2 : e === 2 ? 4 : 1;
+}
+function ze(e) {
+	return e.top === e.bottom && e.bottom === e.left && e.left === e.right ? 1 : e.top === e.bottom && e.left === e.right ? 2 : 4;
+}
+function Be(e, t) {
+	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 Ve(e, t) {
+	return e.top === t.top && e.bottom === t.bottom && e.left === t.left && e.right === t.right;
+}
+function q(e, t) {
+	return e === null || t === null ? e === t : e.width === t.width && e.color === t.color;
+}
+function He(e) {
+	let { top: t, bottom: n, left: r, right: i } = e;
+	return t === null && n === null && r === null && i === null || t !== null && q(t, n) && q(t, r) && q(t, i) ? 1 : q(t, n) && q(r, i) ? 2 : 4;
+}
+function Ue(e, t) {
+	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 We(e, t) {
+	return q(e.top, t.top) && q(e.bottom, t.bottom) && q(e.left, t.left) && q(e.right, t.right);
+}
+//#endregion
+//#region src/property-panel/useShorthandMode.ts
+function Ge(e, t) {
+	let n = _(() => t(e())), r = A(null), i = _(() => r.value ?? n.value);
+	I(e, () => {
+		r.value = null;
+	});
+	function a() {
+		let e = i.value, t = Re(e);
+		return r.value = t, {
+			from: e,
+			to: t
+		};
+	}
+	return {
+		mode: i,
+		cycle: a
+	};
+}
+//#endregion
+//#region src/property-panel/controlStyles.ts
+var J = "h-7 flex-1 w-full min-w-0 rounded-md border border-cn-field-line bg-cn-field text-[11.5px] leading-none text-cn-fg outline-none transition-[border-color,box-shadow,background-color] duration-100 placeholder:text-cn-muted/60 hover:border-cn-muted/40 focus:border-cn-accent/70 focus:ring-[3px] focus:ring-cn-accent/15 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-cn-field-line", Y = `${J} text-right font-mono tabular-nums`, Ke = J, qe = "w-full flex-1 min-w-0 resize-y rounded-md border border-cn-field-line bg-cn-field px-2 py-1.5 text-[11.5px] leading-5 text-cn-fg outline-none transition-[border-color,box-shadow] duration-100 placeholder:text-cn-muted/60 hover:border-cn-muted/40 focus:border-cn-accent/70 focus:ring-[3px] focus:ring-cn-accent/15 disabled:cursor-not-allowed disabled:opacity-40", Je = "size-7 shrink-0 cursor-pointer self-center rounded-md border border-cn-field-line bg-cn-field p-0.5 transition-colors hover:border-cn-muted/40 disabled:cursor-not-allowed disabled:opacity-40", Ye = ["aria-label"], Xe = /* @__PURE__ */ w({
+	__name: "BorderWidthInput",
+	props: {
+		value: {},
+		label: {}
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = A(n.value === null ? "" : String(n.value)), a = A(!1);
+		I(() => n.value, (e) => {
+			a.value || (i.value = e === null ? "" : String(e));
+		});
+		function o(e) {
+			return Math.max(0, Math.trunc(e));
+		}
+		function s(e) {
+			if (e.value.trim() === "") return null;
+			let t = Number(e.value);
+			return Number.isFinite(t) ? t : null;
+		}
+		function c(e) {
+			return e === null ? "" : String(e);
+		}
+		function l(e) {
+			let t = e.target;
+			i.value = t.value;
+			let n = s(t);
+			n !== null && r("input", o(n));
+		}
+		function u(e) {
+			let t = s(e.target);
+			if (t === null) {
+				i.value = c(n.value);
+				return;
+			}
+			let a = o(t);
+			i.value = a === 0 ? "" : String(a), r("change", a);
+		}
+		return (t, n) => ae((k(), b("input", {
+			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
+			class: O(["cn-field cn-field--number min-w-0 flex-1", P(Y)]),
+			type: "number",
+			"aria-label": e.label,
+			min: 0,
+			step: "1",
+			placeholder: "无边框",
+			title: "宽度归 0 即关闭该边",
+			onInput: l,
+			onFocus: n[1] ||= (e) => a.value = !0,
+			onBlur: u,
+			onChange: u
+		}, null, 42, Ye)), [[F, i.value]]);
+	}
+}), Ze = ["aria-label", "title"], Qe = /* @__PURE__ */ w({
+	__name: "ShorthandModeButton",
+	props: {
+		mode: {},
+		label: {}
+	},
+	emits: ["cycle"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = {
+			1: {
+				icon: me,
+				title: "统一值"
+			},
+			2: {
+				icon: he,
+				title: "上下/左右"
+			},
+			4: {
+				icon: pe,
+				title: "四边独立"
+			}
+		}, a = _(() => i[n.mode]), o = _(() => `${n.label}：${a.value.title}（点击切换值模式）`);
+		return (e, t) => (k(), b("button", {
+			type: "button",
+			class: "cn-props__mode-toggle shrink-0",
+			"aria-label": o.value,
+			title: o.value,
+			onClick: t[0] ||= L((e) => r("cycle"), ["prevent"])
+		}, [C(s, {
+			icon: a.value.icon,
+			size: 12
+		}, null, 8, ["icon"])], 8, Ze));
+	}
+}), $e = { class: "cn-border flex w-full min-w-0 items-center gap-1" }, et = { class: "grid min-w-0 flex-1 gap-1 grid-cols-1" }, tt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, nt = [
+	"value",
+	"disabled",
+	"onInput",
+	"onChange"
+], rt = "#000000", it = /* @__PURE__ */ w({
+	__name: "BorderField",
+	props: {
+		field: {},
+		modelValue: {}
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, { mode: i, cycle: a } = Ge(() => n.modelValue, He), o = _(() => Le[i.value]);
+		function s(e) {
+			return n.modelValue[e.rep]?.width ?? null;
+		}
+		function c(e) {
+			return n.modelValue[e.rep]?.color ?? rt;
+		}
+		function l(e, t, i) {
+			let a = { ...n.modelValue };
+			for (let n of e.sides) a[n] = t === null ? null : { ...t };
+			r(i ? "change" : "input", a);
+		}
+		function u(e, t, r) {
+			let i = n.modelValue[e.rep]?.color ?? rt;
+			l(e, t <= 0 ? null : {
+				width: t,
+				color: i
+			}, r);
+		}
+		function d(e, t, r) {
+			let i = n.modelValue[e.rep];
+			if (!i) return;
+			let a = t.target.value.trim();
+			a !== "" && l(e, {
+				width: i.width,
+				color: a
+			}, r);
+		}
+		function f() {
+			let { from: e, to: t } = a();
+			if (t < e) {
+				let e = Ue(n.modelValue, t);
+				We(e, n.modelValue) || r("change", e);
+			}
+		}
+		return (t, n) => (k(), b("span", $e, [C(Qe, {
+			mode: P(i),
+			label: "边框",
+			onCycle: f
+		}, null, 8, ["mode"]), x("span", et, [(k(!0), b(g, null, j(o.value, (t) => (k(), b("label", {
+			key: t.rep,
+			class: "flex items-center gap-1.5"
+		}, [
+			x("span", tt, N(t.label), 1),
+			C(Xe, {
+				class: "cn-border__width",
+				value: s(t),
+				label: t.label,
+				onInput: (e) => u(t, e, !1),
+				onChange: (e) => u(t, e, !0)
+			}, null, 8, [
+				"value",
+				"label",
+				"onInput",
+				"onChange"
+			]),
+			x("input", {
+				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: c(t),
+				disabled: e.modelValue[t.rep] === null,
+				onInput: (e) => d(t, e, !1),
+				onChange: (e) => d(t, e, !0)
+			}, null, 40, nt)
+		]))), 128))])]));
+	}
+}), at = Symbol("canvas-font-picker");
+function ot() {
+	return T(at, null);
+}
+//#endregion
+//#region src/property-panel/fields/FontField.vue?vue&type=script&setup=true&lang.ts
+var st = ["value"], ct = {
+	key: 1,
+	class: "flex flex-1 items-center gap-1.5"
+}, lt = ["value"], ut = ["value"], dt = [
+	"disabled",
+	"title",
+	"data-upload-error"
+], ft = /* @__PURE__ */ w({
+	__name: "FontField",
+	props: {
+		field: {},
+		modelValue: {}
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = ot(), a = _(() => {
+			if (i === null) return [];
+			let e = [{
+				label: "内置默认字体",
+				value: ""
+			}];
+			for (let t of i.entries.value) t.ref !== "" && e.push({
+				label: t.label,
+				value: t.ref
+			});
+			let t = n.modelValue;
+			return t !== "" && !e.some((e) => e.value === t) && e.push({
+				label: `${o(t)}（清单外引用）`,
+				value: t
+			}), e;
+		});
+		function o(e) {
+			return e.startsWith("data:") ? "自定义字体（内联）" : e.split("/").pop() || e;
+		}
+		function s(e) {
+			r("change", e.target.value);
+		}
+		let c = !1;
+		function l(e) {
+			c || e.isComposing || r("input", e.target.value);
+		}
+		function u() {
+			c = !0;
+		}
+		function d(e) {
+			c = !1, r("input", e.target.value);
+		}
+		function p(e) {
+			c = !1, r("change", e.target.value);
+		}
+		let m = A(!1), h = A(null), v = A(null);
+		function S() {
+			h.value = null, v.value?.click();
+		}
+		async function C(e) {
+			let t = e.target, n = t.files?.[0];
+			if (t.value = "", i !== null && n && !m.value) {
+				m.value = !0;
+				try {
+					let e = await i.uploadFont(await f(n));
+					r("change", e);
+				} catch (e) {
+					h.value = e instanceof Error ? e.message : String(e);
+				} finally {
+					m.value = !1;
+				}
+			}
+		}
+		return (t, n) => P(i) === null ? (k(), b("input", {
+			key: 0,
+			class: O(["cn-field", P(Ke)]),
+			type: "text",
+			value: e.modelValue,
+			onInput: l,
+			onCompositionstart: u,
+			onCompositionend: d,
+			onChange: p
+		}, null, 42, st)) : (k(), b("div", ct, [
+			x("select", {
+				class: O(["cn-field cn-select", P(J)]),
+				value: e.modelValue,
+				onChange: s
+			}, [(k(!0), b(g, null, j(a.value, (e) => (k(), b("option", {
+				key: e.value,
+				value: e.value
+			}, N(e.label), 9, ut))), 128))], 42, lt),
+			x("input", {
+				ref_key: "fileInput",
+				ref: v,
+				type: "file",
+				class: "hidden",
+				accept: ".ttf,.otf,.woff,.woff2,font/ttf,font/otf,font/woff,font/woff2",
+				onChange: C
+			}, null, 544),
+			P(i).canUpload ? (k(), b("button", {
+				key: 0,
+				type: "button",
+				class: "h-7 shrink-0 rounded-md border border-cn-field-line bg-cn-field px-2 text-[11px] leading-none text-cn-fg transition-colors duration-100 hover:border-cn-muted/40 disabled:cursor-not-allowed disabled:opacity-40",
+				disabled: m.value,
+				title: h.value ?? "上传本机字体（加入清单后可选）",
+				"data-upload-error": h.value ?? void 0,
+				onClick: S
+			}, N(m.value ? "…" : h.value ? "!" : "上传"), 9, dt)) : y("", !0)
+		]));
+	}
+}), pt = { class: "cn-color flex min-w-0 flex-1 items-center gap-1.5" }, mt = ["checked"], ht = ["value", "disabled"], gt = ["value", "disabled"], _t = "#000000", vt = /* @__PURE__ */ w({
+	__name: "ColorField",
+	props: {
+		field: {},
+		modelValue: {}
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = A(n.modelValue !== null), a = A(o(n.modelValue));
+		I(() => n.modelValue, (e) => {
+			i.value = e !== null, i.value && (a.value = o(e));
+		});
+		function o(e) {
+			return e !== null && /^#[0-9a-fA-F]{6}$/.test(e) ? e : _t;
+		}
+		function s(e) {
+			let t = e.target.checked;
+			if (i.value = t, !t) {
+				r("change", null);
+				return;
+			}
+			let n = a.value;
+			r("change", n);
+		}
+		function c(e) {
+			let t = e.target.value;
+			a.value = t, r("input", t);
+		}
+		function l(e) {
+			let t = e.target.value;
+			a.value = t, r("change", t);
+		}
+		function u(e) {
+			let t = e.target.value.trim();
+			if (t === "") {
+				n.field.nullable && r("change", null);
+				return;
+			}
+			a.value = o(t), r("change", t);
+		}
+		return (t, n) => (k(), b("span", pt, [
+			e.field.nullable ? (k(), b("input", {
+				key: 0,
+				class: "cn-color__toggle size-3.5 shrink-0 cursor-pointer accent-cn-accent",
+				type: "checkbox",
+				title: "启用颜色",
+				checked: i.value,
+				onChange: s
+			}, null, 40, mt)) : y("", !0),
+			x("input", {
+				class: O(["cn-color__swatch", P(Je)]),
+				type: "color",
+				value: a.value,
+				disabled: !i.value,
+				onInput: c,
+				onChange: l
+			}, null, 42, ht),
+			x("input", {
+				class: O(["cn-color__text min-w-0 flex-1", P(J)]),
+				type: "text",
+				value: e.modelValue ?? "",
+				disabled: !i.value,
+				placeholder: "无",
+				onChange: u
+			}, null, 42, gt)
+		]));
+	}
+}), X = Symbol("canvas-image-upload");
+function yt() {
+	return T(X, null);
+}
+//#endregion
+//#region src/property-panel/fields/TextField.vue?vue&type=script&setup=true&lang.ts
+var bt = ["value", "placeholder"], Z = /* @__PURE__ */ w({
+	__name: "TextField",
+	props: {
+		field: {},
+		modelValue: {}
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = !1, a = A(!1);
+		function o(e) {
+			return n.field.nonEmpty === !0 ? e.trim() === "" ? (a.value = !0, !0) : (a.value = !1, !1) : !1;
+		}
+		function s(e) {
+			let t = e.target.value;
+			i || e.isComposing || o(t) || r("input", t);
+		}
+		function c() {
+			i = !0;
+		}
+		function l(e) {
+			i = !1;
+			let t = e.target.value;
+			o(t) || r("input", t);
+		}
+		function u(e) {
+			i = !1;
+			let t = e.target.value;
+			o(t) || r("change", t);
+		}
+		return (t, n) => (k(), b("input", {
+			class: O(["cn-field", [P(Ke), a.value ? "cn-field--invalid" : ""]]),
+			type: "text",
+			value: e.modelValue,
+			placeholder: e.field.placeholder,
+			onInput: s,
+			onCompositionstart: c,
+			onCompositionend: l,
+			onChange: u
+		}, null, 42, bt));
+	}
+}), xt = {
+	key: 0,
+	class: "flex flex-col gap-1.5"
+}, St = [
+	"disabled",
+	"title",
+	"data-upload-error"
+], Ct = ["src"], wt = {
+	key: 2,
+	class: "relative"
+}, Tt = { class: "flex items-center gap-1.5" }, Et = /* @__PURE__ */ w({
+	__name: "ImageSrcField",
+	props: {
+		field: {},
+		modelValue: {},
+		dataMode: {},
+		resourceStatus: {}
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = yt(), a = _(() => i !== null && i.canUpload && n.dataMode !== "expression"), o = _(() => typeof n.modelValue == "string" && n.modelValue !== ""), s = _(() => n.resourceStatus === "pending" ? "装载中" : n.resourceStatus === "failed" ? "失败" : null), c = A(!1), l = A(null), u = A(null);
+		function d() {
+			l.value = null, u.value?.click();
+		}
+		async function p(e) {
+			let t = e.target, n = t.files?.[0];
+			if (t.value = "", i !== null && n && !c.value) {
+				c.value = !0;
+				try {
+					let e = await i.uploadImage(await f(n));
+					e !== null && r("change", e);
+				} catch (e) {
+					l.value = e instanceof Error ? e.message : String(e);
+				} finally {
+					c.value = !1;
+				}
+			}
+		}
+		return (t, n) => a.value ? (k(), b("div", xt, [
+			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: c.value,
+				title: l.value ?? (o.value ? "点击替换图片" : "点击上传图片"),
+				"data-upload-error": l.value ?? void 0,
+				onClick: d
+			}, [
+				o.value ? (k(), b("img", {
+					key: 0,
+					src: e.modelValue ?? void 0,
+					class: "absolute inset-0 size-full object-cover",
+					alt: ""
+				}, null, 8, Ct)) : y("", !0),
+				s.value ? (k(), b("span", {
+					key: 1,
+					class: O(["cn-imagesrc__status absolute right-1 top-1 rounded bg-cn-bg-elevated/90 px-1 py-0.5 text-[10px] leading-none", e.resourceStatus === "failed" ? "text-red-400" : "text-cn-muted"])
+				}, N(s.value), 3)) : y("", !0),
+				o.value ? y("", !0) : (k(), b("span", wt, N(c.value ? "…" : l.value ? "!" : "点击上传图片"), 1))
+			], 8, St),
+			x("input", {
+				ref_key: "fileInput",
+				ref: u,
+				type: "file",
+				class: "hidden",
+				accept: "image/*",
+				onChange: p
+			}, null, 544),
+			x("div", Tt, [C(Z, {
+				class: "flex-1",
+				field: e.field,
+				"model-value": e.modelValue ?? "",
+				"aria-label": e.field.label,
+				onInput: n[0] ||= (e) => r("input", e),
+				onChange: n[1] ||= (e) => r("change", e)
+			}, null, 8, [
+				"field",
+				"model-value",
+				"aria-label"
+			]), o.value ? (k(), b("button", {
+				key: 0,
+				type: "button",
+				class: "cn-imagesrc__clear h-7 shrink-0 rounded-md border border-cn-field-line bg-cn-field px-2 text-[11px] leading-none text-cn-fg transition-colors duration-100 hover:border-cn-muted/40",
+				title: "清除图片（资源地址置空）",
+				onClick: n[2] ||= (e) => r("change", "")
+			}, "清除")) : y("", !0)])
+		])) : (k(), v(Z, {
+			key: 1,
+			field: e.field,
+			"model-value": e.modelValue ?? "",
+			"aria-label": e.field.label,
+			onInput: n[3] ||= (e) => r("input", e),
+			onChange: n[4] ||= (e) => r("change", e)
+		}, null, 8, [
+			"field",
+			"model-value",
+			"aria-label"
+		]));
+	}
+}), Dt = [
+	"aria-label",
+	"min",
+	"max",
+	"step"
+], Q = /* @__PURE__ */ w({
+	__name: "NumberField",
+	props: {
+		field: {},
+		modelValue: {}
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = A(String(n.modelValue)), a = A(!1);
+		I(() => n.modelValue, (e) => {
+			a.value || (i.value = String(e));
+		});
+		function o(e) {
+			let t = n.field.integer ? Math.trunc(e) : e;
+			return n.field.min !== void 0 && (t = Math.max(n.field.min, t)), n.field.max !== void 0 && (t = Math.min(n.field.max, t)), t;
+		}
+		function s(e) {
+			if (e.value.trim() === "") return null;
+			let t = Number(e.value);
+			return Number.isFinite(t) ? t : null;
+		}
+		function c(e) {
+			let t = e.target;
+			i.value = t.value;
+			let n = s(t);
+			n !== null && r("input", o(n));
+		}
+		function l(e) {
+			let t = s(e.target);
+			if (t === null) {
+				i.value = String(n.modelValue);
+				return;
+			}
+			let a = o(t);
+			i.value = String(a), r("change", a);
+		}
+		return (t, n) => ae((k(), b("input", {
+			"onUpdate:modelValue": n[0] ||= (e) => i.value = e,
+			class: O(["cn-field cn-field--number", P(Y)]),
+			type: "number",
+			"aria-label": e.field.label,
+			min: e.field.min,
+			max: e.field.max,
+			step: e.field.step ?? (e.field.integer ? 1 : .1),
+			onInput: c,
+			onFocus: n[1] ||= (e) => a.value = !0,
+			onBlur: l,
+			onChange: l
+		}, null, 42, Dt)), [[F, i.value]]);
+	}
+}), Ot = { class: "cn-padding flex w-full min-w-0 items-center gap-1.5" }, kt = { class: "w-5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, At = /* @__PURE__ */ w({
+	__name: "PaddingField",
+	props: {
+		field: {},
+		modelValue: {}
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, { mode: i, cycle: a } = Ge(() => n.modelValue, ze), o = _(() => Le[i.value]);
+		function s(e) {
+			return {
+				key: ["padding", e.rep],
+				label: e.label,
+				control: "number"
+			};
+		}
+		function c(e, t, i) {
+			let a = { ...n.modelValue };
+			for (let n of e.sides) a[n] = t;
+			r(i ? "change" : "input", a);
+		}
+		function l() {
+			let { from: e, to: t } = a();
+			if (t < e) {
+				let e = Be(n.modelValue, t);
+				Ve(e, n.modelValue) || r("change", e);
+			}
+		}
+		return (t, n) => (k(), b("span", Ot, [C(Qe, {
+			mode: P(i),
+			label: "内边距",
+			onCycle: l
+		}, null, 8, ["mode"]), x("span", { class: O(["grid min-w-0 flex-1 gap-1.5", P(i) === 1 ? "grid-cols-1" : "grid-cols-2"]) }, [(k(!0), b(g, null, j(o.value, (t) => (k(), b("label", {
+			key: t.rep,
+			class: "flex min-w-0 items-center gap-1.5"
+		}, [x("span", kt, N(t.label), 1), C(Q, {
+			class: "min-w-0 flex-1",
+			field: s(t),
+			"model-value": e.modelValue[t.rep],
+			onInput: (e) => c(t, e, !1),
+			onChange: (e) => c(t, e, !0)
+		}, null, 8, [
+			"field",
+			"model-value",
+			"onInput",
+			"onChange"
+		])]))), 128))], 2)]));
+	}
+}), jt = { class: "grid w-full min-w-0 grid-cols-2 gap-1" }, Mt = ["title"], Nt = { class: "w-3.5 shrink-0 select-none text-[10px] leading-none text-cn-muted" }, Pt = [
+	"aria-pressed",
+	"title",
+	"onClick"
+], Ft = [
+	"aria-label",
+	"value",
+	"placeholder",
+	"title"
+], It = /* @__PURE__ */ w({
+	__name: "PairField",
+	props: {
+		field: {},
+		modelValue: {},
+		displays: {}
+	},
+	emits: [
+		"input",
+		"change",
+		"sub-commit"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = _(() => n.field.items ?? []);
+		function a(e) {
+			if (!e.auto) return !1;
+			let t = G(n.modelValue, e.auto.key);
+			return t.ok && t.value === !0;
+		}
+		function o(e) {
+			return {
+				...e,
+				key: W(n.field, e)
+			};
+		}
+		function s(e) {
+			return {
+				key: [...n.field.key, ...e.auto?.key ?? []],
+				label: `${e.label}自适应`,
+				control: "boolean"
+			};
+		}
+		function c(e, t, n) {
+			r("sub-commit", o(e), t, n);
+		}
+		function l(e) {
+			r("sub-commit", s(e), !a(e), !0);
+		}
+		function u(e) {
+			let t = G(n.modelValue, e.key);
+			return t.ok && typeof t.value == "number" ? t.value : 0;
+		}
+		function d(e) {
+			return n.displays?.[W(n.field, e).join(".")];
+		}
+		function f(e) {
+			let t = d(e);
+			return t === void 0 ? "" : String(t.value);
+		}
+		function p(e) {
+			return a(e) ? `${e.label}自适应：已开启（输入框禁用）` : `${e.label}自适应：开启后由内容决定，输入框禁用`;
+		}
+		function m(e) {
+			let t = d(e);
+			return t?.preview ? "模板子树：预览盒尺寸（随行实例变化，非文档声明值）" : t === void 0 ? `${e.label}自适应：已开启` : `${e.label}自适应：布局解析值（与画布选择框同源）`;
+		}
+		return (e, t) => (k(), b("span", jt, [(k(!0), b(g, null, j(i.value, (e) => (k(), b("label", {
+			key: e.key.join("."),
+			class: "flex min-w-0 items-center gap-1",
+			title: e.auto ? void 0 : e.label
+		}, [
+			x("span", Nt, N(e.label), 1),
+			e.auto ? (k(), b("button", {
+				key: 0,
+				type: "button",
+				class: O(["cn-props__auto-toggle shrink-0", { "cn-props__auto-toggle--active": a(e) }]),
+				"aria-pressed": a(e),
+				title: p(e),
+				onClick: L((t) => l(e), ["prevent"])
+			}, "自", 10, Pt)) : y("", !0),
+			a(e) ? (k(), b("input", {
+				key: 2,
+				class: O(["cn-field cn-field--number min-w-0 flex-1", [P(Y), d(e)?.preview ? "cn-field--preview" : ""]]),
+				type: "number",
+				disabled: "",
+				"aria-label": e.label,
+				value: f(e),
+				placeholder: e.auto?.placeholder ?? "",
+				title: m(e)
+			}, null, 10, Ft)) : (k(), v(Q, {
+				key: 1,
+				class: "min-w-0 flex-1",
+				field: e,
+				"model-value": u(e),
+				onInput: (t) => c(e, t, !1),
+				onChange: (t) => c(e, t, !0)
+			}, null, 8, [
+				"field",
+				"model-value",
+				"onInput",
+				"onChange"
+			]))
+		], 8, Mt))), 128))]));
+	}
+}), Lt = ["value"], Rt = ["value"], zt = /* @__PURE__ */ w({
+	__name: "SelectField",
+	props: {
+		field: {},
+		modelValue: {}
+	},
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let n = t;
+		function r(e) {
+			n("change", e.target.value);
+		}
+		return (t, n) => (k(), b("select", {
+			class: "cn-select h-7 w-full min-w-0 flex-1 cursor-pointer appearance-none rounded-md border border-cn-field-line bg-cn-field py-0 pl-2 pr-6 text-[11px] leading-none text-cn-fg outline-none transition-[border-color,box-shadow] duration-100 hover:border-cn-muted/40 focus:border-cn-accent/70 focus:ring-[3px] focus:ring-cn-accent/15 disabled:cursor-not-allowed disabled:opacity-40",
+			value: e.modelValue,
+			onChange: r
+		}, [(k(!0), b(g, null, j(e.field.domain ?? [], (e) => (k(), b("option", {
+			key: e,
+			value: e
+		}, N(e), 9, Rt))), 128))], 40, Lt));
+	}
+}), Bt = ["value"], Vt = /* @__PURE__ */ w({
+	__name: "TextareaField",
+	props: {
+		field: {},
+		modelValue: {}
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: t }) {
+		let n = t, r = !1;
+		function i(e) {
+			let t = e.target.value;
+			r || e.isComposing || n("input", t);
+		}
+		function a() {
+			r = !0;
+		}
+		function o(e) {
+			r = !1, n("input", e.target.value);
+		}
+		function s(e) {
+			r = !1, n("change", e.target.value);
+		}
+		return (t, n) => (k(), b("textarea", {
+			class: O(["cn-field", P(qe)]),
+			rows: "3",
+			value: e.modelValue,
+			onInput: i,
+			onCompositionstart: a,
+			onCompositionend: o,
+			onChange: s
+		}, null, 42, Bt));
+	}
+}), Ht = {
+	number: E(Q),
+	text: E(Z),
+	textarea: E(Vt),
+	color: E(vt),
+	select: E(zt),
+	boolean: E(Ie),
+	pair: E(It),
+	anchor: E(K),
+	align: E(we),
+	padding: E(At),
+	border: E(it),
+	font: E(ft),
+	imageSrc: E(Et)
+};
+//#endregion
+//#region src/property-panel/usePropertyPanel.ts
+function Ut(e) {
+	let t = M(e.store.doc), n = M(e.store.ui.selection), r = M(e.store.ui.anchorExpanded), i = M(e.store.ui.dataSourceSchema), o = M(e.store.ui.resourceStatuses), s = e.subscribe((a) => {
+		a.scope === "doc" ? (t.value = e.store.doc, n.value = e.store.ui.selection, o.value = e.store.ui.resourceStatuses) : a.scope === "ui" && (a.branch === "selection" ? (n.value = e.store.ui.selection, e.store.closeMerge()) : a.branch === "anchorExpanded" ? r.value = e.store.ui.anchorExpanded : a.branch === "dataSourceSchema" ? i.value = e.store.ui.dataSourceSchema : a.branch === "resourceStatuses" && (o.value = e.store.ui.resourceStatuses));
+	});
+	ee(s, !0);
+	let c = _(() => {
+		let e = t.value, r = n.value;
+		return e && r ? a(e, r) : null;
+	}), u = _(() => t.value), f = _(() => {
+		let e = c.value, r = n.value;
+		return e && r ? ye(r, e) : t.value ? be : [];
+	}), h = _(() => {
+		let r = n.value;
+		return r && t.value ? e.layerBoxAt(r) : null;
+	}), g = _(() => {
+		let e = i.value;
+		return e === null ? null : d(e, l(e, t.value, n.value));
+	}), v = _(() => p(m(t.value, n.value, i.value))), y = _(() => n.value?.includes("template") ?? !1);
+	function b(t) {
+		e.store.setAnchorExpanded(t);
+	}
+	function x(e) {
+		if (!e.data) return !1;
+		let t = c.value;
+		return t !== null && "expression" in t && t.expression !== null;
+	}
+	function S(r, i, a) {
+		if (!t.value) return;
+		let o = n.value;
+		if (!o) {
+			w(r, i, a);
+			return;
+		}
+		let s = `sel:${o.join(".")}:${r.key.join(".")}`;
+		if (r.data) {
+			if (x(r)) {
+				let t = `sel:${o.join(".")}:data.expression`;
+				e.updateDataExpression(o, i, { mergeKey: t }), a && e.store.closeMerge(t);
+				return;
+			}
+			e.updateData(o, i, { mergeKey: s }), a && e.store.closeMerge(s);
+			return;
+		}
+		e.updateSpec(o, r.key, i, { mergeKey: s }), a && e.store.closeMerge(s);
+	}
+	function C(t) {
+		let r = c.value, i = n.value;
+		if (!r || !i || !t.data) return;
+		let a = G(r, t.key);
+		if (!a.ok) return;
+		let o = typeof a.value == "string" ? a.value : "";
+		x(t) ? e.updateData(i, o) : e.updateDataExpression(i, o);
+	}
+	function w(t, n, r) {
+		let i = t.key[0];
+		if (i !== "width" && i !== "height" || typeof n != "number") return;
+		let a = `canvas:${i}`;
+		e.updateCanvasProp(i, n, { mergeKey: a }), r && e.store.closeMerge(a);
+	}
+	return {
+		selection: _(() => n.value),
+		layer: c,
+		canvas: u,
+		sections: f,
+		layerBox: h,
+		isPreviewBox: y,
+		completionSource: g,
+		rowsPathSource: v,
+		resourceStatuses: _(() => o.value),
+		anchorExpanded: _(() => r.value),
+		commit: S,
+		toggleDataMode: C,
+		setAnchorExpanded: b
+	};
+}
+//#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__ */ w({
+	__name: "ValueTypeSegmented",
+	props: { mode: {} },
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = [{
+			value: "static",
+			label: "静态",
+			title: "静态值：输入的字面内容直接显示在画布上"
+		}, {
+			value: "expression",
+			label: "表达式",
+			title: "表达式值：内容为插值原文，画布显示解析镜像（{{路径}} / {{$index}} / {{$root.*}}）"
+		}];
+		function a(e) {
+			e !== n.mode && r("change", e);
+		}
+		return (t, n) => (k(), b("span", Wt, [(k(), b(g, null, j(i, (t, n) => x("button", {
+			key: t.value,
+			type: "button",
+			class: O(["cn-valuetype__option flex items-center justify-center p-0 px-1.5 text-[10px] leading-none transition-colors duration-100 focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cn-accent/40", [n > 0 ? "border-l border-cn-field-line" : "", t.value === e.mode ? "cn-valuetype__option--active bg-cn-accent-soft text-cn-accent" : "text-cn-muted hover:text-cn-fg"]]),
+			"aria-pressed": t.value === e.mode,
+			title: t.value === e.mode ? t.title : `${t.title}；点击切换`,
+			onClick: L((e) => a(t.value), ["prevent"])
+		}, N(t.label), 11, Gt)), 64))]));
+	}
+}), qt = ["title"], Jt = {
+	key: 2,
+	class: "cn-prop-field__hint col-span-2 block text-[11px] leading-4 text-cn-muted"
+}, $ = /* @__PURE__ */ w({
+	__name: "PropertyField",
+	props: {
+		field: {},
+		value: {},
+		dataMode: {},
+		completion: { type: [Function, null] },
+		displays: {},
+		hint: {},
+		resourceStatus: {}
+	},
+	emits: [
+		"input",
+		"change",
+		"toggle-mode",
+		"sub-commit"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = _(() => Ht[n.field.control]), a = _(() => n.dataMode === "expression"), o = _(() => n.field.control === "pair" ? "cn-prop-field block" : "cn-prop-field grid grid-cols-[60px_minmax(0,1fr)] items-center gap-x-2 gap-y-1.5"), s = _(() => n.field.data === !0 ? "col-span-2" : ""), l = _(() => n.field.data === !0 && (n.field.control === "textarea" || n.field.control === "text" || n.field.control === "imageSrc")), d = _(() => n.field.completion === "rowsPath"), f = _(() => l.value || d.value), p = A(null), m = _(() => {
+			if (!f.value) return null;
+			let e = p.value?.$el;
+			return e instanceof HTMLTextAreaElement || e instanceof HTMLInputElement ? e : null;
+		}), x = A(null), S = _(() => x.value?.rootEl ?? null), { popup: C, accept: w } = u({
+			target: m,
+			enabled: () => l.value && a.value && n.completion != null,
+			pairing: () => l.value && a.value,
+			resolve: (e) => n.completion?.(e) ?? null,
+			popupEl: S
+		}), { popup: T, accept: E } = h({
+			target: m,
+			enabled: () => d.value && n.completion != null,
+			resolve: (e) => n.completion?.(e) ?? null,
+			popupEl: S
+		});
+		function D(e, t, n) {
+			r("sub-commit", e, t, n);
+		}
+		return (t, n) => (k(), b(g, null, [(k(), v(ne(e.field.control === "pair" || e.field.control === "imageSrc" ? "div" : "label"), { class: O(o.value) }, {
+			default: ie(() => [
+				e.field.control === "pair" ? y("", !0) : (k(), b("span", {
+					key: 0,
+					class: "cn-prop-field__label shrink-0 select-none truncate text-[11px] leading-none text-cn-muted",
+					title: e.field.title
+				}, N(e.field.label), 9, qt)),
+				e.field.data ? (k(), v(Kt, {
+					key: 1,
+					class: "justify-self-end",
+					mode: e.dataMode ?? "static",
+					onChange: n[0] ||= (e) => r("toggle-mode")
+				}, null, 8, ["mode"])) : y("", !0),
+				(k(), v(ne(i.value), {
+					ref_key: "controlRef",
+					ref: p,
+					class: O(["cn-prop-field__control", [s.value, { "cn-field--expression": a.value }]]),
+					field: e.field,
+					"model-value": e.value,
+					displays: e.field.control === "pair" ? e.displays : void 0,
+					"data-mode": e.field.control === "imageSrc" ? e.dataMode : void 0,
+					"resource-status": e.field.control === "imageSrc" ? e.resourceStatus : void 0,
+					onInput: n[1] ||= (e) => r("input", e),
+					onChange: n[2] ||= (e) => r("change", e),
+					onSubCommit: D
+				}, null, 40, [
+					"class",
+					"field",
+					"model-value",
+					"displays",
+					"data-mode",
+					"resource-status"
+				])),
+				e.hint ? (k(), b("span", Jt, N(e.hint), 1)) : y("", !0)
+			]),
+			_: 1
+		}, 8, ["class"])), l.value ? (k(), v(c, {
+			key: 0,
+			ref_key: "popupRef",
+			ref: x,
+			state: P(C),
+			onSelect: P(w)
+		}, null, 8, ["state", "onSelect"])) : d.value ? (k(), v(c, {
+			key: 1,
+			ref_key: "popupRef",
+			ref: x,
+			state: P(T),
+			onSelect: P(E)
+		}, null, 8, ["state", "onSelect"])) : y("", !0)], 64));
+	}
+}), Yt = { class: "cn-props flex w-[288px] shrink-0 flex-col overflow-y-auto rounded-xl border border-cn-line bg-cn-bg text-cn-fg shadow-[0_16px_40px_-12px_rgba(2,6,23,0.55)]" }, Xt = { class: "sticky top-0 z-10 border-b border-cn-line bg-cn-bg-elevated/95 px-3.5 py-2.5 backdrop-blur-sm" }, Zt = { class: "flex items-center gap-2" }, Qt = { class: "inline-flex items-center gap-1.5 rounded border border-cn-accent/25 bg-cn-accent-soft px-1.5 py-0.5 font-mono text-[10px] leading-4 text-cn-accent" }, $t = { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, en = {
+	key: 0,
+	class: "mx-3.5 my-4 rounded-lg border border-dashed border-cn-line px-3 py-6 text-center text-[11px] leading-5 text-cn-muted"
+}, tn = { class: "cn-props__section-title mb-2 text-[10px] font-semibold uppercase tracking-[0.16em] text-cn-muted" }, nn = { class: "flex flex-col gap-2" }, rn = /* @__PURE__ */ w({
+	__name: "PropertyPanel",
+	props: { editor: {} },
+	setup(e) {
+		let t = e, n = Ut(t.editor);
+		te(X, {
+			canUpload: t.editor.canUpload,
+			uploadImage: (e) => t.editor.uploadImage(e)
+		});
+		function r(e) {
+			return e.completion === "rowsPath" ? n.rowsPathSource.value : n.completionSource.value;
+		}
+		let i = _(() => n.layer.value !== null), a = _(() => {
+			let e = n.layer.value;
+			return e ? e.type : n.canvas.value ? "Canvas" : "—";
+		});
+		function o(e) {
+			let t = G(e, ["expression"]);
+			return t.ok && t.value !== null ? "expression" : "static";
+		}
+		let s = _(() => {
+			let e = n.layer.value ?? (n.selection.value ? null : n.canvas.value);
+			if (!e) return [];
+			let t = n.selection.value?.join(".") ?? "canvas", r = n.layer.value, i = n.resourceStatuses.value, a = [];
+			for (let s of n.sections.value) {
+				let n = [];
+				for (let a of s.fields) {
+					let s = G(e, a.key);
+					s.ok && n.push({
+						key: `${t}:${a.key.join(".")}`,
+						field: a,
+						value: s.value,
+						dataMode: a.data ? o(e) : void 0,
+						hint: a.hint && r ? a.hint(r, i) ?? void 0 : void 0,
+						resourceStatus: a.control === "imageSrc" && typeof s.value == "string" && s.value !== "" ? i[s.value] : void 0
+					});
+				}
+				n.length > 0 && a.push({
+					title: s.title,
+					fields: n
+				});
+			}
+			return a;
+		}), c = _(() => {
+			let e = {}, t = n.layerBox.value, r = n.layer.value;
+			if (!t || !r) return e;
+			let i = /* @__PURE__ */ new Map();
+			if (r.shape.autoWidth && i.set("autoWidth", Math.round(t.width * 100) / 100), r.shape.autoHeight && i.set("autoHeight", Math.round(t.height * 100) / 100), i.size === 0) return e;
+			for (let t of n.sections.value) for (let r of t.fields) for (let t of r.items ?? []) {
+				let a = t.auto ? i.get(t.auto.key.join(".")) : void 0;
+				a !== void 0 && (e[W(r, t).join(".")] = {
+					value: a,
+					preview: n.isPreviewBox.value
+				});
+			}
+			return e;
+		});
+		function l() {
+			n.setAnchorExpanded(!n.anchorExpanded.value);
+		}
+		return (e, t) => (k(), b("aside", Yt, [
+			x("header", Xt, [x("div", Zt, [x("span", Qt, [t[0] ||= x("i", {
+				class: "size-1.5 rounded-full bg-cn-accent",
+				"aria-hidden": "true"
+			}, null, -1), S(" " + N(a.value), 1)]), x("span", $t, N(i.value ? "图层属性" : "画布属性"), 1)])]),
+			s.value.length === 0 ? (k(), b("p", en, " 打开文档后可编辑属性 ")) : y("", !0),
+			(k(!0), b(g, null, j(s.value, (e) => (k(), b("section", {
+				key: e.title,
+				class: "cn-props__section border-b border-cn-line/70 px-3.5 py-3 last:border-b-0"
+			}, [x("h3", tn, N(e.title), 1), x("div", nn, [(k(!0), b(g, null, j(e.fields, (e) => (k(), b(g, { key: e.key }, [e.field.control === "anchor" ? (k(), v(K, {
+				key: 0,
+				field: e.field,
+				"model-value": e.value,
+				expanded: P(n).anchorExpanded.value,
+				onChange: (t) => P(n).commit(e.field, t, !0),
+				onToggle: l
+			}, null, 8, [
+				"field",
+				"model-value",
+				"expanded",
+				"onChange"
+			])) : (k(), v($, {
+				key: 1,
+				field: e.field,
+				value: e.value,
+				"data-mode": e.dataMode,
+				hint: e.hint,
+				completion: r(e.field),
+				displays: c.value,
+				"resource-status": e.resourceStatus,
+				onInput: (t) => P(n).commit(e.field, t, !1),
+				onChange: (t) => P(n).commit(e.field, t, !0),
+				onToggleMode: (t) => P(n).toggleDataMode(e.field),
+				onSubCommit: P(n).commit
+			}, null, 8, [
+				"field",
+				"value",
+				"data-mode",
+				"hint",
+				"completion",
+				"displays",
+				"resource-status",
+				"onInput",
+				"onChange",
+				"onToggleMode",
+				"onSubCommit"
+			]))], 64))), 128))])]))), 128))
+		]));
+	}
+});
+//#endregion
+export { X as a, ot as c, ye as d, H as f, Ht as i, be as l, G as m, $ as n, yt as o, U as p, Ut as r, at as s, rn as t, V as u };