@jkwd/inbase 0.1.0

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

@@ -0,0 +1,290 @@
+import { Suspense } from 'react'
+import { Text } from '@react-three/drei'
+import { CONFIG } from '../theme'
+import type { PlacedBridge } from '../types'
+
+const WALK_Y = 0.02
+const LAND_COLOR = '#2a3340'
+const SPAN_COLOR = '#232e3a'
+const CORNER_SIZE = CONFIG.bridgeWidth
+
+const POST_W = 0.3
+const POST_D = 0.38
+const POST_H = 3.45
+const LINTEL_H = 0.34
+const CAP_H = 0.2
+const CAP_OVERHANG = 0.42
+const SIGN_H = 0.72
+const SIGN_D = 0.08
+const GATE_COLOR = '#4a5564'
+const CAP_COLOR = '#5a6574'
+const SIGN_COLOR = '#323a46'
+
+type BridgeProps = {
+  bridge: PlacedBridge
+}
+
+type Segment = {
+  key: string
+  x: number
+  z: number
+  width: number
+  depth: number
+}
+
+type WalkPiece = Segment & { color: string }
+
+function segmentsFromPoints(points: [number, number][]): Segment[] {
+  const segments: Segment[] = []
+
+  for (let i = 1; i < points.length; i += 1) {
+    const [x0, z0] = points[i - 1]
+    const [x1, z1] = points[i]
+    const alongX = Math.abs(x1 - x0) >= Math.abs(z1 - z0)
+    const length = alongX ? Math.abs(x1 - x0) : Math.abs(z1 - z0)
+    if (length < 0.01) continue
+
+    segments.push({
+      key: `seg-${i}`,
+      x: (x0 + x1) / 2,
+      z: (z0 + z1) / 2,
+      width: alongX ? length : CONFIG.bridgeWidth,
+      depth: alongX ? CONFIG.bridgeWidth : length,
+    })
+  }
+
+  return segments
+}
+
+function cornersFromPoints(points: [number, number][]) {
+  const corners: { x: number; z: number }[] = []
+  for (let i = 1; i < points.length - 1; i += 1) {
+    const prev = points[i - 1]
+    const point = points[i]
+    const next = points[i + 1]
+    const incomingX = Math.abs(point[0] - prev[0]) > Math.abs(point[1] - prev[1])
+    const outgoingX = Math.abs(next[0] - point[0]) > Math.abs(next[1] - point[1])
+    if (incomingX !== outgoingX) {
+      corners.push({ x: point[0], z: point[1] })
+    }
+  }
+  return corners
+}
+
+function splitOverLand(segment: Segment): WalkPiece[] {
+  const overlap = CONFIG.bridgeOverlap
+  const alongX = segment.width >= segment.depth
+  const length = alongX ? segment.width : segment.depth
+  const spanLength = Math.max(0, length - overlap * 2)
+
+  if (spanLength < 0.01) {
+    return [{ ...segment, color: LAND_COLOR }]
+  }
+
+  if (alongX) {
+    const left = segment.x - length / 2
+    return [
+      {
+        key: `${segment.key}-land-a`,
+        x: left + overlap / 2,
+        z: segment.z,
+        width: overlap,
+        depth: segment.depth,
+        color: LAND_COLOR,
+      },
+      {
+        key: `${segment.key}-span`,
+        x: segment.x,
+        z: segment.z,
+        width: spanLength,
+        depth: segment.depth,
+        color: SPAN_COLOR,
+      },
+      {
+        key: `${segment.key}-land-b`,
+        x: left + length - overlap / 2,
+        z: segment.z,
+        width: overlap,
+        depth: segment.depth,
+        color: LAND_COLOR,
+      },
+    ]
+  }
+
+  const start = segment.z - length / 2
+  return [
+    {
+      key: `${segment.key}-land-a`,
+      x: segment.x,
+      z: start + overlap / 2,
+      width: segment.width,
+      depth: overlap,
+      color: LAND_COLOR,
+    },
+    {
+      key: `${segment.key}-span`,
+      x: segment.x,
+      z: segment.z,
+      width: segment.width,
+      depth: spanLength,
+      color: SPAN_COLOR,
+    },
+    {
+      key: `${segment.key}-land-b`,
+      x: segment.x,
+      z: start + length - overlap / 2,
+      width: segment.width,
+      depth: overlap,
+      color: LAND_COLOR,
+    },
+  ]
+}
+
+function Walk({
+  x,
+  z,
+  width,
+  depth,
+  color,
+}: {
+  x: number
+  z: number
+  width: number
+  depth: number
+  color: string
+}) {
+  return (
+    <mesh position={[x, WALK_Y, z]} rotation={[-Math.PI / 2, 0, 0]}>
+      <planeGeometry args={[width, depth]} />
+      <meshBasicMaterial color={color} />
+    </mesh>
+  )
+}
+
+function segmentDir(from: [number, number], to: [number, number]): [number, number] {
+  const dx = to[0] - from[0]
+  const dz = to[1] - from[1]
+  const length = Math.hypot(dx, dz)
+  if (length < 0.001) return [0, 1]
+  return [dx / length, dz / length]
+}
+
+function Gate({
+  x,
+  z,
+  faceX,
+  faceZ,
+  label,
+}: {
+  x: number
+  z: number
+  faceX: number
+  faceZ: number
+  label: string
+}) {
+  const rotationY = Math.atan2(faceX, faceZ)
+  const postX = CONFIG.bridgeWidth / 2 + POST_W / 2
+  const lintelW = postX * 2 + POST_W
+  const capW = lintelW + CAP_OVERHANG * 2
+  const lintelY = POST_H + LINTEL_H / 2
+  const capY = POST_H + LINTEL_H + CAP_H / 2
+  const signY = POST_H + LINTEL_H / 2
+  const signZ = POST_D / 2 + SIGN_D / 2 + 0.01
+  const fontSize = Math.min(0.42, (lintelW - 0.55) / Math.max(label.length * 0.62, 3))
+
+  return (
+    <group position={[x, 0, z]} rotation={[0, rotationY, 0]}>
+      <mesh position={[-postX, POST_H / 2, 0]}>
+        <boxGeometry args={[POST_W, POST_H, POST_D]} />
+        <meshLambertMaterial color={GATE_COLOR} />
+      </mesh>
+      <mesh position={[postX, POST_H / 2, 0]}>
+        <boxGeometry args={[POST_W, POST_H, POST_D]} />
+        <meshLambertMaterial color={GATE_COLOR} />
+      </mesh>
+      <mesh position={[0, lintelY, 0]}>
+        <boxGeometry args={[lintelW, LINTEL_H, POST_D]} />
+        <meshLambertMaterial color={GATE_COLOR} />
+      </mesh>
+      <mesh position={[0, capY, 0]}>
+        <boxGeometry args={[capW, CAP_H, POST_D + 0.08]} />
+        <meshLambertMaterial color={CAP_COLOR} />
+      </mesh>
+      <mesh position={[0, signY, signZ]}>
+        <boxGeometry args={[lintelW - 0.18, SIGN_H, SIGN_D]} />
+        <meshLambertMaterial color={SIGN_COLOR} />
+      </mesh>
+      <Suspense fallback={null}>
+        <Text
+          position={[0, signY, signZ + SIGN_D / 2 + 0.01]}
+          fontSize={fontSize}
+          color="#e7ebf2"
+          anchorX="center"
+          anchorY="middle"
+          maxWidth={lintelW - 0.4}
+          overflowWrap="break-word"
+          outlineWidth={0.02}
+          outlineColor="#07080b"
+        >
+          {label}
+        </Text>
+      </Suspense>
+    </group>
+  )
+}
+
+export function Bridge({ bridge }: BridgeProps) {
+  const segments = segmentsFromPoints(bridge.points)
+  const corners = cornersFromPoints(bridge.points)
+  const start = bridge.points[0]
+  const end = bridge.points[bridge.points.length - 1]
+  const second = bridge.points[1]
+  const beforeEnd = bridge.points[bridge.points.length - 2]
+  const startDir = start && second ? segmentDir(start, second) : null
+  const endDir = beforeEnd && end ? segmentDir(beforeEnd, end) : null
+
+  return (
+    <group>
+      {segments.flatMap(splitOverLand).map((piece) => (
+        <Walk
+          key={piece.key}
+          x={piece.x}
+          z={piece.z}
+          width={piece.width}
+          depth={piece.depth}
+          color={piece.color}
+        />
+      ))}
+
+      {corners.map((corner) => (
+        <Walk
+          key={`corner-${corner.x}-${corner.z}`}
+          x={corner.x}
+          z={corner.z}
+          width={CORNER_SIZE}
+          depth={CORNER_SIZE}
+          color={SPAN_COLOR}
+        />
+      ))}
+
+      {start && startDir && (
+        <Gate
+          x={start[0]}
+          z={start[1]}
+          faceX={-startDir[0]}
+          faceZ={-startDir[1]}
+          label={bridge.label}
+        />
+      )}
+      {end && endDir && (
+        <Gate
+          x={end[0]}
+          z={end[1]}
+          faceX={endDir[0]}
+          faceZ={endDir[1]}
+          label={bridge.fromLabel}
+        />
+      )}
+    </group>
+  )
+}

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

