mevebu 1.2.0 → 1.4.0

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

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

@@ -8,15 +8,13 @@ const GREEK = {
   theta: "θ", iota: "ι", kappa: "κ", lambda: "λ", mu: "μ", nu: "ν", xi: "ξ",
   pi: "π", rho: "ρ", sigma: "σ", tau: "τ", phi: "φ", chi: "χ", psi: "ψ", omega: "ω",
   Gamma: "Γ", Delta: "Δ", Theta: "Θ", Lambda: "Λ", Xi: "Ξ", Pi: "Π", Sigma: "Σ",
-  Phi: "Φ", Psi: "Ψ", Omega: "Ω",
-};
+  Phi: "Φ", Psi: "Ψ", Omega: "Ω"};
 const SYMBOLS = {
   times: "×", cdot: "·", div: "÷", pm: "±", mp: "∓", le: "≤", leq: "≤",
   ge: "≥", geq: "≥", ne: "≠", neq: "≠", approx: "≈", equiv: "≡", infty: "∞",
   sum: "Σ", prod: "Π", int: "∫", partial: "∂", nabla: "∇", rightarrow: "→",
   to: "→", leftarrow: "←", Rightarrow: "⇒", Leftarrow: "⇐", leftrightarrow: "↔",
-  in: "∈", notin: "∉", forall: "∀", exists: "∃", angle: "∠", degree: "°",
-};
+  in: "∈", notin: "∉", forall: "∀", exists: "∃", angle: "∠", degree: "°"};
 
 const superscript = (value) => [...value].map((char) => SUP[char] ?? char).join("");
 const subscript = (value) => [...value].map((char) => SUB[char] ?? char).join("");
@@ -43,9 +41,8 @@ export function mount(slot) {
     rows: 12,
     value: "x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}",
     "aria-label": "LaTeX",
-    placeholder: "\\frac{a}{b}",
-  });
-  const result = el("pre", { class: "mvb-out" });
+    placeholder: "\\frac{a}{b}"});
+  const result = el("pre", { class: "m-0 max-h-[340px] w-full overflow-auto rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3 font-mono text-sm leading-normal whitespace-pre-wrap [overflow-wrap:anywhere]" });
   const note = notice("note");
   note.write("Plain text preview, not rendered math.");
 
@@ -60,8 +57,7 @@ export function mount(slot) {
       stack(panel("LaTeX", source)),
       stack(panel("Preview", result), note)
     ),
-    foot: actions(copyButton(() => source.value, "Copy LaTeX", "fill")),
-  });
+    foot: actions(copyButton(() => source.value, "Copy LaTeX", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/expense-split.js

@@ -18,7 +18,7 @@ export function mount(slot) {
     { value: mode, label: "Mode", onChange: (next) => { mode = next; save(); run(); } }
   );
   const sharesField = panel("Shares", shares);
-  const result = el("div", { class: "mvb-scroll" });
+  const result = el("div", { class: "max-h-80 overflow-auto" });
   const error = notice("error");
   const remainder = notice("warn");
   let text = "";
@@ -34,7 +34,7 @@ export function mount(slot) {
     const names = people.value.split("\n").map((line) => line.trim()).filter(Boolean);
     const amount = Number(total.value);
     if (!names.length || total.value.trim() === "" || !Number.isFinite(amount) || amount < 0) {
-      result.replaceChildren(el("p", { class: "mvb-note" }, "Add a total and one name per line."));
+      result.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Add a total and one name per line."));
       return;
     }
 
@@ -42,12 +42,12 @@ export function mount(slot) {
     if (mode === "custom") {
       weights = shares.value.split("\n").map((line) => line.trim()).filter(Boolean).map(Number);
       if (weights.length !== names.length || weights.some((w) => !Number.isFinite(w) || w < 0)) {
-        result.replaceChildren(el("p", { class: "mvb-note" }, "Add one share for each name."));
+        result.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Add one share for each name."));
         error.write("Add one share for each name.");
         return;
       }
       if (weights.reduce((a, b) => a + b, 0) <= 0) {
-        result.replaceChildren(el("p", { class: "mvb-note" }, "Add one share for each name."));
+        result.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Add one share for each name."));
         error.write("The shares add up to zero.");
         return;
       }
@@ -60,7 +60,7 @@ export function mount(slot) {
     const paid = rounded.reduce((a, b) => a + b, 0);
     const leftover = Math.round((amount - paid) * 100) / 100;
 
-    result.replaceChildren(el("table", { class: "mvb-ttable" },
+    result.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", {}, "Person"), el("th", {}, "Amount"))),
       el("tbody", {}, ...names.map((name, i) => el("tr", {},
         el("th", {}, name),
@@ -79,8 +79,7 @@ export function mount(slot) {
       stack(panel("Total", total), panel("Mode", modeChips), panel("People", people), sharesField, error),
       stack(panel("Each person", result), remainder)
     ),
-    foot: actions(copyButton(() => text, "Copy split", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy split", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -7,8 +7,7 @@ const LAST = ["Ortega", "Wijaya", "Santos", "Kimura", "Novak", "Haddad", "Silva"
 const PLACES = [
   ["Jakarta", "ID", "+62"], ["Bandung", "ID", "+62"], ["Madrid", "ES", "+34"], ["Barcelona", "ES", "+34"],
   ["Austin", "US", "+1"], ["Seattle", "US", "+1"], ["Berlin", "DE", "+49"], ["Munich", "DE", "+49"],
-  ["Osaka", "JP", "+81"], ["Tokyo", "JP", "+81"], ["Recife", "BR", "+55"], ["Lagos", "NG", "+234"],
-];
+  ["Osaka", "JP", "+81"], ["Tokyo", "JP", "+81"], ["Recife", "BR", "+55"], ["Lagos", "NG", "+234"]];
 const pick = (list) => list[randomInt(list.length)];
 
 function person(id) {
@@ -23,8 +22,7 @@ function person(id) {
     phone: `${code} ${700 + randomInt(300)} ${1000000 + randomInt(8999999)}`,
     city,
     country,
-    card: `4${String(randomInt(1000)).padStart(3, "0")} … ${1000 + randomInt(9000)}`,
-  };
+    card: `4${String(randomInt(1000)).padStart(3, "0")} … ${1000 + randomInt(9000)}`};
 }
 
 export function mount(slot) {
@@ -34,18 +32,25 @@ export function mount(slot) {
     [
       { value: "json", label: "JSON" },
       { value: "csv", label: "CSV" },
-      { value: "table", label: "Table" },
-    ],
+      { value: "table", label: "Table" }],
     { value: "json", label: "Format", onChange: (value) => { format = value; render(); } }
   );
   const text = output({ rows: 14 });
-  const table = el("div", { class: "mvb-scroll" });
+  const table = el("div", { class: "max-h-80 overflow-auto" });
   let rows = [];
 
   function totalCount() {
     return Math.max(1, Math.min(200, parseInt(countField.value || "1", 10) || 1));
   }
 
+  /** The same rows as the table, tab separated. */
+  function tsv() {
+    const columns = Object.keys(rows[0] ?? {});
+    return [
+      columns.join("\t"),
+      ...rows.map((row) => columns.map((key) => String(row[key])).join("\t"))].join("\n");
+  }
+
   function render() {
     const total = totalCount();
     rows = Array.from({ length: total }, (_, i) => person(i + 1));
@@ -66,7 +71,7 @@ export function mount(slot) {
       }
       const head = el("tr");
       for (const key of columns) head.append(el("th", {}, key));
-      table.replaceChildren(el("table", { class: "mvb-ttable" }, el("thead", {}, head), body));
+      table.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", {}, head), body));
     }
   }
 
@@ -83,8 +88,11 @@ export function mount(slot) {
     countField.value = String(totalCount());
   });
   copyButton.addEventListener("click", async () => {
-    const text = format === "table" ? JSON.stringify(rows) : text.textContent;
-    toast((await copyText(text)) ? "Copied" : "Copy failed");
+    // In table mode the visible table is what gets copied, as tab separated text
+    // so it lands in a spreadsheet as a table. The local name here used to shadow
+    // the readout above, which threw before the copy ever ran.
+    const payload = format === "table" ? tsv() : text.textContent;
+    toast((await copyText(payload)) ? "Copied" : "Copy failed");
   });
   saveButton.addEventListener("click", () => {
     if (format === "csv") download("test-data.csv", text.textContent, "text/csv");
@@ -94,10 +102,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(panel("Format", chips), panel("Records", countField)),
-      el("div", { class: "mvb-scroll" }, text, table)
+      el("div", { class: "grid content-start gap-4" }, text, table)
     ),
-    foot: actions(copyButton, saveButton, againButton),
-  });
+    foot: actions(copyButton, saveButton, againButton)});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/find-replace.js

@@ -9,9 +9,8 @@ export function mount(slot) {
   const replaceField = textInput({ placeholder: "Replace with", "aria-label": "Replace with" });
   const options = toggleRow([
     { value: "regex", label: "Regex", checked: false },
-    { value: "ignore", label: "Ignore case", checked: false },
-  ]);
-  const result = textArea({ rows: 9, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+    { value: "ignore", label: "Ignore case", checked: false }]);
+  const result = textArea({ rows: 9, readonly: true, "aria-label": "Result" });
   const error = notice("error");
   const countNote = notice("note");
 
@@ -77,8 +76,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Find", findField), panel("Replace with", replaceField), options, error, countNote),
       stack(panel("Result", result))
     ),
-    foot: actions(copyButton(() => result.value, "Copy result"), replaceOneButton, replaceAllButton),
-  });
+    foot: actions(copyButton(() => result.value, "Copy result"), replaceOneButton, replaceAllButton)});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/flashcard-creator.js

@@ -12,10 +12,10 @@ export function mount(slot) {
 
   const question = textInput({ placeholder: "Question", "aria-label": "Question" });
   const answer = textArea({ rows: 3, placeholder: "Answer", "aria-label": "Answer" });
-  const listWrap = el("div", { class: "mvb-scroll" });
-  const stats = el("div", { class: "mvb-stats" });
-  const face = el("pre", { class: "mvb-out" });
-  const faceLabel = el("span", { class: "mvb-field__label" }, "Question");
+  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 face = el("pre", { class: "m-0 max-h-[340px] w-full overflow-auto rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3 font-mono text-sm leading-normal whitespace-pre-wrap [overflow-wrap:anywhere]" });
+  const faceLabel = el("span", { class: "text-sm font-semibold text-ink-2" }, "Question");
 
   const addButton = button("Add card", { icon: "plus", kind: "fill" });
   const flipButton = button("Flip", { icon: "arrow-left-right" });
@@ -23,9 +23,9 @@ export function mount(slot) {
   const nextButton = button("Next");
 
   const save = () => writePin(PIN, cards);
-  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 textExport = () =>
     cards.map((card, i) => `${i + 1}. Q: ${card.question}\n   A: ${card.answer}`).join("\n\n");
@@ -52,7 +52,7 @@ export function mount(slot) {
       const card = cards[index];
       faceLabel.textContent = flipped ? "Answer" : "Question";
       face.textContent = flipped ? card.answer : card.question;
-      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("tbody", {}, ...cards.map((entry, i) => el("tr", {},
           el("th", {}, `${i + 1}. ${entry.question}`),
           el("td", {}, removeButton(entry)))))));
@@ -106,8 +106,7 @@ export function mount(slot) {
       copyButton(() => textExport(), "Copy text"),
       downloadButton(() => jsonExport(), "flashcards.json", "Save JSON", "application/json"),
       addButton
-    ),
-  });
+    )});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/font-pairing.js

