Update UI

Dockerfile

@@ -61,4 +61,4 @@ WORKDIR $HOME/app
 EXPOSE 7860
 
 # Start the FastAPI server (serves both frontend and backend)
-CMD ["sh", "-c", "cd src-python && uv run python start_server.py"] 
+CMD ["sh", "-c", "EXPOSE_FRONTEND=true cd src-python && uv run python start_server.py"] 

bun.lock

@@ -10,28 +10,43 @@
         "clsx": "^2.1.1",
         "tailwind-merge": "^3.3.0",
         "three": "^0.177.0",
+        "threlte-postprocessing": "^0.0.9",
         "zod": "^3.25.42",
       },
       "devDependencies": {
         "@eslint/compat": "^1.2.5",
         "@eslint/js": "^9.18.0",
+        "@iconify/json": "^2.2.344",
+        "@iconify/tailwind4": "^1.0.6",
+        "@internationalized/date": "^3.5.6",
+        "@lucide/svelte": "^0.511.0",
         "@sveltejs/adapter-auto": "^6.0.0",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/kit": "^2.16.0",
         "@sveltejs/vite-plugin-svelte": "^5.0.0",
         "@tailwindcss/vite": "^4.0.0",
+        "@tanstack/table-core": "^8.20.5",
+        "bits-ui": "^2.4.1",
+        "embla-carousel-svelte": "^8.6.0",
         "eslint": "^9.18.0",
         "eslint-config-prettier": "^10.0.1",
         "eslint-plugin-svelte": "^3.0.0",
         "globals": "^16.0.0",
+        "layerchart": "2.0.0-next.10",
+        "mode-watcher": "^1.0.6",
+        "paneforge": "^1.0.0-next.5",
         "prettier": "^3.4.2",
         "prettier-plugin-svelte": "^3.3.3",
         "prettier-plugin-tailwindcss": "^0.6.11",
         "svelte": "^5.0.0",
         "svelte-check": "^4.0.0",
+        "svelte-sonner": "^1.0.1",
+        "tailwind-variants": "^1.0.0",
         "tailwindcss": "^4.0.0",
+        "tw-animate-css": "^1.3.3",
         "typescript": "^5.0.0",
         "typescript-eslint": "^8.20.0",
+        "vaul-svelte": "^1.0.0-next.7",
         "vite": "^6.2.6",
       },
     },
