mevebu 1.4.2 → 1.4.4

package/mevebu/app/mevebu.js

@@ -6,7 +6,7 @@ import { route, start, match, currentPath, go } from "../libs/js/router.js";
 import {
   $, $$, el, icon, getFavorites, isFavorite, toggleFavorite, setTheme,
   modal, modalHead, button, copyButton, openPalette, shuffle, toolcard, blank,
-  VERSION, PACKAGE_NAME, checkForUpdate, updateCommand, compareVersions,
+  VERSION, PACKAGE_NAME, checkForUpdate, updateCommand, compareVersions, releaseUrl,
 } from "../libs/js/core.js";
 
 const DONATE_URL = "https://buymeacoffee.com/fastro";
@@ -174,17 +174,18 @@ function openDonate() {
   });
 }
 
-// `latest` is the published version, or null when the check could not run.
+// 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
+// while that retry runs.
 function openUpdate(latest) {
-  const updatable = latest && compareVersions(latest, VERSION) > 0;
-  const command = updateCommand();
+  let resolved = latest;
+  let busy = false;
 
-  const commandBox = el(
-    "div",
-    { class: "mt-2.5 flex flex-wrap items-center gap-2 rounded-r2 border border-orbit bg-deck-2 py-2.5 pe-2.5 ps-4" },
-    el("code", { class: "min-w-0 flex-1 font-mono text-sm [overflow-wrap:anywhere]" }, command),
-    copyButton(() => command, "Copy command", "fill")
-  );
+  const bodyBox = el("div", { class: "grid gap-2.5" });
+  const actionBox = el("div", { class: "flex flex-wrap items-center justify-end gap-2" });
+  const command = updateCommand();
+  const updatable = () => Boolean(resolved) && compareVersions(resolved, VERSION) > 0;
 
   const versionRow = (label, value, isNew) =>
     el(
@@ -194,22 +195,57 @@ function openUpdate(latest) {
       el("span", { class: `font-mono text-sm font-semibold ${isNew ? "text-jade" : ""}` }, value)
     );
 
-  modal({
-    label: "Update mevebu",
-    body: [
-      modalHead("circle-arrow-up", updatable ? `mevebu ${latest} is out` : "mevebu is up to date"),
-      updatable
-        ? el("p", {}, "A newer version is published. Update your global install, then run ", el("code", { class: "rounded-[4px] bg-deck-2 px-[5px] py-px font-mono text-[0.92em]" }, PACKAGE_NAME), " again.")
-        : el("p", {}, "You are on the latest version. Nothing to do."),
+  function paint() {
+    const newer = updatable();
+    bodyBox.replaceChildren(...[
+      modalHead(
+        busy || !resolved ? "refresh-cw" : "circle-arrow-up",
+        busy
+          ? "Checking for updates"
+          : newer
+            ? `mevebu ${resolved} is out`
+            : resolved
+              ? "mevebu is up to date"
+              : "Could not check for updates"
+      ),
+      newer
+        ? el("p", {}, "A newer version is published. Update your global install, then run ", el("code", { class: CODE }, PACKAGE_NAME), " again.")
+        : null,
       el("div", { class: "mt-[18px] overflow-hidden rounded-r2 border border-orbit" },
         versionRow("Installed", VERSION, false),
-        versionRow("Latest", latest ?? "-", Boolean(updatable))),
-      updatable ? el("p", { class: "mt-3.5 text-sm" }, "Copy the command below and run it in your terminal.") : null,
-      updatable ? commandBox : null,
-    ],
-    actions: updatable
-      ? [el("a", { class: LINK_PLAIN, href: `${REPO_URL}/releases/tag/v${latest}`, target: "_blank", rel: "noopener" }, "What changed")]
-      : [],
+        versionRow("Latest", busy ? "Checking" : resolved ?? "Unknown", newer)),
+      newer ? el("p", { class: "mt-3.5 text-sm" }, "Copy the command below and run it in your terminal.") : null,
+      newer
+        ? el("div", { class: "mt-2.5 flex flex-wrap items-center gap-2 rounded-r2 border border-orbit bg-deck-2 py-2.5 pe-2.5 ps-4" },
+            el("code", { class: "min-w-0 flex-1 font-mono text-sm [overflow-wrap:anywhere]" }, command),
+            copyButton(() => command, "Copy command", "fill"))
+        : null,
+    ].filter(Boolean));
+
+    actionBox.replaceChildren(...[
+      !resolved && !busy ? button("Check again", { icon: "refresh-cw", onclick: () => check() }) : null,
+      el("a", { class: LINK_PLAIN, href: releaseUrl(resolved), target: "_blank", rel: "noopener" }, "What changed"),
+    ].filter(Boolean));
+  }
+
+  async function check() {
+    if (busy) return;
+    busy = true;
+    paint();
+    const result = await checkForUpdate();
+    busy = false;
+    if (result?.latest) resolved = result.latest;
+    paint();
+  }
+
+  paint();
+  modal({
+    label: "Update mevebu",
+    body: [bodyBox],
+    actions: [actionBox],
+    onOpen: () => {
+      if (!resolved) check();
+    },
   });
 }
 

package/mevebu/app/tailwind.css

@@ -961,6 +961,9 @@
   .py-7 {
     padding-block: calc(var(--spacing) * 7);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-\[3px\] {
     padding-block: 3px;
   }

package/mevebu/libs/js/core.js

@@ -608,7 +608,8 @@ export function switchControl(labelText, attrs = {}) {
 
 /* One button: one height, one padding, three weights. `fill` is the high
    emphasis action and the only button that carries the accent. There is no size
-   modifier, because a tool that needs a smaller button needs fewer buttons. */
+   modifier, because a tool that needs a smaller button needs fewer buttons.
+   `tag: "a"` lets a link wear the same skin, so no tool hand writes the class. */
 const BTN =
   "inline-flex min-h-[var(--ctl)] cursor-pointer items-center justify-center gap-2 rounded-r1 border text-sm font-semibold whitespace-nowrap no-underline transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-45";
 const BTN_KIND = {
@@ -617,10 +618,10 @@ const BTN_KIND = {
   quiet: "border-transparent bg-transparent px-2.5 text-ink-2 hover:bg-deck-2 hover:text-ink",
 };
 
-export function button(labelText, { icon: iconName, kind = "plain", class: extra, ...rest } = {}) {
+export function button(labelText, { icon: iconName, kind = "plain", class: extra, tag = "button", ...rest } = {}) {
   return el(
-    "button",
-    { class: withExtra(`${BTN} ${BTN_KIND[kind] ?? BTN_KIND.plain}`, extra), type: "button", ...rest },
+    tag,
+    { class: withExtra(`${BTN} ${BTN_KIND[kind] ?? BTN_KIND.plain}`, extra), ...(tag === "button" ? { type: "button" } : null), ...rest },
     iconName ? icon(iconName) : null,
     el("span", {}, labelText)
   );
@@ -742,7 +743,7 @@ export function blank(iconName, text) {
 // ---------- version ----------
 
 // Kept in one place. The CLI reads the same value from package.json.
-export const VERSION = "1.4.2";
+export const VERSION = "1.4.4";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 
@@ -757,34 +758,52 @@ export function compareVersions(a, b) {
   return 0;
 }
 
-/**
- * Asks the npm registry for the latest published version. Fails silently when
- * offline, so the app never blocks on the network. Resolves to
- * `{ latest, current, outdated }` or null when the check did not complete.
- */
-export async function checkForUpdate({ timeout = 5000 } = {}) {
+/** One JSON GET with its own timeout. Answers null on any failure. */
+async function getJson(url, timeout) {
   const controller = new AbortController();
   const timer = setTimeout(() => controller.abort(), timeout);
   try {
-    const response = await fetch(`https://registry.npmjs.org/${PACKAGE_NAME}/latest`, {
-      signal: controller.signal,
-      headers: { accept: "application/json" },
-    });
-    clearTimeout(timer);
+    const response = await fetch(url, { signal: controller.signal, headers: { accept: "application/json" } });
     if (!response.ok) return null;
-    const data = await response.json();
-    const latest = data?.version;
-    if (!latest) return null;
-    return { latest, current: VERSION, outdated: compareVersions(latest, VERSION) > 0 };
+    return await response.json();
   } catch {
-    clearTimeout(timer);
     return null;
+  } finally {
+    clearTimeout(timer);
   }
 }
 
+async function npmVersion(timeout) {
+  const data = await getJson(`https://registry.npmjs.org/${PACKAGE_NAME}/latest`, timeout);
+  return data?.version ?? null;
+}
+
+async function githubVersion(timeout) {
+  const data = await getJson(`https://api.github.com/repos/${REPO_SLUG}/releases/latest`, timeout);
+  return (data?.tag_name ?? "").replace(/^v/, "") || null;
+}
+
+/**
+ * Reads the newest published version. npm answers first and the GitHub release
+ * is the fallback, since either one can be unreachable on its own. Resolves to
+ * `{ latest, current, outdated }`, or null when neither answered, so the app
+ * never blocks on the network and the modal can offer a retry.
+ */
+export async function checkForUpdate({ timeout = 5000 } = {}) {
+  const latest = (await npmVersion(timeout)) ?? (await githubVersion(timeout));
+  if (!latest) return null;
+  return { latest, current: VERSION, outdated: compareVersions(latest, VERSION) > 0 };
+}
+
 /** The command that updates an existing global install. */
 export function updateCommand() {
   return `npm install -g ${PACKAGE_NAME}`;
 }
 
+/** The GitHub page listing what changed, for one version or for every release. */
+export function releaseUrl(version) {
+  const base = `https://github.com/${REPO_SLUG}/releases`;
+  return version ? `${base}/tag/v${version}` : base;
+}
+
 export { hasIcon };

package/mevebu/libs/js/registry.js

@@ -403,9 +403,9 @@ export const TOOLS = [
     note: "Make a QR code from text or a link.",
     about: "Download PNG for chat or SVG for print.",
     tutorial: {
-      intro: "Generate a QR code from any text or link, with medium error correction.",
+      intro: "Generate a QR code from any text or link.",
       steps: [
-        "Type or paste your text or link on the left.",
+        "Type or paste your text or link.",
         "Set the size in pixels, between 120 and 1024.",
         "Save PNG for chat or SVG for print. Copy image puts the PNG on the clipboard.",
       ],
@@ -419,13 +419,13 @@ export const TOOLS = [
     name: "QR Scanner",
     icon: "scan-line",
     note: "Read a QR code with your camera or an image.",
-    about: "The camera feed stays in this tab. Nothing is recorded or sent.",
+    about: "Read the text inside a QR code, with the camera or an image file.",
     tutorial: {
-      intro: "Read a QR code with your camera or from an image file. Decoding happens in this tab.",
+      intro: "Point the camera at a code, or drop in an image. The decoded text is ready to copy.",
       steps: [
         "Press Start camera and point it at a code. Allow the camera permission.",
         "Or drop an image on the box, or pick one with Choose an image.",
-        "The decoded text appears below. Copy it, or open the link if it is a URL.",
+        "Copy the decoded text, or open it if it is a link.",
       ],
     },
     keywords: "read decode camera image photo scan",
@@ -443,7 +443,7 @@ export const TOOLS = [
     tutorial: {
       intro: "Type or paste text and read the counts as they change.",
       steps: [
-        "Type or paste your text on the left.",
+        "Type or paste your text.",
         "The counts and the reading time update as you type.",
         "Set a word limit to track how close you are, then Copy summary.",
       ],
@@ -480,7 +480,7 @@ export const TOOLS = [
       intro: "Count the lines in a block of text.",
       steps: [
         "Paste your text.",
-        "Total, filled and blank lines appear on the right.",
+        "Total, filled and blank counts follow as you type.",
       ],
     },
     keywords: "lines blank empty rows count",
@@ -534,7 +534,7 @@ export const TOOLS = [
       steps: [
         "Paste your text, then set the find and replace values.",
         "Toggle Regex to match a pattern, or Ignore case to match either case.",
-        "Press Replace all. The count of replacements is shown.",
+        "Press Replace all to change every match, or Replace one for the first one only.",
       ],
     },
     keywords: "search replace regex substitute text",
@@ -622,7 +622,7 @@ export const TOOLS = [
     tutorial: {
       intro: "Compare two versions of a text.",
       steps: [
-        "Paste the first text on the left and the second on the right.",
+        "Paste the first text and the second text.",
         "Added and removed lines are marked in the result.",
         "Toggle Ignore case or Ignore spaces to soften the comparison.",
       ],
@@ -656,7 +656,7 @@ export const TOOLS = [
     name: "JWT Decoder",
     icon: "signature",
     note: "Read a JWT header and payload.",
-    about: "Decodes in this tab. Decoding is not signature validation.",
+    about: "Reads the header and payload. Decoding is not signature validation.",
     tutorial: {
       intro: "Read the header and payload of a JSON Web Token.",
       steps: [
@@ -678,7 +678,7 @@ export const TOOLS = [
     tutorial: {
       intro: "Format or compact a JSON document.",
       steps: [
-        "Paste JSON on the left.",
+        "Paste JSON.",
         "Pick 2 or 4 spaces, or Compact.",
         "Copy the result. An invalid document shows where parsing stopped.",
       ],
@@ -714,7 +714,7 @@ export const TOOLS = [
       intro: "Compact JSON by removing needless whitespace.",
       steps: [
         "Paste JSON.",
-        "The compacted document and the size saved appear on the right.",
+        "The compacted document and the size saved are shown.",
         "Copy the result.",
       ],
     },

package/mevebu/libs/js/tools/case-inspector.js

@@ -51,7 +51,7 @@ function detectCase(text) {
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 5, value: "helloWorld", "aria-label": "Text", placeholder: "Type or paste text" });
+  const source = textArea({ rows: 5, value: "helloWorld", "aria-label": "Text" });
   const detected = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "No letters");
   const kv = el(
     "div",
@@ -76,7 +76,7 @@ export function mount(slot) {
       const on = row.dataset.case === active;
       if (on) row.dataset.on = "";
       else delete row.dataset.on;
-      row.setAttribute("aria-pressed", String(on));
+      row.setAttribute("aria-current", on ? "true" : "false");
     }
   }
 
@@ -84,7 +84,7 @@ export function mount(slot) {
     const button = el(
       "button",
       {
-        class: "group flex w-full cursor-pointer items-baseline justify-between gap-3 rounded-r1 border border-transparent bg-transparent px-3 py-[9px] text-start transition-colors duration-150 hover:bg-deck-2 data-[on]:border-jade data-[on]:bg-jade-soft", type: "button", dataset: { case: name }, "aria-pressed": "false",
+        class: "group flex w-full cursor-pointer items-baseline justify-between gap-3 rounded-r1 border border-transparent bg-transparent px-3 py-[9px] text-start transition-colors duration-150 hover:bg-deck-2 data-[on]:border-jade data-[on]:bg-jade-soft", type: "button", dataset: { case: name }, "aria-current": "false",
         onclick: async () => {
           const value = button.querySelector("[data-value]").textContent.trim();
           if (value) toast((await copyText(value)) ? "Copied" : "Copy failed");

package/mevebu/libs/js/tools/character-counter.js

@@ -12,8 +12,10 @@ function tile(label) {
   return node;
 }
 
+const plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+
 export function mount(slot) {
-  const source = textArea({ rows: 10, "aria-label": "Text", placeholder: "Type or paste text" });
+  const source = textArea({ rows: 10, "aria-label": "Text" });
   const limitField = numberInput({ min: "0", placeholder: "No limit", "aria-label": "Character limit" });
 
   const totalTile = tile("Characters");
@@ -29,9 +31,9 @@ export function mount(slot) {
 
   function summary() {
     return [
-      `${counts.total} characters`,
-      `${counts.noSpace} without spaces`,
-      `${counts.words} words`].join("\n");
+      plural(counts.total, "character"),
+      plural(counts.noSpace, "character") + " without spaces",
+      plural(counts.words, "word")].join("\n");
   }
 
   function run() {
@@ -45,11 +47,13 @@ export function mount(slot) {
     wordsTile.set(String(counts.words));
 
     const limit = parseInt(limitField.value, 10) || 0;
+    // The track is only worth showing once a limit exists to fill it.
+    meter.hidden = limit <= 0;
     if (limit > 0) {
       const ratio = counts.total / limit;
       fill.style.width = `${Math.min(100, ratio * 100)}%`;
       fill.dataset.level = ratio > 1 ? "weak" : ratio > 0.8 ? "ok" : "strong";
-      limitNote.write(ratio > 1 ? `${counts.total - limit} over the limit.` : `${limit - counts.total} characters left.`);
+      limitNote.write(ratio > 1 ? `${counts.total - limit} over the limit.` : `${plural(limit - counts.total, "character")} left.`);
     } else {
       fill.style.width = "0%";
       delete fill.dataset.level;

package/mevebu/libs/js/tools/find-replace.js

@@ -1,16 +1,16 @@
 // Find and replace, plain text or a regular expression, with a live match count.
-import { bench, stack, panel, textArea, textInput, toggleRow, notice, button, copyButton, actions, toolcard } from "../core.js";
+import { bench, stack, panel, textArea, textInput, output, toggleRow, notice, button, copyButton, actions, toolcard } from "../core.js";
 
 const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
 export function mount(slot) {
-  const source = textArea({ rows: 9, "aria-label": "Text", placeholder: "Paste your text" });
-  const findField = textInput({ placeholder: "Find", "aria-label": "Find" });
-  const replaceField = textInput({ placeholder: "Replace with", "aria-label": "Replace with" });
+  const source = textArea({ rows: 9, "aria-label": "Text" });
+  const findField = textInput({ "aria-label": "Find" });
+  const replaceField = textInput({ "aria-label": "Replace with" });
   const options = toggleRow([
     { value: "regex", label: "Regex", checked: false },
     { value: "ignore", label: "Ignore case", checked: false }]);
-  const result = textArea({ rows: 9, readonly: true, "aria-label": "Result" });
+  const result = output({ tag: "textarea", rows: 9 });
   const error = notice("error");
   const countNote = notice("note");
 
@@ -41,15 +41,21 @@ export function mount(slot) {
       return;
     }
     const matches = source.value.match(pattern) || [];
-    result.value = source.value.replace(pattern, replaceField.value);
+    result.value = source.value.replace(pattern, replacement());
     countNote.write(matches.length === 1 ? "1 match." : `${matches.length} matches.`);
   }
 
+  // With Regex off the field is literal text, so a dollar sign in it stays one
+  // instead of reading as $& or $$.
+  function replacement() {
+    return options.values().includes("regex") ? replaceField.value : replaceField.value.replace(/\$/g, "$$$$");
+  }
+
   function replaceOne() {
     const pattern = build(false);
     if (pattern === "error") return;
     if (!pattern) return;
-    source.value = source.value.replace(pattern, replaceField.value);
+    source.value = source.value.replace(pattern, replacement());
     run();
   }
 
@@ -57,7 +63,7 @@ export function mount(slot) {
     const pattern = build(true);
     if (pattern === "error") return;
     if (!pattern) return;
-    source.value = source.value.replace(pattern, replaceField.value);
+    source.value = source.value.replace(pattern, replacement());
     run();
   }
 

package/mevebu/libs/js/tools/json-formatter.js

@@ -1,13 +1,12 @@
 // Pretty-prints or compacts JSON and points at the error when it is invalid.
-import { bench, stack, panel, textArea, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+import { bench, stack, panel, textArea, output, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
 
 export function mount(slot) {
   const source = textArea({
     rows: 12,
     "aria-label": "JSON",
-    placeholder: "Paste JSON",
     value: '{"hello":"world","count":3,"items":[1,2,3]}'});
-  const result = textArea({ rows: 12, readonly: true, "aria-label": "Result" });
+  const result = output({ tag: "textarea", rows: 12 });
   const error = notice("error");
   let indent = "2";
 

package/mevebu/libs/js/tools/json-minifier.js

@@ -1,5 +1,5 @@
 // Compacts valid JSON and reports the size saved.
-import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+import { el, bench, stack, panel, textArea, output, notice, copyButton, actions, toolcard } from "../core.js";
 
 const bytes = (text) => new TextEncoder().encode(text).length;
 
@@ -10,9 +10,8 @@ export function mount(slot) {
   const source = textArea({
     rows: 12,
     "aria-label": "JSON",
-    placeholder: "Paste JSON",
     value: '{\n  "hello": "world",\n  "count": 3\n}'});
-  const result = textArea({ rows: 12, readonly: true, "aria-label": "Minified JSON" });
+  const result = output({ tag: "textarea", rows: 12 });
   const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
   const error = notice("error");
 

package/mevebu/libs/js/tools/json-to-typescript.js

@@ -56,7 +56,6 @@ export function mount(slot) {
   const source = textArea({
     rows: 12,
     "aria-label": "JSON",
-    placeholder: "Paste a JSON object or array",
     value: '{\n  "id": 1,\n  "name": "Ada",\n  "tags": ["dev"],\n  "address": { "city": "London" }\n}'});
   const nameInput = textInput({ value: "Root", "aria-label": "Root type name" });
   const result = output({ rows: 16 });

package/mevebu/libs/js/tools/json-validator.js

@@ -12,7 +12,7 @@ function describe(data) {
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 12, "aria-label": "JSON", placeholder: "Paste JSON" });
+  const source = textArea({ rows: 12, "aria-label": "JSON" });
   const report = output({ rows: 4 });
   const error = notice("error");
 

package/mevebu/libs/js/tools/jwt-decoder.js

@@ -12,7 +12,7 @@ function decodeSegment(segment) {
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 4, "aria-label": "Token", placeholder: "Paste a JWT" });
+  const source = textArea({ rows: 4, "aria-label": "Token" });
   const headerOut = output({ rows: 4 });
   const payloadOut = output({ rows: 8 });
   const claims = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });

package/mevebu/libs/js/tools/line-counter.js

@@ -8,6 +8,8 @@ function tile(label) {
   return node;
 }
 
+const plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+
 export function mount(slot) {
   const source = textArea({ rows: 14, "aria-label": "Text", placeholder: "Paste text, one entry per line" });
 
@@ -20,7 +22,7 @@ export function mount(slot) {
 
   function summary() {
     return [
-      `${counts.total} total lines`,
+      `${plural(counts.total, "line")} total`,
       `${counts.filled} filled`,
       `${counts.blank} blank`].join("\n");
   }

package/mevebu/libs/js/tools/prefix-suffix.js

@@ -1,12 +1,12 @@
 // Adds a prefix, a suffix, or automatic numbering to every line.
-import { bench, stack, panel, textArea, textInput, checkbox, copyButton, actions, toolcard } from "../core.js";
+import { bench, stack, panel, textArea, textInput, output, checkbox, copyButton, actions, toolcard } from "../core.js";
 
 export function mount(slot) {
   const source = textArea({ rows: 11, "aria-label": "Text", placeholder: "Paste your list, one entry per line" });
-  const prefixField = textInput({ placeholder: "Prefix", "aria-label": "Prefix" });
-  const suffixField = textInput({ placeholder: "Suffix", "aria-label": "Suffix" });
+  const prefixField = textInput({ "aria-label": "Prefix" });
+  const suffixField = textInput({ "aria-label": "Suffix" });
   const numbering = checkbox("Numbering", { checked: false });
-  const result = textArea({ rows: 11, readonly: true, "aria-label": "Result" });
+  const result = output({ tag: "textarea", rows: 11 });
 
   function run() {
     const text = source.value;

package/mevebu/libs/js/tools/qr-generator.js

@@ -1,10 +1,10 @@
 // A QR code from text or a link. PNG for chat, SVG for print. The quiet zone
 // and the size cap keep the code scannable at any setting.
-import { el, toast, download, bench, stack, panel, textArea, numberInput, notice, button, actions, toolcard } from "../core.js";
+import { el, toast, download, downloadButton, bench, stack, panel, textArea, numberInput, notice, button, actions, toolcard } from "../core.js";
 import qrcode from "../vendor/qrcode-generator.mjs";
 
 export function mount(slot) {
-  const content = textArea({ rows: 4, value: "https://mevebu.app", "aria-label": "Text or link", placeholder: "Text or link" });
+  const content = textArea({ rows: 4, "aria-label": "Text or link" });
   const sizeField = numberInput({ value: "256", min: "120", max: "1024", step: "8", "aria-label": "Size in pixels" });
   const canvas = el("canvas", { class: "h-auto w-[min(300px,100%)] [image-rendering:pixelated]", role: "img", "aria-label": "QR code" });
   const reading = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
@@ -46,7 +46,7 @@ export function mount(slot) {
         }
       }
       svg = typeof code.createSVGTag === "function" ? code.createSVGTag(cell, false) : "";
-      reading.textContent = `${modules} by ${modules} modules, medium error correction.`;
+      reading.textContent = "";
     } catch (caught) {
       error.write(caught?.message || "That text is too long for a QR code.");
     }
@@ -59,18 +59,20 @@ export function mount(slot) {
     render();
   });
 
+  // An empty field leaves a zero sized canvas, so a save would write an empty
+  // file and a copy would put nothing on the clipboard.
+  const noCode = () => !content.value.trim();
+
   const pngButton = button("Save PNG", { icon: "download", kind: "fill" });
-  const svgButton = button("Save SVG", { icon: "download" });
+  const svgButton = downloadButton(() => svg, "qr.svg", "Save SVG", "image/svg+xml");
   const copyButton = button("Copy image", { icon: "copy" });
 
   pngButton.addEventListener("click", () => {
+    if (noCode()) return toast("Nothing to save yet");
     canvas.toBlob((blob) => blob && download("qr.png", blob, "image/png"));
   });
-  svgButton.addEventListener("click", () => {
-    if (!svg) return toast("Type something first");
-    download("qr.svg", svg, "image/svg+xml");
-  });
   copyButton.addEventListener("click", () => {
+    if (noCode()) return toast("Nothing to copy yet");
     canvas.toBlob(async (blob) => {
       try {
         await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);

package/mevebu/libs/js/tools/qr-scanner.js

@@ -1,7 +1,7 @@
 // Reads a QR code from the camera or from an image file. The decoder loads
 // once and stays in memory. The camera stops when the page changes or a code
 // is found. Nothing leaves the tab at any point.
-import { el, icon, toast, copyText, bench, stack, panel, notice, button, output, actions, toolcard } from "../core.js";
+import { el, icon, toast, bench, stack, panel, notice, button, copyButton, output, actions, toolcard } from "../core.js";
 
 // jsQR ships as a UMD bundle, so it has to load as a classic script and be read
 // off the window. Importing it as a module yields an empty namespace.
@@ -32,9 +32,9 @@ export function mount(slot) {
   const paint = scratch.getContext("2d", { willReadFrequently: true });
 
   const startButton = button("Start camera", { icon: "camera", kind: "fill" });
-  const stopButton = el("button", { class: "inline-flex min-h-[var(--ctl)] cursor-pointer items-center justify-center gap-2 rounded-r1 border px-4 text-sm font-semibold whitespace-nowrap no-underline transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-45 border-orbit bg-deck text-ink hover:border-orbit-hard hover:bg-deck-2", type: "button", hidden: true }, icon("video-off"), el("span", {}, "Stop"));
+  const stopButton = button("Stop", { icon: "video-off" });
+  stopButton.hidden = true;
   const uploadButton = button("Choose an image", { icon: "upload" });
-  const copyButton = button("Copy", { icon: "copy" });
   const openWrap = el("span", { class: "flex min-w-0 flex-wrap items-center gap-2" });
 
   const drop = el(
@@ -50,8 +50,7 @@ export function mount(slot) {
     error.write("");
     openWrap.replaceChildren();
     if (/^https?:\/\//i.test(text.trim())) {
-      openWrap.append(el("a", { class: "inline-flex min-h-[var(--ctl)] cursor-pointer items-center justify-center gap-2 rounded-r1 border px-4 text-sm font-semibold whitespace-nowrap no-underline transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-45 border-orbit bg-deck text-ink hover:border-orbit-hard hover:bg-deck-2", href: text.trim(), target: "_blank", rel: "noopener" },
-        icon("external-link"), el("span", {}, "Open link")));
+      openWrap.append(button("Open link", { tag: "a", href: text.trim(), target: "_blank", rel: "noopener", icon: "external-link" }));
     }
     toast("Found");
   }
@@ -74,8 +73,15 @@ export function mount(slot) {
   async function tick() {
     if (!live) return;
     if (video.readyState === video.HAVE_ENOUGH_DATA && video.videoWidth) {
-      const hit = await scan(video.videoWidth, video.videoHeight, () =>
-        paint.drawImage(video, 0, 0, video.videoWidth, video.videoHeight));
+      let hit = false;
+      try {
+        hit = await scan(video.videoWidth, video.videoHeight, () =>
+          paint.drawImage(video, 0, 0, video.videoWidth, video.videoHeight));
+      } catch {
+        stop();
+        error.write("The decoder did not load. Try again, or read an image instead.");
+        return;
+      }
       if (hit) {
         stop();
         return;
@@ -167,11 +173,6 @@ export function mount(slot) {
     delete drop.dataset.drag;
     if (event.dataTransfer.files[0]) scanFile(event.dataTransfer.files[0]);
   });
-  copyButton.addEventListener("click", async () => {
-    if (!found.textContent) return toast("Nothing to copy yet");
-    toast((await copyText(found.textContent)) ? "Copied" : "Copy failed");
-  });
-
   status.textContent = "Camera off.";
 
   const card = toolcard({
@@ -180,7 +181,7 @@ export function mount(slot) {
       stack(video, drop, fileField, status, error),
       panel("Decoded", found)
     ),
-    foot: actions(openWrap, copyButton)});
+    foot: actions(openWrap, copyButton(() => found.textContent, "Copy"))});
   slot.append(card.node);
 
   return { unmount: stop };

package/mevebu/libs/js/tools/regex-tester.js

@@ -10,7 +10,7 @@ export function mount(slot) {
     rows: 8,
     "aria-label": "Text to test",
     value: "Contact ada@example.com or grace@navy.com for details."});
-  const pane = el("div", { class: "min-h-[120px] max-h-[380px] overflow-auto wrap-anywhere rounded-r1 border border-orbit bg-deck-2 px-4 py-3.5 leading-normal [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_h1]:my-4 [&_h2]:my-4 [&_h3]:my-4 [&_h1]:tracking-[-0.01em] [&_h2]:tracking-[-0.01em] [&_h3]:tracking-[-0.01em] [&_p]:mb-2.5 [&_ul]:mb-2.5 [&_ol]:mb-2.5 [&_pre]:mb-2.5 [&_ul]:ps-[22px] [&_ol]:ps-[22px] [&_code]:rounded-[5px] [&_code]:bg-deck [&_code]:px-[5px] [&_code]:py-px [&_code]:font-mono [&_code]:text-2xs [&_pre]:overflow-auto [&_pre]:rounded-r1 [&_pre]:bg-deck [&_pre]:px-3 [&_pre]:py-2.5 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_a]:text-jade [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-[9px] [&_td]:px-[9px] [&_th]:py-1.5 [&_td]:py-1.5" });
+  const pane = el("div", { class: "min-h-[120px] max-h-[380px] overflow-auto wrap-anywhere rounded-r1 border border-orbit bg-deck-2 px-4 py-3.5 leading-normal" });
   const listWrap = el("div", { class: "max-h-80 overflow-auto" });
   const error = notice("error");
   let lines = [];

package/mevebu/libs/js/tools/remove-duplicate-lines.js

@@ -1,10 +1,10 @@
 // Drops repeated lines and keeps the first time each one appears.
-import { bench, stack, panel, textArea, checkbox, notice, copyButton, actions, toolcard } from "../core.js";
+import { bench, stack, panel, textArea, output, checkbox, notice, copyButton, actions, toolcard } from "../core.js";
 
 export function mount(slot) {
   const source = textArea({ rows: 12, "aria-label": "Text", placeholder: "Paste your list, one entry per line" });
   const ignoreCase = checkbox("Ignore case", { checked: false });
-  const result = textArea({ rows: 12, readonly: true, "aria-label": "Result" });
+  const result = output({ tag: "textarea", rows: 12 });
   const note = notice("note");
 
   function run() {
@@ -24,7 +24,7 @@ export function mount(slot) {
       else { seen.add(key); kept.push(line); }
     }
     result.value = kept.join("\n");
-    note.write(removed ? `${removed} lines removed.` : "No duplicate lines found.");
+    note.write(removed ? `${removed} line${removed === 1 ? "" : "s"} removed.` : "No duplicate lines found.");
   }
 
   source.addEventListener("input", run);

package/mevebu/libs/js/tools/remove-extra-spaces.js

@@ -1,10 +1,10 @@
 // Tidies spacing in pasted text: collapses runs of spaces, trims each line and
 // optionally drops blank lines.
-import { bench, stack, panel, textArea, toggleRow, copyButton, actions, toolcard } from "../core.js";
+import { bench, stack, panel, textArea, output, toggleRow, copyButton, actions, toolcard } from "../core.js";
 
 export function mount(slot) {
-  const source = textArea({ rows: 12, "aria-label": "Text", placeholder: "Paste your text" });
-  const result = textArea({ rows: 12, readonly: true, "aria-label": "Result" });
+  const source = textArea({ rows: 12, "aria-label": "Text" });
+  const result = output({ tag: "textarea", rows: 12 });
   const options = toggleRow([
     { value: "collapse", label: "Collapse spaces", checked: true },
     { value: "trim", label: "Trim lines", checked: true },

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

@@ -13,7 +13,7 @@ function slugify(text, sep) {
 }
 
 export function mount(slot) {
-  const source = textInput({ value: "Hello mevebu world", placeholder: "Title", "aria-label": "Title" });
+  const source = textInput({ value: "Hello mevebu world", "aria-label": "Title" });
   const result = textInput({ readonly: true, mono: true, "aria-label": "Slug" });
 
   let sep = "-";

package/mevebu/libs/js/tools/sort-lines.js

@@ -1,9 +1,9 @@
 // Sorts a list of lines alphabetically or numerically, either direction.
-import { bench, stack, panel, textArea, chipRow, toggleRow, copyButton, actions, toolcard } from "../core.js";
+import { bench, stack, panel, textArea, output, chipRow, toggleRow, copyButton, actions, toolcard } from "../core.js";
 
 export function mount(slot) {
   const source = textArea({ rows: 12, "aria-label": "Text", placeholder: "Paste your list, one entry per line" });
-  const result = textArea({ rows: 12, readonly: true, "aria-label": "Result" });
+  const result = output({ tag: "textarea", rows: 12 });
 
   let direction = "asc";
   const dirChips = chipRow(
@@ -39,7 +39,7 @@ export function mount(slot) {
 
   const card = toolcard({
     body: bench(
-      stack(panel("Direction", dirChips), options),
+      stack(panel("Text", source), panel("Direction", dirChips), options),
       stack(panel("Result", result))
     ),
     foot: actions(copyButton(() => result.value, "Copy result", "fill"))});

package/mevebu/libs/js/tools/text-diff.js

@@ -4,8 +4,8 @@ import { el, bench, stack, panel, textArea, toggleRow, notice, button, copyButto
 const MAX_LINES = 800;
 
 export function mount(slot) {
-  const left = textArea({ rows: 9, "aria-label": "First text", placeholder: "First text" });
-  const right = textArea({ rows: 9, "aria-label": "Second text", placeholder: "Second text" });
+  const left = textArea({ rows: 9, "aria-label": "First text" });
+  const right = textArea({ rows: 9, "aria-label": "Second text" });
   const options = toggleRow([
     { value: "ignore", label: "Ignore case", checked: false },
     { value: "spaces", label: "Ignore spaces", checked: false }]);
@@ -52,9 +52,10 @@ export function mount(slot) {
     const aRaw = left.value === "" ? [] : left.value.split("\n");
     const bRaw = right.value === "" ? [] : right.value.split("\n");
     if (!aRaw.length && !bRaw.length) {
-      diffBox.replaceChildren();
+      // The result area explains itself while there is nothing to compare.
+      diffBox.replaceChildren(el("div", { class: "bg-deck-2 px-4 py-8 text-center text-sm text-ink-3" }, "Paste two texts to compare."));
       rows = [];
-      note.write("Paste two texts to compare.");
+      note.write("");
       return;
     }
     const truncated = aRaw.length > MAX_LINES || bRaw.length > MAX_LINES;

package/mevebu/libs/js/tools/text-reverser.js

@@ -1,6 +1,6 @@
 // Reverses text by character, word or line. Character mode keeps emoji and
 // accented letters whole when the browser exposes grapheme segmentation.
-import { bench, stack, panel, textArea, chipRow, copyButton, actions, toolcard } from "../core.js";
+import { bench, stack, panel, textArea, output, chipRow, copyButton, actions, toolcard } from "../core.js";
 
 function reverseChars(text) {
   if (typeof Intl !== "undefined" && Intl.Segmenter) {
@@ -14,8 +14,8 @@ const reverseWords = (text) => text.trim() ? text.trim().split(/\s+/).reverse().
 const reverseLines = (text) => text ? text.split("\n").reverse().join("\n") : "";
 
 export function mount(slot) {
-  const source = textArea({ rows: 10, "aria-label": "Text", placeholder: "Type or paste text" });
-  const result = textArea({ rows: 10, readonly: true, "aria-label": "Result" });
+  const source = textArea({ rows: 10, "aria-label": "Text" });
+  const result = output({ tag: "textarea", rows: 10 });
 
   let mode = "chars";
   const chips = chipRow(

package/mevebu/libs/js/tools/word-counter.js

@@ -15,8 +15,10 @@ const countSentences = (text) => text.trim()
   ? text.trim().split(/[.!?\u2026]+/).filter((part) => part.trim()).length
   : 0;
 
+const plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+
 export function mount(slot) {
-  const source = textArea({ rows: 10, "aria-label": "Text", placeholder: "Type or paste text" });
+  const source = textArea({ rows: 10, "aria-label": "Text" });
   const limitField = numberInput({ min: "0", placeholder: "No limit", "aria-label": "Word limit" });
 
   const wordsTile = tile("Words");
@@ -34,10 +36,10 @@ export function mount(slot) {
 
   function summary() {
     return [
-      `${counts.words} words`,
-      `${counts.chars} characters`,
-      `${counts.sentences} sentences`,
-      `${counts.lines} lines`].join("\n");
+      plural(counts.words, "word"),
+      plural(counts.chars, "character"),
+      plural(counts.sentences, "sentence"),
+      plural(counts.lines, "line")].join("\n");
   }
 
   function run() {
@@ -55,11 +57,13 @@ export function mount(slot) {
     readingTile.set(counts.words ? `${Math.max(1, Math.round(counts.words / WPM))} min` : "0 min");
 
     const limit = parseInt(limitField.value, 10) || 0;
+    // The track is only worth showing once a limit exists to fill it.
+    meter.hidden = limit <= 0;
     if (limit > 0) {
       const ratio = words / limit;
       fill.style.width = `${Math.min(100, ratio * 100)}%`;
       fill.dataset.level = ratio > 1 ? "weak" : ratio > 0.8 ? "ok" : "strong";
-      limitNote.write(ratio > 1 ? `${words - limit} over the limit.` : `${limit - words} words left.`);
+      limitNote.write(ratio > 1 ? `${words - limit} over the limit.` : `${plural(limit - words, "word")} left.`);
     } else {
       fill.style.width = "0%";
       delete fill.dataset.level;

package/package.json

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