mevebu 1.2.0 → 1.4.0

package/mevebu/libs/js/tools/utf8-bytes.js

@@ -2,8 +2,8 @@
 import { el, bench, stack, panel, textArea, copyButton, actions, toolcard } from "../core.js";
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "0");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -22,7 +22,7 @@ export function mount(slot) {
   const pointTile = tile("Code points");
   const byteTile = tile("UTF-8 bytes");
   const unitTile = tile("UTF-16 units");
-  const stats = el("div", { class: "mvb-stats" }, characterTile, pointTile, byteTile, unitTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, characterTile, pointTile, byteTile, unitTile);
 
   let counts = { characters: 0, points: 0, bytes: 0, units: 0 };
 
@@ -31,8 +31,7 @@ export function mount(slot) {
       `${counts.characters} characters`,
       `${counts.points} code points`,
       `${counts.bytes} UTF-8 bytes`,
-      `${counts.units} UTF-16 units`,
-    ].join("\n");
+      `${counts.units} UTF-16 units`].join("\n");
   }
 
   function run() {
@@ -41,8 +40,7 @@ export function mount(slot) {
       characters: graphemes(text),
       points: Array.from(text).length,
       bytes: new TextEncoder().encode(text).length,
-      units: text.length,
-    };
+      units: text.length};
     characterTile.set(String(counts.characters));
     pointTile.set(String(counts.points));
     byteTile.set(String(counts.bytes));
@@ -56,8 +54,7 @@ export function mount(slot) {
       stack(panel("Text", source)),
       stack(stats)
     ),
-    foot: actions(copyButton(summary, "Copy counts", "fill")),
-  });
+    foot: actions(copyButton(summary, "Copy counts", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -1,34 +1,126 @@
-// 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 +136,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,20 +148,19 @@ 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: "flex flex-wrap gap-1.5" }, capsBox, hyphensBox)),
+      result
     ),
-    foot: actions(copyButton, jsonButton, saveButton, generateButton),
-  });
+    foot: actions(copyButton, jsonButton, saveButton, generateButton)});
   slot.append(card.node);
   generate();
 
   return {};
 }
 
-export default { mount };
+export default { mount };

package/mevebu/libs/js/tools/version-compare.js

@@ -8,8 +8,8 @@ function parse(text) {
 }
 
 export function mount(slot) {
-  const left = textInput({ value: "1.2.0", class: "mvb-in mvb-in--mono", "aria-label": "First version" });
-  const right = textInput({ value: "1.1.5", class: "mvb-in mvb-in--mono", "aria-label": "Second version" });
+  const left = textInput({ value: "1.2.0", mono: true, "aria-label": "First version" });
+  const right = textInput({ value: "1.1.5", mono: true, "aria-label": "Second version" });
   const error = notice("error");
   const out = output({ rows: 8 });
   let text = "";
@@ -59,8 +59,7 @@ export function mount(slot) {
       stack(panel("First version", left), panel("Second version", right), error),
       stack(panel("Comparison", out))
     ),
-    foot: actions(copyButton(() => text, "Copy comparison", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy comparison", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/video-duration.js

@@ -7,8 +7,8 @@ const clock = (seconds) => {
 };
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "0:00");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0:00");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -22,7 +22,7 @@ export function mount(slot) {
   const wordsTile = tile("Words");
   const speakTile = tile("Speaking");
   const totalTile = tile("With pauses");
-  const stats = el("div", { class: "mvb-stats" }, wordsTile, speakTile, totalTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, wordsTile, speakTile, totalTile);
   const note = notice("note");
   note.write("Speaking rates vary by person and script.");
 
@@ -42,8 +42,7 @@ export function mount(slot) {
     summary = [
       `${words} words`,
       `Speaking ${clock(speaking)} at ${wpm} words per minute`,
-      `Total ${clock(total)} with ${pauseSeconds} seconds of pause per minute`,
-    ].join("\n");
+      `Total ${clock(total)} with ${pauseSeconds} seconds of pause per minute`].join("\n");
   }
 
   source.addEventListener("input", run);
@@ -61,8 +60,7 @@ export function mount(slot) {
       ),
       stack(stats, note)
     ),
