@glossarist/concept-browser 0.7.78 → 0.7.80

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/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>

package/src/components/groups/LineageGroupSidebar.vue

@@ -1,12 +1,15 @@
 <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.
+ * Invoked via DatasetGroupRenderer dispatch when group.kind === 'lineage'.
+ *
+ * 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';
 
-const props = defineProps<{
+defineProps<{
   entries: Array<{
     id: string;
     title: string;
@@ -22,24 +25,27 @@ const props = defineProps<{
 
 const router = useRouter();
 
-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>
 
 <template>
-  <div class="series-timeline">
+  <div
+    v-for="ds in entries"
+    :key="ds.id"
+    class="rounded-lg transition-all duration-150"
+    :class="currentDataset === ds.id ? 'bg-surface' : ''"
+  >
     <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)"
+      :style="currentDataset === ds.id ? { borderLeftColor: 'var(--gold-accent, #B8935A)' } : {}"
+      @click="navigate(ds.id, currentDataset)"
     >
       <span class="flex-1 truncate text-[13.5px] font-medium leading-snug">{{ ds.ref || ds.title || ds.id }}</span>
       <span
@@ -52,24 +58,6 @@ function navigate(id: string) {
         title="Current edition"
       >✦</span>
     </button>
+    <slot name="expanded" :entry="ds" :is-current="currentDataset === ds.id" />
   </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/composables/use-concept-diff.ts

@@ -0,0 +1,231 @@
+/**
+ * useConceptDiff — diff two concepts and derive render-ready sections.
+ *
+ * Consolidates logic that was previously duplicated across
+ * ConceptDiffIsland.vue and SupersessionDiffIsland.vue (DRY).
+ *
+ * Pipeline:
+ *   raw wire data → DiffableConcept → diffConcepts → ConceptDiff
+ *                                                   ↓
+ *                                               deriveDiffSections
+ *                                               computeSimilarity
+ *
+ * `similarity` is not a field on ConceptDiff (it doesn't exist in
+ * glossarist-js's type). It is computed from stats:
+ *   similarity = 1 - (added + removed + changed) / total
+ */
+
+import { ref } from 'vue';
+import { diffConcepts } from 'glossarist/diff';
+import type { ConceptDiff } from 'glossarist/diff';
+
+// ── Inputs ────────────────────────────────────────────────────────────────
+
+/** Wire shape of a concept as stored in fetched JSON or content collections. */
+export interface ConceptLikeData {
+  conceptId?: string;
+  id?: string;
+  uri?: string;
+  status?: string;
+  languages?: string[];
+  localizations?: Record<string, unknown>;
+}
+
+/** Normalized concept shape consumed by diffConcepts. */
+export interface DiffableConcept {
+  readonly id: string;
+  readonly termid: string;
+  readonly status?: string;
+  readonly uri?: string;
+  readonly languages: readonly string[];
+  localization(lang: string): {
+    languageCode: string;
+    terms: unknown[];
+    definitions: unknown[];
+    notes: unknown[];
+    examples: unknown[];
+  } | null;
+}
+
+// ── Outputs ───────────────────────────────────────────────────────────────
+
+export type DiffHunk = { type: 'added' | 'removed' | 'equal'; text: string };
+
+export interface DefinitionDiff {
+  hunks?: readonly DiffHunk[];
+  type?: 'added' | 'removed';
+  value?: string;
+}
+
+export interface DesignationsDiff {
+  items: Array<{ type?: string; text: string }>;
+}
+
+export interface SimpleChangesDiff {
+  items: Array<{ type?: string; text: string }>;
+}
+
+export interface DiffSections {
+  definition?: DefinitionDiff;
+  designations?: DesignationsDiff;
+  terms?: { hunks?: readonly DiffHunk[]; oldValue?: string; newValue?: string };
+  notes?: SimpleChangesDiff;
+  examples?: SimpleChangesDiff;
+}
+
+// ── Adapters ──────────────────────────────────────────────────────────────
+
+export function toDiffableConcept(data: ConceptLikeData): DiffableConcept {
+  const langs = data.languages
+    ?? (data.localizations ? Object.keys(data.localizations) : []);
+  const id = String(data.conceptId ?? data.id ?? '');
+  return {
+    id,
+    termid: id,
+    status: data.status,
+    uri: data.uri,
+    languages: langs,
+    localization(lang: string) {
+      const locs = (data.localizations ?? {}) as Record<string, any>;
+      const loc = locs[lang];
+      if (!loc) return null;
+      return {
+        languageCode: loc.languageCode ?? lang,
+        terms: loc.terms ?? [],
+        definitions: loc.definitions ?? [],
+        notes: loc.notes ?? [],
+        examples: loc.examples ?? [],
+      };
+    },
+  };
+}
+
+// ── Pure derivations ──────────────────────────────────────────────────────
+
+interface ReadableConceptDiff {
+  localization?(lang: string): any;
+  localizations?: Record<string, any>;
+  stats?: { added?: number; removed?: number; changed?: number; total?: number };
+}
+
+function asReadable(diff: ConceptDiff): ReadableConceptDiff {
+  return diff as unknown as ReadableConceptDiff;
+}
+
+function extractDesignationText(value: any): string {
+  if (value == null) return '';
+  if (typeof value === 'string') return value;
+  return value.designation ?? value.text ?? String(value);
+}
+
+function extractContentText(value: any): string {
+  if (value == null) return '';
+  if (typeof value === 'string') return value;
+  return value.content ?? value.text ?? String(value);
+}
+
+/**
+ * Derive render-ready DiffSections from a ConceptDiff for a single language.
+ * Pure function — same diff + lang always yields the same sections.
+ */
+export function deriveDiffSections(diff: ConceptDiff | null, lang: string): DiffSections {
+  if (!diff) return {};
+  const d = asReadable(diff);
+  const loc = d.localization?.(lang) ?? d.localizations?.[lang];
+  if (!loc) return {};
+  const out: DiffSections = {};
+
+  const defChanged = loc.definitions?.changed?.[0];
+  if (defChanged?.textDiff?.hunks?.length) {
+    out.definition = { hunks: defChanged.textDiff.hunks };
+  } else if (loc.definitions?.added?.length) {
+    out.definition = { type: 'added', value: extractContentText(loc.definitions.added[0].value) };
+  } else if (loc.definitions?.removed?.length) {
+    out.definition = { type: 'removed', value: extractContentText(loc.definitions.removed[0].value) };
+  }
+
+  const hasDesignationChanges =
+    loc.designations?.added?.length
+    || loc.designations?.removed?.length
+    || loc.designations?.changed?.length;
+  if (hasDesignationChanges) {
+    const items: Array<{ type?: string; text: string }> = [];
+    for (const d of loc.designations.added ?? []) {
+      items.push({ type: 'added', text: extractDesignationText(d.value) });
+    }
+    for (const d of loc.designations.removed ?? []) {
+      items.push({ type: 'removed', text: extractDesignationText(d.value) });
+    }
+    for (const d of loc.designations.changed ?? []) {
+      items.push({ type: 'removed', text: extractDesignationText(d.oldValue) });
+      items.push({ type: 'added', text: extractDesignationText(d.newValue) });
+    }
+    out.designations = { items };
+  }
+
+  if (loc.notes?.added?.length || loc.notes?.removed?.length) {
+    out.notes = {
+      items: [
+        ...(loc.notes.added ?? []).map((n: any) => ({ type: 'added', text: extractContentText(n.value) })),
+        ...(loc.notes.removed ?? []).map((n: any) => ({ type: 'removed', text: extractContentText(n.value) })),
+      ],
+    };
+  }
+
+  if (loc.examples?.added?.length || loc.examples?.removed?.length) {
+    out.examples = {
+      items: [
+        ...(loc.examples.added ?? []).map((e: any) => ({ type: 'added', text: extractContentText(e.value) })),
+        ...(loc.examples.removed ?? []).map((e: any) => ({ type: 'removed', text: extractContentText(e.value) })),
+      ],
+    };
+  }
+
+  return out;
+}
+
+/**
+ * Similarity score in [0, 1]. Returns null when no comparable stats.
+ *
+ * Computed as 1 − (added + removed + changed) / total — i.e. the
+ * fraction of the concept that did NOT change. `added` counts as a
+ * change because it represents content present in only one version.
+ */
+export function computeSimilarity(diff: ConceptDiff | null): number | null {
+  if (!diff) return null;
+  const stats = asReadable(diff).stats;
+  if (!stats || !stats.total) return null;
+  const changed = (stats.added ?? 0) + (stats.removed ?? 0) + (stats.changed ?? 0);
+  return Math.max(0, Math.min(1, 1 - changed / stats.total));
+}
+
+// ── Composable ────────────────────────────────────────────────────────────
+
+export function useConceptDiff() {
+  const diffResult = ref<ConceptDiff | null>(null);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  function diff(oldData: ConceptLikeData | null, newData: ConceptLikeData | null): void {
+    loading.value = true;
+    error.value = null;
+    try {
+      diffResult.value = diffConcepts(
+        oldData ? toDiffableConcept(oldData) : null,
+        newData ? toDiffableConcept(newData) : null,
+      );
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : String(e);
+      diffResult.value = null;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function clear(): void {
+    diffResult.value = null;
+    error.value = null;
+  }
+
+  return { diffResult, loading, error, diff, clear };
+}