mevebu 1.3.0 → 1.4.1

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

@@ -6,7 +6,7 @@ const ALGORITHMS = ["SHA-1", "SHA-256", "SHA-384", "SHA-512"];
 export function mount(slot) {
   const source = textArea({ value: "mevebu", rows: 5, "aria-label": "Text to hash", placeholder: "Type or paste text" });
   const result = output();
-  const digest = el("p", { class: "mvb-note" });
+  const digest = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const error = notice("error");
 
   let algorithm = "SHA-256";
@@ -17,8 +17,7 @@ export function mount(slot) {
     onChange: (value) => {
       algorithm = value;
       run();
-    },
-  });
+    }});
 
   async function run() {
     error.write("");
@@ -45,8 +44,7 @@ export function mount(slot) {
       stack(panel("Algorithm", chips), panel("Text", source)),
       stack(panel("Hash", result), digest, error)
     ),
-    foot: actions(copy),
-  });
+    foot: actions(copy)});
   slot.append(card.node);
   run();
 

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

@@ -4,8 +4,8 @@ import { el, bench, stack, panel, textArea, chipRow, output, copyButton, actions
 const clean = (raw) => raw.replace(/#/g, "").replace(/[^\p{L}\p{N}_]/gu, "");
 
 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;
 }
@@ -14,22 +14,21 @@ export function mount(slot) {
   const source = textArea({ rows: 8, "aria-label": "Tags", placeholder: "One tag per line or space separated" });
   const tagsTile = tile("Tags");
   const removedTile = tile("Duplicates removed");
-  const stats = el("div", { class: "mvb-stats" }, tagsTile, removedTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, tagsTile, removedTile);
   const out = output({ rows: 8 });
 
   let mode = "list";
   const modeChips = chipRow(
     [
       { value: "line", label: "One line" },
-      { value: "list", label: "One per line" },
-    ],
+      { value: "list", label: "One per line" }],
     { value: "list", label: "Layout", onChange: (next) => { mode = next; run(); } }
   );
 
   let result = "";
 
   function run() {
-    const tokens = source.value.split(/[\s,]+/).map(clean).filter(Boolean);
+    const tokens = source.value.split(/[\s]+/).map(clean).filter(Boolean);
     const seen = new Set();
     const tags = [];
     for (const token of tokens) {
@@ -51,8 +50,7 @@ export function mount(slot) {
       stack(panel("Tags", source), panel("Layout", modeChips)),
       stack(stats, panel("Result", out))
     ),
-    foot: actions(copyButton(() => result, "Copy tags", "fill")),
-  });
+    foot: actions(copyButton(() => result, "Copy tags", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -5,8 +5,7 @@ const ALGORITHMS = [
   { value: "SHA-256", label: "SHA-256" },
   { value: "SHA-384", label: "SHA-384" },
   { value: "SHA-512", label: "SHA-512" },
-  { value: "SHA-1", label: "SHA-1" },
-];
+  { value: "SHA-1", label: "SHA-1" }];
 
 const encoder = new TextEncoder();
 const toHex = (bytes) => [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
@@ -46,13 +45,12 @@ export function mount(slot) {
     body: bench(
       stack(
         panel("Message", message),
-        panel("Secret key", el("div", { class: "mvb-secret" }, secret, showButton)),
+        panel("Secret key", el("div", { class: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2" }, secret, showButton)),
         panel("Hash", hashField)
       ),
       stack(panel("Signature", result), error)
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy signature", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy signature", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/hpp-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;
 }
@@ -19,7 +19,7 @@ export function mount(slot) {
   const units = numberInput({ value: "1", min: "1", "aria-label": "Units made" });
   const total = tile("Total cost");
   const perUnit = tile("Cost per unit");
-  const stats = el("div", { class: "mvb-stats" }, total, perUnit);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, total, perUnit);
   const error = notice("error");
   let text = "";
 
@@ -59,8 +59,7 @@ export function mount(slot) {
       ),
       stack(stats)
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/html-entity.js

@@ -13,7 +13,7 @@ function decode(text) {
 
 export function mount(slot) {
   const source = textArea({ rows: 6, value: "<a href=\"/x\">Tom & Jerry</a>", "aria-label": "Input" });
-  const result = textArea({ rows: 6, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  const result = textArea({ rows: 6, readonly: true, "aria-label": "Result" });
   const error = notice("error");
   let mode = "encode";
 
@@ -38,8 +38,7 @@ export function mount(slot) {
       stack(panel("Direction", chips), panel("Input", source), error),
       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/html-formatter.js

@@ -8,11 +8,9 @@ const tagName = (token) => (token.match(/^<\s*\/?\s*([a-zA-Z0-9:-]+)/) || [])[1]
 export function mount(slot) {
   const source = textArea({
     rows: 12,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "HTML",
-    value: "<div class=\"card\"><h1>Title</h1><p>Text <strong>bold</strong></p><br></div>",
-  });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Formatted HTML" });
+    value: "<div class=\"card\"><h1>Title</h1><p>Text <strong>bold</strong></p><br></div>"});
+  const result = textArea({ rows: 12, readonly: true, "aria-label": "Formatted HTML" });
   const warn = notice("warn");
   let size = "2";
 
@@ -61,8 +59,7 @@ export function mount(slot) {
       stack(panel("Indent", chips), panel("HTML", source), warn),
       stack(panel("Formatted", result))
     ),
-    foot: actions(copyButton(() => result.value, "Copy markup", "fill")),
-  });
+    foot: actions(copyButton(() => result.value, "Copy markup", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/http-status.js

@@ -6,14 +6,13 @@ const CODES = [
   [200, "OK"], [201, "Created"], [202, "Accepted"], [203, "Non-Authoritative Information"], [204, "No Content"], [205, "Reset Content"], [206, "Partial Content"],
   [300, "Multiple Choices"], [301, "Moved Permanently"], [302, "Found"], [303, "See Other"], [304, "Not Modified"], [307, "Temporary Redirect"], [308, "Permanent Redirect"],
   [400, "Bad Request"], [401, "Unauthorized"], [402, "Payment Required"], [403, "Forbidden"], [404, "Not Found"], [405, "Method Not Allowed"], [406, "Not Acceptable"], [408, "Request Timeout"], [409, "Conflict"], [410, "Gone"], [411, "Length Required"], [412, "Precondition Failed"], [413, "Payload Too Large"], [414, "URI Too Long"], [415, "Unsupported Media Type"], [416, "Range Not Satisfiable"], [418, "I'm a teapot"], [422, "Unprocessable Entity"], [425, "Too Early"], [426, "Upgrade Required"], [428, "Precondition Required"], [429, "Too Many Requests"], [431, "Request Header Fields Too Large"], [451, "Unavailable For Legal Reasons"],
-  [500, "Internal Server Error"], [501, "Not Implemented"], [502, "Bad Gateway"], [503, "Service Unavailable"], [504, "Gateway Timeout"], [505, "HTTP Version Not Supported"], [507, "Insufficient Storage"], [508, "Loop Detected"], [511, "Network Authentication Required"],
-];
+  [500, "Internal Server Error"], [501, "Not Implemented"], [502, "Bad Gateway"], [503, "Service Unavailable"], [504, "Gateway Timeout"], [505, "HTTP Version Not Supported"], [507, "Insufficient Storage"], [508, "Loop Detected"], [511, "Network Authentication Required"]];
 
 const statusClass = (code) => `${Math.floor(code / 100)}xx`;
 
 export function mount(slot) {
   const filter = textInput({ type: "search", placeholder: "Code or reason", "aria-label": "Filter" });
-  const scroll = el("div", { class: "mvb-scroll" });
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
   let group = "all";
   let visible = CODES;
 
@@ -30,12 +29,12 @@ export function mount(slot) {
       return String(code).includes(query) || message.toLowerCase().includes(query);
     });
     if (!visible.length) {
-      scroll.replaceChildren(el("p", { class: "mvb-note" }, "No code matches."));
+      scroll.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "No code 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", {}, "Code"), el("th", {}, "Message"), el("th", {}, "Class"))),
       el("tbody", {}, ...visible.map(([code, message]) => el("tr", {},
         el("td", {}, String(code)),
@@ -52,8 +51,7 @@ export function mount(slot) {
       stack(panel("Filter", filter), panel("Class", chips)),
       stack(panel("Status codes", scroll))
     ),
-    foot: actions(copyButton(() => visible.map(([code, message]) => `${code} ${message}`).join("\n"), "Copy list", "fill")),
-  });
+    foot: actions(copyButton(() => visible.map(([code, message]) => `${code} ${message}`).join("\n"), "Copy list", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/inventory-quantity.js

@@ -16,16 +16,16 @@ export function mount(slot) {
   const opening = numberInput({ value: "0", min: "0", "aria-label": "Opening stock" });
   const stockIn = numberInput({ value: "0", min: "0", "aria-label": "Stock in" });
   const stockOut = numberInput({ value: "0", min: "0", "aria-label": "Stock out" });
-  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 warn = notice("warn");
 
   const addButton = button("Add", { icon: "plus", kind: "fill" });
 
   const save = () => writePin(PIN, list);
-  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 closing = (item) => item.opening + item.in - item.out;
 
@@ -43,7 +43,7 @@ export function mount(slot) {
     if (!list.length) {
       listWrap.replaceChildren(blank("package", "No items yet."));
     } else {
-      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", {}, "Item"), el("th", {}, "Opening"), el("th", {}, "In"),
           el("th", {}, "Out"), el("th", {}, "Closing"), el("th", {}, ""))),
@@ -92,8 +92,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => list.map((item) => `${item.name}: opening ${fmt(item.opening)}, in ${fmt(item.in)}, out ${fmt(item.out)}, closing ${fmt(closing(item))}`).join("\n"), "Copy stock"),
       addButton
-    ),
-  });
+    )});
   slot.append(card.node);
   render();
 

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

@@ -4,12 +4,10 @@ import { bench, stack, panel, textArea, notice, chipRow, copyButton, actions, to
 export function mount(slot) {
   const source = textArea({
     rows: 12,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "JSON",
     placeholder: "Paste JSON",
-    value: '{"hello":"world","count":3,"items":[1,2,3]}',
-  });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+    value: '{"hello":"world","count":3,"items":[1,2,3]}'});
+  const result = textArea({ rows: 12, readonly: true, "aria-label": "Result" });
   const error = notice("error");
   let indent = "2";
 
@@ -40,8 +38,7 @@ export function mount(slot) {
       stack(panel("Indent", chips), panel("JSON", source), error),
       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/json-minifier.js

@@ -4,18 +4,16 @@ import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcar
 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));
 
 export function mount(slot) {
   const source = textArea({
     rows: 12,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "JSON",
     placeholder: "Paste JSON",
-    value: '{\n  "hello": "world",\n  "count": 3\n}',
-  });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Minified JSON" });
-  const stats = el("div", { class: "mvb-stats" });
+    value: '{\n  "hello": "world",\n  "count": 3\n}'});
+  const result = textArea({ rows: 12, readonly: true, "aria-label": "Minified JSON" });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
   const error = notice("error");
 
   function run() {
@@ -47,8 +45,7 @@ export function mount(slot) {
       stack(panel("JSON", source), error),
       stack(panel("Minified", result), stats)
     ),
-    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/json-to-csv.js

@@ -10,7 +10,7 @@ function stringifyCSV(rows, delimiter) {
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 12, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "JSON", placeholder: '[{"name":"Ada","role":"engineer"}]' });
+  const source = textArea({ rows: 12, "aria-label": "JSON", placeholder: '[{"name":"Ada","role":"engineer"}]' });
   const result = output({ rows: 12 });
   const error = notice("error");
   let current = "";
@@ -45,8 +45,7 @@ export function mount(slot) {
       ...records.map((record) => header.map((key) => {
         const value = record[key];
         return value && typeof value === "object" ? JSON.stringify(value) : value;
-      })),
-    ];
+      }))];
     current = stringifyCSV(rows, ",");
     result.write(current);
   }
@@ -61,8 +60,7 @@ export function mount(slot) {
     foot: actions(
       downloadButton(() => current, "data.csv", "Download CSV", "text/csv"),
       copyButton(() => current, "Copy CSV", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   run();
 

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

@@ -55,11 +55,9 @@ function generate(data, rootName) {
 export function mount(slot) {
   const source = textArea({
     rows: 12,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "JSON",
     placeholder: "Paste a JSON object or array",
-    value: '{\n  "id": 1,\n  "name": "Ada",\n  "tags": ["dev"],\n  "address": { "city": "London" }\n}',
-  });
+    value: '{\n  "id": 1,\n  "name": "Ada",\n  "tags": ["dev"],\n  "address": { "city": "London" }\n}'});
   const nameInput = textInput({ value: "Root", "aria-label": "Root type name" });
   const result = output({ rows: 16 });
   const error = notice("error");
@@ -91,8 +89,7 @@ export function mount(slot) {
       stack(panel("Root type name", nameInput), panel("JSON", source), error),
       stack(panel("TypeScript", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy types", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy types", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -12,7 +12,7 @@ function describe(data) {
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 12, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "JSON", placeholder: "Paste JSON" });
+  const source = textArea({ rows: 12, "aria-label": "JSON", placeholder: "Paste JSON" });
   const report = output({ rows: 4 });
   const error = notice("error");
 
@@ -38,8 +38,7 @@ export function mount(slot) {
       stack(panel("JSON", source), error),
       stack(panel("Result", report))
     ),
-    foot: actions(copyButton(() => report.textContent, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => report.textContent, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/jwt-decoder.js

@@ -12,10 +12,10 @@ function decodeSegment(segment) {
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 4, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Token", placeholder: "Paste a JWT" });
+  const source = textArea({ rows: 4, "aria-label": "Token", placeholder: "Paste a JWT" });
   const headerOut = output({ rows: 4 });
   const payloadOut = output({ rows: 8 });
-  const claims = el("div", { class: "mvb-kv" });
+  const claims = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });
   const error = notice("error");
 
   function render() {
@@ -49,9 +49,9 @@ export function mount(slot) {
       const value = Number(payload[key]);
       const when = Number.isFinite(value) ? new Date(value * 1000).toLocaleString() : String(payload[key]);
       claims.append(
-        el("div", { class: "mvb-kv__row" },
-          el("span", { class: "mvb-kv__k" }, label),
-          el("span", { class: "mvb-kv__v" }, when))
+        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" }, label),
+          el("span", { class: "wrap-anywhere font-mono text-2xs" }, when))
       );
     }
   }
@@ -63,8 +63,7 @@ export function mount(slot) {
       stack(panel("Token", source), error),
       stack(panel("Header", headerOut), panel("Payload", payloadOut), claims)
     ),
-    foot: actions(copyButton(() => payloadOut.textContent, "Copy payload", "fill")),
-  });
+    foot: actions(copyButton(() => payloadOut.textContent, "Copy payload", "fill"))});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/jwt-expiry.js

@@ -21,11 +21,11 @@ function relative(seconds) {
 }
 
 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: 4, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Token", placeholder: "Paste a JWT" });
-  const claims = el("div", { class: "mvb-kv" });
+  const source = textArea({ rows: 4, "aria-label": "Token", placeholder: "Paste a JWT" });
+  const claims = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });
   const status = notice("note");
   const error = notice("error");
   let summary = "";
