# Area Panels (Moonarc)

The neighbourhoods an agency sells in, as ExpandingPanels: each area a panel with its street drawn by HomeArt, its starting price over its name and a line about it, widening as it is pointed at or focused; under the row the same areas with a few figures each, so the figures are read in order. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/area-panels` (license key required)
- Tier B · category section · trigger pointer, hover
- Readout: `<AreaPanels areas={[{ name, meta, text, href, art, facts }]} />`
- Browser support: widely (Chrome 105 · Firefox 110 · Safari 16); elsewhere: without container queries the panels stack, each one whole
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 16.7 kB raw)
- Page: https://moonarc.dev/components/area-panels/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `areas` | `{ name; meta?; text?; href?; art; facts? }[]` | none | Two to six areas. art is HomeArt's kind, seed, time and block; facts are listed under the row. |
| `open` | `number` | `1` | The panel wide while nothing is pointed at, from 1. |
| `label` | `string` | `'Areas'` | What the panels are, read before them. |
| `headline` | `string` | none | The heading. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `copy` | `string` | none | A line under the heading. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the heading; each area's name in the figures is one below. 1 under a page's own heading when the panels have none. |
| `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 AreaPanels from '@/components/moonarc/pro/AreaPanels.astro';
---
<AreaPanels
  headline="Where we sell"
  areas={[
    { name: 'Old Harbour', meta: 'From $480,000', text: 'Warehouse flats by the water.', href: '/areas/old-harbour/', art: { kind: 'apartment', seed: 'Old Harbour', block: 3 }, facts: [{ label: 'Median', value: '$560,000' }] },
    { name: 'Linden Hill', meta: 'From $690,000', text: 'Family houses, two schools.', href: '/areas/linden-hill/', art: { kind: 'house', seed: 'Linden Hill', block: 2 }, facts: [{ label: 'Median', value: '$810,000' }] },
  ]}
/>
```

## Reduced motion

A panel widens at once.

## With ClientRouter

CSS and Reveal.

## Craft

- The panels are ExpandingPanels, each drawing passed into its slot by name: a slot named in a loop is not one Astro fills, so six lines name six slots.
- The open area is drawn at dusk, the others by day, so the row has one place to look first.
- The figures are a list under the row, so a screen reader reads each area's figures in order whatever is wide.

## Replaces

- Area guide sections with a photo per neighbourhood

## Source

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