mevebu 0.3.1 → 0.4.0

package/mevebu/libs/js/tools/url-parser.js

@@ -0,0 +1,83 @@
+// Breaks a URL into its protocol, host, port, path, hash and query parameters.
+import { el, bench, stack, panel, textInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+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: "https://example.com:8443/blog/post?utm_source=news&page=2#top", "aria-label": "URL" });
+  const error = notice("error");
+
+  const protocol = el("span", { class: "mvb-kv__v" }, "-");
+  const host = el("span", { class: "mvb-kv__v" }, "-");
+  const port = el("span", { class: "mvb-kv__v" }, "-");
+  const path = el("span", { class: "mvb-kv__v" }, "-");
+  const hash = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el(
+    "div",
+    { class: "mvb-kv" },
+    kvRow("Protocol", protocol),
+    kvRow("Host", host),
+    kvRow("Port", port),
+    kvRow("Path", path),
+    kvRow("Hash", hash)
+  );
+  const tableWrap = el("div", { class: "mvb-scroll" });
+  let paramsText = "";
+
+  function clear() {
+    for (const node of [protocol, host, port, path, hash]) node.textContent = "-";
+    tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "No query parameters."));
+    paramsText = "";
+  }
+
+  function run() {
+    error.write("");
+    const raw = source.value.trim();
+    if (!raw) return clear();
+    let url;
+    try {
+      url = new URL(raw);
+    } catch {
+      error.write("That is not a valid URL.");
+      return clear();
+    }
+    protocol.textContent = url.protocol.replace(":", "");
+    host.textContent = url.hostname;
+    port.textContent = url.port || "default";
+    path.textContent = url.pathname;
+    hash.textContent = url.hash || "-";
+    const params = [...url.searchParams];
+    if (!params.length) {
+      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "No query parameters."));
+      paramsText = "";
+      return;
+    }
+    tableWrap.replaceChildren(el(
+      "table",
+      { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Key"), el("th", {}, "Value"))),
+      el("tbody", {}, ...params.map(([key, value]) => el("tr", {}, el("td", {}, key), el("td", {}, value))))
+    ));
+    paramsText = JSON.stringify(Object.fromEntries(params), null, 2);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("URL", source), error),
+      stack(kv, panel("Query parameters", tableWrap))
+    ),
+    foot: actions(
+      copyButton(() => source.value.trim(), "Copy URL"),
+      copyButton(() => paramsText, "Copy params", "fill")
+    ),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/utf8-bytes.js

