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.
Installation
pnpm dlx shadcn@latest add @lumesec/sv-changesFirst 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}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/sv-changes.jsonUsage
import { SvChanges } from "@/components/lumesec/sv-changes";
export function Example() {
return (
<SvChanges />
);
}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.
applyReact proponApplyDetail{ 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.
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 anaria-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.
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.
Related
Was this page helpful?