mevebu 1.3.0 → 1.4.1

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

@@ -15,15 +15,14 @@ const reverseLines = (text) => text ? text.split("\n").reverse().join("\n") : ""
 
 export function mount(slot) {
   const source = textArea({ rows: 10, "aria-label": "Text", placeholder: "Type or paste text" });
-  const result = textArea({ rows: 10, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  const result = textArea({ rows: 10, readonly: true, "aria-label": "Result" });
 
   let mode = "chars";
   const chips = chipRow(
     [
       { value: "chars", label: "Characters" },
       { value: "words", label: "Words" },
-      { value: "lines", label: "Lines" },
-    ],
+      { value: "lines", label: "Lines" }],
     { value: "chars", label: "Reverse by", onChange: (value) => { mode = value; run(); } }
   );
 
@@ -40,8 +39,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Reverse by", chips)),
       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/time-duration.js

@@ -11,19 +11,19 @@ function parseTime(value) {
 }
 
 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 start = textInput({ type: "time", value: "09:00", "aria-label": "Start time" });
   const end = textInput({ type: "time", value: "17:30", "aria-label": "End time" });
   const breakMin = numberInput({ value: "30", min: "0", "aria-label": "Break in minutes" });
 
-  const result = el("span", { class: "mvb-stat__v" }, "-");
-  const tile = el("div", { class: "mvb-stat" }, result, el("span", { class: "mvb-stat__k" }, "Duration"));
-  const stats = el("div", { class: "mvb-stats" }, tile);
-  const minutesOut = el("span", { class: "mvb-kv__v" }, "-");
-  const decimalOut = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" }, kvRow("Total minutes", minutesOut), kvRow("Decimal hours", decimalOut));
+  const result = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const tile = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, result, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Duration"));
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, tile);
+  const minutesOut = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimalOut = 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("Total minutes", minutesOut), kvRow("Decimal hours", decimalOut));
   const error = notice("error");
   let text = "";
 
@@ -72,8 +72,7 @@ export function mount(slot) {
       stack(panel("Start", start), panel("End", end), panel("Break in minutes", breakMin), error),
       stack(stats, panel("Breakdown", 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/timestamp-converter.js

@@ -6,8 +6,7 @@ function relative(date) {
   const abs = Math.abs(diff);
   const units = [
     ["year", 31536000000], ["month", 2592000000], ["day", 86400000],
-    ["hour", 3600000], ["minute", 60000], ["second", 1000],
-  ];
+    ["hour", 3600000], ["minute", 60000], ["second", 1000]];
   for (const [unit, ms] of units) {
     if (abs >= ms) {
       const value = Math.round(abs / ms);
@@ -32,11 +31,11 @@ function parse(text) {
 }
 
 const row = (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 = textInput({ value: "1700000000", "aria-label": "Timestamp or date", placeholder: "1700000000 or 2026-01-01T00:00:00Z" });
-  const kv = el("div", { class: "mvb-kv" });
+  const kv = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });
   const error = notice("error");
   let iso = "";
 
@@ -74,8 +73,7 @@ export function mount(slot) {
       stack(panel("Timestamp or date", source), error),
       stack(panel("Reading", kv))
     ),
-    foot: actions(nowButton, copyButton(() => iso, "Copy ISO 8601", "fill")),
-  });
+    foot: actions(nowButton, copyButton(() => iso, "Copy ISO 8601", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -18,8 +18,7 @@ const FALLBACK_ZONES = [
   "Asia/Shanghai",
   "Asia/Tokyo",
   "Asia/Singapore",
-  "Australia/Sydney",
-];
+  "Australia/Sydney"];
 
 function zoneList() {
   let zones = FALLBACK_ZONES;
@@ -68,8 +67,7 @@ function offsetMs(timeZone, date) {
     day: "2-digit",
     hour: "2-digit",
     minute: "2-digit",
-    second: "2-digit",
-  });
+    second: "2-digit"});
   for (const part of format.formatToParts(date)) parts[part.type] = part.value;
   const hour = parts.hour === "24" ? 0 : Number(parts.hour);
   const asUTC = Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day), hour, Number(parts.minute), Number(parts.second));
@@ -85,7 +83,7 @@ function wallToInstant(day, time, timeZone) {
 const pad = (n) => String(n).padStart(2, "0");
 
 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 zones = zoneList();
@@ -95,10 +93,10 @@ export function mount(slot) {
   const fromZone = selectInput(zones, { value: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC", "aria-label": "Source zone" });
   const toZone = selectInput(zones, { value: "UTC", "aria-label": "Target zone" });
 
-  const target = el("span", { class: "mvb-kv__v" }, "-");
-  const utc = el("span", { class: "mvb-kv__v" }, "-");
-  const diff = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" }, kvRow("Target time", target), kvRow("UTC", utc), kvRow("Offset", diff));
+  const target = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const utc = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const diff = 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("Target time", target), kvRow("UTC", utc), kvRow("Offset", diff));
   const error = notice("error");
   let text = "";
 
@@ -127,8 +125,7 @@ export function mount(slot) {
         month: "short",
         year: "numeric",
         hour: "2-digit",
-        minute: "2-digit",
-      }).format(instant);
+        minute: "2-digit"}).format(instant);
       const utcText = `${instant.getUTCFullYear()}-${pad(instant.getUTCMonth() + 1)}-${pad(instant.getUTCDate())} ${pad(instant.getUTCHours())}:${pad(instant.getUTCMinutes())} UTC`;
       const deltaHours = (offsetMs(toZone.value, instant) - offsetMs(fromZone.value, instant)) / 3600000;
       const sign = deltaHours > 0 ? "+" : deltaHours < 0 ? "-" : "";
@@ -152,8 +149,7 @@ export function mount(slot) {
       stack(panel("Date", date), panel("Time", time), panel("From", fromZone), panel("To", toZone), error),
       stack(panel("Result", 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/title-length.js

@@ -4,8 +4,8 @@ import { el, blank, bench, stack, panel, textArea, numberInput, copyButton, acti
 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;
 }
@@ -17,9 +17,9 @@ export function mount(slot) {
   const titlesTile = tile("Titles");
   const overTile = tile("Over the limit");
   const longestTile = tile("Longest");
-  const stats = el("div", { class: "mvb-stats" }, titlesTile, overTile, longestTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, titlesTile, overTile, longestTile);
 
-  const listWrap = el("div", { class: "mvb-scroll" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
   let listText = "";
 
   function run() {
@@ -42,7 +42,7 @@ export function mount(slot) {
       el("th", {}, item.title),
       el("td", {}, cap > 0 && item.chars > cap ? `${item.chars} over` : String(item.chars)),
       el("td", {}, String(item.words))));
-    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", {}, "Title"), el("th", {}, "Characters"), el("th", {}, "Words"))),
       el("tbody", {}, ...rows)));
     listText = items.map((item) => `${item.chars} characters, ${item.words} words  ${item.title}`).join("\n");
@@ -56,8 +56,7 @@ export function mount(slot) {
       stack(panel("Titles", source), panel("Character limit", limit)),
       stack(stats, panel("By length", listWrap))
     ),
-    foot: actions(copyButton(() => listText, "Copy list", "fill")),
-  });
+    foot: actions(copyButton(() => listText, "Copy list", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/unicode-inspector.js

@@ -11,18 +11,18 @@ function describe(char) {
 
 export function mount(slot) {
   const source = textArea({ rows: 8, value: "mevebu", "aria-label": "Text" });
-  const scroll = el("div", { class: "mvb-scroll" });
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
   let rows = [];
 
   function run() {
     rows = Array.from(source.value).map(describe);
     if (!rows.length) {
-      scroll.replaceChildren(el("p", { class: "mvb-note" }, "Type or paste text."));
+      scroll.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Type or paste text."));
       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", {}, "Character"),
         el("th", {}, "Code point"),
@@ -47,8 +47,7 @@ export function mount(slot) {
       () => rows.map((entry) => `${entry.char}\t${entry.point}\t${entry.decimal}\t${entry.bytes}`).join("\n"),
       "Copy table",
       "fill"
-    )),
-  });
+    ))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/url-inspector.js

@@ -4,23 +4,23 @@ import { el, textInput, notice, copyButton, bench, stack, panel, actions, toolca
 const IPV4 = /^\d{1,3}(\.\d{1,3}){3}$/;
 
 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 = textInput({ value: "https://example.com/login?next=/home", "aria-label": "URL" });
-  const scheme = el("span", { class: "mvb-kv__v" }, "-");
-  const host = el("span", { class: "mvb-kv__v" }, "-");
-  const port = el("span", { class: "mvb-kv__v" }, "-");
-  const path = el("span", { class: "mvb-kv__v" }, "-");
+  const scheme = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const host = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const port = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const path = 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("Scheme", scheme),
     kvRow("Host", host),
     kvRow("Port", port),
     kvRow("Path", path)
   );
-  const flags = el("div", { class: "mvb-stack" });
+  const flags = el("div", { class: "grid content-start gap-4" });
   const error = notice("error");
   let summary = "";
 
@@ -86,8 +86,7 @@ export function mount(slot) {
       ),
       stack(kv, panel("Checks", flags))
     ),
-    foot: actions(copyButton(() => summary, "Copy host", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy host", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/url-parser.js

@@ -2,32 +2,32 @@
 import { el, bench, stack, panel, textInput, notice, copyButton, actions, toolcard } from "../core.js";
 
 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 = textInput({ value: "https://example.com:8443/blog/post?utm_source=news&page=2#top", "aria-label": "URL" });
   const error = notice("error");
 
-  const protocol = el("span", { class: "mvb-kv__v" }, "-");
-  const host = el("span", { class: "mvb-kv__v" }, "-");
-  const port = el("span", { class: "mvb-kv__v" }, "-");
-  const path = el("span", { class: "mvb-kv__v" }, "-");
-  const hash = el("span", { class: "mvb-kv__v" }, "-");
+  const protocol = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const host = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const port = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const path = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const hash = 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("Protocol", protocol),
     kvRow("Host", host),
     kvRow("Port", port),
     kvRow("Path", path),
     kvRow("Hash", hash)
   );
-  const tableWrap = el("div", { class: "mvb-scroll" });
+  const tableWrap = el("div", { class: "max-h-80 overflow-auto" });
   let paramsText = "";
 
   function clear() {
     for (const node of [protocol, host, port, path, hash]) node.textContent = "-";
-    tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "No query parameters."));
+    tableWrap.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "No query parameters."));
     paramsText = "";
   }
 
@@ -49,13 +49,13 @@ export function mount(slot) {
     hash.textContent = url.hash || "-";
     const params = [...url.searchParams];
     if (!params.length) {
-      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "No query parameters."));
+      tableWrap.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "No query parameters."));
       paramsText = "";
       return;
     }
     tableWrap.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", {}, "Key"), el("th", {}, "Value"))),
       el("tbody", {}, ...params.map(([key, value]) => el("tr", {}, el("td", {}, key), el("td", {}, value))))
     ));
@@ -72,8 +72,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => source.value.trim(), "Copy URL"),
       copyButton(() => paramsText, "Copy params", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   run();
 

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

@@ -12,8 +12,7 @@ const VERSIONS = [
   { value: "v1", label: "v1" },
   { value: "v6", label: "v6" },
   { value: "nil", label: "Nil" },
-  { value: "max", label: "Max" },
-];
+  { 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)}`;
@@ -105,8 +104,7 @@ export function mount(slot) {
     onChange: (value) => {
       version = value;
       generate();
-    },
-  });
+    }});
 
   function totalCount() {
     return Math.max(1, Math.min(1000, parseInt(countField.value || "1", 10) || 1));
@@ -122,8 +120,7 @@ export function mount(slot) {
       count: String(total),
       caps: capsBox.input.checked,
       noHyphens: hyphensBox.input.checked,
-      version,
-    });
+      version});
   }
 
   const generateButton = button("Generate", { icon: "refresh-cw", kind: "fill" });
@@ -156,11 +153,10 @@ export function mount(slot) {
 
   const card = toolcard({
     body: bench(
-      stack(panel("Version", versions), panel("How many", countField), el("div", { class: "mvb-chips" }, capsBox, hyphensBox)),
+      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();
 

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