mevebu 0.3.1 → 1.0.0

package/mevebu/libs/js/tools/time-format-converter.js

@@ -0,0 +1,86 @@
+// Switches times between 12 and 24 hour format, one time per line.
+import { bench, stack, panel, textArea, chipRow, notice, output, copyButton, actions, toolcard } from "../core.js";
+
+const pad = (n) => String(n).padStart(2, "0");
+
+function read24(line) {
+  const match = /^(\d{1,2}):(\d{2})$/.exec(line);
+  if (!match) return null;
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  if (hours > 23 || minutes > 59) return null;
+  return { hours, minutes };
+}
+
+function read12(line) {
+  const match = /^(\d{1,2}):(\d{2})\s*([ap])\.?m\.?$/i.exec(line);
+  if (!match) return null;
+  let hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  const half = match[3].toLowerCase();
+  if (hours < 1 || hours > 12 || minutes > 59) return null;
+  if (half === "p" && hours !== 12) hours += 12;
+  if (half === "a" && hours === 12) hours = 0;
+  return { hours, minutes };
+}
+
+function to24({ hours, minutes }) {
+  return `${pad(hours)}:${pad(minutes)}`;
+}
+
+function to12({ hours, minutes }) {
+  const half = hours < 12 ? "AM" : "PM";
+  let clock = hours % 12;
+  if (clock === 0) clock = 12;
+  return `${clock}:${pad(minutes)} ${half}`;
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 8, value: "13:05\n00:30\n9:45 PM", "aria-label": "Times, one per line", placeholder: "13:05" });
+  const target = output({ value: "", rows: 8 });
+  const error = notice("error");
+  let format = "24";
+  let text = "";
+
+  const picker = chipRow(
+    [{ value: "24", label: "24 hour input" }, { value: "12", label: "12 hour input" }],
+    { value: format, label: "Input format", onChange: (value) => { format = value; run(); } }
+  );
+
+  function run() {
+    error.write("");
+    const lines = source.value.split("\n");
+    const out = [];
+    let bad = 0;
+    for (const raw of lines) {
+      const line = raw.trim();
+      if (!line) continue;
+      const parsed = format === "24" ? read24(line) : read12(line);
+      if (!parsed) {
+        bad += 1;
+        out.push(line);
+        continue;
+      }
+      out.push(format === "24" ? to12(parsed) : to24(parsed));
+    }
+    target.write(out.join("\n"));
+    text = out.join("\n");
+    if (bad) error.write(`${bad} lines could not be read.`);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Input format", picker), panel("Times", source), error),
+      stack(panel("Converted", target))
+    ),
+    foot: actions(copyButton(() => text, "Copy times", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,85 @@
+// Converts between Unix time and dates. Reads seconds or milliseconds.
+import { el, bench, stack, panel, textInput, notice, button, copyButton, actions, toolcard } from "../core.js";
+
+function relative(date) {
+  const diff = Date.now() - date.getTime();
+  const abs = Math.abs(diff);
+  const units = [
+    ["year", 31536000000], ["month", 2592000000], ["day", 86400000],
+    ["hour", 3600000], ["minute", 60000], ["second", 1000],
+  ];
+  for (const [unit, ms] of units) {
+    if (abs >= ms) {
+      const value = Math.round(abs / ms);
+      const word = `${value} ${unit}${value === 1 ? "" : "s"}`;
+      return diff >= 0 ? `${word} ago` : `in ${word}`;
+    }
+  }
+  return "now";
+}
+
+function parse(text) {
+  const value = text.trim();
+  if (!value) return null;
+  if (/^-?\d+(\.\d+)?$/.test(value)) {
+    const num = Number(value);
+    const ms = Math.abs(num) < 1e11 ? num * 1000 : num;
+    const date = new Date(ms);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+const row = (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: "1700000000", "aria-label": "Timestamp or date", placeholder: "1700000000 or 2026-01-01T00:00:00Z" });
+  const kv = el("div", { class: "mvb-kv" });
+  const error = notice("error");
+  let iso = "";
+
+  function run() {
+    error.write("");
+    kv.replaceChildren();
+    iso = "";
+    if (!source.value.trim()) return;
+    const date = parse(source.value);
+    if (!date) {
+      error.write("That is not a timestamp or a date this browser can read.");
+      return;
+    }
+    iso = date.toISOString();
+    kv.append(
+      row("ISO 8601", iso),
+      row("Unix seconds", String(Math.floor(date.getTime() / 1000))),
+      row("Unix milliseconds", String(date.getTime())),
+      row("UTC", date.toUTCString()),
+      row("Local", date.toLocaleString()),
+      row("Relative", relative(date))
+    );
+  }
+
+  source.addEventListener("input", run);
+
+  const nowButton = button("Use current time", { icon: "clock" });
+  nowButton.addEventListener("click", () => {
+    source.value = String(Math.floor(Date.now() / 1000));
+    run();
+  });
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Timestamp or date", source), error),
+      stack(panel("Reading", kv))
+    ),
+    foot: actions(nowButton, copyButton(() => iso, "Copy ISO 8601", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,163 @@
+// Converts a wall clock time from one zone to another using the browser's zone rules.
+import { el, bench, stack, panel, textInput, selectInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+const FALLBACK_ZONES = [
+  "UTC",
+  "America/New_York",
+  "America/Chicago",
+  "America/Denver",
+  "America/Los_Angeles",
+  "America/Sao_Paulo",
+  "Europe/London",
+  "Europe/Paris",
+  "Europe/Berlin",
+  "Europe/Moscow",
+  "Africa/Cairo",
+  "Asia/Dubai",
+  "Asia/Kolkata",
+  "Asia/Shanghai",
+  "Asia/Tokyo",
+  "Asia/Singapore",
+  "Australia/Sydney",
+];
+
+function zoneList() {
+  let zones = FALLBACK_ZONES;
+  if (typeof Intl.supportedValuesOf === "function") {
+    try {
+      const supported = Intl.supportedValuesOf("timeZone");
+      if (Array.isArray(supported) && supported.length) zones = supported;
+    } catch {
+      zones = FALLBACK_ZONES;
+    }
+  }
+  const out = zones.slice();
+  if (!out.includes("UTC")) out.unshift("UTC");
+  const local = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  if (local && !out.includes(local)) out.unshift(local);
+  return out;
+}
+
+function parseDate(value) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match) return null;
+  const year = Number(match[1]);
+  const month = Number(match[2]) - 1;
+  const day = Number(match[3]);
+  const date = new Date(year, month, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) return null;
+  return { year, month, day };
+}
+
+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, minutes };
+}
+
+function offsetMs(timeZone, date) {
+  const parts = {};
+  const format = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    hourCycle: "h23",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+  for (const part of format.formatToParts(date)) parts[part.type] = part.value;
+  const hour = parts.hour === "24" ? 0 : Number(parts.hour);
+  const asUTC = Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day), hour, Number(parts.minute), Number(parts.second));
+  return asUTC - date.getTime();
+}
+
+function wallToInstant(day, time, timeZone) {
+  const guess = Date.UTC(day.year, day.month, day.day, time.hours, time.minutes);
+  const offset = offsetMs(timeZone, new Date(guess));
+  return new Date(guess - offset);
+}
+
+const pad = (n) => String(n).padStart(2, "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 zones = zoneList();
+  const today = new Date();
+  const date = textInput({ type: "date", value: `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`, "aria-label": "Date" });
+  const time = textInput({ type: "time", value: "12:00", "aria-label": "Time" });
+  const fromZone = selectInput(zones, { value: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC", "aria-label": "Source zone" });
+  const toZone = selectInput(zones, { value: "UTC", "aria-label": "Target zone" });
+
+  const target = el("span", { class: "mvb-kv__v" }, "-");
+  const utc = el("span", { class: "mvb-kv__v" }, "-");
+  const diff = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el("div", { class: "mvb-kv" }, kvRow("Target time", target), kvRow("UTC", utc), kvRow("Offset", diff));
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    target.textContent = "-";
+    utc.textContent = "-";
+    diff.textContent = "-";
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const day = parseDate(date.value);
+    const clock = parseTime(time.value);
+    if (!day || !clock) {
+      clear();
+      error.write("Pick a valid date and time.");
+      return;
+    }
+    try {
+      const instant = wallToInstant(day, clock, fromZone.value);
+      const formatted = new Intl.DateTimeFormat(undefined, {
+        timeZone: toZone.value,
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      }).format(instant);
+      const utcText = `${instant.getUTCFullYear()}-${pad(instant.getUTCMonth() + 1)}-${pad(instant.getUTCDate())} ${pad(instant.getUTCHours())}:${pad(instant.getUTCMinutes())} UTC`;
+      const deltaHours = (offsetMs(toZone.value, instant) - offsetMs(fromZone.value, instant)) / 3600000;
+      const sign = deltaHours > 0 ? "+" : deltaHours < 0 ? "-" : "";
+      const diffText = deltaHours === 0 ? "Same offset" : `${sign}${Math.abs(deltaHours)} hours`;
+      target.textContent = formatted;
+      utc.textContent = utcText;
+      diff.textContent = diffText;
+      text = `${formatted} (${toZone.value})`;
+    } catch {
+      clear();
+      error.write("That zone could not be resolved.");
+    }
+  }
+
+  for (const input of [date, time]) input.addEventListener("input", run);
+  fromZone.addEventListener("change", run);
+  toZone.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Date", date), panel("Time", time), panel("From", fromZone), panel("To", toZone), 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/title-length.js

@@ -0,0 +1,67 @@
+// Several titles compared by length, longest first.
+import { el, blank, bench, stack, panel, textArea, numberInput, copyButton, actions, toolcard } from "../core.js";
+
+const countWords = (text) => (text.trim() ? text.trim().split(/\s+/).length : 0);
+
+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: 10, "aria-label": "Titles", placeholder: "One title per line" });
+  const limit = numberInput({ min: "0", value: "60", "aria-label": "Character limit" });
+
+  const titlesTile = tile("Titles");
+  const overTile = tile("Over the limit");
+  const longestTile = tile("Longest");
+  const stats = el("div", { class: "mvb-stats" }, titlesTile, overTile, longestTile);
+
+  const listWrap = el("div", { class: "mvb-scroll" });
+  let listText = "";
+
+  function run() {
+    const cap = parseInt(limit.value, 10) || 0;
+    const titles = source.value.split("\n").map((line) => line.trim()).filter(Boolean);
+    const items = titles.map((title) => ({ title, chars: title.length, words: countWords(title) }));
+    items.sort((a, b) => b.chars - a.chars);
+
+    titlesTile.set(String(items.length));
+    overTile.set(String(cap > 0 ? items.filter((item) => item.chars > cap).length : 0));
+    longestTile.set(String(items.length ? items[0].chars : 0));
+
+    if (!items.length) {
+      listWrap.replaceChildren(blank("type", "No titles yet."));
+      listText = "";
+      return;
+    }
+
+    const rows = items.map((item) => el("tr", {},
+      el("th", {}, item.title),
+      el("td", {}, cap > 0 && item.chars > cap ? `${item.chars} over` : String(item.chars)),
+      el("td", {}, String(item.words))));
+    listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Title"), el("th", {}, "Characters"), el("th", {}, "Words"))),
+      el("tbody", {}, ...rows)));
+    listText = items.map((item) => `${item.chars} characters, ${item.words} words  ${item.title}`).join("\n");
+  }
+
+  source.addEventListener("input", run);
+  limit.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Titles", source), panel("Character limit", limit)),
+      stack(stats, panel("By length", listWrap))
+    ),
+    foot: actions(copyButton(() => listText, "Copy list", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/unicode-escape.js

@@ -0,0 +1,80 @@
+// Turns characters into Unicode escape sequences and back.
+import { bench, stack, panel, textArea, output, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+function encode(text) {
+  return Array.from(text).map((char) => {
+    const point = char.codePointAt(0);
+    return point <= 0xffff
+      ? `\\u${point.toString(16).toUpperCase().padStart(4, "0")}`
+      : `\\u{${point.toString(16).toUpperCase()}}`;
+  }).join("");
+}
+
+function decode(text) {
+  let ok = true;
+  const out = text.replace(/\\u\{([0-9a-fA-F]+)\}|\\u([0-9a-fA-F]{4})|\\u/g, (match, braced, plain) => {
+    if (match === "\\u") {
+      ok = false;
+      return match;
+    }
+    const point = parseInt(braced ?? plain, 16);
+    if (point > 0x10ffff) {
+      ok = false;
+      return match;
+    }
+    return String.fromCodePoint(point);
+  });
+  return { ok, text: out };
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 7, value: "mevebu", "aria-label": "Input" });
+  const result = output({ value: "", rows: 7 });
+  const error = notice("error");
+  let mode = "encode";
+  let text = "";
+
+  const chips = chipRow(
+    [{ value: "encode", label: "Encode" }, { value: "decode", label: "Decode" }],
+    { value: "encode", label: "Direction", onChange: (value) => { mode = value; run(); } }
+  );
+
+  function run() {
+    error.write("");
+    if (!source.value) {
+      text = "";
+      result.write("");
+      return;
+    }
+    if (mode === "encode") {
+      text = encode(source.value);
+      result.write(text);
+      return;
+    }
+    const decoded = decode(source.value);
+    if (!decoded.ok) {
+      text = "";
+      result.write("");
+      error.write("That is not a valid escape sequence.");
+      return;
+    }
+    text = decoded.text;
+    result.write(text);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Direction", chips), panel("Input", source)),
+      stack(panel("Result", result), error)
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/unicode-inspector.js

@@ -0,0 +1,58 @@
+// Lists each character with its code point, decimal value and UTF-8 bytes.
+import { el, bench, stack, panel, textArea, copyButton, actions, toolcard } from "../core.js";
+
+const hex = (value, width) => value.toString(16).toUpperCase().padStart(width, "0");
+
+function describe(char) {
+  const point = char.codePointAt(0);
+  const bytes = [...new TextEncoder().encode(char)].map((byte) => hex(byte, 2)).join(" ");
+  return { char, point: `U+${hex(point, 4)}`, decimal: String(point), bytes };
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 8, value: "mevebu", "aria-label": "Text" });
+  const scroll = el("div", { class: "mvb-scroll" });
+  let rows = [];
+
+  function run() {
+    rows = Array.from(source.value).map(describe);
+    if (!rows.length) {
+      scroll.replaceChildren(el("p", { class: "mvb-note" }, "Type or paste text."));
+      return;
+    }
+    scroll.replaceChildren(el(
+      "table",
+      { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {},
+        el("th", {}, "Character"),
+        el("th", {}, "Code point"),
+        el("th", {}, "Decimal"),
+        el("th", {}, "UTF-8"))),
+      el("tbody", {}, ...rows.map((entry) => el("tr", {},
+        el("td", {}, entry.char),
+        el("td", {}, entry.point),
+        el("td", {}, entry.decimal),
+        el("td", {}, entry.bytes))))
+    ));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text", source)),
+      stack(panel("Characters", scroll))
+    ),
+    foot: actions(copyButton(
+      () => rows.map((entry) => `${entry.char}\t${entry.point}\t${entry.decimal}\t${entry.bytes}`).join("\n"),
+      "Copy table",
+      "fill"
+    )),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/url-inspector.js

@@ -0,0 +1,98 @@
+// Breaks a link into its parts and flags look-alike hosts before you open it.
+import { el, textInput, notice, copyButton, bench, stack, panel, actions, toolcard } from "../core.js";
+
+const IPV4 = /^\d{1,3}(\.\d{1,3}){3}$/;
+
+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: "https://example.com/login?next=/home", "aria-label": "URL" });
+  const scheme = el("span", { class: "mvb-kv__v" }, "-");
+  const host = el("span", { class: "mvb-kv__v" }, "-");
+  const port = el("span", { class: "mvb-kv__v" }, "-");
+  const path = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el(
+    "div",
+    { class: "mvb-kv" },
+    kvRow("Scheme", scheme),
+    kvRow("Host", host),
+    kvRow("Port", port),
+    kvRow("Path", path)
+  );
+  const flags = el("div", { class: "mvb-stack" });
+  const error = notice("error");
+  let summary = "";
+
+  function flag(kind, text) {
+    const node = notice(kind);
+    node.write(text);
+    flags.append(node);
+  }
+
+  function clear() {
+    for (const node of [scheme, host, port, path]) node.textContent = "-";
+    flags.replaceChildren();
+    summary = "";
+  }
+
+  function run() {
+    error.write("");
+    const raw = source.value.trim();
+    if (!raw) return clear();
+    let url;
+    try {
+      url = new URL(raw);
+    } catch {
+      clear();
+      error.write("That is not a valid URL.");
+      return;
+    }
+
+    scheme.textContent = url.protocol.replace(":", "");
+    host.textContent = url.hostname;
+    port.textContent = url.port || "default";
+    path.textContent = url.pathname + url.search;
+    summary = url.hostname;
+
+    flags.replaceChildren();
+    if (/[^\x00-\x7F]/.test(raw)) {
+      flag("warn", "The address contains non-Latin characters. The host below is the punycode form your browser would use.");
+    }
+    if (url.hostname.startsWith("xn--") || url.hostname.includes(".xn--")) {
+      flag("warn", "The host uses punycode (xn--). It can mix scripts to imitate a familiar name.");
+    }
+    if (url.username || url.password) {
+      flag("warn", `The part before the @ is not the host. The real host is ${url.hostname}.`);
+    }
+    if (IPV4.test(url.hostname) || url.hostname.startsWith("[")) {
+      flag("warn", "The link opens by IP address, not a domain name.");
+    }
+    if (url.protocol === "http:") {
+      flag("warn", "This link uses http, not https. Traffic is not encrypted.");
+    }
+    if (!flags.childElementCount) {
+      flag("good", "No look-alike characters or address tricks found.");
+    }
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("URL", source),
+        error,
+        el("p", { class: "mvb-note" }, "The link is read in this tab. Nothing is opened or requested.")
+      ),
+      stack(kv, panel("Checks", flags))
+    ),
+    foot: actions(copyButton(() => summary, "Copy host", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };