How it works › Value sources

Any value on the page should answer "where does this come from?" with a right-click, and the same for a photo or a file. Load sources.js beside the kit and every value with a source gets the popover: its basis, the source and its page, when it was read, the record, and a citation to copy. This page loads it.

- type: table
  name: By brand
  order: [model, form, peak_torque, rated_torque, max_speed, mass, gear_ratio, voltage, od, length, buses, price]
  groupBy: { property: brand, direction: ASC }
  sort:
    - { property: peak_torque, direction: DESC }
  summaries: { peak_torque: Max, mass: Min, price: Min }

<script type="module" src="/vendor/data-ui/data-ui.js"></script>
<script type="module" src="/vendor/data-ui/sources.js"></script>

<data-views src="views.base"></data-views>
<img src="motor.webp" alt="…" data-provenance='{"source": "aifitlab.com", "sourceUrl": "https://…", "asOf": "2026-10-22"}'>

What carries a source

• A rich cell {value, unit, basis, source, sourceUrl, sourcePage, asOf, record, note}: sourceUrl is the page the value was read from, sourcePage the host's own page about that source, record a record or field id. The kit writes them as one data-provenance attribute on the value (on the <td> for the table's number cells), only when the cell has any of them.
• <data-value> reads them as attributes: source, source-url, source-page, as-of, record, note.
• Anything of yours (an <img>, an <a>, a <figure>) says data-provenance='{…}': that is how photos and files get their sources. See them on a plain page.

The popover

• Opens on a right-click on or inside an element with provenance, on a touch or pen press held 550 ms, and on the ContextMenu key or Shift+F10 for the focused element. Shift + right-click always gives the browser's menu.
• Shows the value and unit, its basis (Stated, Measured or Derived, with its mark), then Source, URL, Accessed ("N days ago"), Record and Note, each only when there is one; the actions Open URL ↗, Source page and Copy citation.
• Closes on Escape (focus goes back), a click outside, a scroll or a resize. One is open at a time; arrows and Tab move between its actions. It stays inside the viewport, full width less 16 px gutters on a phone.
• For hosts: attachSourcesMenu(root, {resolve}) supplies provenance for elements without the attribute; opening fires a bubbling data-sources-open event with the provenance; <html data-sources-menu="off"> turns it off.

Comes from docs/CONTRACT.md §22 (sources of a value) in docs/.