mevebu 1.3.0 → 1.4.1

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

@@ -8,15 +8,13 @@ const GREEK = {
   theta: "θ", iota: "ι", kappa: "κ", lambda: "λ", mu: "μ", nu: "ν", xi: "ξ",
   pi: "π", rho: "ρ", sigma: "σ", tau: "τ", phi: "φ", chi: "χ", psi: "ψ", omega: "ω",
   Gamma: "Γ", Delta: "Δ", Theta: "Θ", Lambda: "Λ", Xi: "Ξ", Pi: "Π", Sigma: "Σ",
-  Phi: "Φ", Psi: "Ψ", Omega: "Ω",
-};
+  Phi: "Φ", Psi: "Ψ", Omega: "Ω"};
 const SYMBOLS = {
   times: "×", cdot: "·", div: "÷", pm: "±", mp: "∓", le: "≤", leq: "≤",
   ge: "≥", geq: "≥", ne: "≠", neq: "≠", approx: "≈", equiv: "≡", infty: "∞",
   sum: "Σ", prod: "Π", int: "∫", partial: "∂", nabla: "∇", rightarrow: "→",
   to: "→", leftarrow: "←", Rightarrow: "⇒", Leftarrow: "⇐", leftrightarrow: "↔",
-  in: "∈", notin: "∉", forall: "∀", exists: "∃", angle: "∠", degree: "°",
-};
+  in: "∈", notin: "∉", forall: "∀", exists: "∃", angle: "∠", degree: "°"};
 
 const superscript = (value) => [...value].map((char) => SUP[char] ?? char).join("");
 const subscript = (value) => [...value].map((char) => SUB[char] ?? char).join("");
@@ -43,9 +41,8 @@ export function mount(slot) {
     rows: 12,
     value: "x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}",
     "aria-label": "LaTeX",
-    placeholder: "\\frac{a}{b}",
-  });
-  const result = el("pre", { class: "mvb-out" });
+    placeholder: "\\frac{a}{b}"});
+  const result = el("pre", { class: "m-0 max-h-[340px] w-full overflow-auto rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3 font-mono text-sm leading-normal whitespace-pre-wrap [overflow-wrap:anywhere]" });
   const note = notice("note");
   note.write("Plain text preview, not rendered math.");
 
@@ -60,8 +57,7 @@ export function mount(slot) {
       stack(panel("LaTeX", source)),
       stack(panel("Preview", result), note)
     ),
-    foot: actions(copyButton(() => source.value, "Copy LaTeX", "fill")),
-  });
+    foot: actions(copyButton(() => source.value, "Copy LaTeX", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/expense-split.js

@@ -18,7 +18,7 @@ export function mount(slot) {
     { value: mode, label: "Mode", onChange: (next) => { mode = next; save(); run(); } }
   );
   const sharesField = panel("Shares", shares);
-  const result = el("div", { class: "mvb-scroll" });
+  const result = el("div", { class: "max-h-80 overflow-auto" });
   const error = notice("error");
   const remainder = notice("warn");
   let text = "";
@@ -34,7 +34,7 @@ export function mount(slot) {
     const names = people.value.split("\n").map((line) => line.trim()).filter(Boolean);
     const amount = Number(total.value);
     if (!names.length || total.value.trim() === "" || !Number.isFinite(amount) || amount < 0) {
-      result.replaceChildren(el("p", { class: "mvb-note" }, "Add a total and one name per line."));
+      result.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Add a total and one name per line."));
       return;
     }
 
@@ -42,12 +42,12 @@ export function mount(slot) {
     if (mode === "custom") {
       weights = shares.value.split("\n").map((line) => line.trim()).filter(Boolean).map(Number);
       if (weights.length !== names.length || weights.some((w) => !Number.isFinite(w) || w < 0)) {
-        result.replaceChildren(el("p", { class: "mvb-note" }, "Add one share for each name."));
+        result.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Add one share for each name."));
         error.write("Add one share for each name.");
         return;
       }
       if (weights.reduce((a, b) => a + b, 0) <= 0) {
-        result.replaceChildren(el("p", { class: "mvb-note" }, "Add one share for each name."));
+        result.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Add one share for each name."));
         error.write("The shares add up to zero.");
         return;
       }
@@ -60,7 +60,7 @@ export function mount(slot) {
     const paid = rounded.reduce((a, b) => a + b, 0);
     const leftover = Math.round((amount - paid) * 100) / 100;
 
-    result.replaceChildren(el("table", { class: "mvb-ttable" },
+    result.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
       el("thead", {}, el("tr", {}, el("th", {}, "Person"), el("th", {}, "Amount"))),
       el("tbody", {}, ...names.map((name, i) => el("tr", {},
         el("th", {}, name),
@@ -79,8 +79,7 @@ export function mount(slot) {
       stack(panel("Total", total), panel("Mode", modeChips), panel("People", people), sharesField, error),
       stack(panel("Each person", result), remainder)
     ),
-    foot: actions(copyButton(() => text, "Copy split", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy split", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -7,8 +7,7 @@ const LAST = ["Ortega", "Wijaya", "Santos", "Kimura", "Novak", "Haddad", "Silva"
 const PLACES = [
   ["Jakarta", "ID", "+62"], ["Bandung", "ID", "+62"], ["Madrid", "ES", "+34"], ["Barcelona", "ES", "+34"],
   ["Austin", "US", "+1"], ["Seattle", "US", "+1"], ["Berlin", "DE", "+49"], ["Munich", "DE", "+49"],
-  ["Osaka", "JP", "+81"], ["Tokyo", "JP", "+81"], ["Recife", "BR", "+55"], ["Lagos", "NG", "+234"],
-];
+  ["Osaka", "JP", "+81"], ["Tokyo", "JP", "+81"], ["Recife", "BR", "+55"], ["Lagos", "NG", "+234"]];
 const pick = (list) => list[randomInt(list.length)];
 
 function person(id) {
@@ -23,8 +22,7 @@ function person(id) {
     phone: `${code} ${700 + randomInt(300)} ${1000000 + randomInt(8999999)}`,
     city,
     country,
-    card: `4${String(randomInt(1000)).padStart(3, "0")} … ${1000 + randomInt(9000)}`,
-  };
+    card: `4${String(randomInt(1000)).padStart(3, "0")} … ${1000 + randomInt(9000)}`};
 }
 
 export function mount(slot) {
@@ -34,12 +32,11 @@ export function mount(slot) {
     [
       { value: "json", label: "JSON" },
       { value: "csv", label: "CSV" },
-      { value: "table", label: "Table" },
-    ],
+      { value: "table", label: "Table" }],
     { value: "json", label: "Format", onChange: (value) => { format = value; render(); } }
   );
   const text = output({ rows: 14 });
-  const table = el("div", { class: "mvb-scroll" });
+  const table = el("div", { class: "max-h-80 overflow-auto" });
   let rows = [];
 
   function totalCount() {
@@ -51,8 +48,7 @@ export function mount(slot) {
     const columns = Object.keys(rows[0] ?? {});
     return [
       columns.join("\t"),
-      ...rows.map((row) => columns.map((key) => String(row[key])).join("\t")),
-    ].join("\n");
+      ...rows.map((row) => columns.map((key) => String(row[key])).join("\t"))].join("\n");
   }
 
   function render() {
@@ -75,7 +71,7 @@ export function mount(slot) {
       }
       const head = el("tr");
       for (const key of columns) head.append(el("th", {}, key));
-      table.replaceChildren(el("table", { class: "mvb-ttable" }, el("thead", {}, head), body));
+      table.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), body));
     }
   }
 
@@ -106,10 +102,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(panel("Format", chips), panel("Records", countField)),
-      el("div", { class: "mvb-stack" }, text, table)
+      el("div", { class: "grid content-start gap-4" }, text, table)
     ),
-    foot: actions(copyButton, saveButton, againButton),
-  });
+    foot: actions(copyButton, saveButton, againButton)});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/find-replace.js

@@ -9,9 +9,8 @@ export function mount(slot) {
   const replaceField = textInput({ placeholder: "Replace with", "aria-label": "Replace with" });
   const options = toggleRow([
     { value: "regex", label: "Regex", checked: false },
-    { value: "ignore", label: "Ignore case", checked: false },
-  ]);
-  const result = textArea({ rows: 9, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+    { value: "ignore", label: "Ignore case", checked: false }]);
+  const result = textArea({ rows: 9, readonly: true, "aria-label": "Result" });
   const error = notice("error");
   const countNote = notice("note");
 
@@ -77,8 +76,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Find", findField), panel("Replace with", replaceField), options, error, countNote),
       stack(panel("Result", result))
     ),
-    foot: actions(copyButton(() => result.value, "Copy result"), replaceOneButton, replaceAllButton),
-  });
+    foot: actions(copyButton(() => result.value, "Copy result"), replaceOneButton, replaceAllButton)});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/flashcard-creator.js

