# Conflicts before apply
> Conflicts in a planned change set, such as taken ports, shadowed routes and public listeners, each with a one-click fix.
- Element: `<sv-conflicts>`
- React: `import { SvConflicts } from "@/components/lumesec/sv-conflicts"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-conflicts.json
- Page: https://elements.lumesec.ai/components/service-map/conflicts



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

```html
<sv-conflicts></sv-conflicts>
```

## Installation

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

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

## Usage

React:

```tsx
import { SvConflicts } from "@/components/lumesec/sv-conflicts";

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

HTML:

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

<sv-conflicts></sv-conflicts>
```

## Behaviour

Problems in the planned changes: taken ports, shadowed routes, public listeners and missing firewall rules, each with its fix.

## API reference

### Events

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

| Event    | React prop | Detail                                                                                                          | Description                                                                                                                                                                                  |
| -------- | ---------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ action: string, service?: string, port?: number, bind?: string, host?: string, from?: string, to?: string }` | Fires when a fix is applied, with the change it plans: `move-port` (`service`, `port`), `bind` (`service`, `port`, `bind`), `add-route` (`host`) or `add-dependency` (`from`, `to`, `port`). |

## Accessibility

* Conflicts are a `role="list"`. Each fix is a button that is disabled once pressed.
* A polite live region announces each resolved conflict and how many are left.
* When none are left, a `role="status"` message says the plan can be applied.
* Reduced motion: resolved items disappear without sliding out, the counter changes without rolling, and the final pixel burst is 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`, `--lumesec-success`, `--lumesec-warning` and `--muted-foreground`.

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

## Notes

* Built-in demo data: four fixed conflicts (port 3000 on app-01, the shadowed /v1/infer route, Redis on 0.0.0.0, a missing firewall rule from app-02 to store-01:9000). It does not inspect other components. No attribute selects a record.
* The Redis fix (Bind to 10.0.30.20) emits `{ action: 'bind', service: 'Redis', port: 6379, bind: '10.0.30.20' }`, the same shape as the `change` event of `sv-bindings`.