src/routes/+page.svelte

<script lang="ts">
	import Robot from "@/components/3d/Robot.svelte";
	import GridCustom from "@/components/3d/GridCustom.svelte";
	import { T, Canvas } from "@threlte/core";
	import { Gizmo, OrbitControls } from "@threlte/extras";

	import * as THREE from "three";

	import Overlay from "@/components/interface/overlay/Overlay.svelte";
</script>

<div class="fixed inset-0 -z-20 h-[100dvh] w-screen bg-[#1a1a1a]">
	<Canvas shadows>
		<T.Scene background={new THREE.Color("black")}>
			<T.PerspectiveCamera position.x={-10} position.y={10} position.z={10} fov={20} makeDefault>
				<OrbitControls
					enableDamping
					target={[0, 1, 0]}
					dampingFactor={0.05}
					minDistance={10}
					maxDistance={30}
					minPolarAngle={Math.PI / 6}
					maxPolarAngle={Math.PI / 2}
					enableZoom
				>
					<Gizmo />
				</OrbitControls>
			</T.PerspectiveCamera>

			<!-- Lighting setup matching React version -->
			<T.AmbientLight intensity={0.4} />
			<T.DirectionalLight
				position={[2, 20, 5]}
				intensity={1}
				castShadow
				shadow.mapSize.width={1024}
				shadow.mapSize.height={1024}
			/>
			<T.DirectionalLight
				position={[-2, 20, -5]}
				intensity={1}
				castShadow
				shadow.mapSize.width={1024}
				shadow.mapSize.height={1024}
			/>

			<!-- <Floor/> -->
			<GridCustom
				position.y={0}
				type="grid"
				sectionThickness={1}
				infiniteGrid
				cellColor="#71717A"
				sectionColor="#707070"
				sectionSize={10}
				cellSize={1}
				floorColor="#1a1a1a"
				floorOpacity={0}
				fadeDistance={40}
				fadeStrength={1}
			/>

			<!-- Robot component now gets robots from robotManager -->
			<Robot />
		</T.Scene>
	</Canvas>

	<!-- Loading Overlay -->
	<!-- {#if isLoading}
		<div class="bg-opacity-50 absolute inset-0 z-10 flex items-center justify-center bg-black">
			<div class="text-center text-white">
				<div class="mb-4 text-4xl font-bold">{Math.round(loadingProgress)}% loaded</div>
				<div class="text-lg">Loading {robotName}...</div>
				{#if config.customUrdf?.enabled}
					<div class="mt-2 text-sm text-green-400">Enhanced Mode</div>
				{/if}
				<div class="mt-2 text-sm text-gray-400">isLoading: {isLoading}</div>
			</div>
		</div>
	{/if} -->

	<!-- Enhanced Control Panel with modern Shadcn components -->
</div>
<Overlay />