@jkwd/inbase 0.1.0

package/apps/explorer/src/layout.ts

@@ -0,0 +1,508 @@
+import { CONFIG, fileHeight } from './theme'
+import type {
+  CodebaseGraph,
+  FileNode,
+  FolderNode,
+  PatchImport,
+  PlacedBridge,
+  PlacedFile,
+  PlacedFolder,
+  WorldLayout,
+} from './types'
+
+function indexGraph(graph: CodebaseGraph) {
+  const folders = new Map(graph.folders.map((folder) => [folder.path, folder]))
+  const files = new Map(graph.files.map((file) => [file.id, file]))
+  return { folders, files }
+}
+
+function contentWidth() {
+  const fileOffset = CONFIG.aisleWidth / 2 + CONFIG.fileWidth / 2 + 0.7
+  const fileOuter = fileOffset + CONFIG.fileWidth / 2
+  return (fileOuter + 1.1) * 2
+}
+
+function dockPitch() {
+  return CONFIG.bridgeWidth + CONFIG.bridgeDockGap
+}
+
+function subtreeWidth(
+  folder: FolderNode,
+  folders: Map<string, FolderNode>,
+): number {
+  return Math.max(contentWidth(), childrenSpan(folder, folders), docksWidth(folder))
+}
+
+function childrenSpan(
+  folder: FolderNode,
+  folders: Map<string, FolderNode>,
+): number {
+  if (folder.children.length === 0) return 0
+
+  return folder.children.reduce((total, childPath, index) => {
+    const child = folders.get(childPath)
+    if (!child) return total
+    const gap = index === 0 ? 0 : CONFIG.siblingGap
+    return total + gap + subtreeWidth(child, folders)
+  }, 0)
+}
+
+function docksWidth(folder: FolderNode) {
+  if (folder.children.length === 0) return 0
+  const edge = CONFIG.bridgeWidth / 2 + 1.4
+  return (folder.children.length - 1) * dockPitch() + CONFIG.bridgeWidth + edge * 2
+}
+
+function areaDepthForCount(fileCount: number) {
+  const rows = Math.max(1, Math.ceil(fileCount / 2))
+  return CONFIG.areaPadding * 2 + rows * CONFIG.fileSpacing
+}
+
+function areaDepth(folder: FolderNode) {
+  return areaDepthForCount(folder.files.length)
+}
+
+function placeFolder(
+  folder: FolderNode,
+  originX: number,
+  originZ: number,
+  graph: ReturnType<typeof indexGraph>,
+  files: Record<string, PlacedFile>,
+  folders: Record<string, PlacedFolder>,
+  bridges: PlacedBridge[],
+) {
+  const depth = areaDepth(folder)
+  const childSpans = folder.children.map((childPath) => {
+    const child = graph.folders.get(childPath)
+    return child ? subtreeWidth(child, graph.folders) : 0
+  })
+  const span = childrenSpan(folder, graph.folders)
+  const width = Math.max(contentWidth(), span, docksWidth(folder))
+
+  folders[folder.path] = {
+    path: folder.path,
+    name: folder.name,
+    x: originX,
+    z: originZ,
+    width,
+    depth,
+  }
+
+  folder.files.forEach((fileId, index) => {
+    const file = graph.files.get(fileId)
+    if (!file) return
+    const height = fileHeight(file.lines)
+    const side: 1 | -1 = index % 2 === 0 ? -1 : 1
+    const row = Math.floor(index / 2)
+    const z = originZ + CONFIG.areaPadding + row * CONFIG.fileSpacing
+    const x =
+      originX + side * (CONFIG.aisleWidth / 2 + CONFIG.fileWidth / 2 + 0.7)
+
+    files[fileId] = {
+      id: fileId,
+      position: [x, height / 2, z],
+      size: [CONFIG.fileWidth, height, CONFIG.fileDepth],
+      aisleFace: side === -1 ? 1 : -1,
+    }
+  })
+
+  if (folder.children.length === 0) return
+
+  let cursorX = originX - span / 2
+  const parentExitZ = originZ + depth
+  const childStartZ = parentExitZ + CONFIG.bridgeLength
+
+  folder.children.forEach((childPath, index) => {
+    const child = graph.folders.get(childPath)
+    if (!child) return
+    const childSpan = childSpans[index]
+    const childX = cursorX + childSpan / 2
+    cursorX += childSpan + CONFIG.siblingGap
+
+    bridges.push({
+      id: `${folder.path}→${child.path}`,
+      label: child.name,
+      fromLabel: folder.name,
+      points: [
+        [childX, parentExitZ - CONFIG.bridgeOverlap],
+        [childX, childStartZ + CONFIG.bridgeOverlap],
+      ],
+    })
+
+    placeFolder(child, childX, childStartZ, graph, files, folders, bridges)
+  })
+}
+
+export function standInFront(file: PlacedFile): [number, number] {
+  return [
+    file.position[0] + file.aisleFace * (file.size[0] / 2 + 2.6),
+    file.position[2],
+  ]
+}
+
+export function relationTravelTarget(
+  fromId: string,
+  toId: string,
+  x: number,
+  z: number,
+  files: Record<string, PlacedFile>,
+): string {
+  const from = files[fromId]
+  const to = files[toId]
+  if (!from) return toId
+  if (!to) return fromId
+  const distFrom = Math.hypot(x - from.position[0], z - from.position[2])
+  const distTo = Math.hypot(x - to.position[0], z - to.position[2])
+  return distFrom <= distTo ? toId : fromId
+}
+
+export function filesImporting(files: FileNode[], id: string) {
+  return files.filter((file) => file.imports.includes(id))
+}
+
+export function folderOfFile(fileId: string) {
+  return fileId.includes('/') ? fileId.split('/').slice(0, -1).join('/') : '.'
+}
+
+export function folderParent(folderPath: string) {
+  if (!folderPath || folderPath === '.') return null
+  return folderPath.includes('/') ? folderPath.split('/').slice(0, -1).join('/') : '.'
+}
+
+function folderName(folderPath: string, rootName: string) {
+  if (!folderPath || folderPath === '.') return rootName
+  return folderPath.split('/').pop() ?? folderPath
+}
+
+function existingAncestor(
+  folderPath: string,
+  folders: Record<string, PlacedFolder>,
+) {
+  let current = folderPath
+  while (current && current !== '.') {
+    if (folders[current]) return current
+    current = current.includes('/')
+      ? current.split('/').slice(0, -1).join('/')
+      : '.'
+  }
+  if (folders['.']) return '.'
+  return Object.keys(folders)[0] ?? '.'
+}
+
+export function collectCreateFolders(
+  creates: string[],
+  existingFolders: Iterable<string>,
+) {
+  const known = new Set(existingFolders)
+  const created = new Set<string>()
+  for (const id of creates) {
+    let current = folderOfFile(id)
+    while (current && current !== '.') {
+      if (!known.has(current)) created.add(current)
+      current = folderParent(current) ?? '.'
+    }
+  }
+  return [...created].sort(
+    (left, right) =>
+      left.split('/').filter(Boolean).length - right.split('/').filter(Boolean).length ||
+      left.localeCompare(right),
+  )
+}
+
+function placeFileOnFolder(
+  id: string,
+  folder: PlacedFolder,
+  index: number,
+  lines: number,
+): PlacedFile {
+  const height = fileHeight(lines)
+  const side: 1 | -1 = index % 2 === 0 ? -1 : 1
+  const row = Math.floor(index / 2)
+  return {
+    id,
+    position: [
+      folder.x + side * (CONFIG.aisleWidth / 2 + CONFIG.fileWidth / 2 + 0.7),
+      height / 2,
+      folder.z + CONFIG.areaPadding + row * CONFIG.fileSpacing,
+    ],
+    size: [CONFIG.fileWidth, height, CONFIG.fileDepth],
+    aisleFace: side === -1 ? 1 : -1,
+  }
+}
+
+function ensurePreviewFolder(
+  folders: Map<string, FolderNode>,
+  folderPath: string,
+  rootName: string,
+) {
+  if (!folderPath || folders.has(folderPath)) return
+  const parent = folderParent(folderPath)
+  if (parent) ensurePreviewFolder(folders, parent, rootName)
+  folders.set(folderPath, {
+    path: folderPath,
+    name: folderName(folderPath, rootName),
+    parent,
+    files: [],
+    children: [],
+  })
+  if (parent) {
+    const parentFolder = folders.get(parent)
+    if (parentFolder && !parentFolder.children.includes(folderPath)) {
+      parentFolder.children.push(folderPath)
+      parentFolder.children.sort((left, right) => left.localeCompare(right))
+    }
+  }
+}
+
+export function withPreviewGraph(
+  graph: CodebaseGraph,
+  creates: string[],
+  createLines: Record<string, number> = {},
+  createFolders: string[] = [],
+  imports: PatchImport[] = [],
+): CodebaseGraph {
+  const files = new Map(
+    graph.files.map((file) => [file.id, { ...file, imports: [...file.imports] }]),
+  )
+  const folders = new Map(
+    graph.folders.map((folder) => [
+      folder.path,
+      { ...folder, files: [...folder.files], children: [...folder.children] },
+    ]),
+  )
+
+  for (const folderPath of createFolders) {
+    ensurePreviewFolder(folders, folderPath, graph.targetName)
+  }
+
+  for (const id of creates) {
+    const folderPath = folderOfFile(id)
+    ensurePreviewFolder(folders, folderPath, graph.targetName)
+    if (!files.has(id)) {
+      files.set(id, {
+        id,
+        name: id.split('/').pop() ?? id,
+        path: id,
+        folder: folderPath,
+        lines: createLines[id] ?? 12,
+        language: id.split('.').pop()?.toLowerCase() ?? 'txt',
+        symbols: [],
+        imports: imports.filter((edge) => edge.from === id).map((edge) => edge.to),
+      })
+    }
+    const folder = folders.get(folderPath)
+    if (folder && !folder.files.includes(id)) {
+      folder.files.push(id)
+      folder.files.sort((left, right) => left.localeCompare(right))
+    }
+  }
+
+  return {
+    ...graph,
+    files: [...files.values()],
+    folders: [...folders.values()],
+  }
+}
+
+export function markCreatedFolders(layout: WorldLayout, createFolders: string[]) {
+  for (const path of createFolders) {
+    const folder = layout.folders[path]
+    if (folder) layout.folders[path] = { ...folder, added: true }
+  }
+  return layout
+}
+
+export type PreviewOverlay = {
+  files: Record<string, PlacedFile>
+  folders: Record<string, PlacedFolder>
+  bridges: PlacedBridge[]
+}
+
+export function placePreviewCreates(
+  graph: CodebaseGraph,
+  layout: WorldLayout,
+  creates: string[],
+  createLines: Record<string, number> = {},
+): PreviewOverlay {
+  const extraFiles: Record<string, PlacedFile> = {}
+  const extraFolders: Record<string, PlacedFolder> = {}
+  const extraBridges: PlacedBridge[] = []
+  const allFolders = () => ({ ...layout.folders, ...extraFolders })
+  const newFolders = collectCreateFolders(creates, Object.keys(layout.folders))
+  const filesByFolder = new Map<string, string[]>()
+
+  for (const id of creates) {
+    const folderPath = folderOfFile(id)
+    const list = filesByFolder.get(folderPath) ?? []
+    list.push(id)
+    filesByFolder.set(folderPath, list)
+  }
+
+  for (const folderPath of newFolders) {
+    const parentPath = existingAncestor(folderParent(folderPath) ?? '.', allFolders())
+    const parent = allFolders()[parentPath]
+    if (!parent) continue
+
+    const fileCount = filesByFolder.get(folderPath)?.length ?? 0
+    const width = contentWidth()
+    const depth = areaDepthForCount(fileCount)
+    const siblings = Object.values(allFolders()).filter(
+      (folder) => folderParent(folder.path) === parentPath,
+    )
+    const x =
+      siblings.length === 0
+        ? parent.x
+        : Math.max(...siblings.map((folder) => folder.x + folder.width / 2)) +
+          CONFIG.siblingGap +
+          width / 2
+    const z = parent.z + parent.depth + CONFIG.bridgeLength
+
+    extraFolders[folderPath] = {
+      path: folderPath,
+      name: folderName(folderPath, graph.targetName),
+      x,
+      z,
+      width,
+      depth,
+      added: true,
+    }
+    extraBridges.push({
+      id: `${parentPath}→${folderPath}`,
+      label: folderName(folderPath, graph.targetName),
+      fromLabel: parent.name,
+      points: [
+        [x, parent.z + parent.depth - CONFIG.bridgeOverlap],
+        [x, z + CONFIG.bridgeOverlap],
+      ],
+    })
+  }
+
+  const used = new Map(
+    graph.folders.map((folder) => [folder.path, folder.files.length]),
+  )
+  for (const path of Object.keys(extraFolders)) used.set(path, 0)
+
+  for (const id of creates) {
+    if (layout.files[id] || extraFiles[id]) continue
+    const folderPath = folderOfFile(id)
+    const folders = allFolders()
+    const folder = folders[folderPath] ?? folders[existingAncestor(folderPath, folders)]
+    if (!folder) continue
+    const index = used.get(folder.path) ?? 0
+    used.set(folder.path, index + 1)
+    extraFiles[id] = placeFileOnFolder(id, folder, index, createLines[id] ?? 12)
+  }
+
+  return { files: extraFiles, folders: extraFolders, bridges: extraBridges }
+}
+
+export function withPreviewLayout(
+  layout: WorldLayout,
+  overlay: PreviewOverlay,
+): WorldLayout {
+  return {
+    ...layout,
+    files: { ...layout.files, ...overlay.files },
+    folders: { ...layout.folders, ...overlay.folders },
+    bridges: [...layout.bridges, ...overlay.bridges],
+  }
+}
+
+export function layoutWorld(graph: CodebaseGraph): WorldLayout {
+  const indexed = indexGraph(graph)
+  const root = indexed.folders.get(graph.root)
+  if (!root) {
+    throw new Error('Codebase graph is missing the root folder')
+  }
+
+  const files: Record<string, PlacedFile> = {}
+  const folders: Record<string, PlacedFolder> = {}
+  const bridges: PlacedBridge[] = []
+
+  placeFolder(root, 0, 0, indexed, files, folders, bridges)
+
+  const rootFolder = folders[root.path]
+  return {
+    files,
+    folders,
+    bridges,
+    spawn: [rootFolder.x, CONFIG.eyeHeight, rootFolder.z + 2.4],
+  }
+}
+
+export function folderAt(
+  x: number,
+  z: number,
+  layout: WorldLayout,
+): PlacedFolder | null {
+  let current: PlacedFolder | null = null
+  for (const folder of Object.values(layout.folders)) {
+    const insideX = Math.abs(x - folder.x) <= folder.width / 2
+    const insideZ = z >= folder.z && z <= folder.z + folder.depth
+    if (insideX && insideZ) current = folder
+  }
+  return current
+}
+
+function distanceToSegment(
+  px: number,
+  pz: number,
+  ax: number,
+  az: number,
+  bx: number,
+  bz: number,
+) {
+  const dx = bx - ax
+  const dz = bz - az
+  const lengthSq = dx * dx + dz * dz
+  if (lengthSq === 0) return Math.hypot(px - ax, pz - az)
+  const t = Math.max(0, Math.min(1, ((px - ax) * dx + (pz - az) * dz) / lengthSq))
+  return Math.hypot(px - (ax + t * dx), pz - (az + t * dz))
+}
+
+export function locationLabel(x: number, z: number, layout: WorldLayout) {
+  const folder = folderAt(x, z, layout)
+  if (folder) return folder.name
+
+  for (const bridge of layout.bridges) {
+    for (let i = 1; i < bridge.points.length; i += 1) {
+      const from = bridge.points[i - 1]
+      const to = bridge.points[i]
+      const distance = distanceToSegment(x, z, from[0], from[1], to[0], to[1])
+      if (distance <= CONFIG.bridgeWidth / 2 + 0.5) {
+        return `bridge to ${bridge.label}`
+      }
+    }
+  }
+
+  return 'open ground'
+}
+
+export function worldBounds(layout: WorldLayout) {
+  let minX = Infinity
+  let maxX = -Infinity
+  let minZ = Infinity
+  let maxZ = -Infinity
+
+  for (const folder of Object.values(layout.folders)) {
+    minX = Math.min(minX, folder.x - folder.width / 2)
+    maxX = Math.max(maxX, folder.x + folder.width / 2)
+    minZ = Math.min(minZ, folder.z)
+    maxZ = Math.max(maxZ, folder.z + folder.depth)
+  }
+
+  if (!Number.isFinite(minX)) {
+    return { minX: -20, maxX: 20, minZ: -20, maxZ: 20, cx: 0, cz: 0, width: 40, depth: 40 }
+  }
+
+  return {
+    minX,
+    maxX,
+    minZ,
+    maxZ,
+    cx: (minX + maxX) / 2,
+    cz: (minZ + maxZ) / 2,
+    width: maxX - minX,
+    depth: maxZ - minZ,
+  }
+}

