mevebu 0.3.0 → 0.4.0

package/mevebu/libs/js/tools/markdown-preview.js

@@ -0,0 +1,143 @@
+// Renders a subset of Markdown into a preview pane. The source is turned into
+// DOM nodes, so nothing in it can inject HTML.
+import { el, bench, stack, panel, textArea, copyButton, actions, toolcard } from "../core.js";
+
+const SAFE_URL = /^(https?:|mailto:|#|\/|\.)/i;
+
+const safeUrl = (url) => (SAFE_URL.test(url.trim()) ? url.trim() : null);
+
+function inline(text) {
+  const out = [];
+  const pattern = /(`([^`]+)`)|(\*\*([^*]+)\*\*)|(\*([^*]+)\*)|(\[([^\]]+)\]\(([^)\s]+)\))/g;
+  let last = 0;
+  let match;
+  while ((match = pattern.exec(text))) {
+    if (match.index > last) out.push(document.createTextNode(text.slice(last, match.index)));
+    if (match[2] != null) out.push(el("code", {}, match[2]));
+    else if (match[4] != null) out.push(el("strong", {}, match[4]));
+    else if (match[6] != null) out.push(el("em", {}, match[6]));
+    else if (match[8] != null) {
+      const href = safeUrl(match[9]);
+      out.push(href
+        ? el("a", { href, target: "_blank", rel: "noopener noreferrer" }, match[8])
+        : document.createTextNode(match[8]));
+    }
+    last = pattern.lastIndex;
+  }
+  if (last < text.length) out.push(document.createTextNode(text.slice(last)));
+  return out;
+}
+
+const splitRow = (row) => row.replace(/^\s*\|/, "").replace(/\|\s*$/, "").split("|").map((cell) => cell.trim());
+
+function blocks(source) {
+  const lines = source.replace(/\r\n?/g, "\n").split("\n");
+  const nodes = [];
+  let i = 0;
+
+  const isSeparator = (value) => /^\s*\|?[\s:|-]*-[\s:|-]*\|?\s*$/.test(value);
+  const isTableStart = (index) => index + 1 < lines.length && lines[index].includes("|") && isSeparator(lines[index + 1]);
+  const isBlockStart = (index) => {
+    const line = lines[index];
+    return !line.trim() || /^```/.test(line) || /^#{1,6}\s/.test(line) || /^\s*>/.test(line) ||
+      /^\s*([-*+]|\d+[.)])\s+/.test(line) || /^\s*([-*_])(\s*\1){2,}\s*$/.test(line) || isTableStart(index);
+  };
+
+  while (i < lines.length) {
+    const line = lines[i];
+    if (!line.trim()) { i++; continue; }
+
+    const fence = line.match(/^```(\w*)\s*$/);
+    if (fence) {
+      const code = [];
+      i++;
+      while (i < lines.length && !/^```\s*$/.test(lines[i])) { code.push(lines[i]); i++; }
+      i++;
+      nodes.push(el("pre", {}, el("code", { class: fence[1] ? `language-${fence[1]}` : null }, code.join("\n"))));
+      continue;
+    }
+
+    const heading = line.match(/^(#{1,6})\s+(.*)$/);
+    if (heading) {
+      nodes.push(el(`h${heading[1].length}`, {}, ...inline(heading[2].trim())));
+      i++;
+      continue;
+    }
+
+    if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
+      nodes.push(el("hr"));
+      i++;
+      continue;
+    }
+
+    if (/^\s*>/.test(line)) {
+      const quote = [];
+      while (i < lines.length && /^\s*>/.test(lines[i])) { quote.push(lines[i].replace(/^\s*>\s?/, "")); i++; }
+      nodes.push(el("blockquote", {}, el("p", {}, ...inline(quote.join(" ")))));
+      continue;
+    }
+
+    if (isTableStart(i)) {
+      const head = splitRow(line);
+      i += 2;
+      const table = el("table", {}, el("thead", {}, el("tr", {}, ...head.map((cell) => el("th", {}, ...inline(cell))))));
+      const body = el("tbody");
+      while (i < lines.length && lines[i].includes("|") && lines[i].trim()) {
+        body.append(el("tr", {}, ...splitRow(lines[i]).map((cell) => el("td", {}, ...inline(cell)))));
+        i++;
+      }
+      table.append(body);
+      nodes.push(table);
+      continue;
+    }
+
+    if (/^\s*([-*+]|\d+[.)])\s+/.test(line)) {
+      const ordered = /^\s*\d+[.)]\s+/.test(line);
+      const items = [];
+      while (i < lines.length && /^\s*([-*+]|\d+[.)])\s+/.test(lines[i])) {
+        items.push(lines[i].replace(/^\s*([-*+]|\d+[.)])\s+/, ""));
+        i++;
+      }
+      const list = el(ordered ? "ol" : "ul");
+      for (const item of items) list.append(el("li", {}, ...inline(item)));
+      nodes.push(list);
+      continue;
+    }
+
+    const paragraph = [line];
+    i++;
+    while (i < lines.length && !isBlockStart(i)) { paragraph.push(lines[i]); i++; }
+    nodes.push(el("p", {}, ...inline(paragraph.join(" "))));
+  }
+  return nodes;
+}
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 16,
+    class: "mvb-in mvb-in--area mvb-in--mono",
+    "aria-label": "Markdown",
+    value: "# Title\n\nSome **bold**, *italic* and `code`.\n\n- one\n- two\n\n> A quote.\n\n| a | b |\n| --- | --- |\n| 1 | 2 |\n\n```js\nconst x = 1;\n```\n",
+  });
+  const preview = el("div", { class: "mvb-pane" });
+
+  function run() {
+    preview.replaceChildren(...blocks(source.value));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Markdown", source)),
+      stack(panel("Preview", preview))
+    ),
+    foot: actions(copyButton(() => source.value, "Copy markdown", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/markdown-table.js

@@ -0,0 +1,111 @@
+// Builds a Markdown table cell by cell, with per-column alignment.
+import { el, bench, stack, panel, row, textInput, selectInput, button, output, copyButton, actions, toolcard } from "../core.js";
+
+const cell = (text) => String(text ?? "").replace(/\|/g, "\\|").trim();
+
+export function mount(slot) {
+  const columns = ["left", "left", "left"];
+  const rows = [["Name", "Role", "City"], ["Ada", "Engineer", "London"]];
+  const editor = el("div", { class: "mvb-scroll" });
+  const alignment = el("div", { class: "mvb-stack" });
+  const result = output({ rows: 8 });
+
+  const toMarkdown = () => {
+    const head = rows[0] ?? [];
+    const marks = columns.map((align) => (align === "center" ? ":---:" : align === "right" ? "---:" : ":---"));
+    const lines = [
+      `| ${columns.map((_, index) => cell(head[index])).join(" | ")} |`,
+      `| ${marks.join(" | ")} |`,
+    ];
+    for (let r = 1; r < rows.length; r++) {
+      lines.push(`| ${columns.map((_, index) => cell(rows[r][index])).join(" | ")} |`);
+    }
+    return lines.join("\n");
+  };
+
+  const update = () => { result.write(toMarkdown()); };
+
+  function paintEditor() {
+    const table = el("table", { class: "mvb-ttable" });
+    const headRow = el("tr");
+    for (let c = 0; c < columns.length; c++) {
+      const input = textInput({ value: rows[0][c] ?? "", "aria-label": `Column ${c + 1} header` });
+      input.addEventListener("input", () => { rows[0][c] = input.value; update(); });
+      headRow.append(el("th", {}, input));
+    }
+    table.append(el("thead", {}, headRow));
+    const body = el("tbody");
+    for (let r = 1; r < rows.length; r++) {
+      const bodyRow = el("tr");
+      for (let c = 0; c < columns.length; c++) {
+        const input = textInput({ value: rows[r][c] ?? "", "aria-label": `Row ${r} column ${c + 1}` });
+        input.addEventListener("input", () => { rows[r][c] = input.value; update(); });
+        bodyRow.append(el("td", {}, input));
+      }
+      body.append(bodyRow);
+    }
+    table.append(body);
+    editor.replaceChildren(table);
+    update();
+  }
+
+  function paintAlignment() {
+    alignment.replaceChildren(
+      ...columns.map((align, index) => {
+        const select = selectInput(
+          [{ value: "left", label: "Left" }, { value: "center", label: "Center" }, { value: "right", label: "Right" }],
+          { value: align, "aria-label": `Column ${index + 1} alignment` }
+        );
+        select.addEventListener("change", () => { columns[index] = select.value; update(); });
+        return panel(`Column ${index + 1}`, select);
+      })
+    );
+  }
+
+  function paint() {
+    paintAlignment();
+    paintEditor();
+  }
+
+  const addColumn = button("Add column", { icon: "plus" });
+  addColumn.addEventListener("click", () => {
+    columns.push("left");
+    for (const entry of rows) entry.push("");
+    paint();
+  });
+
+  const removeColumn = button("Remove column", { icon: "minus" });
+  removeColumn.addEventListener("click", () => {
+    if (columns.length <= 1) return;
+    columns.pop();
+    for (const entry of rows) entry.pop();
+    paint();
+  });
+
+  const addRow = button("Add row", { icon: "plus" });
+  addRow.addEventListener("click", () => {
+    rows.push(columns.map(() => ""));
+    paintEditor();
+  });
+
+  const removeRow = button("Remove row", { icon: "minus" });
+  removeRow.addEventListener("click", () => {
+    if (rows.length <= 2) return;
+    rows.pop();
+    paintEditor();
+  });
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Columns", row(addColumn, removeColumn)), panel("Rows", row(addRow, removeRow)), panel("Alignment", alignment)),
+      stack(panel("Cells", editor), panel("Markdown", result))
+    ),
+    foot: actions(copyButton(() => result.textContent, "Copy table", "fill")),
+  });
+  slot.append(card.node);
+  paint();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,48 @@
+// Removes Markdown syntax and keeps the words.
+import { bench, stack, panel, textArea, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+function toText(markdown) {
+  let text = markdown;
+  text = text.replace(/```[^\n]*\n?/g, "");
+  text = text.replace(/`([^`]+)`/g, "$1");
+  text = text.replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1");
+  text = text.replace(/\[([^\]]*)\]\([^)]*\)/g, "$1");
+  text = text.replace(/^\s{0,3}#{1,6}\s+/gm, "");
+  text = text.replace(/^\s{0,3}>\s?/gm, "");
+  text = text.replace(/^\s{0,3}[-*+]\s+/gm, "");
+  text = text.replace(/^\s{0,3}\d+\.\s+/gm, "");
+  text = text.replace(/^\s{0,3}([-*_])(?:\s*\1){2,}\s*$/gm, "");
+  text = text.replace(/(\*\*|__)(.*?)\1/g, "$2");
+  text = text.replace(/(\*|_)(.*?)\1/g, "$2");
+  text = text.replace(/~~(.*?)~~/g, "$1");
+  return text.replace(/\s+/g, " ").trim();
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 9, value: "## Title\n\nSome **bold** and [a link](https://example.com).", "aria-label": "Markdown" });
+  const result = output({ value: "", rows: 9 });
+  const error = notice("error");
+  let text = "";
+
+  function run() {
+    error.write("");
+    text = source.value ? toText(source.value) : "";
+    result.write(text);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Markdown", 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/markup-calculator.js

@@ -0,0 +1,69 @@
+// Turns a cost and a target markup into a selling price.
+import { el, bench, stack, panel, numberInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 2 });
+}
+
+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 cost = numberInput({ value: "40", "aria-label": "Cost" });
+  const markup = numberInput({ value: "150", "aria-label": "Markup percent" });
+  const price = tile("Selling price");
+  const profit = tile("Profit");
+  const margin = tile("Margin");
+  const stats = el("div", { class: "mvb-stats" }, price, profit, margin);
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    price.set("-");
+    profit.set("-");
+    margin.set("-");
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const c = Number(cost.value);
+    const m = Number(markup.value);
+    if (cost.value.trim() === "" || markup.value.trim() === "" || !Number.isFinite(c) || !Number.isFinite(m)) {
+      clear();
+      return;
+    }
+    if (c < 0 || m < -100) {
+      clear();
+      error.write("The cost cannot be negative and the markup cannot drop below -100%.");
+      return;
+    }
+    const selling = c * (1 + m / 100);
+    const gain = selling - c;
+    price.set(fmt(selling));
+    profit.set(fmt(gain));
+    margin.set(selling === 0 ? "-" : `${fmt((gain / selling) * 100)}%`);
+    text = `Selling price ${fmt(selling)}, profit ${fmt(gain)}, margin ${selling === 0 ? "n/a" : `${fmt((gain / selling) * 100)}%`}`;
+  }
+
+  cost.addEventListener("input", run);
+  markup.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Cost", cost), panel("Markup %", markup), error),
+      stack(stats)
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/meeting-agenda.js