@@ -82,12 +82,11 @@ export function mount(slot) {
       stack(
         panel("Token", source),
         error,
-        el("p", { class: "mvb-note" }, "Only the payload is read in this tab. The signature is not checked, so a valid look is not proof the token is genuine.")
+        el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Only the payload is read in this tab. The signature is not checked, so a valid look is not proof the token is genuine.")
       ),
       stack(panel("Time claims", claims), status)
     ),
-    foot: actions(copyButton(() => summary, "Copy claims", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy claims", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -21,12 +21,11 @@ export function mount(slot) {
   const headerField = textArea({ rows: 3, value: '{\n  "alg": "HS256",\n  "typ": "JWT"\n}' });
   const payloadField = textArea({
     rows: 7,
-    value: `{\n  "sub": "1234567890",\n  "name": "Ada",\n  "admin": true,\n  "iat": ${now}\n}`,
-  });
+    value: `{\n  "sub": "1234567890",\n  "name": "Ada",\n  "admin": true,\n  "iat": ${now}\n}`});
   const secretField = textInput({ type: "password", value: "your-256-bit-secret", autocomplete: "new-password" });
   const showButton = el(
     "button",
-    { class: "mvb-icobtn", type: "button", "aria-label": "Show secret", "aria-pressed": "false" },
+    { class: "inline-flex size-[var(--ctl)] cursor-pointer items-center justify-center rounded-r1 border border-transparent bg-transparent text-ink-2 transition-colors duration-150 hover:bg-deck-2 hover:text-ink focus-visible:border-jade", type: "button", "aria-label": "Show secret", "aria-pressed": "false" },
     icon("eye")
   );
   const error = notice("error");
