From 676641f3dab87a230aae8352a3e752b8f9497cf9 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Sun, 22 Mar 2026 02:21:27 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20refactor:=20Migrate=20to=20`reac?=
 =?UTF-8?q?t-resizable-panels`=20v4=20with=20Artifacts=20Header=20polish?=
 =?UTF-8?q?=20(#12356)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: Update react-resizable-panels dependency to version 4.7.4

- Upgraded the "react-resizable-panels" package in package-lock.json, package.json, and client package.json files to ensure compatibility with the latest features and improvements.
- Adjusted peer dependencies for React and ReactDOM to align with the new version requirements.

* refactor: Update Share and SidePanel components to `react-resizable-panels` v4

- Refactored the ShareArtifactsContainer to utilize a new layout change handler, enhancing artifact panel resizing functionality.
- Updated ArtifactsPanel to use the new `usePanelRef` hook, improving panel reference management.
- Simplified SidePanelGroup by removing unnecessary layout normalization and integrating default layout handling with localStorage.
- Removed the deprecated `normalizeLayout` utility function to streamline the codebase.
- Adjusted Resizable components to ensure consistent sizing and layout behavior across panels.

* style: Enhance scrollbar appearance across application

- Added custom scrollbar styles to both artifacts and markdown files, improving aesthetics and user experience.
- Implemented dark mode adjustments for scrollbar visibility, ensuring consistency across different color schemes.

* style: Standardize button sizes and layout in Artifacts components

- Updated button dimensions to a consistent height of 9 units across various components including Artifacts, Code, and DownloadArtifact.
- Adjusted padding and layout properties in the Artifacts header for improved visual consistency.
- Enhanced the Radio component to accept a new `buttonClassName` prop for better customization of button styles.

* chore: import order
---
 client/package.json                           |  2 +-
 client/src/components/Artifacts/Artifacts.tsx |  5 +-
 client/src/components/Artifacts/Code.tsx      |  1 +
 .../components/Artifacts/DownloadArtifact.tsx |  1 +
 .../src/components/Share/ShareArtifacts.tsx   | 29 +++++-------
 .../components/SidePanel/ArtifactsPanel.tsx   | 27 ++++-------
 .../components/SidePanel/SidePanelGroup.tsx   | 47 +++++++------------
 client/src/utils/artifacts.ts                 |  8 ++++
 client/src/utils/index.ts                     | 18 -------
 client/src/utils/markdown.ts                  | 12 +++++
 package-lock.json                             | 14 +++---
 packages/client/package.json                  |  2 +-
 packages/client/src/components/Radio.tsx      | 10 ++--
 packages/client/src/components/Resizable.tsx  | 34 ++++++--------
 14 files changed, 92 insertions(+), 118 deletions(-)

diff --git a/client/package.json b/client/package.json
index c23c44804c..85d5a176f4 100644
--- a/client/package.json
+++ b/client/package.json
@@ -95,7 +95,7 @@
     "react-hook-form": "^7.43.9",
     "react-i18next": "^15.4.0",
     "react-markdown": "^9.0.1",
-    "react-resizable-panels": "^3.0.6",
+    "react-resizable-panels": "^4.7.4",
     "react-router-dom": "^6.30.3",
     "react-speech-recognition": "^3.10.0",
     "react-textarea-autosize": "^8.4.0",
diff --git a/client/src/components/Artifacts/Artifacts.tsx b/client/src/components/Artifacts/Artifacts.tsx
index 74b2e20180..776f689f08 100644
--- a/client/src/components/Artifacts/Artifacts.tsx
+++ b/client/src/components/Artifacts/Artifacts.tsx
@@ -216,7 +216,7 @@ export default function Artifacts() {
           {/* Header */}
           <div
             className={cn(
-              'flex flex-shrink-0 items-center justify-between gap-2 border-b border-border-light bg-surface-primary-alt px-3 py-2 transition-all duration-300',
+              'flex h-[52px] flex-shrink-0 items-center justify-between gap-2 border-b border-border-light bg-surface-primary-alt p-2 transition-all duration-300',
               isMobile ? 'justify-center' : 'overflow-hidden',
             )}
           >
@@ -234,6 +234,7 @@ export default function Artifacts() {
                   value={activeTab}
                   onChange={setActiveTab}
                   disabled={isMutating && activeTab !== 'code'}
+                  buttonClassName="h-9 px-3 gap-1.5"
                 />
               </div>
             )}
@@ -249,6 +250,7 @@ export default function Artifacts() {
                 <Button
                   size="icon"
                   variant="ghost"
+                  className="h-9 w-9"
                   onClick={handleRefresh}
                   disabled={isRefreshing}
                   aria-label={localize('com_ui_refresh')}
@@ -284,6 +286,7 @@ export default function Artifacts() {
               <Button
                 size="icon"
                 variant="ghost"
+                className="h-9 w-9"
                 onClick={closeArtifacts}
                 aria-label={localize('com_ui_close')}
               >
diff --git a/client/src/components/Artifacts/Code.tsx b/client/src/components/Artifacts/Code.tsx
index 001b010908..61d86262f6 100644
--- a/client/src/components/Artifacts/Code.tsx
+++ b/client/src/components/Artifacts/Code.tsx
@@ -40,6 +40,7 @@ export const CopyCodeButton: React.FC<{ content: string }> = ({ content }) => {
     <Button
       size="icon"
       variant="ghost"
+      className="h-9 w-9"
       onClick={handleCopy}
       aria-label={isCopied ? localize('com_ui_copied') : localize('com_ui_copy_code')}
     >
diff --git a/client/src/components/Artifacts/DownloadArtifact.tsx b/client/src/components/Artifacts/DownloadArtifact.tsx
index c8fb6a12fe..b6d2873c46 100644
--- a/client/src/components/Artifacts/DownloadArtifact.tsx
+++ b/client/src/components/Artifacts/DownloadArtifact.tsx
@@ -38,6 +38,7 @@ const DownloadArtifact = ({ artifact }: { artifact: Artifact }) => {
     <Button
       size="icon"
       variant="ghost"
+      className="h-9 w-9"
       onClick={handleDownload}
       aria-label={localize('com_ui_download_artifact')}
     >
diff --git a/client/src/components/Share/ShareArtifacts.tsx b/client/src/components/Share/ShareArtifacts.tsx
index 6114ce9659..169be72aa0 100644
--- a/client/src/components/Share/ShareArtifacts.tsx
+++ b/client/src/components/Share/ShareArtifacts.tsx
@@ -83,14 +83,9 @@ export function ShareArtifactsContainer({
 
   const normalizedArtifactSize = Math.min(60, Math.max(20, artifactPanelSize));
 
-  /**
-   * Handles artifact panel resize and persists size to localStorage
-   */
-  const handleLayoutChange = (sizes: number[]) => {
-    if (sizes.length < 2) {
-      return;
-    }
-    const newSize = sizes[1];
+  const handleLayoutChanged = (layout: Record<string, number | string>) => {
+    const raw = layout['share-artifacts'];
+    const newSize = typeof raw === 'string' ? parseFloat(raw) : raw;
     if (!Number.isFinite(newSize)) {
       return;
     }
@@ -115,24 +110,22 @@ export function ShareArtifactsContainer({
 
   return (
     <ResizablePanelGroup
-      direction="horizontal"
-      className="flex h-full w-full"
-      onLayout={handleLayoutChange}
+      orientation="horizontal"
+      className="h-full w-full"
+      onLayoutChanged={handleLayoutChanged}
     >
       <ResizablePanel
-        defaultSize={100 - normalizedArtifactSize}
-        minSize={35}
-        order={1}
+        defaultSize={`${100 - normalizedArtifactSize}`}
+        minSize="35"
         id="share-content"
       >
         {mainContent}
       </ResizablePanel>
       <ResizableHandleAlt withHandle className="bg-border-medium text-text-primary" />
       <ResizablePanel
-        defaultSize={normalizedArtifactSize}
-        minSize={20}
-        maxSize={60}
-        order={2}
+        defaultSize={`${normalizedArtifactSize}`}
+        minSize="20"
+        maxSize="60"
         id="share-artifacts"
       >
         <ShareArtifactsPanel contextValue={artifactsContextValue} />
diff --git a/client/src/components/SidePanel/ArtifactsPanel.tsx b/client/src/components/SidePanel/ArtifactsPanel.tsx
index cbdb8d2832..ac9a20e910 100644
--- a/client/src/components/SidePanel/ArtifactsPanel.tsx
+++ b/client/src/components/SidePanel/ArtifactsPanel.tsx
@@ -1,27 +1,21 @@
-import { useRef, useEffect, memo } from 'react';
+import { useEffect, memo } from 'react';
+import { usePanelRef } from 'react-resizable-panels';
 import { ResizableHandleAlt, ResizablePanel } from '@librechat/client';
-import type { ImperativePanelHandle } from 'react-resizable-panels';
 
 interface ArtifactsPanelProps {
   artifacts: React.ReactNode | null;
-  currentLayout: number[];
-  minSizeMain: number;
+  minSizeMain: string;
   shouldRender: boolean;
   onRenderChange: (shouldRender: boolean) => void;
 }
 
-/**
- * ArtifactsPanel component - memoized to prevent unnecessary re-renders
- * Only re-renders when artifacts visibility or layout changes
- */
 const ArtifactsPanel = memo(function ArtifactsPanel({
   artifacts,
-  currentLayout,
   minSizeMain,
   shouldRender,
   onRenderChange,
 }: ArtifactsPanelProps) {
-  const artifactsPanelRef = useRef<ImperativePanelHandle>(null);
+  const artifactsPanelRef = usePanelRef();
 
   useEffect(() => {
     if (artifacts != null) {
@@ -34,7 +28,7 @@ const ArtifactsPanel = memo(function ArtifactsPanel({
     } else if (shouldRender) {
       onRenderChange(false);
     }
-  }, [artifacts, shouldRender, onRenderChange]);
+  }, [artifacts, shouldRender, onRenderChange, artifactsPanelRef]);
 
   if (!shouldRender) {
     return null;
@@ -46,13 +40,12 @@ const ArtifactsPanel = memo(function ArtifactsPanel({
         <ResizableHandleAlt withHandle className="bg-border-medium text-text-primary" />
       )}
       <ResizablePanel
-        ref={artifactsPanelRef}
-        defaultSize={artifacts != null ? currentLayout[1] : 0}
-        minSize={minSizeMain}
-        maxSize={70}
+        defaultSize="50"
+        maxSize="70"
+        collapsedSize="0"
         collapsible={true}
-        collapsedSize={0}
-        order={2}
+        minSize={minSizeMain}
+        panelRef={artifactsPanelRef}
         id="artifacts-panel"
       >
         <div className="h-full min-w-[400px] overflow-hidden">{artifacts}</div>
diff --git a/client/src/components/SidePanel/SidePanelGroup.tsx b/client/src/components/SidePanel/SidePanelGroup.tsx
index dd7af6fbf1..fe5a306576 100644
--- a/client/src/components/SidePanel/SidePanelGroup.tsx
+++ b/client/src/components/SidePanel/SidePanelGroup.tsx
@@ -1,8 +1,10 @@
-import { useState, useEffect, useMemo, memo } from 'react';
-import throttle from 'lodash/throttle';
+import { useState, memo } from 'react';
+import { useDefaultLayout } from 'react-resizable-panels';
 import { ResizablePanel, ResizablePanelGroup, useMediaQuery } from '@librechat/client';
 import ArtifactsPanel from './ArtifactsPanel';
-import { normalizeLayout } from '~/utils';
+
+const PANEL_IDS_SINGLE = ['messages-view'];
+const PANEL_IDS_SPLIT = ['messages-view', 'artifacts-panel'];
 
 interface SidePanelProps {
   artifacts?: React.ReactNode;
@@ -13,46 +15,29 @@ const SidePanelGroup = memo(({ artifacts, children }: SidePanelProps) => {
   const [shouldRenderArtifacts, setShouldRenderArtifacts] = useState(artifacts != null);
   const isSmallScreen = useMediaQuery('(max-width: 767px)');
 
-  const currentLayout = useMemo(() => {
-    if (artifacts == null) {
-      return [100];
-    }
-    return normalizeLayout([50, 50]);
-  }, [artifacts]);
+  const { defaultLayout, onLayoutChanged } = useDefaultLayout({
+    id: 'side-panel-layout',
+    panelIds: artifacts != null ? PANEL_IDS_SPLIT : PANEL_IDS_SINGLE,
+    storage: localStorage,
+  });
 
-  const throttledSaveLayout = useMemo(
-    () =>
-      throttle((sizes: number[]) => {
-        const normalizedSizes = normalizeLayout(sizes);
-        localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes));
-      }, 350),
-    [],
-  );
-
-  useEffect(() => () => throttledSaveLayout.cancel(), [throttledSaveLayout]);
-
-  const minSizeMain = useMemo(() => (artifacts != null ? 15 : 30), [artifacts]);
+  const minSizeMain = artifacts != null ? '15' : '30';
 
   return (
     <>
       <ResizablePanelGroup
-        direction="horizontal"
-        onLayout={(sizes) => throttledSaveLayout(sizes)}
-        className="relative h-full w-full flex-1 overflow-auto bg-presentation"
+        orientation="horizontal"
+        defaultLayout={defaultLayout}
+        onLayoutChanged={onLayoutChanged}
+        className="relative flex-1 bg-presentation"
       >
-        <ResizablePanel
-          defaultSize={currentLayout[0]}
-          minSize={minSizeMain}
-          order={1}
-          id="messages-view"
-        >
+        <ResizablePanel defaultSize="50" minSize={minSizeMain} id="messages-view">
           {children}
         </ResizablePanel>
 
         {!isSmallScreen && (
           <ArtifactsPanel
             artifacts={artifacts}
-            currentLayout={currentLayout}
             minSizeMain={minSizeMain}
             shouldRender={shouldRenderArtifacts}
             onRenderChange={setShouldRenderArtifacts}
diff --git a/client/src/utils/artifacts.ts b/client/src/utils/artifacts.ts
index 516b5c3794..793bc484bc 100644
--- a/client/src/utils/artifacts.ts
+++ b/client/src/utils/artifacts.ts
@@ -189,6 +189,14 @@ export const sharedFiles = {
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
         <script src="https://cdn.tailwindcss.com/3.4.17"></script>
+        <style>
+          ::-webkit-scrollbar{height:.1em;width:.5rem}
+          ::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1);border-radius:9999px}
+          ::-webkit-scrollbar-track{background-color:transparent;border-radius:9999px}
+          @media(prefers-color-scheme:dark){::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.1)}}
+          *{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.1) transparent}
+          @media(prefers-color-scheme:dark){*{scrollbar-color:hsla(0,0%,100%,.1) transparent}}
+        </style>
       </head>
       <body>
         <div id="root"></div>
diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts
index dae075b471..468bc9444c 100644
--- a/client/src/utils/index.ts
+++ b/client/src/utils/index.ts
@@ -113,24 +113,6 @@ export const extractContent = (
   return '';
 };
 
-export const normalizeLayout = (layout: number[]) => {
-  const sum = layout.reduce((acc, size) => acc + size, 0);
-  if (Math.abs(sum - 100) < 0.01) {
-    return layout.map((size) => Number(size.toFixed(2)));
-  }
-
-  const factor = 100 / sum;
-  const normalizedLayout = layout.map((size) => Number((size * factor).toFixed(2)));
-
-  const adjustedSum = normalizedLayout.reduce(
-    (acc, size, index) => (index === layout.length - 1 ? acc : acc + size),
-    0,
-  );
-  normalizedLayout[normalizedLayout.length - 1] = Number((100 - adjustedSum).toFixed(2));
-
-  return normalizedLayout;
-};
-
 export const handleUIAction = async (result: UIActionResult, ask: TAskFunction) => {
   const supportedTypes = ['intent', 'tool', 'prompt'];
 
diff --git a/client/src/utils/markdown.ts b/client/src/utils/markdown.ts
index 7feb156415..52d3363132 100644
--- a/client/src/utils/markdown.ts
+++ b/client/src/utils/markdown.ts
@@ -211,6 +211,18 @@ const markdownCSS = `
     background-color: #21262d;
   }
 }
+
+/* Scrollbar */
+::-webkit-scrollbar { height: 0.1em; width: 0.5rem; }
+::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.1); border-radius: 9999px; }
+::-webkit-scrollbar-track { background-color: transparent; border-radius: 9999px; }
+@media (prefers-color-scheme: dark) {
+  ::-webkit-scrollbar-thumb { background-color: hsla(0,0%,100%,0.1); }
+}
+* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.1) transparent; }
+@media (prefers-color-scheme: dark) {
+  * { scrollbar-color: hsla(0,0%,100%,0.1) transparent; }
+}
 `;
 
 /**
diff --git a/package-lock.json b/package-lock.json
index b7e09a628e..0751562a7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -461,7 +461,7 @@
         "react-hook-form": "^7.43.9",
         "react-i18next": "^15.4.0",
         "react-markdown": "^9.0.1",
-        "react-resizable-panels": "^3.0.6",
+        "react-resizable-panels": "^4.7.4",
         "react-router-dom": "^6.30.3",
         "react-speech-recognition": "^3.10.0",
         "react-textarea-autosize": "^8.4.0",
@@ -38086,13 +38086,13 @@
       }
     },
     "node_modules/react-resizable-panels": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz",
-      "integrity": "sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==",
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.7.4.tgz",
+      "integrity": "sha512-1sehMbUJxZFj4imu1TuH+RS7Xe5Jo+3HyxBYafCEdxPmDeLAQNmKEByyxCQRl7xCLa5cLXSJ9T8acQyyiPsNdQ==",
       "license": "MIT",
       "peerDependencies": {
-        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
-        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/react-router": {
@@ -44131,7 +44131,7 @@
         "react-dom": "^18.2.0 || ^19.1.0",
         "react-hook-form": "^7.56.4",
         "react-i18next": "^15.4.0 || ^15.6.0",
-        "react-resizable-panels": "^3.0.6",
+        "react-resizable-panels": "^4.7.4",
         "react-textarea-autosize": "^8.4.0",
         "tailwind-merge": "^1.9.1"
       }
diff --git a/packages/client/package.json b/packages/client/package.json
index 801d3e389d..434a45121e 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -71,7 +71,7 @@
     "react-dom": "^18.2.0 || ^19.1.0",
     "react-hook-form": "^7.56.4",
     "react-i18next": "^15.4.0 || ^15.6.0",
-    "react-resizable-panels": "^3.0.6",
+    "react-resizable-panels": "^4.7.4",
     "react-textarea-autosize": "^8.4.0",
     "tailwind-merge": "^1.9.1"
   },
diff --git a/packages/client/src/components/Radio.tsx b/packages/client/src/components/Radio.tsx
index 2f52387981..6f1a473617 100644
--- a/packages/client/src/components/Radio.tsx
+++ b/packages/client/src/components/Radio.tsx
@@ -13,6 +13,7 @@ interface RadioProps {
   onChange?: (value: string) => void;
   disabled?: boolean;
   className?: string;
+  buttonClassName?: string;
   fullWidth?: boolean;
   'aria-labelledby'?: string;
 }
@@ -23,6 +24,7 @@ const Radio = memo(function Radio({
   onChange,
   disabled = false,
   className = '',
+  buttonClassName = '',
   fullWidth = false,
   'aria-labelledby': ariaLabelledBy,
 }: RadioProps) {
@@ -45,7 +47,7 @@ const Radio = memo(function Radio({
       if (selectedButton && container) {
         const containerRect = container.getBoundingClientRect();
         const buttonRect = selectedButton.getBoundingClientRect();
-        const offsetLeft = buttonRect.left - containerRect.left - 4;
+        const offsetLeft = buttonRect.left - containerRect.left;
         setBackgroundStyle({
           width: `${buttonRect.width}px`,
           transform: `translateX(${offsetLeft}px)`,
@@ -94,13 +96,13 @@ const Radio = memo(function Radio({
 
   return (
     <div
-      className={`relative ${fullWidth ? 'flex' : 'inline-flex'} items-center rounded-lg bg-muted p-1 ${className}`}
+      className={`relative ${fullWidth ? 'flex' : 'inline-flex'} items-center rounded-lg bg-muted ${className}`}
       role="radiogroup"
       aria-labelledby={ariaLabelledBy}
     >
       {selectedIndex >= 0 && isMounted && (
         <div
-          className="pointer-events-none absolute inset-y-1 rounded-md border border-border/50 bg-background shadow-sm transition-all duration-300 ease-out"
+          className="pointer-events-none absolute inset-y-0 rounded-md border border-border/50 bg-background shadow-sm transition-all duration-300 ease-out"
           style={backgroundStyle}
         />
       )}
@@ -117,7 +119,7 @@ const Radio = memo(function Radio({
           disabled={disabled}
           className={`relative z-10 flex h-[34px] items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
             currentValue === option.value ? 'text-foreground' : 'text-foreground'
-          } ${disabled ? 'cursor-not-allowed opacity-50' : ''} ${fullWidth ? 'flex-1' : ''}`}
+          } ${disabled ? 'cursor-not-allowed opacity-50' : ''} ${fullWidth ? 'flex-1' : ''} ${buttonClassName}`}
         >
           {option.icon && (
             <span className="flex-shrink-0" aria-hidden="true">
diff --git a/packages/client/src/components/Resizable.tsx b/packages/client/src/components/Resizable.tsx
index b44d42be58..817f860313 100644
--- a/packages/client/src/components/Resizable.tsx
+++ b/packages/client/src/components/Resizable.tsx
@@ -1,30 +1,24 @@
 import { GripVertical } from 'lucide-react';
-import * as ResizablePrimitive from 'react-resizable-panels';
-
+import { Group, Panel, Separator } from 'react-resizable-panels';
+import type { ComponentProps } from 'react';
 import { cn } from '~/utils';
 
-const ResizablePanelGroup = ({
-  className = '',
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
-    {...props}
-  />
+const ResizablePanelGroup = ({ className = '', ...props }: ComponentProps<typeof Group>) => (
+  <Group className={cn('h-full w-full', className)} {...props} />
 );
 
-const ResizablePanel = ResizablePrimitive.Panel;
+const ResizablePanel = Panel;
 
 const ResizableHandle = ({
   withHandle,
   className = '',
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: ComponentProps<typeof Separator> & {
   withHandle?: boolean;
 }) => (
-  <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',
       className,
     )}
     {...props}
@@ -34,29 +28,29 @@ const ResizableHandle = ({
         <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}
-  </ResizablePrimitive.PanelResizeHandle>
+  </Separator>
 );
 
 const ResizableHandleAlt = ({
   withHandle,
   className = '',
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: ComponentProps<typeof Separator> & {
   withHandle?: boolean;
 }) => (
-  <ResizablePrimitive.PanelResizeHandle
+  <Separator
     className={cn(
-      'group 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',
+      'group 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',
       className,
     )}
     {...props}
   >
     {withHandle && (
-      <div className="invisible z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border group-hover:visible group-active:visible group-data-[resize-handle-active]:visible">
+      <div className="invisible z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border group-hover:visible group-active:visible group-data-[separator=active]:visible">
         <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}
-  </ResizablePrimitive.PanelResizeHandle>
+  </Separator>
 );
 
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle, ResizableHandleAlt };