Connection

One demo connection from consumer to provider with protocol, encryption, authentication, pool use and a masked connection string.

View as Markdown

<sv-conn>· loading

Tryreveal, then copy.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <sv-conn>

Props

fromremounts

toremounts

<SvConn from="api-1" to="pgb" />

Installation

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

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-conn.json

Usage

import { SvConn } from "@/components/lumesec/sv-conn";

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

Behaviour

One consumer-to-provider connection: protocol, encryption, authentication, pool usage and the connection string with the secret masked.

API reference

Attributes

fromReact propfromTypestringDefaultapi-1

Consumer service id. Together with to it selects a direct dependency from the demo data, for example from="api-1" to="redis". Read once on first connect.

toReact proptoTypestringDefaultpgb

Provider service id. If the pair is not a direct dependency, the first one (AIOP API on app-01 to PgBouncer) is shown. Read once on first connect.

Events

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

copyReact proponCopyDetail{ connection: string }

Fires when Copy is pressed. connection is the string as displayed: masked unless Reveal is on.

Accessibility

The connection menu is labelled Connection. Reveal is a toggle with aria-pressed whose text changes to Hide.
Details are a description list. The connection string is focusable so it can be scrolled with the keyboard.
A polite live region announces that the string was copied, and says so when its secret is masked. The traffic canvas is aria-hidden.
Reduced motion: no request particles are drawn, and the Copy and Copied labels swap without rolling.

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

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

Notes

Built-in demo data: every direct dependency (dep edge) in INFRA. Protocol, authentication and pool size follow the provider type; rate, pool use and p95 latency are simulated.
Copy writes the string as displayed: the secret stays masked unless Reveal is on. The secret is a fixed placeholder.

<sv-deps>

Dependenciessv-deps

<sv-matrix>

Consumer × providersv-matrix

<sv-blast>

What breaks if…sv-blast

<sv-trace>

Tracesv-trace

Was this page helpful?

Related