mevebu 1.1.0 → 1.3.0

package/mevebu/app/mevebu.js

@@ -32,7 +32,7 @@ function searchButton() {
     },
     icon("search"),
     el("span", { class: "mvb-searchbtn__txt" }, "Search"),
-    el("kbd", { class: "mvb-searchbtn__key" }, "⌘K")
+    el("kbd", { class: "mvb-kbd" }, "⌘K")
   );
   return btn;
 }
@@ -106,9 +106,6 @@ function openHelp(tool) {
     el("p", { class: "mvb-help__note" }, tool.tutorial?.intro ?? tool.about),
     el("ol", { class: "mvb-help__steps" },
       ...(tool.tutorial?.steps ?? []).map((step) => el("li", {}, step))),
-    el("p", { class: "mvb-help__note" },
-      "Open the tool: ",
-      el("a", { class: "mvb-link", href: toolHref(tool) }, toolHref(tool).slice(1))),
   ];
   modal({
     label: `${tool.name} how to use it`,
@@ -363,7 +360,7 @@ function filterBar(placeholder = "Search tools") {
     { class: "mvb-filter", role: "search", onsubmit: (event) => event.preventDefault() },
     el("span", { class: "mvb-filter__icon" }, icon("search")),
     input,
-    el("kbd", { class: "mvb-filter__key" }, "/")
+    el("kbd", { class: "mvb-kbd" }, "/")
   );
 }
 

package/mevebu/app/tailwind.css

@@ -457,20 +457,6 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
-  .mvb-searchbtn__key {
-    border-radius: 4px;
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--mvb-orbit);
-    background-color: var(--mvb-deck);
-    padding-inline: calc(var(--spacing) * 1.5);
-    padding-block: 1px;
-    font-family: var(--mvb-sans);
-    font-size: 0.71875rem;
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: var(--mvb-ink-3);
-  }
   .mvb-sheet {
     display: grid;
     border-top-style: var(--tw-border-style);
@@ -530,13 +516,14 @@
     border-radius: 5px;
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--mvb-orbit);
-    background-color: var(--mvb-deck-2);
+    border-color: var(--mvb-orbit-hard);
     padding-inline: 7px;
     padding-block: 1px;
     font-family: var(--mvb-sans);
-    font-size: 0.78125rem;
-    color: var(--mvb-ink-2);
+    font-size: 0.8125rem;
+    --tw-leading: 1.45;
+    line-height: 1.45;
+    color: var(--mvb-ink-3);
   }
   .mvb-hero {
     position: relative;
@@ -875,17 +862,6 @@
   .mvb-filter__in::placeholder {
     color: var(--mvb-ink-3);
   }
-  .mvb-filter__key {
-    border-radius: 5px;
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--mvb-orbit);
-    padding-inline: 7px;
-    padding-block: calc(var(--spacing) * 0.5);
-    font-family: var(--mvb-sans);
-    font-size: 0.75rem;
-    color: var(--mvb-ink-3);
-  }
   .mvb-filter__meta {
     margin-top: calc(var(--spacing) * 2.5);
     display: flex;
@@ -896,9 +872,6 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--mvb-ink-3);
   }
-  .mvb-tally {
-    color: var(--mvb-danger);
-  }
   .mvb-lead {
     margin-top: clamp(28px, 5vw, 56px);
     max-width: 20ch;
@@ -1444,6 +1417,12 @@
     border-inline-start-color: var(--mvb-danger);
     color: var(--mvb-danger);
   }
+  .mvb-note--warn {
+    border-inline-start-color: var(--mvb-star);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--mvb-ink);
+  }
   .mvb-note--good {
     border-inline-start-color: var(--mvb-aurora);
     color: var(--mvb-aurora);
@@ -1679,7 +1658,7 @@
     margin: 0px;
     padding-inline: 18px;
     padding-top: calc(var(--spacing) * 2);
-    font-size: 0.78125rem;
+    font-size: 0.8125rem;
     color: var(--mvb-ink-3);
   }
   .mvb-pal__list {
@@ -1751,7 +1730,7 @@
     color: var(--mvb-ink-2);
   }
   .mvb-pal__cat {
-    font-size: 0.78125rem;
+    font-size: 0.8125rem;
     white-space: nowrap;
     color: var(--mvb-ink-3);
   }
@@ -1772,21 +1751,9 @@
     border-color: var(--mvb-orbit);
     padding-inline: 18px;
     padding-block: calc(var(--spacing) * 2.5);
-    font-size: 0.78125rem;
+    font-size: 0.8125rem;
     color: var(--mvb-ink-3);
   }
-  .mvb-pal__key {
-    border-radius: 4px;
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--mvb-orbit);
-    background-color: var(--mvb-deck-2);
-    padding-inline: calc(var(--spacing) * 1.5);
-    padding-block: 1px;
-    font-family: var(--mvb-sans);
-    font-size: 0.6875rem;
-    color: var(--mvb-ink-2);
-  }
   .mvb-veil--help {
     padding-top: clamp(60px, 10vh, 120px);
   }
@@ -1858,20 +1825,13 @@
     place-items: center;
     border-radius: calc(infinity * 1px);
     background-color: var(--mvb-nebula);
-    font-size: 0.75rem;
+    font-size: 0.8125rem;
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
     color: var(--mvb-comet);
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
-  .mvb-help__actions {
-    margin-top: calc(var(--spacing) * 5);
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: calc(var(--spacing) * 2);
-  }
   .mvb-foot {
     margin-top: clamp(56px, 8vw, 96px);
     border-top-style: var(--tw-border-style);
@@ -1932,7 +1892,7 @@
   .mvb-foot__nav h4 {
     margin: 0px;
     margin-bottom: calc(var(--spacing) * 2);
-    font-size: 0.75rem;
+    font-size: 0.8125rem;
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
     --tw-tracking: var(--tracking-normal);
@@ -2117,13 +2077,6 @@
     --tw-tracking: -0.01em;
     letter-spacing: -0.01em;
   }
-  .mvb-flip__tally {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--mvb-ink-3);
-    --tw-numeric-spacing: tabular-nums;
-    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
-  }
   .mvb-meter {
     height: calc(var(--spacing) * 2);
     overflow: hidden;

package/mevebu/app/tailwind.src.css

@@ -238,10 +238,6 @@
 
   .mvb-searchbtn__txt { @apply flex-1 text-start text-sm; }
 
-  .mvb-searchbtn__key {
-    @apply rounded-[4px] border border-orbit bg-deck px-1.5 py-px font-sans text-[0.71875rem] font-semibold text-ink-3;
-  }
-
   /* nav sheet on a phone */
 
   .mvb-sheet {
@@ -272,8 +268,11 @@
 
   .mvb-link { @apply text-comet underline-offset-[3px]; }
 
+  /* One key chip for the whole app: the search button, the filter, the palette
+     footer and the help modal all point at the same key. It sits on a raised and a
+     recessed surface in turn, so it carries its own border instead of a fill. */
   .mvb-kbd {
-    @apply rounded-[5px] border border-orbit bg-deck-2 px-[7px] py-px font-sans text-[0.78125rem] text-ink-2;
+    @apply rounded-[5px] border border-orbit-hard px-[7px] py-px font-sans text-[0.8125rem] leading-[1.45] text-ink-3;
   }
 
   /* hero, only on the home page */
@@ -411,16 +410,10 @@
   .mvb-filter__in:focus { @apply outline-none; }
   .mvb-filter__in::placeholder { @apply text-ink-3; }
 
-  .mvb-filter__key {
-    @apply rounded-[5px] border border-orbit px-[7px] py-0.5 font-sans text-[0.75rem] text-ink-3;
-  }
-
   .mvb-filter__meta {
     @apply mt-2.5 flex min-h-[22px] items-baseline gap-3.5 text-sm text-ink-3;
   }
 
-  .mvb-tally { @apply text-danger; }
-
   /* ---------- page headings ---------- */
 
   .mvb-lead {
@@ -674,6 +667,13 @@
     @apply border-s-danger text-danger;
   }
 
+  /* A warning is a caution, not a failure: amber rule, text that stays readable
+     on both surfaces. Without this rule a warn notice fell back to the neutral
+     note, so a real warning looked quieter than the all clear. */
+  .mvb-note--warn {
+    @apply border-s-star font-medium text-ink;
+  }
+
   .mvb-note--good {
     @apply border-s-aurora text-aurora;
   }
@@ -766,7 +766,7 @@
   .mvb-pal__in:focus { @apply outline-none; }
   .mvb-pal__in::placeholder { @apply text-ink-3; }
 
-  .mvb-pal__count { @apply m-0 px-[18px] pt-2 text-[0.78125rem] text-ink-3; }
+  .mvb-pal__count { @apply m-0 px-[18px] pt-2 text-[0.8125rem] text-ink-3; }
 
   .mvb-pal__list {
     @apply m-0 mt-1.5 max-h-[min(60vh,360px)] overflow-y-auto px-2 pb-2;
@@ -787,16 +787,12 @@
   .mvb-pal__text { @apply grid min-w-0 flex-1 gap-px; }
   .mvb-pal__name { @apply text-[0.9375rem] font-semibold tracking-[-0.01em]; }
   .mvb-pal__note { @apply overflow-hidden text-[0.84375rem] text-ellipsis whitespace-nowrap text-ink-2; }
-  .mvb-pal__cat { @apply whitespace-nowrap text-[0.78125rem] text-ink-3; }
+  .mvb-pal__cat { @apply whitespace-nowrap text-[0.8125rem] text-ink-3; }
 
   .mvb-pal__empty { @apply p-[18px] text-sm text-ink-3; }
 
   .mvb-pal__foot {
-    @apply m-0 flex flex-wrap items-center gap-2.5 border-t border-orbit px-[18px] py-2.5 text-[0.78125rem] text-ink-3;
-  }
-
-  .mvb-pal__key {
-    @apply rounded-[4px] border border-orbit bg-deck-2 px-1.5 py-px font-sans text-[0.6875rem] text-ink-2;
+    @apply m-0 flex flex-wrap items-center gap-2.5 border-t border-orbit px-[18px] py-2.5 text-[0.8125rem] text-ink-3;
   }
 
   /* ---------- help modal ---------- */
@@ -830,11 +826,7 @@
   .mvb-help__steps li::before {
     content: counter(mvb-step);
     counter-increment: mvb-step;
-    @apply grid size-[22px] place-items-center rounded-full bg-nebula text-[0.75rem] font-bold tabular-nums text-comet;
-  }
-
-  .mvb-help__actions {
-    @apply mt-5 flex flex-wrap justify-end gap-2;
+    @apply grid size-[22px] place-items-center rounded-full bg-nebula text-[0.8125rem] font-bold tabular-nums text-comet;
   }
 
   /* ---------- footer ---------- */
@@ -869,7 +861,7 @@
     @apply grid grid-cols-2 gap-x-[clamp(20px,4vw,40px)] gap-y-1.5;
   }
 
-  .mvb-foot__nav h4 { @apply m-0 mb-2 text-[0.75rem] font-bold tracking-normal text-ink-3 normal-case; }
+  .mvb-foot__nav h4 { @apply m-0 mb-2 text-[0.8125rem] font-bold tracking-normal text-ink-3 normal-case; }
   .mvb-foot__nav ul { @apply grid gap-1.5; }
   .mvb-foot__nav a { @apply text-[0.90625rem] text-ink-2 no-underline; }
   .mvb-foot__nav a:hover { @apply text-comet; }
@@ -944,7 +936,6 @@
   }
 
   .mvb-flip__result { @apply text-[1.1875rem] font-bold tracking-[-0.01em]; }
-  .mvb-flip__tally { @apply text-sm tabular-nums text-ink-3; }
 
   /* ---------- meter ---------- */
 

package/mevebu/libs/js/core.js

@@ -241,9 +241,9 @@ export function openPalette({ onPick } = {}) {
     "p",
     { class: "mvb-pal__foot" },
     "↑↓ navigate  ",
-    el("kbd", { class: "mvb-pal__key" }, "↵"),
+    el("kbd", { class: "mvb-kbd" }, "↵"),
     " open  ",
-    el("kbd", { class: "mvb-pal__key" }, "esc"),
+    el("kbd", { class: "mvb-kbd" }, "esc"),
     " close"
   );
 
@@ -514,8 +514,8 @@ export function downloadButton(getData, filename, labelText = "Download", mime =
  * Single choice chips. `items` is [{ value, label }]. Returns the wrapper with
  * a `.select(value)` method so the tool can read the current value.
  */
-export function chipRow(items, { value, onChange, label, size = "sm" } = {}) {
-  const wrap = el("div", { class: `mvb-chips mvb-chips--${size}`, role: "group", "aria-label": label || "Options" });
+export function chipRow(items, { value, onChange, label } = {}) {
+  const wrap = el("div", { class: "mvb-chips", role: "group", "aria-label": label || "Options" });
   let current = value;
   const paint = () => {
     for (const chip of wrap.children) {
@@ -593,7 +593,7 @@ export function blank(iconName, text) {
 // ---------- version ----------
 
 // Kept in one place. The CLI reads the same value from package.json.
-export const VERSION = "1.1.0";
+export const VERSION = "1.3.0";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/registry.js

@@ -40,7 +40,7 @@ export const TOOLS = [
     tutorial: {
       intro: "Add one option per line. The wheel picks one at random when you spin.",
       steps: [
-        "Type your options in the field on the left, one per line.",
+        "Type your options, one per line.",
         "Press Spin. The wheel eases to a stop on one entry.",
         "Each pick is added to the history strip below. Press Clear past picks to reset.",
       ],
@@ -131,8 +131,8 @@ export const TOOLS = [
     tutorial: {
       intro: "Hash text with the SHA family. Hashing happens in this tab.",
       steps: [
-        "Type or paste text on the left.",
-        "Pick an algorithm with the chips (1 to 512).",
+        "Type or paste text.",
+        "Pick an algorithm with the chips.",
         "The hash updates as you type. Press Copy hash to copy the result.",
       ],
     },
@@ -272,16 +272,16 @@ export const TOOLS = [
     name: "UUID Generator",
     icon: "fingerprint-pattern",
     note: "Generate UUIDs, one or a thousand.",
-    about: "Version 4 UUIDs from the browser random source.",
+    about: "Versions 1, 4, 6 and 7, plus the Nil and Max sentinels.",
     tutorial: {
-      intro: "Generate version 4 UUIDs. Copy as a list, JSON, or save as a file.",
+      intro: "Generate UUIDs and take them as a list, as JSON, or as a file.",
       steps: [
-        "Set how many UUIDs to generate, between 1 and 1000.",
-        "Toggle Uppercase if you want them in caps. The list updates as you change a setting.",
-        "Use Copy all, Copy JSON, or Save .txt on the right.",
+        "Pick the version. v4 and v7 are random and v7 sorts by time. v1 and v6 carry a timestamp. Nil and Max are the two sentinels tests look for.",
+        "Set how many to generate, between 1 and 1000. Uppercase and No hyphens change the output only.",
+        "Use Copy all, Copy JSON, or Save .txt to take the list.",
       ],
     },
-    keywords: "guid unique id v4 identifier",
+    keywords: "guid unique id v1 v4 v6 v7 nil max identifier",
     load: () => import("./tools/uuid-generator.js"),
   },
   {
@@ -294,8 +294,8 @@ export const TOOLS = [
     tutorial: {
       intro: "Convert a color between hex, rgb, and hsl. The swatch and contrast reading update live.",
       steps: [
-        "Pick a color with the picker on the left, or type a hex, rgb, or hsl value.",
-        "The other formats, the swatch, and a contrast reading appear on the right.",
+        "Pick a color with the picker, or type a hex, rgb, or hsl value.",
+        "The other formats, the swatch, and a contrast reading update as you type.",
         "Click any of the four readouts to copy that value.",
       ],
     },
@@ -315,7 +315,7 @@ export const TOOLS = [
       steps: [
         "Type or paste on either side. The other side updates as you type.",
         "Edit the Base64 side directly to decode. Invalid Base64 shows an error.",
-        "Use Copy Base64 or Copy text on the right of each panel.",
+        "Use Copy Base64 or Copy text to take either side.",
       ],
     },
     keywords: "encode decode binary data uri atob btoa",

package/mevebu/libs/js/tools/base64.js

@@ -1,21 +1,40 @@
 // Text to Base64 and back, live in both directions. Emoji and other non-Latin
 // text survive the round trip because the bytes are UTF-8.
-import { bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+import { checkbox, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
 
-const encode = (text) => btoa(String.fromCharCode(...new TextEncoder().encode(text)));
-const decode = (text) => new TextDecoder().decode(
-  Uint8Array.from(atob(text.replace(/\s+/g, "")), (char) => char.charCodeAt(0))
-);
+// btoa and atob take a binary string. A long input is converted in chunks,
+// because spreading a whole document into String.fromCharCode overflows the
+// call stack.
+const CHUNK = 0x8000;
+
+function encode(text, urlSafe) {
+  const bytes = new TextEncoder().encode(text);
+  let binary = "";
+  for (let at = 0; at < bytes.length; at += CHUNK) {
+    binary += String.fromCharCode(...bytes.subarray(at, at + CHUNK));
+  }
+  const base = btoa(binary);
+  return urlSafe ? base.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "") : base;
+}
+
+function decode(text) {
+  // Both alphabets are accepted and the padding goes back on: the URL-safe form
+  // drops its padding, and a JWT segment turns up that way.
+  const base = text.replace(/\s+/g, "").replace(/-/g, "+").replace(/_/g, "/");
+  const padded = base.padEnd(base.length + ((4 - (base.length % 4)) % 4), "=");
+  return new TextDecoder().decode(Uint8Array.from(atob(padded), (char) => char.charCodeAt(0)));
+}
 
 export function mount(slot) {
   const plain = textArea({ rows: 7, value: "hello mevebu", "aria-label": "Plain text" });
   const coded = textArea({ rows: 7, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Base64" });
+  const urlSafeBox = checkbox("URL-safe, no padding", { checked: false });
   const error = notice("error");
   let guard = false;
 
   function refresh() {
     try {
-      coded.value = plain.value ? encode(plain.value) : "";
+      coded.value = plain.value ? encode(plain.value, urlSafeBox.input.checked) : "";
       error.write("");
     } catch {
       error.write("That text could not be encoded.");
@@ -42,10 +61,12 @@ export function mount(slot) {
     }
   });
 
+  urlSafeBox.input.addEventListener("change", refresh);
+
   const card = toolcard({
     body: bench(
       stack(panel("Text", plain)),
-      stack(panel("Base64", coded), error)
+      stack(panel("Base64", coded), urlSafeBox, error)
     ),
     foot: actions(
       copyButton(() => plain.value, "Copy text"),
@@ -58,4 +79,4 @@ export function mount(slot) {
   return {};
 }
 
-export default { mount };
+export default { mount };

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

@@ -69,7 +69,7 @@ export function mount(slot) {
 
   source.addEventListener("input", convert);
 
-  const card = toolcard({ body: stack(panel("Text", source), panel("Select a case to copy it", list)) });
+  const card = toolcard({ body: stack(panel("Text", source), panel("Cases", list)) });
   slot.append(card.node);
   convert();
 

package/mevebu/libs/js/tools/cert-expiry.js

@@ -53,8 +53,7 @@ export function mount(slot) {
 
     if (days < 0) status.write(`Expired ${Math.abs(days)} days ago.`);
     else if (days === 0) status.write("Expires today.");
-    else if (days <= threshold) status.write(`Expires in ${days} days, within the ${threshold} day warning window.`);
-    else status.write(`Expires in ${days} days.`);
+    else if (days <= threshold) status.write(`Inside the ${threshold} day warning window.`);
 
     summary = `Expires ${expiry.toLocaleDateString()}, ${days} days left, ${state}.`;
   }
@@ -67,7 +66,6 @@ export function mount(slot) {
       stack(
         panel("Expiry date", dateField),
         panel("Warn within days", warnField),
-        el("p", { class: "mvb-note" }, "The date stays in this tab."),
         error
       ),
       stack(stats, status)

package/mevebu/libs/js/tools/coin-flip.js

@@ -1,20 +1,37 @@
 // Heads or tails with a running count that survives a page change.
-import { el, button, bench, stack, panel, output, actions, readPin, writePin, randomInt, toolcard } from "../core.js";
+import { el, button, bench, stack, panel, actions, readPin, writePin, randomInt, toolcard } from "../core.js";
+
+// A toss is one flip: a click while the coin is still turning replaces the turn
+// in progress instead of queueing another one behind it.
+const TOSS_MS = 400;
+
+/** A tally tile. The value is the node the tool writes to. */
+function tile(key) {
+  const value = el("span", { class: "mvb-stat__v" }, "0");
+  const row = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, key));
+  return { row, value };
+}
 
 export function mount(slot) {
   const PIN = "coin-flip";
   const saved = readPin(PIN, { heads: 0, tails: 0 });
   let heads = Number(saved.heads) || 0;
   let tails = Number(saved.tails) || 0;
+  let timer = 0;
 
-  const coin = el("div", { class: "mvb-coin", role: "img", "aria-label": "Coin" }, "?");
-  const result = output({ rows: 1 });
-  const tally = el("p", { class: "mvb-flip__tally", "aria-live": "polite" });
+  const coin = el("div", { class: "mvb-coin", role: "img", "aria-label": "Coin, not flipped yet" }, "?");
+  const verdict = el("p", { class: "mvb-flip__result min-h-7", "aria-live": "polite" });
+  const headsTile = tile("Heads");
+  const tailsTile = tile("Tails");
+  const totalTile = tile("Total");
+  const stats = el("div", { class: "mvb-stats" }, headsTile.row, tailsTile.row, totalTile.row);
 
   function render(decision) {
-    result.write(decision ? `${decision}` : "");
-    const total = heads + tails;
-    tally.textContent = total ? `Heads ${heads}, tails ${tails}. ${total} flips.` : "No flips yet.";
+    verdict.textContent = decision;
+    coin.setAttribute("aria-label", decision ? `Coin: ${decision.toLowerCase()}` : "Coin, not flipped yet");
+    headsTile.value.textContent = String(heads);
+    tailsTile.value.textContent = String(tails);
+    totalTile.value.textContent = String(heads + tails);
     writePin(PIN, { heads, tails });
   }
 
@@ -22,19 +39,21 @@ export function mount(slot) {
   const resetButton = button("Reset the count", { kind: "quiet" });
 
   flipButton.addEventListener("click", () => {
+    clearTimeout(timer);
     coin.classList.remove("mvb-toss");
     void coin.offsetWidth;
     coin.classList.add("mvb-toss");
-    setTimeout(() => {
+    timer = setTimeout(() => {
       const isHeads = randomInt(2) === 0;
       if (isHeads) heads++;
       else tails++;
       coin.textContent = isHeads ? "H" : "T";
       render(isHeads ? "Heads" : "Tails");
-    }, 400);
+    }, TOSS_MS);
   });
 
   resetButton.addEventListener("click", () => {
+    clearTimeout(timer);
     heads = 0;
     tails = 0;
     coin.textContent = "?";
@@ -44,14 +63,18 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(panel("Coin", coin)),
-      stack(panel("Result", result), tally)
+      stack(panel("Result", verdict), stats)
     ),
     foot: actions(resetButton, flipButton),
   });
   slot.append(card.node);
   render("");
 
-  return {};
+  return {
+    unmount() {
+      clearTimeout(timer);
+    },
+  };
 }
 
 export default { mount };

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

@@ -91,14 +91,16 @@ export function mount(slot) {
   const cssField = readonly("CSS variable");
 
   const error = notice("error");
-  const reading = el("p", { class: "note" });
+  const reading = el("p", { class: "mvb-note" });
 
-  function show(color, keepPicker) {
+  // `from` names the control the value came from. The text field is never
+  // rewritten while it is being typed into: "#abc" is valid shorthand one
+  // keystroke before it is valid six digit hex, so echoing the expanded form
+  // back would wipe out the rest of what was being typed.
+  function show(color, from) {
     const hex = hexOf(color);
-    if (!keepPicker) {
-      anyField.value = hex.toUpperCase();
-      picker.value = hex;
-    }
+    if (from !== "text") anyField.value = hex.toUpperCase();
+    picker.value = hex;
     hexField.querySelector("input").value = hex.toUpperCase();
     const { h, s, l } = hslOf(color);
     rgbField.querySelector("input").value = color.a < 1
@@ -113,18 +115,23 @@ export function mount(slot) {
     reading.textContent = `Contrast ${onWhite}:1 on white, ${onBlack}:1 on black.${Number(onWhite) >= 4.5 ? "" : " Low on white."}${Number(onBlack) >= 4.5 ? "" : " Low on black."}`;
   }
 
-  function read(text, keepPicker) {
+  function read(text, from) {
+    // An empty field is not a mistake, it is someone clearing it to start over.
+    if (!text.trim()) {
+      error.write("");
+      return;
+    }
     const color = parse(text);
     if (!color) {
       error.write("That color was not recognized.");
       return;
     }
     error.write("");
-    show(color, keepPicker);
+    show(color, from);
   }
 
-  anyField.addEventListener("input", () => read(anyField.value, false));
-  picker.addEventListener("input", () => read(picker.value, true));
+  anyField.addEventListener("input", () => read(anyField.value, "text"));
+  picker.addEventListener("input", () => read(picker.value, "picker"));
 
   const card = toolcard({
     body: bench(
@@ -138,7 +145,7 @@ export function mount(slot) {
     ),
   });
   slot.append(card.node);
-  read("#F5B942", false);
+  read("#F5B942", "init");
 
   return {};
 }

package/mevebu/libs/js/tools/data-masker.js

@@ -55,8 +55,8 @@ export function mount(slot) {
     body: bench(
       stack(
         panel("Values", source),
-        panel("Mask", kinds),
-        el("p", { class: "mvb-note" }, "Masking runs in this tab. Check the result before sharing.")
+        panel("What to mask", kinds),
+        el("p", { class: "mvb-note" }, "Pattern matching can miss a value, so check the result before sharing.")
       ),
       stack(panel("Masked", result))
     ),

package/mevebu/libs/js/tools/fake-data.js

@@ -46,6 +46,15 @@ export function mount(slot) {
     return Math.max(1, Math.min(200, parseInt(countField.value || "1", 10) || 1));
   }
 
+  /** The same rows as the table, tab separated. */
+  function tsv() {
+    const columns = Object.keys(rows[0] ?? {});
+    return [
+      columns.join("\t"),
+      ...rows.map((row) => columns.map((key) => String(row[key])).join("\t")),
+    ].join("\n");
+  }
+
   function render() {
     const total = totalCount();
     rows = Array.from({ length: total }, (_, i) => person(i + 1));
@@ -83,8 +92,11 @@ export function mount(slot) {
     countField.value = String(totalCount());
   });
   copyButton.addEventListener("click", async () => {
-    const text = format === "table" ? JSON.stringify(rows) : text.textContent;
-    toast((await copyText(text)) ? "Copied" : "Copy failed");
+    // In table mode the visible table is what gets copied, as tab separated text
+    // so it lands in a spreadsheet as a table. The local name here used to shadow
+    // the readout above, which threw before the copy ever ran.
+    const payload = format === "table" ? tsv() : text.textContent;
+    toast((await copyText(payload)) ? "Copied" : "Copy failed");
   });
   saveButton.addEventListener("click", () => {
     if (format === "csv") download("test-data.csv", text.textContent, "text/csv");
@@ -94,7 +106,7 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(panel("Format", chips), panel("Records", countField)),
-      el("div", { class: "mvb-scroll" }, text, table)
+      el("div", { class: "mvb-stack" }, text, table)
     ),
     foot: actions(copyButton, saveButton, againButton),
   });

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

@@ -47,8 +47,7 @@ export function mount(slot) {
       stack(
         panel("Message", message),
         panel("Secret key", el("div", { class: "mvb-secret" }, secret, showButton)),
-        panel("Hash", hashField),
-        el("p", { class: "mvb-note" }, "The message and key stay in this tab. Do not paste a production secret into a site you do not trust.")
+        panel("Hash", hashField)
       ),
       stack(panel("Signature", result), error)
     ),

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

@@ -3,9 +3,10 @@
 import { el, icon, bench, stack, panel, textArea, textInput, notice, copyButton, output, debounce, actions, toolcard } from "../core.js";
 
 const encoder = new TextEncoder();
-const decode = (segment) => JSON.parse(new TextDecoder().decode(
-  Uint8Array.from(atob(segment.replace(/-/g, "+").replace(/_/g, "/")), (char) => char.charCodeAt(0))
-));
+
+// Only claims that carry a value the JSON does not show by itself: a Unix
+// timestamp means nothing to read, the date behind it does.
+const TIME_CLAIMS = [["iat", "Issued at"], ["nbf", "Not before"], ["exp", "Expires"]];
 
 const toUrl = (bytes) => {
   let text = "";
@@ -31,8 +32,9 @@ export function mount(slot) {
   const error = notice("error");
   const tokenOut = output({ tag: "textarea", rows: 4 });
   const decoded = output({ rows: 4 });
+  const timePanel = panel("Time claims", decoded);
 
-  const copyBtn = copyButton(() => tokenOut.textContent, "Copy token", "fill");
+  const copyBtn = copyButton(() => tokenOut.value, "Copy token", "fill");
 
   showButton.addEventListener("click", () => {
     const visible = secretField.type === "text";
@@ -70,17 +72,14 @@ export function mount(slot) {
       return;
     }
     tokenOut.write(token);
-    try {
-      const body = decode(token.split(".")[1]);
-      const readable = [
-        body.sub !== undefined ? `Subject: ${body.sub}` : "",
-        body.name !== undefined ? `Name: ${body.name}` : "",
-        body.exp !== undefined ? `Expires: ${new Date(body.exp * 1000).toLocaleString()}` : "No expiry set",
-      ].filter(Boolean).join("\n");
-      decoded.write(readable);
-    } catch {
-      decoded.write("");
-    }
+    const times = TIME_CLAIMS
+      .filter(([key]) => payload[key] !== undefined)
+      .map(([key, label]) => {
+        const value = Number(payload[key]);
+        return Number.isFinite(value) ? `${label}: ${new Date(value * 1000).toLocaleString()}` : `${label}: ${payload[key]}`;
+      });
+    timePanel.hidden = !times.length;
+    decoded.write(times.join("\n"));
   }
 
   // Live signing. The textareas are the only slow field: invalid JSON while a
@@ -98,7 +97,7 @@ export function mount(slot) {
         panel("Secret", el("div", { class: "mvb-secret" }, secretField, showButton)),
         error
       ),
-      stack(panel("Token", tokenOut), panel("Payload reading", decoded))
+      stack(panel("Token", tokenOut), timePanel)
     ),
     foot: actions(copyBtn),
   });

package/mevebu/libs/js/tools/lorem-ipsum.js

@@ -1,6 +1,6 @@
 // Placeholder text by the word, the sentence or the paragraph. The classic
 // opening is a checkbox, not a lock-in, and regeneration never clears the copy.
-import { toast, copyText, chipRow, numberInput, checkbox, button, bench, stack, panel, textArea, readPin, writePin, actions, toolcard } from "../core.js";
+import { toast, copyText, chipRow, numberInput, checkbox, output, button, bench, stack, panel, readPin, writePin, actions, toolcard } from "../core.js";
 
 const WORDS = "lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat duis aute irure in reprehenderit voluptate velit esse cillum eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt culpa qui officia deserunt mollit anim id est laborum".split(" ");
 
@@ -42,7 +42,9 @@ export function mount(slot) {
   );
   const amount = numberInput({ value: saved.amount ?? "3", min: "1", max: "200", "aria-label": "How many" });
   const classic = checkbox("Start with the classic opening", { checked: saved.classic !== false });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area", "aria-label": "Generated text" });
+  // Generated text is read, not typed, so it sits on the recessed surface.
+  const result = output({ tag: "textarea", rows: 12 });
+  result.setAttribute("aria-label", "Generated text");
 
   function totalCount() {
     return Math.max(1, Math.min(200, parseInt(amount.value || "1", 10) || 1));

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

@@ -11,11 +11,9 @@ const SETS = {
 export function mount(slot) {
   const lengthField = rangeInput({ min: "6", max: "64", value: "16", "aria-label": "Length" });
   const lengthLabel = el("span", { class: "mvb-field__label" });
-  const lengthRead = el("p", { class: "note" });
 
   function showLength() {
     lengthLabel.textContent = `Length: ${lengthField.value}`;
-    lengthRead.textContent = `${lengthField.value} characters.`;
   }
 
   const groups = toggleRow([
@@ -27,7 +25,7 @@ export function mount(slot) {
 
   const secret = textInput({ class: "mvb-in mvb-in--mono", readonly: true, "aria-label": "Password", placeholder: "Press Generate" });
   const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Strength" }, el("div", { class: "mvb-meter__fill" }));
-  const strength = el("p", { class: "note" });
+  const strength = notice("note");
   const error = notice("error");
 
   const generateButton = button("Generate", { kind: "fill" });
@@ -37,10 +35,15 @@ export function mount(slot) {
     return groups.values().map((key) => SETS[key]).join("");
   }
 
-  function draw(count) {
+  function draw() {
     const source = pool();
+    const fill = meter.querySelector(".mvb-meter__fill");
     if (!source) {
       secret.value = "";
+      fill.style.width = "0%";
+      fill.className = "mvb-meter__fill";
+      meter.setAttribute("aria-label", "Strength");
+      strength.write("");
       error.write("Pick at least one group above.");
       return;
     }
@@ -60,10 +63,12 @@ export function mount(slot) {
     secret.value = password;
     showLength();
     const bits = Math.round(length * Math.log2(source.length));
-    const fill = meter.querySelector(".mvb-meter__fill");
+    const word = bits < 50 ? "weak" : bits < 90 ? "good" : "strong";
     fill.style.width = `${Math.min(100, (bits / 128) * 100)}%`;
     fill.className = `mvb-meter__fill ${bits < 50 ? "mvb-weak" : bits < 90 ? "mvb-ok" : "mvb-strong"}`;
-    strength.textContent = `${bits} bits, ${bits < 50 ? "weak" : bits < 90 ? "good" : "strong"}.`;
+    // The bar is colour only, so the reading it stands for also goes on the bar itself.
+    meter.setAttribute("aria-label", `Strength: ${bits} bits, ${word}`);
+    strength.write(`${bits} bits, ${word}.`);
   }
 
   lengthField.addEventListener("input", () => { showLength(); draw(); });
@@ -76,7 +81,7 @@ export function mount(slot) {
 
   const card = toolcard({
     body: bench(
-      stack(panel(lengthLabel, lengthField), lengthRead, groups, error),
+      stack(panel(lengthLabel, lengthField), groups, error),
       stack(panel("Password", secret), meter, strength)
     ),
     foot: actions(copyButton, generateButton),

package/mevebu/libs/js/tools/password-strength.js

@@ -14,12 +14,12 @@ const GROUPS = [
 ];
 
 const LEVELS = [
-  { name: "very weak", cls: "mvb-weak" },
-  { name: "weak", cls: "mvb-weak" },
-  { name: "fair", cls: "mvb-ok" },
-  { name: "good", cls: "mvb-ok" },
-  { name: "strong", cls: "mvb-strong" },
-  { name: "very strong", cls: "mvb-strong" },
+  { name: "Very weak", cls: "mvb-weak" },
+  { name: "Weak", cls: "mvb-weak" },
+  { name: "Fair", cls: "mvb-ok" },
+  { name: "Good", cls: "mvb-ok" },
+  { name: "Strong", cls: "mvb-strong" },
+  { name: "Very strong", cls: "mvb-strong" },
 ];
 
 function analyze(value) {
@@ -53,7 +53,7 @@ export function mount(slot) {
   const field = passwordInput({ autocomplete: "off", "aria-label": "Password", placeholder: "Type a password" });
   const showButton = button("Show", { icon: "eye" });
   const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Strength" }, el("div", { class: "mvb-meter__fill" }));
-  const label = el("p", { class: "note" });
+  const label = el("p", { class: "mvb-note text-[1.0625rem] font-bold text-ink" });
   const lengthValue = el("span", { class: "mvb-kv__v" }, "-");
   const groupsValue = el("span", { class: "mvb-kv__v" }, "-");
   const kv = el("div", { class: "mvb-kv" }, kvRow("Length", lengthValue), kvRow("Character groups", groupsValue));
@@ -75,6 +75,7 @@ export function mount(slot) {
       fill.style.width = "0%";
       fill.className = "mvb-meter__fill";
       label.textContent = "";
+      meter.setAttribute("aria-label", "Strength");
       lengthValue.textContent = "-";
       groupsValue.textContent = "-";
       status.write("");
@@ -85,7 +86,9 @@ export function mount(slot) {
     const level = LEVELS[score];
     fill.style.width = `${(score / 5) * 100}%`;
     fill.className = `mvb-meter__fill ${level.cls}`;
-    label.textContent = `${level.name} by length and patterns.`;
+    label.textContent = level.name;
+    // The bar is colour only, so the reading it stands for also goes on the bar itself.
+    meter.setAttribute("aria-label", `Strength: ${level.name}`);
     lengthValue.textContent = `${length} characters`;
     groupsValue.textContent = `${groups} of 4`;
     for (const text of why) {
@@ -101,10 +104,7 @@ export function mount(slot) {
 
   const card = toolcard({
     body: bench(
-      stack(
-        panel("Password", el("div", { class: "mvb-secret" }, field, showButton)),
-        el("p", { class: "mvb-note" }, "The check runs in this tab. Do not type a real password into a site you do not trust.")
-      ),
+      stack(panel("Password", el("div", { class: "mvb-secret" }, field, showButton))),
       stack(meter, label, kv, hints, status)
     ),
     foot: actions(copyButton(() => report, "Copy report", "fill")),

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

@@ -7,7 +7,7 @@ export function mount(slot) {
   const content = textArea({ rows: 4, value: "https://mevebu.app", "aria-label": "Text or link", placeholder: "Text or link" });
   const sizeField = numberInput({ value: "256", min: "120", max: "1024", step: "8", "aria-label": "Size in pixels" });
   const canvas = el("canvas", { class: "mvb-qrcode", role: "img", "aria-label": "QR code" });
-  const reading = el("p", { class: "note" });
+  const reading = el("p", { class: "mvb-note" });
   const error = notice("error");
   let svg = "";
 

package/mevebu/libs/js/tools/secure-token.js

@@ -1,5 +1,5 @@
 // Random tokens from the browser random source, in hex or URL-safe Base64.
-import { el, numberInput, chipRow, output, notice, button, copyButton, bench, stack, panel, actions, toolcard } from "../core.js";
+import { numberInput, chipRow, output, notice, button, copyButton, bench, stack, panel, actions, toolcard } from "../core.js";
 
 function toHex(bytes) {
   return [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
@@ -44,7 +44,6 @@ export function mount(slot) {
       stack(
         panel("Bytes", bytesField),
         panel("Format", formats),
-        el("p", { class: "mvb-note" }, "The token is drawn from the browser random source in this tab. Store real tokens safely."),
         error
       ),
       stack(panel("Token", result))

package/mevebu/libs/js/tools/spin-wheel.js

@@ -1,9 +1,20 @@
 // Spins through your options and lands on one. Canvas wheel with an eased
 // spin, driven by the browser random source, so every option has equal odds.
-import { el, toast, randomInt, bench, stage, stack, panel, textArea, button, output, readPin, writePin, toolcard, actions } from "../core.js";
+import { el, toast, copyButton, randomInt, bench, stage, stack, panel, textArea, button, readPin, writePin, toolcard, actions } from "../core.js";
 
 const SEGMENTS = ["#2456D6", "#151D2E", "#5F8BFF", "#4B5871", "#1A43AD", "#69748C", "#1D2A4D", "#C2CBDF"];
 
+/**
+ * The slice label, in whichever ink reads better on that fill. Every fill in the
+ * palette sits far enough from mid grey that one of the two clears 4.5:1, so a
+ * pale slice never gets white text.
+ */
+function textOn(hex) {
+  const linear = (value) => (value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4);
+  const [r, g, b] = [1, 3, 5].map((at) => linear(parseInt(hex.slice(at, at + 2), 16) / 255));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.2056 ? "#151D2E" : "#FFFFFF";
+}
+
 function entriesFrom(text) {
   return text.split(/\n+/).map((line) => line.trim()).filter(Boolean);
 }
@@ -15,18 +26,18 @@ export function mount(slot) {
   const listField = textArea({ value: saved.entries ?? "", "aria-label": "Options, one per line", placeholder: "One option per line" });
   const canvas = el("canvas", { class: "mvb-wheel", width: 360, height: 360, role: "img", "aria-label": "The wheel" });
   const context = canvas.getContext("2d");
-  const result = output({ rows: 2 });
   const historyBox = el("div", { class: "mvb-wheel__history", role: "list" });
 
   const spinButton = button("Spin", { icon: "rotate-cw", kind: "fill" });
   const clearButton = button("Clear past picks", { icon: "trash", kind: "quiet" });
+  const copyWinner = copyButton(() => winner, "Copy winner");
 
   const status = el("div", { class: "mvb-wheel__status", "aria-live": "polite" }, "Add options, then spin.");
-  result.write("");
 
   let rotation = 0;
   let busy = false;
   let frame = 0;
+  let winner = "";
 
   function draw() {
     const entries = entriesFrom(listField.value);
@@ -44,7 +55,7 @@ export function mount(slot) {
       context.fillStyle = faint;
       context.font = "15px system-ui";
       context.textAlign = "center";
-      context.fillText(entries.length ? "Add one more option to spin" : "Type options on the left", center, center);
+      context.fillText(entries.length ? "Add one more option to spin" : "Type options to spin", center, center);
       status.textContent = entries.length ? "One more option to go." : "Add options, then spin.";
       return;
     }
@@ -61,7 +72,7 @@ export function mount(slot) {
       context.translate(center, center);
       context.rotate(a0 + slice / 2);
       context.textAlign = "right";
-      context.fillStyle = "#fff";
+      context.fillStyle = textOn(SEGMENTS[i % SEGMENTS.length]);
       context.font = "600 13px system-ui, sans-serif";
       const label = entry.length > 13 ? `${entry.slice(0, 12)}…` : entry;
       context.fillText(label, radius - 12, 4);
@@ -92,8 +103,8 @@ export function mount(slot) {
     spinButton.disabled = true;
     status.dataset.winner = "";
     const slice = (Math.PI * 2) / entries.length;
-    const winner = randomInt(entries.length);
-    const finish = (-Math.PI / 2) - (winner * slice + slice / 2);
+    const winnerIndex = randomInt(entries.length);
+    const finish = (-Math.PI / 2) - (winnerIndex * slice + slice / 2);
     const fullTurns = Math.PI * 2 * (5 + randomInt(3));
     const delta = ((finish - rotation) % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2) + fullTurns;
     const start = rotation;
@@ -110,9 +121,9 @@ export function mount(slot) {
         busy = false;
         spinButton.disabled = false;
         status.dataset.winner = "1";
-        status.textContent = entries[winner];
-        result.write(entries[winner]);
-        const chip = el("span", { class: "mvb-wheel__chip", role: "listitem" }, entries[winner]);
+        winner = entries[winnerIndex];
+        status.textContent = winner;
+        const chip = el("span", { class: "mvb-wheel__chip", role: "listitem" }, winner);
         historyBox.prepend(chip);
         while (historyBox.children.length > 12) historyBox.lastChild.remove();
       }
@@ -122,13 +133,14 @@ export function mount(slot) {
 
   listField.addEventListener("input", () => {
     status.dataset.winner = "";
+    winner = "";
     writePin(PIN, { entries: listField.value });
     draw();
   });
   spinButton.addEventListener("click", spin);
   clearButton.addEventListener("click", () => {
     historyBox.replaceChildren();
-    result.write("");
+    winner = "";
     status.dataset.winner = "";
     status.textContent = "Past picks cleared.";
   });
@@ -136,9 +148,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(panel("Options, one per line", listField)),
-      stage(canvas, status, result, historyBox)
+      stage(canvas, status, historyBox)
     ),
-    foot: actions(clearButton, spinButton),
+    foot: actions(copyWinner, clearButton, spinButton),
   });
   slot.append(card.node);
   draw();

package/mevebu/libs/js/tools/url-encoder.js

@@ -1,10 +1,12 @@
 // Percent-encoding for a single value, following encodeURIComponent. The
 // swap button moves the result back into the input for a second round.
-import { bench, stack, panel, textArea, notice, chipRow, button, copyButton, actions, toolcard } from "../core.js";
+import { bench, stack, panel, textArea, output, notice, chipRow, button, copyButton, actions, toolcard } from "../core.js";
 
 export function mount(slot) {
   const source = textArea({ rows: 5, value: "q=hello world&lang=id", "aria-label": "Input" });
-  const result = textArea({ rows: 5, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  // The encoded text is read, not typed, so it sits on the recessed surface.
+  const result = output({ tag: "textarea", rows: 5 });
+  result.setAttribute("aria-label", "Result");
   const error = notice("error");
   let mode = "encode";
 

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

@@ -82,8 +82,7 @@ export function mount(slot) {
     body: bench(
       stack(
         panel("URL", source),
-        error,
-        el("p", { class: "mvb-note" }, "The link is read in this tab. Nothing is opened or requested.")
+        error
       ),
       stack(kv, panel("Checks", flags))
     ),

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

@@ -1,34 +1,129 @@
-// Version 4 UUIDs. Generates a list, copies the whole list, or copies JSON.
-import { el, toast, copyText, download, numberInput, checkbox, button, bench, stack, panel, output, readPin, writePin, actions, toolcard } from "../core.js";
+// UUIDs in the versions that reach a schema: v4 and v7 are random, v7 sorts by
+// time, v1 and v6 are the legacy timestamp pair, and Nil and Max are the two
+// sentinels a test suite looks for.
+import { el, toast, copyText, download, numberInput, checkbox, chipRow, button, bench, stack, panel, output, readPin, writePin, actions, toolcard } from "../core.js";
 
-function uuid() {
+// 100 ns ticks between 1582-10-15 and 1970-01-01, the epoch a v1 stamp counts from.
+const GREGORIAN_OFFSET = 122192928000000000n;
+
+const VERSIONS = [
+  { value: "v4", label: "v4" },
+  { value: "v7", label: "v7" },
+  { value: "v1", label: "v1" },
+  { value: "v6", label: "v6" },
+  { value: "nil", label: "Nil" },
+  { value: "max", label: "Max" },
+];
+
+const toHex = (bytes) => [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+const group = (hex) => `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+const randomHex = (bytes) => toHex(crypto.getRandomValues(new Uint8Array(bytes)));
+
+function v4() {
   if (crypto.randomUUID) return crypto.randomUUID();
   const bytes = crypto.getRandomValues(new Uint8Array(16));
   bytes[6] = (bytes[6] & 0x0f) | 0x40;
   bytes[8] = (bytes[8] & 0x3f) | 0x80;
-  const hex = [...bytes].map((byte) => byte.toString(16).padStart(2, "0"));
-  return `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10).join("")}`;
+  return group(toHex(bytes));
+}
+
+let lastStamp = 0;
+let counter = 0;
+
+/**
+ * v7 puts a 48 bit millisecond stamp in front of random bits, so string order
+ * matches time order. A generated batch lands several UUIDs in the same
+ * millisecond, where the random tail alone would shuffle them, so the 12 bit
+ * field behind the stamp steps like a counter for the rest of that millisecond.
+ * It starts from a random value each millisecond to keep the tail unguessable.
+ */
+function v7() {
+  const bytes = crypto.getRandomValues(new Uint8Array(16));
+  // A clock that steps backwards would break the order as well, so never step back.
+  let ms = Math.max(Date.now(), lastStamp);
+  counter = counter + 1;
+  if (ms !== lastStamp || counter > 0x0fff) {
+    // A new millisecond, or more than 4095 in one: start over, and move the stamp
+    // on rather than hand out two UUIDs with the same timestamp and tail.
+    if (ms === lastStamp) ms += 1;
+    counter = (bytes[6] << 4) | bytes[7];
+  }
+  lastStamp = ms;
+  for (let at = 5; at >= 0; at--) {
+    bytes[at] = ms % 256;
+    ms = Math.floor(ms / 256);
+  }
+  bytes[6] = 0x70 | (counter >> 8);
+  bytes[7] = counter & 0xff;
+  bytes[8] = (bytes[8] & 0x3f) | 0x80;
+  return group(toHex(bytes));
+}
+
+/** The 60 bit timestamp v1 and v6 store, as 15 hex characters, most significant first. */
+const stamp = () => (BigInt(Date.now()) * 10000n + GREGORIAN_OFFSET).toString(16).padStart(15, "0");
+
+/** A node id nobody owns, so a generated v1 cannot point at real hardware. */
+const nodeHex = () => (parseInt(randomHex(1), 16) | 0x01).toString(16).padStart(2, "0") + randomHex(5);
+
+const sequenceHex = () => ((parseInt(randomHex(2), 16) & 0x3fff) | 0x8000).toString(16).padStart(4, "0");
+
+/** v1 and v6 share every field; only the order of the timestamp differs. */
+function timed(version) {
+  const ticks = stamp();
+  const sequence = sequenceHex();
+  const node = nodeHex();
+  // v1 stores the stamp low, mid, high, which is why it never sorts. v6 puts the
+  // high half first so the string order matches the time order.
+  return version === 1
+    ? `${ticks.slice(7)}-${ticks.slice(3, 7)}-1${ticks.slice(0, 3)}-${sequence}-${node}`
+    : `${ticks.slice(0, 8)}-${ticks.slice(8, 12)}-6${ticks.slice(12)}-${sequence}-${node}`;
+}
+
+function make(version) {
+  if (version === "nil") return "00000000-0000-0000-0000-000000000000";
+  if (version === "max") return "ffffffff-ffff-ffff-ffff-ffffffffffff";
+  if (version === "v7") return v7();
+  if (version === "v1") return timed(1);
+  if (version === "v6") return timed(6);
+  return v4();
 }
 
 export function mount(slot) {
   const PIN = "uuid-generator";
-  const saved = readPin(PIN, { count: "5", caps: false });
+  const saved = readPin(PIN, { count: "5", caps: false, noHyphens: false, version: "v4" });
 
   const countField = numberInput({ value: saved.count ?? "5", min: "1", max: "1000", "aria-label": "How many" });
   const capsBox = checkbox("Uppercase", { checked: Boolean(saved.caps) });
+  const hyphensBox = checkbox("No hyphens", { checked: saved.noHyphens === true });
   const result = output({ rows: 8 });
+  let version = VERSIONS.some((item) => item.value === saved.version) ? saved.version : "v4";
   let current = [];
 
+  const versions = chipRow(VERSIONS, {
+    value: version,
+    label: "Version",
+    onChange: (value) => {
+      version = value;
+      generate();
+    },
+  });
+
   function totalCount() {
     return Math.max(1, Math.min(1000, parseInt(countField.value || "1", 10) || 1));
   }
 
   function generate() {
     const total = totalCount();
-    current = Array.from({ length: total }, uuid);
+    current = Array.from({ length: total }, () => make(version));
     if (capsBox.input.checked) current = current.map((value) => value.toUpperCase());
+    if (hyphensBox.input.checked) current = current.map((value) => value.replace(/-/g, ""));
     result.write(current.join("\n"));
-    writePin(PIN, { count: String(total), caps: capsBox.input.checked });
+    writePin(PIN, {
+      count: String(total),
+      caps: capsBox.input.checked,
+      noHyphens: hyphensBox.input.checked,
+      version,
+    });
   }
 
   const generateButton = button("Generate", { icon: "refresh-cw", kind: "fill" });
@@ -44,9 +139,10 @@ export function mount(slot) {
     countField.value = String(totalCount());
   });
   capsBox.input.addEventListener("change", generate);
+  hyphensBox.input.addEventListener("change", generate);
   copyButton.addEventListener("click", async () => {
     if (!current.length) return toast("Generate first, then copy");
-    toast((await copyText(result.textContent)) ? `${current.length} copied` : "Copy failed");
+    toast((await copyText(current.join("\n"))) ? `${current.length} copied` : "Copy failed");
   });
   jsonButton.addEventListener("click", async () => {
     if (!current.length) return toast("Generate first, then copy");
@@ -55,13 +151,13 @@ export function mount(slot) {
   const saveButton = button("Save .txt", { icon: "download" });
   saveButton.addEventListener("click", () => {
     if (!current.length) return toast("Generate first");
-    download("uuids.txt", result.textContent);
+    download("uuids.txt", current.join("\n"));
   });
 
   const card = toolcard({
     body: bench(
-      stack(panel("How many", countField), capsBox),
-      el("div", { class: "mvb-scroll" }, result)
+      stack(panel("Version", versions), panel("How many", countField), el("div", { class: "mvb-chips" }, capsBox, hyphensBox)),
+      result
     ),
     foot: actions(copyButton, jsonButton, saveButton, generateButton),
   });
@@ -71,4 +167,4 @@ export function mount(slot) {
   return {};
 }
 
-export default { mount };
+export default { mount };

package/package.json

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