@glossarist/concept-browser 0.3.7 → 0.4.0

package/src/components/GraphPanel.vue

@@ -3,6 +3,7 @@ import { ref, computed, watch, onMounted, onUnmounted, nextTick, reactive } from
 import type { GraphNode, GraphEdge } from '../adapters/types';
 import type { SimulationNodeDatum, SimulationLinkDatum } from 'd3';
 import { useDsStyle } from '../utils/dataset-style';
+import { useUiStore } from '../stores/ui';
 import {
   forceSimulation,
   forceLink,
@@ -51,6 +52,7 @@ watch(() => props.registers, (regs) => {
 });
 
 const { getColor } = useDsStyle();
+const uiStore = useUiStore();
 
 const STUB_COLOR = '#b8b9cc'; // ink-200
 const HIGHLIGHT_COLOR = '#1a1b2e'; // ink-800
@@ -81,7 +83,11 @@ const visibleNodeUris = computed(() => {
 
 const visibleEdges = computed(() => {
   const uris = visibleNodeUris.value;
-  return props.edges.filter(e => uris.has(e.source) && uris.has(e.target));
+  const lang = uiStore.selectedLang;
+  return props.edges.filter(e =>
+    uris.has(e.source) && uris.has(e.target) &&
+    (!lang || !e.lang || e.lang === lang)
+  );
 });
 
 const nodeCount = computed(() => visibleNodes.value.length);
@@ -109,7 +115,9 @@ interface SimNode extends SimulationNodeDatum {
   register: string;
   conceptId: string;
   designation: string;
+  hasDesignation: boolean;
   loaded: boolean;
+  nodeType?: 'concept' | 'domain';
 }
 
 interface SimLink extends SimulationLinkDatum<SimNode> {
@@ -117,6 +125,7 @@ interface SimLink extends SimulationLinkDatum<SimNode> {
   target: SimNode | string;
   type: string;
   label?: string;
+  lang?: string;
 }
 
 let simulation: ReturnType<typeof forceSimulation<SimNode>> | null = null;
@@ -166,15 +175,20 @@ function buildSimulation(width: number, height: number) {
   const capped = allVisible.length > MAX_RENDER_NODES;
   const renderNodes = capped ? allVisible.slice(0, MAX_RENDER_NODES) : allVisible;
 
-  const simNodes: SimNode[] = renderNodes.map(n => ({
-    uri: n.uri,
-    register: n.register,
-    conceptId: n.conceptId,
-    designation: Object.values(n.designations)[0] || n.conceptId,
-    loaded: n.loaded,
-    x: width / 2 + (Math.random() - 0.5) * 200,
-    y: height / 2 + (Math.random() - 0.5) * 200,
-  }));
+  const simNodes: SimNode[] = renderNodes.map(n => {
+    const desig = Object.values(n.designations)[0] || '';
+    return {
+      uri: n.uri,
+      register: n.register,
+      conceptId: n.conceptId,
+      designation: desig,
+      hasDesignation: !!desig,
+      loaded: n.loaded,
+      nodeType: n.nodeType,
+      x: width / 2 + (Math.random() - 0.5) * 200,
+      y: height / 2 + (Math.random() - 0.5) * 200,
+    };
+  });
 
   const nodeMap = new Map(simNodes.map(n => [n.uri, n]));
 
@@ -185,6 +199,7 @@ function buildSimulation(width: number, height: number) {
       target: e.target,
       type: e.type,
       label: e.label,
+      lang: e.lang,
     }));
 
   g.selectAll('*').remove();
@@ -194,9 +209,10 @@ function buildSimulation(width: number, height: number) {
     .selectAll('line')
     .data(simLinks)
     .join('line')
-    .attr('stroke', '#dddde6')
-    .attr('stroke-width', 0.8)
-    .attr('marker-end', 'url(#arrowhead)');
+    .attr('stroke', l => l.type === 'domain' ? '#c4b5fd' : '#dddde6')
+    .attr('stroke-width', l => l.type === 'domain' ? 0.6 : 0.8)
+    .attr('stroke-dasharray', l => l.type === 'domain' ? '3,2' : 'none')
+    .attr('marker-end', l => l.type === 'domain' ? null : 'url(#arrowhead)');
 
   const nodeSel = g.append('g')
     .attr('class', 'nodes')
@@ -206,13 +222,38 @@ function buildSimulation(width: number, height: number) {
     .attr('class', 'node')
     .style('cursor', 'pointer');
 
-  nodeSel.append('circle')
+  const domainNodes = nodeSel.filter(d => d.nodeType === 'domain');
+  const conceptNodes = nodeSel.filter(d => d.nodeType !== 'domain');
+
+  // Domain: rounded rectangle with standard name inside
+  domainNodes.append('rect')
+    .attr('width', d => Math.max(48, d.designation.length * 5.5 + 10))
+    .attr('height', 14)
+    .attr('rx', 3)
+    .attr('x', d => -(Math.max(48, d.designation.length * 5.5 + 10) / 2))
+    .attr('y', -7)
+    .attr('fill', '#ede9fe')
+    .attr('stroke', '#8b5cf6')
+    .attr('stroke-width', 1);
+
+  domainNodes.append('text')
+    .attr('text-anchor', 'middle')
+    .attr('dy', 4)
+    .attr('font-size', '7px')
+    .attr('font-family', '"DM Sans", system-ui, sans-serif')
+    .attr('font-weight', '600')
+    .attr('fill', '#6d28d9')
+    .attr('pointer-events', 'none')
+    .text(d => d.designation);
+
+  // Concept: circle
+  conceptNodes.append('circle')
     .attr('r', d => d.loaded ? 5 : 3)
     .attr('fill', d => d.loaded ? registerColor(d.register) : STUB_COLOR)
-    .attr('stroke', '#faf9f6') // surface
+    .attr('stroke', '#faf9f6')
     .attr('stroke-width', 1.5);
 
-  nodeSel.append('text')
+  conceptNodes.append('text')
     .attr('dy', -9)
     .attr('text-anchor', 'middle')
     .attr('font-size', '8px')
@@ -220,7 +261,15 @@ function buildSimulation(width: number, height: number) {
     .attr('font-weight', '500')
     .attr('fill', '#636588') // ink-400
     .attr('pointer-events', 'none')
-    .text(d => (labelMode.value === 'identifier' ? d.conceptId : d.designation).slice(0, 18));
+    .text(d => {
+      if (labelMode.value === 'identifier') return d.conceptId.slice(0, 18);
+      if (!d.hasDesignation) return d.conceptId.slice(0, 18);
+      return d.designation.slice(0, 18);
+    })
+    .attr('fill', d => {
+      if (labelMode.value === 'designation' && !d.hasDesignation) return '#c4c5d6'; // dim for fallback
+      return '#636588';
+    });
 
   const dragBehavior = drag<SVGGElement, SimNode>()
     .on('start', (event: D3DragEvent<SVGGElement, SimNode, SimNode>, d) => {
@@ -259,14 +308,22 @@ function buildSimulation(width: number, height: number) {
         const tgt = typeof l.target === 'object' ? l.target.uri : l.target;
         return src === d.uri || tgt === d.uri ? 1.5 : 0.8;
       });
-    nodeSel.select('circle')
+    conceptNodes.select('circle')
       .attr('r', n => n.uri === d.uri ? 8 : n.loaded ? 5 : 3)
       .attr('fill', n => n.uri === d.uri ? HIGHLIGHT_COLOR : n.loaded ? registerColor(n.register) : STUB_COLOR);
+    domainNodes.select('rect')
+      .attr('stroke', n => n.uri === d.uri ? '#6d28d9' : '#8b5cf6')
+      .attr('stroke-width', n => n.uri === d.uri ? 2 : 1);
   }).on('mouseleave', () => {
-    linkSel.attr('stroke', '#dddde6').attr('stroke-width', 0.8);
-    nodeSel.select('circle')
+    linkSel
+      .attr('stroke', l => l.type === 'domain' ? '#c4b5fd' : '#dddde6')
+      .attr('stroke-width', l => l.type === 'domain' ? 0.6 : 0.8);
+    conceptNodes.select('circle')
       .attr('r', n => n.loaded ? 5 : 3)
       .attr('fill', n => n.loaded ? registerColor(n.register) : STUB_COLOR);
+    domainNodes.select('rect')
+      .attr('stroke', '#8b5cf6')
+      .attr('stroke-width', 1);
   });
 
   const count = simNodes.length;
@@ -280,7 +337,9 @@ function buildSimulation(width: number, height: number) {
       .strength(count < 50 ? -200 : count < 200 ? -100 : -50)
     )
     .force('center', forceCenter(width / 2, height / 2))
-    .force('collide', forceCollide<SimNode>().radius(count > 1000 ? 6 : 12))
+    .force('collide', forceCollide<SimNode>().radius(d =>
+      d.nodeType === 'domain' ? 35 : (count > 1000 ? 6 : 12)
+    ))
     .alpha(1)
     .alphaDecay(count > 500 ? 0.05 : 0.02)
     .on('tick', () => {
@@ -462,20 +521,26 @@ function selectedNodeColor(): string {
       </div>
     </div>
 
-    <!-- Legend (only when multiple registers) -->
-    <div v-if="nodeCount > 0 && registers.length > 1" class="absolute top-4 right-4 z-10 bg-surface-raised/90 backdrop-blur rounded-lg px-3 py-2.5 border border-ink-100/60 text-xs" style="box-shadow: 0 2px 6px rgba(26, 27, 46, 0.04);">
-      <div class="font-semibold text-ink-400 text-[10px] uppercase tracking-wide mb-2">Datasets</div>
-      <div v-for="reg in registers" :key="reg.id" class="flex items-center gap-2 mb-1.5 last:mb-0">
-        <span
-          class="w-2.5 h-2.5 rounded-full inline-block flex-shrink-0"
-          :style="{ backgroundColor: registerColor(reg.id) }"
-        ></span>
-        <span class="text-ink-500">{{ reg.title }}</span>
+    <!-- Legend -->
+    <div v-if="nodeCount > 0" class="absolute top-4 right-4 z-10 bg-surface-raised/90 backdrop-blur rounded-lg px-3 py-2.5 border border-ink-100/60 text-xs" style="box-shadow: 0 2px 6px rgba(26, 27, 46, 0.04);">
+      <div v-if="registers.length > 1">
+        <div class="font-semibold text-ink-400 text-[10px] uppercase tracking-wide mb-2">Datasets</div>
+        <div v-for="reg in registers" :key="reg.id" class="flex items-center gap-2 mb-1.5 last:mb-0">
+          <span
+            class="w-2.5 h-2.5 rounded-full inline-block flex-shrink-0"
+            :style="{ backgroundColor: registerColor(reg.id) }"
+          ></span>
+          <span class="text-ink-500">{{ reg.title }}</span>
+        </div>
       </div>
       <div class="flex items-center gap-2 mt-2 pt-2 border-t border-ink-100/40">
         <span class="w-2 h-2 rounded-full inline-block" :style="{ backgroundColor: STUB_COLOR }"></span>
         <span class="text-ink-300">Stub (not loaded)</span>
       </div>
+      <div class="flex items-center gap-2 mt-2 pt-2 border-t border-ink-100/40">
+        <span class="w-4 h-2 rounded inline-block flex-shrink-0" style="background: #ede9fe; border: 1px solid #8b5cf6;"></span>
+        <span class="text-ink-300">Domain (standard)</span>
+      </div>
     </div>
 
     <svg ref="svgRef" class="w-full h-full" role="img" aria-label="Concept relationship graph visualization"></svg>
@@ -509,7 +574,7 @@ function selectedNodeColor(): string {
         </button>
       </div>
       <router-link
-        v-if="selectedNode.register"
+        v-if="selectedNode.register && selectedNode.nodeType !== 'domain'"
         :to="{ name: 'concept', params: { registerId: selectedNode.register, conceptId: selectedNode.conceptId } }"
         class="btn-primary text-xs mt-4 inline-block"
       >

package/src/components/LanguageDetail.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { LocalizedConcept, Designation, ConceptSource } from '../adapters/types';
+import type { Concept, LocalizedConcept, Designation, Expression, Abbreviation as AbbreviationType } from 'glossarist';
 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 { entryStatusColor } from '../utils/concept-helpers';
+import { designationTypeInfo, normativeStatusInfo, grammarBadges, pronunciationLabel, pronunciationTooltip } from '../utils/designation-registry';
 import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { getFactory } from '../adapters/factory';
+import CitationDisplay from './CitationDisplay.vue';
 
 const props = defineProps<{
-  localizedConcepts: Record<string, LocalizedConcept>;
+  concept: Concept;
   activeLang: string;
 }>();
 
@@ -19,41 +21,33 @@ const emit = defineEmits<{
   (e: 'update:activeLang', lang: string): void;
 }>();
 
-const lc = computed(() => props.localizedConcepts[props.activeLang]);
-const availableLangs = computed(() => Object.keys(props.localizedConcepts).sort());
+const lc = computed(() => props.concept.localization(props.activeLang));
+const availableLangs = computed(() => [...props.concept.languages].sort());
 
-const designations = computed(() => lc.value?.['gl:designation'] ?? []);
+const designations = computed(() => lc.value?.terms ?? []);
 const definition = computed(() => {
-  const defs = lc.value?.['gl:definition'];
-  if (defs?.length) {
-    const content = defs.map(d => d['gl:content']).filter(Boolean).join('\n\n');
-    if (content) return content;
-  }
-  return '';
-});
-const notes = computed(() => {
-  return lc.value?.['gl:notes']?.map(n => n['gl:content']).filter(Boolean) ?? [];
+  if (!lc.value) return '';
+  const content = lc.value.definitions.map(d => d.content).filter(Boolean).join('\n\n');
+  return content;
 });
-const examples = computed(() => lc.value?.['gl:examples']?.map(e => e['gl:content']).filter(Boolean) ?? []);
-const sources = computed(() => lc.value?.['gl:source'] ?? []);
+const notes = computed(() => lc.value?.notes.map(n => n.content).filter(Boolean) ?? []);
+const examples = computed(() => lc.value?.examples.map(e => e.content).filter(Boolean) ?? []);
+const sources = computed(() => lc.value?.sources ?? []);
 
 const hasContent = computed(() =>
   definition.value || notes.value.length > 0 || examples.value.length > 0 || designations.value.length > 1
 );
 
+function abbrevInfo(d: Designation): { acronym: boolean; initialism: boolean; truncation: boolean } | null {
+  if (d.type !== 'abbreviation') return null;
+  const a = d as AbbreviationType;
+  return { acronym: !!a.acronym, initialism: !!a.initialism, truncation: !!a.truncation };
+}
+
 const isTermOnly = computed(() =>
   !definition.value && notes.value.length === 0 && examples.value.length === 0
 );
 
-function normativeStatus(status: string): string {
-  return status === 'preferred' ? 'Preferred' : status;
-}
-function normativeColor(status: string): string {
-  if (status === 'preferred') return 'bg-emerald-50 text-emerald-700';
-  if (status === 'deprecated') return 'bg-red-50 text-red-700';
-  return 'bg-amber-50 text-amber-700';
-}
-
 const router = useRouter();
 const store = useVocabularyStore();
 
@@ -109,8 +103,8 @@ function handleContentClick(e: MouseEvent) {
     <!-- Content for selected language -->
     <div v-if="lc">
       <!-- Entry status -->
-      <div v-if="lc['gl:entryStatus']" class="flex items-center gap-2 mb-4">
-        <span class="badge" :class="entryStatusColor(lc['gl:entryStatus'])">{{ lc['gl:entryStatus'] }}</span>
+      <div v-if="lc.entryStatus" class="flex items-center gap-2 mb-4">
+        <span class="badge" :class="entryStatusColor(lc.entryStatus)">{{ lc.entryStatus }}</span>
       </div>
 
       <!-- Designations -->
@@ -118,11 +112,26 @@ function handleContentClick(e: MouseEvent) {
         <div class="section-label">Designations</div>
         <div class="space-y-2 mt-3">
           <div v-for="(d, i) in designations" :key="i" class="flex items-center gap-2 flex-wrap">
-            <span class="font-medium text-ink-800 text-lg" v-html="renderMath(d['gl:term'])"></span>
-            <span class="badge text-[10px]" :class="designationTypeColor(d['@type'])">{{ designationTypeLabel(d['@type']) }}</span>
-            <span class="badge text-[10px]" :class="normativeColor(d['gl:normativeStatus'])">{{ normativeStatus(d['gl:normativeStatus']) }}</span>
-            <span v-if="d['gl:gender']" class="text-xs text-ink-300">{{ d['gl:gender'] }}</span>
-            <span v-if="d['gl:plurality']" class="text-xs text-ink-300">{{ d['gl:plurality'] }}</span>
+            <span class="font-medium text-ink-800 text-lg" v-html="renderMath(d.designation)"></span>
+            <span class="badge text-[10px]" :class="designationTypeInfo(d).color">{{ designationTypeInfo(d).label }}</span>
+            <span class="badge text-[10px]" :class="normativeStatusInfo(d.normativeStatus).color">{{ normativeStatusInfo(d.normativeStatus).label }}</span>
+            <template v-if="d.type === 'expression' && (d as Expression).grammarInfo?.length">
+              <template v-for="(gi, giIdx) in (d as Expression).grammarInfo" :key="giIdx">
+                <span v-for="badge in grammarBadges(gi)" :key="giIdx + '-' + badge.label"
+                  class="badge text-[10px] bg-gray-50 text-gray-600">{{ badge.label }}</span>
+              </template>
+            </template>
+            <template v-if="abbrevInfo(d)" v-for="(val, key) in abbrevInfo(d)" :key="key">
+              <span v-if="val" class="badge text-[10px] bg-amber-50 text-amber-600">{{ key }}</span>
+            </template>
+            <span v-if="d.geographicalArea" class="badge text-[10px] bg-gray-50 text-gray-600">{{ d.geographicalArea }}</span>
+            <span v-if="d.international" class="badge text-[10px] bg-sky-50 text-sky-600">international</span>
+            <span v-if="d.absent" class="badge text-[10px] bg-red-50 text-red-600">absent</span>
+            <span v-if="d.usageInfo" class="text-xs text-ink-300">{{ d.usageInfo }}</span>
+            <template v-if="d.pronunciations?.length">
+              <span v-for="(p, pi) in d.pronunciations" :key="'p'+pi"
+                class="text-xs text-ink-400 font-mono" :title="pronunciationTooltip(p)">{{ pronunciationLabel(p) }}</span>
+            </template>
           </div>
         </div>
       </div>
@@ -161,12 +170,11 @@ function handleContentClick(e: MouseEvent) {
         <div class="space-y-3 mt-3">
           <div v-for="(src, i) in sources" :key="i" class="text-sm">
             <div class="flex items-center gap-1.5 flex-wrap mb-1">
-              <span v-if="src['gl:sourceType']" class="badge badge-blue text-[10px]">{{ src['gl:sourceType'] }}</span>
-              <span v-if="src['gl:sourceStatus']" class="badge badge-gray text-[10px]">{{ src['gl:sourceStatus'] }}</span>
+              <span v-if="src.type" class="badge badge-blue text-[10px]">{{ src.type }}</span>
+              <span v-if="src.status" class="badge badge-gray text-[10px]">{{ src.status }}</span>
             </div>
             <div class="text-ink-700">
-              <span v-if="src['gl:origin']?.['gl:ref']" class="font-medium">{{ src['gl:origin']['gl:ref'] }}</span>
-              <span v-if="src['gl:origin']?.['gl:clause']">, {{ src['gl:origin']['gl:clause'] }}</span>
+              <CitationDisplay v-if="src.origin" :citation="src.origin" />
             </div>
           </div>
         </div>

package/src/components/NavIcon.vue

@@ -8,6 +8,7 @@ const icons: Record<string, string> = {
   info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
   chart: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
   list: 'M4 6h16M4 10h16M4 14h16M4 18h16',
+  schema: 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z',
 };
 
 defineProps<{ name: string }>();

package/src/components/NonVerbalRepDisplay.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { NonVerbRep, ConceptSource } from 'glossarist';
+import { sourceStatusInfo, sourceTypeInfo } from '../utils/designation-registry';
+
+defineProps<{
+  reps: NonVerbRep[];
+}>();
+</script>
+
+<template>
+  <div v-if="reps.length" class="space-y-3">
+    <div class="section-label">Non-verbal representations</div>
+    <div v-for="(rep, i) in reps" :key="i" class="card p-4 space-y-2">
+      <div class="flex items-center gap-2">
+        <span class="badge text-[10px] bg-violet-50 text-violet-700">{{ rep.type ?? 'representation' }}</span>
+        <span v-if="rep.text" class="text-sm text-ink-700">{{ rep.text }}</span>
+      </div>
+
+      <!-- Image -->
+      <div v-if="rep.type === 'image' && rep.ref">
+        <img :src="rep.ref" :alt="rep.text || 'Non-verbal representation'" class="max-h-64 rounded border border-ink-100" loading="lazy" />
+      </div>
+
+      <!-- Table / Formula reference -->
+      <div v-if="(rep.type === 'table' || rep.type === 'formula') && rep.ref">
+        <a :href="rep.ref" target="_blank" rel="noopener" class="text-sm concept-link break-all">{{ rep.ref }}</a>
+      </div>
+
+      <!-- Sources for this representation -->
+      <div v-if="rep.sources?.length" class="flex flex-wrap gap-1.5">
+        <div v-for="(src, si) in rep.sources" :key="si" class="text-xs text-ink-400">
+          <span v-if="src.type" class="badge text-[9px]" :class="sourceTypeInfo(src.type).color">{{ sourceTypeInfo(src.type).label }}</span>
+          <span v-if="src.origin?.ref" class="ml-1">{{ src.origin.ref.source }}{{ src.origin.ref.id ? ' ' + src.origin.ref.id : '' }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/RelationshipList.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { GraphEdge, Manifest } from '../adapters/types';
+import { computed } from 'vue';
+import { categorizeRelationship, relationshipLabel, RELATIONSHIP_CATEGORIES } from '../utils/relationship-categories';
+import { useRouter } from 'vue-router';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { getFactory } from '../adapters/factory';
+import { langName } from '../utils/lang';
+
+const props = defineProps<{
+  edges: GraphEdge[];
+  manifest: Manifest;
+  registerId: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'navigate', registerId: string, conceptId: string): void;
+}>();
+
+interface GroupedEdge extends GraphEdge {
+  category: ReturnType<typeof categorizeRelationship>;
+}
+
+const groupedEdges = computed(() => {
+  const outgoing: GroupedEdge[] = [];
+  const incoming: GroupedEdge[] = [];
+
+  // We can't distinguish incoming/outgoing from edges alone without the graph engine.
+  // For now, treat all edges as outgoing from the current concept.
+  for (const edge of props.edges) {
+    const category = categorizeRelationship(edge.type);
+    outgoing.push({ ...edge, category });
+  }
+
+  const byCategory = new Map<string, GroupedEdge[]>();
+  for (const edge of outgoing) {
+    const existing = byCategory.get(edge.category.id) ?? [];
+    existing.push(edge);
+    byCategory.set(edge.category.id, existing);
+  }
+
+  return byCategory;
+});
+
+const activeCategories = computed(() => {
+  const categoryIds = new Set([...groupedEdges.value.keys()]);
+  return RELATIONSHIP_CATEGORIES.filter(c => categoryIds.has(c.id))
+    .concat(
+      categoryIds.has('other')
+        ? [{ id: 'other', label: 'Other', types: [], color: 'text-gray-600 bg-gray-50' }]
+        : []
+    );
+});
+
+const router = useRouter();
+const store = useVocabularyStore();
+const factory = getFactory();
+
+function navigate(edge: GraphEdge) {
+  const resolution = factory.resolve(edge.target);
+  if (resolution.type === 'internal') {
+    store.viewConcept(resolution.registerId, resolution.conceptId);
+    router.push({ name: 'concept', params: { registerId: resolution.registerId, conceptId: resolution.conceptId } });
+  } else if (resolution.type === 'site') {
+    window.open(resolution.baseUrl + '/' + resolution.conceptUri, '_blank');
+  }
+}
+</script>
+
+<template>
+  <div v-if="groupedEdges.size > 0" class="space-y-4">
+    <div v-for="category in activeCategories" :key="category.id">
+      <div class="section-label flex items-center gap-1.5 mb-2">
+        <span class="inline-block w-2 h-2 rounded-full" :class="category.color"></span>
+        {{ category.label }}
+      </div>
+      <div class="space-y-1.5">
+        <button
+          v-for="(edge, i) in groupedEdges.get(category.id)"
+          :key="i"
+          @click="navigate(edge)"
+          class="block w-full text-left px-3 py-2 rounded-lg hover:bg-ink-50 transition-colors text-sm group"
+        >
+          <div class="flex items-center gap-2">
+            <span class="badge text-[10px] flex-shrink-0" :class="category.color">
+              {{ relationshipLabel(edge.type) }}
+            </span>
+            <span class="text-ink-700 group-hover:text-ink-900 truncate">
+              {{ edge.label || edge.target }}
+            </span>
+            <span v-if="edge.lang" class="text-[10px] text-ink-300 ml-auto flex-shrink-0">
+              {{ edge.lang }}
+            </span>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/config/use-site-config.ts

@@ -119,6 +119,9 @@ function synthesizeGlobalPages(features?: Record<string, unknown>, pages?: PageC
   if (features?.graph !== false && !declaredRoutes.has('graph')) {
     result.push({ type: 'custom', route: 'graph', title: 'Graph', icon: 'graph' });
   }
+  if (features?.ontology !== false && !declaredRoutes.has('ontology')) {
+    result.push({ type: 'custom', route: 'ontology', title: 'Ontology', icon: 'schema' });
+  }
   if (features?.news && !declaredRoutes.has('news')) {
     result.push({ type: 'news', route: 'news', title: 'News', icon: 'newspaper' });
   }