@@ -0,0 +1,137 @@
+// Lays out a meeting with owners and time budgets, totalled for you.
+import { el, toast, blank, bench, stack, row, panel, textInput, numberInput, button, copyButton, notice, actions, toolcard, readPin, writePin } from "../core.js";
+
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+
+function hhmm(mins) {
+  const h = Math.floor(mins / 60) % 24;
+  const m = mins % 60;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "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 = "meeting-agenda";
+  const saved = readPin(PIN, { start: "09:00", items: [] });
+  let list = Array.isArray(saved.items) ? saved.items : [];
+
+  const startInput = el("input", { class: "mvb-in", type: "time", value: saved.start || "09:00", "aria-label": "Meeting start" });
+  const topic = textInput({ placeholder: "Topic", "aria-label": "Topic" });
+  const owner = textInput({ placeholder: "Owner", "aria-label": "Owner" });
+  const minutes = numberInput({ min: 1, max: 600, value: 10, "aria-label": "Minutes" });
+
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+  const error = notice("error");
+
+  const addButton = button("Add", { icon: "plus", kind: "fill" });
+  const copyAgenda = copyButton(() => agendaText(), "Copy agenda");
+
+  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 base = () => {
+    const [h, m] = String(startInput.value || "00:00").split(":").map(Number);
+    return (h || 0) * 60 + (m || 0);
+  };
+  const save = () => writePin(PIN, { start: startInput.value, items: list });
+
+  function startTimes() {
+    const out = [];
+    let cursor = base();
+    for (const item of list) {
+      out.push(hhmm(cursor));
+      cursor += Math.max(0, Number(item.minutes) || 0);
+    }
+    return out;
+  }
+
+  function agendaText() {
+    const starts = startTimes();
+    return list.map((item, i) =>
+      `${starts[i]} ${item.topic}${item.owner ? ` (${item.owner})` : ""} ${item.minutes} min`
+    ).join("\n");
+  }
+
+  function removeButton(item) {
+    const node = button("", { icon: "trash", "aria-label": `Remove ${item.topic}` });
+    node.addEventListener("click", () => {
+      list = list.filter((entry) => entry.id !== item.id);
+      save();
+      render();
+    });
+    return node;
+  }
+
+  function render() {
+    const starts = startTimes();
+    if (!list.length) {
+      listWrap.replaceChildren(blank("clipboard-list", "No topics yet."));
+    } else {
+      const rows = list.map((item, i) => el("tr", {},
+        el("th", {}, starts[i]),
+        el("td", {}, item.topic),
+        el("td", {}, item.owner),
+        el("td", {}, `${item.minutes} min`),
+        el("td", {}, removeButton(item))
+      ));
+      listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+        el("thead", {}, el("tr", {},
+          el("th", {}, "Start"), el("th", {}, "Topic"), el("th", {}, "Owner"),
+          el("th", {}, "Time"), el("th", {}, ""))),
+        el("tbody", {}, ...rows)
+      ));
+    }
+    const total = list.reduce((sum, item) => sum + Math.max(0, Number(item.minutes) || 0), 0);
+    stats.replaceChildren(tile("Topics", list.length), tile("Total", fmtDur(total)));
+    copyAgenda.disabled = list.length === 0;
+  }
+
+  function add() {
+    const text = topic.value.trim();
+    if (!text) return toast("Add a topic first");
+    const value = Math.max(1, Number(minutes.value) || 0);
+    error.write("");
+    list.push({ id: uid(), topic: text, owner: owner.value.trim(), minutes: value });
+    topic.value = "";
+    owner.value = "";
+    save();
+    render();
+  }
+
+  topic.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") add();
+  });
+  startInput.addEventListener("change", () => {
+    save();
+    render();
+  });
+  addButton.addEventListener("click", add);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Meeting start", startInput),
+        panel("Topic", topic),
+        row(panel("Owner", owner), panel("Minutes", minutes)),
+        error
+      ),
+      stack(stats, panel("Agenda", listWrap))
+    ),
+    foot: actions(copyAgenda, addButton),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/meta-preview.js

