@glossarist/concept-browser 0.7.52 → 0.7.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.7.52",
+  "version": "0.7.54",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {

package/src/App.vue

@@ -3,6 +3,7 @@ import { onMounted, onUnmounted, ref } from 'vue';
 import { useVocabularyStore } from './stores/vocabulary';
 import { useSiteConfig } from './config/use-site-config';
 import { useI18n } from './i18n';
+import { useColorTheme } from './composables/use-color-theme';
 import AppHeader from './components/AppHeader.vue';
 import AppSidebar from './components/AppSidebar.vue';
 import AppFooter from './components/AppFooter.vue';
@@ -10,6 +11,7 @@ import AppFooter from './components/AppFooter.vue';
 const store = useVocabularyStore();
 const { loadConfig, config } = useSiteConfig();
 const { initLocale } = useI18n();
+useColorTheme();
 const appReady = ref(false);
 const showScrollTop = ref(false);
 const mainRef = ref<HTMLElement | null>(null);

package/src/__tests__/config/group-renderers.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { GROUP_RENDERERS, groupRendererFor } from '../../config/group-renderers';
+import type { DatasetGroupKind } from '../../config/types';
+
+describe('GROUP_RENDERERS registry', () => {
+  it('has an entry for every DatasetGroupKind', () => {
+    const expected: DatasetGroupKind[] = ['lineage', 'topic', 'family', 'collection', 'default'];
+    for (const kind of expected) {
+      expect(GROUP_RENDERERS[kind], `missing ${kind}`).toBeDefined();
+      expect(GROUP_RENDERERS[kind].sidebar, `missing sidebar for ${kind}`).toBeDefined();
+    }
+  });
+
+  it('lineage uses a distinct sidebar component', () => {
+    expect(GROUP_RENDERERS.lineage.sidebar).not.toBe(GROUP_RENDERERS.default.sidebar);
+  });
+
+  it('topic, family, collection, default share the DefaultGroupSidebar', () => {
+    const defaultSidebar = GROUP_RENDERERS.default.sidebar;
+    expect(GROUP_RENDERERS.topic.sidebar).toBe(defaultSidebar);
+    expect(GROUP_RENDERERS.family.sidebar).toBe(defaultSidebar);
+    expect(GROUP_RENDERERS.collection.sidebar).toBe(defaultSidebar);
+  });
+});
+
+describe('groupRendererFor', () => {
+  it('returns the correct renderer for each kind', () => {
+    expect(groupRendererFor('lineage').kind).toBe('lineage');
+    expect(groupRendererFor('topic').kind).toBe('topic');
+  });
+
+  it('falls back to default for unknown kinds', () => {
+    expect(groupRendererFor('nonexistent' as DatasetGroupKind)).toBe(GROUP_RENDERERS.default);
+  });
+});

package/src/__tests__/config/group-types.test.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest';
+import { resolveGroupKind, groupTypeMeta, GROUP_TYPES } from '../../config/group-types';
+
+describe('resolveGroupKind', () => {
+  it('returns explicit kind when set', () => {
+    expect(resolveGroupKind({ kind: 'lineage' })).toBe('lineage');
+    expect(resolveGroupKind({ kind: 'topic' })).toBe('topic');
+    expect(resolveGroupKind({ kind: 'family' })).toBe('family');
+    expect(resolveGroupKind({ kind: 'collection' })).toBe('collection');
+    expect(resolveGroupKind({ kind: 'default' })).toBe('default');
+  });
+
+  it('returns lineage for legacy series: true', () => {
+    expect(resolveGroupKind({ series: true })).toBe('lineage');
+  });
+
+  it('returns default when neither kind nor series is set', () => {
+    expect(resolveGroupKind({})).toBe('default');
+  });
+
+  it('prefers explicit kind over legacy series flag', () => {
+    expect(resolveGroupKind({ kind: 'topic', series: true })).toBe('topic');
+  });
+});
+
+describe('groupTypeMeta', () => {
+  it('returns metadata for each kind', () => {
+    for (const kind of Object.keys(GROUP_TYPES) as Array<keyof typeof GROUP_TYPES>) {
+      const meta = groupTypeMeta({ kind });
+      expect(meta.kind).toBe(kind);
+      expect(meta.label).toBeTruthy();
+      expect(meta.description).toBeTruthy();
+      expect(meta.glyph).toBeTruthy();
+      expect(typeof meta.ordered).toBe('boolean');
+      expect(typeof meta.supersession).toBe('boolean');
+      expect(typeof meta.sameVocabulary).toBe('boolean');
+    }
+  });
+
+  it('lineage is ordered with supersession and same vocabulary', () => {
+    const meta = groupTypeMeta({ kind: 'lineage' });
+    expect(meta.ordered).toBe(true);
+    expect(meta.supersession).toBe(true);
+    expect(meta.sameVocabulary).toBe(true);
+  });
+
+  it('topic is not ordered and no supersession', () => {
+    const meta = groupTypeMeta({ kind: 'topic' });
+    expect(meta.ordered).toBe(false);
+    expect(meta.supersession).toBe(false);
+    expect(meta.sameVocabulary).toBe(false);
+  });
+
+  it('uses legacy series flag for backward compat', () => {
+    const meta = groupTypeMeta({ series: true });
+    expect(meta.kind).toBe('lineage');
+  });
+});
+
+describe('GROUP_TYPES registry', () => {
+  it('has an entry for every DatasetGroupKind', () => {
+    const expected = ['lineage', 'topic', 'family', 'collection', 'default'];
+    for (const kind of expected) {
+      expect(GROUP_TYPES).toHaveProperty(kind);
+    }
+  });
+
+  it('every entry has all required fields', () => {
+    for (const [key, meta] of Object.entries(GROUP_TYPES)) {
+      expect(meta.kind, `${key}.kind`).toBe(key);
+      expect(meta.label, `${key}.label`).toBeTruthy();
+      expect(meta.description, `${key}.description`).toBeTruthy();
+      expect(meta.glyph, `${key}.glyph`).toBeTruthy();
+    }
+  });
+});

package/src/components/AppSidebar.vue

@@ -283,132 +283,128 @@ const activeSectionId = computed(() => {
 
           <!-- Group entries -->
           <div v-if="isGroupExpanded(group.id)" class="space-y-1" :class="group.label ? 'ml-1' : ''">
-            <!-- 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' : ''"
+            <!-- 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)' } : {}"
               >
-                <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>
+                <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>
 
-                <!-- 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"
-                    >
-                      <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"
+              <!-- 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"
+                :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>
+
+              <!-- 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">
+                <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'"
                     >
-                      <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>
+                      <span class="w-3 text-ink-200">&#183;</span>
+                      <span class="flex-1 text-left">{{ t('dataset.all') }}</span>
                     </button>
-                    <div v-if="expandedSectionNodes.has(ds.id + '-sections')" class="mt-0.5 max-h-64 overflow-y-auto">
-                      <button
-                        @click="clearSectionFilter()"
+                    <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 ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 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">{{ t('dataset.all') }}</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>
-                      <template v-for="section in getDatasetSections(ds.id)" :key="section.id">
-                        <button @click="goToSection(ds.id, 'section-' + section.id)"
+                      <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-' + section.id ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
+                          :class="activeSectionId === 'section-' + child.id ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 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 truncate">{{ sectionDisplay(child) }}</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)"
-                            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>
+                    </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>
-                      <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>
-            </template>
+            </div>
           </div>
         </div>
       </template>

package/src/components/groups/DatasetGroupRenderer.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+/**
+ * DatasetGroupRenderer — OCP dispatcher. Maps group.kind to the
+ * appropriate sidebar renderer component. New kinds: add entry to
+ * GROUP_RENDERERS + new component. Zero edits to existing code.
+ */
+import { computed } from 'vue';
+import { groupRendererFor } from '../../config/group-renderers';
+import { resolveGroupKind } from '../../config/group-types';
+import type { DatasetGroupKind } from '../../config/types';
+
+const props = defineProps<{
+  kind: DatasetGroupKind;
+  entries: Array<{
+    id: string;
+    title: string;
+    ref?: string;
+    loaded: boolean;
+    conceptCount: number;
+    year?: number;
+    status?: string;
+    isCurrent?: boolean;
+  }>;
+  currentDataset: string;
+}>();
+
+const renderer = computed(() => groupRendererFor(resolveGroupKind({ kind: props.kind })).sidebar);
+</script>
+
+<template>
+  <component :is="renderer" :entries="entries" :current-dataset="currentDataset" />
+</template>

package/src/components/groups/DefaultGroupSidebar.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * DefaultGroupSidebar — flat list of dataset entries with expansion.
+ * Used for topic, family, collection, and default group kinds.
+ * Replaces the inline v-else template in AppSidebar.
+ */
+import { useRouter } from 'vue-router';
+import { useI18n } from '../../i18n';
+
+const props = defineProps<{
+  entries: Array<{
+    id: string;
+    title: string;
+    loaded: boolean;
+    conceptCount: number;
+  }>;
+  currentDataset: string;
+}>();
+
+const router = useRouter();
+const { t } = useI18n();
+
+function navigate(id: string) {
+  if (id === props.currentDataset) return;
+  router.push({ name: 'dataset', params: { registerId: id } });
+}
+</script>
+
+<template>
+  <div
+    v-for="ds in entries"
+    :key="ds.id"
+    class="rounded-lg transition-all duration-150"
+    :class="currentDataset === ds.id ? 'bg-surface' : ''"
+  >
+    <button
+      type="button"
+      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'"
+      @click="navigate(ds.id)"
+    >
+      <div class="font-medium truncate leading-snug">{{ ds.title }}</div>
+      <div v-if="ds.loaded" class="text-xs mt-0.5 text-ink-300 dark:text-ink-400">
+        {{ ds.conceptCount.toLocaleString() }} {{ t('home.concepts').toLowerCase() }}
+      </div>
+    </button>
+  </div>
+</template>

package/src/components/groups/LineageGroupSidebar.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/**
+ * LineageGroupSidebar — timeline-style entries for edition series.
+ * Replaces the inline v-if="group.kind === 'lineage'" template in
+ * AppSidebar. Open/closed: new group kinds get their own component.
+ */
+import { useRouter } from 'vue-router';
+
+const props = defineProps<{
+  entries: Array<{
+    id: string;
+    title: string;
+    ref?: string;
+    loaded: boolean;
+    conceptCount: number;
+    year?: number;
+    status?: string;
+    isCurrent?: boolean;
+  }>;
+  currentDataset: string;
+}>();
+
+const router = useRouter();
+
+function navigate(id: string) {
+  if (id === props.currentDataset) return;
+  router.push({ name: 'dataset', params: { registerId: id } });
+}
+</script>
+
+<template>
+  <div class="series-timeline">
+    <button
+      v-for="ds in entries"
+      :key="ds.id"
+      type="button"
+      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(--group-kind-lineage-light, #B8935A)' } : {}"
+      @click="navigate(ds.id)"
+    >
+      <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>
+
+<style scoped>
+.series-entry {
+  position: relative;
+}
+.current-star {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--group-kind-lineage-light, #B8935A);
+  filter: drop-shadow(0 0 4px rgba(184, 147, 90, 0.45));
+}
+:global(.dark) .current-star {
+  color: var(--group-kind-lineage-dark, #D4AF6E);
+  filter: drop-shadow(0 0 4px rgba(212, 175, 110, 0.55));
+}
+</style>

package/src/config/group-renderers.ts

@@ -0,0 +1,27 @@
+/**
+ * Group renderer registry — maps each DatasetGroupKind to its sidebar
+ * and homePage renderer components. Open/closed: adding a new kind
+ * requires one entry here + one new component. Zero edits to existing
+ * components.
+ */
+import type { Component } from 'vue';
+import type { DatasetGroupKind } from './types';
+import LineageGroupSidebar from '../components/groups/LineageGroupSidebar.vue';
+import DefaultGroupSidebar from '../components/groups/DefaultGroupSidebar.vue';
+
+export interface GroupRendererEntry {
+  readonly kind: DatasetGroupKind;
+  readonly sidebar: Component;
+}
+
+export const GROUP_RENDERERS: Record<DatasetGroupKind, GroupRendererEntry> = {
+  lineage:    { kind: 'lineage', sidebar: LineageGroupSidebar },
+  topic:      { kind: 'topic',   sidebar: DefaultGroupSidebar },
+  family:     { kind: 'family',  sidebar: DefaultGroupSidebar },
+  collection: { kind: 'collection', sidebar: DefaultGroupSidebar },
+  default:    { kind: 'default', sidebar: DefaultGroupSidebar },
+};
+
+export function groupRendererFor(kind: DatasetGroupKind): GroupRendererEntry {
+  return GROUP_RENDERERS[kind] ?? GROUP_RENDERERS.default;
+}

package/src/views/ConceptView.vue

@@ -52,7 +52,9 @@ const concept = computed(() => store.currentConcept);
 const manifest = computed(() => store.currentManifest);
 const edges = computed(() => store.conceptEdges);
 const adjacent = ref({ prev: null as string | null, next: null as string | null });
-const viewMode = ref<'detail' | 'sphere'>('detail');
+const viewMode = ref<'detail' | 'sphere'>(
+  router.currentRoute.value.query.view === 'sphere' ? 'sphere' : 'detail'
+);
 
 /* When the user clicks a card in the sphere, we store the navigation
    payload here. The concept loads via store.viewConcept (without
@@ -111,10 +113,12 @@ function onSphereNavigate(payload: { registerId: string; conceptId: string }) {
 function switchToSphere() {
   viewMode.value = 'sphere';
   sphereFocusPayload.value = null;
+  router.replace({ query: { ...router.currentRoute.value.query, view: 'sphere' } });
 }
 
 function switchToDetail() {
   viewMode.value = 'detail';
+  router.replace({ query: { ...router.currentRoute.value.query, view: 'detail' } });
   /* Commit the URL if the sphere navigated to a different concept.
      This triggers loadConcept → the Detail view shows the right concept. */
   if (sphereFocusPayload.value) {