mevebu 1.10.0 → 2.0.0

package/mevebu/libs/js/tools/pdf-to-text.js

@@ -0,0 +1,172 @@
+// The text layer of a PDF, page by page. pdf.js exposes the text items with
+// their positions, so lines are rebuilt from the vertical gap rather than from
+// the order the items happen to arrive in.
+import {
+  el, toast, download, bench, stack, panel, button, actions, toolcard, blank,
+  notice, output, copyButton,
+} from "../core.js";
+import { dropzone, baseName, formatBytes } from "../files.js";
+import { readPdfjs, parsePageRange } from "../pdf-engine.js";
+
+function joinItems(items) {
+  const lines = [];
+  let current = null;
+  let lastY = null;
+
+  for (const item of items) {
+    const text = item.str ?? "";
+    if (!text) continue;
+    const y = Math.round(item.transform?.[5] ?? 0);
+    if (lastY === null || Math.abs(y - lastY) > 2) {
+      if (current !== null) lines.push(current.trimEnd());
+      current = text;
+      lastY = y;
+    } else {
+      const needsSpace = current && !/\s$/.test(current) && !/^\s/.test(text);
+      current += (needsSpace ? " " : "") + text;
+    }
+  }
+  if (current !== null) lines.push(current.trimEnd());
+  return lines.join("\n").replace(/\n{3,}/g, "\n\n").trim();
+}
+
+export function mount(slot) {
+  let file = null;
+  let pdf = null;
+  let text = "";
+  let busy = false;
+  let token = 0;
+
+  const range = el("input", {
+    class: "w-full min-h-[var(--ctl)] rounded-r1 border border-orbit bg-deck px-3 py-2.5 font-mono text-sm focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft",
+    type: "text",
+    placeholder: "all",
+    spellcheck: "false",
+    autocomplete: "off",
+    "aria-label": "Page range",
+  });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const result = output({ rows: 16 });
+  const empty = blank("file-text", "Open a PDF to read its text.");
+
+  const drop = dropzone({ label: "Drop a PDF here", accept: "application/pdf,.pdf", iconName: "file-text" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const extractButton = button("Extract text", { icon: "text-search", kind: "fill" });
+  const copy = copyButton(() => text, "Copy text");
+
+  function reset() {
+    token++;
+    file = null;
+    pdf = null;
+    text = "";
+    result.write("");
+    summary.textContent = "";
+    error.write("");
+    empty.hidden = false;
+    extractButton.disabled = true;
+    clearButton.disabled = true;
+    copy.disabled = true;
+  }
+
+  async function open(files) {
+    const picked = Array.from(files).find((entry) => entry.type === "application/pdf" || /\.pdf$/i.test(entry.name));
+    if (!picked) {
+      error.write("That file is not a PDF.");
+      return;
+    }
+    reset();
+    const current = ++token;
+    summary.textContent = "Reading the PDF";
+    try {
+      const doc = await readPdfjs(picked);
+      if (current !== token) return;
+      file = picked;
+      pdf = doc;
+      summary.textContent = `${picked.name} · ${doc.numPages} page${doc.numPages === 1 ? "" : "s"} · ${formatBytes(picked.size)}`;
+      empty.hidden = true;
+      extractButton.disabled = false;
+      clearButton.disabled = false;
+      error.write("");
+    } catch (caught) {
+      if (current !== token) return;
+      summary.textContent = "";
+      error.write(caught?.message || "This PDF could not be read.");
+    }
+  }
+
+  async function extract() {
+    if (!pdf || busy) return;
+    busy = true;
+    const current = ++token;
+    extractButton.disabled = true;
+    summary.textContent = "Reading the text layer";
+    error.write("");
+    try {
+      const indexes = parsePageRange(range.value, pdf.numPages);
+      const blocks = [];
+      for (const [position, index] of indexes.entries()) {
+        if (current !== token) return;
+        const page = await pdf.getPage(index + 1);
+        const content = await page.getTextContent();
+        const body = joinItems(content.items);
+        blocks.push(`--- page ${index + 1} ---\n${body || "(no text on this page)"}`);
+        summary.textContent = `Page ${position + 1} of ${indexes.length}`;
+      }
+      text = blocks.join("\n\n");
+      result.write(text);
+      const words = text.split(/\s+/).filter(Boolean).length;
+      summary.textContent = `${indexes.length} page${indexes.length === 1 ? "" : "s"} · ${words} words`;
+      copy.disabled = false;
+      if (!words) error.write("No text layer here. This looks like a scan, so there is nothing to copy.");
+      else toast("Text ready");
+    } catch (caught) {
+      summary.textContent = "";
+      error.write(caught?.message || "Could not read the text.");
+    } finally {
+      if (current === token) {
+        busy = false;
+        extractButton.disabled = false;
+      }
+    }
+  }
+
+  drop.onFiles(open);
+  extractButton.addEventListener("click", extract);
+  clearButton.addEventListener("click", reset);
+  reset();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        panel("Pages", range, "1-3, 7, 10- . Empty means every page."),
+        error,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "A scanned page is an image, so it has no text to read. Run it through an OCR tool first.")
+      ),
+      stack(summary, empty, result)
+    ),
+    foot: actions(clearButton, copy,
+      el("button", {
+        class: "inline-flex min-h-[var(--ctl)] cursor-pointer items-center justify-center gap-2 rounded-r1 border border-orbit bg-deck px-4 text-sm font-semibold whitespace-nowrap text-ink transition-colors duration-150 hover:border-orbit-hard hover:bg-deck-2 disabled:opacity-50",
+        type: "button",
+        onclick: () => {
+          if (!text) return;
+          download(`${baseName(file?.name || "document")}.txt`, text, "text/plain");
+        },
+      }, "Download .txt"),
+      extractButton),
+  });
+
+  slot.append(shell.node);
+
+  return {
+    unmount() {
+      token++;
+    },
+  };
+}
+
+export default { mount };

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

@@ -0,0 +1,195 @@
+// A rotating duty roster. Names take turns across a date range, with a fixed
+// number of slots per day, an optional weekend skip, and pinned dates.
+import {
+  el, toast, download, bench, stack, panel, textArea, numberInput, button,
+  actions, toolcard, blank, notice, checkbox, selectInput,
+} from "../core.js";
+
+function parseNames(text) {
+  return text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
+}
+
+function parsePins(text) {
+  const pins = new Map();
+  for (const line of text.split(/\r?\n/)) {
+    const match = /^(\d{4}-\d{2}-\d{2})\s*[:|,]\s*(.+)$/.exec(line.trim());
+    if (match) pins.set(match[1], match[2].split(/\s*(?:,|\|)\s*/).map((name) => name.trim()).filter(Boolean));
+  }
+  return pins;
+}
+
+function iso(date) {
+  // Local date parts, not toISOString: a browser east or west of UTC would
+  // otherwise show yesterday or tomorrow in the date field.
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+export function mount(slot) {
+  const names = textArea({ rows: 7, placeholder: "Ani\nBudi\nCitra\nDewi", "aria-label": "Names" });
+  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: iso(new Date()),
+    "aria-label": "Start date",
+  });
+  const end = 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: iso(new Date(Date.now() + 13 * 86400000)),
+    "aria-label": "End date",
+  });
+  const perDay = numberInput({ min: "1", max: "20", step: "1", value: "1", "aria-label": "People per day" });
+  const skipWeekend = checkbox("Skip weekends", { checked: true });
+  const pins = textArea({ rows: 3, placeholder: "2026-10-25: Ani", "aria-label": "Pinned dates" });
+  const order = selectInput(
+    [
+      { value: "forward", label: "Forward" },
+      { value: "reverse", label: "Reverse" },
+    ],
+    { value: "forward", "aria-label": "Rotation direction" }
+  );
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const table = el("div", { class: "overflow-x-auto rounded-r2 border border-orbit" });
+  const empty = blank("calendar-check", "Add names and a date range.");
+
+  let rows = [];
+
+  function build() {
+    const list = parseNames(names.value);
+    const pinned = parsePins(pins.value);
+    error.write("");
+    rows = [];
+    if (!list.length) return;
+
+    const from = new Date(`${start.value}T00:00:00`);
+    const to = new Date(`${end.value}T00:00:00`);
+    if (Number.isNaN(from.getTime()) || Number.isNaN(to.getTime())) {
+      error.write("Pick a start and an end date.");
+      return;
+    }
+    if (to < from) {
+      error.write("The end date is before the start date.");
+      return;
+    }
+
+    const slots = Math.max(1, Math.min(Number(perDay.value) || 1, list.length));
+    const sequence = order.value === "reverse" ? [...list].reverse() : [...list];
+    let cursor = 0;
+    let guard = 0;
+
+    for (let day = new Date(from); day <= to && guard < 400; day.setDate(day.getDate() + 1), guard++) {
+      const weekday = day.getDay();
+      if (skipWeekend.input.checked && (weekday === 0 || weekday === 6)) continue;
+      const key = iso(day);
+      if (pinned.has(key)) {
+        rows.push({ date: key, people: pinned.get(key), pinned: true });
+        continue;
+      }
+      const people = [];
+      for (let i = 0; i < slots; i++) {
+        people.push(sequence[cursor % sequence.length]);
+        cursor++;
+      }
+      rows.push({ date: key, people, pinned: false });
+    }
+    if (guard >= 400) error.write("That range is very long, so it stops at 400 days.");
+  }
+
+  function render() {
+    empty.hidden = rows.length > 0;
+    table.hidden = rows.length === 0;
+    if (!rows.length) {
+      summary.textContent = "";
+      table.replaceChildren();
+      return;
+    }
+    const counts = new Map();
+    for (const row of rows) for (const name of row.people) counts.set(name, (counts.get(name) ?? 0) + 1);
+    const spread = [...counts.values()];
+    const even = spread.length ? `${Math.min(...spread)} to ${Math.max(...spread)} turns each` : "";
+    summary.textContent = `${rows.length} day${rows.length === 1 ? "" : "s"} · ${counts.size} people · ${even}`;
+
+    const head = el("div", {
+      class: "grid gap-3 border-b border-orbit bg-deck-2 px-3 py-2 text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase [grid-template-columns:minmax(110px,150px)_minmax(0,1fr)]",
+    }, el("span", {}, "Date"), el("span", {}, "On duty"));
+
+    const body = rows.map((row) =>
+      el("div", {
+        class: "grid gap-3 border-b border-orbit px-3 py-2 text-sm last:border-b-0 [grid-template-columns:minmax(110px,150px)_minmax(0,1fr)]",
+      },
+        el("span", { class: "font-mono text-2xs text-ink-3 tabular-nums" }, row.date),
+        el("span", { class: "wrap-anywhere" }, row.people.join(", "),
+          row.pinned ? el("span", { class: "ms-2 rounded-full bg-jade-soft px-1.5 py-0.5 text-2xs font-semibold text-jade" }, "pinned") : null))
+    );
+
+    table.replaceChildren(head, ...body);
+  }
+
+  function run() {
+    build();
+    render();
+  }
+
+  names.addEventListener("input", run);
+  start.addEventListener("change", run);
+  end.addEventListener("change", run);
+  perDay.addEventListener("input", run);
+  skipWeekend.input.addEventListener("change", run);
+  pins.addEventListener("input", run);
+  order.addEventListener("change", run);
+
+  const copyButton = button("Copy roster", {
+    icon: "copy",
+    onclick: async () => {
+      if (!rows.length) return;
+      const text = rows.map((row) => `${row.date}\t${row.people.join(", ")}`).join("\n");
+      try {
+        await navigator.clipboard.writeText(text);
+        toast("Roster copied");
+      } catch {
+        error.write("The clipboard is blocked here. Download the CSV instead.");
+      }
+    },
+  });
+
+  const downloadButton = button("Download CSV", {
+    icon: "download",
+    kind: "fill",
+    onclick: () => {
+      if (!rows.length) return;
+      const csv = [["date", "people"], ...rows.map((row) => [row.date, row.people.join("; ")])]
+        .map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(","))
+        .join("\n");
+      download("roster.csv", csv, "text/csv");
+    },
+  });
+
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Names", names, "One per line. The rotation continues in this order."),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("From", start), panel("To", end)),
+        panel("People per day", perDay),
+        panel("Direction", order),
+        skipWeekend,
+        panel("Pinned dates", pins, "One per line, like 2026-10-25: Ani."),
+        error
+      ),
+      stack(summary, empty, table)
+    ),
+    foot: actions(copyButton, downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/sample-csv.js

@@ -0,0 +1,252 @@
+// A CSV with the columns and the types you describe. The same seed always
+// produces the same file, so a fixture can be regenerated when it drifts.
+import {
+  el, icon, toast, download, bench, stack, panel, textInput, selectInput,
+  numberInput, button, actions, toolcard, blank, notice,
+} from "../core.js";
+import { toCsv } from "../csv.js";
+
+const TYPES = [
+  { value: "text", label: "Text" },
+  { value: "word", label: "Word" },
+  { value: "number", label: "Number" },
+  { value: "decimal", label: "Decimal" },
+  { value: "boolean", label: "Boolean" },
+  { value: "date", label: "Date" },
+  { value: "email", label: "Email" },
+  { value: "uuid", label: "UUID" },
+  { value: "choice", label: "Choice list" },
+];
+
+const WORDS = [
+  "alpha", "bravo", "cedar", "delta", "ember", "field", "grove", "harbor", "ivory", "juniper",
+  "kelp", "lumen", "meadow", "north", "orbit", "pine", "quartz", "ridge", "summit", "tide",
+  "umber", "vale", "willow", "xenon", "yarrow", "zephyr",
+];
+
+/** Mulberry32: a small deterministic generator, so a seed is worth writing down. */
+function seeded(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function pick(random, list) {
+  return list[Math.floor(random() * list.length)];
+}
+
+function uuid(random) {
+  const hex = "0123456789abcdef";
+  let out = "";
+  for (let i = 0; i < 32; i++) {
+    if (i === 8 || i === 12 || i === 16 || i === 20) out += "-";
+    out += i === 12 ? "4" : hex[Math.floor(random() * 16)];
+  }
+  return out;
+}
+
+function value(type, choices, random, rowIndex) {
+  switch (type) {
+    case "word":
+      return pick(random, WORDS);
+    case "number":
+      return String(Math.floor(random() * 1000));
+    case "decimal":
+      return (random() * 100).toFixed(2);
+    case "boolean":
+      return random() > 0.5 ? "true" : "false";
+    case "date": {
+      const day = new Date(Date.UTC(2025, 0, 1) + Math.floor(random() * 700) * 86400000);
+      return day.toISOString().slice(0, 10);
+    }
+    case "email":
+      return `${pick(random, WORDS)}${rowIndex + 1}@example.com`;
+    case "uuid":
+      return uuid(random);
+    case "choice":
+      return choices.length ? pick(random, choices) : "";
+    default:
+      return `${pick(random, WORDS)} ${pick(random, WORDS)}`;
+  }
+}
+
+export function mount(slot) {
+  let columns = [
+    { name: "id", type: "number", choices: "" },
+    { name: "name", type: "word", choices: "" },
+    { name: "active", type: "boolean", choices: "" },
+  ];
+
+  const rows = numberInput({ min: "1", max: "10000", step: "1", value: "50", "aria-label": "Row count" });
+  const seed = textInput({ value: "mevebu", "aria-label": "Seed", class: "font-mono" });
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const list = el("div", { class: "grid gap-2" });
+  const preview = el("div", { class: "overflow-x-auto rounded-r2 border border-orbit" });
+  const empty = blank("table", "Add a column to see the preview.");
+
+  const addButton = button("Add column", { icon: "plus", kind: "quiet" });
+  const generate = button("Generate", { icon: "refresh-cw", kind: "fill" });
+  const downloadButton = button("Download CSV", { icon: "download" });
+
+  let table = [];
+  let header = [];
+
+  function renderColumns() {
+    list.replaceChildren(
+      ...columns.map((column, index) =>
+        el(
+          "div",
+          { class: "grid gap-2 rounded-r1 border border-orbit bg-deck-2 p-2 [grid-template-columns:minmax(0,1fr)_auto]" },
+          el("div", { class: "grid gap-2 sm:grid-cols-2" },
+            textInput({
+              value: column.name,
+              placeholder: `column_${index + 1}`,
+              "aria-label": `Column ${index + 1} name`,
+              oninput: (event) => {
+                column.name = event.target.value;
+                run();
+              },
+            }),
+            selectInput(
+              TYPES.map((type) => ({ value: type.value, label: type.label })),
+              {
+                value: column.type,
+                "aria-label": `Column ${index + 1} type`,
+                onchange: (event) => {
+                  column.type = event.target.value;
+                  renderColumns();
+                  run();
+                },
+              }
+            ),
+            column.type === "choice"
+              ? textInput({
+                  value: column.choices,
+                  placeholder: "red, green, blue",
+                  "aria-label": `Column ${index + 1} choices`,
+                  class: "sm:col-span-2",
+                  oninput: (event) => {
+                    column.choices = event.target.value;
+                    run();
+                  },
+                })
+              : null),
+          el("button", {
+            class: "inline-flex size-9 cursor-pointer items-center justify-center self-start rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-danger disabled:opacity-40",
+            type: "button",
+            "aria-label": `Remove column ${index + 1}`,
+            disabled: columns.length === 1,
+            onclick: () => {
+              columns.splice(index, 1);
+              renderColumns();
+              run();
+            },
+          }, icon("trash", "size-4"))
+        )
+      )
+    );
+  }
+
+  function hashSeed(text) {
+    let hash = 2166136261;
+    for (let i = 0; i < text.length; i++) {
+      hash ^= text.charCodeAt(i);
+      hash = Math.imul(hash, 16777619);
+    }
+    return hash >>> 0;
+  }
+
+  function renderPreview() {
+    empty.hidden = table.length > 0;
+    preview.hidden = table.length === 0;
+    if (!table.length) {
+      preview.replaceChildren();
+      return;
+    }
+    const shown = table.slice(0, 8);
+    const head = el("div", {
+      class: "grid border-b border-orbit bg-deck-2 px-3 py-2 text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase",
+      style: `grid-template-columns: repeat(${header.length}, minmax(110px, 1fr))`,
+    }, ...header.map((cell) => el("span", { class: "truncate" }, cell)));
+
+    const body = shown.map((row) =>
+      el("div", {
+        class: "grid border-b border-orbit px-3 py-1.5 text-sm last:border-b-0",
+        style: `grid-template-columns: repeat(${header.length}, minmax(110px, 1fr))`,
+      }, ...row.map((cell) => el("span", { class: "truncate font-mono text-2xs text-ink-2" }, cell)))
+    );
+
+    preview.replaceChildren(head, ...body);
+  }
+
+  function run() {
+    error.write("");
+    const count = Math.max(1, Math.min(10000, Number(rows.value) || 1));
+    const names = columns.map((column, index) => column.name.trim() || `column_${index + 1}`);
+    if (new Set(names).size !== names.length) error.write("Two columns share a name, so the CSV will have duplicates.");
+
+    const random = seeded(hashSeed(seed.value || "mevebu"));
+    header = names;
+    table = Array.from({ length: count }, (_, rowIndex) =>
+      columns.map((column) =>
+        value(
+          column.type,
+          column.choices.split(",").map((choice) => choice.trim()).filter(Boolean),
+          random,
+          rowIndex
+        )
+      )
+    );
+
+    summary.textContent = `${count} row${count === 1 ? "" : "s"} · ${columns.length} column${columns.length === 1 ? "" : "s"} · seed ${seed.value || "mevebu"}`;
+    renderPreview();
+  }
+
+  addButton.addEventListener("click", () => {
+    columns.push({ name: `column_${columns.length + 1}`, type: "text", choices: "" });
+    renderColumns();
+    run();
+  });
+  rows.addEventListener("input", run);
+  seed.addEventListener("input", run);
+  generate.addEventListener("click", () => {
+    run();
+    toast("Sample rebuilt");
+  });
+  downloadButton.addEventListener("click", () => {
+    if (!table.length) return;
+    download("sample.csv", toCsv([header, ...table]), "text/csv");
+  });
+
+  renderColumns();
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Rows", rows),
+        panel("Seed", seed, "The same seed always makes the same file."),
+        el("div", { class: "grid gap-1.5" },
+          el("div", { class: "flex items-center justify-between gap-2" },
+            el("span", { class: "text-sm font-semibold text-ink-2" }, "Columns"),
+            addButton),
+          list),
+        error
+      ),
+      stack(summary, empty, preview)
+    ),
+    foot: actions(generate, downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };