@glossarist/concept-browser 0.7.44 → 0.7.45

package/src/adapters/non-verbal/source-bridge.ts

@@ -0,0 +1,81 @@
+/**
+ * Source bridge — converts JSON-LD source entries to NonVerbalSource.
+ *
+ * Shared by Figure, Table, Formula bridges (all three use the same source
+ * shape, mirroring glossarist's ConceptSource). One function, one shape.
+ */
+
+import type { NonVerbalSource, NonVerbalSourceOrigin, NonVerbalSourceRef, NonVerbalSourceLocality } from './types';
+import { pickField } from './prefix';
+
+function refFromJsonLd(raw: Record<string, unknown> | string | undefined): NonVerbalSourceRef | undefined {
+  if (!raw) return undefined;
+  if (typeof raw === 'string') return { source: raw };
+  const r: NonVerbalSourceRef = {};
+  const source = pickField<string>(raw, 'source');
+  const id = pickField<string>(raw, 'id');
+  const version = pickField<string>(raw, 'version');
+  const text = pickField<string>(raw, 'text');
+  if (source) r.source = source;
+  if (id) r.id = id;
+  if (version) r.version = version;
+  if (text) r.text = text;
+  return Object.keys(r).length ? r : undefined;
+}
+
+function localityFromJsonLd(raw: Record<string, unknown> | undefined): NonVerbalSourceLocality | undefined {
+  if (!raw) return undefined;
+  const out: NonVerbalSourceLocality = {};
+  const t = pickField<string>(raw, 'localityType') ?? (raw.type as string | undefined);
+  const rf = pickField<string>(raw, 'referenceFrom') ?? (raw.reference_from as string | undefined);
+  const rt = pickField<string>(raw, 'referenceTo') ?? (raw.reference_to as string | undefined);
+  if (t) out.type = t;
+  if (rf) out.referenceFrom = rf;
+  if (rt) out.referenceTo = rt;
+  return Object.keys(out).length ? out : undefined;
+}
+
+function originFromJsonLd(raw: Record<string, unknown> | undefined): NonVerbalSourceOrigin | undefined {
+  if (!raw) return undefined;
+  const out: NonVerbalSourceOrigin = {};
+  const ref = refFromJsonLd(pickField<Record<string, unknown>>(raw, 'ref'));
+  const locality = localityFromJsonLd(pickField<Record<string, unknown>>(raw, 'locality'));
+  const link = pickField<string>(raw, 'link');
+  const id = pickField<string>(raw, 'id');
+  const version = pickField<string>(raw, 'version');
+  const source = pickField<string>(raw, 'source');
+  if (ref) out.ref = ref;
+  if (locality) out.locality = locality;
+  if (link) out.link = link;
+  if (id) out.id = id;
+  if (version) out.version = version;
+  if (source) out.source = source;
+  return Object.keys(out).length ? out : undefined;
+}
+
+export function sourceFromJsonLd(raw: Record<string, unknown> | undefined): NonVerbalSource | undefined {
+  if (!raw) return undefined;
+  const out: NonVerbalSource = {};
+  const id = pickField<string>(raw, 'id');
+  const type = pickField<string>(raw, 'sourceType') ?? pickField<string>(raw, 'type');
+  const status = pickField<string>(raw, 'sourceStatus') ?? pickField<string>(raw, 'status');
+  const modification = pickField<string>(raw, 'modification');
+  const origin = originFromJsonLd(pickField<Record<string, unknown>>(raw, 'origin'));
+  if (id) out.id = id;
+  if (type) out.type = type;
+  if (status) out.status = status;
+  if (modification) out.modification = modification;
+  if (origin) out.origin = origin;
+  return Object.keys(out).length ? out : undefined;
+}
+
+export function sourcesFromJsonLd(raw: unknown): NonVerbalSource[] {
+  if (!Array.isArray(raw)) return [];
+  const out: NonVerbalSource[] = [];
+  for (const entry of raw) {
+    if (!entry || typeof entry !== 'object') continue;
+    const s = sourceFromJsonLd(entry as Record<string, unknown>);
+    if (s) out.push(s);
+  }
+  return out;
+}

package/src/adapters/non-verbal/table-bridge.ts