@@ -12,16 +12,15 @@ const FONTS = [
   { value: 'Palatino, "Palatino Linotype", serif', label: "Palatino" },
   { value: "Garamond, Georgia, serif", label: "Garamond" },
   { value: '"Courier New", Courier, monospace', label: "Courier New" },
-  { value: "ui-monospace, SFMono-Regular, Menlo, monospace", label: "Mono" },
-];
+  { value: "ui-monospace, SFMono-Regular, Menlo, monospace", label: "Mono" }];
 
 function slider(label, { min, max, step, value, unit }) {
   const input = rangeInput({ min, max, step, value, "aria-label": label });
-  const val = el("span", { class: "mvb-slider__val" }, `${value}${unit}`);
+  const val = el("span", { class: "text-end font-mono text-2xs text-ink-2" }, `${value}${unit}`);
   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
   );
@@ -46,7 +45,7 @@ export function mount(slot) {
 
   const heading = el("h2", { style: "margin:0 0 8px" }, "Heading sample");
   const para = el("p", { style: "margin:0" }, "Body text sample. The quick brown fox jumps over the lazy dog.");
-  const sample = el("div", { class: "mvb-preview__sample" }, heading, para);
+  const sample = el("div", { class: "w-full rounded-lg border border-orbit bg-deck px-[18px] py-4" }, heading, para);
   const code = output();
 
   function css() {
@@ -77,8 +76,7 @@ export function mount(slot) {
       stack(panel("Heading font", headingFont), panel("Body font", bodyFont), headingSize, bodySize, lineHeight, panel("Heading weight", weightChips)),
       stack(sample, code)
     ),
-    foot: actions(copyButton(css, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(css, "Copy CSS", "fill"))});
   slot.append(card.node);
   update();
 

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

@@ -17,19 +17,19 @@ function fmt(n) {
 }
 
 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 n1 = numberInput({ value: "1", "aria-label": "First numerator" });
   const d1 = numberInput({ value: "2", "aria-label": "First denominator" });
   const n2 = numberInput({ value: "1", "aria-label": "Second numerator" });
   const d2 = numberInput({ value: "3", "aria-label": "Second denominator" });
-  const resultRow = el("span", { class: "mvb-kv__v" }, "-");
-  const decimalRow = el("span", { class: "mvb-kv__v" }, "-");
-  const mixedRow = el("span", { class: "mvb-kv__v" }, "-");
+  const resultRow = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimalRow = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const mixedRow = 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("Fraction", resultRow),
     kvRow("Decimal", decimalRow),
     kvRow("Mixed number", mixedRow)
@@ -95,16 +95,14 @@ export function mount(slot) {
       { value: "+", label: "+" },
       { value: "-", label: "-" },
       { value: "x", label: "x" },
-      { value: "/", label: "/" },
-    ],
+      { value: "/", label: "/" }],
     {
       value: op,
       label: "Operation",
       onChange: (value) => {
         op = value;
         run();
-      },
-    }
+      }}
   );
 
   for (const input of [n1, d1, n2, d2]) input.addEventListener("input", run);
