# Connection
> One demo connection from consumer to provider with protocol, encryption, authentication, pool use and a masked connection string.
- Element: `<sv-conn>`
- React: `import { SvConn } from "@/components/lumesec/sv-conn"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-conn.json
- Page: https://elements.lumesec.ai/components/service-map/conn



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

```html
<sv-conn></sv-conn>
```

## Playground

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

## Installation

```bash
npx shadcn@latest add @lumesec/sv-conn
```

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

## Usage

React:

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

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

HTML:

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

<sv-conn></sv-conn>
```

## Behaviour

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

## API reference

### Attributes

| Attribute | React prop | Type     | Default | Description                                                                                                                                                   |
| --------- | ---------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `from`    | `from`     | `string` | `api-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. |
| `to`      | `to`       | `string` | `pgb`   | 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.

| Event  | React prop | Detail                   | Description                                                                                      |
| ------ | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------ |
| `copy` | `onCopy`   | `{ 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](/docs/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.