Components / Vertical Resize Handle

Vertical Resize Handle

The floating-pill seam between two resizable columns, like the chat/canvas divider. The handle is the visual; the hooks own the drag.

import { VerticalResizeHandle, useCascadedResize, useResizableWidth } from '@layers/ui/vertical-resize-handle'

Rendered stock

House rules

• Pair the handle with useResizableWidth, which wraps the whole drag ceremony: mouse listeners plus the body cursor and user-select locks.
• Suppress width transitions while isResizing is true; drags must feel instant, while programmatic width changes (collapse/expand) animate.
• useCascadedResize drives two columns from one seam: shrinking collapses the secondary column to its min first, growing feeds the primary up to its max first.
• WindowSheetContent bakes this same seam into its left edge; reach for these exports when building a custom split, not to re-skin a sheet.

See also

• Layouts: canvas and sheets