@glossarist/concept-browser 0.7.16 → 0.7.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.7.16",
+  "version": "0.7.20",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {
@@ -29,6 +29,7 @@
     "js-yaml": "^4.1.0",
     "pinia": "^2.3.1",
     "postcss": "^8.5.3",
+    "sharp": "^0.34.5",
     "tailwindcss": "^3.4.17",
     "vite": "^6.3.5",
     "vue": "^3.5.13",

package/scripts/build-edges.js

@@ -8,6 +8,8 @@
 import { readFileSync, writeFileSync, readdirSync, existsSync } from 'fs';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
+import yaml from 'js-yaml';
+import { Register } from 'glossarist';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = process.cwd();
@@ -47,9 +49,35 @@ function extractDomains(concept, registerId, uriBase) {
   const base = uriBase || 'https://glossarist.org';
   const edges = [];
   const sourceUri = concept['@id'];
+  const seen = new Set();
+
+  // v3 managed concept-level section/domain references
+  const domains = concept['gl:domain'];
+  if (Array.isArray(domains)) {
+    for (const d of domains) {
+      const conceptId = d['gl:conceptId'] || d.concept_id;
+      if (conceptId) {
+        const refType = d['gl:refType'] || d.ref_type || 'domain';
+        const isSection = refType === 'section';
+        const edgeType = isSection ? 'section' : 'domain';
+        const domainUri = `${base}/${registerId}/domain/${conceptId}`;
+        if (!seen.has(domainUri)) {
+          seen.add(domainUri);
+          edges.push({
+            source: sourceUri,
+            target: domainUri,
+            type: edgeType,
+            label: conceptId,
+            register: registerId,
+          });
+        }
+      }
+    }
+  }
+
+  // Legacy: localized domain strings
   const lcs = concept['gl:localizedConcept'] || {};
   const langs = Object.keys(lcs);
-  const seen = new Set();
   for (const lang of langs) {
     const domain = lcs[lang]['gl:domain'];
     if (domain && !seen.has(domain)) {
@@ -97,7 +125,7 @@ function extractAllEdges(concept, registerId, uriBase, urnMap) {
 
 // --- Build ---
 
-function buildEdgesForDataset(datasetDir, registerId, uriBase, urnMap) {
+function buildEdgesForDataset(datasetDir, registerId, uriBase, urnMap, manifest) {
   const conceptsDir = join(datasetDir, 'concepts');
   if (!existsSync(conceptsDir)) {
     console.log(`  Skipping ${registerId}: no concepts directory`);
@@ -118,7 +146,7 @@ function buildEdgesForDataset(datasetDir, registerId, uriBase, urnMap) {
       allEdges.push(...edges);
 
       for (const edge of edges) {
-        if (edge.type === 'domain') {
+        if (edge.type === 'domain' || edge.type === 'section') {
           domainConceptCount.set(edge.target, (domainConceptCount.get(edge.target) || 0) + 1);
         }
       }
@@ -152,30 +180,66 @@ function buildEdgesForDataset(datasetDir, registerId, uriBase, urnMap) {
   writeFileSync(outputPath, JSON.stringify(output, null, 2));
   console.log(`  Written ${deduped.length} edges to edges.json (${(JSON.stringify(output).length / 1024).toFixed(1)} KB)`);
 
-  // Build domain-nodes.json
-  const domainEdgeMap = new Map();
-  for (const edge of deduped) {
-    if (edge.type === 'domain') {
-      const existing = domainEdgeMap.get(edge.target);
-      if (existing) {
-        existing.labels.add(edge.label);
-      } else {
-        domainEdgeMap.set(edge.target, { uri: edge.target, labels: new Set([edge.label]), registerId });
+  // Build domain-nodes.json from manifest sections (authoritative source)
+  const manifestSections = manifest.sections;
+  if (manifestSections && manifestSections.length > 0) {
+    const uriBase = manifest.uriBase || 'https://glossarist.org';
+
+    function buildSectionNode(section, idx) {
+      const sectionId = `section-${section.id}`;
+      const domainUri = `${uriBase}/${registerId}/domain/${sectionId}`;
+      const domainLabel = section.names?.eng || section.id;
+      const node = {
+        uri: domainUri,
+        id: sectionId,
+        names: section.names || {},
+        label: domainLabel,
+        registerId,
+        conceptCount: domainConceptCount.get(domainUri) || 0,
+        order: idx,
+      };
+      if (section.children && section.children.length > 0) {
+        node.children = section.children.map((child, childIdx) =>
+          buildSectionNode(child, childIdx)
+        );
       }
+      return node;
     }
-  }
 
-  const domainNodes = [...domainEdgeMap.values()].map(d => ({
-    uri: d.uri,
-    label: [...d.labels][0],
-    registerId: d.registerId,
-    conceptCount: domainConceptCount.get(d.uri) || 0,
-  })).sort((a, b) => b.conceptCount - a.conceptCount);
-
-  const domainOutput = { registerId, domainNodes };
-  const domainPath = join(datasetDir, 'domain-nodes.json');
-  writeFileSync(domainPath, JSON.stringify(domainOutput, null, 2));
-  console.log(`  Written ${domainNodes.length} domain nodes to domain-nodes.json`);
+    const domainNodes = manifestSections.map((section, idx) =>
+      buildSectionNode(section, idx)
+    );
+
+    const domainOutput = { registerId, domainNodes };
+    const domainPath = join(datasetDir, 'domain-nodes.json');
+    writeFileSync(domainPath, JSON.stringify(domainOutput, null, 2));
+    console.log(`  Written ${domainNodes.length} section-based domain nodes to domain-nodes.json`);
+  } else {
+    // Fallback: derive domain nodes from concept edges (legacy behavior)
+    const domainEdgeMap = new Map();
+    for (const edge of deduped) {
+      if (edge.type === 'domain') {
+        const existing = domainEdgeMap.get(edge.target);
+        if (existing) {
+          existing.labels.add(edge.label);
+        } else {
+          domainEdgeMap.set(edge.target, { uri: edge.target, labels: new Set([edge.label]), registerId });
+        }
+      }
+    }
+
+    const domainNodes = [...domainEdgeMap.values()].map(d => ({
+      uri: d.uri,
+      label: [...d.labels][0],
+      registerId: d.registerId,
+      conceptCount: domainConceptCount.get(d.uri) || 0,
+    })).sort((a, b) => b.conceptCount - a.conceptCount);
+
+    const domainOutput = { registerId, domainNodes };
+    const domainPath = join(datasetDir, 'domain-nodes.json');
+    writeFileSync(domainPath, JSON.stringify(domainOutput, null, 2));
+    console.log(`  Written ${domainNodes.length} edge-derived domain nodes to domain-nodes.json`);
+  }
 }
 
 // Main
@@ -217,7 +281,7 @@ for (const ds of datasets) {
   try {
     console.log(`${manifest.title} (${ds}):`);
     const uriBase = manifest.uriBase || 'https://glossarist.org';
-    buildEdgesForDataset(join(DATA_DIR, ds), ds, uriBase, urnMap);
+    buildEdgesForDataset(join(DATA_DIR, ds), ds, uriBase, urnMap, manifest);
   } catch (e) {
     console.error(`Error reading manifest for ${ds}: ${e.message}`);
   }

package/scripts/generate-data.mjs

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import yaml from 'js-yaml';
-import { naturalSort } from 'glossarist';
+import { naturalSort, Register } from 'glossarist';
 import { loadSiteConfig } from './load-site-config.mjs';
 
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
@@ -774,6 +774,9 @@ function processDataset(dir, register, opts) {
   if (opts.languageOrder) manifest.languageOrder = opts.languageOrder;
   if (opts.ref) manifest.ref = opts.ref;
   if (opts.refAliases) manifest.refAliases = opts.refAliases;
+  if (opts.status) manifest.editionStatus = opts.status;
+  if (opts.ordering) manifest.ordering = opts.ordering;
+  if (opts.sections && opts.sections.length > 0) manifest.sections = opts.sections;
   writeJson(path.join(DATA, register, 'manifest.json'), manifest);
 
   // Copy bibliography.yaml → bibliography.json
@@ -811,6 +814,21 @@ const { config } = loadSiteConfig();
 const refMaps = buildRefMaps(config);
 const counts = {};
 const registry = [];
+const registerCache = {};
+
+// Pre-load all register.yaml files
+for (const ds of config.datasets) {
+  const registerDir = path.join(ROOT, '.datasets', ds.id);
+  const registerYamlPath = path.join(registerDir, 'register.yaml');
+  if (fs.existsSync(registerYamlPath)) {
+    try {
+      const raw = yaml.load(fs.readFileSync(registerYamlPath, 'utf8'));
+      registerCache[ds.id] = Register.fromJSON(raw);
+    } catch (e) {
+      console.warn(`  Warning: failed to parse register.yaml for ${ds.id}: ${e.message}`);
+    }
+  }
+}
 
 for (let i = 0; i < config.datasets.length; i++) {
   const ds = config.datasets[i];
@@ -822,28 +840,41 @@ for (let i = 0; i < config.datasets.length; i++) {
     continue;
   }
 
-  const registerDir = path.join(ROOT, '.datasets', ds.id);
-  const registerYamlPath = path.join(registerDir, 'register.yaml');
-  let registerMeta = {};
-  if (fs.existsSync(registerYamlPath)) {
-    try { registerMeta = readYaml(registerYamlPath) || {}; } catch {}
-  }
+  // Use cached register
+  const reg = registerCache[ds.id] || null;
 
-  const dsLanguages = ds.languages || (registerMeta.subregisters ? Object.keys(registerMeta.subregisters) : ['eng']);
+  // Resolve languages: register.yaml first, then site-config fallback
+  const dsLanguages = (reg?.languages?.length ? reg.languages : null)
+    || ds.languages
+    || ['eng'];
+
+  // Resolve description: register.yaml first, then site-config
+  const defaultLang = dsLanguages[0] || 'eng';
+  const regDesc = reg?.description;
+  const dsDesc = ds.description;
+  const resolvedDescription = (typeof regDesc === 'object' && Object.keys(regDesc).length > 0)
+    ? regDesc[defaultLang] || Object.values(regDesc)[0] || ''
+    : dsDesc || '';
+
+  // Resolve title: site-config override, then ref from register
+  const resolvedTitle = ds.title || reg?.ref || ds.id;
 
   counts[ds.id] = processDataset(dir, ds.id, {
-    title: ds.title || registerMeta.name || ds.id,
-    description: ds.description || registerMeta.description || '',
-    owner: ds.owner,
+    title: resolvedTitle,
+    description: resolvedDescription,
+    owner: ds.owner || reg?.owner,
     languages: dsLanguages,
-    sourceRepo: ds.sourceRepo,
-    languageOrder: ds.languageOrder,
-    ref: ds.ref,
-    refAliases: ds.refAliases,
-    tags: ds.tags,
+    sourceRepo: ds.sourceRepo || reg?.sourceRepo,
+    languageOrder: ds.languageOrder || reg?.languageOrder,
+    ref: ds.ref || reg?.ref,
+    refAliases: ds.refAliases || reg?.refAliases,
+    tags: ds.tags || reg?.tags,
     color: ds.color || DS_PALETTE[i % DS_PALETTE.length],
-    datasetUri: ds.uri,
-    uriAliases: ds.uriAliases,
+    datasetUri: ds.uri || reg?.urn,
+    uriAliases: ds.uriAliases || reg?.urnAliases,
+    status: ds.editionStatus || reg?.status,
+    ordering: reg?.ordering || null,
+    sections: reg?.sections ? reg.sections.map(s => s.toJSON()) : [],
     hasBibliography: fs.existsSync(path.join(ROOT, '.datasets', ds.id, 'bibliography.yaml')),
     hasImages: fs.existsSync(path.join(ROOT, '.datasets', ds.id, 'images')),
   });
@@ -1126,21 +1157,32 @@ function processPages(config) {
 
 const processedPages = processPages(config);
 
-// Auto-generate dataset about pages from {localPath}/about.md
+// Auto-generate dataset about pages from {localPath}/about-{lang}.md
 const _pagesDir = path.join(PUBLIC, 'pages');
 for (const ds of config.datasets || []) {
   if (!ds.localPath) continue;
-  const aboutSrc = path.resolve(ROOT, ds.localPath, 'about.md');
-  if (!fs.existsSync(aboutSrc)) continue;
-  const raw = fs.readFileSync(aboutSrc, 'utf8');
-  const html = renderMarkdown(stripFrontmatter(raw));
+  const dsDir = path.resolve(ROOT, ds.localPath);
+  const defaultLang = (ds.languages || ['eng'])[0];
   const route = `${ds.id}-about`;
-  writeJson(path.join(_pagesDir, `${route}.json`), { title: 'About', html });
-  console.log(`  Auto-generated dataset about page: ${route}`);
-  const uiLangs = (config.uiLanguages || []).map(l => l.code).filter(l => l !== 'eng');
   const dsTranslations = ds.translations || {};
+
+  // Default-language about page: try about-{defaultLang}.md, fall back to about.md
+  const defaultSrc = [
+    path.join(dsDir, `about-${defaultLang}.md`),
+    path.join(dsDir, 'about.md'),
+  ].find(p => fs.existsSync(p));
+
+  if (defaultSrc) {
+    const raw = fs.readFileSync(defaultSrc, 'utf8');
+    const html = renderMarkdown(stripFrontmatter(raw));
+    writeJson(path.join(_pagesDir, `${route}.json`), { title: 'About', html });
+    console.log(`  Auto-generated dataset about page: ${route} (from ${path.basename(defaultSrc)})`);
+  }
+
+  // Translated about pages for all non-default UI languages
+  const uiLangs = (config.uiLanguages || []).map(l => l.code).filter(l => l !== defaultLang);
   for (const lang of uiLangs) {
-    const trAboutSrc = path.resolve(ROOT, ds.localPath, `about-${lang}.md`);
+    const trAboutSrc = path.join(dsDir, `about-${lang}.md`);
     if (!fs.existsSync(trAboutSrc)) continue;
     const trRaw = fs.readFileSync(trAboutSrc, 'utf8');
     const trHtml = renderMarkdown(stripFrontmatter(trRaw));
@@ -1168,10 +1210,32 @@ for (const key of ['logo', 'footerLogo']) {
   }
 }
 
-// Build dataset translations map
+// Build dataset translations map: merge site-config overrides with register.yaml descriptions
 const datasetTranslations = {};
 for (const d of config.datasets) {
-  if (d.translations) datasetTranslations[d.id] = d.translations;
+  const reg = registerCache[d.id];
+  const translations = { ...d.translations };
+
+  // Merge register.yaml descriptions as translations
+  if (reg?.description && typeof reg.description === 'object') {
+    for (const [lang, desc] of Object.entries(reg.description)) {
+      if (!translations[lang]) translations[lang] = {};
+      if (!translations[lang].description) translations[lang].description = desc;
+    }
+  }
+
+  // Merge register.yaml ref as translated title if not already set
+  if (reg?.ref) {
+    const langs = reg.languages || [];
+    for (const lang of langs) {
+      if (!translations[lang]) translations[lang] = {};
+      if (!translations[lang].title) translations[lang].title = reg.ref;
+    }
+  }
+
+  if (Object.keys(translations).length > 0) {
+    datasetTranslations[d.id] = translations;
+  }
 }
 
 writeJson(path.join(PUBLIC, 'site-config.json'), {

package/src/adapters/DatasetAdapter.ts

@@ -6,6 +6,7 @@ import type {
   SearchHit,
   GraphEdge,
   GraphNode,
+  SectionNode,
 } from './types';
 import type { Concept, LocalizedConcept, Designation } from 'glossarist';
 import { conceptFromJson, conceptUri } from './model-bridge';
@@ -370,15 +371,50 @@ export class DatasetAdapter {
     const resp = await fetch(`${this.baseUrl}/domain-nodes.json`);
     if (!resp.ok) return [];
     const data = await resp.json();
-    return (data.domainNodes || []).map((dn: any) => ({
+    return (data.domainNodes || []).map((dn: any) => this.mapDomainNode(dn));
+  }
+
+  private mapDomainNode(dn: any): GraphNode {
+    const node: GraphNode = {
       uri: dn.uri,
       register: dn.registerId,
-      conceptId: dn.uri.split('/domain/')[1] || '',
-      designations: { eng: dn.label },
+      conceptId: dn.uri?.split('/domain/')[1] || dn.id || '',
+      designations: dn.names || { eng: dn.label },
       status: 'domain',
       loaded: true,
       nodeType: 'domain' as const,
-    }));
+      conceptCount: dn.conceptCount || 0,
+    };
+    if (dn.children && dn.children.length > 0) {
+      node.children = dn.children.map((c: any) => this.mapSectionNode(c));
+    }
+    return node;
+  }
+
+  private mapSectionNode(dn: any): SectionNode {
+    const node: SectionNode = {
+      id: dn.id,
+      names: dn.names || { eng: dn.label },
+      conceptCount: dn.conceptCount || 0,
+    };
+    if (dn.children && dn.children.length > 0) {
+      node.children = dn.children.map((c: any) => this.mapSectionNode(c));
+    }
+    return node;
+  }
+
+  getSectionTree(): SectionNode[] {
+    const nodes = this.manifest?.sections;
+    if (!nodes || nodes.length === 0) return [];
+    return nodes.map(s => this.mapManifestSection(s));
+  }
+
+  private mapManifestSection(s: { id: string; names: Record<string, string>; children?: any[] }): SectionNode {
+    const node: SectionNode = { id: s.id, names: s.names || {}, conceptCount: 0 };
+    if (s.children && s.children.length > 0) {
+      node.children = s.children.map(c => this.mapManifestSection(c));
+    }
+    return node;
   }
 
   async loadEdgeIndex(): Promise<GraphEdge[]> {

package/src/adapters/types.ts

@@ -34,6 +34,13 @@ export { GRAMMAR_GENDERS, GRAMMAR_NUMBERS, GRAMMAR_PARTS_OF_SPEECH } from 'gloss
 
 // ── Dataset metadata ──────────────────────────────────────────────────────
 
+export interface ManifestSection {
+  id: string;
+  names: Record<string, string>;
+  ordering?: string;
+  children?: ManifestSection[];
+}
+
 export interface Manifest {
   id: string;
   datasetUri: string;
@@ -59,6 +66,9 @@ export interface Manifest {
   languageOrder?: string[];
   ref?: string;
   refAliases?: string[];
+  editionStatus?: string;
+  ordering?: string;
+  sections?: ManifestSection[];
   languageStats?: Record<string, { terms: number; definitions: number }>;
   availableFormats?: string[];
   bulkFormats?: { file: string; format: string; size: number }[];
@@ -98,6 +108,7 @@ export interface DatasetRegistry {
 export const EDGE_TYPE = {
   REFERENCES: 'references',
   DOMAIN: 'domain',
+  SECTION: 'section',
 } as const;
 
 export interface GraphEdge {
@@ -117,6 +128,15 @@ export interface GraphNode {
   status: string;
   loaded: boolean;
   nodeType?: 'concept' | 'domain';
+  conceptCount?: number;
+  children?: SectionNode[];
+}
+
+export interface SectionNode {
+  id: string;
+  names: Record<string, string>;
+  conceptCount: number;
+  children?: SectionNode[];
 }
 
 // ── Search ─────────────────────────────────────────────────────────────────

package/src/components/AppSidebar.vue

@@ -9,6 +9,7 @@ import type { DatasetGroup } from '../config/types';
 import { useOntologyNav, compactToSlug } from '../composables/use-ontology-nav';
 import NavIcon from './NavIcon.vue';
 import { useI18n, locale } from '../i18n';
+import type { SectionNode } from '../adapters/types';
 
 const store = useVocabularyStore();
 const ui = useUiStore();
@@ -223,6 +224,47 @@ function navTitle(page: { route: string }): string {
   const translated = t(key);
   return translated === key ? (page as any).title : translated;
 }
+
+const expandedSectionNodes = ref<Set<string>>(new Set());
+
+function toggleSectionNode(id: string) {
+  const s = new Set(expandedSectionNodes.value);
+  if (s.has(id)) s.delete(id);
+  else s.add(id);
+  expandedSectionNodes.value = s;
+}
+
+function getDatasetSections(dsId: string): SectionNode[] {
+  const m = store.manifests.get(dsId);
+  if (!m?.sections?.length) return [];
+  return m.sections.map(s => enrichSectionNode(s));
+}
+
+function enrichSectionNode(s: { id: string; names: Record<string, string>; children?: any[] }): SectionNode {
+  const node: SectionNode = { id: s.id, names: s.names || {}, conceptCount: 0 };
+  if (s.children && s.children.length > 0) {
+    node.children = s.children.map(c => enrichSectionNode(c));
+  }
+  return node;
+}
+
+function sectionLabel(section: SectionNode): string {
+  return section.names[locale.value] || section.names.eng || section.id;
+}
+
+function goToSection(dsId: string, sectionId: string) {
+  router.push({ name: 'dataset', params: { registerId: dsId }, query: { section: sectionId } });
+  closeMobile();
+}
+
+function clearSectionFilter() {
+  router.push({ name: 'dataset', params: { registerId: currentDataset.value } });
+  closeMobile();
+}
+
+const activeSectionId = computed(() => {
+  return (route.query.section as string) || null;
+});
 </script>
 
 <template>
@@ -583,6 +625,46 @@ function navTitle(page: { route: string }): string {
                   </router-link>
                 </nav>
 
+                <!-- Sections tree -->
+                <div v-if="getDatasetSections(ds.id).length" class="mt-2 pt-2 border-t border-ink-100/60">
+                  <button @click="toggleSectionNode(ds.id + '-sections')"
+                    class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors"
+                  >
+                    <span class="w-3 text-[10px]">{{ expandedSectionNodes.has(ds.id + '-sections') ? '▾' : '▸' }}</span>
+                    <span class="flex-1 text-left">{{ t('nav.sections') }}</span>
+                    <span class="badge text-[9px] bg-amber-50 text-amber-600 px-1 py-0.5">{{ getDatasetSections(ds.id).length }}</span>
+                  </button>
+                  <div v-if="expandedSectionNodes.has(ds.id + '-sections')" class="mt-0.5 max-h-64 overflow-y-auto">
+                    <button
+                      @click="clearSectionFilter()"
+                      class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                      :class="!activeSectionId ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
+                    >
+                      <span class="w-3 text-ink-200">&#183;</span>
+                      <span class="flex-1 text-left">{{ t('dataset.all') }}</span>
+                    </button>
+                    <template v-for="section in getDatasetSections(ds.id)" :key="section.id">
+                      <button @click="goToSection(ds.id, 'section-' + section.id)"
+                        class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                        :class="activeSectionId === 'section-' + section.id ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
+                      >
+                        <span v-if="section.children?.length" class="text-[10px] text-ink-300 w-3 cursor-pointer" @click.stop="toggleSectionNode(ds.id + '-s-' + section.id)">{{ expandedSectionNodes.has(ds.id + '-s-' + section.id) ? '▾' : '▸' }}</span>
+                        <span v-else class="w-3 text-ink-200">&#183;</span>
+                        <span class="flex-1 text-left">{{ sectionLabel(section) }}</span>
+                      </button>
+                      <div v-if="section.children?.length && expandedSectionNodes.has(ds.id + '-s-' + section.id)" class="ml-3">
+                        <button v-for="child in section.children" :key="child.id"
+                          @click="goToSection(ds.id, 'section-' + child.id)"
+                          class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                          :class="activeSectionId === 'section-' + child.id ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+                        >
+                          <span class="w-3 text-ink-200">&#183;</span>
+                          <span class="flex-1 text-left">{{ sectionLabel(child) }}</span>
+                        </button>
+                      </div>
+                    </template>
+                  </div>
+                </div>
                 <div v-if="provenance.owner" class="mt-3 pt-3 border-t border-ink-100/60">
                   <div class="text-[11px] text-ink-300 space-y-1.5 px-1">
                     <div v-if="provenance.ref" class="text-xs font-semibold text-ink-700">
@@ -645,6 +727,47 @@ function navTitle(page: { route: string }): string {
               </router-link>
             </nav>
 
+            <!-- Sections tree -->
+            <div v-if="getDatasetSections(ds.id).length" class="mt-2 pt-2 border-t border-ink-100/60">
+              <button @click="toggleSectionNode(ds.id + '-sections')"
+                class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors"
+              >
+                <span class="w-3 text-[10px]">{{ expandedSectionNodes.has(ds.id + '-sections') ? '▾' : '▸' }}</span>
+                <span class="flex-1 text-left">{{ t('nav.sections') }}</span>
+                <span class="badge text-[9px] bg-amber-50 text-amber-600 px-1 py-0.5">{{ getDatasetSections(ds.id).length }}</span>
+              </button>
+              <div v-if="expandedSectionNodes.has(ds.id + '-sections')" class="mt-0.5 max-h-64 overflow-y-auto">
+                <button
+                  @click="clearSectionFilter()"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                  :class="!activeSectionId ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
+                >
+                  <span class="w-3 text-ink-200">&#183;</span>
+                  <span class="flex-1 text-left">{{ t('dataset.all') }}</span>
+                </button>
+                <template v-for="section in getDatasetSections(ds.id)" :key="section.id">
+                  <button @click="goToSection(ds.id, 'section-' + section.id)"
+                    class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                    :class="activeSectionId === 'section-' + section.id ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
+                  >
+                    <span v-if="section.children?.length" class="text-[10px] text-ink-300 w-3 cursor-pointer" @click.stop="toggleSectionNode(ds.id + '-s-' + section.id)">{{ expandedSectionNodes.has(ds.id + '-s-' + section.id) ? '▾' : '▸' }}</span>
+                    <span v-else class="w-3 text-ink-200">&#183;</span>
+                    <span class="flex-1 text-left">{{ sectionLabel(section) }}</span>
+                  </button>
+                  <div v-if="section.children?.length && expandedSectionNodes.has(ds.id + '-s-' + section.id)" class="ml-3">
+                    <button v-for="child in section.children" :key="child.id"
+                      @click="goToSection(ds.id, 'section-' + child.id)"
+                      class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                      :class="activeSectionId === 'section-' + child.id ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+                    >
+                      <span class="w-3 text-ink-200">&#183;</span>
+                      <span class="flex-1 text-left">{{ sectionLabel(child) }}</span>
+                    </button>
+                  </div>
+                </template>
+              </div>
+            </div>
+
             <!-- Provenance -->
             <div v-if="provenance.owner" class="mt-3 pt-3 border-t border-ink-100/60">
               <div class="text-[11px] text-ink-300 space-y-1.5 px-1">

package/src/components/ConceptDetail.vue

@@ -14,7 +14,7 @@ import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { getFactory } from '../adapters/factory';
 import { useRenderOptions } from '../composables/use-render-options';
-import { categorizeRelationship, relationshipLabel, relationshipDefinition } from '../utils/relationship-categories';
+import { categorizeRelationship, relationshipLabel, relationshipDefinition, INVERSE_RELATIONSHIPS } from '../utils/relationship-categories';
 import { useSiteConfig } from '../config/use-site-config';
 import ConceptTimeline from './ConceptTimeline.vue';
 import ConceptRdfView from './ConceptRdfView.vue';
@@ -98,11 +98,11 @@ const conceptSources = computed(() => props.concept.sources);
 const conceptTags = computed(() => props.concept.tags ?? []);
 
 // Managed concept related (concept-level cross-references)
-// Derives superseded_by from incoming supersedes edges instead of storing it.
+// Derives inverse relationships from incoming edges (e.g. supersedes → superseded_by).
 const conceptRelated = computed(() => {
-  const direct = props.concept.relatedConcepts?.filter(rc => rc.type !== 'superseded_by') ?? [];
+  const direct = props.concept.relatedConcepts?.filter(rc => !INVERSE_RELATIONSHIPS[rc.type]) ?? [];
   const derived = incomingEdges.value
-    .filter(e => e.type === 'supersedes')
+    .filter(e => INVERSE_RELATIONSHIPS[e.type])
     .map(e => {
       const parsed = factory.resolve(e.source, props.registerId);
       const sourceUrn = parsed.type === 'internal'
@@ -110,7 +110,7 @@ const conceptRelated = computed(() => {
         : null;
       const conceptId = e.source.match(/\/concept\/([^/]+)$/)?.[1];
       return {
-        type: 'superseded_by' as const,
+        type: INVERSE_RELATIONSHIPS[e.type],
         ref: sourceUrn && conceptId ? { source: sourceUrn, id: conceptId } : null,
         content: '',
       };

package/src/i18n/locales/eng.yml

@@ -174,3 +174,11 @@ shortcuts.search: Search
 shortcuts.showShortcuts: Show shortcuts
 shortcuts.closeDialog: Close dialog
 shortcuts.hint: Shortcuts only work when no input field is focused
+
+# Sections
+nav.sections: Sections
+dataset.systematic: Systematic
+dataset.alphabetical: Alphabetical
+dataset.sectionFilter: Section
+dataset.clearSection: Clear section
+dataset.conceptsInSection: concepts in section

package/src/i18n/locales/fra.yml

@@ -174,3 +174,11 @@ shortcuts.search: Recherche
 shortcuts.showShortcuts: Afficher les raccourcis
 shortcuts.closeDialog: Fermer
 shortcuts.hint: Les raccourcis ne fonctionnent que si aucun champ de saisie n'a le focus
+
+# Sections
+nav.sections: Sections
+dataset.systematic: Systématique
+dataset.alphabetical: Alphabétique
+dataset.sectionFilter: Section
+dataset.clearSection: Effacer la section
+dataset.conceptsInSection: concepts dans la section

package/src/stores/vocabulary.ts

@@ -209,6 +209,22 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
     }
   }
 
+  async function ensureAllEdgesLoaded() {
+    for (const [id, adapter] of datasets.value) {
+      if (!edgeStatus.value[id]?.loaded) {
+        try {
+          const edges = await adapter.loadEdgeIndex();
+          for (const edge of edges) {
+            graph.value.addEdge(edge);
+          }
+          edgeStatus.value[id] = { loaded: true, count: edges.length };
+        } catch {
+          edgeStatus.value[id] = { loaded: false, count: 0 };
+        }
+      }
+    }
+  }
+
   async function viewConcept(registerId: string, conceptId: string) {
     error.value = null;
     currentRegisterId.value = registerId;
@@ -271,8 +287,14 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
         }
       }
 
+      // Ensure edges from all datasets are loaded for cross-dataset supersession
+      await ensureAllEdgesLoaded();
+
       touchGraph();
-      conceptEdges.value = graph.value.getEdges(uri);
+      conceptEdges.value = [
+        ...graph.value.getEdges(uri),
+        ...graph.value.getIncomingEdges(uri),
+      ];
     } catch (e: unknown) {
       error.value = `Failed to load concept ${conceptId}: ${e instanceof Error ? e.message : String(e)}`;
       currentConcept.value = null;

package/src/utils/relationship-categories.ts

@@ -12,7 +12,9 @@ export const RELATIONSHIP_CATEGORIES: RelationshipCategory[] = [
     id: 'hierarchical',
     label: 'Hierarchy',
     types: ['broader', 'narrower', 'broader_generic', 'narrower_generic',
-            'broader_partitive', 'narrower_partitive', 'broader_instantial', 'narrower_instantial'],
+            'broader_partitive', 'narrower_partitive', 'broader_instantial', 'narrower_instantial',
+            'has_concept', 'is_concept_of', 'instance_of', 'has_instance',
+            'has_part', 'is_part_of', 'inherits', 'inherited_by'],
     color: 'text-blue-600 bg-blue-50',
   },
   {
@@ -30,7 +32,9 @@ export const RELATIONSHIP_CATEGORIES: RelationshipCategory[] = [
   {
     id: 'lifecycle',
     label: 'Lifecycle',
-    types: ['deprecates', 'supersedes', 'superseded_by', 'replaces'],
+    types: ['deprecates', 'deprecated_by', 'supersedes', 'superseded_by',
+            'replaces', 'replaced_by', 'invalidates', 'invalidated_by',
+            'retires', 'retired_by'],
     color: 'text-red-600 bg-red-50',
   },
   {
@@ -39,6 +43,13 @@ export const RELATIONSHIP_CATEGORIES: RelationshipCategory[] = [
     types: ['compare', 'contrast'],
     color: 'text-amber-600 bg-amber-50',
   },
+  {
+    id: 'definitional',
+    label: 'Definitional',
+    types: ['has_definition', 'definition_of', 'has_version', 'version_of',
+            'current_version', 'current_version_of'],
+    color: 'text-cyan-600 bg-cyan-50',
+  },
   {
     id: 'spatiotemporal',
     label: 'Spatiotemporal',
@@ -59,6 +70,53 @@ export const RELATIONSHIP_CATEGORIES: RelationshipCategory[] = [
   },
 ];
 
+
+
+export const INVERSE_RELATIONSHIPS: Record<string, string> = {
+  // Lifecycle
+  supersedes: 'superseded_by',
+  superseded_by: 'supersedes',
+  deprecates: 'deprecated_by',
+  deprecated_by: 'deprecates',
+  replaces: 'replaced_by',
+  replaced_by: 'replaces',
+  invalidates: 'invalidated_by',
+  retires: 'retired_by',
+
+  // Hierarchical (generic)
+  broader: 'narrower',
+  narrower: 'broader',
+  broader_generic: 'narrower_generic',
+  narrower_generic: 'broader_generic',
+
+  // Hierarchical (partitive)
+  broader_partitive: 'narrower_partitive',
+  narrower_partitive: 'broader_partitive',
+  has_part: 'is_part_of',
+  is_part_of: 'has_part',
+
+  // Hierarchical (instantial)
+  broader_instantial: 'narrower_instantial',
+  narrower_instantial: 'broader_instantial',
+  instance_of: 'has_instance',
+  has_instance: 'instance_of',
+
+  // ISO 19135 register relations
+  has_concept: 'is_concept_of',
+  is_concept_of: 'has_concept',
+  inherits: 'inherited_by',
+  inherited_by: 'inherits',
+  has_definition: 'definition_of',
+  has_version: 'version_of',
+  current_version: 'current_version_of',
+
+  // Symmetric (self-inverse)
+  equivalent: 'equivalent',
+  compare: 'compare',
+  contrast: 'contrast',
+  close_match: 'close_match',
+  related_match: 'related_match',
+};
 const CATEGORY_MAP = new Map<string, RelationshipCategory>();
 for (const cat of RELATIONSHIP_CATEGORIES) {
   for (const t of cat.types) {

package/src/views/DatasetView.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
 import { FORMAT_LABELS } from '../config/types';
 import { langName, langLabel, sortLanguages } from '../utils/lang';
 import ConceptCard from '../components/ConceptCard.vue';
-import { useI18n } from '../i18n';
+import { useI18n, locale } from '../i18n';
 import { useSiteConfig } from '../config/use-site-config';
+import type { SectionNode, ManifestSection } from '../adapters/types';
 
 const props = defineProps<{ registerId: string }>();
 
@@ -16,6 +18,8 @@ const { getStyle } = useDsStyle();
 const { ensureLoaded, loading, localError } = useDatasetLoader(() => props.registerId);
 const { t } = useI18n();
 const { localizedDatasetField } = useSiteConfig();
+const route = useRoute();
+const router = useRouter();
 
 const manifest = computed(() => store.manifests.get(props.registerId));
 const localizedTitle = computed(() => localizedDatasetField(props.registerId, 'title', manifest.value?.title));
@@ -46,6 +50,8 @@ const filter = ref('');
 const filterInput = ref<HTMLInputElement | null>(null);
 const allChunksLoaded = ref(false);
 const selectedLang = ref<string | null>(null);
+const viewMode = ref<'systematic' | 'alphabetical'>('systematic');
+const sectionQuery = computed(() => (route.query.section as string) || null);
 
 interface LangOption {
   code: string;
@@ -92,6 +98,17 @@ watch(filter, async (q) => {
   }
 });
 
+// When section filter changes, reset page and load all chunks
+watch(sectionQuery, async () => {
+  page.value = 1;
+  if (sectionQuery.value && !allChunksLoaded.value && adapter.value) {
+    chunkLoading.value = true;
+    await adapter.value.ensureAllChunksLoaded();
+    allChunksLoaded.value = true;
+    chunkLoading.value = false;
+  }
+});
+
 // When language filter changes, reset page and load all chunks
 watch(selectedLang, async (lang) => {
   page.value = 1;
@@ -113,13 +130,53 @@ const loadedConcepts = computed(() => {
 const filtered = computed(() => {
   const q = filter.value.trim().toLowerCase();
   const lang = selectedLang.value;
+  const sec = sectionQuery.value;
   return loadedConcepts.value.filter(c => {
     if (lang && !(lang in (c.designations ?? {}))) return false;
+    if (sec && !conceptMatchesSection(c.id, sec)) return false;
     if (!q) return true;
     return (c.eng || '').toLowerCase().includes(q) || c.id.toLowerCase().includes(q);
   });
 });
 
+function conceptMatchesSection(conceptId: string, sectionPrefix: string): boolean {
+  // section-X matches concept IDs starting with X.
+  // e.g. section-1 matches 1.1, 1.2, etc.
+  // section-103-01 matches 103-01-01, 103-01-02, etc.
+  const prefix = sectionPrefix.replace(/^section-/, '');
+  return conceptId.startsWith(prefix + '.') || conceptId.startsWith(prefix + '-');
+}
+
+function getSections(): SectionNode[] {
+  const m = manifest.value;
+  if (!m?.sections?.length) return [];
+  return m.sections.map(s => enrichSection(s));
+}
+
+function enrichSection(s: ManifestSection): SectionNode {
+  const node: SectionNode = { id: s.id, names: s.names || {}, conceptCount: 0 };
+  if (s.children && s.children.length > 0) {
+    node.children = s.children.map(c => enrichSection(c));
+  }
+  return node;
+}
+
+function sectionName(section: SectionNode): string {
+  return section.names[locale.value] || section.names.eng || section.id;
+}
+
+// Alphabetical grouping
+const alphabetGroups = computed(() => {
+  if (viewMode.value !== 'alphabetical') return [];
+  const groups = new Map<string, import('../adapters/types').ConceptSummary[]>();
+  for (const c of filtered.value) {
+    const letter = ((c.eng || c.id)[0] || '?').toUpperCase();
+    if (!groups.has(letter)) groups.set(letter, []);
+    groups.get(letter)!.push(c);
+  }
+  return [...groups.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+});
+
 const page = ref(1);
 const perPage = 50;
 
@@ -130,13 +187,15 @@ const pageLoaded = computed(() => {
   return adapter.value.isRangeLoaded(start, perPage);
 });
 
+const isFiltering = computed(() =>
+  filter.value.trim() || selectedLang.value || sectionQuery.value
+);
+
 const paged = computed(() => {
-  // When filtering (text or language), paginate over filtered dense results (all chunks loaded)
-  if (filter.value.trim() || selectedLang.value) {
+  if (isFiltering.value) {
     const start = (page.value - 1) * perPage;
     return filtered.value.slice(start, start + perPage);
   }
-  // When not filtering, slice directly from the pre-allocated index (may contain undefined)
   const start = (page.value - 1) * perPage;
   const arr = adapter.value?.getConcepts();
   if (!arr) return [];
@@ -144,7 +203,7 @@ const paged = computed(() => {
 });
 
 const totalPages = computed(() => {
-  if (filter.value.trim() || selectedLang.value) {
+  if (isFiltering.value) {
     return Math.max(1, Math.ceil(filtered.value.length / perPage));
   }
   return Math.max(1, Math.ceil(totalConceptCount.value / perPage));
@@ -152,7 +211,7 @@ const totalPages = computed(() => {
 
 // Load chunks needed for current page
 watch(page, async () => {
-  if (!adapter.value || filter.value.trim() || selectedLang.value) return;
+  if (!adapter.value || isFiltering.value) return;
   const start = (page.value - 1) * perPage;
   if (!adapter.value.isRangeLoaded(start, perPage)) {
     chunkLoading.value = true;
@@ -180,6 +239,14 @@ function goToPage(p: number) {
   page.value = Math.max(1, Math.min(p, totalPages.value));
   window.scrollTo({ top: 0, behavior: 'smooth' });
 }
+
+function clearSection() {
+  const r = { ...route };
+  delete (r as any).query?.section;
+  const q = { ...route.query };
+  delete q.section;
+  router.replace({ query: q });
+}
 </script>
 
 <template>
@@ -268,6 +335,18 @@ function goToPage(p: number) {
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
           </svg>
         </div>
+        <div v-if="getSections().length" class="flex items-center gap-1">
+          <button
+            @click="viewMode = 'systematic'"
+            :class="viewMode === 'systematic' ? 'bg-ink-800 text-white' : 'bg-surface-raised text-ink-600 hover:bg-ink-50 border border-ink-100'"
+            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+          >{{ t('dataset.systematic') }}</button>
+          <button
+            @click="viewMode = 'alphabetical'"
+            :class="viewMode === 'alphabetical' ? 'bg-ink-800 text-white' : 'bg-surface-raised text-ink-600 hover:bg-ink-50 border border-ink-100'"
+            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+          >{{ t('dataset.alphabetical') }}</button>
+        </div>
         <span class="text-sm text-ink-400">
           <template v-if="selectedLang">
             {{ filtered.length.toLocaleString() }} {{ t('dataset.of') }} {{ totalConceptCount.toLocaleString() }} {{ t('dataset.concepts') }} {{ t('dataset.in') }} {{ langName(selectedLang) }}
@@ -284,6 +363,18 @@ function goToPage(p: number) {
         </span>
       </div>
 
+      <!-- Section filter indicator -->
+      <div v-if="sectionQuery" class="flex items-center gap-2 mb-4">
+        <span class="text-sm text-ink-500">{{ t('dataset.sectionFilter') }}:</span>
+        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-amber-50 text-amber-700 text-sm font-medium">
+          {{ sectionQuery }}
+          <button @click="clearSection" class="text-amber-400 hover:text-amber-600 transition-colors">
+            <svg 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="M6 18L18 6M6 6l12 12"/></svg>
+          </button>
+        </span>
+        <span class="text-xs text-ink-400">{{ filtered.length.toLocaleString() }} {{ t('dataset.conceptsInSection') }}</span>
+      </div>
+
       <!-- Language filter -->
       <div v-if="languageOptions.length > 1" class="flex flex-wrap gap-1.5 mb-5">
         <button

package/src/shims/glossarist-tags.ts

@@ -1,10 +0,0 @@
-/**
- * Module augmentation for glossarist Concept.tags.
- * The JS runtime already supports tags (string[]) but the installed
- * type declarations have not been updated yet. This shim bridges the gap.
- */
-declare module 'glossarist/models' {
-  interface Concept {
-    tags: string[];
-  }
-}