mevebu 1.2.0 → 1.4.0

package/mevebu/libs/js/tools/abstract-checklist.js

@@ -6,12 +6,11 @@ const PARTS = [
   { value: "aim", label: "Aim" },
   { value: "method", label: "Method" },
   { value: "results", label: "Results" },
-  { value: "conclusion", label: "Conclusion" },
-];
+  { value: "conclusion", label: "Conclusion" }];
 
 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;
 }
@@ -23,7 +22,7 @@ export function mount(slot) {
   const parts = toggleRow(PARTS.map((part) => ({ ...part, checked: false })));
   const wordsTile = tile("Words");
   const tickedTile = tile("Ticked");
-  const stats = el("div", { class: "mvb-stats" }, wordsTile, tickedTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, wordsTile, tickedTile);
   const note = notice("note");
   note.write("This checks structure only, not quality.");
   let summary = "";
@@ -43,8 +42,7 @@ export function mount(slot) {
       stack(panel("Abstract", source), note),
       stack(stats, panel("Parts found", parts))
     ),
-    foot: actions(copyButton(() => summary, "Copy checklist", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy checklist", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/add-subtract-days.js

@@ -5,8 +5,7 @@ const UNITS = [
   { value: "days", label: "Days" },
   { value: "weeks", label: "Weeks" },
   { value: "months", label: "Months" },
-  { value: "years", label: "Years" },
-];
+  { value: "years", label: "Years" }];
 
 const pad = (n) => String(n).padStart(2, "0");
 
@@ -24,7 +23,7 @@ function parseDate(value) {
 const iso = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 
 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 date = textInput({ type: "date", value: "2026-01-01", "aria-label": "Start date" });
@@ -35,12 +34,12 @@ export function mount(slot) {
     [{ value: "add", label: "Add" }, { value: "subtract", label: "Subtract" }],
     { value: "add", label: "Direction", onChange: (value) => { mode = value; run(); } }
   );
-  const result = el("span", { class: "mvb-stat__v" }, "-");
-  const tile = el("div", { class: "mvb-stat" }, result, el("span", { class: "mvb-stat__k" }, "Result"));
-  const stats = el("div", { class: "mvb-stats" }, tile);
-  const isoOut = el("span", { class: "mvb-kv__v" }, "-");
-  const weekday = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" }, kvRow("ISO date", isoOut), kvRow("Weekday", weekday));
+  const result = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const tile = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, result, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Result"));
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, tile);
+  const isoOut = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const weekday = 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("ISO date", isoOut), kvRow("Weekday", weekday));
   const error = notice("error");
   let text = "";
 
@@ -94,8 +93,7 @@ export function mount(slot) {
       ),
       stack(stats, panel("Result", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -32,20 +32,20 @@ function calendarDiff(from, to) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const today = new Date();
   const birth = textInput({ type: "date", value: "1990-01-01", "aria-label": "Birth date" });
   const at = textInput({ type: "date", value: `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`, "aria-label": "Age at date" });
 
-  const age = el("span", { class: "mvb-kv__v" }, "-");
-  const totalDays = el("span", { class: "mvb-kv__v" }, "-");
-  const nextDate = el("span", { class: "mvb-kv__v" }, "-");
-  const nextIn = el("span", { class: "mvb-kv__v" }, "-");
+  const age = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const totalDays = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const nextDate = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const nextIn = 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("Age", age),
     kvRow("Total days", totalDays),
     kvRow("Next birthday", nextDate),
@@ -97,8 +97,7 @@ export function mount(slot) {
       stack(panel("Birth date", birth), panel("Age at", at), error),
       stack(panel("Result", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy age", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy age", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/api-request-builder.js

@@ -36,8 +36,8 @@ function build(method, url, headers, body) {
 export function mount(slot) {
   const methodSelect = selectInput(METHODS, { value: "GET", "aria-label": "Method" });
   const urlInput = textInput({ value: "https://api.example.com/users", "aria-label": "URL", spellcheck: "false" });
-  const headerInput = textArea({ rows: 5, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Headers", placeholder: "Content-Type: application/json", value: "Accept: application/json" });
-  const bodyInput = textArea({ rows: 6, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Body", placeholder: '{"name":"Ada"}', value: '{\n  "name": "Ada"\n}' });
+  const headerInput = textArea({ rows: 5, "aria-label": "Headers", placeholder: "Content-Type: application/json", value: "Accept: application/json" });
+  const bodyInput = textArea({ rows: 6, "aria-label": "Body", placeholder: '{"name":"Ada"}', value: '{\n  "name": "Ada"\n}' });
   const result = output({ rows: 14 });
   const hint = notice("note");
 
@@ -65,8 +65,7 @@ export function mount(slot) {
       ),
       stack(panel("fetch", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy snippet", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy snippet", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -10,8 +10,7 @@ const UNITS = [
   { value: "in2", label: "Square inch", factor: 0.00064516 },
   { value: "ft2", label: "Square foot", factor: 0.09290304 },
   { value: "yd2", label: "Square yard", factor: 0.83612736 },
-  { value: "acre", label: "Acre", factor: 4046.8564224 },
-];
+  { value: "acre", label: "Acre", factor: 4046.8564224 }];
 
 const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
 const options = UNITS.map(({ value, label }) => ({ value, label }));
@@ -28,11 +27,11 @@ export function mount(slot) {
   const value = numberInput({ value: "1", step: "any", "aria-label": "Value" });
   const from = selectInput(options, { value: "m2", "aria-label": "From unit" });
   const to = selectInput(options, { value: "ft2", "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() {
@@ -52,7 +51,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),
@@ -76,8 +75,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/aspect-ratio.js

@@ -8,18 +8,18 @@ export function mount(slot) {
   const width = numberInput({ value: 1920, min: "1", "aria-label": "Width" });
   const height = numberInput({ value: 1080, min: "1", "aria-label": "Height" });
 
-  const ratioValue = el("span", { class: "mvb-kv__v" }, "-");
-  const decimalValue = el("span", { class: "mvb-kv__v" }, "-");
+  const ratioValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimalValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
   const list = el(
     "div",
-    { class: "mvb-kv" },
-    el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, "Ratio"), ratioValue),
-    el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, "Decimal"), decimalValue)
+    { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
+    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" }, "Ratio"), ratioValue),
+    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" }, "Decimal"), decimalValue)
   );
 
   const newWidth = numberInput({ value: 800, min: "1", "aria-label": "New width" });
   const newHeight = numberInput({ value: 450, min: "1", "aria-label": "New height" });
-  const box = el("div", { class: "mvb-preview__box" });
+  const box = el("div", { class: "grid h-[120px] w-[min(200px,100%)] place-items-center bg-jade text-2xs text-on-jade" });
   const code = output();
   let ratioText = "16 / 9";
 
@@ -68,10 +68,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(panel("Width", width), panel("Height", height), list),
-      stack(el("div", { class: "mvb-preview" }, box), panel("New width", newWidth), panel("New height", newHeight), code)
+      stack(el("div", { class: "grid min-h-40 place-items-center overflow-hidden rounded-r1 border border-orbit bg-deck-2 p-[22px]" }, box), panel("New width", newWidth), panel("New height", newHeight), code)
     ),
-    foot: actions(copyButton(() => `aspect-ratio: ${ratioText};`, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(() => `aspect-ratio: ${ratioText};`, "Copy CSS", "fill"))});
   slot.append(card.node);
   update();
 

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

@@ -12,8 +12,8 @@ function parseNumbers(text) {
 }
 
 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;
 }
@@ -25,7 +25,7 @@ export function mount(slot) {
   const mode = tile("Mode");
   const count = tile("Count");
   const sum = tile("Sum");
-  const stats = el("div", { class: "mvb-stats" }, mean, median, mode, count, sum);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, mean, median, mode, count, sum);
   const error = notice("error");
   let text = "";
 
@@ -72,8 +72,7 @@ export function mount(slot) {
       stack(panel("Numbers", source), error),
       stack(stats)
     ),
-    foot: actions(copyButton(() => text, "Copy summary", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy summary", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/base64.js

@@ -1,21 +1,40 @@
 // Text to Base64 and back, live in both directions. Emoji and other non-Latin
 // text survive the round trip because the bytes are UTF-8.
-import { bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+import { checkbox, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
 
-const encode = (text) => btoa(String.fromCharCode(...new TextEncoder().encode(text)));
-const decode = (text) => new TextDecoder().decode(
-  Uint8Array.from(atob(text.replace(/\s+/g, "")), (char) => char.charCodeAt(0))
-);
+// btoa and atob take a binary string. A long input is converted in chunks,
+// because spreading a whole document into String.fromCharCode overflows the
+// call stack.
+const CHUNK = 0x8000;
+
+function encode(text, urlSafe) {
+  const bytes = new TextEncoder().encode(text);
+  let binary = "";
+  for (let at = 0; at < bytes.length; at += CHUNK) {
+    binary += String.fromCharCode(...bytes.subarray(at, at + CHUNK));
+  }
+  const base = btoa(binary);
+  return urlSafe ? base.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "") : base;
+}
+
+function decode(text) {
+  // Both alphabets are accepted and the padding goes back on: the URL-safe form
+  // drops its padding, and a JWT segment turns up that way.
+  const base = text.replace(/\s+/g, "").replace(/-/g, "+").replace(/_/g, "/");
+  const padded = base.padEnd(base.length + ((4 - (base.length % 4)) % 4), "=");
+  return new TextDecoder().decode(Uint8Array.from(atob(padded), (char) => char.charCodeAt(0)));
+}
 
 export function mount(slot) {
   const plain = textArea({ rows: 7, value: "hello mevebu", "aria-label": "Plain text" });
-  const coded = textArea({ rows: 7, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Base64" });
+  const coded = textArea({ rows: 7, "aria-label": "Base64" });
+  const urlSafeBox = checkbox("URL-safe, no padding", { checked: false });
   const error = notice("error");
   let guard = false;
 
   function refresh() {
     try {
-      coded.value = plain.value ? encode(plain.value) : "";
+      coded.value = plain.value ? encode(plain.value, urlSafeBox.input.checked) : "";
       error.write("");
     } catch {
       error.write("That text could not be encoded.");
@@ -42,20 +61,21 @@ export function mount(slot) {
     }
   });
 
+  urlSafeBox.input.addEventListener("change", refresh);
+
   const card = toolcard({
     body: bench(
       stack(panel("Text", plain)),
-      stack(panel("Base64", coded), error)
+      stack(panel("Base64", coded), urlSafeBox, error)
     ),
     foot: actions(
       copyButton(() => plain.value, "Copy text"),
       copyButton(() => coded.value, "Copy Base64", "fill"),
-    ),
-  });
+    )});
   slot.append(card.node);
   refresh();
 
   return {};
 }
 
-export default { mount };
+export default { mount };

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

@@ -8,11 +8,11 @@ function parse(text) {
 }
 
 export function mount(slot) {
-  const first = textInput({ value: "1011", class: "mvb-in mvb-in--mono", "aria-label": "First number" });
-  const second = textInput({ value: "0110", class: "mvb-in mvb-in--mono", "aria-label": "Second number" });
-  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" }, "Binary"), result));
-  const decimal = el("p", { class: "mvb-note" });
+  const first = textInput({ value: "1011", mono: true, "aria-label": "First number" });
+  const second = textInput({ value: "0110", mono: true, "aria-label": "Second number" });
+  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" }, "Binary"), result));
+  const decimal = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const error = notice("error");
   let mode = "add";
   let text = "";
@@ -47,8 +47,7 @@ export function mount(slot) {
       stack(panel("First number", first), panel("Second number", second), panel("Operation", chips), error),
       stack(panel("Result", stats), decimal)
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/border-radius.js

@@ -5,11 +5,11 @@ const KEYS = ["tl", "tr", "br", "bl"];
 
 function slider(label, value) {
   const input = rangeInput({ min: 0, max: 100, value, "aria-label": label });
-  const val = el("span", { class: "mvb-slider__val" }, `${value}px`);
+  const val = el("span", { class: "text-end font-mono text-2xs text-ink-2" }, `${value}px`);
   const node = el(
     "div",
-    { class: "mvb-slider" },
-    el("span", { class: "mvb-slider__label" }, label),
+    { class: "grid items-center gap-2.5 [grid-template-columns:88px_minmax(0,1fr)_62px] max-[45rem]:[grid-template-columns:minmax(0,1fr)_62px]" },
+    el("span", { class: "text-2xs font-semibold text-ink-2 max-[45rem]:col-span-2" }, label),
     input,
     val
   );
@@ -27,11 +27,10 @@ export function mount(slot) {
     tl: slider("Top left", corners.tl),
     tr: slider("Top right", corners.tr),
     br: slider("Bottom right", corners.br),
-    bl: slider("Bottom left", corners.bl),
-  };
+    bl: slider("Bottom left", corners.bl)};
 
   const linkSwitch = switchControl("Link corners", { checked: true });
-  const previewBox = el("div", { class: "mvb-preview__box" });
+  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 css() {
@@ -75,10 +74,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(linkSwitch, sliders.tl, sliders.tr, sliders.br, sliders.bl),
-      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(css, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(css, "Copy CSS", "fill"))});
   slot.append(card.node);
   update();
 

package/mevebu/libs/js/tools/box-shadow.js

@@ -9,11 +9,11 @@ function hexToRgb(hex) {
 
 function slider(label, { min, max, value, unit = "px" }) {
   const input = rangeInput({ min, max, 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
   );
@@ -31,7 +31,7 @@ export function mount(slot) {
   const opacity = slider("Opacity", { min: 0, max: 100, value: 35, unit: "%" });
   const picker = colorInput({ value: "#1b1b1f", "aria-label": "Shadow color" });
   const inset = switchControl("Inset", {});
-  const previewBox = el("div", { class: "mvb-preview__box" });
+  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 css() {
@@ -58,10 +58,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(x, y, blur, spread, opacity, panel("Color", picker), inset),
-      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(() => `box-shadow: ${css()};`, "Copy CSS", "fill")),
-  });
+    foot: actions(copyButton(() => `box-shadow: ${css()};`, "Copy CSS", "fill"))});
   slot.append(card.node);
   update();
 

package/mevebu/libs/js/tools/break-even.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 unitsTile = tile("Break-even units");
   const revenueTile = tile("Revenue");
   const marginTile = tile("Contribution");
-  const stats = el("div", { class: "mvb-stats" }, unitsTile, revenueTile, marginTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, unitsTile, revenueTile, marginTile);
   const error = notice("error");
   let text = "";
 
@@ -57,8 +57,7 @@ export function mount(slot) {
       stack(panel("Fixed costs", fixed), panel("Price per unit", price), panel("Variable cost per unit", variable), error),
       stack(stats)
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/business-days.js

@@ -20,7 +20,7 @@ function parseDate(value) {
 const iso = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const start = textInput({ type: "date", value: "2026-01-01", "aria-label": "Start date" });
@@ -29,13 +29,13 @@ export function mount(slot) {
   const weekdays = toggleRow(DAY_LABELS.map((label, index) => ({ value: index, label, checked: index >= 1 && index <= 5 })));
   const holidays = textArea({ rows: 4, placeholder: "2026-01-01", "aria-label": "Holidays, one per line" });
 
-  const working = el("span", { class: "mvb-kv__v" }, "-");
-  const calendar = el("span", { class: "mvb-kv__v" }, "-");
-  const weekend = el("span", { class: "mvb-kv__v" }, "-");
-  const holidayCount = el("span", { class: "mvb-kv__v" }, "-");
+  const working = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const calendar = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const weekend = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const holidayCount = 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("Working days", working),
     kvRow("Calendar days", calendar),
     kvRow("Weekend days", weekend),
@@ -109,8 +109,7 @@ export function mount(slot) {
       ),
       stack(panel("Holidays", holidays), panel("Count", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/canonical-tag.js

@@ -6,15 +6,15 @@ const esc = (value) =>
   String(value).replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[char]));
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const source = textInput({ value: "https://example.com/blog/post/?utm_source=news#comments", "aria-label": "Page URL" });
   const result = output({ rows: 2 });
   const error = notice("error");
-  const normalized = el("span", { class: "mvb-kv__v" }, "-");
-  const length = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" }, kvRow("Canonical URL", normalized), kvRow("Length", length));
+  const normalized = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const length = 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("Canonical URL", normalized), kvRow("Length", length));
   let canonical = "";
 
   function clear() {
@@ -52,8 +52,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => canonical, "Copy URL"),
       copyButton(() => result.textContent, "Copy tag", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   run();
 

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

@@ -2,8 +2,8 @@
 import { el, bench, stack, panel, textArea, numberInput, notice, copyButton, actions, toolcard } from "../core.js";
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "0");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -16,7 +16,7 @@ export function mount(slot) {
   const wordsTile = tile("Words");
   const linesTile = tile("Lines");
   const leftTile = tile("Left");
-  const stats = el("div", { class: "mvb-stats" }, charsTile, wordsTile, linesTile, leftTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, charsTile, wordsTile, linesTile, leftTile);
   const note = notice("note");
 
   let summary = "";
@@ -43,8 +43,7 @@ export function mount(slot) {
       `${chars} characters`,
       `${words} words`,
       `${lines} lines`,
-      cap > 0 ? `${cap - chars} left of ${cap}` : "No limit set",
-    ].join("\n");
+      cap > 0 ? `${cap - chars} left of ${cap}` : "No limit set"].join("\n");
   }
 
   source.addEventListener("input", run);
@@ -55,8 +54,7 @@ export function mount(slot) {
       stack(panel("Caption", source), panel("Character limit", limit)),
       stack(stats, note)
     ),
-    foot: actions(copyButton(() => summary, "Copy summary", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy summary", "fill"))});
   slot.append(card.node);
   run();