mevebu 2.2.0 → 2.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 # mevebu
 
-**210 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
+**215 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-210-brightgreen)
+![Tools](https://img.shields.io/badge/tools-215-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 **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.
+mevebu is a collection of **215 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 **210 tools in 20 categories**. Here is the full breakdown:
+mevebu has **215 tools in 20 categories**. Here is the full breakdown:
 
 | Category           | Tools |
 | ------------------ | ----: |
 | Data Generator     |    10 |
-| Passwords and keys |    15 |
+| Passwords and keys |    20 |
 | Developer          |    21 |
 | Convert            |    15 |
 | Text and data      |    14 |
@@ -88,7 +88,7 @@ mevebu has **210 tools in 20 categories**. Here is the full breakdown:
 | GitHub             |     8 |
 | Units              |     8 |
 | QR codes           |     2 |
-| **Total**          | **210** |
+| **Total**          | **215** |
 
 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 210 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 215 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

@@ -578,6 +578,12 @@
   .min-h-24 {
     min-height: calc(var(--spacing) * 24);
   }
+  .min-h-28 {
+    min-height: calc(var(--spacing) * 28);
+  }
+  .min-h-32 {
+    min-height: calc(var(--spacing) * 32);
+  }
   .min-h-40 {
     min-height: calc(var(--spacing) * 40);
   }
@@ -1041,6 +1047,12 @@
       background-color: color-mix(in oklab, var(--danger) 10%, transparent);
     }
   }
+  .bg-danger\/15 {
+    background-color: var(--danger);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--danger) 15%, transparent);
+    }
+  }
   .bg-deck {
     background-color: var(--deck);
   }

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.2.0";
+export const VERSION = "2.3.0";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/registry.js

@@ -481,6 +481,96 @@ export const TOOLS = [
     keywords: "aes encrypt decrypt password gcm pbkdf2 secret message",
     load: () => import("./tools/aes-text.js"),
   },
+  {
+    id: "rsa-key-pair",
+    category: "security",
+    name: "RSA Key Pair",
+    icon: "key-round",
+    note: "Make an RSA key pair in PEM form.",
+    about: "Generated in this tab with Web Crypto. Public as SPKI, private as PKCS#8.",
+    tutorial: {
+      intro: "Generate an RSA key pair and copy or download the PEM files.",
+      steps: [
+        "Pick a key size. 2048 is the common floor.",
+        "Press Generate pair and wait a moment for larger keys.",
+        "Copy or download the public and private PEM. Closing the page discards them.",
+      ],
+    },
+    keywords: "rsa key pair pem public private ssh jwt tls generate spki pkcs8",
+    load: () => import("./tools/rsa-key-pair.js"),
+  },
+  {
+    id: "bcrypt-hash",
+    category: "security",
+    name: "Bcrypt Hash",
+    icon: "hash",
+    note: "Hash a password with bcrypt, and check one.",
+    about: "Bcrypt with a cost factor you set, run in this tab with a vendored engine.",
+    tutorial: {
+      intro: "Make a bcrypt hash for a test login, or check a password against one you already have.",
+      steps: [
+        "Type a password and pick a cost factor. 10 is a common default.",
+        "Press Hash password. The timing shows how long this device takes.",
+        "To check, paste a stored hash and the password. The verdict updates as you type.",
+      ],
+    },
+    keywords: "bcrypt hash password login test salt cost compare verify",
+    load: () => import("./tools/bcrypt-hash.js"),
+  },
+  {
+    id: "password-policy",
+    category: "security",
+    name: "Password Policy Builder",
+    icon: "list-checks",
+    note: "Turn a password rule into text, a regex, and a checklist.",
+    about: "The wording, the pattern, and a live check all come from the same settings.",
+    tutorial: {
+      intro: "Write a password policy once, in every form you need.",
+      steps: [
+        "Set the length and the character classes.",
+        "Read the rule in plain words and copy the regex.",
+        "Type a sample password to see which part it fails.",
+      ],
+    },
+    keywords: "password policy regex rule requirements checklist enforce",
+    load: () => import("./tools/password-policy.js"),
+  },
+  {
+    id: "secret-scanner",
+    category: "security",
+    name: "Secret Scanner",
+    icon: "shield-alert",
+    note: "Find API keys and tokens before you paste them.",
+    about: "Known shapes for AWS, GitHub, Slack, Stripe, Google, JWTs and private keys.",
+    tutorial: {
+      intro: "Catch a leaked key before it goes into a chat.",
+      steps: [
+        "Paste the text, or drop a file.",
+        "Read the matches with their line numbers. Values are masked by default.",
+        "Rotate anything listed. A clean result is a hint, not a guarantee.",
+      ],
+    },
+    keywords: "secret scanner leak api key token private key aws github slack stripe jwt detect",
+    load: () => import("./tools/secret-scanner.js"),
+  },
+  {
+    id: "ssh-fingerprint",
+    category: "security",
+    name: "SSH Fingerprint",
+    icon: "fingerprint",
+    note: "Read the fingerprint of an SSH public key.",
+    about: "The SHA-256 form a server prints, plus the older MD5 form for comparison.",
+    tutorial: {
+      intro: "Compare a host fingerprint before you trust it.",
+      steps: [
+        "Paste the public key line, for example ssh-ed25519 AAAAC3...",
+        "Read the fingerprint and compare it with the one the host shows.",
+        "Use the MD5 form only for an old server that still prints that.",
+      ],
+    },
+    keywords: "ssh fingerprint public key sha256 md5 host verify known_hosts",
+    load: () => import("./tools/ssh-fingerprint.js"),
+  },
 
   {
     id: "uuid-generator",

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

@@ -0,0 +1,161 @@
+// Bcrypt, for testing a login. The hash and the check both run in this tab with a
+// vendored pure JavaScript build, so no password leaves the page. The cost factor
+// is the point: each step doubles the work, and the timing shows it.
+import {
+  el, toast, bench, stack, panel, textInput, numberInput, button, actions,
+  toolcard, notice, copyButton, output, chipRow,
+} from "../core.js";
+
+const COST_MIN = 4;
+const COST_MAX = 14;
+
+function bcryptLib() {
+  const lib = globalThis.dcodeIO?.bcrypt ?? globalThis.bcrypt;
+  if (!lib) throw new Error("The bcrypt engine did not load.");
+  return lib;
+}
+
+function loadEngine() {
+  if (globalThis.dcodeIO?.bcrypt || globalThis.bcrypt) return Promise.resolve(bcryptLib());
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = new URL("../vendor/bcrypt.min.js", import.meta.url).href;
+    script.onload = () => {
+      try {
+        resolve(bcryptLib());
+      } catch (caught) {
+        reject(caught);
+      }
+    };
+    script.onerror = () => reject(new Error("The bcrypt engine could not be loaded."));
+    document.head.append(script);
+  });
+}
+
+const tick = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+export function mount(slot) {
+  let hashed = "";
+  let busy = false;
+  let token = 0;
+
+  const password = textInput({
+    type: "password",
+    placeholder: "The password to hash",
+    "aria-label": "Password",
+    autocomplete: "new-password",
+  });
+  const show = el("input", { type: "checkbox", class: "m-0 size-4 accent-[var(--jade)]" });
+  const cost = numberInput({ min: String(COST_MIN), max: String(COST_MAX), step: "1", value: "10", "aria-label": "Cost factor" });
+  const costLabel = el("span", { class: "text-sm font-semibold text-ink-2 tabular-nums" }, "");
+
+  const existing = textInput({
+    placeholder: "$2b$10$...",
+    "aria-label": "Hash to check",
+    class: "font-mono text-sm",
+    autocomplete: "off",
+    spellcheck: "false",
+  });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const hashOut = output({ rows: 3 });
+  const verdict = el("p", { class: "m-0 text-sm font-semibold" });
+
+  function syncCost() {
+    const value = Math.max(COST_MIN, Math.min(COST_MAX, Number(cost.value) || 10));
+    costLabel.textContent = `${value} · about ${2 ** value} rounds`;
+  }
+
+  async function hash() {
+    if (busy) return;
+    if (!password.value) {
+      error.write("Type a password first.");
+      return;
+    }
+    busy = true;
+    const current = ++token;
+    error.write("");
+    summary.textContent = "Hashing";
+    try {
+      const lib = await loadEngine();
+      const rounds = Math.max(COST_MIN, Math.min(COST_MAX, Number(cost.value) || 10));
+      await tick();
+      const started = performance.now();
+      const salt = lib.genSaltSync(rounds);
+      const result = lib.hashSync(password.value, salt);
+      const took = performance.now() - started;
+      if (current !== token) return;
+      hashed = result;
+      hashOut.write(result);
+      summary.textContent = `cost ${rounds} · ${Math.round(took)} ms on this device`;
+      toast("Hash ready");
+    } catch (caught) {
+      if (current !== token) return;
+      error.write(caught?.message || "The hash could not be made.");
+    } finally {
+      busy = false;
+    }
+  }
+
+  async function check() {
+    const stored = existing.value.trim();
+    verdict.textContent = "";
+    if (!stored) return;
+    if (!/^\$2[abxy]\$\d{2}\$.{53}$/.test(stored)) {
+      verdict.textContent = "That is not a bcrypt hash. It should start with $2b$ and be 60 characters.";
+      verdict.className = "m-0 text-sm font-semibold text-danger";
+      return;
+    }
+    if (!password.value) {
+      verdict.textContent = "Type the password to check against that hash.";
+      verdict.className = "m-0 text-sm font-semibold text-ink-2";
+      return;
+    }
+    try {
+      const lib = await loadEngine();
+      const ok = lib.compareSync(password.value, stored);
+      verdict.textContent = ok ? "Match: this password produces that hash." : "No match for that password.";
+      verdict.className = ok ? "m-0 text-sm font-semibold text-jade" : "m-0 text-sm font-semibold text-danger";
+    } catch (caught) {
+      verdict.textContent = caught?.message || "The check could not run.";
+      verdict.className = "m-0 text-sm font-semibold text-danger";
+    }
+  }
+
+  show.addEventListener("change", () => {
+    password.type = show.checked ? "text" : "password";
+  });
+  password.addEventListener("input", check);
+  existing.addEventListener("input", check);
+  cost.addEventListener("input", syncCost);
+
+  const copy = copyButton(() => hashed, "Copy hash");
+  const hashButton = button("Hash password", { icon: "hash", kind: "fill", onclick: hash });
+
+  syncCost();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Password", password),
+        el("label", { class: "inline-flex min-h-9 cursor-pointer items-center gap-2 text-sm text-ink-2" }, show, "Show password"),
+        panel("Cost factor", cost, "Each step doubles the work. 10 is a common default; 12 is slower and safer."),
+        costLabel,
+        panel("Hash to check", existing, "Paste a stored hash to see whether the password matches it."),
+        verdict,
+        error
+      ),
+      stack(summary, hashOut,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "Bcrypt is a password hash, not encryption. The salt is in the hash, so the same password gives a different result each time. Use the timing to pick a cost your server can afford."))
+    ),
+    foot: actions(copy, hashButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/password-policy.js

@@ -0,0 +1,139 @@
+// Turns a written password rule into the three things a team needs: the rule in
+// plain words, a regex that enforces it, and a checklist that tests a sample.
+// The regex is built from the same settings as the text, so the two never drift.
+import {
+  el, toast, bench, stack, panel, numberInput, checkbox, textInput, button,
+  actions, toolcard, notice, copyButton, output,
+} from "../core.js";
+
+function escapeClass(chars) {
+  return chars.replace(/[\]\\^-]/g, "\\$&");
+}
+
+export function mount(slot) {
+  const minimum = numberInput({ min: "1", max: "128", step: "1", value: "12", "aria-label": "Minimum length" });
+  const maximum = numberInput({ min: "0", max: "512", step: "1", value: "0", "aria-label": "Maximum length, 0 for none" });
+  const lower = checkbox("Lowercase letters", { checked: true });
+  const upper = checkbox("Uppercase letters", { checked: true });
+  const digits = checkbox("Digits", { checked: true });
+  const symbols = checkbox("Symbols", { checked: false });
+  const noSpaces = checkbox("No spaces", { checked: true });
+  const noRepeat = numberInput({ min: "0", max: "10", step: "1", value: "0", "aria-label": "Max repeats in a row, 0 for none" });
+  const symbolSet = textInput({ value: "!@#$%^&*()-_=+[]{};:,.?", "aria-label": "Allowed symbols", class: "font-mono text-sm" });
+  const sample = textInput({ placeholder: "Type a password to test it", "aria-label": "Sample password", class: "font-mono", autocomplete: "off" });
+
+  const error = notice("warn");
+  const rule = el("p", { class: "m-0 text-sm leading-[1.6] text-ink" });
+  const pattern = output({ rows: 2 });
+  const checks = el("div", { class: "grid gap-1.5" });
+  const verdict = el("p", { class: "m-0 text-sm font-semibold" });
+
+  function classes() {
+    const out = [];
+    if (lower.input.checked) out.push({ label: "lowercase letter", test: (s) => /[a-z]/.test(s), rx: "(?=.*[a-z])" });
+    if (upper.input.checked) out.push({ label: "uppercase letter", test: (s) => /[A-Z]/.test(s), rx: "(?=.*[A-Z])" });
+    if (digits.input.checked) out.push({ label: "digit", test: (s) => /\d/.test(s), rx: "(?=.*\\d)" });
+    if (symbols.input.checked) {
+      const set = symbolSet.value;
+      const safe = escapeClass(set);
+      out.push({
+        label: `symbol from ${set || "the set"}`,
+        test: (s) => [...s].some((char) => set.includes(char)),
+        rx: `(?=.*[${safe}])`,
+      });
+    }
+    return out;
+  }
+
+  function build() {
+    error.write("");
+    const min = Math.max(1, Number(minimum.value) || 1);
+    const max = Number(maximum.value) || 0;
+    const kinds = classes();
+    const repeat = Number(noRepeat.value) || 0;
+
+    if (max && max < min) error.write("The maximum is below the minimum, so no password can pass.");
+    if (!kinds.length && !noSpaces.input.checked) error.write("Pick at least one character class, or the rule accepts anything.");
+
+    const parts = [`at least ${min} characters`];
+    if (max) parts.push(`at most ${max} characters`);
+    for (const kind of kinds) parts.push(`at least one ${kind.label}`);
+    if (noSpaces.input.checked) parts.push("no spaces");
+    if (repeat) parts.push(`no more than ${repeat} identical characters in a row`);
+    rule.textContent = `A password needs ${listSentence(parts)}.`;
+
+    const lookaheads = kinds.map((kind) => kind.rx).join("");
+    const length = max ? `{${min},${max}}` : `{${min},}`;
+    const space = noSpaces.input.checked ? "(?!.*\\s)" : "";
+    const repeats = repeat ? `(?!.*(.)\\1{${repeat}})` : "";
+    const regex = `^${lookaheads}${space}${repeats}.${length}$`;
+    pattern.write(regex);
+
+    checks.replaceChildren();
+    const samples = sample.value;
+    const lengthOk = samples.length >= min && (!max || samples.length <= max);
+    const rows = [
+      { label: `${min}${max ? `–${max}` : "+"} characters`, ok: samples.length > 0 ? lengthOk : null },
+      ...kinds.map((kind) => ({ label: kind.label, ok: samples ? kind.test(samples) : null })),
+    ];
+    if (noSpaces.input.checked) rows.push({ label: "no spaces", ok: samples ? !/\s/.test(samples) : null });
+    if (repeat) rows.push({ label: `no more than ${repeat} repeats in a row`, ok: samples ? !new RegExp(`(.)\\1{${repeat}}`).test(samples) : null });
+
+    checks.replaceChildren(
+      ...rows.map((row) =>
+        el("div", { class: "flex items-center gap-2 text-sm" },
+          el("span", {
+            class: `inline-flex size-5 flex-none items-center justify-center rounded-full text-2xs font-bold ${row.ok === null ? "bg-deck-2 text-ink-3" : row.ok ? "bg-jade-soft text-jade" : "bg-danger/15 text-danger"}`,
+          }, row.ok === null ? "·" : row.ok ? "✓" : "×"),
+          el("span", { class: row.ok === false ? "text-danger" : "text-ink-2" }, row.label)))
+    );
+
+    if (!samples) verdict.textContent = "";
+    else {
+      const failed = rows.filter((row) => row.ok === false).length;
+      verdict.textContent = failed === 0 ? "This password passes the rule." : `This password fails ${failed} part${failed === 1 ? "" : "s"} of the rule.`;
+      verdict.className = `m-0 text-sm font-semibold ${failed === 0 ? "text-jade" : "text-danger"}`;
+    }
+  }
+
+  function listSentence(items) {
+    if (items.length <= 1) return items.join("");
+    return `${items.slice(0, -1).join(", ")}, and ${items[items.length - 1]}`;
+  }
+
+  for (const node of [minimum, maximum, noRepeat, symbolSet, sample]) node.addEventListener("input", build);
+  for (const node of [lower, upper, digits, symbols, noSpaces]) node.input.addEventListener("change", build);
+
+  const copyRule = copyButton(() => `${rule.textContent}\nRegex: ${pattern.textContent}`, "Copy policy");
+
+  build();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Minimum", minimum), panel("Maximum", maximum)),
+        el("div", { class: "grid gap-1.5" },
+          el("span", { class: "text-sm font-semibold text-ink-2" }, "Character classes"),
+          el("div", { class: "grid grid-cols-2 gap-2" }, lower, upper, digits, symbols),
+          noSpaces),
+        panel("Allowed symbols", symbolSet),
+        panel("Max repeats in a row", noRepeat, "0 means no limit."),
+        error
+      ),
+      stack(
+        el("div", { class: "grid gap-2 rounded-r2 border border-orbit bg-deck-2 p-4" }, rule),
+        panel("Regex", pattern),
+        panel("Test a password", sample, "Shown in the page only. Nothing is sent."),
+        checks,
+        verdict
+      )
+    ),
+    foot: actions(copyRule),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/rsa-key-pair.js

@@ -0,0 +1,137 @@
+// An RSA key pair made in the tab with Web Crypto. The keys exist only in the
+// page until it closes, and both come out as PEM, the form most tools expect.
+import {
+  el, toast, download, bench, stack, panel, selectInput, button, actions,
+  toolcard, blank, notice, copyButton, output, checkbox,
+} from "../core.js";
+
+const SIZES = [
+  { value: "2048", label: "2048 bits" },
+  { value: "3072", label: "3072 bits" },
+  { value: "4096", label: "4096 bits" },
+];
+
+function wrap(base64) {
+  return base64.match(/.{1,64}/g).join("\n");
+}
+
+function toPem(label, der) {
+  const base64 = btoa(String.fromCharCode(...new Uint8Array(der)));
+  return `-----BEGIN ${label}-----\n${wrap(base64)}\n-----END ${label}-----\n`;
+}
+
+export function mount(slot) {
+  let pair = null;
+  let busy = false;
+  let token = 0;
+
+  const size = selectInput(SIZES, { value: "2048", "aria-label": "Key size" });
+  const showPrivate = checkbox("Show the private key", { checked: false });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const publicOut = output({ rows: 8 });
+  const privateOut = output({ rows: 10 });
+  const empty = blank("key-round", "Generate a pair to see the keys.");
+  const publicBox = el("div", { class: "grid gap-1.5" },
+    el("span", { class: "text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase" }, "Public key"), publicOut);
+  const privateBox = el("div", { class: "grid gap-1.5" },
+    el("span", { class: "text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase" }, "Private key"), privateOut);
+
+  const generateButton = button("Generate pair", { icon: "refresh-cw", kind: "fill", onclick: generate });
+  const copyPublic = copyButton(() => pair?.publicPem ?? "", "Copy public");
+  const copyPrivate = copyButton(() => pair?.privatePem ?? "", "Copy private");
+  const downloadPublic = button("Download public", {
+    icon: "download",
+    onclick: () => { if (pair) download("public.pem", pair.publicPem, "application/x-pem-file"); },
+  });
+  const downloadPrivate = button("Download private", {
+    icon: "download",
+    onclick: () => { if (pair) download("private.pem", pair.privatePem, "application/x-pem-file"); },
+  });
+
+  function sync() {
+    const hasKeys = Boolean(pair);
+    publicBox.hidden = !hasKeys;
+    privateBox.hidden = !hasKeys || !showPrivate.input.checked;
+    empty.hidden = hasKeys;
+    privateOut.hidden = privateBox.hidden;
+    copyPrivate.disabled = !hasKeys;
+    copyPublic.disabled = !hasKeys;
+    downloadPrivate.disabled = !hasKeys;
+    downloadPublic.disabled = !hasKeys;
+  }
+
+  async function generate() {
+    if (busy) return;
+    busy = true;
+    const current = ++token;
+    generateButton.disabled = true;
+    summary.textContent = "Generating. Larger keys take a few seconds.";
+    error.write("");
+    try {
+      const keys = await crypto.subtle.generateKey(
+        {
+          name: "RSASSA-PKCS1-v1_5",
+          modulusLength: Number(size.value),
+          publicExponent: new Uint8Array([1, 0, 1]),
+          hash: "SHA-256",
+        },
+        true,
+        ["sign", "verify"]
+      );
+      const spki = await crypto.subtle.exportKey("spki", keys.publicKey);
+      const pkcs8 = await crypto.subtle.exportKey("pkcs8", keys.privateKey);
+      if (current !== token) return;
+      pair = {
+        bits: Number(size.value),
+        publicPem: toPem("PUBLIC KEY", spki),
+        privatePem: toPem("PRIVATE KEY", pkcs8),
+      };
+      publicOut.write(pair.publicPem);
+      privateOut.write(pair.privatePem);
+      summary.textContent = `${pair.bits}-bit RSA · SHA-256 · exponent 65537 · PKCS#8 private, SPKI public`;
+      sync();
+      toast("Key pair ready");
+    } catch (caught) {
+      if (current !== token) return;
+      error.write(caught?.message || "The browser could not generate this key.");
+    } finally {
+      busy = false;
+      generateButton.disabled = false;
+    }
+  }
+
+  size.addEventListener("change", () => {
+    if (pair) {
+      pair = null;
+      publicOut.write("");
+      privateOut.write("");
+      summary.textContent = "";
+      sync();
+    }
+  });
+  showPrivate.input.addEventListener("change", sync);
+
+  sync();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Key size", size, "2048 is the common floor. 4096 is slower and rarely needed."),
+        showPrivate,
+        error,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "Generated with the browser's RSA implementation. The keys exist only in this page; closing it discards them. For production, generate keys on a machine you control.")
+      ),
+      stack(summary, empty, publicBox, privateBox)
+    ),
+    foot: actions(downloadPublic, downloadPrivate, copyPublic, copyPrivate, generateButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };