mevebu 1.2.0 → 1.3.0

package/mevebu/app/tailwind.css

@@ -1417,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);

package/mevebu/app/tailwind.src.css

@@ -667,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;
   }

package/mevebu/libs/js/core.js

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

package/mevebu/libs/js/registry.js

@@ -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/color-converter.js

@@ -93,12 +93,14 @@ export function mount(slot) {
   const error = notice("error");
   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/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/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.2.0",
+  "version": "1.3.0",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",