# Floor Plan (Moonarc)

A home's floors drawn from its rooms: each room a rectangle on a grid of metres with its walls round it and its name and area over it, and beside the plan the same rooms as a list with the total. Pointing at a room in the list, or focusing it, lights the room on the plan, and pointing at a room on the plan lights its line (:has(), one rule a room up to twelve). Two or three floors take tabs. The plan is a picture of the list and is hidden from a screen reader, which reads the rooms and their areas. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/floor-plan` (license key required)
- Tier B · category section · trigger pointer, click
- Readout: `<FloorPlan floors={[{ label, rooms: [{ name, x, y, w, h }] }]} />`
- Browser support: newly (Chrome 105 · Firefox 121 · Safari 15.4); elsewhere: without :has() the plan and the list do not light each other, and only the first floor shows
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 16.0 kB raw)
- Page: https://moonarc.dev/components/floor-plan/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `floors` | `{ label; rooms: { name; x; y; w; h; block? }[] }[]` | none | One to three floors, each one to twelve rooms placed in metres from the top left corner; block tints a room. |
| `unit` | `string` | `'{n} m²'` | How an area is written: {n} is the number of square metres. |
| `words` | `{ rooms?; total?; floors? }` | `English` | The words over the list, before the total and the tabs' name. |
| `headline` | `string` | none | The heading. |
| `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. |
| `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 FloorPlan from '@/components/moonarc/pro/FloorPlan.astro';
---
<FloorPlan
  headline="Floor plan"
  floors={[
    { label: 'Ground floor', rooms: [
      { name: 'Living room', x: 0, y: 0, w: 6, h: 4.5 },
      { name: 'Kitchen', x: 6, y: 0, w: 4, h: 4.5 },
      { name: 'Hall', x: 0, y: 4.5, w: 3, h: 2.5 },
      { name: 'Dining', x: 3, y: 4.5, w: 7, h: 2.5 },
    ] },
  ]}
/>
```

## Reduced motion

A room lights at once, with no fade.

## With ClientRouter

CSS only.

## Craft

- The plan is drawn in metres (the viewBox is the floor's own size), so the areas in the list are the rooms' own and the drawing never disagrees with them.
- The rooms' names sit over the plan as page text in percentages of the floor, on the page's ground, so they read on any tint; a room too small for its area shows its name only.
- The list is the content and the plan its picture: a screen reader hears each room and its area in order, and the total.

## Replaces

- Floor plan images exported from a drawing tool

## Source

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