wiki-formant 0.82.0 → 0.83.0

package/README.md

@@ -693,12 +693,13 @@ export const X = xAccount({ siteName: 'AcuiQ', handle: '@acu_iq', posts: "a name
 addCopyButtons(el);            // every <pre> gets one, once
 sortTables(el);                // every column-headed table sorts by its headers
 hydrateTweetEmbeds(el);        // placeholders get a live src
+await renderMath(el);          // $$…$$, \\[…\\] and \\(…\\) typeset by KaTeX, loaded only when there is maths
 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 and the maths included. 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/dom.d.ts

@@ -40,6 +40,14 @@ export declare function onTweetResize(resize: (height: number, source: MessageEv
 export declare function hydrateTweetEmbeds(root: ParentNode): void;
 /** Apply a posted height to the embed iframe under `root` that posted it, and to no other. */
 export declare function sizeTweetEmbed(root: ParentNode, height: number, source: MessageEventSource | null): void;
+/**
+ * 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>;
 export interface TabGroupClassNames {
     list?: string;
     panels?: string;

package/dist/dom.js

@@ -113,6 +113,29 @@ export function sizeTweetEmbed(root, height, source) {
             iframe.style.height = `${height}px`;
     }
 }
+// ---- maths ------------------------------------------------------------------
+/** 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,
+    });
+}
 /**
  * Turn stored `[data-tabs]` markup into a working tab group.
  *

package/dist/react.d.ts

@@ -479,8 +479,8 @@ export declare function isRailLinkActive(activePath: string, href: string, tree?
 export type { WikiLinkComponent, WikiLinkProps } from './react-server.js';
 /**
  * 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

@@ -26,7 +26,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //      state on <html> before first paint. The hook keeps that attribute in
 //      sync afterwards, so CSS has one source of truth either side of hydration.
 import { railBreakpointMismatch, readRailFloating, resolveSidebarOpen, SIDEBAR_ATTRIBUTE, } from './sidebar.js';
-import { activateTabGroups, addCopyButtons, hydrateTweetEmbeds, onTweetResize, sizeTweetEmbed, sortTables, startBeacon } from './dom.js';
+import { activateTabGroups, addCopyButtons, hydrateTweetEmbeds, onTweetResize, renderMath, sizeTweetEmbed, sortTables, startBeacon } from './dom.js';
 import { comboboxAria } from './combobox.js';
 import { Component, createContext, createElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
 const readStored = (key) => {
@@ -883,8 +883,8 @@ const decodePath = (path) => {
 // ---- 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 +897,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.0",
   "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
     }
   }
 }