Network health

Installation#

pnpm dlx shadcn@latest add @lumesec/ln-health

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

npx shadcn@latest add https://elements.lumesec.ai/r/ln-health.json

Usage#

import { LnHealth } from "@/components/lumesec/ln-health";

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

Behaviour#

One score for the site from five areas, with the issues that cost the most points. Resolving an issue updates the score.

API reference#

Events#

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

Accessibility#

• The score ring has role="img" and an aria-label such as "Health score 89 of 100".
• Each issue has one native action button that reads Working… and is disabled while it runs. If that button had focus, focus moves to the action of the next issue when the issue disappears.
• Resolved issues are announced in a polite live region together with the new score.
• The traffic lane canvas is aria-hidden.
• Reduced motion: traffic pixels are not drawn, the score ring changes without transition, and a resolved issue disappears after 50 ms without fading.

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, --card, --destructive, --foreground, --lumesec, --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-mono, --ui-muted, --ui-surface, --ui-track and --ui-warn.

Notes#

• Shows built-in demo data: five areas (Internet, Wi-Fi, Switching, Security, Sites) and three open issues. No attribute selects other data. The score is the rounded mean of the area scores.
• Uses a container query: below 470px the ring stacks above the area list.