@glossarist/concept-browser 0.7.51 → 0.7.52

package/src/components/ConceptEditionRail.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+/**
+ * ConceptEditionRail — sidebar card showing a concept's supersession chain
+ * across vocabulary editions. Rendered INSIDE ConceptDetail's right sidebar
+ * (between Relations and other cards), styled identically to its neighbors.
+ *
+ * Reads `supersedes` edges from the graph engine and walks the full chain
+ * in both directions. Filter out malformed URIs that sometimes appear in
+ * stub-data scenarios.
+ */
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { useDatasetSeries, type DatasetSeriesMember } from '../composables/useDatasetSeries';
+import { useI18n } from '../i18n';
+import { UriRouter } from '../adapters/UriRouter';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  conceptUri: string;
+  registerId: string;
+  conceptId: string;
+}>();
+
+const store = useVocabularyStore();
+const router = useRouter();
+
+const { seriesForActive } = useDatasetSeries(() => props.registerId);
+const series = computed(() => seriesForActive.value);
+
+interface EditionEntry {
+  member: DatasetSeriesMember;
+  conceptUri: string;
+  conceptId: string;
+  edgeType: 'self' | 'supersedes' | 'superseded_by';
+  hops: number;
+  isCurrentEdition: boolean;  // newest valid edition in the series
+}
+
+/** Resolve a concept URI via the project's UriRouter SSOT. Returns null for
+ *  malformed or non-concept URIs (URN-form refs, external IRIs, stub data). */
+function parseStrict(uri: string): { registerId: string; conceptId: string } | null {
+  return UriRouter.parseUri(uri);
+}
+
+/** Bidirectional BFS through supersedes edges from the start URI. */
+function walkChain(startUri: string): Map<string, { type: 'supersedes' | 'superseded_by'; hops: number }> {
+  const out = new Map<string, { type: 'supersedes' | 'superseded_by'; hops: number }>();
+
+  /* Forward (concepts THIS supersedes — older editions it replaced) */
+  const forwardQueue: Array<{ uri: string; hops: number }> = [{ uri: startUri, hops: 0 }];
+  const forwardSeen = new Set<string>([startUri]);
+  while (forwardQueue.length > 0) {
+    const { uri, hops } = forwardQueue.shift()!;
+    for (const e of store.graph.getEdges(uri)) {
+      if (e.type === 'supersedes' && !forwardSeen.has(e.target)) {
+        forwardSeen.add(e.target);
+        out.set(e.target, { type: 'supersedes', hops: hops + 1 });
+        forwardQueue.push({ uri: e.target, hops: hops + 1 });
+      }
+    }
+  }
+
+  /* Backward (concepts that SUPERSEDED this — newer editions) */
+  const backwardQueue: Array<{ uri: string; hops: number }> = [{ uri: startUri, hops: 0 }];
+  const backwardSeen = new Set<string>([startUri]);
+  while (backwardQueue.length > 0) {
+    const { uri, hops } = backwardQueue.shift()!;
+    for (const e of store.graph.getIncomingEdges(uri)) {
+      if (e.type === 'supersedes' && !backwardSeen.has(e.source)) {
+        backwardSeen.add(e.source);
+        out.set(e.source, { type: 'superseded_by', hops: hops + 1 });
+        backwardQueue.push({ uri: e.source, hops: hops + 1 });
+      }
+    }
+  }
+
+  return out;
+}
+
+const editionChain = computed<EditionEntry[]>(() => {
+  const s = series.value;
+  const entries: EditionEntry[] = [];
+
+  /* Always include self — use props directly so we don't depend on URI parsing. */
+  const selfMember: DatasetSeriesMember = s?.members.find(m => m.id === props.registerId) ?? {
+    id: props.registerId,
+    ref: props.registerId,
+    year: undefined,
+    status: 'valid',
+    isCurrent: false,
+    isActive: true,
+    conceptCount: undefined,
+    registerId: props.registerId,
+  };
+  entries.push({
+    member: selfMember,
+    conceptUri: props.conceptUri,
+    conceptId: props.conceptId,
+    edgeType: 'self',
+    hops: 0,
+    isCurrentEdition: !!selfMember.isCurrent,
+  });
+
+  /* Walk the chain. Drop malformed URIs (no real concept id). */
+  const chain = walkChain(props.conceptUri);
+  for (const [uri, info] of chain) {
+    if (uri === props.conceptUri) continue;
+    const parsed = parseStrict(uri);
+    if (!parsed) continue;
+    if (entries.some(e => e.conceptUri === uri)) continue;
+
+    const member = s?.members.find(m => m.id === parsed.registerId) ?? {
+      id: parsed.registerId,
+      ref: parsed.registerId,
+      year: undefined,
+      status: 'unknown',
+      isCurrent: false,
+      isActive: false,
+      conceptCount: undefined,
+      registerId: parsed.registerId,
+    };
+
+    entries.push({
+      member,
+      conceptUri: uri,
+      conceptId: parsed.conceptId,
+      edgeType: info.type,
+      hops: info.hops,
+      isCurrentEdition: !!member.isCurrent,
+    });
+  }
+
+  /* Sort by year ascending (oldest first). */
+  entries.sort((a, b) => (a.member.year ?? 9999) - (b.member.year ?? 9999));
+
+  return entries;
+});
+
+const hasChain = computed(() => editionChain.value.length > 1);
+
+function navigate(entry: EditionEntry) {
+  if (entry.edgeType === 'self') return;
+  router.push({
+    name: 'concept',
+    params: { registerId: entry.member.id, conceptId: entry.conceptId },
+  });
+}
+
+function edgeLabel(entry: EditionEntry): string {
+  switch (entry.edgeType) {
+    case 'supersedes':     return t('edge.supersedes');
+    case 'superseded_by':  return t('edge.superseded_by');
+    default:               return '';
+  }
+}
+</script>
+
+<template>
+  <div v-if="series" class="card p-5">
+    <div class="section-label">{{ t('concept.editionSeries') }}</div>
+    <div class="mt-1 text-xs text-ink-400 italic">{{ series.title }}</div>
+
+    <div class="mt-3 space-y-1">
+      <button
+        v-for="entry in editionChain"
+        :key="entry.conceptUri"
+        type="button"
+        class="concept-link block w-full text-left rounded-md px-1.5 py-1.5 transition-colors"
+        :class="entry.edgeType === 'self'
+          ? 'bg-blue-50 dark:bg-blue-900/20'
+          : 'hover:bg-ink-50 dark:hover:bg-ink-700/40'"
+        :disabled="entry.edgeType === 'self'"
+        @click="navigate(entry)"
+      >
+        <div class="flex items-center gap-1 mb-0.5">
+          <span
+            v-if="entry.isCurrentEdition"
+            class="badge text-[9px] flex-shrink-0"
+            :class="entry.edgeType === 'self' ? 'badge-blue' : 'badge-gray'"
+            style="background: rgba(184, 147, 90, 0.18); color: #8C6A3A; border: 1px solid rgba(184, 147, 90, 0.35);"
+            :title="t('concept.currentEdition')"
+          >✦ {{ t('concept.currentEdition') }}</span>
+          <span
+            v-if="entry.edgeType !== 'self'"
+            class="badge text-[9px] flex-shrink-0 badge-gray"
+          >{{ edgeLabel(entry) }}</span>
+          <span
+            v-if="entry.edgeType === 'self'"
+            class="badge text-[9px] flex-shrink-0 badge-blue"
+          >{{ t('concept.viewing') }}</span>
+        </div>
+        <div class="flex items-baseline gap-2">
+          <span class="font-mono text-xs text-ink-500 dark:text-ink-400 flex-shrink-0">
+            {{ entry.member.year ?? '—' }}
+          </span>
+          <span class="text-sm text-ink-700 dark:text-ink-200 leading-snug truncate">
+            {{ entry.member.ref }}
+          </span>
+        </div>
+        <div
+          v-if="entry.edgeType !== 'self' || entry.conceptId !== props.conceptId"
+          class="font-mono text-[10px] text-ink-300 dark:text-ink-500 mt-0.5 leading-tight"
+        >
+          {{ entry.member.id }} · {{ entry.conceptId }}
+        </div>
+      </button>
+    </div>
+
+    <div v-if="!hasChain" class="mt-3 pt-3 border-t border-ink-100/60 dark:border-ink-700/40">
+      <div class="text-xs text-ink-400 italic">
+        {{ t('concept.noChain') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* No scoped styles — uses global `card`, `section-label`, `badge`, `concept-link` classes
+   to match the rest of ConceptDetail's sidebar. */
+</style>

package/src/components/ConceptRdfView.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import type { Concept, LocalizedConcept, Designation, Expression as ExpressionType, Abbreviation as AbbreviationType, GraphicalSymbol as GraphicalSymbolType } from 'glossarist';
-import { computed, ref } from 'vue';
-import { getClass } from '../adapters/ontology-schema';
+import { computed } from 'vue';
+import type { Concept } from 'glossarist';
+import RdfInstanceHeader from './concept-rdf/RdfInstanceHeader.vue';
+import RdfInstanceSection from './concept-rdf/RdfInstanceSection.vue';
+import RdfSourcePanel from './concept-rdf/RdfSourcePanel.vue';
+import ErrorBoundary from './ErrorBoundary.vue';
+import { useRdfDocument } from './concept-rdf/use-rdf-document';
 
 const props = defineProps<{
   concept: Concept;
@@ -9,389 +13,45 @@ const props = defineProps<{
   conceptUriValue: string;
 }>();
 
-const rdfFormat = ref<'turtle' | 'jsonld'>('turtle');
-const showSource = ref(false);
-const uriCopied = ref(false);
+const { sections, turtle, jsonld, typeChain } = useRdfDocument(
+  () => props.concept,
+  () => props.conceptUriValue,
+);
 
-function copyUri() {
-  navigator.clipboard.writeText(props.conceptUriValue);
-  uriCopied.value = true;
-  setTimeout(() => { uriCopied.value = false; }, 2000);
-}
-
-function designationClassLabel(type: string): string {
-  const map: Record<string, string> = {
-    expression: 'gloss:Expression',
-    abbreviation: 'gloss:Abbreviation',
-    symbol: 'gloss:Symbol',
-    letter_symbol: 'gloss:LetterSymbol',
-    graphical_symbol: 'gloss:GraphicalSymbol',
-  };
-  return map[type] ?? 'gloss:Designation';
-}
-
-function desigSlug(designation: string, index: number): string {
-  const slug = designation.replace(/[^a-zA-Z0-9]/g, '_');
-  if (/^_+$/.test(slug)) return `d${index}`;
-  return slug;
-}
-
-function formatCitation(c: any): string {
-  if (!c) return '';
-  if (c.source && c.id) return `${c.source} ${c.id}`;
-  if (c.ref?.source) {
-    const r = c.ref;
-    return r.id ? `${r.source} ${r.id}` : r.source;
-  }
-  return '';
-}
-
-// ── Instance data extraction ─────────────────────────────────────────────
-
-interface PropValue {
-  predicate: string;
-  values: string[];
-  nested?: boolean;
-}
-
-interface ClassInstance {
-  classId: string;
-  classLabel: string;
-  label: string;
-  props: PropValue[];
-}
-
-function conceptInstance(): ClassInstance {
-  const c = props.concept;
-  const pv: PropValue[] = [];
-  const add = (pred: string, ...vals: string[]) => {
-    const filtered = vals.filter(Boolean);
-    if (filtered.length) pv.push({ predicate: pred, values: filtered });
-  };
-  const addNested = (pred: string, ...vals: string[]) => {
-    const filtered = vals.filter(Boolean);
-    if (filtered.length) pv.push({ predicate: pred, values: filtered, nested: true });
-  };
-
-  add('gloss:identifier', c.id);
-  if (c.status) add('gloss:hasStatus', `gloss:status/${c.status}`);
-  for (const d of c.domains) addNested('gloss:hasDomain', d.conceptId || d.urn || '');
-  for (const s of c.sources) addNested('gloss:hasSource', formatCitation(s.origin));
-  for (const d of c.dates) addNested('gloss:hasDate', `${d.type}: ${d.date}`);
-  for (const r of c.relatedConcepts) {
-    const refLabel = r.content || (r.ref ? `${r.ref.source || ''} ${r.ref.id || ''}`.trim() : '');
-    addNested('gloss:hasRelatedConcept', `${r.type}: ${refLabel}`);
-  }
-  for (const lang of c.languages) addNested('gloss:hasLocalization', `${lang}: ${c.localization(lang)?.primaryDesignation ?? ''}`);
-
-  return { classId: 'gloss:Concept', classLabel: 'Concept', label: c.id, props: pv };
-}
-
-function localizedInstance(lc: LocalizedConcept): ClassInstance {
-  const pv: PropValue[] = [];
-  const add = (pred: string, ...vals: string[]) => {
-    const filtered = vals.filter(Boolean);
-    if (filtered.length) pv.push({ predicate: pred, values: filtered });
-  };
-  const addNested = (pred: string, ...vals: string[]) => {
-    const filtered = vals.filter(Boolean);
-    if (filtered.length) pv.push({ predicate: pred, values: filtered, nested: true });
-  };
-
-  add('dcterms:language', lc.languageCode ?? '');
-  if (lc.entryStatus) add('gloss:hasEntryStatus', `gloss:entstatus/${lc.entryStatus}`);
-  addNested('gloss:isLocalizationOf', props.conceptUriValue);
-  for (const d of lc.terms) addNested(d.normativeStatus === 'preferred' ? 'skosxl:prefLabel' : 'skosxl:altLabel', d.designation);
-  for (const d of lc.definitions) if (d.content) addNested('gloss:hasDefinition', d.content);
-  for (const n of lc.notes) if (n.content) addNested('gloss:hasNote', n.content);
-  for (const e of lc.examples) if (e.content) addNested('gloss:hasExample', e.content);
-  for (const s of lc.sources) addNested('gloss:hasSource', formatCitation(s.origin));
-  if (lc.domain) add('gloss:domain', lc.domain);
-
-  return {
-    classId: 'gloss:LocalizedConcept',
-    classLabel: 'LocalizedConcept',
-    label: `${lc.languageCode}: ${lc.primaryDesignation ?? ''}`,
-    props: pv,
-  };
-}
-
-function designationInstance(d: Designation): ClassInstance {
-  const pv: PropValue[] = [];
-  const add = (pred: string, ...vals: string[]) => {
-    const filtered = vals.filter(Boolean);
-    if (filtered.length) pv.push({ predicate: pred, values: filtered });
-  };
-
-  add('xl:literalForm', `${d.designation}${d.language ? '@' + d.language : ''}`);
-  if (d.normativeStatus) add('gloss:normativeStatus', `gloss:norm/${d.normativeStatus}`);
-  if (d.geographicalArea) add('gloss:geographicalArea', d.geographicalArea);
-  if (d.international) add('gloss:isInternational', 'true');
-  if (d.absent) add('gloss:isAbsent', 'true');
-  if (d.termType) add('gloss:hasTermType', d.termType);
-  for (const p of d.pronunciations ?? []) add('gloss:hasPronunciation', p.content || '');
-
-  if (d.type === 'expression' || d.type === 'abbreviation') {
-    const expr = d as ExpressionType;
-    if (expr.prefix) add('gloss:prefix', expr.prefix);
-    if (expr.usageInfo) add('gloss:usageInfo', expr.usageInfo);
-    if (expr.fieldOfApplication) add('gloss:fieldOfApplication', expr.fieldOfApplication);
-    for (const gi of expr.grammarInfo ?? []) {
-      const parts: string[] = [];
-      if (gi.gender) parts.push(`gender:${gi.gender}`);
-      if (gi.number) parts.push(`number:${gi.number}`);
-      if (gi.partOfSpeech) parts.push(`pos:${gi.partOfSpeech}`);
-      if (parts.length) add('gloss:hasGrammarInfo', parts.join(', '));
-    }
-  }
-
-  if (d.type === 'abbreviation') {
-    const abbr = d as AbbreviationType;
-    if (abbr.acronym) add('gloss:isAcronym', 'true');
-    if (abbr.initialism) add('gloss:isInitialism', 'true');
-    if (abbr.truncation) add('gloss:isTruncation', 'true');
-  }
-
-  if (d.type === 'graphical_symbol') {
-    const gs = d as GraphicalSymbolType;
-    if (gs.text) add('gloss:text', gs.text);
-    if (gs.image) add('gloss:image', gs.image);
-  }
-
-  return {
-    classId: designationClassLabel(d.type),
-    classLabel: designationClassLabel(d.type).replace('gloss:', ''),
-    label: d.designation,
-    props: pv,
-  };
-}
-
-// ── Build all sections ──────────────────────────────────────────────
-
-const sections = computed<ClassInstance[]>(() => {
-  const result: ClassInstance[] = [];
-  result.push(conceptInstance());
-
-  for (const lang of props.concept.languages) {
-    const lc = props.concept.localization(lang);
-    if (!lc) continue;
-    result.push(localizedInstance(lc));
-    for (const d of lc.terms) {
-      result.push(designationInstance(d));
-    }
-  }
-
-  return result;
-});
-
-// ── Type chain for hierarchy ─────────────────────────────────────────
-
-const typeChain = computed(() => {
-  const conceptCls = getClass('gloss:Concept');
-  if (!conceptCls) return ['owl:Thing', 'skos:Concept', 'gloss:Concept'];
-  return ['owl:Thing', ...conceptCls.ancestors, 'gloss:Concept'];
-});
-
-// ── Turtle source ────────────────────────────────────────────────────
-
-const turtleSource = computed(() => {
-  const lines: string[] = [];
-  const ind = '  ';
-  const c = props.concept;
-  const uri = props.conceptUriValue;
-
-  lines.push('@prefix gloss: <https://www.glossarist.org/ontologies/> .');
-  lines.push('@prefix skos: <http://www.w3.org/2004/02/skos/core#> .');
-  lines.push('@prefix xl: <http://www.w3.org/2008/05/skos-xl#> .');
-  lines.push('@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .');
-  lines.push('@prefix dcterms: <http://purl.org/dc/terms/> .');
-  lines.push('');
-
-  lines.push(`<${uri}> a gloss:Concept, skos:Concept ;`);
-  lines.push(`${ind}gloss:identifier "${c.id}" ;`);
-  if (c.status) lines.push(`${ind}gloss:hasStatus gloss:status/${c.status} ;`);
-  for (const lang of c.languages) lines.push(`${ind}gloss:hasLocalization <${uri}/${lang}> ;`);
-  for (const r of c.relatedConcepts) {
-    lines.push(`${ind}gloss:hasRelatedConcept [`);
-    lines.push(`${ind}${ind}gloss:relationshipType gloss:rel/${r.type} ;`);
-    if (r.content) lines.push(`${ind}${ind}gloss:relationshipContent "${r.content}" ;`);
-    if (r.ref) {
-      if (r.ref.source) lines.push(`${ind}${ind}gloss:conceptSource "${r.ref.source}" ;`);
-      if (r.ref.id) lines.push(`${ind}${ind}gloss:conceptId "${r.ref.id}" ;`);
-    }
-    lines.push(`${ind}] ;`);
-  }
-  lines[lines.length - 1] = lines[lines.length - 1].replace(/ ;$/, ' .');
-
-  for (const lang of c.languages) {
-    const lc = c.localization(lang);
-    if (!lc) continue;
-    lines.push('');
-    lines.push(`<${uri}/${lang}> a gloss:LocalizedConcept, skos:Concept ;`);
-    lines.push(`${ind}dcterms:language "${lang}" ;`);
-    lines.push(`${ind}gloss:isLocalizationOf <${uri}> ;`);
-    if (lc.entryStatus) lines.push(`${ind}gloss:hasEntryStatus gloss:entstatus/${lc.entryStatus} ;`);
-    for (let di = 0; di < lc.terms.length; di++) {
-      const d = lc.terms[di];
-      const normPrefix = d.normativeStatus === 'preferred' ? 'skosxl:prefLabel' : 'skosxl:altLabel';
-      lines.push(`${ind}${normPrefix} <${uri}/${lang}/desig/${desigSlug(d.designation, di)}> ;`);
-    }
-    for (const def of lc.definitions) {
-      if (def.content) lines.push(`${ind}gloss:hasDefinition [ rdf:value "${def.content}" ] ;`);
-    }
-    lines[lines.length - 1] = lines[lines.length - 1].replace(/ ;$/, ' .');
-
-    for (let di = 0; di < lc.terms.length; di++) {
-      const d = lc.terms[di];
-      const desigUri = `${uri}/${lang}/desig/${desigSlug(d.designation, di)}`;
-      const dc = designationClassLabel(d.type);
-      lines.push('');
-      lines.push(`<${desigUri}> a ${dc}, xl:Label ;`);
-      lines.push(`${ind}xl:literalForm "${d.designation}"@${lang} ;`);
-      if (d.normativeStatus) lines.push(`${ind}gloss:normativeStatus gloss:norm/${d.normativeStatus} ;`);
-      lines[lines.length - 1] = lines[lines.length - 1].replace(/ ;$/, ' .');
-    }
-  }
-
-  return lines.join('\n');
-});
-
-// ── JSON-LD source ──────────────────────────────────────────────────
-
-const jsonldSource = computed(() => {
-  const c = props.concept;
-  const uri = props.conceptUriValue;
-
-  const doc: any = {
-    '@context': {
-      gloss: 'https://www.glossarist.org/ontologies/',
-      skos: 'http://www.w3.org/2004/02/skos/core#',
-      xl: 'http://www.w3.org/2008/05/skos-xl#',
-      dcterms: 'http://purl.org/dc/terms/',
-    },
-    '@graph': [],
-  };
-
-  const conceptNode: any = {
-    '@id': uri,
-    '@type': ['gloss:Concept', 'skos:Concept'],
-    'gloss:identifier': c.id,
-  };
-  if (c.status) conceptNode['gloss:hasStatus'] = { '@id': `gloss:status/${c.status}` };
-  conceptNode['gloss:hasLocalization'] = c.languages.map(l => ({ '@id': `${uri}/${l}` }));
-  doc['@graph'].push(conceptNode);
-
-  for (const lang of c.languages) {
-    const lc = c.localization(lang);
-    if (!lc) continue;
-    const lcNode: any = {
-      '@id': `${uri}/${lang}`,
-      '@type': ['gloss:LocalizedConcept', 'skos:Concept'],
-      'dcterms:language': lang,
-      'gloss:isLocalizationOf': { '@id': uri },
-    };
-    if (lc.entryStatus) lcNode['gloss:hasEntryStatus'] = { '@id': `gloss:entstatus/${lc.entryStatus}` };
-    for (let di = 0; di < lc.terms.length; di++) {
-      const d = lc.terms[di];
-      const key = d.normativeStatus === 'preferred' ? 'skosxl:prefLabel' : 'skosxl:altLabel';
-      lcNode[key] = lcNode[key] || [];
-      lcNode[key].push({ '@id': `${uri}/${lang}/desig/${desigSlug(d.designation, di)}` });
-    }
-    doc['@graph'].push(lcNode);
-
-    for (let di = 0; di < lc.terms.length; di++) {
-      const d = lc.terms[di];
-      const desigUri = `${uri}/${lang}/desig/${desigSlug(d.designation, di)}`;
-      const desigNode: any = {
-        '@id': desigUri,
-        '@type': [designationClassLabel(d.type), 'xl:Label'],
-        'xl:literalForm': { '@value': d.designation, '@language': lang },
-      };
-      if (d.normativeStatus) desigNode['gloss:normativeStatus'] = { '@id': `gloss:norm/${d.normativeStatus}` };
-      doc['@graph'].push(desigNode);
-    }
-  }
-
-  return JSON.stringify(doc, null, 2);
-});
-
-const rdfSource = computed(() => rdfFormat.value === 'turtle' ? turtleSource.value : jsonldSource.value);
+const resourceCount = computed(() => sections.value.length);
+const conceptId = computed(() => props.concept.id);
 </script>
 
 <template>
-  <div class="space-y-6">
-    <!-- Instance header -->
-    <div class="card p-5">
-      <div class="flex items-start justify-between gap-3">
-        <div class="min-w-0">
-          <div class="text-[10px] uppercase tracking-widest text-ink-300 font-medium mb-2">RDF Instance</div>
-          <div class="flex items-center gap-2 flex-wrap">
-            <code class="text-sm font-mono text-ink-700 break-all">{{ conceptUriValue }}</code>
-            <button @click="copyUri" class="p-1.5 rounded text-ink-300 hover:text-ink-600 hover:bg-ink-50 transition-colors flex-shrink-0" :title="uriCopied ? 'Copied!' : 'Copy URI'">
-              <svg v-if="!uriCopied" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10a2 2 0 01-2-2v-1m6 4v-3a2 2 0 00-2-2H8"/></svg>
-              <svg v-else class="w-3.5 h-3.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
-            </button>
-          </div>
-          <div class="flex gap-1.5 mt-2.5">
-            <router-link to="/ontology/class/gloss-Concept" class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-blue-50 text-blue-700 border border-blue-100 hover:bg-blue-100 transition-colors">gloss:Concept</router-link>
-            <router-link to="/ontology/class/gloss-Concept" class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-emerald-50 text-emerald-700 border border-emerald-100 hover:bg-emerald-100 transition-colors">skos:Concept</router-link>
-          </div>
-        </div>
-      </div>
-
-      <!-- Mini hierarchy -->
-      <div class="mt-4 pt-3 border-t border-ink-100/60">
-        <div class="flex items-center gap-1.5 flex-wrap text-xs text-ink-400">
-          <template v-for="(t, i) in typeChain" :key="i">
-            <span v-if="i > 0" class="text-ink-200 mx-0.5">→</span>
-            <code class="text-[11px] text-ink-400">{{ t }}</code>
-          </template>
-          <span class="text-ink-200 mx-0.5">→</span>
-          <code class="text-[11px] text-ink-700 font-semibold bg-ink-50 px-1.5 py-0.5 rounded">{{ concept.id }}</code>
+  <ErrorBoundary title="RDF view failed" :retry-key="conceptUriValue">
+    <div class="space-y-6">
+      <div class="card p-5">
+        <div class="flex items-start justify-between gap-3">
+          <RdfInstanceHeader :uri="conceptUriValue" :concept-id="conceptId" />
         </div>
-      </div>
-    </div>
-
-    <!-- Property-value panels per class -->
-    <div v-for="(section, si) in sections" :key="si" class="card p-5">
-      <div class="flex items-center gap-2 mb-3">
-        <div class="w-1 h-4 rounded-full" :class="section.classId === 'gloss:Concept' ? 'bg-blue-500' : section.classId === 'gloss:LocalizedConcept' ? 'bg-emerald-500' : 'bg-amber-500'"></div>
-        <router-link :to="`/ontology/class/${section.classId.replace(/:/g, '-')}`" class="text-xs font-semibold text-ink-700 hover:text-blue-600 transition-colors">{{ section.classId }}</router-link>
-        <span class="text-xs text-ink-400">·</span>
-        <span class="text-xs text-ink-500">{{ section.label }}</span>
-      </div>
-
-      <div class="space-y-1.5">
-        <div v-for="prop in section.props" :key="prop.predicate" class="grid grid-cols-[160px_1fr] gap-x-3 gap-y-0.5 py-1.5 border-b border-ink-100/30 last:border-0">
-          <code class="text-xs text-blue-600 font-medium leading-relaxed self-start pt-0.5">{{ prop.predicate }}</code>
-          <div class="flex flex-col gap-0.5">
-            <template v-for="(val, vi) in prop.values" :key="vi">
-              <span v-if="prop.nested" class="text-xs text-ink-600 bg-ink-50/60 px-2 py-1 rounded border-l-2 border-ink-200 leading-relaxed break-words">{{ val }}</span>
-              <span v-else class="text-xs text-ink-600 leading-relaxed break-words">{{ val }}</span>
+        <div class="mt-4 pt-3 border-t border-ink-100/60">
+          <div class="flex items-center gap-1.5 flex-wrap text-xs text-ink-400">
+            <template v-for="(t, i) in typeChain" :key="i">
+              <span v-if="i > 0" class="text-ink-200 mx-0.5">→</span>
+              <code class="text-[11px] text-ink-400">{{ t }}</code>
             </template>
+            <span class="text-ink-200 mx-0.5">→</span>
+            <code class="text-[11px] text-ink-700 font-semibold bg-ink-50 px-1.5 py-0.5 rounded">{{ concept.id }}</code>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- RDF Source panel -->
-    <div class="card overflow-hidden">
-      <button @click="showSource = !showSource" class="w-full flex items-center justify-between px-5 py-3.5 text-left hover:bg-ink-50/30 transition-colors">
-        <div class="flex items-center gap-2">
-          <svg class="w-4 h-4 text-ink-400 transition-transform" :class="showSource ? 'rotate-90' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
-          <span class="text-sm font-medium text-ink-700">RDF Source</span>
-        </div>
-        <div class="flex items-center gap-2">
-          <select v-model="rdfFormat" @click.stop class="text-xs border border-ink-200 rounded px-2 py-1 bg-surface text-ink-600 focus:outline-none focus:ring-1 focus:ring-blue-400">
-            <option value="turtle">Turtle</option>
-            <option value="jsonld">JSON-LD</option>
-          </select>
-          <span class="text-[10px] text-ink-300">{{ sections.length }} resources</span>
-        </div>
-      </button>
-      <div v-if="showSource" class="border-t border-ink-100/60">
-        <pre class="p-4 text-xs font-mono text-ink-700 bg-ink-50/30 overflow-x-auto leading-relaxed max-h-[600px] overflow-y-auto">{{ rdfSource }}</pre>
-      </div>
+      <RdfInstanceSection
+        v-for="(section, si) in sections"
+        :key="si"
+        :section="section"
+      />
+
+      <RdfSourcePanel
+        :turtle="turtle"
+        :jsonld="jsonld"
+        :resource-count="resourceCount"
+      />
     </div>
-  </div>
+  </ErrorBoundary>
 </template>