mevebu 1.10.0 → 2.0.0

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

@@ -0,0 +1,215 @@
+// Reorder, rotate and delete pages. Thumbnails come from pdf.js, the saved file
+// from pdf-lib, and the two never touch the network.
+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, loadPdfjs } from "../pdf-engine.js";
+
+export function mount(slot) {
+  let file = null;
+  let source = null;
+  let pages = [];
+  let busy = false;
+  let token = 0;
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const grid = el("div", { class: "grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(170px,1fr))]" });
+  const empty = blank("layout-grid", "Open a PDF to rearrange its pages.");
+
+  const drop = dropzone({ label: "Drop a PDF here", accept: "application/pdf,.pdf", iconName: "file-text" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const saveButton = button("Save PDF", { icon: "download", kind: "fill" });
+
+  function reset() {
+    token++;
+    file = null;
+    source = null;
+    pages = [];
+    grid.replaceChildren();
+    summary.textContent = "";
+    error.write("");
+    empty.hidden = false;
+    saveButton.disabled = true;
+    clearButton.disabled = true;
+  }
+
+  function render() {
+    empty.hidden = pages.length > 0;
+    saveButton.disabled = pages.length === 0 || busy;
+    clearButton.disabled = pages.length === 0 || busy;
+    summary.textContent = file
+      ? `${file.name} · ${pages.length} page${pages.length === 1 ? "" : "s"} left · ${formatBytes(file.size)}`
+      : "";
+
+    const cards = pages.map((page, index) => {
+      const thumb = el("img", {
+        src: page.thumb,
+        alt: `Page ${page.original}`,
+        class: "w-full rounded-[5px] border border-orbit bg-deck transition-transform duration-150",
+        style: `transform: rotate(${page.rotation}deg)`,
+      });
+      const badge = el("span", {
+        class: "absolute top-1 start-1 rounded-full bg-ink px-1.5 py-0.5 text-2xs font-bold text-void tabular-nums",
+      }, String(index + 1));
+
+      const small = (label, iconName, extra, disabled, onclick) =>
+        el("button", {
+          class: `inline-flex size-7 cursor-pointer items-center justify-center rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck disabled:opacity-40 ${extra}`,
+          type: "button",
+          "aria-label": label,
+          disabled,
+          onclick,
+        }, icon(iconName, "size-3.5"));
+
+      return el(
+        "figure",
+        {
+          class: "m-0 grid gap-2 rounded-r1 border border-orbit bg-deck-2 p-2",
+          draggable: "true",
+          ondragstart: (event) => {
+            event.dataTransfer.setData("text/plain", String(index));
+            event.dataTransfer.effectAllowed = "move";
+          },
+          ondragover: (event) => {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "move";
+          },
+          ondrop: (event) => {
+            event.preventDefault();
+            move(Number(event.dataTransfer.getData("text/plain")), index);
+          },
+        },
+        el("div", { class: "relative" }, thumb, badge),
+        el("div", { class: "grid gap-1.5" },
+          el("span", { class: "text-2xs text-ink-3 tabular-nums" }, `from ${page.original}`),
+          el("div", { class: "flex items-center justify-between gap-0.5" },
+            small(`Move page ${index + 1} left`, "chevron-right", "rotate-180 hover:text-ink", index === 0, () => move(index, index - 1)),
+            small(`Move page ${index + 1} right`, "chevron-right", "hover:text-ink", index === pages.length - 1, () => move(index, index + 1)),
+            small(`Rotate page ${index + 1}`, "rotate-cw", "hover:text-ink", false, () => rotate(index)),
+            small(`Delete page ${index + 1}`, "trash", "hover:text-danger", false, () => remove(index))))
+      );
+    });
+
+    grid.replaceChildren(...cards);
+  }
+
+  function move(from, to) {
+    if (!Number.isInteger(from) || from === to || from < 0 || from >= pages.length) return;
+    const [page] = pages.splice(from, 1);
+    pages.splice(Math.max(0, Math.min(pages.length, to)), 0, page);
+    render();
+  }
+
+  function rotate(index) {
+    const page = pages[index];
+    page.rotation = (page.rotation + 90) % 360;
+    render();
+  }
+
+  function remove(index) {
+    pages.splice(index, 1);
+    render();
+  }
+
+  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 [pdfjs, lib] = await Promise.all([loadPdfjs(), loadPdfLib()]);
+      const bytes = new Uint8Array(await picked.arrayBuffer());
+      const doc = await pdfjs.getDocument({ data: bytes.slice(), isEvalSupported: false }).promise;
+      const editable = await lib.PDFDocument.load(bytes);
+      if (current !== token) return;
+      file = picked;
+      source = editable;
+
+      const thumbs = [];
+      for (let index = 0; index < doc.numPages; index++) {
+        const page = await doc.getPage(index + 1);
+        const viewport = page.getViewport({ scale: 0.35 });
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.ceil(viewport.width);
+        canvas.height = Math.ceil(viewport.height);
+        await page.render({ canvasContext: canvas.getContext("2d"), viewport }).promise;
+        const rotation = editable.getPage(index).getRotation().angle % 360;
+        thumbs.push({ original: index + 1, rotation, thumb: canvas.toDataURL("image/png") });
+        summary.textContent = `Reading page ${index + 1} of ${doc.numPages}`;
+      }
+      if (current !== token) return;
+      pages = thumbs;
+      error.write("");
+      render();
+    } catch (caught) {
+      if (current !== token) return;
+      summary.textContent = "";
+      error.write(caught?.message || "This PDF could not be read.");
+    }
+  }
+
+  async function save() {
+    if (!source || !pages.length || busy) return;
+    busy = true;
+    const current = ++token;
+    saveButton.disabled = true;
+    summary.textContent = "Writing the PDF";
+    error.write("");
+    try {
+      const { PDFDocument, degrees } = await loadPdfLib();
+      const out = await PDFDocument.create();
+      const copied = await out.copyPages(source, pages.map((page) => page.original - 1));
+      copied.forEach((page, index) => {
+        page.setRotation(degrees(pages[index].rotation));
+        out.addPage(page);
+      });
+      const bytes = await out.save();
+      download(`${baseName(file.name)}-edited.pdf`, new Blob([bytes], { type: "application/pdf" }));
+      summary.textContent = `${out.getPageCount()} pages · ${formatBytes(bytes.length)}`;
+      toast("PDF saved");
+    } catch (caught) {
+      summary.textContent = "";
+      error.write(caught?.message || "Could not save the PDF.");
+    } finally {
+      if (current === token) {
+        busy = false;
+        render();
+      }
+    }
+  }
+
+  drop.onFiles(open);
+  saveButton.addEventListener("click", save);
+  clearButton.addEventListener("click", reset);
+  reset();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        panel("How to use", el("p", { class: "m-0 text-sm leading-[1.6] text-ink-3" },
+          "Drag a page to move it, or use the arrows. The rotate button turns it 90 degrees clockwise. Delete removes it from the copy, never from your file.")),
+        error
+      ),
+      stack(summary, empty, grid)
+    ),
+    foot: actions(clearButton, saveButton),
+  });
+
+  slot.append(shell.node);
+
+  return {
+    unmount() {
+      token++;
+    },
+  };
+}
+
+export default { mount };

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