package/apps/explorer/src/main.tsx

@@ -0,0 +1,16 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+const rootElement = document.getElementById('root')
+
+if (!rootElement) {
+  throw new Error('Root element #root was not found')
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

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

@@ -0,0 +1,87 @@
+import { useEffect } from 'react'
+import { useThree } from '@react-three/fiber'
+import * as THREE from 'three'
+import { folderAt } from '../layout'
+import type { WorldLayout } from '../types'
+
+type BlockPlacerProps = {
+  enabled: boolean
+  layout: WorldLayout
+  onPlace: (spot: { x: number; z: number; folder: string }) => void
+}
+
+const ndc = new THREE.Vector2(0, 0)
+const raycaster = new THREE.Raycaster()
+const ground = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
+const hit = new THREE.Vector3()
+const forward = new THREE.Vector3()
+
+const PLACE_MIN = 3
+const PLACE_MAX = 22
+
+function typingInField(target: EventTarget | null) {
+  return (
+    target instanceof HTMLElement &&
+    (target.tagName === 'TEXTAREA' ||
+      target.tagName === 'INPUT' ||
+      target.tagName === 'SELECT' ||
+      target.isContentEditable)
+  )
+}
+
+function lookPoint(camera: THREE.Camera): { x: number; z: number } {
+  raycaster.setFromCamera(ndc, camera)
+  const reached = raycaster.ray.intersectPlane(ground, hit)
+  camera.getWorldDirection(forward)
+  forward.y = 0
+  if (forward.lengthSq() === 0) forward.set(0, 0, 1)
+  else forward.normalize()
+
+  let x: number
+  let z: number
+  if (reached) {
+    x = hit.x
+    z = hit.z
+  } else {
+    x = camera.position.x + forward.x * 8
+    z = camera.position.z + forward.z * 8
+  }
+
+  const dx = x - camera.position.x
+  const dz = z - camera.position.z
+  const distance = Math.hypot(dx, dz)
+  if (distance < 0.001) {
+    return {
+      x: camera.position.x + forward.x * PLACE_MIN,
+      z: camera.position.z + forward.z * PLACE_MIN,
+    }
+  }
+  const clamped = Math.min(PLACE_MAX, Math.max(PLACE_MIN, distance))
+  const scale = clamped / distance
+  return {
+    x: camera.position.x + dx * scale,
+    z: camera.position.z + dz * scale,
+  }
+}
+
+export function BlockPlacer({ enabled, layout, onPlace }: BlockPlacerProps) {
+  const { camera } = useThree()
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (!enabled || event.repeat || event.code !== 'Space') return
+      if (typingInField(event.target)) return
+      event.preventDefault()
+      const { x, z } = lookPoint(camera)
+      const island =
+        folderAt(x, z, layout) ??
+        folderAt(camera.position.x, camera.position.z, layout)
+      onPlace({ x, z, folder: island?.path ?? '.' })
+    }
+
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [camera, enabled, layout, onPlace])
+
+  return null
+}