import type { ThreeElements } from '@react-three/fiber' import { forwardRef } from 'react' import type { Group } from 'three' import { Html } from '@react-three/drei' import { EDITOR_LAYER } from '@/lib/constants' import useEditor from '@/store/use-editor' import { tools } from '@/components/ui/action-menu/structure-tools' import { furnishTools } from '@/components/ui/action-menu/furnish-tools' interface CursorSphereProps extends Omit { color?: string depthWrite?: boolean showTooltip?: boolean height?: number } export const CursorSphere = forwardRef(function CursorSphere( { color = '#818cf8', showTooltip = true, height = 2.5, ...props }, ref, ) { const tool = useEditor((s) => s.tool) const mode = useEditor((s) => s.mode) const catalogCategory = useEditor((s) => s.catalogCategory) // Find the icon for the current tool let activeToolConfig = null if (mode === 'build' && tool) { if (tool === 'item' && catalogCategory) { activeToolConfig = furnishTools.find((t) => t.catalogCategory === catalogCategory) } else { activeToolConfig = tools.find((t) => t.id === tool) } } return ( {/* Flat marker on the ground */} {/* Center dot */} {/* Outer ring / glow */} {/* Vertical line */} {height > 0 && ( )} {/* Tool Icon Tooltip at the top of the line */} {showTooltip && activeToolConfig && ( 0 ? height + 0.2 : 0.6, 0]} center style={{ pointerEvents: 'none', background: '#18181b', // zinc-900 padding: '6px', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.05)', boxShadow: '0 8px 16px -4px rgba(0, 0, 0, 0.3), 0 4px 8px -4px rgba(0, 0, 0, 0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '36px', height: '36px', }} > {/* eslint-disable-next-line @next/next/no-img-element */} {activeToolConfig.label}

)} ) })