mevebu 1.3.0 → 1.4.0

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

@@ -44,17 +44,15 @@ function format(css, size) {
   }
   const rest = clean(buffer);
   if (rest) push(rest);
-  return lines.join("\n").replace(/\n{3,}/g, "\n\n").trim();
+  return lines.join("\n").replace(/\n{3}/g, "\n\n").trim();
 }
 
 export function mount(slot) {
   const source = textArea({
     rows: 12,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "CSS",
-    value: ".card{color:red;padding:10px 12px}.card:hover{color:blue}",
-  });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Formatted CSS" });
+    value: ".card{color:red;padding:10px 12px}.card:hover{color:blue}"});
+  const result = textArea({ rows: 12, readonly: true, "aria-label": "Formatted CSS" });
   let size = "2";
 
   const chips = chipRow(
@@ -73,8 +71,7 @@ export function mount(slot) {
       stack(panel("Indent", chips), panel("CSS", source)),
       stack(panel("Formatted", result))
     ),
-    foot: actions(copyButton(() => result.value, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(() => result.value, "Copy CSS", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/css-grid.js

@@ -1,15 +1,15 @@
 // Lay out a CSS grid: columns, rows and gaps with a live preview.
 import { el, bench, stack, panel, numberInput, rangeInput, output, copyButton, actions, toolcard } from "../core.js";
 
-const CELL = "min-height:32px;background:var(--mvb-nebula);border:1px solid var(--mvb-comet);border-radius:6px";
+const CELL = "min-height:32px;background:var(--jade-soft);border:1px solid var(--jade);border-radius:6px";
 
 function slider(label, value) {
   const input = rangeInput({ min: 0, max: 48, value, "aria-label": label });
-  const val = el("span", { class: "mvb-slider__val" }, `${value}px`);
+  const val = el("span", { class: "text-end font-mono text-2xs text-ink-2" }, `${value}px`);
   const node = el(
     "div",
-    { class: "mvb-slider" },
-    el("span", { class: "mvb-slider__label" }, label),
+    { class: "grid items-center gap-2.5 [grid-template-columns:88px_minmax(0,1fr)_62px] max-[45rem]:[grid-template-columns:minmax(0,1fr)_62px]" },
+    el("span", { class: "text-2xs font-semibold text-ink-2 max-[45rem]:col-span-2" }, label),
     input,
     val
   );
@@ -62,10 +62,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(panel("Columns", columns), panel("Rows", rows), columnGap, rowGap),
-      stack(el("div", { class: "mvb-preview" }, grid), code)
+      stack(el("div", { class: "grid min-h-40 place-items-center overflow-hidden rounded-r1 border border-orbit bg-deck-2 p-[22px]" }, grid), code)
     ),
-    foot: actions(copyButton(() => code.textContent, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(() => code.textContent, "Copy CSS", "fill"))});
   slot.append(card.node);
   update();
 

package/mevebu/libs/js/tools/css-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(css, stripComments) {
   let out = "";
@@ -55,12 +55,10 @@ function minify(css, stripComments) {
 export function mount(slot) {
   const source = textArea({
     rows: 12,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "CSS",
-    value: "/* card */\n.card {\n  color: red;\n  padding: 10px 12px;\n}",
-  });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Minified CSS" });
-  const stats = el("div", { class: "mvb-stats" });
+    value: "/* card */\n.card {\n  color: red;\n  padding: 10px 12px;\n}"});
+  const result = textArea({ rows: 12, readonly: true, "aria-label": "Minified CSS" });
+  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 });
@@ -87,8 +85,7 @@ export function mount(slot) {
       stack(panel("Options", comments), panel("CSS", source)),
       stack(panel("Minified", result), stats)
     ),
-    foot: actions(copyButton(() => result.value, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(() => result.value, "Copy CSS", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/csv-to-json.js

@@ -62,7 +62,7 @@ function coerce(value) {
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 12, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "CSV", placeholder: "name,role\nAda,engineer" });
+  const source = textArea({ rows: 12, "aria-label": "CSV", placeholder: "name,role\nAda,engineer" });
   const typedBox = checkbox("Typed values", { checked: true });
   const result = output({ rows: 12 });
   const error = notice("error");
@@ -103,8 +103,7 @@ export function mount(slot) {
       stack(panel("CSV", source), panel(null, typedBox), error),
       stack(panel("JSON", result))
     ),
-    foot: actions(copyButton(() => current, "Copy JSON", "fill")),
-  });
+    foot: actions(copyButton(() => current, "Copy JSON", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/csv-viewer.js

@@ -53,27 +53,26 @@ function detectDelimiter(text) {
 }
 
 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": "CSV", placeholder: "Paste CSV here" });
+  const source = textArea({ rows: 12, "aria-label": "CSV", placeholder: "Paste CSV here" });
   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 file = fileInput({ accept: ".csv,.tsv,.txt,text/csv", "aria-label": "CSV file" });
 
-  const tableWrap = el("div", { class: "mvb-scroll" });
+  const tableWrap = el("div", { class: "max-h-80 overflow-auto" });
   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 = [];
 
@@ -82,7 +81,7 @@ export function mount(slot) {
     const text = source.value;
     if (!text.trim()) {
       current = [];
-      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "Paste CSV or choose a file."));
+      tableWrap.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Paste CSV or choose a file."));
       rowsTile.set("0");
       colsTile.set("0");
       return;
@@ -97,7 +96,7 @@ export function mount(slot) {
     }
     rowsTile.set(String(body.length));
     colsTile.set(String(header.length));
-    tableWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+    tableWrap.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", {}, ...header.map((cell, i) => el("th", {}, cell || `Column ${i + 1}`)))),
       el("tbody", {}, ...body.map((row) => el("tr", {}, ...header.map((_, i) => el("td", {}, row[i] ?? "")))))
     ));
@@ -121,8 +120,7 @@ export function mount(slot) {
       stack(panel("CSV", source), panel("Delimiter", delimiter), panel("CSV file", file), error),
       stack(stats, panel("Table", tableWrap))
     ),
-    foot: actions(clearButton, copyButton(() => current.map((row) => row.join("\t")).join("\n"), "Copy table", "fill")),
-  });
+    foot: actions(clearButton, copyButton(() => current.map((row) => row.join("\t")).join("\n"), "Copy table", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/currency-format.js

@@ -12,8 +12,7 @@ const LOCALES = [
   { value: "id-ID", label: "Indonesian" },
   { value: "hi-IN", label: "Hindi" },
   { value: "ja-JP", label: "Japanese" },
-  { value: "pt-BR", label: "Portuguese (Brazil)" },
-];
+  { value: "pt-BR", label: "Portuguese (Brazil)" }];
 
 function format(locale, currency, value) {
   try {
@@ -28,9 +27,9 @@ export function mount(slot) {
   const currency = selectInput(CURRENCIES, { value: "USD", "aria-label": "Currency" });
   const locale = selectInput(LOCALES, { value: "en-US", "aria-label": "Locale" });
 
-  const amount = el("span", { class: "mvb-stat__v" }, "-");
-  const readout = el("div", { class: "mvb-stats" },
-    el("div", { class: "mvb-stat" }, amount, el("span", { class: "mvb-stat__k" }, "Formatted")));
+  const amount = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const readout = 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" }, amount, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Formatted")));
 
   const note = notice("note");
   note.write("The amount is formatted, not converted. No exchange rate is applied.");
@@ -58,8 +57,7 @@ export function mount(slot) {
       ),
       stack(readout, note)
     ),
