Spaces:

jurmy24
/

urdf-visualizer

Running

App Files Files Community

jurmy24 commited on 13 days ago

Commit

16ab111

1 Parent(s): 67748b3

feat(wip): add viewer

Browse files

Files changed (34) hide show

viewer/.gitignore +24 -0
viewer/README.md +54 -0
viewer/eslint.config.js +28 -0
viewer/index.html +13 -0
viewer/package.json +34 -0
viewer/public/vite.svg +1 -0
viewer/src/App.css +42 -0
viewer/src/App.tsx +23 -0
viewer/src/assets/react.svg +1 -0
viewer/src/components/UrdfSelectionModalContainer.tsx +25 -0
viewer/src/components/UrdfViewer.tsx +295 -0
viewer/src/components/ui/UrdfSelectionModal.tsx +79 -0
viewer/src/components/ui/sonner.tsx +29 -0
viewer/src/components/ui/toast.tsx +127 -0
viewer/src/components/ui/toaster.tsx +33 -0
viewer/src/components/ui/tooltip.tsx +28 -0
viewer/src/contexts/DragAndDropContext.tsx +123 -0
viewer/src/contexts/UrdfContext.tsx +495 -0
viewer/src/hooks/use-toast.ts +191 -0
viewer/src/hooks/useDragAndDrop.tsx +14 -0
viewer/src/hooks/useUrdf.ts +11 -0
viewer/src/index.css +68 -0
viewer/src/lib/UrdfDragAndDrop.ts +413 -0
viewer/src/lib/meshLoaders.ts +94 -0
viewer/src/lib/types.ts +97 -0
viewer/src/lib/urdfViewerHelpers.ts +161 -0
viewer/src/lib/utils.ts +6 -0
viewer/src/main.tsx +10 -0
viewer/src/pages/UrdfView.tsx +33 -0
viewer/src/vite-env.d.ts +1 -0
viewer/tsconfig.app.json +33 -0
viewer/tsconfig.json +13 -0
viewer/tsconfig.node.json +24 -0
viewer/vite.config.ts +13 -0

viewer/.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

viewer/README.md ADDED Viewed

	@@ -0,0 +1,54 @@

+# React + TypeScript + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

viewer/eslint.config.js ADDED Viewed

	@@ -0,0 +1,28 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

viewer/index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

viewer/package.json ADDED Viewed

	@@ -0,0 +1,34 @@

+{
+  "name": "viewer",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@types/node": "^22.14.1",
+    "clsx": "^2.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.2.0",
+    "urdf-loader": "^0.12.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.26.1",
+    "vite": "^6.3.1"
+  }
+}

viewer/public/vite.svg ADDED Viewed

viewer/src/App.css ADDED Viewed

	@@ -0,0 +1,42 @@

+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}

viewer/src/App.tsx ADDED Viewed

	@@ -0,0 +1,23 @@

+import { DragAndDropProvider } from "@/contexts/DragAndDropContext";
+import { UrdfProvider } from "@/contexts/UrdfContext";
+import { Toaster } from "@/components/ui/toaster";
+import { Toaster as Sonner } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import UrdfView from "@/pages/UrdfView";
+import "@/App.css";
+function App() {
+  return (
+    <TooltipProvider>
+      <UrdfProvider>
+        <DragAndDropProvider>
+          <Toaster />
+          <Sonner />
+          <UrdfView />
+        </DragAndDropProvider>
+      </UrdfProvider>
+    </TooltipProvider>
+  );
+}
+export default App;

viewer/src/assets/react.svg ADDED Viewed

viewer/src/components/UrdfSelectionModalContainer.tsx ADDED Viewed

	@@ -0,0 +1,25 @@

+import { useUrdf } from "@/hooks/useUrdf";
+import { UrdfSelectionModal } from "@/components/ui/UrdfSelectionModal";
+/**
+ * Container component that manages the URDF selection modal.
+ * This is meant to be placed in the application layout to ensure the modal
+ * is accessible throughout the application without nesting issues.
+ */
+export function UrdfSelectionModalContainer() {
+  const {
+    isSelectionModalOpen,
+    setIsSelectionModalOpen,
+    urdfModelOptions,
+    selectUrdfModel,
+  } = useUrdf();
+  return (
+    <UrdfSelectionModal
+      isOpen={isSelectionModalOpen}
+      onClose={() => setIsSelectionModalOpen(false)}
+      urdfModels={urdfModelOptions}
+      onSelectModel={selectUrdfModel}
+    />
+  );
+}

viewer/src/components/UrdfViewer.tsx ADDED Viewed

	@@ -0,0 +1,295 @@

+import React, { useEffect, useRef, useState, useMemo } from "react";
+import { Play, Pause } from "lucide-react";
+import { cn } from "@/lib/utils";
+import URDFManipulator from "urdf-loader/src/urdf-manipulator-element.js";
+import { useUrdf } from "@/hooks/useUrdf";
+import {
+  createUrdfViewer,
+  setupMeshLoader,
+  setupJointHighlighting,
+  setupModelLoading,
+} from "@/lib/urdfViewerHelpers";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+// Register the URDFManipulator as a custom element if it hasn't been already
+if (typeof window !== "undefined" && !customElements.get("urdf-viewer")) {
+  customElements.define("urdf-viewer", URDFManipulator);
+}
+// Extend the interface for the URDF viewer element to include background property
+interface URDFViewerElement extends HTMLElement {
+  background?: string;
+  setJointValue?: (jointName: string, value: number) => void;
+}
+interface URDFViewerProps {
+  hasAnimation?: boolean;
+  headerHeight?: number;
+}
+const URDFViewer: React.FC<URDFViewerProps> = ({
+  hasAnimation = false,
+  headerHeight = 0,
+}) => {
+  const { theme } = useTheme();
+  const isDarkMode = theme === "dark";
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [highlightedJoint, setHighlightedJoint] = useState<string | null>(null);
+  const {
+    registerUrdfProcessor,
+    alternativeUrdfModels,
+    isDefaultModel,
+    currentAnimationConfig,
+  } = useUrdf();
+  // Add state for animation control
+  const [isAnimating, setIsAnimating] = useState<boolean>(isDefaultModel);
+  const [showAnimationControl, setShowAnimationControl] = useState<boolean>(
+    isDefaultModel || hasAnimation
+  );
+  const cleanupAnimationRef = useRef<(() => void) | null>(null);
+  const viewerRef = useRef<URDFViewerElement | null>(null);
+  const hasInitializedRef = useRef<boolean>(false);
+  // Add state for custom URDF path
+  const [customUrdfPath, setCustomUrdfPath] = useState<string | null>(null);
+  const [urlModifierFunc, setUrlModifierFunc] = useState<
+    ((url: string) => string) | null
+  >(null);
+  const packageRef = useRef<string>("");
+  // Implement UrdfProcessor interface for drag and drop
+  const urdfProcessor = useMemo(
+    () => ({
+      loadUrdf: (urdfPath: string) => {
+        setCustomUrdfPath(urdfPath);
+      },
+      setUrlModifierFunc: (func: (url: string) => string) => {
+        setUrlModifierFunc(() => func);
+      },
+      getPackage: () => {
+        return packageRef.current;
+      },
+    }),
+    []
+  );
+  // Register the URDF processor with the global drag and drop context
+  useEffect(() => {
+    registerUrdfProcessor(urdfProcessor);
+  }, [registerUrdfProcessor, urdfProcessor]);
+  // Effect to update animation control visibility based on props
+  useEffect(() => {
+    // Show animation controls for default model or when hasAnimation is true
+    setShowAnimationControl(isDefaultModel || hasAnimation);
+  }, [isDefaultModel, hasAnimation]);
+  // Toggle animation function
+  const toggleAnimation = () => {
+    setIsAnimating((prev) => !prev);
+  };
+  // Main effect to create and setup the viewer only once
+  useEffect(() => {
+    if (!containerRef.current) return;
+    // Create and configure the URDF viewer element
+    const viewer = createUrdfViewer(containerRef.current, isDarkMode);
+    viewerRef.current = viewer; // Store reference to the viewer
+    // Setup mesh loading function
+    setupMeshLoader(viewer, urlModifierFunc);
+    // Determine which URDF to load
+    const urdfPath = isDefaultModel
+      ? "/urdf/T12/urdf/T12.URDF"
+      : customUrdfPath || "";
+    // Setup model loading if a path is available
+    let cleanupModelLoading = () => {};
+    if (urdfPath) {
+      cleanupModelLoading = setupModelLoading(
+        viewer,
+        urdfPath,
+        packageRef.current,
+        setCustomUrdfPath,
+        alternativeUrdfModels
+      );
+    }
+    // Setup joint highlighting
+    const cleanupJointHighlighting = setupJointHighlighting(
+      viewer,
+      setHighlightedJoint
+    );
+    // Setup animation event handler for the default model or when hasAnimation is true
+    const onModelProcessed = () => {
+      hasInitializedRef.current = true;
+      if (isAnimating && "setJointValue" in viewer) {
+        // Clear any existing animation
+        if (cleanupAnimationRef.current) {
+          cleanupAnimationRef.current();
+          cleanupAnimationRef.current = null;
+        }
+        // Use the appropriate animation based on whether it's the default model or hasAnimation
+        if (isDefaultModel) {
+          // Start the hexapod animation when it's the default model
+          cleanupAnimationRef.current = animateHexapodRobot(
+            viewer as import("@/lib/urdfAnimationHelpers").URDFViewerElement
+          );
+        } else if (hasAnimation) {
+          // Use the custom animation config from the context if available, otherwise fall back to cassieWalkingConfig
+          const animationConfig = currentAnimationConfig || cassieWalkingConfig;
+          // Start the animation using the selected configuration
+          cleanupAnimationRef.current = animateRobot(
+            viewer as import("@/lib/urdfAnimationHelpers").URDFViewerElement,
+            animationConfig
+          );
+        }
+      }
+    };
+    viewer.addEventListener("urdf-processed", onModelProcessed);
+    // Return cleanup function
+    return () => {
+      if (cleanupAnimationRef.current) {
+        cleanupAnimationRef.current();
+        cleanupAnimationRef.current = null;
+      }
+      hasInitializedRef.current = false;
+      cleanupJointHighlighting();
+      cleanupModelLoading();
+      viewer.removeEventListener("urdf-processed", onModelProcessed);
+    };
+  }, [
+    isDefaultModel,
+    customUrdfPath,
+    urlModifierFunc,
+    hasAnimation,
+    currentAnimationConfig,
+  ]);
+  // Separate effect to handle theme changes without recreating the viewer
+  useEffect(() => {
+    if (!viewerRef.current) return;
+    // Update only the visual aspects based on theme
+    if (viewerRef.current.background !== undefined) {
+      if (isDarkMode) {
+        viewerRef.current.background = "#1f2937"; // Dark background
+      } else {
+        viewerRef.current.background = "#e0e7ff"; // Light background
+      }
+    }
+  }, [isDarkMode]);
+  // Effect to handle animation toggling after initial load
+  useEffect(() => {
+    if (!viewerRef.current || !hasInitializedRef.current) return;
+    // Only manage animation if viewer has setJointValue (required for animation)
+    if (!("setJointValue" in viewerRef.current)) return;
+    if (isAnimating) {
+      if (!cleanupAnimationRef.current) {
+        // Only start animation if it's not already running
+        if (isDefaultModel) {
+          cleanupAnimationRef.current = animateHexapodRobot(
+            viewerRef.current as import("@/lib/urdfAnimationHelpers").URDFViewerElement
+          );
+        } else if (hasAnimation) {
+          // Use the custom animation config from the context if available, otherwise fall back to cassieWalkingConfig
+          const animationConfig = currentAnimationConfig;
+          // Start animation using the selected configuration
+          cleanupAnimationRef.current = animateRobot(
+            viewerRef.current as import("@/lib/urdfAnimationHelpers").URDFViewerElement,
+            animationConfig
+          );
+        }
+      }
+    } else {
+      if (cleanupAnimationRef.current) {
+        // Just cancel the animation frame without resetting anything
+        cleanupAnimationRef.current();
+        cleanupAnimationRef.current = null;
+      }
+    }
+  }, [isAnimating, isDefaultModel, hasAnimation, currentAnimationConfig]);
+  return (
+    <div
+      className={cn(
+        "w-full h-full transition-all duration-300 ease-in-out relative",
+        isDarkMode
+          ? "bg-gradient-to-br from-gray-900 to-gray-800"
+          : "bg-gradient-to-br from-blue-50 to-indigo-50"
+      )}
+    >
+      <div ref={containerRef} className="w-full h-full" />
+      {/* Control buttons container in top right, with vertical padding for header */}
+      <div
+        className="absolute right-4 flex items-center space-x-2 z-10"
+        style={{ top: `${headerHeight + 16}px` }}
+      >
+        {/* ModeToggle button */}
+        <ModeToggle />
+        {/* Animation control button with icon - show for both default model and when animation is available */}
+        {showAnimationControl && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={toggleAnimation}
+                  className={cn(
+                    "p-2.5 rounded-full shadow-md transition-all duration-300",
+                    isDarkMode
+                      ? "bg-gray-700 hover:bg-gray-600 text-white"
+                      : "bg-white/80 hover:bg-white text-gray-800"
+                  )}
+                  aria-label={
+                    isAnimating ? "Stop Animation" : "Start Animation"
+                  }
+                >
+                  {isAnimating ? (
+                    <Pause className="h-5 w-5" />
+                  ) : (
+                    <Play className="h-5 w-5" />
+                  )}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p className="font-mono text-xs">
+                  {isAnimating ? "Stop Animation" : "Start Animation"}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+      {/* Joint highlight indicator */}
+      {highlightedJoint && (
+        <div className="absolute bottom-4 right-4 bg-black/70 text-white px-3 py-2 rounded-md text-sm font-mono z-10">
+          Joint: {highlightedJoint}
+        </div>
+      )}
+    </div>
+  );
+};
+export default URDFViewer;

viewer/src/components/ui/UrdfSelectionModal.tsx ADDED Viewed

	@@ -0,0 +1,79 @@

+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { UrdfFileModel } from "@/lib/types";
+interface UrdfSelectionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  urdfModels: UrdfFileModel[];
+  onSelectModel: (model: UrdfFileModel) => void;
+}
+export function UrdfSelectionModal({
+  isOpen,
+  onClose,
+  urdfModels,
+  onSelectModel,
+}: UrdfSelectionModalProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Select URDF Model</DialogTitle>
+          <DialogDescription>
+            Multiple URDF files were found. Please select the model you want to
+            visualize.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="max-h-[400px] overflow-y-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>File Name</TableHead>
+                <TableHead>Path</TableHead>
+                <TableHead className="w-[100px]">Action</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {urdfModels.map((model) => (
+                <TableRow key={model.path}>
+                  <TableCell className="font-medium">
+                    {model.path.split("/").pop()}
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground truncate max-w-[250px]">
+                    {model.path}
+                  </TableCell>
+                  <TableCell>
+                    <Button
+                      onClick={() => onSelectModel(model)}
+                      variant="secondary"
+                      size="sm"
+                    >
+                      Select
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

viewer/src/components/ui/sonner.tsx ADDED Viewed

	@@ -0,0 +1,29 @@

+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+export { Toaster };

viewer/src/components/ui/toast.tsx ADDED Viewed

	@@ -0,0 +1,127 @@

+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+import { cn } from "@/lib/utils"
+const ToastProvider = ToastPrimitives.Provider
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

viewer/src/components/ui/toaster.tsx ADDED Viewed

	@@ -0,0 +1,33 @@

+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+export function Toaster() {
+  const { toasts } = useToast()
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

viewer/src/components/ui/tooltip.tsx ADDED Viewed

	@@ -0,0 +1,28 @@

+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "@/lib/utils";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

viewer/src/contexts/DragAndDropContext.tsx ADDED Viewed

	@@ -0,0 +1,123 @@

+import React, {
+  createContext,
+  useState,
+  useEffect,
+  ReactNode,
+  useCallback,
+} from "react";
+import { processDroppedFiles } from "@/lib/UrdfDragAndDrop";
+import { useUrdf } from "@/hooks/useUrdf";
+export type DragAndDropContextType = {
+  isDragging: boolean;
+  setIsDragging: (isDragging: boolean) => void;
+  handleDrop: (e: DragEvent) => Promise<void>;
+};
+export const DragAndDropContext = createContext<
+  DragAndDropContextType | undefined
+>(undefined);
+interface DragAndDropProviderProps {
+  children: ReactNode;
+}
+export const DragAndDropProvider: React.FC<DragAndDropProviderProps> = ({
+  children,
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  // Get the URDF context
+  const { urdfProcessor, processUrdfFiles } = useUrdf();
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDragEnter = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+  const handleDragLeave = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Only set isDragging to false if we're leaving the document
+    // This prevents flickering when moving between elements
+    if (!e.relatedTarget || !(e.relatedTarget as Element).closest("html")) {
+      setIsDragging(false);
+    }
+  };
+  const handleDrop = useCallback(
+    async (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      console.log("🔄 DragAndDropContext: Drop event detected");
+      if (!e.dataTransfer || !urdfProcessor) {
+        console.error("❌ No dataTransfer or urdfProcessor available");
+        return;
+      }
+      try {
+        console.log("🔍 Processing dropped files with urdfProcessor");
+        // Process files first
+        const { availableModels, files } = await processDroppedFiles(
+          e.dataTransfer,
+          urdfProcessor
+        );
+        // Delegate further processing to UrdfContext
+        await processUrdfFiles(files, availableModels);
+      } catch (error) {
+        console.error("❌ Error in handleDrop:", error);
+      }
+    },
+    [urdfProcessor, processUrdfFiles]
+  );
+  // Set up global event listeners
+  useEffect(() => {
+    document.addEventListener("dragover", handleDragOver);
+    document.addEventListener("dragenter", handleDragEnter);
+    document.addEventListener("dragleave", handleDragLeave);
+    document.addEventListener("drop", handleDrop);
+    return () => {
+      document.removeEventListener("dragover", handleDragOver);
+      document.removeEventListener("dragenter", handleDragEnter);
+      document.removeEventListener("dragleave", handleDragLeave);
+      document.removeEventListener("drop", handleDrop);
+    };
+  }, [handleDrop]); // Re-register when handleDrop changes
+  return (
+    <DragAndDropContext.Provider
+      value={{
+        isDragging,
+        setIsDragging,
+        handleDrop,
+      }}
+    >
+      {children}
+      {isDragging && (
+        <div className="fixed inset-0 bg-primary/10 pointer-events-none z-50 flex items-center justify-center">
+          <div className="bg-background p-8 rounded-lg shadow-lg text-center">
+            <div className="text-3xl font-bold mb-4">Drop URDF Files Here</div>
+            <p className="text-muted-foreground">
+              Release to upload your robot model
+            </p>
+          </div>
+        </div>
+      )}
+    </DragAndDropContext.Provider>
+  );
+};

viewer/src/contexts/UrdfContext.tsx ADDED Viewed

	@@ -0,0 +1,495 @@

+import React, {
+  createContext,
+  useState,
+  useCallback,
+  ReactNode,
+  useRef,
+  useEffect,
+} from "react";
+import { toast } from "sonner";
+import { UrdfProcessor, readUrdfFileContent } from "@/lib/UrdfDragAndDrop";
+import { UrdfFileModel } from "@/lib/types";
+// Define the result interface for URDF detection
+interface UrdfDetectionResult {
+  hasUrdf: boolean;
+  modelName?: string;
+}
+// Define the context type
+export type UrdfContextType = {
+  urdfProcessor: UrdfProcessor | null;
+  registerUrdfProcessor: (processor: UrdfProcessor) => void;
+  onUrdfDetected: (
+    callback: (result: UrdfDetectionResult) => void
+  ) => () => void;
+  processUrdfFiles: (
+    files: Record<string, File>,
+    availableModels: string[]
+  ) => Promise<void>;
+  urdfBlobUrls: Record<string, string>;
+  alternativeUrdfModels: string[];
+  isSelectionModalOpen: boolean;
+  setIsSelectionModalOpen: (isOpen: boolean) => void;
+  urdfModelOptions: UrdfFileModel[];
+  selectUrdfModel: (model: UrdfFileModel) => void;
+  isDefaultModel: boolean;
+  setIsDefaultModel: (isDefault: boolean) => void;
+  resetToDefaultModel: () => void;
+  urdfContent: string | null;
+};
+// Create the context
+export const UrdfContext = createContext<UrdfContextType | undefined>(
+  undefined
+);
+// Props for the provider component
+interface UrdfProviderProps {
+  children: ReactNode;
+}
+export const UrdfProvider: React.FC<UrdfProviderProps> = ({ children }) => {
+  // State for URDF processor
+  const [urdfProcessor, setUrdfProcessor] = useState<UrdfProcessor | null>(
+    null
+  );
+  // State for blob URLs (replacing window.urdfBlobUrls)
+  const [urdfBlobUrls, setUrdfBlobUrls] = useState<Record<string, string>>({});
+  // State for alternative models (replacing window.alternativeUrdfModels)
+  const [alternativeUrdfModels, setAlternativeUrdfModels] = useState<string[]>(
+    []
+  );
+  // State for the URDF selection modal
+  const [isSelectionModalOpen, setIsSelectionModalOpen] = useState(false);
+  const [urdfModelOptions, setUrdfModelOptions] = useState<UrdfFileModel[]>([]);
+  // New state for centralized robot data management
+  const [isDefaultModel, setIsDefaultModel] = useState(true);
+  const [urdfContent, setUrdfContent] = useState<string | null>(null);
+  // Fetch the default URDF content when the component mounts
+  useEffect(() => {
+    // Only fetch if we don't have content and we're using the default model
+    if (isDefaultModel && !urdfContent) {
+      const fetchDefaultUrdf = async () => {
+        try {
+          // Path to the default T12 URDF file
+          const defaultUrdfPath = "/urdf/T12/urdf/T12.URDF";
+          // Fetch the URDF content
+          const response = await fetch(defaultUrdfPath);
+          if (!response.ok) {
+            throw new Error(
+              `Failed to fetch default URDF: ${response.statusText}`
+            );
+          }
+          const defaultUrdfContent = await response.text();
+          console.log(
+            `📄 Default URDF content loaded, length: ${defaultUrdfContent.length} characters`
+          );
+          // Set the URDF content in state
+          setUrdfContent(defaultUrdfContent);
+        } catch (error) {
+          console.error("❌ Error loading default URDF content:", error);
+        }
+      };
+      fetchDefaultUrdf();
+    }
+  }, [isDefaultModel, urdfContent]);
+  // Reference for callbacks
+  const urdfCallbacksRef = useRef<((result: UrdfDetectionResult) => void)[]>(
+    []
+  );
+  // Reset to default model
+  const resetToDefaultModel = useCallback(() => {
+    setIsDefaultModel(true);
+    setUrdfContent(null);
+    toast.info("Switched to default model", {
+      description: "The default T12 robot model is now displayed.",
+    });
+  }, []);
+  // Register a callback for URDF detection
+  const onUrdfDetected = useCallback(
+    (callback: (result: UrdfDetectionResult) => void) => {
+      urdfCallbacksRef.current.push(callback);
+      return () => {
+        urdfCallbacksRef.current = urdfCallbacksRef.current.filter(
+          (cb) => cb !== callback
+        );
+      };
+    },
+    []
+  );
+  // Register a URDF processor
+  const registerUrdfProcessor = useCallback((processor: UrdfProcessor) => {
+    setUrdfProcessor(processor);
+  }, []);
+  // Internal function to notify callbacks and update central state
+  const notifyUrdfCallbacks = useCallback(
+    (result: UrdfDetectionResult) => {
+      console.log("📣 Notifying URDF callbacks with result:", result);
+      // Update our internal state based on the result
+      if (result.hasUrdf) {
+        // Always ensure we set isDefaultModel to false when we have a URDF
+        setIsDefaultModel(false);
+        if (result.modelName) {
+          setUrdfContent(result.modelName);
+        }
+        // Set description if available
+        if (result.modelName) {
+          setUrdfContent(
+            "A detailed 3D model of a robotic system with articulated joints and components."
+          );
+        }
+      } else {
+        // If no URDF, reset to default
+        resetToDefaultModel();
+      }
+      // Call all registered callbacks
+      urdfCallbacksRef.current.forEach((callback) => callback(result));
+    },
+    [resetToDefaultModel]
+  );
+  // Helper function to process the selected URDF model
+  const processSelectedUrdf = useCallback(
+    async (model: UrdfFileModel) => {
+      if (!urdfProcessor) return;
+      // Find the file in our files record
+      const files = Object.values(urdfBlobUrls)
+        .filter((url) => url === model.blobUrl)
+        .map((url) => {
+          const path = Object.keys(urdfBlobUrls).find(
+            (key) => urdfBlobUrls[key] === url
+          );
+          return path ? { path, url } : null;
+        })
+        .filter((item) => item !== null);
+      if (files.length === 0) {
+        console.error("❌ Could not find file for selected URDF model");
+        return;
+      }
+      // Show a toast notification that we're parsing the URDF
+      const parsingToast = toast.loading("Analyzing URDF model...", {
+        description: "Extracting robot information",
+        duration: 10000, // Long duration since we'll dismiss it manually
+      });
+      try {
+        // Get the file from our record
+        const filePath = files[0]?.path;
+        if (!filePath || !urdfBlobUrls[filePath]) {
+          throw new Error("File not found in records");
+        }
+        // Get the actual File object
+        const response = await fetch(model.blobUrl);
+        const blob = await response.blob();
+        const file = new File(
+          [blob],
+          filePath.split("/").pop() || "model.urdf",
+          {
+            type: "application/xml",
+          }
+        );
+        // Read the URDF content
+        const urdfContent = await readUrdfFileContent(file);
+        console.log(
+          `📏 URDF content read, length: ${urdfContent.length} characters`
+        );
+        // Store the URDF content in state
+        setUrdfContent(urdfContent);
+        // Dismiss the toast
+        toast.dismiss(parsingToast);
+        // Always set isDefaultModel to false when processing a custom URDF
+        setIsDefaultModel(false);
+      } catch (error) {
+        // Error case
+        console.error("❌ Error processing selected URDF:", error);
+        toast.dismiss(parsingToast);
+        toast.error("Error analyzing URDF", {
+          description: `Error: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+          duration: 3000,
+        });
+        // Keep showing the custom model even if parsing failed
+        // No need to reset to default unless user explicitly chooses to
+      }
+    },
+    [urdfBlobUrls, urdfProcessor]
+  );
+  // Function to handle selecting a URDF model from the modal
+  const selectUrdfModel = useCallback(
+    (model: UrdfFileModel) => {
+      if (!urdfProcessor) {
+        console.error("❌ No URDF processor available");
+        return;
+      }
+      console.log(`🤖 Selected model: ${model.name || model.path}`);
+      // Close the modal
+      setIsSelectionModalOpen(false);
+      // Extract model name
+      const modelName =
+        model.name ||
+        model.path
+          .split("/")
+          .pop()
+          ?.replace(/\.urdf$/i, "") ||
+        "Unknown";
+      // Load the selected URDF model
+      urdfProcessor.loadUrdf(model.blobUrl);
+      // Update our state immediately even before parsing
+      setIsDefaultModel(false);
+      // Show a toast notification that we're loading the model
+      toast.info(`Loading model: ${modelName}`, {
+        description: "Preparing 3D visualization",
+        duration: 2000,
+      });
+      // Notify callbacks about the selection before parsing
+      notifyUrdfCallbacks({
+        hasUrdf: true,
+        modelName,
+      });
+      // Try to parse the model - this will update the UI when complete
+      processSelectedUrdf(model);
+    },
+    [urdfProcessor, notifyUrdfCallbacks, processSelectedUrdf]
+  );
+  // Process URDF files - moved from DragAndDropContext
+  const processUrdfFiles = useCallback(
+    async (files: Record<string, File>, availableModels: string[]) => {
+      // Clear previous blob URLs to prevent memory leaks
+      Object.values(urdfBlobUrls).forEach(URL.revokeObjectURL);
+      setUrdfBlobUrls({});
+      setAlternativeUrdfModels([]);
+      setUrdfModelOptions([]);
+      try {
+        // Check if we have any URDF files
+        if (availableModels.length > 0 && urdfProcessor) {
+          console.log(
+            `🤖 Found ${availableModels.length} URDF models:`,
+            availableModels
+          );
+          // Create blob URLs for all models
+          const newUrdfBlobUrls: Record<string, string> = {};
+          availableModels.forEach((path) => {
+            if (files[path]) {
+              newUrdfBlobUrls[path] = URL.createObjectURL(files[path]);
+            }
+          });
+          setUrdfBlobUrls(newUrdfBlobUrls);
+          // Save alternative models for reference
+          setAlternativeUrdfModels(availableModels);
+          // Create model options for the selection modal
+          const modelOptions: UrdfFileModel[] = availableModels.map((path) => {
+            const fileName = path.split("/").pop() || "";
+            const modelName = fileName.replace(/\.urdf$/i, "");
+            return {
+              path,
+              blobUrl: newUrdfBlobUrls[path],
+              name: modelName,
+            };
+          });
+          setUrdfModelOptions(modelOptions);
+          // If there's only one model, use it directly
+          if (availableModels.length === 1) {
+            // Extract model name from the URDF file
+            const fileName = availableModels[0].split("/").pop() || "";
+            const modelName = fileName.replace(/\.urdf$/i, "");
+            console.log(`📄 Using model: ${modelName} (${fileName})`);
+            // Use the blob URL instead of the file path
+            const blobUrl = newUrdfBlobUrls[availableModels[0]];
+            if (blobUrl) {
+              console.log(`🔗 Using blob URL for URDF: ${blobUrl}`);
+              urdfProcessor.loadUrdf(blobUrl);
+              // Immediately update model state
+              setIsDefaultModel(false);
+              // Process the URDF file for parsing
+              if (files[availableModels[0]]) {
+                console.log(
+                  "📄 Reading URDF content for edge function parsing..."
+                );
+                // Show a toast notification that we're parsing the URDF
+                const parsingToast = toast.loading("Analyzing URDF model...", {
+                  description: "Extracting robot information",
+                  duration: 10000, // Long duration since we'll dismiss it manually
+                });
+                try {
+                  const urdfContent = await readUrdfFileContent(
+                    files[availableModels[0]]
+                  );
+                  console.log(
+                    `📏 URDF content read, length: ${urdfContent.length} characters`
+                  );
+                  // Store the URDF content in state
+                  setUrdfContent(urdfContent);
+                  // Dismiss the parsing toast
+                  toast.dismiss(parsingToast);
+                } catch (parseError) {
+                  console.error("❌ Error parsing URDF:", parseError);
+                  toast.dismiss(parsingToast);
+                  toast.error("Error analyzing URDF", {
+                    description: `Error: ${
+                      parseError instanceof Error
+                        ? parseError.message
+                        : String(parseError)
+                    }`,
+                    duration: 3000,
+                  });
+                  // Still notify callbacks without parsed data
+                  notifyUrdfCallbacks({
+                    hasUrdf: true,
+                    modelName,
+                  });
+                }
+              } else {
+                console.error(
+                  "❌ Could not find file for URDF model:",
+                  availableModels[0]
+                );
+                console.log("📦 Available files:", Object.keys(files));
+                // Still notify callbacks without parsed data
+                notifyUrdfCallbacks({
+                  hasUrdf: true,
+                  modelName,
+                });
+              }
+            } else {
+              console.warn(
+                `⚠️ No blob URL found for ${availableModels[0]}, using path directly`
+              );
+              urdfProcessor.loadUrdf(availableModels[0]);
+              // Update the state even without a blob URL
+              setIsDefaultModel(false);
+            }
+          } else {
+            // Multiple URDF files found, show selection modal
+            console.log(
+              "📋 Multiple URDF files found, showing selection modal"
+            );
+            setIsSelectionModalOpen(true);
+            // Notify that URDF files are available but selection is needed
+            notifyUrdfCallbacks({
+              hasUrdf: true,
+              modelName: "Multiple models available",
+            });
+          }
+        } else {
+          console.warn(
+            "❌ No URDF models found in dropped files or no processor available"
+          );
+          notifyUrdfCallbacks({ hasUrdf: false });
+          // Reset to default model when no URDF files are found
+          resetToDefaultModel();
+          toast.error("No URDF file found", {
+            description: "Please upload a folder containing a .urdf file.",
+            duration: 3000,
+          });
+        }
+      } catch (error) {
+        console.error("❌ Error processing URDF files:", error);
+        toast.error("Error processing files", {
+          description: `Error: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+          duration: 3000,
+        });
+        // Reset to default model on error
+        resetToDefaultModel();
+      }
+    },
+    [notifyUrdfCallbacks, urdfBlobUrls, urdfProcessor, resetToDefaultModel]
+  );
+  // Clean up blob URLs when component unmounts
+  React.useEffect(() => {
+    return () => {
+      Object.values(urdfBlobUrls).forEach(URL.revokeObjectURL);
+    };
+  }, [urdfBlobUrls]);
+  // Create the context value
+  const contextValue: UrdfContextType = {
+    urdfProcessor,
+    registerUrdfProcessor,
+    onUrdfDetected,
+    processUrdfFiles,
+    urdfBlobUrls,
+    alternativeUrdfModels,
+    isSelectionModalOpen,
+    setIsSelectionModalOpen,
+    urdfModelOptions,
+    selectUrdfModel,
+    // New properties for centralized robot data management
+    isDefaultModel,
+    setIsDefaultModel,
+    resetToDefaultModel,
+    urdfContent,
+  };
+  return (
+    <UrdfContext.Provider value={contextValue}>{children}</UrdfContext.Provider>
+  );
+};

viewer/src/hooks/use-toast.ts ADDED Viewed

	@@ -0,0 +1,191 @@

+import * as React from "react"
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+let count = 0
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+type ActionType = typeof actionTypes
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+interface State {
+  toasts: ToasterToast[]
+}
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+  toastTimeouts.set(toastId, timeout)
+}
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+const listeners: Array<(state: State) => void> = []
+let memoryState: State = { toasts: [] }
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+type Toast = Omit<ToasterToast, "id">
+function toast({ ...props }: Toast) {
+  const id = genId()
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+export { useToast, toast }

viewer/src/hooks/useDragAndDrop.tsx ADDED Viewed

	@@ -0,0 +1,14 @@

+import {
+  DragAndDropContextType,
+  DragAndDropContext,
+} from "@/contexts/DragAndDropContext";
+import { useContext } from "react";
+// Custom hook to use the DragAndDrop context
+export const useDragAndDrop = (): DragAndDropContextType => {
+  const context = useContext(DragAndDropContext);
+  if (context === undefined) {
+    throw new Error("useDragAndDrop must be used within a DragAndDropProvider");
+  }
+  return context;
+};

viewer/src/hooks/useUrdf.ts ADDED Viewed

	@@ -0,0 +1,11 @@

+import { UrdfContextType, UrdfContext } from "@/contexts/UrdfContext";
+import { useContext } from "react";
+// Custom hook to use the URDF context
+export const useUrdf = (): UrdfContextType => {
+  const context = useContext(UrdfContext);
+  if (context === undefined) {
+    throw new Error("useUrdf must be used within a UrdfProvider");
+  }
+  return context;
+};

viewer/src/index.css ADDED Viewed

	@@ -0,0 +1,68 @@

+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

viewer/src/lib/UrdfDragAndDrop.ts ADDED Viewed

	@@ -0,0 +1,413 @@

+/**
+ * URDF Drag and Drop Utility
+ *
+ * This file provides functionality for handling drag and drop of URDF folders.
+ * It converts the dropped files into accessible blobs for visualization.
+ */
+/**
+ * Converts a DataTransfer structure into an object with all paths and files.
+ * @param dataTransfer The DataTransfer object from the drop event
+ * @returns A promise that resolves with the file structure object
+ */
+export function dataTransferToFiles(
+  dataTransfer: DataTransfer
+): Promise<Record<string, File>> {
+  if (!(dataTransfer instanceof DataTransfer)) {
+    throw new Error('Data must be of type "DataTransfer"');
+  }
+  const files: Record<string, File> = {};
+  /**
+   * Recursively processes a directory entry to extract all files
+   * Using type 'unknown' and then type checking for safety with WebKit's non-standard API
+   */
+  function recurseDirectory(item: unknown): Promise<void> {
+    // Type guard for file entries
+    const isFileEntry = (
+      entry: unknown
+    ): entry is {
+      isFile: boolean;
+      fullPath: string;
+      file: (callback: (file: File) => void) => void;
+    } =>
+      entry !== null &&
+      typeof entry === "object" &&
+      "isFile" in entry &&
+      typeof (entry as Record<string, unknown>).file === "function" &&
+      "fullPath" in entry;
+    // Type guard for directory entries
+    const isDirEntry = (
+      entry: unknown
+    ): entry is {
+      isFile: boolean;
+      createReader: () => {
+        readEntries: (callback: (entries: unknown[]) => void) => void;
+      };
+    } =>
+      entry !== null &&
+      typeof entry === "object" &&
+      "isFile" in entry &&
+      typeof (entry as Record<string, unknown>).createReader === "function";
+    if (isFileEntry(item) && item.isFile) {
+      return new Promise((resolve) => {
+        item.file((file: File) => {
+          files[item.fullPath] = file;
+          resolve();
+        });
+      });
+    } else if (isDirEntry(item) && !item.isFile) {
+      const reader = item.createReader();
+      return new Promise((resolve) => {
+        const promises: Promise<void>[] = [];
+        // Exhaustively read all directory entries
+        function readNextEntries() {
+          reader.readEntries((entries: unknown[]) => {
+            if (entries.length === 0) {
+              Promise.all(promises).then(() => resolve());
+            } else {
+              entries.forEach((entry) => {
+                promises.push(recurseDirectory(entry));
+              });
+              readNextEntries();
+            }
+          });
+        }
+        readNextEntries();
+      });
+    }
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    // Process dropped items
+    const dtitems = dataTransfer.items && Array.from(dataTransfer.items);
+    const dtfiles = Array.from(dataTransfer.files);
+    if (dtitems && dtitems.length && "webkitGetAsEntry" in dtitems[0]) {
+      const promises: Promise<void>[] = [];
+      for (let i = 0; i < dtitems.length; i++) {
+        const item = dtitems[i] as unknown as {
+          webkitGetAsEntry: () => unknown;
+        };
+        if (typeof item.webkitGetAsEntry === "function") {
+          const entry = item.webkitGetAsEntry();
+          if (entry) {
+            promises.push(recurseDirectory(entry));
+          }
+        }
+      }
+      Promise.all(promises).then(() => resolve(files));
+    } else {
+      // Add a '/' prefix to match the file directory entry on webkit browsers
+      dtfiles
+        .filter((f) => f.size !== 0)
+        .forEach((f) => (files["/" + f.name] = f));
+      resolve(files);
+    }
+  });
+}
+/**
+ * Cleans a file path by removing '..' and '.' tokens and normalizing slashes
+ */
+export function cleanFilePath(path: string): string {
+  return path
+    .replace(/\\/g, "/")
+    .split(/\//g)
+    .reduce((acc, el) => {
+      if (el === "..") acc.pop();
+      else if (el !== ".") acc.push(el);
+      return acc;
+    }, [] as string[])
+    .join("/");
+}
+/**
+ * Interface representing the structure of an URDF processor
+ */
+export interface UrdfProcessor {
+  loadUrdf: (path: string) => void;
+  setUrlModifierFunc: (func: (url: string) => string) => void;
+  getPackage: () => string;
+}
+// Reference to hold the package path
+const packageRef = { current: "" };
+/**
+ * Reads the content of a URDF file
+ * @param file The URDF file object
+ * @returns A promise that resolves with the content of the file as a string
+ */
+export function readUrdfFileContent(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      if (event.target && event.target.result) {
+        resolve(event.target.result as string);
+      } else {
+        reject(new Error("Failed to read URDF file content"));
+      }
+    };
+    reader.onerror = () => reject(new Error("Error reading URDF file"));
+    reader.readAsText(file);
+  });
+}
+/**
+ * Downloads a zip file from a URL and extracts its contents
+ * @param zipUrl URL of the zip file to download
+ * @param urdfProcessor The URDF processor to use for loading
+ * @returns A promise that resolves with the extraction results
+ */
+export async function downloadAndExtractZip(
+  zipUrl: string,
+  urdfProcessor: UrdfProcessor
+): Promise<{
+  files: Record<string, File>;
+  availableModels: string[];
+  blobUrls: Record<string, string>;
+}> {
+  console.log("🔄 Downloading zip file from:", zipUrl);
+  try {
+    // Download the zip file
+    const response = await fetch(zipUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to download zip: ${response.statusText}`);
+    }
+    const zipBlob = await response.blob();
+    // Load JSZip dynamically since it's much easier to work with than manual Blob handling
+    // We use dynamic import to avoid adding a dependency
+    const JSZip = (await import('jszip')).default;
+    const zip = new JSZip();
+    // Load the zip content
+    const contents = await zip.loadAsync(zipBlob);
+    // Convert zip contents to files
+    const files: Record<string, File> = {};
+    const filePromises: Promise<void>[] = [];
+    // Process each file in the zip
+    contents.forEach((relativePath, zipEntry) => {
+      if (!zipEntry.dir) {
+        const promise = zipEntry.async('blob').then(blob => {
+          // Create a file with the proper name and path
+          const path = '/' + relativePath;
+          files[path] = new File([blob], relativePath.split('/').pop() || 'unknown', {
+            type: getMimeType(relativePath.split('.').pop() || '')
+          });
+        });
+        filePromises.push(promise);
+      }
+    });
+    // Wait for all files to be processed
+    await Promise.all(filePromises);
+    // Get all file paths and clean them
+    const fileNames = Object.keys(files).map((n) => cleanFilePath(n));
+    // Filter all files ending in URDF
+    const availableModels = fileNames.filter((n) => /urdf$/i.test(n));
+    // Create blob URLs for URDF files
+    const blobUrls: Record<string, string> = {};
+    availableModels.forEach((path) => {
+      blobUrls[path] = URL.createObjectURL(files[path]);
+    });
+    // Extract the package base path from the first URDF model for reference
+    let packageBasePath = "";
+    if (availableModels.length > 0) {
+      // Extract the main directory path (e.g., '/cassie_description/')
+      const firstModel = availableModels[0];
+      const packageMatch = firstModel.match(/^(\/[^/]+\/)/);
+      if (packageMatch && packageMatch[1]) {
+        packageBasePath = packageMatch[1];
+      }
+    }
+    // Store the package path for future reference
+    const packagePathRef = packageBasePath;
+    urdfProcessor.setUrlModifierFunc((url) => {
+      // Find the matching file given the requested URL
+      // Store package reference for future use
+      if (packagePathRef) {
+        packageRef.current = packagePathRef;
+      }
+      // Simple approach: just find the first file that matches the end of the URL
+      const cleaned = cleanFilePath(url);
+      // Get the filename from the URL
+      const urlFilename = cleaned.split("/").pop() || "";
+      // Find the first file that ends with this filename
+      let fileName = fileNames.find((name) => name.endsWith(urlFilename));
+      // If no match found, just take the first file with a similar extension
+      if (!fileName && urlFilename.includes(".")) {
+        const extension = "." + urlFilename.split(".").pop();
+        fileName = fileNames.find((name) => name.endsWith(extension));
+      }
+      if (fileName !== undefined && fileName !== null) {
+        // Extract file extension for content type
+        const fileExtension = fileName.split(".").pop()?.toLowerCase() || "";
+        // Create blob URL with extension in the searchParams to help with format detection
+        const blob = new Blob([files[fileName]], {
+          type: getMimeType(fileExtension),
+        });
+        const blobUrl = URL.createObjectURL(blob) + "#." + fileExtension;
+        // Don't revoke immediately, wait for the mesh to be loaded
+        setTimeout(() => URL.revokeObjectURL(blobUrl), 5000);
+        return blobUrl;
+      }
+      console.warn(`No matching file found for: ${url}`);
+      return url;
+    });
+    return {
+      files,
+      availableModels,
+      blobUrls,
+    };
+  } catch (error) {
+    console.error("❌ Error downloading or extracting zip:", error);
+    throw error;
+  }
+}
+/**
+ * Processes dropped files and returns information about available URDF models
+ */
+export async function processDroppedFiles(
+  dataTransfer: DataTransfer,
+  urdfProcessor: UrdfProcessor
+): Promise<{
+  files: Record<string, File>;
+  availableModels: string[];
+  blobUrls: Record<string, string>;
+}> {
+  // Reset the package reference
+  packageRef.current = "";
+  // Convert dropped files into a structured format
+  const files = await dataTransferToFiles(dataTransfer);
+  // Get all file paths and clean them
+  const fileNames = Object.keys(files).map((n) => cleanFilePath(n));
+  // Filter all files ending in URDF
+  const availableModels = fileNames.filter((n) => /urdf$/i.test(n));
+  // Create blob URLs for URDF files
+  const blobUrls: Record<string, string> = {};
+  availableModels.forEach((path) => {
+    blobUrls[path] = URL.createObjectURL(files[path]);
+  });
+  // Extract the package base path from the first URDF model for reference
+  let packageBasePath = "";
+  if (availableModels.length > 0) {
+    // Extract the main directory path (e.g., '/cassie_description/')
+    const firstModel = availableModels[0];
+    const packageMatch = firstModel.match(/^(\/[^/]+\/)/);
+    if (packageMatch && packageMatch[1]) {
+      packageBasePath = packageMatch[1];
+    }
+  }
+  // Store the package path for future reference
+  const packagePathRef = packageBasePath;
+  urdfProcessor.setUrlModifierFunc((url) => {
+    // Find the matching file given the requested URL
+    // Store package reference for future use
+    if (packagePathRef) {
+      packageRef.current = packagePathRef;
+    }
+    // Simple approach: just find the first file that matches the end of the URL
+    const cleaned = cleanFilePath(url);
+    // Get the filename from the URL
+    const urlFilename = cleaned.split("/").pop() || "";
+    // Find the first file that ends with this filename
+    let fileName = fileNames.find((name) => name.endsWith(urlFilename));
+    // If no match found, just take the first file with a similar extension
+    if (!fileName && urlFilename.includes(".")) {
+      const extension = "." + urlFilename.split(".").pop();
+      fileName = fileNames.find((name) => name.endsWith(extension));
+    }
+    if (fileName !== undefined && fileName !== null) {
+      // Extract file extension for content type
+      const fileExtension = fileName.split(".").pop()?.toLowerCase() || "";
+      // Create blob URL with extension in the searchParams to help with format detection
+      const blob = new Blob([files[fileName]], {
+        type: getMimeType(fileExtension),
+      });
+      const blobUrl = URL.createObjectURL(blob) + "#." + fileExtension;
+      // Don't revoke immediately, wait for the mesh to be loaded
+      setTimeout(() => URL.revokeObjectURL(blobUrl), 5000);
+      return blobUrl;
+    }
+    console.warn(`No matching file found for: ${url}`);
+    return url;
+  });
+  return {
+    files,
+    availableModels,
+    blobUrls,
+  };
+}
+/**
+ * Get the MIME type for a file extension
+ */
+function getMimeType(extension: string): string {
+  switch (extension.toLowerCase()) {
+    case "stl":
+      return "model/stl";
+    case "obj":
+      return "model/obj";
+    case "gltf":
+    case "glb":
+      return "model/gltf+json";
+    case "dae":
+      return "model/vnd.collada+xml";
+    case "urdf":
+      return "application/xml";
+    default:
+      return "application/octet-stream";
+  }
+}

viewer/src/lib/meshLoaders.ts ADDED Viewed

	@@ -0,0 +1,94 @@

+import {
+  LoadingManager,
+  MeshPhongMaterial,
+  Mesh,
+  Color,
+  Object3D,
+  Group,
+  BufferGeometry,
+} from "three";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { ColladaLoader } from "three/examples/jsm/loaders/ColladaLoader.js";
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
+/**
+ * Loads mesh files of different formats
+ * @param path The path to the mesh file
+ * @param manager The THREE.js loading manager
+ * @param done Callback function when loading is complete
+ */
+export const loadMeshFile = (
+  path: string,
+  manager: LoadingManager,
+  done: (result: Object3D | Group | Mesh | null, err?: Error) => void
+) => {
+  // First try to get extension from the original path
+  let ext = path.split(/\./g).pop()?.toLowerCase();
+  // If the URL is a blob URL with a fragment containing the extension, use that
+  if (path.startsWith("blob:") && path.includes("#.")) {
+    const fragmentExt = path.split("#.").pop();
+    if (fragmentExt) {
+      ext = fragmentExt.toLowerCase();
+    }
+  }
+  // If we can't determine extension, try to check Content-Type
+  if (!ext) {
+    console.error(`Could not determine file extension for: ${path}`);
+    done(null, new Error(`Unsupported file format: ${path}`));
+    return;
+  }
+  switch (ext) {
+    case "gltf":
+    case "glb":
+      new GLTFLoader(manager).load(
+        path,
+        (result) => done(result.scene),
+        null,
+        (err) => done(null, err as Error)
+      );
+      break;
+    case "obj":
+      new OBJLoader(manager).load(
+        path,
+        (result) => done(result),
+        null,
+        (err) => done(null, err as Error)
+      );
+      break;
+    case "dae":
+      new ColladaLoader(manager).load(
+        path,
+        (result) => done(result.scene),
+        null,
+        (err) => done(null, err as Error)
+      );
+      break;
+    case "stl":
+      new STLLoader(manager).load(
+        path,
+        (result) => {
+          const material = new MeshPhongMaterial();
+          const mesh = new Mesh(result, material);
+          done(mesh);
+        },
+        null,
+        (err) => done(null, err as Error)
+      );
+      break;
+    default:
+      done(null, new Error(`Unsupported file format: ${ext}`));
+  }
+};
+/**
+ * Creates a color in THREE.js format from a CSS color string
+ * @param color The CSS color string
+ * @returns A THREE.js Color
+ */
+export const createColor = (color: string): Color => {
+  return new Color(color);
+};

viewer/src/lib/types.ts ADDED Viewed

	@@ -0,0 +1,97 @@

+/**
+ * Shared type definitions for URDF parsing from supabase edge function
+ */
+export interface UrdfData {
+  name?: string;
+  description?: string;
+  mass?: number;
+  dofs?: number;
+  joints?: {
+    revolute?: number;
+    prismatic?: number;
+    continuous?: number;
+    fixed?: number;
+    other?: number;
+  };
+  links?: {
+    name?: string;
+    mass?: number;
+  }[];
+  materials?: {
+    name?: string;
+    percentage?: number;
+  }[];
+}
+/**
+ * Interface representing a URDF file model
+ */
+export interface UrdfFileModel {
+  /**
+   * Path to the URDF file
+   */
+  path: string;
+  /**
+   * Blob URL for accessing the file
+   */
+  blobUrl: string;
+  /**
+   * Name of the model extracted from the file path
+   */
+  name?: string;
+}
+/**
+ * Joint animation configuration interface
+ */
+export interface JointAnimationConfig {
+  /** Joint name in the URDF */
+  name: string;
+  /** Animation type (sine, linear, etc.) */
+  type: "sine" | "linear" | "constant";
+  /** Minimum value for the joint */
+  min: number;
+  /** Maximum value for the joint */
+  max: number;
+  /** Speed multiplier for the animation (lower = slower) */
+  speed: number;
+  /** Phase offset in radians */
+  offset: number;
+  /** Whether angles are in degrees (will be converted to radians) */
+  isDegrees?: boolean;
+  /** For more complex movements, a custom function that takes time and returns a value between 0 and 1 */
+  customEasing?: (time: number) => number;
+}
+/**
+ * Robot animation configuration interface
+ */
+export interface RobotAnimationConfig {
+  /** Array of joint configurations */
+  joints: JointAnimationConfig[];
+  /** Global speed multiplier */
+  speedMultiplier?: number;
+}
+export interface AnimationRequest {
+  robotName: string;
+  urdfContent: string;
+  description: string; // Natural language description of the desired animation
+}
+export interface ContentItem {
+  id: string;
+  title: string;
+  imageUrl: string;
+  description?: string;
+  categories: string[];
+  urdfPath: string;
+}
+export interface Category {
+  id: string;
+  name: string;
+}

viewer/src/lib/urdfViewerHelpers.ts ADDED Viewed

	@@ -0,0 +1,161 @@

+import { LoadingManager, Object3D } from "three";
+import { toast } from "sonner";
+import { loadMeshFile } from "./meshLoaders";
+import { URDFViewerElement } from "./urdfAnimationHelpers";
+// Extended URDF Viewer Element with mesh loading capability
+export interface ExtendedURDFViewerElement extends URDFViewerElement {
+  loadMeshFunc: (
+    path: string,
+    manager: LoadingManager,
+    done: (result: Object3D | null, err?: Error) => void
+  ) => void;
+}
+/**
+ * Creates and configures a URDF viewer element
+ */
+export function createUrdfViewer(
+  container: HTMLDivElement,
+  isDarkMode: boolean
+): ExtendedURDFViewerElement {
+  // Clear any existing content
+  container.innerHTML = "";
+  // Create the urdf-viewer element
+  const viewer = document.createElement(
+    "urdf-viewer"
+  ) as ExtendedURDFViewerElement;
+  viewer.classList.add("w-full", "h-full");
+  // Add the element to the container
+  container.appendChild(viewer);
+  // Set initial viewer properties
+  viewer.setAttribute("up", "Z");
+  viewer.setAttribute("highlight-color", isDarkMode ? "#5b9aff" : "#3373ff");
+  viewer.setAttribute("ambient-color", isDarkMode ? "#202a30" : "#cfd8dc");
+  viewer.setAttribute("auto-redraw", "true");
+  viewer.setAttribute("display-shadow", ""); // Enable shadows
+  return viewer;
+}
+/**
+ * Setup mesh loading function for URDF viewer
+ */
+export function setupMeshLoader(
+  viewer: ExtendedURDFViewerElement,
+  urlModifierFunc: ((url: string) => string) | null
+): void {
+  if ("loadMeshFunc" in viewer) {
+    viewer.loadMeshFunc = (
+      path: string,
+      manager: LoadingManager,
+      done: (result: Object3D | null, err?: Error) => void
+    ) => {
+      // Apply URL modifier if available (for custom uploads)
+      const modifiedPath = urlModifierFunc ? urlModifierFunc(path) : path;
+      // If loading fails, log the error but continue
+      try {
+        loadMeshFile(modifiedPath, manager, (result, err) => {
+          if (err) {
+            console.warn(`Error loading mesh ${modifiedPath}:`, err);
+            // Try to continue with other meshes
+            done(null);
+          } else {
+            done(result);
+          }
+        });
+      } catch (err) {
+        console.error(`Exception loading mesh ${modifiedPath}:`, err);
+        done(null, err as Error);
+      }
+    };
+  }
+}
+/**
+ * Setup event handlers for joint highlighting
+ */
+export function setupJointHighlighting(
+  viewer: URDFViewerElement,
+  setHighlightedJoint: (joint: string | null) => void
+): () => void {
+  const onJointMouseover = (e: Event) => {
+    const customEvent = e as CustomEvent;
+    setHighlightedJoint(customEvent.detail);
+  };
+  const onJointMouseout = () => {
+    setHighlightedJoint(null);
+  };
+  // Add event listeners
+  viewer.addEventListener("joint-mouseover", onJointMouseover);
+  viewer.addEventListener("joint-mouseout", onJointMouseout);
+  // Return cleanup function
+  return () => {
+    viewer.removeEventListener("joint-mouseover", onJointMouseover);
+    viewer.removeEventListener("joint-mouseout", onJointMouseout);
+  };
+}
+/**
+ * Setup model loading and error handling
+ */
+export function setupModelLoading(
+  viewer: URDFViewerElement,
+  urdfPath: string,
+  packagePath: string,
+  setCustomUrdfPath: (path: string) => void,
+  alternativeUrdfModels: string[] = [] // Add parameter for alternative models
+): () => void {
+  // Add XML content type hint for blob URLs
+  const loadPath =
+    urdfPath.startsWith("blob:") && !urdfPath.includes("#.")
+      ? urdfPath + "#.urdf" // Add extension hint if it's a blob URL
+      : urdfPath;
+  // Set the URDF path
+  viewer.setAttribute("urdf", loadPath);
+  viewer.setAttribute("package", packagePath);
+  // Handle error loading
+  const onLoadError = () => {
+    toast.error("Failed to load model", {
+      description: "There was an error loading the URDF model.",
+      duration: 3000,
+    });
+    // Use the provided alternativeUrdfModels instead of the global window object
+    if (alternativeUrdfModels.length > 0) {
+      const nextModel = alternativeUrdfModels[0];
+      if (nextModel) {
+        setCustomUrdfPath(nextModel);
+        toast.info("Trying alternative model...", {
+          description: `First model failed to load. Trying ${
+            nextModel.split("/").pop() || "alternative model"
+          }`,
+          duration: 2000,
+        });
+      }
+    }
+  };
+  viewer.addEventListener("error", onLoadError);
+  // Return cleanup function
+  return () => {
+    viewer.removeEventListener("error", onLoadError);
+  };
+}
+// For backward compatibility - to be removed in the future
+declare global {
+  interface Window {
+    alternativeUrdfModels?: string[];
+  }
+}

viewer/src/lib/utils.ts ADDED Viewed

	@@ -0,0 +1,6 @@

+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

viewer/src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

viewer/src/pages/UrdfView.tsx ADDED Viewed

	@@ -0,0 +1,33 @@

+import React, { useEffect } from "react";
+import { UrdfSelectionModalContainer } from "@/components/UrdfSelectionModalContainer";
+import { useUrdf } from "@/hooks/useUrdf";
+import URDFViewer from "@/components/UrdfViewer";
+// This is needed to make TypeScript recognize webkitdirectory as a valid attribute
+declare module "react" {
+  interface InputHTMLAttributes<T> extends React.HTMLAttributes<T> {
+    directory?: string;
+    webkitdirectory?: string;
+  }
+}
+const UrdfView: React.FC = () => {
+  // Get the setIsDefaultModel function from the useUrdf hook
+  const { setIsDefaultModel } = useUrdf();
+  // Set isDefaultModel to true when the component mounts
+  useEffect(() => {
+    setIsDefaultModel(true);
+    console.log("🤖 Playground opened: Setting default model to true");
+  }, [setIsDefaultModel]);
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      {/* Main content that fills the container */}
+      <UrdfSelectionModalContainer />
+      <div className="w-full h-full">
+        <URDFViewer />
+      </div>
+    </div>
+  );
+};
+export default UrdfView;

viewer/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="vite/client" />

viewer/tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,33 @@

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    /* Path alias configuration */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

viewer/tsconfig.json ADDED Viewed

	@@ -0,0 +1,13 @@

+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

viewer/tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

viewer/vite.config.ts ADDED Viewed

	@@ -0,0 +1,13 @@

+import { defineConfig } from "vite";
+import path from "path";
+import react from "@vitejs/plugin-react";
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});