mevebu 1.2.0 → 1.4.0

package/mevebu/libs/js/tools/color-picker.js

@@ -32,13 +32,13 @@ function toHsl({ r, g, b }) {
 
 export function mount(slot) {
   const picker = colorInput({ value: "#f5b942", "aria-label": "Pick a color" });
-  const hexInput = textInput({ value: "#F5B942", class: "mvb-in mvb-in--mono", "aria-label": "Hex value" });
-  const swatch = el("div", { class: "mvb-swatch" });
+  const hexInput = textInput({ value: "#F5B942", mono: true, "aria-label": "Hex value" });
+  const swatch = el("div", { class: "h-14 rounded-r1 border border-orbit-hard bg-deck-2" });
   const error = notice("error");
   let current = "#f5b942";
 
   const readonly = (label) => {
-    const field = textInput({ readonly: true, class: "mvb-in mvb-in--mono", "aria-label": `${label}, press to copy` });
+    const field = textInput({ readonly: true, mono: true, "aria-label": `${label}, press to copy` });
     const wrap = panel(label, field);
     wrap.style.cursor = "pointer";
     wrap.addEventListener("click", async () => {
@@ -82,8 +82,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => `--color: ${current};`, "Copy CSS"),
       copyButton(() => current, "Copy hex", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   read("#F5B942", false);
 

package/mevebu/libs/js/tools/content-calendar.js

@@ -19,7 +19,7 @@ export function mount(slot) {
     { value: "Idea", label: "Status", onChange: (next) => { status = next; } }
   );
 
-  const listWrap = el("div", { class: "mvb-scroll" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
   const addButton = button("Add", { icon: "plus", kind: "fill" });
 
   const save = () => writePin(PIN, { entries });
@@ -46,7 +46,7 @@ export function mount(slot) {
       el("td", {}, entry.platform || ""),
       el("td", {}, entry.status),
       el("td", {}, removeButton(entry))));
-    listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+    listWrap.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
       el("thead", {}, el("tr", {},
         el("th", {}, "Date"), el("th", {}, "Topic"), el("th", {}, "Platform"), el("th", {}, "Status"), el("th", {}, ""))),
       el("tbody", {}, ...rows)));
@@ -100,8 +100,7 @@ export function mount(slot) {
       downloadButton(() => csv(), "content-calendar.csv", "Save CSV", "text/csv"),
       downloadButton(() => markdown(), "content-calendar.md", "Save Markdown", "text/markdown"),
       addButton
-    ),
-  });
+    )});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/contrast-checker.js

@@ -31,19 +31,19 @@ export function mount(slot) {
   const bgPicker = colorInput({ value: "#ffffff", "aria-label": "Background color" });
 
   const kvRow = (key) => {
-    const value = el("span", { class: "mvb-kv__v" }, "-");
-    return { v: value, node: 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" }, "-");
+    return { v: value, node: 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) };
   };
   const ratioRow = kvRow("Contrast ratio");
   const normalAA = kvRow("Normal text AA");
   const normalAAA = kvRow("Normal text AAA");
   const largeAA = kvRow("Large text AA");
   const largeAAA = kvRow("Large text AAA");
-  const list = el("div", { class: "mvb-kv" }, ratioRow.node, normalAA.node, normalAAA.node, largeAA.node, largeAAA.node);
+  const list = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" }, ratioRow.node, normalAA.node, normalAAA.node, largeAA.node, largeAAA.node);
 
   const sample = el(
     "div",
-    { class: "mvb-preview__sample" },
+    { class: "w-full rounded-lg border border-orbit bg-deck px-[18px] py-4" },
     el("p", { style: "margin:0 0 8px;font-size:20px;font-weight:700" }, "Large text sample"),
     el("p", { style: "margin:0;font-size:15px" }, "Normal text sample for the contrast reading.")
   );
@@ -82,8 +82,7 @@ export function mount(slot) {
       stack(panel("Text color", textPicker), panel("Background color", bgPicker)),
       stack(sample, list)
     ),
-    foot: actions(swap, copyButton(() => reading, "Copy result", "fill")),
-  });
+    foot: actions(swap, copyButton(() => reading, "Copy result", "fill"))});
   slot.append(card.node);
   update();
 

package/mevebu/libs/js/tools/cron-builder.js

