mevebu 0.2.0 → 0.2.1

package/README.md

@@ -31,11 +31,11 @@ The tools open in your default browser. Press `Ctrl+C` in the terminal to stop.
 
 ## Tools
 
-16 tools, each with its own page. Most update as you type, with no submit button.
+15 tools, each with its own page. Most update as you type, with no submit button.
 
 | Category | Tools |
 | :--- | :--- |
-| Random | Spin the Wheel, Name Picker, Coin Flip, Dice Roller |
+| Random | Spin the Wheel, Name Picker, Coin Flip |
 | Passwords and keys | Password Generator, JWT Generator, Hash Generator |
 | Developer | UUID Generator, Color Converter |
 | Convert | Base64, URL Encoder, Case Converter |

package/mevebu/app/mevebu.css

@@ -962,6 +962,28 @@ textarea.mvb-out { resize: vertical; }
 .mvb-modal__body p { margin-top: 8px; color: var(--mvb-ink-2); font-size: 15.5px; text-wrap: pretty; }
 .mvb-modal__actions { margin-top: 20px; display: grid; gap: 8px; }
 
+/* version readout inside the update modal */
+.mvb-vers { margin-top: 18px; border: 1px solid var(--mvb-orbit); border-radius: var(--mvb-r2); overflow: hidden; }
+.mvb-vers__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
+.mvb-vers__row + .mvb-vers__row { border-top: 1px solid var(--mvb-orbit); }
+.mvb-vers__label { font-size: 14px; color: var(--mvb-ink-3); }
+.mvb-vers__val { font-family: var(--mvb-mono); font-size: 15px; font-weight: 600; }
+.mvb-vers__row--new .mvb-vers__val { color: var(--mvb-comet); }
+.mvb-vers__hint { margin-top: 14px !important; font-size: 14px !important; }
+
+.mvb-cmd {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  background: var(--mvb-deck-2);
+  border: 1px solid var(--mvb-orbit);
+  border-radius: var(--mvb-r2);
+  padding: 10px 10px 10px 16px;
+}
+.mvb-cmd__text { flex: 1 1 auto; min-width: 0; font-family: var(--mvb-mono); font-size: 14px; overflow-wrap: anywhere; }
+
 /* ---------- command palette ---------- */
 
 .mvb-veil--pal { padding: clamp(60px, 12vh, 140px) 20px 20px; }
@@ -1105,6 +1127,29 @@ textarea.mvb-out { resize: vertical; }
 .mvb-foot__count { font-variant-numeric: tabular-nums; }
 .mvb-foot__count:empty { display: none; }
 
+/* version chip in the footer; turns into an update button when npm has a newer one */
+.mvb-version {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  min-height: 28px;
+  font: inherit;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  color: var(--mvb-ink-3);
+  background: transparent;
+  border: 1px solid var(--mvb-orbit);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: color var(--mvb-t) var(--mvb-ease), border-color var(--mvb-t) var(--mvb-ease), background var(--mvb-t) var(--mvb-ease);
+}
+.mvb-version:hover { color: var(--mvb-ink); border-color: var(--mvb-orbit-hard); }
+.mvb-version:focus-visible { outline: 2px solid var(--mvb-comet); outline-offset: 2px; }
+.mvb-version--new { color: var(--mvb-comet); border-color: var(--mvb-comet); background: var(--mvb-nebula); font-weight: 600; }
+.mvb-version--new:hover { color: var(--mvb-on-comet); background: var(--mvb-comet); }
+.mvb-version .mvb-ico { width: 15px; height: 15px; }
+
 @media (max-width: 720px) {
   .mvb-foot__top { grid-template-columns: 1fr; }
   .mvb-foot__nav { grid-template-columns: repeat(2, 1fr); }

package/mevebu/app/mevebu.js

@@ -6,6 +6,7 @@ import { route, start, match, currentPath, go } from "../libs/js/router.js";
 import {
   $, $$, el, icon, getFavorites, isFavorite, toggleFavorite, setTheme,
   modal, button, copyButton, openPalette, shuffle, toolcard,
+  VERSION, PACKAGE_NAME, checkForUpdate, updateCommand, compareVersions,
 } from "../libs/js/core.js";
 
 const DONATE_URL = "https://buymeacoffee.com/fastro";
@@ -137,6 +138,79 @@ function openDonate() {
   });
 }
 
+// `latest` is the published version, or null when the check could not run.
+function openUpdate(latest) {
+  const updatable = latest && compareVersions(latest, VERSION) > 0;
+  const command = updateCommand();
+
+  const commandBox = el(
+    "div",
+    { class: "mvb-cmd" },
+    el("code", { class: "mvb-cmd__text" }, command),
+    copyButton(() => command, "Copy command", "fill")
+  );
+
+  modal({
+    label: "Update mevebu",
+    body: [
+      el("div", { class: "mvb-modal__art" }, el("img", { src: "./icon.png", alt: "", width: "72", height: "72" })),
+      el("h2", { class: "mvb-modal__title" }, 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", {}, PACKAGE_NAME), " again.")
+        : el("p", {}, "You are on the latest version. Nothing to do."),
+      el("div", { class: "mvb-vers" },
+        el("div", { class: "mvb-vers__row" },
+          el("span", { class: "mvb-vers__label" }, "Installed"),
+          el("span", { class: "mvb-vers__val" }, VERSION)),
+        el("div", { class: "mvb-vers__row" + (updatable ? " mvb-vers__row--new" : "") },
+          el("span", { class: "mvb-vers__label" }, "Latest"),
+          el("span", { class: "mvb-vers__val" }, latest ?? "—"))),
+      updatable ? el("p", { class: "mvb-vers__hint" }, "Copy the command below and run it in your terminal.") : null,
+      updatable ? commandBox : null,
+    ],
+    actions: updatable
+      ? [el("a", { class: "mvb-btn", href: `https://www.npmjs.com/package/${PACKAGE_NAME}/v/${latest}`, target: "_blank", rel: "noopener" }, "What changed")]
+      : [],
+    veilClass: "mvb-veil--help",
+  });
+}
+
+// ---------- version ----------
+
+// The footer chip shows the current version. When npm reports a newer one, the
+// chip turns into an "update" button and the modal explains how to upgrade.
+async function startVersionChip() {
+  const chip = $("#mvb-version");
+  if (!chip) return;
+  chip.textContent = `v${VERSION}`;
+
+  let latest = null;
+  try {
+    const result = await checkForUpdate();
+    latest = result?.latest ?? null;
+  } catch {
+    /* offline: keep the plain version label */
+  }
+
+  const outdated = latest && compareVersions(latest, VERSION) > 0;
+  if (outdated) {
+    chip.classList.add("mvb-version--new");
+    chip.setAttribute("aria-label", `Update available: version ${latest}`);
+    chip.replaceChildren(icon("circle-arrow-up"), el("span", {}, `Update to v${latest}`));
+  }
+
+  chip.addEventListener("click", (event) => {
+    event.preventDefault();
+    openUpdate(latest);
+  });
+  chip.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openUpdate(latest);
+    }
+  });
+}
+
 function footer() {
   const donate = button("Donate", {
     icon: "coffee",
@@ -197,6 +271,16 @@ function footer() {
           "Source: ",
           el("a", { href: REPO_URL, target: "_blank", rel: "noopener" }, "github.com/mevebu/mevebu"),
           el("span", { class: "mvb-foot__count", id: "mvb-starcount" })
+        ),
+        el(
+          "p",
+          { class: "mvb-foot__legal" },
+          el("button", {
+            class: "mvb-version",
+            id: "mvb-version",
+            type: "button",
+            title: "Check for updates",
+          }, "—")
         )
       )
     )
@@ -727,4 +811,5 @@ function globalKeys() {
 mountShell();
 globalKeys();
 startStarCount();
+startVersionChip();
 start(render);

package/mevebu/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>mevebu, small tools that run in your browser</title>
-    <meta name="description" content="16 small tools that run in your browser. Passwords, QR codes, random draws, text and encoding. No accounts, no tracking." />
+    <meta name="description" content="15 small tools that run in your browser. Passwords, QR codes, random draws, text and encoding. No accounts, no tracking." />
     <link rel="icon" type="image/png" href="./icon.png" />
     <link rel="stylesheet" href="./app/mevebu.css" />
     <link rel="stylesheet" href="./libs/css/tools.css" />

package/mevebu/libs/css/tools.css

@@ -43,26 +43,6 @@
 .mvb-flip__result { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
 .mvb-flip__tally { font-size: 14px; color: var(--mvb-ink-3); font-variant-numeric: tabular-nums; }
 
-/* ---------- dice ---------- */
-
-.mvb-faces { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
-
-.mvb-die {
-  min-width: 56px;
-  height: 56px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 10px;
-  background: var(--mvb-deck);
-  border: 1px solid var(--mvb-orbit-hard);
-  border-radius: var(--mvb-r1);
-  font-family: var(--mvb-mono);
-  font-size: 20px;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-}
-
 /* ---------- meter ---------- */
 
 .mvb-meter { height: 8px; border-radius: 999px; background: var(--mvb-deck-2); overflow: hidden; }

package/mevebu/libs/js/core.js

@@ -590,4 +590,52 @@ export function blank(iconName, text) {
   );
 }
 
+// ---------- version ----------
+
+// Kept in one place. The CLI reads the same value from package.json.
+export const VERSION = "0.2.1";
+export const PACKAGE_NAME = "mevebu";
+export const REPO_SLUG = "mevebu/mevebu";
+
+/** Compare two X.Y.Z strings. Returns 1, 0, or -1 for a > b, a == b, a < b. */
+export function compareVersions(a, b) {
+  const left = String(a).split(".").map((part) => parseInt(part, 10) || 0);
+  const right = String(b).split(".").map((part) => parseInt(part, 10) || 0);
+  for (let i = 0; i < 3; i++) {
+    if ((left[i] ?? 0) > (right[i] ?? 0)) return 1;
+    if ((left[i] ?? 0) < (right[i] ?? 0)) return -1;
+  }
+  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 } = {}) {
+  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);
+    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 };
+  } catch {
+    clearTimeout(timer);
+    return null;
+  }
+}
+
+/** The command that updates an existing global install. */
+export function updateCommand() {
+  return `npm install -g ${PACKAGE_NAME}`;
+}
+
 export { hasIcon };

package/mevebu/libs/js/icons.js

@@ -1,5 +1,5 @@
 // GENERATED FILE, DO NOT EDIT.
-// Source: lucide v1.57.0 (ISC), icons/55 names from scripts/vendor-icons.mjs
+// Source: lucide v1.57.0 (ISC), icons/54 names from scripts/vendor-icons.mjs
 // Regenerate with: npm run icons
 
 const D = {
@@ -15,6 +15,7 @@ const D = {
   "corner-down-left": [ ["path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }], ["path", { d: "m9 10-5 5 5 5" }] ],
   "info": [ ["circle", { cx: "12", cy: "12", r: "10" }], ["path", { d: "M12 16v-4" }], ["path", { d: "M12 8h.01" }] ],
   "circle-question-mark": [ ["circle", { cx: "12", cy: "12", r: "10" }], ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }], ["path", { d: "M12 17h.01" }] ],
+  "circle-arrow-up": [ ["circle", { cx: "12", cy: "12", r: "10" }], ["path", { d: "m16 12-4-4-4 4" }], ["path", { d: "M12 16V8" }] ],
   "shuffle": [ ["path", { d: "m18 14 4 4-4 4" }], ["path", { d: "m18 2 4 4-4 4" }], ["path", { d: "M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" }], ["path", { d: "M2 6h1.972a4 4 0 0 1 3.6 2.2" }], ["path", { d: "M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45" }] ],
   "shield-check": [ [ "path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" } ], ["path", { d: "m9 12 2 2 4-4" }] ],
   "terminal": [ ["path", { d: "M12 19h8" }], ["path", { d: "m4 17 6-6-6-6" }] ],
@@ -24,7 +25,6 @@ const D = {
   "circle-dashed": [ ["path", { d: "M10.1 2.182a10 10 0 0 1 3.8 0" }], ["path", { d: "M13.9 21.818a10 10 0 0 1-3.8 0" }], ["path", { d: "M17.609 3.721a10 10 0 0 1 2.69 2.7" }], ["path", { d: "M2.182 13.9a10 10 0 0 1 0-3.8" }], ["path", { d: "M20.279 17.609a10 10 0 0 1-2.7 2.69" }], ["path", { d: "M21.818 10.1a10 10 0 0 1 0 3.8" }], ["path", { d: "M3.721 6.391a10 10 0 0 1 2.7-2.69" }], ["path", { d: "M6.391 20.279a10 10 0 0 1-2.69-2.7" }] ],
   "users": [ ["path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }], ["path", { d: "M16 3.128a4 4 0 0 1 0 7.744" }], ["path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }], ["circle", { cx: "9", cy: "7", r: "4" }] ],
   "coins": [ ["path", { d: "M13.744 17.736a6 6 0 1 1-7.48-7.48" }], ["path", { d: "M15 6h1v4" }], ["path", { d: "m6.134 14.768.866-.5 2 3.464" }], ["circle", { cx: "16", cy: "8", r: "6" }] ],
-  "dices": [ ["rect", { width: "12", height: "12", x: "2", y: "10", rx: "2", ry: "2" }], ["path", { d: "m17.92 14 3.5-3.5a2.24 2.24 0 0 0 0-3l-5-4.92a2.24 2.24 0 0 0-3 0L10 6" }], ["path", { d: "M6 18h.01" }], ["path", { d: "M10 14h.01" }], ["path", { d: "M15 6h.01" }], ["path", { d: "M18 9h.01" }] ],
   "key-round": [ [ "path", { d: "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" } ], ["circle", { cx: "16.5", cy: "7.5", r: ".5", fill: "currentColor" }] ],
   "signature": [ [ "path", { d: "m21 17-2.156-1.868A.5.5 0 0 0 18 15.5v.5a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1c0-2.545-3.991-3.97-8.5-4a1 1 0 0 0 0 5c4.153 0 4.745-11.295 5.708-13.5a2.5 2.5 0 1 1 3.31 3.284" } ], ["path", { d: "M3 21h18" }] ],
   "hash": [ ["line", { x1: "4", x2: "20", y1: "9", y2: "9" }], ["line", { x1: "4", x2: "20", y1: "15", y2: "15" }], ["line", { x1: "10", x2: "8", y1: "3", y2: "21" }], ["line", { x1: "16", x2: "14", y1: "3", y2: "21" }] ],
@@ -57,7 +57,6 @@ const D = {
   "loader": [ ["path", { d: "M12 2v4" }], ["path", { d: "m16.2 7.8 2.9-2.9" }], ["path", { d: "M18 12h4" }], ["path", { d: "m16.2 16.2 2.9 2.9" }], ["path", { d: "M12 18v4" }], ["path", { d: "m4.9 19.1 2.9-2.9" }], ["path", { d: "M2 12h4" }], ["path", { d: "m4.9 4.9 2.9 2.9" }] ],
   "play": [ [ "path", { d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" } ] ],
   "lock": [ ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }], ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4" }] ],
-  "dice-5": [ ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }], ["path", { d: "M16 8h.01" }], ["path", { d: "M8 8h.01" }], ["path", { d: "M8 16h.01" }], ["path", { d: "M16 16h.01" }], ["path", { d: "M12 12h.01" }] ],
 };
 
 const SVG_NS = "http://www.w3.org/2000/svg";

package/mevebu/libs/js/registry.js

@@ -70,24 +70,6 @@ export const TOOLS = [
     keywords: "random toss decide heads tails",
     load: () => import("./tools/coin-flip.js"),
   },
-  {
-    id: "dice-roller",
-    category: "random",
-    name: "Dice Roller",
-    icon: "dices",
-    note: "Roll d4 to d20, one die or fifty.",
-    about: "Pick a die, set how many to roll, and see each result.",
-    tutorial: {
-      intro: "Roll polyhedral dice from d4 to d20, one or many at a time.",
-      steps: [
-        "Pick a die with the chips (d4 to d20).",
-        "Set how many dice to roll, between 1 and 50.",
-        "The dice roll as you change a setting. Press Roll for a fresh throw.",
-      ],
-    },
-    keywords: "random dice d6 d20 roll tabletop rpg",
-    load: () => import("./tools/dice-roller.js"),
-  },
 
   {
     id: "password-generator",

package/package.json

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

package/mevebu/libs/js/tools/dice-roller.js

@@ -1,59 +0,0 @@
-// Polyhedral dice from d4 to d20, one die or many, with each result shown.
-import { el, randomInt, chipRow, numberInput, button, bench, stack, panel, output, actions, readPin, writePin, toolcard } from "../core.js";
-
-const SIDES = [4, 6, 8, 10, 12, 20];
-
-export function mount(slot) {
-  const PIN = "dice-roller";
-  const saved = readPin(PIN, { sides: 6, count: "3" });
-  let sides = SIDES.includes(Number(saved.sides)) ? Number(saved.sides) : 6;
-
-  const chips = chipRow(SIDES.map((value) => ({ value, label: `d${value}` })), {
-    value: sides,
-    label: "Die",
-    onChange: (value) => {
-      sides = value;
-      roll();
-    },
-  });
-  const countField = numberInput({ value: saved.count ?? "3", min: "1", max: "50", "aria-label": "How many dice" });
-  const faces = el("div", { class: "mvb-faces", "aria-live": "polite" });
-  const sum = output({ rows: 1 });
-  const rollButton = button("Roll", { icon: "dices", kind: "fill" });
-
-  function totalCount() {
-    return Math.max(1, Math.min(50, parseInt(countField.value || "1", 10) || 1));
-  }
-
-  function roll() {
-    const total = totalCount();
-    const rolls = Array.from({ length: total }, () => 1 + randomInt(sides));
-    faces.replaceChildren(...rolls.map((value) => el("span", { class: "mvb-die" }, String(value))));
-    sum.write(String(rolls.reduce((a, b) => a + b, 0)));
-    writePin(PIN, { sides, count: String(total) });
-  }
-
-  // A new die or a new count rolls right away. The button stays for a fresh throw.
-  rollButton.addEventListener("click", () => {
-    countField.value = String(totalCount());
-    roll();
-  });
-  countField.addEventListener("input", roll);
-  countField.addEventListener("change", () => {
-    countField.value = String(totalCount());
-  });
-
-  const card = toolcard({
-    body: bench(
-      stack(panel("Die", chips), panel("Dice to roll", countField)),
-      stack(panel("Results", faces), panel("Total", sum))
-    ),
-    foot: actions(rollButton),
-  });
-  slot.append(card.node);
-  roll();
-
-  return {};
-}
-
-export default { mount };