# Coverage plan
> Wi-Fi coverage on a floor plan for the selected band; drag access points and clients join the strongest one in range.
- Element: `<ln-floorplan>`
- React: `import { LnFloorplan } from "@/components/lumesec/ln-floorplan"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-floorplan.json
- Page: https://elements.lumesec.ai/components/network/floorplan



Live preview: https://elements.lumesec.ai/view/ln-floorplan

```html
<ln-floorplan></ln-floorplan>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-floorplan
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/ln-floorplan.json
```

## Usage

React:

```tsx
import { LnFloorplan } from "@/components/lumesec/ln-floorplan";

export function Example() {
  return (
    <LnFloorplan />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/ln-floorplan.js"></script>

<ln-floorplan></ln-floorplan>
```

## Behaviour

Coverage on the floor plan for the selected band. Drag access points to move it; clients join the strongest one in range and their traffic runs along that link.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event   | React prop | Detail                                 | Description                                                                                                                                                                                                     |
| ------- | ---------- | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `move`  | `onMove`   | `{ ap: string, x: number, y: number }` | Fires when a pointer drag of an access point ends and its position changed; a press without movement does not fire it. `x` and `y` are plan coordinates (0 to 600 by 0 to 360). Arrow-key moves do not fire it. |
| `radio` | `onRadio`  | `{ ap: string, on: boolean }`          | Fires when the radio of the selected access point is switched.                                                                                                                                                  |

## Keyboard

| Keys                                         | Action                                                          |
| -------------------------------------------- | --------------------------------------------------------------- |
| ArrowLeft / ArrowRight / ArrowUp / ArrowDown | On a focused access point: move it 10 plan units and select it. |

## Accessibility

* Access points are buttons with `aria-pressed` and an `aria-label` such as "AP Office. Drag or use arrow keys to move."
* The band control is a `role="group"` labelled Band with `aria-pressed` buttons.
* The detail line for the selected access point is `aria-live="polite"`. Its radio control is a `role="switch"` labelled "Radio for …" with the access point name.
* The plan SVG and the coverage canvas are `aria-hidden`; coverage, connected clients and weak-signal counts are text.
* Reduced motion: client traffic pixels are not drawn; coverage and client links still update when an access point moves or the band changes.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--background`, `--border`, `--card`, `--destructive`, `--foreground`, `--input`, `--lumesec` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-border-strong`, `--ui-border-subtle`, `--ui-danger`, `--ui-faint`, `--ui-fg`, `--ui-fg2`, `--ui-mono`, `--ui-muted` and `--ui-surface`.

## Notes

* Shows a built-in ground floor (600 by 360 plan units) with three access points, AP Lab offline, and 14 clients. No attribute selects another plan; 5 GHz is selected on load.
* Coverage radius depends on the band: 2.4 GHz reaches furthest and 6 GHz the least.
* The stage keeps a 600:360 aspect ratio and fills its container's width.