Spaces:

vignt97867896
/

bioflow

Sleeping

App Files Files Community

Rami-Troudi commited on Jan 26

Commit

eaf815d

1 Parent(s): 56d7f80

Improve sidebar

Browse files

Files changed (23) hide show

ui/app/api/discovery/route.ts +1 -1
ui/app/api/explorer/route.ts +1 -1
ui/app/layout.tsx +16 -8
ui/app/not-found.tsx +48 -0
ui/components/animate-ui/components/animate/tooltip.tsx +74 -0
ui/components/animate-ui/components/radix/dropdown-menu.tsx +200 -0
ui/components/animate-ui/components/radix/sheet.tsx +155 -0
ui/components/animate-ui/components/radix/sidebar.tsx +810 -0
ui/components/animate-ui/primitives/animate/slot.tsx +96 -0
ui/components/animate-ui/primitives/animate/tooltip.tsx +572 -0
ui/components/animate-ui/primitives/effects/highlight.tsx +640 -0
ui/components/animate-ui/primitives/radix/checkbox.tsx +128 -0
ui/components/animate-ui/primitives/radix/collapsible.tsx +11 -0
ui/components/animate-ui/primitives/radix/sheet.tsx +191 -0
ui/components/page-header.tsx +60 -8
ui/components/sidebar.tsx +283 -63
ui/components/ui/avatar.tsx +50 -0
ui/components/ui/breadcrumb.tsx +115 -0
ui/components/ui/button.tsx +36 -30
ui/components/ui/empty.tsx +104 -0
ui/eslint.config.mjs +63 -5
ui/package.json +9 -0
ui/pnpm-lock.yaml +123 -0

ui/app/api/discovery/route.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export async function POST(request: Request) {
   const body = await request.json();
   const { query } = body;
-  console.log("Starting discovery for:", query);
   // Here you would typically call your Python backend
   // e.g., await fetch('http://localhost:8000/api/discovery', { ... })

   const body = await request.json();
   const { query } = body;
+  console.info("Starting discovery for:", query);
   // Here you would typically call your Python backend
   // e.g., await fetch('http://localhost:8000/api/discovery', { ... })

ui/app/api/explorer/route.ts CHANGED Viewed

@@ -11,7 +11,7 @@ export async function GET(request: Request) {
       searchParams.get("colorBy") || undefined
     );
     return NextResponse.json(data);
-  } catch (e) {
     return NextResponse.json({ error: "Invalid parameters" }, { status: 400 });
   }
 }

       searchParams.get("colorBy") || undefined
     );
     return NextResponse.json(data);
+  } catch {
     return NextResponse.json({ error: "Invalid parameters" }, { status: 400 });
   }
 }

ui/app/layout.tsx CHANGED Viewed

