Resizable

[andrre-ls]

Introduces a Resizable compound component that splits a container into panels separated by draggable handles.

• Handles are inferred — no extra markup, each panel renders one on its leading edge
• Multi-panel resize works correctly: sizes are snapshotted on drag start and only the two adjacent panels are redistributed, leaving all others untouched
• Bounds are derived from the panels' CSS min-* / max-* constraints, no props needed
• Keyboard support: arrow keys nudge the focused handle by 10px
• Horizontal and vertical orientations; panels can contain nested Resizable instances

[Copilot]

Pull request overview

Introduces a new Resizable compound component under src/foundations/ui/resizable/ that allows splitting a container into draggable, keyboard-adjustable panels (including horizontal/vertical orientation and nested layouts), plus documentation and example previews for the docs site.

Changes:

• Adds the Resizable / Resizable.Panel implementation with inferred handles, pointer + keyboard resizing, and CSS constraint-derived bounds.
• Adds a full docs page describing features, API, accessibility notes, and usage guidance.
• Adds multiple preview examples (horizontal, min/max constraints, vertical, nested) for the docs site.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/foundations/ui/resizable/resizable.tsx	Implements the Resizable compound component and resize handle behavior.
src/foundations/ui/resizable/page.mdx	Documents the component’s API, behavior, examples, and accessibility notes.
src/foundations/ui/resizable/examples/resizable.preview.tsx	Adds the default horizontal preview example.
src/foundations/ui/resizable/examples/resizable-min-max.preview.tsx	Adds an example demonstrating min/max constraints.
src/foundations/ui/resizable/examples/resizable-vertical.preview.tsx	Adds a vertical orientation preview example.
src/foundations/ui/resizable/examples/resizable-nested.preview.tsx	Adds a nested Resizable preview example.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (3)

src/foundations/ui/resizable/resizable.tsx:236

• The drag lifecycle attaches multiple window event listeners but only explicitly removes pointermove. If the pointer sequence is interrupted (e.g. window blur / tab switch) the body cursor and userSelect can remain stuck until the next drag. Using an AbortController (and listening for blur) makes cleanup deterministic and removes all listeners in one place.

    const prevCursor = document.body.style.cursor;
    const prevUserSelect = document.body.style.userSelect;
    document.body.style.cursor = orientation === "horizontal" ? "col-resize" : "row-resize";
    document.body.style.userSelect = "none";

src/foundations/ui/resizable/examples/resizable.preview.tsx:7

• w-200 isn’t used anywhere else in the repo and is not a default Tailwind width token, so this preview container may end up with no explicit width. Use w-full (with the existing max-w-2xl) or an explicit arbitrary value.

    <Resizable className="h-72 w-200 max-w-2xl rounded-xl border border-border">

src/foundations/ui/resizable/examples/resizable-min-max.preview.tsx:7

• w-200 isn’t used anywhere else in the repo and is not a default Tailwind width token, so this preview container may end up with no explicit width. Use w-full (with the existing max-w-2xl) or an explicit arbitrary value.

    <Resizable className="h-72 w-200 max-w-2xl rounded-xl border border-border">