mevebu 1.10.0 → 2.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 # mevebu
 
-**188 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
+**200 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,10 +10,10 @@ 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-188-brightgreen)
+![Tools](https://img.shields.io/badge/tools-200-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)
+[Quick start](#quick-start) · [What's inside](#whats-inside) · [Privacy](#privacy-by-design) · [Credit](#credit) · [Development](#development) · [FAQ](#faq)
 
 </div>
 
@@ -23,11 +23,11 @@ A private toolbox for the small jobs that do not deserve a whole app: format JSO
 
 ## What is mevebu?
 
-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.
+mevebu is a collection of **200 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.
+Install it once with one command and it runs on your machine, with no server behind it and no account to create.
 
 ## Why you will like it
 
@@ -37,7 +37,6 @@ You can run it on your own computer with one command, or copy the folder to any
 - **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.
 
 ## Quick start
@@ -65,14 +64,14 @@ mevebu tries port `5555` first, then `5678`, then `5432`, and finally any free p
 
 ## What's inside
 
-mevebu has **188 tools in 20 categories**. Here is the full breakdown:
+mevebu has **200 tools in 20 categories**. Here is the full breakdown:
 
 | Category           | Tools |
 | ------------------ | ----: |
-| Random             |     3 |
+| Data Generator     |     5 |
 | Passwords and keys |    10 |
 | Developer          |    21 |
-| Convert            |     5 |
+| Convert            |    15 |
 | Text and data      |    14 |
 | Daily use          |     8 |
 | Math               |    17 |
@@ -89,7 +88,7 @@ mevebu has **188 tools in 20 categories**. Here is the full breakdown:
 | GitHub             |     8 |
 | Units              |     8 |
 | QR codes           |     2 |
-| **Total**          | **188** |
+| **Total**          | **200** |
 
 The counts come straight from the tool registry, so this table and the app never drift apart.
 
@@ -126,21 +125,18 @@ Do not just take our word for it. Open the Network tab in your browser dev tools
 | Your data uploaded | Never | Sometimes |
 | Works offline | Yes | Rarely |
 | Open source | Yes (MIT) | Rarely |
-| Self-hostable | Yes | Rarely |
 
-## Host it yourself
+## Credit
 
-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.
+mevebu is built and maintained by the [mevebu](https://github.com/mevebu) organization, created by [Ilyas Mukhlisin](https://www.instagram.com/ilyas.mukhlisin). Two repositories live there: **Mevebu**, this toolbox, and **Waitsec**, a set of guardrails for coding agents.
 
-1. Copy the `mevebu/` folder from this repo (or from the npm package).
-2. Upload it to your host.
-3. Open `index.html`.
+The code is MIT licensed. If you learn from it, borrow a helper, or ship something inspired by it, keep the copyright notice and say where it came from. A link back to [github.com/mevebu/mevebu](https://github.com/mevebu/mevebu) is enough.
 
-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.
+Bug reports and tool ideas are welcome in the issues. The best way to support the project is to use it, share it, and tell us what is missing.
 
 ## Development
 
-Want to hack on mevebu or add your own tool? Here is how to get started:
+Contributions are welcome. Here is how to run the project locally while you work on it:
 
 ```bash
 git clone https://github.com/mevebu/mevebu
@@ -180,7 +176,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 188 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 200 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.
@@ -191,8 +187,8 @@ 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.
+**Can I reuse the code?**
+Yes. It is MIT licensed, so keep the copyright notice and the license text, and credit [mevebu](https://github.com/mevebu/mevebu) where you use it.
 
 **How do I find a tool quickly?**
 Press `Ctrl+K` and search by tool name, keyword, or what the tool does.

package/mevebu/app/mevebu.js

@@ -1013,7 +1013,7 @@ function aboutPage() {
     block("Running it",
       el("p", {}, "Install it once from npm. The command starts a local server and opens your browser at the address it prints."),
       el("pre", { class: "m-0 overflow-x-auto rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3 font-mono text-sm" }, "npm install -g mevebu\nmevebu"),
-      el("p", {}, "Serve the ", el("code", { class: CODE }, "mevebu/"), " folder from any static host. Routes are hash routes, so no rewrite rules are needed.")),
+      el("p", {}, "The command serves the tools that ship with the package, so there is nothing to configure and no server to run.")),
 
     block("Adding a tool",
       el("p", {}, "Add one object to ", el("code", { class: CODE }, "mevebu/libs/js/registry.js"), " and one file in ", el("code", { class: CODE }, "mevebu/libs/js/tools/"), ". The home page, the index, the categories, search and the route all come from that entry.")),

package/mevebu/app/tailwind.css

@@ -218,6 +218,9 @@
   .inset-0 {
     inset: 0px;
   }
+  .start-1 {
+    inset-inline-start: calc(var(--spacing) * 1);
+  }
   .end-1 {
     inset-inline-end: calc(var(--spacing) * 1);
   }
@@ -290,6 +293,9 @@
   .ms-1\.5 {
     margin-inline-start: calc(var(--spacing) * 1.5);
   }
+  .ms-2 {
+    margin-inline-start: calc(var(--spacing) * 2);
+  }
   .ms-auto {
     margin-inline-start: auto;
   }
@@ -401,6 +407,10 @@
   .aspect-\[4\/3\] {
     aspect-ratio: 4/3;
   }
+  .size-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+    height: calc(var(--spacing) * 1.5);
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -421,6 +431,10 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -433,6 +447,10 @@
     width: calc(var(--spacing) * 11);
     height: calc(var(--spacing) * 11);
   }
+  .size-12 {
+    width: calc(var(--spacing) * 12);
+    height: calc(var(--spacing) * 12);
+  }
   .size-14 {
     width: calc(var(--spacing) * 14);
     height: calc(var(--spacing) * 14);
@@ -441,10 +459,6 @@
     width: calc(var(--spacing) * 16);
     height: calc(var(--spacing) * 16);
   }
-  .size-32 {
-    width: calc(var(--spacing) * 32);
-    height: calc(var(--spacing) * 32);
-  }
   .size-\[15px\] {
     width: 15px;
     height: 15px;
@@ -495,6 +509,9 @@
   .h-14 {
     height: calc(var(--spacing) * 14);
   }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
   .h-\[22px\] {
     height: 22px;
   }
@@ -525,6 +542,9 @@
   .max-h-80 {
     max-height: calc(var(--spacing) * 80);
   }
+  .max-h-\[320px\] {
+    max-height: 320px;
+  }
   .max-h-\[340px\] {
     max-height: 340px;
   }
@@ -588,9 +608,6 @@
   .w-\[min\(300px\,100\%\)\] {
     width: min(300px, 100%);
   }
-  .w-\[min\(320px\,100\%\)\] {
-    width: min(320px, 100%);
-  }
   .w-\[min\(420px\,100\%\)\] {
     width: min(420px, 100%);
   }
@@ -603,6 +620,9 @@
   .w-\[min\(640px\,100\%\)\] {
     width: min(640px, 100%);
   }
+  .w-auto {
+    width: auto;
+  }
   .w-full {
     width: 100%;
   }
@@ -633,15 +653,15 @@
   .max-w-\[64ch\] {
     max-width: 64ch;
   }
-  .max-w-\[340px\] {
-    max-width: 340px;
-  }
   .max-w-\[560px\] {
     max-width: 560px;
   }
   .max-w-\[var\(--bench\)\] {
     max-width: var(--bench);
   }
+  .max-w-full {
+    max-width: 100%;
+  }
   .min-w-0 {
     min-width: 0px;
   }
@@ -657,6 +677,9 @@
   .shrink {
     flex-shrink: 1;
   }
+  .grow {
+    flex-grow: 1;
+  }
   .border-collapse {
     border-collapse: collapse;
   }
@@ -675,6 +698,15 @@
   .scale-\[0\.97\] {
     scale: 0.97;
   }
+  .-rotate-90 {
+    rotate: calc(90deg * -1);
+  }
+  .rotate-90 {
+    rotate: 90deg;
+  }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -702,15 +734,33 @@
   .\[grid-template-columns\:minmax\(0\,1fr\)_auto\] {
     grid-template-columns: minmax(0,1fr) auto;
   }
+  .\[grid-template-columns\:minmax\(90px\,1fr\)_70px_52px_64px_minmax\(70px\,\.9fr\)_minmax\(70px\,\.9fr\)_minmax\(90px\,1\.1fr\)\] {
+    grid-template-columns: minmax(90px,1fr) 70px 52px 64px minmax(70px,.9fr) minmax(70px,.9fr) minmax(90px,1.1fr);
+  }
   .\[grid-template-columns\:minmax\(90px\,34\%\)_minmax\(0\,1fr\)\] {
     grid-template-columns: minmax(90px,34%) minmax(0,1fr);
   }
+  .\[grid-template-columns\:minmax\(110px\,150px\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: minmax(110px,150px) minmax(0,1fr);
+  }
+  .\[grid-template-columns\:repeat\(96\,minmax\(0\,1fr\)\)\] {
+    grid-template-columns: repeat(96,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\(150px\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
+  }
   .\[grid-template-columns\:repeat\(auto-fill\,minmax\(160px\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
   }
+  .\[grid-template-columns\:repeat\(auto-fill\,minmax\(170px\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(170px,1fr));
+  }
+  .\[grid-template-columns\:repeat\(auto-fill\,minmax\(220px\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
+  }
   .\[grid-template-columns\:repeat\(auto-fit\,minmax\(96px\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fit,minmax(96px,1fr));
   }
@@ -750,6 +800,9 @@
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .items-start {
     align-items: flex-start;
   }
@@ -828,6 +881,9 @@
   .gap-y-3 {
     row-gap: calc(var(--spacing) * 3);
   }
+  .self-start {
+    align-self: flex-start;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -851,6 +907,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\[1px\] {
+    border-radius: 1px;
+  }
   .rounded-\[3px\] {
     border-radius: 3px;
   }
@@ -973,6 +1032,12 @@
   .bg-jade-soft {
     background-color: var(--jade-soft);
   }
+  .bg-jade\/70 {
+    background-color: var(--jade);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--jade) 70%, transparent);
+    }
+  }
   .bg-orbit {
     background-color: var(--orbit);
   }
@@ -997,9 +1062,15 @@
   .bg-\[image\:var\(--caret\)\] {
     background-image: var(--caret);
   }
+  .bg-\[repeating-conic-gradient\(\#0000_0\%_25\%\,var\(--deck-2\)_0\%_50\%\)\] {
+    background-image: repeating-conic-gradient(#0000 0% 25%,var(--deck-2) 0% 50%);
+  }
   .bg-\[length\:14px\] {
     background-size: 14px;
   }
+  .bg-\[length\:16px_16px\] {
+    background-size: 16px 16px;
+  }
   .bg-\[position\:right_12px_center\] {
     background-position: right 12px center;
   }
@@ -1009,6 +1080,9 @@
   .object-contain {
     object-fit: contain;
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: 0px;
   }
@@ -1027,6 +1101,9 @@
   .p-2\.5 {
     padding: calc(var(--spacing) * 2.5);
   }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-3\.5 {
     padding: calc(var(--spacing) * 3.5);
   }
@@ -1060,6 +1137,9 @@
   .px-1 {
     padding-inline: var(--spacing);
   }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -1096,9 +1176,15 @@
   .px-\[var\(--margin\)\] {
     padding-inline: var(--margin);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-1 {
     padding-block: var(--spacing);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -1244,10 +1330,6 @@
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
-  .text-display {
-    font-size: var(--text-display);
-    line-height: var(--tw-leading, var(--text-display--line-height));
-  }
   .text-hero {
     font-size: var(--text-hero);
     line-height: var(--tw-leading, var(--text-hero--line-height));
@@ -1516,6 +1598,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[width\] {
+    transition-property: width;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1704,9 +1791,15 @@
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
+  .disabled\:opacity-40:disabled {
+    opacity: 40%;
+  }
   .disabled\:opacity-45:disabled {
     opacity: 45%;
   }
+  .disabled\:opacity-50:disabled {
+    opacity: 50%;
+  }
   .has-checked\:border-jade:has(:checked) {
     border-color: var(--jade);
   }
@@ -1795,9 +1888,6 @@
   .data-\[state\=open\]\:opacity-100[data-state="open"] {
     opacity: 100%;
   }
-  .data-\[toss\]\:animate-toss[data-toss] {
-    animation: var(--animate-toss);
-  }
   @media (width < 60rem) {
     .max-\[60rem\]\:hidden {
       display: none;
@@ -1833,6 +1923,9 @@
     }
   }
   @media (width >= 40rem) {
+    .sm\:col-span-2 {
+      grid-column: span 2 / span 2;
+    }
     .sm\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 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.10.0";
+export const VERSION = "2.0.0";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/csv.js

@@ -0,0 +1,87 @@
+// CSV reading and writing shared by the data tools. Quoted fields, doubled
+// quotes, CRLF, and a delimiter guess, so five tools do not each carry a copy.
+
+export function parseDelimited(text, delimiter = ",") {
+  const rows = [];
+  let row = [];
+  let field = "";
+  let quoted = false;
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+    if (quoted) {
+      if (char === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i++;
+        } else quoted = false;
+      } else field += char;
+    } else if (char === '"') {
+      quoted = true;
+    } else if (char === delimiter) {
+      row.push(field);
+      field = "";
+    } else if (char === "\n") {
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = "";
+    } else if (char !== "\r") {
+      field += char;
+    }
+  }
+  if (field !== "" || row.length) {
+    row.push(field);
+    rows.push(row);
+  }
+  // A trailing blank line is an artefact of the file, not a row.
+  if (rows.length && rows[rows.length - 1].every((cell) => cell === "")) rows.pop();
+  return rows;
+}
+
+export function detectDelimiter(text) {
+  const candidates = [",", ";", "\t", "|"];
+  const first = text.split(/\r?\n/)[0] ?? "";
+  const counts = { ",": 0, ";": 0, "\t": 0, "|": 0 };
+  let quoted = false;
+  for (let i = 0; i < first.length; i++) {
+    const char = first[i];
+    if (char === '"') quoted = !quoted;
+    else if (!quoted && char in counts) counts[char]++;
+  }
+  let best = ",";
+  let bestCount = 0;
+  for (const candidate of candidates) {
+    if (counts[candidate] > bestCount) {
+      bestCount = counts[candidate];
+      best = candidate;
+    }
+  }
+  return best;
+}
+
+const needsQuote = (value) => /[",\n\r]/.test(value) || /^\s|\s$/.test(value);
+
+/** Rows of strings to CSV text. Every field that needs quoting gets it. */
+export function toCsv(rows) {
+  return rows
+    .map((row) =>
+      row
+        .map((cell) => {
+          const text = cell === null || cell === undefined ? "" : String(cell);
+          return needsQuote(text) ? `"${text.replace(/"/g, '""')}"` : text;
+        })
+        .join(",")
+    )
+    .join("\n");
+}
+
+/** The header row, with duplicates and blanks made usable as keys. */
+export function headerKeys(header) {
+  const seen = new Map();
+  return header.map((cell, index) => {
+    const base = (cell || `column_${index + 1}`).trim() || `column_${index + 1}`;
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    return count ? `${base}_${count + 1}` : base;
+  });
+}

package/mevebu/libs/js/files.js

@@ -0,0 +1,125 @@
+// File plumbing shared by the converter tools: a drop target, a size label, a
+// name without its extension, and an image decoder. Kept here so ten tools do
+// not each grow their own copy.
+import { el, icon } from "./core.js";
+
+export 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`;
+}
+
+export function baseName(name) {
+  return (name || "file").replace(/\.[^.]+$/, "") || "file";
+}
+
+export function extension(name) {
+  const match = /\.([^.]+)$/.exec(name || "");
+  return match ? match[1].toLowerCase() : "";
+}
+
+/** A dashed drop zone. Calls `onFiles` with a FileList or an array of files. */
+export function dropzone({ label, hint = "or choose a file", accept = "", multiple = false, iconName = "image-up" }) {
+  const picker = el("input", { type: "file", accept, multiple, class: "hidden" });
+  const node = 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": label,
+    },
+    icon(iconName, "size-6 text-ink-3"),
+    el("p", { class: "text-sm font-semibold" }, label),
+    el("p", { class: "text-2xs text-ink-3" }, hint),
+    picker
+  );
+
+  let handler = () => {};
+  let depth = 0;
+
+  node.addEventListener("click", () => picker.click());
+  node.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      picker.click();
+    }
+  });
+  picker.addEventListener("change", () => {
+    if (picker.files?.length) handler(picker.files);
+    picker.value = "";
+  });
+  node.addEventListener("dragenter", (event) => {
+    event.preventDefault();
+    depth++;
+    node.dataset.drag = "";
+  });
+  node.addEventListener("dragover", (event) => event.preventDefault());
+  node.addEventListener("dragleave", () => {
+    depth = Math.max(0, depth - 1);
+    if (!depth) delete node.dataset.drag;
+  });
+  node.addEventListener("drop", (event) => {
+    event.preventDefault();
+    depth = 0;
+    delete node.dataset.drag;
+    const files = Array.from(event.dataTransfer?.files ?? []);
+    if (files.length) handler(files);
+  });
+
+  node.onFiles = (fn) => {
+    handler = fn;
+  };
+  node.picker = picker;
+  return node;
+}
+
+/** Decodes an image file, preferring createImageBitmap and falling back to <img>. */
+export async function decodeImage(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);
+  }
+}
+
+export function imageSize(source) {
+  return {
+    width: source.width || source.naturalWidth || 0,
+    height: source.height || source.naturalHeight || 0,
+  };
+}
+
+export function canvasToBlob(canvas, type = "image/png", quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => (blob ? resolve(blob) : reject(new Error("The browser could not write this file."))),
+      type,
+      quality
+    );
+  });
+}
+
+/** Sorts files by name with numbers read as numbers, so page-2 comes before page-10. */
+export function naturalSort(files) {
+  return [...files].sort((a, b) =>
+    a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" })
+  );
+}