mevebu 0.3.1 → 1.0.0

package/mevebu/libs/js/tools/mime-types.js

@@ -0,0 +1,54 @@
+// Reference for the common MIME types, filterable by extension or type.
+import { el, bench, stack, panel, textInput, copyButton, actions, toolcard } from "../core.js";
+
+const TYPES = [
+  ["html", "text/html", "Text"], ["htm", "text/html", "Text"], ["css", "text/css", "Text"], ["js", "text/javascript", "Text"], ["mjs", "text/javascript", "Text"], ["json", "application/json", "Data"], ["xml", "application/xml", "Data"], ["txt", "text/plain", "Text"], ["csv", "text/csv", "Data"], ["md", "text/markdown", "Text"], ["yaml", "application/yaml", "Data"], ["yml", "application/yaml", "Data"], ["webmanifest", "application/manifest+json", "Data"],
+  ["pdf", "application/pdf", "Document"], ["rtf", "application/rtf", "Document"], ["doc", "application/msword", "Document"], ["docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "Document"], ["xls", "application/vnd.ms-excel", "Document"], ["xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "Document"], ["ppt", "application/vnd.ms-powerpoint", "Document"], ["pptx", "application/vnd.openxmlformats-officedocument.presentationml.presentation", "Document"], ["epub", "application/epub+zip", "Document"],
+  ["zip", "application/zip", "Archive"], ["gz", "application/gzip", "Archive"], ["tar", "application/x-tar", "Archive"], ["rar", "application/vnd.rar", "Archive"], ["7z", "application/x-7z-compressed", "Archive"], ["jar", "application/java-archive", "Archive"], ["apk", "application/vnd.android.package-archive", "Archive"],
+  ["png", "image/png", "Image"], ["jpg", "image/jpeg", "Image"], ["jpeg", "image/jpeg", "Image"], ["gif", "image/gif", "Image"], ["webp", "image/webp", "Image"], ["svg", "image/svg+xml", "Image"], ["ico", "image/x-icon", "Image"], ["avif", "image/avif", "Image"], ["bmp", "image/bmp", "Image"], ["tiff", "image/tiff", "Image"],
+  ["mp3", "audio/mpeg", "Audio"], ["wav", "audio/wav", "Audio"], ["ogg", "audio/ogg", "Audio"], ["oga", "audio/ogg", "Audio"], ["m4a", "audio/mp4", "Audio"], ["flac", "audio/flac", "Audio"], ["aac", "audio/aac", "Audio"],
+  ["mp4", "video/mp4", "Video"], ["webm", "video/webm", "Video"], ["ogv", "video/ogg", "Video"], ["mov", "video/quicktime", "Video"], ["avi", "video/x-msvideo", "Video"], ["mkv", "video/x-matroska", "Video"],
+  ["woff", "font/woff", "Font"], ["woff2", "font/woff2", "Font"], ["ttf", "font/ttf", "Font"], ["otf", "font/otf", "Font"], ["eot", "application/vnd.ms-fontobject", "Font"],
+  ["wasm", "application/wasm", "Binary"], ["bin", "application/octet-stream", "Binary"],
+];
+
+export function mount(slot) {
+  const filter = textInput({ type: "search", placeholder: "Extension or type", "aria-label": "Filter" });
+  const scroll = el("div", { class: "mvb-scroll" });
+  let visible = TYPES;
+
+  function run() {
+    const query = filter.value.trim().toLowerCase();
+    visible = TYPES.filter(([ext, mime]) => !query || ext.includes(query) || mime.toLowerCase().includes(query));
+    if (!visible.length) {
+      scroll.replaceChildren(el("p", { class: "mvb-note" }, "No type matches."));
+      return;
+    }
+    scroll.replaceChildren(el(
+      "table",
+      { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Extension"), el("th", {}, "MIME type"), el("th", {}, "Kind"))),
+      el("tbody", {}, ...visible.map(([ext, mime, kind]) => el("tr", {},
+        el("td", {}, `.${ext}`),
+        el("td", {}, mime),
+        el("td", {}, kind)
+      )))
+    ));
+  }
+
+  filter.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Filter", filter)),
+      stack(panel("MIME types", scroll))
+    ),
+    foot: actions(copyButton(() => visible.map(([ext, mime]) => `.${ext} ${mime}`).join("\n"), "Copy list", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/mla-citation.js

@@ -0,0 +1,91 @@
+// Builds an MLA 9 works cited entry from source details.
+import { bench, stack, panel, textInput, selectInput, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+const TYPES = [
+  { value: "book", label: "Book" },
+  { value: "article", label: "Journal article" },
+  { value: "web", label: "Web page" },
+];
+
+const parts = (raw) => raw.split(";").map((item) => item.trim()).filter(Boolean);
+
+function flip(author) {
+  const bits = author.split(",").map((item) => item.trim());
+  return bits.length >= 2 ? `${bits[1]} ${bits[0]}` : author;
+}
+
+function authorList(raw) {
+  const list = parts(raw);
+  if (!list.length) return "";
+  if (list.length === 1) return list[0];
+  if (list.length === 2) return `${list[0]}, and ${flip(list[1])}`;
+  return `${list[0]}, et al.`;
+}
+
+export function mount(slot) {
+  const type = selectInput(TYPES, { value: "book", "aria-label": "Source type" });
+  const authors = textInput({ placeholder: "Smith, John; Doe, Jane", "aria-label": "Authors" });
+  const title = textInput({ placeholder: "Title of the work", "aria-label": "Title" });
+  const source = textInput({ placeholder: "Publisher, journal or site", "aria-label": "Source" });
+  const details = textInput({ placeholder: "Volume, issue, pages", "aria-label": "Details" });
+  const year = textInput({ placeholder: "2020", "aria-label": "Year" });
+  const link = textInput({ placeholder: "https://example.com", "aria-label": "URL" });
+
+  const entry = output({ rows: 6 });
+  const note = notice("note");
+  note.write("Check the details against the source and the MLA 9 guide.");
+  let refText = "";
+
+  function build() {
+    const pieces = [];
+    const au = authorList(authors.value);
+    if (au) pieces.push(`${au}.`);
+    const ti = title.value.trim();
+    const src = source.value.trim();
+    const det = details.value.trim();
+    const yr = year.value.trim();
+    const url = link.value.trim();
+
+    if (type.value === "book") {
+      if (ti) pieces.push(`${ti}.`);
+      const tail = [src, yr].filter(Boolean).join(", ");
+      if (tail) pieces.push(`${tail}.`);
+    } else if (type.value === "article") {
+      if (ti) pieces.push(`"${ti}."`);
+      const tail = [src, det, yr].filter(Boolean).join(", ");
+      if (tail) pieces.push(`${tail}.`);
+    } else {
+      if (ti) pieces.push(`"${ti}."`);
+      const tail = [src, yr, url].filter(Boolean).join(", ");
+      if (tail) pieces.push(`${tail}.`);
+    }
+    refText = pieces.join(" ");
+    entry.write(refText);
+  }
+
+  for (const input of [authors, title, source, details, year, link]) input.addEventListener("input", build);
+  type.addEventListener("change", build);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Source type", type),
+        panel("Authors", authors),
+        panel("Title", title),
+        panel("Source", source),
+        panel("Details", details),
+        panel("Year", year),
+        panel("URL", link),
+        note
+      ),
+      stack(panel("Works cited entry", entry))
+    ),
+    foot: actions(copyButton(() => refText, "Copy entry", "fill")),
+  });
+  slot.append(card.node);
+  build();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/number-base-converter.js

@@ -0,0 +1,97 @@
+// Converts a number between binary, octal, decimal and hexadecimal.
+import { el, bench, stack, panel, textInput, notice, copyButton, chipRow, actions, toolcard } from "../core.js";
+
+const BASES = [
+  { value: "2", label: "Binary" },
+  { value: "8", label: "Octal" },
+  { value: "10", label: "Decimal" },
+  { value: "16", label: "Hex" },
+];
+
+const PATTERNS = { 2: /^[01]+$/, 8: /^[0-7]+$/, 10: /^[0-9]+$/, 16: /^[0-9a-f]+$/ };
+const PREFIX = { 2: "0b", 8: "0o", 10: "", 16: "0x" };
+
+function parseInBase(text, base) {
+  let clean = text.trim().toLowerCase().replace(/[\s_]/g, "");
+  if (!clean) return null;
+  let sign = 1n;
+  if (clean.startsWith("-")) { sign = -1n; clean = clean.slice(1); }
+  else if (clean.startsWith("+")) clean = clean.slice(1);
+  clean = clean.replace(/^0[bxo]/, "");
+  if (!PATTERNS[base].test(clean)) return null;
+  return sign * BigInt(PREFIX[base] + clean);
+}
+
+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 source = textInput({ value: "255", "aria-label": "Number", placeholder: "255" });
+  const binary = el("span", { class: "mvb-kv__v" }, "-");
+  const octal = el("span", { class: "mvb-kv__v" }, "-");
+  const decimal = el("span", { class: "mvb-kv__v" }, "-");
+  const hex = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el(
+    "div",
+    { class: "mvb-kv" },
+    kvRow("Binary", binary),
+    kvRow("Octal", octal),
+    kvRow("Decimal", decimal),
+    kvRow("Hex", hex)
+  );
+  const error = notice("error");
+  let base = "10";
+  let text = "";
+
+  function clear() {
+    binary.textContent = "-";
+    octal.textContent = "-";
+    decimal.textContent = "-";
+    hex.textContent = "-";
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      clear();
+      return;
+    }
+    const value = parseInBase(source.value, base);
+    if (value === null) {
+      clear();
+      error.write(`That is not a valid ${BASES.find((entry) => entry.value === base).label.toLowerCase()} number.`);
+      return;
+    }
+    binary.textContent = value.toString(2);
+    octal.textContent = value.toString(8);
+    decimal.textContent = value.toString(10);
+    hex.textContent = value.toString(16).toUpperCase();
+    text = `Binary ${value.toString(2)}\nOctal ${value.toString(8)}\nDecimal ${value.toString(10)}\nHex ${value.toString(16).toUpperCase()}`;
+  }
+
+  const chips = chipRow(BASES, {
+    value: base,
+    label: "Input base",
+    onChange: (value) => {
+      base = value;
+      run();
+    },
+  });
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Number", source), panel("Input base", chips), error),
+      stack(panel("In every base", kv))
+    ),
+    foot: actions(copyButton(() => text, "Copy all", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/open-graph.js

@@ -0,0 +1,62 @@
+// Builds Open Graph and Twitter card tags from a page title, description,
+// address, image and type.
+import { bench, stack, panel, textInput, textArea, selectInput, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+const esc = (value) =>
+  String(value).replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[char]));
+
+export function mount(slot) {
+  const title = textInput({ value: "mevebu", "aria-label": "Title" });
+  const description = textArea({ rows: 3, value: "Small privacy first tools that run entirely in the browser.", "aria-label": "Description" });
+  const url = textInput({ value: "https://example.com", "aria-label": "URL" });
+  const image = textInput({ value: "https://example.com/card.png", "aria-label": "Image URL" });
+  const site = textInput({ value: "mevebu", "aria-label": "Site name" });
+  const type = selectInput(["website", "article", "product", "profile"], { value: "website", "aria-label": "Type" });
+  const result = output({ rows: 12 });
+  const note = notice("note");
+
+  function build() {
+    const lines = [];
+    const t = title.value.trim();
+    const d = description.value.trim();
+    const u = url.value.trim();
+    const img = image.value.trim();
+    const s = site.value.trim();
+    if (t) lines.push(`<meta property="og:title" content="${esc(t)}" />`);
+    if (d) lines.push(`<meta property="og:description" content="${esc(d)}" />`);
+    lines.push(`<meta property="og:type" content="${esc(type.value)}" />`);
+    if (u) lines.push(`<meta property="og:url" content="${esc(u)}" />`);
+    if (img) lines.push(`<meta property="og:image" content="${esc(img)}" />`);
+    if (s) lines.push(`<meta property="og:site_name" content="${esc(s)}" />`);
+    lines.push(`<meta name="twitter:card" content="${img ? "summary_large_image" : "summary"}" />`);
+    if (t) lines.push(`<meta name="twitter:title" content="${esc(t)}" />`);
+    if (d) lines.push(`<meta name="twitter:description" content="${esc(d)}" />`);
+    if (img) lines.push(`<meta name="twitter:image" content="${esc(img)}" />`);
+    result.write(lines.join("\n"));
+    note.write("Platforms read different tags, so previews vary.");
+  }
+
+  for (const input of [title, description, url, image, site]) input.addEventListener("input", build);
+  type.addEventListener("change", build);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Title", title),
+        panel("Description", description),
+        panel("URL", url),
+        panel("Image URL", image),
+        panel("Site name", site),
+        panel("Type", type)
+      ),
+      stack(panel("Open Graph tags", result), note)
+    ),
+    foot: actions(copyButton(() => result.textContent, "Copy tags", "fill")),
+  });
+  slot.append(card.node);
+  build();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/password-strength.js

