@mathzetta/inlinemath 0.0.0-stage → 0.1.0

package/inlinemath.css

@@ -0,0 +1,127 @@
+/*
+ * Inline Math stylesheet. Everything is under .mv; colours are left to the page.
+ *
+ * The numbers marked "metric" must match the constants at the top of
+ * src/layout.js (line-height 1, bar 0.06em, gap 0.1em); everything else can
+ * be changed freely.
+ *
+ * Handy hooks:
+ *   .mv-n[data-node="4"]       one node (ids from MathZetta)
+ *   .mv-var .mv-num .mv-word   variables, numbers, function names
+ *   .mv-op-frac .mv-op-pow …   a kind of operation
+ *   .mv-hl                     the class highlight() adds
+ *   --mv-hl                    highlight colour
+ */
+
+.mv {
+    display: inline-block;
+    font-family: "Inline Math Roman", "Latin Modern Roman", "STIX Two Text", "Cambria", "Times New Roman", serif;
+    font-size: 1.2em;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;            /* metric */
+    white-space: nowrap;
+    text-indent: 0;
+    text-align: left;
+    letter-spacing: 0;
+}
+.mv-display { display: block; text-align: center; margin: 0.6em 0; }
+.mv span, .mv svg { line-height: 1; }
+.mv-n { display: inline-block; border-radius: 0.12em; }
+
+/* ---- letters and signs -------------------------------------------------- */
+.mv-var { font-style: italic; padding-right: 0.03em; }
+.mv-num, .mv-word, .mv-name, .mv-ord, .mv-text, .mv-d { font-style: normal; }
+.mv-prime { margin-left: 0.04em; }
+.mv-bin { margin: 0 0.22em; }
+.mv-rel { margin: 0 0.28em; }
+.mv-punct { margin-right: 0.17em; }
+.mv-sign { margin-right: 0.04em; }
+.mv-times { display: inline-block; width: 0.06em; }
+.mv-callgap { display: inline-block; width: 0.05em; }
+.mv-fnspace { display: inline-block; width: 0.17em; }
+.mv-space { display: inline-block; width: 0.33em; }
+.mv-dx { display: inline-block; margin-left: 0.17em; }
+.mv-text { margin: 0 0.25em; }
+/* Tighter spacing in limits and exponents: n=1, x→0. */
+.mv-script .mv-rel, .mv-sup .mv-rel, .mv-sub .mv-rel { margin: 0 0.12em; }
+.mv-script .mv-bin, .mv-sup .mv-bin, .mv-sub .mv-bin { margin: 0 0.1em; }
+
+/* ---- fractions (metric: padding and border) ------------------------------ */
+.mv-frac { display: inline-flex; flex-direction: column; align-items: stretch; margin: 0 0.12em; }
+.mv-numer, .mv-denom { display: block; text-align: center; padding: 0 0.1em; }
+.mv-numer { padding-bottom: 0.1em; }
+.mv-denom { padding-top: 0.1em; border-top: 0.06em solid currentColor; }
+.mv-frac-nobar > .mv-denom { border-top: 0; }
+.mv-scaled { display: inline-block; }
+
+/* ---- scripts ----------------------------------------------------------------- */
+.mv-sup, .mv-sub { display: inline-block; margin-left: 0.04em; }
+.mv-subsup, .mv-limits { display: inline-flex; flex-direction: column; justify-content: space-between; align-items: flex-start; margin-left: 0.04em; }
+.mv-limits { margin-left: 0.02em; margin-right: 0.12em; }
+.mv-limits > .mv-lower { margin-left: -0.3em; }
+.mv-script { display: block; }
+.mv-under { display: inline-flex; flex-direction: column; align-items: center; margin-right: 0.15em; }
+.mv-under > .mv-script { margin-top: 0.05em; }
+.mv-bigop { display: inline-flex; flex-direction: column; align-items: center; margin: 0 0.12em; }
+.mv-bigop > .mv-script { display: block; margin: 0.08em 0; }
+.mv-bigop > svg { display: block; }
+
+/* ---- radicals (metric: border and padding-top) ----------------------------- */
+.mv-sqrt { display: inline-block; white-space: nowrap; }
+.mv-hook { display: inline-block; overflow: visible; margin-left: 0.05em; }
+.mv-radicand { display: inline-block; border-top: 0.06em solid currentColor; padding: 0.1em 0.1em 0 0.06em; }
+.mv-rootindex { display: inline-block; margin: 0 -0.32em 0 0.12em; }
+
+/* ---- delimiters: drawn at the full height of what they enclose -------------- */
+.mv-fence { display: inline-block; position: relative; }
+.mv-delim { position: absolute; top: 0; bottom: 0; height: 100%; }
+.mv-delim-l { left: 0.03em; }
+.mv-delim-r { right: 0.03em; }
+span.mv-delim { width: 0.16em; border: 0 solid currentColor; box-sizing: border-box; }
+.mv-delim.mv-lbrack { border-width: 0.06em 0 0.06em 0.06em; left: 0.06em; }
+.mv-delim.mv-rbrack { border-width: 0.06em 0.06em 0.06em 0; right: 0.06em; }
+.mv-delim.mv-vert { border-left-width: 0.06em; width: 0; left: 0.07em; }
+.mv-delim.mv-vert.mv-delim-r { left: auto; right: 0.07em; }
+.mv-delim.mv-lfloor { border-width: 0 0 0.06em 0.06em; }
+.mv-delim.mv-rfloor { border-width: 0 0.06em 0.06em 0; }
+.mv-delim.mv-lceil { border-width: 0.06em 0 0 0.06em; }
+.mv-delim.mv-rceil { border-width: 0.06em 0.06em 0 0; }
+
+/* ---- shapes ----------------------------------------------------------------- */
+.mv svg { overflow: visible; }
+.mv svg path[stroke] { stroke-width: 0.065em; stroke-linecap: round; stroke-linejoin: round; }
+.mv-intsign path[stroke] { stroke-width: 0.075em; }
+.mv-bigsign { display: inline-block; margin: 0 0.06em; }
+.mv-intsign { margin-right: 0.12em; }
+
+/* ---- piecewise ------------------------------------------------------------- */
+.mv-cases { display: inline-grid; grid-template-columns: auto auto; column-gap: 1em; row-gap: 0.25em; align-items: baseline; text-align: left; margin: 0 0.1em; }
+.mv-case-value, .mv-case-cond { display: block; }
+
+/* ---- decorations: \boxed \cancel \overline \vec … --------------------------- */
+.mv-boxed { display: inline-block; border: 0.06em solid currentColor; padding: 0.16em 0.2em; }
+.mv-over { display: inline-block; border-top: 0.06em solid currentColor; padding-top: 0.08em; }
+.mv-underline { display: inline-block; border-bottom: 0.06em solid currentColor; padding-bottom: 0.06em; }
+.mv-cancel { display: inline-block; background: linear-gradient(to top right, transparent calc(50% - 0.04em), currentColor calc(50% - 0.03em), currentColor calc(50% + 0.03em), transparent calc(50% + 0.04em)); }
+.mv-accent { display: inline-block; position: relative; padding-top: 0.3em; }
+.mv-accent-mark { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 0.7em; line-height: 0.6; }
+
+/* ---- interaction -------------------------------------------------------------- */
+.mv-hl { background: var(--mv-hl, rgba(255, 200, 0, 0.35)); box-shadow: 0 0 0 0.08em var(--mv-hl, rgba(255, 200, 0, 0.35)); }
+.mv-clickable .mv-n { cursor: pointer; }
+.mv-clickable .mv-n:hover { outline: 1px dashed rgba(0, 0, 0, 0.25); }
+
+/* ---- steps (stepsHTML from '@mathzetta/inlinemath/cas') ---------------------------------------- */
+.mv-steps { margin: 0; padding-left: 1.6em; }
+.mv-step { margin: 0.5em 0 0.9em; }
+.mv-step-name { display: block; font-size: 0.85em; font-weight: 600; color: #555; }
+.mv-step-maths { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.8em; margin: 0.15em 0; }
+.mv-step-arrow { color: #888; }
+.mv-step-why { margin: 0.1em 0 0; font-size: 0.9em; color: #444; }
+
+/* ---- Markdown with maths (markdownToHTML from '@mathzetta/inlinemath/markdown') ------------------- */
+.mv-md-math { display: inline-block; vertical-align: middle; }
+.mv-md-display { display: block; text-align: center; margin: 0.6em 0; overflow-x: auto; }
+.mv-md-block { margin: 0.8em 0; }
+.mv-md-error code { background: rgba(200, 60, 0, 0.08); color: #a33; border-bottom: 1px dotted #a33; }

package/package.json

@@ -1,6 +1,97 @@
 {
   "name": "@mathzetta/inlinemath",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Draw calculus-level maths as HTML and CSS from anything MathZetta reads, with every part addressable.",
+  "type": "module",
+  "main": "src/index.js",
+  "types": "src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    },
+    "./lite": {
+      "types": "./src/lite.d.ts",
+      "default": "./src/lite.js"
+    },
+    "./lite-calc": {
+      "types": "./src/lite-calc.d.ts",
+      "default": "./src/lite-calc.js"
+    },
+    "./cas": {
+      "types": "./src/cas.d.ts",
+      "default": "./src/cas.js"
+    },
+    "./markdown": {
+      "types": "./src/markdown.d.ts",
+      "default": "./src/markdown.js"
+    },
+    "./inlinemath.css": "./inlinemath.css",
+    "./fonts/fonts.css": "./fonts/fonts.css",
+    "./fonts/*": "./fonts/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src/",
+    "dist/",
+    "fonts/",
+    "inlinemath.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "node test/run.js",
+    "build": "node tools/build.mjs",
+    "prepublishOnly": "npm test && npm run build"
+  },
+  "peerDependencies": {
+    "@mathzetta/cas": "^0.1.0",
+    "mathzetta": "^1.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@mathzetta/cas": "^0.1.0",
+    "mathzetta": "^1.0.0",
+    "rollup": "^4.65.0"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "@mathzetta/cas": {
+      "optional": true
+    }
+  },
+  "homepage": "https://inlinemath.com",
+  "unpkg": "dist/inlinemath.global.min.js",
+  "jsdelivr": "dist/inlinemath.global.min.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "math",
+    "mathml",
+    "html",
+    "calculus",
+    "render",
+    "mathzetta",
+    "inline",
+    "markdown"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/triplelog/mathzetta.git",
+    "directory": "packages/inlinemath"
+  },
+  "author": {
+    "name": "Robert Wilcox",
+    "email": "rwilcox@mathzetta.com",
+    "url": "https://mathzetta.com"
+  },
+  "bugs": {
+    "url": "https://github.com/triplelog/mathzetta/issues",
+    "email": "rwilcox@mathzetta.com"
+  }
+}

package/src/calculator.js

@@ -0,0 +1,6 @@
+/**
+ * MathZetta's calculator. Loading 'mathzetta/calculate' is what makes `{{3+4}}` in an input draw as
+ * 7: it registers the calculator with the parser. The full Inline Math (index.js, markdown, cas)
+ * imports this; the lite build (lite.js) doesn't.
+ */
+export { calculateBlock, calculate } from 'mathzetta/calculate';

package/src/cas.d.ts

@@ -0,0 +1,3 @@
+// '@mathzetta/inlinemath/cas' — @mathzetta/cas in drawn maths (needs @mathzetta/cas). See types.d.ts.
+export type { CAS, CASStep } from './types.js';
+export { mathCAS, casBlocks, stepsHTML, tokensOf } from './types.js';

package/src/cas.js

@@ -0,0 +1,139 @@
+/**
+ * '@mathzetta/inlinemath/cas' — @mathzetta/cas in Inline Math: `{{…}}` blocks that simplify,
+ * solve, differentiate …, and step lists drawn as maths.
+ *
+ *   import { toHTML } from '@mathzetta/inlinemath';
+ *   import { casBlocks, stepsHTML, mathCAS } from '@mathzetta/inlinemath/cas';
+ *
+ *   toHTML('f′(x) = {{diff(x^3 sin x, x)}}', { blocks: casBlocks() })
+ *   toHTML('{{solve(x^2 - 5x + 6 = 0, x)}}', { blocks: casBlocks() })   // x = 2 or x = 3
+ *   stepsHTML(mathCAS().diff('x^2 sin x', 'x', { steps: 'brief' }).steps)
+ *
+ * Block functions: simplify, expand, factor, cancel, diff(f, x[, n]), integrate(f, x[, a, b]),
+ * solve(equation, x), approx(expr[, digits]); d/dx … and ∫ … without limits go to the CAS
+ * too. Everything else is MathZetta's calculator (calculateBlock), as without this.
+ *
+ * Needs @mathzetta/cas (a peer dependency, like mathzetta).
+ */
+
+import { createCAS, toText as plainText } from '@mathzetta/cas';
+import { parse as parsePostfix } from '@mathzetta/cas/engine';
+import { parse, operator } from './mathzetta.js';
+import { calculateBlock } from './calculator.js';
+// Only this entry needs MathZetta's text writer (so only pages using inlinemath/cas map 'mathzetta/text').
+import { toText } from 'mathzetta/text';
+import { toHTML } from './html.js';
+
+const shared = new Map();
+
+/** How the complex functions are written for MathZetta: Re z, Im z, z̄ (an overline), arg z. */
+const DRAWN = { re: 'Re', im: 'Im', conj: 'overline' };
+const COMPLEX_NAMES = ['Re', 'Im', 're', 'im', 'conj', 'arg'];
+
+/**
+ * A CAS node → MathZetta postfix tokens. Functions declared in a rule file
+ * (sinc) are MathZetta's user functions: x sinc → x 1 \:sinc.
+ */
+export function tokensOf(node) {
+  const out = [];
+  const visit = (n) => {
+    if (n.type !== 'op') { out.push(n.token); return; }
+    n.args.forEach(visit);
+    if (operator(n.op)) {
+      if (operator(n.op).arity === -1) out.push(String(n.args.length));
+      out.push(n.op);
+    } else out.push(String(n.args.length), `\\:${DRAWN[n.op] ?? n.op}`);
+  };
+  visit(node);
+  return out;
+}
+
+/**
+ * A CAS that reads and writes MathZetta text. Options go to @mathzetta/cas's createCAS
+ * (rules: your rule files; complex: true for i = √-1); `names` are functions of your
+ * own, so `sinc(x)` is read as sinc and not as s·i·n·c(x). With complex, Re, Im,
+ * conj and arg are read as functions too.
+ */
+export function mathCAS(options = {}) {
+  const key = options.rules || options.names ? null : options.complex ? 'complex' : 'default';
+  if (key && shared.has(key)) return shared.get(key);
+  const names = [...(options.names ?? []), ...(options.complex ? COMPLEX_NAMES : [])];
+  const cas = createCAS({
+    ...options,
+    read: (text) => parse(text, names.length ? { names } : {}),
+    // explanations read "3x^2", "sin(3x)"; a block's answer is MathZetta text, so it is read back exactly
+    format: plainText,
+  });
+  if (key) shared.set(key, cas);
+  return cas;
+}
+
+const CALLS = new Set(['simplify', 'expand', 'factor', 'cancel', 'diff', 'integrate', 'solve', 'approx']);
+
+/**
+ * A `{{…}}` handler: pass it as toHTML(input, { blocks: casBlocks() }).
+ * @param {object} [options] { cas } a CAS of your own (mathCAS({ rules })), { steps } kept on the handler's `last`
+ */
+export function casBlocks(options = {}) {
+  const cas = options.cas ?? mathCAS();
+  const handler = (text, scope) => {
+    let tokens;
+    try {
+      tokens = cas.read(text);
+    } catch {
+      return calculateBlock(text, scope);
+    }
+    const head = tokens[tokens.length - 1];
+    const name = head?.startsWith('\\:') ? head.slice(2) : null;
+    const symbolic = name && CALLS.has(name);
+    // d/dx …, ∫ … dx and ∫ from a to b … dx (MathZetta writes the limits as int's 3rd and 4th operands)
+    const calculus = head === 'der' || head === 'int';
+    if (!symbolic && !calculus) return calculateBlock(text, scope);
+    const node = cas.node(tokens);
+    const args = symbolic ? node.args : [node];
+    const word = (n) => (n ? n.s : undefined);
+    let r;
+    try {
+      switch (symbolic ? name : head === 'der' ? 'derivative' : 'antiderivative') {
+        case 'simplify': r = cas.simplify(args[0]); break;
+        case 'expand': r = cas.expand(args[0]); break;
+        case 'factor': r = cas.factor(args[0]); break;
+        case 'cancel': r = cas.cancel(args[0]); break;
+        case 'diff': r = cas.diff(args[0], word(args[1]), { order: args[2] ? Number(args[2].s) : 1 }); break;
+        case 'integrate': r = cas.integrate(args[0], word(args[1]), args[3] ? { from: args[2].s, to: args[3].s } : {}); break;
+        case 'solve': r = cas.solve(args[0], word(args[1])); break;
+        case 'approx': r = cas.approximate(args[0], { digits: args[1] ? Number(args[1].s) : 15 }); break;
+        case 'derivative': r = cas.diff(node.args[0], node.args[1].s); break;
+        default: r = cas.integrate(node); break;
+      }
+    } catch (error) {
+      // no answer: leave it as written, as calculateBlock does
+      return `(${text})`;
+    }
+    handler.last = r;
+    if (!r.result) return `"${r.text}"`;
+    const out = toText(tokensOf(r.result));
+    return /^-?\d+(\.\d+)?$/.test(out) ? out : `(${out})`;
+  };
+  return handler;
+}
+
+const escape = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+/**
+ * Steps (from any CAS call) as an ordered list: each step's expression before,
+ * with the part a rule rewrote highlighted, the expression after, and the
+ * explanation. Options go to toHTML for both drawings (size, colors …).
+ * @returns {string} <ol class="mv-steps">…</ol>
+ */
+export function stepsHTML(steps, options = {}) {
+  const items = steps.map((s) => {
+    const from = tokensOf(parsePostfix(s.from));
+    const before = toHTML(from, { ...options, highlight: s.path && s.path.length ? { path: s.path } : undefined });
+    const after = s.to === s.from ? '' : `<span class="mv-step-arrow" aria-label="becomes">⟶</span>${toHTML(tokensOf(parsePostfix(s.to)), options)}`;
+    const why = s.explanation ? `<p class="mv-step-why">${escape(s.explanation)}</p>` : '';
+    return `<li class="mv-step" data-rule="${escape(s.id)}"><span class="mv-step-name">${escape(s.name)}</span>`
+      + `<div class="mv-step-maths">${before}${after}</div>${why}</li>`;
+  });
+  return `<ol class="mv-steps">${items.join('')}</ol>`;
+}

package/src/draw.js

@@ -0,0 +1,72 @@
+/**
+ * Input → tree → HTML string, with no calculator: the drawing both builds share (html.js adds the
+ * calculator for the full build; lite.js uses this as it is). No DOM needed, so this runs in Node too.
+ */
+
+import { parseTree, fromPostfix } from './mathzetta.js';
+import { layout } from './layout.js';
+import { select, numberTree } from './select.js';
+
+/**
+ * Anything MathZetta reads → a tree with node ids. `{{...}}` blocks are filled by `options.blocks`
+ * (with `options.scope`), else by whatever handler MathZetta has (the calculator once
+ * 'mathzetta/calculate' is loaded), else drawn as a group.
+ * @param {string|string[]|object} input expression text, standard postfix, or a tree
+ * @param {object} [options] { blocks, scope }
+ */
+export function treeOf(input, options = {}) {
+    const { blocks } = options;
+    if (typeof input === 'string') return parseTree(input, blocks ? { blocks: (text) => blocks(text, options.scope) } : {});
+    if (Array.isArray(input)) return fromPostfix(input);
+    if (input && typeof input === 'object' && input.type) {
+        return input.id === undefined ? numberTree(structuredClone(input)) : input;
+    }
+    throw new Error('Inline Math needs an expression, standard postfix or a tree');
+}
+
+/**
+ * @param {string|string[]|object} input
+ * @param {object} [options] layout options (see DEFAULTS in layout.js) plus:
+ * @param {object|Array} [options.colors]    { 'x^2': 'red', 3: '#06c' } or [[target, colour], …]
+ * @param {*} [options.highlight]            target(s) to mark with the mv-hl class
+ * @param {object} [options.scope]           variable values for `{{...}}` blocks
+ * @returns {string}
+ */
+export function toHTML(input, options = {}) {
+    const tree = treeOf(input, options);
+    return layout(tree, layoutOptions(tree, options)).html;
+}
+
+/** Turn the friendly options (colors, highlight) into layout's attributes and style hooks. */
+export function layoutOptions(tree, options) {
+    const { colors, highlight, scope, blocks, ...rest } = options;
+    const styles = new Map();
+    for (const [target, colour] of pairs(colors)) {
+        if (!isColour(colour)) continue;   // one CSS colour value, nothing more: no `;`, no url(…)
+        for (const n of select(tree, target)) styles.set(n, `color:${colour}`);
+    }
+    const marked = new Set(highlight === undefined ? [] : select(tree, highlight));
+    if (!styles.size && !marked.size) return rest;
+    const prefix = rest.prefix || 'mv';
+    return {
+        ...rest,
+        style: (n) => [styles.get(n), rest.style && rest.style(n)].filter(Boolean).join(';'),
+        attributes: (n) => {
+            const extra = { ...(rest.attributes ? rest.attributes(n) : {}) };
+            if (marked.has(n)) extra.class = [extra.class, `${prefix}-hl`].filter(Boolean).join(' ');
+            return extra;
+        },
+    };
+}
+
+/** { 'x^2': 'red', 3: 'blue' } or [[target, colour]] → [[target, colour]]; numeric keys become ids. */
+/** A colour a style attribute can hold on its own: red, #06c, rgb(0 102 204 / 50%), var(--accent). */
+function isColour(value) {
+    return typeof value === 'string' && /^[#\w\s.,%()/+-]+$/.test(value) && !/url\s*\(|expression/i.test(value);
+}
+
+function pairs(colors) {
+    if (!colors) return [];
+    if (Array.isArray(colors)) return colors;
+    return Object.entries(colors).map(([k, v]) => [/^\d+$/.test(k) ? Number(k) : k, v]);
+}

package/src/glyphs.js

@@ -0,0 +1,38 @@
+/**
+ * Shapes drawn as inline SVG: parentheses, braces, the radical sign and the
+ * big operators. Each is drawn in a 0..1 box with preserveAspectRatio="none"
+ * and sized by CSS, so the same path serves every height.
+ *
+ * Filled shapes (parens, braces) keep their thickness because their width
+ * stays fixed while their height stretches. Stroked shapes (√, ∫) use
+ * non-scaling strokes so the line weight never changes with size.
+ *
+ * To restyle a shape, change its path here; nothing else depends on it.
+ */
+
+export const PATHS = {
+    // Crescents: outer curve down, inner curve back up.
+    '(': { fill: 'M0.92,0 C0.1,0.2 0.1,0.8 0.92,1 L1,0.975 C0.48,0.75 0.48,0.25 1,0.025 Z' },
+    ')': { fill: 'M0.08,0 C0.9,0.2 0.9,0.8 0.08,1 L0,0.975 C0.52,0.75 0.52,0.25 0,0.025 Z' },
+    '{': { fill: 'M1,0 C0.45,0 0.5,0.05 0.5,0.2 L0.5,0.38 C0.5,0.46 0.35,0.49 0.05,0.5 C0.35,0.51 0.5,0.54 0.5,0.62 L0.5,0.8 C0.5,0.95 0.45,1 1,1 L1,0.985 C0.68,0.985 0.64,0.95 0.64,0.8 L0.64,0.62 C0.64,0.53 0.55,0.505 0.3,0.5 C0.55,0.495 0.64,0.47 0.64,0.38 L0.64,0.2 C0.64,0.05 0.68,0.015 1,0.015 Z' },
+    '}': { fill: 'M0,0 C0.55,0 0.5,0.05 0.5,0.2 L0.5,0.38 C0.5,0.46 0.65,0.49 0.95,0.5 C0.65,0.51 0.5,0.54 0.5,0.62 L0.5,0.8 C0.5,0.95 0.55,1 0,1 L0,0.985 C0.32,0.985 0.36,0.95 0.36,0.8 L0.36,0.62 C0.36,0.53 0.45,0.505 0.7,0.5 C0.45,0.495 0.36,0.47 0.36,0.38 L0.36,0.2 C0.36,0.05 0.32,0.015 0,0.015 Z' },
+    // Radical: short tick, long down-stroke, long up-stroke to the top right.
+    'sqrt': { stroke: 'M0,0.62 L0.18,0.55 L0.45,0.97 L0.98,0.015' },
+    // Integral: an S slanted to the right with small hooks at each end.
+    'int': { stroke: 'M0.95,0.09 C0.9,0.01 0.72,0 0.66,0.12 C0.6,0.25 0.42,0.75 0.34,0.88 C0.28,0.99 0.1,0.99 0.05,0.91' },
+    'sum': { fill: 'M0.04,0 L0.94,0 L0.98,0.24 L0.94,0.24 C0.9,0.1 0.8,0.07 0.62,0.07 L0.24,0.07 L0.58,0.5 L0.2,0.93 L0.64,0.93 C0.82,0.93 0.92,0.9 0.95,0.76 L0.99,0.76 L0.94,1 L0.02,1 L0.47,0.47 Z' },
+    'prod': { fill: 'M0,0 L1,0 L1,0.04 L0.88,0.05 L0.88,0.95 L1,0.96 L1,1 L0.62,1 L0.62,0.96 L0.74,0.95 L0.74,0.06 L0.26,0.06 L0.26,0.95 L0.38,0.96 L0.38,1 L0,1 L0,0.96 L0.12,0.95 L0.12,0.05 L0,0.04 Z' },
+};
+
+/**
+ * An SVG element for a shape. `style` sizes and places it (width, height,
+ * vertical-align or absolute position).
+ */
+export function svg(name, cls, style = '') {
+    const shape = PATHS[name];
+    const path = shape.fill
+        ? `<path d="${shape.fill}" fill="currentColor"/>`
+        : `<path d="${shape.stroke}" fill="none" stroke="currentColor" vector-effect="non-scaling-stroke"/>`;
+    const attr = style ? ` style="${style}"` : '';
+    return `<svg class="${cls}" viewBox="0 0 1 1" preserveAspectRatio="none" aria-hidden="true"${attr}>${path}</svg>`;
+}

package/src/html.js

@@ -0,0 +1,32 @@
+/**
+ * Input → tree → HTML string. No DOM needed, so this runs in Node too. The full build: `{{...}}`
+ * blocks are calculated (draw.js is the same without the calculator).
+ */
+
+import { calculateBlock } from './calculator.js';
+import * as draw from './draw.js';
+
+export { layoutOptions } from './draw.js';
+
+/**
+ * Anything MathZetta reads → a tree with node ids. `{{...}}` blocks in text
+ * are calculated first: '3+4={{3+4}}' draws 3 + 4 = 7.
+ * @param {string|string[]|object} input expression text, standard postfix, or a tree
+ * @param {object} [options] { scope } variable values for `{{...}}` blocks;
+ *   { blocks } another handler for them (casBlocks() from '@mathzetta/inlinemath/cas' simplifies, solves …)
+ */
+export function treeOf(input, options = {}) {
+    return draw.treeOf(input, { ...options, blocks: options.blocks ?? calculateBlock });
+}
+
+/**
+ * @param {string|string[]|object} input
+ * @param {object} [options] layout options (see DEFAULTS in layout.js) plus:
+ * @param {object|Array} [options.colors]    { 'x^2': 'red', 3: '#06c' } or [[target, colour], …]
+ * @param {*} [options.highlight]            target(s) to mark with the mv-hl class
+ * @param {object} [options.scope]           variable values for `{{...}}` blocks
+ * @returns {string}
+ */
+export function toHTML(input, options = {}) {
+    return draw.toHTML(input, { ...options, blocks: options.blocks ?? calculateBlock });
+}

package/src/index.d.ts

@@ -0,0 +1,3 @@
+// '@mathzetta/inlinemath' — drawing, the live view, selection. See types.d.ts.
+export type { Input, Node, Target, LayoutOptions, DrawOptions, ClickInfo } from './types.js';
+export { toHTML, treeOf, layout, DEFAULTS, View, render, select, signature, nodeAt, pathOf, numberTree, PATHS } from './types.js';

package/src/index.js

@@ -0,0 +1,17 @@
+/**
+ * Inline Math — draws calculus-level maths as HTML and CSS, from anything
+ * MathZetta can read, with every part addressable.
+ *
+ *   import { toHTML, render } from '@mathzetta/inlinemath';
+ *
+ *   toHTML('\\int_0^1 x^2 dx')                 // a string, works in Node
+ *   const view = render(div, 'd/dx sin(x^2)')   // live: highlight, click, animate
+ *
+ * Needs inlinemath.css on the page (and optionally fonts/fonts.css).
+ */
+
+export { toHTML, treeOf } from './html.js';
+export { layout, DEFAULTS } from './layout.js';
+export { View, render } from './view.js';
+export { select, signature, nodeAt, pathOf, numberTree } from './select.js';
+export { PATHS } from './glyphs.js';