@glossarist/concept-browser 0.7.69 → 0.7.73

package/src/components/DesignationList.vue

@@ -4,8 +4,11 @@ import { designationTypeInfo, normativeStatusInfo, abbreviationDetails, termType
 import { relationshipLabel } from '../utils/relationship-categories';
 import { langName } from '../utils/lang';
 import { getDesignationTarget } from '../adapters/model-bridge';
+import { useI18n } from '../i18n';
 import CitationDisplay from './CitationDisplay.vue';
 
+const { t } = useI18n();
+
 const props = defineProps<{
   designations: Designation[];
   renderedDesignations: Map<string, string>;
@@ -57,10 +60,18 @@ function resolvedLabel(dr: { content: string | null; ref?: { source: string | nu
         <span v-if="d.system" class="badge text-[10px] bg-gray-50 text-gray-600">system: {{ d.system }}</span>
       </div>
       <div v-if="d.sources?.length" class="mt-1 space-y-0.5">
-        <div v-for="(ds, dsi) in d.sources" :key="'ds'+dsi" class="text-xs text-ink-400 flex items-center gap-1.5">
-          <span v-if="ds.type" class="badge text-[9px]" :class="sourceTypeInfo(ds.type).color">{{ sourceTypeInfo(ds.type).label }}</span>
-          <CitationDisplay v-if="ds.origin" :citation="ds.origin" :register-id="registerId" />
-          <span v-else-if="ds.modification" class="text-ink-300">{{ ds.modification }}</span>
+        <div v-for="(ds, dsi) in d.sources" :key="'ds'+dsi" class="text-xs text-ink-400">
+          <div class="flex items-center gap-1.5">
+            <span v-if="ds.type" class="badge text-[9px]" :class="sourceTypeInfo(ds.type).color">{{ sourceTypeInfo(ds.type).label }}</span>
+            <CitationDisplay v-if="ds.origin" :citation="ds.origin" :register-id="registerId" />
+            <span v-else-if="ds.modification" class="text-ink-300">{{ ds.modification }}</span>
+          </div>
+          <div v-if="ds.sourced_from?.length" class="ml-4 mt-0.5">
+            <span class="text-ink-300 text-[9px]">{{ t('concept.sourcedFrom') }}:</span>
+            <div v-for="(sf, sfi) in ds.sourced_from" :key="'sf'+sfi" class="ml-2">
+              <CitationDisplay v-if="sf" :citation="sf" :register-id="registerId" />
+            </div>
+          </div>
         </div>
       </div>
       <div v-if="d.related?.length" class="mt-0.5 space-y-0.5">

package/src/components/LanguageDetail.vue

@@ -176,6 +176,12 @@ function handleContentClick(e: MouseEvent) {
             <div class="text-ink-700">
               <CitationDisplay v-if="src.origin" :citation="src.origin" />
             </div>
+            <div v-if="src.sourced_from?.length" class="text-xs text-ink-400 mt-1">
+              <span class="text-ink-300">{{ t('concept.sourcedFrom') }}:</span>
+              <div v-for="(sf, sfi) in src.sourced_from" :key="'sf'+sfi" class="ml-2">
+                <CitationDisplay v-if="sf" :citation="sf" />
+              </div>
+            </div>
           </div>
         </div>
       </div>

package/src/components/RelationSphere.vue

@@ -238,6 +238,7 @@ function hashSeed(s: string): number {
 function buildGraph() {
   const focusUri = conceptUri(props.concept, props.registerId, props.manifest.uriBase);
   const focusId = props.concept?.id || props.registerId;
+  const focusNodeId = `${props.registerId}/${focusId}`;
   const lang = sphereLang.value;
   const maxDepth = degree.value;
 
@@ -255,7 +256,7 @@ function buildGraph() {
     props.concept?.localization?.('eng') ??
     (conceptLangs.length > 0 ? props.concept?.localization?.(conceptLangs[0]) : undefined);
   const focusNode: SNode = {
-    id: focusId,
+    id: focusNodeId,
     term: getPreferredTerm(focusLc ?? null, focusId),
     ref: props.manifest.ref || props.registerId,
     register: props.registerId,
@@ -265,9 +266,9 @@ function buildGraph() {
     vx: 0, vy: 0, vz: 0,
   };
 
-  const nodeMap = new Map<string, SNode>([[focusId, focusNode]]);
+  const nodeMap = new Map<string, SNode>([[focusNodeId, focusNode]]);
   const visited: Map<string, number> = new Map([[focusUri, 0]]);  // uri → depth
-  const idToUri = new Map<string, string>([[focusId, focusUri]]);  // for inter-neighbor edge pass
+  const idToUri = new Map<string, string>([[focusNodeId, focusUri]]);  // for inter-neighbor edge pass
   const resultLinks: SLink[] = [];
   const linkKeys = new Set<string>();  /* dedupe edges */
   const queue: Array<{ uri: string; depth: number; id: string }> = [];
@@ -280,7 +281,7 @@ function buildGraph() {
     const otherUri = isOutgoing ? edge.target : edge.source;
     if (!otherUri || visited.has(otherUri)) continue;
     const parsed = UriRouter.parseUri(otherUri);
-    if (!parsed || parsed.conceptId === focusId) continue;
+    if (!parsed || (parsed.conceptId === focusId && parsed.registerId === props.registerId)) continue;
     visited.set(otherUri, 1);
     depth1List.push({ uri: otherUri, parsed, isOutgoing, edge });
   }
@@ -288,9 +289,10 @@ function buildGraph() {
   /* Second pass: place depth-1 nodes on an even ring around the focus. */
   const depth1Total = depth1List.length;
   depth1List.forEach(({ uri, parsed, isOutgoing, edge }, i) => {
+    const nid = `${parsed.registerId}/${parsed.conceptId}`;
     const pos = fibonacciSpherePosition(1, i, depth1Total, hashSeed(parsed.conceptId));
-    nodeMap.set(parsed.conceptId, {
-      id: parsed.conceptId,
+    nodeMap.set(nid, {
+      id: nid,
       term: edge.label || parsed.conceptId,
       ref: parsed.registerId,
       register: parsed.registerId,
@@ -299,9 +301,9 @@ function buildGraph() {
       x: pos.x, y: pos.y, z: pos.z,
       vx: 0, vy: 0, vz: 0,
     });
-    idToUri.set(parsed.conceptId, uri);
-    const src = isOutgoing ? focusId : parsed.conceptId;
-    const tgt = isOutgoing ? parsed.conceptId : focusId;
+    idToUri.set(nid, uri);
+    const src = isOutgoing ? focusNodeId : nid;
+    const tgt = isOutgoing ? nid : focusNodeId;
     const key = `${src}\0${tgt}\0${edge.type}`;
     if (!linkKeys.has(key)) {
       linkKeys.add(key);
@@ -313,7 +315,7 @@ function buildGraph() {
         depth: 1,
       });
     }
-    queue.push({ uri, depth: 1, id: parsed.conceptId });
+    queue.push({ uri, depth: 1, id: `${parsed.registerId}/${parsed.conceptId}` });
   });
 
   /* BFS deeper levels using graph engine (has cross-dataset edges) */
@@ -332,14 +334,17 @@ function buildGraph() {
       const otherUri = isOutgoing ? edge.target : edge.source;
       if (!otherUri || visited.has(otherUri)) continue;
       const parsed = UriRouter.parseUri(otherUri);
-      if (!parsed || parsed.conceptId === focusId || nodeMap.has(parsed.conceptId)) continue;
+      if (!parsed) continue;
+      const childId = `${parsed.registerId}/${parsed.conceptId}`;
+      if (childId === focusNodeId || nodeMap.has(childId)) continue;
       visited.set(otherUri, depth + 1);
       children.push({ uri: otherUri, parsed, isOutgoing, edge });
     }
     children.forEach(({ uri: cUri, parsed, isOutgoing, edge }, i) => {
+      const cid = `${parsed.registerId}/${parsed.conceptId}`;
       const pos = fibonacciSpherePosition(depth + 1, i, children.length, hashSeed(parsed.conceptId));
-      nodeMap.set(parsed.conceptId, {
-        id: parsed.conceptId,
+      nodeMap.set(cid, {
+        id: cid,
         term: parsed.conceptId,
         ref: parsed.registerId,
         register: parsed.registerId,
@@ -348,9 +353,9 @@ function buildGraph() {
         x: pos.x, y: pos.y, z: pos.z,
         vx: 0, vy: 0, vz: 0,
       });
-      idToUri.set(parsed.conceptId, cUri);
-      const src = isOutgoing ? id : parsed.conceptId;
-      const tgt = isOutgoing ? parsed.conceptId : id;
+      idToUri.set(cid, cUri);
+      const src = isOutgoing ? id : cid;
+      const tgt = isOutgoing ? cid : id;
       const key = `${src}\0${tgt}\0${edge.type}`;
       if (!linkKeys.has(key)) {
         linkKeys.add(key);
@@ -362,7 +367,7 @@ function buildGraph() {
           depth: depth + 1,
         });
       }
-      queue.push({ uri: cUri, depth: depth + 1, id: parsed.conceptId });
+      queue.push({ uri: cUri, depth: depth + 1, id: cid });
     });
   }
 
@@ -795,13 +800,8 @@ function renderDOM() {
        The top bar gives instant dataset identification at any angle; the
        tinted background ties same-dataset cards together visually. */
     el.style.setProperty('--ds-color', dsColor);
-    if (n.depth !== 0) {
-      el.style.borderTop = `4px solid ${dsColor}`;
-      el.style.background = `linear-gradient(180deg, color-mix(in srgb, ${dsColor} 10%, var(--surface)) 0%, var(--surface) 30%)`;
-    } else {
-      /* Focus keeps a solid surface — it's already distinguished by the
-         blue ring; adding a tint would compete. */
-    }
+    el.style.borderTop = `4px solid ${dsColor}`;
+    el.style.background = `linear-gradient(180deg, color-mix(in srgb, ${dsColor} 10%, var(--surface)) 0%, var(--surface) 30%)`;
 
     el.innerHTML = `
       <div class="sp-ref">${n.register} · ${n.conceptId}</div>
@@ -978,7 +978,7 @@ function navigate(newConceptId: string, newRegisterId: string) {
 /* ── Watch concept change ───────────────────────────────── */
 /* When props.concept changes (via store.viewConcept from sphere click,
    or external navigation), animate the transition with a SLERP tween. */
-let lastConceptId = '';
+let lastConceptKey = '';
 
 /* UI language change → sync sphere language (unless user has explicitly
    chosen a different one via the Language selector). We track that with
@@ -1017,10 +1017,12 @@ async function rebuildForLangChange() {
   await loadNeighborTerms();
 }
 
-watch(() => props.concept?.id, (newId) => {
-  if (!newId || newId === lastConceptId) return;
-  const wasFirst = !lastConceptId;
-  lastConceptId = newId;
+watch(() => [props.concept?.id, props.registerId] as const, ([newId, newReg]) => {
+  if (!newId) return;
+  const key = `${newReg}/${newId}`;
+  if (key === lastConceptKey) return;
+  const wasFirst = !lastConceptKey;
+  lastConceptKey = key;
 
   if (wasFirst) {
     /* Initial load — fresh placement, no tween */
@@ -1290,7 +1292,7 @@ async function waitForCanvas(): Promise<void> {
 
 onMounted(async () => {
   window.addEventListener('resize', onResize);
-  lastConceptId = props.concept?.id || '';
+  lastConceptKey = `${props.registerId}/${props.concept?.id || ''}`;
   await waitForCanvas();
 
   /* Setup pan/zoom via d3-zoom on the canvas.
@@ -1493,8 +1495,10 @@ defineExpose({ navigate });
 }
 :deep(.sp-rel) { margin-left: auto; }
 :deep(.sp-node.focus) {
-  border: 2px solid var(--blue); z-index: 20; cursor: default;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 4px rgba(37,99,235,0.1);
+  z-index: 20; cursor: default;
+  outline: 2px solid var(--blue);
+  outline-offset: 3px;
+  box-shadow: 0 0 12px 4px rgba(37,99,235,0.25), 0 0 24px 8px rgba(37,99,235,0.12);
 }
 :deep(.sp-focus-badge) {
   position: absolute; top: -10px; right: 12px; font-size: 9px; color: white;

package/src/components/site/SeoMeta.astro

@@ -0,0 +1,23 @@
+---
+// SEO meta tags for Astro pages.
+interface Props {
+  title: string;
+  description?: string;
+  canonicalUrl?: string;
+  type?: string;
+  image?: string;
+}
+const { title, description = '', canonicalUrl, type = 'website', image } = Astro.props;
+const site = Astro.site?.toString().replace(/\/$/, '') || '';
+const canonical = canonicalUrl || `${site}${Astro.url.pathname}`;
+const ogImage = image || `${site}/og-image.png`;
+---
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:type" content={type} />
+<meta property="og:url" content={canonical} />
+<meta property="og:image" content={ogImage} />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+<link rel="canonical" href={canonical} />

package/src/components/site/SiteFooter.astro

@@ -0,0 +1,14 @@
+---
+import { getSiteConfig } from '../../lib/site-config';
+const siteConfig = await getSiteConfig();
+---
+<footer class="border-t border-ink-100/60 dark:border-ink-700/40 py-6 mt-12">
+  <div class="max-w-[1600px] mx-auto px-4 flex items-center justify-between text-xs text-ink-400">
+    <span>{siteConfig.title || 'Glossarist'}</span>
+    <div class="flex items-center gap-4">
+      <a href="/about" class="hover:text-ink-600 dark:hover:text-ink-300">About</a>
+      <a href="/contributors" class="hover:text-ink-600 dark:hover:text-ink-300">Contributors</a>
+      {siteConfig.branding?.poweredBy && <span>{siteConfig.branding.poweredBy}</span>}
+    </div>
+  </div>
+</footer>

package/src/components/site/SiteHeader.astro

@@ -0,0 +1,25 @@
+---
+interface Props { title: string }
+const { title } = Astro.props;
+---
+<header class="border-b border-ink-100/60 dark:border-ink-700/40 bg-surface dark:bg-ink-900 sticky top-0 z-30">
+  <div class="max-w-[1600px] mx-auto px-4 h-14 flex items-center justify-between gap-4">
+    <div class="flex items-center gap-3">
+      <button id="sidebar-toggle" class="lg:hidden p-1.5 rounded hover:bg-ink-100/50 dark:hover:bg-ink-800/40" aria-label="Toggle sidebar">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
+      </button>
+      <a href="/" class="text-lg font-bold text-ink-800 dark:text-ink-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+        {title}
+      </a>
+    </div>
+    <div class="flex items-center gap-2">
+      <a href="/search" class="p-1.5 rounded hover:bg-ink-100/50 dark:hover:bg-ink-800/40 text-ink-500 dark:text-ink-400" aria-label="Search">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+      </a>
+      <button id="theme-toggle" class="p-1.5 rounded hover:bg-ink-100/50 dark:hover:bg-ink-800/40 text-ink-500 dark:text-ink-400" aria-label="Toggle dark mode">
+        <svg class="w-5 h-5 dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
+        <svg class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+      </button>
+    </div>
+  </div>
+</header>

package/src/components/site/SiteSidebar.astro

@@ -0,0 +1,56 @@
+---
+import { getCollection } from 'astro:content';
+import { getSiteConfig } from '../../lib/site-config';
+
+interface Props { activeDataset?: string; activeGroup?: string }
+const { activeDataset, activeGroup } = Astro.props;
+
+const datasets = await getCollection('datasets');
+const groups = await getCollection('groups');
+const siteConfig = await getSiteConfig();
+---
+<aside id="sidebar" class="hidden lg:block w-64 shrink-0 border-r border-ink-100/60 dark:border-ink-700/40 min-h-[calc(100vh-3.5rem)] p-3">
+  <nav class="space-y-4 text-sm">
+    <a href="/" class={`block px-2 py-1.5 rounded ${!activeDataset && !activeGroup ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300' : 'text-ink-600 dark:text-ink-300 hover:bg-ink-50 dark:hover:bg-ink-800/40'}`}>
+      Home
+    </a>
+    <a href="/search" class="block px-2 py-1.5 rounded text-ink-600 dark:text-ink-300 hover:bg-ink-50 dark:hover:bg-ink-800/40">Search</a>
+    <a href="/graph" class="block px-2 py-1.5 rounded text-ink-600 dark:text-ink-300 hover:bg-ink-50 dark:hover:bg-ink-800/40">Graph</a>
+
+    {groups.length > 0 ? (
+      groups.map(g => (
+        <div>
+          <a href={`/group/${g.data.id}`} class={`block px-2 py-1.5 font-medium rounded ${activeGroup === g.data.id ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300' : 'text-ink-700 dark:text-ink-200 hover:bg-ink-50 dark:hover:bg-ink-800/40'}`}>
+            {g.data.label}
+          </a>
+          <ul class="mt-1 space-y-0.5 ml-2">
+            {g.data.datasets.map((id: string) => {
+              const ds = datasets.find(d => d.data.id === id);
+              if (!ds) return null;
+              return (
+                <li>
+                  <a href={`/dataset/${id}`} class={`block px-2 py-1 rounded text-xs ${activeDataset === id ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-300 font-medium' : 'text-ink-500 dark:text-ink-400 hover:bg-ink-50 dark:hover:bg-ink-800/30'}`}>
+                    {ds.data.title.length > 28 ? ds.data.title.slice(0, 25) + '…' : ds.data.title}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ))
+    ) : (
+      <div>
+        <h3 class="px-2 py-1 text-xs font-semibold text-ink-400 uppercase tracking-wider">Datasets</h3>
+        <ul class="space-y-0.5">
+          {datasets.map(ds => (
+            <li>
+              <a href={`/dataset/${ds.data.id}`} class={`block px-2 py-1 rounded text-xs ${activeDataset === ds.data.id ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-300 font-medium' : 'text-ink-500 dark:text-ink-400 hover:bg-ink-50 dark:hover:bg-ink-800/30'}`}>
+                {ds.data.title.length > 28 ? ds.data.title.slice(0, 25) + '…' : ds.data.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )}
+  </nav>
+</aside>

package/src/content.config.ts

@@ -0,0 +1,88 @@
+import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
+import { resolve } from 'path';
+
+const cbContent = resolve(process.cwd(), '.cb-content');
+
+const datasets = defineCollection({
+  loader: glob({ pattern: '**/*.json', base: resolve(cbContent, 'datasets') }),
+  schema: z.object({
+    id: z.string(),
+    title: z.string(),
+    description: z.string(),
+    uri: z.string().optional(),
+    uriBase: z.string().optional().default(''),
+    year: z.number().optional(),
+    status: z.string().optional(),
+    ref: z.string().optional(),
+    refAliases: z.array(z.string()).optional(),
+    owner: z.string().optional(),
+    languages: z.array(z.string()).default(['eng']),
+    conceptCount: z.number().default(0),
+    color: z.union([z.string(), z.object({ light: z.string(), dark: z.string() })]).optional(),
+    tags: z.array(z.string()).default([]),
+    sections: z.array(z.any()).optional(),
+    sourceRepo: z.string().optional(),
+    lastUpdated: z.string().optional(),
+  }),
+});
+
+const groups = defineCollection({
+  loader: glob({ pattern: '**/*.json', base: resolve(cbContent, 'groups') }),
+  schema: z.object({
+    id: z.string(),
+    label: z.string(),
+    kind: z.enum(['lineage', 'topic', 'family', 'collection', 'default']).default('default'),
+    description: z.string().optional(),
+    current: z.string().optional(),
+    datasets: z.array(z.string()).default([]),
+    color: z.union([z.string(), z.object({ light: z.string(), dark: z.string() })]).optional(),
+  }),
+});
+
+const concepts = defineCollection({
+  loader: glob({ pattern: '**/*.json', base: resolve(cbContent, 'concepts') }),
+  schema: z.object({
+    registerId: z.string(),
+    conceptId: z.string(),
+    uri: z.string(),
+    status: z.string().default('valid'),
+    designations: z.record(z.string(), z.string()).default({}),
+    eng: z.string().optional(),
+    definition: z.record(z.string(), z.string()).optional(),
+    groups: z.array(z.string()).default([]),
+    tags: z.array(z.string()).default([]),
+    languages: z.array(z.string()).optional(),
+    localizations: z.record(z.string(), z.object({
+      languageCode: z.string().optional(),
+      terms: z.array(z.union([
+        z.string(),
+        z.object({ designation: z.string(), normativeStatus: z.string().optional() }),
+      ])).default([]),
+      definitions: z.array(z.union([
+        z.string(),
+        z.object({ content: z.string() }),
+      ])).default([]),
+      notes: z.array(z.union([
+        z.string(),
+        z.object({ content: z.string() }),
+      ])).default([]),
+      examples: z.array(z.union([
+        z.string(),
+        z.object({ content: z.string() }),
+      ])).default([]),
+    })).optional(),
+  }),
+});
+
+const pages = defineCollection({
+  loader: glob({ pattern: '**/*.{md,json}', base: resolve(cbContent, 'pages') }),
+  schema: z.object({
+    title: z.string(),
+    type: z.string().optional(),
+    html: z.string().optional(),
+    route: z.string().optional(),
+  }),
+});
+
+export const collections = { datasets, groups, concepts, pages };

package/src/i18n/locales/eng.yml

@@ -64,6 +64,7 @@ concept.metadata: Metadata
 concept.noData: No data available for this language.
 concept.lifecycleDates: Lifecycle dates
 concept.conceptSources: Concept sources
+concept.sourcedFrom: Sourced from
 concept.incoming: Incoming
 concept.outgoing: Outgoing
 concept.lang: lang

package/src/i18n/locales/fra.yml

@@ -64,6 +64,7 @@ concept.metadata: Métadonnées
 concept.noData: Aucune donnée disponible pour cette langue.
 concept.lifecycleDates: Dates du cycle de vie
 concept.conceptSources: Sources du concept
+concept.sourcedFrom: Issu de
 concept.incoming: Entrantes
 concept.outgoing: Sortantes
 concept.lang: lang.

package/src/islands/AppIsland.vue

@@ -0,0 +1,7 @@
+<template>
+  <App />
+</template>
+
+<script setup lang="ts">
+import App from '../App.vue';
+</script>

package/src/islands/BibliographyIsland.vue

@@ -0,0 +1,26 @@
+<template>
+  <section v-if="entries.length" class="bibliography-island">
+    <h2 class="text-sm font-semibold text-ink-500 uppercase tracking-wider mb-3">Bibliography</h2>
+    <ul class="space-y-1">
+      <li v-for="entry in entries" :key="entry.id" class="text-sm flex items-start gap-2">
+        <span class="text-ink-400 font-mono text-xs shrink-0">[{{ entry.id }}]</span>
+        <div>
+          <span class="text-ink-600 dark:text-ink-300">{{ entry.reference }}</span>
+          <a v-if="entry.link" :href="entry.link" target="_blank" class="text-blue-600 hover:underline text-xs ml-2">↗</a>
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  entries: Array<{
+    id: string;
+    reference: string;
+    title?: string;
+    link?: string;
+    type?: string;
+  }>;
+}>();
+</script>

package/src/islands/ConceptDetailIsland.vue

@@ -0,0 +1,27 @@
+<template>
+  <!-- Full concept detail using the REAL ConceptDetail.vue -->
+  <ErrorBoundary title="Concept view failed" :retry-key="conceptUri">
+    <ConceptDetail
+      :concept="concept"
+      :register-id="registerId"
+      :concept-uri="conceptUri"
+    />
+  </ErrorBoundary>
+</template>
+
+<script setup lang="ts">
+import { onErrorCaptured } from 'vue';
+import ConceptDetail from '../components/ConceptDetail.vue';
+import ErrorBoundary from '../components/ErrorBoundary.vue';
+
+defineProps<{
+  concept: any;
+  registerId: string;
+  conceptUri: string;
+}>();
+
+onErrorCaptured((err) => {
+  console.error('ConceptDetail island error:', err);
+  return false;
+});
+</script>