mevebu 1.2.0 → 1.4.0

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

@@ -7,8 +7,7 @@ const SCALE = [
   ["A+", 4.0], ["A", 4.0], ["A-", 3.7],
   ["B+", 3.3], ["B", 3.0], ["B-", 2.7],
   ["C+", 2.3], ["C", 2.0], ["C-", 1.7],
-  ["D+", 1.3], ["D", 1.0], ["F", 0.0],
-];
+  ["D+", 1.3], ["D", 1.0], ["F", 0.0]];
 const POINTS = new Map(SCALE);
 
 function fmt(n) {
@@ -23,15 +22,15 @@ export function mount(slot) {
   const name = textInput({ placeholder: "Course", "aria-label": "Course" });
   const credits = numberInput({ min: "0", step: "0.5", placeholder: "Credits", "aria-label": "Credits" });
   const grade = selectInput(SCALE.map(([label]) => ({ value: label, label })), { value: "A", "aria-label": "Grade" });
-  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 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 totals = () => {
     const totalCredits = list.reduce((sum, item) => sum + item.credits, 0);
@@ -53,7 +52,7 @@ export function mount(slot) {
     if (!list.length) {
       listWrap.replaceChildren(blank("graduation-cap", "No courses 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", {}, "Course"), el("th", {}, "Credits"), el("th", {}, "Grade"), el("th", {}, ""))),
         el("tbody", {}, ...list.map((item) => el("tr", {},
           el("th", {}, item.name),
@@ -89,8 +88,7 @@ export function mount(slot) {
     foot: actions(copyButton(() => {
       const { totalCredits, gpa } = totals();
       return gpa == null ? "" : `GPA ${fmt(gpa)}, credits ${fmt(totalCredits)}`;
-    }, "Copy result"), addButton),
-  });
+    }, "Copy result"), addButton)});
   slot.append(card.node);
   render();
 

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

@@ -15,16 +15,16 @@ export function mount(slot) {
   const name = textInput({ placeholder: "Component", "aria-label": "Component" });
   const score = numberInput({ min: "0", max: "100", placeholder: "Score", "aria-label": "Score" });
   const weight = numberInput({ min: "0", max: "100", placeholder: "Weight", "aria-label": "Weight" });
-  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 weightNote = 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 totalWeight = () => list.reduce((sum, item) => sum + item.weight, 0);
   const grade = () => {
@@ -47,7 +47,7 @@ export function mount(slot) {
     if (!list.length) {
       listWrap.replaceChildren(blank("graduation-cap", "No components 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", {}, "Component"), el("th", {}, "Score"), el("th", {}, "Weight"), el("th", {}, ""))),
         el("tbody", {}, ...list.map((item) => el("tr", {},
           el("th", {}, item.name),
@@ -90,8 +90,7 @@ export function mount(slot) {
     foot: actions(copyButton(() => {
       const result = grade();
       return result == null ? "" : `Grade ${fmt(result)}, total weight ${fmt(totalWeight())}%`;
-    }, "Copy result"), addButton),
-  });
+    }, "Copy result"), addButton)});
   slot.append(card.node);
   render();
 

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

@@ -6,11 +6,10 @@ export function mount(slot) {
   let angle = 90;
   const stops = [
     { color: "#f5b942", pos: 0 },
-    { color: "#8a2be2", pos: 100 },
-  ];
+    { color: "#8a2be2", pos: 100 }];
 
-  const stopsBox = el("div", { class: "mvb-stack" });
-  const previewBox = el("div", { class: "mvb-preview__box" });
+  const stopsBox = el("div", { class: "grid content-start gap-4" });
+  const previewBox = el("div", { class: "grid h-[120px] w-[min(200px,100%)] place-items-center bg-jade text-2xs text-on-jade" });
   const code = output();
 
   function gradientCss() {
@@ -30,7 +29,7 @@ export function mount(slot) {
 
     const range = rangeInput({ min: 0, max: 100, value: stop.pos, "aria-label": "Stop position" });
     range.style.flex = "1";
-    const val = el("span", { class: "mvb-slider__val" }, `${stop.pos}%`);
+    const val = el("span", { class: "text-end font-mono text-2xs text-ink-2" }, `${stop.pos}%`);
     range.addEventListener("input", () => {
       stop.pos = parseInt(range.value, 10) || 0;
       val.textContent = `${stop.pos}%`;
@@ -45,7 +44,7 @@ export function mount(slot) {
       update();
     });
 
-    return el("div", { class: "mvb-row" }, picker, range, val, remove);
+    return el("div", { class: "flex min-w-0 flex-wrap items-center gap-2" }, picker, range, val, remove);
   }
 
   function paintStops() {
@@ -63,11 +62,11 @@ export function mount(slot) {
   });
 
   const angleInput = rangeInput({ min: 0, max: 360, value: angle, "aria-label": "Angle" });
-  const angleVal = el("span", { class: "mvb-slider__val" }, `${angle}deg`);
+  const angleVal = el("span", { class: "text-end font-mono text-2xs text-ink-2" }, `${angle}deg`);
   const angleRow = el(
     "div",
-    { class: "mvb-slider" },
-    el("span", { class: "mvb-slider__label" }, "Angle"),
+    { 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" }, "Angle"),
     angleInput,
     angleVal
   );
@@ -85,10 +84,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(panel("Type", typeChips), angleRow, panel("Color stops", stopsBox), addStop),
-      stack(el("div", { class: "mvb-preview" }, previewBox), code)
+      stack(el("div", { class: "grid min-h-40 place-items-center overflow-hidden rounded-r1 border border-orbit bg-deck-2 p-[22px]" }, previewBox), code)
     ),
-    foot: actions(copyButton(() => `background: ${gradientCss()};`, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(() => `background: ${gradientCss()};`, "Copy CSS", "fill"))});
   slot.append(card.node);
   paintStops();
   update();

package/mevebu/libs/js/tools/habit-tracker.js

@@ -11,15 +11,15 @@ export function mount(slot) {
   let list = Array.isArray(saved) ? saved : [];
 
   const name = textInput({ placeholder: "Habit", "aria-label": "Habit" });
-  const tableWrap = el("div", { class: "mvb-scroll" });
-  const stats = el("div", { class: "mvb-stats" });
+  const tableWrap = 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 addButton = button("Add", { icon: "plus", kind: "fill" });
   const clearWeek = button("Clear week", { 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);
   const today = todayIndex();
@@ -57,7 +57,7 @@ export function mount(slot) {
 
   function render() {
     if (!list.length) {
-      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "No habits yet."));
+      tableWrap.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "No habits yet."));
     } else {
       const head = el("tr", {},
         el("th", {}, "Habit"),
@@ -73,7 +73,7 @@ export function mount(slot) {
         el("td", {}, String(streak(habit))),
         el("td", {}, removeButton(habit))
       ));
-      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", {}, head),
         el("tbody", {}, ...rows)
       ));
@@ -109,8 +109,7 @@ export function mount(slot) {
       stack(panel("Habit", name)),
       stack(stats, panel("Week", tableWrap))
     ),
-    foot: actions(clearWeek, addButton),
-  });
+    foot: actions(clearWeek, addButton)});
   slot.append(card.node);
   render();
 

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