@mathzetta/inlinemath 0.0.0-stage → 0.2.0

package/dist/markdown.js

@@ -0,0 +1,2 @@
+/* Inline Math 0.2.0 — MIT licence; includes mathzetta (and @mathzetta/cas, for the CAS) */
+import{t as e,a as t}from"./chunks/html-CupluJSh.js";import{a as n}from"./chunks/calculate-Cz87Lt0N.js";import{v as s,o as r,r as a,u as i,s as o,E as l,b as u,n as d,i as p}from"./chunks/edit-M68aRA5o.js";export{V as Variables,c as createVariables}from"./chunks/edit-M68aRA5o.js";import{p as m,n as f,g as h,d as $}from"./chunks/lite-3Fb-OHbt.js";const g=new RegExp("(\\d+)","g");function v(e,{delimiters:t=["$$","$","\\[","\\("]}={}){const n=[];let s="",r=0;const a=String(e),i=e=>0===e||"\n"===a[e-1],o=(e,t,s)=>(n.push({source:e,display:t,raw:s,start:r,end:r+s.length}),`${n.length-1}`);for(;r<a.length;){if(i(r)){const e=/^( {0,3})(`{3,}|~{3,})([^\n]*)\n?/.exec(a.slice(r));if(e){const t=e[2],n=new RegExp(`\\n {0,3}${"`"===t[0]?"`":"~"}{${t.length},}[ \\t]*(?=\\n|$)`),i=a.slice(r+e[0].length),c=n.exec(`\n${i}`),l=c?i.slice(0,Math.max(0,c.index-1)):i,u=e[0].length+(c?c.index-1+c[0].length:i.length),d=a.slice(r,r+u);"math"===e[3].trim()?s+=o(l,!0,d):s+=d,r+=u;continue}}const e=a[r];if("`"===e){const e=/^`+/.exec(a.slice(r))[0],t=a.indexOf(e,r+e.length);if(t>-1){s+=a.slice(r,t+e.length),r=t+e.length;continue}s+=e,r+=e.length;continue}if("\\"===e){const e=a.slice(r,r+2),n="\\["===e?"\\]":"\\("===e?"\\)":null;if(n&&t.includes(e)){const t=a.indexOf(n,r+2);if(t>-1){s+=o(a.slice(r+2,t),"\\["===e,a.slice(r,t+2)),r=t+2;continue}}s+=e,r+=2;continue}if("$"===e)if("$"===a[r+1]&&t.includes("$$")){const e=a.indexOf("$$",r+2);if(e>-1){s+=o(a.slice(r+2,e),!0,a.slice(r,e+2)),r=e+2;continue}}else if(t.includes("$")&&a[r+1]&&!/\s/.test(a[r+1])){const e=b(a,r+1);if(e>-1){s+=o(a.slice(r+1,e),!1,a.slice(r,e+1)),r=e+1;continue}}s+=e,r++}return{text:s,math:n}}function b(e,t){for(let n=t;n<e.length;n++){const t=e[n];if("\\"!==t){if("`"===t)return-1;if("\n"===t&&/^\n[ \t]*\n/.test(e.slice(n)))return-1;if("$"===t&&!/\s/.test(e[n-1])&&!/\d/.test(e[n+1]??"")&&"$"!==e[n+1])return n}else n++}return-1}const x=e=>String(e).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),y=/^\s*([A-Za-z\u0370-\u03ff](?:_\{?\w+\}?)?)\s*=\s*([^=<>≤≥]+)$/;function k(s,r,a,i){const{text:c,math:m}=v(s,r),f=a?a.definitions(i):new Map,g=e=>a?a.textOf(e):e.text,b={...r.scope??{}},k={},w=new Map,S=new Set,j=[],E=()=>{for(const e of Object.keys(k))delete k[e];Object.assign(k,b);for(const e of f.keys())delete k[e];let e=[...f.values()];for(;e.length;){const t=e.filter(e=>{try{const t=n(g(e),k);if("number"==typeof t.value||"bigint"==typeof t.value||Array.isArray(t.value))return k[e.name]=t.exact?t.text:t.value,!1}catch{}return!0});if(t.length===e.length)break;e=t}const t={},s=_({});for(const e of f.keys()){const n=s(e);if(n)try{t[e]=h(o(n,t=>t===e?null:s(t)).tree)}catch{}}k[l]=t},_=t=>{const n=new Map;return s=>{const r=f.get(s);if(!r)return null;if(!n.has(s)){let a=null;try{a=e(g(r),t)}catch{}n.set(s,a)}return n.get(s)}};E();const M=m.map((s,a)=>{const{source:i,display:c}=s,l=c?"mv-md-display":"mv-md-math",m=(e,t="")=>`<span class="${l}${t}" data-mv-md="${a}">${e}</span>`;try{const l={...r.math,display:c,blocks:r.blocks,scope:k},h=function(t){let n=t.trim();const s=n.startsWith("_");s&&(n=n.slice(1).trimStart());let r=n.indexOf(":="),a=2;r<0&&s&&(r=n.search(/(?<![<>!≤≥=])=(?!=)/),a=1);const i=s?{error:"a hidden $_…$ saves a variable: $_A := 2+2$"}:null;if(r<=0)return i;const o=n.slice(0,r).trim(),c=n.slice(r+a).trim();let l=null;try{l=/\{\{/.test(o)?null:d(e(o))}catch{}return null!==l&&c?{hidden:s,lhs:o,name:l,rhs:c,input:p(c)}:i}(i);if(h&&h.error)throw new Error(h.error);if(h){const{name:n,input:r,hidden:i}=h,c=r?{name:n,text:r.default,input:r,key:`input:${JSON.stringify(r)}`}:{name:n,text:h.rhs,input:null,key:`expr:${h.rhs}`,start:s.start,end:s.end};let d="";if(r){const e=function(e,t){const{input:n,name:s}=e,r=`class="mv-md-input mv-md-${n.kind}" data-mv-var="${x(s)}" aria-label="${x(s)}"`;if("dropdown"===n.kind)return`<select ${r}>${n.options.map(e=>`<option value="${x(e)}"${e===t?" selected":""}>${x(e)}</option>`).join("")}</select>`;return"slider"===n.kind?`<input type="range" ${r} min="${n.min}" max="${n.max}" step="${n.step}" value="${x(t)}"><output class="mv-md-output" data-mv-out="${x(s)}">${x(t)}</output>`:`<input type="text" ${r} value="${x(t)}" size="${Math.max(4,t.length+1)}" spellcheck="false" autocomplete="off">`}(c,g(c));d=i?e:`${t(h.lhs,l)}<span class="mv-md-assign" aria-hidden="true">≔</span>${e}`,S.add(a)}else{const n=o(e(h.rhs,l),_(l)).tree;if(!i){const s=$({type:"op",op:"=",args:[u(e(h.lhs)),void 0===n.id?n:u(n)]});j[a]=s,d=function(e){return e.replace('<span class="mv-rel">=</span>','<span class="mv-rel mv-rel-def">≔</span>').replace(/(aria-label="[^"]*?) equals /,"$1 is defined as ").replace("<mo>=</mo>","<mo>≔</mo>")}(t(s,l))}}return f.delete(n),f.set(n,c),w.set(n,c),E(),i&&!r?"":m(d,r?" mv-md-input-def":"")}const{tree:v,changed:M}=o(e(i,l),_(l));M&&$(v),j[a]=v;const O=t(v,l);return!M&&!1!==r.define&&function(e,t,s){const r=y.exec(e);if(!r||/\{\{/.test(r[2]))return!1;const a=r[1].replace(/[{}]/g,"");if(s.has(a))return!1;try{const e=n(r[2],t);if("number"==typeof e.value||"bigint"==typeof e.value||Array.isArray(e.value))return t[a]=e.exact?e.text:e.value,!0}catch{}return!1}(i,b,f)&&E(),m(O)}catch(e){return`<span class="mv-md-error" data-mv-md="${a}" title="${x(e.message)}"><code>${x(s.raw)}</code></span>`}});return{text:c,math:m,drawn:M,defs:w,inputs:S,trees:j}}const w=/^(https?:|mailto:|#|\/|\.{0,2}\/|[^:]*$)/i,S=e=>w.test(e.trim())?x(e.trim()):"#";function j(e,t,n){const s=[],r=e=>(s.push(e),`${s.length-1}`);let a=e;return a=a.replace(/(`+)([\s\S]*?[^`])\1(?!`)/g,(e,t,s)=>r(`<code>${x(n(s.trim()))}</code>`)),a=a.replace(/\\([\\`*_{}[\]()#+\-.!|~$<>"'])/g,(e,t)=>r(x(t))),a=a.replace(/<((?:https?:\/\/|mailto:)[^\s>]+)>/g,(e,t)=>r(`<a href="${S(t)}">${x(t)}</a>`)),t.html&&(a=a.replace(/<\/?[A-Za-z][^>]*>/g,e=>r(e))),a=a.replace(/!\[([^\]]*)\]\(\s*((?:[^\s()]|\([^\s()]*\))+)(?:\s+"([^"]*)")?\s*\)/g,(e,t,n,s)=>r(`<img src="${S(n)}" alt="${x(t)}"${s?` title="${x(s)}"`:""}>`)),a=a.replace(/\[([^\]]+)\]\(\s*((?:[^\s()]|\([^\s()]*\))+)(?:\s+"([^"]*)")?\s*\)/g,(e,s,a,i)=>r(`<a href="${S(a)}"${i?` title="${x(i)}"`:""}>${j(s,t,n)}</a>`)),a=x(a),a=a.replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g,"<strong>$2</strong>"),a=a.replace(/(^|[^*\w])\*(?=\S)([\s\S]*?\S)\*(?!\*)/g,"$1<em>$2</em>"),a=a.replace(/(^|[^_\w])_(?=\S)([\s\S]*?\S)_(?![_\w])/g,"$1<em>$2</em>"),a=a.replace(/~~(?=\S)([\s\S]*?\S)~~/g,"<del>$1</del>"),a=a.replace(/( {2,}|\\)\n/g,"<br>\n"),a.replace(/(\d+)/g,(e,t)=>s[Number(t)])}const E=/^( {0,3})(#{1,6}\s|>|```|~~~|([-*+]|\d{1,9}[.)])\s|(\*[ \t]*){3,}$|(-[ \t]*){3,}$|(_[ \t]*){3,}$)/,_=/^( {0,3})([-*+]|\d{1,9}[.)])(\s+|$)/,M=/^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;function O(e,t,n){const s=[];let r=0;const a=e=>j(e,t,n);for(;r<e.length;){const i=e[r];if(!i.trim()){r++;continue}const o=/^ {0,3}(`{3,}|~{3,})\s*([^\s`]*)/.exec(i);if(o){const t=[];for(r++;r<e.length&&!new RegExp(`^ {0,3}${"`"===o[1][0]?"`":"~"}{${o[1].length},}\\s*$`).test(e[r]);)t.push(e[r++]);r++;const a=o[2]?` class="language-${x(o[2])}"`:"";s.push(`<pre><code${a}>${x(n(t.join("\n")))}</code></pre>`);continue}const c=/^ {0,3}(#{1,6})\s+(.*?)\s*#*\s*$/.exec(i);if(c){s.push(`<h${c[1].length}>${a(c[2])}</h${c[1].length}>`),r++;continue}if(/^ {0,3}((\*[ \t]*){3,}|(-[ \t]*){3,}|(_[ \t]*){3,})$/.test(i)){s.push("<hr>"),r++;continue}if(/^ {0,3}>/.test(i)){const a=[];for(;r<e.length&&e[r].trim()&&(/^ {0,3}>/.test(e[r])||a.length);)a.push(e[r].replace(/^ {0,3}> ?/,"")),r++;s.push(`<blockquote>\n${O(a,t,n)}\n</blockquote>`);continue}const l=_.exec(i);if(l){const a=/\d/.test(l[2]),i=a?parseInt(l[2],10):1,o=[];let c=!1;for(;r<e.length;){const t=_.exec(e[r]);if(!t||/\d/.test(t[2])!==a)break;const n=t[0].length,s=[e[r].slice(n)];for(r++;r<e.length;){const t=e[r];if(!t.trim()){const t=e[r+1];if(void 0!==t&&t.startsWith(" ".repeat(Math.min(n,4)))&&t.trim()){s.push(""),c=!0,r++;continue}void 0!==t&&_.test(t)&&(c=!0);break}if(t.startsWith(" ".repeat(Math.min(n,4))))s.push(t.slice(Math.min(n,4)));else{if(_.test(t)||E.test(t))break;s.push(t)}r++}for(o.push(s);r<e.length&&!e[r].trim()&&void 0!==e[r+1]&&_.test(e[r+1]);)r++}const u=a?"ol":"ul",d=o.map(e=>{let s=O(e,t,n);return c||(s=s.replace(/^<p>([\s\S]*?)<\/p>/,"$1").replace(/\n<p>([\s\S]*?)<\/p>/g,"\n$1")),`<li>${s}</li>`});s.push(`<${u}${a&&1!==i?` start="${i}"`:""}>\n${d.join("\n")}\n</${u}>`);continue}if(i.includes("|")&&void 0!==e[r+1]&&M.test(e[r+1])&&e[r+1].includes("-")){const t=e=>e.trim().replace(/^\|/,"").replace(/\|$/,"").split(/(?<!\\)\|/).map(e=>e.trim()),n=t(e[r+1]).map(e=>e.startsWith(":")&&e.endsWith(":")?"center":e.endsWith(":")?"right":e.startsWith(":")?"left":""),o=(e,t,s)=>`<${e}${n[s]?` style="text-align:${n[s]}"`:""}>${a(t)}</${e}>`,c=t(i);r+=2;const l=[];for(;r<e.length&&e[r].trim()&&e[r].includes("|");)l.push(t(e[r++]));s.push(`<table>\n<thead><tr>${c.map((e,t)=>o("th",e,t)).join("")}</tr></thead>\n<tbody>\n${l.map(e=>`<tr>${c.map((t,n)=>o("td",e[n]??"",n)).join("")}</tr>`).join("\n")}\n</tbody>\n</table>`);continue}if(/^( {4}|\t)/.test(i)){const t=[];for(;r<e.length&&(/^( {4}|\t)/.test(e[r])||!e[r].trim());)t.push(e[r++].replace(/^( {4}|\t)/,""));for(;t.length&&!t[t.length-1].trim();)t.pop();s.push(`<pre><code>${x(n(t.join("\n")))}</code></pre>`);continue}const u=[];for(;r<e.length&&e[r].trim()&&(!u.length||!E.test(e[r])||/^ {0,3}[-=]+\s*$/.test(e[r]));){if(u.length&&/^ {0,3}(=+|-+)\s*$/.test(e[r])){const t="="===e[r].trim()[0]?1:2;s.push(`<h${t}>${a(u.join("\n"))}</h${t}>`),u.length=0,r++;break}u.push(e[r].replace(/^ {0,3}/,"")),r++}u.length&&s.push(`<p>${a(u.join("\n"))}</p>`)}return s.join("\n")}function A(e,t={},n=e=>e){return O(String(e).replace(/\r\n?/g,"\n").split("\n"),t,n)}function N({text:e,math:t,drawn:n},s){return(s.render?s.render(e):A(e,s,e=>e.replace(g,(e,n)=>t[Number(n)].raw))).replace(new RegExp("<p>\\s*(\\d+)\\s*</p>","g"),(e,s)=>t[Number(s)].display&&n[Number(s)]?`<div class="mv-md-block">${n[Number(s)]}</div>`:e).replace(g,(e,t)=>n[Number(t)]).replace(/<p>\s*<\/p>\n?/g,"")}function L(e,t={}){return N(k(e,t,t.variables||null),t)}const W=new WeakMap,q=new Set;function C(){for(const e of q)e.connected()&&!e.element.isConnected&&e.stop(!0)}function R(t,n,o={}){const c=void 0===o.variables?s:o.variables||null;C();const l=W.get(t);l&&l.stop(l.store!==c);let u=k(n,o,c,t);if(t.innerHTML=N(u,o),!c)return W.delete(t),t;c.own(t,u.defs);let d=t.isConnected;const p=n=>{const s=n.target,r=s&&s.dataset&&s.dataset.mvVar;if(void 0!==r&&t.contains(s)){if("text"===s.type)try{e(s.value,{blocks:o.blocks,scope:{}}),s.removeAttribute("aria-invalid")}catch{return void s.setAttribute("aria-invalid","true")}c.set(r,s.value)}},h=s=>{const l=s.target.closest?.("[data-node]"),d=l&&l.closest("[data-mv-md]");if(!d||!t.contains(d))return;const p=Number(d.dataset.mvMd),h=u.trees[p];if(!h)return;const $=Number(l.dataset.node),g=m(h,$)||[];let v=null;for(let e=g.length;e>=0&&!v;e--){const t=f(h,g.slice(0,e));t&&void 0!==t.from&&(v={node:t,depth:e})}const b=v&&c.definitions().get(v.node.from);if(b&&b.input&&"textbox"===b.input.kind){s.preventDefault();const n=b.name,u=t.ownerDocument.querySelector(`[data-mv-var="${CSS.escape(n)}"]`),d=o.editable&&o.editable.toText;if(!d)return void(u&&(u.focus(),u.select()));const p=t=>e(t),m=f(h,g);return void r(l,d(i(m,p)),{label:`Edit ${n}`,parse:t=>e(t,{blocks:o.blocks}),commit:e=>{const t=a(i(v.node,p),g.slice(v.depth),e);c.set(n,d(t))}})}const x=b&&u.defs.get(b.name),y=x&&x.key===b.key&&void 0!==x.start?{...u.math[p],start:x.start,end:x.end,raw:n.slice(x.start,x.end)}:u.math[p];t.dispatchEvent(new CustomEvent("inlinemath:select",{bubbles:!0,detail:{index:p,start:y.start,end:y.end,raw:y.raw,source:y.source,id:$,path:g}}))};t.addEventListener("input",p),t.addEventListener("change",p),t.addEventListener("dblclick",h);const $=c.subscribe(e=>{e!==t&&(t.isConnected?(d=!0,C(),(()=>{const e=k(n,o,c,t);e.drawn.forEach((n,s)=>{if(n===u.drawn[s]||e.inputs.has(s))return;const r=t.querySelector(`[data-mv-md="${s}"]`);r&&(r.outerHTML=n)});for(const n of t.querySelectorAll("[data-mv-var], [data-mv-out]")){const t=e.defs.get(n.dataset.mvVar??n.dataset.mvOut);if(!t)continue;const s=c.textOf(t);void 0!==n.dataset.mvOut?n.textContent=s:n.value!==s&&n!==n.ownerDocument?.activeElement&&(n.value=s)}u=e})()):d&&g(!0))});function g(e){$(),t.removeEventListener("input",p),t.removeEventListener("change",p),t.removeEventListener("dblclick",h),q.delete(v),W.delete(t),e&&c.own(t,null)}const v={element:t,store:c,stop:g,connected:()=>d};return q.add(v),W.set(t,v),t}export{v as extractMath,L as markdownToHTML,A as renderMarkdown,R as renderMarkdownInto,s as variables};

package/fonts/GUST-FONT-LICENSE.txt

@@ -0,0 +1,30 @@
+% This is a preliminary version (2006-09-30), barring acceptance from
+% the LaTeX Project Team and other feedback, of the GUST Font License.
+% (GUST is the Polish TeX Users Group, http://www.gust.org.pl)
+%
+% For the most recent version of this license see
+% http://www.gust.org.pl/fonts/licenses/GUST-FONT-LICENSE.txt
+% or
+% http://tug.org/fonts/licenses/GUST-FONT-LICENSE.txt
+%
+% This work may be distributed and/or modified under the conditions
+% of the LaTeX Project Public License, either version 1.3c of this
+% license or (at your option) any later version.
+% 
+% Please also observe the following clause:
+% 1) it is requested, but not legally required, that derived works be
+%    distributed only after changing the names of the fonts comprising this
+%    work and given in an accompanying "manifest", and that the
+%    files comprising the Work, as listed in the manifest, also be given
+%    new names. Any exceptions to this request are also given in the
+%    manifest.
+%    
+%    We recommend the manifest be given in a separate file named
+%    MANIFEST-<fontid>.txt, where <fontid> is some unique identification
+%    of the font family. If a separate "readme" file accompanies the Work, 
+%    we recommend a name of the form README-<fontid>.txt.
+%
+% The latest version of the LaTeX Project Public License is in
+% http://www.latex-project.org/lppl.txt and version 1.3c or later
+% is part of all distributions of LaTeX version 2006/05/20 or later.
+

package/fonts/fonts.css

@@ -0,0 +1,17 @@
+/*
+ * Optional: Latin Modern Roman (the TeX look), about 95 kB for both files.
+ * Link this before inlinemath.css; without it Inline Math uses the system serif.
+ * Licence: GUST Font License, see GUST-FONT-LICENSE.txt.
+ */
+@font-face {
+    font-family: "Inline Math Roman";
+    src: url("lmroman12-regular.woff2") format("woff2");
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Inline Math Roman";
+    src: url("lmroman12-italic.woff2") format("woff2");
+    font-style: italic;
+    font-display: swap;
+}

package/inlinemath.css

@@ -0,0 +1,158 @@
+/*
+ * 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; }
+.mv-matrix { display: inline-grid; column-gap: 0.8em; row-gap: 0.3em; align-items: baseline; justify-items: center; margin: 0 0.15em; }
+.mv-matrix-row { display: contents; }
+.mv-matrix-cell { 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; position: relative; }
+.mv-cancel-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+.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)); }
+/* Windows high contrast (and other forced colours) drops backgrounds and shadows: outline a highlight instead */
+@media (forced-colors: active) {
+  .mv-hl { outline: 0.08em solid Highlight; outline-offset: 0.04em; }
+}
+.mv-clickable .mv-n { cursor: pointer; }
+.mv-editable .mv-n:hover { outline: 1px dashed rgba(0, 0, 0, 0.25); }
+/* the box editing a part in place (view.editable, or a Markdown textbox variable) */
+.mv-edit { transform: translateY(-50%); z-index: 1000; box-sizing: content-box; padding: 0.1em 0.35em; font-family: inherit;
+  border: 1px solid #1a5fb4; border-radius: 0.25em; background: #fff; color: #111; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
+.mv-edit[aria-invalid="true"] { border-color: #c33; outline: 2px solid #c33; }
+/* the live region a view announces steps through ({ announce: true }): read, never seen */
+.mv-sr-only, .mv-sr-math { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.mv-clickable .mv-n:hover { outline: 1px dashed rgba(0, 0, 0, 0.25); }
+/* the keyboard: the expression is one tab stop, and the part the arrow keys are on is ringed */
+.mv[tabindex]:focus-visible { outline: 0.1em solid #1a5fb4; outline-offset: 0.12em; }
+.mv[tabindex]:focus .mv-focus { outline: 0.1em solid #1a5fb4; outline-offset: 0.06em; border-radius: 0.1em; }
+/* while a part is ringed, the whole expression's ring steps back so the part is the one that stands out */
+.mv[tabindex]:focus-visible:has(.mv-focus) { outline: 1px dashed #1a5fb4; }
+@media (forced-colors: active) {
+  .mv[tabindex]:focus-visible, .mv[tabindex]:focus .mv-focus { outline-color: Highlight; }
+}
+
+/* ---- 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; }
+/* saved variables: $A := 2+2$ draws A ≔ 2 + 2; $A := [[…]]$ an input that sets A */
+.mv-md-input-def { display: inline-flex; align-items: center; gap: 0.3em; }
+.mv-md-assign { margin: 0 0.1em; }
+.mv-md-input { font: inherit; font-size: 0.9em; }
+input.mv-md-textbox { font-family: inherit; padding: 0.05em 0.3em; field-sizing: content; min-width: 3ch; }
+input.mv-md-textbox[aria-invalid="true"] { outline: 2px solid #c33; outline-offset: 1px; }
+input.mv-md-slider { vertical-align: middle; }
+.mv-md-output { font-variant-numeric: tabular-nums; min-width: 2ch; }

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.2.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.1.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@mathzetta/cas": "^0.1.0",
+    "mathzetta": "^1.1.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,149 @@
+/**
+ * '@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]) (or der, derivative,
+ * differentiate), integrate(f, x[, a, b]) (or integral), solve(equation, x), approx(expr[, digits]);
+ * d/dx … and ∫ … without limits go to the CAS too. In Markdown, saved variables ($_f := x^3$)
+ * stand for their expressions: {{diff(f, x)}}. 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 EXPRESSIONS = Symbol.for('inlinemath.expressions');   // as variables.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']);
+// other names people write for them
+const ALIASES = { integral: 'integrate', differentiate: 'diff', approximate: 'approx', simp: 'simplify' };
+
+/**
+ * A `{{…}}` handler: pass it as toHTML(input, { blocks: casBlocks() }).
+ * @param {object} [options] { cas } a CAS of your own (mathCAS({ rules })); { steps } how much working each call
+ *   keeps (the CAS's steps option: true, 'brief', false), read from the handler's `last` after a block
+ */
+export function casBlocks(options = {}) {
+  const cas = options.cas ?? mathCAS();
+  const how = options.steps === undefined ? {} : { steps: options.steps };
+  const handler = (text, scope) => {
+    let tokens;
+    try {
+      tokens = cas.read(text);
+    } catch {
+      return calculateBlock(text, scope);
+    }
+    // saved variables ($_f := x^3$ in Markdown) stand for their expressions: {{diff(f, x)}}
+    const saved = scope && scope[EXPRESSIONS];
+    if (saved) tokens = tokens.flatMap((t) => (Object.hasOwn(saved, t) ? saved[t] : [t]));
+    const head = tokens[tokens.length - 1];
+    const name = head?.startsWith('\\:') ? (ALIASES[head.slice(2)] ?? 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], how); break;
+        case 'expand': r = cas.expand(args[0], how); break;
+        case 'factor': r = cas.factor(args[0], how); break;
+        case 'cancel': r = cas.cancel(args[0], how); break;
+        case 'diff': r = cas.diff(args[0], word(args[1]), { ...how, order: args[2] ? Number(args[2].s) : 1 }); break;
+        case 'integrate': r = cas.integrate(args[0], word(args[1]), { ...how, ...(args[3] ? { from: args[2].s, to: args[3].s } : {}) }); break;
+        case 'solve': r = cas.solve(args[0], word(args[1]), how); break;
+        case 'approx': r = cas.approximate(args[0], { ...how, digits: args[1] ? Number(args[1].s) : 15 }); break;
+        case 'derivative': r = cas.diff(node.args[0], node.args[1].s, how); break;
+        default: r = cas.integrate(node, undefined, how); 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]);
+}