-    foot: actions(copyButton(() => summary, "Copy estimate", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy estimate", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -11,8 +11,7 @@ const UNITS = [
   { value: "cup", label: "Cup", factor: 0.2365882365 },
   { value: "pt", label: "Pint", factor: 0.473176473 },
   { value: "qt", label: "Quart", factor: 0.946352946 },
-  { value: "gal", label: "Gallon", factor: 3.785411784 },
-];
+  { value: "gal", label: "Gallon", factor: 3.785411784 }];
 
 const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
 const options = UNITS.map(({ value, label }) => ({ value, label }));
@@ -29,11 +28,11 @@ export function mount(slot) {
   const value = numberInput({ value: "1", step: "any", "aria-label": "Value" });
   const from = selectInput(options, { value: "l", "aria-label": "From unit" });
   const to = selectInput(options, { value: "gal", "aria-label": "To unit" });
-  const result = el("span", { class: "mvb-stat__v" }, "-");
-  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "Result"), result));
-  const factor = el("p", { class: "mvb-note" });
+  const result = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Result"), result));
+  const factor = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const error = notice("error");
-  const scroll = el("div", { class: "mvb-scroll" });
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
   let text = "";
 
   function run() {
@@ -53,7 +52,7 @@ export function mount(slot) {
     const out = (n * a.factor) / b.factor;
     result.textContent = `${fmt(out)} ${b.value}`;
     factor.textContent = `1 ${a.value} = ${fmt(a.factor / b.factor)} ${b.value}`;
-    scroll.replaceChildren(el("table", { class: "mvb-ttable" },
+    scroll.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
       el("thead", {}, el("tr", {}, el("th", {}, "Unit"), el("th", {}, "Value"))),
       el("tbody", {}, ...UNITS.map((unit) => el("tr", {},
         el("td", {}, unit.label),
@@ -77,8 +76,7 @@ export function mount(slot) {
       stack(panel("Value", value), panel("From", from), panel("To", to), error),
       stack(panel("Result", stats), factor, panel("All units", scroll))
     ),
-    foot: actions(swap, copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(swap, copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/weekly-planner.js

@@ -11,8 +11,8 @@ export function mount(slot) {
   let day = Number.isInteger(saved.day) && saved.day >= 0 && saved.day < 7 ? saved.day : 0;
 
   const entry = textInput({ placeholder: "New item", "aria-label": "New item" });
-  const listWrap = el("div", { class: "mvb-scroll" });
-  const stats = el("div", { class: "mvb-stats" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
 
   const dayChips = chipRow(DAYS.map((label, value) => ({ value, label })), {
     value: day,
@@ -21,15 +21,14 @@ export function mount(slot) {
       day = next;
       save();
       render();
-    },
-  });
+    }});
 
   const addButton = button("Add", { icon: "plus", kind: "fill" });
   const copyWeek = copyButton(() => weekText(), "Copy week");
 
-  const tile = (key, value) => el("div", { class: "mvb-stat" },
-    el("span", { class: "mvb-stat__v" }, String(value)),
-    el("span", { class: "mvb-stat__k" }, key));
+  const tile = (key, value) => el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+    el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, String(value)),
+    el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
 
   const save = () => writePin(PIN, { day, days });
 
@@ -53,7 +52,7 @@ export function mount(slot) {
       save();
       render();
     });
-    return el("div", { class: "mvb-row" }, box, remove);
+    return el("div", { class: "flex min-w-0 flex-wrap items-center gap-2" }, box, remove);
   }
 
   function renderStats() {
@@ -90,8 +89,7 @@ export function mount(slot) {
       stack(panel("Day", dayChips), panel("New item", entry)),
       stack(stats, panel("Items", listWrap))
     ),
-    foot: actions(copyWeek, addButton),
-  });
+    foot: actions(copyWeek, addButton)});
   slot.append(card.node);
   render();
 

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

@@ -8,8 +8,7 @@ const UNITS = [
   { value: "t", label: "Tonne", factor: 1000000 },
   { value: "oz", label: "Ounce", factor: 28.349523125 },
   { value: "lb", label: "Pound", factor: 453.59237 },
-  { value: "st", label: "Stone", factor: 6350.29318 },
-];
+  { value: "st", label: "Stone", factor: 6350.29318 }];
 
 const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
 const options = UNITS.map(({ value, label }) => ({ value, label }));
@@ -26,11 +25,11 @@ export function mount(slot) {
   const value = numberInput({ value: "1", step: "any", "aria-label": "Value" });
   const from = selectInput(options, { value: "kg", "aria-label": "From unit" });
   const to = selectInput(options, { value: "lb", "aria-label": "To unit" });
-  const result = el("span", { class: "mvb-stat__v" }, "-");
-  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "Result"), result));
-  const factor = el("p", { class: "mvb-note" });
+  const result = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Result"), result));
+  const factor = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const error = notice("error");
-  const scroll = el("div", { class: "mvb-scroll" });
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
   let text = "";
 
   function run() {
@@ -50,7 +49,7 @@ export function mount(slot) {
     const out = (n * a.factor) / b.factor;
     result.textContent = `${fmt(out)} ${b.value}`;
     factor.textContent = `1 ${a.value} = ${fmt(a.factor / b.factor)} ${b.value}`;
-    scroll.replaceChildren(el("table", { class: "mvb-ttable" },
+    scroll.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
       el("thead", {}, el("tr", {}, el("th", {}, "Unit"), el("th", {}, "Value"))),
       el("tbody", {}, ...UNITS.map((unit) => el("tr", {},
         el("td", {}, unit.label),
@@ -74,8 +73,7 @@ export function mount(slot) {
       stack(panel("Value", value), panel("From", from), panel("To", to), error),
       stack(panel("Result", stats), factor, panel("All units", scroll))
     ),
-    foot: actions(swap, copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(swap, copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/weighted-average.js

@@ -12,8 +12,8 @@ function parseNumbers(text) {
 }
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "-");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -24,7 +24,7 @@ export function mount(slot) {
   const weighted = tile("Weighted average");
   const totalWeight = tile("Total weight");
   const count = tile("Count");
-  const stats = el("div", { class: "mvb-stats" }, weighted, totalWeight, count);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, weighted, totalWeight, count);
   const error = notice("error");
   let text = "";
 
@@ -75,8 +75,7 @@ export function mount(slot) {
       stack(panel("Values", values), panel("Weights", weights), error),
       stack(stats)
     ),
-    foot: actions(copyButton(() => text, "Copy summary", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy summary", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/word-counter.js

@@ -5,8 +5,8 @@ import { el, bench, stack, panel, textArea, numberInput, notice, button, copyBut
 const WPM = 200;
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "0");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -24,11 +24,11 @@ export function mount(slot) {
   const sentencesTile = tile("Sentences");
   const linesTile = tile("Lines");
   const readingTile = tile("Reading time");
-  const stats = el("div", { class: "mvb-stats" }, wordsTile, charsTile, sentencesTile, linesTile, readingTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, wordsTile, charsTile, sentencesTile, linesTile, readingTile);
 
-  const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Word limit" }, el("div", { class: "mvb-meter__fill" }));
+  const meter = el("div", { class: "h-2 overflow-hidden rounded-full bg-deck-2", role: "img", "aria-label": "Word limit" }, el("div", { class: "h-full w-0 rounded-full bg-orbit-hard transition-[width,background-color] duration-150 data-[level=weak]:bg-danger data-[level=ok]:bg-star data-[level=strong]:bg-jade" }));
   const limitNote = notice("note");
-  const fill = meter.querySelector(".mvb-meter__fill");
+  const fill = meter.firstElementChild;
 
   let counts = { words: 0, chars: 0, sentences: 0, lines: 0 };
 
@@ -37,8 +37,7 @@ export function mount(slot) {
       `${counts.words} words`,
       `${counts.chars} characters`,
       `${counts.sentences} sentences`,
-      `${counts.lines} lines`,
-    ].join("\n");
+      `${counts.lines} lines`].join("\n");
   }
 
   function run() {
@@ -48,8 +47,7 @@ export function mount(slot) {
       words,
       chars: text.length,
       sentences: countSentences(text),
-      lines: text ? text.split("\n").length : 0,
-    };
+      lines: text ? text.split("\n").length : 0};
     wordsTile.set(String(counts.words));
     charsTile.set(String(counts.chars));
     sentencesTile.set(String(counts.sentences));
@@ -60,11 +58,11 @@ export function mount(slot) {
     if (limit > 0) {
       const ratio = words / limit;
       fill.style.width = `${Math.min(100, ratio * 100)}%`;
-      fill.className = `mvb-meter__fill ${ratio > 1 ? "mvb-weak" : ratio > 0.8 ? "mvb-ok" : "mvb-strong"}`;
+      fill.dataset.level = ratio > 1 ? "weak" : ratio > 0.8 ? "ok" : "strong";
       limitNote.write(ratio > 1 ? `${words - limit} over the limit.` : `${limit - words} words left.`);
     } else {
       fill.style.width = "0%";
-      fill.className = "mvb-meter__fill";
+      delete fill.dataset.level;
       limitNote.write("");
     }
   }
@@ -79,8 +77,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Word limit", limitField)),
       stack(stats, meter, limitNote)
     ),
-    foot: actions(clearButton, copyButton(summary, "Copy summary", "fill")),
-  });
+    foot: actions(clearButton, copyButton(summary, "Copy summary", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/word-limit.js

@@ -2,8 +2,8 @@
 import { el, bench, stack, panel, textArea, numberInput, notice, copyButton, actions, toolcard } from "../core.js";
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "0");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -17,7 +17,7 @@ export function mount(slot) {
   const wordsTile = tile("Words");
   const minTile = tile("To minimum");
   const maxTile = tile("To maximum");
-  const stats = el("div", { class: "mvb-stats" }, wordsTile, minTile, maxTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, wordsTile, minTile, maxTile);
   const status = notice("note");
   const note = notice("note");
   note.write("Each hyphenated word and each number counts as one word.");
@@ -49,8 +49,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Minimum", min), panel("Maximum", max), note),
       stack(stats, status)
     ),
-    foot: actions(copyButton(() => summary, "Copy count", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy count", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/yaml-formatter.js

@@ -31,21 +31,21 @@ function check(source) {
 
 export function mount(slot) {
   const source = textArea({ rows: 11, value: "name: mevebu\ntools:\n  - unicode\n  - json", "aria-label": "YAML" });
-  const scroll = el("div", { class: "mvb-scroll" });
-  const count = el("span", { class: "mvb-stat__v" }, "0");
-  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, count, el("span", { class: "mvb-stat__k" }, "Problems")));
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
+  const count = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, count, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Problems")));
   let problems = [];
 
   function run() {
     problems = check(source.value);
     count.textContent = String(problems.length);
     if (!problems.length) {
-      scroll.replaceChildren(el("p", { class: "mvb-note" }, "No problems."));
+      scroll.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "No problems."));
       return;
     }
     scroll.replaceChildren(el(
       "table",
-      { class: "mvb-ttable" },
+      { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
       el("thead", {}, el("tr", {}, el("th", {}, "Line"), el("th", {}, "Problem"))),
       el("tbody", {}, ...problems.map((entry) => el("tr", {},
         el("th", {}, String(entry.line)),
@@ -60,8 +60,7 @@ export function mount(slot) {
       stack(panel("YAML", source)),
       stack(stats, panel("Problems", scroll))
     ),
-    foot: actions(copyButton(() => problems.map((entry) => `${entry.line}: ${entry.message}`).join("\n"), "Copy problems", "fill")),
-  });
+    foot: actions(copyButton(() => problems.map((entry) => `${entry.line}: ${entry.message}`).join("\n"), "Copy problems", "fill"))});
   slot.append(card.node);
   run();
 

package/package.json

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