@glossarist/concept-browser 0.3.7 → 0.4.1

package/src/stores/vocabulary.ts

@@ -2,14 +2,16 @@ import { defineStore } from 'pinia';
 import { ref, computed, toRaw } from 'vue';
 import { getFactory } from '../adapters/factory';
 import type { DatasetAdapter } from '../adapters/DatasetAdapter';
-import type { Manifest, ConceptDocument, SearchHit, GraphEdge } from '../adapters/types';
+import type { Manifest, SearchHit, GraphEdge } from '../adapters/types';
+import type { Concept } from 'glossarist';
+import { conceptUri } from '../adapters/model-bridge';
 import { GraphEngine } from '../graph';
 
 export const useVocabularyStore = defineStore('vocabulary', () => {
   // State
   const datasets = ref<Map<string, DatasetAdapter>>(new Map());
   const manifests = ref<Map<string, Manifest>>(new Map());
-  const currentConcept = ref<ConceptDocument | null>(null);
+  const currentConcept = ref<Concept | null>(null);
   const currentRegisterId = ref<string>('');
   const currentConceptId = ref<string>('');
   const loading = ref(false);
@@ -97,7 +99,7 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
           uri: factory.router.buildUri(registerId, entry.id),
           register: registerId,
           conceptId: entry.id,
-          designations: entry.eng ? { eng: entry.eng } : {},
+          designations: entry.designations,
           status: entry.status,
           loaded: false,
         });
@@ -121,7 +123,7 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
           uri: factory.router.buildUri(registerId, entry.id),
           register: registerId,
           conceptId: entry.id,
-          designations: entry.eng ? { eng: entry.eng } : {},
+          designations: entry.designations,
           status: entry.status,
           loaded: false,
         });
