@ease-forge/designer 1.0.28 → 1.1.0

package/dist/ease-forge-designer.esm.js

@@ -1 +1,3434 @@
+import { RequestIdle as e, Typeof as t, globalThisPolyfill as n } from "@ease-forge/shared";
+import { Fragment as r, Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, getCurrentInstance as p, h as m, markRaw as h, mergeProps as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as b, onMounted as x, openBlock as S, reactive as C, ref as w, renderList as T, resolveDynamicComponent as ee, shallowReactive as te, shallowRef as E, toDisplayString as D, unref as O, vModelText as ne, vShow as k, watch as re, withCtx as A, withDirectives as j } from "vue";
+import { BlockComponent as ie, DefComponentManage as ae, childSlotName as oe, createFun as se, deepTraverseRuntimeNode as ce, emptyNodeId as le, htmlExtAttr as M, isHtmlTag as ue, materialItem as de, toPropsEventName as fe, useHtmlExtAttr as N } from "@ease-forge/runtime";
+import P from "lodash";
+import { Button as F, Collapse as pe, DatePicker as me, Empty as he, Input as ge, InputNumber as _e, Select as ve, Switch as ye, Tabs as be, Tag as xe, TextArea as Se, TimePicker as Ce, Tooltip as I, Tree as we, message as Te } from "antdv-next";
+import { ClearOutlined as Ee, DeleteOutlined as De, EditOutlined as Oe, EyeOutlined as ke, RedoOutlined as Ae, UndoOutlined as je } from "@antdv-next/icons";
+import { parseStringStyle as Me } from "@vue/shared";
+import Ne from "dayjs";
+//#region src/types/Designer.ts
+var L = /* @__PURE__ */ function(e) {
+	return e.Normal = "normal", e.DragStart = "drag_start", e.Dragging = "dragging", e.DragStop = "drag_stop", e;
+}(L || {}), Pe = /* @__PURE__ */ function(e) {
+	return e.DragDrop = "dragdrop", e.Selection = "selection", e;
+}(Pe || {}), Fe = /* @__PURE__ */ function(e) {
+	return e.PC = "pc", e.Mobile = "mobile", e;
+}(Fe || {}), Ie = /* @__PURE__ */ function(e) {
+	return e.Designer = "Designer", e.Code = "Code", e.Preview = "Preview", e;
+}(Ie || {}), R = /* @__PURE__ */ function(e) {
+	return e.top = "top", e.bottom = "bottom", e.left = "left", e.right = "right", e;
+}(R || {}), z = /* @__PURE__ */ function(e) {
+	return e.leftTop = "leftTop", e.leftBottom = "leftBottom", e.rightTop = "rightTop", e.rightBottom = "rightBottom", e;
+}(z || {}), B = class {
+	static eventType = "";
+	type;
+	data;
+	context;
+	constructor(e, t) {
+		this.type = this.constructor.eventType, this.type || console.warn(`[DesignerEvent] 事件类 "${this.constructor.name}" 未定义静态 eventType 属性`), e !== void 0 && (this.data = e), t !== void 0 && (this.context = t);
+	}
+}, Le = class extends B {
+	static eventType = "engine:mount";
+}, Re = class extends B {
+	static eventType = "engine:unmount";
+}, V = class extends B {
+	constructor(e) {
+		super(), this.data = ze(e);
+	}
+};
+function ze(e) {
+	let t = {
+		clientX: e.clientX,
+		clientY: e.clientY,
+		pageX: e.pageX,
+		pageY: e.pageY,
+		target: e.target,
+		view: e.view,
+		topClientX: e.clientX,
+		topClientY: e.clientY,
+		topPageX: e.pageX,
+		topPageY: e.pageY
+	}, { frameElement: r } = e.view || {};
+	if (r && t.view !== n) {
+		let e = r.getBoundingClientRect(), n = e.width / r.offsetWidth;
+		t.topClientX = t.clientX * n + e.x, t.topClientY = t.clientY * n + e.y, t.topPageX = t.pageX + e.x - t.view.scrollX, t.topPageY = t.pageY + e.y - t.view.scrollY;
+		let i = document.elementFromPoint(t.topPageX, t.topClientY);
+		i !== r && (t.target = i);
+	}
+	return t;
+}
+//#endregion
+//#region src/events/cursor/DragStartEvent.ts
+var Be = class extends V {
+	static eventType = "cursor:drag-start";
+	constructor(e, t) {
+		super(e), this.data.componentMetas = t;
+	}
+}, Ve = class extends V {
+	static eventType = "cursor:drag-move";
+}, He = class extends V {
+	static eventType = "cursor:drag-stop";
+}, Ue = class extends V {
+	static eventType = "cursor:mouse-click";
+}, We = class extends V {
+	static eventType = "cursor:mouse-double-click";
+}, Ge = class extends V {
+	static eventType = "cursor:mouse-move";
+}, Ke = class extends B {
+	static eventType = "keyboard:shortcut";
+	constructor(e, t) {
+		super({
+			type: e.type,
+			key: e.key.toLowerCase(),
+			ctrlKey: e.ctrlKey,
+			shiftKey: e.shiftKey,
+			altKey: e.altKey,
+			metaKey: e.metaKey,
+			pressedKeys: t,
+			rawEvent: e
+		});
+	}
+}, qe = class extends B {
+	static eventType = "designer:drag-drop";
+}, Je = class extends B {
+	static eventType = "designer:command";
+}, Ye = class {
+	subscribers = /* @__PURE__ */ new Map();
+	dispatch(e) {
+		let t = this.subscribers.get(e.type);
+		if (!t || t.length <= 0) return;
+		let n = t.slice();
+		for (let t of n) try {
+			t.fun(e);
+		} catch (t) {
+			console.error(`[EventBus] 事件 "${e.type}" 的订阅函数执行异常`, t);
+		}
+	}
+	subscribe(e, t, n = 0) {
+		let r = e.eventType;
+		if (!r) return console.error(`[EventBus] 订阅的事件类 "${e.name}" 未定义静态 eventType 属性`), () => void 0;
+		let i = this.subscribers.get(r);
+		i || (i = [], this.subscribers.set(r, i));
+		let a = {
+			priority: n,
+			fun: t
+		}, o = i.length;
+		for (let e = 0; e < i.length; e++) if (i[e].priority > n) {
+			o = e;
+			break;
+		}
+		return i.splice(o, 0, a), () => this.unsubscribe(e, t);
+	}
+	unsubscribe(e, t) {
+		let n = this.subscribers.get(e.eventType);
+		if (!n) return;
+		let r = n.findIndex((e) => e.fun === t);
+		r >= 0 && n.splice(r, 1);
+	}
+	unsubscribeAll(e) {
+		this.subscribers.delete(e.eventType);
+	}
+	clearAllSubscribe() {
+		this.subscribers.clear();
+	}
+}, Xe = class {
+	designerEngine;
+	eventbus;
+	componentManage;
+	container;
+	window;
+	constructor(e, t, n) {
+		this.designerEngine = e, this.eventbus = e.eventbus, this.componentManage = e.componentManage, this.container = t, this.window = n;
+	}
+	getContainerCursorStyle() {
+		return this.container instanceof Document ? this.container.body.style.cursor : this.container.style.cursor;
+	}
+	setContainerCursorStyle(e) {
+		this.container instanceof Document ? this.container.body.style.cursor = e : this.container.style.cursor = e;
+	}
+}, Ze = class extends Xe {
+	addEventListener(e, t, n) {
+		this.container.addEventListener(e, t, n);
+	}
+	removeEventListener(e, t, n) {
+		this.container.removeEventListener(e, t, n);
+	}
+	preventDefault = (e) => {
+		e.preventDefault();
+	};
+}, Qe = class extends Xe {
+	actived = !1;
+	effect() {
+		this.actived || (this.actived = !0, this.onEffect());
+	}
+	destroy() {
+		this.actived && (this.actived = !1, this.onDestroy());
+	}
+}, $e = /* @__PURE__ */ new Set(/* @__PURE__ */ "a.abbr.acronym.audio.b.bdi.bdo.big.br.button.canvas.cite.code.data.datalist.del.dfn.em.embed.i.iframe.img.ins.kbd.label.map.mark.meter.noscript.object.output.picture.progress.q.ruby.s.samp.select.slot.small.strong.sub.sup.svg.template.textarea.time.u.tt.var.video.wbr.input.span".split(".")), et = {
+	clientX: 0,
+	clientY: 0,
+	pageX: 0,
+	pageY: 0,
+	topClientX: 0,
+	topClientY: 0,
+	topPageX: 0,
+	topPageY: 0
+};
+function tt(e, t) {
+	return e + parseFloat(t.marginLeft) + parseFloat(t.marginRight) + parseFloat(t.paddingLeft) + parseFloat(t.paddingRight) + parseFloat(t.borderLeftWidth) + parseFloat(t.borderRightWidth);
+}
+function nt(e) {
+	if (!e) return !1;
+	let t = e.parentElement;
+	if (!t) return !1;
+	let n = e.tagName.toLowerCase(), r = t.tagName, i = getComputedStyle(e), a = getComputedStyle(t), o = () => {
+		let n = e.getBoundingClientRect().width, r = tt(n, i), a = t.getBoundingClientRect().width;
+		return r.toFixed(0) < a.toFixed(0);
+	};
+	return (n === "th" || n === "td") && r === "tr" || a.display === "flex" && a.flexDirection === "row" || a.display === "grid" && o() ? !0 : $e.has(n) ? i.display !== "block" || !(i.float !== "left" && i.float !== "right" || !o()) : i.display.startsWith("inline");
+}
+function H(e, t) {
+	let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+	return {
+		height: r.height - 2,
+		width: r.width - 2,
+		top: r.top - n.top + e.scrollTop + 1,
+		left: r.left - n.left + e.scrollLeft + 1,
+		isTop: r.top - n.top < 28,
+		isBottom: n.top + n.height - r.top - r.height < 28
+	};
+}
+function rt(e, t) {
+	let n = t.getBoundingClientRect(), r = e.clientY - n.top, i = e.clientY - n.top - n.height, a = e.clientX - n.left, o = e.clientX - n.left - n.width, s = Math.abs(r), c = Math.abs(i), l = Math.abs(a), u = Math.abs(o), d = r >= 0 && i <= 0, f = a >= 0 && o <= 0, p = d && f && n.width > 0 && n.height > 0, m;
+	p || (r <= 0 ? m = R.top : i >= 0 ? m = R.bottom : a <= 0 ? m = R.left : o >= 0 && (m = R.right));
+	let h = [
+		{
+			direction: R.top,
+			value: s
+		},
+		{
+			direction: R.bottom,
+			value: c
+		},
+		{
+			direction: R.left,
+			value: l
+		},
+		{
+			direction: R.right,
+			value: u
+		}
+	];
+	m ||= P.minBy(h, (e) => e.value).direction;
+	let g = nt(t), _ = !g;
+	if (g && [R.top, R.bottom].includes(m) && (m = l >= u ? R.right : R.left), _ && [R.left, R.right].includes(m) && (m = s >= c ? R.bottom : R.top), p) {
+		let e = P.minBy(h, (e) => e.value);
+		e.value <= 10 && (m = e.direction);
+	}
+	let v = Math.abs(U(e.clientX, e.clientY, n.left, n.top)), y = Math.abs(U(e.clientX, e.clientY, n.left, n.top + n.height)), b = Math.abs(U(e.clientX, e.clientY, n.left + n.width, n.top)), x = Math.abs(U(e.clientX, e.clientY, n.left + n.width, n.top + n.height)), { point: S } = P.minBy([
+		{
+			point: z.leftTop,
+			value: v
+		},
+		{
+			point: z.leftBottom,
+			value: y
+		},
+		{
+			point: z.rightTop,
+			value: b
+		},
+		{
+			point: z.rightBottom,
+			value: x
+		}
+	], (e) => e.value);
+	return {
+		element: t,
+		width: n.width,
+		height: n.height,
+		top: s,
+		bottom: c,
+		left: l,
+		right: u,
+		vInside: d,
+		hInside: f,
+		bothInside: p,
+		direction: m,
+		leftTop: v,
+		leftBottom: y,
+		rightTop: b,
+		rightBottom: x,
+		point: S,
+		rowBlock: _,
+		inlineBlock: g
+	};
+}
+function U(e, t, n = 0, r = 0) {
+	return n ??= 0, r ??= 0, Math.sqrt((e - n) ** 2 + (t - r) ** 2);
+}
+function it(e, n) {
+	let r = {};
+	for (let i in e) r[i] = t.isValidNumber(e[i]) && t.isValidNumber(n?.[i]) ? e[i] - n[i] : e[i];
+	return r;
+}
+//#endregion
+//#region src/models/Cursor.ts
+var at = class {
+	_status = w(L.Normal);
+	_position = w({ ...et });
+	_dragStartPosition = w();
+	_dragEndPosition = w();
+	_dragAtomDelta = w({ ...et });
+	_dragStartToCurrentDelta = a(() => !this._dragStartPosition.value || this._status.value === L.Dragging ? et : it(this._position.value, this._dragStartPosition.value));
+	_dragStartToEndDelta = a(() => !this._dragStartPosition.value || !this._dragEndPosition.value ? et : it(this._dragStartPosition.value, this._dragEndPosition.value));
+	get status() {
+		return this._status.value;
+	}
+	set status(e) {
+		this._status.value = e;
+	}
+	get position() {
+		return this._position.value;
+	}
+	set position(e) {
+		this._dragAtomDelta.value = it(this._position.value, e), this._position.value = { ...e };
+	}
+	get dragStartPosition() {
+		return this._dragStartPosition.value;
+	}
+	set dragStartPosition(e) {
+		this._dragStartPosition.value = e ? { ...e } : void 0;
+	}
+	get dragEndPosition() {
+		return this._dragEndPosition.value;
+	}
+	set dragEndPosition(e) {
+		this._dragEndPosition.value = e ? { ...e } : void 0;
+	}
+	get dragAtomDelta() {
+		return this._dragAtomDelta.value;
+	}
+	get dragStartToCurrentDelta() {
+		return this._dragStartToCurrentDelta.value;
+	}
+	get dragStartToEndDelta() {
+		return this._dragStartToEndDelta.value;
+	}
+	isDragging() {
+		return this._status.value === L.Dragging;
+	}
+}, ot = class {
+	_nodeIds = E([]);
+	_positions = E([]);
+	_cmpMetas = E([]);
+	_existsCmpMeta = a(() => this._cmpMetas.value.length > 0);
+	_onlyOne = a(() => this._cmpMetas.value.length === 1);
+	_insertion = E();
+	get nodeIds() {
+		return this._nodeIds.value;
+	}
+	set nodeIds(e) {
+		this._nodeIds.value = e;
+	}
+	get positions() {
+		return this._positions.value;
+	}
+	set positions(e) {
+		this._positions.value = e;
+	}
+	get cmpMetas() {
+		return this._cmpMetas.value;
+	}
+	set cmpMetas(e) {
+		this._cmpMetas.value = e;
+	}
+	get existsCmpMeta() {
+		return this._existsCmpMeta.value;
+	}
+	get onlyOne() {
+		return this._onlyOne.value;
+	}
+	get insertion() {
+		return this._insertion.value;
+	}
+	set insertion(e) {
+		this._insertion.value = e;
+	}
+	clear() {
+		this._cmpMetas.value = [], this._nodeIds.value = [], this._positions.value = [], this._insertion.value = void 0;
+	}
+}, st = class {
+	_distance = E();
+	_position = E();
+	_containerId = w();
+	_slotName = w();
+	_nodeId = w();
+	_placeholder = w();
+	_allowDrag = w(!1);
+	get distance() {
+		return this._distance.value;
+	}
+	set distance(e) {
+		this._distance.value = e;
+	}
+	get position() {
+		return this._position.value;
+	}
+	set position(e) {
+		this._position.value = e;
+	}
+	get containerId() {
+		return this._containerId.value;
+	}
+	set containerId(e) {
+		this._containerId.value = e;
+	}
+	get slotName() {
+		return this._slotName.value;
+	}
+	set slotName(e) {
+		this._slotName.value = e;
+	}
+	get nodeId() {
+		return this._nodeId.value;
+	}
+	set nodeId(e) {
+		this._nodeId.value = e;
+	}
+	get placeholder() {
+		return this._placeholder.value;
+	}
+	set placeholder(e) {
+		this._placeholder.value = e;
+	}
+	get allowDrag() {
+		return this._allowDrag.value;
+	}
+	set allowDrag(e) {
+		this._allowDrag.value = e;
+	}
+	get direction() {
+		return this._distance.value?.direction;
+	}
+	isBefore() {
+		let e = this._distance.value?.direction;
+		return e ? [R.top, R.left].includes(e) : !1;
+	}
+	isHorizontal() {
+		let e = this._distance.value?.direction;
+		return e ? [R.left, R.right].includes(e) : !1;
+	}
+	isEmpty() {
+		return t.noValue(this._distance.value?.direction);
+	}
+	getInsertionData() {
+		if (!this.isEmpty()) return {
+			distance: this.distance,
+			position: this.position,
+			containerId: this.containerId,
+			slotName: this.slotName,
+			nodeId: this.nodeId,
+			placeholder: this.placeholder,
+			allowDrag: this.allowDrag,
+			before: this.isBefore()
+		};
+	}
+	clear() {
+		this._distance.value = void 0, this._position.value = void 0, this._containerId.value = void 0, this._slotName.value = void 0, this._nodeId.value = void 0, this._placeholder.value = void 0, this._allowDrag.value = !1;
+	}
+};
+//#endregion
+//#region src/utils/ComponentMetaUtils.ts
+function ct(e) {
+	if (!e) return !1;
+	for (let t in e) if (e[t]) return !0;
+	return !1;
+}
+//#endregion
+//#region src/models/HoverDashed.ts
+var lt = class {
+	designerState;
+	_componentMeta = E();
+	_parentId = w();
+	_nodeId = w();
+	_position = E();
+	constructor(e) {
+		this.designerState = e;
+	}
+	get componentMeta() {
+		return this._componentMeta.value;
+	}
+	set componentMeta(e) {
+		this._componentMeta.value = e;
+	}
+	get parentId() {
+		return this._parentId.value;
+	}
+	set parentId(e) {
+		this._parentId.value = e;
+	}
+	get nodeId() {
+		return this._nodeId.value;
+	}
+	set nodeId(e) {
+		this._nodeId.value = e;
+	}
+	get position() {
+		return this._position.value;
+	}
+	set position(e) {
+		this._position.value = e;
+	}
+	get isContainer() {
+		let e = this._componentMeta.value;
+		return e ? ct(e.placeholder) : !1;
+	}
+	recalcPosition() {
+		if (!this._nodeId.value) return;
+		let e = this.designerState.designerContainer;
+		if (!e) return;
+		let t = e.querySelector(`[${M.nodeId}=${this._nodeId.value}]`);
+		t ? this._position.value = H(e, t) : this._position.value = void 0;
+	}
+	clear() {
+		this._componentMeta.value = void 0, this._parentId.value = void 0, this._nodeId.value = void 0, this._position.value = void 0;
+	}
+}, ut = class extends lt {}, dt = 100, ft = 1e3, pt = class {
+	designerState;
+	undoStack = te([]);
+	redoStack = te([]);
+	lastExecuteTime = 0;
+	constructor(e) {
+		this.designerState = e;
+	}
+	get canUndo() {
+		return this.undoStack.length > 0;
+	}
+	get canRedo() {
+		return this.redoStack.length > 0;
+	}
+	get size() {
+		return this.undoStack.length;
+	}
+	execute(e) {
+		if (!e.execute()) return !1;
+		let t = this.undoStack[this.undoStack.length - 1];
+		return t?.tryMerge && Date.now() - this.lastExecuteTime <= ft && t.tryMerge(e) ? (this.redoStack.length = 0, this.lastExecuteTime = Date.now(), this.dispatchCommandEvent("execute", e), this.notifyPanelUpdate(), !0) : (this.undoStack.push(e), this.redoStack.length = 0, this.undoStack.length > dt && this.undoStack.splice(0, this.undoStack.length - dt), this.lastExecuteTime = Date.now(), this.dispatchCommandEvent("execute", e), this.notifyPanelUpdate(), !0);
+	}
+	undo() {
+		let e = this.undoStack[this.undoStack.length - 1];
+		if (e && e.undo()) return this.undoStack.pop(), this.redoStack.push(e), this.dispatchCommandEvent("undo", e), this.notifyPanelUpdate(), e;
+	}
+	redo() {
+		let e = this.redoStack[this.redoStack.length - 1];
+		if (e && e.redo()) return this.redoStack.pop(), this.undoStack.push(e), this.dispatchCommandEvent("redo", e), this.notifyPanelUpdate(), e;
+	}
+	notifyPanelUpdate() {
+		this.designerState.setterShareState.notifyPanelUpdate();
+	}
+	clear() {
+		this.undoStack.length = 0, this.redoStack.length = 0;
+	}
+	dispatchCommandEvent(e, t) {
+		this.designerState.designerEngine.eventbus.dispatch(new Je({
+			type: e,
+			name: t.name,
+			path: this.designerState.designerEngine.activeDesignerPath
+		}));
+	}
+}, mt = class {
+	designerState;
+	_expandGroups = w({});
+	_panelVersion = w(0);
+	constructor(e) {
+		this.designerState = e;
+	}
+	getAllExpandTitles(e) {
+		if (!e) return {};
+		let t = {
+			props: [],
+			style: [
+				"布局",
+				"间距",
+				"尺寸",
+				"文本",
+				"背景与效果"
+			],
+			advanced: []
+		};
+		return e.setter.props && t.props.push(...((e) => {
+			let t = [];
+			for (let n of e) n.expand !== !1 && t.push(n.title);
+			return t;
+		})(e.setter.props.groups)), t;
+	}
+	get expandGroups() {
+		return this._expandGroups.value;
+	}
+	set expandGroups(e) {
+		this._expandGroups.value = e;
+	}
+	recalcExpandGroups() {
+		this._expandGroups.value = this.getAllExpandTitles(this.designerState.selectedComponentMeta);
+	}
+	get panelVersion() {
+		return this._panelVersion.value;
+	}
+	notifyPanelUpdate() {
+		this._panelVersion.value++;
+	}
+}, ht = class {
+	designerEngine;
+	_designerContainer = w();
+	_designerBlockInstance = w();
+	hover;
+	commandStack;
+	setterShareState;
+	selections = te([]);
+	_selection = a(() => this.selections[0]);
+	_existsSelection = a(() => this.selections.length > 0);
+	_singleSelection = a(() => this.selections.length === 1);
+	_selectNodes = a(() => {
+		let e = [], t = this.blockInstance;
+		if (t) for (let n of this.selections) {
+			let r = n.nodeId;
+			if (!r) continue;
+			let i = t.globalContext.allNode[r];
+			i && e.push(h(i));
+		}
+		return e;
+	});
+	_selectNode = a(() => {
+		let e = this.blockInstance;
+		if (!e || this.selections.length <= 0) return;
+		let t = this.selections[0].nodeId;
+		if (t) return e.globalContext.allNode[t];
+	});
+	_selectedComponentMeta = a(() => this.getCurrentComponentMeta());
+	constructor(e) {
+		this.designerEngine = e, this.hover = new lt(this), this.commandStack = new pt(this), this.setterShareState = new mt(this);
+	}
+	getCurrentComponentMeta() {
+		if (this.selections.length <= 0) return;
+		if (this.selections.length === 1) return this.selections[0].componentMeta;
+		let e, t = /* @__PURE__ */ new Set();
+		for (let n of this.selections) if (n.componentMeta && (e = n.componentMeta, t.add(e.type), t.size > 1)) return;
+		return e;
+	}
+	get designerContainer() {
+		return this._designerContainer?.value;
+	}
+	set designerContainer(e) {
+		this._designerContainer.value = e;
+	}
+	get designerBlockInstance() {
+		return this._designerBlockInstance?.value;
+	}
+	set designerBlockInstance(e) {
+		this._designerBlockInstance.value = e;
+	}
+	get blockInstance() {
+		return this._designerBlockInstance?.value;
+	}
+	get selection() {
+		return this._selection.value;
+	}
+	get existsSelection() {
+		return this._existsSelection.value;
+	}
+	get singleSelection() {
+		return this._singleSelection.value;
+	}
+	get selectNodes() {
+		return this._selectNodes.value;
+	}
+	get selectNode() {
+		return this._selectNode.value;
+	}
+	get selectedComponentMeta() {
+		return this._selectedComponentMeta.value;
+	}
+	clearSelections() {
+		this.selections.length = 0;
+	}
+	selectNodeByIds(e) {
+		_(() => {
+			let t = this.blockInstance;
+			if (t) {
+				this.selections.length = 0;
+				for (let n of e) {
+					let e = t.globalContext.allNode[n];
+					if (!e) continue;
+					let r = new ut(this);
+					r.nodeId = e.id, r.parentId = t.globalContext.nodeParent[n]?.id, r.componentMeta = this.designerEngine.componentManage.getComponentMeta(e.type);
+					let i = this.designerContainer, a = i?.querySelector(`[${M.nodeId}=${n}]`);
+					i && a && (r.position = H(i, a)), this.selections.push(r);
+				}
+			}
+		});
+	}
+}, gt = {
+	componentManage: new ae(),
+	drivers: [],
+	effects: [],
+	designerContent: ".designer-content"
+}, _t = class {
+	eventbus = new Ye();
+	props;
+	drivers = [];
+	effects = [];
+	cursor = new at();
+	draggingCmpMetas = new ot();
+	insertion = new st();
+	allDesignerState = te({});
+	_activeDesignerPath = w();
+	_onlyPressedCtrl = w(!1);
+	_onlyPressedShift = w(!1);
+	mounted = !1;
+	constructor(e = {}) {
+		this.props = {
+			...gt,
+			...e
+		};
+	}
+	get componentManage() {
+		return this.props.componentManage;
+	}
+	get isMounted() {
+		return this.mounted;
+	}
+	get activeDesignerPath() {
+		return this._activeDesignerPath.value;
+	}
+	set activeDesignerPath(e) {
+		e && !this.allDesignerState[e] && (e = void 0), this._activeDesignerPath.value = e;
+	}
+	get activeDesignerState() {
+		let e = this.activeDesignerPath;
+		if (e) return this.allDesignerState[e];
+	}
+	addDesignerState(e) {
+		let t = this.allDesignerState[e];
+		return t || (t = new ht(this), this.allDesignerState[e] = t), t;
+	}
+	delDesignerState(e) {
+		let t = this.allDesignerState[e];
+		return delete this.allDesignerState[e], this.activeDesignerPath === e && (this.activeDesignerPath = void 0), t;
+	}
+	get onlyPressedCtrl() {
+		return this._onlyPressedCtrl.value;
+	}
+	set onlyPressedCtrl(e) {
+		this._onlyPressedCtrl.value = e;
+	}
+	get onlyPressedShift() {
+		return this._onlyPressedShift.value;
+	}
+	set onlyPressedShift(e) {
+		this._onlyPressedShift.value = e;
+	}
+	mount(e = document, t = globalThis) {
+		this.unmount();
+		let n = this.props.drivers.map((n) => new n(this, e, t)), r = this.props.effects.map((n) => new n(this, e, t));
+		this.drivers.push(...n), this.effects.push(...r), this.effects.forEach((e) => e.effect()), this.drivers.forEach((e) => e.attach()), this.mounted = !0;
+		let i = {
+			container: e,
+			window: t,
+			timestamp: Date.now()
+		};
+		this.eventbus.dispatch(new Le(i));
+	}
+	unmount() {
+		if (!this.mounted) return;
+		let e = { timestamp: Date.now() };
+		this.eventbus.dispatch(new Re(e)), this.drivers.forEach((e) => e.detach()), this.effects.forEach((e) => e.destroy()), this.eventbus.clearAllSubscribe(), this.drivers.length = 0, this.effects.length = 0, this.mounted = !1;
+	}
+}, vt = class extends Ze {
+	dragState = this.initDragState();
+	componentMetas = /* @__PURE__ */ new Map();
+	initDragState() {
+		return {
+			dragging: !1,
+			startDragTime: void 0,
+			startEvent: void 0,
+			moveEvent: void 0
+		};
+	}
+	attach() {
+		this.addEventListener("mousedown", this.onMouseDown, !0);
+	}
+	detach() {
+		this.removeEventListener("mousedown", this.onMouseDown, !0), this.removeEventListener("mouseup", this.onMouseUp), this.removeEventListener("mousemove", this.onMouseMove), this.removeEventListener("mousemove", this.onDistanceChange), this.removeEventListener("dragstart", this.onStartDrag), this.removeEventListener("dragend", this.onMouseUp), this.removeEventListener("dragover", this.onMouseMove), this.removeEventListener("contextmenu", this.preventDefault, !0), this.dragState.dragging = !1, this.componentMetas.clear();
+	}
+	onMouseDown = (e) => {
+		if (e.button !== 0 || e.ctrlKey || e.metaKey) return;
+		let t = e.target;
+		if (!t?.closest) return;
+		this.componentMetas.clear();
+		let n = t.closest(de), r = N.componentMeta(n, this.componentManage);
+		if (r) this.componentMetas.set(le, r);
+		else {
+			let e = t.closest(`[${M.componentType}]`);
+			e && e.parentElement && N.placeholderName(e) && (e = e.parentElement.closest(`[${M.componentType}]`));
+			let n = N.nodeId(e), r = N.componentMeta(e, this.componentManage);
+			if (n && r) {
+				let e = this.designerEngine.activeDesignerState?.selections;
+				e && e.some((e) => n === e.nodeId) ? e.forEach((e) => {
+					e.nodeId && e.componentMeta && this.componentMetas.set(e.nodeId, e.componentMeta);
+				}) : this.componentMetas.set(n, r);
+			}
+		}
+		this.componentMetas.size <= 0 || (this.dragState.startEvent = e, this.dragState.dragging = !1, this.dragState.startDragTime = Date.now(), this.removeEventListener("mouseup", this.onMouseUp), this.addEventListener("mouseup", this.onMouseUp), this.removeEventListener("mousemove", this.onDistanceChange), this.addEventListener("mousemove", this.onDistanceChange), this.removeEventListener("dragend", this.onMouseUp), this.addEventListener("dragend", this.onMouseUp), this.removeEventListener("dragstart", this.onStartDrag), this.addEventListener("dragstart", this.onStartDrag));
+	};
+	onMouseUp = (e) => {
+		this.dragState.dragging && this.eventbus.dispatch(new He(e)), this.removeEventListener("mouseup", this.onMouseUp), this.removeEventListener("mousemove", this.onMouseMove), this.removeEventListener("mousemove", this.onDistanceChange), this.removeEventListener("dragover", this.onMouseMove), this.removeEventListener("dragend", this.onMouseUp), this.removeEventListener("dragstart", this.onStartDrag), this.removeEventListener("contextmenu", this.preventDefault, !0), this.dragState.dragging = !1;
+	};
+	onDistanceChange = (e) => {
+		let n = this.dragState.startDragTime, r = this.dragState.startEvent;
+		if (t.noValue(n) || t.noValue(r)) return;
+		let i = U(e.pageX, e.pageY, r.pageX, r.pageY), a = Date.now() - n;
+		e !== r && a > 10 && i > 4 && (this.removeEventListener("mousemove", this.onDistanceChange), this.onStartDrag(e));
+	};
+	onStartDrag = (e) => {
+		this.dragState.dragging || (this.dragState.startEvent = this.dragState.startEvent || e, this.removeEventListener("contextmenu", this.preventDefault, !0), this.addEventListener("contextmenu", this.preventDefault, !0), this.removeEventListener("mousemove", this.onMouseMove), this.addEventListener("mousemove", this.onMouseMove), this.removeEventListener("dragover", this.onMouseMove), this.addEventListener("dragover", this.onMouseMove), this.eventbus.dispatch(new Be(this.dragState.startEvent, this.componentMetas)), this.dragState.dragging = !0);
+	};
+	onMouseMove = (e) => {
+		(e.clientX !== this.dragState.moveEvent?.clientX || e.clientY !== this.dragState.moveEvent?.clientY) && (this.eventbus.dispatch(new Ve(e)), this.dragState.moveEvent = e);
+	};
+}, yt = class extends Ze {
+	pressedKeys = /* @__PURE__ */ new Set();
+	attach() {
+		this.addEventListener("keydown", this.onKeyEvent), this.addEventListener("keyup", this.onKeyEvent), this.window.addEventListener("blur", this.onBlur);
+	}
+	detach() {
+		this.removeEventListener("keydown", this.onKeyEvent), this.removeEventListener("keyup", this.onKeyEvent), this.window.removeEventListener("blur", this.onBlur), this.resetKeyState();
+	}
+	onBlur = () => {
+		this.resetKeyState();
+	};
+	resetKeyState() {
+		this.pressedKeys.clear(), this.designerEngine.onlyPressedCtrl = !1, this.designerEngine.onlyPressedShift = !1;
+	}
+	onKeyEvent = (e) => {
+		let t = e.key.toLowerCase();
+		e.type === "keydown" ? this.pressedKeys.add(t) : this.pressedKeys.delete(t), this.designerEngine.onlyPressedCtrl = this.pressedKeys.size === 1 && this.pressedKeys.has("control"), this.designerEngine.onlyPressedShift = this.pressedKeys.size === 1 && this.pressedKeys.has("shift"), this.eventbus.dispatch(new Ke(e, this.pressedKeys));
+	};
+}, bt = class extends Ze {
+	attach() {
+		this.addEventListener("click", this.onMouseClick), this.addEventListener("dblclick", this.onMouseDoubleClick);
+	}
+	detach() {
+		this.removeEventListener("click", this.onMouseClick), this.removeEventListener("dblclick", this.onMouseDoubleClick);
+	}
+	onMouseClick = (e) => {
+		let t = e.target;
+		t?.closest && t.closest(this.designerEngine.props.designerContent) && this.eventbus.dispatch(new Ue(e));
+	};
+	onMouseDoubleClick = (e) => {
+		let t = e.target;
+		t?.closest && t.closest(this.designerEngine.props.designerContent) && this.eventbus.dispatch(new We(e));
+	};
+}, xt = class extends Ze {
+	request = void 0;
+	attach() {
+		this.addEventListener("mousemove", this.onMouseMove);
+	}
+	detach() {
+		this.removeEventListener("mousemove", this.onMouseMove), this.cancelRequest();
+	}
+	onMouseMove = (e) => {
+		this.cancelRequest(), this.request = requestAnimationFrame(() => {
+			this.request = void 0, this.eventbus.dispatch(new Ge(e));
+		});
+	};
+	cancelRequest() {
+		this.request !== void 0 && (cancelAnimationFrame(this.request), this.request = void 0);
+	}
+}, St = class extends Qe {
+	originalCursor = "";
+	unsubscribes = [];
+	onEffect() {
+		this.dragDropCursor(), this.mouseMoveCursor();
+	}
+	onDestroy() {
+		this.unsubscribes.forEach((e) => e()), this.unsubscribes.length = 0, this.originalCursor &&= (this.setContainerCursorStyle(this.originalCursor), "");
+	}
+	toCursorPosition(e) {
+		return {
+			clientX: e?.clientX ?? 0,
+			clientY: e?.clientY ?? 0,
+			pageX: e?.pageX ?? 0,
+			pageY: e?.pageY ?? 0,
+			topClientX: e?.topClientX ?? 0,
+			topClientY: e?.topClientY ?? 0,
+			topPageX: e?.topPageX ?? 0,
+			topPageY: e?.topPageY ?? 0
+		};
+	}
+	dragDropCursor() {
+		this.unsubscribes.push(this.eventbus.subscribe(Be, (e) => {
+			this.originalCursor = this.getContainerCursorStyle();
+			let t = this.designerEngine.cursor;
+			t.status = L.DragStart, t.dragStartPosition = this.toCursorPosition(e.data);
+		}), this.eventbus.subscribe(Ve, (t) => {
+			let n = this.designerEngine.cursor;
+			n.status = L.Dragging, n.position = this.toCursorPosition(t.data), e.requestIdle(() => {
+				this.setContainerCursorStyle("move");
+			});
+		}), this.eventbus.subscribe(He, (t) => {
+			let n = this.designerEngine.cursor;
+			n.status = L.DragStop, n.dragEndPosition = this.toCursorPosition(t.data), n.dragStartPosition = void 0, n.status = L.Normal, e.requestIdle(() => this.setContainerCursorStyle(this.originalCursor));
+		}));
+	}
+	mouseMoveCursor() {
+		this.unsubscribes.push(this.eventbus.subscribe(Ge, (e) => {
+			let t = this.designerEngine.cursor;
+			[L.Dragging, L.DragStart].includes(t.status) || (t.status = L.Normal), t.status !== L.Dragging && (t.position = this.toCursorPosition(e.data));
+		}));
+	}
+}, Ct = class extends Qe {
+	unsubscribes = [];
+	onEffect() {
+		this.draggingCmpMetasEffect();
+	}
+	onDestroy() {
+		this.unsubscribes.forEach((e) => e()), this.unsubscribes.length = 0, this.designerEngine.draggingCmpMetas.clear();
+	}
+	draggingCmpMetasEffect() {
+		this.unsubscribes.push(this.eventbus.subscribe(Be, (e) => {
+			let t = e.data?.componentMetas;
+			if (!t || t.size <= 0) return;
+			let n = this.designerEngine.draggingCmpMetas, r = [], i = [], a = [], o = this.designerEngine.activeDesignerState?.designerContainer;
+			t.forEach((e, t) => {
+				if (r.push(e), i.push(t), o) {
+					let e = o.querySelector(`[${M.nodeId}=${t}]`);
+					e && a.push(H(o, e));
+				}
+			}), n.cmpMetas = r, n.nodeIds = i, n.positions = a;
+		}, 100), this.eventbus.subscribe(He, (e) => {
+			let t = this.designerEngine.draggingCmpMetas;
+			t.existsCmpMeta && (this.eventbus.dispatch(new qe({
+				componentMetas: [...t.cmpMetas],
+				nodeIds: [...t.nodeIds],
+				cursor: e.data,
+				insertion: t.insertion
+			})), t.clear());
+		}, 100));
+	}
+};
+//#endregion
+//#region src/utils/DesignerUtils.ts
+function wt(e, n, r, i) {
+	if (!e.dragDropConfig) return !0;
+	let a = n.type, { whiteList: o, blacklist: s, isAllow: c } = e.dragDropConfig;
+	return !(t.hasValue(o) && !o.includes(a) || t.hasValue(s) && s.includes(a) || t.isFunction(c) && !c(e, n, r, i));
+}
+//#endregion
+//#region src/effects/AuxToolEffect.ts
+var Tt = class extends Qe {
+	minHoverChangeTime = 50;
+	lastEventTarget;
+	lastMouseMoveTime = 0;
+	lastDragStopEventTime = 0;
+	unsubscribes = [];
+	onEffect() {
+		this.hoverDashedEffect(), this.selectionEffect(), this.insertionEffect();
+	}
+	onDestroy() {
+		this.unsubscribes.forEach((e) => e()), this.unsubscribes.length = 0, this.lastEventTarget = void 0;
+	}
+	getNodeAndDesigner(e, t) {
+		if (!t?.closest) return;
+		let n = e.designerContainer;
+		if (n ||= t.closest(this.designerEngine.props.designerContent), !n) return;
+		let r = t.closest(`[${M.nodeRef}]:not([${M.placeholderName}])`);
+		if (r) return {
+			node: r,
+			designer: n
+		};
+	}
+	getVerticalDistance(e) {
+		return e.vInside ? -1 : Math.min(e.top, e.bottom);
+	}
+	getHorizontalDistance(e) {
+		return e.hInside ? -1 : Math.min(e.left, e.right);
+	}
+	setInsertion(e, t, n, r = "") {
+		let i = e.designerContainer ?? null;
+		if (i ||= n.element.closest(this.designerEngine.props.designerContent), !i) return;
+		this.designerEngine.insertion.clear();
+		let a = P.trim(r).length > 0, o, s;
+		if (a ? (o = t, s = r) : (o = N.nodeId(n.element), s = N.slotName(n.element)), this.nodeIsSelfOrInside(o, this.designerEngine.draggingCmpMetas.nodeIds)) return;
+		let c = n.element.closest(`[${M.nodeId}=${t}]`);
+		if (!c) return;
+		let l = N.componentMeta(c, this.componentManage);
+		l && (this.designerEngine.draggingCmpMetas.cmpMetas.some((e) => !wt(e, l, s, c)) || (this.designerEngine.insertion.allowDrag = !0, this.designerEngine.insertion.distance = n, this.designerEngine.insertion.position = H(i, n.element), this.designerEngine.insertion.nodeId = o, this.designerEngine.insertion.containerId = t, this.designerEngine.insertion.slotName = s, this.designerEngine.insertion.placeholder = a));
+	}
+	nodeIsSelfOrInside(e, t) {
+		if (t.includes(e)) return !0;
+		let n = this.designerEngine.activeDesignerState?.blockInstance;
+		if (n) {
+			let r = /* @__PURE__ */ new Set();
+			for (let e of t) {
+				let t = n.globalContext.allNode[e];
+				t && ce(t, (e) => r.add(e.id));
+			}
+			return r.has(e);
+		}
+		return !1;
+	}
+	hoverDashedEffect() {
+		this.unsubscribes.push(this.eventbus.subscribe(Ge, (t) => {
+			let n = Date.now();
+			if (t.data.target === this.lastEventTarget) {
+				this.lastMouseMoveTime = n;
+				return;
+			}
+			n - this.lastMouseMoveTime < this.minHoverChangeTime || (this.lastMouseMoveTime = n, e.requestIdle(() => {
+				let e = this.designerEngine.activeDesignerState;
+				if (!e) return;
+				let n = e.hover, r = t.data.target, i = this.getNodeAndDesigner(e, r);
+				if (!i) return;
+				let a = N.nodeId(i.node);
+				if (e.selections.some((e) => e.nodeId === a)) {
+					n.clear();
+					return;
+				}
+				n.componentMeta = N.componentMeta(i.node, this.componentManage), n.nodeId = a, n.position = H(i.designer, i.node), this.lastEventTarget = t.data.target;
+			}));
+		}));
+	}
+	selectionEffect() {
+		this.unsubscribes.push(this.eventbus.subscribe(Ue, (e) => {
+			if (Date.now() - this.lastDragStopEventTime <= 30) return;
+			let t = this.designerEngine.activeDesignerState;
+			if (!t) return;
+			let n = e.data.target, r = this.getNodeAndDesigner(t, n);
+			if (!r) return;
+			let i = t.hover, a = t.selections, o = new ut(t);
+			o.nodeId = N.nodeId(r.node), o.parentId = N.nodeParentId(r.node), !a.some((e) => e.nodeId === o.nodeId) && (o.componentMeta = N.componentMeta(r.node, this.componentManage), o.position = H(r.designer, r.node), this.designerEngine.onlyPressedCtrl || (a.length = 0), a.push(o), i.nodeId && a.some((e) => e.nodeId === i.nodeId) && i.clear());
+		}));
+	}
+	insertionEffect() {
+		this.unsubscribes.push(this.eventbus.subscribe(Ve, (t) => {
+			if (!this.designerEngine.draggingCmpMetas.existsCmpMeta) return;
+			let n = t.data.target;
+			n && e.requestIdle(() => {
+				if (!n?.closest || !n.closest(this.designerEngine.props.designerContent)) {
+					this.designerEngine.insertion.clear();
+					return;
+				}
+				let e = this.designerEngine.activeDesignerState;
+				if (!e?.designerContainer) return;
+				let r = e.blockInstance;
+				if (!r) return;
+				let i = N.placeholderName(n);
+				if (i) {
+					let n = rt(t.data, t.data.target), r = N.nodeParentId(n.element);
+					if (r) {
+						this.setInsertion(e, r, n, i);
+						return;
+					}
+				}
+				let a = null, o;
+				for (;;) {
+					if (!n || (a = n.closest(`[${M.nodeId}]`), !a) || (o = N.nodeId(a), !o)) return;
+					let e = r.globalContext.allNode[o];
+					if (!e) return;
+					if (ct(e.designExt?.designPlaceholder)) break;
+					n = n === a ? a.parentElement : a;
+				}
+				if (!a || !o) return;
+				if (a === t.data.target) {
+					let n = rt(t.data, a);
+					if (Math.min(n.top, n.bottom, n.left, n.right) <= 12) {
+						let t = N.nodeParentId(n.element);
+						if (t) {
+							this.setInsertion(e, t, n);
+							return;
+						}
+					}
+				}
+				let s = a.querySelectorAll(`[${M.nodeParentId}=${o}]`), c = [];
+				if (s.forEach((e) => c.push(rt(t.data, e))), c.length <= 0) return;
+				let l = P.min(c.map((e) => this.getVerticalDistance(e))), u = c.filter((e) => this.getVerticalDistance(e) <= l), d = P.min(u.map((e) => this.getHorizontalDistance(e))), f = u.filter((e) => this.getHorizontalDistance(e) <= d), p = P.minBy(f, (e) => e.bothInside ? -1 : e.point === z.leftTop ? e.leftTop : e.point === z.leftBottom ? e.leftBottom : e.point === z.rightTop ? e.rightTop : e.point === z.rightBottom ? e.rightBottom : Number.MAX_VALUE);
+				this.setInsertion(e, o, p);
+			});
+		}), this.eventbus.subscribe(He, () => {
+			this.lastDragStopEventTime = Date.now();
+			let t = this.designerEngine.insertion, n = this.designerEngine.draggingCmpMetas;
+			n.insertion = t.getInsertionData(), e.requestIdle(() => t.clear());
+		}));
+	}
+};
+//#endregion
+//#region src/operations/NodePosition.ts
+function Et(e, n) {
+	if (!e.globalContext.allNode[n]) return;
+	let r = e.globalContext.nodeParent[n];
+	if (!r) return;
+	let i = (e, i) => {
+		let a = e.findIndex((e) => t.isObj(e) && !t.isArray(e) && e.id === n);
+		if (!(a < 0)) {
+			if (a > 0) {
+				let n = e[a - 1];
+				if (t.isObj(n) && !t.isArray(n)) return {
+					parentId: r.id,
+					slotName: i,
+					position: "after",
+					positionId: n.id
+				};
+			}
+			return {
+				parentId: r.id,
+				slotName: i,
+				position: "first"
+			};
+		}
+	}, a = i(r.items, oe);
+	if (a) return a;
+	for (let e in r.slots) {
+		let t = i(r.slots[e], e);
+		if (t) return t;
+	}
+}
+function Dt(e, n) {
+	if (!e.globalContext.allNode[n]) return -1;
+	let r = e.globalContext.nodeParent[n];
+	if (!r) return -1;
+	let i = (e) => e.findIndex((e) => t.isObj(e) && !t.isArray(e) && e.id === n), a = i(r.items);
+	if (a >= 0) return a;
+	for (let e in r.slots) {
+		let t = i(r.slots[e]);
+		if (t >= 0) return t;
+	}
+	return -1;
+}
+function Ot(e, t) {
+	let { allNode: n } = e.globalContext;
+	return n[t.parentId] ? (t.position === "before" || t.position === "after") && t.positionId && !n[t.positionId] ? {
+		parentId: t.parentId,
+		slotName: t.slotName,
+		position: "last"
+	} : t : null;
+}
+function kt(e, t, n) {
+	let r = Ot(e, t);
+	if (!r) return !1;
+	let i = e.opsById;
+	if (n.filter((t) => e.globalContext.allNode[t]).length <= 0) return !1;
+	if (t = r, t.slotName === oe) switch (t.position) {
+		case "before": return t.positionId ? i.moveNodesToItemBeforeById(t.positionId, n) : !1;
+		case "after": return t.positionId ? i.moveNodesToItemAfterById(t.positionId, n) : !1;
+		case "first": return i.moveNodesToItemFirstById(t.parentId, n);
+		case "last": return i.moveNodesToItemLastById(t.parentId, n);
+	}
+	switch (t.position) {
+		case "before": return t.positionId ? i.moveNodesToSlotBeforeById(t.positionId, t.slotName, n) : !1;
+		case "after": return t.positionId ? i.moveNodesToSlotAfterById(t.positionId, t.slotName, n) : !1;
+		case "first": return i.moveNodesToSlotFirstById(t.parentId, t.slotName, n);
+		case "last": return i.moveNodesToSlotLastById(t.parentId, t.slotName, n);
+	}
+}
+function At(e, t, n) {
+	let r = Ot(e, t);
+	if (!r) return [];
+	t = r;
+	let i = e.opsById;
+	if (t.slotName === oe) switch (t.position) {
+		case "before": return t.positionId ? i.beforeAddItemsById(t.positionId, n) : [];
+		case "after": return t.positionId ? i.afterAddItemsById(t.positionId, n) : [];
+		case "first": return i.firstAddItemsById(t.parentId, n);
+		case "last": return i.appendItemsById(t.parentId, n);
+	}
+	switch (t.position) {
+		case "before": return t.positionId ? i.beforeAddSlotsById(t.positionId, t.slotName, n) : [];
+		case "after": return t.positionId ? i.afterAddSlotsById(t.positionId, t.slotName, n) : [];
+		case "first": return i.firstAddSlotsById(t.parentId, t.slotName, n);
+		case "last": return i.appendSlotsById(t.parentId, t.slotName, n);
+	}
+}
+function jt(e) {
+	return e.placeholder ? {
+		parentId: e.containerId,
+		slotName: e.slotName,
+		position: "first"
+	} : {
+		parentId: e.containerId,
+		slotName: e.slotName,
+		position: e.before ? "before" : "after",
+		positionId: e.nodeId
+	};
+}
+function Mt(e) {
+	return e.filter((e) => t.isObj(e) && !t.isArray(e));
+}
+//#endregion
+//#region src/operations/commands/AddNodesCommand.ts
+var Nt = class {
+	name;
+	designerState;
+	options;
+	addedNodeIds = [];
+	constructor(e, t, n) {
+		this.designerState = e, this.name = t, this.options = n;
+	}
+	execute() {
+		return this.doAdd();
+	}
+	undo() {
+		if (this.addedNodeIds.length <= 0) return !1;
+		let e = this.designerState.blockInstance;
+		return e ? (e.opsById.removeAllById(this.addedNodeIds), this.addedNodeIds = [], !0) : !1;
+	}
+	redo() {
+		return this.doAdd();
+	}
+	doAdd() {
+		let e = this.designerState.blockInstance;
+		if (!e) return !1;
+		let t = Mt(At(e, this.options.target, this.options.nodes));
+		return t.length <= 0 ? !1 : (this.addedNodeIds = t.map((e) => e.id), this.options.onExecute?.(this.addedNodeIds), !0);
+	}
+}, Pt = class {
+	name;
+	designerState;
+	options;
+	originPositions = [];
+	constructor(e, t, n) {
+		this.designerState = e, this.name = t, this.options = n;
+	}
+	execute() {
+		return this.doMove();
+	}
+	undo() {
+		if (this.originPositions.length <= 0) return !1;
+		let e = this.designerState.blockInstance;
+		if (!e) return !1;
+		let t = [...this.originPositions].sort((e, t) => e.docIndex - t.docIndex), n = !1;
+		for (let r of t) kt(e, r.target, [r.nodeId]) && (n = !0);
+		return n;
+	}
+	redo() {
+		return this.doMove();
+	}
+	doMove() {
+		let e = this.designerState.blockInstance;
+		if (!e) return !1;
+		let t = this.options.nodeIds.filter((t) => e.globalContext.allNode[t]);
+		if (t.length <= 0) return !1;
+		if (this.originPositions.length <= 0) {
+			for (let n of t) {
+				let t = Et(e, n);
+				t && this.originPositions.push({
+					nodeId: n,
+					target: t,
+					docIndex: Dt(e, n)
+				});
+			}
+			if (this.originPositions.length <= 0) return !1;
+		}
+		let n = kt(e, this.options.target, t);
+		return n && this.options.onExecute?.(), n;
+	}
+}, Ft = /* @__PURE__ */ new Set([
+	M.componentType,
+	M.nodeId,
+	M.nodeRef,
+	M.nodeParentId,
+	M.placeholderName,
+	M.slotName
+]);
+function It(e) {
+	return P.cloneDeepWith(e, (e) => {
+		if (P.isFunction(e)) return e;
+	});
+}
+function Lt(e) {
+	let t = {};
+	for (let n in e) Ft.has(n) || (t[n] = e[n]);
+	return t;
+}
+function Rt(e) {
+	return e.filter((e) => P.has(e, "type")).map((e) => P.isString(e) ? e : zt(e));
+}
+function zt(e) {
+	let t = {
+		type: e.type,
+		ref: e.ref,
+		props: Lt(e.props)
+	};
+	if (e.listeners && Object.keys(e.listeners).length > 0 && (t.listeners = It(e.listeners)), e.directives && Object.keys(e.directives).length > 0 && (t.directives = P.cloneDeep(e.directives)), e.tpl && e.tpl.length > 0 && (t.tpl = [...e.tpl]), e.items && e.items.length > 0 && (t.items = Rt(e.items)), e.slots && Object.keys(e.slots).length > 0) {
+		let n = {};
+		for (let t in e.slots) {
+			let r = e.slots[t];
+			r && r.length > 0 && (n[t] = Rt(r));
+		}
+		Object.keys(n).length > 0 && (t.slots = n);
+	}
+	let n = e;
+	if (n.block) {
+		t.block = !0;
+		for (let e of [
+			"data",
+			"computed",
+			"watch",
+			"methods",
+			"lifeCycles",
+			"meta",
+			"i18n"
+		]) {
+			let r = n[e];
+			Bt(r) && (t[e] = It(r));
+		}
+	}
+	return t;
+}
+function Bt(e) {
+	return typeof e == "object" && !!e && Object.keys(e).length > 0;
+}
+//#endregion
+//#region src/operations/commands/RemoveNodesCommand.ts
+var Vt = class {
+	name;
+	designerState;
+	options;
+	removedNodes = [];
+	currentNodeIds = [];
+	constructor(e, t, n) {
+		this.designerState = e, this.name = t, this.options = n;
+	}
+	execute() {
+		return this.doRemove();
+	}
+	undo() {
+		if (this.removedNodes.length <= 0) return !1;
+		let e = this.designerState.blockInstance;
+		if (!e) return !1;
+		let t = [...this.removedNodes].sort((e, t) => e.docIndex - t.docIndex), n = /* @__PURE__ */ new Map(), r = [], i = !1;
+		for (let a of t) {
+			let t = Mt(At(e, this.mapInsertTarget(a.target, n), [a.designNode]));
+			t.length > 0 && (i = !0, n.set(a.oldNodeId, t[0].id), r.push(t[0].id));
+		}
+		return i && (this.currentNodeIds = r), i;
+	}
+	redo() {
+		return this.doRemove();
+	}
+	mapInsertTarget(e, t) {
+		let n = t.get(e.positionId);
+		return e.positionId && n ? {
+			...e,
+			positionId: n
+		} : e;
+	}
+	doRemove() {
+		let e = this.designerState.blockInstance;
+		if (!e) return !1;
+		let t = this.currentNodeIds.length > 0 ? this.currentNodeIds : this.options.nodeIds, n = [];
+		for (let r of t) {
+			let t = e.globalContext.allNode[r];
+			t && e.globalContext.nodeParent[r] && n.push(t);
+		}
+		if (n.length <= 0) return !1;
+		this.removedNodes = n.map((t) => ({
+			designNode: zt(t),
+			target: Et(e, t.id),
+			docIndex: Dt(e, t.id),
+			oldNodeId: t.id
+		})), this.currentNodeIds = n.map((e) => e.id);
+		let r = n.map((e) => this.designerState.designerEngine.componentManage.getComponentMeta(e.type)?.name ?? e.type);
+		return e.opsById.removeAllById(this.currentNodeIds), this.options.onExecute?.(r), !0;
+	}
+}, Ht = class extends Qe {
+	unsubscribes = [];
+	onEffect() {
+		this.dragDropEffect(), this.shortcutKeyEffect();
+	}
+	onDestroy() {
+		this.unsubscribes.forEach((e) => e()), this.unsubscribes.length = 0;
+	}
+	getActiveState() {
+		return this.designerEngine.activeDesignerState;
+	}
+	dragDropEffect() {
+		this.unsubscribes.push(this.eventbus.subscribe(qe, (e) => {
+			let t = this.getActiveState(), n = e.data, r = n.insertion;
+			if (!r || !r.allowDrag || !t?.blockInstance) return;
+			let i = jt(r), a = n.nodeIds.filter((e) => e !== le);
+			if (a.length > 0) {
+				let e = new Pt(t, `移动 ${a.length} 个组件`, {
+					target: i,
+					nodeIds: a,
+					onExecute: () => t.selectNodeByIds(a)
+				});
+				t.commandStack.execute(e);
+			} else {
+				let e = n.componentMetas.map((e) => ({
+					...P.cloneDeep(e.defDesignNode ?? {}),
+					type: e.type
+				})), r = new Nt(t, `添加 ${e.length} 个组件`, {
+					target: i,
+					nodes: e,
+					onExecute: (e) => t.selectNodeByIds(e)
+				});
+				t.commandStack.execute(r);
+			}
+		}, 200));
+	}
+	shortcutKeyEffect() {
+		this.unsubscribes.push(this.eventbus.subscribe(Ke, (e) => {
+			let t = e.data;
+			if (t.type !== "keydown") return;
+			let n = this.getActiveState();
+			if (!n) return;
+			let r = t.ctrlKey || t.metaKey, i = t.rawEvent.target, a = !!i && (i.tagName === "INPUT" || i.tagName === "TEXTAREA" || i.isContentEditable);
+			if (r && !t.shiftKey && t.key === "z") {
+				if (a) return;
+				t.rawEvent.preventDefault(), n.commandStack.undo(), n.clearSelections();
+				return;
+			}
+			if (r && (t.key === "y" || t.shiftKey && t.key === "z")) {
+				if (a) return;
+				t.rawEvent.preventDefault(), n.commandStack.redo(), n.clearSelections();
+				return;
+			}
+			if ((t.key === "delete" || t.key === "backspace") && n.existsSelection) {
+				if (a) return;
+				t.rawEvent.preventDefault();
+				let e = n.selections.map((e) => e.nodeId).filter(Boolean);
+				if (e.length <= 0) return;
+				let r = new Vt(n, `删除 ${e.length} 个组件`, {
+					nodeIds: e,
+					onExecute: () => n.clearSelections()
+				});
+				n.commandStack.execute(r);
+			}
+		}));
+	}
+}, W = class e {
+	name;
+	designerState;
+	options;
+	constructor(e, t, n) {
+		this.designerState = e, this.name = t, this.options = n;
+	}
+	get changes() {
+		return this.options.changes;
+	}
+	execute() {
+		return this.applyChanges(!1);
+	}
+	undo() {
+		return this.applyChanges(!0);
+	}
+	redo() {
+		return this.applyChanges(!1);
+	}
+	applyChanges(e) {
+		let t = this.designerState.blockInstance;
+		if (!t) return !1;
+		let n = [];
+		for (let r of this.options.changes) {
+			let i = t.globalContext.allNode[r.nodeId];
+			i && (r.write(i, e ? r.oldValue : r.newValue), n.push(i));
+		}
+		return n.length <= 0 ? !1 : (this.rerender(n), !0);
+	}
+	rerender(e) {
+		if (this.options.disableReRender) return;
+		let t = this.designerState.blockInstance;
+		t && (t.$forceUpdate(), t.$nextTick(() => {
+			let t = new Set(e.map((e) => e.id));
+			for (let e of this.designerState.selections) e.nodeId && t.has(e.nodeId) && e.recalcPosition();
+		}));
+	}
+	tryMerge(t) {
+		if (!(t instanceof e)) return !1;
+		let n = new Set(this.options.changes.map((e) => `${e.nodeId}@${e.changeKey}`));
+		if (!t.options.changes.some((e) => n.has(`${e.nodeId}@${e.changeKey}`))) return !1;
+		for (let e of t.options.changes) {
+			let t = this.options.changes.find((t) => t.nodeId === e.nodeId && t.changeKey === e.changeKey);
+			t ? t.newValue = e.newValue : this.options.changes.push(e);
+		}
+		return !0;
+	}
+}, Ut = class e {
+	name;
+	designerState;
+	options;
+	constructor(e, t, n) {
+		this.designerState = e, this.name = t, this.options = n;
+	}
+	execute() {
+		return this.applyChanges(!1);
+	}
+	undo() {
+		return this.applyChanges(!0);
+	}
+	redo() {
+		return this.applyChanges(!1);
+	}
+	applyChanges(e) {
+		let t = this.designerState.blockInstance;
+		if (!t) return !1;
+		let n = t.opsById, r = !1;
+		for (let t of this.options.changes) {
+			let i = e ? t.oldListener : t.newListener;
+			r = i ? n.bindListenerById(t.nodeId, t.event, i) || r : n.removeListenerById(t.nodeId, t.event) || r;
+		}
+		return r;
+	}
+	tryMerge(t) {
+		if (!(t instanceof e)) return !1;
+		let n = new Set(this.options.changes.map((e) => `${e.nodeId}@${e.event}`));
+		if (!t.options.changes.some((e) => n.has(`${e.nodeId}@${e.event}`))) return !1;
+		for (let e of t.options.changes) {
+			let t = this.options.changes.find((t) => t.nodeId === e.nodeId && t.event === e.event);
+			t ? t.newListener = e.newListener : this.options.changes.push(e);
+		}
+		return !0;
+	}
+}, Wt = {
+	key: 0,
+	class: "design-canvas-selection-name"
+}, Gt = /*@__PURE__*/ f({
+	name: "DesignCanvas",
+	__name: "DesignCanvas",
+	props: {
+		designerState: {},
+		block: {},
+		autoLoadComponent: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		let t = e, n = w(), i = w(), o, u = t.designerState.designerEngine.componentManage;
+		x(() => {
+			t.designerState.designerContainer = n.value, n.value && typeof ResizeObserver < "u" && (o = new ResizeObserver(() => {
+				t.designerState.hover.recalcPosition();
+				for (let e of t.designerState.selections) e.recalcPosition();
+			}), o.observe(n.value));
+		}), b(() => {
+			o?.disconnect(), o = void 0, t.designerState.designerContainer === n.value && (t.designerState.designerContainer = void 0);
+		}), re(() => i.value?.blockInstance, (e) => {
+			t.designerState.designerBlockInstance = e;
+		}, { immediate: !0 });
+		let f = t.designerState.hover, p = t.designerState.selections, m = t.designerState.designerEngine.insertion, h = a(() => {
+			let e = f.position;
+			return e ? {
+				position: "absolute",
+				top: `${e.top}px`,
+				left: `${e.left}px`,
+				width: `${e.width}px`,
+				height: `${e.height}px`
+			} : { display: "none" };
+		}), g = a(() => p.map((e, t) => {
+			let n = e.position, r = n ? {
+				position: "absolute",
+				top: `${n.top}px`,
+				left: `${n.left}px`,
+				width: `${n.width}px`,
+				height: `${n.height}px`
+			} : { display: "none" };
+			return {
+				key: e.nodeId ?? String(t),
+				style: r,
+				name: e.componentMeta?.name ?? ""
+			};
+		})), _ = a(() => {
+			let e = m.position;
+			return !e || m.isEmpty() ? { display: "none" } : m.isHorizontal() ? {
+				position: "absolute",
+				top: `${m.isBefore() ? e.top : e.top + e.height}px`,
+				left: `${e.left}px`,
+				width: `${e.width}px`,
+				height: "2px"
+			} : {
+				position: "absolute",
+				top: `${e.top}px`,
+				left: `${m.isBefore() ? e.left : e.left + e.width}px`,
+				width: "2px",
+				height: `${e.height}px`
+			};
+		});
+		return (e, a) => (S(), c("div", {
+			ref_key: "containerRef",
+			ref: n,
+			class: "design-canvas designer-content"
+		}, [
+			d(O(ie), {
+				ref_key: "blockComponentRef",
+				ref: i,
+				componentManage: O(u),
+				block: t.block,
+				autoLoadComponent: t.autoLoadComponent,
+				isDesigning: !0
+			}, null, 8, [
+				"componentManage",
+				"block",
+				"autoLoadComponent"
+			]),
+			O(f).nodeId ? (S(), c("div", {
+				key: 0,
+				class: "design-canvas-hover",
+				style: y(h.value)
+			}, null, 4)) : s("", !0),
+			(S(!0), c(r, null, T(g.value, (e) => (S(), c("div", {
+				key: e.key,
+				class: "design-canvas-selection",
+				style: y(e.style)
+			}, [e.name ? (S(), c("span", Wt, D(e.name), 1)) : s("", !0)], 4))), 128)),
+			l("div", {
+				class: "design-canvas-insertion",
+				style: y(_.value)
+			}, null, 4)
+		], 512));
+	}
+}), G = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, Kt = /*#__PURE__*/ G(Gt, [["__scopeId", "data-v-8c34617f"]]), qt = { class: "designer-ghost-name" }, Jt = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "DragGhost",
+	__name: "DragGhost",
+	props: { designerEngine: {} },
+	setup(e) {
+		let n = e, r = w(), u = n.designerEngine.cursor, d = n.designerEngine.draggingCmpMetas, f = a(() => {
+			if (!r.value) return {};
+			let e = u.position;
+			return !t.isNum(e.topClientX) || !t.isNum(e.topClientY) ? {} : { transform: `perspective(1px) translate3d(${e.topClientX - 6}px, ${e.topClientY - 20}px, 0) scale(0.8)` };
+		});
+		return (e, t) => (S(), o(i, { to: "body" }, [O(u).status === O(L).Dragging && O(d).existsCmpMeta ? (S(), c("div", {
+			key: 0,
+			ref_key: "ghost",
+			ref: r,
+			class: "designer-ghost",
+			style: y(f.value)
+		}, [l("span", qt, D(O(d).cmpMetas.map((e) => e.name).join(",")), 1)], 4)) : s("", !0)]));
+	}
+}), [["__scopeId", "data-v-eab9afd4"]]), Yt = { class: "designer-props-label" }, Xt = { key: 1 }, Zt = { class: "designer-props-control" }, Qt = ["onClick"], $t = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "SetterPropsGroup",
+	__name: "SetterPropsGroup",
+	props: {
+		designerState: {},
+		group: {}
+	},
+	setup(e) {
+		let n = e, i = a(() => n.designerState.selectNodes);
+		function u(e) {
+			return t.isStr(e) && !ue(e) ? n.designerState.designerEngine.componentManage.getComponent(e) : e;
+		}
+		function d(e) {
+			let { cmp: t, cmpProps: r, label: a, labelTips: o, enableBind: s, isHideSetter: c, watchValue: l, ...u } = e;
+			return {
+				designerState: n.designerState,
+				blockInstance: n.designerState.blockInstance,
+				nodes: i.value,
+				...r,
+				...u
+			};
+		}
+		function f(e) {
+			let { propsName: n, enableBind: r } = e;
+			if (r === !1 || t.noValue(n)) return !1;
+			let a = i.value, o = /* @__PURE__ */ new Set();
+			for (let e of a) o.add(e.props[n]);
+			if (o.size !== 1) return !1;
+			let s = o.values().next().value;
+			if (!t.isStr(s)) return !1;
+			let c = P.trim(s);
+			return c.startsWith("{{") && c.endsWith("}}");
+		}
+		function p(e) {
+			let { propsName: r } = e;
+			if (t.noValue(r)) return;
+			let a = i.value, o = !f(e);
+			for (let e of a) {
+				let n = e.designExt;
+				if (n.tmpBindProps ||= {}, n.tmpUnbindProps ||= {}, o) P.hasIn(e.props, r) ? n.tmpUnbindProps[r] = e.props[r] : delete n.tmpUnbindProps[r], e.props[r] = n.tmpBindProps[r] ?? "{{  }}";
+				else {
+					let i = e.props[r];
+					if (t.isStr(i)) {
+						let e = P.trim(i);
+						e.startsWith("{{") && e.endsWith("}}") && (n.tmpBindProps[r] = e);
+					}
+					P.hasIn(n.tmpUnbindProps, r) ? n.tmpUnbindProps[r] = e.props[r] : delete e.props[r];
+				}
+			}
+			n.designerState.blockInstance?.$forceUpdate(), n.designerState.setterShareState.notifyPanelUpdate();
+		}
+		return (e, t) => (S(!0), c(r, null, T(n.group.items, (e, t) => (S(), c("div", {
+			key: t,
+			class: "designer-props-item"
+		}, [
+			l("div", Yt, [e.labelTips ? (S(), o(O(I), {
+				key: 0,
+				title: e.labelTips
+			}, {
+				default: A(() => [l("span", null, D(e.label), 1)]),
+				_: 2
+			}, 1032, ["title"])) : (S(), c("span", Xt, D(e.label), 1))]),
+			l("div", Zt, [u(e.cmp) ? (S(), o(ee(u(e.cmp)), g({
+				key: 0,
+				ref_for: !0
+			}, d(e)), null, 16)) : s("", !0)]),
+			e.enableBind !== !1 && e.propsName ? (S(), c("div", {
+				key: 0,
+				class: v(["designer-props-bind", { "designer-props-bind-active": f(e) }]),
+				title: "切换数据绑定(值使用 {{ 表达式 }})",
+				onClick: (t) => p(e)
+			}, D("{ }"), 10, Qt)) : s("", !0)
+		]))), 128));
+	}
+}), [["__scopeId", "data-v-da94f8a5"]]), en = { class: "designer-props-node" }, tn = { class: "designer-props-node-name" }, nn = { class: "designer-props-node-type" }, rn = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "SetterPropsPanel",
+	__name: "SetterPropsPanel",
+	props: {
+		designerState: {},
+		propsPanel: {}
+	},
+	setup(e) {
+		let t = e, n = a(() => t.designerState.setterShareState.expandGroups), i = a(() => t.designerState.selectNode ? (t.propsPanel?.groups ?? []).map((e) => {
+			let t = e.items.filter((e) => !s(e));
+			return {
+				...e,
+				items: t
+			};
+		}).filter((e) => e.items.length > 0) : []);
+		function s(e) {
+			if (!e.isHideSetter) return !1;
+			let n = t.designerState.selectNode;
+			return n ? e.isHideSetter(n, t.designerState.selectNodes, void 0) === !0 : !1;
+		}
+		let u = a(() => i.value.map((e) => ({
+			key: e.title,
+			label: e.title,
+			content: m($t, {
+				designerState: t.designerState,
+				group: e
+			})
+		})));
+		return re(() => t.designerState.selectedComponentMeta, () => {
+			t.designerState.setterShareState.recalcExpandGroups();
+		}, { immediate: !0 }), (e, i) => (S(), c("div", {
+			key: t.designerState.setterShareState.panelVersion,
+			class: "designer-props-panel"
+		}, [t.designerState.existsSelection ? (S(), c(r, { key: 1 }, [l("div", en, [l("span", tn, D(t.designerState.selectedComponentMeta?.name ?? "-"), 1), l("span", nn, D(t.designerState.selectNode?.type), 1)]), d(O(pe), {
+			activeKey: n.value.props,
+			"onUpdate:activeKey": i[0] ||= (e) => n.value.props = e,
+			ghost: "",
+			size: "small",
+			items: u.value
+		}, null, 8, ["activeKey", "items"])], 64)) : (S(), o(O(he), {
+			key: 0,
+			description: "请选择画布中的组件"
+		}))]));
+	}
+}), [["__scopeId", "data-v-08d0d16e"]]), an = [
+	{
+		title: "布局",
+		disableKey: "disableLayout",
+		items: [
+			{
+				property: "display",
+				label: "显示类型",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "block",
+						label: "块级(block)"
+					},
+					{
+						value: "inline-block",
+						label: "行内块(inline-block)"
+					},
+					{
+						value: "inline",
+						label: "行内(inline)"
+					},
+					{
+						value: "flex",
+						label: "弹性(flex)"
+					},
+					{
+						value: "inline-flex",
+						label: "行内弹性(inline-flex)"
+					},
+					{
+						value: "grid",
+						label: "网格(grid)"
+					},
+					{
+						value: "inline-grid",
+						label: "行内网格(inline-grid)"
+					},
+					{
+						value: "none",
+						label: "隐藏(none)"
+					}
+				]
+			},
+			{
+				property: "flexDirection",
+				label: "主轴方向",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "row",
+						label: "水平(row)"
+					},
+					{
+						value: "column",
+						label: "垂直(column)"
+					},
+					{
+						value: "row-reverse",
+						label: "水平反转"
+					},
+					{
+						value: "column-reverse",
+						label: "垂直反转"
+					}
+				]
+			},
+			{
+				property: "justifyContent",
+				label: "主轴对齐",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "flex-start",
+						label: "起始"
+					},
+					{
+						value: "center",
+						label: "居中"
+					},
+					{
+						value: "flex-end",
+						label: "末尾"
+					},
+					{
+						value: "space-between",
+						label: "两端"
+					},
+					{
+						value: "space-around",
+						label: "环绕"
+					},
+					{
+						value: "space-evenly",
+						label: "均分"
+					}
+				]
+			},
+			{
+				property: "alignItems",
+				label: "交叉对齐",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "flex-start",
+						label: "起始"
+					},
+					{
+						value: "center",
+						label: "居中"
+					},
+					{
+						value: "flex-end",
+						label: "末尾"
+					},
+					{
+						value: "stretch",
+						label: "拉伸"
+					},
+					{
+						value: "baseline",
+						label: "基线"
+					}
+				]
+			},
+			{
+				property: "flexWrap",
+				label: "换行",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "nowrap",
+						label: "不换行"
+					},
+					{
+						value: "wrap",
+						label: "换行"
+					},
+					{
+						value: "wrap-reverse",
+						label: "反转换行"
+					}
+				]
+			},
+			{
+				property: "gap",
+				label: "间距",
+				cmp: "StringSetter"
+			}
+		]
+	},
+	{
+		title: "网格",
+		visible: (e) => String(e.display ?? "").includes("grid"),
+		items: [
+			{
+				property: "gridTemplateColumns",
+				label: "列模板",
+				cmp: "StringSetter"
+			},
+			{
+				property: "gridTemplateRows",
+				label: "行模板",
+				cmp: "StringSetter"
+			},
+			{
+				property: "gridAutoFlow",
+				label: "排列方向",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "row",
+						label: "按行"
+					},
+					{
+						value: "column",
+						label: "按列"
+					},
+					{
+						value: "dense",
+						label: "密集"
+					}
+				]
+			},
+			{
+				property: "gridGap",
+				label: "网格间距",
+				cmp: "StringSetter"
+			}
+		]
+	},
+	{
+		title: "间距",
+		disableKey: "disableSpacing",
+		items: [
+			{
+				property: "margin",
+				label: "外边距",
+				cmp: "StringSetter"
+			},
+			{
+				property: "marginTop",
+				label: "外边距(上)",
+				cmp: "StringSetter"
+			},
+			{
+				property: "marginRight",
+				label: "外边距(右)",
+				cmp: "StringSetter"
+			},
+			{
+				property: "marginBottom",
+				label: "外边距(下)",
+				cmp: "StringSetter"
+			},
+			{
+				property: "marginLeft",
+				label: "外边距(左)",
+				cmp: "StringSetter"
+			},
+			{
+				property: "padding",
+				label: "内边距",
+				cmp: "StringSetter"
+			},
+			{
+				property: "paddingTop",
+				label: "内边距(上)",
+				cmp: "StringSetter"
+			},
+			{
+				property: "paddingRight",
+				label: "内边距(右)",
+				cmp: "StringSetter"
+			},
+			{
+				property: "paddingBottom",
+				label: "内边距(下)",
+				cmp: "StringSetter"
+			},
+			{
+				property: "paddingLeft",
+				label: "内边距(左)",
+				cmp: "StringSetter"
+			}
+		]
+	},
+	{
+		title: "尺寸",
+		disableKey: "disableSize",
+		items: [
+			{
+				property: "width",
+				label: "宽度",
+				cmp: "StringSetter"
+			},
+			{
+				property: "height",
+				label: "高度",
+				cmp: "StringSetter"
+			},
+			{
+				property: "minWidth",
+				label: "最小宽度",
+				cmp: "StringSetter"
+			},
+			{
+				property: "minHeight",
+				label: "最小高度",
+				cmp: "StringSetter"
+			},
+			{
+				property: "maxWidth",
+				label: "最大宽度",
+				cmp: "StringSetter"
+			},
+			{
+				property: "maxHeight",
+				label: "最大高度",
+				cmp: "StringSetter"
+			}
+		]
+	},
+	{
+		title: "定位",
+		disableKey: "disablePosition",
+		items: [
+			{
+				property: "position",
+				label: "定位方式",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "static",
+						label: "静态"
+					},
+					{
+						value: "relative",
+						label: "相对"
+					},
+					{
+						value: "absolute",
+						label: "绝对"
+					},
+					{
+						value: "fixed",
+						label: "固定"
+					},
+					{
+						value: "sticky",
+						label: "粘性"
+					}
+				]
+			},
+			{
+				property: "top",
+				label: "上偏移",
+				cmp: "StringSetter"
+			},
+			{
+				property: "right",
+				label: "右偏移",
+				cmp: "StringSetter"
+			},
+			{
+				property: "bottom",
+				label: "下偏移",
+				cmp: "StringSetter"
+			},
+			{
+				property: "left",
+				label: "左偏移",
+				cmp: "StringSetter"
+			},
+			{
+				property: "zIndex",
+				label: "层级",
+				cmp: "StringSetter"
+			}
+		]
+	},
+	{
+		title: "文本",
+		disableKey: "disableFont",
+		items: [
+			{
+				property: "fontSize",
+				label: "字号",
+				cmp: "StringSetter"
+			},
+			{
+				property: "fontWeight",
+				label: "字重",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "normal",
+						label: "常规"
+					},
+					{
+						value: "bold",
+						label: "加粗"
+					},
+					{
+						value: "300",
+						label: "细"
+					},
+					{
+						value: "500",
+						label: "中"
+					},
+					{
+						value: "600",
+						label: "半粗"
+					},
+					{
+						value: "800",
+						label: "特粗"
+					}
+				]
+			},
+			{
+				property: "color",
+				label: "颜色",
+				cmp: "ColorSetter"
+			},
+			{
+				property: "textAlign",
+				label: "对齐",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "left",
+						label: "左"
+					},
+					{
+						value: "center",
+						label: "中"
+					},
+					{
+						value: "right",
+						label: "右"
+					},
+					{
+						value: "justify",
+						label: "两端"
+					}
+				]
+			},
+			{
+				property: "lineHeight",
+				label: "行高",
+				cmp: "StringSetter"
+			},
+			{
+				property: "fontFamily",
+				label: "字体",
+				cmp: "StringSetter"
+			},
+			{
+				property: "textDecoration",
+				label: "修饰",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "none",
+						label: "无"
+					},
+					{
+						value: "underline",
+						label: "下划线"
+					},
+					{
+						value: "line-through",
+						label: "删除线"
+					},
+					{
+						value: "overline",
+						label: "上划线"
+					}
+				]
+			}
+		]
+	},
+	{
+		title: "边框",
+		disableKey: "disableBorder",
+		items: [
+			{
+				property: "borderWidth",
+				label: "边框宽度",
+				cmp: "StringSetter"
+			},
+			{
+				property: "borderStyle",
+				label: "边框样式",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "none",
+						label: "无"
+					},
+					{
+						value: "solid",
+						label: "实线"
+					},
+					{
+						value: "dashed",
+						label: "虚线"
+					},
+					{
+						value: "dotted",
+						label: "点线"
+					},
+					{
+						value: "double",
+						label: "双线"
+					}
+				]
+			},
+			{
+				property: "borderColor",
+				label: "边框颜色",
+				cmp: "ColorSetter"
+			},
+			{
+				property: "borderRadius",
+				label: "圆角",
+				cmp: "StringSetter"
+			}
+		]
+	},
+	{
+		title: "背景与效果",
+		disableKey: "disableEffect",
+		items: [
+			{
+				property: "backgroundColor",
+				label: "背景颜色",
+				cmp: "ColorSetter"
+			},
+			{
+				property: "backgroundImage",
+				label: "背景图片",
+				cmp: "StringSetter"
+			},
+			{
+				property: "opacity",
+				label: "不透明度",
+				cmp: "StringSetter"
+			},
+			{
+				property: "boxShadow",
+				label: "阴影",
+				cmp: "StringSetter"
+			},
+			{
+				property: "cursor",
+				label: "光标",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "auto",
+						label: "自动"
+					},
+					{
+						value: "pointer",
+						label: "手型"
+					},
+					{
+						value: "not-allowed",
+						label: "禁止"
+					},
+					{
+						value: "move",
+						label: "移动"
+					},
+					{
+						value: "text",
+						label: "文本"
+					}
+				]
+			},
+			{
+				property: "overflow",
+				label: "溢出",
+				cmp: "SelectSetter",
+				options: [
+					{
+						value: "visible",
+						label: "可见"
+					},
+					{
+						value: "hidden",
+						label: "隐藏"
+					},
+					{
+						value: "auto",
+						label: "自动"
+					},
+					{
+						value: "scroll",
+						label: "滚动"
+					}
+				]
+			}
+		]
+	}
+], on = 350;
+function K(e) {
+	if (!t.noValue(e)) {
+		if (t.isStr(e)) try {
+			return Me(e);
+		} catch {
+			return;
+		}
+		if (t.isObj(e)) return e;
+	}
+}
+function sn(e, n, r, i) {
+	let { nodes: a } = e;
+	if (!a) return;
+	let o = /* @__PURE__ */ new Set();
+	for (let e of a) {
+		let i, a = K(e.props?.style);
+		if (a && (i = P.get(a, n)), t.isFunction(r) && (i = r(i)), t.noValue(i) && (i = void 0), o.add(i), o.size > 1) break;
+	}
+	if (!(o.size <= 0)) {
+		if (o.size === 1) return o.values().next().value;
+		i?.(!0);
+	}
+}
+var q, cn = P.debounce(function() {
+	let e = q;
+	if (q = void 0, !e) return;
+	let { props: n, styleValues: r } = e, i = n.designerState, { nodes: a } = n;
+	if (!a || a.length <= 0) return;
+	let o = [];
+	for (let e of a) {
+		let n = K(e.props?.style) ?? {}, i = {};
+		for (let e in r) i[e] = P.get(n, e);
+		o.push({
+			nodeId: e.id,
+			changeKey: "style",
+			oldValue: i,
+			newValue: { ...r },
+			write: (e, n) => {
+				let r = K(e.props?.style) ?? {};
+				for (let e in n) {
+					let i = n[e];
+					t.noValue(i) || t.isStr(i) && P.trim(i).length <= 0 ? P.unset(r, e) : P.set(r, e, i);
+				}
+				e.props.style = r;
+			}
+		});
+	}
+	o.length <= 0 || i.commandStack.execute(new W(i, "修改样式", { changes: o }));
+}, 350);
+function ln(e, t) {
+	(!q || q.props !== e) && (q && cn.flush(), q = {
+		props: e,
+		styleValues: {}
+	}), Object.assign(q.styleValues, t), cn();
+}
+function un(e, n) {
+	let { designerState: r, nodes: i } = e;
+	if (!i || i.length <= 0) return;
+	let a = P.trim(n ?? ""), o = [];
+	for (let e of i) {
+		t.noValue(e.designExt.rawPropsClass) && (e.designExt.rawPropsClass = e.props.class ?? "");
+		let n = [P.trim(e.designExt.rawPropsClass), a].filter((e) => e.length > 0).join(" "), r = e.props.class;
+		P.trim(r ?? "") !== n && o.push({
+			nodeId: e.id,
+			changeKey: "class",
+			oldValue: r,
+			newValue: n.length > 0 ? n : void 0,
+			write: (e, t) => {
+				e.props.class = t;
+			}
+		});
+	}
+	o.length <= 0 || r.commandStack.execute(new W(r, "切换主题样式", { changes: o }));
+}
+function dn(e, n) {
+	let { nodes: r } = e;
+	if (!r || r.length !== 1) return;
+	let i = r[0];
+	t.noValue(i.designExt.rawPropsClass) && (i.designExt.rawPropsClass = i.props.class ?? "");
+	let a = P.trim(i.designExt.rawPropsClass), o = P.trim(i.props.class?.substring(a.length) ?? "");
+	return n.find((e) => e.class === o)?.class;
+}
+//#endregion
+//#region src/components/panels/SetterStyleGroup.vue?vue&type=script&setup=true&lang.ts
+var fn = { class: "designer-style-label" }, pn = ["title"], mn = { class: "designer-style-control" }, hn = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "SetterStyleGroup",
+	__name: "SetterStyleGroup",
+	props: {
+		designerState: {},
+		group: {}
+	},
+	setup(e) {
+		let t = e, n = a(() => ({
+			designerState: t.designerState,
+			blockInstance: t.designerState.blockInstance,
+			nodes: t.designerState.selectNodes
+		}));
+		function i(e) {
+			return sn(n.value, e.property);
+		}
+		function u(e, t) {
+			ln(n.value, { [e.property]: t });
+		}
+		function d(e) {
+			return {
+				designerState: t.designerState,
+				blockInstance: t.designerState.blockInstance,
+				nodes: t.designerState.selectNodes,
+				getPropsValue: (t) => i(e),
+				applyPropsValue: (t, n) => (u(e, n), !1),
+				...e.cmp === "SelectSetter" ? { options: e.options } : {}
+			};
+		}
+		function f(e) {
+			return t.designerState.designerEngine.componentManage.getComponent(e);
+		}
+		return (e, n) => (S(!0), c(r, null, T(t.group.items, (e, t) => (S(), c("div", {
+			key: e.property + t,
+			class: "designer-style-item"
+		}, [l("div", fn, [l("span", { title: e.property }, D(e.label), 9, pn)]), l("div", mn, [f(e.cmp) ? (S(), o(ee(f(e.cmp)), g({
+			key: 0,
+			ref_for: !0
+		}, d(e)), null, 16)) : s("", !0)])]))), 128));
+	}
+}), [["__scopeId", "data-v-f020ce55"]]), gn = { class: "designer-style-panel" }, _n = {
+	key: 0,
+	class: "designer-style-theme-item"
+}, vn = { class: "designer-style-theme-control" }, yn = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "SetterStylePanel",
+	__name: "SetterStylePanel",
+	props: {
+		designerState: {},
+		stylePanel: {}
+	},
+	setup(e) {
+		let t = e, n = a(() => ({
+			designerState: t.designerState,
+			blockInstance: t.designerState.blockInstance,
+			nodes: t.designerState.selectNodes
+		})), i = a(() => {
+			let e = t.designerState.selectNode;
+			return e ? K(e.props?.style) ?? {} : {};
+		}), u = a(() => {
+			let e = t.stylePanel ?? {}, n = i.value;
+			return an.filter((t) => !(t.disableKey && e[t.disableKey] || t.visible && !t.visible(n)));
+		}), f = a(() => t.designerState.selectedComponentMeta?.setter.style?.componentStyles?.map((e) => ({
+			value: e.class,
+			label: e.name
+		})) ?? []), p = a(() => dn(n.value, t.designerState.selectedComponentMeta?.setter.style?.componentStyles ?? []));
+		function h(e) {
+			un(n.value, e);
+		}
+		let g = a(() => u.value.map((e) => ({
+			key: e.title,
+			label: e.title,
+			content: m(hn, {
+				designerState: t.designerState,
+				group: e
+			})
+		}))), _ = a({
+			get: () => (t.designerState.setterShareState.expandGroups.style ?? []).slice(),
+			set: (e) => {
+				t.designerState.setterShareState.expandGroups = {
+					...t.designerState.setterShareState.expandGroups,
+					style: e
+				};
+			}
+		});
+		return re(() => t.designerState.selectedComponentMeta, () => {
+			t.designerState.setterShareState.recalcExpandGroups();
+		}), (e, n) => (S(), c("div", gn, [t.designerState.existsSelection ? (S(), c(r, { key: 1 }, [f.value.length > 0 ? (S(), c("div", _n, [n[1] ||= l("div", { class: "designer-style-theme-label" }, "主题样式", -1), l("div", vn, [d(O(ve), {
+			allowClear: "",
+			placeholder: "选择主题",
+			options: f.value,
+			value: p.value || void 0,
+			onChange: h
+		}, null, 8, ["options", "value"])])])) : s("", !0), d(O(pe), {
+			activeKey: _.value,
+			"onUpdate:activeKey": n[0] ||= (e) => _.value = e,
+			ghost: "",
+			size: "small",
+			items: g.value
+		}, null, 8, ["activeKey", "items"])], 64)) : (S(), o(O(he), {
+			key: 0,
+			description: "请选择画布中的组件"
+		}))]));
+	}
+}), [["__scopeId", "data-v-abf7f607"]]), bn = { class: "designer-event-group-title" }, xn = { class: "designer-event-name" }, Sn = { class: "designer-event-key" }, Cn = { class: "designer-event-actions" }, wn = {
+	key: 0,
+	class: "designer-event-editor"
+}, Tn = { class: "designer-event-editor-title" }, En = { class: "designer-event-editor-actions" }, Dn = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "SetterEventPanel",
+	__name: "SetterEventPanel",
+	props: {
+		designerState: {},
+		eventPanel: {}
+	},
+	setup(e) {
+		let n = e, i = [{
+			title: "鼠标事件",
+			items: [
+				{
+					name: "click",
+					description: "单击"
+				},
+				{
+					name: "dblclick",
+					description: "双击"
+				},
+				{
+					name: "mouseenter",
+					description: "移入"
+				},
+				{
+					name: "mouseleave",
+					description: "移出"
+				},
+				{
+					name: "mousedown",
+					description: "按下"
+				},
+				{
+					name: "mouseup",
+					description: "弹起"
+				}
+			]
+		}, {
+			title: "键盘事件",
+			items: [{
+				name: "keydown",
+				description: "按下"
+			}, {
+				name: "keyup",
+				description: "弹起"
+			}]
+		}], f = a(() => n.designerState.selectNodes), p = a(() => {
+			let e = [], t = n.eventPanel?.groups;
+			t && t.length > 0 && e.push(...t);
+			let r = n.eventPanel?.excludeInnerEvents;
+			if (n.eventPanel?.includeInnerEvents !== !1) for (let t of i) r?.includes(t.title) || e.push(t);
+			return e;
+		}), m = C({
+			event: "",
+			code: "",
+			new: !1
+		});
+		function h(e) {
+			return fe(e);
+		}
+		function g(e) {
+			let t = h(e), n = /* @__PURE__ */ new Set();
+			for (let e of f.value) n.add(e.listeners[t]);
+			if (n.size === 1) return n.values().next().value;
+		}
+		function _(e) {
+			return !!g(e)?.handler;
+		}
+		function v(e) {
+			let n = g(e)?.handler;
+			if (!t.isFun(n)) return "";
+			try {
+				let e = n.toString(), t = e.match(/\{([\s\S]*)\}$/);
+				return t ? t[1].trim() : e;
+			} catch {
+				return "";
+			}
+		}
+		function y(e) {
+			m.event = e, m.code = v(e) || "console.log('事件触发', event)", m.new = !_(e);
+		}
+		function b() {
+			let e = m.event;
+			if (!e) return;
+			let t = n.designerState;
+			if (!t.blockInstance) return;
+			let r = P.trim(m.code), i;
+			try {
+				r.length > 0 && (i = se({ code: r }));
+			} catch (e) {
+				console.warn("[EventPanel] 事件函数解析失败", e);
+				return;
+			}
+			let a = h(e), o = [];
+			for (let t of f.value) {
+				let n = t.listeners[a];
+				i && n?.handler && Function.prototype.toString.call(n.handler) === Function.prototype.toString.call(i) || o.push({
+					nodeId: t.id,
+					event: e,
+					oldListener: n,
+					newListener: i ? { handler: i } : void 0
+				});
+			}
+			m.event = "", o.length > 0 && t.commandStack.execute(new Ut(t, `绑定事件 ${e}`, { changes: o }));
+		}
+		function x(e) {
+			let t = n.designerState;
+			if (!t.blockInstance) return;
+			let r = h(e), i = [];
+			for (let t of f.value) {
+				let n = t.listeners[r];
+				n && i.push({
+					nodeId: t.id,
+					event: e,
+					oldListener: n,
+					newListener: void 0
+				});
+			}
+			i.length > 0 && t.commandStack.execute(new Ut(t, `解绑事件 ${e}`, { changes: i }));
+		}
+		return (e, t) => (S(), c("div", {
+			key: n.designerState.setterShareState.panelVersion,
+			class: "designer-event-panel"
+		}, [n.designerState.existsSelection ? (S(), c(r, { key: 1 }, [(S(!0), c(r, null, T(p.value, (e) => (S(), c("div", {
+			key: e.title,
+			class: "designer-event-group"
+		}, [l("div", bn, D(e.title), 1), (S(!0), c(r, null, T(e.items, (e) => (S(), c("div", {
+			key: e.name,
+			class: "designer-event-item"
+		}, [l("div", xn, [u(D(e.description ?? e.name) + " ", 1), l("span", Sn, D(e.name), 1)]), l("div", Cn, [
+			_(e.name) ? (S(), o(O(xe), {
+				key: 0,
+				color: "blue",
+				class: "designer-event-tag"
+			}, {
+				default: A(() => [...t[2] ||= [u("已绑定", -1)]]),
+				_: 1
+			})) : s("", !0),
+			d(O(F), {
+				size: "small",
+				type: "link",
+				onClick: (t) => y(e.name)
+			}, {
+				default: A(() => [u(D(_(e.name) ? "编辑" : "绑定"), 1)]),
+				_: 2
+			}, 1032, ["onClick"]),
+			_(e.name) ? (S(), o(O(F), {
+				key: 1,
+				size: "small",
+				type: "link",
+				danger: "",
+				onClick: (t) => x(e.name)
+			}, {
+				default: A(() => [...t[3] ||= [u("解绑", -1)]]),
+				_: 1
+			}, 8, ["onClick"])) : s("", !0)
+		])]))), 128))]))), 128)), m.event ? (S(), c("div", wn, [
+			l("div", Tn, [t[4] ||= u(" 编辑事件函数: ", -1), l("b", null, D(m.event), 1)]),
+			j(l("textarea", {
+				class: "designer-event-textarea",
+				"onUpdate:modelValue": t[0] ||= (e) => m.code = e,
+				placeholder: "函数体字符串(如: console.log('click', event)), 留空清除绑定"
+			}, null, 512), [[ne, m.code]]),
+			l("div", En, [d(O(F), {
+				size: "small",
+				type: "primary",
+				onClick: b
+			}, {
+				default: A(() => [...t[5] ||= [u("保存", -1)]]),
+				_: 1
+			}), d(O(F), {
+				size: "small",
+				onClick: t[1] ||= (e) => m.event = ""
+			}, {
+				default: A(() => [...t[6] ||= [u("取消", -1)]]),
+				_: 1
+			})])
+		])) : s("", !0)], 64)) : (S(), o(O(he), {
+			key: 0,
+			description: "请选择画布中的组件"
+		}))]));
+	}
+}), [["__scopeId", "data-v-f03d037b"]]), On = {
+	key: 0,
+	class: "designer-advanced-item"
+}, kn = { class: "designer-advanced-control" }, An = { class: "designer-advanced-switch" }, jn = ["checked"], Mn = {
+	key: 1,
+	class: "designer-advanced-item designer-advanced-column"
+}, Nn = { class: "designer-advanced-control" }, Pn = ["value"], Fn = {
+	key: 2,
+	class: "designer-advanced-item designer-advanced-column"
+}, In = { class: "designer-advanced-control" }, Ln = ["value"], Rn = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "SetterAdvancedPanel",
+	__name: "SetterAdvancedPanel",
+	props: {
+		designerState: {},
+		advancedPanel: {}
+	},
+	setup(e) {
+		let n = e, i = a(() => n.designerState.selectNodes);
+		function u(e) {
+			let t = P.trim(e).match(/^(.+?)\s+in\s+(.+)$/);
+			if (!t) return;
+			let n = P.trim(t[1]).replace(/^\((.+)\)$/, "$1"), r = P.trim(t[2]), i = n.split(",").map((e) => P.trim(e)).filter((e) => e.length > 0);
+			if (!(i.length <= 0 || r.length <= 0)) return {
+				data: r,
+				item: i[0],
+				key: i[1],
+				index: i[2]
+			};
+		}
+		function d(e) {
+			if (t.isStr(e)) return e;
+			if (!t.isObj(e)) return "";
+			let n = [
+				e.item,
+				e.key,
+				e.index
+			].filter((e) => t.isStr(e) && P.trim(e).length > 0).map((e) => P.trim(e)), r = t.isStr(e.data) ? P.trim(e.data) : "";
+			return n.length <= 0 || r.length <= 0 ? "" : n.length > 1 ? `(${n.join(", ")}) in ${r}` : `${n[0]} in ${r}`;
+		}
+		function f(e) {
+			if (!i.value[0]) return;
+			let n = /* @__PURE__ */ new Set();
+			for (let r of i.value) {
+				let i = r.directives[e];
+				n.add(t.isObj(i) && !t.isStr(i) ? i.value : i);
+			}
+			if (n.size === 1) return n.values().next().value;
+		}
+		let p = a(() => {
+			let e = i.value[0];
+			return !e || (t.isObj(e.props?.style) ? e.props.style : {}).display !== "none";
+		}), m = a(() => t.isStr(f("if")) ? f("if") : String(f("if") ?? "")), h = a(() => d(f("for")));
+		function g(e, t, n) {
+			n.length <= 0 || e.commandStack.execute(new W(e, t, { changes: n }));
+		}
+		function _(e) {
+			let r = n.designerState;
+			if (!r.blockInstance) return;
+			let a = [];
+			for (let n of i.value) {
+				let r = t.isObj(n.props?.style) ? { ...n.props.style } : {}, i = n.props.style;
+				e ? r.display === "none" && delete r.display : r.display = "none", !P.isEqual(i, r) && a.push({
+					nodeId: n.id,
+					changeKey: "style:display",
+					oldValue: i,
+					newValue: r,
+					write: (e, n) => {
+						e.props.style = t.isObj(n) ? n : void 0;
+					}
+				});
+			}
+			g(r, e ? "显示节点" : "隐藏节点", a);
+		}
+		function v(e, r) {
+			let a = n.designerState;
+			if (!a.blockInstance) return;
+			let o = P.trim(String(r ?? "")), s;
+			if (e === "for") {
+				if (o.length > 0 && (s = u(o), !s)) return;
+			} else s = o.length > 0 ? o : void 0;
+			let c = [];
+			for (let n of i.value) {
+				let r = n.directives[e];
+				P.isEqual(r, s) || c.push({
+					nodeId: n.id,
+					changeKey: `directives:${e}`,
+					oldValue: r,
+					newValue: s,
+					write: (n, r) => {
+						t.noValue(r) ? delete n.directives[e] : n.directives[e] = r;
+					}
+				});
+			}
+			g(a, `修改 v-${e} 指令`, c);
+		}
+		return (e, t) => (S(), c("div", {
+			key: n.designerState.setterShareState.panelVersion,
+			class: "designer-advanced-panel"
+		}, [n.designerState.existsSelection ? (S(), c(r, { key: 1 }, [
+			n.advancedPanel?.disableVShow ? s("", !0) : (S(), c("div", On, [t[3] ||= l("div", { class: "designer-advanced-label" }, "显示(v-show)", -1), l("div", kn, [l("label", An, [l("input", {
+				type: "checkbox",
+				checked: p.value,
+				onChange: t[0] ||= (e) => _(e.target.checked)
+			}, null, 40, jn), l("span", null, D(p.value ? "显示" : "隐藏"), 1)])])])),
+			n.advancedPanel?.disableVIf ? s("", !0) : (S(), c("div", Mn, [t[4] ||= l("div", { class: "designer-advanced-label" }, "条件渲染(v-if)", -1), l("div", Nn, [l("textarea", {
+				class: "designer-advanced-textarea",
+				placeholder: "条件表达式, 如: {{ flag }} 或 flag === 1; 留空删除指令",
+				value: m.value,
+				onChange: t[1] ||= (e) => v("if", e.target.value)
+			}, null, 40, Pn)])])),
+			n.advancedPanel?.disableVFor ? s("", !0) : (S(), c("div", Fn, [t[5] ||= l("div", { class: "designer-advanced-label" }, "循环渲染(v-for)", -1), l("div", In, [l("textarea", {
+				class: "designer-advanced-textarea",
+				placeholder: "循环表达式, 如: item in items; 留空删除指令",
+				value: h.value,
+				onChange: t[2] ||= (e) => v("for", e.target.value)
+			}, null, 40, Ln)])]))
+		], 64)) : (S(), o(O(he), {
+			key: 0,
+			description: "请选择画布中的组件"
+		}))]));
+	}
+}), [["__scopeId", "data-v-32c36650"]]), zn = { class: "designer-material-panel" }, Bn = { class: "designer-material-search" }, Vn = { key: 0 }, Hn = { class: "designer-material-group-title" }, Un = { class: "designer-material-items" }, Wn = ["data-component-type", "title"], Gn = {
+	key: 1,
+	class: "designer-material-empty"
+}, Kn = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "MaterialPanel",
+	__name: "MaterialPanel",
+	props: {
+		designerState: {},
+		materialTabs: {},
+		dependence: {}
+	},
+	setup(e) {
+		let t = e, n = w(""), i = w({});
+		x(async () => {
+			let e = /* @__PURE__ */ new Set(), n = (r) => {
+				if (e.has(r)) return;
+				e.add(r);
+				let i = t.dependence?.[r];
+				i && i.forEach((e) => n(e));
+			};
+			for (let e of t.materialTabs ?? []) for (let t of e.groups) for (let e of t.types) n(e);
+			if (!(e.size <= 0)) try {
+				let n = Array.from(e), [r] = await Promise.all([t.designerState.designerEngine.componentManage.loadAsyncComponentMeta(n), t.designerState.designerEngine.componentManage.loadAsyncComponent(n.filter((e) => !ue(e)))]);
+				i.value = r;
+			} catch (e) {
+				console.warn("加载物料元信息失败", e);
+			}
+		});
+		let u = a(() => {
+			let e = (n.value ?? "").trim().toLowerCase();
+			return (t.materialTabs ?? []).map((t) => ({
+				...t,
+				groups: t.groups.map((e) => ({
+					...e,
+					metas: e.types.map((e) => i.value[e]).filter(Boolean)
+				})).filter((e) => e.metas.length > 0).map((t) => ({
+					...t,
+					metas: e.length > 0 ? t.metas.filter((t) => t.name.toLowerCase().includes(e) || t.type.toLowerCase().includes(e)) : t.metas
+				})).filter((e) => e.metas.length > 0)
+			})).filter((e) => e.groups.length > 0);
+		}), f = a(() => u.value.map((e) => ({
+			key: e.title,
+			label: e.title
+		})));
+		return (e, t) => (S(), c("div", zn, [l("div", Bn, [d(O(ge), {
+			value: n.value,
+			"onUpdate:value": t[0] ||= (e) => n.value = e,
+			size: "small",
+			allowClear: "",
+			placeholder: "搜索组件"
+		}, null, 8, ["value"])]), u.value.length > 0 ? (S(), o(O(be), {
+			key: 0,
+			size: "small",
+			class: "designer-material-tabs",
+			items: f.value
+		}, {
+			contentRender: A(({ item: e }) => [(S(!0), c(r, null, T(u.value, (t) => (S(), c(r, { key: t.title }, [t.title === e.key ? (S(), c("div", Vn, [(S(!0), c(r, null, T(t.groups, (e) => (S(), c("div", {
+				key: e.title,
+				class: "designer-material-group"
+			}, [l("div", Hn, D(e.title), 1), l("div", Un, [(S(!0), c(r, null, T(e.metas, (e) => (S(), c("div", {
+				key: e.type,
+				class: "draggable material-item",
+				"data-component-type": e.type,
+				title: e.type
+			}, D(e.name), 9, Wn))), 128))])]))), 128))])) : s("", !0)], 64))), 128))]),
+			_: 1
+		}, 8, ["items"])) : (S(), c("div", Gn, "未配置物料或无匹配组件"))]));
+	}
+}), [["__scopeId", "data-v-7b3124e5"]]), qn = { class: "designer-outline-panel" }, Jn = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "OutlinePanel",
+	__name: "OutlinePanel",
+	props: { designerState: {} },
+	setup(e) {
+		let n = e;
+		function r(e, i = 0) {
+			if (i > 30) return [];
+			let a = [];
+			for (let o of e) {
+				if (!t.isObj(o) || t.isArray(o)) continue;
+				let e = o, s = n.designerState.designerEngine.componentManage.getComponentMeta(e.type), c = [];
+				c.push(...r(e.items ?? [], i + 1));
+				for (let t in e.slots) {
+					let n = r(e.slots[t] ?? [], i + 1);
+					n.length > 0 && c.push(...n);
+				}
+				a.push({
+					title: s?.name ?? e.type,
+					key: e.id,
+					children: c.length > 0 ? c : void 0
+				});
+			}
+			return a;
+		}
+		let i = a(() => {
+			let e = n.designerState.blockInstance?.globalContext.runtimeBlock;
+			return e ? r(e.items ?? []) : [];
+		}), s = a(() => n.designerState.selections.map((e) => e.nodeId).filter(Boolean));
+		function l(e) {
+			e.length === 1 && n.designerState.selectNodeByIds([e[0]]);
+		}
+		return (e, t) => (S(), c("div", qn, [i.value.length <= 0 ? (S(), o(O(he), {
+			key: 0,
+			description: "画布为空"
+		})) : (S(), o(O(we), {
+			key: 1,
+			"block-node": "",
+			"tree-data": i.value,
+			"selected-keys": s.value,
+			"default-expand-all": "",
+			onSelect: l
+		}, null, 8, ["tree-data", "selected-keys"]))]));
+	}
+}), [["__scopeId", "data-v-08830f87"]]), Yn = { class: "designer-workbench" }, Xn = { class: "designer-workbench-toolbar" }, Zn = { class: "designer-workbench-toolbar-group" }, Qn = { class: "designer-workbench-toolbar-group" }, $n = { class: "designer-workbench-body" }, er = { class: "designer-workbench-left" }, tr = { class: "designer-workbench-left-content" }, nr = { class: "designer-workbench-center" }, rr = { class: "designer-workbench-right" }, ir = { class: "designer-workbench-right-content" }, ar = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "Workbench",
+	__name: "Workbench",
+	props: {
+		designerState: {},
+		block: {},
+		materialTabs: {}
+	},
+	setup(e) {
+		let t = e, n = a(() => t.designerState.designerEngine), r = w(!1), i = w("material"), s = w("props");
+		function f() {
+			t.designerState.commandStack.undo(), t.designerState.clearSelections();
+		}
+		function p() {
+			t.designerState.commandStack.redo(), t.designerState.clearSelections();
+		}
+		function m() {
+			let e = t.designerState.selections.map((e) => e.nodeId).filter(Boolean);
+			if (e.length <= 0) return;
+			let n = new Vt(t.designerState, `删除 ${e.length} 个组件`, {
+				nodeIds: e,
+				onExecute: () => t.designerState.clearSelections()
+			});
+			t.designerState.commandStack.execute(n);
+		}
+		function h() {
+			let e = t.designerState.blockInstance?.globalContext.runtimeBlock;
+			if (!e) return;
+			let n = (e.items ?? []).filter((e) => !!e && typeof e == "object" && !Array.isArray(e)).map((e) => e.id);
+			if (n.length <= 0) {
+				Te.info("画布已经是空的");
+				return;
+			}
+			let r = new Vt(t.designerState, "清空画布", {
+				nodeIds: n,
+				onExecute: () => t.designerState.clearSelections()
+			});
+			t.designerState.commandStack.execute(r);
+		}
+		let g = a(() => t.designerState.selectedComponentMeta?.setter?.props), _ = a(() => t.designerState.selectedComponentMeta?.setter?.style), v = a(() => t.designerState.selectedComponentMeta?.setter?.events), y = a(() => t.designerState.selectedComponentMeta?.setter?.advanced), b = a(() => {
+			if (!r.value) return;
+			let e = t.designerState.blockInstance?.globalContext.runtimeBlock;
+			return e ? zt(e) : void 0;
+		});
+		return (a, x) => (S(), c("div", Yn, [
+			l("div", Xn, [
+				l("div", Zn, [
+					d(O(I), { title: "撤销 Ctrl+Z" }, {
+						default: A(() => [d(O(F), {
+							size: "small",
+							type: "text",
+							disabled: !e.designerState.commandStack.canUndo || r.value,
+							onClick: f
+						}, {
+							default: A(() => [d(O(je))]),
+							_: 1
+						}, 8, ["disabled"])]),
+						_: 1
+					}),
+					d(O(I), { title: "重做 Ctrl+Y" }, {
+						default: A(() => [d(O(F), {
+							size: "small",
+							type: "text",
+							disabled: !e.designerState.commandStack.canRedo || r.value,
+							onClick: p
+						}, {
+							default: A(() => [d(O(Ae))]),
+							_: 1
+						}, 8, ["disabled"])]),
+						_: 1
+					}),
+					d(O(I), { title: "删除选中 Delete" }, {
+						default: A(() => [d(O(F), {
+							size: "small",
+							type: "text",
+							danger: "",
+							disabled: !e.designerState.existsSelection || r.value,
+							onClick: m
+						}, {
+							default: A(() => [d(O(De))]),
+							_: 1
+						}, 8, ["disabled"])]),
+						_: 1
+					}),
+					d(O(I), { title: "清空画布" }, {
+						default: A(() => [d(O(F), {
+							size: "small",
+							type: "text",
+							danger: "",
+							disabled: r.value,
+							onClick: h
+						}, {
+							default: A(() => [d(O(Ee))]),
+							_: 1
+						}, 8, ["disabled"])]),
+						_: 1
+					})
+				]),
+				x[3] ||= l("div", { class: "designer-workbench-toolbar-title" }, "可视化页面设计器", -1),
+				l("div", Qn, [d(O(F), {
+					size: "small",
+					type: r.value ? "primary" : "default",
+					onClick: x[0] ||= (e) => r.value = !r.value
+				}, {
+					default: A(() => [r.value ? (S(), o(O(Oe), { key: 1 })) : (S(), o(O(ke), { key: 0 })), u(" " + D(r.value ? "编辑" : "预览"), 1)]),
+					_: 1
+				}, 8, ["type"])])
+			]),
+			l("div", $n, [
+				l("div", er, [d(O(be), {
+					activeKey: i.value,
+					"onUpdate:activeKey": x[1] ||= (e) => i.value = e,
+					size: "small",
+					class: "designer-workbench-left-tabs",
+					items: [{
+						key: "material",
+						label: "物料"
+					}, {
+						key: "outline",
+						label: "大纲"
+					}]
+				}, null, 8, ["activeKey"]), l("div", tr, [j(d(Kn, {
+					designerState: e.designerState,
+					materialTabs: t.materialTabs
+				}, null, 8, ["designerState", "materialTabs"]), [[k, i.value === "material"]]), j(d(Jn, { designerState: e.designerState }, null, 8, ["designerState"]), [[k, i.value === "outline"]])])]),
+				l("div", nr, [r.value ? (S(), o(O(ie), {
+					key: 1,
+					class: "designer-workbench-preview",
+					componentManage: n.value.componentManage,
+					block: b.value,
+					isDesigning: !1
+				}, null, 8, ["componentManage", "block"])) : (S(), o(Kt, {
+					key: 0,
+					designerState: e.designerState,
+					block: t.block
+				}, null, 8, ["designerState", "block"]))]),
+				l("div", rr, [d(O(be), {
+					activeKey: s.value,
+					"onUpdate:activeKey": x[2] ||= (e) => s.value = e,
+					size: "small",
+					class: "designer-workbench-right-tabs",
+					items: [
+						{
+							key: "props",
+							label: "属性"
+						},
+						{
+							key: "style",
+							label: "样式"
+						},
+						{
+							key: "events",
+							label: "事件"
+						},
+						{
+							key: "advanced",
+							label: "高级"
+						}
+					]
+				}, null, 8, ["activeKey"]), l("div", ir, [
+					j(d(rn, {
+						designerState: e.designerState,
+						propsPanel: g.value
+					}, null, 8, ["designerState", "propsPanel"]), [[k, s.value === "props"]]),
+					j(d(yn, {
+						designerState: e.designerState,
+						stylePanel: _.value
+					}, null, 8, ["designerState", "stylePanel"]), [[k, s.value === "style"]]),
+					j(d(Dn, {
+						designerState: e.designerState,
+						eventPanel: v.value
+					}, null, 8, ["designerState", "eventPanel"]), [[k, s.value === "events"]]),
+					j(d(Rn, {
+						designerState: e.designerState,
+						advancedPanel: y.value
+					}, null, 8, ["designerState", "advancedPanel"]), [[k, s.value === "advanced"]])
+				])])
+			]),
+			d(Jt, { designerEngine: n.value }, null, 8, ["designerEngine"])
+		]));
+	}
+}), [["__scopeId", "data-v-f0d077aa"]]), or = "存在多个不同值", sr = (e) => {
+	if (!t.noValue(e)) return h(e);
+}, J = (e) => P.toString(e), cr = (e) => !!e, lr = (e) => {
+	if (!t.noValue(e)) return e = P.toNumber(e), (e === Infinity || isNaN(e)) && (e = void 0), e;
+}, ur = (e) => e ? JSON.stringify(e, null, 4) : "";
+function Y() {
+	return {
+		multipleValues: !1,
+		value: void 0
+	};
+}
+function X(e, n, r) {
+	let i = dr(e, n, r);
+	return t.isFunction(r) && (i = r(i)), i;
+}
+function dr(e, n, r) {
+	let { nodes: i, propsName: a, getPropsValue: o } = e;
+	if (!i || !a && !t.isFunction(o)) return;
+	let s = /* @__PURE__ */ new Set();
+	for (let n of i) {
+		let i;
+		if (o ? i = o(n.props, n) : a && (i = P.hasIn(n.props, a) ? n.props?.[a] : e.defPropsValue), t.isFunction(r) && (i = r(i)), t.noValue(i) && (i = void 0), s.add(i), s.size > 1) break;
+	}
+	if (!(s.size <= 0)) {
+		if (s.size === 1) return s.values().next().value;
+		n.multipleValues = !0, n.value = void 0;
+	}
+}
+function Z(e, n, r, i) {
+	let { designerState: a, blockInstance: o, nodes: s, propsName: c, applyPropsValue: l, disableReRender: u, recalcAuxToolPosition: d, recalcAuxToolPositionDelay: f, updateVNodeKey: p } = e, m = !1;
+	if (!s || !c && !t.isFunction(l)) return m;
+	if (t.isFunction(l)) {
+		for (let e of s) m = l(e.props, i, e, r) !== !1, p && m && (e.designExt.designKey = `__design_key_${Date.now()}_${Math.random().toString(36).slice(2, 12)}`);
+		return m && (n.multipleValues = !1, fr(a, o, s, u, d, f)), m;
+	}
+	if (!c) return m;
+	let h = [];
+	for (let e of s) {
+		if (!e.props) continue;
+		let t = P.hasIn(e.props, c) ? P.cloneDeep(e.props[c]) : void 0;
+		P.isEqual(t, i) || h.push({
+			nodeId: e.id,
+			changeKey: `props:${c}`,
+			oldValue: t,
+			newValue: i,
+			write: (e, t) => {
+				e.props[c] = t, p && (e.designExt.designKey = `__design_key_${Date.now()}_${Math.random().toString(36).slice(2, 12)}`);
+			}
+		});
+	}
+	if (h.length <= 0) return m;
+	let g = new W(a, `修改属性 ${c}`, {
+		changes: h,
+		disableReRender: u
+	});
+	return m = a.commandStack.execute(g), m && (n.multipleValues = !1), m;
+}
+function fr(e, t, n, r, i, a) {
+	if (!r && t && (t.$forceUpdate(), i)) {
+		let r = () => {
+			let t = n.map((e) => e.id);
+			for (let n of e.selections) n.nodeId && t.includes(n.nodeId) && n.recalcPosition();
+		};
+		t.$nextTick(() => {
+			(a ?? 0) > 0 ? setTimeout(r, a) : r();
+		});
+	}
+}
+function Q(e, t, n) {
+	re(() => e.nodes, () => {
+		t.value = X(e, t, n);
+	});
+}
+function $(e, n, r, i) {
+	return {
+		designerState: e.designerState,
+		blockInstance: e.blockInstance,
+		nodes: e.nodes,
+		getValue: () => n.value,
+		setValue: (a) => {
+			t.isFunction(i) && (a = i(a)), n.value = a, Z(e, n, r, a);
+		}
+	};
+}
+//#endregion
+//#region src/components/setter/StringSetter.vue
+var pr = /* @__PURE__ */ f({
+	name: "StringSetter",
+	__name: "StringSetter",
+	props: {
+		designerState: {},
+		blockInstance: {},
+		nodes: {},
+		watchValue: { type: Boolean },
+		propsName: {},
+		getPropsValue: {},
+		defPropsValue: {},
+		applyPropsValue: {},
+		disableReRender: { type: Boolean },
+		updateVNodeKey: { type: Boolean },
+		recalcAuxToolPosition: { type: Boolean },
+		recalcAuxToolPositionDelay: {}
+	},
+	setup(e, { expose: t }) {
+		let n = p(), r = e, i = C({ ...Y() });
+		return i.value = X(r, i, J), Q(r, i, J), t({ ...$(r, i, n?.proxy, J) }), (e, t) => (S(), o(O(ge), g({
+			placeholder: i.multipleValues ? "存在多个不同值" : "请输入",
+			title: i.multipleValues ? "存在多个不同值" : void 0
+		}, e.$attrs, {
+			value: i.value,
+			"onUpdate:value": t[0] ||= (e) => i.value = e,
+			onChange: t[1] ||= () => O(Z)(r, i, O(n)?.proxy, i.value)
+		}), null, 16, [
+			"placeholder",
+			"title",
+			"value"
+		]));
+	}
+}), mr = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "NumberSetter",
+	__name: "NumberSetter",
+	props: {
+		designerState: {},
+		blockInstance: {},
+		nodes: {},
+		watchValue: { type: Boolean },
+		propsName: {},
+		getPropsValue: {},
+		defPropsValue: {},
+		applyPropsValue: {},
+		disableReRender: { type: Boolean },
+		updateVNodeKey: { type: Boolean },
+		recalcAuxToolPosition: { type: Boolean },
+		recalcAuxToolPositionDelay: {}
+	},
+	setup(e, { expose: t }) {
+		let n = p(), r = e, i = C({ ...Y() });
+		return i.value = X(r, i, lr), Q(r, i, lr), t({ ...$(r, i, n?.proxy, lr) }), (e, t) => (S(), o(O(_e), g({
+			class: "designer-setter-full",
+			placeholder: i.multipleValues ? "存在多个不同值" : "请输入"
+		}, e.$attrs, {
+			value: i.value,
+			"onUpdate:value": t[0] ||= (e) => i.value = e,
+			onChange: t[1] ||= (e) => O(Z)(r, i, O(n)?.proxy, e)
+		}), null, 16, ["placeholder", "value"]));
+	}
+}), [["__scopeId", "data-v-88c57114"]]), hr = /* @__PURE__ */ f({
+	name: "BoolSetter",
+	__name: "BoolSetter",
+	props: {
+		designerState: {},
+		blockInstance: {},
+		nodes: {},
+		watchValue: { type: Boolean },
+		propsName: {},
+		getPropsValue: {},
+		defPropsValue: {},
+		applyPropsValue: {},
+		disableReRender: { type: Boolean },
+		updateVNodeKey: { type: Boolean },
+		recalcAuxToolPosition: { type: Boolean },
+		recalcAuxToolPositionDelay: {}
+	},
+	setup(e, { expose: t }) {
+		let n = p(), r = e, i = C({ ...Y() });
+		return i.value = X(r, i, cr), Q(r, i, cr), t({ ...$(r, i, n?.proxy, cr) }), (e, t) => (S(), o(O(ye), g(e.$attrs, {
+			checked: !!i.value,
+			onChange: t[0] ||= (e) => {
+				i.value = e, O(Z)(r, i, O(n)?.proxy, e);
+			}
+		}), null, 16, ["checked"]));
+	}
+}), gr = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "SelectSetter",
+	__name: "SelectSetter",
+	props: {
+		designerState: {},
+		blockInstance: {},
+		nodes: {},
+		watchValue: { type: Boolean },
+		propsName: {},
+		getPropsValue: {},
+		defPropsValue: {},
+		applyPropsValue: {},
+		disableReRender: { type: Boolean },
+		updateVNodeKey: { type: Boolean },
+		recalcAuxToolPosition: { type: Boolean },
+		recalcAuxToolPositionDelay: {}
+	},
+	setup(e, { expose: t }) {
+		let n = p(), r = e, i = C({ ...Y() });
+		return i.value = X(r, i, J), Q(r, i, J), t({ ...$(r, i, n?.proxy, J) }), (e, t) => (S(), o(O(ve), g({
+			class: "designer-setter-full",
+			placeholder: i.multipleValues ? "存在多个不同值" : "请选择"
+		}, e.$attrs, {
+			value: i.value,
+			onChange: t[0] ||= (e) => {
+				i.value = e, O(Z)(r, i, O(n)?.proxy, e);
+			}
+		}), null, 16, ["placeholder", "value"]));
+	}
+}), [["__scopeId", "data-v-1e6d81c2"]]), _r = { class: "designer-color-setter" }, vr = ["value"], yr = { class: "color-text" }, br = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "ColorSetter",
+	__name: "ColorSetter",
+	props: {
+		designerState: {},
+		blockInstance: {},
+		nodes: {},
+		watchValue: { type: Boolean },
+		propsName: {},
+		getPropsValue: {},
+		defPropsValue: {},
+		applyPropsValue: {},
+		disableReRender: { type: Boolean },
+		updateVNodeKey: { type: Boolean },
+		recalcAuxToolPosition: { type: Boolean },
+		recalcAuxToolPositionDelay: {}
+	},
+	setup(e, { expose: t }) {
+		let n = p(), r = e, i = C({ ...Y() });
+		i.value = X(r, i, J), Q(r, i, J);
+		function a() {
+			i.value = void 0, Z(r, i, n?.proxy, void 0);
+		}
+		return t({ ...$(r, i, n?.proxy, J) }), (e, t) => (S(), c("div", _r, [
+			l("input", {
+				class: "color-input",
+				type: "color",
+				value: i.value ?? "#000000",
+				onChange: t[0] ||= (e) => {
+					i.value = e.target.value, O(Z)(r, i, O(n)?.proxy, i.value);
+				}
+			}, null, 40, vr),
+			l("span", yr, D(i.value), 1),
+			j(l("span", {
+				class: "color-clear",
+				title: "清除颜色",
+				onClick: a
+			}, "×", 512), [[k, i.value]])
+		]));
+	}
+}), [["__scopeId", "data-v-dc1ec0da"]]), xr = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "DateSetter",
+	__name: "DateSetter",
+	props: {
+		designerState: {},
+		blockInstance: {},
+		nodes: {},
+		watchValue: { type: Boolean },
+		propsName: {},
+		getPropsValue: {},
+		defPropsValue: {},
+		applyPropsValue: {},
+		disableReRender: { type: Boolean },
+		updateVNodeKey: { type: Boolean },
+		recalcAuxToolPosition: { type: Boolean },
+		recalcAuxToolPositionDelay: {}
+	},
+	setup(e, { expose: t }) {
+		let n = p(), r = e, i = C({ ...Y() });
+		i.value = X(r, i, J), Q(r, i, J);
+		function a(e) {
+			return e ? Ne(e) : void 0;
+		}
+		return t({ ...$(r, i, n?.proxy, J) }), (e, t) => (S(), o(O(me), g({
+			class: "designer-setter-full",
+			value: a(i.value)
+		}, e.$attrs, {
+			valueFormat: "YYYY-MM-DD",
+			onChange: t[0] ||= (e, t) => {
+				let a = Array.isArray(t) ? t[0] : t;
+				i.value = a || void 0, O(Z)(r, i, O(n)?.proxy, i.value);
+			}
+		}), null, 16, ["value"]));
+	}
+}), [["__scopeId", "data-v-bb6b512f"]]), Sr = /*#__PURE__*/ G(/* @__PURE__ */ f({
+	name: "TimeSetter",
+	__name: "TimeSetter",
+	props: {
+		designerState: {},
+		blockInstance: {},
+		nodes: {},
+		watchValue: { type: Boolean },
+		propsName: {},
+		getPropsValue: {},
+		defPropsValue: {},
+		applyPropsValue: {},
+		disableReRender: { type: Boolean },
+		updateVNodeKey: { type: Boolean },
+		recalcAuxToolPosition: { type: Boolean },
+		recalcAuxToolPositionDelay: {}
+	},
+	setup(e, { expose: t }) {
+		let n = p(), r = e, i = C({ ...Y() });
+		i.value = X(r, i, J), Q(r, i, J);
+		function a(e) {
+			return e ? Ne(e, "HH:mm:ss") : void 0;
+		}
+		return t({ ...$(r, i, n?.proxy, J) }), (e, t) => (S(), o(O(Ce), g({
+			class: "designer-setter-full",
+			value: a(i.value)
+		}, e.$attrs, {
+			valueFormat: "HH:mm:ss",
+			onChange: t[0] ||= (e, t) => {
+				let a = Array.isArray(t) ? t[0] : t;
+				i.value = a || void 0, O(Z)(r, i, O(n)?.proxy, i.value);
+			}
+		}), null, 16, ["value"]));
+	}
+}), [["__scopeId", "data-v-4cba15d0"]]), Cr = /* @__PURE__ */ f({
+	name: "EditorSetter",
+	__name: "EditorSetter",
+	props: {
+		designerState: {},
+		blockInstance: {},
+		nodes: {},
+		watchValue: { type: Boolean },
+		propsName: {},
+		getPropsValue: {},
+		defPropsValue: {},
+		applyPropsValue: {},
+		disableReRender: { type: Boolean },
+		updateVNodeKey: { type: Boolean },
+		recalcAuxToolPosition: { type: Boolean },
+		recalcAuxToolPositionDelay: {}
+	},
+	setup(e, { expose: t }) {
+		let n = p(), r = e, i = C({ ...Y() });
+		return i.value = X(r, i, J), Q(r, i, J), t({ ...$(r, i, n?.proxy, J) }), (e, t) => (S(), o(O(Se), g({ placeholder: i.multipleValues ? "存在多个不同值" : "请输入内容" }, e.$attrs, {
+			value: i.value,
+			"onUpdate:value": t[0] ||= (e) => i.value = e,
+			autoSize: {
+				minRows: 2,
+				maxRows: 12
+			},
+			onChange: t[1] ||= () => O(Z)(r, i, O(n)?.proxy, i.value)
+		}), null, 16, ["placeholder", "value"]));
+	}
+});
+//#endregion
+//#region src/register/RegisterSetter.ts
+function wr(e) {
+	e.registerComponent("StringSetter", pr), e.registerComponent("NumberSetter", mr), e.registerComponent("BoolSetter", hr), e.registerComponent("SelectSetter", gr), e.registerComponent("ColorSetter", br), e.registerComponent("DateSetter", xr), e.registerComponent("TimeSetter", Sr), e.registerComponent("EditorSetter", Cr);
+}
+//#endregion
+//#region src/index.ts
+var Tr = "1.1.0", Er = 6;
+//#endregion
+export { V as AbstractCursorEvent, Nt as AddNodesCommand, Tt as AuxToolEffect, Je as CommandEvent, pt as CommandStack, at as Cursor, St as CursorEffect, L as CursorStatus, Er as DESIGNER_STAGE, Tr as DESIGNER_VERSION, Kt as DesignCanvas, Pe as DesignerCursorMode, Ze as DesignerDriver, Qe as DesignerEffect, _t as DesignerEngine, B as DesignerEvent, Fe as DesignerLayout, Xe as DesignerModule, ht as DesignerState, Ie as DesignerTab, R as Direction, vt as DragDropDriver, qe as DragDropEvent, Jt as DragGhost, Ve as DragMoveEvent, Be as DragStartEvent, He as DragStopEvent, ot as DraggingCmpMetas, Ct as DraggingEffect, Le as EngineMountEvent, Re as EngineUnmountEvent, Ye as EventBus, lt as HoverDashed, st as Insertion, yt as KeyboardDriver, Kn as MaterialPanel, bt as MouseClickDriver, Ue as MouseClickEvent, We as MouseDoubleClickEvent, xt as MouseMoveDriver, Ge as MouseMoveEvent, Pt as MoveNodesCommand, Ht as NodeOperationEffect, Jn as OutlinePanel, z as PointDirection, Vt as RemoveNodesCommand, ut as Selection, Rn as SetterAdvancedPanel, Dn as SetterEventPanel, rn as SetterPropsPanel, mt as SetterShareState, yn as SetterStylePanel, Ke as ShortcutKeyEvent, Ut as UpdateListenersCommand, W as UpdatePropsCommand, ar as Workbench, At as applyAddNodes, un as applyClass, kt as applyMoveNodes, Z as applySetterValue, ln as applyStyle, on as applyStyleDebounceTime, H as calcAuxToolPosition, U as calcDistance, rt as calcNodeToCursorDistance, it as calcPositionDelta, et as defCursorPosition, ct as existsPlaceholder, fr as forceUpdateBlock, dn as getActiveClass, Y as getDefState, Dt as getNodeDocIndex, Et as getNodeInsertTarget, $ as getSetterExpose, X as getSetterValue, sn as getStyle, jt as insertionToTarget, wt as isAllowDrag, ur as jsonStringify, or as multipleValuesText, wr as registerSetterComponents, zt as runtimeNodeToDesignNode, an as styleGroupDefines, cr as toBool, lr as toNumber, sr as toObj, K as toObjectStyle, Mt as toRuntimeNodes, J as toStr, Q as watchNodes };
 
+//# sourceMappingURL=ease-forge-designer.esm.js.map