mevebu 0.3.0 → 0.4.0

package/mevebu/libs/js/tools/canonical-tag.js

@@ -0,0 +1,63 @@
+// Builds a canonical link tag and shows the normalized address the tag points
+// to.
+import { el, 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 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/blog/post/?utm_source=news#comments", "aria-label": "Page URL" });
+  const result = output({ rows: 2 });
+  const error = notice("error");
+  const normalized = el("span", { class: "mvb-kv__v" }, "-");
+  const length = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el("div", { class: "mvb-kv" }, kvRow("Canonical URL", normalized), kvRow("Length", length));
+  let canonical = "";
+
+  function clear() {
+    canonical = "";
+    result.write("");
+    normalized.textContent = "-";
+    length.textContent = "-";
+  }
+
+  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();
+    }
+    url.hash = "";
+    canonical = url.href;
+    result.write(`<link rel="canonical" href="${esc(canonical)}" />`);
+    normalized.textContent = canonical;
+    length.textContent = String(canonical.length);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Page URL", source), error),
+      stack(panel("Canonical tag", result), kv)
+    ),
+    foot: actions(
+      copyButton(() => canonical, "Copy URL"),
+      copyButton(() => result.textContent, "Copy tag", "fill")
+    ),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/caption-counter.js

@@ -0,0 +1,66 @@
+// A caption checked against a character limit, with the room left.
+import { el, bench, stack, panel, textArea, numberInput, notice, 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;
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 8, "aria-label": "Caption", placeholder: "Type or paste the caption" });
+  const limit = numberInput({ min: "0", placeholder: "No limit", "aria-label": "Character limit" });
+
+  const charsTile = tile("Characters");
+  const wordsTile = tile("Words");
+  const linesTile = tile("Lines");
+  const leftTile = tile("Left");
+  const stats = el("div", { class: "mvb-stats" }, charsTile, wordsTile, linesTile, leftTile);
+  const note = notice("note");
+
+  let summary = "";
+
+  function run() {
+    const text = source.value;
+    const chars = text.length;
+    const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+    const lines = text ? text.split("\n").length : 0;
+    charsTile.set(String(chars));
+    wordsTile.set(String(words));
+    linesTile.set(String(lines));
+
+    const cap = parseInt(limit.value, 10) || 0;
+    if (cap > 0) {
+      leftTile.set(String(cap - chars));
+      note.write(chars > cap ? `${chars - cap} characters over the limit.` : "");
+    } else {
+      leftTile.set("-");
+      note.write("");
+    }
+
+    summary = [
+      `${chars} characters`,
+      `${words} words`,
+      `${lines} lines`,
+      cap > 0 ? `${cap - chars} left of ${cap}` : "No limit set",
+    ].join("\n");
+  }
+
+  source.addEventListener("input", run);
+  limit.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Caption", source), panel("Character limit", limit)),
+      stack(stats, note)
+    ),
+    foot: actions(copyButton(() => summary, "Copy summary", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/case-inspector.js

@@ -0,0 +1,114 @@
+// Names the letter case a text uses and lists every case it could become.
+import { el, toast, copyText, bench, stack, panel, textArea, copyButton, actions, toolcard } from "../core.js";
+
+const wordsOf = (text) => text
+  .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+  .replace(/[_\-.]+/g, " ")
+  .replace(/\s+/g, " ")
+  .trim()
+  .split(" ")
+  .filter(Boolean);
+
+const cap = (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+
+const CASES = [
+  ["UPPERCASE", (words) => words.join(" ").toUpperCase()],
+  ["lowercase", (words) => words.join(" ").toLowerCase()],
+  ["Title Case", (words) => words.map(cap).join(" ")],
+  ["Sentence case", (words) => {
+    const line = words.join(" ").toLowerCase();
+    return line.charAt(0).toUpperCase() + line.slice(1);
+  }],
+  ["camelCase", (words) => (words[0]?.toLowerCase() ?? "") + words.slice(1).map(cap).join("")],
+  ["PascalCase", (words) => words.map(cap).join("")],
+  ["snake_case", (words) => words.map((word) => word.toLowerCase()).join("_")],
+  ["kebab-case", (words) => words.map((word) => word.toLowerCase()).join("-")],
+  ["CONSTANT_CASE", (words) => words.map((word) => word.toUpperCase()).join("_")],
+  ["Train-Case", (words) => words.map(cap).join("-")],
+];
+
+function detectCase(text) {
+  const t = text.trim();
+  if (!t || !/[a-zA-Z]/.test(t)) return "No letters";
+  if (/\s/.test(t)) {
+    if (t === t.toUpperCase()) return "UPPERCASE";
+    if (t === t.toLowerCase()) return "lowercase";
+    const words = t.split(/\s+/);
+    if (words.every((word) => /^[A-Z]/.test(word))) return "Title Case";
+    if (/^[A-Z]/.test(t) && t.slice(1) === t.slice(1).toLowerCase()) return "Sentence case";
+    return "Mixed";
+  }
+  if (/^[A-Z0-9]+(_[A-Z0-9]+)+$/.test(t)) return "CONSTANT_CASE";
+  if (/^[a-z0-9]+(_[a-z0-9]+)+$/.test(t)) return "snake_case";
+  if (/^[A-Za-z0-9]+(-[A-Za-z0-9]+)+$/.test(t)) {
+    if (t === t.toLowerCase()) return "kebab-case";
+    return t.split("-").every((word) => /^[A-Z]/.test(word)) ? "Train-Case" : "Mixed";
+  }
+  if (/^[a-z]+([A-Z][a-z0-9]*)+$/.test(t)) return "camelCase";
+  if (/^([A-Z][a-z0-9]*)+$/.test(t)) return "PascalCase";
+  if (/^[A-Z]+$/.test(t)) return "UPPERCASE";
+  if (/^[a-z]+$/.test(t)) return "lowercase";
+  return "Mixed";
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 5, value: "helloWorld", "aria-label": "Text", placeholder: "Type or paste text" });
+  const detected = el("span", { class: "mvb-kv__v" }, "No letters");
+  const kv = el(
+    "div",
+    { class: "mvb-kv" },
+    el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, "Detected case"), detected)
+  );
+  const list = el("div", { class: "mvb-cases" });
+  let active = "No letters";
+
+  function detectedValue() {
+    const entry = CASES.find(([name]) => name === active);
+    return entry ? entry[1](wordsOf(source.value)) : source.value;
+  }
+
+  function run() {
+    const words = wordsOf(source.value);
+    active = detectCase(source.value);
+    detected.textContent = active;
+    for (const row of list.children) {
+      const convert = CASES.find(([name]) => name === row.dataset.case)[1];
+      row.querySelector(".mvb-case__value").textContent = words.length ? convert(words) : "";
+      const on = row.dataset.case === active;
+      row.classList.toggle("mvb-on", on);
+      row.setAttribute("aria-pressed", String(on));
+    }
+  }
+
+  for (const [name] of CASES) {
+    const button = el(
+      "button",
+      {
+        class: "mvb-case", type: "button", dataset: { case: name }, "aria-pressed": "false",
+        onclick: async () => {
+          const value = button.querySelector(".mvb-case__value").textContent.trim();
+          if (value) toast((await copyText(value)) ? "Copied" : "Copy failed");
+        },
+      },
+      el("span", { class: "mvb-case__name" }, name),
+      el("span", { class: "mvb-case__value" })
+    );
+    list.append(button);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text", source)),
+      stack(kv, panel("Cases", list))
+    ),
+    foot: actions(copyButton(detectedValue, "Copy detected", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/cash-denomination.js

@@ -0,0 +1,74 @@
+// Adds up notes and coins by denomination.
+import { el, bench, stack, panel, numberInput, notice, copyButton, actions, toolcard, readPin, writePin } from "../core.js";
+
+const DENOMINATIONS = [100, 50, 20, 10, 5, 2, 1];
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 2 });
+}
+
+export function mount(slot) {
+  const PIN = "cash-denomination";
+  const saved = readPin(PIN, {});
+  const counts = new Map();
+
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+  const note = notice("note");
+  note.write("Values are generic. Match them to your currency.");
+
+  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 readCount = (value) => {
+    const input = counts.get(value);
+    const n = Number(input.value);
+    return input.value.trim() === "" || !Number.isFinite(n) || n < 0 ? 0 : Math.floor(n);
+  };
+
+  const total = () => DENOMINATIONS.reduce((sum, value) => sum + value * readCount(value), 0);
+
+  function save() {
+    const data = {};
+    for (const value of DENOMINATIONS) data[value] = counts.get(value).value;
+    writePin(PIN, data);
+  }
+
+  function render() {
+    const rows = DENOMINATIONS.map((value) => el("tr", {},
+      el("th", {}, fmt(value)),
+      el("td", {}, fmt(readCount(value))),
+      el("td", {}, fmt(value * readCount(value)))));
+    listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Value"), el("th", {}, "Count"), el("th", {}, "Subtotal"))),
+      el("tbody", {}, ...rows)));
+    const pieces = DENOMINATIONS.reduce((sum, value) => sum + readCount(value), 0);
+    stats.replaceChildren(tile("Total", fmt(total())), tile("Pieces", String(pieces)));
+  }
+
+  const inputs = DENOMINATIONS.map((value) => {
+    const input = numberInput({ value: String(saved[value] ?? ""), min: "0", "aria-label": fmt(value) });
+    input.addEventListener("input", () => { save(); render(); });
+    counts.set(value, input);
+    return input;
+  });
+
+  const card = toolcard({
+    body: bench(
+      stack(...DENOMINATIONS.map((value, i) => panel(fmt(value), inputs[i])), note),
+      stack(stats, panel("Subtotals", listWrap))
+    ),
+    foot: actions(copyButton(
+      () => DENOMINATIONS.map((value) => `${fmt(value)} x ${readCount(value)} = ${fmt(value * readCount(value))}`).join("\n"),
+      "Copy count",
+      "fill"
+    )),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/cash-flow.js

@@ -0,0 +1,124 @@
+// Money in and out from an opening balance, with a running total.
+import { el, toast, blank, bench, stack, row, panel, textInput, numberInput, chipRow, button, copyButton, downloadButton, actions, toolcard, readPin, writePin } from "../core.js";
+
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+export function mount(slot) {
+  const PIN = "cash-flow";
+  const saved = readPin(PIN, { opening: 0, entries: [] });
+  let entries = Array.isArray(saved.entries) ? saved.entries : [];
+
+  const opening = numberInput({ value: String(saved.opening ?? 0), "aria-label": "Opening balance" });
+  const label = textInput({ placeholder: "Label", "aria-label": "Label" });
+  const amount = numberInput({ min: "0", placeholder: "Amount", "aria-label": "Amount" });
+  let type = "in";
+  const typeChips = chipRow(
+    [{ value: "in", label: "In" }, { value: "out", label: "Out" }],
+    { value: "in", label: "Direction", onChange: (next) => { type = next; } }
+  );
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+
+  const addButton = button("Add", { icon: "plus", kind: "fill" });
+
+  const save = () => writePin(PIN, { opening: Number(opening.value) || 0, entries });
+  const tile = (key, value) => el("div", { class: "mvb-stat" },
+    el("span", { class: "mvb-stat__v" }, String(value)),
+    el("span", { class: "mvb-stat__k" }, key));
+
+  function totals() {
+    let balance = Number(opening.value) || 0;
+    let moneyIn = 0;
+    let moneyOut = 0;
+    const lines = [`Opening ${fmt(balance)}`];
+    for (const entry of entries) {
+      if (entry.type === "in") { balance += entry.amount; moneyIn += entry.amount; }
+      else { balance -= entry.amount; moneyOut += entry.amount; }
+      lines.push(`${entry.type === "in" ? "+" : "-"} ${fmt(entry.amount)}  ${entry.label}  balance ${fmt(balance)}`);
+    }
+    lines.push(`Closing ${fmt(balance)}`);
+    return { lines, moneyIn, moneyOut, closing: balance };
+  }
+
+  function removeButton(entry) {
+    const node = button("", { icon: "trash", "aria-label": `Remove ${entry.label}` });
+    node.addEventListener("click", () => {
+      entries = entries.filter((item) => item.id !== entry.id);
+      save();
+      render();
+    });
+    return node;
+  }
+
+  function render() {
+    if (!entries.length) {
+      listWrap.replaceChildren(blank("banknote", "No entries yet."));
+    } else {
+      let balance = Number(opening.value) || 0;
+      const rows = entries.map((entry) => {
+        if (entry.type === "in") balance += entry.amount;
+        else balance -= entry.amount;
+        return el("tr", {},
+          el("th", {}, entry.label),
+          el("td", {}, entry.type === "in" ? fmt(entry.amount) : ""),
+          el("td", {}, entry.type === "out" ? fmt(entry.amount) : ""),
+          el("td", {}, fmt(balance)),
+          el("td", {}, removeButton(entry)));
+      });
+      listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+        el("thead", {}, el("tr", {}, el("th", {}, "Label"), el("th", {}, "In"), el("th", {}, "Out"), el("th", {}, "Balance"), el("th", {}, ""))),
+        el("tbody", {}, ...rows)));
+    }
+    const { moneyIn, moneyOut, closing } = totals();
+    stats.replaceChildren(tile("In", fmt(moneyIn)), tile("Out", fmt(moneyOut)), tile("Closing", fmt(closing)));
+  }
+
+  function add() {
+    const text = label.value.trim();
+    const value = Number(amount.value);
+    if (!text) return toast("Add a label first");
+    if (amount.value.trim() === "" || !Number.isFinite(value) || value < 0) return toast("Add an amount");
+    entries.push({ id: uid(), label: text, type, amount: value });
+    label.value = "";
+    amount.value = "";
+    label.focus();
+    save();
+    render();
+  }
+
+  label.addEventListener("keydown", (event) => { if (event.key === "Enter") add(); });
+  addButton.addEventListener("click", add);
+  opening.addEventListener("input", () => { save(); render(); });
+
+  function csv() {
+    const rows = [["Label", "Type", "Amount"]];
+    for (const entry of entries) rows.push([entry.label, entry.type, String(entry.amount)]);
+    return rows.map((cells) => cells.map((cell) => `"${String(cell).replaceAll('"', '""')}"`).join(",")).join("\n");
+  }
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Opening balance", opening),
+        panel("Label", label),
+        row(panel("Direction", typeChips), panel("Amount", amount))
+      ),
+      stack(stats, panel("Entries", listWrap))
+    ),
+    foot: actions(
+      copyButton(() => totals().lines.join("\n"), "Copy summary"),
+      downloadButton(() => csv(), "cash-flow.csv", "Save CSV", "text/csv"),
+      addButton
+    ),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/cert-expiry.js

