mevebu 1.4.3 → 1.5.0

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";
@@ -38,7 +38,9 @@ const GRID = "grid grid-cols-1 gap-[var(--gutter)] sm:grid-cols-2 lg:grid-cols-3
 const SECTION = "pt-[clamp(32px,5vw,60px)]";
 const SECTION_HEAD = "mb-4 flex items-baseline gap-3";
 const SECTION_TITLE = "flex items-center gap-2.5 text-lg font-bold tracking-[-0.02em]";
-const SECTION_MORE = "ms-auto text-sm font-semibold text-jade no-underline hover:underline";
+/* The padding grows the target to a finger while the negative margin cancels
+   the height, so a section head keeps its baseline alignment on a phone. */
+const SECTION_MORE = "ms-auto -my-3 inline-flex items-center py-3 text-sm font-semibold text-jade no-underline hover:underline";
 const SECTION_COUNT = "ms-1.5 rounded-full bg-deck-2 px-2 py-px text-2xs font-semibold text-ink-3";
 const LEAD = "mt-[clamp(28px,5vw,56px)] mb-0 max-w-[20ch] text-balance text-lead font-bold tracking-[-0.025em]";
 const LEDE = "mt-3 mb-0 max-w-[60ch] text-pretty text-md text-ink-2";
@@ -174,17 +176,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 +197,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();
+    },
   });
 }
 
