mevebu 1.11.0 → 2.0.0

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

@@ -0,0 +1,184 @@
+// CSV to INSERT statements. Quoting follows the dialect, because Postgres and
+// MySQL disagree about backslashes and about boolean literals.
+import {
+  el, toast, download, bench, stack, panel, selectInput, textInput, checkbox,
+  button, actions, toolcard, blank, notice, output,
+} from "../core.js";
+import { dropzone, baseName, formatBytes } from "../files.js";
+import { parseDelimited, detectDelimiter, headerKeys } from "../csv.js";
+
+const DIALECTS = {
+  postgres: { label: "PostgreSQL", quote: "'", escape: (v) => v.replace(/'/g, "''"), bool: (v) => (/^(true|1|yes)$/i.test(v) ? "TRUE" : "FALSE") },
+  mysql: { label: "MySQL", quote: "'", escape: (v) => v.replace(/\\/g, "\\\\").replace(/'/g, "''"), bool: (v) => (/^(true|1|yes)$/i.test(v) ? "1" : "0") },
+  sqlite: { label: "SQLite", quote: "'", escape: (v) => v.replace(/'/g, "''"), bool: (v) => (/^(true|1|yes)$/i.test(v) ? "1" : "0") },
+};
+
+export function mount(slot) {
+  let file = null;
+  let rows = [];
+  let header = [];
+  let headerTypes = [];
+
+  const tableName = textInput({ value: "my_table", "aria-label": "Table name" });
+  const schema = textInput({ placeholder: "public", "aria-label": "Schema" });
+  const dialect = selectInput(
+    Object.entries(DIALECTS).map(([value, config]) => ({ value, label: config.label })),
+    { value: "postgres", "aria-label": "Dialect" }
+  );
+  const perStatement = selectInput(
+    [
+      { value: "row", label: "One per row" },
+      { value: "batch", label: "One multi row insert" },
+    ],
+    { value: "row", "aria-label": "Statement shape" }
+  );
+  const useNulls = checkbox("Empty cells become NULL", { checked: true });
+  const truncate = checkbox("Start with TRUNCATE", { checked: false });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const result = output({ rows: 14 });
+  const empty = blank("database", "Drop a CSV to build the statements.");
+
+  const drop = dropzone({ label: "Drop a CSV here", accept: ".csv,text/csv,text/plain", iconName: "database" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const copyButton = button("Copy SQL", {
+    icon: "copy",
+    onclick: async () => {
+      if (!result.textContent) return;
+      try {
+        await navigator.clipboard.writeText(result.textContent);
+        toast("SQL copied");
+      } catch {
+        error.write("The clipboard is blocked here. Download the .sql file instead.");
+      }
+    },
+  });
+  const downloadButton = button("Download .sql", { icon: "download", kind: "fill" });
+
+  function quote(value, config) {
+    if (useNulls.input.checked && value === "") return "NULL";
+    return `${config.quote}${config.escape(value)}${config.quote}`;
+  }
+
+  function build() {
+    if (!rows.length) return "";
+    const config = DIALECTS[dialect.value] ?? DIALECTS.postgres;
+    const name = tableName.value.trim() || "my_table";
+    const prefix = schema.value.trim() ? `${schema.value.trim()}.${name}` : name;
+    const columns = header.map((cell) => `"${cell.replace(/"/g, '""')}"`).join(", ");
+    const lines = [];
+
+    if (truncate.input.checked) lines.push(`TRUNCATE TABLE ${prefix};`);
+
+    if (perStatement.value === "batch") {
+      const values = rows
+        .map((row) => `  (${row.map((cell, index) => {
+          const columnType = headerTypes[index];
+          return columnType === "boolean" ? config.bool(cell) : quote(cell, config);
+        }).join(", ")})`)
+        .join(",\n");
+      lines.push(`INSERT INTO ${prefix} (${columns}) VALUES\n${values};`);
+    } else {
+      for (const row of rows) {
+        const values = row.map((cell, index) => {
+          const columnType = headerTypes[index];
+          return columnType === "boolean" ? config.bool(cell) : quote(cell, config);
+        }).join(", ");
+        lines.push(`INSERT INTO ${prefix} (${columns}) VALUES (${values});`);
+      }
+    }
+    return lines.join("\n");
+  }
+
+  function detectTypes() {
+    headerTypes = header.map((_, index) => {
+      const sample = rows.slice(0, 20).map((row) => row[index] ?? "").filter((cell) => cell !== "");
+      if (sample.length && sample.every((cell) => /^(true|false|1|0|yes|no)$/i.test(cell))) return "boolean";
+      return "text";
+    });
+  }
+
+  function render() {
+    empty.hidden = rows.length > 0;
+    result.hidden = rows.length === 0;
+    copyButton.disabled = rows.length === 0;
+    downloadButton.disabled = rows.length === 0;
+    if (!rows.length) {
+      summary.textContent = "";
+      result.write("");
+      return;
+    }
+    detectTypes();
+    const sql = build();
+    result.write(sql);
+    const bytes = new TextEncoder().encode(sql).length;
+    summary.textContent = `${rows.length} row${rows.length === 1 ? "" : "s"} · ${header.length} column${header.length === 1 ? "" : "s"} · ${formatBytes(bytes)} of SQL`;
+  }
+
+  async function open(files) {
+    const picked = Array.from(files).find((entry) => /\.(csv|tsv|txt)$/i.test(entry.name) || entry.type.startsWith("text/"));
+    if (!picked) {
+      error.write("That file is not a CSV.");
+      return;
+    }
+    try {
+      const text = await picked.text();
+      const delimiter = detectDelimiter(text);
+      const parsed = parseDelimited(text, delimiter);
+      if (parsed.length < 2) throw new Error("A CSV needs a header row and at least one data row.");
+      file = picked;
+      header = headerKeys(parsed[0]);
+      rows = parsed.slice(1).filter((row) => row.some((cell) => cell !== ""));
+      error.write("");
+      render();
+    } catch (caught) {
+      error.write(caught?.message || "This file could not be read.");
+    }
+  }
+
+  drop.onFiles(open);
+  tableName.addEventListener("input", render);
+  schema.addEventListener("input", render);
+  dialect.addEventListener("change", render);
+  perStatement.addEventListener("change", render);
+  useNulls.input.addEventListener("change", render);
+  truncate.input.addEventListener("change", render);
+
+  downloadButton.addEventListener("click", () => {
+    if (!rows.length) return;
+    download(`${baseName(file?.name || "data")}.sql`, result.textContent, "application/sql");
+  });
+  clearButton.addEventListener("click", () => {
+    file = null;
+    rows = [];
+    header = [];
+    error.write("");
+    render();
+  });
+
+  render();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        panel("Table", tableName),
+        panel("Schema", schema, "Optional. Leave empty for the default."),
+        panel("Dialect", dialect),
+        panel("Statement shape", perStatement),
+        useNulls,
+        truncate,
+        error
+      ),
+      stack(summary, empty, result)
+    ),
+    foot: actions(clearButton, copyButton, downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/team-generator.js

@@ -0,0 +1,203 @@
+// Split a list into balanced groups. Two modes: a fixed number of groups, or a
+// fixed size per group. Exclusion pairs keep two people apart, and leads are
+// spread one per group.
+import {
+  el, toast, download, bench, stack, panel, textArea, numberInput, checkbox,
+  button, actions, toolcard, blank, notice, chipRow, copyButton,
+} from "../core.js";
+
+function shuffle(list) {
+  const out = [...list];
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [out[i], out[j]] = [out[j], out[i]];
+  }
+  return out;
+}
+
+function parseNames(text) {
+  return text
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+}
+
+function parsePairs(text) {
+  return text
+    .split(/\r?\n/)
+    .map((line) => line.split(/\s*(?:\||,|;|\+)\s*/).map((part) => part.trim()).filter(Boolean))
+    .filter((pair) => pair.length === 2);
+}
+
+function violates(groups, pairs) {
+  const where = new Map();
+  groups.forEach((group, index) => group.forEach((name) => where.set(name, index)));
+  return pairs.some(([a, b]) => where.has(a) && where.has(b) && where.get(a) === where.get(b));
+}
+
+function build(names, mode, value, pairs, leads, attempts = 400) {
+  if (!names.length) return null;
+  let best = null;
+  for (let round = 0; round < attempts; round++) {
+    const pool = shuffle(names);
+    let groups;
+    if (mode === "groups") {
+      const count = Math.max(1, Math.min(value, names.length));
+      groups = Array.from({ length: count }, () => []);
+      pool.forEach((name, index) => groups[index % count].push(name));
+    } else {
+      const size = Math.max(1, value);
+      groups = [];
+      for (let i = 0; i < pool.length; i += size) groups.push(pool.slice(i, i + size));
+    }
+    if (pairs.length && violates(groups, pairs)) {
+      best ??= groups;
+      continue;
+    }
+    return groups;
+  }
+  return best;
+}
+
+function placeLeads(groups, leads) {
+  if (!leads.length) return groups;
+  const pool = [...leads];
+  // One lead per group first, then any leftover leads join the smallest group.
+  for (const group of groups) {
+    if (!pool.length) break;
+    const lead = pool.shift();
+    if (group.includes(lead)) continue;
+    const at = group.findIndex((name) => !leads.includes(name));
+    if (at >= 0) group[at] = lead;
+    else group.push(lead);
+  }
+  for (const lead of pool) {
+    const smallest = groups.reduce((a, b) => (a.length <= b.length ? a : b));
+    if (!smallest.includes(lead)) smallest.push(lead);
+  }
+  return groups;
+}
+
+export function mount(slot) {
+  const names = textArea({ rows: 8, placeholder: "Ani\nBudi\nCitra\nDewi", "aria-label": "Names" });
+  const leads = textArea({ rows: 3, placeholder: "Ani\nBudi", "aria-label": "Leads" });
+  const exclusions = textArea({ rows: 3, placeholder: "Ani, Budi", "aria-label": "Exclusion pairs" });
+
+  let mode = "groups";
+  const modeRow = chipRow(
+    [
+      { value: "groups", label: "Number of groups" },
+      { value: "size", label: "Size per group" },
+    ],
+    { value: "groups", label: "Split by", onChange: (value) => { mode = value; sync(); } }
+  );
+  const amount = numberInput({ min: "1", max: "200", step: "1", value: "4", "aria-label": "Group count or size" });
+  const amountLabel = el("span", { class: "text-sm font-semibold text-ink-2" }, "Groups");
+  const keepLeads = checkbox("One lead per group", { checked: true });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const output = el("div", { class: "grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]" });
+  const empty = blank("users-round", "Paste names to build the groups.");
+
+  const generate = button("Generate", { icon: "shuffle", kind: "fill" });
+  const copyAll = copyButton(() => summary.dataset.plain ?? "", "Copy groups");
+
+  let groups = [];
+
+  function sync() {
+    amountLabel.textContent = mode === "groups" ? "Groups" : "People per group";
+  }
+
+  function render() {
+    empty.hidden = groups.length > 0;
+    output.hidden = groups.length === 0;
+    copyAll.disabled = groups.length === 0;
+    output.replaceChildren(
+      ...groups.map((group, index) =>
+        el(
+          "section",
+          { class: "grid content-start gap-2 rounded-r2 border border-orbit bg-deck-2 p-3.5" },
+          el("h3", { class: "m-0 flex items-baseline justify-between gap-2 text-sm font-bold" },
+            el("span", {}, `Group ${index + 1}`),
+            el("span", { class: "text-2xs font-semibold text-ink-3 tabular-nums" }, `${group.length}`)),
+          el("ul", { class: "m-0 grid list-none gap-1 p-0" },
+            ...group.map((name) =>
+              el("li", { class: "flex items-center gap-1.5 text-sm text-ink-2" },
+                el("span", { class: "size-1.5 flex-none rounded-full bg-jade" }), name)))
+        )
+      )
+    );
+  }
+
+  function run() {
+    const list = parseNames(names.value);
+    const leadList = keepLeads.input.checked ? parseNames(leads.value).filter((name) => list.includes(name)) : [];
+    const pairs = parsePairs(exclusions.value).filter(([a, b]) => list.includes(a) && list.includes(b));
+    error.write("");
+
+    if (!list.length) {
+      groups = [];
+      summary.textContent = "";
+      render();
+      return;
+    }
+    if (list.length !== new Set(list).size) error.write("A name appears more than once, so the count is off.");
+    if (leadList.length && mode === "groups" && leadList.length > Number(amount.value)) {
+      error.write("There are more leads than groups, so some groups get two.");
+    }
+
+    groups = build(list, mode, Math.max(1, Number(amount.value) || 1), pairs, leadList) ?? [];
+    if (keepLeads.input.checked) groups = placeLeads(groups, leadList);
+
+    const sizes = groups.map((group) => group.length);
+    const spread = sizes.length ? Math.max(...sizes) - Math.min(...sizes) : 0;
+    summary.textContent = `${list.length} people · ${groups.length} group${groups.length === 1 ? "" : "s"} · ${Math.min(...sizes)} to ${Math.max(...sizes)} each${spread > 1 ? ", uneven because of the rules" : ""}`;
+    summary.dataset.plain = groups.map((group, index) => `Group ${index + 1}: ${group.join(", ")}`).join("\n");
+    render();
+  }
+
+  generate.addEventListener("click", () => {
+    run();
+    if (groups.length) toast("Groups ready");
+  });
+  amount.addEventListener("input", run);
+  keepLeads.input.addEventListener("change", run);
+  names.addEventListener("input", run);
+
+  const downloadButton = button("Download CSV", {
+    icon: "download",
+    onclick: () => {
+      if (!groups.length) return;
+      const rows = [["group", "name"]];
+      groups.forEach((group, index) => group.forEach((name) => rows.push([String(index + 1), name])));
+      const csv = rows.map((row) => row.map((cell) => `"${cell.replace(/"/g, '""')}"`).join(",")).join("\n");
+      download("groups.csv", csv, "text/csv");
+    },
+  });
+
+  sync();
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Names", names, "One per line."),
+        el("div", { class: "grid gap-1.5" }, el("span", { class: "text-sm font-semibold text-ink-2" }, "Split by"), modeRow),
+        panel(amountLabel, amount),
+        panel("Leads", leads, "Optional. One per line."),
+        keepLeads,
+        panel("Keep apart", exclusions, "One pair per line, like Ani, Budi."),
+        error
+      ),
+      stack(summary, empty, output)
+    ),
+    foot: actions(copyAll, downloadButton, generate),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "1.11.0",
+  "version": "2.0.0",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",

package/mevebu/libs/js/tools/coin-flip.js

@@ -1,78 +0,0 @@
-// Heads or tails with a running count that survives a page change.
-import { el, button, bench, stack, panel, actions, readPin, writePin, randomInt, toolcard } from "../core.js";
-
-// A toss is one flip: a click while the coin is still turning replaces the turn
-// in progress instead of queueing another one behind it.
-const TOSS_MS = 400;
-
-/** A tally tile. The value is the node the tool writes to. */
-function tile(key) {
-  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
-  const row = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
-  return { row, value };
-}
-
-export function mount(slot) {
-  const PIN = "coin-flip";
-  const saved = readPin(PIN, { heads: 0, tails: 0 });
-  let heads = Number(saved.heads) || 0;
-  let tails = Number(saved.tails) || 0;
-  let timer = 0;
-
-  const coin = el("div", { class: "grid size-32 select-none place-items-center rounded-full bg-jade text-display font-bold text-on-jade data-[toss]:animate-toss", role: "img", "aria-label": "Coin, not flipped yet" }, "?");
-  const verdict = el("p", { class: "text-lg font-bold tracking-[-0.01em] min-h-7", "aria-live": "polite" });
-  const headsTile = tile("Heads");
-  const tailsTile = tile("Tails");
-  const totalTile = tile("Total");
-  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, headsTile.row, tailsTile.row, totalTile.row);
-
-  function render(decision) {
-    verdict.textContent = decision;
-    coin.setAttribute("aria-label", decision ? `Coin: ${decision.toLowerCase()}` : "Coin, not flipped yet");
-    headsTile.value.textContent = String(heads);
-    tailsTile.value.textContent = String(tails);
-    totalTile.value.textContent = String(heads + tails);
-    writePin(PIN, { heads, tails });
-  }
-
-  const flipButton = button("Flip", { kind: "fill" });
-  const resetButton = button("Reset the count", { kind: "quiet" });
-
-  flipButton.addEventListener("click", () => {
-    clearTimeout(timer);
-    delete coin.dataset.toss;
-    void coin.offsetWidth;
-    coin.dataset.toss = "";
-    timer = setTimeout(() => {
-      const isHeads = randomInt(2) === 0;
-      if (isHeads) heads++;
-      else tails++;
-      coin.textContent = isHeads ? "H" : "T";
-      render(isHeads ? "Heads" : "Tails");
-    }, TOSS_MS);
-  });
-
-  resetButton.addEventListener("click", () => {
-    clearTimeout(timer);
-    heads = 0;
-    tails = 0;
-    coin.textContent = "?";
-    render("");
-  });
-
-  const card = toolcard({
-    body: bench(
-      stack(panel("Coin", coin)),
-      stack(panel("Result", verdict), stats)
-    ),
-    foot: actions(resetButton, flipButton)});
-  slot.append(card.node);
-  render("");
-
-  return {
-    unmount() {
-      clearTimeout(timer);
-    }};
-}
-
-export default { mount };

package/mevebu/libs/js/tools/name-picker.js

@@ -1,68 +0,0 @@
-// Draws one or more names from a list, every entry with equal odds.
-import { el, toast, copyText, shuffle, randomInt, debounce, bench, stack, panel, textArea, numberInput, checkbox, button, output, readPin, writePin, actions, toolcard } from "../core.js";
-
-export function mount(slot) {
-  const PIN = "name-picker";
-  const saved = readPin(PIN, { entries: "Ana\nBudi\nCitra\nDimas\nElena\nFajar\nGita\nHendra", winners: "1", unique: true });
-
-  const listField = textArea({ value: saved.entries ?? "", rows: 8, "aria-label": "Entries, one per line", placeholder: "One entry per line" });
-  const countField = numberInput({ value: saved.winners ?? "1", min: "1", max: "500", "aria-label": "How many to draw" });
-  const uniqueBox = checkbox("No repeats", { checked: saved.unique !== false });
-  const notify = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
-
-  const drawButton = button("Draw", { icon: "play", kind: "fill" });
-  const copyButton = button("Copy", { icon: "copy" });
-  const result = output();
-  let current = [];
-
-  function entries() {
-    const raw = listField.value.includes(",") && !listField.value.includes("\n")
-      ? listField.value.split(",")
-      : listField.value.split(/\n+/);
-    return raw.map((line) => line.trim()).filter(Boolean);
-  }
-
-  function draw(syncInput = false) {
-    const list = entries();
-    if (!list.length) {
-      current = [];
-      result.write("");
-      notify.textContent = "Add entries to draw.";
-      return;
-    }
-    const wants = Math.max(1, parseInt(countField.value || "1", 10) || 1);
-    const total = uniqueBox.input.checked ? Math.min(wants, list.length) : Math.min(wants, 500);
-    if (syncInput) countField.value = String(total);
-    current = uniqueBox.input.checked
-      ? shuffle(list).slice(0, total)
-      : Array.from({ length: total }, () => list[randomInt(list.length)]);
-    result.write(current.join("\n"));
-    notify.textContent = `${current.length} drawn from ${list.length}.`;
-    writePin(PIN, { entries: listField.value, winners: String(current.length), unique: uniqueBox.input.checked });
-  }
-
-  // Editing the list, the count or the repeat rule redraws right away. The
-  // button stays for a fresh draw with the same settings.
-  drawButton.addEventListener("click", () => draw(true));
-  copyButton.addEventListener("click", async () => {
-    if (!current.length) return toast("Draw first, then copy");
-    toast((await copyText(result.textContent)) ? "Copied" : "Copy failed");
-  });
-  listField.addEventListener("input", debounce(() => draw(false), 200));
-  countField.addEventListener("input", () => draw(false));
-  countField.addEventListener("change", () => draw(true));
-  uniqueBox.input.addEventListener("change", () => draw(true));
-
-  const card = toolcard({
-    body: bench(
-      stack(panel("Entries", listField), panel("Winners", countField), panel(null, uniqueBox)),
-      stack(panel("Drawn", result), notify)
-    ),
-    foot: actions(copyButton, drawButton)});
-  slot.append(card.node);
-  draw();
-
-  return {};
-}
-
-export default { mount };