npm - @jkwd/inbase - Versions diffs - 0.1.12 → 0.1.13 - Mend

@jkwd/inbase 0.1.12 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/README.md +1 -1
package/apps/explorer/scripts/session-store.d.ts +2 -0
package/apps/explorer/scripts/session-store.mjs +72 -10
package/apps/explorer/src/App.tsx +6 -0
package/apps/explorer/src/agentIntent.ts +7 -1
package/apps/explorer/src/index.css +106 -1
package/apps/explorer/src/scene/DistantFileBlocks.tsx +44 -0
package/apps/explorer/src/scene/FileBlock.tsx +28 -37
package/apps/explorer/src/scene/FolderArea.tsx +4 -2
package/apps/explorer/src/scene/MapView.tsx +117 -36
package/apps/explorer/src/scene/SelectionThumbnail.tsx +9 -1
package/apps/explorer/src/scene/WalkLodTracker.tsx +92 -0
package/apps/explorer/src/scene/World.tsx +109 -24
package/apps/explorer/src/scene/walkLod.ts +201 -0
package/apps/explorer/src/types.ts +1 -0
package/apps/explorer/src/ui/HUD.tsx +53 -27
package/apps/explorer/vite.config.ts +2 -0
package/bin/session.mjs +1 -1
package/package.json +1 -1
package/skill/commands/inbase.md +2 -2
package/skill/inbase/SKILL.md +2 -1

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

@@ -1,10 +1,11 @@
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { useFrame, useThree } from '@react-three/fiber'
 import { Html, MapControls, OrthographicCamera } from '@react-three/drei'
 import * as THREE from 'three'
 import { folderAt, worldBounds } from '../layout'
 import type { ChangeKind } from '../theme'
-import type { WorldLayout } from '../types'
+import type { PlacedFolder, WorldLayout } from '../types'
 export type MapBlueprintMenu = {
   x: number
@@ -38,7 +39,10 @@ export function MapView({
   onBlueprintMenu,
 }: MapViewProps) {
   const size = useThree((state) => state.size)
-  const { camera, gl, invalidate, scene } = useThree()
+  const camera = useThree((state) => state.camera)
+  const gl = useThree((state) => state.gl)
+  const invalidate = useThree((state) => state.invalidate)
+  const scene = useThree((state) => state.scene)
   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
@@ -305,44 +309,121 @@ export function MapView({
           maxZoom={Math.max(fitZoom * 10, 20)}
         />
       )}
-      {enabled &&
-        Object.values(layout.folders).map((folder) => (
-          <Html
-            key={folder.path}
-            position={[folder.x, 14, folder.z + 1.35]}
-            center
-            zIndexRange={[80, 50]}
-            style={{ pointerEvents: 'none' }}
-          >
-            <div
-              className={[
-                'map-folder-label',
-                highlightedFolders?.[folder.path]
-                  ? `map-folder-label-${highlightedFolders[folder.path]}`
-                  : folder.added
-                    ? 'map-folder-label-added'
-                    : selectedFolder === folder.path
-                      ? 'map-folder-label-selected'
-                      : '',
-              ]
-                .filter(Boolean)
-                .join(' ')}
-            >
-              <span className="map-folder-name">
-                {folderKindLabel(
-                  folder.name,
-                  highlightedFolders?.[folder.path] ?? null,
-                  folder.added ?? false,
-                )}
-              </span>
-            </div>
-          </Html>
-        ))}
+      {enabled && (
+        <MapFolderLabels
+          folders={layout.folders}
+          highlightedFolders={highlightedFolders}
+          selectedFolder={selectedFolder}
+        />
+      )}
       {enabled && marker && <LandMarker marker={marker} />}
     </>
   )
 }
+const PROJECT = new THREE.Vector3()
+const MIN_FOLDER_LABEL_PX = 28
+function folderLabelClass(
+  folder: PlacedFolder,
+  highlightedFolders: Partial<Record<string, ChangeKind>> | undefined,
+  selectedFolder: string | null,
+) {
+  return [
+    'map-folder-label',
+    highlightedFolders?.[folder.path]
+      ? `map-folder-label-${highlightedFolders[folder.path]}`
+      : folder.added
+        ? 'map-folder-label-added'
+        : selectedFolder === folder.path
+          ? 'map-folder-label-selected'
+          : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+}
+function MapFolderLabels({
+  folders,
+  highlightedFolders,
+  selectedFolder,
+}: {
+  folders: Record<string, PlacedFolder>
+  highlightedFolders?: Partial<Record<string, ChangeKind>>
+  selectedFolder: string | null
+}) {
+  const camera = useThree((state) => state.camera)
+  const gl = useThree((state) => state.gl)
+  const size = useThree((state) => state.size)
+  const layerRef = useRef<HTMLDivElement>(null)
+  const items = useMemo(() => Object.values(folders), [folders])
+  const [host, setHost] = useState<HTMLElement | null>(null)
+  useLayoutEffect(() => {
+    setHost(gl.domElement.parentElement)
+  }, [gl])
+  useFrame(() => {
+    const layer = layerRef.current
+    if (!layer) return
+    const zoom = 'zoom' in camera ? Number(camera.zoom) : 1
+    const nodes = layer.children
+    for (let i = 0; i < items.length; i += 1) {
+      const el = nodes[i] as HTMLElement | undefined
+      const folder = items[i]
+      if (!el || !folder) continue
+      PROJECT.set(folder.x, 14, folder.z + 1.35).project(camera)
+      const x = (PROJECT.x * 0.5 + 0.5) * size.width
+      const y = (-PROJECT.y * 0.5 + 0.5) * size.height
+      const span = Math.max(folder.width, folder.depth) * zoom
+      const force =
+        selectedFolder === folder.path ||
+        Boolean(highlightedFolders?.[folder.path] || folder.added)
+      const onScreen =
+        PROJECT.z >= -1 &&
+        PROJECT.z <= 1 &&
+        x > -120 &&
+        x < size.width + 120 &&
+        y > -40 &&
+        y < size.height + 40
+      if (!onScreen || (!force && span < MIN_FOLDER_LABEL_PX)) {
+        if (el.style.visibility !== 'hidden') el.style.visibility = 'hidden'
+        continue
+      }
+      const tx = Math.round(x)
+      const ty = Math.round(y)
+      const next = `${tx},${ty}`
+      if (el.dataset.pos !== next) {
+        el.dataset.pos = next
+        el.style.transform = `translate3d(${tx}px, ${ty}px, 0) translate(-50%, -50%)`
+      }
+      if (el.style.visibility !== 'visible') el.style.visibility = 'visible'
+    }
+  })
+  if (!host) return null
+  return createPortal(
+    <div ref={layerRef} className="map-folder-label-layer">
+      {items.map((folder) => (
+        <div
+          key={folder.path}
+          className={folderLabelClass(folder, highlightedFolders, selectedFolder)}
+        >
+          <span className="map-folder-name">
+            {folderKindLabel(
+              folder.name,
+              highlightedFolders?.[folder.path] ?? null,
+              folder.added ?? false,
+            )}
+          </span>
+        </div>
+      ))}
+    </div>,
+    host,
+  )
+}
 function folderKindLabel(
   name: string,
   kind: ChangeKind | null | undefined,

package/apps/explorer/src/scene/SelectionThumbnail.tsx CHANGED Viewed

@@ -425,16 +425,20 @@ function CameraRig({
 function ThumbnailLabelFilter({
   candidates,
   zoom,
+  frozenRef,
   onChange,
 }: {
   candidates: LabelCandidate[]
   zoom: number
+  frozenRef: { current: boolean }
   onChange: (ids: Set<string>) => void
 }) {
-  const { camera, size } = useThree()
+  const camera = useThree((state) => state.camera)
+  const size = useThree((state) => state.size)
   const visibleRef = useRef<Set<string>>(new Set())
   useFrame(() => {
+    if (frozenRef.current) return
     const next = visibleThumbnailLabels(
       candidates,
       camera,
@@ -464,6 +468,7 @@ function ThumbnailScene({
   panRef,
   orbitRef,
   cameraRef,
+  frozenRef,
   visibleLabelIds,
   onVisibleLabels,
 }: {
@@ -480,6 +485,7 @@ function ThumbnailScene({
   panRef: { current: Vec3 }
   orbitRef: { current: Orbit }
   cameraRef: { current: THREE.Camera | null }
+  frozenRef: { current: boolean }
   visibleLabelIds: Set<string>
   onVisibleLabels: (ids: Set<string>) => void
 }) {
@@ -541,6 +547,7 @@ function ThumbnailScene({
       <ThumbnailLabelFilter
         candidates={labelCandidates}
         zoom={zoom}
+        frozenRef={frozenRef}
         onChange={onVisibleLabels}
       />
       <FolderArea
@@ -977,6 +984,7 @@ export function SelectionThumbnail({
             panRef={panRef}
             orbitRef={orbitRef}
             cameraRef={cameraRef}
+            frozenRef={panningRef}
             visibleLabelIds={visibleLabelIds}
             onVisibleLabels={setVisibleLabelIds}
           />

package/apps/explorer/src/scene/WalkLodTracker.tsx ADDED Viewed

@@ -0,0 +1,92 @@
+import { useLayoutEffect, useRef } from 'react'
+import { useFrame, useThree } from '@react-three/fiber'
+import * as THREE from 'three'
+import type { PlacedBridge, PlacedFile, PlacedFolder } from '../types'
+import {
+  computeWalkLod,
+  sameWalkLod,
+  walkLodCell,
+  type WalkLod,
+} from './walkLod'
+const look = new THREE.Vector3()
+type WalkLodTrackerProps = {
+  files: Record<string, PlacedFile>
+  folders: Record<string, PlacedFolder>
+  bridges: PlacedBridge[]
+  keepFileIds: Set<string>
+  keepFolderPaths: Set<string>
+  origin: [number, number]
+  onChange: (lod: WalkLod) => void
+}
+export function WalkLodTracker({
+  files,
+  folders,
+  bridges,
+  keepFileIds,
+  keepFolderPaths,
+  origin,
+  onChange,
+}: WalkLodTrackerProps) {
+  const { camera } = useThree()
+  const prev = useRef<WalkLod | null>(null)
+  const cell = useRef('')
+  const keepFilesRef = useRef(keepFileIds)
+  const keepFoldersRef = useRef(keepFolderPaths)
+  const filesRef = useRef(files)
+  const foldersRef = useRef(folders)
+  const bridgesRef = useRef(bridges)
+  const onChangeRef = useRef(onChange)
+  keepFilesRef.current = keepFileIds
+  keepFoldersRef.current = keepFolderPaths
+  filesRef.current = files
+  foldersRef.current = folders
+  bridgesRef.current = bridges
+  onChangeRef.current = onChange
+  const publish = (x: number, z: number, y: number, lookX: number, lookZ: number) => {
+    const next = computeWalkLod({
+      x,
+      z,
+      y,
+      lookX,
+      lookZ,
+      files: filesRef.current,
+      folders: foldersRef.current,
+      bridges: bridgesRef.current,
+      keepFileIds: keepFilesRef.current,
+      keepFolderPaths: keepFoldersRef.current,
+      prev: prev.current,
+    })
+    if (sameWalkLod(prev.current, next)) return
+    prev.current = next
+    onChangeRef.current(next)
+  }
+  const keepKey = `${[...keepFileIds].join('|')}|${[...keepFolderPaths].join('|')}`
+  useLayoutEffect(() => {
+    camera.getWorldDirection(look)
+    const lx = look.x
+    const lz = look.z
+    if (Math.hypot(lx, lz) < 0.001) {
+      publish(origin[0], origin[1], camera.position.y, 0, 1)
+      return
+    }
+    publish(camera.position.x, camera.position.z, camera.position.y, lx, lz)
+  }, [bridges, camera, files, folders, keepKey, origin])
+  useFrame(() => {
+    camera.getWorldDirection(look)
+    const lx = look.x
+    const lz = look.z
+    const nextCell = `${walkLodCell(camera.position.x, camera.position.z, camera.position.y, lx, lz)}:${keepKey}`
+    if (nextCell === cell.current) return
+    cell.current = nextCell
+    publish(camera.position.x, camera.position.z, camera.position.y, lx, lz)
+  })
+  return null
+}

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

@@ -1,5 +1,7 @@
+import { useMemo, useState } from 'react'
 import { FolderArea } from './FolderArea'
 import { FileBlock } from './FileBlock'
+import { DistantFileBlocks } from './DistantFileBlocks'
 import { Bridge } from './Bridge'
 import { RelationLines } from './RelationLines'
 import { Player } from './Player'
@@ -8,6 +10,8 @@ import { SelectionController } from './SelectionController'
 import { UserContextTracker } from './UserContextTracker'
 import { BlockPlacer } from './BlockPlacer'
 import { IslandPlacer } from './IslandPlacer'
+import { WalkLodTracker } from './WalkLodTracker'
+import { computeWalkLod, type WalkLod } from './walkLod'
 import {
   fileChangeKind,
   filesImporting,
@@ -152,6 +156,59 @@ export function World({
     deleted,
     viewLayout.folders,
   )
+  const ghostKey = Object.keys(ghosts).join('|')
+  const keepFileIds = useMemo(() => {
+    const ids = new Set<string>()
+    if (selectedId) ids.add(selectedId)
+    if (namingId) ids.add(namingId)
+    if (aimedRelation?.flyTo) ids.add(aimedRelation.flyTo)
+    if (ghostKey) {
+      for (const id of ghostKey.split('|')) ids.add(id)
+    }
+    return ids
+  }, [aimedRelation?.flyTo, ghostKey, namingId, selectedId])
+  const keepFolderPaths = useMemo(() => {
+    const paths = new Set<string>()
+    if (selectedFolder) paths.add(selectedFolder)
+    if (namingIslandId) paths.add(namingIslandId)
+    return paths
+  }, [namingIslandId, selectedFolder])
+  const originLod = useMemo(() => {
+    if (mapping) return null
+    return computeWalkLod({
+      x: landAt[0],
+      z: landAt[1],
+      lookX: 0,
+      lookZ: 1,
+      files: layout.files,
+      folders: layout.folders,
+      bridges: layout.bridges,
+      keepFileIds,
+      keepFolderPaths,
+      prev: null,
+    })
+  }, [
+    keepFileIds,
+    keepFolderPaths,
+    landAt,
+    layout.bridges,
+    layout.files,
+    layout.folders,
+    mapping,
+  ])
+  const landSig = `${landAt[0]},${landAt[1]}`
+  const [lodLand, setLodLand] = useState(landSig)
+  const [walkLod, setWalkLod] = useState<WalkLod | null>(null)
+  if (lodLand !== landSig) {
+    setLodLand(landSig)
+    setWalkLod(null)
+  }
+  const lod = mapping ? null : (walkLod ?? originLod)
+  const distantFiles: {
+    file: FileNode
+    placed: PlacedFile
+    dimmed: boolean
+  }[] = []
   return (
     <>
@@ -178,21 +235,28 @@ export function World({
         }
       />
-      {Object.values(viewLayout.folders).map((folder) => (
-        <FolderArea
-          key={folder.path}
-          folder={folder}
-          naming={folder.path === namingIslandId}
-          selected={folder.path === selectedFolder}
-          mapMode={mapping}
-          highlightKind={
-            mapping ? highlightedFolders[folder.path] ?? null : null
-          }
-        />
-      ))}
-      {viewLayout.bridges.map((bridge) => (
-        <Bridge key={bridge.id} bridge={bridge} folders={viewLayout.folders} />
-      ))}
+      {Object.values(viewLayout.folders).map((folder) => {
+        if (lod && !lod.folders.has(folder.path)) return null
+        return (
+          <FolderArea
+            key={folder.path}
+            folder={folder}
+            naming={folder.path === namingIslandId}
+            selected={folder.path === selectedFolder}
+            mapMode={mapping}
+            highlightKind={
+              mapping ? highlightedFolders[folder.path] ?? null : null
+            }
+            labelVisible={!lod || lod.folderLabels.has(folder.path)}
+          />
+        )
+      })}
+      {viewLayout.bridges.map((bridge) => {
+        if (lod && !lod.bridges.has(bridge.id)) return null
+        return (
+          <Bridge key={bridge.id} bridge={bridge} folders={viewLayout.folders} />
+        )
+      })}
       {viewGraph.files.map((file) => {
         const placed = viewLayout.files[file.id]
         if (!placed) return null
@@ -201,6 +265,21 @@ export function World({
         const isPlanned = planned.has(file.id) || deleted.has(file.id)
         const changeKind = fileChangeKind(file.id, planned, created, deleted)
         const naming = file.id === namingId
+        const aimed = file.id === aimedRelation?.flyTo
+        const detailed =
+          selected || isRelated || isPlanned || naming || aimed || Boolean(changeKind)
+        if (lod && !lod.files.has(file.id)) return null
+        const dimmed =
+          hasFocus &&
+          !selected &&
+          !isRelated &&
+          !changeKind &&
+          !patchLinked.has(file.id) &&
+          !folderFileIds.has(file.id)
+        if (lod && !detailed && !lod.labels.has(file.id)) {
+          distantFiles.push({ file, placed, dimmed })
+          return null
+        }
         return (
           <FileBlock
             key={file.id}
@@ -211,17 +290,11 @@ export function World({
             planned={isPlanned}
             changeKind={changeKind}
             added={created.has(file.id) || file.userCreated}
-            aimed={file.id === aimedRelation?.flyTo}
-            dimmed={
-              hasFocus &&
-              !selected &&
-              !isRelated &&
-              !changeKind &&
-              !patchLinked.has(file.id) &&
-              !folderFileIds.has(file.id)
-            }
+            aimed={aimed}
+            dimmed={dimmed}
             naming={naming}
             mapMode={mapping}
+            labelVisible={!lod || lod.labels.has(file.id) || naming}
             onCommitName={
               naming && onCommitName
                 ? (name) => {
@@ -235,6 +308,7 @@ export function World({
           />
         )
       })}
+      <DistantFileBlocks items={distantFiles} />
       {Object.values(ghosts).map((placed) => {
         const file: FileNode = {
           id: placed.id,
@@ -283,6 +357,17 @@ export function World({
         onWalkPosition={onWalkPosition}
         flyTo={flyTo}
       />
+      {!mapping && (
+        <WalkLodTracker
+          files={layout.files}
+          folders={layout.folders}
+          bridges={layout.bridges}
+          keepFileIds={keepFileIds}
+          keepFolderPaths={keepFolderPaths}
+          origin={landAt}
+          onChange={setWalkLod}
+        />
+      )}
       {onPlaceBlock && (
         <BlockPlacer
           enabled={!mapping && !placing}