@jkwd/inbase 0.1.1 → 0.1.3

package/apps/explorer/src/index.css

@@ -21,6 +21,7 @@ body,
 .stage {
   position: absolute;
   inset: 0;
+  z-index: 0;
 }
 
 * {
@@ -35,7 +36,7 @@ button {
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 2;
+  z-index: 10;
 }
 
 .hud-top,
@@ -243,6 +244,7 @@ button {
   left: 0;
   right: 0;
   bottom: 0;
+  z-index: 3;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -306,11 +308,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 +358,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 +507,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;
@@ -519,7 +571,7 @@ button {
   padding-left: 18px;
 }
 
-.hud-panel li {
+.hud-panel ul li {
   margin: 0 0 4px;
   display: flex;
   align-items: center;

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,25 +34,32 @@ 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
@@ -86,12 +93,31 @@ export function MapView({
       return { raycaster, relationHit, fileHit }
     }
 
+    const landAtPointer = (clientX: number, clientY: number) => {
+      const pick = pickAt(clientX, clientY)
+      if (!pick) return false
+      const { raycaster, relationHit, fileHit } = pick
+      if (relationHit || fileHit) return false
+
+      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 lock = element.requestPointerLock()
+      if (lock && typeof lock.catch === 'function') {
+        void lock.catch(() => {})
+      }
+      onLand(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 (event.shiftKey && landAtPointer(event.clientX, event.clientY)) return
+
       const pick = pickAt(event.clientX, event.clientY)
       if (!pick) return
       const { relationHit, fileHit } = pick
@@ -123,34 +149,14 @@ 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)
-      }
-    }
-
     element.addEventListener('pointerdown', onDown)
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onUp)
-    element.addEventListener('dblclick', onDblClick)
     return () => {
       element.style.cursor = ''
       element.removeEventListener('pointerdown', onDown)
       window.removeEventListener('pointermove', onMove)
       window.removeEventListener('pointerup', onUp)
-      element.removeEventListener('dblclick', onDblClick)
     }
   }, [
     camera,
@@ -169,7 +175,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 +189,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 +200,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

@@ -8,7 +8,7 @@ import { SelectionController } from './SelectionController'
 import { UserContextTracker } from './UserContextTracker'
 import { BlockPlacer } from './BlockPlacer'
 import { IslandPlacer } from './IslandPlacer'
-import { folderOfFile, filesImporting } from '../layout'
+import { folderOfFile, filesImporting, worldBounds } from '../layout'
 import { EDITOR_GREY } from '../theme'
 import type { ChangeKind } from '../theme'
 import type {
@@ -159,18 +159,26 @@ export function World({
     return null
   }
 
+  const bounds = worldBounds(layout)
+  const groundPad = 120
+  const groundWidth = Math.max(bounds.width + groundPad * 2, 400)
+  const groundDepth = Math.max(bounds.depth + groundPad * 2, 400)
+
   return (
     <>
-      <color attach="background" args={[EDITOR_GREY.editor]} />
-      {!mapping && <fog attach="fog" args={[EDITOR_GREY.editor, 38, 160]} />}
+      <color attach="background" args={[EDITOR_GREY.chrome]} />
+      {!mapping && <fog attach="fog" args={[EDITOR_GREY.chrome, 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]} />
+      <mesh
+        rotation={[-Math.PI / 2, 0, 0]}
+        position={[bounds.cx, -0.06, bounds.cz]}
+      >
+        <planeGeometry args={[groundWidth, groundDepth]} />
         <meshBasicMaterial color={EDITOR_GREY.chrome} />
       </mesh>
       <MapView
@@ -191,6 +199,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/ui/HUD.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { NameInput } from './NameInput'
 import {
   isReviewingIntent,
@@ -72,6 +72,25 @@ function PanelList({
   )
 }
 
+function MutationFold({
+  hasContent,
+  children,
+}: {
+  hasContent: boolean
+  children: ReactNode
+}) {
+  if (!hasContent) return null
+  return (
+    <details
+      className="hud-fold"
+      onKeyDown={(event) => event.stopPropagation()}
+    >
+      <summary className="hud-section-title hud-fold-summary">Mutations</summary>
+      {children}
+    </details>
+  )
+}
+
 function AddIntentRow({
   placeholder,
   onAdd,
@@ -539,6 +558,7 @@ export function HUD({
                     nextStep?.index === step.index && !doneSteps.has(step.index)
                   }
                 >
+                  <span className="hud-step-index">{step.index}.</span>
                   <span className="hud-step-main">
                     <span className="hud-step-title">{step.title}</span>
                     {((canRunNext && nextStep?.index === step.index) ||
@@ -587,81 +607,91 @@ export function HUD({
               </button>
             </div>
           )}
-          {previewing && intent.files.length > 0 && (
-            <>
-              <div className="hud-section-title hud-section-title-edit">Changed</div>
-              <ul>
-                {intent.files.map((id) => (
-                  <li className="hud-file-edit" key={id}>
-                    {id}
-                  </li>
-                ))}
-              </ul>
-            </>
-          )}
-          {previewing && (intent.createFolders ?? []).length > 0 && (
-            <>
-              <div className="hud-section-title hud-section-title-add">Added islands</div>
-              <ul>
-                {intent.createFolders.map((id) => (
-                  <li className="hud-file-add" key={id}>
-                    {id}/
-                  </li>
-                ))}
-              </ul>
-            </>
-          )}
-          {previewing && intent.creates.length > 0 && (
-            <>
-              <div className="hud-section-title hud-section-title-add">Added</div>
-              <ul>
-                {intent.creates.map((id) => (
-                  <li className="hud-file-add" key={id}>
-                    {id}
-                  </li>
-                ))}
-              </ul>
-            </>
-          )}
-          {previewing && intent.deletes.length > 0 && (
-            <>
-              <div className="hud-section-title hud-section-title-remove">Removed</div>
-              <ul>
-                {intent.deletes.map((id) => (
-                  <li className="hud-file-remove" key={id}>
-                    {id}
-                  </li>
-                ))}
-              </ul>
-            </>
-          )}
-          {previewing && (
-            <>
-              <PanelList
-                title="Functions"
-                items={symbolLabels(addedFunctions)}
-              />
-              <PanelList
-                title="Variables"
-                items={symbolLabels(addedVariables)}
-              />
-            </>
-          )}
-          {previewing && addedImports.length > 0 && (
-            <PanelList title="Imports" items={importLabels(addedImports)} />
-          )}
-          {previewing && addedImports.length === 0 && (intent.imports ?? []).length > 0 && (
-            <>
-              <div className="hud-section-title">Imports</div>
-              <ul>
-                {intent.imports.map((edge) => (
-                  <li key={`${edge.from}->${edge.to}`}>
-                    {edge.from.split('/').pop()} → {edge.to.split('/').pop()}
-                  </li>
-                ))}
-              </ul>
-            </>
-          )}
+          <MutationFold
+            hasContent={
+              previewing &&
+              (intent.files.length > 0 ||
+                (intent.createFolders ?? []).length > 0 ||
+                intent.creates.length > 0 ||
+                intent.deletes.length > 0 ||
+                addedFunctions.length > 0 ||
+                addedVariables.length > 0 ||
+                addedImports.length > 0 ||
+                (intent.imports ?? []).length > 0)
+            }
+          >
+            {intent.files.length > 0 && (
+              <>
+                <div className="hud-section-title hud-section-title-edit">Changed</div>
+                <ul>
+                  {intent.files.map((id) => (
+                    <li className="hud-file-edit" key={id}>
+                      {id}
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+            {(intent.createFolders ?? []).length > 0 && (
+              <>
+                <div className="hud-section-title hud-section-title-add">Added islands</div>
+                <ul>
+                  {intent.createFolders.map((id) => (
+                    <li className="hud-file-add" key={id}>
+                      {id}/
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+            {intent.creates.length > 0 && (
+              <>
+                <div className="hud-section-title hud-section-title-add">Added</div>
+                <ul>
+                  {intent.creates.map((id) => (
+                    <li className="hud-file-add" key={id}>
+                      {id}
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+            {intent.deletes.length > 0 && (
+              <>
+                <div className="hud-section-title hud-section-title-remove">Removed</div>
+                <ul>
+                  {intent.deletes.map((id) => (
+                    <li className="hud-file-remove" key={id}>
+                      {id}
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+            <PanelList
+              title="Functions"
+              items={symbolLabels(addedFunctions)}
+            />
+            <PanelList
+              title="Variables"
+              items={symbolLabels(addedVariables)}
+            />
+            {addedImports.length > 0 && (
+              <PanelList title="Imports" items={importLabels(addedImports)} />
+            )}
+            {addedImports.length === 0 && (intent.imports ?? []).length > 0 && (
+              <>
+                <div className="hud-section-title">Imports</div>
+                <ul>
+                  {intent.imports.map((edge) => (
+                    <li key={`${edge.from}->${edge.to}`}>
+                      {edge.from.split('/').pop()} → {edge.to.split('/').pop()}
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </MutationFold>
           {(planReady || preparing) && (
             <div className="hud-decide">
               <button
@@ -971,7 +1001,7 @@ export function HUD({
                 </>
               )}
               <span>Click a line to fly there</span>
-              <span>Double-click ground to walk</span>
+              <span>Shift-click ground to walk</span>
               {selected?.userCreated && creatingBlueprint && (
                 <span>Backspace delete</span>
               )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jkwd/inbase",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A first-person 3D map of a codebase, with a visual coding workflow for Cursor.",
   "repository": {
     "type": "git",