@glossarist/concept-browser 0.7.77 → 0.7.80

package/src/data/taxonomies.json

@@ -45,6 +45,12 @@
         "iri": "gloss:status/retired",
         "prefLabel": "retired",
         "definition": "The concept has been retired from active use."
+      },
+      "external": {
+        "id": "external",
+        "iri": "gloss:status/external",
+        "prefLabel": "external",
+        "definition": "An external concept: referenced but not defined here. May be resolved later when another dataset is loaded (concept-model TODO.partitive-relation-v2 item 06)."
       }
     },
     "colors": {
@@ -54,7 +60,8 @@
       "not_valid": "bg-red-50 text-red-700",
       "invalid": "bg-red-50 text-red-700",
       "superseded": "bg-red-50 text-red-700",
-      "retired": "badge-gray"
+      "retired": "badge-gray",
+      "external": "bg-purple-50 text-purple-700"
     }
   },
   "entryStatus": {
@@ -264,6 +271,22 @@
         "category": "lifecycle",
         "inverseOf": "supersedes"
       },
+      "provides": {
+        "id": "provides",
+        "iri": "gloss:rel/provides",
+        "prefLabel": "provides",
+        "definition": "This concept provides substance for an external concept (one we reference but don't define). Direction: subject → external. Per concept-model TODO.partitive-relation-v2 item 07.",
+        "category": "lifecycle",
+        "inverseOf": "provided_by"
+      },
+      "provided_by": {
+        "id": "provided_by",
+        "iri": "gloss:rel/provided_by",
+        "prefLabel": "provided by",
+        "definition": "This external concept is provided by (fulfilled by) the object concept. Inverse of provides.",
+        "category": "lifecycle",
+        "inverseOf": "provides"
+      },
       "compare": {
         "id": "compare",
         "iri": "gloss:rel/compare",

package/src/i18n/locales/eng.yml

@@ -58,6 +58,12 @@ concept.example: Example
 concept.sources: Sources
 concept.designations: Designations
 concept.relations: Relations
+concept.compareWith: Compare with this edition
+concept.compareEditions: Compare editions
+concept.partitiveRelations: Partitive relations
+partitive.relations: Partitive relations
+partitive.plurality.shared: shared type
+partitive.plurality.uncertain: uncertain
 concept.classification: Classification
 concept.domains: Domains
 concept.tags: Tags

package/src/utils/partitive-relation-styling.ts

@@ -0,0 +1,62 @@
+/**
+ * Partitive relation styling — colors for one-to-many decompositions.
+ *
+ * Independent of relationship-categories.ts (which handles binary edges).
+ * Partitive relations have their own visual language:
+ *   - completeness (complete/partial) affects opacity
+ *   - plurality (type-shared, uncertain) adds accent badges
+ *
+ * v2 redesign: replaces v1 hyperedge-styling.ts per
+ * concept-model/TODO.partitive-relation-v2.
+ */
+
+import type { TypeSharedPluralityWire } from '../adapters/types';
+
+const BASE_LIGHT = '#0d9488';
+const BASE_DARK = '#2dd4bf';
+const ACCENT_SHARED_LIGHT = '#3b82f6';
+const ACCENT_SHARED_DARK = '#60a5fa';
+const ACCENT_UNCERTAIN_LIGHT = '#f59e0b';
+const ACCENT_UNCERTAIN_DARK = '#fbbf24';
+
+export interface PartitiveRelationStyle {
+  color: string;
+  badgeClass: string;
+  opacity: number;
+}
+
+export function partitiveRelationStyle(
+  completeness: 'complete' | 'partial',
+  plurality: TypeSharedPluralityWire | null,
+  isDark: boolean,
+): PartitiveRelationStyle {
+  const base = isDark ? BASE_DARK : BASE_LIGHT;
+  const opacity = completeness === 'partial' ? 0.6 : 1.0;
+
+  let badgeClass = 'badge-teal';
+  if (plurality?.isShared) {
+    badgeClass = 'badge-blue';
+    if (plurality.isUncertain) {
+      badgeClass = 'badge-yellow';
+    }
+  }
+
+  return { color: base, badgeClass, opacity };
+}
+
+export function pluralityColor(
+  plurality: TypeSharedPluralityWire,
+  isDark: boolean,
+): string {
+  if (plurality.isUncertain) return isDark ? ACCENT_UNCERTAIN_DARK : ACCENT_UNCERTAIN_LIGHT;
+  if (plurality.isShared) return isDark ? ACCENT_SHARED_DARK : ACCENT_SHARED_LIGHT;
+  return isDark ? BASE_DARK : BASE_LIGHT;
+}
+
+export function completenessLabel(completeness: 'complete' | 'partial'): string {
+  return completeness === 'partial' ? 'Partial' : 'Complete';
+}
+
+export function certaintyLabel(certainty: 'confirmed' | 'possible'): string {
+  return certainty === 'possible' ? 'Possible' : 'Confirmed';
+}

package/src/utils/sphere-math.ts

@@ -0,0 +1,54 @@
+/** Deterministic hash from string → positive integer (for seeding positions). */
+export 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);
+}
+
+/** Expand-slider → simulation parameters. Maps [0, 10] to physical constants. */
+export 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,
+    linkStrength: 0.08,
+    repMin: 0.55 + t * 0.40,
+    repStrength: 0.05,
+  };
+}
+
+/** Which side of a card does an edge connect to? */
+export 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';
+}
+
+/** Connection point on a card's side, with offset to prevent stacking. */
+export function portPoint(
+  center: { x: number; y: number },
+  side: 'top' | 'bottom' | 'left' | 'right',
+  w: number,
+  h: number,
+  offset: number,
+): { x: number; y: 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 };
+  }
+}
+
+/** Reverse lookup: find the node ID whose URI matches, in an ID→URI map. */
+export function idToUriGet(map: Map<string, string>, uri: string): string | undefined {
+  for (const [id, u] of map) if (u === uri) return id;
+  return undefined;
+}

package/src/views/DatasetView.vue

@@ -5,6 +5,7 @@ import { useVocabularyStore } from '../stores/vocabulary';
 import { useUiStore } from '../stores/ui';
 import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
+import { useDatasetStats } from '../composables/use-dataset-stats';
 import { FORMAT_LABELS } from '../config/types';
 import { langName, langLabel, sortLanguages } from '../utils/lang';
 import ConceptCard from '../components/ConceptCard.vue';
@@ -21,6 +22,7 @@ const store = useVocabularyStore();
 const uiStore = useUiStore();
 const { getStyle } = useDsStyle();
 const { ensureLoaded, loading, localError } = useDatasetLoader(() => props.registerId);
+const { stats: datasetStats } = useDatasetStats(() => props.registerId);
 const { t } = useI18n();
 const { localizedDatasetField } = useSiteConfig();
 const route = useRoute();
@@ -331,10 +333,10 @@ function clearSection() {
         <router-link :to="{ name: 'about', params: { registerId } }" class="badge badge-purple hover:opacity-80 transition-opacity">
           {{ t('nav.about') }}
         </router-link>
-        <router-link v-if="manifest.sourceCount" :to="{ name: 'sources', params: { registerId } }" class="badge badge-gray hover:opacity-80 transition-opacity">
-          {{ manifest.sourceCount }} {{ t('dataset.sources') }}
+        <router-link v-if="datasetStats?.sourceCount" :to="{ name: 'sources', params: { registerId } }" class="badge badge-gray hover:opacity-80 transition-opacity">
+          {{ datasetStats.sourceCount }} {{ t('dataset.sources') }}
         </router-link>
-        <span v-if="manifest.relationshipCount" class="badge badge-yellow">{{ manifest.relationshipCount.toLocaleString() }} {{ t('dataset.relationships') }}</span>
+        <span v-if="datasetStats?.relationshipCount" class="badge badge-yellow">{{ datasetStats.relationshipCount.toLocaleString() }} {{ t('dataset.relationships') }}</span>
       </div>
     </div>
 

package/src/views/StatsView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { computed } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
+import { useDatasetStats } from '../composables/use-dataset-stats';
 import { langName, langLabel } from '../utils/lang';
 import { useI18n } from '../i18n';
 
@@ -11,6 +12,7 @@ const props = defineProps<{ registerId?: string }>();
 const store = useVocabularyStore();
 const { getColor } = useDsStyle();
 const { loading, localError, ensureLoaded, resolvedId } = useDatasetLoader(() => props.registerId);
+const { stats: statsData, reload: reloadStats } = useDatasetStats(resolvedId);
 const { t } = useI18n();
 
 const manifest = computed(() => store.manifests.get(resolvedId.value));
@@ -54,26 +56,6 @@ function coverageColor(ratio: number): string {
   return 'bg-red-400';
 }
 
-interface StatsData {
-  sourceCount: number;
-  sources: Array<{ ref: string; types: string[]; conceptCount: number }>;
-  relationshipCount: number;
-  relationshipTypes: Record<string, number>;
-}
-
-const statsData = ref<StatsData | null>(null);
-
-async function loadStats() {
-  if (!resolvedId.value) return;
-  const base = import.meta.env.BASE_URL;
-  try {
-    const resp = await fetch(`${base}data/${resolvedId.value}/stats.json`);
-    if (resp.ok) statsData.value = await resp.json();
-  } catch {}
-}
-
-watch(() => resolvedId.value, () => { loadStats(); }, { immediate: true });
-
 const relEntries = computed(() => {
   if (!statsData.value?.relationshipTypes) return [];
   return Object.entries(statsData.value.relationshipTypes)
@@ -92,6 +74,11 @@ function sourceTypeBadge(type: string): string {
   if (type === 'lineage') return 'badge-yellow';
   return 'badge-gray';
 }
+
+async function reloadAll() {
+  await ensureLoaded();
+  reloadStats();
+}
 </script>
 
 <template>
@@ -115,7 +102,7 @@ function sourceTypeBadge(type: string): string {
       <div class="card p-8 border-red-200 bg-red-50/50 text-center">
         <p class="text-red-700 font-medium mb-1">{{ t('stats.failedToLoad') }}</p>
         <p class="text-sm text-red-600/80 mb-4">{{ localError }}</p>
-        <button @click="ensureLoaded" class="btn-primary">{{ t('stats.retry') }}</button>
+        <button @click="reloadAll" class="btn-primary">{{ t('stats.retry') }}</button>
       </div>
     </template>
     <template v-else-if="manifest">

package/src/islands/BibliographyIsland.vue

@@ -1,26 +0,0 @@
-<template>
-  <section v-if="entries.length" class="bibliography-island">
-    <h2 class="text-sm font-semibold text-ink-500 uppercase tracking-wider mb-3">Bibliography</h2>
-    <ul class="space-y-1">
-      <li v-for="entry in entries" :key="entry.id" class="text-sm flex items-start gap-2">
-        <span class="text-ink-400 font-mono text-xs shrink-0">[{{ entry.id }}]</span>
-        <div>
-          <span class="text-ink-600 dark:text-ink-300">{{ entry.reference }}</span>
-          <a v-if="entry.link" :href="entry.link" target="_blank" class="text-blue-600 hover:underline text-xs ml-2">↗</a>
-        </div>
-      </li>
-    </ul>
-  </section>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  entries: Array<{
-    id: string;
-    reference: string;
-    title?: string;
-    link?: string;
-    type?: string;
-  }>;
-}>();
-</script>

package/src/islands/ConceptDetailIsland.vue

@@ -1,27 +0,0 @@
-<template>
-  <!-- Full concept detail using the REAL ConceptDetail.vue -->
-  <ErrorBoundary title="Concept view failed" :retry-key="conceptUri">
-    <ConceptDetail
-      :concept="concept"
-      :register-id="registerId"
-      :concept-uri="conceptUri"
-    />
-  </ErrorBoundary>
-</template>
-
-<script setup lang="ts">
-import { onErrorCaptured } from 'vue';
-import ConceptDetail from '../components/ConceptDetail.vue';
-import ErrorBoundary from '../components/ErrorBoundary.vue';
-
-defineProps<{
-  concept: any;
-  registerId: string;
-  conceptUri: string;
-}>();
-
-onErrorCaptured((err) => {
-  console.error('ConceptDetail island error:', err);
-  return false;
-});
-</script>

package/src/islands/ConceptDiffIsland.vue

@@ -1,214 +0,0 @@
-<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

@@ -1,102 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-<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>