mevebu 1.2.0 → 1.4.0

package/mevebu/libs/js/tools/number-base-converter.js

@@ -5,8 +5,7 @@ const BASES = [
   { value: "2", label: "Binary" },
   { value: "8", label: "Octal" },
   { value: "10", label: "Decimal" },
-  { value: "16", label: "Hex" },
-];
+  { value: "16", label: "Hex" }];
 
 const PATTERNS = { 2: /^[01]+$/, 8: /^[0-7]+$/, 10: /^[0-9]+$/, 16: /^[0-9a-f]+$/ };
 const PREFIX = { 2: "0b", 8: "0o", 10: "", 16: "0x" };
@@ -23,17 +22,17 @@ function parseInBase(text, base) {
 }
 
 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: "255", "aria-label": "Number", placeholder: "255" });
-  const binary = el("span", { class: "mvb-kv__v" }, "-");
-  const octal = el("span", { class: "mvb-kv__v" }, "-");
-  const decimal = el("span", { class: "mvb-kv__v" }, "-");
-  const hex = el("span", { class: "mvb-kv__v" }, "-");
+  const binary = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const octal = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const decimal = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const hex = 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("Binary", binary),
     kvRow("Octal", octal),
     kvRow("Decimal", decimal),
@@ -76,8 +75,7 @@ export function mount(slot) {
     onChange: (value) => {
       base = value;
       run();
-    },
-  });
+    }});
 
   source.addEventListener("input", run);
 
@@ -86,8 +84,7 @@ export function mount(slot) {
       stack(panel("Number", source), panel("Input base", chips), error),
       stack(panel("In every base", kv))
     ),
-    foot: actions(copyButton(() => text, "Copy all", "fill")),
-  });
+    foot: actions(copyButton(() => text, "Copy all", "fill"))});
   slot.append(card.node);
   run();
 

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

@@ -5,12 +5,11 @@ const SETS = {
   lower: "abcdefghijklmnopqrstuvwxyz",
   upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
   digits: "0123456789",
-  symbols: "!@#$%^&*()-_=+[]{};:,.<>?",
-};
+  symbols: "!@#$%^&*()-_=+[]{};:,.<>?"};
 
 export function mount(slot) {
   const lengthField = rangeInput({ min: "6", max: "64", value: "16", "aria-label": "Length" });
-  const lengthLabel = el("span", { class: "mvb-field__label" });
+  const lengthLabel = el("span", { class: "text-sm font-semibold text-ink-2" });
 
   function showLength() {
     lengthLabel.textContent = `Length: ${lengthField.value}`;
@@ -20,11 +19,10 @@ export function mount(slot) {
     { value: "lower", label: "a to z" },
     { value: "upper", label: "A to Z" },
     { value: "digits", label: "0 to 9" },
-    { value: "symbols", label: "Symbols" },
-  ]);
+    { value: "symbols", label: "Symbols" }]);
 
-  const secret = textInput({ class: "mvb-in mvb-in--mono", readonly: true, "aria-label": "Password", placeholder: "Press Generate" });
-  const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Strength" }, el("div", { class: "mvb-meter__fill" }));
+  const secret = textInput({ mono: true, readonly: true, "aria-label": "Password", placeholder: "Press Generate" });
+  const meter = el("div", { class: "h-2 overflow-hidden rounded-full bg-deck-2", role: "img", "aria-label": "Strength" }, el("div", { class: "h-full w-0 rounded-full bg-orbit-hard transition-[width,background-color] duration-150 data-[level=weak]:bg-danger data-[level=ok]:bg-star data-[level=strong]:bg-jade" }));
   const strength = notice("note");
   const error = notice("error");
 
@@ -37,11 +35,11 @@ export function mount(slot) {
 
   function draw() {
     const source = pool();
-    const fill = meter.querySelector(".mvb-meter__fill");
+    const fill = meter.firstElementChild;
     if (!source) {
       secret.value = "";
       fill.style.width = "0%";
-      fill.className = "mvb-meter__fill";
+      delete fill.dataset.level;
       meter.setAttribute("aria-label", "Strength");
       strength.write("");
       error.write("Pick at least one group above.");
@@ -65,7 +63,7 @@ export function mount(slot) {
     const bits = Math.round(length * Math.log2(source.length));
     const word = bits < 50 ? "weak" : bits < 90 ? "good" : "strong";
     fill.style.width = `${Math.min(100, (bits / 128) * 100)}%`;
-    fill.className = `mvb-meter__fill ${bits < 50 ? "mvb-weak" : bits < 90 ? "mvb-ok" : "mvb-strong"}`;
+    fill.dataset.level = bits < 50 ? "weak" : bits < 90 ? "ok" : "strong";
     // The bar is colour only, so the reading it stands for also goes on the bar itself.
     meter.setAttribute("aria-label", `Strength: ${bits} bits, ${word}`);
     strength.write(`${bits} bits, ${word}.`);
@@ -84,8 +82,7 @@ export function mount(slot) {
       stack(panel(lengthLabel, lengthField), groups, error),
       stack(panel("Password", secret), meter, strength)
     ),
-    foot: actions(copyButton, generateButton),
-  });
+    foot: actions(copyButton, generateButton)});
   slot.append(card.node);
   draw();
 