@@ -0,0 +1,118 @@
+// Estimates password strength from length and patterns, all in this tab.
+import { el, icon, passwordInput, button, bench, stack, panel, notice, copyButton, actions, toolcard } from "../core.js";
+
+const COMMON = new Set([
+  "password", "123456", "123456789", "qwerty", "letmein", "admin", "welcome",
+  "iloveyou", "monkey", "dragon", "abc123", "111111", "000000", "passw0rd",
+]);
+
+const GROUPS = [
+  { test: (value) => /[a-z]/.test(value) },
+  { test: (value) => /[A-Z]/.test(value) },
+  { test: (value) => /[0-9]/.test(value) },
+  { test: (value) => /[^A-Za-z0-9]/.test(value) },
+];
+
+const LEVELS = [
+  { name: "very weak", cls: "mvb-weak" },
+  { name: "weak", cls: "mvb-weak" },
+  { name: "fair", cls: "mvb-ok" },
+  { name: "good", cls: "mvb-ok" },
+  { name: "strong", cls: "mvb-strong" },
+  { name: "very strong", cls: "mvb-strong" },
+];
+
+function analyze(value) {
+  const length = value.length;
+  const groups = GROUPS.filter((group) => group.test(value)).length;
+  let score = 0;
+  if (length >= 8) score += 1;
+  if (length >= 12) score += 1;
+  if (length >= 16) score += 1;
+  if (groups >= 3) score += 1;
+  if (length >= 20 && groups === 4) score += 1;
+
+  const hints = [];
+  if (length < 12) hints.push("Use at least 12 characters.");
+  if (groups < 3) hints.push("Mix upper case, lower case, digits and symbols.");
+  if (/(.)\1{2,}/.test(value)) {
+    score -= 1;
+    hints.push("Repeated characters are easy to guess.");
+  }
+  if (COMMON.has(value.toLowerCase())) {
+    score = 0;
+    hints.unshift("This is one of the most common passwords.");
+  }
+  return { score: Math.max(0, Math.min(5, score)), groups, length, hints };
+}
+
+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 field = passwordInput({ autocomplete: "off", "aria-label": "Password", placeholder: "Type a password" });
+  const showButton = button("Show", { icon: "eye" });
+  const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Strength" }, el("div", { class: "mvb-meter__fill" }));
+  const label = el("p", { class: "note" });
+  const lengthValue = el("span", { class: "mvb-kv__v" }, "-");
+  const groupsValue = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el("div", { class: "mvb-kv" }, kvRow("Length", lengthValue), kvRow("Character groups", groupsValue));
+  const hints = el("div", { class: "mvb-stack" });
+  const status = notice("note");
+  let report = "";
+
+  showButton.addEventListener("click", () => {
+    const visible = field.type === "text";
+    field.type = visible ? "password" : "text";
+    showButton.replaceChildren(icon(visible ? "eye" : "eye-off"), el("span", {}, visible ? "Show" : "Hide"));
+  });
+
+  function run() {
+    const value = field.value;
+    const fill = meter.querySelector(".mvb-meter__fill");
+    hints.replaceChildren();
+    if (!value) {
+      fill.style.width = "0%";
+      fill.className = "mvb-meter__fill";
+      label.textContent = "";
+      lengthValue.textContent = "-";
+      groupsValue.textContent = "-";
+      status.write("");
+      report = "";
+      return;
+    }
+    const { score, groups, length, hints: why } = analyze(value);
+    const level = LEVELS[score];
+    fill.style.width = `${(score / 5) * 100}%`;
+    fill.className = `mvb-meter__fill ${level.cls}`;
+    label.textContent = `${level.name} by length and patterns.`;
+    lengthValue.textContent = `${length} characters`;
+    groupsValue.textContent = `${groups} of 4`;
+    for (const text of why) {
+      const node = notice("note");
+      node.write(text);
+      hints.append(node);
+    }
+    status.write("A score is not a guarantee. Length and randomness matter most.");
+    report = [`Strength: ${level.name}`, `Length: ${length}`, `Character groups: ${groups} of 4`, ...why].join("\n");
+  }
+
+  field.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Password", el("div", { class: "mvb-secret" }, field, showButton)),
+        el("p", { class: "mvb-note" }, "The check runs in this tab. Do not type a real password into a site you do not trust.")
+      ),
+      stack(meter, label, kv, hints, status)
+    ),
+    foot: actions(copyButton(() => report, "Copy report", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/percent-to-fraction.js

@@ -0,0 +1,96 @@
+// Turns a percent into a simplified fraction, with the decimal and mixed form.
+import { el, bench, stack, panel, textInput, notice, copyButton, 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: 10 });
+}
+
+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 source = textInput({ value: "12.5", "aria-label": "Percent", placeholder: "12.5" });
+  const fraction = el("span", { class: "mvb-kv__v" }, "-");
+  const decimal = el("span", { class: "mvb-kv__v" }, "-");
+  const mixed = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el(
+    "div",
+    { class: "mvb-kv" },
+    kvRow("Fraction", fraction),
+    kvRow("Decimal", decimal),
+    kvRow("Mixed number", mixed)
+  );
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    fraction.textContent = "-";
+    decimal.textContent = "-";
+    mixed.textContent = "-";
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const raw = source.value.trim();
+    if (!raw) {
+      clear();
+      return;
+    }
+    if (!/^[+-]?\d*\.?\d+$/.test(raw)) {
+      clear();
+      error.write("Enter a percent, for example 12.5.");
+      return;
+    }
+    const negative = raw.startsWith("-");
+    const clean = raw.replace(/^[+-]/, "");
+    const [whole, decimals = ""] = clean.split(".");
+    const numerator = Number(whole + decimals);
+    const denominator = 100 * 10 ** decimals.length;
+    if (!Number.isFinite(numerator)) {
+      clear();
+      error.write("That percent is too large to convert exactly.");
+      return;
+    }
+    const divisor = gcd(numerator, denominator) || 1;
+    let simpleNum = numerator / divisor;
+    const simpleDen = denominator / divisor;
+    if (negative) simpleNum = -simpleNum;
+    const fractionText = simpleDen === 1 ? String(simpleNum) : `${simpleNum}/${simpleDen}`;
+    fraction.textContent = fractionText;
+    decimal.textContent = fmt(simpleNum / simpleDen);
+    const wholePart = Math.trunc(simpleNum / simpleDen);
+    const rest = Math.abs(simpleNum % simpleDen);
+    mixed.textContent = simpleDen !== 1 && Math.abs(simpleNum) > simpleDen && rest !== 0
+      ? `${wholePart} ${rest}/${simpleDen}`
+      : fractionText;
+    text = fractionText;
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Percent", source), error),
+      stack(panel("Result", kv))
+    ),
+    foot: actions(copyButton(() => text, "Copy fraction", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,86 @@
+// A percent of a value, or what percent one value is of another.
+import { el, bench, stack, panel, numberInput, notice, copyButton, chipRow, actions, toolcard } from "../core.js";
+
+function fmt(n) {
+  if (!Number.isFinite(n)) return "";
+  return n.toLocaleString(undefined, { maximumFractionDigits: 6 });
+}
+
+export function mount(slot) {
+  const modes = [
+    { value: "of", label: "Percent of a value" },
+    { value: "is", label: "Value as a percent" },
+  ];
+  const labelA = el("span", {}, "Percent");
+  const labelB = el("span", {}, "Value");
+  const a = numberInput({ value: "15", "aria-label": "First value" });
+  const b = numberInput({ value: "200", "aria-label": "Second value" });
+  const result = el("span", { class: "mvb-stat__v" }, "-");
+  const stats = el(
+    "div",
+    { class: "mvb-stats" },
+    el("div", { class: "mvb-stat" }, result, el("span", { class: "mvb-stat__k" }, "Result"))
+  );
+  const error = notice("error");
+  let mode = "of";
+  let text = "";
+
+  function run() {
+    error.write("");
+    const x = Number(a.value);
+    const y = Number(b.value);
+    if (a.value.trim() === "" || b.value.trim() === "" || !Number.isFinite(x) || !Number.isFinite(y)) {
+      result.textContent = "-";
+      text = "";
+      return;
+    }
+    if (mode === "of") {
+      const value = (x / 100) * y;
+      result.textContent = fmt(value);
+      text = `${fmt(x)}% of ${fmt(y)} is ${fmt(value)}`;
+      return;
+    }
+    if (y === 0) {
+      result.textContent = "-";
+      text = "";
+      error.write("The total cannot be zero.");
+      return;
+    }
+    const value = (x / y) * 100;
+    result.textContent = `${fmt(value)}%`;
+    text = `${fmt(x)} is ${fmt(value)}% of ${fmt(y)}`;
+  }
+
+  function relabel() {
+    labelA.textContent = mode === "of" ? "Percent" : "Value";
+    labelB.textContent = mode === "of" ? "Value" : "Total";
+  }
+
+  const chips = chipRow(modes, {
+    value: mode,
+    label: "Mode",
+    onChange: (value) => {
+      mode = value;
+      relabel();
+      run();
+    },
+  });
+
+  a.addEventListener("input", run);
+  b.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Mode", chips), panel(labelA, a), panel(labelB, b), error),
+      stack(stats)
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  relabel();
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/percentage-change.js

@@ -0,0 +1,70 @@
+// Percent change between two values, with the direction and the difference.
+import { el, bench, stack, panel, numberInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 6 });
+}
+
+function tile(label) {
+  const value = el("span", { class: "mvb-stat__v" }, "-");
+  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  node.set = (text) => { value.textContent = text; };
+  return node;
+}
+
+export function mount(slot) {
+  const start = numberInput({ value: "80", "aria-label": "Starting value" });
+  const end = numberInput({ value: "100", "aria-label": "Ending value" });
+  const change = tile("Change");
+  const difference = tile("Difference");
+  const direction = tile("Direction");
+  const stats = el("div", { class: "mvb-stats" }, change, difference, direction);
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    change.set("-");
+    difference.set("-");
+    direction.set("-");
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const a = Number(start.value);
+    const b = Number(end.value);
+    if (start.value.trim() === "" || end.value.trim() === "" || !Number.isFinite(a) || !Number.isFinite(b)) {
+      clear();
+      return;
+    }
+    if (a === 0) {
+      clear();
+      error.write("The starting value cannot be zero.");
+      return;
+    }
+    const diff = b - a;
+    const pct = (diff / Math.abs(a)) * 100;
+    const label = pct > 0 ? "Increase" : pct < 0 ? "Decrease" : "No change";
+    change.set(`${fmt(pct)}%`);
+    difference.set(fmt(diff));
+    direction.set(label);
+    text = `${fmt(a)} to ${fmt(b)}: ${label.toLowerCase()} of ${fmt(Math.abs(pct))}%, difference ${fmt(diff)}`;
+  }
+
+  start.addEventListener("input", run);
+  end.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Starting value", start), panel("Ending value", end), error),
+      stack(stats)
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };