@glossarist/concept-browser 0.7.59 → 0.7.61

package/README.md

@@ -432,7 +432,7 @@ Sites currently powered by `@glossarist/concept-browser`. When cutting a release
 | [`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/ |
-| [`metanorma/iala-vocab`](https://github.com/metanorma/iala-vocab) | https://metanorma.github.io/iala-vocab/ |
+| [`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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.7.59",
+  "version": "0.7.61",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {
@@ -31,7 +31,7 @@
     "autoprefixer": "^10.4.21",
     "d3": "^7.9.0",
     "favicons": "^7.2.0",
-    "glossarist": "^0.4.8",
+    "glossarist": "^0.4.9",
     "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",
     "pinia": "^2.3.1",

package/scripts/generate-data.mjs

@@ -1612,7 +1612,7 @@ for (const [id, count] of Object.entries(counts)) {
 
 writeBuildActivity(total, registry.map(r => r.id));
 
-fs.writeFileSync(path.join(DATA, '_vocab.ttl'), buildVocabularyTurtle());
+fs.writeFileSync(path.join(DATA, '_vocab.ttl'), await buildVocabularyTurtle());
 console.log('Emitted vocabulary graph: data/_vocab.ttl');
 
 const contributors = config.contributors ?? [];

package/scripts/lib/vocab-turtle.mjs

@@ -1,6 +1,21 @@
+// Vocab turtle builder — emits SKOS ConceptSchemes for the
+// glossarist enumeration IRIs.
+//
+// Delegates to glossarist-js's vocabulary emitter + writeTurtle so the
+// canonical prefix list, CURIE handling, and serialization stay in one
+// place. The output is byte-equivalent in semantics ( CURIEs resolved
+// to absolute IRIs, then re-rendered via glossarist-js's n3 writer with
+// the canonical prefix map ).
+
 import { readFileSync } from 'node:fs';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import {
+  vocabularyToQuads,
+  collectQuads,
+  writeTurtle,
+  PREFIXES,
+} from 'glossarist/rdf';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const VOCAB_PATH = join(__dirname, '..', '..', 'data', 'glossarist-vocab.json');
@@ -9,54 +24,20 @@ function loadVocab(path = VOCAB_PATH) {
   return JSON.parse(readFileSync(path, 'utf8'));
 }
 
-function ttlLit(s) {
-  if (s == null) return '""';
-  const escaped = String(s).replace(/\\/g, '\\\\').replace(/"/g, '\\"')
-    .replace(/\n/g, '\\n').replace(/\r/g, '\\r').replace(/\t/g, '\\t');
-  return `"${escaped}"`;
-}
-
-function ttlPrefixed(qname) {
-  const colonIdx = qname.indexOf(':');
-  if (colonIdx < 0) return qname;
-  const local = qname.slice(colonIdx + 1);
-  const escaped = local.replace(/([/])/g, '\\$1');
-  return `${qname.slice(0, colonIdx + 1)}${escaped}`;
+// n3's writer prefixes must omit the trailing # or / — those go in
+// the local name. Build the prefix-only map for writeTurtle.
+function writerPrefixes() {
+  const out = {};
+  for (const [k, v] of Object.entries(PREFIXES)) {
+    out[k] = v;
+  }
+  return out;
 }
 
-export function buildVocabularyTurtle() {
+export async function buildVocabularyTurtle() {
   const vocab = loadVocab();
-  const lines = [
-    '@prefix skos: <http://www.w3.org/2004/02/skos/core#> .',
-    '@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .',
-    '@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .',
-    '@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .',
-    '@prefix dcterms: <http://purl.org/dc/terms/> .',
-    '@prefix gloss: <https://www.glossarist.org/ontologies/> .',
-    '',
-  ];
-
-  for (const scheme of vocab.schemes) {
-    const schemeLines = [
-      `${ttlPrefixed(scheme.schemeIri)} a skos:ConceptScheme ;`,
-      `  rdfs:label ${ttlLit(scheme.label)} ;`,
-    ];
-    for (const term of scheme.terms) {
-      schemeLines.push(`  skos:hasTopConcept ${ttlPrefixed(term.iri)} ;`);
-    }
-    schemeLines[schemeLines.length - 1] = schemeLines[schemeLines.length - 1].replace(/ ;$/, ' .');
-    lines.push(...schemeLines);
-
-    for (const term of scheme.terms) {
-      lines.push(`${ttlPrefixed(term.iri)} a skos:Concept ;`);
-      lines.push(`  rdfs:label ${ttlLit(term.label)} ;`);
-      lines.push(`  skos:inScheme ${ttlPrefixed(scheme.schemeIri)} .`);
-      lines.push('');
-    }
-    lines.push('');
-  }
-
-  return lines.join('\n') + '\n';
+  const quads = collectQuads(vocabularyToQuads(vocab.schemes));
+  return writeTurtle(quads, { prefixes: writerPrefixes() });
 }
 
 export function listVocabSchemes() {

package/src/__tests__/scripts/build-integration.test.ts

@@ -15,7 +15,7 @@ function runInline(code: string): string {
 
 describe('WS F Layer 8 — build pipeline integration', () => {
   it('vocab-turtle.mjs produces parseable Turtle with 7 schemes', () => {
-    const out = runInline(`import { buildVocabularyTurtle } from './scripts/lib/vocab-turtle.mjs'; console.log(buildVocabularyTurtle());`);
+    const out = runInline(`import { buildVocabularyTurtle } from './scripts/lib/vocab-turtle.mjs'; console.log(await buildVocabularyTurtle());`);
     const store = parseTurtle(out);
     const schemes = [...store].filter(q =>
       q.predicate.value === 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type' &&
@@ -119,7 +119,7 @@ describe('WS F Layer 8 — build pipeline integration', () => {
       import { buildBibliographyTurtle } from './scripts/lib/bibliography-turtle.mjs';
       import { buildVersionHistoryTurtle } from './scripts/lib/version-turtle.mjs';
       const parts = [
-        buildVocabularyTurtle(),
+        await buildVocabularyTurtle(),
         buildDatasetTurtle({ datasetIri: 'https://glossarist.org/test/', registerId: 'test', title: 't', modified: '2026-01-01', languages: ['eng'], distributions: [], topConceptUris: [], sections: [] }),
         buildActivityTurtle({ runId: 'r', startedAt: '2026-01-01T00:00:00Z', endedAt: '2026-01-01T00:05:00Z', toolId: 'cb', toolVersion: '0', datasetRegisters: [], conceptCount: 0 }),
         buildAgentsTurtle([{ name: 'Ada' }]),

package/src/__tests__/scripts/vocab-turtle.test.ts

@@ -13,22 +13,22 @@ const SKOS = 'http://www.w3.org/2004/02/skos/core#';
 const RDF_TYPE = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type';
 
 describe('buildVocabularyTurtle (mjs)', () => {
-  it('parses without errors and produces a non-empty graph', () => {
-    const ttl = buildVocabularyTurtle();
+  it('parses without errors and produces a non-empty graph', async () => {
+    const ttl = await buildVocabularyTurtle();
     const store = parse(ttl);
     expect(store.size).toBeGreaterThan(0);
   });
 
-  it('declares at least one skos:ConceptScheme', () => {
-    const store = parse(buildVocabularyTurtle());
+  it('declares at least one skos:ConceptScheme', async () => {
+    const store = parse(await buildVocabularyTurtle());
     const schemes = [...store].filter(q =>
       q.predicate.value === RDF_TYPE && q.object.value === `${SKOS}ConceptScheme`,
     );
     expect(schemes.length).toBeGreaterThan(0);
   });
 
-  it('declares enumeration IRIs as skos:Concept instances', () => {
-    const store = parse(buildVocabularyTurtle());
+  it('declares enumeration IRIs as skos:Concept instances', async () => {
+    const store = parse(await buildVocabularyTurtle());
     const concepts = [...store].filter(q =>
       q.predicate.value === RDF_TYPE && q.object.value === `${SKOS}Concept`,
     );
@@ -53,8 +53,8 @@ describe('buildVocabularyTurtle (mjs)', () => {
     expect(schemes.length).toBe(7);
   });
 
-  it('emits skos:hasTopConcept and skos:inScheme bidirectionally', () => {
-    const store = parse(buildVocabularyTurtle());
+  it('emits skos:hasTopConcept and skos:inScheme bidirectionally', async () => {
+    const store = parse(await buildVocabularyTurtle());
     const hasTopConcept = [...store].filter(q => q.predicate.value === `${SKOS}hasTopConcept`);
     const inScheme = [...store].filter(q => q.predicate.value === `${SKOS}inScheme`);
     expect(hasTopConcept.length).toBeGreaterThan(0);

package/src/config/group-types.ts

@@ -33,7 +33,7 @@ export const GROUP_TYPES: Record<DatasetGroupKind, GroupTypeMeta> = {
     kind: 'lineage',
     label: 'Edition series',
     description: 'Same vocabulary, different editions over time',
-    glyph: '⏳',
+    glyph: '⟶',
     ordered: true,
     supersession: true,
     sameVocabulary: true,

package/src/views/DatasetView.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch, onMounted, onUnmounted, onBeforeUnmount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
+import { useUiStore } from '../stores/ui';
 import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
 import { FORMAT_LABELS } from '../config/types';
@@ -17,6 +18,7 @@ import { formatSectionLabel } from '../utils/section-display';
 const props = defineProps<{ registerId: string }>();
 
 const store = useVocabularyStore();
+const uiStore = useUiStore();
 const { getStyle } = useDsStyle();
 const { ensureLoaded, loading, localError } = useDatasetLoader(() => props.registerId);
 const { t } = useI18n();
@@ -30,6 +32,16 @@ const localizedDescription = computed(() => localizedDatasetField(props.register
 const adapter = computed(() => store.datasets.get(props.registerId));
 const chunkLoading = ref(false);
 
+// Concept-count badge: tinted bg + always-readable text in either mode.
+// Previously used `.light` for bg and `.dark` for text — but `.dark` is
+// just `.light` with alpha, so text was invisible against the bg.
+const conceptCountBadgeStyle = computed(() => {
+  const s = getStyle(props.registerId);
+  return uiStore.isDark
+    ? { backgroundColor: s.darkAlpha(0.25), color: s.light }
+    : { backgroundColor: s.light, color: '#ffffff' };
+});
+
 // Background chunk preloading via requestIdleCallback
 let idlePreloadHandle: ReturnType<typeof requestIdleCallback> | ReturnType<typeof setTimeout> | null = null;
 
@@ -310,7 +322,7 @@ function clearSection() {
       <h1 class="font-serif text-3xl text-ink-800 mb-2">{{ localizedTitle }}</h1>
       <p class="text-ink-400 leading-relaxed max-w-2xl">{{ localizedDescription }}</p>
       <div class="flex flex-wrap gap-2 mt-4">
-        <span class="badge" :style="{ backgroundColor: getStyle(registerId).light, color: getStyle(registerId).dark }">{{ manifest.conceptCount.toLocaleString() }} {{ t('dataset.concepts') }}</span>
+        <span class="badge" :style="conceptCountBadgeStyle">{{ manifest.conceptCount.toLocaleString() }} {{ t('dataset.concepts') }}</span>
         <span class="badge badge-gray">{{ manifest.languages.length }} {{ t('dataset.languages') }}</span>
         <span class="badge badge-green">{{ manifest.owner }}</span>
         <router-link :to="{ name: 'stats', params: { registerId } }" class="badge badge-blue hover:opacity-80 transition-opacity">

package/src/views/HomeView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
+import { useUiStore } from '../stores/ui';
 import { useRouter } from 'vue-router';
 import { useDsStyle } from '../utils/dataset-style';
 import { useSiteConfig } from '../config/use-site-config';
@@ -8,10 +9,18 @@ import { useI18n } from '../i18n';
 import HomeSeriesSection from '../components/HomeSeriesSection.vue';
 
 const store = useVocabularyStore();
+const uiStore = useUiStore();
 const router = useRouter();
 const { getStyle } = useDsStyle();
 const { config: siteConfig, localizedTitle, localizedSubtitle, localizedDescription, localizedDatasetField } = useSiteConfig();
 const { t } = useI18n();
+
+function tagBadgeStyle(dsId: string) {
+  const s = getStyle(dsId);
+  return uiStore.isDark
+    ? { backgroundColor: s.darkAlpha(0.25), color: s.light }
+    : { backgroundColor: s.light, color: '#ffffff' };
+}
 const exploring = ref(false);
 
 async function exploreRandom() {
@@ -181,7 +190,7 @@ function goToGraph() { router.push({ name: 'graph' }); }
           </div>
 
           <div class="flex flex-wrap gap-1.5 pl-[22px] mb-3">
-            <span v-for="tag in (ds.manifest.tags ?? []).slice(0, 3)" :key="tag" class="badge text-[10px]" :style="{ backgroundColor: getStyle(ds.id).light, color: getStyle(ds.id).dark }">
+            <span v-for="tag in (ds.manifest.tags ?? []).slice(0, 3)" :key="tag" class="badge text-[10px]" :style="tagBadgeStyle(ds.id)">
               {{ tag }}
             </span>
           </div>