Provenance Text
betaText that shows who wrote each part of it — the person, an agent or a quoted source — with each author's share.
- AI
- 2 files
- 2 npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add provenance-textnpm packages installed: class-variance-authority, diff.
import { ProvenanceLegend } from "@/components/ui/provenance-text";Default
Hidden
While Editing
In Your Own Layout
<ProvenanceLegend>
| Prop | Type | Default |
|---|---|---|
authors (required) | ProvenanceAuthors | — |
segments (required) | readonly ProvenanceSegment[] | — |
Plus every attribute of <ul> except children.
<ProvenanceInline>
| Prop | Type | Default |
|---|---|---|
authors (required) | ProvenanceAuthors | — |
segments (required) | readonly ProvenanceSegment[] | — |
showWhether to mark who wrote what. Off, it is plain text. | boolean | true |
Plus every attribute of <span> except children.
<ProvenanceText>
| Prop | Type | Default |
|---|---|---|
authors (required) | ProvenanceAuthors | — |
segments (required) | readonly ProvenanceSegment[] | — |
defaultShow | boolean | false |
onShowChange | (show: boolean) => void | — |
showControlled: whether who wrote what is shown. | boolean | — |
toggleLabelThe toggle's name. It stays the same pressed or not; its state is announced. | string | "Show who wrote what" |
Plus every attribute of <div> except children.
Hidden by default, it is a plain paragraph with nothing extra to hear. One toggle button (aria-pressed, aria-controls the paragraph) turns provenance on; its name stays the same and its state is what is announced. Shown, each marked run is bracketed by visually hidden words — "Claude wrote: … End of Claude's text." for an agent, "Quoted from Wikipedia: … End quote." for a source — rather than by mark, ins or aria-description, whose announcement varies between screen readers; the words also reach braille and are unselectable, so copying the paragraph copies only the paragraph. Nothing gets a tab stop except an author with an href, whose words become a link. The legend is a named list placed between the toggle and the text, so the next thing heard after pressing is who wrote what: each author with their kind in words and a share, "Claude (agent) 31%". Agent and source marks differ in underline shape, solid and heavy against dashed, so they stay apart in monochrome and forced colours. No live region: the only change the component makes is the one the person just asked for.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes