@jkwd/inbase 0.1.4 → 0.1.6

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

@@ -1,12 +1,11 @@
 import { Suspense } from 'react'
 import { Billboard, Edges, Html, Text } from '@react-three/drei'
-import { CHANGE_HIGHLIGHT, CONFIG, dimColor, fileColor, type ChangeKind } from '../theme'
+import { CHANGE_HIGHLIGHT, CONFIG, dimColor, fileColor, FILE_SELECTION, MAP_SELECTION, type ChangeKind } from '../theme'
 import { NameInput } from '../ui/NameInput'
 import { MapSelectBorder } from './MapSelectBorder'
 import type { FileNode } from '../types'
 import type { PlacedFile } from '../types'
 
-const BAR = 0.22
 const SIDE_LABEL_PAD = 0.05
 const SIDE_LABEL_MIN_HEIGHT = CONFIG.eyeHeight * 2.5
 const SIDE_LABELS: { rotationY: number; axis: 'x' | 'z'; sign: 1 | -1 }[] = [
@@ -28,51 +27,13 @@ type FileBlockProps = {
   dimmed: boolean
   naming?: boolean
   mapMode?: boolean
+  highlightMapChange?: boolean
+  previewLabels?: boolean
+  labelVisible?: boolean
   onCommitName?: (name: string) => void
   onCancelName?: () => void
 }
 
-function PlannedFrame({
-  width,
-  height,
-  depth,
-  color,
-}: {
-  width: number
-  height: number
-  depth: number
-  color: string
-}) {
-  const ox = width / 2 + BAR / 2
-  const oy = height / 2 + BAR / 2
-  const oz = depth / 2 + BAR / 2
-  const bars: [number, number, number, number, number, number][] = [
-    [ox, 0, oz, BAR, height + BAR * 2, BAR],
-    [-ox, 0, oz, BAR, height + BAR * 2, BAR],
-    [ox, 0, -oz, BAR, height + BAR * 2, BAR],
-    [-ox, 0, -oz, BAR, height + BAR * 2, BAR],
-    [0, oy, oz, width + BAR * 2, BAR, BAR],
-    [0, oy, -oz, width + BAR * 2, BAR, BAR],
-    [ox, oy, 0, BAR, BAR, depth],
-    [-ox, oy, 0, BAR, BAR, depth],
-    [0, -oy, oz, width + BAR * 2, BAR, BAR],
-    [0, -oy, -oz, width + BAR * 2, BAR, BAR],
-    [ox, -oy, 0, BAR, BAR, depth],
-    [-ox, -oy, 0, BAR, BAR, depth],
-  ]
-
-  return (
-    <group>
-      {bars.map(([x, y, z, w, h, d], index) => (
-        <mesh key={index} position={[x, y, z]}>
-          <boxGeometry args={[w, h, d]} />
-          <meshBasicMaterial color={color} toneMapped={false} />
-        </mesh>
-      ))}
-    </group>
-  )
-}
-
 function fileLabel(name: string, changeKind: ChangeKind | null, added: boolean) {
   if (changeKind === 'remove') return `- ${name}`
   if (changeKind === 'add' || added) return `+ ${name}`
@@ -91,15 +52,19 @@ export function FileBlock({
   dimmed,
   naming = false,
   mapMode = false,
+  highlightMapChange = mapMode,
+  previewLabels = false,
+  labelVisible = true,
   onCommitName,
   onCancelName,
 }: FileBlockProps) {
   const [width, height, depth] = placed.size
-  const highlight = changeKind && mapMode ? CHANGE_HIGHLIGHT[changeKind] : null
+  const highlight =
+    changeKind && highlightMapChange && !selected
+      ? CHANGE_HIGHLIGHT[changeKind]
+      : null
   const color = added || file.userCreated ? '#7ec8e8' : fileColor(file.language)
   const muted = dimColor(color, 0.32)
-  const walkSelected = selected && !mapMode
-  const mapSelected = selected && mapMode
   const label = fileLabel(file.name, changeKind, added || Boolean(file.userCreated))
   const labelColor = aimed
     ? '#9ad8ff'
@@ -112,62 +77,58 @@ export function FileBlock({
     ? '#9ad8ff'
     : highlight
       ? highlight.color
-      : walkSelected
-        ? '#5d9ec4'
+      : selected
+        ? FILE_SELECTION.color
         : related
           ? '#4e7f72'
           : dimmed
             ? muted
             : color
 
+  const showLabels = !naming && !mapMode
+
   return (
     <group position={placed.position}>
-      {highlight && !mapSelected && (
-        <mesh
-          position={[0, height / 2 + 0.04, 0]}
-          rotation={[-Math.PI / 2, 0, 0]}
-          userData={{ fileId: file.id }}
-        >
-          <planeGeometry args={[width + 0.7, depth + 0.7]} />
-          <meshBasicMaterial color={highlight.color} toneMapped={false} />
-        </mesh>
-      )}
-      <mesh userData={{ fileId: file.id }}>
-        <boxGeometry args={[width, height, depth]} />
-        <meshLambertMaterial
-          color={meshColor}
-          emissive={
-            aimed
-              ? '#3a6a80'
-              : highlight
-                ? highlight.emissive
-                : walkSelected
-                  ? '#2a4a5c'
-                  : related
-                    ? '#1f4a44'
-                    : added || file.userCreated
-                      ? '#2a5064'
-                      : dimmed
-                        ? muted
-                        : color
-          }
-          emissiveIntensity={
-            aimed
-              ? 0.45
-              : highlight
-                ? 0.95
-                : walkSelected
-                  ? 0.28
-                  : related
-                    ? 0.18
-                    : added || file.userCreated
-                      ? 0.22
-                      : dimmed
-                        ? 0.08
-                        : 0.12
-          }
-        />
-        {walkSelected && (
+      <mesh userData={{ fileId: file.id }} scale={[width, height, depth]}>
+        <boxGeometry args={[1, 1, 1]} />
+        {mapMode ? (
+          <meshBasicMaterial color={meshColor} toneMapped={false} />
+        ) : (
+          <meshLambertMaterial
+            color={meshColor}
+            emissive={
+              aimed
+                ? '#3a6a80'
+                : highlight
+                  ? highlight.emissive
+                  : selected
+                    ? FILE_SELECTION.emissive
+                    : related
+                      ? '#1f4a44'
+                      : added || file.userCreated
+                        ? '#2a5064'
+                        : dimmed
+                          ? muted
+                          : color
+            }
+            emissiveIntensity={
+              aimed
+                ? 0.45
+                : highlight
+                  ? 0.95
+                  : selected
+                    ? 0.55
+                    : related
+                      ? 0.18
+                      : added || file.userCreated
+                        ? 0.22
+                        : dimmed
+                          ? 0.08
+                          : 0.12
+            }
+          />
+        )}
+        {selected && !mapMode && (
           <Edges
             color="#000000"
             dashed
@@ -175,26 +136,18 @@ export function FileBlock({
             gapSize={0.1}
             lineWidth={2.5}
             toneMapped={false}
-            scale={1.002}
           />
         )}
       </mesh>
-      {mapSelected && (
+      {selected && mapMode && (
         <MapSelectBorder
           width={width}
           depth={depth}
-          y={height / 2 + 0.05}
+          y={height / 2 + 0.03}
+          stroke={MAP_SELECTION.blockPad}
           userData={{ fileId: file.id }}
         />
       )}
-      {highlight && !mapSelected && (
-        <PlannedFrame
-          width={width}
-          height={height}
-          depth={depth}
-          color={highlight.color}
-        />
-      )}
       {naming && onCommitName && onCancelName && (
         <Html
           position={[0, height / 2 + 0.42, 0]}
@@ -210,47 +163,63 @@ export function FileBlock({
           />
         </Html>
       )}
-      <Suspense fallback={null}>
-        {!naming && (
-          <Billboard position={[0, height / 2 + (planned || highlight ? 0.55 : 0.38), 0]}>
-            <Text
-              fontSize={0.28}
-              color={labelColor}
-              anchorX="center"
-              anchorY="bottom"
-              maxWidth={3.4}
-            >
-              {label}
-            </Text>
-          </Billboard>
-        )}
-        {height >= SIDE_LABEL_MIN_HEIGHT &&
-          SIDE_LABELS.map((side) => {
-            const face = side.axis === 'x' ? width : depth
-            const x =
-              side.axis === 'x' ? side.sign * (width / 2 + SIDE_LABEL_PAD) : 0
-            const z =
-              side.axis === 'z' ? side.sign * (depth / 2 + SIDE_LABEL_PAD) : 0
-            return (
-              <Text
-                key={`${side.axis}:${side.sign}`}
-                position={[x, -height / 2 + 0.22, z]}
-                rotation={[0, side.rotationY, 0]}
-                fontSize={0.22}
-                color={labelColor}
-                anchorX="center"
-                anchorY="middle"
-                maxWidth={face - 0.2}
-                overflowWrap="break-word"
-                outlineWidth={0.012}
-                outlineColor="#11151c"
-                depthOffset={-1}
+      {showLabels && (
+        <Suspense fallback={null}>
+          {previewLabels ? (
+            labelVisible && (
+              <Html
+                position={[0, height / 2 + 0.4, 0]}
+                center
+                occlude={false}
+                style={{ pointerEvents: 'none' }}
+                zIndexRange={[20, 0]}
               >
-                {label}
-              </Text>
+                <div className="thumbnail-block-label">{label}</div>
+              </Html>
             )
-          })}
-      </Suspense>
+          ) : (
+            <>
+              <Billboard position={[0, height / 2 + (planned || highlight ? 0.55 : 0.38), 0]}>
+                <Text
+                  fontSize={0.28}
+                  color={labelColor}
+                  anchorX="center"
+                  anchorY="bottom"
+                  maxWidth={3.4}
+                >
+                  {label}
+                </Text>
+              </Billboard>
+              {height >= SIDE_LABEL_MIN_HEIGHT &&
+                SIDE_LABELS.map((side) => {
+                  const face = side.axis === 'x' ? width : depth
+                  const x =
+                    side.axis === 'x' ? side.sign * (width / 2 + SIDE_LABEL_PAD) : 0
+                  const z =
+                    side.axis === 'z' ? side.sign * (depth / 2 + SIDE_LABEL_PAD) : 0
+                  return (
+                    <Text
+                      key={`${side.axis}:${side.sign}`}
+                      position={[x, -height / 2 + 0.22, z]}
+                      rotation={[0, side.rotationY, 0]}
+                      fontSize={0.22}
+                      color={labelColor}
+                      anchorX="center"
+                      anchorY="middle"
+                      maxWidth={face - 0.2}
+                      overflowWrap="break-word"
+                      outlineWidth={0.012}
+                      outlineColor="#11151c"
+                      depthOffset={-1}
+                    >
+                      {label}
+                    </Text>
+                  )
+                })}
+            </>
+          )}
+        </Suspense>
+      )}
     </group>
   )
 }

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

@@ -1,6 +1,13 @@
 import { Suspense } from 'react'
-import { Text } from '@react-three/drei'
-import { CHANGE_HIGHLIGHT, folderFloorColor, MAP_SELECTION, type ChangeKind } from '../theme'
+import { Html, Text } from '@react-three/drei'
+import {
+  CHANGE_HIGHLIGHT,
+  CONFIG,
+  folderAisleColor,
+  folderFloorColor,
+  MAP_SELECTION,
+  type ChangeKind,
+} from '../theme'
 import type { PlacedFolder } from '../types'
 import { MapSelectBorder } from './MapSelectBorder'
 
@@ -10,6 +17,7 @@ type FolderAreaProps = {
   selected?: boolean
   mapMode?: boolean
   highlightKind?: ChangeKind | null
+  previewLabels?: boolean
 }
 
 export function FolderArea({
@@ -18,10 +26,10 @@ export function FolderArea({
   selected = false,
   mapMode = false,
   highlightKind = null,
+  previewLabels = false,
 }: FolderAreaProps) {
   const added = Boolean(folder.added)
-  const highlight =
-    mapMode && highlightKind ? CHANGE_HIGHLIGHT[highlightKind] : null
+  const highlight = highlightKind ? CHANGE_HIGHLIGHT[highlightKind] : null
   const addedOnly = added && !highlight
   const outline = highlight ? highlight.color : addedOnly ? '#7ec8e8' : null
   const color = highlight
@@ -29,6 +37,11 @@ export function FolderArea({
     : addedOnly
       ? '#16323f'
       : folderFloorColor(folder.path)
+  const aisle = highlight
+    ? highlight.aisle
+    : addedOnly
+      ? '#23485a'
+      : folderAisleColor(folder.path)
   const label =
     highlightKind === 'remove'
       ? `- ${folder.name}`
@@ -57,29 +70,35 @@ export function FolderArea({
           depth={folder.depth}
           y={0.06}
           stroke={MAP_SELECTION.islandPad}
+          color={MAP_SELECTION.island}
         />
       )}
       <mesh position={[0, 0.02, 0]} rotation={[-Math.PI / 2, 0, 0]}>
-        <planeGeometry args={[2.2, folder.depth - 1.5]} />
-        <meshBasicMaterial
-          color={highlight ? highlight.aisle : addedOnly ? '#23485a' : '#2a3340'}
-        />
+        <planeGeometry args={[CONFIG.bridgeWidth, folder.depth]} />
+        <meshBasicMaterial color={aisle} />
       </mesh>
       {folder.width > 28 && (
         <mesh
-          position={[0, 0.02, folder.depth / 2 - 1.3]}
+          position={[0, 0.02, folder.depth / 2 - CONFIG.bridgeWidth / 2]}
           rotation={[-Math.PI / 2, 0, 0]}
         >
-          <planeGeometry args={[folder.width - 2.4, 2.4]} />
-          <meshBasicMaterial
-            color={
-              highlight ? highlight.aisle : addedOnly ? '#23485a' : '#2a3340'
-            }
-          />
+          <planeGeometry args={[folder.width, CONFIG.bridgeWidth]} />
+          <meshBasicMaterial color={aisle} />
         </mesh>
       )}
       <Suspense fallback={null}>
-        {!naming && (
+        {!naming && previewLabels && (
+          <Html
+            position={[0, 1.35, -folder.depth / 2 + 1.6]}
+            center
+            occlude={false}
+            style={{ pointerEvents: 'none' }}
+            zIndexRange={[20, 0]}
+          >
+            <div className="thumbnail-folder-label">{label}</div>
+          </Html>
+        )}
+        {!naming && !previewLabels && !mapMode && (
           <Text
             position={[0, 0.05, -folder.depth / 2 + 1.6]}
             rotation={[-Math.PI / 2, 0, 0]}

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

@@ -7,6 +7,7 @@ type MapSelectBorderProps = {
   depth: number
   y?: number
   stroke?: number
+  color?: string
   userData?: Record<string, unknown>
 }
 
@@ -15,6 +16,7 @@ export function MapSelectBorder({
   depth,
   y = 0.04,
   stroke = MAP_SELECTION.blockPad,
+  color = MAP_SELECTION.color,
   userData,
 }: MapSelectBorderProps) {
   const geometry = useMemo(() => {
@@ -47,7 +49,7 @@ export function MapSelectBorder({
       userData={userData}
     >
       <meshBasicMaterial
-        color={MAP_SELECTION.color}
+        color={color}
         toneMapped={false}
         side={THREE.DoubleSide}
         depthWrite={false}

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

@@ -30,7 +30,7 @@ export function MapView({
   onTravelTo,
 }: MapViewProps) {
   const size = useThree((state) => state.size)
-  const { camera, gl, scene } = useThree()
+  const { camera, gl, invalidate, scene } = useThree()
   const bounds = useMemo(() => worldBounds(layout), [layout])
   const drag = useRef({ x: 0, y: 0, moved: false, active: false })
   const sized = size.width > 16 && size.height > 16
@@ -49,6 +49,7 @@ export function MapView({
   // Ortho up is -Z, so +Z is down the screen. Shift the view so the map sits
   // above the bottom HUD instead of centering under it.
   const cz = bounds.cz + hudReserve / 2 / zoom
+  const controlsRef = useRef<{ target: THREE.Vector3; update: () => void }>(null)
 
   useLayoutEffect(() => {
     if (!enabled || !(camera instanceof THREE.OrthographicCamera)) return
@@ -59,15 +60,19 @@ export function MapView({
     camera.far = 2000
     camera.zoom = zoom
     camera.updateProjectionMatrix()
-  }, [bounds.cx, camera, cz, enabled, zoom])
+    const controls = controlsRef.current
+    if (controls) {
+      controls.target.set(bounds.cx, 0, cz)
+      controls.update()
+    }
+  }, [bounds.cx, camera, cz, enabled, sized, zoom])
 
   useEffect(() => {
     if (!enabled) return
     const element = gl.domElement
     element.style.cursor = 'grab'
 
-    const isWalkClick = (event: PointerEvent | MouseEvent) =>
-      event.shiftKey || event.ctrlKey || event.metaKey
+    const isWalkClick = (event: PointerEvent | MouseEvent) => event.ctrlKey
 
     const isWalkButton = (event: PointerEvent) =>
       event.button === 0 || (event.ctrlKey && event.button === 2)
@@ -111,6 +116,7 @@ export function MapView({
       const pick = pickAt(clientX, clientY)
       if (!pick) return false
       const { raycaster, relationHit, fileHit } = pick
+      if (fileHit) return false
 
       const hit = new THREE.Vector3()
       const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
@@ -121,7 +127,7 @@ export function MapView({
         landAt(hit.x, hit.z)
         return true
       }
-      if (relationHit || fileHit) return false
+      if (relationHit) return false
 
       landAt(hit.x, hit.z)
       return true
@@ -140,20 +146,17 @@ export function MapView({
       const pick = pickAt(event.clientX, event.clientY)
       if (!pick) return
       const { relationHit, fileHit } = pick
-      if (
-        relationHit &&
-        (!fileHit || relationHit.distance <= fileHit.distance + 0.4)
-      ) {
+      if (fileHit) {
+        onSelect(fileHit.object.userData.fileId as string)
+        return
+      }
+      if (relationHit) {
         onTravelTo(
           relationHit.object.userData.relationFrom as string,
           relationHit.object.userData.relationTo as string,
         )
         return
       }
-      if (fileHit) {
-        onSelect(fileHit.object.userData.fileId as string)
-        return
-      }
 
       const hit = new THREE.Vector3()
       const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
@@ -172,21 +175,79 @@ export function MapView({
       if (event.ctrlKey) event.preventDefault()
     }
 
+    const ground = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
+    const ndc = new THREE.Vector2()
+    const before = new THREE.Vector3()
+    const after = new THREE.Vector3()
+    const raycaster = new THREE.Raycaster()
+    const minZoom = Math.max(fitZoom * 0.35, 0.05)
+    const maxZoom = Math.max(fitZoom * 10, 20)
+    const zoomScale = Math.pow(0.95, 1.15)
+
+    const worldUnderCursor = (clientX: number, clientY: number, target: THREE.Vector3) => {
+      const rect = element.getBoundingClientRect()
+      if (rect.width < 2 || rect.height < 2) return false
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+      raycaster.setFromCamera(ndc, camera)
+      return Boolean(raycaster.ray.intersectPlane(ground, target))
+    }
+
+    const zoomAtCursor = (clientX: number, clientY: number, dollyScale: number) => {
+      if (!(camera instanceof THREE.OrthographicCamera)) return
+      if (!worldUnderCursor(clientX, clientY, before)) return
+      const nextZoom = Math.min(maxZoom, Math.max(minZoom, camera.zoom / dollyScale))
+      if (nextZoom === camera.zoom) return
+      camera.zoom = nextZoom
+      camera.updateProjectionMatrix()
+      if (!worldUnderCursor(clientX, clientY, after)) return
+      const dx = before.x - after.x
+      const dz = before.z - after.z
+      camera.position.x += dx
+      camera.position.z += dz
+      const controls = controlsRef.current
+      if (controls) {
+        controls.target.x += dx
+        controls.target.z += dz
+        controls.update()
+      }
+      invalidate()
+    }
+
+    const onWheel = (event: WheelEvent) => {
+      const overlay = document.elementFromPoint(event.clientX, event.clientY)
+      if (overlay?.closest('.hud-thumbnail')) {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        return
+      }
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      if (event.deltaY < 0) zoomAtCursor(event.clientX, event.clientY, zoomScale)
+      else if (event.deltaY > 0) zoomAtCursor(event.clientX, event.clientY, 1 / zoomScale)
+    }
+
     element.addEventListener('pointerdown', onDown)
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onUp)
     element.addEventListener('contextmenu', onContextMenu)
+    element.addEventListener('wheel', onWheel, { capture: true, passive: false })
     return () => {
       element.style.cursor = ''
       element.removeEventListener('pointerdown', onDown)
       window.removeEventListener('pointermove', onMove)
       window.removeEventListener('pointerup', onUp)
       element.removeEventListener('contextmenu', onContextMenu)
+      element.removeEventListener('wheel', onWheel, { capture: true })
     }
   }, [
     camera,
     enabled,
+    fitZoom,
     gl.domElement,
+    invalidate,
     layout,
     onLand,
     onSelect,
@@ -198,25 +259,19 @@ export function MapView({
   return (
     <>
       {enabled && (
-        <OrthographicCamera
-          makeDefault
-          position={[bounds.cx, 120, cz]}
-          zoom={zoom}
-          near={1}
-          far={2000}
-          up={[0, 0, -1]}
-        />
+        <OrthographicCamera makeDefault near={1} far={2000} up={[0, 0, -1]} />
       )}
       {enabled && sized && (
         <MapControls
+          ref={controlsRef}
           enableRotate={false}
           enableDamping
           dampingFactor={0.12}
           screenSpacePanning
+          zoomToCursor
           zoomSpeed={1.15}
           minZoom={Math.max(fitZoom * 0.35, 0.05)}
           maxZoom={Math.max(fitZoom * 10, 20)}
-          target={[bounds.cx, 0, cz]}
         />
       )}
       {enabled &&