@@ -450,62 +488,122 @@ function wireFilter(root, meta) {
 
 // ---------- pages ----------
 
+/* Home furniture. The tiles are shorter than a tool card on purpose: a category
+   is a way in, not a destination, so it gets one line and its count. */
+const FAVORITE_CARDS = 6;
+const RANDOM_CARDS = 9;
+const TILE =
+  "flex items-center gap-3 rounded-r2 border border-orbit bg-deck px-4 py-3.5 no-underline transition-colors duration-150 hover:border-jade";
+const COUNT_PILL = "flex-none rounded-full bg-deck-2 px-2.5 py-1 text-2xs font-semibold text-ink-3";
+const REDIRECT_CARD =
+  "relative grid content-center justify-items-center gap-1.5 rounded-r2 border border-orbit bg-deck p-5 text-center no-underline transition-colors duration-150 hover:border-jade";
+
+function homeSection(title, iconName, aside, body) {
+  return el(
+    "section",
+    { class: SECTION },
+    el(
+      "div",
+      { class: SECTION_HEAD },
+      el("h2", { class: SECTION_TITLE }, icon(iconName, "size-[22px] flex-none text-jade"), title),
+      aside
+    ),
+    body
+  );
+}
+
+const homeMore = (href, label) => el("a", { class: SECTION_MORE, href }, label);
+
+function categoryTile(category) {
+  return el(
+    "a",
+    { class: TILE, href: `#/${category.id}` },
+    el("span", { class: "grid size-[38px] flex-none place-items-center rounded-[12px] bg-jade-soft text-jade [&_svg]:size-[19px]" }, icon(category.icon)),
+    el("span", { class: "min-w-0 flex-1 truncate text-md font-semibold tracking-[-0.01em]" }, category.name),
+    el("span", { class: COUNT_PILL }, toolsInCategory(category.id).length)
+  );
+}
+
+/* The favourites row is a shortcut, so it earns a shorter sentence than the
+   empty favourites page: the reader sees why it is empty and where to go. */
+function favoritesEmpty() {
+  return el(
+    "div",
+    { class: "flex flex-wrap items-center gap-x-4 gap-y-3 rounded-r2 border border-dashed border-orbit-hard bg-deck p-6" },
+    el("span", { class: "grid size-[42px] flex-none place-items-center rounded-[13px] bg-jade-soft text-jade [&_svg]:size-[21px]" }, icon("star")),
+    el("p", { class: "m-0 max-w-[54ch] text-pretty text-md text-ink-2" },
+      "Nothing saved yet. Tap the star on any tool and it lands on this row, so it stays one click away."),
+    el("a", { class: `${LINK_PLAIN} ms-auto`, href: "#/tools" }, "Browse tools")
+  );
+}
+
+function favoritesRest(rest) {
+  return el(
+    "a",
+    { class: REDIRECT_CARD, href: "#/favorites" },
+    el("span", { class: "grid size-[42px] place-items-center rounded-[13px] bg-jade-soft text-jade [&_svg]:size-[21px]" }, icon("star")),
+    el("span", { class: "text-md font-semibold tracking-[-0.01em]" }, rest > 0 ? `${rest} more` : "See all"),
+    el("span", { class: "text-sm text-ink-2" }, "Open your favorites")
+  );
+}
+
 function homePage() {
   const hero = el(
     "section",
     { class: "relative overflow-hidden border-b border-orbit" },
     el(
       "div",
-      { class: "mx-[var(--margin)] grid items-center gap-[clamp(24px,5vw,48px)] py-[clamp(36px,7vw,68px)] min-[60rem]:grid-cols-[minmax(0,1fr)_auto]" },
+      { class: "mx-[var(--margin)] grid items-center gap-[clamp(32px,5vw,64px)] py-[clamp(44px,8vw,88px)] min-[60rem]:grid-cols-[minmax(0,1fr)_auto]" },
       el(
         "div",
         {},
-        el("h1", { class: "max-w-[20ch] text-balance text-hero font-bold tracking-[-0.03em]" }, "Small tools, one page each."),
+        el("h1", { class: "max-w-[18ch] text-balance text-hero font-bold tracking-[-0.035em]" }, "Small tools, one page each."),
+        el("p", { class: "mt-5 mb-0 max-w-[48ch] text-pretty text-md text-ink-2" },
+          `${TOOLS.length} tools across ${CATEGORIES.length} categories, and every one of them runs in your browser.`),
         el(
           "div",
-          { class: "mt-[clamp(22px,3vw,30px)] flex flex-wrap gap-2.5" },
+          { class: "mt-[clamp(26px,3.5vw,36px)] flex flex-wrap items-center gap-2.5" },
           button("Search tools", { icon: "search", kind: "fill", onclick: () => openPalette() }),
           el("a", { class: LINK_PLAIN, href: "#/tools" }, icon("shuffle"), el("span", {}, "Browse all"))
         )
       ),
-      el("div", { class: "grid place-items-center rounded-[28px] border border-orbit bg-deck-2 p-6 max-[60rem]:hidden" },
-        el("img", { class: "block size-[220px]", src: "./icon.png", alt: "", width: "220", height: "220" }))
+      el("div", { class: "grid place-items-center rounded-[28px] border border-orbit bg-deck p-7 max-[60rem]:hidden" },
+        el("img", { class: "block size-[248px]", src: "./icon.png", alt: "", width: "248", height: "248" }))
     )
   );
 
-  const popular = [
-    "password-generator", "qr-generator", "spin-wheel",
-    "uuid-generator", "base64", "name-picker",
-  ].map((id) => TOOLS.find((tool) => tool.id === id)).filter(Boolean);
+  const favorites = getFavorites();
+  const saved = TOOLS.filter((tool) => favorites.has(tool.id));
+  const shown = saved.slice(0, FAVORITE_CARDS - 1);
+  const rest = saved.length - shown.length;
+
+  // Nine picks, reshuffled on demand: the point is to meet a tool you did not
+  // know was there, so the order is drawn fresh every visit.
+  const randomGrid = el("div", { class: GRID });
+  const fillRandom = () => randomGrid.replaceChildren(...shuffle(TOOLS).slice(0, RANDOM_CARDS).map(toolCard));
+  fillRandom();
 
-  const section = (title, iconName, more, tools, group) =>
+  document.title = "mevebu · small tools that run in your browser";
+  return el(
+    "div",
+    {},
+    hero,
     el(
-      "section",
-      { class: "pt-[clamp(32px,5vw,60px)]", dataset: { group } },
-      el(
-        "div",
-        { class: "mb-4 flex items-baseline gap-3" },
-        el("h2", { class: "flex items-center gap-2.5 text-lg font-bold tracking-[-0.02em]" }, icon(iconName, "size-[22px] flex-none text-jade"), title),
-        more
-      ),
-      el("div", { class: "grid grid-cols-1 gap-[var(--gutter)] sm:grid-cols-2 lg:grid-cols-3" }, ...tools.map(toolCard))
-    );
-
-  const grid = el("div", { class: "px-[var(--margin)]" },
-    section("Popular", "star", el("a", { class: "ms-auto text-sm font-semibold text-jade no-underline hover:underline", href: "#/tools" }, "All tools"), popular, "popular"),
-    ...CATEGORIES.slice(0, 4).map((category) =>
-      section(
-        category.name,
-        category.icon,
-        el("a", { class: "ms-auto text-sm font-semibold text-jade no-underline hover:underline", href: `#/${category.id}` }, `Open ${category.name.toLowerCase()}`),
-        toolsInCategory(category.id).slice(0, 3),
-        category.id
-      )
+      "div",
+      { class: `pb-[var(--margin)] ${PAGE}` },
+      homeSection("Your favorites", "star", saved.length ? homeMore("#/favorites", "See all") : null,
+        saved.length
+          ? el("div", { class: GRID }, ...shown.map(toolCard), favoritesRest(rest))
+          : favoritesEmpty()),
+      homeSection("Categories", "layout-grid", homeMore("#/categories", "All categories"),
+        el("div", { class: GRID }, ...CATEGORIES.map(categoryTile))),
+      homeSection("Random picks", "shuffle",
+        el("button", { class: `${LINK_PLAIN} ms-auto`, type: "button", onclick: fillRandom }, icon("shuffle"), el("span", {}, "Shuffle")),
+        randomGrid),
+      el("div", { class: "mt-[clamp(30px,5vw,54px)] flex justify-center" },
+        button("Search tools", { icon: "search", kind: "fill", onclick: () => openPalette() }))
     )
   );
-
-  document.title = "mevebu · small tools that run in your browser";
-  return el("div", {}, hero, grid);
 }
 
 function toolsPage() {

package/mevebu/app/tailwind.css

@@ -271,6 +271,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .-my-3 {
+    margin-block: calc(var(--spacing) * -3);
+  }
   .ms-1\.5 {
     margin-inline-start: calc(var(--spacing) * 1.5);
   }
@@ -301,27 +304,33 @@
   .mt-3\.5 {
     margin-top: calc(var(--spacing) * 3.5);
   }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
   .mt-\[18px\] {
     margin-top: 18px;
   }
-  .mt-\[clamp\(22px\,3vw\,30px\)\] {
-    margin-top: clamp(22px, 3vw, 30px);
-  }
   .mt-\[clamp\(22px\,4vw\,36px\)\] {
     margin-top: clamp(22px, 4vw, 36px);
   }
   .mt-\[clamp\(24px\,4vw\,44px\)\] {
     margin-top: clamp(24px, 4vw, 44px);
   }
+  .mt-\[clamp\(26px\,3\.5vw\,36px\)\] {
+    margin-top: clamp(26px, 3.5vw, 36px);
+  }
   .mt-\[clamp\(26px\,4vw\,44px\)\] {
     margin-top: clamp(26px, 4vw, 44px);
   }
   .mt-\[clamp\(28px\,5vw\,56px\)\] {
     margin-top: clamp(28px, 5vw, 56px);
   }
+  .mt-\[clamp\(30px\,5vw\,54px\)\] {
+    margin-top: clamp(30px, 5vw, 54px);
+  }
   .mt-\[clamp\(40px\,6vw\,72px\)\] {
     margin-top: clamp(40px, 6vw, 72px);
   }
@@ -405,13 +414,17 @@
     width: 34px;
     height: 34px;
   }
+  .size-\[38px\] {
+    width: 38px;
+    height: 38px;
+  }
   .size-\[42px\] {
     width: 42px;
     height: 42px;
   }
-  .size-\[220px\] {
-    width: 220px;
-    height: 220px;
+  .size-\[248px\] {
+    width: 248px;
+    height: 248px;
   }
   .size-\[var\(--ctl\)\] {
     width: var(--ctl);
@@ -516,12 +529,21 @@
   .w-full {
     width: 100%;
   }
+  .max-w-\[18ch\] {
+    max-width: 18ch;
+  }
   .max-w-\[20ch\] {
     max-width: 20ch;
   }
   .max-w-\[30ch\] {
     max-width: 30ch;
   }
+  .max-w-\[48ch\] {
+    max-width: 48ch;
+  }
+  .max-w-\[54ch\] {
+    max-width: 54ch;
+  }
   .max-w-\[58ch\] {
     max-width: 58ch;
   }
@@ -621,6 +643,9 @@
   .place-items-center {
     place-items: center;
   }
+  .content-center {
+    align-content: center;
+  }
   .content-start {
     align-content: flex-start;
   }
@@ -681,27 +706,33 @@
   .gap-\[clamp\(14px\,3vw\,32px\)\] {
     gap: clamp(14px, 3vw, 32px);
   }
-  .gap-\[clamp\(24px\,5vw\,48px\)\] {
-    gap: clamp(24px, 5vw, 48px);
-  }
   .gap-\[clamp\(24px\,5vw\,64px\)\] {
     gap: clamp(24px, 5vw, 64px);
   }
   .gap-\[clamp\(28px\,6vw\,72px\)\] {
     gap: clamp(28px, 6vw, 72px);
   }
+  .gap-\[clamp\(32px\,5vw\,64px\)\] {
+    gap: clamp(32px, 5vw, 64px);
+  }
   .gap-\[var\(--gutter\)\] {
     gap: var(--gutter);
   }
   .gap-px {
     gap: 1px;
   }
+  .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
+  }
   .gap-x-5 {
     column-gap: calc(var(--spacing) * 5);
   }
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }
+  .gap-y-3 {
+    row-gap: calc(var(--spacing) * 3);
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -740,6 +771,9 @@
   .rounded-\[11px\] {
     border-radius: 11px;
   }
+  .rounded-\[12px\] {
+    border-radius: 12px;
+  }
   .rounded-\[13px\] {
     border-radius: 13px;
   }
@@ -892,6 +926,9 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-7 {
+    padding: calc(var(--spacing) * 7);
+  }
   .p-\[18px\] {
     padding: 18px;
   }
@@ -961,6 +998,9 @@
   .py-7 {
     padding-block: calc(var(--spacing) * 7);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-\[3px\] {
     padding-block: 3px;
   }
@@ -976,8 +1016,8 @@
   .py-\[clamp\(28px\,6vw\,56px\)\] {
     padding-block: clamp(28px, 6vw, 56px);
   }
-  .py-\[clamp\(36px\,7vw\,68px\)\] {
-    padding-block: clamp(36px, 7vw, 68px);
+  .py-\[clamp\(44px\,8vw\,88px\)\] {
+    padding-block: clamp(44px, 8vw, 88px);
   }
   .py-\[var\(--band-pad\)\] {
     padding-block: var(--band-pad);
@@ -1054,6 +1094,9 @@
   .pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
+  .pb-\[var\(--margin\)\] {
+    padding-bottom: var(--margin);
+  }
   .text-center {
     text-align: center;
   }
@@ -1144,14 +1187,14 @@
     --tw-tracking: -0.02em;
     letter-spacing: -0.02em;
   }
-  .tracking-\[-0\.03em\] {
-    --tw-tracking: -0.03em;
-    letter-spacing: -0.03em;
-  }
   .tracking-\[-0\.025em\] {
     --tw-tracking: -0.025em;
     letter-spacing: -0.025em;
   }
+  .tracking-\[-0\.035em\] {
+    --tw-tracking: -0.035em;
+    letter-spacing: -0.035em;
+  }
   .tracking-\[0\.08em\] {
     --tw-tracking: 0.08em;
     letter-spacing: 0.08em;
@@ -1707,6 +1750,10 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .\[\&_svg\]\:size-\[19px\] svg {
+    width: 19px;
+    height: 19px;
+  }
   .\[\&_svg\]\:size-\[21px\] svg {
     width: 21px;
     height: 21px;
@@ -1989,14 +2036,14 @@
   color-scheme: light;
 }
 :root[data-theme="dark"] {
-  --void: #060d0a;
-  --deck: #0c1610;
-  --deck-2: #122019;
+  --void: #050b08;
+  --deck: #12211a;
+  --deck-2: #1b2f24;
   --ink: #e7f0ea;
   --ink-2: #a7bbae;
   --ink-3: #85978a;
-  --orbit: #1d2c23;
-  --orbit-hard: #2b4033;
+  --orbit: #2e4437;
+  --orbit-hard: #3f5c49;
   --jade: #4ad69a;
   --jade-deep: #6ee6b0;
   --on-jade: #04120b;

package/mevebu/app/tailwind.src.css

@@ -93,14 +93,14 @@
 }
 
 :root[data-theme="dark"] {
-  --void: #060d0a;
-  --deck: #0c1610;
-  --deck-2: #122019;
+  --void: #050b08;
+  --deck: #12211a;
+  --deck-2: #1b2f24;
   --ink: #e7f0ea;
   --ink-2: #a7bbae;
   --ink-3: #85978a;
-  --orbit: #1d2c23;
-  --orbit-hard: #2b4033;
+  --orbit: #2e4437;
+  --orbit-hard: #3f5c49;
   --jade: #4ad69a;
   --jade-deep: #6ee6b0;
   --on-jade: #04120b;

package/mevebu/libs/js/core.js

@@ -743,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.3";
+export const VERSION = "1.5.0";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 
@@ -758,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

@@ -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/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/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/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/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/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/package.json

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