Inline citation

Pill exports CitedAnswer with parts, sources, and defaultOpen. Each citation is a round button, at least 18px tall, showing the cite number. The accessible name is Source {n}: {site}. The card is a tooltip, at most 296px wide, placed from the marker's rectangle. It shows a letter favicon, the site, the domain, a two-line title, and a three-line snippet. Moving the pointer onto the card cancels the close timer, which is 140ms. There is no footnote list under the paragraph. The card opened by defaultOpen is dismissed on the first pointer enter, so it does not stick to the demo.

Superscript exports SuperscriptAnswer with the same props as the pill: parts, sources, and defaultOpen. The marker is a raised number in a sky colour, not a pill, with the same Source {n} name and the same card. A ResizeObserver replaces the card when the text column changes width. Under the paragraph, an ordered list shows every source: number, favicon, title, and the domain once the container is wide enough. The row whose source is open uses a stronger text colour. Escape still closes the card. cite remains 1-based, so sources[0] is marker 1.

Source chip exports SourceChipAnswer. paragraphs is an array of paragraphs, each an array of strings or { sources: number[] }. Other props are sources, defaultOpen, and className. A source has domain, site, title, date, snippet, url, and color. The marker keeps the last word of the previous text with it, so the chip does not start a line. It shows the first domain, a letter tile, and +n when more sources are attached. The card is a link to the current url. Previous and Next buttons, and ArrowLeft and ArrowRight on the chip, move page, with a counter such as 1/3. Escape closes the card and returns focus to the chip.

Quoted span exports QuotedAnswer. paragraphs is an array of paragraphs made of strings or claims. A claim has text, source as an index into sources, passage, match phrases to highlight, an optional support of full or partial, and an optional note. Props also include defaultOpen, showSummary, default true, and className. The claim is a dotted underline. Partial support is amber, and its accessible name says partly supported. Hover opens the card. Click pins it, and a click outside or Escape closes it. The card quotes the passage with mark highlights, shows Partly supported plus the note when support is partial, and ends with an Open source link. Enter on a claim moves focus to that link. The summary line counts claims and distinct sources, and a button focuses the first partial claim.

Margin notes exports MarginNotesDoc. Props are title, optional dek and byline, meta, sections, notes, defaultPinned, and onShare. A section has an optional heading and paragraphs of strings or { text, note }. note is the index into notes. Each note has site, domain, title, excerpt, and color. The marker is a small number. Hover highlights the sentence. Click pins the note, sets aria-pressed, and Escape clears the pin. At a container width of 900px the notes sit in a 272px rail and shift so they do not overlap, with a curve back to the marker. Below that width the same notes are footnotes under the paragraph, and the excerpt shows only while pinned. Copy writes the title, dek, headings, and paragraph text. Share calls onShare and shows Link copied. The sample is a research brief that cites a £7,500 boiler grant.