@glossarist/concept-browser 0.1.0

package/src/stores/vocabulary.ts

@@ -0,0 +1,309 @@
+import { defineStore } from 'pinia';
+import { ref, computed, toRaw } from 'vue';
+import { getFactory } from '../adapters/factory';
+import type { DatasetAdapter } from '../adapters/DatasetAdapter';
+import type { Manifest, ConceptDocument, SearchHit, GraphEdge } from '../adapters/types';
+import { GraphEngine } from '../graph';
+
+export const useVocabularyStore = defineStore('vocabulary', () => {
+  // State
+  const datasets = ref<Map<string, DatasetAdapter>>(new Map());
+  const manifests = ref<Map<string, Manifest>>(new Map());
+  const currentConcept = ref<ConceptDocument | null>(null);
+  const currentRegisterId = ref<string>('');
+  const currentConceptId = ref<string>('');
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+  const graph = ref(new GraphEngine());
+  const conceptEdges = ref<GraphEdge[]>([]);
+  const initialized = ref(false);
+
+  // Graph reactivity: increment to trigger computed updates
+  const graphVersion = ref(0);
+  function touchGraph() { graphVersion.value++; }
+
+  // Edge loading status
+  const edgeStatus = ref<Record<string, { loaded: boolean; count: number }>>({});
+
+  const factory = getFactory();
+
+  // Computed
+  const currentManifest = computed(() =>
+    manifests.value.get(currentRegisterId.value)
+  );
+
+  const currentAdapter = computed(() =>
+    datasets.value.get(currentRegisterId.value)
+  );
+
+  const datasetList = computed(() => {
+    const list: { id: string; manifest: Manifest; adapter: DatasetAdapter }[] = [];
+    for (const [id, adapter] of datasets.value) {
+      const m = manifests.value.get(id);
+      if (m) list.push({ id, manifest: m, adapter: adapter as DatasetAdapter });
+    }
+    return list;
+  });
+
+  // Actions
+  async function discoverDatasets() {
+    loading.value = true;
+    error.value = null;
+    try {
+      const adapters = await factory.discoverDatasets('/datasets.json');
+      for (const adapter of adapters) {
+        datasets.value.set(adapter.registerId, adapter);
+        if (adapter.manifest) {
+          manifests.value.set(adapter.registerId, adapter.manifest);
+        }
+      }
+      initialized.value = true;
+    } catch (e: any) {
+      error.value = `Failed to discover datasets: ${e.message}`;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function loadDataset(registerId: string) {
+    error.value = null;
+    try {
+      const adapter = await factory.loadDataset(registerId);
+      datasets.value.set(registerId, adapter);
+      if (adapter.manifest) {
+        manifests.value.set(registerId, adapter.manifest);
+      }
+
+      // Load pre-computed edges (lightweight)
+      await loadEdges(adapter);
+
+      touchGraph();
+
+      // 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}`;
+      throw e;
+    }
+  }
+
+  function seedGraphNodes(registerId: string, adapter: DatasetAdapter, sync = false) {
+    const entries = adapter.getConcepts();
+
+    if (sync) {
+      for (const entry of entries) {
+        if (!entry) continue;
+        graph.value.addNode({
+          uri: factory.router.buildUri(registerId, entry.id),
+          register: registerId,
+          conceptId: entry.id,
+          designations: entry.eng ? { eng: entry.eng } : {},
+          status: entry.status,
+          loaded: false,
+        });
+      }
+      touchGraph();
+      return;
+    }
+
+    const batchSize = 500;
+    let offset = 0;
+    const schedule = typeof requestIdleCallback !== 'undefined'
+      ? requestIdleCallback
+      : (cb: () => void) => setTimeout(cb, 0);
+
+    function processBatch() {
+      const end = Math.min(offset + batchSize, entries.length);
+      for (let i = offset; i < end; i++) {
+        const entry = entries[i];
+        if (!entry) continue;
+        graph.value.addNode({
+          uri: factory.router.buildUri(registerId, entry.id),
+          register: registerId,
+          conceptId: entry.id,
+          designations: entry.eng ? { eng: entry.eng } : {},
+          status: entry.status,
+          loaded: false,
+        });
+      }
+      offset = end;
+      if (offset < entries.length) {
+        schedule(processBatch);
+      } else {
+        touchGraph();
+      }
+    }
+
+    schedule(processBatch);
+  }
+
+  async function loadAllGraphData() {
+    const engine = toRaw(graph.value);
+    const adapters = factory.getAdapters();
+
+    await Promise.allSettled(adapters.map(async (adapter) => {
+      try {
+        const [nodeResult, edgeResult] = await Promise.allSettled([
+          adapter.loadGraphNodes(),
+          !edgeStatus.value[adapter.registerId]?.loaded
+            ? adapter.loadEdgeIndex()
+            : Promise.resolve([] as GraphEdge[]),
+        ]);
+
+        if (nodeResult.status === 'fulfilled') {
+          const { uriPrefix, nodes } = nodeResult.value;
+          for (const [id, term, lang, status] of nodes) {
+            engine.addNode({
+              uri: uriPrefix + id,
+              register: adapter.registerId,
+              conceptId: id,
+              designations: term ? { [lang || 'eng']: term } : {},
+              status,
+              loaded: false,
+            });
+          }
+        }
+
+        if (edgeResult.status === 'fulfilled' && Array.isArray(edgeResult.value)) {
+          for (const edge of edgeResult.value) {
+            engine.addEdge(edge);
+          }
+          edgeStatus.value[adapter.registerId] = { loaded: true, count: edgeResult.value.length };
+        }
+      } catch {
+        // Individual adapter failures are non-critical for graph view
+      }
+    }));
+
+    touchGraph();
+  }
+
+  async function loadEdges(adapter: DatasetAdapter) {
+    try {
+      const edges = await adapter.loadEdgeIndex();
+      for (const edge of edges) {
+        // Mark source node as having edges
+        graph.value.addEdge(edge);
+      }
+      edgeStatus.value[adapter.registerId] = { loaded: true, count: edges.length };
+    } catch {
+      edgeStatus.value[adapter.registerId] = { loaded: false, count: 0 };
+    }
+  }
+
+  async function viewConcept(registerId: string, conceptId: string) {
+    error.value = null;
+    currentRegisterId.value = registerId;
+    currentConceptId.value = conceptId;
+
+    try {
+      const adapter = datasets.value.get(registerId);
+      if (!adapter) throw new Error(`Dataset ${registerId} not loaded`);
+
+      const concept = await adapter.fetchConcept(conceptId);
+      currentConcept.value = concept;
+
+      // Extract and register edges for this specific concept
+      const edges = adapter.extractEdges(concept);
+      const uri = concept['@id'];
+
+      // Update graph node with full data
+      graph.value.addNode({
+        uri,
+        register: registerId,
+        conceptId,
+        designations: (() => {
+          const d: Record<string, string> = {};
+          const entry = adapter.getIndexEntry(conceptId);
+          if (entry?.eng) d.eng = entry.eng;
+          for (const [lang, lc] of Object.entries(concept['gl:localizedConcept'] || {})) {
+            const preferred = lc['gl:designation']?.find(
+              (dd: any) => dd['gl:normativeStatus'] === 'preferred'
+            );
+            if (preferred?.['gl:term']) d[lang] = preferred['gl:term'];
+          }
+          return d;
+        })(),
+        status: adapter.getIndexEntry(conceptId)?.status ?? 'unknown',
+        loaded: true,
+      });
+
+      for (const edge of edges) {
+        graph.value.addEdge(edge);
+      }
+
+      touchGraph();
+      conceptEdges.value = graph.value.getEdges(uri);
+    } catch (e: any) {
+      error.value = `Failed to load concept ${conceptId}: ${e.message}`;
+      currentConcept.value = null;
+      throw e;
+    }
+  }
+
+  async function navigateToUri(uri: string) {
+    const resolution = factory.resolve(uri);
+
+    if (resolution.type !== 'internal') {
+      error.value = `Cannot resolve URI: ${uri}`;
+      return;
+    }
+
+    if (!datasets.value.has(resolution.registerId)) {
+      await loadDataset(resolution.registerId);
+    }
+
+    try {
+      await viewConcept(resolution.registerId, resolution.conceptId);
+    } catch {
+      // viewConcept already sets error.value
+    }
+  }
+
+  async function searchAcrossDatasets(query: string, lang: string = 'eng'): Promise<SearchHit[]> {
+    const hits: SearchHit[] = [];
+    for (const adapter of datasets.value.values()) {
+      if (adapter.index || adapter.manifest) {
+        await adapter.ensureAllChunksLoaded();
+        hits.push(...adapter.search(query, lang));
+      }
+    }
+    return hits;
+  }
+
+  async function getRandomConcept(): Promise<{ registerId: string; conceptId: string } | null> {
+    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 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)];
+    return { registerId: adapter.registerId, conceptId: pick.id };
+  }
+
+  return {
+    datasets,
+    manifests,
+    currentConcept,
+    currentRegisterId,
+    currentConceptId,
+    loading,
+    error,
+    graph,
+    graphVersion,
+    conceptEdges,
+    initialized,
+    edgeStatus,
+    currentManifest,
+    currentAdapter,
+    datasetList,
+    discoverDatasets,
+    loadDataset,
+    viewConcept,
+    navigateToUri,
+    searchAcrossDatasets,
+    loadAllGraphData,
+    getRandomConcept,
+  };
+});

