mevebu 0.3.1 → 0.4.0

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

@@ -0,0 +1,62 @@
+// Tags cleaned, de-duplicated and laid out one way or the other.
+import { el, bench, stack, panel, textArea, chipRow, output, copyButton, actions, toolcard } from "../core.js";
+
+const clean = (raw) => raw.replace(/#/g, "").replace(/[^\p{L}\p{N}_]/gu, "");
+
+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: 8, "aria-label": "Tags", placeholder: "One tag per line or space separated" });
+  const tagsTile = tile("Tags");
+  const removedTile = tile("Duplicates removed");
+  const stats = el("div", { class: "mvb-stats" }, tagsTile, removedTile);
+  const out = output({ rows: 8 });
+
+  let mode = "list";
+  const modeChips = chipRow(
+    [
+      { value: "line", label: "One line" },
+      { value: "list", label: "One per line" },
+    ],
+    { value: "list", label: "Layout", onChange: (next) => { mode = next; run(); } }
+  );
+
+  let result = "";
+
+  function run() {
+    const tokens = source.value.split(/[\s,]+/).map(clean).filter(Boolean);
+    const seen = new Set();
+    const tags = [];
+    for (const token of tokens) {
+      const key = token.toLowerCase();
+      if (seen.has(key)) continue;
+      seen.add(key);
+      tags.push(`#${token}`);
+    }
+    result = tags.join(mode === "line" ? " " : "\n");
+    out.write(result);
+    tagsTile.set(String(tags.length));
+    removedTile.set(String(tokens.length - tags.length));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Tags", source), panel("Layout", modeChips)),
+      stack(stats, panel("Result", out))
+    ),
+    foot: actions(copyButton(() => result, "Copy tags", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,61 @@
+// Numbers chapter and section headings from a list.
+import { bench, stack, panel, textArea, numberInput, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+function levelOf(line) {
+  const marks = line.match(/^(#+)\s*/);
+  if (marks) return marks[1].length;
+  const indent = (line.match(/^[ \t]*/) || [""])[0];
+  let spaces = 0;
+  for (const ch of indent) spaces += ch === "\t" ? 2 : 1;
+  return 1 + Math.floor(spaces / 2);
+}
+
+const strip = (line) => line.replace(/^(#+)\s*/, "").replace(/^[ \t]+/, "").trim();
+
+export function mount(slot) {
+  const source = textArea({ rows: 12, "aria-label": "Headings", placeholder: "One heading per line" });
+  const start = numberInput({ value: "1", min: "1", "aria-label": "Starting number" });
+  const result = output({ rows: 12 });
+  const note = notice("note");
+  note.write("Levels come from leading spaces, or from # marks.");
+  let text = "";
+
+  function run() {
+    const lines = source.value.split(/\r?\n/).filter((line) => line.trim());
+    const startNumber = Math.max(1, Number(start.value) || 1);
+    const counters = [];
+    const out = [];
+    for (const line of lines) {
+      const level = Math.min(6, Math.max(1, levelOf(line)));
+      if (counters.length < level) {
+        while (counters.length < level) counters.push(0);
+      } else {
+        counters.length = level;
+      }
+      if (level === 1 && counters[0] === 0) counters[0] = startNumber - 1;
+      counters[level - 1] += 1;
+      for (let i = level; i < counters.length; i++) counters[i] = 0;
+      const number = counters.slice(0, level).map((n) => (n === 0 ? 1 : n)).join(".");
+      out.push(`${number} ${strip(line)}`);
+    }
+    text = out.join("\n");
+    result.write(text);
+  }
+
+  source.addEventListener("input", run);
+  start.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Headings", source), panel("Starting number", start), note),
+      stack(panel("Numbered", result))
+    ),
+    foot: actions(copyButton(() => text, "Copy headings", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/hmac-generator.js

@@ -0,0 +1,63 @@
+// HMAC-SHA signatures for a message and a key, computed in this tab.
+import { el, icon, textArea, passwordInput, selectInput, output, notice, button, copyButton, bench, stack, panel, actions, toolcard, debounce } from "../core.js";
+
+const ALGORITHMS = [
+  { value: "SHA-256", label: "SHA-256" },
+  { value: "SHA-384", label: "SHA-384" },
+  { value: "SHA-512", label: "SHA-512" },
+  { value: "SHA-1", label: "SHA-1" },
+];
+
+const encoder = new TextEncoder();
+const toHex = (bytes) => [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+
+export function mount(slot) {
+  const message = textArea({ rows: 5, value: "mevebu", "aria-label": "Message", placeholder: "Type or paste the message" });
+  const secret = passwordInput({ value: "your-256-bit-secret", autocomplete: "off", "aria-label": "Secret key" });
+  const showButton = button("Show", { icon: "eye" });
+  const hashField = selectInput(ALGORITHMS, { value: "SHA-256", "aria-label": "Hash" });
+  const result = output();
+  const error = notice("error");
+
+  showButton.addEventListener("click", () => {
+    const visible = secret.type === "text";
+    secret.type = visible ? "password" : "text";
+    showButton.replaceChildren(icon(visible ? "eye" : "eye-off"), el("span", {}, visible ? "Show" : "Hide"));
+  });
+
+  async function run() {
+    error.write("");
+    result.write("");
+    if (!message.value || !secret.value) return;
+    try {
+      const key = await crypto.subtle.importKey("raw", encoder.encode(secret.value), { name: "HMAC", hash: hashField.value }, false, ["sign"]);
+      const signature = await crypto.subtle.sign("HMAC", key, encoder.encode(message.value));
+      result.write(toHex(new Uint8Array(signature)));
+    } catch (caught) {
+      error.write(caught.message || "Signing failed.");
+    }
+  }
+
+  const live = debounce(run, 150);
+  for (const field of [message, secret]) field.addEventListener("input", live);
+  hashField.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Message", message),
+        panel("Secret key", el("div", { class: "mvb-secret" }, secret, showButton)),
+        panel("Hash", hashField),
+        el("p", { class: "mvb-note" }, "The message and key stay in this tab. Do not paste a production secret into a site you do not trust.")
+      ),
+      stack(panel("Signature", result), error)
+    ),
+    foot: actions(copyButton(() => result.textContent, "Copy signature", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,70 @@
+// Total production cost and the cost to make one unit.
+import { el, bench, stack, panel, numberInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 4 });
+}
+
+function tile(label) {
+  const value = el("span", { class: "mvb-stat__v" }, "-");
+  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 material = numberInput({ value: "0", min: "0", "aria-label": "Material cost" });
+  const labour = numberInput({ value: "0", min: "0", "aria-label": "Labour cost" });
+  const overhead = numberInput({ value: "0", min: "0", "aria-label": "Overhead cost" });
+  const units = numberInput({ value: "1", min: "1", "aria-label": "Units made" });
+  const total = tile("Total cost");
+  const perUnit = tile("Cost per unit");
+  const stats = el("div", { class: "mvb-stats" }, total, perUnit);
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    total.set("-");
+    perUnit.set("-");
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const inputs = [material, labour, overhead, units];
+    const values = inputs.map((input) => Number(input.value));
+    if (inputs.some((input) => input.value.trim() === "") || !values.every(Number.isFinite)) {
+      clear();
+      return;
+    }
+    const [m, l, o, u] = values;
+    if (m < 0 || l < 0 || o < 0) { clear(); error.write("The costs cannot be negative."); return; }
+    if (u <= 0) { clear(); error.write("The units must be above zero."); return; }
+    const sum = m + l + o;
+    total.set(fmt(sum));
+    perUnit.set(fmt(sum / u));
+    text = `Total cost ${fmt(sum)}, cost per unit ${fmt(sum / u)}`;
+  }
+
+  for (const input of [material, labour, overhead, units]) input.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Material cost", material),
+        panel("Labour cost", labour),
+        panel("Overhead cost", overhead),
+        panel("Units made", units),
+        error
+      ),
+      stack(stats)
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/html-entity.js

@@ -0,0 +1,49 @@
+// Encodes special characters as HTML entities, or decodes them back.
+import { bench, stack, panel, textArea, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+const ENCODE = [["&", "&amp;"], ["<", "&lt;"], [">", "&gt;"], ['"', "&quot;"], ["'", "&#39;"]];
+
+const encode = (text) => ENCODE.reduce((out, [char, entity]) => out.split(char).join(entity), text);
+
+function decode(text) {
+  const area = document.createElement("textarea");
+  area.innerHTML = text;
+  return area.value;
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 6, value: "<a href=\"/x\">Tom & Jerry</a>", "aria-label": "Input" });
+  const result = textArea({ rows: 6, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  const error = notice("error");
+  let mode = "encode";
+
+  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) {
+      result.value = "";
+      return;
+    }
+    result.value = mode === "encode" ? encode(source.value) : decode(source.value);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Direction", chips), panel("Input", source), error),
+      stack(panel("Result", result))
+    ),
+    foot: actions(copyButton(() => result.value, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,72 @@
+// Reindents HTML by nesting depth and flags tags that never close.
+import { bench, stack, panel, textArea, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+
+const tagName = (token) => (token.match(/^<\s*\/?\s*([a-zA-Z0-9:-]+)/) || [])[1]?.toLowerCase();
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 12,
+    class: "mvb-in mvb-in--area mvb-in--mono",
+    "aria-label": "HTML",
+    value: "<div class=\"card\"><h1>Title</h1><p>Text <strong>bold</strong></p><br></div>",
+  });
+  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Formatted HTML" });
+  const warn = notice("warn");
+  let size = "2";
+
+  const chips = chipRow(
+    [{ value: "2", label: "2 spaces" }, { value: "4", label: "4 spaces" }, { value: "0", label: "Tabs" }],
+    { value: "2", label: "Indent", onChange: (value) => { size = value; run(); } }
+  );
+
+  function run() {
+    warn.write("");
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    const indent = size === "0" ? "\t" : " ".repeat(Number(size));
+    const tokens = source.value.replace(/>\s+</g, "><").match(/<!--[\s\S]*?-->|<!\[CDATA\[[\s\S]*?\]\]>|<[^>]+>|[^<]+/g) || [];
+    const lines = [];
+    const stack = [];
+    for (const raw of tokens) {
+      const token = raw.trim();
+      if (!token) continue;
+      if (token.startsWith("</")) {
+        const name = tagName(token);
+        const at = stack.lastIndexOf(name);
+        if (at !== -1) stack.length = at;
+        lines.push(indent.repeat(stack.length) + token);
+      } else if (token.startsWith("<!")) {
+        lines.push(indent.repeat(stack.length) + token);
+      } else if (token.startsWith("<")) {
+        const name = tagName(token);
+        const self = /\/>$/.test(token) || VOID.has(name);
+        lines.push(indent.repeat(stack.length) + token);
+        if (!self && name) stack.push(name);
+      } else {
+        lines.push(indent.repeat(stack.length) + token);
+      }
+    }
+    result.value = lines.join("\n");
+    if (stack.length) warn.write(`Never closed: ${[...new Set(stack)].join(", ")}.`);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Indent", chips), panel("HTML", source), warn),
+      stack(panel("Formatted", result))
+    ),
+    foot: actions(copyButton(() => result.value, "Copy markup", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/html-to-text.js

@@ -0,0 +1,47 @@
+// Strips HTML tags with the browser parser and keeps the readable text.
+import { bench, stack, panel, textArea, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+function toText(html) {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return (doc.body?.textContent ?? "").replace(/\s+/g, " ").trim();
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 9, value: "<p>Hello <strong>world</strong></p>", "aria-label": "HTML" });
+  const result = output({ value: "", rows: 9 });
+  const error = notice("error");
+  let text = "";
+
+  function run() {
+    error.write("");
+    if (!source.value) {
+      text = "";
+      result.write("");
+      return;
+    }
+    try {
+      text = toText(source.value);
+      result.write(text);
+    } catch {
+      text = "";
+      result.write("");
+      error.write("That HTML could not be read.");
+    }
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("HTML", source)),
+      stack(panel("Plain text", result), error)
+    ),
+    foot: actions(copyButton(() => text, "Copy text", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/http-status.js

@@ -0,0 +1,63 @@
+// Reference for the common HTTP status codes, filterable by class and text.
+import { el, bench, stack, panel, textInput, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+const CODES = [
+  [100, "Continue"], [101, "Switching Protocols"], [103, "Early Hints"],
+  [200, "OK"], [201, "Created"], [202, "Accepted"], [203, "Non-Authoritative Information"], [204, "No Content"], [205, "Reset Content"], [206, "Partial Content"],
+  [300, "Multiple Choices"], [301, "Moved Permanently"], [302, "Found"], [303, "See Other"], [304, "Not Modified"], [307, "Temporary Redirect"], [308, "Permanent Redirect"],
+  [400, "Bad Request"], [401, "Unauthorized"], [402, "Payment Required"], [403, "Forbidden"], [404, "Not Found"], [405, "Method Not Allowed"], [406, "Not Acceptable"], [408, "Request Timeout"], [409, "Conflict"], [410, "Gone"], [411, "Length Required"], [412, "Precondition Failed"], [413, "Payload Too Large"], [414, "URI Too Long"], [415, "Unsupported Media Type"], [416, "Range Not Satisfiable"], [418, "I'm a teapot"], [422, "Unprocessable Entity"], [425, "Too Early"], [426, "Upgrade Required"], [428, "Precondition Required"], [429, "Too Many Requests"], [431, "Request Header Fields Too Large"], [451, "Unavailable For Legal Reasons"],
+  [500, "Internal Server Error"], [501, "Not Implemented"], [502, "Bad Gateway"], [503, "Service Unavailable"], [504, "Gateway Timeout"], [505, "HTTP Version Not Supported"], [507, "Insufficient Storage"], [508, "Loop Detected"], [511, "Network Authentication Required"],
+];
+
+const statusClass = (code) => `${Math.floor(code / 100)}xx`;
+
+export function mount(slot) {
+  const filter = textInput({ type: "search", placeholder: "Code or reason", "aria-label": "Filter" });
+  const scroll = el("div", { class: "mvb-scroll" });
+  let group = "all";
+  let visible = CODES;
+
+  const chips = chipRow(
+    [{ value: "all", label: "All" }, { value: "2xx", label: "2xx" }, { value: "3xx", label: "3xx" }, { value: "4xx", label: "4xx" }, { value: "5xx", label: "5xx" }],
+    { value: "all", label: "Class", onChange: (value) => { group = value; run(); } }
+  );
+
+  function run() {
+    const query = filter.value.trim().toLowerCase();
+    visible = CODES.filter(([code, message]) => {
+      if (group !== "all" && statusClass(code) !== group) return false;
+      if (!query) return true;
+      return String(code).includes(query) || message.toLowerCase().includes(query);
+    });
+    if (!visible.length) {
+      scroll.replaceChildren(el("p", { class: "mvb-note" }, "No code matches."));
+      return;
+    }
+    scroll.replaceChildren(el(
+      "table",
+      { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {}, el("th", {}, "Code"), el("th", {}, "Message"), el("th", {}, "Class"))),
+      el("tbody", {}, ...visible.map(([code, message]) => el("tr", {},
+        el("td", {}, String(code)),
+        el("td", {}, message),
+        el("td", {}, statusClass(code))
+      )))
+    ));
+  }
+
+  filter.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Filter", filter), panel("Class", chips)),
+      stack(panel("Status codes", scroll))
+    ),
+    foot: actions(copyButton(() => visible.map(([code, message]) => `${code} ${message}`).join("\n"), "Copy list", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/ieee-reference.js

@@ -0,0 +1,102 @@
+// Builds an IEEE numbered reference from source details.
+import { bench, stack, panel, textInput, numberInput, selectInput, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+const TYPES = [
+  { value: "journal", label: "Journal article" },
+  { value: "conference", label: "Conference paper" },
+  { value: "book", label: "Book" },
+];
+
+const parts = (raw) => raw.split(";").map((item) => item.trim()).filter(Boolean);
+
+function flip(author) {
+  const bits = author.split(",").map((item) => item.trim());
+  return bits.length >= 2 ? `${bits[1]} ${bits[0]}` : author;
+}
+
+function authorList(raw) {
+  const list = parts(raw).map(flip);
+  if (!list.length) return "";
+  if (list.length === 1) return list[0];
+  return `${list.slice(0, -1).join(", ")}, and ${list[list.length - 1]}`;
+}
+
+export function mount(slot) {
+  const number = numberInput({ value: "1", min: "1", "aria-label": "Reference number" });
+  const type = selectInput(TYPES, { value: "journal", "aria-label": "Source type" });
+  const authors = textInput({ placeholder: "Smith, J. A.; Doe, B.", "aria-label": "Authors" });
+  const title = textInput({ placeholder: "Title of the work", "aria-label": "Title" });
+  const source = textInput({ placeholder: "Journal, conference or publisher", "aria-label": "Source" });
+  const details = textInput({ placeholder: "vol. 1, no. 2, pp. 3-4", "aria-label": "Details" });
+  const year = textInput({ placeholder: "2020", "aria-label": "Year" });
+  const link = textInput({ placeholder: "https://doi.org/10.0000/abc", "aria-label": "DOI or URL" });
+
+  const reference = output({ rows: 6 });
+  const citation = output({ rows: 1 });
+  const note = notice("note");
+  note.write("Check the details against the source and the IEEE guide.");
+  let refText = "";
+
+  function build() {
+    const n = number.value.trim() || "1";
+    const au = authorList(authors.value);
+    const ti = title.value.trim();
+    const src = source.value.trim();
+    const det = details.value.trim();
+    const yr = year.value.trim();
+    const url = link.value.trim();
+
+    const body = [];
+    if (au) body.push(au);
+    if (type.value === "book") {
+      if (ti) body.push(ti);
+      if (src) body.push(src);
+      if (det) body.push(det);
+    } else {
+      if (ti) body.push(`"${ti}"`);
+      if (type.value === "conference") {
+        if (src) body.push(`in ${src}`);
+      } else if (src) {
+        body.push(src);
+      }
+      if (det) body.push(det);
+    }
+    if (yr) body.push(yr);
+    if (url) body.push(url);
+
+    refText = `[${n}] ${body.join(", ")}`;
+    if (!/[.!?]$/.test(refText)) refText += ".";
+    reference.write(refText);
+    citation.write(`[${n}]`);
+  }
+
+  for (const input of [number, authors, title, source, details, year, link]) input.addEventListener("input", build);
+  type.addEventListener("change", build);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Number", number),
+        panel("Source type", type),
+        panel("Authors", authors),
+        panel("Title", title),
+        panel("Source", source),
+        panel("Details", details),
+        panel("Year", year),
+        panel("DOI or URL", link),
+        note
+      ),
+      stack(panel("Reference", reference), panel("Bracketed citation", citation))
+    ),
+    foot: actions(
+      copyButton(() => citation.textContent, "Copy number"),
+      copyButton(() => refText, "Copy reference", "fill")
+    ),
+  });
+  slot.append(card.node);
+  build();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/intext-citation.js

@@ -0,0 +1,75 @@
+// Formats an in-text citation in APA, Harvard or MLA form.
+import { bench, stack, panel, textInput, selectInput, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+const STYLES = [
+  { value: "apa", label: "APA" },
+  { value: "harvard", label: "Harvard" },
+  { value: "mla", label: "MLA" },
+];
+
+const FORMS = [
+  { value: "parenthetical", label: "Parenthetical" },
+  { value: "narrative", label: "Narrative" },
+];
+
+const parts = (raw) => raw.split(";").map((item) => item.trim()).filter(Boolean);
+const surname = (author) => author.split(",")[0].trim();
+
+export function mount(slot) {
+  const style = selectInput(STYLES, { value: "apa", "aria-label": "Style" });
+  const form = selectInput(FORMS, { value: "parenthetical", "aria-label": "Form" });
+  const authors = textInput({ placeholder: "Smith, J. A.; Doe, B.", "aria-label": "Authors" });
+  const year = textInput({ placeholder: "2020", "aria-label": "Year" });
+  const page = textInput({ placeholder: "5", "aria-label": "Page" });
+
+  const result = output({ rows: 3 });
+  const note = notice("note");
+  note.write("Check the details against the source and the style guide.");
+  let text = "";
+
+  function build() {
+    const list = parts(authors.value);
+    const y = year.value.trim();
+    const p = page.value.trim();
+    const join = style.value === "harvard" ? " and " : " & ";
+    let who = "";
+    if (list.length === 1) who = surname(list[0]);
+    else if (list.length === 2) who = `${surname(list[0])}${join}${surname(list[1])}`;
+    else if (list.length > 2) who = `${surname(list[0])} et al.`;
+
+    if (style.value === "mla") {
+      text = form.value === "narrative" ? who : [who, p].filter(Boolean).length ? `(${[who, p].filter(Boolean).join(" ")})` : "";
+    } else {
+      const yearPart = [y, p ? `p. ${p}` : ""].filter(Boolean).join(", ");
+      text = form.value === "narrative"
+        ? [who, yearPart ? `(${yearPart})` : ""].filter(Boolean).join(" ")
+        : `(${[who, y, p ? `p. ${p}` : ""].filter(Boolean).join(", ")})`;
+      if (text === "()") text = "";
+    }
+    result.write(text);
+  }
+
+  for (const input of [authors, year, page]) input.addEventListener("input", build);
+  for (const select of [style, form]) select.addEventListener("change", build);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Style", style),
+        panel("Form", form),
+        panel("Authors", authors),
+        panel("Year", year),
+        panel("Page", page),
+        note
+      ),
+      stack(panel("Citation", result))
+    ),
+    foot: actions(copyButton(() => text, "Copy citation", "fill")),
+  });
+  slot.append(card.node);
+  build();
+
+  return {};
+}
+
+export default { mount };