@@ -0,0 +1,83 @@
+// Days left until a certificate expiry date, with a warning threshold.
+import { el, textInput, numberInput, notice, copyButton, bench, stack, panel, actions, toolcard } from "../core.js";
+
+const DAY = 86400000;
+const pad = (value) => String(value).padStart(2, "0");
+
+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 soon = new Date(Date.now() + 90 * DAY);
+  const dateField = textInput({
+    type: "date",
+    value: `${soon.getFullYear()}-${pad(soon.getMonth() + 1)}-${pad(soon.getDate())}`,
+    "aria-label": "Expiry date",
+  });
+  const warnField = numberInput({ min: "1", max: "365", value: "30", "aria-label": "Warn threshold in days" });
+
+  const daysTile = tile("Days left");
+  const weeksTile = tile("Weeks left");
+  const statusTile = tile("Status");
+  const stats = el("div", { class: "mvb-stats" }, daysTile, weeksTile, statusTile);
+  const status = notice("note");
+  const error = notice("error");
+  let summary = "";
+
+  function run() {
+    error.write("");
+    status.write("");
+    summary = "";
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(dateField.value);
+    if (!match) {
+      daysTile.set("-");
+      weeksTile.set("-");
+      statusTile.set("-");
+      error.write("Enter an expiry date.");
+      return;
+    }
+    const expiry = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+    const now = new Date();
+    const start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const days = Math.round((expiry - start) / DAY);
+    const threshold = Math.max(0, parseInt(warnField.value, 10) || 0);
+
+    daysTile.set(String(days));
+    weeksTile.set(String(Math.round(days / 7)));
+    const state = days < 0 ? "Expired" : days <= threshold ? "Soon" : "Valid";
+    statusTile.set(state);
+
+    if (days < 0) status.write(`Expired ${Math.abs(days)} days ago.`);
+    else if (days === 0) status.write("Expires today.");
+    else if (days <= threshold) status.write(`Expires in ${days} days, within the ${threshold} day warning window.`);
+    else status.write(`Expires in ${days} days.`);
+
+    summary = `Expires ${expiry.toLocaleDateString()}, ${days} days left, ${state}.`;
+  }
+
+  dateField.addEventListener("input", run);
+  warnField.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Expiry date", dateField),
+        panel("Warn within days", warnField),
+        el("p", { class: "mvb-note" }, "The date stays in this tab."),
+        error
+      ),
+      stack(stats, status)
+    ),
+    foot: actions(copyButton(() => summary, "Copy summary", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/changelog-generator.js

@@ -0,0 +1,48 @@
+// Drafts a changelog entry grouped under added, changed, fixed and removed.
+import { el, bench, stack, panel, textInput, textArea, output, copyButton, actions, toolcard } from "../core.js";
+
+const GROUPS = [
+  { key: "added", label: "Added" },
+  { key: "changed", label: "Changed" },
+  { key: "fixed", label: "Fixed" },
+  { key: "removed", label: "Removed" },
+];
+
+export function mount(slot) {
+  const version = textInput({ value: "1.0.0", class: "mvb-in mvb-in--mono", "aria-label": "Version" });
+  const date = el("input", { class: "mvb-in", type: "date", value: new Date().toISOString().slice(0, 10), "aria-label": "Date" });
+  const fields = GROUPS.map((group) => ({ ...group, area: textArea({ rows: 3, "aria-label": group.label }) }));
+  const out = output({ rows: 16 });
+  let text = "";
+
+  function run() {
+    const lines = [`## [${version.value.trim() || "Unreleased"}] - ${date.value}`, ""];
+    for (const group of fields) {
+      const items = group.area.value.split("\n").map((line) => line.trim()).filter(Boolean);
+      if (!items.length) continue;
+      lines.push(`### ${group.label}`, "");
+      for (const item of items) lines.push(`- ${item}`);
+      lines.push("");
+    }
+    text = `${lines.join("\n").replace(/\n+$/, "")}\n`;
+    out.write(text);
+  }
+
+  version.addEventListener("input", run);
+  date.addEventListener("input", run);
+  for (const group of fields) group.area.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Version", version), panel("Date", date), ...fields.map((group) => panel(group.label, group.area))),
+      stack(panel("Changelog", out))
+    ),
+    foot: actions(copyButton(() => text, "Copy Markdown", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/character-counter.js

@@ -0,0 +1,80 @@
+// Character counts that follow the text, with an optional limit and the
+// number of characters left.
+import { el, bench, stack, panel, textArea, numberInput, notice, button, copyButton, actions, toolcard } from "../core.js";
+
+const chars = (text) => [...text].length;
+const withoutSpaces = (text) => [...text.replace(/\s/g, "")].length;
+
+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;
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 10, "aria-label": "Text", placeholder: "Type or paste text" });
+  const limitField = numberInput({ min: "0", placeholder: "No limit", "aria-label": "Character limit" });
+
+  const totalTile = tile("Characters");
+  const noSpaceTile = tile("Without spaces");
+  const wordsTile = tile("Words");
+  const stats = el("div", { class: "mvb-stats" }, totalTile, noSpaceTile, wordsTile);
+
+  const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Character limit" }, el("div", { class: "mvb-meter__fill" }));
+  const limitNote = notice("note");
+  const fill = meter.querySelector(".mvb-meter__fill");
+
+  let counts = { total: 0, noSpace: 0, words: 0 };
+
+  function summary() {
+    return [
+      `${counts.total} characters`,
+      `${counts.noSpace} without spaces`,
+      `${counts.words} words`,
+    ].join("\n");
+  }
+
+  function run() {
+    const text = source.value;
+    counts = {
+      total: chars(text),
+      noSpace: withoutSpaces(text),
+      words: text.trim() ? text.trim().split(/\s+/).length : 0,
+    };
+    totalTile.set(String(counts.total));
+    noSpaceTile.set(String(counts.noSpace));
+    wordsTile.set(String(counts.words));
+
+    const limit = parseInt(limitField.value, 10) || 0;
+    if (limit > 0) {
+      const ratio = counts.total / limit;
+      fill.style.width = `${Math.min(100, ratio * 100)}%`;
+      fill.className = `mvb-meter__fill ${ratio > 1 ? "mvb-weak" : ratio > 0.8 ? "mvb-ok" : "mvb-strong"}`;
+      limitNote.write(ratio > 1 ? `${counts.total - limit} over the limit.` : `${limit - counts.total} characters left.`);
+    } else {
+      fill.style.width = "0%";
+      fill.className = "mvb-meter__fill";
+      limitNote.write("");
+    }
+  }
+
+  const clearButton = button("Clear", { icon: "trash" });
+  clearButton.addEventListener("click", () => { source.value = ""; run(); });
+  limitField.addEventListener("input", run);
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text", source), panel("Character limit", limitField)),
+      stack(stats, meter, limitNote)
+    ),
+    foot: actions(clearButton, copyButton(summary, "Copy summary", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };