mevebu 1.8.0 → 1.9.0

package/README.md

@@ -2,7 +2,7 @@
 
 # mevebu
 
-**187 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
+**188 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
 
 A private toolbox for the small jobs that do not deserve a whole app: format JSON, decode a JWT, make a password, build a cron line, pick a color, scan a QR code, and a lot more.
 
@@ -10,7 +10,7 @@ A private toolbox for the small jobs that do not deserve a whole app: format JSO
 [![npm downloads](https://img.shields.io/npm/dm/mevebu?color=2ea44f)](https://www.npmjs.com/package/mevebu)
 [![License: MIT](https://img.shields.io/github/license/mevebu/mevebu?color=blue)](./LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/mevebu/mevebu?style=flat&color=yellow)](https://github.com/mevebu/mevebu/stargazers)
-![Tools](https://img.shields.io/badge/tools-187-brightgreen)
+![Tools](https://img.shields.io/badge/tools-188-brightgreen)
 ![Privacy](https://img.shields.io/badge/privacy-100%25%20in--browser-blue)
 
 [Quick start](#quick-start) · [What's inside](#whats-inside) · [Privacy](#privacy-by-design) · [Host it yourself](#host-it-yourself) · [Development](#development) · [FAQ](#faq)
@@ -23,7 +23,7 @@ A private toolbox for the small jobs that do not deserve a whole app: format JSO
 
 ## What is mevebu?
 
-mevebu is a collection of **187 small online tools** that all run **inside your browser**. Each tool lives on its own page, does one job, and does it fast. Most of them update as you type, so there is no submit button and no waiting.
+mevebu is a collection of **188 small online tools** that all run **inside your browser**. Each tool lives on its own page, does one job, and does it fast. Most of them update as you type, so there is no submit button and no waiting.
 
 Think of it as a clean, private alternative to the usual "free online tools" websites. There are no accounts, no ads in your way, no uploads, and no tracking. Your text, passwords, tokens, and files stay on your device.
 
@@ -65,14 +65,14 @@ mevebu tries port `5555` first, then `5678`, then `5432`, and finally any free p
 
 ## What's inside
 
-mevebu has **187 tools in 20 categories**. Here is the full breakdown:
+mevebu has **188 tools in 20 categories**. Here is the full breakdown:
 
 | Category           | Tools |
 | ------------------ | ----: |
 | Random             |     3 |
 | Passwords and keys |    10 |
 | Developer          |    21 |
-| Convert            |     4 |
+| Convert            |     5 |
 | Text and data      |    14 |
 | Daily use          |     8 |
 | Math               |    17 |
@@ -89,7 +89,7 @@ mevebu has **187 tools in 20 categories**. Here is the full breakdown:
 | GitHub             |     8 |
 | Units              |     8 |
 | QR codes           |     2 |
-| **Total**          | **187** |
+| **Total**          | **188** |
 
 The counts come straight from the tool registry, so this table and the app never drift apart.
 
@@ -179,7 +179,7 @@ That is all. The catalog, search, breadcrumbs, and category pages pick it up aut
 ## FAQ
 
 **What is mevebu?**
-mevebu is a free, open source collection of 187 browser based tools for developers, students, creators, and everyday use. Every tool runs locally in your browser.
+mevebu is a free, open source collection of 188 browser based tools for developers, students, creators, and everyday use. Every tool runs locally in your browser.
 
 **Is mevebu really free?**
 Yes. It is MIT licensed, with no paid tier, no account, and no usage limits.
@@ -205,11 +205,7 @@ Every tool page has a small **Report a problem** link at the bottom. It opens a
 
 You can also [open an issue](https://github.com/mevebu/mevebu/issues) directly, or send a pull request.
 
-## Support and follow
-
-If a tool here saved you time, you can help keep the next one coming:
-
-[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-support-FFDD00?logo=buymeacoffee&logoColor=black)](https://buymeacoffee.com/fastro)
+## Follow
 
 Star the repo if you like it, and follow mevebu for updates:
 

package/mevebu/app/mevebu.js

@@ -10,7 +10,6 @@ import {
   textInput, textArea, panel,
 } from "../libs/js/core.js";
 
-const DONATE_URL = "https://buymeacoffee.com/fastro";
 const REPO_URL = "https://github.com/mevebu/mevebu";
 
 const NAV = [
@@ -161,22 +160,6 @@ function openHelp(tool) {
   });
 }
 
-function openDonate() {
-  const close = modal({
-    label: "Support mevebu",
-    body: [
-      modalHead("coffee", "Keep mevebu flying"),
-      el("p", {}, "mevebu is free and runs entirely in your browser. No accounts, no ads, nothing to sell."),
-      el("p", {}, "If a tool here saved you time, a coffee keeps the next one coming."),
-    ],
-    actions: [
-      button("Not now", { onclick: () => close() }),
-      el("a", { class: LINK_FILL, href: DONATE_URL, target: "_blank", rel: "noopener" },
-        icon("coffee"), el("span", {}, "Buy me a coffee")),
-    ],
-  });
-}
-
 // The footer chip opens this. `latest` is the published version, or null when the
 // check has not answered; opening the modal retries it, so a registry hiccup on
 // the first load is not a dead end. The body and the actions repaint in place
@@ -294,15 +277,6 @@ async function startVersionChip() {
 }
 
 function footer() {
-  const donate = button("Donate", {
-    icon: "coffee",
-    kind: "quiet",
-    onclick: (event) => {
-      event.preventDefault();
-      openDonate();
-    },
-  });
-
   // A finger needs 44px on a phone, so the whole list is a comfortable target
   // there. The desktop row stays as it was, at text height.
   const FOOT_LINK = "inline-flex items-center text-sm text-ink-2 no-underline hover:text-jade max-[45rem]:min-h-11";
@@ -341,7 +315,6 @@ function footer() {
           group("Project", [
             el("a", { class: FOOT_LINK, href: "#/about" }, "About"),
             el("a", { class: FOOT_LINK, href: REPO_URL, target: "_blank", rel: "noopener" }, "GitHub"),
-            donate,
           ])
         )
       ),

package/mevebu/app/tailwind.css

@@ -402,6 +402,10 @@
     width: calc(var(--spacing) * 11);
     height: calc(var(--spacing) * 11);
   }
+  .size-16 {
+    width: calc(var(--spacing) * 16);
+    height: calc(var(--spacing) * 16);
+  }
   .size-32 {
     width: calc(var(--spacing) * 32);
     height: calc(var(--spacing) * 32);
@@ -644,6 +648,9 @@
   .\[grid-template-columns\:minmax\(90px\,34\%\)_minmax\(0\,1fr\)\] {
     grid-template-columns: minmax(90px,34%) minmax(0,1fr);
   }
+  .\[grid-template-columns\:repeat\(auto-fill\,minmax\(92px\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(92px,1fr));
+  }
   .\[grid-template-columns\:repeat\(auto-fill\,minmax\(160px\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
   }

package/mevebu/libs/js/core.js

@@ -750,7 +750,7 @@ export function blank(iconName, text) {
 // ---------- version ----------
 
 // Kept in one place. The CLI reads the same value from package.json.
-export const VERSION = "1.8.0";
+export const VERSION = "1.9.0";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/registry.js

@@ -376,6 +376,25 @@ export const TOOLS = [
     keywords: "convert jpeg jpg png webp tiff bmp image batch compress quality",
     load: () => import("./tools/image-converter.js"),
   },
+  {
+    id: "favicon-converter",
+    category: "convert",
+    name: "Favicon Converter",
+    icon: "layout-grid",
+    note: "Turn one image into a full favicon set.",
+    about: "One image becomes an ICO, the PNG sizes, a manifest, and the tags.",
+    tutorial: {
+      intro: "Drop one image and get every icon file, a web manifest, and the link tags.",
+      steps: [
+        "Drop an image or choose a file. A square PNG or SVG gives the cleanest result.",
+        "Set a background if the artwork needs one. Transparent keeps the alpha channel.",
+        "Press Download .zip for the ICO, the PNG sizes, and the manifest.",
+        "Copy the tags into the head of your page.",
+      ],
+    },
+    keywords: "favicon ico png apple touch icon android manifest icon generator",
+    load: () => import("./tools/favicon-converter.js"),
+  },
 
   {
     id: "lorem-ipsum",

package/mevebu/libs/js/tools/favicon-converter.js

@@ -0,0 +1,432 @@
+// One image becomes the full favicon set: a multi size ICO, the PNG sizes every
+// platform asks for, a web manifest, and the tags that point at them. Everything
+// is drawn on a canvas and zipped on this device.
+import {
+  el, icon, toast, download, bench, stack, panel, textInput, colorInput, checkbox,
+  output, notice, blank, button, copyButton, actions, toolcard,
+} from "../core.js";
+import { zip } from "../zip.js";
+
+const PNG_ICONS = [
+  { name: "favicon-16x16.png", size: 16 },
+  { name: "favicon-32x32.png", size: 32 },
+  { name: "favicon-48x48.png", size: 48 },
+  { name: "apple-touch-icon.png", size: 180 },
+  { name: "android-chrome-192x192.png", size: 192 },
+  { name: "android-chrome-512x512.png", size: 512 },
+];
+
+const ICO_SIZES = [16, 32, 48];
+const MASTER = 512;
+const MAX_SIDE = 4096;
+const MAX_PIXELS = 20_000_000;
+
+function formatBytes(bytes) {
+  if (!bytes) return "0 B";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(bytes < 10240 ? 1 : 0)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function looksLikeImage(file) {
+  if (file.type.startsWith("image/")) return true;
+  return /\.(jpe?g|png|webp|avif|gif|bmp|tiff?|svg|ico)$/i.test(file.name);
+}
+
+async function decode(file) {
+  if (typeof createImageBitmap === "function") {
+    try {
+      return await createImageBitmap(file, { imageOrientation: "from-image" });
+    } catch {
+      // SVG and a few odd files only decode through an <img>.
+    }
+  }
+  const url = URL.createObjectURL(file);
+  try {
+    const image = new Image();
+    image.decoding = "sync";
+    await new Promise((resolve, reject) => {
+      image.onload = resolve;
+      image.onerror = () => reject(new Error("This file is not an image the browser can read."));
+      image.src = url;
+    });
+    return image;
+  } finally {
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }
+}
+
+function toBlob(canvas) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => (blob ? resolve(blob) : reject(new Error("The browser could not write this PNG."))),
+      "image/png"
+    );
+  });
+}
+
+function masterCanvas(source, background) {
+  const width = source.width || source.naturalWidth;
+  const height = source.height || source.naturalHeight;
+  if (!width || !height) throw new Error("This image has no pixel size to read.");
+  if (width > MAX_SIDE || height > MAX_SIDE || width * height > MAX_PIXELS) {
+    throw new Error("This image is too large. Use one under 4096 px.");
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = MASTER;
+  canvas.height = MASTER;
+  const context = canvas.getContext("2d", { alpha: true });
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = "high";
+  if (background) {
+    context.fillStyle = background;
+    context.fillRect(0, 0, MASTER, MASTER);
+  }
+  const scale = Math.min(MASTER / width, MASTER / height);
+  const drawWidth = width * scale;
+  const drawHeight = height * scale;
+  context.drawImage(source, (MASTER - drawWidth) / 2, (MASTER - drawHeight) / 2, drawWidth, drawHeight);
+  if (source.close) source.close();
+  return canvas;
+}
+
+function scaledPng(master, size) {
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const context = canvas.getContext("2d", { alpha: true });
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = "high";
+  context.drawImage(master, 0, 0, size, size);
+  return toBlob(canvas);
+}
+
+// ICO with PNG payloads. Vista and every current browser read this form, and it
+// keeps the alpha channel that a BMP entry would need a second encoder for.
+function buildIco(entries) {
+  const header = 6 + entries.length * 16;
+  const total = entries.reduce((sum, entry) => sum + entry.bytes.length, header);
+  const buffer = new ArrayBuffer(total);
+  const view = new DataView(buffer);
+  const bytes = new Uint8Array(buffer);
+
+  view.setUint16(0, 0, true);
+  view.setUint16(2, 1, true);
+  view.setUint16(4, entries.length, true);
+
+  let offset = header;
+  entries.forEach((entry, index) => {
+    const at = 6 + index * 16;
+    bytes[at] = entry.size >= 256 ? 0 : entry.size;
+    bytes[at + 1] = entry.size >= 256 ? 0 : entry.size;
+    bytes[at + 2] = 0;
+    bytes[at + 3] = 0;
+    view.setUint16(at + 4, 1, true);
+    view.setUint16(at + 6, 32, true);
+    view.setUint32(at + 8, entry.bytes.length, true);
+    view.setUint32(at + 12, offset, true);
+    bytes.set(entry.bytes, offset);
+    offset += entry.bytes.length;
+  });
+
+  return bytes;
+}
+
+function manifest(background, name) {
+  const color = background || "#ffffff";
+  const app = name ? { name, short_name: name } : {};
+  return JSON.stringify({
+    ...app,
+    icons: [
+      { src: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png" },
+      { src: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png" },
+    ],
+    theme_color: color,
+    background_color: color,
+    display: "standalone",
+  }, null, 2) + "\n";
+}
+
+const TAGS = [
+  '<link rel="icon" href="/favicon.ico" sizes="any" />',
+  '<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />',
+  '<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />',
+  '<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />',
+  '<link rel="manifest" href="/site.webmanifest" />',
+].join("\n");
+
+export function mount(slot) {
+  let source = null;
+  let sourceUrl = "";
+  let files = [];
+  let previews = [];
+  let token = 0;
+  let timer = null;
+
+  const picker = el("input", { type: "file", accept: "image/*", class: "hidden" });
+  const drop = el(
+    "div",
+    {
+      class:
+        "grid cursor-pointer justify-items-center gap-1.5 rounded-r2 border border-dashed border-orbit-hard bg-deck-2 px-4 py-7 text-center transition-[border-color,background-color] duration-150 hover:border-jade focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-jade data-[drag]:border-jade data-[drag]:bg-jade-soft",
+      role: "button",
+      tabindex: "0",
+      "aria-label": "Add an image",
+    },
+    icon("image-up", "size-6 text-ink-3"),
+    el("p", { class: "text-sm font-semibold" }, "Drop an image here"),
+    el("p", { class: "text-2xs text-ink-3" }, "or choose a file")
+  );
+
+  const preview = el("img", { alt: "", class: "hidden size-16 rounded-r1 border border-orbit bg-deck object-contain p-1" });
+  const nameLine = el("p", { class: "truncate text-sm font-semibold" });
+
+  const color = colorInput({ value: "#ffffff", "aria-label": "Background color" });
+  const transparent = checkbox("Transparent", { checked: true });
+  const backgroundRow = el(
+    "div",
+    { class: "flex min-w-0 flex-wrap items-center gap-2" },
+    color,
+    transparent
+  );
+
+  const appName = textInput({ placeholder: "My site", "aria-label": "App name" });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const grid = el("div", { class: "grid gap-2 [grid-template-columns:repeat(auto-fill,minmax(92px,1fr))]" });
+  const tags = output({ rows: 6 });
+  const tagsPanel = el("div", { class: "grid gap-1.5" }, el("span", { class: "text-sm font-semibold text-ink-2" }, "HTML tags"), tags);
+  const empty = blank("layout-grid", "Add an image to build the set.");
+
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const downloadButton = button("Download .zip", { icon: "download", kind: "fill" });
+  const copyTags = copyButton(() => tags.textContent, "Copy tags");
+
+  function syncBackground() {
+    color.disabled = transparent.input.checked;
+  }
+
+  function releasePreviews() {
+    for (const url of previews) URL.revokeObjectURL(url);
+    previews = [];
+  }
+
+  function render() {
+    if (!source) {
+      grid.hidden = true;
+      tagsPanel.hidden = true;
+      empty.hidden = false;
+      summary.textContent = "";
+      downloadButton.disabled = true;
+      copyTags.disabled = true;
+      preview.classList.add("hidden");
+      nameLine.textContent = "";
+      return;
+    }
+    empty.hidden = true;
+    preview.classList.remove("hidden");
+    nameLine.textContent = source.name;
+    grid.hidden = false;
+    tagsPanel.hidden = false;
+    downloadButton.disabled = !files.length;
+    copyTags.disabled = !files.length;
+  }
+
+  function paintPreview(blobs) {
+    releasePreviews();
+    grid.replaceChildren(...PNG_ICONS.map(({ name, size }) => {
+      const blob = blobs.get(name);
+      const url = URL.createObjectURL(blob);
+      previews.push(url);
+      return el(
+        "figure",
+        { class: "m-0 grid justify-items-center gap-1 rounded-r1 border border-orbit bg-deck-2 p-2" },
+        el("img", {
+          src: url,
+          alt: "",
+          width: Math.min(size, 48),
+          height: Math.min(size, 48),
+          class: "object-contain",
+        }),
+        el("figcaption", { class: "text-2xs tabular-nums text-ink-3" }, `${size} × ${size}`)
+      );
+    }));
+  }
+
+  async function run() {
+    if (!source) return;
+    const current = ++token;
+    error.write("");
+    downloadButton.disabled = true;
+    copyTags.disabled = true;
+    summary.textContent = "Building the set";
+
+    try {
+      const image = await decode(source.file);
+      if (current !== token) return;
+      const background = transparent.input.checked ? "" : color.value;
+      const master = masterCanvas(image, background);
+      const blobs = new Map();
+      for (const { name, size } of PNG_ICONS) {
+        blobs.set(name, await scaledPng(master, size));
+        if (current !== token) return;
+      }
+
+      const pngBytes = new Map();
+      for (const [name, blob] of blobs) pngBytes.set(name, new Uint8Array(await blob.arrayBuffer()));
+      const ico = buildIco(ICO_SIZES.map((size) => ({
+        size,
+        bytes: pngBytes.get(`favicon-${size}x${size}.png`),
+      })));
+      const manifestBytes = new TextEncoder().encode(manifest(background, appName.value.trim()));
+
+      files = [
+        { name: "favicon.ico", bytes: ico },
+        ...PNG_ICONS.map(({ name }) => ({ name, bytes: pngBytes.get(name) })),
+        { name: "site.webmanifest", bytes: manifestBytes },
+      ];
+      const total = files.reduce((sum, file) => sum + file.bytes.length, 0);
+      summary.textContent = `${files.length} files · ${formatBytes(total)}`;
+      tags.write(TAGS);
+      paintPreview(blobs);
+      render();
+    } catch (caught) {
+      if (current !== token) return;
+      files = [];
+      summary.textContent = "";
+      tags.write("");
+      grid.replaceChildren();
+      releasePreviews();
+      error.write(caught?.message || "Could not build the icon set.");
+      render();
+    }
+  }
+
+  function schedule() {
+    clearTimeout(timer);
+    timer = setTimeout(run, 180);
+  }
+
+  function useFile(file) {
+    if (!file) return;
+    if (!looksLikeImage(file)) {
+      error.write("That file is not an image.");
+      return;
+    }
+    token++;
+    if (sourceUrl) URL.revokeObjectURL(sourceUrl);
+    source = { file, name: file.name };
+    sourceUrl = URL.createObjectURL(file);
+    preview.src = sourceUrl;
+    files = [];
+    error.write("");
+    tags.write("");
+    summary.textContent = "";
+    grid.replaceChildren();
+    releasePreviews();
+    render();
+    schedule();
+  }
+
+  function clearAll() {
+    token++;
+    clearTimeout(timer);
+    if (sourceUrl) URL.revokeObjectURL(sourceUrl);
+    source = null;
+    sourceUrl = "";
+    files = [];
+    preview.removeAttribute("src");
+    grid.replaceChildren();
+    tags.write("");
+    releasePreviews();
+    error.write("");
+    render();
+  }
+
+  picker.addEventListener("change", () => {
+    useFile(picker.files?.[0] ?? null);
+    picker.value = "";
+  });
+
+  drop.addEventListener("click", () => picker.click());
+  drop.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      picker.click();
+    }
+  });
+
+  let dragDepth = 0;
+  drop.addEventListener("dragenter", (event) => {
+    event.preventDefault();
+    dragDepth++;
+    drop.dataset.drag = "";
+  });
+  drop.addEventListener("dragover", (event) => event.preventDefault());
+  drop.addEventListener("dragleave", () => {
+    dragDepth = Math.max(0, dragDepth - 1);
+    if (!dragDepth) delete drop.dataset.drag;
+  });
+  drop.addEventListener("drop", (event) => {
+    event.preventDefault();
+    dragDepth = 0;
+    delete drop.dataset.drag;
+    useFile(event.dataTransfer?.files?.[0] ?? null);
+  });
+
+  transparent.input.addEventListener("change", () => {
+    syncBackground();
+    schedule();
+  });
+  color.addEventListener("input", schedule);
+  appName.addEventListener("input", schedule);
+
+  clearButton.addEventListener("click", clearAll);
+  downloadButton.addEventListener("click", () => {
+    if (!files.length) return toast("Nothing to save yet");
+    download("favicon.zip", zip(files), "application/zip");
+  });
+
+  syncBackground();
+  render();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        picker,
+        el(
+          "div",
+          { class: "flex min-w-0 items-center gap-3" },
+          preview,
+          el("div", { class: "min-w-0" }, nameLine)
+        ),
+        el(
+          "div",
+          { class: "grid min-w-0 content-start gap-1.5" },
+          el("span", { class: "text-sm font-semibold text-ink-2" }, "Background"),
+          backgroundRow
+        ),
+        panel("App name", appName),
+        error
+      ),
+      stack(summary, empty, grid, tagsPanel)
+    ),
+    foot: actions(clearButton, copyTags, downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {
+    unmount() {
+      token++;
+      clearTimeout(timer);
+      if (sourceUrl) URL.revokeObjectURL(sourceUrl);
+      releasePreviews();
+    },
+  };
+}
+
+export default { mount };

package/mevebu/libs/js/tools/image-converter.js

@@ -5,6 +5,7 @@ import {
   el, icon, toast, download, bench, stack, panel, selectInput, rangeInput, numberInput,
   button, actions, toolcard, blank, notice,
 } from "../core.js";
+import { zip } from "../zip.js";
 
 const FORMATS = [
   { id: "jpeg", label: "JPEG", mime: "image/jpeg", ext: "jpg", quality: true },
@@ -211,84 +212,6 @@ function encodeBmp(image) {
   return new Blob([buffer], { type: "image/bmp" });
 }
 
-const CRC_TABLE = (() => {
-  const table = new Uint32Array(256);
-  for (let n = 0; n < 256; n++) {
-    let c = n;
-    for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
-    table[n] = c >>> 0;
-  }
-  return table;
-})();
-
-function crc32(bytes) {
-  let c = 0xffffffff;
-  for (let i = 0; i < bytes.length; i++) c = CRC_TABLE[(c ^ bytes[i]) & 0xff] ^ (c >>> 8);
-  return (c ^ 0xffffffff) >>> 0;
-}
-
-// Store only. The images are already compressed, so deflating them again would
-// cost time and save nothing.
-function zip(files) {
-  const now = new Date();
-  const time = ((now.getHours() << 11) | (now.getMinutes() << 5) | (now.getSeconds() >> 1)) & 0xffff;
-  const date = (((now.getFullYear() - 1980) << 9) | ((now.getMonth() + 1) << 5) | now.getDate()) & 0xffff;
-  const chunks = [];
-  const central = [];
-  let offset = 0;
-
-  for (const file of files) {
-    const name = new TextEncoder().encode(file.name);
-    const data = new Uint8Array(file.bytes);
-    const crc = crc32(data);
-
-    const local = new Uint8Array(30 + name.length);
-    const lv = new DataView(local.buffer);
-    lv.setUint32(0, 0x04034b50, true);
-    lv.setUint16(4, 20, true);
-    lv.setUint16(6, 0x0800, true);
-    lv.setUint16(8, 0, true);
-    lv.setUint16(10, time, true);
-    lv.setUint16(12, date, true);
-    lv.setUint32(14, crc, true);
-    lv.setUint32(18, data.length, true);
-    lv.setUint32(22, data.length, true);
-    lv.setUint16(26, name.length, true);
-    local.set(name, 30);
-
-    const entry = new Uint8Array(46 + name.length);
-    const cv = new DataView(entry.buffer);
-    cv.setUint32(0, 0x02014b50, true);
-    cv.setUint16(4, 20, true);
-    cv.setUint16(6, 20, true);
-    cv.setUint16(8, 0x0800, true);
-    cv.setUint16(10, 0, true);
-    cv.setUint16(12, time, true);
-    cv.setUint16(14, date, true);
-    cv.setUint32(16, crc, true);
-    cv.setUint32(20, data.length, true);
-    cv.setUint32(24, data.length, true);
-    cv.setUint16(28, name.length, true);
-    cv.setUint32(42, offset, true);
-    entry.set(name, 46);
-
-    chunks.push(local, data);
-    central.push(entry);
-    offset += local.length + data.length;
-  }
-
-  const centralSize = central.reduce((total, entry) => total + entry.length, 0);
-  const end = new Uint8Array(22);
-  const ev = new DataView(end.buffer);
-  ev.setUint32(0, 0x06054b50, true);
-  ev.setUint16(8, files.length, true);
-  ev.setUint16(10, files.length, true);
-  ev.setUint32(12, centralSize, true);
-  ev.setUint32(16, offset, true);
-
-  return new Blob([...chunks, ...central, end], { type: "application/zip" });
-}
-
 export function mount(slot) {
   const entries = [];
   let nextId = 1;

package/mevebu/libs/js/zip.js

@@ -0,0 +1,80 @@
+// A ZIP writer for files the browser already holds in memory. Store only:
+// the payloads are compressed images, so deflating them again costs time and
+// saves nothing.
+
+const CRC_TABLE = (() => {
+  const table = new Uint32Array(256);
+  for (let n = 0; n < 256; n++) {
+    let c = n;
+    for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+    table[n] = c >>> 0;
+  }
+  return table;
+})();
+
+function crc32(bytes) {
+  let c = 0xffffffff;
+  for (let i = 0; i < bytes.length; i++) c = CRC_TABLE[(c ^ bytes[i]) & 0xff] ^ (c >>> 8);
+  return (c ^ 0xffffffff) >>> 0;
+}
+
+/** @param {{name: string, bytes: ArrayBuffer|Uint8Array}[]} files */
+export function zip(files) {
+  const now = new Date();
+  const time = ((now.getHours() << 11) | (now.getMinutes() << 5) | (now.getSeconds() >> 1)) & 0xffff;
+  const date = (((now.getFullYear() - 1980) << 9) | ((now.getMonth() + 1) << 5) | now.getDate()) & 0xffff;
+  const chunks = [];
+  const central = [];
+  let offset = 0;
+
+  for (const file of files) {
+    const name = new TextEncoder().encode(file.name);
+    const data = new Uint8Array(file.bytes);
+    const crc = crc32(data);
+
+    const local = new Uint8Array(30 + name.length);
+    const lv = new DataView(local.buffer);
+    lv.setUint32(0, 0x04034b50, true);
+    lv.setUint16(4, 20, true);
+    lv.setUint16(6, 0x0800, true);
+    lv.setUint16(8, 0, true);
+    lv.setUint16(10, time, true);
+    lv.setUint16(12, date, true);
+    lv.setUint32(14, crc, true);
+    lv.setUint32(18, data.length, true);
+    lv.setUint32(22, data.length, true);
+    lv.setUint16(26, name.length, true);
+    local.set(name, 30);
+
+    const entry = new Uint8Array(46 + name.length);
+    const cv = new DataView(entry.buffer);
+    cv.setUint32(0, 0x02014b50, true);
+    cv.setUint16(4, 20, true);
+    cv.setUint16(6, 20, true);
+    cv.setUint16(8, 0x0800, true);
+    cv.setUint16(10, 0, true);
+    cv.setUint16(12, time, true);
+    cv.setUint16(14, date, true);
+    cv.setUint32(16, crc, true);
+    cv.setUint32(20, data.length, true);
+    cv.setUint32(24, data.length, true);
+    cv.setUint16(28, name.length, true);
+    cv.setUint32(42, offset, true);
+    entry.set(name, 46);
+
+    chunks.push(local, data);
+    central.push(entry);
+    offset += local.length + data.length;
+  }
+
+  const centralSize = central.reduce((total, entry) => total + entry.length, 0);
+  const end = new Uint8Array(22);
+  const ev = new DataView(end.buffer);
+  ev.setUint32(0, 0x06054b50, true);
+  ev.setUint16(8, files.length, true);
+  ev.setUint16(10, files.length, true);
+  ev.setUint32(12, centralSize, true);
+  ev.setUint32(16, offset, true);
+
+  return new Blob([...chunks, ...central, end], { type: "application/zip" });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",