mevebu 1.3.0 → 1.4.0

package/mevebu/libs/js/tools/percent-to-fraction.js

@@ -17,16 +17,16 @@ function fmt(n) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const source = textInput({ value: "12.5", "aria-label": "Percent", placeholder: "12.5" });
-  const fraction = el("span", { class: "mvb-kv__v" }, "-");
-  const decimal = el("span", { class: "mvb-kv__v" }, "-");
-  const mixed = el("span", { class: "mvb-kv__v" }, "-");
+  const fraction = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimal = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const mixed = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
   const kv = el(
     "div",
-    { class: "mvb-kv" },
+    { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
     kvRow("Fraction", fraction),
     kvRow("Decimal", decimal),
     kvRow("Mixed number", mixed)
@@ -85,8 +85,7 @@ export function mount(slot) {
       stack(panel("Percent", source), error),
       stack(panel("Result", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy fraction", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy fraction", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -9,17 +9,16 @@ function fmt(n) {
 export function mount(slot) {
   const modes = [
     { value: "of", label: "Percent of a value" },
-    { value: "is", label: "Value as a percent" },
-  ];
+    { value: "is", label: "Value as a percent" }];
   const labelA = el("span", {}, "Percent");
   const labelB = el("span", {}, "Value");
   const a = numberInput({ value: "15", "aria-label": "First value" });
   const b = numberInput({ value: "200", "aria-label": "Second value" });
-  const result = el("span", { class: "mvb-stat__v" }, "-");
+  const result = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "-");
   const stats = el(
     "div",
-    { class: "mvb-stats" },
-    el("div", { class: "mvb-stat" }, result, el("span", { class: "mvb-stat__k" }, "Result"))
+    { 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" }, result, el("span", { class: "text-2xs font-semibold text-ink-3" }, "Result"))
   );
   const error = notice("error");
   let mode = "of";
@@ -63,8 +62,7 @@ export function mount(slot) {
       mode = value;
       relabel();
       run();
-    },
-  });
+    }});
 
   a.addEventListener("input", run);
   b.addEventListener("input", run);
@@ -74,8 +72,7 @@ export function mount(slot) {
       stack(panel("Mode", chips), panel(labelA, a), panel(labelB, b), error),
       stack(stats)
     ),
-    foot: actions(copyButton(() => text, "Copy result", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy result", "fill"))});
   slot.append(card.node);
   relabel();
   run();

package/mevebu/libs/js/tools/percentage-change.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 change = tile("Change");
   const difference = tile("Difference");
   const direction = tile("Direction");
-  const stats = el("div", { class: "mvb-stats" }, change, difference, direction);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, change, difference, direction);
   const error = notice("error");
   let text = "";
 
@@ -59,8 +59,7 @@ export function mount(slot) {
       stack(panel("Starting value", start), panel("Ending value", end), 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/permutation-combination.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;
 }
@@ -16,12 +16,12 @@ export function mount(slot) {
   const nInput = numberInput({ value: "5", min: "0", step: "1", "aria-label": "n" });
   const rInput = numberInput({ value: "3", min: "0", step: "1", "aria-label": "r" });
   const count = tile("Result");
-  const stats = el("div", { class: "mvb-stats" }, count);
-  const formulaRow = el("span", { class: "mvb-kv__v" }, "-");
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, count);
+  const formulaRow = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
   const kv = el(
     "div",
-    { class: "mvb-kv" },
-    el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, "Formula"), formulaRow)
+    { 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" }, "Formula"), formulaRow)
   );
   const error = notice("error");
   let mode = "npr";
@@ -75,16 +75,14 @@ export function mount(slot) {
   const chips = chipRow(
     [
       { value: "npr", label: "Permutation nPr" },
-      { value: "ncr", label: "Combination nCr" },
-    ],
+      { value: "ncr", label: "Combination nCr" }],
     {
       value: mode,
       label: "Mode",
       onChange: (value) => {
         mode = value;
         run();
-      },
-    }
+      }}
   );
 
   nInput.addEventListener("input", run);
@@ -95,8 +93,7 @@ export function mount(slot) {
       stack(panel("n", nInput), panel("r", rInput), panel("Mode", chips), error),
       stack(stats, panel("Working", 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/prefix-suffix.js

@@ -6,7 +6,7 @@ export function mount(slot) {
   const prefixField = textInput({ placeholder: "Prefix", "aria-label": "Prefix" });
   const suffixField = textInput({ placeholder: "Suffix", "aria-label": "Suffix" });
   const numbering = checkbox("Numbering", { checked: false });
-  const result = textArea({ rows: 11, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  const result = textArea({ rows: 11, readonly: true, "aria-label": "Result" });
 
   function run() {
     const text = source.value;
@@ -35,8 +35,7 @@ export function mount(slot) {
       ),
       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/priority-matrix.js

@@ -6,8 +6,7 @@ const QUADRANTS = [
   { id: "do", name: "Do now" },
   { id: "schedule", name: "Schedule" },
   { id: "delegate", name: "Delegate" },
-  { id: "drop", name: "Drop" },
-];
+  { id: "drop", name: "Drop" }];
 
 export function mount(slot) {
   const PIN = "priority-matrix";
@@ -17,8 +16,7 @@ export function mount(slot) {
   const task = textInput({ placeholder: "Task", "aria-label": "Task" });
   const quadrant = selectInput(QUADRANTS.map((q) => ({ value: q.id, label: q.name })), {
     value: "do",
-    "aria-label": "Quadrant",
-  });
+    "aria-label": "Quadrant"});
 
   const matrix = stack();
 
@@ -39,8 +37,7 @@ export function mount(slot) {
     const text = el("span", {}, item.text);
     const move = selectInput(QUADRANTS.map((q) => ({ value: q.id, label: q.name })), {
       value: item.q,
-      "aria-label": `Move ${item.text}`,
-    });
+      "aria-label": `Move ${item.text}`});
     move.addEventListener("change", () => {
       item.q = move.value;
       save();
@@ -52,12 +49,12 @@ export function mount(slot) {
       save();
       render();
     });
-    return el("div", { class: "mvb-row" }, text, move, remove);
+    return el("div", { class: "flex min-w-0 flex-wrap items-center gap-2" }, text, move, remove);
   }
 
   function quadrantBox(q) {
     const items = list.filter((item) => item.q === q.id);
-    const body = items.length ? stack(...items.map(taskRow)) : el("span", { class: "mvb-note" }, "Empty");
+    const body = items.length ? stack(...items.map(taskRow)) : el("span", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" }, "Empty");
     return panel(`${q.name} (${items.length})`, body);
   }
 
@@ -89,8 +86,7 @@ export function mount(slot) {
       stack(panel("Task", task), panel("Quadrant", quadrant)),
       matrix
     ),
-    foot: actions(copyMatrix, addButton),
-  });
+    foot: actions(copyMatrix, addButton)});
   slot.append(card.node);
   render();
 

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

@@ -6,8 +6,8 @@ import qrcode from "../vendor/qrcode-generator.mjs";
 export function mount(slot) {
   const content = textArea({ rows: 4, value: "https://mevebu.app", "aria-label": "Text or link", placeholder: "Text or link" });
   const sizeField = numberInput({ value: "256", min: "120", max: "1024", step: "8", "aria-label": "Size in pixels" });
-  const canvas = el("canvas", { class: "mvb-qrcode", role: "img", "aria-label": "QR code" });
-  const reading = el("p", { class: "mvb-note" });
+  const canvas = el("canvas", { class: "h-auto w-[min(300px,100%)] [image-rendering:pixelated]", role: "img", "aria-label": "QR code" });
+  const reading = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const error = notice("error");
   let svg = "";
 
@@ -86,8 +86,7 @@ export function mount(slot) {
       stack(panel("Text or link", content), panel("Size in pixels", sizeField), error),
       stack(panel("Preview", canvas), reading)
     ),
-    foot: actions(copyButton, svgButton, pngButton),
-  });
+    foot: actions(copyButton, svgButton, pngButton)});
   slot.append(card.node);
   render();
 

package/mevebu/libs/js/tools/qr-scanner.js

@@ -19,9 +19,9 @@ function loadJsQR() {
 }
 
 export function mount(slot) {
-  const video = el("video", { class: "mvb-qrview", playsinline: true, muted: true, hidden: true });
+  const video = el("video", { class: "w-[min(420px,100%)] rounded-r2 border border-orbit-hard bg-black", playsinline: true, muted: true, hidden: true });
   const fileField = el("input", { type: "file", accept: "image/*", hidden: true, "aria-label": "Image file" });
-  const status = el("p", { class: "mvb-note" });
+  const status = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
   const found = output({ rows: 3 });
   const error = notice("error");
 
@@ -32,15 +32,15 @@ export function mount(slot) {
   const paint = scratch.getContext("2d", { willReadFrequently: true });
 
   const startButton = button("Start camera", { icon: "camera", kind: "fill" });
-  const stopButton = el("button", { class: "mvb-btn mvb-btn--plain", type: "button", hidden: true }, icon("video-off"), el("span", {}, "Stop"));
+  const stopButton = el("button", { class: "inline-flex min-h-[var(--ctl)] cursor-pointer items-center justify-center gap-2 rounded-r1 border px-4 text-sm font-semibold whitespace-nowrap no-underline transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-45 border-orbit bg-deck text-ink hover:border-orbit-hard hover:bg-deck-2", type: "button", hidden: true }, icon("video-off"), el("span", {}, "Stop"));
   const uploadButton = button("Choose an image", { icon: "upload" });
   const copyButton = button("Copy", { icon: "copy" });
-  const openWrap = el("span", { class: "mvb-row" });
+  const openWrap = el("span", { class: "flex min-w-0 flex-wrap items-center gap-2" });
 
   const drop = el(
     "div",
-    { class: "mvb-drop", role: "button", tabindex: "0", "aria-label": "Drop an image here or choose one" },
-    icon("image-up", "mvb-ico mvb-ico--lg"),
+    { class: "grid cursor-pointer justify-items-center gap-2 rounded-r2 border border-dashed border-orbit-hard px-4 py-7 text-sm text-ink-3 transition-colors duration-150 hover:border-jade hover:bg-jade-soft data-[drag]:border-jade data-[drag]:bg-jade-soft", role: "button", tabindex: "0", "aria-label": "Drop an image here or choose one" },
+    icon("image-up", "size-[26px] flex-none"),
     el("p", {}, "Drop an image here, or choose one.")
   );
 
@@ -50,7 +50,7 @@ export function mount(slot) {
     error.write("");
     openWrap.replaceChildren();
     if (/^https?:\/\//i.test(text.trim())) {
-      openWrap.append(el("a", { class: "mvb-btn mvb-btn--plain", href: text.trim(), target: "_blank", rel: "noopener" },
+      openWrap.append(el("a", { class: "inline-flex min-h-[var(--ctl)] cursor-pointer items-center justify-center gap-2 rounded-r1 border px-4 text-sm font-semibold whitespace-nowrap no-underline transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-45 border-orbit bg-deck text-ink hover:border-orbit-hard hover:bg-deck-2", href: text.trim(), target: "_blank", rel: "noopener" },
         icon("external-link"), el("span", {}, "Open link")));
     }
     toast("Found");
@@ -159,12 +159,12 @@ export function mount(slot) {
   });
   drop.addEventListener("dragover", (event) => {
     event.preventDefault();
-    drop.classList.add("mvb-drag");
+    drop.dataset.drag = "";
   });
-  drop.addEventListener("dragleave", () => drop.classList.remove("mvb-drag"));
+  drop.addEventListener("dragleave", () => delete drop.dataset.drag);
   drop.addEventListener("drop", (event) => {
     event.preventDefault();
-    drop.classList.remove("mvb-drag");
+    delete drop.dataset.drag;
     if (event.dataTransfer.files[0]) scanFile(event.dataTransfer.files[0]);
   });
   copyButton.addEventListener("click", async () => {
@@ -180,8 +180,7 @@ export function mount(slot) {
       stack(video, drop, fileField, status, error),
       panel("Decoded", found)
     ),
-    foot: actions(openWrap, copyButton),
-  });
+    foot: actions(openWrap, copyButton)});
   slot.append(card.node);
 
   return { unmount: stop };

package/mevebu/libs/js/tools/quadratic-solver.js

@@ -6,19 +6,19 @@ function fmt(n) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const a = numberInput({ value: "1", "aria-label": "Coefficient a" });
   const b = numberInput({ value: "-3", "aria-label": "Coefficient b" });
   const c = numberInput({ value: "2", "aria-label": "Coefficient c" });
-  const discriminant = el("span", { class: "mvb-kv__v" }, "-");
-  const root1 = el("span", { class: "mvb-kv__v" }, "-");
-  const root2 = el("span", { class: "mvb-kv__v" }, "-");
-  const nature = el("span", { class: "mvb-kv__v" }, "-");
+  const discriminant = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const root1 = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const root2 = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const nature = 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("Discriminant", discriminant),
     kvRow("Root 1", root1),
     kvRow("Root 2", root2),
@@ -82,8 +82,7 @@ export function mount(slot) {
       stack(panel("a", a), panel("b", b), panel("c", c), error),
       stack(panel("Solution", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy roots", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy roots", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/query-builder.js

@@ -13,7 +13,7 @@ const isUrl = (value) => {
 
 export function mount(slot) {
   const base = textInput({ value: "https://example.com/search", "aria-label": "Base URL" });
-  const params = textArea({ rows: 8, class: "mvb-in mvb-in--area mvb-in--mono", value: "q=hello world\npage=2", placeholder: "q=hello world\npage=2", "aria-label": "Parameters" });
+  const params = textArea({ rows: 8, value: "q=hello world\npage=2", placeholder: "q=hello world\npage=2", "aria-label": "Parameters" });
   const encode = checkbox("Encode values", { checked: true });
   const result = output({ rows: 4 });
   const error = notice("error");
@@ -60,8 +60,7 @@ export function mount(slot) {
       stack(panel("Base URL", base), panel("Parameters", params), encode, error),
       stack(panel("URL", result))
     ),
-    foot: actions(copyButton(() => result.textContent, "Copy URL", "fill")),
-  });
+    foot: actions(copyButton(() => result.textContent, "Copy URL", "fill"))});
   slot.append(card.node);
   build();
 

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

@@ -23,10 +23,9 @@ export function mount(slot) {
   const source = textArea({
     rows: 14,
     "aria-label": "Questions",
-    placeholder: "Question one\n- First option\n- Second option\n* The correct option\n\nQuestion two\n- ...",
-  });
-  const quiz = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Quiz" });
-  const key = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Answer key" });
+    placeholder: "Question one\n- First option\n- Second option\n* The correct option\n\nQuestion two\n- ..."});
+  const quiz = textArea({ rows: 12, readonly: true, "aria-label": "Quiz" });
+  const key = textArea({ rows: 12, readonly: true, "aria-label": "Answer key" });
   const error = notice("error");
 
   function render() {
@@ -59,8 +58,7 @@ export function mount(slot) {
     foot: actions(
       copyButton(() => key.value, "Copy key"),
       copyButton(() => quiz.value, "Copy quiz", "fill")
-    ),
-  });
+    )});
   slot.append(card.node);
   render();
 

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

