# Hypervisors
> Two hypervisors with their VMs and allocated cores and memory. Live migration shows the memory copy as traffic between the hosts.
- Element: `<sv-vm-stack>`
- React: `import { SvVmStack } from "@/components/lumesec/sv-vm-stack"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-vm-stack.json
- Page: https://elements.lumesec.ai/components/service-map/vm-stack



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

```html
<sv-vm-stack></sv-vm-stack>
```

## Installation

```bash
npx shadcn@latest add @lumesec/sv-vm-stack
```

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-vm-stack.json
```

## Usage

React:

```tsx
import { SvVmStack } from "@/components/lumesec/sv-vm-stack";

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

HTML:

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

<sv-vm-stack></sv-vm-stack>
```

## Behaviour

Virtual machines on their hypervisors with allocated cores and memory. Live migration shows the memory copy running between the two hosts.

## API reference

### Events

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

| Event    | React prop | Detail                                          | Description                                                                                                 |
| -------- | ---------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ action: 'migrate', vm: string, to: string }` | Fires when a migration finishes. `vm` is the VM's host id, `to` the target hypervisor (`hv-01` or `hv-02`). |

## Accessibility

* VMs are buttons with `aria-pressed` for the selection. The Migrate button is disabled until a VM is selected and while a migration runs.
* A polite live region reports copy progress and the result.
* The traffic canvas is `aria-hidden`.
* Reduced motion: a migration completes after 50 ms instead of 2.6 s plus 30 ms per GB, and no particles travel between the hypervisors.

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

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

## Notes

* Built-in demo data: hv-01 (64 cores, 512 GB) and hv-02 (64 cores, 384 GB) with the VMs edge-01, app-01, mon-01, app-02, auth-01 and cache-01, placed as in `INFRA`. No attribute selects a record.
* Capacity is not checked before a migration. The reported downtime of 38 ms is fixed demo text.
* Container query: under 470 px the hypervisors stack vertically.