# Widget Bento (Moonarc)

An app beyond its own screen, in a bento: its home-screen widgets in three sizes, its lock screen (a phone's top half, cut by the tile) and its watch face, each drawn from rows (AppScreen without its chrome) on a tile of a colour block, with a title and a line under it. Small widgets take one column, medium two, large two by two, the lock screen two rows. The tiles arrive in turn and each drawing fills as its tile arrives: the ring, the bars, the checks. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/widget-bento` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<WidgetBento tiles={[{ kind: "widget", size: "medium", title, screen }]} />`
- Browser support: widely (Chrome 105 · Firefox 110 · Safari 16); elsewhere: without container units the drawings keep the page's text size
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 26.8 kB raw)
- Page: https://moonarc.dev/components/widget-bento/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `tiles` | `{ kind; size?; title; text?; block?; screen }[]` | none | The tiles, in order (the grid fills gaps densely). kind is widget, lock or watch; size (widgets) is small, medium or large; block is the tile's colour block (unset, the tiles take blocks 1 to 5 in turn); screen is AppScreen's props, and its drawing keeps the app's accent (the primary) unless the screen names a block. |
| `headline` | `string` | none | The section's heading. Slot "headline" wins and may hold an <em>. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `copy` | `string` | none | A line under the heading. |
| `level` | `2 | 3` | `2` | Heading level of the heading; each tile's title 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 WidgetBento from '@/components/moonarc/pro/WidgetBento.astro';
---
<WidgetBento
  headline="On every screen you have"
  tiles={[
    { kind: 'widget', size: 'small', title: 'Today at a glance', screen: { rows: [{ kind: 'ring', value: 0.75, text: '3/4', label: 'done' }] } },
    { kind: 'widget', size: 'medium', title: 'The week', screen: { rows: [{ kind: 'bars', values: [3, 4, 2, 4, 4, 3, 1] }] } },
    { kind: 'lock', title: 'A nudge at the right time', screen: { rows: [{ kind: 'clock', time: '7:42', date: 'Friday 9 October' }, { kind: 'notice', app: 'Sitename', title: 'Walk 20 minutes', text: 'Your usual time' }] } },
    { kind: 'watch', title: 'On your wrist', screen: { rows: [{ kind: 'ring', value: 0.5, text: '2/4', label: 'today' }] } },
  ]}
/>
```

## Reduced motion

The tiles are there at once and the drawings are drawn as they end.

## With ClientRouter

CSS and Reveal.

## Craft

- A widget is the app's, not the tile's: it is drawn on the page's own ground and rounded the way the systems round theirs, while the tile around it carries the colour.
- The tile carries a block, the drawing carries the app's accent: a widget on a dark tile does not take that tile's colour for its ring. A watch face is black, as watch faces are, and its accent is lifted toward white (AppScreen's --ma-as-tint) so a dark primary still reads on it.
- The drawings wait for their tile: AppScreen holds its motion while the Reveal around it has not arrived, so a ring fills as it is scrolled to.

## Replaces

- Widget showcase sections on app landing pages

## Source

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