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.
Installation
pnpm dlx shadcn@latest add @lumesec/ln-ip-poolFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/ln-ip-pool.jsonUsage
import { LnIpPool } from "@/components/lumesec/ln-ip-pool";
export function Example() {
return (
<LnIpPool />
);
}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.
changeReact proponChangeDetail{ 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 witharia-pressedbuttons. The search field has anaria-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.
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.
Related
Was this page helpful?