mevebu 1.3.0 → 1.4.0

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

@@ -16,8 +16,8 @@ function uniqueLines(text, ignoreCase) {
 }
 
 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;
 }
@@ -33,7 +33,7 @@ export function mount(slot) {
   const onlyATile = tile("Only in A");
   const onlyBTile = tile("Only in B");
   const bothTile = tile("In both");
-  const stats = el("div", { class: "mvb-stats" }, onlyATile, onlyBTile, bothTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, onlyATile, onlyBTile, bothTile);
   let report = "";
 
   function run() {
@@ -62,8 +62,7 @@ export function mount(slot) {
       onlyB.join("\n"),
       "",
       `In both (${both.length}):`,
-      both.join("\n"),
-    ].join("\n");
+      both.join("\n")].join("\n");
   }
 
   first.addEventListener("input", run);
@@ -75,8 +74,7 @@ export function mount(slot) {
       stack(panel("List A", first), panel("List B", second), panel(null, caseBox)),
       stack(stats, panel("Only in A", onlyAOut), panel("Only in B", onlyBOut), panel("In both", bothOut))
     ),
-    foot: actions(copyButton(() => report, "Copy report", "fill")),
-  });
+    foot: actions(copyButton(() => report, "Copy report", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/list-merger.js

@@ -4,8 +4,8 @@ import { el, bench, stack, panel, textArea, checkbox, output, copyButton, button
 const linesOf = (text) => text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
 
 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;
 }
@@ -20,7 +20,7 @@ export function mount(slot) {
   const listATile = tile("List A");
   const listBTile = tile("List B");
   const mergedTile = tile("Merged");
-  const stats = el("div", { class: "mvb-stats" }, listATile, listBTile, mergedTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, listATile, listBTile, mergedTile);
   let current = [];
 
   function run() {
@@ -56,8 +56,7 @@ export function mount(slot) {
       stack(panel("List A", first), panel("List B", second), panel(null, dedupeBox), panel(null, caseBox)),
       stack(stats, panel("Merged", result))
     ),
-    foot: actions(clearButton, copyButton(() => current.join("\n"), "Copy merged", "fill")),
-  });
+    foot: actions(clearButton, copyButton(() => current.join("\n"), "Copy merged", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/locale-number.js

@@ -10,8 +10,7 @@ const LOCALES = [
   ["id-ID", "Indonesian"],
   ["hi-IN", "Hindi"],
   ["ar-EG", "Arabic"],
-  ["ja-JP", "Japanese"],
-];
+  ["ja-JP", "Japanese"]];
 
 function format(locale, value, options) {
   try {
@@ -26,8 +25,8 @@ export function mount(slot) {
   const decimals = numberInput({ min: "0", max: "20", value: "2", "aria-label": "Fraction digits" });
   const grouping = switchControl("Group thousands", { checked: true });
 
-  const table = el("table", { class: "mvb-ttable" });
-  const tableWrap = el("div", { class: "mvb-scroll" }, table);
+  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" });
+  const tableWrap = el("div", { class: "max-h-80 overflow-auto" }, table);
   const note = notice("note");
   note.write("Formatting only. The number is not converted.");
 
@@ -40,8 +39,7 @@ export function mount(slot) {
     const options = {
       minimumFractionDigits: digits,
       maximumFractionDigits: digits,
-      useGrouping: grouping.input.checked,
-    };
+      useGrouping: grouping.input.checked};
     const rows = LOCALES.map(([code, name]) => {
       const shown = raw === "" || !Number.isFinite(parsed) ? "-" : format(code, parsed, options);
       return el("tr", {}, el("th", {}, name), el("td", {}, shown));
@@ -68,8 +66,7 @@ export function mount(slot) {
       ),
       stack(note, panel("By locale", tableWrap))
     ),
-    foot: actions(copyButton(() => tableText, "Copy list", "fill")),
-  });
+    foot: actions(copyButton(() => tableText, "Copy list", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -40,7 +40,7 @@ function blocks(source) {
   const isBlockStart = (index) => {
     const line = lines[index];
     return !line.trim() || /^```/.test(line) || /^#{1,6}\s/.test(line) || /^\s*>/.test(line) ||
-      /^\s*([-*+]|\d+[.)])\s+/.test(line) || /^\s*([-*_])(\s*\1){2,}\s*$/.test(line) || isTableStart(index);
+      /^\s*([-*+]|\d+[.)])\s+/.test(line) || /^\s*([-*_])(\s*\1){2}\s*$/.test(line) || isTableStart(index);
   };
 
   while (i < lines.length) {
@@ -64,7 +64,7 @@ function blocks(source) {
       continue;
     }
 
-    if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
+    if (/^\s*([-*_])(\s*\1){2}\s*$/.test(line)) {
       nodes.push(el("hr"));
       i++;
       continue;
@@ -115,11 +115,9 @@ function blocks(source) {
 export function mount(slot) {
   const source = textArea({
     rows: 16,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "Markdown",
-    value: "# Title\n\nSome **bold**, *italic* and `code`.\n\n- one\n- two\n\n> A quote.\n\n| a | b |\n| --- | --- |\n| 1 | 2 |\n\n```js\nconst x = 1;\n```\n",
-  });
-  const preview = el("div", { class: "mvb-pane" });
+    value: "# Title\n\nSome **bold**, *italic* and `code`.\n\n- one\n- two\n\n> A quote.\n\n| a | b |\n| --- | --- |\n| 1 | 2 |\n\n```js\nconst x = 1;\n```\n"});
+  const preview = 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" });
 
   function run() {
     preview.replaceChildren(...blocks(source.value));
@@ -132,8 +130,7 @@ export function mount(slot) {
       stack(panel("Markdown", source)),
       stack(panel("Preview", preview))
     ),
-    foot: actions(copyButton(() => source.value, "Copy markdown", "fill")),
-  });
+    foot: actions(copyButton(() => source.value, "Copy markdown", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/markdown-table.js

@@ -6,8 +6,8 @@ const cell = (text) => String(text ?? "").replace(/\|/g, "\\|").trim();
 export function mount(slot) {
   const columns = ["left", "left", "left"];
   const rows = [["Name", "Role", "City"], ["Ada", "Engineer", "London"]];
-  const editor = el("div", { class: "mvb-scroll" });
-  const alignment = el("div", { class: "mvb-stack" });
+  const editor = el("div", { class: "max-h-80 overflow-auto" });
+  const alignment = el("div", { class: "grid content-start gap-4" });
   const result = output({ rows: 8 });
 
   const toMarkdown = () => {
@@ -15,8 +15,7 @@ export function mount(slot) {
     const marks = columns.map((align) => (align === "center" ? ":---:" : align === "right" ? "---:" : ":---"));
     const lines = [
       `| ${columns.map((_, index) => cell(head[index])).join(" | ")} |`,
-      `| ${marks.join(" | ")} |`,
-    ];
+      `| ${marks.join(" | ")} |`];
     for (let r = 1; r < rows.length; r++) {
       lines.push(`| ${columns.map((_, index) => cell(rows[r][index])).join(" | ")} |`);
     }
@@ -26,7 +25,7 @@ export function mount(slot) {
   const update = () => { result.write(toMarkdown()); };
 
   function paintEditor() {
-    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" });
     const headRow = el("tr");
     for (let c = 0; c < columns.length; c++) {
       const input = textInput({ value: rows[0][c] ?? "", "aria-label": `Column ${c + 1} header` });
@@ -100,8 +99,7 @@ export function mount(slot) {
       stack(panel("Columns", row(addColumn, removeColumn)), panel("Rows", row(addRow, removeRow)), panel("Alignment", alignment)),
       stack(panel("Cells", editor), panel("Markdown", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy table", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy table", "fill"))});
   slot.append(card.node);
   paint();
 

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

@@ -6,8 +6,8 @@ function fmt(n) {
 }
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "-");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -18,7 +18,7 @@ export function mount(slot) {
   const price = tile("Selling price");
   const profit = tile("Profit");
   const margin = tile("Margin");
-  const stats = el("div", { class: "mvb-stats" }, price, profit, margin);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, price, profit, margin);
   const error = notice("error");
   let text = "";
 
@@ -58,8 +58,7 @@ export function mount(slot) {
       stack(panel("Cost", cost), panel("Markup %", markup), 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/meeting-agenda.js

@@ -22,21 +22,21 @@ export function mount(slot) {
   const saved = readPin(PIN, { start: "09:00", items: [] });
   let list = Array.isArray(saved.items) ? saved.items : [];
 
-  const startInput = el("input", { class: "mvb-in", type: "time", value: saved.start || "09:00", "aria-label": "Meeting start" });
+  const startInput = 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: saved.start || "09:00", "aria-label": "Meeting start" });
   const topic = textInput({ placeholder: "Topic", "aria-label": "Topic" });
   const owner = textInput({ placeholder: "Owner", "aria-label": "Owner" });
   const minutes = numberInput({ min: 1, max: 600, value: 10, "aria-label": "Minutes" });
 
-  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 error = notice("error");
 
   const addButton = button("Add", { icon: "plus", kind: "fill" });
   const copyAgenda = copyButton(() => agendaText(), "Copy agenda");
 
-  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 base = () => {
     const [h, m] = String(startInput.value || "00:00").split(":").map(Number);
@@ -83,7 +83,7 @@ export function mount(slot) {
         el("td", {}, `${item.minutes} min`),
         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", {}, "Topic"), el("th", {}, "Owner"),
           el("th", {}, "Time"), el("th", {}, ""))),
@@ -126,8 +126,7 @@ export function mount(slot) {
       ),
       stack(stats, panel("Agenda", listWrap))
     ),
-    foot: actions(copyAgenda, addButton),
-  });
+    foot: actions(copyAgenda, addButton)});
   slot.append(card.node);
   render();
 

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

@@ -7,17 +7,17 @@ export function mount(slot) {
   const url = textInput({ value: "https://example.com", "aria-label": "URL" });
   const description = textArea({ rows: 3, value: "Small privacy first tools that run entirely in the browser.", "aria-label": "Description" });
 
-  const urlLine = el("span", { class: "mvb-note" }, "");
-  const titleLine = el("span", { class: "mvb-stat__v" }, "");
-  const descLine = el("p", { class: "mvb-note" }, "");
-  const sample = el("div", { class: "mvb-preview__sample" },
-    el("div", { class: "mvb-stack" }, urlLine, titleLine, descLine));
-
-  const titleCount = el("span", { class: "mvb-stat__v" }, "0");
-  const descCount = el("span", { class: "mvb-stat__v" }, "0");
-  const stats = el("div", { class: "mvb-stats" },
-    el("div", { class: "mvb-stat" }, titleCount, el("span", { class: "mvb-stat__k" }, "Title chars")),
-    el("div", { class: "mvb-stat" }, descCount, el("span", { class: "mvb-stat__k" }, "Description chars"))
+  const urlLine = el("span", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "");
+  const titleLine = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "");
+  const descLine = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "");
+  const sample = el("div", { class: "w-full rounded-lg border border-orbit bg-deck px-[18px] py-4" },
+    el("div", { class: "grid content-start gap-4" }, urlLine, titleLine, descLine));
+
+  const titleCount = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const descCount = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  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" }, titleCount, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Title chars")),
+    el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, descCount, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Description chars"))
   );
   const note = notice("note");
 
@@ -40,8 +40,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => title.value.trim(), "Copy title"),
       copyButton(() => description.value.trim(), "Copy description", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/meta-tags.js

@@ -16,11 +16,11 @@ export function mount(slot) {
   );
   const result = output({ rows: 8 });
 
-  const titleCount = el("span", { class: "mvb-stat__v" }, "0");
-  const descCount = el("span", { class: "mvb-stat__v" }, "0");
-  const stats = el("div", { class: "mvb-stats" },
-    el("div", { class: "mvb-stat" }, titleCount, el("span", { class: "mvb-stat__k" }, "Title chars")),
-    el("div", { class: "mvb-stat" }, descCount, el("span", { class: "mvb-stat__k" }, "Description chars"))
+  const titleCount = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const descCount = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  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" }, titleCount, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Title chars")),
+    el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, descCount, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Description chars"))
   );
 
   function build() {
@@ -51,8 +51,7 @@ export function mount(slot) {
       ),
       stack(stats, panel("Meta tags", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy tags", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy tags", "fill"))});
   slot.append(card.node);
   build();
 

package/mevebu/libs/js/tools/mime-types.js

@@ -9,24 +9,23 @@ const TYPES = [
   ["mp3", "audio/mpeg", "Audio"], ["wav", "audio/wav", "Audio"], ["ogg", "audio/ogg", "Audio"], ["oga", "audio/ogg", "Audio"], ["m4a", "audio/mp4", "Audio"], ["flac", "audio/flac", "Audio"], ["aac", "audio/aac", "Audio"],
   ["mp4", "video/mp4", "Video"], ["webm", "video/webm", "Video"], ["ogv", "video/ogg", "Video"], ["mov", "video/quicktime", "Video"], ["avi", "video/x-msvideo", "Video"], ["mkv", "video/x-matroska", "Video"],
   ["woff", "font/woff", "Font"], ["woff2", "font/woff2", "Font"], ["ttf", "font/ttf", "Font"], ["otf", "font/otf", "Font"], ["eot", "application/vnd.ms-fontobject", "Font"],
-  ["wasm", "application/wasm", "Binary"], ["bin", "application/octet-stream", "Binary"],
-];
+  ["wasm", "application/wasm", "Binary"], ["bin", "application/octet-stream", "Binary"]];
 
 export function mount(slot) {
   const filter = textInput({ type: "search", placeholder: "Extension or type", "aria-label": "Filter" });
-  const scroll = el("div", { class: "mvb-scroll" });
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
   let visible = TYPES;
 
   function run() {
     const query = filter.value.trim().toLowerCase();
     visible = TYPES.filter(([ext, mime]) => !query || ext.includes(query) || mime.toLowerCase().includes(query));
     if (!visible.length) {
-      scroll.replaceChildren(el("p", { class: "mvb-note" }, "No type matches."));
+      scroll.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "No type matches."));
       return;
     }
     scroll.replaceChildren(el(
       "table",
-      { class: "mvb-ttable" },
+      { 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", {}, "Extension"), el("th", {}, "MIME type"), el("th", {}, "Kind"))),
       el("tbody", {}, ...visible.map(([ext, mime, kind]) => el("tr", {},
         el("td", {}, `.${ext}`),
@@ -43,8 +42,7 @@ export function mount(slot) {
       stack(panel("Filter", filter)),
       stack(panel("MIME types", scroll))
     ),
-    foot: actions(copyButton(() => visible.map(([ext, mime]) => `.${ext} ${mime}`).join("\n"), "Copy list", "fill")),
-  });
+    foot: actions(copyButton(() => visible.map(([ext, mime]) => `.${ext} ${mime}`).join("\n"), "Copy list", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -8,7 +8,7 @@ export function mount(slot) {
   const listField = textArea({ value: saved.entries ?? "", rows: 8, "aria-label": "Entries, one per line", placeholder: "One entry per line" });
   const countField = numberInput({ value: saved.winners ?? "1", min: "1", max: "500", "aria-label": "How many to draw" });
   const uniqueBox = checkbox("No repeats", { checked: saved.unique !== false });
-  const notify = el("p", { class: "mvb-note" });
+  const notify = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
 
   const drawButton = button("Draw", { icon: "play", kind: "fill" });
   const copyButton = button("Copy", { icon: "copy" });
@@ -58,8 +58,7 @@ export function mount(slot) {
       stack(panel("Entries", listField), panel("Winners", countField), panel(null, uniqueBox)),
       stack(panel("Drawn", result), notify)
     ),
-    foot: actions(copyButton, drawButton),
-  });
+    foot: actions(copyButton, drawButton)});
   slot.append(card.node);
   draw();
 

package/mevebu/libs/js/tools/number-base-converter.js

@@ -5,8 +5,7 @@ const BASES = [
   { value: "2", label: "Binary" },
   { value: "8", label: "Octal" },
   { value: "10", label: "Decimal" },
-  { value: "16", label: "Hex" },
-];
+  { value: "16", label: "Hex" }];
 
 const PATTERNS = { 2: /^[01]+$/, 8: /^[0-7]+$/, 10: /^[0-9]+$/, 16: /^[0-9a-f]+$/ };
 const PREFIX = { 2: "0b", 8: "0o", 10: "", 16: "0x" };
@@ -23,17 +22,17 @@ function parseInBase(text, base) {
 }
 
 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: "255", "aria-label": "Number", placeholder: "255" });
-  const binary = el("span", { class: "mvb-kv__v" }, "-");
-  const octal = el("span", { class: "mvb-kv__v" }, "-");
-  const decimal = el("span", { class: "mvb-kv__v" }, "-");
-  const hex = el("span", { class: "mvb-kv__v" }, "-");
+  const binary = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const octal = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimal = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const hex = 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("Binary", binary),
     kvRow("Octal", octal),
     kvRow("Decimal", decimal),
@@ -76,8 +75,7 @@ export function mount(slot) {
     onChange: (value) => {
       base = value;
       run();
-    },
-  });
+    }});
 
   source.addEventListener("input", run);
 
@@ -86,8 +84,7 @@ export function mount(slot) {
       stack(panel("Number", source), panel("Input base", chips), error),
       stack(panel("In every base", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy all", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy all", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/password-generator.js

@@ -5,12 +5,11 @@ const SETS = {
   lower: "abcdefghijklmnopqrstuvwxyz",
   upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
   digits: "0123456789",
-  symbols: "!@#$%^&*()-_=+[]{};:,.<>?",
-};
+  symbols: "!@#$%^&*()-_=+[]{};:,.<>?"};
 
 export function mount(slot) {
   const lengthField = rangeInput({ min: "6", max: "64", value: "16", "aria-label": "Length" });
-  const lengthLabel = el("span", { class: "mvb-field__label" });
+  const lengthLabel = el("span", { class: "text-sm font-semibold text-ink-2" });
 
   function showLength() {
     lengthLabel.textContent = `Length: ${lengthField.value}`;
@@ -20,11 +19,10 @@ export function mount(slot) {
     { value: "lower", label: "a to z" },
     { value: "upper", label: "A to Z" },
     { value: "digits", label: "0 to 9" },
-    { value: "symbols", label: "Symbols" },
-  ]);
+    { value: "symbols", label: "Symbols" }]);
 
-  const secret = textInput({ class: "mvb-in mvb-in--mono", readonly: true, "aria-label": "Password", placeholder: "Press Generate" });
-  const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Strength" }, el("div", { class: "mvb-meter__fill" }));
+  const secret = textInput({ mono: true, readonly: true, "aria-label": "Password", placeholder: "Press Generate" });
+  const meter = el("div", { class: "h-2 overflow-hidden rounded-full bg-deck-2", role: "img", "aria-label": "Strength" }, el("div", { class: "h-full w-0 rounded-full bg-orbit-hard transition-[width,background-color] duration-150 data-[level=weak]:bg-danger data-[level=ok]:bg-star data-[level=strong]:bg-jade" }));
   const strength = notice("note");
   const error = notice("error");
 
@@ -37,11 +35,11 @@ export function mount(slot) {
 
   function draw() {
     const source = pool();
-    const fill = meter.querySelector(".mvb-meter__fill");
+    const fill = meter.firstElementChild;
     if (!source) {
       secret.value = "";
       fill.style.width = "0%";
-      fill.className = "mvb-meter__fill";
+      delete fill.dataset.level;
       meter.setAttribute("aria-label", "Strength");
       strength.write("");
       error.write("Pick at least one group above.");
@@ -65,7 +63,7 @@ export function mount(slot) {
     const bits = Math.round(length * Math.log2(source.length));
     const word = bits < 50 ? "weak" : bits < 90 ? "good" : "strong";
     fill.style.width = `${Math.min(100, (bits / 128) * 100)}%`;
-    fill.className = `mvb-meter__fill ${bits < 50 ? "mvb-weak" : bits < 90 ? "mvb-ok" : "mvb-strong"}`;
+    fill.dataset.level = bits < 50 ? "weak" : bits < 90 ? "ok" : "strong";
     // The bar is colour only, so the reading it stands for also goes on the bar itself.
     meter.setAttribute("aria-label", `Strength: ${bits} bits, ${word}`);
     strength.write(`${bits} bits, ${word}.`);
@@ -84,8 +82,7 @@ export function mount(slot) {
       stack(panel(lengthLabel, lengthField), groups, error),
       stack(panel("Password", secret), meter, strength)
     ),
-    foot: actions(copyButton, generateButton),
-  });
+    foot: actions(copyButton, generateButton)});
   slot.append(card.node);
   draw();
 

package/mevebu/libs/js/tools/password-strength.js

@@ -3,24 +3,21 @@ import { el, icon, passwordInput, button, bench, stack, panel, notice, copyButto
 
 const COMMON = new Set([
   "password", "123456", "123456789", "qwerty", "letmein", "admin", "welcome",
-  "iloveyou", "monkey", "dragon", "abc123", "111111", "000000", "passw0rd",
-]);
+  "iloveyou", "monkey", "dragon", "abc123", "111111", "000000", "passw0rd"]);
 
 const GROUPS = [
   { test: (value) => /[a-z]/.test(value) },
   { test: (value) => /[A-Z]/.test(value) },
   { test: (value) => /[0-9]/.test(value) },
-  { test: (value) => /[^A-Za-z0-9]/.test(value) },
-];
+  { test: (value) => /[^A-Za-z0-9]/.test(value) }];
 
 const LEVELS = [
-  { name: "Very weak", cls: "mvb-weak" },
-  { name: "Weak", cls: "mvb-weak" },
-  { name: "Fair", cls: "mvb-ok" },
-  { name: "Good", cls: "mvb-ok" },
-  { name: "Strong", cls: "mvb-strong" },
-  { name: "Very strong", cls: "mvb-strong" },
-];
+  { name: "Very weak", key: "weak" },
+  { name: "Weak", key: "weak" },
+  { name: "Fair", key: "ok" },
+  { name: "Good", key: "ok" },
+  { name: "Strong", key: "strong" },
+  { name: "Very strong", key: "strong" }];
 
 function analyze(value) {
   const length = value.length;
@@ -35,7 +32,7 @@ function analyze(value) {
   const hints = [];
   if (length < 12) hints.push("Use at least 12 characters.");
   if (groups < 3) hints.push("Mix upper case, lower case, digits and symbols.");
-  if (/(.)\1{2,}/.test(value)) {
+  if (/(.)\1{2}/.test(value)) {
     score -= 1;
     hints.push("Repeated characters are easy to guess.");
   }
@@ -47,17 +44,17 @@ function analyze(value) {
 }
 
 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 field = passwordInput({ autocomplete: "off", "aria-label": "Password", placeholder: "Type a password" });
   const showButton = button("Show", { icon: "eye" });
-  const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Strength" }, el("div", { class: "mvb-meter__fill" }));
-  const label = el("p", { class: "mvb-note text-[1.0625rem] font-bold text-ink" });
-  const lengthValue = el("span", { class: "mvb-kv__v" }, "-");
-  const groupsValue = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" }, kvRow("Length", lengthValue), kvRow("Character groups", groupsValue));
-  const hints = el("div", { class: "mvb-stack" });
+  const meter = el("div", { class: "h-2 overflow-hidden rounded-full bg-deck-2", role: "img", "aria-label": "Strength" }, el("div", { class: "h-full w-0 rounded-full bg-orbit-hard transition-[width,background-color] duration-150 data-[level=weak]:bg-danger data-[level=ok]:bg-star data-[level=strong]:bg-jade" }));
+  const label = el("p", { class: "border-s-[3px] border-transparent ps-2 text-md font-bold text-ink" });
+  const lengthValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const groupsValue = 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("Length", lengthValue), kvRow("Character groups", groupsValue));
+  const hints = el("div", { class: "grid content-start gap-4" });
   const status = notice("note");
   let report = "";
 
@@ -69,11 +66,11 @@ export function mount(slot) {
 
   function run() {
     const value = field.value;
-    const fill = meter.querySelector(".mvb-meter__fill");
+    const fill = meter.firstElementChild;
     hints.replaceChildren();
     if (!value) {
       fill.style.width = "0%";
-      fill.className = "mvb-meter__fill";
+      delete fill.dataset.level;
       label.textContent = "";
       meter.setAttribute("aria-label", "Strength");
       lengthValue.textContent = "-";
@@ -85,7 +82,7 @@ export function mount(slot) {
     const { score, groups, length, hints: why } = analyze(value);
     const level = LEVELS[score];
     fill.style.width = `${(score / 5) * 100}%`;
-    fill.className = `mvb-meter__fill ${level.cls}`;
+    fill.dataset.level = level.key;
     label.textContent = level.name;
     // The bar is colour only, so the reading it stands for also goes on the bar itself.
     meter.setAttribute("aria-label", `Strength: ${level.name}`);
@@ -104,11 +101,10 @@ export function mount(slot) {
 
   const card = toolcard({
     body: bench(
-      stack(panel("Password", el("div", { class: "mvb-secret" }, field, showButton))),
+      stack(panel("Password", el("div", { class: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2" }, field, showButton))),
       stack(meter, label, kv, hints, status)
     ),
-    foot: actions(copyButton(() => report, "Copy report", "fill")),
-  });
+    foot: actions(copyButton(() => report, "Copy report", "fill"))});
   slot.append(card.node);
   run();