@glossarist/concept-browser 0.3.4 → 0.4.0

package/src/stores/vocabulary.ts

@@ -2,14 +2,16 @@ 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 type { Manifest, SearchHit, GraphEdge } from '../adapters/types';
+import type { Concept } from 'glossarist';
+import { conceptUri } from '../adapters/model-bridge';
 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 currentConcept = ref<Concept | null>(null);
   const currentRegisterId = ref<string>('');
   const currentConceptId = ref<string>('');
   const loading = ref(false);
@@ -58,8 +60,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 +83,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;
     }
   }
@@ -97,7 +99,7 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
           uri: factory.router.buildUri(registerId, entry.id),
           register: registerId,
           conceptId: entry.id,
-          designations: entry.eng ? { eng: entry.eng } : {},
+          designations: entry.designations,
           status: entry.status,
           loaded: false,
         });
@@ -121,7 +123,7 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
           uri: factory.router.buildUri(registerId, entry.id),
           register: registerId,
           conceptId: entry.id,
-          designations: entry.eng ? { eng: entry.eng } : {},
+          designations: entry.designations,
           status: entry.status,
           loaded: false,
         });
@@ -143,11 +145,12 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
 
     await Promise.allSettled(adapters.map(async (adapter) => {
       try {
-        const [nodeResult, edgeResult] = await Promise.allSettled([
+        const [nodeResult, edgeResult, domainResult] = await Promise.allSettled([
           adapter.loadGraphNodes(),
           !edgeStatus.value[adapter.registerId]?.loaded
             ? adapter.loadEdgeIndex()
             : Promise.resolve([] as GraphEdge[]),
+          adapter.loadDomainNodes(),
         ]);
 
         if (nodeResult.status === 'fulfilled') {
@@ -170,6 +173,12 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
           }
           edgeStatus.value[adapter.registerId] = { loaded: true, count: edgeResult.value.length };
         }
+
+        if (domainResult.status === 'fulfilled') {
+          for (const dn of domainResult.value) {
+            engine.addNode(dn);
+          }
+        }
       } catch {
         // Individual adapter failures are non-critical for graph view
       }
@@ -180,9 +189,14 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
 
   async function loadEdges(adapter: DatasetAdapter) {
     try {
-      const edges = await adapter.loadEdgeIndex();
+      const [edges, domainNodes] = await Promise.all([
+        adapter.loadEdgeIndex(),
+        adapter.loadDomainNodes(),
+      ]);
+      for (const dn of domainNodes) {
+        graph.value.addNode(dn);
+      }
       for (const edge of edges) {
-        // Mark source node as having edges
         graph.value.addEdge(edge);
       }
       edgeStatus.value[adapter.registerId] = { loaded: true, count: edges.length };
@@ -205,26 +219,31 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
 
       // Extract and register edges for this specific concept
       const edges = adapter.extractEdges(concept);
-      const uri = concept['@id'];
+      const domainEdges = adapter.extractDomainEdges(concept);
+      const uriBase = adapter.manifest?.uriBase || 'https://glossarist.org';
+      const uri = conceptUri(concept, registerId, uriBase);
 
       // Update graph node with full data
+      const designations: Record<string, string> = {};
+      const indexEntry = adapter.getIndexEntry(conceptId);
+      if (indexEntry) {
+        for (const [lang, term] of Object.entries(indexEntry.designations)) {
+          if (term) designations[lang] = term;
+        }
+      }
+      for (const lang of concept.languages) {
+        const lc = concept.localization(lang);
+        if (lc?.primaryDesignation) {
+          designations[lang] = lc.primaryDesignation;
+        }
+      }
+
       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',
+        designations,
+        status: indexEntry?.status ?? 'unknown',
         loaded: true,
       });
 
@@ -232,10 +251,26 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
         graph.value.addEdge(edge);
       }
 
+      for (const edge of domainEdges) {
+        graph.value.addEdge(edge);
+        const existing = graph.value.getNode(edge.target);
+        if (!existing || !existing.loaded) {
+          graph.value.addNode({
+            uri: edge.target,
+            register: registerId,
+            conceptId: '',
+            designations: edge.label ? { eng: edge.label } : {},
+            status: 'domain',
+            loaded: true,
+            nodeType: 'domain',
+          });
+        }
+      }
+
       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;
     }
@@ -260,22 +295,37 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
     }
   }
 
-  async function searchAcrossDatasets(query: string, lang: string = 'eng'): Promise<SearchHit[]> {
-    const hits: SearchHit[] = [];
+  async function searchAcrossDatasets(query: string): Promise<SearchHit[]> {
+    const allHits: SearchHit[] = [];
     for (const adapter of datasets.value.values()) {
       if (adapter.index || adapter.manifest) {
         await adapter.ensureAllChunksLoaded();
-        hits.push(...adapter.search(query, lang));
+        allHits.push(...adapter.search(query));
+      }
+    }
+
+    // Deduplicate: keep the best hit per (registerId, conceptId)
+    const best = new Map<string, SearchHit>();
+    for (const hit of allHits) {
+      const key = `${hit.registerId}:${hit.conceptId}`;
+      const existing = best.get(key);
+      if (!existing) {
+        best.set(key, hit);
+      } else {
+        // Prefer designation match over id match, then prefer shorter language code (eng first)
+        if (hit.matchField === 'designation' && existing.matchField === 'id') {
+          best.set(key, hit);
+        }
       }
     }
-    return hits;
+    return [...best.values()];
   }
 
   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 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/style.css

@@ -290,50 +290,78 @@
 }
 
 /* ===== Dark mode ===== */
+
+/*
+  Color philosophy:
+  Light mode uses an "ink" navy-indigo palette (50=lightest → 900=darkest).
+  Dark mode inverts the scale: the darkest light colors become the brightest
+  dark colors, maintaining WCAG AA contrast on dark surfaces.
+
+  Surface hierarchy (light → dark):
+    surface (#faf9f6) → surface-alt (#f3f2ee) → surface-raised (#fff) — cards, inputs
+  Dark surface hierarchy:
+    surface (#0f1020) → surface-alt (#161728) → surface-raised (#1e1f34)
+    Raised cards sit one step lighter than the base surface.
+*/
+
 .dark body {
   background-color: #0f1020;
   color: #dddde6;
 }
 