@@ -12,10 +12,10 @@ export function mount(slot) {
 
   const question = textInput({ placeholder: "Question", "aria-label": "Question" });
   const answer = textArea({ rows: 3, placeholder: "Answer", "aria-label": "Answer" });
-  const listWrap = el("div", { class: "mvb-scroll" });
-  const stats = el("div", { class: "mvb-stats" });
-  const face = el("pre", { class: "mvb-out" });
-  const faceLabel = el("span", { class: "mvb-field__label" }, "Question");
+  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 face = el("pre", { class: "m-0 max-h-[340px] w-full overflow-auto rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3 font-mono text-sm leading-normal whitespace-pre-wrap [overflow-wrap:anywhere]" });
+  const faceLabel = el("span", { class: "text-sm font-semibold text-ink-2" }, "Question");
 
   const addButton = button("Add card", { icon: "plus", kind: "fill" });
   const flipButton = button("Flip", { icon: "arrow-left-right" });
@@ -23,9 +23,9 @@ export function mount(slot) {
   const nextButton = button("Next");
 
   const save = () => writePin(PIN, cards);
-  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 textExport = () =>
     cards.map((card, i) => `${i + 1}. Q: ${card.question}\n   A: ${card.answer}`).join("\n\n");
@@ -52,7 +52,7 @@ export function mount(slot) {
       const card = cards[index];
       faceLabel.textContent = flipped ? "Answer" : "Question";
       face.textContent = flipped ? card.answer : card.question;
-      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("tbody", {}, ...cards.map((entry, i) => el("tr", {},
           el("th", {}, `${i + 1}. ${entry.question}`),
           el("td", {}, removeButton(entry)))))));
@@ -106,8 +106,7 @@ export function mount(slot) {
       copyButton(() => textExport(), "Copy text"),
       downloadButton(() => jsonExport(), "flashcards.json", "Save JSON", "application/json"),
       addButton
-    ),
-  });
+    )});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/font-pairing.js

@@ -12,16 +12,15 @@ const FONTS = [
   { value: 'Palatino, "Palatino Linotype", serif', label: "Palatino" },
   { value: "Garamond, Georgia, serif", label: "Garamond" },
   { value: '"Courier New", Courier, monospace', label: "Courier New" },
-  { value: "ui-monospace, SFMono-Regular, Menlo, monospace", label: "Mono" },
-];
+  { value: "ui-monospace, SFMono-Regular, Menlo, monospace", label: "Mono" }];
 
 function slider(label, { min, max, step, value, unit }) {
   const input = rangeInput({ min, max, step, value, "aria-label": label });
-  const val = el("span", { class: "mvb-slider__val" }, `${value}${unit}`);
+  const val = el("span", { class: "text-end font-mono text-2xs text-ink-2" }, `${value}${unit}`);
   const node = el(
     "div",
-    { class: "mvb-slider" },
-    el("span", { class: "mvb-slider__label" }, label),
+    { class: "grid items-center gap-2.5 [grid-template-columns:88px_minmax(0,1fr)_62px] max-[45rem]:[grid-template-columns:minmax(0,1fr)_62px]" },
+    el("span", { class: "text-2xs font-semibold text-ink-2 max-[45rem]:col-span-2" }, label),
     input,
     val
   );
@@ -46,7 +45,7 @@ export function mount(slot) {
 
   const heading = el("h2", { style: "margin:0 0 8px" }, "Heading sample");
   const para = el("p", { style: "margin:0" }, "Body text sample. The quick brown fox jumps over the lazy dog.");
-  const sample = el("div", { class: "mvb-preview__sample" }, heading, para);
+  const sample = el("div", { class: "w-full rounded-lg border border-orbit bg-deck px-[18px] py-4" }, heading, para);
   const code = output();
 
   function css() {
@@ -77,8 +76,7 @@ export function mount(slot) {
       stack(panel("Heading font", headingFont), panel("Body font", bodyFont), headingSize, bodySize, lineHeight, panel("Heading weight", weightChips)),
       stack(sample, code)
     ),
-    foot: actions(copyButton(css, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(css, "Copy CSS", "fill"))});
   slot.append(card.node);
   update();
 

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

@@ -17,19 +17,19 @@ function fmt(n) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const n1 = numberInput({ value: "1", "aria-label": "First numerator" });
   const d1 = numberInput({ value: "2", "aria-label": "First denominator" });
   const n2 = numberInput({ value: "1", "aria-label": "Second numerator" });
   const d2 = numberInput({ value: "3", "aria-label": "Second denominator" });
-  const resultRow = el("span", { class: "mvb-kv__v" }, "-");
-  const decimalRow = el("span", { class: "mvb-kv__v" }, "-");
-  const mixedRow = el("span", { class: "mvb-kv__v" }, "-");
+  const resultRow = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimalRow = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const mixedRow = 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("Fraction", resultRow),
     kvRow("Decimal", decimalRow),
     kvRow("Mixed number", mixedRow)
@@ -95,16 +95,14 @@ export function mount(slot) {
       { value: "+", label: "+" },
       { value: "-", label: "-" },
       { value: "x", label: "x" },
-      { value: "/", label: "/" },
-    ],
+      { value: "/", label: "/" }],
     {
       value: op,
       label: "Operation",
       onChange: (value) => {
         op = value;
         run();
-      },
-    }
+      }}
   );
 
   for (const input of [n1, d1, n2, d2]) input.addEventListener("input", run);
