Docs Platform

NotificationCenter

A grouped unread list. The machine handles the grouping and the dismissing. Opening a notification calls back into your app rather than toggling a panel here, because where it should take the reader is your decision, not ours.

Live machine

The shipped notificationCenterMachine over three fixture notices; dismiss and mark-all-read each emit one items request.

notification-center · live via createService

success · 09:14deploy-42

warning · 08:02cert-expiry

info · Monweekly-report

States · walked from the machine

active

Transitions from here · click to send

Context

{
  "mode": "uncontrolled",
  "items": [
    {
      "id": "deploy-42",
      "group": "Today",
      "kind": "success",
      "time": "09:14",
      "unread": true
    },
    {
      "id": "cert-expiry",
      "group": "Today",
      "kind": "warning",
      "time": "08:02",
      "unread": true
    },
    {
      "id": "weekly-report",
      "group": "Earlier",
      "kind": "info",
      "time": "Mon",
      "unread": false
    }
  ]
}

Log · newest first

No events yet — use the component above or send a transition.

Explore the layers

Machine (@grassroot/ui-machines/notification-center). Headless: five adapters plus mountNotificationCenter. Spec: packages/ui-headless/core/src/notification-center/notification-center.spec.md.

Behaviour contract

The list is always visible. Mark-all-read and dismiss-by-id are machine events. Message bodies live in a sidecar, not in machine context.