mevebu 0.3.0 → 0.4.0

package/mevebu/libs/js/tools/csv-to-json.js

@@ -0,0 +1,114 @@
+// Turns CSV rows into JSON records, the first row naming the properties.
+import { el, bench, stack, panel, textArea, checkbox, 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;
+}
+
+function coerce(value) {
+  const text = value ?? "";
+  if (text === "") return "";
+  if (/^-?\d+(\.\d+)?$/.test(text)) return Number(text);
+  if (text === "true") return true;
+  if (text === "false") return false;
+  return text;
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 12, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "CSV", placeholder: "name,role\nAda,engineer" });
+  const typedBox = checkbox("Typed values", { checked: true });
+  const result = output({ rows: 12 });
+  const error = notice("error");
+  let current = "[]";
+
+  function run() {
+    error.write("");
+    const text = source.value;
+    if (!text.trim()) {
+      current = "[]";
+      result.write("[]");
+      return;
+    }
+    const rows = parseDelimited(text, detectDelimiter(text));
+    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.");
+    }
+    const typed = typedBox.input.checked;
+    const records = body.map((row) => {
+      const record = {};
+      header.forEach((key, i) => {
+        const name = key || `column${i + 1}`;
+        record[name] = typed ? coerce(row[i]) : (row[i] ?? "");
+      });
+      return record;
+    });
+    current = JSON.stringify(records, null, 2);
+    result.write(current);
+  }
+
+  source.addEventListener("input", run);
+  typedBox.input.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("CSV", source), panel(null, typedBox), error),
+      stack(panel("JSON", result))
+    ),
+    foot: actions(copyButton(() => current, "Copy JSON", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/csv-viewer.js

@@ -0,0 +1,132 @@
+// Reads CSV or delimited text as a table, with row and column counts.
+import { el, bench, stack, panel, textArea, selectInput, fileInput, notice, copyButton, button, 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;
+}
+
+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": "CSV", placeholder: "Paste CSV here" });
+  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 file = fileInput({ accept: ".csv,.tsv,.txt,text/csv", "aria-label": "CSV file" });
+
+  const tableWrap = el("div", { class: "mvb-scroll" });
+  const rowsTile = tile("Rows");
+  const colsTile = tile("Columns");
+  const stats = el("div", { class: "mvb-stats" }, rowsTile, colsTile);
+  const error = notice("error");
+  let current = [];
+
+  function run() {
+    error.write("");
+    const text = source.value;
+    if (!text.trim()) {
+      current = [];
+      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "Paste CSV or choose a file."));
+      rowsTile.set("0");
+      colsTile.set("0");
+      return;
+    }
+    const used = delimiter.value === "auto" ? detectDelimiter(text) : delimiter.value;
+    const rows = parseDelimited(text, used);
+    current = rows;
+    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(body.length));
+    colsTile.set(String(header.length));
+    tableWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, ...header.map((cell, i) => el("th", {}, cell || `Column ${i + 1}`)))),
+      el("tbody", {}, ...body.map((row) => el("tr", {}, ...header.map((_, i) => el("td", {}, row[i] ?? "")))))
+    ));
+  }
+
+  file.addEventListener("change", async () => {
+    const picked = file.files[0];
+    if (!picked) return;
+    source.value = await picked.text();
+    file.value = "";
+    run();
+  });
+
+  const clearButton = button("Clear", { icon: "trash" });
+  clearButton.addEventListener("click", () => { source.value = ""; run(); });
+  delimiter.addEventListener("change", run);
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("CSV", source), panel("Delimiter", delimiter), panel("CSV file", file), error),
+      stack(stats, panel("Table", tableWrap))
+    ),
+    foot: actions(clearButton, copyButton(() => current.map((row) => row.join("\t")).join("\n"), "Copy table", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/currency-format.js

@@ -0,0 +1,69 @@
+// A number shown as a currency for a chosen locale, with no rate applied.
+import { el, bench, stack, panel, textInput, selectInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+const CURRENCIES = ["USD", "EUR", "GBP", "JPY", "IDR", "INR", "AUD", "CAD", "CNY", "BRL", "SGD", "CHF"];
+
+const LOCALES = [
+  { value: "en-US", label: "English (US)" },
+  { value: "en-GB", label: "English (UK)" },
+  { value: "de-DE", label: "German" },
+  { value: "fr-FR", label: "French" },
+  { value: "es-ES", label: "Spanish" },
+  { value: "id-ID", label: "Indonesian" },
+  { value: "hi-IN", label: "Hindi" },
+  { value: "ja-JP", label: "Japanese" },
+  { value: "pt-BR", label: "Portuguese (Brazil)" },
+];
+
+function format(locale, currency, value) {
+  try {
+    return new Intl.NumberFormat(locale, { style: "currency", currency }).format(value);
+  } catch {
+    return String(value);
+  }
+}
+
+export function mount(slot) {
+  const value = textInput({ value: "1234.5", inputmode: "decimal", "aria-label": "Amount" });
+  const currency = selectInput(CURRENCIES, { value: "USD", "aria-label": "Currency" });
+  const locale = selectInput(LOCALES, { value: "en-US", "aria-label": "Locale" });
+
+  const amount = el("span", { class: "mvb-stat__v" }, "-");
+  const readout = el("div", { class: "mvb-stats" },
+    el("div", { class: "mvb-stat" }, amount, el("span", { class: "mvb-stat__k" }, "Formatted")));
+
+  const note = notice("note");
+  note.write("The amount is formatted, not converted. No exchange rate is applied.");
+
+  let formatted = "";
+
+  function run() {
+    const parsed = Number(value.value.trim());
+    formatted = value.value.trim() === "" || !Number.isFinite(parsed)
+      ? ""
+      : format(locale.value, currency.value, parsed);
+    amount.textContent = formatted || "-";
+  }
+
+  value.addEventListener("input", run);
+  currency.addEventListener("change", run);
+  locale.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Amount", value),
+        panel("Currency", currency),
+        panel("Locale", locale)
+      ),
+      stack(readout, note)
+    ),
+    foot: actions(copyButton(() => formatted, "Copy amount", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,124 @@
+// Plans a day by the clock, sorting activities and flagging overlaps.
+import { el, toast, blank, bench, stack, row, panel, textInput, button, notice, actions, toolcard, readPin, writePin } from "../core.js";
+
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+const toMin = (time) => {
+  const [h, m] = String(time).split(":").map(Number);
+  return (h || 0) * 60 + (m || 0);
+};
+
+function fmtDur(min) {
+  const h = Math.floor(min / 60);
+  const m = min % 60;
+  if (h && m) return `${h}h ${m}m`;
+  if (h) return `${h}h`;
+  return `${m}m`;
+}
+
+export function mount(slot) {
+  const PIN = "daily-planner";
+  const saved = readPin(PIN, []);
+  let list = Array.isArray(saved) ? saved : [];
+
+  const title = textInput({ placeholder: "Activity", "aria-label": "Activity" });
+  const start = el("input", { class: "mvb-in", type: "time", value: "09:00", "aria-label": "Start time" });
+  const end = el("input", { class: "mvb-in", type: "time", value: "10:00", "aria-label": "End time" });
+
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+  const overlapNote = notice("error");
+  const error = notice("error");
+
+  const addButton = button("Add", { icon: "plus", kind: "fill" });
+  const clearButton = button("Clear day", { icon: "trash" });
+
+  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 save = () => writePin(PIN, list);
+
+  function removeButton(item) {
+    const node = button("", { icon: "trash", "aria-label": `Remove ${item.text}` });
+    node.addEventListener("click", () => {
+      list = list.filter((entry) => entry.id !== item.id);
+      save();
+      render();
+    });
+    return node;
+  }
+
+  function render() {
+    const sorted = list.slice().sort((a, b) => toMin(a.start) - toMin(b.start));
+    const flagged = new Set();
+    for (let i = 0; i < sorted.length - 1; i++) {
+      if (toMin(sorted[i].end) > toMin(sorted[i + 1].start)) {
+        flagged.add(sorted[i].id);
+        flagged.add(sorted[i + 1].id);
+      }
+    }
+
+    if (!sorted.length) {
+      listWrap.replaceChildren(blank("calendar-check", "No activities yet."));
+    } else {
+      const rows = sorted.map((item) => el("tr", {},
+        el("th", {}, item.start),
+        el("td", {}, item.end),
+        el("td", {}, item.text),
+        el("td", {}, fmtDur(Math.max(0, toMin(item.end) - toMin(item.start)))),
+        el("td", {}, flagged.has(item.id) ? "Overlap" : ""),
+        el("td", {}, removeButton(item))
+      ));
+      listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+        el("thead", {}, el("tr", {},
+          el("th", {}, "Start"), el("th", {}, "End"), el("th", {}, "Activity"),
+          el("th", {}, "Length"), el("th", {}, "Note"), el("th", {}, ""))),
+        el("tbody", {}, ...rows)
+      ));
+    }
+
+    const planned = sorted.reduce((sum, item) => sum + Math.max(0, toMin(item.end) - toMin(item.start)), 0);
+    stats.replaceChildren(tile("Activities", sorted.length), tile("Planned", fmtDur(planned)));
+    overlapNote.write(flagged.size ? `${flagged.size} activities overlap.` : "");
+    clearButton.disabled = list.length === 0;
+  }
+
+  function add() {
+    const text = title.value.trim();
+    if (!text) return toast("Add an activity name");
+    if (!start.value || !end.value || toMin(end.value) <= toMin(start.value)) {
+      error.write("End time must be after the start.");
+      return;
+    }
+    error.write("");
+    list.push({ id: uid(), text, start: start.value, end: end.value });
+    title.value = "";
+    save();
+    render();
+  }
+
+  addButton.addEventListener("click", add);
+  clearButton.addEventListener("click", () => {
+    list = [];
+    save();
+    render();
+  });
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Activity", title),
+        row(panel("Start", start), panel("End", end)),
+        error
+      ),
+      stack(stats, panel("Day", listWrap), overlapNote)
+    ),
+    foot: actions(clearButton, addButton),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/data-masker.js

@@ -0,0 +1,71 @@
+// Masks emails, card numbers and phone numbers in pasted text.
+import { el, textArea, output, toggleRow, copyButton, bench, stack, panel, actions, toolcard } from "../core.js";
+
+const EMAIL = /[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}/g;
+const CARD = /\b\d[\d -]{11,}\d\b/g;
+const PHONE = /\b\+?\d[\d ().-]{5,}\d\b/g;
+
+function maskDigits(value, keep) {
+  const digits = value.replace(/\D/g, "");
+  if (digits.length <= keep) return value;
+  const cutoff = digits.length - keep;
+  let seen = 0;
+  return value.replace(/\d/g, (digit) => (seen++ < cutoff ? "*" : digit));
+}
+
+function maskEmail(value) {
+  return value.replace(EMAIL, (email) => {
+    const [local, domain] = email.split("@");
+    const head = local.slice(0, 1);
+    return `${head}${"*".repeat(Math.max(1, local.length - 1))}@${domain}`;
+  });
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 12, "aria-label": "Values", placeholder: "Paste values, one per line" });
+  const result = output({ rows: 12 });
+
+  const kinds = toggleRow([
+    { value: "email", label: "Email" },
+    { value: "card", label: "Card number" },
+    { value: "phone", label: "Phone number" },
+  ]);
+
+  function run() {
+    const on = kinds.values();
+    const lines = source.value.split("\n").map((line) => {
+      let text = line;
+      if (on.includes("email")) text = maskEmail(text);
+      if (on.includes("card")) text = text.replace(CARD, (value) => (value.replace(/\D/g, "").length >= 13 ? maskDigits(value, 4) : value));
+      if (on.includes("phone")) {
+        text = text.replace(PHONE, (value) => {
+          const digits = value.replace(/\D/g, "").length;
+          return digits >= 7 && digits <= 12 ? maskDigits(value, 2) : value;
+        });
+      }
+      return text;
+    });
+    result.write(lines.join("\n"));
+  }
+
+  source.addEventListener("input", run);
+  kinds.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Values", source),
+        panel("Mask", kinds),
+        el("p", { class: "mvb-note" }, "Masking runs in this tab. Check the result before sharing.")
+      ),
+      stack(panel("Masked", result))
+    ),
+    foot: actions(copyButton(() => result.textContent, "Copy masked", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/data-storage.js

@@ -0,0 +1,89 @@
+// Converts digital storage. Decimal units step by 1000, binary units by 1024.
+import { el, bench, stack, panel, numberInput, selectInput, notice, copyButton, button, actions, toolcard } from "../core.js";
+
+const UNITS = [
+  { value: "B", label: "Byte", factor: 1 },
+  { value: "KB", label: "Kilobyte", factor: 1000 },
+  { value: "MB", label: "Megabyte", factor: 1000000 },
+  { value: "GB", label: "Gigabyte", factor: 1000000000 },
+  { value: "TB", label: "Terabyte", factor: 1000000000000 },
+  { value: "KiB", label: "Kibibyte", factor: 1024 },
+  { value: "MiB", label: "Mebibyte", factor: 1048576 },
+  { value: "GiB", label: "Gibibyte", factor: 1073741824 },
+  { value: "TiB", label: "Tebibyte", factor: 1099511627776 },
+];
+
+const byId = Object.fromEntries(UNITS.map((unit) => [unit.value, unit]));
+const options = UNITS.map(({ value, label }) => ({ value, label }));
+
+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: "1", step: "any", "aria-label": "Value" });
+  const from = selectInput(options, { value: "MB", "aria-label": "From unit" });
+  const to = selectInput(options, { value: "MiB", "aria-label": "To unit" });
+  const result = el("span", { class: "mvb-stat__v" }, "-");
+  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "Result"), result));
+  const factor = el("p", { class: "mvb-note" });
+  const scaleNote = notice("note");
+  scaleNote.write("KB is 1000 bytes, KiB is 1024 bytes.");
+  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 = "-";
+      factor.textContent = "";
+      scroll.replaceChildren();
+      text = "";
+      error.write("Enter a number.");
+      return;
+    }
+    const a = byId[from.value];
+    const b = byId[to.value];
+    const out = (n * a.factor) / b.factor;
+    result.textContent = `${fmt(out)} ${b.value}`;
+    factor.textContent = `1 ${a.value} = ${fmt(a.factor / b.factor)} ${b.value}`;
+    scroll.replaceChildren(el("table", { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Unit"), el("th", {}, "Value"))),
+      el("tbody", {}, ...UNITS.map((unit) => el("tr", {},
+        el("td", {}, unit.label),
+        el("td", {}, fmt((n * a.factor) / unit.factor)))))));
+    text = `${fmt(out)} ${b.value}`;
+  }
+
+  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), scaleNote, error),
+      stack(panel("Result", stats), factor, panel("All units", scroll))
+    ),
+    foot: actions(swap, copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };