@glossarist/concept-browser 0.7.76 → 0.7.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.7.76",
+  "version": "0.7.77",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {

package/scripts/generate-data.mjs

@@ -920,6 +920,9 @@ async function processDataset(dir, register, opts) {
 
   const dsRefMaps = { ...refMaps, register, designationLookup };
 
+  const sourceMap = new Map();
+  const relTypeCounts = {};
+
   for (let i = 0; i < files.length; i++) {
     const file = files[i];
     try {
@@ -954,6 +957,28 @@ async function processDataset(dir, register, opts) {
         status: conceptYaml.eng?.entry_status || 'valid',
       });
 
+      const conceptSourceRefs = new Set();
+      const allSourceArrays = [
+        ...(conceptYaml._sources || []),
+        ...opts.languages.flatMap(l => conceptYaml[l]?.sources || []),
+      ];
+      for (const src of allSourceArrays) {
+        const ref = src.origin?.ref?.source || src.origin?.ref?.id || 'Unknown';
+        conceptSourceRefs.add(ref);
+        if (!sourceMap.has(ref)) {
+          sourceMap.set(ref, { ref, types: new Set(), conceptIds: [] });
+        }
+        if (src.type) sourceMap.get(ref).types.add(src.type);
+      }
+      for (const ref of conceptSourceRefs) {
+        sourceMap.get(ref)?.conceptIds.push(termid);
+      }
+
+      for (const r of conceptYaml._related || []) {
+        const type = r.type || 'unknown';
+        relTypeCounts[type] = (relTypeCounts[type] || 0) + 1;
+      }
+
       for (const lang of opts.languages) {
         const lc = conceptYaml[lang];
         if (lc) {
@@ -1072,6 +1097,23 @@ async function processDataset(dir, register, opts) {
     }
   }
 
+  const sourceStats = Array.from(sourceMap.values())
+    .map(s => ({
+      ref: s.ref,
+      types: Array.from(s.types),
+      conceptCount: s.conceptIds.length,
+      conceptIds: s.conceptIds,
+    }))
+    .sort((a, b) => b.conceptCount - a.conceptCount);
+  const totalRelationships = Object.values(relTypeCounts).reduce((a, b) => a + b, 0);
+
+  writeJson(path.join(DATA, register, 'stats.json'), {
+    sourceCount: sourceStats.length,
+    sources: sourceStats,
+    relationshipCount: totalRelationships,
+    relationshipTypes: relTypeCounts,
+  });
+
   const manifest = {
     id: register,
     datasetUri: opts.datasetUri,
@@ -1082,6 +1124,8 @@ async function processDataset(dir, register, opts) {
     baseUrl: `/data/${register}`,
     languages: opts.languages,
     conceptCount: concepts.length,
+    sourceCount: sourceStats.length,
+    relationshipCount: totalRelationships,
     conceptUrlTemplate: '{baseUrl}/concepts/{conceptId}.json',
     indexUrl: '{baseUrl}/index.json',
     contextUrl: 'https://glossarist.org/ns/context.jsonld',

package/src/components/AppSidebar.vue

@@ -136,7 +136,7 @@ const filteredGlobalPages = computed(() =>
 
 // Show only standard dataset pages (Concepts, Statistics, About)
 const filteredDatasetPages = computed(() =>
-  datasetPages.value.filter(p => ['', 'stats', 'about'].includes(p.route || ''))
+  datasetPages.value.filter(p => ['', 'stats', 'sources', 'about'].includes(p.route || ''))
 );
 
 const currentManifest = computed(() => store.manifests.get(currentDataset.value));

package/src/components/NavIcon.vue

@@ -9,6 +9,7 @@ const icons: Record<string, string> = {
   chart: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
   list: 'M4 6h16M4 10h16M4 14h16M4 18h16',
   schema: 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z',
+  database: 'M4 7c0 1.1 3.6 2 8 2s8-.9 8-2M4 7c0-1.1 3.6-2 8-2s8 .9 8 2M4 7v10c0 1.1 3.6 2 8 2s8-.9 8-2V7M4 12c0 1.1 3.6 2 8 2s8-.9 8-2',
 };
 
 defineProps<{ name: string }>();

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

@@ -157,6 +157,9 @@ function synthesizeDatasetPages(features?: Record<string, unknown>, pages?: Page
   if (features?.stats !== false && !declaredRoutes.has('stats')) {
     result.push({ type: 'stats', route: 'stats', title: 'Statistics', icon: 'chart', datasetScoped: true });
   }
+  if (!declaredRoutes.has('sources')) {
+    result.push({ type: 'sources', route: 'sources', title: 'Sources', icon: 'database', datasetScoped: true });
+  }
   if (features?.about !== false && !declaredRoutes.has('about')) {
     result.push({ type: 'about', route: 'about', title: 'About', icon: 'info', datasetScoped: true });
   }

package/src/i18n/locales/eng.yml

@@ -9,6 +9,7 @@ nav.ontology: Ontology
 nav.concepts: Concepts
 nav.stats: Statistics
 nav.about: About
+nav.sources: Sources
 nav.navigation: Navigation
 nav.datasets: Datasets
 
@@ -121,6 +122,8 @@ lang.termOnlyIn: Term only in
 # Dataset view
 dataset.concepts: concepts
 dataset.languages: languages
+dataset.sources: sources
+dataset.relationships: relationships
 dataset.filterPlaceholder: "Filter concepts... (press /)"
 dataset.of: of
 dataset.in: in

package/src/pages/[...path].astro

@@ -15,6 +15,7 @@ export async function getStaticPaths() {
   for (const ds of datasets) {
     paths.push({ params: { path: `dataset/${ds.data.id}/about` } });
     paths.push({ params: { path: `dataset/${ds.data.id}/stats` } });
+    paths.push({ params: { path: `dataset/${ds.data.id}/sources` } });
     for (const g of await getCollection('groups')) {
       paths.push({ params: { path: `group/${g.data.id}/about` } });
     }

package/src/router/index.ts

@@ -31,6 +31,12 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('../views/PageView.vue'),
     props: true,
   },
+  {
+    path: '/dataset/:registerId/sources',
+    name: 'sources',
+    component: () => import('../views/SourcesView.vue'),
+    props: true,
+  },
   {
     path: '/group/:groupId',
     name: 'group',

package/src/views/DatasetView.vue

@@ -331,6 +331,10 @@ function clearSection() {
         <router-link :to="{ name: 'about', params: { registerId } }" class="badge badge-purple hover:opacity-80 transition-opacity">
           {{ t('nav.about') }}
         </router-link>
+        <router-link v-if="manifest.sourceCount" :to="{ name: 'sources', params: { registerId } }" class="badge badge-gray hover:opacity-80 transition-opacity">
+          {{ manifest.sourceCount }} {{ t('dataset.sources') }}
+        </router-link>
+        <span v-if="manifest.relationshipCount" class="badge badge-yellow">{{ manifest.relationshipCount.toLocaleString() }} {{ t('dataset.relationships') }}</span>
       </div>
     </div>
 

package/src/views/SourcesView.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { useDatasetLoader } from '../composables/use-dataset-loader';
+import { useDsStyle } from '../utils/dataset-style';
+import { useI18n } from '../i18n';
+
+const props = defineProps<{ registerId?: string }>();
+
+const store = useVocabularyStore();
+const { getColor } = useDsStyle();
+const { loading, localError, ensureLoaded, resolvedId } = useDatasetLoader(() => props.registerId);
+const { t } = useI18n();
+
+const manifest = computed(() => store.manifests.get(resolvedId.value));
+
+interface SourceEntry {
+  ref: string;
+  types: string[];
+  conceptCount: number;
+  conceptIds: string[];
+}
+
+const stats = ref<{ sources: SourceEntry[]; sourceCount: number; relationshipCount: number; relationshipTypes: Record<string, number> } | null>(null);
+const expandedSource = ref<string | null>(null);
+const filterText = ref('');
+
+async function loadStats() {
+  if (!resolvedId.value) return;
+  const base = import.meta.env.BASE_URL;
+  try {
+    const resp = await fetch(`${base}data/${resolvedId.value}/stats.json`);
+    if (resp.ok) {
+      stats.value = await resp.json();
+    }
+  } catch (e) {
+    console.warn('Failed to load stats:', e);
+  }
+}
+
+watch(() => resolvedId.value, () => { loadStats(); }, { immediate: true });
+
+const filteredSources = computed(() => {
+  if (!stats.value?.sources) return [];
+  const q = filterText.value.toLowerCase().trim();
+  if (!q) return stats.value.sources;
+  return stats.value.sources.filter(s =>
+    s.ref.toLowerCase().includes(q) ||
+    s.types.some(t => t.toLowerCase().includes(q))
+  );
+});
+
+function sourceTypeBadge(type: string): string {
+  if (type === 'authoritative') return 'badge-green';
+  if (type === 'lineage') return 'badge-yellow';
+  return 'badge-gray';
+}
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto">
+    <div v-if="loading" class="flex items-center justify-center py-20">
+      <div class="skeleton h-8 w-64"></div>
+    </div>
+
+    <div v-else-if="localError" class="card p-8 text-center">
+      <p class="text-red-600">{{ localError }}</p>
+    </div>
+
+    <template v-else-if="manifest">
+      <div class="mb-6">
+        <div class="text-xs text-ink-400 mb-2">
+          <router-link :to="{ name: 'dataset', params: { registerId } }" class="hover:text-blue-600">{{ manifest.title }}</router-link>
+          <span class="mx-1">›</span>
+          <span>{{ t('nav.sources') }}</span>
+        </div>
+        <h1 class="font-serif text-3xl text-ink-800 dark:text-ink-100">{{ t('nav.sources') }}</h1>
+        <p class="text-ink-400 mt-1" v-if="stats">{{ stats.sourceCount }} {{ t('dataset.sources') }} · {{ manifest.conceptCount.toLocaleString() }} {{ t('dataset.concepts') }}</p>
+      </div>
+
+      <div v-if="!stats" class="card p-8 text-center text-ink-400">
+        Loading sources…
+      </div>
+
+      <template v-else>
+        <div class="card p-3 mb-4">
+          <input
+            v-model="filterText"
+            type="text"
+            :placeholder="'Filter sources...'"
+            class="w-full px-3 py-2 text-sm border border-ink-100 dark:border-ink-700 rounded-lg bg-surface-raised dark:bg-ink-800 text-ink-700 dark:text-ink-200 focus:outline-none focus:border-blue-400"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <div v-for="src in filteredSources" :key="src.ref" class="card overflow-hidden">
+            <button
+              class="w-full text-left p-4 flex items-center gap-3 hover:bg-ink-50/50 dark:hover:bg-ink-800/30 transition-colors"
+              @click="expandedSource = expandedSource === src.ref ? null : src.ref"
+            >
+              <span
+                class="w-3 h-3 rounded-full flex-shrink-0"
+                :style="{ backgroundColor: getColor(resolvedId) }"
+              ></span>
+              <div class="flex-1 min-w-0">
+                <div class="font-medium text-ink-800 dark:text-ink-100 truncate">{{ src.ref }}</div>
+                <div class="flex items-center gap-1.5 mt-1">
+                  <span v-for="tp in src.types" :key="tp" class="badge text-[9px]" :class="sourceTypeBadge(tp)">{{ tp }}</span>
+                  <span class="text-xs text-ink-400">{{ src.conceptCount }} {{ t('dataset.concepts') }}</span>
+                </div>
+              </div>
+              <svg class="w-4 h-4 text-ink-300 transition-transform flex-shrink-0" :class="{ 'rotate-180': expandedSource === src.ref }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+              </svg>
+            </button>
+
+            <div v-if="expandedSource === src.ref" class="border-t border-ink-100/60 dark:border-ink-700/40 p-4">
+              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-1">
+                <router-link
+                  v-for="cid in src.conceptIds"
+                  :key="cid"
+                  :to="{ name: 'concept', params: { registerId, conceptId: cid } }"
+                  class="block px-2 py-1 rounded text-sm text-ink-600 dark:text-ink-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+                >
+                  <code class="text-xs text-ink-400 font-mono mr-1">{{ cid }}</code>
+                </router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>

package/src/views/StatsView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
@@ -15,51 +15,37 @@ const { t } = useI18n();
 
 const manifest = computed(() => store.manifests.get(resolvedId.value));
 
-interface LangStat {
-  lang: string;
-  terms: number;
-  definitions: number;
-}
+interface LangStat { lang: string; terms: number; definitions: number; }
 
-const stats = computed(() => {
+const langStats = computed(() => {
   const m = manifest.value;
   if (!m) return { langs: [], total: 0 };
-
-  // Scan the index for actual language coverage
   const adapter = store.datasets.get(resolvedId.value);
   const conceptCounts: Record<string, number> = {};
-
   if (adapter) {
-    const concepts = adapter.getConcepts();
-    for (const c of concepts) {
+    for (const c of adapter.getConcepts()) {
       if (!c) continue;
       for (const lang of Object.keys(c.designations)) {
         conceptCounts[lang] = (conceptCounts[lang] || 0) + 1;
       }
     }
   }
-
-  // Merge with manifest languageStats (for definition counts)
   const ls = m.languageStats || {};
   const allLangs = new Set([...Object.keys(conceptCounts), ...m.languages]);
-
   const langs: LangStat[] = [...allLangs].map(lang => ({
     lang,
     terms: ls[lang]?.terms ?? conceptCounts[lang] ?? 0,
     definitions: ls[lang]?.definitions ?? conceptCounts[lang] ?? 0,
   }));
-
-  // Sort: eng first, then by term count descending
   langs.sort((a, b) => {
     if (a.lang === 'eng') return -1;
     if (b.lang === 'eng') return 1;
     return b.terms - a.terms;
   });
-
   return { langs, total: m.conceptCount };
 });
 
-const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms), 1));
+const maxTerms = computed(() => Math.max(...langStats.value.langs.map(l => l.terms), 1));
 
 function coverageColor(ratio: number): string {
   if (ratio >= 0.8) return 'bg-emerald-500';
@@ -67,11 +53,49 @@ function coverageColor(ratio: number): string {
   if (ratio >= 0.25) return 'bg-amber-500';
   return 'bg-red-400';
 }
+
+interface StatsData {
+  sourceCount: number;
+  sources: Array<{ ref: string; types: string[]; conceptCount: number }>;
+  relationshipCount: number;
+  relationshipTypes: Record<string, number>;
+}
+
+const statsData = ref<StatsData | null>(null);
+
+async function loadStats() {
+  if (!resolvedId.value) return;
+  const base = import.meta.env.BASE_URL;
+  try {
+    const resp = await fetch(`${base}data/${resolvedId.value}/stats.json`);
+    if (resp.ok) statsData.value = await resp.json();
+  } catch {}
+}
+
+watch(() => resolvedId.value, () => { loadStats(); }, { immediate: true });
+
+const relEntries = computed(() => {
+  if (!statsData.value?.relationshipTypes) return [];
+  return Object.entries(statsData.value.relationshipTypes)
+    .sort(([, a], [, b]) => b - a);
+});
+
+const maxRel = computed(() => Math.max(...relEntries.value.map(([, n]) => n), 1));
+
+const topSources = computed(() => {
+  if (!statsData.value?.sources) return [];
+  return statsData.value.sources.slice(0, 10);
+});
+
+function sourceTypeBadge(type: string): string {
+  if (type === 'authoritative') return 'badge-green';
+  if (type === 'lineage') return 'badge-yellow';
+  return 'badge-gray';
+}
 </script>
 
 <template>
   <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-    <!-- Breadcrumb -->
     <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400 mb-6">
       <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
       <span class="text-ink-200">/</span>
@@ -84,9 +108,7 @@ function coverageColor(ratio: number): string {
       <div class="animate-pulse space-y-6">
         <div class="h-8 bg-ink-100 rounded w-32"></div>
         <div class="h-4 bg-ink-100 rounded w-64"></div>
-        <div class="card overflow-hidden">
-          <div class="h-80 bg-ink-50"></div>
-        </div>
+        <div class="card overflow-hidden"><div class="h-80 bg-ink-50"></div></div>
       </div>
     </template>
     <template v-else-if="localError">
@@ -99,46 +121,83 @@ function coverageColor(ratio: number): string {
     <template v-else-if="manifest">
       <h1 class="font-serif text-3xl text-ink-800 mb-2">{{ t('stats.title') }}</h1>
       <p class="text-ink-400 mb-8">
-        {{ t('stats.summary', { count: stats.total.toLocaleString(), langCount: String(manifest.languages.length) }) }}
+        {{ t('stats.summary', { count: langStats.total.toLocaleString(), langCount: String(manifest.languages.length) }) }}
       </p>
 
-      <!-- Language stats table -->
-      <div class="card -mx-4 sm:mx-0 overflow-x-auto">
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-ink-100/60 bg-ink-50">
-              <th class="text-left px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.language') }}</th>
-              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.terms') }}</th>
-              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.definitions') }}</th>
-              <th class="px-5 py-3 text-ink-600 font-medium w-40"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="s in stats.langs" :key="s.lang" class="border-b border-ink-50 last:border-0">
-              <td class="px-5 py-3">
-                <div class="flex items-center gap-2">
-                  <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langLabel(s.lang) }}</span>
-                  <span class="font-medium text-ink-800">{{ langName(s.lang) }}</span>
-                  <span class="text-ink-300 text-xs">({{ s.lang }})</span>
-                </div>
-              </td>
-              <td class="text-right px-5 py-3 font-mono text-ink-700">{{ s.terms.toLocaleString() }}</td>
-              <td class="text-right px-5 py-3 font-mono text-ink-700">{{ s.definitions.toLocaleString() }}</td>
-              <td class="px-5 py-3">
-                <div class="flex items-center gap-2">
-                  <div class="h-2 rounded-full bg-ink-50 overflow-hidden flex-1">
-                    <div
-                      class="h-full rounded-full transition-all duration-500"
-                      :class="coverageColor(s.terms / maxTerms)"
-                      :style="{ width: (s.terms / maxTerms * 100) + '%' }"
-                    ></div>
-                  </div>
-                  <span class="text-xs text-ink-300 w-10 text-right tabular-nums">{{ Math.round(s.terms / maxTerms * 100) }}%</span>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      <div v-if="statsData" class="flex flex-wrap gap-2 mb-8">
+        <span class="badge badge-purple">{{ statsData.sourceCount }} {{ t('dataset.sources') }}</span>
+        <span class="badge badge-yellow">{{ statsData.relationshipCount.toLocaleString() }} {{ t('dataset.relationships') }}</span>
+      </div>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div>
+          <h2 class="section-label mb-3">{{ t('stats.language') }}</h2>
+          <div class="card overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-ink-100/60 bg-ink-50">
+                  <th class="text-left px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.language') }}</th>
+                  <th class="text-right px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.terms') }}</th>
+                  <th class="text-right px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.definitions') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="s in langStats.langs" :key="s.lang" class="border-b border-ink-50 last:border-0">
+                  <td class="px-4 py-2.5">
+                    <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langLabel(s.lang) }}</span>
+                    <span class="ml-2 font-medium text-ink-800">{{ langName(s.lang) }}</span>
+                  </td>
+                  <td class="text-right px-4 py-2.5 font-mono text-ink-700">{{ s.terms.toLocaleString() }}</td>
+                  <td class="text-right px-4 py-2.5 font-mono text-ink-700">{{ s.definitions.toLocaleString() }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div v-if="relEntries.length">
+          <h2 class="section-label mb-3">{{ t('dataset.relationships') }}</h2>
+          <div class="card p-4 space-y-3">
+            <div v-for="[type, count] in relEntries" :key="type">
+              <div class="flex items-center justify-between mb-1">
+                <span class="text-sm font-medium text-ink-700">{{ type }}</span>
+                <span class="text-sm font-mono text-ink-500">{{ count.toLocaleString() }}</span>
+              </div>
+              <div class="h-2 rounded-full bg-ink-50 overflow-hidden">
+                <div class="h-full rounded-full bg-blue-500 transition-all duration-500" :style="{ width: (count / maxRel * 100) + '%' }"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="topSources.length" class="mt-8">
+        <div class="flex items-center justify-between mb-3">
+          <h2 class="section-label">{{ t('dataset.sources') }}</h2>
+          <router-link :to="{ name: 'sources', params: { registerId: resolvedId } }" class="text-xs text-blue-600 hover:underline">
+            View all {{ statsData?.sourceCount }} →
+          </router-link>
+        </div>
+        <div class="card overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead>
+              <tr class="border-b border-ink-100/60 bg-ink-50">
+                <th class="text-left px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">Source</th>
+                <th class="text-left px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">Type</th>
+                <th class="text-right px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">Concepts</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="src in topSources" :key="src.ref" class="border-b border-ink-50 last:border-0">
+                <td class="px-4 py-2.5 font-medium text-ink-800">{{ src.ref }}</td>
+                <td class="px-4 py-2.5">
+                  <span v-for="tp in src.types" :key="tp" class="badge text-[9px] mr-1" :class="sourceTypeBadge(tp)">{{ tp }}</span>
+                </td>
+                <td class="text-right px-4 py-2.5 font-mono text-ink-700">{{ src.conceptCount.toLocaleString() }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </template>
   </div>