@glossarist/concept-browser 0.3.4 → 0.4.0

package/src/adapters/model-bridge.ts

@@ -0,0 +1,277 @@
+/**
+ * Model bridge: converts between wire-format JSON and glossarist-js model instances.
+ *
+ * Supports two input formats:
+ * 1. JSON-LD (gl:-prefixed) — legacy format from current generate-data.mjs
+ * 2. Glossarist native — snake_case format from glossarist-js Concept.toJSON()
+ *
+ * All downstream code works exclusively with Concept instances.
+ */
+import {
+  Concept,
+  LocalizedConcept,
+  Designation,
+  Expression,
+  Abbreviation,
+  Symbol as SymbolDesignation,
+  GraphicalSymbol,
+  Citation,
+  ConceptSource,
+  RelatedConcept,
+  ConceptDate,
+  DetailedDefinition,
+  NonVerbRep,
+  RELATIONSHIP_TYPES,
+  DATE_TYPES,
+} from 'glossarist';
+import {
+  LetterSymbol,
+  GrammarInfo,
+  Pronunciation,
+  ConceptReference,
+  Locality,
+  GRAMMAR_GENDERS,
+  GRAMMAR_NUMBERS,
+  GRAMMAR_PARTS_OF_SPEECH,
+} from 'glossarist/models';
+import type { ConceptSummary } from './types';
+
+// ── Detection ─────────────────────────────────────────────────────────────
+
+function isJsonLd(doc: Record<string, unknown>): boolean {
+  return '@type' in doc && 'gl:localizedConcept' in doc;
+}
+
+// ── JSON-LD → Glossarist native mapping ───────────────────────────────────
+
+function mapDesignationFromJsonLd(d: any): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  const rawType = (d['@type'] as string) || '';
+
+  // Map type
+  if (rawType.includes('Abbreviation')) result.type = 'abbreviation';
+  else if (rawType.includes('LetterSymbol')) result.type = 'letter_symbol';
+  else if (rawType.includes('GraphicalSymbol')) result.type = 'graphical_symbol';
+  else if (rawType.includes('Symbol')) result.type = 'symbol';
+  else result.type = 'expression';
+
+  result.designation = d['gl:term'] ?? '';
+  result.normative_status = d['gl:normativeStatus'] ?? null;
+
+  if (d['gl:absent'] != null) result.absent = d['gl:absent'];
+  if (d['gl:fieldOfApplication']) result.field_of_application = d['gl:fieldOfApplication'];
+  if (d['gl:usageInfo']) result.usage_info = d['gl:usageInfo'];
+  if (d['gl:geographicalArea']) result.geographical_area = d['gl:geographicalArea'];
+  if (d['gl:language']) result.language = d['gl:language'];
+  if (d['gl:script']) result.script = d['gl:script'];
+  if (d['gl:system']) result.system = d['gl:system'];
+  if (d['gl:international'] != null) result.international = d['gl:international'];
+  if (d['gl:termType']) result.term_type = d['gl:termType'];
+
+  if (d['gl:pronunciation']?.length) {
+    result.pronunciation = d['gl:pronunciation'].map((p: any) => ({
+      content: p['gl:content'] ?? null,
+      language: p['gl:language'] ?? null,
+      script: p['gl:script'] ?? null,
+      system: p['gl:system'] ?? null,
+      country: p['gl:country'] ?? null,
+    }));
+  }
+
+  if (d['gl:source']?.length) {
+    result.sources = d['gl:source'].map(mapSourceFromJsonLd);
+  }
+
+  if (d['gl:related']?.length) {
+    result.related = d['gl:related'].map(mapRelatedFromJsonLd);
+  }
+
+  // Expression-specific
+  if (d['gl:prefix'] != null) result.prefix = d['gl:prefix'];
+  if (d['gl:gender']) {
+    result.grammar_info = [{ gender: d['gl:gender'] }];
+  }
+  if (d['gl:grammarInfo']?.length) {
+    result.grammar_info = d['gl:grammarInfo'].map((gi: any) => ({
+      gender: gi['gl:gender'] ?? null,
+      number: gi['gl:number'] ?? null,
+      part_of_speech: gi['gl:partOfSpeech'] ?? null,
+      noun: gi['gl:noun'] ?? false,
+      verb: gi['gl:verb'] ?? false,
+      adj: gi['gl:adj'] ?? false,
+      adverb: gi['gl:adverb'] ?? false,
+      preposition: gi['gl:preposition'] ?? false,
+      participle: gi['gl:participle'] ?? false,
+    }));
+  }
+
+  return result;
+}
+
+function mapSourceFromJsonLd(s: any): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  if (s['gl:sourceType']) result.type = s['gl:sourceType'];
+  if (s['gl:sourceStatus']) result.status = s['gl:sourceStatus'];
+  if (s['gl:modification']) result.modification = s['gl:modification'];
+
+  if (s['gl:origin']) {
+    const origin: Record<string, unknown> = {};
+    const o = s['gl:origin'];
+    if (o['gl:ref']) {
+      const rawRef = o['gl:ref'];
+      const refObj: Record<string, unknown> = {};
+      // v3: ref is always an object { gl:source, gl:id, gl:version }
+      if (rawRef['gl:source']) refObj.source = rawRef['gl:source'];
+      if (rawRef['gl:id']) refObj.id = rawRef['gl:id'];
+      if (rawRef['gl:version']) refObj.version = rawRef['gl:version'];
+      if (rawRef['source']) refObj.source = rawRef['source'];
+      if (rawRef['id']) refObj.id = rawRef['id'];
+      if (rawRef['version']) refObj.version = rawRef['version'];
+      if (Object.keys(refObj).length > 0) origin.ref = refObj;
+    }
+    if (o['gl:locality']) {
+      const loc: Record<string, unknown> = {};
+      const rawLoc = o['gl:locality'];
+      if (rawLoc['gl:localityType']) loc.type = rawLoc['gl:localityType'];
+      if (rawLoc['gl:referenceFrom']) loc.reference_from = rawLoc['gl:referenceFrom'];
+      if (rawLoc['gl:referenceTo']) loc.reference_to = rawLoc['gl:referenceTo'];
+      if (rawLoc['type']) loc.type = rawLoc['type'];
+      if (rawLoc['reference_from']) loc.reference_from = rawLoc['reference_from'];
+      if (rawLoc['reference_to']) loc.reference_to = rawLoc['reference_to'];
+      origin.locality = loc;
+    }
+    if (o['gl:link']) origin.link = o['gl:link'];
+    if (o['gl:id']) origin.id = o['gl:id'];
+    if (o['gl:version']) origin.version = o['gl:version'];
+    if (o['gl:source']) origin.source = o['gl:source'];
+    result.origin = origin;
+  }
+
+  return result;
+}
+
+function mapRelatedFromJsonLd(r: any): Record<string, unknown> {
+  const result: Record<string, unknown> = { type: 'references' };
+  if (r['@id']) {
+    // Extract concept ID from URI: ".../concept/3.1.1.6" → source=register, id=3.1.1.6
+    const uri = r['@id'] as string;
+    const idMatch = uri.match(/\/concept\/([^/]+)$/);
+    result.ref = idMatch
+      ? { source: uri.split('/').slice(-3, -2)[0] || '', id: idMatch[1] }
+      : { source: uri, id: null };
+  }
+  if (r['gl:term']) result.content = r['gl:term'];
+  return result;
+}
+
+function mapLocalizedFromJsonLd(lc: any): Record<string, unknown> {
+  const data: Record<string, unknown> = {};
+
+  if (lc['gl:languageCode']) data.language_code = lc['gl:languageCode'];
+  if (lc['gl:entryStatus']) data.entry_status = lc['gl:entryStatus'];
+  if (lc['gl:classification']) data.classification = lc['gl:classification'];
+  if (lc['gl:reviewType']) data.review_type = lc['gl:reviewType'];
+  if (lc['gl:domain']) data.domain = lc['gl:domain'];
+  if (lc['gl:release']) data.release = lc['gl:release'];
+  if (lc['gl:lineageSourceSimilarity'] != null) data.lineage_source_similarity = lc['gl:lineageSourceSimilarity'];
+  if (lc['gl:script']) data.script = lc['gl:script'];
+  if (lc['gl:system']) data.system = lc['gl:system'];
+
+  if (lc['gl:designation']?.length) {
+    data.terms = lc['gl:designation'].map(mapDesignationFromJsonLd);
+  }
+
+  if (lc['gl:definition']?.length) {
+    data.definition = lc['gl:definition'].map((d: any) => {
+      const def: Record<string, unknown> = { content: d['gl:content'] ?? '' };
+      return def;
+    });
+  }
+
+  if (lc['gl:notes']?.length) {
+    data.notes = lc['gl:notes'].map((n: any) => ({ content: n['gl:content'] ?? '' }));
+  }
+
+  if (lc['gl:examples']?.length) {
+    data.examples = lc['gl:examples'].map((e: any) => ({ content: e['gl:content'] ?? '' }));
+  }
+
+  if (lc['gl:source']?.length) {
+    data.sources = lc['gl:source'].map(mapSourceFromJsonLd);
+  }
+
+  if (lc['gl:dates']?.length) {
+    data.dates = lc['gl:dates'].map((d: any) => ({
+      date: d['gl:date'] ?? null,
+      type: d['gl:dateType'] ?? null,
+    }));
+  }
+
+  if (lc['gl:references']?.length) {
+    data.related = lc['gl:references'].map(mapRelatedFromJsonLd);
+  }
+
+  // Review metadata — passed through to LocalizedConcept constructor
+  if (lc['gl:reviewDate']) data.review_date = lc['gl:reviewDate'];
+  if (lc['gl:reviewDecisionDate']) data.review_decision_date = lc['gl:reviewDecisionDate'];
+  if (lc['gl:reviewDecisionEvent']) data.review_decision_event = lc['gl:reviewDecisionEvent'];
+  if (lc['gl:reviewStatus']) data.review_status = lc['gl:reviewStatus'];
+  if (lc['gl:reviewDecision']) data.review_decision = lc['gl:reviewDecision'];
+  if (lc['gl:reviewDecisionNotes']) data.review_decision_notes = lc['gl:reviewDecisionNotes'];
+
+  return data;
+}
+
+function conceptFromJsonLd(doc: Record<string, any>): Concept {
+  const id = String(doc['gl:identifier'] ?? doc['@id']?.split('/').pop() ?? '');
+  const localizations: Record<string, any> = {};
+
+  const rawLc = doc['gl:localizedConcept'] ?? {};
+  for (const [lang, lc] of Object.entries(rawLc)) {
+    if (lc && typeof lc === 'object') {
+      localizations[lang] = mapLocalizedFromJsonLd(lc);
+    }
+  }
+
+  const related = (doc['gl:references'] ?? []).map(mapRelatedFromJsonLd);
+
+  return Concept.fromJSON({
+    id,
+    term: doc['gl:term'] ?? null,
+    uri: doc['@id'] ?? null,
+    localizations,
+    related,
+    status: null,
+  });
+}
+
+// ── Public API ────────────────────────────────────────────────────────────
+
+export function conceptFromJson(doc: Record<string, any>): Concept {
+  if (isJsonLd(doc)) {
+    return conceptFromJsonLd(doc);
+  }
+  // glossarist native format — use fromJSON directly
+  return Concept.fromJSON(doc as Record<string, unknown>);
+}
+
+export function conceptToSummary(concept: Concept): ConceptSummary {
+  const designations: Record<string, string> = {};
+  for (const lang of concept.languages) {
+    const lc = concept.localization(lang);
+    if (lc?.primaryDesignation) {
+      designations[lang] = lc.primaryDesignation;
+    }
+  }
+  return {
+    id: concept.id,
+    designations,
+    eng: designations.eng || Object.values(designations)[0] || '',
+    status: concept.status ?? 'valid',
+  };
+}
+
+export function conceptUri(concept: Concept, registerId: string, uriBase: string): string {
+  if (concept.uri) return concept.uri;
+  return `${uriBase}/${registerId}/concept/${concept.id}`;
+}

package/src/adapters/ontology-registry.ts

@@ -0,0 +1,75 @@
+/**
+ * Ontology Registry — taxonomy-driven labels and definitions for the browser.
+ *
+ * All enumeration labels, definitions, and colors come from the SKOS taxonomy
+ * data extracted at build time from concept-model/ontologies/taxonomies/*.ttl.
+ * The browser never hardcodes taxonomy values — it looks them up here.
+ */
+import taxonomyData from '../data/taxonomies.json';
+
+export interface TaxonomyConcept {
+  id: string;
+  iri: string;
+  prefLabel: string;
+  altLabel?: string;
+  definition?: string;
+  broader?: string;
+}
+
+export interface Taxonomy {
+  scheme: string;
+  schemeLabel: string | null;
+  schemeDefinition: string | null;
+  concepts: Record<string, TaxonomyConcept>;
+}
+
+type TaxonomyKey = keyof typeof taxonomyData;
+
+class OntologyRegistry {
+  private data: Record<string, Taxonomy>;
+
+  constructor() {
+    this.data = taxonomyData as unknown as Record<string, Taxonomy>;
+  }
+
+  getConcept(taxonomy: TaxonomyKey, id: string): TaxonomyConcept | null {
+    return this.data[taxonomy]?.concepts[id] ?? null;
+  }
+
+  getLabel(taxonomy: TaxonomyKey, id: string | null | undefined): string {
+    if (!id) return '';
+    return this.getConcept(taxonomy, id)?.prefLabel ?? id;
+  }
+
+  getAltLabel(taxonomy: TaxonomyKey, id: string): string | null {
+    return this.getConcept(taxonomy, id)?.altLabel ?? null;
+  }
+
+  getDefinition(taxonomy: TaxonomyKey, id: string): string | null {
+    return this.getConcept(taxonomy, id)?.definition ?? null;
+  }
+
+  getAll(taxonomy: TaxonomyKey): TaxonomyConcept[] {
+    return Object.values(this.data[taxonomy]?.concepts ?? {});
+  }
+
+  getScheme(taxonomy: TaxonomyKey): string {
+    return this.data[taxonomy]?.scheme ?? '';
+  }
+
+  has(taxonomy: TaxonomyKey, id: string): boolean {
+    return id in (this.data[taxonomy]?.concepts ?? {});
+  }
+
+  /** Get broader concept ID, if any (for hierarchical taxonomies like designation-type). */
+  getBroader(taxonomy: TaxonomyKey, id: string): string | null {
+    return this.getConcept(taxonomy, id)?.broader ?? null;
+  }
+
+  /** Get all child concept IDs of a given concept. */
+  getNarrower(taxonomy: TaxonomyKey, id: string): TaxonomyConcept[] {
+    return this.getAll(taxonomy).filter(c => c.broader === id);
+  }
+}
+
+export const ontology = new OntologyRegistry();

package/src/adapters/ontology-schema.ts

@@ -0,0 +1,100 @@
+/**
+ * Ontology schema loader — provides class/property definitions parsed from
+ * the Glossarist OWL ontology for the Ontospy-style concept view.
+ */
+import schemaData from '../data/ontology-schema.json';
+
+export interface OwlClass {
+  iri: string;
+  compact: string;
+  label: string;
+  comment: string | null;
+  subClassOf: string | null;
+  disjointWith: string | null;
+  children: string[];
+  ancestors: string[];
+}
+
+export interface OwlProperty {
+  iri: string;
+  compact: string;
+  label: string;
+  comment: string | null;
+  type: 'object' | 'datatype';
+  domain: string | null;
+  domainUnion: string[] | null;
+  range: string | null;
+  rangeUnion: string[] | null;
+  inverseOf: string | null;
+}
+
+interface OntologySchema {
+  ontologyIri: string;
+  ontologyLabel: string;
+  classes: Record<string, OwlClass>;
+  classHierarchyRoots: string[];
+  properties: Record<string, OwlProperty>;
+  propertiesByDomain: Record<string, { object: string[]; datatype: string[] }>;
+  stats: { classCount: number; objectPropertyCount: number; datatypePropertyCount: number };
+}
+
+const data = schemaData as unknown as OntologySchema;
+
+export function getClass(id: string): OwlClass | null {
+  return data.classes[id] ?? null;
+}
+
+export function getProperty(id: string): OwlProperty | null {
+  return data.properties[id] ?? null;
+}
+
+export function getPropertiesForDomain(domain: string): { object: OwlProperty[]; datatype: OwlProperty[] } {
+  const group = data.propertiesByDomain[domain];
+  if (!group) return { object: [], datatype: [] };
+  return {
+    object: group.object.map(id => data.properties[id]).filter(Boolean),
+    datatype: group.datatype.map(id => data.properties[id]).filter(Boolean),
+  };
+}
+
+/** Get all properties applicable to a class, including inherited ones. */
+export function getAllPropertiesForClass(classId: string): { object: OwlProperty[]; datatype: OwlProperty[] } {
+  const cls = data.classes[classId];
+  if (!cls) return { object: [], datatype: [] };
+
+  const classChain = [classId, ...cls.ancestors];
+  const objectProps: OwlProperty[] = [];
+  const datatypeProps: OwlProperty[] = [];
+  const seen = new Set<string>();
+
+  for (const c of classChain) {
+    const props = getPropertiesForDomain(c);
+    for (const p of props.object) {
+      if (!seen.has(p.compact)) { seen.add(p.compact); objectProps.push(p); }
+    }
+    for (const p of props.datatype) {
+      if (!seen.has(p.compact)) { seen.add(p.compact); datatypeProps.push(p); }
+    }
+  }
+
+  return { object: objectProps, datatype: datatypeProps };
+}
+
+/** Get the full class hierarchy tree starting from roots. */
+export function getClassTree(): OwlClass[] {
+  return data.classHierarchyRoots
+    .map(id => data.classes[id])
+    .filter(Boolean);
+}
+
+export function getAllClasses(): OwlClass[] {
+  return Object.values(data.classes);
+}
+
+export function getAllProperties(): OwlProperty[] {
+  return Object.values(data.properties);
+}
+
+export function getStats() {
+  return data.stats;
+}

