# Now List (Moonarc)

A "now" page in one section: what one person is making, reading, learning and planning at the moment. Each row has a small drawn icon, its word in the mono face and a line, and over the rows sits when the page was last updated, beside a dot that pulses like a light left on, three times as it comes in, then stays lit. Eight icons are drawn: make, read, listen, learn, plan, watch, write and travel. With block the panel is a colour block. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/now-list` (license key required)
- Tier B · category section · trigger always
- Readout: `<NowList items={[{ label, text, icon }]} updated={{ text, date }} />`
- Browser support: widely (Chrome 105 · Firefox 110 · Safari 16); elsewhere: without container units the heading keeps the page's text size and the rows stay under it in one column
- Measured cost: 0 B JS (CSS 10.1 kB raw)
- Page: https://moonarc.dev/components/now-list/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `{ label: string; text: string; icon?: Icon }[]` | none | The rows, in order. label is the word in the mono face ("Making", "Reading"); text is the line. icon is one of make, read, listen, learn, plan, watch, write or travel (make when unset). |
| `eyebrow` | `string` | none | A short line above the heading. Slot "eyebrow" wins. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
| `copy` | `string` | none | A line under the heading. |
| `updated` | `{ text: string; date?: string }` | none | When it was last updated: the words, and the date (YYYY-MM-DD) for the <time> element. Unset, no line and no light are drawn. |
| `block` | `1 | 2 | 3 | 4 | 5` | none | The colour block the panel paints. Unset, the panel paints nothing and the section's own ground shows. |
| `level` | `2 | 3` | `2` | Heading level of the section's heading. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; a panel with a block keeps its block on every tone. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import NowList from '@/components/moonarc/pro/NowList.astro';
---
<NowList
  eyebrow="Now"
  copy="What I am up to this month, updated by hand."
  updated={{ text: 'Updated 3 October 2026', date: '2026-10-03' }}
  block={2}
  items={[
    { label: 'Making', text: 'A pocket guide to pricing for small shops.', icon: 'make' },
    { label: 'Reading', text: 'A history of the printing press.', icon: 'read' },
    { label: 'Learning', text: 'Screen printing, badly.', icon: 'learn' },
    { label: 'Planning', text: 'Two weeks offline in the spring.', icon: 'plan' },
  ]}
>
  <span slot="headline">What I am doing <em>right now</em></span>
</NowList>
```

## Reduced motion

The light stays lit and does not pulse.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- The light is a dot with a ring that swells and fades every 2.5 seconds, drawn on a pseudo-element so the dot itself stays put. It is hidden from assistive technology, and the date beside it is real text, in a time element when you pass the date.
- The icons are 24-unit line drawings in the text colour, one path each, so they follow the block and any theme without an image file. Every row carries its word, so an icon is never the only label.
- On a wide box the heading holds one column and the rows the other, and each row becomes icon, word and line on one line, so the words line up down the list.
- The updated line is the text you write with the date beside it. Nothing computes "days ago", so the line cannot go wrong between builds.

## Replaces

- Hand-written now pages (the nownownow.com format)
- Personal site status sections

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/now-list` with a key in components.json (https://moonarc.dev/account/).