EarthyScience · lazarusA · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026
diff --git a/package.json b/package.json
@@ -47,19 +47,12 @@
     "lint": "eslint . --max-warnings=100"
   },
   "dependencies": {
+    "@base-ui/react": "^1.3.0",
     "@earthyscience/netcdf4-wasm": "0.2.3",
     "@ffmpeg/ffmpeg": "^0.12.15",
     "@ffmpeg/util": "^0.12.2",
+    "@hookform/resolvers": "^5.2.2",
     "@monaco-editor/react": "^4.7.0",
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-spring/three": "^10.0.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
@@ -69,23 +62,31 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
     "fflate": "^0.8.2",
     "gsap": "^3.13.0",
+    "input-otp": "^1.4.2",
     "js-colormaps-es": "^0.0.5",
     "lucide-react": "^0.562.0",
     "next": "16.1.6",
     "next-themes": "^0.4.6",
-    "radix-ui": "latest",
+    "radix-ui": "1.4.3",
     "react": "^19.0.0",
+    "react-day-picker": "^9.14.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.71.2",
     "react-icons": "^5.5.0",
+    "react-resizable-panels": "^4.7.3",
+    "recharts": "2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.0",
     "three": "^0.182.0",
     "three-stdlib": "^2.36.0",
     "vaul": "^1.1.2",
     "webgpu-utils": "^1.11.0",
     "zarrita": "^0.5.4",
+    "zod": "^4.3.6",
     "zustand": "^5.0.8"
   },
   "devDependencies": {

diff --git a/src/app/BrowZarrPopover.tsx b/src/app/BrowZarrPopover.tsx
@@ -1,5 +1,5 @@
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button-enhanced"
 import { Separator } from "@/components/ui/separator"
 import Link from "next/link"
 import Image from "next/image"

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+@custom-variant dark (&:is(.dark *));
+
 :root {
   --background-plot: white;
   --background-modal: hsla(0, 0%, 95%, 0.7);
@@ -422,4 +424,15 @@ a[href]:hover::after {
   body {
     @apply bg-background text-foreground;
   }
+}
+
+.dark {
+  --sidebar: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import ClientRoot from "./ClientRoot";
 import { Toaster } from "@/components/ui/sonner"
+import { TooltipProvider } from "@/components/ui/tooltip"
 import "./globals.css";
 
 export const viewport: Viewport = {
@@ -20,10 +21,12 @@ export default function RootLayout({
   return (
     <html suppressHydrationWarning lang="en">
       <body className="antialiased">
-        <ClientRoot>
-          {children}
-          <Toaster richColors expand={true} position="top-center" duration={5000}/>
-        </ClientRoot>
+        <TooltipProvider>
+          <ClientRoot>
+            {children}
+            <Toaster richColors expand={true} position="top-center" duration={5000}/>
+          </ClientRoot>
+        </TooltipProvider>
       </body>
     </html>
   );

diff --git a/src/components/ui/Elements/AboutDrawer.tsx b/src/components/ui/Elements/AboutDrawer.tsx
@@ -2,7 +2,7 @@ import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from
 import AboutInfo from "@/components/ui/Elements/AboutInfo";
 import logo from "@/app/logo.png";
 import Image from "next/image";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button-enhanced";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 export default function LogoDrawer() {

diff --git a/src/components/ui/Elements/GithubButton.tsx b/src/components/ui/Elements/GithubButton.tsx
@@ -2,7 +2,7 @@
 
 import { FaGithub } from "react-icons/fa";
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button-enhanced";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 export default function GithubButton() {

diff --git a/src/components/ui/Elements/HomeButton.tsx b/src/components/ui/Elements/HomeButton.tsx
@@ -3,7 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import logoHome from "public/logo-light.svg";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button-enhanced";
 import {
 	Tooltip,
 	TooltipContent,

diff --git a/src/components/ui/Elements/ThemeSwitch.tsx b/src/components/ui/Elements/ThemeSwitch.tsx
@@ -3,7 +3,7 @@
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { BsMoonStarsFill, BsSunFill } from "react-icons/bs";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button-enhanced";
 import {
 	Tooltip,
 	TooltipContent,

diff --git a/src/components/ui/Elements/VersionSelector.tsx b/src/components/ui/Elements/VersionSelector.tsx
@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from "react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button-enhanced";
 import { FaCheck } from "react-icons/fa6";
 import { LuChevronDown } from "react-icons/lu";
 import { BsTags } from "react-icons/bs";

diff --git a/src/components/ui/LinePlotArea/PlotLineOptions.tsx b/src/components/ui/LinePlotArea/PlotLineOptions.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button-enhanced"
 import '../css/PlotLineOptions.css'
 import {
   DropdownMenu,

diff --git a/src/components/ui/MainPanel/AnalysisOptions.tsx b/src/components/ui/MainPanel/AnalysisOptions.tsx
@@ -9,7 +9,7 @@ import '../css/MainPanel.css';
 import { PiMathOperationsBold } from "react-icons/pi";
 import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
 import { Input } from '../input';
-import { Button } from '../button';
+import { Button } from '../button-enhanced';
 import { CiUndo } from "react-icons/ci";
 import {KernelVisualizer} from "@/components/ui";
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';

diff --git a/src/components/ui/MainPanel/Colormaps.tsx b/src/components/ui/MainPanel/Colormaps.tsx
@@ -7,7 +7,7 @@ import { colormaps } from '@/components/textures';
 import { useShallow } from 'zustand/shallow';
 import { MdOutlineSwapVert } from "react-icons/md";
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button-enhanced";
 import Image from 'next/image';
 import {
   Tooltip,

diff --git a/src/components/ui/MainPanel/PanelItem.tsx b/src/components/ui/MainPanel/PanelItem.tsx
@@ -5,7 +5,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button-enhanced"
 import { ReactNode } from "react"
 
 export function PanelItem({ children, options }: { children: ReactNode; options: ReactNode }) {

diff --git a/src/components/ui/MainPanel/PlotType.tsx b/src/components/ui/MainPanel/PlotType.tsx
@@ -10,7 +10,7 @@ import { CgMenuGridO } from "react-icons/cg";
 import { PiCubeLight } from "react-icons/pi";
 import { MdOutlineSquare } from "react-icons/md";
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button-enhanced"
 import {
   Tooltip,
   TooltipContent,

diff --git a/src/components/ui/MainPanel/Variables.tsx b/src/components/ui/MainPanel/Variables.tsx
@@ -9,7 +9,7 @@ import MetaDataInfo from "./MetaDataInfo";
 import { GetDimInfo } from "@/utils/HelperFuncs";
 import { GetAttributes } from "@/components/zarr/ZarrLoaderLRU";
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button-enhanced";
 import { Input } from "../input";
 import {
   Tooltip,

diff --git a/src/components/ui/MetaData.tsx b/src/components/ui/MetaData.tsx
@@ -18,7 +18,7 @@ import {
 } from "@/components/ui/tooltip"
 
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button-enhanced"
 
 export const defaultAttributes = [
     "long_name",

diff --git a/src/components/ui/NavBar/PerformanceMode.tsx b/src/components/ui/NavBar/PerformanceMode.tsx
@@ -5,7 +5,7 @@ import { Potato } from '../Elements/Icons';
 import { FaCarSide } from "react-icons/fa6";
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
 import { useGlobalStore } from '@/GlobalStates/GlobalStore';
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button-enhanced"
 
 const icons = {
     "fast": <MdOutlineRocketLaunch className='size-8'/>,

diff --git a/src/components/ui/NavBar/PlotLineButton.tsx b/src/components/ui/NavBar/PlotLineButton.tsx
@@ -7,7 +7,7 @@ import { useErrorStore } from '@/GlobalStates/ErrorStore';
 import { useShallow } from 'zustand/shallow';
 import '../css/PlotLineButton.css'
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button-enhanced"
 
 const PlotLineButton = () => {
     const {selectTS, resetAnim, animate, plotType, displaceSurface, setSelectTS, setResetAnim} = usePlotStore(useShallow(state => ({

diff --git a/src/components/ui/ShaderEditor.tsx b/src/components/ui/ShaderEditor.tsx
@@ -9,7 +9,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import './css/ShaderEditor.css'
-import { Button } from './button';
+import { Button } from './button-enhanced';
 import { useGlobalStore } from '@/GlobalStates/GlobalStore';
 import { useAnalysisStore } from '@/GlobalStates/AnalysisStore';
 import { IoCloseCircleSharp } from "react-icons/io5";

diff --git a/src/components/ui/VariablesTable.tsx b/src/components/ui/VariablesTable.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button-enhanced";
 import { useGlobalStore } from "@/GlobalStates/GlobalStore";
 import { useShallow } from "zustand/shallow";
 import {

diff --git a/src/components/ui/Widgets/SliderThumbs.tsx b/src/components/ui/Widgets/SliderThumbs.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import { Slider as SliderPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 

diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 
@@ -19,7 +19,7 @@ function AccordionItem({
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn("border-b last:border-b-0 mb-1", className)}
+      className={cn("border-b last:border-b-0", className)}
       {...props}
     />
   )
@@ -35,13 +35,13 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-2 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
           className
         )}
         {...props}
       >
         {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   )
@@ -55,13 +55,12 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
       {...props}
     >
-      <div className={cn("pt-0 pb-2", className)}>{children}</div>
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
     </AccordionPrimitive.Content>
   )
 }
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
-