mevebu 1.2.0 → 1.4.0

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

@@ -55,32 +55,30 @@ function detectDelimiter(text) {
 const escapeCell = (cell) => String(cell ?? "").replace(/\|/g, "\\|").replace(/\s*\n\s*/g, " ").trim();
 
 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;
 }
 
 export function mount(slot) {
-  const source = textArea({ rows: 12, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Table data", placeholder: "Paste rows copied from a spreadsheet" });
+  const source = textArea({ rows: 12, "aria-label": "Table data", placeholder: "Paste rows copied from a spreadsheet" });
   const delimiter = selectInput([
     { value: "auto", label: "Auto" },
     { value: ",", label: "Comma" },
     { value: ";", label: "Semicolon" },
     { value: "\t", label: "Tab" },
-    { value: "|", label: "Pipe" },
-  ], { value: "auto", "aria-label": "Delimiter" });
+    { value: "|", label: "Pipe" }], { value: "auto", "aria-label": "Delimiter" });
   const alignment = selectInput([
     { value: "none", label: "None" },
     { value: "left", label: "Left" },
     { value: "center", label: "Center" },
-    { value: "right", label: "Right" },
-  ], { value: "none", "aria-label": "Alignment" });
+    { value: "right", label: "Right" }], { value: "none", "aria-label": "Alignment" });
 
   const result = output({ rows: 12 });
   const rowsTile = tile("Rows");
   const colsTile = tile("Columns");
-  const stats = el("div", { class: "mvb-stats" }, rowsTile, colsTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, rowsTile, colsTile);
   const error = notice("error");
   let current = "";
 
@@ -112,8 +110,7 @@ export function mount(slot) {
     current = [
       line(header.map(escapeCell)),
       line(separator(header.length)),
-      ...body.map((row) => line(header.map((_, i) => escapeCell(row[i])))),
-    ].join("\n");
+      ...body.map((row) => line(header.map((_, i) => escapeCell(row[i]))))].join("\n");
     result.write(current);
   }
 
@@ -126,8 +123,7 @@ export function mount(slot) {
       stack(panel("Table data", source), panel("Delimiter", delimiter), panel("Alignment", alignment), error),
       stack(stats, panel("Markdown", result))
     ),
