@glossarist/concept-browser 0.7.51 → 0.7.52

package/src/adapters/DatasetAdapter.ts

@@ -12,6 +12,12 @@ import type {
 import type { Concept } from 'glossarist';
 import { conceptFromJson } from './model-bridge';
 import { GraphDataSource } from './GraphDataSource';
+import {
+  ChunkLoadError,
+  ConceptNotFoundError,
+  IndexLoadError,
+  ManifestLoadError,
+} from '../errors';
 
 // ── Wire-format types for JSON responses ────────────────────────────────────
 
@@ -82,7 +88,7 @@ export class DatasetAdapter {
   async loadManifest(): Promise<Manifest> {
     if (this.manifestComplete && this.manifest) return this.manifest;
     const resp = await fetch(`${this.baseUrl}/manifest.json`);
-    if (!resp.ok) throw new Error(`Failed to load manifest for ${this.registerId}: ${resp.status}`);
+    if (!resp.ok) throw ManifestLoadError.make(this.registerId, resp.status);
     this.manifest = (await resp.json()) as Manifest;
     this.manifestComplete = true;
     return this.manifest;
@@ -97,7 +103,7 @@ export class DatasetAdapter {
     }
 
     const resp = await fetch(`${this.baseUrl}/index.json`);
-    if (!resp.ok) throw new Error(`Failed to load index for ${this.registerId}: ${resp.status}`);
+    if (!resp.ok) throw IndexLoadError.make(this.registerId, resp.status);
     const data = await resp.json();
 
     // Handle both old format (with eng/status fields) and new format (with designations map)
@@ -150,7 +156,7 @@ export class DatasetAdapter {
       meta = await metaResp.json();
     } else {
       const resp = await fetch(`${this.baseUrl}/index.json`);
-      if (!resp.ok) throw new Error(`Failed to load index for ${this.registerId}`);
+      if (!resp.ok) throw IndexLoadError.make(this.registerId, resp.status);
       const data = await resp.json();
       this.index = this.normalizeIndex(data as IndexJson);
       this.buildSummaryIndex();
@@ -180,7 +186,7 @@ export class DatasetAdapter {
     if (this.loadedChunks.has(chunkIndex)) return [];
     const chunkFile = `index-${String(chunkIndex).padStart(4, '0')}.json`;
     const resp = await fetch(`${this.baseUrl}/chunks/${chunkFile}`);
-    if (!resp.ok) throw new Error(`Failed to load chunk ${chunkIndex} for ${this.registerId}`);
+    if (!resp.ok) throw ChunkLoadError.make(this.registerId, chunkIndex, resp.status);
     const data = await resp.json();
     this.loadedChunks.add(chunkIndex);
     return data.concepts as ConceptEntry[];
@@ -255,7 +261,7 @@ export class DatasetAdapter {
     }
 
     const resp = await fetch(`${this.baseUrl}/concepts/${conceptId}.json`);
-    if (!resp.ok) throw new Error(`Concept ${conceptId} not found in ${this.registerId}`);
+    if (!resp.ok) throw ConceptNotFoundError.make(this.registerId, conceptId);
     const json = await resp.json();
     const concept = conceptFromJson(json);
     this.conceptCache.set(conceptId, concept);

package/src/adapters/GraphDataSource.ts

@@ -4,6 +4,7 @@ import type { DatasetAdapter } from './DatasetAdapter';
 import { UriRouter } from './UriRouter';
 import { slugify } from '../utils/slugify';
 import { toSectionNode, toSectionTree } from '../utils/section-tree';
+import { ConceptIdentity } from './concept-identity';
 
 interface DomainNodeJson {
   uri?: string;
@@ -23,7 +24,7 @@ function resolveRefTarget(rc: RelatedConcept, uriBase: string, registerId: strin
     if (ref.source && !ref.source.startsWith('http')) {
       reg = urnMap?.get(ref.source) ?? ref.source;
     }
-    return `${uriBase}/${reg}/concept/${ref.id}`;
+    return new ConceptIdentity(ref.id, reg, uriBase).uri;
   }
   if (ref.source && ref.source.startsWith('http')) return ref.source;
   return ref.source || '';

package/src/adapters/UriRouter.ts

@@ -1,4 +1,5 @@
 import type { Manifest } from './types';
+import { ConceptIdentity } from './concept-identity';
 
 // ── URI pattern matching ────────────────────────────────────────────────────
 
@@ -104,7 +105,7 @@ export class UriRouter {
   buildUri(registerId: string, conceptId: string): string {
     const info = this.registerMap.get(registerId);
     const uriBase = info?.uriBase ?? '';
-    return `${uriBase}/${registerId}/concept/${conceptId}`;
+    return new ConceptIdentity(conceptId, registerId, uriBase).uri;
   }
 
   getRegisteredIds(): string[] {

package/src/adapters/concept-identity.ts

@@ -0,0 +1,69 @@
+import { InvalidConceptIdentityError, InvalidConceptUriError } from '../errors';
+
+export interface ConceptIdentityParts {
+  readonly localId: string;
+  readonly registerId: string;
+  readonly uriBase: string;
+}
+
+const CONCEPT_URI_RE = /^(.+)\/([^/]+)\/concept\/(.+)$/;
+
+export class ConceptIdentity implements ConceptIdentityParts {
+  private readonly _uri: string;
+  private readonly _slug: string;
+  private readonly _path: string;
+
+  constructor(
+    public readonly localId: string,
+    public readonly registerId: string,
+    public readonly uriBase: string,
+  ) {
+    if (!localId || !registerId || !uriBase) {
+      throw new InvalidConceptIdentityError(
+        'ConceptIdentity requires non-empty localId, registerId, and uriBase',
+        { localId, registerId, uriBase },
+      );
+    }
+    this._uri = `${uriBase}/${registerId}/concept/${localId}`;
+    this._slug = localId;
+    this._path = `${registerId}/concepts/${localId}`;
+  }
+
+  get uri(): string { return this._uri; }
+  get slug(): string { return this._slug; }
+  get path(): string { return this._path; }
+
+  equals(other: ConceptIdentity): boolean {
+    return this._uri === other._uri;
+  }
+
+  toString(): string { return this._uri; }
+
+  toJSON(): ConceptIdentityParts {
+    return { localId: this.localId, registerId: this.registerId, uriBase: this.uriBase };
+  }
+
+  localizationUri(lang: string): string {
+    return `${this._uri}/${lang}`;
+  }
+
+  designationUri(lang: string, slug: string): string {
+    return `${this._uri}/${lang}/desig/${slug}`;
+  }
+
+  domainUri(domainSlug: string): string {
+    return `${this.uriBase}/${this.registerId}/domain/${domainSlug}`;
+  }
+
+  static fromUri(uri: string): ConceptIdentity {
+    const m = uri.match(CONCEPT_URI_RE);
+    if (!m) {
+      throw InvalidConceptUriError.make(uri);
+    }
+    return new ConceptIdentity(m[3], m[2], m[1]);
+  }
+
+  static isConceptUri(uri: string): boolean {
+    return CONCEPT_URI_RE.test(uri);
+  }
+}

package/src/adapters/factory.ts

@@ -5,6 +5,7 @@ import { ReferenceResolver } from './ReferenceResolver';
 import { UriRouter } from './UriRouter';
 import { NonVerbalEntityResolver } from './non-verbal-resolver';
 import { BibliographyAdapter } from './bibliography-adapter';
+import { DatasetRegistryLoadError, UnknownDatasetError } from '../errors';
 
 export class AdapterFactory {
   private adapters = new Map<string, DatasetAdapter>();
@@ -36,7 +37,7 @@ export class AdapterFactory {
       registry = JSON.parse(inline.textContent) as DatasetRegistry[];
     } else {
       const resp = await fetch(datasetsUrl);
-      if (!resp.ok) throw new Error(`Failed to load dataset registry: ${resp.status}`);
+      if (!resp.ok) throw DatasetRegistryLoadError.make(resp.status, datasetsUrl);
       registry = await resp.json() as DatasetRegistry[];
     }
 
@@ -132,7 +133,7 @@ export class AdapterFactory {
 
   async loadDataset(registerId: string): Promise<DatasetAdapter> {
     const adapter = this.adapters.get(registerId);
-    if (!adapter) throw new Error(`Unknown dataset: ${registerId}`);
+    if (!adapter) throw UnknownDatasetError.make(registerId);
 
     const manifest = await adapter.loadManifest();
     await adapter.loadIndex();

package/src/adapters/model-bridge.ts

@@ -36,6 +36,7 @@ import {
   GRAMMAR_PARTS_OF_SPEECH,
 } from 'glossarist/models';
 import type { ConceptSummary } from './types';
+import { ConceptIdentity } from './concept-identity';
 
 // ── JSON-LD wire-format types ─────────────────────────────────────────────
 
@@ -634,5 +635,5 @@ export function conceptToSummary(concept: Concept): ConceptSummary {
 
 export function conceptUri(concept: Concept, registerId: string, uriBase: string): string {
   if (concept.uri) return concept.uri;
-  return `${uriBase}/${registerId}/concept/${concept.id}`;
+  return new ConceptIdentity(concept.id, registerId, uriBase).uri;
 }

package/src/adapters/non-verbal/glossarist-augment.d.ts

@@ -91,6 +91,13 @@ declare module 'glossarist' {
     static register(type: string, cls: typeof NonVerbalReference): void;
   }
 
+  interface NonVerbRep {
+    readonly caption: string | null;
+    readonly description: string | null;
+    readonly alt: string | null;
+    readonly images: FigureImage[];
+  }
+
   class FigureReference extends NonVerbalReference {
     static fromJSON(data: Record<string, unknown> | string): FigureReference;
   }

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

@@ -19,6 +19,7 @@ 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 { NonVerbalKind } from './non-verbal/types';
 export type { NonVerbalEntity } from 'glossarist';
@@ -54,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>