Banner, toast & empty state

<GdToast action="View" @action="openProject">
  Parcel saved to Jarrah St project
</GdToast>

The system

The component above is only the drawn box. The SYSTEM is useGdNotify() plus GdToastHost: the app mounts the host once at the end of its shell, and from then on anything — a composable, a poll, a catch block — calls notify() and the notice appears bottom-centre, above everything, owned by no panel. That last part is the point: the notifications that matter most are about work that outlives the surface that started it, and a toast a panel mounts dies with the panel.

// once, at the end of the app shell
<GdToastHost />

// anywhere at all
const { notify } = useGdNotify()
notify("Parcel saved to Jarrah St project", { action: "View", onAction: openProject })
notify("Zone clip failed", { tone: "danger", action: "Retry", onAction: retry })

GdVerdictBanner

GdBanner

GdToast

GdToastHost · useGdNotify

The host takes no props — the queue is the API. notify(message, options?) returns an id; options is { tone, action, onAction, sticky }, with sticky defaulted from the tone. dismiss(id) removes a notice early. Client-side calls only: a notification raised during server render has no one to see it, and callbacks cannot cross the SSR payload.

GdEmptyState

• Use a banner for a condition of the whole VIEW that stays until it changes — a scheme amendment, a quota, an outage.
• Mount GdToastHost once, in the shell. A host per panel is a toast that dies with the panel — which is backwards, because the notices that matter most outlive the surface that raised them.
• Use a toast only to confirm something the user just asked for. Anything they must read to avoid harm is an alert or a dialog.
• Use an alert when the message is about the DATA rather than the view, and belongs beside the thing it is about.
• Use tone="ink" when the banner must be noticed, and accent for a product message that can wait. Put severity on dot, never on the ground.
• Handle @dismiss yourself and persist the answer where the preference belongs — the banner will not hide itself.
• Give an empty state a body and an action, except after a search that found nothing: the user already knows what to do.
• Pass the empty state's glyph as a path, or use #icon — icon is a d attribute, so a name goes in as <path d="folder"> and draws nothing. It is valid SVG, so nothing errors; the tile just comes out blank.
• Reach for the verdict banner only for the planning answer itself. It is one component with one job, not a general result panel.

The verdict banner

It never animates its wording: an icon joins or leaves the stack the instant a threshold is crossed, so a changing answer reads as a change of state rather than as a loading state.

Page banners

Dismissal is the caller's to persist. A banner that reappears on every route change has not been dismissed, it has been ignored — and the component cannot know where that preference belongs.

Toasts

The surface is dark in BOTH themes — a toast is not a card, and making it dark is how it reads as transient chrome rather than as content that has appeared in the page.

Empty states

An empty state with only a title is a dead end. The body says what would put something here, and the action does it. The one case where an action is wrong is a search that found nothing: the user already knows what to do, and a button that says "Search again" is noise.