FloatingPanel

Draggable detached panel with title bar, close button, and Escape-to-close. Used for inspector / detail overlays.

Preview

Usage

import { FloatingPanel } from '@ramtt/ui'

<FloatingPanel
  open={open}
  onClose={() => setOpen(false)}
  title="Workout details"
  defaultPosition={{ x: 80, y: 80 }}
>
  {/* content */}
</FloatingPanel>

Props

Prop	Type	Default	Description
open*	`boolean`	—	Controls visibility
onClose*	`() => void`	—	Called on Escape or close-button
title*	`string`	—	Title bar text
draggable	`boolean`	true	Allow drag from title bar
defaultPosition	`{ x: number; y: number }`	—	Initial offset from origin
width	`number`	520	Panel width in px
maxHeight	`number`	500	Max panel height in px
children*	`ReactNode`	—	Panel body