Header bar

The bar above your app is the dashboard’s: your logo and name as a crumb back to Apps, and an About action. You declare what belongs after them and the dashboard renders it with its own header components. The React starter’s useTitleBar() keeps the declaration in sync with your page’s state.

tsx

import { useTitleBar } from '@/lib/title-bar'

useTitleBar({
  crumbs: [{ id: 'list', label: 'Deliverables', onClick: () => navigate('/') }, { id: 'item', label: 'Pro licence' }],
  onHome: () => navigate('/'),
  primaryAction: { label: 'New', icon: 'plus', onAction: create },
  secondaryActions: [{ label: 'Export', icon: 'download', onAction: exportAll }],
  menu: [{ label: 'Settings', icon: 'settings', onAction: openSettings }],
  search: { placeholder: 'Search keys', onChange: setQuery },
  tabs: { items: [{ id: 'products', label: 'Products' }, { id: 'log', label: 'Deliveries' }], value: view, onChange: setView },
  layout: immersive ? 'immersive' : 'default',
  about: false,
})

Slot	Rendered as	Limit
`crumbs`	13px crumbs after your name, chevron-separated; the last is the current page. A crumb with `loading: true` is a skeleton pill until you declare its name.	4
`tabs`	A segmented control centred on the bar: your app’s top-level views. A click is an event; you switch the view and declare the new `value`.	5
`primaryAction`	A 28px primary button, 12px text, squared to 8px like everything in the bar.	1
`secondaryActions`	28px secondary buttons before the primary.	2
`menu`	The ⋯ overflow, leading the action cluster so the primary button stays rightmost. About joins it when you have any control of your own.	8
`search`	The dashboard’s collapsible header search; the query streams back debounced.	1
`layout: 'immersive'`	The bar floats over the top of your frame as a glass pill; `--paysio-header-inset` tells you how much is covered.	—

Rules

One primary action per page, and it is the thing the page exists to do.
This bar is your page header. Do not draw a title row of your own under it; put your views in tabs and open on the content.
Icons by name from the dashboard’s set: plus download upload settings trash refresh send copy link key user search filter check edit eye star calendar bell external mail box cart card file chart lightning.
Your logo and name lead the trail and are permanent. about: false hides only the About action.
Immersive is for a hero or a canvas that wants the island’s very top edge. Everything else keeps the bar in its row.