@glossarist/concept-browser 0.7.31 → 0.7.33

package/src/adapters/model-bridge.ts

@@ -179,10 +179,10 @@ export function getAnnotations(lc: LocalizedConcept): DetailedDefinition[] {
 }
 
 // Designation relationship targets: RelatedConcept.target (string)
-const designationTargets = new WeakMap<RelatedConcept, string>();
+const designationTargets = new WeakMap<object, string>();
 
-export function getDesignationTarget(rc: RelatedConcept): string | null {
-  return designationTargets.get(rc) ?? null;
+export function getDesignationTarget(rc: { type?: string | null; content?: string | null; target?: string | null; ref?: any }): string | null {
+  return designationTargets.get(rc) ?? rc.target ?? null;
 }
 
 // ConceptRef text: human-readable label alongside source/id
@@ -213,19 +213,26 @@ function attachAnnotations(concept: Concept, localizations: Record<string, unkno
     // Designation-level relationship targets and ref text
     const rawTerms = rawObj.terms;
     if (Array.isArray(rawTerms)) {
-      for (let i = 0; i < lc.terms.length && i < rawTerms.length; i++) {
-        const rawTerm = rawTerms[i] as Record<string, unknown>;
-        const rawRelated = rawTerm.related;
+      for (const rawTerm of rawTerms) {
+        if (!rawTerm || typeof rawTerm !== 'object') continue;
+        const rawT = rawTerm as Record<string, unknown>;
+        const rawDesignation = rawT.designation as string | undefined;
+        if (!rawDesignation) continue;
+        const designation = lc.terms.find(d => d.designation === rawDesignation);
+        if (!designation) continue;
+        const rawRelated = rawT.related;
         if (!Array.isArray(rawRelated)) continue;
-        const designation = lc.terms[i];
-        for (let j = 0; j < designation.related.length && j < rawRelated.length; j++) {
-          const rawRel = rawRelated[j] as Record<string, unknown>;
-          const rc = designation.related[j];
-          if (rawRel.target && typeof rawRel.target === 'string') {
-            designationTargets.set(rc, rawRel.target);
+        for (const rawRel of rawRelated) {
+          if (!rawRel || typeof rawRel !== 'object') continue;
+          const rel = rawRel as Record<string, unknown>;
+          const relType = rel.type as string | undefined;
+          const rc = designation.related.find(r => r.type === relType);
+          if (!rc) continue;
+          if (rel.target && typeof rel.target === 'string') {
+            designationTargets.set(rc as object, rel.target);
           }
-          if (rc.ref) {
-            const rawRef = rawRel.ref as Record<string, unknown> | undefined;
+          if ('ref' in rc && rc.ref) {
+            const rawRef = rel.ref as Record<string, unknown> | undefined;
             if (rawRef?.text && typeof rawRef.text === 'string') {
               refTexts.set(rc.ref, rawRef.text);
             }
@@ -237,11 +244,14 @@ function attachAnnotations(concept: Concept, localizations: Record<string, unkno
     // Localization-level ref text
     const rawRelated = rawObj.related;
     if (Array.isArray(rawRelated)) {
-      for (let i = 0; i < lc.related.length && i < rawRelated.length; i++) {
-        const rc = lc.related[i];
-        const rawRel = rawRelated[i] as Record<string, unknown>;
-        const rawRef = rawRel.ref as Record<string, unknown> | undefined;
-        if (rc.ref && rawRef?.text && typeof rawRef.text === 'string') {
+      for (const rawRel of rawRelated) {
+        if (!rawRel || typeof rawRel !== 'object') continue;
+        const rel = rawRel as Record<string, unknown>;
+        const relType = rel.type as string | undefined;
+        const rc = relType ? lc.related.find(r => r.type === relType) : undefined;
+        if (!rc || !rc.ref) continue;
+        const rawRef = rel.ref as Record<string, unknown> | undefined;
+        if (rawRef?.text && typeof rawRef.text === 'string') {
           refTexts.set(rc.ref, rawRef.text);
         }
       }

package/src/adapters/ontology-registry.ts

@@ -1,5 +1,5 @@
 /**
- * Ontology Registry — taxonomy-driven labels and definitions for the browser.
+ * Ontology Registry — taxonomy-driven labels, definitions, and colors for the browser.
  *
  * All enumeration labels, definitions, and colors come from the SKOS taxonomy
  * data extracted at build time from concept-model/ontologies/taxonomies/*.ttl.
@@ -29,10 +29,19 @@ export interface Taxonomy {
   schemeDefinition: string | null;
   categories?: Record<string, TaxonomyCategory>;
   concepts: Record<string, TaxonomyConcept>;
+  colors?: Record<string, string>;
+}
+
+export interface TaxonomyDisplay {
+  label: string;
+  color: string;
+  definition?: string;
 }
 
 type TaxonomyKey = keyof typeof taxonomyData;
 
+const DEFAULT_COLOR = 'badge-gray';
+
 export class OntologyRegistry {
   private data: Record<string, Taxonomy>;
 
@@ -94,9 +103,17 @@ export class OntologyRegistry {
   }
 
   getColor(taxonomy: TaxonomyKey, id: string): string | null {
-    const entry = this.data[taxonomy] as unknown as Record<string, unknown>;
-    const colors = entry?.colors as Record<string, string> | undefined;
-    return colors?.[id] ?? null;
+    return this.data[taxonomy]?.colors?.[id] ?? null;
+  }
+
+  getDisplay(taxonomy: TaxonomyKey, id: string | null | undefined, colorFallback?: string): TaxonomyDisplay {
+    if (!id) return { label: '', color: colorFallback ?? DEFAULT_COLOR };
+    const concept = this.getConcept(taxonomy, id);
+    return {
+      label: concept?.prefLabel ?? id,
+      color: this.data[taxonomy]?.colors?.[id] ?? colorFallback ?? DEFAULT_COLOR,
+      definition: concept?.definition ?? undefined,
+    };
   }
 }
 

package/src/adapters/types.ts

@@ -116,6 +116,8 @@ export interface DatasetRegistry {
   datasetUri?: string;
   uriBase?: string;
   uriAliases?: string[];
+  ref?: string;
+  refAliases?: string[];
 }
 
 // ── Graph types ────────────────────────────────────────────────────────────

package/src/components/CitationDisplay.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Citation } from 'glossarist';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { getFactory } from '../adapters/factory';
 import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
@@ -14,16 +14,6 @@ const router = useRouter();
 const store = useVocabularyStore();
 const factory = getFactory();
 
-function formatRef(c: Citation): string {
-  const ref = c.ref;
-  if (!ref) return '';
-  const parts: string[] = [];
-  if (ref.source) parts.push(ref.source);
-  if (ref.id) parts.push(ref.id);
-  if (ref.version) parts.push(`(${ref.version})`);
-  return parts.join(' ');
-}
-
 function resolveCitation(): { registerId: string; conceptId: string } | null {
   const ref = props.citation.ref;
   const locality = props.citation.locality;
@@ -36,6 +26,9 @@ function resolveCitation(): { registerId: string; conceptId: string } | null {
 }
 
 const resolvedTarget = computed(() => resolveCitation());
+const isCrossDataset = computed(() =>
+  resolvedTarget.value != null && resolvedTarget.value.registerId !== props.registerId,
+);
 
 async function navigateToCitation() {
   if (!resolvedTarget.value) return;
@@ -43,18 +36,80 @@ async function navigateToCitation() {
   await store.viewConcept(registerId, conceptId);
   router.push({ name: 'concept', params: { registerId, conceptId } });
 }
+
+// --- Hover preview ---
+const triggerEl = ref<HTMLElement | null>(null);
+const preview = ref<{ designation: string; definition: string } | null>(null);
+const previewVisible = ref(false);
+let previewTimer: ReturnType<typeof setTimeout> | null = null;
+
+const previewStyle = computed(() => {
+  if (!triggerEl.value) return {};
+  const rect = triggerEl.value.getBoundingClientRect();
+  return {
+    top: `${rect.bottom + 6}px`,
+    left: `${Math.max(8, Math.min(rect.left, window.innerWidth - 336))}px`,
+  };
+});
+
+async function loadPreview() {
+  if (!resolvedTarget.value || preview.value) return;
+  const { registerId, conceptId } = resolvedTarget.value;
+  const adapter = factory.getAdapter(registerId);
+  if (!adapter) return;
+
+  try {
+    const entry = adapter.getIndexEntry(conceptId);
+    if (entry && !preview.value) {
+      preview.value = {
+        designation: entry.designations?.eng || entry.eng || conceptId,
+        definition: '',
+      };
+    }
+
+    const concept = await adapter.fetchConcept(conceptId);
+    const lc = concept.localization('eng');
+    const def = lc?.definitions?.[0]?.content || concept.definition('eng');
+    const term = lc?.terms?.[0]?.designation || concept.primaryDesignation('eng');
+    preview.value = {
+      designation: term || entry?.designations?.eng || conceptId,
+      definition: typeof def === 'string' ? def.slice(0, 200) : '',
+    };
+  } catch {
+    // Concept not available — preview stays with index data or empty
+  }
+}
+
+function schedulePreview(e: MouseEvent) {
+  triggerEl.value = e.currentTarget as HTMLElement;
+  previewVisible.value = true;
+  previewTimer = setTimeout(loadPreview, 400);
+}
+
+function hidePreview() {
+  if (previewTimer) { clearTimeout(previewTimer); previewTimer = null; }
+  previewVisible.value = false;
+}
 </script>
 
 <template>
-  <span class="inline">
+  <span class="inline" @mouseleave="hidePreview">
     <template v-if="citation.ref">
-      <button v-if="resolvedTarget" @click="navigateToCitation" class="concept-link font-medium">{{ citation.ref.source }}</button>
+      <button
+        v-if="resolvedTarget"
+        @click="navigateToCitation"
+        @mouseenter="schedulePreview"
+        class="concept-link font-medium inline-flex items-center gap-0.5"
+      >
+        {{ citation.ref.source }}
+        <span v-if="isCrossDataset" class="text-[10px] opacity-60 leading-none">↗</span>
+      </button>
       <span v-else-if="citation.ref.source" class="font-medium">{{ citation.ref.source }}</span>
       <span v-if="citation.ref.id"> {{ citation.ref.id }}</span>
       <span v-if="citation.ref.version" class="text-ink-400"> ({{ citation.ref.version }})</span>
     </template>
     <template v-if="citation.locality">
-      <button v-if="resolvedTarget" @click="navigateToCitation" class="concept-link">
+      <button v-if="resolvedTarget" @click="navigateToCitation" @mouseenter="schedulePreview" class="concept-link">
         <span v-if="citation.locality.type" class="text-ink-400">, {{ citation.locality.type }}</span>
         <span v-if="citation.locality.referenceFrom" class="text-ink-400">
           {{ citation.locality.referenceTo ? ` ${citation.locality.referenceFrom}–${citation.locality.referenceTo}` : ` ${citation.locality.referenceFrom}` }}
@@ -70,5 +125,59 @@ async function navigateToCitation() {
     <a v-if="citation.link" :href="citation.link" target="_blank" rel="noopener" class="concept-link ml-1">[link]</a>
     <span v-if="citation.original" class="text-xs text-ink-300 ml-1">(orig: {{ citation.original }})</span>
     <span v-if="resolvedTarget" class="text-[9px] text-ink-300 ml-1">→ {{ resolvedTarget.registerId }}/{{ resolvedTarget.conceptId }}</span>
+
+    <!-- Hover preview tooltip -->
+    <Teleport to="body">
+      <div
+        v-if="previewVisible && preview"
+        class="citation-preview"
+        @mouseenter="previewVisible = true"
+        @mouseleave="hidePreview"
+        :style="previewStyle"
+      >
+        <div class="citation-preview-title">{{ preview.designation }}</div>
+        <div v-if="preview.definition" class="citation-preview-def">{{ preview.definition }}</div>
+        <div v-if="resolvedTarget" class="citation-preview-dataset">{{ resolvedTarget.registerId }}</div>
+      </div>
+    </Teleport>
   </span>
 </template>
+
+<style scoped>
+.citation-preview {
+  position: fixed;
+  z-index: 50;
+  max-width: 320px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 1.4;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  pointer-events: auto;
+  background: var(--color-bg, #fff);
+  color: var(--color-ink, #1a1a1a);
+  border: 1px solid var(--color-border, #e5e5e5);
+}
+:global(.dark) .citation-preview {
+  background: var(--color-bg, #1a1a2e);
+  color: var(--color-ink, #e5e5e5);
+  border-color: var(--color-border, #333);
+}
+.citation-preview-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.citation-preview-def {
+  color: var(--color-ink-600, #555);
+  font-size: 12px;
+}
+:global(.dark) .citation-preview-def {
+  color: var(--color-ink-400, #999);
+}
+.citation-preview-dataset {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--brand-primary);
+  opacity: 0.8;
+}
+</style>

package/src/components/ConceptDetail.vue

@@ -14,7 +14,10 @@ import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { getFactory } from '../adapters/factory';
 import { useRenderOptions } from '../composables/use-render-options';
-import { categorizeRelationship, relationshipLabel, relationshipDefinition, INVERSE_RELATIONSHIPS } from '../utils/relationship-categories';
+import { useConceptEdges } from '../composables/use-concept-edges';
+import { useConceptContent, type LangContent } from '../composables/use-concept-content';
+import { relationshipLabel, INVERSE_RELATIONSHIPS } from '../utils/relationship-categories';
+import { slugify } from '../utils/slugify';
 import { useSiteConfig } from '../config/use-site-config';
 import ConceptTimeline from './ConceptTimeline.vue';
 import ConceptRdfView from './ConceptRdfView.vue';
@@ -38,7 +41,6 @@ const router = useRouter();
 const store = useVocabularyStore();
 const { getColor } = useDsStyle();
 const { config: siteConfig, localizedDatasetField } = useSiteConfig();
-const factory = getFactory();
 
 const activeTab = ref<'rdf' | 'definition' | 'history'>('definition');
 const activeHistoryLang = ref('eng');
@@ -53,6 +55,25 @@ const conceptPosition = computed(() => {
   return { index: idx + 1, total: adapter.getConceptCount() };
 });
 
+const conceptComputed = computed(() => props.concept);
+const registerIdComputed = computed(() => props.registerId);
+const manifestComputed = computed(() => props.manifest);
+const edgesComputed = computed(() => props.edges);
+
+const {
+  conceptUriValue,
+  outgoingEdges,
+  incomingEdges,
+  getEdgeDisplay,
+  edgeBadgeColor,
+  inverseEdgeType,
+  conceptRelated,
+  getResolvedRef,
+  relatedLabel,
+  navigateEdge,
+  navigateRelated,
+} = useConceptEdges(conceptComputed, registerIdComputed, manifestComputed, edgesComputed);
+
 const uriCopied = ref(false);
 function copyUri() {
   const uri = conceptUri(props.concept, props.registerId, props.manifest.uriBase);
@@ -84,79 +105,19 @@ const engConcept = computed((): LocalizedConcept | null => {
 const primaryTerm = computed(() => getPreferredTerm(engConcept.value, conceptId.value));
 const renderedPrimaryTerm = computed(() => renderMath(primaryTerm.value));
 
-// Managed concept status from Concept.status (7 values from concept-status.ttl)
 const managedStatus = computed(() => props.concept.status);
 
-// ConceptReference domains from managed concept level
 const conceptRefDomains = computed(() => props.concept.domains);
 
-// Managed concept dates
 const conceptDates = computed(() => props.concept.dates);
 
-// Managed concept sources (distinct from localized sources)
 const conceptSources = computed(() => props.concept.sources);
 
-// Managed concept tags
 const conceptTags = computed(() => props.concept.tags ?? []);
 
-// Managed concept related (concept-level cross-references)
-// Derives inverse relationships from incoming edges (e.g. supersedes → superseded_by).
-const conceptRelated = computed(() => {
-  const direct = props.concept.relatedConcepts?.filter(rc => !INVERSE_RELATIONSHIPS[rc.type]) ?? [];
-  const derived = incomingEdges.value
-    .filter(e => INVERSE_RELATIONSHIPS[e.type])
-    .map(e => {
-      const parsed = factory.resolve(e.source, props.registerId);
-      const sourceUrn = parsed.type === 'internal'
-        ? store.manifests.get(parsed.registerId)?.datasetUri
-        : null;
-      const conceptId = e.source.match(/\/concept\/([^/]+)$/)?.[1];
-      return {
-        type: INVERSE_RELATIONSHIPS[e.type],
-        ref: sourceUrn && conceptId ? { source: sourceUrn, id: conceptId } : null,
-        content: '',
-      };
-    });
-  return [...direct, ...derived];
-});
-
-function resolveRelatedRef(ref: { source: string | null; id: string | null } | null): { registerId: string; conceptId: string } | null {
-  if (!ref?.source || !ref?.id) return null;
-  const uri = `${ref.source}/${ref.id}`;
-  const resolution = factory.resolve(uri, props.registerId);
-  if (resolution.type === 'internal') {
-    const conceptId = resolution.conceptId.replace(/^\//, '');
-    return { registerId: resolution.registerId, conceptId };
-  }
-  if (ref.source.startsWith('urn:')) {
-    const directUri = ref.source + ref.id;
-    const directRes = factory.resolve(directUri, props.registerId);
-    if (directRes.type === 'internal') {
-      return { registerId: directRes.registerId, conceptId: directRes.conceptId.replace(/^\//, '') };
-    }
-  }
-  return null;
-}
-
-async function navigateRelated(ref: { source: string | null; id: string | null }) {
-  const target = resolveRelatedRef(ref);
-  if (!target) return;
-  router.push({ name: 'concept', params: { registerId: target.registerId, conceptId: target.conceptId } });
-}
-
-function relatedLabel(dr: { content?: string | null; ref?: { source: string | null; id: string | null } | null }): string {
-  if (dr.content) return dr.content;
-  const resolved = dr.ref ? getResolvedRef(dr.ref).target : null;
-  if (resolved) {
-    const m = store.manifests.get(resolved.registerId);
-    const dsLabel = m?.shortname || m?.title || resolved.registerId;
-    return `${resolved.conceptId} (${dsLabel})`;
-  }
-  return dr.ref ? `${dr.ref.id || ''} (${dr.ref.source || ''})`.trim() : '';
-}
-
 // Cross-reference resolver: generates clickable links for inline refs
 
+const factory = getFactory();
 const { ensureBibLoaded, bibResolver, figResolver } = useRenderOptions(() => props.registerId);
 
 const renderOpts: RenderOptions = {
@@ -194,30 +155,7 @@ function handleContentClick(e: MouseEvent) {
   }
 }
 
-// Pre-computed content for all languages (sorted eng first)
-interface LangContent {
-  lang: string;
-  lc: LocalizedConcept;
-  renderedTerm: string;
-  definition: string;
-  renderedDefinition: string;
-  annotations: string[];
-  renderedAnnotations: string[];
-  notes: string[];
-  renderedNotes: string[];
-  examples: string[];
-  renderedExamples: string[];
-  sources: ConceptSource[];
-  designations: Designation[];
-  renderedDesignations: Map<string, string>;
-  entryStatus: string;
-  classification: string | null;
-  reviewType: string | null;
-  release: string | null;
-  lineageSourceSimilarity: number | null;
-  lcScript: string | null;
-  lcSystem: string | null;
-}
+// LangContent type is imported from the composable
 
 const allLangContent = computed(() => {
   const result: LangContent[] = [];
@@ -310,112 +248,6 @@ function scrollToLang(lang: string) {
   });
 }
 
-const conceptUriValue = computed(() =>
-  conceptUri(props.concept, props.registerId, props.manifest.uriBase)
-);
-
-const outgoingEdges = computed(() => dedupeEdges(props.edges.filter(e => e.source === conceptUriValue.value && e.type !== 'domain' && e.type !== 'section'), 'target'));
-const incomingEdges = computed(() => dedupeEdges(props.edges.filter(e => e.target === conceptUriValue.value && e.type !== 'domain' && e.type !== 'section'), 'source'));
-
-function dedupeEdges(edges: GraphEdge[], direction: 'source' | 'target'): GraphEdge[] {
-  const seen = new Set<string>();
-  return edges.filter(e => {
-    const key = `${e[direction]}\0${e.type}`;
-    if (seen.has(key)) return false;
-    seen.add(key);
-    return true;
-  });
-}
-
-function inverseEdgeType(type: string): string {
-  return INVERSE_RELATIONSHIPS[type] || type;
-}
-
-function edgeBadgeColor(type: string, direction: 'out' | 'in'): string {
-  if (type === 'supersedes' || type === 'superseded_by') {
-    return direction === 'out' ? 'text-orange-700 bg-orange-50' : 'text-red-700 bg-red-50';
-  }
-  return categorizeRelationship(type).color;
-}
-
-interface EdgeDisplay {
-  uri: string;
-  conceptId: string;
-  designation: string;
-  tooltip: string;
-  isLocal: boolean;
-  badge: { id: string; title: string } | null;
-}
-
-const edgeDisplayCache = computed(() => {
-  const cache = new Map<string, EdgeDisplay>();
-  for (const e of props.edges) {
-    const uri = e.source === conceptUriValue.value ? e.target : e.source;
-    if (cache.has(uri)) continue;
-    const resolution = factory.resolve(uri, props.registerId);
-    const isLocal = resolution.type === 'internal' && resolution.registerId === props.registerId;
-    const conceptId = uri.match(/\/concept\/([^/]+)$/)?.[1] ?? uri.split('/').pop() ?? uri;
-    const node = store.graph.getNode(uri);
-    const designation = node
-      ? (node.designations[locale.value] || node.designations.eng || Object.values(node.designations)[0] || '')
-      : '';
-    const tooltipLines: string[] = [uri];
-    if (node) {
-      for (const [lang, des] of Object.entries(node.designations)) {
-        tooltipLines.push(`${langLabel(lang)}: ${des}`);
-      }
-    }
-    let badge: { id: string; title: string } | null = null;
-    if (resolution.type === 'internal' && resolution.registerId !== props.registerId) {
-      const m = store.manifests.get(resolution.registerId);
-      badge = { id: resolution.registerId, title: m?.shortname || m?.title || resolution.registerId };
-    } else if (resolution.type === 'site') {
-      badge = { id: '', title: resolution.label };
-    } else if (resolution.type === 'url') {
-      badge = { id: '', title: resolution.label };
-    }
-    cache.set(uri, { uri, conceptId, designation, tooltip: tooltipLines.join('\n'), isLocal, badge });
-  }
-  return cache;
-});
-
-function getEdgeDisplay(uri: string): EdgeDisplay {
-  return edgeDisplayCache.value.get(uri) ?? { uri, conceptId: uri, designation: "", tooltip: uri, isLocal: false, badge: null };
-}
-
-interface ResolvedRef {
-  target: { registerId: string; conceptId: string } | null;
-}
-
-const resolvedRefs = computed(() => {
-  const map = new Map<string, ResolvedRef>();
-  for (const cr of conceptRelated.value) {
-    const key = `${cr.ref?.source ?? ''}:${cr.ref?.id ?? ''}`;
-    if (map.has(key)) continue;
-    map.set(key, { target: resolveRelatedRef(cr.ref) });
-  }
-  return map;
-});
-
-function getResolvedRef(ref: { source: string | null; id: string | null } | null): ResolvedRef {
-  if (!ref) return { target: null };
-  const key = `${ref.source ?? ''}:${ref.id ?? ''}`;
-  return resolvedRefs.value.get(key) ?? { target: resolveRelatedRef(ref) };
-}
-
-async function navigateEdge(edge: GraphEdge) {
-  const uri = edge.source === conceptUriValue.value ? edge.target : edge.source;
-  const resolution = factory.resolve(uri);
-
-  if (resolution.type === 'internal') {
-    router.push({ name: 'concept', params: { registerId: resolution.registerId, conceptId: resolution.conceptId } });
-  } else if (resolution.type === 'site') {
-    window.open(`${resolution.baseUrl}/resolve/${encodeURIComponent(uri)}`, '_blank', 'noopener');
-  } else if (resolution.type === 'url') {
-    window.open(resolution.url, '_blank', 'noopener');
-  }
-}
-
 function navigateDomain(domain: { slug: string; conceptId?: string }) {
   const sectionId = domain.conceptId || domain.slug;
   router.push({ name: 'dataset', params: { registerId: props.manifest.id }, query: { section: sectionId } });
@@ -455,10 +287,6 @@ function plainTruncate(html: string, max: number = 120): string {
   return text.length <= max ? text : text.slice(0, max).trimEnd() + '…';
 }
 
-function slugify(text: string): string {
-  return text.toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s/]+/g, '-');
-}
-
 // Domain rendering: merge ConceptReference domains and per-localization domain strings
 const conceptDomains = computed(() => {
   const domainMap = new Map<string, { slug: string; label: string; langs: string[]; conceptId?: string }>();

package/src/components/DesignationList.vue

@@ -17,7 +17,7 @@ const emit = defineEmits<{
   (e: 'navigate-related', ref: { source: string | null; id: string | null }): void;
 }>();
 
-function resolvedLabel(dr: { content: string | null; ref: { source: string | null; id: string | null } | null }): string {
+function resolvedLabel(dr: { content: string | null; ref?: { source: string | null; id: string | null } | null }): string {
   if (dr.content) return dr.content;
   if (dr.ref?.source && dr.ref?.id) return `${dr.ref.source}/${dr.ref.id}`;
   return '(ref)';
@@ -65,11 +65,11 @@ function resolvedLabel(dr: { content: string | null; ref: { source: string | nul
       </div>
       <div v-if="d.related?.length" class="mt-0.5 space-y-0.5">
         <div v-for="(dr, dri) in d.related" :key="'dr'+dri" class="text-xs text-ink-400 flex items-center gap-1.5">
-          <span class="badge text-[9px] bg-gray-50 text-gray-600">{{ relationshipLabel(dr.type) }}</span>
+          <span class="badge text-[9px] bg-gray-50 text-gray-600">{{ relationshipLabel(dr.type ?? '') }}</span>
           <template v-if="getDesignationTarget(dr)">
             <span class="italic">{{ getDesignationTarget(dr) }}</span>
           </template>
-          <button v-else-if="dr.ref" @click="emit('navigate-related', dr.ref)" class="concept-link">{{ resolvedLabel(dr) }}</button>
+          <button v-else-if="'ref' in dr && dr.ref" @click="emit('navigate-related', dr.ref)" class="concept-link">{{ resolvedLabel(dr) }}</button>
           <span v-else>{{ resolvedLabel(dr) }}</span>
         </div>
       </div>