@glossarist/concept-browser 0.3.7 → 0.4.0

package/src/utils/relationship-categories.ts

@@ -0,0 +1,84 @@
+import { ontology } from '../adapters/ontology-registry';
+
+export interface RelationshipCategory {
+  id: string;
+  label: string;
+  types: string[];
+  color: string;
+}
+
+export const RELATIONSHIP_CATEGORIES: RelationshipCategory[] = [
+  {
+    id: 'hierarchical',
+    label: 'Hierarchy',
+    types: ['broader', 'narrower', 'broader_generic', 'narrower_generic',
+            'broader_partitive', 'narrower_partitive', 'broader_instantial', 'narrower_instantial'],
+    color: 'text-blue-600 bg-blue-50',
+  },
+  {
+    id: 'mapping',
+    label: 'Equivalence',
+    types: ['equivalent', 'close_match', 'broad_match', 'narrow_match', 'related_match'],
+    color: 'text-emerald-600 bg-emerald-50',
+  },
+  {
+    id: 'associative',
+    label: 'Associative',
+    types: ['see', 'related_concept', 'related_concept_broader', 'related_concept_narrower', 'references'],
+    color: 'text-violet-600 bg-violet-50',
+  },
+  {
+    id: 'lifecycle',
+    label: 'Lifecycle',
+    types: ['deprecates', 'supersedes', 'superseded_by', 'replaces'],
+    color: 'text-red-600 bg-red-50',
+  },
+  {
+    id: 'comparative',
+    label: 'Comparison',
+    types: ['compare', 'contrast'],
+    color: 'text-amber-600 bg-amber-50',
+  },
+  {
+    id: 'spatiotemporal',
+    label: 'Spatiotemporal',
+    types: ['sequentially_related', 'spatially_related', 'temporally_related'],
+    color: 'text-teal-600 bg-teal-50',
+  },
+  {
+    id: 'lexical',
+    label: 'Lexical',
+    types: ['homograph', 'false_friend'],
+    color: 'text-pink-600 bg-pink-50',
+  },
+  {
+    id: 'designation',
+    label: 'Designation',
+    types: ['abbreviated_form_for', 'short_form_for'],
+    color: 'text-gray-600 bg-gray-50',
+  },
+];
+
+const CATEGORY_MAP = new Map<string, RelationshipCategory>();
+for (const cat of RELATIONSHIP_CATEGORIES) {
+  for (const t of cat.types) {
+    CATEGORY_MAP.set(t, cat);
+  }
+}
+
+export function categorizeRelationship(type: string): RelationshipCategory {
+  return CATEGORY_MAP.get(type) ?? { id: 'other', label: 'Other', types: [type], color: 'text-gray-600 bg-gray-50' };
+}
+
+export function relationshipLabel(type: string): string {
+  // Check the ontology taxonomy first (for glossarist-specific types)
+  const concept = ontology.getConcept('relationshipType', type);
+  if (concept?.prefLabel) return concept.prefLabel;
+
+  // Fallback: humanize the type string
+  return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+
+export function relationshipDefinition(type: string): string | null {
+  return ontology.getDefinition('relationshipType', type);
+}

package/src/views/OntologySchemaView.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import {
+  getClass,
+  getAllClasses,
+  getClassTree,
+  getAllPropertiesForClass,
+  getStats,
+  type OwlClass,
+} from '../adapters/ontology-schema';
+import { ontology, type TaxonomyConcept } from '../adapters/ontology-registry';
+
+const stats = getStats();
+const allClasses = getAllClasses();
+const treeRoots = getClassTree();
+
+const taxonomyKeys = [
+  'conceptStatus', 'entryStatus', 'normativeStatus', 'sourceType', 'sourceStatus',
+  'relationshipType', 'designationType', 'termType', 'grammarGender', 'grammarNumber',
+];
+
+const taxonomyLabels: Record<string, string> = {
+  conceptStatus: 'Concept Status',
+  entryStatus: 'Entry Status',
+  normativeStatus: 'Normative Status',
+  sourceType: 'Source Type',
+  sourceStatus: 'Source Status',
+  relationshipType: 'Relationship Type',
+  designationType: 'Designation Type',
+  termType: 'Term Type',
+  grammarGender: 'Grammar Gender',
+  grammarNumber: 'Grammar Number',
+};
+
+const activeClassId = ref('gloss:Concept');
+const showTaxonomies = ref(false);
+const activeTaxonomy = ref<string | null>(null);
+
+const activeClass = computed(() => getClass(activeClassId.value));
+const activeProperties = computed(() => getAllPropertiesForClass(activeClassId.value));
+
+function activeTaxonomyData() {
+  if (!activeTaxonomy.value) return null;
+  const key = activeTaxonomy.value as Parameters<typeof ontology.getAll>[0];
+  const all = ontology.getAll(key);
+  const top = all.filter(c => !c.broader);
+  return { scheme: ontology.getScheme(key), concepts: all, top };
+}
+
+function childClasses(parentId: string): OwlClass[] {
+  const cls = getClass(parentId);
+  if (!cls) return [];
+  return cls.children.map(id => getClass(id)).filter((c): c is OwlClass => !!c);
+}
+
+function hasChildren(cls: OwlClass): boolean {
+  return cls.children.length > 0;
+}
+
+const expandedClasses = ref(new Set<string>(['gloss:Concept', 'gloss:Designation']));
+
+function toggleExpand(cls: OwlClass) {
+  const s = new Set(expandedClasses.value);
+  if (s.has(cls.compact)) s.delete(cls.compact);
+  else s.add(cls.compact);
+  expandedClasses.value = s;
+}
+
+const allNavItems = computed(() => {
+  const items: { id: string; label: string; depth: number }[] = [];
+  function walk(classes: OwlClass[], depth: number) {
+    for (const cls of classes) {
+      items.push({ id: cls.compact, label: cls.label, depth });
+      if (expandedClasses.value.has(cls.compact)) {
+        walk(childClasses(cls.compact), depth + 1);
+      }
+    }
+  }
+  walk(treeRoots, 0);
+  return items;
+});
+</script>
+
+<template>
+  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <!-- Header -->
+    <div class="mb-8">
+      <h1 class="text-2xl sm:text-3xl font-semibold text-ink-800">Glossarist Ontology</h1>
+      <p class="text-sm text-ink-400 mt-1">
+        OWL ontology for terminology management (ISO 10241-1, 30042, 12620, 25964/SKOS)
+      </p>
+      <div class="max-w-2xl mt-3 text-sm text-ink-500 leading-relaxed space-y-2">
+        <p>The Glossarist ontology defines the RDF/OWL vocabulary for describing structured terminology data. It models <strong>concepts</strong> with multilingual <strong>localizations</strong> (definitions, notes, examples) and typed <strong>designations</strong> (expressions, abbreviations, symbols) using the SKOS-XL pattern for reified lexical labels.</p>
+        <p>It aligns with <strong>SKOS</strong> (concepts and relationships), <strong>SKOS-XL</strong> (designations as labels), <strong>ISO 25964</strong> (hierarchical relationship subtypes — generic, partitive, instantial), <strong>PROV-O</strong> (source provenance), and <strong>Dublin Core Terms</strong> (language, citation). Enumeration values use SKOS ConceptSchemes (10 taxonomies).</p>
+      </div>
+      <div class="flex flex-wrap gap-2 mt-4">
+        <span class="badge badge-blue text-[10px]">{{ stats.classCount }} classes</span>
+        <span class="badge text-[10px] bg-emerald-50 text-emerald-700">{{ stats.objectPropertyCount }} object properties</span>
+        <span class="badge text-[10px] bg-amber-50 text-amber-700">{{ stats.datatypePropertyCount }} datatype properties</span>
+        <span class="badge text-[10px] bg-purple-50 text-purple-700">{{ taxonomyKeys.length }} SKOS taxonomies</span>
+      </div>
+      <code class="block text-xs text-ink-400 mt-2">https://www.glossarist.org/ontologies/glossarist</code>
+    </div>
+
+    <!-- Sticky mobile chips -->
+    <div class="lg:hidden sticky top-14 z-10 bg-surface -mx-4 px-4 py-2 border-b border-ink-100/60 mb-4">
+      <div class="flex gap-2 overflow-x-auto scrollbar-none">
+        <button v-for="item in allNavItems" :key="item.id"
+          @click="activeClassId = item.id; activeTaxonomy = null"
+          class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
+          :class="activeClassId === item.id && !activeTaxonomy
+            ? 'bg-ink-800 text-white'
+            : 'bg-surface-raised border border-ink-100 text-ink-600 hover:bg-ink-50'"
+        >
+          <span v-if="item.depth > 0" class="text-ink-300">{{ ' '.repeat(item.depth * 2) }}</span>
+          {{ item.label }}
+        </button>
+        <button @click="activeTaxonomy = activeTaxonomy ? null : taxonomyKeys[0]; showTaxonomies = true"
+          class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
+          :class="activeTaxonomy
+            ? 'bg-ink-800 text-white'
+            : 'bg-surface-raised border border-ink-100 text-ink-600 hover:bg-ink-50'"
+        >Taxonomies</button>
+      </div>
+    </div>
+
+    <!-- Two-column layout -->
+    <div class="lg:grid lg:grid-cols-[220px_1fr] lg:gap-6">
+      <!-- Left: tree sidebar (desktop only) -->
+      <nav class="hidden lg:block border-r border-ink-100/60 pr-4">
+        <div class="section-label mb-2">Classes</div>
+
+        <!-- Tree roots with recursive children -->
+        <template v-for="root in treeRoots" :key="root.compact">
+          <div>
+            <button @click="activeClassId = root.compact; activeTaxonomy = null; toggleExpand(root)"
+              class="w-full flex items-center gap-1.5 px-2 py-2 rounded-lg text-sm transition-colors"
+              :class="activeClassId === root.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-600 hover:bg-ink-50'"
+            >
+              <span v-if="hasChildren(root)" class="text-[10px] text-ink-300 w-3">{{ expandedClasses.has(root.compact) ? '▾' : '▸' }}</span>
+              <span v-else class="w-3"></span>
+              <span class="flex-1 text-left">{{ root.label }}</span>
+            </button>
+
+            <!-- Children -->
+            <div v-if="expandedClasses.has(root.compact) && hasChildren(root)" class="ml-4">
+              <template v-for="child in childClasses(root.compact)" :key="child.compact">
+                <button @click="activeClassId = child.compact; activeTaxonomy = null; toggleExpand(child)"
+                  class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
+                  :class="activeClassId === child.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
+                >
+                  <span v-if="hasChildren(child)" class="text-[10px] text-ink-300 w-3">{{ expandedClasses.has(child.compact) ? '▾' : '▸' }}</span>
+                  <span v-else class="w-3 text-ink-200">·</span>
+                  <span class="flex-1 text-left">{{ child.label }}</span>
+                </button>
+                <!-- Grandchildren -->
+                <div v-if="expandedClasses.has(child.compact) && hasChildren(child)" class="ml-4">
+                  <button v-for="gc in childClasses(child.compact)" :key="gc.compact"
+                    @click="activeClassId = gc.compact; activeTaxonomy = null"
+                    class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
+                    :class="activeClassId === gc.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+                  >
+                    <span class="w-3 text-ink-200">·</span>
+                    <span class="flex-1 text-left">{{ gc.label }}</span>
+                  </button>
+                </div>
+              </template>
+            </div>
+          </div>
+        </template>
+
+        <!-- Remaining classes not in tree (supporting) -->
+        <div class="mt-4 pt-3 border-t border-ink-100/40">
+          <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1.5">Supporting</div>
+          <button v-for="cls in allClasses.filter(c => c.children.length === 0 && !c.subClassOf?.startsWith('gloss:') && c.compact !== 'gloss:Concept' && c.compact !== 'gloss:ConceptCollection')" :key="cls.compact"
+            @click="activeClassId = cls.compact; activeTaxonomy = null"
+            class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
+            :class="activeClassId === cls.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+          >
+            <span class="w-3 text-ink-200">·</span>
+            <span class="flex-1 text-left">{{ cls.label }}</span>
+          </button>
+        </div>
+
+        <!-- Taxonomies -->
+        <div class="mt-4 pt-3 border-t border-ink-100/40">
+          <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1.5">SKOS Taxonomies</div>
+          <button v-for="tk in taxonomyKeys" :key="tk"
+            @click="activeTaxonomy = tk; showTaxonomies = true"
+            class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
+            :class="activeTaxonomy === tk ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+          >
+            <span class="w-3 text-ink-200">·</span>
+            <span class="flex-1 text-left">{{ taxonomyLabels[tk] }}</span>
+          </button>
+        </div>
+      </nav>
+
+      <!-- Right: detail panel -->
+      <div class="mt-4 lg:mt-0">
+        <!-- Class detail -->
+        <template v-if="!activeTaxonomy && activeClass">
+          <div class="pb-4 border-b border-ink-100/60 mb-4">
+            <h2 class="text-lg font-semibold text-ink-800">{{ activeClass.label }}</h2>
+            <code class="block text-xs text-ink-400 mt-1">{{ activeClass.iri }}</code>
+            <div v-if="activeClass.subClassOf" class="flex items-center gap-2 mt-2 text-sm">
+              <span class="text-ink-400 text-xs">subClassOf</span>
+              <code class="text-xs text-ink-600 bg-ink-50 px-2 py-0.5 rounded">{{ activeClass.subClassOf }}</code>
+              <template v-if="activeClass.ancestors.length > 1">
+                <span class="text-ink-300 text-xs">→</span>
+                <code class="text-xs text-ink-500">{{ activeClass.ancestors.slice(1).join(' → ') }}</code>
+              </template>
+            </div>
+            <p v-if="activeClass.comment" class="text-sm text-ink-500 mt-3 leading-relaxed">{{ activeClass.comment }}</p>
+          </div>
+
+          <!-- Object Properties -->
+          <div v-if="activeProperties.object.length" class="mb-6">
+            <h3 class="text-xs uppercase tracking-wide text-ink-300 font-medium mb-2">
+              Object Properties ({{ activeProperties.object.length }})
+            </h3>
+            <table class="w-full text-sm border-collapse">
+              <thead>
+                <tr class="border-b border-ink-100/60">
+                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Property</th>
+                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Range</th>
+                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="p in activeProperties.object" :key="p.compact" class="border-b border-ink-100/30">
+                  <td class="py-2 px-3 align-top">
+                    <code class="text-xs text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">{{ p.compact }}</code>
+                    <div v-if="p.inverseOf" class="text-[10px] text-ink-300 mt-0.5">↔ {{ p.inverseOf }}</div>
+                  </td>
+                  <td class="py-2 px-3 align-top">
+                    <code class="text-xs text-ink-500">{{ p.range || p.rangeUnion?.join(' | ') || '—' }}</code>
+                  </td>
+                  <td class="py-2 px-3 text-xs text-ink-400 align-top">{{ p.comment || '' }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- Datatype Properties -->
+          <div v-if="activeProperties.datatype.length">
+            <h3 class="text-xs uppercase tracking-wide text-ink-300 font-medium mb-2">
+              Datatype Properties ({{ activeProperties.datatype.length }})
+            </h3>
+            <table class="w-full text-sm border-collapse">
+              <thead>
+                <tr class="border-b border-ink-100/60">
+                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Property</th>
+                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Datatype</th>
+                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="p in activeProperties.datatype" :key="p.compact" class="border-b border-ink-100/30">
+                  <td class="py-2 px-3 align-top">
+                    <code class="text-xs text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">{{ p.compact }}</code>
+                  </td>
+                  <td class="py-2 px-3 align-top">
+                    <code class="text-xs text-ink-500">{{ p.range || '—' }}</code>
+                  </td>
+                  <td class="py-2 px-3 text-xs text-ink-400 align-top">{{ p.comment || '' }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div v-if="!activeProperties.object.length && !activeProperties.datatype.length" class="text-sm text-ink-300 italic">
+            No properties defined directly on this class.
+          </div>
+        </template>
+
+        <!-- Taxonomy detail -->
+        <template v-if="activeTaxonomy && activeTaxonomyData()">
+          <div class="pb-4 border-b border-ink-100/60 mb-4">
+            <h2 class="text-lg font-semibold text-ink-800">{{ taxonomyLabels[activeTaxonomy] }}</h2>
+            <code class="block text-xs text-ink-400 mt-1">{{ activeTaxonomyData()!.scheme }}</code>
+          </div>
+
+          <div class="space-y-2">
+            <div v-for="concept in activeTaxonomyData()!.concepts" :key="concept.id"
+              class="border border-ink-100/60 rounded-lg p-3">
+              <div class="flex items-center gap-2">
+                <code class="text-xs font-semibold text-ink-700">{{ concept.id }}</code>
+                <span class="text-sm text-ink-600">{{ concept.prefLabel }}</span>
+                <span v-if="concept.altLabel" class="text-xs text-ink-400">({{ concept.altLabel }})</span>
+              </div>
+              <p v-if="concept.definition" class="text-xs text-ink-400 mt-1 leading-relaxed">{{ concept.definition }}</p>
+              <div v-if="concept.broader" class="text-[10px] text-ink-300 mt-1">
+                broader: <code class="text-ink-400">{{ concept.broader }}</code>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/src/views/PageView.vue

@@ -8,29 +8,36 @@ interface PageData {
 }
 
 const route = useRoute();
-const slug = computed(() => {
-  if (route.params.slug) return route.params.slug as string;
+const registerId = computed(() => route.params.registerId as string | undefined);
+const pageName = computed(() => {
   if (route.params.page) return route.params.page as string;
-  if (route.name === 'about' || route.name === 'about-global') return 'about';
-  const path = route.path.replace(/^\//, '').replace(/\/$/, '');
-  const lastSegment = path.split('/').pop() || '';
-  return lastSegment;
+  if (route.params.slug) return route.params.slug as string;
+  return 'about';
 });
+
 const data = ref<PageData | null>(null);
 const loading = ref(true);
 const notFound = ref(false);
 
 onMounted(async () => {
-  try {
-    const resp = await fetch(`/pages/${slug.value}.json`);
-    if (resp.ok) {
-      data.value = await resp.json();
-    } else {
-      notFound.value = true;
-    }
-  } catch {
-    notFound.value = true;
+  const page = pageName.value;
+  const dsId = registerId.value;
+
+  const urls = dsId
+    ? [`/pages/${dsId}-${page}.json`, `/pages/${page}.json`]
+    : [`/pages/${page}.json`];
+
+  for (const url of urls) {
+    try {
+      const resp = await fetch(url);
+      if (resp.ok) {
+        data.value = await resp.json();
+        loading.value = false;
+        return;
+      }
+    } catch { /* try next */ }
   }
+  notFound.value = true;
   loading.value = false;
 });
 </script>
@@ -39,8 +46,12 @@ onMounted(async () => {
   <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400 mb-6">
       <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">Home</router-link>
+      <template v-if="registerId">
+        <span class="text-ink-200">/</span>
+        <router-link :to="{ name: 'dataset', params: { registerId } }" class="hover:text-ink-700 transition-colors">{{ registerId }}</router-link>
+      </template>
       <span class="text-ink-200">/</span>
-      <span class="text-ink-700">{{ data?.title || slug }}</span>
+      <span class="text-ink-700">{{ data?.title || pageName }}</span>
     </nav>
 
     <template v-if="loading">
@@ -55,7 +66,7 @@ onMounted(async () => {
     <template v-else-if="notFound">
       <div class="card p-8 text-center">
         <h1 class="font-serif text-2xl text-ink-800 mb-2">Page Not Found</h1>
-        <p class="text-ink-500 mb-4">The page "{{ slug }}" does not exist.</p>
+        <p class="text-ink-500 mb-4">The page "{{ pageName }}" does not exist.</p>
         <router-link :to="{ name: 'home' }" class="btn-primary">Go Home</router-link>
       </div>
     </template>

package/src/views/StatsView.vue

@@ -23,11 +23,28 @@ const stats = computed(() => {
   const m = manifest.value;
   if (!m) return { langs: [], total: 0 };
 
+  // Scan the index for actual language coverage
+  const adapter = store.datasets.get(resolvedId.value);
+  const conceptCounts: Record<string, number> = {};
+
+  if (adapter) {
+    const concepts = adapter.getConcepts();
+    for (const c of concepts) {
+      if (!c) continue;
+      for (const lang of Object.keys(c.designations)) {
+        conceptCounts[lang] = (conceptCounts[lang] || 0) + 1;
+      }
+    }
+  }
+
+  // Merge with manifest languageStats (for definition counts)
   const ls = m.languageStats || {};
-  const langs: LangStat[] = m.languages.map(lang => ({
+  const allLangs = new Set([...Object.keys(conceptCounts), ...m.languages]);
+
+  const langs: LangStat[] = [...allLangs].map(lang => ({
     lang,
-    terms: ls[lang]?.terms ?? 0,
-    definitions: ls[lang]?.definitions ?? 0,
+    terms: conceptCounts[lang] ?? ls[lang]?.terms ?? 0,
+    definitions: ls[lang]?.definitions ?? conceptCounts[lang] ?? 0,
   }));
 
   // Sort: eng first, then by term count descending
@@ -41,6 +58,13 @@ const stats = computed(() => {
 });
 
 const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms), 1));
+
+function coverageColor(ratio: number): string {
+  if (ratio >= 0.8) return 'bg-emerald-500';
+  if (ratio >= 0.5) return 'bg-blue-500';
+  if (ratio >= 0.25) return 'bg-amber-500';
+  return 'bg-red-400';
+}
 </script>
 
 <template>
@@ -80,11 +104,11 @@ const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms),
       <div class="card -mx-4 sm:mx-0 overflow-x-auto">
         <table class="w-full text-sm">
           <thead>
-            <tr class="border-b border-ink-100/60 bg-ink-50/50">
-              <th class="text-left px-5 py-3 text-ink-500 font-medium">Language</th>
-              <th class="text-right px-5 py-3 text-ink-500 font-medium">Terms</th>
-              <th class="text-right px-5 py-3 text-ink-500 font-medium">Definitions</th>
-              <th class="px-5 py-3 text-ink-500 font-medium w-40"></th>
+            <tr class="border-b border-ink-100/60 bg-ink-50">
+              <th class="text-left px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">Language</th>
+              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">Terms</th>
+              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">Definitions</th>
+              <th class="px-5 py-3 text-ink-600 font-medium w-40"></th>
             </tr>
           </thead>
           <tbody>
@@ -103,10 +127,8 @@ const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms),
                   <div class="h-2 rounded-full bg-ink-50 overflow-hidden flex-1">
                     <div
                       class="h-full rounded-full transition-all duration-500"
-                      :style="{
-                        width: (s.terms / maxTerms * 100) + '%',
-                        backgroundColor: getColor(resolvedId),
-                      }"
+                      :class="coverageColor(s.terms / maxTerms)"
+                      :style="{ width: (s.terms / maxTerms * 100) + '%' }"
                     ></div>
                   </div>
                   <span class="text-xs text-ink-300 w-10 text-right tabular-nums">{{ Math.round(s.terms / maxTerms * 100) }}%</span>

package/vite.config.ts

@@ -6,6 +6,8 @@ import { fileURLToPath } from 'url'
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const cwd = process.cwd()
 
+const isTest = process.env.VITEST !== undefined
+
 export default defineConfig({
   base: process.env.BASE_PATH || '/',
   root: __dirname,
@@ -18,6 +20,12 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src'),
+      // Shim Node.js built-ins used by glossarist-js (not needed in browser, only for build)
+      ...(!isTest ? {
+        crypto: resolve(__dirname, 'src/shims/node-crypto.ts'),
+        fs: resolve(__dirname, 'src/shims/empty.ts'),
+        path: resolve(__dirname, 'src/shims/node-path.ts'),
+      } : {}),
     },
   },
   test: {