mevebu 1.11.0 → 2.1.0

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/mevebu/libs/js/tools/time-series.js

@@ -0,0 +1,191 @@
+// A dated series with a trend, a season and noise, so a demo chart looks like
+// data instead of a random walk. Seeded, and the shape is previewed before it
+// is downloaded.
+import {
+  el, toast, download, bench, stack, panel, numberInput, textInput, selectInput,
+  button, actions, toolcard, notice,
+} from "../core.js";
+import { toCsv } from "../csv.js";
+import { seeded, gaussian } from "../random.js";
+
+const FREQUENCIES = [
+  { value: "hour", label: "Hourly" },
+  { value: "day", label: "Daily" },
+  { value: "week", label: "Weekly" },
+  { value: "month", label: "Monthly" },
+];
+
+function step(date, frequency) {
+  const next = new Date(date);
+  if (frequency === "hour") next.setHours(next.getHours() + 1);
+  else if (frequency === "day") next.setDate(next.getDate() + 1);
+  else if (frequency === "week") next.setDate(next.getDate() + 7);
+  else next.setMonth(next.getMonth() + 1);
+  return next;
+}
+
+function iso(date, frequency) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  if (frequency === "hour") return `${year}-${month}-${day} ${String(date.getHours()).padStart(2, "0")}:00`;
+  return `${year}-${month}-${day}`;
+}
+
+export function mount(slot) {
+  const start = el("input", {
+    class: "w-full min-h-[var(--ctl)] rounded-r1 border border-orbit bg-deck px-3 py-2.5 text-base focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft",
+    type: "date",
+    value: (() => {
+      const now = new Date();
+      return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+    })(),
+    "aria-label": "Start date",
+  });
+  const frequency = selectInput(FREQUENCIES, { value: "day", "aria-label": "Frequency" });
+  const length = numberInput({ min: "2", max: "2000", step: "1", value: "60", "aria-label": "Points" });
+  const base = numberInput({ value: "100", step: "1", "aria-label": "Base value" });
+  const trend = numberInput({ value: "0.4", step: "0.1", "aria-label": "Trend per point" });
+  const season = numberInput({ value: "12", step: "1", "aria-label": "Season amplitude" });
+  const period = numberInput({ min: "2", max: "365", step: "1", value: "7", "aria-label": "Season period" });
+  const noise = numberInput({ min: "0", max: "100", step: "0.5", value: "4", "aria-label": "Noise" });
+  const seed = textInput({ value: "mevebu", "aria-label": "Seed", class: "font-mono" });
+  const spikeDate = el("input", {
+    class: "w-full min-h-[var(--ctl)] rounded-r1 border border-orbit bg-deck px-3 py-2.5 text-base focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft",
+    type: "date",
+    "aria-label": "Spike date",
+  });
+  const spikeMultiplier = numberInput({ value: "2", step: "0.1", "aria-label": "Spike multiplier" });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const chart = el("div", { class: "grid gap-2 rounded-r2 border border-orbit bg-deck-2 p-3" });
+  const result = el("pre", { class: "m-0 max-h-56 overflow-auto rounded-r2 border border-orbit bg-deck-2 p-3 font-mono text-2xs leading-[1.6]" });
+
+  let series = [];
+
+  function build() {
+    const count = Math.max(2, Math.min(2000, Number(length.value) || 2));
+    const random = seeded(seed.value || "mevebu");
+    const amp = Number(season.value) || 0;
+    const slope = Number(trend.value) || 0;
+    const spread = Number(noise.value) || 0;
+    const wave = Math.max(2, Number(period.value) || 7);
+    const startDate = new Date(`${start.value}T00:00:00`);
+    if (Number.isNaN(startDate.getTime())) {
+      error.write("Pick a start date.");
+      return;
+    }
+
+    const out = [];
+    let date = startDate;
+    for (let i = 0; i < count; i++) {
+      const seasonal = amp * Math.sin((2 * Math.PI * i) / wave);
+      const drift = slope * i;
+      const jitter = spread ? gaussian(random, 0, spread) : 0;
+      out.push({ date: iso(date, frequency.value), value: Number((Number(base.value || 0) + drift + seasonal + jitter).toFixed(2)) });
+      date = step(date, frequency.value);
+    }
+
+    if (spikeDate.value && Number(spikeMultiplier.value)) {
+      const target = spikeDate.value;
+      const hit = out.find((point) => point.date.startsWith(target));
+      if (hit) hit.value = Number((hit.value * Number(spikeMultiplier.value)).toFixed(2));
+      else error.write("The spike date is outside the series, so it was skipped.");
+    }
+
+    series = out;
+    render();
+  }
+
+  function render() {
+    if (!series.length) {
+      summary.textContent = "";
+      chart.replaceChildren();
+      result.textContent = "";
+      return;
+    }
+    const values = series.map((point) => point.value);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const span = max - min || 1;
+    const width = 100;
+    const height = 34;
+
+    // One polyline, drawn in a fixed viewBox, so the preview scales without a
+    // chart library.
+    const points = series
+      .map((point, index) => {
+        const x = (index / Math.max(1, series.length - 1)) * width;
+        const y = height - ((point.value - min) / span) * height;
+        return `${x.toFixed(2)},${y.toFixed(2)}`;
+      })
+      .join(" ");
+
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    svg.setAttribute("preserveAspectRatio", "none");
+    svg.setAttribute("class", "h-40 w-full");
+    svg.setAttribute("role", "img");
+    svg.setAttribute("aria-label", `Series preview, ${series.length} points`);
+    const line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
+    line.setAttribute("points", points);
+    line.setAttribute("fill", "none");
+    line.setAttribute("stroke", "var(--jade)");
+    line.setAttribute("stroke-width", "0.7");
+    line.setAttribute("vector-effect", "non-scaling-stroke");
+    svg.append(line);
+
+    chart.replaceChildren(
+      svg,
+      el("div", { class: "flex justify-between text-2xs text-ink-3 tabular-nums" },
+        el("span", {}, series[0].date),
+        el("span", {}, `${min} to ${max}`),
+        el("span", {}, series[series.length - 1].date))
+    );
+
+    const preview = [["date", "value"], ...series.slice(0, 40).map((point) => [point.date, String(point.value)])];
+    result.textContent = toCsv(preview) + (series.length > 40 ? `\n… ${series.length - 40} more rows` : "");
+    summary.textContent = `${series.length} points · ${frequency.value} · ${min} to ${max} · seed ${seed.value || "mevebu"}`;
+  }
+
+  for (const node of [start, frequency, length, base, trend, season, period, noise, seed, spikeDate, spikeMultiplier]) {
+    node.addEventListener("input", build);
+    node.addEventListener("change", build);
+  }
+
+  const downloadButton = button("Download CSV", {
+    icon: "download",
+    kind: "fill",
+    onclick: () => {
+      if (!series.length) return;
+      download("series.csv", toCsv([["date", "value"], ...series.map((point) => [point.date, String(point.value)])]), "text/csv");
+      toast("Series ready");
+    },
+  });
+
+  build();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Start", start), panel("Frequency", frequency)),
+        panel("Points", length),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Base", base), panel("Trend per point", trend)),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Season amplitude", season), panel("Season period", period)),
+        panel("Noise", noise),
+        panel("Seed", seed),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Spike date", spikeDate), panel("Spike ×", spikeMultiplier)),
+        error
+      ),
+      stack(summary, chart, result)
+    ),
+    foot: actions(downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "1.11.0",
+  "version": "2.1.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 };