# Venue Guide (Moonarc)

Where it is and how to get round it: a drawn site map in a colour block with the places on it as numbered dots in their own colours (the stages, the food, the entrance), and beside it the same places as a numbered list with a line each; pointing at a place in the list lights its dot on the map. Under them, how to get there by train, bus, bike, car or on foot, each with its icon, and the address with a link to a map. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/venue-guide` (license key required)
- Tier B · category section · trigger hover
- Readout: `<VenueGuide places={[{ name, note, x, y }]} travel={[{ mode, title, text }]} />`
- Browser support: newly (Chrome 105 · Firefox 121 · Safari 15.4); elsewhere: the dots do not light from the list; the list and the map read the same
- Measured cost: 0 B JS (CSS 12.9 kB raw)
- Page: https://moonarc.dev/components/venue-guide/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `places` | `{ name, note?, x, y, block? }[]` | none | Up to nine places; x and y place the dot in percent of the map's width and height. |
| `travel` | `{ mode: 'train' | 'bus' | 'bike' | 'car' | 'walk' | 'plane'; title; text }[]` | none | How to get there, each with its icon. |
| `address` | `string[]` | none | The address, one line an entry. |
| `directions` | `{ href: string; label: string }` | none | A link to a map. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `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. |
| `placesLabel` | `string` | `'On the site'` | Accessible name of the list of places. |
| `travelLabel` | `string` | `'Getting there'` | Accessible name of the ways to get there. |
| `block` | `1 | 2 | 3 | 4 | 5` | `4` | The colour block the map paints. |
| `level` | `2 | 3` | `2` | Heading level. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; the map keeps its block on every tone. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import VenueGuide from '@/components/moonarc/pro/VenueGuide.astro';
---
<VenueGuide
  eyebrow="Venue"
  places={[
    { name: 'Main stage', note: 'Talks, in the old engine hall', x: 32, y: 42 },
    { name: 'Hall B', note: 'Workshops, up the stairs', x: 64, y: 32 },
    { name: 'Entrance', note: 'Badges and the cloakroom', x: 44, y: 76 },
  ]}
  travel={[{ mode: 'train', title: 'By train', text: 'Ten minutes on foot from the station.' }]}
  address={['Your street 12', 'Your city']}
  directions={{ href: 'https://www.openstreetmap.org/', label: 'Directions' }}
>
  <span slot="headline">An engine hall <em>by the river</em></span>
</VenueGuide>
```

## Reduced motion

A dot lights at once, without growing into its ring.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- The map is a picture of the list and hidden from assistive technology; the numbered list carries every place.
- The water and the greens are drawn in the block's two drawing colours and the paths in a lighter shade of its ground, so the map belongs to whichever palette paints it.
- A dot is placed by percentages, so the same places sit right at any size the map is drawn.
- The map loads nothing from a map provider: a drawn plan stands in until a real one is wanted, and the directions link hands over to one.

## Replaces

- Embedded maps for event venues
- Venue info sections

## Source

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