sliced-areas 1.0.0

package/dist/sliced-areas-WnMrbsZg.js

@@ -0,0 +1,1732 @@
+var INTERNAL_ATTR = "data-sliced-areas-internal", AUTO_ATTR = "data-sliced-areas-auto", DEFAULT_RATIO = .5, MIN_RATIO = .08, EPS = 1e-6, ALIGN_TOLERANCE = 1e-4, JOIN_TOLERANCE = .02, DEFAULT_SPLITTER_SIZE = 2, JOIN_ZONE_DEPTH = .18, SPLIT_GESTURE_THRESHOLD_PX = 6, SPLIT_AXIS_TOLERANCE_PX = 12, DRAG_PARK_TOLERANCE_PX = 20, CLICK_TOLERANCE_PX = 4, MOVE_SNAP_PX = 12, REPLACE_THRESHOLD_RATIO = MIN_RATIO * 3, SlicedAreasElement = class extends HTMLElement {
+	graph = null;
+	rootEl = null;
+	stashEl = null;
+	resizeObserver = null;
+	dragState = null;
+	areaDragState = null;
+	lastPointer = null;
+	dropOverlay = null;
+	dropShade = null;
+	dragLabel = null;
+	dragSnapshot = null;
+	dragCursor = null;
+	storedGraph = null;
+	storedTags = null;
+	areaResolver = null;
+	resolvedNodes = /* @__PURE__ */ new Map();
+	areaTags = /* @__PURE__ */ new Map();
+	vertCounter = 0;
+	edgeCounter = 0;
+	areaCounter = 0;
+	get layout() {
+		return this.graph ? this.serializeLayout(this.graph) : null;
+	}
+	set layout(e) {
+		if (!e) {
+			this.graph = null, this.areaTags.clear(), this.storedGraph = null, this.storedTags = null, this.resolvedNodes.clear(), this.render();
+			return;
+		}
+		if (e.areas.length === 0) {
+			this.graph = null, this.areaTags.clear(), this.storedGraph = null, this.storedTags = null, this.resolvedNodes.clear(), this.render();
+			return;
+		}
+		this.storedGraph = null, this.storedTags = null, this.graph = this.buildGraphFromLayout(e), this.resolvedNodes.clear(), this.render();
+	}
+	setResolver(e) {
+		this.areaResolver = e, this.resolvedNodes.clear(), e && this.render();
+	}
+	connectedCallback() {
+		this.ensureRoot(), this.addEventListener("sliced-areas:retag", this.onRetagRequest), this.ensureResizeObserver(), this.render();
+	}
+	disconnectedCallback() {
+		this.resizeObserver &&= (this.resizeObserver.disconnect(), null), this.detachDragListeners(), this.removeEventListener("sliced-areas:retag", this.onRetagRequest);
+	}
+	split(e, t = "right", r = 0, i = 0) {
+		if (!this.graph) return;
+		let a = this.nextAreaId(), o = Number.isFinite(r) && Number.isFinite(i) && this.rootEl ? this.splitAreaAtPointer(this.graph, e, t, r, i, a) : this.splitAreaByZone(this.graph, e, t, DEFAULT_RATIO, a);
+		o && (this.ensureAreaNode(a, e, !0), this.graph = this.normalizeGraph(o), this.emitLayoutChange(), this.render());
+	}
+	join(e, t) {
+		if (!this.graph || !this.canJoin(e, t)) return;
+		let n = this.joinAreas(this.graph, e, t);
+		n && (this.graph = this.normalizeGraph(n), this.pruneAreaTags(this.graph), this.emitLayoutChange(), this.render());
+	}
+	replace(e, t) {
+		if (!this.graph) return;
+		let n = this.replaceArea(this.graph, e, t);
+		n && (this.graph = this.normalizeGraph(n), this.removeAreaNode(t), this.pruneAreaTags(this.graph), this.emitLayoutChange(), this.render());
+	}
+	swap(e, t) {
+		if (!this.graph) return;
+		let n = this.swapAreaIds(this.graph, e, t);
+		n && (this.graph = n, this.emitLayoutChange(), this.render());
+	}
+	move(e, t, n, r) {
+		if (!this.graph) return;
+		let i = this.moveArea(this.graph, e, t, n, r);
+		i && (this.graph = this.normalizeGraph(i), this.emitLayoutChange(), this.render());
+	}
+	close(e) {
+		if (!this.graph || !this.graph.areas[e] || Object.keys(this.graph.areas).length <= 1) return;
+		let t = {
+			verts: { ...this.graph.verts },
+			edges: { ...this.graph.edges },
+			areas: { ...this.graph.areas }
+		};
+		delete t.areas[e], this.graph = this.normalizeGraph(t), this.removeAreaNode(e), this.pruneAreaTags(this.graph), this.emitLayoutChange(), this.render();
+	}
+	retag(e, t) {
+		this.graph && this.graph.areas[e] && this.areaTags.get(e) !== t && (this.areaTags.set(e, t), this.resolvedNodes.delete(e), this.detachAreaNode(e), this.emitLayoutChange(), this.render());
+	}
+	maximize(e) {
+		if (!this.graph || this.storedGraph || !this.graph.areas[e]) return;
+		this.storedGraph = this.graph, this.storedTags = new Map(this.areaTags), this.graph = this.createBaseGraph(e), this.areaTags = /* @__PURE__ */ new Map();
+		let t = this.storedTags.get(e);
+		t && this.areaTags.set(e, t), this.emitLayoutChange(), this.render();
+	}
+	restore() {
+		this.storedGraph && (this.graph = this.storedGraph, this.storedTags && (this.areaTags = new Map(this.storedTags)), this.storedGraph = null, this.storedTags = null, this.emitLayoutChange(), this.render());
+	}
+	ensureRoot() {
+		if (this.rootEl) return;
+		let t = this.querySelector(":scope > .sliced-areas-root");
+		this.rootEl = t ?? document.createElement("div"), this.rootEl.classList.add("sliced-areas-root"), this.rootEl.setAttribute(INTERNAL_ATTR, "true"), t || this.appendChild(this.rootEl), this.rootEl.addEventListener("pointerdown", this.onPointerDown), this.ensureStash();
+	}
+	ensureStash() {
+		if (this.stashEl) return;
+		let t = this.querySelector(":scope > .sliced-areas-stash");
+		this.stashEl = t ?? document.createElement("div"), this.stashEl.classList.add("sliced-areas-stash"), this.stashEl.setAttribute(INTERNAL_ATTR, "true"), t || this.appendChild(this.stashEl);
+	}
+	ensureResizeObserver() {
+		this.resizeObserver || (this.resizeObserver = new ResizeObserver(() => {
+			this.render();
+		}), this.resizeObserver.observe(this));
+	}
+	emitLayoutChange() {
+		this.graph && this.dispatchEvent(new CustomEvent("sliced-areas:layoutchange", { detail: { layout: this.serializeLayout(this.graph) } }));
+	}
+	emitCornerClick(e) {
+		e.corner === "top-left" && this.dispatchEvent(new CustomEvent("sliced-areas:cornerclick", { detail: e }));
+	}
+	render() {
+		if (!this.rootEl || !this.graph) return;
+		let n = this.collectAreaNodes();
+		this.ensureStash(), this.stashEl && (this.stashEl.innerHTML = "");
+		let r = Object.values(this.graph.areas).filter((e) => !n.has(e.id));
+		if (r.length > 0 && this.areaResolver) {
+			for (let e of r) {
+				let r = this.resolvedNodes.get(e.id);
+				if (r) {
+					n.set(e.id, r);
+					continue;
+				}
+				let i = this.areaTags.get(e.id) ?? e.id, a = this.areaResolver(i);
+				a && (a.dataset.areaId = e.id, a.setAttribute(AUTO_ATTR, "true"), this.resolvedNodes.set(e.id, a), n.set(e.id, a));
+			}
+			r = Object.values(this.graph.areas).filter((e) => !n.has(e.id));
+		}
+		if (r.length > 0) {
+			let e = {
+				missing: r.map((e) => e.id),
+				areas: Object.values(this.graph.areas).map((e) => ({
+					id: e.id,
+					rect: this.formatRect(this.getAreaRect(this.graph, e))
+				}))
+			};
+			throw Error(`Missing area content detected: ${JSON.stringify(e)}`);
+		}
+		let i = this.rootEl.getBoundingClientRect(), a = Math.max(i.width, 1), o = Math.max(i.height, 1), c = DEFAULT_SPLITTER_SIZE / 2;
+		this.rootEl.innerHTML = "";
+		for (let t of Object.values(this.graph.areas)) {
+			let r = this.getAreaRect(this.graph, t), i = document.createElement("div");
+			i.classList.add("sliced-areas-area"), i.setAttribute(INTERNAL_ATTR, "true");
+			let s = r.left * a + c, l = (1 - r.top) * o + c, u = (r.right - r.left) * a - c * 2, d = (r.top - r.bottom) * o - c * 2;
+			i.style.left = `${s}px`, i.style.top = `${l}px`, i.style.width = `${Math.max(u, 0)}px`, i.style.height = `${Math.max(d, 0)}px`;
+			let f = document.createElement("div");
+			f.classList.add("sliced-areas-overlay"), f.setAttribute(INTERNAL_ATTR, "true"), i.appendChild(f);
+			for (let n of [
+				"top-left",
+				"top-right",
+				"bottom-left",
+				"bottom-right"
+			]) {
+				let r = document.createElement("div");
+				r.classList.add("sliced-areas-corner"), r.classList.add(`is-${n}`), r.setAttribute(INTERNAL_ATTR, "true"), r.dataset.areaId = t.id, r.dataset.corner = n, f.appendChild(r);
+			}
+			let p = n.get(t.id);
+			if (p) i.appendChild(p);
+			else throw Error(`Missing area content for ${t.id}`);
+			this.rootEl.appendChild(i);
+		}
+		if (this.stashEl) for (let [e, t] of n.entries()) this.graph.areas[e] || this.stashEl.appendChild(t);
+		for (let e of this.buildResizeHandles(this.graph, a, o)) this.rootEl.appendChild(e);
+	}
+	collectAreaNodes() {
+		let n = /* @__PURE__ */ new Map(), r = Array.from(this.querySelectorAll("[data-area-id]"));
+		for (let i of r) {
+			if (i.hasAttribute(INTERNAL_ATTR)) continue;
+			let r = i.dataset.areaId;
+			if (!r) continue;
+			let a = i.hasAttribute(AUTO_ATTR), o = n.get(r);
+			if (o) {
+				o.hasAttribute(AUTO_ATTR) && !a && (o.remove(), n.set(r, i));
+				continue;
+			}
+			n.set(r, i);
+		}
+		return n;
+	}
+	ensureAreaNode(n, r, i = !0) {
+		if (Array.from(this.querySelectorAll(`[data-area-id="${n}"]`)).find((t) => !t.hasAttribute(INTERNAL_ATTR))) return;
+		this.inheritAreaTag(n, r);
+		let a = this.areaTags.get(r) ?? this.areaTags.get(n), o = Array.from(this.querySelectorAll(`[data-area-id="${r}"]`)).find((t) => !t.hasAttribute(INTERNAL_ATTR)), s = o?.hasAttribute(AUTO_ATTR) ?? !1;
+		if (i && o && (!s || !this.areaResolver)) {
+			let e = o.cloneNode(!0);
+			e.dataset.areaId = n, e.setAttribute(AUTO_ATTR, "true"), this.appendChild(e);
+			return;
+		}
+		if (a && this.areaResolver) {
+			let e = this.areaResolver(a);
+			if (e) {
+				e.dataset.areaId = n, e.setAttribute(AUTO_ATTR, "true"), this.appendChild(e);
+				return;
+			}
+		}
+		let c = document.createElement("div");
+		c.dataset.areaId = n, c.classList.add("sliced-areas-auto-content"), c.setAttribute(AUTO_ATTR, "true"), c.textContent = a ?? "Area", this.appendChild(c);
+	}
+	inheritAreaTag(e, t) {
+		if (this.areaTags.has(e)) return;
+		let n = this.areaTags.get(t);
+		if (n) {
+			this.areaTags.set(e, n);
+			return;
+		}
+		this.areaTags.set(e, t);
+	}
+	buildGraphFromLayout(e) {
+		this.areaTags.clear();
+		let t = [];
+		for (let n of e.areas) {
+			let e = this.nextAreaId();
+			t.push({
+				id: e,
+				rect: n.rect
+			}), this.areaTags.set(e, n.tag);
+		}
+		let n = this.buildGraphFromRects(t);
+		return this.normalizeGraph(n);
+	}
+	serializeLayout(e) {
+		return { areas: Object.values(e.areas).map((t) => ({
+			tag: this.areaTags.get(t.id) ?? t.id,
+			rect: this.formatRect(this.getAreaRect(e, t))
+		})) };
+	}
+	pruneAreaTags(e) {
+		for (let t of this.areaTags.keys()) e.areas[t] || (this.areaTags.delete(t), this.resolvedNodes.delete(t));
+	}
+	onRetagRequest = (e) => {
+		let t = e.detail?.tag;
+		if (!t || typeof t != "string") return;
+		let n = e.target;
+		if (!(n instanceof HTMLElement)) return;
+		let r = n.closest("[data-area-id]");
+		if (!r || !(r instanceof HTMLElement)) return;
+		let i = r.dataset.areaId;
+		i && this.graph?.areas[i] && (e.stopPropagation(), this.retag(i, t));
+	};
+	normalizeRectsToUnit(e) {
+		let t = Infinity, n = -Infinity, r = Infinity, a = -Infinity;
+		for (let i of e) t = Math.min(t, i.rect.left), n = Math.max(n, i.rect.right), r = Math.min(r, i.rect.bottom), a = Math.max(a, i.rect.top);
+		if (!Number.isFinite(t) || !Number.isFinite(n) || !Number.isFinite(r) || !Number.isFinite(a)) return e;
+		let o = n - t, s = a - r;
+		return o <= EPS || s <= EPS || Math.abs(t) <= EPS && Math.abs(n - 1) <= EPS && Math.abs(r) <= EPS && Math.abs(a - 1) <= EPS ? e : e.map((e) => ({
+			id: e.id,
+			rect: {
+				left: (e.rect.left - t) / o,
+				right: (e.rect.right - t) / o,
+				bottom: (e.rect.bottom - r) / s,
+				top: (e.rect.top - r) / s
+			}
+		}));
+	}
+	buildGraphFromRects(e) {
+		let t = {}, n = {}, r = {}, i = /* @__PURE__ */ new Map(), a = (e, n) => {
+			let r = `${e.toFixed(6)}|${n.toFixed(6)}`, a = i.get(r);
+			if (a) return a;
+			let o = this.addVert(t, e, n);
+			return i.set(r, o), o;
+		};
+		for (let t of e) {
+			let e = t.rect, i = a(e.left, e.bottom), o = a(e.left, e.top), s = a(e.right, e.top), c = a(e.right, e.bottom);
+			r[t.id] = {
+				id: t.id,
+				v1: i,
+				v2: o,
+				v3: s,
+				v4: c
+			}, this.addEdge(n, i, o), this.addEdge(n, o, s), this.addEdge(n, s, c), this.addEdge(n, c, i);
+		}
+		return {
+			verts: t,
+			edges: n,
+			areas: r
+		};
+	}
+	createBaseGraph(e) {
+		let t = {}, n = {}, r = {}, i = this.addVert(t, 0, 0), a = this.addVert(t, 0, 1), o = this.addVert(t, 1, 1), s = this.addVert(t, 1, 0), c = this.nextEdgeId(n);
+		n[c] = {
+			id: c,
+			v1: i,
+			v2: a,
+			border: !0
+		};
+		let l = this.nextEdgeId(n);
+		n[l] = {
+			id: l,
+			v1: a,
+			v2: o,
+			border: !0
+		};
+		let u = this.nextEdgeId(n);
+		n[u] = {
+			id: u,
+			v1: o,
+			v2: s,
+			border: !0
+		};
+		let d = this.nextEdgeId(n);
+		return n[d] = {
+			id: d,
+			v1: s,
+			v2: i,
+			border: !0
+		}, r[e] = {
+			id: e,
+			v1: i,
+			v2: a,
+			v3: o,
+			v4: s
+		}, {
+			verts: t,
+			edges: n,
+			areas: r
+		};
+	}
+	splitAreaByZone(e, t, n, i, a) {
+		let o = e.areas[t];
+		if (!o) return null;
+		let s = this.getAreaRect(e, o), c = Math.max(MIN_RATIO, Math.min(1 - MIN_RATIO, i));
+		if (n === "left" || n === "right") {
+			let r = s.right - s.left, i = n === "left" ? s.left + r * c : s.left + r * (1 - c), o = n === "left" ? "max" : "min";
+			return this.splitAreaAt(e, t, "vertical", i, a, o);
+		}
+		let l = s.top - s.bottom, u = n === "bottom" ? s.bottom + l * c : s.bottom + l * (1 - c), d = n === "bottom" ? "max" : "min";
+		return this.splitAreaAt(e, t, "horizontal", u, a, d);
+	}
+	splitAreaAtPointer(e, t, n, i, a, o) {
+		let s = e.areas[t];
+		if (!s || !this.rootEl) return null;
+		let c = this.rootEl.getBoundingClientRect(), l = (i - c.left) / c.width, u = 1 - (a - c.top) / c.height, d = this.getAreaRect(e, s), f = Math.min(Math.max(l, d.left + MIN_RATIO), d.right - MIN_RATIO), p = Math.min(Math.max(u, d.bottom + MIN_RATIO), d.top - MIN_RATIO);
+		if (n === "left" || n === "right") {
+			let r = n === "left" ? "max" : "min";
+			return this.splitAreaAt(e, t, "vertical", f, o, r);
+		}
+		let m = n === "bottom" ? "max" : "min";
+		return this.splitAreaAt(e, t, "horizontal", p, o, m);
+	}
+	splitAreaAt(e, t, n, r, a, o) {
+		let s = e.areas[t];
+		if (!s) return null;
+		let c = this.getAreaRect(e, s);
+		if (n === "vertical") {
+			if (r <= c.left + EPS || r >= c.right - EPS) return null;
+		} else if (r <= c.bottom + EPS || r >= c.top - EPS) return null;
+		let l = {
+			verts: { ...e.verts },
+			edges: { ...e.edges },
+			areas: { ...e.areas }
+		};
+		if (n === "horizontal") {
+			let e = this.addVert(l.verts, c.left, r), t = this.addVert(l.verts, c.right, r);
+			this.addEdge(l.edges, s.v1, e), this.addEdge(l.edges, e, s.v2), this.addEdge(l.edges, s.v3, t), this.addEdge(l.edges, t, s.v4), this.addEdge(l.edges, e, t);
+			let n = {
+				id: o === "min" ? s.id : a,
+				v1: s.v1,
+				v2: e,
+				v3: t,
+				v4: s.v4
+			}, i = {
+				id: o === "max" ? s.id : a,
+				v1: e,
+				v2: s.v2,
+				v3: s.v3,
+				v4: t
+			};
+			l.areas[n.id] = n, l.areas[i.id] = i, n.id !== s.id && i.id !== s.id && delete l.areas[s.id];
+		} else {
+			let e = this.addVert(l.verts, r, c.bottom), t = this.addVert(l.verts, r, c.top);
+			this.addEdge(l.edges, s.v1, e), this.addEdge(l.edges, e, s.v4), this.addEdge(l.edges, s.v2, t), this.addEdge(l.edges, t, s.v3), this.addEdge(l.edges, e, t);
+			let n = {
+				id: o === "min" ? s.id : a,
+				v1: s.v1,
+				v2: s.v2,
+				v3: t,
+				v4: e
+			}, i = {
+				id: o === "max" ? s.id : a,
+				v1: e,
+				v2: t,
+				v3: s.v3,
+				v4: s.v4
+			};
+			l.areas[n.id] = n, l.areas[i.id] = i, n.id !== s.id && i.id !== s.id && delete l.areas[s.id];
+		}
+		return l;
+	}
+	joinAreas(e, t, n) {
+		let r = e, a = r.areas[t], o = r.areas[n];
+		if (!a || !o) return null;
+		let s = this.getOrientation(r, a, o);
+		if (s === "none") return null;
+		let c = this.getAreaRect(r, a), l = this.getAreaRect(r, o), u = [];
+		if (s === "west" || s === "east") {
+			let e = Math.max(c.bottom, l.bottom), s = Math.min(c.top, l.top);
+			if (s - e <= EPS) return null;
+			let d = this.trimAreaToRange(r, t, "horizontal", e, s);
+			if (r = d.graph, a = r.areas[d.keptAreaId], !a) return null;
+			u = u.concat(d.created);
+			let f = this.trimAreaToRange(r, n, "horizontal", e, s);
+			if (r = f.graph, o = r.areas[f.keptAreaId], !o) return null;
+			u = u.concat(f.created);
+		} else {
+			let e = Math.max(c.left, l.left), s = Math.min(c.right, l.right);
+			if (s - e <= EPS) return null;
+			let d = this.trimAreaToRange(r, t, "vertical", e, s);
+			if (r = d.graph, a = r.areas[d.keptAreaId], !a) return null;
+			u = u.concat(d.created);
+			let f = this.trimAreaToRange(r, n, "vertical", e, s);
+			if (r = f.graph, o = r.areas[f.keptAreaId], !o) return null;
+			u = u.concat(f.created);
+		}
+		let d = this.joinAreasAligned(r, t, n);
+		return d ? u.length === 0 ? d : this.processRemainders(d, u, n) : null;
+	}
+	trimAreaToRange(e, t, n, r, a) {
+		let o = e, s = t, c = [], l = o.areas[s];
+		if (!l) return {
+			graph: o,
+			keptAreaId: s,
+			created: c
+		};
+		let u = this.getAreaRect(o, l);
+		if (n === "horizontal") {
+			if (u.bottom < r - EPS) {
+				let e = this.nextAreaId(), i = this.splitAreaAt(o, s, n, r, e, "max");
+				i && (o = i, c.push({
+					id: e,
+					sourceAreaId: t
+				}));
+			}
+			let e = o.areas[s];
+			if (e && this.getAreaRect(o, e).top > a + EPS) {
+				let e = this.nextAreaId(), r = this.splitAreaAt(o, s, n, a, e, "min");
+				r && (o = r, c.push({
+					id: e,
+					sourceAreaId: t
+				}));
+			}
+		} else {
+			if (u.left < r - EPS) {
+				let e = this.nextAreaId(), i = this.splitAreaAt(o, s, n, r, e, "max");
+				i && (o = i, c.push({
+					id: e,
+					sourceAreaId: t
+				}));
+			}
+			let e = o.areas[s];
+			if (e && this.getAreaRect(o, e).right > a + EPS) {
+				let e = this.nextAreaId(), r = this.splitAreaAt(o, s, n, a, e, "min");
+				r && (o = r, c.push({
+					id: e,
+					sourceAreaId: t
+				}));
+			}
+		}
+		return {
+			graph: o,
+			keptAreaId: s,
+			created: c
+		};
+	}
+	processRemainders(e, t, n) {
+		let r = e, i = t.filter((e) => e.sourceAreaId === n), a = t.filter((e) => e.sourceAreaId !== n);
+		if (i.length > 0) {
+			let e = i[0], t = i.slice(1);
+			e && r.areas[e.id] && !r.areas[n] && (r = this.renameAreaId(r, e.id, n)), this.ensureAreaNode(n, n, !0);
+			for (let e of t) this.ensureAreaNode(e.id, n, !0);
+		} else this.removeAreaNode(n);
+		for (let e of a) delete r.areas[e.id], this.removeAreaNode(e.id);
+		return r;
+	}
+	setAreaRect(e, t, n) {
+		if (!e.areas[t]) return e;
+		let r = {
+			verts: { ...e.verts },
+			edges: { ...e.edges },
+			areas: { ...e.areas }
+		}, i = this.addVert(r.verts, n.left, n.bottom), a = this.addVert(r.verts, n.left, n.top), o = this.addVert(r.verts, n.right, n.top), s = this.addVert(r.verts, n.right, n.bottom);
+		return this.addEdge(r.edges, i, a), this.addEdge(r.edges, a, o), this.addEdge(r.edges, o, s), this.addEdge(r.edges, s, i), r.areas[t] = {
+			id: t,
+			v1: i,
+			v2: a,
+			v3: o,
+			v4: s
+		}, r;
+	}
+	moveArea(e, t, n, r, a) {
+		let o = e.areas[t], s = e.areas[n];
+		if (!o || !s || t === n) return null;
+		let c = {
+			verts: { ...e.verts },
+			edges: { ...e.edges },
+			areas: { ...e.areas }
+		}, l = r.right - r.left, u = r.top - r.bottom, d = a.right - a.left, f = a.top - a.bottom;
+		if (l <= EPS || u <= EPS || d <= EPS || f <= EPS) return null;
+		let p = this.setAreaRect(c, t, r);
+		return this.setAreaRect(p, n, a);
+	}
+	replaceArea(e, t, n) {
+		let r = e.areas[t], i = e.areas[n];
+		if (!r || !i || t === n) return null;
+		let a = this.getAreaRect(e, i), o = {
+			verts: { ...e.verts },
+			edges: { ...e.edges },
+			areas: { ...e.areas }
+		}, s = this.setAreaRect(o, t, a);
+		return delete s.areas[n], s;
+	}
+	renameAreaId(t, n, r) {
+		if (n === r) return t;
+		let i = t.areas[n];
+		if (!i) return t;
+		if (t.areas[r]) throw Error(`Cannot rename area ${n} to ${r}: target id already exists`);
+		let a = {
+			verts: { ...t.verts },
+			edges: { ...t.edges },
+			areas: { ...t.areas }
+		};
+		a.areas[r] = {
+			...i,
+			id: r
+		}, delete a.areas[n];
+		let o = Array.from(this.querySelectorAll(`[data-area-id="${r}"]`)).find((t) => !t.hasAttribute(INTERNAL_ATTR)), s = Array.from(this.querySelectorAll(`[data-area-id="${n}"]`)).find((t) => !t.hasAttribute(INTERNAL_ATTR));
+		s && (o ? s.remove() : s.dataset.areaId = r);
+		let c = this.areaTags.get(n);
+		c && (this.areaTags.set(r, c), this.areaTags.delete(n));
+		let l = this.resolvedNodes.get(n);
+		return l && (this.resolvedNodes.set(r, l), this.resolvedNodes.delete(n)), a;
+	}
+	removeAreaNode(t) {
+		let n = Array.from(this.querySelectorAll(`[data-area-id="${t}"]`)).find((t) => !t.hasAttribute(INTERNAL_ATTR));
+		n && n.remove(), this.areaTags.delete(t), this.resolvedNodes.delete(t);
+	}
+	detachAreaNode(t) {
+		let n = Array.from(this.querySelectorAll(`[data-area-id="${t}"]`)).find((t) => !t.hasAttribute(INTERNAL_ATTR));
+		n && n.remove(), this.resolvedNodes.delete(t);
+	}
+	joinAreasAligned(e, t, n) {
+		let r = e.areas[t], i = e.areas[n];
+		if (!r || !i) return null;
+		let a = this.getOrientation(e, r, i);
+		if (a === "none" || !this.areAreasAligned(e, r, i, a)) return null;
+		let o = {
+			verts: { ...e.verts },
+			edges: { ...e.edges },
+			areas: { ...e.areas }
+		}, s = { ...r };
+		return a === "west" ? (s.v1 = i.v1, s.v2 = i.v2, this.addEdge(o.edges, s.v2, s.v3), this.addEdge(o.edges, s.v1, s.v4)) : a === "north" ? (s.v2 = i.v2, s.v3 = i.v3, this.addEdge(o.edges, s.v1, s.v2), this.addEdge(o.edges, s.v3, s.v4)) : a === "east" ? (s.v3 = i.v3, s.v4 = i.v4, this.addEdge(o.edges, s.v2, s.v3), this.addEdge(o.edges, s.v1, s.v4)) : a === "south" && (s.v1 = i.v1, s.v4 = i.v4, this.addEdge(o.edges, s.v1, s.v2), this.addEdge(o.edges, s.v3, s.v4)), o.areas[t] = s, delete o.areas[n], o;
+	}
+	swapAreaIds(e, t, n) {
+		let r = e.areas[t], i = e.areas[n];
+		if (!r || !i) return null;
+		let a = {
+			verts: { ...e.verts },
+			edges: { ...e.edges },
+			areas: { ...e.areas }
+		};
+		return a.areas[t] = {
+			...i,
+			id: t
+		}, a.areas[n] = {
+			...r,
+			id: n
+		}, a;
+	}
+	canJoin(e, t) {
+		if (!this.graph) return !1;
+		let n = this.graph.areas[e], r = this.graph.areas[t];
+		if (!n || !r) return !1;
+		let a = this.getOrientation(this.graph, n, r);
+		if (a === "none") return !1;
+		let o = this.getAreaRect(this.graph, n), s = this.getAreaRect(this.graph, r);
+		return a === "west" || a === "east" ? Math.min(o.top, s.top) - Math.max(o.bottom, s.bottom) > EPS : Math.min(o.right, s.right) - Math.max(o.left, s.left) > EPS;
+	}
+	areAreasAligned(e, t, n, r) {
+		let i = this.getOffsets(e, t, n, r);
+		return i ? Math.abs(i.offset1) <= JOIN_TOLERANCE && Math.abs(i.offset2) <= JOIN_TOLERANCE : !1;
+	}
+	getOrientation(e, t, n) {
+		let r = this.getAreaRect(e, t), a = this.getAreaRect(e, n), s = Math.min(r.right, a.right) - Math.max(r.left, a.left), c = Math.min(r.top, a.top) - Math.max(r.bottom, a.bottom), l = Math.min(JOIN_TOLERANCE, r.right - r.left, a.right - a.left), u = Math.min(JOIN_TOLERANCE, r.top - r.bottom, a.top - a.bottom);
+		return Math.abs(r.top - a.bottom) <= EPS && s >= l ? "north" : Math.abs(r.bottom - a.top) <= EPS && s >= l ? "south" : Math.abs(r.left - a.right) <= EPS && c >= u ? "west" : Math.abs(r.right - a.left) <= EPS && c >= u ? "east" : "none";
+	}
+	getOffsets(e, t, n, r) {
+		let i = e.verts[t.v1], a = e.verts[t.v2], o = e.verts[t.v3], s = e.verts[t.v4], c = e.verts[n.v1], l = e.verts[n.v2], u = e.verts[n.v3], d = e.verts[n.v4];
+		return !i || !a || !o || !s || !c || !l || !u || !d ? null : r === "west" ? {
+			offset1: u.y - a.y,
+			offset2: d.y - i.y
+		} : r === "north" ? {
+			offset1: a.x - c.x,
+			offset2: o.x - d.x
+		} : r === "east" ? {
+			offset1: l.y - o.y,
+			offset2: c.y - s.y
+		} : r === "south" ? {
+			offset1: i.x - l.x,
+			offset2: s.x - u.x
+		} : null;
+	}
+	buildResizeHandles(t, n, r) {
+		let a = [], o = DEFAULT_SPLITTER_SIZE + 2, c = /* @__PURE__ */ new Map();
+		for (let e of Object.values(t.areas)) {
+			let n = this.getAreaRect(t, e);
+			this.registerEdge(c, "vertical", n.left, n.bottom, n.top), this.registerEdge(c, "vertical", n.right, n.bottom, n.top), this.registerEdge(c, "horizontal", n.bottom, n.left, n.right), this.registerEdge(c, "horizontal", n.top, n.left, n.right);
+		}
+		for (let t of c.values()) {
+			if (t.axis === "vertical" && (t.coord <= EPS || t.coord >= 1 - EPS) || t.axis === "horizontal" && (t.coord <= EPS || t.coord >= 1 - EPS)) continue;
+			let s = this.computeSharedSegments(t.segments);
+			for (let i of s) {
+				let s = document.createElement("div");
+				s.classList.add("sliced-areas-handle"), s.setAttribute(INTERNAL_ATTR, "true"), s.dataset.axis = t.axis, s.dataset.coord = t.coord.toFixed(6), s.dataset.start = i.start.toFixed(6), s.dataset.end = i.end.toFixed(6), t.axis === "vertical" ? (s.classList.add("is-vertical"), s.style.left = `${t.coord * n - o / 2}px`, s.style.top = `${(1 - i.end) * r}px`, s.style.width = `${o}px`, s.style.height = `${(i.end - i.start) * r}px`) : (s.classList.add("is-horizontal"), s.style.left = `${i.start * n}px`, s.style.top = `${(1 - t.coord) * r - o / 2}px`, s.style.width = `${(i.end - i.start) * n}px`, s.style.height = `${o}px`), a.push(s);
+			}
+		}
+		return a;
+	}
+	registerEdge(e, t, n, r, i) {
+		let a = Math.min(r, i), o = Math.max(r, i), s = `${t}|${n.toFixed(6)}`, c = e.get(s), l = c ?? {
+			axis: t,
+			coord: n,
+			segments: []
+		};
+		l.segments.push({
+			start: a,
+			end: o
+		}), c || e.set(s, l);
+	}
+	computeSharedSegments(e) {
+		let t = [];
+		for (let n of e) {
+			let e = Math.min(n.start, n.end), r = Math.max(n.start, n.end);
+			r - e <= EPS || (t.push({
+				pos: e,
+				delta: 1
+			}), t.push({
+				pos: r,
+				delta: -1
+			}));
+		}
+		t.sort((e, t) => Math.abs(e.pos - t.pos) > EPS ? e.pos - t.pos : e.delta - t.delta);
+		let n = [], r = 0, a = null;
+		for (let e of t) {
+			let t = r;
+			r += e.delta, t < 2 && r >= 2 ? a = e.pos : t >= 2 && r < 2 && a !== null && (e.pos - a > EPS && n.push({
+				start: a,
+				end: e.pos
+			}), a = null);
+		}
+		return n;
+	}
+	onPointerDown = (e) => {
+		if (!this.rootEl || !this.graph) return;
+		let t = e.target;
+		if (!(t instanceof HTMLElement)) return;
+		if (t.classList.contains("sliced-areas-grab")) {
+			let n = t.dataset.areaId;
+			if (!n) return;
+			e.preventDefault(), this.startAreaDrag(e, n);
+			return;
+		}
+		if (t.classList.contains("sliced-areas-corner")) {
+			let n = t.dataset.areaId;
+			if (!n) return;
+			let r = t.dataset.corner;
+			e.preventDefault(), this.startAreaDrag(e, n, r);
+			return;
+		}
+		if (!t.classList.contains("sliced-areas-handle")) return;
+		e.preventDefault();
+		let n = t.dataset.axis ?? "", r = Number(t.dataset.coord), i = Number(t.dataset.start), a = Number(t.dataset.end);
+		if (!n || !Number.isFinite(r) || !Number.isFinite(i) || !Number.isFinite(a)) return;
+		let o = this.getEdgeDragBounds(this.graph, n, r, i, a);
+		o && (t.setPointerCapture(e.pointerId), this.dragState = {
+			axis: n,
+			coord: r,
+			start: i,
+			end: a,
+			min: o.min,
+			max: o.max,
+			pointerId: e.pointerId,
+			originX: e.clientX,
+			originY: e.clientY
+		}, this.dragSnapshot = this.cloneGraph(this.graph), window.addEventListener("pointermove", this.onPointerMove), window.addEventListener("pointerup", this.onPointerUp), window.addEventListener("keydown", this.onKeyDown), window.addEventListener("keyup", this.onKeyUp));
+	};
+	onPointerMove = (e) => {
+		if (this.areaDragState) {
+			this.updateAreaDrag(e);
+			return;
+		}
+		if (!this.rootEl || !this.graph || !this.dragState) return;
+		let t = this.rootEl.getBoundingClientRect(), n = Math.max(t.width, 1), r = Math.max(t.height, 1), i = e.clientX - this.dragState.originX, a = e.clientY - this.dragState.originY, o = this.dragState.axis === "vertical" ? i / n : -a / r, s = Math.max(this.dragState.min, Math.min(this.dragState.max, this.dragState.coord + o)), c = this.moveEdge(this.graph, this.dragState.axis, this.dragState.coord, s, this.dragState.start, this.dragState.end);
+		c && (this.graph = c, this.dragState.coord = s, this.dragState.originX = e.clientX, this.dragState.originY = e.clientY, this.render());
+	};
+	onPointerUp = (e) => {
+		if (this.areaDragState) {
+			let t = this.areaDragState.originCorner, n = this.areaDragState.moved ?? !1;
+			t === "top-left" && !n && this.emitCornerClick({
+				areaId: this.areaDragState.sourceAreaId,
+				corner: t,
+				clientX: e.clientX,
+				clientY: e.clientY
+			}), this.finishAreaDrag();
+			return;
+		}
+		this.dragState && (this.dragState = null, this.detachDragListeners(), this.detachKeyListener(), this.dragSnapshot = null, this.graph &&= this.normalizeGraph(this.graph), this.emitLayoutChange());
+	};
+	onKeyDown = (e) => {
+		if (e.key === "Control") {
+			this.areaDragState && (this.areaDragState.swapMode = !0, this.refreshAreaDrag());
+			return;
+		}
+		if (e.key === "Escape") {
+			if (this.areaDragState) {
+				e.preventDefault(), this.cancelAreaDrag();
+				return;
+			}
+			this.dragState && (e.preventDefault(), this.cancelResizeDrag());
+		}
+	};
+	onKeyUp = (e) => {
+		e.key === "Control" && this.areaDragState && (this.areaDragState.swapMode = !1, this.refreshAreaDrag());
+	};
+	cancelAreaDrag() {
+		this.areaDragState = null, this.hideDropOverlay(), this.hideJoinShade(), this.hideDragLabel(), this.detachDragListeners(), this.detachKeyListener(), this.resetDragCursor(!0), this.lastPointer = null;
+	}
+	cancelResizeDrag() {
+		this.dragSnapshot && (this.graph = this.dragSnapshot, this.dragSnapshot = null, this.render()), this.dragState = null, this.detachDragListeners(), this.detachKeyListener();
+	}
+	refreshAreaDrag() {
+		!this.areaDragState || !this.lastPointer || this.updateAreaDragAt(this.lastPointer.x, this.lastPointer.y);
+	}
+	setDragCursor(e) {
+		this.rootEl && (this.dragCursor === null && (this.dragCursor = this.rootEl.style.cursor || ""), this.rootEl.style.cursor = e);
+	}
+	resetDragCursor(e = !1) {
+		this.rootEl && (this.dragCursor !== null || e) && (this.rootEl.style.cursor = this.dragCursor ?? "", this.dragCursor = null);
+	}
+	cloneGraph(e) {
+		let t = {};
+		for (let [n, r] of Object.entries(e.verts)) t[n] = { ...r };
+		let n = {};
+		for (let [t, r] of Object.entries(e.edges)) n[t] = { ...r };
+		let r = {};
+		for (let [t, n] of Object.entries(e.areas)) r[t] = { ...n };
+		return {
+			verts: t,
+			edges: n,
+			areas: r
+		};
+	}
+	detachDragListeners() {
+		window.removeEventListener("pointermove", this.onPointerMove), window.removeEventListener("pointerup", this.onPointerUp);
+	}
+	detachKeyListener() {
+		window.removeEventListener("keydown", this.onKeyDown), window.removeEventListener("keyup", this.onKeyUp);
+	}
+	startAreaDrag(e, t, n) {
+		this.rootEl && (this.areaDragState = {
+			sourceAreaId: t,
+			pointerId: e.pointerId,
+			startX: e.clientX,
+			startY: e.clientY,
+			lastX: e.clientX,
+			lastY: e.clientY,
+			axis: null,
+			swapMode: e.ctrlKey,
+			originCorner: n,
+			moved: !1
+		}, e.target instanceof HTMLElement && e.target.setPointerCapture(e.pointerId), window.addEventListener("pointermove", this.onPointerMove), window.addEventListener("pointerup", this.onPointerUp), window.addEventListener("keydown", this.onKeyDown), window.addEventListener("keyup", this.onKeyUp));
+	}
+	updateAreaDrag(e) {
+		!this.rootEl || !this.graph || !this.areaDragState || (this.areaDragState.swapMode = e.ctrlKey, this.updateAreaDragAt(e.clientX, e.clientY));
+	}
+	updateAreaDragAt(e, t) {
+		if (!this.rootEl || !this.graph || !this.areaDragState) return;
+		this.lastPointer = {
+			x: e,
+			y: t
+		};
+		let n = e - this.areaDragState.startX, r = t - this.areaDragState.startY;
+		if (Math.hypot(n, r) > CLICK_TOLERANCE_PX && (this.areaDragState.moved = !0), Math.hypot(n, r) <= DRAG_PARK_TOLERANCE_PX) {
+			this.hideDropOverlay(), this.hideJoinShade(), this.hideDragLabel(), this.resetDragCursor();
+			return;
+		}
+		let i = this.areaDragState.sourceAreaId, a = this.findAreaAtPoint(e, t);
+		if (!a) {
+			this.hideDropOverlay(), this.hideJoinShade(), this.hideDragLabel(), this.resetDragCursor();
+			return;
+		}
+		if (a.areaId === i) {
+			let n = this.canSplitRect(a.rect, "vertical"), r = this.canSplitRect(a.rect, "horizontal");
+			if (!n && !r) {
+				this.hideDropOverlay(), this.hideDragLabel(), this.resetDragCursor();
+				return;
+			}
+			if (n !== r) {
+				let r = n ? "vertical" : "horizontal", i = this.getSplitZoneByAxis(a.rect, e, t, r), o = this.getSplitOverlayRect(a.rect, i, e, t);
+				this.showSplitOverlay(a, i, o), this.hideJoinShade(), this.hideDragLabel(), this.setDragCursor(r === "vertical" ? "col-resize" : "row-resize");
+				return;
+			}
+			let i = this.resolveSplitGesture(this.areaDragState, e, t);
+			if (!i) {
+				this.hideDropOverlay(), this.hideDragLabel(), this.resetDragCursor();
+				return;
+			}
+			let o = this.getSplitZone(a.rect, e, t, i), s = this.getSplitOverlayRect(a.rect, o, e, t);
+			this.showSplitOverlay(a, o, s), this.hideJoinShade(), this.hideDragLabel(), this.setDragCursor(i.axis === "vertical" ? "col-resize" : "row-resize");
+			return;
+		}
+		if (this.areaDragState.swapMode) {
+			this.showDropOverlay({
+				areaId: a.areaId,
+				rect: a.rect
+			}, "center", "swap", a.rect), this.hideJoinShade(), this.showDragLabel(e, t, "Swap"), this.setDragCursor("copy"), this.lastDropTarget = {
+				areaId: a.areaId,
+				rect: a.rect,
+				zone: "center",
+				mode: "swap"
+			};
+			return;
+		}
+		let o = this.findJoinTargetAtPoint(i, e, t);
+		if (!o) {
+			let n = this.getMoveZone(a.rect, e, t);
+			if (n === "center") {
+				this.hideDropOverlay(), this.hideJoinShade(), this.hideDragLabel(), this.resetDragCursor();
+				return;
+			}
+			let r = this.getMovePreview(a.rect, n, e, t);
+			if (r.replace) {
+				this.showDropOverlay({
+					areaId: a.areaId,
+					rect: a.rect
+				}, n, "replace", a.rect), this.hideJoinShade(), this.showDragLabel(e, t, "Replace"), this.setDragCursor("alias"), this.lastDropTarget = {
+					areaId: a.areaId,
+					rect: a.rect,
+					zone: n,
+					mode: "replace"
+				};
+				return;
+			}
+			this.showDropOverlay({
+				areaId: a.areaId,
+				rect: a.rect
+			}, n, "move", r.overlay), this.hideJoinShade(), this.showDragLabel(e, t, "Move"), this.setDragCursor("move"), this.lastDropTarget = {
+				areaId: a.areaId,
+				rect: a.rect,
+				zone: n,
+				mode: "move",
+				moveRect: r.overlay,
+				remainderRect: r.remainder
+			};
+			return;
+		}
+		this.showDropOverlay({
+			areaId: o.areaId,
+			rect: o.rect
+		}, o.zone, "join", o.result, o.direction), this.showJoinShade(o.result, o.sourceRect, o.rect), this.showDragLabel(e, t, this.getJoinLabel(o.direction)), this.setDragCursor("pointer");
+	}
+	finishAreaDrag() {
+		if (!this.areaDragState || !this.graph) return;
+		let { sourceAreaId: e } = this.areaDragState, t = this.lastPointer, n = this.lastDropTarget;
+		if (this.areaDragState = null, this.hideDropOverlay(), this.hideJoinShade(), this.hideDragLabel(), this.detachDragListeners(), this.detachKeyListener(), this.resetDragCursor(!0), this.lastPointer = null, n) {
+			if (n.mode === "split") {
+				if (n.zone !== "center") {
+					let r = n.zone === "left" || n.zone === "right" ? "vertical" : "horizontal";
+					if (!this.canSplitRect(n.rect, r)) return;
+					this.split(e, n.zone, t?.x ?? 0, t?.y ?? 0);
+				}
+				return;
+			}
+			if (n.mode === "replace") {
+				this.replace(e, n.areaId);
+				return;
+			}
+			if (n.mode === "move") {
+				if (!n.moveRect || !n.remainderRect || n.zone === "center") return;
+				this.move(e, n.areaId, n.moveRect, n.remainderRect);
+				return;
+			}
+			if (n.mode === "swap") {
+				this.swap(e, n.areaId);
+				return;
+			}
+			if (n.areaId !== e) {
+				if (n.zone === "center") {
+					this.swap(e, n.areaId);
+					return;
+				}
+				(n.zone === "left" || n.zone === "right" || n.zone === "top" || n.zone === "bottom") && this.join(e, n.areaId);
+			}
+		}
+	}
+	lastDropTarget = null;
+	showDropOverlay(t, n, r, i, a) {
+		if (!this.rootEl) return;
+		let o = this.rootEl.getBoundingClientRect(), s = Math.max(o.width, 1), c = Math.max(o.height, 1), l = i ?? this.getZoneRect(t.rect, n, r);
+		this.dropOverlay || (this.dropOverlay = document.createElement("div"), this.dropOverlay.classList.add("sliced-areas-drop"), this.dropOverlay.setAttribute(INTERNAL_ATTR, "true")), this.dropOverlay.isConnected || this.rootEl.appendChild(this.dropOverlay), this.dropOverlay.innerHTML = "", this.dropOverlay.style.left = `${l.left * s}px`, this.dropOverlay.style.top = `${(1 - l.top) * c}px`, this.dropOverlay.style.width = `${(l.right - l.left) * s}px`, this.dropOverlay.style.height = `${(l.top - l.bottom) * c}px`, this.dropOverlay.dataset.zone = n, this.dropOverlay.dataset.mode = r, delete this.dropOverlay.dataset.splitMode, this.dropOverlay.style.display = "block", this.lastDropTarget = {
+			areaId: t.areaId,
+			rect: t.rect,
+			zone: n,
+			mode: r,
+			direction: a
+		};
+	}
+	showSplitOverlay(t, n, r) {
+		if (!this.rootEl) return;
+		let i = this.rootEl.getBoundingClientRect(), a = Math.max(i.width, 1), o = Math.max(i.height, 1);
+		this.dropOverlay || (this.dropOverlay = document.createElement("div"), this.dropOverlay.classList.add("sliced-areas-drop"), this.dropOverlay.setAttribute(INTERNAL_ATTR, "true")), this.dropOverlay.isConnected || this.rootEl.appendChild(this.dropOverlay), this.dropOverlay.style.left = "0px", this.dropOverlay.style.top = "0px", this.dropOverlay.style.width = `${a}px`, this.dropOverlay.style.height = `${o}px`, this.dropOverlay.dataset.zone = "split", this.dropOverlay.dataset.mode = "split", this.dropOverlay.dataset.splitMode = "true", this.dropOverlay.innerHTML = "";
+		let s = r, c;
+		c = n === "left" ? {
+			left: r.right,
+			right: t.rect.right,
+			top: t.rect.top,
+			bottom: t.rect.bottom
+		} : n === "right" ? {
+			left: t.rect.left,
+			right: r.left,
+			top: t.rect.top,
+			bottom: t.rect.bottom
+		} : n === "bottom" ? {
+			left: t.rect.left,
+			right: t.rect.right,
+			top: t.rect.top,
+			bottom: r.top
+		} : {
+			left: t.rect.left,
+			right: t.rect.right,
+			top: r.bottom,
+			bottom: t.rect.bottom
+		};
+		for (let e of [s, c]) {
+			let t = document.createElement("div");
+			t.classList.add("sliced-areas-drop-piece"), t.style.left = `${e.left * a}px`, t.style.top = `${(1 - e.top) * o}px`, t.style.width = `${(e.right - e.left) * a}px`, t.style.height = `${(e.top - e.bottom) * o}px`, this.dropOverlay.appendChild(t);
+		}
+		this.dropOverlay.style.display = "block", this.lastDropTarget = {
+			areaId: t.areaId,
+			rect: t.rect,
+			zone: n,
+			mode: "split"
+		};
+	}
+	getMovePreview(e, t, n, a) {
+		if (!this.rootEl) return {
+			overlay: e,
+			remainder: e,
+			replace: !0
+		};
+		let o = this.rootEl.getBoundingClientRect(), s = (n - o.left) / o.width, c = 1 - (a - o.top) / o.height, l = MOVE_SNAP_PX / Math.max(o.width, 1), u = MOVE_SNAP_PX / Math.max(o.height, 1), d = (e.left + e.right) / 2, f = (e.bottom + e.top) / 2, h = e.right - e.left, g = e.top - e.bottom, _ = Math.min(h, g) * REPLACE_THRESHOLD_RATIO / 2, v = d - _, y = d + _, b = f - _, x = f + _, S = s >= v && s <= y && c >= b && c <= x;
+		if (t === "left" || t === "right") {
+			let n = t === "left" ? 2 * s - e.left : 2 * s - e.right;
+			Math.abs(n - d) <= l && (n = d), n = Math.min(Math.max(n, e.left + MIN_RATIO), e.right - MIN_RATIO);
+			let a = t === "left" ? {
+				left: e.left,
+				right: n,
+				top: e.top,
+				bottom: e.bottom
+			} : {
+				left: n,
+				right: e.right,
+				top: e.top,
+				bottom: e.bottom
+			}, o = t === "left" ? {
+				left: n,
+				right: e.right,
+				top: e.top,
+				bottom: e.bottom
+			} : {
+				left: e.left,
+				right: n,
+				top: e.top,
+				bottom: e.bottom
+			}, c = h <= MIN_RATIO * 2 + EPS, u = S || c;
+			return {
+				overlay: u ? e : a,
+				remainder: u ? e : o,
+				replace: u
+			};
+		}
+		let C = t === "bottom" ? 2 * c - e.bottom : 2 * c - e.top;
+		Math.abs(C - f) <= u && (C = f), C = Math.min(Math.max(C, e.bottom + MIN_RATIO), e.top - MIN_RATIO);
+		let w = t === "bottom" ? {
+			left: e.left,
+			right: e.right,
+			top: C,
+			bottom: e.bottom
+		} : {
+			left: e.left,
+			right: e.right,
+			top: e.top,
+			bottom: C
+		}, T = t === "bottom" ? {
+			left: e.left,
+			right: e.right,
+			top: e.top,
+			bottom: C
+		} : {
+			left: e.left,
+			right: e.right,
+			top: C,
+			bottom: e.bottom
+		}, E = g <= MIN_RATIO * 2 + EPS, D = S || E;
+		return {
+			overlay: D ? e : w,
+			remainder: D ? e : T,
+			replace: D
+		};
+	}
+	hideDropOverlay() {
+		this.dropOverlay && (this.dropOverlay.style.display = "none"), this.lastDropTarget = null;
+	}
+	showJoinShade(t, n, r) {
+		if (!this.rootEl) return;
+		this.dropShade || (this.dropShade = document.createElement("div"), this.dropShade.classList.add("sliced-areas-drop-dim"), this.dropShade.setAttribute(INTERNAL_ATTR, "true")), this.dropShade.isConnected || this.rootEl.appendChild(this.dropShade);
+		let i = this.rootEl.getBoundingClientRect(), a = Math.max(i.width, 1), o = Math.max(i.height, 1);
+		this.dropShade.innerHTML = "";
+		let s = [...this.subtractRect(n, t), ...this.subtractRect(r, t)];
+		for (let e of s) {
+			let t = document.createElement("div");
+			t.classList.add("sliced-areas-drop-dim-piece"), t.style.left = `${e.left * a}px`, t.style.top = `${(1 - e.top) * o}px`, t.style.width = `${(e.right - e.left) * a}px`, t.style.height = `${(e.top - e.bottom) * o}px`, this.dropShade.appendChild(t);
+		}
+		this.dropShade.style.display = s.length > 0 ? "block" : "none";
+	}
+	hideJoinShade() {
+		this.dropShade && (this.dropShade.style.display = "none");
+	}
+	showDragLabel(t, n, r) {
+		this.rootEl && (this.dragLabel || (this.dragLabel = document.createElement("div"), this.dragLabel.classList.add("sliced-areas-drag-label"), this.dragLabel.setAttribute(INTERNAL_ATTR, "true")), this.dragLabel.isConnected || this.rootEl.appendChild(this.dragLabel), this.dragLabel.textContent = r, this.dragLabel.style.left = `${t}px`, this.dragLabel.style.top = `${n}px`, this.dragLabel.style.display = "block");
+	}
+	hideDragLabel() {
+		this.dragLabel && (this.dragLabel.style.display = "none");
+	}
+	getSplitLabel(e) {
+		return e === "left" ? "Split Left" : e === "right" ? "Split Right" : e === "top" ? "Split Top" : e === "bottom" ? "Split Bottom" : "Split";
+	}
+	getJoinLabel(e) {
+		return e === "left" ? "Join Left" : e === "right" ? "Join Right" : e === "up" ? "Join Up" : "Join Down";
+	}
+	findJoinTargetAtPoint(e, t, n) {
+		if (!this.graph || !this.rootEl) return null;
+		let r = this.graph.areas[e];
+		if (!r) return null;
+		let i = this.rootEl.getBoundingClientRect(), a = (t - i.left) / i.width, o = 1 - (n - i.top) / i.height, s = this.getAreaRect(this.graph, r), l = null;
+		for (let t of Object.values(this.graph.areas)) {
+			if (t.id === e) continue;
+			let n = this.getAreaRect(this.graph, t);
+			if (a < n.left || a > n.right || o < n.bottom || o > n.top) continue;
+			let i = this.getOrientation(this.graph, r, t);
+			if (i !== "none") if (i === "east" || i === "west") {
+				let e = Math.max(s.bottom, n.bottom), r = Math.min(s.top, n.top);
+				if (o < e || o > r) continue;
+				let u = (n.right - n.left) * JOIN_ZONE_DEPTH, d = i === "east" ? a - n.left : n.right - a;
+				if (d < 0 || d > u) continue;
+				(!l || d < l.distance) && (l = {
+					target: t,
+					rect: n,
+					distance: d,
+					orientation: i
+				});
+			} else {
+				let e = Math.max(s.left, n.left), r = Math.min(s.right, n.right);
+				if (a < e || a > r) continue;
+				let u = (n.top - n.bottom) * JOIN_ZONE_DEPTH, d = i === "north" ? o - n.bottom : n.top - o;
+				if (d < 0 || d > u) continue;
+				(!l || d < l.distance) && (l = {
+					target: t,
+					rect: n,
+					distance: d,
+					orientation: i
+				});
+			}
+		}
+		if (!l) return null;
+		let u = l.orientation, d = u === "east" ? "left" : u === "west" ? "right" : u === "north" ? "bottom" : "top", f = u === "east" ? "right" : u === "west" ? "left" : u === "north" ? "up" : "down", p = this.getJoinOverlayRect(s, l.rect, u), m = this.getJoinResultRect(s, l.rect, u);
+		return {
+			areaId: l.target.id,
+			rect: l.rect,
+			zone: d,
+			direction: f,
+			overlay: p,
+			result: m,
+			sourceRect: s
+		};
+	}
+	getJoinOverlayRect(e, t, n) {
+		let r = Math.max(e.bottom, t.bottom), i = Math.min(e.top, t.top), a = Math.max(e.left, t.left), o = Math.min(e.right, t.right);
+		return n === "east" || n === "west" ? {
+			left: t.left,
+			right: t.right,
+			top: i,
+			bottom: r
+		} : {
+			left: a,
+			right: o,
+			top: t.top,
+			bottom: t.bottom
+		};
+	}
+	getJoinResultRect(e, t, n) {
+		let r = Math.max(e.bottom, t.bottom), i = Math.min(e.top, t.top), a = Math.max(e.left, t.left), o = Math.min(e.right, t.right);
+		return n === "east" || n === "west" ? {
+			left: Math.min(e.left, t.left),
+			right: Math.max(e.right, t.right),
+			top: i,
+			bottom: r
+		} : {
+			left: a,
+			right: o,
+			top: Math.max(e.top, t.top),
+			bottom: Math.min(e.bottom, t.bottom)
+		};
+	}
+	subtractRect(e, t) {
+		let n = Math.max(e.left, t.left), r = Math.min(e.right, t.right), i = Math.max(e.bottom, t.bottom), a = Math.min(e.top, t.top);
+		if (n >= r || i >= a) return [e];
+		let o = [];
+		return e.top > a && o.push({
+			left: e.left,
+			right: e.right,
+			top: e.top,
+			bottom: a
+		}), e.bottom < i && o.push({
+			left: e.left,
+			right: e.right,
+			top: i,
+			bottom: e.bottom
+		}), e.left < n && o.push({
+			left: e.left,
+			right: n,
+			top: a,
+			bottom: i
+		}), e.right > r && o.push({
+			left: r,
+			right: e.right,
+			top: a,
+			bottom: i
+		}), o;
+	}
+	findAreaAtPoint(e, t) {
+		if (!this.rootEl || !this.graph) return null;
+		let n = this.rootEl.getBoundingClientRect(), r = (e - n.left) / n.width, i = 1 - (t - n.top) / n.height;
+		for (let e of Object.values(this.graph.areas)) {
+			let t = this.getAreaRect(this.graph, e);
+			if (r >= t.left && r <= t.right && i >= t.bottom && i <= t.top) return {
+				areaId: e.id,
+				rect: t
+			};
+		}
+		return null;
+	}
+	getMoveZone(e, t, n) {
+		if (!this.rootEl) return "center";
+		let r = this.rootEl.getBoundingClientRect(), a = (t - r.left) / r.width, o = 1 - (n - r.top) / r.height, s = (a - e.left) / Math.max(e.right - e.left, EPS), c = (o - e.bottom) / Math.max(e.top - e.bottom, EPS);
+		return c >= s && c >= 1 - s ? "top" : c <= s && c <= 1 - s ? "bottom" : c >= s && c <= 1 - s ? "left" : "right";
+	}
+	resolveSplitGesture(e, t, n) {
+		let r = t - e.startX, i = n - e.startY, a = Math.abs(r), o = Math.abs(i);
+		if (e.axis) {
+			let r = t - e.lastX, i = n - e.lastY, a = Math.abs(r), o = Math.abs(i);
+			Math.max(a, o) >= SPLIT_GESTURE_THRESHOLD_PX && (e.axis === "vertical" && o - a >= SPLIT_AXIS_TOLERANCE_PX ? e.axis = "horizontal" : e.axis === "horizontal" && a - o >= SPLIT_AXIS_TOLERANCE_PX && (e.axis = "vertical"));
+		} else {
+			if (Math.max(a, o) < SPLIT_GESTURE_THRESHOLD_PX) return null;
+			if (a - o >= SPLIT_AXIS_TOLERANCE_PX) e.axis = "vertical";
+			else if (o - a >= SPLIT_AXIS_TOLERANCE_PX) e.axis = "horizontal";
+			else return null;
+		}
+		return e.lastX = t, e.lastY = n, { axis: e.axis };
+	}
+	getSplitZone(e, t, n, r) {
+		if (!this.rootEl) return r.axis === "vertical" ? "right" : "top";
+		let a = this.rootEl.getBoundingClientRect(), o = (t - a.left) / a.width, s = 1 - (n - a.top) / a.height, c = (o - e.left) / Math.max(e.right - e.left, EPS), l = (s - e.bottom) / Math.max(e.top - e.bottom, EPS), u = c, d = l < .5, f = u < .5, p = !d, m = !f, h = r.axis === "horizontal" ? u : l;
+		return (m && d || f && p) && (h = 1 - h), r.axis === "vertical" ? h > .5 ? "right" : "left" : h > .5 ? "top" : "bottom";
+	}
+	getSplitZoneByAxis(e, t, n, r) {
+		if (!this.rootEl) return r === "vertical" ? "right" : "top";
+		let a = this.rootEl.getBoundingClientRect(), o = (t - a.left) / a.width, s = 1 - (n - a.top) / a.height, c = (o - e.left) / Math.max(e.right - e.left, EPS), l = (s - e.bottom) / Math.max(e.top - e.bottom, EPS);
+		return r === "vertical" ? c < .5 ? "left" : "right" : l < .5 ? "bottom" : "top";
+	}
+	canSplitRect(e, t) {
+		let n = e.right - e.left, i = e.top - e.bottom;
+		return t === "vertical" ? n > MIN_RATIO * 2 : i > MIN_RATIO * 2;
+	}
+	getZoneRect(e, t, n) {
+		let r = n === "join" ? .25 : .5;
+		return t === "left" ? {
+			left: e.left,
+			right: e.left + (e.right - e.left) * r,
+			top: e.top,
+			bottom: e.bottom
+		} : t === "right" ? {
+			left: e.right - (e.right - e.left) * r,
+			right: e.right,
+			top: e.top,
+			bottom: e.bottom
+		} : t === "bottom" ? {
+			left: e.left,
+			right: e.right,
+			top: e.bottom + (e.top - e.bottom) * r,
+			bottom: e.bottom
+		} : t === "top" ? {
+			left: e.left,
+			right: e.right,
+			top: e.top,
+			bottom: e.top - (e.top - e.bottom) * r
+		} : e;
+	}
+	getSplitOverlayRect(e, t, n, i) {
+		if (!this.rootEl) return e;
+		let a = this.rootEl.getBoundingClientRect(), o = (n - a.left) / a.width, s = 1 - (i - a.top) / a.height, c = Math.min(Math.max(o, e.left + MIN_RATIO), e.right - MIN_RATIO), l = Math.min(Math.max(s, e.bottom + MIN_RATIO), e.top - MIN_RATIO);
+		return t === "left" ? {
+			left: e.left,
+			right: c,
+			top: e.top,
+			bottom: e.bottom
+		} : t === "right" ? {
+			left: c,
+			right: e.right,
+			top: e.top,
+			bottom: e.bottom
+		} : t === "bottom" ? {
+			left: e.left,
+			right: e.right,
+			top: l,
+			bottom: e.bottom
+		} : t === "top" ? {
+			left: e.left,
+			right: e.right,
+			top: e.top,
+			bottom: l
+		} : e;
+	}
+	moveEdge(e, t, n, r, a, o) {
+		if (Math.abs(n - r) <= EPS) return null;
+		let s = {
+			verts: { ...e.verts },
+			edges: { ...e.edges },
+			areas: { ...e.areas }
+		}, c = this.collectConnectedVerts(s, t, n, a, o);
+		for (let e of c) {
+			let n = s.verts[e];
+			n && (t === "vertical" ? n.x = r : n.y = r);
+		}
+		return s;
+	}
+	getEdgeDragBounds(e, t, n, a, o) {
+		let s = 0, c = 1, l = Math.min(a, o) - EPS, u = Math.max(a, o) + EPS, d = !1;
+		for (let a of Object.values(e.areas)) {
+			let o = this.getAreaRect(e, a);
+			if (t === "vertical") {
+				if (!(o.bottom <= u && o.top >= l)) continue;
+				Math.abs(o.right - n) <= EPS && (s = Math.max(s, o.left + MIN_RATIO), d = !0), Math.abs(o.left - n) <= EPS && (c = Math.min(c, o.right - MIN_RATIO), d = !0);
+			} else {
+				if (!(o.left <= u && o.right >= l)) continue;
+				Math.abs(o.top - n) <= EPS && (s = Math.max(s, o.bottom + MIN_RATIO), d = !0), Math.abs(o.bottom - n) <= EPS && (c = Math.min(c, o.top - MIN_RATIO), d = !0);
+			}
+		}
+		return !d || s >= c ? null : {
+			min: s,
+			max: c
+		};
+	}
+	getAreaRect(e, t) {
+		let n = e.verts[t.v1], r = e.verts[t.v2], i = e.verts[t.v3], a = e.verts[t.v4];
+		if (!n || !r || !i || !a) throw Error(`Invalid area vertices for ${t.id}`);
+		return {
+			left: Math.min(n.x, r.x, i.x, a.x),
+			right: Math.max(n.x, r.x, i.x, a.x),
+			bottom: Math.min(n.y, r.y, i.y, a.y),
+			top: Math.max(n.y, r.y, i.y, a.y)
+		};
+	}
+	addVert(e, t, n) {
+		let r = this.nextVertId(e);
+		return e[r] = {
+			id: r,
+			x: t,
+			y: n
+		}, r;
+	}
+	addEdge(e, t, n) {
+		let r = this.nextEdgeId(e);
+		return e[r] = {
+			id: r,
+			v1: t,
+			v2: n,
+			border: !1
+		}, r;
+	}
+	nextVertId(e) {
+		let t = "";
+		do
+			this.vertCounter += 1, t = `v${this.vertCounter}`;
+		while (e[t]);
+		return t;
+	}
+	nextEdgeId(e) {
+		let t = "";
+		do
+			this.edgeCounter += 1, t = `e${this.edgeCounter}`;
+		while (e[t]);
+		return t;
+	}
+	nextAreaId() {
+		let e = "";
+		do
+			this.areaCounter += 1, e = `area-${this.areaCounter}`;
+		while (this.graph?.areas[e] || this.querySelector(`[data-area-id="${e}"]`));
+		return e;
+	}
+	normalizeGraph(e) {
+		let t = this.normalizeGraphInternal(e), n = this.fillHoles(t);
+		return this.normalizeGraphInternal(n);
+	}
+	normalizeGraphInternal(e) {
+		let t = (e) => `${e.x.toFixed(6)}|${e.y.toFixed(6)}`, n = /* @__PURE__ */ new Map(), r = {}, i = {};
+		for (let a of Object.values(e.verts)) {
+			let e = t(a), o = n.get(e);
+			o ? r[a.id] = o : (n.set(e, a.id), i[a.id] = { ...a });
+		}
+		let a = {}, o = /* @__PURE__ */ new Map();
+		for (let t of Object.values(e.edges)) {
+			let e = r[t.v1] ?? t.v1, n = r[t.v2] ?? t.v2, i = e < n ? `${e}|${n}` : `${n}|${e}`;
+			if (o.has(i)) continue;
+			let s = this.nextEdgeId(a);
+			a[s] = {
+				id: s,
+				v1: e,
+				v2: n,
+				border: t.border
+			}, o.set(i, s);
+		}
+		let s = {};
+		for (let t of Object.values(e.areas)) s[t.id] = {
+			id: t.id,
+			v1: r[t.v1] ?? t.v1,
+			v2: r[t.v2] ?? t.v2,
+			v3: r[t.v3] ?? t.v3,
+			v4: r[t.v4] ?? t.v4
+		};
+		let c = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set();
+		for (let e of Object.values(s)) {
+			let t = [
+				[e.v1, e.v2],
+				[e.v2, e.v3],
+				[e.v3, e.v4],
+				[e.v4, e.v1]
+			];
+			for (let [e, n] of t) l.add(e < n ? `${e}|${n}` : `${n}|${e}`);
+		}
+		for (let e of Object.values(a)) {
+			let t = e.v1 < e.v2 ? `${e.v1}|${e.v2}` : `${e.v2}|${e.v1}`;
+			l.has(t) && c.add(e.id);
+		}
+		let u = {};
+		for (let e of Object.values(a)) c.has(e.id) && (u[e.id] = e);
+		let d = /* @__PURE__ */ new Set();
+		for (let e of Object.values(u)) d.add(e.v1), d.add(e.v2);
+		let f = {};
+		for (let e of Object.values(i)) d.has(e.id) && (f[e.id] = e);
+		return {
+			verts: f,
+			edges: u,
+			areas: s
+		};
+	}
+	fillHoles(e) {
+		let t = e, n = 0;
+		for (; n < 50;) {
+			let e = this.findHoleCells(t);
+			if (e.length === 0) {
+				let e = this.findOverlaps(t);
+				return e.length > 0 && this.throwOverlapError(t, e), t;
+			}
+			let r = !1;
+			for (let n of e) {
+				let e = this.findHoleFillPlan(t, n);
+				if (!e) {
+					let e = this.tryAlignHoleNeighbors(t, n);
+					if (e.changed) {
+						t = e.graph, r = !0;
+						break;
+					}
+					continue;
+				}
+				for (let r of e.neighbors) {
+					let i = this.expandRectIntoHole(r.rect, n, e.side);
+					t = this.setAreaRect(t, r.areaId, i);
+				}
+				r = !0;
+			}
+			r || this.throwHoleError(t, e), n += 1;
+		}
+		this.throwHoleError(t, this.findHoleCells(t));
+	}
+	findHoleCells(e) {
+		let t = Object.values(e.areas).map((t) => this.getAreaRect(e, t)), n = this.collectAxisCoords(t, "x"), r = this.collectAxisCoords(t, "y"), a = [];
+		for (let e = 0; e < n.length - 1; e += 1) {
+			let o = n[e], s = n[e + 1];
+			if (!(o === void 0 || s === void 0)) for (let e = 0; e < r.length - 1; e += 1) {
+				let n = r[e], c = r[e + 1];
+				if (n === void 0 || c === void 0) continue;
+				let l = {
+					left: o,
+					right: s,
+					bottom: n,
+					top: c
+				};
+				l.right - l.left <= EPS || l.top - l.bottom <= EPS || this.isCellCovered(t, l) || a.push(l);
+			}
+		}
+		return this.mergeHoleCells(a);
+	}
+	collectAxisCoords(e, t) {
+		let n = [0, 1];
+		for (let r of e) t === "x" ? n.push(r.left, r.right) : n.push(r.bottom, r.top);
+		n.sort((e, t) => e - t);
+		let r = [];
+		for (let e of n) {
+			let t = r[r.length - 1];
+			(t === void 0 || Math.abs(e - t) > ALIGN_TOLERANCE) && r.push(e);
+		}
+		return r;
+	}
+	mergeHoleCells(e) {
+		let t = [...e], n = !0;
+		for (; n;) {
+			n = !1;
+			outer: for (let e = 0; e < t.length; e += 1) for (let r = e + 1; r < t.length; r += 1) {
+				let i = t[e], o = t[r];
+				if (!i || !o) continue;
+				let s = Math.abs(i.left - o.left) <= ALIGN_TOLERANCE && Math.abs(i.right - o.right) <= ALIGN_TOLERANCE && (Math.abs(i.top - o.bottom) <= ALIGN_TOLERANCE || Math.abs(o.top - i.bottom) <= ALIGN_TOLERANCE), c = Math.abs(i.bottom - o.bottom) <= ALIGN_TOLERANCE && Math.abs(i.top - o.top) <= ALIGN_TOLERANCE && (Math.abs(i.right - o.left) <= ALIGN_TOLERANCE || Math.abs(o.right - i.left) <= ALIGN_TOLERANCE);
+				if (s || c) {
+					let a = {
+						left: Math.min(i.left, o.left),
+						right: Math.max(i.right, o.right),
+						bottom: Math.min(i.bottom, o.bottom),
+						top: Math.max(i.top, o.top)
+					};
+					t.splice(r, 1), t.splice(e, 1, a), n = !0;
+					break outer;
+				}
+			}
+		}
+		return t;
+	}
+	tryAlignHoleNeighbors(e, t) {
+		let n = e, r = !1;
+		for (let e of [
+			"west",
+			"east",
+			"south",
+			"north"
+		]) {
+			let i = this.collectAdjacentNeighbors(n, t, e);
+			for (let a of i) {
+				let i = this.alignNeighborToHole(n, a.areaId, t, e);
+				i.changed && (n = i.graph, r = !0);
+			}
+		}
+		return {
+			graph: n,
+			changed: r
+		};
+	}
+	collectAdjacentNeighbors(e, t, n) {
+		let r = [];
+		for (let o of Object.values(e.areas)) {
+			let s = this.getAreaRect(e, o);
+			if (n === "west") {
+				if (Math.abs(s.right - t.left) > ALIGN_TOLERANCE || Math.min(s.top, t.top) - Math.max(s.bottom, t.bottom) <= EPS) continue;
+				r.push({
+					areaId: o.id,
+					rect: s
+				});
+			} else if (n === "east") {
+				if (Math.abs(s.left - t.right) > ALIGN_TOLERANCE || Math.min(s.top, t.top) - Math.max(s.bottom, t.bottom) <= EPS) continue;
+				r.push({
+					areaId: o.id,
+					rect: s
+				});
+			} else if (n === "south") {
+				if (Math.abs(s.top - t.bottom) > ALIGN_TOLERANCE || Math.min(s.right, t.right) - Math.max(s.left, t.left) <= EPS) continue;
+				r.push({
+					areaId: o.id,
+					rect: s
+				});
+			} else {
+				if (Math.abs(s.bottom - t.top) > ALIGN_TOLERANCE || Math.min(s.right, t.right) - Math.max(s.left, t.left) <= EPS) continue;
+				r.push({
+					areaId: o.id,
+					rect: s
+				});
+			}
+		}
+		return r;
+	}
+	alignNeighborToHole(e, t, n, r) {
+		let i = e, o = !1, s = i.areas[t];
+		if (!s) return {
+			graph: i,
+			changed: o
+		};
+		let c = this.getAreaRect(i, s);
+		if (r === "west" || r === "east") {
+			if (c.bottom < n.bottom - ALIGN_TOLERANCE) {
+				let e = this.nextAreaId(), r = this.splitAreaAt(i, t, "horizontal", n.bottom, e, "max");
+				if (r) {
+					if (i = r, this.ensureAreaNode(e, t, !0), o = !0, s = i.areas[t], !s) return {
+						graph: i,
+						changed: o
+					};
+					c = this.getAreaRect(i, s);
+				}
+			}
+			if (c.top > n.top + ALIGN_TOLERANCE) {
+				let e = this.nextAreaId(), r = this.splitAreaAt(i, t, "horizontal", n.top, e, "min");
+				r && (i = r, this.ensureAreaNode(e, t, !0), o = !0);
+			}
+		} else {
+			if (c.left < n.left - ALIGN_TOLERANCE) {
+				let e = this.nextAreaId(), r = this.splitAreaAt(i, t, "vertical", n.left, e, "max");
+				if (r) {
+					if (i = r, this.ensureAreaNode(e, t, !0), o = !0, s = i.areas[t], !s) return {
+						graph: i,
+						changed: o
+					};
+					c = this.getAreaRect(i, s);
+				}
+			}
+			if (c.right > n.right + ALIGN_TOLERANCE) {
+				let e = this.nextAreaId(), r = this.splitAreaAt(i, t, "vertical", n.right, e, "min");
+				r && (i = r, this.ensureAreaNode(e, t, !0), o = !0);
+			}
+		}
+		return {
+			graph: i,
+			changed: o
+		};
+	}
+	isCellCovered(e, t) {
+		let n = (t.left + t.right) / 2, r = (t.bottom + t.top) / 2;
+		for (let t of e) if (n >= t.left - ALIGN_TOLERANCE && n <= t.right + ALIGN_TOLERANCE && r >= t.bottom - ALIGN_TOLERANCE && r <= t.top + ALIGN_TOLERANCE) return !0;
+		return !1;
+	}
+	findHoleFillPlan(e, t) {
+		let n = [
+			this.collectHoleNeighbors(e, t, "west"),
+			this.collectHoleNeighbors(e, t, "east"),
+			this.collectHoleNeighbors(e, t, "south"),
+			this.collectHoleNeighbors(e, t, "north")
+		];
+		for (let e of n) if (e && this.isHoleSideCovered(t, e.side, e.segments)) return {
+			side: e.side,
+			neighbors: e.neighbors
+		};
+		return null;
+	}
+	collectHoleNeighbors(e, t, n) {
+		let r = [], o = [];
+		for (let s of Object.values(e.areas)) {
+			let c = this.getAreaRect(e, s);
+			if (n === "west") {
+				if (Math.abs(c.right - t.left) > ALIGN_TOLERANCE || c.bottom < t.bottom - ALIGN_TOLERANCE || c.top > t.top + ALIGN_TOLERANCE) continue;
+				let e = Math.max(c.bottom, t.bottom), n = Math.min(c.top, t.top);
+				if (n - e <= EPS) continue;
+				r.push({
+					areaId: s.id,
+					rect: c
+				}), o.push({
+					start: e,
+					end: n
+				});
+			} else if (n === "east") {
+				if (Math.abs(c.left - t.right) > ALIGN_TOLERANCE || c.bottom < t.bottom - ALIGN_TOLERANCE || c.top > t.top + ALIGN_TOLERANCE) continue;
+				let e = Math.max(c.bottom, t.bottom), n = Math.min(c.top, t.top);
+				if (n - e <= EPS) continue;
+				r.push({
+					areaId: s.id,
+					rect: c
+				}), o.push({
+					start: e,
+					end: n
+				});
+			} else if (n === "south") {
+				if (Math.abs(c.top - t.bottom) > ALIGN_TOLERANCE || c.left < t.left - ALIGN_TOLERANCE || c.right > t.right + ALIGN_TOLERANCE) continue;
+				let e = Math.max(c.left, t.left), n = Math.min(c.right, t.right);
+				if (n - e <= EPS) continue;
+				r.push({
+					areaId: s.id,
+					rect: c
+				}), o.push({
+					start: e,
+					end: n
+				});
+			} else {
+				if (Math.abs(c.bottom - t.top) > ALIGN_TOLERANCE || c.left < t.left - ALIGN_TOLERANCE || c.right > t.right + ALIGN_TOLERANCE) continue;
+				let e = Math.max(c.left, t.left), n = Math.min(c.right, t.right);
+				if (n - e <= EPS) continue;
+				r.push({
+					areaId: s.id,
+					rect: c
+				}), o.push({
+					start: e,
+					end: n
+				});
+			}
+		}
+		return r.length === 0 ? null : {
+			side: n,
+			neighbors: r,
+			segments: o
+		};
+	}
+	isHoleSideCovered(e, t, n) {
+		let r = t === "west" || t === "east" ? e.bottom : e.left, i = t === "west" || t === "east" ? e.top : e.right, o = this.mergeSegments(n);
+		if (o.length === 0) return !1;
+		let s = o[0];
+		if (!s || s.start > r + ALIGN_TOLERANCE) return !1;
+		let c = s.end;
+		for (let e = 1; e < o.length; e += 1) {
+			let t = o[e];
+			if (t) {
+				if (t.start > c + ALIGN_TOLERANCE) return !1;
+				c = Math.max(c, t.end);
+			}
+		}
+		return c >= i - ALIGN_TOLERANCE;
+	}
+	mergeSegments(e) {
+		let t = e.map((e) => ({
+			start: Math.min(e.start, e.end),
+			end: Math.max(e.start, e.end)
+		})).sort((e, t) => e.start - t.start), n = [];
+		for (let e of t) {
+			let t = n[n.length - 1];
+			!t || e.start > t.end + ALIGN_TOLERANCE ? n.push({ ...e }) : t.end = Math.max(t.end, e.end);
+		}
+		return n;
+	}
+	expandRectIntoHole(e, t, n) {
+		return n === "west" ? {
+			...e,
+			right: t.right
+		} : n === "east" ? {
+			...e,
+			left: t.left
+		} : n === "south" ? {
+			...e,
+			top: t.top
+		} : {
+			...e,
+			bottom: t.bottom
+		};
+	}
+	findOverlaps(e) {
+		let t = Object.values(e.areas), n = [];
+		for (let r = 0; r < t.length; r += 1) {
+			let i = t[r];
+			if (!i) continue;
+			let o = this.getAreaRect(e, i);
+			for (let s = r + 1; s < t.length; s += 1) {
+				let r = t[s];
+				if (!r) continue;
+				let c = this.getAreaRect(e, r), l = Math.max(o.left, c.left), u = Math.min(o.right, c.right), d = Math.max(o.bottom, c.bottom), f = Math.min(o.top, c.top);
+				u - l > ALIGN_TOLERANCE && f - d > ALIGN_TOLERANCE && n.push({
+					a: i.id,
+					b: r.id,
+					rect: {
+						left: l,
+						right: u,
+						bottom: d,
+						top: f
+					}
+				});
+			}
+		}
+		return n;
+	}
+	throwOverlapError(e, t) {
+		let n = {
+			overlaps: t.map((e) => ({
+				a: e.a,
+				b: e.b,
+				rect: this.formatRect(e.rect)
+			})),
+			areas: Object.values(e.areas).map((t) => ({
+				id: t.id,
+				rect: this.formatRect(this.getAreaRect(e, t))
+			}))
+		};
+		throw Error(`Overlapping areas detected in layout: ${JSON.stringify(n)}`);
+	}
+	throwHoleError(e, t) {
+		let n = {
+			holes: t.map((e) => this.formatRect(e)),
+			areas: Object.values(e.areas).map((t) => ({
+				id: t.id,
+				rect: this.formatRect(this.getAreaRect(e, t))
+			}))
+		};
+		throw Error(`Unfillable hole(s) detected in layout: ${JSON.stringify(n)}`);
+	}
+	formatRect(e) {
+		return {
+			left: Number(e.left.toFixed(6)),
+			right: Number(e.right.toFixed(6)),
+			top: Number(e.top.toFixed(6)),
+			bottom: Number(e.bottom.toFixed(6))
+		};
+	}
+	collectConnectedVerts(e, t, n, r, a) {
+		let o = Math.min(r, a) - EPS, s = Math.max(r, a) + EPS, c = (e) => t === "vertical" ? Math.abs(e.x - n) <= EPS : Math.abs(e.y - n) <= EPS, l = (e) => t === "vertical" ? e.y >= o && e.y <= s : e.x >= o && e.x <= s, u = [], d = /* @__PURE__ */ new Set();
+		for (let t of Object.values(e.verts)) c(t) && l(t) && (u.push(t.id), d.add(t.id));
+		if (u.length === 0) return d;
+		let f = Object.values(e.edges);
+		for (; u.length > 0;) {
+			let t = u.shift();
+			if (t) for (let n of f) {
+				if (n.v1 !== t && n.v2 !== t) continue;
+				let r = e.verts[n.v1], i = e.verts[n.v2];
+				if (!r || !i || !c(r) || !c(i)) continue;
+				let a = n.v1 === t ? n.v2 : n.v1;
+				d.has(a) || (d.add(a), u.push(a));
+			}
+		}
+		return d;
+	}
+};
+customElements.get("sliced-areas") || customElements.define("sliced-areas", SlicedAreasElement);
+export { SlicedAreasElement as t };
+
+//# sourceMappingURL=sliced-areas-WnMrbsZg.js.map