@ankhzet/graph 0.3.0 → 0.3.2

package/dist/index.js

@@ -1,34 +1,34 @@
 import { DisposableEventSource as e } from "@ankhzet/gcl";
 import { debounce as t, isLike as n, matchId as r } from "@ankhzet/utils";
-import { forwardRef as i, useEffect as a, useImperativeHandle as o, useLayoutEffect as s, useMemo as c, useRef as l, useState as u } from "react";
-import { Styles as d, handleAsNoop as f, useDrag as p, useIsomorphicLayoutEffect as m, useLastCallback as h, useMeasure as g, usePrevious as _, useSyncStore as v } from "@ankhzet/ui";
-import { observer as y } from "mobx-react-lite";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { reaction as S } from "mobx";
+import { useEffect as i, useImperativeHandle as a, useLayoutEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { Styles as u, handleAsNoop as d, useDrag as f, useIsomorphicLayoutEffect as p, useLastCallback as m, useMeasure as h, usePrevious as g, useSyncStore as _ } from "@ankhzet/ui";
+import { observer as v } from "mobx-react-lite";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { reaction as x } from "mobx";
 //#region \0rolldown/runtime.js
-var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.getOwnPropertyNames, te = Object.prototype.hasOwnProperty, ne = (e, t) => {
+var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, w = Object.getOwnPropertyNames, T = Object.prototype.hasOwnProperty, E = (e, t) => {
 	let n = {};
-	for (var r in e) C(n, r, {
+	for (var r in e) S(n, r, {
 		get: e[r],
 		enumerable: !0
 	});
-	return t || C(n, Symbol.toStringTag, { value: "Module" }), n;
-}, re = (e, t, n, r) => {
-	if (t && typeof t == "object" || typeof t == "function") for (var i = ee(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !te.call(e, s) && s !== n && C(e, s, {
+	return t || S(n, Symbol.toStringTag, { value: "Module" }), n;
+}, D = (e, t, n, r) => {
+	if (t && typeof t == "object" || typeof t == "function") for (var i = w(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !T.call(e, s) && s !== n && S(e, s, {
 		get: ((e) => t[e]).bind(null, s),
-		enumerable: !(r = w(t, s)) || r.enumerable
+		enumerable: !(r = C(t, s)) || r.enumerable
 	});
 	return e;
-}, T = (e, t, n) => (re(e, t, "default"), n && re(n, t, "default")), E = (e, t, n = 1) => ({
+}, O = (e, t, n) => (D(e, t, "default"), n && D(n, t, "default")), k = (e, t, n = 1) => ({
 	x: ~~(e.x + t.x * n),
 	y: ~~(e.y + t.y * n)
-}), D = (e, t) => (n) => n.node === e && n.port === t, ie = (e) => (t) => t.node === e, O = (e, t, n) => {
+}), A = (e, t) => (n) => n.node === e && n.port === t, ee = (e) => (t) => t.node === e, j = (e, t, n) => {
 	if (n) for (let r of n) {
-		let n = t.nodes.findIndex(D(r.node, r.port));
+		let n = t.nodes.findIndex(A(r.node, r.port));
 		n >= 0 !== e && (e ? t.nodes.push(r) : t.nodes.splice(n, 1));
 	}
 	else e || (t.nodes = []);
-}, ae = (e, t, n, r, i, a, o, s) => {
+}, te = (e, t, n, r, i, a, o, s) => {
 	if (e === n && t === r || i === o && a === s) return !1;
 	let c = (s - a) * (n - e) - (o - i) * (r - t);
 	if (c === 0) return !1;
@@ -37,7 +37,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 		x: e + l * (n - e),
 		y: t + l * (r - t)
 	};
-}, k = class {
+}, M = class {
 	joints = /* @__PURE__ */ new Map();
 	parentId;
 	constructor(e, t) {
@@ -64,16 +64,16 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 		return !!this.getPort(e, t);
 	}
 	hasAtPort(e, t, n) {
-		return !!this.joints.get(e)?.nodes.some(D(t, n));
+		return !!this.joints.get(e)?.nodes.some(A(t, n));
 	}
 	getPort(e, t) {
-		let n = this.find(t === void 0 ? (t) => t.nodes.some(ie(e)) : (n) => n.nodes.some(D(e, t)));
+		let n = this.find(t === void 0 ? (t) => t.nodes.some(ee(e)) : (n) => n.nodes.some(A(e, t)));
 		if (n) return n.port;
 	}
 	connect({ port: e, target: t, connect: n }) {
 		let r = this.joints.get(e);
 		if (!r) throw Error(`Node ${this.parentId} does not have joint "${e}"`);
-		return O(n, r, t), r;
+		return j(n, r, t), r;
 	}
 	getNodes(e) {
 		return this.joints.get(e)?.nodes;
@@ -86,7 +86,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 	get count() {
 		return this.joints.size;
 	}
-}, oe = Symbol("E_CONNECT"), se = Symbol("E_MOVE"), ce = class extends e {
+}, N = Symbol("E_CONNECT"), ne = Symbol("E_MOVE"), re = class extends e {
 	id;
 	description;
 	inputs;
@@ -97,7 +97,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 		y: 0
 	};
 	constructor({ id: e, coordinator: t, inputs: n = [], outputs: r = [], ...i }) {
-		super(), this.id = e, this.coordinator = t, this.description = i, this.inputs = new k(e, n), this.outputs = new k(e, r);
+		super(), this.id = e, this.coordinator = t, this.description = i, this.inputs = new M(e, n), this.outputs = new M(e, r);
 	}
 	get title() {
 		return this.description.title;
@@ -112,7 +112,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 		return this.#e;
 	}
 	set position({ x: e, y: t }) {
-		e = this.coordinator.snap(e), t = this.coordinator.snap(t), !(this.#e.x === e && this.#e.y === t) && (this.#e.x = e, this.#e.y = t, this.dispatchEvent(se, this.#e));
+		e = this.coordinator.snap(e), t = this.coordinator.snap(t), !(this.#e.x === e && this.#e.y === t) && (this.#e.x = e, this.#e.y = t, this.dispatchEvent(ne, this.#e));
 	}
 	isInput(e, t, n) {
 		return this.inputs.hasAtPort(e, t, n);
@@ -154,7 +154,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 				nodes: a
 			});
 		}
-		this.dispatchEvent(oe, {
+		this.dispatchEvent(N, {
 			connect: t,
 			input: e,
 			source: i,
@@ -165,12 +165,12 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 		return this.position = e, this.position;
 	}
 	onConnect(e) {
-		return this.handleEvent(oe, e);
+		return this.handleEvent(N, e);
 	}
 	onMove(e) {
-		return this.handleEvent(se, e);
+		return this.handleEvent(ne, e);
 	}
-}, A = class {
+}, P = class {
 	_barriers = {};
 	_isBarrier;
 	map;
@@ -231,7 +231,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 			y: (i.y - r.y) / 2
 		};
 	}
-}, le = class extends A {
+}, ie = class extends P {
 	layers = [];
 	hash = null;
 	get center() {
@@ -304,7 +304,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 			if (n && !1 === t(n)) break;
 		}
 	}
-}, ue = class extends A {
+}, ae = class extends P {
 	cache = {};
 	hash = null;
 	get center() {
@@ -337,7 +337,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 		}
 		return this.hash = null, a;
 	}
-}, de = class {
+}, oe = class {
 	sort(e) {
 		let t = {}, n = {}, r = [];
 		for (let i of e) {
@@ -389,7 +389,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 			leafs: r
 		};
 	}
-}, fe = class {
+}, se = class {
 	sort(e, t, n) {
 		let r = n.pop();
 		for (let e of r);
@@ -402,7 +402,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 		}
 		return n;
 	}
-}, pe = class {
+}, ce = class {
 	isBarrier;
 	klass;
 	constructor(e, t) {
@@ -414,7 +414,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 	getSubGraphs(e) {
 		return new this.klass(e, this.isBarrier).getSubGraphs();
 	}
-}, j = Symbol("changed"), M = class extends e {
+}, F = Symbol("changed"), I = class extends e {
 	all;
 	map = {};
 	constructor(e = []) {
@@ -422,7 +422,7 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 	}
 	clear() {
 		let e = this.all;
-		this.all = [], this.map = {}, this.dispatchEvent(j, {
+		this.all = [], this.map = {}, this.dispatchEvent(F, {
 			diff: e,
 			added: !1
 		});
@@ -439,43 +439,43 @@ var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, ee = Object.
 	add(e) {
 		let t = Array.isArray(e) ? e : [e], n = [];
 		for (let e of t) this.all.includes(e) || (n.push(e), this.map[e.id] = e);
-		return n.length && (this.all = this.all.concat(n), this.dispatchEvent(j)), e;
+		return n.length && (this.all = this.all.concat(n), this.dispatchEvent(F)), e;
 	}
 	remove(e) {
 		Array.isArray(e) || (e = [e]);
 		let t = this.all.filter((t) => !e.includes(t.id));
 		if (t.length !== this.all.length) {
 			for (let t of e) delete this.map[t];
-			this.all = t, this.dispatchEvent(j);
+			this.all = t, this.dispatchEvent(F);
 		}
 		return this;
 	}
 	onChange(e) {
-		return this.handleEvent(j, e);
+		return this.handleEvent(F, e);
 	}
-}, N = (e, t) => e === t ? !0 : e.length === t.length ? e.every((e, n) => e.id === t[n]?.id) : !1;
-function me(e) {
-	let [[t, n]] = u(() => {
+}, L = (e, t) => e === t ? !0 : e.length === t.length ? e.every((e, n) => e.id === t[n]?.id) : !1;
+function R(e) {
+	let [[t, n]] = l(() => {
 		let t = e();
 		return [t, [
 			(e) => t.onChange(e),
 			() => t.all,
 			() => t.all,
 			(e) => e,
-			N
+			L
 		]];
 	});
-	return s(() => () => {
+	return o(() => () => {
 		for (let e of t.all) e.dispose();
-	}, []), [t, v(...n)];
+	}, []), [t, _(...n)];
 }
 //#endregion
 //#region src/graph/useDraggable.tsx
-var P = (e) => {
-	let t = e.position, [n, r] = u(() => ({
+var le = (e) => {
+	let t = e.position, [n, r] = l(() => ({
 		x: t.x,
 		y: t.y
-	})), { isDragging: i, bind: a } = p(({ isDragging: t, offset: i, pos: a, move: o, up: s, down: c, context: l, e: u }) => {
+	})), { isDragging: i, bind: a } = f(({ isDragging: t, offset: i, pos: a, move: o, up: s, down: c, context: l, e: u }) => {
 		let { x: d, y: f } = e.position;
 		s ? (r({
 			x: d,
@@ -501,28 +501,28 @@ var P = (e) => {
 		isDragging: i,
 		bind: a,
 		anchor: n,
-		reset: h((t) => {
+		reset: m((t) => {
 			e.onDrag(t), r(t);
 		})
 	};
-}, F = /* @__PURE__ */ ne({});
-import * as he from "@pixi/core";
-T(F, he);
-import * as ge from "@pixi/display";
-T(F, ge);
-import * as _e from "@pixi/sprite";
-T(F, _e);
-import * as ve from "@pixi/graphics";
-T(F, ve);
-import * as ye from "@pixi/text";
-T(F, ye);
-import * as be from "@pixi/text-bitmap";
-T(F, be);
-import * as xe from "@pixi/events";
-T(F, xe);
+}, z = /* @__PURE__ */ E({});
+import * as ue from "@pixi/core";
+O(z, ue);
+import * as de from "@pixi/display";
+O(z, de);
+import * as fe from "@pixi/sprite";
+O(z, fe);
+import * as pe from "@pixi/graphics";
+O(z, pe);
+import * as me from "@pixi/text";
+O(z, me);
+import * as he from "@pixi/text-bitmap";
+O(z, he);
+import * as ge from "@pixi/events";
+O(z, ge);
 //#endregion
 //#region src/graph/render/Batch.ts
-var I = class extends e {
+var _e = class extends e {
 	counter;
 	constructor() {
 		super(), this.counter = 0;
@@ -543,12 +543,12 @@ var I = class extends e {
 	and(e) {
 		return this.handleEvent(".", e);
 	}
-}, Se = [
+}, ve = [
 	[0, -1],
 	[-1, 0],
 	[0, 1],
 	[1, 0]
-], L = Math.PI * 2, R = Math.PI / 2, z = class extends F.Graphics {
+], ye = Math.PI * 2, be = Math.PI / 2, xe = class extends z.Graphics {
 	sizeX;
 	sizeY;
 	lineSize;
@@ -560,10 +560,10 @@ var I = class extends e {
 	#n;
 	#r;
 	constructor(e, { lineSize: t, sizeX: n, sizeY: r, radius: i, color: a }) {
-		super(), this.lineSize = t, this.color = a, this.sizeX = n, this.sizeY = r, this.#t = new F.Graphics().lineStyle({
+		super(), this.lineSize = t, this.color = a, this.sizeX = n, this.sizeY = r, this.#t = new z.Graphics().lineStyle({
 			width: t,
 			color: a
-		}).drawRoundedRect(0, 0, n, r, i), this.#e = new F.Graphics(), this.#e.position.set(n / 2, r / 2), this.#t.mask = this.#e, this.addChild(e), this.addChild(this.#t), this.addChild(this.#e), this.progress = 0;
+		}).drawRoundedRect(0, 0, n, r, i), this.#e = new z.Graphics(), this.#e.position.set(n / 2, r / 2), this.#t.mask = this.#e, this.addChild(e), this.addChild(this.#t), this.addChild(this.#e), this.progress = 0;
 		let o = this.sizeX / 2, s = this.sizeY / 2, c = -o + this.lineSize, l = -s + this.lineSize, u = +o - this.lineSize, d = +s - this.lineSize, f = [
 			[
 				c,
@@ -615,11 +615,11 @@ var I = class extends e {
 	}
 	update(e) {
 		this.progress = e;
-		let t = e * L % L, n = Math.cos(t - R) * this.sizeX * 2, r = Math.sin(t - R) * this.sizeY * 2, i, a = null, o = 0;
+		let t = e * ye % ye, n = Math.cos(t - be) * this.sizeX * 2, r = Math.sin(t - be) * this.sizeY * 2, i, a = null, o = 0;
 		for (let e = 0; e < this.#r.segments.length; e++) {
-			let t = this.#r.segments[e], s = ae(0, 0, n, r, t[0], t[1], t[2], t[3]);
+			let t = this.#r.segments[e], s = te(0, 0, n, r, t[0], t[1], t[2], t[3]);
 			if (s) {
-				a = s, o = e === 0 ? s.x > 0 ? 0 : 4 : 4 - e, i = Se[e];
+				a = s, o = e === 0 ? s.x > 0 ? 0 : 4 : 4 - e, i = ve[e];
 				break;
 			}
 		}
@@ -629,7 +629,7 @@ var I = class extends e {
 			this.#e.lineTo(a.x + i[0] * this.lineSize * 2, a.y + i[1] * this.lineSize * 2).lineTo(a.x, a.y).lineTo(0, 0).endFill();
 		}
 	}
-}, B = class extends F.Graphics {
+}, B = class extends z.Graphics {
 	from;
 	to;
 	angled = !1;
@@ -637,7 +637,7 @@ var I = class extends e {
 	#e;
 	#t = 2;
 	constructor(e, t, n, r, i = 2) {
-		super(), this.#e = i, this.from = new F.ObservablePoint(() => this.update(), 0, e, t), this.to = new F.ObservablePoint(() => this.update(), 0, n, r), this.eventMode = "none";
+		super(), this.#e = i, this.from = new z.ObservablePoint(() => this.update(), 0, e, t), this.to = new z.ObservablePoint(() => this.update(), 0, n, r), this.eventMode = "none";
 	}
 	moveFromPoint(e) {
 		let t = this.from.x !== e.x || this.from.y !== e.y;
@@ -657,11 +657,11 @@ var I = class extends e {
 		let { x: e, y: t } = this.from, { x: n, y: r } = this.to, i = n - e, a = r - t, o = i / 2, s = a / 2;
 		return this.clear(), this.lineStyle(this.#t, this.color, this.alpha), this.x = n - o, this.y = r - s, this.angled ? (this.moveTo(-o, -s), this.lineTo(0, -s), this.lineTo(0, s), this.lineTo(o, s)) : (this.moveTo(-o, -s), this.lineTo(o, s)), this.#e && (this.beginFill(this.color, this.alpha), this.drawCircle(-o, -s, this.#e / 2), this.drawCircle(o, s, this.#e / 2), this.endFill()), this;
 	}
-}, V = class extends F.Graphics {
+}, Se = class extends z.Graphics {
 	from;
 	to;
 	constructor(e, t) {
-		super(), this.from = new F.Point(e, t), this.to = {};
+		super(), this.from = new z.Point(e, t), this.to = {};
 		for (let e of Object.values(this.to)) this.addChild(e);
 	}
 	addTarget(e, t) {
@@ -696,13 +696,13 @@ var I = class extends e {
 	if (t.hover) {
 		let a = r === t.point.parent || i === t.point.input ? 2 : 1;
 		if (a && n) {
-			let n = e.point.nodes.some(D(t.point.parent, t.point.port)), r = t.point.nodes.some(D(e.point.parent, e.point.port));
+			let n = e.point.nodes.some(A(t.point.parent, t.point.port)), r = t.point.nodes.some(A(e.point.parent, e.point.port));
 			return n && r ? 1 : 0;
 		}
 		return a;
 	}
 	return 0;
-}, Ee = (e, t) => e.parent === t.parent && e.port === t.port, De = class extends F.Graphics {
+}, Ee = (e, t) => e.parent === t.parent && e.port === t.port, De = class extends z.Graphics {
 	line1;
 	line2;
 	line12;
@@ -727,7 +727,7 @@ var I = class extends e {
 	setPosition(e) {
 		return this.x = e.x, this.y = e.y, this;
 	}
-}, Oe = class extends V {
+}, Oe = class extends Se {
 	start;
 	finish;
 	viable;
@@ -768,8 +768,8 @@ var I = class extends e {
 		}
 		return !1;
 	}
-}, H = class extends F.Container {
-	static makeFont = (e, t, n) => typeof document < "u" && F.BitmapFont.from(e, t, {
+}, V = class extends z.Container {
+	static makeFont = (e, t, n) => typeof document < "u" && z.BitmapFont.from(e, t, {
 		chars: [
 			["a", "z"],
 			["A", "Z"],
@@ -787,7 +787,7 @@ var I = class extends e {
 		fontName: e
 	}));
 	constructor(e, t) {
-		super(), this.#e = this.addChild(new F.BitmapText(String(e), t));
+		super(), this.#e = this.addChild(new z.BitmapText(String(e), t));
 	}
 	set text(e) {
 		this.#e.text = String(e);
@@ -798,10 +798,10 @@ var I = class extends e {
 	set tint(e) {
 		this.#e.tint = e;
 	}
-}, U = Symbol.for("E_PORT_CLICK"), W = Symbol.for("E_PORT_HOVER"), ke = class t extends F.Graphics {
+}, H = Symbol.for("E_PORT_CLICK"), U = Symbol.for("E_PORT_HOVER"), ke = class t extends z.Graphics {
 	connectorPoint;
 	hasBothLanes;
-	static port = H.factory("nodePort", {
+	static port = V.factory("nodePort", {
 		fontFamily: ["Menlo", "monospace"],
 		fontSize: 16,
 		lineHeight: 20,
@@ -813,11 +813,11 @@ var I = class extends e {
 		super(), this.connectorPoint = e, this.hasBothLanes = n, this.#t = !!e.nodes.length, this.x = e.x, this.y = e.y;
 		let r = e.input ? 1 : -1, i = this.addChild(t.port(this.label, { fontSize: 8 }));
 		i.y = -4, i.x = r * 12 - (e.input ? 0 : i.width), i.eventMode = "none", this.lineStyle(1, 3355443, 1), this.beginFill(this.#t ? 11184810 : 16777215), this.drawCircle(0, 0, 8 / 2), this.endFill(), this.eventMode = "static", this.cursor = "pointer", this.addEventListener("pointerdown", (e) => {
-			e.preventDefault(), e.stopPropagation(), this.#e.dispatchEvent(U, e);
+			e.preventDefault(), e.stopPropagation(), this.#e.dispatchEvent(H, e);
 		}), this.addEventListener("pointerenter", (e) => {
-			e.preventDefault(), e.stopPropagation(), this.#e.dispatchEvent(W, !0);
+			e.preventDefault(), e.stopPropagation(), this.#e.dispatchEvent(U, !0);
 		}), this.addEventListener("pointerleave", (e) => {
-			e.preventDefault(), e.stopPropagation(), this.#e.dispatchEvent(W, !1);
+			e.preventDefault(), e.stopPropagation(), this.#e.dispatchEvent(U, !1);
 		});
 	}
 	get label() {
@@ -836,23 +836,23 @@ var I = class extends e {
 		this.beginFill(this.active ? 11184810 : 16777215), this.drawCircle(0, 0, 8 / 2), this.endFill();
 	}
 	onClick(e) {
-		return this.#e.handleEvent(U, e);
+		return this.#e.handleEvent(H, e);
 	}
 	onHover(e) {
-		return this.#e.handleEvent(W, e);
+		return this.#e.handleEvent(U, e);
 	}
-}, Ae = Symbol.for("E_MOVE_NODE"), G = Symbol.for("E_CAPTURE_NODE"), K = (e, t) => {
+}, W = Symbol.for("E_MOVE_NODE"), G = Symbol.for("E_CAPTURE_NODE"), K = (e, t) => {
 	let n = e.global;
 	return t ? (t.x = n.x, t.y = n.y, t) : {
 		x: n.x,
 		y: n.y
 	};
-}, q = (e) => e.__drag_root ? e : e.parent && q(e.parent);
+}, Ae = (e) => e.__drag_root ? e : e.parent && Ae(e.parent);
 function je(e) {
 	return function(t) {
 		if (e.dispatchEvent(G, !0), t.buttons & 2) return;
 		let n = this._drag_meta = {
-			root: q(this.parent) || (() => {
+			root: Ae(this.parent) || (() => {
 				throw Error("Can't find scene root");
 			})(),
 			emitter: e,
@@ -878,7 +878,7 @@ function je(e) {
 var Me = (e) => (t) => {
 	if (!e._drag_meta?.dragging) return;
 	let { newPosition: n, lastPosition: r, anchor: i, emitter: a } = e._drag_meta;
-	K(t, n), n.x -= r.x, n.y -= r.y, a.dispatchEvent(Ae, {
+	K(t, n), n.x -= r.x, n.y -= r.y, a.dispatchEvent(W, {
 		x: i.x + n.x,
 		y: i.y + n.y
 	});
@@ -886,8 +886,8 @@ var Me = (e) => (t) => {
 	if (!e._drag_meta) return;
 	let { root: t, emitter: n, onDragEnd: r, onDragMove: i } = e._drag_meta;
 	t.removeEventListener("pointerup", r), t.removeEventListener("pointerupoutside", r), t.removeEventListener("pointermove", i), n.dispatchEvent(G, !1), delete e._drag_meta;
-}, J = Symbol.for("E_NODE_CONTEXT"), Y = Symbol.for("E_CONNECTORS_UPDATE"), Pe = class t extends e {
-	static label = H.factory("nodeLabel", {
+}, q = Symbol.for("E_NODE_CONTEXT"), J = Symbol.for("E_CONNECTORS_UPDATE"), Pe = class t extends e {
+	static label = V.factory("nodeLabel", {
 		fontSize: 24,
 		align: "center",
 		fill: "#efefef",
@@ -914,7 +914,7 @@ var Me = (e) => (t) => {
 		for (let e of this.ports.values()) e.dispose();
 		if (this.#n) {
 			let e = this.#n.map(({ port: e }) => `${this.id}-${e}`);
-			e.length && this.dispatchEvent(Y, { remove: e });
+			e.length && this.dispatchEvent(J, { remove: e });
 		}
 		this.#t &&= (this.#t.removeFromParent(), void 0), super.dispose();
 	}
@@ -934,12 +934,12 @@ var Me = (e) => (t) => {
 	#i({ connect: e, input: t, source: { port: n }, target: r }) {
 		let i = this.connectors.find((e) => e.port === n && e.input === t);
 		if (!i) return;
-		O(e, i, r);
+		j(e, i, r);
 		let a = this.ports.get(n);
 		a && a.setActive(!!i.nodes.length);
 	}
 	connectedAt(e, t, n) {
-		return this.connectors.find(({ nodes: r, connector: i }) => n !== !i && r.length && r.some(D(e, t)));
+		return this.connectors.find(({ nodes: r, connector: i }) => n !== !i && r.length && r.some(A(e, t)));
 	}
 	get connectors() {
 		if (this.#n) return this.#n;
@@ -948,7 +948,7 @@ var Me = (e) => (t) => {
 			let r = {
 				x: 16 / 2,
 				y: t * 16 + 16 / 2
-			}, i = E(this.data.position, r);
+			}, i = k(this.data.position, r);
 			e.push({
 				parent: this.data.id,
 				port: n.port,
@@ -957,7 +957,7 @@ var Me = (e) => (t) => {
 				input: !0,
 				x: r.x,
 				y: r.y,
-				connector: new V(i.x, i.y)
+				connector: new Se(i.x, i.y)
 			}), t++;
 		}
 		for (let t of this.data.outputs) e.push({
@@ -975,17 +975,17 @@ var Me = (e) => (t) => {
 		let t = /* @__PURE__ */ new Map(), n = [];
 		for (let r of this.connectors) {
 			let { connector: i, nodes: a, port: o } = r, s = `${this.id}-${o}`;
-			if (i) if (i.move(E(this.renderable, r)), a.length) {
+			if (i) if (i.move(k(this.renderable, r)), a.length) {
 				let e = 0;
 				for (let { node: t, port: n } of a) {
 					let r = this.find(t), a = r?.connectedAt(this.id, o);
-					r && a ? (i.moveTargetTo(t, n, E(r.renderable, a)), e++) : i.removeTarget(t, n);
+					r && a ? (i.moveTargetTo(t, n, k(r.renderable, a)), e++) : i.removeTarget(t, n);
 				}
 				e && t.set(s, i);
 			} else n.push(s);
 			else if (e && a.length) for (let { node: e } of a) this.find(e)?.placeConnectors(!1);
 		}
-		(t.size || n.length) && this.dispatchEvent(Y, {
+		(t.size || n.length) && this.dispatchEvent(J, {
 			add: t.size ? [...t.entries()].map(([e, t]) => ({
 				uid: e,
 				connector: t
@@ -1024,7 +1024,7 @@ var Me = (e) => (t) => {
 		return o.eventMode = "static", o.addEventListener("pointerdown", (e) => this.handleClick(e)), o.x = this.data.position.x, o.y = this.data.position.y, this.#t = o;
 	}
 	makeRoundRect({ stroke: e, fill: t, x: n = 0, y: r = 0, width: i, height: a, thickness: o = 1, radius: s = 4 }) {
-		let c = new F.Graphics();
+		let c = new z.Graphics();
 		return c.lineStyle(o, e), c.beginFill(t), c.drawRoundedRect(0, 0, i, a, s), c.endFill(), c.x = n, c.y = r, c;
 	}
 	makeLane(e) {
@@ -1038,14 +1038,14 @@ var Me = (e) => (t) => {
 	makePort(e, t) {
 		let { port: n, x: r, y: i } = e, a = new ke(e, t);
 		return this.ports.set(n, a), a.onClick((t) => {
-			if (t.buttons & 2) return this.dispatchEvent(J, {
+			if (t.buttons & 2) return this.dispatchEvent(q, {
 				event: t,
 				tag: {
 					type: "port",
 					id: n
 				}
 			});
-			this.dispatchEvent(U, {
+			this.dispatchEvent(H, {
 				remove: t.ctrlKey || t.metaKey,
 				point: e,
 				pos: {
@@ -1053,7 +1053,7 @@ var Me = (e) => (t) => {
 					y: this.renderable.y + i
 				}
 			});
-		}), a.onHover((t) => this.dispatchEvent(W, {
+		}), a.onHover((t) => this.dispatchEvent(U, {
 			point: e,
 			hover: t,
 			pos: {
@@ -1063,7 +1063,7 @@ var Me = (e) => (t) => {
 		})), a;
 	}
 	handleClick(e) {
-		e.buttons & 2 ? (e.stopPropagation(), e.preventDefault(), this.dispatchEvent(J, {
+		e.buttons & 2 ? (e.stopPropagation(), e.preventDefault(), this.dispatchEvent(q, {
 			event: e,
 			tag: {
 				type: "node",
@@ -1072,22 +1072,22 @@ var Me = (e) => (t) => {
 		})) : this.#r.call(this.renderable, e);
 	}
 	onContext(e) {
-		return this.handleEvent(J, e);
+		return this.handleEvent(q, e);
 	}
 	onPortClick(e) {
-		return this.handleEvent(U, e);
+		return this.handleEvent(H, e);
 	}
 	onPortHover(e) {
-		return this.handleEvent(W, e);
+		return this.handleEvent(U, e);
 	}
 	onCapture(e) {
 		return this.handleEvent(G, e);
 	}
 	onMove(e) {
-		return this.handleEvent(Ae, e);
+		return this.handleEvent(W, e);
 	}
 	onConnectorsUpdate(e) {
-		return this.handleEvent(Y, e);
+		return this.handleEvent(J, e);
 	}
 	update() {
 		let e = this.connectors.reduce((e, t) => (e[t.port] = t, e), {});
@@ -1104,11 +1104,11 @@ var Me = (e) => (t) => {
 }, Fe = {
 	x: 0,
 	y: 0
-}, Ie = (e, t) => e.cell.x === t.cell.x && e.cell.y === t.cell.y && e.count.x === t.count.x && e.count.y === t.count.y && e.size.width === t.size.width && e.size.height === t.size.height, X = (e, t, n) => e > t ? e < n ? e : n : t, Z = (e, t, n, r, i) => X(e - t / 2, n + i, r - t - i), Le = (e) => {
+}, Ie = (e, t) => e.cell.x === t.cell.x && e.cell.y === t.cell.y && e.count.x === t.count.x && e.count.y === t.count.y && e.size.width === t.size.width && e.size.height === t.size.height, Y = (e, t, n) => e > t ? e < n ? e : n : t, X = (e, t, n, r, i) => Y(e - t / 2, n + i, r - t - i), Le = (e) => {
 	let t = Math.ceil(e);
 	return t % 2 ? t + 1 : t;
-}, Re = class e extends F.Graphics {
-	static text = H.factory("GridBoundary", {
+}, Re = class e extends z.Graphics {
+	static text = V.factory("GridBoundary", {
 		fontSize: 24,
 		fill: 16777215,
 		stroke: 0,
@@ -1122,7 +1122,7 @@ var Me = (e) => (t) => {
 	#n;
 	#r;
 	#i;
-	#a = new F.Rectangle(0, 0, 0, 0);
+	#a = new z.Rectangle(0, 0, 0, 0);
 	#o = {
 		cell: Fe,
 		count: Fe,
@@ -1134,7 +1134,7 @@ var Me = (e) => (t) => {
 	#s;
 	#c;
 	constructor(t, n, r = 5) {
-		super(), this.cellSize = t, this.colors = n, this.#e = r, this.#s = this.addChild(new F.Container()), this.#c = this.addChild(new F.Container()), this.#n = e.text("", { fontSize: 12 }), this.#t = e.text("", { fontSize: 12 }), this.#i = e.text("", { fontSize: 12 }), this.#r = e.text("", { fontSize: 12 });
+		super(), this.cellSize = t, this.colors = n, this.#e = r, this.#s = this.addChild(new z.Container()), this.#c = this.addChild(new z.Container()), this.#n = e.text("", { fontSize: 12 }), this.#t = e.text("", { fontSize: 12 }), this.#i = e.text("", { fontSize: 12 }), this.#r = e.text("", { fontSize: 12 });
 	}
 	get lods() {
 		return this.colors.length;
@@ -1166,20 +1166,20 @@ var Me = (e) => (t) => {
 	}
 	makeRullers(e) {
 		this.#c.removeChildren();
-		let t = this.#c.addChild(new F.Graphics()), { left: n, top: r, width: i, height: a } = e, o = n + i, s = r + a, c = X(o, 1, i - 1), l = X(s, 1, a - 1);
+		let t = this.#c.addChild(new z.Graphics()), { left: n, top: r, width: i, height: a } = e, o = n + i, s = r + a, c = Y(o, 1, i - 1), l = Y(s, 1, a - 1);
 		t.lineStyle(2, 16711680, 1), t.moveTo(0, l), t.lineTo(i, l), t.moveTo(c, 0), t.lineTo(c, a), this.#c.addChild(this.#n, this.#t, this.#i, this.#r), this.#n.text = ~~(-(i + n) / this.cellSize.x), this.#i.text = ~~(-(a + r) / this.cellSize.y), this.#t.text = ~~(-n / this.cellSize.x), this.#r.text = ~~(-r / this.cellSize.y);
-		let u = this.#n.height, d = this.#n.width, f = this.#t.width, p = this.#i.width, m = this.#r.width, h = Z(l, u, 0, a, 2), g = Z(c, p, d + 5, i - f - 5, 2), _ = Z(c, m, d + 5, i - f - 5, 2);
+		let u = this.#n.height, d = this.#n.width, f = this.#t.width, p = this.#i.width, m = this.#r.width, h = X(l, u, 0, a, 2), g = X(c, p, d + 5, i - f - 5, 2), _ = X(c, m, d + 5, i - f - 5, 2);
 		this.#n.x = 2, this.#n.y = h, this.#t.x = i - f - 2, this.#t.y = h, this.#i.x = g, this.#i.y = 2, this.#r.x = _, this.#r.y = a - u - 2;
 	}
 	makeLOD(e) {
-		let t = this.colors[e], { cell: { x: n, y: r }, count: { x: i, y: a }, size: { width: o, height: s } } = this.snapSize(this.#o.size, e), c = new F.Graphics();
+		let t = this.colors[e], { cell: { x: n, y: r }, count: { x: i, y: a }, size: { width: o, height: s } } = this.snapSize(this.#o.size, e), c = new z.Graphics();
 		c.lineStyle(.25 * (e + 1), t, 1);
 		for (let e = 0; e < i; e++) c.moveTo(n * e, 0), c.lineTo(n * e, s);
 		for (let e = 0; e < a; e++) c.moveTo(0, r * e), c.lineTo(o, r * e);
 		return c;
 	}
 	makeGrid() {
-		let e = new F.Container();
+		let e = new z.Container();
 		for (let t of this.colors.keys()) e.addChild(this.makeLOD(t));
 		return e;
 	}
@@ -1191,8 +1191,8 @@ var Me = (e) => (t) => {
 			i.x = n * e, i.y = r * t, this.#s.addChild(i);
 		}
 	}
-}, ze = 24, Q = 12, Be = class e extends F.Container {
-	static label = H.factory("menuItem", {
+}, ze = 24, Z = 12, Be = class e extends z.Container {
+	static label = V.factory("menuItem", {
 		fontSize: 24,
 		align: "center",
 		fill: 16777215
@@ -1208,7 +1208,7 @@ var Me = (e) => (t) => {
 	#c = !1;
 	index;
 	constructor(t, n, r) {
-		super(), this.index = t, this.#n = n, this.#s = !!n.separator, this.#r = !!n.group, this.#c = !!n.disabled || this.#r, this.#e = this.addChild(new F.Graphics()), this.#t = this.addChild(e.label(this.label, { fontSize: 12 })), this.eventMode = "static", this.addEventListener("pointerdown", (e) => {
+		super(), this.index = t, this.#n = n, this.#s = !!n.separator, this.#r = !!n.group, this.#c = !!n.disabled || this.#r, this.#e = this.addChild(new z.Graphics()), this.#t = this.addChild(e.label(this.label, { fontSize: 12 })), this.eventMode = "static", this.addEventListener("pointerdown", (e) => {
 			this.#c || (e.stopPropagation(), e.preventDefault(), r());
 		});
 	}
@@ -1231,7 +1231,7 @@ var Me = (e) => (t) => {
 		return this.#n.label;
 	}
 	get labelWidth() {
-		return this.#t.width + Q * 2;
+		return this.#t.width + Z * 2;
 	}
 	get width() {
 		return this.#i;
@@ -1247,9 +1247,9 @@ var Me = (e) => (t) => {
 	}
 	update() {
 		let e = this.width, t = this.height, n = this.#e;
-		this.separator ? (n.lineStyle(1, 1638, 1), n.moveTo(Q, 1), n.lineTo(e - Q, 1)) : this.#r ? (n.lineStyle(0, 0, 1), n.beginFill(3355443), n.drawRect(-1, 1, e + 2, t - 2), n.endFill()) : this.hover ? (n.lineStyle(0, 0, 1), n.beginFill(4473924), n.drawRoundedRect(0, 0, e, t, 4), n.endFill()) : n.clear(), this.#t.text = this.#n.label, this.#t.x = Q, this.#t.y = (t - this.#t.height) / 2, this.#t.alpha = this.#c && !this.#r ? .3 : 1, this.#t.tint = this.#r || this.hover ? 16777215 : 0;
+		this.separator ? (n.lineStyle(1, 1638, 1), n.moveTo(Z, 1), n.lineTo(e - Z, 1)) : this.#r ? (n.lineStyle(0, 0, 1), n.beginFill(3355443), n.drawRect(-1, 1, e + 2, t - 2), n.endFill()) : this.hover ? (n.lineStyle(0, 0, 1), n.beginFill(4473924), n.drawRoundedRect(0, 0, e, t, 4), n.endFill()) : n.clear(), this.#t.text = this.#n.label, this.#t.x = Z, this.#t.y = (t - this.#t.height) / 2, this.#t.alpha = this.#c && !this.#r ? .3 : 1, this.#t.tint = this.#r || this.hover ? 16777215 : 0;
 	}
-}, Ve = Symbol.for("E_ITEM_SELECT"), He = Symbol.for("E_CLOSE_MENU"), Ue = new F.Point(), We = class extends F.Container {
+}, Ve = Symbol.for("E_ITEM_SELECT"), He = Symbol.for("E_CLOSE_MENU"), Ue = new z.Point(), We = class extends z.Container {
 	#e;
 	#t;
 	#n;
@@ -1257,7 +1257,7 @@ var Me = (e) => (t) => {
 	#i;
 	#a = -1;
 	constructor(t) {
-		super(), this.#i = new e(), this.#n = this.addChild(new F.Graphics()), this.#e = this.addChild(new F.Graphics()), this.#t = this.addChild(new F.Container()), this.#r = t.items.map((e, t) => this.#t.addChild(new Be(t, e, () => this.handleSelect(e)))), this.#t.mask = this.#n, this.eventMode = "static", this.addEventListener("pointermove", (e) => {
+		super(), this.#i = new e(), this.#n = this.addChild(new z.Graphics()), this.#e = this.addChild(new z.Graphics()), this.#t = this.addChild(new z.Container()), this.#r = t.items.map((e, t) => this.#t.addChild(new Be(t, e, () => this.handleSelect(e)))), this.#t.mask = this.#n, this.eventMode = "static", this.addEventListener("pointermove", (e) => {
 			this.hoverIndex = this.getItemAtY(e.getLocalPosition(this, Ue).y);
 		}), this.addEventListener("pointerleave", () => {
 			this.hoverIndex = -1;
@@ -1329,7 +1329,7 @@ var Me = (e) => (t) => {
 	#e = t(() => this.ticker.speed = .05, 1e3);
 	#t = (e) => this.nodes.get(e);
 	constructor({ maxFPS: e, grid: t, gui: n = [] }) {
-		this.ticker = new F.Ticker(), this.world = new F.Container(), this.root = new F.Container(), this.overlay = new F.Container(), this.grid = new Re(t.cellSize, t.colors), this.world.sortableChildren = !0, this.ticker.maxFPS = e, this.world.__drag_root = !0, this.gui = n, this.root.addChild(this.grid), this.root.addChild(this.world), this.root.addChild(this.overlay), this.root.addChild(...n), this.ticker.add(this.render.bind(this)), this.world.eventMode = "static", this.world.hitArea = { contains: () => !0 }, this.world.addEventListener("pointermove", (e) => {
+		this.ticker = new z.Ticker(), this.world = new z.Container(), this.root = new z.Container(), this.overlay = new z.Container(), this.grid = new Re(t.cellSize, t.colors), this.world.sortableChildren = !0, this.ticker.maxFPS = e, this.world.__drag_root = !0, this.gui = n, this.root.addChild(this.grid), this.root.addChild(this.world), this.root.addChild(this.overlay), this.root.addChild(...n), this.ticker.add(this.render.bind(this)), this.world.eventMode = "static", this.world.hitArea = { contains: () => !0 }, this.world.addEventListener("pointermove", (e) => {
 			this.handlePointerMove(this.fromGlobal(e.global));
 		}), this.world.addEventListener("pointerdown", (e) => {
 			this.handlePointerDown(this.fromGlobal(e.global), e);
@@ -1341,7 +1341,7 @@ var Me = (e) => (t) => {
 	get renderer() {
 		if (!this._renderer) {
 			let { viewport: e } = this.options;
-			this._renderer = (0, F.autoDetectRenderer)({
+			this._renderer = (0, z.autoDetectRenderer)({
 				width: e.width,
 				height: e.height,
 				antialias: e.antialias,
@@ -1377,13 +1377,13 @@ var Me = (e) => (t) => {
 		};
 	}
 	fromGlobal(e) {
-		return E(e, this.world.transform.position, -1);
+		return k(e, this.world.transform.position, -1);
 	}
 	fromLocal(e) {
-		return E(E(e, this.world.transform.position, -2), this.center);
+		return k(k(e, this.world.transform.position, -2), this.center);
 	}
 	offsetPos(e, t = 1) {
-		return E(e, this.center, t);
+		return k(e, this.center, t);
 	}
 	translate(e) {
 		this.world.transform.position.copyFrom(this.offsetPos(e)), this.overlay.transform.position.copyFrom(this.offsetPos(e)), this.updateViewport();
@@ -1524,7 +1524,7 @@ var Me = (e) => (t) => {
 	}
 	updateViewport() {
 		let { width: e, height: t, translation: { x: n, y: r } } = this;
-		e && t && this.grid.viewport(new F.Rectangle(n - e / 2, r - t / 2, e, t));
+		e && t && this.grid.viewport(new z.Rectangle(n - e / 2, r - t / 2, e, t));
 	}
 	render() {
 		this.renderer?.render(this.root);
@@ -1532,8 +1532,8 @@ var Me = (e) => (t) => {
 	update() {
 		this.ticker.update();
 	}
-}, Ke = "\nPort:\n  LMB - start connecting\n  LMB + (Meta | Ctrl) - start disconnecting\nCanvas:\n  LMB + Shift - drag while connecting/disconnecting", $ = class e extends F.Container {
-	static text = H.factory("GUIText", {
+}, Ke = "\nPort:\n  LMB - start connecting\n  LMB + (Meta | Ctrl) - start disconnecting\nCanvas:\n  LMB + Shift - drag while connecting/disconnecting", Q = class e extends z.Container {
+	static text = V.factory("GUIText", {
 		fontSize: 16,
 		align: "left",
 		fill: "#efefef",
@@ -1547,7 +1547,7 @@ var Me = (e) => (t) => {
 	] });
 	static makeText = (e) => this.text(e, { fontSize: 8 });
 	#e;
-	#t = new F.Text("ℹ️", {
+	#t = new z.Text("ℹ️", {
 		fontSize: 8,
 		lineHeight: 14
 	});
@@ -1579,7 +1579,7 @@ var Me = (e) => (t) => {
 	set legend(e) {
 		this.#r = e, this.#n.text = this.#i + (this.#r ? this.#a : "");
 	}
-}, qe = class extends F.Container {
+}, qe = class extends z.Container {
 	first;
 	constructor(e, ...t) {
 		super(), this.first = e, this.addChild(e, ...t);
@@ -1587,7 +1587,7 @@ var Me = (e) => (t) => {
 	hotSwap(...e) {
 		this.removeChildren(), this.addChild(this.first, ...e);
 	}
-}, Je = class extends F.Graphics {
+}, Je = class extends z.Graphics {
 	#e;
 	#t;
 	constructor(e) {
@@ -1606,24 +1606,24 @@ var Me = (e) => (t) => {
 		}
 	}
 };
-T(/* @__PURE__ */ ne({
-	Batch: () => I,
-	E_CONNECTORS_UPDATE: () => Y,
-	E_NODE_CONTEXT: () => J,
+O(/* @__PURE__ */ E({
+	Batch: () => _e,
+	E_CONNECTORS_UPDATE: () => J,
+	E_NODE_CONTEXT: () => q,
 	LANE_HEIGHT: () => 16,
 	LANE_WIDTH: () => 16,
 	NODE_WIDTH: () => 64,
-	PIXIGUI: () => $,
+	PIXIGUI: () => Q,
 	PIXINode: () => Pe,
 	PIXIOutlined: () => Je,
 	PIXIRenderer: () => Ge,
 	PIXIStacked: () => qe,
 	PORT_SIZE: () => 8,
-	RectSpinner: () => z
-}), F);
+	RectSpinner: () => xe
+}), z);
 //#endregion
 //#region src/graph/GraphAdapter.ts
-var Ye = class extends I {
+var Ye = class extends _e {
 	renderer;
 	nodes = [];
 	constructor(e) {
@@ -1710,59 +1710,59 @@ var Ze = (e, t) => {
 }, Qe = (e) => {
 	let t = String(e);
 	return (e) => String(e.value) === t;
-}, $e = y(function({ items: e, resolver: t, onSelect: n, children: r, ...i }) {
-	let o = c(() => Xe(e, t), [e, t]), [l, d] = u(o.find(({ value: e }) => e === "all")), f = String(l.value), p = h(({ target: { value: e } }) => {
-		let t = o.find(Qe(e));
+}, $e = v(function({ items: e, resolver: t, onSelect: n, children: r, ...a }) {
+	let c = s(() => Xe(e, t), [e, t]), [u, d] = l(c.find(({ value: e }) => e === "all")), f = String(u.value), p = m(({ target: { value: e } }) => {
+		let t = c.find(Qe(e));
 		t && d(t);
 	});
-	return a(() => void n(l), [l, n]), s(() => {
-		let e = o.find(Qe(l.value));
+	return i(() => void n(u), [u, n]), o(() => {
+		let e = c.find(Qe(u.value));
 		if (e) {
-			if (e === l) return;
-			(e.label !== l.label || !Ze(e.ids, l.ids)) && d(e);
-		} else d(o[0]);
-	}, [o, l]), /* @__PURE__ */ x("select", {
+			if (e === u) return;
+			(e.label !== u.label || !Ze(e.ids, u.ids)) && d(e);
+		} else d(c[0]);
+	}, [c, u]), /* @__PURE__ */ b("select", {
 		multiple: !0,
-		size: o.length,
+		size: c.length,
 		onChange: p,
-		...i,
-		children: [r, o.map(({ value: e, label: t }) => /* @__PURE__ */ b("option", {
+		...a,
+		children: [r, c.map(({ value: e, label: t }) => /* @__PURE__ */ y("option", {
 			value: String(e),
 			selected: String(e) === f,
 			children: t
 		}, String(e)))]
 	});
-}), et = i(y(({ handlers: e, onResize: t, ...n }, r) => {
-	let [i, s] = g(), { bind: c, reset: l } = P(e);
-	return o(r, () => ({
+}), et = v(({ ref: e, handlers: t, onResize: n, ...r }) => {
+	let [o, s] = h(), { bind: c, reset: l } = le(t);
+	return a(e, () => ({
 		reset: l,
 		get element() {
 			return c.ref.current;
 		}
-	})), a(() => {
-		i && t({
-			width: ~~i.width,
-			height: ~~i.height
+	})), i(() => {
+		o && n({
+			width: ~~o.width,
+			height: ~~o.height
 		});
-	}, [i, t]), /* @__PURE__ */ b("div", {
+	}, [o, n]), /* @__PURE__ */ y("div", {
 		ref: s,
-		style: tt.root,
-		children: /* @__PURE__ */ b("div", {
-			style: tt.root,
+		style: $.root,
+		children: /* @__PURE__ */ y("div", {
+			style: $.root,
 			...c,
-			...n
+			...r
 		})
 	});
-})), tt = d.of({ root: {
+}), $ = u.of({ root: {
 	flex: 1,
 	display: "flex",
 	minWidth: 0,
 	minHeight: 0
-} }), nt = y(({ onSelect: e, ...t }) => /* @__PURE__ */ b($e, {
-	resolver: rt,
-	onSelect: h((t) => e(t.ids)),
+} }), tt = v(({ onSelect: e, ...t }) => /* @__PURE__ */ y($e, {
+	resolver: nt,
+	onSelect: m((t) => e(t.ids)),
 	...t
-})), rt = (e) => {
+})), nt = (e) => {
 	if (!e.item.isolator) return;
 	let t = [e.id];
 	return {
@@ -1770,7 +1770,7 @@ var Ze = (e, t) => {
 		label: e.title,
 		ids: t
 	};
-}, it = (e, t, { onEdit: n, onConnect: r, onMove: i, onAddPort: a, onDisconnectPort: o, onDeletePort: s, onDelete: c, onSelect: l, onContextMenu: u } = {}) => ({
+}, rt = (e, t, { onEdit: n, onConnect: r, onMove: i, onAddPort: a, onDisconnectPort: o, onDeletePort: s, onDelete: c, onSelect: l, onContextMenu: u } = {}) => ({
 	canvas: {
 		onSelectNode: (t, n) => l?.(t?.item || null, e.toData(n)),
 		onContextMenu: (t, n) => u?.(t?.item || null, e.toData(n))
@@ -1800,11 +1800,11 @@ var Ze = (e, t) => {
 		onDeletePort: async (e, t) => s?.(e.item, t),
 		onDelete: async (e) => c?.(e.item)
 	}
-}), at = {
+}), it = {
 	x: 0,
 	y: 0
-}, ot = y(function({ innerRef: e, nodes: t, subset: n, coordinator: r, menu: i, onSelectNode: u, onContextMenu: d, ...f }) {
-	let p = l(at), m = l(null), g = c(() => new $(i), [i]), _ = c(() => new Ye({
+}, at = v(function({ innerRef: e, nodes: t, subset: n, coordinator: r, menu: l, onSelectNode: u, onContextMenu: d, ...f }) {
+	let p = c(it), h = c(null), g = s(() => new Q(l), [l]), _ = s(() => new Ye({
 		maxFPS: 120,
 		grid: {
 			cellSize: r.gridSize,
@@ -1817,27 +1817,27 @@ var Ze = (e, t) => {
 		},
 		gui: [g]
 	}), [r]);
-	o(e, () => ({
+	a(e, () => ({
 		graph: _,
 		get element() {
-			return m.current?.element;
+			return h.current?.element;
 		}
 	}));
-	let v = h(({ width: e, height: t }) => _.resize(e, t)), y = h(() => {
+	let v = m(({ width: e, height: t }) => _.resize(e, t)), b = m(() => {
 		let { x: e, y: t } = r.toData(_.translation), { x: n, y: i } = r.toData(p.current);
 		g.text = `Pos: ${-(e - 1)} x ${-(t - 1)}\nCursor: ${~~(n - 1)} x ${~~(i - 1)}`;
-	}), x = h((e) => {
-		p.current = _.fromLocal(e), y();
-	}), S = h((e) => {
-		p.current = _.fromLocal(e), _.releaseNode(), y();
-	}), C = h((e, t) => {
+	}), x = m((e) => {
+		p.current = _.fromLocal(e), b();
+	}), S = m((e) => {
+		p.current = _.fromLocal(e), _.releaseNode(), b();
+	}), C = m((e, t) => {
 		if (x(e), _.capturing && !t?.shiftKey && u(null, r.toData(p.current)), !1 === u(_.capturing || null, r.toData(p.current))) return _.releaseNode(), !1;
-	}), w = h((e) => {
-		_.capturing || (_.translate(e), y());
-	}), ee = h((e) => {
+	}), w = m((e) => {
+		_.capturing || (_.translate(e), b());
+	}), T = m((e) => {
 		if (!1 === C(e)) return !1;
 		if (!1 === d(_.capturing || null, r.toData(p.current))) return _.releaseNode(), !1;
-	}), te = c(() => ({
+	}), E = s(() => ({
 		get position() {
 			return _.translation;
 		},
@@ -1845,18 +1845,18 @@ var Ze = (e, t) => {
 		onPointer: x,
 		onClick: C,
 		onUp: S,
-		onContext: ee
+		onContext: T
 	}), [_]);
-	return a(() => {
-		if (!m.current) return;
+	return i(() => {
+		if (!h.current) return;
 		let e = n || t.map(({ id: e }) => e);
 		_.batch(() => {
 			for (let t of _) e.includes(t.id) || _.removeNode(t);
 			for (let n of t) e.includes(n.id) && (_.addNode(n), _.moveNodeTo(n, n.position));
 			_.layout();
 		});
-	}, [n, t]), s(() => {
-		let e = m.current?.element;
+	}, [n, t]), o(() => {
+		let e = h.current?.element;
 		if (e) return _.mount(e, { viewport: {
 			width: e.clientWidth,
 			height: e.clientHeight,
@@ -1865,15 +1865,15 @@ var Ze = (e, t) => {
 			antialias: !0,
 			transparent: !1
 		} });
-	}, [_]), /* @__PURE__ */ b(et, {
-		ref: m,
-		handlers: te,
+	}, [_]), /* @__PURE__ */ y(et, {
+		ref: h,
+		handlers: E,
 		onResize: v,
 		...f
 	});
-}), st = (e, { onEdit: t, onMove: n, onConnect: r, onDelete: i, onAddPort: a, onDisconnectPort: o, onDeletePort: s }) => {
+}), ot = (e, { onEdit: t, onMove: n, onConnect: r, onDelete: i, onAddPort: a, onDisconnectPort: o, onDeletePort: s }) => {
 	e.onConnect(r), e.onMove((t) => n(e, t)), e.onEditAction(() => t(e)), e.onDeleteAction(() => i(e)), e.onAddPortAction((t) => a(e, t)), e.onDisconnectPortAction(({ port: t }) => o(e, t)), e.onDeletePortAction(({ port: t }) => s(e, t));
-}, ct = (e, t, { added: n, removed: r }) => {
+}, st = (e, t, { added: n, removed: r }) => {
 	if (n.length) {
 		let r = n.reduce((e, t) => (e[t.id] = t, e), {}), i = (t) => r[t] || e.find((e) => e.id === t);
 		for (let e of n) {
@@ -1897,11 +1897,11 @@ var Ze = (e, t) => {
 				}
 			}
 		}
-		if (t) for (let e of n) st(e, t);
+		if (t) for (let e of n) ot(e, t);
 		e.add(n);
 	}
 	if (r.length) for (let t of r) e.remove(t);
-}, lt = () => [{
+}, ct = () => [{
 	label: "Add node",
 	items: [{
 		label: "+ Call",
@@ -1956,13 +1956,13 @@ var Ze = (e, t) => {
 			}
 		}
 	]
-}], ut = (e, t) => ({
+}], lt = (e, t) => ({
 	getMenu(t, n) {
 		let r = {
 			action: "add",
 			...e.toData(n)
 		};
-		return { items: lt().map(({ label: e, items: t }) => [{
+		return { items: ct().map(({ label: e, items: t }) => [{
 			label: e,
 			group: !0
 		}, ...t.map(({ label: e, data: t, ...n }) => ({
@@ -1981,16 +1981,16 @@ var Ze = (e, t) => {
 				return;
 		}
 	}
-}), dt = (e, t) => {
-	let n = l([]);
-	m(() => {
+}), ut = (e, t) => {
+	let n = c([]);
+	p(() => {
 		let i = t?.filter((e) => !n.current.some(r(e.id))), a = n.current.filter((e) => !t?.some(r(e.id)));
 		if (a) for (let { id: t } of a) e.find(r(t))?.setSelected(!1);
 		if (i) for (let { id: t } of i) e.find(r(t))?.setSelected(!0);
 		n.current = t || [];
 	}, [t, e]);
-}, ft = (e) => e.startsWith("channel_"), pt = (e) => ft(e) ? e.slice(8) : "", mt = (e) => ({ id: t, name: n, input: r, to: i, port: a }) => {
-	let o = pt(n);
+}, dt = (e) => e.startsWith("channel_"), ft = (e) => dt(e) ? e.slice(8) : "", pt = (e) => ({ id: t, name: n, input: r, to: i, port: a }) => {
+	let o = ft(n);
 	o && (n = `${r ? "> " : ""}@${o}${r ? "" : " >"}`);
 	let s = [];
 	if (i) {
@@ -2005,11 +2005,11 @@ var Ze = (e, t) => {
 		name: n,
 		nodes: s
 	};
-}, ht = /* @__PURE__ */ function(e) {
+}, mt = /* @__PURE__ */ function(e) {
 	return e[e.Idle = 1] = "Idle", e[e.Processing = 2] = "Processing", e[e.Done = 4] = "Done", e[e.Error = 8] = "Error", e[e.Selected = 16] = "Selected", e;
-}({}), gt = /* @__PURE__ */ function(e) {
+}({}), ht = /* @__PURE__ */ function(e) {
 	return e[e.EDIT_NODE = 1] = "EDIT_NODE", e[e.ADD_PORT = 2] = "ADD_PORT", e[e.DISCONNECT_PORT = 3] = "DISCONNECT_PORT", e[e.DELETE_PORT = 4] = "DELETE_PORT", e[e.DELETE_NODE = 5] = "DELETE_NODE", e;
-}({}), _t = class extends ce {
+}({}), gt = class extends re {
 	#e;
 	#t;
 	constructor({ finder: e, item: t, coordinator: n, toTitle: r }) {
@@ -2020,8 +2020,8 @@ var Ze = (e, t) => {
 			progress: 0,
 			id: t.id,
 			title: r(t),
-			inputs: t.ports.filter(({ input: e }) => !!e).map(mt(e)),
-			outputs: t.ports.filter(({ input: e }) => !e).map(mt(e))
+			inputs: t.ports.filter(({ input: e }) => !!e).map(pt(e)),
+			outputs: t.ports.filter(({ input: e }) => !e).map(pt(e))
 		}), this.position = this.coordinator.toGraph(t);
 	}
 	dispose() {
@@ -2148,7 +2148,7 @@ var Ze = (e, t) => {
 			color: 3407871,
 			lineSize: 1,
 			radius: 4
-		}), e), this.#t.first.active = this.isSelected, this.#e ? this.#e.hotSwap(this.#t) : this.#e = new z(this.#t, {
+		}), e), this.#t.first.active = this.isSelected, this.#e ? this.#e.hotSwap(this.#t) : this.#e = new xe(this.#t, {
 			sizeX: t,
 			sizeY: n,
 			color: 3355647,
@@ -2156,32 +2156,32 @@ var Ze = (e, t) => {
 			radius: 4
 		}), this.#e.setActive(this.isInProgress), this.#e;
 	}
-}, vt = ({ coordinator: e, sync: t, onUpdate: n, store: r, toTitle: i }) => {
-	let a = l(t), o = c(() => ({
+}, _t = ({ coordinator: e, sync: t, onUpdate: n, store: r, toTitle: i }) => {
+	let a = c(t), o = s(() => ({
 		subscribe: (e) => r.onChange(e),
 		getSnapshot: () => r.get(),
 		selector: (e) => e.sort((e, t) => e.id.localeCompare(t.id)),
-		is: N
-	}), [r]), s = v(o.subscribe, o.getSnapshot, o.getSnapshot, o.selector, o.is), u = _(s), d = h((e) => s.find((t) => t.id === e));
-	a.current = t, m(() => {
-		let t = (t) => new _t({
+		is: L
+	}), [r]), l = _(o.subscribe, o.getSnapshot, o.getSnapshot, o.selector, o.is), u = g(l), d = m((e) => l.find((t) => t.id === e));
+	a.current = t, p(() => {
+		let t = (t) => new gt({
 			finder: d,
 			item: t,
 			coordinator: e,
 			toTitle: i
 		});
 		if (u) {
-			let e = u.reduce((e, { id: t }) => (e[t] = !0, e), {}), n = s.filter((t) => !e[t.id]).map(t), r = Object.keys(e).filter((e) => !d(e));
+			let e = u.reduce((e, { id: t }) => (e[t] = !0, e), {}), n = l.filter((t) => !e[t.id]).map(t), r = Object.keys(e).filter((e) => !d(e));
 			(n.length || r.length) && a.current({
 				added: n,
 				removed: r
 			});
 		} else a.current({
-			added: s.map(t),
+			added: l.map(t),
 			removed: []
 		});
-	}, [s, i]), m(() => S(() => s, n), []);
-}, yt = class {
+	}, [l, i]), p(() => x(() => l, n), []);
+}, vt = class {
 	grid;
 	gridSize;
 	sizes;
@@ -2212,18 +2212,18 @@ var Ze = (e, t) => {
 			y: ~~(this.snap(t) / this.grid + .5)
 		};
 	}
-}, bt = y(({ innerRef: e, graph: t, selected: n, handlers: r, children: i, onExport: a, ...s }) => {
-	let d = l(null), p = c(() => new yt(16), []), m = ut(p, r?.onCreate), [g, _] = me(() => new M()), [v, y] = u(), { canvas: S, loader: C } = it(p, g, r), w = h(() => a?.(t));
-	return o(e, () => ({
+}, yt = v(({ innerRef: e, graph: t, selected: n, handlers: r, children: i, onExport: o, ...u }) => {
+	let f = c(null), p = s(() => new vt(16), []), h = lt(p, r?.onCreate), [g, _] = R(() => new I()), [v, x] = l(), { canvas: S, loader: C } = rt(p, g, r), w = m(() => o?.(t));
+	return a(e, () => ({
 		get graph() {
-			return d.current?.graph;
+			return f.current?.graph;
 		},
 		get element() {
-			return d.current?.element;
+			return f.current?.element;
 		}
-	})), vt({
-		store: c(() => {
-			let e = new M(t.items);
+	})), _t({
+		store: s(() => {
+			let e = new I(t.items);
 			return {
 				items: e,
 				get: () => e.all,
@@ -2232,39 +2232,39 @@ var Ze = (e, t) => {
 		}, [t.items]),
 		coordinator: p,
 		toTitle: (e) => e.title,
-		sync: (e) => ct(g, C, e),
+		sync: (e) => st(g, C, e),
 		onUpdate: () => e?.current?.graph.layout()
-	}), dt(_, n), /* @__PURE__ */ x("div", {
-		onContextMenu: f,
-		style: xt.root,
-		...s,
-		children: [/* @__PURE__ */ x("div", {
-			style: xt.selector,
+	}), ut(_, n), /* @__PURE__ */ b("div", {
+		onContextMenu: d,
+		style: bt.root,
+		...u,
+		children: [/* @__PURE__ */ b("div", {
+			style: bt.selector,
 			children: [
 				i,
-				/* @__PURE__ */ b(nt, {
+				/* @__PURE__ */ y(tt, {
 					items: _,
-					onSelect: y
+					onSelect: x
 				}),
-				/* @__PURE__ */ b("button", {
-					onClick: () => y(void 0),
+				/* @__PURE__ */ y("button", {
+					onClick: () => x(void 0),
 					children: "Update"
 				}),
-				a && /* @__PURE__ */ b("button", {
+				o && /* @__PURE__ */ y("button", {
 					onClick: w,
 					children: "Export"
 				})
 			]
-		}), /* @__PURE__ */ b(ot, {
-			innerRef: d,
+		}), /* @__PURE__ */ y(at, {
+			innerRef: f,
 			coordinator: p,
 			nodes: _,
 			subset: v,
-			menu: m,
+			menu: h,
 			...S
 		})]
 	});
-}), xt = d.of({
+}), bt = u.of({
 	root: {
 		flex: 1,
 		display: "flex",
@@ -2278,6 +2278,6 @@ var Ze = (e, t) => {
 	}
 });
 //#endregion
-export { ue as ClusteredLayout, fe as EdgesSort, Ye as GraphAdapter, ot as GraphCanvas, ce as GraphNode, k as GraphNodeJoints, le as LayeredLayout, pe as Layouter, bt as ManagedGraph, _t as ManagedGraphNode, gt as MenuActions, $e as NodeGroups, ht as NodeStatus, A as NodesGraph, de as NodesSort, $ as PIXIGUI, M as Store, et as Viewport, pt as getChannelName, ft as isChannelName, N as isEqualIdentifiables, P as useDraggable, me as useStore };
+export { ae as ClusteredLayout, se as EdgesSort, Ye as GraphAdapter, at as GraphCanvas, re as GraphNode, M as GraphNodeJoints, ie as LayeredLayout, ce as Layouter, yt as ManagedGraph, gt as ManagedGraphNode, ht as MenuActions, $e as NodeGroups, mt as NodeStatus, P as NodesGraph, oe as NodesSort, Q as PIXIGUI, I as Store, et as Viewport, ft as getChannelName, dt as isChannelName, L as isEqualIdentifiables, le as useDraggable, R as useStore };
 
 //# sourceMappingURL=index.js.map