@glossarist/concept-browser 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {

package/src/components/AppSidebar.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useUiStore } from '../stores/ui';
 import { useRoute, useRouter } from 'vue-router';
 import { useDsStyle } from '../utils/dataset-style';
 import { useSiteConfig } from '../config/use-site-config';
+import { useOntologyNav } from '../composables/use-ontology-nav';
 import NavIcon from './NavIcon.vue';
 
 const store = useVocabularyStore();
@@ -16,6 +17,22 @@ const { globalPages, datasetPages, config: siteConfig } = useSiteConfig();
 
 const currentDataset = computed(() => route.params.registerId as string ?? '');
 
+const {
+  activeClassId,
+  activeTaxonomy,
+  expandedClasses,
+  taxonomyKeys,
+  taxonomyLabels,
+  treeRoots,
+  supportingClasses,
+  isOverview,
+  toggleExpand,
+  childClasses,
+  hasChildren,
+} = useOntologyNav();
+
+const isOntologyRoute = computed(() => route.name === 'ontology');
+
 const datasetEntries = computed(() => {
   const entries: { id: string; title: string; loaded: boolean; conceptCount: number }[] = [];
   for (const [id, adapter] of store.datasets) {
@@ -56,6 +73,22 @@ function isActive(page: { route: string; datasetScoped?: boolean }): boolean {
   }
   return route.name === page.route;
 }
+
+function selectClass(id: string) {
+  activeClassId.value = id;
+  activeTaxonomy.value = null;
+  scrollMainToTop();
+}
+
+function selectTaxonomy(key: string) {
+  activeTaxonomy.value = key;
+  scrollMainToTop();
+}
+
+function scrollMainToTop() {
+  const main = document.querySelector('main');
+  if (main) main.scrollTo({ top: 0, behavior: 'smooth' });
+}
 </script>
 
 <template>
@@ -72,17 +105,91 @@ function isActive(page: { route: string; datasetScoped?: boolean }): boolean {
       <!-- Navigation -->
       <div class="section-label">Navigation</div>
       <nav class="space-y-0.5 mb-6">
-        <router-link
-          v-for="page in globalPages"
-          :key="page.route || 'home'"
-          :to="pageRoute(page)"
-          class="btn-ghost w-full text-left flex items-center gap-2"
-          :class="isActive(page) ? 'active' : ''"
-          @click="closeMobile"
-        >
-          <NavIcon :name="page.icon" />
-          {{ page.title }}
-        </router-link>
+        <template v-for="page in globalPages" :key="page.route || 'home'">
+          <router-link
+            :to="pageRoute(page)"
+            class="btn-ghost w-full text-left flex items-center gap-2"
+            :class="isActive(page) ? 'active' : ''"
+            @click="closeMobile"
+          >
+            <NavIcon :name="page.icon" />
+            {{ page.title }}
+          </router-link>
+
+          <!-- Ontology class tree nested under Ontology nav item -->
+          <div v-if="page.route === 'ontology' && isOntologyRoute" class="ml-4 mt-1 mb-2 space-y-0.5">
+            <!-- Overview -->
+            <button @click="activeClassId = null; activeTaxonomy = null; scrollMainToTop()"
+              class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
+              :class="isOverview ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-600 hover:bg-ink-50'"
+            >
+              <span class="w-3 text-ink-200">·</span>
+              <span class="flex-1 text-left">Overview</span>
+            </button>
+
+            <div class="text-[10px] uppercase tracking-wide text-ink-300 mt-2 mb-1 px-2">Classes</div>
+            <template v-for="root in treeRoots" :key="root.compact">
+              <button @click="selectClass(root.compact); toggleExpand(root)"
+                class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
+                :class="activeClassId === root.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-600 hover:bg-ink-50'"
+              >
+                <span v-if="hasChildren(root)" class="text-[10px] text-ink-300 w-3">{{ expandedClasses.has(root.compact) ? '▾' : '▸' }}</span>
+                <span v-else class="w-3 text-ink-200">·</span>
+                <span class="flex-1 text-left">{{ root.label }}</span>
+              </button>
+              <!-- Children -->
+              <div v-if="expandedClasses.has(root.compact) && hasChildren(root)" class="ml-3">
+                <template v-for="child in childClasses(root.compact)" :key="child.compact">
+                  <button @click="selectClass(child.compact); toggleExpand(child)"
+                    class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                    :class="activeClassId === child.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
+                  >
+                    <span v-if="hasChildren(child)" class="text-[10px] text-ink-300 w-3">{{ expandedClasses.has(child.compact) ? '▾' : '▸' }}</span>
+                    <span v-else class="w-3 text-ink-200">·</span>
+                    <span class="flex-1 text-left">{{ child.label }}</span>
+                  </button>
+                  <!-- Grandchildren -->
+                  <div v-if="expandedClasses.has(child.compact) && hasChildren(child)" class="ml-3">
+                    <button v-for="gc in childClasses(child.compact)" :key="gc.compact"
+                      @click="selectClass(gc.compact)"
+                      class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                      :class="activeClassId === gc.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+                    >
+                      <span class="w-3 text-ink-200">·</span>
+                      <span class="flex-1 text-left">{{ gc.label }}</span>
+                    </button>
+                  </div>
+                </template>
+              </div>
+            </template>
+
+            <!-- Supporting classes -->
+            <div v-if="supportingClasses.length" class="mt-2 pt-2 border-t border-ink-100/40">
+              <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1 px-2">Supporting</div>
+              <button v-for="cls in supportingClasses" :key="cls.compact"
+                @click="selectClass(cls.compact)"
+                class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                :class="activeClassId === cls.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+              >
+                <span class="w-3 text-ink-200">·</span>
+                <span class="flex-1 text-left">{{ cls.label }}</span>
+              </button>
+            </div>
+
+            <!-- SKOS Taxonomies -->
+            <div class="mt-2 pt-2 border-t border-ink-100/40">
+              <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1 px-2">Taxonomies</div>
+              <button v-for="tk in taxonomyKeys" :key="tk"
+                @click="selectTaxonomy(tk)"
+                class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                :class="activeTaxonomy === tk ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+              >
+                <span class="w-3 text-ink-200">·</span>
+                <span class="flex-1 text-left">{{ taxonomyLabels[tk] }}</span>
+              </button>
+            </div>
+          </div>
+        </template>
       </nav>
 
       <!-- Dataset-level navigation (shown when viewing a dataset) -->

package/src/composables/use-ontology-nav.ts

@@ -0,0 +1,92 @@
+import { ref, computed } from 'vue';
+import {
+  getClass,
+  getClassTree,
+  getAllClasses,
+  type OwlClass,
+} from '../adapters/ontology-schema';
+
+const OVERVIEW_ID = '__overview__';
+
+const activeClassId = ref<string | null>(null);
+const activeTaxonomy = ref<string | null>(null);
+const expandedClasses = ref(new Set<string>(['gloss:Designation']));
+
+const taxonomyKeys = [
+  'conceptStatus', 'entryStatus', 'normativeStatus', 'sourceType', 'sourceStatus',
+  'relationshipType', 'designationType', 'termType', 'grammarGender', 'grammarNumber',
+];
+
+const taxonomyLabels: Record<string, string> = {
+  conceptStatus: 'Concept Status',
+  entryStatus: 'Entry Status',
+  normativeStatus: 'Normative Status',
+  sourceType: 'Source Type',
+  sourceStatus: 'Source Status',
+  relationshipType: 'Relationship Type',
+  designationType: 'Designation Type',
+  termType: 'Term Type',
+  grammarGender: 'Grammar Gender',
+  grammarNumber: 'Grammar Number',
+};
+
+function toggleExpand(cls: OwlClass) {
+  const s = new Set(expandedClasses.value);
+  if (s.has(cls.compact)) s.delete(cls.compact);
+  else s.add(cls.compact);
+  expandedClasses.value = s;
+}
+
+function childClasses(parentId: string): OwlClass[] {
+  const cls = getClass(parentId);
+  if (!cls) return [];
+  return cls.children.map(id => getClass(id)).filter((c): c is OwlClass => !!c);
+}
+
+function hasChildren(cls: OwlClass): boolean {
+  return cls.children.length > 0;
+}
+
+const treeRoots = getClassTree();
+
+const supportingClasses = computed(() =>
+  getAllClasses().filter(
+    c => c.children.length === 0
+      && !c.subClassOf?.startsWith('gloss:')
+      && c.compact !== 'gloss:Concept'
+      && c.compact !== 'gloss:ConceptCollection'
+  )
+);
+
+const isOverview = computed(() => activeClassId.value === null && activeTaxonomy.value === null);
+
+const allNavItems = computed(() => {
+  const items: { id: string; label: string; depth: number }[] = [];
+  function walk(classes: OwlClass[], depth: number) {
+    for (const cls of classes) {
+      items.push({ id: cls.compact, label: cls.label, depth });
+      if (expandedClasses.value.has(cls.compact)) {
+        walk(childClasses(cls.compact), depth + 1);
+      }
+    }
+  }
+  walk(treeRoots, 0);
+  return items;
+});
+
+export function useOntologyNav() {
+  return {
+    activeClassId,
+    activeTaxonomy,
+    expandedClasses,
+    taxonomyKeys,
+    taxonomyLabels,
+    treeRoots,
+    supportingClasses,
+    allNavItems,
+    isOverview,
+    toggleExpand,
+    childClasses,
+    hasChildren,
+  };
+}

package/src/views/OntologySchemaView.vue

@@ -1,43 +1,24 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import {
-  getClass,
-  getAllClasses,
-  getClassTree,
-  getAllPropertiesForClass,
-  getStats,
-  type OwlClass,
-} from '../adapters/ontology-schema';
+import { computed, watch } from 'vue';
+import { getClass, getAllPropertiesForClass, getAllClasses, getStats } from '../adapters/ontology-schema';
 import { ontology, type TaxonomyConcept } from '../adapters/ontology-registry';
+import { useOntologyNav } from '../composables/use-ontology-nav';
 
 const stats = getStats();
-const allClasses = getAllClasses();
-const treeRoots = getClassTree();
-
-const taxonomyKeys = [
-  'conceptStatus', 'entryStatus', 'normativeStatus', 'sourceType', 'sourceStatus',
-  'relationshipType', 'designationType', 'termType', 'grammarGender', 'grammarNumber',
-];
-
-const taxonomyLabels: Record<string, string> = {
-  conceptStatus: 'Concept Status',
-  entryStatus: 'Entry Status',
-  normativeStatus: 'Normative Status',
-  sourceType: 'Source Type',
-  sourceStatus: 'Source Status',
-  relationshipType: 'Relationship Type',
-  designationType: 'Designation Type',
-  termType: 'Term Type',
-  grammarGender: 'Grammar Gender',
-  grammarNumber: 'Grammar Number',
-};
 
-const activeClassId = ref('gloss:Concept');
-const showTaxonomies = ref(false);
-const activeTaxonomy = ref<string | null>(null);
+const {
+  activeClassId,
+  activeTaxonomy,
+  taxonomyLabels,
+  allNavItems,
+  isOverview,
+  treeRoots,
+  hasChildren,
+  childClasses,
+} = useOntologyNav();
 
-const activeClass = computed(() => getClass(activeClassId.value));
-const activeProperties = computed(() => getAllPropertiesForClass(activeClassId.value));
+const activeClass = computed(() => activeClassId.value ? getClass(activeClassId.value) : null);
+const activeProperties = computed(() => activeClassId.value ? getAllPropertiesForClass(activeClassId.value) : { object: [], datatype: [] });
 
 function activeTaxonomyData() {
   if (!activeTaxonomy.value) return null;
@@ -47,38 +28,13 @@ function activeTaxonomyData() {
   return { scheme: ontology.getScheme(key), concepts: all, top };
 }
 
-function childClasses(parentId: string): OwlClass[] {
-  const cls = getClass(parentId);
-  if (!cls) return [];
-  return cls.children.map(id => getClass(id)).filter((c): c is OwlClass => !!c);
-}
-
-function hasChildren(cls: OwlClass): boolean {
-  return cls.children.length > 0;
-}
-
-const expandedClasses = ref(new Set<string>(['gloss:Concept', 'gloss:Designation']));
-
-function toggleExpand(cls: OwlClass) {
-  const s = new Set(expandedClasses.value);
-  if (s.has(cls.compact)) s.delete(cls.compact);
-  else s.add(cls.compact);
-  expandedClasses.value = s;
-}
-
-const allNavItems = computed(() => {
-  const items: { id: string; label: string; depth: number }[] = [];
-  function walk(classes: OwlClass[], depth: number) {
-    for (const cls of classes) {
-      items.push({ id: cls.compact, label: cls.label, depth });
-      if (expandedClasses.value.has(cls.compact)) {
-        walk(childClasses(cls.compact), depth + 1);
-      }
-    }
-  }
-  walk(treeRoots, 0);
-  return items;
+// Scroll to top when selection changes
+watch([activeClassId, activeTaxonomy], () => {
+  const main = document.querySelector('main');
+  if (main) main.scrollTo({ top: 0, behavior: 'smooth' });
 });
+
+const allClasses = getAllClasses();
 </script>
 
 <template>
@@ -97,14 +53,18 @@ const allNavItems = computed(() => {
         <span class="badge badge-blue text-[10px]">{{ stats.classCount }} classes</span>
         <span class="badge text-[10px] bg-emerald-50 text-emerald-700">{{ stats.objectPropertyCount }} object properties</span>
         <span class="badge text-[10px] bg-amber-50 text-amber-700">{{ stats.datatypePropertyCount }} datatype properties</span>
-        <span class="badge text-[10px] bg-purple-50 text-purple-700">{{ taxonomyKeys.length }} SKOS taxonomies</span>
+        <span class="badge text-[10px] bg-purple-50 text-purple-700">10 SKOS taxonomies</span>
       </div>
       <code class="block text-xs text-ink-400 mt-2">https://www.glossarist.org/ontologies/glossarist</code>
     </div>
 
-    <!-- Sticky mobile chips -->
+    <!-- Sticky mobile chips (for small screens where sidebar is hidden) -->
     <div class="lg:hidden sticky top-14 z-10 bg-surface -mx-4 px-4 py-2 border-b border-ink-100/60 mb-4">
       <div class="flex gap-2 overflow-x-auto scrollbar-none">
+        <button @click="activeClassId = null; activeTaxonomy = null"
+          class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
+          :class="isOverview ? 'bg-ink-800 text-white' : 'bg-surface-raised border border-ink-100 text-ink-600 hover:bg-ink-50'"
+        >Overview</button>
         <button v-for="item in allNavItems" :key="item.id"
           @click="activeClassId = item.id; activeTaxonomy = null"
           class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
@@ -112,10 +72,10 @@ const allNavItems = computed(() => {
             ? 'bg-ink-800 text-white'
             : 'bg-surface-raised border border-ink-100 text-ink-600 hover:bg-ink-50'"
         >
-          <span v-if="item.depth > 0" class="text-ink-300">{{ ' '.repeat(item.depth * 2) }}</span>
+          <span v-if="item.depth > 0" class="text-ink-300">{{ '&nbsp;'.repeat(item.depth * 2) }}</span>
           {{ item.label }}
         </button>
-        <button @click="activeTaxonomy = activeTaxonomy ? null : taxonomyKeys[0]; showTaxonomies = true"
+        <button @click="activeTaxonomy = activeTaxonomy ? null : 'conceptStatus'"
           class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
           :class="activeTaxonomy
             ? 'bg-ink-800 text-white'
@@ -124,179 +84,125 @@ const allNavItems = computed(() => {
       </div>
     </div>
 
-    <!-- Two-column layout -->
-    <div class="lg:grid lg:grid-cols-[220px_1fr] lg:gap-6">
-      <!-- Left: tree sidebar (desktop only) -->
-      <nav class="hidden lg:block border-r border-ink-100/60 pr-4">
-        <div class="section-label mb-2">Classes</div>
-
-        <!-- Tree roots with recursive children -->
-        <template v-for="root in treeRoots" :key="root.compact">
-          <div>
-            <button @click="activeClassId = root.compact; activeTaxonomy = null; toggleExpand(root)"
-              class="w-full flex items-center gap-1.5 px-2 py-2 rounded-lg text-sm transition-colors"
-              :class="activeClassId === root.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-600 hover:bg-ink-50'"
-            >
-              <span v-if="hasChildren(root)" class="text-[10px] text-ink-300 w-3">{{ expandedClasses.has(root.compact) ? '▾' : '▸' }}</span>
-              <span v-else class="w-3"></span>
-              <span class="flex-1 text-left">{{ root.label }}</span>
-            </button>
-
-            <!-- Children -->
-            <div v-if="expandedClasses.has(root.compact) && hasChildren(root)" class="ml-4">
-              <template v-for="child in childClasses(root.compact)" :key="child.compact">
-                <button @click="activeClassId = child.compact; activeTaxonomy = null; toggleExpand(child)"
-                  class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
-                  :class="activeClassId === child.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
-                >
-                  <span v-if="hasChildren(child)" class="text-[10px] text-ink-300 w-3">{{ expandedClasses.has(child.compact) ? '▾' : '▸' }}</span>
-                  <span v-else class="w-3 text-ink-200">·</span>
-                  <span class="flex-1 text-left">{{ child.label }}</span>
-                </button>
-                <!-- Grandchildren -->
-                <div v-if="expandedClasses.has(child.compact) && hasChildren(child)" class="ml-4">
-                  <button v-for="gc in childClasses(child.compact)" :key="gc.compact"
-                    @click="activeClassId = gc.compact; activeTaxonomy = null"
-                    class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
-                    :class="activeClassId === gc.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
-                  >
-                    <span class="w-3 text-ink-200">·</span>
-                    <span class="flex-1 text-left">{{ gc.label }}</span>
-                  </button>
-                </div>
-              </template>
+    <!-- Detail panel -->
+    <div>
+      <!-- Overview: all classes summary -->
+      <template v-if="isOverview">
+        <h2 class="text-lg font-semibold text-ink-800 mb-4">Class Overview</h2>
+        <div class="grid gap-3 sm:grid-cols-2">
+          <div v-for="cls in allClasses" :key="cls.compact"
+            @click="activeClassId = cls.compact"
+            class="border border-ink-100/60 rounded-lg p-3 cursor-pointer hover:border-ink-200 hover:bg-ink-50/50 transition-colors">
+            <div class="flex items-center gap-2">
+              <span class="text-sm font-medium text-ink-700">{{ cls.label }}</span>
+              <code class="text-[10px] text-ink-400 bg-ink-50 px-1.5 py-0.5 rounded">{{ cls.compact }}</code>
+            </div>
+            <p v-if="cls.comment" class="text-xs text-ink-400 mt-1 line-clamp-2">{{ cls.comment }}</p>
+            <div v-if="cls.subClassOf" class="text-[10px] text-ink-300 mt-1">
+              subClassOf <code class="text-ink-400">{{ cls.subClassOf }}</code>
             </div>
           </div>
-        </template>
-
-        <!-- Remaining classes not in tree (supporting) -->
-        <div class="mt-4 pt-3 border-t border-ink-100/40">
-          <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1.5">Supporting</div>
-          <button v-for="cls in allClasses.filter(c => c.children.length === 0 && !c.subClassOf?.startsWith('gloss:') && c.compact !== 'gloss:Concept' && c.compact !== 'gloss:ConceptCollection')" :key="cls.compact"
-            @click="activeClassId = cls.compact; activeTaxonomy = null"
-            class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
-            :class="activeClassId === cls.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
-          >
-            <span class="w-3 text-ink-200">·</span>
-            <span class="flex-1 text-left">{{ cls.label }}</span>
-          </button>
         </div>
-
-        <!-- Taxonomies -->
-        <div class="mt-4 pt-3 border-t border-ink-100/40">
-          <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1.5">SKOS Taxonomies</div>
-          <button v-for="tk in taxonomyKeys" :key="tk"
-            @click="activeTaxonomy = tk; showTaxonomies = true"
-            class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
-            :class="activeTaxonomy === tk ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
-          >
-            <span class="w-3 text-ink-200">·</span>
-            <span class="flex-1 text-left">{{ taxonomyLabels[tk] }}</span>
-          </button>
-        </div>
-      </nav>
-
-      <!-- Right: detail panel -->
-      <div class="mt-4 lg:mt-0">
-        <!-- Class detail -->
-        <template v-if="!activeTaxonomy && activeClass">
-          <div class="pb-4 border-b border-ink-100/60 mb-4">
-            <h2 class="text-lg font-semibold text-ink-800">{{ activeClass.label }}</h2>
-            <code class="block text-xs text-ink-400 mt-1">{{ activeClass.iri }}</code>
-            <div v-if="activeClass.subClassOf" class="flex items-center gap-2 mt-2 text-sm">
-              <span class="text-ink-400 text-xs">subClassOf</span>
-              <code class="text-xs text-ink-600 bg-ink-50 px-2 py-0.5 rounded">{{ activeClass.subClassOf }}</code>
-              <template v-if="activeClass.ancestors.length > 1">
-                <span class="text-ink-300 text-xs">→</span>
-                <code class="text-xs text-ink-500">{{ activeClass.ancestors.slice(1).join(' → ') }}</code>
-              </template>
-            </div>
-            <p v-if="activeClass.comment" class="text-sm text-ink-500 mt-3 leading-relaxed">{{ activeClass.comment }}</p>
+      </template>
+
+      <!-- Class detail -->
+      <template v-if="!activeTaxonomy && activeClass">
+        <div class="pb-4 border-b border-ink-100/60 mb-4">
+          <h2 class="text-lg font-semibold text-ink-800">{{ activeClass.label }}</h2>
+          <code class="block text-xs text-ink-400 mt-1">{{ activeClass.iri }}</code>
+          <div v-if="activeClass.subClassOf" class="flex items-center gap-2 mt-2 text-sm">
+            <span class="text-ink-400 text-xs">subClassOf</span>
+            <code class="text-xs text-ink-600 bg-ink-50 px-2 py-0.5 rounded">{{ activeClass.subClassOf }}</code>
+            <template v-if="activeClass.ancestors.length > 1">
+              <span class="text-ink-300 text-xs">→</span>
+              <code class="text-xs text-ink-500">{{ activeClass.ancestors.slice(1).join(' → ') }}</code>
+            </template>
           </div>
+          <p v-if="activeClass.comment" class="text-sm text-ink-500 mt-3 leading-relaxed">{{ activeClass.comment }}</p>
+        </div>
 
-          <!-- Object Properties -->
-          <div v-if="activeProperties.object.length" class="mb-6">
-            <h3 class="text-xs uppercase tracking-wide text-ink-300 font-medium mb-2">
-              Object Properties ({{ activeProperties.object.length }})
-            </h3>
-            <table class="w-full text-sm border-collapse">
-              <thead>
-                <tr class="border-b border-ink-100/60">
-                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Property</th>
-                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Range</th>
-                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="p in activeProperties.object" :key="p.compact" class="border-b border-ink-100/30">
-                  <td class="py-2 px-3 align-top">
-                    <code class="text-xs text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">{{ p.compact }}</code>
-                    <div v-if="p.inverseOf" class="text-[10px] text-ink-300 mt-0.5">↔ {{ p.inverseOf }}</div>
-                  </td>
-                  <td class="py-2 px-3 align-top">
-                    <code class="text-xs text-ink-500">{{ p.range || p.rangeUnion?.join(' | ') || '—' }}</code>
-                  </td>
-                  <td class="py-2 px-3 text-xs text-ink-400 align-top">{{ p.comment || '' }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+        <!-- Object Properties -->
+        <div v-if="activeProperties.object.length" class="mb-6">
+          <h3 class="text-xs uppercase tracking-wide text-ink-300 font-medium mb-2">
+            Object Properties ({{ activeProperties.object.length }})
+          </h3>
+          <table class="w-full text-sm border-collapse">
+            <thead>
+              <tr class="border-b border-ink-100/60">
+                <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Property</th>
+                <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Range</th>
+                <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="p in activeProperties.object" :key="p.compact" class="border-b border-ink-100/30">
+                <td class="py-2 px-3 align-top">
+                  <code class="text-xs text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">{{ p.compact }}</code>
+                  <div v-if="p.inverseOf" class="text-[10px] text-ink-300 mt-0.5">↔ {{ p.inverseOf }}</div>
+                </td>
+                <td class="py-2 px-3 align-top">
+                  <code class="text-xs text-ink-500">{{ p.range || p.rangeUnion?.join(' | ') || '—' }}</code>
+                </td>
+                <td class="py-2 px-3 text-xs text-ink-400 align-top">{{ p.comment || '' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
 
-          <!-- Datatype Properties -->
-          <div v-if="activeProperties.datatype.length">
-            <h3 class="text-xs uppercase tracking-wide text-ink-300 font-medium mb-2">
-              Datatype Properties ({{ activeProperties.datatype.length }})
-            </h3>
-            <table class="w-full text-sm border-collapse">
-              <thead>
-                <tr class="border-b border-ink-100/60">
-                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Property</th>
-                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Datatype</th>
-                  <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="p in activeProperties.datatype" :key="p.compact" class="border-b border-ink-100/30">
-                  <td class="py-2 px-3 align-top">
-                    <code class="text-xs text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">{{ p.compact }}</code>
-                  </td>
-                  <td class="py-2 px-3 align-top">
-                    <code class="text-xs text-ink-500">{{ p.range || '—' }}</code>
-                  </td>
-                  <td class="py-2 px-3 text-xs text-ink-400 align-top">{{ p.comment || '' }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+        <!-- Datatype Properties -->
+        <div v-if="activeProperties.datatype.length">
+          <h3 class="text-xs uppercase tracking-wide text-ink-300 font-medium mb-2">
+            Datatype Properties ({{ activeProperties.datatype.length }})
+          </h3>
+          <table class="w-full text-sm border-collapse">
+            <thead>
+              <tr class="border-b border-ink-100/60">
+                <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Property</th>
+                <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Datatype</th>
+                <th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="p in activeProperties.datatype" :key="p.compact" class="border-b border-ink-100/30">
+                <td class="py-2 px-3 align-top">
+                  <code class="text-xs text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">{{ p.compact }}</code>
+                </td>
+                <td class="py-2 px-3 align-top">
+                  <code class="text-xs text-ink-500">{{ p.range || '—' }}</code>
+                </td>
+                <td class="py-2 px-3 text-xs text-ink-400 align-top">{{ p.comment || '' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
 
-          <div v-if="!activeProperties.object.length && !activeProperties.datatype.length" class="text-sm text-ink-300 italic">
-            No properties defined directly on this class.
-          </div>
-        </template>
+        <div v-if="!activeProperties.object.length && !activeProperties.datatype.length" class="text-sm text-ink-300 italic">
+          No properties defined directly on this class.
+        </div>
+      </template>
 
-        <!-- Taxonomy detail -->
-        <template v-if="activeTaxonomy && activeTaxonomyData()">
-          <div class="pb-4 border-b border-ink-100/60 mb-4">
-            <h2 class="text-lg font-semibold text-ink-800">{{ taxonomyLabels[activeTaxonomy] }}</h2>
-            <code class="block text-xs text-ink-400 mt-1">{{ activeTaxonomyData()!.scheme }}</code>
-          </div>
+      <!-- Taxonomy detail -->
+      <template v-if="activeTaxonomy && activeTaxonomyData()">
+        <div class="pb-4 border-b border-ink-100/60 mb-4">
+          <h2 class="text-lg font-semibold text-ink-800">{{ taxonomyLabels[activeTaxonomy] }}</h2>
+          <code class="block text-xs text-ink-400 mt-1">{{ activeTaxonomyData()!.scheme }}</code>
+        </div>
 
-          <div class="space-y-2">
-            <div v-for="concept in activeTaxonomyData()!.concepts" :key="concept.id"
-              class="border border-ink-100/60 rounded-lg p-3">
-              <div class="flex items-center gap-2">
-                <code class="text-xs font-semibold text-ink-700">{{ concept.id }}</code>
-                <span class="text-sm text-ink-600">{{ concept.prefLabel }}</span>
-                <span v-if="concept.altLabel" class="text-xs text-ink-400">({{ concept.altLabel }})</span>
-              </div>
-              <p v-if="concept.definition" class="text-xs text-ink-400 mt-1 leading-relaxed">{{ concept.definition }}</p>
-              <div v-if="concept.broader" class="text-[10px] text-ink-300 mt-1">
-                broader: <code class="text-ink-400">{{ concept.broader }}</code>
-              </div>
+        <div class="space-y-2">
+          <div v-for="concept in activeTaxonomyData()!.concepts" :key="concept.id"
+            class="border border-ink-100/60 rounded-lg p-3">
+            <div class="flex items-center gap-2">
+              <code class="text-xs font-semibold text-ink-700">{{ concept.id }}</code>
+              <span class="text-sm text-ink-600">{{ concept.prefLabel }}</span>
+              <span v-if="concept.altLabel" class="text-xs text-ink-400">({{ concept.altLabel }})</span>
+            </div>
+            <p v-if="concept.definition" class="text-xs text-ink-400 mt-1 leading-relaxed">{{ concept.definition }}</p>
+            <div v-if="concept.broader" class="text-[10px] text-ink-300 mt-1">
+              broader: <code class="text-ink-400">{{ concept.broader }}</code>
             </div>
           </div>
-        </template>
-      </div>
+        </div>
+      </template>
     </div>
   </div>
 </template>