@glossarist/concept-browser 0.2.12 → 0.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {
@@ -19,12 +19,12 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@plurimath/plurimath": "^0.2.2",
     "@vitejs/plugin-vue": "^5.2.3",
     "autoprefixer": "^10.4.21",
     "d3": "^7.9.0",
     "glossarist": "^0.2.0",
     "js-yaml": "^4.1.0",
+    "katex": "^0.16.45",
     "pinia": "^2.3.1",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.17",

package/src/__tests__/math.test.ts

@@ -1,22 +1,4 @@
-import { describe, it, expect, vi } from 'vitest';
-
-// Mock @plurimath/plurimath for test environment
-vi.mock('@plurimath/plurimath', () => {
-  return {
-    default: class MockPlurimath {
-      private data: string;
-      private format: string;
-      constructor(data: string, format: string) {
-        this.data = data;
-        this.format = format;
-      }
-      toMathml() {
-        return `<math xmlns="http://www.w3.org/1998/Math/MathML"><mi>${this.data}</mi></math>`;
-      }
-    },
-  };
-});
-
+import { describe, it, expect } from 'vitest';
 import { renderMath, cleanContent } from '../utils/math';
 
 describe('renderMath', () => {
@@ -24,10 +6,10 @@ describe('renderMath', () => {
     expect(renderMath('hello world')).toBe('hello world');
   });
 
-  it('renders stem:[x^2] to MathML span', () => {
+  it('renders stem:[x^2] to KaTeX span', () => {
     const result = renderMath('the value stem:[x^2]');
     expect(result).toContain('math-inline');
-    expect(result).toContain('<math');
+    expect(result).toContain('katex');
     expect(result).not.toContain('math-bold');
   });
 
@@ -40,8 +22,7 @@ describe('renderMath', () => {
   it('renders latexmath:[...] with nested brackets', () => {
     const result = renderMath('coords latexmath:[[u_0, u_1] \\leq 1.0] here');
     expect(result).toContain('math-inline');
-    expect(result).toContain('<math');
-    expect(result).toContain('u_0');
+    expect(result).toContain('katex');
     expect(result).not.toContain('latexmath:');
   });
 

package/src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import App from './App.vue';
 import router from './router';
+import 'katex/dist/katex.min.css';
 import './style.css';
 
 const app = createApp(App);

package/src/style.css

@@ -158,16 +158,13 @@
     font-family: var(--font-body);
   }
 
-  /* Math (Plurimath MathML output) */
-  .math-inline {
-    display: inline;
-  }
-  .math-inline math {
+  /* Math */
+  .math-inline .katex {
     font-size: 1.05em;
   }
-  .math-bold math mi,
-  .math-bold math mn,
-  .math-bold math mo {
+  .math-bold .katex .mord,
+  .math-bold .katex .mbin,
+  .math-bold .katex .mrel {
     font-weight: bold;
   }
   .math-fallback {

package/src/utils/math.ts

@@ -1,16 +1,4 @@
-import Plurimath from '@plurimath/plurimath';
-
-type MathFormat = 'asciimath' | 'latex' | 'mathml' | 'html' | 'mahtml' | 'omml';
-
-function renderMathSpan(math: string, format: MathFormat, bold: boolean): string {
-  try {
-    const p = new Plurimath(math, format);
-    const mathml = p.toMathml();
-    return `<span class="math-inline${bold ? ' math-bold' : ''}">${mathml}</span>`;
-  } catch {
-    return `<code class="math-fallback">${escapeHtml(math)}</code>`;
-  }
-}
+import katex from 'katex';
 
 export type XrefResolver = (uri: string, term: string) => string;
 export type BibResolver = (refId: string, title: string) => string;
@@ -22,12 +10,7 @@ export interface RenderOptions {
   figResolver?: FigResolver;
 }
 
-/**
- * Convert `* item` lines into <ul><li> blocks.
- * Also handles `1)` and `1.` numbered items into ordered lists.
- */
 function convertLists(text: string): string {
-  // Unordered: * item (separated by \n or \n\n)
   let result = text.replace(/(?:^|\n)((?:[ \t]*\* [^\n]+)(?:\n[ \t]*\* [^\n]+)*)/g, (_, block) => {
     if (/^\*stem:\[/.test(block.trimStart())) return _;
     const items: string[] = [];
@@ -41,7 +24,6 @@ function convertLists(text: string): string {
     return `\n<ul class="concept-list">${lis}</ul>`;
   });
 
-  // Ordered: 1) item or 1. item (numbered items)
   result = result.replace(/(?:^|\n)((?:[ \t]*\d+[).][ \t]+[^\n]+)(?:\n[ \t]*\d+[).][ \t]+[^\n]+)*)/g, (_, block) => {
     const items: string[] = [];
     const re = /[ \t]*\d+[).][ \t]+([^\n]+)/g;
@@ -57,10 +39,6 @@ function convertLists(text: string): string {
   return result;
 }
 
-/**
- * Replace `prefix:[content]` where content may contain nested brackets.
- * Handles `*prefix:[content]*` (bold) too.
- */
 function replaceBracketed(
   text: string,
   prefix: string,
@@ -70,11 +48,8 @@ function replaceBracketed(
   let i = 0;
   const boldPrefix = '*' + prefix;
   while (i < text.length) {
-    // Check for bold variant: *prefix:[...]
     if (text.startsWith(boldPrefix + '[', i)) {
-      const start = i;
-      i += boldPrefix.length + 1; // skip *prefix:[
-      const depth = 1;
+      i += boldPrefix.length + 1;
       let j = i;
       let d = 1;
       while (j < text.length && d > 0) {
@@ -83,13 +58,11 @@ function replaceBracketed(
         j++;
       }
       const content = text.slice(i, j - 1);
-      // Check for closing *
       let end = j;
       if (end < text.length && text[end] === '*') end++;
       result += render(content, true);
       i = end;
     }
-    // Check for normal variant: prefix:[...]
     else if (text.startsWith(prefix + '[', i)) {
       i += prefix.length + 1;
       let j = i;
@@ -110,10 +83,6 @@ function replaceBracketed(
   return result;
 }
 
-/**
- * Render stem:[...] math notation to KaTeX HTML.
- * Also handles cross-reference inline patterns (URN refs, bibliography, figures).
- */
 export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | RenderOptions): string {
   if (!text) return '';
   let result = text;
@@ -122,15 +91,14 @@ export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | Ren
     ? { xrefResolver: xrefResolverOrOpts }
     : (xrefResolverOrOpts ?? {});
 
-  result = replaceBracketed(result, 'stem:', (math, bold) => renderMathSpan(math, 'asciimath', bold));
-  result = replaceBracketed(result, 'latexmath:', (math, bold) => renderMathSpan(math, 'latex', bold));
+  result = replaceBracketed(result, 'stem:', renderKatexSpan);
+  result = replaceBracketed(result, 'latexmath:', renderKatexSpan);
 
   result = convertLists(result);
 
   result = result.replace(/\*([^*]+)\*/g, '<em>$1</em>');
   result = result.replace(/~([^~]+)~/g, '<sub>$1</sub>');
 
-  // Handle AsciiDoc bibliography xrefs: <<ref_XX,title>>
   result = result.replace(/<<([^,>]+),([^>]+)>>/g, (_, refId, title) => {
     if (opts.bibResolver) {
       return opts.bibResolver(refId.trim(), title.trim());
@@ -138,7 +106,6 @@ export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | Ren
     return `<span class="bib-ref">${escapeHtml(title.trim())}</span>`;
   });
 
-  // Handle AsciiDoc figure xrefs: <<fig_XX>>
   result = result.replace(/<<(fig_[^>]+)>>/g, (_, figId) => {
     if (opts.figResolver) {
       return opts.figResolver(figId.trim());
@@ -146,30 +113,40 @@ export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | Ren
     return `<span class="fig-ref">${escapeHtml(figId.trim())}</span>`;
   });
 
-  // Handle URN inline refs: {{urn:...,term[,displayText]}} (double-braced)
   result = result.replace(/\{\{(urn:[^,}]+),([^,}]+)(?:,([^}]+))?\}\}/g, (_, uri, term, display) => {
-    const text = (display || term).trim();
+    const t = (display || term).trim();
     if (opts.xrefResolver) {
-      return opts.xrefResolver(uri, text);
+      return opts.xrefResolver(uri, t);
     }
-    return text;
+    return t;
   });
 
-  // Handle URN inline refs: {urn:...,term[,displayText]} (single-braced)
   result = result.replace(/\{(urn:[^,}]+),([^,}]+)(?:,([^}]+))?\}/g, (_, uri, term, display) => {
-    const text = (display || term).trim();
+    const t = (display || term).trim();
     if (opts.xrefResolver) {
-      return opts.xrefResolver(uri, text);
+      return opts.xrefResolver(uri, t);
     }
-    return text;
+    return t;
   });
 
-  // Handle any remaining {{...}} refs (fallback: show term before comma)
   result = result.replace(/\{\{([^,}]+)(?:,\s*[^}]+)?\}\}/g, '$1');
 
   return result;
 }
 
+function renderKatexSpan(math: string, bold: boolean): string {
+  try {
+    const html = katex.renderToString(math, {
+      throwOnError: false,
+      displayMode: false,
+      output: 'html',
+    });
+    return `<span class="math-inline${bold ? ' math-bold' : ''}">${html}</span>`;
+  } catch {
+    return `<code class="math-fallback">${escapeHtml(math)}</code>`;
+  }
+}
+
 function escapeHtml(text: string): string {
   return text
     .replace(/&/g, '&amp;')
@@ -177,9 +154,6 @@ function escapeHtml(text: string): string {
     .replace(/>/g, '&gt;');
 }
 
-/**
- * Clean content for plain text display (no math rendering).
- */
 export function cleanContent(text: string): string {
   if (!text) return '';
   let result = text

package/vite.config.ts

@@ -20,9 +20,6 @@ export default defineConfig({
       '@': resolve(__dirname, 'src'),
     },
   },
-  optimizeDeps: {
-    include: ['@plurimath/plurimath'],
-  },
   test: {
     environment: 'happy-dom',
     globals: true,