@glossarist/concept-browser 0.3.4 → 0.3.7

package/src/adapters/DatasetAdapter.ts

@@ -44,13 +44,20 @@ export class DatasetAdapter {
     const resp = await fetch(`${this.baseUrl}/index.json`);
     if (!resp.ok) throw new Error(`Failed to load index for ${this.registerId}: ${resp.status}`);
     this.index = (await resp.json()) as ConceptIndex;
+    this.buildSummaryIndex();
+    return this.index;
+  }
+
+  private buildSummaryIndex() {
     this.summaryMap.clear();
     this.positionIndex.clear();
-    for (let i = 0; i < this.index.concepts.length; i++) {
-      this.summaryMap.set(this.index.concepts[i].id, this.index.concepts[i]);
-      this.positionIndex.set(this.index.concepts[i].id, i);
+    for (let i = 0; i < this.index!.concepts.length; i++) {
+      const entry = this.index!.concepts[i];
+      if (entry) {
+        this.summaryMap.set(entry.id, entry);
+        this.positionIndex.set(entry.id, i);
+      }
     }
-    return this.index;
   }
 
   private async loadIndexChunked(): Promise<ConceptIndex> {
@@ -62,12 +69,7 @@ export class DatasetAdapter {
       const resp = await fetch(`${this.baseUrl}/index.json`);
       if (!resp.ok) throw new Error(`Failed to load index for ${this.registerId}`);
       this.index = (await resp.json()) as ConceptIndex;
-      this.summaryMap.clear();
-      this.positionIndex.clear();
-      for (let i = 0; i < this.index.concepts.length; i++) {
-        this.summaryMap.set(this.index.concepts[i].id, this.index.concepts[i]);
-        this.positionIndex.set(this.index.concepts[i].id, i);
-      }
+      this.buildSummaryIndex();
       return this.index;
     }
 
@@ -121,7 +123,7 @@ export class DatasetAdapter {
         eng: entry.designations?.eng || Object.values(entry.designations || {})[0] || '',
         status: entry.status,
       };
-      (this.index!.concepts as (ConceptSummary | undefined)[])[startPos + i] = summary;
+      this.index!.concepts[startPos + i] = summary;
       this.summaryMap.set(entry.id, summary);
       this.positionIndex.set(entry.id, startPos + i);
     }
@@ -153,7 +155,7 @@ export class DatasetAdapter {
 
   isRangeLoaded(offset: number, limit: number): boolean {
     if (!this.index?.concepts) return false;
-    const arr = this.index.concepts as (ConceptSummary | undefined)[];
+    const arr = this.index.concepts;
     for (let i = offset; i < Math.min(offset + limit, arr.length); i++) {
       if (arr[i] === undefined) return false;
     }
@@ -175,7 +177,7 @@ export class DatasetAdapter {
     return this.summaryMap.get(conceptId);
   }
 
-  getConcepts(): ConceptSummary[] {
+  getConcepts(): (ConceptSummary | undefined)[] {
     return this.index?.concepts ?? [];
   }
 
@@ -188,7 +190,7 @@ export class DatasetAdapter {
   }
 
   getAdjacentConcepts(conceptId: string): { prev: string | null; next: string | null } {
-    const concepts = this.index?.concepts as (ConceptSummary | undefined)[] | undefined;
+    const concepts = this.index?.concepts;
     if (!concepts) return { prev: null, next: null };
     const idx = this.getConceptPosition(conceptId);
     if (idx === -1) return { prev: null, next: null };
@@ -208,7 +210,7 @@ export class DatasetAdapter {
   search(query: string, lang: string = 'eng'): SearchHit[] {
     const q = query.toLowerCase();
     const hits: SearchHit[] = [];
-    const arr = this.index?.concepts as (ConceptSummary | undefined)[] | undefined;
+    const arr = this.index?.concepts;
     if (!arr) return hits;
 
     for (const entry of arr) {

package/src/adapters/types.ts

@@ -34,7 +34,7 @@ export interface ConceptIndex {
   conceptCount: number;
   chunkSize: number;
   chunks: { file: string; count: number }[];
-  concepts: ConceptSummary[];
+  concepts: (ConceptSummary | undefined)[];
 }
 
 export interface ConceptSummary {

package/src/components/ConceptDetail.vue

@@ -5,6 +5,8 @@ import { computed, ref, nextTick, watch } from 'vue';
 import { langName, langLabel } from '../utils/lang';
 import { renderMath, cleanContent } from '../utils/math';
 import type { RenderOptions } from '../utils/math';
+import { escapeAttr } from '../utils/escape';
+import { entryStatusColor, designationTypeLabel, designationTypeColor, getPreferredTerm } from '../utils/concept-helpers';
 import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
@@ -66,27 +68,24 @@ const languages = computed(() => {
   });
 });
 
-// Initialize collapsed state when languages change
+// Collapsible language sections — auto-collapse non-eng when 6+ languages
+const collapsedLangs = ref(new Set<string>());
+
+function initCollapsed(langs: string[]) {
+  if (langs.length >= 6) {
+    collapsedLangs.value = new Set(langs.filter(l => l !== 'eng'));
+  }
+}
+
 watch(languages, (langs) => { initCollapsed(langs); }, { immediate: true });
 
 const engConcept = computed((): LocalizedConcept | null => {
   return props.concept['gl:localizedConcept']?.['eng'] ?? null;
 });
 
-const primaryTerm = computed(() => {
-  const eng = engConcept.value;
-  if (!eng?.['gl:designation']?.length) return conceptId.value;
-  const desigs = eng['gl:designation'];
-  const preferredExpr = desigs.find(d => d['gl:normativeStatus'] === 'preferred' && d['@type'] === 'gl:Expression');
-  if (preferredExpr) return preferredExpr['gl:term'];
-  const preferred = desigs.find(d => d['gl:normativeStatus'] === 'preferred');
-  return preferred?.['gl:term'] ?? desigs[0]?.['gl:term'] ?? conceptId.value;
-});
+const primaryTerm = computed(() => getPreferredTerm(engConcept.value, conceptId.value));
 
 // Cross-reference resolver: generates clickable links for inline refs
-function escapeAttr(s: string) {
-  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
 
 const { ensureBibLoaded, bibResolver, figResolver } = useRenderOptions(() => props.registerId);
 
@@ -158,15 +157,6 @@ const allLangContent = computed(() => {
   return result;
 });
 
-// Collapsible language sections — auto-collapse non-eng when 6+ languages
-const collapsedLangs = ref(new Set<string>());
-
-function initCollapsed(langs: string[]) {
-  if (langs.length >= 6) {
-    collapsedLangs.value = new Set(langs.filter(l => l !== 'eng'));
-  }
-}
-
 function hasContent(lc: LangContent): boolean {
   return !!(lc.definition || lc.notes.length || lc.examples.length || lc.sources.length);
 }
@@ -256,12 +246,7 @@ async function navigateEdge(edge: GraphEdge) {
 
 function getTermForLang(lang: string): string {
   const lc = props.concept['gl:localizedConcept']?.[lang];
-  if (!lc?.['gl:designation']?.length) return '\u2014';
-  const desigs = lc['gl:designation'];
-  const preferredExpr = desigs.find(d => d['gl:normativeStatus'] === 'preferred' && d['@type'] === 'gl:Expression');
-  if (preferredExpr) return preferredExpr['gl:term'];
-  const preferred = desigs.find(d => d['gl:normativeStatus'] === 'preferred');
-  return preferred?.['gl:term'] ?? desigs[0]?.['gl:term'] ?? '\u2014';
+  return getPreferredTerm(lc);
 }
 
 function getDesignationsForLang(lang: string) {
@@ -283,32 +268,9 @@ function hasDefinition(lang: string): boolean {
   return lc['gl:definition']?.some((d: any) => d['gl:content']) ?? false;
 }
 
-function designationTypeLabel(type: string): string {
-  const labels: Record<string, string> = {
-    'gl:Expression': 'Expression',
-    'gl:Symbol': 'Symbol',
-    'gl:Abbreviation': 'Abbreviation',
-    'gl:GraphicalSymbol': 'Graphical',
-  };
-  return labels[type] ?? type;
-}
-
-function designationTypeColor(type: string): string {
-  if (type === 'gl:Symbol') return 'badge-purple';
-  if (type === 'gl:Abbreviation') return 'badge-yellow';
-  return 'badge-blue';
-}
-
-function entryStatusColor(status: string): string {
-  if (status === 'valid' || status === 'Standard') return 'badge-green';
-  if (status === 'superseded') return 'bg-red-50 text-red-700';
-  if (status === 'withdrawn') return 'bg-red-100 text-red-800';
-  if (status === 'draft') return 'badge-yellow';
-  return 'badge-gray';
-}
-
 function goAdjacent(id: string) {
   router.push({ name: 'concept', params: { registerId: props.registerId, conceptId: id } });
+  window.scrollTo({ top: 0, behavior: 'smooth' });
 }
 
 function plainTruncate(html: string, max: number = 120): string {
@@ -339,7 +301,7 @@ function plainTruncate(html: string, max: number = 120): string {
             v-if="adjacent.prev"
             @click="goAdjacent(adjacent.prev)"
             class="p-1.5 rounded-md text-ink-300 hover:text-ink-600 hover:bg-ink-50 transition-colors"
-            title="Previous concept"
+            title="Previous concept (←)"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
           </button>
@@ -347,7 +309,7 @@ function plainTruncate(html: string, max: number = 120): string {
             v-if="adjacent.next"
             @click="goAdjacent(adjacent.next)"
             class="p-1.5 rounded-md text-ink-300 hover:text-ink-600 hover:bg-ink-50 transition-colors"
-            title="Next concept"
+            title="Next concept (→)"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
           </button>

package/src/components/ConceptTimeline.vue

@@ -2,6 +2,7 @@
 import type { LocalizedConcept } from '../adapters/types';
 import { computed } from 'vue';
 import { langName, langLabel } from '../utils/lang';
+import { entryStatusColor } from '../utils/concept-helpers';
 
 const props = defineProps<{
   localizedConcepts: Record<string, LocalizedConcept>;
@@ -216,14 +217,6 @@ function eventRingColor(type: string): string {
   return colors[type] || 'ring-ink-100';
 }
 
-function entryStatusColor(status: string): string {
-  if (status === 'valid' || status === 'Standard') return 'badge-green';
-  if (status === 'superseded') return 'bg-red-50 text-red-700';
-  if (status === 'withdrawn') return 'bg-red-100 text-red-800';
-  if (status === 'draft') return 'badge-yellow';
-  return 'badge-gray';
-}
-
 function eventIconPath(type: string): string {
   // Returns an SVG path for the event type icon
   switch (type) {

package/src/components/LanguageDetail.vue

@@ -4,6 +4,8 @@ import { computed } from 'vue';
 import { langName, langLabel } from '../utils/lang';
 import { renderMath } from '../utils/math';
 import type { RenderOptions } from '../utils/math';
+import { escapeAttr } from '../utils/escape';
+import { entryStatusColor, designationTypeLabel, designationTypeColor } from '../utils/concept-helpers';
 import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { getFactory } from '../adapters/factory';
@@ -51,35 +53,10 @@ function normativeColor(status: string): string {
   if (status === 'deprecated') return 'bg-red-50 text-red-700';
   return 'bg-amber-50 text-amber-700';
 }
-function entryStatusColor(status: string): string {
-  if (status === 'valid' || status === 'Standard') return 'badge-green';
-  if (status === 'superseded') return 'bg-red-50 text-red-700';
-  if (status === 'withdrawn') return 'bg-red-100 text-red-800';
-  if (status === 'draft') return 'badge-yellow';
-  return 'badge-gray';
-}
-function designationTypeLabel(type: string): string {
-  const labels: Record<string, string> = {
-    'gl:Expression': 'Expression',
-    'gl:Symbol': 'Symbol',
-    'gl:Abbreviation': 'Abbreviation',
-    'gl:GraphicalSymbol': 'Graphical',
-  };
-  return labels[type] ?? type;
-}
-function designationTypeColor(type: string): string {
-  if (type === 'gl:Symbol') return 'badge-purple';
-  if (type === 'gl:Abbreviation') return 'badge-yellow';
-  return 'badge-blue';
-}
 
 const router = useRouter();
 const store = useVocabularyStore();
 
-function escapeAttr(s: string) {
-  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
-
 const factory = getFactory();
 
 const renderOpts: RenderOptions = {

package/src/composables/use-render-options.ts

@@ -1,6 +1,7 @@
 import { ref, watch } from 'vue';
 import type { RenderOptions, BibResolver, FigResolver } from '../utils/math';
 import { getFactory } from '../adapters/factory';
+import { escapeAttr } from '../utils/escape';
 
 interface BibEntry {
   reference: string;
@@ -52,7 +53,3 @@ export function useRenderOptions(registerId: () => string) {
 
   return { bibData, ensureBibLoaded, bibResolver, figResolver };
 }
-
-function escapeAttr(s: string) {
-  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}

package/src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
 
-const routes: RouteRecordRaw[] = [
+export const routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'home',

package/src/stores/vocabulary.ts

@@ -58,8 +58,8 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
         }
       }
       initialized.value = true;
-    } catch (e: any) {
-      error.value = `Failed to discover datasets: ${e.message}`;
+    } catch (e: unknown) {
+      error.value = `Failed to discover datasets: ${e instanceof Error ? e.message : String(e)}`;
     } finally {
       loading.value = false;
     }
@@ -81,8 +81,8 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
 
       // Seed graph nodes lazily — don't block UI for large datasets
       seedGraphNodes(registerId, adapter);
-    } catch (e: any) {
-      error.value = `Failed to load dataset ${registerId}: ${e.message}`;
+    } catch (e: unknown) {
+      error.value = `Failed to load dataset ${registerId}: ${e instanceof Error ? e.message : String(e)}`;
       throw e;
     }
   }
@@ -234,8 +234,8 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
 
       touchGraph();
       conceptEdges.value = graph.value.getEdges(uri);
-    } catch (e: any) {
-      error.value = `Failed to load concept ${conceptId}: ${e.message}`;
+    } catch (e: unknown) {
+      error.value = `Failed to load concept ${conceptId}: ${e instanceof Error ? e.message : String(e)}`;
       currentConcept.value = null;
       throw e;
     }
@@ -275,7 +275,7 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
     const loaded = [...datasets.value.values()].filter(a => a.index);
     if (!loaded.length) return null;
     const adapter = loaded[Math.floor(Math.random() * loaded.length)];
-    const concepts = adapter.getConcepts() as (import('../adapters/types').ConceptSummary | undefined)[];
+    const concepts = adapter.getConcepts();
     const dense = concepts.filter((c): c is import('../adapters/types').ConceptSummary => c != null);
     if (!dense.length) return null;
     const pick = dense[Math.floor(Math.random() * dense.length)];

package/src/utils/asciidoc-lite.ts

@@ -2,10 +2,21 @@
  * Lightweight AsciiDoc-to-HTML converter for news posts.
  * Handles: paragraphs, headings, bold, italic, monospace, links, lists, source blocks.
  */
+
+import { escapeHtml, escapeAttr } from './escape';
+
 export function renderAsciiDocLite(text: string): string {
   if (!text) return '';
 
   const output: string[] = [];
+  let paragraphBuf: string[] = [];
+
+  function flushParagraph() {
+    if (paragraphBuf.length > 0) {
+      output.push(`<p>${paragraphBuf.join(' ')}</p>`);
+      paragraphBuf = [];
+    }
+  }
   const lines = text.split('\n');
   let i = 0;
   let inSourceBlock = false;
@@ -22,7 +33,7 @@ export function renderAsciiDocLite(text: string): string {
         sourceLines = [];
         inSourceBlock = false;
       } else {
-        flushParagraph(output);
+        flushParagraph();
         inSourceBlock = true;
       }
       i++;
@@ -37,7 +48,7 @@ export function renderAsciiDocLite(text: string): string {
 
     // Empty line — paragraph break
     if (!trimmed) {
-      flushParagraph(output);
+      flushParagraph();
       i++;
       continue;
     }
@@ -45,7 +56,7 @@ export function renderAsciiDocLite(text: string): string {
     // Headings
     const headingMatch = trimmed.match(/^(={1,5})\s+(.+)$/);
     if (headingMatch) {
-      flushParagraph(output);
+      flushParagraph();
       const level = headingMatch[1].length + 1;
       output.push(`<h${level}>${inlineFormat(headingMatch[2])}</h${level}>`);
       i++;
@@ -54,7 +65,7 @@ export function renderAsciiDocLite(text: string): string {
 
     // Unordered list item
     if (trimmed.match(/^\*+\s+/)) {
-      flushParagraph(output);
+      flushParagraph();
       const items: string[] = [];
       while (i < lines.length && lines[i].trim().match(/^\*+\s+/)) {
         const itemLine = lines[i].trim();
@@ -69,7 +80,7 @@ export function renderAsciiDocLite(text: string): string {
 
     // Ordered list item
     if (trimmed.match(/^\.\s+/)) {
-      flushParagraph(output);
+      flushParagraph();
       const items: string[] = [];
       while (i < lines.length && lines[i].trim().match(/^\.\s+/)) {
         items.push(`<li>${inlineFormat(lines[i].trim().replace(/^\.\s+/, ''))}</li>`);
@@ -84,20 +95,11 @@ export function renderAsciiDocLite(text: string): string {
     i++;
   }
 
-  flushParagraph(output);
+  flushParagraph();
 
   return output.join('\n');
 }
 
-let paragraphBuf: string[] = [];
-
-function flushParagraph(output: string[]) {
-  if (paragraphBuf.length > 0) {
-    output.push(`<p>${paragraphBuf.join(' ')}</p>`);
-    paragraphBuf = [];
-  }
-}
-
 function inlineFormat(text: string): string {
   // AsciiDoc link: https://example.com[text]
   text = text.replace(/(https?:\/\/[^\s\[]+)\[([^\]]*)\]/g, (_, url, label) =>
@@ -120,7 +122,3 @@ function inlineFormat(text: string): string {
 
   return text;
 }
-
-function escapeHtml(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}

package/src/utils/concept-helpers.ts

@@ -0,0 +1,34 @@
+import type { Designation, LocalizedConcept } from '../adapters/types';
+
+export function entryStatusColor(status: string): string {
+  if (status === 'valid' || status === 'Standard') return 'badge-green';
+  if (status === 'superseded') return 'bg-red-50 text-red-700';
+  if (status === 'withdrawn') return 'bg-red-100 text-red-800';
+  if (status === 'draft') return 'badge-yellow';
+  return 'badge-gray';
+}
+
+export function designationTypeLabel(type: string): string {
+  const labels: Record<string, string> = {
+    'gl:Expression': 'Expression',
+    'gl:Symbol': 'Symbol',
+    'gl:Abbreviation': 'Abbreviation',
+    'gl:GraphicalSymbol': 'Graphical',
+  };
+  return labels[type] ?? type;
+}
+
+export function designationTypeColor(type: string): string {
+  if (type === 'gl:Symbol') return 'badge-purple';
+  if (type === 'gl:Abbreviation') return 'badge-yellow';
+  return 'badge-blue';
+}
+
+export function getPreferredTerm(lc: LocalizedConcept | null | undefined, fallback = '—'): string {
+  if (!lc?.['gl:designation']?.length) return fallback;
+  const desigs = lc['gl:designation'];
+  const preferredExpr = desigs.find(d => d['gl:normativeStatus'] === 'preferred' && d['@type'] === 'gl:Expression');
+  if (preferredExpr) return preferredExpr['gl:term'];
+  const preferred = desigs.find(d => d['gl:normativeStatus'] === 'preferred');
+  return preferred?.['gl:term'] ?? desigs[0]?.['gl:term'] ?? fallback;
+}

package/src/utils/escape.ts

@@ -0,0 +1,7 @@
+export function escapeHtml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+export function escapeAttr(s: string): string {
+  return escapeHtml(s).replace(/"/g, '&quot;');
+}

package/src/utils/markdown-lite.ts

@@ -104,6 +104,4 @@ export function renderMarkdown(input: string): string {
   return blocks.join('\n');
 }
 
-function escapeHtml(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
+import { escapeHtml } from './escape';

package/src/utils/math.ts

@@ -1,3 +1,5 @@
+import { escapeHtml, escapeAttr } from './escape';
+
 export type XrefResolver = (uri: string, term: string) => string;
 export type BibResolver = (refId: string, title: string) => string;
 export type FigResolver = (figId: string) => string;
@@ -8,10 +10,6 @@ export interface RenderOptions {
   figResolver?: FigResolver;
 }
 
-function escapeAttr(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
-
 function replaceBracketed(text: string, prefix: string, handler: (content: string, bold: boolean) => string): string {
   let result = '';
   let i = 0;
@@ -84,13 +82,6 @@ function convertLists(text: string): string {
   return result;
 }
 
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-}
-
 export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | RenderOptions): string {
   if (!text) return '';
   let result = text;

package/src/utils/plurimath.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './escape';
+
 type PlurimathCtor = new (data: string, format: string) => {
   toAsciimath(): string;
   toLatex(): string;
@@ -30,13 +32,6 @@ export function renderToMathML(expr: string, format: string): string | null {
   }
 }
 
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-}
-
 export function mathToHtml(expr: string, format: string, bold: boolean): string {
   const mathml = renderToMathML(expr, format);
   if (mathml) {

package/src/views/ConceptView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, watch, ref } from 'vue';
+import { computed, watch, ref, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import ConceptDetail from '../components/ConceptDetail.vue';
 
@@ -9,6 +10,7 @@ const props = defineProps<{
 }>();
 
 const store = useVocabularyStore();
+const router = useRouter();
 const conceptLoading = ref(false);
 const localError = ref<string | null>(null);
 
@@ -55,6 +57,25 @@ async function loadAdjacent() {
 }
 
 watch(() => props.conceptId, () => { loadAdjacent(); });
+
+function goAdjacent(id: string) {
+  router.push({ name: 'concept', params: { registerId: props.registerId, conceptId: id } });
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+  if (e.key === 'ArrowLeft' && adjacent.value.prev) {
+    e.preventDefault();
+    goAdjacent(adjacent.value.prev);
+  } else if (e.key === 'ArrowRight' && adjacent.value.next) {
+    e.preventDefault();
+    goAdjacent(adjacent.value.next);
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', onKeydown));
+onUnmounted(() => window.removeEventListener('keydown', onKeydown));
 </script>
 
 <template>

package/src/views/DatasetView.vue

@@ -44,6 +44,11 @@ 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) {
+    goToPage(page.value - 1);
+  }
 }
 
 onMounted(() => window.addEventListener('keydown', onGlobalKeydown));
@@ -62,7 +67,7 @@ watch(filter, async (q) => {
 
 // Dense array: only loaded (non-undefined) entries
 const loadedConcepts = computed(() => {
-  const arr = adapter.value?.getConcepts() as (import('../adapters/types').ConceptSummary | undefined)[] | undefined;
+  const arr = adapter.value?.getConcepts();
   if (!arr) return [];
   return arr.filter((c): c is import('../adapters/types').ConceptSummary => c != null);
 });
@@ -93,7 +98,7 @@ const paged = computed(() => {
   }
   // When not filtering, slice directly from the pre-allocated index (may contain undefined)
   const start = (page.value - 1) * perPage;
-  const arr = adapter.value?.getConcepts() as (import('../adapters/types').ConceptSummary | undefined)[] | undefined;
+  const arr = adapter.value?.getConcepts();
   if (!arr) return [];
   return arr.slice(start, start + perPage).filter((c): c is import('../adapters/types').ConceptSummary => c != null);
 });