mevebu 1.2.0 → 1.4.0

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

@@ -21,11 +21,11 @@ function relative(seconds) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
-  const source = textArea({ rows: 4, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Token", placeholder: "Paste a JWT" });
-  const claims = el("div", { class: "mvb-kv" });
+  const source = textArea({ rows: 4, "aria-label": "Token", placeholder: "Paste a JWT" });
+  const claims = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });
   const status = notice("note");
   const error = notice("error");
   let summary = "";
@@ -82,12 +82,11 @@ export function mount(slot) {
       stack(
         panel("Token", source),
         error,
-        el("p", { class: "mvb-note" }, "Only the payload is read in this tab. The signature is not checked, so a valid look is not proof the token is genuine.")
+        el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Only the payload is read in this tab. The signature is not checked, so a valid look is not proof the token is genuine.")
       ),
       stack(panel("Time claims", claims), status)
     ),
-    foot: actions(copyButton(() => summary, "Copy claims", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy claims", "fill"))});
   slot.append(card.node);
   run();
 

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

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

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

@@ -9,8 +9,7 @@ const UNITS = [
   { value: "in", label: "Inch", factor: 0.0254 },
   { value: "ft", label: "Foot", factor: 0.3048 },
   { value: "yd", label: "Yard", factor: 0.9144 },
-  { value: "mi", label: "Mile", factor: 1609.344 },
-];
+  { value: "mi", label: "Mile", factor: 1609.344 }];
 
 const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
 const options = UNITS.map(({ value, label }) => ({ value, label }));
@@ -27,11 +26,11 @@ export function mount(slot) {
   const value = numberInput({ value: "1", step: "any", "aria-label": "Value" });
   const from = selectInput(options, { value: "m", "aria-label": "From unit" });
   const to = selectInput(options, { value: "ft", "aria-label": "To unit" });
-  const result = el("span", { class: "mvb-stat__v" }, "-");
-  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "Result"), result));
-  const factor = el("p", { class: "mvb-note" });
+  const result = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Result"), result));
+  const factor = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const error = notice("error");
-  const scroll = el("div", { class: "mvb-scroll" });
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
   let text = "";
 
   function run() {
@@ -51,7 +50,7 @@ export function mount(slot) {
     const out = (n * a.factor) / b.factor;
     result.textContent = `${fmt(out)} ${b.value}`;
     factor.textContent = `1 ${a.value} = ${fmt(a.factor / b.factor)} ${b.value}`;
-    scroll.replaceChildren(el("table", { class: "mvb-ttable" },
+    scroll.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
       el("thead", {}, el("tr", {}, el("th", {}, "Unit"), el("th", {}, "Value"))),
       el("tbody", {}, ...UNITS.map((unit) => el("tr", {},
         el("td", {}, unit.label),
@@ -75,8 +74,7 @@ export function mount(slot) {
       stack(panel("Value", value), panel("From", from), panel("To", to), error),
       stack(panel("Result", stats), factor, panel("All units", scroll))
     ),
-    foot: actions(swap, copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(swap, copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/license-reference.js

@@ -7,19 +7,18 @@ const LICENSES = [
   { value: "GPL-3.0", label: "GPL-3.0", can: "Use, modify and distribute.", must: "Release derivative works under the same license and share the source.", cannot: "Add restrictions beyond the license." },
   { value: "BSD-3-Clause", label: "BSD-3-Clause", can: "Use, modify and distribute, including commercially.", must: "Keep the copyright notice and disclaimer.", cannot: "Use contributor names to endorse derivatives." },
   { value: "MPL-2.0", label: "MPL-2.0", can: "Use, modify and distribute.", must: "Share changes to MPL-licensed files under MPL.", cannot: "Hold contributors liable." },
-  { value: "Unlicense", label: "Unlicense", can: "Use, modify and distribute with no conditions.", must: "Nothing.", cannot: "Hold the author liable." },
-];
+  { value: "Unlicense", label: "Unlicense", can: "Use, modify and distribute with no conditions.", must: "Nothing.", cannot: "Hold the author liable." }];
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
-  const name = el("span", { class: "mvb-stat__v" }, LICENSES[0].label);
-  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "License"), name));
-  const can = el("span", { class: "mvb-kv__v" });
-  const must = el("span", { class: "mvb-kv__v" });
-  const cannot = el("span", { class: "mvb-kv__v" });
-  const kv = el("div", { class: "mvb-kv" }, kvRow("Can", can), kvRow("Must", must), kvRow("Cannot", cannot));
+  const name = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, LICENSES[0].label);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, el("span", { class: "text-2xs font-semibold text-ink-3" }, "License"), name));
+  const can = el("span", { class: "wrap-anywhere font-mono text-2xs" });
+  const must = el("span", { class: "wrap-anywhere font-mono text-2xs" });
+  const cannot = el("span", { class: "wrap-anywhere font-mono text-2xs" });
+  const kv = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" }, kvRow("Can", can), kvRow("Must", must), kvRow("Cannot", cannot));
   const disclaimer = notice("note");
   disclaimer.write("Short summary, not legal advice.");
   let current = LICENSES[0];
@@ -31,8 +30,7 @@ export function mount(slot) {
     onChange: (value) => {
       current = LICENSES.find((entry) => entry.value === value);
       run();
-    },
-  });
+    }});
 
   function run() {
     name.textContent = current.label;
@@ -47,8 +45,7 @@ export function mount(slot) {
       stack(panel("License", chips), disclaimer),
       stack(panel("Summary", stats), panel("Terms", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy summary", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy summary", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -2,8 +2,8 @@
 import { el, bench, stack, panel, textArea, button, copyButton, actions, toolcard } from "../core.js";
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "0");
-  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, label));
   node.set = (text) => { value.textContent = text; };
   return node;
 }
@@ -14,7 +14,7 @@ export function mount(slot) {
   const totalTile = tile("Total lines");
   const filledTile = tile("Filled");
   const blankTile = tile("Blank");
-  const stats = el("div", { class: "mvb-stats" }, totalTile, filledTile, blankTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, totalTile, filledTile, blankTile);
 
   let counts = { total: 0, filled: 0, blank: 0 };
 
@@ -22,8 +22,7 @@ export function mount(slot) {
     return [
       `${counts.total} total lines`,
       `${counts.filled} filled`,
-      `${counts.blank} blank`,
-    ].join("\n");
+      `${counts.blank} blank`].join("\n");
   }
 
   function run() {
@@ -44,8 +43,7 @@ export function mount(slot) {
       stack(panel("Text", source)),
       stack(stats)
     ),
-    foot: actions(clearButton, copyButton(summary, "Copy summary", "fill")),
-  });
+    foot: actions(clearButton, copyButton(summary, "Copy summary", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/list-difference.js

@@ -16,8 +16,8 @@ function uniqueLines(text, ignoreCase) {
 }
 
 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;
 }
@@ -33,7 +33,7 @@ export function mount(slot) {
   const onlyATile = tile("Only in A");
   const onlyBTile = tile("Only in B");
   const bothTile = tile("In both");
-  const stats = el("div", { class: "mvb-stats" }, onlyATile, onlyBTile, bothTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, onlyATile, onlyBTile, bothTile);
   let report = "";
 
   function run() {
@@ -62,8 +62,7 @@ export function mount(slot) {
       onlyB.join("\n"),
       "",
       `In both (${both.length}):`,
-      both.join("\n"),
-    ].join("\n");
+      both.join("\n")].join("\n");
   }
 
   first.addEventListener("input", run);
@@ -75,8 +74,7 @@ export function mount(slot) {
       stack(panel("List A", first), panel("List B", second), panel(null, caseBox)),
       stack(stats, panel("Only in A", onlyAOut), panel("Only in B", onlyBOut), panel("In both", bothOut))
     ),
-    foot: actions(copyButton(() => report, "Copy report", "fill")),
-  });
+    foot: actions(copyButton(() => report, "Copy report", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/list-merger.js

@@ -4,8 +4,8 @@ import { el, bench, stack, panel, textArea, checkbox, output, copyButton, button
 const linesOf = (text) => text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
 
 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;
 }
@@ -20,7 +20,7 @@ export function mount(slot) {
   const listATile = tile("List A");
   const listBTile = tile("List B");
   const mergedTile = tile("Merged");
-  const stats = el("div", { class: "mvb-stats" }, listATile, listBTile, mergedTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, listATile, listBTile, mergedTile);
   let current = [];
 
   function run() {
@@ -56,8 +56,7 @@ export function mount(slot) {
       stack(panel("List A", first), panel("List B", second), panel(null, dedupeBox), panel(null, caseBox)),
       stack(stats, panel("Merged", result))
     ),
-    foot: actions(clearButton, copyButton(() => current.join("\n"), "Copy merged", "fill")),
-  });
+    foot: actions(clearButton, copyButton(() => current.join("\n"), "Copy merged", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/locale-number.js

@@ -10,8 +10,7 @@ const LOCALES = [
   ["id-ID", "Indonesian"],
   ["hi-IN", "Hindi"],
   ["ar-EG", "Arabic"],
-  ["ja-JP", "Japanese"],
-];
+  ["ja-JP", "Japanese"]];
 
 function format(locale, value, options) {
   try {
@@ -26,8 +25,8 @@ export function mount(slot) {
   const decimals = numberInput({ min: "0", max: "20", value: "2", "aria-label": "Fraction digits" });
   const grouping = switchControl("Group thousands", { checked: true });
 
-  const table = el("table", { class: "mvb-ttable" });
-  const tableWrap = el("div", { class: "mvb-scroll" }, table);
+  const table = 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" });
+  const tableWrap = el("div", { class: "max-h-80 overflow-auto" }, table);
   const note = notice("note");
   note.write("Formatting only. The number is not converted.");
 
@@ -40,8 +39,7 @@ export function mount(slot) {
     const options = {
       minimumFractionDigits: digits,
       maximumFractionDigits: digits,
-      useGrouping: grouping.input.checked,
-    };
+      useGrouping: grouping.input.checked};
     const rows = LOCALES.map(([code, name]) => {
       const shown = raw === "" || !Number.isFinite(parsed) ? "-" : format(code, parsed, options);
       return el("tr", {}, el("th", {}, name), el("td", {}, shown));
@@ -68,8 +66,7 @@ export function mount(slot) {
       ),
       stack(note, panel("By locale", tableWrap))
     ),
-    foot: actions(copyButton(() => tableText, "Copy list", "fill")),
-  });
+    foot: actions(copyButton(() => tableText, "Copy list", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/lorem-ipsum.js

@@ -1,6 +1,6 @@
 // Placeholder text by the word, the sentence or the paragraph. The classic
 // opening is a checkbox, not a lock-in, and regeneration never clears the copy.
-import { toast, copyText, chipRow, numberInput, checkbox, button, bench, stack, panel, textArea, readPin, writePin, actions, toolcard } from "../core.js";
+import { toast, copyText, chipRow, numberInput, checkbox, output, button, bench, stack, panel, readPin, writePin, actions, toolcard } from "../core.js";
 
 const WORDS = "lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat duis aute irure in reprehenderit voluptate velit esse cillum eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt culpa qui officia deserunt mollit anim id est laborum".split(" ");
 
@@ -42,7 +42,9 @@ export function mount(slot) {
   );
   const amount = numberInput({ value: saved.amount ?? "3", min: "1", max: "200", "aria-label": "How many" });
   const classic = checkbox("Start with the classic opening", { checked: saved.classic !== false });
-  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area", "aria-label": "Generated text" });
+  // Generated text is read, not typed, so it sits on the recessed surface.
+  const result = output({ tag: "textarea", rows: 12 });
+  result.setAttribute("aria-label", "Generated text");
 
   function totalCount() {
     return Math.max(1, Math.min(200, parseInt(amount.value || "1", 10) || 1));

package/mevebu/libs/js/tools/markdown-preview.js

@@ -40,7 +40,7 @@ function blocks(source) {
   const isBlockStart = (index) => {
     const line = lines[index];
     return !line.trim() || /^```/.test(line) || /^#{1,6}\s/.test(line) || /^\s*>/.test(line) ||
-      /^\s*([-*+]|\d+[.)])\s+/.test(line) || /^\s*([-*_])(\s*\1){2,}\s*$/.test(line) || isTableStart(index);
+      /^\s*([-*+]|\d+[.)])\s+/.test(line) || /^\s*([-*_])(\s*\1){2}\s*$/.test(line) || isTableStart(index);
   };
 
   while (i < lines.length) {
@@ -64,7 +64,7 @@ function blocks(source) {
       continue;
     }
 
-    if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
+    if (/^\s*([-*_])(\s*\1){2}\s*$/.test(line)) {
       nodes.push(el("hr"));
       i++;
       continue;
@@ -115,11 +115,9 @@ function blocks(source) {
 export function mount(slot) {
   const source = textArea({
     rows: 16,
-    class: "mvb-in mvb-in--area mvb-in--mono",
     "aria-label": "Markdown",
-    value: "# Title\n\nSome **bold**, *italic* and `code`.\n\n- one\n- two\n\n> A quote.\n\n| a | b |\n| --- | --- |\n| 1 | 2 |\n\n```js\nconst x = 1;\n```\n",
-  });
-  const preview = el("div", { class: "mvb-pane" });
+    value: "# Title\n\nSome **bold**, *italic* and `code`.\n\n- one\n- two\n\n> A quote.\n\n| a | b |\n| --- | --- |\n| 1 | 2 |\n\n```js\nconst x = 1;\n```\n"});
+  const preview = el("div", { class: "min-h-[120px] max-h-[380px] overflow-auto wrap-anywhere rounded-r1 border border-orbit bg-deck-2 px-4 py-3.5 leading-normal [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_h1]:my-4 [&_h2]:my-4 [&_h3]:my-4 [&_h1]:tracking-[-0.01em] [&_h2]:tracking-[-0.01em] [&_h3]:tracking-[-0.01em] [&_p]:mb-2.5 [&_ul]:mb-2.5 [&_ol]:mb-2.5 [&_pre]:mb-2.5 [&_ul]:ps-[22px] [&_ol]:ps-[22px] [&_code]:rounded-[5px] [&_code]:bg-deck [&_code]:px-[5px] [&_code]:py-px [&_code]:font-mono [&_code]:text-2xs [&_pre]:overflow-auto [&_pre]:rounded-r1 [&_pre]:bg-deck [&_pre]:px-3 [&_pre]:py-2.5 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_a]:text-jade [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-[9px] [&_td]:px-[9px] [&_th]:py-1.5 [&_td]:py-1.5" });
 
   function run() {
     preview.replaceChildren(...blocks(source.value));
@@ -132,8 +130,7 @@ export function mount(slot) {
       stack(panel("Markdown", source)),
       stack(panel("Preview", preview))
     ),
-    foot: actions(copyButton(() => source.value, "Copy markdown", "fill")),
-  });
+    foot: actions(copyButton(() => source.value, "Copy markdown", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -6,8 +6,8 @@ const cell = (text) => String(text ?? "").replace(/\|/g, "\\|").trim();
 export function mount(slot) {
   const columns = ["left", "left", "left"];
   const rows = [["Name", "Role", "City"], ["Ada", "Engineer", "London"]];
-  const editor = el("div", { class: "mvb-scroll" });
-  const alignment = el("div", { class: "mvb-stack" });
+  const editor = el("div", { class: "max-h-80 overflow-auto" });
+  const alignment = el("div", { class: "grid content-start gap-4" });
   const result = output({ rows: 8 });
 
   const toMarkdown = () => {
@@ -15,8 +15,7 @@ export function mount(slot) {
     const marks = columns.map((align) => (align === "center" ? ":---:" : align === "right" ? "---:" : ":---"));
     const lines = [
       `| ${columns.map((_, index) => cell(head[index])).join(" | ")} |`,
-      `| ${marks.join(" | ")} |`,
-    ];
+      `| ${marks.join(" | ")} |`];
     for (let r = 1; r < rows.length; r++) {
       lines.push(`| ${columns.map((_, index) => cell(rows[r][index])).join(" | ")} |`);
     }
@@ -26,7 +25,7 @@ export function mount(slot) {
   const update = () => { result.write(toMarkdown()); };
 
   function paintEditor() {
-    const table = el("table", { class: "mvb-ttable" });
+    const table = 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" });
     const headRow = el("tr");
     for (let c = 0; c < columns.length; c++) {
       const input = textInput({ value: rows[0][c] ?? "", "aria-label": `Column ${c + 1} header` });
@@ -100,8 +99,7 @@ export function mount(slot) {
       stack(panel("Columns", row(addColumn, removeColumn)), panel("Rows", row(addRow, removeRow)), panel("Alignment", alignment)),
       stack(panel("Cells", editor), panel("Markdown", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy table", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy table", "fill"))});
   slot.append(card.node);
   paint();
 

package/mevebu/libs/js/tools/markup-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;
 }
@@ -18,7 +18,7 @@ export function mount(slot) {
   const price = tile("Selling price");
   const profit = tile("Profit");
   const margin = tile("Margin");
-  const stats = el("div", { class: "mvb-stats" }, price, profit, margin);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, price, profit, margin);
   const error = notice("error");
   let text = "";
 
@@ -58,8 +58,7 @@ export function mount(slot) {
       stack(panel("Cost", cost), panel("Markup %", markup), 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/meeting-agenda.js

@@ -22,21 +22,21 @@ export function mount(slot) {
   const saved = readPin(PIN, { start: "09:00", items: [] });
   let list = Array.isArray(saved.items) ? saved.items : [];
 
-  const startInput = el("input", { class: "mvb-in", type: "time", value: saved.start || "09:00", "aria-label": "Meeting start" });
+  const startInput = el("input", { class: "min-w-0 rounded-r1 border border-orbit bg-deck text-ink transition-[border-color,box-shadow] duration-150 placeholder:text-ink-3 hover:border-orbit-hard focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft w-full min-h-[var(--ctl)] px-3 py-2.5 text-base", type: "time", value: saved.start || "09:00", "aria-label": "Meeting start" });
   const topic = textInput({ placeholder: "Topic", "aria-label": "Topic" });
   const owner = textInput({ placeholder: "Owner", "aria-label": "Owner" });
   const minutes = numberInput({ min: 1, max: 600, value: 10, "aria-label": "Minutes" });
 
-  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 error = notice("error");
 
   const addButton = button("Add", { icon: "plus", kind: "fill" });
   const copyAgenda = copyButton(() => agendaText(), "Copy agenda");
 
-  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 base = () => {
     const [h, m] = String(startInput.value || "00:00").split(":").map(Number);
@@ -83,7 +83,7 @@ export function mount(slot) {
         el("td", {}, `${item.minutes} min`),
         el("td", {}, removeButton(item))
       ));
-      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", {}, "Start"), el("th", {}, "Topic"), el("th", {}, "Owner"),
           el("th", {}, "Time"), el("th", {}, ""))),
@@ -126,8 +126,7 @@ export function mount(slot) {
       ),
       stack(stats, panel("Agenda", listWrap))
     ),
-    foot: actions(copyAgenda, addButton),
-  });
+    foot: actions(copyAgenda, addButton)});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/meta-preview.js

@@ -7,17 +7,17 @@ export function mount(slot) {
   const url = textInput({ value: "https://example.com", "aria-label": "URL" });
   const description = textArea({ rows: 3, value: "Small privacy first tools that run entirely in the browser.", "aria-label": "Description" });
 
-  const urlLine = el("span", { class: "mvb-note" }, "");
-  const titleLine = el("span", { class: "mvb-stat__v" }, "");
-  const descLine = el("p", { class: "mvb-note" }, "");
-  const sample = el("div", { class: "mvb-preview__sample" },
-    el("div", { class: "mvb-stack" }, urlLine, titleLine, descLine));
-
-  const titleCount = el("span", { class: "mvb-stat__v" }, "0");
-  const descCount = el("span", { class: "mvb-stat__v" }, "0");
-  const stats = el("div", { class: "mvb-stats" },
-    el("div", { class: "mvb-stat" }, titleCount, el("span", { class: "mvb-stat__k" }, "Title chars")),
-    el("div", { class: "mvb-stat" }, descCount, el("span", { class: "mvb-stat__k" }, "Description chars"))
+  const urlLine = el("span", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "");
+  const titleLine = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "");
+  const descLine = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "");
+  const sample = el("div", { class: "w-full rounded-lg border border-orbit bg-deck px-[18px] py-4" },
+    el("div", { class: "grid content-start gap-4" }, urlLine, titleLine, descLine));
+
+  const titleCount = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const descCount = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  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" }, titleCount, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Title chars")),
+    el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, descCount, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Description chars"))
   );
   const note = notice("note");
 
@@ -40,8 +40,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => title.value.trim(), "Copy title"),
       copyButton(() => description.value.trim(), "Copy description", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/meta-tags.js

@@ -16,11 +16,11 @@ export function mount(slot) {
   );
   const result = output({ rows: 8 });
 
-  const titleCount = el("span", { class: "mvb-stat__v" }, "0");
-  const descCount = el("span", { class: "mvb-stat__v" }, "0");
-  const stats = el("div", { class: "mvb-stats" },
-    el("div", { class: "mvb-stat" }, titleCount, el("span", { class: "mvb-stat__k" }, "Title chars")),
-    el("div", { class: "mvb-stat" }, descCount, el("span", { class: "mvb-stat__k" }, "Description chars"))
+  const titleCount = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  const descCount = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+  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" }, titleCount, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Title chars")),
+    el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, descCount, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Description chars"))
   );
 
   function build() {
@@ -51,8 +51,7 @@ export function mount(slot) {
       ),
       stack(stats, panel("Meta tags", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy tags", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy tags", "fill"))});
   slot.append(card.node);
   build();
 

package/mevebu/libs/js/tools/mime-types.js

@@ -9,24 +9,23 @@ const TYPES = [
   ["mp3", "audio/mpeg", "Audio"], ["wav", "audio/wav", "Audio"], ["ogg", "audio/ogg", "Audio"], ["oga", "audio/ogg", "Audio"], ["m4a", "audio/mp4", "Audio"], ["flac", "audio/flac", "Audio"], ["aac", "audio/aac", "Audio"],
   ["mp4", "video/mp4", "Video"], ["webm", "video/webm", "Video"], ["ogv", "video/ogg", "Video"], ["mov", "video/quicktime", "Video"], ["avi", "video/x-msvideo", "Video"], ["mkv", "video/x-matroska", "Video"],
   ["woff", "font/woff", "Font"], ["woff2", "font/woff2", "Font"], ["ttf", "font/ttf", "Font"], ["otf", "font/otf", "Font"], ["eot", "application/vnd.ms-fontobject", "Font"],
-  ["wasm", "application/wasm", "Binary"], ["bin", "application/octet-stream", "Binary"],
-];
+  ["wasm", "application/wasm", "Binary"], ["bin", "application/octet-stream", "Binary"]];
 
 export function mount(slot) {
   const filter = textInput({ type: "search", placeholder: "Extension or type", "aria-label": "Filter" });
-  const scroll = el("div", { class: "mvb-scroll" });
+  const scroll = el("div", { class: "max-h-80 overflow-auto" });
   let visible = TYPES;
 
   function run() {
     const query = filter.value.trim().toLowerCase();
     visible = TYPES.filter(([ext, mime]) => !query || ext.includes(query) || mime.toLowerCase().includes(query));
     if (!visible.length) {
-      scroll.replaceChildren(el("p", { class: "mvb-note" }, "No type matches."));
+      scroll.replaceChildren(el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "No type matches."));
       return;
     }
     scroll.replaceChildren(el(
       "table",
-      { class: "mvb-ttable" },
+      { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
       el("thead", {}, el("tr", {}, el("th", {}, "Extension"), el("th", {}, "MIME type"), el("th", {}, "Kind"))),
       el("tbody", {}, ...visible.map(([ext, mime, kind]) => el("tr", {},
         el("td", {}, `.${ext}`),
@@ -43,8 +42,7 @@ export function mount(slot) {
       stack(panel("Filter", filter)),
       stack(panel("MIME types", scroll))
     ),
-    foot: actions(copyButton(() => visible.map(([ext, mime]) => `.${ext} ${mime}`).join("\n"), "Copy list", "fill")),
-  });
+    foot: actions(copyButton(() => visible.map(([ext, mime]) => `.${ext} ${mime}`).join("\n"), "Copy list", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/name-picker.js

@@ -8,7 +8,7 @@ export function mount(slot) {
   const listField = textArea({ value: saved.entries ?? "", rows: 8, "aria-label": "Entries, one per line", placeholder: "One entry per line" });
   const countField = numberInput({ value: saved.winners ?? "1", min: "1", max: "500", "aria-label": "How many to draw" });
   const uniqueBox = checkbox("No repeats", { checked: saved.unique !== false });
-  const notify = el("p", { class: "mvb-note" });
+  const notify = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
 
   const drawButton = button("Draw", { icon: "play", kind: "fill" });
   const copyButton = button("Copy", { icon: "copy" });
@@ -58,8 +58,7 @@ export function mount(slot) {
       stack(panel("Entries", listField), panel("Winners", countField), panel(null, uniqueBox)),
       stack(panel("Drawn", result), notify)
     ),
-    foot: actions(copyButton, drawButton),
-  });
+    foot: actions(copyButton, drawButton)});
   slot.append(card.node);
   draw();