@@ -0,0 +1,67 @@
+// Measures text as characters, code points, UTF-8 bytes and UTF-16 units.
+import { el, bench, stack, panel, textArea, copyButton, actions, toolcard } from "../core.js";
+
+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;
+}
+
+function graphemes(text) {
+  if (text && typeof Intl !== "undefined" && Intl.Segmenter) {
+    return [...new Intl.Segmenter(undefined, { granularity: "grapheme" }).segment(text)].length;
+  }
+  return Array.from(text).length;
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 10, value: "mevebu", "aria-label": "Text" });
+
+  const characterTile = tile("Characters");
+  const pointTile = tile("Code points");
+  const byteTile = tile("UTF-8 bytes");
+  const unitTile = tile("UTF-16 units");
+  const stats = el("div", { class: "mvb-stats" }, characterTile, pointTile, byteTile, unitTile);
+
+  let counts = { characters: 0, points: 0, bytes: 0, units: 0 };
+
+  function summary() {
+    return [
+      `${counts.characters} characters`,
+      `${counts.points} code points`,
+      `${counts.bytes} UTF-8 bytes`,
+      `${counts.units} UTF-16 units`,
+    ].join("\n");
+  }
+
+  function run() {
+    const text = source.value;
+    counts = {
+      characters: graphemes(text),
+      points: Array.from(text).length,
+      bytes: new TextEncoder().encode(text).length,
+      units: text.length,
+    };
+    characterTile.set(String(counts.characters));
+    pointTile.set(String(counts.points));
+    byteTile.set(String(counts.bytes));
+    unitTile.set(String(counts.units));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text", source)),
+      stack(stats)
+    ),
+    foot: actions(copyButton(summary, "Copy counts", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/version-compare.js

@@ -0,0 +1,70 @@
+// Compares two versions and says which is newer and where they differ.
+import { bench, stack, panel, textInput, notice, output, copyButton, actions, toolcard } from "../core.js";
+
+function parse(text) {
+  const match = /^v?(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?$/.exec(text.trim());
+  if (!match) return null;
+  return { core: match.slice(1, 4).map(Number), pre: match[4] || "" };
+}
+
+export function mount(slot) {
+  const left = textInput({ value: "1.2.0", class: "mvb-in mvb-in--mono", "aria-label": "First version" });
+  const right = textInput({ value: "1.1.5", class: "mvb-in mvb-in--mono", "aria-label": "Second version" });
+  const error = notice("error");
+  const out = output({ rows: 8 });
+  let text = "";
+
+  function run() {
+    error.write("");
+    const a = parse(left.value);
+    const b = parse(right.value);
+    if (!a || !b) {
+      text = "";
+      out.write("");
+      error.write("Enter two versions like 1.2.3.");
+      return;
+    }
+    const names = ["major", "minor", "patch"];
+    const lines = [];
+    let verdict = "equal";
+    for (let i = 0; i < 3; i++) {
+      const sign = a.core[i] === b.core[i] ? "=" : a.core[i] > b.core[i] ? ">" : "<";
+      if (sign !== "=" && verdict === "equal") verdict = sign === ">" ? "a" : "b";
+      lines.push(`${names[i]} ${a.core[i]} ${sign} ${b.core[i]}`);
+    }
+    if (a.core.every((part, i) => part === b.core[i])) {
+      if (a.pre === b.pre) verdict = "equal";
+      else if (!a.pre) verdict = "a";
+      else if (!b.pre) verdict = "b";
+      else verdict = a.pre > b.pre ? "a" : "b";
+      lines.push(`prerelease ${a.pre || "none"} ${a.pre === b.pre ? "=" : a.pre > b.pre ? ">" : "<"} ${b.pre || "none"}`);
+    }
+    const av = left.value.trim();
+    const bv = right.value.trim();
+    const head =
+      verdict === "equal"
+        ? `${av} and ${bv} are the same version.`
+        : verdict === "a"
+          ? `${av} is newer than ${bv}.`
+          : `${bv} is newer than ${av}.`;
+    text = `${[head, "", ...lines].join("\n")}\n`;
+    out.write(text);
+  }
+
+  left.addEventListener("input", run);
+  right.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("First version", left), panel("Second version", right), error),
+      stack(panel("Comparison", out))
+    ),
+    foot: actions(copyButton(() => text, "Copy comparison", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/video-duration.js

@@ -0,0 +1,72 @@
+// Estimated video length from a script at a speaking rate, plus pauses.
+import { el, bench, stack, panel, textArea, numberInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+const clock = (seconds) => {
+  const total = Math.max(0, Math.round(seconds));
+  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+};
+
+function tile(label) {
+  const value = el("span", { class: "mvb-stat__v" }, "0:00");
+  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 source = textArea({ rows: 10, "aria-label": "Script", placeholder: "Type or paste the script" });
+  const wordsOverride = numberInput({ min: "0", placeholder: "From the script", "aria-label": "Word count" });
+  const rate = numberInput({ min: "60", max: "400", value: "150", "aria-label": "Speaking rate in words per minute" });
+  const pause = numberInput({ min: "0", max: "60", value: "8", "aria-label": "Pause seconds per minute" });
+
+  const wordsTile = tile("Words");
+  const speakTile = tile("Speaking");
+  const totalTile = tile("With pauses");
+  const stats = el("div", { class: "mvb-stats" }, wordsTile, speakTile, totalTile);
+  const note = notice("note");
+  note.write("Speaking rates vary by person and script.");
+
+  let summary = "";
+
+  function run() {
+    const typed = parseInt(wordsOverride.value, 10) || 0;
+    const words = typed > 0 ? typed : (source.value.trim() ? source.value.trim().split(/\s+/).length : 0);
+    const wpm = Math.max(1, parseInt(rate.value, 10) || 150);
+    const pauseSeconds = Math.max(0, parseInt(pause.value, 10) || 0);
+    const speaking = (words / wpm) * 60;
+    const total = speaking + (speaking / 60) * pauseSeconds;
+
+    wordsTile.set(String(words));
+    speakTile.set(clock(speaking));
+    totalTile.set(clock(total));
+    summary = [
+      `${words} words`,
+      `Speaking ${clock(speaking)} at ${wpm} words per minute`,
+      `Total ${clock(total)} with ${pauseSeconds} seconds of pause per minute`,
+    ].join("\n");
+  }
+
+  source.addEventListener("input", run);
+  wordsOverride.addEventListener("input", run);
+  rate.addEventListener("input", run);
+  pause.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Script", source),
+        panel("Word count", wordsOverride, "Overrides the script"),
+        panel("Speaking rate", rate, "Words per minute"),
+        panel("Pauses", pause, "Seconds per minute")
+      ),
+      stack(stats, note)
+    ),
+    foot: actions(copyButton(() => summary, "Copy estimate", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,88 @@
+// Converts a volume between metric and US units, with the factor used.
+import { el, bench, stack, panel, numberInput, selectInput, notice, copyButton, button, actions, toolcard } from "../core.js";
+
+const UNITS = [
+  { value: "ml", label: "Milliliter", factor: 0.001 },
+  { value: "l", label: "Liter", factor: 1 },
+  { value: "m3", label: "Cubic meter", factor: 1000 },
+  { value: "tsp", label: "Teaspoon", factor: 0.00492892159375 },
+  { value: "tbsp", label: "Tablespoon", factor: 0.01478676478125 },
+  { value: "floz", label: "Fluid ounce", factor: 0.0295735295625 },
+  { value: "cup", label: "Cup", factor: 0.2365882365 },
+  { value: "pt", label: "Pint", factor: 0.473176473 },
+  { value: "qt", label: "Quart", factor: 0.946352946 },
+  { value: "gal", label: "Gallon", factor: 3.785411784 },
+];
+
+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: "l", "aria-label": "From unit" });
+  const to = selectInput(options, { value: "gal", "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 };

package/mevebu/libs/js/tools/weekly-planner.js

@@ -0,0 +1,101 @@
+// Plans seven days at once: pick a day, add targets, tick them off.
+import { el, toast, blank, bench, stack, panel, textInput, checkbox, button, chipRow, copyButton, actions, toolcard, readPin, writePin } from "../core.js";
+
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
+export function mount(slot) {
+  const PIN = "weekly-planner";
+  const saved = readPin(PIN, { day: 0, days: [] });
+  const days = Array.from({ length: 7 }, (_, i) => (Array.isArray(saved.days?.[i]) ? saved.days[i] : []));
+  let day = Number.isInteger(saved.day) && saved.day >= 0 && saved.day < 7 ? saved.day : 0;
+
+  const entry = textInput({ placeholder: "New item", "aria-label": "New item" });
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+
+  const dayChips = chipRow(DAYS.map((label, value) => ({ value, label })), {
+    value: day,
+    label: "Day",
+    onChange: (next) => {
+      day = next;
+      save();
+      render();
+    },
+  });
+
+  const addButton = button("Add", { icon: "plus", kind: "fill" });
+  const copyWeek = copyButton(() => weekText(), "Copy week");
+
+  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 save = () => writePin(PIN, { day, days });
+
+  function weekText() {
+    return DAYS.map((label, i) => {
+      const lines = days[i].map((item) => `${item.done ? "[x]" : "[ ]"} ${item.text}`);
+      return lines.length ? `${label}\n${lines.join("\n")}` : label;
+    }).join("\n\n");
+  }
+
+  function itemNode(item) {
+    const box = checkbox(item.text, { checked: item.done });
+    box.input.addEventListener("change", () => {
+      item.done = box.input.checked;
+      save();
+      renderStats();
+    });
+    const remove = button("", { icon: "trash", "aria-label": `Remove ${item.text}` });
+    remove.addEventListener("click", () => {
+      days[day] = days[day].filter((entry) => entry.id !== item.id);
+      save();
+      render();
+    });
+    return el("div", { class: "mvb-row" }, box, remove);
+  }
+
+  function renderStats() {
+    const todayDone = days[day].filter((item) => item.done).length;
+    const weekDone = days.reduce((sum, list) => sum + list.filter((item) => item.done).length, 0);
+    stats.replaceChildren(tile("Done today", todayDone), tile("Done this week", weekDone));
+    copyWeek.disabled = days.every((list) => list.length === 0);
+  }
+
+  function render() {
+    listWrap.replaceChildren(
+      days[day].length ? stack(...days[day].map(itemNode)) : blank("calendar-range", `Nothing on ${DAYS[day]}.`)
+    );
+    renderStats();
+  }
+
+  function add() {
+    const text = entry.value.trim();
+    if (!text) return toast("Type an item first");
+    days[day].push({ id: uid(), text, done: false });
+    entry.value = "";
+    entry.focus();
+    save();
+    render();
+  }
+
+  entry.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") add();
+  });
+  addButton.addEventListener("click", add);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Day", dayChips), panel("New item", entry)),
+      stack(stats, panel("Items", listWrap))
+    ),
+    foot: actions(copyWeek, addButton),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,85 @@
+// Converts a mass between metric and imperial units, with the factor used.
+import { el, bench, stack, panel, numberInput, selectInput, notice, copyButton, button, actions, toolcard } from "../core.js";
+
+const UNITS = [
+  { value: "mg", label: "Milligram", factor: 0.001 },
+  { value: "g", label: "Gram", factor: 1 },
+  { value: "kg", label: "Kilogram", factor: 1000 },
+  { value: "t", label: "Tonne", factor: 1000000 },
+  { value: "oz", label: "Ounce", factor: 28.349523125 },
+  { value: "lb", label: "Pound", factor: 453.59237 },
+  { value: "st", label: "Stone", factor: 6350.29318 },
+];
+
+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: "kg", "aria-label": "From unit" });
+  const to = selectInput(options, { value: "lb", "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 };

package/mevebu/libs/js/tools/weighted-average.js

@@ -0,0 +1,86 @@
+// Weighted mean from paired value and weight lists.
+import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+
+function fmt(n) {
+  return 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)) };
+}
+
+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 values = textArea({ rows: 6, value: "85, 90, 70", "aria-label": "Values", placeholder: "85, 90, 70" });
+  const weights = textArea({ rows: 6, value: "2, 3, 1", "aria-label": "Weights", placeholder: "2, 3, 1" });
+  const weighted = tile("Weighted average");
+  const totalWeight = tile("Total weight");
+  const count = tile("Count");
+  const stats = el("div", { class: "mvb-stats" }, weighted, totalWeight, count);
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    weighted.set("-");
+    totalWeight.set("-");
+    count.set("-");
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const left = parseNumbers(values.value);
+    const right = parseNumbers(weights.value);
+    if (!left.nums.length || !right.nums.length) {
+      clear();
+      return;
+    }
+    if (left.invalid || right.invalid) {
+      clear();
+      error.write("Use numbers only, separated by spaces, commas or new lines.");
+      return;
+    }
+    if (left.nums.length !== right.nums.length) {
+      clear();
+      error.write(`There are ${left.nums.length} values and ${right.nums.length} weights.`);
+      return;
+    }
+    const weightSum = right.nums.reduce((acc, n) => acc + n, 0);
+    if (weightSum === 0) {
+      clear();
+      error.write("The weights add up to zero.");
+      return;
+    }
+    const products = left.nums.reduce((acc, n, i) => acc + n * right.nums[i], 0);
+    const result = products / weightSum;
+    weighted.set(fmt(result));
+    totalWeight.set(fmt(weightSum));
+    count.set(String(left.nums.length));
+    text = `Weighted average ${fmt(result)}, total weight ${fmt(weightSum)}, values ${left.nums.length}`;
+  }
+
+  values.addEventListener("input", run);
+  weights.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Values", values), panel("Weights", weights), error),
+      stack(stats)
+    ),
+    foot: actions(copyButton(() => text, "Copy summary", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };