fix(components,app-shell): the last two direction props follow v4's rename to orientation (#3025)

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: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: os-zhuang

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

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>
     );
   }