mevebu 1.2.0 → 1.4.0

package/mevebu/libs/js/tools/sentence-length.js

@@ -8,15 +8,15 @@ const splitSentences = (text) => text.trim()
 const countWords = (text) => text.trim() ? text.trim().split(/\s+/).length : 0;
 
 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;
 }
 
-const kvRow = (key, value) => el("div", { class: "mvb-kv__row" },
-  el("span", { class: "mvb-kv__k" }, key),
-  el("span", { class: "mvb-kv__v" }, value));
+const kvRow = (key, value) => 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" }, key),
+  el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const source = textArea({ rows: 12, "aria-label": "Text", placeholder: "Type or paste text" });
@@ -26,9 +26,9 @@ export function mount(slot) {
   const shortestTile = tile("Shortest");
   const longestTile = tile("Longest");
   const averageTile = tile("Average");
-  const stats = el("div", { class: "mvb-stats" }, sentencesTile, shortestTile, longestTile, averageTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, sentencesTile, shortestTile, longestTile, averageTile);
 
-  const listWrap = el("div", { class: "mvb-scroll" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
   const note = notice("note");
 
   let longText = "";
@@ -56,7 +56,7 @@ export function mount(slot) {
     if (!long.length) {
       listWrap.replaceChildren(blank("text-align-start", "No sentence runs past the threshold."));
     } else {
-      listWrap.replaceChildren(el("div", { class: "mvb-kv" },
+      listWrap.replaceChildren(el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
         ...long.map((sentence) => kvRow(`${countWords(sentence)} words`, sentence))));
     }
   }
@@ -69,8 +69,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Flag past", threshold, "Words")),
       stack(stats, note, panel("Long sentences", listWrap))
     ),
-    foot: actions(copyButton(() => longText, "Copy long sentences", "fill")),
-  });
+    foot: actions(copyButton(() => longText, "Copy long sentences", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/sequence-analyzer.js

@@ -12,17 +12,17 @@ function parseNumbers(text) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  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" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const source = textArea({ rows: 6, value: "2, 5, 8, 11", "aria-label": "Numbers", placeholder: "2, 5, 8, 11" });
   const error = notice("error");
 
-  const terms = el("span", { class: "mvb-kv__v" }, "-");
-  const differences = el("span", { class: "mvb-kv__v" }, "-");
-  const pattern = el("span", { class: "mvb-kv__v" }, "-");
-  const next = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" },
+  const terms = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const differences = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const pattern = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const next = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const kv = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
     kvRow("Terms", terms),
     kvRow("Differences", differences),
     kvRow("Pattern", pattern),
@@ -79,8 +79,7 @@ export function mount(slot) {
       stack(panel("Numbers", source), error),
       stack(panel("Analysis", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/sitemap-xml.js

@@ -15,7 +15,7 @@ const isUrl = (value) => {
 
 export function mount(slot) {
   const base = textInput({ value: "https://example.com", "aria-label": "Base URL" });
-  const pages = textArea({ rows: 8, class: "mvb-in mvb-in--area mvb-in--mono", value: "/\n/about", placeholder: "/\n/about\n/blog", "aria-label": "Pages" });
+  const pages = textArea({ rows: 8, value: "/\n/about", placeholder: "/\n/about\n/blog", "aria-label": "Pages" });
   const freq = selectInput(["always", "hourly", "daily", "weekly", "monthly", "yearly", "never"], { value: "weekly", "aria-label": "Change frequency" });
   const priority = numberInput({ value: "0.8", min: "0", max: "1", step: "0.1", "aria-label": "Priority" });
   const result = output({ rows: 14 });
@@ -43,15 +43,13 @@ export function mount(slot) {
         `    <lastmod>${today}</lastmod>`,
         `    <changefreq>${esc(freq.value)}</changefreq>`,
         `    <priority>${esc(priority.value || "0.5")}</priority>`,
-        "  </url>",
-      ].join("\n");
+        "  </url>"].join("\n");
     });
     result.write([
       '<?xml version="1.0" encoding="UTF-8"?>',
       '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
       ...entries,
-      "</urlset>",
-    ].join("\n"));
+      "</urlset>"].join("\n"));
   }
 
   for (const input of [base, pages, priority]) input.addEventListener("input", build);
@@ -71,8 +69,7 @@ export function mount(slot) {
     foot: actions(
       downloadButton(() => result.textContent, "sitemap.xml", "Save XML", "application/xml"),
       copyButton(() => result.textContent, "Copy XML", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   build();
 

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

@@ -14,15 +14,14 @@ function slugify(text, sep) {
 
 export function mount(slot) {
   const source = textInput({ value: "Hello mevebu world", placeholder: "Title", "aria-label": "Title" });
-  const result = textInput({ readonly: true, class: "mvb-in mvb-in--mono", "aria-label": "Slug" });
+  const result = textInput({ readonly: true, mono: true, "aria-label": "Slug" });
 
   let sep = "-";
   const chips = chipRow(
     [
       { value: "-", label: "Hyphen" },
       { value: "_", label: "Underscore" },
-      { value: ".", label: "Dot" },
-    ],
+      { value: ".", label: "Dot" }],
     { value: "-", label: "Separator", onChange: (value) => { sep = value; run(); } }
   );
 
@@ -37,8 +36,7 @@ export function mount(slot) {
       stack(panel("Title", source), panel("Separator", chips)),
       stack(panel("Slug", result))
     ),
-    foot: actions(copyButton(() => result.value, "Copy slug", "fill")),
-  });
+    foot: actions(copyButton(() => result.value, "Copy slug", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/slug-preview.js

@@ -20,19 +20,19 @@ function slugify(text) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  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" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const title = textInput({ value: "Best running shoes", "aria-label": "Title" });
   const base = textInput({ value: "https://example.com", "aria-label": "Base URL" });
   const error = notice("error");
 
-  const slugValue = el("span", { class: "mvb-kv__v" }, "-");
-  const urlValue = el("span", { class: "mvb-kv__v" }, "-");
-  const lengthValue = el("span", { class: "mvb-kv__v" }, "-");
+  const slugValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const urlValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const lengthValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
   const kv = el(
     "div",
-    { class: "mvb-kv" },
+    { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
     kvRow("Slug", slugValue),
     kvRow("URL", urlValue),
     kvRow("Length", lengthValue)
@@ -72,8 +72,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => urlValue.textContent === "-" ? "" : urlValue.textContent, "Copy URL"),
       copyButton(() => slugValue.textContent === "-" ? "" : slugValue.textContent, "Copy slug", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/sort-lines.js

@@ -3,7 +3,7 @@ import { bench, stack, panel, textArea, chipRow, toggleRow, copyButton, actions,
 
 export function mount(slot) {
   const source = textArea({ rows: 12, "aria-label": "Text", placeholder: "Paste your list, one entry per line" });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  const result = textArea({ rows: 12, readonly: true, "aria-label": "Result" });
 
   let direction = "asc";
   const dirChips = chipRow(
@@ -12,8 +12,7 @@ export function mount(slot) {
   );
   const options = toggleRow([
     { value: "ignore", label: "Ignore case", checked: false },
-    { value: "numeric", label: "Numeric", checked: false },
-  ]);
+    { value: "numeric", label: "Numeric", checked: false }]);
 
   function run() {
     const text = source.value;
@@ -43,8 +42,7 @@ export function mount(slot) {
       stack(panel("Direction", dirChips), options),
       stack(panel("Result", result))
     ),
-    foot: actions(copyButton(() => result.value, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => result.value, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

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();