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

@jkwd/inbase 0.1.11 → 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 (23) 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 +44 -5
package/apps/explorer/src/agentIntent.ts +7 -1
package/apps/explorer/src/index.css +135 -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 +149 -37
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 +115 -25
package/apps/explorer/src/scene/walkLod.ts +201 -0
package/apps/explorer/src/types.ts +1 -0
package/apps/explorer/src/ui/HUD.tsx +67 -38
package/apps/explorer/src/ui/MapContextMenu.tsx +89 -0
package/apps/explorer/src/userCreated.ts +50 -0
package/apps/explorer/vite.config.ts +2 -0
package/bin/session.mjs +21 -5
package/package.json +1 -1
package/skill/commands/inbase.md +2 -2
package/skill/inbase/SKILL.md +9 -6

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

@@ -1,10 +1,17 @@
-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
+  y: number
+  folder: string
+}
 type MapViewProps = {
   layout: WorldLayout
@@ -16,6 +23,7 @@ type MapViewProps = {
   onSelect: (fileId: string | null) => void
   onSelectFolder: (folderPath: string | null) => void
   onTravelTo: (fromId: string, toId: string) => void
+  onBlueprintMenu?: (menu: MapBlueprintMenu) => void
 }
 export function MapView({
@@ -28,9 +36,13 @@ export function MapView({
   onSelect,
   onSelectFolder,
   onTravelTo,
+  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
@@ -172,7 +184,28 @@ export function MapView({
     }
     const onContextMenu = (event: MouseEvent) => {
-      if (event.ctrlKey) event.preventDefault()
+      if (event.ctrlKey) {
+        event.preventDefault()
+        return
+      }
+      if (!onBlueprintMenu) return
+      event.preventDefault()
+      const pick = pickAt(event.clientX, event.clientY)
+      if (!pick) return
+      const hit = new THREE.Vector3()
+      const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
+      if (!pick.raycaster.ray.intersectPlane(plane, hit)) return
+      const folder =
+        folderAt(hit.x, hit.z, layout) ??
+        (selectedFolder ? layout.folders[selectedFolder] : undefined) ??
+        layout.folders['.']
+      if (!folder) return
+      onSelectFolder(folder.path)
+      onBlueprintMenu({
+        x: event.clientX,
+        y: event.clientY,
+        folder: folder.path,
+      })
     }
     const ground = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
@@ -250,10 +283,12 @@ export function MapView({
     invalidate,
     layout,
     onLand,
+    onBlueprintMenu,
     onSelect,
     onSelectFolder,
     onTravelTo,
     scene,
+    selectedFolder,
   ])
   return (
@@ -274,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,13 +1,17 @@
+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'
-import { MapView } from './MapView'
+import { MapView, type MapBlueprintMenu } from './MapView'
 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,
@@ -60,6 +64,7 @@ type WorldProps = {
   namingId?: string | null
   onPlaceBlock?: (spot: { x: number; z: number; folder: string }) => void
   onPlaceIsland?: (parent: string) => void
+  onBlueprintMenu?: (menu: MapBlueprintMenu) => void
   onCommitName?: (id: string, name: string) => boolean
   onCancelName?: (id: string) => void
   userCreatedBlocks?: UserCreatedBlock[]
@@ -100,6 +105,7 @@ export function World({
   namingIslandId = null,
   onPlaceBlock,
   onPlaceIsland,
+  onBlueprintMenu,
   onCommitName,
   onCancelName,
   userCreatedBlocks = [],
@@ -150,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 (
     <>
@@ -171,23 +230,33 @@ export function World({
         onSelect={onSelect}
         onSelectFolder={onSelectFolder}
         onTravelTo={onTravelTo}
+        onBlueprintMenu={
+          mapping && !placing && onBlueprintMenu ? onBlueprintMenu : undefined
+        }
       />
-      {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
@@ -196,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}
@@ -206,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) => {
@@ -230,6 +308,7 @@ export function World({
           />
         )
       })}
+      <DistantFileBlocks items={distantFiles} />
       {Object.values(ghosts).map((placed) => {
         const file: FileNode = {
           id: placed.id,
@@ -278,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}