@@ -112,15 +110,14 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(
-        panel("First fraction", el("div", { class: "mvb-row" }, n1, d1)),
+        panel("First fraction", el("div", { class: "flex min-w-0 flex-wrap items-center gap-2" }, n1, d1)),
         panel("Operation", chips),
-        panel("Second fraction", el("div", { class: "mvb-row" }, n2, d2)),
+        panel("Second fraction", el("div", { class: "flex min-w-0 flex-wrap items-center gap-2" }, n2, d2)),
         error
       ),
       stack(panel("Result", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy fraction", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy fraction", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/git-command-builder.js

@@ -7,56 +7,46 @@ const OPERATIONS = {
   clone: {
     label: "Clone a repository",
     fields: [["url", "Repository URL", "https://github.com/user/repo.git"], ["directory", "Directory (optional)", ""]],
-    build: (v) => `git clone ${quote(v.url)}${v.directory ? ` ${quote(v.directory)}` : ""}`,
-  },
+    build: (v) => `git clone ${quote(v.url)}${v.directory ? ` ${quote(v.directory)}` : ""}`},
   switch: {
     label: "Switch branch",
     fields: [["branch", "Branch", "main"]],
-    build: (v) => `git switch ${quote(v.branch)}`,
-  },
+    build: (v) => `git switch ${quote(v.branch)}`},
   pull: {
     label: "Pull",
     fields: [["remote", "Remote", "origin"], ["branch", "Branch (optional)", ""]],
-    build: (v) => `git pull ${quote(v.remote)}${v.branch ? ` ${quote(v.branch)}` : ""}`,
-  },
+    build: (v) => `git pull ${quote(v.remote)}${v.branch ? ` ${quote(v.branch)}` : ""}`},
   commit: {
     label: "Commit",
     fields: [["message", "Message", "Fix the thing"], ["files", "Paths (optional)", ""]],
-    build: (v) => `git commit -m ${quote(v.message)}${v.files ? ` ${v.files}` : ""}`,
-  },
+    build: (v) => `git commit -m ${quote(v.message)}${v.files ? ` ${v.files}` : ""}`},
   push: {
     label: "Push",
     fields: [["remote", "Remote", "origin"], ["branch", "Branch", "main"]],
-    build: (v) => `git push ${quote(v.remote)} ${quote(v.branch)}`,
-  },
+    build: (v) => `git push ${quote(v.remote)} ${quote(v.branch)}`},
   "push-force": {
     label: "Force push",
     fields: [["remote", "Remote", "origin"], ["branch", "Branch", "main"]],
     build: (v) => `git push --force-with-lease ${quote(v.remote)} ${quote(v.branch)}`,
-    destructive: "Force push can overwrite commits on the remote.",
-  },
+    destructive: "Force push can overwrite commits on the remote."},
   merge: {
     label: "Merge",
     fields: [["branch", "Branch", "feature"]],
-    build: (v) => `git merge ${quote(v.branch)}`,
-  },
+    build: (v) => `git merge ${quote(v.branch)}`},
   rebase: {
     label: "Rebase",
     fields: [["branch", "Branch", "main"]],
-    build: (v) => `git rebase ${quote(v.branch)}`,
-  },
+    build: (v) => `git rebase ${quote(v.branch)}`},
   reset: {
     label: "Reset hard",
     fields: [["ref", "Commit or ref", "HEAD~1"]],
     build: (v) => `git reset --hard ${quote(v.ref)}`,
-    destructive: "Reset hard discards uncommitted work.",
-  },
-};
+    destructive: "Reset hard discards uncommitted work."}};
 
 export function mount(slot) {
   const options = Object.entries(OPERATIONS).map(([value, config]) => ({ value, label: config.label }));
   const operationSelect = selectInput(options, { value: "clone", "aria-label": "Operation" });
-  const fieldsHost = el("div", { class: "mvb-stack" });
+  const fieldsHost = el("div", { class: "grid content-start gap-4" });
   const result = output({ rows: 4 });
   const warn = notice("warn");
   const values = {};
@@ -89,8 +79,7 @@ export function mount(slot) {
       stack(panel("Operation", operationSelect), fieldsHost, warn),
       stack(panel("Command", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy command", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy command", "fill"))});
   slot.append(card.node);
   paintFields();
 

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