src/routes/+page.svelte

<script lang="ts">
	import Panels from '$lib/components/panel/Panels.svelte';
	import Floor from '$lib/components/scene/Floor.svelte';
	import Robot from '$lib/components/scene/Robot.svelte';
    import { T, Canvas } from '@threlte/core';
	import { Gizmo, OrbitControls } from '@threlte/extras';
	import * as THREE from 'three';

	let { data } = $props();

	interface UserSceneConfig {
		camera: {
			position: [number, number, number];
			fov: number;
		};
		orbitTarget: [number, number, number];
		backgroundColor: string;
	}

	const userSceneConfig: UserSceneConfig = {
		camera: {
			position: [-20, 10, -15],
			fov: 20,
		},
		orbitTarget: [0, 1, 1],
		backgroundColor: '#263238',
	};

    let isOpen = $state(false);
</script>

<div class="relative h-full w-full">
	<Canvas shadows>
		<T.Scene background={new THREE.Color(userSceneConfig.backgroundColor)}>
			<!-- Camera with OrbitControls -->
			<T.PerspectiveCamera
				position={userSceneConfig.camera.position}
				fov={userSceneConfig.camera.fov}
				makeDefault
			>
				<OrbitControls
					target={userSceneConfig.orbitTarget}
					enableDamping
					dampingFactor={0.05}
					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/>

			<!-- 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} -->
    <Panels {isOpen} />
	<!-- Enhanced Control Panel with both traditional and custom URDF features -->
	<!-- <ControlPanel {jointDetails} {robotName} {robotControl} {movementConfig} {config} {urdfBridge} /> -->
	<!-- <ChatControl {robotName} /> -->
</div>