@@ -38,8 +38,7 @@ const FIELDS = [
   ["hour", "Hour", "0-23", "*"],
   ["day", "Day of month", "1-31", "*"],
   ["month", "Month", "1-12", "*"],
-  ["weekday", "Day of week", "0-6", "*"],
-];
+  ["weekday", "Day of week", "0-6", "*"]];
 
 export function mount(slot) {
   const inputs = {};
@@ -49,8 +48,8 @@ export function mount(slot) {
     return panel(label, input, hint);
   });
 
-  const expression = textInput({ readonly: true, class: "mvb-in mvb-in--mono", "aria-label": "Cron expression" });
-  const reading = el("p", { class: "mvb-note" });
+  const expression = textInput({ readonly: true, mono: true, "aria-label": "Cron expression" });
+  const reading = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const error = notice("error");
 
   function run() {
@@ -80,8 +79,7 @@ export function mount(slot) {
       stack(...controls, error),
       stack(panel("Expression", expression), panel("Reading", reading))
     ),
-    foot: actions(reset, copyButton(() => expression.value, "Copy expression", "fill")),
-  });
+    foot: actions(reset, copyButton(() => expression.value, "Copy expression", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -3,11 +3,11 @@ import { el, bench, stack, rangeInput, output, copyButton, actions, toolcard } f
 
 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
   );
@@ -24,7 +24,7 @@ export function mount(slot) {
 
   const sample = el(
     "div",
-    { class: "mvb-preview__sample" },
+    { class: "w-full rounded-lg border border-orbit bg-deck px-[18px] py-4" },
     el("p", { style: "margin:0" }, "The quick brown fox jumps over the lazy dog.")
   );
   const code = output();
@@ -55,8 +55,7 @@ export function mount(slot) {
       stack(min, preferred, max),
       stack(sample, code)
     ),
-    foot: actions(copyButton(() => `font-size: ${clampValue()};`, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(() => `font-size: ${clampValue()};`, "Copy CSS", "fill"))});
   slot.append(card.node);
   update();
 

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

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

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

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

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

@@ -4,7 +4,7 @@ import { el, bench, stack, panel, textArea, switchControl, copyButton, actions,
 const bytes = (text) => new TextEncoder().encode(text).length;
 
 const tile = (key, value) =>
-  el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__v" }, value), el("span", { class: "mvb-stat__k" }, key));
+  el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, value), el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
 
 function minify(css, stripComments) {
   let out = "";
@@ -55,12 +55,10 @@ function minify(css, stripComments) {
 export function mount(slot) {
   const source = textArea({
     rows: 12,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "CSS",
-    value: "/* card */\n.card {\n  color: red;\n  padding: 10px 12px;\n}",
-  });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Minified CSS" });
-  const stats = el("div", { class: "mvb-stats" });
+    value: "/* card */\n.card {\n  color: red;\n  padding: 10px 12px;\n}"});
+  const result = textArea({ rows: 12, readonly: true, "aria-label": "Minified CSS" });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
   let stripComments = true;
 
   const comments = switchControl("Remove comments", { checked: true });
@@ -87,8 +85,7 @@ export function mount(slot) {
       stack(panel("Options", comments), panel("CSS", source)),
       stack(panel("Minified", result), stats)
     ),
-    foot: actions(copyButton(() => result.value, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(() => result.value, "Copy CSS", "fill"))});
   slot.append(card.node);
   run();
 

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

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

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

@@ -53,27 +53,26 @@ function detectDelimiter(text) {
 }
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "0");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 12, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "CSV", placeholder: "Paste CSV here" });
+  const source = textArea({ rows: 12, "aria-label": "CSV", placeholder: "Paste CSV here" });
   const delimiter = selectInput([
     { value: "auto", label: "Auto" },
     { value: ",", label: "Comma" },
     { value: ";", label: "Semicolon" },
     { value: "\t", label: "Tab" },
-    { value: "|", label: "Pipe" },
-  ], { value: "auto", "aria-label": "Delimiter" });
+    { value: "|", label: "Pipe" }], { value: "auto", "aria-label": "Delimiter" });
   const file = fileInput({ accept: ".csv,.tsv,.txt,text/csv", "aria-label": "CSV file" });
 
-  const tableWrap = el("div", { class: "mvb-scroll" });
+  const tableWrap = el("div", { class: "max-h-80 overflow-auto" });
   const rowsTile = tile("Rows");
   const colsTile = tile("Columns");