-/* Surfaces */
+/* ── 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 .bg-surface-raised { background-color: #1e1f34 !important; }
+
+/* ── Text (inverted ink scale for dark) ──
+   ink-800/700 → primary headings (brightest)
+   ink-600     → body text (readable, ≥4.5:1 on raised surfaces)
+   ink-500/400 → secondary/hint
+   ink-300/200 → muted labels
+   ink-100     → borders/decorative only
+*/
 .dark .text-ink { color: #dddde6 !important; }
+.dark .text-ink-900 { color: #eeeef4 !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-700 { color: #c8c9d8 !important; }
+.dark .text-ink-600 { color: #b8b9cc !important; }
+.dark .text-ink-500 { color: #9d9fbb !important; }
+.dark .text-ink-400 { color: #7a7c9a !important; }
 .dark .text-ink-300 { color: #636588 !important; }
 .dark .text-ink-200 { color: #484a6e !important; }
 .dark .text-ink-100 { color: #484a6e !important; }
 
-/* Backgrounds */
+/* ── Backgrounds ── */
 .dark .bg-ink-50 { background-color: #161728 !important; }
+.dark .bg-ink-50\/30 { background-color: rgba(22, 23, 40, 0.3) !important; }
+.dark .bg-ink-50\/60 { background-color: rgba(22, 23, 40, 0.6) !important; }
 .dark .bg-ink-100 { background-color: #1e1f34 !important; }
+.dark .bg-ink-200 { background-color: #22243c !important; }
+.dark .bg-ink-800 { background-color: #0a0b18 !important; }
+.dark .bg-ink-800\/8 { background-color: rgba(10, 11, 24, 0.08) !important; }
 
-/* Borders */
+/* ── Borders ── */
 .dark .border-ink-100 { border-color: #2c2e4a !important; }
+.dark .border-ink-100\/30 { border-color: rgba(44, 46, 74, 0.3) !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; }
+.dark .border-ink-800 { border-color: #2c2e4a !important; }
 
-/* Focus rings */
+/* ── 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; }
+.dark .focus\:border-ink-400:focus { border-color: #7a7c9a !important; }
 
-/* Cards */
+/* ── 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 */
+/* ── Inputs ── */
 .dark input {
   background-color: #161728 !important;
   border-color: #2c2e4a !important;
@@ -341,16 +369,42 @@
 }
 .dark input::placeholder { color: #484a6e !important; }
 
-/* Skeleton */
+/* ── 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; }
+/* ── Hover states ── */
+.dark .hover\:bg-ink-50:hover { background-color: #1e1f34 !important; }
+.dark .hover\:bg-ink-50\/30:hover { background-color: rgba(30, 31, 52, 0.3) !important; }
+.dark .hover\:bg-ink-50\/50:hover { background-color: rgba(30, 31, 52, 0.5) !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; }
+.dark .hover\:text-ink-700:hover { color: #dddde6 !important; }
+.dark .hover\:text-ink-800:hover { color: #eeeef4 !important; }
 
-/* Placeholder text */
+/* ── Placeholder text ── */
 .dark .placeholder\:text-ink-300::placeholder { color: #484a6e !important; }
+
+/* ── Semantic colors (badges, accent text) ── */
+.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
+.dark .text-blue-600 { color: #93bbfd !important; }
+.dark .text-blue-700 { color: #7aa8fb !important; }
+.dark .border-blue-100 { border-color: rgba(59, 130, 246, 0.25) !important; }
+.dark .border-blue-500 { border-color: #3b82f6 !important; }
+.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
+.dark .text-emerald-500 { color: #6ee7b7 !important; }
+.dark .text-emerald-700 { color: #6ee7b7 !important; }
+.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.25) !important; }
+.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
+.dark .text-amber-600 { color: #fbbf24 !important; }
+.dark .text-amber-700 { color: #fbbf24 !important; }
+.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.15) !important; }
+.dark .text-purple-700 { color: #c4b5fd !important; }
+.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
+.dark .text-red-600 { color: #fca5a5 !important; }
+
+/* Scrollbar hide utility */
+@layer utilities {
+  .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
+  .scrollbar-none::-webkit-scrollbar { display: none; }
+}

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-formats.ts

@@ -1,4 +1,4 @@
-import type { ConceptDocument, LocalizedConcept } from '../adapters/types';
+import type { Concept } from 'glossarist';
 
 export interface FormatDescriptor {
   extension: string;
@@ -13,7 +13,7 @@ export const FORMAT_REGISTRY: Record<string, FormatDescriptor> = {
   yaml: { extension: 'yaml', label: 'YAML', mediaType: 'text/yaml' },
 };
 
-function getLocalizedData(concept: ConceptDocument) {
+function getLocalizedData(concept: Concept) {
   const result: Record<string, {
     prefLabels: string[];
     altLabels: string[];
@@ -21,19 +21,21 @@ function getLocalizedData(concept: ConceptDocument) {
     notes: string[];
   }> = {};
 
-  for (const [lang, lc] of Object.entries(concept['gl:localizedConcept'] || {})) {
-    const descs = lc['gl:designation'] || [];
-    const prefLabels = descs
-      .filter(d => d['gl:normativeStatus'] === 'preferred' && d['gl:term'])
-      .map(d => d['gl:term']!);
-    const altLabels = descs
-      .filter(d => d['gl:normativeStatus'] !== 'preferred' && d['gl:term'])
-      .map(d => d['gl:term']!);
-    const definitions = (lc['gl:definition'] || [])
-      .map(d => d['gl:content'] || '')
+  for (const lang of concept.languages) {
+    const lc = concept.localization(lang);
+    if (!lc) continue;
+
+    const prefLabels = lc.terms
+      .filter(d => d.normativeStatus === 'preferred' && d.designation)
+      .map(d => d.designation);
+    const altLabels = lc.terms
+      .filter(d => d.normativeStatus !== 'preferred' && d.designation)
+      .map(d => d.designation);
+    const definitions = lc.definitions
+      .map(d => d.content || '')
       .filter(Boolean);
-    const notes = (lc['gl:notes'] || [])
-      .map(d => d['gl:content'] || '')
+    const notes = lc.notes
+      .map(d => d.content || '')
       .filter(Boolean);
 
     if (prefLabels.length || definitions.length) {
@@ -48,9 +50,9 @@ function escapeTurtle(s: string): string {
   return s.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n');
 }
 
-export function conceptToTurtle(concept: ConceptDocument): string {
-  const uri = concept['@id'] || '';
-  const id = concept['gl:identifier'] || '';
+export function conceptToTurtle(concept: Concept): string {
+  const uri = concept.uri || '';
+  const id = concept.id;
   const data = getLocalizedData(concept);
 
   const lines: string[] = [
@@ -84,9 +86,9 @@ export function conceptToTurtle(concept: ConceptDocument): string {
   return lines.join('\n');
 }
 
-export function conceptToSkosJsonLd(concept: ConceptDocument): string {
-  const uri = concept['@id'] || '';
-  const id = concept['gl:identifier'] || '';
+export function conceptToSkosJsonLd(concept: Concept): string {
+  const uri = concept.uri || '';
+  const id = concept.id;
   const data = getLocalizedData(concept);
 
   const doc: Record<string, any> = {

package/src/utils/concept-helpers.ts

@@ -0,0 +1,54 @@
+import type { LocalizedConcept } from 'glossarist';
+import { ontology } from '../adapters/ontology-registry';
+
+export function entryStatusColor(status: string): string {
+  const colors: Record<string, string> = {
+    valid: 'badge-green',
+    not_valid: 'bg-red-50 text-red-700',
+    superseded: 'bg-red-50 text-red-700',
+    retired: 'badge-gray',
+    withdrawn: 'bg-red-100 text-red-800',
+    draft: 'badge-yellow',
+    Standard: 'badge-green',
+  };
+  return colors[status] ?? 'badge-gray';
+}
+
+export function conceptStatusColor(status: string | null): string {
+  if (!status) return 'badge-gray';
+  const colors: Record<string, string> = {
+    draft: 'badge-yellow',
+    submitted: 'badge-blue',
+    valid: 'badge-green',
+    not_valid: 'bg-red-50 text-red-700',
+    invalid: 'bg-red-50 text-red-700',
+    superseded: 'bg-red-50 text-red-700',
+    retired: 'badge-gray',
+  };
+  return colors[status] ?? 'badge-gray';
+}
+
+export function conceptStatusLabel(status: string | null): string {
+  if (!status) return '';
+  return ontology.getLabel('conceptStatus', status) || status;
+}
+
+export function conceptStatusDefinition(status: string | null): string | null {
+  if (!status) return null;
+  return ontology.getDefinition('conceptStatus', status);
+}
+
+export function entryStatusLabel(status: string | null): string {
+  if (!status) return '';
+  return ontology.getLabel('entryStatus', status) || status;
+}
+
+export function entryStatusDefinition(status: string | null): string | null {
+  if (!status) return null;
+  return ontology.getDefinition('entryStatus', status);
+}
+
+export function getPreferredTerm(lc: LocalizedConcept | null | undefined, fallback = '—'): string {
+  if (!lc) return fallback;
+  return lc.primaryDesignation ?? lc.terms[0]?.designation ?? fallback;
+}