@glossarist/concept-browser 0.5.0 → 0.6.0

package/src/components/ConceptDetail.vue

@@ -2,7 +2,7 @@
 import type { Concept, LocalizedConcept, Designation, Expression, ConceptSource } from 'glossarist';
 import type { Manifest, GraphEdge } from '../adapters/types';
 import { computed, ref, nextTick, watch } from 'vue';
-import { langName, langLabel } from '../utils/lang';
+import { langName, langLabel, sortLanguages } from '../utils/lang';
 import { renderMath, cleanContent } from '../utils/math';
 import type { RenderOptions } from '../utils/math';
 import { escapeAttr } from '../utils/escape';
@@ -15,11 +15,15 @@ import { useDsStyle } from '../utils/dataset-style';
 import { getFactory } from '../adapters/factory';
 import { useRenderOptions } from '../composables/use-render-options';
 import { categorizeRelationship, relationshipLabel, relationshipDefinition } from '../utils/relationship-categories';
+import { useSiteConfig } from '../config/use-site-config';
 import ConceptTimeline from './ConceptTimeline.vue';
 import ConceptRdfView from './ConceptRdfView.vue';
 import FormatDownloads from './FormatDownloads.vue';
 import NonVerbalRepDisplay from './NonVerbalRepDisplay.vue';
 import CitationDisplay from './CitationDisplay.vue';
