@glossarist/concept-browser 0.7.9 → 0.7.11

package/package.json

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

@@ -773,6 +773,7 @@ function processDataset(dir, register, opts) {
   };
   if (opts.languageOrder) manifest.languageOrder = opts.languageOrder;
   if (opts.ref) manifest.ref = opts.ref;
+  if (opts.refAliases) manifest.refAliases = opts.refAliases;
   writeJson(path.join(DATA, register, 'manifest.json'), manifest);
 
   // Copy bibliography.yaml → bibliography.json
@@ -838,6 +839,7 @@ for (let i = 0; i < config.datasets.length; i++) {
     sourceRepo: ds.sourceRepo,
     languageOrder: ds.languageOrder,
     ref: ds.ref,
+    refAliases: ds.refAliases,
     tags: ds.tags,
     color: ds.color || DS_PALETTE[i % DS_PALETTE.length],
     datasetUri: ds.uri,
@@ -1112,6 +1114,30 @@ function processPages(config) {
 
 const processedPages = processPages(config);
 
+// Auto-generate dataset about pages from {localPath}/about.md
+const _pagesDir = path.join(PUBLIC, 'pages');
+for (const ds of config.datasets || []) {
+  if (!ds.localPath) continue;
+  const aboutSrc = path.resolve(ROOT, ds.localPath, 'about.md');
+  if (!fs.existsSync(aboutSrc)) continue;
+  const raw = fs.readFileSync(aboutSrc, 'utf8');
+  const html = renderMarkdown(stripFrontmatter(raw));
+  const route = `${ds.id}-about`;
+  writeJson(path.join(_pagesDir, `${route}.json`), { title: 'About', html });
+  console.log(`  Auto-generated dataset about page: ${route}`);
+  const uiLangs = (config.uiLanguages || []).map(l => l.code).filter(l => l !== 'eng');
+  const dsTranslations = ds.translations || {};
+  for (const lang of uiLangs) {
+    const trAboutSrc = path.resolve(ROOT, ds.localPath, `about-${lang}.md`);
+    if (!fs.existsSync(trAboutSrc)) continue;
+    const trRaw = fs.readFileSync(trAboutSrc, 'utf8');
+    const trHtml = renderMarkdown(stripFrontmatter(trRaw));
+    const trTitle = dsTranslations[lang]?.title ? `About ${dsTranslations[lang].title}` : 'About';
+    writeJson(path.join(_pagesDir, `${route}.${lang}.json`), { title: trTitle, html: trHtml });
+    console.log(`  Auto-generated dataset about page: ${route}.${lang}`);
+  }
+}
+
 // Generate site-config.json from site config
 const siteBranding = { ...config.branding };
 // Rewrite logo paths to destination filenames and strip build-time fields

package/src/__tests__/math.test.ts

@@ -37,8 +37,8 @@ describe('renderMath', () => {
     const input = 'Intro text\n\n|===\n| a | b | c\n| d | e | f\n|===';
     const result = renderMath(input);
     expect(result).toContain('<table class="concept-table">');
-    expect(result).toContain('<tr><td>a</td><td>b</td><td>c</td></tr>');
-    expect(result).toContain('<tr><td>d</td><td>e</td><td>f</td></tr>');
+    expect(result).toContain('<thead><tr><th>a</th><th>b</th><th>c</th></tr></thead>');
+    expect(result).toContain('<tbody><tr><td>d</td><td>e</td><td>f</td></tr></tbody>');
     expect(result).not.toContain('|===');
   });
 

package/src/adapters/ReferenceResolver.ts

@@ -30,11 +30,16 @@ function matchUriPattern(uri: string, pattern: string): boolean {
 export class ReferenceResolver {
   private datasets: DatasetEntry[] = [];
   private routing: RoutingEntry[] = [];
+  private sourceRefs = new Map<string, { datasetId: string; uriPrefix: string }>();
 
   registerDataset(id: string, uriPatterns: string[]): void {
     this.datasets.push({ id, uriPatterns });
   }
 
+  registerSourceRef(sourceRef: string, datasetId: string, uriPrefix: string): void {
+    this.sourceRefs.set(sourceRef, { datasetId, uriPrefix });
+  }
+
   loadRouting(entries: RoutingEntry[]): void {
     this.routing = entries;
   }
@@ -82,6 +87,29 @@ export class ReferenceResolver {
     return { type: 'unresolved', uri };
   }
 
+  resolveCitation(source: string, referenceFrom: string, sourceDatasetId?: string): Resolution | null {
+    const entry = this.sourceRefs.get(source);
+    if (!entry) {
+      if (!source.startsWith('urn:')) return null;
+      return this.tryResolveCitationUri(source, referenceFrom, sourceDatasetId);
+    }
+    return this.tryResolveCitationUri(entry.uriPrefix, referenceFrom, sourceDatasetId);
+  }
+
+  private tryResolveCitationUri(uriPrefix: string, referenceFrom: string, sourceDatasetId?: string): Resolution | null {
+    const uri = `${uriPrefix}/${referenceFrom}`;
+    const result = this.resolveReference(uri, sourceDatasetId);
+    if (result.type === 'internal') {
+      return { ...result, conceptId: result.conceptId.replace(/^\//, '') };
+    }
+    const directUri = uriPrefix + referenceFrom;
+    const directResult = this.resolveReference(directUri, sourceDatasetId);
+    if (directResult.type === 'internal') {
+      return { ...directResult, conceptId: directResult.conceptId.replace(/^\//, '') };
+    }
+    return null;
+  }
+
   private extractConceptIdFromRouting(uri: string, pattern: string): string | null {
     for (const ds of this.datasets) {
       for (const dsPattern of ds.uriPatterns) {

package/src/adapters/factory.ts

@@ -55,6 +55,13 @@ export class AdapterFactory {
     ].filter(Boolean) as string[];
     this.resolver.registerDataset(registerId, uriPatterns);
 
+    if (manifest.ref) {
+      this.resolver.registerSourceRef(manifest.ref, registerId, manifest.datasetUri);
+    }
+    for (const alias of manifest.refAliases ?? []) {
+      this.resolver.registerSourceRef(alias, registerId, manifest.datasetUri);
+    }
+
     return adapter;
   }
 
@@ -65,6 +72,10 @@ export class AdapterFactory {
   resolve(uri: string, sourceDatasetId?: string): Resolution {
     return this.resolver.resolveReference(uri, sourceDatasetId);
   }
+
+  resolveCitation(source: string, referenceFrom: string, sourceDatasetId?: string): Resolution | null {
+    return this.resolver.resolveCitation(source, referenceFrom, sourceDatasetId);
+  }
 }
 
 let _instance: AdapterFactory | null = null;

package/src/adapters/types.ts

@@ -58,6 +58,7 @@ export interface Manifest {
   shortname?: string;
   languageOrder?: string[];
   ref?: string;
+  refAliases?: string[];
   languageStats?: Record<string, { terms: number; definitions: number }>;
   availableFormats?: string[];
   bulkFormats?: { file: string; format: string; size: number }[];

package/src/components/AppSidebar.vue

@@ -83,6 +83,21 @@ const datasetEntries = computed(() => {
   return entries;
 });
 
+const datasetIds = computed(() => new Set(datasetEntries.value.map(d => d.id)));
+
+// Hide dataset-prefixed pages (e.g. "viml-about") from global nav
+const filteredGlobalPages = computed(() =>
+  globalPages.value.filter(p => {
+    const r = p.route || '';
+    return !Array.from(datasetIds.value).some(dsId => r.startsWith(dsId + '-'));
+  })
+);
+
+// Show only standard dataset pages (Concepts, Statistics, About)
+const filteredDatasetPages = computed(() =>
+  datasetPages.value.filter(p => ['', 'stats', 'about'].includes(p.route || ''))
+);
+
 const currentManifest = computed(() => store.manifests.get(currentDataset.value));
 const showDatasetNav = computed(() => !!currentManifest.value || !!siteConfig.value?.defaultDataset);
 
@@ -169,7 +184,7 @@ function navTitle(page: { route: string }): string {
       <!-- Navigation -->
       <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'">
+        <template v-for="page in filteredGlobalPages" :key="page.route || 'home'">
           <router-link
             :to="pageRoute(page)"
             class="btn-ghost w-full text-left flex items-center gap-2"
@@ -456,84 +471,67 @@ function navTitle(page: { route: string }): string {
         </template>
       </nav>
 
-      <!-- Dataset-level navigation (shown when viewing a dataset) -->
-      <div v-if="showDatasetNav" class="mb-6">
-        <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"
-            :key="page.route || 'concepts'"
-            :to="pageRoute(page)"
-            class="btn-ghost w-full text-left flex items-center gap-2"
-            :class="isActive(page) ? 'active' : ''"
-            @click="closeMobile"
-          >
-            <NavIcon :name="page.icon" />
-            {{ navTitle(page) }}
-          </router-link>
-        </nav>
-      </div>
-
       <!-- Datasets -->
       <div class="section-label">{{ t('nav.datasets') }}</div>
       <nav class="space-y-1">
-        <button
+        <div
           v-for="ds in datasetEntries"
           :key="ds.id"
-          @click="goToDataset(ds.id)"
-          class="w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all duration-150 border-l-2"
-          :class="[
-            currentDataset === ds.id
-              ? 'bg-surface text-ink-800'
-              : 'border-transparent text-ink-600 hover:bg-ink-50 hover:text-ink-800'
-          ]"
-          :style="currentDataset === ds.id ? { borderLeftColor: getColor(ds.id), borderLeftWidth: '2px' } : {}"
+          class="rounded-lg transition-all duration-150"
+          :class="currentDataset === ds.id ? 'bg-surface' : ''"
         >
-          <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>
-        </button>
-      </nav>
-
-      <!-- Dataset provenance -->
-      <div v-if="provenance.owner" class="mt-6 pt-4 border-t border-ink-100/60">
-        <div class="text-[11px] text-ink-300 space-y-1.5">
-          <div class="font-medium text-ink-400">{{ t('sidebar.provenance') }}</div>
-
-          <div v-if="provenance.ref" class="text-xs font-semibold text-ink-700">
-            {{ provenance.ref }}
-          </div>
-
-          <div class="flex items-center gap-1">
-            <span class="text-ink-400">{{ t('sidebar.publishedBy') }}</span>
-            <a v-if="provenance.ownerUrl" :href="provenance.ownerUrl" target="_blank" rel="noopener" class="concept-link font-medium">{{ provenance.owner }}</a>
-            <span v-else class="text-ink-600 font-medium">{{ provenance.owner }}</span>
-          </div>
-
-          <div v-if="provenance.status" class="flex items-center gap-1.5">
-            <span class="inline-block w-1.5 h-1.5 rounded-full" :class="provenance.status === 'valid' ? 'bg-emerald-500' : 'bg-amber-400'"></span>
-            <span class="text-[10px] uppercase tracking-wide font-medium" :class="provenance.status === 'valid' ? 'text-emerald-600' : 'text-amber-600'">
-              {{ provenance.status }}
-            </span>
-          </div>
-
-          <div v-if="provenance.lastUpdated" class="text-ink-300">
-            {{ t('sidebar.updated') }} {{ provenance.lastUpdated }}
-          </div>
-
-          <div v-if="provenance.conceptCount" class="text-ink-400">
-            {{ provenance.conceptCount.toLocaleString() }} {{ t('sidebar.concepts').toLowerCase() }}
-            <template v-if="provenance.languageCount">
-              · {{ provenance.languageCount }} {{ t('sidebar.languages').toLowerCase() }}
-            </template>
-          </div>
-
-          <div v-if="provenance.sourceRepo">
-            <a :href="provenance.sourceRepo" target="_blank" rel="noopener" class="concept-link">{{ t('sidebar.viewSource') }}</a>
+          <button
+            @click="goToDataset(ds.id)"
+            class="w-full text-left px-3 py-2.5 rounded-lg text-sm border-l-2"
+            :class="[
+              currentDataset === ds.id
+                ? 'text-ink-800'
+                : 'border-transparent text-ink-600 hover:bg-ink-50 hover:text-ink-800'
+            ]"
+            :style="currentDataset === ds.id ? { borderLeftColor: getColor(ds.id), borderLeftWidth: '2px' } : {}"
+          >
+            <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>
+          </button>
+
+          <!-- Expanded dataset: sub-pages + provenance -->
+          <div v-if="currentDataset === ds.id && (filteredDatasetPages.length || provenance.owner)" class="px-2 pb-2">
+            <!-- Sub-pages -->
+            <nav v-if="filteredDatasetPages.length" class="space-y-0.5 mt-1">
+              <router-link
+                v-for="page in filteredDatasetPages"
+                :key="page.route || 'concepts'"
+                :to="pageRoute(page)"
+                class="btn-ghost w-full text-left flex items-center gap-2 text-sm"
+                :class="isActive(page) ? 'active' : ''"
+                @click="closeMobile"
+              >
+                <NavIcon :name="page.icon" />
+                {{ navTitle(page) }}
+              </router-link>
+            </nav>
+
+            <!-- Provenance -->
+            <div v-if="provenance.owner" class="mt-3 pt-3 border-t border-ink-100/60">
+              <div class="text-[11px] text-ink-300 space-y-1.5 px-1">
+                <div v-if="provenance.ref" class="text-xs font-semibold text-ink-700">
+                  {{ provenance.ref }}
+                </div>
+                <div class="flex items-center gap-1">
+                  <span class="text-ink-400">{{ t('sidebar.publishedBy') }}</span>
+                  <a v-if="provenance.ownerUrl" :href="provenance.ownerUrl" target="_blank" rel="noopener" class="concept-link font-medium">{{ provenance.owner }}</a>
+                  <span v-else class="text-ink-600 font-medium">{{ provenance.owner }}</span>
+                </div>
+                <div v-if="provenance.sourceRepo">
+                  <a :href="provenance.sourceRepo" target="_blank" rel="noopener" class="concept-link">{{ t('sidebar.viewSource') }}</a>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
   </aside>
 </template>

package/src/components/CitationDisplay.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
 import type { Citation } from 'glossarist';
+import { computed } from 'vue';
+import { getFactory } from '../adapters/factory';
+import { useRouter } from 'vue-router';
+import { useVocabularyStore } from '../stores/vocabulary';
 
 const props = defineProps<{
   citation: Citation;
+  registerId?: string;
 }>();
 
+const router = useRouter();
+const store = useVocabularyStore();
+const factory = getFactory();
+
 function formatRef(c: Citation): string {
   const ref = c.ref;
   if (!ref) return '';
@@ -14,22 +23,52 @@ function formatRef(c: Citation): string {
   if (ref.version) parts.push(`(${ref.version})`);
   return parts.join(' ');
 }
+
+function resolveCitation(): { registerId: string; conceptId: string } | null {
+  const ref = props.citation.ref;
+  const locality = props.citation.locality;
+  if (!ref?.source || !locality?.referenceFrom) return null;
+
+  const resolution = factory.resolveCitation(ref.source, locality.referenceFrom, props.registerId);
+  if (!resolution || resolution.type !== 'internal') return null;
+
+  return { registerId: resolution.registerId, conceptId: resolution.conceptId };
+}
+
+const resolvedTarget = computed(() => resolveCitation());
+
+async function navigateToCitation() {
+  if (!resolvedTarget.value) return;
+  const { registerId, conceptId } = resolvedTarget.value;
+  await store.viewConcept(registerId, conceptId);
+  router.push({ name: 'concept', params: { registerId, conceptId } });
+}
 </script>
 
 <template>
   <span class="inline">
     <template v-if="citation.ref">
-      <span v-if="citation.ref.source" class="font-medium">{{ citation.ref.source }}</span>
+      <button v-if="resolvedTarget" @click="navigateToCitation" class="concept-link font-medium">{{ citation.ref.source }}</button>
+      <span v-else-if="citation.ref.source" class="font-medium">{{ citation.ref.source }}</span>
       <span v-if="citation.ref.id"> {{ citation.ref.id }}</span>
       <span v-if="citation.ref.version" class="text-ink-400"> ({{ citation.ref.version }})</span>
     </template>
     <template v-if="citation.locality">
-      <span v-if="citation.locality.type" class="text-ink-400">, {{ citation.locality.type }}</span>
-      <span v-if="citation.locality.referenceFrom" class="text-ink-400">
-        {{ citation.locality.referenceTo ? ` ${citation.locality.referenceFrom}–${citation.locality.referenceTo}` : ` ${citation.locality.referenceFrom}` }}
-      </span>
+      <button v-if="resolvedTarget" @click="navigateToCitation" class="concept-link">
+        <span v-if="citation.locality.type" class="text-ink-400">, {{ citation.locality.type }}</span>
+        <span v-if="citation.locality.referenceFrom" class="text-ink-400">
+          {{ citation.locality.referenceTo ? ` ${citation.locality.referenceFrom}–${citation.locality.referenceTo}` : ` ${citation.locality.referenceFrom}` }}
+        </span>
+      </button>
+      <template v-else>
+        <span v-if="citation.locality.type" class="text-ink-400">, {{ citation.locality.type }}</span>
+        <span v-if="citation.locality.referenceFrom" class="text-ink-400">
+          {{ citation.locality.referenceTo ? ` ${citation.locality.referenceFrom}–${citation.locality.referenceTo}` : ` ${citation.locality.referenceFrom}` }}
+        </span>
+      </template>
     </template>
     <a v-if="citation.link" :href="citation.link" target="_blank" rel="noopener" class="concept-link ml-1">[link]</a>
     <span v-if="citation.original" class="text-xs text-ink-300 ml-1">(orig: {{ citation.original }})</span>
+    <span v-if="resolvedTarget" class="text-[9px] text-ink-300 ml-1">→ {{ resolvedTarget.registerId }}/{{ resolvedTarget.conceptId }}</span>
   </span>
 </template>

package/src/components/ConceptDetail.vue

@@ -97,6 +97,34 @@ const conceptSources = computed(() => props.concept.sources);
 // Managed concept tags
 const conceptTags = computed(() => props.concept.tags ?? []);
 
+// Managed concept related (concept-level cross-references)
+const conceptRelated = computed(() => props.concept.relatedConcepts ?? []);
+
+function resolveRelatedRef(ref: { source: string | null; id: string | null } | null): { registerId: string; conceptId: string } | null {
+  if (!ref?.source || !ref?.id) return null;
+  const uri = `${ref.source}/${ref.id}`;
+  const resolution = factory.resolve(uri, props.registerId);
+  if (resolution.type === 'internal') {
+    const conceptId = resolution.conceptId.replace(/^\//, '');
+    return { registerId: resolution.registerId, conceptId };
+  }
+  if (ref.source.startsWith('urn:')) {
+    const directUri = ref.source + ref.id;
+    const directRes = factory.resolve(directUri, props.registerId);
+    if (directRes.type === 'internal') {
+      return { registerId: directRes.registerId, conceptId: directRes.conceptId.replace(/^\//, '') };
+    }
+  }
+  return null;
+}
+
+async function navigateRelated(ref: { source: string | null; id: string | null }) {
+  const target = resolveRelatedRef(ref);
+  if (!target) return;
+  await store.viewConcept(target.registerId, target.conceptId);
+  router.push({ name: 'concept', params: { registerId: target.registerId, conceptId: target.conceptId } });
+}
+
 // Cross-reference resolver: generates clickable links for inline refs
 
 const { ensureBibLoaded, bibResolver, figResolver } = useRenderOptions(() => props.registerId);
@@ -115,6 +143,9 @@ const renderOpts: RenderOptions = {
     }
     return escapeAttr(term);
   },
+  conceptRefResolver: (conceptId, term) => {
+    return `<a href="#" class="xref-link" data-register="${escapeAttr(props.registerId)}" data-concept="${escapeAttr(conceptId)}">${escapeAttr(term)}</a>`;
+  },
   bibResolver,
   figResolver,
 };
@@ -552,7 +583,7 @@ const nonVerbalReps = computed(() => {
                   <div v-if="d.sources?.length" class="mt-1 space-y-0.5">
                     <div v-for="(ds, dsi) in d.sources" :key="'ds'+dsi" class="text-xs text-ink-400 flex items-center gap-1.5">
                       <span v-if="ds.type" class="badge text-[9px]" :class="sourceTypeInfo(ds.type).color">{{ sourceTypeInfo(ds.type).label }}</span>
-                      <CitationDisplay v-if="ds.origin" :citation="ds.origin" />
+                      <CitationDisplay v-if="ds.origin" :citation="ds.origin" :register-id="registerId" />
                       <span v-else-if="ds.modification" class="text-ink-300">{{ ds.modification }}</span>
                     </div>
                   </div>
@@ -560,7 +591,8 @@ const nonVerbalReps = computed(() => {
                   <div v-if="d.related?.length" class="mt-0.5 space-y-0.5">
                     <div v-for="(dr, dri) in d.related" :key="'dr'+dri" class="text-xs text-ink-400 flex items-center gap-1.5">
                       <span class="badge text-[9px] bg-gray-50 text-gray-600">{{ relationshipLabel(dr.type) }}</span>
-                      <span>{{ dr.content || (dr.ref ? `${dr.ref.source || ''} ${dr.ref.id || ''}`.trim() : '') }}</span>
+                      <button v-if="resolveRelatedRef(dr.ref)" @click="navigateRelated(dr.ref!)" class="concept-link">{{ dr.content || (dr.ref ? `${dr.ref.source || ''} ${dr.ref.id || ''}`.trim() : '') }}</button>
+                      <span v-else>{{ dr.content || (dr.ref ? `${dr.ref.source || ''} ${dr.ref.id || ''}`.trim() : '') }}</span>
                     </div>
                   </div>
                 </div>
@@ -682,6 +714,24 @@ const nonVerbalReps = computed(() => {
             </div>
           </div>
 
+          <!-- Cross-references (concept-level related) -->
+          <div v-if="conceptRelated.length" class="card p-5">
+            <div class="section-label">{{ t('concept.relations') }}</div>
+            <div class="mt-3 space-y-1">
+              <button
+                v-for="(cr, cri) in conceptRelated"
+                :key="'cr'+cri"
+                @click="navigateRelated(cr.ref!)"
+                class="text-sm concept-link block truncate w-full text-left flex items-center gap-1.5"
+              >
+                <span class="badge text-[9px] bg-gray-50 text-gray-600">{{ relationshipLabel(cr.type) }}</span>
+                <span v-if="resolveRelatedRef(cr.ref)" class="text-ink-600">{{ resolveRelatedRef(cr.ref)!.conceptId }}</span>
+                <span v-else class="text-ink-400">{{ cr.content || (cr.ref ? `${cr.ref.source || ''} ${cr.ref.id || ''}`.trim() : '') }}</span>
+                <span v-if="resolveRelatedRef(cr.ref) && resolveRelatedRef(cr.ref)!.registerId !== manifest.id" class="badge badge-gray text-[9px] flex-shrink-0">{{ resolveRelatedRef(cr.ref)!.registerId }}</span>
+              </button>
+            </div>
+          </div>
+
           <!-- Domains -->
           <div v-if="conceptDomains.length" class="card p-5">
             <div class="section-label">{{ t('concept.domains') }}</div>
@@ -735,7 +785,7 @@ const nonVerbalReps = computed(() => {
 
           <!-- Language quick-jump -->
           <div class="card p-5">
-            <div class="section-label">{{ t('concept.languagesSidebar', { count: languages.length }) }}</div>
+            <div class="section-label">{{ t('concept.languagesSidebar', { count: String(languages.length) }) }}</div>
             <div class="space-y-1 mt-3 max-h-80 overflow-y-auto">
               <button
                 v-for="lang in languages"

package/src/components/SearchBar.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useUiStore } from '../stores/ui';
 import { useVocabularyStore } from '../stores/vocabulary';
 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';
+import SearchResults from './SearchResults.vue';
 
 const router = useRouter();
-const route = useRoute();
 const ui = useUiStore();
 const store = useVocabularyStore();
-const { getStyle } = useDsStyle();
 const { t } = useI18n();
 const query = ref('');
 const results = ref<SearchHit[]>([]);
@@ -38,9 +35,7 @@ async function doSearch() {
   }
   searched.value = true;
   selectedIdx.value = -1;
-  if (route.query.q !== q) {
-    router.replace({ query: { q } });
-  }
+  router.replace({ query: { q } });
 }
 
 function onInput() {
@@ -65,11 +60,9 @@ function clearSearch() {
   router.replace({ query: {} });
 }
 
-// Group results by dataset
 interface GroupedResults {
   registerId: string;
   title: string;
-  style: { light: string; dark: string; color: string };
   hits: SearchHit[];
 }
 
@@ -84,23 +77,12 @@ const groupedResults = computed(() => {
   const groups: GroupedResults[] = [];
   for (const [registerId, hits] of map) {
     const m = store.manifests.get(registerId);
-    groups.push({
-      registerId,
-      title: m?.title ?? registerId,
-      style: getStyle(registerId),
-      hits,
-    });
+    groups.push({ registerId, title: m?.title ?? registerId, hits });
   }
   return groups;
 });
 
-// Flatten for keyboard navigation
 const flatHits = computed(() => groupedResults.value.flatMap(g => g.hits));
-const hitIndexMap = computed(() => {
-  const map = new Map<SearchHit, number>();
-  flatHits.value.forEach((hit, i) => map.set(hit, i));
-  return map;
-});
 
 function goToHit(hit: SearchHit) {
   router.push({
@@ -132,7 +114,6 @@ function scrollToSelected() {
   });
 }
 
-// Sync with UI store search query
 watch(() => ui.searchQuery, (q) => {
   if (q && q !== query.value) {
     query.value = q;
@@ -183,65 +164,16 @@ onMounted(() => {
       </div>
     </form>
 
-    <div v-if="loading" class="text-center py-16">
-      <svg class="w-8 h-8 text-ink-300 animate-spin mx-auto mb-4" fill="none" viewBox="0 0 24 24">
-        <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">{{ 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">{{ t('search.failed') }}</p>
-        <p class="text-sm text-red-600/80 mb-4">{{ searchError }}</p>
-        <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 === 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">{{ t('search.noResults') }}</p>
-        <p class="text-sm text-ink-300 mt-1">{{ t('search.tryDifferent') }}</p>
-      </div>
-
-      <!-- Grouped results -->
-      <div v-else class="space-y-6">
-        <div v-for="group in groupedResults" :key="group.registerId">
-          <!-- Dataset header -->
-          <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 }} {{ group.hits.length === 1 ? t('search.result') : t('search.results') }}</span>
-          </div>
-          <!-- Hits -->
-          <div class="space-y-1.5">
-            <button
-              v-for="hit in group.hits"
-              :key="hit.conceptId + hit.language"
-              @click="goToHit(hit)"
-              :class="selectedIdx === hitIndexMap.get(hit) ? 'bg-ink-50 border-ink-200 search-hit-selected' : ''"
-              class="card-hover p-3 w-full text-left flex items-center justify-between group"
-            >
-              <div class="min-w-0">
-                <span class="font-medium text-ink-800 group-hover:text-ink-900 transition-colors">{{ hit.designation }}</span>
-                <span class="text-xs text-ink-300 ml-2 font-mono">{{ hit.conceptId }}</span>
-                <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]">{{ 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>
-          </div>
-        </div>
-      </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">
-        {{ t('search.showingFirst', { max: '100', total: String(results.length) }) }}
-      </div>
-    </div>
+    <SearchResults
+      :loading="loading"
+      :search-error="searchError"
+      :searched="searched"
+      :search-query="ui.searchQuery"
+      :results="results"
+      :grouped-results="groupedResults"
+      :selected-idx="selectedIdx"
+      @retry="doSearch"
+      @go-hit="goToHit"
+    />
   </div>
 </template>

package/src/components/SearchResults.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SearchHit } from '../adapters/types';
+import { langName } from '../utils/lang';
+import { useDsStyle } from '../utils/dataset-style';
+import { useI18n } from '../i18n';
+
+interface GroupedResults {
+  registerId: string;
+  title: string;
+  hits: SearchHit[];
+}
+
+const props = defineProps<{
+  loading: boolean;
+  searchError: string | null;
+  searched: boolean;
+  searchQuery: string;
+  results: SearchHit[];
+  groupedResults: GroupedResults[];
+  selectedIdx: number;
+}>();
+
+const emit = defineEmits<{
+  retry: [];
+  goHit: [hit: SearchHit];
+}>();
+
+const { getStyle } = useDsStyle();
+const { t } = useI18n();
+
+const flatHits = computed(() => props.groupedResults.flatMap(g => g.hits));
+const hitIndexMap = computed(() => {
+  const map = new Map<SearchHit, number>();
+  flatHits.value.forEach((hit, i) => map.set(hit, i));
+  return map;
+});
+</script>
+
+<template>
+  <div v-if="loading" class="text-center py-16">
+    <svg class="w-8 h-8 text-ink-300 animate-spin mx-auto mb-4" fill="none" viewBox="0 0 24 24">
+      <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">{{ 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">{{ t('search.failed') }}</p>
+      <p class="text-sm text-red-600/80 mb-4">{{ searchError }}</p>
+      <button @click="emit('retry')" class="btn-primary">{{ t('search.retry') }}</button>
+    </div>
+  </div>
+
+  <div v-else-if="searched" class="search-results">
+    <p class="text-sm text-ink-400 mb-4">{{ results.length === 1 ? t('search.oneResultFor', { query: searchQuery }) : t('search.manyResultsFor', { count: String(results.length), query: 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">{{ t('search.noResults') }}</p>
+      <p class="text-sm text-ink-300 mt-1">{{ t('search.tryDifferent') }}</p>
+    </div>
+
+    <div v-else class="space-y-6">
+      <div v-for="group in groupedResults" :key="group.registerId">
+        <div class="flex items-center gap-2 mb-2">
+          <span class="w-2 h-2 rounded-full flex-shrink-0" :style="{ backgroundColor: getStyle(group.registerId).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 }} {{ group.hits.length === 1 ? t('search.result') : t('search.results') }}</span>
+        </div>
+        <div class="space-y-1.5">
+          <button
+            v-for="hit in group.hits"
+            :key="hit.conceptId + hit.language"
+            @click="emit('goHit', hit)"
+            :class="selectedIdx === hitIndexMap.get(hit) ? 'bg-ink-50 border-ink-200 search-hit-selected' : ''"
+            class="card-hover p-3 w-full text-left flex items-center justify-between group"
+          >
+            <div class="min-w-0">
+              <span class="font-medium text-ink-800 group-hover:text-ink-900 transition-colors">{{ hit.designation }}</span>
+              <span class="text-xs text-ink-300 ml-2 font-mono">{{ hit.conceptId }}</span>
+              <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]">{{ 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>
+        </div>
+      </div>
+    </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">
+      {{ t('search.showingFirst', { max: '100', total: String(results.length) }) }}
+    </div>
+  </div>
+</template>

package/src/components/ShortcutsModal.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useI18n } from '../i18n';
+
+const { t } = useI18n();
+
+defineEmits<{ close: [] }>();
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/30" @click.self="$emit('close')">
+      <div class="bg-white rounded-xl shadow-2xl p-6 max-w-sm w-full mx-4 border border-ink-100">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-semibold text-ink-800">{{ t('shortcuts.title') }}</h3>
+          <button @click="$emit('close')" class="p-1 rounded hover:bg-ink-50 text-ink-400 hover:text-ink-600">
+            <svg class="w-5 h-5" 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>
+        <div class="space-y-3 text-sm">
+          <div class="flex items-center justify-between">
+            <span class="text-ink-600">{{ t('shortcuts.previous') }}</span>
+            <kbd class="px-2 py-1 bg-ink-50 border border-ink-200 rounded text-xs font-mono">J</kbd>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-ink-600">{{ t('shortcuts.next') }}</span>
+            <kbd class="px-2 py-1 bg-ink-50 border border-ink-200 rounded text-xs font-mono">K</kbd>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-ink-600">{{ t('shortcuts.search') }}</span>
+            <kbd class="px-2 py-1 bg-ink-50 border border-ink-200 rounded text-xs font-mono">/</kbd>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-ink-600">{{ t('shortcuts.showShortcuts') }}</span>
+            <kbd class="px-2 py-1 bg-ink-50 border border-ink-200 rounded text-xs font-mono">?</kbd>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-ink-600">{{ t('shortcuts.closeDialog') }}</span>
+            <kbd class="px-2 py-1 bg-ink-50 border border-ink-200 rounded text-xs font-mono">Esc</kbd>
+          </div>
+        </div>
+        <div class="mt-4 pt-3 border-t border-ink-100 text-xs text-ink-300 text-center">
+          {{ t('shortcuts.hint') }}
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/config/types.ts

@@ -96,6 +96,7 @@ export interface DatasetConfig {
   tags?: string[];
   languageOrder?: string[];
   ref?: string;
+  refAliases?: string[];
   downloads?: string[];
   translations?: Record<string, { title?: string; description?: string }>;
 }

package/src/i18n/locales/eng.yml

@@ -165,3 +165,12 @@ sidebar.updated: Updated
 sidebar.concepts: concepts
 sidebar.languages: languages
 sidebar.viewSource: View source
+
+# Keyboard shortcuts
+shortcuts.title: Keyboard shortcuts
+shortcuts.previous: Previous concept
+shortcuts.next: Next concept
+shortcuts.search: Search
+shortcuts.showShortcuts: Show shortcuts
+shortcuts.closeDialog: Close dialog
+shortcuts.hint: Shortcuts only work when no input field is focused

package/src/i18n/locales/fra.yml

@@ -165,3 +165,12 @@ sidebar.updated: Mis à jour
 sidebar.concepts: concepts
 sidebar.languages: langues
 sidebar.viewSource: Voir la source
+
+# Keyboard shortcuts
+shortcuts.title: Raccourcis clavier
+shortcuts.previous: Concept précédent
+shortcuts.next: Concept suivant
+shortcuts.search: Recherche
+shortcuts.showShortcuts: Afficher les raccourcis
+shortcuts.closeDialog: Fermer
+shortcuts.hint: Les raccourcis ne fonctionnent que si aucun champ de saisie n'a le focus

package/src/utils/math.ts

@@ -4,10 +4,13 @@ export type XrefResolver = (uri: string, term: string) => string;
 export type BibResolver = (refId: string, title: string) => string;
 export type FigResolver = (figId: string) => string;
 
+export type ConceptRefResolver = (conceptId: string, term: string) => string;
+
 export interface RenderOptions {
   xrefResolver?: XrefResolver;
   bibResolver?: BibResolver;
   figResolver?: FigResolver;
+  conceptRefResolver?: ConceptRefResolver;
 }
 
 function replaceBracketed(text: string, prefix: string, handler: (content: string, bold: boolean) => string): string {
@@ -53,21 +56,36 @@ function mathPlaceholder(expr: string, format: string, bold: boolean): string {
   return `<span class="math-pending${bold ? ' math-bold' : ''}" data-expr="${escapeAttr(expr)}" data-format="${format}">${escapeAttr(expr)}</span>`;
 }
 
-function convertLists(text: string): string {
-  // AsciiDoc pipe-delimited tables: |=== ... |===
-  let result = text.replace(/\|===\n([\s\S]*?)\n\|===/g, (_, body) => {
-    const rows = body.split('\n').filter(line => line.trim().length > 0);
-    const htmlRows = rows.map(row => {
-      // Each row starts with "| " — strip the leading pipe then split on " | "
-      const cells = row.replace(/^\| */, '').split(/ \| /);
-      const htmlCells = cells.map(c => `<td>${c.trim()}</td>`).join('');
-      return `<tr>${htmlCells}</tr>`;
+function convertAsciiDocTables(text: string): string {
+  return text.replace(/\n?\|===\n([\s\S]*?)\n\|===/g, (_: string, body: string) => {
+    const rows: string[] = body.split('\n').filter((line: string) => line.trim() !== '');
+    if (!rows.length) return '';
+
+    const parsedRows: string[][] = rows.map((row: string) => {
+      const cellText = row.replace(/^\s*\|/, '').trim();
+      const cells = cellText.split(/\s*\|\s*/).map((c: string) => c.trim()).filter((c: string) => c !== '');
+      return cells;
+    }).filter((r: string[]) => r.length > 0);
+
+    if (!parsedRows.length) return '';
+
+    const maxCols = Math.max(...parsedRows.map((r: string[]) => r.length));
+    const normalized = parsedRows.map((r: string[]) => {
+      while (r.length < maxCols) r.push('');
+      return r;
     });
-    return `<table class="concept-table">${htmlRows.join('')}</table>`;
+
+    const thead = normalized[0].map((c: string) => `<th>${escapeHtml(c)}</th>`).join('');
+    const tbody = normalized.slice(1).map((r: string[]) =>
+      `<tr>${r.map((c: string) => `<td>${escapeHtml(c)}</td>`).join('')}</tr>`
+    ).join('');
+
+    return `\n<table class="concept-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table>`;
   });
+}
 
-  // Bullet lists: * item
-  result = result.replace(/(?:^|\n)((?:[ \t]*\* [^\n]+)(?:\n[ \t]*\* [^\n]+)*)/g, (_, block) => {
+function convertLists(text: string): string {
+  let result = text.replace(/(?:^|\n)((?:[ \t]*\* [^\n]+)(?:\n[ \t]*\* [^\n]+)*)/g, (_, block) => {
     if (/^\*stem:\[/.test(block.trimStart())) return _;
     const items: string[] = [];
     const re = /[ \t]*\* ([^\n]+)/g;
@@ -108,6 +126,7 @@ export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | Ren
   result = replaceBracketed(result, 'stem:', (expr, bold) => mathPlaceholder(expr, 'asciimath', bold));
   result = replaceBracketed(result, 'latexmath:', (expr, bold) => mathPlaceholder(expr, 'latex', bold));
 
+  result = convertAsciiDocTables(result);
   result = convertLists(result);
   result = result.replace(/\*([^*]+)\*/g, '<em>$1</em>');
   result = result.replace(/~([^~]+)~/g, '<sub>$1</sub>');
@@ -142,7 +161,12 @@ export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | Ren
     return t;
   });
 
-  result = result.replace(/\{\{([^,}]+)(?:,\s*[^}]+)?\}\}/g, '$1');
+  result = result.replace(/\{\{([^,}]+),\s*([^}]+)\}\}/g, (_, term, id) => {
+    if (opts.conceptRefResolver) {
+      return opts.conceptRefResolver(id.trim(), term.trim());
+    }
+    return term.trim();
+  });
 
   return result;
 }

package/src/views/ConceptView.vue

@@ -3,6 +3,7 @@ import { computed, watch, ref, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import ConceptDetail from '../components/ConceptDetail.vue';
+import ShortcutsModal from '../components/ShortcutsModal.vue';
 import { useI18n } from '../i18n';
 
 const { t } = useI18n();
@@ -16,6 +17,7 @@ const store = useVocabularyStore();
 const router = useRouter();
 const conceptLoading = ref(false);
 const localError = ref<string | null>(null);
+const showShortcuts = ref(false);
 
 async function loadConcept(regId: string, cId: string) {
   conceptLoading.value = true;
@@ -68,10 +70,20 @@ function goAdjacent(id: string) {
 
 function onKeydown(e: KeyboardEvent) {
   if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
-  if (e.key === 'ArrowLeft' && adjacent.value.prev) {
+
+  if (e.key === '?') {
+    e.preventDefault();
+    showShortcuts.value = !showShortcuts.value;
+    return;
+  }
+  if (e.key === 'Escape' && showShortcuts.value) {
+    showShortcuts.value = false;
+    return;
+  }
+  if (e.key === 'j' && adjacent.value.prev) {
     e.preventDefault();
     goAdjacent(adjacent.value.prev);
-  } else if (e.key === 'ArrowRight' && adjacent.value.next) {
+  } else if (e.key === 'k' && adjacent.value.next) {
     e.preventDefault();
     goAdjacent(adjacent.value.next);
   }
@@ -139,5 +151,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown));
       :adjacent="adjacent"
       :register-id="registerId"
     />
+
+    <ShortcutsModal v-if="showShortcuts" @close="showShortcuts = false" />
   </div>
 </template>

package/src/views/DatasetView.vue

@@ -71,10 +71,10 @@ function onGlobalKeydown(e: KeyboardEvent) {
     e.preventDefault();
     filterInput.value?.focus();
   }
-  if (e.key === 'ArrowRight' && document.activeElement?.tagName !== 'INPUT' && page.value < totalPages.value) {
-    goToPage(page.value + 1);
-  } else if (e.key === 'ArrowLeft' && document.activeElement?.tagName !== 'INPUT' && page.value > 1) {
+  if (e.key === 'j' && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA' && page.value > 1) {
     goToPage(page.value - 1);
+  } else if (e.key === 'k' && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA' && page.value < totalPages.value) {
+    goToPage(page.value + 1);
   }
 }