@@ -94,13 +93,12 @@ export function mount(slot) {
       stack(
         panel("Header", headerField),
         panel("Payload", payloadField),
-        panel("Secret", el("div", { class: "mvb-secret" }, secretField, showButton)),
+        panel("Secret", el("div", { class: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2" }, secretField, showButton)),
         error
       ),
       stack(panel("Token", tokenOut), timePanel)
     ),
-    foot: actions(copyBtn),
-  });
+    foot: actions(copyBtn)});
   slot.append(card.node);
   sign();
 

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

@@ -9,8 +9,7 @@ const UNITS = [
   { value: "in", label: "Inch", factor: 0.0254 },
   { value: "ft", label: "Foot", factor: 0.3048 },
   { value: "yd", label: "Yard", factor: 0.9144 },
-  { value: "mi", label: "Mile", factor: 1609.344 },
-];
+  { value: "mi", label: "Mile", factor: 1609.344 }];
 
 const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
 const options = UNITS.map(({ value, label }) => ({ value, label }));
@@ -27,11 +26,11 @@ export function mount(slot) {
   const value = numberInput({ value: "1", step: "any", "aria-label": "Value" });
   const from = selectInput(options, { value: "m", "aria-label": "From unit" });
   const to = selectInput(options, { value: "ft", "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 error = notice("error");
-  const scroll = el("div", { class: "mvb-scroll" });
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
   let text = "";
 
   function run() {
@@ -51,7 +50,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),
@@ -75,8 +74,7 @@ export function mount(slot) {
       stack(panel("Value", value), panel("From", from), panel("To", to), 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/license-reference.js

@@ -7,19 +7,18 @@ const LICENSES = [
   { value: "GPL-3.0", label: "GPL-3.0", can: "Use, modify and distribute.", must: "Release derivative works under the same license and share the source.", cannot: "Add restrictions beyond the license." },
   { value: "BSD-3-Clause", label: "BSD-3-Clause", can: "Use, modify and distribute, including commercially.", must: "Keep the copyright notice and disclaimer.", cannot: "Use contributor names to endorse derivatives." },
   { value: "MPL-2.0", label: "MPL-2.0", can: "Use, modify and distribute.", must: "Share changes to MPL-licensed files under MPL.", cannot: "Hold contributors liable." },
-  { value: "Unlicense", label: "Unlicense", can: "Use, modify and distribute with no conditions.", must: "Nothing.", cannot: "Hold the author liable." },
-];
+  { value: "Unlicense", label: "Unlicense", can: "Use, modify and distribute with no conditions.", must: "Nothing.", cannot: "Hold the author liable." }];
 
 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 name = el("span", { class: "mvb-stat__v" }, LICENSES[0].label);
-  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "License"), name));
-  const can = el("span", { class: "mvb-kv__v" });
-  const must = el("span", { class: "mvb-kv__v" });
-  const cannot = el("span", { class: "mvb-kv__v" });
-  const kv = el("div", { class: "mvb-kv" }, kvRow("Can", can), kvRow("Must", must), kvRow("Cannot", cannot));
+  const name = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, LICENSES[0].label);
+  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" }, "License"), name));
+  const can = el("span", { class: "wrap-anywhere font-mono text-2xs" });
+  const must = el("span", { class: "wrap-anywhere font-mono text-2xs" });
+  const cannot = 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("Can", can), kvRow("Must", must), kvRow("Cannot", cannot));
   const disclaimer = notice("note");
   disclaimer.write("Short summary, not legal advice.");
   let current = LICENSES[0];
