@jkwd/inbase 0.1.13 → 0.1.15

package/apps/explorer/src/App.tsx

@@ -14,6 +14,7 @@ import {
 } from './layout'
 import { World } from './scene/World'
 import { HUD } from './ui/HUD'
+import { CanvasErrorBoundary } from './ui/CanvasErrorBoundary'
 import {
   MapContextMenu,
   type MapContextMenuState,
@@ -1262,6 +1263,7 @@ function Explorer({
   return (
     <>
       <div className="stage">
+        <CanvasErrorBoundary>
         <Canvas
           shadows={false}
           dpr={[1, 1.5]}
@@ -1317,6 +1319,7 @@ function Explorer({
             }
           />
         </Canvas>
+        </CanvasErrorBoundary>
       </div>
       <HUD
         graph={displayGraph}

package/apps/explorer/src/scene/MapView.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react'
 import { useFrame, useThree } from '@react-three/fiber'
 import { Html, MapControls, OrthographicCamera } from '@react-three/drei'
 import * as THREE from 'three'
@@ -355,13 +354,40 @@ function MapFolderLabels({
   const camera = useThree((state) => state.camera)
   const gl = useThree((state) => state.gl)
   const size = useThree((state) => state.size)
-  const layerRef = useRef<HTMLDivElement>(null)
+  const layerRef = useRef<HTMLDivElement | null>(null)
   const items = useMemo(() => Object.values(folders), [folders])
-  const [host, setHost] = useState<HTMLElement | null>(null)
 
   useLayoutEffect(() => {
-    setHost(gl.domElement.parentElement)
-  }, [gl])
+    const parent = gl.domElement.parentElement
+    if (!parent) return
+    const layer = document.createElement('div')
+    layer.className = 'map-folder-label-layer'
+    layer.style.cssText =
+      'position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:80;background:transparent;'
+    for (const folder of items) {
+      const el = document.createElement('div')
+      el.className = folderLabelClass(folder, highlightedFolders, selectedFolder)
+      el.style.position = 'absolute'
+      el.style.top = '0'
+      el.style.left = '0'
+      el.style.visibility = 'hidden'
+      const name = document.createElement('span')
+      name.className = 'map-folder-name'
+      name.textContent = folderKindLabel(
+        folder.name,
+        highlightedFolders?.[folder.path] ?? null,
+        folder.added ?? false,
+      )
+      el.appendChild(name)
+      layer.appendChild(el)
+    }
+    parent.appendChild(layer)
+    layerRef.current = layer
+    return () => {
+      layer.remove()
+      layerRef.current = null
+    }
+  }, [gl, highlightedFolders, items, selectedFolder])
 
   useFrame(() => {
     const layer = layerRef.current
@@ -401,27 +427,7 @@ function MapFolderLabels({
     }
   })
 
-  if (!host) return null
-
-  return createPortal(
-    <div ref={layerRef} className="map-folder-label-layer">
-      {items.map((folder) => (
-        <div
-          key={folder.path}
-          className={folderLabelClass(folder, highlightedFolders, selectedFolder)}
-        >
-          <span className="map-folder-name">
-            {folderKindLabel(
-              folder.name,
-              highlightedFolders?.[folder.path] ?? null,
-              folder.added ?? false,
-            )}
-          </span>
-        </div>
-      ))}
-    </div>,
-    host,
-  )
+  return null
 }
 
 function folderKindLabel(

package/apps/explorer/src/ui/CanvasErrorBoundary.tsx

@@ -15,6 +15,10 @@ export class CanvasErrorBoundary extends Component<Props, State> {
     return { failed: true }
   }
 
+  componentDidCatch(error: Error) {
+    console.error('Visualizer canvas error', error)
+  }
+
   render() {
     if (this.state.failed) {
       return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jkwd/inbase",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "A first-person 3D map of a codebase, with a visual coding workflow for Cursor.",
   "license": "MIT",
   "author": "Joris Kuijper",