deps: Bump react-resizable-panels from 3.0.6 to 4.0.10

package.json

@@ -80,7 +80,7 @@
     "react-dom": "^19.2.3",
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^3.0.6",
+    "react-resizable-panels": "^4.0.10",
     "remark-gfm": "^4.0.0",
     "shiki": "^3.20.0",
     "sonner": "^2.0.7",

src/components/ui/resizable.tsx

@@ -1,43 +1,41 @@
-"use client"
+'use client';
 
-import { GripVertical } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import { GripVertical } from 'lucide-react';
+import { Group, Panel, Separator } from 'react-resizable-panels';
 
-import { cn } from "@/lib/utils"
+import type { GroupProps, SeparatorProps } from 'react-resizable-panels';
 
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): React.JSX.Element => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
+import { cn } from '@/lib/utils';
+
+const ResizablePanelGroup = ({ className, ...props }: GroupProps): React.JSX.Element => (
+  <Group
+    className={cn('flex h-full w-full data-[orientation=vertical]:flex-col', className)}
     {...props}
   />
-)
+);
 
-const ResizablePanel = ResizablePrimitive.Panel
+const ResizablePanel = Panel;
 
 const ResizableHandle = ({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+}: SeparatorProps & {
+  withHandle?: boolean;
 }): React.JSX.Element => (
-  <ResizablePrimitive.PanelResizeHandle
+  <Separator
     className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90',
       className
     )}
     {...props}
   >
-    {withHandle ? <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+    {withHandle === true ? (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
         <GripVertical className="h-2.5 w-2.5" />
-      </div> : null}
-  </ResizablePrimitive.PanelResizeHandle>
-)
+      </div>
+    ) : null}
+  </Separator>
+);
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };