# Reachable from the Internet
> What the edge firewall lets through from the Internet. Endpoints toggle open or blocked; open ports outside the reverse proxy are flagged.
- Element: `<sv-exposure>`
- React: `import { SvExposure } from "@/components/lumesec/sv-exposure"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-exposure.json
- Page: https://elements.lumesec.ai/components/service-map/exposure



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

```html
<sv-exposure></sv-exposure>
```

## Installation

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

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

## Usage

React:

```tsx
import { SvExposure } from "@/components/lumesec/sv-exposure";

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

HTML:

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

<sv-exposure></sv-exposure>
```

## Behaviour

What the edge firewall lets through. Anything open outside the reverse proxy is marked as directly exposed.

## API reference

### Events

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

| Event    | React prop | Detail                                                                | Description                                                             |
| -------- | ---------- | --------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| `change` | `onChange` | `{ action: 'open-port' \| 'close-port', host: string, port: number }` | Fires when an endpoint is opened or blocked, with its host id and port. |

## Accessibility

* Each endpoint is a button with `aria-pressed` for open and an `aria-label` that states host, port and current state.
* The summary is a polite live region. The canvas is `aria-hidden`.
* Reduced motion: no particles flow through open ports and blocked ports do not flash at the firewall.

## 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`, `--destructive`, `--foreground`, `--lumesec`, `--lumesec-success` and `--muted-foreground`.

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

## Notes

* Built-in demo data: edge-01:443, edge-01:80, cache-01:6379, app-01:5005 and edge-01:22. No attribute selects a record.
* edge-01:443 cannot be blocked; clicks on it are ignored. Any open port other than 443 and 80 counts as directly exposed.