@@ -0,0 +1,198 @@
+// One PDF into several. Split by ranges, by a fixed page count, or one file per
+// page, then take the parts as a ZIP.
+import {
+  el, toast, download, bench, stack, panel, numberInput, button, actions,
+  toolcard, blank, notice, chipRow,
+} from "../core.js";
+import { dropzone, baseName, formatBytes } from "../files.js";
+import { loadPdfLib, readPdfLib, parsePageRange } from "../pdf-engine.js";
+import { zip } from "../zip.js";
+
+export function mount(slot) {
+  let file = null;
+  let doc = null;
+  let busy = false;
+  let token = 0;
+
+  let splitMode = "ranges";
+  const mode = chipRow(
+    [
+      { value: "ranges", label: "By range" },
+      { value: "every", label: "Every N pages" },
+      { value: "single", label: "One per page" },
+    ],
+    {
+      value: "ranges",
+      label: "Split mode",
+      onChange: (value) => {
+        splitMode = value;
+        sync();
+      },
+    }
+  );
+
+  const rangeInput = 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: "1-4, 5-8",
+    spellcheck: "false",
+    autocomplete: "off",
+    "aria-label": "Ranges",
+  });
+  const rangePanel = panel("Ranges", rangeInput, "One part per range, separated by commas.");
+
+  const every = numberInput({ min: "1", max: "500", step: "1", value: "2", "aria-label": "Pages per part" });
+  const everyPanel = panel("Pages per part", every);
+  everyPanel.hidden = true;
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const parts = el("div", { class: "grid gap-2" });
+  const empty = blank("file-text", "Open a PDF to split it.");
+
+  const drop = dropzone({ label: "Drop a PDF here", accept: "application/pdf,.pdf", iconName: "file-text" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const splitButton = button("Split and download", { icon: "download", kind: "fill" });
+
+  function sync() {
+    rangePanel.hidden = splitMode !== "ranges";
+    everyPanel.hidden = splitMode !== "every";
+  }
+
+  function reset() {
+    token++;
+    file = null;
+    doc = null;
+    parts.replaceChildren();
+    summary.textContent = "";
+    error.write("");
+    empty.hidden = false;
+    splitButton.disabled = true;
+    clearButton.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 parsed = await readPdfLib(picked);
+      if (current !== token) return;
+      file = picked;
+      doc = parsed;
+      summary.textContent = `${picked.name} · ${parsed.getPageCount()} page${parsed.getPageCount() === 1 ? "" : "s"} · ${formatBytes(picked.size)}`;
+      empty.hidden = true;
+      splitButton.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 split() {
+    if (!doc || busy) return;
+    busy = true;
+    const current = ++token;
+    splitButton.disabled = true;
+    summary.textContent = "Splitting";
+    error.write("");
+    try {
+      const { PDFDocument } = await loadPdfLib();
+      const count = doc.getPageCount();
+      const base = baseName(file.name);
+      const groups = [];
+
+      if (splitMode === "every") {
+        const step = Math.max(1, Number(every.value) || 1);
+        for (let start = 0; start < count; start += step) {
+          groups.push({
+            label: `${start + 1}-${Math.min(count, start + step)}`,
+            pages: Array.from({ length: Math.min(step, count - start) }, (_, i) => start + i),
+          });
+        }
+      } else if (splitMode === "single") {
+        for (let index = 0; index < count; index++) groups.push({ label: `${index + 1}`, pages: [index] });
+      } else {
+        const text = rangeInput.value.trim();
+        if (!text) throw new Error("Write at least one range, for example 1-4, 5-8.");
+        for (const part of text.split(",")) {
+          const piece = part.trim();
+          if (!piece) continue;
+          const pages = parsePageRange(piece, count);
+          groups.push({ label: piece.replace(/\s+/g, ""), pages });
+        }
+      }
+
+      if (!groups.length) throw new Error("That split selects no pages.");
+
+      const files = [];
+      for (const [index, group] of groups.entries()) {
+        if (current !== token) return;
+        const out = await PDFDocument.create();
+        const copied = await out.copyPages(doc, group.pages);
+        for (const page of copied) out.addPage(page);
+        const bytes = await out.save();
+        files.push({ name: `${base}-${group.label}.pdf`, bytes });
+        summary.textContent = `Writing part ${index + 1} of ${groups.length}`;
+      }
+
+      const total = files.reduce((sum, entry) => sum + entry.bytes.length, 0);
+      download(`${base}-parts.zip`, zip(files), "application/zip");
+      summary.textContent = `${files.length} part${files.length === 1 ? "" : "s"} · ${formatBytes(total)}`;
+      parts.replaceChildren(
+        ...files.map((entry) =>
+          el("div", { class: "flex items-center justify-between gap-3 rounded-r1 border border-orbit bg-deck-2 px-3 py-2" },
+            el("span", { class: "truncate font-mono text-sm" }, entry.name),
+            el("span", { class: "flex-none text-2xs text-ink-3 tabular-nums" }, formatBytes(entry.bytes.length)))
+        )
+      );
+      toast("Parts ready");
+    } catch (caught) {
+      summary.textContent = "";
+      error.write(caught?.message || "Could not split this file.");
+    } finally {
+      if (current === token) {
+        busy = false;
+        splitButton.disabled = false;
+      }
+    }
+  }
+
+  drop.onFiles(open);
+  splitButton.addEventListener("click", split);
+  clearButton.addEventListener("click", reset);
+  sync();
+  reset();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        el("div", { class: "grid gap-1.5" }, el("span", { class: "text-sm font-semibold text-ink-2" }, "Split mode"), mode),
+        rangePanel,
+        everyPanel,
+        error
+      ),
+      stack(summary, empty, parts)
+    ),
+    foot: actions(clearButton, splitButton),
+  });
+
+  slot.append(shell.node);
+
+  return {
+    unmount() {
+      token++;
+    },
+  };
+}
+
+export default { mount };

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

@@ -0,0 +1,190 @@
+// Every page of a PDF as its own image. pdf.js draws the page on a canvas, the
+// canvas writes PNG or JPEG, and the set leaves as one ZIP.
+import {
+  el, toast, download, bench, stack, panel, selectInput, numberInput, rangeInput,
+  button, actions, toolcard, blank, notice, chipRow,
+} from "../core.js";
+import { dropzone, canvasToBlob, baseName, formatBytes } from "../files.js";
+import { readPdfjs, parsePageRange } from "../pdf-engine.js";
+import { zip } from "../zip.js";
+
+export function mount(slot) {
+  let file = null;
+  let pdf = null;
+  let token = 0;
+  let busy = false;
+
+  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 format = selectInput(
+    [
+      { value: "png", label: "PNG" },
+      { value: "jpeg", label: "JPEG" },
+    ],
+    { value: "png", "aria-label": "Image format" }
+  );
+  const scale = rangeInput({ min: "1", max: "3", step: "0.5", value: "2", "aria-label": "Scale" });
+  const scaleLabel = el("span", { class: "text-sm font-semibold text-ink-2 tabular-nums" }, "2x");
+  const quality = rangeInput({ min: "50", max: "100", step: "5", value: "88", "aria-label": "JPEG quality" });
+  const qualityLabel = el("span", { class: "text-sm font-semibold text-ink-2 tabular-nums" }, "88");
+  const qualityRow = el("div", { class: "grid gap-1.5" }, quality, qualityLabel);
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const preview = el("div", { class: "grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(150px,1fr))]" });
+  const empty = blank("file-text", "Open a PDF to render its pages.");
+
+  const drop = dropzone({ label: "Drop a PDF here", accept: "application/pdf,.pdf", iconName: "file-text" });
+
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const downloadButton = button("Download ZIP", { icon: "download", kind: "fill" });
+
+  function sync() {
+    const jpeg = format.value === "jpeg";
+    qualityRow.hidden = !jpeg;
+    qualityLabel.textContent = `${quality.value}%`;
+    scaleLabel.textContent = `${Number(scale.value).toFixed(1).replace(/\.0$/, "")}x`;
+  }
+
+  function reset() {
+    token++;
+    file = null;
+    pdf = null;
+    preview.replaceChildren();
+    summary.textContent = "";
+    error.write("");
+    empty.hidden = false;
+    downloadButton.disabled = true;
+    clearButton.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;
+      downloadButton.disabled = false;
+      clearButton.disabled = false;
+      error.write("");
+      await renderPreview();
+    } catch (caught) {
+      if (current !== token) return;
+      summary.textContent = "";
+      error.write(caught?.message || "This PDF could not be read.");
+    }
+  }
+
+  async function renderPreview() {
+    if (!pdf) return;
+    const current = token;
+    const pages = Math.min(pdf.numPages, 6);
+    const nodes = [];
+    for (let index = 0; index < pages; index++) {
+      const page = await pdf.getPage(index + 1);
+      if (current !== token) return;
+      const viewport = page.getViewport({ scale: 0.4 });
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.ceil(viewport.width);
+      canvas.height = Math.ceil(viewport.height);
+      await page.render({ canvasContext: canvas.getContext("2d"), viewport }).promise;
+      nodes.push(
+        el("figure", { class: "m-0 grid gap-1.5" },
+          el("img", { src: canvas.toDataURL("image/png"), alt: `Page ${index + 1}`, class: "w-full rounded-r1 border border-orbit bg-deck" }),
+          el("figcaption", { class: "text-2xs text-ink-3" }, `Page ${index + 1}`))
+      );
+    }
+    preview.replaceChildren(...nodes);
+  }
+
+  async function run() {
+    if (!pdf || busy) return;
+    busy = true;
+    const current = ++token;
+    downloadButton.disabled = true;
+    summary.textContent = "Rendering pages";
+    error.write("");
+    try {
+      const indexes = parsePageRange(range.value, pdf.numPages);
+      const type = format.value === "jpeg" ? "image/jpeg" : "image/png";
+      const ext = format.value === "jpeg" ? "jpg" : "png";
+      const base = baseName(file.name);
+      const files = [];
+      for (const [position, index] of indexes.entries()) {
+        if (current !== token) return;
+        const page = await pdf.getPage(index + 1);
+        const viewport = page.getViewport({ scale: Number(scale.value) });
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.ceil(viewport.width);
+        canvas.height = Math.ceil(viewport.height);
+        await page.render({ canvasContext: canvas.getContext("2d"), viewport }).promise;
+        const blob = await canvasToBlob(canvas, type, type === "image/jpeg" ? Number(quality.value) / 100 : undefined);
+        const pageNumber = String(index + 1).padStart(String(pdf.numPages).length, "0");
+        files.push({ name: `${base}-page-${pageNumber}.${ext}`, bytes: new Uint8Array(await blob.arrayBuffer()) });
+        summary.textContent = `Rendering page ${position + 1} of ${indexes.length}`;
+      }
+      const total = files.reduce((sum, entry) => sum + entry.bytes.length, 0);
+      download(`${base}-images.zip`, zip(files), "application/zip");
+      summary.textContent = `${files.length} image${files.length === 1 ? "" : "s"} · ${formatBytes(total)}`;
+      toast("Images ready");
+    } catch (caught) {
+      summary.textContent = "";
+      error.write(caught?.message || "Could not render the pages.");
+    } finally {
+      if (current === token) {
+        busy = false;
+        downloadButton.disabled = false;
+      }
+    }
+  }
+
+  drop.onFiles(open);
+  format.addEventListener("change", sync);
+  scale.addEventListener("input", sync);
+  quality.addEventListener("input", sync);
+  downloadButton.addEventListener("click", run);
+  clearButton.addEventListener("click", reset);
+  sync();
+  reset();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        panel("Pages", range, "1-3, 7, 10- . Empty means every page."),
+        panel("Format", format),
+        el("div", { class: "grid gap-1.5" }, el("span", { class: "text-sm font-semibold text-ink-2" }, "Scale"), scale, scaleLabel),
+        el("div", { class: "grid gap-1.5" }, el("span", { class: "text-sm font-semibold text-ink-2" }, "JPEG quality"), qualityRow),
+        error
+      ),
+      stack(summary, empty, preview)
+    ),
+    foot: actions(clearButton, downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {
+    unmount() {
+      token++;
+    },
+  };
+}
+
+export default { mount };