Conflicts before apply

Conflicts in a planned change set, such as taken ports, shadowed routes and public listeners, each with a one-click fix.

View as Markdown

<sv-conflicts>· loading

Tryresolve all four.

Installation

pnpm dlx shadcn@latest add @lumesec/sv-conflicts

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/sv-conflicts.json

Usage

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

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

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.

changeReact proponChangeDetail{ 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.

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.

<sv-port-map>

Port spacesv-port-map

<sv-port-picker>

Port pickersv-port-picker

<sv-port-scan>

Listening ports scansv-port-scan

<sv-bindings>

Listen addressessv-bindings

Was this page helpful?

Related