@pascal-app/editor 0.5.1 → 0.7.0

package/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx

@@ -0,0 +1,272 @@
+'use client'
+
+import {
+  type CeilingNode,
+  emitter,
+  resolveLevelId,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, type ThreeEvent } from '@react-three/fiber'
+import { useEffect, useMemo, useState } from 'react'
+import type { Object3D } from 'three'
+import { useShallow } from 'zustand/react/shallow'
+import useEditor from '../../../store/use-editor'
+
+const BRACKET_THICKNESS = 0.04
+const BRACKET_HEIGHT = 0.04
+const BRACKET_Y_OFFSET = 0.035
+const HIT_BOX_SIZE: [number, number, number] = [0.28, 0.08, 0.28]
+
+type CornerBracketData = {
+  corner: [number, number]
+  incomingDirection: [number, number]
+  outgoingDirection: [number, number]
+  incomingLength: number
+  outgoingLength: number
+  cornerStrength: number
+}
+
+export const CeilingSelectionAffordanceSystem = () => {
+  const phase = useEditor((state) => state.phase)
+  const mode = useEditor((state) => state.mode)
+  const structureLayer = useEditor((state) => state.structureLayer)
+  const movingNode = useEditor((state) => state.movingNode)
+  const curvingWall = useEditor((state) => state.curvingWall)
+  const currentLevelId = useViewer((state) => state.selection.levelId)
+
+  const ceilings = useScene(
+    useShallow((state) =>
+      Object.values(state.nodes).filter((node): node is CeilingNode => {
+        return (
+          node.type === 'ceiling' &&
+          node.visible !== false &&
+          currentLevelId !== null &&
+          resolveLevelId(node, state.nodes) === currentLevelId
+        )
+      }),
+    ),
+  )
+
+  const shouldRender =
+    phase === 'structure' &&
+    mode === 'select' &&
+    structureLayer === 'elements' &&
+    !movingNode &&
+    !curvingWall &&
+    currentLevelId !== null
+
+  if (!shouldRender) return null
+
+  return (
+    <>
+      {ceilings.map((ceiling) => (
+        <CeilingSelectionAffordance ceiling={ceiling} key={ceiling.id} levelId={currentLevelId} />
+      ))}
+    </>
+  )
+}
+
+const CeilingSelectionAffordance = ({
+  ceiling,
+  levelId,
+}: {
+  ceiling: CeilingNode
+  levelId: string
+}) => {
+  const [levelObject, setLevelObject] = useState<Object3D | null>(() => sceneRegistry.nodes.get(levelId) ?? null)
+
+  const corners = useMemo(() => buildCornerBrackets(ceiling.polygon), [ceiling.polygon])
+
+  useEffect(() => {
+    let frameId = 0
+
+    const resolveLevelObject = () => {
+      const nextLevelObject = sceneRegistry.nodes.get(levelId) ?? null
+      setLevelObject((currentLevelObject) => {
+        if (currentLevelObject === nextLevelObject) {
+          return currentLevelObject
+        }
+        return nextLevelObject
+      })
+
+      if (!nextLevelObject) {
+        frameId = window.requestAnimationFrame(resolveLevelObject)
+      }
+    }
+
+    resolveLevelObject()
+
+    return () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId)
+      }
+    }
+  }, [levelId])
+
+  if (!levelObject || corners.length === 0) return null
+
+  return createPortal(
+    <group position={[0, (ceiling.height ?? 2.5) + BRACKET_Y_OFFSET, 0]}>
+      {corners.map((corner, index) => (
+        <CornerBracket
+          ceiling={ceiling}
+          corner={corner}
+          key={`${ceiling.id}-corner-${index}`}
+        />
+      ))}
+    </group>,
+    levelObject,
+  )
+}
+
+const CornerBracket = ({
+  ceiling,
+  corner,
+}: {
+  ceiling: CeilingNode
+  corner: CornerBracketData
+}) => {
+  const [isHovered, setIsHovered] = useState(false)
+  const color = '#d4d4d4'
+  const opacity = 0.72
+  const cubeColor = isHovered ? '#818cf8' : '#d4d4d4'
+  const cubeOpacity = isHovered ? 0.92 : 0.72
+
+  const handleClick = (e: ThreeEvent<MouseEvent>) => {
+    e.stopPropagation()
+
+    const nodes = useScene.getState().nodes
+
+    useEditor.getState().setMovingNode(null)
+    useEditor.getState().setMovingWallEndpoint(null)
+    useEditor.getState().setCurvingWall(null)
+    useEditor.getState().setEditingHole(null)
+    useEditor.getState().setMode('select')
+
+    emitter.emit('ceiling:click' as any, {
+      node: ceiling,
+      nativeEvent: e.nativeEvent,
+      localPosition: [0, 0, 0],
+      position: [corner.corner[0], ceiling.height ?? 2.5, corner.corner[1]],
+      stopPropagation: () => e.stopPropagation(),
+    })
+  }
+
+  return (
+    <group position={[corner.corner[0], 0, corner.corner[1]]}>
+      <BracketLeg
+        color={color}
+        direction={corner.incomingDirection}
+        length={corner.incomingLength}
+        onClick={handleClick}
+        opacity={opacity}
+      />
+      <BracketLeg
+        color={color}
+        direction={corner.outgoingDirection}
+        length={corner.outgoingLength}
+        onClick={handleClick}
+        opacity={opacity}
+      />
+
+      <mesh
+        onClick={handleClick}
+        onPointerEnter={(e) => {
+          e.stopPropagation()
+          setIsHovered(true)
+        }}
+        onPointerLeave={(e) => {
+          e.stopPropagation()
+          setIsHovered(false)
+        }}
+      >
+        <boxGeometry args={HIT_BOX_SIZE} />
+        <meshBasicMaterial color={cubeColor} depthWrite={false} opacity={cubeOpacity} transparent />
+      </mesh>
+    </group>
+  )
+}
+
+const BracketLeg = ({
+  direction,
+  length,
+  color,
+  onClick,
+  opacity,
+}: {
+  direction: [number, number]
+  length: number
+  color: string
+  onClick: (e: ThreeEvent<MouseEvent>) => void
+  opacity: number
+}) => {
+  const angle = Math.atan2(direction[1], direction[0])
+  const position: [number, number, number] = [
+    direction[0] * (length / 2),
+    0,
+    direction[1] * (length / 2),
+  ]
+
+  return (
+    <mesh
+      onClick={onClick}
+      position={position}
+      rotation={[0, angle, 0]}
+    >
+      <boxGeometry args={[length, BRACKET_HEIGHT, BRACKET_THICKNESS]} />
+      <meshBasicMaterial color={color} depthWrite={false} opacity={opacity} transparent />
+    </mesh>
+  )
+}
+
+function buildCornerBrackets(polygon: Array<[number, number]>): CornerBracketData[] {
+  if (polygon.length < 3) return []
+
+  const allCorners = polygon.map((corner, index) => {
+    const previous = polygon[(index - 1 + polygon.length) % polygon.length]!
+    const next = polygon[(index + 1) % polygon.length]!
+    const incomingVector = [previous[0] - corner[0], previous[1] - corner[1]] as [number, number]
+    const outgoingVector = [next[0] - corner[0], next[1] - corner[1]] as [number, number]
+    const incomingDirection = normalize2D(incomingVector)
+    const outgoingDirection = normalize2D(outgoingVector)
+
+    const incomingLength = Math.hypot(incomingVector[0], incomingVector[1])
+    const outgoingLength = Math.hypot(outgoingVector[0], outgoingVector[1])
+    const cornerStrength = 1 - Math.abs(incomingDirection[0] * outgoingDirection[0] + incomingDirection[1] * outgoingDirection[1])
+
+    return {
+      corner,
+      incomingDirection,
+      outgoingDirection,
+      incomingLength: getBracketLength(incomingLength),
+      outgoingLength: getBracketLength(outgoingLength),
+      cornerStrength,
+    }
+  })
+
+  if (allCorners.length <= 4) {
+    return allCorners
+  }
+
+  const selectedIndices = new Set(
+    allCorners
+      .map((corner, index) => ({ index, strength: corner.cornerStrength }))
+      .sort((a, b) => b.strength - a.strength)
+      .slice(0, 4)
+      .map(({ index }) => index),
+  )
+
+  return allCorners.filter((_, index) => selectedIndices.has(index))
+}
+
+function normalize2D(vector: [number, number]): [number, number] {
+  const length = Math.hypot(vector[0], vector[1])
+  if (length < 1e-6) return [1, 0]
+  return [vector[0] / length, vector[1] / length]
+}
+
+function getBracketLength(edgeLength: number): number {
+  return Math.max(0.14, Math.min(0.38, edgeLength * 0.22))
+}

