# Port space
> All 65,536 ports of a demo host as 1,024 cells of 64, with occupied cells lit and a field that checks whether a port is free.
- Element: `<sv-port-map>`
- React: `import { SvPortMap } from "@/components/lumesec/sv-port-map"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-port-map.json
- Page: https://elements.lumesec.ai/components/service-map/port-map



Live preview: https://elements.lumesec.ai/view/sv-port-map

```html
<sv-port-map></sv-port-map>
```

## Installation

```bash
npx shadcn@latest add @lumesec/sv-port-map
```

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/sv-port-map.json
```

## Usage

React:

```tsx
import { SvPortMap } from "@/components/lumesec/sv-port-map";

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

HTML:

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

<sv-port-map></sv-port-map>
```

## Behaviour

All 65,536 ports of a host as 1,024 cells of 64. Occupied cells are lit; system ports start the first row, ephemeral ports fill the last four.

## API reference

### Properties

| Property           | Type                            | Description                                                                                                   |
| ------------------ | ------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| `used` (read-only) | `Map<number, { name: string }>` | Occupied ports of the selected host, each mapped to the service record that uses it. Includes SSH on port 22. |

## Keyboard

| Keys                   | Action                                                        |
| ---------------------- | ------------------------------------------------------------- |
| ArrowLeft / ArrowRight | With the grid focused: move the cursor one cell (64 ports).   |
| ArrowUp / ArrowDown    | With the grid focused: move the cursor one row (4,096 ports). |

## Accessibility

* The grid is a focusable `role="application"` region whose `aria-label` names the arrow keys.
* The range and occupants of the current cell are in a polite live region, as is the result of the port check.
* The host switch is a `role="group"` labelled Host with `aria-pressed` buttons; the check field is labelled Port to check.
* The zone legend is `aria-hidden`.
* Reduced motion: the highlight on a checked cell is not animated, and the canvas redraws only on interaction.

## 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 `--border`, `--card`, `--foreground`, `--lumesec` and `--muted-foreground`.

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

## Notes

* Built-in host choice: app-01 (default), db-01, mon-01 and edge-01, with ports from `INFRA` plus SSH on 22. No attribute selects the host.
* Cells run left to right in 16 rows: system ports 0 to 1023 are the first 16 cells, ephemeral ports from 49152 the last four rows.
* The free-port check names the usual service of well-known ports and warns about the ephemeral range.
* Hovering or clicking the canvas moves the cursor.