@@ -39,6 +54,14 @@
   "packages": {
     "@ampproject/remapping": ["@ampproject/remapping@2.3.0", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw=="],
 
+    "@antfu/install-pkg": ["@antfu/install-pkg@1.1.0", "", { "dependencies": { "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" } }, "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ=="],
+
+    "@antfu/utils": ["@antfu/utils@8.1.1", "", {}, "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ=="],
+
+    "@dagrejs/dagre": ["@dagrejs/dagre@1.1.4", "", { "dependencies": { "@dagrejs/graphlib": "2.2.4" } }, "sha512-QUTc54Cg/wvmlEUxB+uvoPVKFazM1H18kVHBQNmK2NbrDR5ihOCR6CXLnDSZzMcSQKJtabPUWridBOlJM3WkDg=="],
+
+    "@dagrejs/graphlib": ["@dagrejs/graphlib@2.2.4", "", {}, "sha512-mepCf/e9+SKYy1d02/UkvSy6+6MoyXhVxP8lLDfA7BPE1X1d4dR0sZznmbM8/XVJ1GPM+Svnx7Xj6ZweByWUkw=="],
+
     "@dimforge/rapier3d-compat": ["@dimforge/rapier3d-compat@0.12.0", "", {}, "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow=="],
 
     "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.5", "", { "os": "aix", "cpu": "ppc64" }, "sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA=="],
@@ -111,6 +134,12 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.3.1", "", { "dependencies": { "@eslint/core": "^0.14.0", "levn": "^0.4.1" } }, "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w=="],
 
+    "@floating-ui/core": ["@floating-ui/core@1.7.1", "", { "dependencies": { "@floating-ui/utils": "^0.2.9" } }, "sha512-azI0DrjMMfIug/ExbBaeDVJXcY0a7EPvPjb2xAJPa4HeimBX+Z18HK8QQR3jb6356SnDDdxx+hinMLcJEDdOjw=="],
+
+    "@floating-ui/dom": ["@floating-ui/dom@1.7.1", "", { "dependencies": { "@floating-ui/core": "^1.7.1", "@floating-ui/utils": "^0.2.9" } }, "sha512-cwsmW/zyw5ltYTUeeYJ60CnQuPqmGwuGVhG9w0PRaRKkAyi38BT5CKrpIbb+jtahSwUl04cWzSx9ZOIxeS6RsQ=="],
+
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
@@ -119,6 +148,16 @@
 
     "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
 
+    "@iconify/json": ["@iconify/json@2.2.344", "", { "dependencies": { "@iconify/types": "*", "pathe": "^1.1.2" } }, "sha512-wY+TYoq4WSAaNunAbecUS+5S4VobTW/3cWpTLEWezRW9Wv4V3MqguNirNN3c/jSq/dfIMJNvr9Gz+N9iNFMInA=="],
+
+    "@iconify/tailwind4": ["@iconify/tailwind4@1.0.6", "", { "dependencies": { "@iconify/types": "^2.0.0", "@iconify/utils": "^2.2.1" }, "peerDependencies": { "tailwindcss": ">= 4" } }, "sha512-43ZXe+bC7CuE2LCgROdqbQeFYJi/J7L/k1UpSy8KDQlWVsWxPzLSWbWhlJx4uRYLOh1NRyw02YlDOgzBOFNd+A=="],
+
+    "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
+
+    "@iconify/utils": ["@iconify/utils@2.3.0", "", { "dependencies": { "@antfu/install-pkg": "^1.0.0", "@antfu/utils": "^8.1.0", "@iconify/types": "^2.0.0", "debug": "^4.4.0", "globals": "^15.14.0", "kolorist": "^1.8.0", "local-pkg": "^1.0.0", "mlly": "^1.7.4" } }, "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA=="],
+
+    "@internationalized/date": ["@internationalized/date@3.8.1", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-PgVE6B6eIZtzf9Gu5HvJxRK3ufUFz9DhspELuhW/N0GuMGMTLvPQNRkHP2hTuP9lblOk+f+1xi96sPiPXANXAA=="],
+
     "@isaacs/fs-minipass": ["@isaacs/fs-minipass@4.0.1", "", { "dependencies": { "minipass": "^7.0.4" } }, "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w=="],
 
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.8", "", { "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA=="],
@@ -131,6 +170,16 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
 
+    "@layerstack/svelte-actions": ["@layerstack/svelte-actions@1.0.1-next.2", "", { "dependencies": { "@floating-ui/dom": "^1.7.0", "@layerstack/utils": "1.1.0-next.2", "d3-array": "^3.2.4", "d3-scale": "^4.0.2", "date-fns": "^4.1.0", "lodash-es": "^4.17.21" } }, "sha512-s4iGrFIt+obdHP+Mzre+drCiZttqs5UYSw6CfQs1D2IeqTFkkbvRvYosh47flMi6ElN4psCrCcwn8KntClhMow=="],
+
+    "@layerstack/svelte-state": ["@layerstack/svelte-state@0.1.0-next.7", "", { "dependencies": { "@layerstack/utils": "2.0.0-next.3" } }, "sha512-9JQ5EyN/ghcSBKXjv1ueiM0TlsJv4eEWgW8mvd4dqxMLUzs+/fPJlXlxqBqvH/T64yauxvFUfytCGPnx1lRJsA=="],
+
+    "@layerstack/tailwind": ["@layerstack/tailwind@2.0.0-next.4", "", { "dependencies": { "@layerstack/utils": "^1.1.0-next.2", "clsx": "^2.1.1", "culori": "^4.0.1", "d3-array": "^3.2.4", "date-fns": "^4.1.0", "lodash-es": "^4.17.21", "tailwind-merge": "^3.2.0", "tailwindcss": "^4.1.5" } }, "sha512-46QUWvMaYGlGmi17vfT2o6mV7/0ZaWi0qJ4vjPKrayBsxn1mVjqX0cbW7EXC6JnmMVYt5CZu0768rWCM4nGCzA=="],
+
+    "@layerstack/utils": ["@layerstack/utils@2.0.0-next.3", "", { "dependencies": { "d3-array": "^3.2.4", "date-fns": "^4.1.0", "lodash-es": "^4.17.21" } }, "sha512-sTOF9cdh5lb9bqWW10kWwo4toSTjGOH4RNTr++59obVvdGp/hXo6LAN2WsdzkK9QFqBgEpuJH0rZ+D77lMSdeQ=="],
+
+    "@lucide/svelte": ["@lucide/svelte@0.511.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-aLCSPMUJmHlCuLXzXENXa4Z1NV2mN1iAZAFKk4bEbey+/MdsNlu+/DqwVkgW3Yvj6p8y8Vn5xZ2v9CLmPlA6Vw=="],
+
     "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
 
     "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
@@ -139,6 +188,8 @@
 
     "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
 
+    "@rollup/pluginutils": ["@rollup/pluginutils@5.1.4", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ=="],
+
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.41.1", "", { "os": "android", "cpu": "arm" }, "sha512-NELNvyEWZ6R9QMkiytB4/L4zSEaBC03KIXEghptLGLZWJ6VPrL63ooZQCOnlx36aQPGhzuOMwDerC1Eb2VmrLw=="],
 
     "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.41.1", "", { "os": "android", "cpu": "arm64" }, "sha512-DXdQe1BJ6TK47ukAoZLehRHhfKnKg9BjnQYUu9gzhI8Mwa1d2fzxA1aw2JixHVl403bwp1+/o/NhhHtxWJBgEA=="],
@@ -191,6 +242,8 @@
 
     "@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@4.0.1", "", { "dependencies": { "debug": "^4.3.7" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^5.0.0", "svelte": "^5.0.0", "vite": "^6.0.0" } }, "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw=="],
 
+    "@swc/helpers": ["@swc/helpers@0.5.17", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A=="],
+
     "@tailwindcss/node": ["@tailwindcss/node@4.1.8", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "enhanced-resolve": "^5.18.1", "jiti": "^2.4.2", "lightningcss": "1.30.1", "magic-string": "^0.30.17", "source-map-js": "^1.2.1", "tailwindcss": "4.1.8" } }, "sha512-OWwBsbC9BFAJelmnNcrKuf+bka2ZxCE2A4Ft53Tkg4uoiE67r/PMEYwCsourC26E+kmxfwE0hVzMdxqeW+xu7Q=="],
 
     "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.8", "", { "dependencies": { "detect-libc": "^2.0.4", "tar": "^7.4.3" }, "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.8", "@tailwindcss/oxide-darwin-arm64": "4.1.8", "@tailwindcss/oxide-darwin-x64": "4.1.8", "@tailwindcss/oxide-freebsd-x64": "4.1.8", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.8", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.8", "@tailwindcss/oxide-linux-arm64-musl": "4.1.8", "@tailwindcss/oxide-linux-x64-gnu": "4.1.8", "@tailwindcss/oxide-linux-x64-musl": "4.1.8", "@tailwindcss/oxide-wasm32-wasi": "4.1.8", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.8", "@tailwindcss/oxide-win32-x64-msvc": "4.1.8" } }, "sha512-d7qvv9PsM5N3VNKhwVUhpK6r4h9wtLkJ6lz9ZY9aeZgrUWk1Z8VPyqyDT9MZlem7GTGseRQHkeB1j3tC7W1P+A=="],
@@ -221,6 +274,8 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.1.8", "", { "dependencies": { "@tailwindcss/node": "4.1.8", "@tailwindcss/oxide": "4.1.8", "tailwindcss": "4.1.8" }, "peerDependencies": { "vite": "^5.2.0 || ^6" } }, "sha512-CQ+I8yxNV5/6uGaJjiuymgw0kEQiNKRinYbZXPdx1fk5WgiyReG0VaUx/Xq6aVNSUNJFzxm6o8FNKS5aMaim5A=="],
 
+    "@tanstack/table-core": ["@tanstack/table-core@8.21.3", "", {}, "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="],
+
     "@threejs-kit/instanced-sprite-mesh": ["@threejs-kit/instanced-sprite-mesh@2.5.1", "", { "dependencies": { "diet-sprite": "^0.0.1", "earcut": "^2.2.4", "maath": "^0.10.7", "three-instanced-uniforms-mesh": "^0.52.4", "troika-three-utils": "^0.52.4" }, "peerDependencies": { "three": ">=0.170.0" } }, "sha512-pmt1ALRhbHhCJQTj2FuthH6PeLIeaM4hOuS2JO3kWSwlnvx/9xuUkjFR3JOi/myMqsH7pSsLIROSaBxDfttjeA=="],
 
     "@threlte/core": ["@threlte/core@8.0.4", "", { "dependencies": { "mitt": "^3.0.1" }, "peerDependencies": { "svelte": ">=5", "three": ">=0.155" } }, "sha512-kg0nTq00RqgTExIEKkyO/yCupCt73lybuFZObKHCRaY7dPcCvRD4tHkyKIFeYLYV4R6u1nqIuzfgDzYJqHbLlQ=="],
@@ -231,10 +286,14 @@
 
     "@types/cookie": ["@types/cookie@0.6.0", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="],
 
+    "@types/draco3d": ["@types/draco3d@1.4.10", "", {}, "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw=="],
+
     "@types/estree": ["@types/estree@1.0.7", "", {}, "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="],
 
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
 
+    "@types/offscreencanvas": ["@types/offscreencanvas@2019.7.3", "", {}, "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A=="],
+
     "@types/stats.js": ["@types/stats.js@0.17.4", "", {}, "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA=="],
 
     "@types/three": ["@types/three@0.176.0", "", { "dependencies": { "@dimforge/rapier3d-compat": "^0.12.0", "@tweenjs/tween.js": "~23.1.3", "@types/stats.js": "*", "@types/webxr": "*", "@webgpu/types": "*", "fflate": "~0.8.2", "meshoptimizer": "~0.18.1" } }, "sha512-FwfPXxCqOtP7EdYMagCFePNKoG1AGBDUEVKtluv2BTVRpSt7b+X27xNsirPCTCqY1pGYsPUzaM3jgWP7dXSxlw=="],
@@ -281,6 +340,8 @@
 
     "bidi-js": ["bidi-js@1.0.3", "", { "dependencies": { "require-from-string": "^2.0.2" } }, "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw=="],
 
+    "bits-ui": ["bits-ui@2.4.1", "", { "dependencies": { "@floating-ui/core": "^1.7.0", "@floating-ui/dom": "^1.7.0", "css.escape": "^1.5.1", "esm-env": "^1.1.2", "runed": "^0.28.0", "svelte-toolbelt": "^0.9.1", "tabbable": "^6.2.0" }, "peerDependencies": { "@internationalized/date": "^3.8.1", "svelte": "^5.33.0" } }, "sha512-Z0qZkPgtxP5dkEOyZqCK2PQ1oFXsD0AlfFMtsrMLJqaYtjUBoQGosHVKEH03M9q4G8kxVnG74Zb0F9pS0X4+6w=="],
+
     "brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
 
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
@@ -301,28 +362,96 @@
 
     "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
 
+    "commander": ["commander@7.2.0", "", {}, "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="],
+
     "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
 
+    "confbox": ["confbox@0.2.2", "", {}, "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ=="],
+
     "cookie": ["cookie@0.6.0", "", {}, "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="],
 
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
+    "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
+
     "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
 
+    "culori": ["culori@4.0.1", "", {}, "sha512-LSnjA6HuIUOlkfKVbzi2OlToZE8OjFi667JWN9qNymXVXzGDmvuP60SSgC+e92sd7B7158f7Fy3Mb6rXS5EDPw=="],
+
+    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
+
+    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
+
+    "d3-delaunay": ["d3-delaunay@6.0.4", "", { "dependencies": { "delaunator": "5" } }, "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A=="],
+
+    "d3-dispatch": ["d3-dispatch@3.0.1", "", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
+
+    "d3-dsv": ["d3-dsv@3.0.1", "", { "dependencies": { "commander": "7", "iconv-lite": "0.6", "rw": "1" }, "bin": { "csv2json": "bin/dsv2json.js", "csv2tsv": "bin/dsv2dsv.js", "dsv2dsv": "bin/dsv2dsv.js", "dsv2json": "bin/dsv2json.js", "json2csv": "bin/json2dsv.js", "json2dsv": "bin/json2dsv.js", "json2tsv": "bin/json2dsv.js", "tsv2csv": "bin/dsv2dsv.js", "tsv2json": "bin/dsv2json.js" } }, "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q=="],
+
+    "d3-force": ["d3-force@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-quadtree": "1 - 3", "d3-timer": "1 - 3" } }, "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg=="],
+
+    "d3-format": ["d3-format@3.1.0", "", {}, "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="],
+
+    "d3-geo": ["d3-geo@3.1.1", "", { "dependencies": { "d3-array": "2.5.0 - 3" } }, "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q=="],
+
+    "d3-geo-voronoi": ["d3-geo-voronoi@2.1.0", "", { "dependencies": { "d3-array": "3", "d3-delaunay": "6", "d3-geo": "3", "d3-tricontour": "1" } }, "sha512-kqE4yYuOjPbKdBXG0xztCacPwkVSK2REF1opSNrnqqtXJmNcM++UbwQ8SxvwP6IQTj9RvIjjK4qeiVsEfj0Z2Q=="],
+
+    "d3-hierarchy": ["d3-hierarchy@3.1.2", "", {}, "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="],
+
+    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
+
+    "d3-interpolate-path": ["d3-interpolate-path@2.3.0", "", {}, "sha512-tZYtGXxBmbgHsIc9Wms6LS5u4w6KbP8C09a4/ZYc4KLMYYqub57rRBUgpUr2CIarIrJEpdAWWxWQvofgaMpbKQ=="],
+
+    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
+
+    "d3-quadtree": ["d3-quadtree@3.0.1", "", {}, "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="],
+
+    "d3-random": ["d3-random@3.0.1", "", {}, "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="],
+
+    "d3-sankey": ["d3-sankey@0.12.3", "", { "dependencies": { "d3-array": "1 - 2", "d3-shape": "^1.2.0" } }, "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ=="],
+
+    "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
+
+    "d3-scale-chromatic": ["d3-scale-chromatic@3.1.0", "", { "dependencies": { "d3-color": "1 - 3", "d3-interpolate": "1 - 3" } }, "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ=="],
+
+    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
+
+    "d3-tile": ["d3-tile@1.0.0", "", {}, "sha512-79fnTKpPMPDS5xQ0xuS9ir0165NEwwkFpe/DSOmc2Gl9ldYzKKRDWogmTTE8wAJ8NA7PMapNfEcyKhI9Lxdu5Q=="],
+
+    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
+
+    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
+
+    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
+
+    "d3-tricontour": ["d3-tricontour@1.0.2", "", { "dependencies": { "d3-delaunay": "6", "d3-scale": "4" } }, "sha512-HIRxHzHagPtUPNabjOlfcyismJYIsc+Xlq4mlsts4e8eAcwyq9Tgk/sYdyhlBpQ0MHwVquc/8j+e29YjXnmxeA=="],
+
+    "date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
+
     "debug": ["debug@4.4.1", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ=="],
 
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
 
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
 
+    "delaunator": ["delaunator@5.0.1", "", { "dependencies": { "robust-predicates": "^3.0.2" } }, "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw=="],
+
     "detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
 
     "devalue": ["devalue@5.1.1", "", {}, "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw=="],
 
     "diet-sprite": ["diet-sprite@0.0.1", "", {}, "sha512-zSHI2WDAn1wJqJYxcmjWfJv3Iw8oL9reQIbEyx2x2/EZ4/qmUTIo8/5qOCurnAcq61EwtJJaZ0XTy2NRYqpB5A=="],
 
+    "draco3d": ["draco3d@1.5.7", "", {}, "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ=="],
+
     "earcut": ["earcut@2.2.4", "", {}, "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="],
 
+    "embla-carousel": ["embla-carousel@8.6.0", "", {}, "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA=="],
+
+    "embla-carousel-reactive-utils": ["embla-carousel-reactive-utils@8.6.0", "", { "peerDependencies": { "embla-carousel": "8.6.0" } }, "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A=="],
+
+    "embla-carousel-svelte": ["embla-carousel-svelte@8.6.0", "", { "dependencies": { "embla-carousel": "8.6.0", "embla-carousel-reactive-utils": "8.6.0" }, "peerDependencies": { "svelte": "^3.49.0 || ^4.0.0 || ^5.0.0" } }, "sha512-ZDsKk8Sdv+AUTygMYcwZjfRd1DTh+JSUzxkOo8b9iKAkYjg+39mzbY/lwHsE3jXSpKxdKWS69hPSNuzlOGtR2Q=="],
+
     "enhanced-resolve": ["enhanced-resolve@5.18.1", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg=="],
 
     "esbuild": ["esbuild@0.25.5", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.5", "@esbuild/android-arm": "0.25.5", "@esbuild/android-arm64": "0.25.5", "@esbuild/android-x64": "0.25.5", "@esbuild/darwin-arm64": "0.25.5", "@esbuild/darwin-x64": "0.25.5", "@esbuild/freebsd-arm64": "0.25.5", "@esbuild/freebsd-x64": "0.25.5", "@esbuild/linux-arm": "0.25.5", "@esbuild/linux-arm64": "0.25.5", "@esbuild/linux-ia32": "0.25.5", "@esbuild/linux-loong64": "0.25.5", "@esbuild/linux-mips64el": "0.25.5", "@esbuild/linux-ppc64": "0.25.5", "@esbuild/linux-riscv64": "0.25.5", "@esbuild/linux-s390x": "0.25.5", "@esbuild/linux-x64": "0.25.5", "@esbuild/netbsd-arm64": "0.25.5", "@esbuild/netbsd-x64": "0.25.5", "@esbuild/openbsd-arm64": "0.25.5", "@esbuild/openbsd-x64": "0.25.5", "@esbuild/sunos-x64": "0.25.5", "@esbuild/win32-arm64": "0.25.5", "@esbuild/win32-ia32": "0.25.5", "@esbuild/win32-x64": "0.25.5" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ=="],
@@ -351,8 +480,12 @@
 
     "estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
 
+    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+
     "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
 
+    "exsolve": ["exsolve@1.0.5", "", {}, "sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg=="],
+
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
     "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
@@ -389,12 +522,18 @@
 
     "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
 
+    "iconv-lite": ["iconv-lite@0.6.3", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="],
+
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
 
     "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
 
     "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
 
+    "inline-style-parser": ["inline-style-parser@0.2.4", "", {}, "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q=="],
+
+    "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
+
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
 
     "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
@@ -421,6 +560,10 @@
 
     "known-css-properties": ["known-css-properties@0.36.0", "", {}, "sha512-A+9jP+IUmuQsNdsLdcg6Yt7voiMF/D4K83ew0OpJtpu+l34ef7LaohWV0Rc6KNvzw6ZDizkqfyB5JznZnzuKQA=="],
 
+    "kolorist": ["kolorist@1.8.0", "", {}, "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ=="],
+
+    "layerchart": ["layerchart@2.0.0-next.10", "", { "dependencies": { "@dagrejs/dagre": "^1.1.4", "@layerstack/svelte-actions": "1.0.1-next.2", "@layerstack/svelte-state": "0.1.0-next.7", "@layerstack/tailwind": "2.0.0-next.4", "@layerstack/utils": "2.0.0-next.3", "d3-array": "^3.2.4", "d3-color": "^3.1.0", "d3-delaunay": "^6.0.4", "d3-dsv": "^3.0.1", "d3-force": "^3.0.0", "d3-geo": "^3.1.1", "d3-geo-voronoi": "^2.1.0", "d3-hierarchy": "^3.1.2", "d3-interpolate": "^3.0.1", "d3-interpolate-path": "^2.3.0", "d3-path": "^3.1.0", "d3-quadtree": "^3.0.1", "d3-random": "^3.0.1", "d3-sankey": "^0.12.3", "d3-scale": "^4.0.2", "d3-scale-chromatic": "^3.1.0", "d3-shape": "^3.2.0", "d3-tile": "^1.0.0", "d3-time": "^3.1.0", "date-fns": "^4.1.0", "lodash-es": "^4.17.21", "runed": "^0.28.0" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-Jw0EMWRDjecl0esHlHeyqObhPJCOXD9eQLWOu3I37+XCHXDHp4QL/5avcmBIwflmLE1e/fVGoMaeTZjyezZGhA=="],
+
     "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
 
     "lightningcss": ["lightningcss@1.30.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-darwin-arm64": "1.30.1", "lightningcss-darwin-x64": "1.30.1", "lightningcss-freebsd-x64": "1.30.1", "lightningcss-linux-arm-gnueabihf": "1.30.1", "lightningcss-linux-arm64-gnu": "1.30.1", "lightningcss-linux-arm64-musl": "1.30.1", "lightningcss-linux-x64-gnu": "1.30.1", "lightningcss-linux-x64-musl": "1.30.1", "lightningcss-win32-arm64-msvc": "1.30.1", "lightningcss-win32-x64-msvc": "1.30.1" } }, "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg=="],
@@ -447,10 +590,14 @@
 
     "lilconfig": ["lilconfig@2.1.0", "", {}, "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="],
 
+    "local-pkg": ["local-pkg@1.1.1", "", { "dependencies": { "mlly": "^1.7.4", "pkg-types": "^2.0.1", "quansync": "^0.2.8" } }, "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg=="],
+
     "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
 
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
+    "lodash-es": ["lodash-es@4.17.21", "", {}, "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="],
+
     "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
 
     "maath": ["maath@0.10.8", "", { "peerDependencies": { "@types/three": ">=0.134.0", "three": ">=0.134.0" } }, "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g=="],
@@ -473,6 +620,10 @@
 
     "mkdirp": ["mkdirp@3.0.1", "", { "bin": { "mkdirp": "dist/cjs/src/bin.js" } }, "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg=="],
 
+    "mlly": ["mlly@1.7.4", "", { "dependencies": { "acorn": "^8.14.0", "pathe": "^2.0.1", "pkg-types": "^1.3.0", "ufo": "^1.5.4" } }, "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw=="],
+
+    "mode-watcher": ["mode-watcher@1.0.7", "", { "dependencies": { "runed": "^0.25.0", "svelte-toolbelt": "^0.7.1" }, "peerDependencies": { "svelte": "^5.27.0" } }, "sha512-ZGA7ZGdOvBJeTQkzdBOnXSgTkO6U6iIFWJoyGCTt6oHNg9XP9NBvS26De+V4W2aqI+B0yYXUskFG2VnEo3zyMQ=="],
+
     "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
 
     "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
@@ -489,16 +640,24 @@
 
     "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
 
+    "package-manager-detector": ["package-manager-detector@1.3.0", "", {}, "sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ=="],
+
+    "paneforge": ["paneforge@1.0.0-next.5", "", { "dependencies": { "runed": "^0.23.4", "svelte-toolbelt": "^0.7.1" }, "peerDependencies": { "svelte": "^5.20.0" } }, "sha512-1ArDM+GMEO+o6pixEAFobhTkWkyxUDdHyw2bKruvQIXBStJmdRP7HoV4jNBZ/2i9UHDzmczxJzA3D2tKa91phw=="],
+
     "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],
 
     "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
 
     "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
 
+    "pathe": ["pathe@1.1.2", "", {}, "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="],
+
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "picomatch": ["picomatch@4.0.2", "", {}, "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg=="],
 
+    "pkg-types": ["pkg-types@2.1.0", "", { "dependencies": { "confbox": "^0.2.1", "exsolve": "^1.0.1", "pathe": "^2.0.3" } }, "sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A=="],
+
     "postcss": ["postcss@8.5.4", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-QSa9EBe+uwlGTFmHsPKokv3B/oEMQZxfqW0QqNCyhpa6mB1afzulwn8hihglqAb2pOw+BJgNlmXQ8la2VeHB7w=="],
 
     "postcss-load-config": ["postcss-load-config@3.1.4", "", { "dependencies": { "lilconfig": "^2.0.5", "yaml": "^1.10.2" }, "peerDependencies": { "postcss": ">=8.0.9", "ts-node": ">=9.0.0" }, "optionalPeers": ["postcss", "ts-node"] }, "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg=="],
@@ -509,6 +668,10 @@
 
     "postcss-selector-parser": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="],
 
+    "postprocessing": ["postprocessing@6.37.3", "", { "peerDependencies": { "three": ">= 0.157.0 < 0.177.0" } }, "sha512-2FzfZg41Ml/ddvSalLdCz7H53Wmr/ZvK238fauTG1CI97+65BDgo1dNH6AKhAWc5q9ngpyG5EYiXVbNCl2t1iA=="],
+
+    "potpack": ["potpack@1.0.2", "", {}, "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="],
+
     "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
 
     "prettier": ["prettier@3.5.3", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw=="],
@@ -519,6 +682,8 @@
 
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
+    "quansync": ["quansync@0.2.10", "", {}, "sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A=="],
+
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
 
     "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
@@ -529,12 +694,20 @@
 
     "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
 
+    "robust-predicates": ["robust-predicates@3.0.2", "", {}, "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="],
+
     "rollup": ["rollup@4.41.1", "", { "dependencies": { "@types/estree": "1.0.7" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.41.1", "@rollup/rollup-android-arm64": "4.41.1", "@rollup/rollup-darwin-arm64": "4.41.1", "@rollup/rollup-darwin-x64": "4.41.1", "@rollup/rollup-freebsd-arm64": "4.41.1", "@rollup/rollup-freebsd-x64": "4.41.1", "@rollup/rollup-linux-arm-gnueabihf": "4.41.1", "@rollup/rollup-linux-arm-musleabihf": "4.41.1", "@rollup/rollup-linux-arm64-gnu": "4.41.1", "@rollup/rollup-linux-arm64-musl": "4.41.1", "@rollup/rollup-linux-loongarch64-gnu": "4.41.1", "@rollup/rollup-linux-powerpc64le-gnu": "4.41.1", "@rollup/rollup-linux-riscv64-gnu": "4.41.1", "@rollup/rollup-linux-riscv64-musl": "4.41.1", "@rollup/rollup-linux-s390x-gnu": "4.41.1", "@rollup/rollup-linux-x64-gnu": "4.41.1", "@rollup/rollup-linux-x64-musl": "4.41.1", "@rollup/rollup-win32-arm64-msvc": "4.41.1", "@rollup/rollup-win32-ia32-msvc": "4.41.1", "@rollup/rollup-win32-x64-msvc": "4.41.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-cPmwD3FnFv8rKMBc1MxWCwVQFxwf1JEmSX3iQXrRVVG15zerAIXRjMFVWnd5Q5QvgKF7Aj+5ykXFhUl+QGnyOw=="],
 
     "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
 
+    "runed": ["runed@0.28.0", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-k2xx7RuO9hWcdd9f+8JoBeqWtYrm5CALfgpkg2YDB80ds/QE4w0qqu34A7fqiAwiBBSBQOid7TLxwxVC27ymWQ=="],
+
+    "rw": ["rw@1.3.3", "", {}, "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="],
+
     "sade": ["sade@1.8.1", "", { "dependencies": { "mri": "^1.1.0" } }, "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A=="],
 
+    "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
+
     "semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
 
     "set-cookie-parser": ["set-cookie-parser@2.7.1", "", {}, "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="],
@@ -549,6 +722,8 @@
 
     "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
 
+    "style-to-object": ["style-to-object@1.0.8", "", { "dependencies": { "inline-style-parser": "0.2.4" } }, "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g=="],
+
     "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
 
     "svelte": ["svelte@5.33.10", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^1.4.6", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-/yArPQIBoQS2p86LKnvJywOXkVHeEXnFgrDPSxkEfIAEkykopYuy2bF6UUqHG4IbZlJD6OurLxJT8Kn7kTk9WA=="],
@@ -557,8 +732,16 @@
 
     "svelte-eslint-parser": ["svelte-eslint-parser@1.2.0", "", { "dependencies": { "eslint-scope": "^8.2.0", "eslint-visitor-keys": "^4.0.0", "espree": "^10.0.0", "postcss": "^8.4.49", "postcss-scss": "^4.0.9", "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0" }, "optionalPeers": ["svelte"] }, "sha512-mbPtajIeuiyU80BEyGvwAktBeTX7KCr5/0l+uRGLq1dafwRNrjfM5kHGJScEBlPG3ipu6dJqfW/k0/fujvIEVw=="],
 
+    "svelte-sonner": ["svelte-sonner@1.0.4", "", { "dependencies": { "runed": "^0.26.0" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-ctm9jeV0Rf3im2J6RU1emccrJFjRSdNSPsLlxaF62TLZw9bB1D40U/U7+wqEgohJY/X7FBdghdj0BFQF/IqKPQ=="],
+
+    "svelte-toolbelt": ["svelte-toolbelt@0.9.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.28.0", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.30.2" } }, "sha512-wBX6MtYw/kpht80j5zLpxJyR9soLizXPIAIWEVd9llAi17SR44ZdG291bldjB7r/K5duC0opDFcuhk2cA1hb8g=="],
+
+    "tabbable": ["tabbable@6.2.0", "", {}, "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="],
+
     "tailwind-merge": ["tailwind-merge@3.3.0", "", {}, "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ=="],
 
+    "tailwind-variants": ["tailwind-variants@1.0.0", "", { "dependencies": { "tailwind-merge": "3.0.2" }, "peerDependencies": { "tailwindcss": "*" } }, "sha512-2WSbv4ulEEyuBKomOunut65D8UZwxrHoRfYnxGcQNnHqlSCp2+B7Yz2W+yrNDrxRodOXtGD/1oCcKGNBnUqMqA=="],
+
     "tailwindcss": ["tailwindcss@4.1.8", "", {}, "sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og=="],
 
     "tapable": ["tapable@2.2.2", "", {}, "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg=="],
@@ -573,8 +756,14 @@
 
     "three-perf": ["three-perf@github:jerzakm/three-perf#322d7d3", { "dependencies": { "troika-three-text": "^0.52.0", "tweakpane": "^3.1.10" }, "peerDependencies": { "three": ">=0.170" } }, "jerzakm-three-perf-322d7d3"],
 
+    "three-stdlib": ["three-stdlib@2.36.0", "", { "dependencies": { "@types/draco3d": "^1.4.0", "@types/offscreencanvas": "^2019.6.4", "@types/webxr": "^0.5.2", "draco3d": "^1.4.1", "fflate": "^0.6.9", "potpack": "^1.0.1" }, "peerDependencies": { "three": ">=0.128.0" } }, "sha512-kv0Byb++AXztEGsULgMAs8U2jgUdz6HPpAB/wDJnLiLlaWQX2APHhiTJIN7rqW+Of0eRgcp7jn05U1BsCP3xBA=="],
+
     "three-viewport-gizmo": ["three-viewport-gizmo@2.2.0", "", { "peerDependencies": { "three": ">=0.162.0 <1.0.0" } }, "sha512-Jo9Liur1rUmdKk75FZumLU/+hbF+RtJHi1qsKZpntjKlCYScK6tjbYoqvJ9M+IJphrlQJF5oReFW7Sambh0N4Q=="],
 
+    "threlte-postprocessing": ["threlte-postprocessing@0.0.9", "", { "dependencies": { "@threlte/core": "^8.0.1", "@threlte/extras": "^9.0.1", "postprocessing": "^6.36.7", "three": "^0.173.0", "three-stdlib": "^2.35.13", "vite-plugin-glsl": "^1.3.1", "vite-plugin-string": "^1.2.3" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-LzxJXh/z+DeT8xfmIKGCRTw5sOAGaoLXjuxMu9qw84DCmrAueGjXqCHOgPSVF7nbye0ecQYomlUIctcw32by1w=="],
+
+    "tinyexec": ["tinyexec@1.0.1", "", {}, "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw=="],
+
     "tinyglobby": ["tinyglobby@0.2.14", "", { "dependencies": { "fdir": "^6.4.4", "picomatch": "^4.0.2" } }, "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ=="],
 
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
@@ -589,6 +778,10 @@
 
     "ts-api-utils": ["ts-api-utils@2.1.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ=="],
 
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "tw-animate-css": ["tw-animate-css@1.3.3", "", {}, "sha512-tXE2TRWrskc4TU3RDd7T8n8Np/wCfoeH9gz22c7PzYqNPQ9FBGFbWWzwL0JyHcFp+jHozmF76tbHfPAx22ua2Q=="],
+
     "tweakpane": ["tweakpane@3.1.10", "", {}, "sha512-rqwnl/pUa7+inhI2E9ayGTqqP0EPOOn/wVvSWjZsRbZUItzNShny7pzwL3hVlaN4m9t/aZhsP0aFQ9U5VVR2VQ=="],
 
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
@@ -597,12 +790,20 @@
 
     "typescript-eslint": ["typescript-eslint@8.33.0", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.33.0", "@typescript-eslint/parser": "8.33.0", "@typescript-eslint/utils": "8.33.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-5YmNhF24ylCsvdNW2oJwMzTbaeO4bg90KeGtMjUw0AGtHksgEPLRTUil+coHwCfiu4QjVJFnjp94DmU6zV7DhQ=="],
 
+    "ufo": ["ufo@1.6.1", "", {}, "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA=="],
+
     "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
+    "vaul-svelte": ["vaul-svelte@1.0.0-next.7", "", { "dependencies": { "runed": "^0.23.2", "svelte-toolbelt": "^0.7.1" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-7zN7Bi3dFQixvvbUJY9uGDe7Ws/dGZeBQR2pXdXmzQiakjrxBvWo0QrmsX3HK+VH+SZOltz378cmgmCS9f9rSg=="],
+
     "vite": ["vite@6.3.5", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ=="],
 
+    "vite-plugin-glsl": ["vite-plugin-glsl@1.4.2", "", { "dependencies": { "@rollup/pluginutils": "^5.1.4" }, "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" } }, "sha512-GQHx5tUPFna1zOrX9tbpSHLSVEv/wXZGPEey3Pk8ktHR/OJCEg82Vx2oE9d8mOeMhLfelrtpXg0TBD4riRs39Q=="],
+
+    "vite-plugin-string": ["vite-plugin-string@1.2.3", "", { "dependencies": { "@rollup/pluginutils": ">=4.1.0" }, "peerDependencies": { "vite": ">=2" } }, "sha512-zw2jL0c4B6CAvxO8PshX04494jTcqJjNH2kW1AugBH+fImRY0evdNtVgmeS1i1VFdua/OFhL7fMqIPh0uF21/Q=="],
+
     "vitefu": ["vitefu@1.0.6", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" }, "optionalPeers": ["vite"] }, "sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA=="],
 
     "webgl-sdf-generator": ["webgl-sdf-generator@1.1.1", "", {}, "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA=="],
@@ -627,6 +828,12 @@
 
     "@humanfs/node/@humanwhocodes/retry": ["@humanwhocodes/retry@0.3.1", "", {}, "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA=="],
 
+    "@iconify/utils/globals": ["globals@15.15.0", "", {}, "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg=="],
+
+    "@layerstack/svelte-actions/@layerstack/utils": ["@layerstack/utils@1.1.0-next.2", "", { "dependencies": { "d3-array": "^3.2.4", "date-fns": "^4.1.0", "lodash-es": "^4.17.21" } }, "sha512-9Y4TOAE0iIVvnrf1mkft79rF/vTO84bZuc4hjhJB7XguFjy2f00pEfrDjF+IqleWImMFfRu31K2IMM6wRWEBXQ=="],
+
+    "@layerstack/tailwind/@layerstack/utils": ["@layerstack/utils@1.1.0-next.2", "", { "dependencies": { "d3-array": "^3.2.4", "date-fns": "^4.1.0", "lodash-es": "^4.17.21" } }, "sha512-9Y4TOAE0iIVvnrf1mkft79rF/vTO84bZuc4hjhJB7XguFjy2f00pEfrDjF+IqleWImMFfRu31K2IMM6wRWEBXQ=="],
+
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.4.3", "", { "dependencies": { "@emnapi/wasi-threads": "1.0.2", "tslib": "^2.4.0" }, "bundled": true }, "sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.4.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ=="],
@@ -643,10 +850,48 @@
 
     "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
 
+    "d3-sankey/d3-array": ["d3-array@2.12.1", "", { "dependencies": { "internmap": "^1.0.0" } }, "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ=="],
+
+    "d3-sankey/d3-shape": ["d3-shape@1.3.7", "", { "dependencies": { "d3-path": "1" } }, "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw=="],
+
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
+    "mlly/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
+    "mlly/pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="],
+
+    "mode-watcher/runed": ["runed@0.25.0", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg=="],
+
+    "mode-watcher/svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
+
+    "paneforge/runed": ["runed@0.23.4", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA=="],
+
+    "paneforge/svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
+
+    "pkg-types/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
+    "svelte-sonner/runed": ["runed@0.26.0", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-qWFv0cvLVRd8pdl/AslqzvtQyEn5KaIugEernwg9G98uJVSZcs/ygvPBvF80LA46V8pwRvSKnaVLDI3+i2wubw=="],
+
+    "tailwind-variants/tailwind-merge": ["tailwind-merge@3.0.2", "", {}, "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw=="],
+
+    "three-stdlib/fflate": ["fflate@0.6.10", "", {}, "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg=="],
+
+    "threlte-postprocessing/three": ["three@0.173.0", "", {}, "sha512-AUwVmViIEUgBwxJJ7stnF0NkPpZxx1aZ6WiAbQ/Qq61h6I9UR4grXtZDmO8mnlaNORhHnIBlXJ1uBxILEKuVyw=="],
+
+    "vaul-svelte/runed": ["runed@0.23.4", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA=="],
+
+    "vaul-svelte/svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
+
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
+
+    "d3-sankey/d3-array/internmap": ["internmap@1.0.1", "", {}, "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="],
+
+    "d3-sankey/d3-shape/d3-path": ["d3-path@1.0.9", "", {}, "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="],
+
+    "mlly/pkg-types/confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
+
+    "mode-watcher/svelte-toolbelt/runed": ["runed@0.23.4", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA=="],
   }
 }

components.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://next.shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/app.css",
+		"baseColor": "stone"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://next.shadcn-svelte.com/registry"
+}

package.json

@@ -16,23 +16,37 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
+		"@iconify/json": "^2.2.344",
+		"@iconify/tailwind4": "^1.0.6",
+		"@internationalized/date": "^3.5.6",
+		"@lucide/svelte": "^0.511.0",
 		"@sveltejs/adapter-auto": "^6.0.0",
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/vite": "^4.0.0",
+		"@tanstack/table-core": "^8.20.5",
+		"bits-ui": "^2.4.1",
+		"embla-carousel-svelte": "^8.6.0",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
+		"layerchart": "2.0.0-next.10",
+		"mode-watcher": "^1.0.6",
+		"paneforge": "^1.0.0-next.5",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
+		"svelte-sonner": "^1.0.1",
+		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^4.0.0",
+		"tw-animate-css": "^1.3.3",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
+		"vaul-svelte": "^1.0.0-next.7",
 		"vite": "^6.2.6"
 	},
 	"dependencies": {
@@ -42,6 +56,7 @@
 		"clsx": "^2.1.1",
 		"tailwind-merge": "^3.3.0",
 		"three": "^0.177.0",
+		"threlte-postprocessing": "^0.0.9",
 		"zod": "^3.25.42"
 	}
 }

src-python/src/main.py

@@ -641,50 +641,52 @@ async def sync_slave_with_current_state(robot_id: str, websocket: WebSocket):
 
 # ============= FRONTEND SERVING ROUTES (Must be last) =============
 
-
-# Serve static assets from the _app directory
-@app.get("/_app/{path:path}")
-async def serve_app_assets(path: str):
-    """Serve Svelte app assets"""
-    static_dir = get_static_dir()
-    if not static_dir:
-        raise HTTPException(status_code=404, detail="Frontend not found")
-
-    file_path = os.path.join(static_dir, "_app", path)
-    if os.path.exists(file_path) and os.path.isfile(file_path):
-        return FileResponse(file_path)
-    raise HTTPException(status_code=404, detail="File not found")
-
-
-@app.get("/")
-async def serve_frontend():
-    """Serve the main frontend page"""
-    static_dir = get_static_dir()
-    if not static_dir:
+EXPOSE_FRONTEND = os.getenv("EXPOSE_FRONTEND", "false").lower() == "true"
+
+if EXPOSE_FRONTEND:
+    # Serve static assets from the _app directory
+    @app.get("/_app/{path:path}")
+    async def serve_app_assets(path: str):
+        """Serve Svelte app assets"""
+        static_dir = get_static_dir()
+        if not static_dir:
+            raise HTTPException(status_code=404, detail="Frontend not found")
+
+        file_path = os.path.join(static_dir, "_app", path)
+        if os.path.exists(file_path) and os.path.isfile(file_path):
+            return FileResponse(file_path)
+        raise HTTPException(status_code=404, detail="File not found")
+
+    @app.get("/")
+    async def serve_frontend():
+        """Serve the main frontend page"""
+        static_dir = get_static_dir()
+        if not static_dir:
+            return {
+                "message": "Frontend not built. Run 'bun run build' to build the frontend."
+            }
+
+        index_file = os.path.join(static_dir, "index.html")
+        if os.path.exists(index_file):
+            return FileResponse(index_file)
         return {
             "message": "Frontend not built. Run 'bun run build' to build the frontend."
         }
 
-    index_file = os.path.join(static_dir, "index.html")
-    if os.path.exists(index_file):
-        return FileResponse(index_file)
-    return {"message": "Frontend not built. Run 'bun run build' to build the frontend."}
-
-
-# Catch-all route for client-side routing (SPA fallback) - MUST BE LAST
-@app.get("/{path:path}")
-async def serve_spa_fallback(path: str):
-    """Serve the frontend for client-side routing"""
-    # For all paths not handled by other routes, serve the index.html (SPA)
-    static_dir = get_static_dir()
-    if not static_dir:
+    # Catch-all route for client-side routing (SPA fallback) - MUST BE LAST
+    @app.get("/{path:path}")
+    async def serve_spa_fallback(path: str):
+        """Serve the frontend for client-side routing"""
+        # For all paths not handled by other routes, serve the index.html (SPA)
+        static_dir = get_static_dir()
+        if not static_dir:
+            raise HTTPException(status_code=404, detail="Frontend not found")
+
+        index_file = os.path.join(static_dir, "index.html")
+        if os.path.exists(index_file):
+            return FileResponse(index_file)
         raise HTTPException(status_code=404, detail="Frontend not found")
 
-    index_file = os.path.join(static_dir, "index.html")
-    if os.path.exists(index_file):
-        return FileResponse(index_file)
-    raise HTTPException(status_code=404, detail="Frontend not found")
-
 
 if __name__ == "__main__":
     import uvicorn

src/app.css

@@ -1 +1,122 @@
-@import 'tailwindcss';
+@import "tailwindcss";
+
+@import "tw-animate-css";
+@plugin "@iconify/tailwind4";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.216 0.006 56.043);
+  --primary-foreground: oklch(0.985 0.001 106.423);
+  --secondary: oklch(0.97 0.001 106.424);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.216 0.006 56.043);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+}
+
+.dark {
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.923 0.003 48.717);
+  --primary-foreground: oklch(0.216 0.006 56.043);
+  --secondary: oklch(0.268 0.007 34.298);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/lib/components/{scene → 3d}/Floor.svelte

@@ -2,19 +2,15 @@
 	import { T } from '@threlte/core';
 	import * as THREE from 'three';
 
-	/**
-	 * Creates a grid texture for the ground plane
-	 * Matches the original React implementation for visual consistency
-	 */
 	function createGridTexture(): THREE.CanvasTexture {
-		const size = 200;
+		const size = 100;
 		const canvas = document.createElement('canvas');
 		canvas.width = canvas.height = size;
 		const ctx = canvas.getContext('2d');
 
 		if (ctx) {
-			// Base color
-			ctx.fillStyle = '#aaa';
+			// Base color - updated to match Tailwind's bg-stone-500
+			ctx.fillStyle = '#71717A';
 			ctx.fillRect(0, 0, size, size);
 
 			// Grid lines
@@ -31,26 +27,20 @@
 
 		const texture = new THREE.CanvasTexture(canvas);
 		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
-		texture.repeat.set(100, 100);
+		texture.repeat.set(10, 10);
 		return texture;
 	}
 
-	// Create texture reactively using Svelte 5 runes
 	const gridTexture = createGridTexture();
 </script>
 
-<!-- Ground plane with grid texture matching React version -->
 <T.Mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
-	<T.PlaneGeometry args={[30, 30]} />
+	<T.PlaneGeometry args={[10, 10]} />
 	<T.MeshPhysicalMaterial
 		color={0x808080}
-		metalness={0.7}
-		roughness={0.3}
-		reflectivity={0.1}
-		clearcoat={0.3}
 		side={THREE.DoubleSide}
 		transparent
-		opacity={0.7}
+		opacity={1}
 		map={gridTexture}
 	/>
 </T.Mesh>

src/lib/components/3d/Robot.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { T } from '@threlte/core';
+	import { getRootLinks } from '$lib/components/3d/robot/URDF/utils/UrdfParser';
+	import UrdfLink from '$lib/components/3d/robot/URDF/primitives/UrdfLink.svelte';
+	import { robotManager } from '$lib/robot/RobotManager.svelte';
+	import Selectable from './Selectable.svelte';
+
+	interface Props {}
+
+	let {}: Props = $props();
+
+	// Get all robots from the manager
+	const robots = $derived(robotManager.robots);
+</script>
+
+{#each robots as robot, index (robot.id)}
+	{@const xPosition = index * 5}
+	<T.Group position.x={xPosition} position.y={0} position.z={0} quaternion={[0, 0, 0, 1]} scale={[10, 10, 10]} rotation={[-Math.PI / 2, 0, 0]}>
+		<Selectable
+			hoverColor="#ff6b6b"
+			hoverOpacity={0.5}
+			enableEdit={true}
+		>
+		{#snippet content({ isHighlighted })}
+			{#each getRootLinks(robot.robotState.robot) as link}
+				<UrdfLink
+					robot={robot.robotState.robot}
+					{link}
+					textScale={0.2}
+					showName={isHighlighted}
+					showVisual={true}
+					showCollision={false}
+					visualColor="#333333"
+					visualOpacity={isHighlighted ? 0.1 : 1.0}
+					collisionOpacity={1.0}
+					collisionColor="#813d9c"
+					jointNames={isHighlighted}
+					joints={isHighlighted}
+					jointColor="#62a0ea"
+					jointIndicatorColor="#f66151"
+					nameHeight={0.1}
+					selectedLink={robot.robotState.selection.selectedLink}
+					selectedJoint={robot.robotState.selection.selectedJoint}
+					highlightColor="#ffa348"
+					showLine={isHighlighted}
+					opacity={1}
+					isInteractive={false}
+				/>
+			{/each}
+		{/snippet}
+		</Selectable>
+	</T.Group>
+{/each}

src/lib/components/3d/Selectable.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { T } from '@threlte/core';
+	import { TransformControls, interactivity } from '@threlte/extras';
+	import type { Snippet } from 'svelte';
+	import { Spring } from 'svelte/motion';
+	import { useCursor } from '@threlte/extras';
+	import { setContext } from 'svelte';
+
+	interface Props {
+		content: Snippet<[{ isHighlighted: boolean }]> // renderable
+		enableEdit?: boolean;
+		hoverColor?: string;
+		defaultColor?: string;
+		hoverOpacity?: number;
+	}
+
+	let {
+		content,
+		enableEdit = $bindable(true),
+		hoverColor = '#ffa348',
+		hoverOpacity = 0.5,
+	}: Props = $props();
+
+	interactivity();
+	const scale = new Spring(1);
+
+	// Position state to persist transforms
+	let position = $state<[number, number, number]>([0, 0, 0]);
+	let rotation = $state<[number, number, number]>([0, 0, 0]);
+
+	// Hover state
+	let isHovered = $state(false);
+	let isSelected = $state(false);
+	let isHighlighted = $derived(enableEdit && (isSelected || isHovered));
+
+	$effect(() => {
+		// If isHighlighted is true, set the color to hoverColor and opacity to hoverOpacity
+		if (isHighlighted) {
+			scale.target = 1.05;
+		} else {
+			scale.target = 1;
+		}
+	});
+
+	const { onPointerEnter, onPointerLeave } = useCursor();
+
+	// Handle keyboard events for deselection
+	$effect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape' && isSelected) {
+				isSelected = false;
+			}
+		};
+
+		if (isSelected) {
+			document.addEventListener('keydown', handleKeyDown);
+			return () => {
+				document.removeEventListener('keydown', handleKeyDown);
+			};
+		}
+	});
+
+	// Handle transform changes
+	const handleTransform = (ref: any) => {
+		ref.updateMatrix();
+		// Update our position state from the object's current position
+		position = ref.position.toArray();
+		rotation = ref.rotation.toArray();
+	};
+</script>
+
+<T.Group 
+	{position}
+	{rotation}
+	onclick={() => {
+		isSelected = true;
+
+	}}
+	onpointerenter={() => {
+		onPointerEnter();
+		isHovered = true;
+	}}
+	onpointerleave={() => {
+		onPointerLeave();
+		isHovered = false;
+	}}
+	scale={scale.current}
+>
+	{#snippet children({ ref })}
+		{@render content({ isHighlighted })}
+		{#if isSelected && enableEdit}
+			<TransformControls
+				object={ref}
+				mode="translate"
+				showY={false}
+				axis="XZ"
+				space="world"
+				on:objectChange={() => handleTransform(ref)}
+				on:mouseUp={() => handleTransform(ref)}
+			/>
+		{/if}
+	{/snippet}
+</T.Group>
+
+<!-- From https://github.com/brean/urdf-viewer -->

src/lib/components/{scene → 3d}/robot/URDF/primitives/UrdfJoint.svelte

@@ -10,7 +10,6 @@
 		Text,
 		type InteractivityProps
 	} from '@threlte/extras';
-	import Selectable from '../../../Selectable.svelte';
 
 	import type IUrdfLink from '../interfaces/IUrdfLink';
 	import type IUrdfRobot from '../interfaces/IUrdfRobot';
@@ -72,20 +71,6 @@
 </script>
 
 {@html `<!-- Joint ${joint.name} (${joint.type}) -->`}
-{#if showName}
-	<Billboard
-		position.x={joint.origin_xyz[0]}
-		position.y={joint.origin_xyz[1]}
-		position.z={joint.origin_xyz[2]}
-	>
-		<Text
-			scale={nameHeight}
-			color={selectedJoint == joint ? highlightColor : jointColor}
-			text={joint.name}
-			characters="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-		></Text>
-	</Billboard>
-{/if}
 
 <!-- draw line from parent-frame to joint origin -->
 {#if showLine}
@@ -100,8 +85,8 @@
 	</T.Line>
 {/if}
 
-<Selectable origin={joint} selected={selectedJoint == joint}>
-	<T.Group rotation={joint.rotation || [0, 0, 0]}>
+<T.Group position={joint.origin_xyz} rotation={joint.origin_rpy}>
+	<T.Group rotation={joint.rotation}>
 		{#if joint.child}
 			<UrdfLink
 				{robot}
@@ -121,7 +106,7 @@
 				{selectedLink}
 				{selectedJoint}
 				{highlightColor}
-				showLine={true}
+				{showLine}
 				opacity={1}
 				isInteractive={true}
 			/>
@@ -143,6 +128,24 @@
 			</T.Mesh>
 		{/if}
 	</T.Group>
-</Selectable>
+</T.Group>
+
+{#if showName}
+	<Billboard
+		position.x={joint.origin_xyz[0] + 0.04}
+		position.y={joint.origin_xyz[1] + 0.01}
+		position.z={joint.origin_xyz[2] + 0.03}
+		renderOrder={999}
+		frustumCulled={false}
+	>
+		<Text
+			scale={nameHeight}
+			color={selectedJoint == joint ? highlightColor : jointColor}
+			text={joint.name}
+			characters="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+			renderOrder={999}
+		></Text>
+	</Billboard>
+{/if}
 
 <!-- From https://github.com/brean/urdf-viewer -->

src/lib/components/{scene → 3d}/robot/URDF/primitives/UrdfLink.svelte

@@ -59,10 +59,10 @@
 
 {@html `<!-- Link ${link.name} -->`}
 {#if showName}
-	<!-- <Billboard position.x={0} position.y={0} position.z={0}>
+	<Billboard position.x={0} position.y={0} position.z={0}>
 		<Text anchorY={-0.2} scale={textScale} text={link.name} characters="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
 		></Text>
-	</Billboard> -->
+	</Billboard>
 {/if}
 
 {#if showVisual}
@@ -85,10 +85,10 @@
 	{/each}
 {/if}
 
-{#each getChildJoints(robot, link) as joint}
+{#each getChildJoints(robot, link) as joint (joint.name)}
 	<UrdfJoint
 		{robot}
-		joint={joint}
+		{joint}
 		{selectedJoint}
 		{selectedLink}
 		{showName}

src/lib/components/{scene → 3d}/robot/URDF/primitives/UrdfVisual.svelte

@@ -8,6 +8,7 @@
 	import { interactivity, type InteractivityProps } from '@threlte/extras';
 	import type IUrdfLink from '../interfaces/IUrdfLink';
 	import { DoubleSide, type Side } from 'three';
+	import { getContext } from 'svelte';
 
 	type Props = InteractivityProps & {
 		visual: IUrdfVisual;
@@ -36,17 +37,19 @@
 		...restProps
 	}: Props = $props();
 
-	const color = visual?.color_rgba
+	// Use context color only when hovering, otherwise use original logic
+	const baseColor = visual?.color_rgba
 		? numberArrayToColor(visual.color_rgba.slice(0, 3) as [number, number, number])
 		: defaultColor;
+
 		
 </script>
 
 {#if visual.type === 'mesh'}
 	{#if visual.geometry.type === 'stl'}
 		<STL
-			{color}
-			{opacity}
+			color={baseColor}
+			opacity={opacity}
 			filename={visual.geometry.filename}
 			scale={visual.geometry.scale}
 			{position}
@@ -59,8 +62,8 @@
 		/>
 	{:else if visual.geometry.type === 'obj'}
 		<OBJ
-			{color}
-			{opacity}
+			color={baseColor}
+			opacity={opacity}
 			scale={visual.geometry.scale}
 			filename={visual.geometry.filename}
 			{position}
@@ -74,8 +77,8 @@
 	{:else if visual.geometry.type === 'dae'}
 		<DAE
 			filename={visual.geometry.filename}
-			{color}
-			{opacity}
+			color={baseColor}
+			opacity={opacity}
 			scale={visual.geometry.scale}
 			{position}
 			{rotation}
@@ -92,8 +95,8 @@
 			args={[visual.geometry.radius, visual.geometry.radius, visual.geometry.length]}
 		/>
 		<T.MeshBasicMaterial
-			{color}
-			opacity={opacity < 1.0 ? opacity : undefined}
+			color={baseColor}
+			opacity={opacity}
 			transparent={opacity < 1.0}
 		/>
 	</T.Mesh>
@@ -101,8 +104,8 @@
 	<T.Mesh castShadow receiveShadow scale={visual.geometry.size} {onclick}>
 		<T.BoxGeometry />
 		<T.MeshBasicMaterial
-			{color}
-			opacity={opacity < 1.0 ? opacity : undefined}
+			color={baseColor}
+			opacity={opacity}
 			transparent={opacity < 1.0}
 		/>
 	</T.Mesh>

src/lib/components/ButtonBar.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Badge } from '$lib/components/ui/badge';
+	import * as Popover from '$lib/components/ui/popover';
+	import { toast } from 'svelte-sonner';
+	import { cn } from '$lib/utils';
+	import { robotManager } from "$lib/robot/RobotManager.svelte";
+	import { robotUrdfConfigMap } from "$lib/configs/robotUrdfConfig";
+
+	interface Props {
+		controlsOpen?: boolean;
+		onToggleControls?: () => void;
+	}
+
+	let { 
+		controlsOpen = $bindable(false),
+		onToggleControls
+	}: Props = $props();
+
+	let isCreating = $state(false);
+	let selectedRobotType = $state("so-arm100"); // Default to SO-100
+	let showRobotSelector = $state(false);
+
+	// Get available robot types
+	const robotTypes = Object.keys(robotUrdfConfigMap);
+
+	// Function to add robot using the proper robot creation logic
+	async function addRobot() {
+		if (isCreating) return;
+		
+		console.log(`Creating ${selectedRobotType} robot...`);
+		isCreating = true;
+		
+		try {
+			const urdfConfig = robotUrdfConfigMap[selectedRobotType];
+			
+			if (!urdfConfig) {
+				throw new Error(`Unknown robot type: ${selectedRobotType}`);
+			}
+			
+			const robotId = `robot-${Date.now()}`;
+			console.log('Creating robot with ID:', robotId, 'and config:', urdfConfig);
+			
+			const robot = await robotManager.createRobot(robotId, urdfConfig);
+			console.log('Robot created successfully:', robot);
+			
+			toast.success("Robot Added", {
+				description: `${selectedRobotType} robot ${robotId.slice(0, 12)}... created successfully.`
+			});
+			
+			showRobotSelector = false; // Close selector on success
+			
+		} catch (error) {
+			console.error('Robot creation failed:', error);
+			toast.error("Failed to Add Robot", {
+				description: `Could not create ${selectedRobotType} robot: ${error}`
+			});
+		} finally {
+			isCreating = false;
+		}
+	}
+
+	// Quick add SO-100 function
+	async function quickAddSO100() {
+		selectedRobotType = "so-arm100";
+		await addRobot();
+	}
+</script>
+
+<!-- Button Bar Container -->
+<div class="fixed top-4 left-4 z-50 flex gap-2">
+	<!-- Add Robot Button with Dropdown -->
+	<div class="flex">
+		<!-- Main Add Button (SO-100) -->
+		<Button 
+			variant="default" 
+			size="sm"
+			onclick={quickAddSO100}
+			disabled={isCreating}
+			class="shadow-lg bg-green-600 hover:bg-green-500 disabled:bg-gray-600 text-white border-green-500 transition-all duration-200 group rounded-r-none border-r-0"
+		>
+			<span class={cn(
+				"size-4 mr-2 transition-transform duration-200",
+				isCreating ? "icon-[mdi--loading] animate-spin" : "icon-[mdi--plus] group-hover:rotate-90"
+			)}></span>
+			{isCreating ? 'Creating...' : 'Add SO-100'}
+		</Button>
+
+		<!-- Dropdown Button -->
+		<Popover.Root bind:open={showRobotSelector}>
+			<Popover.Trigger>
+				{#snippet child({ props })}
+					<Button 
+						{...props}
+						variant="default"
+						size="sm"
+						disabled={isCreating}
+						class="shadow-lg bg-green-600 hover:bg-green-500 disabled:bg-gray-600 text-white border-green-500 transition-all duration-200 rounded-l-none border-l border-green-400 px-2"
+					>
+						<span class="icon-[mdi--chevron-down] size-4"></span>
+					</Button>
+				{/snippet}
+			</Popover.Trigger>
+			<Popover.Content class="w-64 p-3 bg-slate-800 border-slate-600">
+				<div class="space-y-3">
+					<h4 class="text-sm font-medium text-slate-100">Select Robot Type</h4>
+					<div class="space-y-2">
+						{#each robotTypes as robotType}
+							<Button
+								variant={selectedRobotType === robotType ? "default" : "ghost"}
+								size="sm"
+								onclick={async () => {
+									selectedRobotType = robotType;
+									await addRobot();
+								}}
+								disabled={isCreating}
+								class="w-full justify-start text-left"
+							>
+								<span class="icon-[mdi--robot] size-4 mr-2"></span>
+								{robotType}
+								{#if robotType === "so-arm100"}
+									<Badge variant="secondary" class="ml-auto text-xs">SO-100</Badge>
+								{/if}
+							</Button>
+						{/each}
+					</div>
+				</div>
+			</Popover.Content>
+		</Popover.Root>
+	</div>
+
+	<!-- Controls Button -->
+	<Button 
+		variant="outline" 
+		size="sm"
+		onclick={onToggleControls}
+		class={cn(
+			"shadow-lg transition-all duration-200 border-slate-600 backdrop-blur-sm group",
+			controlsOpen 
+				? "bg-blue-600/90 text-white hover:bg-blue-500 border-blue-500" 
+				: "bg-slate-800/90 text-slate-100 hover:bg-slate-700"
+		)}
+	>
+		<span class={cn(
+			"size-4 mr-2 transition-transform duration-200",
+			controlsOpen 
+				? "icon-[mdi--close] group-hover:rotate-90" 
+				: "icon-[mdi--gamepad-variant] group-hover:scale-110"
+		)}></span>
+		{controlsOpen ? 'Close' : 'Controls'}
+		
+		{#if !controlsOpen}
+			<Badge 
+				variant="secondary" 
+				class="ml-2 bg-blue-400/20 text-blue-300 border-blue-400/30 text-xs"
+			>
+				Robot
+			</Badge>
+		{/if}
+	</Button>
+</div> 

src/lib/components/ControlsSheet.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Sheet from '$lib/components/ui/sheet';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Separator } from '$lib/components/ui/separator';
+	import ControlPanel from '$lib/components/panel/ControlPanel.svelte';
+
+	interface Props {
+		isOpen?: boolean;
+	}
+
+	let { isOpen = $bindable(false) }: Props = $props();
+
+	function toggleSheet() {
+		isOpen = !isOpen;
+	}
+</script>
+
+<!-- Controls Sheet -->
+<Sheet.Root bind:open={isOpen}>
+	<Sheet.Content 
+		side="right" 
+		class="w-80 sm:w-96 p-0 bg-gradient-to-b from-slate-700 to-slate-800 text-white border-l border-slate-600"
+	>
+		<!-- Header -->
+		<Sheet.Header class="border-b border-slate-600 bg-slate-700/80 backdrop-blur-sm p-6">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					<span class="icon-[mdi--gamepad-variant] size-6 text-blue-400"></span>
+					<div>
+						<Sheet.Title class="text-xl font-semibold text-slate-100">
+							Robot Controls
+						</Sheet.Title>
+						<p class="text-sm text-slate-400 mt-1">
+							Control your robot
+						</p>
+					</div>
+				</div>
+				<Badge variant="secondary" class="bg-blue-400 text-slate-900 font-medium px-3">
+					Active
+				</Badge>
+			</div>
+		</Sheet.Header>
+
+		<!-- Content -->
+		<div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-slate-700 scrollbar-thumb-slate-500 px-4">
+			<div class="space-y-4">
+				<div class="flex items-center gap-2 text-sm text-slate-300">
+					<span class="icon-[mdi--information-outline] size-4"></span>
+					Control your robot's movements and actions
+				</div>
+				<Separator class="bg-slate-600" />
+				<ControlPanel />
+			</div>
+		</div>
+
+		<!-- Footer -->
+		<div class="border-t border-slate-600 bg-slate-800/50 p-4">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-2 text-xs text-slate-400">
+					<span class="icon-[mdi--gamepad-variant] size-4"></span>
+					<span>Robot Controls</span>
+				</div>
+				<Button 
+					variant="ghost" 
+					size="sm" 
+					onclick={toggleSheet}
+					class="text-slate-400 hover:text-slate-100 text-xs px-2 py-1 h-auto"
+				>
+					<span class="icon-[mdi--close] size-3 mr-1"></span>
+					Close
+				</Button>
+			</div>
+		</div>
+	</Sheet.Content>
+</Sheet.Root> 

src/lib/components/Overlay.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import ButtonBar from '$lib/components/ButtonBar.svelte';
+	import ControlsSheet from '$lib/components/ControlsSheet.svelte';
+	import SettingsSheet from '$lib/components/SettingsSheet.svelte';
+
+	interface Props {
+		// Optional props for controlling the state externally if needed
+		controlsOpen?: boolean;
+		settingsOpen?: boolean;
+	}
+
+	let { 
+		controlsOpen = $bindable(false),
+		settingsOpen = $bindable(false)
+	}: Props = $props();
+
+	function toggleControls() {
+		controlsOpen = !controlsOpen;
+	}
+
+	function toggleSettings() {
+		settingsOpen = !settingsOpen;
+	}
+</script>
+
+<!-- Button Bar with Add Robot and Controls (Top Left) -->
+<ButtonBar 
+	bind:controlsOpen
+	onToggleControls={toggleControls}
+/>
+
+<!-- Controls Sheet (Right Side) -->
+<ControlsSheet bind:isOpen={controlsOpen} />
+
+<!-- Settings Button and Sheet (Top Right, Left Side) -->
+<SettingsSheet bind:isOpen={settingsOpen} />

src/lib/components/PanelWrapper.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Separator } from '$lib/components/ui/separator';
+
+	interface Props {
+		title?: string;
+		subtitle?: string;
+		children: any;
+	}
+
+	let { title, subtitle, children }: Props = $props();
+</script>
+
+<Card.Root class="bg-slate-700/50 border-slate-600">
+	{#if title}
+		<Card.Header class="pb-3">
+			<Card.Title class="text-slate-100 flex items-center gap-2">
+				{title}
+			</Card.Title>
+			{#if subtitle}
+				<Card.Description class="text-slate-400 text-sm">
+					{subtitle}
+				</Card.Description>
+			{/if}
+		</Card.Header>
+		<Separator class="bg-slate-600" />
+	{/if}
+	
+	<Card.Content class="p-4 space-y-4">
+		{@render children()}
+	</Card.Content>
+</Card.Root> 

src/lib/components/RobotStatusDemo.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import StatusCard from '$lib/components/StatusCard.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Badge } from '$lib/components/ui/badge';
+	import { environment } from '$lib/runes/env.svelte';
+
+	// Sample usage of StatusCard component
+	const robotStats = $derived(() => {
+		const robotCount = Object.keys(environment.robots).length;
+		return {
+			robotCount,
+			status: (robotCount > 0 ? 'active' : 'inactive') as 'active' | 'inactive',
+			lastUpdate: new Date().toLocaleTimeString()
+		};
+	});
+</script>
+
+<div class="space-y-4">
+	<h3 class="text-lg font-semibold text-slate-100 mb-4">Robot Status Overview</h3>
+	
+	<div class="grid grid-cols-1 gap-3">
+		<StatusCard
+			title="Connected Robots"
+			status={robotStats().status}
+			value={robotStats().robotCount}
+			description="Active robot instances"
+			icon="icon-[mdi--robot]"
+		>
+			{#if robotStats().robotCount > 0}
+				<div class="flex flex-wrap gap-1">
+					{#each Object.entries(environment.robots) as [id, robot]}
+						<Badge variant="outline" class="text-xs text-slate-300 border-slate-500">
+							{id.slice(0, 8)}...
+						</Badge>
+					{/each}
+				</div>
+			{:else}
+				<p class="text-xs text-slate-500">No robots currently active</p>
+			{/if}
+		</StatusCard>
+
+		<StatusCard
+			title="System Status"
+			status="active"
+			description="All systems operational"
+			icon="icon-[mdi--check-circle]"
+		>
+			<div class="text-xs text-slate-400">
+				Last updated: {robotStats().lastUpdate}
+			</div>
+		</StatusCard>
+
+		<StatusCard
+			title="Control Mode"
+			status="active"
+			value="Manual"
+			description="Direct joint control enabled"
+			icon="icon-[mdi--gamepad-variant]"
+		>
+			<Button size="sm" variant="outline" class="w-full text-xs">
+				Switch to Autonomous
+			</Button>
+		</StatusCard>
+	</div>
+</div> 

src/lib/components/SettingsSheet.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Sheet from '$lib/components/ui/sheet';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Separator } from '$lib/components/ui/separator';
+	import SettingsPanel from '$lib/components/panel/SettingsPanel.svelte';
+	import { cn } from '$lib/utils';
+
+	interface Props {
+		isOpen?: boolean;
+	}
+
+	let { isOpen = $bindable(false) }: Props = $props();
+
+	function toggleSheet() {
+		isOpen = !isOpen;
+	}
+</script>
+
+<!-- Settings Trigger Button -->
+<div class="fixed top-4 right-4 z-50">
+	<Button 
+		variant="outline" 
+		size="sm"
+		onclick={toggleSheet}
+		class={cn(
+			"shadow-lg transition-all duration-200 border-slate-600 backdrop-blur-sm group",
+			isOpen 
+				? "bg-orange-600/90 text-white hover:bg-orange-500 border-orange-500" 
+				: "bg-slate-800/90 text-slate-100 hover:bg-slate-700"
+		)}
+	>
+		<span class={cn(
+			"size-4 mr-2 transition-transform duration-200",
+			isOpen 
+				? "icon-[mdi--close] group-hover:rotate-90" 
+				: "icon-[mdi--cog] group-hover:rotate-45"
+		)}></span>
+		{isOpen ? 'Close' : 'Settings'}
+		
+		{#if !isOpen}
+			<Badge 
+				variant="secondary" 
+				class="ml-2 bg-orange-400/20 text-orange-300 border-orange-400/30 text-xs"
+			>
+				Joints
+			</Badge>
+		{/if}
+	</Button>
+</div>
+
+<!-- Settings Sheet -->
+<Sheet.Root bind:open={isOpen}>
+	<Sheet.Content 
+		side="left" 
+		class="w-80 sm:w-96 p-0 bg-gradient-to-b from-slate-700 to-slate-800 text-white border-r border-slate-600"
+	>
+		<!-- Header -->
+		<Sheet.Header class="border-b border-slate-600 bg-slate-700/80 backdrop-blur-sm p-6">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					<span class="icon-[mdi--cog] size-6 text-orange-400"></span>
+					<div>
+						<Sheet.Title class="text-xl font-semibold text-slate-100">
+							Robot Settings
+						</Sheet.Title>
+						<p class="text-sm text-slate-400 mt-1">
+							Configure joints and robot parameters
+						</p>
+					</div>
+				</div>
+				<Badge variant="secondary" class="bg-orange-400 text-slate-900 font-medium px-3">
+					Config
+				</Badge>
+			</div>
+		</Sheet.Header>
+
+		<!-- Content -->
+		<div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-slate-700 scrollbar-thumb-slate-500 p-4">
+			<div class="space-y-4">
+				<div class="flex items-center gap-2 text-sm text-slate-300">
+					<span class="icon-[mdi--wrench] size-4"></span>
+					Configure joints and robot parameters
+				</div>
+				<Separator class="bg-slate-600" />
+				<SettingsPanel />
+			</div>
+		</div>
+
+		<!-- Footer -->
+		<div class="border-t border-slate-600 bg-slate-800/50 p-4">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-2 text-xs text-slate-400">
+					<span class="icon-[mdi--cog] size-4"></span>
+					<span>Robot Settings</span>
+				</div>
+				<Button 
+					variant="ghost" 
+					size="sm" 
+					onclick={toggleSheet}
+					class="text-slate-400 hover:text-slate-100 text-xs px-2 py-1 h-auto"
+				>
+					<span class="icon-[mdi--close] size-3 mr-1"></span>
+					Close
+				</Button>
+			</div>
+		</div>
+	</Sheet.Content>
+</Sheet.Root> 

src/lib/components/StatusCard.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Badge } from '$lib/components/ui/badge';
+	import { cn } from '$lib/utils';
+
+	interface Props {
+		title: string;
+		status?: 'active' | 'inactive' | 'warning' | 'error';
+		value?: string | number;
+		description?: string;
+		icon?: string;
+		class?: string;
+		children?: any;
+	}
+
+	let { 
+		title, 
+		status = 'inactive', 
+		value, 
+		description, 
+		icon,
+		class: className = '',
+		children 
+	}: Props = $props();
+
+	const statusConfig = {
+		active: { bg: 'bg-green-400/10', text: 'text-green-400', border: 'border-green-400/30' },
+		inactive: { bg: 'bg-slate-400/10', text: 'text-slate-400', border: 'border-slate-400/30' },
+		warning: { bg: 'bg-yellow-400/10', text: 'text-yellow-400', border: 'border-yellow-400/30' },
+		error: { bg: 'bg-red-400/10', text: 'text-red-400', border: 'border-red-400/30' }
+	};
+
+	const currentStatus = statusConfig[status];
+</script>
+
+<Card.Root class={cn("bg-slate-700/40 border-slate-600/50 hover:border-slate-500/70 transition-colors", className)}>
+	<Card.Content class="p-4">
+		<div class="flex items-start justify-between">
+			<div class="flex items-start gap-3">
+				{#if icon}
+					<div class={cn("p-2 rounded-md", currentStatus.bg)}>
+						<span class={cn(icon, "size-4", currentStatus.text)}></span>
+					</div>
+				{/if}
+				
+				<div class="space-y-1">
+					<h4 class="text-sm font-medium text-slate-200 leading-none">
+						{title}
+					</h4>
+					{#if description}
+						<p class="text-xs text-slate-400">
+							{description}
+						</p>
+					{/if}
+				</div>
+			</div>
+			
+			<div class="flex flex-col items-end gap-2">
+				<Badge 
+					variant="outline" 
+					class={cn("text-xs capitalize", currentStatus.bg, currentStatus.text, currentStatus.border)}
+				>
+					{status}
+				</Badge>
+				{#if value !== undefined}
+					<span class="text-lg font-mono font-semibold text-slate-100">
+						{value}
+					</span>
+				{/if}
+			</div>
+		</div>
+		
+		{#if children}
+			<div class="mt-3 pt-3 border-t border-slate-600/50">
+				{@render children()}
+			</div>
+		{/if}
+	</Card.Content>
+</Card.Root> 

src/lib/components/panel/ControlPanel.svelte

@@ -9,6 +9,7 @@
 
 <div class="space-y-6">
     <!-- Robot Control Section -->
+    <!-- Note: Robot creation is now handled by the main ButtonBar -->
     <RobotControlPanel />
 
 </div>

src/lib/components/panel/RobotControlPanel.old.svelte

@@ -0,0 +1,659 @@
+<script lang="ts">
+    import { robotManager } from "$lib/robot/RobotManager.svelte";
+    import { robotUrdfConfigMap } from "$lib/configs/robotUrdfConfig";
+    import type { Robot } from "$lib/robot/Robot.svelte";
+    import { getApiBaseUrl, getWebSocketBaseUrl, getEnvironmentInfo } from "$lib/utils/config";
+
+    interface Props {}
+    
+    let {}: Props = $props();
+    
+    // Local state
+    let selectedRobotType = $state("so-arm100");
+    let isCreating = $state(false);
+    let error = $state<string | undefined>(undefined);
+
+    // Robot selection modal state
+    let showRobotSelectionModal = $state(false);
+    let availableServerRobots = $state<{ id: string; name: string; robot_type: string }[]>([]);
+    let selectedServerRobotId = $state<string>("");
+    let pendingLocalRobot: Robot | null = $state(null);
+
+    // Reactive values
+    const robots = $derived(robotManager.robots);
+    const robotsWithSlaves = $derived(robotManager.robotsWithSlaves.length);
+    const robotsWithMaster = $derived(robotManager.robotsWithMaster.length);
+
+    // Get URLs from configuration
+    const apiBaseUrl = getApiBaseUrl();
+    const wsBaseUrl = getWebSocketBaseUrl();
+    
+    // Log environment info for debugging
+    console.log('Environment info:', getEnvironmentInfo());
+
+    async function createRobot() {
+        if (isCreating) return;
+        
+        console.log('Creating robot...');
+        isCreating = true;
+        error = undefined;
+        
+        try {
+            const urdfConfig = robotUrdfConfigMap[selectedRobotType];
+            if (!urdfConfig) {
+                throw new Error(`Unknown robot type: ${selectedRobotType}`);
+            }
+            
+            const robotId = `robot-${Date.now()}`;
+            console.log('Creating robot with ID:', robotId, 'and config:', urdfConfig);
+            const robot = await robotManager.createRobot(robotId, urdfConfig);
+            console.log('Robot created successfully:', robot);
+            
+        } catch (err) {
+            error = `Failed to create robot: ${err}`;
+            console.error('Robot creation failed:', err);
+        } finally {
+            isCreating = false;
+        }
+    }
+
+    // Master connection functions
+    async function connectDemoSequences(robot: Robot) {
+        try {
+            await robotManager.connectDemoSequences(robot.id);
+        } catch (err) {
+            error = `Failed to connect demo sequences: ${err}`;
+            console.error(err);
+        }
+    }
+
+    async function connectRemoteServerMaster(robot: Robot) {
+        try {
+            const config: import('$lib/types/robotDriver').MasterDriverConfig = {
+                type: "remote-server",
+                url: wsBaseUrl,
+                apiKey: undefined,
+                pollInterval: 100
+            };
+            await robotManager.connectMaster(robot.id, config);
+        } catch (err) {
+            error = `Failed to connect remote server: ${err}`;
+            console.error(err);
+        }
+    }
+
+    async function disconnectMaster(robot: Robot) {
+        try {
+            await robotManager.disconnectMaster(robot.id);
+        } catch (err) {
+            error = `Failed to disconnect master: ${err}`;
+            console.error(err);
+        }
+    }
+
+    // Slave connection functions
+    async function connectMockSlave(robot: Robot) {
+        try {
+            await robotManager.connectMockSlave(robot.id, 50);
+        } catch (err) {
+            error = `Failed to connect mock slave: ${err}`;
+            console.error(err);
+        }
+    }
+
+    async function connectUSBSlave(robot: Robot) {
+        try {
+            await robotManager.connectUSBSlave(robot.id);
+        } catch (err) {
+            error = `Failed to connect USB slave: ${err}`;
+            console.error(err);
+        }
+    }
+
+    async function connectRemoteServerSlave(robot: Robot) {
+        try {
+            // First, fetch available robots from the server
+            const response = await fetch(`${apiBaseUrl}/api/robots`);
+            
+            if (!response.ok) {
+                throw new Error(`Server responded with ${response.status}: ${response.statusText}`);
+            }
+            
+            const robots = await response.json();
+            
+            if (robots.length === 0) {
+                error = "No robots available on the server. Create a robot on the server first.";
+                return;
+            }
+            
+            // Show modal for robot selection
+            availableServerRobots = robots;
+            pendingLocalRobot = robot;
+            selectedServerRobotId = robots[0]?.id || "";
+            showRobotSelectionModal = true;
+            
+        } catch (err) {
+            error = `Failed to fetch server robots: ${err}`;
+            console.error(err);
+        }
+    }
+
+    async function confirmRobotSelection() {
+        if (!pendingLocalRobot || !selectedServerRobotId) return;
+        
+        try {
+            await robotManager.connectRemoteServerSlave(
+                pendingLocalRobot.id, 
+                wsBaseUrl, 
+                undefined, 
+                selectedServerRobotId
+            );
+            
+            // Close modal
+            showRobotSelectionModal = false;
+            pendingLocalRobot = null;
+            
+        } catch (err) {
+            error = `Failed to connect remote server slave: ${err}`;
+            console.error(err);
+        }
+    }
+
+    function cancelRobotSelection() {
+        showRobotSelectionModal = false;
+        pendingLocalRobot = null;
+        selectedServerRobotId = "";
+    }
+
+    async function disconnectSlave(robot: Robot, slaveId: string) {
+        try {
+            await robotManager.disconnectSlave(robot.id, slaveId);
+        } catch (err) {
+            error = `Failed to disconnect slave: ${err}`;
+            console.error(err);
+        }
+    }
+
+    // Robot management
+    async function calibrateRobot(robot: Robot) {
+        try {
+            await robot.calibrateRobot();
+        } catch (err) {
+            error = `Failed to calibrate: ${err}`;
+            console.error(err);
+        }
+    }
+
+    async function moveToRest(robot: Robot) {
+        try {
+            await robot.moveToRestPosition();
+        } catch (err) {
+            error = `Failed to move to rest: ${err}`;
+            console.error(err);
+        }
+    }
+
+    function clearCalibration(robot: Robot) {
+        robot.clearCalibration();
+    }
+
+    async function removeRobot(robot: Robot) {
+        try {
+            await robotManager.removeRobot(robot.id);
+        } catch (err) {
+            error = `Failed to remove robot: ${err}`;
+            console.error(err);
+        }
+    }
+
+    function clearError() {
+        error = undefined;
+    }
+
+    // Helper functions
+    function getConnectionStatusText(robot: Robot): string {
+        const hasActiveMaster = robot.controlState.hasActiveMaster;
+        const connectedSlaves = robot.connectedSlaves.length;
+        const totalSlaves = robot.slaves.length;
+        
+        if (hasActiveMaster && connectedSlaves > 0) {
+            return `Master + ${connectedSlaves}/${totalSlaves} Slaves`;
+        } else if (hasActiveMaster) {
+            return `Master Only`;
+        } else if (connectedSlaves > 0) {
+            return `${connectedSlaves}/${totalSlaves} Slaves`;
+        } else {
+            return "Manual Control";
+        }
+    }
+
+    function getConnectionStatusColor(robot: Robot): string {
+        const hasActiveMaster = robot.controlState.hasActiveMaster;
+        const connectedSlaves = robot.connectedSlaves.length;
+        
+        if (hasActiveMaster && connectedSlaves > 0) {
+            return "green";  // Full master-slave setup
+        } else if (hasActiveMaster || connectedSlaves > 0) {
+            return "yellow"; // Partial connection
+        } else {
+            return "red";    // No connections
+        }
+    }
+
+    async function connectUSBMaster(robot: Robot) {
+        try {
+            await robotManager.connectUSBMaster(robot.id, {
+                pollInterval: 200,
+                smoothing: true
+            });
+        } catch (err) {
+            error = `Failed to connect USB master: ${err}`;
+            console.error(err);
+        }
+    }
+</script>
+
+<div class="space-y-6 p-4">
+    <div class="flex items-center justify-between">
+        <h2 class="text-xl font-bold text-slate-100">Robot Control - Master/Slave Architecture</h2>
+        <div class="text-sm text-slate-400">
+            {robots.length} robots, {robotsWithMaster} with masters, {robotsWithSlaves} with slaves
+        </div>
+    </div>
+
+    <!-- Error Display -->
+    {#if error}
+        <div class="bg-red-500/20 border border-red-500 rounded-lg p-3 flex items-center justify-between">
+            <span class="text-red-200 text-sm">{error}</span>
+            <button 
+                onclick={clearError}
+                class="text-red-200 hover:text-white"
+            >×</button>
+        </div>
+    {/if}
+
+    <!-- Create Robot Section (Minimized - main creation now in ButtonBar) -->
+    <div class="bg-slate-800 rounded-lg p-3 space-y-3">
+        <div class="flex items-center justify-between">
+            <h3 class="text-md font-semibold text-slate-100">Advanced Robot Creation</h3>
+            <div class="text-xs text-slate-400">Use ButtonBar for quick SO-100 creation</div>
+        </div>
+        
+        <div class="flex gap-3">
+            <select 
+                bind:value={selectedRobotType}
+                class="flex-1 px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-slate-100 text-sm"
+            >
+                {#each Object.keys(robotUrdfConfigMap) as robotType}
+                    <option value={robotType}>{robotType}</option>
+                {/each}
+            </select>
+            
+            <button 
+                onclick={createRobot}
+                disabled={isCreating}
+                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded-md transition-colors text-sm"
+            >
+                {isCreating ? "Creating..." : "Create"}
+            </button>
+        </div>
+    </div>
+
+    <!-- Robots List -->
+    <div class="space-y-3">
+        {#each robots as robot (robot.id)}
+            <div class="bg-slate-800 rounded-lg p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <div>
+                        <h4 class="font-semibold text-slate-100">{robot.id}</h4>
+                        <div class="text-sm text-slate-400">
+                            Status: 
+                            <span class="text-{getConnectionStatusColor(robot)}-400">
+                                {getConnectionStatusText(robot)}
+                            </span>
+                            {#if robot.controlState.lastCommandSource !== "none"}
+                                <span class="text-blue-400 ml-2">• Last: {robot.controlState.lastCommandSource}</span>
+                            {/if}
+                            {#if robot.isCalibrated}
+                                <span class="text-green-400 ml-2">• Calibrated</span>
+                            {/if}
+                        </div>
+                    </div>
+                    
+                    <button 
+                        onclick={() => removeRobot(robot)}
+                        class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white text-sm rounded transition-colors"
+                    >
+                        Remove
+                    </button>
+                </div>
+
+                <!-- Master Controls -->
+                <div class="mb-4 p-3 bg-orange-500/10 border border-orange-500/30 rounded-lg">
+                    <div class="text-sm text-orange-200 mb-2">
+                        <strong>Masters (Control Sources)</strong>
+                        {#if robot.controlState.hasActiveMaster}
+                            - <span class="text-green-400">Connected: {robot.controlState.masterName}</span>
+                        {:else}
+                            - <span class="text-slate-400">None Connected</span>
+                        {/if}
+                    </div>
+                    
+                    <div class="flex flex-wrap gap-2">
+                        <button
+                            class="px-3 py-1.5 bg-orange-500 text-white rounded text-sm hover:bg-orange-600 transition-colors disabled:bg-slate-600 disabled:cursor-not-allowed"
+                            onclick={() => connectDemoSequences(robot)}
+                            disabled={robot.controlState.hasActiveMaster}
+                        >
+                            Demo Sequences
+                        </button>
+                        
+                        <button
+                            class="px-3 py-1.5 bg-purple-500 text-white rounded text-sm hover:bg-purple-600 transition-colors disabled:bg-slate-600 disabled:cursor-not-allowed"
+                            onclick={() => connectRemoteServerMaster(robot)}
+                            disabled={robot.controlState.hasActiveMaster}
+                        >
+                            Connect Remote Server
+                        </button>
+
+                        <button
+                            class="px-3 py-1.5 bg-blue-500 text-white rounded text-sm hover:bg-blue-600 transition-colors disabled:bg-slate-600 disabled:cursor-not-allowed"
+                            onclick={() => connectUSBMaster(robot)}
+                            disabled={robot.controlState.hasActiveMaster}
+                        >
+                            Connect USB Master
+                        </button>
+                        
+                        {#if robot.controlState.hasActiveMaster}
+                            <button
+                                class="px-3 py-1.5 bg-red-500 text-white rounded text-sm hover:bg-red-600 transition-colors"
+                                onclick={() => disconnectMaster(robot)}
+                            >
+                                Disconnect Master
+                            </button>
+                        {/if}
+                    </div>
+                </div>
+
+                <!-- Slave Controls -->
+                <div class="mb-4 p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
+                    <div class="text-sm text-blue-200 mb-2">
+                        <strong>Slaves (Execution Targets)</strong>
+                        - <span class="text-green-400">{robot.connectedSlaves.length} Connected</span>
+                        / <span class="text-slate-400">{robot.slaves.length} Total</span>
+                    </div>
+                    
+                    <div class="flex gap-2 mb-2">
+                        <button 
+                            onclick={() => connectMockSlave(robot)}
+                            class="px-3 py-1 bg-yellow-600 hover:bg-yellow-700 text-white text-sm rounded transition-colors"
+                        >
+                            Add Mock Slave
+                        </button>
+                        <button 
+                            onclick={() => connectUSBSlave(robot)}
+                            class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded transition-colors"
+                        >
+                            Add USB Slave
+                        </button>
+                        <button 
+                            onclick={() => connectRemoteServerSlave(robot)}
+                            class="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded transition-colors"
+                        >
+                            Add Remote Server Slave
+                        </button>
+                    </div>
+                    
+                    {#if robot.slaves.length > 0}
+                        <div class="text-xs text-blue-300">
+                            <strong>Connected Slaves:</strong>
+                            {#each robot.slaves as slave}
+                                <div class="flex items-center justify-between mt-1">
+                                    <span>{slave.name} ({slave.id})</span>
+                                    <button 
+                                        onclick={() => disconnectSlave(robot, slave.id)}
+                                        class="px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-xs rounded"
+                                    >
+                                        Remove
+                                    </button>
+                                </div>
+                            {/each}
+                        </div>
+                    {/if}
+                </div>
+
+                <!-- Calibration Section (for USB slaves) -->
+                {#if robot.connectedSlaves.some(slave => slave.name.includes("USB"))}
+                    <div class="mb-3 p-3 bg-orange-500/10 border border-orange-500/30 rounded-lg">
+                        <div class="text-sm text-orange-200 mb-2">
+                            <strong>USB Robot Calibration</strong>
+                        </div>
+                        {#if !robot.isCalibrated}
+                            <div class="text-xs text-orange-300 mb-2">
+                                1. Manually position your robot to match the digital twin's rest pose<br>
+                                2. Click "Calibrate" when positioned correctly
+                            </div>
+                            <div class="flex gap-2">
+                                <button 
+                                    onclick={() => moveToRest(robot)}
+                                    class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded transition-colors"
+                                >
+                                    Show Rest Pose
+                                </button>
+                                <button 
+                                    onclick={() => calibrateRobot(robot)}
+                                    class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded transition-colors"
+                                >
+                                    Calibrate
+                                </button>
+                            </div>
+                        {:else}
+                            <div class="text-xs text-green-300 mb-2">
+                                ✓ Robot calibrated at {robot.calibrationState.calibrationTime?.toLocaleTimeString()}
+                            </div>
+                            <button 
+                                onclick={() => clearCalibration(robot)}
+                                class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-sm rounded transition-colors"
+                            >
+                                Clear Calibration
+                            </button>
+                        {/if}
+                    </div>
+                {/if}
+
+                <!-- Manual Joint Controls (only when no master) -->
+                {#if robot.manualControlEnabled}
+                    <div class="space-y-3">
+                        <h5 class="text-sm font-medium text-slate-300">Manual Control ({robot.activeJoints.length} active joints)</h5>
+                        {#each robot.activeJoints as joint}
+                            <div class="joint-control">
+                                <div class="joint-header">
+                                    <span class="joint-name">{joint.name}</span>
+                                    <div class="joint-values">
+                                        <span class="virtual-value">{joint.virtualValue.toFixed(0)}°</span>
+                                        {#if joint.realValue !== undefined}
+                                            <span class="real-value" title="Real robot position">
+                                                Real: {joint.realValue.toFixed(0)}°
+                                            </span>
+                                        {:else}
+                                            <span class="real-value disconnected">N/A</span>
+                                        {/if}
+                                    </div>
+                                </div>
+                                <input 
+                                    type="range"
+                                    min="-180"
+                                    max="180"
+                                    step="1"
+                                    value={joint.virtualValue}
+                                    oninput={(e) => {
+                                        const target = e.target as HTMLInputElement;
+                                        robot.updateJointValue(joint.name, parseFloat(target.value));
+                                    }}
+                                    class="joint-slider"
+                                />
+                            </div>
+                        {/each}
+                        
+                        {#if robot.activeJoints.length === 0}
+                            <div class="text-sm text-slate-500 italic">No active joints</div>
+                        {/if}
+                    </div>
+                {:else}
+                    <div class="p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
+                        <div class="text-sm text-purple-200">
+                            🎮 <strong>Master Control Active</strong><br>
+                            <span class="text-xs text-purple-300">
+                                Robot is controlled by: {robot.controlState.masterName}<br>
+                                Manual controls are disabled. Disconnect master to regain manual control.
+                            </span>
+                        </div>
+                    </div>
+                {/if}
+            </div>
+        {/each}
+        
+        {#if robots.length === 0}
+            <div class="text-center text-slate-500 py-8">
+                No robots created yet. Create one above to get started with the master-slave architecture.
+            </div>
+        {/if}
+    </div>
+</div>
+
+<!-- Robot Selection Modal -->
+{#if showRobotSelectionModal}
+    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-slate-800 rounded-lg p-6 w-96 max-w-full mx-4">
+            <h3 class="text-lg font-semibold text-slate-100 mb-4">Select Server Robot</h3>
+            
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-slate-300 mb-2">
+                    Available robots on server:
+                </label>
+                <select 
+                    bind:value={selectedServerRobotId}
+                    class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-slate-100"
+                >
+                    {#each availableServerRobots as serverRobot}
+                        <option value={serverRobot.id}>
+                            {serverRobot.name} ({serverRobot.id}) - {serverRobot.robot_type}
+                        </option>
+                    {/each}
+                </select>
+            </div>
+            
+            <div class="text-sm text-slate-400 mb-4">
+                This will connect your local robot "{pendingLocalRobot?.id}" as a slave to 
+                receive commands from the selected server robot.
+            </div>
+            
+            <div class="flex gap-3 justify-end">
+                <button 
+                    onclick={cancelRobotSelection}
+                    class="px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white rounded-md transition-colors"
+                >
+                    Cancel
+                </button>
+                <button 
+                    onclick={confirmRobotSelection}
+                    class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-colors"
+                    disabled={!selectedServerRobotId}
+                >
+                    Connect Slave
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<style>
+    .joint-control {
+        background: rgba(71, 85, 105, 0.3);
+        border-radius: 8px;
+        padding: 12px;
+        border: 1px solid rgba(71, 85, 105, 0.5);
+    }
+
+    .joint-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+    }
+
+    .joint-name {
+        font-weight: 500;
+        color: #e2e8f0;
+        font-size: 14px;
+    }
+
+    .joint-values {
+        display: flex;
+        gap: 12px;
+        font-size: 12px;
+    }
+
+    .virtual-value {
+        color: #60a5fa;
+        font-weight: 500;
+    }
+
+    .real-value {
+        color: #34d399;
+        font-weight: 500;
+    }
+
+    .real-value.disconnected {
+        color: #f87171;
+    }
+
+    .joint-slider {
+        width: 100%;
+        height: 6px;
+        background: #374151;
+        border-radius: 3px;
+        outline: none;
+        cursor: pointer;
+        appearance: none;
+    }
+
+    .joint-slider::-webkit-slider-thumb {
+        appearance: none;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #3b82f6;
+        cursor: pointer;
+        border: 2px solid #1e293b;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        transition: all 0.15s ease;
+    }
+
+    .joint-slider::-webkit-slider-thumb:hover {
+        background: #2563eb;
+        transform: scale(1.1);
+    }
+
+    .joint-slider::-moz-range-thumb {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #3b82f6;
+        cursor: pointer;
+        border: 2px solid #1e293b;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        transition: all 0.15s ease;
+    }
+
+    .joint-slider::-moz-range-track {
+        height: 6px;
+        background: #374151;
+        border-radius: 3px;
+        border: none;
+    }
+
+    .joint-slider:focus {
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+    }
+</style> 

src/lib/components/panel/RobotControlPanel.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
     import { robotManager } from "$lib/robot/RobotManager.svelte";
-    import { robotUrdfConfigMap } from "$lib/configs/robotUrdfConfig";
     import type { Robot } from "$lib/robot/Robot.svelte";
     import { getApiBaseUrl, getWebSocketBaseUrl, getEnvironmentInfo } from "$lib/utils/config";
+    import * as Card from '$lib/components/ui/card';
+    import { Button } from '$lib/components/ui/button';
+    import { Badge } from '$lib/components/ui/badge';
+    import { Separator } from '$lib/components/ui/separator';
+    import * as Alert from '$lib/components/ui/alert';
+    import { Progress } from '$lib/components/ui/progress';
+    import { cn } from '$lib/utils';
 
     interface Props {}
     
     let {}: Props = $props();
     
     // Local state
-    let selectedRobotType = $state("so-arm100");
-    let isCreating = $state(false);
     let error = $state<string | undefined>(undefined);
 
     // Robot selection modal state
@@ -31,36 +35,11 @@
     // Log environment info for debugging
     console.log('Environment info:', getEnvironmentInfo());
 
-    async function createRobot() {
-        if (isCreating) return;
-        
-        console.log('Creating robot...');
-        isCreating = true;
-        error = undefined;
-        
-        try {
-            const urdfConfig = robotUrdfConfigMap[selectedRobotType];
-            if (!urdfConfig) {
-                throw new Error(`Unknown robot type: ${selectedRobotType}`);
-            }
-            
-            const robotId = `robot-${Date.now()}`;
-            console.log('Creating robot with ID:', robotId, 'and config:', urdfConfig);
-            const robot = await robotManager.createRobot(robotId, urdfConfig);
-            console.log('Robot created successfully:', robot);
-            
-        } catch (err) {
-            error = `Failed to create robot: ${err}`;
-            console.error('Robot creation failed:', err);
-        } finally {
-            isCreating = false;
-        }
-    }
-
     // Master connection functions
     async function connectDemoSequences(robot: Robot) {
         try {
             await robotManager.connectDemoSequences(robot.id);
+            clearError();
         } catch (err) {
             error = `Failed to connect demo sequences: ${err}`;
             console.error(err);
@@ -76,15 +55,30 @@
                 pollInterval: 100
             };
             await robotManager.connectMaster(robot.id, config);
+            clearError();
         } catch (err) {
             error = `Failed to connect remote server: ${err}`;
             console.error(err);
         }
     }
 
+    async function connectUSBMaster(robot: Robot) {
+        try {
+            await robotManager.connectUSBMaster(robot.id, {
+                pollInterval: 200,
+                smoothing: true
+            });
+            clearError();
+        } catch (err) {
+            error = `Failed to connect USB master: ${err}`;
+            console.error(err);
+        }
+    }
+
     async function disconnectMaster(robot: Robot) {
         try {
             await robotManager.disconnectMaster(robot.id);
+            clearError();
         } catch (err) {
             error = `Failed to disconnect master: ${err}`;
             console.error(err);
@@ -95,6 +89,7 @@
     async function connectMockSlave(robot: Robot) {
         try {
             await robotManager.connectMockSlave(robot.id, 50);
+            clearError();
         } catch (err) {
             error = `Failed to connect mock slave: ${err}`;
             console.error(err);
@@ -104,6 +99,7 @@
     async function connectUSBSlave(robot: Robot) {
         try {
             await robotManager.connectUSBSlave(robot.id);
+            clearError();
         } catch (err) {
             error = `Failed to connect USB slave: ${err}`;
             console.error(err);
@@ -152,6 +148,7 @@
             // Close modal
             showRobotSelectionModal = false;
             pendingLocalRobot = null;
+            clearError();
             
         } catch (err) {
             error = `Failed to connect remote server slave: ${err}`;
@@ -168,6 +165,7 @@
     async function disconnectSlave(robot: Robot, slaveId: string) {
         try {
             await robotManager.disconnectSlave(robot.id, slaveId);
+            clearError();
         } catch (err) {
             error = `Failed to disconnect slave: ${err}`;
             console.error(err);
@@ -178,6 +176,7 @@
     async function calibrateRobot(robot: Robot) {
         try {
             await robot.calibrateRobot();
+            clearError();
         } catch (err) {
             error = `Failed to calibrate: ${err}`;
             console.error(err);
@@ -187,6 +186,7 @@
     async function moveToRest(robot: Robot) {
         try {
             await robot.moveToRestPosition();
+            clearError();
         } catch (err) {
             error = `Failed to move to rest: ${err}`;
             console.error(err);
@@ -200,6 +200,7 @@
     async function removeRobot(robot: Robot) {
         try {
             await robotManager.removeRobot(robot.id);
+            clearError();
         } catch (err) {
             error = `Failed to remove robot: ${err}`;
             console.error(err);
@@ -227,395 +228,459 @@
         }
     }
 
-    function getConnectionStatusColor(robot: Robot): string {
+    function getConnectionStatusVariant(robot: Robot): "default" | "secondary" | "destructive" | "outline" {
         const hasActiveMaster = robot.controlState.hasActiveMaster;
         const connectedSlaves = robot.connectedSlaves.length;
         
         if (hasActiveMaster && connectedSlaves > 0) {
-            return "green";  // Full master-slave setup
+            return "default";  // Full master-slave setup (green)
         } else if (hasActiveMaster || connectedSlaves > 0) {
-            return "yellow"; // Partial connection
+            return "secondary"; // Partial connection (blue)
         } else {
-            return "red";    // No connections
-        }
-    }
-
-    async function connectUSBMaster(robot: Robot) {
-        try {
-            await robotManager.connectUSBMaster(robot.id, {
-                pollInterval: 200,
-                smoothing: true
-            });
-        } catch (err) {
-            error = `Failed to connect USB master: ${err}`;
-            console.error(err);
+            return "outline";    // No connections (gray)
         }
     }
 </script>
 
-<div class="space-y-6 p-4">
-    <div class="flex items-center justify-between">
-        <h2 class="text-xl font-bold text-slate-100">Robot Control - Master/Slave Architecture</h2>
-        <div class="text-sm text-slate-400">
-            {robots.length} robots, {robotsWithMaster} with masters, {robotsWithSlaves} with slaves
+<div class="space-y-6">
+    <!-- Header -->
+    <div class="flex flex-col gap-2 items-center justify-between">
+        <div>
+            <h2 class="text-2xl font-bold text-slate-100">Robot Control Center</h2>
+            <p class="text-sm text-slate-400 mt-1">Master/Slave Architecture</p>
+        </div>
+        <div class="flex items-center gap-3">
+            <Badge variant="outline" class="text-slate-300">
+                <span class="icon-[mdi--robot] size-4 mr-1"></span>
+                {robots.length} Robots
+            </Badge>
+            <Badge variant="secondary" class="text-slate-300">
+                <span class="icon-[mdi--connection] size-4 mr-1"></span>
+                {robotsWithMaster} Masters
+            </Badge>
+            <Badge variant="secondary" class="text-slate-300">
+                <span class="icon-[mdi--devices] size-4 mr-1"></span>
+                {robotsWithSlaves} Slaves
+            </Badge>
         </div>
     </div>
 
     <!-- Error Display -->
     {#if error}
-        <div class="bg-red-500/20 border border-red-500 rounded-lg p-3 flex items-center justify-between">
-            <span class="text-red-200 text-sm">{error}</span>
-            <button 
-                onclick={clearError}
-                class="text-red-200 hover:text-white"
-            >×</button>
-        </div>
+        <Alert.Root variant="destructive">
+            <span class="icon-[mdi--alert-circle] size-4"></span>
+            <Alert.Title>Error</Alert.Title>
+            <Alert.Description class="flex items-center justify-between">
+                <span>{error}</span>
+                <Button variant="ghost" size="sm" onclick={clearError} class="text-red-200 hover:text-white h-auto p-1">
+                    <span class="icon-[mdi--close] size-4"></span>
+                </Button>
+            </Alert.Description>
+        </Alert.Root>
     {/if}
 
-    <!-- Create Robot Section -->
-    <div class="bg-slate-800 rounded-lg p-4 space-y-4">
-        <h3 class="text-lg font-semibold text-slate-100">Create Robot</h3>
-        
-        <div class="flex gap-3">
-            <select 
-                bind:value={selectedRobotType}
-                class="flex-1 px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-slate-100"
-            >
-                {#each Object.keys(robotUrdfConfigMap) as robotType}
-                    <option value={robotType}>{robotType}</option>
-                {/each}
-            </select>
-            
-            <button 
-                onclick={createRobot}
-                disabled={isCreating}
-                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded-md transition-colors"
-            >
-                {isCreating ? "Creating..." : "Create Robot"}
-            </button>
-        </div>
-    </div>
-
     <!-- Robots List -->
-    <div class="space-y-3">
-        {#each robots as robot (robot.id)}
-            <div class="bg-slate-800 rounded-lg p-4">
-                <div class="flex items-center justify-between mb-3">
-                    <div>
-                        <h4 class="font-semibold text-slate-100">{robot.id}</h4>
-                        <div class="text-sm text-slate-400">
-                            Status: 
-                            <span class="text-{getConnectionStatusColor(robot)}-400">
-                                {getConnectionStatusText(robot)}
-                            </span>
-                            {#if robot.controlState.lastCommandSource !== "none"}
-                                <span class="text-blue-400 ml-2">• Last: {robot.controlState.lastCommandSource}</span>
-                            {/if}
-                            {#if robot.isCalibrated}
-                                <span class="text-green-400 ml-2">• Calibrated</span>
-                            {/if}
-                        </div>
-                    </div>
-                    
-                    <button 
-                        onclick={() => removeRobot(robot)}
-                        class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white text-sm rounded transition-colors"
-                    >
-                        Remove
-                    </button>
+    {#if robots.length === 0}
+        <Card.Root class="bg-slate-800/50 border-slate-600">
+            <Card.Content class="p-8 text-center">
+                <div class="flex flex-col items-center gap-3">
+                    <span class="icon-[mdi--robot-confused] size-12 text-slate-500"></span>
+                    <h3 class="text-lg font-medium text-slate-300">No Robots Available</h3>
+                    <p class="text-sm text-slate-500 max-w-md">
+                        Create a robot using the "Add Robot" button in the top-left to get started with the master-slave architecture.
+                    </p>
                 </div>
-
-                <!-- Master Controls -->
-                <div class="mb-4 p-3 bg-orange-500/10 border border-orange-500/30 rounded-lg">
-                    <div class="text-sm text-orange-200 mb-2">
-                        <strong>Masters (Control Sources)</strong>
-                        {#if robot.controlState.hasActiveMaster}
-                            - <span class="text-green-400">Connected: {robot.controlState.masterName}</span>
-                        {:else}
-                            - <span class="text-slate-400">None Connected</span>
-                        {/if}
-                    </div>
-                    
-                    <div class="flex flex-wrap gap-2">
-                        <button
-                            class="px-3 py-1.5 bg-orange-500 text-white rounded text-sm hover:bg-orange-600 transition-colors disabled:bg-slate-600 disabled:cursor-not-allowed"
-                            onclick={() => connectDemoSequences(robot)}
-                            disabled={robot.controlState.hasActiveMaster}
-                        >
-                            Demo Sequences
-                        </button>
-                        
-                        <button
-                            class="px-3 py-1.5 bg-purple-500 text-white rounded text-sm hover:bg-purple-600 transition-colors disabled:bg-slate-600 disabled:cursor-not-allowed"
-                            onclick={() => connectRemoteServerMaster(robot)}
-                            disabled={robot.controlState.hasActiveMaster}
-                        >
-                            Connect Remote Server
-                        </button>
-
-                        <button
-                            class="px-3 py-1.5 bg-blue-500 text-white rounded text-sm hover:bg-blue-600 transition-colors disabled:bg-slate-600 disabled:cursor-not-allowed"
-                            onclick={() => connectUSBMaster(robot)}
-                            disabled={robot.controlState.hasActiveMaster}
-                        >
-                            Connect USB Master
-                        </button>
-                        
-                        {#if robot.controlState.hasActiveMaster}
-                            <button
-                                class="px-3 py-1.5 bg-red-500 text-white rounded text-sm hover:bg-red-600 transition-colors"
-                                onclick={() => disconnectMaster(robot)}
-                            >
-                                Disconnect Master
-                            </button>
-                        {/if}
-                    </div>
-                </div>
-
-                <!-- Slave Controls -->
-                <div class="mb-4 p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
-                    <div class="text-sm text-blue-200 mb-2">
-                        <strong>Slaves (Execution Targets)</strong>
-                        - <span class="text-green-400">{robot.connectedSlaves.length} Connected</span>
-                        / <span class="text-slate-400">{robot.slaves.length} Total</span>
-                    </div>
-                    
-                    <div class="flex gap-2 mb-2">
-                        <button 
-                            onclick={() => connectMockSlave(robot)}
-                            class="px-3 py-1 bg-yellow-600 hover:bg-yellow-700 text-white text-sm rounded transition-colors"
-                        >
-                            Add Mock Slave
-                        </button>
-                        <button 
-                            onclick={() => connectUSBSlave(robot)}
-                            class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded transition-colors"
-                        >
-                            Add USB Slave
-                        </button>
-                        <button 
-                            onclick={() => connectRemoteServerSlave(robot)}
-                            class="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded transition-colors"
-                        >
-                            Add Remote Server Slave
-                        </button>
-                    </div>
-                    
-                    {#if robot.slaves.length > 0}
-                        <div class="text-xs text-blue-300">
-                            <strong>Connected Slaves:</strong>
-                            {#each robot.slaves as slave}
-                                <div class="flex items-center justify-between mt-1">
-                                    <span>{slave.name} ({slave.id})</span>
-                                    <button 
-                                        onclick={() => disconnectSlave(robot, slave.id)}
-                                        class="px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-xs rounded"
-                                    >
-                                        Remove
-                                    </button>
+            </Card.Content>
+        </Card.Root>
+    {:else}
+        <div class="space-y-4">
+            {#each robots as robot (robot.id)}
+                <Card.Root class="bg-slate-800/60 border-slate-600 hover:border-slate-500 transition-all">
+                    <Card.Header>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-3">
+                                <span class="icon-[mdi--robot] size-6 text-blue-400"></span>
+                                <div>
+                                    <Card.Title class="text-slate-100 text-lg">{robot.id}</Card.Title>
+                                    <div class="flex items-center gap-2 mt-1">
+                                        <Badge variant={getConnectionStatusVariant(robot)} class="text-xs text-slate-300">
+                                            {getConnectionStatusText(robot)}
+                                        </Badge>
+                                        {#if robot.controlState.lastCommandSource !== "none"}
+                                            <Badge variant="outline" class="text-blue-300 text-xs">
+                                                Last: {robot.controlState.lastCommandSource}
+                                            </Badge>
+                                        {/if}
+                                        {#if robot.isCalibrated}
+                                            <Badge variant="default" class="bg-green-600 text-xs">
+                                                <span class="icon-[mdi--check-circle] size-3 mr-1"></span>
+                                                Calibrated
+                                            </Badge>
+                                        {/if}
+                                    </div>
                                 </div>
-                            {/each}
-                        </div>
-                    {/if}
-                </div>
-
-                <!-- Calibration Section (for USB slaves) -->
-                {#if robot.connectedSlaves.some(slave => slave.name.includes("USB"))}
-                    <div class="mb-3 p-3 bg-orange-500/10 border border-orange-500/30 rounded-lg">
-                        <div class="text-sm text-orange-200 mb-2">
-                            <strong>USB Robot Calibration</strong>
-                        </div>
-                        {#if !robot.isCalibrated}
-                            <div class="text-xs text-orange-300 mb-2">
-                                1. Manually position your robot to match the digital twin's rest pose<br>
-                                2. Click "Calibrate" when positioned correctly
                             </div>
-                            <div class="flex gap-2">
-                                <button 
-                                    onclick={() => moveToRest(robot)}
-                                    class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded transition-colors"
-                                >
-                                    Show Rest Pose
-                                </button>
-                                <button 
-                                    onclick={() => calibrateRobot(robot)}
-                                    class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded transition-colors"
-                                >
-                                    Calibrate
-                                </button>
-                            </div>
-                        {:else}
-                            <div class="text-xs text-green-300 mb-2">
-                                ✓ Robot calibrated at {robot.calibrationState.calibrationTime?.toLocaleTimeString()}
-                            </div>
-                            <button 
-                                onclick={() => clearCalibration(robot)}
-                                class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-sm rounded transition-colors"
-                            >
-                                Clear Calibration
-                            </button>
-                        {/if}
-                    </div>
-                {/if}
-
-                <!-- Manual Joint Controls (only when no master) -->
-                {#if robot.manualControlEnabled}
-                    <div class="space-y-3">
-                        <h5 class="text-sm font-medium text-slate-300">Manual Control ({robot.activeJoints.length} active joints)</h5>
-                        {#each robot.activeJoints as joint}
-                            <div class="joint-control">
-                                <div class="joint-header">
-                                    <span class="joint-name">{joint.name}</span>
-                                    <div class="joint-values">
-                                        <span class="virtual-value">{joint.virtualValue.toFixed(0)}°</span>
-                                        {#if joint.realValue !== undefined}
-                                            <span class="real-value" title="Real robot position">
-                                                Real: {joint.realValue.toFixed(0)}°
-                                            </span>
+                            
+                        </div>
+                        <Button variant="destructive" size="sm" onclick={() => removeRobot(robot)}>
+                            <span class="icon-[mdi--delete] size-4 mr-1"></span>
+                            Remove
+                        </Button>
+                    </Card.Header>
+
+                    <Card.Content class="space-y-4">
+                        <!-- Master Controls -->
+                        <Card.Root class="bg-orange-500/10 border-orange-500/30">
+                            <Card.Header>
+                                <Card.Title class="text-orange-200 text-sm flex flex-col gap-2 text-pretty">
+                                    <div class="flex items-center gap-2 text-lg">
+                                        <span class="icon-[mdi--account-supervisor] size-6"></span>
+                                        Masters (Sources)
+                                    </div>
+                                    <div class="flex items-center gap-2">
+                                        {#if robot.controlState.hasActiveMaster}
+                                            <Badge variant="default" class="bg-green-600 text-xs ml-auto">
+                                                Connected: {robot.controlState.masterName}
+                                            </Badge>
                                         {:else}
-                                            <span class="real-value disconnected">N/A</span>
+                                            <Badge variant="outline" class="text-slate-400 text-xs ml-auto">
+                                                None Connected
+                                            </Badge>
                                         {/if}
                                     </div>
+                                </Card.Title>
+                            </Card.Header>
+                            <Card.Content class="pt-2">
+                                <div class="flex flex-col gap-2">
+                                    <Button
+                                        variant="secondary"
+                                        size="sm"
+                                        onclick={() => connectDemoSequences(robot)}
+                                        disabled={robot.controlState.hasActiveMaster}
+                                        class="bg-orange-600 hover:bg-orange-700 text-white disabled:bg-slate-600"
+                                    >
+                                        <span class="icon-[mdi--play-circle] size-4 mr-1"></span>
+                                        Demo Sequences
+                                    </Button>
+                                    
+                                    <Button
+                                        variant="secondary"
+                                        size="sm"
+                                        onclick={() => connectRemoteServerMaster(robot)}
+                                        disabled={robot.controlState.hasActiveMaster}
+                                        class="bg-purple-600 hover:bg-purple-700 text-white disabled:bg-slate-600"
+                                    >
+                                        <span class="icon-[mdi--cloud] size-4 mr-1"></span>
+                                        Remote Server
+                                    </Button>
+
+                                    <Button
+                                        variant="secondary"
+                                        size="sm"
+                                        onclick={() => connectUSBMaster(robot)}
+                                        disabled={robot.controlState.hasActiveMaster}
+                                        class="bg-blue-600 hover:bg-blue-700 text-white disabled:bg-slate-600"
+                                    >
+                                        <span class="icon-[mdi--usb] size-4 mr-1"></span>
+                                        USB Master
+                                    </Button>
+                                    
+                                    {#if robot.controlState.hasActiveMaster}
+                                        <Button
+                                            variant="destructive"
+                                            size="sm"
+                                            onclick={() => disconnectMaster(robot)}
+                                        >
+                                            <span class="icon-[mdi--close-circle] size-4 mr-1"></span>
+                                            Disconnect Master
+                                        </Button>
+                                    {/if}
                                 </div>
-                                <input 
-                                    type="range"
-                                    min="-180"
-                                    max="180"
-                                    step="1"
-                                    value={joint.virtualValue}
-                                    oninput={(e) => {
-                                        const target = e.target as HTMLInputElement;
-                                        robot.updateJointValue(joint.name, parseFloat(target.value));
-                                    }}
-                                    class="joint-slider"
-                                />
-                            </div>
-                        {/each}
-                        
-                        {#if robot.activeJoints.length === 0}
-                            <div class="text-sm text-slate-500 italic">No active joints</div>
+                            </Card.Content>
+                        </Card.Root>
+
+                        <!-- Slave Controls -->
+                        <Card.Root class="bg-blue-500/10 border-blue-500/30">
+                            <Card.Header>
+                                <Card.Title class="text-blue-200 text-sm flex flex-col gap-2 text-pretty">
+                                    <div class="flex items-center gap-2 text-lg">
+                                        <span class="icon-[mdi--devices] size-6"></span>
+                                        Slaves (Targets)
+                                    </div>
+                                    <div class="flex items-center gap-2">
+                                        <Badge variant="default" class="bg-green-600 text-xs ml-auto">
+                                            {robot.connectedSlaves.length} Connected
+                                        </Badge>
+                                        <Badge variant="outline" class="text-slate-400 text-xs">
+                                            / {robot.slaves.length} Total
+                                        </Badge>
+                                    </div>
+                                </Card.Title>
+                            </Card.Header>
+                            <Card.Content class="pt-2 space-y-3">
+                                <div class="flex flex-col gap-2">
+                                    <Button 
+                                        variant="secondary"
+                                        size="sm"
+                                        onclick={() => connectMockSlave(robot)}
+                                        class="bg-yellow-600 hover:bg-yellow-700 text-white"
+                                    >
+                                        <span class="icon-[mdi--robot-confused] size-4 mr-1"></span>
+                                        Add Mock Slave
+                                    </Button>
+                                    <Button 
+                                        variant="secondary"
+                                        size="sm"
+                                        onclick={() => connectUSBSlave(robot)}
+                                        class="bg-green-600 hover:bg-green-700 text-white"
+                                    >
+                                        <span class="icon-[mdi--usb] size-4 mr-1"></span>
+                                        Add USB Slave
+                                    </Button>
+                                    <Button 
+                                        variant="secondary"
+                                        size="sm"
+                                        onclick={() => connectRemoteServerSlave(robot)}
+                                        class="bg-purple-600 hover:bg-purple-700 text-white"
+                                    >
+                                        <span class="icon-[mdi--cloud] size-4 mr-1"></span>
+                                        Add Remote Server Slave
+                                    </Button>
+                                </div>
+                                
+                                {#if robot.slaves.length > 0}
+                                    <div class="space-y-2">
+                                        <p class="text-xs text-blue-300 font-medium">Connected Slaves:</p>
+                                        <div class="space-y-1">
+                                            {#each robot.slaves as slave}
+                                                <div class="flex items-center justify-between p-2 bg-slate-700/50 rounded-md">
+                                                    <div class="flex items-center gap-2">
+                                                        <span class="icon-[mdi--circle] size-2 text-green-400"></span>
+                                                        <span class="text-sm text-slate-300">{slave.name}</span>
+                                                        <Badge variant="outline" class="text-xs">{slave.id}</Badge>
+                                                    </div>
+                                                    <Button 
+                                                        variant="destructive"
+                                                        size="sm"
+                                                        onclick={() => disconnectSlave(robot, slave.id)}
+                                                        class="h-6 px-2 text-xs"
+                                                    >
+                                                        <span class="icon-[mdi--close] size-3"></span>
+                                                    </Button>
+                                                </div>
+                                            {/each}
+                                        </div>
+                                    </div>
+                                {/if}
+                            </Card.Content>
+                        </Card.Root>
+
+                        <!-- Calibration Section (for USB slaves) -->
+                        {#if robot.connectedSlaves.some(slave => slave.name.includes("USB"))}
+                            <Card.Root class="bg-emerald-500/10 border-emerald-500/30">
+                                <Card.Header>
+                                    <Card.Title class="text-emerald-200 text-sm flex items-center gap-2">
+                                        <span class="icon-[mdi--crosshairs-gps] size-4"></span>
+                                        USB Robot Calibration
+                                        {#if robot.isCalibrated}
+                                            <Badge variant="default" class="bg-green-600 text-xs ml-auto">
+                                                <span class="icon-[mdi--check] size-3 mr-1"></span>
+                                                Calibrated
+                                            </Badge>
+                                        {:else}
+                                            <Badge variant="destructive" class="text-xs ml-auto">
+                                                <span class="icon-[mdi--alert] size-3 mr-1"></span>
+                                                Not Calibrated
+                                            </Badge>
+                                        {/if}
+                                    </Card.Title>
+                                </Card.Header>
+                                <Card.Content class="pt-2">
+                                    {#if !robot.isCalibrated}
+                                        <div class="space-y-3">
+                                            <Alert.Root>
+                                                <span class="icon-[mdi--information] size-4"></span>
+                                                <Alert.Title>Calibration Steps</Alert.Title>
+                                                <Alert.Description>
+                                                    <ol class="text-xs space-y-1 mt-2">
+                                                        <li>1. Manually position your robot to match the digital twin's rest pose</li>
+                                                        <li>2. Click "Calibrate" when positioned correctly</li>
+                                                    </ol>
+                                                </Alert.Description>
+                                            </Alert.Root>
+                                            <div class="flex gap-2">
+                                                <Button 
+                                                    variant="outline"
+                                                    size="sm"
+                                                    onclick={() => moveToRest(robot)}
+                                                >
+                                                    <span class="icon-[mdi--human-handsup] size-4 mr-1"></span>
+                                                    Show Rest Pose
+                                                </Button>
+                                                <Button 
+                                                    variant="default"
+                                                    size="sm"
+                                                    onclick={() => calibrateRobot(robot)}
+                                                    class="bg-green-600 hover:bg-green-700"
+                                                >
+                                                    <span class="icon-[mdi--crosshairs-gps] size-4 mr-1"></span>
+                                                    Calibrate
+                                                </Button>
+                                            </div>
+                                        </div>
+                                    {:else}
+                                        <div class="space-y-3">
+                                            <div class="flex items-center gap-2 text-sm text-green-300">
+                                                <span class="icon-[mdi--check-circle] size-4"></span>
+                                                Robot calibrated at {robot.calibrationState.calibrationTime?.toLocaleTimeString()}
+                                            </div>
+                                            <Button 
+                                                variant="outline"
+                                                size="sm"
+                                                onclick={() => clearCalibration(robot)}
+                                            >
+                                                <span class="icon-[mdi--refresh] size-4 mr-1"></span>
+                                                Clear Calibration
+                                            </Button>
+                                        </div>
+                                    {/if}
+                                </Card.Content>
+                            </Card.Root>
                         {/if}
-                    </div>
-                {:else}
-                    <div class="p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
-                        <div class="text-sm text-purple-200">
-                            🎮 <strong>Master Control Active</strong><br>
-                            <span class="text-xs text-purple-300">
-                                Robot is controlled by: {robot.controlState.masterName}<br>
-                                Manual controls are disabled. Disconnect master to regain manual control.
-                            </span>
-                        </div>
-                    </div>
-                {/if}
-            </div>
-        {/each}
-        
-        {#if robots.length === 0}
-            <div class="text-center text-slate-500 py-8">
-                No robots created yet. Create one above to get started with the master-slave architecture.
-            </div>
-        {/if}
-    </div>
+
+                        <!-- Manual Joint Controls or Master Control Status -->
+                        {#if robot.manualControlEnabled}
+                            <Card.Root class="bg-slate-700/30 border-slate-600">
+                                <Card.Header>
+                                    <Card.Title class="text-slate-200 text-sm flex flex-col gap-2 text-pretty">
+                                        <div class="flex items-center gap-2 text-lg">
+                                            <span class="icon-[mdi--tune] size-6"></span>
+                                            Manual Control
+                                        </div>
+                                        <div class="flex items-center gap-2">
+                                            <Badge variant="default" class="bg-green-600 text-xs ml-auto">
+                                                {robot.activeJoints.length} Active Joints
+                                            </Badge>
+                                        </div>
+                                    </Card.Title>
+                                </Card.Header>
+                                <Card.Content class="pt-2">
+                                    {#if robot.activeJoints.length === 0}
+                                        <p class="text-sm text-slate-500 italic text-center py-4">No active joints</p>
+                                    {:else}
+                                        <div class="space-y-4">
+                                            {#each robot.activeJoints as joint}
+                                                {@const lower = (joint.urdfJoint.limit?.lower != undefined) ? (joint.urdfJoint.limit.lower * 180) / Math.PI : -180}
+                                                {@const upper = (joint.urdfJoint.limit?.upper != undefined) ? (joint.urdfJoint.limit.upper * 180) / Math.PI : 180}
+                                                <div class="space-y-2 p-3 bg-slate-800/50 rounded-lg border border-slate-600">
+                                                    <span class="text-sm font-medium text-slate-300">{joint.name}</span>
+                                                    <div class="space-y-2">
+                                                        <input 
+                                                            type="range"
+                                                            min={lower}
+                                                            max={upper}
+                                                            step="1"
+                                                            value={joint.virtualValue}
+                                                            oninput={(e) => {
+                                                                const target = e.target as HTMLInputElement;
+                                                                robot.updateJointValue(joint.name, parseFloat(target.value));
+                                                            }}
+                                                            class="w-full h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer slider"
+                                                        />
+                                                        <div class="flex justify-between text-xs text-slate-500">
+                                                            <span>-180°</span>
+                                                            <span>180°</span>
+                                                        </div>
+                                                    </div>
+                                                    <div class="flex justify-between items-center">
+                                                        
+                                                        <div class="flex items-center gap-3 text-xs">
+                                                            <span class="text-blue-400 font-mono">Virtual: {joint.virtualValue.toFixed(0)}°</span>
+                                                            {#if joint.realValue !== undefined}
+                                                                <span class="text-green-400 font-mono">Real: {joint.realValue.toFixed(0)}°</span>
+                                                            {:else}
+                                                                <span class="text-red-400 font-mono">Real: N/A</span>
+                                                            {/if}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            {/each}
+                                        </div>
+                                    {/if}
+                                </Card.Content>
+                            </Card.Root>
+                        {:else}
+                            <Alert.Root class="bg-purple-500/10 border-purple-500/30">
+                                <span class="icon-[mdi--gamepad-variant] size-4"></span>
+                                <Alert.Title class="text-purple-200">Master Control Active</Alert.Title>
+                                <Alert.Description class="text-purple-300">
+                                    Robot is controlled by: <strong>{robot.controlState.masterName}</strong><br>
+                                    Manual controls are disabled. Disconnect master to regain manual control.
+                                </Alert.Description>
+                            </Alert.Root>
+                        {/if}
+                    </Card.Content>
+                </Card.Root>
+            {/each}
+        </div>
+    {/if}
 </div>
 
 <!-- Robot Selection Modal -->
 {#if showRobotSelectionModal}
-    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        <div class="bg-slate-800 rounded-lg p-6 w-96 max-w-full mx-4">
-            <h3 class="text-lg font-semibold text-slate-100 mb-4">Select Server Robot</h3>
-            
-            <div class="mb-4">
-                <label class="block text-sm font-medium text-slate-300 mb-2">
-                    Available robots on server:
-                </label>
-                <select 
-                    bind:value={selectedServerRobotId}
-                    class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-slate-100"
-                >
-                    {#each availableServerRobots as serverRobot}
-                        <option value={serverRobot.id}>
-                            {serverRobot.name} ({serverRobot.id}) - {serverRobot.robot_type}
-                        </option>
-                    {/each}
-                </select>
-            </div>
-            
-            <div class="text-sm text-slate-400 mb-4">
-                This will connect your local robot "{pendingLocalRobot?.id}" as a slave to 
-                receive commands from the selected server robot.
-            </div>
-            
-            <div class="flex gap-3 justify-end">
-                <button 
-                    onclick={cancelRobotSelection}
-                    class="px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white rounded-md transition-colors"
-                >
+    <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 backdrop-blur-sm">
+        <Card.Root class="w-96 max-w-full mx-4 bg-slate-800 border-slate-600">
+            <Card.Header>
+                <Card.Title class="text-slate-100 flex items-center gap-2">
+                    <span class="icon-[mdi--robot] size-5"></span>
+                    Select Server Robot
+                </Card.Title>
+                <Card.Description class="text-slate-400">
+                    Choose which server robot to connect as a slave target
+                </Card.Description>
+            </Card.Header>
+            <Card.Content class="space-y-4">
+                <div class="space-y-2">
+                    <label class="text-sm font-medium text-slate-300">Available robots on server:</label>
+                    <select 
+                        bind:value={selectedServerRobotId}
+                        class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-slate-100 text-sm"
+                    >
+                        {#each availableServerRobots as serverRobot}
+                            <option value={serverRobot.id}>
+                                {serverRobot.name} ({serverRobot.id}) - {serverRobot.robot_type}
+                            </option>
+                        {/each}
+                    </select>
+                </div>
+                
+                <Alert.Root>
+                    <span class="icon-[mdi--information] size-4"></span>
+                    <Alert.Description>
+                        This will connect your local robot <strong>"{pendingLocalRobot?.id}"</strong> as a slave to 
+                        receive commands from the selected server robot.
+                    </Alert.Description>
+                </Alert.Root>
+            </Card.Content>
+            <Card.Footer class="flex gap-3 justify-end">
+                <Button variant="outline" onclick={cancelRobotSelection}>
                     Cancel
-                </button>
-                <button 
+                </Button>
+                <Button 
                     onclick={confirmRobotSelection}
-                    class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-colors"
                     disabled={!selectedServerRobotId}
+                    class="bg-purple-600 hover:bg-purple-700"
                 >
+                    <span class="icon-[mdi--link] size-4 mr-1"></span>
                     Connect Slave
-                </button>
-            </div>
-        </div>
+                </Button>
+            </Card.Footer>
+        </Card.Root>
     </div>
 {/if}
 
 <style>
-    .joint-control {
-        background: rgba(71, 85, 105, 0.3);
-        border-radius: 8px;
-        padding: 12px;
-        border: 1px solid rgba(71, 85, 105, 0.5);
-    }
-
-    .joint-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 8px;
-    }
-
-    .joint-name {
-        font-weight: 500;
-        color: #e2e8f0;
-        font-size: 14px;
-    }
-
-    .joint-values {
-        display: flex;
-        gap: 12px;
-        font-size: 12px;
-    }
-
-    .virtual-value {
-        color: #60a5fa;
-        font-weight: 500;
-    }
-
-    .real-value {
-        color: #34d399;
-        font-weight: 500;
-    }
-
-    .real-value.disconnected {
-        color: #f87171;
-    }
-
-    .joint-slider {
-        width: 100%;
-        height: 6px;
-        background: #374151;
-        border-radius: 3px;
-        outline: none;
-        cursor: pointer;
-        appearance: none;
-    }
-
-    .joint-slider::-webkit-slider-thumb {
+    .slider::-webkit-slider-thumb {
         appearance: none;
         width: 18px;
         height: 18px;
@@ -627,12 +692,12 @@
         transition: all 0.15s ease;
     }
 
-    .joint-slider::-webkit-slider-thumb:hover {
+    .slider::-webkit-slider-thumb:hover {
         background: #2563eb;
         transform: scale(1.1);
     }
 
-    .joint-slider::-moz-range-thumb {
+    .slider::-moz-range-thumb {
         width: 18px;
         height: 18px;
         border-radius: 50%;
@@ -643,14 +708,14 @@
         transition: all 0.15s ease;
     }
 
-    .joint-slider::-moz-range-track {
+    .slider::-moz-range-track {
         height: 6px;
         background: #374151;
         border-radius: 3px;
         border: none;
     }
 
-    .joint-slider:focus {
+    .slider:focus {
         box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
     }
 </style> 

src/lib/components/panel/SettingsPanel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { environment } from '$lib/runes/env.svelte';
-	import type IUrdfJoint from '$lib/components/scene/robot/URDF/interfaces/IUrdfJoint';
+	import type IUrdfJoint from '$lib/components/3d/robot/URDF/interfaces/IUrdfJoint';
 
     interface Props {}
     

src/lib/components/scene/Robot.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { T } from '@threlte/core';
-	import { getRootLinks } from '$lib/components/scene/robot/URDF/utils/UrdfParser';
-	import UrdfLink from '$lib/components/scene/robot/URDF/primitives/UrdfLink.svelte';
-	import { robotManager } from '$lib/robot/RobotManager.svelte';
-
-	interface Props {}
-
-	let {}: Props = $props();
-
-	// Get all robots from the manager
-	const robots = $derived(robotManager.robots);
-</script>
-
-{#each robots as robot, index (robot.id)}
-	{@const xPosition = index * 5} <!-- Space robots 5 units apart -->
-	<T.Group position.x={xPosition} position.y={0} position.z={0} quaternion={[0, 0, 0, 1]} scale={[10, 10, 10]} rotation={[-Math.PI / 2, 0, 0]}>
-		{#each getRootLinks(robot.robotState.robot) as link}
-			<UrdfLink
-				robot={robot.robotState.robot}
-				{link}
-				textScale={0.2}
-				showName={true}
-				showVisual={true}
-				showCollision={false}
-				visualColor="#333333"
-				visualOpacity={0.7}
-				collisionOpacity={0.7}
-				collisionColor="#813d9c"
-				jointNames={true}
-				joints={true}
-				jointColor="#62a0ea"
-				jointIndicatorColor="#f66151"
-				nameHeight={0.1}
-				selectedLink={robot.robotState.selection.selectedLink}
-				selectedJoint={robot.robotState.selection.selectedJoint}
-				highlightColor="#ffa348"
-				showLine={false}
-				opacity={1}
-				isInteractive={false}
-			/>
-		{/each}
-	</T.Group>
-{/each}

src/lib/components/scene/Selectable.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">
-	import { T } from '@threlte/core';
-	import { TransformControls, interactivity } from '@threlte/extras';
-	import type { Object3D } from 'three';
-	import type { Snippet } from 'svelte';
-	import type IUrdfJoint from './robot/URDF/interfaces/IUrdfJoint';
-	import { updateOrigin } from './robot/URDF/utils/UrdfParser';
-	import type { IUrdfVisual } from './robot/URDF/interfaces/IUrdfVisual';
-	import type { TransformControlsMode } from 'three/examples/jsm/Addons.js';
-
-	interface Props {
-		origin: IUrdfJoint | IUrdfVisual;
-		children?: Snippet; // renderable
-		selected?: boolean;
-		translationSnap?: number;
-		scaleSnap?: number;
-		rotationSnap?: number;
-		tool?: TransformControlsMode;
-		enableEdit?: boolean;
-	}
-
-	let {
-		origin,
-		children,
-		selected = false,
-		translationSnap = 0.1,
-		scaleSnap = 0.1,
-		rotationSnap = 0.1,
-		tool = 'translate',
-		enableEdit = true
-	}: Props = $props();
-
-	const updateData = (obj: Object3D) => {
-		origin.origin_xyz = obj.position.toArray();
-		origin.origin_rpy = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
-		updateOrigin(origin);
-	};
-
-	const onobjectChange = (event: any) => {
-		if (!event.target) {
-			return;
-		}
-		const obj = event.target.object;
-		updateData(obj);
-	};
-
-	interactivity();
-</script>
-
-{#if selected && enableEdit}
-	<TransformControls
-		{translationSnap}
-		{scaleSnap}
-		rotationSnap={Math.PI / rotationSnap}
-		position={origin.origin_xyz}
-		rotation={origin.origin_rpy}
-		mode={tool}
-		{onobjectChange}
-	>
-		{@render children?.()}
-	</TransformControls>
-{:else}
-	<T.Group position={origin.origin_xyz} rotation={origin.origin_rpy}>
-		{@render children?.()}
-	</T.Group>
-{/if}
-
-<!-- From https://github.com/brean/urdf-viewer -->

src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	data-slot="accordion-content"
+	class={cn(
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+		className
+	)}
+	{...restProps}
+>
+	<div class="pb-4 pt-0">
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>

src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn("border-b last:border-b-0", className)}
+	{...restProps}
+/>

src/lib/components/ui/accordion/accordion-root.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	{...restProps}
+/>

src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
+		bind:ref
+		class={cn(
+			"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDownIcon
+			class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+		/>
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,16 @@
+import Root from "./accordion-root.svelte";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};

src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>

src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: "outline" }), className)}
+	{...restProps}
+/>

src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>

src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>