<!-- source-hash: 2dae40a159587ffb1e8ec175d1de50c1 -->
React component wrappers for creating resizable panel layouts with customizable styling and optional grip handles.

## Key Components

- **`ResizablePanelGroup`** - Container component that wraps multiple resizable panels with flex layout
- **`ResizablePanel`** - Individual panel component that can be resized (direct export from react-resizable-panels)
- **`ResizableHandle`** - Draggable separator between panels with optional visual grip indicator

## Usage Example

```typescript
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "./resizable"

function MyLayout() {
  return (
    <ResizablePanelGroup direction="horizontal" className="h-screen">
      <ResizablePanel defaultSize={30} minSize={20}>
        <div className="p-4">Sidebar content</div>
      </ResizablePanel>
      
      <ResizableHandle withHandle />
      
      <ResizablePanel defaultSize={70}>
        <div className="p-4">Main content area</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

// Vertical layout with custom styling
function VerticalLayout() {
  return (
    <ResizablePanelGroup 
      direction="vertical" 
      className="min-h-[400px] border rounded-md"
    >
      <ResizablePanel defaultSize={40}>
        <div>Top panel</div>
      </ResizablePanel>
      
      <ResizableHandle withHandle className="bg-gray-200" />
      
      <ResizablePanel defaultSize={60}>
        <div>Bottom panel</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}
```