mevebu 1.3.0 → 1.4.0

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

@@ -6,8 +6,7 @@ const UNITS = [
   { value: "kmh", label: "Kilometer per hour", factor: 0.2777777777777778 },
   { value: "mph", label: "Mile per hour", factor: 0.44704 },
   { value: "fps", label: "Foot per second", factor: 0.3048 },
-  { value: "kn", label: "Knot", factor: 0.5144444444444445 },
-];
+  { value: "kn", label: "Knot", factor: 0.5144444444444445 }];
 
 const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
 const options = UNITS.map(({ value, label }) => ({ value, label }));
@@ -24,11 +23,11 @@ export function mount(slot) {
   const value = numberInput({ value: "1", step: "any", "aria-label": "Value" });
   const from = selectInput(options, { value: "kmh", "aria-label": "From unit" });
   const to = selectInput(options, { value: "mph", "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() {
@@ -48,7 +47,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),
@@ -72,8 +71,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/spin-wheel.js

@@ -2,7 +2,9 @@
 // spin, driven by the browser random source, so every option has equal odds.
 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 palette. A green ramp that alternates dark and light, so two
+// neighbouring slices never read as one wedge and every label stays legible.
+const SEGMENTS = ["#0f6b4a", "#e0f0e7", "#0a5138", "#bfcac1", "#35805f", "#1d3b2c", "#8fd0b3", "#0b2a1e"];
 
 /**
  * The slice label, in whichever ink reads better on that fill. Every fill in the
@@ -12,7 +14,7 @@ const SEGMENTS = ["#2456D6", "#151D2E", "#5F8BFF", "#4B5871", "#1A43AD", "#69748
 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";
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.2056 ? "#101a15" : "#FFFFFF";
 }
 
 function entriesFrom(text) {
@@ -24,15 +26,15 @@ export function mount(slot) {
   const saved = readPin(PIN, { entries: "Ana\nBudi\nCitra\nDimas\nElena\nFajar" });
 
   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 canvas = el("canvas", { class: "h-auto w-[min(320px,100%)]", width: 360, height: 360, role: "img", "aria-label": "The wheel" });
   const context = canvas.getContext("2d");
-  const historyBox = el("div", { class: "mvb-wheel__history", role: "list" });
+  const historyBox = el("div", { class: "flex max-w-[340px] flex-wrap justify-center gap-1.5", 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.");
+  const status = el("div", { class: "text-balance text-xl font-bold tracking-[-0.01em]", "aria-live": "polite" }, "Add options, then spin.");
 
   let rotation = 0;
   let busy = false;
@@ -45,15 +47,17 @@ export function mount(slot) {
     const center = size / 2;
     const radius = center - 12;
     const root = getComputedStyle(document.documentElement);
-    const ground = root.getPropertyValue("--mvb-void").trim() || "#fff";
-    const orbit = root.getPropertyValue("--mvb-orbit-hard").trim() || "#888";
-    const faint = root.getPropertyValue("--mvb-ink-3").trim() || "#888";
-    const comet = root.getPropertyValue("--mvb-comet").trim() || "#2456D6";
+    const ground = root.getPropertyValue("--void").trim() || "#fff";
+    const orbit = root.getPropertyValue("--orbit-hard").trim() || "#888";
+    const faint = root.getPropertyValue("--ink-3").trim() || "#888";
+    const jade = root.getPropertyValue("--jade").trim() || "#0f6b4a";
+    // Canvas text is outside the stylesheet, so it reads the same stack the page uses.
+    const stack = root.getPropertyValue("--sans").trim() || "system-ui, sans-serif";
 
     context.clearRect(0, 0, size, size);
     if (entries.length < 2) {
       context.fillStyle = faint;
-      context.font = "15px system-ui";
+      context.font = `15px ${stack}`;
       context.textAlign = "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.";
@@ -73,7 +77,7 @@ export function mount(slot) {
       context.rotate(a0 + slice / 2);
       context.textAlign = "right";
       context.fillStyle = textOn(SEGMENTS[i % SEGMENTS.length]);
-      context.font = "600 13px system-ui, sans-serif";
+      context.font = `600 13px ${stack}`;
       const label = entry.length > 13 ? `${entry.slice(0, 12)}…` : entry;
       context.fillText(label, radius - 12, 4);
       context.restore();
@@ -90,7 +94,7 @@ export function mount(slot) {
     context.lineTo(center + 8, 2);
     context.lineTo(center, 20);
     context.closePath();
-    context.fillStyle = comet;
+    context.fillStyle = jade;
     context.fill();
     if (status.dataset.winner !== "1") status.textContent = "Add options, then spin.";
   }
@@ -123,7 +127,7 @@ export function mount(slot) {
         status.dataset.winner = "1";
         winner = entries[winnerIndex];
         status.textContent = winner;
-        const chip = el("span", { class: "mvb-wheel__chip", role: "listitem" }, winner);
+        const chip = el("span", { class: "rounded-full border border-orbit bg-deck-2 px-2.5 py-1 text-2xs font-semibold", role: "listitem" }, winner);
         historyBox.prepend(chip);
         while (historyBox.children.length > 12) historyBox.lastChild.remove();
       }
@@ -150,8 +154,7 @@ export function mount(slot) {
       stack(panel("Options, one per line", listField)),
       stage(canvas, status, historyBox)
     ),
-    foot: actions(copyWinner, clearButton, spinButton),
-  });
+    foot: actions(copyWinner, clearButton, spinButton)});
   slot.append(card.node);
   draw();
 
@@ -159,8 +162,7 @@ export function mount(slot) {
     unmount() {
       cancelAnimationFrame(frame);
       busy = false;
-    },
-  };
+    }};
 }
 
 export default { mount };

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

@@ -4,8 +4,7 @@ import { bench, stack, panel, textArea, notice, switchControl, copyButton, actio
 const CLAUSES = [
   "SELECT", "FROM", "WHERE", "GROUP BY", "ORDER BY", "HAVING", "LIMIT", "OFFSET", "VALUES", "SET",
   "INSERT INTO", "UPDATE", "DELETE FROM", "INNER JOIN", "LEFT JOIN", "RIGHT JOIN", "FULL JOIN",
-  "CROSS JOIN", "JOIN", "UNION ALL", "UNION", "CREATE TABLE", "ALTER TABLE", "DROP TABLE", "WITH", "RETURNING",
-];
+  "CROSS JOIN", "JOIN", "UNION ALL", "UNION", "CREATE TABLE", "ALTER TABLE", "DROP TABLE", "WITH", "RETURNING"];
 const WORDS = [...CLAUSES, "AND", "OR", "ON", "AS", "IN", "IS", "NOT", "NULL", "LIKE", "BETWEEN", "DISTINCT", "ASC", "DESC", "CASE", "WHEN", "THEN", "ELSE", "END"];
 
 const toPattern = (word) => word.replace(/ /g, "\\s+");
@@ -33,18 +32,16 @@ function format(sql, upper) {
   out = out.replace(clauseRe, "\n$1");
   out = out.replace(/\s*\b(AND|OR)\b/gi, "\n  $1");
   out = out.replace(/\(\s+/g, "(").replace(/\s+\)/g, ")");
-  out = out.replace(/\n{3,}/g, "\n\n").trim();
+  out = out.replace(/\n{3}/g, "\n\n").trim();
   return restore(out, store);
 }
 
 export function mount(slot) {
   const source = textArea({
     rows: 12,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "SQL",
-    value: "select id, name from users where active = true and age > 18 order by name",
-  });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Formatted SQL" });
+    value: "select id, name from users where active = true and age > 18 order by name"});
+  const result = textArea({ rows: 12, readonly: true, "aria-label": "Formatted SQL" });
   const error = notice("error");
   let upper = true;
 
@@ -67,8 +64,7 @@ export function mount(slot) {
       stack(panel("Options", casing), panel("SQL", source), error),
       stack(panel("Formatted", result))
     ),
-    foot: actions(copyButton(() => result.value, "Copy query", "fill")),
-  });
+    foot: actions(copyButton(() => result.value, "Copy query", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/sql-minifier.js

@@ -4,7 +4,7 @@ import { el, bench, stack, panel, textArea, switchControl, copyButton, actions,
 const bytes = (text) => new TextEncoder().encode(text).length;
 
 const tile = (key, value) =>
-  el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__v" }, value), el("span", { class: "mvb-stat__k" }, key));
+  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" }, value), el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
 
 function minify(sql, stripComments) {
   let out = "";
@@ -59,12 +59,10 @@ function minify(sql, stripComments) {
 export function mount(slot) {
   const source = textArea({
     rows: 12,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "SQL",
-    value: "SELECT id,\n       name\n  FROM users\n WHERE active = true\n   AND age > 18;",
-  });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Minified SQL" });
-  const stats = el("div", { class: "mvb-stats" });
+    value: "SELECT id,\n       name\n  FROM users\n WHERE active = true\n   AND age > 18;"});
+  const result = textArea({ rows: 12, readonly: true, "aria-label": "Minified SQL" });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
   let stripComments = true;
 
   const comments = switchControl("Remove comments", { checked: true });
@@ -91,8 +89,7 @@ export function mount(slot) {
       stack(panel("Options", comments), panel("SQL", source)),
       stack(panel("Minified", result), stats)
     ),
-    foot: actions(copyButton(() => result.value, "Copy query", "fill")),
-  });
+    foot: actions(copyButton(() => result.value, "Copy query", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/standard-deviation.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 variance = tile("Variance");
   const deviation = tile("Std deviation");
   const count = tile("Count");
-  const stats = el("div", { class: "mvb-stats" }, mean, variance, deviation, count);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, mean, variance, deviation, count);
   const error = notice("error");
   let kind = "population";
   let text = "";
@@ -66,16 +66,14 @@ export function mount(slot) {
   const chips = chipRow(
     [
       { value: "population", label: "Population" },
-      { value: "sample", label: "Sample" },
-    ],
+      { value: "sample", label: "Sample" }],
     {
       value: kind,
       label: "Data set",
       onChange: (value) => {
         kind = value;
         run();
-      },
-    }
+      }}
   );
 
   source.addEventListener("input", run);
@@ -85,8 +83,7 @@ export function mount(slot) {
       stack(panel("Numbers", source), panel("Data set", chips), 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/stopwatch.js

@@ -15,7 +15,7 @@ function format(ms) {
 
 export function mount(slot) {
   const display = output({ rows: 2 });
-  const listWrap = el("div", { class: "mvb-scroll" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
 
   const startButton = button("Start", { icon: "play", kind: "fill" });
   const lapButton = button("Lap", { icon: "plus" });
@@ -59,7 +59,7 @@ export function mount(slot) {
         el("td", {}, format(total))
       );
     });
-    listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+    listWrap.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", {}, "#"), el("th", {}, "Lap"), el("th", {}, "Total"))),
       el("tbody", {}, ...rows)
     ));
@@ -115,8 +115,7 @@ export function mount(slot) {
       stack(panel("Laps", listWrap)),
       stack(display)
     ),
-    foot: actions(copyLaps, resetButton, lapButton, startButton),
-  });
+    foot: actions(copyLaps, resetButton, lapButton, startButton)});
   slot.append(card.node);
   paint();
   renderLaps();
@@ -126,8 +125,7 @@ export function mount(slot) {
     unmount() {
       cancelAnimationFrame(frame);
       running = false;
-    },
-  };
+    }};
 }
 
 export default { mount };

package/mevebu/libs/js/tools/study-schedule.js

@@ -9,16 +9,16 @@ export function mount(slot) {
   let list = Array.isArray(saved) ? saved : [];
 
   const name = textInput({ placeholder: "Topic", "aria-label": "Topic" });
-  const date = el("input", { class: "mvb-in", type: "date", "aria-label": "Session date" });
-  const listWrap = el("div", { class: "mvb-scroll" });
-  const stats = el("div", { class: "mvb-stats" });
+  const date = el("input", { class: "min-w-0 rounded-r1 border border-orbit bg-deck text-ink transition-[border-color,box-shadow] duration-150 placeholder:text-ink-3 hover:border-orbit-hard focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft w-full min-h-[var(--ctl)] px-3 py-2.5 text-base", type: "date", "aria-label": "Session date" });
+  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 addButton = button("Add", { icon: "plus", kind: "fill" });
 
   const save = () => writePin(PIN, list);
-  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 sorted = () => list.slice().sort((a, b) => (a.date || "9999").localeCompare(b.date || "9999"));
 
@@ -50,7 +50,7 @@ export function mount(slot) {
     if (!rows.length) {
       listWrap.replaceChildren(blank("calendar-days", "No topics yet."));
     } else {
-      listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+      listWrap.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", {}, "Topic"), el("th", {}, "Date"), el("th", {}, ""))),
         el("tbody", {}, ...rows.map(rowNode))));
     }
@@ -77,8 +77,7 @@ export function mount(slot) {
       stack(panel("Topic", name), panel("Session date", date)),
       stack(stats, panel("Plan", listWrap))
     ),
-    foot: actions(copyButton(() => sorted().map((item) => `${item.date || "No date"}  ${item.done ? "[x]" : "[ ]"} ${item.name}`).join("\n"), "Copy plan"), addButton),
-  });
+    foot: actions(copyButton(() => sorted().map((item) => `${item.date || "No date"}  ${item.done ? "[x]" : "[ ]"} ${item.name}`).join("\n"), "Copy plan"), addButton)});
   slot.append(card.node);
   render();
 

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

@@ -5,8 +5,8 @@ const isTiming = (line) => line.includes("-->");
 const isIndex = (line) => /^\d+$/.test(line.trim());
 
 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;
 }
@@ -18,9 +18,9 @@ export function mount(slot) {
   const linesTile = tile("Lines");
   const longTile = tile("Long lines");
   const longestTile = tile("Longest");
-  const stats = el("div", { class: "mvb-stats" }, linesTile, longTile, longestTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, linesTile, longTile, longestTile);
 
-  const longWrap = el("div", { class: "mvb-scroll" });
+  const longWrap = el("div", { class: "max-h-80 overflow-auto" });
   const out = output({ rows: 10 });
   const note = notice("note");
 
@@ -41,16 +41,16 @@ export function mount(slot) {
     if (!long.length) {
       longWrap.replaceChildren(blank("film", "No line runs past the limit."));
     } else {
-      longWrap.replaceChildren(el("div", { class: "mvb-kv" },
-        ...long.map((line) => el("div", { class: "mvb-kv__row" },
-          el("span", { class: "mvb-kv__k" }, `${line.length}`),
-          el("span", { class: "mvb-kv__v" }, line)))));
+      longWrap.replaceChildren(el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
+        ...long.map((line) => el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" },
+          el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, `${line.length}`),
+          el("span", { class: "wrap-anywhere font-mono text-2xs" }, line)))));
     }
 
     tidied = raw
       .map((line) => line.replace(/\s+$/, ""))
       .join("\n")
-      .replace(/\n{3,}/g, "\n\n")
+      .replace(/\n{3}/g, "\n\n")
       .replace(/^\n+|\n+$/g, "");
     out.write(tidied);
   }
@@ -63,8 +63,7 @@ export function mount(slot) {
       stack(panel("Subtitles", source), panel("Maximum line length", max), note),
       stack(stats, panel("Long lines", longWrap), panel("Tidied", out))
     ),
-    foot: actions(copyButton(() => tidied, "Copy text", "fill")),
-  });
+    foot: actions(copyButton(() => tidied, "Copy text", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/table-to-markdown.js

@@ -55,32 +55,30 @@ function detectDelimiter(text) {
 const escapeCell = (cell) => String(cell ?? "").replace(/\|/g, "\\|").replace(/\s*\n\s*/g, " ").trim();
 
 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;
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 12, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Table data", placeholder: "Paste rows copied from a spreadsheet" });
+  const source = textArea({ rows: 12, "aria-label": "Table data", placeholder: "Paste rows copied from a spreadsheet" });
   const delimiter = selectInput([
     { value: "auto", label: "Auto" },
     { value: ",", label: "Comma" },
     { value: ";", label: "Semicolon" },
     { value: "\t", label: "Tab" },
-    { value: "|", label: "Pipe" },
-  ], { value: "auto", "aria-label": "Delimiter" });
+    { value: "|", label: "Pipe" }], { value: "auto", "aria-label": "Delimiter" });
   const alignment = selectInput([
     { value: "none", label: "None" },
     { value: "left", label: "Left" },
     { value: "center", label: "Center" },
-    { value: "right", label: "Right" },
-  ], { value: "none", "aria-label": "Alignment" });
+    { value: "right", label: "Right" }], { value: "none", "aria-label": "Alignment" });
 
   const result = output({ rows: 12 });
   const rowsTile = tile("Rows");
   const colsTile = tile("Columns");
-  const stats = el("div", { class: "mvb-stats" }, rowsTile, colsTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, rowsTile, colsTile);
   const error = notice("error");
   let current = "";
 
@@ -112,8 +110,7 @@ export function mount(slot) {
     current = [
       line(header.map(escapeCell)),
       line(separator(header.length)),
-      ...body.map((row) => line(header.map((_, i) => escapeCell(row[i])))),
-    ].join("\n");
+      ...body.map((row) => line(header.map((_, i) => escapeCell(row[i]))))].join("\n");
     result.write(current);
   }
 
@@ -126,8 +123,7 @@ export function mount(slot) {
       stack(panel("Table data", source), panel("Delimiter", delimiter), panel("Alignment", alignment), error),
       stack(stats, panel("Markdown", result))
     ),
-    foot: actions(copyButton(() => current, "Copy Markdown", "fill")),
-  });
+    foot: actions(copyButton(() => current, "Copy Markdown", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/tax-calculator.js

@@ -6,8 +6,8 @@ function fmt(n) {
 }
 
 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;
 }
@@ -23,7 +23,7 @@ export function mount(slot) {
   const taxTile = tile("Tax");
   const netTile = tile("Net");
   const grossTile = tile("Total");
-  const stats = el("div", { class: "mvb-stats" }, taxTile, netTile, grossTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, taxTile, netTile, grossTile);
   const error = notice("error");
   const note = notice("note");
   note.write("You set the rate. No official rule is applied.");
@@ -73,8 +73,7 @@ export function mount(slot) {
       stack(panel("Amount", amount), panel("Amount type", chips), panel("Tax rate %", rate), error),
       stack(stats, note)
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -4,8 +4,7 @@ import { el, bench, stack, panel, numberInput, selectInput, notice, copyButton,
 const SCALES = [
   { value: "c", label: "Celsius" },
   { value: "f", label: "Fahrenheit" },
-  { value: "k", label: "Kelvin" },
-];
+  { value: "k", label: "Kelvin" }];
 
 const byId = Object.fromEntries(SCALES.map((scale) => [scale.value, scale]));
 const options = SCALES.map(({ value, label }) => ({ value, label }));
@@ -19,8 +18,7 @@ const FORMULAS = {
   "f-c": "C = (F - 32) x 5/9",
   "f-k": "K = (F - 32) x 5/9 + 273.15",
   "k-c": "C = K - 273.15",
-  "k-f": "F = (K - 273.15) x 9/5 + 32",
-};
+  "k-f": "F = (K - 273.15) x 9/5 + 32"};
 
 function fmt(value) {
   if (!Number.isFinite(value)) return "-";
@@ -34,11 +32,11 @@ export function mount(slot) {
   const value = numberInput({ value: "0", step: "any", "aria-label": "Value" });
   const from = selectInput(options, { value: "c", "aria-label": "From scale" });
   const to = selectInput(options, { value: "f", "aria-label": "To scale" });
-  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 formula = 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 formula = 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() {
@@ -59,7 +57,7 @@ export function mount(slot) {
     const out = fromCelsius(celsius, b.value);
     result.textContent = `${fmt(out)} ${b.value === "k" ? "K" : `°${b.value.toUpperCase()}`}`;
     formula.textContent = a.value === b.value ? "" : FORMULAS[`${a.value}-${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", {}, "Scale"), el("th", {}, "Value"))),
       el("tbody", {}, ...SCALES.map((scale) => el("tr", {},
         el("td", {}, scale.label),
@@ -83,8 +81,7 @@ export function mount(slot) {
       stack(panel("Value", value), panel("From", from), panel("To", to), error),
       stack(panel("Result", stats), formula, panel("All scales", 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/text-diff.js

@@ -8,9 +8,8 @@ export function mount(slot) {
   const right = textArea({ rows: 9, "aria-label": "Second text", placeholder: "Second text" });
   const options = toggleRow([
     { value: "ignore", label: "Ignore case", checked: false },
-    { value: "spaces", label: "Ignore spaces", checked: false },
-  ]);
-  const diffBox = el("div", { class: "mvb-diff" });
+    { value: "spaces", label: "Ignore spaces", checked: false }]);
+  const diffBox = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });
   const note = notice("note");
   let rows = [];
 
@@ -66,8 +65,14 @@ export function mount(slot) {
     const removed = rows.filter(([type]) => type === "del").length;
     diffBox.replaceChildren(...rows.map(([type, raw]) => el(
       "div",
-      { class: `mvb-diff__row${type === "add" ? " mvb-diff__row--add" : type === "del" ? " mvb-diff__row--del" : ""}` },
-      el("span", { class: "mvb-diff__sign" }, type === "add" ? "+" : type === "del" ? "-" : " "),
+      {
+        // One row skin. The add/del tint and the sign colour hang off the data
+        // attribute, so a row never carries two competing background utilities.
+        class:
+          "grid bg-deck font-mono text-2xs [grid-template-columns:34px_minmax(0,1fr)] [&>span]:wrap-anywhere [&>span]:px-2.5 [&>span]:py-[3px] [&>span]:whitespace-pre-wrap data-[kind=add]:bg-[var(--add)] data-[kind=add]:[&>span:first-child]:text-jade data-[kind=del]:bg-[var(--del)] data-[kind=del]:[&>span:first-child]:text-danger",
+        dataset: { kind: type },
+      },
+      el("span", { class: "border-e border-orbit text-center text-ink-3 select-none" }, type === "add" ? "+" : type === "del" ? "-" : " "),
       el("span", {}, raw)
     )));
     const counts = !added && !removed
@@ -93,8 +98,7 @@ export function mount(slot) {
       stack(panel("First text", left), panel("Second text", right), options, note),
       stack(panel("Difference", diffBox))
     ),
-    foot: actions(swapButton, copyButton(diffText, "Copy diff", "fill")),
-  });
+    foot: actions(swapButton, copyButton(diffText, "Copy diff", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/text-direction.js

@@ -14,7 +14,7 @@ function detect(text) {
 
 export function mount(slot) {
   const source = textArea({ rows: 6, "aria-label": "Text", placeholder: "Type or paste text" });
-  const sample = el("div", { class: "mvb-preview__sample" }, "Sample text");
+  const sample = el("div", { class: "w-full rounded-lg border border-orbit bg-deck px-[18px] py-4" }, "Sample text");
   const code = output();
 
   let mode = "auto";
@@ -22,8 +22,7 @@ export function mount(slot) {
     [
       { value: "auto", label: "Auto" },
       { value: "ltr", label: "Left to right" },
-      { value: "rtl", label: "Right to left" },
-    ],
+      { value: "rtl", label: "Right to left" }],
     { value: "auto", label: "Direction", onChange: (next) => { mode = next; run(); } }
   );
 
@@ -44,8 +43,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Direction", dirChips)),
       stack(panel("Preview", sample), panel("Attribute", code))
     ),
-    foot: actions(copyButton(() => snippet, "Copy attribute", "fill")),
-  });
+    foot: actions(copyButton(() => snippet, "Copy attribute", "fill"))});
   slot.append(card.node);
   run();