@@ -0,0 +1,98 @@
+/**
+ * Table bridge — JSON-LD → Table (TS model).
+ *
+ * Wire format:
+ *
+ *   {
+ *     "@type": "gl:Table",
+ *     "gl:id": "{id}",
+ *     "gl:identifier": "Table 2",
+ *     "gl:caption": { ... },
+ *     "gl:description": { ... },
+ *     "gl:content": {
+ *       "gl:type": "structured" | "markup",
+ *       "gl:headers": [ { "eng": "..." }, ... ],   // structured
+ *       "gl:rows": [ [ { "eng": "..." }, ... ], ... ],   // structured
+ *       "gl:markup": { "eng": "<table>...</table>" }   // markup
+ *     },
+ *     "gl:format": "html" | "markdown" | "asciidoc",
+ *     "gl:source": [ ... ]
+ *   }
+ */
+
+import type { Table, TableContent, TableFormat } from './types';
+import { isType, pickField, localized } from './prefix';
+import { sourcesFromJsonLd } from './source-bridge';
+
+const FORMAT_SET: ReadonlySet<string> = new Set(['html', 'markdown', 'asciidoc']);
+
+function isLocalizedObj(v: unknown): v is Record<string, string> {
+  if (!v || typeof v !== 'object' || Array.isArray(v)) return false;
+  return Object.values(v).every(x => typeof x === 'string');
+}
+
+function contentFromJsonLd(raw: unknown): TableContent | null {
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return null;
+  const c = raw as Record<string, unknown>;
+  const typeRaw = (pickField<string>(c, 'type') ?? '').toLowerCase();
+
+  if (typeRaw === 'markup') {
+    const markup = localized(c, 'markup');
+    if (!markup) return null;
+    return { kind: 'markup', markup };
+  }
+
+  if (typeRaw === 'structured' || !typeRaw) {
+    const headersRaw = pickField<unknown[]>(c, 'headers');
+    const rowsRaw = pickField<unknown[]>(c, 'rows');
+    if (!Array.isArray(headersRaw) || !Array.isArray(rowsRaw)) return null;
+
+    const headers: Record<string, string>[] = [];
+    for (const h of headersRaw) {
+      if (isLocalizedObj(h)) headers.push(h);
+    }
+    if (headers.length === 0) return null;
+
+    const rows: Record<string, string>[][] = [];
+    for (const r of rowsRaw) {
+      if (!Array.isArray(r)) continue;
+      const cells: Record<string, string>[] = [];
+      for (const cell of r) {
+        if (isLocalizedObj(cell)) cells.push(cell);
+      }
+      if (cells.length) rows.push(cells);
+    }
+    if (rows.length === 0) return null;
+
+    return { kind: 'structured', headers, rows };
+  }
+
+  return null;
+}
+
+export function tableFromJsonLd(doc: Record<string, unknown>): Table | null {
+  if (!isType(doc, 'Table')) return null;
+
+  const id = pickField<string>(doc, 'id') ?? '';
+  if (!id) return null;
+
+  const identifier = pickField<string>(doc, 'identifier');
+  const caption = localized(doc, 'caption');
+  const description = localized(doc, 'description');
+  const content = contentFromJsonLd(pickField(doc, 'content'));
+  if (!content) return null;
+
+  const formatRaw = (pickField<string>(doc, 'format') ?? '').toLowerCase();
+  const format = FORMAT_SET.has(formatRaw) ? (formatRaw as TableFormat) : undefined;
+
+  const sources = sourcesFromJsonLd(pickField(doc, 'source'));
+
+  const t: Table = { kind: 'table', id, content };
+  if (identifier) t.identifier = identifier;
+  if (caption) t.caption = caption;
+  if (description) t.description = description;
+  if (format) t.format = format;
+  if (sources.length) t.sources = sources;
+
+  return t;
+}

package/src/adapters/non-verbal/types.ts

