@glossarist/concept-browser 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "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

@@ -885,6 +885,14 @@ async function processLogo(logoConfig, filename) {
 await processLogo(config.branding?.logo, `${config.id}-logo.svg`);
 await processLogo(config.branding?.footerLogo, `${config.id}-footer-logo.svg`);
 
+// Process light/dark logo variants
+if (config.branding?.logo?.localLight) {
+  await processLogo({ localPath: config.branding.logo.localLight }, `${config.id}-logo-light.svg`);
+}
+if (config.branding?.logo?.localDark) {
+  await processLogo({ localPath: config.branding.logo.localDark }, `${config.id}-logo-dark.svg`);
+}
+
 // === Page processors ===
 
 function processNewsPage(config, page) {
@@ -1107,19 +1115,32 @@ const basePathPrefix = process.env.BASE_PATH?.replace(/\/+$/, '') || '';
 for (const key of ['logo', 'footerLogo']) {
   const suffix = key === 'logo' ? 'logo.svg' : 'footer-logo.svg';
   if (siteBranding[key]) {
-    siteBranding[key] = { ...siteBranding[key], path: `${basePathPrefix}/logos/${config.id}-${suffix}` };
-    delete siteBranding[key].localPath;
-    delete siteBranding[key].remoteUrl;
+    const updated = { ...siteBranding[key], path: `${basePathPrefix}/logos/${config.id}-${suffix}` };
+    if (siteBranding[key].localLight) updated.light = `${basePathPrefix}/logos/${config.id}-${suffix.replace('.svg', '-light.svg')}`;
+    if (siteBranding[key].localDark) updated.dark = `${basePathPrefix}/logos/${config.id}-${suffix.replace('.svg', '-dark.svg')}`;
+    delete updated.localPath;
+    delete updated.remoteUrl;
+    delete updated.localLight;
+    delete updated.localDark;
+    siteBranding[key] = updated;
   }
 }
 
+// Build dataset translations map
+const datasetTranslations = {};
+for (const d of config.datasets) {
+  if (d.translations) datasetTranslations[d.id] = d.translations;
+}
+
 writeJson(path.join(PUBLIC, 'site-config.json'), {
   id: config.id,
   domain: config.domain,
   title: config.title,
   subtitle: config.subtitle,
   description: config.description,
+  translations: config.translations || undefined,
   datasets: config.datasets.map(d => d.id),
+  datasetTranslations: Object.keys(datasetTranslations).length ? datasetTranslations : undefined,
   defaultDataset: config.datasets.length === 1 ? config.datasets[0].id : undefined,
   uiLanguages: config.uiLanguages || undefined,
   branding: siteBranding,

package/src/components/AppHeader.vue

@@ -9,7 +9,7 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 const router = useRouter();
 const ui = useUiStore();
 const store = useVocabularyStore();
-const { config: siteConfig } = useSiteConfig();
+const { config: siteConfig, localizedTitle } = useSiteConfig();
 const { locale, t, setLocale } = useI18n();
 const searchInput = ref('');
 const langOpen = ref(false);
@@ -64,6 +64,13 @@ onBeforeUnmount(() => document.removeEventListener('click', closeLangOnOutside))
       <button @click="goHome" class="flex items-center gap-2 hover:opacity-80 transition flex-shrink-0 group">
         <div v-if="siteConfig?.branding?.logo" class="h-8 flex items-center">
           <img
+            v-if="siteConfig.branding.logo.light && siteConfig.branding.logo.dark"
+            :src="ui.isDark ? siteConfig.branding.logo.dark : siteConfig.branding.logo.light"
+            :alt="siteConfig.branding.logo.alt"
+            class="h-8 max-w-[48px] object-contain rounded"
+          />
+          <img
+            v-else
             :src="siteConfig.branding.logo.path"
             :alt="siteConfig.branding.logo.alt"
             class="h-8 max-w-[48px] object-contain rounded"
@@ -77,7 +84,7 @@ onBeforeUnmount(() => document.removeEventListener('click', closeLangOnOutside))
             <line x1="9" y1="11" x2="15" y2="11"/>
           </svg>
         </div>
-        <span class="font-serif text-lg text-ink-800 leading-none hidden sm:inline">{{ siteConfig?.title || 'Glossarist' }}</span>
+        <span class="font-serif text-lg text-ink-800 leading-none hidden sm:inline">{{ localizedTitle }}</span>
       </button>
 
       <!-- Search -->

package/src/components/AppSidebar.vue

@@ -14,7 +14,7 @@ const ui = useUiStore();
 const router = useRouter();
 const route = useRoute();
 const { getColor } = useDsStyle();
-const { globalPages, datasetPages, config: siteConfig } = useSiteConfig();
+const { globalPages, datasetPages, config: siteConfig, localizedTitle, localizedDatasetField } = useSiteConfig();
 const { t } = useI18n();
 
 const currentDataset = computed(() => route.params.registerId as string ?? '');
@@ -127,6 +127,13 @@ function selectProperty(id: string) {
 }
 
 const isSearching = computed(() => !!searchQuery.value.trim());
+
+function navTitle(page: { route: string }): string {
+  const route = page.route || 'home';
+  const key = `nav.${route}`;
+  const translated = t(key);
+  return translated === key ? (page as any).title : translated;
+}
 </script>
 
 <template>
@@ -151,7 +158,7 @@ const isSearching = computed(() => !!searchQuery.value.trim());
             @click="closeMobile"
           >
             <NavIcon :name="page.icon" />
-            {{ page.title }}
+            {{ navTitle(page) }}
           </router-link>
 
           <!-- Ontology entity sections nested under Ontology nav item -->
@@ -424,7 +431,7 @@ const isSearching = computed(() => !!searchQuery.value.trim());
 
       <!-- Dataset-level navigation (shown when viewing a dataset) -->
       <div v-if="showDatasetNav" class="mb-6">
-        <div class="section-label">{{ currentManifest?.title || siteConfig?.title || 'Dataset' }}</div>
+        <div class="section-label">{{ localizedDatasetField(currentDataset, 'title', currentManifest?.title || siteConfig?.title || 'Dataset') }}</div>
         <nav class="space-y-0.5">
           <router-link
             v-for="page in datasetPages"
@@ -435,7 +442,7 @@ const isSearching = computed(() => !!searchQuery.value.trim());
             @click="closeMobile"
           >
             <NavIcon :name="page.icon" />
-            {{ page.title }}
+            {{ navTitle(page) }}
           </router-link>
         </nav>
       </div>
@@ -455,7 +462,7 @@ const isSearching = computed(() => !!searchQuery.value.trim());
           ]"
           :style="currentDataset === ds.id ? { borderLeftColor: getColor(ds.id), borderLeftWidth: '2px' } : {}"
         >
-          <div class="font-medium truncate leading-snug">{{ ds.title }}</div>
+          <div class="font-medium truncate leading-snug">{{ localizedDatasetField(ds.id, 'title', ds.title) }}</div>
           <div v-if="ds.loaded" class="text-xs mt-0.5" :class="currentDataset === ds.id ? 'text-ink-400' : 'text-ink-300'">
             {{ ds.conceptCount.toLocaleString() }} {{ t('home.concepts').toLowerCase() }}
           </div>

package/src/components/ConceptCard.vue

@@ -4,6 +4,7 @@ import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useDsStyle } from '../utils/dataset-style';
 import { useVocabularyStore } from '../stores/vocabulary';
+import { useI18n } from '../i18n';
 
 const props = defineProps<{
   entry: ConceptSummary;
@@ -14,6 +15,7 @@ const props = defineProps<{
 const router = useRouter();
 const { getColor } = useDsStyle();
 const store = useVocabularyStore();
+const { locale } = useI18n();
 
 function viewConcept() {
   router.push({
@@ -32,8 +34,9 @@ function statusColor(status: string): string {
 const manifestLanguages = computed(() => store.manifests.get(props.registerId)?.languages ?? []);
 
 const displayTitle = computed(() => {
-  if (props.displayLang && props.entry.designations?.[props.displayLang]) {
-    return props.entry.designations[props.displayLang];
+  const lang = props.displayLang || locale.value;
+  if (props.entry.designations?.[lang]) {
+    return props.entry.designations[lang];
   }
   return props.entry.eng || props.entry.id;
 });

package/src/components/ConceptDetail.vue

@@ -366,7 +366,7 @@ const nonVerbalReps = computed(() => {
       <!-- Breadcrumb + nav row -->
       <div class="flex items-start gap-2 mb-3">
         <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400 min-w-0 flex-1 flex-wrap">
-          <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors whitespace-nowrap">Home</router-link>
+          <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors whitespace-nowrap">{{ t('nav.home') }}</router-link>
           <span class="text-ink-200">/</span>
           <router-link :to="{ name: 'dataset', params: { registerId: manifest.id }}" class="hover:text-ink-700 transition-colors truncate max-w-[180px]">
             {{ manifest.title }}

package/src/components/GraphPanel.vue

@@ -4,6 +4,7 @@ import type { GraphNode, GraphEdge } from '../adapters/types';
 import type { SimulationNodeDatum, SimulationLinkDatum } from 'd3';
 import { useDsStyle } from '../utils/dataset-style';
 import { useUiStore } from '../stores/ui';
+import { useI18n } from '../i18n';
 import {
   forceSimulation,
   forceLink,
@@ -53,6 +54,7 @@ watch(() => props.registers, (regs) => {
 
 const { getColor } = useDsStyle();
 const uiStore = useUiStore();
+const { t } = useI18n();
 
 const STUB_COLOR = '#b8b9cc'; // ink-200
 const HIGHLIGHT_COLOR = '#1a1b2e'; // ink-800
@@ -466,11 +468,11 @@ function selectedNodeColor(): string {
       <div class="bg-surface-raised/95 backdrop-blur rounded-xl border border-ink-100/60 overflow-hidden" style="box-shadow: 0 4px 12px rgba(26, 27, 46, 0.08);">
         <button
           @click="panelOpen = !panelOpen"
-          :aria-label="panelOpen ? 'Collapse controls' : 'Expand controls'"
+          :aria-label="panelOpen ? t('graph.collapseControls') : t('graph.expandControls')"
           class="w-full px-4 py-2.5 flex items-center justify-between hover:bg-ink-50/50 transition-colors"
         >
           <span class="text-xs font-semibold text-ink-600 tracking-wide">
-            {{ nodeCount.toLocaleString() }} nodes &middot; {{ edgeCount.toLocaleString() }} edges
+            {{ nodeCount.toLocaleString() }} {{ t('graph.nodes') }} &middot; {{ edgeCount.toLocaleString() }} {{ t('graph.edges') }}
           </span>
           <svg class="w-3.5 h-3.5 text-ink-300 transition-transform" :class="panelOpen ? 'rotate-180' : ''" 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"/>
@@ -481,9 +483,9 @@ function selectedNodeColor(): string {
           <!-- Dataset toggles -->
           <div class="mt-3 space-y-2">
             <div class="flex items-center gap-2 mb-3">
-              <button @click="toggleAll(true)" class="text-[10px] font-semibold text-ink-500 hover:text-ink-700 uppercase tracking-wide transition-colors">All</button>
+              <button @click="toggleAll(true)" class="text-[10px] font-semibold text-ink-500 hover:text-ink-700 uppercase tracking-wide transition-colors">{{ t('graph.all') }}</button>
               <span class="text-ink-200 text-xs">|</span>
-              <button @click="toggleAll(false)" class="text-[10px] font-semibold text-ink-500 hover:text-ink-700 uppercase tracking-wide transition-colors">None</button>
+              <button @click="toggleAll(false)" class="text-[10px] font-semibold text-ink-500 hover:text-ink-700 uppercase tracking-wide transition-colors">{{ t('graph.none') }}</button>
             </div>
             <div
               v-for="reg in registers"
@@ -515,32 +517,32 @@ function selectedNodeColor(): string {
 
           <!-- Actions -->
           <div v-if="isCapped" class="text-[10px] text-amber-600 mt-2 leading-relaxed">
-            Rendering first {{ MAX_RENDER_NODES.toLocaleString() }} of {{ nodeCount.toLocaleString() }} nodes.
+            {{ t('graph.renderingWarning', { max: MAX_RENDER_NODES.toLocaleString(), total: nodeCount.toLocaleString() }) }}
           </div>
 
           <div v-if="nodeCount > 0" class="flex gap-4 mt-3 pt-3 border-t border-ink-100/40">
-            <button @click="resetZoom" class="text-[10px] font-semibold text-ink-500 hover:text-ink-700 uppercase tracking-wide transition-colors">Reset zoom</button>
-            <button @click="rebuildGraph" class="text-[10px] font-semibold text-ink-500 hover:text-ink-700 uppercase tracking-wide transition-colors">Re-layout</button>
+            <button @click="resetZoom" class="text-[10px] font-semibold text-ink-500 hover:text-ink-700 uppercase tracking-wide transition-colors">{{ t('graph.resetZoom') }}</button>
+            <button @click="rebuildGraph" class="text-[10px] font-semibold text-ink-500 hover:text-ink-700 uppercase tracking-wide transition-colors">{{ t('graph.reLayout') }}</button>
           </div>
 
           <div v-if="nodeCount > 0" class="mt-3 pt-3 border-t border-ink-100/40">
-            <div class="text-[10px] font-semibold text-ink-400 uppercase tracking-wide mb-2">Node labels</div>
+            <div class="text-[10px] font-semibold text-ink-400 uppercase tracking-wide mb-2">{{ t('graph.nodeLabels') }}</div>
             <div class="flex gap-1">
               <button
                 @click="labelMode = 'designation'; rebuildGraph()"
                 class="text-[10px] px-2 py-1 rounded font-medium transition-colors"
                 :class="labelMode === 'designation' ? 'bg-ink-800 text-white' : 'text-ink-500 hover:bg-ink-50'"
-              >Designation</button>
+              >{{ t('graph.designation') }}</button>
               <button
                 @click="labelMode = 'identifier'; rebuildGraph()"
                 class="text-[10px] px-2 py-1 rounded font-medium transition-colors"
                 :class="labelMode === 'identifier' ? 'bg-ink-800 text-white' : 'text-ink-500 hover:bg-ink-50'"
-              >Identifier</button>
+              >{{ t('graph.identifier') }}</button>
             </div>
           </div>
 
           <div v-if="nodeCount === 0" class="text-xs text-ink-300 mt-3 leading-relaxed">
-            {{ props.edges.length > 0 ? 'Enable datasets to see their graph.' : 'Browse concepts with cross-references to populate the graph.' }}
+            {{ props.edges.length > 0 ? t('graph.enableDatasets') : t('graph.browseToPopulate') }}
           </div>
         </div>
       </div>
@@ -549,7 +551,7 @@ function selectedNodeColor(): string {
     <!-- Legend -->
     <div v-if="nodeCount > 0" class="absolute top-4 right-4 z-10 bg-surface-raised/90 backdrop-blur rounded-lg px-3 py-2.5 border border-ink-100/60 text-xs" style="box-shadow: 0 2px 6px rgba(26, 27, 46, 0.04);">
       <div v-if="registers.length > 1">
-        <div class="font-semibold text-ink-400 text-[10px] uppercase tracking-wide mb-2">Datasets</div>
+        <div class="font-semibold text-ink-400 text-[10px] uppercase tracking-wide mb-2">{{ t('graph.datasets') }}</div>
         <div v-for="reg in registers" :key="reg.id" class="flex items-center gap-2 mb-1.5 last:mb-0">
           <span
             class="w-2.5 h-2.5 rounded-full inline-block flex-shrink-0"
@@ -560,11 +562,11 @@ function selectedNodeColor(): string {
       </div>
       <div class="flex items-center gap-2 mt-2 pt-2 border-t border-ink-100/40">
         <span class="w-2 h-2 rounded-full inline-block" :style="{ backgroundColor: STUB_COLOR }"></span>
-        <span class="text-ink-300">Stub (not loaded)</span>
+        <span class="text-ink-300">{{ t('graph.stubLabel') }}</span>
       </div>
       <div class="flex items-center gap-2 mt-2 pt-2 border-t border-ink-100/40">
         <span class="w-4 h-2 rounded inline-block flex-shrink-0" style="background: #ede9fe; border: 1px solid #8b5cf6;"></span>
-        <span class="text-ink-300">Domain (standard)</span>
+        <span class="text-ink-300">{{ t('graph.domainLabel') }}</span>
       </div>
     </div>
 
@@ -590,7 +592,7 @@ function selectedNodeColor(): string {
             ></span>
             <span class="text-[10px] text-ink-400 uppercase tracking-wide">
               {{ registerTitle(selectedNode.register) }} &middot;
-              {{ selectedNode.loaded ? 'loaded' : 'stub' }}
+              {{ selectedNode.loaded ? t('graph.loadedStatus') : t('graph.stubStatus') }}
             </span>
           </div>
         </div>
@@ -603,7 +605,7 @@ function selectedNodeColor(): string {
         :to="{ name: 'concept', params: { registerId: selectedNode.register, conceptId: selectedNode.conceptId } }"
         class="btn-primary text-xs mt-4 inline-block"
       >
-        View concept
+        {{ t('graph.viewConcept') }}
       </router-link>
     </div>
   </div>

package/src/components/SearchBar.vue

@@ -6,11 +6,13 @@ import { ref, watch, onMounted, computed, nextTick } from 'vue';
 import type { SearchHit } from '../adapters/types';
 import { langLabel, langName } from '../utils/lang';
 import { useDsStyle } from '../utils/dataset-style';
+import { useI18n } from '../i18n';
 
 const router = useRouter();
 const ui = useUiStore();
 const store = useVocabularyStore();
 const { getStyle } = useDsStyle();
+const { t } = useI18n();
 const query = ref('');
 const results = ref<SearchHit[]>([]);
 const searched = ref(false);
@@ -154,7 +156,6 @@ onMounted(() => {
             @input="onInput"
             @keydown="onKeydown"
             type="text"
-            aria-label="Search terms across all datasets"
             placeholder="Search terms across all datasets..."
             class="w-full pl-9 pr-8 py-2.5 text-sm bg-surface border border-ink-100 rounded-lg focus:ring-2 focus:ring-ink-200 focus:border-ink-400 outline-none placeholder:text-ink-300 transition-all"
             autofocus
@@ -175,7 +176,7 @@ onMounted(() => {
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
           </button>
         </div>
-        <button type="submit" class="btn-primary" :disabled="loading">Search</button>
+        <button type="submit" class="btn-primary" :disabled="loading">{{ t('search.button') }}</button>
       </div>
     </form>
 
@@ -184,23 +185,23 @@ onMounted(() => {
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
       </svg>
-      <p class="text-sm text-ink-400">Searching across datasets...</p>
+      <p class="text-sm text-ink-400">{{ t('search.searching') }}</p>
     </div>
 
     <div v-else-if="searchError" class="text-center py-16">
       <div class="card p-8 border-red-200 bg-red-50/50 max-w-md mx-auto">
-        <p class="text-red-700 font-medium mb-1">Search failed</p>
+        <p class="text-red-700 font-medium mb-1">{{ t('search.failed') }}</p>
         <p class="text-sm text-red-600/80 mb-4">{{ searchError }}</p>
-        <button @click="doSearch" class="btn-primary">Retry</button>
+        <button @click="doSearch" class="btn-primary">{{ t('search.retry') }}</button>
       </div>
     </div>
 
     <div v-else-if="searched">
-      <p class="text-sm text-ink-400 mb-4">{{ results.length }} result{{ results.length === 1 ? '' : 's' }} for &ldquo;{{ ui.searchQuery }}&rdquo;</p>
+      <p class="text-sm text-ink-400 mb-4">{{ results.length === 1 ? t('search.oneResultFor', { query: ui.searchQuery }) : t('search.manyResultsFor', { count: String(results.length), query: ui.searchQuery }) }}</p>
       <div v-if="results.length === 0" class="text-center py-16">
         <div class="text-ink-200 text-5xl mb-4 font-serif">&empty;</div>
-        <p class="text-ink-500 font-medium">No concepts found matching your search</p>
-        <p class="text-sm text-ink-300 mt-1">Try a different term or check the spelling.</p>
+        <p class="text-ink-500 font-medium">{{ t('search.noResults') }}</p>
+        <p class="text-sm text-ink-300 mt-1">{{ t('search.tryDifferent') }}</p>
       </div>
 
       <!-- Grouped results -->
@@ -210,7 +211,7 @@ onMounted(() => {
           <div class="flex items-center gap-2 mb-2">
             <span class="w-2 h-2 rounded-full flex-shrink-0" :style="{ backgroundColor: group.style.color }"></span>
             <span class="text-xs font-semibold text-ink-500 uppercase tracking-wide">{{ group.title }}</span>
-            <span class="text-xs text-ink-300">{{ group.hits.length }} result{{ group.hits.length === 1 ? '' : 's' }}</span>
+            <span class="text-xs text-ink-300">{{ group.hits.length }} {{ group.hits.length === 1 ? t('search.result') : t('search.results') }}</span>
           </div>
           <!-- Hits -->
           <div class="space-y-1.5">
@@ -227,7 +228,7 @@ onMounted(() => {
                 <span v-if="hit.snippet" class="block text-xs text-ink-300 mt-0.5 truncate">{{ hit.snippet }}</span>
               </div>
               <div class="flex items-center gap-2 flex-shrink-0">
-                <span v-if="hit.matchField === 'id'" class="badge badge-gray text-[10px]">ID match</span>
+                <span v-if="hit.matchField === 'id'" class="badge badge-gray text-[10px]">{{ t('search.idMatch') }}</span>
                 <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langName(hit.language) }}</span>
               </div>
             </button>
@@ -236,7 +237,7 @@ onMounted(() => {
       </div>
 
       <div v-if="results.length > 100" class="text-center text-sm text-ink-300 mt-6 pt-4 border-t border-ink-100/60">
-        Showing first 100 of {{ results.length }} results. Refine your search for more specific matches.
+        {{ t('search.showingFirst', { max: '100', total: String(results.length) }) }}
       </div>
     </div>
   </div>

package/src/config/types.ts

@@ -12,6 +12,10 @@ export interface LogoConfig {
   alt: string;
   url?: string;
   remoteUrl?: string;
+  light?: string;
+  dark?: string;
+  localLight?: string;
+  localDark?: string;
 }
 
 export interface SiteBranding {
@@ -91,6 +95,7 @@ export interface DatasetConfig {
   tags?: string[];
   languageOrder?: string[];
   downloads?: string[];
+  translations?: Record<string, { title?: string; description?: string }>;
 }
 
 // === Contributors ===
@@ -141,6 +146,7 @@ export interface SiteConfig {
   title: string;
   subtitle?: string;
   description?: string;
+  translations?: Record<string, { title?: string; subtitle?: string; description?: string }>;
   datasets: DatasetConfig[];
   routing: RoutingEntry[];
   branding: SiteBranding;

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

@@ -1,5 +1,6 @@
 import { ref, computed } from 'vue';
 import type { PageConfig } from './types';
+import { locale } from '../i18n';
 
 export interface RuntimeSiteConfig {
   id: string;
@@ -8,6 +9,8 @@ export interface RuntimeSiteConfig {
   title: string;
   subtitle?: string;
   description?: string;
+  translations?: Record<string, { title?: string; subtitle?: string; description?: string }>;
+  datasetTranslations?: Record<string, Record<string, { title?: string; description?: string }>>;
   datasets: string[];
   defaultDataset?: string;
   uiLanguages?: { code: string; label: string }[];
@@ -18,8 +21,8 @@ export interface RuntimeSiteConfig {
       header?: { family: string; source: string; weights?: number[]; url?: string };
       body?: { family: string; source: string; weights?: number[]; url?: string };
     };
-    logo?: { path: string; alt: string; url?: string };
-    footerLogo?: { path: string; alt: string; url?: string };
+    logo?: { path: string; alt: string; url?: string; light?: string; dark?: string };
+    footerLogo?: { path: string; alt: string; url?: string; light?: string; dark?: string };
     ownerName?: string;
     ownerUrl?: string;
   };
@@ -151,6 +154,26 @@ export function useSiteConfig() {
   const config = computed(() => siteConfig.value);
   const visibleDatasets = computed(() => siteConfig.value?.datasets ?? []);
 
+  const localizedTitle = computed(() => {
+    const tr = siteConfig.value?.translations?.[locale.value];
+    return tr?.title ?? siteConfig.value?.title ?? 'Glossarist';
+  });
+
+  const localizedSubtitle = computed(() => {
+    const tr = siteConfig.value?.translations?.[locale.value];
+    return tr?.subtitle ?? siteConfig.value?.subtitle;
+  });
+
+  const localizedDescription = computed(() => {
+    const tr = siteConfig.value?.translations?.[locale.value];
+    return tr?.description ?? siteConfig.value?.description;
+  });
+
+  function localizedDatasetField(datasetId: string, field: 'title' | 'description', fallback?: string): string {
+    const tr = siteConfig.value?.datasetTranslations?.[datasetId]?.[locale.value];
+    return tr?.[field] ?? fallback ?? '';
+  }
+
   const globalPages = computed<PageConfig[]>(() =>
     synthesizeGlobalPages(siteConfig.value?.features, siteConfig.value?.pages),
   );
@@ -159,5 +182,5 @@ export function useSiteConfig() {
     synthesizeDatasetPages(siteConfig.value?.features, siteConfig.value?.pages),
   );
 
-  return { config, visibleDatasets, loadConfig, globalPages, datasetPages };
+  return { config, visibleDatasets, localizedTitle, localizedSubtitle, localizedDescription, localizedDatasetField, loadConfig, globalPages, datasetPages };
 }

package/src/i18n/index.ts

@@ -20,6 +20,8 @@ const stored = typeof localStorage !== 'undefined'
   : DEFAULT_LANG;
 const locale = ref(stored);
 
+export { locale };
+
 export function useI18n() {
   function t(key: string, params?: Record<string, string>): string {
     let msg = messages[locale.value]?.[key] || messages[DEFAULT_LANG]?.[key] || key;

package/src/i18n/locales/eng.yml

@@ -7,7 +7,7 @@ nav.search: Search
 nav.graph: Graph View
 nav.ontology: Ontology
 nav.concepts: Concepts
-nav.statistics: Statistics
+nav.stats: Statistics
 nav.about: About
 nav.navigation: Navigation
 nav.datasets: Datasets
@@ -27,6 +27,19 @@ home.browseConcepts: Browse concepts
 # Search
 search.placeholder: Search...
 search.conceptSearch: Search concepts
+search.fullPlaceholder: Search terms across all datasets...
+search.button: Search
+search.searching: Searching across datasets...
+search.failed: Search failed
+search.retry: Retry
+search.result: result
+search.results: results
+search.oneResultFor: '1 result for "{query}"'
+search.manyResultsFor: '{count} results for "{query}"'
+search.noResults: No concepts found matching your search
+search.tryDifferent: Try a different term or check the spelling.
+search.showingFirst: Showing first {max} of {total} results. Refine your search for more specific matches.
+search.idMatch: ID match
 
 # Page view
 page.notFound: Page Not Found
@@ -64,3 +77,52 @@ header.datasets: datasets
 
 # Language
 lang.termOnlyIn: Term only in
+
+# Dataset view
+dataset.concepts: concepts
+dataset.languages: languages
+dataset.filterPlaceholder: "Filter concepts... (press /)"
+dataset.of: of
+dataset.in: in
+dataset.all: All
+dataset.prev: Prev
+dataset.next: Next
+dataset.noMatch: No concepts match your filter
+dataset.clearFilter: Clear filter
+dataset.noConcepts: This dataset has no concepts
+dataset.failedToLoad: Failed to load dataset
+dataset.retry: Retry
+dataset.backToHome: Back to home
+dataset.download: Download
+
+# Statistics view
+stats.title: Statistics
+stats.summary: "{count} concepts across {langCount} languages."
+stats.language: Language
+stats.terms: Terms
+stats.definitions: Definitions
+stats.failedToLoad: Failed to load statistics
+stats.retry: Retry
+
+# Graph
+graph.nodes: nodes
+graph.edges: edges
+graph.all: All
+graph.none: None
+graph.resetZoom: Reset zoom
+graph.reLayout: Re-layout
+graph.nodeLabels: Node labels
+graph.designation: Designation
+graph.identifier: Identifier
+graph.viewConcept: View concept
+graph.stubLabel: Stub (not loaded)
+graph.domainLabel: Domain (standard)
+graph.datasets: Datasets
+graph.enableDatasets: Enable datasets to see their graph.
+graph.browseToPopulate: Browse concepts with cross-references to populate the graph.
+graph.renderingWarning: "Rendering first {max} of {total} nodes."
+graph.loadedStatus: loaded
+graph.stubStatus: stub
+graph.collapseControls: Collapse controls
+graph.expandControls: Expand controls
+graph.loading: Loading graph data...

package/src/i18n/locales/fra.yml

@@ -7,7 +7,7 @@ nav.search: Recherche
 nav.graph: Vue en graphe
 nav.ontology: Ontologie
 nav.concepts: Concepts
-nav.statistics: Statistiques
+nav.stats: Statistiques
 nav.about: À propos
 nav.navigation: Navigation
 nav.datasets: Jeux de données
@@ -27,11 +27,24 @@ home.browseConcepts: Parcourir les concepts
 # Search
 search.placeholder: Rechercher…
 search.conceptSearch: Rechercher des concepts
+search.fullPlaceholder: Rechercher des termes dans tous les jeux de données…
+search.button: Rechercher
+search.searching: Recherche dans les jeux de données...
+search.failed: Échec de la recherche
+search.retry: Réessayer
+search.result: résultat
+search.results: résultats
+search.oneResultFor: '1 résultat pour « {query} »'
+search.manyResultsFor: '{count} résultats pour « {query} »'
+search.noResults: Aucun concept trouvé correspondant à votre recherche
+search.tryDifferent: Essayez un autre terme ou vérifiez l'orthographe.
+search.showingFirst: Affichage des {max} premiers résultats sur {total}. Affinez votre recherche.
+search.idMatch: Correspondance d'identifiant
 
 # Page view
 page.notFound: Page non trouvée
 page.notFoundMsg: 'La page « {name} » n''existe pas.'
-page.goHome: Aller à l'accueil
+page.goHome: Aller à l''accueil
 
 # Concept detail
 concept.definition: Définition
@@ -64,3 +77,52 @@ header.datasets: jeux de données
 
 # Language
 lang.termOnlyIn: Terme uniquement en
+
+# Dataset view
+dataset.concepts: concepts
+dataset.languages: langues
+dataset.filterPlaceholder: "Filtrer les concepts… (appuyez sur /)"
+dataset.of: de
+dataset.in: en
+dataset.all: Tous
+dataset.prev: Préc.
+dataset.next: Suiv.
+dataset.noMatch: Aucun concept ne correspond au filtre
+dataset.clearFilter: Effacer le filtre
+dataset.noConcepts: Ce jeu de données n'a aucun concept
+dataset.failedToLoad: Échec du chargement du jeu de données
+dataset.retry: Réessayer
+dataset.backToHome: Retour à l'accueil
+dataset.download: Télécharger
+
+# Statistics view
+stats.title: Statistiques
+stats.summary: "{count} concepts dans {langCount} langues."
+stats.language: Langue
+stats.terms: Termes
+stats.definitions: Définitions
+stats.failedToLoad: Échec du chargement des statistiques
+stats.retry: Réessayer
+
+# Graph
+graph.nodes: nœuds
+graph.edges: arêtes
+graph.all: Tous
+graph.none: Aucun
+graph.resetZoom: Réinitialiser le zoom
+graph.reLayout: Réorganiser
+graph.nodeLabels: Étiquettes des nœuds
+graph.designation: Désignation
+graph.identifier: Identifiant
+graph.viewConcept: Voir le concept
+graph.stubLabel: Non chargé
+graph.domainLabel: Domaine (standard)
+graph.datasets: Jeux de données
+graph.enableDatasets: Activez les jeux de données pour voir leur graphe.
+graph.browseToPopulate: Parcourez les concepts avec des renvois croisés pour remplir le graphe.
+graph.renderingWarning: "Affichage des {max} premiers nœuds sur {total}."
+graph.loadedStatus: chargé
+graph.stubStatus: non chargé
+graph.collapseControls: Réduire les contrôles
+graph.expandControls: Développer les contrôles
+graph.loading: Chargement des données du graphe...

package/src/views/AboutView.vue

@@ -4,10 +4,12 @@ import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
 import { langName, langLabel } from '../utils/lang';
+import { useI18n } from '../i18n';
 
 const props = defineProps<{ registerId?: string }>();
 
 const store = useVocabularyStore();
+const { t } = useI18n();
 const { getColor } = useDsStyle();
 const { loading, localError, ensureLoaded, resolvedId } = useDatasetLoader(() => props.registerId);
 
@@ -18,7 +20,7 @@ const manifest = computed(() => store.manifests.get(resolvedId.value));
   <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">Home</router-link>
+      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
       <span class="text-ink-200">/</span>
       <router-link :to="{ name: 'dataset', params: { registerId: resolvedId } }" class="hover:text-ink-700 transition-colors">{{ manifest?.title || resolvedId }}</router-link>
       <span class="text-ink-200">/</span>

package/src/views/ContributorsView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useSiteConfig } from '../config/use-site-config';
+import { useI18n } from '../i18n';
 
 interface Contributor {
   name: string;
@@ -9,6 +10,9 @@ interface Contributor {
   email?: string;
 }
 
+const { config: siteConfig } = useSiteConfig();
+const { t } = useI18n();
+
 const { config } = useSiteConfig();
 const contributors = config.value?.contributors as Contributor[] | undefined;
 </script>
@@ -16,7 +20,7 @@ const contributors = config.value?.contributors as Contributor[] | undefined;
 <template>
   <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <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">Home</router-link>
+      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
       <span class="text-ink-200">/</span>
       <span class="text-ink-700">Contributors</span>
     </nav>

package/src/views/DatasetView.vue

@@ -6,12 +6,14 @@ import { useDatasetLoader } from '../composables/use-dataset-loader';
 import { FORMAT_LABELS } from '../config/types';
 import { langName, langLabel, sortLanguages } from '../utils/lang';
 import ConceptCard from '../components/ConceptCard.vue';
+import { useI18n } from '../i18n';
 
 const props = defineProps<{ registerId: string }>();
 
 const store = useVocabularyStore();
 const { getStyle } = useDsStyle();
 const { loading, localError, ensureLoaded } = useDatasetLoader(() => props.registerId);
+const { t } = useI18n();
 
 const manifest = computed(() => store.manifests.get(props.registerId));
 const adapter = computed(() => store.datasets.get(props.registerId));
@@ -180,7 +182,7 @@ function goToPage(p: number) {
   <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">Home</router-link>
+      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
       <span class="text-ink-200">/</span>
       <span class="text-ink-700">{{ manifest?.title || registerId }}</span>
     </nav>
@@ -190,21 +192,21 @@ function goToPage(p: number) {
       <h1 class="font-serif text-3xl text-ink-800 mb-2">{{ manifest.title }}</h1>
       <p class="text-ink-400 leading-relaxed max-w-2xl">{{ manifest.description }}</p>
       <div class="flex flex-wrap gap-2 mt-4">
-        <span class="badge" :style="{ backgroundColor: getStyle(registerId).light, color: getStyle(registerId).dark }">{{ manifest.conceptCount.toLocaleString() }} concepts</span>
-        <span class="badge badge-gray">{{ manifest.languages.length }} languages</span>
+        <span class="badge" :style="{ backgroundColor: getStyle(registerId).light, color: getStyle(registerId).dark }">{{ manifest.conceptCount.toLocaleString() }} {{ t('dataset.concepts') }}</span>
+        <span class="badge badge-gray">{{ manifest.languages.length }} {{ t('dataset.languages') }}</span>
         <span class="badge badge-green">{{ manifest.owner }}</span>
         <router-link :to="{ name: 'stats', params: { registerId } }" class="badge badge-blue hover:opacity-80 transition-opacity">
-          Statistics
+          {{ t('nav.stats') }}
         </router-link>
         <router-link :to="{ name: 'about', params: { registerId } }" class="badge badge-purple hover:opacity-80 transition-opacity">
-          About
+          {{ t('nav.about') }}
         </router-link>
       </div>
     </div>
 
     <!-- Downloads -->
     <div v-if="bulkDownloads.length" class="card p-4 mb-6">
-      <h3 class="text-xs font-semibold text-ink-400 uppercase tracking-wide mb-3">Download</h3>
+      <h3 class="text-xs font-semibold text-ink-400 uppercase tracking-wide mb-3">{{ t('dataset.download') }}</h3>
       <div class="flex flex-wrap gap-2">
         <a
           v-for="dl in bulkDownloads"
@@ -237,11 +239,11 @@ function goToPage(p: number) {
     <!-- Error state -->
     <div v-else-if="localError" class="max-w-xl mx-auto text-center py-20">
       <div class="card p-8 border-red-200 bg-red-50/50">
-        <p class="text-red-700 font-medium mb-1">Failed to load dataset</p>
+        <p class="text-red-700 font-medium mb-1">{{ t('dataset.failedToLoad') }}</p>
         <p class="text-sm text-red-600/80 mb-4">{{ localError }}</p>
         <div class="flex gap-2 justify-center">
-          <button @click="ensureLoaded" class="btn-primary">Retry</button>
-          <router-link :to="{ name: 'home' }" class="btn-secondary">Back to home</router-link>
+          <button @click="ensureLoaded" class="btn-primary">{{ t('dataset.retry') }}</button>
+          <router-link :to="{ name: 'home' }" class="btn-secondary">{{ t('dataset.backToHome') }}</router-link>
         </div>
       </div>
     </div>
@@ -255,7 +257,7 @@ function goToPage(p: number) {
             v-model="filter"
             type="text"
             aria-label="Filter concepts"
-            placeholder="Filter concepts... (press /)"
+            placeholder="Filter concepts..."
             class="pl-9 pr-3 py-2 text-sm bg-surface border border-ink-100 rounded-lg focus:ring-2 focus:ring-ink-200 focus:border-ink-400 outline-none placeholder:text-ink-300 transition-all w-full sm:w-64"
           />
           <svg class="absolute left-3 top-2.5 w-4 h-4 text-ink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -264,16 +266,16 @@ function goToPage(p: number) {
         </div>
         <span class="text-sm text-ink-400">
           <template v-if="selectedLang">
-            {{ filtered.length.toLocaleString() }} of {{ totalConceptCount.toLocaleString() }} concepts in {{ langName(selectedLang) }}
+            {{ filtered.length.toLocaleString() }} {{ t('dataset.of') }} {{ totalConceptCount.toLocaleString() }} {{ t('dataset.concepts') }} {{ t('dataset.in') }} {{ langName(selectedLang) }}
           </template>
           <template v-else-if="filter.trim()">
-            {{ filtered.length.toLocaleString() }} of {{ totalConceptCount.toLocaleString() }} concepts
+            {{ filtered.length.toLocaleString() }} {{ t('dataset.of') }} {{ totalConceptCount.toLocaleString() }} {{ t('dataset.concepts') }}
           </template>
           <template v-else-if="totalPages > 1">
-            {{ ((page - 1) * perPage + 1).toLocaleString() }}–{{ Math.min(page * perPage, totalConceptCount).toLocaleString() }} of {{ totalConceptCount.toLocaleString() }} concepts
+            {{ ((page - 1) * perPage + 1).toLocaleString() }}–{{ Math.min(page * perPage, totalConceptCount).toLocaleString() }} {{ t('dataset.of') }} {{ totalConceptCount.toLocaleString() }} {{ t('dataset.concepts') }}
           </template>
           <template v-else>
-            {{ totalConceptCount.toLocaleString() }} concepts
+            {{ totalConceptCount.toLocaleString() }} {{ t('dataset.concepts') }}
           </template>
         </span>
       </div>
@@ -289,7 +291,7 @@ function goToPage(p: number) {
           ]"
           class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
         >
-          All {{ totalConceptCount.toLocaleString() }}
+          {{ t('dataset.all') }} {{ totalConceptCount.toLocaleString() }}
         </button>
         <button
           v-for="lang in languageOptions"
@@ -333,11 +335,11 @@ function goToPage(p: number) {
       <div v-else class="text-center py-20">
         <div class="text-ink-200 text-5xl mb-4 font-serif">&empty;</div>
         <template v-if="filter.trim()">
-          <p class="text-ink-500 font-medium mb-1">No concepts match your filter</p>
-          <button @click="filter = ''" class="text-sm concept-link mt-1">Clear filter</button>
+          <p class="text-ink-500 font-medium mb-1">{{ t('dataset.noMatch') }}</p>
+          <button @click="filter = ''" class="text-sm concept-link mt-1">{{ t('dataset.clearFilter') }}</button>
         </template>
         <template v-else>
-          <p class="text-ink-500 font-medium mb-1">This dataset has no concepts</p>
+          <p class="text-ink-500 font-medium mb-1">{{ t('dataset.noConcepts') }}</p>
         </template>
       </div>
 
@@ -347,7 +349,7 @@ function goToPage(p: number) {
           :disabled="page <= 1"
           @click="goToPage(page - 1)"
           class="btn-secondary disabled:opacity-30 text-xs"
-        >&larr; Prev</button>
+        >&larr; {{ t('dataset.prev') }}</button>
         <template v-for="p in visiblePages" :key="p">
           <span v-if="p < 0" class="text-ink-300 px-0.5">&hellip;</span>
           <button
@@ -361,7 +363,7 @@ function goToPage(p: number) {
           :disabled="page >= totalPages"
           @click="goToPage(page + 1)"
           class="btn-secondary disabled:opacity-30 text-xs"
-        >Next &rarr;</button>
+        >{{ t('dataset.next') }} &rarr;</button>
       </div>
     </template>
   </div>

package/src/views/GraphView.vue

@@ -2,8 +2,10 @@
 import { computed, onMounted, ref } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
 import GraphPanel from '../components/GraphPanel.vue';
+import { useI18n } from '../i18n';
 
 const store = useVocabularyStore();
+const { t } = useI18n();
 const graphLoading = ref(true);
 
 // Depend on graphVersion so computed re-evaluates when edges are added
@@ -44,19 +46,19 @@ onMounted(async () => {
   <div class="flex flex-col" style="height: calc(100vh - 56px)">
     <div class="px-4 sm:px-6 py-3 border-b border-ink-100/60 bg-surface-raised flex items-center gap-3 flex-shrink-0">
       <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400">
-        <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">Home</router-link>
+        <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
         <span class="text-ink-200">/</span>
-        <span class="text-ink-700">Graph View</span>
+        <span class="text-ink-700">{{ t('nav.graph') }}</span>
       </nav>
       <span class="text-xs text-ink-300 ml-1">
-        {{ graphEdges.length.toLocaleString() }} edges
+        {{ graphEdges.length.toLocaleString() }} {{ t('graph.edges') }}
       </span>
     </div>
     <div class="flex-1 min-h-0">
       <div v-if="graphLoading" class="flex items-center justify-center h-full">
         <div class="text-center">
           <div class="w-8 h-8 border-2 border-ink-200 border-t-ink-600 rounded-full animate-spin mx-auto mb-3"></div>
-          <p class="text-sm text-ink-400">Loading graph data&hellip;</p>
+          <p class="text-sm text-ink-400">{{ t('graph.loading') }}</p>
         </div>
       </div>
       <GraphPanel v-else :nodes="graphNodes" :edges="graphEdges" :registers="registers" />

package/src/views/HomeView.vue

@@ -9,7 +9,7 @@ import { useI18n } from '../i18n';
 const store = useVocabularyStore();
 const router = useRouter();
 const { getStyle } = useDsStyle();
-const { config: siteConfig } = useSiteConfig();
+const { config: siteConfig, localizedTitle, localizedSubtitle, localizedDescription } = useSiteConfig();
 const { t } = useI18n();
 const exploring = ref(false);
 
@@ -65,15 +65,15 @@ function goToGraph() { router.push({ name: 'graph' }); }
         <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-300">{{ siteConfig?.branding?.ownerName || 'Glossarist' }}</span>
         <template v-if="siteConfig?.subtitle">
           <span class="w-4 sm:w-6 h-px bg-ink-200"></span>
-          <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-300 hidden sm:inline">{{ siteConfig.subtitle }}</span>
+          <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-300 hidden sm:inline">{{ localizedSubtitle }}</span>
         </template>
       </div>
       <h1 class="font-serif text-[2rem] sm:text-[2.75rem] text-ink-800 leading-[1.1] mb-4 tracking-tight">
-        {{ siteConfig?.title || 'Glossarist' }}
-        <template v-if="siteConfig?.subtitle"><br class="hidden sm:block" /> {{ siteConfig.subtitle }}</template>
+        {{ localizedTitle }}
+        <template v-if="localizedSubtitle"><br class="hidden sm:block" /> {{ localizedSubtitle }}</template>
       </h1>
       <p class="text-base text-ink-400 max-w-lg leading-relaxed">
-        {{ siteConfig?.description || 'Explore standardized terminology datasets from ISO and IEC technical committees. Browse concepts, definitions, and cross-references across multilingual vocabularies.' }}
+        {{ localizedDescription || 'Explore standardized terminology datasets from ISO and IEC technical committees. Browse concepts, definitions, and cross-references across multilingual vocabularies.' }}
       </p>
       <div class="flex flex-wrap gap-3 mt-7">
         <button @click="goToSearch" class="btn-primary flex items-center gap-2">

package/src/views/NewsView.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted } from 'vue';
 import { useSiteConfig } from '../config/use-site-config';
 import { renderAsciiDocLite } from '../utils/asciidoc-lite';
+import { useI18n } from '../i18n';
 
 interface NewsPost {
   slug: string;
@@ -13,6 +14,7 @@ interface NewsPost {
 }
 
 const { config } = useSiteConfig();
+const { t } = useI18n();
 const posts = ref<NewsPost[]>([]);
 const loading = ref(true);
 const error = ref<string | null>(null);
@@ -80,7 +82,7 @@ function formatDate(dateStr: string) {
 <template>
   <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <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">Home</router-link>
+      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
       <span class="text-ink-200">/</span>
       <span class="text-ink-700">News</span>
     </nav>

package/src/views/StatsView.vue

@@ -4,12 +4,14 @@ import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
 import { langName, langLabel } from '../utils/lang';
+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));
 
@@ -71,11 +73,11 @@ function coverageColor(ratio: number): string {
   <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">Home</router-link>
+      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
       <span class="text-ink-200">/</span>
       <router-link :to="{ name: 'dataset', params: { registerId: resolvedId } }" class="hover:text-ink-700 transition-colors">{{ manifest?.title || resolvedId }}</router-link>
       <span class="text-ink-200">/</span>
-      <span class="text-ink-700">Statistics</span>
+      <span class="text-ink-700">{{ t('stats.title') }}</span>
     </nav>
 
     <template v-if="loading">
@@ -89,15 +91,15 @@ function coverageColor(ratio: number): string {
     </template>
     <template v-else-if="localError">
       <div class="card p-8 border-red-200 bg-red-50/50 text-center">
-        <p class="text-red-700 font-medium mb-1">Failed to load statistics</p>
+        <p class="text-red-700 font-medium mb-1">{{ t('stats.failedToLoad') }}</p>
         <p class="text-sm text-red-600/80 mb-4">{{ localError }}</p>
-        <button @click="ensureLoaded" class="btn-primary">Retry</button>
+        <button @click="ensureLoaded" class="btn-primary">{{ t('stats.retry') }}</button>
       </div>
     </template>
     <template v-else-if="manifest">
-      <h1 class="font-serif text-3xl text-ink-800 mb-2">Statistics</h1>
+      <h1 class="font-serif text-3xl text-ink-800 mb-2">{{ t('stats.title') }}</h1>
       <p class="text-ink-400 mb-8">
-        {{ stats.total.toLocaleString() }} concepts across {{ manifest.languages.length }} languages.
+        {{ t('stats.summary', { count: stats.total.toLocaleString(), langCount: String(manifest.languages.length) }) }}
       </p>
 
       <!-- Language stats table -->
@@ -105,9 +107,9 @@ function coverageColor(ratio: number): string {
         <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">Language</th>
-              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">Terms</th>
-              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">Definitions</th>
+              <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>