-    foot: actions(copyButton(() => formatted, "Copy amount", "fill")),
-  });
+    foot: actions(copyButton(() => formatted, "Copy amount", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -21,20 +21,20 @@ export function mount(slot) {
   let list = Array.isArray(saved) ? saved : [];
 
   const title = textInput({ placeholder: "Activity", "aria-label": "Activity" });
-  const start = el("input", { class: "mvb-in", type: "time", value: "09:00", "aria-label": "Start time" });
-  const end = el("input", { class: "mvb-in", type: "time", value: "10:00", "aria-label": "End time" });
+  const start = 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: "time", value: "09:00", "aria-label": "Start time" });
+  const end = 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: "time", value: "10:00", "aria-label": "End time" });
 
-  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 overlapNote = notice("error");
   const error = notice("error");
 
   const addButton = button("Add", { icon: "plus", kind: "fill" });
   const clearButton = button("Clear day", { icon: "trash" });
 
-  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, list);
 
@@ -69,7 +69,7 @@ export function mount(slot) {
         el("td", {}, flagged.has(item.id) ? "Overlap" : ""),
         el("td", {}, removeButton(item))
       ));
-      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", {}, "Start"), el("th", {}, "End"), el("th", {}, "Activity"),
           el("th", {}, "Length"), el("th", {}, "Note"), el("th", {}, ""))),
@@ -113,8 +113,7 @@ export function mount(slot) {
       ),
       stack(stats, panel("Day", listWrap), overlapNote)
     ),
-    foot: actions(clearButton, addButton),
-  });
+    foot: actions(clearButton, addButton)});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/data-masker.js

@@ -1,9 +1,9 @@
 // Masks emails, card numbers and phone numbers in pasted text.
 import { el, textArea, output, toggleRow, copyButton, bench, stack, panel, actions, toolcard } from "../core.js";
 
-const EMAIL = /[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}/g;
-const CARD = /\b\d[\d -]{11,}\d\b/g;
-const PHONE = /\b\+?\d[\d ().-]{5,}\d\b/g;
+const EMAIL = /[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2}/g;
+const CARD = /\b\d[\d -]{11}\d\b/g;
+const PHONE = /\b\+?\d[\d ().-]{5}\d\b/g;
 
 function maskDigits(value, keep) {
   const digits = value.replace(/\D/g, "");
@@ -28,8 +28,7 @@ export function mount(slot) {
   const kinds = toggleRow([
     { value: "email", label: "Email" },
     { value: "card", label: "Card number" },
-    { value: "phone", label: "Phone number" },
-  ]);
+    { value: "phone", label: "Phone number" }]);
 
   function run() {
     const on = kinds.values();
@@ -56,12 +55,11 @@ export function mount(slot) {
       stack(
         panel("Values", source),
         panel("What to mask", kinds),
-        el("p", { class: "mvb-note" }, "Pattern matching can miss a value, so check the result before sharing.")
+        el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Pattern matching can miss a value, so check the result before sharing.")
       ),
       stack(panel("Masked", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy masked", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy masked", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/data-storage.js

@@ -10,8 +10,7 @@ const UNITS = [
   { value: "KiB", label: "Kibibyte", factor: 1024 },
   { value: "MiB", label: "Mebibyte", factor: 1048576 },
   { value: "GiB", label: "Gibibyte", factor: 1073741824 },
-  { value: "TiB", label: "Tebibyte", factor: 1099511627776 },
-];
+  { value: "TiB", label: "Tebibyte", factor: 1099511627776 }];
 
 const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
 const options = UNITS.map(({ value, label }) => ({ value, label }));
@@ -28,13 +27,13 @@ export function mount(slot) {
   const value = numberInput({ value: "1", step: "any", "aria-label": "Value" });
   const from = selectInput(options, { value: "MB", "aria-label": "From unit" });
   const to = selectInput(options, { value: "MiB", "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 scaleNote = notice("note");
   scaleNote.write("KB is 1000 bytes, KiB is 1024 bytes.");
   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() {
@@ -54,7 +53,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),
@@ -78,8 +77,7 @@ export function mount(slot) {
       stack(panel("Value", value), panel("From", from), panel("To", to), scaleNote, 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/data-validator.js

@@ -2,8 +2,8 @@
 import { el, bench, stack, panel, textArea, selectInput, textInput, notice, copyButton, actions, toolcard } from "../core.js";
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "0");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -17,16 +17,15 @@ export function mount(slot) {
     { value: "number", label: "Number" },
     { value: "minlength", label: "Minimum length" },
     { value: "maxlength", label: "Maximum length" },
-    { value: "regex", label: "Regex" },
-  ], { value: "email", "aria-label": "Rule" });
+    { value: "regex", label: "Regex" }], { value: "email", "aria-label": "Rule" });
   const setting = textInput({ "aria-label": "Rule setting", placeholder: "Number" });
   const settingField = panel("Setting", setting);
 
-  const tableWrap = el("div", { class: "mvb-scroll" });
+  const tableWrap = el("div", { class: "max-h-80 overflow-auto" });
   const totalTile = tile("Total");
   const validTile = tile("Valid");
   const invalidTile = tile("Invalid");
-  const stats = el("div", { class: "mvb-stats" }, totalTile, validTile, invalidTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, totalTile, validTile, invalidTile);
   const error = notice("error");
   let failing = [];
 
@@ -72,11 +71,11 @@ export function mount(slot) {
     failing = failures;
 
     if (!values.length) {
-      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "Paste one value per line."));
+      tableWrap.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Paste one value per line."));
     } else if (!failures.length) {
-      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "Every value passes."));
+      tableWrap.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Every value passes."));
     } else {
-      tableWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+      tableWrap.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", {}, "Value"), el("th", {}, "Reason"))),
         el("tbody", {}, ...failures.map((row) => el("tr", {},
           el("th", {}, String(row.line)),
@@ -100,8 +99,7 @@ export function mount(slot) {
       stack(panel("Values", source), panel("Rule", rule), settingField, error),
       stack(stats, panel("Failed rows", tableWrap))
     ),
-    foot: actions(copyButton(() => failing.map((row) => row.value).join("\n"), "Copy failing values", "fill")),
-  });
+    foot: actions(copyButton(() => failing.map((row) => row.value).join("\n"), "Copy failing values", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/date-difference.js

@@ -30,18 +30,18 @@ function calendarDiff(from, to) {
 }
 
 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: "date", value: "2026-01-01", "aria-label": "Start date" });
   const end = textInput({ type: "date", value: "2026-12-31", "aria-label": "End date" });
   const includeEnd = checkbox("Include the end date", { checked: false });
-  const days = el("span", { class: "mvb-kv__v" }, "-");
-  const weeks = el("span", { class: "mvb-kv__v" }, "-");
-  const calendar = el("span", { class: "mvb-kv__v" }, "-");
+  const days = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const weeks = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const calendar = 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("Total days", days),
     kvRow("Weeks", weeks),
     kvRow("Calendar gap", calendar)
@@ -89,8 +89,7 @@ export function mount(slot) {
       stack(panel("Start", start), panel("End", end), includeEnd, error),
       stack(panel("Difference", 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/date-format.js

@@ -4,8 +4,7 @@ import { el, bench, stack, panel, textInput, selectInput, notice, copyButton, ac
 const FORMATS = [
   { value: "iso", label: "ISO (yyyy-mm-dd)" },
   { value: "dmy", label: "Day first (dd/mm/yyyy)" },
-  { value: "mdy", label: "Month first (mm/dd/yyyy)" },
-];
+  { value: "mdy", label: "Month first (mm/dd/yyyy)" }];
 
 const pad = (n) => String(n).padStart(2, "0");
 
@@ -41,20 +40,20 @@ function intlFormat(date, options, fallback) {
   }
 }
 
-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 format = selectInput(FORMATS, { value: "iso", "aria-label": "Input format" });
   const entry = textInput({ placeholder: "2026-10-15", "aria-label": "Date" });
 
-  const iso = el("span", { class: "mvb-kv__v" }, "-");
-  const long = el("span", { class: "mvb-kv__v" }, "-");
-  const medium = el("span", { class: "mvb-kv__v" }, "-");
-  const weekday = el("span", { class: "mvb-kv__v" }, "-");
-  const unix = el("span", { class: "mvb-kv__v" }, "-");
-  const out = el("div", { class: "mvb-kv" },
+  const iso = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const long = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const medium = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const weekday = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const unix = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const out = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
     kvRow("ISO", iso),
     kvRow("Long", long),
     kvRow("Medium", medium),
@@ -96,8 +95,7 @@ export function mount(slot) {
       stack(panel("Input format", format), panel("Date", entry), error),
       stack(out, note)
     ),
-    foot: actions(copyButton(() => isoText, "Copy ISO date", "fill")),
-  });
+    foot: actions(copyButton(() => isoText, "Copy ISO date", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -5,8 +5,7 @@ const OPTIONS = [
   { value: ",", label: "Comma" },
   { value: ";", label: "Semicolon" },
   { value: "\t", label: "Tab" },
-  { value: "|", label: "Pipe" },
-];
+  { value: "|", label: "Pipe" }];
 
 function parseDelimited(text, delimiter) {
   const rows = [];
@@ -68,7 +67,7 @@ function stringifyCSV(rows, delimiter) {
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 12, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Data", placeholder: "Paste delimited data here" });
+  const source = textArea({ rows: 12, "aria-label": "Data", placeholder: "Paste delimited data here" });
   const from = selectInput([{ value: "auto", label: "Auto" }, ...OPTIONS], { value: "auto", "aria-label": "Current delimiter" });
   const to = selectInput(OPTIONS, { value: ";", "aria-label": "New delimiter" });
   const result = output({ rows: 12 });
@@ -98,8 +97,7 @@ export function mount(slot) {
       stack(panel("Data", source), panel("From", from), panel("To", to), error),
       stack(panel("Result", result))
     ),
-    foot: actions(copyButton(() => current, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => current, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/discount-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;
 }
@@ -20,7 +20,7 @@ export function mount(slot) {
   const finalTile = tile("Final price");
   const savedTile = tile("Saved");
   const effectiveTile = tile("Effective discount");
-  const stats = el("div", { class: "mvb-stats" }, finalTile, savedTile, effectiveTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, finalTile, savedTile, effectiveTile);
   const error = notice("error");
   let text = "";
 
@@ -72,8 +72,7 @@ export function mount(slot) {
       ),
       stack(stats)
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/doi-resolver.js

@@ -2,8 +2,8 @@
 import { el, bench, stack, panel, textInput, notice, copyButton, actions, toolcard } from "../core.js";
 
 function kvRow(key) {
-  const value = el("span", { class: "mvb-kv__v" }, "-");
-  const row = el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), value);
+  const value = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const row = 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), value);
   return { row, value };
 }
 
@@ -18,7 +18,7 @@ export function mount(slot) {
   const input = textInput({ placeholder: "10.1000/xyz or https://doi.org/10.1000/xyz", "aria-label": "DOI" });
   const doiRow = kvRow("Cleaned DOI");
   const linkRow = kvRow("Resolver URL");
-  const kv = el("div", { class: "mvb-kv" }, doiRow.row, linkRow.row);
+  const kv = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" }, doiRow.row, linkRow.row);
   const error = notice("error");
   const note = notice("note");
   note.write("A matching pattern does not prove the DOI is registered.");
@@ -56,8 +56,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => doiRow.value.textContent, "Copy DOI"),
       copyButton(() => link, "Copy link", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   run();
 

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

@@ -23,11 +23,9 @@ function parse(text) {
 export function mount(slot) {
   const source = textArea({
     rows: 12,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "Environment variables",
     placeholder: "KEY=value",
-    value: "API_URL=https://example.com\n# a note\nPORT=3000\nAPI_URL=https://other.com",
-  });
+    value: "API_URL=https://example.com\n# a note\nPORT=3000\nAPI_URL=https://other.com"});
   const result = output({ rows: 12 });
   const warn = notice("warn");
   let sort = true;
@@ -58,11 +56,10 @@ export function mount(slot) {
 
   const card = toolcard({
     body: bench(
-      stack(panel("Options", el("div", { class: "mvb-stack" }, sortSwitch, commentSwitch)), panel("Input", source), warn),
+      stack(panel("Options", el("div", { class: "grid content-start gap-4" }, sortSwitch, commentSwitch)), panel("Input", source), warn),
       stack(panel("Tidied", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy list", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy list", "fill"))});
   slot.append(card.node);
   run();