@glossarist/concept-browser 0.5.1 → 0.7.0

package/cli/index.mjs

@@ -148,6 +148,23 @@ Environment:
       process.env.FAVICON_HTML = faviconHtml;
     }
 
+    // Pass branding info for HTML transformation
+    process.env.SITE_TITLE = config?.title || 'Glossarist';
+    if (branding.fonts?.header || branding.fonts?.body) {
+      const fontFamilies = [];
+      if (branding.fonts.header?.source === 'google') {
+        const w = (branding.fonts.header.weights || [400, 700]).join(';');
+        fontFamilies.push(`family=${branding.fonts.header.family.replace(/ /g, '+')}:wght@${w}`);
+      }
+      if (branding.fonts.body?.source === 'google') {
+        const w = (branding.fonts.body.weights || [400, 700]).join(';');
+        fontFamilies.push(`family=${branding.fonts.body.family.replace(/ /g, '+')}:wght@${w}`);
+      }
+      if (fontFamilies.length) {
+        process.env.SITE_FONTS_URL = `https://fonts.googleapis.com/css2?${fontFamilies.join('&')}&display=swap`;
+      }
+    }
+
     // Run vite build using the package's vite.config.ts
     console.log(`\n=== BUILD SPA ===\n`);
     const viteConfig = resolve(pkgRoot, 'vite.config.ts');

package/package.json

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

