@glossarist/concept-browser 0.7.34 → 0.7.37

package/src/components/ConceptDetail.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { Concept, LocalizedConcept, Designation, ConceptSource } from 'glossarist';
+import type { Concept, LocalizedConcept, Designation } from 'glossarist';
 import type { Manifest, GraphEdge } from '../adapters/types';
 import { computed, ref, nextTick, watch } from 'vue';
-import { langName, langLabel, sortLanguages } from '../utils/lang';
-import { renderMath, cleanContent } from '../utils/math';
-import type { RenderOptions } from '../utils/math';
+import { langName } from '../utils/lang';
+import { renderContent } from '../utils/content-renderer';
+import type { RenderOptions } from '../utils/content-renderer';
 import { escapeAttr } from '../utils/escape';
 import { entryStatusColor, conceptStatusColor, conceptStatusLabel, conceptStatusDefinition, entryStatusLabel, entryStatusDefinition, getPreferredTerm } from '../utils/concept-helpers';
 import { sourceTypeInfo, sourceStatusInfo } from '../utils/designation-registry';
-import { conceptUri, getAnnotations } from '../adapters/model-bridge';
+import { conceptUri } from '../adapters/model-bridge';
 import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { getFactory } from '../adapters/factory';
 import { useRenderOptions } from '../composables/use-render-options';
 import { useConceptEdges } from '../composables/use-concept-edges';
-import { useConceptContent, type LangContent } from '../composables/use-concept-content';
+import { useConceptContent } from '../composables/use-concept-content';
 import { relationshipLabel, INVERSE_RELATIONSHIPS } from '../utils/relationship-categories';
 import { slugify } from '../utils/slugify';
 import { useSiteConfig } from '../config/use-site-config';
@@ -83,27 +83,12 @@ function copyUri() {
   });
 }
 
-const languages = computed(() => {
-  const sorted = sortLanguages(props.concept.languages, props.manifest.languageOrder);
-  // Put current UI locale first
-  const current = locale.value;
-  const idx = sorted.indexOf(current);
-  if (idx > 0) {
-    sorted.splice(idx, 1);
-    sorted.unshift(current);
-  }
-  return sorted;
-});
-
-// Collapsible language sections — expand all with content, collapse those without
-const collapsedLangs = ref(new Set<string>());
-
 const engConcept = computed((): LocalizedConcept | null => {
   return props.concept.localization('eng') ?? null;
 });
 
 const primaryTerm = computed(() => getPreferredTerm(engConcept.value, conceptId.value));
-const renderedPrimaryTerm = computed(() => renderMath(primaryTerm.value));
+const renderedPrimaryTerm = computed(() => renderContent(primaryTerm.value));
 
 const managedStatus = computed(() => props.concept.status);
 
@@ -115,12 +100,10 @@ const conceptSources = computed(() => props.concept.sources);
 
 const conceptTags = computed(() => props.concept.tags ?? []);
 
-// Cross-reference resolver: generates clickable links for inline refs
-
 const factory = getFactory();
 const { ensureBibLoaded, bibResolver, figResolver } = useRenderOptions(() => props.registerId);
 
-const renderOpts: RenderOptions = {
+const renderOpts = computed<RenderOptions>(() => ({
   xrefResolver: (uri, term) => {
     const resolution = factory.resolve(uri, props.registerId);
     if (resolution.type === 'internal') {
@@ -135,15 +118,16 @@ const renderOpts: RenderOptions = {
     return escapeAttr(term);
   },
   conceptRefResolver: (conceptId, term) => {
-    return `<a href="#" class="xref-link" data-register="${escapeAttr(props.registerId)}" data-concept="${escapeAttr(conceptId)}">${escapeAttr(term)}</a>`;
+    const adapter = factory.getAdapter(props.registerId);
+    const resolvedId = adapter?.lookupByDesignation(conceptId) ?? conceptId;
+    return `<a href="#" class="xref-link" data-register="${escapeAttr(props.registerId)}" data-concept="${escapeAttr(resolvedId)}">${escapeAttr(term)}</a>`;
   },
   bibResolver,
   figResolver,
-};
+}));
 
 watch(() => props.registerId, () => { ensureBibLoaded(); }, { immediate: true });
 
-// Handle clicks on cross-reference links via event delegation
 function handleContentClick(e: MouseEvent) {
   const target = (e.target as HTMLElement).closest('.xref-link') as HTMLElement | null;
   if (!target) return;
@@ -155,86 +139,18 @@ function handleContentClick(e: MouseEvent) {
   }
 }
 
-// LangContent type is imported from the composable
-
-const allLangContent = computed(() => {
-  const result: LangContent[] = [];
-  for (const lang of languages.value) {
-    const lc = props.concept.localization(lang);
-    if (!lc) continue;
-
-    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);
-
-    result.push({
-      lang,
-      lc,
-      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,
-      renderedExamples: examples.map(e => renderMath(e, renderOpts)),
-      sources: lc.sources,
-      designations: lc.terms,
-      renderedDesignations: new Map(lc.terms.map(d => [d.designation, renderMath(d.designation)])),
-      entryStatus: lc.entryStatus ?? '',
-      classification: lc.classification,
-      reviewType: lc.reviewType,
-      release: lc.release,
-      lineageSourceSimilarity: lc.lineageSourceSimilarity,
-      lcScript: lc.script,
-      lcSystem: lc.system,
-    });
-  }
-  return result;
-});
-
-const langContentMap = computed(() => {
-  const map = new Map<string, LangContent>();
-  for (const lc of allLangContent.value) map.set(lc.lang, lc);
-  return map;
-});
-
-function hasContent(lc: LangContent): boolean {
-  return !!(lc.definition || lc.annotations.length || lc.notes.length || lc.examples.length || lc.sources.length);
-}
-
-function initCollapsed() {
-  const mainLangs = siteConfig.value?.defaults?.mainLanguages || [];
-  const mainSet = new Set(mainLangs.length ? mainLangs : ['eng']);
-  const collapsed = new Set<string>();
-  for (const lc of allLangContent.value) {
-    if (!hasContent(lc) && !mainSet.has(lc.lang)) {
-      collapsed.add(lc.lang);
-    }
-  }
-  collapsedLangs.value = collapsed;
-}
-
-watch(languages, () => { initCollapsed(); }, { immediate: true });
-
-const allCollapsed = computed(() => collapsedLangs.value.size === allLangContent.value.length);
-
-function toggleLang(lang: string) {
-  const s = new Set(collapsedLangs.value);
-  if (s.has(lang)) s.delete(lang); else s.add(lang);
-  collapsedLangs.value = s;
-}
-
-function toggleAll() {
-  if (allCollapsed.value) {
-    collapsedLangs.value = new Set();
-  } else {
-    collapsedLangs.value = new Set(allLangContent.value.map(lc => lc.lang));
-  }
-}
+const {
+  languages,
+  allLangContent,
+  langContentMap,
+  hasContent,
+  collapsedLangs,
+  allCollapsed,
+  toggleLang,
+  toggleAll,
+  plainTruncate,
+  orderedDesignations,
+} = useConceptContent(conceptComputed, manifestComputed, renderOpts);
 
 function scrollToLang(lang: string) {
   if (collapsedLangs.value.has(lang)) {
@@ -263,14 +179,6 @@ function getDesignationsForLang(lang: string): Designation[] {
   return lc?.terms ?? [];
 }
 
-function orderedDesignations(lang: string): Designation[] {
-  const desigs = getDesignationsForLang(lang);
-  const preferred = desigs.filter(d => d.normativeStatus === 'preferred');
-  const admitted = desigs.filter(d => d.normativeStatus === 'admitted' || d.normativeStatus === 'deprecated');
-  const rest = desigs.filter(d => d.normativeStatus !== 'preferred' && d.normativeStatus !== 'admitted' && d.normativeStatus !== 'deprecated');
-  return [...preferred, ...admitted, ...rest];
-}
-
 function hasDefinition(lang: string): boolean {
   const lc = props.concept.localization(lang);
   if (!lc) return false;
@@ -282,16 +190,9 @@ function goAdjacent(id: string) {
   window.scrollTo({ top: 0, behavior: 'smooth' });
 }
 
-function plainTruncate(html: string, max: number = 120): string {
-  const text = cleanContent(html).replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim();
-  return text.length <= max ? text : text.slice(0, max).trimEnd() + '…';
-}
-
-// Domain rendering: merge ConceptReference domains and per-localization domain strings
 const conceptDomains = computed(() => {
   const domainMap = new Map<string, { slug: string; label: string; langs: string[]; conceptId?: string }>();
 
-  // Managed concept level ConceptReference domains (authoritative)
   for (const ref of conceptRefDomains.value) {
     const id = ref.conceptId ?? '';
     const label = id || ref.urn || '';
@@ -301,7 +202,6 @@ const conceptDomains = computed(() => {
     }
   }
 
-  // Per-localization domain strings
   for (const lang of props.concept.languages) {
     const lc = props.concept.localization(lang);
     const domain = lc?.domain;
@@ -318,7 +218,6 @@ const conceptDomains = computed(() => {
   return [...domainMap.values()].sort((a, b) => b.langs.length - a.langs.length);
 });
 
-// Non-verbal reps: aggregate across all localizations
 const nonVerbalReps = computed(() => {
   const reps: typeof import('glossarist').NonVerbRep.prototype[] = [];
   for (const lang of props.concept.languages) {
@@ -329,7 +228,6 @@ const nonVerbalReps = computed(() => {
   }
   return reps;
 });
-
 </script>
 
 <template>

package/src/components/LanguageDetail.vue

@@ -2,8 +2,8 @@
 import type { Concept, LocalizedConcept, Designation, Expression, Abbreviation as AbbreviationType } from 'glossarist';
 import { computed } from 'vue';
 import { langName, langLabel } from '../utils/lang';
-import { renderMath } from '../utils/math';
-import type { RenderOptions } from '../utils/math';
+import { renderContent } from '../utils/content-renderer';
+import type { RenderOptions } from '../utils/content-renderer';
 import { escapeAttr } from '../utils/escape';
 import { entryStatusColor } from '../utils/concept-helpers';
 import { designationTypeInfo, normativeStatusInfo, grammarBadges, pronunciationLabel, pronunciationTooltip } from '../utils/designation-registry';
@@ -115,7 +115,7 @@ function handleContentClick(e: MouseEvent) {
         <div class="section-label">{{ t('concept.designations') }}</div>
         <div class="space-y-2 mt-3">
           <div v-for="(d, i) in designations" :key="i" class="flex items-center gap-2 flex-wrap">
-            <span class="font-medium text-ink-800 text-lg" v-html="renderMath(d.designation)"></span>
+            <span class="font-medium text-ink-800 text-lg" v-html="renderContent(d.designation)"></span>
             <span class="badge text-[10px]" :class="designationTypeInfo(d).color">{{ designationTypeInfo(d).label }}</span>
             <span class="badge text-[10px]" :class="normativeStatusInfo(d.normativeStatus).color">{{ normativeStatusInfo(d.normativeStatus).label }}</span>
             <template v-if="d.type === 'expression' && (d as Expression).grammarInfo?.length">
@@ -142,7 +142,7 @@ function handleContentClick(e: MouseEvent) {
       <!-- Definition -->
       <div v-if="definition" class="card p-5">
         <div class="section-label">{{ t('concept.definition') }}</div>
-        <div class="text-ink-800 leading-relaxed mt-3" v-html="renderMath(definition, renderOpts)"></div>
+        <div class="text-ink-800 leading-relaxed mt-3" v-html="renderContent(definition, renderOpts)"></div>
       </div>
 
       <!-- Notes -->
@@ -151,7 +151,7 @@ function handleContentClick(e: MouseEvent) {
         <div class="space-y-3 mt-3">
           <div v-for="(note, i) in notes" :key="i" class="text-ink-600 text-sm leading-relaxed">
             <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">{{ t('concept.note') }} {{ i + 1 }}</span>
-            <div class="mt-1" v-html="renderMath(note, renderOpts)"></div>
+            <div class="mt-1" v-html="renderContent(note, renderOpts)"></div>
           </div>
         </div>
       </div>
@@ -162,7 +162,7 @@ function handleContentClick(e: MouseEvent) {
         <div class="space-y-3 mt-3">
           <div v-for="(ex, i) in examples" :key="i" class="text-ink-600 text-sm leading-relaxed">
             <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">{{ t('concept.example') }} {{ i + 1 }}</span>
-            <div class="mt-1" v-html="renderMath(ex, renderOpts)"></div>
+            <div class="mt-1" v-html="renderContent(ex, renderOpts)"></div>
           </div>
         </div>
       </div>

package/src/composables/use-concept-content.ts

@@ -1,8 +1,8 @@
 import { computed, ref, watch, type ComputedRef } from 'vue';
 import type { Concept, LocalizedConcept, ConceptSource, Designation } from 'glossarist';
 import type { Manifest } from '../adapters/types';
-import type { RenderOptions } from '../utils/math';
-import { renderMath, cleanContent } from '../utils/math';
+import type { RenderOptions } from '../utils/content-renderer';
+import { renderContent, cleanContent } from '../utils/content-renderer';
 import { getAnnotations } from '../adapters/model-bridge';
 import { getPreferredTerm, entryStatusColor, entryStatusLabel, entryStatusDefinition } from '../utils/concept-helpers';
 import { sortLanguages } from '../utils/lang';
@@ -68,18 +68,18 @@ export function useConceptContent(
       result.push({
         lang,
         lc,
-        renderedTerm: renderMath(getPreferredTerm(lc, '')),
+        renderedTerm: renderContent(getPreferredTerm(lc, '')),
         definition,
-        renderedDefinition: renderMath(definition, opts),
+        renderedDefinition: renderContent(definition, opts),
         annotations,
-        renderedAnnotations: annotations.map((a: string) => renderMath(a, opts)),
+        renderedAnnotations: annotations.map((a: string) => renderContent(a, opts)),
         notes,
-        renderedNotes: notes.map(n => renderMath(n, opts)),
+        renderedNotes: notes.map(n => renderContent(n, opts)),
         examples,
-        renderedExamples: examples.map(e => renderMath(e, opts)),
+        renderedExamples: examples.map(e => renderContent(e, opts)),
         sources: lc.sources,
         designations: lc.terms,
-        renderedDesignations: new Map(lc.terms.map(d => [d.designation, renderMath(d.designation)])),
+        renderedDesignations: new Map(lc.terms.map(d => [d.designation, renderContent(d.designation)])),
         entryStatus: lc.entryStatus ?? '',
         classification: lc.classification,
         reviewType: lc.reviewType,

package/src/composables/use-ontology-nav.ts

@@ -26,51 +26,6 @@ export function compactToSlug(compact: string): string {
   return compact.replace(/:/g, '-');
 }
 
-const expandedClasses = ref(new Set<string>(['gloss:Designation']));
-
-const collapsedSections = ref(new Set<string>([
-  'objectProperty',
-  'datatypeProperty',
-  'shape',
-  'taxonomy',
-  'namedIndividual',
-  'annotationProperty',
-]));
-
-const searchQuery = ref('');
-
-function toggleExpand(cls: OwlClass) {
-  const s = new Set(expandedClasses.value);
-  if (s.has(cls.compact)) s.delete(cls.compact);
-  else s.add(cls.compact);
-  expandedClasses.value = s;
-}
-
-function toggleSection(key: string) {
-  const s = new Set(collapsedSections.value);
-  if (s.has(key)) s.delete(key);
-  else s.add(key);
-  collapsedSections.value = s;
-}
-
-function expandAllSections() {
-  collapsedSections.value = new Set();
-}
-
-function collapseAllSections() {
-  collapsedSections.value = new Set(['objectProperty', 'datatypeProperty', 'shape', 'taxonomy', 'class', 'namedIndividual', 'annotationProperty']);
-}
-
-function childClasses(parentId: string): OwlClass[] {
-  const cls = getClass(parentId);
-  if (!cls) return [];
-  return cls.children.map(id => getClass(id)).filter((c): c is OwlClass => !!c);
-}
-
-function hasChildren(cls: OwlClass): boolean {
-  return cls.children.length > 0;
-}
-
 const treeRoots = getClassTree();
 const allShapes = getAllShapes();
 const objectProperties = getObjectProperties();
@@ -97,28 +52,6 @@ const taxonomyLabels: Record<string, string> = {
   grammarNumber: 'Grammar Number',
 };
 
-interface IndividualGroup {
-  key: string;
-  label: string;
-  concepts: { id: string; prefLabel: string }[];
-}
-
-const groupedIndividuals = computed<IndividualGroup[]>(() => {
-  return taxonomyKeys.map(key => {
-    const tax = (taxonomyData as Record<string, any>)[key];
-    if (!tax) return { key, label: taxonomyLabels[key] || key, concepts: [] };
-    const concepts = Object.values(tax.concepts as Record<string, any>).map((c: any) => ({
-      id: c.id,
-      prefLabel: c.prefLabel,
-    }));
-    return { key, label: tax.schemeLabel || taxonomyLabels[key] || key, concepts };
-  });
-});
-
-const totalIndividuals = computed(() =>
-  groupedIndividuals.value.reduce((sum, g) => sum + g.concepts.length, 0),
-);
-
 const valuesToTaxonomy: Record<string, string> = {
   'gloss:status': 'conceptStatus',
   'gloss:entstatus': 'entryStatus',
@@ -132,6 +65,20 @@ const valuesToTaxonomy: Record<string, string> = {
   'gloss:number': 'grammarNumber',
 };
 
+function childClasses(parentId: string): OwlClass[] {
+  const cls = getClass(parentId);
+  if (!cls) return [];
+  return cls.children.map(id => getClass(id)).filter((c): c is OwlClass => !!c);
+}
+
+function hasChildren(cls: OwlClass): boolean {
+  return cls.children.length > 0;
+}
+
+function matchesSearch(text: string, query: string): boolean {
+  return text.toLowerCase().includes(query.toLowerCase());
+}
+
 function taxonomyKeyForValuesFrom(valuesFrom: string | null): string | null {
   if (!valuesFrom) return null;
   return valuesToTaxonomy[valuesFrom] ?? null;
@@ -145,80 +92,126 @@ function getShapesForTaxonomy(taxonomyKey: string): OwlShape[] {
   );
 }
 
-const allNavItems = computed(() => {
-  const items: { id: string; label: string; depth: number }[] = [];
-  function walk(classes: OwlClass[], depth: number) {
-    for (const cls of classes) {
-      items.push({ id: cls.compact, label: cls.label, depth });
-      if (expandedClasses.value.has(cls.compact)) {
-        walk(childClasses(cls.compact), depth + 1);
-      }
-    }
+export function useOntologyNav() {
+  const expandedClasses = ref(new Set<string>(['gloss:Designation']));
+
+  const collapsedSections = ref(new Set<string>([
+    'objectProperty',
+    'datatypeProperty',
+    'shape',
+    'taxonomy',
+    'namedIndividual',
+    'annotationProperty',
+  ]));
+
+  const searchQuery = ref('');
+
+  function toggleExpand(cls: OwlClass) {
+    const s = new Set(expandedClasses.value);
+    if (s.has(cls.compact)) s.delete(cls.compact);
+    else s.add(cls.compact);
+    expandedClasses.value = s;
   }
-  walk(treeRoots, 0);
-  return items;
-});
-
-function matchesSearch(text: string, query: string): boolean {
-  return text.toLowerCase().includes(query.toLowerCase());
-}
 
-const searchResults = computed(() => {
-  const q = searchQuery.value.trim();
-  if (!q) return null;
-
-  const matchedClasses: OwlClass[] = [];
-  const matchedObjectProps: OwlProperty[] = [];
-  const matchedDatatypeProps: OwlProperty[] = [];
-  const matchedShapes: OwlShape[] = [];
-  const matchedIndividuals: { group: string; id: string; prefLabel: string }[] = [];
-  const matchedAnnotationProps: AnnotationProperty[] = [];
-
-  // Walk all classes (tree + leaves)
-  function walkAll(classes: OwlClass[]) {
-    for (const cls of classes) {
-      if (matchesSearch(cls.label, q) || matchesSearch(cls.compact, q)) {
-        matchedClasses.push(cls);
-      }
-      walkAll(childClasses(cls.compact));
-    }
+  function toggleSection(key: string) {
+    const s = new Set(collapsedSections.value);
+    if (s.has(key)) s.delete(key);
+    else s.add(key);
+    collapsedSections.value = s;
   }
-  walkAll(treeRoots);
 
-  for (const p of objectProperties) {
-    if (matchesSearch(p.label, q) || matchesSearch(p.compact, q)) matchedObjectProps.push(p);
+  function expandAllSections() {
+    collapsedSections.value = new Set();
   }
-  for (const p of datatypeProperties) {
-    if (matchesSearch(p.label, q) || matchesSearch(p.compact, q)) matchedDatatypeProps.push(p);
-  }
-  for (const s of allShapes) {
-    if (matchesSearch(s.label, q) || matchesSearch(s.compact, q)) matchedShapes.push(s);
+
+  function collapseAllSections() {
+    collapsedSections.value = new Set(['objectProperty', 'datatypeProperty', 'shape', 'taxonomy', 'class', 'namedIndividual', 'annotationProperty']);
   }
-  for (const g of groupedIndividuals.value) {
-    for (const c of g.concepts) {
-      if (matchesSearch(c.prefLabel, q) || matchesSearch(c.id, q)) {
-        matchedIndividuals.push({ group: g.key, id: c.id, prefLabel: c.prefLabel });
+
+  const allNavItems = computed(() => {
+    const items: { id: string; label: string; depth: number }[] = [];
+    function walk(classes: OwlClass[], depth: number) {
+      for (const cls of classes) {
+        items.push({ id: cls.compact, label: cls.label, depth });
+        if (expandedClasses.value.has(cls.compact)) {
+          walk(childClasses(cls.compact), depth + 1);
+        }
       }
     }
-  }
-  for (const ap of annotationProperties) {
-    if (matchesSearch(ap.label, q) || matchesSearch(ap.compact, q)) matchedAnnotationProps.push(ap);
-  }
+    walk(treeRoots, 0);
+    return items;
+  });
 
-  const total = matchedClasses.length + matchedObjectProps.length + matchedDatatypeProps.length + matchedShapes.length + matchedIndividuals.length + matchedAnnotationProps.length;
+  const searchResults = computed(() => {
+    const q = searchQuery.value.trim();
+    if (!q) return null;
+
+    const matchedClasses: OwlClass[] = [];
+    const matchedObjectProps: OwlProperty[] = [];
+    const matchedDatatypeProps: OwlProperty[] = [];
+    const matchedShapes: OwlShape[] = [];
+    const matchedIndividuals: { group: string; id: string; prefLabel: string }[] = [];
+    const matchedAnnotationProps: AnnotationProperty[] = [];
+
+    function walkAll(classes: OwlClass[]) {
+      for (const cls of classes) {
+        if (matchesSearch(cls.label, q) || matchesSearch(cls.compact, q)) {
+          matchedClasses.push(cls);
+        }
+        walkAll(childClasses(cls.compact));
+      }
+    }
+    walkAll(treeRoots);
 
-  return {
-    total,
-    classes: matchedClasses,
-    objectProperties: matchedObjectProps,
-    datatypeProperties: matchedDatatypeProps,
-    shapes: matchedShapes,
-    individuals: matchedIndividuals,
-    annotationProperties: matchedAnnotationProps,
-  };
-});
+    for (const p of objectProperties) {
+      if (matchesSearch(p.label, q) || matchesSearch(p.compact, q)) matchedObjectProps.push(p);
+    }
+    for (const p of datatypeProperties) {
+      if (matchesSearch(p.label, q) || matchesSearch(p.compact, q)) matchedDatatypeProps.push(p);
+    }
+    for (const s of allShapes) {
+      if (matchesSearch(s.label, q) || matchesSearch(s.compact, q)) matchedShapes.push(s);
+    }
+    for (const g of groupedIndividuals.value) {
+      for (const c of g.concepts) {
+        if (matchesSearch(c.prefLabel, q) || matchesSearch(c.id, q)) {
+          matchedIndividuals.push({ group: g.key, id: c.id, prefLabel: c.prefLabel });
+        }
+      }
+    }
+    for (const ap of annotationProperties) {
+      if (matchesSearch(ap.label, q) || matchesSearch(ap.compact, q)) matchedAnnotationProps.push(ap);
+    }
+
+    const total = matchedClasses.length + matchedObjectProps.length + matchedDatatypeProps.length + matchedShapes.length + matchedIndividuals.length + matchedAnnotationProps.length;
+
+    return {
+      total,
+      classes: matchedClasses,
+      objectProperties: matchedObjectProps,
+      datatypeProperties: matchedDatatypeProps,
+      shapes: matchedShapes,
+      individuals: matchedIndividuals,
+      annotationProperties: matchedAnnotationProps,
+    };
+  });
+
+  const groupedIndividuals = computed<IndividualGroup[]>(() => {
+    return taxonomyKeys.map(key => {
+      const tax = (taxonomyData as Record<string, any>)[key];
+      if (!tax) return { key, label: taxonomyLabels[key] || key, concepts: [] };
+      const concepts = Object.values(tax.concepts as Record<string, any>).map((c: any) => ({
+        id: c.id,
+        prefLabel: c.prefLabel,
+      }));
+      return { key, label: tax.schemeLabel || taxonomyLabels[key] || key, concepts };
+    });
+  });
+
+  const totalIndividuals = computed(() =>
+    groupedIndividuals.value.reduce((sum, g) => sum + g.concepts.length, 0),
+  );
 
-export function useOntologyNav() {
   return {
     expandedClasses,
     collapsedSections,
@@ -248,3 +241,9 @@ export function useOntologyNav() {
     ENTITY_TYPE_META,
   };
 }
+
+interface IndividualGroup {
+  key: string;
+  label: string;
+  concepts: { id: string; prefLabel: string }[];
+}

package/src/composables/use-render-options.ts

@@ -1,5 +1,5 @@
 import { ref, watch } from 'vue';
-import type { RenderOptions, BibResolver, FigResolver } from '../utils/math';
+import type { RenderOptions, BibResolver, FigResolver } from '../utils/content-renderer';
 import { getFactory } from '../adapters/factory';
 import { escapeAttr } from '../utils/escape';