@@ -112,15 +110,14 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(
-        panel("First fraction", el("div", { class: "mvb-row" }, n1, d1)),
+        panel("First fraction", el("div", { class: "flex min-w-0 flex-wrap items-center gap-2" }, n1, d1)),
         panel("Operation", chips),
-        panel("Second fraction", el("div", { class: "mvb-row" }, n2, d2)),
+        panel("Second fraction", el("div", { class: "flex min-w-0 flex-wrap items-center gap-2" }, n2, d2)),
         error
       ),
       stack(panel("Result", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy fraction", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy fraction", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/git-command-builder.js

@@ -7,56 +7,46 @@ const OPERATIONS = {
   clone: {
     label: "Clone a repository",
     fields: [["url", "Repository URL", "https://github.com/user/repo.git"], ["directory", "Directory (optional)", ""]],
-    build: (v) => `git clone ${quote(v.url)}${v.directory ? ` ${quote(v.directory)}` : ""}`,
-  },
+    build: (v) => `git clone ${quote(v.url)}${v.directory ? ` ${quote(v.directory)}` : ""}`},
   switch: {
     label: "Switch branch",
     fields: [["branch", "Branch", "main"]],
-    build: (v) => `git switch ${quote(v.branch)}`,
-  },
+    build: (v) => `git switch ${quote(v.branch)}`},
   pull: {
     label: "Pull",
     fields: [["remote", "Remote", "origin"], ["branch", "Branch (optional)", ""]],
-    build: (v) => `git pull ${quote(v.remote)}${v.branch ? ` ${quote(v.branch)}` : ""}`,
-  },
+    build: (v) => `git pull ${quote(v.remote)}${v.branch ? ` ${quote(v.branch)}` : ""}`},
   commit: {
     label: "Commit",
     fields: [["message", "Message", "Fix the thing"], ["files", "Paths (optional)", ""]],
-    build: (v) => `git commit -m ${quote(v.message)}${v.files ? ` ${v.files}` : ""}`,
-  },
+    build: (v) => `git commit -m ${quote(v.message)}${v.files ? ` ${v.files}` : ""}`},
   push: {
     label: "Push",
     fields: [["remote", "Remote", "origin"], ["branch", "Branch", "main"]],
-    build: (v) => `git push ${quote(v.remote)} ${quote(v.branch)}`,
-  },
+    build: (v) => `git push ${quote(v.remote)} ${quote(v.branch)}`},
   "push-force": {
     label: "Force push",
     fields: [["remote", "Remote", "origin"], ["branch", "Branch", "main"]],
     build: (v) => `git push --force-with-lease ${quote(v.remote)} ${quote(v.branch)}`,
-    destructive: "Force push can overwrite commits on the remote.",
-  },
+    destructive: "Force push can overwrite commits on the remote."},
   merge: {
     label: "Merge",
     fields: [["branch", "Branch", "feature"]],
-    build: (v) => `git merge ${quote(v.branch)}`,
-  },
+    build: (v) => `git merge ${quote(v.branch)}`},
   rebase: {
     label: "Rebase",
     fields: [["branch", "Branch", "main"]],
-    build: (v) => `git rebase ${quote(v.branch)}`,
-  },
+    build: (v) => `git rebase ${quote(v.branch)}`},
   reset: {
     label: "Reset hard",
     fields: [["ref", "Commit or ref", "HEAD~1"]],
     build: (v) => `git reset --hard ${quote(v.ref)}`,
-    destructive: "Reset hard discards uncommitted work.",
-  },
-};
+    destructive: "Reset hard discards uncommitted work."}};
 
 export function mount(slot) {
   const options = Object.entries(OPERATIONS).map(([value, config]) => ({ value, label: config.label }));
   const operationSelect = selectInput(options, { value: "clone", "aria-label": "Operation" });
-  const fieldsHost = el("div", { class: "mvb-stack" });
+  const fieldsHost = el("div", { class: "grid content-start gap-4" });
   const result = output({ rows: 4 });
   const warn = notice("warn");
   const values = {};
@@ -89,8 +79,7 @@ export function mount(slot) {
       stack(panel("Operation", operationSelect), fieldsHost, warn),
       stack(panel("Command", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy command", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy command", "fill"))});
   slot.append(card.node);
   paintFields();