geonodes-web-render 0.3.19 → 0.3.21

package/README.md

@@ -1,7 +1,11 @@
 # geonodes-web-render
 
+[![npm](https://img.shields.io/npm/v/geonodes-web-render)](https://www.npmjs.com/package/geonodes-web-render?activeTab=readme)
+
 A browser-based viewer for Blender node trees exported via the [Tree Clipper](https://extensions.blender.org/add-ons/tree-clipper/) add-on. It renders the exported JSON as a read-only, Blender-styled node graph using React Flow.
 
+📦 **npm:** [geonodes-web-render](https://www.npmjs.com/package/geonodes-web-render?activeTab=readme)
+
 ## What it does
 
 Paste or load a Tree Clipper JSON export and the app displays the node graph with accurate socket colors, node header colors, reroute nodes, float curves, and simulation zones.
@@ -28,6 +32,18 @@ Tree Clipper JSON / base64 payload
 - **Blender fidelity** — socket and header colors sourced from Blender's own tables; Math/Compare nodes show human-readable operation labels
 - **Embeddable** — ships a separate `embed` entry point for use as a library
 
+## Controls
+
+| Action | Mouse | Trackpad |
+| --- | --- | --- |
+| Box-select | Left-drag | Left-drag |
+| Pan | Middle-drag | Two-finger drag |
+| Zoom | Wheel | Pinch |
+| Zoom (modifier) | `⌘`/`Ctrl` + wheel | `⌘`/`Ctrl` + two-finger |
+| Context menu | Right-click | Right-click |
+
+Mouse vs. trackpad is auto-detected per scroll, so wheel-zoom and two-finger-pan coexist. In an embed, scroll passes through to the page until you click the canvas to engage; moving the pointer off disengages.
+
 ## Usage
 
 ### Standalone app

package/dist/embed.js

@@ -257,16 +257,16 @@ function re(e) {
 //#endregion
 //#region node_modules/d3-selection/src/selection/selectChild.js
 var ie = Array.prototype.find;
-function G(e) {
+function ae(e) {
 	return function() {
 		return ie.call(this.children, e);
 	};
 }
-function ae() {
+function G() {
 	return this.firstElementChild;
 }
 function oe(e) {
-	return this.select(e == null ? ae : G(typeof e == "function" ? e : re(e)));
+	return this.select(e == null ? G : ae(typeof e == "function" ? e : re(e)));
 }
 //#endregion
 //#region node_modules/d3-selection/src/selection/selectChildren.js
@@ -6312,9 +6312,9 @@ function Hu({ id: e, edgesFocusable: t, edgesReconnectable: n, elementsSelectabl
 		}), N.current?.blur()) : n([e])), i && i(t, T);
 	}, ie = o ? (e) => {
 		o(e, { ...T });
-	} : void 0, G = s ? (e) => {
+	} : void 0, ae = s ? (e) => {
 		s(e, { ...T });
-	} : void 0, ae = c ? (e) => {
+	} : void 0, G = c ? (e) => {
 		c(e, { ...T });
 	} : void 0, oe = l ? (e) => {
 		l(e, { ...T });
@@ -6339,8 +6339,8 @@ function Hu({ id: e, edgesFocusable: t, edgesReconnectable: n, elementsSelectabl
 			]),
 			onClick: re,
 			onDoubleClick: ie,
-			onContextMenu: G,
-			onMouseEnter: ae,
+			onContextMenu: ae,
+			onMouseEnter: G,
 			onMouseMove: oe,
 			onMouseLeave: se,
 			onKeyDown: A ? (t) => {
@@ -6582,7 +6582,7 @@ function od() {
 		}
 	}, []);
 }
-function sd({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick: r, onEdgeClick: i, onNodeDoubleClick: a, onEdgeDoubleClick: o, onNodeMouseEnter: s, onNodeMouseMove: c, onNodeMouseLeave: l, onNodeContextMenu: u, onSelectionContextMenu: d, onSelectionStart: f, onSelectionEnd: p, connectionLineType: m, connectionLineStyle: h, connectionLineComponent: v, connectionLineContainerStyle: y, selectionKeyCode: b, selectionOnDrag: x, selectionMode: S, multiSelectionKeyCode: C, panActivationKeyCode: w, zoomActivationKeyCode: T, deleteKeyCode: E, onlyRenderVisibleElements: D, elementsSelectable: O, defaultViewport: k, translateExtent: A, minZoom: j, maxZoom: M, preventScrolling: N, defaultMarkerColor: P, zoomOnScroll: F, zoomOnPinch: I, panOnScroll: L, panOnScrollSpeed: R, panOnScrollMode: ee, zoomOnDoubleClick: z, panOnDrag: B, autoPanOnSelection: V, onPaneClick: H, onPaneMouseEnter: U, onPaneMouseMove: W, onPaneMouseLeave: te, onPaneScroll: ne, onPaneContextMenu: re, paneClickDistance: ie, nodeClickDistance: G, onEdgeContextMenu: ae, onEdgeMouseEnter: oe, onEdgeMouseMove: se, onEdgeMouseLeave: ce, reconnectRadius: le, onReconnect: ue, onReconnectStart: de, onReconnectEnd: fe, noDragClassName: pe, noWheelClassName: me, noPanClassName: he, disableKeyboardA11y: ge, nodeExtent: _e, rfId: ve, viewport: ye, onViewportChange: be }) {
+function sd({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick: r, onEdgeClick: i, onNodeDoubleClick: a, onEdgeDoubleClick: o, onNodeMouseEnter: s, onNodeMouseMove: c, onNodeMouseLeave: l, onNodeContextMenu: u, onSelectionContextMenu: d, onSelectionStart: f, onSelectionEnd: p, connectionLineType: m, connectionLineStyle: h, connectionLineComponent: v, connectionLineContainerStyle: y, selectionKeyCode: b, selectionOnDrag: x, selectionMode: S, multiSelectionKeyCode: C, panActivationKeyCode: w, zoomActivationKeyCode: T, deleteKeyCode: E, onlyRenderVisibleElements: D, elementsSelectable: O, defaultViewport: k, translateExtent: A, minZoom: j, maxZoom: M, preventScrolling: N, defaultMarkerColor: P, zoomOnScroll: F, zoomOnPinch: I, panOnScroll: L, panOnScrollSpeed: R, panOnScrollMode: ee, zoomOnDoubleClick: z, panOnDrag: B, autoPanOnSelection: V, onPaneClick: H, onPaneMouseEnter: U, onPaneMouseMove: W, onPaneMouseLeave: te, onPaneScroll: ne, onPaneContextMenu: re, paneClickDistance: ie, nodeClickDistance: ae, onEdgeContextMenu: G, onEdgeMouseEnter: oe, onEdgeMouseMove: se, onEdgeMouseLeave: ce, reconnectRadius: le, onReconnect: ue, onReconnectStart: de, onReconnectEnd: fe, noDragClassName: pe, noWheelClassName: me, noPanClassName: he, disableKeyboardA11y: ge, nodeExtent: _e, rfId: ve, viewport: ye, onViewportChange: be }) {
 	return ad(e), ad(t), od(), Yu(n), Zu(ye), g(Xl, {
 		onPaneClick: H,
 		onPaneMouseEnter: U,
@@ -6630,7 +6630,7 @@ function sd({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick: r, onEdgeClick
 				onReconnectStart: de,
 				onReconnectEnd: fe,
 				onlyRenderVisibleElements: D,
-				onEdgeContextMenu: ae,
+				onEdgeContextMenu: G,
 				onEdgeMouseEnter: oe,
 				onEdgeMouseMove: se,
 				onEdgeMouseLeave: ce,
@@ -6655,7 +6655,7 @@ function sd({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick: r, onEdgeClick
 				onNodeMouseMove: c,
 				onNodeMouseLeave: l,
 				onNodeContextMenu: u,
-				nodeClickDistance: G,
+				nodeClickDistance: ae,
 				onlyRenderVisibleElements: D,
 				noPanClassName: he,
 				noDragClassName: pe,
@@ -7004,7 +7004,7 @@ var md = {
 	position: "relative",
 	zIndex: 0
 };
-function hd({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, className: i, nodeTypes: o, edgeTypes: s, onNodeClick: c, onEdgeClick: l, onInit: u, onMove: d, onMoveStart: f, onMoveEnd: p, onConnect: m, onConnectStart: h, onConnectEnd: v, onClickConnectStart: y, onClickConnectEnd: b, onNodeMouseEnter: x, onNodeMouseMove: S, onNodeMouseLeave: C, onNodeContextMenu: w, onNodeDoubleClick: T, onNodeDragStart: E, onNodeDrag: O, onNodeDragStop: k, onNodesDelete: A, onEdgesDelete: j, onDelete: M, onSelectionChange: N, onSelectionDragStart: P, onSelectionDrag: F, onSelectionDragStop: I, onSelectionContextMenu: L, onSelectionStart: R, onSelectionEnd: ee, onBeforeDelete: z, connectionMode: B, connectionLineType: V = Ta.Bezier, connectionLineStyle: H, connectionLineComponent: U, connectionLineContainerStyle: W, deleteKeyCode: te = "Backspace", selectionKeyCode: ne = "Shift", selectionOnDrag: re = !1, selectionMode: ie = Ca.Full, panActivationKeyCode: G = "Space", multiSelectionKeyCode: ae = lo() ? "Meta" : "Control", zoomActivationKeyCode: oe = lo() ? "Meta" : "Control", snapToGrid: se, snapGrid: ce, onlyRenderVisibleElements: le = !1, selectNodesOnDrag: ue, nodesDraggable: de, autoPanOnNodeFocus: fe, nodesConnectable: pe, nodesFocusable: me, nodeOrigin: he = Fc, edgesFocusable: ge, edgesReconnectable: _e, elementsSelectable: ve = !0, defaultViewport: ye = Ic, minZoom: be = .5, maxZoom: xe = 2, translateExtent: Se = va, preventScrolling: Ce = !0, nodeExtent: we, defaultMarkerColor: Te = "#b1b1b7", zoomOnScroll: Ee = !0, zoomOnPinch: De = !0, panOnScroll: Oe = !1, panOnScrollSpeed: ke = .5, panOnScrollMode: Ae = Sa.Free, zoomOnDoubleClick: je = !0, panOnDrag: Me = !0, onPaneClick: Ne, onPaneMouseEnter: Pe, onPaneMouseMove: Fe, onPaneMouseLeave: Ie, onPaneScroll: Le, onPaneContextMenu: Re, paneClickDistance: ze = 1, nodeClickDistance: Be = 0, children: Ve, onReconnect: He, onReconnectStart: Ue, onReconnectEnd: We, onEdgeContextMenu: Ge, onEdgeDoubleClick: Ke, onEdgeMouseEnter: qe, onEdgeMouseMove: Je, onEdgeMouseLeave: Ye, reconnectRadius: Xe = 10, onNodesChange: Ze, onEdgesChange: Qe, noDragClassName: $e = "nodrag", noWheelClassName: et = "nowheel", noPanClassName: tt = "nopan", fitView: nt, fitViewOptions: rt, connectOnClick: it, attributionPosition: at, proOptions: ot, defaultEdgeOptions: st, elevateNodesOnSelect: ct = !0, elevateEdgesOnSelect: lt = !1, disableKeyboardA11y: ut = !1, autoPanOnConnect: dt, autoPanOnNodeDrag: ft, autoPanOnSelection: pt = !0, autoPanSpeed: mt, connectionRadius: ht, isValidConnection: gt, onError: _t, style: vt, id: yt, nodeDragThreshold: bt, connectionDragThreshold: xt, viewport: St, onViewportChange: Ct, width: wt, height: Tt, colorMode: Et = "light", debug: Dt, onScroll: Ot, ariaLabelConfig: kt, zIndexMode: At = "basic", ...jt }, Mt) {
+function hd({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, className: i, nodeTypes: o, edgeTypes: s, onNodeClick: c, onEdgeClick: l, onInit: u, onMove: d, onMoveStart: f, onMoveEnd: p, onConnect: m, onConnectStart: h, onConnectEnd: v, onClickConnectStart: y, onClickConnectEnd: b, onNodeMouseEnter: x, onNodeMouseMove: S, onNodeMouseLeave: C, onNodeContextMenu: w, onNodeDoubleClick: T, onNodeDragStart: E, onNodeDrag: O, onNodeDragStop: k, onNodesDelete: A, onEdgesDelete: j, onDelete: M, onSelectionChange: N, onSelectionDragStart: P, onSelectionDrag: F, onSelectionDragStop: I, onSelectionContextMenu: L, onSelectionStart: R, onSelectionEnd: ee, onBeforeDelete: z, connectionMode: B, connectionLineType: V = Ta.Bezier, connectionLineStyle: H, connectionLineComponent: U, connectionLineContainerStyle: W, deleteKeyCode: te = "Backspace", selectionKeyCode: ne = "Shift", selectionOnDrag: re = !1, selectionMode: ie = Ca.Full, panActivationKeyCode: ae = "Space", multiSelectionKeyCode: G = lo() ? "Meta" : "Control", zoomActivationKeyCode: oe = lo() ? "Meta" : "Control", snapToGrid: se, snapGrid: ce, onlyRenderVisibleElements: le = !1, selectNodesOnDrag: ue, nodesDraggable: de, autoPanOnNodeFocus: fe, nodesConnectable: pe, nodesFocusable: me, nodeOrigin: he = Fc, edgesFocusable: ge, edgesReconnectable: _e, elementsSelectable: ve = !0, defaultViewport: ye = Ic, minZoom: be = .5, maxZoom: xe = 2, translateExtent: Se = va, preventScrolling: Ce = !0, nodeExtent: we, defaultMarkerColor: Te = "#b1b1b7", zoomOnScroll: Ee = !0, zoomOnPinch: De = !0, panOnScroll: Oe = !1, panOnScrollSpeed: ke = .5, panOnScrollMode: Ae = Sa.Free, zoomOnDoubleClick: je = !0, panOnDrag: Me = !0, onPaneClick: Ne, onPaneMouseEnter: Pe, onPaneMouseMove: Fe, onPaneMouseLeave: Ie, onPaneScroll: Le, onPaneContextMenu: Re, paneClickDistance: ze = 1, nodeClickDistance: Be = 0, children: Ve, onReconnect: He, onReconnectStart: Ue, onReconnectEnd: We, onEdgeContextMenu: Ge, onEdgeDoubleClick: Ke, onEdgeMouseEnter: qe, onEdgeMouseMove: Je, onEdgeMouseLeave: Ye, reconnectRadius: Xe = 10, onNodesChange: Ze, onEdgesChange: Qe, noDragClassName: $e = "nodrag", noWheelClassName: et = "nowheel", noPanClassName: tt = "nopan", fitView: nt, fitViewOptions: rt, connectOnClick: it, attributionPosition: at, proOptions: ot, defaultEdgeOptions: st, elevateNodesOnSelect: ct = !0, elevateEdgesOnSelect: lt = !1, disableKeyboardA11y: ut = !1, autoPanOnConnect: dt, autoPanOnNodeDrag: ft, autoPanOnSelection: pt = !0, autoPanSpeed: mt, connectionRadius: ht, isValidConnection: gt, onError: _t, style: vt, id: yt, nodeDragThreshold: bt, connectionDragThreshold: xt, viewport: St, onViewportChange: Ct, width: wt, height: Tt, colorMode: Et = "light", debug: Dt, onScroll: Ot, ariaLabelConfig: kt, zIndexMode: At = "basic", ...jt }, Mt) {
 	let Nt = yt || "1", Pt = Hc(Et), Ft = a((e) => {
 		e.currentTarget.scrollTo({
 			top: 0,
@@ -7121,8 +7121,8 @@ function hd({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, className: i
 					selectionOnDrag: re,
 					selectionMode: ie,
 					deleteKeyCode: te,
-					multiSelectionKeyCode: ae,
-					panActivationKeyCode: G,
+					multiSelectionKeyCode: G,
+					panActivationKeyCode: ae,
 					zoomActivationKeyCode: oe,
 					onlyRenderVisibleElements: le,
 					defaultViewport: ye,
@@ -7486,18 +7486,18 @@ var Ud = i(Hd), Wd = i(Vd), Gd = 200, Kd = 150, qd = (e) => !e.hidden, Jd = (e)
 	};
 }, Yd = "react-flow__minimap-desc";
 function Xd({ style: e, className: t, nodeStrokeColor: n, nodeColor: r, nodeClassName: i = "", nodeBorderRadius: o = 5, nodeStrokeWidth: s, nodeComponent: l, bgColor: u, maskColor: f, maskStrokeColor: p, maskStrokeWidth: m, position: h = "bottom-right", onClick: v, onNodeClick: y, pannable: b = !1, zoomable: x = !1, ariaLabel: S, inversePan: C, zoomStep: w = 1, offsetScale: T = 5 }) {
-	let E = Q(), O = d(null), { boundingRect: k, viewBB: A, rfId: j, panZoom: M, translateExtent: N, flowWidth: P, flowHeight: F, ariaLabelConfig: I } = Z(Jd, X), L = e?.width ?? Gd, R = e?.height ?? Kd, ee = k.width / L, z = k.height / R, B = Math.max(ee, z), V = B * L, H = B * R, U = T * B, W = k.x - (V - k.width) / 2 - U, te = k.y - (H - k.height) / 2 - U, ne = V + U * 2, re = H + U * 2, ie = `${Yd}-${j}`, G = d(0), ae = d();
-	G.current = B, c(() => {
-		if (O.current && M) return ae.current = As({
+	let E = Q(), O = d(null), { boundingRect: k, viewBB: A, rfId: j, panZoom: M, translateExtent: N, flowWidth: P, flowHeight: F, ariaLabelConfig: I } = Z(Jd, X), L = e?.width ?? Gd, R = e?.height ?? Kd, ee = k.width / L, z = k.height / R, B = Math.max(ee, z), V = B * L, H = B * R, U = T * B, W = k.x - (V - k.width) / 2 - U, te = k.y - (H - k.height) / 2 - U, ne = V + U * 2, re = H + U * 2, ie = `${Yd}-${j}`, ae = d(0), G = d();
+	ae.current = B, c(() => {
+		if (O.current && M) return G.current = As({
 			domNode: O.current,
 			panZoom: M,
 			getTransform: () => E.getState().transform,
-			getViewScale: () => G.current
+			getViewScale: () => ae.current
 		}), () => {
-			ae.current?.destroy();
+			G.current?.destroy();
 		};
 	}, [M]), c(() => {
-		ae.current?.update({
+		G.current?.update({
 			translateExtent: N,
 			width: P,
 			height: F,
@@ -7516,7 +7516,7 @@ function Xd({ style: e, className: t, nodeStrokeColor: n, nodeColor: r, nodeClas
 		F
 	]);
 	let oe = v ? (e) => {
-		let [t, n] = ae.current?.pointer(e) || [0, 0];
+		let [t, n] = G.current?.pointer(e) || [0, 0];
 		v(e, {
 			x: t,
 			y: n
@@ -7708,15 +7708,13 @@ function $d({ nodeId: e, position: t, variant: n = Gs.Handle, className: r, styl
 i($d);
 //#endregion
 //#region src/gn/ir/socketColors.ts
-function ef(e) {
-	return e <= .0031308 ? 12.92 * e : 1.055 * e ** (1 / 2.4) - .055;
-}
 function $(e, t, n) {
-	let r = (e) => Math.round(Math.min(1, Math.max(0, ef(e))) * 255).toString(16).padStart(2, "0");
+	let r = (e) => Math.round(Math.min(1, Math.max(0, e)) * 255).toString(16).padStart(2, "0");
 	return `#${r(e)}${r(t)}${r(n)}`;
 }
-var tf = {
+var ef = {
 	FLOAT: $(.63, .63, .63),
+	VALUE: $(.63, .63, .63),
 	VECTOR: $(.39, .39, .78),
 	RGBA: $(.78, .78, .16),
 	SHADER: $(.39, .78, .39),
@@ -7737,12 +7735,12 @@ var tf = {
 	INT_VECTOR: $(.36, .47, .61),
 	CUSTOM: $(.2, .2, .2)
 };
-function nf(e) {
-	return tf[e] ?? tf.CUSTOM;
+function tf(e) {
+	return ef[e] ?? ef.CUSTOM;
 }
 //#endregion
 //#region src/gn/ir/nodeColors.ts
-var rf = {
+var nf = {
 	GEOMETRY: "#1d725e",
 	INPUT: "#82354c",
 	OUTPUT: "#3e232a",
@@ -7759,7 +7757,7 @@ var rf = {
 	DISTORT: "#3e5a5b",
 	SCRIPT: "#203c3c",
 	DEFAULT: "#303030"
-}, af = {
+}, rf = {
 	ShaderNodeVectorMath: "VECTOR",
 	ShaderNodeVectorRotate: "VECTOR",
 	ShaderNodeVectorCurve: "VECTOR",
@@ -7781,10 +7779,10 @@ var rf = {
 	ShaderNodeValue: "INPUT",
 	ShaderNodeRGB: "INPUT"
 };
-function of(e) {
-	return e === "NodeGroupInput" || e === "NodeGroupOutput" ? "INTERFACE" : e.startsWith("NodeGroup") ? "GROUP" : e.startsWith("GeometryNodeSet") || e.startsWith("GeometryNodeTransform") || e.startsWith("GeometryNodeMerge") || e.startsWith("GeometryNodeJoin") || e.startsWith("GeometryNodeDelete") || e.startsWith("GeometryNodeSeparate") || e.startsWith("GeometryNodeDuplicate") || e.startsWith("GeometryNodeExtrude") || e.startsWith("GeometryNodeFlip") || e.startsWith("GeometryNodeSubdivide") || e.startsWith("GeometryNodeTriangulate") || e.startsWith("GeometryNodeMesh") || e.startsWith("GeometryNodeCurve") || e.startsWith("GeometryNodePoints") || e.startsWith("GeometryNodeVolume") || e.startsWith("GeometryNodeInstance") || e.startsWith("GeometryNodeRealize") || e.startsWith("GeometryNodeConvex") || e.startsWith("GeometryNodeFill") || e.startsWith("GeometryNodeSDF") || e.startsWith("GeometryNode") ? "GEOMETRY" : e.startsWith("ShaderNode") ? e in af ? af[e] : e.startsWith("ShaderNodeTex") ? "TEXTURE" : "SHADER" : e.startsWith("FunctionNode") ? e.startsWith("FunctionNodeInput") ? "INPUT" : "CONVERTER" : "DEFAULT";
+function af(e) {
+	return e === "NodeGroupInput" || e === "NodeGroupOutput" ? "INTERFACE" : e.startsWith("NodeGroup") ? "GROUP" : e.startsWith("GeometryNodeSet") || e.startsWith("GeometryNodeTransform") || e.startsWith("GeometryNodeMerge") || e.startsWith("GeometryNodeJoin") || e.startsWith("GeometryNodeDelete") || e.startsWith("GeometryNodeSeparate") || e.startsWith("GeometryNodeDuplicate") || e.startsWith("GeometryNodeExtrude") || e.startsWith("GeometryNodeFlip") || e.startsWith("GeometryNodeSubdivide") || e.startsWith("GeometryNodeTriangulate") || e.startsWith("GeometryNodeMesh") || e.startsWith("GeometryNodeCurve") || e.startsWith("GeometryNodePoints") || e.startsWith("GeometryNodeVolume") || e.startsWith("GeometryNodeInstance") || e.startsWith("GeometryNodeRealize") || e.startsWith("GeometryNodeConvex") || e.startsWith("GeometryNodeFill") || e.startsWith("GeometryNodeSDF") || e.startsWith("GeometryNode") ? "GEOMETRY" : e.startsWith("ShaderNode") ? e in rf ? rf[e] : e.startsWith("ShaderNodeTex") ? "TEXTURE" : "SHADER" : e.startsWith("FunctionNode") ? e.startsWith("FunctionNodeInput") ? "INPUT" : "CONVERTER" : "DEFAULT";
 }
-var sf = {
+var of = {
 	GeometryNodeInputMaterial: "INPUT",
 	GeometryNodeInputMaterialIndex: "INPUT",
 	GeometryNodeInputRadius: "INPUT",
@@ -7835,16 +7833,16 @@ var sf = {
 	GeometryNodeFieldVariance: "CONVERTER",
 	GeometryNodeViewer: "OUTPUT"
 };
-function cf(e, t) {
+function sf(e, t) {
 	if (e === "ShaderNodeMix") return t === "VECTOR" ? "VECTOR" : t === "RGBA" ? "COLOR" : "CONVERTER";
 	if (e === "ShaderNodeMapRange") return t === "FLOAT_VECTOR" ? "VECTOR" : "CONVERTER";
 }
-function lf(e, t) {
-	return rf[cf(e, t) ?? sf[e] ?? of(e)] ?? rf.DEFAULT;
+function cf(e, t) {
+	return nf[sf(e, t) ?? of[e] ?? af(e)] ?? nf.DEFAULT;
 }
 //#endregion
 //#region src/gn/importer/blenderTree.ts
-var uf = {
+var lf = {
 	NodeSocketGeometry: "GEOMETRY",
 	NodeSocketFloat: "FLOAT",
 	NodeSocketVector: "VECTOR",
@@ -7861,10 +7859,10 @@ var uf = {
 	NodeSocketMatrix: "MATRIX",
 	NodeSocketMenu: "MENU"
 };
-function df(e) {
-	return uf[e] ?? "CUSTOM";
+function uf(e) {
+	return lf[e] ?? "CUSTOM";
 }
-var ff = {
+var df = {
 	HSV: [
 		"Hue",
 		"Saturation",
@@ -7881,7 +7879,7 @@ var ff = {
 		"Blue"
 	]
 };
-function pf(e) {
+function ff(e) {
 	let t = e.data.mapping?.data;
 	if (!t) return;
 	let n = t.curves?.data?.items;
@@ -7899,7 +7897,7 @@ function pf(e) {
 		points: r
 	};
 }
-function mf(e) {
+function pf(e) {
 	let t = e.data.color_ramp?.data;
 	if (!t) return;
 	let n = (t.elements?.data?.items ?? []).map((e) => {
@@ -7921,8 +7919,8 @@ function mf(e) {
 		stops: n
 	};
 }
-function hf(e, t) {
-	let n = ff[t ?? "RGB"] ?? ff.RGB, r = ff.RGB;
+function mf(e, t) {
+	let n = df[t ?? "RGB"] ?? df.RGB, r = df.RGB;
 	return e.map((e) => {
 		let t = r.indexOf(e.name);
 		return t === -1 ? e : {
@@ -7931,11 +7929,11 @@ function hf(e, t) {
 		};
 	});
 }
-function gf(e) {
+function hf(e) {
 	return e.replace(/\.\d{3}$/, "");
 }
-function _f(e, t) {
-	let n = df(e.data.socket_idname ?? ""), r = nf(n), i = String(e.data.single_input ?? `${e.id}_in`), a = String(e.data.single_output ?? `${e.id}_out`), o = (e) => ({
+function gf(e, t) {
+	let n = uf(e.data.socket_idname ?? ""), r = tf(n), i = String(e.data.single_input ?? `${e.id}_in`), a = String(e.data.single_output ?? `${e.id}_out`), o = (e) => ({
 		id: e,
 		name: "",
 		dataType: n,
@@ -7961,7 +7959,7 @@ function _f(e, t) {
 		...e.data.parent == null ? {} : { parentFrameId: String(e.data.parent) }
 	};
 }
-function vf(e) {
+function _f(e) {
 	return e == null ? null : Array.isArray(e) && e.length >= 2 ? {
 		kind: "vec",
 		values: e
@@ -7970,20 +7968,20 @@ function vf(e) {
 		value: e
 	} : null;
 }
-function yf(e, t) {
+function vf(e, t) {
 	return {
 		id: String(e.id),
 		name: e.data.name,
 		dataType: e.data.type,
 		displayShape: e.data.display_shape,
-		color: nf(e.data.type),
-		defaultValue: vf(e.data.default_value),
+		color: tf(e.data.type),
+		defaultValue: _f(e.data.default_value),
 		hideValue: e.data.hide_value ?? !1,
 		enabled: e.data.enabled ?? !0,
 		index: t
 	};
 }
-function bf(e) {
+function yf(e) {
 	if (e.data.bl_idname === "FunctionNodeCompare") {
 		let t = {};
 		return e.data.data_type && (t.data_type = e.data.data_type), e.data.operation && (t.operation = e.data.operation), Object.keys(t).length > 0 ? t : void 0;
@@ -7993,7 +7991,7 @@ function bf(e) {
 		return e.data.operation && (t.operation = e.data.operation), e.data.use_clamp && (t.use_clamp = "true"), Object.keys(t).length > 0 ? t : void 0;
 	}
 }
-function xf(e, t) {
+function bf(e, t) {
 	if (!e?.data) throw Error(`"node_trees[${t}].data" is missing.`);
 	if (!e.data.nodes?.data?.items) throw Error(`"node_trees[${t}].data.nodes.data.items" is missing.`);
 	if (!e.data.links?.data?.items) throw Error(`"node_trees[${t}].data.links.data.items" is missing.`);
@@ -8003,10 +8001,10 @@ function xf(e, t) {
 		nodes: e.data.nodes.data.items.map((e, t) => {
 			if (!e?.data) throw Error(`Node at index ${t} is missing ".data".`);
 			let n = e.data.location_absolute ?? e.data.location ?? [0, 0];
-			if (e.data.bl_idname === "NodeReroute") return _f(e, n);
+			if (e.data.bl_idname === "NodeReroute") return gf(e, n);
 			let r = (e.data.outputs?.data?.items ?? []).map((t, n) => {
 				if (!t?.data) throw Error(`Node "${e.data.name}" output socket ${n} is missing ".data".`);
-				return yf(t, n);
+				return vf(t, n);
 			});
 			e.data.bl_idname === "FunctionNodeInputVector" && Array.isArray(e.data.vector) && (r[0] &&= {
 				...r[0],
@@ -8017,20 +8015,20 @@ function xf(e, t) {
 			});
 			let i = (e.data.inputs?.data?.items ?? []).map((t, n) => {
 				if (!t?.data) throw Error(`Node "${e.data.name}" input socket ${n} is missing ".data".`);
-				return yf(t, n);
+				return vf(t, n);
 			});
-			(e.data.bl_idname === "ShaderNodeCombineColor" || e.data.bl_idname === "ShaderNodeSeparateColor") && (i = hf(i, e.data.mode));
-			let a = e.data.bl_idname === "ShaderNodeFloatCurve" ? pf(e) : void 0, o = e.data.bl_idname === "ShaderNodeValToRGB" ? mf(e) : void 0, s = bf(e);
+			(e.data.bl_idname === "ShaderNodeCombineColor" || e.data.bl_idname === "ShaderNodeSeparateColor") && (i = mf(i, e.data.mode));
+			let a = e.data.bl_idname === "ShaderNodeFloatCurve" ? ff(e) : void 0, o = e.data.bl_idname === "ShaderNodeValToRGB" ? pf(e) : void 0, s = yf(e);
 			return {
 				id: String(e.id),
 				type: e.data.bl_idname,
-				label: e.data.label || gf(e.data.name),
+				label: e.data.label || hf(e.data.name),
 				position: {
 					x: n[0],
 					y: -n[1]
 				},
 				width: e.data.width ?? 140,
-				headerColor: lf(e.data.bl_idname, e.data.data_type),
+				headerColor: cf(e.data.bl_idname, e.data.data_type),
 				inputs: i,
 				outputs: r,
 				floatCurve: a,
@@ -8050,12 +8048,12 @@ function xf(e, t) {
 		})
 	};
 }
-function Sf(e) {
+function xf(e) {
 	if (!e || typeof e != "object") throw Error("JSON root must be an object.");
 	if (!Array.isArray(e.node_trees) || e.node_trees.length === 0) throw Error("Expected \"node_trees\" array with at least one entry.");
 	let t = {};
 	for (let n = 0; n < e.node_trees.length; n++) {
-		let r = xf(e.node_trees[n], n);
+		let r = bf(e.node_trees[n], n);
 		t[r.id] = r;
 	}
 	let n = /* @__PURE__ */ new Set();
@@ -8074,21 +8072,21 @@ function Sf(e) {
 		trees: t
 	};
 }
-function Cf(e, t) {
+function Sf(e, t) {
 	return {
 		...t,
 		nodeId: e,
 		direction: "input"
 	};
 }
-function wf(e, t) {
+function Cf(e, t) {
 	return {
 		...t,
 		nodeId: e,
 		direction: "output"
 	};
 }
-function Tf(e) {
+function wf(e) {
 	let t = e.nodes.map((e) => ({
 		id: e.id,
 		type: e.type,
@@ -8096,8 +8094,8 @@ function Tf(e) {
 		position: e.position,
 		width: e.width,
 		headerColor: e.headerColor,
-		inputs: e.inputs.map((t) => Cf(e.id, t)),
-		outputs: e.outputs.map((t) => wf(e.id, t)),
+		inputs: e.inputs.map((t) => Sf(e.id, t)),
+		outputs: e.outputs.map((t) => Cf(e.id, t)),
 		floatCurve: e.floatCurve,
 		colorRamp: e.colorRamp,
 		properties: e.properties,
@@ -8123,20 +8121,20 @@ function Tf(e) {
 }
 //#endregion
 //#region src/gn/xyflow/mapGraphIRToFlow.ts
-function Ef(e) {
+function Tf(e) {
 	let t = Math.max(e.inputs.length, e.outputs.length);
 	return Math.max(60, 32 + t * 18 + 16);
 }
-function Df(e) {
+function Ef(e) {
 	return e.type === "NodeReroute" ? {
 		w: 12,
 		h: 12
 	} : {
 		w: e.width,
-		h: Ef(e)
+		h: Tf(e)
 	};
 }
-function Of(e) {
+function Df(e) {
 	let t = e.nodes.filter((e) => e.type === "NodeFrame");
 	if (t.length === 0) return [];
 	let n = /* @__PURE__ */ new Map();
@@ -8151,7 +8149,7 @@ function Of(e) {
 		if (t.length === 0) continue;
 		let i = Infinity, a = Infinity, o = -Infinity, s = -Infinity;
 		for (let e of t) {
-			let { w: t, h: n } = Df(e);
+			let { w: t, h: n } = Ef(e);
 			i = Math.min(i, e.position.x), a = Math.min(a, e.position.y), o = Math.max(o, e.position.x + t), s = Math.max(s, e.position.y + n);
 		}
 		Number.isFinite(i) && r.push({
@@ -8174,7 +8172,7 @@ function Of(e) {
 	}
 	return r;
 }
-function kf(e, t) {
+function Of(e, t) {
 	if (e.type === "NodeReroute") {
 		let t = e.outputs[0]?.color ?? e.inputs[0]?.color ?? "#888888";
 		return {
@@ -8215,7 +8213,7 @@ function kf(e, t) {
 		}
 	};
 }
-function Af(e, t, n) {
+function kf(e, t, n) {
 	let r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
 	for (let e of n.nodes) r.set(e.id, []), i.set(e.id, []);
 	for (let e of n.edges) r.has(e.sourceNodeId) || r.set(e.sourceNodeId, []), i.has(e.targetNodeId) || i.set(e.targetNodeId, []), r.get(e.sourceNodeId).push(e.targetNodeId), i.get(e.targetNodeId).push(e.sourceNodeId);
@@ -8239,45 +8237,36 @@ function Af(e, t, n) {
 	for (let e of a) s.has(e) && l.add(e);
 	return l;
 }
-function jf(e) {
-	let t = new Set(e.edges.map((e) => e.targetSocketId)), n = Of(e), r = e.nodes.filter((e) => e.type !== "NodeFrame").map((e) => kf(e, t)), i = e.nodes.find((e) => e.type === "GeometryNodeSimulationInput"), a = e.nodes.find((e) => e.type === "GeometryNodeSimulationOutput"), o = r;
+function Af(e) {
+	let t = new Set(e.edges.map((e) => e.targetSocketId)), n = Df(e), r = e.nodes.filter((e) => e.type !== "NodeFrame").map((e) => Of(e, t)), i = e.nodes.find((e) => e.type === "GeometryNodeSimulationInput"), a = e.nodes.find((e) => e.type === "GeometryNodeSimulationOutput"), o = r;
 	if (i && a) {
-		let t = Af(i.id, a.id, e);
+		let t = kf(i.id, a.id, e);
 		if (t.size > 0) {
-			let n = new Map(e.nodes.map((e) => [e.id, e])), a = Infinity, s = Infinity, c = -Infinity, l = -Infinity;
+			let n = new Map(e.nodes.map((e) => [e.id, e])), s = Infinity, c = -Infinity;
 			for (let e of t) {
 				let t = n.get(e);
-				if (!t) continue;
-				let r = t.width, i = Ef(t);
-				a = Math.min(a, t.position.x), s = Math.min(s, t.position.y), c = Math.max(c, t.position.x + r), l = Math.max(l, t.position.y + i);
+				t && (s = Math.min(s, t.position.y), c = Math.max(c, t.position.y + Tf(t)));
 			}
-			if (Number.isFinite(a) && Number.isFinite(s) && Number.isFinite(c) && Number.isFinite(l)) {
-				let e = a - 64, n = s - 64, u = c - a + 128, d = l - s + 128, f = `zone:simulation:${i.id}`;
+			let l = i.position.x + i.width / 2, u = a.position.x + a.width / 2, d = Math.min(l, u), f = Math.max(l, u);
+			if (Number.isFinite(s) && Number.isFinite(c) && Number.isFinite(d) && Number.isFinite(f)) {
+				let e = d, t = s - 26, n = f - d, a = c - s + 52;
 				o = [{
-					id: f,
+					id: `zone:simulation:${i.id}`,
 					type: "simulationZone",
 					position: {
 						x: e,
-						y: n
+						y: t
 					},
 					draggable: !1,
 					selectable: !1,
 					connectable: !1,
-					data: { label: "Simulation" },
+					data: {},
 					style: {
-						width: u,
-						height: d,
+						width: n,
+						height: a,
 						zIndex: -10
 					}
-				}, ...r.map((r) => t.has(r.id) ? {
-					...r,
-					parentId: f,
-					extent: "parent",
-					position: {
-						x: r.position.x - e,
-						y: r.position.y - n
-					}
-				} : r)];
+				}, ...r];
 			}
 		}
 	}
@@ -8296,10 +8285,10 @@ function jf(e) {
 }
 //#endregion
 //#region src/gn/ir/curvePath.ts
-function Mf(e, t) {
+function jf(e, t) {
 	return Math.sqrt(e * e + t * t);
 }
-function Nf(e) {
+function Mf(e) {
 	let t = e.length, n = e.map(({ location: [n, r], handleType: i }, a) => {
 		let o = a > 0 ? e[a - 1].location : null, s = a < t - 1 ? e[a + 1].location : null;
 		if (i === "VECTOR") return {
@@ -8309,11 +8298,11 @@ function Nf(e) {
 		let c = 0, l = 0, u = 0, d = 0;
 		if (o && s) {
 			let e = n - o[0], t = r - o[1], i = s[0] - n, a = s[1] - r;
-			if (u = Mf(e, t), d = Mf(i, a), u > 1e-8 && d > 1e-8) {
-				let n = e / u + i / d, r = t / u + a / d, o = Mf(n, r);
+			if (u = jf(e, t), d = jf(i, a), u > 1e-8 && d > 1e-8) {
+				let n = e / u + i / d, r = t / u + a / d, o = jf(n, r);
 				o > 1e-8 && (c = n / o, l = r / o);
 			} else d > 1e-8 ? (c = (s[0] - n) / d, l = (s[1] - r) / d) : u > 1e-8 && (c = (n - o[0]) / u, l = (r - o[1]) / u);
-		} else s ? (d = Mf(s[0] - n, s[1] - r), d > 1e-8 && (c = (s[0] - n) / d, l = (s[1] - r) / d)) : o && (u = Mf(n - o[0], r - o[1]), u > 1e-8 && (c = (n - o[0]) / u, l = (r - o[1]) / u));
+		} else s ? (d = jf(s[0] - n, s[1] - r), d > 1e-8 && (c = (s[0] - n) / d, l = (s[1] - r) / d)) : o && (u = jf(n - o[0], r - o[1]), u > 1e-8 && (c = (n - o[0]) / u, l = (r - o[1]) / u));
 		let f = [n - c * u / 3, r - l * u / 3], p = [n + c * d / 3, r + l * d / 3];
 		if (i === "AUTO_CLAMPED") {
 			if (o) {
@@ -8358,7 +8347,7 @@ function Nf(e) {
 	}
 	return n;
 }
-function Pf(e, t, n, r, i, a, o) {
+function Nf(e, t, n, r, i, a, o) {
 	let s = r - t || 1, c = i - n || 1, l = (e) => (e - t) / s * a, u = (e) => (1 - (e - n) / c) * o;
 	if (e.length < 2) return {
 		strokePath: "",
@@ -8366,7 +8355,7 @@ function Pf(e, t, n, r, i, a, o) {
 		zeroLinePath: "",
 		dotPositions: []
 	};
-	let d = Nf(e), [f, p] = e[0].location, m = `M ${l(f).toFixed(2)} ${u(p).toFixed(2)}`;
+	let d = Mf(e), [f, p] = e[0].location, m = `M ${l(f).toFixed(2)} ${u(p).toFixed(2)}`;
 	for (let t = 0; t < e.length - 1; t++) {
 		let n = d[t].right, r = d[t + 1].left, [i, a] = e[t + 1].location;
 		m += ` C ${l(n[0]).toFixed(2)} ${u(n[1]).toFixed(2)},`, m += ` ${l(r[0]).toFixed(2)} ${u(r[1]).toFixed(2)},`, m += ` ${l(i).toFixed(2)} ${u(a).toFixed(2)}`;
@@ -8381,7 +8370,7 @@ function Pf(e, t, n, r, i, a, o) {
 }
 //#endregion
 //#region src/gn/components/ColorRampViz.tsx
-function Ff([e, t, n]) {
+function Pf([e, t, n]) {
 	let r = Math.max(e, t, n), i = r - Math.min(e, t, n), a = 0;
 	i !== 0 && (a = r === e ? (t - n) / i % 6 : r === t ? (n - e) / i + 2 : (e - t) / i + 4, a /= 6, a < 0 && (a += 1));
 	let o = r === 0 ? 0 : i / r;
@@ -8391,7 +8380,7 @@ function Ff([e, t, n]) {
 		r
 	];
 }
-function If([e, t, n]) {
+function Ff([e, t, n]) {
 	if (t === 0) return [
 		n,
 		n,
@@ -8431,7 +8420,7 @@ function If([e, t, n]) {
 		];
 	}
 }
-function Lf([e, t, n]) {
+function If([e, t, n]) {
 	let r = Math.max(e, t, n), i = Math.min(e, t, n), a = (r + i) / 2, o = r - i, s = 0, c = 0;
 	return o !== 0 && (c = a > .5 ? o / (2 - r - i) : o / (r + i), s = r === e ? (t - n) / o % 6 : r === t ? (n - e) / o + 2 : (e - t) / o + 4, s /= 6, s < 0 && (s += 1)), [
 		s,
@@ -8439,7 +8428,7 @@ function Lf([e, t, n]) {
 		a
 	];
 }
-function Rf([e, t, n]) {
+function Lf([e, t, n]) {
 	if (t === 0) return [
 		n,
 		n,
@@ -8452,9 +8441,9 @@ function Rf([e, t, n]) {
 		a(e - 1 / 3)
 	];
 }
-var zf = (e) => e < 1 ? e : e - 1;
-function Bf(e, t, n, r, i) {
-	let a = zf((r % 1 + 1) % 1), o = zf((i % 1 + 1) % 1), s = 0;
+var Rf = (e) => e < 1 ? e : e - 1;
+function zf(e, t, n, r, i) {
+	let a = Rf((r % 1 + 1) % 1), o = Rf((i % 1 + 1) % 1), s = 0;
 	switch (e) {
 		case "NEAR":
 			a < o && o - a > .5 ? s = 1 : a > o && o - a < -.5 && (s = 2);
@@ -8470,9 +8459,9 @@ function Bf(e, t, n, r, i) {
 			break;
 	}
 	let c = (e, r) => t * e + n * r;
-	return s === 1 ? zf(c(a + 1, o)) : s === 2 ? zf(c(a, o + 1)) : c(a, o);
+	return s === 1 ? Rf(c(a + 1, o)) : s === 2 ? Rf(c(a, o + 1)) : c(a, o);
 }
-function Vf(e, t) {
+function Bf(e, t) {
 	let n = [...e.stops].sort((e, t) => e.position - t.position);
 	if (n.length === 0) return [
 		0,
@@ -8492,7 +8481,7 @@ function Vf(e, t) {
 	r === "EASE" && (c = 3 * c * c - 2 * c * c * c);
 	let l = c, u = 1 - c, d = u * a.color[3] + l * o.color[3];
 	if (e.colorMode === "HSV" || e.colorMode === "HSL") {
-		let t = e.colorMode === "HSV" ? Ff : Lf, n = e.colorMode === "HSV" ? If : Rf, r = t([
+		let t = e.colorMode === "HSV" ? Pf : If, n = e.colorMode === "HSV" ? Ff : Lf, r = t([
 			a.color[0],
 			a.color[1],
 			a.color[2]
@@ -8501,7 +8490,7 @@ function Vf(e, t) {
 			o.color[1],
 			o.color[2]
 		]), [s, c, f] = n([
-			Bf(e.hueInterpolation, l, u, i[0], r[0]),
+			zf(e.hueInterpolation, l, u, i[0], r[0]),
 			u * r[1] + l * i[1],
 			u * r[2] + l * i[2]
 		]);
@@ -8519,25 +8508,25 @@ function Vf(e, t) {
 		d
 	];
 }
-function Hf(e) {
+function Vf(e) {
 	let t = Math.min(1, Math.max(0, e));
 	return t <= .0031308 ? t * 12.92 : 1.055 * t ** (1 / 2.4) - .055;
 }
-function Uf([e, t, n, r]) {
-	let i = (e) => Math.round(Hf(e) * 255);
+function Hf([e, t, n, r]) {
+	let i = (e) => Math.round(Vf(e) * 255);
 	return `rgba(${i(e)}, ${i(t)}, ${i(n)}, ${r.toFixed(3)})`;
 }
-var Wf = {
+var Uf = {
 	NEAR: "Near",
 	FAR: "Far",
 	CW: "CW",
 	CCW: "CCW"
-}, Gf = 64;
-function Kf({ data: e, width: t }) {
+}, Wf = 64;
+function Gf({ data: e, width: t }) {
 	let n = [];
-	for (let t = 0; t <= Gf; t++) {
-		let r = t / Gf;
-		n.push(`${Uf(Vf(e, r))} ${(r * 100).toFixed(1)}%`);
+	for (let t = 0; t <= Wf; t++) {
+		let r = t / Wf;
+		n.push(`${Hf(Bf(e, r))} ${(r * 100).toFixed(1)}%`);
 	}
 	let r = `linear-gradient(to right, ${n.join(", ")})`, i = [...e.stops].sort((e, t) => e.position - t.position), a = i[i.length - 1];
 	return /* @__PURE__ */ _("div", {
@@ -8551,7 +8540,7 @@ function Kf({ data: e, width: t }) {
 					children: e.colorMode
 				}), /* @__PURE__ */ g("span", {
 					className: "gn-color-ramp__select",
-					children: Wf[e.hueInterpolation] ?? e.hueInterpolation
+					children: Uf[e.hueInterpolation] ?? e.hueInterpolation
 				})]
 			}),
 			/* @__PURE__ */ _("div", {
@@ -8571,7 +8560,7 @@ function Kf({ data: e, width: t }) {
 					children: ["Pos ", a.position.toFixed(3)]
 				}), /* @__PURE__ */ g("span", {
 					className: "gn-color-ramp__swatch",
-					style: { background: Uf(a.color) }
+					style: { background: Hf(a.color) }
 				})]
 			})
 		]
@@ -8579,18 +8568,18 @@ function Kf({ data: e, width: t }) {
 }
 //#endregion
 //#region src/gn/components/groupNavContext.ts
-var qf = t(null);
-function Jf() {
-	return o(qf);
+var Kf = t(null);
+function qf() {
+	return o(Kf);
 }
 //#endregion
 //#region src/gn/components/GenericGNNode.tsx
-var Yf = [
+var Jf = [
 	"X",
 	"Y",
 	"Z",
 	"W"
-], Xf = {
+], Yf = {
 	FLOAT: "Float",
 	INT: "Integer",
 	VECTOR: "Vector",
@@ -8598,7 +8587,7 @@ var Yf = [
 	STRING: "String",
 	BOOLEAN: "Boolean",
 	ROTATION: "Rotation"
-}, Zf = {
+}, Xf = {
 	EQUAL: "Equal",
 	NOT_EQUAL: "Not Equal",
 	LESS_THAN: "Less Than",
@@ -8644,10 +8633,10 @@ var Yf = [
 	RADIANS: "To Radians",
 	DEGREES: "To Degrees"
 };
-function Qf(e, t) {
-	return e === "data_type" ? Xf[t] ?? t : e === "operation" ? Zf[t] ?? t : e === "use_clamp" ? "Clamp" : t;
+function Zf(e, t) {
+	return e === "data_type" ? Yf[t] ?? t : e === "operation" ? Xf[t] ?? t : e === "use_clamp" ? "Clamp" : t;
 }
-function $f(e) {
+function Qf(e) {
 	switch (e) {
 		case "LINE": return "gn-socket--line";
 		case "DIAMOND": return "gn-socket--diamond";
@@ -8656,55 +8645,55 @@ function $f(e) {
 		default: return "gn-socket--circle";
 	}
 }
-function ep(e) {
+function $f(e) {
 	return e === "ROTATION" ? "°" : e === "FLOAT" ? " m" : "";
 }
-function tp(e) {
+function ep(e) {
 	return parseFloat(e.toFixed(3)).toString();
 }
-function np(e, t) {
-	return typeof e == "boolean" ? e ? "True" : "False" : typeof e == "string" ? e : `${tp(e)}${ep(t)}`;
+function tp(e, t) {
+	return typeof e == "boolean" ? e ? "True" : "False" : typeof e == "string" ? e : `${ep(e)}${$f(t)}`;
 }
-function rp(e) {
+function np(e) {
 	return Math.round(Math.min(1, Math.max(0, e)) * 255);
 }
-function ip(e) {
+function rp(e) {
 	let [t, n, r, i = 1] = e.values;
 	return /* @__PURE__ */ g("div", {
 		className: "gn-node__color-swatch",
-		style: { background: `rgba(${rp(t)},${rp(n)},${rp(r)},${i.toFixed(2)})` }
+		style: { background: `rgba(${np(t)},${np(n)},${np(r)},${i.toFixed(2)})` }
 	});
 }
-function ap(e) {
-	if (e.dataType === "RGBA") return /* @__PURE__ */ g(ip, { values: e.values });
-	let t = ep(e.dataType);
+function ip(e) {
+	if (e.dataType === "RGBA") return /* @__PURE__ */ g(rp, { values: e.values });
+	let t = $f(e.dataType);
 	return /* @__PURE__ */ g("div", {
 		className: "gn-node__vec-block",
 		children: e.values.slice(0, 4).map((e, n) => /* @__PURE__ */ _("div", {
 			className: "gn-node__vec-row",
 			children: [/* @__PURE__ */ g("span", {
 				className: "gn-node__vec-label",
-				children: Yf[n]
+				children: Jf[n]
 			}), /* @__PURE__ */ _("span", {
 				className: "gn-node__vec-value",
-				children: [tp(e), t]
+				children: [ep(e), t]
 			})]
 		}, n))
 	});
 }
-function op({ properties: e }) {
+function ap({ properties: e }) {
 	let t = Object.entries(e);
 	return t.length === 0 ? null : /* @__PURE__ */ g("div", {
 		className: "gn-node__props",
 		children: t.map(([e, t]) => /* @__PURE__ */ g("div", {
 			className: "gn-node__prop-row",
-			children: Qf(e, t)
+			children: Zf(e, t)
 		}, e))
 	});
 }
-var sp = 120, cp = 6;
-function lp({ curve: e, width: t }) {
-	let n = Math.max(10, t - cp * 2), r = sp, { strokePath: i, fillPath: a, zeroLinePath: o, dotPositions: s } = Pf(e.points, e.clipMinX, e.clipMinY, e.clipMaxX, e.clipMaxY, n, r);
+var op = 120, sp = 6;
+function cp({ curve: e, width: t }) {
+	let n = Math.max(10, t - sp * 2), r = op, { strokePath: i, fillPath: a, zeroLinePath: o, dotPositions: s } = Nf(e.points, e.clipMinX, e.clipMinY, e.clipMaxX, e.clipMaxY, n, r);
 	return /* @__PURE__ */ g("div", {
 		className: "gn-node__curve-wrap",
 		children: /* @__PURE__ */ _("svg", {
@@ -8735,7 +8724,7 @@ function lp({ curve: e, width: t }) {
 		})
 	});
 }
-function up(e) {
+function lp(e) {
 	let { socket: t, position: n, type: r, align: i, suppressDefault: a } = e, o = t.name.trim().length === 0, s = !a && !t.hideValue && t.defaultValue?.kind === "scalar";
 	return /* @__PURE__ */ _("div", {
 		className: `gn-node__socket-row gn-node__socket-row--${i}`,
@@ -8744,7 +8733,7 @@ function up(e) {
 				id: t.id,
 				type: r,
 				position: n,
-				className: `gn-socket ${$f(t.displayShape)}`,
+				className: `gn-socket ${Qf(t.displayShape)}`,
 				style: {
 					top: "50%",
 					background: t.color,
@@ -8757,15 +8746,15 @@ function up(e) {
 			}),
 			s && t.defaultValue?.kind === "scalar" ? /* @__PURE__ */ g("span", {
 				className: "gn-node__value",
-				children: np(t.defaultValue.value, t.dataType)
+				children: tp(t.defaultValue.value, t.dataType)
 			}) : null
 		]
 	});
 }
-function dp(e, t) {
+function up(e, t) {
 	return !t && !e.hideValue && e.defaultValue?.kind === "vec";
 }
-function fp() {
+function dp() {
 	return /* @__PURE__ */ _("div", {
 		className: "gn-node__stack",
 		"aria-hidden": "true",
@@ -8776,8 +8765,8 @@ function fp() {
 		]
 	});
 }
-function pp(e) {
-	let t = e.data, n = Jf(), r = new Set(t.connectedInputIds ?? []), i = t.outputs.filter((e) => e.enabled), a = t.inputs.filter((e) => e.enabled), o = t.groupTreeId, s = o !== void 0 && t.groupTreeName !== void 0 && !!n;
+function fp(e) {
+	let t = e.data, n = qf(), r = new Set(t.connectedInputIds ?? []), i = t.outputs.filter((e) => e.enabled), a = t.inputs.filter((e) => e.enabled), o = t.groupTreeId, s = o !== void 0 && t.groupTreeName !== void 0 && !!n;
 	return /* @__PURE__ */ _("div", {
 		className: `gn-node${s ? " gn-node--group nodrag" : ""}`,
 		onClick: s ? () => n.openGroup(o) : void 0,
@@ -8792,35 +8781,35 @@ function pp(e) {
 					children: t.label
 				})
 			}),
-			s && /* @__PURE__ */ g(fp, {}),
-			t.properties && /* @__PURE__ */ g(op, { properties: t.properties }),
-			t.floatCurve && /* @__PURE__ */ g(lp, {
+			s && /* @__PURE__ */ g(dp, {}),
+			t.properties && /* @__PURE__ */ g(ap, { properties: t.properties }),
+			t.floatCurve && /* @__PURE__ */ g(cp, {
 				curve: t.floatCurve,
 				width: t.width
 			}),
 			/* @__PURE__ */ _("div", {
 				className: "gn-node__body",
 				children: [
-					i.map((e) => /* @__PURE__ */ g(up, {
+					i.map((e) => /* @__PURE__ */ g(lp, {
 						socket: e,
 						position: Y.Right,
 						type: "source",
 						align: "right",
 						suppressDefault: !0
 					}, e.id)),
-					t.colorRamp && /* @__PURE__ */ g(Kf, {
+					t.colorRamp && /* @__PURE__ */ g(Gf, {
 						data: t.colorRamp,
 						width: t.width
 					}),
 					a.map((e) => {
 						let t = r.has(e.id);
-						return /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g(up, {
+						return /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g(lp, {
 							socket: e,
 							position: Y.Left,
 							type: "target",
 							align: "left",
 							suppressDefault: t
-						}), dp(e, t) ? /* @__PURE__ */ g(ap, {
+						}), up(e, t) ? /* @__PURE__ */ g(ip, {
 							values: e.defaultValue.values,
 							dataType: e.dataType
 						}) : null] }, e.id);
@@ -8832,7 +8821,7 @@ function pp(e) {
 }
 //#endregion
 //#region src/gn/components/RerouteNode.tsx
-function mp(e) {
+function pp(e) {
 	let t = e.data;
 	return /* @__PURE__ */ _("div", {
 		className: "gn-reroute",
@@ -8852,34 +8841,22 @@ function mp(e) {
 }
 //#endregion
 //#region src/gn/components/SimulationZoneFrame.tsx
-function hp(e) {
-	let t = e.data;
+function mp() {
 	return /* @__PURE__ */ g("div", {
 		className: "gn-sim-zone",
 		style: {
 			width: "100%",
 			height: "100%",
 			borderRadius: 10,
-			border: "2px solid rgba(170, 90, 255, 0.75)",
-			background: "rgba(170, 90, 255, 0.10)",
-			boxShadow: "0 0 0 1px rgba(30, 10, 50, 0.30) inset",
+			border: "1.5px solid rgba(150, 104, 140, 0.5)",
+			background: "rgba(124, 58, 96, 0.16)",
 			pointerEvents: "none"
-		},
-		children: /* @__PURE__ */ g("div", {
-			style: {
-				padding: "6px 10px",
-				fontSize: 12,
-				color: "rgba(235, 220, 255, 0.95)",
-				textShadow: "0 1px 0 rgba(0,0,0,0.35)",
-				userSelect: "none"
-			},
-			children: t?.label ?? "Simulation"
-		})
+		}
 	});
 }
 //#endregion
 //#region src/gn/components/NodeFrame.tsx
-function gp(e) {
+function hp(e) {
 	let t = e.data;
 	return /* @__PURE__ */ g("div", {
 		className: "gn-node-frame",
@@ -8909,53 +8886,53 @@ function gp(e) {
 }
 //#endregion
 //#region src/gn/components/GeometryNodesFlow.tsx
-var _p = {
-	gnNode: pp,
-	rerouteNode: mp,
-	simulationZone: hp,
-	nodeFrame: gp
-}, vp = { padding: .08 };
-function yp(e) {
-	let { nodes: t, edges: n, jsonText: r, breadcrumbs: i, onNavigate: o, onSelectionIds: s, onCopiedMagicString: l, interaction: u = "always" } = e, { fitView: p, getNodes: m, getNodesBounds: h } = ml(), v = bd(), y = d(null), b = d(!1), x = d([]), [S, C] = f(null), [w, D] = f(!1), [O, k] = f(!1), A = d(null), [j, M] = f("mouse"), [N, P] = f(!1), [F, I] = f(!1), L = d([]), [R, ee, z] = _d(t), [B, V, H] = vd(n), [U, W] = f(void 0);
+var gp = {
+	gnNode: fp,
+	rerouteNode: pp,
+	simulationZone: mp,
+	nodeFrame: hp
+}, _p = { padding: .08 };
+function vp(e) {
+	let { nodes: t, edges: n, jsonText: r, breadcrumbs: i, onNavigate: o, onSelectionIds: s, onCopiedMagicString: l, interaction: u = "always" } = e, { fitView: p, getNodes: m, getNodesBounds: h } = ml(), v = bd(), y = d(null), b = d(!1), x = d([]), [S, C] = f(null), [w, D] = f(!1), [O, k] = f(!1), A = d(null), [j, M] = f("mouse"), N = d(-Infinity), [P, F] = f(!1), [I, L] = f(!1), R = d([]), [ee, z, B] = _d(t), [V, H, U] = vd(n), [W, te] = f(void 0);
 	c(() => {
 		if (!v) return;
 		let e = h(m());
-		W([[e.x, e.y], [e.x + e.width, e.y + e.height]]);
+		te([[e.x, e.y], [e.x + e.width, e.y + e.height]]);
 	}, [
 		v,
 		t,
 		m,
 		h
 	]), c(() => {
-		ee(t), s?.([]), b.current = !1, p(vp);
+		z(t), s?.([]), b.current = !1, p(_p);
 	}, [
 		t,
-		ee,
+		z,
 		s,
 		p
 	]), c(() => {
-		V(n);
-	}, [n, V]), c(() => {
+		H(n);
+	}, [n, H]), c(() => {
 		let e = y.current;
 		if (!e) return;
 		let t = new ResizeObserver(() => {
-			b.current || p(vp);
+			b.current || p(_p);
 		});
 		return t.observe(e), () => t.disconnect();
 	}, [p]);
-	let te = a((e) => {
+	let ne = a((e) => {
 		e && (b.current = !0);
-	}, []), ne = a(({ nodes: e }) => {
+	}, []), re = a(({ nodes: e }) => {
 		let t = e.map((e) => e.id);
 		x.current = t, s?.(t);
-	}, [s]), re = a((e) => {
+	}, [s]), ie = a((e) => {
 		e.preventDefault();
 		let t = y.current?.getBoundingClientRect();
 		C({
 			x: e.clientX - (t?.left ?? 0),
 			y: e.clientY - (t?.top ?? 0)
 		});
-	}, []), ie = a(async () => {
+	}, []), ae = a(async () => {
 		C(null);
 		try {
 			let e = JSON.parse(r), t = new Set(x.current.map(Number).filter(Number.isFinite)), n = t.size > 0 ? E(e, t) : e, i = await T(JSON.stringify(n));
@@ -8963,23 +8940,24 @@ function yp(e) {
 				l();
 				return;
 			}
-			L.current.forEach(clearTimeout), I(!1), P(!0), L.current = [setTimeout(() => I(!0), 2500), setTimeout(() => {
-				P(!1), I(!1);
+			R.current.forEach(clearTimeout), L(!1), F(!0), R.current = [setTimeout(() => L(!0), 2500), setTimeout(() => {
+				F(!1), L(!1);
 			}, 3e3)];
 		} catch {}
 	}, [r, l]);
-	c(() => () => L.current.forEach(clearTimeout), []), c(() => () => {
+	c(() => () => R.current.forEach(clearTimeout), []), c(() => () => {
 		A.current && clearTimeout(A.current);
 	}, []);
-	let G = u === "hybrid", ae = u === "always" || G && w, oe = ae && j === "mouse", se = ae && j === "trackpad", ce = [1], le = a((e) => {
+	let G = u === "hybrid", oe = u === "always" || G && w, se = oe && j === "mouse", ce = oe && j === "trackpad", le = [1], ue = a((e) => {
 		if (!e.ctrlKey) {
-			let t = e.deltaMode === 0 && (e.deltaX !== 0 || !Number.isInteger(e.deltaY) || Math.abs(e.deltaY) < 40) ? "trackpad" : "mouse";
+			e.deltaX !== 0 && (N.current = e.timeStamp);
+			let t = e.timeStamp - N.current < 400 ? "trackpad" : "mouse";
 			M((e) => e === t ? e : t);
 		}
 		G && !w && !e.ctrlKey && (k(!0), A.current && clearTimeout(A.current), A.current = setTimeout(() => k(!1), 1600));
-	}, [G, w]), ue = a((e) => {
+	}, [G, w]), de = a((e) => {
 		G && e.button === 0 && (D(!0), k(!1));
-	}, [G]), de = a(() => {
+	}, [G]), fe = a(() => {
 		G && D(!1);
 	}, [G]);
 	return c(() => {
@@ -8998,23 +8976,23 @@ function yp(e) {
 			height: "100%",
 			position: "relative"
 		},
-		onContextMenu: re,
-		onPointerDown: ue,
-		onPointerLeave: de,
-		onWheel: le,
+		onContextMenu: ie,
+		onPointerDown: de,
+		onPointerLeave: fe,
+		onWheel: ue,
 		children: [
 			/* @__PURE__ */ _(gd, {
-				nodes: R,
-				edges: B,
-				onNodesChange: z,
-				onEdgesChange: H,
-				onSelectionChange: ne,
-				onMoveStart: te,
-				nodeTypes: _p,
+				nodes: ee,
+				edges: V,
+				onNodesChange: B,
+				onEdgesChange: U,
+				onSelectionChange: re,
+				onMoveStart: ne,
+				nodeTypes: gp,
 				fitView: !0,
-				fitViewOptions: vp,
+				fitViewOptions: _p,
 				minZoom: .2,
-				translateExtent: U,
+				translateExtent: W,
 				nodesDraggable: !1,
 				nodesConnectable: !1,
 				elementsSelectable: !0,
@@ -9024,10 +9002,10 @@ function yp(e) {
 				selectionOnDrag: !0,
 				selectionMode: Ca.Partial,
 				connectOnClick: !1,
-				panOnDrag: ce,
-				zoomOnScroll: oe,
-				panOnScroll: se,
-				preventScrolling: ae,
+				panOnDrag: le,
+				zoomOnScroll: se,
+				panOnScroll: ce,
+				preventScrolling: oe,
 				zoomOnDoubleClick: !1,
 				children: [
 					/* @__PURE__ */ g(Dd, {
@@ -9050,7 +9028,7 @@ function yp(e) {
 							className: "gn-top-left",
 							children: [/* @__PURE__ */ _("span", {
 								className: "gn-version-badge",
-								children: ["node-web-render v", "0.3.19"]
+								children: ["node-web-render v", "0.3.21"]
 							}), i.length > 1 ? /* @__PURE__ */ g("nav", {
 								className: "gn-breadcrumbs",
 								"aria-label": "Node group path",
@@ -9091,31 +9069,31 @@ function yp(e) {
 					type: "button",
 					className: "gn-context-menu__item",
 					role: "menuitem",
-					onClick: ie,
+					onClick: ae,
 					children: "Copy selected nodes to Tree Clipper magic string"
 				})
 			}) : null,
-			N || F ? /* @__PURE__ */ g("div", {
-				className: `gn-context-toast${F ? " gnwr-leaving" : ""}`,
+			P || I ? /* @__PURE__ */ g("div", {
+				className: `gn-context-toast${I ? " gnwr-leaving" : ""}`,
 				role: "status",
 				children: "Copied Tree Clipper magic string"
 			}) : null
 		]
 	});
 }
-function bp(e) {
+function yp(e) {
 	let { jsonText: t, showHeader: n = !0, onSelectionChange: r, onCopiedMagicString: i, interaction: o = "always" } = e, [s, l] = f({
 		json: t,
 		ids: []
 	}), d = u(() => {
 		if (!t.trim()) return null;
 		try {
-			let { rootId: e, trees: n } = Sf(JSON.parse(t)), r = {};
+			let { rootId: e, trees: n } = xf(JSON.parse(t)), r = {};
 			for (let e of Object.values(n)) {
-				let t = Tf(e);
+				let t = wf(e);
 				r[t.id] = {
 					graph: t,
-					flow: jf(t)
+					flow: Af(t)
 				};
 			}
 			return {
@@ -9179,9 +9157,9 @@ function bp(e) {
 				className: "flow-error",
 				role: "alert",
 				children: [/* @__PURE__ */ g("strong", { children: "Parse error" }), /* @__PURE__ */ g("span", { children: d.error })]
-			}) : m ? /* @__PURE__ */ g(qf.Provider, {
+			}) : m ? /* @__PURE__ */ g(Kf.Provider, {
 				value: v,
-				children: /* @__PURE__ */ g(fd, { children: /* @__PURE__ */ g(yp, {
+				children: /* @__PURE__ */ g(fd, { children: /* @__PURE__ */ g(vp, {
 					nodes: m.flow.nodes,
 					edges: m.flow.edges,
 					jsonText: t,
@@ -9203,7 +9181,7 @@ function bp(e) {
 }
 //#endregion
 //#region src/components/TreeClipperLogo.tsx
-function xp({ className: e }) {
+function bp({ className: e }) {
 	return /* @__PURE__ */ _("svg", {
 		viewBox: "0 0 256 256",
 		className: e,
@@ -9264,7 +9242,7 @@ function xp({ className: e }) {
 }
 //#endregion
 //#region src/embed.tsx
-function Sp(e) {
+function xp(e) {
 	let { payload: t } = e, [n, r] = f(""), [i, a] = f(null), [o, s] = f(!0), [l, u] = f([]), [p, m] = f(!1), [v, y] = f(!1), b = d(!1), S = d(!1), C = d(null), w = d(null), D = d(null), O = () => {
 		!S.current || b.current || (y(!0), D.current && clearTimeout(D.current), D.current = setTimeout(() => {
 			m(!1), y(!1);
@@ -9308,7 +9286,7 @@ function Sp(e) {
 				className: "gnwr-loading",
 				role: "status",
 				"aria-live": "polite",
-				children: [/* @__PURE__ */ g(xp, { className: "gnwr-loading__logo" }), /* @__PURE__ */ g("span", {
+				children: [/* @__PURE__ */ g(bp, { className: "gnwr-loading__logo" }), /* @__PURE__ */ g("span", {
 					className: "gnwr-loading__label",
 					children: "Loading graph…"
 				})]
@@ -9317,7 +9295,7 @@ function Sp(e) {
 				role: "alert",
 				children: [/* @__PURE__ */ g("strong", { children: "Decode error" }), /* @__PURE__ */ g("span", { children: i })]
 			}) : /* @__PURE__ */ _(h, { children: [
-				/* @__PURE__ */ g(bp, {
+				/* @__PURE__ */ g(yp, {
 					jsonText: n,
 					showHeader: !1,
 					interaction: "hybrid",
@@ -9343,7 +9321,7 @@ function Sp(e) {
 							strokeLinecap: "round",
 							strokeLinejoin: "round"
 						})
-					}), /* @__PURE__ */ g("span", { children: "Copied!" })] }) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(xp, { className: "gnwr-copy-button__logo" }), /* @__PURE__ */ g("span", { children: l.length > 0 ? `Copy Magic String of ${l.length} selected node${l.length === 1 ? "" : "s"}` : "Copy TreeClipper Magic String" })] })
+					}), /* @__PURE__ */ g("span", { children: "Copied!" })] }) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(bp, { className: "gnwr-copy-button__logo" }), /* @__PURE__ */ g("span", { children: l.length > 0 ? `Copy Magic String of ${l.length} selected node${l.length === 1 ? "" : "s"}` : "Copy TreeClipper Magic String" })] })
 				}),
 				(p || v) && /* @__PURE__ */ _("div", {
 					className: `gnwr-copy-toast${v ? " gnwr-leaving" : ""}`,
@@ -9368,22 +9346,22 @@ function Sp(e) {
 		})
 	});
 }
-var Cp = /* @__PURE__ */ new Map(), wp = null;
-function Tp(e, t) {
-	Cp.get(e)?.unmount();
+var Sp = /* @__PURE__ */ new Map(), Cp = null;
+function wp(e, t) {
+	Sp.get(e)?.unmount();
 	let r = m(e);
-	Cp.set(e, r), wp = e;
+	Sp.set(e, r), Cp = e;
 	let i = t.onClose;
-	return r.render(n(Sp, {
+	return r.render(n(xp, {
 		...t,
 		onClose: i ? () => {
-			Ep(e), i();
+			Tp(e), i();
 		} : void 0
-	})), () => Ep(e);
+	})), () => Tp(e);
 }
-function Ep(e) {
-	let t = e ?? wp;
-	t && (Cp.get(t)?.unmount(), Cp.delete(t), t === wp && (wp = null));
+function Tp(e) {
+	let t = e ?? Cp;
+	t && (Sp.get(t)?.unmount(), Sp.delete(t), t === Cp && (Cp = null));
 }
 //#endregion
-export { Sp as GraphView, Tp as mountGraphView, Ep as unmountGraphView };
+export { xp as GraphView, wp as mountGraphView, Tp as unmountGraphView };

package/dist/types/gn/components/SimulationZoneFrame.d.ts

@@ -1,2 +1 @@
-import { NodeProps } from '@xyflow/react';
-export declare function SimulationZoneFrame(props: NodeProps): import("react").JSX.Element;
+export declare function SimulationZoneFrame(): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonodes-web-render",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "description": "Browser-based viewer for Blender Geometry Nodes exported via Tree Clipper. Renders node trees as a read-only, Blender-styled graph.",
   "type": "module",
   "exports": {