@@ -0,0 +1,133 @@
+/**
+ * Non-verbal entity model — TypeScript projection of the authoritative
+ * glossarist-ruby model.
+ *
+ * The authoritative model lives in glossarist-ruby (Figure, Table, Formula
+ * inherit from NonVerbalEntity). This file mirrors that model in TypeScript
+ * for the consumer side. It does not redefine the model — every field here
+ * corresponds to a field in the authoritative source.
+ *
+ * See:
+ *   ../glossarist-ruby/lib/glossarist/non_verbal_entity.rb
+ *   ../glossarist-ruby/lib/glossarist/figure.rb
+ *   ../glossarist-ruby/lib/glossarist/table.rb
+ *   ../glossarist-ruby/lib/glossarist/formula.rb
+ *   ../glossarist-ruby/lib/glossarist/figure_image.rb
+ */
+
+export type LocalizedString = Record<string, string>;
+
+export type NonVerbalKind = 'figure' | 'table' | 'formula';
+
+export type FigureImageFormat = 'svg' | 'png' | 'jpg' | 'jpeg' | 'gif' | 'webp' | 'avif';
+
+export type FigureImageRole = 'vector' | 'raster' | 'dark' | 'light' | 'print';
+
+export interface FigureImage {
+  src: string;
+  format: FigureImageFormat;
+  role?: FigureImageRole;
+  width?: number;
+  height?: number;
+  scale?: number;
+}
+
+export interface NonVerbalSourceRef {
+  source?: string;
+  id?: string;
+  version?: string;
+  text?: string;
+}
+
+export interface NonVerbalSourceLocality {
+  type?: string;
+  referenceFrom?: string;
+  referenceTo?: string;
+}
+
+export interface NonVerbalSourceOrigin {
+  ref?: NonVerbalSourceRef;
+  locality?: NonVerbalSourceLocality;
+  link?: string;
+  id?: string;
+  version?: string;
+  source?: string;
+}
+
+export interface NonVerbalSource {
+  id?: string;
+  type?: string;
+  status?: string;
+  modification?: string;
+  origin?: NonVerbalSourceOrigin;
+}
+
+export interface NonVerbalEntityBase {
+  id: string;
+  identifier?: string;
+  caption?: LocalizedString;
+  description?: LocalizedString;
+  alt?: LocalizedString;
+  sources?: NonVerbalSource[];
+}
+
+export interface Figure extends NonVerbalEntityBase {
+  kind: 'figure';
+  images: FigureImage[];
+  subfigures?: Figure[];
+}
+
+export type TableFormat = 'html' | 'markdown' | 'asciidoc';
+
+export type TableContent =
+  | { kind: 'structured'; headers: LocalizedString[]; rows: LocalizedString[][] }
+  | { kind: 'markup'; markup: LocalizedString };
+
+export interface Table extends NonVerbalEntityBase {
+  kind: 'table';
+  content: TableContent;
+  format?: TableFormat;
+}
+
+export type FormulaNotation = 'latex' | 'mathml' | 'asciimath';
+
+export interface Formula extends NonVerbalEntityBase {
+  kind: 'formula';
+  expression: LocalizedString;
+  notation: FormulaNotation;
+}
+
+export type NonVerbalEntity = Figure | Table | Formula;
+
+/**
+ * V3 NonVerbRep runtime shape.
+ *
+ * glossarist-js's runtime `NonVerbRep` (post-V3 reshape) holds the same
+ * localized fields as `NonVerbalEntityBase` plus a `type` discriminator
+ * and an `images[]` array. The published `.d.ts` still describes the
+ * pre-V3 `ref`/`text` shape; this local interface lets consumer code
+ * type-check against reality. Remove when upstream ships a corrected
+ * `.d.ts` (TODO.figures/19).
+ */
+export interface NonVerbRepV3 extends NonVerbalEntityBase {
+  type: string | null;
+  images: FigureImage[];
+}
+
+export interface NonVerbalReference {
+  kind: NonVerbalKind;
+  entityId: string;
+  display?: string;
+}
+
+export function isFigure(entity: NonVerbalEntity): entity is Figure {
+  return entity.kind === 'figure';
+}
+
+export function isTable(entity: NonVerbalEntity): entity is Table {
+  return entity.kind === 'table';
+}
+
+export function isFormula(entity: NonVerbalEntity): entity is Formula {
+  return entity.kind === 'formula';
+}

package/src/adapters/non-verbal-resolver.ts

@@ -0,0 +1,101 @@
+/**
+ * NonVerbalEntityResolver — the single runtime access point for non-verbal
+ * entities.
+ *
+ * Responsibilities:
+ *   - Fetch entity JSON-LD from `public/data/{ds}/{kind-dir}/{id}.json`.
+ *   - Bridge to the TS model via `KIND_TO_BRIDGE`.
+ *   - Cache per `(kind, datasetId, id)` with Promise dedup for concurrent
+ *     callers.
+ *   - Compute image URLs (basePath-aware for GitHub Pages).
+ *   - Compute stable anchor IDs via the anchor SSOT.
+ *
+ * Components and the content-renderer go through this resolver; they never
+ * call `fetch()` directly. The resolver is owned by `AdapterFactory` —
+ * exactly one instance per app.
+ */
+
+import type { NonVerbalEntity, NonVerbalKind } from './non-verbal/types';
+import { KIND_TO_DIR, KIND_TO_BRIDGE } from './non-verbal/kind';
+import { anchorId } from '../utils/non-verbal-anchor';
+
+export type { NonVerbalEntity, NonVerbalKind } from './non-verbal/types';
+
+export interface NonVerbalEntityResolverOptions {
+  basePath?: string;
+  fetcher?: (url: string) => Promise<Response>;
+}
+
+interface CacheEntry {
+  promise: Promise<NonVerbalEntity | null>;
+  resolved: NonVerbalEntity | null | undefined;
+}
+
+export class NonVerbalEntityResolver {
+  private readonly cache = new Map<string, CacheEntry>();
+  private readonly basePath: string;
+  private readonly fetcher: (url: string) => Promise<Response>;
+
+  constructor(opts: NonVerbalEntityResolverOptions = {}) {
+    this.basePath = opts.basePath ?? import.meta.env.BASE_URL ?? '/';
+    this.fetcher = opts.fetcher ?? ((url: string) => fetch(url));
+  }
+
+  resolve(kind: NonVerbalKind, datasetId: string, entityId: string): Promise<NonVerbalEntity | null> {
+    const key = `${kind}|${datasetId}|${entityId}`;
+    const existing = this.cache.get(key);
+    if (existing) return existing.promise;
+
+    const promise = (async () => {
+      const dir = KIND_TO_DIR[kind];
+      const url = `${this.basePath}data/${datasetId}/${dir}/${entityId}.json`;
+      const resp = await this.fetcher(url);
+      if (resp.status === 404) return null;
+      if (!resp.ok) {
+        throw new Error(`Failed to load ${kind} ${entityId} from ${datasetId}: ${resp.status}`);
+      }
+      const doc = (await resp.json()) as Record<string, unknown>;
+      const entity = KIND_TO_BRIDGE[kind](doc);
+      return entity;
+    })();
+
+    const entry: CacheEntry = { promise, resolved: undefined };
+    promise.then(
+      v => { entry.resolved = v; return v; },
+      () => { this.cache.delete(key); return null; },
+    );
+    this.cache.set(key, entry);
+    return promise;
+  }
+
+  /**
+   * Synchronous peek at the cache. Returns the entity if the previous
+   * `resolve` already completed, otherwise `undefined`. Useful for SSR or
+   * pre-hydration checks where the cache is warm.
+   */
+  peek(kind: NonVerbalKind, datasetId: string, entityId: string): NonVerbalEntity | null | undefined {
+    return this.cache.get(`${kind}|${datasetId}|${entityId}`)?.resolved;
+  }
+
+  resolveImageUrl(datasetId: string, src: string): string {
+    const cleanSrc = src.startsWith('images/') ? src.slice('images/'.length) : src;
+    return `${this.basePath}data/${datasetId}/images/${cleanSrc}`;
+  }
+
+  anchor(kind: NonVerbalKind, datasetId: string, entityId: string): string {
+    return anchorId(kind, datasetId, entityId);
+  }
+
+  /**
+   * Drop the cached entry for one entity. Locale switching does NOT need
+   * this — the cached entity is the raw JSON-LD, and localization happens
+   * at render time via the locale SSOT.
+   */
+  invalidate(kind: NonVerbalKind, datasetId: string, entityId: string): void {
+    this.cache.delete(`${kind}|${datasetId}|${entityId}`);
+  }
+
+  clear(): void {
+    this.cache.clear();
+  }
+}

package/src/components/ConceptDetail.vue

@@ -16,6 +16,8 @@ import { getFactory } from '../adapters/factory';
 import { useRenderOptions } from '../composables/use-render-options';
 import { useConceptEdges } from '../composables/use-concept-edges';
 import { useConceptContent } from '../composables/use-concept-content';
+import { useConceptEntities } from '../composables/use-concept-entities';
+import { useNonVerbalCrossRef } from '../composables/use-non-verbal-cross-ref';
 import { relationshipLabel, INVERSE_RELATIONSHIPS } from '../utils/relationship-categories';
 import { slugify } from '../utils/slugify';
 import { useSiteConfig } from '../config/use-site-config';
@@ -23,6 +25,7 @@ import ConceptTimeline from './ConceptTimeline.vue';
 import ConceptRdfView from './ConceptRdfView.vue';
 import FormatDownloads from './FormatDownloads.vue';
 import NonVerbalRepDisplay from './NonVerbalRepDisplay.vue';
+import NonVerbalList from './non-verbal/NonVerbalList.vue';
 import CitationDisplay from './CitationDisplay.vue';
 import DesignationList from './DesignationList.vue';
 import { useI18n } from '../i18n';
@@ -103,7 +106,7 @@ const conceptSources = computed(() => props.concept.sources);
 const conceptTags = computed(() => props.concept.tags ?? []);
 
 const factory = getFactory();
-const { ensureBibLoaded, bibResolver, figResolver } = useRenderOptions(() => props.registerId);
+const { ensureBibLoaded, bibResolver, nonVerbalRefResolver } = useRenderOptions(() => props.registerId);
 
 const renderOpts = computed<RenderOptions>(() => ({
   xrefResolver: (uri, term) => {
@@ -125,11 +128,18 @@ const renderOpts = computed<RenderOptions>(() => ({
     return `<a href="#" class="xref-link" data-register="${escapeAttr(props.registerId)}" data-concept="${escapeAttr(resolvedId)}">${escapeAttr(term)}</a>`;
   },
   bibResolver,
-  figResolver,
+  nonVerbalRefResolver,
 }));
 
 watch(() => props.registerId, () => { ensureBibLoaded(); }, { immediate: true });
 
+const structuralEntityRefs = useConceptEntities(
+  computed(() => props.concept),
+  computed(() => props.registerId),
+);
+
+useNonVerbalCrossRef();
+
 function handleContentClick(e: MouseEvent) {
   const target = (e.target as HTMLElement).closest('.xref-link') as HTMLElement | null;
   if (!target) return;
@@ -416,7 +426,7 @@ const nonVerbalReps = computed(() => {
               </div>
 
               <!-- Non-verbal representations -->
-              <NonVerbalRepDisplay v-if="lc.lc.nonVerbalRep?.length" :reps="lc.lc.nonVerbalRep" />
+              <NonVerbalRepDisplay v-if="lc.lc.nonVerbalRep?.length" :reps="lc.lc.nonVerbalRep" :locale="lc.lang" :register-id="registerId" :dataset-locales="languages" />
 
               <!-- Sources -->
               <div v-if="lc.sources.length" class="space-y-2">
@@ -467,7 +477,10 @@ const nonVerbalReps = computed(() => {
           </div>
 
           <!-- Non-verbal reps (concept-level) -->
-          <NonVerbalRepDisplay v-if="nonVerbalReps.length" :reps="nonVerbalReps" />
+          <NonVerbalRepDisplay v-if="nonVerbalReps.length" :reps="nonVerbalReps" :locale="languages[0] ?? 'eng'" :register-id="registerId" :dataset-locales="languages" />
+
+          <!-- Structural entity refs (concept-level figures/tables/formulas) -->
+          <NonVerbalList v-if="structuralEntityRefs.length" :refs="structuralEntityRefs" />
         </div>
 
         <!-- Right sidebar -->

package/src/components/LanguageDetail.vue

@@ -63,9 +63,6 @@ const renderOpts: RenderOptions = {
   bibResolver: (refId, title) => {
     return `<span class="bib-ref">${escapeAttr(title)}</span>`;
   },
-  figResolver: (figId) => {
-    return `<span class="fig-ref">${escapeAttr(figId)}</span>`;
-  },
 };
 
 function handleContentClick(e: MouseEvent) {

package/src/components/NonVerbalRepDisplay.vue

@@ -1,38 +1,96 @@
 <script setup lang="ts">
-import type { NonVerbRep, ConceptSource } from 'glossarist';
-import { sourceStatusInfo, sourceTypeInfo } from '../utils/designation-registry';
+import { computed } from 'vue';
+import type { NonVerbRep, Citation } from 'glossarist';
+import type { FigureImage, LocalizedString, NonVerbRepV3, NonVerbalSource } from '../adapters/non-verbal/types';
+import { resolveFallbackChain } from '../utils/locale';
+import FigureImages from './figure/FigureImages.vue';
+import NonVerbalCaption from './non-verbal/NonVerbalCaption.vue';
+import CitationDisplay from './CitationDisplay.vue';
 
-defineProps<{
+const props = defineProps<{
   reps: NonVerbRep[];
+  locale: string;
+  registerId: string;
+  datasetLocales?: readonly string[];
 }>();
+
+const fallbackChain = computed(() => resolveFallbackChain(props.datasetLocales));
+
+// Cast once at the boundary: glossarist-js's published `.d.ts` still
+// describes pre-V3 NonVerbRep, but the runtime exposes the V3 shape
+// (images/alt/caption/description/sources). See TODO.figures/19.
+const v3Reps = computed<NonVerbRepV3[]>(() => props.reps as unknown as NonVerbRepV3[]);
+
+function imagesOf(rep: NonVerbRepV3): FigureImage[] {
+  return rep.images ?? [];
+}
+
+function hasImages(rep: NonVerbRepV3): boolean {
+  return imagesOf(rep).length > 0;
+}
+
+function asCitation(origin: NonVerbalSource['origin']): Citation | null {
+  return (origin as unknown as Citation) ?? null;
+}
 </script>
 
 <template>
-  <div v-if="reps.length" class="space-y-3">
+  <div v-if="v3Reps.length" class="space-y-3">
     <div class="section-label">Non-verbal representations</div>
-    <div v-for="(rep, i) in reps" :key="i" class="card p-4 space-y-2">
-      <div class="flex items-center gap-2">
-        <span class="badge text-[10px] bg-violet-50 text-violet-700">{{ rep.type ?? 'representation' }}</span>
-        <span v-if="rep.text" class="text-sm text-ink-700">{{ rep.text }}</span>
-      </div>
+    <figure v-for="(rep, i) in v3Reps" :key="i" class="card p-4 space-y-2">
+      <span class="badge text-[10px] bg-violet-50 text-violet-700">{{ rep.type ?? 'representation' }}</span>
 
-      <!-- Image -->
-      <div v-if="rep.type === 'image' && rep.ref">
-        <img :src="rep.ref" :alt="rep.text || 'Non-verbal representation'" class="max-h-64 rounded border border-ink-100" loading="lazy" />
-      </div>
+      <FigureImages
+        v-if="hasImages(rep)"
+        :images="imagesOf(rep)"
+        :alt="(rep.alt as LocalizedString | undefined) ?? undefined"
+        :dataset-id="registerId"
+        :locale="locale"
+        :fallback-chain="fallbackChain"
+        :has-description="!!rep.description && Object.keys(rep.description).length > 0"
+        :entity-label="rep.type ?? 'representation'"
+      />
 
-      <!-- Table / Formula reference -->
-      <div v-if="(rep.type === 'table' || rep.type === 'formula') && rep.ref">
-        <a :href="rep.ref" target="_blank" rel="noopener" class="text-sm concept-link break-all">{{ rep.ref }}</a>
-      </div>
+      <NonVerbalCaption
+        :caption="(rep.caption as LocalizedString | undefined) ?? undefined"
+        :description="(rep.description as LocalizedString | undefined) ?? undefined"
+        :locale="locale"
+        :fallback-chain="fallbackChain"
+      />
 
-      <!-- Sources for this representation -->
-      <div v-if="rep.sources?.length" class="flex flex-wrap gap-1.5">
-        <div v-for="(src, si) in rep.sources" :key="si" class="text-xs text-ink-400">
-          <span v-if="src.type" class="badge text-[9px]" :class="sourceTypeInfo(src.type).color">{{ sourceTypeInfo(src.type).label }}</span>
-          <span v-if="src.origin?.ref" class="ml-1">{{ src.origin.ref.source }}{{ src.origin.ref.id ? ' ' + src.origin.ref.id : '' }}</span>
-        </div>
+      <div v-if="rep.sources?.length" class="nv-rep__sources">
+        <div class="nv-rep__sources-label">Sources</div>
+        <ol class="nv-rep__sources-list">
+          <li v-for="(src, si) in rep.sources" :key="si" class="nv-rep__source">
+            <CitationDisplay v-if="asCitation(src.origin)" :citation="asCitation(src.origin)!" :register-id="registerId" />
+            <span v-if="src.modification" class="nv-rep__source-modification">— {{ src.modification }}</span>
+          </li>
+        </ol>
       </div>
-    </div>
+    </figure>
   </div>
 </template>
+
+<style scoped>
+.nv-rep__sources {
+  font-size: 0.75rem;
+  color: var(--ink-500, #666);
+  margin-top: 0.5rem;
+}
+.nv-rep__sources-label {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 0.25rem;
+}
+.nv-rep__sources-list {
+  list-style: decimal inside;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.nv-rep__source-modification {
+  color: var(--ink-400, #888);
+  font-style: italic;
+}
+</style>