mevebu 0.3.1 → 0.4.0

package/mevebu/libs/js/tools/roman-numeral-converter.js

@@ -0,0 +1,106 @@
+// Converts a number to a Roman numeral, or a Roman numeral to a number.
+import { el, bench, stack, panel, textInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+const NUMERALS = [
+  [1000, "M"], [900, "CM"], [500, "D"], [400, "CD"], [100, "C"], [90, "XC"],
+  [50, "L"], [40, "XL"], [10, "X"], [9, "IX"], [5, "V"], [4, "IV"], [1, "I"],
+];
+
+function toRoman(n) {
+  let rest = n;
+  let out = "";
+  for (const [value, symbol] of NUMERALS) {
+    while (rest >= value) {
+      out += symbol;
+      rest -= value;
+    }
+  }
+  return out;
+}
+
+function fromRoman(text) {
+  const values = { i: 1, v: 5, x: 10, l: 50, c: 100, d: 500, m: 1000 };
+  let total = 0;
+  const upper = text.toUpperCase();
+  for (let i = 0; i < upper.length; i++) {
+    const current = values[upper[i].toLowerCase()];
+    const next = values[upper[i + 1]?.toLowerCase()];
+    if (next && current < next) total -= current;
+    else total += current;
+  }
+  return total;
+}
+
+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 source = textInput({ value: "2026", "aria-label": "Number or Roman numeral", placeholder: "2026 or MMXXVI" });
+  const detected = el("span", { class: "mvb-kv__v" }, "-");
+  const result = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el(
+    "div",
+    { class: "mvb-kv" },
+    kvRow("Input", detected),
+    kvRow("Result", result)
+  );
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    detected.textContent = "-";
+    result.textContent = "-";
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const value = source.value.trim();
+    if (!value) {
+      clear();
+      return;
+    }
+    if (/^[0-9]+$/.test(value)) {
+      const number = Number(value);
+      if (number < 1 || number > 3999) {
+        clear();
+        error.write("Roman numerals cover 1 to 3999.");
+        return;
+      }
+      detected.textContent = "Number";
+      result.textContent = toRoman(number);
+      text = toRoman(number);
+      return;
+    }
+    if (/^[ivxlcdm]+$/i.test(value)) {
+      const number = fromRoman(value);
+      if (number < 1 || number > 3999 || toRoman(number) !== value.toUpperCase()) {
+        clear();
+        error.write("That is not a standard Roman numeral.");
+        return;
+      }
+      detected.textContent = "Roman numeral";
+      result.textContent = String(number);
+      text = String(number);
+      return;
+    }
+    clear();
+    error.write("Enter a number from 1 to 3999, or a Roman numeral.");
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Number or Roman numeral", source), error),
+      stack(panel("Result", kv))
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/sales-commission.js

@@ -0,0 +1,96 @@
+// Commission per sale and the total, with an optional higher tier.
+import { el, bench, stack, row, panel, textArea, numberInput, notice, copyButton, downloadButton, actions, toolcard } from "../core.js";
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+function parseNumbers(text) {
+  const tokens = text.split(/[\s,;]+/).filter(Boolean);
+  const nums = tokens.map(Number);
+  return { nums, invalid: nums.some((n) => !Number.isFinite(n)) };
+}
+
+export function mount(slot) {
+  const sales = textArea({ rows: 8, value: "1000, 2500, 4000", "aria-label": "Sale amounts", placeholder: "One amount per line" });
+  const rate = numberInput({ value: "5", min: "0", "aria-label": "Rate" });
+  const threshold = numberInput({ placeholder: "Threshold", min: "0", "aria-label": "Tier threshold" });
+  const higher = numberInput({ placeholder: "Higher rate", min: "0", "aria-label": "Higher rate" });
+  const result = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+  const error = notice("error");
+  let text = "";
+
+  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 tiered = () => threshold.value.trim() !== "" && higher.value.trim() !== "";
+
+  function commissionFor(amount) {
+    const base = Number(rate.value) || 0;
+    if (tiered()) {
+      const t = Number(threshold.value) || 0;
+      const h = Number(higher.value) || 0;
+      if (amount > t) return (t * base + (amount - t) * h) / 100;
+    }
+    return (amount * base) / 100;
+  }
+
+  function run() {
+    error.write("");
+    text = "";
+    const { nums, invalid } = parseNumbers(sales.value);
+    const r = Number(rate.value);
+    if (!sales.value.trim()) {
+      result.replaceChildren(el("p", { class: "mvb-note" }, "Add one sale amount per line."));
+      stats.replaceChildren();
+      return;
+    }
+    if (invalid || !Number.isFinite(r) || r < 0) {
+      error.write("Use numbers only for the sales and a rate of zero or more.");
+      result.replaceChildren();
+      stats.replaceChildren();
+      return;
+    }
+    result.replaceChildren(el("table", { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Sale"), el("th", {}, "Commission"))),
+      el("tbody", {}, ...nums.map((amount) => el("tr", {},
+        el("th", {}, fmt(amount)),
+        el("td", {}, fmt(commissionFor(amount))))))));
+    const totalSales = nums.reduce((a, b) => a + b, 0);
+    const totalCommission = nums.reduce((sum, amount) => sum + commissionFor(amount), 0);
+    stats.replaceChildren(tile("Sales", String(nums.length)), tile("Total sales", fmt(totalSales)), tile("Commission", fmt(totalCommission)));
+    text = `${nums.map((amount) => `${fmt(amount)}: ${fmt(commissionFor(amount))}`).join("\n")}\nTotal ${fmt(totalCommission)}`;
+  }
+
+  for (const input of [sales, rate, threshold, higher]) input.addEventListener("input", run);
+
+  function csv() {
+    const { nums } = parseNumbers(sales.value);
+    const rows = [["Sale", "Commission"], ...nums.map((amount) => [String(amount), commissionFor(amount).toFixed(2)])];
+    return rows.map((cells) => cells.map((cell) => `"${cell}"`).join(",")).join("\n");
+  }
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Sale amounts", sales),
+        panel("Rate %", rate),
+        row(panel("Tier threshold", threshold), panel("Higher rate %", higher)),
+        error
+      ),
+      stack(stats, panel("Per sale", result))
+    ),
+    foot: actions(
+      downloadButton(() => csv(), "commission.csv", "Save CSV", "text/csv"),
+      copyButton(() => text, "Copy commission", "fill")
+    ),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,247 @@
+// Scientific math from a typed expression or the keypad. Degrees or radians
+// drive the trig functions, and recent results stay in a short history.
+import { el, bench, stack, panel, textInput, output, notice, button, copyButton, chipRow, actions, toolcard } from "../core.js";
+
+function tokenize(src) {
+  const tokens = [];
+  let i = 0;
+  while (i < src.length) {
+    const ch = src[i];
+    if (/\s/.test(ch)) { i++; continue; }
+    if (/[0-9.]/.test(ch)) {
+      let j = i;
+      while (j < src.length && /[0-9.]/.test(src[j])) j++;
+      if (src[j] === "e" || src[j] === "E") {
+        let k = j + 1;
+        if (src[k] === "+" || src[k] === "-") k++;
+        if (/[0-9]/.test(src[k] ?? "")) {
+          while (k < src.length && /[0-9]/.test(src[k])) k++;
+          j = k;
+        }
+      }
+      tokens.push({ type: "num", value: Number(src.slice(i, j)) });
+      i = j;
+      continue;
+    }
+    if (/[a-zA-Z]/.test(ch)) {
+      let j = i;
+      while (j < src.length && /[a-zA-Z]/.test(src[j])) j++;
+      tokens.push({ type: "name", value: src.slice(i, j).toLowerCase() });
+      i = j;
+      continue;
+    }
+    if ("+-*/^()".includes(ch)) {
+      tokens.push({ type: "op", value: ch });
+      i++;
+      continue;
+    }
+    throw new Error("Unexpected character");
+  }
+  return tokens;
+}
+
+const FUNCTIONS = {
+  sin: (x) => Math.sin(x),
+  cos: (x) => Math.cos(x),
+  tan: (x) => Math.tan(x),
+  asin: (x) => Math.asin(x),
+  acos: (x) => Math.acos(x),
+  atan: (x) => Math.atan(x),
+  log: (x) => Math.log10(x),
+  ln: (x) => Math.log(x),
+  sqrt: (x) => Math.sqrt(x),
+  abs: (x) => Math.abs(x),
+  exp: (x) => Math.exp(x),
+};
+
+function evaluate(src, degrees) {
+  const tokens = tokenize(src);
+  let pos = 0;
+  const peek = () => tokens[pos];
+  const eat = () => tokens[pos++];
+  const toRad = (x) => (degrees ? (x * Math.PI) / 180 : x);
+  const fromRad = (x) => (degrees ? (x * 180) / Math.PI : x);
+
+  function expr() {
+    let value = term();
+    while (peek() && peek().type === "op" && (peek().value === "+" || peek().value === "-")) {
+      const op = eat().value;
+      const rhs = term();
+      value = op === "+" ? value + rhs : value - rhs;
+    }
+    return value;
+  }
+
+  function term() {
+    let value = unary();
+    for (;;) {
+      const token = peek();
+      if (token && token.type === "op" && (token.value === "*" || token.value === "/")) {
+        eat();
+        const rhs = unary();
+        value = token.value === "*" ? value * rhs : value / rhs;
+      } else if (token && (token.type === "num" || token.type === "name" || (token.type === "op" && token.value === "("))) {
+        value *= unary();
+      } else break;
+    }
+    return value;
+  }
+
+  function unary() {
+    const token = peek();
+    if (token && token.type === "op" && (token.value === "-" || token.value === "+")) {
+      eat();
+      const value = unary();
+      return token.value === "-" ? -value : value;
+    }
+    return power();
+  }
+
+  function power() {
+    const base = primary();
+    if (peek() && peek().type === "op" && peek().value === "^") {
+      eat();
+      return base ** unary();
+    }
+    return base;
+  }
+
+  function primary() {
+    const token = eat();
+    if (!token) throw new Error("Unexpected end of expression");
+    if (token.type === "num") return token.value;
+    if (token.type === "name") {
+      if (token.value === "pi") return Math.PI;
+      if (token.value === "e") return Math.E;
+      if (!FUNCTIONS[token.value]) throw new Error("Unknown name");
+      const open = eat();
+      if (!open || open.value !== "(") throw new Error("Expected an opening bracket");
+      const arg = expr();
+      const close = eat();
+      if (!close || close.value !== ")") throw new Error("Expected a closing bracket");
+      const raw = FUNCTIONS[token.value](token.value === "sin" || token.value === "cos" || token.value === "tan" ? toRad(arg) : arg);
+      return token.value === "asin" || token.value === "acos" || token.value === "atan" ? fromRad(raw) : raw;
+    }
+    if (token.type === "op" && token.value === "(") {
+      const value = expr();
+      const close = eat();
+      if (!close || close.value !== ")") throw new Error("Expected a closing bracket");
+      return value;
+    }
+    throw new Error("Unexpected token");
+  }
+
+  const result = expr();
+  if (pos < tokens.length) throw new Error("Unexpected token");
+  return result;
+}
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 10 });
+}
+
+const KEYS = ["sin(", "cos(", "tan(", "log(", "ln(", "sqrt(", "pi", "e", "^", "(", ")", "/", "7", "8", "9", "*", "4", "5", "6", "-", "1", "2", "3", "+", "0", ".", "="];
+
+export function mount(slot) {
+  const input = textInput({ value: "sin(30) + 2^3", "aria-label": "Expression", placeholder: "sin(30) + 2^3" });
+  const display = output({ rows: 2 });
+  const error = notice("error");
+  const history = el("div", { class: "mvb-kv" });
+  const chips = chipRow(
+    [
+      { value: "deg", label: "Degrees" },
+      { value: "rad", label: "Radians" },
+    ],
+    {
+      value: "deg",
+      label: "Angle unit",
+      onChange: (value) => {
+        degrees = value === "deg";
+        run();
+      },
+    }
+  );
+  const recent = [];
+  let degrees = true;
+  let current = "";
+
+  function renderHistory() {
+    history.replaceChildren();
+    for (const entry of recent) {
+      history.append(
+        el("div", { class: "mvb-kv__row" },
+          el("span", { class: "mvb-kv__k" }, entry.expression),
+          el("span", { class: "mvb-kv__v" }, entry.result))
+      );
+    }
+  }
+
+  function run() {
+    const text = input.value.trim();
+    if (!text) {
+      display.write("");
+      error.write("");
+      current = "";
+      return;
+    }
+    try {
+      const value = evaluate(text, degrees);
+      if (!Number.isFinite(value)) throw new Error("Not a finite number");
+      current = fmt(value);
+      display.write(current);
+      error.write("");
+    } catch {
+      current = "";
+      display.write("");
+      error.write("That expression could not be read.");
+    }
+  }
+
+  function commit() {
+    run();
+    if (!current) return;
+    recent.unshift({ expression: input.value.trim(), result: current });
+    recent.splice(5);
+    renderHistory();
+  }
+
+  function insert(token) {
+    if (token === "=") {
+      commit();
+      return;
+    }
+    const start = input.selectionStart ?? input.value.length;
+    const end = input.selectionEnd ?? start;
+    input.value = input.value.slice(0, start) + token + input.value.slice(end);
+    const caret = start + token.length;
+    input.focus();
+    input.setSelectionRange(caret, caret);
+    run();
+  }
+
+  const keypad = el("div", { class: "mvb-chips" });
+  for (const key of KEYS) {
+    keypad.append(el("button", { class: "mvb-chip", type: "button", onclick: () => insert(key) }, key));
+  }
+
+  input.addEventListener("input", run);
+  const evaluateButton = button("Evaluate", { icon: "calculator", kind: "fill", onclick: commit });
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Expression", input),
+        panel("Angle unit", chips),
+        panel("Keys", keypad)
+      ),
+      stack(display, error, panel("History", history))
+    ),
+    foot: actions(copyButton(() => current, "Copy result"), evaluateButton),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/scientific-notation.js

@@ -0,0 +1,83 @@
+// Converts a number to and from scientific notation.
+import { el, bench, stack, panel, textInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+function parseNumber(text) {
+  const clean = text.trim().toLowerCase().replace(/×/g, "x").replace(/\s+/g, "");
+  if (!clean) return null;
+  const match = clean.match(/^([+-]?\d*\.?\d+)x10\^?([+-]?\d+)$/);
+  if (match) return Number(match[1]) * 10 ** Number(match[2]);
+  const value = Number(clean);
+  return Number.isFinite(value) ? value : null;
+}
+
+function decimalForm(n) {
+  if (n === 0) return "0";
+  if (Math.abs(n) >= 1e21 || Math.abs(n) < 1e-6) return n.toExponential();
+  return n.toLocaleString(undefined, { maximumFractionDigits: 20 });
+}
+
+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 source = textInput({ value: "3.2e8", "aria-label": "Number", placeholder: "3.2e8 or 320000000" });
+  const scientific = el("span", { class: "mvb-kv__v" }, "-");
+  const eForm = el("span", { class: "mvb-kv__v" }, "-");
+  const decimal = el("span", { class: "mvb-kv__v" }, "-");
+  const coefficient = el("span", { class: "mvb-kv__v" }, "-");
+  const exponent = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el(
+    "div",
+    { class: "mvb-kv" },
+    kvRow("Scientific", scientific),
+    kvRow("E notation", eForm),
+    kvRow("Decimal", decimal),
+    kvRow("Coefficient", coefficient),
+    kvRow("Exponent", exponent)
+  );
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    for (const node of [scientific, eForm, decimal, coefficient, exponent]) node.textContent = "-";
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      clear();
+      return;
+    }
+    const value = parseNumber(source.value);
+    if (value === null) {
+      clear();
+      error.write("That is not a number this browser can read.");
+      return;
+    }
+    const [mantissa, rawExponent] = value.toExponential().split("e");
+    const power = Number(rawExponent);
+    scientific.textContent = `${mantissa} x 10^${power}`;
+    eForm.textContent = value.toExponential();
+    decimal.textContent = decimalForm(value);
+    coefficient.textContent = mantissa;
+    exponent.textContent = String(power);
+    text = `${mantissa} x 10^${power}`;
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Number", source), error),
+      stack(panel("Forms", kv))
+    ),
+    foot: actions(copyButton(() => text, "Copy scientific", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/script-planner.js

@@ -0,0 +1,72 @@
+// A video script laid out in sections, with word and time estimates.
+import { el, bench, stack, panel, textArea, numberInput, copyButton, actions, toolcard } from "../core.js";
+
+const SECTIONS = [
+  ["hook", "Hook"],
+  ["intro", "Intro"],
+  ["body", "Body"],
+  ["outro", "Outro"],
+];
+
+const clock = (seconds) => {
+  const total = Math.max(0, Math.round(seconds));
+  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+};
+
+const countWords = (text) => (text.trim() ? text.trim().split(/\s+/).length : 0);
+
+const kvRow = (key, value) => el("div", { class: "mvb-kv__row" },
+  el("span", { class: "mvb-kv__k" }, key),
+  el("span", { class: "mvb-kv__v" }, value));
+
+export function mount(slot) {
+  const inputs = {};
+  const fields = SECTIONS.map(([id, label]) => {
+    const area = textArea({ rows: 4, "aria-label": label, placeholder: `${label} text` });
+    inputs[id] = area;
+    return panel(label, area);
+  });
+
+  const rate = numberInput({ min: "60", max: "400", value: "150", "aria-label": "Speaking rate in words per minute" });
+
+  const rows = {};
+  const list = el("div", { class: "mvb-kv" });
+  for (const [id, label] of SECTIONS) {
+    const value = el("span", { class: "mvb-kv__v" }, "0 words");
+    rows[id] = value;
+    list.append(kvRow(label, value));
+  }
+  const total = el("span", { class: "mvb-kv__v" }, "0 words");
+  list.append(kvRow("Total", total));
+
+  let fullScript = "";
+
+  function run() {
+    const wpm = Math.max(1, parseInt(rate.value, 10) || 150);
+    let totalWords = 0;
+    for (const [id] of SECTIONS) {
+      const words = countWords(inputs[id].value);
+      totalWords += words;
+      rows[id].textContent = `${words} words - ${clock((words / wpm) * 60)}`;
+    }
+    total.textContent = `${totalWords} words - ${clock((totalWords / wpm) * 60)}`;
+    fullScript = SECTIONS.map(([id, label]) => `${label}\n${inputs[id].value.trim()}`).join("\n\n");
+  }
+
+  for (const area of Object.values(inputs)) area.addEventListener("input", run);
+  rate.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(...fields),
+      stack(panel("Speaking rate", rate, "Words per minute"), list)
+    ),
+    foot: actions(copyButton(() => fullScript, "Copy script", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/secure-token.js

@@ -0,0 +1,60 @@
+// Random tokens from the browser random source, in hex or URL-safe Base64.
+import { el, numberInput, chipRow, output, notice, button, copyButton, bench, stack, panel, actions, toolcard } from "../core.js";
+
+function toHex(bytes) {
+  return [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+function toBase64Url(bytes) {
+  let text = "";
+  for (const byte of bytes) text += String.fromCharCode(byte);
+  return btoa(text).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+export function mount(slot) {
+  const bytesField = numberInput({ min: "1", max: "256", value: "32", "aria-label": "Byte length" });
+  const result = output({ rows: 3 });
+  const error = notice("error");
+  let format = "hex";
+
+  const formats = chipRow(
+    [{ value: "hex", label: "Hex" }, { value: "base64", label: "Base64 URL-safe" }],
+    { value: format, label: "Format", onChange: (value) => { format = value; draw(); } }
+  );
+
+  function draw() {
+    error.write("");
+    const size = parseInt(bytesField.value, 10);
+    if (!Number.isFinite(size) || size < 1 || size > 256) {
+      result.write("");
+      error.write("Enter a byte length between 1 and 256.");
+      return;
+    }
+    const bytes = new Uint8Array(size);
+    crypto.getRandomValues(bytes);
+    result.write(format === "hex" ? toHex(bytes) : toBase64Url(bytes));
+  }
+
+  bytesField.addEventListener("input", draw);
+  const generateButton = button("Generate", { icon: "refresh-cw", kind: "fill" });
+  generateButton.addEventListener("click", draw);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Bytes", bytesField),
+        panel("Format", formats),
+        el("p", { class: "mvb-note" }, "The token is drawn from the browser random source in this tab. Store real tokens safely."),
+        error
+      ),
+      stack(panel("Token", result))
+    ),
+    foot: actions(copyButton(() => result.textContent, "Copy token"), generateButton),
+  });
+  slot.append(card.node);
+  draw();
+
+  return {};
+}
+
+export default { mount };