defuss-shadcn / Math / math
Math
Three components for mathematics, each a thin adapter over an official engine: Formula Rendering typesets TeX with KaTeX, Formula Editing edits it with MathLive, Compute & Explain computes with the Cortex Compute Engine and shows its work. Each loads its engine on first use - a page without math loads none of them - and they work alone or together.
On this page (6)
§One formula: edited, rendered, computed
Edit the expression: the formula below follows as you type, and the compute panel takes it as its input. Press Compute to simplify it - with the condition the cancellation needs.
§What each one costs
The components ship only their adapters - every engine comes from its pinned official build when the first element that needs it appears. A page with formulas loads KaTeX and nothing else; an editor adds MathLive; a compute panel starts a worker that imports the Compute Engine on its first computation.
| Component | Engine (pinned, jsDelivr) | Loads | Without JavaScript |
|---|---|---|---|
| Formula Rendering | KaTeX 0.19.0 | on the first formula: module + stylesheet + fonts | the TeX as code |
| Formula Editing | MathLive 0.111.0 | on the first editor: module + fonts | a textarea with the TeX |
| Compute & Explain | Compute Engine 0.149.0 | on the first computation, inside a worker | the form, no result |
The adapters themselves are not part of all.css / all.js either: the Math section is the extra bundle components/math.css + components/math.js, 15.7 KiB minified + compressed. A page with math adds it after all.* (or after core.*); a page without math pays nothing.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/components/core.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/components/all.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/components/math.css" /><script type="module" src="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/components/all.js"></script><script type="module" src="https://cdn.jsdelivr.net/gh/kyr0/defuss-shadcn@latest/dist/components/math.js"></script>§Formats
| Format | Rendering | Editing | Computing |
|---|---|---|---|
| TeX | yes - KaTeX's supported TeX | yes - MathLive's notation | yes - parsed by the engine |
| Notation tree (JSON) | yes - selectable terms | no | no |
| MathJSON | no | no | yes - mathJson instead of TeX |
| MathML | written for assistive technology; export(el, 'mathml') | no | no |
There is no lossless round trip between TeX, MathJSON and MathML, and the components do not pretend one: MathLive writes its own normalized TeX, the engine its own canonical form, and the record keeps the input as written beside both.
§In the theme
Formulas take the text color; a selected term takes --accent and an outline in --ring. The editor is a field of the system (--input, --radius-md, the focus ring), and its virtual keyboard is themed through MathLive's own custom properties - keys, surfaces and radius follow the theme. Explanations are set in --font-serif, controls in --font-sans, sources and records in --font-mono. KaTeX and MathLive keep their math fonts.
§What a result means
The Compute Engine's steps are its own report, shown as it gives them - never presented as a proof. A result carries the conditions its input needs, read from the input as written: (x² - 1)/(x - 1) is x + 1 only where x ≠ 1, x/x is 1 only where x ≠ 0, even when the engine's canonical form already dropped the division. A step that may add solutions says so, and every candidate is checked in the original equation. A comparison the engine cannot decide stays unknown. Conditions are complete only for real arithmetic, integer powers and square roots; anything else is marked partial.
§In papers
The Paper Gallery has two papers built on these components: Formulas - numbered display equations, inline math and a print layout - and Interactive Math - a formula linked to its symbol table, an equation the reader edits, and a derivation the engine explains.
Comments, ideas or improvements? Edit this page's source on GitHub