@glossarist/concept-browser 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "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

@@ -3,7 +3,6 @@ import path from 'path';
 import yaml from 'js-yaml';
 import { naturalSort } from 'glossarist';
 import { loadSiteConfig } from './load-site-config.mjs';
-import { preRenderMath } from './math-prerender.mjs';
 
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
 const ROOT = process.cwd();
@@ -56,7 +55,7 @@ function termToDesignation(term) {
       : term.type === 'abbreviation' ? 'gl:Abbreviation'
       : 'gl:Designation',
     'gl:normativeStatus': term.normative_status || 'preferred',
-    'gl:term': preRenderMath(term.designation),
+    'gl:term': term.designation,
   };
   if (term.gender) doc['gl:gender'] = term.gender;
   if (term.plurality) doc['gl:plurality'] = term.plurality;
@@ -69,7 +68,7 @@ function defsToJsonLd(defs) {
   return defs
     .map(d => ({
       '@type': 'gl:DetailedDefinition',
-      'gl:content': preRenderMath(d.content || ''),
+      'gl:content': d.content || '',
     }))
     .filter(d => d['gl:content']);
 }
@@ -256,7 +255,7 @@ function getPrimaryDesignation(conceptYaml) {
     if (lc && lc.terms && lc.terms.length > 0) {
       const preferredExpr = lc.terms.find(t => t.normative_status === 'preferred' && t.type === 'expression');
       const preferred = preferredExpr || lc.terms.find(t => t.normative_status === 'preferred') || lc.terms[0];
-      descs[lang] = preRenderMath(preferred.designation);
+      descs[lang] = preferred.designation;
     }
   }
   return descs;

package/src/__tests__/math.test.ts

@@ -100,6 +100,52 @@ describe('renderMath', () => {
     expect(renderMath(null as any)).toBe('');
     expect(renderMath(undefined as any)).toBe('');
   });
+
+  // stem:[...] placeholder tests
+  it('outputs math-pending placeholder for stem:[expr]', () => {
+    const result = renderMath('value stem:[x^2] here');
+    expect(result).toContain('class="math-pending"');
+    expect(result).toContain('data-expr="x^2"');
+    expect(result).toContain('data-format="asciimath"');
+    expect(result).toContain('x^2');
+  });
+
+  it('outputs math-pending with math-bold for *stem:[expr]', () => {
+    const result = renderMath('*stem:[alpha]');
+    expect(result).toContain('class="math-pending math-bold"');
+    expect(result).toContain('data-expr="alpha"');
+  });
+
+  it('outputs math-pending placeholder for latexmath:[expr]', () => {
+    const result = renderMath('equation latexmath:[\\frac{a}{b}] end');
+    expect(result).toContain('class="math-pending"');
+    expect(result).toContain('data-expr="\\frac{a}{b}"');
+    expect(result).toContain('data-format="latex"');
+  });
+
+  it('handles multiple stem: expressions in one string', () => {
+    const result = renderMath('stem:[m] out of stem:[n] redundancy');
+    const matches = result.match(/class="math-pending"/g);
+    expect(matches).toHaveLength(2);
+    expect(result).toContain('data-expr="m"');
+    expect(result).toContain('data-expr="n"');
+  });
+
+  it('handles nested brackets in stem:', () => {
+    const result = renderMath('stem:[a_[i]]');
+    expect(result).toContain('data-expr="a_[i]"');
+  });
+
+  it('handles stem: in designation text', () => {
+    const result = renderMath('stem:[n]-ary digit');
+    expect(result).toContain('data-expr="n"');
+    expect(result).toContain('-ary digit');
+  });
+
+  it('escapes special HTML in stem: expressions', () => {
+    const result = renderMath('stem:[a<b]');
+    expect(result).toContain('data-expr="a&lt;b"');
+  });
 });
 
 describe('cleanContent', () => {
@@ -135,4 +181,20 @@ describe('cleanContent', () => {
     expect(cleanContent('')).toBe('');
     expect(cleanContent(null as any)).toBe('');
   });
+
+  it('strips stem: notation to plain expression', () => {
+    expect(cleanContent('stem:[x^2]')).toBe('x^2');
+  });
+
+  it('strips *stem: bold notation', () => {
+    expect(cleanContent('*stem:[alpha]')).toBe('alpha');
+  });
+
+  it('strips latexmath: notation', () => {
+    expect(cleanContent('latexmath:[\\frac{a}{b}]')).toBe('\\frac{a}{b}');
+  });
+
+  it('strips stem: in running text', () => {
+    expect(cleanContent('value stem:[m] out of stem:[n]')).toBe('value m out of n');
+  });
 });

package/src/components/ConceptDetail.vue

@@ -318,7 +318,7 @@ function plainTruncate(html: string, max: number = 120): string {
 </script>
 
 <template>
-  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div v-math class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
     <!-- Header -->
     <div class="mb-6">
       <!-- Breadcrumb + nav row -->

package/src/components/LanguageDetail.vue

@@ -110,7 +110,7 @@ function handleContentClick(e: MouseEvent) {
 </script>
 
 <template>
-  <div class="space-y-5" @click="handleContentClick">
+  <div v-math class="space-y-5" @click="handleContentClick">
     <!-- Language selector -->
     <div class="flex flex-wrap gap-1.5">
       <button

package/src/directives/v-math.ts

@@ -0,0 +1,33 @@
+import { type Directive } from 'vue';
+import { loadPlurimath, mathToHtml } from '../utils/plurimath';
+
+let loaded = false;
+
+function upgrade(el: HTMLElement) {
+  const pending = el.querySelectorAll('.math-pending');
+  if (!pending.length) return;
+
+  if (!loaded) {
+    loadPlurimath().then(() => {
+      loaded = true;
+      upgrade(el);
+    });
+    return;
+  }
+
+  pending.forEach((span) => {
+    const expr = (span as HTMLElement).dataset.expr;
+    const format = (span as HTMLElement).dataset.format || 'asciimath';
+    const bold = span.classList.contains('math-bold');
+    if (!expr) return;
+    const html = mathToHtml(expr, format, bold);
+    const wrapper = document.createElement('span');
+    wrapper.innerHTML = html;
+    span.replaceWith(wrapper.firstElementChild || wrapper);
+  });
+}
+
+export const vMath: Directive<HTMLElement> = {
+  updated(el) { upgrade(el); },
+  mounted(el) { upgrade(el); },
+};

package/src/main.ts

@@ -2,9 +2,11 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import App from './App.vue';
 import router from './router';
+import { vMath } from './directives/v-math';
 import './style.css';
 
 const app = createApp(App);
 app.use(createPinia());
 app.use(router);
+app.directive('math', vMath);
 app.mount('#app');

package/src/utils/math.ts

@@ -8,6 +8,53 @@ export interface RenderOptions {
   figResolver?: FigResolver;
 }
 
+function escapeAttr(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function replaceBracketed(text: string, prefix: string, handler: (content: string, bold: boolean) => string): string {
+  let result = '';
+  let i = 0;
+  const boldPrefix = '*' + prefix;
+  while (i < text.length) {
+    if (text.startsWith(boldPrefix + '[', i)) {
+      i += boldPrefix.length + 1;
+      let j = i;
+      let d = 1;
+      while (j < text.length && d > 0) {
+        if (text[j] === '[') d++;
+        else if (text[j] === ']') d--;
+        j++;
+      }
+      const content = text.slice(i, j - 1);
+      let end = j;
+      if (end < text.length && text[end] === '*') end++;
+      result += handler(content, true);
+      i = end;
+    } else if (text.startsWith(prefix + '[', i)) {
+      i += prefix.length + 1;
+      let j = i;
+      let d = 1;
+      while (j < text.length && d > 0) {
+        if (text[j] === '[') d++;
+        else if (text[j] === ']') d--;
+        j++;
+      }
+      const content = text.slice(i, j - 1);
+      result += handler(content, false);
+      i = j;
+    } else {
+      result += text[i];
+      i++;
+    }
+  }
+  return result;
+}
+
+function mathPlaceholder(expr: string, format: string, bold: boolean): string {
+  return `<span class="math-pending${bold ? ' math-bold' : ''}" data-expr="${escapeAttr(expr)}" data-format="${format}">${escapeAttr(expr)}</span>`;
+}
+
 function convertLists(text: string): string {
   let result = text.replace(/(?:^|\n)((?:[ \t]*\* [^\n]+)(?:\n[ \t]*\* [^\n]+)*)/g, (_, block) => {
     if (/^\*stem:\[/.test(block.trimStart())) return _;
@@ -37,6 +84,13 @@ function convertLists(text: string): string {
   return result;
 }
 
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
 export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | RenderOptions): string {
   if (!text) return '';
   let result = text;
@@ -45,7 +99,10 @@ export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | Ren
     ? { xrefResolver: xrefResolverOrOpts }
     : (xrefResolverOrOpts ?? {});
 
-  // Math (stem/latexmath) is pre-rendered at build time. Only process text formatting.
+  // Math expressions: output placeholders for v-math directive to upgrade
+  result = replaceBracketed(result, 'stem:', (expr, bold) => mathPlaceholder(expr, 'asciimath', bold));
+  result = replaceBracketed(result, 'latexmath:', (expr, bold) => mathPlaceholder(expr, 'latex', bold));
+
   result = convertLists(result);
   result = result.replace(/\*([^*]+)\*/g, '<em>$1</em>');
   result = result.replace(/~([^~]+)~/g, '<sub>$1</sub>');
@@ -85,17 +142,10 @@ export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | Ren
   return result;
 }
 
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-}
-
 export function cleanContent(text: string): string {
   if (!text) return '';
   let result = text
-    .replace(/<[^>]+>/g, '') // strip pre-rendered HTML/MathML
+    .replace(/<[^>]+>/g, '')
     .replace(/\*([^*]+)\*/g, '$1')
     .replace(/~([^~]+)~/g, '_$1')
     .replace(/\n[ \t]*\* /g, '; ')
@@ -103,6 +153,8 @@ export function cleanContent(text: string): string {
     .replace(/<<(fig_[^>]+)>>/g, '$1')
     .replace(/\{\{urn:[^,}]+,([^,}]+)(?:,[^}]+)?\}\}/g, '$1')
     .replace(/\{urn:[^,}]+,([^,}]+)(?:,[^}]+)?\}/g, '$1')
-    .replace(/\{\{([^,}]+)(?:,\s*[^}]+)?\}\}/g, '$1');
+    .replace(/\{\{([^,}]+)(?:,\s*[^}]+)?\}\}/g, '$1')
+    .replace(/(?:\*?)stem:\[([^\]]*)\]/g, '$1')
+    .replace(/(?:\*?)latexmath:\[([^\]]*)\]/g, '$1');
   return result;
 }

package/src/utils/plurimath.ts

@@ -0,0 +1,46 @@
+type PlurimathCtor = new (data: string, format: string) => {
+  toAsciimath(): string;
+  toLatex(): string;
+  toMathml(): string;
+  toHtml(): string;
+  toOmml(): string;
+  toDisplay(lang: string): string;
+};
+
+let Plurimath: PlurimathCtor | null = null;
+let loading: Promise<PlurimathCtor> | null = null;
+
+export async function loadPlurimath(): Promise<PlurimathCtor> {
+  if (Plurimath) return Plurimath;
+  if (loading) return loading;
+  loading = import('@plurimath/plurimath').then(m => {
+    Plurimath = m.default as PlurimathCtor;
+    return Plurimath;
+  });
+  return loading;
+}
+
+export function renderToMathML(expr: string, format: string): string | null {
+  if (!Plurimath) return null;
+  try {
+    const p = new Plurimath(expr, format);
+    return p.toMathml().replace('display="block"', 'display="inline"').trim();
+  } catch {
+    return null;
+  }
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+export function mathToHtml(expr: string, format: string, bold: boolean): string {
+  const mathml = renderToMathML(expr, format);
+  if (mathml) {
+    return `<span class="math-inline${bold ? ' math-bold' : ''}">${mathml}</span>`;
+  }
+  return `<code class="math-fallback">${escapeHtml(expr)}</code>`;
+}

package/src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useRouter } from 'vue-router';
 import { useDsStyle } from '../utils/dataset-style';
@@ -8,20 +8,9 @@ import { useSiteConfig } from '../config/use-site-config';
 const store = useVocabularyStore();
 const router = useRouter();
 const { getStyle } = useDsStyle();
-const { config: siteConfig, loadConfig } = useSiteConfig();
+const { config: siteConfig } = useSiteConfig();
 const exploring = ref(false);
 
-onMounted(async () => {
-  await loadConfig();
-  if (siteConfig.value?.defaultDataset) {
-    const targetId = siteConfig.value.defaultDataset;
-    if (!store.initialized) await store.discoverDatasets();
-    if (store.datasets.has(targetId)) {
-      router.replace({ name: 'dataset', params: { registerId: targetId } });
-    }
-  }
-});
-
 async function exploreRandom() {
   exploring.value = true;
   try {
@@ -115,58 +104,88 @@ function goToGraph() { router.push({ name: 'graph' }); }
       </div>
     </div>
 
-    <!-- Dataset cards -->
-    <div class="flex items-center justify-between mb-5">
-      <div class="section-label mb-0">Available Datasets</div>
-      <span class="text-xs text-ink-300">Click to browse</span>
-    </div>
-    <div :class="[
-      filteredDatasets.length === 1 ? 'max-w-md' : '',
-      filteredDatasets.length === 2 ? 'max-w-3xl' : '',
-      'grid gap-4',
-      filteredDatasets.length === 1 ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
-    ]">
+    <!-- Dataset section -->
+    <template v-if="filteredDatasets.length === 1">
       <button
-        v-for="(ds, idx) in filteredDatasets"
-        :key="ds.id"
-        @click="goToDataset(ds.id)"
-        class="card-hover p-6 text-left group animate-entrance"
-        :style="{ borderLeft: `3px solid ${getStyle(ds.id).color}`, animationDelay: `${idx * 60}ms` }"
+        @click="goToDataset(filteredDatasets[0].id)"
+        class="card-hover p-8 text-left group animate-entrance max-w-md"
+        :style="{ borderLeft: `3px solid ${getStyle(filteredDatasets[0].id).color}` }"
       >
-        <div class="flex items-start gap-3 mb-4">
-          <span class="w-2.5 h-2.5 rounded-full mt-1.5 flex-shrink-0" :style="{ backgroundColor: getStyle(ds.id).color }"></span>
-          <div class="min-w-0">
-            <h2 class="font-serif text-xl text-ink-800 leading-snug group-hover:text-ink-900 transition-colors">
-              {{ ds.manifest.title }}
-            </h2>
-          </div>
+        <div class="flex items-center gap-3 mb-3">
+          <span class="w-3 h-3 rounded-full flex-shrink-0" :style="{ backgroundColor: getStyle(filteredDatasets[0].id).color }"></span>
+          <h2 class="font-serif text-xl text-ink-800 group-hover:text-ink-900 transition-colors">
+            {{ filteredDatasets[0].manifest.title }}
+          </h2>
         </div>
-
-        <p class="text-sm text-ink-400 mb-5 line-clamp-2 leading-relaxed pl-[22px]">
-          {{ ds.manifest.description }}
+        <p v-if="filteredDatasets[0].manifest.description" class="text-sm text-ink-400 mb-4 line-clamp-2 leading-relaxed pl-6">
+          {{ filteredDatasets[0].manifest.description }}
         </p>
-
-        <div class="flex items-center gap-3 pl-[22px] mb-3">
-          <span :style="{ color: getStyle(ds.id).color }" class="text-sm font-semibold tabular-nums">{{ ds.manifest.conceptCount.toLocaleString() }}</span>
+        <div class="flex items-center gap-3 pl-6 mb-4">
+          <span :style="{ color: getStyle(filteredDatasets[0].id).color }" class="text-sm font-semibold tabular-nums">{{ filteredDatasets[0].manifest.conceptCount.toLocaleString() }}</span>
           <span class="text-xs text-ink-300">concepts</span>
           <span class="text-ink-200 text-xs">&middot;</span>
-          <span class="text-sm text-ink-500 tabular-nums">{{ ds.manifest.languages.length }}</span>
+          <span class="text-sm text-ink-500 tabular-nums">{{ filteredDatasets[0].manifest.languages.length }}</span>
           <span class="text-xs text-ink-300">languages</span>
         </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 }">
-            {{ tag }}
+        <div class="pl-6">
+          <span class="btn-primary inline-flex items-center gap-2">
+            Browse concepts
+            <svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
           </span>
         </div>
-
-        <div class="flex items-center justify-between pl-[22px]">
-          <span class="text-[11px] text-ink-300">{{ ds.manifest.owner }}</span>
-          <svg class="w-4 h-4 text-ink-200 group-hover:text-ink-400 group-hover:translate-x-0.5 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-          </svg>
-        </div>
       </button>
-    </div>
+    </template>
+    <template v-else-if="filteredDatasets.length > 1">
+      <div class="flex items-center justify-between mb-5">
+        <div class="section-label mb-0">Available Datasets</div>
+        <span class="text-xs text-ink-300">Click to browse</span>
+      </div>
+      <div :class="[
+        filteredDatasets.length === 2 ? 'max-w-3xl' : '',
+        'grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+      ]">
+        <button
+          v-for="(ds, idx) in filteredDatasets"
+          :key="ds.id"
+          @click="goToDataset(ds.id)"
+          class="card-hover p-6 text-left group animate-entrance"
+          :style="{ borderLeft: `3px solid ${getStyle(ds.id).color}`, animationDelay: `${idx * 60}ms` }"
+        >
+          <div class="flex items-start gap-3 mb-4">
+            <span class="w-2.5 h-2.5 rounded-full mt-1.5 flex-shrink-0" :style="{ backgroundColor: getStyle(ds.id).color }"></span>
+            <div class="min-w-0">
+              <h2 class="font-serif text-xl text-ink-800 leading-snug group-hover:text-ink-900 transition-colors">
+                {{ ds.manifest.title }}
+              </h2>
+            </div>
+          </div>
+
+          <p class="text-sm text-ink-400 mb-5 line-clamp-2 leading-relaxed pl-[22px]">
+            {{ ds.manifest.description }}
+          </p>
+
+          <div class="flex items-center gap-3 pl-[22px] mb-3">
+            <span :style="{ color: getStyle(ds.id).color }" class="text-sm font-semibold tabular-nums">{{ ds.manifest.conceptCount.toLocaleString() }}</span>
+            <span class="text-xs text-ink-300">concepts</span>
+            <span class="text-ink-200 text-xs">&middot;</span>
+            <span class="text-sm text-ink-500 tabular-nums">{{ ds.manifest.languages.length }}</span>
+            <span class="text-xs text-ink-300">languages</span>
+          </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 }">
+              {{ tag }}
+            </span>
+          </div>
+
+          <div class="flex items-center justify-between pl-[22px]">
+            <span class="text-[11px] text-ink-300">{{ ds.manifest.owner }}</span>
+            <svg class="w-4 h-4 text-ink-200 group-hover:text-ink-400 group-hover:translate-x-0.5 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          </div>
+        </button>
+      </div>
+    </template>
   </div>
 </template>

package/scripts/math-prerender.mjs

@@ -1,80 +0,0 @@
-import Plurimath from '@plurimath/plurimath';
-
-function renderToMathML(math, format) {
-  try {
-    const p = new Plurimath(math, format);
-    return p.toMathml().replace('display="block"', 'display="inline"').trim();
-  } catch {
-    return null;
-  }
-}
-
-function escapeHtml(text) {
-  return text
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-}
-
-function replaceBracketed(text, prefix, render) {
-  let result = '';
-  let i = 0;
-  const boldPrefix = '*' + prefix;
-  while (i < text.length) {
-    if (text.startsWith(boldPrefix + '[', i)) {
-      i += boldPrefix.length + 1;
-      let j = i;
-      let d = 1;
-      while (j < text.length && d > 0) {
-        if (text[j] === '[') d++;
-        else if (text[j] === ']') d--;
-        j++;
-      }
-      const content = text.slice(i, j - 1);
-      let end = j;
-      if (end < text.length && text[end] === '*') end++;
-      result += render(content, true);
-      i = end;
-    } else if (text.startsWith(prefix + '[', i)) {
-      i += prefix.length + 1;
-      let j = i;
-      let d = 1;
-      while (j < text.length && d > 0) {
-        if (text[j] === '[') d++;
-        else if (text[j] === ']') d--;
-        j++;
-      }
-      const content = text.slice(i, j - 1);
-      result += render(content, false);
-      i = j;
-    } else {
-      result += text[i];
-      i++;
-    }
-  }
-  return result;
-}
-
-function renderStem(math, bold) {
-  const mathml = renderToMathML(math, 'asciimath');
-  if (mathml) {
-    return `<span class="math-inline${bold ? ' math-bold' : ''}">${mathml}</span>`;
-  }
-  return `<code class="math-fallback">${escapeHtml(math)}</code>`;
-}
-
-function renderLatexmath(math, bold) {
-  const mathml = renderToMathML(math, 'latex');
-  if (mathml) {
-    return `<span class="math-inline${bold ? ' math-bold' : ''}">${mathml}</span>`;
-  }
-  return `<code class="math-fallback">${escapeHtml(math)}</code>`;
-}
-
-export function preRenderMath(text) {
-  if (!text) return '';
-  let result = text;
-  result = replaceBracketed(result, 'stem:', renderStem);
-  result = replaceBracketed(result, 'latexmath:', renderLatexmath);
-  return result;
-}