@@ -591,6 +591,10 @@ function processDataset(dir, register, opts) {
   console.log(`Processing ${register}: ${files.length} files`);
 
   const conceptsDir = path.join(DATA, register, 'concepts');
+  // Clean previous output to avoid stale files accumulating across runs
+  if (fs.existsSync(conceptsDir)) {
+    for (const f of fs.readdirSync(conceptsDir)) fs.unlinkSync(path.join(conceptsDir, f));
+  }
   const concepts = [];
   const langTermCounts = {};
   const langDefCounts = {};
@@ -994,6 +998,19 @@ function renderMarkdown(input) {
       while (i < lines.length && /^>\s?/.test(lines[i])) { ql.push(lines[i].replace(/^>\s?/, '')); i++; }
       blocks.push(`<blockquote>${renderInline(ql.join(' '))}</blockquote>`); continue;
     }
+    if (/^\|(.+)\|$/.test(line) && i + 1 < lines.length && /^\|[-:| ]+\|$/.test(lines[i + 1])) {
+      const headerCells = line.split('|').map(c => c.trim()).filter(Boolean);
+      i += 2;
+      const rows = [];
+      while (i < lines.length && /^\|(.+)\|$/.test(lines[i])) {
+        rows.push(lines[i].split('|').map(c => c.trim()).filter(Boolean));
+        i++;
+      }
+      const thCells = headerCells.map(c => `<th>${renderInline(c)}</th>`).join('');
+      const trRows = rows.map(r => `<tr>${r.map(c => `<td>${renderInline(c)}</td>`).join('')}</tr>`).join('');
+      blocks.push(`<table><thead><tr>${thCells}</tr></thead><tbody>${trRows}</tbody></table>`);
+      continue;
+    }
     if (!line.trim()) { i++; continue; }
     const pl = [];
     while (i < lines.length && lines[i].trim() && !/^#{1,4}\s/.test(lines[i]) && !/^\s*[-*]\s+/.test(lines[i]) && !/^\s*\d+\.\s+/.test(lines[i]) && !/^>\s?/.test(lines[i]) && !lines[i].trimStart().startsWith('```')) { pl.push(lines[i]); i++; }
@@ -1026,6 +1043,29 @@ function processContentPage(config, page) {
   fs.mkdirSync(pagesDir, { recursive: true });
   writeJson(path.join(pagesDir, `${page.route}.json`), { title: page.title, html });
   console.log(`  Generated content page: ${page.route} (${ext})`);
+
+  // Generate localized versions
+  if (page.translations) {
+    for (const [lang, tr] of Object.entries(page.translations)) {
+      const { source, title: trTitle } = tr;
+      if (!source) continue;
+      const trSrcPath = path.resolve(ROOT, source);
+      if (!fs.existsSync(trSrcPath)) {
+        console.warn(`  Skipping '${page.route}' translation '${lang}': source not found (${trSrcPath})`);
+        continue;
+      }
+      const trRaw = fs.readFileSync(trSrcPath, 'utf8');
+      const trExt = path.extname(trSrcPath).toLowerCase();
+      let trHtml;
+      if (trExt === '.html' || trExt === '.htm') {
+        trHtml = trRaw;
+      } else {
+        trHtml = renderMarkdown(stripFrontmatter(trRaw));
+      }
+      writeJson(path.join(pagesDir, `${page.route}.${lang}.json`), { title: trTitle || page.title, html: trHtml });
+      console.log(`  Generated localized page: ${page.route}.${lang} (${trExt})`);
+    }
+  }
 }
 
 function stripFrontmatter(text) {
@@ -1073,14 +1113,23 @@ for (const key of ['logo', 'footerLogo']) {
   }
 }
 
+// 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,
   analytics: config.analytics,
   features: config.features,

package/src/App.vue

@@ -2,12 +2,14 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 import { useVocabularyStore } from './stores/vocabulary';
 import { useSiteConfig } from './config/use-site-config';
+import { useI18n } from './i18n';
 import AppHeader from './components/AppHeader.vue';
 import AppSidebar from './components/AppSidebar.vue';
 import AppFooter from './components/AppFooter.vue';
 
 const store = useVocabularyStore();
 const { loadConfig, config } = useSiteConfig();
+const { initLocale } = useI18n();
 const appReady = ref(false);
 const showScrollTop = ref(false);
 let mainEl: HTMLElement | null = null;
@@ -25,6 +27,7 @@ onMounted(async () => {
   if (cfg?.title) {
     document.title = cfg.title;
   }
+  initLocale(cfg?.defaults?.language);
   appReady.value = true;
   // Watch scroll on main content area
   mainEl = document.querySelector('main');

package/src/__tests__/markdown-lite.test.ts

@@ -85,4 +85,30 @@ describe('renderMarkdown', () => {
     expect(result).toContain('<p>line one line two</p>');
     expect(result).toContain('<p>new paragraph</p>');
   });
+
+  it('renders markdown tables', () => {
+    const input = '| Name | Value |\n|------|-------|\n| a | 1 |\n| b | 2 |';
+    const result = renderMarkdown(input);
+    expect(result).toContain('<table>');
+    expect(result).toContain('<thead>');
+    expect(result).toContain('<th>Name</th>');
+    expect(result).toContain('<th>Value</th>');
+    expect(result).toContain('<tbody>');
+    expect(result).toContain('<td>a</td>');
+    expect(result).toContain('<td>b</td>');
+    expect(result).toContain('</table>');
+  });
+
+  it('renders table cells with inline formatting', () => {
+    const input = '| Col |\n|-----|\n| **bold** |';
+    const result = renderMarkdown(input);
+    expect(result).toContain('<td><strong>bold</strong></td>');
+  });
+
+  it('does not treat non-table pipe lines as tables', () => {
+    const input = 'some text | with pipes';
+    const result = renderMarkdown(input);
+    expect(result).toContain('<p>');
+    expect(result).not.toContain('<table>');
+  });
 });

package/src/components/AppFooter.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useSiteConfig } from '../config/use-site-config';
+import { useI18n } from '../i18n';
 
 const { config } = useSiteConfig();
+const { t } = useI18n();
 
 const poweredBy = computed(() => {
   const pb = config.value?.features?.poweredBy as { message?: string; url?: string } | undefined;
-  return { message: pb?.message || 'Built with the Glossarist Concept Browser', url: pb?.url || 'https://github.com/glossarist/concept-browser' };
+  return { message: pb?.message || t('footer.builtWith'), url: pb?.url || 'https://github.com/glossarist/concept-browser' };
 });
 
 const socialLinks = computed(() => {

package/src/components/AppHeader.vue

@@ -3,13 +3,23 @@ import { useRouter } from 'vue-router';
 import { useUiStore } from '../stores/ui';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useSiteConfig } from '../config/use-site-config';
-import { ref } from 'vue';
+import { useI18n } from '../i18n';
+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);
+
+const uiLanguages = computed(() => siteConfig.value?.uiLanguages || []);
+const showLangSelector = computed(() => uiLanguages.value.length > 1);
+const currentLangLabel = computed(() => {
+  const cur = uiLanguages.value.find(l => l.code === locale.value);
+  return cur?.label || locale.value.toUpperCase();
+});
 
 function doSearch() {
   const q = searchInput.value.trim();
@@ -22,6 +32,18 @@ function doSearch() {
 function goHome() {
   router.push({ name: 'home' });
 }
+
+function selectLang(code: string) {
+  setLocale(code);
+  langOpen.value = false;
+}
+
+function closeLangOnOutside(e: MouseEvent) {
+  if (langOpen.value) langOpen.value = false;
+}
+
+onMounted(() => document.addEventListener('click', closeLangOnOutside));
+onBeforeUnmount(() => document.removeEventListener('click', closeLangOnOutside));
 </script>
 
 <template>
@@ -55,7 +77,7 @@ function goHome() {
             <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 -->
@@ -64,8 +86,8 @@ function goHome() {
           <input
             v-model="searchInput"
             type="text"
-            aria-label="Search concepts"
-            placeholder="Search..."
+            :aria-label="t('search.conceptSearch')"
+            :placeholder="t('search.placeholder')"
             class="w-full 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"
           />
           <svg class="absolute left-3 top-2.5 w-4 h-4 text-ink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -76,7 +98,27 @@ function goHome() {
 
       <!-- Stats -->
       <div class="text-xs text-ink-400 flex-shrink-0 hidden md:block">
-        {{ store.datasetList.length }} datasets
+        {{ store.datasetList.length }} {{ t('header.datasets') }}
+      </div>
+
+      <!-- Language selector -->
+      <div v-if="showLangSelector" class="relative flex-shrink-0" @click.stop>
+        <button
+          @click="langOpen = !langOpen"
+          class="px-2.5 py-1 rounded-lg text-xs font-semibold text-ink-500 hover:text-ink-700 hover:bg-ink-50 transition-colors border border-ink-100 flex items-center gap-1"
+        >
+          {{ currentLangLabel }}
+          <svg class="w-3 h-3" 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="langOpen" class="absolute right-0 top-full mt-1 bg-surface-raised border border-ink-100 rounded-lg shadow-lg py-1 min-w-[120px] z-50">
+          <button
+            v-for="lang in uiLanguages"
+            :key="lang.code"
+            @click="selectLang(lang.code)"
+            class="w-full text-left px-3 py-1.5 text-sm transition-colors"
+            :class="locale === lang.code ? 'bg-ink-50 text-ink-800 font-medium' : 'text-ink-600 hover:bg-ink-50'"
+          >{{ lang.label }}</button>
+        </div>
       </div>
 
       <!-- Theme toggle -->

package/src/components/AppSidebar.vue

@@ -7,13 +7,15 @@ import { useDsStyle } from '../utils/dataset-style';
 import { useSiteConfig } from '../config/use-site-config';
 import { useOntologyNav, compactToSlug } from '../composables/use-ontology-nav';
 import NavIcon from './NavIcon.vue';
+import { useI18n } from '../i18n';
 
 const store = useVocabularyStore();
 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 ?? '');
 
@@ -125,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>
@@ -139,7 +148,7 @@ const isSearching = computed(() => !!searchQuery.value.trim());
   >
     <div class="p-4">
       <!-- Navigation -->
-      <div class="section-label">Navigation</div>
+      <div class="section-label">{{ t('nav.navigation') }}</div>
       <nav class="space-y-0.5 mb-6">
         <template v-for="page in globalPages" :key="page.route || 'home'">
           <router-link
@@ -149,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 -->
@@ -422,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"
@@ -433,13 +442,13 @@ const isSearching = computed(() => !!searchQuery.value.trim());
             @click="closeMobile"
           >
             <NavIcon :name="page.icon" />
-            {{ page.title }}
+            {{ navTitle(page) }}
           </router-link>
         </nav>
       </div>
 
       <!-- Datasets -->
-      <div class="section-label">Datasets</div>
+      <div class="section-label">{{ t('nav.datasets') }}</div>
       <nav class="space-y-1">
         <button
           v-for="ds in datasetEntries"
@@ -453,9 +462,9 @@ 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() }} concepts
+            {{ ds.conceptCount.toLocaleString() }} {{ t('home.concepts').toLowerCase() }}
           </div>
         </button>
       </nav>

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

@@ -21,6 +21,9 @@ import ConceptRdfView from './ConceptRdfView.vue';
 import FormatDownloads from './FormatDownloads.vue';
 import NonVerbalRepDisplay from './NonVerbalRepDisplay.vue';
 import CitationDisplay from './CitationDisplay.vue';
+import { useI18n } from '../i18n';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   concept: Concept;
@@ -363,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 }}
@@ -563,7 +566,7 @@ const nonVerbalReps = computed(() => {
               <!-- Notes -->
               <div v-if="lc.notes.length" class="space-y-2">
                 <div v-for="(note, i) in lc.notes" :key="i" class="text-ink-600 text-sm leading-relaxed">
-                  <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">Note {{ i + 1 }}</span>
+                  <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">{{ t('concept.note') }} {{ i + 1 }}</span>
                   <div class="mt-1" v-html="renderMath(note, renderOpts)"></div>
                 </div>
               </div>
@@ -571,7 +574,7 @@ const nonVerbalReps = computed(() => {
               <!-- Examples -->
               <div v-if="lc.examples.length" class="space-y-2">
                 <div v-for="(ex, i) in lc.examples" :key="i" class="text-ink-600 text-sm leading-relaxed">
-                  <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">Example {{ i + 1 }}</span>
+                  <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">{{ t('concept.example') }} {{ i + 1 }}</span>
                   <div class="mt-1" v-html="renderMath(ex, renderOpts)"></div>
                 </div>
               </div>
@@ -635,9 +638,9 @@ const nonVerbalReps = computed(() => {
         <div class="w-full lg:w-64 flex-shrink-0 space-y-4 mt-6 lg:mt-0">
           <!-- Relations -->
           <div v-if="outgoingEdges.length || incomingEdges.length" class="card p-5">
-            <div class="section-label">Relations</div>
+            <div class="section-label">{{ t('concept.relations') }}</div>
             <div v-if="outgoingEdges.length" class="mt-3">
-              <div class="text-xs text-ink-300 mb-2">Outgoing ({{ outgoingEdges.length }})</div>
+              <div class="text-xs text-ink-300 mb-2">{{ t('concept.outgoing') }} ({{ outgoingEdges.length }})</div>
               <div class="space-y-1 max-h-64 overflow-y-auto">
                 <button
                   v-for="edge in outgoingEdges"
@@ -654,7 +657,7 @@ const nonVerbalReps = computed(() => {
               </div>
             </div>
             <div v-if="incomingEdges.length" class="mt-3 pt-3 border-t border-ink-100/60">
-              <div class="text-xs text-ink-300 mb-2">Incoming ({{ incomingEdges.length }})</div>
+              <div class="text-xs text-ink-300 mb-2">{{ t('concept.incoming') }} ({{ incomingEdges.length }})</div>
               <div class="space-y-1 max-h-48 overflow-y-auto">
                 <button
                   v-for="edge in incomingEdges"
@@ -673,7 +676,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Domains -->
           <div v-if="conceptDomains.length" class="card p-5">
-            <div class="section-label">Domains</div>
+            <div class="section-label">{{ t('concept.domains') }}</div>
             <div class="space-y-1 mt-3">
               <div v-for="domain in conceptDomains" :key="domain.slug" class="flex items-center gap-1.5 text-sm">
                 <span class="w-2 h-1.5 rounded inline-block flex-shrink-0" style="background: #8b5cf6;"></span>
@@ -688,7 +691,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Tags -->
           <div v-if="conceptTags.length" class="card p-5">
-            <div class="section-label">Tags</div>
+            <div class="section-label">{{ t('concept.tags') }}</div>
             <div class="flex flex-wrap gap-1.5 mt-3">
               <span v-for="tag in conceptTags" :key="tag" class="badge badge-gray text-[10px]">{{ tag }}</span>
             </div>
@@ -696,7 +699,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Managed concept dates -->
           <div v-if="conceptDates.length" class="card p-5">
-            <div class="section-label">Lifecycle dates</div>
+            <div class="section-label">{{ t('concept.lifecycleDates') }}</div>
             <dl class="mt-3 space-y-1.5 text-xs">
               <div v-for="(d, i) in conceptDates" :key="i" class="flex gap-2">
                 <dt class="text-ink-300 min-w-[70px]">{{ d.type }}</dt>
@@ -707,7 +710,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Managed concept sources -->
           <div v-if="conceptSources.length" class="card p-5">
-            <div class="section-label">Concept sources</div>
+            <div class="section-label">{{ t('concept.conceptSources') }}</div>
             <div class="space-y-2 mt-3">
               <div v-for="(src, i) in conceptSources" :key="i" class="text-xs">
                 <div class="flex items-center gap-1.5 flex-wrap mb-0.5">
@@ -757,7 +760,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Metadata -->
           <div class="card p-5">
-            <div class="section-label">Metadata</div>
+            <div class="section-label">{{ t('concept.metadata') }}</div>
             <dl class="space-y-2 text-xs mt-3">
               <div v-if="managedStatus">
                 <dt class="text-ink-300">Status</dt>

package/src/components/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>