@glossarist/concept-browser 0.7.52 → 0.7.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.7.52",
+  "version": "0.7.53",
   "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/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) {