mevebu 1.7.3 → 1.8.1

package/README.md

@@ -1,36 +1,61 @@
+<div align="center">
+
 # mevebu
 
-**186 small tools, each on its own page, all running in your browser.**
+**187 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
 
-A box of browser tools for the jobs that do not deserve an app: convert a value,
-hash a text, sign a token, format JSON, pick a color, run a timer, count words,
-build a cron line, check a JWT, read a QR. Every tool opens on its own page and
-most of them update as you type, so there is no submit button and no waiting.
+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.
 
-Nothing leaves your tab. There is no account to make, nothing to upload, and
-nothing saved to a server.
+[![npm version](https://img.shields.io/npm/v/mevebu?color=2ea44f&label=npm)](https://www.npmjs.com/package/mevebu)
+[![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)
+![Privacy](https://img.shields.io/badge/privacy-100%25%20in--browser-blue)
 
-```
-tools     186
-categories 20
-followers 1     (one tab, no account)
-uploads   0
-```
+[Quick start](#quick-start) · [What's inside](#whats-inside) · [Privacy](#privacy-by-design) · [Host it yourself](#host-it-yourself) · [Development](#development) · [FAQ](#faq)
+
+</div>
+
+<!-- Tip: add a screenshot here, for example: ![mevebu home page](docs/screenshot.png) -->
+
+---
+
+## 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.
+
+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.
+
+You can run it on your own computer with one command, or copy the folder to any static host and use it from anywhere.
+
+## Why you will like it
 
-## Install and run
+- **Private by design.** Nothing you paste ever leaves your browser tab.
+- **No account, no sign up.** Open a tool and use it.
+- **Fast.** Plain HTML and vanilla JavaScript. No heavy framework, no loading spinners.
+- **One tool, one page.** Every tool has its own clean page you can bookmark.
+- **Instant search.** Press `Ctrl+K` and find any tool by name, keyword, or what it does.
+- **Works offline.** Once installed, it runs fully on your machine.
+- **Easy to host.** It is a plain static site. Drop it on any file host.
+- **Free and open source.** MIT licensed.
 
-```sh
+## Quick start
+
+You need [Node.js](https://nodejs.org) installed. Then run:
+
+```bash
 npm install -g mevebu
 mevebu
 ```
 
-`mevebu` starts a local server (it tries port 5555, then 5678, then 5432, then
-any free port), opens your browser to the home page, and serves the static
-folder bundled with the package. Press `Ctrl+C` in the terminal to stop it.
+That is it. mevebu starts a small local server, opens your browser on the home page, and serves the tools that ship with the package. Press `Ctrl+C` in the terminal to stop it.
 
-### CLI
+mevebu tries port `5555` first, then `5678`, then `5432`, and finally any free port. The first three are stable between restarts, so your bookmarks keep working.
 
-```
+### CLI options
+
+```text
 -p, --port <number>   Try this port first (5555, 5678, 5432 otherwise).
 -d, --dir <path>      Folder to serve. Defaults to the bundled tools.
     --no-open         Do not open the browser.
@@ -38,98 +63,86 @@ folder bundled with the package. Press `Ctrl+C` in the terminal to stop it.
 -h, --help            Print this help and exit.
 ```
 
-The first three ports are stable across restarts, so the bookmark to your tools
-page keeps working.
-
 ## What's inside
 
-A tool is a small page that does one job. The registry lists them all; here is
-the shape of it.
-
-| Category | Count |
-| :--- | ---: |
-| Random | 3 |
-| Passwords and keys | 10 |
-| Developer | 21 |
-| Convert | 3 |
-| Text and data | 14 |
-| Daily use | 8 |
-| Math | 17 |
-| Date and time | 7 |
-| Data and lists | 8 |
-| Design | 10 |
-| Web and SEO | 12 |
-| Encoding | 8 |
-| Academic | 15 |
-| Study | 7 |
-| Business | 10 |
-| Locale | 7 |
-| Content | 8 |
-| GitHub | 8 |
-| Units | 8 |
-| QR codes | 2 |
-| **Total** | **186** |
-
-The counts are kept honest by the registry, so the page and the README never
-drift apart. Press `Ctrl+K` in the app to search the full list by name, by
-keyword, or by what the tool does.
-
-A short tour of the most reached-for tools, one from each side of the catalog:
-
-- **Password generator**: make a password, copy it, and the page never talks
-  to anything but your clipboard.
-- **JSON formatter**: paste, and the formatted version fills in as you type.
-- **JWT generator and decoder**: sign a token with HS256, RS256 or ES256, or
-  paste a token and read its header and payload.
-- **Color palette**: pick one color, get a matching set in analogous,
-  complementary or monochrome schemes.
-- **Countdown timer**: a quiet, fullscreen timer that keeps running when the
-  tab is hidden.
-- **QR code generator**: turn a URL, a Wi-Fi config or any text into a scannable
-  image right in the tab.
-- **Slug converter**: keep a sentence readable while you turn it into a URL.
-
-The full list is at the home page and under each category.
-
-## How it stays private
-
-Every tool is a static HTML file, a tiny JavaScript module, and a Lucide icon.
-The HTML and the JavaScript are served from your machine when you run `mevebu`,
-or from the file you host when you copy the `mevebu/` folder somewhere. There is
-no server-side code, no analytics, and no API key.
+mevebu has **187 tools in 20 categories**. Here is the full breakdown:
+
+| Category           | Tools |
+| ------------------ | ----: |
+| Random             |     3 |
+| Passwords and keys |    10 |
+| Developer          |    21 |
+| Convert            |     4 |
+| Text and data      |    14 |
+| Daily use          |     8 |
+| Math               |    17 |
+| Date and time      |     7 |
+| Data and lists     |     8 |
+| Design             |    10 |
+| Web and SEO        |    12 |
+| Encoding           |     8 |
+| Academic           |    15 |
+| Study              |     7 |
+| Business           |    10 |
+| Locale             |     7 |
+| Content            |     8 |
+| GitHub             |     8 |
+| Units              |     8 |
+| QR codes           |     2 |
+| **Total**          | **187** |
+
+The counts come straight from the tool registry, so this table and the app never drift apart.
+
+### Popular tools
+
+| Tool | What it does |
+| ---- | ------------ |
+| **Password generator** | Make a strong password and copy it. The page only talks to your clipboard. |
+| **JSON formatter** | Paste your JSON and get a clean, formatted version as you type. |
+| **JWT generator and decoder** | Sign a token with HS256, RS256, or ES256, or paste one and read its header and payload. |
+| **Color palette** | Pick one color and get matching analogous, complementary, or monochrome schemes. |
+| **Countdown timer** | A quiet, fullscreen timer that keeps running when the tab is hidden. |
+| **QR code generator** | Turn a URL, a Wi-Fi config, or any text into a scannable image. |
+| **Slug converter** | Turn a sentence into a clean, readable URL slug. |
+
+Browse everything from the home page or by category, or just press `Ctrl+K` and start typing.
+
+## Privacy by design
+
+mevebu is built so that your data has nowhere to go. Every tool is a static HTML file, a tiny JavaScript module, and a Lucide icon. There is no server side code, no analytics, and no API key.
 
 When you paste a password, a token, or a CSV into a tool:
 
-- the text is processed in the browser tab, by the file that the page loaded
-  from, using the standard Web Crypto API or the standard browser APIs the
-  tool needs
-- nothing is sent to a remote server, because there is no remote server in
-  the loop
-- nothing is saved to disk by the tool, because the tool does not have a way
-  to write to your file system
-- the only network request the page makes is to load itself, and to read the
-  GitHub star count for the footer chip (and that request fails silently when
-  you are offline)
-
-You can verify this by opening the network tab in your browser's dev tools and
-watching a tool do its work. There is no upload. The same tool, loaded the same
-way, behaves the same in a hotel Wi-Fi as it does on a server room.
-
-## Hosting the static folder
-
-If you would rather not run the CLI, the whole app is a plain static site. Copy
-the `mevebu/` folder from this repo, or from the npm package, to any host that
-serves files: a static site host, a CDN, an object store, a USB drive. Routes
-are hash routes (`#/security/password-generator`), so no server rewrites are
-needed.
-
-The shipped folder is plain files, the CSS is one committed stylesheet that
-Tailwind built from one source file, and there is no separate build step. The
-hosting layer never runs code on your behalf.
+- It is processed in your browser tab, using the standard Web Crypto API or other built-in browser APIs.
+- Nothing is sent to a remote server, because there is no remote server in the loop.
+- Nothing is saved to disk by the tool.
+- The only network request the page makes is to load itself and to read the GitHub star count for the footer chip. That request fails quietly when you are offline.
+
+Do not just take our word for it. Open the Network tab in your browser dev tools and watch a tool work. You will not see an upload.
+
+| | mevebu | Typical online tool sites |
+| --- | :---: | :---: |
+| Account needed | No | Often |
+| Your data uploaded | Never | Sometimes |
+| Works offline | Yes | Rarely |
+| Open source | Yes (MIT) | Rarely |
+| Self-hostable | Yes | Rarely |
+
+## Host it yourself
+
+Prefer not to use the CLI? mevebu is a plain static site, so you can host it anywhere files can be served: a static site host, a CDN, an object store, or even a USB drive.
+
+1. Copy the `mevebu/` folder from this repo (or from the npm package).
+2. Upload it to your host.
+3. Open `index.html`.
+
+Routes are hash routes, like `#/security/password-generator`, so you do not need any server rewrites. The CSS is one committed stylesheet built by Tailwind, and there is no extra build step. Your host never has to run code.
 
 ## Development
 
-```sh
+Want to hack on mevebu or add your own tool? Here is how to get started:
+
+```bash
 git clone https://github.com/mevebu/mevebu
 cd mevebu
 npm install
@@ -138,38 +151,72 @@ npm run icons    # regenerate the vendored Lucide icon set
 npm start        # serve the static folder on http://localhost:5555
 ```
 
-The app is a few hundred lines of vanilla JavaScript (ESM) in
-`mevebu/app/mevebu.js` and a small shared vocabulary in `mevebu/libs/js/core.js`.
-Every tool is a single file in `mevebu/libs/js/tools/`, exports a `mount(slot)`
-function and (optionally) an `unmount()` to stop timers, cameras and observers.
-The registry in `mevebu/libs/js/registry.js` is the single source of truth: add
-an entry to `TOOLS` and a file, and the catalog, search, breadcrumb, and
-category page pick it up.
+### Project layout
+
+```text
+bin/        The mevebu command line entry
+mevebu/     The static app that gets served
+  app/      App shell (mevebu.js) and the Tailwind source (tailwind.src.css)
+  libs/js/  Shared core.js, the registry, and one file per tool in tools/
+scripts/    Helper scripts for the project
+```
+
+### How it works
+
+- The app is a few hundred lines of vanilla JavaScript (ESM) in `mevebu/app/mevebu.js`, plus a small shared helper set in `mevebu/libs/js/core.js`.
+- The registry in `mevebu/libs/js/registry.js` is the single source of truth for all tools.
+- The styling is Tailwind v4, built from one source file. The built stylesheet is committed, so the shipped folder stays plain static files.
+- The design system (type scale, layout, color, and motion) is documented in `AGENTS.md` and `DESIGN.md`.
+
+### Add a new tool
+
+1. Create one file in `mevebu/libs/js/tools/`.
+2. Export a `mount(slot)` function. Optionally export `unmount()` to clean up timers, cameras, and observers.
+3. Add one entry to `TOOLS` in `mevebu/libs/js/registry.js`.
+
+That is all. The catalog, search, breadcrumbs, and category pages pick it up automatically.
+
+## 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.
 
-The CSS is Tailwind v4, built from one source file, with the stylesheet output
-committed so the shipped folder is still plain static files. There is no
-component layer and no `mvb-` class: every utility is written at the call
-site, and the design tokens live in `mevebu/app/tailwind.src.css`.
+**Is mevebu really free?**
+Yes. It is MIT licensed, with no paid tier, no account, and no usage limits.
 
-Layout and color decisions, the type scale, the orbit lines, the "energy 1,
-rhythm 2, motion 1" dials, and the rest of the visual system, are recorded in
-`AGENTS.md` and `DESIGN.md`, the two docs an agent reads first.
+**Does mevebu upload or store my data?**
+No. Your input is processed in your browser tab and never sent to a server.
+
+**Can I use mevebu offline?**
+Yes. After you install it with npm, it runs on your own machine without needing the internet.
+
+**Can I host mevebu on my own site?**
+Yes. Copy the `mevebu/` folder to any static host. No server side setup is needed.
+
+**How do I find a tool quickly?**
+Press `Ctrl+K` and search by tool name, keyword, or what the tool does.
+
+**Can I add my own tool?**
+Yes. Add one file and one registry entry. See [Add a new tool](#add-a-new-tool).
 
 ## Report a problem
 
-Every tool page has a small "Report a problem" link at the bottom, alongside
-the tool's actions. It opens a GitHub issue with the tool name, the page URL
-and the mevebu version already filled in, so all you have to do is describe
-what happened and what you expected.
+Every tool page has a small **Report a problem** link at the bottom. It opens a GitHub issue with the tool name, the page URL, and the mevebu version already filled in. You only need to describe what happened and what you expected.
 
-## License
+You can also [open an issue](https://github.com/mevebu/mevebu/issues) directly, or send a pull request.
 
-MIT. The whole list, the whole source, the whole thing is in the repository.
-If a tool here saved you time, a coffee keeps the next one coming:
-<https://buymeacoffee.com/fastro>.
+## Follow
+
+Star the repo if you like it, and follow mevebu for updates:
+
+[GitHub](https://github.com/mevebu) · [TikTok](https://www.tiktok.com/@mevebu01) · [Instagram](https://www.instagram.com/mevebu01) · [Facebook](https://www.facebook.com/mevebu) · [YouTube](https://www.youtube.com/@mevebu) · [Threads](https://www.threads.net/@mevebu01)
 
 ## Links
 
 - Repository: <https://github.com/mevebu/mevebu>
-- npm: <https://www.npmjs.com/package/mevebu>
-- Donate: <https://buymeacoffee.com/fastro>
+- npm package: <https://www.npmjs.com/package/mevebu>
+- Issues: <https://github.com/mevebu/mevebu/issues>
+
+## License
+
+[MIT](./LICENSE). The whole list, the whole source, the whole thing is right here in the repository.

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

@@ -211,12 +211,18 @@
   .inset-0 {
     inset: 0px;
   }
+  .end-1 {
+    inset-inline-end: calc(var(--spacing) * 1);
+  }
   .end-3 {
     inset-inline-end: calc(var(--spacing) * 3);
   }
   .top-0\.5 {
     top: calc(var(--spacing) * 0.5);
   }
+  .top-1 {
+    top: var(--spacing);
+  }
   .top-3 {
     top: calc(var(--spacing) * 3);
   }
@@ -283,6 +289,9 @@
   .me-2 {
     margin-inline-end: calc(var(--spacing) * 2);
   }
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
   .mt-1 {
     margin-top: var(--spacing);
   }
@@ -370,10 +379,17 @@
   .table {
     display: table;
   }
+  .aspect-\[4\/3\] {
+    aspect-ratio: 4/3;
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -628,6 +644,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\(160px\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
+  }
   .\[grid-template-columns\:repeat\(auto-fit\,minmax\(96px\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fit,minmax(96px,1fr));
   }
@@ -872,6 +891,12 @@
   .bg-deck-2 {
     background-color: var(--deck-2);
   }
+  .bg-deck\/90 {
+    background-color: var(--deck);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--deck) 90%, transparent);
+    }
+  }
   .bg-ink {
     background-color: var(--ink);
   }
@@ -914,6 +939,9 @@
   .bg-no-repeat {
     background-repeat: no-repeat;
   }
+  .object-contain {
+    object-fit: contain;
+  }
   .p-0 {
     padding: 0px;
   }
@@ -1282,6 +1310,9 @@
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1437,6 +1468,9 @@
     border-color: var(--jade);
   }
   @media (hover: hover) {
+    .hover\:border-danger:hover {
+      border-color: var(--danger);
+    }
     .hover\:border-danger-deep:hover {
       border-color: var(--danger-deep);
     }
@@ -1472,6 +1506,9 @@
     .hover\:bg-jade-soft:hover {
       background-color: var(--jade-soft);
     }
+    .hover\:text-danger:hover {
+      color: var(--danger);
+    }
     .hover\:text-ink:hover {
       color: var(--ink);
     }
@@ -1502,6 +1539,22 @@
   .focus-visible\:border-jade:focus-visible {
     border-color: var(--jade);
   }
+  .focus-visible\:outline-2:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
+  .focus-visible\:outline-offset-1:focus-visible {
+    outline-offset: 1px;
+  }
+  .focus-visible\:outline-offset-2:focus-visible {
+    outline-offset: 2px;
+  }
+  .focus-visible\:outline-danger:focus-visible {
+    outline-color: var(--danger);
+  }
+  .focus-visible\:outline-jade:focus-visible {
+    outline-color: var(--jade);
+  }
   .active\:scale-\[0\.88\]:active {
     scale: 0.88;
   }

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.7.3";
+export const VERSION = "1.8.1";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/icons.js

@@ -1,5 +1,5 @@
 // GENERATED FILE, DO NOT EDIT.
-// Source: lucide v1.59.0 (ISC), icons/173 names from scripts/vendor-icons.mjs
+// Source: lucide v1.59.0 (ISC), icons/174 names from scripts/vendor-icons.mjs
 // Regenerate with: npm run icons
 
 const D = {
@@ -176,6 +176,7 @@ const D = {
   "clipboard-check": [ ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }], ["path", { d: "m9 14 2 2 4-4" }] ],
   "circle-check-big": [ ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335" }], ["path", { d: "m9 11 3 3L22 4" }] ],
   "square": [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }]],
+  "chevron-right": [["path", { d: "m9 18 6-6-6-6" }]],
 };
 
 const SVG_NS = "http://www.w3.org/2000/svg";

package/mevebu/libs/js/registry.js

@@ -357,6 +357,25 @@ export const TOOLS = [
     keywords: "uppercase lowercase camel snake kebab pascal title",
     load: () => import("./tools/case-converter.js"),
   },
+  {
+    id: "image-converter",
+    category: "convert",
+    name: "Image Converter",
+    icon: "image-up",
+    note: "Convert images to another format, in batch.",
+    about: "JPEG, PNG, WebP, TIFF and BMP, written on this device.",
+    tutorial: {
+      intro: "Drop one image or a whole set, pick the format, and every file converts on this device.",
+      steps: [
+        "Drop images on the box or choose files. Add as many as you like.",
+        "Pick the format. Quality applies to JPEG and WebP; PNG, TIFF and BMP are lossless.",
+        "Drag the quality slider or type a number. Every file updates as you change it.",
+        "Save one file, or Download all for a ZIP. The x on a thumbnail removes that image.",
+      ],
+    },
+    keywords: "convert jpeg jpg png webp tiff bmp image batch compress quality",
+    load: () => import("./tools/image-converter.js"),
+  },
 
   {
     id: "lorem-ipsum",

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

@@ -0,0 +1,643 @@
+// Image to image conversion, in batch and entirely on the device. Canvas writes
+// JPEG, PNG, WebP and AVIF; TIFF and BMP come from the two small encoders below,
+// because no browser can write either of them.
+import {
+  el, icon, toast, download, bench, stack, panel, selectInput, rangeInput, numberInput,
+  button, actions, toolcard, blank, notice,
+} from "../core.js";
+
+const FORMATS = [
+  { id: "jpeg", label: "JPEG", mime: "image/jpeg", ext: "jpg", quality: true },
+  { id: "png", label: "PNG", mime: "image/png", ext: "png", quality: false },
+  { id: "webp", label: "WebP", mime: "image/webp", ext: "webp", quality: true },
+  { id: "avif", label: "AVIF", mime: "image/avif", ext: "avif", quality: true },
+  { id: "tiff", label: "TIFF", mime: "image/tiff", ext: "tiff", quality: false, encode: encodeTiff },
+  { id: "bmp", label: "BMP", mime: "image/bmp", ext: "bmp", quality: false, encode: encodeBmp },
+];
+
+const MAX_SIDE = 16384;
+const MAX_PIXELS = 80_000_000;
+
+function writable(mime) {
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  return canvas.toDataURL(mime).startsWith(`data:${mime}`);
+}
+
+const AVAILABLE = FORMATS.filter((format) => format.encode || writable(format.mime));
+
+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 baseName(name) {
+  return name.replace(/\.[^.]+$/, "") || "image";
+}
+
+function inputFormat(file) {
+  const type = (file.type || "").split("/")[1];
+  if (type) return type.replace("svg+xml", "SVG").replace("vnd.microsoft.icon", "ICO").toUpperCase();
+  const ext = (file.name.split(".").pop() || "").toUpperCase();
+  return ext || "Image";
+}
+
+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 {
+      // Some formats, SVG among them, 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);
+  }
+}
+
+async function convert(file, format, quality) {
+  const source = await decode(file);
+  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 to convert here.");
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d", { alpha: true });
+  // JPEG and BMP have no usable alpha, so a transparent pixel would turn black.
+  if (format.id === "jpeg" || format.id === "bmp") {
+    context.fillStyle = "#ffffff";
+    context.fillRect(0, 0, width, height);
+  }
+  context.drawImage(source, 0, 0);
+  if (source.close) source.close();
+
+  if (format.encode) {
+    return format.encode(context.getImageData(0, 0, width, height));
+  }
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => (blob ? resolve(blob) : reject(new Error("The browser could not encode this image."))),
+      format.mime,
+      format.quality ? quality / 100 : undefined
+    );
+  });
+}
+
+// Baseline TIFF, uncompressed RGBA. Every tag is written by hand because the
+// format needs strip offsets and rational resolutions that a canvas never gives.
+function encodeTiff(image) {
+  const { data, width, height } = image;
+  const samples = 4;
+  const pixels = new Uint8Array(width * height * samples);
+  for (let i = 0, j = 0; i < data.length; i += 4, j += samples) {
+    pixels[j] = data[i];
+    pixels[j + 1] = data[i + 1];
+    pixels[j + 2] = data[i + 2];
+    pixels[j + 3] = data[i + 3];
+  }
+
+  const entries = [
+    [256, 4, 1, width],
+    [257, 4, 1, height],
+    [258, 3, samples, 0],
+    [259, 3, 1, 1],
+    [262, 3, 1, 2],
+    [273, 4, 1, 0],
+    [277, 3, 1, samples],
+    [278, 4, 1, height],
+    [279, 4, 1, pixels.length],
+    [282, 5, 1, 0],
+    [283, 5, 1, 0],
+    [296, 3, 1, 2],
+    [338, 3, 1, 1],
+  ];
+
+  const ifdSize = 2 + entries.length * 12 + 4;
+  const bitsAt = 8 + ifdSize;
+  const xResAt = bitsAt + samples * 2;
+  const yResAt = xResAt + 8;
+  const pixelsAt = yResAt + 8;
+  const buffer = new ArrayBuffer(pixelsAt + pixels.length);
+  const view = new DataView(buffer);
+  const bytes = new Uint8Array(buffer);
+
+  view.setUint16(0, 0x4949, true);
+  view.setUint16(2, 42, true);
+  view.setUint32(4, 8, true);
+  view.setUint16(8, entries.length, true);
+
+  let at = 10;
+  for (const [tag, type, count, value] of entries) {
+    view.setUint16(at, tag, true);
+    view.setUint16(at + 2, type, true);
+    view.setUint32(at + 4, count, true);
+    let inline = value;
+    if (tag === 258) inline = bitsAt;
+    else if (tag === 273) inline = pixelsAt;
+    else if (tag === 282) inline = xResAt;
+    else if (tag === 283) inline = yResAt;
+    if (type === 3 && count === 1) view.setUint16(at + 8, inline, true);
+    else view.setUint32(at + 8, inline, true);
+    at += 12;
+  }
+  view.setUint32(at, 0, true);
+
+  for (let i = 0; i < samples; i++) view.setUint16(bitsAt + i * 2, 8, true);
+  view.setUint32(xResAt, 72, true);
+  view.setUint32(xResAt + 4, 1, true);
+  view.setUint32(yResAt, 72, true);
+  view.setUint32(yResAt + 4, 1, true);
+  bytes.set(pixels, pixelsAt);
+
+  return new Blob([buffer], { type: "image/tiff" });
+}
+
+// 24-bit BMP, bottom up, rows padded to four bytes.
+function encodeBmp(image) {
+  const { data, width, height } = image;
+  const rowSize = Math.floor((24 * width + 31) / 32) * 4;
+  const pixelSize = rowSize * height;
+  const buffer = new ArrayBuffer(54 + pixelSize);
+  const view = new DataView(buffer);
+  const bytes = new Uint8Array(buffer);
+
+  bytes[0] = 0x42;
+  bytes[1] = 0x4d;
+  view.setUint32(2, buffer.byteLength, true);
+  view.setUint32(10, 54, true);
+  view.setUint32(14, 40, true);
+  view.setInt32(18, width, true);
+  view.setInt32(22, height, true);
+  view.setUint16(26, 1, true);
+  view.setUint16(28, 24, true);
+  view.setUint32(34, pixelSize, true);
+  view.setInt32(38, 2835, true);
+  view.setInt32(42, 2835, true);
+
+  for (let y = 0; y < height; y++) {
+    const from = y * width * 4;
+    const to = 54 + (height - 1 - y) * rowSize;
+    for (let x = 0; x < width; x++) {
+      const i = from + x * 4;
+      const o = to + x * 3;
+      bytes[o] = data[i + 2];
+      bytes[o + 1] = data[i + 1];
+      bytes[o + 2] = data[i];
+    }
+  }
+  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;
+  let runToken = 0;
+  let timer = null;
+  let busy = false;
+
+  const picker = el("input", { type: "file", accept: "image/*", multiple: true, 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 images",
+    },
+    icon("image-up", "size-6 text-ink-3"),
+    el("p", { class: "text-sm font-semibold" }, "Drop images here"),
+    el("p", { class: "text-2xs text-ink-3" }, "or choose files")
+  );
+
+  const target = selectInput(
+    AVAILABLE.map((format) => ({ value: format.id, label: format.label })),
+    { value: AVAILABLE.some((format) => format.id === "webp") ? "webp" : "jpeg", "aria-label": "Convert to" }
+  );
+
+  const qualityRange = rangeInput({ min: "10", max: "100", step: "1", value: "85", "aria-label": "Quality percent" });
+  const qualityNumber = numberInput({ min: "10", max: "100", step: "1", value: "85", "aria-label": "Quality percent" });
+  const qualityRow = el(
+    "div",
+    { class: "flex min-w-0 items-center gap-3" },
+    el("div", { class: "min-w-0 flex-1" }, qualityRange),
+    qualityNumber
+  );
+  const qualityHint = el("span", { class: "text-2xs text-ink-3" });
+  const qualityPanel = el(
+    "div",
+    { class: "grid min-w-0 content-start gap-1.5" },
+    el("span", { class: "text-sm font-semibold text-ink-2" }, "Quality"),
+    qualityRow,
+    qualityHint
+  );
+
+  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(160px,1fr))]" });
+  const empty = blank("image-up", "Add an image to convert it.");
+
+  const clearAll = button("Clear all", { icon: "trash" });
+  const downloadAll = button("Download all", { icon: "download", kind: "fill" });
+
+  function currentFormat() {
+    return AVAILABLE.find((format) => format.id === target.value) ?? AVAILABLE[0];
+  }
+
+  function syncQuality() {
+    const format = currentFormat();
+    const lossy = Boolean(format.quality);
+    qualityRange.disabled = !lossy;
+    qualityNumber.disabled = !lossy;
+    qualityPanel.classList.toggle("opacity-50", !lossy);
+    qualityHint.textContent = lossy
+      ? `Applies to ${format.label}. Lower means a smaller file.`
+      : `${format.label} is lossless, so there is no quality to set.`;
+  }
+
+  function schedule() {
+    clearTimeout(timer);
+    timer = setTimeout(run, 220);
+  }
+
+  function outputName(entry, format) {
+    const base = baseName(entry.file.name);
+    const used = new Set(entries.filter((other) => other !== entry && other.outName).map((other) => other.outName));
+    let name = `${base}.${format.ext}`;
+    let index = 2;
+    while (used.has(name)) {
+      name = `${base}-${index}.${format.ext}`;
+      index++;
+    }
+    return name;
+  }
+
+  async function run() {
+    if (!entries.length) return;
+    const token = ++runToken;
+    const format = currentFormat();
+    const quality = Math.max(10, Math.min(100, parseInt(qualityNumber.value || "85", 10) || 85));
+    busy = true;
+    error.write("");
+    downloadAll.disabled = true;
+    clearAll.disabled = true;
+
+    for (const entry of entries) {
+      if (token !== runToken) return;
+      entry.status = "working";
+      entry.blob = null;
+      entry.error = "";
+      entry.outName = "";
+    }
+    render();
+
+    for (const [index, entry] of entries.entries()) {
+      if (token !== runToken) return;
+      summary.textContent = `Converting ${index + 1} of ${entries.length}`;
+      try {
+        const blob = await convert(entry.file, format, quality);
+        if (token !== runToken) return;
+        entry.blob = blob;
+        entry.outName = outputName(entry, format);
+        entry.status = "done";
+      } catch (caught) {
+        if (token !== runToken) return;
+        entry.error = caught?.message || "Could not convert this file.";
+        entry.status = "error";
+      }
+      render();
+    }
+
+    if (token !== runToken) return;
+    busy = false;
+    downloadAll.disabled = false;
+    clearAll.disabled = false;
+    render();
+  }
+
+  // Two lines, so a unit never breaks in half at the card edge.
+  function metaLines(entry) {
+    const format = currentFormat();
+    const from = `${inputFormat(entry.file)} · ${formatBytes(entry.file.size)}`;
+    if (entry.status === "error") return [from, entry.error];
+    if (entry.status === "working") return [from, `Converting to ${format.label}`];
+    if (entry.status === "done") {
+      return [from, `to ${format.label} · ${formatBytes(entry.blob.size)}`];
+    }
+    return [from, `to ${format.label}`];
+  }
+
+  function fileCard(entry) {
+    const remove = button("", {
+      icon: "x",
+      kind: "quiet",
+      class:
+        "absolute end-1 top-1 size-8 rounded-full border border-orbit bg-deck/90 text-ink-2 hover:border-danger hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-danger",
+      "aria-label": `Remove ${entry.file.name}`,
+    });
+    remove.addEventListener("click", () => removeEntry(entry));
+
+    const save = button("Save", { icon: "download", class: "w-full" });
+    save.disabled = entry.status !== "done";
+    save.addEventListener("click", () => {
+      if (entry.blob) download(entry.outName, entry.blob, entry.blob.type);
+    });
+
+    return el(
+      "div",
+      { class: "grid content-start gap-2 rounded-r2 border border-orbit bg-deck-2 p-2" },
+      el(
+        "div",
+        { class: "relative" },
+        el("img", {
+          src: entry.url,
+          alt: "",
+          class: "aspect-[4/3] w-full rounded-r1 bg-deck object-contain",
+        }),
+        remove
+      ),
+      el(
+        "div",
+        { class: "min-w-0" },
+        el("p", { class: "truncate text-sm font-semibold", title: entry.file.name }, entry.file.name),
+        el(
+          "p",
+          { class: `mt-0.5 grid gap-0.5 text-2xs tabular-nums ${entry.status === "error" ? "text-danger" : "text-ink-3"}` },
+          ...metaLines(entry).map((line) => el("span", { class: "truncate" }, line))
+        )
+      ),
+      save
+    );
+  }
+
+  function render() {
+    grid.replaceChildren(...entries.map(fileCard));
+    const done = entries.filter((entry) => entry.status === "done");
+    const before = done.reduce((total, entry) => total + entry.file.size, 0);
+    const after = done.reduce((total, entry) => total + entry.blob.size, 0);
+    if (!entries.length) {
+      summary.textContent = "";
+      grid.hidden = true;
+      empty.hidden = false;
+    } else {
+      grid.hidden = false;
+      empty.hidden = true;
+      if (busy) {
+        // The loop writes the counter itself.
+      } else {
+        const failed = entries.length - done.length;
+        const size = done.length ? ` · ${formatBytes(before)} → ${formatBytes(after)}` : "";
+        const trouble = failed ? ` · ${failed} failed` : "";
+        summary.textContent = `${entries.length} image${entries.length === 1 ? "" : "s"}${size}${trouble}`;
+      }
+    }
+    downloadAll.disabled = busy || !done.length;
+    clearAll.disabled = busy || !entries.length;
+  }
+
+  function removeEntry(entry) {
+    const index = entries.indexOf(entry);
+    if (index < 0) return;
+    entries.splice(index, 1);
+    URL.revokeObjectURL(entry.url);
+    if (!entries.length) {
+      runToken++;
+      busy = false;
+      summary.textContent = "";
+    }
+    render();
+    if (entries.length) schedule();
+  }
+
+  function addFiles(files) {
+    const images = [];
+    let skipped = 0;
+    for (const file of files) {
+      if (looksLikeImage(file)) images.push(file);
+      else skipped++;
+    }
+    error.write(skipped ? `${skipped} file${skipped === 1 ? "" : "s"} skipped. Only images can be converted.` : "");
+    if (!images.length) return;
+    for (const file of images) {
+      entries.push({
+        id: nextId++,
+        file,
+        url: URL.createObjectURL(file),
+        status: "queued",
+        blob: null,
+        error: "",
+        outName: "",
+      });
+    }
+    render();
+    schedule();
+  }
+
+  picker.addEventListener("change", () => {
+    addFiles(Array.from(picker.files ?? []));
+    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;
+    addFiles(Array.from(event.dataTransfer?.files ?? []));
+  });
+
+  target.addEventListener("change", () => {
+    syncQuality();
+    schedule();
+  });
+  qualityRange.addEventListener("input", () => {
+    qualityNumber.value = qualityRange.value;
+    schedule();
+  });
+  qualityNumber.addEventListener("input", () => {
+    const value = parseInt(qualityNumber.value || "", 10);
+    if (Number.isFinite(value)) qualityRange.value = String(Math.max(10, Math.min(100, value)));
+    schedule();
+  });
+  qualityNumber.addEventListener("change", () => {
+    const value = Math.max(10, Math.min(100, parseInt(qualityNumber.value || "85", 10) || 85));
+    qualityNumber.value = String(value);
+    qualityRange.value = String(value);
+    schedule();
+  });
+
+  clearAll.addEventListener("click", () => {
+    runToken++;
+    clearTimeout(timer);
+    busy = false;
+    for (const entry of entries) URL.revokeObjectURL(entry.url);
+    entries.length = 0;
+    error.write("");
+    render();
+  });
+
+  downloadAll.addEventListener("click", () => {
+    const done = entries.filter((entry) => entry.status === "done" && entry.blob);
+    if (!done.length) return toast("Nothing to save yet");
+    if (done.length === 1) {
+      download(done[0].outName, done[0].blob, done[0].blob.type);
+      return;
+    }
+    Promise.all(done.map(async (entry) => ({ name: entry.outName, bytes: await entry.blob.arrayBuffer() })))
+      .then((files) => download(`mevebu-images-${currentFormat().ext}.zip`, zip(files), "application/zip"))
+      .catch(() => toast("Could not build the ZIP"));
+  });
+
+  syncQuality();
+  render();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        picker,
+        panel("Convert to", target),
+        qualityPanel,
+        error
+      ),
+      stack(
+        summary,
+        empty,
+        grid
+      )
+    ),
+    foot: actions(clearAll, downloadAll),
+  });
+
+  slot.append(shell.node);
+
+  return {
+    unmount() {
+      runToken++;
+      clearTimeout(timer);
+      for (const entry of entries) URL.revokeObjectURL(entry.url);
+      entries.length = 0;
+    },
+  };
+}
+
+export default { mount };

package/package.json

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