# Status Board (Moonarc)

A status page in one section: the state of everything as the heading with its light (it pulses three times, then stays lit), the uptime of the days shown as a Gauge, each service with its state and a bar for every day (up, degraded, an outage, maintenance, no data) rising in turn as the board arrives, and the incidents with their updates, newest first. Pointing at a bar names its day; the days that were not clean are written out for a screen reader under each service, so nothing depends on the bars. A narrow box shows the last thirty days. All of it is data at build. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/status-board` (license key required)
- Tier B · category section · trigger scroll, hover
- Readout: `<StatusBoard services={[{ name, status, uptime, days }]} updated="2026-10-09" />`
- Browser support: widely (Chrome 105 · Firefox 110 · Safari 16); elsewhere: without container queries every day's bar shows at any width
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 15.8 kB raw)
- Page: https://moonarc.dev/components/status-board/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `services` | `{ name; status; uptime; days; note? }[]` | none | Each service: status now (up, degraded, down, maintenance), uptime in percent over the days shown, and days, one character a day, oldest first and today last: u up, d degraded, o an outage, m maintenance, - no data. |
| `incidents` | `{ title; status; services?; updates: { at; text }[] }[]` | `[]` | The incidents, newest first; status is investigating, identified, monitoring or resolved; at is an ISO date and time. |
| `updated` | `string` | none | The day the data was written (YYYY-MM-DD): the last bar is this day. A value that is not a day stops the build. |
| `updatedText` | `string` | none | How the update time is printed; unset, the day as given. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading; unset, the words for the overall state ("Everything is running"). Slot "headline" wins. |
| `words` | `Partial<Words>` | none | Every word the board prints: the overall and per-service states, the incident states, Uptime, days, Today, Incidents, the line for none, and noData for a day with no data. |
| `locale` | `string` | `'en-GB'` | A BCP 47 locale for the dates. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the heading; the incidents' heading is one below. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import StatusBoard from '@/components/moonarc/pro/StatusBoard.astro';
import status from '../content/status.json';
---
<StatusBoard
  level={1}
  updated={status.updated}
  updatedText="Updated 9 October 2026, 08:00 UTC"
  services={status.services}
  incidents={status.incidents}
/>
```

## Reduced motion

The bars are there at once, the light stays lit without pulsing and the gauge is drawn full.

## With ClientRouter

CSS and Reveal; the bars rise again on a fresh page.

## Craft

- The overall state is the worst of the services' states, worked out at build, so the heading and the light can never disagree with a row.
- A bar names its day from a data attribute on hover, with no script; the same days are written out under the row (Degraded: 3 Oct. Outage: 18 Sep) for a screen reader and a keyboard, so the bars are not a row of ninety tab stops.
- The light pulses three times and stays lit: a loop beside text is what WCAG 2.2.2 asks to be stoppable.
- The four states have their own colours (--ma-status-up and the rest), hues that read as themselves on paper and on ink, and every state is also a word.
- Static on purpose: a status page that needs the service it reports on to render is down when it matters most. Rebuild it from your monitor's export on a schedule, or link a hosted status page instead.

## Replaces

- Hosted status page widgets
- Uptime bar sections on developer sites

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/status-board` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: gauge, reveal.