@jkwd/inbase 0.1.21 → 0.1.22

package/apps/explorer/src/layout.ts

@@ -572,6 +572,61 @@ export function worldBounds(layout: WorldLayout) {
   }
 }
 
+export function regionBounds(
+  layout: WorldLayout,
+  fileIds: Iterable<string> = [],
+  folderPaths: Iterable<string> = [],
+) {
+  let minX = Infinity
+  let maxX = -Infinity
+  let minZ = Infinity
+  let maxZ = -Infinity
+  let found = false
+
+  const include = (left: number, right: number, top: number, bottom: number) => {
+    found = true
+    minX = Math.min(minX, left)
+    maxX = Math.max(maxX, right)
+    minZ = Math.min(minZ, top)
+    maxZ = Math.max(maxZ, bottom)
+  }
+
+  for (const path of folderPaths) {
+    const folder = layout.folders[path]
+    if (!folder) continue
+    include(
+      folder.x - folder.width / 2,
+      folder.x + folder.width / 2,
+      folder.z,
+      folder.z + folder.depth,
+    )
+  }
+
+  for (const id of fileIds) {
+    const file = layout.files[id]
+    if (!file) continue
+    include(
+      file.position[0] - file.size[0] / 2,
+      file.position[0] + file.size[0] / 2,
+      file.position[2] - file.size[2] / 2,
+      file.position[2] + file.size[2] / 2,
+    )
+  }
+
+  if (!found) return worldBounds(layout)
+
+  return {
+    minX,
+    maxX,
+    minZ,
+    maxZ,
+    cx: (minX + maxX) / 2,
+    cz: (minZ + maxZ) / 2,
+    width: Math.max(maxX - minX, 8),
+    depth: Math.max(maxZ - minZ, 8),
+  }
+}
+
 export function fileChangeKind(
   id: string,
   planned: Set<string>,

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

@@ -1,6 +1,6 @@
 import { useRef } from 'react'
 import { Instances, Instance } from '@react-three/drei'
-import { dimColor, fileColor } from '../theme'
+import { dimColor, fileColor, blueprintPalette } from '../theme'
 import type { FileNode, PlacedFile } from '../types'
 
 type DistantFile = {
@@ -28,7 +28,9 @@ export function DistantFileBlocks({
       <boxGeometry args={[1, 1, 1]} />
       <meshLambertMaterial />
       {items.map(({ file, placed, dimmed }) => {
-        const color = file.userCreated ? '#7ec8e8' : fileColor(file.language)
+        const color = file.userCreated || file.colorHex
+          ? blueprintPalette(file.colorHex).color
+          : fileColor(file.language)
         return (
           <Instance
             key={file.id}

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

@@ -1,8 +1,8 @@
 import { memo, Suspense } from 'react'
 import { Billboard, Edges, Html, Text } from '@react-three/drei'
-import { CHANGE_HIGHLIGHT, CONFIG, dimColor, fileColor, FILE_SELECTION, MAP_SELECTION, type ChangeKind } from '../theme'
+import { CHANGE_HIGHLIGHT, CONFIG, blueprintPalette, dimColor, fileColor, FILE_SELECTION, MAP_SELECTION, type ChangeKind } from '../theme'
 import { NameInput } from '../ui/NameInput'
-import { EyeIcon } from '../ui/EyeIcon'
+import { BlueprintEyes } from '../ui/EyeIcon'
 import { MapSelectBorder } from './MapSelectBorder'
 import type { FileNode } from '../types'
 import type { PlacedFile } from '../types'
@@ -26,12 +26,14 @@ type FileBlockProps = {
   added?: boolean
   aimed?: boolean
   dimmed: boolean
+  focused?: boolean
   naming?: boolean
   mapMode?: boolean
   highlightMapChange?: boolean
-  previewLabels?: boolean
   labelVisible?: boolean
   pointed?: boolean
+  pointedColors?: string[]
+  opacity?: number
   onCommitName?: (name: string) => void
   onCancelName?: () => void
 }
@@ -90,32 +92,43 @@ export const FileBlock = memo(function FileBlock({
   added = false,
   aimed = false,
   dimmed,
+  focused = false,
   naming = false,
   mapMode = false,
   highlightMapChange = mapMode,
-  previewLabels = false,
   labelVisible = true,
   pointed = false,
+  pointedColors,
+  opacity = 1,
   onCommitName,
   onCancelName,
 }: FileBlockProps) {
   const [width, height, depth] = placed.size
   const highlight =
-    changeKind && highlightMapChange && !selected
+    changeKind && highlightMapChange && !selected && !file.userCreated && !file.colorHex
       ? CHANGE_HIGHLIGHT[changeKind]
       : null
   const isAdded = added || Boolean(file.userCreated)
-  const color = isAdded ? '#7ec8e8' : fileColor(file.language)
+  const tint = file.colorHex || file.userCreated ? blueprintPalette(file.colorHex) : null
+  const color = tint ? tint.color : isAdded ? '#7ec8e8' : fileColor(file.language)
   const muted = dimColor(color, 0.32)
   const label = fileLabel(file.name, changeKind, isAdded)
   const mark = changeMark(changeKind, isAdded)
+  const eyeColors =
+    pointedColors && pointedColors.length > 0
+      ? pointedColors
+      : pointed
+        ? ['#f4f7fb']
+        : []
   const labelColor = aimed
     ? '#9ad8ff'
     : highlight
       ? highlight.color
-      : dimmed
-        ? '#b4bcc8'
-        : '#e7ebf2'
+      : tint
+        ? tint.label
+        : dimmed
+          ? '#b4bcc8'
+          : '#e7ebf2'
   const meshColor = aimed
     ? '#9ad8ff'
     : highlight
@@ -135,10 +148,19 @@ export const FileBlock = memo(function FileBlock({
       <mesh userData={{ fileId: file.id }} scale={[width, height, depth]}>
         <boxGeometry args={[1, 1, 1]} />
         {mapMode ? (
-          <meshBasicMaterial color={meshColor} toneMapped={false} />
+          <meshBasicMaterial
+            color={meshColor}
+            toneMapped={false}
+            transparent={opacity < 1}
+            opacity={opacity}
+            depthWrite={opacity >= 1}
+          />
         ) : (
           <meshLambertMaterial
             color={meshColor}
+            transparent={opacity < 1}
+            opacity={opacity}
+            depthWrite={opacity >= 1}
             emissive={
               aimed
                 ? '#3a6a80'
@@ -148,11 +170,13 @@ export const FileBlock = memo(function FileBlock({
                     ? FILE_SELECTION.emissive
                     : related
                       ? '#1f4a44'
-                      : isAdded
-                        ? '#2a5064'
-                        : dimmed
-                          ? muted
-                          : color
+                      : tint
+                        ? tint.emissive
+                        : isAdded
+                          ? '#2a5064'
+                          : dimmed
+                            ? muted
+                            : color
             }
             emissiveIntensity={
               aimed
@@ -191,31 +215,43 @@ export const FileBlock = memo(function FileBlock({
           userData={{ fileId: file.id }}
         />
       )}
+      {focused && mapMode && (
+        <MapSelectBorder
+          width={width}
+          depth={depth}
+          y={height / 2 + (selected ? 0.06 : 0.03)}
+          stroke={MAP_SELECTION.explainPad}
+          color={MAP_SELECTION.explain}
+          userData={{ fileId: file.id }}
+        />
+      )}
       {mapMode && !naming && mark && (
         <MapChangeMark mark={mark} width={width} depth={depth} height={height} />
       )}
-      {pointed && !naming && (
+      {eyeColors.length > 0 && !naming && (
         <Html
           position={
             mapMode
-              ? mark
-                ? [width * 0.28, height / 2 + 0.16, -depth * 0.28]
-                : [0, height / 2 + 0.12, 0]
-              : [0, height / 2 + (planned || highlight ? 0.92 : 0.74), 0]
+              ? [
+                  width / 2 + Math.min(width, depth) * 0.28,
+                  height / 2 + 0.04,
+                  0,
+                ]
+              : [
+                  width * 0.38,
+                  height / 2 + 0.18,
+                  0,
+                ]
           }
           center
+          distanceFactor={
+            mapMode ? Math.min(width, depth) / 24 : undefined
+          }
           occlude={false}
           style={{ pointerEvents: 'none' }}
           zIndexRange={[40, 0]}
         >
-          <div
-            className="blueprint-eye"
-            data-map={mapMode ? 'true' : 'false'}
-            role="img"
-            aria-label="Keep in mind"
-          >
-            <EyeIcon size={mapMode ? 16 : 18} title="Keep in mind" />
-          </div>
+          <BlueprintEyes colors={eyeColors} mapMode={mapMode} />
         </Html>
       )}
       {naming && onCommitName && onCancelName && (
@@ -236,6 +272,7 @@ export const FileBlock = memo(function FileBlock({
         >
           <NameInput
             placeholder="File name"
+            fallbackName="New file"
             onCommit={onCommitName}
             onCancel={onCancelName}
           />
@@ -243,57 +280,43 @@ export const FileBlock = memo(function FileBlock({
       )}
       {showLabels && (
         <Suspense fallback={null}>
-          {previewLabels ? (
-            <Html
-              position={[0, height / 2 + 0.4, 0]}
-              center
-              occlude={false}
-              style={{ pointerEvents: 'none' }}
-              zIndexRange={[20, 0]}
+          <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}
             >
-              <div className="thumbnail-block-label">{label}</div>
-            </Html>
-          ) : (
-            <>
-              <Billboard position={[0, height / 2 + (planned || highlight ? 0.55 : 0.38), 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
-                  fontSize={0.28}
+                  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="bottom"
-                  maxWidth={3.4}
+                  anchorY="middle"
+                  maxWidth={face - 0.2}
+                  overflowWrap="break-word"
+                  outlineWidth={0.012}
+                  outlineColor="#11151c"
+                  depthOffset={-1}
                 >
                   {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

@@ -3,6 +3,7 @@ import { Html, Text } from '@react-three/drei'
 import {
   CHANGE_HIGHLIGHT,
   CONFIG,
+  blueprintPalette,
   folderAisleColor,
   folderFloorColor,
   MAP_SELECTION,
@@ -11,7 +12,7 @@ import {
 import type { PlacedFolder } from '../types'
 import { MapSelectBorder } from './MapSelectBorder'
 import { NameInput } from '../ui/NameInput'
-import { EyeIcon } from '../ui/EyeIcon'
+import { BlueprintEyes } from '../ui/EyeIcon'
 
 type FolderAreaProps = {
   folder: PlacedFolder
@@ -19,9 +20,10 @@ type FolderAreaProps = {
   selected?: boolean
   mapMode?: boolean
   highlightKind?: ChangeKind | null
-  previewLabels?: boolean
   labelVisible?: boolean
   pointed?: boolean
+  pointedColors?: string[]
+  opacity?: number
   onCommitName?: (name: string) => void
   onCancelName?: () => void
 }
@@ -32,26 +34,35 @@ export function FolderArea({
   selected = false,
   mapMode = false,
   highlightKind = null,
-  previewLabels = false,
   labelVisible = true,
   pointed = false,
+  pointedColors,
+  opacity = 1,
   onCommitName,
   onCancelName,
 }: 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 tint = addedOnly ? blueprintPalette(folder.colorHex) : null
+  const outline = highlight ? highlight.color : addedOnly ? tint?.color ?? '#7ec8e8' : null
   const color = highlight
     ? highlight.floor
     : addedOnly
-      ? '#16323f'
+      ? tint?.floor ?? '#16323f'
       : folderFloorColor(folder.path)
   const aisle = highlight
     ? highlight.aisle
     : addedOnly
-      ? '#23485a'
+      ? tint?.aisle ?? '#23485a'
       : folderAisleColor(folder.path)
+  const eyeColors =
+    pointedColors && pointedColors.length > 0
+      ? pointedColors
+      : pointed
+        ? [MAP_SELECTION.pointed]
+        : []
+  const pointedColor = eyeColors[eyeColors.length - 1]
   const label =
     highlightKind === 'remove'
       ? `- ${folder.name}`
@@ -59,6 +70,13 @@ export function FolderArea({
         ? `+ ${folder.name}`
         : folder.name
 
+  const faded = opacity < 1
+  const floorMaterial = {
+    transparent: faded,
+    opacity,
+    depthWrite: !faded,
+  }
+
   return (
     <group position={[folder.x, 0, folder.z + folder.depth / 2]}>
       {outline && (
@@ -67,12 +85,18 @@ export function FolderArea({
           <meshBasicMaterial
             color={outline}
             toneMapped={false}
+            {...floorMaterial}
           />
         </mesh>
       )}
       <mesh rotation={[-Math.PI / 2, 0, 0]}>
         <planeGeometry args={[folder.width, folder.depth]} />
-        <meshBasicMaterial color={color} />
+        <meshBasicMaterial
+          color={color}
+          transparent={faded}
+          opacity={opacity}
+          depthWrite={!faded}
+        />
       </mesh>
       {selected && mapMode && (
         <MapSelectBorder
@@ -83,9 +107,18 @@ export function FolderArea({
           color={MAP_SELECTION.island}
         />
       )}
+      {eyeColors.length > 0 && !naming && (
+        <MapSelectBorder
+          width={folder.width}
+          depth={folder.depth}
+          y={selected && mapMode ? 0.09 : 0.05}
+          stroke={MAP_SELECTION.pointedPad}
+          color={pointedColor ?? MAP_SELECTION.pointed}
+        />
+      )}
       <mesh position={[0, 0.02, 0]} rotation={[-Math.PI / 2, 0, 0]}>
         <planeGeometry args={[CONFIG.bridgeWidth, folder.depth]} />
-        <meshBasicMaterial color={aisle} />
+        <meshBasicMaterial color={aisle} {...floorMaterial} />
       </mesh>
       {folder.width > 28 && (
         <mesh
@@ -93,25 +126,18 @@ export function FolderArea({
           rotation={[-Math.PI / 2, 0, 0]}
         >
           <planeGeometry args={[folder.width, CONFIG.bridgeWidth]} />
-          <meshBasicMaterial color={aisle} />
+          <meshBasicMaterial color={aisle} {...floorMaterial} />
         </mesh>
       )}
-      {pointed && !naming && (
+      {eyeColors.length > 0 && !naming && !mapMode && (
         <Html
-          position={[0, mapMode ? 1.15 : 1.45, -folder.depth / 2 + 2.2]}
+          position={[1.45, 1.75, -folder.depth / 2 + 1.6]}
           center
           occlude={false}
           style={{ pointerEvents: 'none' }}
           zIndexRange={[40, 0]}
         >
-          <div
-            className="blueprint-eye"
-            data-map={mapMode ? 'true' : 'false'}
-            role="img"
-            aria-label="Keep in mind"
-          >
-            <EyeIcon size={mapMode ? 18 : 22} title="Keep in mind" />
-          </div>
+          <BlueprintEyes colors={eyeColors} size={20} />
         </Html>
       )}
       {naming && mapMode && onCommitName && onCancelName && (
@@ -124,31 +150,28 @@ export function FolderArea({
         >
           <NameInput
             placeholder="Folder name"
+            fallbackName="New folder"
             onCommit={onCommitName}
             onCancel={onCancelName}
           />
         </Html>
       )}
       <Suspense fallback={null}>
-        {!naming && previewLabels && labelVisible && (
-          <Html
-            position={[0, 1.35, -folder.depth / 2 + 1.6]}
-            center
-            occlude={false}
-            style={{ pointerEvents: 'none' }}
-            zIndexRange={[20, 0]}
-          >
-            <div className="thumbnail-folder-label">{label}</div>
-          </Html>
-        )}
-        {!naming && !previewLabels && !mapMode && labelVisible && (
+        {!naming && !mapMode && labelVisible && (
           <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'
+              pointedColor
+                ? pointedColor
+                : highlight
+                  ? highlight.color
+                  : addedOnly
+                    ? tint?.label ?? '#9ad8ff'
+                    : '#8b95a5'
             }
+            fillOpacity={opacity}
             anchorX="center"
             anchorY="middle"
           >