mevebu 1.3.0 → 1.4.1

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

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

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

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

@@ -12,17 +12,17 @@ function parseNumbers(text) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const source = textArea({ rows: 6, value: "2, 5, 8, 11", "aria-label": "Numbers", placeholder: "2, 5, 8, 11" });
   const error = notice("error");
 
-  const terms = el("span", { class: "mvb-kv__v" }, "-");
-  const differences = el("span", { class: "mvb-kv__v" }, "-");
-  const pattern = el("span", { class: "mvb-kv__v" }, "-");
-  const next = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" },
+  const terms = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const differences = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const pattern = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const next = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const kv = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
     kvRow("Terms", terms),
     kvRow("Differences", differences),
     kvRow("Pattern", pattern),
@@ -79,8 +79,7 @@ export function mount(slot) {
       stack(panel("Numbers", source), error),
       stack(panel("Analysis", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

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

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

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

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

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

@@ -20,19 +20,19 @@ function slugify(text) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const title = textInput({ value: "Best running shoes", "aria-label": "Title" });
   const base = textInput({ value: "https://example.com", "aria-label": "Base URL" });
   const error = notice("error");
 
-  const slugValue = el("span", { class: "mvb-kv__v" }, "-");
-  const urlValue = el("span", { class: "mvb-kv__v" }, "-");
-  const lengthValue = el("span", { class: "mvb-kv__v" }, "-");
+  const slugValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const urlValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const lengthValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
   const kv = el(
     "div",
-    { class: "mvb-kv" },
+    { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
     kvRow("Slug", slugValue),
     kvRow("URL", urlValue),
     kvRow("Length", lengthValue)
@@ -72,8 +72,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => urlValue.textContent === "-" ? "" : urlValue.textContent, "Copy URL"),
       copyButton(() => slugValue.textContent === "-" ? "" : slugValue.textContent, "Copy slug", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   run();
 

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

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