mevebu 0.3.0 → 0.4.0

package/mevebu/libs/js/tools/equation-formatter.js

@@ -0,0 +1,71 @@
+// A plain text preview of common LaTeX math, next to the source.
+import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+
+const SUP = { "0": "⁰", "1": "¹", "2": "²", "3": "³", "4": "⁴", "5": "⁵", "6": "⁶", "7": "⁷", "8": "⁸", "9": "⁹", "+": "⁺", "-": "⁻", "n": "ⁿ" };
+const SUB = { "0": "₀", "1": "₁", "2": "₂", "3": "₃", "4": "₄", "5": "₅", "6": "₆", "7": "₇", "8": "₈", "9": "₉", "+": "₊", "-": "₋" };
+const GREEK = {
+  alpha: "α", beta: "β", gamma: "γ", delta: "δ", epsilon: "ε", zeta: "ζ", eta: "η",
+  theta: "θ", iota: "ι", kappa: "κ", lambda: "λ", mu: "μ", nu: "ν", xi: "ξ",
+  pi: "π", rho: "ρ", sigma: "σ", tau: "τ", phi: "φ", chi: "χ", psi: "ψ", omega: "ω",
+  Gamma: "Γ", Delta: "Δ", Theta: "Θ", Lambda: "Λ", Xi: "Ξ", Pi: "Π", Sigma: "Σ",
+  Phi: "Φ", Psi: "Ψ", Omega: "Ω",
+};
+const SYMBOLS = {
+  times: "×", cdot: "·", div: "÷", pm: "±", mp: "∓", le: "≤", leq: "≤",
+  ge: "≥", geq: "≥", ne: "≠", neq: "≠", approx: "≈", equiv: "≡", infty: "∞",
+  sum: "Σ", prod: "Π", int: "∫", partial: "∂", nabla: "∇", rightarrow: "→",
+  to: "→", leftarrow: "←", Rightarrow: "⇒", Leftarrow: "⇐", leftrightarrow: "↔",
+  in: "∈", notin: "∉", forall: "∀", exists: "∃", angle: "∠", degree: "°",
+};
+
+const superscript = (value) => [...value].map((char) => SUP[char] ?? char).join("");
+const subscript = (value) => [...value].map((char) => SUB[char] ?? char).join("");
+
+function preview(source) {
+  let text = source;
+  text = text.replace(/\\text\s*\{([^{}]*)\}/g, "$1");
+  text = text.replace(/\\sqrt\s*\{([^{}]*)\}/g, "√($1)");
+  text = text.replace(/\\(?:d|t)?frac\s*\{([^{}]*)\}\s*\{([^{}]*)\}/g, "($1)/($2)");
+  text = text.replace(/\\([A-Za-z]+)/g, (match, name) => SYMBOLS[name] ?? GREEK[name] ?? match);
+  text = text.replace(/\^\{([^{}]*)\}/g, (_, value) => superscript(value));
+  text = text.replace(/\^(\S)/g, (_, value) => superscript(value));
+  text = text.replace(/_\{([^{}]*)\}/g, (_, value) => subscript(value));
+  text = text.replace(/_(\S)/g, (_, value) => subscript(value));
+  text = text.replace(/\\(?:left|right)/g, "");
+  text = text.replace(/\\([ ,;:!])/g, " ");
+  text = text.replace(/\\/g, "");
+  text = text.replace(/[{}]/g, "");
+  return text;
+}
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 12,
+    value: "x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}",
+    "aria-label": "LaTeX",
+    placeholder: "\\frac{a}{b}",
+  });
+  const result = el("pre", { class: "mvb-out" });
+  const note = notice("note");
+  note.write("Plain text preview, not rendered math.");
+
+  function run() {
+    result.textContent = source.value ? preview(source.value) : "";
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("LaTeX", source)),
+      stack(panel("Preview", result), note)
+    ),
+    foot: actions(copyButton(() => source.value, "Copy LaTeX", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/expense-split.js

@@ -0,0 +1,90 @@
+// Splits a total between people, equally or by custom shares.
+import { el, bench, stack, panel, textArea, numberInput, chipRow, notice, copyButton, actions, toolcard, readPin, writePin } from "../core.js";
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+export function mount(slot) {
+  const PIN = "expense-split";
+  const saved = readPin(PIN, { total: "120", people: "", shares: "", mode: "equal" });
+  let mode = saved.mode === "custom" ? "custom" : "equal";
+
+  const total = numberInput({ value: saved.total ?? "", min: "0", "aria-label": "Total" });
+  const people = textArea({ rows: 6, value: saved.people ?? "", "aria-label": "People", placeholder: "One name per line" });
+  const shares = textArea({ rows: 6, value: saved.shares ?? "", "aria-label": "Shares", placeholder: "One number per line" });
+  const modeChips = chipRow(
+    [{ value: "equal", label: "Equal" }, { value: "custom", label: "Custom" }],
+    { value: mode, label: "Mode", onChange: (next) => { mode = next; save(); run(); } }
+  );
+  const sharesField = panel("Shares", shares);
+  const result = el("div", { class: "mvb-scroll" });
+  const error = notice("error");
+  const remainder = notice("warn");
+  let text = "";
+
+  const save = () => writePin(PIN, { total: total.value, people: people.value, shares: shares.value, mode });
+
+  function run() {
+    error.write("");
+    remainder.write("");
+    text = "";
+    sharesField.hidden = mode !== "custom";
+
+    const names = people.value.split("\n").map((line) => line.trim()).filter(Boolean);
+    const amount = Number(total.value);
+    if (!names.length || total.value.trim() === "" || !Number.isFinite(amount) || amount < 0) {
+      result.replaceChildren(el("p", { class: "mvb-note" }, "Add a total and one name per line."));
+      return;
+    }
+
+    let weights;
+    if (mode === "custom") {
+      weights = shares.value.split("\n").map((line) => line.trim()).filter(Boolean).map(Number);
+      if (weights.length !== names.length || weights.some((w) => !Number.isFinite(w) || w < 0)) {
+        result.replaceChildren(el("p", { class: "mvb-note" }, "Add one share for each name."));
+        error.write("Add one share for each name.");
+        return;
+      }
+      if (weights.reduce((a, b) => a + b, 0) <= 0) {
+        result.replaceChildren(el("p", { class: "mvb-note" }, "Add one share for each name."));
+        error.write("The shares add up to zero.");
+        return;
+      }
+    } else {
+      weights = names.map(() => 1);
+    }
+
+    const weightSum = weights.reduce((a, b) => a + b, 0);
+    const rounded = weights.map((w) => Math.round(((amount * w) / weightSum) * 100) / 100);
+    const paid = rounded.reduce((a, b) => a + b, 0);
+    const leftover = Math.round((amount - paid) * 100) / 100;
+
+    result.replaceChildren(el("table", { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Person"), el("th", {}, "Amount"))),
+      el("tbody", {}, ...names.map((name, i) => el("tr", {},
+        el("th", {}, name),
+        el("td", {}, fmt(rounded[i])))))));
+
+    if (Math.abs(leftover) >= 0.01) remainder.write(`Rounding leaves ${fmt(leftover)} unassigned.`);
+    text = names.map((name, i) => `${name}: ${fmt(rounded[i])}`).join("\n");
+  }
+
+  total.addEventListener("input", () => { save(); run(); });
+  people.addEventListener("input", () => { save(); run(); });
+  shares.addEventListener("input", () => { save(); run(); });
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Total", total), panel("Mode", modeChips), panel("People", people), sharesField, error),
+      stack(panel("Each person", result), remainder)
+    ),
+    foot: actions(copyButton(() => text, "Copy split", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/favicon-markup.js

@@ -0,0 +1,53 @@
+// Builds the favicon and app icon link tags for a site, prefixed by its origin
+// when one is given.
+import { bench, stack, panel, textInput, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+const esc = (value) =>
+  String(value).replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[char]));
+
+const isUrl = (value) => {
+  try {
+    new URL(value);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export function mount(slot) {
+  const site = textInput({ value: "https://example.com", "aria-label": "Site URL" });
+  const result = output({ rows: 6 });
+  const error = notice("error");
+
+  function build() {
+    error.write("");
+    let prefix = "";
+    const raw = site.value.trim();
+    if (raw) {
+      if (isUrl(raw)) prefix = new URL(raw).origin;
+      else error.write("That is not a valid URL.");
+    }
+    result.write([
+      `<link rel="icon" href="${esc(prefix)}/favicon.ico" sizes="any" />`,
+      `<link rel="icon" type="image/svg+xml" href="${esc(prefix)}/favicon.svg" />`,
+      `<link rel="apple-touch-icon" href="${esc(prefix)}/apple-touch-icon.png" />`,
+      `<link rel="manifest" href="${esc(prefix)}/site.webmanifest" />`,
+    ].join("\n"));
+  }
+
+  site.addEventListener("input", build);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Site URL", site), error),
+      stack(panel("Favicon tags", result))
+    ),
+    foot: actions(copyButton(() => result.textContent, "Copy tags", "fill")),
+  });
+  slot.append(card.node);
+  build();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/find-replace.js

@@ -0,0 +1,88 @@
+// Find and replace, plain text or a regular expression, with a live match count.
+import { bench, stack, panel, textArea, textInput, toggleRow, notice, button, copyButton, actions, toolcard } from "../core.js";
+
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+export function mount(slot) {
+  const source = textArea({ rows: 9, "aria-label": "Text", placeholder: "Paste your text" });
+  const findField = textInput({ placeholder: "Find", "aria-label": "Find" });
+  const replaceField = textInput({ placeholder: "Replace with", "aria-label": "Replace with" });
+  const options = toggleRow([
+    { value: "regex", label: "Regex", checked: false },
+    { value: "ignore", label: "Ignore case", checked: false },
+  ]);
+  const result = textArea({ rows: 9, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  const error = notice("error");
+  const countNote = notice("note");
+
+  function build(global) {
+    const find = findField.value;
+    if (!find) return null;
+    const opts = options.values();
+    const flags = (global ? "g" : "") + (opts.includes("ignore") ? "i" : "");
+    try {
+      return new RegExp(opts.includes("regex") ? find : escapeRegExp(find), flags);
+    } catch {
+      return "error";
+    }
+  }
+
+  function run() {
+    const pattern = build(true);
+    if (pattern === "error") {
+      error.write("That pattern is not valid.");
+      countNote.write("");
+      result.value = source.value;
+      return;
+    }
+    error.write("");
+    if (!pattern) {
+      countNote.write("");
+      result.value = source.value;
+      return;
+    }
+    const matches = source.value.match(pattern) || [];
+    result.value = source.value.replace(pattern, replaceField.value);
+    countNote.write(matches.length === 1 ? "1 match." : `${matches.length} matches.`);
+  }
+
+  function replaceOne() {
+    const pattern = build(false);
+    if (pattern === "error") return;
+    if (!pattern) return;
+    source.value = source.value.replace(pattern, replaceField.value);
+    run();
+  }
+
+  function replaceAll() {
+    const pattern = build(true);
+    if (pattern === "error") return;
+    if (!pattern) return;
+    source.value = source.value.replace(pattern, replaceField.value);
+    run();
+  }
+
+  const replaceOneButton = button("Replace one", { icon: "replace" });
+  replaceOneButton.addEventListener("click", replaceOne);
+  const replaceAllButton = button("Replace all", { icon: "replace", kind: "fill" });
+  replaceAllButton.addEventListener("click", replaceAll);
+
+  source.addEventListener("input", run);
+  findField.addEventListener("input", run);
+  replaceField.addEventListener("input", run);
+  options.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text", source), panel("Find", findField), panel("Replace with", replaceField), options, error, countNote),
+      stack(panel("Result", result))
+    ),
+    foot: actions(copyButton(() => result.value, "Copy result"), replaceOneButton, replaceAllButton),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/flashcard-creator.js

@@ -0,0 +1,117 @@
+// A question and answer set you can flip through and export.
+import { el, toast, blank, bench, stack, row, panel, textInput, textArea, button, copyButton, downloadButton, actions, toolcard, readPin, writePin } from "../core.js";
+
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+
+export function mount(slot) {
+  const PIN = "flashcard-creator";
+  const saved = readPin(PIN, []);
+  let cards = Array.isArray(saved) ? saved : [];
+  let index = 0;
+  let flipped = false;
+
+  const question = textInput({ placeholder: "Question", "aria-label": "Question" });
+  const answer = textArea({ rows: 3, placeholder: "Answer", "aria-label": "Answer" });
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+  const face = el("pre", { class: "mvb-out" });
+  const faceLabel = el("span", { class: "mvb-field__label" }, "Question");
+
+  const addButton = button("Add card", { icon: "plus", kind: "fill" });
+  const flipButton = button("Flip", { icon: "arrow-left-right" });
+  const prevButton = button("Previous");
+  const nextButton = button("Next");
+
+  const save = () => writePin(PIN, cards);
+  const tile = (key, value) => el("div", { class: "mvb-stat" },
+    el("span", { class: "mvb-stat__v" }, String(value)),
+    el("span", { class: "mvb-stat__k" }, key));
+
+  const textExport = () =>
+    cards.map((card, i) => `${i + 1}. Q: ${card.question}\n   A: ${card.answer}`).join("\n\n");
+
+  const jsonExport = () =>
+    JSON.stringify(cards.map(({ question: q, answer: a }) => ({ question: q, answer: a })), null, 2);
+
+  function removeButton(card) {
+    const node = button("", { icon: "trash", "aria-label": `Remove ${card.question}` });
+    node.addEventListener("click", () => {
+      cards = cards.filter((entry) => entry.id !== card.id);
+      if (index >= cards.length) index = Math.max(0, cards.length - 1);
+      save();
+      render();
+    });
+    return node;
+  }
+
+  function render() {
+    if (!cards.length) {
+      face.textContent = "";
+      listWrap.replaceChildren(blank("layers", "No cards yet."));
+    } else {
+      const card = cards[index];
+      faceLabel.textContent = flipped ? "Answer" : "Question";
+      face.textContent = flipped ? card.answer : card.question;
+      listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+        el("tbody", {}, ...cards.map((entry, i) => el("tr", {},
+          el("th", {}, `${i + 1}. ${entry.question}`),
+          el("td", {}, removeButton(entry)))))));
+    }
+    stats.replaceChildren(tile("Cards", cards.length), tile("Card", cards.length ? `${index + 1} / ${cards.length}` : "-"));
+    flipButton.disabled = !cards.length;
+    prevButton.disabled = cards.length < 2;
+    nextButton.disabled = cards.length < 2;
+  }
+
+  function add() {
+    const q = question.value.trim();
+    const a = answer.value.trim();
+    if (!q || !a) return toast("Add a question and an answer");
+    cards.push({ id: uid(), question: q, answer: a });
+    question.value = "";
+    answer.value = "";
+    question.focus();
+    index = cards.length - 1;
+    flipped = false;
+    save();
+    render();
+  }
+
+  addButton.addEventListener("click", add);
+  flipButton.addEventListener("click", () => { flipped = !flipped; render(); });
+  prevButton.addEventListener("click", () => {
+    if (!cards.length) return;
+    index = (index - 1 + cards.length) % cards.length;
+    flipped = false;
+    render();
+  });
+  nextButton.addEventListener("click", () => {
+    if (!cards.length) return;
+    index = (index + 1) % cards.length;
+    flipped = false;
+    render();
+  });
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Question", question), panel("Answer", answer)),
+      stack(
+        stats,
+        panel(faceLabel, face),
+        row(prevButton, nextButton, flipButton),
+        panel("Cards", listWrap)
+      )
+    ),
+    foot: actions(
+      copyButton(() => textExport(), "Copy text"),
+      downloadButton(() => jsonExport(), "flashcards.json", "Save JSON", "application/json"),
+      addButton
+    ),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/font-pairing.js

@@ -0,0 +1,88 @@
+// Preview a heading and body font pair, then copy the CSS font stacks.
+import { el, bench, stack, panel, selectInput, rangeInput, chipRow, output, copyButton, actions, toolcard } from "../core.js";
+
+const FONTS = [
+  { value: "system-ui, sans-serif", label: "System UI" },
+  { value: "Arial, Helvetica, sans-serif", label: "Arial" },
+  { value: "Verdana, Geneva, sans-serif", label: "Verdana" },
+  { value: "Tahoma, Verdana, sans-serif", label: "Tahoma" },
+  { value: '"Trebuchet MS", sans-serif', label: "Trebuchet MS" },
+  { value: "Georgia, \"Times New Roman\", serif", label: "Georgia" },
+  { value: '"Times New Roman", Times, serif', label: "Times New Roman" },
+  { value: 'Palatino, "Palatino Linotype", serif', label: "Palatino" },
+  { value: "Garamond, Georgia, serif", label: "Garamond" },
+  { value: '"Courier New", Courier, monospace', label: "Courier New" },
+  { value: "ui-monospace, SFMono-Regular, Menlo, monospace", label: "Mono" },
+];
+
+function slider(label, { min, max, step, value, unit }) {
+  const input = rangeInput({ min, max, step, value, "aria-label": label });
+  const val = el("span", { class: "mvb-slider__val" }, `${value}${unit}`);
+  const node = el(
+    "div",
+    { class: "mvb-slider" },
+    el("span", { class: "mvb-slider__label" }, label),
+    input,
+    val
+  );
+  node.input = input;
+  node.value = () => parseFloat(input.value) || 0;
+  node.setVal = (text) => { val.textContent = text; };
+  return node;
+}
+
+export function mount(slot) {
+  const headingFont = selectInput(FONTS, { value: "Georgia, \"Times New Roman\", serif", "aria-label": "Heading font" });
+  const bodyFont = selectInput(FONTS, { value: "system-ui, sans-serif", "aria-label": "Body font" });
+  const headingSize = slider("Heading size", { min: 20, max: 72, step: 1, value: 40, unit: "px" });
+  const bodySize = slider("Body size", { min: 12, max: 24, step: 1, value: 16, unit: "px" });
+  const lineHeight = slider("Line height", { min: 1, max: 2, step: 0.05, value: 1.5, unit: "" });
+  let weight = 700;
+
+  const weightChips = chipRow(
+    [400, 500, 600, 700, 800].map((n) => ({ value: n, label: String(n) })),
+    { value: weight, label: "Heading weight", onChange: (value) => { weight = value; update(); } }
+  );
+
+  const heading = el("h2", { style: "margin:0 0 8px" }, "Heading sample");
+  const para = el("p", { style: "margin:0" }, "Body text sample. The quick brown fox jumps over the lazy dog.");
+  const sample = el("div", { class: "mvb-preview__sample" }, heading, para);
+  const code = output();
+
+  function css() {
+    const hs = headingSize.value();
+    const bs = bodySize.value();
+    const lh = lineHeight.value();
+    return `h1 {\n  font-family: ${headingFont.value};\n  font-size: ${hs}px;\n  font-weight: ${weight};\n}\nbody {\n  font-family: ${bodyFont.value};\n  font-size: ${bs}px;\n  line-height: ${lh};\n}`;
+  }
+
+  function update() {
+    heading.style.fontFamily = headingFont.value;
+    heading.style.fontSize = `${headingSize.value()}px`;
+    heading.style.fontWeight = String(weight);
+    para.style.fontFamily = bodyFont.value;
+    para.style.fontSize = `${bodySize.value()}px`;
+    para.style.lineHeight = String(lineHeight.value());
+    code.write(css());
+  }
+
+  headingFont.addEventListener("change", update);
+  bodyFont.addEventListener("change", update);
+  headingSize.input.addEventListener("input", () => { headingSize.setVal(`${headingSize.value()}px`); update(); });
+  bodySize.input.addEventListener("input", () => { bodySize.setVal(`${bodySize.value()}px`); update(); });
+  lineHeight.input.addEventListener("input", () => { lineHeight.setVal(`${lineHeight.value()}`); update(); });
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Heading font", headingFont), panel("Body font", bodyFont), headingSize, bodySize, lineHeight, panel("Heading weight", weightChips)),
+      stack(sample, code)
+    ),
+    foot: actions(copyButton(css, "Copy CSS", "fill")),
+  });
+  slot.append(card.node);
+  update();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/fraction-calculator.js

@@ -0,0 +1,130 @@
+// Fraction arithmetic, kept as a simplified fraction and a decimal.
+import { el, bench, stack, panel, numberInput, notice, copyButton, chipRow, actions, toolcard } from "../core.js";
+
+function gcd(a, b) {
+  a = Math.abs(a);
+  b = Math.abs(b);
+  while (b) {
+    const next = a % b;
+    a = b;
+    b = next;
+  }
+  return a;
+}
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 6 });
+}
+
+const kvRow = (key, value) =>
+  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+
+export function mount(slot) {
+  const n1 = numberInput({ value: "1", "aria-label": "First numerator" });
+  const d1 = numberInput({ value: "2", "aria-label": "First denominator" });
+  const n2 = numberInput({ value: "1", "aria-label": "Second numerator" });
+  const d2 = numberInput({ value: "3", "aria-label": "Second denominator" });
+  const resultRow = el("span", { class: "mvb-kv__v" }, "-");
+  const decimalRow = el("span", { class: "mvb-kv__v" }, "-");
+  const mixedRow = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el(
+    "div",
+    { class: "mvb-kv" },
+    kvRow("Fraction", resultRow),
+    kvRow("Decimal", decimalRow),
+    kvRow("Mixed number", mixedRow)
+  );
+  const error = notice("error");
+  let op = "+";
+  let text = "";
+
+  function clear() {
+    resultRow.textContent = "-";
+    decimalRow.textContent = "-";
+    mixedRow.textContent = "-";
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const A = Number(n1.value);
+    const B = Number(d1.value);
+    const C = Number(n2.value);
+    const D = Number(d2.value);
+    if ([n1, d1, n2, d2].some((input) => input.value.trim() === "") || ![A, B, C, D].every(Number.isFinite)) {
+      clear();
+      return;
+    }
+    if (B === 0 || D === 0) {
+      clear();
+      error.write("A denominator cannot be zero.");
+      return;
+    }
+    let num;
+    let den;
+    if (op === "+") { num = A * D + C * B; den = B * D; }
+    else if (op === "-") { num = A * D - C * B; den = B * D; }
+    else if (op === "x") { num = A * C; den = B * D; }
+    else {
+      if (C === 0) {
+        clear();
+        error.write("Cannot divide by a fraction with a zero numerator.");
+        return;
+      }
+      num = A * D;
+      den = B * C;
+    }
+    if (den < 0) { num = -num; den = -den; }
+    const divisor = gcd(num, den) || 1;
+    const simpleNum = num / divisor;
+    const simpleDen = den / divisor;
+    const fraction = simpleDen === 1 ? String(simpleNum) : `${simpleNum}/${simpleDen}`;
+    const decimal = num / den;
+    resultRow.textContent = fraction;
+    decimalRow.textContent = fmt(decimal);
+    const whole = Math.trunc(simpleNum / simpleDen);
+    const rest = Math.abs(simpleNum % simpleDen);
+    mixedRow.textContent = simpleDen !== 1 && Math.abs(simpleNum) > simpleDen && rest !== 0
+      ? `${whole} ${rest}/${simpleDen}`
+      : fraction;
+    text = fraction;
+  }
+
+  const chips = chipRow(
+    [
+      { value: "+", label: "+" },
+      { value: "-", label: "-" },
+      { value: "x", label: "x" },
+      { value: "/", label: "/" },
+    ],
+    {
+      value: op,
+      label: "Operation",
+      onChange: (value) => {
+        op = value;
+        run();
+      },
+    }
+  );
+
+  for (const input of [n1, d1, n2, d2]) input.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("First fraction", el("div", { class: "mvb-row" }, n1, d1)),
+        panel("Operation", chips),
+        panel("Second fraction", el("div", { class: "mvb-row" }, n2, d2)),
+        error
+      ),
+      stack(panel("Result", kv))
+    ),
+    foot: actions(copyButton(() => text, "Copy fraction", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };