@glossarist/concept-browser 0.7.50 → 0.7.52

package/src/adapters/non-verbal-resolver.ts

@@ -15,11 +15,14 @@
  * exactly one instance per app.
  */
 
-import type { NonVerbalEntity, NonVerbalKind } from './non-verbal/types';
+import type { NonVerbalKind } from './non-verbal/types';
+import type { NonVerbalEntity } from 'glossarist';
 import { KIND_TO_DIR, KIND_TO_BRIDGE } from './non-verbal/kind';
 import { anchorId } from '../utils/non-verbal-anchor';
+import { NonVerbalEntityNotFoundError } from '../errors';
 
-export type { NonVerbalEntity, NonVerbalKind } from './non-verbal/types';
+export type { NonVerbalKind } from './non-verbal/types';
+export type { NonVerbalEntity } from 'glossarist';
 
 export interface NonVerbalEntityResolverOptions {
   basePath?: string;
@@ -52,7 +55,7 @@ export class NonVerbalEntityResolver {
       const resp = await this.fetcher(url);
       if (resp.status === 404) return null;
       if (!resp.ok) {
-        throw new Error(`Failed to load ${kind} ${entityId} from ${datasetId}: ${resp.status}`);
+        throw NonVerbalEntityNotFoundError.make(datasetId, kind, entityId, resp.status);
       }
       const doc = (await resp.json()) as Record<string, unknown>;
       const entity = KIND_TO_BRIDGE[kind](doc);

package/src/components/AppSidebar.vue

@@ -12,6 +12,10 @@ import { toSectionTree } from '../utils/section-tree';
 import { formatSectionLabel, sectionName as sectionLocalized } from '../utils/section-display';
 
 const OntologySidebarSection = defineAsyncComponent(() => import('./OntologySidebarSection.vue'));
+import { resolveGroupKind } from '../config/group-types';
+import type { DatasetGroupKind } from '../config/types';
+import { useDatasetSeries } from '../composables/useDatasetSeries';
+const useDatasetSeriesRef = () => useDatasetSeries().series;
 
 const store = useVocabularyStore();
 const ui = useUiStore();
@@ -28,12 +32,13 @@ const isOntologyRoute = computed(() =>
 );
 
 const datasetEntries = computed(() => {
-  const entries: { id: string; title: string; loaded: boolean; conceptCount: number }[] = [];
+  const entries: { id: string; title: string; ref?: string; loaded: boolean; conceptCount: number }[] = [];
   for (const [id, adapter] of store.datasets) {
     const m = store.manifests.get(id);
     entries.push({
       id,
       title: m?.title ?? id.toUpperCase(),
+      ref: m?.ref,
       loaded: !!m,
       conceptCount: m?.conceptCount ?? 0,
     });
@@ -49,8 +54,9 @@ interface SidebarGroup {
   id: string;
   label: string;
   description?: string;
-  color?: string;
-  entries: { id: string; title: string; loaded: boolean; conceptCount: number }[];
+  color?: string | { light: string; dark: string };
+  kind: DatasetGroupKind;
+  entries: { id: string; title: string; ref?: string; loaded: boolean; conceptCount: number; year?: number; status?: string; isCurrent?: boolean }[];
 }
 
 const groupedDatasetEntries = computed<SidebarGroup[]>(() => {
@@ -61,10 +67,29 @@ const groupedDatasetEntries = computed<SidebarGroup[]>(() => {
   const assigned = new Set<string>();
   const result: SidebarGroup[] = [];
 
+  /* Build a quick lookup of series metadata (year, status) from manifests */
+  const seriesMeta = new Map<string, { year?: number; status?: string; isCurrent?: boolean }>();
+  for (const s of seriesList.value) {
+    for (const m of s.members) {
+      seriesMeta.set(m.id, { year: m.year, status: m.status, isCurrent: m.isCurrent });
+    }
+  }
+
   for (const g of groups) {
+    const kind = resolveGroupKind(g);
     const entries = g.datasets
-      .map(id => entryMap.get(id))
-      .filter((e): e is typeof entryMap extends Map<string, infer V> ? V : never => !!e);
+      .map(id => {
+        const e = entryMap.get(id);
+        if (!e) return null;
+        const meta = seriesMeta.get(id);
+        return {
+          ...e,
+          year: meta?.year,
+          status: meta?.status,
+          isCurrent: meta?.isCurrent,
+        };
+      })
+      .filter((e): e is NonNullable<typeof e> => e !== null);
     for (const e of entries) assigned.add(e.id);
     const trLabel = g.translations?.[locale.value]?.label;
     result.push({
@@ -72,18 +97,22 @@ const groupedDatasetEntries = computed<SidebarGroup[]>(() => {
       label: trLabel || g.label,
       description: g.description,
       color: g.color,
+      kind,
       entries,
     });
   }
 
   const ungrouped = datasetEntries.value.filter(e => !assigned.has(e.id));
   if (ungrouped.length) {
-    result.push({ id: '__ungrouped__', label: '', entries: ungrouped });
+    result.push({ id: '__ungrouped__', label: '', kind: 'default', entries: ungrouped });
   }
 
   return result;
 });
 
+/* Auto-derive series list from useDatasetSeries — used to enrich entries */
+const seriesList = useDatasetSeriesRef();
+
 const collapsedGroups = ref<Set<string>>(new Set());
 
 function toggleGroup(groupId: string) {
@@ -246,110 +275,140 @@ const activeSectionId = computed(() => {
           <button
             v-if="group.label"
             @click="toggleGroup(group.id)"
-            class="sidebar-group-label w-full flex items-start gap-1.5 px-2 py-1.5 rounded-lg text-xs font-semibold transition-colors hover:bg-ink-50"
-            :style="group.color ? { color: group.color } : {}"
+            class="sidebar-group-label w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs font-semibold transition-colors hover:bg-ink-50 dark:hover:bg-ink-700/60"
           >
-            <span class="w-3 text-[10px] mt-0.5 flex-shrink-0">{{ isGroupExpanded(group.id) ? '▾' : '▸' }}</span>
-            <span class="flex-1 text-left leading-snug">{{ group.label }}</span>
+            <span class="w-3 text-[10px] mt-0.5 flex-shrink-0 text-ink-300 dark:text-ink-400">{{ isGroupExpanded(group.id) ? '▾' : '▸' }}</span>
+            <span class="flex-1 text-left leading-snug text-ink-700 dark:text-ink-200 font-serif">{{ group.label }}</span>
           </button>
 
           <!-- Group entries -->
           <div v-if="isGroupExpanded(group.id)" class="space-y-1" :class="group.label ? 'ml-1' : ''">
-            <div
-              v-for="ds in group.entries"
-              :key="ds.id"
-              class="rounded-lg transition-all duration-150"
-              :class="currentDataset === ds.id ? 'bg-surface' : ''"
-            >
-              <button
-                @click="goToDataset(ds.id)"
-                class="w-full text-left px-3 py-2 rounded-lg text-sm border-l-2"
-                :class="[
-                  currentDataset === ds.id
-                    ? 'text-ink-800'
-                    : 'border-transparent text-ink-600 hover:bg-ink-50 hover:text-ink-800'
-                ]"
-                :style="currentDataset === ds.id ? { borderLeftColor: getColor(ds.id), borderLeftWidth: '2px' } : {}"
+            <!-- LINEAGE series: timeline-style entries -->
+            <template v-if="group.kind === 'lineage'">
+              <div class="series-timeline">
+                <button
+                  v-for="ds in group.entries"
+                  :key="ds.id"
+                  @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>
+              </div>
+            </template>
+
+            <!-- REGULAR group: original entry style with expansion -->
+            <template v-else>
+              <div
+                v-for="ds in group.entries"
+                :key="ds.id"
+                class="rounded-lg transition-all duration-150"
+                :class="currentDataset === ds.id ? 'bg-surface' : ''"
               >
-                <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' : 'text-ink-300'">
-                  {{ ds.conceptCount.toLocaleString() }} {{ t('home.concepts').toLowerCase() }}
-                </div>
-              </button>
+                <button
+                  @click="goToDataset(ds.id)"
+                  class="w-full text-left px-3 py-2 rounded-lg text-sm border-l-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="currentDataset === ds.id ? { borderLeftColor: getColor(ds.id), borderLeftWidth: '2px' } : {}"
+                >
+                  <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>
+                </button>
 
-              <!-- Expanded dataset: sub-pages + provenance -->
-              <div v-if="currentDataset === ds.id && (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"
-                    :key="page.route || 'concepts'"
-                    :to="pageRoute(page)"
-                    class="btn-ghost w-full text-left flex items-center gap-2 text-sm"
-                    :class="isActive(page) ? 'active' : ''"
-                    @click="closeMobile"
-                  >
-                    <NavIcon :name="page.icon" />
-                    {{ navTitle(page) }}
-                  </router-link>
-                </nav>
-
-                <!-- Sections tree -->
-                <div v-if="getDatasetSections(ds.id).length" class="mt-2 pt-2 border-t border-ink-100/60">
-                  <button @click="toggleSectionNode(ds.id + '-sections')"
-                    class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors"
-                  >
-                    <span class="w-3 text-[10px]">{{ expandedSectionNodes.has(ds.id + '-sections') ? '▾' : '▸' }}</span>
-                    <span class="flex-1 text-left">{{ t('nav.sections') }}</span>
-                    <span class="badge text-[9px] bg-amber-50 text-amber-600 px-1 py-0.5">{{ getDatasetSections(ds.id).length }}</span>
-                  </button>
-                  <div v-if="expandedSectionNodes.has(ds.id + '-sections')" class="mt-0.5 max-h-64 overflow-y-auto">
-                    <button
-                      @click="clearSectionFilter()"
-                      class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
-                      :class="!activeSectionId ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
+                <!-- Expanded dataset: sub-pages + sections + provenance -->
+                <div v-if="currentDataset === ds.id && (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"
+                      :key="page.route || 'concepts'"
+                      :to="pageRoute(page)"
+                      class="btn-ghost w-full text-left flex items-center gap-2 text-sm"
+                      :class="isActive(page) ? 'active' : ''"
+                      @click="closeMobile"
                     >
-                      <span class="w-3 text-ink-200">&#183;</span>
-                      <span class="flex-1 text-left">{{ t('dataset.all') }}</span>
+                      <NavIcon :name="page.icon" />
+                      {{ navTitle(page) }}
+                    </router-link>
+                  </nav>
+
+                  <!-- Sections tree -->
+                  <div v-if="getDatasetSections(ds.id).length" class="mt-2 pt-2 border-t border-ink-100/60">
+                    <button @click="toggleSectionNode(ds.id + '-sections')"
+                      class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors"
+                    >
+                      <span class="w-3 text-[10px]">{{ expandedSectionNodes.has(ds.id + '-sections') ? '▾' : '▸' }}</span>
+                      <span class="flex-1 text-left">{{ t('nav.sections') }}</span>
+                      <span class="badge text-[9px] bg-amber-50 text-amber-600 px-1 py-0.5">{{ getDatasetSections(ds.id).length }}</span>
                     </button>
-                    <template v-for="section in getDatasetSections(ds.id)" :key="section.id">
-                      <button @click="goToSection(ds.id, 'section-' + section.id)"
+                    <div v-if="expandedSectionNodes.has(ds.id + '-sections')" class="mt-0.5 max-h-64 overflow-y-auto">
+                      <button
+                        @click="clearSectionFilter()"
                         class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
-                        :class="activeSectionId === 'section-' + section.id ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
+                        :class="!activeSectionId ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
                       >
-                        <span v-if="section.children?.length" class="text-[10px] text-ink-300 w-3 cursor-pointer" @click.stop="toggleSectionNode(ds.id + '-s-' + section.id)">{{ expandedSectionNodes.has(ds.id + '-s-' + section.id) ? '▾' : '▸' }}</span>
-                        <span v-else class="w-3 text-ink-200">&#183;</span>
-                        <span class="flex-1 text-left truncate">{{ sectionDisplay(section) }}</span>
+                        <span class="w-3 text-ink-200">&#183;</span>
+                        <span class="flex-1 text-left">{{ t('dataset.all') }}</span>
                       </button>
-                      <div v-if="section.children?.length && expandedSectionNodes.has(ds.id + '-s-' + section.id)" class="ml-3">
-                        <button v-for="child in section.children" :key="child.id"
-                          @click="goToSection(ds.id, 'section-' + child.id)"
+                      <template v-for="section in getDatasetSections(ds.id)" :key="section.id">
+                        <button @click="goToSection(ds.id, 'section-' + section.id)"
                           class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
-                          :class="activeSectionId === 'section-' + child.id ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+                          :class="activeSectionId === 'section-' + section.id ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
                         >
-                          <span class="w-3 text-ink-200">&#183;</span>
-                          <span class="flex-1 text-left truncate">{{ sectionDisplay(child) }}</span>
+                          <span v-if="section.children?.length" class="text-[10px] text-ink-300 w-3 cursor-pointer" @click.stop="toggleSectionNode(ds.id + '-s-' + section.id)">{{ expandedSectionNodes.has(ds.id + '-s-' + section.id) ? '▾' : '▸' }}</span>
+                          <span v-else class="w-3 text-ink-200">&#183;</span>
+                          <span class="flex-1 text-left truncate">{{ sectionDisplay(section) }}</span>
                         </button>
-                      </div>
-                    </template>
-                  </div>
-                </div>
-                <div v-if="provenance.owner" class="mt-3 pt-3 border-t border-ink-100/60">
-                  <div class="text-[11px] text-ink-300 space-y-1.5 px-1">
-                    <div v-if="provenance.ref" class="text-xs font-semibold text-ink-700">
-                      {{ provenance.ref }}
+                        <div v-if="section.children?.length && expandedSectionNodes.has(ds.id + '-s-' + section.id)" class="ml-3">
+                          <button v-for="child in section.children" :key="child.id"
+                            @click="goToSection(ds.id, 'section-' + child.id)"
+                            class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                            :class="activeSectionId === 'section-' + child.id ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+                          >
+                            <span class="w-3 text-ink-200">&#183;</span>
+                            <span class="flex-1 text-left truncate">{{ sectionDisplay(child) }}</span>
+                          </button>
+                        </div>
+                      </template>
                     </div>
-                    <div class="flex items-center gap-1">
-                      <span class="text-ink-400">{{ t('sidebar.publishedBy') }}</span>
-                      <a v-if="provenance.ownerUrl" :href="provenance.ownerUrl" target="_blank" rel="noopener" class="concept-link font-medium">{{ provenance.owner }}</a>
-                      <span v-else class="text-ink-600 font-medium">{{ provenance.owner }}</span>
-                    </div>
-                    <div v-if="provenance.sourceRepo">
-                      <a :href="provenance.sourceRepo" target="_blank" rel="noopener" class="concept-link">{{ t('sidebar.viewSource') }}</a>
+                  </div>
+
+                  <div v-if="provenance.owner" class="mt-3 pt-3 border-t border-ink-100/60">
+                    <div class="text-[11px] text-ink-300 space-y-1.5 px-1">
+                      <div v-if="provenance.ref" class="text-xs font-semibold text-ink-700">
+                        {{ provenance.ref }}
+                      </div>
+                      <div class="flex items-center gap-1">
+                        <span class="text-ink-400">{{ t('sidebar.publishedBy') }}</span>
+                        <a v-if="provenance.ownerUrl" :href="provenance.ownerUrl" target="_blank" rel="noopener" class="concept-link font-medium">{{ provenance.owner }}</a>
+                        <span v-else class="text-ink-600 font-medium">{{ provenance.owner }}</span>
+                      </div>
+                      <div v-if="provenance.sourceRepo">
+                        <a :href="provenance.sourceRepo" target="_blank" rel="noopener" class="concept-link">{{ t('sidebar.viewSource') }}</a>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
+            </template>
           </div>
         </div>
       </template>
@@ -367,13 +426,13 @@ const activeSectionId = computed(() => {
             class="w-full text-left px-3 py-2.5 rounded-lg text-sm border-l-2"
             :class="[
               currentDataset === ds.id
-                ? 'text-ink-800'
-                : 'border-transparent text-ink-600 hover:bg-ink-50 hover:text-ink-800'
+                ? '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="currentDataset === ds.id ? { borderLeftColor: getColor(ds.id), borderLeftWidth: '2px' } : {}"
           >
             <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' : 'text-ink-300'">
+            <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>
           </button>
@@ -458,3 +517,40 @@ const activeSectionId = computed(() => {
     </div>
   </aside>
 </template>
+
+<style scoped>
+/* Series timeline entries — used when a dataset group has `series: true`.
+   Renders editions as compact year-tagged rows instead of the full dataset
+   entry, since within a series the year IS the identity. */
+.series-timeline {
+  position: relative;
+  padding-left: 0;
+  margin-top: 4px;
+}
+/* No vertical rail line — the star indicator is enough cue. */
+
+.series-entry {
+  position: relative;
+  /* All visual states (bg, text color, border) are inline Tailwind classes
+     so dark: variants apply with reliable specificity. */
+}
+
+/* Star (✦ U+2726, four-pointed) indicates ONE thing only: "is this the
+   current/newest valid edition?" Data property — never reflects viewing
+   state. Sits at the right edge of the entry so the ref text aligns to
+   the left consistently across current and non-current editions. */
+.current-star {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--gold-accent, #B8935A);
+  filter: drop-shadow(0 0 4px rgba(184, 147, 90, 0.45));
+}
+:global(.dark) .current-star {
+  color: var(--gold-accent, #D4AF6E);
+  filter: drop-shadow(0 0 4px rgba(212, 175, 110, 0.55));
+}
+
+</style>

package/src/components/ConceptDetail.vue

@@ -24,6 +24,7 @@ import { useSiteConfig } from '../config/use-site-config';
 import ConceptTimeline from './ConceptTimeline.vue';
 import ConceptRdfView from './ConceptRdfView.vue';
 import FormatDownloads from './FormatDownloads.vue';
+import ConceptEditionRail from './ConceptEditionRail.vue';
 import NonVerbalRepDisplay from './NonVerbalRepDisplay.vue';
 import NonVerbalList from './non-verbal/NonVerbalList.vue';
 import CitationDisplay from './CitationDisplay.vue';
@@ -554,6 +555,13 @@ const nonVerbalReps = computed(() => {
             </Transition>
           </div>
 
+          <!-- Edition series — supersession chain across vocabulary editions -->
+          <ConceptEditionRail
+            :concept-uri="conceptUri(props.concept, props.registerId, props.manifest.uriBase)"
+            :register-id="registerId"
+            :concept-id="conceptId"
+          />
+
           <!-- Domains -->
           <div v-if="conceptDomains.length" class="card p-5">
             <div class="section-label">{{ t('concept.domains') }}</div>

package/src/components/ConceptEditionRail.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+/**
+ * ConceptEditionRail — sidebar card showing a concept's supersession chain
+ * across vocabulary editions. Rendered INSIDE ConceptDetail's right sidebar
+ * (between Relations and other cards), styled identically to its neighbors.
+ *
+ * Reads `supersedes` edges from the graph engine and walks the full chain
+ * in both directions. Filter out malformed URIs that sometimes appear in
+ * stub-data scenarios.
+ */
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { useDatasetSeries, type DatasetSeriesMember } from '../composables/useDatasetSeries';
+import { useI18n } from '../i18n';
+import { UriRouter } from '../adapters/UriRouter';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  conceptUri: string;
+  registerId: string;
+  conceptId: string;
+}>();
+
+const store = useVocabularyStore();
+const router = useRouter();
+
+const { seriesForActive } = useDatasetSeries(() => props.registerId);
+const series = computed(() => seriesForActive.value);
+
+interface EditionEntry {
+  member: DatasetSeriesMember;
+  conceptUri: string;
+  conceptId: string;
+  edgeType: 'self' | 'supersedes' | 'superseded_by';
+  hops: number;
+  isCurrentEdition: boolean;  // newest valid edition in the series
+}
+
+/** Resolve a concept URI via the project's UriRouter SSOT. Returns null for
+ *  malformed or non-concept URIs (URN-form refs, external IRIs, stub data). */
+function parseStrict(uri: string): { registerId: string; conceptId: string } | null {
+  return UriRouter.parseUri(uri);
+}
+
+/** Bidirectional BFS through supersedes edges from the start URI. */
+function walkChain(startUri: string): Map<string, { type: 'supersedes' | 'superseded_by'; hops: number }> {
+  const out = new Map<string, { type: 'supersedes' | 'superseded_by'; hops: number }>();
+
+  /* Forward (concepts THIS supersedes — older editions it replaced) */
+  const forwardQueue: Array<{ uri: string; hops: number }> = [{ uri: startUri, hops: 0 }];
+  const forwardSeen = new Set<string>([startUri]);
+  while (forwardQueue.length > 0) {
+    const { uri, hops } = forwardQueue.shift()!;
+    for (const e of store.graph.getEdges(uri)) {
+      if (e.type === 'supersedes' && !forwardSeen.has(e.target)) {
+        forwardSeen.add(e.target);
+        out.set(e.target, { type: 'supersedes', hops: hops + 1 });
+        forwardQueue.push({ uri: e.target, hops: hops + 1 });
+      }
+    }
+  }
+
+  /* Backward (concepts that SUPERSEDED this — newer editions) */
+  const backwardQueue: Array<{ uri: string; hops: number }> = [{ uri: startUri, hops: 0 }];
+  const backwardSeen = new Set<string>([startUri]);
+  while (backwardQueue.length > 0) {
+    const { uri, hops } = backwardQueue.shift()!;
+    for (const e of store.graph.getIncomingEdges(uri)) {
+      if (e.type === 'supersedes' && !backwardSeen.has(e.source)) {
+        backwardSeen.add(e.source);
+        out.set(e.source, { type: 'superseded_by', hops: hops + 1 });
+        backwardQueue.push({ uri: e.source, hops: hops + 1 });
+      }
+    }
+  }
+
+  return out;
+}
+
+const editionChain = computed<EditionEntry[]>(() => {
+  const s = series.value;
+  const entries: EditionEntry[] = [];
+
+  /* Always include self — use props directly so we don't depend on URI parsing. */
+  const selfMember: DatasetSeriesMember = s?.members.find(m => m.id === props.registerId) ?? {
+    id: props.registerId,
+    ref: props.registerId,
+    year: undefined,
+    status: 'valid',
+    isCurrent: false,
+    isActive: true,
+    conceptCount: undefined,
+    registerId: props.registerId,
+  };
+  entries.push({
+    member: selfMember,
+    conceptUri: props.conceptUri,
+    conceptId: props.conceptId,
+    edgeType: 'self',
+    hops: 0,
+    isCurrentEdition: !!selfMember.isCurrent,
+  });
+
+  /* Walk the chain. Drop malformed URIs (no real concept id). */
+  const chain = walkChain(props.conceptUri);
+  for (const [uri, info] of chain) {
+    if (uri === props.conceptUri) continue;
+    const parsed = parseStrict(uri);
+    if (!parsed) continue;
+    if (entries.some(e => e.conceptUri === uri)) continue;
+
+    const member = s?.members.find(m => m.id === parsed.registerId) ?? {
+      id: parsed.registerId,
+      ref: parsed.registerId,
+      year: undefined,
+      status: 'unknown',
+      isCurrent: false,
+      isActive: false,
+      conceptCount: undefined,
+      registerId: parsed.registerId,
+    };
+
+    entries.push({
+      member,
+      conceptUri: uri,
+      conceptId: parsed.conceptId,
+      edgeType: info.type,
+      hops: info.hops,
+      isCurrentEdition: !!member.isCurrent,
+    });
+  }
+
+  /* Sort by year ascending (oldest first). */
+  entries.sort((a, b) => (a.member.year ?? 9999) - (b.member.year ?? 9999));
+
+  return entries;
+});
+
+const hasChain = computed(() => editionChain.value.length > 1);
+
+function navigate(entry: EditionEntry) {
+  if (entry.edgeType === 'self') return;
+  router.push({
+    name: 'concept',
+    params: { registerId: entry.member.id, conceptId: entry.conceptId },
+  });
+}
+
+function edgeLabel(entry: EditionEntry): string {
+  switch (entry.edgeType) {
+    case 'supersedes':     return t('edge.supersedes');
+    case 'superseded_by':  return t('edge.superseded_by');
+    default:               return '';
+  }
+}
+</script>
+
+<template>
+  <div v-if="series" class="card p-5">
+    <div class="section-label">{{ t('concept.editionSeries') }}</div>
+    <div class="mt-1 text-xs text-ink-400 italic">{{ series.title }}</div>
+
+    <div class="mt-3 space-y-1">
+      <button
+        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="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"
+        >
+          {{ entry.member.id }} · {{ entry.conceptId }}
+        </div>
+      </button>
+    </div>
+
+    <div v-if="!hasChain" class="mt-3 pt-3 border-t border-ink-100/60 dark:border-ink-700/40">
+      <div class="text-xs text-ink-400 italic">
+        {{ t('concept.noChain') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* No scoped styles — uses global `card`, `section-label`, `badge`, `concept-link` classes
+   to match the rest of ConceptDetail's sidebar. */
+</style>