@glossarist/concept-browser 0.7.10 → 0.7.11

package/package.json

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

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/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/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);
   }
 }