mevebu 0.3.1 → 1.0.0

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

@@ -0,0 +1,78 @@
+// Indents a SQL query clause by clause. Keywords can be upper-cased.
+import { bench, stack, panel, textArea, notice, switchControl, copyButton, actions, toolcard } from "../core.js";
+
+const CLAUSES = [
+  "SELECT", "FROM", "WHERE", "GROUP BY", "ORDER BY", "HAVING", "LIMIT", "OFFSET", "VALUES", "SET",
+  "INSERT INTO", "UPDATE", "DELETE FROM", "INNER JOIN", "LEFT JOIN", "RIGHT JOIN", "FULL JOIN",
+  "CROSS JOIN", "JOIN", "UNION ALL", "UNION", "CREATE TABLE", "ALTER TABLE", "DROP TABLE", "WITH", "RETURNING",
+];
+const WORDS = [...CLAUSES, "AND", "OR", "ON", "AS", "IN", "IS", "NOT", "NULL", "LIKE", "BETWEEN", "DISTINCT", "ASC", "DESC", "CASE", "WHEN", "THEN", "ELSE", "END"];
+
+const toPattern = (word) => word.replace(/ /g, "\\s+");
+
+function protect(sql) {
+  const store = [];
+  const text = sql.replace(/'(?:[^']|'')*'|"(?:[^"]|"")*"|`[^`]*`/g, (match) => {
+    store.push(match);
+    return `\u0001${store.length - 1}\u0001`;
+  });
+  return { text, store };
+}
+
+const restore = (text, store) => text.replace(/\u0001(\d+)\u0001/g, (_, index) => store[Number(index)]);
+
+function format(sql, upper) {
+  const cleaned = sql.replace(/\/\*[\s\S]*?\*\//g, " ").replace(/--[^\n]*/g, " ");
+  const { text, store } = protect(cleaned);
+  let out = text.replace(/\s+/g, " ").trim();
+  if (upper) {
+    const wordRe = new RegExp(`\\b(${[...WORDS].sort((a, b) => b.length - a.length).map(toPattern).join("|")})\\b`, "gi");
+    out = out.replace(wordRe, (match) => match.toUpperCase());
+  }
+  const clauseRe = new RegExp(`\\s*(${[...CLAUSES].sort((a, b) => b.length - a.length).map(toPattern).join("|")})\\b`, "gi");
+  out = out.replace(clauseRe, "\n$1");
+  out = out.replace(/\s*\b(AND|OR)\b/gi, "\n  $1");
+  out = out.replace(/\(\s+/g, "(").replace(/\s+\)/g, ")");
+  out = out.replace(/\n{3,}/g, "\n\n").trim();
+  return restore(out, store);
+}
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 12,
+    class: "mvb-in mvb-in--area mvb-in--mono",
+    "aria-label": "SQL",
+    value: "select id, name from users where active = true and age > 18 order by name",
+  });
+  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Formatted SQL" });
+  const error = notice("error");
+  let upper = true;
+
+  const casing = switchControl("Upper-case keywords", { checked: true });
+  casing.input.addEventListener("change", () => { upper = casing.input.checked; run(); });
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    result.value = format(source.value, upper);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Options", casing), panel("SQL", source), error),
+      stack(panel("Formatted", result))
+    ),
+    foot: actions(copyButton(() => result.value, "Copy query", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,102 @@
+// Compacts a SQL query. String literals are kept intact.
+import { el, bench, stack, panel, textArea, switchControl, copyButton, actions, toolcard } from "../core.js";
+
+const bytes = (text) => new TextEncoder().encode(text).length;
+
+const tile = (key, value) =>
+  el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__v" }, value), el("span", { class: "mvb-stat__k" }, key));
+
+function minify(sql, stripComments) {
+  let out = "";
+  let pending = false;
+  let i = 0;
+  const n = sql.length;
+  while (i < n) {
+    const ch = sql[i];
+    const next = sql[i + 1];
+    if (stripComments && ch === "-" && next === "-") {
+      while (i < n && sql[i] !== "\n") i++;
+      continue;
+    }
+    if (stripComments && ch === "/" && next === "*") {
+      i += 2;
+      while (i < n && !(sql[i] === "*" && sql[i + 1] === "/")) i++;
+      i += 2;
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === "`") {
+      if (pending && out) out += " ";
+      pending = false;
+      out += ch;
+      i++;
+      while (i < n) {
+        out += sql[i];
+        if (sql[i] === ch) {
+          if (sql[i + 1] === ch) { out += sql[i + 1]; i += 2; continue; }
+          i++;
+          break;
+        }
+        i++;
+      }
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      pending = true;
+      i++;
+      continue;
+    }
+    if (pending && out) {
+      const prev = out[out.length - 1];
+      if (!" (,".includes(prev) && !"),;".includes(ch)) out += " ";
+    }
+    pending = false;
+    out += ch;
+    i++;
+  }
+  return out.trim().replace(/;}/g, "}");
+}
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 12,
+    class: "mvb-in mvb-in--area mvb-in--mono",
+    "aria-label": "SQL",
+    value: "SELECT id,\n       name\n  FROM users\n WHERE active = true\n   AND age > 18;",
+  });
+  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Minified SQL" });
+  const stats = el("div", { class: "mvb-stats" });
+  let stripComments = true;
+
+  const comments = switchControl("Remove comments", { checked: true });
+  comments.input.addEventListener("change", () => { stripComments = comments.input.checked; run(); });
+
+  function run() {
+    stats.replaceChildren();
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    const compact = minify(source.value, stripComments);
+    const before = bytes(source.value);
+    const after = bytes(compact);
+    const saved = before ? Math.max(0, Math.round((1 - after / before) * 100)) : 0;
+    result.value = compact;
+    stats.append(tile("Before", `${before} B`), tile("After", `${after} B`), tile("Saved", `${saved}%`));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Options", comments), panel("SQL", source)),
+      stack(panel("Minified", result), stats)
+    ),
+    foot: actions(copyButton(() => result.value, "Copy query", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/standard-deviation.js

@@ -0,0 +1,96 @@
+// Variance and standard deviation for a population or a sample.
+import { el, bench, stack, panel, textArea, notice, copyButton, chipRow, actions, toolcard } from "../core.js";
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 6 });
+}
+
+function parseNumbers(text) {
+  const tokens = text.split(/[\s,;]+/).filter(Boolean);
+  const nums = tokens.map(Number);
+  return { nums, invalid: nums.some((n) => !Number.isFinite(n)) };
+}
+
+function tile(label) {
+  const value = el("span", { class: "mvb-stat__v" }, "-");
+  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: 8, value: "2, 4, 4, 4, 5, 5, 7, 9", "aria-label": "Numbers", placeholder: "2, 4, 4, 4, 5, 5, 7, 9" });
+  const mean = tile("Mean");
+  const variance = tile("Variance");
+  const deviation = tile("Std deviation");
+  const count = tile("Count");
+  const stats = el("div", { class: "mvb-stats" }, mean, variance, deviation, count);
+  const error = notice("error");
+  let kind = "population";
+  let text = "";
+
+  function clear() {
+    for (const item of [mean, variance, deviation, count]) item.set("-");
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const { nums, invalid } = parseNumbers(source.value);
+    if (!nums.length) {
+      clear();
+      return;
+    }
+    if (invalid) {
+      clear();
+      error.write("Use numbers only, separated by spaces, commas or new lines.");
+      return;
+    }
+    const n = nums.length;
+    if (kind === "sample" && n < 2) {
+      clear();
+      error.write("A sample needs at least two values.");
+      return;
+    }
+    const average = nums.reduce((acc, value) => acc + value, 0) / n;
+    const squares = nums.reduce((acc, value) => acc + (value - average) ** 2, 0);
+    const divisor = kind === "sample" ? n - 1 : n;
+    const spread = squares / divisor;
+    mean.set(fmt(average));
+    variance.set(fmt(spread));
+    deviation.set(fmt(Math.sqrt(spread)));
+    count.set(String(n));
+    text = `${kind === "sample" ? "Sample" : "Population"} of ${n}: mean ${fmt(average)}, variance ${fmt(spread)}, standard deviation ${fmt(Math.sqrt(spread))}`;
+  }
+
+  const chips = chipRow(
+    [
+      { value: "population", label: "Population" },
+      { value: "sample", label: "Sample" },
+    ],
+    {
+      value: kind,
+      label: "Data set",
+      onChange: (value) => {
+        kind = value;
+        run();
+      },
+    }
+  );
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Numbers", source), panel("Data set", chips), error),
+      stack(stats)
+    ),
+    foot: actions(copyButton(() => text, "Copy summary", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/stopwatch.js

@@ -0,0 +1,133 @@
+// Times an activity and records laps with millisecond precision.
+import { el, blank, bench, stack, panel, button, output, copyButton, actions, toolcard } from "../core.js";
+
+function format(ms) {
+  const total = Math.floor(ms);
+  const h = Math.floor(total / 3600000);
+  const m = Math.floor((total % 3600000) / 60000);
+  const s = Math.floor((total % 60000) / 1000);
+  const cs = total % 1000;
+  const pad = (n, size = 2) => String(n).padStart(size, "0");
+  return h > 0
+    ? `${h}:${pad(m)}:${pad(s)}.${pad(cs, 3)}`
+    : `${pad(m)}:${pad(s)}.${pad(cs, 3)}`;
+}
+
+export function mount(slot) {
+  const display = output({ rows: 2 });
+  const listWrap = el("div", { class: "mvb-scroll" });
+
+  const startButton = button("Start", { icon: "play", kind: "fill" });
+  const lapButton = button("Lap", { icon: "plus" });
+  const resetButton = button("Reset", { icon: "refresh-cw" });
+  const copyLaps = copyButton(() => lapsText(), "Copy laps");
+
+  let running = false;
+  let startAt = 0;
+  let elapsed = 0;
+  let frame = 0;
+  let laps = [];
+
+  const label = () => startButton.querySelector("span");
+  const current = () => elapsed + (running ? performance.now() - startAt : 0);
+
+  function paint() {
+    display.write(format(current()));
+  }
+
+  function loop() {
+    paint();
+    frame = requestAnimationFrame(loop);
+  }
+
+  function updateButtons() {
+    lapButton.disabled = !running;
+    resetButton.disabled = !running && elapsed === 0 && laps.length === 0;
+    copyLaps.disabled = laps.length === 0;
+  }
+
+  function renderLaps() {
+    if (!laps.length) {
+      listWrap.replaceChildren(blank("list", "No laps yet."));
+      return;
+    }
+    const rows = laps.map((total, i) => {
+      const split = total - (laps[i - 1] ?? 0);
+      return el("tr", {},
+        el("th", {}, String(i + 1)),
+        el("td", {}, format(split)),
+        el("td", {}, format(total))
+      );
+    });
+    listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "#"), el("th", {}, "Lap"), el("th", {}, "Total"))),
+      el("tbody", {}, ...rows)
+    ));
+  }
+
+  function lapsText() {
+    return laps.map((total, i) => {
+      const split = total - (laps[i - 1] ?? 0);
+      return `${i + 1}\t${format(split)}\t${format(total)}`;
+    }).join("\n");
+  }
+
+  function toggle() {
+    if (running) {
+      elapsed = current();
+      running = false;
+      cancelAnimationFrame(frame);
+      label().textContent = "Resume";
+    } else {
+      startAt = performance.now();
+      running = true;
+      label().textContent = "Pause";
+      frame = requestAnimationFrame(loop);
+    }
+    paint();
+    updateButtons();
+  }
+
+  function lap() {
+    if (!running) return;
+    laps.push(current());
+    renderLaps();
+    updateButtons();
+  }
+
+  function reset() {
+    running = false;
+    cancelAnimationFrame(frame);
+    elapsed = 0;
+    laps = [];
+    label().textContent = "Start";
+    paint();
+    renderLaps();
+    updateButtons();
+  }
+
+  startButton.addEventListener("click", toggle);
+  lapButton.addEventListener("click", lap);
+  resetButton.addEventListener("click", reset);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Laps", listWrap)),
+      stack(display)
+    ),
+    foot: actions(copyLaps, resetButton, lapButton, startButton),
+  });
+  slot.append(card.node);
+  paint();
+  renderLaps();
+  updateButtons();
+
+  return {
+    unmount() {
+      cancelAnimationFrame(frame);
+      running = false;
+    },
+  };
+}
+
+export default { mount };

package/mevebu/libs/js/tools/study-schedule.js

@@ -0,0 +1,88 @@
+// Topics with a session date each, ticked off as you go.
+import { el, toast, blank, bench, stack, panel, textInput, checkbox, button, copyButton, actions, toolcard, readPin, writePin } from "../core.js";
+
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+
+export function mount(slot) {
+  const PIN = "study-schedule";
+  const saved = readPin(PIN, []);
+  let list = Array.isArray(saved) ? saved : [];
+
+  const name = textInput({ placeholder: "Topic", "aria-label": "Topic" });
+  const date = el("input", { class: "mvb-in", type: "date", "aria-label": "Session date" });
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+
+  const addButton = button("Add", { icon: "plus", kind: "fill" });
+
+  const save = () => writePin(PIN, list);
+  const tile = (key, value) => el("div", { class: "mvb-stat" },
+    el("span", { class: "mvb-stat__v" }, String(value)),
+    el("span", { class: "mvb-stat__k" }, key));
+
+  const sorted = () => list.slice().sort((a, b) => (a.date || "9999").localeCompare(b.date || "9999"));
+
+  function removeButton(item) {
+    const node = button("", { icon: "trash", "aria-label": `Remove ${item.name}` });
+    node.addEventListener("click", () => {
+      list = list.filter((entry) => entry.id !== item.id);
+      save();
+      render();
+    });
+    return node;
+  }
+
+  function rowNode(item) {
+    const box = checkbox(item.name, { checked: item.done });
+    box.input.addEventListener("change", () => {
+      item.done = box.input.checked;
+      save();
+      render();
+    });
+    return el("tr", {},
+      el("td", {}, box),
+      el("td", {}, item.date || "No date"),
+      el("td", {}, removeButton(item)));
+  }
+
+  function render() {
+    const rows = sorted();
+    if (!rows.length) {
+      listWrap.replaceChildren(blank("calendar-days", "No topics yet."));
+    } else {
+      listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+        el("thead", {}, el("tr", {}, el("th", {}, "Topic"), el("th", {}, "Date"), el("th", {}, ""))),
+        el("tbody", {}, ...rows.map(rowNode))));
+    }
+    const done = list.filter((item) => item.done).length;
+    stats.replaceChildren(tile("Topics", list.length), tile("Done", done), tile("Left", list.length - done));
+  }
+
+  function add() {
+    const text = name.value.trim();
+    if (!text) return toast("Add a topic first");
+    list.push({ id: uid(), name: text, date: date.value, done: false });
+    name.value = "";
+    date.value = "";
+    name.focus();
+    save();
+    render();
+  }
+
+  name.addEventListener("keydown", (event) => { if (event.key === "Enter") add(); });
+  addButton.addEventListener("click", add);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Topic", name), panel("Session date", date)),
+      stack(stats, panel("Plan", listWrap))
+    ),
+    foot: actions(copyButton(() => sorted().map((item) => `${item.date || "No date"}  ${item.done ? "[x]" : "[ ]"} ${item.name}`).join("\n"), "Copy plan"), addButton),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,74 @@
+// Subtitle lines checked against a maximum length, with blank lines tidied.
+import { el, blank, bench, stack, panel, textArea, numberInput, notice, output, copyButton, actions, toolcard } from "../core.js";
+
+const isTiming = (line) => line.includes("-->");
+const isIndex = (line) => /^\d+$/.test(line.trim());
+
+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: 12, "aria-label": "Subtitles", placeholder: "Paste subtitle text or SRT" });
+  const max = numberInput({ min: "10", max: "120", value: "42", "aria-label": "Maximum line length" });
+
+  const linesTile = tile("Lines");
+  const longTile = tile("Long lines");
+  const longestTile = tile("Longest");
+  const stats = el("div", { class: "mvb-stats" }, linesTile, longTile, longestTile);
+
+  const longWrap = el("div", { class: "mvb-scroll" });
+  const out = output({ rows: 10 });
+  const note = notice("note");
+
+  let tidied = "";
+
+  function run() {
+    const cap = Math.max(1, parseInt(max.value, 10) || 42);
+    const raw = source.value.replace(/\r\n?/g, "\n").split("\n");
+    const content = raw.filter((line) => line.trim() && !isIndex(line) && !isTiming(line));
+    const long = content.filter((line) => line.length > cap);
+    const longest = content.reduce((best, line) => Math.max(best, line.length), 0);
+
+    linesTile.set(String(content.length));
+    longTile.set(String(long.length));
+    longestTile.set(String(longest));
+    note.write(long.length ? `${long.length} lines run past ${cap} characters.` : "");
+
+    if (!long.length) {
+      longWrap.replaceChildren(blank("film", "No line runs past the limit."));
+    } else {
+      longWrap.replaceChildren(el("div", { class: "mvb-kv" },
+        ...long.map((line) => el("div", { class: "mvb-kv__row" },
+          el("span", { class: "mvb-kv__k" }, `${line.length}`),
+          el("span", { class: "mvb-kv__v" }, line)))));
+    }
+
+    tidied = raw
+      .map((line) => line.replace(/\s+$/, ""))
+      .join("\n")
+      .replace(/\n{3,}/g, "\n\n")
+      .replace(/^\n+|\n+$/g, "");
+    out.write(tidied);
+  }
+
+  source.addEventListener("input", run);
+  max.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Subtitles", source), panel("Maximum line length", max), note),
+      stack(stats, panel("Long lines", longWrap), panel("Tidied", out))
+    ),
+    foot: actions(copyButton(() => tidied, "Copy text", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };