AdaptivePanel

Component	Notes
AdaptivePanel	Width-adaptive disclosure surface. A BottomSheet when narrow; a docked side column at ≥900pt, displacing content rather than covering it. Ships useIsPanelDocked.

A disclosure surface that changes container with window width. Below the breakpoint it is a BottomSheet. At or above it, the panel docks as a bordered side column in normal layout flow — so it displaces sibling content instead of covering it, and the user can keep working with it open. Use for reference/properties/outline surfaces that are welcome to stay open on a tablet or a resized desktop window.

Because the docked form participates in layout, render it inside a row-direction container, next to the content it sits beside — not at the end of a screen the way a sheet can be. In sheet mode it renders into a Modal, so tree position is irrelevant.

import { AdaptivePanel, useIsPanelDocked } from 'achery-ui/native'

const docked = useIsPanelDocked()

<View style={{ flex: 1, flexDirection: 'row' }}>
  <View style={{ flex: 1 }}>{editor}</View>
  <AdaptivePanel open={panel === 'reference'} onClose={close} title="Reference">
    {references}
  </AdaptivePanel>
</View>

Props:

Prop	Type	Default
open	boolean	required
onClose	() => void	required
title	string	—
showClose	boolean	false — docked mode always shows a close button regardless, since there is no scrim to tap
children	ReactNode	required
width	number	340 — docked width in pt; ignored in sheet mode
side	'left' | 'right'	'right'
breakpoint	number	ADAPTIVE_PANEL_BREAKPOINT (900)
maxContentHeight	number	— sheet mode only
avoidKeyboard	boolean	true — sheet mode only
style	ViewStyle	—

useIsPanelDocked(breakpoint?) — returns whether the panel docks at the current width. Needed to pick the matching trigger affordance, which lives outside the panel: an overflow menu of rows when narrow, a row of toggle buttons when docked.

ADAPTIVE_PANEL_BREAKPOINT — 900. Puts iPad landscape in the docked layout while leaving iPad portrait (834pt on an 11") as sheets, where there isn't room for content plus a panel.