mevebu 1.1.0 → 1.2.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;
@@ -1679,7 +1652,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 +1724,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 +1745,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 +1819,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 +1886,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 +2071,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 {
@@ -766,7 +759,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 +780,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 +819,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 +854,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 +929,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"
   );
 
@@ -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.2.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.",
       ],

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,7 +91,7 @@ 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) {
     const hex = hexOf(color);

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

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