mevebu 2.1.0 → 2.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 # mevebu
 
-**205 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
+**210 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
 
 A private toolbox for the small jobs that do not deserve a whole app: format JSON, decode a JWT, make a password, build a cron line, pick a color, scan a QR code, and a lot more.
 
@@ -10,7 +10,7 @@ A private toolbox for the small jobs that do not deserve a whole app: format JSO
 [![npm downloads](https://img.shields.io/npm/dm/mevebu?color=2ea44f)](https://www.npmjs.com/package/mevebu)
 [![License: MIT](https://img.shields.io/github/license/mevebu/mevebu?color=blue)](./LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/mevebu/mevebu?style=flat&color=yellow)](https://github.com/mevebu/mevebu/stargazers)
-![Tools](https://img.shields.io/badge/tools-205-brightgreen)
+![Tools](https://img.shields.io/badge/tools-210-brightgreen)
 ![Privacy](https://img.shields.io/badge/privacy-100%25%20in--browser-blue)
 
 [Quick start](#quick-start) · [What's inside](#whats-inside) · [Privacy](#privacy-by-design) · [Credit](#credit) · [Development](#development) · [FAQ](#faq)
@@ -23,7 +23,7 @@ A private toolbox for the small jobs that do not deserve a whole app: format JSO
 
 ## What is mevebu?
 
-mevebu is a collection of **205 small online tools** that all run **inside your browser**. Each tool lives on its own page, does one job, and does it fast. Most of them update as you type, so there is no submit button and no waiting.
+mevebu is a collection of **210 small online tools** that all run **inside your browser**. Each tool lives on its own page, does one job, and does it fast. Most of them update as you type, so there is no submit button and no waiting.
 
 Think of it as a clean, private alternative to the usual "free online tools" websites. There are no accounts, no ads in your way, no uploads, and no tracking. Your text, passwords, tokens, and files stay on your device.
 
@@ -64,12 +64,12 @@ mevebu tries port `5555` first, then `5678`, then `5432`, and finally any free p
 
 ## What's inside
 
-mevebu has **205 tools in 20 categories**. Here is the full breakdown:
+mevebu has **210 tools in 20 categories**. Here is the full breakdown:
 
 | Category           | Tools |
 | ------------------ | ----: |
 | Data Generator     |    10 |
-| Passwords and keys |    10 |
+| Passwords and keys |    15 |
 | Developer          |    21 |
 | Convert            |    15 |
 | Text and data      |    14 |
@@ -88,7 +88,7 @@ mevebu has **205 tools in 20 categories**. Here is the full breakdown:
 | GitHub             |     8 |
 | Units              |     8 |
 | QR codes           |     2 |
-| **Total**          | **205** |
+| **Total**          | **210** |
 
 The counts come straight from the tool registry, so this table and the app never drift apart.
 
@@ -176,7 +176,7 @@ That is all. The catalog, search, breadcrumbs, and category pages pick it up aut
 ## FAQ
 
 **What is mevebu?**
-mevebu is a free, open source collection of 205 browser based tools for developers, students, creators, and everyday use. Every tool runs locally in your browser.
+mevebu is a free, open source collection of 210 browser based tools for developers, students, creators, and everyday use. Every tool runs locally in your browser.
 
 **Is mevebu really free?**
 Yes. It is MIT licensed, with no paid tier, no account, and no usage limits.

package/mevebu/app/tailwind.css

@@ -500,6 +500,9 @@
     width: var(--ctl);
     height: var(--ctl);
   }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -566,6 +569,9 @@
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
   .min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
@@ -984,9 +990,21 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-current\/15 {
+    border-color: currentcolor;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, currentcolor 15%, transparent);
+    }
+  }
   .border-danger {
     border-color: var(--danger);
   }
+  .border-danger\/40 {
+    border-color: var(--danger);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--danger) 40%, transparent);
+    }
+  }
   .border-jade {
     border-color: var(--jade);
   }
@@ -1017,6 +1035,12 @@
   .bg-danger {
     background-color: var(--danger);
   }
+  .bg-danger\/10 {
+    background-color: var(--danger);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--danger) 10%, transparent);
+    }
+  }
   .bg-deck {
     background-color: var(--deck);
   }
@@ -1367,9 +1391,19 @@
   .text-\[0\.92em\] {
     font-size: 0.92em;
   }
+  .text-\[clamp\(20px\,3\.4vw\,28px\)\] {
+    font-size: clamp(20px, 3.4vw, 28px);
+  }
   .text-\[clamp\(34px\,6vw\,52px\)\] {
     font-size: clamp(34px, 6vw, 52px);
   }
+  .text-\[clamp\(38px\,9vw\,62px\)\] {
+    font-size: clamp(38px, 9vw, 62px);
+  }
+  .leading-\[1\.4\] {
+    --tw-leading: 1.4;
+    line-height: 1.4;
+  }
   .leading-\[1\.5\] {
     --tw-leading: 1.5;
     line-height: 1.5;
@@ -1390,6 +1424,10 @@
     --tw-leading: 1.65;
     line-height: 1.65;
   }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .leading-normal {
     --tw-leading: var(--leading-normal);
     line-height: var(--leading-normal);
@@ -1426,6 +1464,10 @@
     --tw-tracking: -0.035em;
     letter-spacing: -0.035em;
   }
+  .tracking-\[0\.2em\] {
+    --tw-tracking: 0.2em;
+    letter-spacing: 0.2em;
+  }
   .tracking-\[0\.06em\] {
     --tw-tracking: 0.06em;
     letter-spacing: 0.06em;
@@ -1434,6 +1476,10 @@
     --tw-tracking: 0.08em;
     letter-spacing: 0.08em;
   }
+  .tracking-\[0\.14em\] {
+    --tw-tracking: 0.14em;
+    letter-spacing: 0.14em;
+  }
   .text-balance {
     text-wrap: balance;
   }
@@ -1482,6 +1528,9 @@
   .text-void {
     color: var(--void);
   }
+  .capitalize {
+    text-transform: capitalize;
+  }
   .lowercase {
     text-transform: lowercase;
   }