+import { useI18n } from '../i18n';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   concept: Concept;
@@ -32,6 +36,7 @@ const props = defineProps<{
 const router = useRouter();
 const store = useVocabularyStore();
 const { getColor } = useDsStyle();
+const { config: siteConfig } = useSiteConfig();
 const factory = getFactory();
 
 const activeTab = ref<'rdf' | 'definition' | 'history'>('definition');
@@ -57,35 +62,12 @@ function copyUri() {
 }
 
 const languages = computed(() => {
-  const order = props.manifest.languageOrder;
-  const keys = props.concept.languages;
-  if (!order) {
-    return [...keys].sort((a, b) => {
-      if (a === 'eng') return -1;
-      if (a === 'eng') return 1;
-      return a.localeCompare(b);
-    });
-  }
-  const orderIndex = new Map(order.map((lang, i) => [lang, i]));
-  return [...keys].sort((a, b) => {
-    const ai = orderIndex.get(a) ?? order.length;
-    const bi = orderIndex.get(b) ?? order.length;
-    if (ai !== bi) return ai - bi;
-    return a.localeCompare(b);
-  });
+  return sortLanguages(props.concept.languages, props.manifest.languageOrder);
 });
 
-// Collapsible language sections — auto-collapse non-eng when 6+ languages
+// Collapsible language sections — expand all with content, collapse those without
 const collapsedLangs = ref(new Set<string>());
 
-function initCollapsed(langs: string[]) {
-  if (langs.length >= 6) {
-    collapsedLangs.value = new Set(langs.filter(l => l !== 'eng'));
-  }
-}
-
-watch(languages, (langs) => { initCollapsed(langs); }, { immediate: true });
-
 const engConcept = computed((): LocalizedConcept | null => {
   return props.concept.localization('eng') ?? null;
 });
@@ -104,6 +86,9 @@ const conceptDates = computed(() => props.concept.dates);
 // Managed concept sources (distinct from localized sources)
 const conceptSources = computed(() => props.concept.sources);
 
+// Managed concept tags
+const conceptTags = computed(() => props.concept.tags ?? []);
+
 // Cross-reference resolver: generates clickable links for inline refs
 
 const { ensureBibLoaded, bibResolver, figResolver } = useRenderOptions(() => props.registerId);
@@ -192,6 +177,20 @@ function hasContent(lc: LangContent): boolean {
   return !!(lc.definition || 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) {
@@ -567,7 +566,7 @@ const nonVerbalReps = computed(() => {
               <!-- Notes -->
               <div v-if="lc.notes.length" class="space-y-2">
                 <div v-for="(note, i) in lc.notes" :key="i" class="text-ink-600 text-sm leading-relaxed">
-                  <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">Note {{ i + 1 }}</span>
+                  <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>
               </div>
@@ -575,7 +574,7 @@ const nonVerbalReps = computed(() => {
               <!-- Examples -->
               <div v-if="lc.examples.length" class="space-y-2">
                 <div v-for="(ex, i) in lc.examples" :key="i" class="text-ink-600 text-sm leading-relaxed">
-                  <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">Example {{ i + 1 }}</span>
+                  <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>
               </div>
@@ -639,9 +638,9 @@ const nonVerbalReps = computed(() => {
         <div class="w-full lg:w-64 flex-shrink-0 space-y-4 mt-6 lg:mt-0">
           <!-- Relations -->
           <div v-if="outgoingEdges.length || incomingEdges.length" class="card p-5">
-            <div class="section-label">Relations</div>
+            <div class="section-label">{{ t('concept.relations') }}</div>
             <div v-if="outgoingEdges.length" class="mt-3">
-              <div class="text-xs text-ink-300 mb-2">Outgoing ({{ outgoingEdges.length }})</div>
+              <div class="text-xs text-ink-300 mb-2">{{ t('concept.outgoing') }} ({{ outgoingEdges.length }})</div>
               <div class="space-y-1 max-h-64 overflow-y-auto">
                 <button
                   v-for="edge in outgoingEdges"
@@ -658,7 +657,7 @@ const nonVerbalReps = computed(() => {
               </div>
             </div>
             <div v-if="incomingEdges.length" class="mt-3 pt-3 border-t border-ink-100/60">
-              <div class="text-xs text-ink-300 mb-2">Incoming ({{ incomingEdges.length }})</div>
+              <div class="text-xs text-ink-300 mb-2">{{ t('concept.incoming') }} ({{ incomingEdges.length }})</div>
               <div class="space-y-1 max-h-48 overflow-y-auto">
                 <button
                   v-for="edge in incomingEdges"
@@ -677,7 +676,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Domains -->
           <div v-if="conceptDomains.length" class="card p-5">
-            <div class="section-label">Domains</div>
+            <div class="section-label">{{ t('concept.domains') }}</div>
             <div class="space-y-1 mt-3">
               <div v-for="domain in conceptDomains" :key="domain.slug" class="flex items-center gap-1.5 text-sm">
                 <span class="w-2 h-1.5 rounded inline-block flex-shrink-0" style="background: #8b5cf6;"></span>
@@ -690,9 +689,17 @@ const nonVerbalReps = computed(() => {
             </div>
           </div>
 
+          <!-- Tags -->
+          <div v-if="conceptTags.length" class="card p-5">
+            <div class="section-label">{{ t('concept.tags') }}</div>
+            <div class="flex flex-wrap gap-1.5 mt-3">
+              <span v-for="tag in conceptTags" :key="tag" class="badge badge-gray text-[10px]">{{ tag }}</span>
+            </div>
+          </div>
+
           <!-- Managed concept dates -->
           <div v-if="conceptDates.length" class="card p-5">
-            <div class="section-label">Lifecycle dates</div>
+            <div class="section-label">{{ t('concept.lifecycleDates') }}</div>
             <dl class="mt-3 space-y-1.5 text-xs">
               <div v-for="(d, i) in conceptDates" :key="i" class="flex gap-2">
                 <dt class="text-ink-300 min-w-[70px]">{{ d.type }}</dt>
@@ -703,7 +710,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Managed concept sources -->
           <div v-if="conceptSources.length" class="card p-5">
-            <div class="section-label">Concept sources</div>
+            <div class="section-label">{{ t('concept.conceptSources') }}</div>
             <div class="space-y-2 mt-3">
               <div v-for="(src, i) in conceptSources" :key="i" class="text-xs">
                 <div class="flex items-center gap-1.5 flex-wrap mb-0.5">
@@ -753,7 +760,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Metadata -->
           <div class="card p-5">
-            <div class="section-label">Metadata</div>
+            <div class="section-label">{{ t('concept.metadata') }}</div>
             <dl class="space-y-2 text-xs mt-3">
               <div v-if="managedStatus">
                 <dt class="text-ink-300">Status</dt>

package/src/components/ConceptRdfView.vue

@@ -333,8 +333,8 @@ const rdfSource = computed(() => rdfFormat.value === 'turtle' ? turtleSource.val
             </button>
           </div>
           <div class="flex gap-1.5 mt-2.5">
-            <span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-blue-50 text-blue-700 border border-blue-100">gloss:Concept</span>
-            <span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-emerald-50 text-emerald-700 border border-emerald-100">skos:Concept</span>
+            <router-link to="/ontology/class/gloss-Concept" class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-blue-50 text-blue-700 border border-blue-100 hover:bg-blue-100 transition-colors">gloss:Concept</router-link>
+            <router-link to="/ontology/class/gloss-Concept" class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-emerald-50 text-emerald-700 border border-emerald-100 hover:bg-emerald-100 transition-colors">skos:Concept</router-link>
           </div>
         </div>
       </div>
@@ -356,7 +356,7 @@ const rdfSource = computed(() => rdfFormat.value === 'turtle' ? turtleSource.val
     <div v-for="(section, si) in sections" :key="si" class="card p-5">
       <div class="flex items-center gap-2 mb-3">
         <div class="w-1 h-4 rounded-full" :class="section.classId === 'gloss:Concept' ? 'bg-blue-500' : section.classId === 'gloss:LocalizedConcept' ? 'bg-emerald-500' : 'bg-amber-500'"></div>
-        <code class="text-xs font-semibold text-ink-700">{{ section.classId }}</code>
+        <router-link :to="`/ontology/class/${section.classId.replace(/:/g, '-')}`" class="text-xs font-semibold text-ink-700 hover:text-blue-600 transition-colors">{{ section.classId }}</router-link>
         <span class="text-xs text-ink-400">·</span>
         <span class="text-xs text-ink-500">{{ section.label }}</span>
       </div>

package/src/components/ConceptTimeline.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Concept, LocalizedConcept } from 'glossarist';
 import { computed } from 'vue';
-import { langName, langLabel } from '../utils/lang';
+import { langName, langLabel, sortLanguages } from '../utils/lang';
 import { entryStatusColor } from '../utils/concept-helpers';
 
 const props = defineProps<{
@@ -141,19 +141,7 @@ const languagesWithHistory = computed(() => {
       langs.push(lang);
     }
   }
-  const order = props.languageOrder;
-  if (order) {
-    const orderIndex = new Map(order.map((l, i) => [l, i]));
-    langs.sort((a, b) => {
-      const ai = orderIndex.get(a) ?? order.length;
-      const bi = orderIndex.get(b) ?? order.length;
-      if (ai !== bi) return ai - bi;
-      return a.localeCompare(b);
-    });
-  } else {
-    langs.sort();
-  }
-  return langs;
+  return sortLanguages(langs, props.languageOrder);
 });
 
 function formatDate(isoDate: string): string {

package/src/components/GraphPanel.vue

@@ -115,6 +115,7 @@ interface SimNode extends SimulationNodeDatum {
   register: string;
   conceptId: string;
   designation: string;
+  altDesignations: string[];
   hasDesignation: boolean;
   loaded: boolean;
   nodeType?: 'concept' | 'domain';
@@ -178,11 +179,15 @@ function buildSimulation(width: number, height: number) {
   const simNodes: SimNode[] = renderNodes.map(n => {
     const lang = uiStore.selectedLang;
     const desig = n.designations[lang] || Object.values(n.designations)[0] || '';
+    const alts = Object.entries(n.designations)
+      .filter(([l, t]) => l !== lang && t && t !== desig)
+      .map(([, t]) => t);
     return {
       uri: n.uri,
       register: n.register,
       conceptId: n.conceptId,
       designation: desig,
+      altDesignations: alts,
       hasDesignation: !!n.designations[lang],
       loaded: n.loaded,
       nodeType: n.nodeType,
@@ -272,6 +277,20 @@ function buildSimulation(width: number, height: number) {
       return '#636588';
     });
 
+  conceptNodes.append('text')
+    .attr('dy', -9)
+    .attr('y', 7)
+    .attr('text-anchor', 'middle')
+    .attr('font-size', '6px')
+    .attr('font-family', '"DM Sans", system-ui, sans-serif')
+    .attr('fill', '#a0a1b5')
+    .attr('pointer-events', 'none')
+    .text(d => {
+      if (labelMode.value !== 'designation') return '';
+      const alts = d.altDesignations.slice(0, 2);
+      return alts.join(' · ');
+    });
+
   const dragBehavior = drag<SVGGElement, SimNode>()
     .on('start', (event: D3DragEvent<SVGGElement, SimNode, SimNode>, d) => {
       if (!event.active) simulation?.alphaTarget(0.3).restart();

package/src/components/LanguageDetail.vue

@@ -11,6 +11,9 @@ import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { getFactory } from '../adapters/factory';
 import CitationDisplay from './CitationDisplay.vue';
+import { useI18n } from '../i18n';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   concept: Concept;
@@ -109,7 +112,7 @@ function handleContentClick(e: MouseEvent) {
 
       <!-- Designations -->
       <div v-if="designations.length > 0" class="card p-5">
-        <div class="section-label">Designations</div>
+        <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>
@@ -138,16 +141,16 @@ function handleContentClick(e: MouseEvent) {
 
       <!-- Definition -->
       <div v-if="definition" class="card p-5">
-        <div class="section-label">Definition</div>
+        <div class="section-label">{{ t('concept.definition') }}</div>
         <div class="text-ink-800 leading-relaxed mt-3" v-html="renderMath(definition, renderOpts)"></div>
       </div>
 
       <!-- Notes -->
       <div v-if="notes.length" class="card p-5">
-        <div class="section-label">Notes</div>
+        <div class="section-label">{{ t('concept.notes') }}</div>
         <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">Note {{ i + 1 }}</span>
+            <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>
         </div>
@@ -155,10 +158,10 @@ function handleContentClick(e: MouseEvent) {
 
       <!-- Examples -->
       <div v-if="examples.length" class="card p-5">
-        <div class="section-label">Examples</div>
+        <div class="section-label">{{ t('concept.examples') }}</div>
         <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">Example {{ i + 1 }}</span>
+            <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>
         </div>
@@ -187,7 +190,7 @@ function handleContentClick(e: MouseEvent) {
             <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langLabel(activeLang) }}</span>
           </div>
           <div>
-            <p class="text-sm text-ink-600 font-medium">Term only in {{ langName(activeLang) }}</p>
+            <p class="text-sm text-ink-600 font-medium">{{ t('lang.termOnlyIn') }} {{ langName(activeLang) }}</p>
             <p class="text-xs text-ink-400 mt-1 leading-relaxed">
               This concept has a registered designation in {{ langName(activeLang) }} but no definition or notes.
             </p>
@@ -198,7 +201,7 @@ function handleContentClick(e: MouseEvent) {
 
     <!-- No data for this language -->
     <div v-else class="card p-5 text-center">
-      <p class="text-sm text-ink-400">No data available for {{ langName(activeLang) }}.</p>
+      <p class="text-sm text-ink-400">{{ t('concept.noData') }}</p>
     </div>
   </div>
 </template>

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

@@ -2,8 +2,21 @@ import { ref, computed } from 'vue';
 import {
   getClass,
   getClassTree,
+  getAllShapes,
+  getObjectProperties,
+  getDatatypeProperties,
+  getAnnotationProperties,
+  getOntology,
+  getStats,
   type OwlClass,
+  type OwlShape,
+  type OwlProperty,
+  type AnnotationProperty,
+  type OwlOntology,
+  ENTITY_TYPE_META,
+  type EntityType,
 } from '../adapters/ontology-schema';
+import taxonomyData from '../data/taxonomies.json';
 
 export function slugToCompact(slug: string): string {
   return slug.replace(/-/g, ':');
@@ -15,6 +28,57 @@ export function compactToSlug(compact: string): string {
 
 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();
+const datatypeProperties = getDatatypeProperties();
+const annotationProperties = getAnnotationProperties();
+const ontology = getOntology();
+const stats = getStats();
+
 const taxonomyKeys = [
   'conceptStatus', 'entryStatus', 'normativeStatus', 'sourceType', 'sourceStatus',
   'relationshipType', 'designationType', 'termType', 'grammarGender', 'grammarNumber',
@@ -33,24 +97,53 @@ const taxonomyLabels: Record<string, string> = {
   grammarNumber: 'Grammar Number',
 };
 
-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;
+interface IndividualGroup {
+  key: string;
+  label: string;
+  concepts: { id: string; prefLabel: string }[];
 }
 
-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);
-}
+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 };
+  });
+});
 
-function hasChildren(cls: OwlClass): boolean {
-  return cls.children.length > 0;
+const totalIndividuals = computed(() =>
+  groupedIndividuals.value.reduce((sum, g) => sum + g.concepts.length, 0),
+);
+
+const valuesToTaxonomy: Record<string, string> = {
+  'gloss:status': 'conceptStatus',
+  'gloss:entstatus': 'entryStatus',
+  'gloss:norm': 'normativeStatus',
+  'gloss:sourceType': 'sourceType',
+  'gloss:sourceStatus': 'sourceStatus',
+  'gloss:rel': 'relationshipType',
+  'gloss:desigType': 'designationType',
+  'gloss:termType': 'termType',
+  'gloss:gender': 'grammarGender',
+  'gloss:number': 'grammarNumber',
+};
+
+function taxonomyKeyForValuesFrom(valuesFrom: string | null): string | null {
+  if (!valuesFrom) return null;
+  return valuesToTaxonomy[valuesFrom] ?? null;
 }
 
-const treeRoots = getClassTree();
+function getShapesForTaxonomy(taxonomyKey: string): OwlShape[] {
+  const targetScheme = Object.entries(valuesToTaxonomy).find(([, v]) => v === taxonomyKey)?.[0];
+  if (!targetScheme) return [];
+  return allShapes.filter(s =>
+    s.constraints.some(c => c.valuesFrom === targetScheme),
+  );
+}
 
 const allNavItems = computed(() => {
   const items: { id: string; label: string; depth: number }[] = [];
@@ -66,15 +159,92 @@ const allNavItems = computed(() => {
   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));
+    }
+  }
+  walkAll(treeRoots);
+
+  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,
+  };
+});
+
 export function useOntologyNav() {
   return {
     expandedClasses,
+    collapsedSections,
+    searchQuery,
     taxonomyKeys,
     taxonomyLabels,
     treeRoots,
+    allShapes,
+    objectProperties,
+    datatypeProperties,
+    annotationProperties,
+    ontology,
+    stats,
+    groupedIndividuals,
+    totalIndividuals,
     allNavItems,
+    searchResults,
+    valuesToTaxonomy,
+    taxonomyKeyForValuesFrom,
+    getShapesForTaxonomy,
     toggleExpand,
+    toggleSection,
+    expandAllSections,
+    collapseAllSections,
     childClasses,
     hasChildren,
+    ENTITY_TYPE_META,
   };
 }

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

@@ -14,7 +14,7 @@ const bibCache = new Map<string, Record<string, BibEntry>>();
 async function loadBibliography(registerId: string): Promise<Record<string, BibEntry> | null> {
   if (bibCache.has(registerId)) return bibCache.get(registerId)!;
   try {
-    const resp = await fetch(`/data/${registerId}/bibliography.json`);
+    const resp = await fetch(`${import.meta.env.BASE_URL}data/${registerId}/bibliography.json`);
     if (!resp.ok) return null;
     const data = await resp.json();
     bibCache.set(registerId, data);
@@ -47,7 +47,7 @@ export function useRenderOptions(registerId: () => string) {
 
   const figResolver: FigResolver = (figId) => {
     const id = registerId();
-    const imgSrc = `/data/${id}/images/${figId}.png`;
+    const imgSrc = `${import.meta.env.BASE_URL}data/${id}/images/${figId}.png`;
     return `<span class="fig-ref"><a href="${escapeAttr(imgSrc)}" target="_blank" rel="noopener">${escapeAttr(figId)}</a></span>`;
   };
 

package/src/config/types.ts

@@ -152,6 +152,7 @@ export interface SiteConfig {
   defaults: {
     language?: string;
     languageOrder?: string[];
+    mainLanguages?: string[];
   };
   email?: string;
   pages?: PageConfig[];

package/src/config/use-site-config.ts

@@ -10,6 +10,7 @@ export interface RuntimeSiteConfig {
   description?: string;
   datasets: string[];
   defaultDataset?: string;
+  uiLanguages?: { code: string; label: string }[];
   branding?: {
     primaryColor?: string;
     darkColor?: string;
@@ -27,7 +28,7 @@ export interface RuntimeSiteConfig {
   social?: Record<string, string>;
   nav?: { label: string; route: string }[];
   footerNav?: { label: string; route: string }[];
-  defaults?: { language?: string; languageOrder?: string[] };
+  defaults?: { language?: string; languageOrder?: string[]; mainLanguages?: string[] };
   email?: string;
   pages?: PageConfig[];
   contributors?: { name: string; role?: string; organization?: string; url?: string; email?: string }[];
@@ -94,7 +95,7 @@ function applyBranding(config: RuntimeSiteConfig) {
 async function loadConfig(): Promise<RuntimeSiteConfig | null> {
   if (loaded.value) return siteConfig.value;
   try {
-    const resp = await fetch('/site-config.json');
+    const resp = await fetch(`${import.meta.env.BASE_URL}site-config.json`);
     if (resp.ok) {
       siteConfig.value = await resp.json();
       if (siteConfig.value) applyBranding(siteConfig.value);