Access point

Installation#

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

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

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

Usage#

import { LnAp } from "@/components/lumesec/ln-ap";

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

Behaviour#

One access point’s three radios. Clients sit on a ring per band; each bar splits airtime between this access point and its neighbours.

API reference#

Events#

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

Accessibility#

• The access point switcher is a role="group" labelled Access point; the radio list is a role="group" labelled Radios.
• Each radio is a button with aria-pressed and an aria-label that gives band, channel, client count and this access point's airtime share.
• Selecting a radio re-renders the radio buttons and returns focus to the pressed one.
• The client ring canvas is aria-hidden.
• Reduced motion: client traffic pixels are not drawn, the rings are redrawn once after an access point or radio change, and the airtime bars change 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 --border, --card, --foreground, --input, --lumesec, --muted and --muted-foreground.

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

Notes#

• Shows two built-in access points (AP Office, AP Lobby) with channel, width, power and client data. No attribute selects the access point; airtime is simulated and updates every 1.5 s while the element is on screen.
• Switching the access point does not fire an event. 5 GHz is selected on load.
• Uses a container query: below 470px the rings stack above the radio list.