# Address map
> Map of all 256 addresses in a /24 where lease renewals flash live; select or search an address to reserve, release or make it static.
- Element: `<ln-ip-pool>`
- React: `import { LnIpPool } from "@/components/lumesec/ln-ip-pool"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-ip-pool.json
- Page: https://elements.lumesec.ai/components/network/ip-pool



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

```html
<ln-ip-pool></ln-ip-pool>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-ip-pool
```

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-ip-pool.json
```

## Usage

React:

```tsx
import { LnIpPool } from "@/components/lumesec/ln-ip-pool";

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

HTML:

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

<ln-ip-pool></ln-ip-pool>
```

## Behaviour

Every address in a /24. Renewals flash as they happen. Select an address, or search by host, to reserve, release or make it static.

## API reference

### Events

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

| Event    | React prop | Detail                                                    | Description                                                                                                    |
| -------- | ---------- | --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ address: string, state: "free" \| "res" \| "static" }` | Fires after an action on the selected address. `state` is the new state: `res` (reserved), `free` or `static`. |

## Keyboard

| Keys                   | Action                                                                                           |
| ---------------------- | ------------------------------------------------------------------------------------------------ |
| ArrowLeft / ArrowRight | On the map: select the previous or next address.                                                 |
| ArrowUp / ArrowDown    | On the map: move one row (16 addresses).                                                         |
| Home / End             | On the map: jump to .0 or .255.                                                                  |
| Enter                  | In the search field: select the matching address or the first host whose name contains the text. |

## Accessibility

* The map is one focusable `role="application"` element labelled "Address map. Arrow keys move between addresses."; individual cells are not focusable.
* The detail panel is `aria-live="polite"` and reads out the selected address, its state and host.
* The network switcher is a `role="group"` labelled Network with `aria-pressed` buttons. The search field has an `aria-label`.
* The renewal log is `aria-hidden`. When a search finds nothing, a visually hidden polite live region announces it.
* Reduced motion: colour transitions are removed; the 380 ms renewal flash on an address still shows.

## 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-success`, `--muted` and `--muted-foreground`.

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

## Notes

* Shows three built-in pools: Staff (10.0.10.0/24, with an address conflict at .47), AIOP (10.0.20.0/24, static addresses only) and IoT (10.0.50.0/24). No attribute selects the pool; a random lease renews every 900 ms while the element is on screen.
* Actions depend on the state: Reserve for free addresses; Make static or Release lease for leases; Remove reservation; Release for static addresses; Clear conflict.
* Search by address uses only the last octet.
* Uses a container query: below 520px the map and the side panel stack.