package/src/components/systems/roof/roof-edit-system.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react'
  * Imperatively toggles the Three.js visibility of roof objects based on the
  * editor selection — without causing React re-renders in RoofRenderer.
  *
- * When a roof (or one of its segments) is selected:
+ * When a roof-segment is selected:
  *   - merged-roof mesh is hidden
  *   - segments-wrapper group is shown (individual segments visible for editing)
  *   - all children are marked dirty so RoofSystem rebuilds their geometry
@@ -22,14 +22,14 @@ export const RoofEditSystem = () => {
   useEffect(() => {
     const nodes = useScene.getState().nodes
 
-    // Collect which roof nodes should be in "edit mode"
+    // Collect which roof nodes should be in "edit mode".
+    // Selecting the roof itself should keep the merged visual intact so
+    // material appearance does not jump between merged and per-segment meshes.
     const activeRoofIds = new Set<string>()
     for (const id of selectedIds) {
       const node = nodes[id as AnyNodeId]
       if (!node) continue
-      if (node.type === 'roof') {
-        activeRoofIds.add(id)
-      } else if (node.type === 'roof-segment' && node.parentId) {
+      if (node.type === 'roof-segment' && node.parentId) {
         activeRoofIds.add(node.parentId)
       }
     }

package/src/components/tools/ceiling/ceiling-boundary-editor.tsx

@@ -31,6 +31,7 @@ export const CeilingBoundaryEditor: React.FC<CeilingBoundaryEditorProps> = ({ ce
 
   return (
     <PolygonEditor
+      allowEdgeMove
       color="#d4d4d4"
       levelId={resolveLevelId(ceiling, useScene.getState().nodes)}
       minVertices={3}

package/src/components/tools/ceiling/ceiling-hole-editor.tsx

@@ -36,6 +36,8 @@ export const CeilingHoleEditor: React.FC<CeilingHoleEditorProps> = ({ ceilingId,
 
   return (
     <PolygonEditor
+      allowEdgeMove
+      allowPolygonMove
       color="#ef4444"
       levelId={resolveLevelId(ceiling, useScene.getState().nodes)} // red for holes
       minVertices={3}

package/src/components/tools/ceiling/ceiling-tool.tsx

@@ -111,15 +111,15 @@ export const CeilingTool: React.FC = () => {
     const onGridMove = (event: GridEvent) => {
       if (!(cursorRef.current && gridCursorRef.current)) return
 
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
+      const gridX = Math.round(event.localPosition[0] * 2) / 2
+      const gridZ = Math.round(event.localPosition[2] * 2) / 2
       const gridPosition: [number, number] = [gridX, gridZ]
 
       setCursorPosition(gridPosition)
-      setLevelY(event.position[1])
+      setLevelY(event.localPosition[1])
 
-      const ceilingY = event.position[1] + CEILING_HEIGHT
-      const gridY = event.position[1] + GRID_OFFSET
+      const ceilingY = event.localPosition[1] + CEILING_HEIGHT
+      const gridY = event.localPosition[1] + GRID_OFFSET
 
       // Calculate snapped display position (bypass snap when Shift is held)
       const lastPoint = points[points.length - 1]

package/src/components/tools/ceiling/move-ceiling-tool.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import { type AnyNodeId, emitter, type GridEvent, useScene, type CeilingNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+import { CursorSphere } from '../shared/cursor-sphere'
+import { BufferGeometry, DoubleSide, Path, Shape, ShapeGeometry, Vector3 } from 'three'
+
+function snap(value: number) {
+  return Math.round(value * 2) / 2
+}
+
+function translatePolygon(
+  polygon: Array<[number, number]>,
+  deltaX: number,
+  deltaZ: number,
+): Array<[number, number]> {
+  return polygon.map(([x, z]) => [x + deltaX, z + deltaZ] as [number, number])
+}
+
+function getPolygonCenter(polygon: Array<[number, number]>): [number, number] {
+  if (polygon.length === 0) return [0, 0]
+  let sumX = 0
+  let sumZ = 0
+  for (const [x, z] of polygon) {
+    sumX += x
+    sumZ += z
+  }
+  return [sumX / polygon.length, sumZ / polygon.length]
+}
+
+export const MoveCeilingTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
+  const activatedAtRef = useRef<number>(Date.now())
+  const originalPolygonRef = useRef(node.polygon.map(([x, z]) => [x, z] as [number, number]))
+  const originalHolesRef = useRef(
+    (node.holes ?? []).map((hole) => hole.map(([x, z]) => [x, z] as [number, number])),
+  )
+  const dragAnchorRef = useRef<[number, number] | null>(null)
+  const previousGridPosRef = useRef<[number, number] | null>(null)
+  const previousCursorPosRef = useRef<[number, number, number] | null>(null)
+  const previousDeltaRef = useRef<[number, number] | null>(null)
+  const previewRef = useRef<{
+    polygon: Array<[number, number]>
+    holes: Array<Array<[number, number]>>
+  } | null>(null)
+
+  const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
+    const center = getPolygonCenter(node.polygon)
+    return [center[0], node.height ?? 2.5, center[1]]
+  })
+  const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]>>(node.polygon)
+  const [previewHoles, setPreviewHoles] = useState<Array<Array<[number, number]>>>(node.holes ?? [])
+
+  const exitMoveMode = useCallback(() => {
+    useEditor.getState().setMovingNode(null)
+  }, [])
+
+  useEffect(() => {
+    const originalPolygon = originalPolygonRef.current
+    const originalHoles = originalHolesRef.current
+
+    useScene.temporal.getState().pause()
+    let wasCommitted = false
+
+    const applyPreview = (
+      polygon: Array<[number, number]>,
+      holes: Array<Array<[number, number]>>,
+    ) => {
+      previewRef.current = { polygon, holes }
+      setPreviewPolygon(polygon)
+      setPreviewHoles(holes)
+      const center = getPolygonCenter(polygon)
+      const nextCursorPos: [number, number, number] = [center[0], node.height ?? 2.5, center[1]]
+      if (
+        !previousCursorPosRef.current ||
+        previousCursorPosRef.current[0] !== nextCursorPos[0] ||
+        previousCursorPosRef.current[1] !== nextCursorPos[1] ||
+        previousCursorPosRef.current[2] !== nextCursorPos[2]
+      ) {
+        previousCursorPosRef.current = nextCursorPos
+        setCursorLocalPos(nextCursorPos)
+      }
+      useScene.getState().updateNode(node.id, { polygon, holes })
+      useScene.getState().markDirty(node.id as AnyNodeId)
+    }
+
+    const restoreOriginal = () => {
+      setPreviewPolygon(originalPolygon)
+      setPreviewHoles(originalHoles)
+      useScene.getState().updateNode(node.id, {
+        holes: originalHoles,
+        polygon: originalPolygon,
+      })
+      useScene.getState().markDirty(node.id as AnyNodeId)
+    }
+
+    const onGridMove = (event: GridEvent) => {
+      const localX = snap(event.localPosition[0])
+      const localZ = snap(event.localPosition[2])
+
+      if (
+        previousGridPosRef.current &&
+        (localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
+      ) {
+        sfxEmitter.emit('sfx:grid-snap')
+      }
+      previousGridPosRef.current = [localX, localZ]
+
+      const anchor = dragAnchorRef.current ?? [localX, localZ]
+      dragAnchorRef.current = anchor
+
+      const deltaX = localX - anchor[0]
+      const deltaZ = localZ - anchor[1]
+
+      if (
+        previousDeltaRef.current &&
+        previousDeltaRef.current[0] === deltaX &&
+        previousDeltaRef.current[1] === deltaZ
+      ) {
+        return
+      }
+      previousDeltaRef.current = [deltaX, deltaZ]
+
+      applyPreview(
+        translatePolygon(originalPolygon, deltaX, deltaZ),
+        originalHoles.map((hole) => translatePolygon(hole, deltaX, deltaZ)),
+      )
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      if (Date.now() - activatedAtRef.current < 150) {
+        event.nativeEvent?.stopPropagation?.()
+        return
+      }
+
+      const preview = previewRef.current ?? { polygon: originalPolygon, holes: originalHoles }
+
+      wasCommitted = true
+
+      // Restore original baseline while paused so the next resume+update
+      // registers as a single tracked change (undo reverts to original).
+      useScene.getState().updateNode(node.id, {
+        polygon: originalPolygon,
+        holes: originalHoles,
+      })
+
+      useScene.temporal.getState().resume()
+      useScene.getState().updateNode(node.id, preview)
+      useScene.getState().markDirty(node.id as AnyNodeId)
+      useScene.temporal.getState().pause()
+
+      sfxEmitter.emit('sfx:item-place')
+      useViewer.getState().setSelection({ selectedIds: [node.id] })
+      exitMoveMode()
+      event.nativeEvent?.stopPropagation?.()
+    }
+
+    const onCancel = () => {
+      restoreOriginal()
+      useViewer.getState().setSelection({ selectedIds: [node.id] })
+      useScene.temporal.getState().resume()
+      markToolCancelConsumed()
+      exitMoveMode()
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+    emitter.on('tool:cancel', onCancel)
+
+    return () => {
+      if (!wasCommitted) {
+        restoreOriginal()
+      }
+      useScene.temporal.getState().resume()
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      emitter.off('tool:cancel', onCancel)
+    }
+  }, [exitMoveMode, node.height, node.id])
+
+  const previewFillGeometry = useMemo(
+    () => createCeilingPreviewGeometry(previewPolygon, previewHoles),
+    [previewHoles, previewPolygon],
+  )
+
+  const previewOutlineGeometry = useMemo(
+    () => createCeilingOutlineGeometry(previewPolygon),
+    [previewPolygon],
+  )
+
+  return (
+    <group>
+      <mesh geometry={previewFillGeometry} position={[0, (node.height ?? 2.5) + 0.012, 0]}>
+        <meshBasicMaterial
+          color="#f5f5f4"
+          depthWrite={false}
+          opacity={0.3}
+          side={DoubleSide}
+          transparent
+        />
+      </mesh>
+      <line geometry={previewOutlineGeometry} position={[0, (node.height ?? 2.5) + 0.02, 0]}>
+        <lineBasicMaterial color="#ffffff" depthWrite={false} opacity={0.95} transparent />
+      </line>
+      <CursorSphere position={cursorLocalPos} showTooltip={false} />
+    </group>
+  )
+}
+
+function createCeilingPreviewGeometry(
+  polygon: Array<[number, number]>,
+  holes: Array<Array<[number, number]>>,
+): BufferGeometry {
+  if (polygon.length < 3) return new BufferGeometry()
+
+  const shape = new Shape()
+  const [firstX, firstZ] = polygon[0]!
+  shape.moveTo(firstX, -firstZ)
+
+  for (let i = 1; i < polygon.length; i++) {
+    const [x, z] = polygon[i]!
+    shape.lineTo(x, -z)
+  }
+  shape.closePath()
+
+  for (const holePolygon of holes) {
+    if (holePolygon.length < 3) continue
+    const hole = new Path()
+    const [hx, hz] = holePolygon[0]!
+    hole.moveTo(hx, -hz)
+    for (let i = 1; i < holePolygon.length; i++) {
+      const [x, z] = holePolygon[i]!
+      hole.lineTo(x, -z)
+    }
+    hole.closePath()
+    shape.holes.push(hole)
+  }
+
+  const geometry = new ShapeGeometry(shape)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  return geometry
+}
+
+function createCeilingOutlineGeometry(polygon: Array<[number, number]>): BufferGeometry {
+  const geometry = new BufferGeometry()
+  if (polygon.length < 2) return geometry
+
+  const points = polygon.map(([x, z]) => new Vector3(x, 0, z))
+  const [firstX, firstZ] = polygon[0]!
+  points.push(new Vector3(firstX, 0, firstZ))
+  geometry.setFromPoints(points)
+  return geometry
+}

package/src/components/tools/column/column-tool.tsx

@@ -0,0 +1,97 @@
+import '../../../three-types'
+
+import {
+  COLUMN_PRESETS,
+  ColumnNode,
+  type ColumnNode as ColumnNodeType,
+  type ColumnPresetId,
+  emitter,
+  type GridEvent,
+  type LevelNode,
+  useScene,
+} from '@pascal-app/core'
+import { useEffect, useRef, useState } from 'react'
+import type { Group } from 'three'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+import { CursorSphere } from '../shared/cursor-sphere'
+
+const COLUMN_ICON = (
+  // eslint-disable-next-line @next/next/no-img-element
+  <img
+    alt="Column"
+    src="/icons/column.png"
+    style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+  />
+)
+
+const roundToHalf = (value: number) => Math.round(value * 2) / 2
+const DEFAULT_COLUMN_PRESET_ID = 'basicPillar' satisfies ColumnPresetId
+
+function createColumnFromPreset(presetId: ColumnPresetId, position: [number, number, number]) {
+  const { label, ...preset } = COLUMN_PRESETS[presetId]
+  return ColumnNode.parse({
+    name: label,
+    position,
+    rotation: 0,
+    ...preset,
+  })
+}
+
+type ColumnToolProps = {
+  currentLevelId: LevelNode['id'] | null
+  onPlaced?: (nodeId: ColumnNodeType['id']) => void
+}
+
+export const ColumnTool: React.FC<ColumnToolProps> = ({ currentLevelId, onPlaced }) => {
+  const [, setCursorPosition] = useState<[number, number, number] | null>(null)
+  const cursorRef = useRef<Group>(null)
+
+  useEffect(() => {
+    if (!currentLevelId) return
+
+    const onGridMove = (event: GridEvent) => {
+      const nextPosition: [number, number, number] = [
+        roundToHalf(event.localPosition[0]),
+        0,
+        roundToHalf(event.localPosition[2]),
+      ]
+      setCursorPosition(nextPosition)
+      cursorRef.current?.position.set(nextPosition[0], event.localPosition[1], nextPosition[2])
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      const position: [number, number, number] = [
+        roundToHalf(event.localPosition[0]),
+        0,
+        roundToHalf(event.localPosition[2]),
+      ]
+      const column = createColumnFromPreset(DEFAULT_COLUMN_PRESET_ID, position)
+      useScene.getState().createNode(column, currentLevelId)
+      onPlaced?.(column.id)
+      sfxEmitter.emit('sfx:structure-build')
+      useEditor.getState().setTool(null)
+      useEditor.getState().setMode('select')
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+
+    return () => {
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+    }
+  }, [currentLevelId, onPlaced])
+
+  if (!currentLevelId) return null
+
+  return (
+    <CursorSphere
+      color="#a78bfa"
+      height={2.8}
+      ref={cursorRef}
+      showTooltip
+      tooltipContent={COLUMN_ICON}
+    />
+  )
+}