@jkwd/inbase 0.1.3 → 0.1.5

package/apps/explorer/src/index.css

@@ -22,6 +22,7 @@ body,
   position: absolute;
   inset: 0;
   z-index: 0;
+  background: #000;
 }
 
 * {
@@ -234,8 +235,8 @@ button {
 }
 
 .map-folder-label-selected {
-  color: #f1f5fa;
-  border: 3px solid #000000;
+  color: #f3e8ff;
+  border: 3px solid #c026ff;
   background: rgba(25, 28, 34, 0.94);
 }
 
@@ -323,6 +324,216 @@ button {
   pointer-events: auto;
 }
 
+.hud-right-stack {
+  position: absolute;
+  top: 68px;
+  right: 20px;
+  bottom: 72px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: min(320px, calc(100% - 40px));
+  pointer-events: none;
+}
+
+.hud-right-stack .hud-panel-info {
+  position: relative;
+  top: auto;
+  right: auto;
+  z-index: auto;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.hud-right-stack .hud-panel-info[data-minimized='true'] {
+  flex: 0 0 auto;
+}
+
+.hud-left-stack {
+  position: absolute;
+  top: 68px;
+  left: 20px;
+  bottom: 72px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: min(360px, calc(100% - 40px));
+  pointer-events: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.hud-left-stack .hud-panel-planned {
+  position: relative;
+  top: auto;
+  left: auto;
+  right: auto;
+  z-index: auto;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.hud-left-stack .hud-panel-planned[data-minimized='true'] {
+  flex: 0 0 auto;
+}
+
+.hud-left-stack .hud-panel-planned[data-focused='false'] {
+  opacity: 0.86;
+}
+
+.hud-left-stack .hud-panel-planned[data-focused='true'] {
+  box-shadow: 0 0 0 1px #9ad8ff;
+}
+
+.hud-panel-body {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.hud-right-stack .hud-thumbnail {
+  position: relative;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: auto;
+  width: 100%;
+  margin-top: auto;
+  flex: none;
+}
+
+.hud-thumbnail {
+  position: fixed;
+  right: 20px;
+  bottom: 72px;
+  left: auto;
+  z-index: 30;
+  width: min(320px, calc(100% - 40px));
+  pointer-events: auto;
+  overflow: hidden;
+  background: rgba(25, 28, 34, 0.96);
+  border: 1px solid #5d9ec4;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+.hud-thumbnail-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 6px 4px 12px;
+  color: #e7ebf2;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+}
+
+.hud-panel-chrome {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: -4px 0 8px;
+}
+
+.hud-panel[data-minimized='true'] {
+  overflow: hidden;
+  padding-bottom: 12px;
+}
+
+.hud-panel[data-minimized='true'] .hud-panel-chrome {
+  margin-bottom: 0;
+}
+
+.hud-panel-chrome-title {
+  min-width: 0;
+  overflow: hidden;
+  color: #b7c0ce;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hud-panel-info .hud-panel-chrome-title {
+  color: #e7ebf2;
+  font-size: 16px;
+  letter-spacing: 0.02em;
+  text-transform: none;
+}
+
+.hud-panel-controls {
+  display: flex;
+  flex: none;
+  gap: 4px;
+}
+
+.hud-panel-control {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.hud-thumbnail-hide {
+  width: 28px;
+  height: 28px;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.hud-thumbnail-stage {
+  position: relative;
+  width: 100%;
+  height: 220px;
+  background: #000;
+  touch-action: none;
+}
+
+.hud-thumbnail-stage canvas {
+  display: block;
+}
+
+.thumbnail-block-label,
+.thumbnail-folder-label {
+  pointer-events: none;
+  user-select: none;
+  white-space: nowrap;
+  color: #ffffff;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  line-height: 1.1;
+  text-shadow:
+    0 0 4px #000,
+    0 1px 2px #000,
+    0 0 10px rgba(0, 0, 0, 0.85);
+}
+
+.thumbnail-block-label {
+  font-size: 13px;
+}
+
+.thumbnail-folder-label {
+  font-size: 15px;
+}
+
 .hud-panel-planned {
   left: 20px;
   right: auto;
@@ -451,12 +662,17 @@ button {
 .hud-working {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 9px;
   margin-top: 12px;
   color: #d7eef8;
   font-size: 12px;
 }
 
+.hud-working .hud-button {
+  margin-left: auto;
+}
+
 .hud-spinner {
   width: 14px;
   height: 14px;
@@ -566,6 +782,11 @@ button {
   word-break: break-all;
 }
 
+.hud-inspect {
+  margin: 10px 0 0;
+  width: 100%;
+}
+
 .hud-panel ul {
   margin: 8px 0 0;
   padding-left: 18px;
@@ -599,6 +820,21 @@ button {
   border-color: #8a4a4a;
 }
 
+.hud-item-inspect {
+  flex: none;
+  padding: 2px 6px;
+  color: #d7eef8;
+  background: transparent;
+  border: 1px solid #3a4250;
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.hud-item-inspect:hover,
+.hud-item-inspect:focus-visible {
+  border-color: #9ad8ff;
+}
+
 .hud-add-row {
   display: flex;
   gap: 6px;

package/apps/explorer/src/layout.ts

@@ -1,4 +1,5 @@
 import { CONFIG, fileHeight } from './theme'
+import type { ChangeKind } from './theme'
 import type {
   CodebaseGraph,
   FileNode,
@@ -506,3 +507,48 @@ export function worldBounds(layout: WorldLayout) {
     depth: maxZ - minZ,
   }
 }
+
+export function fileChangeKind(
+  id: string,
+  planned: Set<string>,
+  created: Set<string>,
+  deleted: Set<string>,
+): ChangeKind | null {
+  if (deleted.has(id)) return 'remove'
+  if (created.has(id)) return 'add'
+  if (planned.has(id)) return 'edit'
+  return null
+}
+
+export function folderChangeHighlights(
+  planned: Set<string>,
+  created: Set<string>,
+  deleted: Set<string>,
+  folders: Record<string, PlacedFolder>,
+): Partial<Record<string, ChangeKind>> {
+  const highlighted: Partial<Record<string, ChangeKind>> = {}
+  const folderKinds = new Map<string, Set<ChangeKind>>()
+  const addFolderKind = (id: string, kind: ChangeKind) => {
+    const folder = folderOfFile(id)
+    const kinds = folderKinds.get(folder) ?? new Set<ChangeKind>()
+    kinds.add(kind)
+    folderKinds.set(folder, kinds)
+  }
+  for (const id of planned) {
+    addFolderKind(id, created.has(id) ? 'add' : 'edit')
+  }
+  for (const id of deleted) addFolderKind(id, 'remove')
+  for (const [folder, kinds] of folderKinds) {
+    if (kinds.size === 1) highlighted[folder] = [...kinds][0]
+  }
+  if (planned.size > 0 || deleted.size > 0) {
+    for (const folder of Object.values(folders)) {
+      if (!folder.added) continue
+      const kinds = folderKinds.get(folder.path)
+      if (!kinds || kinds.size === 1) {
+        highlighted[folder.path] ??= 'add'
+      }
+    }
+  }
+  return highlighted
+}

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

@@ -1,12 +1,11 @@
 import { Suspense } from 'react'
 import { Billboard, Edges, Html, Text } from '@react-three/drei'
-import { CHANGE_HIGHLIGHT, CONFIG, dimColor, fileColor, type ChangeKind } from '../theme'
+import { CHANGE_HIGHLIGHT, CONFIG, dimColor, fileColor, FILE_SELECTION, MAP_SELECTION, 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 }[] = [
@@ -28,51 +27,12 @@ type FileBlockProps = {
   dimmed: boolean
   naming?: boolean
   mapMode?: boolean
+  highlightMapChange?: boolean
+  previewLabels?: 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}`
@@ -91,15 +51,18 @@ export function FileBlock({
   dimmed,
   naming = false,
   mapMode = false,
+  highlightMapChange = mapMode,
+  previewLabels = false,
   onCommitName,
   onCancelName,
 }: FileBlockProps) {
   const [width, height, depth] = placed.size
-  const highlight = changeKind && mapMode ? CHANGE_HIGHLIGHT[changeKind] : null
+  const highlight =
+    changeKind && highlightMapChange && !selected
+      ? 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'
@@ -112,62 +75,58 @@ export function FileBlock({
     ? '#9ad8ff'
     : highlight
       ? highlight.color
-      : walkSelected
-        ? '#5d9ec4'
+      : selected
+        ? FILE_SELECTION.color
         : related
           ? '#4e7f72'
           : dimmed
             ? muted
             : color
 
+  const showLabels = !naming && !mapMode
+
   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 && (
+      <mesh userData={{ fileId: file.id }} scale={[width, height, depth]}>
+        <boxGeometry args={[1, 1, 1]} />
+        {mapMode ? (
+          <meshBasicMaterial color={meshColor} toneMapped={false} />
+        ) : (
+          <meshLambertMaterial
+            color={meshColor}
+            emissive={
+              aimed
+                ? '#3a6a80'
+                : highlight
+                  ? highlight.emissive
+                  : selected
+                    ? FILE_SELECTION.emissive
+                    : related
+                      ? '#1f4a44'
+                      : added || file.userCreated
+                        ? '#2a5064'
+                        : dimmed
+                          ? muted
+                          : color
+            }
+            emissiveIntensity={
+              aimed
+                ? 0.45
+                : highlight
+                  ? 0.95
+                  : selected
+                    ? 0.55
+                    : related
+                      ? 0.18
+                      : added || file.userCreated
+                        ? 0.22
+                        : dimmed
+                          ? 0.08
+                          : 0.12
+            }
+          />
+        )}
+        {selected && !mapMode && (
           <Edges
             color="#000000"
             dashed
@@ -175,26 +134,18 @@ export function FileBlock({
             gapSize={0.1}
             lineWidth={2.5}
             toneMapped={false}
-            scale={1.002}
           />
         )}
       </mesh>
-      {mapSelected && (
+      {selected && mapMode && (
         <MapSelectBorder
           width={width}
           depth={depth}
-          y={height / 2 + 0.05}
+          y={height / 2 + 0.03}
+          stroke={MAP_SELECTION.blockPad}
           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]}
@@ -210,47 +161,61 @@ export function FileBlock({
           />
         </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}
+      {showLabels && (
+        <Suspense fallback={null}>
+          {previewLabels ? (
+            <Html
+              position={[0, height / 2 + 0.55, 0]}
+              center
+              occlude={false}
+              style={{ pointerEvents: 'none' }}
+              zIndexRange={[20, 0]}
             >
-              {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>
+              <div className="thumbnail-block-label">{label}</div>
+            </Html>
+          ) : (
+            <>
+              <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>
   )
 }