@glossarist/concept-browser 0.7.32 → 0.7.34

package/src/components/CitationDisplay.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Citation } from 'glossarist';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { getFactory } from '../adapters/factory';
 import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
@@ -14,16 +14,6 @@ const router = useRouter();
 const store = useVocabularyStore();
 const factory = getFactory();
 
-function formatRef(c: Citation): string {
-  const ref = c.ref;
-  if (!ref) return '';
-  const parts: string[] = [];
-  if (ref.source) parts.push(ref.source);
-  if (ref.id) parts.push(ref.id);
-  if (ref.version) parts.push(`(${ref.version})`);
-  return parts.join(' ');
-}
-
 function resolveCitation(): { registerId: string; conceptId: string } | null {
   const ref = props.citation.ref;
   const locality = props.citation.locality;
@@ -36,6 +26,9 @@ function resolveCitation(): { registerId: string; conceptId: string } | null {
 }
 
 const resolvedTarget = computed(() => resolveCitation());
+const isCrossDataset = computed(() =>
+  resolvedTarget.value != null && resolvedTarget.value.registerId !== props.registerId,
+);
 
 async function navigateToCitation() {
   if (!resolvedTarget.value) return;
@@ -43,18 +36,80 @@ async function navigateToCitation() {
   await store.viewConcept(registerId, conceptId);
   router.push({ name: 'concept', params: { registerId, conceptId } });
 }
+
+// --- Hover preview ---
+const triggerEl = ref<HTMLElement | null>(null);
+const preview = ref<{ designation: string; definition: string } | null>(null);
+const previewVisible = ref(false);
+let previewTimer: ReturnType<typeof setTimeout> | null = null;
+
+const previewStyle = computed(() => {
+  if (!triggerEl.value) return {};
+  const rect = triggerEl.value.getBoundingClientRect();
+  return {
+    top: `${rect.bottom + 6}px`,
+    left: `${Math.max(8, Math.min(rect.left, window.innerWidth - 336))}px`,
+  };
+});
+
+async function loadPreview() {
+  if (!resolvedTarget.value || preview.value) return;
+  const { registerId, conceptId } = resolvedTarget.value;
+  const adapter = factory.getAdapter(registerId);
+  if (!adapter) return;
+
+  try {
+    const entry = adapter.getIndexEntry(conceptId);
+    if (entry && !preview.value) {
+      preview.value = {
+        designation: entry.designations?.eng || entry.eng || conceptId,
+        definition: '',
+      };
+    }
+
+    const concept = await adapter.fetchConcept(conceptId);
+    const lc = concept.localization('eng');
+    const def = lc?.definitions?.[0]?.content || concept.definition('eng');
+    const term = lc?.terms?.[0]?.designation || concept.primaryDesignation('eng');
+    preview.value = {
+      designation: term || entry?.designations?.eng || conceptId,
+      definition: typeof def === 'string' ? def.slice(0, 200) : '',
+    };
+  } catch {
+    // Concept not available — preview stays with index data or empty
+  }
+}
+
+function schedulePreview(e: MouseEvent) {
+  triggerEl.value = e.currentTarget as HTMLElement;
+  previewVisible.value = true;
+  previewTimer = setTimeout(loadPreview, 400);
+}
+
+function hidePreview() {
+  if (previewTimer) { clearTimeout(previewTimer); previewTimer = null; }
+  previewVisible.value = false;
+}
 </script>
 
 <template>
-  <span class="inline">
+  <span class="inline" @mouseleave="hidePreview">
     <template v-if="citation.ref">
-      <button v-if="resolvedTarget" @click="navigateToCitation" class="concept-link font-medium">{{ citation.ref.source }}</button>
+      <button
+        v-if="resolvedTarget"
+        @click="navigateToCitation"
+        @mouseenter="schedulePreview"
+        class="concept-link font-medium inline-flex items-center gap-0.5"
+      >
+        {{ citation.ref.source }}
+        <span v-if="isCrossDataset" class="text-[10px] opacity-60 leading-none">↗</span>
+      </button>
       <span v-else-if="citation.ref.source" class="font-medium">{{ citation.ref.source }}</span>
       <span v-if="citation.ref.id"> {{ citation.ref.id }}</span>
       <span v-if="citation.ref.version" class="text-ink-400"> ({{ citation.ref.version }})</span>
     </template>
     <template v-if="citation.locality">
-      <button v-if="resolvedTarget" @click="navigateToCitation" class="concept-link">
+      <button v-if="resolvedTarget" @click="navigateToCitation" @mouseenter="schedulePreview" class="concept-link">
         <span v-if="citation.locality.type" class="text-ink-400">, {{ citation.locality.type }}</span>
         <span v-if="citation.locality.referenceFrom" class="text-ink-400">
           {{ citation.locality.referenceTo ? ` ${citation.locality.referenceFrom}–${citation.locality.referenceTo}` : ` ${citation.locality.referenceFrom}` }}
@@ -70,5 +125,59 @@ async function navigateToCitation() {
     <a v-if="citation.link" :href="citation.link" target="_blank" rel="noopener" class="concept-link ml-1">[link]</a>
     <span v-if="citation.original" class="text-xs text-ink-300 ml-1">(orig: {{ citation.original }})</span>
     <span v-if="resolvedTarget" class="text-[9px] text-ink-300 ml-1">→ {{ resolvedTarget.registerId }}/{{ resolvedTarget.conceptId }}</span>
+
+    <!-- Hover preview tooltip -->
+    <Teleport to="body">
+      <div
+        v-if="previewVisible && preview"
+        class="citation-preview"
+        @mouseenter="previewVisible = true"
+        @mouseleave="hidePreview"
+        :style="previewStyle"
+      >
+        <div class="citation-preview-title">{{ preview.designation }}</div>
+        <div v-if="preview.definition" class="citation-preview-def">{{ preview.definition }}</div>
+        <div v-if="resolvedTarget" class="citation-preview-dataset">{{ resolvedTarget.registerId }}</div>
+      </div>
+    </Teleport>
   </span>
 </template>
+
+<style scoped>
+.citation-preview {
+  position: fixed;
+  z-index: 50;
+  max-width: 320px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 1.4;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  pointer-events: auto;
+  background: var(--color-bg, #fff);
+  color: var(--color-ink, #1a1a1a);
+  border: 1px solid var(--color-border, #e5e5e5);
+}
+:global(.dark) .citation-preview {
+  background: var(--color-bg, #1a1a2e);
+  color: var(--color-ink, #e5e5e5);
+  border-color: var(--color-border, #333);
+}
+.citation-preview-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.citation-preview-def {
+  color: var(--color-ink-600, #555);
+  font-size: 12px;
+}
+:global(.dark) .citation-preview-def {
+  color: var(--color-ink-400, #999);
+}
+.citation-preview-dataset {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--brand-primary);
+  opacity: 0.8;
+}
+</style>

package/src/components/ConceptDetail.vue

@@ -14,7 +14,10 @@ import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { getFactory } from '../adapters/factory';
 import { useRenderOptions } from '../composables/use-render-options';
-import { categorizeRelationship, relationshipLabel, relationshipDefinition, INVERSE_RELATIONSHIPS } from '../utils/relationship-categories';
+import { useConceptEdges } from '../composables/use-concept-edges';
+import { useConceptContent, type LangContent } 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';
 import ConceptTimeline from './ConceptTimeline.vue';
 import ConceptRdfView from './ConceptRdfView.vue';
@@ -38,7 +41,6 @@ const router = useRouter();
 const store = useVocabularyStore();
 const { getColor } = useDsStyle();
 const { config: siteConfig, localizedDatasetField } = useSiteConfig();
-const factory = getFactory();
 
 const activeTab = ref<'rdf' | 'definition' | 'history'>('definition');
 const activeHistoryLang = ref('eng');
@@ -53,6 +55,25 @@ const conceptPosition = computed(() => {
   return { index: idx + 1, total: adapter.getConceptCount() };
 });
 
+const conceptComputed = computed(() => props.concept);
+const registerIdComputed = computed(() => props.registerId);
+const manifestComputed = computed(() => props.manifest);
+const edgesComputed = computed(() => props.edges);
+
+const {
+  conceptUriValue,
+  outgoingEdges,
+  incomingEdges,
+  getEdgeDisplay,
+  edgeBadgeColor,
+  inverseEdgeType,
+  conceptRelated,
+  getResolvedRef,
+  relatedLabel,
+  navigateEdge,
+  navigateRelated,
+} = useConceptEdges(conceptComputed, registerIdComputed, manifestComputed, edgesComputed, router);
+
 const uriCopied = ref(false);
 function copyUri() {
   const uri = conceptUri(props.concept, props.registerId, props.manifest.uriBase);
@@ -84,79 +105,19 @@ const engConcept = computed((): LocalizedConcept | null => {
 const primaryTerm = computed(() => getPreferredTerm(engConcept.value, conceptId.value));
 const renderedPrimaryTerm = computed(() => renderMath(primaryTerm.value));
 
-// Managed concept status from Concept.status (7 values from concept-status.ttl)
 const managedStatus = computed(() => props.concept.status);
 
-// ConceptReference domains from managed concept level
 const conceptRefDomains = computed(() => props.concept.domains);
 
-// Managed concept dates
 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 ?? []);
 
-// Managed concept related (concept-level cross-references)
-// Derives inverse relationships from incoming edges (e.g. supersedes → superseded_by).
-const conceptRelated = computed(() => {
-  const direct = props.concept.relatedConcepts?.filter(rc => !INVERSE_RELATIONSHIPS[rc.type]) ?? [];
-  const derived = incomingEdges.value
-    .filter(e => INVERSE_RELATIONSHIPS[e.type])
-    .map(e => {
-      const parsed = factory.resolve(e.source, props.registerId);
-      const sourceUrn = parsed.type === 'internal'
-        ? store.manifests.get(parsed.registerId)?.datasetUri
-        : null;
-      const conceptId = e.source.match(/\/concept\/([^/]+)$/)?.[1];
-      return {
-        type: INVERSE_RELATIONSHIPS[e.type],
-        ref: sourceUrn && conceptId ? { source: sourceUrn, id: conceptId } : null,
-        content: '',
-      };
-    });
-  return [...direct, ...derived];
-});
-
-function resolveRelatedRef(ref: { source: string | null; id: string | null } | null): { registerId: string; conceptId: string } | null {
-  if (!ref?.source || !ref?.id) return null;
-  const uri = `${ref.source}/${ref.id}`;
-  const resolution = factory.resolve(uri, props.registerId);
-  if (resolution.type === 'internal') {
-    const conceptId = resolution.conceptId.replace(/^\//, '');
-    return { registerId: resolution.registerId, conceptId };
-  }
-  if (ref.source.startsWith('urn:')) {
-    const directUri = ref.source + ref.id;
-    const directRes = factory.resolve(directUri, props.registerId);
-    if (directRes.type === 'internal') {
-      return { registerId: directRes.registerId, conceptId: directRes.conceptId.replace(/^\//, '') };
-    }
-  }
-  return null;
-}
-
-async function navigateRelated(ref: { source: string | null; id: string | null }) {
-  const target = resolveRelatedRef(ref);
-  if (!target) return;
-  router.push({ name: 'concept', params: { registerId: target.registerId, conceptId: target.conceptId } });
-}
-
-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) {
-    const m = store.manifests.get(resolved.registerId);
-    const dsLabel = m?.shortname || m?.title || resolved.registerId;
-    return `${resolved.conceptId} (${dsLabel})`;
-  }
-  return dr.ref ? `${dr.ref.id || ''} (${dr.ref.source || ''})`.trim() : '';
-}
-
 // Cross-reference resolver: generates clickable links for inline refs
 
+const factory = getFactory();
 const { ensureBibLoaded, bibResolver, figResolver } = useRenderOptions(() => props.registerId);
 
 const renderOpts: RenderOptions = {
@@ -194,30 +155,7 @@ function handleContentClick(e: MouseEvent) {
   }
 }
 
-// Pre-computed content for all languages (sorted eng first)
-interface LangContent {
-  lang: string;
-  lc: LocalizedConcept;
-  renderedTerm: string;
-  definition: string;
-  renderedDefinition: string;
-  annotations: string[];
-  renderedAnnotations: string[];
-  notes: string[];
-  renderedNotes: string[];
-  examples: string[];
-  renderedExamples: string[];
-  sources: ConceptSource[];
-  designations: Designation[];
-  renderedDesignations: Map<string, string>;
-  entryStatus: string;
-  classification: string | null;
-  reviewType: string | null;
-  release: string | null;
-  lineageSourceSimilarity: number | null;
-  lcScript: string | null;
-  lcSystem: string | null;
-}
+// LangContent type is imported from the composable
 
 const allLangContent = computed(() => {
   const result: LangContent[] = [];
@@ -310,112 +248,6 @@ function scrollToLang(lang: string) {
   });
 }
 
-const conceptUriValue = computed(() =>
-  conceptUri(props.concept, props.registerId, props.manifest.uriBase)
-);
-
-const outgoingEdges = computed(() => dedupeEdges(props.edges.filter(e => e.source === conceptUriValue.value && e.type !== 'domain' && e.type !== 'section'), 'target'));
-const incomingEdges = computed(() => dedupeEdges(props.edges.filter(e => e.target === conceptUriValue.value && e.type !== 'domain' && e.type !== 'section'), 'source'));
-
-function dedupeEdges(edges: GraphEdge[], direction: 'source' | 'target'): GraphEdge[] {
-  const seen = new Set<string>();
-  return edges.filter(e => {
-    const key = `${e[direction]}\0${e.type}`;
-    if (seen.has(key)) return false;
-    seen.add(key);
-    return true;
-  });
-}
-
-function inverseEdgeType(type: string): string {
-  return INVERSE_RELATIONSHIPS[type] || type;
-}
-
-function edgeBadgeColor(type: string, direction: 'out' | 'in'): string {
-  if (type === 'supersedes' || type === 'superseded_by') {
-    return direction === 'out' ? 'text-orange-700 bg-orange-50' : 'text-red-700 bg-red-50';
-  }
-  return categorizeRelationship(type).color;
-}
-
-interface EdgeDisplay {
-  uri: string;
-  conceptId: string;
-  designation: string;
-  tooltip: string;
-  isLocal: boolean;
-  badge: { id: string; title: string } | null;
-}
-
-const edgeDisplayCache = computed(() => {
-  const cache = new Map<string, EdgeDisplay>();
-  for (const e of props.edges) {
-    const uri = e.source === conceptUriValue.value ? e.target : e.source;
-    if (cache.has(uri)) continue;
-    const resolution = factory.resolve(uri, props.registerId);
-    const isLocal = resolution.type === 'internal' && resolution.registerId === props.registerId;
-    const conceptId = uri.match(/\/concept\/([^/]+)$/)?.[1] ?? uri.split('/').pop() ?? uri;
-    const node = store.graph.getNode(uri);
-    const designation = node
-      ? (node.designations[locale.value] || node.designations.eng || Object.values(node.designations)[0] || '')
-      : '';
-    const tooltipLines: string[] = [uri];
-    if (node) {
-      for (const [lang, des] of Object.entries(node.designations)) {
-        tooltipLines.push(`${langLabel(lang)}: ${des}`);
-      }
-    }
-    let badge: { id: string; title: string } | null = null;
-    if (resolution.type === 'internal' && resolution.registerId !== props.registerId) {
-      const m = store.manifests.get(resolution.registerId);
-      badge = { id: resolution.registerId, title: m?.shortname || m?.title || resolution.registerId };
-    } else if (resolution.type === 'site') {
-      badge = { id: '', title: resolution.label };
-    } else if (resolution.type === 'url') {
-      badge = { id: '', title: resolution.label };
-    }
-    cache.set(uri, { uri, conceptId, designation, tooltip: tooltipLines.join('\n'), isLocal, badge });
-  }
-  return cache;
-});
-
-function getEdgeDisplay(uri: string): EdgeDisplay {
-  return edgeDisplayCache.value.get(uri) ?? { uri, conceptId: uri, designation: "", tooltip: uri, isLocal: false, badge: null };
-}
-
-interface ResolvedRef {
-  target: { registerId: string; conceptId: string } | null;
-}
-
-const resolvedRefs = computed(() => {
-  const map = new Map<string, ResolvedRef>();
-  for (const cr of conceptRelated.value) {
-    const key = `${cr.ref?.source ?? ''}:${cr.ref?.id ?? ''}`;
-    if (map.has(key)) continue;
-    map.set(key, { target: resolveRelatedRef(cr.ref) });
-  }
-  return map;
-});
-
-function getResolvedRef(ref: { source: string | null; id: string | null } | null): ResolvedRef {
-  if (!ref) return { target: null };
-  const key = `${ref.source ?? ''}:${ref.id ?? ''}`;
-  return resolvedRefs.value.get(key) ?? { target: resolveRelatedRef(ref) };
-}
-
-async function navigateEdge(edge: GraphEdge) {
-  const uri = edge.source === conceptUriValue.value ? edge.target : edge.source;
-  const resolution = factory.resolve(uri);
-
-  if (resolution.type === 'internal') {
-    router.push({ name: 'concept', params: { registerId: resolution.registerId, conceptId: resolution.conceptId } });
-  } else if (resolution.type === 'site') {
-    window.open(`${resolution.baseUrl}/resolve/${encodeURIComponent(uri)}`, '_blank', 'noopener');
-  } else if (resolution.type === 'url') {
-    window.open(resolution.url, '_blank', 'noopener');
-  }
-}
-
 function navigateDomain(domain: { slug: string; conceptId?: string }) {
   const sectionId = domain.conceptId || domain.slug;
   router.push({ name: 'dataset', params: { registerId: props.manifest.id }, query: { section: sectionId } });
@@ -455,10 +287,6 @@ function plainTruncate(html: string, max: number = 120): string {
   return text.length <= max ? text : text.slice(0, max).trimEnd() + '…';
 }
 
-function slugify(text: string): string {
-  return text.toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s/]+/g, '-');
-}
-
 // 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 }>();

package/src/components/DesignationList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Designation, Expression, ConceptSource, RelatedConcept } from 'glossarist';
+import type { Designation, Expression, ConceptSource } from 'glossarist';
 import { designationTypeInfo, normativeStatusInfo, abbreviationDetails, termTypeInfo, grammarBadges, pronunciationLabel, pronunciationTooltip, sourceTypeInfo } from '../utils/designation-registry';
 import { relationshipLabel } from '../utils/relationship-categories';
 import { langName } from '../utils/lang';
@@ -17,11 +17,7 @@ const emit = defineEmits<{
   (e: 'navigate-related', ref: { source: string | null; id: string | null }): void;
 }>();
 
-function asRelated(dr: unknown): RelatedConcept | null {
-  return dr && typeof dr === 'object' && 'ref' in dr ? dr as RelatedConcept : null;
-}
-
-function resolvedLabel(dr: { content: string | null; ref: { source: string | null; id: string | null } | null }): string {
+function resolvedLabel(dr: { content: string | null; ref?: { source: string | null; id: string | null } | null }): string {
   if (dr.content) return dr.content;
   if (dr.ref?.source && dr.ref?.id) return `${dr.ref.source}/${dr.ref.id}`;
   return '(ref)';
@@ -69,12 +65,12 @@ function resolvedLabel(dr: { content: string | null; ref: { source: string | nul
       </div>
       <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 as string) }}</span>
-          <template v-if="getDesignationTarget(dr as any)">
-            <span class="italic">{{ getDesignationTarget(dr as any) }}</span>
+          <span class="badge text-[9px] bg-gray-50 text-gray-600">{{ relationshipLabel(dr.type ?? '') }}</span>
+          <template v-if="getDesignationTarget(dr)">
+            <span class="italic">{{ getDesignationTarget(dr) }}</span>
           </template>
-          <button v-else-if="asRelated(dr)?.ref" @click="emit('navigate-related', asRelated(dr)!.ref!)" class="concept-link">{{ resolvedLabel(asRelated(dr)!) }}</button>
-          <span v-else>{{ resolvedLabel(dr as any) }}</span>
+          <button v-else-if="'ref' in dr && dr.ref" @click="emit('navigate-related', dr.ref)" class="concept-link">{{ resolvedLabel(dr) }}</button>
+          <span v-else>{{ resolvedLabel(dr) }}</span>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,160 @@
+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 { getAnnotations } from '../adapters/model-bridge';
+import { getPreferredTerm, entryStatusColor, entryStatusLabel, entryStatusDefinition } from '../utils/concept-helpers';
+import { sortLanguages } from '../utils/lang';
+import { useSiteConfig } from '../config/use-site-config';
+import { useI18n } from '../i18n';
+
+export interface LangContent {
+  lang: string;
+  lc: LocalizedConcept;
+  renderedTerm: string;
+  definition: string;
+  renderedDefinition: string;
+  annotations: string[];
+  renderedAnnotations: string[];
+  notes: string[];
+  renderedNotes: string[];
+  examples: string[];
+  renderedExamples: string[];
+  sources: ConceptSource[];
+  designations: Designation[];
+  renderedDesignations: Map<string, string>;
+  entryStatus: string;
+  classification: string | null;
+  reviewType: string | null;
+  release: string | null;
+  lineageSourceSimilarity: number | null;
+  lcScript: string | null;
+  lcSystem: string | null;
+}
+
+export function useConceptContent(
+  concept: ComputedRef<Concept>,
+  manifest: ComputedRef<Manifest>,
+  renderOpts: ComputedRef<RenderOptions>,
+) {
+  const { locale } = useI18n();
+  const { config: siteConfig } = useSiteConfig();
+
+  const languages = computed(() => {
+    const sorted = sortLanguages(concept.value.languages, manifest.value.languageOrder);
+    const current = locale.value;
+    const idx = sorted.indexOf(current);
+    if (idx > 0) {
+      sorted.splice(idx, 1);
+      sorted.unshift(current);
+    }
+    return sorted;
+  });
+
+  const allLangContent = computed(() => {
+    const result: LangContent[] = [];
+    for (const lang of languages.value) {
+      const lc = concept.value.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);
+      const opts = renderOpts.value;
+
+      result.push({
+        lang,
+        lc,
+        renderedTerm: renderMath(getPreferredTerm(lc, '')),
+        definition,
+        renderedDefinition: renderMath(definition, opts),
+        annotations,
+        renderedAnnotations: annotations.map((a: string) => renderMath(a, opts)),
+        notes,
+        renderedNotes: notes.map(n => renderMath(n, opts)),
+        examples,
+        renderedExamples: examples.map(e => renderMath(e, opts)),
+        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);
+  }
+
+  const collapsedLangs = ref(new Set<string>());
+
+  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() {
+    collapsedLangs.value = allCollapsed.value
+      ? new Set()
+      : new Set(allLangContent.value.map(lc => lc.lang));
+  }
+
+  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() + '…';
+  }
+
+  function orderedDesignations(lang: string): Designation[] {
+    const desigs = langContentMap.value.get(lang)?.designations ?? [];
+    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];
+  }
+
+  return {
+    languages,
+    allLangContent,
+    langContentMap,
+    hasContent,
+    collapsedLangs,
+    allCollapsed,
+    toggleLang,
+    toggleAll,
+    plainTruncate,
+    orderedDesignations,
+  };
+}