@glossarist/concept-browser 0.7.78 → 0.7.81

package/src/__tests__/partitive-hyperedge.test.ts

@@ -1,199 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import type { PartitiveHyperedge as JsonLdPartitiveHyperedge } from '../adapters/types';
-
-// Re-implements the extractor under test so we can test it in isolation
-// without spinning up the full build-edges.js pipeline. The production
-// extractor in scripts/build-edges.js uses the same logic.
-function extractPartitiveHyperedges(
-  concept: { '@id': string; 'gl:partitiveHyperedges'?: any[] },
-  registerId: string,
-  uriBase: string,
-  urnMap: Map<string, string>,
-): JsonLdPartitiveHyperedge[] {
-  const hyperedges: JsonLdPartitiveHyperedge[] = [];
-  const sourceUri = concept['@id'];
-
-  const resolveConceptUri = (ref: any): string | null => {
-    const source = ref?.['gl:source'] || ref?.source;
-    const id = ref?.['gl:id'] || ref?.id;
-    if (!source || !id) return null;
-    const reg = urnMap.get(source) || source;
-    return `${uriBase}/${reg}/concept/${id}`;
-  };
-
-  for (const he of concept['gl:partitiveHyperedges'] || []) {
-    const comprehensive = resolveConceptUri(he['gl:comprehensive']);
-    if (!comprehensive) continue;
-    const parts = (he['gl:hasPart'] || [])
-      .map(resolveConceptUri)
-      .filter((p: string | null): p is string => !!p && p !== sourceUri);
-    if (parts.length === 0) continue;
-    const rawMarkers = he['gl:hasPluralityMarker'] || [];
-    for (const m of rawMarkers) {
-      if (m !== 'double' && m !== 'dashed') {
-        throw new Error(`Invalid partitive hyperedge marker: "${m}". Allowed: double, dashed`);
-      }
-    }
-    hyperedges.push({
-      source: sourceUri,
-      comprehensive,
-      parts,
-      enumeration: he['gl:enumeration'] || 'closed',
-      markers: rawMarkers as ('double' | 'dashed')[],
-      label: he['gl:content'] || undefined,
-      register: registerId,
-    });
-  }
-  return hyperedges;
-}
-
-describe('extractPartitiveHyperedges', () => {
-  const uriBase = 'https://example.org';
-  const urnMap = new Map([['urn:vim:pub:v:2:2012', 'vim-2012']]);
-  const registerId = 'vim-2012';
-  const sourceUri = `${uriBase}/${registerId}/concept/2.9`;
-
-  it('extracts a closed hyperedge with double marker', () => {
-    const concept = {
-      '@id': sourceUri,
-      'gl:partitiveHyperedges': [
-        {
-          'gl:comprehensive': {
-            'gl:source': 'urn:vim:pub:v:2:2012',
-            'gl:id': '2.9',
-          },
-          'gl:hasPart': [
-            { 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '2.10' },
-            { 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '2.26' },
-          ],
-          'gl:enumeration': 'closed',
-          'gl:hasPluralityMarker': ['double'],
-          'gl:content': 'value + uncertainty',
-        },
-      ],
-    };
-
-    const result = extractPartitiveHyperedges(concept, registerId, uriBase, urnMap);
-    expect(result).toHaveLength(1);
-    expect(result[0].source).toBe(sourceUri);
-    expect(result[0].comprehensive).toBe(`${uriBase}/${registerId}/concept/2.9`);
-    expect(result[0].parts).toEqual([
-      `${uriBase}/${registerId}/concept/2.10`,
-      `${uriBase}/${registerId}/concept/2.26`,
-    ]);
-    expect(result[0].enumeration).toBe('closed');
-    expect(result[0].markers).toEqual(['double']);
-    expect(result[0].label).toBe('value + uncertainty');
-  });
-
-  it('defaults enumeration to closed when omitted', () => {
-    const concept = {
-      '@id': sourceUri,
-      'gl:partitiveHyperedges': [
-        {
-          'gl:comprehensive': { 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '2.9' },
-          'gl:hasPart': [{ 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '2.10' }],
-        },
-      ],
-    };
-    const [he] = extractPartitiveHyperedges(concept, registerId, uriBase, urnMap);
-    expect(he.enumeration).toBe('closed');
-  });
-
-  it('preserves open enumeration', () => {
-    const concept = {
-      '@id': sourceUri,
-      'gl:partitiveHyperedges': [
-        {
-          'gl:comprehensive': { 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '1.3' },
-          'gl:hasPart': [{ 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '1.4' }],
-          'gl:enumeration': 'open',
-        },
-      ],
-    };
-    const [he] = extractPartitiveHyperedges(concept, registerId, uriBase, urnMap);
-    expect(he.enumeration).toBe('open');
-  });
-
-  it('preserves both markers', () => {
-    const concept = {
-      '@id': sourceUri,
-      'gl:partitiveHyperedges': [
-        {
-          'gl:comprehensive': { 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '1.3' },
-          'gl:hasPart': [{ 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '1.4' }],
-          'gl:enumeration': 'open',
-          'gl:hasPluralityMarker': ['double', 'dashed'],
-        },
-      ],
-    };
-    const [he] = extractPartitiveHyperedges(concept, registerId, uriBase, urnMap);
-    expect(he.markers).toEqual(['double', 'dashed']);
-  });
-
-  it('throws on invalid marker values', () => {
-    const concept = {
-      '@id': sourceUri,
-      'gl:partitiveHyperedges': [
-        {
-          'gl:comprehensive': { 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '1.3' },
-          'gl:hasPart': [{ 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '1.4' }],
-          'gl:hasPluralityMarker': ['double', 'dotted'],
-        },
-      ],
-    };
-    expect(() => extractPartitiveHyperedges(concept, registerId, uriBase, urnMap)).toThrow(/Invalid.*marker.*dotted/);
-  });
-
-  it('skips a hyperedge whose comprehensive cannot be resolved', () => {
-    const concept = {
-      '@id': sourceUri,
-      'gl:partitiveHyperedges': [
-        {
-          'gl:comprehensive': { 'gl:id': '1.3' }, // missing source
-          'gl:hasPart': [{ 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '1.4' }],
-        },
-      ],
-    };
-    const result = extractPartitiveHyperedges(concept, registerId, uriBase, urnMap);
-    expect(result).toHaveLength(0);
-  });
-
-  it('skips a hyperedge with no resolvable parts', () => {
-    const concept = {
-      '@id': sourceUri,
-      'gl:partitiveHyperedges': [
-        {
-          'gl:comprehensive': { 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '2.9' },
-          'gl:hasPart': [{ 'gl:id': '1.4' }], // missing source
-        },
-      ],
-    };
-    const result = extractPartitiveHyperedges(concept, registerId, uriBase, urnMap);
-    expect(result).toHaveLength(0);
-  });
-
-  it('excludes the source concept from parts list (self-loop guard)', () => {
-    const concept = {
-      '@id': sourceUri,
-      'gl:partitiveHyperedges': [
-        {
-          'gl:comprehensive': { 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '2.9' },
-          'gl:hasPart': [
-            { 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '2.10' },
-            { 'gl:source': 'urn:vim:pub:v:2:2012', 'gl:id': '2.9' }, // self-ref
-          ],
-        },
-      ],
-    };
-    const [he] = extractPartitiveHyperedges(concept, registerId, uriBase, urnMap);
-    expect(he.parts).toHaveLength(1);
-    expect(he.parts[0]).toBe(`${uriBase}/${registerId}/concept/2.10`);
-  });
-
-  it('returns empty array when concept has no partitiveHyperedges', () => {
-    const concept = { '@id': sourceUri };
-    const result = extractPartitiveHyperedges(concept, registerId, uriBase, urnMap);
-    expect(result).toEqual([]);
-  });
-});

