mevebu 2.2.0 → 2.4.0

package/mevebu/libs/js/tools/javascript-formatter.js

@@ -0,0 +1,182 @@
+// Formats JavaScript by re-indenting its tokens. Strings, templates, regexes
+// and comments are kept byte for byte.
+import { el, bench, stack, panel, textArea, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+import { tokenize } from "../js-tokens.js";
+
+const CONTROL = new Set(["if", "for", "while", "switch", "catch", "with"]);
+const BINARY = new Set([
+  "=", "+", "-", "*", "/", "%", "**", "==", "===", "!=", "!==", "<", ">", "<=", ">=",
+  "&&", "||", "??", "&", "|", "^", "<<", ">>", ">>>", "+=", "-=", "*=", "/=", "%=",
+  "**=", "&=", "|=", "^=", "<<=", ">>=", ">>>=", "&&=", "||=", "??=", "=>",
+]);
+const NO_SPACE_BEFORE = new Set([")", "]", ",", ";", ".", "?.", "++", "--"]);
+const VALUE_TYPES = new Set(["word", "number", "string", "template", "regex"]);
+
+function bracketError(tokens) {
+  const stack = [];
+  const pairs = { ")": "(", "]": "[", "}": "{" };
+  for (const token of tokens) {
+    if (token.type !== "punct") continue;
+    if ("([{".includes(token.value)) stack.push(token.value);
+    else if (")]}".includes(token.value)) {
+      if (stack.pop() !== pairs[token.value]) return `Unexpected ${token.value}.`;
+    }
+  }
+  return stack.length ? `Unclosed ${stack[stack.length - 1]}.` : null;
+}
+
+function format(source, size) {
+  const { tokens, error } = tokenize(source);
+  if (error) return { error };
+  const balance = bracketError(tokens);
+  if (balance) return { error: balance };
+
+  const pad = " ".repeat(size);
+  const lines = [];
+  let line = "";
+  let indent = 0;
+  let paren = 0;
+
+  const flush = () => {
+    if (line.trim()) lines.push(pad.repeat(indent) + line.trimEnd());
+    line = "";
+  };
+  const add = (text, space = false) => {
+    if (space && line && !line.endsWith(" ")) line += " ";
+    line += text;
+  };
+  const nextOf = (index) => tokens[index + 1] ?? null;
+
+  tokens.forEach((token, index) => {
+    const prev = tokens[index - 1] ?? null;
+    const next = nextOf(index);
+    const value = token.value;
+
+    if (token.type === "lineComment") {
+      add(value, Boolean(line));
+      flush();
+      return;
+    }
+    if (token.type === "blockComment") {
+      add(value, Boolean(line));
+      if (value.includes("\n")) flush();
+      return;
+    }
+
+    if (token.type === "punct") {
+      if (value === "{") {
+        const space = prev && (
+          prev.type === "word" || prev.type === "number" || prev.type === "string" ||
+          prev.type === "template" || prev.value === ")" || prev.value === "]"
+        );
+        add("{", space);
+        flush();
+        indent++;
+        return;
+      }
+      if (value === "}") {
+        flush();
+        indent = Math.max(0, indent - 1);
+        line = "}";
+        const keep = next && (
+          next.value === ";" || next.value === "," || next.value === ")" ||
+          next.value === "]" || next.value === "else" || next.value === "catch" ||
+          next.value === "finally" || next.value === "while"
+        );
+        if (!keep) flush();
+        return;
+      }
+      if (value === ";") {
+        add(";");
+        if (paren === 0) flush();
+        return;
+      }
+      if (value === "(") {
+        const control = prev && prev.type === "word" && CONTROL.has(prev.value);
+        add("(", control);
+        paren++;
+        return;
+      }
+      if (value === ")") {
+        add(")");
+        paren = Math.max(0, paren - 1);
+        return;
+      }
+      if (value === "[") { add("["); return; }
+      if (value === "]") { add("]"); return; }
+      if (value === ",") { add(","); add(" "); return; }
+      if (value === ":") {
+        add(":");
+        add(" ");
+        if (line.trimStart().startsWith("case ") || line.trimStart().startsWith("default")) flush();
+        return;
+      }
+      if (value === "?") { add(" ? "); return; }
+      if (value === "." || value === "?." || value === "++" || value === "--" || value === "!" || value === "~" || value === "...") {
+        add(value);
+        return;
+      }
+      if (BINARY.has(value)) {
+        add(` ${value} `);
+        return;
+      }
+      add(value);
+      return;
+    }
+
+    const needsSpace = prev && (
+      VALUE_TYPES.has(prev.type) || prev.value === ")" || prev.value === "]" || prev.value === "}"
+    );
+    add(value, needsSpace);
+  });
+
+  flush();
+  return { text: lines.join("\n") };
+}
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 14,
+    "aria-label": "JavaScript",
+    value: "const greet=(name)=>{if(!name)return 'hello';return `hello ${name}`};\n// keep this comment\nconst list=[1,2,3].map(n=>n*2);",
+  });
+  const result = textArea({ rows: 14, readonly: true, "aria-label": "Formatted JavaScript" });
+  const error = notice("error");
+  let size = "2";
+
+  const chips = chipRow(
+    [{ value: "2", label: "2 spaces" }, { value: "4", label: "4 spaces" }],
+    { value: "2", label: "Indent", onChange: (value) => { size = value; run(); } },
+  );
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    const output = format(source.value, Number(size));
+    if (output.error) {
+      result.value = "";
+      error.write(output.error);
+      return;
+    }
+    result.value = output.text;
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Indent", chips), panel("JavaScript", source), error),
+      stack(panel("Formatted", result)),
+    ),
+    foot: actions(copyButton(() => result.value, "Copy JavaScript", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/javascript-minifier.js

@@ -0,0 +1,111 @@
+// Removes comments and redundant whitespace from JavaScript, without renaming
+// anything or changing the meaning of a statement.
+import { el, bench, stack, panel, textArea, output, notice, copyButton, actions, toolcard } from "../core.js";
+import { tokenize, bytes } from "../js-tokens.js";
+
+const VALUE_TYPES = new Set(["word", "number", "string", "template", "regex"]);
+const ASI_WORDS = new Set(["return", "throw", "break", "continue", "yield"]);
+const RISKY_START = new Set(["(", "[", "`", "+", "-", "/"]);
+
+const tile = (key, value) =>
+  el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+    el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, value),
+    el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
+
+function keepComment(value) {
+  return value.startsWith("/*!") || value.startsWith("//!") || /@license|@preserve/.test(value);
+}
+
+function minify(source) {
+  const { tokens, error } = tokenize(source);
+  if (error) return { error };
+
+  let out = "";
+  let previous = null;
+
+  const emit = (text) => { out += text; };
+
+  tokens.forEach((token) => {
+    if (token.type === "lineComment" || token.type === "blockComment") {
+      if (keepComment(token.value)) {
+        if (out && !out.endsWith("\n")) emit("\n");
+        emit(token.value);
+        if (token.type === "lineComment") emit("\n");
+      }
+      return;
+    }
+
+    if (previous) {
+      const newline = token.newline && (
+        (previous.type === "word" && ASI_WORDS.has(previous.value)) ||
+        (RISKY_START.has(token.value) && (
+          VALUE_TYPES.has(previous.type) || [")", "]", "}", "++", "--"].includes(previous.value)
+        ))
+      );
+      if (newline) {
+        emit("\n");
+        emit(token.value);
+        previous = token;
+        return;
+      }
+
+      const wordPair = VALUE_TYPES.has(previous.type) && VALUE_TYPES.has(token.type);
+      const plusPair = ["+", "++"].includes(previous.value) && ["+", "++"].includes(token.value);
+      const minusPair = ["-", "--"].includes(previous.value) && ["-", "--"].includes(token.value);
+      const commentStart = previous.value === "/" && ["/", "*"].includes(token.value);
+      if (wordPair || plusPair || minusPair || commentStart) emit(" ");
+    }
+
+    emit(token.value);
+    previous = token;
+  });
+
+  return { text: out.trim() };
+}
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 14,
+    "aria-label": "JavaScript",
+    value: "// greeting\nconst greet = (name) => {\n  if (!name) return 'hello';\n  return `hello ${name}`;\n};\n\nconst list = [1, 2, 3].map((n) => n * 2);",
+  });
+  const result = output({ tag: "textarea", rows: 12 });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
+  const error = notice("error");
+
+  function run() {
+    error.write("");
+    stats.replaceChildren();
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    const output = minify(source.value);
+    if (output.error) {
+      result.value = "";
+      error.write(output.error);
+      return;
+    }
+    const before = bytes(source.value);
+    const after = bytes(output.text);
+    const saved = before ? Math.max(0, Math.round((1 - after / before) * 100)) : 0;
+    result.value = output.text;
+    stats.append(tile("Before", `${before} B`), tile("After", `${after} B`), tile("Saved", `${saved}%`));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("JavaScript", source), error),
+      stack(panel("Minified", result), stats),
+    ),
+    foot: actions(copyButton(() => result.value, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/json-to-yaml.js

@@ -0,0 +1,59 @@
+// Converts JSON to YAML with a vendored writer. Block style by default, flow
+// style on request.
+import { bench, stack, panel, textArea, output, notice, chipRow, downloadButton, copyButton, actions, toolcard } from "../core.js";
+import { dump } from "../vendor/js-yaml.mjs";
+
+const EXAMPLE = '{\n  "service": "api",\n  "replicas": 2,\n  "ports": [8080, 8443],\n  "labels": { "tier": "backend" }\n}';
+
+export function mount(slot) {
+  const source = textArea({ rows: 14, "aria-label": "JSON", value: EXAMPLE });
+  const result = output({ tag: "textarea", rows: 12 });
+  const error = notice("error");
+  let style = "block";
+
+  const chips = chipRow(
+    [{ value: "block", label: "Block" }, { value: "flow", label: "Flow" }],
+    { value: "block", label: "Style", onChange: (value) => { style = value; run(); } },
+  );
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    let value;
+    try {
+      value = JSON.parse(source.value);
+    } catch (caught) {
+      result.value = "";
+      error.write(caught.message);
+      return;
+    }
+    result.value = dump(value, {
+      indent: 2,
+      lineWidth: -1,
+      noRefs: true,
+      flowLevel: style === "flow" ? 0 : -1,
+    });
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Style", chips), panel("JSON", source), error),
+      stack(panel("YAML", result)),
+    ),
+    foot: actions(
+      downloadButton(() => result.value, "data.yaml", "Download", "text/yaml"),
+      copyButton(() => result.value, "Copy YAML", "fill"),
+    ),
+  });
+  slot.append(card.node);
+  run();
+
+  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 };