From f4d7448c9d3e0ce5896b91dc7c8ae8f97dab1af5 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Thu, 12 Mar 2026 10:23:04 -0700
Subject: [PATCH] fix(rnetwork): use UMD build for 3d-force-graph, avoid ESM
 bare specifiers

ESM builds on esm.sh kept resolving transitive deps to latest versions
that import three/webgpu. Switch to the pre-built UMD bundle from
jsdelivr which bundles all deps including Three.js. Keep separate
import map entry for "three" ESM for custom node object creation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 modules/rnetwork/components/folk-graph-viewer.ts |  4 ++--
 modules/rnetwork/mod.ts                          | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/modules/rnetwork/components/folk-graph-viewer.ts b/modules/rnetwork/components/folk-graph-viewer.ts
index a05ca6e..fc1b4fe 100644
--- a/modules/rnetwork/components/folk-graph-viewer.ts
+++ b/modules/rnetwork/components/folk-graph-viewer.ts
@@ -542,8 +542,8 @@ class FolkGraphViewer extends HTMLElement {
 		this.graphContainer = container;
 
 		try {
-			const ForceGraph3DModule = await import("3d-force-graph");
-			const ForceGraph3D = ForceGraph3DModule.default || ForceGraph3DModule;
+			const ForceGraph3D = (window as any).ForceGraph3D;
+			if (!ForceGraph3D) throw new Error("ForceGraph3D not loaded — check UMD script tag");
 
 			const graph = ForceGraph3D({ controlType: "orbit" })(container)
 				.backgroundColor("rgba(0,0,0,0)")
diff --git a/modules/rnetwork/mod.ts b/modules/rnetwork/mod.ts
index 1b341bd..fa6f226 100644
--- a/modules/rnetwork/mod.ts
+++ b/modules/rnetwork/mod.ts
@@ -12,14 +12,14 @@ import { getModuleInfoList } from "../../shared/module";
 import type { RSpaceModule } from "../../shared/module";
 import { renderLanding } from "./landing";
 
-// ── CDN importmap for Three.js + 3d-force-graph ──
-const GRAPH3D_IMPORTMAP = `<script type="importmap">
+// ── CDN scripts for Three.js + 3d-force-graph ──
+// UMD build bundles Three.js + all transitive deps — no bare-specifier issues.
+// We also provide an importmap for "three" so folk-graph-viewer can import("three") for custom meshes.
+const GRAPH3D_HEAD = `<script src="https://cdn.jsdelivr.net/npm/3d-force-graph@1.73.4/dist/3d-force-graph.min.js"></script>
+<script type="importmap">
 {
   "imports": {
-    "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
-    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
-    "three/examples/jsm/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
-    "3d-force-graph": "https://esm.sh/*3d-force-graph@1.73.4?bundle-deps&external=three"
+    "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js"
   }
 }
 </script>`;
@@ -439,7 +439,7 @@ routes.get("/", (c) => {
 		moduleId: "rnetwork",
 		spaceSlug: space,
 		modules: getModuleInfoList(),
-		head: GRAPH3D_IMPORTMAP,
+		head: GRAPH3D_HEAD,
 		body: `<div class="rapp-nav" style="padding:0 1rem;margin-top:8px"><span class="rapp-nav__title"></span><a href="/${space}/rnetwork/crm" class="rapp-nav__btn--app-toggle">Open CRM</a></div>
 <folk-graph-viewer space="${space}"></folk-graph-viewer>`,
 		scripts: `<script type="module" src="/modules/rnetwork/folk-graph-viewer.js"></script>`,