mevebu 0.3.1 → 0.4.0

package/mevebu/libs/js/tools/jwt-expiry.js

@@ -0,0 +1,97 @@
+// Reads the time claims of a JWT and says whether it looks expired.
+import { el, textArea, notice, copyButton, bench, stack, panel, actions, toolcard } from "../core.js";
+
+const CLAIMS = [["iat", "Issued at"], ["nbf", "Not before"], ["exp", "Expires"]];
+
+function decodeSegment(segment) {
+  const base = segment.replace(/-/g, "+").replace(/_/g, "/");
+  const padded = base.padEnd(base.length + ((4 - (base.length % 4)) % 4), "=");
+  const binary = atob(padded);
+  const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
+  return JSON.parse(new TextDecoder().decode(bytes));
+}
+
+function relative(seconds) {
+  const diff = Math.round(seconds - Date.now() / 1000);
+  const abs = Math.abs(diff);
+  const [unit, size] = abs < 60 ? ["second", 1] : abs < 3600 ? ["minute", 60] : abs < 86400 ? ["hour", 3600] : ["day", 86400];
+  const value = Math.round(abs / size);
+  const text = `${value} ${unit}${value === 1 ? "" : "s"}`;
+  return diff >= 0 ? `in ${text}` : `${text} ago`;
+}
+
+const kvRow = (key, value) =>
+  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+
+export function mount(slot) {
+  const source = textArea({ rows: 4, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Token", placeholder: "Paste a JWT" });
+  const claims = el("div", { class: "mvb-kv" });
+  const status = notice("note");
+  const error = notice("error");
+  let summary = "";
+
+  function run() {
+    claims.replaceChildren();
+    status.write("");
+    error.write("");
+    summary = "";
+    const token = source.value.trim();
+    if (!token) return;
+    const parts = token.split(".");
+    if (parts.length < 2) {
+      error.write("A JWT has three parts separated by dots.");
+      return;
+    }
+    let payload;
+    try {
+      payload = decodeSegment(parts[1]);
+    } catch {
+      error.write("The payload is not readable base64url JSON.");
+      return;
+    }
+
+    const lines = [];
+    for (const [key, label] of CLAIMS) {
+      if (payload[key] === undefined) continue;
+      const value = Number(payload[key]);
+      const when = Number.isFinite(value) ? new Date(value * 1000).toLocaleString() : String(payload[key]);
+      const extra = Number.isFinite(value) ? ` (${relative(value)})` : "";
+      claims.append(kvRow(label, `${when}${extra}`));
+      lines.push(`${label}: ${when}${extra}`);
+    }
+
+    if (payload.exp === undefined) {
+      status.write("No exp claim. This token has no stated expiry.");
+    } else {
+      const exp = Number(payload.exp);
+      if (!Number.isFinite(exp)) {
+        status.write("The exp claim is not a number.");
+      } else if (exp * 1000 < Date.now()) {
+        status.write(`Looks expired, ${relative(exp)}.`);
+      } else {
+        status.write(`Looks valid, expires ${relative(exp)}.`);
+      }
+    }
+    summary = lines.join("\n");
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Token", source),
+        error,
+        el("p", { class: "mvb-note" }, "Only the payload is read in this tab. The signature is not checked, so a valid look is not proof the token is genuine.")
+      ),
+      stack(panel("Time claims", claims), status)
+    ),
+    foot: actions(copyButton(() => summary, "Copy claims", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/length-converter.js

@@ -0,0 +1,86 @@
+// Converts a length between metric and imperial units, with the factor used.
+import { el, bench, stack, panel, numberInput, selectInput, notice, copyButton, button, actions, toolcard } from "../core.js";
+
+const UNITS = [
+  { value: "mm", label: "Millimeter", factor: 0.001 },
+  { value: "cm", label: "Centimeter", factor: 0.01 },
+  { value: "m", label: "Meter", factor: 1 },
+  { value: "km", label: "Kilometer", factor: 1000 },
+  { value: "in", label: "Inch", factor: 0.0254 },
+  { value: "ft", label: "Foot", factor: 0.3048 },
+  { value: "yd", label: "Yard", factor: 0.9144 },
+  { value: "mi", label: "Mile", factor: 1609.344 },
+];
+
+const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
+const options = UNITS.map(({ value, label }) => ({ value, label }));
+
+function fmt(value) {
+  if (!Number.isFinite(value)) return "-";
+  if (value === 0) return "0";
+  const abs = Math.abs(value);
+  if (abs >= 1e-6 && abs < 1e15) return String(Number(value.toPrecision(8)));
+  return value.toExponential(4);
+}
+
+export function mount(slot) {
+  const value = numberInput({ value: "1", step: "any", "aria-label": "Value" });
+  const from = selectInput(options, { value: "m", "aria-label": "From unit" });
+  const to = selectInput(options, { value: "ft", "aria-label": "To unit" });
+  const result = el("span", { class: "mvb-stat__v" }, "-");
+  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "Result"), result));
+  const factor = el("p", { class: "mvb-note" });
+  const error = notice("error");
+  const scroll = el("div", { class: "mvb-scroll" });
+  let text = "";
+
+  function run() {
+    error.write("");
+    const raw = value.value.trim();
+    const n = Number(raw);
+    if (!raw || !Number.isFinite(n)) {
+      result.textContent = "-";
+      factor.textContent = "";
+      scroll.replaceChildren();
+      text = "";
+      error.write("Enter a number.");
+      return;
+    }
+    const a = byId[from.value];
+    const b = byId[to.value];
+    const out = (n * a.factor) / b.factor;
+    result.textContent = `${fmt(out)} ${b.value}`;
+    factor.textContent = `1 ${a.value} = ${fmt(a.factor / b.factor)} ${b.value}`;
+    scroll.replaceChildren(el("table", { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Unit"), el("th", {}, "Value"))),
+      el("tbody", {}, ...UNITS.map((unit) => el("tr", {},
+        el("td", {}, unit.label),
+        el("td", {}, fmt((n * a.factor) / unit.factor)))))));
+    text = `${fmt(out)} ${b.value}`;
+  }
+
+  value.addEventListener("input", run);
+  from.addEventListener("change", run);
+  to.addEventListener("change", run);
+
+  const swap = button("Swap", { icon: "arrow-left-right", onclick: () => {
+    const held = from.value;
+    from.value = to.value;
+    to.value = held;
+    run();
+  }});
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Value", value), panel("From", from), panel("To", to), error),
+      stack(panel("Result", stats), factor, panel("All units", scroll))
+    ),
+    foot: actions(swap, copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/license-reference.js

@@ -0,0 +1,58 @@
+// Short summaries of common open source licenses. Not legal advice.
+import { el, bench, stack, panel, chipRow, notice, copyButton, actions, toolcard } from "../core.js";
+
+const LICENSES = [
+  { value: "MIT", label: "MIT", can: "Use, modify and distribute, including commercially.", must: "Include the copyright notice and the license text.", cannot: "Hold the author liable." },
+  { value: "Apache-2.0", label: "Apache-2.0", can: "Use, modify and distribute, including commercially.", must: "Include the license, state changes and keep the NOTICE file.", cannot: "Use the project trademarks without permission." },
+  { value: "GPL-3.0", label: "GPL-3.0", can: "Use, modify and distribute.", must: "Release derivative works under the same license and share the source.", cannot: "Add restrictions beyond the license." },
+  { value: "BSD-3-Clause", label: "BSD-3-Clause", can: "Use, modify and distribute, including commercially.", must: "Keep the copyright notice and disclaimer.", cannot: "Use contributor names to endorse derivatives." },
+  { value: "MPL-2.0", label: "MPL-2.0", can: "Use, modify and distribute.", must: "Share changes to MPL-licensed files under MPL.", cannot: "Hold contributors liable." },
+  { value: "Unlicense", label: "Unlicense", can: "Use, modify and distribute with no conditions.", must: "Nothing.", cannot: "Hold the author liable." },
+];
+
+const kvRow = (key, value) =>
+  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+
+export function mount(slot) {
+  const name = el("span", { class: "mvb-stat__v" }, LICENSES[0].label);
+  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "License"), name));
+  const can = el("span", { class: "mvb-kv__v" });
+  const must = el("span", { class: "mvb-kv__v" });
+  const cannot = el("span", { class: "mvb-kv__v" });
+  const kv = el("div", { class: "mvb-kv" }, kvRow("Can", can), kvRow("Must", must), kvRow("Cannot", cannot));
+  const disclaimer = notice("note");
+  disclaimer.write("Short summary, not legal advice.");
+  let current = LICENSES[0];
+  let text = "";
+
+  const chips = chipRow(LICENSES.map(({ value, label }) => ({ value, label })), {
+    value: current.value,
+    label: "License",
+    onChange: (value) => {
+      current = LICENSES.find((entry) => entry.value === value);
+      run();
+    },
+  });
+
+  function run() {
+    name.textContent = current.label;
+    can.textContent = current.can;
+    must.textContent = current.must;
+    cannot.textContent = current.cannot;
+    text = `${current.label}\nCan: ${current.can}\nMust: ${current.must}\nCannot: ${current.cannot}`;
+  }
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("License", chips), disclaimer),
+      stack(panel("Summary", stats), panel("Terms", kv))
+    ),
+    foot: actions(copyButton(() => text, "Copy summary", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/line-break-formatter.js

@@ -0,0 +1,48 @@
+// Tidies the spacing in a caption, with even gaps between paragraphs.
+import { el, bench, stack, panel, textArea, numberInput, switchControl, output, copyButton, actions, toolcard } from "../core.js";
+
+export function mount(slot) {
+  const source = textArea({ rows: 10, "aria-label": "Text", placeholder: "Type or paste text" });
+  const blankLines = numberInput({ min: "0", max: "4", value: "1", "aria-label": "Blank lines between paragraphs" });
+  const trim = switchControl("Trim trailing spaces", { checked: true });
+  const out = output({ rows: 10 });
+
+  let result = "";
+
+  function run() {
+    const normalized = source.value.replace(/\r\n?/g, "\n");
+    const paragraphs = normalized
+      .split(/\n{2,}/)
+      .map((block) => block
+        .split("\n")
+        .map((line) => (trim.input.checked ? line.replace(/\s+$/, "") : line))
+        .join("\n"))
+      .map((block) => block.replace(/^\n+|\n+$/g, ""))
+      .filter((block) => block.trim() !== "");
+    const gap = "\n".repeat(1 + Math.max(0, parseInt(blankLines.value, 10) || 0));
+    result = paragraphs.join(gap);
+    out.write(result);
+  }
+
+  source.addEventListener("input", run);
+  blankLines.addEventListener("input", run);
+  trim.input.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Text", source),
+        panel("Blank lines between paragraphs", blankLines),
+        panel("Spacing", trim)
+      ),
+      stack(panel("Result", out))
+    ),
+    foot: actions(copyButton(() => result, "Copy text", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/line-counter.js

@@ -0,0 +1,55 @@
+// Line totals for pasted lists, logs and data: total, filled and blank.
+import { el, bench, stack, panel, textArea, button, copyButton, actions, toolcard } from "../core.js";
+
+function tile(label) {
+  const value = el("span", { class: "mvb-stat__v" }, "0");
+  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  node.set = (text) => { value.textContent = text; };
+  return node;
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 14, "aria-label": "Text", placeholder: "Paste text, one entry per line" });
+
+  const totalTile = tile("Total lines");
+  const filledTile = tile("Filled");
+  const blankTile = tile("Blank");
+  const stats = el("div", { class: "mvb-stats" }, totalTile, filledTile, blankTile);
+
+  let counts = { total: 0, filled: 0, blank: 0 };
+
+  function summary() {
+    return [
+      `${counts.total} total lines`,
+      `${counts.filled} filled`,
+      `${counts.blank} blank`,
+    ].join("\n");
+  }
+
+  function run() {
+    const lines = source.value === "" ? [] : source.value.split("\n");
+    const blank = lines.filter((line) => !line.trim()).length;
+    counts = { total: lines.length, filled: lines.length - blank, blank };
+    totalTile.set(String(counts.total));
+    filledTile.set(String(counts.filled));
+    blankTile.set(String(counts.blank));
+  }
+
+  const clearButton = button("Clear", { icon: "trash" });
+  clearButton.addEventListener("click", () => { source.value = ""; run(); });
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text", source)),
+      stack(stats)
+    ),
+    foot: actions(clearButton, copyButton(summary, "Copy summary", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/list-difference.js

@@ -0,0 +1,86 @@
+// Compares two lists and shows what is only in each and what they share.
+import { el, bench, stack, panel, textArea, checkbox, output, copyButton, actions, toolcard } from "../core.js";
+
+const linesOf = (text) => text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
+
+function uniqueLines(text, ignoreCase) {
+  const seen = new Set();
+  const out = [];
+  for (const line of linesOf(text)) {
+    const key = ignoreCase ? line.toLowerCase() : line;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(line);
+  }
+  return out;
+}
+
+function tile(label) {
+  const value = el("span", { class: "mvb-stat__v" }, "0");
+  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  node.set = (text) => { value.textContent = text; };
+  return node;
+}
+
+export function mount(slot) {
+  const first = textArea({ rows: 8, "aria-label": "List A", placeholder: "One entry per line" });
+  const second = textArea({ rows: 8, "aria-label": "List B", placeholder: "One entry per line" });
+  const caseBox = checkbox("Ignore case");
+
+  const onlyAOut = output({ rows: 5 });
+  const onlyBOut = output({ rows: 5 });
+  const bothOut = output({ rows: 5 });
+  const onlyATile = tile("Only in A");
+  const onlyBTile = tile("Only in B");
+  const bothTile = tile("In both");
+  const stats = el("div", { class: "mvb-stats" }, onlyATile, onlyBTile, bothTile);
+  let report = "";
+
+  function run() {
+    const ignoreCase = caseBox.input.checked;
+    const key = (line) => (ignoreCase ? line.toLowerCase() : line);
+    const a = uniqueLines(first.value, ignoreCase);
+    const b = uniqueLines(second.value, ignoreCase);
+    const keyB = new Set(b.map(key));
+    const keyA = new Set(a.map(key));
+    const onlyA = a.filter((line) => !keyB.has(key(line)));
+    const onlyB = b.filter((line) => !keyA.has(key(line)));
+    const both = a.filter((line) => keyB.has(key(line)));
+
+    onlyAOut.write(onlyA.join("\n"));
+    onlyBOut.write(onlyB.join("\n"));
+    bothOut.write(both.join("\n"));
+    onlyATile.set(String(onlyA.length));
+    onlyBTile.set(String(onlyB.length));
+    bothTile.set(String(both.length));
+
+    report = [
+      `Only in A (${onlyA.length}):`,
+      onlyA.join("\n"),
+      "",
+      `Only in B (${onlyB.length}):`,
+      onlyB.join("\n"),
+      "",
+      `In both (${both.length}):`,
+      both.join("\n"),
+    ].join("\n");
+  }
+
+  first.addEventListener("input", run);
+  second.addEventListener("input", run);
+  caseBox.input.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("List A", first), panel("List B", second), panel(null, caseBox)),
+      stack(stats, panel("Only in A", onlyAOut), panel("Only in B", onlyBOut), panel("In both", bothOut))
+    ),
+    foot: actions(copyButton(() => report, "Copy report", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/list-merger.js

@@ -0,0 +1,67 @@
+// Joins two lists into one, optionally dropping duplicates.
+import { el, bench, stack, panel, textArea, checkbox, output, copyButton, button, actions, toolcard } from "../core.js";
+
+const linesOf = (text) => text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
+
+function tile(label) {
+  const value = el("span", { class: "mvb-stat__v" }, "0");
+  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  node.set = (text) => { value.textContent = text; };
+  return node;
+}
+
+export function mount(slot) {
+  const first = textArea({ rows: 8, "aria-label": "List A", placeholder: "One entry per line" });
+  const second = textArea({ rows: 8, "aria-label": "List B", placeholder: "One entry per line" });
+  const dedupeBox = checkbox("Remove duplicates", { checked: true });
+  const caseBox = checkbox("Ignore case");
+
+  const result = output({ rows: 12 });
+  const listATile = tile("List A");
+  const listBTile = tile("List B");
+  const mergedTile = tile("Merged");
+  const stats = el("div", { class: "mvb-stats" }, listATile, listBTile, mergedTile);
+  let current = [];
+
+  function run() {
+    const a = linesOf(first.value);
+    const b = linesOf(second.value);
+    let merged = [...a, ...b];
+    if (dedupeBox.input.checked) {
+      const seen = new Set();
+      const ignoreCase = caseBox.input.checked;
+      merged = merged.filter((line) => {
+        const key = ignoreCase ? line.toLowerCase() : line;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+    }
+    current = merged;
+    result.write(merged.join("\n"));
+    listATile.set(String(a.length));
+    listBTile.set(String(b.length));
+    mergedTile.set(String(merged.length));
+  }
+
+  const clearButton = button("Clear", { icon: "trash" });
+  clearButton.addEventListener("click", () => { first.value = ""; second.value = ""; run(); });
+  first.addEventListener("input", run);
+  second.addEventListener("input", run);
+  dedupeBox.input.addEventListener("change", run);
+  caseBox.input.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("List A", first), panel("List B", second), panel(null, dedupeBox), panel(null, caseBox)),
+      stack(stats, panel("Merged", result))
+    ),
+    foot: actions(clearButton, copyButton(() => current.join("\n"), "Copy merged", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/locale-number.js

@@ -0,0 +1,79 @@
+// One number shown in several locales, with decimal and grouping options.
+import { el, bench, stack, panel, textInput, numberInput, switchControl, notice, copyButton, actions, toolcard } from "../core.js";
+
+const LOCALES = [
+  ["en-US", "English (US)"],
+  ["en-GB", "English (UK)"],
+  ["de-DE", "German"],
+  ["fr-FR", "French"],
+  ["es-ES", "Spanish"],
+  ["id-ID", "Indonesian"],
+  ["hi-IN", "Hindi"],
+  ["ar-EG", "Arabic"],
+  ["ja-JP", "Japanese"],
+];
+
+function format(locale, value, options) {
+  try {
+    return new Intl.NumberFormat(locale, options).format(value);
+  } catch {
+    return String(value);
+  }
+}
+
+export function mount(slot) {
+  const value = textInput({ value: "1234567.89", inputmode: "decimal", "aria-label": "Number" });
+  const decimals = numberInput({ min: "0", max: "20", value: "2", "aria-label": "Fraction digits" });
+  const grouping = switchControl("Group thousands", { checked: true });
+
+  const table = el("table", { class: "mvb-ttable" });
+  const tableWrap = el("div", { class: "mvb-scroll" }, table);
+  const note = notice("note");
+  note.write("Formatting only. The number is not converted.");
+
+  let tableText = "";
+
+  function run() {
+    const raw = value.value.trim();
+    const parsed = Number(raw);
+    const digits = Math.min(20, Math.max(0, parseInt(decimals.value, 10) || 0));
+    const options = {
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits,
+      useGrouping: grouping.input.checked,
+    };
+    const rows = LOCALES.map(([code, name]) => {
+      const shown = raw === "" || !Number.isFinite(parsed) ? "-" : format(code, parsed, options);
+      return el("tr", {}, el("th", {}, name), el("td", {}, shown));
+    });
+    table.replaceChildren(
+      el("thead", {}, el("tr", {}, el("th", {}, "Locale"), el("th", {}, "Number"))),
+      el("tbody", {}, ...rows));
+    tableText = LOCALES.map(([code, name]) => {
+      const shown = raw === "" || !Number.isFinite(parsed) ? "-" : format(code, parsed, options);
+      return `${name}: ${shown}`;
+    }).join("\n");
+  }
+
+  value.addEventListener("input", run);
+  decimals.addEventListener("input", run);
+  grouping.input.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Number", value),
+        panel("Fraction digits", decimals),
+        panel("Grouping", grouping)
+      ),
+      stack(note, panel("By locale", tableWrap))
+    ),
+    foot: actions(copyButton(() => tableText, "Copy list", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };