mevebu 1.8.1 → 1.10.0

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",
@@ -1336,17 +1355,18 @@ export const TOOLS = [
     category: "math",
     name: "Scientific Calculator",
     icon: "calculator",
-    note: "Do scientific math with a keypad.",
-    about: "Trigonometry, logs, powers and roots, in degrees or radians.",
+    note: "Do scientific math with a live keypad.",
+    about: "Variables, fractions, constants and a full function set, in degrees or radians.",
     tutorial: {
-      intro: "Do scientific math with a keypad.",
+      intro: "A scientific calculator that evaluates as you type.",
       steps: [
-        "Type an expression or use the keys.",
-        "Pick degrees or radians for the trig functions.",
-        "Press = to evaluate. The history keeps recent results.",
+        "Type an expression or press the keys. The result updates while you type.",
+        "Press = or Enter to commit it to the history.",
+        "Keep values with a = 5, then use a in the next line. ans holds the last result.",
+        "Switch Degrees or Radians, and Decimal or Fraction for the result.",
       ],
     },
-    keywords: "scientific calculator trigonometry log sin cos tan",
+    keywords: "scientific calculator trigonometry log sin cos tan variables fractions ans desmos",
     load: () => import("./tools/scientific-calculator.js"),
   },
   {
@@ -3072,7 +3092,7 @@ export const TOOLS = [
     id: "script-planner",
     category: "content",
     name: "Script Planner",
-    icon: "film",
+    icon: "video",
     note: "Lay out a video script.",
     about: "Hook, intro, body and outro, with word and time estimates.",
     tutorial: {
@@ -3108,7 +3128,7 @@ export const TOOLS = [
     id: "subtitle-formatter",
     category: "content",
     name: "Subtitle Formatter",
-    icon: "film",
+    icon: "video",
     note: "Check subtitle line lengths.",
     about: "Flags lines that run too long and tidies blank lines.",
     tutorial: {

package/mevebu/libs/js/social-icons.js

@@ -0,0 +1,32 @@
+// GENERATED FILE, DO NOT EDIT.
+// Source: simple-icons v16.35.0 (CC0 1.0), 6 brand marks from scripts/vendor-social.mjs
+// Regenerate with: npm run social
+
+const D = {
+  "github": { title: "GitHub", path: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" },
+  "instagram": { title: "Instagram", path: "M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" },
+  "threads": { title: "Threads", path: "M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z" },
+  "tiktok": { title: "TikTok", path: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" },
+  "facebook": { title: "Facebook", path: "M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" },
+  "youtube": { title: "YouTube", path: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" },
+};
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+export const SOCIAL_NAMES = Object.keys(D);
+
+/** Builds an inline <svg> for a brand name, or null when it is unknown. */
+export function socialIcon(name, cls = "size-5") {
+  const icon = D[name];
+  if (!icon) return null;
+  const el = document.createElementNS(SVG_NS, "svg");
+  el.setAttribute("class", cls);
+  el.setAttribute("viewBox", "0 0 24 24");
+  el.setAttribute("fill", "currentColor");
+  el.setAttribute("role", "img");
+  el.setAttribute("aria-label", icon.title);
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", icon.path);
+  el.append(path);
+  return el;
+}

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;