mevebu 1.4.1 → 1.4.3

package/mevebu/app/mevebu.js

@@ -130,7 +130,7 @@ function masthead() {
     el(
       "div",
       { class: "mx-[var(--margin)] flex h-[var(--bar)] items-center gap-[clamp(14px,3vw,32px)]" },
-      el("a", { class: "inline-flex flex-none items-center gap-2.5 text-lg font-bold tracking-[-0.01em] text-ink no-underline", href: "#/" },
+      el("a", { class: "inline-flex min-h-11 flex-none items-center gap-2.5 text-lg font-bold tracking-[-0.01em] text-ink no-underline", href: "#/" },
         el("img", { class: "block size-[30px] rounded-[9px] shadow-[0_0_0_1px_var(--orbit)]", src: "./icon.png", alt: "", width: "30", height: "30" }), "mevebu"),
       nav,
       el("div", { class: "flex items-center gap-0.5 max-[45rem]:ms-auto" }, searchButton(), themeBtn, menuBtn)
@@ -259,7 +259,9 @@ function footer() {
     },
   });
 
-  const FOOT_LINK = "text-sm text-ink-2 no-underline hover:text-jade";
+  // 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";
   const group = (title, links) =>
     el(
       "div",
@@ -280,7 +282,7 @@ function footer() {
         el(
           "div",
           { class: "grid gap-1.5" },
-          el("a", { class: "inline-flex items-center gap-[9px] text-md font-bold tracking-[-0.01em] text-ink no-underline", href: "#/" },
+          el("a", { class: "inline-flex min-h-11 items-center gap-[9px] text-md font-bold tracking-[-0.01em] text-ink no-underline", href: "#/" },
             el("img", { class: "block size-[34px] rounded-[11px] shadow-[0_0_0_1px_var(--orbit)]", src: "./icon.png", alt: "", width: "34", height: "34" }), "mevebu"),
           el("p", { class: "m-0 max-w-[30ch] text-sm leading-[1.5] text-ink-3" }, "Small tools that run in your browser. No accounts, no uploads, no tracking.")
         ),
@@ -315,7 +317,7 @@ function footer() {
           { class: "m-0 flex items-center gap-2" },
           el("button", {
             class:
-              "inline-flex min-h-7 cursor-pointer items-center gap-1.5 rounded-full border border-orbit bg-transparent px-2.5 py-[3px] font-sans text-2xs tabular-nums text-ink-3 transition-colors duration-150 hover:border-orbit-hard hover:text-ink data-[new]:border-jade data-[new]:bg-jade-soft data-[new]:font-semibold data-[new]:text-jade data-[new]:hover:bg-jade data-[new]:hover:text-on-jade",
+              "inline-flex min-h-7 cursor-pointer items-center gap-1.5 rounded-full border border-orbit bg-transparent px-2.5 py-[3px] font-sans text-2xs tabular-nums text-ink-3 transition-colors duration-150 hover:border-orbit-hard hover:text-ink data-[new]:border-jade data-[new]:bg-jade-soft data-[new]:font-semibold data-[new]:text-jade data-[new]:hover:bg-jade data-[new]:hover:text-on-jade max-[45rem]:min-h-11",
             id: "version",
             type: "button",
             title: "Check for updates",

package/mevebu/app/tailwind.css

@@ -1558,6 +1558,9 @@
     .max-\[45rem\]\:inline-flex {
       display: inline-flex;
     }
+    .max-\[45rem\]\:min-h-11 {
+      min-height: calc(var(--spacing) * 11);
+    }
     .max-\[45rem\]\:\[grid-template-columns\:minmax\(0\,1fr\)_62px\] {
       grid-template-columns: minmax(0,1fr) 62px;
     }

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

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",

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/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/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/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/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-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.1",
+  "version": "1.4.3",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",