package/mevebu/libs/js/tools/password-strength.js

@@ -3,24 +3,21 @@ import { el, icon, passwordInput, button, bench, stack, panel, notice, copyButto
 
 const COMMON = new Set([
   "password", "123456", "123456789", "qwerty", "letmein", "admin", "welcome",
-  "iloveyou", "monkey", "dragon", "abc123", "111111", "000000", "passw0rd",
-]);
+  "iloveyou", "monkey", "dragon", "abc123", "111111", "000000", "passw0rd"]);
 
 const GROUPS = [
   { test: (value) => /[a-z]/.test(value) },
   { test: (value) => /[A-Z]/.test(value) },
   { test: (value) => /[0-9]/.test(value) },
-  { test: (value) => /[^A-Za-z0-9]/.test(value) },
-];
+  { test: (value) => /[^A-Za-z0-9]/.test(value) }];
 
 const LEVELS = [
-  { name: "Very weak", cls: "mvb-weak" },
-  { name: "Weak", cls: "mvb-weak" },
-  { name: "Fair", cls: "mvb-ok" },
-  { name: "Good", cls: "mvb-ok" },
-  { name: "Strong", cls: "mvb-strong" },
-  { name: "Very strong", cls: "mvb-strong" },
-];
+  { name: "Very weak", key: "weak" },
+  { name: "Weak", key: "weak" },
+  { name: "Fair", key: "ok" },
+  { name: "Good", key: "ok" },
+  { name: "Strong", key: "strong" },
+  { name: "Very strong", key: "strong" }];
 
 function analyze(value) {
   const length = value.length;
@@ -35,7 +32,7 @@ function analyze(value) {
   const hints = [];
   if (length < 12) hints.push("Use at least 12 characters.");
   if (groups < 3) hints.push("Mix upper case, lower case, digits and symbols.");
-  if (/(.)\1{2,}/.test(value)) {
+  if (/(.)\1{2}/.test(value)) {
     score -= 1;
     hints.push("Repeated characters are easy to guess.");
   }
@@ -47,17 +44,17 @@ function analyze(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 field = passwordInput({ autocomplete: "off", "aria-label": "Password", placeholder: "Type a password" });
   const showButton = button("Show", { icon: "eye" });
-  const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Strength" }, el("div", { class: "mvb-meter__fill" }));
-  const label = el("p", { class: "mvb-note text-[1.0625rem] font-bold text-ink" });
-  const lengthValue = el("span", { class: "mvb-kv__v" }, "-");
-  const groupsValue = el("span", { class: "mvb-kv__v" }, "-");
-  const kv = el("div", { class: "mvb-kv" }, kvRow("Length", lengthValue), kvRow("Character groups", groupsValue));
-  const hints = el("div", { class: "mvb-stack" });
+  const meter = el("div", { class: "h-2 overflow-hidden rounded-full bg-deck-2", role: "img", "aria-label": "Strength" }, el("div", { class: "h-full w-0 rounded-full bg-orbit-hard transition-[width,background-color] duration-150 data-[level=weak]:bg-danger data-[level=ok]:bg-star data-[level=strong]:bg-jade" }));
+  const label = el("p", { class: "border-s-[3px] border-transparent ps-2 text-md font-bold text-ink" });
+  const lengthValue = el("span", { class: "wrap-anywhere font-mono text-2xs" }, "-");
+  const groupsValue = 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("Length", lengthValue), kvRow("Character groups", groupsValue));
+  const hints = el("div", { class: "grid content-start gap-4" });
   const status = notice("note");
   let report = "";
 
@@ -69,11 +66,11 @@ export function mount(slot) {
 
   function run() {
     const value = field.value;
-    const fill = meter.querySelector(".mvb-meter__fill");
+    const fill = meter.firstElementChild;
     hints.replaceChildren();
     if (!value) {
       fill.style.width = "0%";
-      fill.className = "mvb-meter__fill";
+      delete fill.dataset.level;
       label.textContent = "";
       meter.setAttribute("aria-label", "Strength");
       lengthValue.textContent = "-";
@@ -85,7 +82,7 @@ export function mount(slot) {
     const { score, groups, length, hints: why } = analyze(value);
     const level = LEVELS[score];
     fill.style.width = `${(score / 5) * 100}%`;
-    fill.className = `mvb-meter__fill ${level.cls}`;
+    fill.dataset.level = level.key;
     label.textContent = level.name;
     // The bar is colour only, so the reading it stands for also goes on the bar itself.
     meter.setAttribute("aria-label", `Strength: ${level.name}`);
@@ -104,11 +101,10 @@ export function mount(slot) {
 
   const card = toolcard({
     body: bench(
-      stack(panel("Password", el("div", { class: "mvb-secret" }, field, showButton))),
+      stack(panel("Password", el("div", { class: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2" }, field, showButton))),
       stack(meter, label, kv, hints, status)
     ),
-    foot: actions(copyButton(() => report, "Copy report", "fill")),
-  });
+    foot: actions(copyButton(() => report, "Copy report", "fill"))});
   slot.append(card.node);
   run();
 

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