mevebu 2.3.0 → 2.5.0

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

@@ -0,0 +1,111 @@
+// Compares two JSON documents by path, so a reformatted file does not look
+// like a rewrite.
+import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+
+const EXAMPLE_OLD = '{\n  "name": "mevebu",\n  "tools": 220,\n  "tags": ["offline", "browser"]\n}';
+const EXAMPLE_NEW = '{\n  "name": "mevebu",\n  "tools": 225,\n  "tags": ["offline", "browser", "free"],\n  "license": "MIT"\n}';
+
+const kindLabel = { added: "Added", removed: "Removed", changed: "Changed" };
+
+function isObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function walk(oldValue, newValue, path, output) {
+  if (Array.isArray(oldValue) && Array.isArray(newValue)) {
+    const length = Math.max(oldValue.length, newValue.length);
+    for (let index = 0; index < length; index++) {
+      const child = `${path}[${index}]`;
+      if (index >= oldValue.length) output.push({ kind: "added", path: child, after: newValue[index] });
+      else if (index >= newValue.length) output.push({ kind: "removed", path: child, before: oldValue[index] });
+      else walk(oldValue[index], newValue[index], child, output);
+    }
+    return;
+  }
+  if (isObject(oldValue) && isObject(newValue)) {
+    const keys = new Set([...Object.keys(oldValue), ...Object.keys(newValue)]);
+    for (const key of keys) {
+      const child = path ? `${path}.${key}` : key;
+      if (!(key in newValue)) output.push({ kind: "removed", path: child, before: oldValue[key] });
+      else if (!(key in oldValue)) output.push({ kind: "added", path: child, after: newValue[key] });
+      else walk(oldValue[key], newValue[key], child, output);
+    }
+    return;
+  }
+  if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
+    output.push({ kind: "changed", path, before: oldValue, after: newValue });
+  }
+}
+
+const show = (value) => {
+  if (value === undefined) return "";
+  const text = JSON.stringify(value);
+  return text.length > 80 ? `${text.slice(0, 77)}...` : text;
+};
+
+export function mount(slot) {
+  const before = textArea({ rows: 10, "aria-label": "Old JSON", value: EXAMPLE_OLD });
+  const after = textArea({ rows: 10, "aria-label": "New JSON", value: EXAMPLE_NEW });
+  const error = notice("error");
+  const list = el("div", { class: "grid gap-2" });
+  const summary = el("div", { class: "flex flex-wrap gap-2 text-2xs font-semibold" });
+  let rows = [];
+
+  function run() {
+    error.write("");
+    rows = [];
+    if (!before.value.trim() || !after.value.trim()) {
+      list.replaceChildren(el("p", { class: "text-sm text-ink-3" }, "Paste both documents."));
+      summary.replaceChildren();
+      return;
+    }
+    let oldValue;
+    let newValue;
+    try {
+      oldValue = JSON.parse(before.value);
+      newValue = JSON.parse(after.value);
+    } catch (caught) {
+      list.replaceChildren();
+      summary.replaceChildren();
+      error.write(caught.message);
+      return;
+    }
+    walk(oldValue, newValue, "$", rows);
+    const counts = rows.reduce((total, row) => ({ ...total, [row.kind]: (total[row.kind] ?? 0) + 1 }), {});
+    summary.replaceChildren(...["added", "removed", "changed"].map((kind) =>
+      el("span", { class: `rounded-full border px-2.5 py-1 ${kind === "added" ? "border-emerald-500/40 text-emerald-600 dark:text-emerald-400" : kind === "removed" ? "border-rose-500/40 text-rose-600 dark:text-rose-400" : "border-amber-500/40 text-amber-600 dark:text-amber-400"}` },
+        `${counts[kind] ?? 0} ${kind}`)));
+    if (!rows.length) {
+      list.replaceChildren(el("p", { class: "text-sm text-ink-2" }, "No differences."));
+      return;
+    }
+    list.replaceChildren(...rows.map((row) =>
+      el("div", { class: "grid gap-1 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+        el("div", { class: "flex flex-wrap items-baseline gap-2" },
+          el("span", { class: "rounded-full border border-orbit px-2 py-0.5 text-2xs font-semibold text-ink-2" }, kindLabel[row.kind]),
+          el("code", { class: "wrap-anywhere text-sm font-semibold" }, row.path)),
+        el("p", { class: "wrap-anywhere font-mono text-xs text-ink-2" },
+          row.kind === "added" ? show(row.after)
+            : row.kind === "removed" ? show(row.before)
+              : `${show(row.before)} -> ${show(row.after)}`))));
+  }
+
+  before.addEventListener("input", run);
+  after.addEventListener("input", run);
+
+  const report = () => rows.map((row) => `${kindLabel[row.kind]}: ${row.path}`).join("\n");
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Old", before), panel("New", after), error),
+      stack(panel("Changes", el("div", { class: "grid gap-2" }, summary, list))),
+    ),
+    foot: actions(copyButton(report, "Copy report", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/json-path-tester.js

@@ -0,0 +1,215 @@
+// Runs a documented JSONPath subset against a document. No library, no
+// network: the parser and the evaluator live here.
+import { el, bench, stack, panel, textArea, textInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+const EXAMPLE = '{\n  "items": [\n    { "name": "pen", "price": 2 },\n    { "name": "lamp", "price": 18 },\n    { "name": "desk", "price": 120 }\n  ],\n  "meta": { "currency": "USD" }\n}';
+
+function tokenizePath(expr) {
+  if (!expr.startsWith("$")) throw new Error("Start with $.");
+  const steps = [];
+  let i = 1;
+  while (i < expr.length) {
+    const ch = expr[i];
+    if (ch === ".") {
+      if (expr[i + 1] === ".") {
+        let end = i + 2;
+        while (end < expr.length && /[\w$-]/.test(expr[end])) end++;
+        const name = expr.slice(i + 2, end);
+        if (!name) throw new Error("Expected a name after ..");
+        steps.push({ kind: "descend", name });
+        i = end;
+      } else {
+        let end = i + 1;
+        if (expr[end] === "*") {
+          steps.push({ kind: "wildcard" });
+          i = end + 1;
+          continue;
+        }
+        while (end < expr.length && /[\w$-]/.test(expr[end])) end++;
+        const name = expr.slice(i + 1, end);
+        if (!name) throw new Error("Expected a name after .");
+        steps.push({ kind: "child", name });
+        i = end;
+      }
+      continue;
+    }
+    if (ch === "[") {
+      let end = i + 1;
+      let quote = null;
+      while (end < expr.length) {
+        const c = expr[end];
+        if (quote) { if (c === quote) quote = null; }
+        else if (c === "'" || c === '"') quote = c;
+        else if (c === "]") break;
+        end++;
+      }
+      if (end >= expr.length) throw new Error("Expected ].");
+      const body = expr.slice(i + 1, end).trim();
+      if (body === "*") steps.push({ kind: "wildcard" });
+      else if (/^['"]/.test(body)) steps.push({ kind: "child", name: body.slice(1, -1) });
+      else if (body.startsWith("?(") && body.endsWith(")")) steps.push({ kind: "filter", test: body.slice(2, -1).trim() });
+      else if (/^-?\d+$/.test(body)) steps.push({ kind: "index", index: Number(body) });
+      else if (/^-?\d*:-?\d*$/.test(body)) {
+        const [from, to] = body.split(":");
+        steps.push({ kind: "slice", from: from === "" ? null : Number(from), to: to === "" ? null : Number(to) });
+      } else throw new Error(`Unknown selector [${body}].`);
+      i = end + 1;
+      continue;
+    }
+    throw new Error(`Unexpected ${ch}.`);
+  }
+  return steps;
+}
+
+function readField(value, path) {
+  const parts = path.split(".").filter(Boolean);
+  let current = value;
+  for (const part of parts) {
+    if (current === null || typeof current !== "object") return undefined;
+    current = current[part];
+  }
+  return current;
+}
+
+function makeTest(source) {
+  const match = source.match(/^@((?:\.[\w$-]+)+)\s*(?:(>=|<=|==|!=|>|<)\s*(.+))?$/);
+  if (!match) throw new Error("Filter must look like @.price > 10.");
+  const [, path, operator, raw] = match;
+  let expected;
+  if (operator) {
+    const text = raw.trim();
+    if (/^-?\d+(?:\.\d+)?$/.test(text)) expected = Number(text);
+    else if (text === "true" || text === "false") expected = text === "true";
+    else if (text === "null") expected = null;
+    else expected = text.replace(/^['"]|['"]$/g, "");
+  }
+  return (value) => {
+    const actual = readField(value, path.slice(1));
+    if (!operator) return Boolean(actual);
+    if (actual === undefined) return false;
+    if (operator === "==") return actual === expected;
+    if (operator === "!=") return actual !== expected;
+    if (operator === ">") return actual > expected;
+    if (operator === "<") return actual < expected;
+    if (operator === ">=") return actual >= expected;
+    return actual <= expected;
+  };
+}
+
+function select(step, entries) {
+  const output = [];
+  for (const entry of entries) {
+    const value = entry.value;
+    const path = entry.path;
+    if (step.kind === "child") {
+      if (value !== null && typeof value === "object" && step.name in value) {
+        output.push({ path: `${path}.${step.name}`, value: value[step.name] });
+      }
+    } else if (step.kind === "index") {
+      if (Array.isArray(value)) {
+        const index = step.index < 0 ? value.length + step.index : step.index;
+        if (index >= 0 && index < value.length) output.push({ path: `${path}[${index}]`, value: value[index] });
+      }
+    } else if (step.kind === "slice") {
+      if (Array.isArray(value)) {
+        const from = step.from ?? 0;
+        const to = step.to ?? value.length;
+        const start = from < 0 ? Math.max(value.length + from, 0) : from;
+        value.slice(from, to).forEach((item, offset) =>
+          output.push({ path: `${path}[${start + offset}]`, value: item }));
+      }
+    } else if (step.kind === "wildcard") {
+      if (Array.isArray(value)) value.forEach((item, index) => output.push({ path: `${path}[${index}]`, value: item }));
+      else if (value !== null && typeof value === "object") {
+        Object.entries(value).forEach(([key, item]) => output.push({ path: `${path}.${key}`, value: item }));
+      }
+    } else if (step.kind === "filter") {
+      const test = makeTest(step.test);
+      if (Array.isArray(value)) value.forEach((item, index) => {
+        if (item !== null && typeof item === "object" && test(item)) output.push({ path: `${path}[${index}]`, value: item });
+      });
+    } else if (step.kind === "descend") {
+      const visit = (node, at) => {
+        if (node === null || typeof node !== "object") return;
+        for (const [key, item] of Object.entries(node)) {
+          const childPath = Array.isArray(node) ? `${at}[${key}]` : `${at}.${key}`;
+          if (step.name === "*" || key === step.name) output.push({ path: childPath, value: item });
+          visit(item, childPath);
+        }
+      };
+      visit(value, path);
+    }
+  }
+  return output;
+}
+
+const show = (value) => {
+  const text = JSON.stringify(value) ?? String(value);
+  return text.length > 90 ? `${text.slice(0, 87)}...` : text;
+};
+
+export function mount(slot) {
+  const source = textArea({ rows: 13, "aria-label": "JSON", value: EXAMPLE });
+  const expression = textInput({ value: "$.items[?(@.price > 10)].name", "aria-label": "JSONPath", class: "font-mono" });
+  const error = notice("error");
+  const list = el("div", { class: "grid gap-2" });
+  const count = el("p", { class: "text-sm text-ink-3" });
+  let results = [];
+
+  function run() {
+    error.write("");
+    results = [];
+    if (!source.value.trim() || !expression.value.trim()) {
+      list.replaceChildren();
+      count.textContent = "";
+      return;
+    }
+    let document;
+    try {
+      document = JSON.parse(source.value);
+    } catch (caught) {
+      error.write(caught.message);
+      list.replaceChildren();
+      count.textContent = "";
+      return;
+    }
+    try {
+      let entries = [{ path: "$", value: document }];
+      for (const step of tokenizePath(expression.value.trim())) entries = select(step, entries);
+      results = entries;
+    } catch (caught) {
+      error.write(caught.message);
+      list.replaceChildren();
+      count.textContent = "";
+      return;
+    }
+    count.textContent = `${results.length} ${results.length === 1 ? "match" : "matches"}`;
+    if (!results.length) {
+      list.replaceChildren(el("p", { class: "text-sm text-ink-2" }, "No match."));
+      return;
+    }
+    list.replaceChildren(...results.map((row) =>
+      el("div", { class: "grid gap-1 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+        el("code", { class: "wrap-anywhere text-sm font-semibold" }, row.path),
+        el("p", { class: "wrap-anywhere font-mono text-xs text-ink-2" }, show(row.value)))));
+  }
+
+  source.addEventListener("input", run);
+  expression.addEventListener("input", run);
+
+  const report = () => results.map((row) => `${row.path}: ${JSON.stringify(row.value)}`).join("\n");
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("JSON", source), panel("JSONPath", expression), error),
+      stack(panel("Matches", el("div", { class: "grid gap-2" }, count, list))),
+    ),
+    foot: actions(copyButton(report, "Copy matches", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,59 @@
+// Converts JSON to YAML with a vendored writer. Block style by default, flow
+// style on request.
+import { bench, stack, panel, textArea, output, notice, chipRow, downloadButton, copyButton, actions, toolcard } from "../core.js";
+import { dump } from "../vendor/js-yaml.mjs";
+
+const EXAMPLE = '{\n  "service": "api",\n  "replicas": 2,\n  "ports": [8080, 8443],\n  "labels": { "tier": "backend" }\n}';
+
+export function mount(slot) {
+  const source = textArea({ rows: 14, "aria-label": "JSON", value: EXAMPLE });
+  const result = output({ tag: "textarea", rows: 12 });
+  const error = notice("error");
+  let style = "block";
+
+  const chips = chipRow(
+    [{ value: "block", label: "Block" }, { value: "flow", label: "Flow" }],
+    { value: "block", label: "Style", onChange: (value) => { style = value; run(); } },
+  );
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    let value;
+    try {
+      value = JSON.parse(source.value);
+    } catch (caught) {
+      result.value = "";
+      error.write(caught.message);
+      return;
+    }
+    result.value = dump(value, {
+      indent: 2,
+      lineWidth: -1,
+      noRefs: true,
+      flowLevel: style === "flow" ? 0 : -1,
+    });
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Style", chips), panel("JSON", source), error),
+      stack(panel("YAML", result)),
+    ),
+    foot: actions(
+      downloadButton(() => result.value, "data.yaml", "Download", "text/yaml"),
+      copyButton(() => result.value, "Copy YAML", "fill"),
+    ),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/regex-cheatsheet.js

@@ -0,0 +1,100 @@
+// A searchable reference for JavaScript regular expressions. Each row shows
+// the token, what it matches, and an example with the match highlighted.
+import { el, bench, stack, panel, textInput, toolcard } from "../core.js";
+
+const ROWS = [
+  { token: ".", meaning: "Any character except a newline.", pattern: "a.c", example: "abc adc a\nc" },
+  { token: "\\d", meaning: "A digit, 0 to 9.", pattern: "\\d+", example: "Order 42 shipped" },
+  { token: "\\D", meaning: "Anything that is not a digit.", pattern: "\\D+", example: "42 and 7" },
+  { token: "\\w", meaning: "A letter, digit or underscore.", pattern: "\\w+", example: "hello_world!" },
+  { token: "\\W", meaning: "Anything that is not a word character.", pattern: "\\W+", example: "a-b c" },
+  { token: "\\s", meaning: "A space, tab or line break.", pattern: "\\s", example: "a b\tc" },
+  { token: "\\S", meaning: "Anything that is not whitespace.", pattern: "\\S+", example: "  keep  this" },
+  { token: "^", meaning: "The start of the string, or of a line with m.", pattern: "^abc", example: "abc abc" },
+  { token: "$", meaning: "The end of the string, or of a line with m.", pattern: "abc$", example: "abc abc" },
+  { token: "*", meaning: "Zero or more of the previous token.", pattern: "ab*", example: "a ab abb" },
+  { token: "+", meaning: "One or more of the previous token.", pattern: "ab+", example: "a ab abb" },
+  { token: "?", meaning: "Zero or one of the previous token.", pattern: "colou?r", example: "color colour" },
+  { token: "{n,m}", meaning: "Between n and m repeats.", pattern: "\\d{2,3}", example: "5 42 1234" },
+  { token: "[abc]", meaning: "One character from the set.", pattern: "[aeiou]", example: "mevebu" },
+  { token: "[^abc]", meaning: "One character outside the set.", pattern: "[^aeiou]", example: "mevebu" },
+  { token: "[a-z]", meaning: "One character from a range.", pattern: "[a-c]+", example: "abcxyz" },
+  { token: "(...)", meaning: "A capturing group.", pattern: "(\\d{4})-(\\d{2})", example: "2026-10-20" },
+  { token: "(?:...)", meaning: "A group that is not captured.", pattern: "(?:cat|dog)s", example: "cats dogs" },
+  { token: "(?<name>...)", meaning: "A named capturing group.", pattern: "(?<year>\\d{4})", example: "in 2026" },
+  { token: "\\b", meaning: "A word boundary.", pattern: "\\bcat\\b", example: "cat scatter cat" },
+  { token: "|", meaning: "Either the left or the right side.", pattern: "cat|dog", example: "cat dog cow" },
+  { token: "\\.", meaning: "A literal dot, escaped.", pattern: "\\d+\\.\\d+", example: "3.14 and 42" },
+  { token: "(?=...)", meaning: "Lookahead: what comes next.", pattern: "\\d+(?= USD)", example: "10 USD 20 EUR" },
+  { token: "(?<=...)", meaning: "Lookbehind: what came before.", pattern: "(?<=\\$)\\d+", example: "$5 and €7" },
+  { token: "*?", meaning: "Lazy: match as little as possible.", pattern: "<.+?>", example: "<a><b>" },
+  { token: "i", meaning: "Ignore case. A flag, not a token.", pattern: "[a-z]+", flags: "gi", example: "AbC abc" },
+  { token: "g", meaning: "Find every match, not just the first.", pattern: "\\d+", flags: "g", example: "1 22 333" },
+  { token: "m", meaning: "Make ^ and $ work per line.", pattern: "^\\w+", flags: "gm", example: "one\ntwo" },
+  { token: "s", meaning: "Let . match a newline too.", pattern: "a.b", flags: "s", example: "a\nb" },
+  { token: "u", meaning: "Unicode mode, for full code points.", pattern: "\\u{1F600}", flags: "u", example: "hi \u{1F600}" },
+];
+
+function highlight(example, pattern, flags = "") {
+  let regex;
+  try {
+    regex = new RegExp(pattern, flags.includes("g") ? flags : `${flags}g`);
+  } catch {
+    return [document.createTextNode(example)];
+  }
+  const nodes = [];
+  let last = 0;
+  for (const match of example.matchAll(regex)) {
+    if (match.index > last) nodes.push(document.createTextNode(example.slice(last, match.index)));
+    if (!match[0]) break;
+    nodes.push(el("mark", { class: "rounded-xs bg-amber-300/60 px-0.5 text-inherit dark:bg-amber-400/40" }, match[0]));
+    last = match.index + match[0].length;
+  }
+  if (last < example.length) nodes.push(document.createTextNode(example.slice(last)));
+  return nodes;
+}
+
+export function mount(slot) {
+  const search = textInput({ placeholder: "Filter tokens", "aria-label": "Filter" });
+  const list = el("div", { class: "grid gap-2" });
+
+  function render() {
+    const query = search.value.trim().toLowerCase();
+    const rows = ROWS.filter((row) =>
+      !query || row.token.toLowerCase().includes(query) || row.meaning.toLowerCase().includes(query));
+    if (!rows.length) {
+      list.replaceChildren(el("p", { class: "text-sm text-ink-2" }, "No token matches that."));
+      return;
+    }
+    list.replaceChildren(...rows.map((row) =>
+      el("div", { class: "grid gap-1.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+        el("div", { class: "flex flex-wrap items-baseline gap-2" },
+          el("code", { class: "rounded-xs border border-orbit bg-deck px-1.5 py-0.5 font-mono text-sm font-semibold" }, row.token),
+          el("span", { class: "text-sm text-ink-2" }, row.meaning)),
+        el("p", { class: "font-mono text-sm" },
+          ...highlight(row.example, row.pattern, row.flags)),
+        el("div", { class: "flex flex-wrap items-center gap-2 text-xs text-ink-3" },
+          el("code", { class: "font-mono" }, `/${row.pattern}/${row.flags ?? ""}`),
+          el("a", { href: "#/developer/regex-tester", class: "underline decoration-dotted underline-offset-2 hover:text-ink-2" }, "Try it")))));
+  }
+
+  search.addEventListener("input", render);
+
+  const link = el("p", { class: "text-sm text-ink-3" },
+    "Matches are JavaScript flavoured. Open ",
+    el("a", { href: "#/developer/regex-tester", class: "underline decoration-dotted underline-offset-2 hover:text-ink-2" }, "Regex Tester"),
+    " to run a full pattern.");
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Find a token", search), link),
+      stack(panel("Tokens", list)),
+    ),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/xml-minifier.js

@@ -0,0 +1,103 @@
+// Compacts XML by dropping indentation between tags. CDATA, comments,
+// processing instructions and attribute values are copied unchanged.
+import { el, bench, stack, panel, textArea, output, notice, copyButton, actions, toolcard } from "../core.js";
+import { bytes } from "../js-tokens.js";
+
+const EXAMPLE = '<?xml version="1.0"?>\n<config>\n  <server host="localhost" port="8080">\n    <name>api</name>\n  </server>\n  <note><![CDATA[keep  this  spacing]]></note>\n</config>';
+
+const tile = (key, value) =>
+  el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+    el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, value),
+    el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
+
+function minify(source) {
+  let out = "";
+  let i = 0;
+
+  while (i < source.length) {
+    if (source.startsWith("<![CDATA[", i)) {
+      const end = source.indexOf("]]>", i + 9);
+      if (end === -1) return { error: "Unclosed CDATA section." };
+      out += source.slice(i, end + 3);
+      i = end + 3;
+      continue;
+    }
+    if (source.startsWith("<!--", i)) {
+      const end = source.indexOf("-->", i + 4);
+      if (end === -1) return { error: "Unclosed comment." };
+      out += source.slice(i, end + 3);
+      i = end + 3;
+      continue;
+    }
+    if (source[i] === "<") {
+      let j = i + 1;
+      let quote = null;
+      while (j < source.length) {
+        const ch = source[j];
+        if (quote) {
+          if (ch === quote) quote = null;
+        } else if (ch === '"' || ch === "'") {
+          quote = ch;
+        } else if (ch === ">") {
+          break;
+        }
+        j++;
+      }
+      if (j >= source.length) return { error: "Unclosed tag." };
+      out += source.slice(i, j + 1);
+      i = j + 1;
+      continue;
+    }
+
+    let j = source.indexOf("<", i);
+    if (j === -1) j = source.length;
+    const text = source.slice(i, j);
+    if (!/^\s+$/.test(text) || !text.includes("\n")) out += text;
+    i = j;
+  }
+
+  return { text: out };
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 14, "aria-label": "XML", value: EXAMPLE });
+  const result = output({ tag: "textarea", rows: 12 });
+  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" });
+  const error = notice("error");
+
+  function run() {
+    error.write("");
+    stats.replaceChildren();
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    const output = minify(source.value);
+    if (output.error) {
+      result.value = "";
+      error.write(output.error);
+      return;
+    }
+    const before = bytes(source.value);
+    const after = bytes(output.text);
+    const saved = before ? Math.max(0, Math.round((1 - after / before) * 100)) : 0;
+    result.value = output.text;
+    stats.append(tile("Before", `${before} B`), tile("After", `${after} B`), tile("Saved", `${saved}%`));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("XML", source), error),
+      stack(panel("Minified", result), stats),
+    ),
+    foot: actions(copyButton(() => result.value, "Copy XML", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,46 @@
+// Converts YAML to JSON with a vendored parser. Anchors are resolved and the
+// key order is kept.
+import { bench, stack, panel, textArea, output, notice, downloadButton, copyButton, actions, toolcard } from "../core.js";
+import { load } from "../vendor/js-yaml.mjs";
+
+const EXAMPLE = "service: api\nreplicas: 2\nports:\n  - 8080\n  - 8443\nlabels:\n  tier: backend";
+
+export function mount(slot) {
+  const source = textArea({ rows: 14, "aria-label": "YAML", value: EXAMPLE });
+  const result = output({ tag: "textarea", rows: 12 });
+  const error = notice("error");
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    try {
+      result.value = JSON.stringify(load(source.value), null, 2);
+    } catch (caught) {
+      result.value = "";
+      const line = caught.mark?.line;
+      const where = typeof line === "number" ? `Line ${line + 1}: ` : "";
+      error.write(`${where}${caught.reason ?? caught.message}`);
+    }
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("YAML", source), error),
+      stack(panel("JSON", result)),
+    ),
+    foot: actions(
+      downloadButton(() => result.value, "data.json", "Download", "application/json"),
+      copyButton(() => result.value, "Copy JSON", "fill"),
+    ),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/vendor/js-yaml.LICENSE

@@ -0,0 +1,21 @@
+(The MIT License)
+
+Copyright (C) 2011-2015 by Vitaly Puzrin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.