mevebu 0.3.0 → 0.4.0

package/mevebu/libs/js/tools/word-counter.js

@@ -0,0 +1,90 @@
+// Live word, character, sentence and line counts, plus an optional word limit
+// and a reading time estimate.
+import { el, bench, stack, panel, textArea, numberInput, notice, button, copyButton, actions, toolcard } from "../core.js";
+
+const WPM = 200;
+
+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;
+}
+
+const countSentences = (text) => text.trim()
+  ? text.trim().split(/[.!?\u2026]+/).filter((part) => part.trim()).length
+  : 0;
+
+export function mount(slot) {
+  const source = textArea({ rows: 10, "aria-label": "Text", placeholder: "Type or paste text" });
+  const limitField = numberInput({ min: "0", placeholder: "No limit", "aria-label": "Word limit" });
+
+  const wordsTile = tile("Words");
+  const charsTile = tile("Characters");
+  const sentencesTile = tile("Sentences");
+  const linesTile = tile("Lines");
+  const readingTile = tile("Reading time");
+  const stats = el("div", { class: "mvb-stats" }, wordsTile, charsTile, sentencesTile, linesTile, readingTile);
+
+  const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Word limit" }, el("div", { class: "mvb-meter__fill" }));
+  const limitNote = notice("note");
+  const fill = meter.querySelector(".mvb-meter__fill");
+
+  let counts = { words: 0, chars: 0, sentences: 0, lines: 0 };
+
+  function summary() {
+    return [
+      `${counts.words} words`,
+      `${counts.chars} characters`,
+      `${counts.sentences} sentences`,
+      `${counts.lines} lines`,
+    ].join("\n");
+  }
+
+  function run() {
+    const text = source.value;
+    const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+    counts = {
+      words,
+      chars: text.length,
+      sentences: countSentences(text),
+      lines: text ? text.split("\n").length : 0,
+    };
+    wordsTile.set(String(counts.words));
+    charsTile.set(String(counts.chars));
+    sentencesTile.set(String(counts.sentences));
+    linesTile.set(String(counts.lines));
+    readingTile.set(counts.words ? `${Math.max(1, Math.round(counts.words / WPM))} min` : "0 min");
+
+    const limit = parseInt(limitField.value, 10) || 0;
+    if (limit > 0) {
+      const ratio = words / limit;
+      fill.style.width = `${Math.min(100, ratio * 100)}%`;
+      fill.className = `mvb-meter__fill ${ratio > 1 ? "mvb-weak" : ratio > 0.8 ? "mvb-ok" : "mvb-strong"}`;
+      limitNote.write(ratio > 1 ? `${words - limit} over the limit.` : `${limit - words} words left.`);
+    } else {
+      fill.style.width = "0%";
+      fill.className = "mvb-meter__fill";
+      limitNote.write("");
+    }
+  }
+
+  const clearButton = button("Clear", { icon: "trash" });
+  clearButton.addEventListener("click", () => { source.value = ""; run(); });
+  limitField.addEventListener("input", run);
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text", source), panel("Word limit", limitField)),
+      stack(stats, meter, limitNote)
+    ),
+    foot: actions(clearButton, copyButton(summary, "Copy summary", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/word-limit.js

@@ -0,0 +1,60 @@
+// Checks text against a minimum and maximum word count.
+import { el, bench, stack, panel, textArea, numberInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+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;
+}
+
+const countWords = (text) => (text.trim() ? text.trim().split(/\s+/).length : 0);
+
+export function mount(slot) {
+  const source = textArea({ rows: 12, "aria-label": "Text", placeholder: "Paste your text" });
+  const min = numberInput({ value: "150", min: "0", "aria-label": "Minimum words" });
+  const max = numberInput({ value: "250", min: "0", "aria-label": "Maximum words" });
+  const wordsTile = tile("Words");
+  const minTile = tile("To minimum");
+  const maxTile = tile("To maximum");
+  const stats = el("div", { class: "mvb-stats" }, wordsTile, minTile, maxTile);
+  const status = notice("note");
+  const note = notice("note");
+  note.write("Each hyphenated word and each number counts as one word.");
+  let summary = "";
+
+  function run() {
+    const words = countWords(source.value);
+    const lo = Number(min.value);
+    const hi = Number(max.value);
+    const hasLo = min.value.trim() !== "" && Number.isFinite(lo);
+    const hasHi = max.value.trim() !== "" && Number.isFinite(hi);
+
+    wordsTile.set(String(words));
+    minTile.set(hasLo ? String(Math.max(0, lo - words)) : "-");
+    maxTile.set(hasHi ? String(Math.max(0, hi - words)) : "-");
+
+    if (hasLo && words < lo) status.write(`${lo - words} words under the minimum.`);
+    else if (hasHi && words > hi) status.write(`${words - hi} words over the maximum.`);
+    else if (hasLo && hasHi) status.write("Within the range.");
+    else status.write("");
+
+    summary = `${words} words`;
+  }
+
+  for (const input of [source, min, max]) input.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text", source), panel("Minimum", min), panel("Maximum", max), note),
+      stack(stats, status)
+    ),
+    foot: actions(copyButton(() => summary, "Copy count", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,85 @@
+// Reindents an XML document by nesting and reports tags that do not match.
+import { bench, stack, panel, textArea, output, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+const TOKEN = /<!--[\s\S]*?-->|<!\[CDATA\[[\s\S]*?\]\]>|<\?[\s\S]*?\?>|<\/?[^>]+>|[^<]+/g;
+
+const tagName = (token) => {
+  const match = token.match(/^<\/?\s*([^\s/>]+)/);
+  return match ? match[1] : "";
+};
+
+function format(source, unit) {
+  const tokens = source.match(TOKEN) ?? [];
+  const lines = [];
+  const open = [];
+  const problems = [];
+  let depth = 0;
+
+  for (const raw of tokens) {
+    const token = raw.trim();
+    if (!token) continue;
+
+    if (token.startsWith("<!--") || token.startsWith("<![CDATA[") || token.startsWith("<?") || token.startsWith("<!")) {
+      lines.push(unit.repeat(depth) + token);
+    } else if (token.startsWith("</")) {
+      const closing = tagName(token);
+      const expected = open.pop();
+      if (expected !== closing) problems.push(`Closing </${closing}> does not match <${expected ?? "?"}>.`);
+      depth = Math.max(0, depth - 1);
+      lines.push(unit.repeat(depth) + token);
+    } else if (token.endsWith("/>")) {
+      lines.push(unit.repeat(depth) + token);
+    } else if (token.startsWith("<")) {
+      lines.push(unit.repeat(depth) + token);
+      open.push(tagName(token));
+      depth++;
+    } else {
+      lines.push(unit.repeat(depth) + token);
+    }
+  }
+
+  if (open.length) problems.push(`Unclosed: ${open.map((name) => `<${name}>`).join(", ")}.`);
+  return { text: lines.join("\n"), problems };
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 9, value: "<note><to>you</to><body>hi</body></note>", "aria-label": "XML" });
+  const result = output({ value: "", rows: 9 });
+  const error = notice("error");
+  let unit = "  ";
+  let text = "";
+
+  const chips = chipRow(
+    [{ value: "  ", label: "2 spaces" }, { value: "    ", label: "4 spaces" }],
+    { value: "  ", label: "Indent", onChange: (value) => { unit = value; run(); } }
+  );
+
+  function run() {
+    if (!source.value) {
+      text = "";
+      result.write("");
+      error.write("");
+      return;
+    }
+    const formatted = format(source.value, unit);
+    text = formatted.text;
+    result.write(text);
+    error.write(formatted.problems.join(" "));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("XML", source), panel("Indent", chips)),
+      stack(panel("Formatted", result), error)
+    ),
+    foot: actions(copyButton(() => text, "Copy XML", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/yaml-formatter.js

@@ -0,0 +1,71 @@
+// Checks a small YAML subset for indentation and key spacing problems.
+import { el, bench, stack, panel, textArea, copyButton, actions, toolcard } from "../core.js";
+
+function check(source) {
+  const problems = [];
+  const lines = source.split(/\r?\n/);
+  let step = 0;
+
+  lines.forEach((raw, index) => {
+    const line = index + 1;
+    if (!raw.trim()) return;
+
+    const lead = raw.match(/^[ \t]*/)[0];
+    if (lead.includes("\t")) {
+      problems.push({ line, message: "Tab used for indentation." });
+    } else if (lead.length) {
+      if (step === 0) step = lead.length;
+      else if (lead.length % step !== 0) problems.push({ line, message: `Indentation is not a multiple of ${step}.` });
+    }
+
+    const body = raw.trim().replace(/^-\s+/, "");
+    if (/^[a-z][a-z0-9+.-]*:\/\//i.test(body)) return;
+    const match = body.match(/^([^:#]+?)(\s*):(\s*)(.*)$/);
+    if (!match) return;
+    if (match[2]) problems.push({ line, message: "Remove the space before the colon." });
+    if (match[4] && !match[3]) problems.push({ line, message: "Add a space after the colon." });
+  });
+
+  return problems;
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 11, value: "name: mevebu\ntools:\n  - unicode\n  - json", "aria-label": "YAML" });
+  const scroll = el("div", { class: "mvb-scroll" });
+  const count = el("span", { class: "mvb-stat__v" }, "0");
+  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, count, el("span", { class: "mvb-stat__k" }, "Problems")));
+  let problems = [];
+
+  function run() {
+    problems = check(source.value);
+    count.textContent = String(problems.length);
+    if (!problems.length) {
+      scroll.replaceChildren(el("p", { class: "mvb-note" }, "No problems."));
+      return;
+    }
+    scroll.replaceChildren(el(
+      "table",
+      { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Line"), el("th", {}, "Problem"))),
+      el("tbody", {}, ...problems.map((entry) => el("tr", {},
+        el("th", {}, String(entry.line)),
+        el("td", {}, entry.message))))
+    ));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("YAML", source)),
+      stack(stats, panel("Problems", scroll))
+    ),
+    foot: actions(copyButton(() => problems.map((entry) => `${entry.line}: ${entry.message}`).join("\n"), "Copy problems", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",