# Planned changes
> Planned changes as a diff. Apply runs them one at a time with progress, and each one can be discarded before the run.
- Element: `<sv-changes>`
- React: `import { SvChanges } from "@/components/lumesec/sv-changes"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-changes.json
- Page: https://elements.lumesec.ai/components/service-map/changes



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

```html
<sv-changes></sv-changes>
```

## Installation

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

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

## Usage

React:

```tsx
import { SvChanges } from "@/components/lumesec/sv-changes";

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

HTML:

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

<sv-changes></sv-changes>
```

## Behaviour

The plan as a diff. Apply runs it step by step and checks each one before the next.

## API reference

### Events

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

| Event   | React prop | Detail              | Description                                                          |
| ------- | ---------- | ------------------- | -------------------------------------------------------------------- |
| `apply` | `onApply`  | `{ count: number }` | Fires when every pending change has been applied, with their number. |

### Methods

Call them on the element, for example through a React ref.

| Method                   | Description                                                                                      |
| ------------------------ | ------------------------------------------------------------------------------------------------ |
| `apply(): Promise<void>` | Applies the pending changes in order and resolves when done. Does nothing when none are pending. |

## Accessibility

* Changes are a `role="list"`; each sign carries an `aria-label` (Add, Change or Remove).
* A polite live region reports each step and the final result. The progress bar is `aria-hidden`.
* Apply plan is disabled during a run and when nothing is pending; Discard links are replaced by Queued during a run.
* Reduced motion: each step takes 20 ms instead of 850 ms, and the counter roll, progress bar transition and pixel burst are skipped.

## 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`, `--destructive`, `--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-danger`, `--ui-fg`, `--ui-fg2`, `--ui-font`, `--ui-mono`, `--ui-muted`, `--ui-ok`, `--ui-raised` and `--ui-warn`.

## Notes

* Built-in demo plan of four changes: add Reports API, move the /v1/infer route, rebind Redis, remove app-01:5005. It does not read the queue of `sv-shell`. No attribute selects a record.