mevebu 0.3.1 → 0.4.0

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

@@ -0,0 +1,137 @@
+// Turns pasted table data into a Markdown table.
+import { el, bench, stack, panel, textArea, selectInput, notice, output, copyButton, actions, toolcard } from "../core.js";
+
+function parseDelimited(text, delimiter) {
+  const rows = [];
+  let row = [];
+  let field = "";
+  let quoted = false;
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+    if (quoted) {
+      if (char === '"') {
+        if (text[i + 1] === '"') { field += '"'; i++; }
+        else quoted = false;
+      } else field += char;
+    } else if (char === '"') {
+      quoted = true;
+    } else if (char === delimiter) {
+      row.push(field);
+      field = "";
+    } else if (char === "\n") {
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = "";
+    } else if (char !== "\r") {
+      field += char;
+    }
+  }
+  if (field !== "" || row.length) {
+    row.push(field);
+    rows.push(row);
+  }
+  return rows;
+}
+
+function detectDelimiter(text) {
+  const candidates = [",", ";", "\t", "|"];
+  const first = text.split(/\r?\n/)[0] ?? "";
+  const counts = { ",": 0, ";": 0, "\t": 0, "|": 0 };
+  let quoted = false;
+  for (let i = 0; i < first.length; i++) {
+    const char = first[i];
+    if (char === '"') quoted = !quoted;
+    else if (!quoted && char in counts) counts[char]++;
+  }
+  let best = ",";
+  let bestCount = 0;
+  for (const candidate of candidates) {
+    if (counts[candidate] > bestCount) { bestCount = counts[candidate]; best = candidate; }
+  }
+  return best;
+}
+
+const escapeCell = (cell) => String(cell ?? "").replace(/\|/g, "\\|").replace(/\s*\n\s*/g, " ").trim();
+
+function tile(label) {
+  const value = el("span", { class: "mvb-stat__v" }, "0");
+  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  node.set = (text) => { value.textContent = text; };
+  return node;
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 12, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Table data", placeholder: "Paste rows copied from a spreadsheet" });
+  const delimiter = selectInput([
+    { value: "auto", label: "Auto" },
+    { value: ",", label: "Comma" },
+    { value: ";", label: "Semicolon" },
+    { value: "\t", label: "Tab" },
+    { value: "|", label: "Pipe" },
+  ], { value: "auto", "aria-label": "Delimiter" });
+  const alignment = selectInput([
+    { value: "none", label: "None" },
+    { value: "left", label: "Left" },
+    { value: "center", label: "Center" },
+    { value: "right", label: "Right" },
+  ], { value: "none", "aria-label": "Alignment" });
+
+  const result = output({ rows: 12 });
+  const rowsTile = tile("Rows");
+  const colsTile = tile("Columns");
+  const stats = el("div", { class: "mvb-stats" }, rowsTile, colsTile);
+  const error = notice("error");
+  let current = "";
+
+  function separator(count) {
+    const cell = alignment.value === "left" ? ":---" : alignment.value === "center" ? ":---:" : alignment.value === "right" ? "---:" : "---";
+    return Array.from({ length: count }, () => cell);
+  }
+
+  function run() {
+    error.write("");
+    const text = source.value;
+    if (!text.trim()) {
+      current = "";
+      result.write("");
+      rowsTile.set("0");
+      colsTile.set("0");
+      return;
+    }
+    const used = delimiter.value === "auto" ? detectDelimiter(text) : delimiter.value;
+    const rows = parseDelimited(text, used);
+    const header = rows[0] ?? [];
+    const body = rows.slice(1);
+    if (body.some((row) => row.length !== header.length)) {
+      error.write("Some rows have a different number of columns.");
+    }
+    rowsTile.set(String(rows.length));
+    colsTile.set(String(header.length));
+    const line = (cells) => `| ${cells.join(" | ")} |`;
+    current = [
+      line(header.map(escapeCell)),
+      line(separator(header.length)),
+      ...body.map((row) => line(header.map((_, i) => escapeCell(row[i])))),
+    ].join("\n");
+    result.write(current);
+  }
+
+  source.addEventListener("input", run);
+  delimiter.addEventListener("change", run);
+  alignment.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Table data", source), panel("Delimiter", delimiter), panel("Alignment", alignment), error),
+      stack(stats, panel("Markdown", result))
+    ),
+    foot: actions(copyButton(() => current, "Copy Markdown", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,84 @@
+// Adds tax to an amount or takes it out of a tax-inclusive price.
+import { el, bench, stack, panel, numberInput, chipRow, notice, copyButton, actions, toolcard } from "../core.js";
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 2 });
+}
+
+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));
+  node.set = (text) => { value.textContent = text; };
+  return node;
+}
+
+export function mount(slot) {
+  const amount = numberInput({ value: "100", min: "0", "aria-label": "Amount" });
+  const rate = numberInput({ value: "11", "aria-label": "Tax rate" });
+  let mode = "add";
+  const chips = chipRow(
+    [{ value: "add", label: "Add tax" }, { value: "included", label: "Tax included" }],
+    { value: "add", label: "Amount type", onChange: (next) => { mode = next; run(); } }
+  );
+  const taxTile = tile("Tax");
+  const netTile = tile("Net");
+  const grossTile = tile("Total");
+  const stats = el("div", { class: "mvb-stats" }, taxTile, netTile, grossTile);
+  const error = notice("error");
+  const note = notice("note");
+  note.write("You set the rate. No official rule is applied.");
+  let text = "";
+
+  function clear() {
+    taxTile.set("-");
+    netTile.set("-");
+    grossTile.set("-");
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const a = Number(amount.value);
+    const r = Number(rate.value);
+    if (amount.value.trim() === "" || rate.value.trim() === "" || !Number.isFinite(a) || !Number.isFinite(r)) {
+      clear();
+      return;
+    }
+    if (a < 0) { clear(); error.write("The amount cannot be negative."); return; }
+    if (r <= -100) { clear(); error.write("The rate must be above -100%."); return; }
+
+    let net;
+    let tax;
+    let gross;
+    if (mode === "included") {
+      net = a / (1 + r / 100);
+      tax = a - net;
+      gross = a;
+    } else {
+      net = a;
+      tax = (a * r) / 100;
+      gross = a + tax;
+    }
+    taxTile.set(fmt(tax));
+    netTile.set(fmt(net));
+    grossTile.set(fmt(gross));
+    text = `Net ${fmt(net)}, tax ${fmt(tax)}, total ${fmt(gross)}`;
+  }
+
+  amount.addEventListener("input", run);
+  rate.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Amount", amount), panel("Amount type", chips), panel("Tax rate %", rate), error),
+      stack(stats, note)
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,94 @@
+// Converts between Celsius, Fahrenheit and Kelvin, with the formula shown.
+import { el, bench, stack, panel, numberInput, selectInput, notice, copyButton, button, actions, toolcard } from "../core.js";
+
+const SCALES = [
+  { value: "c", label: "Celsius" },
+  { value: "f", label: "Fahrenheit" },
+  { value: "k", label: "Kelvin" },
+];
+
+const byId = Object.fromEntries(SCALES.map((scale) => [scale.value, scale]));
+const options = SCALES.map(({ value, label }) => ({ value, label }));
+
+const toCelsius = (n, scale) => (scale === "c" ? n : scale === "f" ? ((n - 32) * 5) / 9 : n - 273.15);
+const fromCelsius = (c, scale) => (scale === "c" ? c : scale === "f" ? (c * 9) / 5 + 32 : c + 273.15);
+
+const FORMULAS = {
+  "c-f": "F = C x 9/5 + 32",
+  "c-k": "K = C + 273.15",
+  "f-c": "C = (F - 32) x 5/9",
+  "f-k": "K = (F - 32) x 5/9 + 273.15",
+  "k-c": "C = K - 273.15",
+  "k-f": "F = (K - 273.15) x 9/5 + 32",
+};
+
+function fmt(value) {
+  if (!Number.isFinite(value)) return "-";
+  if (value === 0) return "0";
+  const abs = Math.abs(value);
+  if (abs >= 1e-6 && abs < 1e15) return String(Number(value.toPrecision(8)));
+  return value.toExponential(4);
+}
+
+export function mount(slot) {
+  const value = numberInput({ value: "0", step: "any", "aria-label": "Value" });
+  const from = selectInput(options, { value: "c", "aria-label": "From scale" });
+  const to = selectInput(options, { value: "f", "aria-label": "To scale" });
+  const result = el("span", { class: "mvb-stat__v" }, "-");
+  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "Result"), result));
+  const formula = el("p", { class: "mvb-note" });
+  const error = notice("error");
+  const scroll = el("div", { class: "mvb-scroll" });
+  let text = "";
+
+  function run() {
+    error.write("");
+    const raw = value.value.trim();
+    const n = Number(raw);
+    if (!raw || !Number.isFinite(n)) {
+      result.textContent = "-";
+      formula.textContent = "";
+      scroll.replaceChildren();
+      text = "";
+      error.write("Enter a number.");
+      return;
+    }
+    const a = byId[from.value];
+    const b = byId[to.value];
+    const celsius = toCelsius(n, a.value);
+    const out = fromCelsius(celsius, b.value);
+    result.textContent = `${fmt(out)} ${b.value === "k" ? "K" : `°${b.value.toUpperCase()}`}`;
+    formula.textContent = a.value === b.value ? "" : FORMULAS[`${a.value}-${b.value}`];
+    scroll.replaceChildren(el("table", { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Scale"), el("th", {}, "Value"))),
+      el("tbody", {}, ...SCALES.map((scale) => el("tr", {},
+        el("td", {}, scale.label),
+        el("td", {}, fmt(fromCelsius(celsius, scale.value))))))));
+    text = `${fmt(out)} ${b.label}`;
+  }
+
+  value.addEventListener("input", run);
+  from.addEventListener("change", run);
+  to.addEventListener("change", run);
+
+  const swap = button("Swap", { icon: "arrow-left-right", onclick: () => {
+    const held = from.value;
+    from.value = to.value;
+    to.value = held;
+    run();
+  }});
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Value", value), panel("From", from), panel("To", to), error),
+      stack(panel("Result", stats), formula, panel("All scales", scroll))
+    ),
+    foot: actions(swap, copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,104 @@
+// Line by line comparison of two texts, marking added and removed lines.
+import { el, bench, stack, panel, textArea, toggleRow, notice, button, copyButton, actions, toolcard } from "../core.js";
+
+const MAX_LINES = 800;
+
+export function mount(slot) {
+  const left = textArea({ rows: 9, "aria-label": "First text", placeholder: "First text" });
+  const right = textArea({ rows: 9, "aria-label": "Second text", placeholder: "Second text" });
+  const options = toggleRow([
+    { value: "ignore", label: "Ignore case", checked: false },
+    { value: "spaces", label: "Ignore spaces", checked: false },
+  ]);
+  const diffBox = el("div", { class: "mvb-diff" });
+  const note = notice("note");
+  let rows = [];
+
+  function normalize(line) {
+    let text = line;
+    if (options.values().includes("spaces")) text = text.replace(/\s+/g, " ").trim();
+    if (options.values().includes("ignore")) text = text.toLowerCase();
+    return text;
+  }
+
+  function diffLines(aNorm, bNorm, aRaw, bRaw) {
+    const n = aNorm.length;
+    const m = bNorm.length;
+    const dp = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
+    for (let i = n - 1; i >= 0; i--) {
+      for (let j = m - 1; j >= 0; j--) {
+        dp[i][j] = aNorm[i] === bNorm[j]
+          ? dp[i + 1][j + 1] + 1
+          : Math.max(dp[i + 1][j], dp[i][j + 1]);
+      }
+    }
+    const out = [];
+    let i = 0;
+    let j = 0;
+    while (i < n && j < m) {
+      if (aNorm[i] === bNorm[j]) { out.push(["same", aRaw[i]]); i++; j++; }
+      else if (dp[i + 1][j] >= dp[i][j + 1]) { out.push(["del", aRaw[i]]); i++; }
+      else { out.push(["add", bRaw[j]]); j++; }
+    }
+    while (i < n) { out.push(["del", aRaw[i]]); i++; }
+    while (j < m) { out.push(["add", bRaw[j]]); j++; }
+    return out;
+  }
+
+  function diffText() {
+    return rows.map(([type, raw]) => `${type === "add" ? "+ " : type === "del" ? "- " : "  "}${raw}`).join("\n");
+  }
+
+  function run() {
+    const aRaw = left.value === "" ? [] : left.value.split("\n");
+    const bRaw = right.value === "" ? [] : right.value.split("\n");
+    if (!aRaw.length && !bRaw.length) {
+      diffBox.replaceChildren();
+      rows = [];
+      note.write("Paste two texts to compare.");
+      return;
+    }
+    const truncated = aRaw.length > MAX_LINES || bRaw.length > MAX_LINES;
+    const a = aRaw.slice(0, MAX_LINES).map(normalize);
+    const b = bRaw.slice(0, MAX_LINES).map(normalize);
+    rows = diffLines(a, b, aRaw.slice(0, MAX_LINES), bRaw.slice(0, MAX_LINES));
+    const added = rows.filter(([type]) => type === "add").length;
+    const removed = rows.filter(([type]) => type === "del").length;
+    diffBox.replaceChildren(...rows.map(([type, raw]) => el(
+      "div",
+      { class: `mvb-diff__row${type === "add" ? " mvb-diff__row--add" : type === "del" ? " mvb-diff__row--del" : ""}` },
+      el("span", { class: "mvb-diff__sign" }, type === "add" ? "+" : type === "del" ? "-" : " "),
+      el("span", {}, raw)
+    )));
+    const counts = !added && !removed
+      ? "The texts are identical."
+      : `${added} added, ${removed} removed.`;
+    note.write(truncated ? `${counts} Compared the first ${MAX_LINES} lines.` : counts);
+  }
+
+  const swapButton = button("Swap texts", { icon: "arrow-left-right" });
+  swapButton.addEventListener("click", () => {
+    const value = left.value;
+    left.value = right.value;
+    right.value = value;
+    run();
+  });
+
+  left.addEventListener("input", run);
+  right.addEventListener("input", run);
+  options.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("First text", left), panel("Second text", right), options, note),
+      stack(panel("Difference", diffBox))
+    ),
+    foot: actions(swapButton, copyButton(diffText, "Copy diff", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,55 @@
+// Preview text under each direction, with the attribute to use.
+import { el, bench, stack, panel, textArea, chipRow, output, copyButton, actions, toolcard } from "../core.js";
+
+const RTL = /[\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0780-\u07BF\u08A0-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF]/;
+const LTR = /[A-Za-z\u00C0-\u024F]/;
+
+function detect(text) {
+  for (const char of text) {
+    if (RTL.test(char)) return "rtl";
+    if (LTR.test(char)) return "ltr";
+  }
+  return "ltr";
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 6, "aria-label": "Text", placeholder: "Type or paste text" });
+  const sample = el("div", { class: "mvb-preview__sample" }, "Sample text");
+  const code = output();
+
+  let mode = "auto";
+  const dirChips = chipRow(
+    [
+      { value: "auto", label: "Auto" },
+      { value: "ltr", label: "Left to right" },
+      { value: "rtl", label: "Right to left" },
+    ],
+    { value: "auto", label: "Direction", onChange: (next) => { mode = next; run(); } }
+  );
+
+  let snippet = "";
+
+  function run() {
+    const direction = mode === "auto" ? detect(source.value) : mode;
+    sample.dir = direction;
+    sample.textContent = source.value.trim() ? source.value : "Sample text";
+    snippet = `dir="${direction}"`;
+    code.write(snippet);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text", source), panel("Direction", dirChips)),
+      stack(panel("Preview", sample), panel("Attribute", code))
+    ),
+    foot: actions(copyButton(() => snippet, "Copy attribute", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,51 @@
+// Reverses text by character, word or line. Character mode keeps emoji and
+// accented letters whole when the browser exposes grapheme segmentation.
+import { bench, stack, panel, textArea, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+function reverseChars(text) {
+  if (typeof Intl !== "undefined" && Intl.Segmenter) {
+    const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+    return [...segmenter.segment(text)].map((part) => part.segment).reverse().join("");
+  }
+  return [...text].reverse().join("");
+}
+
+const reverseWords = (text) => text.trim() ? text.trim().split(/\s+/).reverse().join(" ") : "";
+const reverseLines = (text) => text ? text.split("\n").reverse().join("\n") : "";
+
+export function mount(slot) {
+  const source = textArea({ rows: 10, "aria-label": "Text", placeholder: "Type or paste text" });
+  const result = textArea({ rows: 10, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+
+  let mode = "chars";
+  const chips = chipRow(
+    [
+      { value: "chars", label: "Characters" },
+      { value: "words", label: "Words" },
+      { value: "lines", label: "Lines" },
+    ],
+    { value: "chars", label: "Reverse by", onChange: (value) => { mode = value; run(); } }
+  );
+
+  function run() {
+    const text = source.value;
+    if (!text) { result.value = ""; return; }
+    result.value = mode === "chars" ? reverseChars(text) : mode === "words" ? reverseWords(text) : reverseLines(text);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text", source), panel("Reverse by", chips)),
+      stack(panel("Result", result))
+    ),
+    foot: actions(copyButton(() => result.value, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,83 @@
+// Measures the time between two clock times, across midnight, minus a break.
+import { el, bench, stack, panel, textInput, numberInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+function parseTime(value) {
+  const match = /^(\d{1,2}):(\d{2})$/.exec(value);
+  if (!match) return null;
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  if (hours > 23 || minutes > 59) return null;
+  return hours * 60 + minutes;
+}
+
+const kvRow = (key, value) =>
+  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+
+export function mount(slot) {
+  const start = textInput({ type: "time", value: "09:00", "aria-label": "Start time" });
+  const end = textInput({ type: "time", value: "17:30", "aria-label": "End time" });
+  const breakMin = numberInput({ value: "30", min: "0", "aria-label": "Break in minutes" });
+
+  const result = el("span", { class: "mvb-stat__v" }, "-");
+  const tile = el("div", { class: "mvb-stat" }, result, el("span", { class: "mvb-stat__k" }, "Duration"));
+  const stats = el("div", { class: "mvb-stats" }, tile);
+  const minutesOut = el("span", { class: "mvb-kv__v" }, "-");
+  const decimalOut = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el("div", { class: "mvb-kv" }, kvRow("Total minutes", minutesOut), kvRow("Decimal hours", decimalOut));
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    result.textContent = "-";
+    minutesOut.textContent = "-";
+    decimalOut.textContent = "-";
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const from = parseTime(start.value);
+    const to = parseTime(end.value);
+    if (from == null || to == null) {
+      clear();
+      error.write("Enter a valid start and end time.");
+      return;
+    }
+    let span = to - from;
+    if (span < 0) span += 1440;
+    const pause = breakMin.value.trim() === "" ? 0 : Number(breakMin.value);
+    if (!Number.isFinite(pause) || pause < 0) {
+      clear();
+      error.write("Enter the break in minutes.");
+      return;
+    }
+    if (pause > span) {
+      clear();
+      error.write("The break is longer than the time between the two clocks.");
+      return;
+    }
+    const total = span - pause;
+    const hours = Math.floor(total / 60);
+    const minutes = total % 60;
+    result.textContent = `${hours}h ${minutes}m`;
+    minutesOut.textContent = String(total);
+    decimalOut.textContent = (total / 60).toFixed(2);
+    text = `${hours}h ${minutes}m`;
+  }
+
+  for (const input of [start, end, breakMin]) input.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Start", start), panel("End", end), panel("Break in minutes", breakMin), error),
+      stack(stats, panel("Breakdown", kv))
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };