Panels
The panel surfaces — the framed, often-floating regions that hold a detail view, a property/settings editor, a feed, an anchored cluster, or a chat. Each is a thin composition over the <Surface> primitive: the inline ones (Inspector / Properties / Settings / History / Activity / AIAssistant) lay header · body · footer regions on a Surface; the anchored ones (Flyout / HoverCard) compose the @phauna/ds Popover / PreviewCard overlays; FloatingPanel is a draggable Surface at elevation=overlay. Flip the theme in the top bar to confirm every panel re-skins.
- InspectorPanel
- A right-side detail panel = Surface with a header (icon · eyebrow · title · subtitle · actions · close), a SCROLLABLE body of InspectorSection blocks, and a footer. The generic of CandidateDrawer.
- PropertiesPanel
- A key/value property list on a Panel — each value sits in an editable-looking cell (a focusable button with the input affordance when editable + onEdit are set, otherwise a quiet static value).
- SettingsPanel
- Grouped settings: a titled Panel holding SettingsGroup clusters of SettingsRow items (label + description + a right-aligned control slot — Switch / Segmented / Select).
- HistoryPanel
- A timeline of changes — composes the @phauna/ds ActivityFeed rail with an AuditEntry (actor · action) on each step, plus an optional change detail line.
- ActivityPanel
- A live activity feed — composes ActivityFeed, each item a short line with a leading icon/avatar and a timestamp, optionally topped by a pulsing Live indicator.
- Flyout
- An anchored panel popped from a trigger — composes the @phauna/ds Popover (Base UI) and adds header · body · footer structure.
- FloatingPanel
- A draggable, free-floating Surface at elevation=overlay — pointer-drag the header or focus the grip and nudge with arrow keys; clamps inside its container.
- HoverCard
- A rich preview on hover-intent — composes the @phauna/ds HoverCard (Base UI PreviewCard) and adds a media · title · subtitle header + body + footer.
- AIAssistantPanel
- A chat-panel shell — header + scrollable message-list slot + pinned composer slot. Formalizes the BeagleBot chat chrome; AIAssistantMessage renders the bubbles.
InspectorPanel
A full-height right-side detail panel. The header (icon · eyebrow · title · subtitle · actions · optional close) and footer stay pinned while the InspectorSection body scrolls. Below, the live demo opens it into a docked right rail from a trigger Button.
The InspectorPanel slides into the right rail of this stage. It is the generic of CandidateDrawer — header, scrollable sectioned body, footer.
PropertiesPanel
A key/value property list. Editable values render in an input-like cell (here static — wire onEdit in a client island to make the cells real buttons); plain values sit quietly. Mono values suit ids and tokens.
Properties
The shape of a record, at a glance.
- Name
- Jane Rescuer
- jane@example.org
- City
- Portland, OR
- Record ID
- rsc_8f21c0
- Role
- Foster
- Joined
- 8 months ago
Synced from the roster every 10 minutes.
SettingsPanel
Grouped settings. A titled Panel holds SettingsGroup clusters; each SettingsRow pairs a label + description with a right-aligned control. Toggle the live controls below — Switch, SegmentedControl, and Select all re-skin with the theme.
Notification settings
Choose how your team reaches you.
Channels
Where we send updates.
Cadence
HistoryPanel
A timeline of changes built on the @phauna/ds ActivityFeed rail, with an AuditEntry (who · did what) on each step and an optional change detail beneath. The most recent step is accented.
Change history
- Jane R.updated the mailing address123 Oak St → 88 Pine Ave, Portland ORjust now
- Org syncmatched the WhatsApp group2h ago
- Rebekahflagged the candidate for reviewStrong foster history — fast-track for the West team.yesterday
- Systemcreated the record from the NVDA form8 months ago
ActivityPanel
A live activity feed on the ActivityFeed rail. Each item carries a leading avatar/icon, a short line, and a timestamp; the Live indicator pulses in the header when the feed is streaming.
Team activity
- Maya P. joined the West Portland teamnow
- Devon K. RSVP'd to the Saturday adoption event3m
- Sam T. uploaded a foster home photo12m
- Lee A. completed the volunteer onboarding1h
Flyout
An anchored panel popped from a trigger Button, composed over the @phauna/ds Popover. It adds the header · body · footer structure, anchors with side/align, and dismisses on outside-press / Esc.
FloatingPanel
A draggable, free-floating Surface at elevation=overlay. Pointer-drag the header (the close button and actions stay clickable), or focus the grip and nudge with the arrow keys; it clamps inside its container. Toggle it open below.
HoverCard
A rich preview revealed on hover-intent (or keyboard focus), composed over the @phauna/ds HoverCard (Base UI PreviewCard). It adds a media · title · subtitle header, a body, and a footer — float it over a person link or an entity reference.
Hover (or focus) the name to preview the person: — the preview anchors to the link and dismisses when you move away.
AIAssistantPanel
The chat-panel shell that formalizes the BeagleBot chat chrome: a header (avatar · title · status · close), a scrollable message-list slot, and a pinned composer slot. AIAssistantMessage renders the user / assistant bubbles. Static below; the live dock with a working composer is the second example.
BeagleBot
OnlineAI assistant
BeagleBot
OnlineAI assistant