Consumer × provider

Consumer-by-provider grid of every direct demo connection, shaded by request rate, with arrow-key movement between cells.

View as Markdown

<sv-matrix>· loading

Tryselect a cell, then use the arrow keys.

Installation

pnpm dlx shadcn@latest add @lumesec/sv-matrix

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/sv-matrix.json

Usage

import { SvMatrix } from "@/components/lumesec/sv-matrix";

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

Behaviour

Every direct connection as a cell, shaded by request rate.

API reference

Events

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

selectReact proponSelectDetail{ from: string, to: string }

Fires when a non-empty cell is chosen, with the consumer and provider service ids.

Keyboard

Keys	Action
ArrowLeft / ArrowRight / ArrowUp / ArrowDown	Move focus to the neighbouring cell, empty cells included.

Accessibility

The table has role="grid" and an aria-label that explains rows and columns; headers use scope.
Each cell is a button whose aria-label names consumer, provider and requests per second. Empty cells are labelled none and have tabindex="-1".
The connection detail under the grid is a polite live region.
Reduced motion: no animation; values update every 1.5 s regardless of the setting.

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

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

Notes

Built-in demo data: 8 consumers by 10 providers from the INFRA edges, monitoring scrapes excluded. No attribute selects a record.
Shading follows the square root of each rate relative to the busiest connection. Rates are simulated.
The grid scrolls horizontally in narrow containers.

<sv-deps>

Dependenciessv-deps

<sv-blast>

What breaks if…sv-blast

<sv-conn>

Connectionsv-conn

<sv-trace>

Tracesv-trace

Was this page helpful?

Related