From cc7a33a2a09697b5e0e911e9a3f0de96f4457db7 Mon Sep 17 00:00:00 2001
From: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Date: Thu, 30 Jul 2026 19:14:23 +0800
Subject: [PATCH] fix(components,app-shell): the last two `direction` props
 follow v4's rename to `orientation`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

react-resizable-panels v4 renamed `PanelGroup`'s `direction` prop to
`orientation`. Two call sites were still passing the v3 name, so v4
ignored it and React forwarded the unknown prop to the DOM as a stray
`direction="horizontal"` attribute on the group div.

Both groups are horizontal-only and `horizontal` is v4's default, so
nothing rendered wrong — this is dead-prop cleanup, the tail of the
migration whose visible half was #3024.

Each site also carried `const PanelGroup = ResizablePanelGroup as
React.FC<any>`, and those casts are why the dead prop survived the v4
bump: they erased the props to `any`, so `direction` type-checked
against nothing. Both comments blamed the toolchain — vite-plugin-dts
"not resolving the direction prop type correctly", and a prop that
"does not always narrow cleanly in our TS config" — but neither was a
narrowing problem. `GroupProps` simply has no `direction` key in v4.

Dropping the casts makes the rename self-enforcing: restoring
`direction` on the un-cast `ResizablePanelGroup` now fails with
TS2322 rather than silently reaching the DOM.

ResourceEditPage's `ResizablePanel` props are unaffected — `panelRef`,
`collapsible`, `collapsedSize` and `onResize` are all valid v4
`PanelProps` and were never covered by the cast (it only ever wrapped
the group), so no narrowly-typed workaround is needed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../src/views/metadata-admin/ResourceEditPage.tsx     | 11 +++--------
 packages/components/src/custom/navigation-overlay.tsx |  8 ++------
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/app-shell/src/views/metadata-admin/ResourceEditPage.tsx b/packages/app-shell/src/views/metadata-admin/ResourceEditPage.tsx
index 4240b2c4a..0ccf2b473 100644
--- a/packages/app-shell/src/views/metadata-admin/ResourceEditPage.tsx
+++ b/packages/app-shell/src/views/metadata-admin/ResourceEditPage.tsx
@@ -117,11 +117,6 @@ import { describeIssuePath } from './issuePath';
 import { buildCreateModeBody } from './createBody';
 import { errorCodeIs, errorCodeIsAnyOf } from '@object-ui/types';
 
-// react-resizable-panels' `direction` prop type does not always narrow
-// cleanly in our TS config; cast at the boundary (precedent:
-// packages/components/src/custom/navigation-overlay.tsx).
-const PanelGroup = ResizablePanelGroup as React.FC<any>;
-
 /**
  * Metadata types whose canvas IS the primary create-time authoring
  * surface, so we render the preview/inspector split during create
@@ -2060,8 +2055,8 @@ function MetadataResourceEditPageImpl({
                     : 'relative flex-1 min-h-0 flex'
                 }
               >
-                <PanelGroup
-                  direction="horizontal"
+                <ResizablePanelGroup
+                  orientation="horizontal"
                   className="flex-1 min-h-0 rounded-md border bg-background overflow-hidden"
                   id={`metadata-edit-${type}`}
                 >
@@ -2336,7 +2331,7 @@ function MetadataResourceEditPageImpl({
                       </div>
                     </div>
                   </ResizablePanel>
-                </PanelGroup>
+                </ResizablePanelGroup>
                 {/* The floating reopen pill that used to live here was
                     removed: the canvas toolbar already hosts a permanent
                     VSCode-style inspector toggle next to the fullscreen
diff --git a/packages/components/src/custom/navigation-overlay.tsx b/packages/components/src/custom/navigation-overlay.tsx
index 5860463f1..ce8006bc4 100644
--- a/packages/components/src/custom/navigation-overlay.tsx
+++ b/packages/components/src/custom/navigation-overlay.tsx
@@ -460,12 +460,8 @@ export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
       : 40;
     const mainPercent = 100 - detailPercent;
 
-    // Cast needed: ResizablePanelGroup has correct runtime behavior but
-    // vite-plugin-dts may not resolve the direction prop type correctly
-    const PanelGroup = ResizablePanelGroup as React.FC<any>;
-
     return (
-      <PanelGroup direction="horizontal" className={cn('h-full', className)}>
+      <ResizablePanelGroup orientation="horizontal" className={cn('h-full', className)}>
         <ResizablePanel defaultSize={mainPercent} minSize={30}>
           {mainContent}
         </ResizablePanel>
@@ -501,7 +497,7 @@ export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
             {renderContent(selectedRecord)}
           </div>
         </ResizablePanel>
-      </PanelGroup>
+      </ResizablePanelGroup>
     );
   }