mevebu 2.0.0 → 2.2.0

package/mevebu/libs/js/tools/time-series.js

@@ -0,0 +1,191 @@
+// A dated series with a trend, a season and noise, so a demo chart looks like
+// data instead of a random walk. Seeded, and the shape is previewed before it
+// is downloaded.
+import {
+  el, toast, download, bench, stack, panel, numberInput, textInput, selectInput,
+  button, actions, toolcard, notice,
+} from "../core.js";
+import { toCsv } from "../csv.js";
+import { seeded, gaussian } from "../random.js";
+
+const FREQUENCIES = [
+  { value: "hour", label: "Hourly" },
+  { value: "day", label: "Daily" },
+  { value: "week", label: "Weekly" },
+  { value: "month", label: "Monthly" },
+];
+
+function step(date, frequency) {
+  const next = new Date(date);
+  if (frequency === "hour") next.setHours(next.getHours() + 1);
+  else if (frequency === "day") next.setDate(next.getDate() + 1);
+  else if (frequency === "week") next.setDate(next.getDate() + 7);
+  else next.setMonth(next.getMonth() + 1);
+  return next;
+}
+
+function iso(date, frequency) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  if (frequency === "hour") return `${year}-${month}-${day} ${String(date.getHours()).padStart(2, "0")}:00`;
+  return `${year}-${month}-${day}`;
+}
+
+export function mount(slot) {
+  const start = el("input", {
+    class: "w-full min-h-[var(--ctl)] rounded-r1 border border-orbit bg-deck px-3 py-2.5 text-base focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft",
+    type: "date",
+    value: (() => {
+      const now = new Date();
+      return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+    })(),
+    "aria-label": "Start date",
+  });
+  const frequency = selectInput(FREQUENCIES, { value: "day", "aria-label": "Frequency" });
+  const length = numberInput({ min: "2", max: "2000", step: "1", value: "60", "aria-label": "Points" });
+  const base = numberInput({ value: "100", step: "1", "aria-label": "Base value" });
+  const trend = numberInput({ value: "0.4", step: "0.1", "aria-label": "Trend per point" });
+  const season = numberInput({ value: "12", step: "1", "aria-label": "Season amplitude" });
+  const period = numberInput({ min: "2", max: "365", step: "1", value: "7", "aria-label": "Season period" });
+  const noise = numberInput({ min: "0", max: "100", step: "0.5", value: "4", "aria-label": "Noise" });
+  const seed = textInput({ value: "mevebu", "aria-label": "Seed", class: "font-mono" });
+  const spikeDate = el("input", {
+    class: "w-full min-h-[var(--ctl)] rounded-r1 border border-orbit bg-deck px-3 py-2.5 text-base focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft",
+    type: "date",
+    "aria-label": "Spike date",
+  });
+  const spikeMultiplier = numberInput({ value: "2", step: "0.1", "aria-label": "Spike multiplier" });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const chart = el("div", { class: "grid gap-2 rounded-r2 border border-orbit bg-deck-2 p-3" });
+  const result = el("pre", { class: "m-0 max-h-56 overflow-auto rounded-r2 border border-orbit bg-deck-2 p-3 font-mono text-2xs leading-[1.6]" });
+
+  let series = [];
+
+  function build() {
+    const count = Math.max(2, Math.min(2000, Number(length.value) || 2));
+    const random = seeded(seed.value || "mevebu");
+    const amp = Number(season.value) || 0;
+    const slope = Number(trend.value) || 0;
+    const spread = Number(noise.value) || 0;
+    const wave = Math.max(2, Number(period.value) || 7);
+    const startDate = new Date(`${start.value}T00:00:00`);
+    if (Number.isNaN(startDate.getTime())) {
+      error.write("Pick a start date.");
+      return;
+    }
+
+    const out = [];
+    let date = startDate;
+    for (let i = 0; i < count; i++) {
+      const seasonal = amp * Math.sin((2 * Math.PI * i) / wave);
+      const drift = slope * i;
+      const jitter = spread ? gaussian(random, 0, spread) : 0;
+      out.push({ date: iso(date, frequency.value), value: Number((Number(base.value || 0) + drift + seasonal + jitter).toFixed(2)) });
+      date = step(date, frequency.value);
+    }
+
+    if (spikeDate.value && Number(spikeMultiplier.value)) {
+      const target = spikeDate.value;
+      const hit = out.find((point) => point.date.startsWith(target));
+      if (hit) hit.value = Number((hit.value * Number(spikeMultiplier.value)).toFixed(2));
+      else error.write("The spike date is outside the series, so it was skipped.");
+    }
+
+    series = out;
+    render();
+  }
+
+  function render() {
+    if (!series.length) {
+      summary.textContent = "";
+      chart.replaceChildren();
+      result.textContent = "";
+      return;
+    }
+    const values = series.map((point) => point.value);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const span = max - min || 1;
+    const width = 100;
+    const height = 34;
+
+    // One polyline, drawn in a fixed viewBox, so the preview scales without a
+    // chart library.
+    const points = series
+      .map((point, index) => {
+        const x = (index / Math.max(1, series.length - 1)) * width;
+        const y = height - ((point.value - min) / span) * height;
+        return `${x.toFixed(2)},${y.toFixed(2)}`;
+      })
+      .join(" ");
+
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    svg.setAttribute("preserveAspectRatio", "none");
+    svg.setAttribute("class", "h-40 w-full");
+    svg.setAttribute("role", "img");
+    svg.setAttribute("aria-label", `Series preview, ${series.length} points`);
+    const line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
+    line.setAttribute("points", points);
+    line.setAttribute("fill", "none");
+    line.setAttribute("stroke", "var(--jade)");
+    line.setAttribute("stroke-width", "0.7");
+    line.setAttribute("vector-effect", "non-scaling-stroke");
+    svg.append(line);
+
+    chart.replaceChildren(
+      svg,
+      el("div", { class: "flex justify-between text-2xs text-ink-3 tabular-nums" },
+        el("span", {}, series[0].date),
+        el("span", {}, `${min} to ${max}`),
+        el("span", {}, series[series.length - 1].date))
+    );
+
+    const preview = [["date", "value"], ...series.slice(0, 40).map((point) => [point.date, String(point.value)])];
+    result.textContent = toCsv(preview) + (series.length > 40 ? `\n… ${series.length - 40} more rows` : "");
+    summary.textContent = `${series.length} points · ${frequency.value} · ${min} to ${max} · seed ${seed.value || "mevebu"}`;
+  }
+
+  for (const node of [start, frequency, length, base, trend, season, period, noise, seed, spikeDate, spikeMultiplier]) {
+    node.addEventListener("input", build);
+    node.addEventListener("change", build);
+  }
+
+  const downloadButton = button("Download CSV", {
+    icon: "download",
+    kind: "fill",
+    onclick: () => {
+      if (!series.length) return;
+      download("series.csv", toCsv([["date", "value"], ...series.map((point) => [point.date, String(point.value)])]), "text/csv");
+      toast("Series ready");
+    },
+  });
+
+  build();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Start", start), panel("Frequency", frequency)),
+        panel("Points", length),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Base", base), panel("Trend per point", trend)),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Season amplitude", season), panel("Season period", period)),
+        panel("Noise", noise),
+        panel("Seed", seed),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Spike date", spikeDate), panel("Spike ×", spikeMultiplier)),
+        error
+      ),
+      stack(summary, chart, result)
+    ),
+    foot: actions(downloadButton),
+  });
+
+  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.0.0",
+  "version": "2.2.0",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",