fix(apollo-wind): upgrade react-resizable-panels to v4 and optimize form render performance

[snuziale]

Summary

• Upgrade react-resizable-panels from ^3.0.6 to ^4.6.0
• Migrate all usages to v4 API: PanelGroup → Group, PanelResizeHandle → Separator, direction → orientation
• Update size props from bare numbers (v3 treated as percentages) to explicit percentage strings (v4
  treats numbers as pixels)
• Re-export PanelImperativeHandle type from the resizable wrapper so consumers don't need to import from
  react-resizable-panels directly
• Map v4 data attributes for hover/active/vertical styling (data-[separator=hover|active],
  aria-[orientation=horizontal])

Breaking changes

This is a breaking change for consumers of ResizablePanelGroup, ResizablePanel, and ResizableHandle:

  ┌──────────────────────────────────┬──────────────────────────────────────────────────────┐
  │           v3 (before)            │                      v4 (after)                      │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ direction="horizontal"           │ orientation="horizontal"                             │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ defaultSize={50} (percentage)    │ defaultSize="50%" (numbers are now pixels)           │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ ref={panelRef}                   │ panelRef={panelRef}                                  │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ onResize={(size: number) => ...} │ onResize={(size: { asPercentage, inPixels }) => ...} │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ onCollapse / onExpand            │ Removed — use onResize                               │
  ├──────────────────────────────────┼──────────────────────────────────────────────────────┤
  │ autoSaveId                       │ Removed — use useDefaultLayout hook                  │
  └──────────────────────────────────┴──────────────────────────────────────────────────────┘

Test plan

• All 12 existing resizable unit tests pass
• TypeScript compiles with no errors
• Visually verify hover/active highlight on handles
• Visually verify horizontal separator renders correctly in vertical (top/bottom) layouts
• Visually verify grip icon rotates for vertical layouts
• Check Storybook stories render correctly (Horizontal, Vertical, ThreePanels, Nested, WithHandleVariant)
• Verify FlowEditorLayout bottom panel resize + switcher positioning still works

[github-actions]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-canvas	🟢 Ready	Preview, Logs	Feb 05, 2026, 05:10:15 PM
apollo-ui-react	🟢 Ready	Preview, Logs	Feb 05, 2026, 05:08:56 PM
apollo-vertex	🟢 Ready	Preview, Logs	Feb 05, 2026, 05:08:23 PM
apollo-wind	🟢 Ready	Preview, Logs	Feb 05, 2026, 05:07:48 PM

[Copilot]

Pull request overview

This pull request upgrades the react-resizable-panels dependency from v3.0.6 to v4.6.0, which introduces several breaking API changes. The upgrade affects the resizable panel components used throughout the Apollo Wind design system.

Changes:

• Upgraded react-resizable-panels to v4.6.0 and migrated all API usages (direction → orientation, numeric sizes → percentage strings, ref → panelRef, data attributes changes)
• Updated the resizable component wrapper to use v4 imports (Group, Panel, Separator) and re-export PanelImperativeHandle type
• Updated all tests, stories, and example files to use the new v4 API

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
pnpm-lock.yaml	Updated dependency resolution for react-resizable-panels v4.6.0 and related transitive dependencies
packages/apollo-wind/package.json	Updated react-resizable-panels dependency version from ^3.0.6 to ^4.6.0
packages/apollo-wind/src/components/ui/resizable.tsx	Migrated to v4 API: imported Group/Panel/Separator, updated data attributes in styles, re-exported PanelImperativeHandle type
packages/apollo-wind/src/components/ui/resizable.test.tsx	Updated all tests to use v4 API (orientation prop, percentage strings, data-separator attribute) and removed accessibility test workaround
packages/apollo-wind/src/components/ui/resizable.stories.tsx	Updated all stories to use orientation prop and percentage string sizes
packages/apollo-wind/src/examples/form-builder-example.tsx	Updated to use orientation="horizontal" and percentage string sizes
packages/apollo-wind/src/examples/flow-editor-layout-example.tsx	Updated to use v4 API including orientation prop, panelRef, and getSize().asPercentage

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[Copilot]

The ResizablePanelGroup wrapper removed the flex-direction styling that was present in v3 (data-[panel-group-direction=vertical]:flex-col). In v4, the Group component may not automatically apply flex-col for vertical orientation. This should be replaced with aria-[orientation=vertical]:flex-col to ensure vertical panel groups render correctly with a column layout instead of defaulting to row layout.

Suggested change

	<Group className={cn('flex h-full w-full', className)} {...props} />
	<Group className={cn('flex h-full w-full aria-[orientation=vertical]:flex-col', className)} {...props} />

[CalinaCristian]

we can mark the commit with ! and semantic release should do a major bump, if it's breaking

[CalinaCristian]

Current Stack

• main
  • fix(apollo-wind): upgrade react-resizable-panels to v4 and optimize form render performance #174 fix/wind-update-dep ← THIS PR

Managed with stacked-prs