@@ -143,11 +145,12 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
 
     await Promise.allSettled(adapters.map(async (adapter) => {
       try {
-        const [nodeResult, edgeResult] = await Promise.allSettled([
+        const [nodeResult, edgeResult, domainResult] = await Promise.allSettled([
           adapter.loadGraphNodes(),
           !edgeStatus.value[adapter.registerId]?.loaded
             ? adapter.loadEdgeIndex()
             : Promise.resolve([] as GraphEdge[]),
+          adapter.loadDomainNodes(),
         ]);
 
         if (nodeResult.status === 'fulfilled') {
@@ -170,6 +173,12 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
           }
           edgeStatus.value[adapter.registerId] = { loaded: true, count: edgeResult.value.length };
         }
+
+        if (domainResult.status === 'fulfilled') {
+          for (const dn of domainResult.value) {
+            engine.addNode(dn);
+          }
+        }
       } catch {
         // Individual adapter failures are non-critical for graph view
       }
@@ -180,9 +189,14 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
 
   async function loadEdges(adapter: DatasetAdapter) {
     try {
-      const edges = await adapter.loadEdgeIndex();
+      const [edges, domainNodes] = await Promise.all([
+        adapter.loadEdgeIndex(),
+        adapter.loadDomainNodes(),
+      ]);
+      for (const dn of domainNodes) {
+        graph.value.addNode(dn);
+      }
       for (const edge of edges) {
-        // Mark source node as having edges
         graph.value.addEdge(edge);
       }
       edgeStatus.value[adapter.registerId] = { loaded: true, count: edges.length };
@@ -205,26 +219,31 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
 
       // Extract and register edges for this specific concept
       const edges = adapter.extractEdges(concept);
-      const uri = concept['@id'];
+      const domainEdges = adapter.extractDomainEdges(concept);
+      const uriBase = adapter.manifest?.uriBase || 'https://glossarist.org';
+      const uri = conceptUri(concept, registerId, uriBase);
 
       // Update graph node with full data
+      const designations: Record<string, string> = {};
+      const indexEntry = adapter.getIndexEntry(conceptId);
+      if (indexEntry) {
+        for (const [lang, term] of Object.entries(indexEntry.designations)) {
+          if (term) designations[lang] = term;
+        }
+      }
+      for (const lang of concept.languages) {
+        const lc = concept.localization(lang);
+        if (lc?.primaryDesignation) {
+          designations[lang] = lc.primaryDesignation;
+        }
+      }
+
       graph.value.addNode({
         uri,
         register: registerId,
         conceptId,
-        designations: (() => {
-          const d: Record<string, string> = {};
-          const entry = adapter.getIndexEntry(conceptId);
-          if (entry?.eng) d.eng = entry.eng;
-          for (const [lang, lc] of Object.entries(concept['gl:localizedConcept'] || {})) {
-            const preferred = lc['gl:designation']?.find(
-              (dd: any) => dd['gl:normativeStatus'] === 'preferred'
-            );
-            if (preferred?.['gl:term']) d[lang] = preferred['gl:term'];
-          }
-          return d;
-        })(),
-        status: adapter.getIndexEntry(conceptId)?.status ?? 'unknown',
+        designations,
+        status: indexEntry?.status ?? 'unknown',
         loaded: true,
       });
 
@@ -232,6 +251,22 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
         graph.value.addEdge(edge);
       }
 
+      for (const edge of domainEdges) {
+        graph.value.addEdge(edge);
+        const existing = graph.value.getNode(edge.target);
+        if (!existing || !existing.loaded) {
+          graph.value.addNode({
+            uri: edge.target,
+            register: registerId,
+            conceptId: '',
+            designations: edge.label ? { eng: edge.label } : {},
+            status: 'domain',
+            loaded: true,
+            nodeType: 'domain',
+          });
+        }
+      }
+
       touchGraph();
       conceptEdges.value = graph.value.getEdges(uri);
     } catch (e: unknown) {
@@ -260,15 +295,30 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
     }
   }
 
-  async function searchAcrossDatasets(query: string, lang: string = 'eng'): Promise<SearchHit[]> {
-    const hits: SearchHit[] = [];
+  async function searchAcrossDatasets(query: string): Promise<SearchHit[]> {
+    const allHits: SearchHit[] = [];
     for (const adapter of datasets.value.values()) {
       if (adapter.index || adapter.manifest) {
         await adapter.ensureAllChunksLoaded();
-        hits.push(...adapter.search(query, lang));
+        allHits.push(...adapter.search(query));
+      }
+    }
+
+    // Deduplicate: keep the best hit per (registerId, conceptId)
+    const best = new Map<string, SearchHit>();
+    for (const hit of allHits) {
+      const key = `${hit.registerId}:${hit.conceptId}`;
+      const existing = best.get(key);
+      if (!existing) {
+        best.set(key, hit);
+      } else {
+        // Prefer designation match over id match, then prefer shorter language code (eng first)
+        if (hit.matchField === 'designation' && existing.matchField === 'id') {
+          best.set(key, hit);
+        }
       }
     }
-    return hits;
+    return [...best.values()];
   }
 
   async function getRandomConcept(): Promise<{ registerId: string; conceptId: string } | null> {

package/src/style.css

@@ -290,50 +290,78 @@
 }
 
 /* ===== Dark mode ===== */
+
+/*
+  Color philosophy:
+  Light mode uses an "ink" navy-indigo palette (50=lightest → 900=darkest).
+  Dark mode inverts the scale: the darkest light colors become the brightest
+  dark colors, maintaining WCAG AA contrast on dark surfaces.
+
+  Surface hierarchy (light → dark):
+    surface (#faf9f6) → surface-alt (#f3f2ee) → surface-raised (#fff) — cards, inputs
+  Dark surface hierarchy:
+    surface (#0f1020) → surface-alt (#161728) → surface-raised (#1e1f34)
+    Raised cards sit one step lighter than the base surface.
+*/
+
 .dark body {
   background-color: #0f1020;
   color: #dddde6;
 }
 
-/* Surfaces */
+/* ── Surfaces ── */
 .dark .bg-surface { background-color: #0f1020 !important; }
 .dark .bg-surface-alt { background-color: #161728 !important; }
-.dark .bg-surface-raised { background-color: #1a1b2e !important; }
-
-/* Text */
+.dark .bg-surface-raised { background-color: #1e1f34 !important; }
+
+/* ── Text (inverted ink scale for dark) ──
+   ink-800/700 → primary headings (brightest)
+   ink-600     → body text (readable, ≥4.5:1 on raised surfaces)
+   ink-500/400 → secondary/hint
+   ink-300/200 → muted labels
+   ink-100     → borders/decorative only
+*/
 .dark .text-ink { color: #dddde6 !important; }
+.dark .text-ink-900 { color: #eeeef4 !important; }
 .dark .text-ink-800 { color: #dddde6 !important; }
-.dark .text-ink-700 { color: #b8b9cc !important; }
-.dark .text-ink-600 { color: #8d8faa !important; }
-.dark .text-ink-500 { color: #8d8faa !important; }
-.dark .text-ink-400 { color: #636588 !important; }
+.dark .text-ink-700 { color: #c8c9d8 !important; }
+.dark .text-ink-600 { color: #b8b9cc !important; }
+.dark .text-ink-500 { color: #9d9fbb !important; }
+.dark .text-ink-400 { color: #7a7c9a !important; }
 .dark .text-ink-300 { color: #636588 !important; }
 .dark .text-ink-200 { color: #484a6e !important; }
 .dark .text-ink-100 { color: #484a6e !important; }
 
-/* Backgrounds */
+/* ── Backgrounds ── */
 .dark .bg-ink-50 { background-color: #161728 !important; }
+.dark .bg-ink-50\/30 { background-color: rgba(22, 23, 40, 0.3) !important; }
+.dark .bg-ink-50\/60 { background-color: rgba(22, 23, 40, 0.6) !important; }
 .dark .bg-ink-100 { background-color: #1e1f34 !important; }
+.dark .bg-ink-200 { background-color: #22243c !important; }
+.dark .bg-ink-800 { background-color: #0a0b18 !important; }
+.dark .bg-ink-800\/8 { background-color: rgba(10, 11, 24, 0.08) !important; }
 
-/* Borders */
+/* ── Borders ── */
 .dark .border-ink-100 { border-color: #2c2e4a !important; }
+.dark .border-ink-100\/30 { border-color: rgba(44, 46, 74, 0.3) !important; }
 .dark .border-ink-100\/60 { border-color: rgba(44, 46, 74, 0.6) !important; }
 .dark .border-ink-100\/80 { border-color: rgba(44, 46, 74, 0.8) !important; }
 .dark .border-ink-200 { border-color: #36385a !important; }
+.dark .border-ink-800 { border-color: #2c2e4a !important; }
 
-/* Focus rings */
+/* ── Focus rings ── */
 .dark .focus\:ring-ink-200:focus { --tw-ring-color: #36385a !important; }
 .dark .focus\:ring-ink-200\/30:focus { --tw-ring-color: rgba(54, 56, 90, 0.3) !important; }
-.dark .focus\:border-ink-400:focus { border-color: #636588 !important; }
+.dark .focus\:border-ink-400:focus { border-color: #7a7c9a !important; }
 
-/* Cards */
+/* ── Cards ── */
 .dark .card {
   background-color: #1e1f34 !important;
   border-color: rgba(44, 46, 74, 0.6) !important;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
 }
 
-/* Inputs */
+/* ── Inputs ── */
 .dark input {
   background-color: #161728 !important;
   border-color: #2c2e4a !important;
@@ -341,16 +369,42 @@
 }
 .dark input::placeholder { color: #484a6e !important; }
 
-/* Skeleton */
+/* ── Skeleton ── */
 .dark .skeleton {
   background: linear-gradient(90deg, #1e1f34 25%, #2c2e4a 50%, #1e1f34 75%) !important;
 }
 
-/* Hover states */
-.dark .hover\:bg-ink-50:hover { background-color: #161728 !important; }
+/* ── Hover states ── */
+.dark .hover\:bg-ink-50:hover { background-color: #1e1f34 !important; }
+.dark .hover\:bg-ink-50\/30:hover { background-color: rgba(30, 31, 52, 0.3) !important; }
+.dark .hover\:bg-ink-50\/50:hover { background-color: rgba(30, 31, 52, 0.5) !important; }
 .dark .hover\:bg-surface-alt:hover { background-color: #161728 !important; }
-.dark .hover\:text-ink-700:hover { color: #b8b9cc !important; }
-.dark .hover\:text-ink-800:hover { color: #dddde6 !important; }
+.dark .hover\:text-ink-700:hover { color: #dddde6 !important; }
+.dark .hover\:text-ink-800:hover { color: #eeeef4 !important; }
 
-/* Placeholder text */
+/* ── Placeholder text ── */
 .dark .placeholder\:text-ink-300::placeholder { color: #484a6e !important; }
+
+/* ── Semantic colors (badges, accent text) ── */
+.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
+.dark .text-blue-600 { color: #93bbfd !important; }
+.dark .text-blue-700 { color: #7aa8fb !important; }
+.dark .border-blue-100 { border-color: rgba(59, 130, 246, 0.25) !important; }
+.dark .border-blue-500 { border-color: #3b82f6 !important; }
+.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
+.dark .text-emerald-500 { color: #6ee7b7 !important; }
+.dark .text-emerald-700 { color: #6ee7b7 !important; }
+.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.25) !important; }
+.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
+.dark .text-amber-600 { color: #fbbf24 !important; }
+.dark .text-amber-700 { color: #fbbf24 !important; }
+.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.15) !important; }
+.dark .text-purple-700 { color: #c4b5fd !important; }
+.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
+.dark .text-red-600 { color: #fca5a5 !important; }
+
+/* Scrollbar hide utility */
+@layer utilities {
+  .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
+  .scrollbar-none::-webkit-scrollbar { display: none; }
+}

package/src/utils/concept-formats.ts

@@ -1,4 +1,4 @@
-import type { ConceptDocument, LocalizedConcept } from '../adapters/types';
+import type { Concept } from 'glossarist';
 
 export interface FormatDescriptor {
   extension: string;
@@ -13,7 +13,7 @@ export const FORMAT_REGISTRY: Record<string, FormatDescriptor> = {
   yaml: { extension: 'yaml', label: 'YAML', mediaType: 'text/yaml' },
 };
 
-function getLocalizedData(concept: ConceptDocument) {
+function getLocalizedData(concept: Concept) {
   const result: Record<string, {
     prefLabels: string[];
     altLabels: string[];
@@ -21,19 +21,21 @@ function getLocalizedData(concept: ConceptDocument) {
     notes: string[];
   }> = {};
 
-  for (const [lang, lc] of Object.entries(concept['gl:localizedConcept'] || {})) {
-    const descs = lc['gl:designation'] || [];
-    const prefLabels = descs
-      .filter(d => d['gl:normativeStatus'] === 'preferred' && d['gl:term'])
-      .map(d => d['gl:term']!);
-    const altLabels = descs
-      .filter(d => d['gl:normativeStatus'] !== 'preferred' && d['gl:term'])
-      .map(d => d['gl:term']!);
-    const definitions = (lc['gl:definition'] || [])
-      .map(d => d['gl:content'] || '')
+  for (const lang of concept.languages) {
+    const lc = concept.localization(lang);
+    if (!lc) continue;
+
+    const prefLabels = lc.terms
+      .filter(d => d.normativeStatus === 'preferred' && d.designation)
+      .map(d => d.designation);
+    const altLabels = lc.terms
+      .filter(d => d.normativeStatus !== 'preferred' && d.designation)
+      .map(d => d.designation);
+    const definitions = lc.definitions
+      .map(d => d.content || '')
       .filter(Boolean);
-    const notes = (lc['gl:notes'] || [])
-      .map(d => d['gl:content'] || '')
+    const notes = lc.notes
+      .map(d => d.content || '')
       .filter(Boolean);
 
     if (prefLabels.length || definitions.length) {
@@ -48,9 +50,9 @@ function escapeTurtle(s: string): string {
   return s.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n');
 }
 
-export function conceptToTurtle(concept: ConceptDocument): string {
-  const uri = concept['@id'] || '';
-  const id = concept['gl:identifier'] || '';
+export function conceptToTurtle(concept: Concept): string {
+  const uri = concept.uri || '';
+  const id = concept.id;
   const data = getLocalizedData(concept);
 
   const lines: string[] = [
@@ -84,9 +86,9 @@ export function conceptToTurtle(concept: ConceptDocument): string {
   return lines.join('\n');
 }
 
-export function conceptToSkosJsonLd(concept: ConceptDocument): string {
-  const uri = concept['@id'] || '';
-  const id = concept['gl:identifier'] || '';
+export function conceptToSkosJsonLd(concept: Concept): string {
+  const uri = concept.uri || '';
+  const id = concept.id;
   const data = getLocalizedData(concept);
 
   const doc: Record<string, any> = {

package/src/utils/concept-helpers.ts

@@ -1,34 +1,54 @@
-import type { Designation, LocalizedConcept } from '../adapters/types';
+import type { LocalizedConcept } from 'glossarist';
+import { ontology } from '../adapters/ontology-registry';
 
 export function entryStatusColor(status: string): string {
-  if (status === 'valid' || status === 'Standard') return 'badge-green';
-  if (status === 'superseded') return 'bg-red-50 text-red-700';
-  if (status === 'withdrawn') return 'bg-red-100 text-red-800';
-  if (status === 'draft') return 'badge-yellow';
-  return 'badge-gray';
+  const colors: Record<string, string> = {
+    valid: 'badge-green',
+    not_valid: 'bg-red-50 text-red-700',
+    superseded: 'bg-red-50 text-red-700',
+    retired: 'badge-gray',
+    withdrawn: 'bg-red-100 text-red-800',
+    draft: 'badge-yellow',
+    Standard: 'badge-green',
+  };
+  return colors[status] ?? 'badge-gray';
 }
 
-export function designationTypeLabel(type: string): string {
-  const labels: Record<string, string> = {
-    'gl:Expression': 'Expression',
-    'gl:Symbol': 'Symbol',
-    'gl:Abbreviation': 'Abbreviation',
-    'gl:GraphicalSymbol': 'Graphical',
+export function conceptStatusColor(status: string | null): string {
+  if (!status) return 'badge-gray';
+  const colors: Record<string, string> = {
+    draft: 'badge-yellow',
+    submitted: 'badge-blue',
+    valid: 'badge-green',
+    not_valid: 'bg-red-50 text-red-700',
+    invalid: 'bg-red-50 text-red-700',
+    superseded: 'bg-red-50 text-red-700',
+    retired: 'badge-gray',
   };
-  return labels[type] ?? type;
+  return colors[status] ?? 'badge-gray';
+}
+
+export function conceptStatusLabel(status: string | null): string {
+  if (!status) return '';
+  return ontology.getLabel('conceptStatus', status) || status;
+}
+
+export function conceptStatusDefinition(status: string | null): string | null {
+  if (!status) return null;
+  return ontology.getDefinition('conceptStatus', status);
+}
+
+export function entryStatusLabel(status: string | null): string {
+  if (!status) return '';
+  return ontology.getLabel('entryStatus', status) || status;
 }
 
-export function designationTypeColor(type: string): string {
-  if (type === 'gl:Symbol') return 'badge-purple';
-  if (type === 'gl:Abbreviation') return 'badge-yellow';
-  return 'badge-blue';
+export function entryStatusDefinition(status: string | null): string | null {
+  if (!status) return null;
+  return ontology.getDefinition('entryStatus', status);
 }
 
 export function getPreferredTerm(lc: LocalizedConcept | null | undefined, fallback = '—'): string {
-  if (!lc?.['gl:designation']?.length) return fallback;
-  const desigs = lc['gl:designation'];
-  const preferredExpr = desigs.find(d => d['gl:normativeStatus'] === 'preferred' && d['@type'] === 'gl:Expression');
-  if (preferredExpr) return preferredExpr['gl:term'];
-  const preferred = desigs.find(d => d['gl:normativeStatus'] === 'preferred');
-  return preferred?.['gl:term'] ?? desigs[0]?.['gl:term'] ?? fallback;
+  if (!lc) return fallback;
+  return lc.primaryDesignation ?? lc.terms[0]?.designation ?? fallback;
 }

package/src/utils/designation-registry.ts

@@ -0,0 +1,124 @@
+import type { Designation, Abbreviation } from 'glossarist';
+import type { GrammarInfo, Pronunciation } from 'glossarist/models';
+import { ontology } from '../adapters/ontology-registry';
+
+export interface DesignationTypeInfo {
+  label: string;
+  color: string;
+  definition?: string;
+}
+
+const TYPE_COLORS: Record<string, string> = {
+  expression: 'bg-sky-50 text-sky-700',
+  abbreviation: 'bg-amber-50 text-amber-700',
+  symbol: 'bg-violet-50 text-violet-700',
+  letter_symbol: 'bg-violet-50 text-violet-700',
+  graphical_symbol: 'bg-violet-50 text-violet-700',
+};
+
+export function designationTypeInfo(designation: Designation): DesignationTypeInfo {
+  const type = designation.type;
+  const concept = ontology.getConcept('designationType', type);
+  return {
+    label: concept?.prefLabel ?? type,
+    color: TYPE_COLORS[type] ?? 'bg-gray-50 text-gray-700',
+    definition: concept?.definition ?? undefined,
+  };
+}
+
+export function normativeStatusInfo(status: string | null): { label: string; color: string; definition?: string } {
+  if (!status) return { label: '', color: 'bg-gray-50 text-gray-700' };
+
+  const colors: Record<string, string> = {
+    preferred: 'bg-emerald-50 text-emerald-700',
+    admitted: 'bg-amber-50 text-amber-700',
+    deprecated: 'bg-red-50 text-red-700',
+    superseded: 'bg-red-50 text-red-700',
+  };
+
+  const concept = ontology.getConcept('normativeStatus', status);
+  return {
+    label: concept?.prefLabel ?? status,
+    color: colors[status] ?? 'bg-gray-50 text-gray-700',
+    definition: concept?.definition ?? undefined,
+  };
+}
+
+export function sourceStatusInfo(status: string | null): { label: string; color: string; definition?: string } {
+  if (!status) return { label: '', color: 'badge-gray' };
+
+  const concept = ontology.getConcept('sourceStatus', status);
+  return {
+    label: concept?.prefLabel ?? status,
+    color: 'badge-gray',
+    definition: concept?.definition ?? undefined,
+  };
+}
+
+export function sourceTypeInfo(type: string | null): { label: string; color: string; definition?: string } {
+  if (!type) return { label: '', color: 'badge-gray' };
+
+  const colors: Record<string, string> = {
+    authoritative: 'badge-purple',
+    lineage: 'badge-blue',
+  };
+
+  const concept = ontology.getConcept('sourceType', type);
+  return {
+    label: concept?.prefLabel ?? type,
+    color: colors[type] ?? 'badge-gray',
+    definition: concept?.definition ?? undefined,
+  };
+}
+
+export function termTypeInfo(termType: string | null): { label: string; category: string; definition?: string } {
+  if (!termType) return { label: '', category: '' };
+  const concept = ontology.getConcept('termType', termType);
+  return {
+    label: concept?.prefLabel ?? termType,
+    category: concept?.broader ?? '',
+    definition: concept?.definition ?? undefined,
+  };
+}
+
+export function abbreviationDetails(designation: Designation): string[] {
+  if (designation.type !== 'abbreviation') return [];
+  const abbr = designation as Abbreviation;
+  const parts: string[] = [];
+  if (abbr.acronym) parts.push('acronym');
+  if (abbr.initialism) parts.push('initialism');
+  if (abbr.truncation) parts.push('truncation');
+  return parts;
+}
+
+export function grammarBadges(gi: GrammarInfo): { label: string; definition?: string }[] {
+  const badges: { label: string; definition?: string }[] = [];
+  if (gi.gender) {
+    const concept = ontology.getConcept('grammarGender', gi.gender);
+    badges.push({ label: concept?.prefLabel ?? gi.gender, definition: concept?.definition ?? undefined });
+  }
+  if (gi.number) {
+    const concept = ontology.getConcept('grammarNumber', gi.number);
+    badges.push({ label: concept?.prefLabel ?? gi.number, definition: concept?.definition ?? undefined });
+  }
+  if (gi.partOfSpeech) badges.push({ label: gi.partOfSpeech });
+  for (const pos of ['noun', 'verb', 'adj', 'adverb', 'preposition', 'participle'] as const) {
+    if (gi[pos]) badges.push({ label: pos });
+  }
+  return badges;
+}
+
+export function pronunciationLabel(p: Pronunciation): string {
+  const parts = [p.content];
+  if (p.system) parts.push(`(${p.system})`);
+  return parts.filter(Boolean).join(' ');
+}
+
+export function pronunciationTooltip(p: Pronunciation): string {
+  const parts: string[] = [];
+  if (p.language) parts.push(`Language: ${p.language}`);
+  if (p.script) parts.push(`Script: ${p.script}`);
+  if (p.country) parts.push(`Country: ${p.country}`);
+  if (p.system) parts.push(`System: ${p.system}`);
+  return parts.join(', ');
+}