Segmentation

Inter-VLAN policy matrix: select a cell to see its traffic, select it again to cycle Allow, Limit and Block; blocked traffic stops at the gate.

View as Markdown

<ln-segments>· loading

Tryset Staff to AIOP to Block.

Installation

pnpm dlx shadcn@latest add @lumesec/ln-segments

First 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}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/ln-segments.json

Usage

import { LnSegments } from "@/components/lumesec/ln-segments";

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

Behaviour

Which network may open connections to which. Select a cell to see its traffic; select it again to cycle Allow, Limit and Block. Blocked traffic stops at the gate.

API reference

Events

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

changeReact proponChangeDetail{ from: string, to: string, policy: "allow" | "limit" | "block" }

Fires when a cell's policy changes. from is the source network (row) and to the destination (column).

Keyboard

Keys	Action
ArrowLeft / ArrowRight / ArrowUp / ArrowDown	Move the selected cell, skipping the diagonal.
Enter / Space	Cycle the selected cell: Allow, Limit, Block.

Accessibility

The matrix has role="grid" with columnheader and rowheader labels and gridcell buttons. It uses a roving tabindex, so only the selected cell is in the tab order.
Each cell has aria-selected and an aria-label such as "Staff to AIOP: Allow".
The summary line under the lane is aria-live="polite" and refreshes its rate every second.
The lane canvas is aria-hidden.
Reduced motion: traffic pixels and the red flash at the gate are not drawn, and colour transitions in the matrix are removed.

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, --foreground, --input, --lumesec, --lumesec-success, --lumesec-warning and --muted-foreground.

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

Notes

Shows six built-in networks (Management, Staff, AIOP, Cameras, IoT, Guest) with a default policy and simulated demand. No attribute selects other data; Staff to AIOP is selected on load.
Limit caps the flow at 10 Mb/s. Diagonal cells (a network to itself) cannot be changed.
Uses a container query: below 470px cells show only a colour dot and headers use short names; each cell keeps its aria-label.

<ln-firewall>

Firewall rulesln-firewall

<ln-threats>

Intrusion preventionln-threats

<ln-topology>

Topology editorln-topology

<ln-device-card>

Device cardln-device-card

Was this page helpful?

Related