Playground
Add and remove entries on the fly. Each row is a real <StatusBar>
with a stable id — removing a row unmounts it, and the entry leaves
the bar automatically. No manual cleanup.
Live entry editor
<StatusBarViewport scope="playground" mode="stack" />
tsx
const [items, setItems] = useState(INITIAL)
<StatusBarViewport mode={mode} separator="•" />
{items.map((it) => (
<StatusBar key={it.id} id={it.id} priority={it.priority}>
{it.text}
</StatusBar>
))}
// remove from `items` → producer unmounts → entry leaves the bar