@@ -0,0 +1,51 @@
+// Shows how a title, address and description look as a search result, with
+// length counts for the title and description.
+import { el, bench, stack, panel, textInput, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+
+export function mount(slot) {
+  const title = textInput({ value: "mevebu", "aria-label": "Title" });
+  const url = textInput({ value: "https://example.com", "aria-label": "URL" });
+  const description = textArea({ rows: 3, value: "Small privacy first tools that run entirely in the browser.", "aria-label": "Description" });
+
+  const urlLine = el("span", { class: "mvb-note" }, "");
+  const titleLine = el("span", { class: "mvb-stat__v" }, "");
+  const descLine = el("p", { class: "mvb-note" }, "");
+  const sample = el("div", { class: "mvb-preview__sample" },
+    el("div", { class: "mvb-stack" }, urlLine, titleLine, descLine));
+
+  const titleCount = el("span", { class: "mvb-stat__v" }, "0");
+  const descCount = el("span", { class: "mvb-stat__v" }, "0");
+  const stats = el("div", { class: "mvb-stats" },
+    el("div", { class: "mvb-stat" }, titleCount, el("span", { class: "mvb-stat__k" }, "Title chars")),
+    el("div", { class: "mvb-stat" }, descCount, el("span", { class: "mvb-stat__k" }, "Description chars"))
+  );
+  const note = notice("note");
+
+  function run() {
+    urlLine.textContent = url.value.trim() || "example.com";
+    titleLine.textContent = title.value.trim() || "Page title";
+    descLine.textContent = description.value.trim() || "Page description.";
+    titleCount.textContent = String(title.value.trim().length);
+    descCount.textContent = String(description.value.trim().length);
+    note.write("Search engines trim long titles and descriptions, and previews vary.");
+  }
+
+  for (const input of [title, url, description]) input.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Title", title), panel("URL", url), panel("Description", description)),
+      stack(sample, stats, note)
+    ),
+    foot: actions(
+      copyButton(() => title.value.trim(), "Copy title"),
+      copyButton(() => description.value.trim(), "Copy description", "fill")
+    ),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/meta-tags.js

@@ -0,0 +1,62 @@
+// Builds the standard meta tags for a page: title, description, keywords,
+// author and robots. The result is plain HTML for the head.
+import { el, bench, stack, panel, textInput, textArea, selectInput, output, copyButton, actions, toolcard } from "../core.js";
+
+const esc = (value) =>
+  String(value).replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[char]));
+
+export function mount(slot) {
+  const title = textInput({ value: "mevebu", "aria-label": "Title" });
+  const description = textArea({ rows: 3, value: "Small privacy first tools that run entirely in the browser.", "aria-label": "Description" });
+  const keywords = textInput({ placeholder: "tools, privacy, browser", "aria-label": "Keywords" });
+  const author = textInput({ "aria-label": "Author" });
+  const robots = selectInput(
+    ["index, follow", "noindex, follow", "index, nofollow", "noindex, nofollow"],
+    { value: "index, follow", "aria-label": "Robots" }
+  );
+  const result = output({ rows: 8 });
+
+  const titleCount = el("span", { class: "mvb-stat__v" }, "0");
+  const descCount = el("span", { class: "mvb-stat__v" }, "0");
+  const stats = el("div", { class: "mvb-stats" },
+    el("div", { class: "mvb-stat" }, titleCount, el("span", { class: "mvb-stat__k" }, "Title chars")),
+    el("div", { class: "mvb-stat" }, descCount, el("span", { class: "mvb-stat__k" }, "Description chars"))
+  );
+
+  function build() {
+    const lines = [];
+    const t = title.value.trim();
+    const d = description.value.trim();
+    if (t) lines.push(`<title>${esc(t)}</title>`);
+    if (d) lines.push(`<meta name="description" content="${esc(d)}" />`);
+    if (keywords.value.trim()) lines.push(`<meta name="keywords" content="${esc(keywords.value.trim())}" />`);
+    if (author.value.trim()) lines.push(`<meta name="author" content="${esc(author.value.trim())}" />`);
+    lines.push(`<meta name="robots" content="${esc(robots.value)}" />`);
+    result.write(lines.join("\n"));
+    titleCount.textContent = String(t.length);
+    descCount.textContent = String(d.length);
+  }
+
+  for (const input of [title, description, keywords, author]) input.addEventListener("input", build);
+  robots.addEventListener("change", build);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Title", title),
+        panel("Description", description),
+        panel("Keywords", keywords),
+        panel("Author", author),
+        panel("Robots", robots)
+      ),
+      stack(stats, panel("Meta tags", result))
+    ),
+    foot: actions(copyButton(() => result.textContent, "Copy tags", "fill")),
+  });
+  slot.append(card.node);
+  build();
+
+  return {};
+}
+
+export default { mount };