Version 4

[bvaughn]

I think I can simplify the API in a few ways though it would require a major version bump.

• Min/max panel size constraints can be controlled entirely with CSS classes/styles
• Resize handle elements can be optional; the parent group will treat panel edges as drag handles
• Panels won't need an order props anymore; parent group can determine order based on element rects
• Switch to CSSStyleSheet so "nonce" will no longer be needed
• Better SSR support (see SSR Persistence Script #521)

I'm still thinking through these changes at a high level but I'll try to outline the rough shape of it on this issue as I work it out.

Architecture overview

Global state

• Stores mounted Groups and their Panels/ResizeHandles
• Calculates hit targets/regions based on element bounds
• Listens to pointer events and notifies Group(s) of user resize actions

Group component

• Registers root HTMLElement and child Panels/ResizeHandles with global state
• Calculates layout constraints based on reported Panel styles
• Updates layout state in response to panel constraint and user resize actions
  • This is probably where most of the complexity will be but hopefully a lot of it can just be copied as-is from version 3
• Persists layouts if autoSave enabled
• Notifies onLayout callback when panel sizes change (pixel and percentage)

Panel component

• Registers root HTMLElement with parent Group
• Uses a MutationObserver to listen for changes in CSS styles related to panel constraints
• Notifies onResize callback when size changes (pixel and percentage)

ResizeHandle component

• Registers root HTMLElement with parent Group