-  const stats = el("div", { class: "mvb-stats" }, rowsTile, colsTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, rowsTile, colsTile);
   const error = notice("error");
   let current = [];
 
@@ -82,7 +81,7 @@ export function mount(slot) {
     const text = source.value;
     if (!text.trim()) {
       current = [];
-      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "Paste CSV or choose a file."));
+      tableWrap.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Paste CSV or choose a file."));
       rowsTile.set("0");
       colsTile.set("0");
       return;
@@ -97,7 +96,7 @@ export function mount(slot) {
     }
     rowsTile.set(String(body.length));
     colsTile.set(String(header.length));
-    tableWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+    tableWrap.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
       el("thead", {}, el("tr", {}, ...header.map((cell, i) => el("th", {}, cell || `Column ${i + 1}`)))),
       el("tbody", {}, ...body.map((row) => el("tr", {}, ...header.map((_, i) => el("td", {}, row[i] ?? "")))))
     ));
@@ -121,8 +120,7 @@ export function mount(slot) {
       stack(panel("CSV", source), panel("Delimiter", delimiter), panel("CSV file", file), error),
       stack(stats, panel("Table", tableWrap))
     ),
-    foot: actions(clearButton, copyButton(() => current.map((row) => row.join("\t")).join("\n"), "Copy table", "fill")),
-  });
+    foot: actions(clearButton, copyButton(() => current.map((row) => row.join("\t")).join("\n"), "Copy table", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -12,8 +12,7 @@ const LOCALES = [
   { value: "id-ID", label: "Indonesian" },
   { value: "hi-IN", label: "Hindi" },
   { value: "ja-JP", label: "Japanese" },
-  { value: "pt-BR", label: "Portuguese (Brazil)" },
-];
+  { value: "pt-BR", label: "Portuguese (Brazil)" }];
 
 function format(locale, currency, value) {
   try {
@@ -28,9 +27,9 @@ export function mount(slot) {
   const currency = selectInput(CURRENCIES, { value: "USD", "aria-label": "Currency" });
   const locale = selectInput(LOCALES, { value: "en-US", "aria-label": "Locale" });
 
-  const amount = el("span", { class: "mvb-stat__v" }, "-");
-  const readout = el("div", { class: "mvb-stats" },
-    el("div", { class: "mvb-stat" }, amount, el("span", { class: "mvb-stat__k" }, "Formatted")));
+  const amount = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const readout = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" },
+    el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, amount, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Formatted")));
 
   const note = notice("note");
   note.write("The amount is formatted, not converted. No exchange rate is applied.");
@@ -58,8 +57,7 @@ export function mount(slot) {
       ),
       stack(readout, note)
     ),
-    foot: actions(copyButton(() => formatted, "Copy amount", "fill")),
-  });
+    foot: actions(copyButton(() => formatted, "Copy amount", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -21,20 +21,20 @@ export function mount(slot) {
   let list = Array.isArray(saved) ? saved : [];
 
   const title = textInput({ placeholder: "Activity", "aria-label": "Activity" });
-  const start = el("input", { class: "mvb-in", type: "time", value: "09:00", "aria-label": "Start time" });
-  const end = el("input", { class: "mvb-in", type: "time", value: "10:00", "aria-label": "End time" });
+  const start = el("input", { class: "min-w-0 rounded-r1 border border-orbit bg-deck text-ink transition-[border-color,box-shadow] duration-150 placeholder:text-ink-3 hover:border-orbit-hard focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft w-full min-h-[var(--ctl)] px-3 py-2.5 text-base", type: "time", value: "09:00", "aria-label": "Start time" });
+  const end = el("input", { class: "min-w-0 rounded-r1 border border-orbit bg-deck text-ink transition-[border-color,box-shadow] duration-150 placeholder:text-ink-3 hover:border-orbit-hard focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft w-full min-h-[var(--ctl)] px-3 py-2.5 text-base", type: "time", value: "10:00", "aria-label": "End time" });
 
-  const listWrap = el("div", { class: "mvb-scroll" });
-  const stats = el("div", { class: "mvb-stats" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
   const overlapNote = notice("error");
   const error = notice("error");
 
   const addButton = button("Add", { icon: "plus", kind: "fill" });
   const clearButton = button("Clear day", { icon: "trash" });
 
-  const tile = (key, value) => el("div", { class: "mvb-stat" },
-    el("span", { class: "mvb-stat__v" }, String(value)),
-    el("span", { class: "mvb-stat__k" }, key));
+  const tile = (key, value) => el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+    el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, String(value)),
+    el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
 
   const save = () => writePin(PIN, list);
 
@@ -69,7 +69,7 @@ export function mount(slot) {
         el("td", {}, flagged.has(item.id) ? "Overlap" : ""),
         el("td", {}, removeButton(item))
       ));
-      listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+      listWrap.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
         el("thead", {}, el("tr", {},
           el("th", {}, "Start"), el("th", {}, "End"), el("th", {}, "Activity"),
           el("th", {}, "Length"), el("th", {}, "Note"), el("th", {}, ""))),
@@ -113,8 +113,7 @@ export function mount(slot) {
       ),
       stack(stats, panel("Day", listWrap), overlapNote)
     ),
-    foot: actions(clearButton, addButton),
-  });
+    foot: actions(clearButton, addButton)});
   slot.append(card.node);
   render();
 

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

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

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

