mevebu 2.1.0 → 2.3.0

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/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/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 };