package/src/adapters/types.ts

@@ -1,4 +1,38 @@
-/** Core types for the vocabulary browser data model. */
+/**
+ * Infrastructure types for the vocabulary browser.
+ * Concept model types come from glossarist-js via model-bridge.ts.
+ */
+import type { RELATIONSHIP_TYPES } from 'glossarist';
+
+// Re-export glossarist model types for convenience
+export type {
+  Concept,
+  LocalizedConcept,
+  Designation,
+  Expression,
+  Abbreviation,
+  Symbol as SymbolDesignation,
+  GraphicalSymbol,
+  Citation,
+  ConceptSource,
+  RelatedConcept,
+  ConceptDate,
+  DetailedDefinition,
+  NonVerbRep,
+} from 'glossarist';
+
+export type {
+  LetterSymbol,
+  GrammarInfo,
+  Pronunciation,
+  ConceptReference,
+  Locality,
+} from 'glossarist/models';
+
+export { RELATIONSHIP_TYPES, DATE_TYPES } from 'glossarist';
+export { GRAMMAR_GENDERS, GRAMMAR_NUMBERS, GRAMMAR_PARTS_OF_SPEECH } from 'glossarist/models';
+
+// ── Dataset metadata ──────────────────────────────────────────────────────
 
 export interface Manifest {
   id: string;
@@ -34,11 +68,12 @@ export interface ConceptIndex {
   conceptCount: number;
   chunkSize: number;
   chunks: { file: string; count: number }[];
-  concepts: ConceptSummary[];
+  concepts: (ConceptSummary | undefined)[];
 }
 
 export interface ConceptSummary {
   id: string;
+  designations: Record<string, string>;
   eng: string;
   status: string;
 }
@@ -50,83 +85,25 @@ export interface ConceptEntry {
   status: string;
 }
 
-export interface ConceptDocument {
-  '@context': string;
-  '@id': string;
-  '@type': string;
-  'gl:identifier': string;
-  'gl:localizedConcept': Record<string, LocalizedConcept>;
-}
-
-export interface LocalizedConcept {
-  '@id': string;
-  '@type': string;
-  'gl:languageCode': string;
-  'gl:entryStatus'?: string;
-  'gl:designation'?: Designation[];
-  'gl:definition'?: DetailedDefinition[];
-  'gl:notes'?: DetailedDefinition[];
-  'gl:examples'?: DetailedDefinition[];
-  'gl:source'?: ConceptSource[];
-  'gl:release'?: number;
-  'gl:reviewDate'?: string;
-  'gl:reviewDecisionDate'?: string;
-  'gl:reviewDecisionEvent'?: string;
-  'gl:reviewStatus'?: string;
-  'gl:reviewDecision'?: string;
-  'gl:reviewDecisionNotes'?: string;
-  'gl:dates'?: ConceptDate[];
-  'gl:references'?: CrossReference[];
-}
-
-export interface Designation {
-  '@type': string;
-  'gl:normativeStatus': string;
-  'gl:term': string;
-  'gl:gender'?: string;
-  'gl:plurality'?: string;
-  'gl:international'?: boolean;
-}
-
-export interface DetailedDefinition {
-  '@type': string;
-  'gl:content': string;
-}
-
-export interface ConceptSource {
-  '@type': string;
-  'gl:sourceType'?: string;
-  'gl:sourceStatus'?: string;
-  'gl:modification'?: string;
-  'gl:origin'?: {
-    '@type': string;
-    'gl:ref'?: string;
-    'gl:clause'?: string;
-    'gl:link'?: string;
-  };
-}
-
-export interface ConceptDate {
-  'gl:dateType': string;
-  'gl:date': string;
-}
-
-export interface CrossReference {
-  '@id': string;
-  'gl:term': string;
-}
-
 export interface DatasetRegistry {
   id: string;
   manifestUrl: string;
 }
 
+// ── Graph types ────────────────────────────────────────────────────────────
+
+export const EDGE_TYPE = {
+  REFERENCES: 'references',
+  DOMAIN: 'domain',
+} as const;
+
 export interface GraphEdge {
-  source: string; // concept URI
-  target: string; // concept URI
+  source: string;
+  target: string;
   type: string;
   label?: string;
   register: string;
+  lang?: string;
 }
 
 export interface GraphNode {
@@ -136,8 +113,11 @@ export interface GraphNode {
   designations: Record<string, string>;
   status: string;
   loaded: boolean;
+  nodeType?: 'concept' | 'domain';
 }
 
+// ── Search ─────────────────────────────────────────────────────────────────
+
 export interface SearchHit {
   conceptId: string;
   registerId: string;
@@ -147,14 +127,9 @@ export interface SearchHit {
   snippet?: string;
 }
 
-export type RelationType =
-  | 'related'
-  | 'narrower'
-  | 'broader'
-  | 'see'
-  | 'references'
-  | 'replaces'
-  | 'superseded';
+// ── Resolution ─────────────────────────────────────────────────────────────
+
+export type RelationType = typeof RELATIONSHIP_TYPES[number];
 
 export type Resolution =
   | { type: 'internal'; registerId: string; conceptId: string; crossDataset: boolean }

package/src/components/AppSidebar.vue

@@ -14,7 +14,7 @@ const route = useRoute();
 const { getColor } = useDsStyle();
 const { globalPages, datasetPages, config: siteConfig } = useSiteConfig();
 
-const currentDataset = computed(() => (route.params as any).registerId ?? '');
+const currentDataset = computed(() => route.params.registerId as string ?? '');
 
 const datasetEntries = computed(() => {
   const entries: { id: string; title: string; loaded: boolean; conceptCount: number }[] = [];

package/src/components/CitationDisplay.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Citation } from 'glossarist';
+
+const props = defineProps<{
+  citation: Citation;
+}>();
+
+function formatRef(c: Citation): string {
+  const ref = c.ref;
+  if (!ref) return '';
+  const parts: string[] = [];
+  if (ref.source) parts.push(ref.source);
+  if (ref.id) parts.push(ref.id);
+  if (ref.version) parts.push(`(${ref.version})`);
+  return parts.join(' ');
+}
+</script>
+
+<template>
+  <span class="inline">
+    <template v-if="citation.ref">
+      <span v-if="citation.ref.source" class="font-medium">{{ citation.ref.source }}</span>
+      <span v-if="citation.ref.id"> {{ citation.ref.id }}</span>
+      <span v-if="citation.ref.version" class="text-ink-400"> ({{ citation.ref.version }})</span>
+    </template>
+    <template v-if="citation.locality">
+      <span v-if="citation.locality.type" class="text-ink-400">, {{ citation.locality.type }}</span>
+      <span v-if="citation.locality.referenceFrom" class="text-ink-400">
+        {{ citation.locality.referenceTo ? ` ${citation.locality.referenceFrom}–${citation.locality.referenceTo}` : ` ${citation.locality.referenceFrom}` }}
+      </span>
+    </template>
+    <a v-if="citation.link" :href="citation.link" target="_blank" rel="noopener" class="concept-link ml-1">[link]</a>
+    <span v-if="citation.original" class="text-xs text-ink-300 ml-1">(orig: {{ citation.original }})</span>
+  </span>
+</template>