@@ -31,8 +30,7 @@ export function mount(slot) {
     onChange: (value) => {
       current = LICENSES.find((entry) => entry.value === value);
       run();
-    },
-  });
+    }});
 
   function run() {
     name.textContent = current.label;
@@ -47,8 +45,7 @@ export function mount(slot) {
       stack(panel("License", chips), disclaimer),
       stack(panel("Summary", stats), panel("Terms", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy summary", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy summary", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/line-counter.js

@@ -2,8 +2,8 @@
 import { el, bench, stack, panel, textArea, button, 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;
 }
@@ -14,7 +14,7 @@ export function mount(slot) {
   const totalTile = tile("Total lines");
   const filledTile = tile("Filled");
   const blankTile = tile("Blank");
-  const stats = el("div", { class: "mvb-stats" }, totalTile, filledTile, blankTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, totalTile, filledTile, blankTile);
 
   let counts = { total: 0, filled: 0, blank: 0 };
 
@@ -22,8 +22,7 @@ export function mount(slot) {
     return [
       `${counts.total} total lines`,
       `${counts.filled} filled`,
-      `${counts.blank} blank`,
-    ].join("\n");
+      `${counts.blank} blank`].join("\n");
   }
 
   function run() {
@@ -44,8 +43,7 @@ export function mount(slot) {
       stack(panel("Text", source)),
       stack(stats)
     ),
-    foot: actions(clearButton, copyButton(summary, "Copy summary", "fill")),
-  });
+    foot: actions(clearButton, copyButton(summary, "Copy summary", "fill"))});
   slot.append(card.node);
   run();