blocks/status-tray

Import

Import

import * as api from "@fungi.computer/caps/blocks/status-tray";

Exports

Kind	Export	Description
Ttype alias	StatusTrayItem	One footer readout and the small tray it opens. Semantic data only: the chip’s finish, the tray’s material and the seam between them come from theme tokens (--caps-status-tray-*), never from a prop.
Ttype alias	StatusTrayProps	Controlled selection and structural slots for a row of footer trays.
fnfunction	StatusTray()	A footer row of readout chips; one opens its tray above the row at a time.
fnfunction	StatusTrayList()	A group of tray rows. Precede it with a DataListHeading to label it.
fnfunction	StatusTrayRow()	One line: the host’s icon, a title, a muted detail that truncates, and a quiet text action (a ghost Button) at the end.
fnfunction	StatusTrayNote()	A quiet sentence for an empty or unavailable feed. Empty reads “All caught up.” unless the host says otherwise; unavailable takes a title.

StatusTrayItemTtype alias

Signature

type StatusTrayItem = Readonly<{
  id: string;
  label: ReactNode;
  count?: number;
  tone?: StatusTone;
  glyph?: StatusGlyph;
  motion?: StatusMotion;
  accessibleLabel?: string;
  title?: ReactNode;
  actions?: ReactNode;
  content: ReactNode;
  disabled?: boolean;
  after?: ReactNode;
}>;

One footer readout and the small tray it opens. Semantic data only: the chip’s finish, the tray’s material and the seam between them come from theme tokens (--caps-status-tray-*), never from a prop.

---

StatusTrayPropsTtype alias

Signature

type StatusTrayProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & object;

Controlled selection and structural slots for a row of footer trays.

Type Declaration

Name	Type	Description
items	readonly StatusTrayItem[]	Readouts and their tray contents in display order.
openId	string | null	Which tray is open. The host owns this state.
onOpenChange()	(id) => void	Requests a selection change or dismissal.
leading?	ReactNode	Leading readouts that never open a tray (connection state, etc.).
trailing?	ReactNode	Trailing controls after the chips (Send, Expand, …).
placement?	"housing" | "screen" | "host"	Structural seat. housing sits on the plastic below a screen; screen sits inside a Display as flat, screen-native text (the wiki’s screen material rule); host means a host’s own chrome draws the chips, so only the open tray renders here. The look of each seat is theme-owned.
align?	"start" | "end"	Which edge the tray aligns to.
hostInset?	number	For host placement: where the host’s trigger starts, in CSS pixels from this tray’s inline start, so the open tray sits above it.

StatusTray()fnfunction

Signature

function StatusTray(__namedParameters): Element;

A footer row of readout chips; one opens its tray above the row at a time.

Parameters

Parameter	Type
__namedParameters	StatusTrayProps

Returns

Element

---

StatusTrayList()fnfunction

Signature

function StatusTrayList(__namedParameters): Element;

A group of tray rows. Precede it with a DataListHeading to label it.

Parameters

Parameter	Type
__namedParameters	HTMLAttributes<HTMLDivElement>

Returns

Element

---

StatusTrayRow()fnfunction

Signature

function StatusTrayRow(__namedParameters): Element;

One line: the host’s icon, a title, a muted detail that truncates, and a quiet text action (a ghost Button) at the end.

Parameters

Parameter	Type
__namedParameters	Omit<HTMLAttributes<HTMLDivElement>, "children"> & object

Returns

Element

---

StatusTrayNote()fnfunction

Signature

function StatusTrayNote(__namedParameters): Element;

A quiet sentence for an empty or unavailable feed. Empty reads “All caught up.” unless the host says otherwise; unavailable takes a title.

Parameters

Parameter	Type
__namedParameters	{ children?: ReactNode; title?: string; }
__namedParameters.children?	ReactNode
__namedParameters.title?	string

Returns

Element