@@ -1632,10 +1681,18 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-1000 {
+    --tw-duration: 1000ms;
+    transition-duration: 1000ms;
+  }
   .ease-\[var\(--ease\)\] {
     --tw-ease: var(--ease);
     transition-timing-function: var(--ease);
   }
+  .ease-linear {
+    --tw-ease: linear;
+    transition-timing-function: linear;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;

package/mevebu/libs/js/core.js

@@ -750,7 +750,7 @@ export function blank(iconName, text) {
 // ---------- version ----------
 
 // Kept in one place. The CLI reads the same value from package.json.
-export const VERSION = "2.1.0";
+export const VERSION = "2.2.0";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/registry.js

@@ -391,6 +391,96 @@ export const TOOLS = [
     keywords: "url inspect phishing host homograph link safe",
     load: () => import("./tools/url-inspector.js"),
   },
+  {
+    id: "totp-generator",
+    category: "security",
+    name: "TOTP Generator",
+    icon: "shield-check",
+    note: "Read the code your authenticator would show.",
+    about: "Paste a Base32 secret or an otpauth URI. The code refreshes on its own.",
+    tutorial: {
+      intro: "Get a time based one time password from a secret.",
+      steps: [
+        "Paste a Base32 secret, or a full otpauth:// URI.",
+        "Pick the digits, the period and the hash if they are not the default.",
+        "Copy the code. It changes on its own every period.",
+      ],
+    },
+    keywords: "totp otp 2fa authenticator google authenticator base32 code",
+    load: () => import("./tools/totp-generator.js"),
+  },
+  {
+    id: "totp-verifier",
+    category: "security",
+    name: "TOTP Verifier",
+    icon: "shield-check",
+    note: "Check a code against a secret.",
+    about: "Shows which step matched, so a wrong secret is distinguishable from a wrong clock.",
+    tutorial: {
+      intro: "Debug a two factor integration.",
+      steps: [
+        "Paste the secret and the code.",
+        "Set the drift window, or leave it at one step either side.",
+        "Read the verdict, which names the step that matched.",
+      ],
+    },
+    keywords: "totp verify validate otp 2fa drift clock debug",
+    load: () => import("./tools/totp-verifier.js"),
+  },
+  {
+    id: "passphrase-generator",
+    category: "security",
+    name: "Passphrase Generator",
+    icon: "key-round",
+    note: "Make a passphrase you can type from memory.",
+    about: "Words from a bundled list, with the entropy in bits shown next to it.",
+    tutorial: {
+      intro: "Make a password that is long and memorable.",
+      steps: [
+        "Pick how many words.",
+        "Choose a separator, and whether to add a number or a symbol.",
+        "Press Generate, then copy it.",
+      ],
+    },
+    keywords: "passphrase password memorable words diceware entropy",
+    load: () => import("./tools/passphrase-generator.js"),
+  },
+  {
+    id: "file-hash",
+    category: "security",
+    name: "File Hash Checker",
+    icon: "file-key",
+    note: "Hash a file and compare the checksum.",
+    about: "SHA-1, SHA-256 and SHA-512, read in the tab, with a match or mismatch.",
+    tutorial: {
+      intro: "Verify a download before you open it.",
+      steps: [
+        "Drop the file.",
+        "Paste the checksum you were given.",
+        "Read match or mismatch, and copy any digest you need.",
+      ],
+    },
+    keywords: "file hash checksum sha256 verify download integrity",
+    load: () => import("./tools/file-hash.js"),
+  },
+  {
+    id: "aes-text",
+    category: "security",
+    name: "AES Text Encrypt",
+    icon: "lock",
+    note: "Encrypt a message with a password.",
+    about: "AES-256-GCM with PBKDF2, and one string that carries everything needed to decrypt.",
+    tutorial: {
+      intro: "Send a secret through a channel you do not trust.",
+      steps: [
+        "Write the message and set a password.",
+        "Press Encrypt and copy the string that starts with mv1.",
+        "To read it back, switch to Decrypt, paste the string and the same password.",
+      ],
+    },
+    keywords: "aes encrypt decrypt password gcm pbkdf2 secret message",
+    load: () => import("./tools/aes-text.js"),
+  },
 
   {
     id: "uuid-generator",

package/mevebu/libs/js/tools/aes-text.js

@@ -0,0 +1,192 @@
+// Encrypt a message with a password. AES-256-GCM with a PBKDF2 key, and the salt
+// and IV packed into the output, so one string is enough to decrypt.
+import {
+  el, icon, toast, bench, stack, panel, textArea, textInput, button, actions,
+  toolcard, notice, copyButton, output, chipRow,
+} from "../core.js";
+
+const ITERATIONS = 310_000;
+const SALT_BYTES = 16;
+const IV_BYTES = 12;
+const VERSION = 1;
+
+function toBase64(bytes) {
+  let binary = "";
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  return btoa(binary);
+}
+
+function fromBase64(text) {
+  const binary = atob(text.replace(/\s+/g, ""));
+  const out = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) out[i] = binary.charCodeAt(i);
+  return out;
+}
+
+async function deriveKey(password, salt) {
+  const base = await crypto.subtle.importKey(
+    "raw",
+    new TextEncoder().encode(password),
+    "PBKDF2",
+    false,
+    ["deriveKey"]
+  );
+  return crypto.subtle.deriveKey(
+    { name: "PBKDF2", salt, iterations: ITERATIONS, hash: "SHA-256" },
+    base,
+    { name: "AES-GCM", length: 256 },
+    false,
+    ["encrypt", "decrypt"]
+  );
+}
+
+export function mount(slot) {
+  let mode = "encrypt";
+
+  const message = textArea({ rows: 6, placeholder: "The message", "aria-label": "Message" });
+  const password = textInput({
+    type: "password",
+    placeholder: "A password you will remember",
+    "aria-label": "Password",
+    autocomplete: "new-password",
+  });
+  const show = el("input", { type: "checkbox", class: "m-0 size-4 accent-[var(--jade)]" });
+  const showLabel = el("label", { class: "inline-flex min-h-9 cursor-pointer items-center gap-2 text-sm text-ink-2" }, show, "Show password");
+
+  const modeRow = chipRow(
+    [
+      { value: "encrypt", label: "Encrypt" },
+      { value: "decrypt", label: "Decrypt" },
+    ],
+    {
+      value: "encrypt",
+      label: "Mode",
+      onChange: (value) => {
+        mode = value;
+        sync();
+      },
+    }
+  );
+
+  const error = notice("warn");
+  const result = output({ rows: 8 });
+  const summary = el("p", { class: "text-sm text-ink-2" });
+
+  function sync() {
+    const decrypting = mode === "decrypt";
+    message.placeholder = decrypting
+      ? "Paste the encrypted text, starting with mv1."
+      : "The message";
+    message.setAttribute("aria-label", decrypting ? "Encrypted text" : "Message");
+    run.textContent = decrypting ? "Decrypt text" : "Encrypt text";
+    result.write("");
+    summary.textContent = "";
+    error.write("");
+  }
+
+  async function act() {
+    error.write("");
+    result.write("");
+    summary.textContent = "";
+    const text = message.value;
+    const pass = password.value;
+    if (!text.trim()) {
+      error.write(mode === "decrypt" ? "Paste the encrypted text first." : "Write the message first.");
+      return;
+    }
+    if (!pass) {
+      error.write("Set a password first.");
+      return;
+    }
+
+    try {
+      if (mode === "encrypt") {
+        const salt = crypto.getRandomValues(new Uint8Array(SALT_BYTES));
+        const iv = crypto.getRandomValues(new Uint8Array(IV_BYTES));
+        const key = await deriveKey(pass, salt);
+        const cipher = new Uint8Array(
+          await crypto.subtle.encrypt({ name: "AES-GCM", iv }, key, new TextEncoder().encode(text))
+        );
+        const packed = new Uint8Array(1 + SALT_BYTES + IV_BYTES + cipher.length);
+        packed[0] = VERSION;
+        packed.set(salt, 1);
+        packed.set(iv, 1 + SALT_BYTES);
+        packed.set(cipher, 1 + SALT_BYTES + IV_BYTES);
+        const encoded = `mv1.${toBase64(packed)}`;
+        result.write(encoded);
+        summary.textContent = `${encoded.length} characters · AES-256-GCM · PBKDF2-SHA-256, ${ITERATIONS.toLocaleString()} rounds`;
+        toast("Encrypted");
+      } else {
+        const clean = text.trim();
+        const body = clean.startsWith("mv1.") ? clean.slice(4) : clean;
+        let packed;
+        try {
+          packed = fromBase64(body);
+        } catch {
+          throw new Error("That is not Base64. Paste the whole string, starting with mv1.");
+        }
+        if (packed.length < 1 + SALT_BYTES + IV_BYTES + 16) throw new Error("That string is too short to be an encrypted message.");
+        if (packed[0] !== VERSION) throw new Error(`This was written by version ${packed[0]}, which this page does not know.`);
+        const salt = packed.slice(1, 1 + SALT_BYTES);
+        const iv = packed.slice(1 + SALT_BYTES, 1 + SALT_BYTES + IV_BYTES);
+        const cipher = packed.slice(1 + SALT_BYTES + IV_BYTES);
+        const key = await deriveKey(pass, salt);
+        let plain;
+        try {
+          plain = await crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, cipher);
+        } catch {
+          throw new Error("Wrong password, or the text was changed after it was encrypted.");
+        }
+        const decoded = new TextDecoder().decode(plain);
+        result.write(decoded);
+        summary.textContent = `${decoded.length} characters`;
+        toast("Decrypted");
+      }
+    } catch (caught) {
+      error.write(caught?.message || "That did not work.");
+    }
+  }
+
+  show.addEventListener("change", () => {
+    password.type = show.checked ? "text" : "password";
+  });
+
+  const run = button("Encrypt text", { icon: "lock", kind: "fill", onclick: act });
+  const copy = copyButton(() => result.textContent, "Copy result");
+  const clear = button("Clear", {
+    icon: "trash",
+    kind: "quiet",
+    onclick: () => {
+      message.value = "";
+      password.value = "";
+      result.write("");
+      summary.textContent = "";
+      error.write("");
+      message.focus();
+    },
+  });
+
+  sync();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        el("div", { class: "grid gap-1.5" }, el("span", { class: "text-sm font-semibold text-ink-2" }, "Mode"), modeRow),
+        panel("Message", message),
+        panel("Password", password),
+        showLabel,
+        error
+      ),
+      stack(summary, result,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "AES-256-GCM with a key stretched by PBKDF2-SHA-256. The salt and IV are packed into the output, so one string is all you need to decrypt. A lost password cannot be recovered, which is the point."))
+    ),
+    foot: actions(clear, copy, run),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/file-hash.js

@@ -0,0 +1,154 @@
+// The hash of a file, to compare against a published checksum. The file is read
+// here with Web Crypto, so a download can be verified before it is opened.
+import {
+  el, icon, toast, bench, stack, panel, textInput, button, actions, toolcard,
+  blank, notice, copyButton, output,
+} from "../core.js";
+import { dropzone, formatBytes } from "../files.js";
+
+const ALGORITHMS = [
+  { id: "SHA-1", label: "SHA-1" },
+  { id: "SHA-256", label: "SHA-256" },
+  { id: "SHA-512", label: "SHA-512" },
+];
+
+function hex(bytes) {
+  return [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+export function mount(slot) {
+  let file = null;
+  let digests = {};
+
+  const expected = textInput({
+    placeholder: "Paste the published checksum",
+    "aria-label": "Expected checksum",
+    class: "font-mono text-sm",
+    autocomplete: "off",
+    spellcheck: "false",
+  });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const verdictTitle = el("p", { class: "m-0 text-lg font-bold" }, "Waiting");
+  const verdictBody = el("p", { class: "m-0 text-sm text-ink-2" }, "Drop a file, then paste the checksum you were given.");
+  const verdict = el("div", { class: "grid gap-1 rounded-r2 border border-orbit bg-deck-2 p-4" }, verdictTitle, verdictBody);
+  const rows = el("div", { class: "grid gap-2" });
+  const empty = blank("file-key", "Drop a file to hash it.");
+
+  const drop = dropzone({ label: "Drop a file here", accept: "", iconName: "file-key" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+
+  function paint(state, title, body) {
+    const tone = state === "ok"
+      ? "border-jade bg-jade-soft"
+      : state === "bad"
+        ? "border-danger/40 bg-danger/10"
+        : "border-orbit bg-deck-2";
+    verdict.className = `grid gap-1 rounded-r2 border p-4 ${tone}`;
+    verdictTitle.textContent = title;
+    verdictTitle.className = `m-0 text-lg font-bold ${state === "ok" ? "text-jade" : state === "bad" ? "text-danger" : ""}`;
+    verdictBody.textContent = body;
+    verdictBody.className = state === "ok" || state === "bad" ? "m-0 text-sm" : "m-0 text-sm text-ink-2";
+  }
+
+  function compare() {
+    if (!file) {
+      paint("idle", "Waiting", "Drop a file, then paste the checksum you were given.");
+      return;
+    }
+    const wanted = expected.value.replace(/\s+/g, "").toLowerCase();
+    if (!wanted) {
+      paint("idle", "Ready", "Paste a checksum to compare, or copy one below.");
+      return;
+    }
+    const match = Object.entries(digests).find(([, value]) => value === wanted);
+    if (match) {
+      paint("ok", "Match", `The file matches the ${match[0]} you pasted.`);
+    } else {
+      const length = wanted.length;
+      const sameLength = Object.entries(digests).find(([, value]) => value.length === length);
+      paint(
+        "bad",
+        "No match",
+        sameLength
+          ? `That is not the ${sameLength[0]} of this file. Either the file or the checksum is wrong.`
+          : `A checksum of ${length} characters is not a SHA-1, SHA-256 or SHA-512 digest.`
+      );
+    }
+  }
+
+  function renderRows() {
+    rows.replaceChildren(
+      ...ALGORITHMS.map((algorithm) =>
+        el("div", { class: "grid gap-1.5 rounded-r1 border border-orbit bg-deck-2 p-2.5" },
+          el("div", { class: "flex items-center justify-between gap-2" },
+            el("span", { class: "text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase" }, algorithm.label),
+            copyButton(() => digests[algorithm.id] ?? "", "Copy")),
+          el("p", { class: "m-0 wrap-anywhere font-mono text-2xs leading-[1.6] text-ink" }, digests[algorithm.id] ?? "")))
+    );
+  }
+
+  async function open(files) {
+    const picked = Array.from(files)[0];
+    if (!picked) return;
+    error.write("");
+    summary.textContent = `Reading ${picked.name}`;
+    try {
+      const bytes = await picked.arrayBuffer();
+      const next = {};
+      for (const algorithm of ALGORITHMS) {
+        const digest = await crypto.subtle.digest(algorithm.id, bytes);
+        next[algorithm.id] = hex(new Uint8Array(digest));
+      }
+      file = picked;
+      digests = next;
+      summary.textContent = `${picked.name} · ${formatBytes(picked.size)}`;
+      empty.hidden = true;
+      rows.hidden = false;
+      renderRows();
+      compare();
+    } catch (caught) {
+      summary.textContent = "";
+      error.write(caught?.message || "This file could not be read.");
+    }
+  }
+
+  drop.onFiles(open);
+  expected.addEventListener("input", compare);
+  clearButton.addEventListener("click", () => {
+    file = null;
+    digests = {};
+    expected.value = "";
+    summary.textContent = "";
+    error.write("");
+    rows.replaceChildren();
+    rows.hidden = true;
+    empty.hidden = false;
+    paint("idle", "Waiting", "Drop a file, then paste the checksum you were given.");
+  });
+
+  paint("idle", "Waiting", "Drop a file, then paste the checksum you were given.");
+  rows.hidden = true;
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        panel("Expected checksum", expected, "SHA-1, SHA-256 or SHA-512. Case and spaces are ignored."),
+        verdict,
+        error,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "The file is read in this tab. Nothing is uploaded, and the size limit is whatever the browser can hold in memory.")
+      ),
+      stack(summary, empty, rows)
+    ),
+    foot: actions(clearButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,149 @@
+// A passphrase from a bundled word list. The entropy reading is arithmetic on
+// the size of that list, not an estimate: log2(length) bits per word.
+import {
+  el, icon, toast, bench, stack, panel, numberInput, selectInput, button,
+  actions, toolcard, notice, checkbox, rangeInput, copyButton, chipRow,
+} from "../core.js";
+
+const WORDS = `acorn amber anchor apple arrow aspen attic autumn badge bagel baker bamboo
+banjo barrel basil basket beach beacon bean bear beaver bell belt bench berry birch biscuit
+bison blade blanket bloom board boat bolt bonfire book boot bottle boulder bowl box braid branch
+brass bread brick bridge broom brush bubble bucket buffalo bugle bulb bunny burrow bus butter
+button cabin cactus camel candle candy canoe canvas canyon carbon cargo carpet carrot cart castle
+cedar chalk cherry chess chest chicken chisel cider cinema circle city clamp clay cliff cloak clock
+cloud clover coach coast cobra cocoa comet compass copper coral cork corn cotton couch cougar
+country court cove crab crane crater crayon creek crest cricket crimson crow crown crystal cube
+cupboard curl curtain cycle daisy dance dawn deer delta denim desert desk diamond dice diner dock
+dolphin dome donkey door dove dragon drift drum dune dusk eagle earth easel echo egg elbow elder
+elk ember engine envelope falcon fang farm feather fence fern ferry field fig finch fire fish flag
+flame flask fleet flint float flock flute foam fog forest fork fossil fountain fox frame frost fruit
+galley garden garlic gate gecko gem ginger glacier glass glove goat gold goose gourd grain grape
+grass gravel green grove guitar gull gust hammer harbor harp harvest hawk hay hedge helmet heron
+hill hinge hive holly honey hoof hook horn horse hotel hut iceberg ink inlet iron island ivory ivy
+jacket jade jaguar jar jasmine jelly jewel jigsaw jungle juniper kayak kettle key kite kitten kiwi
+knife knot koala ladder lagoon lake lamp lantern lapel laser latch lattice leaf ledge lemon lens
+letter lever lily lime linen lion lizard lobster lock log lotus lumber lunar lynx magnet magneto
+maize mango maple marble march marsh mask mast meadow medal melon mesa metal meteor mint mirror
+mist mitten mole monkey moon moose mortar moss moth motor mound mountain mouse mushroom music
+napkin needle nest nettle nickel night noodle north note nugget oak oasis ocean olive onion opal
+orange orbit orchid otter oven owl oxide oyster paddle page palm panda panel paper parcel parrot
+pasture patio peach peanut pear pebble pelican pen pencil pepper perch petal piano picnic pier
+pigeon pillar pine piston pitcher plain plane planet plank plant plaster plate plaza plum pocket
+pond pony poppy porch portal potato prairie prism pumpkin puzzle quail quarry quartz quill quiver
+rabbit radar raft rail rain rake ram ranch raven ravine ray razor reef relay ribbon rice ridge
+rifle ring river road robin rocket rod roof root rope rose rowboat ruby rug ruler saddle sage sail
+salmon sand sapphire satchel saw scarf school scooter scout sea seal seed shade shark sheep shelf
+shell shield ship shoe shore shovel shrub silk silver siren skate sketch sky sled slope snail snake
+snow soap sock sofa solar song soup sparrow spice spider spike spine sponge spoon spring spruce
+square squid stable stack star statue steam steel stem step stick stone stool storm stove strap
+stream street string sugar summer sun swan sweat sweet swift swing table tackle tail talon tank
+tapir tea teal temple tent thistle thorn thread thunder tide tiger timber tin toad toast tomato
+tone tool tooth topaz torch tower track trail train trap tray tree trek trench tribe trout truck
+trumpet trunk tulip tunnel turtle twig valley vanilla vase velvet vine violet violin vista wagon
+walnut walrus wand wave wax wheat wheel whip whisper willow wind window wing winter wire wolf wood
+wool wrench yacht yarn yellow yew zebra zinc zipper zone`.split(/\s+/).filter(Boolean);
+
+const SEPARATORS = [
+  { value: "-", label: "hyphen" },
+  { value: " ", label: "space" },
+  { value: ".", label: "dot" },
+  { value: "_", label: "underscore" },
+];
+
+export function mount(slot) {
+  let phrase = "";
+
+  const count = rangeInput({ min: "2", max: "12", step: "1", value: "5", "aria-label": "Words" });
+  const countLabel = el("span", { class: "text-sm font-semibold text-ink-2 tabular-nums" }, "5 words");
+  const separator = selectInput(SEPARATORS, { value: "-", "aria-label": "Separator" });
+  const capitalize = checkbox("Capitalize each word", { checked: false });
+  const number = checkbox("Add a number", { checked: false });
+  const symbol = checkbox("Add a symbol", { checked: false });
+
+  const error = notice("warn");
+  const output = el("p", {
+    class: "m-0 wrap-anywhere font-mono text-[clamp(20px,3.4vw,28px)] font-bold leading-[1.4] tracking-[-0.01em] text-ink",
+    "aria-live": "polite",
+  }, "");
+  const entropy = el("p", { class: "m-0 text-sm text-ink-2" });
+  const panelBody = el("div", { class: "grid gap-2 rounded-r2 border border-orbit bg-deck-2 p-4" }, output, entropy);
+
+  function make() {
+    error.write("");
+    if (!WORDS.length) {
+      error.write("The word list is empty.");
+      return;
+    }
+    const size = Math.max(2, Math.min(12, Number(count.value) || 5));
+    const random = crypto.getRandomValues(new Uint32Array(size + 2));
+    const parts = [];
+    for (let i = 0; i < size; i++) {
+      let word = WORDS[random[i] % WORDS.length];
+      if (capitalize.input.checked) word = word[0].toUpperCase() + word.slice(1);
+      parts.push(word);
+    }
+    if (number.input.checked) parts.push(String(random[size] % 100));
+    if (symbol.input.checked) parts.push("!@#$%&*?"[random[size + 1] % 9]);
+
+    const join = separator.value === " " ? " " : separator.value;
+    phrase = parts.join(join);
+
+    // Each word is log2(WORDS.length) bits, because every index is equally
+    // likely. The optional number and symbol add about 6.6 and 3.2 bits.
+    const bits = size * Math.log2(WORDS.length) + (number.input.checked ? Math.log2(100) : 0) + (symbol.input.checked ? Math.log2(9) : 0);
+    // Half the space on average, at 100 billion guesses a second.
+    const seconds = 2 ** (bits - 1) / 1e11;
+    entropy.textContent = `${Math.round(bits)} bits · ${formatTime(seconds)} to guess at 100 billion tries a second`;
+    output.textContent = phrase;
+  }
+
+  function formatTime(seconds) {
+    if (seconds < 1) return "under a second";
+    if (seconds < 60) return `about ${Math.round(seconds)} seconds`;
+    const years = seconds / 31_557_600;
+    if (seconds < 3600) return `about ${Math.max(1, Math.round(seconds / 60))} minutes`;
+    if (seconds < 86400) return `about ${Math.round(seconds / 3600)} hours`;
+    if (years < 1) return `about ${Math.round(seconds / 86400)} days`;
+    if (years < 1000) return `about ${Math.round(years)} years`;
+    if (years < 1e6) return `about ${Math.round(years / 1000)} thousand years`;
+    if (years < 1e9) return `about ${Math.round(years / 1e6)} million years`;
+    return "longer than the universe has existed";
+  }
+
+  count.addEventListener("input", () => {
+    countLabel.textContent = `${count.value} word${count.value === "1" ? "" : "s"}`;
+    make();
+  });
+  separator.addEventListener("change", make);
+  capitalize.input.addEventListener("change", make);
+  number.input.addEventListener("change", make);
+  symbol.input.addEventListener("change", make);
+
+  const regenerate = button("Generate", { icon: "refresh-cw", kind: "fill", onclick: make });
+  const copy = copyButton(() => phrase, "Copy passphrase");
+
+  make();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        el("div", { class: "grid gap-1.5" }, el("span", { class: "text-sm font-semibold text-ink-2" }, "Words"), count, countLabel),
+        panel("Separator", separator),
+        capitalize,
+        number,
+        symbol,
+        error
+      ),
+      stack(panelBody,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "The word list is bundled with the app, so this works offline. Each word is worth about 9 bits; five words is about 46 bits, which suits a login with rate limiting. Use more words for anything that protects money."))
+    ),
+    foot: actions(regenerate, copy),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,178 @@
+// The code an authenticator app would show, from a secret you paste. The HMAC
+// runs here, so a real secret never has to be typed into a website.
+import {
+  el, icon, toast, bench, stack, panel, textInput, selectInput, numberInput,
+  button, actions, toolcard, notice, copyButton, checkbox,
+} from "../core.js";
+import { base32Decode, parseOtpUri, totp, stepProgress, formatSecret, randomSecret } from "../totp.js";
+
+export function mount(slot) {
+  let secretBytes = null;
+  let timer = null;
+  let current = "";
+
+  const secret = textInput({
+    placeholder: "JBSWY3DPEHPK3PXP or otpauth://totp/...",
+    "aria-label": "Secret",
+    class: "font-mono",
+    autocomplete: "off",
+    spellcheck: "false",
+  });
+  const digits = selectInput(
+    [
+      { value: "6", label: "6 digits" },
+      { value: "8", label: "8 digits" },
+    ],
+    { value: "6", "aria-label": "Digits" }
+  );
+  const period = numberInput({ min: "5", max: "300", step: "1", value: "30", "aria-label": "Period in seconds" });
+  const algorithm = selectInput(
+    [
+      { value: "SHA1", label: "SHA-1" },
+      { value: "SHA256", label: "SHA-256" },
+      { value: "SHA512", label: "SHA-512" },
+    ],
+    { value: "SHA1", "aria-label": "Algorithm" }
+  );
+  const showSecret = checkbox("Show the secret", { checked: false });
+
+  const error = notice("warn");
+  const code = el("p", {
+    class: "m-0 font-mono text-[clamp(38px,9vw,62px)] font-bold leading-none tracking-[0.14em] text-ink tabular-nums",
+    "aria-live": "polite",
+  }, "------");
+  const meta = el("p", { class: "m-0 text-sm text-ink-2" }, "Paste a secret to start.");
+  const ring = el("div", { class: "h-1.5 overflow-hidden rounded-full bg-deck-2" },
+    el("div", { class: "h-full w-full rounded-full bg-jade transition-[width] duration-1000 ease-linear" }));
+  const panelBody = el("div", { class: "grid gap-3 rounded-r2 border border-orbit bg-deck-2 p-4" }, code, meta, ring);
+
+  function stop() {
+    clearInterval(timer);
+    timer = null;
+  }
+
+  function readSecret() {
+    const raw = secret.value.trim();
+    if (!raw) return null;
+    const uri = parseOtpUri(raw);
+    if (uri) {
+      if (uri.type !== "totp") throw new Error("That URI is for a different kind of token, not TOTP.");
+      if (!uri.secret) throw new Error("That otpauth URI has no secret in it.");
+      if (uri.digits) digits.value = String(uri.digits === 8 ? 8 : 6);
+      if (uri.period) period.value = String(uri.period);
+      if (uri.algorithm) algorithm.value = ["SHA1", "SHA256", "SHA512"].includes(uri.algorithm) ? uri.algorithm : "SHA1";
+      return { bytes: base32Decode(uri.secret), label: uri.issuer || uri.label };
+    }
+    return { bytes: base32Decode(raw), label: "" };
+  }
+
+  async function tick() {
+    if (!secretBytes) return;
+    const options = {
+      digits: Number(digits.value) || 6,
+      period: Math.max(5, Number(period.value) || 30),
+      algorithm: algorithm.value,
+    };
+    try {
+      const next = await totp(secretBytes, options);
+      const { left, ratio } = stepProgress(options.period);
+      if (next !== current) {
+        current = next;
+        code.textContent = next.replace(/(.{3})(?=.)/g, "$1 ");
+      }
+      meta.textContent = `${Math.ceil(left)} s left · ${options.period} s period · ${options.digits} digits · ${options.algorithm}`;
+      ring.firstElementChild.style.width = `${Math.round(ratio * 100)}%`;
+      error.write("");
+    } catch (caught) {
+      error.write(caught?.message || "Could not compute the code.");
+    }
+  }
+
+  function restart() {
+    stop();
+    current = "";
+    try {
+      const parsed = readSecret();
+      if (!parsed) {
+        secretBytes = null;
+        code.textContent = "------";
+        meta.textContent = "Paste a secret to start.";
+        ring.firstElementChild.style.width = "100%";
+        error.write("");
+        return;
+      }
+      secretBytes = parsed.bytes;
+      meta.textContent = parsed.label ? `${parsed.label} · reading` : "Reading the secret";
+      tick();
+      timer = setInterval(tick, 500);
+    } catch (caught) {
+      secretBytes = null;
+      code.textContent = "------";
+      meta.textContent = "";
+      error.write(caught?.message || "That secret could not be read.");
+    }
+  }
+
+  secret.addEventListener("input", restart);
+  digits.addEventListener("change", restart);
+  period.addEventListener("change", restart);
+  algorithm.addEventListener("change", restart);
+
+  showSecret.input.addEventListener("change", () => {
+    secret.type = showSecret.input.checked ? "text" : "password";
+    secret.classList.toggle("font-mono", true);
+  });
+  secret.type = "password";
+
+  const copyCode = copyButton(() => code.textContent.replace(/\s+/g, ""), "Copy code");
+  const newSecret = button("New secret", {
+    icon: "refresh-cw",
+    onclick: () => {
+      secret.type = "text";
+      showSecret.input.checked = true;
+      secret.value = randomSecret(20);
+      restart();
+      toast("New secret generated");
+    },
+  });
+  const copySecret = button("Copy secret", {
+    icon: "key-round",
+    onclick: async () => {
+      if (!secret.value.trim()) return;
+      const value = formatSecret(secret.value.trim().startsWith("otpauth") ? parseOtpUri(secret.value).secret : secret.value);
+      try {
+        await navigator.clipboard.writeText(value);
+        toast("Secret copied");
+      } catch {
+        error.write("The clipboard is blocked here.");
+      }
+    },
+  });
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Secret", secret, "Base32, or a full otpauth:// URI."),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Digits", digits), panel("Period", period)),
+        panel("Algorithm", algorithm),
+        showSecret,
+        error
+      ),
+      stack(panelBody,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "The code is computed in this tab with Web Crypto. Nothing is sent anywhere, and the secret is not stored."))
+    ),
+    foot: actions(newSecret, copySecret, copyCode),
+  });
+
+  slot.append(shell.node);
+  restart();
+
+  return {
+    unmount() {
+      stop();
+    },
+  };
+}
+
+export default { mount };

package/mevebu/libs/js/tools/totp-verifier.js

@@ -0,0 +1,183 @@
+// Check a code against a secret, with a drift window. This is the other half of
+// the generator: a failing integration needs to know whether the secret or the
+// clock is wrong, and the drift count is the answer.
+import {
+  el, icon, bench, stack, panel, textInput, selectInput, numberInput, button,
+  actions, toolcard, notice, chipRow,
+} from "../core.js";
+import { base32Decode, parseOtpUri, totp } from "../totp.js";
+
+export function mount(slot) {
+  let result = null;
+
+  const secret = textInput({
+    placeholder: "JBSWY3DPEHPK3PXP or otpauth://totp/...",
+    "aria-label": "Secret",
+    class: "font-mono",
+    autocomplete: "off",
+    spellcheck: "false",
+  });
+  const codeInput = textInput({
+    placeholder: "123456",
+    "aria-label": "Code",
+    class: "font-mono tracking-[0.2em]",
+    inputmode: "numeric",
+    autocomplete: "off",
+  });
+  const digits = selectInput(
+    [
+      { value: "6", label: "6 digits" },
+      { value: "8", label: "8 digits" },
+    ],
+    { value: "6", "aria-label": "Digits" }
+  );
+  const period = numberInput({ min: "5", max: "300", step: "1", value: "30", "aria-label": "Period in seconds" });
+  const drift = numberInput({ min: "0", max: "10", step: "1", value: "1", "aria-label": "Drift steps" });
+
+  const at = el("input", {
+    class: "w-full min-h-[var(--ctl)] rounded-r1 border border-orbit bg-deck px-3 py-2.5 font-mono text-sm focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft",
+    type: "datetime-local",
+    "aria-label": "Timestamp",
+  });
+
+  const error = notice("warn");
+  const verdict = el("div", { class: "grid gap-1.5 rounded-r2 border border-orbit bg-deck-2 p-4" });
+  const verdictTitle = el("p", { class: "m-0 text-xl font-bold tracking-[-0.02em]" }, "Waiting");
+  const verdictBody = el("p", { class: "m-0 text-sm leading-[1.6] text-ink-2" }, "Paste a secret and a code.");
+  const candidates = el("div", { class: "grid gap-1.5" });
+  verdict.append(verdictTitle, verdictBody, candidates);
+
+  const check = button("Check code", { icon: "shield-check", kind: "fill" });
+
+  function readSecret() {
+    const raw = secret.value.trim();
+    if (!raw) return null;
+    const uri = parseOtpUri(raw);
+    if (uri) {
+      if (uri.secret) {
+        if (uri.digits) digits.value = String(uri.digits === 8 ? 8 : 6);
+        if (uri.period) period.value = String(uri.period);
+      }
+      return base32Decode(uri.secret);
+    }
+    return base32Decode(raw);
+  }
+
+  function paint(state, title, body, rows = []) {
+    const tone = state === "ok"
+      ? "border-jade bg-jade-soft text-jade"
+      : state === "bad"
+        ? "border-danger/40 bg-danger/10 text-danger"
+        : "border-orbit bg-deck-2 text-ink";
+    verdict.className = `grid gap-1.5 rounded-r2 border p-4 ${tone}`;
+    verdictTitle.textContent = title;
+    verdictBody.textContent = body;
+    verdictBody.className = state === "ok" || state === "bad" ? "m-0 text-sm leading-[1.6]" : "m-0 text-sm leading-[1.6] text-ink-2";
+    candidates.replaceChildren(
+      ...rows.map((row) =>
+        el("div", { class: "flex items-center justify-between gap-3 border-t border-current/15 pt-1.5 text-sm" },
+          el("span", { class: "font-mono text-2xs tabular-nums" }, row.code),
+          el("span", { class: "text-2xs font-semibold" }, row.label)))
+    );
+  }
+
+  async function run() {
+    error.write("");
+    candidates.replaceChildren();
+    try {
+      const bytes = readSecret();
+      if (!bytes) {
+        paint("idle", "Waiting", "Paste a secret and a code.");
+        return;
+      }
+      const typed = codeInput.value.replace(/\s+/g, "");
+      if (!/^\d{4,10}$/.test(typed)) {
+        paint("idle", "Waiting", "The code should be digits only.");
+        return;
+      }
+
+      const size = Number(digits.value) || 6;
+      const step = Math.max(5, Number(period.value) || 30);
+      const window = Math.max(0, Math.min(10, Number(drift.value) || 0));
+      const stamp = at.value ? new Date(at.value).getTime() : Date.now();
+      if (Number.isNaN(stamp)) throw new Error("That timestamp is not a date.");
+
+      const rows = [];
+      let match = null;
+      for (let offset = -window; offset <= window; offset++) {
+        const candidate = await totp(bytes, {
+          digits: size,
+          period: step,
+          timestamp: stamp + offset * step * 1000,
+        });
+        const label = offset === 0 ? "current step" : offset < 0 ? `${-offset} step earlier` : `${offset} step later`;
+        rows.push({ code: candidate, label });
+        if (candidate === typed && !match) match = { offset, code: candidate };
+      }
+
+      if (match) {
+        paint(
+          "ok",
+          "Match",
+          match.offset === 0
+            ? "The code is valid for the current step."
+            : `The code is valid, ${Math.abs(match.offset)} step${Math.abs(match.offset) === 1 ? "" : "s"} ${match.offset < 0 ? "earlier" : "later"} than the current one.`,
+          rows
+        );
+      } else {
+        paint(
+          "bad",
+          "No match",
+          `None of the ${rows.length} steps around that time produce ${typed}. Check the secret, the digits and the period.`,
+          rows
+        );
+      }
+    } catch (caught) {
+      paint("idle", "Waiting", "");
+      error.write(caught?.message || "That secret could not be read.");
+    }
+  }
+
+  check.addEventListener("click", run);
+  secret.addEventListener("input", run);
+  codeInput.addEventListener("input", run);
+  digits.addEventListener("change", run);
+  period.addEventListener("change", run);
+  drift.addEventListener("input", run);
+  at.addEventListener("change", run);
+
+  const useNow = button("Use now", {
+    icon: "clock",
+    kind: "quiet",
+    onclick: () => {
+      const now = new Date();
+      const local = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
+      at.value = local;
+      run();
+    },
+  });
+
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Secret", secret, "Base32, or a full otpauth:// URI."),
+        panel("Code to check", codeInput),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Digits", digits), panel("Period", period)),
+        panel("Drift window", drift, "How many steps either side to accept. One is the usual allowance."),
+        panel("Timestamp", at, "Leave empty to use the clock now."),
+        useNow,
+        error
+      ),
+      stack(verdict)
+    ),
+    foot: actions(check),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/totp.js

@@ -0,0 +1,117 @@
+// TOTP, the six digit code an authenticator app shows. RFC 6238 over RFC 4226,
+// with HMAC from Web Crypto, so the secret never leaves the tab.
+//
+// The secret is Base32, which is why this file carries a decoder: every
+// `otpauth://` URI and every authenticator export uses that alphabet.
+
+const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
+
+/** Base32 to bytes. Case insensitive, spaces and padding ignored. */
+export function base32Decode(input) {
+  const clean = String(input).toUpperCase().replace(/[\s=-]/g, "");
+  if (!clean) throw new Error("The secret is empty.");
+  let bits = 0;
+  let value = 0;
+  const out = [];
+  for (const char of clean) {
+    const index = ALPHABET.indexOf(char);
+    if (index < 0) throw new Error(`"${char}" is not a Base32 character.`);
+    value = (value << 5) | index;
+    bits += 5;
+    if (bits >= 8) {
+      out.push((value >>> (bits - 8)) & 0xff);
+      bits -= 8;
+    }
+  }
+  if (!out.length) throw new Error("That secret decodes to no bytes.");
+  return new Uint8Array(out);
+}
+
+/** Parses an `otpauth://totp/...` URI into its parts, or returns null. */
+export function parseOtpUri(text) {
+  const clean = String(text).trim();
+  if (!clean.toLowerCase().startsWith("otpauth://")) return null;
+  let url;
+  try {
+    url = new URL(clean);
+  } catch {
+    throw new Error("That otpauth URI is not a valid URL.");
+  }
+  const params = url.searchParams;
+  const label = decodeURIComponent(url.pathname.replace(/^\/+/, ""));
+  return {
+    type: (url.hostname || "totp").toLowerCase(),
+    label,
+    issuer: params.get("issuer") ?? "",
+    secret: params.get("secret") ?? "",
+    digits: Number(params.get("digits") ?? 6),
+    period: Number(params.get("period") ?? 30),
+    algorithm: (params.get("algorithm") ?? "SHA1").toUpperCase().replace("-", ""),
+  };
+}
+
+const HASH = { SHA1: "SHA-1", SHA256: "SHA-256", SHA512: "SHA-512" };
+
+/** HOTP for one counter value, as a zero padded string. */
+export async function hotp(secret, counter, { digits = 6, algorithm = "SHA1" } = {}) {
+  const hash = HASH[algorithm] ?? "SHA-1";
+  const key = await crypto.subtle.importKey(
+    "raw",
+    secret,
+    { name: "HMAC", hash },
+    false,
+    ["sign"]
+  );
+  // The counter is an 8 byte big endian integer. JavaScript numbers lose
+  // precision above 2^53, so the high word is written separately.
+  const buffer = new ArrayBuffer(8);
+  const view = new DataView(buffer);
+  view.setUint32(0, Math.floor(counter / 2 ** 32));
+  view.setUint32(4, counter >>> 0);
+  const signature = new Uint8Array(await crypto.subtle.sign("HMAC", key, buffer));
+
+  // Dynamic truncation, RFC 4226 section 5.4.
+  const offset = signature[signature.length - 1] & 0x0f;
+  const binary =
+    ((signature[offset] & 0x7f) << 24) |
+    (signature[offset + 1] << 16) |
+    (signature[offset + 2] << 8) |
+    signature[offset + 3];
+  return String(binary % 10 ** digits).padStart(digits, "0");
+}
+
+/** The TOTP code for a timestamp in milliseconds. */
+export async function totp(secret, { digits = 6, period = 30, algorithm = "SHA1", timestamp = Date.now() } = {}) {
+  const counter = Math.floor(timestamp / 1000 / period);
+  return hotp(secret, counter, { digits, algorithm });
+}
+
+/** Seconds left in the current step, and how far through it we are. */
+export function stepProgress(period = 30, timestamp = Date.now()) {
+  const seconds = timestamp / 1000;
+  const left = period - (seconds % period);
+  return { left, ratio: left / period };
+}
+
+/** The secret as spaced groups, which is how authenticator apps show it. */
+export function formatSecret(text) {
+  return String(text).toUpperCase().replace(/[^A-Z2-7]/g, "").replace(/(.{4})/g, "$1 ").trim();
+}
+
+/** A random Base32 secret of the given byte length. */
+export function randomSecret(bytes = 20) {
+  const raw = crypto.getRandomValues(new Uint8Array(bytes));
+  let bits = 0;
+  let value = 0;
+  let out = "";
+  for (const byte of raw) {
+    value = (value << 8) | byte;
+    bits += 8;
+    while (bits >= 5) {
+      out += ALPHABET[(value >>> (bits - 5)) & 31];
+      bits -= 5;
+    }
+  }
+  if (bits > 0) out += ALPHABET[(value << (5 - bits)) & 31];
+  return out;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",