Enhance HRIStudio with immersive experiment designer and comprehensive documentation updates

- Introduced a new immersive experiment designer using React Flow, providing a professional-grade visual flow editor for creating experiments.
- Added detailed documentation for the flow designer connections and ordering system, emphasizing its advantages and implementation details.
- Updated existing documentation to reflect the latest features and improvements, including a streamlined README and quick reference guide.
- Consolidated participant type definitions into a new file for better organization and clarity.

Features:
- Enhanced user experience with a node-based interface for experiment design.
- Comprehensive documentation supporting new features and development practices.

Breaking Changes: None - existing functionality remains intact.

src/app/(dashboard)/studies/[id]/participants/page.tsx

@@ -2,13 +2,13 @@
 
 import { useParams } from "next/navigation";
 import { Suspense, useEffect } from "react";
-import { ManagementPageLayout } from "~/components/ui/page-layout";
 import { ParticipantsTable } from "~/components/participants/ParticipantsTable";
+import { ManagementPageLayout } from "~/components/ui/page-layout";
 import { useActiveStudy } from "~/hooks/useActiveStudy";
 
 export default function StudyParticipantsPage() {
   const params = useParams();
-  const studyId = params.id as string;
+  const studyId = typeof params.id === "string" ? params.id : "";
   const { setActiveStudy, activeStudy } = useActiveStudy();
 
   // Set the active study if it doesn't match the current route
@@ -25,7 +25,7 @@ export default function StudyParticipantsPage() {
       breadcrumb={[
         { label: "Dashboard", href: "/dashboard" },
         { label: "Studies", href: "/studies" },
-        { label: activeStudy?.title || "Study", href: `/studies/${studyId}` },
+        { label: activeStudy?.title ?? "Study", href: `/studies/${studyId}` },
         { label: "Participants" },
       ]}
       createButton={{