Traffic shaping

Installation#

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

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

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

Usage#

import { LnQos } from "@/components/lumesec/ln-qos";

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

Behaviour#

Strict-priority shaping with guaranteed minimums and per-class ceilings. Allocation is recalculated as demand changes, and each lane shows what a class actually receives.

API reference#

Events#

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

Accessibility#

• Each ceiling is a native range input (10 to 1000 Mb/s, step 10) with an aria-label such as "Ceiling for Bulk".
• Committed changes are announced in a polite live region.
• The capacity bar and the lane canvases are aria-hidden; allocation and demand are text.
• Reduced motion: traffic pixels in the lanes are not drawn and the capacity bar changes without transition.

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, --lumesec-warning, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border-subtle, --ui-faint, --ui-fg, --ui-fg2, --ui-mono, --ui-muted, --ui-track and --ui-warn.

Notes#

• Shows five built-in classes on a 1 Gb/s WAN. No attribute selects other classes; demand is simulated and changes every 1.3 s while the element is on screen, and allocation is recalculated on every slider movement.
• Allocation gives each class its minimum (limited by demand and ceiling), then shares spare capacity among the High, Medium and Low tiers in that order.
• Uses a container query: below 480px the lanes hide and each slider moves under its class.