mevebu 1.10.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/svg-to-png.js

@@ -0,0 +1,207 @@
+// An SVG rendered at whatever pixel size you ask for. The vector is drawn at
+// that size, so the PNG is sharp instead of an upscaled bitmap.
+import {
+  el, toast, download, bench, stack, panel, numberInput, colorInput, checkbox,
+  button, actions, toolcard, blank, notice, chipRow,
+} from "../core.js";
+import { dropzone, decodeImage, canvasToBlob, baseName, formatBytes } from "../files.js";
+
+const PRESETS = [
+  { value: "512", label: "512" },
+  { value: "1024", label: "1024" },
+  { value: "2048", label: "2048" },
+];
+
+export function mount(slot) {
+  let file = null;
+  let source = null;
+  let previewUrl = "";
+  let busy = false;
+  let token = 0;
+  let timer = null;
+
+  const width = numberInput({ min: "8", max: "8192", step: "1", value: "512", "aria-label": "Width in pixels" });
+  const height = numberInput({ min: "8", max: "8192", step: "1", value: "512", "aria-label": "Height in pixels" });
+  const lock = checkbox("Keep proportions", { checked: true });
+  const color = colorInput({ value: "#ffffff", "aria-label": "Background color" });
+  const transparent = checkbox("Transparent background", { checked: true });
+  const scale = chipRow(PRESETS.map((preset) => ({ value: preset.value, label: `${preset.label} px` })), {
+    value: "512",
+    label: "Preset size",
+    onChange: (value) => {
+      width.value = value;
+      height.value = value;
+      schedule();
+    },
+  });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const preview = el("img", { alt: "", class: "max-h-[380px] w-auto max-w-full rounded-r1 border border-orbit bg-[repeating-conic-gradient(#0000_0%_25%,var(--deck-2)_0%_50%)] bg-[length:16px_16px] object-contain" });
+  const empty = blank("image-up", "Open an SVG to render it.");
+  const previewBox = el("div", { class: "grid place-items-center rounded-r2 border border-orbit bg-deck-2 p-4" }, preview);
+
+  const drop = dropzone({ label: "Drop an SVG here", accept: "image/svg+xml,.svg", iconName: "image-up" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const saveButton = button("Download PNG", { icon: "download", kind: "fill" });
+
+  function sync() {
+    color.disabled = transparent.input.checked;
+  }
+
+  function schedule() {
+    clearTimeout(timer);
+    timer = setTimeout(render, 200);
+  }
+
+  function reset() {
+    token++;
+    clearTimeout(timer);
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
+    previewUrl = "";
+    file = null;
+    source = null;
+    preview.removeAttribute("src");
+    summary.textContent = "";
+    error.write("");
+    empty.hidden = false;
+    previewBox.hidden = true;
+    saveButton.disabled = true;
+    clearButton.disabled = true;
+  }
+
+  async function open(files) {
+    const picked = Array.from(files).find((entry) => entry.type === "image/svg+xml" || /\.svg$/i.test(entry.name));
+    if (!picked) {
+      error.write("That file is not an SVG.");
+      return;
+    }
+    reset();
+    const current = ++token;
+    try {
+      const bitmap = await decodeImage(picked);
+      if (current !== token) return;
+      source = bitmap;
+      file = picked;
+      const natural = Math.round(bitmap.width || bitmap.naturalWidth || 512);
+      width.value = String(Math.min(4096, natural));
+      height.value = String(Math.min(4096, Math.round(bitmap.height || bitmap.naturalHeight || natural)));
+      empty.hidden = true;
+      previewBox.hidden = false;
+      saveButton.disabled = false;
+      clearButton.disabled = false;
+      error.write("");
+      await render();
+    } catch (caught) {
+      if (current !== token) return;
+      error.write(caught?.message || "This SVG could not be read.");
+    }
+  }
+
+  async function render() {
+    if (!source) return;
+    const current = token;
+    const w = Math.max(8, Math.min(8192, Number(width.value) || 512));
+    const h = Math.max(8, Math.min(8192, Number(height.value) || 512));
+    try {
+      const canvas = document.createElement("canvas");
+      canvas.width = w;
+      canvas.height = h;
+      const context = canvas.getContext("2d", { alpha: true });
+      if (!transparent.input.checked) {
+        context.fillStyle = color.value;
+        context.fillRect(0, 0, w, h);
+      }
+      context.imageSmoothingEnabled = true;
+      context.imageSmoothingQuality = "high";
+      context.drawImage(source, 0, 0, w, h);
+      if (current !== token) return;
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+      previewUrl = URL.createObjectURL(await canvasToBlob(canvas, "image/png"));
+      preview.src = previewUrl;
+      summary.textContent = `${w} x ${h} px · ${file.name}`;
+    } catch (caught) {
+      error.write(caught?.message || "Could not render this SVG.");
+    }
+  }
+
+  async function save() {
+    if (!source || busy) return;
+    busy = true;
+    saveButton.disabled = true;
+    try {
+      const w = Math.max(8, Math.min(8192, Number(width.value) || 512));
+      const h = Math.max(8, Math.min(8192, Number(height.value) || 512));
+      const canvas = document.createElement("canvas");
+      canvas.width = w;
+      canvas.height = h;
+      const context = canvas.getContext("2d", { alpha: true });
+      if (!transparent.input.checked) {
+        context.fillStyle = color.value;
+        context.fillRect(0, 0, w, h);
+      }
+      context.imageSmoothingEnabled = true;
+      context.imageSmoothingQuality = "high";
+      context.drawImage(source, 0, 0, w, h);
+      const blob = await canvasToBlob(canvas, "image/png");
+      download(`${baseName(file.name)}-${w}x${h}.png`, blob);
+      summary.textContent = `${w} x ${h} px · ${formatBytes(blob.size)}`;
+      toast("PNG ready");
+    } catch (caught) {
+      error.write(caught?.message || "Could not write the PNG.");
+    } finally {
+      busy = false;
+      saveButton.disabled = false;
+    }
+  }
+
+  drop.onFiles(open);
+  width.addEventListener("input", () => {
+    if (lock.input.checked) height.value = width.value;
+    schedule();
+  });
+  height.addEventListener("input", () => {
+    if (lock.input.checked) width.value = height.value;
+    schedule();
+  });
+  transparent.input.addEventListener("change", () => {
+    sync();
+    schedule();
+  });
+  color.addEventListener("input", schedule);
+  saveButton.addEventListener("click", save);
+  clearButton.addEventListener("click", reset);
+  sync();
+  reset();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        panel("Preset", scale),
+        el("div", { class: "grid grid-cols-2 gap-3" },
+          panel("Width", width),
+          panel("Height", height)),
+        lock,
+        el("div", { class: "grid gap-1.5" },
+          el("span", { class: "text-sm font-semibold text-ink-2" }, "Background"),
+          el("div", { class: "flex flex-wrap items-center gap-2" }, color, transparent)),
+        error
+      ),
+      stack(summary, empty, previewBox)
+    ),
+    foot: actions(clearButton, saveButton),
+  });
+
+  slot.append(shell.node);
+
+  return {
+    unmount() {
+      token++;
+      clearTimeout(timer);
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+    },
+  };
+}
+
+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 };