@glossarist/concept-browser 0.7.74 → 0.7.77

package/README.md

@@ -1,519 +1,195 @@
 # Glossarist Concept Browser
 
-A statically deployable single-page application for browsing terminology datasets. Built with Vue 3, TypeScript, and Tailwind CSS. Add new datasets with zero code changes — just configure `site-config.yml`.
+A statically deployable terminology browser. Install as an npm package, configure via YAML, build, deploy.
 
-**Live sites:**
-- [GeoLexica](https://www.geolexica.org) — IEC Electropedia + ISO/TC 211 + more
-- [VIML](https://www.oimlsmart.org/vocab/) — OIML International Vocabulary of Legal Metrology
-- [OIML Terms](https://metanorma.github.io/oiml-terms/) — OIML G 18 terminology
-
----
-
-## Features
-
-- **Multi-dataset browsing** — Concepts from multiple terminology registers in one place
-- **Full multilingual support** — Definitions, notes, and examples in all available languages with i18n UI
-- **Concept history timeline** — Review dates, decisions, and change notes per language
-- **Relation sphere** — 3D sphere visualization of a concept's neighborhood with d3 force simulation, per-relation-type colors, and degree filtering
-- **Edition series** — Sidebar timeline for vocabulary edition groups (e.g. VIML 1968/2000/2013/2022) with current-edition markers and supersession chain navigation
-- **Cross-reference graph** — D3 force-directed graph showing concept relationships with dataset filtering
-- **Dataset groups** — Organize datasets into lineage series, topic bundles, publication families, or curated collections. Each group kind has distinct sidebar rendering
-- **Light/dark mode colors** — Per-dataset `{ light, dark }` color pairs. Per-relation-type colors configurable via site-config
-- **RDF / SHACL outputs** — Every concept emits SHACL-conformant Turtle + JSON-LD. Dataset-level `dcat:Dataset`, group-level `dcat:DatasetSeries`/`dcat:Catalog`, vocabulary SKOS ConceptSchemes, bibliography `dcterms:BibliographicResource`, build provenance `prov:Activity`
-- **Rich sidebar provenance** — Publication reference, owner, status, concept/language counts, sections tree from manifest data
-- **Math rendering** — KaTeX rendering for AsciiMath notation in definitions (`stem:[...]`)
-- **Responsive design** — Mobile-first layout with light/dark mode
-- **Static deployment** — No server required. Deploy to any static host
-
----
-
-## Quick Start (deployment repo)
-
-A deployment repo is a separate repository that provides a `site-config.yml`, dataset source files, and content pages. The concept-browser is installed as an npm package.
+## Quick Start
 
 ```bash
-# In your deployment repo:
-npm install --ignore-scripts @glossarist/concept-browser
-npm install --prefix node_modules/@glossarist/concept-browser sharp 2>/dev/null || true
-npx concept-browser build
-```
-
-The CLI reads `site-config.yml` from the working directory, fetches/generates data, and builds the SPA into `dist/`.
+# 1. Create your project
+mkdir my-dictionary && cd my-dictionary
+npm init -y
+
+# 2. Install
+npm install @glossarist/concept-browser
+
+# 3. Create site-config.yml
+cat > site-config.yml << 'EOF'
+id: my-dictionary
+title: My Dictionary
+uri_base: https://example.com
+datasets:
+  - id: my-vocab
+    title: My Vocabulary
+    local_path: datasets/my-vocab    # or gcr_package: https://...
+EOF
 
-### Quick Start (development)
+# 4. Build
+npx concept-browser build
 
-```bash
-git clone https://github.com/glossarist/concept-browser.git
-cd concept-browser
-npm install
-npm run dev
-# Open http://localhost:5173
+# 5. Deploy
+# Upload dist/ to any static host (GitHub Pages, Netlify, S3, etc.)
 ```
 
-The dev server serves pre-built data from `public/data/`. If no data is present yet, run the data pipeline first (see below).
-
----
-
-## CLI Reference
+## How It Works
 
 ```
-concept-browser <command> [options]
-
-Commands:
-  fetch      Fetch/update datasets (from GCR packages, local paths, or source repos)
-  generate   Convert harmonized YAML concepts to JSON-LD static files + RDF artifacts
-  edges      Build cross-reference edges from generated concept data
-  build      Full pipeline: fetch + generate + edges + vite build
-  site       Same as build (alias)
-  doctor     Run diagnostic checks (node version, deps, shapes, data integrity)
-  normalize  NFC-normalize YAML concept files in-place
-
-Options:
-  --site <id>  Site config ID (looks for site-config.yml in CWD)
-
-Environment:
-  SITE_CONFIG    Site config file path (highest priority)
-  SITE_ID        Site config ID (same as --site)
-  GITHUB_TOKEN   GitHub token for private repos
+Your project (CWD)                    Package (read-only)
+├── site-config.yml          ──┐
+├── datasets/                 ─┤
+│   └── my-vocab/             ─┤     ┌──────────────────────────┐
+│       └── concepts/*.yaml   ─┤     │ @glossarist/concept-browser │
+├── public/                   ─┤ ──> │                          │
+│   └── (logos, favicons)     ─┤     │ generate-data.mjs        │
+├── .cb-content/   ← generated │     │ bridge-to-astro.mjs      │
+└── dist/          ← output    │     │ astro build              │
+                             ──┘     └──────────────────────────┘
 ```
 
----
+The package reads your config and data, generates `.cb-content/` (content collections) and `dist/` (static site) in your project. The package itself (`node_modules/`) is never modified.
 
-## Data Pipeline
+## Configuration
 
-```
-site-config.yml
-  └─> scripts/fetch-datasets.mjs       (fetch from GCR, localPath, or sourceRepo)
-      └─> .datasets/{id}/concepts/*.yaml
-          └─> scripts/generate-data.mjs (YAML → JSON-LD + RDF artifacts)
-              └─> public/data/{id}/
-                  ├── manifest.json      Dataset metadata (ref, owner, stats)
-                  ├── index.json         Concept listing (chunked for large sets)
-                  ├── edges.json         Pre-computed cross-reference + domain edges
-                  ├── domain-nodes.json  Domain classification nodes
-                  ├── {register}.ttl     Dataset-level RDF (dcat:Dataset + skos:ConceptScheme + sections)
-                  ├── bib.ttl            Bibliography graph (dcterms:BibliographicResource)
-                  └── concepts/*.json    Individual concept documents
-              └─> public/data/_vocab.ttl    Vocabulary graph (SKOS ConceptSchemes)
-              └─> public/data/activity/    Build provenance (prov:Activity per build)
-              └─> public/data/agents.ttl   Contributor records (foaf:Person)
-              └─> public/data/versions.ttl Version chain (prov:Entity)
-          └─> scripts/build-edges.js    (extract graph + domain edges)
-```
-
----
+Everything is in `site-config.yml`. See [`site-config.example.yml`](site-config.example.yml) for all options.
 
-## Configuration: `site-config.yml`
+### Dataset location
 
-All configuration lives in a single file. The CLI reads it from the current working directory.
-
-### Top-level fields
+Each dataset specifies where its source data lives. Three options:
 
 ```yaml
-id: viml                                # Site identifier
-domain: viml.oiml.info                  # Primary domain
-basePath: /oiml-viml/                   # URL subpath for GitHub Pages deployment
-title: VIML                             # Site title
-subtitle: International Vocabulary...   # Short description
-description: Terminology from...        # Longer description
-
-uiLanguages:                            # Available UI languages
-  - code: eng
-    label: English
-  - code: fra
-    label: Français
-
-translations:                           # Localized title/subtitle/description
-  fra:
-    subtitle: Vocabulaire international de métrologie légale
-    description: Terminologie du Vocabulaire international...
-
-defaults:
-  language: eng                         # Default concept language
-
-copyright: "OIML"                       # Footer copyright text
-```
+datasets:
+  # Option A: Local directory with concepts/*.yaml
+  - id: my-vocab
+    local_path: datasets/my-vocab        # relative to project root
 
-### Dataset configuration
+  # Option B: GCR package (auto-downloaded at build time)
+  - id: iev
+    gcr_package: https://github.com/org/repo/releases/download/v1.0/my-vocab.gcr
 
-```yaml
-datasets:
-  - id: viml
-    uri: "urn:oiml:pub:v:1:2022"
-    sourceRepo: https://github.com/metanorma/oiml-viml
-    localPath: viml-glossarist          # Local dataset directory (relative to CWD)
-    title: "VIML — International Vocabulary of Legal Metrology"
-    description: "Terminology definitions from..."
-    owner: OIML
-    ref: "OIML V 1:2022"               # Publication reference (shown in sidebar provenance)
-    color: "#004996"
-    tags: [metrology, legal, oiml]
-    languageOrder: [eng, fra]
+  # Option C: Git repository (cloned at build time)
+  - id: iso-terms
+    source_repo: https://github.com/org/iso-terms
 ```
 
-#### Dataset field reference
+### Colors
 
-| Field | Required | Description |
-|-------|----------|-------------|
-| `id` | yes | URL-safe identifier used in routes and data paths |
-| `uri` | no | URI pattern for this dataset |
-| `sourceRepo` | no | Git repository URL containing concept YAML files |
-| `gcrPackage` | no | URL to a pre-built `.gcr` ZIP archive (alternative to sourceRepo) |
-| `localPath` | no | Local directory with `concepts/` and `register.yaml` (relative to CWD) |
-| `title` | no | Display name. Falls back to `register.yaml` name field |
-| `description` | no | Shown on home page and about page |
-| `owner` | no | Organization name shown in sidebar provenance |
-| `ref` | no | Publication reference shown in sidebar provenance (e.g., "OIML V 1:2022") |
-| `color` | no | Accent color — single hex (`"#004996"`) or `{ light, dark }` pair |
-| `tags` | no | Array of labels shown on dataset card |
-| `languageOrder` | no | Array of ISO 639-2 codes controlling display order |
-| `translations` | no | Localized title and description per language |
+Each dataset can have a color — single hex or light/dark pair:
 
-#### Dataset source resolution
-
-The CLI resolves dataset sources in this priority order:
+```yaml
+datasets:
+  - id: my-vocab
+    color: "#2563eb"                      # single color (both modes)
 
-1. **`.gcr/{id}.gcr`** on disk — extract to `.datasets/{id}/`
-2. **`gcrPackage`** URL — download and extract
-3. **`localPath`** — copy `concepts/` and `register.yaml` from a local directory
-4. **`sourceRepo`** — git clone to `.datasets/{id}/`
+  - id: legacy-vocab
+    color:
+      light: "#004996"                    # light mode
+      dark: "#3B82F6"                     # dark mode
+```
 
-### Base path for subpath deployment
+Colors appear in the sidebar (color dot per dataset), sphere cards (top bar + tint), badges, and relationship edges. If omitted, a palette color is assigned automatically.
 
-Set `basePath` in `site-config.yml` to deploy to a subdirectory (e.g., GitHub Pages at `metanorma.github.io/my-site/`):
+Group colors work the same way:
 
 ```yaml
-basePath: /my-site/
+dataset_groups:
+  - id: my-vocab-series
+    color: "#d97706"
 ```
 
-This configures Vite's `base` so all asset paths, router paths, and data fetches use the correct prefix. The `BASE_PATH` environment variable can override this if needed.
+### Logo
 
-### Branding and favicon
+Place logo SVGs/PNGs in `public/` and reference them in `branding`:
 
 ```yaml
 branding:
-  primaryColor: "#004996"
-  darkColor: "#003366"
-  fonts:
-    header:
-      family: "Source Serif 4"
-      source: "google"
-      weights: [400, 600]
-    body:
-      family: "Source Sans 3"
-      source: "google"
-      weights: [400, 500, 700]
   logo:
-    path: /logos/oiml-logo.svg          # URL path served to browsers
-    alt: OIML
-    localPath: logos/oiml-logo.svg       # Local file for favicon generation
-    localLight: logos/oiml-logo-icon-light.svg   # Light variant (dark mode)
-    localDark: logos/oiml-logo-icon-dark.svg     # Dark variant (light mode)
-  ownerName: OIML
-  ownerUrl: "https://www.oiml.org"
+    alt: My Dictionary
+    light: /images/logo-light.svg         # shown in light mode
+    dark: /images/logo-dark.svg           # shown in dark mode
 ```
 
-Favicons are auto-generated from the logo SVG using the `favicons` package. Resolution order: `branding.favicon` → `branding.logo.localPath` → package default `public/favicon.svg`.
+If no logo is configured, the Glossarist logo is shown by default. The footer always shows the Glossarist logo ("Powered by Glossarist").
 
-### Site features
+Favicons work the same way — place `favicon.svg`, `favicon.ico`, and `apple-touch-icon*.png` in `public/`. If not provided, the Glossarist favicon is used.
 
-```yaml
-features:
-  news: false              # enable news posts
-  stats: true              # show statistics dashboard
-  graph: true              # enable concept graph visualization
-  about: true              # enable about page
-  search: true             # enable full-text search
-  poweredBy:
-    title: "Glossarist"
-    url: "https://glossarist.org"
-```
+### About pages
 
-### Content pages
+Place JSON files in `public/pages/`:
 
-```yaml
-pages:
-  - type: about
-    route: about
-    title: About
-    icon: info
-    source: about.md
-    translations:
-      fra:
-        title: À propos
-        source: about-fra.md
 ```
-
-### Dataset groups
-
-When a site has many datasets, you can group them in the sidebar navigation. Each group has a `kind` that determines its visual treatment and semantic assumptions.
-
-```yaml
-datasetGroups:
-  - id: viml
-    label: "VIML — International Vocabulary of Legal Metrology"
-    kind: lineage                  # edition series (same vocabulary, different years)
-    current: viml-2022             # current edition for the series
-    color:
-      light: "#004996"
-      dark: "#3B82F6"
-    datasets: [viml-2022, viml-2013, viml-2000, viml-1968]
-    translations:
-      fra:
-        label: "VIML — Vocabulaire international de métrologie légale"
-
-  - id: vim
-    label: "VIM — International Vocabulary of Metrology"
-    kind: lineage
-    current: vim-2012
-    color:
-      light: "#005A9C"
-      dark: "#2196F3"
-    datasets: [vim-2012, vim-2010, vim-2007, vim-1993]
+public/
+└── pages/
+    ├── about.json          → /about
+    └── my-vocab-about.json → /my-vocab-about
 ```
 
-#### Group kinds
-
-| Kind | Glyph | Description | Sidebar rendering |
-|------|-------|-------------|-------------------|
-| `lineage` | ⏳ | Editions of the same vocabulary over time | Compact timeline with year badges + current-edition star (✦) |
-| `topic` | ◆ | Different vocabularies on the same subject | Standard list entries |
-| `family` | ✦ | Related vocabularies from the same publisher | Standard list entries |
-| `collection` | ❖ | Curated bundle of datasets | Standard list entries |
-| `default` | ▸ | No special semantics (backward compat) | Standard list entries |
-
-For `lineage` groups:
-- The `current` field identifies the newest valid edition. If omitted, the newest member by year is auto-detected.
-- Members are displayed as a timeline with year + reference + status badges.
-- When an edition is active, the full expansion (sub-pages, sections tree, provenance) appears below the timeline entry — same as non-series datasets.
-- A supersession chain card (`ConceptEditionRail`) appears in the concept detail sidebar, showing how the concept evolved across editions.
-
-#### Group field reference
-
-| Field | Required | Description |
-|-------|----------|-------------|
-| `id` | yes | Unique identifier for the group |
-| `label` | yes | Display name shown as the collapsible group header |
-| `kind` | no | Group kind: `lineage`, `topic`, `family`, `collection`, `default`. Defaults to `default` |
-| `current` | no | For `lineage`: dataset id of the current (newest valid) edition |
-| `description` | no | Short description of the group |
-| `color` | no | Accent color — single hex or `{ light, dark }` pair |
-| `datasets` | yes | Ordered array of dataset IDs belonging to this group |
-| `translations` | no | Localized label and description per language |
-
-Datasets not assigned to any group appear at the bottom of the dataset list.
+Each file:
 
-### Internationalization
-
-All localized text uses language maps — a `translations` field keyed by ISO 639-2 language codes. The top-level `title` and `description` fields hold the default-language text. The `translations` map provides overrides for additional languages:
-
-```yaml
-datasets:
-  - id: viml-2022
-    title: "OIML V 1:2022"
-    description: "Current edition with 135 terms..."
-    translations:
-      fra:
-        title: "OIML V 1:2022"
-        description: "Édition actuelle comprenant 135 termes..."
-
-datasetGroups:
-  - id: viml
-    label: "International Vocabulary of Legal Metrology"
-    translations:
-      fra:
-        label: "Vocabulaire international de métrologie légale"
+```json
+{
+  "title": "About This Dictionary",
+  "html": "<p>Content here. Supports full HTML.</p>"
+}
 ```
 
-This pattern applies everywhere localized text appears: site-level translations, dataset translations, group translations, and page translations. Do not use language suffixes like `_fra` — use nested language maps instead.
+The page appears in the sidebar navigation automatically.
 
-### Color system
+### Full example
 
-Dataset and group colors accept either a single hex string (backward compat) or a `{ light, dark }` pair:
+See [`site-config.example.yml`](site-config.example.yml) for all options including UI languages, fonts, features, and dataset groups.
 
-```yaml
-# Single hex (applied to both modes)
-color: "#004996"
+## CLI Commands
 
-# Explicit light/dark pair
-color:
-  light: "#004996"
-  dark: "#3B82F6"
 ```
-
-Relationship-type colors default from `data/colors.json` but can be overridden per deployment:
-
-```yaml
-colors:
-  relationshipType:
-    supersedes:
-      light: "#FF0000"
-      dark: "#FF5555"
-  dataset:
-    viml-2022:
-      light: "#004996"
-      dark: "#3B82F6"
+npx concept-browser fetch      # Download datasets from GCR/repos
+npx concept-browser generate   # Convert YAML → JSON-LD + RDF artifacts
+npx concept-browser build      # Full pipeline: fetch + generate + build site
 ```
 
-CSS variables are emitted on document root by `useColorTheme()`:
-- `--rel-{category}-{light|dark}` per relationship category
-- `--rel-type-{type}-{light|dark}` per relationship type
-- `--concept-status-{status}-{light|dark}` per concept status
-- `--group-kind-{kind}-{light|dark}` per group kind
-- `--ds-{light|dark}` per dataset (scoped via `[data-ds]`)
+## .gitignore for Your Project
 
-### Cross-reference mapping
+Add these to your project's `.gitignore`:
 
-```yaml
-crossReferences:
-  refPrefixMap:
-    IEV: iev
-  urnStandardMap:
-    "14812": isotc204
 ```
-
----
-
-## Deployment
-
-### GitHub Pages (recommended)
-
-1. Create a deployment repo with `site-config.yml`, dataset source, and content pages
-2. Add a GitHub Actions workflow:
-
-```yaml
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: Install concept-browser
-        run: |
-          npm install --ignore-scripts @glossarist/concept-browser
-          npm install --prefix node_modules/@glossarist/concept-browser sharp 2>/dev/null || true
-      - name: Build site
-        run: npx concept-browser build
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: dist
-  deploy:
-    needs: build
-    runs-on: ubuntu-latest
-    if: ${{ github.ref == 'refs/heads/main' }}
-    steps:
-      - uses: actions/deploy-pages@v4
+.cb-content/
+dist/
+.datasets/
+.gcr/
+public/data/
 ```
 
-All configuration (base path, dataset sources, branding) comes from `site-config.yml` — no dataset-specific environment variables needed.
-
-### Other hosting platforms
-
-The build produces static files in `dist/` with an SPA `404.html` fallback:
-
-- **Netlify:** Build command `npx concept-browser build`, publish directory `dist`, add `_redirects` with `/* /index.html 200`
-- **Vercel:** Framework Vite, build command `npx concept-browser build`, output directory `dist`
-- **AWS S3 + CloudFront:** Upload `dist/`, error document `index.html`, configure CloudFront for SPA routing
-
-### Known deployments
-
-Sites currently powered by `@glossarist/concept-browser`. When cutting a release with breaking changes, bump `@glossarist/concept-browser` in each consumer repo and redeploy.
+## Data Format
 
-| Repo | Site |
-|---|---|
-| [`geolexica/geolexica.github.io`](https://github.com/geolexica/geolexica.github.io) | https://www.geolexica.org |
-| [`geolexica/isotc204.geolexica.org`](https://github.com/geolexica/isotc204.geolexica.org) | https://isotc204.geolexica.org |
-| [`geolexica/isotc211.geolexica.org`](https://github.com/geolexica/isotc211.geolexica.org) | https://isotc211.geolexica.org |
-| [`geolexica/osgeo.geolexica.org`](https://github.com/geolexica/osgeo.geolexica.org) | https://osgeo.geolexica.org |
-| [`oimlsmart/vocab`](https://github.com/oimlsmart/vocab) | https://www.oimlsmart.org/vocab/ (VIML)¹ |
-| [`metanorma/oiml-terms`](https://github.com/metanorma/oiml-terms) | https://metanorma.github.io/oiml-terms/ |
-| [`glossarist/iala-vocab`](https://github.com/glossarist/iala-vocab) | https://glossarist.github.io/iala-vocab/ |
-| [`metanorma/iso-10303-2-vocab`](https://github.com/metanorma/iso-10303-2-vocab) | https://metanorma.github.io/iso-10303-2-vocab/ |
-
-To add a new deployment here, open a PR against this README.
-
-¹ The VIML deployment moved from `metanorma/oiml-viml` to [`oimlsmart/vocab`](https://github.com/oimlsmart/vocab) (GitHub redirects the old name automatically), and its live URL moved from `metanorma.github.io/oiml-viml/` to `www.oimlsmart.org/vocab/`. The old `metanorma.github.io/oiml-viml/` URL returns 404 (Pages doesn't follow repo renames across orgs).
-
----
-
-## Architecture
-
-### Tech Stack
-
-- **Vue 3** + **TypeScript** + **Vite**
-- **Pinia** (state management)
-- **Vue Router** (SPA navigation)
-- **Tailwind CSS 3** (utility-first styling)
-- **D3.js** (force-directed graph + relation sphere)
-- **KaTeX** (math rendering)
-- **n3** + **rdf-validate-shacl** (RDF parsing + SHACL validation)
-- **fast-check** (property-based fuzz testing)
-- **Vitest** with happy-dom
-
-### Project structure
-
-```
-src/
-├── adapters/          Data access layer (DatasetAdapter, AdapterFactory, UriRouter)
-├── components/        Vue components (AppSidebar, ConceptDetail, RelationSphere, etc.)
-│   ├── concept-rdf/   RDF graph IR + emitters + writers (concept, dataset, group, vocab, etc.)
-│   └── groups/        OCP group renderer dispatcher + per-kind sidebar components
-├── composables/       Vue composables (useDatasetSeries, useColorTheme, useSphereProjection)
-├── config/            Site config types, group-types registry, group-renderers registry
-├── data/              Static data (taxonomies.json, colors.json, concept-model shapes)
-├── graph/             Graph engine for concept relationships
-├── stores/            Pinia stores (vocabulary, ui)
-├── views/             Page-level components (HomeView, DatasetView, ConceptView, GroupView)
-├── i18n/              Internationalization (YAML locale files, auto-discovered)
-└── utils/             Utilities (color-theme, dataset-style, relationship-categories, content-renderer)
-
-cli/
-└── index.mjs          CLI entry point (fetch, generate, edges, build, doctor, normalize)
-
-scripts/
-├── fetch-datasets.mjs       Clone + harmonize source repos
-├── generate-data.mjs        Convert YAML → JSON-LD + RDF artifacts
-├── build-edges.js           Extract cross-reference edges
-├── process-about-pages.mjs  Compile markdown/AsciiDoc about pages
-├── validate-shacl.mjs       SHACL validation gate
-└── lib/                     Build-time emitters (vocab, dataset, group, agents, version, etc.)
-```
+Each concept is a YAML file in `datasets/{id}/concepts/`:
 
+```yaml
 ---
-
-## i18n
-
-UI translations are YAML files in `src/i18n/locales/`, auto-discovered via `import.meta.glob`. To add a new language:
-
-1. Copy `eng.yml` to `{lang-code}.yml`
-2. Translate all values
-3. Add the language to `uiLanguages` in `site-config.yml`
-
+data:
+  identifier: "1-1-1"
+  localized_concepts:
+    eng: <uuid>
+  sources:
+    - type: authoritative
+      origin:
+        ref:
+          source: "ISO 9000"
+  definition:
+    - content: "The concept definition text."
+  terms:
+    - type: expression
+      normative_status: preferred
+      designation: "quality"
+  language_code: eng
 ---
-
-## Testing
-
-```bash
-npm test              # Run all tests (Vitest with happy-dom)
-npm run test:watch    # Watch mode
-npm run mutation:test # Stryker mutation testing (scoped to RDF emitters, ~3-5 min)
 ```
 
-Test coverage includes:
-- 1357+ tests across unit, round-trip, SHACL conformance, property-based fuzz, and build-integration layers
-- 7-fixture concept corpus (minimal, multilingual, full-relationships, with-sources, with-non-verbal, with-dates, withdrawn)
-- SHACL conformance gate: all fixtures validated against canonical shapes
-- Property-based fuzz: 200 iterations × 4 invariants via fast-check
-- 10,000-concept scale stress test (< 100ms)
-- Stryker mutation testing scoped to concept/dataset/bibliography emitters
+Or use a Glossarist GCR package — set `gcr_package` in your dataset config and the CLI downloads it automatically.
 
----
+## Deployment
+
+The build outputs a static site to `dist/`. Deploy it anywhere:
 
-## License
+- **GitHub Pages**: Push `dist/` to `gh-pages` branch
+- **Netlify/Vercel**: Set build command to `npx concept-browser build`, publish directory to `dist/`
+- **S3/CloudFront**: `aws s3 sync dist/ s3://my-bucket/`
 
-This project is part of the [Glossarist](https://github.com/glossarist) ecosystem.
+No server required. All data is pre-built into static JSON files.

package/package.json

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

package/scripts/generate-data.mjs

@@ -920,6 +920,9 @@ async function processDataset(dir, register, opts) {
 
   const dsRefMaps = { ...refMaps, register, designationLookup };
 
+  const sourceMap = new Map();
+  const relTypeCounts = {};
+
   for (let i = 0; i < files.length; i++) {
     const file = files[i];
     try {
@@ -954,6 +957,28 @@ async function processDataset(dir, register, opts) {
         status: conceptYaml.eng?.entry_status || 'valid',
       });
 
+      const conceptSourceRefs = new Set();
+      const allSourceArrays = [
+        ...(conceptYaml._sources || []),
+        ...opts.languages.flatMap(l => conceptYaml[l]?.sources || []),
+      ];
+      for (const src of allSourceArrays) {
+        const ref = src.origin?.ref?.source || src.origin?.ref?.id || 'Unknown';
+        conceptSourceRefs.add(ref);
+        if (!sourceMap.has(ref)) {
+          sourceMap.set(ref, { ref, types: new Set(), conceptIds: [] });
+        }
+        if (src.type) sourceMap.get(ref).types.add(src.type);
+      }
+      for (const ref of conceptSourceRefs) {
+        sourceMap.get(ref)?.conceptIds.push(termid);
+      }
+
+      for (const r of conceptYaml._related || []) {
+        const type = r.type || 'unknown';
+        relTypeCounts[type] = (relTypeCounts[type] || 0) + 1;
+      }
+
       for (const lang of opts.languages) {
         const lc = conceptYaml[lang];
         if (lc) {
@@ -1072,6 +1097,23 @@ async function processDataset(dir, register, opts) {
     }
   }
 
+  const sourceStats = Array.from(sourceMap.values())
+    .map(s => ({
+      ref: s.ref,
+      types: Array.from(s.types),
+      conceptCount: s.conceptIds.length,
+      conceptIds: s.conceptIds,
+    }))
+    .sort((a, b) => b.conceptCount - a.conceptCount);
+  const totalRelationships = Object.values(relTypeCounts).reduce((a, b) => a + b, 0);
+
+  writeJson(path.join(DATA, register, 'stats.json'), {
+    sourceCount: sourceStats.length,
+    sources: sourceStats,
+    relationshipCount: totalRelationships,
+    relationshipTypes: relTypeCounts,
+  });
+
   const manifest = {
     id: register,
     datasetUri: opts.datasetUri,
@@ -1082,6 +1124,8 @@ async function processDataset(dir, register, opts) {
     baseUrl: `/data/${register}`,
     languages: opts.languages,
     conceptCount: concepts.length,
+    sourceCount: sourceStats.length,
+    relationshipCount: totalRelationships,
     conceptUrlTemplate: '{baseUrl}/concepts/{conceptId}.json',
     indexUrl: '{baseUrl}/index.json',
     contextUrl: 'https://glossarist.org/ns/context.jsonld',

package/src/components/AppSidebar.vue

@@ -136,7 +136,7 @@ const filteredGlobalPages = computed(() =>
 
 // Show only standard dataset pages (Concepts, Statistics, About)
 const filteredDatasetPages = computed(() =>
-  datasetPages.value.filter(p => ['', 'stats', 'about'].includes(p.route || ''))
+  datasetPages.value.filter(p => ['', 'stats', 'sources', 'about'].includes(p.route || ''))
 );
 
 const currentManifest = computed(() => store.manifests.get(currentDataset.value));

package/src/components/NavIcon.vue

@@ -9,6 +9,7 @@ const icons: Record<string, string> = {
   chart: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
   list: 'M4 6h16M4 10h16M4 14h16M4 18h16',
   schema: 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z',
+  database: 'M4 7c0 1.1 3.6 2 8 2s8-.9 8-2M4 7c0-1.1 3.6-2 8-2s8 .9 8 2M4 7v10c0 1.1 3.6 2 8 2s8-.9 8-2V7M4 12c0 1.1 3.6 2 8 2s8-.9 8-2',
 };
 
 defineProps<{ name: string }>();

package/src/config/use-site-config.ts

@@ -157,6 +157,9 @@ function synthesizeDatasetPages(features?: Record<string, unknown>, pages?: Page
   if (features?.stats !== false && !declaredRoutes.has('stats')) {
     result.push({ type: 'stats', route: 'stats', title: 'Statistics', icon: 'chart', datasetScoped: true });
   }
+  if (!declaredRoutes.has('sources')) {
+    result.push({ type: 'sources', route: 'sources', title: 'Sources', icon: 'database', datasetScoped: true });
+  }
   if (features?.about !== false && !declaredRoutes.has('about')) {
     result.push({ type: 'about', route: 'about', title: 'About', icon: 'info', datasetScoped: true });
   }

package/src/i18n/locales/eng.yml

@@ -9,6 +9,7 @@ nav.ontology: Ontology
 nav.concepts: Concepts
 nav.stats: Statistics
 nav.about: About
+nav.sources: Sources
 nav.navigation: Navigation
 nav.datasets: Datasets
 
@@ -121,6 +122,8 @@ lang.termOnlyIn: Term only in
 # Dataset view
 dataset.concepts: concepts
 dataset.languages: languages
+dataset.sources: sources
+dataset.relationships: relationships
 dataset.filterPlaceholder: "Filter concepts... (press /)"
 dataset.of: of
 dataset.in: in

package/src/pages/[...path].astro

@@ -15,6 +15,7 @@ export async function getStaticPaths() {
   for (const ds of datasets) {
     paths.push({ params: { path: `dataset/${ds.data.id}/about` } });
     paths.push({ params: { path: `dataset/${ds.data.id}/stats` } });
+    paths.push({ params: { path: `dataset/${ds.data.id}/sources` } });
     for (const g of await getCollection('groups')) {
       paths.push({ params: { path: `group/${g.data.id}/about` } });
     }

package/src/router/index.ts

@@ -31,6 +31,12 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('../views/PageView.vue'),
     props: true,
   },
+  {
+    path: '/dataset/:registerId/sources',
+    name: 'sources',
+    component: () => import('../views/SourcesView.vue'),
+    props: true,
+  },
   {
     path: '/group/:groupId',
     name: 'group',

package/src/views/DatasetView.vue

@@ -331,6 +331,10 @@ function clearSection() {
         <router-link :to="{ name: 'about', params: { registerId } }" class="badge badge-purple hover:opacity-80 transition-opacity">
           {{ t('nav.about') }}
         </router-link>
+        <router-link v-if="manifest.sourceCount" :to="{ name: 'sources', params: { registerId } }" class="badge badge-gray hover:opacity-80 transition-opacity">
+          {{ manifest.sourceCount }} {{ t('dataset.sources') }}
+        </router-link>
+        <span v-if="manifest.relationshipCount" class="badge badge-yellow">{{ manifest.relationshipCount.toLocaleString() }} {{ t('dataset.relationships') }}</span>
       </div>
     </div>
 

package/src/views/SourcesView.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { useDatasetLoader } from '../composables/use-dataset-loader';
+import { useDsStyle } from '../utils/dataset-style';
+import { useI18n } from '../i18n';
+
+const props = defineProps<{ registerId?: string }>();
+
+const store = useVocabularyStore();
+const { getColor } = useDsStyle();
+const { loading, localError, ensureLoaded, resolvedId } = useDatasetLoader(() => props.registerId);
+const { t } = useI18n();
+
+const manifest = computed(() => store.manifests.get(resolvedId.value));
+
+interface SourceEntry {
+  ref: string;
+  types: string[];
+  conceptCount: number;
+  conceptIds: string[];
+}
+
+const stats = ref<{ sources: SourceEntry[]; sourceCount: number; relationshipCount: number; relationshipTypes: Record<string, number> } | null>(null);
+const expandedSource = ref<string | null>(null);
+const filterText = ref('');
+
+async function loadStats() {
+  if (!resolvedId.value) return;
+  const base = import.meta.env.BASE_URL;
+  try {
+    const resp = await fetch(`${base}data/${resolvedId.value}/stats.json`);
+    if (resp.ok) {
+      stats.value = await resp.json();
+    }
+  } catch (e) {
+    console.warn('Failed to load stats:', e);
+  }
+}
+
+watch(() => resolvedId.value, () => { loadStats(); }, { immediate: true });
+
+const filteredSources = computed(() => {
+  if (!stats.value?.sources) return [];
+  const q = filterText.value.toLowerCase().trim();
+  if (!q) return stats.value.sources;
+  return stats.value.sources.filter(s =>
+    s.ref.toLowerCase().includes(q) ||
+    s.types.some(t => t.toLowerCase().includes(q))
+  );
+});
+
+function sourceTypeBadge(type: string): string {
+  if (type === 'authoritative') return 'badge-green';
+  if (type === 'lineage') return 'badge-yellow';
+  return 'badge-gray';
+}
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto">
+    <div v-if="loading" class="flex items-center justify-center py-20">
+      <div class="skeleton h-8 w-64"></div>
+    </div>
+
+    <div v-else-if="localError" class="card p-8 text-center">
+      <p class="text-red-600">{{ localError }}</p>
+    </div>
+
+    <template v-else-if="manifest">
+      <div class="mb-6">
+        <div class="text-xs text-ink-400 mb-2">
+          <router-link :to="{ name: 'dataset', params: { registerId } }" class="hover:text-blue-600">{{ manifest.title }}</router-link>
+          <span class="mx-1">›</span>
+          <span>{{ t('nav.sources') }}</span>
+        </div>
+        <h1 class="font-serif text-3xl text-ink-800 dark:text-ink-100">{{ t('nav.sources') }}</h1>
+        <p class="text-ink-400 mt-1" v-if="stats">{{ stats.sourceCount }} {{ t('dataset.sources') }} · {{ manifest.conceptCount.toLocaleString() }} {{ t('dataset.concepts') }}</p>
+      </div>
+
+      <div v-if="!stats" class="card p-8 text-center text-ink-400">
+        Loading sources…
+      </div>
+
+      <template v-else>
+        <div class="card p-3 mb-4">
+          <input
+            v-model="filterText"
+            type="text"
+            :placeholder="'Filter sources...'"
+            class="w-full px-3 py-2 text-sm border border-ink-100 dark:border-ink-700 rounded-lg bg-surface-raised dark:bg-ink-800 text-ink-700 dark:text-ink-200 focus:outline-none focus:border-blue-400"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <div v-for="src in filteredSources" :key="src.ref" class="card overflow-hidden">
+            <button
+              class="w-full text-left p-4 flex items-center gap-3 hover:bg-ink-50/50 dark:hover:bg-ink-800/30 transition-colors"
+              @click="expandedSource = expandedSource === src.ref ? null : src.ref"
+            >
+              <span
+                class="w-3 h-3 rounded-full flex-shrink-0"
+                :style="{ backgroundColor: getColor(resolvedId) }"
+              ></span>
+              <div class="flex-1 min-w-0">
+                <div class="font-medium text-ink-800 dark:text-ink-100 truncate">{{ src.ref }}</div>
+                <div class="flex items-center gap-1.5 mt-1">
+                  <span v-for="tp in src.types" :key="tp" class="badge text-[9px]" :class="sourceTypeBadge(tp)">{{ tp }}</span>
+                  <span class="text-xs text-ink-400">{{ src.conceptCount }} {{ t('dataset.concepts') }}</span>
+                </div>
+              </div>
+              <svg class="w-4 h-4 text-ink-300 transition-transform flex-shrink-0" :class="{ 'rotate-180': expandedSource === src.ref }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+              </svg>
+            </button>
+
+            <div v-if="expandedSource === src.ref" class="border-t border-ink-100/60 dark:border-ink-700/40 p-4">
+              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-1">
+                <router-link
+                  v-for="cid in src.conceptIds"
+                  :key="cid"
+                  :to="{ name: 'concept', params: { registerId, conceptId: cid } }"
+                  class="block px-2 py-1 rounded text-sm text-ink-600 dark:text-ink-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+                >
+                  <code class="text-xs text-ink-400 font-mono mr-1">{{ cid }}</code>
+                </router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>

package/src/views/StatsView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
@@ -15,51 +15,37 @@ const { t } = useI18n();
 
 const manifest = computed(() => store.manifests.get(resolvedId.value));
 
-interface LangStat {
-  lang: string;
-  terms: number;
-  definitions: number;
-}
+interface LangStat { lang: string; terms: number; definitions: number; }
 
-const stats = computed(() => {
+const langStats = computed(() => {
   const m = manifest.value;
   if (!m) return { langs: [], total: 0 };
-
-  // Scan the index for actual language coverage
   const adapter = store.datasets.get(resolvedId.value);
   const conceptCounts: Record<string, number> = {};
-
   if (adapter) {
-    const concepts = adapter.getConcepts();
-    for (const c of concepts) {
+    for (const c of adapter.getConcepts()) {
       if (!c) continue;
       for (const lang of Object.keys(c.designations)) {
         conceptCounts[lang] = (conceptCounts[lang] || 0) + 1;
       }
     }
   }
-
-  // Merge with manifest languageStats (for definition counts)
   const ls = m.languageStats || {};
   const allLangs = new Set([...Object.keys(conceptCounts), ...m.languages]);
-
   const langs: LangStat[] = [...allLangs].map(lang => ({
     lang,
     terms: ls[lang]?.terms ?? conceptCounts[lang] ?? 0,
     definitions: ls[lang]?.definitions ?? conceptCounts[lang] ?? 0,
   }));
-
-  // Sort: eng first, then by term count descending
   langs.sort((a, b) => {
     if (a.lang === 'eng') return -1;
     if (b.lang === 'eng') return 1;
     return b.terms - a.terms;
   });
-
   return { langs, total: m.conceptCount };
 });
 
-const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms), 1));
+const maxTerms = computed(() => Math.max(...langStats.value.langs.map(l => l.terms), 1));
 
 function coverageColor(ratio: number): string {
   if (ratio >= 0.8) return 'bg-emerald-500';
@@ -67,11 +53,49 @@ function coverageColor(ratio: number): string {
   if (ratio >= 0.25) return 'bg-amber-500';
   return 'bg-red-400';
 }
+
+interface StatsData {
+  sourceCount: number;
+  sources: Array<{ ref: string; types: string[]; conceptCount: number }>;
+  relationshipCount: number;
+  relationshipTypes: Record<string, number>;
+}
+
+const statsData = ref<StatsData | null>(null);
+
+async function loadStats() {
+  if (!resolvedId.value) return;
+  const base = import.meta.env.BASE_URL;
+  try {
+    const resp = await fetch(`${base}data/${resolvedId.value}/stats.json`);
+    if (resp.ok) statsData.value = await resp.json();
+  } catch {}
+}
+
+watch(() => resolvedId.value, () => { loadStats(); }, { immediate: true });
+
+const relEntries = computed(() => {
+  if (!statsData.value?.relationshipTypes) return [];
+  return Object.entries(statsData.value.relationshipTypes)
+    .sort(([, a], [, b]) => b - a);
+});
+
+const maxRel = computed(() => Math.max(...relEntries.value.map(([, n]) => n), 1));
+
+const topSources = computed(() => {
+  if (!statsData.value?.sources) return [];
+  return statsData.value.sources.slice(0, 10);
+});
+
+function sourceTypeBadge(type: string): string {
+  if (type === 'authoritative') return 'badge-green';
+  if (type === 'lineage') return 'badge-yellow';
+  return 'badge-gray';
+}
 </script>
 
 <template>
   <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-    <!-- Breadcrumb -->
     <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400 mb-6">
       <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">{{ t('nav.home') }}</router-link>
       <span class="text-ink-200">/</span>
@@ -84,9 +108,7 @@ function coverageColor(ratio: number): string {
       <div class="animate-pulse space-y-6">
         <div class="h-8 bg-ink-100 rounded w-32"></div>
         <div class="h-4 bg-ink-100 rounded w-64"></div>
-        <div class="card overflow-hidden">
-          <div class="h-80 bg-ink-50"></div>
-        </div>
+        <div class="card overflow-hidden"><div class="h-80 bg-ink-50"></div></div>
       </div>
     </template>
     <template v-else-if="localError">
@@ -99,46 +121,83 @@ function coverageColor(ratio: number): string {
     <template v-else-if="manifest">
       <h1 class="font-serif text-3xl text-ink-800 mb-2">{{ t('stats.title') }}</h1>
       <p class="text-ink-400 mb-8">
-        {{ t('stats.summary', { count: stats.total.toLocaleString(), langCount: String(manifest.languages.length) }) }}
+        {{ t('stats.summary', { count: langStats.total.toLocaleString(), langCount: String(manifest.languages.length) }) }}
       </p>
 
-      <!-- Language stats table -->
-      <div class="card -mx-4 sm:mx-0 overflow-x-auto">
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-ink-100/60 bg-ink-50">
-              <th class="text-left px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.language') }}</th>
-              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.terms') }}</th>
-              <th class="text-right px-5 py-3 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.definitions') }}</th>
-              <th class="px-5 py-3 text-ink-600 font-medium w-40"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="s in stats.langs" :key="s.lang" class="border-b border-ink-50 last:border-0">
-              <td class="px-5 py-3">
-                <div class="flex items-center gap-2">
-                  <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langLabel(s.lang) }}</span>
-                  <span class="font-medium text-ink-800">{{ langName(s.lang) }}</span>
-                  <span class="text-ink-300 text-xs">({{ s.lang }})</span>
-                </div>
-              </td>
-              <td class="text-right px-5 py-3 font-mono text-ink-700">{{ s.terms.toLocaleString() }}</td>
-              <td class="text-right px-5 py-3 font-mono text-ink-700">{{ s.definitions.toLocaleString() }}</td>
-              <td class="px-5 py-3">
-                <div class="flex items-center gap-2">
-                  <div class="h-2 rounded-full bg-ink-50 overflow-hidden flex-1">
-                    <div
-                      class="h-full rounded-full transition-all duration-500"
-                      :class="coverageColor(s.terms / maxTerms)"
-                      :style="{ width: (s.terms / maxTerms * 100) + '%' }"
-                    ></div>
-                  </div>
-                  <span class="text-xs text-ink-300 w-10 text-right tabular-nums">{{ Math.round(s.terms / maxTerms * 100) }}%</span>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      <div v-if="statsData" class="flex flex-wrap gap-2 mb-8">
+        <span class="badge badge-purple">{{ statsData.sourceCount }} {{ t('dataset.sources') }}</span>
+        <span class="badge badge-yellow">{{ statsData.relationshipCount.toLocaleString() }} {{ t('dataset.relationships') }}</span>
+      </div>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div>
+          <h2 class="section-label mb-3">{{ t('stats.language') }}</h2>
+          <div class="card overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="border-b border-ink-100/60 bg-ink-50">
+                  <th class="text-left px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.language') }}</th>
+                  <th class="text-right px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.terms') }}</th>
+                  <th class="text-right px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">{{ t('stats.definitions') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="s in langStats.langs" :key="s.lang" class="border-b border-ink-50 last:border-0">
+                  <td class="px-4 py-2.5">
+                    <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langLabel(s.lang) }}</span>
+                    <span class="ml-2 font-medium text-ink-800">{{ langName(s.lang) }}</span>
+                  </td>
+                  <td class="text-right px-4 py-2.5 font-mono text-ink-700">{{ s.terms.toLocaleString() }}</td>
+                  <td class="text-right px-4 py-2.5 font-mono text-ink-700">{{ s.definitions.toLocaleString() }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div v-if="relEntries.length">
+          <h2 class="section-label mb-3">{{ t('dataset.relationships') }}</h2>
+          <div class="card p-4 space-y-3">
+            <div v-for="[type, count] in relEntries" :key="type">
+              <div class="flex items-center justify-between mb-1">
+                <span class="text-sm font-medium text-ink-700">{{ type }}</span>
+                <span class="text-sm font-mono text-ink-500">{{ count.toLocaleString() }}</span>
+              </div>
+              <div class="h-2 rounded-full bg-ink-50 overflow-hidden">
+                <div class="h-full rounded-full bg-blue-500 transition-all duration-500" :style="{ width: (count / maxRel * 100) + '%' }"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="topSources.length" class="mt-8">
+        <div class="flex items-center justify-between mb-3">
+          <h2 class="section-label">{{ t('dataset.sources') }}</h2>
+          <router-link :to="{ name: 'sources', params: { registerId: resolvedId } }" class="text-xs text-blue-600 hover:underline">
+            View all {{ statsData?.sourceCount }} →
+          </router-link>
+        </div>
+        <div class="card overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead>
+              <tr class="border-b border-ink-100/60 bg-ink-50">
+                <th class="text-left px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">Source</th>
+                <th class="text-left px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">Type</th>
+                <th class="text-right px-4 py-2.5 text-ink-600 font-medium text-xs uppercase tracking-wide">Concepts</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="src in topSources" :key="src.ref" class="border-b border-ink-50 last:border-0">
+                <td class="px-4 py-2.5 font-medium text-ink-800">{{ src.ref }}</td>
+                <td class="px-4 py-2.5">
+                  <span v-for="tp in src.types" :key="tp" class="badge text-[9px] mr-1" :class="sourceTypeBadge(tp)">{{ tp }}</span>
+                </td>
+                <td class="text-right px-4 py-2.5 font-mono text-ink-700">{{ src.conceptCount.toLocaleString() }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </template>
   </div>