diff --git a/apps/v4/app/(create)/components/preview.tsx b/apps/v4/app/(create)/components/preview.tsx
index 4210d739f4..24ae974b8c 100644
--- a/apps/v4/app/(create)/components/preview.tsx
+++ b/apps/v4/app/(create)/components/preview.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { type ImperativePanelHandle } from "react-resizable-panels"
+import { type PanelImperativeHandle } from "react-resizable-panels"
 
 import { DARK_MODE_FORWARD_TYPE } from "@/components/mode-switcher"
 import { Badge } from "@/registry/new-york-v4/ui/badge"
@@ -16,7 +16,7 @@ import {
 export function Preview() {
   const [params] = useDesignSystemSearchParams()
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
-  const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
+  const resizablePanelRef = React.useRef<PanelImperativeHandle>(null)
 
   // Sync resizable panel with URL param changes.
   React.useEffect(() => {
diff --git a/apps/v4/app/(internal)/sink/components/resizable-demo.tsx b/apps/v4/app/(internal)/sink/components/resizable-demo.tsx
index 8f6ed50f02..2ce698b783 100644
--- a/apps/v4/app/(internal)/sink/components/resizable-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/resizable-demo.tsx
@@ -8,24 +8,24 @@ export function ResizableDemo() {
   return (
     <div className="flex w-full flex-col gap-6">
       <ResizablePanelGroup
-        direction="horizontal"
+        orientation="horizontal"
         className="max-w-md rounded-lg border md:min-w-[450px]"
       >
-        <ResizablePanel defaultSize={50}>
+        <ResizablePanel defaultSize="50%">
           <div className="flex h-[200px] items-center justify-center p-6">
             <span className="font-semibold">One</span>
           </div>
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={50}>
-          <ResizablePanelGroup direction="vertical">
-            <ResizablePanel defaultSize={25}>
+        <ResizablePanel defaultSize="50%">
+          <ResizablePanelGroup orientation="vertical">
+            <ResizablePanel defaultSize="25%">
               <div className="flex h-full items-center justify-center p-6">
                 <span className="font-semibold">Two</span>
               </div>
             </ResizablePanel>
             <ResizableHandle />
-            <ResizablePanel defaultSize={75}>
+            <ResizablePanel defaultSize="75%">
               <div className="flex h-full items-center justify-center p-6">
                 <span className="font-semibold">Three</span>
               </div>
@@ -34,32 +34,32 @@ export function ResizableDemo() {
         </ResizablePanel>
       </ResizablePanelGroup>
       <ResizablePanelGroup
-        direction="horizontal"
+        orientation="horizontal"
         className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
       >
-        <ResizablePanel defaultSize={25}>
+        <ResizablePanel defaultSize="25%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Sidebar</span>
           </div>
         </ResizablePanel>
         <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={75}>
+        <ResizablePanel defaultSize="75%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Content</span>
           </div>
         </ResizablePanel>
       </ResizablePanelGroup>
       <ResizablePanelGroup
-        direction="vertical"
+        orientation="vertical"
         className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
       >
-        <ResizablePanel defaultSize={25}>
+        <ResizablePanel defaultSize="25%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Header</span>
           </div>
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={75}>
+        <ResizablePanel defaultSize="75%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Content</span>
           </div>
diff --git a/apps/v4/components/block-viewer.tsx b/apps/v4/components/block-viewer.tsx
index 20db7b5931..4d6eb64334 100644
--- a/apps/v4/components/block-viewer.tsx
+++ b/apps/v4/components/block-viewer.tsx
@@ -16,7 +16,7 @@ import {
   Tablet,
   Terminal,
 } from "lucide-react"
-import { type ImperativePanelHandle } from "react-resizable-panels"
+import { type PanelImperativeHandle } from "react-resizable-panels"
 import {
   type registryItemFileSchema,
   type registryItemSchema,
@@ -68,7 +68,7 @@ type BlockViewerContext = {
   setView: (view: "code" | "preview") => void
   activeFile: string | null
   setActiveFile: (file: string) => void
-  resizablePanelRef: React.RefObject<ImperativePanelHandle | null> | null
+  resizablePanelRef: React.RefObject<PanelImperativeHandle | null> | null
   tree: ReturnType<typeof createFileTreeForRegistryItemFiles> | null
   highlightedFiles:
     | (z.infer<typeof registryItemFileSchema> & {
@@ -101,7 +101,7 @@ function BlockViewerProvider({
   const [activeFile, setActiveFile] = React.useState<
     BlockViewerContext["activeFile"]
   >(highlightedFiles?.[0].target ?? null)
-  const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
+  const resizablePanelRef = React.useRef<PanelImperativeHandle>(null)
   const [iframeKey, setIframeKey] = React.useState(0)
 
   return (
@@ -268,19 +268,19 @@ function BlockViewerView({ styleName }: { styleName: Style["name"] }) {
       <div className="relative grid w-full gap-4">
         <div className="absolute inset-0 right-4 [background-image:radial-gradient(#d4d4d4_1px,transparent_1px)] [background-size:20px_20px] dark:[background-image:radial-gradient(#404040_1px,transparent_1px)]"></div>
         <ResizablePanelGroup
-          direction="horizontal"
+          orientation="horizontal"
           className="after:bg-surface/50 relative z-10 after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-xl"
         >
           <ResizablePanel
-            ref={resizablePanelRef}
+            panelRef={resizablePanelRef}
             className="bg-background relative aspect-[4/2.5] overflow-hidden rounded-lg border md:aspect-auto md:rounded-xl"
-            defaultSize={100}
-            minSize={30}
+            defaultSize="100%"
+            minSize="30%"
           >
             <BlockViewerIframe styleName={styleName} />
           </ResizablePanel>
           <ResizableHandle className="after:bg-border relative hidden w-3 bg-transparent p-0 after:absolute after:top-1/2 after:right-0 after:h-8 after:w-[6px] after:translate-x-[-1px] after:-translate-y-1/2 after:rounded-full after:transition-all after:hover:h-10 md:block" />
-          <ResizablePanel defaultSize={0} minSize={0} />
+          <ResizablePanel defaultSize="0%" minSize="0%" />
         </ResizablePanelGroup>
       </div>
     </div>
diff --git a/apps/v4/content/docs/components/base/resizable.mdx b/apps/v4/content/docs/components/base/resizable.mdx
index cc00257185..7c90653889 100644
--- a/apps/v4/content/docs/components/base/resizable.mdx
+++ b/apps/v4/content/docs/components/base/resizable.mdx
@@ -71,7 +71,7 @@ import {
 ```
 
 ```tsx showLineNumbers
-<ResizablePanelGroup direction="horizontal">
+<ResizablePanelGroup orientation="horizontal">
   <ResizablePanel>One</ResizablePanel>
   <ResizableHandle />
   <ResizablePanel>Two</ResizablePanel>
@@ -82,7 +82,7 @@ import {
 
 ### Vertical
 
-Use `direction="vertical"` for vertical resizing.
+Use `orientation="vertical"` for vertical resizing.
 
 <ComponentPreview styleName="base-nova" name="resizable-vertical" />
 
@@ -101,3 +101,27 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
 ## API Reference
 
 See the [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels) documentation.
+
+## Changelog
+
+### 2025-02-02 `react-resizable-panels` v4
+
+Updated to `react-resizable-panels` v4. See the [v4.0.0 release notes](https://github.com/bvaughn/react-resizable-panels/releases/tag/4.0.0) for full details.
+
+If you're using `react-resizable-panels` primitives directly, note the following changes:
+
+| v3                           | v4                      |
+| ---------------------------- | ----------------------- |
+| `PanelGroup`                 | `Group`                 |
+| `PanelResizeHandle`          | `Separator`             |
+| `direction` prop             | `orientation` prop      |
+| `defaultSize={50}`           | `defaultSize="50%"`     |
+| `onLayout`                   | `onLayoutChange`        |
+| `ImperativePanelHandle`      | `PanelImperativeHandle` |
+| `ref` prop on Panel          | `panelRef` prop         |
+| `data-panel-group-direction` | `aria-orientation`      |
+
+<Callout>
+  The shadcn/ui wrapper components (`ResizablePanelGroup`, `ResizablePanel`,
+  `ResizableHandle`) remain unchanged.
+</Callout>
diff --git a/apps/v4/content/docs/components/radix/resizable.mdx b/apps/v4/content/docs/components/radix/resizable.mdx
index 7eb8442fd8..78ffa09780 100644
--- a/apps/v4/content/docs/components/radix/resizable.mdx
+++ b/apps/v4/content/docs/components/radix/resizable.mdx
@@ -71,7 +71,7 @@ import {
 ```
 
 ```tsx showLineNumbers
-<ResizablePanelGroup direction="horizontal">
+<ResizablePanelGroup orientation="horizontal">
   <ResizablePanel>One</ResizablePanel>
   <ResizableHandle />
   <ResizablePanel>Two</ResizablePanel>
@@ -82,7 +82,7 @@ import {
 
 ### Vertical
 
-Use `direction="vertical"` for vertical resizing.
+Use `orientation="vertical"` for vertical resizing.
 
 <ComponentPreview styleName="radix-nova" name="resizable-vertical" />
 
@@ -101,3 +101,27 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
 ## API Reference
 
 See the [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels) documentation.
+
+## Changelog
+
+### 2025-02-02 `react-resizable-panels` v4
+
+Updated to `react-resizable-panels` v4. See the [v4.0.0 release notes](https://github.com/bvaughn/react-resizable-panels/releases/tag/4.0.0) for full details.
+
+If you're using `react-resizable-panels` primitives directly, note the following changes:
+
+| v3                           | v4                      |
+| ---------------------------- | ----------------------- |
+| `PanelGroup`                 | `Group`                 |
+| `PanelResizeHandle`          | `Separator`             |
+| `direction` prop             | `orientation` prop      |
+| `defaultSize={50}`           | `defaultSize="50%"`     |
+| `onLayout`                   | `onLayoutChange`        |
+| `ImperativePanelHandle`      | `PanelImperativeHandle` |
+| `ref` prop on Panel          | `panelRef` prop         |
+| `data-panel-group-direction` | `aria-orientation`      |
+
+<Callout>
+  The shadcn/ui wrapper components (`ResizablePanelGroup`, `ResizablePanel`,
+  `ResizableHandle`) remain unchanged.
+</Callout>
diff --git a/apps/v4/examples/base/resizable-demo.tsx b/apps/v4/examples/base/resizable-demo.tsx
index aa8d1d71b9..9a719e83df 100644
--- a/apps/v4/examples/base/resizable-demo.tsx
+++ b/apps/v4/examples/base/resizable-demo.tsx
@@ -7,24 +7,24 @@ import {
 export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
-      direction="horizontal"
+      orientation="horizontal"
       className="max-w-sm rounded-lg border"
     >
-      <ResizablePanel defaultSize={50}>
+      <ResizablePanel defaultSize="50%">
         <div className="flex h-[200px] items-center justify-center p-6">
           <span className="font-semibold">One</span>
         </div>
       </ResizablePanel>
-      <ResizableHandle />
-      <ResizablePanel defaultSize={50}>
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={25}>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize="50%">
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel defaultSize="25%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Two</span>
             </div>
           </ResizablePanel>
-          <ResizableHandle />
-          <ResizablePanel defaultSize={75}>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize="75%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Three</span>
             </div>
diff --git a/apps/v4/examples/base/resizable-handle.tsx b/apps/v4/examples/base/resizable-handle.tsx
index 628aa09823..7a3022ef1f 100644
--- a/apps/v4/examples/base/resizable-handle.tsx
+++ b/apps/v4/examples/base/resizable-handle.tsx
@@ -7,16 +7,16 @@ import {
 export default function ResizableHandleDemo() {
   return (
     <ResizablePanelGroup
-      direction="horizontal"
+      orientation="horizontal"
       className="min-h-[200px] max-w-sm rounded-lg border"
     >
-      <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="25%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Sidebar</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={75}>
+      <ResizablePanel defaultSize="75%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Content</span>
         </div>
diff --git a/apps/v4/examples/base/resizable-rtl.tsx b/apps/v4/examples/base/resizable-rtl.tsx
index a7417a3fd1..9f13a889c7 100644
--- a/apps/v4/examples/base/resizable-rtl.tsx
+++ b/apps/v4/examples/base/resizable-rtl.tsx
@@ -44,25 +44,25 @@ export function ResizableRtl() {
 
   return (
     <ResizablePanelGroup
-      direction="horizontal"
+      orientation="horizontal"
       className="max-w-sm rounded-lg border"
       dir={dir}
     >
-      <ResizablePanel defaultSize={50}>
+      <ResizablePanel defaultSize="50%">
         <div className="flex h-[200px] items-center justify-center p-6">
           <span className="font-semibold">{t.one}</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={50}>
-        <ResizablePanelGroup direction="vertical" dir={dir}>
-          <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="50%">
+        <ResizablePanelGroup orientation="vertical" dir={dir}>
+          <ResizablePanel defaultSize="25%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">{t.two}</span>
             </div>
           </ResizablePanel>
           <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={75}>
+          <ResizablePanel defaultSize="75%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">{t.three}</span>
             </div>
diff --git a/apps/v4/examples/base/resizable-vertical.tsx b/apps/v4/examples/base/resizable-vertical.tsx
index c638dce216..a2c6c9e778 100644
--- a/apps/v4/examples/base/resizable-vertical.tsx
+++ b/apps/v4/examples/base/resizable-vertical.tsx
@@ -7,16 +7,16 @@ import {
 export function ResizableVertical() {
   return (
     <ResizablePanelGroup
-      direction="vertical"
+      orientation="vertical"
       className="min-h-[200px] max-w-sm rounded-lg border"
     >
-      <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="25%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Header</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
-      <ResizablePanel defaultSize={75}>
+      <ResizablePanel defaultSize="75%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Content</span>
         </div>
diff --git a/apps/v4/examples/base/ui-rtl/resizable.tsx b/apps/v4/examples/base/ui-rtl/resizable.tsx
index 57c347ae9b..c93bf00c59 100644
--- a/apps/v4/examples/base/ui-rtl/resizable.tsx
+++ b/apps/v4/examples/base/ui-rtl/resizable.tsx
@@ -1,18 +1,17 @@
 "use client"
 
-import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+}: ResizablePrimitive.GroupProps) {
   return (
-    <ResizablePrimitive.PanelGroup
+    <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
       className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
         className
       )}
       {...props}
@@ -20,9 +19,7 @@ function ResizablePanelGroup({
   )
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
   return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
 }
 
@@ -30,14 +27,14 @@ function ResizableHandle({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: ResizablePrimitive.SeparatorProps & {
   withHandle?: boolean
 }) {
   return (
-    <ResizablePrimitive.PanelResizeHandle
+    <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:start-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:data-[panel-group-direction=vertical]:after:-translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
@@ -45,8 +42,8 @@ function ResizableHandle({
       {withHandle && (
         <div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
       )}
-    </ResizablePrimitive.PanelResizeHandle>
+    </ResizablePrimitive.Separator>
   )
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/apps/v4/examples/base/ui/resizable.tsx b/apps/v4/examples/base/ui/resizable.tsx
index c7c8c59662..c93adbc639 100644
--- a/apps/v4/examples/base/ui/resizable.tsx
+++ b/apps/v4/examples/base/ui/resizable.tsx
@@ -1,18 +1,17 @@
 "use client"
 
-import * as React from "react"
 import { cn } from "@/examples/base/lib/utils"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+}: ResizablePrimitive.GroupProps) {
   return (
-    <ResizablePrimitive.PanelGroup
+    <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
       className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
         className
       )}
       {...props}
@@ -20,9 +19,7 @@ function ResizablePanelGroup({
   )
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
   return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
 }
 
@@ -30,14 +27,14 @@ function ResizableHandle({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: ResizablePrimitive.SeparatorProps & {
   withHandle?: boolean
 }) {
   return (
-    <ResizablePrimitive.PanelResizeHandle
+    <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
@@ -45,8 +42,8 @@ function ResizableHandle({
       {withHandle && (
         <div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
       )}
-    </ResizablePrimitive.PanelResizeHandle>
+    </ResizablePrimitive.Separator>
   )
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/apps/v4/examples/radix/resizable-demo.tsx b/apps/v4/examples/radix/resizable-demo.tsx
index 01b54c0200..a97ff7e0da 100644
--- a/apps/v4/examples/radix/resizable-demo.tsx
+++ b/apps/v4/examples/radix/resizable-demo.tsx
@@ -7,24 +7,24 @@ import {
 export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
-      direction="horizontal"
+      orientation="horizontal"
       className="max-w-sm rounded-lg border"
     >
-      <ResizablePanel defaultSize={50}>
+      <ResizablePanel defaultSize="50%">
         <div className="flex h-[200px] items-center justify-center p-6">
           <span className="font-semibold">One</span>
         </div>
       </ResizablePanel>
-      <ResizableHandle />
-      <ResizablePanel defaultSize={50}>
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={25}>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize="50%">
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel defaultSize="25%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Two</span>
             </div>
           </ResizablePanel>
-          <ResizableHandle />
-          <ResizablePanel defaultSize={75}>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize="75%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Three</span>
             </div>
diff --git a/apps/v4/examples/radix/resizable-handle.tsx b/apps/v4/examples/radix/resizable-handle.tsx
index f1eb479710..42597cad63 100644
--- a/apps/v4/examples/radix/resizable-handle.tsx
+++ b/apps/v4/examples/radix/resizable-handle.tsx
@@ -7,16 +7,16 @@ import {
 export default function ResizableHandleDemo() {
   return (
     <ResizablePanelGroup
-      direction="horizontal"
+      orientation="horizontal"
       className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
     >
-      <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="25%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Sidebar</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={75}>
+      <ResizablePanel defaultSize="75%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Content</span>
         </div>
diff --git a/apps/v4/examples/radix/resizable-rtl.tsx b/apps/v4/examples/radix/resizable-rtl.tsx
index 383f3899e5..004df77821 100644
--- a/apps/v4/examples/radix/resizable-rtl.tsx
+++ b/apps/v4/examples/radix/resizable-rtl.tsx
@@ -44,25 +44,25 @@ export function ResizableRtl() {
 
   return (
     <ResizablePanelGroup
-      direction="horizontal"
+      orientation="horizontal"
       className="max-w-sm rounded-lg border"
       dir={dir}
     >
-      <ResizablePanel defaultSize={50}>
+      <ResizablePanel defaultSize="50%">
         <div className="flex h-[200px] items-center justify-center p-6">
           <span className="font-semibold">{t.one}</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={50}>
-        <ResizablePanelGroup direction="vertical" dir={dir}>
-          <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="50%">
+        <ResizablePanelGroup orientation="vertical" dir={dir}>
+          <ResizablePanel defaultSize="25%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">{t.two}</span>
             </div>
           </ResizablePanel>
           <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={75}>
+          <ResizablePanel defaultSize="75%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">{t.three}</span>
             </div>
diff --git a/apps/v4/examples/radix/resizable-vertical.tsx b/apps/v4/examples/radix/resizable-vertical.tsx
index 8c9fa03a45..8ff89aad7b 100644
--- a/apps/v4/examples/radix/resizable-vertical.tsx
+++ b/apps/v4/examples/radix/resizable-vertical.tsx
@@ -7,16 +7,16 @@ import {
 export function ResizableVertical() {
   return (
     <ResizablePanelGroup
-      direction="vertical"
+      orientation="vertical"
       className="min-h-[200px] max-w-sm rounded-lg border"
     >
-      <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="25%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Header</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
-      <ResizablePanel defaultSize={75}>
+      <ResizablePanel defaultSize="75%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Content</span>
         </div>
diff --git a/apps/v4/examples/radix/ui-rtl/resizable.tsx b/apps/v4/examples/radix/ui-rtl/resizable.tsx
index 990b4c9032..869f393be3 100644
--- a/apps/v4/examples/radix/ui-rtl/resizable.tsx
+++ b/apps/v4/examples/radix/ui-rtl/resizable.tsx
@@ -1,18 +1,17 @@
 "use client"
 
-import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+}: ResizablePrimitive.GroupProps) {
   return (
-    <ResizablePrimitive.PanelGroup
+    <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
       className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
         className
       )}
       {...props}
@@ -20,9 +19,7 @@ function ResizablePanelGroup({
   )
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
   return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
 }
 
@@ -30,14 +27,14 @@ function ResizableHandle({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: ResizablePrimitive.SeparatorProps & {
   withHandle?: boolean
 }) {
   return (
-    <ResizablePrimitive.PanelResizeHandle
+    <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:start-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:data-[panel-group-direction=vertical]:after:-translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
@@ -45,8 +42,8 @@ function ResizableHandle({
       {withHandle && (
         <div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
       )}
-    </ResizablePrimitive.PanelResizeHandle>
+    </ResizablePrimitive.Separator>
   )
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/apps/v4/examples/radix/ui/resizable.tsx b/apps/v4/examples/radix/ui/resizable.tsx
index ceb034731d..0cf214b966 100644
--- a/apps/v4/examples/radix/ui/resizable.tsx
+++ b/apps/v4/examples/radix/ui/resizable.tsx
@@ -1,18 +1,17 @@
 "use client"
 
-import * as React from "react"
 import { cn } from "@/examples/radix/lib/utils"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+}: ResizablePrimitive.GroupProps) {
   return (
-    <ResizablePrimitive.PanelGroup
+    <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
       className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
         className
       )}
       {...props}
@@ -20,9 +19,7 @@ function ResizablePanelGroup({
   )
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
   return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
 }
 
@@ -30,14 +27,14 @@ function ResizableHandle({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: ResizablePrimitive.SeparatorProps & {
   withHandle?: boolean
 }) {
   return (
-    <ResizablePrimitive.PanelResizeHandle
+    <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
@@ -45,8 +42,8 @@ function ResizableHandle({
       {withHandle && (
         <div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
       )}
-    </ResizablePrimitive.PanelResizeHandle>
+    </ResizablePrimitive.Separator>
   )
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/apps/v4/package.json b/apps/v4/package.json
index 3532923ca6..d818dbc02e 100644
--- a/apps/v4/package.json
+++ b/apps/v4/package.json
@@ -68,7 +68,7 @@
     "react-day-picker": "^9.7.0",
     "react-dom": "19.2.3",
     "react-hook-form": "^7.62.0",
-    "react-resizable-panels": "^3.0.6",
+    "react-resizable-panels": "^4",
     "react-textarea-autosize": "^8.5.9",
     "recharts": "2.15.1",
     "rehype-pretty-code": "^0.14.1",
diff --git a/apps/v4/public/r/styles/base-lyra/resizable-example.json b/apps/v4/public/r/styles/base-lyra/resizable-example.json
index cbfad52f82..158631b741 100644
--- a/apps/v4/public/r/styles/base-lyra/resizable-example.json
+++ b/apps/v4/public/r/styles/base-lyra/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-lyra/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        direction=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup direction=\"horizontal\" className=\"rounded-lg border\">\n        <ResizablePanel defaultSize={50}>\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={50}>\n          <ResizablePanelGroup direction=\"vertical\">\n            <ResizablePanel defaultSize={25}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize={75}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [sizes, setSizes] = React.useState([30, 70])\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayout={(newSizes) => {\n          setSizes(newSizes)\n        }}\n      >\n        <ResizablePanel defaultSize={30} minSize={20}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[0] ?? 30)}%</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={70} minSize={30}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[1] ?? 70)}%</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-lyra/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/resizable.json b/apps/v4/public/r/styles/base-lyra/resizable.json
index 0d481618ba..c8daa19e9f 100644
--- a/apps/v4/public/r/styles/base-lyra/resizable.json
+++ b/apps/v4/public/r/styles/base-lyra/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/resizable-example.json b/apps/v4/public/r/styles/base-maia/resizable-example.json
index cb72540b09..ab4bd41bd8 100644
--- a/apps/v4/public/r/styles/base-maia/resizable-example.json
+++ b/apps/v4/public/r/styles/base-maia/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-maia/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        direction=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup direction=\"horizontal\" className=\"rounded-lg border\">\n        <ResizablePanel defaultSize={50}>\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={50}>\n          <ResizablePanelGroup direction=\"vertical\">\n            <ResizablePanel defaultSize={25}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize={75}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [sizes, setSizes] = React.useState([30, 70])\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayout={(newSizes) => {\n          setSizes(newSizes)\n        }}\n      >\n        <ResizablePanel defaultSize={30} minSize={20}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[0] ?? 30)}%</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={70} minSize={30}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[1] ?? 70)}%</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-maia/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/resizable.json b/apps/v4/public/r/styles/base-maia/resizable.json
index 629f7a52ef..c1ce996b73 100644
--- a/apps/v4/public/r/styles/base-maia/resizable.json
+++ b/apps/v4/public/r/styles/base-maia/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/resizable-example.json b/apps/v4/public/r/styles/base-mira/resizable-example.json
index bd8bef9c8b..97ef5e8990 100644
--- a/apps/v4/public/r/styles/base-mira/resizable-example.json
+++ b/apps/v4/public/r/styles/base-mira/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-mira/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        direction=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup direction=\"horizontal\" className=\"rounded-lg border\">\n        <ResizablePanel defaultSize={50}>\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={50}>\n          <ResizablePanelGroup direction=\"vertical\">\n            <ResizablePanel defaultSize={25}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize={75}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [sizes, setSizes] = React.useState([30, 70])\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayout={(newSizes) => {\n          setSizes(newSizes)\n        }}\n      >\n        <ResizablePanel defaultSize={30} minSize={20}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[0] ?? 30)}%</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={70} minSize={30}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[1] ?? 70)}%</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-mira/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/resizable.json b/apps/v4/public/r/styles/base-mira/resizable.json
index c7d5bdaf46..3684df933a 100644
--- a/apps/v4/public/r/styles/base-mira/resizable.json
+++ b/apps/v4/public/r/styles/base-mira/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/resizable-example.json b/apps/v4/public/r/styles/base-nova/resizable-example.json
index 8472bcf78c..d86ed818fb 100644
--- a/apps/v4/public/r/styles/base-nova/resizable-example.json
+++ b/apps/v4/public/r/styles/base-nova/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-nova/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        direction=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup direction=\"horizontal\" className=\"rounded-lg border\">\n        <ResizablePanel defaultSize={50}>\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={50}>\n          <ResizablePanelGroup direction=\"vertical\">\n            <ResizablePanel defaultSize={25}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize={75}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [sizes, setSizes] = React.useState([30, 70])\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayout={(newSizes) => {\n          setSizes(newSizes)\n        }}\n      >\n        <ResizablePanel defaultSize={30} minSize={20}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[0] ?? 30)}%</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={70} minSize={30}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[1] ?? 70)}%</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-nova/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/resizable.json b/apps/v4/public/r/styles/base-nova/resizable.json
index e4dbfabfb4..806229059b 100644
--- a/apps/v4/public/r/styles/base-nova/resizable.json
+++ b/apps/v4/public/r/styles/base-nova/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/resizable-example.json b/apps/v4/public/r/styles/base-vega/resizable-example.json
index b5f6745f48..24b6f6bd48 100644
--- a/apps/v4/public/r/styles/base-vega/resizable-example.json
+++ b/apps/v4/public/r/styles/base-vega/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-vega/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        direction=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup direction=\"horizontal\" className=\"rounded-lg border\">\n        <ResizablePanel defaultSize={50}>\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={50}>\n          <ResizablePanelGroup direction=\"vertical\">\n            <ResizablePanel defaultSize={25}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize={75}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [sizes, setSizes] = React.useState([30, 70])\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayout={(newSizes) => {\n          setSizes(newSizes)\n        }}\n      >\n        <ResizablePanel defaultSize={30} minSize={20}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[0] ?? 30)}%</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={70} minSize={30}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[1] ?? 70)}%</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/base-vega/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/resizable.json b/apps/v4/public/r/styles/base-vega/resizable.json
index c9a7885172..2419a9fcbb 100644
--- a/apps/v4/public/r/styles/base-vega/resizable.json
+++ b/apps/v4/public/r/styles/base-vega/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/resizable-demo-with-handle.json b/apps/v4/public/r/styles/new-york-v4/resizable-demo-with-handle.json
index 15319e244f..4ac2d349b2 100644
--- a/apps/v4/public/r/styles/new-york-v4/resizable-demo-with-handle.json
+++ b/apps/v4/public/r/styles/new-york-v4/resizable-demo-with-handle.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/resizable-demo-with-handle.tsx",
-      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle withHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      orientation=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize=\"50%\">\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize=\"50%\">\n        <ResizablePanelGroup orientation=\"vertical\">\n          <ResizablePanel defaultSize=\"25%\">\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle withHandle />\n          <ResizablePanel defaultSize=\"75%\">\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/resizable-demo.json b/apps/v4/public/r/styles/new-york-v4/resizable-demo.json
index 7dcec3137c..ad043ce237 100644
--- a/apps/v4/public/r/styles/new-york-v4/resizable-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/resizable-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/resizable-demo.tsx",
-      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      orientation=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize=\"50%\">\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize=\"50%\">\n        <ResizablePanelGroup orientation=\"vertical\">\n          <ResizablePanel defaultSize=\"25%\">\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle />\n          <ResizablePanel defaultSize=\"75%\">\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/resizable-handle.json b/apps/v4/public/r/styles/new-york-v4/resizable-handle.json
index 380a9f8613..e1ddf8dd70 100644
--- a/apps/v4/public/r/styles/new-york-v4/resizable-handle.json
+++ b/apps/v4/public/r/styles/new-york-v4/resizable-handle.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/resizable-handle.tsx",
-      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      orientation=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize=\"25%\">\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize=\"75%\">\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/resizable-vertical.json b/apps/v4/public/r/styles/new-york-v4/resizable-vertical.json
index 6a4b9b4d7b..e13741ae19 100644
--- a/apps/v4/public/r/styles/new-york-v4/resizable-vertical.json
+++ b/apps/v4/public/r/styles/new-york-v4/resizable-vertical.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/resizable-vertical.tsx",
-      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"vertical\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Header</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york-v4/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      orientation=\"vertical\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize=\"25%\">\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Header</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize=\"75%\">\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/resizable.json b/apps/v4/public/r/styles/new-york-v4/resizable.json
index a744bbb78e..30ff10a45d 100644
--- a/apps/v4/public/r/styles/new-york-v4/resizable.json
+++ b/apps/v4/public/r/styles/new-york-v4/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/resizable-example.json b/apps/v4/public/r/styles/radix-lyra/resizable-example.json
index 14d09a8f97..625a477af1 100644
--- a/apps/v4/public/r/styles/radix-lyra/resizable-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-lyra/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        direction=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup direction=\"horizontal\" className=\"rounded-lg border\">\n        <ResizablePanel defaultSize={50}>\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={50}>\n          <ResizablePanelGroup direction=\"vertical\">\n            <ResizablePanel defaultSize={25}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize={75}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [sizes, setSizes] = React.useState([30, 70])\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayout={(newSizes) => {\n          setSizes(newSizes)\n        }}\n      >\n        <ResizablePanel defaultSize={30} minSize={20}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[0] ?? 30)}%</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={70} minSize={30}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[1] ?? 70)}%</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-lyra/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/resizable.json b/apps/v4/public/r/styles/radix-lyra/resizable.json
index 0fec519e52..a345efa152 100644
--- a/apps/v4/public/r/styles/radix-lyra/resizable.json
+++ b/apps/v4/public/r/styles/radix-lyra/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/resizable-example.json b/apps/v4/public/r/styles/radix-maia/resizable-example.json
index 1845364907..27291ff67e 100644
--- a/apps/v4/public/r/styles/radix-maia/resizable-example.json
+++ b/apps/v4/public/r/styles/radix-maia/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-maia/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        direction=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup direction=\"horizontal\" className=\"rounded-lg border\">\n        <ResizablePanel defaultSize={50}>\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={50}>\n          <ResizablePanelGroup direction=\"vertical\">\n            <ResizablePanel defaultSize={25}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize={75}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [sizes, setSizes] = React.useState([30, 70])\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayout={(newSizes) => {\n          setSizes(newSizes)\n        }}\n      >\n        <ResizablePanel defaultSize={30} minSize={20}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[0] ?? 30)}%</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={70} minSize={30}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[1] ?? 70)}%</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-maia/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/resizable.json b/apps/v4/public/r/styles/radix-maia/resizable.json
index 4eaa12e122..807e16f7f8 100644
--- a/apps/v4/public/r/styles/radix-maia/resizable.json
+++ b/apps/v4/public/r/styles/radix-maia/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/resizable-example.json b/apps/v4/public/r/styles/radix-mira/resizable-example.json
index 07b4f8737d..b8ded1b87b 100644
--- a/apps/v4/public/r/styles/radix-mira/resizable-example.json
+++ b/apps/v4/public/r/styles/radix-mira/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-mira/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        direction=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup direction=\"horizontal\" className=\"rounded-lg border\">\n        <ResizablePanel defaultSize={50}>\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={50}>\n          <ResizablePanelGroup direction=\"vertical\">\n            <ResizablePanel defaultSize={25}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize={75}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [sizes, setSizes] = React.useState([30, 70])\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayout={(newSizes) => {\n          setSizes(newSizes)\n        }}\n      >\n        <ResizablePanel defaultSize={30} minSize={20}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[0] ?? 30)}%</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={70} minSize={30}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[1] ?? 70)}%</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-mira/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/resizable.json b/apps/v4/public/r/styles/radix-mira/resizable.json
index abedd6afda..89114e7dcb 100644
--- a/apps/v4/public/r/styles/radix-mira/resizable.json
+++ b/apps/v4/public/r/styles/radix-mira/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/resizable-example.json b/apps/v4/public/r/styles/radix-nova/resizable-example.json
index c153f434c0..0d8cf7667c 100644
--- a/apps/v4/public/r/styles/radix-nova/resizable-example.json
+++ b/apps/v4/public/r/styles/radix-nova/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-nova/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        direction=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup direction=\"horizontal\" className=\"rounded-lg border\">\n        <ResizablePanel defaultSize={50}>\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={50}>\n          <ResizablePanelGroup direction=\"vertical\">\n            <ResizablePanel defaultSize={25}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize={75}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [sizes, setSizes] = React.useState([30, 70])\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayout={(newSizes) => {\n          setSizes(newSizes)\n        }}\n      >\n        <ResizablePanel defaultSize={30} minSize={20}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[0] ?? 30)}%</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={70} minSize={30}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[1] ?? 70)}%</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-nova/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/resizable.json b/apps/v4/public/r/styles/radix-nova/resizable.json
index 41f3b7531f..642a9b7537 100644
--- a/apps/v4/public/r/styles/radix-nova/resizable.json
+++ b/apps/v4/public/r/styles/radix-nova/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/resizable-example.json b/apps/v4/public/r/styles/radix-vega/resizable-example.json
index a60ff0dc75..d56799f88d 100644
--- a/apps/v4/public/r/styles/radix-vega/resizable-example.json
+++ b/apps/v4/public/r/styles/radix-vega/resizable-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/resizable-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-vega/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        direction=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize={25}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize={75}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup direction=\"horizontal\" className=\"rounded-lg border\">\n        <ResizablePanel defaultSize={50}>\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={50}>\n          <ResizablePanelGroup direction=\"vertical\">\n            <ResizablePanel defaultSize={25}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize={75}>\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [sizes, setSizes] = React.useState([30, 70])\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayout={(newSizes) => {\n          setSizes(newSizes)\n        }}\n      >\n        <ResizablePanel defaultSize={30} minSize={20}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[0] ?? 30)}%</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize={70} minSize={30}>\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">{Math.round(sizes[1] ?? 70)}%</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Layout } from \"react-resizable-panels\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/radix-vega/ui/resizable\"\n\nexport default function ResizableExample() {\n  return (\n    <ExampleWrapper>\n      <ResizableHorizontal />\n      <ResizableVertical />\n      <ResizableWithHandle />\n      <ResizableNested />\n      <ResizableControlled />\n    </ExampleWrapper>\n  )\n}\n\nfunction ResizableHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ResizablePanelGroup\n        orientation=\"vertical\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Header</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableWithHandle() {\n  return (\n    <Example title=\"With Handle\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"25%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize=\"75%\">\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableNested() {\n  return (\n    <Example title=\"Nested\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-lg border\"\n      >\n        <ResizablePanel defaultSize=\"50%\">\n          <div className=\"flex h-[200px] items-center justify-center p-6\">\n            <span className=\"font-semibold\">One</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"50%\">\n          <ResizablePanelGroup orientation=\"vertical\">\n            <ResizablePanel defaultSize=\"25%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Two</span>\n              </div>\n            </ResizablePanel>\n            <ResizableHandle />\n            <ResizablePanel defaultSize=\"75%\">\n              <div className=\"flex h-full items-center justify-center p-6\">\n                <span className=\"font-semibold\">Three</span>\n              </div>\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n\nfunction ResizableControlled() {\n  const [layout, setLayout] = React.useState<Layout>({})\n\n  return (\n    <Example title=\"Controlled\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"min-h-[200px] rounded-lg border\"\n        onLayoutChange={setLayout}\n      >\n        <ResizablePanel defaultSize=\"30%\" id=\"left\" minSize=\"20%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.left ?? 30)}%\n            </span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle />\n        <ResizablePanel defaultSize=\"70%\" id=\"right\" minSize=\"30%\">\n          <div className=\"flex h-full flex-col items-center justify-center gap-2 p-6\">\n            <span className=\"font-semibold\">\n              {Math.round(layout.right ?? 70)}%\n            </span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/resizable.json b/apps/v4/public/r/styles/radix-vega/resizable.json
index c305032c7a..fb3dcb8ce0 100644
--- a/apps/v4/public/r/styles/radix-vega/resizable.json
+++ b/apps/v4/public/r/styles/radix-vega/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/registry/bases/base/examples/resizable-example.tsx b/apps/v4/registry/bases/base/examples/resizable-example.tsx
index 4f6bfb2426..f243393cc7 100644
--- a/apps/v4/registry/bases/base/examples/resizable-example.tsx
+++ b/apps/v4/registry/bases/base/examples/resizable-example.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import type { Layout } from "react-resizable-panels"
 
 import {
   Example,
@@ -28,16 +29,16 @@ function ResizableHorizontal() {
   return (
     <Example title="Horizontal">
       <ResizablePanelGroup
-        direction="horizontal"
+        orientation="horizontal"
         className="min-h-[200px] rounded-lg border"
       >
-        <ResizablePanel defaultSize={25}>
+        <ResizablePanel defaultSize="25%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Sidebar</span>
           </div>
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={75}>
+        <ResizablePanel defaultSize="75%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Content</span>
           </div>
@@ -51,16 +52,16 @@ function ResizableVertical() {
   return (
     <Example title="Vertical">
       <ResizablePanelGroup
-        direction="vertical"
+        orientation="vertical"
         className="min-h-[200px] rounded-lg border"
       >
-        <ResizablePanel defaultSize={25}>
+        <ResizablePanel defaultSize="25%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Header</span>
           </div>
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={75}>
+        <ResizablePanel defaultSize="75%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Content</span>
           </div>
@@ -74,16 +75,16 @@ function ResizableWithHandle() {
   return (
     <Example title="With Handle">
       <ResizablePanelGroup
-        direction="horizontal"
+        orientation="horizontal"
         className="min-h-[200px] rounded-lg border"
       >
-        <ResizablePanel defaultSize={25}>
+        <ResizablePanel defaultSize="25%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Sidebar</span>
           </div>
         </ResizablePanel>
         <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={75}>
+        <ResizablePanel defaultSize="75%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Content</span>
           </div>
@@ -96,22 +97,25 @@ function ResizableWithHandle() {
 function ResizableNested() {
   return (
     <Example title="Nested">
-      <ResizablePanelGroup direction="horizontal" className="rounded-lg border">
-        <ResizablePanel defaultSize={50}>
+      <ResizablePanelGroup
+        orientation="horizontal"
+        className="rounded-lg border"
+      >
+        <ResizablePanel defaultSize="50%">
           <div className="flex h-[200px] items-center justify-center p-6">
             <span className="font-semibold">One</span>
           </div>
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={50}>
-          <ResizablePanelGroup direction="vertical">
-            <ResizablePanel defaultSize={25}>
+        <ResizablePanel defaultSize="50%">
+          <ResizablePanelGroup orientation="vertical">
+            <ResizablePanel defaultSize="25%">
               <div className="flex h-full items-center justify-center p-6">
                 <span className="font-semibold">Two</span>
               </div>
             </ResizablePanel>
             <ResizableHandle />
-            <ResizablePanel defaultSize={75}>
+            <ResizablePanel defaultSize="75%">
               <div className="flex h-full items-center justify-center p-6">
                 <span className="font-semibold">Three</span>
               </div>
@@ -124,26 +128,28 @@ function ResizableNested() {
 }
 
 function ResizableControlled() {
-  const [sizes, setSizes] = React.useState([30, 70])
+  const [layout, setLayout] = React.useState<Layout>({})
 
   return (
     <Example title="Controlled">
       <ResizablePanelGroup
-        direction="horizontal"
+        orientation="horizontal"
         className="min-h-[200px] rounded-lg border"
-        onLayout={(newSizes) => {
-          setSizes(newSizes)
-        }}
+        onLayoutChange={setLayout}
       >
-        <ResizablePanel defaultSize={30} minSize={20}>
+        <ResizablePanel defaultSize="30%" id="left" minSize="20%">
           <div className="flex h-full flex-col items-center justify-center gap-2 p-6">
-            <span className="font-semibold">{Math.round(sizes[0] ?? 30)}%</span>
+            <span className="font-semibold">
+              {Math.round(layout.left ?? 30)}%
+            </span>
           </div>
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={70} minSize={30}>
+        <ResizablePanel defaultSize="70%" id="right" minSize="30%">
           <div className="flex h-full flex-col items-center justify-center gap-2 p-6">
-            <span className="font-semibold">{Math.round(sizes[1] ?? 70)}%</span>
+            <span className="font-semibold">
+              {Math.round(layout.right ?? 70)}%
+            </span>
           </div>
         </ResizablePanel>
       </ResizablePanelGroup>
diff --git a/apps/v4/registry/bases/base/ui/resizable.tsx b/apps/v4/registry/bases/base/ui/resizable.tsx
index 68e5d20455..193b380200 100644
--- a/apps/v4/registry/bases/base/ui/resizable.tsx
+++ b/apps/v4/registry/bases/base/ui/resizable.tsx
@@ -1,6 +1,5 @@
 "use client"
 
-import * as React from "react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from "@/registry/bases/base/lib/utils"
@@ -8,12 +7,12 @@ import { cn } from "@/registry/bases/base/lib/utils"
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+}: ResizablePrimitive.GroupProps) {
   return (
-    <ResizablePrimitive.PanelGroup
+    <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
       className={cn(
-        "cn-resizable-panel-group flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        "cn-resizable-panel-group flex h-full w-full aria-[orientation=vertical]:flex-col",
         className
       )}
       {...props}
@@ -21,9 +20,7 @@ function ResizablePanelGroup({
   )
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
   return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
 }
 
@@ -31,14 +28,14 @@ function ResizableHandle({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: ResizablePrimitive.SeparatorProps & {
   withHandle?: boolean
 }) {
   return (
-    <ResizablePrimitive.PanelResizeHandle
+    <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "cn-resizable-handle bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "cn-resizable-handle bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
@@ -46,8 +43,8 @@ function ResizableHandle({
       {withHandle && (
         <div className="cn-resizable-handle-icon z-10 flex shrink-0" />
       )}
-    </ResizablePrimitive.PanelResizeHandle>
+    </ResizablePrimitive.Separator>
   )
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/apps/v4/registry/bases/radix/examples/resizable-example.tsx b/apps/v4/registry/bases/radix/examples/resizable-example.tsx
index 1640fe607f..22fa7ffe83 100644
--- a/apps/v4/registry/bases/radix/examples/resizable-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/resizable-example.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import type { Layout } from "react-resizable-panels"
 
 import {
   Example,
@@ -28,16 +29,16 @@ function ResizableHorizontal() {
   return (
     <Example title="Horizontal">
       <ResizablePanelGroup
-        direction="horizontal"
+        orientation="horizontal"
         className="min-h-[200px] rounded-lg border"
       >
-        <ResizablePanel defaultSize={25}>
+        <ResizablePanel defaultSize="25%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Sidebar</span>
           </div>
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={75}>
+        <ResizablePanel defaultSize="75%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Content</span>
           </div>
@@ -51,16 +52,16 @@ function ResizableVertical() {
   return (
     <Example title="Vertical">
       <ResizablePanelGroup
-        direction="vertical"
+        orientation="vertical"
         className="min-h-[200px] rounded-lg border"
       >
-        <ResizablePanel defaultSize={25}>
+        <ResizablePanel defaultSize="25%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Header</span>
           </div>
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={75}>
+        <ResizablePanel defaultSize="75%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Content</span>
           </div>
@@ -74,16 +75,16 @@ function ResizableWithHandle() {
   return (
     <Example title="With Handle">
       <ResizablePanelGroup
-        direction="horizontal"
+        orientation="horizontal"
         className="min-h-[200px] rounded-lg border"
       >
-        <ResizablePanel defaultSize={25}>
+        <ResizablePanel defaultSize="25%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Sidebar</span>
           </div>
         </ResizablePanel>
         <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={75}>
+        <ResizablePanel defaultSize="75%">
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Content</span>
           </div>
@@ -96,22 +97,25 @@ function ResizableWithHandle() {
 function ResizableNested() {
   return (
     <Example title="Nested">
-      <ResizablePanelGroup direction="horizontal" className="rounded-lg border">
-        <ResizablePanel defaultSize={50}>
+      <ResizablePanelGroup
+        orientation="horizontal"
+        className="rounded-lg border"
+      >
+        <ResizablePanel defaultSize="50%">
           <div className="flex h-[200px] items-center justify-center p-6">
             <span className="font-semibold">One</span>
           </div>
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={50}>
-          <ResizablePanelGroup direction="vertical">
-            <ResizablePanel defaultSize={25}>
+        <ResizablePanel defaultSize="50%">
+          <ResizablePanelGroup orientation="vertical">
+            <ResizablePanel defaultSize="25%">
               <div className="flex h-full items-center justify-center p-6">
                 <span className="font-semibold">Two</span>
               </div>
             </ResizablePanel>
             <ResizableHandle />
-            <ResizablePanel defaultSize={75}>
+            <ResizablePanel defaultSize="75%">
               <div className="flex h-full items-center justify-center p-6">
                 <span className="font-semibold">Three</span>
               </div>
@@ -124,26 +128,28 @@ function ResizableNested() {
 }
 
 function ResizableControlled() {
-  const [sizes, setSizes] = React.useState([30, 70])
+  const [layout, setLayout] = React.useState<Layout>({})
 
   return (
     <Example title="Controlled">
       <ResizablePanelGroup
-        direction="horizontal"
+        orientation="horizontal"
         className="min-h-[200px] rounded-lg border"
-        onLayout={(newSizes) => {
-          setSizes(newSizes)
-        }}
+        onLayoutChange={setLayout}
       >
-        <ResizablePanel defaultSize={30} minSize={20}>
+        <ResizablePanel defaultSize="30%" id="left" minSize="20%">
           <div className="flex h-full flex-col items-center justify-center gap-2 p-6">
-            <span className="font-semibold">{Math.round(sizes[0] ?? 30)}%</span>
+            <span className="font-semibold">
+              {Math.round(layout.left ?? 30)}%
+            </span>
           </div>
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={70} minSize={30}>
+        <ResizablePanel defaultSize="70%" id="right" minSize="30%">
           <div className="flex h-full flex-col items-center justify-center gap-2 p-6">
-            <span className="font-semibold">{Math.round(sizes[1] ?? 70)}%</span>
+            <span className="font-semibold">
+              {Math.round(layout.right ?? 70)}%
+            </span>
           </div>
         </ResizablePanel>
       </ResizablePanelGroup>
diff --git a/apps/v4/registry/bases/radix/ui/resizable.tsx b/apps/v4/registry/bases/radix/ui/resizable.tsx
index 105d9e5381..9287b2ac8e 100644
--- a/apps/v4/registry/bases/radix/ui/resizable.tsx
+++ b/apps/v4/registry/bases/radix/ui/resizable.tsx
@@ -1,6 +1,5 @@
 "use client"
 
-import * as React from "react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from "@/registry/bases/radix/lib/utils"
@@ -8,12 +7,12 @@ import { cn } from "@/registry/bases/radix/lib/utils"
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+}: ResizablePrimitive.GroupProps) {
   return (
-    <ResizablePrimitive.PanelGroup
+    <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
       className={cn(
-        "cn-resizable-panel-group flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        "cn-resizable-panel-group flex h-full w-full aria-[orientation=vertical]:flex-col",
         className
       )}
       {...props}
@@ -21,9 +20,7 @@ function ResizablePanelGroup({
   )
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
   return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
 }
 
@@ -31,14 +28,14 @@ function ResizableHandle({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: ResizablePrimitive.SeparatorProps & {
   withHandle?: boolean
 }) {
   return (
-    <ResizablePrimitive.PanelResizeHandle
+    <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "cn-resizable-handle bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "cn-resizable-handle bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
@@ -46,8 +43,8 @@ function ResizableHandle({
       {withHandle && (
         <div className="cn-resizable-handle-icon z-10 flex shrink-0" />
       )}
-    </ResizablePrimitive.PanelResizeHandle>
+    </ResizablePrimitive.Separator>
   )
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/apps/v4/registry/new-york-v4/examples/resizable-demo-with-handle.tsx b/apps/v4/registry/new-york-v4/examples/resizable-demo-with-handle.tsx
index 9eeb3f2093..01e22922fb 100644
--- a/apps/v4/registry/new-york-v4/examples/resizable-demo-with-handle.tsx
+++ b/apps/v4/registry/new-york-v4/examples/resizable-demo-with-handle.tsx
@@ -7,24 +7,24 @@ import {
 export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
-      direction="horizontal"
+      orientation="horizontal"
       className="max-w-md rounded-lg border md:min-w-[450px]"
     >
-      <ResizablePanel defaultSize={50}>
+      <ResizablePanel defaultSize="50%">
         <div className="flex h-[200px] items-center justify-center p-6">
           <span className="font-semibold">One</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={50}>
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="50%">
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel defaultSize="25%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Two</span>
             </div>
           </ResizablePanel>
           <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={75}>
+          <ResizablePanel defaultSize="75%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Three</span>
             </div>
diff --git a/apps/v4/registry/new-york-v4/examples/resizable-demo.tsx b/apps/v4/registry/new-york-v4/examples/resizable-demo.tsx
index 8e4ba87ff2..4f79910649 100644
--- a/apps/v4/registry/new-york-v4/examples/resizable-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/resizable-demo.tsx
@@ -7,24 +7,24 @@ import {
 export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
-      direction="horizontal"
+      orientation="horizontal"
       className="max-w-md rounded-lg border md:min-w-[450px]"
     >
-      <ResizablePanel defaultSize={50}>
+      <ResizablePanel defaultSize="50%">
         <div className="flex h-[200px] items-center justify-center p-6">
           <span className="font-semibold">One</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
-      <ResizablePanel defaultSize={50}>
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="50%">
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel defaultSize="25%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Two</span>
             </div>
           </ResizablePanel>
           <ResizableHandle />
-          <ResizablePanel defaultSize={75}>
+          <ResizablePanel defaultSize="75%">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Three</span>
             </div>
diff --git a/apps/v4/registry/new-york-v4/examples/resizable-handle.tsx b/apps/v4/registry/new-york-v4/examples/resizable-handle.tsx
index f07f1902ad..658cbee60c 100644
--- a/apps/v4/registry/new-york-v4/examples/resizable-handle.tsx
+++ b/apps/v4/registry/new-york-v4/examples/resizable-handle.tsx
@@ -7,16 +7,16 @@ import {
 export default function ResizableHandleDemo() {
   return (
     <ResizablePanelGroup
-      direction="horizontal"
+      orientation="horizontal"
       className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
     >
-      <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="25%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Sidebar</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={75}>
+      <ResizablePanel defaultSize="75%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Content</span>
         </div>
diff --git a/apps/v4/registry/new-york-v4/examples/resizable-vertical.tsx b/apps/v4/registry/new-york-v4/examples/resizable-vertical.tsx
index acd24f9646..0123fce0bd 100644
--- a/apps/v4/registry/new-york-v4/examples/resizable-vertical.tsx
+++ b/apps/v4/registry/new-york-v4/examples/resizable-vertical.tsx
@@ -7,16 +7,16 @@ import {
 export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
-      direction="vertical"
+      orientation="vertical"
       className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
     >
-      <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="25%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Header</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
-      <ResizablePanel defaultSize={75}>
+      <ResizablePanel defaultSize="75%">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Content</span>
         </div>
diff --git a/apps/v4/registry/new-york-v4/ui/resizable.tsx b/apps/v4/registry/new-york-v4/ui/resizable.tsx
index 12bbd0b8b0..bbd25ccbbf 100644
--- a/apps/v4/registry/new-york-v4/ui/resizable.tsx
+++ b/apps/v4/registry/new-york-v4/ui/resizable.tsx
@@ -1,6 +1,5 @@
 "use client"
 
-import * as React from "react"
 import { GripVerticalIcon } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
@@ -9,12 +8,12 @@ import { cn } from "@/lib/utils"
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+}: ResizablePrimitive.GroupProps) {
   return (
-    <ResizablePrimitive.PanelGroup
+    <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
       className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
         className
       )}
       {...props}
@@ -22,9 +21,7 @@ function ResizablePanelGroup({
   )
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
   return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
 }
 
@@ -32,14 +29,14 @@ function ResizableHandle({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: ResizablePrimitive.SeparatorProps & {
   withHandle?: boolean
 }) {
   return (
-    <ResizablePrimitive.PanelResizeHandle
+    <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
@@ -49,8 +46,8 @@ function ResizableHandle({
           <GripVerticalIcon className="size-2.5" />
         </div>
       )}
-    </ResizablePrimitive.PanelResizeHandle>
+    </ResizablePrimitive.Separator>
   )
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b6b45d3c0e..df5609fea4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -260,8 +260,8 @@ importers:
         specifier: ^7.62.0
         version: 7.62.0(react@19.2.3)
       react-resizable-panels:
-        specifier: ^3.0.6
-        version: 3.0.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: ^4
+        version: 4.5.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-textarea-autosize:
         specifier: ^8.5.9
         version: 8.5.9(@types/react@19.2.2)(react@19.2.3)
@@ -6749,11 +6749,11 @@ packages:
       '@types/react':
         optional: true
 
-  react-resizable-panels@3.0.6:
-    resolution: {integrity: sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==}
+  react-resizable-panels@4.5.8:
+    resolution: {integrity: sha512-X2S5YoYWbjd7Ove6e6T/kzOrjiUD6ccz55a+XW0H3JXbrPb+Gmz7YRAJy4ysOkua/U5jSOG9SoySbebMBjtQJQ==}
     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
 
   react-smooth@4.0.4:
     resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
@@ -15041,7 +15041,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.2
 
-  react-resizable-panels@3.0.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  react-resizable-panels@4.5.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)