@@ -0,0 +1,256 @@
+import { Suspense } from 'react'
+import { Billboard, Edges, Html, Text } from '@react-three/drei'
+import { CHANGE_HIGHLIGHT, CONFIG, dimColor, fileColor, 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 }[] = [
+  { rotationY: 0, axis: 'z', sign: 1 },
+  { rotationY: Math.PI, axis: 'z', sign: -1 },
+  { rotationY: Math.PI / 2, axis: 'x', sign: 1 },
+  { rotationY: -Math.PI / 2, axis: 'x', sign: -1 },
+]
+
+type FileBlockProps = {
+  file: FileNode
+  placed: PlacedFile
+  selected: boolean
+  related: boolean
+  planned: boolean
+  changeKind?: ChangeKind | null
+  added?: boolean
+  aimed?: boolean
+  dimmed: boolean
+  naming?: boolean
+  mapMode?: 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}`
+  return name
+}
+
+export function FileBlock({
+  file,
+  placed,
+  selected,
+  related,
+  planned,
+  changeKind = null,
+  added = false,
+  aimed = false,
+  dimmed,
+  naming = false,
+  mapMode = false,
+  onCommitName,
+  onCancelName,
+}: FileBlockProps) {
+  const [width, height, depth] = placed.size
+  const highlight = changeKind ? 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'
+    : highlight
+      ? highlight.color
+      : dimmed
+        ? '#b4bcc8'
+        : '#e7ebf2'
+  const meshColor = aimed
+    ? '#9ad8ff'
+    : highlight
+      ? highlight.color
+      : walkSelected
+        ? '#5d9ec4'
+        : related
+          ? '#4e7f72'
+          : dimmed
+            ? muted
+            : color
+
+  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 && (
+          <Edges
+            color="#000000"
+            dashed
+            dashSize={0.18}
+            gapSize={0.1}
+            lineWidth={2.5}
+            toneMapped={false}
+            scale={1.002}
+          />
+        )}
+      </mesh>
+      {mapSelected && (
+        <MapSelectBorder
+          width={width}
+          depth={depth}
+          y={height / 2 + 0.05}
+          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]}
+          center
+          occlude={false}
+          wrapperClass="block-name-overlay"
+          zIndexRange={[100, 0]}
+        >
+          <NameInput
+            placeholder="File name"
+            onCommit={onCommitName}
+            onCancel={onCancelName}
+          />
+        </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}
+              >
+                {label}
+              </Text>
+            )
+          })}
+      </Suspense>
+    </group>
+  )
+}

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

@@ -0,0 +1,96 @@
+import { Suspense } from 'react'
+import { Text } from '@react-three/drei'
+import { CHANGE_HIGHLIGHT, folderFloorColor, MAP_SELECTION, type ChangeKind } from '../theme'
+import type { PlacedFolder } from '../types'
+import { MapSelectBorder } from './MapSelectBorder'
+
+type FolderAreaProps = {
+  folder: PlacedFolder
+  naming?: boolean
+  selected?: boolean
+  highlightKind?: ChangeKind | null
+}
+
+export function FolderArea({
+  folder,
+  naming = false,
+  selected = false,
+  highlightKind = null,
+}: FolderAreaProps) {
+  const added = Boolean(folder.added)
+  const highlight = highlightKind ? CHANGE_HIGHLIGHT[highlightKind] : null
+  const addedOnly = added && !highlight
+  const outline = highlight ? highlight.color : addedOnly ? '#7ec8e8' : null
+  const color = highlight
+    ? highlight.floor
+    : addedOnly
+      ? '#16323f'
+      : folderFloorColor(folder.path)
+  const label =
+    highlightKind === 'remove'
+      ? `- ${folder.name}`
+      : highlightKind === 'add' || added
+        ? `+ ${folder.name}`
+        : folder.name
+
+  return (
+    <group position={[folder.x, 0, folder.z + folder.depth / 2]}>
+      {outline && (
+        <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.01, 0]}>
+          <planeGeometry args={[folder.width + 0.9, folder.depth + 0.9]} />
+          <meshBasicMaterial
+            color={outline}
+            toneMapped={false}
+          />
+        </mesh>
+      )}
+      <mesh rotation={[-Math.PI / 2, 0, 0]}>
+        <planeGeometry args={[folder.width, folder.depth]} />
+        <meshBasicMaterial color={color} />
+      </mesh>
+      {selected && (
+        <MapSelectBorder
+          width={folder.width}
+          depth={folder.depth}
+          y={0.06}
+          stroke={MAP_SELECTION.islandPad}
+        />
+      )}
+      <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'}
+        />
+      </mesh>
+      {folder.width > 28 && (
+        <mesh
+          position={[0, 0.02, folder.depth / 2 - 1.3]}
+          rotation={[-Math.PI / 2, 0, 0]}
+        >
+          <planeGeometry args={[folder.width - 2.4, 2.4]} />
+          <meshBasicMaterial
+            color={
+              highlight ? highlight.aisle : addedOnly ? '#23485a' : '#2a3340'
+            }
+          />
+        </mesh>
+      )}
+      <Suspense fallback={null}>
+        {!naming && (
+          <Text
+            position={[0, 0.05, -folder.depth / 2 + 1.6]}
+            rotation={[-Math.PI / 2, 0, 0]}
+            fontSize={0.55}
+            color={
+              highlight ? highlight.color : addedOnly ? '#9ad8ff' : '#8b95a5'
+            }
+            anchorX="center"
+            anchorY="middle"
+          >
+            {label}
+          </Text>
+        )}
+      </Suspense>
+    </group>
+  )
+}

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

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import { useThree } from '@react-three/fiber'
+import { folderAt } from '../layout'
+import type { WorldLayout } from '../types'
+
+type IslandPlacerProps = {
+  enabled: boolean
+  layout: WorldLayout
+  onPlace: (parent: string) => void
+}
+
+function typingInField(target: EventTarget | null) {
+  return (
+    target instanceof HTMLElement &&
+    (target.tagName === 'TEXTAREA' ||
+      target.tagName === 'INPUT' ||
+      target.tagName === 'SELECT' ||
+      target.isContentEditable)
+  )
+}
+
+export function IslandPlacer({ enabled, layout, onPlace }: IslandPlacerProps) {
+  const { camera } = useThree()
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (!enabled || event.repeat || event.code !== 'KeyB') return
+      if (typingInField(event.target)) return
+      const island = folderAt(camera.position.x, camera.position.z, layout)
+      if (!island) return
+      event.preventDefault()
+      onPlace(island.path)
+    }
+
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [camera, enabled, layout, onPlace])
+
+  return null
+}