package/src/style.css

@@ -0,0 +1,314 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --brand-primary: #2563eb;
+  --brand-primary-rgb: 37, 99, 235;
+  --brand-dark: #1e293b;
+  --font-header: 'DM Serif Display', Georgia, serif;
+  --font-body: 'DM Sans', system-ui, sans-serif;
+}
+
+@layer base {
+  body {
+    font-family: var(--font-body);
+    @apply antialiased bg-surface text-ink-800;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1, h2, h3, .font-serif {
+    font-family: var(--font-header);
+  }
+
+  code, pre, .font-mono {
+    font-family: 'JetBrains Mono', monospace;
+  }
+}
+
+@layer components {
+  /* Cards */
+  .card {
+    @apply bg-surface-raised rounded-xl border border-ink-100/60;
+    box-shadow: 0 1px 3px rgba(26, 27, 46, 0.04), 0 1px 2px rgba(26, 27, 46, 0.02);
+  }
+
+  .card-hover {
+    @apply card transition-all duration-200;
+  }
+  .card-hover:hover {
+    box-shadow: 0 4px 16px rgba(26, 27, 46, 0.08), 0 2px 4px rgba(26, 27, 46, 0.04);
+    @apply border-ink-200;
+    transform: translateY(-1px);
+  }
+  .card-hover:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 3px rgba(26, 27, 46, 0.04);
+  }
+
+  /* Buttons */
+  .btn-primary {
+    @apply text-white px-5 py-2 rounded-lg font-medium text-sm transition-all duration-150;
+    background-color: var(--brand-dark);
+    box-shadow: 0 1px 2px rgba(26, 27, 46, 0.12);
+  }
+  .btn-primary:hover {
+    background-color: var(--brand-primary);
+    box-shadow: 0 2px 4px rgba(26, 27, 46, 0.16);
+  }
+  .btn-primary:disabled {
+    @apply bg-ink-300 cursor-not-allowed;
+    box-shadow: none;
+  }
+
+  .btn-secondary {
+    @apply bg-surface-raised text-ink-700 px-5 py-2 rounded-lg font-medium text-sm border border-ink-100 transition-all duration-150;
+  }
+  .btn-secondary:hover {
+    @apply bg-surface-alt border-ink-200;
+  }
+
+  .btn-ghost {
+    @apply text-ink-600 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-150;
+  }
+  .btn-ghost:hover {
+    @apply bg-ink-50 text-ink-800;
+  }
+  .btn-ghost.active {
+    @apply bg-ink-50 text-ink-800 font-semibold;
+  }
+
+  /* Badges */
+  .badge {
+    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium tracking-wide;
+  }
+  .badge-blue {
+    @apply badge bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300;
+  }
+  .badge-green {
+    @apply badge bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300;
+  }
+  .badge-yellow {
+    @apply badge bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300;
+  }
+  .badge-gray {
+    @apply badge bg-ink-50 text-ink-600;
+  }
+  .badge-purple {
+    @apply badge bg-purple-50 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300;
+  }
+
+  /* Brand badge — uses primary color from CSS var */
+  .badge-brand {
+    @apply badge;
+    background-color: rgba(var(--brand-primary-rgb), 0.1);
+    color: var(--brand-primary);
+  }
+
+  /* Links */
+  .concept-link {
+    color: var(--brand-primary);
+    @apply underline-offset-2 hover:underline cursor-pointer transition-colors;
+  }
+  .concept-link:hover {
+    filter: brightness(0.8);
+  }
+
+  .xref-link {
+    color: var(--brand-primary);
+    @apply underline-offset-2 hover:underline cursor-pointer transition-colors;
+    font-weight: 500;
+  }
+
+  /* Concept definition lists */
+  .concept-list {
+    list-style: disc;
+    padding-left: 1.25rem;
+    margin: 0.5rem 0;
+  }
+  .concept-list li {
+    margin: 0.25rem 0;
+  }
+
+  /* Smooth collapse for language sections */
+  .lang-content {
+    overflow: hidden;
+    transition: max-height 250ms ease-out, opacity 200ms ease-out;
+  }
+
+  /* Section labels */
+  .section-label {
+    @apply text-[11px] font-semibold uppercase tracking-widest text-ink-400 mb-2;
+    font-family: var(--font-body);
+  }
+
+  /* Math */
+  .math-inline .katex {
+    font-size: 1.05em;
+  }
+  .math-bold .katex .mord,
+  .math-bold .katex .mbin,
+  .math-bold .katex .mrel {
+    font-weight: bold;
+  }
+  .math-fallback {
+    @apply bg-ink-50 text-ink-600 px-1 rounded text-xs font-mono;
+  }
+
+  /* Prose content (news posts, etc.) */
+  .prose-news {
+    @apply text-sm text-ink-700 leading-relaxed;
+  }
+  .prose-news h2 {
+    @apply font-serif text-xl text-ink-800 mt-6 mb-3;
+  }
+  .prose-news h3 {
+    @apply font-serif text-lg text-ink-800 mt-5 mb-2;
+  }
+  .prose-news h4 {
+    @apply font-semibold text-ink-800 mt-4 mb-2;
+  }
+  .prose-news p {
+    @apply mb-4;
+  }
+  .prose-news ul, .prose-news ol {
+    @apply mb-4 pl-5;
+  }
+  .prose-news ul {
+    @apply list-disc;
+  }
+  .prose-news ol {
+    @apply list-decimal;
+  }
+  .prose-news li {
+    @apply mb-1;
+  }
+  .prose-news a {
+    @apply concept-link;
+  }
+  .prose-news strong {
+    @apply font-semibold text-ink-800;
+  }
+  .prose-news em {
+    @apply italic;
+  }
+  .prose-news code {
+    @apply bg-ink-50 text-ink-600 px-1 rounded text-xs font-mono;
+  }
+  .prose-news pre {
+    @apply bg-ink-50 rounded-lg p-4 mb-4 overflow-x-auto text-xs font-mono;
+  }
+  .prose-news pre code {
+    @apply bg-transparent px-0 text-ink-700;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+/* Route transitions */
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 150ms ease;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+}
+
+/* Staggered entrance for card grids */
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-entrance {
+  animation: fadeSlideIn 300ms ease both;
+}
+
+/* Skeleton shimmer */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f4 25%, #f7f7f9 50%, #f0f0f4 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: 6px;
+}
+
+/* ===== Dark mode ===== */
+.dark body {
+  background-color: #0f1020;
+  color: #dddde6;
+}
+
+/* Surfaces */
+.dark .bg-surface { background-color: #0f1020 !important; }
+.dark .bg-surface-alt { background-color: #161728 !important; }
+.dark .bg-surface-raised { background-color: #1a1b2e !important; }
+
+/* Text */
+.dark .text-ink { color: #dddde6 !important; }
+.dark .text-ink-800 { color: #dddde6 !important; }
+.dark .text-ink-700 { color: #b8b9cc !important; }
+.dark .text-ink-600 { color: #8d8faa !important; }
+.dark .text-ink-500 { color: #8d8faa !important; }
+.dark .text-ink-400 { color: #636588 !important; }
+.dark .text-ink-300 { color: #636588 !important; }
+.dark .text-ink-200 { color: #484a6e !important; }
+.dark .text-ink-100 { color: #484a6e !important; }
+
+/* Backgrounds */
+.dark .bg-ink-50 { background-color: #161728 !important; }
+.dark .bg-ink-100 { background-color: #1e1f34 !important; }
+
+/* Borders */
+.dark .border-ink-100 { border-color: #2c2e4a !important; }
+.dark .border-ink-100\/60 { border-color: rgba(44, 46, 74, 0.6) !important; }
+.dark .border-ink-100\/80 { border-color: rgba(44, 46, 74, 0.8) !important; }
+.dark .border-ink-200 { border-color: #36385a !important; }
+
+/* Focus rings */
+.dark .focus\:ring-ink-200:focus { --tw-ring-color: #36385a !important; }
+.dark .focus\:ring-ink-200\/30:focus { --tw-ring-color: rgba(54, 56, 90, 0.3) !important; }
+.dark .focus\:border-ink-400:focus { border-color: #636588 !important; }
+
+/* Cards */
+.dark .card {
+  background-color: #1e1f34 !important;
+  border-color: rgba(44, 46, 74, 0.6) !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Inputs */
+.dark input {
+  background-color: #161728 !important;
+  border-color: #2c2e4a !important;
+  color: #dddde6 !important;
+}
+.dark input::placeholder { color: #484a6e !important; }
+
+/* Skeleton */
+.dark .skeleton {
+  background: linear-gradient(90deg, #1e1f34 25%, #2c2e4a 50%, #1e1f34 75%) !important;
+}
+
+/* Hover states */
+.dark .hover\:bg-ink-50:hover { background-color: #161728 !important; }
+.dark .hover\:bg-surface-alt:hover { background-color: #161728 !important; }
+.dark .hover\:text-ink-700:hover { color: #b8b9cc !important; }
+.dark .hover\:text-ink-800:hover { color: #dddde6 !important; }
+
+/* Placeholder text */
+.dark .placeholder\:text-ink-300::placeholder { color: #484a6e !important; }