mevebu 1.10.0 → 2.0.0

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

@@ -1,56 +1,6 @@
 // Reads CSV or delimited text as a table, with row and column counts.
 import { el, bench, stack, panel, textArea, selectInput, fileInput, notice, copyButton, button, actions, toolcard } from "../core.js";
-
-function parseDelimited(text, delimiter) {
-  const rows = [];
-  let row = [];
-  let field = "";
-  let quoted = false;
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i];
-    if (quoted) {
-      if (char === '"') {
-        if (text[i + 1] === '"') { field += '"'; i++; }
-        else quoted = false;
-      } else field += char;
-    } else if (char === '"') {
-      quoted = true;
-    } else if (char === delimiter) {
-      row.push(field);
-      field = "";
-    } else if (char === "\n") {
-      row.push(field);
-      rows.push(row);
-      row = [];
-      field = "";
-    } else if (char !== "\r") {
-      field += char;
-    }
-  }
-  if (field !== "" || row.length) {
-    row.push(field);
-    rows.push(row);
-  }
-  return rows;
-}
-
-function detectDelimiter(text) {
-  const candidates = [",", ";", "\t", "|"];
-  const first = text.split(/\r?\n/)[0] ?? "";
-  const counts = { ",": 0, ";": 0, "\t": 0, "|": 0 };
-  let quoted = false;
-  for (let i = 0; i < first.length; i++) {
-    const char = first[i];
-    if (char === '"') quoted = !quoted;
-    else if (!quoted && char in counts) counts[char]++;
-  }
-  let best = ",";
-  let bestCount = 0;
-  for (const candidate of candidates) {
-    if (counts[candidate] > bestCount) { bestCount = counts[candidate]; best = candidate; }
-  }
-  return best;
-}
+import { parseDelimited, detectDelimiter } from "../csv.js";
 
 function tile(label) {
   const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");

package/mevebu/libs/js/tools/data-dictionary.js

@@ -0,0 +1,204 @@
+// The document a dataset needs before anyone uses it: one row per column, with
+// the type, the null count, the distinct count, the range and a sample.
+import {
+  el, toast, download, bench, stack, panel, button, actions, toolcard, blank,
+  notice, output,
+} from "../core.js";
+import { dropzone, baseName, formatBytes } from "../files.js";
+import { parseDelimited, detectDelimiter, headerKeys, toCsv } from "../csv.js";
+
+const TYPE_LABELS = {
+  number: "number",
+  date: "date",
+  boolean: "boolean",
+  text: "text",
+  empty: "empty",
+};
+
+function guessType(values) {
+  const sample = values.filter((value) => value !== "");
+  if (!sample.length) return "empty";
+  if (sample.every((value) => /^-?\d+(\.\d+)?$/.test(value))) return "number";
+  if (sample.every((value) => /^\d{4}-\d{2}-\d{2}$/.test(value))) return "date";
+  if (sample.every((value) => /^(true|false)$/i.test(value))) return "boolean";
+  return "text";
+}
+
+function summarise(name, values) {
+  const filled = values.filter((value) => value !== "");
+  const nulls = values.length - filled.length;
+  const distinct = new Set(filled).size;
+  const type = guessType(filled);
+
+  let min = "";
+  let max = "";
+  if (type === "number") {
+    const numbers = filled.map(Number);
+    min = String(Math.min(...numbers));
+    max = String(Math.max(...numbers));
+  } else if (type === "date" || type === "text") {
+    const sorted = [...filled].sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+    min = sorted[0] ?? "";
+    max = sorted[sorted.length - 1] ?? "";
+  }
+
+  const counts = new Map();
+  for (const value of filled) counts.set(value, (counts.get(value) ?? 0) + 1);
+  const top = [...counts].sort((a, b) => b[1] - a[1])[0];
+
+  return {
+    name,
+    type,
+    nulls,
+    distinct,
+    min,
+    max,
+    sample: filled[0] ?? "",
+    top: top ? `${top[0]} (${top[1]})` : "",
+  };
+}
+
+export function mount(slot) {
+  let file = null;
+  let header = [];
+  let rows = [];
+  let summaryRows = [];
+
+  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 markdown = output({ rows: 12 });
+  const empty = blank("table", "Drop a CSV to describe it.");
+
+  const drop = dropzone({ label: "Drop a CSV here", accept: ".csv,text/csv,text/plain", iconName: "table" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const copyButton = button("Copy Markdown", {
+    icon: "copy",
+    onclick: async () => {
+      if (!markdown.textContent) return;
+      try {
+        await navigator.clipboard.writeText(markdown.textContent);
+        toast("Dictionary copied");
+      } catch {
+        error.write("The clipboard is blocked here. Download the file instead.");
+      }
+    },
+  });
+  const downloadMarkdown = button("Download .md", {
+    icon: "download",
+    onclick: () => {
+      if (!markdown.textContent) return;
+      download(`${baseName(file?.name || "data")}-dictionary.md`, markdown.textContent, "text/markdown");
+    },
+  });
+  const downloadCsv = button("Download CSV", { icon: "download", kind: "fill" });
+
+  function renderTable() {
+    empty.hidden = summaryRows.length > 0;
+    table.hidden = summaryRows.length === 0;
+    markdown.hidden = summaryRows.length === 0;
+    if (!summaryRows.length) {
+      table.replaceChildren();
+      markdown.write("");
+      summary.textContent = "";
+      return;
+    }
+
+    const columns = ["Column", "Type", "Nulls", "Distinct", "Min", "Max", "Sample"];
+    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(90px,1fr)_70px_52px_64px_minmax(70px,.9fr)_minmax(70px,.9fr)_minmax(90px,1.1fr)]",
+    }, ...columns.map((cell) => el("span", {}, cell)));
+
+    const body = summaryRows.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(90px,1fr)_70px_52px_64px_minmax(70px,.9fr)_minmax(70px,.9fr)_minmax(90px,1.1fr)]",
+      },
+        el("span", { class: "truncate font-semibold" }, row.name),
+        el("span", { class: "text-2xs text-ink-3" }, TYPE_LABELS[row.type] ?? row.type),
+        el("span", { class: "font-mono text-2xs tabular-nums" }, String(row.nulls)),
+        el("span", { class: "font-mono text-2xs tabular-nums" }, String(row.distinct)),
+        el("span", { class: "truncate font-mono text-2xs" }, row.min),
+        el("span", { class: "truncate font-mono text-2xs" }, row.max),
+        el("span", { class: "truncate font-mono text-2xs text-ink-3" }, row.sample))
+    );
+
+    table.replaceChildren(head, ...body);
+  }
+
+  function renderMarkdown() {
+    const lines = [
+      `| Column | Type | Nulls | Distinct | Min | Max | Sample |`,
+      `| --- | --- | ---: | ---: | --- | --- | --- |`,
+      ...summaryRows.map((row) =>
+        `| ${row.name} | ${row.type} | ${row.nulls} | ${row.distinct} | ${row.min} | ${row.max} | ${row.sample} |`),
+    ];
+    markdown.write(lines.join("\n"));
+  }
+
+  function run() {
+    summaryRows = header.map((name, index) => summarise(name, rows.map((row) => row[index] ?? "")));
+    const nulls = summaryRows.reduce((total, row) => total + row.nulls, 0);
+    summary.textContent = `${rows.length} row${rows.length === 1 ? "" : "s"} · ${header.length} column${header.length === 1 ? "" : "s"} · ${nulls} empty cell${nulls === 1 ? "" : "s"}`;
+    renderTable();
+    renderMarkdown();
+  }
+
+  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 parsed = parseDelimited(text, detectDelimiter(text));
+      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("");
+      run();
+    } catch (caught) {
+      error.write(caught?.message || "This file could not be read.");
+    }
+  }
+
+  drop.onFiles(open);
+  clearButton.addEventListener("click", () => {
+    file = null;
+    header = [];
+    rows = [];
+    summaryRows = [];
+    error.write("");
+    renderTable();
+  });
+  downloadCsv.addEventListener("click", () => {
+    if (!summaryRows.length) return;
+    const csv = toCsv([
+      ["column", "type", "nulls", "distinct", "min", "max", "sample", "top"],
+      ...summaryRows.map((row) => [row.name, row.type, row.nulls, row.distinct, row.min, row.max, row.sample, row.top]),
+    ]);
+    download(`${baseName(file?.name || "data")}-dictionary.csv`, csv, "text/csv");
+  });
+
+  renderTable();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        panel("What it reports", el("p", { class: "m-0 text-sm leading-[1.6] text-ink-3" },
+          "The type it detects, empty cells, distinct values, the smallest and largest value, and one sample. A type can be wrong on a mixed column, so check it before you publish.")),
+        error
+      ),
+      stack(summary, empty, table, markdown)
+    ),
+    foot: actions(clearButton, copyButton, downloadMarkdown, downloadCsv),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,251 @@
+// Images into one PDF. Every picture is redrawn at the page's pixel size and
+// embedded as JPEG, so a 40 MB phone photo becomes a normal page instead of a
+// 40 MB document.
+import {
+  el, icon, toast, download, bench, stack, panel, selectInput, numberInput,
+  button, actions, toolcard, blank, notice, chipRow,
+} from "../core.js";
+import { dropzone, decodeImage, imageSize, canvasToBlob, baseName, formatBytes } from "../files.js";
+import { loadPdfLib } from "../pdf-engine.js";
+
+const PAGES = {
+  a4: { label: "A4", width: 595.28, height: 841.89 },
+  letter: { label: "Letter", width: 612, height: 792 },
+};
+
+const DPI = 150;
+
+function pageSize(key) {
+  const preset = PAGES[key] ?? PAGES.a4;
+  return { width: preset.width, height: preset.height };
+}
+
+function drawImage(source, targetWidth, targetHeight, fit) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(targetWidth));
+  canvas.height = Math.max(1, Math.round(targetHeight));
+  const context = canvas.getContext("2d", { alpha: false });
+  context.fillStyle = "#ffffff";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = "high";
+
+  const { width, height } = imageSize(source);
+  if (!width || !height) throw new Error("This image has no pixel size to read.");
+
+  const scale = fit === "cover"
+    ? Math.max(canvas.width / width, canvas.height / height)
+    : Math.min(canvas.width / width, canvas.height / height);
+  const drawWidth = width * scale;
+  const drawHeight = height * scale;
+  context.drawImage(
+    source,
+    (canvas.width - drawWidth) / 2,
+    (canvas.height - drawHeight) / 2,
+    drawWidth,
+    drawHeight
+  );
+  return canvas;
+}
+
+export function mount(slot) {
+  const entries = [];
+  let nextId = 1;
+  let token = 0;
+  let timer = null;
+  let busy = false;
+
+  const size = selectInput(
+    Object.entries(PAGES).map(([value, page]) => ({ value, label: `${page.label} (${Math.round(page.width)} x ${Math.round(page.height)} pt)` })),
+    { value: "a4", "aria-label": "Page size" }
+  );
+  const margin = numberInput({ min: "0", max: "96", step: "2", value: "24", "aria-label": "Margin in points" });
+  const fit = chipRow(
+    [
+      { value: "contain", label: "Fit inside" },
+      { value: "cover", label: "Fill page" },
+    ],
+    { value: "contain", label: "Image fit" }
+  );
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const list = el("div", { class: "grid gap-2" });
+  const empty = blank("image-up", "Add images to build a PDF.");
+
+  const drop = dropzone({
+    label: "Drop images here",
+    hint: "PNG, JPEG, WebP, GIF, BMP, SVG",
+    accept: "image/*",
+    multiple: true,
+    iconName: "image-up",
+  });
+
+  const clearAll = button("Clear", { icon: "trash", kind: "quiet" });
+  const buildButton = button("Build PDF", { icon: "file-text", kind: "fill" });
+
+  function render() {
+    empty.hidden = entries.length > 0;
+    list.hidden = entries.length === 0;
+    buildButton.disabled = entries.length === 0 || busy;
+    clearAll.disabled = entries.length === 0 || busy;
+    const bytes = entries.reduce((sum, entry) => sum + entry.file.size, 0);
+    summary.textContent = entries.length
+      ? `${entries.length} image${entries.length === 1 ? "" : "s"} · ${formatBytes(bytes)} in`
+      : "";
+    list.replaceChildren(
+      ...entries.map((entry, index) =>
+        el(
+          "div",
+          { class: "flex min-w-0 items-center gap-3 rounded-r1 border border-orbit bg-deck-2 p-2" },
+          el("img", { src: entry.url, alt: "", class: "size-12 flex-none rounded-[5px] border border-orbit bg-deck object-cover" }),
+          el(
+            "div",
+            { class: "min-w-0 flex-1" },
+            el("p", { class: "truncate text-sm font-semibold" }, entry.file.name),
+            el("p", { class: "text-2xs text-ink-3" }, `${entry.width} x ${entry.height} · ${formatBytes(entry.file.size)}`)
+          ),
+          el("div", { class: "flex flex-none items-center gap-0.5" },
+            el("button", {
+              class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-ink disabled:opacity-40",
+              type: "button",
+              "aria-label": `Move ${entry.file.name} up`,
+              disabled: index === 0,
+              onclick: () => move(index, -1),
+            }, icon("chevron-right", "size-4 -rotate-90")),
+            el("button", {
+              class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-ink disabled:opacity-40",
+              type: "button",
+              "aria-label": `Move ${entry.file.name} down`,
+              disabled: index === entries.length - 1,
+              onclick: () => move(index, 1),
+            }, icon("chevron-right", "size-4 rotate-90")),
+            el("button", {
+              class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-danger",
+              type: "button",
+              "aria-label": `Remove ${entry.file.name}`,
+              onclick: () => remove(entry.id),
+            }, icon("x", "size-4"))
+          )
+        )
+      )
+    );
+  }
+
+  function move(index, delta) {
+    const next = index + delta;
+    if (next < 0 || next >= entries.length) return;
+    [entries[index], entries[next]] = [entries[next], entries[index]];
+    render();
+  }
+
+  function remove(id) {
+    const at = entries.findIndex((entry) => entry.id === id);
+    if (at < 0) return;
+    URL.revokeObjectURL(entries[at].url);
+    entries.splice(at, 1);
+    render();
+  }
+
+  async function add(files) {
+    const images = Array.from(files).filter((file) => file.type.startsWith("image/") || /\.(png|jpe?g|webp|gif|bmp|svg)$/i.test(file.name));
+    if (!images.length) {
+      error.write("Those files are not images.");
+      return;
+    }
+    error.write("");
+    for (const file of images) {
+      try {
+        const bitmap = await decodeImage(file);
+        const { width, height } = imageSize(bitmap);
+        if (bitmap.close) bitmap.close();
+        entries.push({ id: nextId++, file, url: URL.createObjectURL(file), width, height });
+      } catch (caught) {
+        error.write(`${file.name}: ${caught.message}`);
+      }
+    }
+    render();
+  }
+
+  async function build() {
+    if (!entries.length || busy) return;
+    busy = true;
+    const current = ++token;
+    buildButton.disabled = true;
+    summary.textContent = "Building the PDF";
+    error.write("");
+    try {
+      const { PDFDocument } = await loadPdfLib();
+      const doc = await PDFDocument.create();
+      const { width, height } = pageSize(size.value);
+      const inset = Math.max(0, Number(margin.value) || 0);
+      const areaWidth = Math.max(24, width - inset * 2);
+      const areaHeight = Math.max(24, height - inset * 2);
+
+      for (const entry of entries) {
+        if (current !== token) return;
+        const source = await decodeImage(entry.file);
+        const canvas = drawImage(source, (areaWidth / 72) * DPI, (areaHeight / 72) * DPI, fit.value);
+        if (source.close) source.close();
+        const jpeg = await canvasToBlob(canvas, "image/jpeg", 0.9);
+        const image = await doc.embedJpg(await jpeg.arrayBuffer());
+        const page = doc.addPage([width, height]);
+        page.drawImage(image, { x: inset, y: inset, width: areaWidth, height: areaHeight });
+      }
+
+      const bytes = await doc.save();
+      const name = entries.length === 1 ? `${baseName(entries[0].file.name)}.pdf` : "images.pdf";
+      download(name, new Blob([bytes], { type: "application/pdf" }));
+      summary.textContent = `${entries.length} page${entries.length === 1 ? "" : "s"} · ${formatBytes(bytes.length)}`;
+      toast("PDF ready");
+    } catch (caught) {
+      summary.textContent = "";
+      error.write(caught?.message || "Could not build the PDF.");
+    } finally {
+      if (current === token) {
+        busy = false;
+        render();
+      }
+    }
+  }
+
+  drop.onFiles(add);
+  buildButton.addEventListener("click", build);
+  clearAll.addEventListener("click", () => {
+    for (const entry of entries) URL.revokeObjectURL(entry.url);
+    entries.length = 0;
+    error.write("");
+    render();
+  });
+
+  render();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        panel("Page size", size),
+        panel("Margin", margin, "In points. 72 points make an inch."),
+        el("div", { class: "grid gap-1.5" },
+          el("span", { class: "text-sm font-semibold text-ink-2" }, "Image fit"),
+          fit,
+          el("span", { class: "text-2xs text-ink-3" }, "Fit inside keeps the whole image. Fill page crops the edges.")),
+        error
+      ),
+      stack(summary, empty, list)
+    ),
+    foot: actions(clearAll, buildButton),
+  });
+
+  slot.append(shell.node);
+
+  return {
+    unmount() {
+      token++;
+      clearTimeout(timer);
+      for (const entry of entries) URL.revokeObjectURL(entry.url);
+    },
+  };
+}
+
+export default { mount };

package/mevebu/libs/js/tools/pdf-merge.js

@@ -0,0 +1,158 @@
+// Several PDFs into one. Pages are copied as they are, so the text stays
+// selectable and nothing is re-rendered.
+import {
+  el, icon, toast, download, bench, stack, panel, button, actions, toolcard, blank, notice,
+} from "../core.js";
+import { dropzone, baseName, formatBytes } from "../files.js";
+import { loadPdfLib, readPdfLib } from "../pdf-engine.js";
+
+export function mount(slot) {
+  const entries = [];
+  let nextId = 1;
+  let busy = false;
+  let token = 0;
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const list = el("div", { class: "grid gap-2" });
+  const empty = blank("file-text", "Add two or more PDFs to merge them.");
+
+  const drop = dropzone({ label: "Drop PDFs here", accept: "application/pdf,.pdf", multiple: true, iconName: "file-text" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const mergeButton = button("Merge PDFs", { icon: "combine", kind: "fill" });
+
+  function render() {
+    empty.hidden = entries.length > 0;
+    list.hidden = entries.length === 0;
+    mergeButton.disabled = entries.length < 2 || busy;
+    clearButton.disabled = entries.length === 0 || busy;
+    const pages = entries.reduce((sum, entry) => sum + entry.pages, 0);
+    const bytes = entries.reduce((sum, entry) => sum + entry.file.size, 0);
+    summary.textContent = entries.length
+      ? `${entries.length} files · ${pages} pages · ${formatBytes(bytes)}`
+      : "";
+    list.replaceChildren(
+      ...entries.map((entry, index) =>
+        el(
+          "div",
+          { class: "flex min-w-0 items-center gap-3 rounded-r1 border border-orbit bg-deck-2 p-2.5" },
+          el("span", { class: "grid size-9 flex-none place-items-center rounded-[5px] bg-jade-soft text-jade" }, icon("file-text", "size-4")),
+          el("div", { class: "min-w-0 flex-1" },
+            el("p", { class: "truncate text-sm font-semibold" }, entry.file.name),
+            el("p", { class: "text-2xs text-ink-3" }, `${entry.pages} page${entry.pages === 1 ? "" : "s"} · ${formatBytes(entry.file.size)}`)),
+          el("div", { class: "flex flex-none items-center gap-0.5" },
+            el("button", {
+              class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-ink disabled:opacity-40",
+              type: "button",
+              "aria-label": `Move ${entry.file.name} up`,
+              disabled: index === 0,
+              onclick: () => move(index, -1),
+            }, icon("chevron-right", "size-4 -rotate-90")),
+            el("button", {
+              class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-ink disabled:opacity-40",
+              type: "button",
+              "aria-label": `Move ${entry.file.name} down`,
+              disabled: index === entries.length - 1,
+              onclick: () => move(index, 1),
+            }, icon("chevron-right", "size-4 rotate-90")),
+            el("button", {
+              class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-danger",
+              type: "button",
+              "aria-label": `Remove ${entry.file.name}`,
+              onclick: () => remove(entry.id),
+            }, icon("x", "size-4"))))
+      )
+    );
+  }
+
+  function move(index, delta) {
+    const next = index + delta;
+    if (next < 0 || next >= entries.length) return;
+    [entries[index], entries[next]] = [entries[next], entries[index]];
+    render();
+  }
+
+  function remove(id) {
+    const at = entries.findIndex((entry) => entry.id === id);
+    if (at >= 0) entries.splice(at, 1);
+    render();
+  }
+
+  async function add(files) {
+    const pdfs = Array.from(files).filter((file) => file.type === "application/pdf" || /\.pdf$/i.test(file.name));
+    if (!pdfs.length) {
+      error.write("Those files are not PDFs.");
+      return;
+    }
+    error.write("");
+    for (const file of pdfs) {
+      try {
+        const doc = await readPdfLib(file);
+        entries.push({ id: nextId++, file, pages: doc.getPageCount() });
+      } catch (caught) {
+        error.write(`${file.name}: ${caught.message || "could not be read"}`);
+      }
+    }
+    render();
+  }
+
+  async function merge() {
+    if (entries.length < 2 || busy) return;
+    busy = true;
+    const current = ++token;
+    mergeButton.disabled = true;
+    summary.textContent = "Merging";
+    error.write("");
+    try {
+      const { PDFDocument } = await loadPdfLib();
+      const merged = await PDFDocument.create();
+      for (const entry of entries) {
+        if (current !== token) return;
+        const source = await PDFDocument.load(await entry.file.arrayBuffer());
+        const pages = await merged.copyPages(source, source.getPageIndices());
+        for (const page of pages) merged.addPage(page);
+      }
+      const bytes = await merged.save();
+      const name = entries.length === 1 ? entries[0].file.name : "merged.pdf";
+      download(name, new Blob([bytes], { type: "application/pdf" }));
+      summary.textContent = `${merged.getPageCount()} pages · ${formatBytes(bytes.length)}`;
+      toast("Merged");
+    } catch (caught) {
+      summary.textContent = "";
+      error.write(caught?.message || "Could not merge these files.");
+    } finally {
+      if (current === token) {
+        busy = false;
+        render();
+      }
+    }
+  }
+
+  drop.onFiles(add);
+  mergeButton.addEventListener("click", merge);
+  clearButton.addEventListener("click", () => {
+    entries.length = 0;
+    error.write("");
+    render();
+  });
+
+  render();
+
+  const shell = toolcard({
+    body: bench(
+      stack(drop, panel("Order", el("p", { class: "m-0 text-sm text-ink-3" }, "Files merge from top to bottom.")), error),
+      stack(summary, empty, list)
+    ),
+    foot: actions(clearButton, mergeButton),
+  });
+
+  slot.append(shell.node);
+
+  return {
+    unmount() {
+      token++;
+    },
+  };
+}
+
+export default { mount };