@glossarist/concept-browser 0.7.68 → 0.7.71

package/src/islands/ConceptDiffIsland.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="concept-diff-island">
+    <!-- Edition selector -->
+    <div v-if="editions.length > 1" class="mb-4">
+      <label class="text-sm font-semibold text-ink-500 uppercase tracking-wider mr-2">Compare with:</label>
+      <select v-model="compareEdition" class="text-sm border border-ink-200 dark:border-ink-700 rounded px-2 py-1 bg-surface dark:bg-ink-800 text-ink-600 dark:text-ink-300">
+        <option value="">Select edition...</option>
+        <option v-for="ed in otherEditions" :key="ed.id" :value="ed.id">
+          {{ ed.title }} ({{ ed.year ?? '?' }})
+        </option>
+      </select>
+    </div>
+
+    <!-- Diff rendering -->
+    <div v-if="diffResult && compareEdition" class="space-y-4">
+      <!-- Similarity score -->
+      <div v-if="diffResult.similarity != null" class="flex items-center gap-3">
+        <div class="text-sm text-ink-500">Similarity:</div>
+        <div class="flex-1 max-w-xs bg-ink-100 dark:bg-ink-800 rounded-full h-3 overflow-hidden">
+          <div
+            class="h-full rounded-full transition-all duration-300"
+            :class="similarityColor(diffResult.similarity)"
+            :style="{ width: `${Math.round(diffResult.similarity * 100)}%` }"
+          />
+        </div>
+        <div class="text-sm font-medium" :class="similarityTextColor(diffResult.similarity)">
+          {{ Math.round(diffResult.similarity * 100) }}%
+        </div>
+      </div>
+
+      <!-- Per-field diffs -->
+      <div v-for="(section, field) in sections" :key="field" class="card p-4">
+        <h3 class="text-sm font-semibold text-ink-500 uppercase tracking-wider mb-3">{{ fieldLabel(field) }}</h3>
+        <div v-if="section.type === 'added'" class="text-emerald-600 dark:text-emerald-400">
+          <span class="text-xs font-medium bg-emerald-100 dark:bg-emerald-900/30 px-1.5 py-0.5 rounded mr-2">ADDED</span>
+          <span dir="auto">{{ section.value }}</span>
+        </div>
+        <div v-else-if="section.type === 'removed'" class="text-red-500 dark:text-red-400 line-through opacity-70">
+          <span class="text-xs font-medium bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded mr-2 no-underline">REMOVED</span>
+          <span dir="auto">{{ section.value }}</span>
+        </div>
+        <div v-else-if="section.type === 'changed'" class="space-y-1">
+          <div class="text-red-500 dark:text-red-400 line-through opacity-70" dir="auto">{{ section.oldValue }}</div>
+          <div class="text-emerald-600 dark:text-emerald-400" dir="auto">{{ section.newValue }}</div>
+        </div>
+        <div v-else-if="section.hunks" class="font-mono text-xs space-y-0.5">
+          <span
+            v-for="(hunk, i) in section.hunks"
+            :key="i"
+            :class="{
+              'bg-emerald-100 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300': hunk.type === 'added',
+              'bg-red-100 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>
+        </div>
+        <div v-else class="text-xs text-ink-400 italic">No changes</div>
+      </div>
+    </div>
+
+    <!-- No changes -->
+    <div v-else-if="diffResult && diffResult.hasChanges === false" class="text-center py-8">
+      <p class="text-ink-400">No differences between these editions.</p>
+    </div>
+
+    <!-- Loading -->
+    <div v-else-if="loading" class="text-center py-8">
+      <div class="inline-block w-8 h-8 border-4 border-blue-200 border-t-blue-500 rounded-full animate-spin mb-2"></div>
+      <p class="text-ink-400 text-sm">Comparing editions...</p>
+    </div>
+
+    <!-- Hint -->
+    <div v-else-if="!compareEdition" class="text-center py-4">
+      <p class="text-sm text-ink-400">Select an edition above to see what changed.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { diffConcepts } from 'glossarist/diff';
+import type { ConceptDiff } from 'glossarist/diff';
+
+const props = defineProps<{
+  currentConcept: any;
+  registerId: string;
+  editions: Array<{
+    id: string;
+    title: string;
+    year?: number;
+    conceptData?: any;
+  }>;
+}>();
+
+const compareEdition = ref('');
+const diffResult = ref<ConceptDiff | null>(null);
+const loading = ref(false);
+
+const otherEditions = computed(() =>
+  props.editions.filter(e => e.id !== props.registerId)
+);
+
+watch(compareEdition, async (edId) => {
+  if (!edId) {
+    diffResult.value = null;
+    return;
+  }
+  const edition = props.editions.find(e => e.id === edId);
+  if (!edition?.conceptData) {
+    diffResult.value = null;
+    return;
+  }
+  loading.value = true;
+  try {
+    const oldConcept = toConceptLike(edition.conceptData, edId);
+    const newConcept = toConceptLike(props.currentConcept, props.registerId);
+    diffResult.value = diffConcepts(oldConcept, newConcept);
+  } catch (e) {
+    console.error('Diff failed:', e);
+    diffResult.value = null;
+  } finally {
+    loading.value = false;
+  }
+});
+
+function toConceptLike(data: any, registerId: string) {
+  const langs = data.languages ?? (data.localizations ? Object.keys(data.localizations) : []);
+  return {
+    id: data.conceptId ?? data.id,
+    termid: String(data.conceptId ?? data.id),
+    status: data.status,
+    languages: langs,
+    localization(lang: string) {
+      const loc = (data.localizations ?? {})[lang];
+      if (!loc) return null;
+      return {
+        languageCode: loc.languageCode ?? lang,
+        terms: loc.terms ?? [],
+        definitions: loc.definitions ?? [],
+        notes: loc.notes ?? [],
+        examples: loc.examples ?? [],
+      };
+    },
+  };
+}
+
+const sections = computed(() => {
+  if (!diffResult.value) return {};
+  const out: Record<string, any> = {};
+  const diff = diffResult.value as any;
+  const loc = diff.localization?.('eng') ?? diff.localizations?.eng;
+  if (!loc) return out;
+
+  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: loc.definitions.added[0].value?.content ?? loc.definitions.added[0].value };
+  } else if (loc.definitions?.removed?.length) {
+    out.definition = { type: 'removed', value: loc.definitions.removed[0].value?.content ?? loc.definitions.removed[0].value };
+  }
+
+  const termChanged = loc.designations?.changed?.[0];
+  if (termChanged?.textDiff?.hunks?.length) {
+    out.terms = { hunks: termChanged.textDiff.hunks };
+  } else if (loc.designations?.added?.length || loc.designations?.removed?.length) {
+    out.terms = {
+      type: 'changed',
+      oldValue: (loc.designations.removed ?? []).map((d: any) => d.value?.designation ?? d.value?.text ?? String(d.value ?? '')).join('; '),
+      newValue: (loc.designations.added ?? []).map((d: any) => d.value?.designation ?? d.value?.text ?? String(d.value ?? '')).join('; '),
+    };
+  }
+
+  if (loc.notes?.added?.length || loc.notes?.removed?.length) {
+    out.notes = {
+      type: 'changed',
+      oldValue: (loc.notes.removed ?? []).map((n: any) => n.value?.content ?? n.value?.text ?? String(n.value ?? '')).join('; '),
+      newValue: (loc.notes.added ?? []).map((n: any) => n.value?.content ?? n.value?.text ?? String(n.value ?? '')).join('; '),
+    };
+  }
+
+  if (loc.examples?.added?.length || loc.examples?.removed?.length) {
+    out.examples = {
+      type: 'changed',
+      oldValue: (loc.examples.removed ?? []).map((e: any) => e.value?.content ?? e.value?.text ?? String(e.value ?? '')).join('; '),
+      newValue: (loc.examples.added ?? []).map((e: any) => e.value?.content ?? e.value?.text ?? String(e.value ?? '')).join('; '),
+    };
+  }
+
+  return out;
+});
+
+function fieldLabel(field: string): string {
+  const labels: Record<string, string> = {
+    definition: 'Definition',
+    terms: 'Terms',
+    notes: 'Notes',
+    examples: 'Examples',
+  };
+  return labels[field] ?? field;
+}
+
+function similarityColor(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>

package/src/islands/ConceptIsland.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="concept-island">
+    <!-- View mode toggle -->
+    <div class="flex items-center justify-between mb-4">
+      <div class="flex items-center gap-2">
+        <button @click="viewMode = 'detail'" :class="['px-3 py-1 text-sm rounded transition-colors', viewMode === 'detail' ? 'bg-blue-500 text-white' : 'text-ink-500 hover:bg-ink-100 dark:hover:bg-ink-800']">Detail</button>
+        <button @click="viewMode = 'sphere'" :class="['px-3 py-1 text-sm rounded transition-colors', viewMode === 'sphere' ? 'bg-blue-500 text-white' : 'text-ink-500 hover:bg-ink-100 dark:hover:bg-ink-800']">Sphere</button>
+      </div>
+      <button @click="toggleRdf()" class="px-3 py-1 text-sm rounded text-ink-500 hover:bg-ink-100 dark:hover:bg-ink-800 transition-colors">RDF Source {{ rdfOpen ? '▾' : '▸' }}</button>
+    </div>
+
+    <!-- Detail view using REAL SPA components -->
+    <div v-if="viewMode === 'detail'" class="space-y-6">
+      <!-- Designations from real DesignationList -->
+      <DesignationList v-if="hasDesignations" :designations="parsedDesignations" :language="activeLang" />
+
+      <!-- Definition -->
+      <section v-if="concept.definition?.eng">
+        <h2 class="text-sm font-semibold text-ink-500 uppercase tracking-wider mb-2">Definition</h2>
+        <p class="text-ink-700 dark:text-ink-200 leading-relaxed" dir="auto">{{ concept.definition.eng }}</p>
+      </section>
+
+      <!-- Non-verbal representations from real NonVerbalRepDisplay -->
+      <NonVerbalRepDisplay v-if="concept.nonVerbalRep?.length" :reps="concept.nonVerbalRep" :register-id="registerId" />
+
+      <!-- Format downloads from real FormatDownloads -->
+      <FormatDownloads v-if="concept.formats?.length" :formats="concept.formats" :register-id="registerId" />
+
+      <!-- Groups / Sections -->
+      <section v-if="concept.groups?.length">
+        <h2 class="text-sm font-semibold text-ink-500 uppercase tracking-wider mb-2">Sections</h2>
+        <div class="flex flex-wrap gap-2">
+          <span v-for="g in concept.groups" :key="g" class="text-xs px-2 py-1 rounded bg-ink-100 dark:bg-ink-800 text-ink-600 dark:text-ink-300">{{ g }}</span>
+        </div>
+      </section>
+    </div>
+
+    <!-- Sphere view placeholder -->
+    <div v-else class="border border-ink-200 dark:border-ink-700 rounded-lg p-8 text-center">
+      <p class="text-ink-400">3D sphere visualization loads on interaction</p>
+    </div>
+
+    <!-- RDF panel — lazy-loaded client-side only (glossarist/rdf is Node-only) -->
+    <component v-if="rdfOpen && RdfComponent" :is="RdfComponent" :concept="parsedConcept" :register-id="registerId" :concept-uri-value="conceptUri" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, shallowRef, onMounted } from 'vue';
+import DesignationList from '../components/DesignationList.vue';
+import NonVerbalRepDisplay from '../components/NonVerbalRepDisplay.vue';
+import FormatDownloads from '../components/FormatDownloads.vue';
+
+const props = defineProps<{
+  concept: any;
+  registerId: string;
+  conceptUri: string;
+}>();
+
+const viewMode = ref<'detail' | 'sphere'>('detail');
+const rdfOpen = ref(false);
+const activeLang = ref('eng');
+const RdfComponent = shallowRef<any>(null);
+
+// Lazy-load ConceptRdfView only when RDF panel is opened
+// (it imports glossarist/rdf which has Node-only deps — can't SSR)
+async function toggleRdf() {
+  rdfOpen.value = !rdfOpen.value;
+  if (rdfOpen.value && !RdfComponent.value) {
+    try {
+      const mod = await import('../components/ConceptRdfView.vue');
+      RdfComponent.value = mod.default;
+    } catch (e) {
+      console.error('Failed to load RDF view:', e);
+    }
+  }
+}
+
+const hasDesignations = computed(() => {
+  return Object.keys(props.concept?.designations || {}).length > 0;
+});
+
+const parsedDesignations = computed(() => {
+  // Convert the content collection format to what DesignationList expects
+  const out: any[] = [];
+  for (const [lang, text] of Object.entries(props.concept?.designations || {})) {
+    out.push({ designation: text, type: 'expression', normative_status: 'preferred', language_code: lang });
+  }
+  return out;
+});
+
+const parsedConcept = computed(() => {
+  // Create a minimal Concept-like object for ConceptRdfView
+  return {
+    id: props.concept?.conceptId,
+    uri: props.conceptUri,
+    status: props.concept?.status,
+    localizations: {},
+    ...props.concept,
+  };
+});
+</script>

package/src/islands/GraphIsland.vue

@@ -0,0 +1,15 @@
+<template>
+  <ErrorBoundary title="Graph view failed" retry-key="graph">
+    <GraphPanel :nodes="nodes" :edges="edges" />
+  </ErrorBoundary>
+</template>
+
+<script setup lang="ts">
+import GraphPanel from '../components/GraphPanel.vue';
+import ErrorBoundary from '../components/ErrorBoundary.vue';
+
+defineProps<{
+  nodes: Array<{ id: string; label: string; group?: string }>;
+  edges: Array<{ source: string; target: string; type?: string }>;
+}>();
+</script>

package/src/islands/GroupRendererIsland.vue

@@ -0,0 +1,15 @@
+<template>
+  <ErrorBoundary title="Group renderer failed">
+    <DatasetGroupRenderer :group="group" :datasets="datasets" />
+  </ErrorBoundary>
+</template>
+
+<script setup lang="ts">
+import DatasetGroupRenderer from '../components/DatasetGroupRenderer.vue';
+import ErrorBoundary from '../components/ErrorBoundary.vue';
+
+defineProps<{
+  group: any;
+  datasets: any[];
+}>();
+</script>

package/src/islands/HeaderIsland.vue

@@ -0,0 +1,10 @@
+<template>
+  <ErrorBoundary title="Header failed">
+    <AppHeader />
+  </ErrorBoundary>
+</template>
+
+<script setup lang="ts">
+import AppHeader from '../components/AppHeader.vue';
+import ErrorBoundary from '../components/ErrorBoundary.vue';
+</script>

package/src/islands/NonVerbalIsland.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="nvr-island">
+    <section v-if="figures.length" class="mb-6">
+      <h2 class="text-sm font-semibold text-ink-500 uppercase tracking-wider mb-3">Figures</h2>
+      <div class="space-y-4">
+        <figure v-for="(fig, i) in figures" :key="i" class="card p-4">
+          <figcaption class="text-sm text-ink-600 dark:text-ink-300 mb-2" dir="auto">{{ fig.caption || `Figure ${i + 1}` }}</figcaption>
+          <div v-if="fig.images?.length" class="grid grid-cols-2 gap-2">
+            <img
+              v-for="(img, j) in fig.images"
+              :key="j"
+              :src="`/data/${registerId}/images/${img.src}`"
+              :alt="fig.altText || fig.caption || `Figure ${i + 1}`"
+              class="rounded border border-ink-200 dark:border-ink-700 max-w-full"
+              loading="lazy"
+            />
+          </div>
+          <p v-if="fig.description" class="text-xs text-ink-400 mt-2" dir="auto">{{ fig.description }}</p>
+        </figure>
+      </div>
+    </section>
+
+    <section v-if="tables.length" class="mb-6">
+      <h2 class="text-sm font-semibold text-ink-500 uppercase tracking-wider mb-3">Tables</h2>
+      <div class="space-y-4">
+        <div v-for="(tbl, i) in tables" :key="i" class="card p-4">
+          <p class="text-sm text-ink-600 dark:text-ink-300 mb-2" dir="auto">{{ tbl.caption || `Table ${i + 1}` }}</p>
+          <div v-if="tbl.rows?.length" class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <tbody>
+                <tr v-for="(row, r) in tbl.rows" :key="r" class="border-b border-ink-100 dark:border-ink-700">
+                  <td v-for="(cell, c) in row" :key="c" class="py-1 px-2 text-ink-600 dark:text-ink-300" dir="auto">{{ cell }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section v-if="formulas.length" class="mb-6">
+      <h2 class="text-sm font-semibold text-ink-500 uppercase tracking-wider mb-3">Formulas</h2>
+      <div class="space-y-3">
+        <div v-for="(fml, i) in formulas" :key="i" class="card p-4">
+          <p v-if="fml.caption" class="text-sm text-ink-600 dark:text-ink-300 mb-2" dir="auto">{{ fml.caption }}</p>
+          <code class="text-sm font-mono text-ink-700 dark:text-ink-200 bg-ink-50 dark:bg-ink-800 px-2 py-1 rounded" dir="auto">{{ fml.content || fml.latex || fml.text || '' }}</code>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  nonVerbalReps?: Array<{
+    type?: string;
+    caption?: string;
+    description?: string;
+    images?: Array<{ src: string }>;
+    altText?: string;
+    rows?: string[][];
+    content?: string;
+    latex?: string;
+    text?: string;
+  }>;
+  registerId: string;
+}>();
+
+const all = computed(() => props.nonVerbalReps || []);
+const figures = computed(() => all.value.filter(r => r.type === 'figure'));
+const tables = computed(() => all.value.filter(r => r.type === 'table'));
+const formulas = computed(() => all.value.filter(r => r.type === 'formula'));
+</script>

package/src/islands/RelationSphereIsland.vue

@@ -0,0 +1,20 @@
+<template>
+  <ErrorBoundary title="Sphere view failed" :retry-key="conceptUri">
+    <RelationSphere
+      :concept="concept"
+      :edges="edges"
+      :concept-uri="conceptUri"
+    />
+  </ErrorBoundary>
+</template>
+
+<script setup lang="ts">
+import RelationSphere from '../components/RelationSphere.vue';
+import ErrorBoundary from '../components/ErrorBoundary.vue';
+
+defineProps<{
+  concept: any;
+  conceptUri: string;
+  edges?: any[];
+}>();
+</script>

package/src/islands/SearchIsland.vue

@@ -0,0 +1,23 @@
+<template>
+  <ErrorBoundary title="Search failed" retry-key="search">
+    <div class="search-island">
+      <SearchBar />
+      <SearchResults />
+    </div>
+  </ErrorBoundary>
+</template>
+
+<script setup lang="ts">
+import SearchBar from '../components/SearchBar.vue';
+import SearchResults from '../components/SearchResults.vue';
+import ErrorBoundary from '../components/ErrorBoundary.vue';
+
+defineProps<{
+  concepts?: Array<{
+    conceptId: string;
+    registerId: string;
+    term: string;
+    status: string;
+  }>;
+}>();
+</script>

package/src/islands/SeriesCardIsland.vue

@@ -0,0 +1,12 @@
+<template>
+  <ErrorBoundary title="Series card failed">
+    <DatasetSeriesCard :register-id="registerId" />
+  </ErrorBoundary>
+</template>
+
+<script setup lang="ts">
+import DatasetSeriesCard from '../components/DatasetSeriesCard.vue';
+import ErrorBoundary from '../components/ErrorBoundary.vue';
+
+defineProps<{ registerId: string }>();
+</script>

package/src/islands/ShortcutsIsland.vue

@@ -0,0 +1,13 @@
+<template>
+  <ErrorBoundary title="Shortcuts failed">
+    <ShortcutsModal :open="open" @close="$emit('close')" />
+  </ErrorBoundary>
+</template>
+
+<script setup lang="ts">
+import ShortcutsModal from '../components/ShortcutsModal.vue';
+import ErrorBoundary from '../components/ErrorBoundary.vue';
+
+defineProps<{ open: boolean }>();
+defineEmits<{ close: [] }>();
+</script>

package/src/islands/SidebarIsland.vue

@@ -0,0 +1,15 @@
+<template>
+  <ErrorBoundary title="Sidebar failed">
+    <AppSidebar />
+  </ErrorBoundary>
+</template>
+
+<script setup lang="ts">
+import AppSidebar from '../components/AppSidebar.vue';
+import ErrorBoundary from '../components/ErrorBoundary.vue';
+
+defineProps<{
+  activeDataset?: string;
+  activeGroup?: string;
+}>();
+</script>