@@ -17,7 +17,7 @@ function fmt(n) {
 }
 
 const kvRow = (key, value) =>
-  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+  el("div", { class: "grid gap-3 bg-deck px-3 py-[9px] [grid-template-columns:minmax(90px,34%)_minmax(0,1fr)]" }, el("span", { class: "wrap-anywhere text-2xs font-semibold text-ink-2" }, key), el("span", { class: "wrap-anywhere font-mono text-2xs" }, value));
 
 export function mount(slot) {
   const ratioInput = textInput({ value: "12:18:24", "aria-label": "Ratio" });
@@ -25,12 +25,12 @@ export function mount(slot) {
   const b = numberInput({ placeholder: "B", "aria-label": "Second term" });
   const c = numberInput({ placeholder: "C", "aria-label": "Third term" });
   const d = numberInput({ placeholder: "D", "aria-label": "Fourth term" });
-  const simplified = el("span", { class: "mvb-kv__v" }, "-");
-  const decimal = el("span", { class: "mvb-kv__v" }, "-");
-  const missing = el("span", { class: "mvb-kv__v" }, "-");
+  const simplified = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimal = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const missing = 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("Simplified ratio", simplified),
     kvRow("Decimal", decimal),
     kvRow("Missing term", missing)
@@ -87,13 +87,12 @@ export function mount(slot) {
     body: bench(
       stack(
         panel("Ratio", ratioInput),
-        panel("Proportion", el("div", { class: "mvb-row" }, a, b, c, d)),
+        panel("Proportion", el("div", { class: "flex min-w-0 flex-wrap items-center gap-2" }, a, b, c, d)),
         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/readability.js

@@ -27,15 +27,15 @@ function syllablesOf(word) {
 }
 
 function tile(label, initial = "-") {
-  const value = el("span", { class: "mvb-stat__v" }, initial);
-  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" }, initial);
+  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;
 }
 
-const kvRow = (key, value) => el("div", { class: "mvb-kv__row" },
-  el("span", { class: "mvb-kv__k" }, key),
-  el("span", { class: "mvb-kv__v" }, value));
+const kvRow = (key, 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: 12, "aria-label": "Text", placeholder: "Type or paste text" });
@@ -43,14 +43,13 @@ export function mount(slot) {
   const easeTile = tile("Reading ease");
   const gradeTile = tile("Grade level");
   const fogTile = tile("Gunning Fog");
-  const stats = el("div", { class: "mvb-stats" }, easeTile, gradeTile, fogTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, easeTile, gradeTile, fogTile);
 
   const counts = {
-    words: el("span", { class: "mvb-kv__v" }, "0"),
-    sentences: el("span", { class: "mvb-kv__v" }, "0"),
-    syllables: el("span", { class: "mvb-kv__v" }, "0"),
-  };
-  const countList = el("div", { class: "mvb-kv" },
+    words: el("span", { class: "wrap-anywhere font-mono text-2xs" }, "0"),
+    sentences: el("span", { class: "wrap-anywhere font-mono text-2xs" }, "0"),
+    syllables: el("span", { class: "wrap-anywhere font-mono text-2xs" }, "0")};
+  const countList = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" },
     kvRow("Words", counts.words),
     kvRow("Sentences", counts.sentences),
     kvRow("Syllables", counts.syllables));
@@ -90,8 +89,7 @@ export function mount(slot) {
       `Reading ease ${ease.toFixed(1)}`,
       `Grade level ${grade.toFixed(1)}`,
       `Gunning Fog ${fog.toFixed(1)}`,
-      `${words.length} words, ${sentences.length} sentences, ${syllableCount} syllables`,
-    ].join("\n");
+      `${words.length} words, ${sentences.length} sentences, ${syllableCount} syllables`].join("\n");
   }
 
   source.addEventListener("input", run);
@@ -101,8 +99,7 @@ export function mount(slot) {
       stack(panel("Text", source)),
       stack(stats, countList, note)
     ),
-    foot: actions(copyButton(() => summary, "Copy scores", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy scores", "fill"))});
   slot.append(card.node);
   run();
 

package/mevebu/libs/js/tools/reading-time.js

@@ -23,8 +23,8 @@ const clock = (minutes) => {
 };
 
 function tile(label) {
-  const value = el("span", { class: "mvb-stat__v" }, "0:00");
-  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:00");
+  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;
 }
@@ -36,7 +36,7 @@ export function mount(slot) {
   const wordsTile = tile("Words");
   const readTile = tile("Reading time");
   const speakTile = tile("Speaking time");
-  const stats = el("div", { class: "mvb-stats" }, wordsTile, readTile, speakTile);
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, wordsTile, readTile, speakTile);
   const note = notice("note");
   note.write("Reading and speaking speeds vary by person and text.");
 
@@ -53,8 +53,7 @@ export function mount(slot) {
     summary = [
       `${words} words`,
       `Reading ${words ? clock(readMinutes) : "0:00"} at ${wpm} words per minute`,
-      `Speaking ${words ? clock(speakMinutes) : "0:00"} at 130 words per minute`,
-    ].join("\n");
+      `Speaking ${words ? clock(speakMinutes) : "0:00"} at 130 words per minute`].join("\n");
   }
 
   source.addEventListener("input", run);
@@ -65,8 +64,7 @@ export function mount(slot) {
       stack(panel("Text", source), panel("Reading speed", speed, "Words per minute")),
       stack(stats, note)
     ),
-    foot: actions(copyButton(() => summary, "Copy estimate", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy estimate", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -4,8 +4,8 @@ import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcar
 const PARTS = ["Author", "Year", "Title", "Source"];
 
 function kvRow(key) {
-  const value = el("span", { class: "mvb-kv__v" }, "-");
-  const row = el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), value);
+  const value = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const row = 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), value);
   return { row, value };
 }
 
@@ -14,15 +14,14 @@ function check(text) {
   return {
     Author: /^[A-Z][A-Za-z'’.-]+,/.test(t) || /\b(and|&)\s+[A-Z]/.test(t),
     Year: /\b(1[5-9]\d{2}|20\d{2})\b/.test(t),
-    Title: /["“][^"”]{2,}["”]/.test(t) || t.replace(/^[^.]*\./, "").trim().length > 8,
-    Source: /https?:\/\/|www\.|\bIn\b|\b(Journal|Press|Publishing|Publishers|University|vol\.|pp\.|ed\.)\b/i.test(t),
-  };
+    Title: /["“][^"”]{2}["”]/.test(t) || t.replace(/^[^.]*\./, "").trim().length > 8,
+    Source: /https?:\/\/|www\.|\bIn\b|\b(Journal|Press|Publishing|Publishers|University|vol\.|pp\.|ed\.)\b/i.test(t)};
 }
 
 export function mount(slot) {
   const source = textArea({ rows: 6, "aria-label": "Reference", placeholder: "Paste one reference" });
   const rows = {};
-  const kv = el("div", { class: "mvb-kv" });
+  const kv = el("div", { class: "grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit" });
   for (const key of PARTS) {
     rows[key] = kvRow(key);
     kv.append(rows[key].row);
@@ -51,8 +50,7 @@ export function mount(slot) {
       stack(panel("Reference", source), note),
       stack(panel("Parts", kv), status)
     ),
-    foot: actions(copyButton(() => summary, "Copy check", "fill")),
-  });
+    foot: actions(copyButton(() => summary, "Copy check", "fill"))});
   slot.append(card.node);
   run();