@@ -1,7 +1,11 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import { Sidebar } from "@/components/sidebar";
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -41,14 +45,18 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased flex h-screen overflow-hidden`}
       >
-        <Sidebar />
-        <main className="flex-1 overflow-y-auto bg-background p-8">
-          <div className="mx-auto max-w-7xl">
-            {children}
-          </div>
-        </main>
       </body>
     </html>
   );

 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { AppSidebar } from "@/components/sidebar";
+import {
+  SidebarProvider,
+  SidebarInset,
+} from "@/components/animate-ui/components/radix/sidebar";
 const geistSans = Geist({
   variable: "--font-geist-sans",
   return (
     <html lang="en">
       <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <SidebarProvider>
+          <AppSidebar />
+          <SidebarInset>
+            <main className="flex-1 overflow-y-auto bg-background p-8">
+              <div className="mx-auto max-w-7xl">
+                {children}
+              </div>
+            </main>
+          </SidebarInset>
+        </SidebarProvider>
       </body>
     </html>
   );

ui/app/not-found.tsx ADDED Viewed

	@@ -0,0 +1,48 @@

+import { Button } from "@/components/ui/button";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyTitle,
+} from "@/components/ui/empty";
+import { Compass, Home } from "lucide-react";
+export function NotFoundPage() {
+	return (
+		<div className="flex w-full items-center justify-center">
+			<div className="flex h-screen items-center border-x">
+				<div>
+					<div className="absolute inset-x-0 h-px bg-border" />
+					<Empty>
+						<EmptyHeader>
+							<EmptyTitle className="font-black font-mono text-8xl">
+								404
+							</EmptyTitle>
+							<EmptyDescription className="text-nowrap">
+								The page you're looking for might have been <br />
+								moved or doesn't exist.
+							</EmptyDescription>
+						</EmptyHeader>
+						<EmptyContent>
+							<div className="flex gap-2">
+								<Button asChild>
+									<a href="#">
+										<Home /> Go Home
+									</a>
+								</Button>
+								<Button asChild variant="outline">
+									<a href="#">
+										<Compass /> Explore
+									</a>
+								</Button>
+							</div>
+						</EmptyContent>
+					</Empty>
+					<div className="absolute inset-x-0 h-px bg-border" />
+				</div>
+			</div>
+		</div>
+	);
+}

ui/components/animate-ui/components/animate/tooltip.tsx ADDED Viewed

	@@ -0,0 +1,74 @@

+import * as React from 'react';
+import * as motion from 'motion/react-client';
+import {
+  TooltipProvider as TooltipProviderPrimitive,
+  Tooltip as TooltipPrimitive,
+  TooltipTrigger as TooltipTriggerPrimitive,
+  TooltipContent as TooltipContentPrimitive,
+  TooltipArrow as TooltipArrowPrimitive,
+  type TooltipProviderProps as TooltipProviderPrimitiveProps,
+  type TooltipProps as TooltipPrimitiveProps,
+  type TooltipTriggerProps as TooltipTriggerPrimitiveProps,
+  type TooltipContentProps as TooltipContentPrimitiveProps,
+} from '@/components/animate-ui/primitives/animate/tooltip';
+import { cn } from '@/lib/utils';
+type TooltipProviderProps = TooltipProviderPrimitiveProps;
+function TooltipProvider({ openDelay = 0, ...props }: TooltipProviderProps) {
+  return <TooltipProviderPrimitive openDelay={openDelay} {...props} />;
+}
+type TooltipProps = TooltipPrimitiveProps;
+function Tooltip({ sideOffset = 10, ...props }: TooltipProps) {
+  return <TooltipPrimitive sideOffset={sideOffset} {...props} />;
+}
+type TooltipTriggerProps = TooltipTriggerPrimitiveProps;
+function TooltipTrigger({ ...props }: TooltipTriggerProps) {
+  return <TooltipTriggerPrimitive {...props} />;
+}
+type TooltipContentProps = Omit<TooltipContentPrimitiveProps, 'asChild'> & {
+  children: React.ReactNode;
+  layout?: boolean | 'position' | 'size' | 'preserve-aspect';
+};
+function TooltipContent({
+  className,
+  children,
+  layout = 'preserve-aspect',
+  ...props
+}: TooltipContentProps) {
+  return (
+    <TooltipContentPrimitive
+      className={cn(
+        'z-50 w-fit bg-primary text-primary-foreground rounded-md',
+        className,
+      )}
+      {...props}
+    >
+      <motion.div className="overflow-hidden px-3 py-1.5 text-xs text-balance">
+        <motion.div layout={layout}>{children}</motion.div>
+      </motion.div>
+      <TooltipArrowPrimitive
+        className="fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]"
+        tipRadius={2}
+      />
+    </TooltipContentPrimitive>
+  );
+}
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  type TooltipProviderProps,
+  type TooltipProps,
+  type TooltipTriggerProps,
+  type TooltipContentProps,
+};

ui/components/animate-ui/components/radix/dropdown-menu.tsx ADDED Viewed

	@@ -0,0 +1,200 @@

+"use client"
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cn } from "@/lib/utils"
+const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

ui/components/animate-ui/components/radix/sheet.tsx ADDED Viewed

	@@ -0,0 +1,155 @@

+import * as React from 'react';
+import {
+  Sheet as SheetPrimitive,
+  SheetTrigger as SheetTriggerPrimitive,
+  SheetOverlay as SheetOverlayPrimitive,
+  SheetClose as SheetClosePrimitive,
+  SheetPortal as SheetPortalPrimitive,
+  SheetContent as SheetContentPrimitive,
+  SheetHeader as SheetHeaderPrimitive,
+  SheetFooter as SheetFooterPrimitive,
+  SheetTitle as SheetTitlePrimitive,
+  SheetDescription as SheetDescriptionPrimitive,
+  type SheetProps as SheetPrimitiveProps,
+  type SheetTriggerProps as SheetTriggerPrimitiveProps,
+  type SheetOverlayProps as SheetOverlayPrimitiveProps,
+  type SheetCloseProps as SheetClosePrimitiveProps,
+  type SheetContentProps as SheetContentPrimitiveProps,
+  type SheetHeaderProps as SheetHeaderPrimitiveProps,
+  type SheetFooterProps as SheetFooterPrimitiveProps,
+  type SheetTitleProps as SheetTitlePrimitiveProps,
+  type SheetDescriptionProps as SheetDescriptionPrimitiveProps,
+} from '@/components/animate-ui/primitives/radix/sheet';
+import { cn } from '@/lib/utils';
+import { XIcon } from 'lucide-react';
+type SheetProps = SheetPrimitiveProps;
+function Sheet(props: SheetProps) {
+  return <SheetPrimitive {...props} />;
+}
+type SheetTriggerProps = SheetTriggerPrimitiveProps;
+function SheetTrigger(props: SheetTriggerProps) {
+  return <SheetTriggerPrimitive {...props} />;
+}
+type SheetOverlayProps = SheetOverlayPrimitiveProps;
+function SheetOverlay({ className, ...props }: SheetOverlayProps) {
+  return (
+    <SheetOverlayPrimitive
+      className={cn('fixed inset-0 z-50 bg-black/50', className)}
+      {...props}
+    />
+  );
+}
+type SheetCloseProps = SheetClosePrimitiveProps;
+function SheetClose(props: SheetCloseProps) {
+  return <SheetClosePrimitive {...props} />;
+}
+type SheetContentProps = SheetContentPrimitiveProps & {
+  showCloseButton?: boolean;
+};
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  ...props
+}: SheetContentProps) {
+  return (
+    <SheetPortalPrimitive>
+      <SheetOverlay />
+      <SheetContentPrimitive
+        className={cn(
+          'bg-background fixed z-50 flex flex-col gap-4 shadow-lg',
+          side === 'right' && 'h-full w-[350px] border-l',
+          side === 'left' && 'h-full w-[350px] border-r',
+          side === 'top' && 'w-full h-[350px] border-b',
+          side === 'bottom' && 'w-full h-[350px] border-t',
+          className,
+        )}
+        side={side}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetClose className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetClose>
+        )}
+      </SheetContentPrimitive>
+    </SheetPortalPrimitive>
+  );
+}
+type SheetHeaderProps = SheetHeaderPrimitiveProps;
+function SheetHeader({ className, ...props }: SheetHeaderProps) {
+  return (
+    <SheetHeaderPrimitive
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+type SheetFooterProps = SheetFooterPrimitiveProps;
+function SheetFooter({ className, ...props }: SheetFooterProps) {
+  return (
+    <SheetFooterPrimitive
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  );
+}
+type SheetTitleProps = SheetTitlePrimitiveProps;
+function SheetTitle({ className, ...props }: SheetTitleProps) {
+  return (
+    <SheetTitlePrimitive
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  );
+}
+type SheetDescriptionProps = SheetDescriptionPrimitiveProps;
+function SheetDescription({ className, ...props }: SheetDescriptionProps) {
+  return (
+    <SheetDescriptionPrimitive
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  type SheetProps,
+  type SheetTriggerProps,
+  type SheetCloseProps,
+  type SheetContentProps,
+  type SheetHeaderProps,
+  type SheetFooterProps,
+  type SheetTitleProps,
+  type SheetDescriptionProps,
+};

ui/components/animate-ui/components/radix/sidebar.tsx ADDED Viewed

	@@ -0,0 +1,810 @@

+'use client';
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+import { cva, VariantProps } from 'class-variance-authority';
+import { PanelLeftIcon } from 'lucide-react';
+import { type Transition } from 'motion/react';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/animate-ui/components/radix/sheet';
+import {
+  TooltipProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/animate-ui/components/animate/tooltip';
+import {
+  Highlight,
+  HighlightItem,
+} from '@/components/animate-ui/primitives/effects/highlight';
+import { getStrictContext } from '@/lib/get-strict-context';
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+type SidebarContextProps = {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+const [LocalSidebarProvider, useSidebar] =
+  getStrictContext<SidebarContextProps>('SidebarContext');
+type SidebarProviderProps = React.ComponentProps<'div'> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: SidebarProviderProps) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === 'function' ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open],
+  );
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [toggleSidebar]);
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? 'expanded' : 'collapsed';
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
+  return (
+    <LocalSidebarProvider value={contextValue}>
+      <TooltipProvider openDelay={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH,
+              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </LocalSidebarProvider>
+  );
+}
+type SidebarProps = React.ComponentProps<'div'> & {
+  side?: 'left' | 'right';
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offcanvas' | 'icon' | 'none';
+  containerClassName?: string;
+  animateOnHover?: boolean;
+  transition?: Transition;
+};
+function Sidebar({
+  side = 'left',
+  variant = 'sidebar',
+  collapsible = 'offcanvas',
+  className,
+  children,
+  animateOnHover = true,
+  containerClassName,
+  transition = { type: 'spring', stiffness: 350, damping: 35 },
+  ...props
+}: SidebarProps) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === 'none') {
+    return (
+      <Highlight
+        enabled={animateOnHover}
+        hover
+        controlledItems
+        mode="parent"
+        containerClassName={containerClassName}
+        transition={transition}
+      >
+        <div
+          data-slot="sidebar"
+          className={cn(
+            'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </Highlight>
+    );
+  }
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <Highlight
+            enabled={animateOnHover}
+            hover
+            controlledItems
+            mode="parent"
+            containerClassName={cn('h-full', containerClassName)}
+            transition={transition}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </Highlight>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-400 ease-[cubic-bezier(0.7,-0.15,0.25,1.15)]',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-400 ease-[cubic-bezier(0.75,0,0.25,1)] md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          className,
+        )}
+        {...props}
+      >
+        <Highlight
+          containerClassName={cn('size-full', containerClassName)}
+          enabled={animateOnHover}
+          hover
+          controlledItems
+          mode="parent"
+          forceUpdateBounds
+          transition={transition}
+        >
+          <div
+            data-sidebar="sidebar"
+            data-slot="sidebar-inner"
+            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          >
+            {children}
+          </div>
+        </Highlight>
+      </div>
+    </div>
+  );
+}
+type SidebarTriggerProps = React.ComponentProps<typeof Button>;
+function SidebarTrigger({ className, onClick, ...props }: SidebarTriggerProps) {
+  const { toggleSidebar } = useSidebar();
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('size-7', className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+type SidebarRailProps = React.ComponentProps<'button'>;
+function SidebarRail({ className, ...props }: SidebarRailProps) {
+  const { toggleSidebar } = useSidebar();
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+type SidebarInsetProps = React.ComponentProps<'main'>;
+function SidebarInset({ className, ...props }: SidebarInsetProps) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+type SidebarInputProps = React.ComponentProps<typeof Input>;
+function SidebarInput({ className, ...props }: SidebarInputProps) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn('bg-background h-8 w-full shadow-none', className)}
+      {...props}
+    />
+  );
+}
+type SidebarHeaderProps = React.ComponentProps<'div'>;
+function SidebarHeader({ className, ...props }: SidebarHeaderProps) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  );
+}
+type SidebarFooterProps = React.ComponentProps<'div'>;
+function SidebarFooter({ className, ...props }: SidebarFooterProps) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  );
+}
+type SidebarSeparatorProps = React.ComponentProps<typeof Separator>;
+function SidebarSeparator({ className, ...props }: SidebarSeparatorProps) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      {...props}
+    />
+  );
+}
+type SidebarContentProps = React.ComponentProps<'div'>;
+function SidebarContent({ className, ...props }: SidebarContentProps) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+type SidebarGroupProps = React.ComponentProps<'div'>;
+function SidebarGroup({ className, ...props }: SidebarGroupProps) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      {...props}
+    />
+  );
+}
+type SidebarGroupLabelProps = React.ComponentProps<'div'> & {
+  asChild?: boolean;
+};
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: SidebarGroupLabelProps) {
+  const Comp = asChild ? Slot.Root : 'div';
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-300 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+type SidebarGroupActionProps = React.ComponentProps<'button'> & {
+  asChild?: boolean;
+};
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: SidebarGroupActionProps) {
+  const Comp = asChild ? Slot.Root : 'button';
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+type SidebarGroupContentProps = React.ComponentProps<'div'>;
+function SidebarGroupContent({
+  className,
+  ...props
+}: SidebarGroupContentProps) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn('w-full text-sm', className)}
+      {...props}
+    />
+  );
+}
+type SidebarMenuProps = React.ComponentProps<'ul'>;
+function SidebarMenu({ className, ...props }: SidebarMenuProps) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      {...props}
+    />
+  );
+}
+type SidebarMenuItemProps = React.ComponentProps<'li'>;
+function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  );
+}
+const sidebarMenuButtonActiveVariants = cva(
+  'bg-sidebar-accent text-sidebar-accent-foreground rounded-md',
+  {
+    variants: {
+      variant: {
+        default: 'bg-sidebar-accent text-sidebar-accent-foreground',
+        outline:
+          'bg-sidebar-accent text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&:not([data-highlight])]:data-[state=open]:hover:bg-sidebar-accent [&:not([data-highlight])]:data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          '[&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground [&:not([data-highlight])]:hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+type SidebarMenuButtonProps = React.ComponentProps<'button'> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>;
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = 'default',
+  size = 'default',
+  tooltip,
+  className,
+  ...props
+}: SidebarMenuButtonProps) {
+  const Comp = asChild ? Slot.Root : 'button';
+  const { isMobile, state } = useSidebar();
+  const button = (
+    <HighlightItem
+      activeClassName={sidebarMenuButtonActiveVariants({ variant })}
+    >
+      <Comp
+        data-slot="sidebar-menu-button"
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    </HighlightItem>
+  );
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+  return (
+    <Tooltip side="right" align="center">
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent hidden={state !== 'collapsed' || isMobile} {...tooltip} />
+    </Tooltip>
+  );
+}
+type SidebarMenuActionProps = React.ComponentProps<'button'> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+};
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: SidebarMenuActionProps) {
+  const Comp = asChild ? Slot.Root : 'button';
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        // Increases the hit area of the button on mobile.
+        'z-[1] text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+type SidebarMenuBadgeProps = React.ComponentProps<'div'>;
+function SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+type SidebarMenuSkeletonProps = React.ComponentProps<'div'> & {
+  showIcon?: boolean;
+};
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: SidebarMenuSkeletonProps) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+type SidebarMenuSubProps = React.ComponentProps<'ul'>;
+function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+type SidebarMenuSubItemProps = React.ComponentProps<'li'>;
+function SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemProps) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn('group/menu-sub-item relative', className)}
+      {...props}
+    />
+  );
+}
+type SidebarMenuSubButtonProps = React.ComponentProps<'a'> & {
+  asChild?: boolean;
+  size?: 'sm' | 'md';
+  isActive?: boolean;
+};
+function SidebarMenuSubButton({
+  asChild = false,
+  size = 'md',
+  isActive = false,
+  className,
+  ...props
+}: SidebarMenuSubButtonProps) {
+  const Comp = asChild ? Slot.Root : 'a';
+  return (
+    <HighlightItem activeClassName="bg-sidebar-accent text-sidebar-accent-foreground rounded-md">
+      <Comp
+        data-slot="sidebar-menu-sub-button"
+        data-sidebar="menu-sub-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(
+          'text-sidebar-foreground ring-sidebar-ring [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+          'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+          size === 'sm' && 'text-xs',
+          size === 'md' && 'text-sm',
+          'group-data-[collapsible=icon]:hidden',
+          className,
+        )}
+        {...props}
+      />
+    </HighlightItem>
+  );
+}
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};

ui/components/animate-ui/primitives/animate/slot.tsx ADDED Viewed

	@@ -0,0 +1,96 @@

+'use client';
+import * as React from 'react';
+import { motion, isMotionComponent, type HTMLMotionProps } from 'motion/react';
+import { cn } from '@/lib/utils';
+type AnyProps = Record<string, unknown>;
+type DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<
+  HTMLMotionProps<keyof HTMLElementTagNameMap>,
+  'ref'
+> & { ref?: React.Ref<T> };
+type WithAsChild<Base extends object> =
+  | (Base & { asChild: true; children: React.ReactElement })
+  | (Base & { asChild?: false | undefined });
+type SlotProps<T extends HTMLElement = HTMLElement> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children?: any;
+} & DOMMotionProps<T>;
+function mergeRefs<T>(
+  ...refs: (React.Ref<T> | undefined)[]
+): React.RefCallback<T> {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        (ref as React.RefObject<T | null>).current = node;
+      }
+    });
+  };
+}
+function mergeProps<T extends HTMLElement>(
+  childProps: AnyProps,
+  slotProps: DOMMotionProps<T>,
+): AnyProps {
+  const merged: AnyProps = { ...childProps, ...slotProps };
+  if (childProps.className || slotProps.className) {
+    merged.className = cn(
+      childProps.className as string,
+      slotProps.className as string,
+    );
+  }
+  if (childProps.style || slotProps.style) {
+    merged.style = {
+      ...(childProps.style as React.CSSProperties),
+      ...(slotProps.style as React.CSSProperties),
+    };
+  }
+  return merged;
+}
+function Slot<T extends HTMLElement = HTMLElement>({
+  children,
+  ref,
+  ...props
+}: SlotProps<T>) {
+  const isAlreadyMotion =
+    typeof children.type === 'object' &&
+    children.type !== null &&
+    isMotionComponent(children.type);
+  const Base = React.useMemo(
+    () =>
+      isAlreadyMotion
+        ? (children.type as React.ElementType)
+        : motion.create(children.type as React.ElementType),
+    [isAlreadyMotion, children.type],
+  );
+  if (!React.isValidElement(children)) return null;
+  const { ref: childRef, ...childProps } = children.props as AnyProps;
+  const mergedProps = mergeProps(childProps, props);
+  return (
+    <Base {...mergedProps} ref={mergeRefs(childRef as React.Ref<T>, ref)} />
+  );
+}
+export {
+  Slot,
+  type SlotProps,
+  type WithAsChild,
+  type DOMMotionProps,
+  type AnyProps,
+};

ui/components/animate-ui/primitives/animate/tooltip.tsx ADDED Viewed

	@@ -0,0 +1,572 @@

+'use client';
+import * as React from 'react';
+import {
+  motion,
+  AnimatePresence,
+  LayoutGroup,
+  type Transition,
+  type HTMLMotionProps,
+} from 'motion/react';
+import {
+  useFloating,
+  autoUpdate,
+  offset as floatingOffset,
+  flip,
+  shift,
+  arrow as floatingArrow,
+  FloatingPortal,
+  FloatingArrow,
+  type UseFloatingReturn,
+} from '@floating-ui/react';
+import { getStrictContext } from '@/lib/get-strict-context';
+import { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';
+type Side = 'top' | 'bottom' | 'left' | 'right';
+type Align = 'start' | 'center' | 'end';
+type TooltipData = {
+  contentProps: HTMLMotionProps<'div'>;
+  contentAsChild: boolean;
+  rect: DOMRect;
+  side: Side;
+  sideOffset: number;
+  align: Align;
+  alignOffset: number;
+  id: string;
+};
+type GlobalTooltipContextType = {
+  showTooltip: (data: TooltipData) => void;
+  hideTooltip: () => void;
+  hideImmediate: () => void;
+  currentTooltip: TooltipData | null;
+  transition: Transition;
+  globalId: string;
+  setReferenceEl: (el: HTMLElement | null) => void;
+  referenceElRef: React.RefObject<HTMLElement | null>;
+};
+const [GlobalTooltipProvider, useGlobalTooltip] =
+  getStrictContext<GlobalTooltipContextType>('GlobalTooltipProvider');
+type TooltipContextType = {
+  props: HTMLMotionProps<'div'>;
+  setProps: React.Dispatch<React.SetStateAction<HTMLMotionProps<'div'>>>;
+  asChild: boolean;
+  setAsChild: React.Dispatch<React.SetStateAction<boolean>>;
+  side: Side;
+  sideOffset: number;
+  align: Align;
+  alignOffset: number;
+  id: string;
+};
+const [LocalTooltipProvider, useTooltip] = getStrictContext<TooltipContextType>(
+  'LocalTooltipProvider',
+);
+type TooltipPosition = { x: number; y: number };
+function getResolvedSide(placement: Side | `${Side}-${Align}`) {
+  if (placement.includes('-')) {
+    return placement.split('-')[0] as Side;
+  }
+  return placement as Side;
+}
+function initialFromSide(side: Side): Partial<Record<'x' | 'y', number>> {
+  if (side === 'top') return { y: 15 };
+  if (side === 'bottom') return { y: -15 };
+  if (side === 'left') return { x: 15 };
+  return { x: -15 };
+}
+type TooltipProviderProps = {
+  children: React.ReactNode;
+  id?: string;
+  openDelay?: number;
+  closeDelay?: number;
+  transition?: Transition;
+};
+function TooltipProvider({
+  children,
+  id,
+  openDelay = 700,
+  closeDelay = 300,
+  transition = { type: 'spring', stiffness: 300, damping: 35 },
+}: TooltipProviderProps) {
+  const globalId = React.useId();
+  const [currentTooltip, setCurrentTooltip] =
+    React.useState<TooltipData | null>(null);
+  const timeoutRef = React.useRef<number | null>(null);
+  const lastCloseTimeRef = React.useRef<number>(0);
+  const referenceElRef = React.useRef<HTMLElement | null>(null);
+  const showTooltip = React.useCallback(
+    (data: TooltipData) => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (currentTooltip !== null) {
+        setCurrentTooltip(data);
+        return;
+      }
+      const now = Date.now();
+      const delay = now - lastCloseTimeRef.current < closeDelay ? 0 : openDelay;
+      timeoutRef.current = window.setTimeout(
+        () => setCurrentTooltip(data),
+        delay,
+      );
+    },
+    [openDelay, closeDelay, currentTooltip],
+  );
+  const hideTooltip = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = window.setTimeout(() => {
+      setCurrentTooltip(null);
+      lastCloseTimeRef.current = Date.now();
+    }, closeDelay);
+  }, [closeDelay]);
+  const hideImmediate = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setCurrentTooltip(null);
+    lastCloseTimeRef.current = Date.now();
+  }, []);
+  const setReferenceEl = React.useCallback((el: HTMLElement | null) => {
+    referenceElRef.current = el;
+  }, []);
+  React.useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') hideImmediate();
+    };
+    window.addEventListener('keydown', onKeyDown, true);
+    window.addEventListener('scroll', hideImmediate, true);
+    window.addEventListener('resize', hideImmediate, true);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown, true);
+      window.removeEventListener('scroll', hideImmediate, true);
+      window.removeEventListener('resize', hideImmediate, true);
+    };
+  }, [hideImmediate]);
+  return (
+    <GlobalTooltipProvider
+      value={{
+        showTooltip,
+        hideTooltip,
+        hideImmediate,
+        currentTooltip,
+        transition,
+        globalId: id ?? globalId,
+        setReferenceEl,
+        referenceElRef,
+      }}
+    >
+      <LayoutGroup>{children}</LayoutGroup>
+      <TooltipOverlay />
+    </GlobalTooltipProvider>
+  );
+}
+type RenderedTooltipContextType = {
+  side: Side;
+  align: Align;
+  open: boolean;
+};
+const [RenderedTooltipProvider, useRenderedTooltip] =
+  getStrictContext<RenderedTooltipContextType>('RenderedTooltipContext');
+type FloatingContextType = {
+  context: UseFloatingReturn['context'];
+  arrowRef: React.RefObject<SVGSVGElement | null>;
+};
+const [FloatingProvider, useFloatingContext] =
+  getStrictContext<FloatingContextType>('FloatingContext');
+const MotionTooltipArrow = motion.create(FloatingArrow);
+type TooltipArrowProps = Omit<
+  React.ComponentProps<typeof MotionTooltipArrow>,
+  'context'
+> & {
+  withTransition?: boolean;
+};
+function TooltipArrow({
+  ref,
+  withTransition = true,
+  ...props
+}: TooltipArrowProps) {
+  const { side, align, open } = useRenderedTooltip();
+  const { context, arrowRef } = useFloatingContext();
+  const { transition, globalId } = useGlobalTooltip();
+  React.useImperativeHandle(ref, () => arrowRef.current as SVGSVGElement);
+  const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side];
+  return (
+    <MotionTooltipArrow
+      ref={arrowRef}
+      context={context}
+      data-state={open ? 'open' : 'closed'}
+      data-side={side}
+      data-align={align}
+      data-slot="tooltip-arrow"
+      style={{ rotate: deg }}
+      layoutId={withTransition ? `tooltip-arrow-${globalId}` : undefined}
+      transition={withTransition ? transition : undefined}
+      {...props}
+    />
+  );
+}
+type TooltipPortalProps = React.ComponentProps<typeof FloatingPortal>;
+function TooltipPortal(props: TooltipPortalProps) {
+  return <FloatingPortal {...props} />;
+}
+function TooltipOverlay() {
+  const { currentTooltip, transition, globalId, referenceElRef } =
+    useGlobalTooltip();
+  const [rendered, setRendered] = React.useState<{
+    data: TooltipData | null;
+    open: boolean;
+  }>({ data: null, open: false });
+  const arrowRef = React.useRef<SVGSVGElement | null>(null);
+  const side = rendered.data?.side ?? 'top';
+  const align = rendered.data?.align ?? 'center';
+  const { refs, x, y, strategy, context, update } = useFloating({
+    placement: align === 'center' ? side : `${side}-${align}`,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      floatingOffset({
+        mainAxis: rendered.data?.sideOffset ?? 0,
+        crossAxis: rendered.data?.alignOffset ?? 0,
+      }),
+      flip(),
+      shift({ padding: 8 }),
+      floatingArrow({ element: arrowRef }),
+    ],
+  });
+  React.useEffect(() => {
+    if (currentTooltip) {
+      setRendered({ data: currentTooltip, open: true });
+    } else {
+      setRendered((p) => (p.data ? { ...p, open: false } : p));
+    }
+  }, [currentTooltip]);
+  React.useLayoutEffect(() => {
+    if (referenceElRef.current) {
+      refs.setReference(referenceElRef.current);
+      update();
+    }
+  }, [referenceElRef, refs, update, rendered.data]);
+  const ready = x != null && y != null;
+  const Component = rendered.data?.contentAsChild ? Slot : motion.div;
+  const resolvedSide = getResolvedSide(context.placement);
+  return (
+    <AnimatePresence mode="wait">
+      {rendered.data && ready && (
+        <TooltipPortal>
+          <div
+            ref={refs.setFloating}
+            data-slot="tooltip-overlay"
+            data-side={resolvedSide}
+            data-align={rendered.data.align}
+            data-state={rendered.open ? 'open' : 'closed'}
+            style={{
+              position: strategy,
+              top: 0,
+              left: 0,
+              zIndex: 50,
+              transform: `translate3d(${x!}px, ${y!}px, 0)`,
+            }}
+          >
+            <FloatingProvider value={{ context, arrowRef }}>
+              <RenderedTooltipProvider
+                value={{
+                  side: resolvedSide,
+                  align: rendered.data.align,
+                  open: rendered.open,
+                }}
+              >
+                <Component
+                  data-slot="tooltip-content"
+                  data-side={resolvedSide}
+                  data-align={rendered.data.align}
+                  data-state={rendered.open ? 'open' : 'closed'}
+                  layoutId={`tooltip-content-${globalId}`}
+                  initial={{
+                    opacity: 0,
+                    scale: 0,
+                    ...initialFromSide(rendered.data.side),
+                  }}
+                  animate={
+                    rendered.open
+                      ? { opacity: 1, scale: 1, x: 0, y: 0 }
+                      : {
+                          opacity: 0,
+                          scale: 0,
+                          ...initialFromSide(rendered.data.side),
+                        }
+                  }
+                  exit={{
+                    opacity: 0,
+                    scale: 0,
+                    ...initialFromSide(rendered.data.side),
+                  }}
+                  onAnimationComplete={() => {
+                    if (!rendered.open)
+                      setRendered({ data: null, open: false });
+                  }}
+                  transition={transition}
+                  {...rendered.data.contentProps}
+                  style={{
+                    position: 'relative',
+                    ...(rendered.data.contentProps?.style || {}),
+                  }}
+                />
+              </RenderedTooltipProvider>
+            </FloatingProvider>
+          </div>
+        </TooltipPortal>
+      )}
+    </AnimatePresence>
+  );
+}
+type TooltipProps = {
+  children: React.ReactNode;
+  side?: Side;
+  sideOffset?: number;
+  align?: Align;
+  alignOffset?: number;
+};
+function Tooltip({
+  children,
+  side = 'top',
+  sideOffset = 0,
+  align = 'center',
+  alignOffset = 0,
+}: TooltipProps) {
+  const id = React.useId();
+  const [props, setProps] = React.useState<HTMLMotionProps<'div'>>({});
+  const [asChild, setAsChild] = React.useState(false);
+  return (
+    <LocalTooltipProvider
+      value={{
+        props,
+        setProps,
+        asChild,
+        setAsChild,
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        id,
+      }}
+    >
+      {children}
+    </LocalTooltipProvider>
+  );
+}
+type TooltipContentProps = WithAsChild<HTMLMotionProps<'div'>>;
+function shallowEqualWithoutChildren(
+  a?: HTMLMotionProps<'div'>,
+  b?: HTMLMotionProps<'div'>,
+) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const keysA = Object.keys(a).filter((k) => k !== 'children');
+  const keysB = Object.keys(b).filter((k) => k !== 'children');
+  if (keysA.length !== keysB.length) return false;
+  for (const k of keysA) {
+    // @ts-expect-error index
+    if (a[k] !== b[k]) return false;
+  }
+  return true;
+}
+function TooltipContent({ asChild = false, ...props }: TooltipContentProps) {
+  const { setProps, setAsChild } = useTooltip();
+  const lastPropsRef = React.useRef<HTMLMotionProps<'div'> | undefined>(
+    undefined,
+  );
+  React.useEffect(() => {
+    if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {
+      lastPropsRef.current = props;
+      setProps(props);
+    }
+  }, [props, setProps]);
+  React.useEffect(() => {
+    setAsChild(asChild);
+  }, [asChild, setAsChild]);
+  return null;
+}
+type TooltipTriggerProps = WithAsChild<HTMLMotionProps<'div'>>;
+function TooltipTrigger({
+  ref,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  onPointerDown,
+  asChild = false,
+  ...props
+}: TooltipTriggerProps) {
+  const {
+    props: contentProps,
+    asChild: contentAsChild,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    id,
+  } = useTooltip();
+  const {
+    showTooltip,
+    hideTooltip,
+    hideImmediate,
+    currentTooltip,
+    setReferenceEl,
+  } = useGlobalTooltip();
+  const triggerRef = React.useRef<HTMLDivElement>(null);
+  React.useImperativeHandle(ref, () => triggerRef.current as HTMLDivElement);
+  const suppressNextFocusRef = React.useRef(false);
+  const handleOpen = React.useCallback(() => {
+    if (!triggerRef.current) return;
+    setReferenceEl(triggerRef.current);
+    const rect = triggerRef.current.getBoundingClientRect();
+    showTooltip({
+      contentProps,
+      contentAsChild,
+      rect,
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      id,
+    });
+  }, [
+    showTooltip,
+    setReferenceEl,
+    contentProps,
+    contentAsChild,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    id,
+  ]);
+  const handlePointerDown = React.useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      onPointerDown?.(e);
+      if (currentTooltip?.id === id) {
+        suppressNextFocusRef.current = true;
+        hideImmediate();
+        Promise.resolve().then(() => {
+          suppressNextFocusRef.current = false;
+        });
+      }
+    },
+    [onPointerDown, currentTooltip?.id, id, hideImmediate],
+  );
+  const handleMouseEnter = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      onMouseEnter?.(e);
+      handleOpen();
+    },
+    [handleOpen, onMouseEnter],
+  );
+  const handleMouseLeave = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      onMouseLeave?.(e);
+      hideTooltip();
+    },
+    [hideTooltip, onMouseLeave],
+  );
+  const handleFocus = React.useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      onFocus?.(e);
+      if (suppressNextFocusRef.current) return;
+      handleOpen();
+    },
+    [handleOpen, onFocus],
+  );
+  const handleBlur = React.useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      onBlur?.(e);
+      hideTooltip();
+    },
+    [hideTooltip, onBlur],
+  );
+  const Component = asChild ? Slot : motion.div;
+  return (
+    <Component
+      ref={triggerRef}
+      onPointerDown={handlePointerDown}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      data-slot="tooltip-trigger"
+      data-side={side}
+      data-align={align}
+      data-state={currentTooltip?.id === id ? 'open' : 'closed'}
+      {...props}
+    />
+  );
+}
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipArrow,
+  useGlobalTooltip,
+  useTooltip,
+  type TooltipProviderProps,
+  type TooltipProps,
+  type TooltipContentProps,
+  type TooltipTriggerProps,
+  type TooltipArrowProps,
+  type TooltipPosition,
+  type GlobalTooltipContextType,
+  type TooltipContextType,
+};

ui/components/animate-ui/primitives/effects/highlight.tsx ADDED Viewed

	@@ -0,0 +1,640 @@

+'use client';
+import * as React from 'react';
+import { AnimatePresence, motion, type Transition } from 'motion/react';
+import { cn } from '@/lib/utils';
+type HighlightMode = 'children' | 'parent';
+type Bounds = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+const DEFAULT_BOUNDS_OFFSET: Bounds = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+};
+type HighlightContextType<T extends string> = {
+  as?: keyof HTMLElementTagNameMap;
+  mode: HighlightMode;
+  activeValue: T | null;
+  setActiveValue: (value: T | null) => void;
+  setBounds: (bounds: DOMRect) => void;
+  clearBounds: () => void;
+  id: string;
+  hover: boolean;
+  click: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  activeClassName?: string;
+  setActiveClassName: (className: string) => void;
+  transition?: Transition;
+  disabled?: boolean;
+  enabled?: boolean;
+  exitDelay?: number;
+  forceUpdateBounds?: boolean;
+};
+const HighlightContext = React.createContext<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  HighlightContextType<any> | undefined
+>(undefined);
+function useHighlight<T extends string>(): HighlightContextType<T> {
+  const context = React.useContext(HighlightContext);
+  if (!context) {
+    throw new Error('useHighlight must be used within a HighlightProvider');
+  }
+  return context as unknown as HighlightContextType<T>;
+}
+type BaseHighlightProps<T extends React.ElementType = 'div'> = {
+  as?: T;
+  ref?: React.Ref<HTMLDivElement>;
+  mode?: HighlightMode;
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  transition?: Transition;
+  hover?: boolean;
+  click?: boolean;
+  disabled?: boolean;
+  enabled?: boolean;
+  exitDelay?: number;
+};
+type ParentModeHighlightProps = {
+  boundsOffset?: Partial<Bounds>;
+  containerClassName?: string;
+  forceUpdateBounds?: boolean;
+};
+type ControlledParentModeHighlightProps<T extends React.ElementType = 'div'> =
+  BaseHighlightProps<T> &
+    ParentModeHighlightProps & {
+      mode: 'parent';
+      controlledItems: true;
+      children: React.ReactNode;
+    };
+type ControlledChildrenModeHighlightProps<T extends React.ElementType = 'div'> =
+  BaseHighlightProps<T> & {
+    mode?: 'children' | undefined;
+    controlledItems: true;
+    children: React.ReactNode;
+  };
+type UncontrolledParentModeHighlightProps<T extends React.ElementType = 'div'> =
+  BaseHighlightProps<T> &
+    ParentModeHighlightProps & {
+      mode: 'parent';
+      controlledItems?: false;
+      itemsClassName?: string;
+      children: React.ReactElement | React.ReactElement[];
+    };
+type UncontrolledChildrenModeHighlightProps<
+  T extends React.ElementType = 'div',
+> = BaseHighlightProps<T> & {
+  mode?: 'children';
+  controlledItems?: false;
+  itemsClassName?: string;
+  children: React.ReactElement | React.ReactElement[];
+};
+type HighlightProps<T extends React.ElementType = 'div'> =
+  | ControlledParentModeHighlightProps<T>
+  | ControlledChildrenModeHighlightProps<T>
+  | UncontrolledParentModeHighlightProps<T>
+  | UncontrolledChildrenModeHighlightProps<T>;
+function Highlight<T extends React.ElementType = 'div'>({
+  ref,
+  ...props
+}: HighlightProps<T>) {
+  const {
+    as: Component = 'div',
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    style,
+    transition = { type: 'spring', stiffness: 350, damping: 35 },
+    hover = false,
+    click = true,
+    enabled = true,
+    controlledItems,
+    disabled = false,
+    exitDelay = 200,
+    mode = 'children',
+  } = props;
+  const localRef = React.useRef<HTMLDivElement>(null);
+  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);
+  const propsBoundsOffset = (props as ParentModeHighlightProps)?.boundsOffset;
+  const boundsOffset = propsBoundsOffset ?? DEFAULT_BOUNDS_OFFSET;
+  const boundsOffsetTop = boundsOffset.top ?? 0;
+  const boundsOffsetLeft = boundsOffset.left ?? 0;
+  const boundsOffsetWidth = boundsOffset.width ?? 0;
+  const boundsOffsetHeight = boundsOffset.height ?? 0;
+  const boundsOffsetRef = React.useRef({
+    top: boundsOffsetTop,
+    left: boundsOffsetLeft,
+    width: boundsOffsetWidth,
+    height: boundsOffsetHeight,
+  });
+  React.useEffect(() => {
+    boundsOffsetRef.current = {
+      top: boundsOffsetTop,
+      left: boundsOffsetLeft,
+      width: boundsOffsetWidth,
+      height: boundsOffsetHeight,
+    };
+  }, [
+    boundsOffsetTop,
+    boundsOffsetLeft,
+    boundsOffsetWidth,
+    boundsOffsetHeight,
+  ]);
+  const [activeValue, setActiveValue] = React.useState<string | null>(
+    value ?? defaultValue ?? null,
+  );
+  const [boundsState, setBoundsState] = React.useState<Bounds | null>(null);
+  const [activeClassNameState, setActiveClassNameState] =
+    React.useState<string>('');
+  const safeSetActiveValue = (id: string | null) => {
+    setActiveValue((prev) => {
+      if (prev !== id) {
+        onValueChange?.(id);
+        return id;
+      }
+      return prev;
+    });
+  };
+  const safeSetBoundsRef = React.useRef<
+    ((bounds: DOMRect) => void) | undefined
+  >(undefined);
+  React.useEffect(() => {
+    safeSetBoundsRef.current = (bounds: DOMRect) => {
+      if (!localRef.current) return;
+      const containerRect = localRef.current.getBoundingClientRect();
+      const offset = boundsOffsetRef.current;
+      const newBounds: Bounds = {
+        top: bounds.top - containerRect.top + offset.top,
+        left: bounds.left - containerRect.left + offset.left,
+        width: bounds.width + offset.width,
+        height: bounds.height + offset.height,
+      };
+      setBoundsState((prev) => {
+        if (
+          prev &&
+          prev.top === newBounds.top &&
+          prev.left === newBounds.left &&
+          prev.width === newBounds.width &&
+          prev.height === newBounds.height
+        ) {
+          return prev;
+        }
+        return newBounds;
+      });
+    };
+  });
+  const safeSetBounds = (bounds: DOMRect) => {
+    safeSetBoundsRef.current?.(bounds);
+  };
+  const clearBounds = React.useCallback(() => {
+    setBoundsState((prev) => (prev === null ? prev : null));
+  }, []);
+  React.useEffect(() => {
+    if (value !== undefined) setActiveValue(value);
+    else if (defaultValue !== undefined) setActiveValue(defaultValue);
+  }, [value, defaultValue]);
+  const id = React.useId();
+  React.useEffect(() => {
+    if (mode !== 'parent') return;
+    const container = localRef.current;
+    if (!container) return;
+    const onScroll = () => {
+      if (!activeValue) return;
+      const activeEl = container.querySelector<HTMLElement>(
+        `[data-value="${activeValue}"][data-highlight="true"]`,
+      );
+      if (activeEl)
+        safeSetBoundsRef.current?.(activeEl.getBoundingClientRect());
+    };
+    container.addEventListener('scroll', onScroll, { passive: true });
+    return () => container.removeEventListener('scroll', onScroll);
+  }, [mode, activeValue]);
+  const render = (children: React.ReactNode) => {
+    if (mode === 'parent') {
+      return (
+        <Component
+          ref={localRef}
+          data-slot="motion-highlight-container"
+          style={{ position: 'relative', zIndex: 1 }}
+          className={(props as ParentModeHighlightProps)?.containerClassName}
+        >
+          <AnimatePresence initial={false} mode="wait">
+            {boundsState && (
+              <motion.div
+                data-slot="motion-highlight"
+                animate={{
+                  top: boundsState.top,
+                  left: boundsState.left,
+                  width: boundsState.width,
+                  height: boundsState.height,
+                  opacity: 1,
+                }}
+                initial={{
+                  top: boundsState.top,
+                  left: boundsState.left,
+                  width: boundsState.width,
+                  height: boundsState.height,
+                  opacity: 0,
+                }}
+                exit={{
+                  opacity: 0,
+                  transition: {
+                    ...transition,
+                    delay: (transition?.delay ?? 0) + (exitDelay ?? 0) / 1000,
+                  },
+                }}
+                transition={transition}
+                style={{ position: 'absolute', zIndex: 0, ...style }}
+                className={cn(className, activeClassNameState)}
+              />
+            )}
+          </AnimatePresence>
+          {children}
+        </Component>
+      );
+    }
+    return children;
+  };
+  return (
+    <HighlightContext.Provider
+      value={{
+        mode,
+        activeValue,
+        setActiveValue: safeSetActiveValue,
+        id,
+        hover,
+        click,
+        className,
+        style,
+        transition,
+        disabled,
+        enabled,
+        exitDelay,
+        setBounds: safeSetBounds,
+        clearBounds,
+        activeClassName: activeClassNameState,
+        setActiveClassName: setActiveClassNameState,
+        forceUpdateBounds: (props as ParentModeHighlightProps)
+          ?.forceUpdateBounds,
+      }}
+    >
+      {enabled
+        ? controlledItems
+          ? render(children)
+          : render(
+              React.Children.map(children, (child, index) => (
+                <HighlightItem key={index} className={props?.itemsClassName}>
+                  {child}
+                </HighlightItem>
+              )),
+            )
+        : children}
+    </HighlightContext.Provider>
+  );
+}
+function getNonOverridingDataAttributes(
+  element: React.ReactElement,
+  dataAttributes: Record<string, unknown>,
+): Record<string, unknown> {
+  return Object.keys(dataAttributes).reduce<Record<string, unknown>>(
+    (acc, key) => {
+      if ((element.props as Record<string, unknown>)[key] === undefined) {
+        acc[key] = dataAttributes[key];
+      }
+      return acc;
+    },
+    {},
+  );
+}
+type ExtendedChildProps = React.ComponentProps<'div'> & {
+  id?: string;
+  ref?: React.Ref<HTMLElement>;
+  'data-active'?: string;
+  'data-value'?: string;
+  'data-disabled'?: boolean;
+  'data-highlight'?: boolean;
+  'data-slot'?: string;
+};
+type HighlightItemProps<T extends React.ElementType = 'div'> =
+  React.ComponentProps<T> & {
+    as?: T;
+    children: React.ReactElement;
+    id?: string;
+    value?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    transition?: Transition;
+    activeClassName?: string;
+    disabled?: boolean;
+    exitDelay?: number;
+    asChild?: boolean;
+    forceUpdateBounds?: boolean;
+  };
+function HighlightItem<T extends React.ElementType>({
+  ref,
+  as,
+  children,
+  id,
+  value,
+  className,
+  style,
+  transition,
+  disabled = false,
+  activeClassName,
+  exitDelay,
+  asChild = false,
+  forceUpdateBounds,
+  ...props
+}: HighlightItemProps<T>) {
+  const itemId = React.useId();
+  const {
+    activeValue,
+    setActiveValue,
+    mode,
+    setBounds,
+    clearBounds,
+    hover,
+    click,
+    enabled,
+    className: contextClassName,
+    style: contextStyle,
+    transition: contextTransition,
+    id: contextId,
+    disabled: contextDisabled,
+    exitDelay: contextExitDelay,
+    forceUpdateBounds: contextForceUpdateBounds,
+    setActiveClassName,
+  } = useHighlight();
+  const Component = as ?? 'div';
+  const element = children as React.ReactElement<ExtendedChildProps>;
+  const childValue =
+    id ?? value ?? element.props?.['data-value'] ?? element.props?.id ?? itemId;
+  const isActive = activeValue === childValue;
+  const isDisabled = disabled === undefined ? contextDisabled : disabled;
+  const itemTransition = transition ?? contextTransition;
+  const localRef = React.useRef<HTMLDivElement>(null);
+  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);
+  const refCallback = React.useCallback((node: HTMLElement | null) => {
+    localRef.current = node as HTMLDivElement;
+  }, []);
+  React.useEffect(() => {
+    if (mode !== 'parent') return;
+    let rafId: number;
+    let previousBounds: Bounds | null = null;
+    const shouldUpdateBounds =
+      forceUpdateBounds === true ||
+      (contextForceUpdateBounds && forceUpdateBounds !== false);
+    const updateBounds = () => {
+      if (!localRef.current) return;
+      const bounds = localRef.current.getBoundingClientRect();
+      if (shouldUpdateBounds) {
+        if (
+          previousBounds &&
+          previousBounds.top === bounds.top &&
+          previousBounds.left === bounds.left &&
+          previousBounds.width === bounds.width &&
+          previousBounds.height === bounds.height
+        ) {
+          rafId = requestAnimationFrame(updateBounds);
+          return;
+        }
+        previousBounds = bounds;
+        rafId = requestAnimationFrame(updateBounds);
+      }
+      setBounds(bounds);
+    };
+    if (isActive) {
+      updateBounds();
+      setActiveClassName(activeClassName ?? '');
+    } else if (!activeValue) clearBounds();
+    if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId);
+  }, [
+    mode,
+    isActive,
+    activeValue,
+    setBounds,
+    clearBounds,
+    activeClassName,
+    setActiveClassName,
+    forceUpdateBounds,
+    contextForceUpdateBounds,
+  ]);
+  if (!React.isValidElement(children)) return children;
+  const dataAttributes = {
+    'data-active': isActive ? 'true' : 'false',
+    'aria-selected': isActive,
+    'data-disabled': isDisabled,
+    'data-value': childValue,
+    'data-highlight': true,
+  };
+  const commonHandlers = hover
+    ? {
+        onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {
+          setActiveValue(childValue);
+          element.props.onMouseEnter?.(e);
+        },
+        onMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => {
+          setActiveValue(null);
+          element.props.onMouseLeave?.(e);
+        },
+      }
+    : click
+      ? {
+          onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+            setActiveValue(childValue);
+            element.props.onClick?.(e);
+          },
+        }
+      : {};
+  if (asChild) {
+    if (mode === 'children') {
+      return React.cloneElement(
+        element,
+        {
+          key: childValue,
+          ref: refCallback,
+          className: cn('relative', element.props.className),
+          ...getNonOverridingDataAttributes(element, {
+            ...dataAttributes,
+            'data-slot': 'motion-highlight-item-container',
+          }),
+          ...commonHandlers,
+          ...props,
+        },
+        <>
+          <AnimatePresence initial={false} mode="wait">
+            {isActive && !isDisabled && (
+              <motion.div
+                layoutId={`transition-background-${contextId}`}
+                data-slot="motion-highlight"
+                style={{
+                  position: 'absolute',
+                  zIndex: 0,
+                  ...contextStyle,
+                  ...style,
+                }}
+                className={cn(contextClassName, activeClassName)}
+                transition={itemTransition}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{
+                  opacity: 0,
+                  transition: {
+                    ...itemTransition,
+                    delay:
+                      (itemTransition?.delay ?? 0) +
+                      (exitDelay ?? contextExitDelay ?? 0) / 1000,
+                  },
+                }}
+                {...dataAttributes}
+              />
+            )}
+          </AnimatePresence>
+          <Component
+            data-slot="motion-highlight-item"
+            style={{ position: 'relative', zIndex: 1 }}
+            className={className}
+            {...dataAttributes}
+          >
+            {children}
+          </Component>
+        </>,
+      );
+    }
+    return React.cloneElement(element, {
+      ref: refCallback,
+      ...getNonOverridingDataAttributes(element, {
+        ...dataAttributes,
+        'data-slot': 'motion-highlight-item',
+      }),
+      ...commonHandlers,
+    });
+  }
+  return enabled ? (
+    <Component
+      key={childValue}
+      ref={localRef}
+      data-slot="motion-highlight-item-container"
+      className={cn(mode === 'children' && 'relative', className)}
+      {...dataAttributes}
+      {...props}
+      {...commonHandlers}
+    >
+      {mode === 'children' && (
+        <AnimatePresence initial={false} mode="wait">
+          {isActive && !isDisabled && (
+            <motion.div
+              layoutId={`transition-background-${contextId}`}
+              data-slot="motion-highlight"
+              style={{
+                position: 'absolute',
+                zIndex: 0,
+                ...contextStyle,
+                ...style,
+              }}
+              className={cn(contextClassName, activeClassName)}
+              transition={itemTransition}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{
+                opacity: 0,
+                transition: {
+                  ...itemTransition,
+                  delay:
+                    (itemTransition?.delay ?? 0) +
+                    (exitDelay ?? contextExitDelay ?? 0) / 1000,
+                },
+              }}
+              {...dataAttributes}
+            />
+          )}
+        </AnimatePresence>
+      )}
+      {React.cloneElement(element, {
+        style: { position: 'relative', zIndex: 1 },
+        className: element.props.className,
+        ...getNonOverridingDataAttributes(element, {
+          ...dataAttributes,
+          'data-slot': 'motion-highlight-item',
+        }),
+      })}
+    </Component>
+  ) : (
+    children
+  );
+}
+export {
+  Highlight,
+  HighlightItem,
+  useHighlight,
+  type HighlightProps,
+  type HighlightItemProps,
+};

ui/components/animate-ui/primitives/radix/checkbox.tsx ADDED Viewed

	@@ -0,0 +1,128 @@

+'use client';
+import * as React from 'react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import { motion, SVGMotionProps, type HTMLMotionProps } from 'motion/react';
+import { getStrictContext } from '@/lib/get-strict-context';
+import { useControlledState } from '@/hooks/use-controlled-state';
+type CheckboxContextType = {
+  isChecked: boolean | 'indeterminate';
+  setIsChecked: (checked: boolean | 'indeterminate') => void;
+};
+const [CheckboxProvider, useCheckbox] =
+  getStrictContext<CheckboxContextType>('CheckboxContext');
+type CheckboxProps = HTMLMotionProps<'button'> &
+  Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'asChild'>;
+function Checkbox({
+  defaultChecked,
+  checked,
+  onCheckedChange,
+  disabled,
+  required,
+  name,
+  value,
+  ...props
+}: CheckboxProps) {
+  const [isChecked, setIsChecked] = useControlledState({
+    value: checked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+  return (
+    <CheckboxProvider value={{ isChecked, setIsChecked }}>
+      <CheckboxPrimitive.Root
+        defaultChecked={defaultChecked}
+        checked={checked}
+        onCheckedChange={setIsChecked}
+        disabled={disabled}
+        required={required}
+        name={name}
+        value={value}
+        asChild
+      >
+        <motion.button
+          data-slot="checkbox"
+          whileTap={{ scale: 0.95 }}
+          whileHover={{ scale: 1.05 }}
+          {...props}
+        />
+      </CheckboxPrimitive.Root>
+    </CheckboxProvider>
+  );
+}
+type CheckboxIndicatorProps = SVGMotionProps<SVGSVGElement>;
+function CheckboxIndicator(props: CheckboxIndicatorProps) {
+  const { isChecked } = useCheckbox();
+  return (
+    <CheckboxPrimitive.Indicator forceMount asChild>
+      <motion.svg
+        data-slot="checkbox-indicator"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth="3.5"
+        stroke="currentColor"
+        initial="unchecked"
+        animate={isChecked ? 'checked' : 'unchecked'}
+        {...props}
+      >
+        {isChecked === 'indeterminate' ? (
+          <motion.line
+            x1="5"
+            y1="12"
+            x2="19"
+            y2="12"
+            strokeLinecap="round"
+            initial={{ pathLength: 0, opacity: 0 }}
+            animate={{
+              pathLength: 1,
+              opacity: 1,
+              transition: { duration: 0.2 },
+            }}
+          />
+        ) : (
+          <motion.path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M4.5 12.75l6 6 9-13.5"
+            variants={{
+              checked: {
+                pathLength: 1,
+                opacity: 1,
+                transition: {
+                  duration: 0.2,
+                  delay: 0.2,
+                },
+              },
+              unchecked: {
+                pathLength: 0,
+                opacity: 0,
+                transition: {
+                  duration: 0.2,
+                },
+              },
+            }}
+          />
+        )}
+      </motion.svg>
+    </CheckboxPrimitive.Indicator>
+  );
+}
+export {
+  Checkbox,
+  CheckboxIndicator,
+  useCheckbox,
+  type CheckboxProps,
+  type CheckboxIndicatorProps,
+  type CheckboxContextType,
+};

ui/components/animate-ui/primitives/radix/collapsible.tsx ADDED Viewed

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

+"use client"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+const Collapsible = CollapsiblePrimitive.Root
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

ui/components/animate-ui/primitives/radix/sheet.tsx ADDED Viewed

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

+'use client';
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
+import { getStrictContext } from '@/lib/get-strict-context';
+import { useControlledState } from '@/hooks/use-controlled-state';
+type SheetContextType = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+};
+const [SheetProvider, useSheet] =
+  getStrictContext<SheetContextType>('SheetContext');
+type SheetProps = React.ComponentProps<typeof SheetPrimitive.Root>;
+function Sheet(props: SheetProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props.open,
+    defaultValue: props.defaultOpen,
+    onChange: props.onOpenChange,
+  });
+  return (
+    <SheetProvider value={{ isOpen, setIsOpen }}>
+      <SheetPrimitive.Root
+        data-slot="sheet"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </SheetProvider>
+  );
+}
+type SheetTriggerProps = React.ComponentProps<typeof SheetPrimitive.Trigger>;
+function SheetTrigger(props: SheetTriggerProps) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+type SheetCloseProps = React.ComponentProps<typeof SheetPrimitive.Close>;
+function SheetClose(props: SheetCloseProps) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+type SheetPortalProps = React.ComponentProps<typeof SheetPrimitive.Portal>;
+function SheetPortal(props: SheetPortalProps) {
+  const { isOpen } = useSheet();
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <SheetPrimitive.Portal forceMount data-slot="sheet-portal" {...props} />
+      )}
+    </AnimatePresence>
+  );
+}
+type SheetOverlayProps = Omit<
+  React.ComponentProps<typeof SheetPrimitive.Overlay>,
+  'asChild' | 'forceMount'
+> &
+  HTMLMotionProps<'div'>;
+function SheetOverlay({
+  transition = { duration: 0.2, ease: 'easeInOut' },
+  ...props
+}: SheetOverlayProps) {
+  return (
+    <SheetPrimitive.Overlay asChild forceMount>
+      <motion.div
+        key="sheet-overlay"
+        data-slot="sheet-overlay"
+        initial={{ opacity: 0, filter: 'blur(4px)' }}
+        animate={{ opacity: 1, filter: 'blur(0px)' }}
+        exit={{ opacity: 0, filter: 'blur(4px)' }}
+        transition={transition}
+        {...props}
+      />
+    </SheetPrimitive.Overlay>
+  );
+}
+type Side = 'top' | 'bottom' | 'left' | 'right';
+type SheetContentProps = React.ComponentProps<typeof SheetPrimitive.Content> &
+  HTMLMotionProps<'div'> & {
+    side?: Side;
+  };
+function SheetContent({
+  side = 'right',
+  transition = { type: 'spring', stiffness: 150, damping: 22 },
+  style,
+  children,
+  ...props
+}: SheetContentProps) {
+  const axis = side === 'left' || side === 'right' ? 'x' : 'y';
+  const offscreen: Record<Side, { x?: string; y?: string; opacity: number }> = {
+    right: { x: '100%', opacity: 0 },
+    left: { x: '-100%', opacity: 0 },
+    top: { y: '-100%', opacity: 0 },
+    bottom: { y: '100%', opacity: 0 },
+  };
+  const positionStyle: Record<Side, React.CSSProperties> = {
+    right: { insetBlock: 0, right: 0 },
+    left: { insetBlock: 0, left: 0 },
+    top: { insetInline: 0, top: 0 },
+    bottom: { insetInline: 0, bottom: 0 },
+  };
+  return (
+    <SheetPrimitive.Content asChild forceMount {...props}>
+      <motion.div
+        key="sheet-content"
+        data-slot="sheet-content"
+        data-side={side}
+        initial={offscreen[side]}
+        animate={{ [axis]: 0, opacity: 1 }}
+        exit={offscreen[side]}
+        style={{
+          position: 'fixed',
+          ...positionStyle[side],
+          ...style,
+        }}
+        transition={transition}
+      >
+        {children}
+      </motion.div>
+    </SheetPrimitive.Content>
+  );
+}
+type SheetHeaderProps = React.ComponentProps<'div'>;
+function SheetHeader(props: SheetHeaderProps) {
+  return <div data-slot="sheet-header" {...props} />;
+}
+type SheetFooterProps = React.ComponentProps<'div'>;
+function SheetFooter(props: SheetFooterProps) {
+  return <div data-slot="sheet-footer" {...props} />;
+}
+type SheetTitleProps = React.ComponentProps<typeof SheetPrimitive.Title>;
+function SheetTitle(props: SheetTitleProps) {
+  return <SheetPrimitive.Title data-slot="sheet-title" {...props} />;
+}
+type SheetDescriptionProps = React.ComponentProps<
+  typeof SheetPrimitive.Description
+>;
+function SheetDescription(props: SheetDescriptionProps) {
+  return (
+    <SheetPrimitive.Description data-slot="sheet-description" {...props} />
+  );
+}
+export {
+  useSheet,
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  type SheetProps,
+  type SheetPortalProps,
+  type SheetOverlayProps,
+  type SheetTriggerProps,
+  type SheetCloseProps,
+  type SheetContentProps,
+  type SheetHeaderProps,
+  type SheetFooterProps,
+  type SheetTitleProps,
+  type SheetDescriptionProps,
+};

ui/components/page-header.tsx CHANGED Viewed

@@ -1,25 +1,75 @@
-// ui/components/page-header.tsx
 import { cn } from "@/lib/utils"
 interface PageHeaderProps {
   title: string
   subtitle?: string
   icon?: React.ReactNode
   className?: string
 }
-export function PageHeader({ title, subtitle, icon, className }: PageHeaderProps) {
   return (
-    <div className={cn("mb-8 space-y-2", className)}>
         <h1 className="flex items-center gap-3 text-3xl font-bold tracking-tight">
-            {icon && <span className="text-primary">{icon}</span>}
-            {title}
         </h1>
         {subtitle && (
-            <p className="text-lg text-muted-foreground">
-                {subtitle}
-            </p>
         )}
     </div>
   )
 }
@@ -35,3 +85,5 @@ export function SectionHeader({ title, icon, action }: { title: string, icon?: R
         </div>
     )
 }

 import { cn } from "@/lib/utils"
+import { SidebarTrigger } from "@/components/animate-ui/components/radix/sidebar"
+import { Separator } from "@/components/ui/separator"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
 interface PageHeaderProps {
   title: string
   subtitle?: string
   icon?: React.ReactNode
   className?: string
+  breadcrumbs?: Array<{ label: string; href?: string }>
+  showSidebarTrigger?: boolean
 }
+export function PageHeader({
+  title,
+  subtitle,
+  icon,
+  className,
+  breadcrumbs,
+  showSidebarTrigger = true
+}: PageHeaderProps) {
   return (
+    <div className={cn("space-y-4", className)}>
+      {(showSidebarTrigger || breadcrumbs) && (
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2">
+            {showSidebarTrigger && (
+              <>
+                <SidebarTrigger className="-ml-1" />
+                <Separator orientation="vertical" className="mr-2 h-4" />
+              </>
+            )}
+            {breadcrumbs && breadcrumbs.length > 0 && (
+              <Breadcrumb>
+                <BreadcrumbList>
+                  {breadcrumbs.map((crumb, index) => (
+                    <React.Fragment key={index}>
+                      {index > 0 && <BreadcrumbSeparator className="hidden md:block" />}
+                      <BreadcrumbItem className={index === 0 ? "hidden md:block" : ""}>
+                        {crumb.href ? (
+                          <BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>
+                        ) : (
+                          <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                        )}
+                      </BreadcrumbItem>
+                    </React.Fragment>
+                  ))}
+                </BreadcrumbList>
+              </Breadcrumb>
+            )}
+          </div>
+        </header>
+      )}
+      <div className="space-y-2">
         <h1 className="flex items-center gap-3 text-3xl font-bold tracking-tight">
+          {icon && <span className="text-primary">{icon}</span>}
+          {title}
         </h1>
         {subtitle && (
+          <p className="text-lg text-muted-foreground">
+            {subtitle}
+          </p>
         )}
+      </div>
     </div>
   )
 }
         </div>
     )
 }
+import * as React from "react"

ui/components/sidebar.tsx CHANGED Viewed

@@ -1,95 +1,315 @@
 // ui/components/sidebar.tsx
-"use client"
-import Link from "next/link"
-import { usePathname } from "next/navigation"
-import { Home, Microscope, Dna, BarChart2, Settings, Terminal } from "lucide-react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-const sidebarItems = [
   {
-    title: "Home",
-    href: "/",
     icon: Home,
   },
   {
-    title: "Discovery",
-    href: "/discovery",
     icon: Microscope,
   },
   {
-    title: "Explorer",
-    href: "/explorer",
     icon: Dna,
   },
   {
-    title: "Data",
-    href: "/data",
     icon: BarChart2,
   },
   {
-    title: "Settings",
-    href: "/settings",
     icon: Settings,
   },
-]
-export function Sidebar() {
-  const pathname = usePathname()
   return (
-    <div className="flex h-screen w-[250px] flex-col border-r bg-card pb-4 pt-6">
-      <div className="px-6 mb-8 flex items-center gap-2">
-        <div className="h-8 w-8 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
-            <Dna className="h-5 w-5" />
-        </div>
-        <div className="font-bold text-xl tracking-tight">
-          Bio<span className="text-primary">Flow</span>
-        </div>
-      </div>
-      <div className="px-4 py-2">
-        <div className="text-xs font-semibold text-muted-foreground mb-4 px-2 uppercase tracking-wider">
-          Navigation
-        </div>
-        <nav className="space-y-1">
-          {sidebarItems.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-            >
-              <Button
-                variant={pathname === item.href ? "secondary" : "ghost"}
-                className={cn(
-                  "w-full justify-start gap-3",
-                  pathname === item.href && "bg-secondary font-medium"
-                )}
-              >
-                <item.icon className="h-4 w-4" />
-                {item.title}
-              </Button>
-            </Link>
-          ))}
-        </nav>
-      </div>
-      <div className="mt-auto px-4">
-        <div className="rounded-lg border bg-muted/50 p-4">
-            <div className="flex items-center gap-2 mb-2">
                 <Terminal className="h-4 w-4 text-muted-foreground" />
                 <span className="text-xs font-medium">Status</span>
-            </div>
-            <div className="flex items-center gap-2">
                 <span className="relative flex h-2 w-2">
                   <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                   <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
                 </span>
                 <span className="text-xs text-muted-foreground">System Online</span>
             </div>
-        </div>
-      </div>
-    </div>
-  )
 }

 // ui/components/sidebar.tsx
+'use client';
+import * as React from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  Home,
+  Microscope,
+  Dna,
+  BarChart2,
+  Settings,
+  Terminal,
+  ChevronRight,
+  ChevronsUpDown,
+  BadgeCheck,
+  Bell,
+  CreditCard,
+  LogOut,
+  Sparkles,
+  User,
+} from 'lucide-react';
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarRail,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+} from '@/components/animate-ui/components/radix/sidebar';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/animate-ui/primitives/radix/collapsible';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/animate-ui/components/radix/dropdown-menu';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { useIsMobile } from '@/hooks/use-mobile';
+const navMain = [
   {
+    title: 'Home',
+    url: '/',
     icon: Home,
+    isActive: true,
   },
   {
+    title: 'Discovery',
+    url: '/discovery',
     icon: Microscope,
+    items: [
+      {
+        title: 'Drug Discovery',
+        url: '/discovery',
+      },
+      {
+        title: 'Molecule Search',
+        url: '/discovery#search',
+      },
+    ],
   },
   {
+    title: 'Explorer',
+    url: '/explorer',
     icon: Dna,
+    items: [
+      {
+        title: 'Embeddings',
+        url: '/explorer',
+      },
+      {
+        title: 'Predictions',
+        url: '/explorer#predictions',
+      },
+    ],
   },
   {
+    title: 'Data',
+    url: '/data',
     icon: BarChart2,
+    items: [
+      {
+        title: 'Datasets',
+        url: '/data',
+      },
+      {
+        title: 'Analytics',
+        url: '/data#analytics',
+      },
+    ],
   },
   {
+    title: 'Settings',
+    url: '/settings',
     icon: Settings,
+    items: [
+      {
+        title: 'General',
+        url: '/settings',
+      },
+      {
+        title: 'Models',
+        url: '/settings#models',
+      },
+    ],
   },
+];
+const userData = {
+  name: 'BioFlow User',
+  email: 'user@bioflow.ai',
+  avatar: '',
+};
+export function AppSidebar() {
+  const isMobile = useIsMobile();
+  const pathname = usePathname();
   return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        {/* App Header */}
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <Link href="/">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                  <Dna className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">BioFlow</span>
+                  <span className="truncate text-xs">AI Drug Discovery</span>
+                </div>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        {/* App Header */}
+      </SidebarHeader>
+      <SidebarContent>
+        {/* Nav Main */}
+        <SidebarGroup>
+          <SidebarGroupLabel>Platform</SidebarGroupLabel>
+          <SidebarMenu>
+            {navMain.map((item) => {
+              const isActive = pathname === item.url || pathname?.startsWith(item.url + '/');
+              if (!item.items || item.items.length === 0) {
+                return (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild isActive={isActive} tooltip={item.title}>
+                      <Link href={item.url}>
+                        {item.icon && <item.icon />}
+                        <span>{item.title}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              }
+              return (
+                <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={isActive}
+                  className="group/collapsible"
+                >
+                  <SidebarMenuItem>
+                    <CollapsibleTrigger asChild>
+                      <SidebarMenuButton tooltip={item.title} isActive={isActive}>
+                        {item.icon && <item.icon />}
+                        <span>{item.title}</span>
+                        <ChevronRight className="ml-auto transition-transform duration-300 group-data-[state=open]/collapsible:rotate-90" />
+                      </SidebarMenuButton>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <SidebarMenuSub>
+                        {item.items?.map((subItem) => (
+                          <SidebarMenuSubItem key={subItem.title}>
+                            <SidebarMenuSubButton asChild isActive={pathname === subItem.url}>
+                              <Link href={subItem.url}>
+                                <span>{subItem.title}</span>
+                              </Link>
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        ))}
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  </SidebarMenuItem>
+                </Collapsible>
+              );
+            })}
+          </SidebarMenu>
+        </SidebarGroup>
+        {/* Nav Main */}
+        {/* Status Section */}
+        <SidebarGroup className="group-data-[collapsible=icon]:hidden mt-auto">
+          <SidebarGroupLabel>System Status</SidebarGroupLabel>
+          <div className="px-3 py-2">
+            <div className="rounded-lg border bg-muted/50 p-3">
+              <div className="flex items-center gap-2 mb-2">
                 <Terminal className="h-4 w-4 text-muted-foreground" />
                 <span className="text-xs font-medium">Status</span>
+              </div>
+              <div className="flex items-center gap-2">
                 <span className="relative flex h-2 w-2">
                   <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                   <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
                 </span>
                 <span className="text-xs text-muted-foreground">System Online</span>
+              </div>
             </div>
+          </div>
+        </SidebarGroup>
+        {/* Status Section */}
+      </SidebarContent>
+      <SidebarFooter>
+        {/* Nav User */}
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton
+                  size="lg"
+                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                >
+                  <Avatar className="h-8 w-8 rounded-lg">
+                    <AvatarImage src={userData.avatar} alt={userData.name} />
+                    <AvatarFallback className="rounded-lg bg-primary text-primary-foreground">
+                      <User className="h-4 w-4" />
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">{userData.name}</span>
+                    <span className="truncate text-xs">{userData.email}</span>
+                  </div>
+                  <ChevronsUpDown className="ml-auto size-4" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                side={isMobile ? 'bottom' : 'right'}
+                align="end"
+                sideOffset={4}
+              >
+                <DropdownMenuLabel className="p-0 font-normal">
+                  <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                    <Avatar className="h-8 w-8 rounded-lg">
+                      <AvatarImage src={userData.avatar} alt={userData.name} />
+                      <AvatarFallback className="rounded-lg bg-primary text-primary-foreground">
+                        <User className="h-4 w-4" />
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">{userData.name}</span>
+                      <span className="truncate text-xs">{userData.email}</span>
+                    </div>
+                  </div>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    <Sparkles />
+                    Upgrade to Pro
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    <BadgeCheck />
+                    Account
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <CreditCard />
+                    Billing
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Bell />
+                    Notifications
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <LogOut />
+                  Log out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        {/* Nav User */}
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
 }

ui/components/ui/avatar.tsx ADDED Viewed

	@@ -0,0 +1,50 @@

+"use client"
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { cn } from "@/lib/utils"
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+export { Avatar, AvatarImage, AvatarFallback }

ui/components/ui/breadcrumb.tsx ADDED Viewed

	@@ -0,0 +1,115 @@

+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { cn } from "@/lib/utils"
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

ui/components/ui/button.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
-// ui/components/ui/button.tsx
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
@@ -6,26 +5,30 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
       },
     },
     defaultVariants: {
@@ -35,24 +38,27 @@ const buttonVariants = cva(
   }
 )
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
 export { Button, buttonVariants }

 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
   }
 )
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
 export { Button, buttonVariants }

ui/components/ui/empty.tsx ADDED Viewed

	@@ -0,0 +1,104 @@

+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

ui/eslint.config.mjs CHANGED Viewed

@@ -1,18 +1,76 @@
 import { defineConfig, globalIgnores } from "eslint/config";
 import nextVitals from "eslint-config-next/core-web-vitals";
 import nextTs from "eslint-config-next/typescript";
-const eslintConfig = defineConfig([
   ...nextVitals,
   ...nextTs,
-  // Override default ignores of eslint-config-next.
   globalIgnores([
-    // Default ignores of eslint-config-next:
     ".next/**",
     "out/**",
     "build/**",
     "next-env.d.ts",
   ]),
 ]);
-export default eslintConfig;

+// eslint.config.ts
 import { defineConfig, globalIgnores } from "eslint/config";
 import nextVitals from "eslint-config-next/core-web-vitals";
 import nextTs from "eslint-config-next/typescript";
+import reactHooks from "eslint-plugin-react-hooks";
+import unusedImports from "eslint-plugin-unused-imports";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import tailwindcss from "eslint-plugin-tailwindcss";
+export default defineConfig([
   ...nextVitals,
   ...nextTs,
+  {
+    plugins: {
+      "react-hooks": reactHooks,
+      "unused-imports": unusedImports,
+      "simple-import-sort": simpleImportSort,
+      tailwindcss,
+    },
+    settings: {
+      // Helps eslint-plugin-tailwindcss understand cn()/cva() patterns (common with shadcn)
+      tailwindcss: {
+        callees: ["cn", "cva"],
+        // If you still have a config file, keep it here; otherwise it’s harmless.
+        config: "./tailwind.config.ts",
+      },
+    },
+    rules: {
+      // React hooks (Next includes some of this, but this keeps it explicit)
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      // Prefer removing unused imports entirely
+      "unused-imports/no-unused-imports": "warn",
+      "unused-imports/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+      // If unused-imports handles it, avoid double-reporting from TS ESLint
+      "@typescript-eslint/no-unused-vars": "off",
+      // Practical console policy
+      "no-console": ["warn", { allow: ["info", "warn", "error"] }],
+      // Clean, deterministic import ordering
+      "simple-import-sort/imports": "warn",
+      "simple-import-sort/exports": "warn",
+      // Tailwind + shadcn friendly defaults
+      "tailwindcss/classnames-order": "warn",
+      "tailwindcss/no-contradicting-classname": "error",
+      // shadcn often uses design-token classes (e.g. bg-background, text-foreground)
+      "tailwindcss/no-custom-classname": "off",
+    },
+  },
+  // Ignore generated/build output (and override eslint-config-next defaults explicitly)
   globalIgnores([
     ".next/**",
     "out/**",
     "build/**",
+    "dist/**",
+    "coverage/**",
+    "node_modules/**",
     "next-env.d.ts",
   ]),
 ]);

ui/package.json CHANGED Viewed

@@ -10,6 +10,10 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
@@ -31,12 +35,17 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^25.0.10",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "eslint": "^9.39.2",
     "eslint-config-next": "^16.1.4",
     "shadcn": "^3.7.0",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",

     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.16",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^25.0.10",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "eslint": "^9.39.2",
     "eslint-config-next": "^16.1.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-tailwindcss": "^3.18.2",
+    "eslint-plugin-unused-imports": "^4.3.0",
     "shadcn": "^3.7.0",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",

ui/pnpm-lock.yaml CHANGED Viewed

@@ -8,6 +8,18 @@ importers:
   .:
     dependencies:
       '@radix-ui/react-label':
         specifier: ^2.1.8
         version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -66,6 +78,9 @@ importers:
         specifier: ^4.3.6
         version: 4.3.6
     devDependencies:
       '@tailwindcss/postcss':
         specifier: ^4.1.18
         version: 4.1.18
@@ -84,6 +99,18 @@ importers:
       eslint-config-next:
         specifier: ^16.1.4
         version: 16.1.4(@typescript-eslint/parser@8.53.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       shadcn:
         specifier: ^3.7.0
         version: 3.7.0(@types/node@25.0.10)(hono@4.11.5)(typescript@5.9.3)
@@ -305,6 +332,12 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
@@ -718,6 +751,19 @@ packages:
       '@types/react-dom':
         optional: true
   '@radix-ui/react-checkbox@1.3.3':
     resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
     peerDependencies:
@@ -788,6 +834,15 @@ packages:
       '@types/react':
         optional: true
   '@radix-ui/react-dialog@1.1.15':
     resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
     peerDependencies:
@@ -2275,6 +2330,26 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
   eslint-scope@8.4.0:
     resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3681,6 +3756,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
   tagged-tag@1.0.0:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
@@ -4243,6 +4321,14 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
   '@floating-ui/utils@0.2.10': {}
   '@hono/node-server@1.19.9(hono@4.11.5)':
@@ -4584,6 +4670,19 @@ snapshots:
       '@types/react': 19.2.9
       '@types/react-dom': 19.2.3(@types/react@19.2.9)
   '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -4654,6 +4753,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.9
   '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -6262,6 +6367,22 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
   eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
@@ -7830,6 +7951,8 @@ snapshots:
   supports-preserve-symlinks-flag@1.0.0: {}
   tagged-tag@1.0.0: {}
   tailwind-merge@3.4.0: {}

   .:
     dependencies:
+      '@floating-ui/react':
+        specifier: ^0.27.16
+        version: 0.27.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.11
+        version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.12
+        version: 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.16
+        version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-label':
         specifier: ^2.1.8
         version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
         specifier: ^4.3.6
         version: 4.3.6
     devDependencies:
+      '@eslint/js':
+        specifier: ^9.39.2
+        version: 9.39.2
       '@tailwindcss/postcss':
         specifier: ^4.1.18
         version: 4.1.18
       eslint-config-next:
         specifier: ^16.1.4
         version: 16.1.4(@typescript-eslint/parser@8.53.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint-plugin-react-hooks:
+        specifier: ^7.0.1
+        version: 7.0.1(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-simple-import-sort:
+        specifier: ^12.1.1
+        version: 12.1.1(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-tailwindcss:
+        specifier: ^3.18.2
+        version: 3.18.2(tailwindcss@4.1.18)
+      eslint-plugin-unused-imports:
+        specifier: ^4.3.0
+        version: 4.3.0(@typescript-eslint/eslint-plugin@8.53.1(@typescript-eslint/parser@8.53.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))
       shadcn:
         specifier: ^3.7.0
         version: 3.7.0(@types/node@25.0.10)(hono@4.11.5)(typescript@5.9.3)
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
+  '@floating-ui/react@0.27.16':
+    resolution: {integrity: sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==}
+    peerDependencies:
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
       '@types/react-dom':
         optional: true
+  '@radix-ui/react-avatar@1.1.11':
+    resolution: {integrity: sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
   '@radix-ui/react-checkbox@1.3.3':
     resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
     peerDependencies:
       '@types/react':
         optional: true
+  '@radix-ui/react-context@1.1.3':
+    resolution: {integrity: sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
   '@radix-ui/react-dialog@1.1.15':
     resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
     peerDependencies:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+  eslint-plugin-simple-import-sort@12.1.1:
+    resolution: {integrity: sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==}
+    peerDependencies:
+      eslint: '>=5.0.0'
+  eslint-plugin-tailwindcss@3.18.2:
+    resolution: {integrity: sha512-QbkMLDC/OkkjFQ1iz/5jkMdHfiMu/uwujUHLAJK5iwNHD8RTxVTlsUezE0toTZ6VhybNBsk+gYGPDq2agfeRNA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      tailwindcss: ^3.4.0
+  eslint-plugin-unused-imports@4.3.0:
+    resolution: {integrity: sha512-ZFBmXMGBYfHttdRtOG9nFFpmUvMtbHSjsKrS20vdWdbfiVYsO3yA2SGYy9i9XmZJDfMGBflZGBCm70SEnFQtOA==}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0
+      eslint: ^9.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
   eslint-scope@8.4.0:
     resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
+  tabbable@6.4.0:
+    resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
   tagged-tag@1.0.0:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
+  '@floating-ui/react@0.27.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@floating-ui/utils': 0.2.10
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      tabbable: 6.4.0
   '@floating-ui/utils@0.2.10': {}
   '@hono/node-server@1.19.9(hono@4.11.5)':
       '@types/react': 19.2.9
       '@types/react-dom': 19.2.3(@types/react@19.2.9)
+  '@radix-ui/react-avatar@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.3(@types/react@19.2.9)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.9)(react@19.2.3)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.9)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.9)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.9
+      '@types/react-dom': 19.2.3(@types/react@19.2.9)
   '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
     optionalDependencies:
       '@types/react': 19.2.9
+  '@radix-ui/react-context@1.1.3(@types/react@19.2.9)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.9
   '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.9))(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
+  eslint-plugin-simple-import-sort@12.1.1(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+  eslint-plugin-tailwindcss@3.18.2(tailwindcss@4.1.18):
+    dependencies:
+      fast-glob: 3.3.3
+      postcss: 8.5.6
+      tailwindcss: 4.1.18
+  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.53.1(@typescript-eslint/parser@8.53.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 8.53.1(@typescript-eslint/parser@8.53.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
   eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
   supports-preserve-symlinks-flag@1.0.0: {}
+  tabbable@6.4.0: {}
   tagged-tag@1.0.0: {}
   tailwind-merge@3.4.0: {}