@@ -10,8 +10,7 @@ const UNITS = [
   { value: "KiB", label: "Kibibyte", factor: 1024 },
   { value: "MiB", label: "Mebibyte", factor: 1048576 },
   { value: "GiB", label: "Gibibyte", factor: 1073741824 },
-  { value: "TiB", label: "Tebibyte", factor: 1099511627776 },
-];
+  { value: "TiB", label: "Tebibyte", factor: 1099511627776 }];
 
 const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
 const options = UNITS.map(({ value, label }) => ({ value, label }));
@@ -28,13 +27,13 @@ export function mount(slot) {
   const value = numberInput({ value: "1", step: "any", "aria-label": "Value" });
   const from = selectInput(options, { value: "MB", "aria-label": "From unit" });
   const to = selectInput(options, { value: "MiB", "aria-label": "To unit" });
-  const result = el("span", { class: "mvb-stat__v" }, "-");
-  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "Result"), result));
-  const factor = el("p", { class: "mvb-note" });
+  const result = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Result"), result));
+  const factor = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const scaleNote = notice("note");
   scaleNote.write("KB is 1000 bytes, KiB is 1024 bytes.");
   const error = notice("error");
-  const scroll = el("div", { class: "mvb-scroll" });
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
   let text = "";
 
   function run() {
@@ -54,7 +53,7 @@ export function mount(slot) {
     const out = (n * a.factor) / b.factor;
     result.textContent = `${fmt(out)} ${b.value}`;
     factor.textContent = `1 ${a.value} = ${fmt(a.factor / b.factor)} ${b.value}`;
-    scroll.replaceChildren(el("table", { class: "mvb-ttable" },
+    scroll.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
       el("thead", {}, el("tr", {}, el("th", {}, "Unit"), el("th", {}, "Value"))),
       el("tbody", {}, ...UNITS.map((unit) => el("tr", {},
         el("td", {}, unit.label),
@@ -78,8 +77,7 @@ export function mount(slot) {
       stack(panel("Value", value), panel("From", from), panel("To", to), scaleNote, error),
       stack(panel("Result", stats), factor, panel("All units", scroll))
     ),
-    foot: actions(swap, copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(swap, copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

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

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

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

@@ -30,18 +30,18 @@ function calendarDiff(from, to) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const start = textInput({ type: "date", value: "2026-01-01", "aria-label": "Start date" });
   const end = textInput({ type: "date", value: "2026-12-31", "aria-label": "End date" });
   const includeEnd = checkbox("Include the end date", { checked: false });
-  const days = el("span", { class: "mvb-kv__v" }, "-");
-  const weeks = el("span", { class: "mvb-kv__v" }, "-");
-  const calendar = el("span", { class: "mvb-kv__v" }, "-");
+  const days = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const weeks = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const calendar = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
   const kv = el(
     "div",
-    { class: "mvb-kv" },
+    { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
     kvRow("Total days", days),
     kvRow("Weeks", weeks),
     kvRow("Calendar gap", calendar)
@@ -89,8 +89,7 @@ export function mount(slot) {
       stack(panel("Start", start), panel("End", end), includeEnd, error),
       stack(panel("Difference", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();