mevebu 0.3.0 → 0.4.0

package/mevebu/libs/js/tools/selling-price.js

@@ -0,0 +1,74 @@
+// Sets a selling price from a cost and a target margin or markup.
+import { el, bench, stack, panel, numberInput, chipRow, notice, copyButton, actions, toolcard } from "../core.js";
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 2 });
+}
+
+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 cost = numberInput({ value: "40", min: "0", "aria-label": "Cost per unit" });
+  const percent = numberInput({ value: "40", "aria-label": "Target percent" });
+  let mode = "margin";
+  const chips = chipRow(
+    [{ value: "margin", label: "Margin" }, { value: "markup", label: "Markup" }],
+    { value: "margin", label: "Target", onChange: (next) => { mode = next; run(); } }
+  );
+  const price = tile("Selling price");
+  const profit = tile("Profit");
+  const stats = el("div", { class: "mvb-stats" }, price, profit);
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    price.set("-");
+    profit.set("-");
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const c = Number(cost.value);
+    const p = Number(percent.value);
+    if (cost.value.trim() === "" || percent.value.trim() === "" || !Number.isFinite(c) || !Number.isFinite(p)) {
+      clear();
+      return;
+    }
+    if (c < 0) { clear(); error.write("The cost cannot be negative."); return; }
+    let selling;
+    if (mode === "markup") {
+      if (p < -100) { clear(); error.write("The markup cannot drop below -100%."); return; }
+      selling = c * (1 + p / 100);
+    } else {
+      if (p >= 100) { clear(); error.write("A margin must be below 100%."); return; }
+      selling = c / (1 - p / 100);
+    }
+    const gain = selling - c;
+    price.set(fmt(selling));
+    profit.set(fmt(gain));
+    text = `Selling price ${fmt(selling)}, profit ${fmt(gain)}`;
+  }
+
+  cost.addEventListener("input", run);
+  percent.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Cost per unit", cost), panel("Target", chips), panel("Percent", percent), error),
+      stack(stats)
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/semver-helper.js

@@ -0,0 +1,54 @@
+// Bumps a semantic version by major, minor or patch, with an optional prerelease tag.
+import { bench, stack, panel, textInput, chipRow, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+const BUMPS = [
+  { value: "major", label: "Major" },
+  { value: "minor", label: "Minor" },
+  { value: "patch", label: "Patch" },
+];
+
+export function mount(slot) {
+  const version = textInput({ value: "1.2.3", class: "mvb-in mvb-in--mono", "aria-label": "Current version" });
+  const prerelease = textInput({ value: "", placeholder: "rc.1", "aria-label": "Prerelease tag" });
+  const error = notice("error");
+  const out = output({ rows: 1 });
+  let bump = "patch";
+  let text = "";
+
+  const chips = chipRow(BUMPS, { value: bump, label: "Bump", onChange: (value) => { bump = value; run(); } });
+
+  function run() {
+    error.write("");
+    const match = /^v?(\d+)\.(\d+)\.(\d+)$/.exec(version.value.trim());
+    if (!match) {
+      text = "";
+      out.write("");
+      error.write("Enter a version like 1.2.3.");
+      return;
+    }
+    let [major, minor, patch] = match.slice(1).map(Number);
+    if (bump === "major") { major += 1; minor = 0; patch = 0; }
+    else if (bump === "minor") { minor += 1; patch = 0; }
+    else patch += 1;
+    const tag = prerelease.value.trim().replace(/^-/, "");
+    text = `${major}.${minor}.${patch}${tag ? `-${tag}` : ""}`;
+    out.write(text);
+  }
+
+  version.addEventListener("input", run);
+  prerelease.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Current version", version), panel("Bump", chips), panel("Prerelease", prerelease), error),
+      stack(panel("New version", out))
+    ),
+    foot: actions(copyButton(() => text, "Copy version", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/sentence-length.js

@@ -0,0 +1,80 @@
+// Word counts per sentence, with a threshold that flags the long ones.
+import { el, blank, bench, stack, panel, textArea, numberInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+const splitSentences = (text) => text.trim()
+  ? text.trim().split(/[.!?\u2026]+/).map((part) => part.trim()).filter(Boolean)
+  : [];
+
+const countWords = (text) => text.trim() ? text.trim().split(/\s+/).length : 0;
+
+function tile(label) {
+  const value = el("span", { class: "mvb-stat__v" }, "0");
+  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  node.set = (text) => { value.textContent = text; };
+  return node;
+}
+
+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 = textArea({ rows: 12, "aria-label": "Text", placeholder: "Type or paste text" });
+  const threshold = numberInput({ min: "1", max: "120", value: "25", "aria-label": "Long sentence threshold in words" });
+
+  const sentencesTile = tile("Sentences");
+  const shortestTile = tile("Shortest");
+  const longestTile = tile("Longest");
+  const averageTile = tile("Average");
+  const stats = el("div", { class: "mvb-stats" }, sentencesTile, shortestTile, longestTile, averageTile);
+
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const note = notice("note");
+
+  let longText = "";
+
+  function run() {
+    const sentences = splitSentences(source.value);
+    const limit = Math.max(1, parseInt(threshold.value, 10) || 25);
+    const lengths = sentences.map((sentence) => countWords(sentence));
+
+    sentencesTile.set(String(sentences.length));
+    if (lengths.length) {
+      shortestTile.set(String(Math.min(...lengths)));
+      longestTile.set(String(Math.max(...lengths)));
+      averageTile.set((lengths.reduce((sum, value) => sum + value, 0) / lengths.length).toFixed(1));
+    } else {
+      shortestTile.set("0");
+      longestTile.set("0");
+      averageTile.set("0");
+    }
+
+    const long = sentences.filter((sentence) => countWords(sentence) > limit);
+    longText = long.map((sentence) => `${countWords(sentence)} words  ${sentence}`).join("\n");
+    note.write(long.length ? `${long.length} sentences run past ${limit} words.` : "");
+
+    if (!long.length) {
+      listWrap.replaceChildren(blank("text-align-start", "No sentence runs past the threshold."));
+    } else {
+      listWrap.replaceChildren(el("div", { class: "mvb-kv" },
+        ...long.map((sentence) => kvRow(`${countWords(sentence)} words`, sentence))));
+    }
+  }
+
+  source.addEventListener("input", run);
+  threshold.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text", source), panel("Flag past", threshold, "Words")),
+      stack(stats, note, panel("Long sentences", listWrap))
+    ),
+    foot: actions(copyButton(() => longText, "Copy long sentences", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/sequence-analyzer.js

@@ -0,0 +1,90 @@
+// Looks for arithmetic, geometric and quadratic patterns in a number series.
+import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+
+function fmt(n) {
+  return Number.isFinite(n) ? n.toLocaleString(undefined, { maximumFractionDigits: 6 }) : "-";
+}
+
+function parseNumbers(text) {
+  const tokens = text.split(/[\s,;]+/).filter(Boolean);
+  const nums = tokens.map(Number);
+  return { nums, invalid: nums.some((n) => !Number.isFinite(n)) };
+}
+
+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 = textArea({ rows: 6, value: "2, 5, 8, 11", "aria-label": "Numbers", placeholder: "2, 5, 8, 11" });
+  const error = notice("error");
+
+  const terms = el("span", { class: "mvb-kv__v" }, "-");
+  const differences = el("span", { class: "mvb-kv__v" }, "-");
+  const pattern = el("span", { class: "mvb-kv__v" }, "-");
+  const next = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el("div", { class: "mvb-kv" },
+    kvRow("Terms", terms),
+    kvRow("Differences", differences),
+    kvRow("Pattern", pattern),
+    kvRow("Next term", next));
+  let text = "";
+
+  function clear() {
+    terms.textContent = "-";
+    differences.textContent = "-";
+    pattern.textContent = "-";
+    next.textContent = "-";
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const { nums, invalid } = parseNumbers(source.value);
+    if (!source.value.trim()) { clear(); return; }
+    if (invalid) { clear(); error.write("Use numbers only, separated by spaces, commas or new lines."); return; }
+    if (nums.length < 2) { clear(); error.write("Add at least two numbers."); return; }
+
+    const diffs = nums.slice(1).map((n, i) => n - nums[i]);
+    const ratios = nums.slice(1).map((n, i) => (nums[i] === 0 ? NaN : n / nums[i]));
+    const second = diffs.slice(1).map((n, i) => n - diffs[i]);
+
+    const same = (list) => list.length > 0 && list.every((value) => Math.abs(value - list[0]) < 1e-9);
+    const sameRatio = ratios.length > 0 && ratios.every((value) => Number.isFinite(value) && Math.abs(value - ratios[0]) < 1e-9);
+
+    let name = "No simple pattern";
+    let nextTerm = NaN;
+
+    if (same(diffs)) {
+      name = `Arithmetic, step ${fmt(diffs[0])}`;
+      nextTerm = nums[nums.length - 1] + diffs[0];
+    } else if (sameRatio && ratios[0] !== 1) {
+      name = `Geometric, ratio ${fmt(ratios[0])}`;
+      nextTerm = nums[nums.length - 1] * ratios[0];
+    } else if (same(second)) {
+      name = "Quadratic, constant second difference";
+      nextTerm = nums[nums.length - 1] + diffs[diffs.length - 1] + second[0];
+    }
+
+    terms.textContent = String(nums.length);
+    differences.textContent = diffs.map(fmt).join(", ");
+    pattern.textContent = name;
+    next.textContent = fmt(nextTerm);
+    text = `Pattern ${name}, next term ${Number.isFinite(nextTerm) ? fmt(nextTerm) : "unknown"}`;
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Numbers", source), error),
+      stack(panel("Analysis", kv))
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/sitemap-xml.js

@@ -0,0 +1,82 @@
+// Builds a sitemap.xml from a site address and one page path or URL per line.
+import { bench, stack, panel, textInput, textArea, selectInput, numberInput, output, notice, copyButton, downloadButton, 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 base = textInput({ value: "https://example.com", "aria-label": "Base URL" });
+  const pages = textArea({ rows: 8, class: "mvb-in mvb-in--area mvb-in--mono", value: "/\n/about", placeholder: "/\n/about\n/blog", "aria-label": "Pages" });
+  const freq = selectInput(["always", "hourly", "daily", "weekly", "monthly", "yearly", "never"], { value: "weekly", "aria-label": "Change frequency" });
+  const priority = numberInput({ value: "0.8", min: "0", max: "1", step: "0.1", "aria-label": "Priority" });
+  const result = output({ rows: 14 });
+  const error = notice("error");
+
+  function build() {
+    error.write("");
+    const site = base.value.trim().replace(/\/+$/, "");
+    if (!site || !isUrl(site)) {
+      error.write("Enter a valid site address, for example https://example.com.");
+      result.write("");
+      return;
+    }
+    const paths = pages.value.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
+    if (!paths.length) {
+      result.write("");
+      return;
+    }
+    const today = new Date().toISOString().slice(0, 10);
+    const entries = paths.map((path) => {
+      const loc = /^https?:\/\//i.test(path) ? path : `${site}${path.startsWith("/") ? "" : "/"}${path}`;
+      return [
+        "  <url>",
+        `    <loc>${esc(loc)}</loc>`,
+        `    <lastmod>${today}</lastmod>`,
+        `    <changefreq>${esc(freq.value)}</changefreq>`,
+        `    <priority>${esc(priority.value || "0.5")}</priority>`,
+        "  </url>",
+      ].join("\n");
+    });
+    result.write([
+      '<?xml version="1.0" encoding="UTF-8"?>',
+      '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
+      ...entries,
+      "</urlset>",
+    ].join("\n"));
+  }
+
+  for (const input of [base, pages, priority]) input.addEventListener("input", build);
+  freq.addEventListener("change", build);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Base URL", base),
+        panel("Pages", pages),
+        panel("Change frequency", freq),
+        panel("Priority", priority),
+        error
+      ),
+      stack(panel("sitemap.xml", result))
+    ),
+    foot: actions(
+      downloadButton(() => result.textContent, "sitemap.xml", "Save XML", "application/xml"),
+      copyButton(() => result.textContent, "Copy XML", "fill")
+    ),
+  });
+  slot.append(card.node);
+  build();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/slug-converter.js

@@ -0,0 +1,48 @@
+// Turns a title into a URL slug: lowercase, punctuation removed, words joined
+// by the chosen separator.
+import { bench, stack, panel, textInput, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+function slugify(text, sep) {
+  const base = text
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return sep === "-" ? base : base.replace(/-/g, sep);
+}
+
+export function mount(slot) {
+  const source = textInput({ value: "Hello mevebu world", placeholder: "Title", "aria-label": "Title" });
+  const result = textInput({ readonly: true, class: "mvb-in mvb-in--mono", "aria-label": "Slug" });
+
+  let sep = "-";
+  const chips = chipRow(
+    [
+      { value: "-", label: "Hyphen" },
+      { value: "_", label: "Underscore" },
+      { value: ".", label: "Dot" },
+    ],
+    { value: "-", label: "Separator", onChange: (value) => { sep = value; run(); } }
+  );
+
+  function run() {
+    result.value = slugify(source.value, sep);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Title", source), panel("Separator", chips)),
+      stack(panel("Slug", result))
+    ),
+    foot: actions(copyButton(() => result.value, "Copy slug", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/slug-preview.js

@@ -0,0 +1,83 @@
+// Turns a title into a slug and shows the full address and the slug length.
+import { el, bench, stack, panel, textInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+const isUrl = (value) => {
+  try {
+    new URL(value);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+function slugify(text) {
+  return text
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+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 title = textInput({ value: "Best running shoes", "aria-label": "Title" });
+  const base = textInput({ value: "https://example.com", "aria-label": "Base URL" });
+  const error = notice("error");
+
+  const slugValue = el("span", { class: "mvb-kv__v" }, "-");
+  const urlValue = el("span", { class: "mvb-kv__v" }, "-");
+  const lengthValue = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el(
+    "div",
+    { class: "mvb-kv" },
+    kvRow("Slug", slugValue),
+    kvRow("URL", urlValue),
+    kvRow("Length", lengthValue)
+  );
+
+  function run() {
+    error.write("");
+    const slug = slugify(title.value);
+    slugValue.textContent = slug || "-";
+    lengthValue.textContent = String(slug.length);
+
+    const site = base.value.trim().replace(/\/+$/, "");
+    if (!slug) {
+      urlValue.textContent = "-";
+      return;
+    }
+    if (!site) {
+      urlValue.textContent = slug;
+      return;
+    }
+    if (!isUrl(site)) {
+      error.write("The base URL is not valid.");
+      urlValue.textContent = "-";
+      return;
+    }
+    urlValue.textContent = `${site}/${slug}`;
+  }
+
+  title.addEventListener("input", run);
+  base.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Title", title), panel("Base URL", base), error),
+      stack(panel("Preview", kv))
+    ),
+    foot: actions(
+      copyButton(() => urlValue.textContent === "-" ? "" : urlValue.textContent, "Copy URL"),
+      copyButton(() => slugValue.textContent === "-" ? "" : slugValue.textContent, "Copy slug", "fill")
+    ),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/sort-lines.js

@@ -0,0 +1,54 @@
+// Sorts a list of lines alphabetically or numerically, either direction.
+import { bench, stack, panel, textArea, chipRow, toggleRow, copyButton, actions, toolcard } from "../core.js";
+
+export function mount(slot) {
+  const source = textArea({ rows: 12, "aria-label": "Text", placeholder: "Paste your list, one entry per line" });
+  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+
+  let direction = "asc";
+  const dirChips = chipRow(
+    [{ value: "asc", label: "A to Z" }, { value: "desc", label: "Z to A" }],
+    { value: "asc", label: "Direction", onChange: (value) => { direction = value; run(); } }
+  );
+  const options = toggleRow([
+    { value: "ignore", label: "Ignore case", checked: false },
+    { value: "numeric", label: "Numeric", checked: false },
+  ]);
+
+  function run() {
+    const text = source.value;
+    if (!text) { result.value = ""; return; }
+    const opts = options.values();
+    const ignore = opts.includes("ignore");
+    const numeric = opts.includes("numeric");
+    const collator = new Intl.Collator(undefined, { numeric, sensitivity: ignore ? "base" : "variant" });
+    const lines = text.split("\n");
+    lines.sort((a, b) => {
+      if (numeric) {
+        const na = parseFloat(a);
+        const nb = parseFloat(b);
+        if (!Number.isNaN(na) && !Number.isNaN(nb) && na !== nb) return na - nb;
+      }
+      return collator.compare(a, b);
+    });
+    if (direction === "desc") lines.reverse();
+    result.value = lines.join("\n");
+  }
+
+  source.addEventListener("input", run);
+  options.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Direction", dirChips), options),
+      stack(panel("Result", result))
+    ),
+    foot: actions(copyButton(() => result.value, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/speed-converter.js

@@ -0,0 +1,83 @@
+// Converts a speed between metric, imperial and nautical units.
+import { el, bench, stack, panel, numberInput, selectInput, notice, copyButton, button, actions, toolcard } from "../core.js";
+
+const UNITS = [
+  { value: "mps", label: "Meter per second", factor: 1 },
+  { value: "kmh", label: "Kilometer per hour", factor: 0.2777777777777778 },
+  { value: "mph", label: "Mile per hour", factor: 0.44704 },
+  { value: "fps", label: "Foot per second", factor: 0.3048 },
+  { value: "kn", label: "Knot", factor: 0.5144444444444445 },
+];
+
+const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
+const options = UNITS.map(({ value, label }) => ({ value, label }));
+
+function fmt(value) {
+  if (!Number.isFinite(value)) return "-";
+  if (value === 0) return "0";
+  const abs = Math.abs(value);
+  if (abs >= 1e-6 && abs < 1e15) return String(Number(value.toPrecision(8)));
+  return value.toExponential(4);
+}
+
+export function mount(slot) {
+  const value = numberInput({ value: "1", step: "any", "aria-label": "Value" });
+  const from = selectInput(options, { value: "kmh", "aria-label": "From unit" });
+  const to = selectInput(options, { value: "mph", "aria-label": "To unit" });
+  const result = el("span", { class: "mvb-stat__v" }, "-");
+  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "Result"), result));
+  const factor = el("p", { class: "mvb-note" });
+  const error = notice("error");
+  const scroll = el("div", { class: "mvb-scroll" });
+  let text = "";
+
+  function run() {
+    error.write("");
+    const raw = value.value.trim();
+    const n = Number(raw);
+    if (!raw || !Number.isFinite(n)) {
+      result.textContent = "-";
+      factor.textContent = "";
+      scroll.replaceChildren();
+      text = "";
+      error.write("Enter a number.");
+      return;
+    }
+    const a = byId[from.value];
+    const b = byId[to.value];
+    const out = (n * a.factor) / b.factor;
+    result.textContent = `${fmt(out)} ${b.value}`;
+    factor.textContent = `1 ${a.value} = ${fmt(a.factor / b.factor)} ${b.value}`;
+    scroll.replaceChildren(el("table", { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Unit"), el("th", {}, "Value"))),
+      el("tbody", {}, ...UNITS.map((unit) => el("tr", {},
+        el("td", {}, unit.label),
+        el("td", {}, fmt((n * a.factor) / unit.factor)))))));
+    text = `${fmt(out)} ${b.value}`;
+  }
+
+  value.addEventListener("input", run);
+  from.addEventListener("change", run);
+  to.addEventListener("change", run);
+
+  const swap = button("Swap", { icon: "arrow-left-right", onclick: () => {
+    const held = from.value;
+    from.value = to.value;
+    to.value = held;
+    run();
+  }});
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Value", value), panel("From", from), panel("To", to), error),
+      stack(panel("Result", stats), factor, panel("All units", scroll))
+    ),
+    foot: actions(swap, copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };