Path
Traceroute from the site to a destination, hop by hop, with the latency added at each hop; it traces on load and again on request.
Installation
pnpm dlx shadcn@latest add @lumesec/ln-pathFirst 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/ln-path.jsonUsage
import { LnPath } from "@/components/lumesec/ln-path";
export function Example() {
return (
<LnPath />
);
}Behaviour
Traceroute from the site to a destination, hop by hop, with the latency added at each hop.
API reference
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
traceReact proponTraceDetail{ hops: number }Fires when a trace finishes. hops is the number of hops (6 in the demo).
Methods
Call them on the element, for example through a React ref.
trace()Runs a trace and returns a promise that resolves when it finishes. Same as Trace again. Calling it during a trace starts a second, overlapping trace.
Accessibility
- The hop list is an ordered list with
aria-live="polite"; each hop's name, address and latency are text. - Trace again is a native button, disabled during a trace.
- The hop marker canvas is
aria-hidden. - Reduced motion: the marker jumps between hops instead of travelling, and each hop appears after 20 ms instead of 380 ms.
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 --background, --border, --foreground, --lumesec and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border-subtle, --ui-fg, --ui-mono and --ui-muted.
Notes
- Shows a fixed demo path from Innsbruck HQ to an AIOP node in Frankfurt (6 hops); latencies are simulated with about 8% variation. No attribute selects the destination.
- The first trace starts 600 ms after the element is first connected.
- The React wrapper's
refis typed as the element class, so its methods can be called once the element is connected.
Related
Was this page helpful?