# Listing Gallery (Moonarc)

The top of a home's own page: its pictures on one side, each a building drawn by HomeArt under a Lens that magnifies it at the pointer, with a row of thumbnails that picks one (radios and :has(), so the arrow keys move along them); on the other side the price, the title, the address, the facts and two actions. The first picture can carry the view-transition-name its card on the listing page gave it, so the card grows into it.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/listing-gallery` (license key required)
- Tier B · category section · trigger click, pointer
- Readout: `<ListingGallery title price views={[{ kind, seed, label, name }]} facts={[…]} />`
- Browser support: newly (Chrome 105 · Firefox 121 · Safari 15.4); elsewhere: without :has() the first picture shows and the thumbnails do nothing
- Measured cost: 0 B JS of its own · uses Lens + runtime (with dependencies 2.5 kB raw; CSS 14.8 kB raw)
- Page: https://moonarc.dev/components/listing-gallery/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | none | The home's name or street, the page's heading. |
| `price` | `string` | none | As written. |
| `views` | `(HomeArt props & { label; name })[]` | none | One to five pictures. label is what a screen reader hears; name is the thumbnail's. |
| `address` | `string` | none | A line under the title. |
| `priceNote` | `string` | none | A word beside the price: "Guide price", "a month". |
| `badge` | `string` | none | A tag over the title. |
| `facts` | `{ label: string; value: string }[]` | none | The facts, in two columns. |
| `primary` | `{ href: string; label: string }` | none | The main action. |
| `secondary` | `{ href: string; label: string }` | none | The second action. |
| `transition` | `string` | none | The view-transition-name of the first picture. |
| `pick` | `string` | `'Pictures'` | The thumbnails' group name. |
| `level` | `1 | 2` | `1` | Heading level of the title. |
| `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 ListingGallery from '@/components/moonarc/pro/ListingGallery.astro';
---
<ListingGallery
  title="12 Linden Row"
  address="Linden Hill, 10 minutes to the station"
  price="$845,000"
  priceNote="Guide price"
  facts={[{ label: 'Bedrooms', value: '4' }, { label: 'Bathrooms', value: '2' }, { label: 'Area', value: '142 m²' }, { label: 'Garden', value: 'South facing' }]}
  views={[
    { kind: 'house', seed: '12 Linden Row', block: 2, name: 'The front', label: 'The house from the street' },
    { kind: 'house', seed: '12 Linden Row', time: 'dusk', block: 2, name: 'At dusk', label: 'The house at dusk' },
  ]}
  primary={{ href: '#viewing', label: 'Book a viewing' }}
/>
```

## Reduced motion

The thumbnails switch pictures at once; the lens appears without its fade.

## With ClientRouter

CSS, and the Lens bound through the runtime.

## Craft

- The pictures are stacked and one rule a place shows the one whose thumbnail is checked, up to five; the thumbnails are radios, so the arrow keys move along them.
- Each picture sits in a Lens, which draws it twice and scales the copy at the pointer, so a drawing magnifies as crisply as an image.
- Each picture is named once, by its drawing (role img); the Lens's copy is inert and hidden from assistive technology.

## Replaces

- Listing page galleries built on a slider library

## Source

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