@jkwd/inbase 0.1.1 → 0.1.4

package/apps/explorer/src/index.css

@@ -21,6 +21,8 @@ body,
 .stage {
   position: absolute;
   inset: 0;
+  z-index: 0;
+  background: #000;
 }
 
 * {
@@ -35,7 +37,7 @@ button {
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 2;
+  z-index: 10;
 }
 
 .hud-top,
@@ -243,6 +245,7 @@ button {
   left: 0;
   right: 0;
   bottom: 0;
+  z-index: 3;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -306,11 +309,15 @@ button {
   position: absolute;
   top: 68px;
   right: 20px;
+  z-index: 4;
   width: min(320px, calc(100% - 40px));
-  max-height: calc(100dvh - 132px);
-  overflow: auto;
+  height: auto;
+  max-height: calc(100dvh - 168px);
+  overflow-x: hidden;
+  overflow-y: auto;
   overscroll-behavior: contain;
-  padding: 16px;
+  padding: 16px 16px 20px;
+  background: var(--vc-chrome);
 }
 
 .hud-panel-info {
@@ -352,18 +359,31 @@ button {
 
 .hud-steps {
   margin: 10px 0 0;
-  padding-left: 18px;
+  padding: 0;
+  list-style: none;
   color: #8b95a5;
 }
 
 .hud-steps li {
-  margin: 0 0 6px;
+  display: grid;
+  grid-template-columns: 1.6em minmax(0, 1fr);
+  align-items: start;
+  justify-content: start;
+  gap: 8px;
+  margin: 0 0 8px;
+}
+
+.hud-step-index {
+  font-variant-numeric: tabular-nums;
+  line-height: 1.4;
 }
 
 .hud-step-main {
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
   gap: 8px;
+  min-width: 0;
 }
 
 .hud-steps li[data-next='true'] {
@@ -488,6 +508,39 @@ button {
   opacity: 0.35;
 }
 
+.hud-fold {
+  margin-top: 12px;
+}
+
+.hud-fold-summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+}
+
+.hud-fold-summary::-webkit-details-marker,
+.hud-fold-summary::marker {
+  display: none;
+  content: '';
+}
+
+.hud-fold-summary::before {
+  content: '';
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 6px solid currentColor;
+  transition: transform 0.12s ease;
+}
+
+.hud-fold[open] > .hud-fold-summary::before {
+  transform: rotate(90deg);
+}
+
 .hud-button-approve {
   border-color: #9ad8ff;
   color: #d7eef8;
@@ -514,12 +567,17 @@ button {
   word-break: break-all;
 }
 
+.hud-inspect {
+  margin: 10px 0 0;
+  width: 100%;
+}
+
 .hud-panel ul {
   margin: 8px 0 0;
   padding-left: 18px;
 }
 
-.hud-panel li {
+.hud-panel ul li {
   margin: 0 0 4px;
   display: flex;
   align-items: center;
@@ -547,6 +605,21 @@ button {
   border-color: #8a4a4a;
 }
 
+.hud-item-inspect {
+  flex: none;
+  padding: 2px 6px;
+  color: #d7eef8;
+  background: transparent;
+  border: 1px solid #3a4250;
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.hud-item-inspect:hover,
+.hud-item-inspect:focus-visible {
+  border-color: #9ad8ff;
+}
+
 .hud-add-row {
   display: flex;
   gap: 6px;

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

@@ -95,7 +95,7 @@ export function FileBlock({
   onCancelName,
 }: FileBlockProps) {
   const [width, height, depth] = placed.size
-  const highlight = changeKind ? CHANGE_HIGHLIGHT[changeKind] : null
+  const highlight = changeKind && mapMode ? CHANGE_HIGHLIGHT[changeKind] : null
   const color = added || file.userCreated ? '#7ec8e8' : fileColor(file.language)
   const muted = dimColor(color, 0.32)
   const walkSelected = selected && !mapMode

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

@@ -8,6 +8,7 @@ type FolderAreaProps = {
   folder: PlacedFolder
   naming?: boolean
   selected?: boolean
+  mapMode?: boolean
   highlightKind?: ChangeKind | null
 }
 
@@ -15,10 +16,12 @@ export function FolderArea({
   folder,
   naming = false,
   selected = false,
+  mapMode = false,
   highlightKind = null,
 }: FolderAreaProps) {
   const added = Boolean(folder.added)
-  const highlight = highlightKind ? CHANGE_HIGHLIGHT[highlightKind] : null
+  const highlight =
+    mapMode && highlightKind ? CHANGE_HIGHLIGHT[highlightKind] : null
   const addedOnly = added && !highlight
   const outline = highlight ? highlight.color : addedOnly ? '#7ec8e8' : null
   const color = highlight
@@ -48,7 +51,7 @@ export function FolderArea({
         <planeGeometry args={[folder.width, folder.depth]} />
         <meshBasicMaterial color={color} />
       </mesh>
-      {selected && (
+      {selected && mapMode && (
         <MapSelectBorder
           width={folder.width}
           depth={folder.depth}

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

@@ -34,33 +34,46 @@ export function MapView({
   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
+  const hudReserve = 88
+  const topReserve = 28
+  const viewWidth = Math.max(size.width, 1)
+  const viewHeight = Math.max(size.height - hudReserve - topReserve, 1)
 
   const fitZoom = sized
     ? Math.min(
-        size.width / Math.max(bounds.width + 24, 1),
-        size.height / Math.max(bounds.depth + 24, 1),
+        viewWidth / Math.max(bounds.width + 36, 1),
+        viewHeight / Math.max(bounds.depth + 36, 1),
       )
     : 8
-  const zoom = Math.max(fitZoom * 0.92, 1)
+  const zoom = Math.max(fitZoom * 0.92, 0.08)
+  // 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
 
   useLayoutEffect(() => {
     if (!enabled || !(camera instanceof THREE.OrthographicCamera)) return
     camera.up.set(0, 0, -1)
-    camera.position.set(bounds.cx, 120, bounds.cz)
-    camera.lookAt(bounds.cx, 0, bounds.cz)
+    camera.position.set(bounds.cx, 120, cz)
+    camera.lookAt(bounds.cx, 0, cz)
     camera.near = 1
     camera.far = 2000
     camera.zoom = zoom
     camera.updateProjectionMatrix()
-  }, [bounds.cx, bounds.cz, camera, enabled, zoom])
+  }, [bounds.cx, camera, cz, enabled, 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 isWalkButton = (event: PointerEvent) =>
+      event.button === 0 || (event.ctrlKey && event.button === 2)
+
     const onDown = (event: PointerEvent) => {
-      if (event.button !== 0) return
+      if (!isWalkButton(event)) return
       drag.current = { x: event.clientX, y: event.clientY, moved: false, active: true }
       element.style.cursor = 'grabbing'
     }
@@ -86,11 +99,43 @@ export function MapView({
       return { raycaster, relationHit, fileHit }
     }
 
+    const landAt = (x: number, z: number) => {
+      const lock = element.requestPointerLock()
+      if (lock && typeof lock.catch === 'function') {
+        void lock.catch(() => {})
+      }
+      onLand(x, z)
+    }
+
+    const landAtPointer = (clientX: number, clientY: number, allowIsland: boolean) => {
+      const pick = pickAt(clientX, clientY)
+      if (!pick) return false
+      const { raycaster, relationHit, fileHit } = pick
+
+      const hit = new THREE.Vector3()
+      const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
+      if (!raycaster.ray.intersectPlane(plane, hit)) return false
+
+      const folder = folderAt(hit.x, hit.z, layout)
+      if (allowIsland && folder) {
+        landAt(hit.x, hit.z)
+        return true
+      }
+      if (relationHit || fileHit) return false
+
+      landAt(hit.x, hit.z)
+      return true
+    }
+
     const onUp = (event: PointerEvent) => {
       element.style.cursor = 'grab'
       const startedOnCanvas = drag.current.active
       drag.current.active = false
-      if (!startedOnCanvas || event.button !== 0 || drag.current.moved) return
+      if (!startedOnCanvas || !isWalkButton(event) || drag.current.moved) return
+
+      if (isWalkClick(event) && landAtPointer(event.clientX, event.clientY, true)) {
+        return
+      }
 
       const pick = pickAt(event.clientX, event.clientY)
       if (!pick) return
@@ -123,34 +168,20 @@ export function MapView({
       onSelectFolder(null)
     }
 
-    const onDblClick = (event: MouseEvent) => {
-      if (event.button !== 0 || drag.current.moved) return
-      const pick = pickAt(event.clientX, event.clientY)
-      if (!pick) return
-      const { raycaster, relationHit, fileHit } = pick
-      if (relationHit || fileHit) return
-
-      const hit = new THREE.Vector3()
-      const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
-      if (raycaster.ray.intersectPlane(plane, hit)) {
-        const lock = element.requestPointerLock()
-        if (lock && typeof lock.catch === 'function') {
-          void lock.catch(() => {})
-        }
-        onLand(hit.x, hit.z)
-      }
+    const onContextMenu = (event: MouseEvent) => {
+      if (event.ctrlKey) event.preventDefault()
     }
 
     element.addEventListener('pointerdown', onDown)
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onUp)
-    element.addEventListener('dblclick', onDblClick)
+    element.addEventListener('contextmenu', onContextMenu)
     return () => {
       element.style.cursor = ''
       element.removeEventListener('pointerdown', onDown)
       window.removeEventListener('pointermove', onMove)
       window.removeEventListener('pointerup', onUp)
-      element.removeEventListener('dblclick', onDblClick)
+      element.removeEventListener('contextmenu', onContextMenu)
     }
   }, [
     camera,
@@ -169,7 +200,7 @@ export function MapView({
       {enabled && (
         <OrthographicCamera
           makeDefault
-          position={[bounds.cx, 120, bounds.cz]}
+          position={[bounds.cx, 120, cz]}
           zoom={zoom}
           near={1}
           far={2000}
@@ -183,9 +214,9 @@ export function MapView({
           dampingFactor={0.12}
           screenSpacePanning
           zoomSpeed={1.15}
-          minZoom={Math.max(fitZoom * 0.45, 1)}
+          minZoom={Math.max(fitZoom * 0.35, 0.05)}
           maxZoom={Math.max(fitZoom * 10, 20)}
-          target={[bounds.cx, 0, bounds.cz]}
+          target={[bounds.cx, 0, cz]}
         />
       )}
       {enabled &&
@@ -194,6 +225,7 @@ export function MapView({
             key={folder.path}
             position={[folder.x, 14, folder.z + 1.35]}
             center
+            zIndexRange={[1, 0]}
             style={{ pointerEvents: 'none' }}
           >
             <div

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

@@ -9,7 +9,7 @@ import { UserContextTracker } from './UserContextTracker'
 import { BlockPlacer } from './BlockPlacer'
 import { IslandPlacer } from './IslandPlacer'
 import { folderOfFile, filesImporting } from '../layout'
-import { EDITOR_GREY } from '../theme'
+import { WORLD_VOID } from '../theme'
 import type { ChangeKind } from '../theme'
 import type {
   CodebaseGraph,
@@ -161,18 +161,14 @@ export function World({
 
   return (
     <>
-      <color attach="background" args={[EDITOR_GREY.editor]} />
-      {!mapping && <fog attach="fog" args={[EDITOR_GREY.editor, 38, 160]} />}
+      <color attach="background" args={[WORLD_VOID]} />
+      {!mapping && <fog attach="fog" args={[WORLD_VOID, 38, 160]} />}
       <hemisphereLight args={['#d7e2ee', '#2a3038', mapping ? 1.1 : 0.85]} />
       <directionalLight
         position={mapping ? [8, 60, 8] : [12, 22, 8]}
         intensity={mapping ? 1.35 : 0.55}
       />
       <ambientLight intensity={mapping ? 0.7 : 0.42} />
-      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.06, 40]}>
-        <planeGeometry args={[400, 400]} />
-        <meshBasicMaterial color={EDITOR_GREY.chrome} />
-      </mesh>
       <MapView
         layout={layout}
         enabled={mapping}
@@ -191,6 +187,7 @@ export function World({
           folder={folder}
           naming={folder.path === namingIslandId}
           selected={folder.path === selectedFolder}
+          mapMode={mapping}
           highlightKind={highlightedFolders[folder.path] ?? null}
         />
       ))}

package/apps/explorer/src/theme.ts

@@ -25,6 +25,9 @@ export const EDITOR_GREY = {
   surface: '#272c36',
 }
 
+/** Infinite map/walk backdrop. Keep distinct from chrome HUD greys. */
+export const WORLD_VOID = '#000000'
+
 export type ChangeKind = 'add' | 'edit' | 'remove'
 
 export const CHANGE_HIGHLIGHT: Record<