@glossarist/concept-browser 0.7.78 → 0.7.81

package/src/components/AppSidebar.vue

@@ -6,6 +6,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useDsStyle } from '../utils/dataset-style';
 import { useSiteConfig } from '../config/use-site-config';
 import NavIcon from './NavIcon.vue';
+import DatasetGroupRenderer from './groups/DatasetGroupRenderer.vue';
 import { useI18n, locale } from '../i18n';
 import type { SectionNode } from '../adapters/types';
 import { toSectionTree } from '../utils/section-tree';
@@ -284,61 +285,17 @@ const activeSectionId = computed(() => {
             <span class="text-[9px] uppercase tracking-wide text-ink-300 dark:text-ink-500 font-sans">{{ groupTypeMeta(group).label }}</span>
           </button>
 
-          <!-- Group entries -->
-          <div v-if="isGroupExpanded(group.id)" class="space-y-1" :class="group.label ? 'ml-1' : ''">
-            <!-- Per-entry rendering: button is kind-specific, expansion is shared (DRY/MECE) -->
-            <div
-              v-for="ds in group.entries"
-              :key="ds.id"
-              class="rounded-lg transition-all duration-150"
-              :class="currentDataset === ds.id ? 'bg-surface' : ''"
-            >
-              <!-- LINEAGE: compact timeline button -->
-              <button
-                v-if="group.kind === 'lineage'"
-                @click="goToDataset(ds.id)"
-                class="series-entry w-full text-left flex items-center gap-2 pl-6 pr-3 py-1.5 rounded-md text-sm border-l-2 transition-all duration-150"
-                :class="currentDataset === ds.id
-                  ? 'bg-amber-50/70 dark:bg-amber-400/10 border-l-[3px] text-ink-900 dark:text-ink-50 font-semibold'
-                  : 'border-transparent text-ink-600 dark:text-ink-300 hover:bg-ink-50 dark:hover:bg-ink-700/40 hover:text-ink-900 dark:hover:text-ink-50'"
-                :style="currentDataset === ds.id ? { borderLeftColor: 'var(--gold-accent, #B8935A)' } : {}"
-              >
-                <span class="flex-1 truncate text-[13.5px] font-medium leading-snug">{{ ds.ref || ds.title || ds.id }}</span>
-                <span
-                  v-if="ds.status && ds.status !== 'valid'"
-                  class="text-[9px] uppercase tracking-wide italic text-ink-400 dark:text-ink-400"
-                >{{ ds.status }}</span>
-                <span
-                  v-if="ds.isCurrent"
-                  class="current-star flex-shrink-0"
-                  title="Current edition"
-                >✦</span>
-              </button>
-
-              <!-- DEFAULT/OTHER: standard entry button -->
-              <button
-                v-else
-                @click="goToDataset(ds.id)"
-                class="w-full text-left px-3 py-2 rounded-lg text-sm border-l-2 flex items-start gap-2"
-                :class="[
-                  currentDataset === ds.id
-                    ? 'text-ink-800 dark:text-ink-50'
-                    : 'border-transparent text-ink-600 dark:text-ink-300 hover:bg-ink-50 dark:hover:bg-ink-700 hover:text-ink-800 dark:hover:text-ink-50'
-                ]"
-                :style="{ borderLeftColor: currentDataset === ds.id ? getColor(ds.id) : 'transparent' }"
-              >
-                <span class="w-2 h-2 rounded-full flex-shrink-0 mt-1.5" :style="{ backgroundColor: getColor(ds.id) }"></span>
-                <div class="min-w-0 flex-1">
-                  <div class="font-medium truncate leading-snug">{{ localizedDatasetField(ds.id, 'title', ds.title) }}</div>
-                  <div v-if="ds.loaded" class="text-xs mt-0.5" :class="currentDataset === ds.id ? 'text-ink-400 dark:text-ink-300' : 'text-ink-300 dark:text-ink-400'">
-                    {{ ds.conceptCount.toLocaleString() }} {{ t('home.concepts').toLowerCase() }}
-                  </div>
-                </div>
-              </button>
-
-              <!-- SHARED expansion content: sub-pages + sections + provenance.
-                   Appears for the active dataset in ALL group kinds (DRY). -->
-              <div v-if="currentDataset === ds.id && (filteredDatasetPages.length || provenance.owner)" class="px-2 pb-2">
+          <!-- Group entries: dispatch to kind-specific renderer (OCP).
+               Shared expansion content lives in the `expanded` slot so
+               it stays identical across kinds (DRY/MECE). -->
+          <DatasetGroupRenderer
+            v-if="isGroupExpanded(group.id)"
+            :kind="group.kind"
+            :entries="group.entries"
+            :current-dataset="currentDataset"
+          >
+            <template #expanded="{ entry: ds, isCurrent }">
+              <div v-if="isCurrent && (filteredDatasetPages.length || provenance.owner)" class="px-2 pb-2">
                 <nav v-if="filteredDatasetPages.length" class="space-y-0.5 mt-1">
                   <router-link
                     v-for="page in filteredDatasetPages"
@@ -410,8 +367,8 @@ const activeSectionId = computed(() => {
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
+            </template>
+          </DatasetGroupRenderer>
         </div>
       </template>
 

package/src/components/ConceptDetail.vue

@@ -27,6 +27,8 @@ import FormatDownloads from './FormatDownloads.vue';
 import ConceptEditionRail from './ConceptEditionRail.vue';
 import NonVerbalRepDisplay from './NonVerbalRepDisplay.vue';
 import NonVerbalList from './non-verbal/NonVerbalList.vue';
+import PartitiveRelationList from './PartitiveRelationList.vue';
+import ConceptDiffModal from './ConceptDiffModal.vue';
 import CitationDisplay from './CitationDisplay.vue';
 import DesignationList from './DesignationList.vue';
 import { useI18n } from '../i18n';
@@ -72,6 +74,7 @@ const {
   edgeBadgeColor,
   inverseEdgeType,
   conceptRelated,
+  conceptPartitiveRelations,
   getResolvedRef,
   relatedLabel,
   navigateEdge,
@@ -80,6 +83,11 @@ const {
 
 const hoveredEdgeDisplay = ref<{ designation: string; conceptId: string; tooltip: string } | null>(null);
 
+const diffTarget = ref<{ registerId: string; conceptId: string; label: string } | null>(null);
+function onCompareEdition(target: { registerId: string; conceptId: string; label: string }) {
+  diffTarget.value = target;
+}
+
 const uriCopied = ref(false);
 function copyUri() {
   const uri = conceptUri(props.concept, props.registerId, props.manifest.uriBase);
@@ -561,11 +569,32 @@ const nonVerbalReps = computed(() => {
             </Transition>
           </div>
 
+          <!-- Partitive relations — one-to-many decompositions (ISO 704) -->
+          <PartitiveRelationList
+            v-if="conceptPartitiveRelations.length"
+            :relations="conceptPartitiveRelations"
+            :manifest="manifest"
+            :register-id="registerId"
+          />
+
           <!-- Edition series — supersession chain across vocabulary editions -->
           <ConceptEditionRail
             :concept-uri="conceptUri(props.concept, props.registerId, props.manifest.uriBase)"
             :register-id="registerId"
             :concept-id="conceptId"
+            @compare="onCompareEdition"
+          />
+
+          <!-- Edition diff modal — opened from the rail's compare buttons -->
+          <ConceptDiffModal
+            v-if="diffTarget"
+            :open="true"
+            :current-concept="concept"
+            :current-register-id="registerId"
+            :target-register-id="diffTarget.registerId"
+            :target-concept-id="diffTarget.conceptId"
+            :target-label="diffTarget.label"
+            @close="diffTarget = null"
           />
 
           <!-- Domains -->

package/src/components/ConceptDiffModal.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+/**
+ * ConceptDiffModal — modal wrapper around ConceptDiffView that fetches
+ * the comparison concept on demand.
+ *
+ * Triggered from ConceptEditionRail when the user clicks "compare"
+ * next to a non-current edition. The current concept (props.concept)
+ * becomes the "new" side; the selected edition becomes the "old" side.
+ */
+import { ref, watch, computed } from 'vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import ConceptDiffView from './ConceptDiffView.vue';
+import type { ConceptLikeData } from '../composables/use-concept-diff';
+import type { Concept } from 'glossarist';
+import { useI18n } from '../i18n';
+
+const props = defineProps<{
+  open: boolean;
+  /** The concept currently being viewed. */
+  currentConcept: Concept | null;
+  currentRegisterId: string;
+  /** Edition to compare against. */
+  targetRegisterId: string;
+  targetConceptId: string;
+  targetLabel?: string;
+}>();
+
+const emit = defineEmits<{ close: [] }>();
+
+const store = useVocabularyStore();
+const { t } = useI18n();
+
+const targetConcept = ref<Concept | null>(null);
+const loadError = ref<string | null>(null);
+
+function conceptToData(c: Concept | null, registerId: string): ConceptLikeData | null {
+  if (!c) return null;
+  const langs = c.languages ?? [];
+  const localizations: Record<string, unknown> = {};
+  for (const lang of langs) {
+    const lc = c.localization(lang);
+    if (lc) localizations[lang] = lc;
+  }
+  return {
+    conceptId: c.id,
+    uri: c.uri ?? undefined,
+    status: c.status ?? undefined,
+    languages: langs,
+    localizations,
+  };
+}
+
+const oldData = computed(() => conceptToData(targetConcept.value, props.targetRegisterId));
+const newData = computed(() => conceptToData(props.currentConcept, props.currentRegisterId));
+
+async function loadTarget() {
+  if (!props.open || !props.targetRegisterId || !props.targetConceptId) return;
+  loadError.value = null;
+  targetConcept.value = null;
+  try {
+    const adapter = store.datasets.get(props.targetRegisterId);
+    if (!adapter) throw new Error(`dataset ${props.targetRegisterId} not loaded`);
+    if (!adapter.index) await store.loadDataset(props.targetRegisterId);
+    targetConcept.value = await adapter.fetchConcept(props.targetConceptId);
+  } catch (e: unknown) {
+    loadError.value = e instanceof Error ? e.message : String(e);
+  }
+}
+
+watch(() => [props.open, props.targetRegisterId, props.targetConceptId] as const, () => {
+  if (props.open) loadTarget();
+}, { immediate: true });
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="open"
+        class="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4"
+        @click.self="$emit('close')"
+      >
+        <div class="bg-surface rounded-lg shadow-xl max-w-3xl w-full max-h-[85vh] overflow-hidden flex flex-col">
+          <header class="px-5 py-3 border-b border-ink-100 dark:border-ink-700 flex items-center justify-between">
+            <h2 class="text-sm font-semibold text-ink-700 dark:text-ink-200">
+              {{ t('concept.compareEditions') || 'Compare editions' }}
+            </h2>
+            <button
+              type="button"
+              class="text-ink-400 hover:text-ink-700 dark:hover:text-ink-200"
+              @click="$emit('close')"
+              :aria-label="t('common.close') || 'Close'"
+            >
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </header>
+          <div class="p-5 overflow-y-auto">
+            <div v-if="loadError" class="card p-4 border-red-200 bg-red-50/50">
+              <p class="text-sm text-red-700">{{ loadError }}</p>
+            </div>
+            <ConceptDiffView
+              v-else
+              :old-concept="oldData"
+              :new-concept="newData"
+              :old-label="targetLabel || targetRegisterId"
+              :new-label="currentRegisterId"
+            />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+</style>

package/src/components/ConceptDiffView.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+/**
+ * ConceptDiffView — render a side-by-side diff between two concepts.
+ *
+ * Replaces the two orphan islands (ConceptDiffIsland,
+ * SupersessionDiffIsland). One component, driven by props:
+ *   - `oldConcept` / `newConcept` — wire shapes (ConceptLikeData)
+ *   - `lang` — which language's diff to render (default 'eng')
+ *
+ * The diff itself is computed by the parent (via useConceptDiff)
+ * and passed in as `diff`, OR computed here from the two concepts.
+ * The first form is preferred when the parent already has the diff
+ * cached; the second form is for one-shot comparisons.
+ */
+import { computed, watchEffect } from 'vue';
+import type { ConceptDiff } from 'glossarist/diff';
+import type { ConceptLikeData } from '../composables/use-concept-diff';
+import {
+  useConceptDiff,
+  deriveDiffSections,
+  computeSimilarity,
+} from '../composables/use-concept-diff';
+
+const props = withDefaults(defineProps<{
+  oldConcept: ConceptLikeData | null;
+  newConcept: ConceptLikeData | null;
+  lang?: string;
+  /** Optional precomputed diff (skips internal diffConcepts call). */
+  diff?: ConceptDiff | null;
+  /** Optional label for the comparison direction. */
+  oldLabel?: string;
+  newLabel?: string;
+}>(), {
+  lang: 'eng',
+  diff: null,
+  oldLabel: 'Previous',
+  newLabel: 'Current',
+});
+
+const internal = useConceptDiff();
+
+watchEffect(() => {
+  if (props.diff) {
+    internal.clear();
+    return;
+  }
+  if (props.oldConcept && props.newConcept) {
+    internal.diff(props.oldConcept, props.newConcept);
+  } else {
+    internal.clear();
+  }
+});
+
+const effectiveDiff = computed(() => props.diff ?? internal.diffResult.value);
+const sections = computed(() => deriveDiffSections(effectiveDiff.value, props.lang));
+const similarity = computed(() => computeSimilarity(effectiveDiff.value));
+const hasChanges = computed(() => effectiveDiff.value?.hasChanges === true);
+const loading = computed(() => internal.loading.value);
+const error = computed(() => internal.error.value);
+
+function similarityBarColor(score: number): string {
+  if (score >= 0.8) return 'bg-emerald-500';
+  if (score >= 0.5) return 'bg-amber-500';
+  return 'bg-red-500';
+}
+function similarityTextColor(score: number): string {
+  if (score >= 0.8) return 'text-emerald-600 dark:text-emerald-400';
+  if (score >= 0.5) return 'text-amber-600 dark:text-amber-400';
+  return 'text-red-600 dark:text-red-400';
+}
+</script>
+
+<template>
+  <div class="concept-diff-view space-y-4">
+    <header v-if="oldLabel || newLabel" class="flex items-center justify-between text-xs">
+      <span class="text-ink-400">{{ oldLabel }} → {{ newLabel }}</span>
+    </header>
+
+    <div v-if="error" class="card p-4 border-red-200 bg-red-50/50">
+      <p class="text-sm text-red-700">{{ error }}</p>
+    </div>
+
+    <div v-if="loading" class="text-center py-6 text-sm text-ink-400">Comparing…</div>
+
+    <template v-else-if="effectiveDiff">
+      <!-- Similarity score -->
+      <div v-if="similarity != null" class="flex items-center gap-3">
+        <span class="text-xs text-ink-400 w-20">Similarity</span>
+        <div class="flex-1 max-w-xs bg-ink-100 dark:bg-ink-800 rounded-full h-2.5 overflow-hidden">
+          <div
+            class="h-full rounded-full transition-all duration-300"
+            :class="similarityBarColor(similarity)"
+            :style="{ width: `${Math.round(similarity * 100)}%` }"
+          />
+        </div>
+        <span class="text-sm font-medium" :class="similarityTextColor(similarity)">
+          {{ Math.round(similarity * 100) }}%
+        </span>
+      </div>
+
+      <p v-if="!hasChanges" class="text-center py-4 text-sm text-ink-400 italic">
+        No differences between these versions.
+      </p>
+
+      <!-- Definition -->
+      <section v-if="sections.definition" class="card p-4">
+        <h3 class="text-xs font-semibold text-ink-400 uppercase tracking-wider mb-2">Definition</h3>
+        <div class="font-mono text-xs leading-relaxed">
+          <template v-if="sections.definition.hunks">
+            <span
+              v-for="(hunk, i) in sections.definition.hunks"
+              :key="i"
+              :class="{
+                'bg-emerald-100/70 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300': hunk.type === 'added',
+                'bg-red-100/70 dark:bg-red-900/20 text-red-700 dark:text-red-300 line-through': hunk.type === 'removed',
+                'text-ink-500': hunk.type === 'equal',
+              }"
+              dir="auto"
+            >{{ hunk.text }} </span>
+          </template>
+          <span v-else-if="sections.definition.type === 'added'" class="text-emerald-600 dark:text-emerald-400" dir="auto">
+            {{ sections.definition.value }}
+          </span>
+          <span v-else-if="sections.definition.type === 'removed'" class="text-red-500 dark:text-red-400 line-through" dir="auto">
+            {{ sections.definition.value }}
+          </span>
+        </div>
+      </section>
+
+      <!-- Designations -->
+      <section v-if="sections.designations?.items?.length" class="card p-4">
+        <h3 class="text-xs font-semibold text-ink-400 uppercase tracking-wider mb-2">Designations</h3>
+        <div class="space-y-1">
+          <div
+            v-for="(item, i) in sections.designations.items"
+            :key="i"
+            class="flex items-baseline gap-2 text-sm"
+          >
+            <span
+              :class="{
+                'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300': item.type === 'added',
+                'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300': item.type === 'removed',
+              }"
+              class="text-xs px-1.5 py-0.5 rounded font-medium"
+            >{{ item.type ?? 'same' }}</span>
+            <span :class="{ 'line-through opacity-60': item.type === 'removed' }" dir="auto">{{ item.text }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- Notes -->
+      <section v-if="sections.notes?.items?.length" class="card p-4">
+        <h3 class="text-xs font-semibold text-ink-400 uppercase tracking-wider mb-2">Notes</h3>
+        <div class="space-y-1">
+          <div
+            v-for="(item, i) in sections.notes.items"
+            :key="i"
+            class="text-sm flex items-baseline gap-2"
+          >
+            <span
+              class="text-xs px-1.5 py-0.5 rounded"
+              :class="item.type === 'added' ? 'bg-emerald-100 text-emerald-600' : 'bg-red-100 text-red-600'"
+            >{{ item.type }}</span>
+            <span :class="{ 'line-through opacity-60': item.type === 'removed' }" dir="auto">{{ item.text }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- Examples -->
+      <section v-if="sections.examples?.items?.length" class="card p-4">
+        <h3 class="text-xs font-semibold text-ink-400 uppercase tracking-wider mb-2">Examples</h3>
+        <div class="space-y-1">
+          <div
+            v-for="(item, i) in sections.examples.items"
+            :key="i"
+            class="text-sm flex items-baseline gap-2"
+          >
+            <span
+              class="text-xs px-1.5 py-0.5 rounded"
+              :class="item.type === 'added' ? 'bg-emerald-100 text-emerald-600' : 'bg-red-100 text-red-600'"
+            >{{ item.type }}</span>
+            <span :class="{ 'line-through opacity-60': item.type === 'removed' }" dir="auto">{{ item.text }}</span>
+          </div>
+        </div>
+      </section>
+    </template>
+
+    <div v-else class="text-center py-6 text-sm text-ink-400">
+      Select an edition to compare.
+    </div>
+  </div>
+</template>

package/src/components/ConceptEditionRail.vue

@@ -23,6 +23,10 @@ const props = defineProps<{
   conceptId: string;
 }>();
 
+const emit = defineEmits<{
+  (e: 'compare', target: { registerId: string; conceptId: string; label: string }): void;
+}>();
+
 const store = useVocabularyStore();
 const router = useRouter();
 
@@ -148,6 +152,15 @@ function navigate(entry: EditionEntry) {
   });
 }
 
+function compare(entry: EditionEntry) {
+  if (entry.edgeType === 'self') return;
+  emit('compare', {
+    registerId: entry.member.id,
+    conceptId: entry.conceptId,
+    label: entry.member.ref || entry.member.id,
+  });
+}
+
 function edgeLabel(entry: EditionEntry): string {
   switch (entry.edgeType) {
     case 'supersedes':     return t('edge.supersedes');
@@ -163,49 +176,61 @@ function edgeLabel(entry: EditionEntry): string {
     <div class="mt-1 text-xs text-ink-400 italic">{{ series.title }}</div>
 
     <div class="mt-3 space-y-1">
-      <button
+      <div
         v-for="entry in editionChain"
         :key="entry.conceptUri"
-        type="button"
-        class="concept-link block w-full text-left rounded-md px-1.5 py-1.5 transition-colors"
+        class="rounded-md transition-colors group"
         :class="entry.edgeType === 'self'
           ? 'bg-blue-50 dark:bg-blue-900/20'
           : 'hover:bg-ink-50 dark:hover:bg-ink-700/40'"
-        :disabled="entry.edgeType === 'self'"
-        @click="navigate(entry)"
       >
-        <div class="flex items-center gap-1 mb-0.5">
-          <span
-            v-if="entry.isCurrentEdition"
-            class="badge text-[9px] flex-shrink-0"
-            :class="entry.edgeType === 'self' ? 'badge-blue' : 'badge-gray'"
-            style="background: rgba(184, 147, 90, 0.18); color: #8C6A3A; border: 1px solid rgba(184, 147, 90, 0.35);"
-            :title="t('concept.currentEdition')"
-          >✦ {{ t('concept.currentEdition') }}</span>
-          <span
-            v-if="entry.edgeType !== 'self'"
-            class="badge text-[9px] flex-shrink-0 badge-gray"
-          >{{ edgeLabel(entry) }}</span>
-          <span
-            v-if="entry.edgeType === 'self'"
-            class="badge text-[9px] flex-shrink-0 badge-blue"
-          >{{ t('concept.viewing') }}</span>
-        </div>
-        <div class="flex items-baseline gap-2">
-          <span class="font-mono text-xs text-ink-500 dark:text-ink-400 flex-shrink-0">
-            {{ entry.member.year ?? '—' }}
-          </span>
-          <span class="text-sm text-ink-700 dark:text-ink-200 leading-snug truncate">
-            {{ entry.member.ref }}
-          </span>
-        </div>
-        <div
-          v-if="entry.edgeType !== 'self' || entry.conceptId !== props.conceptId"
-          class="font-mono text-[10px] text-ink-300 dark:text-ink-500 mt-0.5 leading-tight"
+        <button
+          type="button"
+          class="concept-link block w-full text-left px-1.5 py-1.5"
+          :disabled="entry.edgeType === 'self'"
+          @click="navigate(entry)"
         >
-          {{ entry.member.id }} · {{ entry.conceptId }}
-        </div>
-      </button>
+          <div class="flex items-center gap-1 mb-0.5">
+            <span
+              v-if="entry.isCurrentEdition"
+              class="badge text-[9px] flex-shrink-0"
+              :class="entry.edgeType === 'self' ? 'badge-blue' : 'badge-gray'"
+              style="background: rgba(184, 147, 90, 0.18); color: #8C6A3A; border: 1px solid rgba(184, 147, 90, 0.35);"
+              :title="t('concept.currentEdition')"
+            >✦ {{ t('concept.currentEdition') }}</span>
+            <span
+              v-if="entry.edgeType !== 'self'"
+              class="badge text-[9px] flex-shrink-0 badge-gray"
+            >{{ edgeLabel(entry) }}</span>
+            <span
+              v-if="entry.edgeType === 'self'"
+              class="badge text-[9px] flex-shrink-0 badge-blue"
+            >{{ t('concept.viewing') }}</span>
+          </div>
+          <div class="flex items-baseline gap-2">
+            <span class="font-mono text-xs text-ink-500 dark:text-ink-400 flex-shrink-0">
+              {{ entry.member.year ?? '—' }}
+            </span>
+            <span class="text-sm text-ink-700 dark:text-ink-200 leading-snug truncate">
+              {{ entry.member.ref }}
+            </span>
+          </div>
+          <div
+            v-if="entry.edgeType !== 'self' || entry.conceptId !== props.conceptId"
+            class="font-mono text-[10px] text-ink-300 dark:text-ink-500 mt-0.5 leading-tight"
+          >
+            {{ entry.member.id }} · {{ entry.conceptId }}
+          </div>
+        </button>
+        <button
+          v-if="entry.edgeType !== 'self'"
+          type="button"
+          class="block w-full text-left px-1.5 pb-1.5 text-[10px] text-blue-600 dark:text-blue-400 hover:underline opacity-0 group-hover:opacity-100 transition-opacity"
+          @click="compare(entry)"
+        >
+          ⟷ {{ t('concept.compareWith') || 'Compare with this edition' }}
+        </button>
+      </div>
     </div>
 
     <div v-if="!hasChain" class="mt-3 pt-3 border-t border-ink-100/60 dark:border-ink-700/40">