@glossarist/concept-browser 0.7.77 → 0.7.80

package/src/components/ConceptDiffView.vue

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

package/src/components/ConceptEditionRail.vue

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

package/src/components/PartitiveRelationList.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+/**
+ * PartitiveRelationList — renders one-to-many partitive decompositions
+ * as grouped cards. Each relation shows:
+ *   - the comprehensive (whole) concept as the card header
+ *   - each partitive member as an indented child with a certainty badge
+ *   - completeness badge (complete / partial)
+ *   - plurality badge (shared / uncertain / sharedType) when present
+ *   - criterion as italic text under the title
+ *
+ * Independent of RelationshipList.vue, which renders binary edges.
+ * Both consume the same stores but render in separate sections.
+ *
+ * v2 shape per concept-model/TODO.partitive-relation-v2.
+ */
+import type { PartitiveRelationWire, Manifest } from '../adapters/types';
+import { useRouter } from 'vue-router';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { getFactory } from '../adapters/factory';
+import { useI18n } from '../i18n';
+import {
+  partitiveRelationStyle,
+  completenessLabel,
+  certaintyLabel,
+} from '../utils/partitive-relation-styling';
+
+const props = defineProps<{
+  relations: PartitiveRelationWire[];
+  manifest: Manifest;
+  registerId: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'navigate', registerId: string, conceptId: string): void;
+}>();
+
+const router = useRouter();
+const store = useVocabularyStore();
+const factory = getFactory();
+const { t } = useI18n();
+
+function labelFor(uri: string): string {
+  const parsed = factory.resolve(uri);
+  if (parsed.type === 'internal') {
+    return parsed.conceptId || uri;
+  }
+  return uri;
+}
+
+function navigate(uri: string) {
+  const parsed = factory.resolve(uri);
+  if (parsed.type === 'internal') {
+    store.viewConcept(parsed.registerId, parsed.conceptId);
+    router.push({
+      name: 'concept',
+      params: { registerId: parsed.registerId, conceptId: parsed.conceptId },
+    });
+  }
+}
+
+function criterionText(criterion?: Record<string, string>): string | null {
+  if (!criterion) return null;
+  return criterion[props.manifest.id]
+    ?? criterion.default
+    ?? criterion.eng
+    ?? Object.values(criterion)[0]
+    ?? null;
+}
+
+function pluralityBadge(plurality: NonNullable<PartitiveRelationWire['plurality']>): string {
+  if (!plurality.isShared) return '';
+  let label = t('partitive.plurality.shared') || 'shared type';
+  if (plurality.isUncertain) {
+    label = `${label} (${t('partitive.plurality.uncertain') || 'uncertain'})`;
+  }
+  if (plurality.sharedType) {
+    label = `${label}: ${plurality.sharedType}`;
+  }
+  return label;
+}
+</script>
+
+<template>
+  <div v-if="relations.length > 0" class="space-y-3">
+    <div class="section-label flex items-center gap-1.5 mb-2">
+      <span class="inline-block w-2 h-2 rounded-full bg-emerald-600"></span>
+      {{ t('partitive.relations') || 'Partitive relations' }}
+    </div>
+    <div
+      v-for="(rel, i) in relations"
+      :key="i"
+      class="rounded-lg border border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-900/20 overflow-hidden"
+    >
+      <div class="px-3 py-2 flex items-center gap-2 border-b border-emerald-200 dark:border-emerald-800">
+        <span class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-emerald-200 dark:bg-emerald-800 text-emerald-900 dark:text-emerald-100 uppercase">
+          {{ completenessLabel(rel.completeness) }}
+        </span>
+        <span
+          v-if="rel.plurality && rel.plurality.isShared"
+          class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-amber-200 dark:bg-amber-800 text-amber-900 dark:text-amber-100 uppercase"
+          :title="pluralityBadge(rel.plurality)"
+        >
+          {{ pluralityBadge(rel.plurality) }}
+        </span>
+        <button
+          @click="navigate(rel.comprehensive)"
+          class="ml-auto text-sm font-medium text-emerald-900 dark:text-emerald-100 hover:underline truncate"
+        >
+          {{ labelFor(rel.comprehensive) }}
+        </button>
+      </div>
+      <div
+        v-if="criterionText(rel.criterion)"
+        class="px-3 py-1 text-xs text-emerald-800 dark:text-emerald-200 italic border-b border-emerald-200 dark:border-emerald-800"
+      >
+        {{ criterionText(rel.criterion) }}
+      </div>
+      <ul class="divide-y divide-emerald-100 dark:divide-emerald-900/30">
+        <li v-for="(member, j) in rel.partitives" :key="j">
+          <button
+            @click="navigate(member.uri)"
+            class="block w-full text-left px-3 py-1.5 text-sm hover:bg-emerald-100 dark:hover:bg-emerald-900/30 text-emerald-900 dark:text-emerald-100"
+            :class="{ 'opacity-60': member.certainty === 'possible' }"
+          >
+            <span class="text-emerald-600 dark:text-emerald-400 mr-2">└</span>
+            {{ labelFor(member.uri) }}
+            <span
+              v-if="member.certainty === 'possible'"
+              class="ml-2 text-[10px] font-mono px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/50 text-amber-800 dark:text-amber-200 uppercase"
+              :title="'plurality uncertain (ISO 704 broken line)'"
+            >
+              {{ certaintyLabel(member.certainty) }}
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

package/src/components/RelationSphere.vue

@@ -21,6 +21,7 @@ import { easeInOutCubic, slerp, fibonacciSpherePosition, project, cardEdge, type
 import { UriRouter } from '../adapters/UriRouter';
 import { getPreferredTerm } from '../utils/concept-helpers';
 import { renderContent } from '../utils/content-renderer';
+import { hashSeed, expandParams, portSide, portPoint, idToUriGet } from '../utils/sphere-math';
 import { useI18n } from '../i18n';
 
 const { t, locale } = useI18n();
@@ -168,7 +169,7 @@ async function resolveTerm(
   uriBase: string,
   factory: ReturnType<typeof getFactory>
 ): Promise<ResolvedTerm | null> {
-  const neighborUri = `${uriBase}/${n.register}/concept/${n.conceptId}`;
+  const neighborUri = UriRouter.buildConceptUri(uriBase, n.register, n.conceptId);
   const out: ResolvedTerm = { term: null };
 
   /* Strategy 1: graph engine */
@@ -229,12 +230,6 @@ function updateNodeTerm(n: SNode) {
 
 /* ── Build internal graph from concept + edges (BFS) ────── */
 
-function hashSeed(s: string): number {
-  let h = 0;
-  for (let i = 0; i < s.length; i++) h = ((h << 5) - h + s.charCodeAt(i)) | 0;
-  return Math.abs(h);
-}
-
 function buildGraph() {
   const focusUri = conceptUri(props.concept, props.registerId, props.manifest.uriBase);
   const focusId = props.concept?.id || props.registerId;
@@ -399,11 +394,6 @@ function buildGraph() {
 }
 
 /* Reverse lookup: URI → node id. Linear scan is fine for ≤36 nodes. */
-function idToUriGet(map: Map<string, string>, uri: string): string | undefined {
-  for (const [id, u] of map) if (u === uri) return id;
-  return undefined;
-}
-
 /* ── Custom forces (EXACT prototype replica) ────────────── */
 function sphereConstraint() {
   let nL: SNode[] = nodes;
@@ -443,15 +433,6 @@ function velocityClamp(maxV: number) {
    visual difference between tight (0) and loose (10) is dramatic.
    Link distance is chord distance on the unit sphere: 0.5 ≈ 29° (cards
    cluster near focus), 1.95 ≈ 154° (cards spread to back hemisphere). */
-function expandParams(v: number): { linkDist: number; linkStrength: number; repMin: number; repStrength: number } {
-  const t = Math.max(0, Math.min(10, v)) / 10;
-  return {
-    linkDist: 0.5 + t * 1.45,         /* 0.5 → 1.95 */
-    linkStrength: 0.08,
-    repMin: 0.55 + t * 0.40,           /* 0.55 → 0.95 — just prevents overlap */
-    repStrength: 0.05,
-  };
-}
 let linkDistance = expandParams(5).linkDist;
 let linkStrength = expandParams(5).linkStrength;
 let repulseMinDist = expandParams(5).repMin;
@@ -606,24 +587,9 @@ function onTick() {
 /* ── Edge drawing with 4-port card connections + type labels ─ */
 /* Determine which side of a card (top/bottom/left/right) an edge should
    connect to, based on the direction to the other endpoint. */
-function portSide(from: {x:number;y:number}, to: {x:number;y:number}): 'top'|'bottom'|'left'|'right' {
-  const dx = to.x - from.x, dy = to.y - from.y;
-  if (Math.abs(dx) > Math.abs(dy)) return dx > 0 ? 'right' : 'left';
-  return dy > 0 ? 'bottom' : 'top';
-}
-
 /* Compute the connection point on a card's side, with an offset along
    that side so multiple edges to the same side don't stack on top of
    each other. `offset` is in [-1, 1] (0 = midpoint, ±1 = corners). */
-function portPoint(center: {x:number;y:number}, side: 'top'|'bottom'|'left'|'right', w: number, h: number, offset: number) {
-  switch (side) {
-    case 'right':  return { x: center.x + w/2, y: center.y + (h/2 - 6) * offset };
-    case 'left':   return { x: center.x - w/2, y: center.y + (h/2 - 6) * offset };
-    case 'bottom': return { x: center.x + (w/2 - 12) * offset, y: center.y + h/2 };
-    case 'top':    return { x: center.x + (w/2 - 12) * offset, y: center.y - h/2 };
-  }
-}
-
 function drawEdges(cx: number, cy: number) {
   const svg = edgesSvgRef.value; if (!svg) return;
   const w = cx * 2, h = cy * 2 / 0.46;

package/src/components/groups/DatasetGroupRenderer.vue

@@ -1,8 +1,14 @@
 <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.
+ * appropriate sidebar renderer component.
+ *
+ * Adding a new kind: add an entry to GROUP_RENDERERS + create the new
+ * sidebar component. Zero edits to existing components or to
+ * AppSidebar.
+ *
+ * Forwards the `expanded` slot scoped per-entry so callers can render
+ * shared per-entry content (sub-pages, sections, etc.) regardless of kind.
  */
 import { computed } from 'vue';
 import { groupRendererFor } from '../../config/group-renderers';
@@ -28,5 +34,9 @@ const renderer = computed(() => groupRendererFor(resolveGroupKind({ kind: props.
 </script>
 
 <template>
-  <component :is="renderer" :entries="entries" :current-dataset="currentDataset" />
-</template>
+  <component :is="renderer" :entries="entries" :current-dataset="currentDataset">
+    <template #expanded="slotProps">
+      <slot name="expanded" v-bind="slotProps" />
+    </template>
+  </component>
+</template>

package/src/components/groups/DefaultGroupSidebar.vue

@@ -1,13 +1,19 @@
 <script setup lang="ts">
 /**
- * DefaultGroupSidebar — flat list of dataset entries with expansion.
+ * DefaultGroupSidebar — flat list of dataset entries with expansion slot.
  * Used for topic, family, collection, and default group kinds.
- * Replaces the inline v-else template in AppSidebar.
+ * Invoked via DatasetGroupRenderer dispatch (OCP).
+ *
+ * Slot `expanded` receives `{ entry, isCurrent }` per entry so callers
+ * can render shared per-entry content (sub-pages, sections, etc.)
+ * without touching this component.
  */
 import { useRouter } from 'vue-router';
 import { useI18n } from '../../i18n';
+import { useDsStyle } from '../../utils/dataset-style';
+import { useSiteConfig } from '../../config/use-site-config';
 
-const props = defineProps<{
+defineProps<{
   entries: Array<{
     id: string;
     title: string;
@@ -19,9 +25,11 @@ const props = defineProps<{
 
 const router = useRouter();
 const { t } = useI18n();
+const { getColor } = useDsStyle();
+const { localizedDatasetField } = useSiteConfig();
 
-function navigate(id: string) {
-  if (id === props.currentDataset) return;
+function navigate(id: string, current: string) {
+  if (id === current) return;
   router.push({ name: 'dataset', params: { registerId: id } });
 }
 </script>
@@ -35,16 +43,25 @@ function navigate(id: string) {
   >
     <button
       type="button"
-      class="w-full text-left px-3 py-2 rounded-lg text-sm border-l-2"
+      class="w-full text-left px-3 py-2 rounded-lg text-sm border-l-2 flex items-start gap-2"
       :class="currentDataset === ds.id
         ? 'text-ink-800 dark:text-ink-50'
         : 'border-transparent text-ink-600 dark:text-ink-300 hover:bg-ink-50 dark:hover:bg-ink-700 hover:text-ink-800 dark:hover:text-ink-50'"
-      @click="navigate(ds.id)"
+      :style="{ borderLeftColor: currentDataset === ds.id ? getColor(ds.id) : 'transparent' }"
+      @click="navigate(ds.id, currentDataset)"
     >
-      <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() }}
+      <span class="w-2 h-2 rounded-full flex-shrink-0 mt-1.5" :style="{ backgroundColor: getColor(ds.id) }"></span>
+      <div class="min-w-0 flex-1">
+        <div class="font-medium truncate leading-snug">{{ localizedDatasetField(ds.id, 'title', ds.title) }}</div>
+        <div
+          v-if="ds.loaded"
+          class="text-xs mt-0.5"
+          :class="currentDataset === ds.id ? 'text-ink-400 dark:text-ink-300' : 'text-ink-300 dark:text-ink-400'"
+        >
+          {{ ds.conceptCount.toLocaleString() }} {{ t('home.concepts').toLowerCase() }}
+        </div>
       </div>
     </button>
+    <slot name="expanded" :entry="ds" :is-current="currentDataset === ds.id" />
   </div>
-</template>
+</template>