@ptahjs/dnd 0.0.3 → 0.1.1

package/dist/dnd.js

@@ -2,18 +2,31 @@
 var e = class {
 	#e = /* @__PURE__ */ new Map();
 	emit(e, t) {
+		let n = this.#e.get(e);
+		if (!n || n.length === 0) return t;
+		let r = n.slice();
+		for (let n of r) try {
+			n(t);
+		} catch (t) {
+			console.error(`[EventDispatcher] handler error for "${e}":`, t);
+		}
+		return t;
+	}
+	pipe(e, t) {
 		let n = this.#e.get(e);
 		if (!n || n.length === 0) return t;
 		let r = t;
-		for (let e of n) {
-			let t = e(r);
-			t !== void 0 && (r = t);
+		for (let t of n.slice()) try {
+			let e = t(r);
+			e !== void 0 && (r = e);
+		} catch (t) {
+			console.error(`[EventDispatcher] pipe handler error for "${e}":`, t);
 		}
 		return r;
 	}
 	on(e, t) {
 		let n = this.#e.get(e);
-		return n ? n.push(t) : this.#e.set(e, [t]), this;
+		return n ? n.includes(t) || n.push(t) : this.#e.set(e, [t]), this;
 	}
 	off(e, t) {
 		let n = this.#e.get(e);
@@ -54,37 +67,46 @@ var e = class {
 	indicatorTop: "dnd-indicator--top",
 	indicatorRight: "dnd-indicator--right",
 	indicatorBottom: "dnd-indicator--bottom",
-	indicatorLeft: "dnd-indicator--left"
-}, r = .5, i = 1 / 3;
+	indicatorLeft: "dnd-indicator--left",
+	marquee: "dnd-marquee"
+}, r = .5, i = 1 / 3, a = {
+	MARQUEE_MOVE: 5,
+	DRAG_START: 3
+}, o = {
+	EDGE: 48,
+	MIN_SPEED: 180,
+	MAX_SPEED: 600
+};
 //#endregion
 //#region src/utils/computeDropRegion.js
-function a(e) {
-	if (e?.cache?.dropRegionFns) return e.cache.dropRegionFns;
-	let t = () => {
+function s(e, t) {
+	let n = `dropRegionFns_${(t instanceof Set ? Array.from(t).sort().join(",") : t) || "all"}`;
+	if (e?.cache?.[n]) return e.cache[n];
+	let a = () => {
 		if (e.currentDrop) return e.currentDropRect || void 0;
-	}, n = {
-		isOverBottom: () => {
-			let n = t();
-			return n ? e.y > n.y + n.height * (1 - r) : !1;
-		},
-		isOverLeft: () => {
-			let n = t();
-			return n ? e.x < n.x + n.width * i : !1;
-		},
-		isOverRight: () => {
-			let n = t();
-			return n ? e.x > n.x + n.width * (1 - i) : !1;
-		},
-		isOverTop: () => {
-			let n = t();
-			return n ? e.y < n.y + n.height * r : !1;
-		}
+	}, o = !t || t === "all" || t instanceof Set && (t.has("top") || t.has("bottom")), s = !t || t === "all" || t instanceof Set && (t.has("left") || t.has("right")), c = {
+		isOverTop: o ? () => {
+			let t = a();
+			return t ? e.y < t.y + t.height * r : !1;
+		} : () => !1,
+		isOverBottom: o ? () => {
+			let t = a();
+			return t ? e.y > t.y + t.height * (1 - r) : !1;
+		} : () => !1,
+		isOverLeft: s ? () => {
+			let t = a();
+			return t ? e.x < t.x + t.width * i : !1;
+		} : () => !1,
+		isOverRight: s ? () => {
+			let t = a();
+			return t ? e.x > t.x + t.width * (1 - i) : !1;
+		} : () => !1
 	};
-	return e?.cache && (e.cache.dropRegionFns = n), n;
+	return e?.cache && (e.cache[n] = c), c;
 }
 //#endregion
 //#region src/utils/parseData.js
-function o(e) {
+function c(e) {
 	if (e === void 0) return;
 	let t = String(e).trim();
 	if (!t) return "";
@@ -96,7 +118,7 @@ function o(e) {
 }
 //#endregion
 //#region src/utils/createPayload.js
-function s(e, n) {
+function l(e, n) {
 	let r = () => {
 		let e = n.currentDrop;
 		if (!e) return;
@@ -115,7 +137,7 @@ function s(e, n) {
 			return;
 		}
 		let i = n.adapter.getAttr(e, t.dataAttr);
-		return r.dropDataEl === e && i === r.dropDataRaw ? r.dropDataParsed : (r.dropDataEl = e, r.dropDataRaw = i, r.dropDataParsed = o(i), r.dropDataParsed);
+		return r.dropDataEl === e && i === r.dropDataRaw ? r.dropDataParsed : (r.dropDataEl = e, r.dropDataRaw = i, r.dropDataParsed = c(i), r.dropDataParsed);
 	};
 	if (!n.cache.hitDropFn) {
 		let e = -1, t = 0, r = 0, i, a;
@@ -147,12 +169,12 @@ function s(e, n) {
 		dy: n.dy,
 		started: n.started,
 		hitDrop: n.cache.hitDropFn,
-		...a(n)
+		...s(n)
 	};
 }
 //#endregion
 //#region src/utils/createSession.js
-function c(e) {
+function u(e) {
 	return {
 		adapter: void 0,
 		currentDropRect: void 0,
@@ -168,7 +190,7 @@ function c(e) {
 		dx: 0,
 		dy: 0,
 		started: !1,
-		threshold: 3,
+		threshold: a.DRAG_START,
 		lastMoveTs: 0,
 		sourceEl: void 0,
 		handleEl: void 0,
@@ -205,7 +227,7 @@ function c(e) {
 }
 //#endregion
 //#region src/utils/createContext.js
-function l({ dnd: e, session: t, store: n, frame: r, adapter: i }) {
+function d({ dnd: e, session: t, store: n, frame: r, adapter: i }) {
 	let a = /* @__PURE__ */ new Map();
 	return {
 		dnd: e,
@@ -215,24 +237,24 @@ function l({ dnd: e, session: t, store: n, frame: r, adapter: i }) {
 		adapter: i,
 		payload: (e = "drag") => {
 			if (a.has(e)) return a.get(e);
-			let n = s(e, t);
+			let n = l(e, t);
 			return a.set(e, n), n;
 		}
 	};
 }
 //#endregion
 //#region src/utils/isToggleEnabled.js
-function u(e, t, n = !0) {
+function f(e, t, n = !0) {
 	if (!e?.getAttribute) return n;
 	let r = `data-${t}`, i = e.getAttribute(t) ?? e.getAttribute(r);
 	return i === null ? n : String(i).toLowerCase() !== "false";
 }
 //#endregion
 //#region src/utils/matchHandle.js
-function d(e, n) {
+function p(e, n) {
 	let r = n?.closestDraggable?.(e) || e?.closest?.(`[${t.dragAttr}], [${t.dragdropAttr}]`);
 	if (!r) return;
-	let i = u(r, t.rotatableAttr, !0), a = u(r, t.resizableAttr, !0);
+	let i = f(r, t.rotatableAttr, !0), a = f(r, t.resizableAttr, !0);
 	if (i && (r.hasAttribute(t.handleRotateAttr) || r.querySelector?.(`[${t.handleRotateAttr}]`)) || a && (r.hasAttribute(t.handleResizeAttr) || r.querySelector?.(`[${t.handleResizeAttr}]`))) {
 		let n = (i ? e.closest?.(`[${t.handleRotateAttr}]`) : null) || (a ? e.closest?.(`[${t.handleResizeAttr}]`) : null);
 		return n && r.contains(n) ? n : r;
@@ -245,12 +267,19 @@ function d(e, n) {
 }
 //#endregion
 //#region src/utils/isHTMLElement.js
-function f(e) {
+function m(e) {
 	return e && typeof e == "object" && e.nodeType === 1;
 }
 //#endregion
-//#region src/core/DomAdapter.js
-var p = class {
+//#region src/utils/isIgnoreClick.js
+function h(e) {
+	if (!m(e)) return !1;
+	let n = t.ignoreClickAttr, r = `data-${n}`;
+	return !!(e.closest?.(`[${n}], [${r}]`) || e.hasAttribute?.(n) || e.hasAttribute?.(r));
+}
+//#endregion
+//#region src/utils/scopeHelpers.js
+var g = t.dragScopeAttr, _ = `[${g}], [data-${g}]`, v = class {
 	#e = 0;
 	#t = /* @__PURE__ */ new WeakMap();
 	#n = /* @__PURE__ */ new WeakMap();
@@ -319,7 +348,7 @@ var p = class {
 			o = o.parentElement;
 		}
 	}
-}, m = class {
+}, y = class {
 	#e = !1;
 	#t = !1;
 	#n = 0;
@@ -339,8 +368,8 @@ var p = class {
 		let e = !1;
 		try {
 			e = !!this.#r(performance.now());
-		} catch {
-			e = !1;
+		} catch (t) {
+			e = !1, console.error("[RafScheduler] frame callback error:", t);
 		}
 		if (this.#e) {
 			if (e || this.#t) {
@@ -350,7 +379,7 @@ var p = class {
 			this.#e = !1, this.#n = 0;
 		}
 	};
-}, h = class {
+}, b = class {
 	#e;
 	#t = new AbortController();
 	#n = !1;
@@ -411,13 +440,15 @@ var p = class {
 		}), e.preventDefault();
 	};
 	#p = (e) => {
-		!this.#n || !this.#c || "pointerId" in e && e.pointerId !== this.#r || (this.#c({
+		if (!this.#n || !this.#c || "pointerId" in e && e.pointerId !== this.#r) return;
+		let t = this.#r, n = e.type;
+		this.#d(), this.#c({
 			event: e,
-			pointerId: this.#r,
-			reason: e.type
-		}), this.#d(), e.preventDefault?.());
+			pointerId: t,
+			reason: n
+		}), e.preventDefault?.();
 	};
-}, g = class {
+}, ee = class {
 	scrolled = !1;
 	now = 0;
 	classOps = /* @__PURE__ */ new Map();
@@ -455,7 +486,7 @@ var p = class {
 		for (let [t, n] of this.styleOps) if (!e || !this.removeOps.has(t)) for (let [e, r] of n) r == null ? e.includes("-") ? t?.style?.removeProperty?.(e) : t?.style && (t.style[e] = "") : e.includes("-") ? t?.style?.setProperty?.(e, String(r)) : t?.style && (t.style[e] = r);
 		for (let e of this.fnOps) e?.();
 	}
-}, _ = class {
+}, te = class {
 	#e = [];
 	use(e, t) {
 		e && (this.#e.push(e), this.#e.sort((e, t) => (e.order ?? 0) - (t.order ?? 0)), e.onAttach?.(t));
@@ -492,7 +523,10 @@ var p = class {
 	onDestroy(e, t) {
 		for (let n of this.#e) n.onDestroy?.(e, t);
 	}
-}, v = class {
+	dispose() {
+		this.#e.length = 0;
+	}
+}, ne = class {
 	#e;
 	#t;
 	constructor({ store: e, session: t } = {}) {
@@ -558,47 +592,55 @@ var p = class {
 					started: this.#t.started
 				};
 			}
-			case "END": return !this.#t.active || e.pointerId !== void 0 && e.pointerId !== this.#t.pointerId ? { handled: !1 } : {
-				handled: !0,
-				ended: !!this.#t.started,
-				reason: e.reason
-			};
+			case "END": {
+				if (!this.#t.active || e.pointerId !== void 0 && e.pointerId !== this.#t.pointerId) return { handled: !1 };
+				let t = !!this.#t.started;
+				return this.#t.active = !1, {
+					handled: !0,
+					ended: t,
+					reason: e.reason
+				};
+			}
 			default: return { handled: !1 };
 		}
 	}
 	resetSession({ ended: e } = { ended: !1 }) {
-		let t = this.#e, n = this.#t, r = c(t);
+		let t = this.#e, n = this.#t, r = u(t);
 		return r.adapter = n?.adapter, e && (r.suppressNextClick = !0, r.lastDragTs = performance.now()), this.#t = r, r;
 	}
-}, y = class extends e {
+}, re = class extends e {
 	#e = new AbortController();
 	#t;
 	#n;
-	#r = new p();
-	#i = new g();
+	#r = new v();
+	#i = new ee();
 	#a = { selectedByNs: /* @__PURE__ */ new Map() };
 	#o;
-	#s = new _();
+	#s = new te();
 	#c;
 	#l;
+	#u = !1;
 	canDrop = () => !0;
 	renderMirror = void 0;
 	get root() {
 		return this.#t;
 	}
 	get monitor() {
-		return this.#o?.session;
+		if (!this.#u) return this.#o?.session;
+	}
+	get destroyed() {
+		return this.#u;
 	}
 	constructor(e = {}) {
-		super(), this.#n = { threshold: e.threshold ?? 3 };
-		let t = c(this.#a);
-		t.threshold = this.#n.threshold, t.adapter = this.#r, this.#o = new v({
+		super(), this.#n = { threshold: e.threshold ?? a.DRAG_START };
+		let t = u(this.#a);
+		t.threshold = this.#n.threshold, t.adapter = this.#r, this.#o = new ne({
 			store: this.#a,
 			session: t
-		}), this.#c = new m(this.#m), this.#l = new h({
-			onDown: this.#d,
-			onMove: this.#f,
-			onUp: this.#p
+		}), this.#c = new y(this.#h), this.#l = new b({
+			onDown: this.#f,
+			onMove: this.#p,
+			onUp: this.#m
 		}), this.setRoot(e.root);
 	}
 	use(e) {
@@ -608,16 +650,17 @@ var p = class {
 		let t = this.#r.resolveRoot(e);
 		if (t === this.#t) return;
 		let n = this.#t;
-		this.#e.abort(), this.#e = new AbortController(), this.#t = t, this.#l.setRoot(this.#t), this.#t && (this.#s.onRootChange(this.#t, n, this.#e.signal), this.#t.addEventListener("click", this.#u, {
+		this.#e.abort(), this.#e = new AbortController(), this.#t = t, this.#l.setRoot(this.#t), this.#t && (this.#s.onRootChange(this.#t, n, this.#e.signal), this.#t.addEventListener("click", this.#d, {
 			capture: !0,
 			passive: !1,
 			signal: this.#e.signal
 		}));
 	}
 	destroy() {
+		if (this.#u) return;
 		this.#e.abort(), this.#l.destroy(), this.#c.cancel();
 		let e = this.#o.session;
-		e?.active && (this.#s.onEnd(l({
+		e?.active && (this.#s.onEnd(d({
 			dnd: this,
 			session: e,
 			store: this.#a,
@@ -626,55 +669,53 @@ var p = class {
 		}), {
 			ended: !1,
 			reason: "destroy"
-		}), e.dragAbort?.abort()), this.offAll(), this.#s.onDestroy(this, e);
-		let t = this.#o.resetSession({ ended: !1 });
-		t.adapter = this.#r;
+		}), e.dragAbort?.abort()), this.#s.onDestroy(this, e), this.#s.dispose?.(), this.offAll(), this.#u = !0;
 	}
-	#u = (e) => {
+	#d = (e) => {
 		let t = this.#o?.session;
 		if (!t?.suppressNextClick) return;
 		let n = performance.now(), r = !t.lastDragTs || n - t.lastDragTs < 800;
 		t.suppressNextClick = !1, r && (e.preventDefault?.(), e.stopPropagation?.(), e.stopImmediatePropagation?.());
 	};
-	#d = (e) => {
+	#f = (e) => {
 		if (!this.#t || e.button !== 0) return { accepted: !1 };
-		let n = d(e.target, this.#r);
+		let n = p(e.target, this.#r);
 		if (!n) return { accepted: !1 };
 		let r = this.#r.closestDraggable(n);
-		if (!r) return { accepted: !1 };
+		if (!r || e.target?.closest?.("input, textarea, select, button, a[href], [contenteditable]")) return { accepted: !1 };
 		e.preventDefault(), e.target?.setPointerCapture?.(e.pointerId);
-		let i = this.#r.getNamespace(r), a = this.#r.closestDrop(r), s = r.getBoundingClientRect(), c = o(this.#r.getAttr(r, t.dataAttr));
+		let i = this.#r.getNamespace(r), a = this.#r.closestDrop(r), o = r.getBoundingClientRect(), s = c(this.#r.getAttr(r, t.dataAttr));
 		if (!this.#o.dispatch({
 			type: "DOWN",
 			pointerId: e.pointerId,
 			x: e.clientX,
 			y: e.clientY,
 			namespace: i,
-			data: c,
+			data: s,
 			sourceEl: r,
 			handleEl: n,
 			originDrop: a,
 			isDragScope: !!this.#r.closestDragScope(r),
 			isCopy: !!this.#r.getAttr(r, t.copyAttr),
-			mirrorOffsetX: e.clientX - s.left,
-			mirrorOffsetY: e.clientY - s.top
+			mirrorOffsetX: e.clientX - o.left,
+			mirrorOffsetY: e.clientY - o.top
 		})?.accepted) return { accepted: !1 };
-		let u = this.#o.session;
-		u.threshold = this.#n.threshold, u.adapter = this.#r, this.#i.reset(performance.now()), this.#r.beginFrame(), u.cache.frameId = this.#r.frameId;
-		let f = l({
+		let l = this.#o.session;
+		l.threshold = this.#n.threshold, l.adapter = this.#r, this.#i.reset(performance.now()), this.#r.beginFrame(), l.cache.frameId = this.#r.frameId;
+		let u = d({
 			dnd: this,
-			session: u,
+			session: l,
 			store: this.#a,
 			frame: this.#i,
 			adapter: this.#r
 		});
-		return this.#s.onDown(f, e), this.#i.commit(), this.#r.endFrame(), {
+		return this.#s.onDown(u, e), this.#i.commit(), this.#r.endFrame(), {
 			accepted: !0,
 			pointerId: e.pointerId,
-			signal: u.dragAbort.signal
+			signal: l.dragAbort.signal
 		};
 	};
-	#f = ({ pointerId: e, x: t, y: n }) => {
+	#p = ({ pointerId: e, x: t, y: n }) => {
 		let r = this.#o.dispatch({
 			type: "MOVE",
 			pointerId: e,
@@ -684,18 +725,18 @@ var p = class {
 		if (!r?.handled) return;
 		let i = this.#o.session;
 		if (r.startedNow) {
-			let e = l({
+			let e = d({
 				dnd: this,
 				session: i,
 				store: this.#a,
 				frame: this.#i,
 				adapter: this.#r
 			});
-			this.#s.onStart(e), this.emit("dragstart", s("dragstart", i));
+			this.#s.onStart(e), this.emit("dragstart", l("dragstart", i));
 		}
 		r.started && this.#c.request();
 	};
-	#p = ({ event: e, pointerId: t, reason: n }) => {
+	#m = ({ event: e, pointerId: t, reason: n }) => {
 		let r = this.#o.dispatch({
 			type: "END",
 			pointerId: t,
@@ -706,7 +747,7 @@ var p = class {
 		"pointerId" in e && e.target?.releasePointerCapture?.(e.pointerId);
 		let a = !!r.ended;
 		this.#r.beginFrame(), i.cache.frameId = this.#r.frameId, i.currentDrop = this.#r.hitDrop(i.x, i.y, i.namespace, i.sourceEl), i.currentDropRect = i.currentDrop ? this.#r.measureRect(i.currentDrop) : void 0, this.#r.endFrame();
-		let o = l({
+		let o = d({
 			dnd: this,
 			session: i,
 			store: this.#a,
@@ -717,16 +758,16 @@ var p = class {
 			ended: a,
 			reason: n || "pointerup"
 		});
-		let c = s(a ? "drop" : "cancel", i);
+		let s = l(a ? "drop" : "cancel", i);
 		i.dragAbort?.abort(), i.dragAbort = void 0, this.#c.cancel();
-		let u = this.#o.resetSession({ ended: a });
-		u.adapter = this.#r, a ? this.emit("drop", c) : this.emit("cancel", c), e.preventDefault?.();
+		let c = this.#o.resetSession({ ended: a });
+		c.adapter = this.#r, a ? this.emit("drop", s) : this.emit("cancel", s), e.preventDefault?.();
 	};
-	#m = (e) => {
+	#h = (e) => {
 		let t = this.#o.session;
 		if (!t.active || !t.started) return !1;
 		this.#i.reset(e), this.#r.beginFrame(), t.cache.frameId = this.#r.frameId;
-		let n = l({
+		let n = d({
 			dnd: this,
 			session: t,
 			store: this.#a,
@@ -735,12 +776,16 @@ var p = class {
 		}), r = !1;
 		return t.dirty &&= (this.#s.onMeasure(n), this.#s.onCompute(n), this.emit("drag", n.payload("drag")), this.#s.onCommit(n), this.#i.commit(), this.#i.scrolled && (r = !0), !1), this.#s.onAfterDrag(n) && (r = !0), r && (t.dirty = !0), this.#r.endFrame(), t.dirty || r;
 	};
-}, b = class {
+}, x = class {
 	order = 10;
 	onMeasure(e) {
 		let t = e.session;
 		if (!t.active || !t.started) return;
 		let n = e.adapter.hitDrop(t.x, t.y, t.namespace, t.sourceEl);
+		if (n && t.sourceEl && e.adapter.isDrop(t.sourceEl)) {
+			let r = e.adapter.measureRect(t.sourceEl);
+			r && t.x >= r.left && t.x <= r.right && t.y >= r.top && t.y <= r.bottom && (n = void 0);
+		}
 		if (n !== t.currentDrop && (t.currentDrop = n, t.cache && (t.cache.dropRectDirty = !0)), !n) {
 			t.currentDropRect = void 0, t.cache && (t.cache.dropRectDirty = !1);
 			return;
@@ -769,18 +814,18 @@ var p = class {
 		let t = e.session;
 		if (!t?.active || !t?.started) return;
 		let r = t.cache ||= {}, i = r._dropClassEl, a = t.currentDrop;
-		f(i) && i !== a && (e.frame.toggleClass(i, n.canDrop, !1), e.frame.toggleClass(i, n.noDrop, !1)), f(a) && (e.frame.toggleClass(a, n.canDrop, !!t.currentAllowed), e.frame.toggleClass(a, n.noDrop, !t.currentAllowed)), r._dropClassEl = a;
+		m(i) && i !== a && (e.frame.toggleClass(i, n.canDrop, !1), e.frame.toggleClass(i, n.noDrop, !1)), m(a) && (e.frame.toggleClass(a, n.canDrop, !!t.currentAllowed), e.frame.toggleClass(a, n.noDrop, !t.currentAllowed)), r._dropClassEl = a;
 	}
 	onEnd(e) {
 		let t = e?.session;
 		if (!t) return;
 		let r = t.cache?._dropClassEl;
-		f(r) && r.classList.remove(n.canDrop, n.noDrop), t.cache && (t.cache._dropClassEl = void 0);
+		m(r) && r.classList.remove(n.canDrop, n.noDrop), t.cache && (t.cache._dropClassEl = void 0);
 	}
 	onDestroy(e, t) {
 		this.onEnd({ session: t });
 	}
-}, x = class {
+}, S = class {
 	order = 0;
 	onStart = (e) => {
 		let r = e?.session;
@@ -790,7 +835,7 @@ var p = class {
 			width: `${i.width}px`,
 			height: `${i.height}px`,
 			position: "fixed"
-		}), document.body.appendChild(a), r.mirrorEl = a);
+		}), (e.dnd?.root || document.body).appendChild(a), r.mirrorEl = a);
 	};
 	onCommit = (e) => {
 		let t = e?.session;
@@ -806,20 +851,20 @@ var p = class {
 	onDestroy = (e, t) => {
 		this.onEnd({ session: t });
 	};
-}, S = /(auto|scroll|overlay)/i;
-function C(e) {
+}, C = /(auto|scroll|overlay)/i;
+function w(e) {
 	if (!(e instanceof HTMLElement)) return !1;
-	let t = getComputedStyle(e), n = S.test(t.overflowY) && e.scrollHeight > e.clientHeight + 1;
-	return S.test(t.overflowX) && e.scrollWidth > e.clientWidth + 1 || n;
+	let t = getComputedStyle(e), n = C.test(t.overflowY) && e.scrollHeight > e.clientHeight + 1;
+	return C.test(t.overflowX) && e.scrollWidth > e.clientWidth + 1 || n;
 }
-function w(e) {
+function T(e) {
 	let t = e;
 	for (; t;) {
-		if (C(t)) return t;
+		if (w(t)) return t;
 		t = t.parentElement;
 	}
 }
-function T(e, t, n, r) {
+function E(e, t, n, r) {
 	return e < t + r ? {
 		dir: -1,
 		k: (t + r - e) / r
@@ -831,15 +876,15 @@ function T(e, t, n, r) {
 		k: 0
 	};
 }
-var ee = class {
+var D = class {
 	order = 1e4;
 	constructor(e = {}) {
-		this.edge = e.edge ?? 48, this.minSpeed = e.minSpeed ?? 180, this.maxSpeed = e.maxSpeed ?? 600, this.allowWindowScroll = e.allowWindowScroll ?? !0;
+		this.edge = e.edge ?? o.EDGE, this.minSpeed = e.minSpeed ?? o.MIN_SPEED, this.maxSpeed = e.maxSpeed ?? o.MAX_SPEED, this.allowWindowScroll = e.allowWindowScroll ?? !0;
 	}
 	onAfterDrag = (e) => {
 		let t = e.session;
 		if (!t.active || !t.started) return !1;
-		let n = t.currentDrop ? w(t.currentDrop) : void 0, r = !1;
+		let n = t.currentDrop ? T(t.currentDrop) : void 0, r = !1;
 		if (!n && this.allowWindowScroll && (n = document.scrollingElement || document.documentElement, r = !!n), !n) return !1;
 		let i = e.frame.now, a = t.cache.autoScrollLastTs || 0, o = a ? Math.max(8, Math.min(64, i - a)) : 16.67;
 		t.cache && (t.cache.autoScrollLastTs = i);
@@ -848,7 +893,7 @@ var ee = class {
 			top: 0,
 			right: innerWidth,
 			bottom: innerHeight
-		} : e.adapter.measureRect(n), c = t.x, l = t.y, u = T(c, s.left, s.right, this.edge), d = T(l, s.top, s.bottom, this.edge), f = (e) => this.minSpeed + (this.maxSpeed - this.minSpeed) * e, p = u.dir ? u.dir * f(u.k) * o / 1e3 : 0, m = d.dir ? d.dir * f(d.k) * o / 1e3 : 0;
+		} : e.adapter.measureRect(n), c = t.x, l = t.y, u = E(c, s.left, s.right, this.edge), d = E(l, s.top, s.bottom, this.edge), f = (e) => this.minSpeed + (this.maxSpeed - this.minSpeed) * e, p = u.dir ? u.dir * f(u.k) * o / 1e3 : 0, m = d.dir ? d.dir * f(d.k) * o / 1e3 : 0;
 		if (!p && !m) return !1;
 		let h = n.scrollTop, g = n.scrollLeft;
 		r ? window.scrollBy(p, m) : n.scrollBy({
@@ -863,95 +908,84 @@ var ee = class {
 		let t = e?.session;
 		t?.cache && (t.cache.autoScrollLastTs = 0);
 	};
-}, E = {
+}, O = {
 	top: n.indicatorTop,
 	right: n.indicatorRight,
 	bottom: n.indicatorBottom,
 	left: n.indicatorLeft
-}, D = Object.values(E), O = new Set([
+}, k = Object.values(O), ie = new Set([
 	"top",
 	"right",
 	"bottom",
 	"left"
 ]);
-function k(e, t, n, r) {
-	f(t) && (e.frame.toggleClass ? e.frame.toggleClass(t, n, !!r) : t.classList.toggle(n, !!r));
+function A(e, t, n, r) {
+	m(t) && (e.frame.toggleClass ? e.frame.toggleClass(t, n, !!r) : t.classList.toggle(n, !!r));
 }
-function A(e) {
-	if (!f(e)) return;
-	let n = t?.dropIndicatorAttr || "drop-indicator", r = `data-${n}`, i;
+function ae(e) {
+	if (!m(e)) return;
+	let n = t.dropIndicatorAttr || "drop-indicator", r = `data-${n}`, i;
 	if (e.hasAttribute?.(n)) i = e.getAttribute?.(n);
 	else if (e.hasAttribute?.(r)) i = e.getAttribute?.(r);
 	else return;
 	let a = (i ?? "").trim();
 	if (!a) return "all";
+	console.log("raw", i);
 	let o = /* @__PURE__ */ new Set();
 	for (let e of a.split(/[,\s]+/)) {
 		let t = (e || "").trim().toLowerCase();
-		O.has(t) && o.add(t);
+		ie.has(t) && o.add(t);
 	}
 	return o.size ? o : void 0;
 }
-function j(e) {
+function oe(e) {
 	let t = e.session, r = e.dnd?.root?.ownerDocument || document, i = t.indicatorEl;
-	f(i) || (i = r.createElement("div"), i.classList.add(n.dropIndicator), t.indicatorEl = i);
+	m(i) || (i = r.createElement("div"), i.classList.add(n.dropIndicator), t.indicatorEl = i);
 	let a = t.currentDrop || e.dnd?.root || r.body;
-	return f(a) && i.parentNode !== a && a.appendChild(i), i;
+	return m(a) && i.parentNode !== a && a.appendChild(i), i;
 }
-function te(e) {
+function se(e, t) {
 	if (!e.currentDrop || !e.currentDropRect) return;
-	let t = a(e);
-	if (t.isOverLeft()) return "left";
-	if (t.isOverRight()) return "right";
-	if (t.isOverTop()) return "top";
-	if (t.isOverBottom()) return "bottom";
+	let n = s(e, t);
+	if (n.isOverLeft()) return "left";
+	if (n.isOverRight()) return "right";
+	if (n.isOverTop()) return "top";
+	if (n.isOverBottom()) return "bottom";
 }
-function ne(e) {
+function ce(e) {
 	let t = e.session;
-	if (!t.currentDrop) return !1;
-	if (typeof t.currentAllowed == "boolean") return t.currentAllowed;
-	let n = e.dnd?.canDrop;
-	if (typeof n != "function") return !0;
-	try {
-		return !!n(e.payload("drag"));
-	} catch {
-		return !1;
-	}
+	return t.currentDrop ? typeof t.currentAllowed == "boolean" ? t.currentAllowed : !0 : !1;
 }
-var M = class {
+var le = class {
 	order = 40;
 	onCommit(e) {
 		let t = e.session;
 		if (!t?.active || !t?.started) return;
-		let r = t.currentDrop, i = A(r);
+		let r = t.currentDrop, i = ae(r);
 		if (!i) {
 			let r = t.indicatorEl;
-			if (f(r)) {
-				k(e, r, n.dropIndicatorActive, !1);
-				for (let t of D) k(e, r, t, !1);
+			if (m(r)) {
+				A(e, r, n.dropIndicatorActive, !1);
+				for (let t of k) A(e, r, t, !1);
 			}
 			t.indicatorRegion = void 0;
 			return;
 		}
-		let a = j(e), o = ne(e), s = te(t), c = i === "all" || s && i.has(s) ? s : void 0, l = !!(r && t.currentDropRect && o && c);
-		if (k(e, a, n.dropIndicatorActive, l), t.indicatorRegion = l ? c : void 0, l) for (let [t, n] of Object.entries(E)) k(e, a, n, t === c);
-		else for (let t of D) k(e, a, t, !1);
+		let a = oe(e), o = ce(e), s = se(t, i), c = i === "all" || s && i.has(s) ? s : void 0, l = !!(r && t.currentDropRect && o && c);
+		if (A(e, a, n.dropIndicatorActive, l), t.indicatorRegion = l ? c : void 0, l) for (let [t, n] of Object.entries(O)) A(e, a, n, t === c);
+		else for (let t of k) A(e, a, t, !1);
 	}
 	onEnd(e) {
 		let t = e.session;
-		t && (t.lastIndicatorRegion = t.indicatorRegion ?? "inside", f(t.indicatorEl) && t.indicatorEl.remove(), t.indicatorEl = void 0, t.indicatorRegion = void 0);
+		t && (t.lastIndicatorRegion = t.indicatorRegion ?? "inside", m(t.indicatorEl) && t.indicatorEl.remove(), t.indicatorEl = void 0, t.indicatorRegion = void 0);
 	}
 	onDestroy(e, t) {
 		this.onEnd({ session: t });
 	}
-}, N = (e) => {
-	if (!f(e)) return !1;
-	let n = t.ignoreClickAttr, r = `data-${n}`;
-	return !!(e.closest?.(`[${n}], [${r}]`) || e.hasAttribute?.(n) || e.hasAttribute?.(r));
-}, P = "draggable-dot-wrap", F = "draggable-dot", I = "draggable-rotate", L = t.dragScopeAttr, re = `[${L}], [data-${L}]`;
-function ie(e, n = {}) {
+}, j = "draggable-dot-wrap", M = "draggable-dot", N = "draggable-rotate";
+function P(e, n = {}) {
 	let { resizable: r = !0, rotatable: i = !0 } = n, a = e.createElement("div");
-	if (a.classList.add(P), a.dataset.resizable = String(r), a.dataset.rotatable = String(i), r) for (let [n, r] of [
+	if (a.classList.add(j), a.dataset.resizable = String(r), a.dataset.rotatable = String(i), r) for (let [n, r] of [
 		["nw", "tl"],
 		["n", "tm"],
 		["ne", "tr"],
@@ -962,63 +996,83 @@ function ie(e, n = {}) {
 		["w", "lm"]
 	]) {
 		let i = e.createElement("div");
-		i.classList.add(F), i.setAttribute(t.handleResizeAttr, ""), i.dataset.dir = n, i.dataset.pos = r, a.appendChild(i);
+		i.classList.add(M), i.setAttribute(t.handleResizeAttr, ""), i.dataset.dir = n, i.dataset.pos = r, a.appendChild(i);
 	}
 	if (i) {
 		let n = e.createElement("div");
-		n.classList.add(I), n.setAttribute(t.handleRotateAttr, ""), n.dataset.dir = "rotate", a.appendChild(n);
+		n.classList.add(N), n.setAttribute(t.handleRotateAttr, ""), n.dataset.dir = "rotate", a.appendChild(n);
 	}
 	return a;
 }
-function R(e) {
-	f(e) && e.querySelector?.(`.${P}`)?.remove();
+function F(e) {
+	m(e) && e.querySelector?.(`.${j}`)?.remove();
 }
-function z(e) {
-	if (!f(e)) return;
-	let n = !!e.closest?.(re), r = e.querySelector?.(".draggable-dot-wrap") || null, i = !!r, a = u(e, t.resizableAttr, !0), o = u(e, t.rotatableAttr, !0), s = a || o;
+function I(e) {
+	if (!m(e)) return;
+	let n = !!e.closest?.(_), r = e.querySelector?.(".draggable-dot-wrap") || null, i = !!r, a = f(e, t.resizableAttr, !0), o = f(e, t.rotatableAttr, !0), s = a || o;
 	if (!n) {
-		i && R(e);
+		i && F(e);
 		return;
 	}
 	if (!s) {
-		i && R(e);
+		i && F(e);
 		return;
 	}
 	if (r && (String(r.dataset?.resizable) !== String(a) || String(r.dataset?.rotatable) !== String(o)) && (r.remove(), r = null, i = !1), !i) {
 		let t = getComputedStyle(e).position;
-		(t === "static" || !t) && (e.style.position = "relative"), e.appendChild(ie(e.ownerDocument || document, {
+		(t === "static" || !t) && (e.style.position = "relative"), e.appendChild(P(e.ownerDocument || document, {
 			resizable: a,
 			rotatable: o
 		}));
 	}
 }
-function B(e, t, r, i) {
+function L(e, t, r, i) {
 	let a = t.get(i);
-	a && a !== r && (a.classList.remove(n.active), R(a)), r.classList.add(n.active), z(r), t.set(i, r);
+	if (a && a !== r) if (Array.isArray(a)) for (let e of a) e?.classList?.remove?.(n.active), F(e);
+	else a.classList.remove(n.active), F(a);
+	r.classList.add(n.active), I(r), t.set(i, r);
+}
+function R(e, t, r) {
+	let i = e.get(r);
+	if (i) if (Array.isArray(i)) for (let e of i) e?.classList?.remove?.(n.active), F(e);
+	else i.classList.remove(n.active), F(i);
+	for (let e of t) e.classList.add(n.active), I(e);
+	e.set(r, t);
 }
-function V(e) {
-	for (let t of e.values()) t?.classList?.remove?.(n.active), R(t);
+function z(e, t) {
+	if (t !== void 0) {
+		let r = e.get(t);
+		if (r) {
+			if (Array.isArray(r)) for (let e of r) e?.classList?.remove?.(n.active), F(e);
+			else r?.classList?.remove?.(n.active), F(r);
+			e.delete(t);
+		}
+		return;
+	}
+	for (let t of e.values()) if (Array.isArray(t)) for (let e of t) e?.classList?.remove?.(n.active), F(e);
+	else t?.classList?.remove?.(n.active), F(t);
 	e.clear();
 }
-var H = class {
+var B = class {
 	order = -50;
 	#e;
 	onAttach(e) {
 		this.#e = e;
 	}
 	onRootChange(e, t, n) {
-		if (!f(e)) return;
+		if (!m(e)) return;
 		let r = this.#e.monitor;
 		e.addEventListener("pointerdown", (e) => {
-			if (e.button !== 0 || N(e.target)) return;
+			if (e.button !== 0 || h(e.target)) return;
 			let t = r.selectedByNs;
 			if (!t) return;
 			let n = r.adapter.closestDraggable(e.target);
 			if (!n) {
-				V(t);
+				z(t);
 				return;
 			}
-			B(null, t, n, r.adapter.getNamespace(n));
+			let i = r.adapter.getNamespace(n), a = t.get(i);
+			Array.isArray(a) && a.length > 1 && a.includes(n) || L(null, t, n, i);
 		}, {
 			capture: !0,
 			signal: n
@@ -1026,26 +1080,110 @@ var H = class {
 	}
 	onDown(e, t) {
 		let r = e?.session;
-		if (!r?.sourceEl || t?.button !== 0 || N(t.target)) return;
+		if (!r?.sourceEl || t?.button !== 0 || h(t.target)) return;
 		let i = e.store?.selectedByNs || r.selectedByNs;
 		if (!i) return;
 		let a = r.namespace || e.adapter.getNamespace(r.sourceEl), o = i.get(a);
-		o && o !== r.sourceEl && (e.frame.toggleClass(o, n.active, !1), R(o)), e.frame.toggleClass(r.sourceEl, n.active, !0), z(r.sourceEl), i.set(a, r.sourceEl);
+		Array.isArray(o) && o.length > 1 && o.includes(r.sourceEl) || (o && o !== r.sourceEl && (Array.isArray(o) ? o.forEach((t) => {
+			e.frame.toggleClass(t, n.active, !1), F(t);
+		}) : (e.frame.toggleClass(o, n.active, !1), F(o))), e.frame.toggleClass(r.sourceEl, n.active, !0), I(r.sourceEl), i.set(a, r.sourceEl));
 	}
 	onDestroy(e, t) {
 		let n = t?.selectedByNs;
-		n && V(n);
+		n && z(n);
 	}
 };
 //#endregion
-//#region src/services/TransformControllerService.js
-function U(e = 0) {
+//#region src/services/MarqueeSelectionService.js
+function V(e, t, n, r) {
+	return {
+		left: Math.min(e, n),
+		right: Math.max(e, n),
+		top: Math.min(t, r),
+		bottom: Math.max(t, r),
+		width: Math.abs(n - e),
+		height: Math.abs(r - t)
+	};
+}
+function H(e, t) {
+	let n = Math.max(e.left, t.left), r = Math.min(e.right, t.right), i = Math.max(e.top, t.top), a = Math.min(e.bottom, t.bottom), o = r - n, s = a - i;
+	return o <= 0 || s <= 0 ? !1 : o * s > (t.right - t.left) * (t.bottom - t.top) * .5;
+}
+var U = class {
+	order = -40;
+	#e;
+	#t;
+	onAttach(e) {
+		this.#e = e;
+	}
+	onRootChange(e, t, n) {
+		this.#t = n, m(e) && e.addEventListener("pointerdown", (e) => {
+			if (e.button !== 0 || h(e.target)) return;
+			let t = e.target.closest(_);
+			t && (this.#e.monitor.adapter.closestDraggable(e.target) || this.#n(t, e));
+		}, {
+			capture: !0,
+			signal: n
+		});
+	}
+	#n(e, r) {
+		let i = r.clientX, o = r.clientY, s = this.#e.monitor.adapter.getNamespace(e), c = parseFloat(e.getAttribute(t.scaleRatioAttr) || "1"), l = document.createElement("div");
+		l.classList.add(n.marquee), e.appendChild(l);
+		let u = !1, d = (t) => {
+			let n = t.clientX - i, r = t.clientY - o;
+			if (!u && Math.abs(n) < a.MARQUEE_MOVE && Math.abs(r) < a.MARQUEE_MOVE) return;
+			u = !0;
+			let d = V(i, o, t.clientX, t.clientY);
+			this.#r(l, d, e, c);
+			let f = this.#i(e, s, d), p = this.#e.monitor.selectedByNs;
+			p && (z(p, s), f.length > 0 && R(p, f, s));
+		}, f = new AbortController(), p = [f.signal, this.#t].filter(Boolean), m = () => {
+			if (!f.signal.aborted) {
+				try {
+					l.remove();
+				} catch {}
+				f.abort();
+			}
+		}, h = () => {
+			if (!u) {
+				let e = this.#e.monitor?.selectedByNs;
+				e && z(e, s);
+			}
+			m();
+		};
+		for (let e of p) {
+			if (e.aborted) {
+				m();
+				return;
+			}
+			e.addEventListener("abort", m, { once: !0 });
+		}
+		let g = { signal: f.signal };
+		document.addEventListener("pointermove", d, g), document.addEventListener("pointerup", h, g), document.addEventListener("pointercancel", m, g), window.addEventListener("blur", m, g);
+	}
+	#r(e, t, n, r) {
+		let i = n.getBoundingClientRect(), a = (t.left - i.left) / r, o = (t.top - i.top) / r, s = t.width / r, c = t.height / r;
+		e.style.left = `${a}px`, e.style.top = `${o}px`, e.style.width = `${s}px`, e.style.height = `${c}px`;
+	}
+	#i(e, n, r) {
+		let i = this.#e.monitor.adapter, a = e.querySelectorAll(`[${t.dragAttr}], [${t.dragdropAttr}]`), o = [];
+		for (let e of a) {
+			if (i.getNamespace(e) !== n) continue;
+			let t = i.measureRect(e);
+			t && H(r, t) && o.push(e);
+		}
+		return o;
+	}
+};
+//#endregion
+//#region src/services/transform/utils/geometry.js
+function W(e = 0) {
 	return `${Number.parseInt(String(e), 10) || 0}px`;
 }
-function W(e) {
+function G(e) {
 	return e * Math.PI / 180;
 }
-function G(e, t) {
+function ue(e, t) {
 	return Math.sqrt(e * e + t * t);
 }
 function K(e, t) {
@@ -1063,7 +1201,51 @@ function q(e, t = 1, n) {
 		width: r.width / i
 	};
 }
-var J = {
+function J(e, t, n, r) {
+	let i = n - e, a = r - t, o = Math.atan2(a, i) * 180 / Math.PI + 90;
+	return o = (o % 360 + 360) % 360, o;
+}
+function de(e, t, n) {
+	let { width: r, height: i } = e;
+	return {
+		height: Math.abs(i),
+		width: Math.abs(r),
+		x: t - Math.abs(r) / 2,
+		y: n - Math.abs(i) / 2
+	};
+}
+function fe({ centerX: e, centerY: t, width: n, height: r, angle: i }) {
+	return {
+		angle: i,
+		height: r,
+		width: n,
+		x: e - n / 2,
+		y: t - r / 2
+	};
+}
+function Y(e) {
+	let t = getComputedStyle(e), n = {};
+	try {
+		n = new DOMMatrixReadOnly(t.transform);
+	} catch {
+		n = new DOMMatrixReadOnly();
+	}
+	let r = n.m41, i = n.m42, a = Number.parseFloat(t.width), o = Number.parseFloat(t.height);
+	if (!Number.isFinite(a) || !Number.isFinite(o)) {
+		let t = e.getBoundingClientRect();
+		a = t.width, o = t.height;
+	}
+	return {
+		angle: -Math.atan2(n.m21, n.m11) * (180 / Math.PI),
+		height: o,
+		width: a,
+		x: r,
+		y: i
+	};
+}
+//#endregion
+//#region src/services/transform/utils/cursor.js
+var pe = {
 	e: "right",
 	n: "top",
 	ne: "top-right",
@@ -1072,7 +1254,7 @@ var J = {
 	se: "bottom-right",
 	sw: "bottom-left",
 	w: "left"
-}, ae = [
+}, me = [
 	"n",
 	"ne",
 	"e",
@@ -1081,7 +1263,7 @@ var J = {
 	"sw",
 	"w",
 	"nw"
-], oe = {
+], he = {
 	0: 0,
 	1: 1,
 	2: 1,
@@ -1094,7 +1276,7 @@ var J = {
 	9: 6,
 	10: 7,
 	11: 7
-}, se = {
+}, ge = {
 	e: 2,
 	n: 0,
 	ne: 1,
@@ -1104,67 +1286,13 @@ var J = {
 	sw: 5,
 	w: 6
 };
-function ce(e, t) {
-	let n = oe[Math.floor((e % 360 + 360) % 360 / 30)];
-	return ae[(se[t] + n) % 8];
-}
-function le(e) {
-	let t = e?.querySelector?.(":scope > .draggable-dot-wrap");
-	return t ? [...t.querySelectorAll?.(".draggable-dot") || []] : [];
-}
-function ue(e) {
-	let t = e?.dataset?.dir;
-	return t && J[t] || "right";
-}
-function de(e) {
-	return !!e?.hasAttribute?.(t.handleRotateAttr);
-}
-function fe(e) {
-	return !!e?.hasAttribute?.(t.handleResizeAttr);
-}
-function Y(e) {
-	let t = getComputedStyle(e), n = {};
-	try {
-		n = new DOMMatrixReadOnly(t.transform);
-	} catch {
-		n = new DOMMatrixReadOnly();
-	}
-	let r = n.m41, i = n.m42, a = Number.parseFloat(t.width), o = Number.parseFloat(t.height);
-	if (!Number.isFinite(a) || !Number.isFinite(o)) {
-		let t = e.getBoundingClientRect();
-		a = t.width, o = t.height;
-	}
-	return {
-		angle: -Math.atan2(n.m21, n.m11) * (180 / Math.PI),
-		height: o,
-		width: a,
-		x: r,
-		y: i
-	};
+function _e(e, t) {
+	let n = he[Math.floor((e % 360 + 360) % 360 / 30)];
+	return me[(ge[t] + n) % 8];
 }
-function X(e, t, n, r) {
-	let i = n - e, a = r - t, o = Math.atan2(a, i) * 180 / Math.PI + 90;
-	return o = (o % 360 + 360) % 360, o;
-}
-function pe(e, t, n) {
-	let { width: r, height: i } = e;
-	return {
-		height: Math.abs(i),
-		width: Math.abs(r),
-		x: t - Math.abs(r) / 2,
-		y: n - Math.abs(i) / 2
-	};
-}
-function me({ centerX: e, centerY: t, width: n, height: r, angle: i }) {
-	return {
-		angle: i,
-		height: r,
-		width: n,
-		x: e - n / 2,
-		y: t - r / 2
-	};
-}
-function he(e, t) {
+//#endregion
+//#region src/services/transform/utils/markline.js
+function ve(e, t) {
 	let n = {
 		x: [],
 		y: []
@@ -1204,61 +1332,63 @@ function he(e, t) {
 		});
 	}), n;
 }
-function ge(e) {
+function ye(e) {
 	let t = e.querySelector(".draggable-markline-x"), n = e.querySelector(".draggable-markline-y");
 	return t || (t = document.createElement("div"), t.className = "draggable-markline-x", e.appendChild(t)), n || (n = document.createElement("div"), n.className = "draggable-markline-y", e.appendChild(n)), {
 		x: t,
 		y: n
 	};
 }
-function Z(e) {
+function X(e) {
 	e && (e.style.display = "none");
 }
-function Q(e, t, n) {
+//#endregion
+//#region src/services/transform/utils/resize.js
+function Z(e, t, n) {
 	let r = e + t;
 	return r > n ? e = r : (t = n - e, e = n), {
 		deltaW: t,
 		width: e
 	};
 }
-function $(e, t, n) {
+function Q(e, t, n) {
 	let r = e + t;
 	return r > n ? e = r : (t = n - e, e = n), {
 		deltaH: t,
 		height: e
 	};
 }
-function _e(e, t, n, r, i, a, o) {
+function be(e, t, n, r, i, a, o) {
 	let { width: s, height: c, centerX: l, centerY: u, rotateAngle: d } = t, f = s < 0 ? -1 : 1, p = c < 0 ? -1 : 1;
 	switch (s = Math.abs(s), c = Math.abs(c), [
 		"top-left",
 		"top-right",
 		"bottom-left",
 		"bottom-right"
-	].includes(e) && (e === "top-right" ? r = -r : e === "bottom-left" ? n = -n : e === "top-left" && (n = -n, r = -r), {width: s, deltaW: n} = Q(s, n, a), {height: c, deltaH: r} = $(c, r, o), i && (r = n / i, c = s / i)), e) {
+	].includes(e) && (e === "top-right" ? r = -r : e === "bottom-left" ? n = -n : e === "top-left" && (n = -n, r = -r), {width: s, deltaW: n} = Z(s, n, a), {height: c, deltaH: r} = Q(c, r, o), i && (r = n / i, c = s / i)), e) {
 		case "right":
-			({width: s, deltaW: n} = Q(s, n, a)), i ? (r = n / i, c = s / i, l += n / 2 * Math.cos(W(d)) - r / 2 * Math.sin(W(d)), u += n / 2 * Math.sin(W(d)) + r / 2 * Math.cos(W(d))) : (l += n / 2 * Math.cos(W(d)), u += n / 2 * Math.sin(W(d)));
+			({width: s, deltaW: n} = Z(s, n, a)), i ? (r = n / i, c = s / i, l += n / 2 * Math.cos(G(d)) - r / 2 * Math.sin(G(d)), u += n / 2 * Math.sin(G(d)) + r / 2 * Math.cos(G(d))) : (l += n / 2 * Math.cos(G(d)), u += n / 2 * Math.sin(G(d)));
 			break;
 		case "top-right":
-			l += n / 2 * Math.cos(W(d)) + r / 2 * Math.sin(W(d)), u += n / 2 * Math.sin(W(d)) - r / 2 * Math.cos(W(d));
+			l += n / 2 * Math.cos(G(d)) + r / 2 * Math.sin(G(d)), u += n / 2 * Math.sin(G(d)) - r / 2 * Math.cos(G(d));
 			break;
 		case "bottom-right":
-			l += n / 2 * Math.cos(W(d)) - r / 2 * Math.sin(W(d)), u += n / 2 * Math.sin(W(d)) + r / 2 * Math.cos(W(d));
+			l += n / 2 * Math.cos(G(d)) - r / 2 * Math.sin(G(d)), u += n / 2 * Math.sin(G(d)) + r / 2 * Math.cos(G(d));
 			break;
 		case "bottom":
-			({height: c, deltaH: r} = $(c, r, o)), i ? (n = r * i, s = c * i, l += n / 2 * Math.cos(W(d)) - r / 2 * Math.sin(W(d)), u += n / 2 * Math.sin(W(d)) + r / 2 * Math.cos(W(d))) : (l -= r / 2 * Math.sin(W(d)), u += r / 2 * Math.cos(W(d)));
+			({height: c, deltaH: r} = Q(c, r, o)), i ? (n = r * i, s = c * i, l += n / 2 * Math.cos(G(d)) - r / 2 * Math.sin(G(d)), u += n / 2 * Math.sin(G(d)) + r / 2 * Math.cos(G(d))) : (l -= r / 2 * Math.sin(G(d)), u += r / 2 * Math.cos(G(d)));
 			break;
 		case "bottom-left":
-			l -= n / 2 * Math.cos(W(d)) + r / 2 * Math.sin(W(d)), u -= n / 2 * Math.sin(W(d)) - r / 2 * Math.cos(W(d));
+			l -= n / 2 * Math.cos(G(d)) + r / 2 * Math.sin(G(d)), u -= n / 2 * Math.sin(G(d)) - r / 2 * Math.cos(G(d));
 			break;
 		case "left":
-			n = -n, {width: s, deltaW: n} = Q(s, n, a), i ? (c = s / i, r = n / i, l -= n / 2 * Math.cos(W(d)) + r / 2 * Math.sin(W(d)), u -= n / 2 * Math.sin(W(d)) - r / 2 * Math.cos(W(d))) : (l -= n / 2 * Math.cos(W(d)), u -= n / 2 * Math.sin(W(d)));
+			n = -n, {width: s, deltaW: n} = Z(s, n, a), i ? (c = s / i, r = n / i, l -= n / 2 * Math.cos(G(d)) + r / 2 * Math.sin(G(d)), u -= n / 2 * Math.sin(G(d)) - r / 2 * Math.cos(G(d))) : (l -= n / 2 * Math.cos(G(d)), u -= n / 2 * Math.sin(G(d)));
 			break;
 		case "top-left":
-			l -= n / 2 * Math.cos(W(d)) - r / 2 * Math.sin(W(d)), u -= n / 2 * Math.sin(W(d)) + r / 2 * Math.cos(W(d));
+			l -= n / 2 * Math.cos(G(d)) - r / 2 * Math.sin(G(d)), u -= n / 2 * Math.sin(G(d)) + r / 2 * Math.cos(G(d));
 			break;
 		case "top":
-			r = -r, {height: c, deltaH: r} = $(c, r, o), i ? (s = c * i, n = r * i, l += n / 2 * Math.cos(W(d)) + r / 2 * Math.sin(W(d)), u += n / 2 * Math.sin(W(d)) - r / 2 * Math.cos(W(d))) : (l += r / 2 * Math.sin(W(d)), u -= r / 2 * Math.cos(W(d)));
+			r = -r, {height: c, deltaH: r} = Q(c, r, o), i ? (s = c * i, n = r * i, l += n / 2 * Math.cos(G(d)) + r / 2 * Math.sin(G(d)), u += n / 2 * Math.sin(G(d)) - r / 2 * Math.cos(G(d))) : (l += r / 2 * Math.sin(G(d)), u -= r / 2 * Math.cos(G(d)));
 			break;
 		default: break;
 	}
@@ -1273,7 +1403,25 @@ function _e(e, t, n, r, i, a, o) {
 		}
 	};
 }
-var ve = class {
+//#endregion
+//#region src/services/transform/utils/handles.js
+function xe(e) {
+	let t = e?.querySelector?.(":scope > .draggable-dot-wrap");
+	return t ? [...t.querySelectorAll?.(".draggable-dot") || []] : [];
+}
+function Se(e) {
+	let t = e?.dataset?.dir;
+	return t && pe[t] || "right";
+}
+function Ce(e) {
+	return !!e?.hasAttribute?.(t.handleRotateAttr);
+}
+function $(e) {
+	return !!e?.hasAttribute?.(t.handleResizeAttr);
+}
+//#endregion
+//#region src/services/TransformControllerService.js
+var we = class {
 	order = 25;
 	#e;
 	constructor(e = {}) {
@@ -1315,18 +1463,25 @@ var ve = class {
 	}
 	onDown(e) {
 		let t = e?.session;
-		if (!t?.isDragScope || !f(t.sourceEl) || !this.#e.resizable) return;
+		if (!t?.isDragScope || !m(t.sourceEl) || !this.#e.resizable) return;
 		let { angle: n } = Y(t.sourceEl);
 		n && this.#l(t.sourceEl, n);
 	}
 	onStart(e) {
 		let n = e.session;
-		if (!n?.active || !n?.started || !n.isDragScope || !f(n.sourceEl) || typeof this.#e.canTransform == "function" && !this.#e.canTransform(n.sourceEl)) return;
-		let r = "move", i = "", a = this.#e.rotatable && u(n.sourceEl, t.rotatableAttr, !0), o = this.#e.resizable && u(n.sourceEl, t.resizableAttr, !0);
-		de(n.handleEl) && a ? r = "rotate" : fe(n.handleEl) && o && (r = "resize", i = ue(n.handleEl)), this.#e.disableMirrorInScope && this.#p(n), this.#e.disableDropIndicatorInScope && this.#m(n), n.cache.__transform = {
+		if (!n?.active || !n?.started || !n.isDragScope || !m(n.sourceEl) || typeof this.#e.canTransform == "function" && !this.#e.canTransform(n.sourceEl)) return;
+		let r = n.selectedByNs?.get(n.namespace), i = Array.isArray(r) && r.length > 1, a = "move", o = "", s = this.#e.rotatable && f(n.sourceEl, t.rotatableAttr, !0), c = this.#e.resizable && f(n.sourceEl, t.resizableAttr, !0);
+		if (Ce(n.handleEl) && s) {
+			if (i) return;
+			a = "rotate";
+		} else if ($(n.handleEl) && c) {
+			if (i) return;
+			a = "resize", o = Se(n.handleEl);
+		}
+		this.#e.disableMirrorInScope && this.#m(n), this.#e.disableDropIndicatorInScope && this.#h(n), n.cache.__transform = {
 			phase: 0,
-			type: r,
-			side: i,
+			type: a,
+			side: o,
 			scaleRatio: void 0,
 			container: void 0,
 			containerRect: void 0,
@@ -1353,18 +1508,23 @@ var ve = class {
 			lastAppliedY: void 0,
 			lastAppliedW: void 0,
 			lastAppliedH: void 0,
-			lastAppliedAngle: void 0
+			lastAppliedAngle: void 0,
+			multiSelection: {
+				enabled: i,
+				elements: [],
+				initialTransforms: []
+			}
 		};
 	}
 	onMeasure(e) {
 		let n = e.session, r = n?.cache?.__transform;
 		if (!n?.active || !n?.started || !n.isDragScope || !r || r.phase !== 0) return;
-		if (!f(n.sourceEl)) {
+		if (!m(n.sourceEl)) {
 			n.cache.__transform = void 0;
 			return;
 		}
 		let i = e.adapter.closestDragScope(n.sourceEl);
-		if (!f(i)) {
+		if (!m(i)) {
 			n.cache.__transform = void 0;
 			return;
 		}
@@ -1382,7 +1542,7 @@ var ve = class {
 			h: Math.max(0, i.clientHeight)
 		}), r.type === "rotate") {
 			let e = (n.x - s.left) / a, t = (n.y - s.top) / a;
-			r.rotateOffset = X(r.center.x, r.center.y, e, t) - r.data.angle;
+			r.rotateOffset = J(r.center.x, r.center.y, e, t) - r.data.angle;
 		}
 		if (this.#e.snap || this.#e.markline) {
 			let o = q(n.sourceEl, a, e.adapter);
@@ -1391,22 +1551,39 @@ var ve = class {
 				y: o.top + o.height / 2 - r.center.y
 			};
 			let s = [...i.querySelectorAll?.(`[${t.dragAttr}]`) || []], c = [];
-			for (let t of s) t !== n.sourceEl && f(t) && c.push(q(t, a, e.adapter));
-			if (r.lines = he(c, o), this.#e.markline) {
-				let e = ge(i);
+			for (let t of s) t !== n.sourceEl && m(t) && c.push(q(t, a, e.adapter));
+			if (r.lines = ve(c, o), this.#e.markline) {
+				let e = ye(i);
 				r.guideX = e.x, r.guideY = e.y;
 			}
 		}
+		if (r.multiSelection.enabled) {
+			let e = n.selectedByNs?.get(n.namespace);
+			if (Array.isArray(e)) for (let t of e) t !== n.sourceEl && m(t) && (r.multiSelection.elements.push(t), r.multiSelection.initialTransforms.push(Y(t)));
+		}
 		r.phase = 1;
 	}
 	onCompute(e) {
 		let t = e.session, n = t?.cache?.__transform;
-		!t?.active || !t?.started || !t.isDragScope || !n || n.phase !== 1 || f(t.sourceEl) && (n.didCompute = !0, n.type === "move" ? this.#r(t, n) : n.type === "rotate" ? this.#i(t, n) : n.type === "resize" && this.#a(t, n));
+		!t?.active || !t?.started || !t.isDragScope || !n || n.phase !== 1 || m(t.sourceEl) && (n.didCompute = !0, n.type === "move" ? this.#r(t, n) : n.type === "rotate" ? this.#i(t, n) : n.type === "resize" && this.#a(t, n));
 	}
 	onCommit(e) {
 		let t = e.session, n = t?.cache?.__transform;
-		if (!t?.active || !t?.started || !t.isDragScope || !n || n.phase !== 1 || !n.didCompute || !f(t.sourceEl)) return;
-		this.#u(e, t.sourceEl, n), n.type === "rotate" && this.#e.resizable && n.lastCursorAngle !== n.data?.angle && (n.lastCursorAngle = n.data?.angle, e.frame?.run?.(() => {
+		if (!t?.active || !t?.started || !t.isDragScope || !n || n.phase !== 1 || !n.didCompute || !m(t.sourceEl)) return;
+		if (this.#d(e, t.sourceEl, n), n.multiSelection.enabled && n.type === "move") {
+			let t = n.data.x - n.start.x, r = n.data.y - n.start.y;
+			for (let i = 0; i < n.multiSelection.elements.length; i++) {
+				let a = n.multiSelection.elements[i], o = n.multiSelection.initialTransforms[i], s = {
+					x: o.x + t,
+					y: o.y + r,
+					width: o.width,
+					height: o.height,
+					angle: o.angle
+				};
+				this.#u(e, a, s);
+			}
+		}
+		n.type === "rotate" && this.#e.resizable && n.lastCursorAngle !== n.data?.angle && (n.lastCursorAngle = n.data?.angle, e.frame?.run?.(() => {
 			this.#l(t.sourceEl, n.lastCursorAngle || 0);
 		})), this.#e.markline && this.#c(e, n);
 		let r = e.dnd;
@@ -1424,16 +1601,16 @@ var ve = class {
 	}
 	onEnd(e, t) {
 		let n = e.session, r = n?.cache?.__transform;
-		r && (Z(r.guideX), Z(r.guideY), t?.ended && f(n?.sourceEl) && r?.data && e.dnd?.emit?.("draggable:drop", {
+		r && (X(r.guideX), X(r.guideY), t?.ended && m(n?.sourceEl) && r?.data && e.dnd?.emit?.("draggable:drop", {
 			type: r.type,
 			el: n.sourceEl,
 			data: n.data,
 			...r.data
-		}), t?.ended && r.type === "rotate" && this.#e.resizable && f(n?.sourceEl) && this.#l(n.sourceEl, r.data?.angle || 0), n.cache.__transform = void 0);
+		}), t?.ended && r.type === "rotate" && this.#e.resizable && m(n?.sourceEl) && this.#l(n.sourceEl, r.data?.angle || 0), n.cache.__transform = void 0);
 	}
 	onDestroy(e, t) {
 		let n = t?.cache?.__transform;
-		n && (Z(n.guideX), Z(n.guideY), t.cache.__transform = void 0);
+		n && (X(n.guideX), X(n.guideY), t.cache.__transform = void 0);
 	}
 	#r(e, t) {
 		let n = this.#n(t), r = t.start.x + e.dx / n, i = t.start.y + e.dy / n;
@@ -1441,12 +1618,12 @@ var ve = class {
 			...t.data,
 			x: r,
 			y: i
-		}, this.#s(t), this.#d(t.data, t.boundary);
+		}, this.#s(t), this.#f(t.data, t.boundary);
 	}
 	#i(e, t) {
 		let n = this.#n(t), r = t.containerRect;
 		if (!r) return;
-		let i = (e.x - r.left) / n, a = (e.y - r.top) / n, o = X(t.center.x, t.center.y, i, a) - (t.rotateOffset ?? 0);
+		let i = (e.x - r.left) / n, a = (e.y - r.top) / n, o = J(t.center.x, t.center.y, i, a) - (t.rotateOffset ?? 0);
 		if (o = (o % 360 + 360) % 360, this.#e.rotateSnap) {
 			let e = Number(this.#e.rotateStep) || 15;
 			o = Math.round(o / e) * e;
@@ -1457,13 +1634,13 @@ var ve = class {
 		};
 	}
 	#a(e, t) {
-		let n = this.#n(t), r = this.#e.aspectRatio, i = e.dx / n, a = e.dy / n, o = Math.atan2(a, i), s = G(i, a), c = o - W(t.start.angle), l = s * Math.cos(c), u = s * Math.sin(c), d = {
+		let n = this.#n(t), r = this.#e.aspectRatio, i = e.dx / n, a = e.dy / n, o = Math.atan2(a, i), s = ue(i, a), c = o - G(t.start.angle), l = s * Math.cos(c), u = s * Math.sin(c), d = {
 			centerX: t.start.x + t.start.width / 2,
 			centerY: t.start.y + t.start.height / 2,
 			height: t.start.height,
 			rotateAngle: t.start.angle,
 			width: t.start.width
-		}, { position: { centerX: f, centerY: p }, size: { width: m, height: h } } = _e(t.side, d, l, u, r, this.#e.minWidth, this.#e.minHeight), g = me({
+		}, { position: { centerX: f, centerY: p }, size: { width: m, height: h } } = be(t.side, d, l, u, r, this.#e.minWidth, this.#e.minHeight), g = fe({
 			angle: t.data.angle,
 			centerX: f,
 			centerY: p,
@@ -1471,19 +1648,19 @@ var ve = class {
 			width: m
 		}), _ = {
 			...t.data,
-			...pe(g, f, p)
+			...de(g, f, p)
 		};
 		if (this.#e.maxWidth > 0 && (_.width = Math.min(_.width, this.#e.maxWidth)), this.#e.maxHeight > 0 && (_.height = Math.min(_.height, this.#e.maxHeight)), this.#e.snapToGrid) {
 			let e = _.x + _.width / 2, n = _.y + _.height / 2, i = this.#e.gridX, a = this.#e.gridY, o = t.start.width + K(_.width - t.start.width, i), s;
 			s = r ? o / r : t.start.height + K(_.height - t.start.height, a), _.width = Math.abs(o), _.height = Math.abs(s), _.x = e - _.width / 2, _.y = n - _.height / 2;
 		}
 		let v = _;
-		this.#f(v, t.boundary) ? (t.data = v, t.lastValidData = { ...v }) : t.data = t.lastValidData ? { ...t.lastValidData } : { ...t.start }, this.#s(t);
+		this.#p(v, t.boundary) ? (t.data = v, t.lastValidData = { ...v }) : t.data = t.lastValidData ? { ...t.lastValidData } : { ...t.start }, this.#s(t);
 	}
 	#o(e) {
 		let t = e?.data, n = e?.viewportCenterOffset;
 		if (!t || !n) return e.startRect;
-		let r = W(t.angle || 0), i = Math.cos(r), a = Math.sin(r), o = Math.abs(t.width * i) + Math.abs(t.height * a), s = Math.abs(t.width * a) + Math.abs(t.height * i), c = t.x + t.width / 2 + n.x, l = t.y + t.height / 2 + n.y, u = c - o / 2, d = l - s / 2;
+		let r = G(t.angle || 0), i = Math.cos(r), a = Math.sin(r), o = Math.abs(t.width * i) + Math.abs(t.height * a), s = Math.abs(t.width * a) + Math.abs(t.height * i), c = t.x + t.width / 2 + n.x, l = t.y + t.height / 2 + n.y, u = c - o / 2, d = l - s / 2;
 		return {
 			bottom: d + s,
 			height: s,
@@ -1522,41 +1699,44 @@ var ve = class {
 	}
 	#c(e, t) {
 		let { guideX: n, guideY: r } = t, i = t.mark || {};
-		n && (i.left === void 0 ? e.frame?.setStyle?.(n, "display", "none") : (e.frame?.setStyle?.(n, "display", "block"), e.frame?.setStyle?.(n, "transform", `translate(${U(i.left)}, 0)`))), r && (i.top === void 0 ? e.frame?.setStyle?.(r, "display", "none") : (e.frame?.setStyle?.(r, "display", "block"), e.frame?.setStyle?.(r, "transform", `translate(0, ${U(i.top)})`)));
+		n && (i.left === void 0 ? e.frame?.setStyle?.(n, "display", "none") : (e.frame?.setStyle?.(n, "display", "block"), e.frame?.setStyle?.(n, "transform", `translate(${W(i.left)}, 0)`))), r && (i.top === void 0 ? e.frame?.setStyle?.(r, "display", "none") : (e.frame?.setStyle?.(r, "display", "block"), e.frame?.setStyle?.(r, "transform", `translate(0, ${W(i.top)})`)));
 	}
 	#l(e, t) {
-		let n = le(e);
+		let n = xe(e);
 		for (let e of n) {
 			let n = e?.dataset?.dir;
-			n && (e.style.cursor = `${ce(t, n)}-resize`);
+			n && (e.style.cursor = `${_e(t, n)}-resize`);
 		}
 	}
 	#u(e, t, n) {
+		e.frame?.setStyle?.(t, "transform", `translate(${W(n.x)}, ${W(n.y)}) rotate(${n.angle}deg)`);
+	}
+	#d(e, t, n) {
 		let r = n.data;
-		n.lastAppliedW !== r.width && (e.frame?.setStyle?.(t, "width", U(r.width)), n.lastAppliedW = r.width), n.lastAppliedH !== r.height && (e.frame?.setStyle?.(t, "height", U(r.height)), n.lastAppliedH = r.height), (n.lastAppliedX !== r.x || n.lastAppliedY !== r.y || n.lastAppliedAngle !== r.angle) && (e.frame?.setStyle?.(t, "transform", `translate(${U(r.x)}, ${U(r.y)}) rotate(${r.angle}deg)`), n.lastAppliedX = r.x, n.lastAppliedY = r.y, n.lastAppliedAngle = r.angle);
+		n.lastAppliedW !== r.width && (e.frame?.setStyle?.(t, "width", W(r.width)), n.lastAppliedW = r.width), n.lastAppliedH !== r.height && (e.frame?.setStyle?.(t, "height", W(r.height)), n.lastAppliedH = r.height), (n.lastAppliedX !== r.x || n.lastAppliedY !== r.y || n.lastAppliedAngle !== r.angle) && (this.#u(e, t, r), n.lastAppliedX = r.x, n.lastAppliedY = r.y, n.lastAppliedAngle = r.angle);
 	}
-	#d(e, t) {
+	#f(e, t) {
 		if (!t) return;
-		let n = W(e.angle || 0), r = Math.abs(Math.cos(n)), i = Math.abs(Math.sin(n)), a = e.width * r + e.height * i, o = e.width * i + e.height * r, s = (a - e.width) / 2, c = t.w - a / 2 - e.width / 2, l = (o - e.height) / 2, u = t.h - o / 2 - e.height / 2;
+		let n = G(e.angle || 0), r = Math.abs(Math.cos(n)), i = Math.abs(Math.sin(n)), a = e.width * r + e.height * i, o = e.width * i + e.height * r, s = (a - e.width) / 2, c = t.w - a / 2 - e.width / 2, l = (o - e.height) / 2, u = t.h - o / 2 - e.height / 2;
 		e.x = Math.max(Math.min(s, c), Math.min(e.x, Math.max(s, c))), e.y = Math.max(Math.min(l, u), Math.min(e.y, Math.max(l, u)));
 	}
-	#f(e, t) {
+	#p(e, t) {
 		if (!t) return !0;
-		let n = W(e.angle || 0), r = Math.abs(Math.cos(n)), i = Math.abs(Math.sin(n)), a = e.width * r + e.height * i, o = e.width * i + e.height * r, s = e.x + e.width / 2, c = e.y + e.height / 2, l = s - a / 2, u = s + a / 2, d = c - o / 2, f = c + o / 2;
+		let n = G(e.angle || 0), r = Math.abs(Math.cos(n)), i = Math.abs(Math.sin(n)), a = e.width * r + e.height * i, o = e.width * i + e.height * r, s = e.x + e.width / 2, c = e.y + e.height / 2, l = s - a / 2, u = s + a / 2, d = c - o / 2, f = c + o / 2;
 		return !(l < -.5 || d < -.5 || u > t.w + .5 || f > t.h + .5);
 	}
-	#p(e) {
+	#m(e) {
 		if (e?.mirrorEl) {
 			try {
 				e.mirrorEl.parentNode?.removeChild?.(e.mirrorEl);
 			} catch {}
 			e.mirrorEl = void 0;
 		}
-		if (f(e?.sourceEl)) try {
+		if (m(e?.sourceEl)) try {
 			e.sourceEl.style.visibility = "";
 		} catch {}
 	}
-	#m(e) {
+	#h(e) {
 		if (e?.indicatorEl) {
 			try {
 				e.indicatorEl.parentNode?.removeChild?.(e.indicatorEl);
@@ -1565,9 +1745,9 @@ var ve = class {
 		}
 		e.currentDrop = void 0, e.currentDropRect = void 0, e.currentAllowed = !1;
 	}
-}, ye = {
+}, Te = {
 	name: "@ptahjs/dnd",
-	version: "0.0.2"
+	version: "0.1.1"
 };
 //#endregion
-export { P as ACTIVE_WRAP_CLASS, H as ActiveSelectionService, ee as AutoScrollService, F as DOT_CLASS, y as Dnd, ye as DndVersion, M as DropIndicatorService, b as DropService, x as MirrorService, I as ROTATE_CLASS, ve as TransformControllerService };
+export { j as ACTIVE_WRAP_CLASS, B as ActiveSelectionService, D as AutoScrollService, M as DOT_CLASS, re as Dnd, Te as DndVersion, le as DropIndicatorService, x as DropService, U as MarqueeSelectionService, S as MirrorService, N as ROTATE_CLASS, we as TransformControllerService, z as clearAll, R as setMultipleActive };