@glossarist/concept-browser 0.7.26 → 0.7.28

package/src/adapters/model-bridge.ts

@@ -23,6 +23,7 @@ import {
   NonVerbRep,
   RELATIONSHIP_TYPES,
   DATE_TYPES,
+  ConceptRef,
 } from 'glossarist';
 import {
   LetterSymbol,
@@ -36,6 +37,218 @@ import {
 } from 'glossarist/models';
 import type { ConceptSummary } from './types';
 
+// ── JSON-LD wire-format types ─────────────────────────────────────────────
+
+interface JsonLdContent {
+  'gl:content'?: string;
+}
+
+interface JsonLdDate {
+  'gl:date'?: string;
+  'gl:dateType'?: string;
+}
+
+interface JsonLdPronunciation {
+  'gl:content'?: string;
+  'gl:language'?: string;
+  'gl:script'?: string;
+  'gl:system'?: string;
+  'gl:country'?: string;
+}
+
+interface JsonLdGrammarInfo {
+  'gl:gender'?: string;
+  'gl:number'?: string;
+  'gl:partOfSpeech'?: string;
+  'gl:noun'?: boolean;
+  'gl:verb'?: boolean;
+  'gl:adj'?: boolean;
+  'gl:adverb'?: boolean;
+  'gl:preposition'?: boolean;
+  'gl:participle'?: boolean;
+}
+
+interface JsonLdRef {
+  'gl:source'?: string;
+  'gl:id'?: string;
+  'gl:version'?: string;
+  'gl:text'?: string;
+  'source'?: string;
+  'id'?: string;
+  'version'?: string;
+}
+
+interface JsonLdLocality {
+  'gl:localityType'?: string;
+  'gl:referenceFrom'?: string;
+  'gl:referenceTo'?: string;
+  'type'?: string;
+  'reference_from'?: string;
+  'reference_to'?: string;
+}
+
+interface JsonLdOrigin {
+  'gl:ref'?: string | JsonLdRef;
+  'gl:locality'?: JsonLdLocality;
+  'gl:link'?: string;
+  'gl:id'?: string;
+  'gl:version'?: string;
+  'gl:source'?: string;
+}
+
+interface JsonLdSource {
+  'gl:sourceType'?: string;
+  'gl:sourceStatus'?: string;
+  'gl:modification'?: string;
+  'gl:origin'?: JsonLdOrigin;
+}
+
+interface JsonLdRelated {
+  'gl:relationshipType'?: string;
+  'gl:ref'?: JsonLdRef;
+  '@id'?: string;
+  'gl:term'?: string;
+  'gl:target'?: string;
+}
+
+interface JsonLdDesignation {
+  '@type'?: string;
+  'gl:term'?: string;
+  'gl:normativeStatus'?: string;
+  'gl:absent'?: unknown;
+  'gl:fieldOfApplication'?: string;
+  'gl:usageInfo'?: string;
+  'gl:geographicalArea'?: string;
+  'gl:language'?: string;
+  'gl:script'?: string;
+  'gl:system'?: string;
+  'gl:international'?: boolean;
+  'gl:termType'?: string;
+  'gl:pronunciation'?: JsonLdPronunciation[];
+  'gl:source'?: JsonLdSource[];
+  'gl:related'?: JsonLdRelated[];
+  'gl:prefix'?: string;
+  'gl:gender'?: string;
+  'gl:grammarInfo'?: JsonLdGrammarInfo[];
+}
+
+interface JsonLdLocalizedConcept {
+  'gl:languageCode'?: string;
+  'gl:entryStatus'?: string;
+  'gl:classification'?: string;
+  'gl:reviewType'?: string;
+  'gl:domain'?: string;
+  'gl:release'?: string;
+  'gl:lineageSourceSimilarity'?: number;
+  'gl:script'?: string;
+  'gl:system'?: string;
+  'gl:designation'?: JsonLdDesignation[];
+  'gl:definition'?: JsonLdContent[];
+  'gl:notes'?: JsonLdContent[];
+  'gl:annotations'?: JsonLdContent[];
+  'gl:examples'?: JsonLdContent[];
+  'gl:source'?: JsonLdSource[];
+  'gl:dates'?: JsonLdDate[];
+  'gl:references'?: JsonLdRelated[];
+  'gl:reviewDate'?: string;
+  'gl:reviewDecisionDate'?: string;
+  'gl:reviewDecisionEvent'?: string;
+  'gl:reviewStatus'?: string;
+  'gl:reviewDecision'?: string;
+  'gl:reviewDecisionNotes'?: string;
+}
+
+interface JsonLdConcept {
+  '@type'?: string;
+  '@id'?: string;
+  'gl:identifier'?: string | number;
+  'gl:term'?: string;
+  'gl:localizedConcept'?: Record<string, JsonLdLocalizedConcept>;
+  'gl:related'?: JsonLdRelated[];
+  'gl:tags'?: string[];
+}
+
+// ── Bridges for fields not yet in glossarist-js ────────────────────────────
+// Remove each bridge when glossarist-js publishes native support.
+
+// Annotations: LocalizedConcept.annotations
+const extraAnnotations = new WeakMap<LocalizedConcept, DetailedDefinition[]>();
+
+export function getAnnotations(lc: LocalizedConcept): DetailedDefinition[] {
+  return extraAnnotations.get(lc) ?? [];
+}
+
+// Designation relationship targets: RelatedConcept.target (string)
+const designationTargets = new WeakMap<RelatedConcept, string>();
+
+export function getDesignationTarget(rc: RelatedConcept): string | null {
+  return designationTargets.get(rc) ?? null;
+}
+
+// ConceptRef text: human-readable label alongside source/id
+const refTexts = new WeakMap<ConceptRef, string>();
+
+export function getRefText(ref: ConceptRef): string | null {
+  return refTexts.get(ref) ?? null;
+}
+
+// Relationship types whose target is a designation string, not a concept ref.
+const DESIGNATION_REL_TYPES = new Set(['abbreviated_form_for', 'short_form_for']);
+
+function attachAnnotations(concept: Concept, localizations: Record<string, unknown>): void {
+  for (const lang of concept.languages) {
+    const lc = concept.localization(lang);
+    const raw = localizations[lang];
+    if (!lc || !raw || typeof raw !== 'object') continue;
+    const rawObj = raw as Record<string, unknown>;
+
+    // Annotations
+    const annList = rawObj.annotations;
+    if (Array.isArray(annList) && annList.length > 0) {
+      extraAnnotations.set(lc, annList.map((a: Record<string, unknown>) =>
+        DetailedDefinition.fromJSON({ content: (a.content as string) ?? '' }) as DetailedDefinition,
+      ));
+    }
+
+    // Designation-level relationship targets and ref text
+    const rawTerms = rawObj.terms;
+    if (Array.isArray(rawTerms)) {
+      for (let i = 0; i < lc.terms.length && i < rawTerms.length; i++) {
+        const rawTerm = rawTerms[i] as Record<string, unknown>;
+        const rawRelated = rawTerm.related;
+        if (!Array.isArray(rawRelated)) continue;
+        const designation = lc.terms[i];
+        for (let j = 0; j < designation.related.length && j < rawRelated.length; j++) {
+          const rawRel = rawRelated[j] as Record<string, unknown>;
+          const rc = designation.related[j];
+          if (rawRel.target && typeof rawRel.target === 'string') {
+            designationTargets.set(rc, rawRel.target);
+          }
+          if (rc.ref) {
+            const rawRef = rawRel.ref as Record<string, unknown> | undefined;
+            if (rawRef?.text && typeof rawRef.text === 'string') {
+              refTexts.set(rc.ref, rawRef.text);
+            }
+          }
+        }
+      }
+    }
+
+    // Localization-level ref text
+    const rawRelated = rawObj.related;
+    if (Array.isArray(rawRelated)) {
+      for (let i = 0; i < lc.related.length && i < rawRelated.length; i++) {
+        const rc = lc.related[i];
+        const rawRel = rawRelated[i] as Record<string, unknown>;
+        const rawRef = rawRel.ref as Record<string, unknown> | undefined;
+        if (rc.ref && rawRef?.text && typeof rawRef.text === 'string') {
+          refTexts.set(rc.ref, rawRef.text);
+        }
+      }
+    }
+  }
+}
+
 // ── Detection ─────────────────────────────────────────────────────────────
 
 function isJsonLd(doc: Record<string, unknown>): boolean {
@@ -44,11 +257,10 @@ function isJsonLd(doc: Record<string, unknown>): boolean {
 
 // ── JSON-LD → Glossarist native mapping ───────────────────────────────────
 
-function mapDesignationFromJsonLd(d: any): Record<string, unknown> {
+function mapDesignationFromJsonLd(d: JsonLdDesignation): Record<string, unknown> {
   const result: Record<string, unknown> = {};
-  const rawType = (d['@type'] as string) || '';
+  const rawType = d['@type'] || '';
 
-  // 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';
@@ -69,7 +281,7 @@ function mapDesignationFromJsonLd(d: any): Record<string, unknown> {
   if (d['gl:termType']) result.term_type = d['gl:termType'];
 
   if (d['gl:pronunciation']?.length) {
-    result.pronunciation = d['gl:pronunciation'].map((p: any) => ({
+    result.pronunciation = d['gl:pronunciation'].map(p => ({
       content: p['gl:content'] ?? null,
       language: p['gl:language'] ?? null,
       script: p['gl:script'] ?? null,
@@ -83,16 +295,21 @@ function mapDesignationFromJsonLd(d: any): Record<string, unknown> {
   }
 
   if (d['gl:related']?.length) {
-    result.related = d['gl:related'].map(mapRelatedFromJsonLd);
+    result.related = d['gl:related'].map(r => {
+      const relType = r['gl:relationshipType'] ?? 'references';
+      if (DESIGNATION_REL_TYPES.has(relType) && r['gl:target']) {
+        return { type: relType, target: r['gl:target'] };
+      }
+      return mapRelatedFromJsonLd(r);
+    });
   }
 
-  // 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) => ({
+    result.grammar_info = d['gl:grammarInfo'].map(gi => ({
       gender: gi['gl:gender'] ?? null,
       number: gi['gl:number'] ?? null,
       part_of_speech: gi['gl:partOfSpeech'] ?? null,
@@ -108,7 +325,7 @@ function mapDesignationFromJsonLd(d: any): Record<string, unknown> {
   return result;
 }
 
-function mapSourceFromJsonLd(s: any): Record<string, unknown> {
+function mapSourceFromJsonLd(s: JsonLdSource): 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'];
@@ -120,7 +337,6 @@ function mapSourceFromJsonLd(s: any): Record<string, unknown> {
     if (o['gl:ref']) {
       const rawRef = o['gl:ref'];
       if (typeof rawRef === 'string') {
-        // Legacy format: gl:ref is a plain string (e.g. "ISO/TS 14812:2022")
         origin.ref = { source: rawRef };
       } else {
         const refObj: Record<string, unknown> = {};
@@ -154,7 +370,7 @@ function mapSourceFromJsonLd(s: any): Record<string, unknown> {
   return result;
 }
 
-function mapRelatedFromJsonLd(r: any): Record<string, unknown> {
+function mapRelatedFromJsonLd(r: JsonLdRelated): Record<string, unknown> {
   const result: Record<string, unknown> = { type: 'references' };
 
   if (r['gl:relationshipType']) {
@@ -168,11 +384,12 @@ function mapRelatedFromJsonLd(r: any): Record<string, unknown> {
     if (ref['gl:id']) refObj.id = ref['gl:id'];
     if (ref['source']) refObj.source = ref['source'];
     if (ref['id']) refObj.id = ref['id'];
+    if (ref['gl:text']) refObj.text = ref['gl:text'];
     if (Object.keys(refObj).length > 0) result.ref = refObj;
   }
 
   if (!result.ref && r['@id']) {
-    const uri = r['@id'] as string;
+    const uri = r['@id'];
     const idMatch = uri.match(/\/concept\/([^/]+)$/);
     result.ref = idMatch
       ? { source: uri.split('/').slice(-3, -2)[0] || '', id: idMatch[1] }
@@ -182,7 +399,7 @@ function mapRelatedFromJsonLd(r: any): Record<string, unknown> {
   return result;
 }
 
-function mapLocalizedFromJsonLd(lc: any): Record<string, unknown> {
+function mapLocalizedFromJsonLd(lc: JsonLdLocalizedConcept): Record<string, unknown> {
   const data: Record<string, unknown> = {};
 
   if (lc['gl:languageCode']) data.language_code = lc['gl:languageCode'];
@@ -200,18 +417,21 @@ function mapLocalizedFromJsonLd(lc: any): Record<string, unknown> {
   }
 
   if (lc['gl:definition']?.length) {
-    data.definition = lc['gl:definition'].map((d: any) => {
-      const def: Record<string, unknown> = { content: d['gl:content'] ?? '' };
-      return def;
-    });
+    data.definition = lc['gl:definition'].map(d => ({
+      content: d['gl:content'] ?? '',
+    }));
   }
 
   if (lc['gl:notes']?.length) {
-    data.notes = lc['gl:notes'].map((n: any) => ({ content: n['gl:content'] ?? '' }));
+    data.notes = lc['gl:notes'].map(n => ({ content: n['gl:content'] ?? '' }));
+  }
+
+  if (lc['gl:annotations']?.length) {
+    data.annotations = lc['gl:annotations'].map(a => ({ content: a['gl:content'] ?? '' }));
   }
 
   if (lc['gl:examples']?.length) {
-    data.examples = lc['gl:examples'].map((e: any) => ({ content: e['gl:content'] ?? '' }));
+    data.examples = lc['gl:examples'].map(e => ({ content: e['gl:content'] ?? '' }));
   }
 
   if (lc['gl:source']?.length) {
@@ -219,7 +439,7 @@ function mapLocalizedFromJsonLd(lc: any): Record<string, unknown> {
   }
 
   if (lc['gl:dates']?.length) {
-    data.dates = lc['gl:dates'].map((d: any) => ({
+    data.dates = lc['gl:dates'].map(d => ({
       date: d['gl:date'] ?? null,
       type: d['gl:dateType'] ?? null,
     }));
@@ -229,7 +449,6 @@ function mapLocalizedFromJsonLd(lc: any): Record<string, unknown> {
     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'];
@@ -240,9 +459,9 @@ function mapLocalizedFromJsonLd(lc: any): Record<string, unknown> {
   return data;
 }
 
-function conceptFromJsonLd(doc: Record<string, any>): Concept {
+function conceptFromJsonLd(doc: JsonLdConcept): Concept {
   const id = String(doc['gl:identifier'] ?? doc['@id']?.split('/').pop() ?? '');
-  const localizations: Record<string, any> = {};
+  const localizations: Record<string, unknown> = {};
 
   const rawLc = doc['gl:localizedConcept'] ?? {};
   for (const [lang, lc] of Object.entries(rawLc)) {
@@ -254,7 +473,7 @@ function conceptFromJsonLd(doc: Record<string, any>): Concept {
   const related = (doc['gl:related'] ?? []).map(mapRelatedFromJsonLd);
   const tags = Array.isArray(doc['gl:tags']) ? [...doc['gl:tags']] : [];
 
-  return Concept.fromJSON({
+  const concept = Concept.fromJSON({
     id,
     term: doc['gl:term'] ?? null,
     uri: doc['@id'] ?? null,
@@ -263,16 +482,21 @@ function conceptFromJsonLd(doc: Record<string, any>): Concept {
     tags,
     status: null,
   });
+
+  attachAnnotations(concept, localizations);
+  return concept;
 }
 
 // ── Public API ────────────────────────────────────────────────────────────
 
-export function conceptFromJson(doc: Record<string, any>): Concept {
+export function conceptFromJson(doc: Record<string, unknown>): Concept {
   if (isJsonLd(doc)) {
-    return conceptFromJsonLd(doc);
+    return conceptFromJsonLd(doc as JsonLdConcept);
   }
-  // glossarist native format — use fromJSON directly
-  return Concept.fromJSON(doc as Record<string, unknown>);
+  const concept = Concept.fromJSON(doc);
+  const locs = (doc as Record<string, unknown>).localizations as Record<string, unknown> | undefined;
+  if (locs) attachAnnotations(concept, locs);
+  return concept;
 }
 
 export function conceptToSummary(concept: Concept): ConceptSummary {

package/src/adapters/ontology-registry.ts

@@ -14,12 +14,20 @@ export interface TaxonomyConcept {
   altLabel?: string;
   definition?: string;
   broader?: string;
+  category?: string;
+  inverseOf?: string;
+}
+
+export interface TaxonomyCategory {
+  label: string;
+  color: string;
 }
 
 export interface Taxonomy {
   scheme: string;
   schemeLabel: string | null;
   schemeDefinition: string | null;
+  categories?: Record<string, TaxonomyCategory>;
   concepts: Record<string, TaxonomyConcept>;
 }
 
@@ -61,15 +69,35 @@ export class OntologyRegistry {
     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);
   }
+
+  getCategory(taxonomy: TaxonomyKey, id: string): string | null {
+    return this.getConcept(taxonomy, id)?.category ?? null;
+  }
+
+  getInverse(taxonomy: TaxonomyKey, id: string): string | null {
+    return this.getConcept(taxonomy, id)?.inverseOf ?? null;
+  }
+
+  getCategoryConfig(taxonomy: TaxonomyKey, categoryId: string): TaxonomyCategory | null {
+    return this.data[taxonomy]?.categories?.[categoryId] ?? null;
+  }
+
+  getCategories(taxonomy: TaxonomyKey): Record<string, TaxonomyCategory> {
+    return this.data[taxonomy]?.categories ?? {};
+  }
+
+  getColor(taxonomy: TaxonomyKey, id: string): string | null {
+    const entry = this.data[taxonomy] as unknown as Record<string, unknown>;
+    const colors = entry?.colors as Record<string, string> | undefined;
+    return colors?.[id] ?? null;
+  }
 }
 
 export const ontology = new OntologyRegistry();

package/src/components/AppSidebar.vue

@@ -252,7 +252,7 @@ const activeSectionId = computed(() => {
           <button
             v-if="group.label"
             @click="toggleGroup(group.id)"
-            class="w-full flex items-start gap-1.5 px-2 py-1.5 rounded-lg text-xs font-semibold transition-colors hover:bg-ink-50"
+            class="sidebar-group-label w-full flex items-start gap-1.5 px-2 py-1.5 rounded-lg text-xs font-semibold transition-colors hover:bg-ink-50"
             :style="group.color ? { color: group.color } : {}"
           >
             <span class="w-3 text-[10px] mt-0.5 flex-shrink-0">{{ isGroupExpanded(group.id) ? '▾' : '▸' }}</span>

package/src/components/ConceptDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Concept, LocalizedConcept, Designation, Expression, ConceptSource } from 'glossarist';
+import type { Concept, LocalizedConcept, Designation, ConceptSource } from 'glossarist';
 import type { Manifest, GraphEdge } from '../adapters/types';
 import { computed, ref, nextTick, watch } from 'vue';
 import { langName, langLabel, sortLanguages } from '../utils/lang';
@@ -7,8 +7,8 @@ import { renderMath, cleanContent } from '../utils/math';
 import type { RenderOptions } from '../utils/math';
 import { escapeAttr } from '../utils/escape';
 import { entryStatusColor, conceptStatusColor, conceptStatusLabel, conceptStatusDefinition, entryStatusLabel, entryStatusDefinition, getPreferredTerm } from '../utils/concept-helpers';
-import { designationTypeInfo, normativeStatusInfo, grammarBadges, pronunciationLabel, pronunciationTooltip, abbreviationDetails, sourceTypeInfo, sourceStatusInfo, termTypeInfo } from '../utils/designation-registry';
-import { conceptUri } from '../adapters/model-bridge';
+import { sourceTypeInfo, sourceStatusInfo } from '../utils/designation-registry';
+import { conceptUri, getAnnotations } from '../adapters/model-bridge';
 import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
@@ -21,6 +21,7 @@ import ConceptRdfView from './ConceptRdfView.vue';
 import FormatDownloads from './FormatDownloads.vue';
 import NonVerbalRepDisplay from './NonVerbalRepDisplay.vue';
 import CitationDisplay from './CitationDisplay.vue';
+import DesignationList from './DesignationList.vue';
 import { useI18n } from '../i18n';
 
 const { t, locale } = useI18n();
@@ -143,7 +144,7 @@ async function navigateRelated(ref: { source: string | null; id: string | null }
   router.push({ name: 'concept', params: { registerId: target.registerId, conceptId: target.conceptId } });
 }
 
-function relatedLabel(dr: { content?: string; ref?: { source: string | null; id: string | null } | null }): string {
+function relatedLabel(dr: { content?: string | null; ref?: { source: string | null; id: string | null } | null }): string {
   if (dr.content) return dr.content;
   const resolved = dr.ref ? getResolvedRef(dr.ref).target : null;
   if (resolved) {
@@ -200,6 +201,8 @@ interface LangContent {
   renderedTerm: string;
   definition: string;
   renderedDefinition: string;
+  annotations: string[];
+  renderedAnnotations: string[];
   notes: string[];
   renderedNotes: string[];
   examples: string[];
@@ -224,6 +227,7 @@ const allLangContent = computed(() => {
 
     const definition = lc.definitions
       .map(d => d.content).filter(Boolean).join('\n\n');
+    const annotations = getAnnotations(lc).map(a => a.content).filter(Boolean);
     const notes = lc.notes.map(n => n.content).filter(Boolean);
     const examples = lc.examples.map(e => e.content).filter(Boolean);
 
@@ -233,6 +237,8 @@ const allLangContent = computed(() => {
       renderedTerm: renderMath(getPreferredTerm(lc, '')),
       definition,
       renderedDefinition: renderMath(definition, renderOpts),
+      annotations,
+      renderedAnnotations: annotations.map((a: string) => renderMath(a, renderOpts)),
       notes,
       renderedNotes: notes.map(n => renderMath(n, renderOpts)),
       examples,
@@ -259,7 +265,7 @@ const langContentMap = computed(() => {
 });
 
 function hasContent(lc: LangContent): boolean {
-  return !!(lc.definition || lc.notes.length || lc.examples.length || lc.sources.length);
+  return !!(lc.definition || lc.annotations.length || lc.notes.length || lc.examples.length || lc.sources.length);
 }
 
 function initCollapsed() {
@@ -364,7 +370,7 @@ const edgeDisplayCache = computed(() => {
 });
 
 function getEdgeDisplay(uri: string): EdgeDisplay {
-  return edgeDisplayCache.value.get(uri) ?? { uri, conceptId: uri, tooltip: uri, isLocal: false, badge: null };
+  return edgeDisplayCache.value.get(uri) ?? { uri, conceptId: uri, designation: "", tooltip: uri, isLocal: false, badge: null };
 }
 
 interface ResolvedRef {
@@ -402,7 +408,7 @@ async function navigateEdge(edge: GraphEdge) {
 
 function navigateDomain(domain: { slug: string; conceptId?: string }) {
   const sectionId = domain.conceptId || domain.slug;
-  router.push({ name: 'dataset', params: { registerId: manifest.id }, query: { section: sectionId } });
+  router.push({ name: 'dataset', params: { registerId: props.manifest.id }, query: { section: sectionId } });
 }
 
 function getTermForLang(lang: string): string {
@@ -623,76 +629,38 @@ const nonVerbalReps = computed(() => {
             <div v-if="hasContent(lc) && collapsedLangs.has(lc.lang)" class="px-3 sm:px-4 pb-3 -mt-0.5">
               <p v-if="lc.definition" class="text-xs text-ink-300 leading-relaxed pl-[22px]">{{ plainTruncate(lc.definition) }}</p>
               <p v-else class="text-xs text-ink-200 leading-relaxed pl-[22px]">
+                <template v-if="lc.annotations.length">{{ lc.annotations.length }} annotation{{ lc.annotations.length > 1 ? 's' : '' }}</template>
+                <template v-if="lc.annotations.length && lc.notes.length"> &middot; </template>
                 <template v-if="lc.notes.length">{{ lc.notes.length }} note{{ lc.notes.length > 1 ? 's' : '' }}</template>
-                <template v-if="lc.notes.length && lc.examples.length"> &middot; </template>
+                <template v-if="(lc.annotations.length || lc.notes.length) && lc.examples.length"> &middot; </template>
                 <template v-if="lc.examples.length">{{ lc.examples.length }} example{{ lc.examples.length > 1 ? 's' : '' }}</template>
               </p>
             </div>
 
             <!-- Expandable content -->
             <div v-if="hasContent(lc)" v-show="!collapsedLangs.has(lc.lang)" class="lang-content px-3 sm:px-4 pb-4 space-y-3">
-              <!-- Designations (show all, with full metadata) -->
-              <div v-if="lc.designations.length > 0" class="space-y-1.5 pl-[22px]">
-                <div v-for="(d, i) in orderedDesignations(lc.lang)" :key="i">
-                  <div class="flex items-center gap-1.5 text-sm flex-wrap">
-                    <span :class="d.normativeStatus === 'preferred' ? 'font-bold text-ink-800' : 'font-normal text-ink-700'" v-html="lc.renderedDesignations.get(d.designation) ?? d.designation"></span>
-                    <span class="badge text-[10px] flex-shrink-0" :class="designationTypeInfo(d).color" :title="designationTypeInfo(d).definition ?? ''">{{ designationTypeInfo(d).label }}</span>
-                    <span class="badge text-[10px] flex-shrink-0" :class="normativeStatusInfo(d.normativeStatus).color" :title="normativeStatusInfo(d.normativeStatus).definition ?? ''">{{ normativeStatusInfo(d.normativeStatus).label }}</span>
-                    <!-- Abbreviation details -->
-                    <template v-if="abbreviationDetails(d).length">
-                      <span v-for="abbr in abbreviationDetails(d)" :key="abbr" class="badge text-[10px] bg-amber-50 text-amber-600">{{ abbr }}</span>
-                    </template>
-                    <!-- Term type (ISO 12620) -->
-                    <span v-if="d.termType" class="badge text-[10px] bg-gray-50 text-gray-600" :title="termTypeInfo(d.termType).definition ?? ''">{{ termTypeInfo(d.termType).label }}</span>
-                    <!-- Grammar info -->
-                    <template v-if="d.type === 'expression' && (d as Expression).grammarInfo?.length">
-                      <template v-for="(gi, giIdx) in (d as Expression).grammarInfo" :key="giIdx">
-                        <span v-for="badge in grammarBadges(gi)" :key="giIdx + '-' + badge.label"
-                          class="badge text-[10px] bg-gray-50 text-gray-600" :title="badge.definition ?? ''">{{ badge.label }}</span>
-                      </template>
-                    </template>
-                    <!-- Pronunciation -->
-                    <template v-if="d.pronunciations?.length">
-                      <span v-for="(p, pi) in d.pronunciations" :key="'p'+pi"
-                        class="text-xs text-ink-400 font-mono" :title="pronunciationTooltip(p)">{{ pronunciationLabel(p) }}</span>
-                    </template>
-                    <!-- Flags -->
-                    <span v-if="d.international" class="badge text-[10px] bg-sky-50 text-sky-600">international</span>
-                    <span v-if="d.absent" class="badge text-[10px] bg-red-50 text-red-600">absent</span>
-                    <span v-if="d.geographicalArea" class="badge text-[10px] bg-gray-50 text-gray-600">{{ d.geographicalArea }}</span>
-                    <span v-if="d.usageInfo" class="text-xs text-ink-300">{{ d.usageInfo }}</span>
-                    <span v-if="d.fieldOfApplication" class="text-xs text-ink-300">field: {{ d.fieldOfApplication }}</span>
-                    <!-- Per-designation language/script/system overrides -->
-                    <template v-if="d.language && d.language !== lc.lang">
-                      <span class="badge text-[10px] bg-teal-50 text-teal-600">lang: {{ langName(d.language) }}</span>
-                    </template>
-                    <span v-if="d.script" class="badge text-[10px] bg-gray-50 text-gray-600">script: {{ d.script }}</span>
-                    <span v-if="d.system" class="badge text-[10px] bg-gray-50 text-gray-600">system: {{ d.system }}</span>
-                  </div>
-                  <!-- Designation sources -->
-                  <div v-if="d.sources?.length" class="mt-1 space-y-0.5">
-                    <div v-for="(ds, dsi) in d.sources" :key="'ds'+dsi" class="text-xs text-ink-400 flex items-center gap-1.5">
-                      <span v-if="ds.type" class="badge text-[9px]" :class="sourceTypeInfo(ds.type).color">{{ sourceTypeInfo(ds.type).label }}</span>
-                      <CitationDisplay v-if="ds.origin" :citation="ds.origin" :register-id="registerId" />
-                      <span v-else-if="ds.modification" class="text-ink-300">{{ ds.modification }}</span>
-                    </div>
-                  </div>
-                  <!-- Designation relationships -->
-                  <div v-if="d.related?.length" class="mt-0.5 space-y-0.5">
-                    <div v-for="(dr, dri) in d.related" :key="'dr'+dri" class="text-xs text-ink-400 flex items-center gap-1.5">
-                      <span class="badge text-[9px] bg-gray-50 text-gray-600">{{ relationshipLabel(dr.type) }}</span>
-                      <button v-if="getResolvedRef(dr.ref).target" @click="navigateRelated(dr.ref!)" class="concept-link">{{ relatedLabel(dr) }}</button>
-                      <span v-else>{{ relatedLabel(dr) }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <!-- Designations -->
+              <DesignationList
+                :designations="orderedDesignations(lc.lang)"
+                :rendered-designations="lc.renderedDesignations"
+                :lang="lc.lang"
+                :register-id="registerId"
+                @navigate-related="(ref) => navigateRelated(ref)"
+              />
 
               <!-- Definition -->
               <div v-if="lc.definition" class="p-4 rounded-lg bg-surface border-l-2" :style="{ borderLeftColor: getColor(manifest.id) }">
                 <div class="text-ink-800 leading-relaxed" v-html="lc.renderedDefinition"></div>
               </div>
 
+              <!-- Annotations -->
+              <div v-if="lc.annotations.length" class="space-y-2">
+                <div v-for="(_, i) in lc.annotations" :key="'ann-'+i" class="text-ink-500 text-sm leading-relaxed italic pl-3 border-l-2 border-ink-200">
+                  <span class="font-medium text-ink-400 text-xs uppercase tracking-wide not-italic">{{ t('concept.annotation') }}</span>
+                  <div class="mt-1 not-italic" v-html="lc.renderedAnnotations[i]"></div>
+                </div>
+              </div>
+
               <!-- Notes -->
               <div v-if="lc.notes.length" class="space-y-2">
                 <div v-for="(_, i) in lc.notes" :key="i" class="text-ink-600 text-sm leading-relaxed">