mevebu 1.2.0 → 1.4.0

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

@@ -23,10 +23,9 @@ export function mount(slot) {
   const source = textArea({
     rows: 14,
     "aria-label": "Questions",
-    placeholder: "Question one\n- First option\n- Second option\n* The correct option\n\nQuestion two\n- ...",
-  });
-  const quiz = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Quiz" });
-  const key = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Answer key" });
+    placeholder: "Question one\n- First option\n- Second option\n* The correct option\n\nQuestion two\n- ..."});
+  const quiz = textArea({ rows: 12, readonly: true, "aria-label": "Quiz" });
+  const key = textArea({ rows: 12, readonly: true, "aria-label": "Answer key" });
   const error = notice("error");
 
   function render() {
@@ -59,8 +58,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => key.value, "Copy key"),
       copyButton(() => quiz.value, "Copy quiz", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   render();
 

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

@@ -17,7 +17,7 @@ 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 ratioInput = textInput({ value: "12:18:24", "aria-label": "Ratio" });
@@ -25,12 +25,12 @@ export function mount(slot) {
   const b = numberInput({ placeholder: "B", "aria-label": "Second term" });
   const c = numberInput({ placeholder: "C", "aria-label": "Third term" });
   const d = numberInput({ placeholder: "D", "aria-label": "Fourth term" });
-  const simplified = el("span", { class: "mvb-kv__v" }, "-");
-  const decimal = el("span", { class: "mvb-kv__v" }, "-");
-  const missing = el("span", { class: "mvb-kv__v" }, "-");
+  const simplified = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimal = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const missing = 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("Simplified ratio", simplified),
     kvRow("Decimal", decimal),
     kvRow("Missing term", missing)
@@ -87,13 +87,12 @@ export function mount(slot) {
     body: bench(
       stack(
         panel("Ratio", ratioInput),
-        panel("Proportion", el("div", { class: "mvb-row" }, a, b, c, d)),
+        panel("Proportion", el("div", { class: "flex min-w-0 flex-wrap items-center gap-2" }, a, b, c, d)),
         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/readability.js

@@ -27,15 +27,15 @@ function syllablesOf(word) {
 }
 
 function tile(label, initial = "-") {
-  const value = el("span", { class: "mvb-stat__v" }, initial);
-  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" }, initial);
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
 
-const kvRow = (key, value) => el("div", { class: "mvb-kv__row" },
-  el("span", { class: "mvb-kv__k" }, key),
-  el("span", { class: "mvb-kv__v" }, value));
+const kvRow = (key, value) => el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" },
+  el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key),
+  el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const source = textArea({ rows: 12, "aria-label": "Text", placeholder: "Type or paste text" });
@@ -43,14 +43,13 @@ export function mount(slot) {
   const easeTile = tile("Reading ease");
   const gradeTile = tile("Grade level");
   const fogTile = tile("Gunning Fog");
-  const stats = el("div", { class: "mvb-stats" }, easeTile, gradeTile, fogTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, easeTile, gradeTile, fogTile);
 
   const counts = {
-    words: el("span", { class: "mvb-kv__v" }, "0"),
-    sentences: el("span", { class: "mvb-kv__v" }, "0"),
-    syllables: el("span", { class: "mvb-kv__v" }, "0"),
-  };
-  const countList = el("div", { class: "mvb-kv" },
+    words: el("span", { class: "wrap-anywhere font-mono text-2xs" }, "0"),
+    sentences: el("span", { class: "wrap-anywhere font-mono text-2xs" }, "0"),
+    syllables: el("span", { class: "wrap-anywhere font-mono text-2xs" }, "0")};
+  const countList = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
     kvRow("Words", counts.words),
     kvRow("Sentences", counts.sentences),
     kvRow("Syllables", counts.syllables));
@@ -90,8 +89,7 @@ export function mount(slot) {
       `Reading ease ${ease.toFixed(1)}`,
       `Grade level ${grade.toFixed(1)}`,
       `Gunning Fog ${fog.toFixed(1)}`,
-      `${words.length} words, ${sentences.length} sentences, ${syllableCount} syllables`,
-    ].join("\n");
+      `${words.length} words, ${sentences.length} sentences, ${syllableCount} syllables`].join("\n");
   }
 
   source.addEventListener("input", run);
@@ -101,8 +99,7 @@ export function mount(slot) {
       stack(panel("Text", source)),
       stack(stats, countList, note)
     ),
-    foot: actions(copyButton(() => summary, "Copy scores", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy scores", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/reading-time.js

@@ -23,8 +23,8 @@ const clock = (minutes) => {
 };
 
 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;
 }
@@ -36,7 +36,7 @@ export function mount(slot) {
   const wordsTile = tile("Words");
   const readTile = tile("Reading time");
   const speakTile = tile("Speaking time");
-  const stats = el("div", { class: "mvb-stats" }, wordsTile, readTile, speakTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, wordsTile, readTile, speakTile);
   const note = notice("note");
   note.write("Reading and speaking speeds vary by person and text.");
 
@@ -53,8 +53,7 @@ export function mount(slot) {
     summary = [
       `${words} words`,
       `Reading ${words ? clock(readMinutes) : "0:00"} at ${wpm} words per minute`,
-      `Speaking ${words ? clock(speakMinutes) : "0:00"} at 130 words per minute`,
-    ].join("\n");
+      `Speaking ${words ? clock(speakMinutes) : "0:00"} at 130 words per minute`].join("\n");
   }
 
   source.addEventListener("input", run);
@@ -65,8 +64,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Reading speed", speed, "Words per minute")),
       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/reference-completeness.js

@@ -4,8 +4,8 @@ import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcar
 const PARTS = ["Author", "Year", "Title", "Source"];
 
 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 };
 }
 
@@ -14,15 +14,14 @@ function check(text) {
   return {
     Author: /^[A-Z][A-Za-z'’.-]+,/.test(t) || /\b(and|&)\s+[A-Z]/.test(t),
     Year: /\b(1[5-9]\d{2}|20\d{2})\b/.test(t),
-    Title: /["“][^"”]{2,}["”]/.test(t) || t.replace(/^[^.]*\./, "").trim().length > 8,
-    Source: /https?:\/\/|www\.|\bIn\b|\b(Journal|Press|Publishing|Publishers|University|vol\.|pp\.|ed\.)\b/i.test(t),
-  };
+    Title: /["“][^"”]{2}["”]/.test(t) || t.replace(/^[^.]*\./, "").trim().length > 8,
+    Source: /https?:\/\/|www\.|\bIn\b|\b(Journal|Press|Publishing|Publishers|University|vol\.|pp\.|ed\.)\b/i.test(t)};
 }
 
 export function mount(slot) {
   const source = textArea({ rows: 6, "aria-label": "Reference", placeholder: "Paste one reference" });
   const rows = {};
-  const kv = el("div", { class: "mvb-kv" });
+  const kv = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });
   for (const key of PARTS) {
     rows[key] = kvRow(key);
     kv.append(rows[key].row);
@@ -51,8 +50,7 @@ export function mount(slot) {
       stack(panel("Reference", source), note),
       stack(panel("Parts", kv), status)
     ),
-    foot: actions(copyButton(() => summary, "Copy check", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy check", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/regex-tester.js

@@ -8,12 +8,10 @@ export function mount(slot) {
   const flagsInput = textInput({ value: "g", "aria-label": "Flags", spellcheck: "false", placeholder: "g i m s u y" });
   const source = textArea({
     rows: 8,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "Text to test",
-    value: "Contact ada@example.com or grace@navy.com for details.",
-  });
-  const pane = el("div", { class: "mvb-pane" });
-  const listWrap = el("div", { class: "mvb-scroll" });
+    value: "Contact ada@example.com or grace@navy.com for details."});
+  const pane = el("div", { class: "min-h-[120px] max-h-[380px] overflow-auto wrap-anywhere rounded-r1 border border-orbit bg-deck-2 px-4 py-3.5 leading-normal [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_h1]:my-4 [&_h2]:my-4 [&_h3]:my-4 [&_h1]:tracking-[-0.01em] [&_h2]:tracking-[-0.01em] [&_h3]:tracking-[-0.01em] [&_p]:mb-2.5 [&_ul]:mb-2.5 [&_ol]:mb-2.5 [&_pre]:mb-2.5 [&_ul]:ps-[22px] [&_ol]:ps-[22px] [&_code]:rounded-[5px] [&_code]:bg-deck [&_code]:px-[5px] [&_code]:py-px [&_code]:font-mono [&_code]:text-2xs [&_pre]:overflow-auto [&_pre]:rounded-r1 [&_pre]:bg-deck [&_pre]:px-3 [&_pre]:py-2.5 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_a]:text-jade [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-[9px] [&_td]:px-[9px] [&_th]:py-1.5 [&_td]:py-1.5" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
   const error = notice("error");
   let lines = [];
 
@@ -42,7 +40,7 @@ export function mount(slot) {
     while ((match = re.exec(text)) && count < MAX_MATCHES) {
       if (match.index === re.lastIndex) re.lastIndex++;
       nodes.push(document.createTextNode(text.slice(last, match.index)));
-      nodes.push(el("span", { class: "mvb-hl" }, match[0] || "\u200b"));
+      nodes.push(el("span", { class: "rounded-[3px] bg-star/40" }, match[0] || "\u200b"));
       last = match.index + match[0].length;
       const groups = match.slice(1).map((group) => group ?? "").join(", ");
       rows.push(el("tr", {},
@@ -56,10 +54,10 @@ export function mount(slot) {
     nodes.push(document.createTextNode(text.slice(last)));
     pane.append(...nodes);
     if (!count) {
-      listWrap.append(el("p", { class: "mvb-note" }, "No matches."));
+      listWrap.append(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "No matches."));
       return;
     }
-    const table = el("table", { class: "mvb-ttable" },
+    const table = 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", {}, "Match"), el("th", {}, "Groups"))),
       el("tbody", {}, ...rows)
     );
@@ -75,8 +73,7 @@ export function mount(slot) {
       stack(panel("Pattern", patternInput), panel("Flags", flagsInput), panel("Text", source), error),
       stack(panel("Matches", pane), panel("Groups", listWrap))
     ),
-    foot: actions(copyButton(() => lines.join("\n"), "Copy matches", "fill")),
-  });
+    foot: actions(copyButton(() => lines.join("\n"), "Copy matches", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/remove-duplicate-lines.js

@@ -4,7 +4,7 @@ import { bench, stack, panel, textArea, checkbox, notice, copyButton, actions, t
 export function mount(slot) {
   const source = textArea({ rows: 12, "aria-label": "Text", placeholder: "Paste your list, one entry per line" });
   const ignoreCase = checkbox("Ignore case", { checked: false });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  const result = textArea({ rows: 12, readonly: true, "aria-label": "Result" });
   const note = notice("note");
 
   function run() {
@@ -35,8 +35,7 @@ export function mount(slot) {
       stack(panel("Text", source), ignoreCase, note),
       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/remove-extra-spaces.js

@@ -4,12 +4,11 @@ import { bench, stack, panel, textArea, toggleRow, copyButton, actions, toolcard
 
 export function mount(slot) {
   const source = textArea({ rows: 12, "aria-label": "Text", placeholder: "Paste your text" });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  const result = textArea({ rows: 12, readonly: true, "aria-label": "Result" });
   const options = toggleRow([
     { value: "collapse", label: "Collapse spaces", checked: true },
     { value: "trim", label: "Trim lines", checked: true },
-    { value: "blank", label: "Remove blank lines", checked: false },
-  ]);
+    { value: "blank", label: "Remove blank lines", checked: false }]);
 
   function run() {
     const text = source.value;
@@ -30,8 +29,7 @@ export function mount(slot) {
       stack(panel("Text", source), options),
       stack(panel("Result", result))
     ),
-    foot: actions(copyButton(() => result.value, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => result.value, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/robots-txt.js

@@ -13,8 +13,8 @@ const isUrl = (value) => {
 
 export function mount(slot) {
   const agent = textInput({ value: "*", "aria-label": "User agent" });
-  const disallow = textArea({ rows: 5, class: "mvb-in mvb-in--area mvb-in--mono", placeholder: "/admin\n/private", "aria-label": "Disallow paths" });
-  const allow = textArea({ rows: 3, class: "mvb-in mvb-in--area mvb-in--mono", placeholder: "/public", "aria-label": "Allow paths" });
+  const disallow = textArea({ rows: 5, placeholder: "/admin\n/private", "aria-label": "Disallow paths" });
+  const allow = textArea({ rows: 3, placeholder: "/public", "aria-label": "Allow paths" });
   const sitemap = textInput({ value: "https://example.com/sitemap.xml", "aria-label": "Sitemap URL" });
   const result = output({ rows: 8 });
   const error = notice("error");
@@ -49,8 +49,7 @@ export function mount(slot) {
       ),
       stack(panel("robots.txt", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy robots.txt", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy robots.txt", "fill"))});
   slot.append(card.node);
   build();
 

package/mevebu/libs/js/tools/roman-numeral-converter.js

@@ -3,8 +3,7 @@ import { el, bench, stack, panel, textInput, notice, copyButton, actions, toolca
 
 const NUMERALS = [
   [1000, "M"], [900, "CM"], [500, "D"], [400, "CD"], [100, "C"], [90, "XC"],
-  [50, "L"], [40, "XL"], [10, "X"], [9, "IX"], [5, "V"], [4, "IV"], [1, "I"],
-];
+  [50, "L"], [40, "XL"], [10, "X"], [9, "IX"], [5, "V"], [4, "IV"], [1, "I"]];
 
 function toRoman(n) {
   let rest = n;
@@ -32,15 +31,15 @@ function fromRoman(text) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const source = textInput({ value: "2026", "aria-label": "Number or Roman numeral", placeholder: "2026 or MMXXVI" });
-  const detected = el("span", { class: "mvb-kv__v" }, "-");
-  const result = el("span", { class: "mvb-kv__v" }, "-");
+  const detected = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const result = 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("Input", detected),
     kvRow("Result", result)
   );
@@ -95,8 +94,7 @@ export function mount(slot) {
       stack(panel("Number or Roman numeral", source), 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/sales-commission.js

@@ -16,14 +16,14 @@ export function mount(slot) {
   const rate = numberInput({ value: "5", min: "0", "aria-label": "Rate" });
   const threshold = numberInput({ placeholder: "Threshold", min: "0", "aria-label": "Tier threshold" });
   const higher = numberInput({ placeholder: "Higher rate", min: "0", "aria-label": "Higher rate" });
-  const result = el("div", { class: "mvb-scroll" });
-  const stats = el("div", { class: "mvb-stats" });
+  const result = 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 error = notice("error");
   let text = "";
 
-  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 tiered = () => threshold.value.trim() !== "" && higher.value.trim() !== "";
 
@@ -43,7 +43,7 @@ export function mount(slot) {
     const { nums, invalid } = parseNumbers(sales.value);
     const r = Number(rate.value);
     if (!sales.value.trim()) {
-      result.replaceChildren(el("p", { class: "mvb-note" }, "Add one sale amount per line."));
+      result.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Add one sale amount per line."));
       stats.replaceChildren();
       return;
     }
@@ -53,7 +53,7 @@ export function mount(slot) {
       stats.replaceChildren();
       return;
     }
-    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", {}, "Sale"), el("th", {}, "Commission"))),
       el("tbody", {}, ...nums.map((amount) => el("tr", {},
         el("th", {}, fmt(amount)),
@@ -85,8 +85,7 @@ export function mount(slot) {
     foot: actions(
       downloadButton(() => csv(), "commission.csv", "Save CSV", "text/csv"),
       copyButton(() => text, "Copy commission", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   run();
 

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

@@ -51,8 +51,7 @@ const FUNCTIONS = {
   ln: (x) => Math.log(x),
   sqrt: (x) => Math.sqrt(x),
   abs: (x) => Math.abs(x),
-  exp: (x) => Math.exp(x),
-};
+  exp: (x) => Math.exp(x)};
 
 function evaluate(src, degrees) {
   const tokens = tokenize(src);
@@ -146,20 +145,18 @@ export function mount(slot) {
   const input = textInput({ value: "sin(30) + 2^3", "aria-label": "Expression", placeholder: "sin(30) + 2^3" });
   const display = output({ rows: 2 });
   const error = notice("error");
-  const history = el("div", { class: "mvb-kv" });
+  const history = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });
   const chips = chipRow(
     [
       { value: "deg", label: "Degrees" },
-      { value: "rad", label: "Radians" },
-    ],
+      { value: "rad", label: "Radians" }],
     {
       value: "deg",
       label: "Angle unit",
       onChange: (value) => {
         degrees = value === "deg";
         run();
-      },
-    }
+      }}
   );
   const recent = [];
   let degrees = true;
@@ -169,9 +166,9 @@ export function mount(slot) {
     history.replaceChildren();
     for (const entry of recent) {
       history.append(
-        el("div", { class: "mvb-kv__row" },
-          el("span", { class: "mvb-kv__k" }, entry.expression),
-          el("span", { class: "mvb-kv__v" }, entry.result))
+        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" }, entry.expression),
+          el("span", { class: "wrap-anywhere font-mono text-2xs" }, entry.result))
       );
     }
   }
@@ -219,9 +216,9 @@ export function mount(slot) {
     run();
   }
 
-  const keypad = el("div", { class: "mvb-chips" });
+  const keypad = el("div", { class: "flex flex-wrap gap-1.5" });
   for (const key of KEYS) {
-    keypad.append(el("button", { class: "mvb-chip", type: "button", onclick: () => insert(key) }, key));
+    keypad.append(el("button", { class: "min-h-[var(--ctl)] cursor-pointer rounded-r1 border border-orbit bg-deck px-[13px] text-sm font-medium text-ink-2 transition-colors duration-150 hover:border-orbit-hard hover:text-ink data-[on]:border-jade data-[on]:bg-jade-soft data-[on]:text-ink", type: "button", onclick: () => insert(key) }, key));
   }
 
   input.addEventListener("input", run);
@@ -236,8 +233,7 @@ export function mount(slot) {
       ),
       stack(display, error, panel("History", history))
     ),
-    foot: actions(copyButton(() => current, "Copy result"), evaluateButton),
-  });
+    foot: actions(copyButton(() => current, "Copy result"), evaluateButton)});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/scientific-notation.js

@@ -17,18 +17,18 @@ function decimalForm(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 source = textInput({ value: "3.2e8", "aria-label": "Number", placeholder: "3.2e8 or 320000000" });
-  const scientific = el("span", { class: "mvb-kv__v" }, "-");
-  const eForm = el("span", { class: "mvb-kv__v" }, "-");
-  const decimal = el("span", { class: "mvb-kv__v" }, "-");
-  const coefficient = el("span", { class: "mvb-kv__v" }, "-");
-  const exponent = el("span", { class: "mvb-kv__v" }, "-");
+  const scientific = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const eForm = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimal = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const coefficient = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const exponent = 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("Scientific", scientific),
     kvRow("E notation", eForm),
     kvRow("Decimal", decimal),
@@ -72,8 +72,7 @@ export function mount(slot) {
       stack(panel("Number", source), error),
       stack(panel("Forms", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy scientific", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy scientific", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -5,8 +5,7 @@ const SECTIONS = [
   ["hook", "Hook"],
   ["intro", "Intro"],
   ["body", "Body"],
-  ["outro", "Outro"],
-];
+  ["outro", "Outro"]];
 
 const clock = (seconds) => {
   const total = Math.max(0, Math.round(seconds));
@@ -15,9 +14,9 @@ const clock = (seconds) => {
 
 const countWords = (text) => (text.trim() ? text.trim().split(/\s+/).length : 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));
+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 inputs = {};
@@ -30,13 +29,13 @@ export function mount(slot) {
   const rate = numberInput({ min: "60", max: "400", value: "150", "aria-label": "Speaking rate in words per minute" });
 
   const rows = {};
-  const list = el("div", { class: "mvb-kv" });
+  const list = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });
   for (const [id, label] of SECTIONS) {
-    const value = el("span", { class: "mvb-kv__v" }, "0 words");
+    const value = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "0 words");
     rows[id] = value;
     list.append(kvRow(label, value));
   }
-  const total = el("span", { class: "mvb-kv__v" }, "0 words");
+  const total = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "0 words");
   list.append(kvRow("Total", total));
 
   let fullScript = "";
@@ -61,8 +60,7 @@ export function mount(slot) {
       stack(...fields),
       stack(panel("Speaking rate", rate, "Words per minute"), list)
     ),
-    foot: actions(copyButton(() => fullScript, "Copy script", "fill")),
-  });
+    foot: actions(copyButton(() => fullScript, "Copy script", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/selling-price.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;
 }
@@ -22,7 +22,7 @@ export function mount(slot) {
   );
   const price = tile("Selling price");
   const profit = tile("Profit");
-  const stats = el("div", { class: "mvb-stats" }, price, profit);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, price, profit);
   const error = notice("error");
   let text = "";
 
@@ -63,8 +63,7 @@ export function mount(slot) {
       stack(panel("Cost per unit", cost), panel("Target", chips), panel("Percent", percent), error),
       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/semver-helper.js

@@ -4,11 +4,10 @@ import { bench, stack, panel, textInput, chipRow, output, notice, copyButton, ac
 const BUMPS = [
   { value: "major", label: "Major" },
   { value: "minor", label: "Minor" },
-  { value: "patch", label: "Patch" },
-];
+  { value: "patch", label: "Patch" }];
 
 export function mount(slot) {
-  const version = textInput({ value: "1.2.3", class: "mvb-in mvb-in--mono", "aria-label": "Current version" });
+  const version = textInput({ value: "1.2.3", mono: true, "aria-label": "Current version" });
   const prerelease = textInput({ value: "", placeholder: "rc.1", "aria-label": "Prerelease tag" });
   const error = notice("error");
   const out = output({ rows: 1 });
@@ -43,8 +42,7 @@ export function mount(slot) {
       stack(panel("Current version", version), panel("Bump", chips), panel("Prerelease", prerelease), error),
       stack(panel("New version", out))
     ),
-    foot: actions(copyButton(() => text, "Copy version", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy version", "fill"))});
   slot.append(card.node);
   run();