Port space

Installation#

pnpm dlx shadcn@latest add @lumesec/sv-port-map

pnpm dlx 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#

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

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

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#

Keyboard#

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.

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.