package/src/components/PartitiveHyperedgeList.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-/**
- * PartitiveHyperedgeList — renders one-to-many partitive decompositions
- * as grouped cards. Each hyperedge shows:
- *   - the comprehensive (whole) concept as the card header
- *   - the parts as indented children
- *   - enumeration badge (closed / open)
- *   - marker badges (double / dashed) when present
- *   - optional content (label / note)
- *
- * Independent of RelationshipList.vue, which renders binary edges.
- * Both consume the same edges/hyperedges stores but render in
- * separate sections.
- *
- * See concept-model/TODO.hyperedge/00-design-overview.md.
- */
-import type { PartitiveHyperedge, Manifest } from '../adapters/types';
-import { useRouter } from 'vue-router';
-import { useVocabularyStore } from '../stores/vocabulary';
-import { getFactory } from '../adapters/factory';
-import { useI18n } from '../i18n';
-import { hyperedgeStyle, markerColor, enumerationLabel } from '../utils/hyperedge-styling';
-import { conceptIdFromUri } from '../utils/concept-helpers';
-
-const props = defineProps<{
-  hyperedges: PartitiveHyperedge[];
-  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 conceptIdFromUri(uri) || 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 enumerationBadge(e: 'closed' | 'open'): string {
-  return e === 'open'
-    ? t('partitive.enumeration.open') || 'open'
-    : t('partitive.enumeration.closed') || 'closed';
-}
-</script>
-
-<template>
-  <div v-if="hyperedges.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.hyperedges') || 'Partitive groups' }}
-    </div>
-    <div
-      v-for="(he, i) in hyperedges"
-      :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">
-          {{ enumerationBadge(he.enumeration) }}
-        </span>
-        <span
-          v-for="marker in he.markers"
-          :key="marker"
-          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="marker === 'double' ? 'close-set double line: several parts of same type' : 'dashed line: plurality uncertain'"
-        >
-          {{ marker }}
-        </span>
-        <button
-          @click="navigate(he.comprehensive)"
-          class="ml-auto text-sm font-medium text-emerald-900 dark:text-emerald-100 hover:underline truncate"
-        >
-          {{ labelFor(he.comprehensive) }}
-        </button>
-      </div>
-      <div v-if="he.label" class="px-3 py-1 text-xs text-emerald-800 dark:text-emerald-200 italic border-b border-emerald-200 dark:border-emerald-800">
-        {{ he.label }}
-      </div>
-      <ul class="divide-y divide-emerald-100 dark:divide-emerald-900/30">
-        <li v-for="(part, j) in he.parts" :key="j">
-          <button
-            @click="navigate(part)"
-            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"
-          >
-            <span class="text-emerald-600 dark:text-emerald-400 mr-2">└</span>
-            {{ labelFor(part) }}
-          </button>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>

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>