geonodes-web-render 0.3.24 → 0.3.26

package/README.md

@@ -79,6 +79,14 @@ Set `showCopyButton={false}` (or `{ payload, showCopyButton: false }` for
 `mountGraphView`) to hide the "Copy TreeClipper Magic String" button and disable
 the right-click copy action. Defaults to `true`.
 
+Set `allowSelection={false}` to disable node selection (left-drag pans instead
+of box-selecting). Defaults to `true`. Combine both for a read-only pan/zoom
+viewer:
+
+```tsx
+<GraphView payload="TreeClipper::H4sI..." showCopyButton={false} allowSelection={false} />
+```
+
 > **Preview the embed locally.** The embed view (with the "Copy TreeClipper
 > Magic String" button and toast) isn't reachable from the standalone app, so a
 > dev-only harness page is included. Run `npm run dev` and open

package/dist/embed.js

@@ -265,18 +265,18 @@ function ie(e) {
 function ae() {
 	return this.firstElementChild;
 }
-function K(e) {
+function oe(e) {
 	return this.select(e == null ? ae : ie(typeof e == "function" ? e : ne(e)));
 }
 //#endregion
 //#region node_modules/d3-selection/src/selection/selectChildren.js
-var oe = Array.prototype.filter;
+var K = Array.prototype.filter;
 function se() {
 	return Array.from(this.children);
 }
 function ce(e) {
 	return function() {
-		return oe.call(this.children, e);
+		return K.call(this.children, e);
 	};
 }
 function le(e) {
@@ -773,7 +773,7 @@ It.prototype = Lt.prototype = {
 	constructor: It,
 	select: V,
 	selectAll: ee,
-	selectChild: K,
+	selectChild: oe,
 	selectChildren: le,
 	filter: ue,
 	data: ve,
@@ -6316,9 +6316,9 @@ function Hu({ id: e, edgesFocusable: t, edgesReconnectable: n, elementsSelectabl
 		s(e, { ...T });
 	} : void 0, ae = c ? (e) => {
 		c(e, { ...T });
-	} : void 0, K = l ? (e) => {
+	} : void 0, oe = l ? (e) => {
 		l(e, { ...T });
-	} : void 0, oe = p ? (e) => {
+	} : void 0, K = p ? (e) => {
 		p(e, { ...T });
 	} : void 0;
 	return g("svg", {
@@ -6341,8 +6341,8 @@ function Hu({ id: e, edgesFocusable: t, edgesReconnectable: n, elementsSelectabl
 			onDoubleClick: re,
 			onContextMenu: ie,
 			onMouseEnter: ae,
-			onMouseMove: K,
-			onMouseLeave: oe,
+			onMouseMove: oe,
+			onMouseLeave: K,
 			onKeyDown: A ? (t) => {
 				if (!w && ya.includes(t.key) && M) {
 					let { unselectNodesAndEdges: n, addSelectedEdges: r } = R.getState();
@@ -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: z, zoomOnDoubleClick: B, panOnDrag: V, autoPanOnSelection: H, onPaneClick: U, onPaneMouseEnter: W, onPaneMouseMove: G, onPaneMouseLeave: ee, onPaneScroll: te, onPaneContextMenu: ne, paneClickDistance: re, nodeClickDistance: ie, onEdgeContextMenu: ae, onEdgeMouseEnter: K, onEdgeMouseMove: oe, onEdgeMouseLeave: se, reconnectRadius: ce, onReconnect: le, onReconnectStart: ue, onReconnectEnd: de, noDragClassName: fe, noWheelClassName: pe, noPanClassName: me, disableKeyboardA11y: he, nodeExtent: ge, rfId: _e, viewport: ve, onViewportChange: ye }) {
+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: z, zoomOnDoubleClick: B, panOnDrag: V, autoPanOnSelection: H, onPaneClick: U, onPaneMouseEnter: W, onPaneMouseMove: G, onPaneMouseLeave: ee, onPaneScroll: te, onPaneContextMenu: ne, paneClickDistance: re, nodeClickDistance: ie, onEdgeContextMenu: ae, onEdgeMouseEnter: oe, onEdgeMouseMove: K, onEdgeMouseLeave: se, reconnectRadius: ce, onReconnect: le, onReconnectStart: ue, onReconnectEnd: de, noDragClassName: fe, noWheelClassName: pe, noPanClassName: me, disableKeyboardA11y: he, nodeExtent: ge, rfId: _e, viewport: ve, onViewportChange: ye }) {
 	return ad(e), ad(t), od(), Yu(n), Zu(ve), g(Xl, {
 		onPaneClick: U,
 		onPaneMouseEnter: W,
@@ -6631,8 +6631,8 @@ function sd({ nodeTypes: e, edgeTypes: t, onInit: n, onNodeClick: r, onEdgeClick
 				onReconnectEnd: de,
 				onlyRenderVisibleElements: D,
 				onEdgeContextMenu: ae,
-				onEdgeMouseEnter: K,
-				onEdgeMouseMove: oe,
+				onEdgeMouseEnter: oe,
+				onEdgeMouseMove: K,
 				onEdgeMouseLeave: se,
 				reconnectRadius: ce,
 				defaultMarkerColor: P,
@@ -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: z, onBeforeDelete: B, connectionMode: V, connectionLineType: H = Ta.Bezier, connectionLineStyle: U, connectionLineComponent: W, connectionLineContainerStyle: G, deleteKeyCode: ee = "Backspace", selectionKeyCode: te = "Shift", selectionOnDrag: ne = !1, selectionMode: re = Ca.Full, panActivationKeyCode: ie = "Space", multiSelectionKeyCode: ae = lo() ? "Meta" : "Control", zoomActivationKeyCode: K = lo() ? "Meta" : "Control", snapToGrid: oe, snapGrid: se, onlyRenderVisibleElements: ce = !1, selectNodesOnDrag: le, nodesDraggable: ue, autoPanOnNodeFocus: de, nodesConnectable: fe, nodesFocusable: pe, nodeOrigin: me = Fc, edgesFocusable: he, edgesReconnectable: ge, elementsSelectable: _e = !0, defaultViewport: ve = Ic, minZoom: ye = .5, maxZoom: be = 2, translateExtent: xe = va, preventScrolling: Se = !0, nodeExtent: Ce, defaultMarkerColor: we = "#b1b1b7", zoomOnScroll: Te = !0, zoomOnPinch: Ee = !0, panOnScroll: De = !1, panOnScrollSpeed: Oe = .5, panOnScrollMode: ke = Sa.Free, zoomOnDoubleClick: Ae = !0, panOnDrag: je = !0, onPaneClick: Me, onPaneMouseEnter: Ne, onPaneMouseMove: Pe, onPaneMouseLeave: Fe, onPaneScroll: Ie, onPaneContextMenu: Le, paneClickDistance: Re = 1, nodeClickDistance: ze = 0, children: Be, onReconnect: Ve, onReconnectStart: He, onReconnectEnd: Ue, onEdgeContextMenu: We, onEdgeDoubleClick: Ge, onEdgeMouseEnter: Ke, onEdgeMouseMove: qe, onEdgeMouseLeave: Je, reconnectRadius: Ye = 10, onNodesChange: Xe, onEdgesChange: Ze, noDragClassName: Qe = "nodrag", noWheelClassName: $e = "nowheel", noPanClassName: et = "nopan", fitView: tt, fitViewOptions: nt, connectOnClick: rt, attributionPosition: it, proOptions: at, defaultEdgeOptions: ot, elevateNodesOnSelect: st = !0, elevateEdgesOnSelect: ct = !1, disableKeyboardA11y: lt = !1, autoPanOnConnect: ut, autoPanOnNodeDrag: dt, autoPanOnSelection: ft = !0, autoPanSpeed: pt, connectionRadius: mt, isValidConnection: ht, onError: gt, style: _t, id: vt, nodeDragThreshold: yt, connectionDragThreshold: bt, viewport: xt, onViewportChange: St, width: Ct, height: wt, colorMode: Tt = "light", debug: Et, onScroll: Dt, ariaLabelConfig: Ot, zIndexMode: kt = "basic", ...At }, jt) {
+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: z, onBeforeDelete: B, connectionMode: V, connectionLineType: H = Ta.Bezier, connectionLineStyle: U, connectionLineComponent: W, connectionLineContainerStyle: G, deleteKeyCode: ee = "Backspace", selectionKeyCode: te = "Shift", selectionOnDrag: ne = !1, selectionMode: re = Ca.Full, panActivationKeyCode: ie = "Space", multiSelectionKeyCode: ae = lo() ? "Meta" : "Control", zoomActivationKeyCode: oe = lo() ? "Meta" : "Control", snapToGrid: K, snapGrid: se, onlyRenderVisibleElements: ce = !1, selectNodesOnDrag: le, nodesDraggable: ue, autoPanOnNodeFocus: de, nodesConnectable: fe, nodesFocusable: pe, nodeOrigin: me = Fc, edgesFocusable: he, edgesReconnectable: ge, elementsSelectable: _e = !0, defaultViewport: ve = Ic, minZoom: ye = .5, maxZoom: be = 2, translateExtent: xe = va, preventScrolling: Se = !0, nodeExtent: Ce, defaultMarkerColor: we = "#b1b1b7", zoomOnScroll: Te = !0, zoomOnPinch: Ee = !0, panOnScroll: De = !1, panOnScrollSpeed: Oe = .5, panOnScrollMode: ke = Sa.Free, zoomOnDoubleClick: Ae = !0, panOnDrag: je = !0, onPaneClick: Me, onPaneMouseEnter: Ne, onPaneMouseMove: Pe, onPaneMouseLeave: Fe, onPaneScroll: Ie, onPaneContextMenu: Le, paneClickDistance: Re = 1, nodeClickDistance: ze = 0, children: Be, onReconnect: Ve, onReconnectStart: He, onReconnectEnd: Ue, onEdgeContextMenu: We, onEdgeDoubleClick: Ge, onEdgeMouseEnter: Ke, onEdgeMouseMove: qe, onEdgeMouseLeave: Je, reconnectRadius: Ye = 10, onNodesChange: Xe, onEdgesChange: Ze, noDragClassName: Qe = "nodrag", noWheelClassName: $e = "nowheel", noPanClassName: et = "nopan", fitView: tt, fitViewOptions: nt, connectOnClick: rt, attributionPosition: it, proOptions: at, defaultEdgeOptions: ot, elevateNodesOnSelect: st = !0, elevateEdgesOnSelect: ct = !1, disableKeyboardA11y: lt = !1, autoPanOnConnect: ut, autoPanOnNodeDrag: dt, autoPanOnSelection: ft = !0, autoPanSpeed: pt, connectionRadius: mt, isValidConnection: ht, onError: gt, style: _t, id: vt, nodeDragThreshold: yt, connectionDragThreshold: bt, viewport: xt, onViewportChange: St, width: Ct, height: wt, colorMode: Tt = "light", debug: Et, onScroll: Dt, ariaLabelConfig: Ot, zIndexMode: kt = "basic", ...At }, jt) {
 	let Mt = vt || "1", Nt = Hc(Tt), Pt = a((e) => {
 		e.currentTarget.scrollTo({
 			top: 0,
@@ -7065,7 +7065,7 @@ function hd({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, className: i
 					nodeExtent: Ce,
 					onNodesChange: Xe,
 					onEdgesChange: Ze,
-					snapToGrid: oe,
+					snapToGrid: K,
 					snapGrid: se,
 					connectionMode: V,
 					translateExtent: xe,
@@ -7123,7 +7123,7 @@ function hd({ nodes: e, edges: t, defaultNodes: n, defaultEdges: r, className: i
 					deleteKeyCode: ee,
 					multiSelectionKeyCode: ae,
 					panActivationKeyCode: ie,
-					zoomActivationKeyCode: K,
+					zoomActivationKeyCode: oe,
 					onlyRenderVisibleElements: ce,
 					defaultViewport: ve,
 					translateExtent: xe,
@@ -7515,13 +7515,13 @@ function Xd({ style: e, className: t, nodeStrokeColor: n, nodeColor: r, nodeClas
 		P,
 		F
 	]);
-	let K = v ? (e) => {
+	let oe = v ? (e) => {
 		let [t, n] = ae.current?.pointer(e) || [0, 0];
 		v(e, {
 			x: t,
 			y: n
 		});
-	} : void 0, oe = y ? a((e, t) => {
+	} : void 0, K = y ? a((e, t) => {
 		let n = E.getState().nodeLookup.get(t).internals.userNode;
 		y(e, n);
 	}, []) : void 0, se = S ?? I["minimap.ariaLabel"];
@@ -7547,14 +7547,14 @@ function Xd({ style: e, className: t, nodeStrokeColor: n, nodeColor: r, nodeClas
 			role: "img",
 			"aria-labelledby": re,
 			ref: O,
-			onClick: K,
+			onClick: oe,
 			children: [
 				se && g("title", {
 					id: re,
 					children: se
 				}),
 				g(Wd, {
-					onClick: oe,
+					onClick: K,
 					nodeColor: r,
 					nodeStrokeColor: n,
 					nodeBorderRadius: o,
@@ -8178,7 +8178,7 @@ function Df(e) {
 	}
 	return r;
 }
-function Of(e, t) {
+function Of(e, t, n) {
 	if (e.type === "NodeReroute") {
 		let t = e.outputs[0]?.color ?? e.inputs[0]?.color ?? "#888888";
 		return {
@@ -8196,6 +8196,7 @@ function Of(e, t) {
 			}
 		};
 	}
+	let r = e.type === "NodeGroupInput" ? e.outputs.filter((e) => n.has(e.id)) : e.outputs;
 	return {
 		id: e.id,
 		type: "gnNode",
@@ -8209,7 +8210,7 @@ function Of(e, t) {
 			width: e.width,
 			headerColor: e.headerColor,
 			inputs: e.inputs,
-			outputs: e.outputs,
+			outputs: r,
 			connectedInputIds: e.inputs.filter((e) => t.has(e.id)).map((e) => e.id),
 			floatCurve: e.floatCurve,
 			colorRamp: e.colorRamp,
@@ -8244,20 +8245,20 @@ function kf(e, t, n) {
 	return l;
 }
 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 = kf(i.id, a.id, e);
+	let t = new Set(e.edges.map((e) => e.targetSocketId)), n = new Set(e.edges.map((e) => e.sourceSocketId)), r = Df(e), i = e.nodes.filter((e) => e.type !== "NodeFrame").map((e) => Of(e, t, n)), a = e.nodes.find((e) => e.type === "GeometryNodeSimulationInput"), o = e.nodes.find((e) => e.type === "GeometryNodeSimulationOutput"), s = i;
+	if (a && o) {
+		let t = kf(a.id, o.id, e);
 		if (t.size > 0) {
-			let n = new Map(e.nodes.map((e) => [e.id, e])), s = Infinity, c = -Infinity;
+			let n = new Map(e.nodes.map((e) => [e.id, e])), r = Infinity, c = -Infinity;
 			for (let e of t) {
 				let t = n.get(e);
-				t && (s = Math.min(s, t.position.y), c = Math.max(c, t.position.y + Tf(t)));
+				t && (r = Math.min(r, t.position.y), c = Math.max(c, t.position.y + Tf(t)));
 			}
-			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: `zone:simulation:${i.id}`,
+			let l = a.position.x + a.width / 2, u = o.position.x + o.width / 2, d = Math.min(l, u), f = Math.max(l, u);
+			if (Number.isFinite(r) && Number.isFinite(c) && Number.isFinite(d) && Number.isFinite(f)) {
+				let e = d, t = r - 26, n = f - d, o = c - r + 52;
+				s = [{
+					id: `zone:simulation:${a.id}`,
 					type: "simulationZone",
 					position: {
 						x: e,
@@ -8269,15 +8270,15 @@ function Af(e) {
 					data: {},
 					style: {
 						width: n,
-						height: a,
+						height: o,
 						zIndex: -10
 					}
-				}, ...r];
+				}, ...i];
 			}
 		}
 	}
 	return {
-		nodes: [...n, ...o],
+		nodes: [...r, ...s],
 		edges: e.edges.map((e) => ({
 			id: e.id,
 			source: e.sourceNodeId,
@@ -8899,129 +8900,129 @@ var gp = {
 	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", allowCopy: p = !0 } = e, { fitView: m, getNodes: h, getNodesBounds: v } = ml(), y = bd(), b = d(null), x = d(!1), S = d([]), [C, w] = f(null), [D, O] = f(!1), [k, A] = f(!1), j = d(null), [M, N] = f("mouse"), P = d(-Infinity), [F, I] = f(!1), [L, R] = f(!1), z = d([]), [B, V, H] = _d(t), [U, W, G] = vd(n), [ee, te] = f(void 0);
+	let { nodes: t, edges: n, jsonText: r, breadcrumbs: i, onNavigate: o, onSelectionIds: s, onCopiedMagicString: l, interaction: u = "always", allowCopy: p = !0, allowSelection: m = !0 } = e, { fitView: h, getNodes: v, getNodesBounds: y } = ml(), b = bd(), x = d(null), S = d(!1), C = d([]), [w, D] = f(null), [O, k] = f(!1), [A, j] = f(!1), M = d(null), [N, P] = f("mouse"), F = d(-Infinity), [I, L] = f(!1), [R, z] = f(!1), B = d([]), [V, H, U] = _d(t), [W, G, ee] = vd(n), [te, ne] = f(void 0);
 	c(() => {
-		if (!y) return;
-		let e = v(h());
-		te([[e.x, e.y], [e.x + e.width, e.y + e.height]]);
+		if (!b) return;
+		let e = y(v());
+		ne([[e.x, e.y], [e.x + e.width, e.y + e.height]]);
 	}, [
-		y,
+		b,
 		t,
-		h,
-		v
+		v,
+		y
 	]), c(() => {
-		V(t), s?.([]), x.current = !1, m(_p);
+		H(t), s?.([]), S.current = !1, h(_p);
 	}, [
 		t,
-		V,
+		H,
 		s,
-		m
+		h
 	]), c(() => {
-		W(n);
-	}, [n, W]), c(() => {
-		let e = b.current;
+		G(n);
+	}, [n, G]), c(() => {
+		let e = x.current;
 		if (!e) return;
 		let t = new ResizeObserver(() => {
-			x.current || m(_p);
+			S.current || h(_p);
 		});
 		return t.observe(e), () => t.disconnect();
-	}, [m]);
-	let ne = a((e) => {
-		e && (x.current = !0);
-	}, []), re = a(({ nodes: e }) => {
+	}, [h]);
+	let re = a((e) => {
+		e && (S.current = !0);
+	}, []), ie = a(({ nodes: e }) => {
 		let t = e.map((e) => e.id);
-		S.current = t, s?.(t);
-	}, [s]), ie = a((e) => {
+		C.current = t, s?.(t);
+	}, [s]), ae = a((e) => {
 		if (!p) return;
 		e.preventDefault();
-		let t = b.current?.getBoundingClientRect();
-		w({
+		let t = x.current?.getBoundingClientRect();
+		D({
 			x: e.clientX - (t?.left ?? 0),
 			y: e.clientY - (t?.top ?? 0)
 		});
-	}, [p]), ae = a(async () => {
-		w(null);
+	}, [p]), oe = a(async () => {
+		D(null);
 		try {
-			let e = JSON.parse(r), t = new Set(S.current.map(Number).filter(Number.isFinite)), n = t.size > 0 ? E(e, t) : e, i = await T(JSON.stringify(n));
+			let e = JSON.parse(r), t = new Set(C.current.map(Number).filter(Number.isFinite)), n = t.size > 0 ? E(e, t) : e, i = await T(JSON.stringify(n));
 			if (await navigator.clipboard.writeText(i), l) {
 				l();
 				return;
 			}
-			z.current.forEach(clearTimeout), R(!1), I(!0), z.current = [setTimeout(() => R(!0), 2500), setTimeout(() => {
-				I(!1), R(!1);
+			B.current.forEach(clearTimeout), z(!1), L(!0), B.current = [setTimeout(() => z(!0), 2500), setTimeout(() => {
+				L(!1), z(!1);
 			}, 3e3)];
 		} catch {}
 	}, [r, l]);
-	c(() => () => z.current.forEach(clearTimeout), []), c(() => () => {
-		j.current && clearTimeout(j.current);
+	c(() => () => B.current.forEach(clearTimeout), []), c(() => () => {
+		M.current && clearTimeout(M.current);
 	}, []);
-	let K = u === "hybrid", oe = u === "always" || K && D, se = oe && M === "mouse", ce = oe && M === "trackpad", le = [1];
+	let K = u === "hybrid", se = u === "always" || K && O, ce = se && N === "mouse", le = se && N === "trackpad", ue = m ? [1] : [0, 1], de = m;
 	c(() => {
-		let e = b.current;
+		let e = x.current;
 		if (!e) return;
 		let t = (e) => {
 			if (!e.ctrlKey) {
-				e.deltaX !== 0 && (P.current = e.timeStamp);
-				let t = e.timeStamp - P.current < 400 ? "trackpad" : "mouse";
-				N((e) => e === t ? e : t);
+				e.deltaX !== 0 && (F.current = e.timeStamp);
+				let t = e.timeStamp - F.current < 400 ? "trackpad" : "mouse";
+				P((e) => e === t ? e : t);
 			}
-			K && !D && !e.ctrlKey && (A(!0), j.current && clearTimeout(j.current), j.current = setTimeout(() => A(!1), 1600));
+			K && !O && !e.ctrlKey && (j(!0), M.current && clearTimeout(M.current), M.current = setTimeout(() => j(!1), 1600));
 		};
 		return e.addEventListener("wheel", t, {
 			capture: !0,
 			passive: !0
 		}), () => e.removeEventListener("wheel", t, { capture: !0 });
-	}, [K, D]);
-	let ue = a((e) => {
-		K && e.button === 0 && (O(!0), A(!1));
-	}, [K]), de = a(() => {
-		K && O(!1);
+	}, [K, O]);
+	let fe = a((e) => {
+		K && e.button === 0 && (k(!0), j(!1));
+	}, [K]), pe = a(() => {
+		K && k(!1);
 	}, [K]);
 	return c(() => {
-		if (!C) return;
-		let e = () => w(null), t = (e) => {
-			e.key === "Escape" && w(null);
+		if (!w) return;
+		let e = () => D(null), t = (e) => {
+			e.key === "Escape" && D(null);
 		};
 		return window.addEventListener("click", e), window.addEventListener("scroll", e, !0), window.addEventListener("keydown", t), () => {
 			window.removeEventListener("click", e), window.removeEventListener("scroll", e, !0), window.removeEventListener("keydown", t);
 		};
-	}, [C]), /* @__PURE__ */ _("div", {
-		ref: b,
-		className: `gn-canvas-wrapper${K && D ? " gn-canvas-wrapper--engaged" : ""}`,
+	}, [w]), /* @__PURE__ */ _("div", {
+		ref: x,
+		className: `gn-canvas-wrapper${K && O ? " gn-canvas-wrapper--engaged" : ""}`,
 		style: {
 			width: "100%",
 			height: "100%",
 			position: "relative"
 		},
-		onContextMenu: ie,
-		onPointerDown: ue,
-		onPointerLeave: de,
+		onContextMenu: ae,
+		onPointerDown: fe,
+		onPointerLeave: pe,
 		children: [
 			/* @__PURE__ */ _(gd, {
-				nodes: B,
-				edges: U,
-				onNodesChange: H,
-				onEdgesChange: G,
-				onSelectionChange: re,
-				onMoveStart: ne,
+				nodes: V,
+				edges: W,
+				onNodesChange: U,
+				onEdgesChange: ee,
+				onSelectionChange: ie,
+				onMoveStart: re,
 				nodeTypes: gp,
 				fitView: !0,
 				fitViewOptions: _p,
 				minZoom: .2,
-				translateExtent: ee,
+				translateExtent: te,
 				nodesDraggable: !1,
 				nodesConnectable: !1,
-				elementsSelectable: !0,
+				elementsSelectable: m,
 				nodesFocusable: !1,
 				edgesFocusable: !1,
 				selectNodesOnDrag: !1,
-				selectionOnDrag: !0,
+				selectionOnDrag: de,
 				selectionMode: Ca.Partial,
 				connectOnClick: !1,
-				panOnDrag: le,
-				zoomOnScroll: se,
-				panOnScroll: ce,
-				preventScrolling: oe,
+				panOnDrag: ue,
+				zoomOnScroll: ce,
+				panOnScroll: le,
+				preventScrolling: se,
 				zoomOnDoubleClick: !1,
 				children: [
 					/* @__PURE__ */ g(Dd, {
@@ -9030,7 +9031,7 @@ function vp(e) {
 						color: "var(--grid-dot, #3a3a3a)"
 					}),
 					/* @__PURE__ */ g(Id, { showInteractive: !1 }),
-					K && k ? /* @__PURE__ */ g(Dc, {
+					K && A ? /* @__PURE__ */ g(Dc, {
 						position: "bottom-center",
 						children: /* @__PURE__ */ g("div", {
 							className: "gn-zoom-hint",
@@ -9044,7 +9045,7 @@ function vp(e) {
 							className: "gn-top-left",
 							children: [/* @__PURE__ */ _("span", {
 								className: "gn-version-badge",
-								children: ["node-web-render v", "0.3.24"]
+								children: ["node-web-render v", "0.3.26"]
 							}), i.length > 1 ? /* @__PURE__ */ g("nav", {
 								className: "gn-breadcrumbs",
 								"aria-label": "Node group path",
@@ -9073,11 +9074,11 @@ function vp(e) {
 					})
 				]
 			}),
-			C ? /* @__PURE__ */ g("div", {
+			w ? /* @__PURE__ */ g("div", {
 				className: "gn-context-menu",
 				style: {
-					left: C.x,
-					top: C.y
+					left: w.x,
+					top: w.y
 				},
 				onClick: (e) => e.stopPropagation(),
 				role: "menu",
@@ -9085,12 +9086,12 @@ function vp(e) {
 					type: "button",
 					className: "gn-context-menu__item",
 					role: "menuitem",
-					onClick: ae,
+					onClick: oe,
 					children: "Copy selected nodes to Tree Clipper magic string"
 				})
 			}) : null,
-			F || L ? /* @__PURE__ */ g("div", {
-				className: `gn-context-toast${L ? " gnwr-leaving" : ""}`,
+			I || R ? /* @__PURE__ */ g("div", {
+				className: `gn-context-toast${R ? " gnwr-leaving" : ""}`,
 				role: "status",
 				children: "Copied Tree Clipper magic string"
 			}) : null
@@ -9098,10 +9099,10 @@ function vp(e) {
 	});
 }
 function yp(e) {
-	let { jsonText: t, showHeader: n = !0, onSelectionChange: r, onCopiedMagicString: i, interaction: o = "always", allowCopy: s = !0 } = e, [l, d] = f({
+	let { jsonText: t, showHeader: n = !0, onSelectionChange: r, onCopiedMagicString: i, interaction: o = "always", allowCopy: s = !0, allowSelection: l = !0 } = e, [d, p] = f({
 		json: t,
 		ids: []
-	}), p = u(() => {
+	}), m = u(() => {
 		if (!t.trim()) return null;
 		try {
 			let { rootId: e, trees: n } = xf(JSON.parse(t)), r = {};
@@ -9124,36 +9125,36 @@ function yp(e) {
 				error: e instanceof Error ? e.message : String(e)
 			};
 		}
-	}, [t]), m = u(() => {
-		if (!p?.views) return [];
-		let e = l.json === t ? l.ids : [], n = [p.rootId];
-		for (let t of e) p.views[t] && n.push(t);
+	}, [t]), h = u(() => {
+		if (!m?.views) return [];
+		let e = d.json === t ? d.ids : [], n = [m.rootId];
+		for (let t of e) m.views[t] && n.push(t);
 		return n;
 	}, [
-		p,
-		l,
+		m,
+		d,
 		t
-	]), h = p?.views ? p.views[m[m.length - 1]] : null, v = a((e) => {
-		d((n) => ({
+	]), v = m?.views ? m.views[h[h.length - 1]] : null, y = a((e) => {
+		p((n) => ({
 			json: t,
 			ids: n.json === t ? [...n.ids, e] : [e]
 		}));
-	}, [t]), y = u(() => ({ openGroup: v }), [v]);
+	}, [t]), b = u(() => ({ openGroup: y }), [y]);
 	c(() => {
-		if (m.length <= 1) return;
+		if (h.length <= 1) return;
 		function e(e) {
 			if (e.key !== "Tab" && e.key !== "Escape" || e.ctrlKey || e.metaKey || e.altKey) return;
 			let n = e.target;
-			n && (n.isContentEditable || n.tagName === "INPUT" || n.tagName === "TEXTAREA" || n.closest(".cm-editor")) || (e.preventDefault(), d({
+			n && (n.isContentEditable || n.tagName === "INPUT" || n.tagName === "TEXTAREA" || n.closest(".cm-editor")) || (e.preventDefault(), p({
 				json: t,
-				ids: m.slice(1, -1)
+				ids: h.slice(1, -1)
 			}));
 		}
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [m, t]);
-	let b = p?.views ? m.map((e) => ({
+	}, [h, t]);
+	let x = m?.views ? h.map((e) => ({
 		id: e,
-		label: p.views[e].graph.label
+		label: m.views[e].graph.label
 	})) : [];
 	return /* @__PURE__ */ _("div", {
 		className: "panel flow-panel",
@@ -9165,29 +9166,30 @@ function yp(e) {
 			}), /* @__PURE__ */ g("div", {
 				className: "panel-status",
 				"aria-live": "polite",
-				children: h ? `${h.graph.nodes.length} nodes, ${h.graph.edges.length} links` : null
+				children: v ? `${v.graph.nodes.length} nodes, ${v.graph.edges.length} links` : null
 			})]
 		}) : null, /* @__PURE__ */ g("div", {
 			className: "panel-body flow-panel__body",
-			children: p?.error ? /* @__PURE__ */ _("div", {
+			children: m?.error ? /* @__PURE__ */ _("div", {
 				className: "flow-error",
 				role: "alert",
-				children: [/* @__PURE__ */ g("strong", { children: "Parse error" }), /* @__PURE__ */ g("span", { children: p.error })]
-			}) : h ? /* @__PURE__ */ g(Kf.Provider, {
-				value: y,
+				children: [/* @__PURE__ */ g("strong", { children: "Parse error" }), /* @__PURE__ */ g("span", { children: m.error })]
+			}) : v ? /* @__PURE__ */ g(Kf.Provider, {
+				value: b,
 				children: /* @__PURE__ */ g(fd, { children: /* @__PURE__ */ g(vp, {
-					nodes: h.flow.nodes,
-					edges: h.flow.edges,
+					nodes: v.flow.nodes,
+					edges: v.flow.edges,
 					jsonText: t,
-					breadcrumbs: b,
-					onNavigate: (e) => d({
+					breadcrumbs: x,
+					onNavigate: (e) => p({
 						json: t,
-						ids: m.slice(1, e + 1)
+						ids: h.slice(1, e + 1)
 					}),
 					onSelectionIds: r,
 					onCopiedMagicString: i,
 					interaction: o,
-					allowCopy: s
+					allowCopy: s,
+					allowSelection: l
 				}) })
 			}) : /* @__PURE__ */ g("div", {
 				className: "flow-empty",
@@ -9260,38 +9262,38 @@ function bp({ className: e }) {
 //#endregion
 //#region src/embed.tsx
 function xp(e) {
-	let { payload: t, showCopyButton: n = !0 } = e, [r, i] = f(""), [a, o] = f(null), [s, l] = f(!0), [u, p] = f([]), [m, v] = f(!1), [y, b] = f(!1), S = d(!1), C = d(!1), w = d(null), D = d(null), O = d(null), k = () => {
-		!C.current || S.current || (b(!0), O.current && clearTimeout(O.current), O.current = setTimeout(() => {
-			v(!1), b(!1);
+	let { payload: t, showCopyButton: n = !0, allowSelection: r = !0 } = e, [i, a] = f(""), [o, s] = f(null), [l, u] = f(!0), [p, m] = f([]), [v, y] = f(!1), [b, S] = f(!1), C = d(!1), w = d(!1), D = d(null), O = d(null), k = d(null), A = () => {
+		!w.current || C.current || (S(!0), k.current && clearTimeout(k.current), k.current = setTimeout(() => {
+			y(!1), S(!1);
 		}, 500));
-	}, A = () => {
-		O.current && clearTimeout(O.current), b(!1), v(!0), C.current = !1, w.current && clearTimeout(w.current), w.current = setTimeout(() => {
-			C.current = !0, k();
+	}, j = () => {
+		k.current && clearTimeout(k.current), S(!1), y(!0), w.current = !1, D.current && clearTimeout(D.current), D.current = setTimeout(() => {
+			w.current = !0, A();
 		}, 3e3);
-	}, j = async () => {
+	}, M = async () => {
 		try {
-			let e = t, n = new Set(u.map(Number).filter(Number.isFinite));
+			let e = t, n = new Set(p.map(Number).filter(Number.isFinite));
 			if (n.size > 0) {
-				let t = E(JSON.parse(r), n);
+				let t = E(JSON.parse(i), n);
 				e = await T(JSON.stringify(t));
 			}
-			await navigator.clipboard.writeText(e), A();
+			await navigator.clipboard.writeText(e), j();
 		} catch {}
-	}, M = () => {
-		S.current = !0, D.current && clearTimeout(D.current), y && (O.current && clearTimeout(O.current), b(!1));
 	}, N = () => {
-		D.current && clearTimeout(D.current), D.current = setTimeout(() => {
-			S.current = !1, k();
+		C.current = !0, O.current && clearTimeout(O.current), b && (k.current && clearTimeout(k.current), S(!1));
+	}, P = () => {
+		O.current && clearTimeout(O.current), O.current = setTimeout(() => {
+			C.current = !1, A();
 		}, 150);
 	};
 	return c(() => () => {
-		w.current && clearTimeout(w.current), D.current && clearTimeout(D.current), O.current && clearTimeout(O.current);
+		D.current && clearTimeout(D.current), O.current && clearTimeout(O.current), k.current && clearTimeout(k.current);
 	}, []), c(() => {
 		let e = !1;
-		return l(!0), o(null), x(t).then((t) => {
-			e || (i(t), l(!1));
+		return u(!0), s(null), x(t).then((t) => {
+			e || (a(t), u(!1));
 		}).catch((t) => {
-			e || (o(t instanceof Error ? t.message : String(t)), l(!1));
+			e || (s(t instanceof Error ? t.message : String(t)), u(!1));
 		}), () => {
 			e = !0;
 		};
@@ -9299,7 +9301,7 @@ function xp(e) {
 		className: "geonodes-embed geonodes-embed--dark",
 		children: /* @__PURE__ */ g("div", {
 			className: "geonodes-embed__body",
-			children: s ? /* @__PURE__ */ _("div", {
+			children: l ? /* @__PURE__ */ _("div", {
 				className: "gnwr-loading",
 				role: "status",
 				"aria-live": "polite",
@@ -9307,25 +9309,26 @@ function xp(e) {
 					className: "gnwr-loading__label",
 					children: "Loading graph…"
 				})]
-			}) : a ? /* @__PURE__ */ _("div", {
+			}) : o ? /* @__PURE__ */ _("div", {
 				className: "flow-error",
 				role: "alert",
-				children: [/* @__PURE__ */ g("strong", { children: "Decode error" }), /* @__PURE__ */ g("span", { children: a })]
+				children: [/* @__PURE__ */ g("strong", { children: "Decode error" }), /* @__PURE__ */ g("span", { children: o })]
 			}) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(yp, {
-				jsonText: r,
+				jsonText: i,
 				showHeader: !1,
 				interaction: "hybrid",
-				onSelectionChange: p,
-				onCopiedMagicString: A,
-				allowCopy: n
+				onSelectionChange: m,
+				onCopiedMagicString: j,
+				allowCopy: n,
+				allowSelection: r
 			}), n && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("button", {
 				type: "button",
-				className: `gnwr-copy-button${m || y ? " gnwr-copy-button--copied" : ""}`,
-				onClick: j,
-				onMouseEnter: M,
-				onMouseLeave: N,
+				className: `gnwr-copy-button${v || b ? " gnwr-copy-button--copied" : ""}`,
+				onClick: M,
+				onMouseEnter: N,
+				onMouseLeave: P,
 				title: "Copy the Tree Clipper magic string — paste into Blender with the Tree Clipper add-on",
-				children: m || y ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("svg", {
+				children: v || b ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("svg", {
 					className: "gnwr-copy-button__check",
 					viewBox: "0 0 24 24",
 					"aria-hidden": "true",
@@ -9337,12 +9340,12 @@ function xp(e) {
 						strokeLinecap: "round",
 						strokeLinejoin: "round"
 					})
-				}), /* @__PURE__ */ g("span", { children: "Copied!" })] }) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(bp, { className: "gnwr-copy-button__logo" }), /* @__PURE__ */ g("span", { children: u.length > 0 ? `Copy Magic String of ${u.length} selected node${u.length === 1 ? "" : "s"}` : "Copy TreeClipper Magic String" })] })
-			}), (m || y) && /* @__PURE__ */ _("div", {
-				className: `gnwr-copy-toast${y ? " gnwr-leaving" : ""}`,
+				}), /* @__PURE__ */ g("span", { children: "Copied!" })] }) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(bp, { className: "gnwr-copy-button__logo" }), /* @__PURE__ */ g("span", { children: p.length > 0 ? `Copy Magic String of ${p.length} selected node${p.length === 1 ? "" : "s"}` : "Copy TreeClipper Magic String" })] })
+			}), (v || b) && /* @__PURE__ */ _("div", {
+				className: `gnwr-copy-toast${b ? " gnwr-leaving" : ""}`,
 				role: "status",
-				onMouseEnter: M,
-				onMouseLeave: N,
+				onMouseEnter: N,
+				onMouseLeave: P,
 				children: [
 					"Now, you can use this magic string in Blender with the",
 					" ",

package/dist/types/embed.d.ts

@@ -6,6 +6,9 @@ export type GraphViewEmbedOptions = {
     /** When false, hide the "Copy TreeClipper Magic String" button and disable the
      *  right-click copy action. Default true. */
     showCopyButton?: boolean;
+    /** When false, disable node selection; left-drag pans instead of box-selecting.
+     *  Default true. */
+    allowSelection?: boolean;
 };
 export declare function GraphView(props: GraphViewEmbedOptions): import("react").JSX.Element;
 /**

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

@@ -23,4 +23,7 @@ export declare function GeometryNodesFlow(props: {
     /** When false, disable copying to a Tree Clipper magic string (hides the
      *  right-click "copy" context menu). Default true. */
     allowCopy?: boolean;
+    /** When false, disable node selection; left-drag pans instead of box-selecting.
+     *  Default true. */
+    allowSelection?: boolean;
 }): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonodes-web-render",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "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": {