-    foot: actions(copyButton(() => current, "Copy Markdown", "fill")),
-  });
+    foot: actions(copyButton(() => current, "Copy Markdown", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/tax-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;
 }
@@ -23,7 +23,7 @@ export function mount(slot) {
   const taxTile = tile("Tax");
   const netTile = tile("Net");
   const grossTile = tile("Total");
-  const stats = el("div", { class: "mvb-stats" }, taxTile, netTile, grossTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, taxTile, netTile, grossTile);
   const error = notice("error");
   const note = notice("note");
   note.write("You set the rate. No official rule is applied.");
@@ -73,8 +73,7 @@ export function mount(slot) {
       stack(panel("Amount", amount), panel("Amount type", chips), panel("Tax rate %", rate), error),
       stack(stats, note)
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -4,8 +4,7 @@ import { el, bench, stack, panel, numberInput, selectInput, notice, copyButton,
 const SCALES = [
   { value: "c", label: "Celsius" },
   { value: "f", label: "Fahrenheit" },
-  { value: "k", label: "Kelvin" },
-];
+  { value: "k", label: "Kelvin" }];
 
 const byId = Object.fromEntries(SCALES.map((scale) => [scale.value, scale]));
 const options = SCALES.map(({ value, label }) => ({ value, label }));
@@ -19,8 +18,7 @@ const FORMULAS = {
   "f-c": "C = (F - 32) x 5/9",
   "f-k": "K = (F - 32) x 5/9 + 273.15",
   "k-c": "C = K - 273.15",
-  "k-f": "F = (K - 273.15) x 9/5 + 32",
-};
+  "k-f": "F = (K - 273.15) x 9/5 + 32"};
 
 function fmt(value) {
   if (!Number.isFinite(value)) return "-";
@@ -34,11 +32,11 @@ export function mount(slot) {
   const value = numberInput({ value: "0", step: "any", "aria-label": "Value" });
   const from = selectInput(options, { value: "c", "aria-label": "From scale" });
   const to = selectInput(options, { value: "f", "aria-label": "To scale" });
-  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 formula = 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 formula = 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() {
@@ -59,7 +57,7 @@ export function mount(slot) {
     const out = fromCelsius(celsius, b.value);
     result.textContent = `${fmt(out)} ${b.value === "k" ? "K" : `°${b.value.toUpperCase()}`}`;
     formula.textContent = a.value === b.value ? "" : FORMULAS[`${a.value}-${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", {}, "Scale"), el("th", {}, "Value"))),
       el("tbody", {}, ...SCALES.map((scale) => el("tr", {},
         el("td", {}, scale.label),
@@ -83,8 +81,7 @@ export function mount(slot) {
       stack(panel("Value", value), panel("From", from), panel("To", to), error),
       stack(panel("Result", stats), formula, panel("All scales", 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/text-diff.js

@@ -8,9 +8,8 @@ export function mount(slot) {
   const right = textArea({ rows: 9, "aria-label": "Second text", placeholder: "Second text" });
   const options = toggleRow([
     { value: "ignore", label: "Ignore case", checked: false },
-    { value: "spaces", label: "Ignore spaces", checked: false },
-  ]);
-  const diffBox = el("div", { class: "mvb-diff" });
+    { value: "spaces", label: "Ignore spaces", checked: false }]);
+  const diffBox = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });
   const note = notice("note");
   let rows = [];
 
@@ -66,8 +65,14 @@ export function mount(slot) {
     const removed = rows.filter(([type]) => type === "del").length;
     diffBox.replaceChildren(...rows.map(([type, raw]) => el(
       "div",
-      { class: `mvb-diff__row${type === "add" ? " mvb-diff__row--add" : type === "del" ? " mvb-diff__row--del" : ""}` },
-      el("span", { class: "mvb-diff__sign" }, type === "add" ? "+" : type === "del" ? "-" : " "),
+      {
+        // One row skin. The add/del tint and the sign colour hang off the data
+        // attribute, so a row never carries two competing background utilities.
+        class:
+          "grid bg-deck font-mono text-2xs [grid-template-columns:34px_minmax(0,1fr)] [&>span]:wrap-anywhere [&>span]:px-2.5 [&>span]:py-[3px] [&>span]:whitespace-pre-wrap data-[kind=add]:bg-[var(--add)] data-[kind=add]:[&>span:first-child]:text-jade data-[kind=del]:bg-[var(--del)] data-[kind=del]:[&>span:first-child]:text-danger",
+        dataset: { kind: type },
+      },
+      el("span", { class: "border-e border-orbit text-center text-ink-3 select-none" }, type === "add" ? "+" : type === "del" ? "-" : " "),
       el("span", {}, raw)
     )));
     const counts = !added && !removed
@@ -93,8 +98,7 @@ export function mount(slot) {
       stack(panel("First text", left), panel("Second text", right), options, note),
       stack(panel("Difference", diffBox))
     ),
-    foot: actions(swapButton, copyButton(diffText, "Copy diff", "fill")),
-  });
+    foot: actions(swapButton, copyButton(diffText, "Copy diff", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/text-direction.js

@@ -14,7 +14,7 @@ function detect(text) {
 
 export function mount(slot) {
   const source = textArea({ rows: 6, "aria-label": "Text", placeholder: "Type or paste text" });
-  const sample = el("div", { class: "mvb-preview__sample" }, "Sample text");
+  const sample = el("div", { class: "w-full rounded-lg border border-orbit bg-deck px-[18px] py-4" }, "Sample text");
   const code = output();
 
   let mode = "auto";
@@ -22,8 +22,7 @@ export function mount(slot) {
     [
       { value: "auto", label: "Auto" },
       { value: "ltr", label: "Left to right" },
-      { value: "rtl", label: "Right to left" },
-    ],
+      { value: "rtl", label: "Right to left" }],
     { value: "auto", label: "Direction", onChange: (next) => { mode = next; run(); } }
   );
 
@@ -44,8 +43,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Direction", dirChips)),
       stack(panel("Preview", sample), panel("Attribute", code))
     ),
-    foot: actions(copyButton(() => snippet, "Copy attribute", "fill")),
-  });
+    foot: actions(copyButton(() => snippet, "Copy attribute", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/text-reverser.js

@@ -15,15 +15,14 @@ const reverseLines = (text) => text ? text.split("\n").reverse().join("\n") : ""
 
 export function mount(slot) {
   const source = textArea({ rows: 10, "aria-label": "Text", placeholder: "Type or paste text" });
-  const result = textArea({ rows: 10, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  const result = textArea({ rows: 10, readonly: true, "aria-label": "Result" });
 
   let mode = "chars";
   const chips = chipRow(
     [
       { value: "chars", label: "Characters" },
       { value: "words", label: "Words" },
-      { value: "lines", label: "Lines" },
-    ],
+      { value: "lines", label: "Lines" }],
     { value: "chars", label: "Reverse by", onChange: (value) => { mode = value; run(); } }
   );
 
@@ -40,8 +39,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Reverse by", chips)),
       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/time-duration.js

@@ -11,19 +11,19 @@ function parseTime(value) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const start = textInput({ type: "time", value: "09:00", "aria-label": "Start time" });
   const end = textInput({ type: "time", value: "17:30", "aria-label": "End time" });
   const breakMin = numberInput({ value: "30", min: "0", "aria-label": "Break in minutes" });
 
-  const result = el("span", { class: "mvb-stat__v" }, "-");
-  const tile = el("div", { class: "mvb-stat" }, result, el("span", { class: "mvb-stat__k" }, "Duration"));
-  const stats = el("div", { class: "mvb-stats" }, tile);
-  const minutesOut = el("span", { class: "mvb-kv__v" }, "-");
-  const decimalOut = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" }, kvRow("Total minutes", minutesOut), kvRow("Decimal hours", decimalOut));
+  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" }, "Duration"));
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, tile);
+  const minutesOut = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimalOut = 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("Total minutes", minutesOut), kvRow("Decimal hours", decimalOut));
   const error = notice("error");
   let text = "";
 
@@ -72,8 +72,7 @@ export function mount(slot) {
       stack(panel("Start", start), panel("End", end), panel("Break in minutes", breakMin), error),
       stack(stats, panel("Breakdown", 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/timestamp-converter.js

@@ -6,8 +6,7 @@ function relative(date) {
   const abs = Math.abs(diff);
   const units = [
     ["year", 31536000000], ["month", 2592000000], ["day", 86400000],
-    ["hour", 3600000], ["minute", 60000], ["second", 1000],
-  ];
+    ["hour", 3600000], ["minute", 60000], ["second", 1000]];
   for (const [unit, ms] of units) {
     if (abs >= ms) {
       const value = Math.round(abs / ms);
@@ -32,11 +31,11 @@ function parse(text) {
 }
 
 const row = (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: "1700000000", "aria-label": "Timestamp or date", placeholder: "1700000000 or 2026-01-01T00:00:00Z" });
-  const kv = el("div", { class: "mvb-kv" });
+  const kv = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });
   const error = notice("error");
   let iso = "";
 
@@ -74,8 +73,7 @@ export function mount(slot) {
       stack(panel("Timestamp or date", source), error),
       stack(panel("Reading", kv))
     ),
-    foot: actions(nowButton, copyButton(() => iso, "Copy ISO 8601", "fill")),
-  });
+    foot: actions(nowButton, copyButton(() => iso, "Copy ISO 8601", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -18,8 +18,7 @@ const FALLBACK_ZONES = [
   "Asia/Shanghai",
   "Asia/Tokyo",
   "Asia/Singapore",
-  "Australia/Sydney",
-];
+  "Australia/Sydney"];
 
 function zoneList() {
   let zones = FALLBACK_ZONES;
@@ -68,8 +67,7 @@ function offsetMs(timeZone, date) {
     day: "2-digit",
     hour: "2-digit",
     minute: "2-digit",
-    second: "2-digit",
-  });
+    second: "2-digit"});
   for (const part of format.formatToParts(date)) parts[part.type] = part.value;
   const hour = parts.hour === "24" ? 0 : Number(parts.hour);
   const asUTC = Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day), hour, Number(parts.minute), Number(parts.second));
@@ -85,7 +83,7 @@ function wallToInstant(day, time, timeZone) {
 const pad = (n) => String(n).padStart(2, "0");
 
 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 zones = zoneList();
@@ -95,10 +93,10 @@ export function mount(slot) {
   const fromZone = selectInput(zones, { value: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC", "aria-label": "Source zone" });
   const toZone = selectInput(zones, { value: "UTC", "aria-label": "Target zone" });
 
-  const target = el("span", { class: "mvb-kv__v" }, "-");
-  const utc = el("span", { class: "mvb-kv__v" }, "-");
-  const diff = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" }, kvRow("Target time", target), kvRow("UTC", utc), kvRow("Offset", diff));
+  const target = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const utc = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const diff = 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("Target time", target), kvRow("UTC", utc), kvRow("Offset", diff));
   const error = notice("error");
   let text = "";
 
@@ -127,8 +125,7 @@ export function mount(slot) {
         month: "short",
         year: "numeric",
         hour: "2-digit",
-        minute: "2-digit",
-      }).format(instant);
+        minute: "2-digit"}).format(instant);
       const utcText = `${instant.getUTCFullYear()}-${pad(instant.getUTCMonth() + 1)}-${pad(instant.getUTCDate())} ${pad(instant.getUTCHours())}:${pad(instant.getUTCMinutes())} UTC`;
       const deltaHours = (offsetMs(toZone.value, instant) - offsetMs(fromZone.value, instant)) / 3600000;
       const sign = deltaHours > 0 ? "+" : deltaHours < 0 ? "-" : "";
@@ -152,8 +149,7 @@ export function mount(slot) {
       stack(panel("Date", date), panel("Time", time), panel("From", fromZone), panel("To", toZone), error),
       stack(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/title-length.js

@@ -4,8 +4,8 @@ import { el, blank, bench, stack, panel, textArea, numberInput, copyButton, acti
 const countWords = (text) => (text.trim() ? text.trim().split(/\s+/).length : 0);
 
 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;
 }
@@ -17,9 +17,9 @@ export function mount(slot) {
   const titlesTile = tile("Titles");
   const overTile = tile("Over the limit");
   const longestTile = tile("Longest");
-  const stats = el("div", { class: "mvb-stats" }, titlesTile, overTile, longestTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, titlesTile, overTile, longestTile);
 
-  const listWrap = el("div", { class: "mvb-scroll" });
+  const listWrap = el("div", { class: "max-h-80 overflow-auto" });
   let listText = "";
 
   function run() {
@@ -42,7 +42,7 @@ export function mount(slot) {
       el("th", {}, item.title),
       el("td", {}, cap > 0 && item.chars > cap ? `${item.chars} over` : String(item.chars)),
       el("td", {}, String(item.words))));
-    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", {}, "Title"), el("th", {}, "Characters"), el("th", {}, "Words"))),
       el("tbody", {}, ...rows)));
     listText = items.map((item) => `${item.chars} characters, ${item.words} words  ${item.title}`).join("\n");
@@ -56,8 +56,7 @@ export function mount(slot) {
       stack(panel("Titles", source), panel("Character limit", limit)),
       stack(stats, panel("By length", listWrap))
     ),
-    foot: actions(copyButton(() => listText, "Copy list", "fill")),
-  });
+    foot: actions(copyButton(() => listText, "Copy list", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/unicode-inspector.js

@@ -11,18 +11,18 @@ function describe(char) {
 
 export function mount(slot) {
   const source = textArea({ rows: 8, value: "mevebu", "aria-label": "Text" });
-  const scroll = el("div", { class: "mvb-scroll" });
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
   let rows = [];
 
   function run() {
     rows = Array.from(source.value).map(describe);
     if (!rows.length) {
-      scroll.replaceChildren(el("p", { class: "mvb-note" }, "Type or paste text."));
+      scroll.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Type or paste text."));
       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", {}, "Character"),
         el("th", {}, "Code point"),
@@ -47,8 +47,7 @@ export function mount(slot) {
       () => rows.map((entry) => `${entry.char}\t${entry.point}\t${entry.decimal}\t${entry.bytes}`).join("\n"),
       "Copy table",
       "fill"
-    )),
-  });
+    ))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/url-encoder.js

@@ -1,10 +1,12 @@
 // Percent-encoding for a single value, following encodeURIComponent. The
 // swap button moves the result back into the input for a second round.
-import { bench, stack, panel, textArea, notice, chipRow, button, copyButton, actions, toolcard } from "../core.js";
+import { bench, stack, panel, textArea, output, notice, chipRow, button, copyButton, actions, toolcard } from "../core.js";
 
 export function mount(slot) {
   const source = textArea({ rows: 5, value: "q=hello world&lang=id", "aria-label": "Input" });
-  const result = textArea({ rows: 5, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  // The encoded text is read, not typed, so it sits on the recessed surface.
+  const result = output({ tag: "textarea", rows: 5 });
+  result.setAttribute("aria-label", "Result");
   const error = notice("error");
   let mode = "encode";
 

package/mevebu/libs/js/tools/url-inspector.js

@@ -4,23 +4,23 @@ import { el, textInput, notice, copyButton, bench, stack, panel, actions, toolca
 const IPV4 = /^\d{1,3}(\.\d{1,3}){3}$/;
 
 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/login?next=/home", "aria-label": "URL" });
-  const scheme = el("span", { class: "mvb-kv__v" }, "-");
-  const host = el("span", { class: "mvb-kv__v" }, "-");
-  const port = el("span", { class: "mvb-kv__v" }, "-");
-  const path = el("span", { class: "mvb-kv__v" }, "-");
+  const scheme = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const host = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const port = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const path = 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("Scheme", scheme),
     kvRow("Host", host),
     kvRow("Port", port),
     kvRow("Path", path)
   );
-  const flags = el("div", { class: "mvb-stack" });
+  const flags = el("div", { class: "grid content-start gap-4" });
   const error = notice("error");
   let summary = "";
 
@@ -82,13 +82,11 @@ export function mount(slot) {
     body: bench(
       stack(
         panel("URL", source),
-        error,
-        el("p", { class: "mvb-note" }, "The link is read in this tab. Nothing is opened or requested.")
+        error
       ),
       stack(kv, panel("Checks", flags))
     ),
-    foot: actions(copyButton(() => summary, "Copy host", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy host", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/url-parser.js

@@ -2,32 +2,32 @@
 import { el, bench, stack, panel, textInput, notice, copyButton, actions, toolcard } from "../core.js";
 
 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:8443/blog/post?utm_source=news&page=2#top", "aria-label": "URL" });
   const error = notice("error");
 
-  const protocol = el("span", { class: "mvb-kv__v" }, "-");
-  const host = el("span", { class: "mvb-kv__v" }, "-");
-  const port = el("span", { class: "mvb-kv__v" }, "-");
-  const path = el("span", { class: "mvb-kv__v" }, "-");
-  const hash = el("span", { class: "mvb-kv__v" }, "-");
+  const protocol = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const host = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const port = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const path = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const hash = 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("Protocol", protocol),
     kvRow("Host", host),
     kvRow("Port", port),
     kvRow("Path", path),
     kvRow("Hash", hash)
   );
-  const tableWrap = el("div", { class: "mvb-scroll" });
+  const tableWrap = el("div", { class: "max-h-80 overflow-auto" });
   let paramsText = "";
 
   function clear() {
     for (const node of [protocol, host, port, path, hash]) node.textContent = "-";
-    tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "No query parameters."));
+    tableWrap.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "No query parameters."));
     paramsText = "";
   }
 
@@ -49,13 +49,13 @@ export function mount(slot) {
     hash.textContent = url.hash || "-";
     const params = [...url.searchParams];
     if (!params.length) {
-      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "No query parameters."));
+      tableWrap.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "No query parameters."));
       paramsText = "";
       return;
     }
     tableWrap.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", {}, "Key"), el("th", {}, "Value"))),
       el("tbody", {}, ...params.map(([key, value]) => el("tr", {}, el("td", {}, key), el("td", {}, value))))
     ));
@@ -72,8 +72,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => source.value.trim(), "Copy URL"),
       copyButton(() => paramsText, "Copy params", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   run();