wiki-formant 0.82.0 → 0.83.1

package/README.md

@@ -698,7 +698,7 @@ const off = onTweetResize((h, source) => sizeTweetEmbed(el, h, source));
 
 `addCopyButton` was **byte-identical** in two BlockRenderers, down to the SVG path data. Its idempotence guard now lives inside the function rather than in a `pre:not(:has(…))` at the call site, where it can be — and was — retyped.
 
-In React, `useArticlePasses(ref, [blocks])` (`wiki-formant/react`) runs them all, the embed pair included. Three renderers had the effect written out and disagreed on its dependencies: two ran once on mount, so a page swapped in without a remount kept its old tables unsortable.
+In React, `useArticlePasses(ref, [blocks])` (`wiki-formant/react`) runs them all, the embed pair included, and typesets maths: `renderMath` (also `wiki-formant/react`, since its stylesheet import cannot sit in a module server code reaches) sets `$$…$$` and `\[…\]` as a display and `\(…\)` inline. KaTeX is an optional peer: an app installs `katex`, and a page with no delimiter never fetches it. There is no single-`$` delimiter, since prose writes $XRD. Three renderers had the effect written out and disagreed on its dependencies: two ran once on mount, so a page swapped in without a remount kept its old tables unsortable.
 
 `activateTabGroups` turns stored `[data-tabs]` markup into a working tab group. The editor persists tabs as nested divs, which is the right thing to store — it survives a markdown twin, a plain HTML render and a reader with JavaScript off, all of which show every tab in order. Making one of them pressable is a reader-side job, and it sits beside the other passes rather than inside a component.
 

package/dist/base.css

@@ -200,7 +200,6 @@ html[data-sidebar='closed'] .wiki-sidebar { width: 0; }
 .tabs-editor .tab-button { display: inline-flex; align-items: center; padding: 0.15em 0.3em; border-bottom: 0; border-radius: 0.3rem; }
 .tabs-editor .tab-button.active { background: color-mix(in srgb, currentColor 10%, transparent); }
 .tab-title { width: 7em; outline: none; }
-.tab-remove, .tab-add { opacity: 0.7; }
 .tabs-content { padding: 1rem; }
 .tabs-editor [data-tab-item] { display: none; }
 [data-tabs][data-active-tab='0'] .tabs-editor [data-tab-item]:nth-of-type(1),
@@ -212,6 +211,9 @@ html[data-sidebar='closed'] .wiki-sidebar { width: 0; }
 [data-tabs][data-active-tab='6'] .tabs-editor [data-tab-item]:nth-of-type(7),
 [data-tabs][data-active-tab='7'] .tabs-editor [data-tab-item]:nth-of-type(8) { display: block; }
 
+/* ---- maths (renderMath): a display wider than its column scrolls rather than spilling. */
+.katex-display { overflow-x: auto; overflow-y: hidden; }
+
 /* ---- one-line fields (WikiLine) --------------------------------------------- */
 [data-wiki-line] { outline: none; cursor: text; white-space: pre-wrap; }
 [data-wiki-line]:is(:empty, :has(> .ProseMirror-trailingBreak))::before { content: attr(data-placeholder); opacity: 0.6; }

package/dist/react.d.ts

@@ -477,10 +477,18 @@ export declare function RailShell({ children, prefix, label, className }: RailSh
  */
 export declare function isRailLinkActive(activePath: string, href: string, tree?: boolean): boolean;
 export type { WikiLinkComponent, WikiLinkProps } from './react-server.js';
+/**
+ * Typeset the maths under `root` with KaTeX: `$$…$$` and `\[…\]` as a display,
+ * `\(…\)` inline. KaTeX and its stylesheet load only when the text holds a
+ * delimiter, so a page with no maths fetches nothing. KaTeX is an optional peer
+ * the app installs. Typeset maths carries no delimiter, so a second pass finds
+ * nothing to do.
+ */
+export declare function renderMath(root: HTMLElement): Promise<void>;
 /**
  * The `wiki-formant/dom` passes over a rendered article: tab groups, copy
- * buttons, sortable tables, and each post on X hydrated and kept at the height
- * it posts. All three renderers ran the same passes in an effect, and they
+ * buttons, sortable tables, maths typeset, and each post on X hydrated and kept
+ * at the height it posts. All three renderers ran the same passes in an effect, and they
  * disagreed on when: two ran it once on mount, so a page swapped in without a
  * remount kept its old tables unsortable. Each pass is idempotent, so running
  * on every `deps` change is safe.

package/dist/react.js

@@ -880,11 +880,37 @@ const decodePath = (path) => {
         return path;
     }
 };
+// ---- maths ------------------------------------------------------------------
+// Here rather than in `dom.ts` because of its stylesheet import: `dom.ts` is
+// reached from server modules (`headings.ts`), and a bundler cannot chunk a
+// CSS import from plain server code. This module is a client one.
+/** What marks maths in stored prose. No single `$`: prose writes $XRD, and two cashtags in one block would read as a formula. */
+const MATH = /\$\$|\\\(|\\\[/;
+/**
+ * Typeset the maths under `root` with KaTeX: `$$…$$` and `\[…\]` as a display,
+ * `\(…\)` inline. KaTeX and its stylesheet load only when the text holds a
+ * delimiter, so a page with no maths fetches nothing. KaTeX is an optional peer
+ * the app installs. Typeset maths carries no delimiter, so a second pass finds
+ * nothing to do.
+ */
+export async function renderMath(root) {
+    if (!MATH.test(root.textContent ?? ''))
+        return;
+    const [{ default: render }] = await Promise.all([import('katex/contrib/auto-render'), import('katex/dist/katex.min.css')]);
+    render(root, {
+        delimiters: [
+            { left: '$$', right: '$$', display: true },
+            { left: '\\(', right: '\\)', display: false },
+            { left: '\\[', right: '\\]', display: true },
+        ],
+        throwOnError: false,
+    });
+}
 // ---- rendered-article passes --------------------------------------------------
 /**
  * The `wiki-formant/dom` passes over a rendered article: tab groups, copy
- * buttons, sortable tables, and each post on X hydrated and kept at the height
- * it posts. All three renderers ran the same passes in an effect, and they
+ * buttons, sortable tables, maths typeset, and each post on X hydrated and kept
+ * at the height it posts. All three renderers ran the same passes in an effect, and they
  * disagreed on when: two ran it once on mount, so a page swapped in without a
  * remount kept its old tables unsortable. Each pass is idempotent, so running
  * on every `deps` change is safe.
@@ -897,6 +923,7 @@ export function useArticlePasses(ref, deps) {
         activateTabGroups(root);
         addCopyButtons(root);
         sortTables(root);
+        void renderMath(root);
         hydrateTweetEmbeds(root);
         return onTweetResize((height, source) => sizeTweetEmbed(root, height, source));
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.82.0",
+  "version": "0.83.1",
   "description": "The portable half of a wiki: derived taxonomy and facet controls, a version-negotiating MCP transport, markdown twins, block rendering, a rich-text editor engine, conditional-GET plumbing, and the headers and CSP every origin sends.",
   "type": "module",
   "license": "MIT",
@@ -328,12 +328,14 @@
   "devDependencies": {
     "@electric-sql/pglite": "^0.3.9",
     "@radixdlt/rola": "^2.1.0",
+    "@types/katex": "^0.16.8",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/sanitize-html": "^2.16.1",
     "@vercel/blob": "^2.8.2",
     "jose": "^6.2.12",
     "jsdom": "^30.1.0",
+    "katex": "^0.16.47",
     "react": "^19.2.4",
     "sharp": "^0.35.5",
     "typescript": "^5.9.0"
@@ -344,7 +346,8 @@
     "jose": ">=6",
     "pg": ">=8",
     "react": ">=18",
-    "sharp": ">=0.33"
+    "sharp": ">=0.33",
+    "katex": "^0.16.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -364,6 +367,9 @@
     },
     "@vercel/blob": {
       "optional": true
+    },
+    "katex": {
+      "optional": true
     }
   }
 }