Sources and citations

Paragraph with numbered citations; hovering or focusing one draws a dotted beam to its source chip and loads a preview card.

View as Markdown

<hf-sources>· loading

Tryhover the numbers in the text.

Installation

pnpm dlx shadcn@latest add @lumesec/hf-sources

First 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}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-sources.json

Usage

import { HfSources } from "@/components/lumesec/hf-sources";

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

Behaviour

Hovering a citation draws a dotted beam to its source chip with packets running along it. The preview loads with a pixel skeleton, and each favicon is the domain's first letter on a dotted tile.

API reference

Events

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

openReact proponOpenDetail{ source: { t: string, d: string, s: string } }

Fires when a citation or source chip is clicked. t is the title, d the domain and s the snippet.

Accessibility

Citations are buttons with an aria-label such as Source 1: <title>.
Source chips are <a href="#"> elements with role="listitem" inside a role="list"; that role replaces the link role, and clicks do not navigate.
Focusing a citation or chip with Tab selects it, the same as hovering.
The preview card is an aria-live="polite" region.
Favicon letters are aria-hidden text; their tiles, the beam and the loading skeleton are drawn on an aria-hidden canvas.
Reduced motion: the preview fills in without the skeleton delay, the beam is drawn whole without packets, and drawing stops between interactions.

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

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

Notes

The paragraph, three citations and three sources are built-in demo content and cannot be configured.
Chips do not open URLs; handle open to navigate.
Favicons are the first letter of the domain, set as text on a dotted tile in a colour derived from the domain.
Without reduced motion, the packets keep the canvas redrawing every frame while the element is visible.

<hf-approve>

Permission prompthf-approve

<hf-diff>

Diff reviewhf-diff

<hf-tree>

Changed fileshf-tree

<hf-graph>

Agent graphhf-graph

Was this page helpful?

Related