mevebu 0.3.1 → 0.4.0

package/mevebu/libs/js/tools/git-command-builder.js

@@ -0,0 +1,100 @@
+// Builds a common git command from a few fields and marks the destructive ones.
+import { el, bench, stack, panel, textInput, selectInput, notice, output, copyButton, actions, toolcard } from "../core.js";
+
+const quote = (value) => (/^[A-Za-z0-9._/@:~^+=-]+$/.test(value) ? value : JSON.stringify(value));
+
+const OPERATIONS = {
+  clone: {
+    label: "Clone a repository",
+    fields: [["url", "Repository URL", "https://github.com/user/repo.git"], ["directory", "Directory (optional)", ""]],
+    build: (v) => `git clone ${quote(v.url)}${v.directory ? ` ${quote(v.directory)}` : ""}`,
+  },
+  switch: {
+    label: "Switch branch",
+    fields: [["branch", "Branch", "main"]],
+    build: (v) => `git switch ${quote(v.branch)}`,
+  },
+  pull: {
+    label: "Pull",
+    fields: [["remote", "Remote", "origin"], ["branch", "Branch (optional)", ""]],
+    build: (v) => `git pull ${quote(v.remote)}${v.branch ? ` ${quote(v.branch)}` : ""}`,
+  },
+  commit: {
+    label: "Commit",
+    fields: [["message", "Message", "Fix the thing"], ["files", "Paths (optional)", ""]],
+    build: (v) => `git commit -m ${quote(v.message)}${v.files ? ` ${v.files}` : ""}`,
+  },
+  push: {
+    label: "Push",
+    fields: [["remote", "Remote", "origin"], ["branch", "Branch", "main"]],
+    build: (v) => `git push ${quote(v.remote)} ${quote(v.branch)}`,
+  },
+  "push-force": {
+    label: "Force push",
+    fields: [["remote", "Remote", "origin"], ["branch", "Branch", "main"]],
+    build: (v) => `git push --force-with-lease ${quote(v.remote)} ${quote(v.branch)}`,
+    destructive: "Force push can overwrite commits on the remote.",
+  },
+  merge: {
+    label: "Merge",
+    fields: [["branch", "Branch", "feature"]],
+    build: (v) => `git merge ${quote(v.branch)}`,
+  },
+  rebase: {
+    label: "Rebase",
+    fields: [["branch", "Branch", "main"]],
+    build: (v) => `git rebase ${quote(v.branch)}`,
+  },
+  reset: {
+    label: "Reset hard",
+    fields: [["ref", "Commit or ref", "HEAD~1"]],
+    build: (v) => `git reset --hard ${quote(v.ref)}`,
+    destructive: "Reset hard discards uncommitted work.",
+  },
+};
+
+export function mount(slot) {
+  const options = Object.entries(OPERATIONS).map(([value, config]) => ({ value, label: config.label }));
+  const operationSelect = selectInput(options, { value: "clone", "aria-label": "Operation" });
+  const fieldsHost = el("div", { class: "mvb-stack" });
+  const result = output({ rows: 4 });
+  const warn = notice("warn");
+  const values = {};
+  let inputs = [];
+
+  function paintFields() {
+    const config = OPERATIONS[operationSelect.value];
+    fieldsHost.replaceChildren();
+    inputs = [];
+    for (const [key, label, placeholder] of config.fields) {
+      if (!(key in values)) values[key] = "";
+      const input = textInput({ value: values[key], placeholder, "aria-label": label, spellcheck: "false" });
+      input.addEventListener("input", () => { values[key] = input.value; run(); });
+      inputs.push(input);
+      fieldsHost.append(panel(label, input));
+    }
+    run();
+  }
+
+  function run() {
+    const config = OPERATIONS[operationSelect.value];
+    warn.write(config.destructive ?? "");
+    result.write(config.build(values));
+  }
+
+  operationSelect.addEventListener("change", paintFields);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Operation", operationSelect), fieldsHost, warn),
+      stack(panel("Command", result))
+    ),
+    foot: actions(copyButton(() => result.textContent, "Copy command", "fill")),
+  });
+  slot.append(card.node);
+  paintFields();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,60 @@
+// Merges .gitignore templates for the stacks you pick.
+import { bench, stack, panel, toggleRow, output, notice, copyButton, downloadButton, actions, toolcard } from "../core.js";
+
+const TEMPLATES = {
+  node: { label: "Node", lines: ["node_modules/", "npm-debug.log*", "yarn-debug.log*", "yarn-error.log*", ".pnpm-store/"] },
+  python: { label: "Python", lines: ["__pycache__/", "*.py[cod]", ".venv/", "venv/", "*.egg-info/", ".pytest_cache/"] },
+  laravel: { label: "Laravel", lines: ["/vendor/", "/node_modules/", "/public/build/", "/public/hot", "/storage/*.key", ".env", ".env.backup"] },
+  react: { label: "React", lines: ["/build/", "/dist/", ".env.local", ".env.development.local", ".env.production.local"] },
+  macos: { label: "macOS", lines: [".DS_Store", ".AppleDouble", ".LSConflict"] },
+  windows: { label: "Windows", lines: ["Thumbs.db", "ehthumbs.db", "Desktop.ini", "$RECYCLE.BIN/"] },
+  editor: { label: "Editor", lines: [".vscode/*", "!.vscode/extensions.json", ".idea/", "*.swp", "*.swo"] },
+};
+
+export function mount(slot) {
+  const stacks = toggleRow(Object.entries(TEMPLATES).map(([value, template]) => ({ value, label: template.label })));
+  const out = output({ rows: 18 });
+  const error = notice("error");
+  let text = "";
+
+  function run() {
+    const picked = stacks.values();
+    if (!picked.length) {
+      text = "";
+      out.write("");
+      error.write("Pick at least one stack.");
+      return;
+    }
+    error.write("");
+    const seen = new Set();
+    const lines = [];
+    for (const key of picked) {
+      const template = TEMPLATES[key];
+      lines.push(`# ${template.label}`);
+      for (const line of template.lines) {
+        if (seen.has(line)) continue;
+        seen.add(line);
+        lines.push(line);
+      }
+      lines.push("");
+    }
+    text = `${lines.join("\n").replace(/\n+$/, "")}\n`;
+    out.write(text);
+  }
+
+  stacks.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Stacks", stacks), error),
+      stack(panel(".gitignore", out))
+    ),
+    foot: actions(downloadButton(() => text, ".gitignore"), copyButton(() => text, "Copy", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,100 @@
+// Credit weighted GPA from courses, on a grade scale you pick.
+import { el, toast, blank, bench, stack, row, panel, textInput, numberInput, selectInput, button, copyButton, actions, toolcard, readPin, writePin } from "../core.js";
+
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+
+const SCALE = [
+  ["A+", 4.0], ["A", 4.0], ["A-", 3.7],
+  ["B+", 3.3], ["B", 3.0], ["B-", 2.7],
+  ["C+", 2.3], ["C", 2.0], ["C-", 1.7],
+  ["D+", 1.3], ["D", 1.0], ["F", 0.0],
+];
+const POINTS = new Map(SCALE);
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 3 });
+}
+
+export function mount(slot) {
+  const PIN = "gpa-calculator";
+  const saved = readPin(PIN, []);
+  let list = Array.isArray(saved) ? saved : [];
+
+  const name = textInput({ placeholder: "Course", "aria-label": "Course" });
+  const credits = numberInput({ min: "0", step: "0.5", placeholder: "Credits", "aria-label": "Credits" });
+  const grade = selectInput(SCALE.map(([label]) => ({ value: label, label })), { value: "A", "aria-label": "Grade" });
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+
+  const addButton = button("Add", { icon: "plus", kind: "fill" });
+
+  const save = () => writePin(PIN, list);
+  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 totals = () => {
+    const totalCredits = list.reduce((sum, item) => sum + item.credits, 0);
+    const points = list.reduce((sum, item) => sum + item.credits * (POINTS.get(item.grade) ?? 0), 0);
+    return { totalCredits, gpa: totalCredits ? points / totalCredits : null };
+  };
+
+  function removeButton(item) {
+    const node = button("", { icon: "trash", "aria-label": `Remove ${item.name}` });
+    node.addEventListener("click", () => {
+      list = list.filter((entry) => entry.id !== item.id);
+      save();
+      render();
+    });
+    return node;
+  }
+
+  function render() {
+    if (!list.length) {
+      listWrap.replaceChildren(blank("graduation-cap", "No courses yet."));
+    } else {
+      listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+        el("thead", {}, el("tr", {}, el("th", {}, "Course"), el("th", {}, "Credits"), el("th", {}, "Grade"), el("th", {}, ""))),
+        el("tbody", {}, ...list.map((item) => el("tr", {},
+          el("th", {}, item.name),
+          el("td", {}, fmt(item.credits)),
+          el("td", {}, item.grade),
+          el("td", {}, removeButton(item)))))));
+    }
+    const { totalCredits, gpa } = totals();
+    stats.replaceChildren(tile("GPA", gpa == null ? "-" : fmt(gpa)), tile("Credits", fmt(totalCredits)));
+  }
+
+  function add() {
+    const text = name.value.trim();
+    if (!text) return toast("Name the course first");
+    const c = Number(credits.value);
+    if (credits.value.trim() === "" || !Number.isFinite(c) || c < 0) return toast("Add the credits");
+    list.push({ id: uid(), name: text, credits: c, grade: grade.value });
+    name.value = "";
+    credits.value = "";
+    name.focus();
+    save();
+    render();
+  }
+
+  name.addEventListener("keydown", (event) => { if (event.key === "Enter") add(); });
+  addButton.addEventListener("click", add);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Course", name), row(panel("Credits", credits), panel("Grade", grade))),
+      stack(stats, panel("Courses", listWrap))
+    ),
+    foot: actions(copyButton(() => {
+      const { totalCredits, gpa } = totals();
+      return gpa == null ? "" : `GPA ${fmt(gpa)}, credits ${fmt(totalCredits)}`;
+    }, "Copy result"), addButton),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,101 @@
+// Weighted components with a check that the weights add up to 100.
+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 fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 2 });
+}
+
+export function mount(slot) {
+  const PIN = "grade-calculator";
+  const saved = readPin(PIN, []);
+  let list = Array.isArray(saved) ? saved : [];
+
+  const name = textInput({ placeholder: "Component", "aria-label": "Component" });
+  const score = numberInput({ min: "0", max: "100", placeholder: "Score", "aria-label": "Score" });
+  const weight = numberInput({ min: "0", max: "100", placeholder: "Weight", "aria-label": "Weight" });
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+  const weightNote = notice("warn");
+
+  const addButton = button("Add", { icon: "plus", kind: "fill" });
+
+  const save = () => writePin(PIN, list);
+  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 totalWeight = () => list.reduce((sum, item) => sum + item.weight, 0);
+  const grade = () => {
+    const weightSum = totalWeight();
+    if (!weightSum) return null;
+    return list.reduce((sum, item) => sum + item.score * item.weight, 0) / weightSum;
+  };
+
+  function removeButton(item) {
+    const node = button("", { icon: "trash", "aria-label": `Remove ${item.name}` });
+    node.addEventListener("click", () => {
+      list = list.filter((entry) => entry.id !== item.id);
+      save();
+      render();
+    });
+    return node;
+  }
+
+  function render() {
+    if (!list.length) {
+      listWrap.replaceChildren(blank("graduation-cap", "No components yet."));
+    } else {
+      listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+        el("thead", {}, el("tr", {}, el("th", {}, "Component"), el("th", {}, "Score"), el("th", {}, "Weight"), el("th", {}, ""))),
+        el("tbody", {}, ...list.map((item) => el("tr", {},
+          el("th", {}, item.name),
+          el("td", {}, fmt(item.score)),
+          el("td", {}, `${fmt(item.weight)}%`),
+          el("td", {}, removeButton(item)))))));
+    }
+    const weightSum = totalWeight();
+    const result = grade();
+    stats.replaceChildren(tile("Grade", result == null ? "-" : fmt(result)), tile("Weight", `${fmt(weightSum)}%`));
+    weightNote.write(list.length && Math.abs(weightSum - 100) > 0.001 ? `The weights add up to ${fmt(weightSum)}%, not 100.` : "");
+  }
+
+  function add() {
+    const text = name.value.trim();
+    if (!text) return toast("Name the component first");
+    const s = Number(score.value);
+    const w = Number(weight.value);
+    if (score.value.trim() === "" || weight.value.trim() === "" || !Number.isFinite(s) || !Number.isFinite(w)) {
+      return toast("Add a score and a weight");
+    }
+    if (s < 0 || w < 0) return toast("Score and weight cannot be negative");
+    list.push({ id: uid(), name: text, score: s, weight: w });
+    name.value = "";
+    score.value = "";
+    weight.value = "";
+    name.focus();
+    save();
+    render();
+  }
+
+  name.addEventListener("keydown", (event) => { if (event.key === "Enter") add(); });
+  addButton.addEventListener("click", add);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Component", name), row(panel("Score", score), panel("Weight", weight)), weightNote),
+      stack(stats, panel("Components", listWrap))
+    ),
+    foot: actions(copyButton(() => {
+      const result = grade();
+      return result == null ? "" : `Grade ${fmt(result)}, total weight ${fmt(totalWeight())}%`;
+    }, "Copy result"), addButton),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,99 @@
+// Make a CSS gradient: linear or radial, with color stops you control.
+import { el, bench, stack, panel, chipRow, colorInput, rangeInput, output, button, copyButton, actions, toolcard } from "../core.js";
+
+export function mount(slot) {
+  let type = "linear";
+  let angle = 90;
+  const stops = [
+    { color: "#f5b942", pos: 0 },
+    { color: "#8a2be2", pos: 100 },
+  ];
+
+  const stopsBox = el("div", { class: "mvb-stack" });
+  const previewBox = el("div", { class: "mvb-preview__box" });
+  const code = output();
+
+  function gradientCss() {
+    const list = stops.map((stop) => `${stop.color} ${stop.pos}%`).join(", ");
+    return type === "linear" ? `linear-gradient(${angle}deg, ${list})` : `radial-gradient(circle, ${list})`;
+  }
+
+  function update() {
+    const value = gradientCss();
+    previewBox.style.background = value;
+    code.write(`background: ${value};`);
+  }
+
+  function stopRow(stop, index) {
+    const picker = colorInput({ value: stop.color, "aria-label": "Stop color" });
+    picker.addEventListener("input", () => { stop.color = picker.value; update(); });
+
+    const range = rangeInput({ min: 0, max: 100, value: stop.pos, "aria-label": "Stop position" });
+    range.style.flex = "1";
+    const val = el("span", { class: "mvb-slider__val" }, `${stop.pos}%`);
+    range.addEventListener("input", () => {
+      stop.pos = parseInt(range.value, 10) || 0;
+      val.textContent = `${stop.pos}%`;
+      update();
+    });
+
+    const remove = button("", { icon: "minus", "aria-label": "Remove stop" });
+    remove.disabled = stops.length <= 2;
+    remove.addEventListener("click", () => {
+      stops.splice(index, 1);
+      paintStops();
+      update();
+    });
+
+    return el("div", { class: "mvb-row" }, picker, range, val, remove);
+  }
+
+  function paintStops() {
+    stopsBox.replaceChildren(...stops.map((stop, i) => stopRow(stop, i)));
+  }
+
+  const addStop = button("Add stop", { icon: "plus" });
+  addStop.addEventListener("click", () => {
+    const last = stops[stops.length - 1];
+    const prev = stops[stops.length - 2];
+    const pos = Math.round(((prev?.pos ?? 0) + last.pos) / 2);
+    stops.push({ color: "#ffffff", pos: Number.isFinite(pos) ? pos : 50 });
+    paintStops();
+    update();
+  });
+
+  const angleInput = rangeInput({ min: 0, max: 360, value: angle, "aria-label": "Angle" });
+  const angleVal = el("span", { class: "mvb-slider__val" }, `${angle}deg`);
+  const angleRow = el(
+    "div",
+    { class: "mvb-slider" },
+    el("span", { class: "mvb-slider__label" }, "Angle"),
+    angleInput,
+    angleVal
+  );
+  angleInput.addEventListener("input", () => {
+    angle = parseInt(angleInput.value, 10) || 0;
+    angleVal.textContent = `${angle}deg`;
+    update();
+  });
+
+  const typeChips = chipRow(
+    [{ value: "linear", label: "Linear" }, { value: "radial", label: "Radial" }],
+    { value: type, label: "Type", onChange: (value) => { type = value; angleRow.hidden = value !== "linear"; update(); } }
+  );
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Type", typeChips), angleRow, panel("Color stops", stopsBox), addStop),
+      stack(el("div", { class: "mvb-preview" }, previewBox), code)
+    ),
+    foot: actions(copyButton(() => `background: ${gradientCss()};`, "Copy CSS", "fill")),
+  });
+  slot.append(card.node);
+  paintStops();
+  update();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/habit-tracker.js

@@ -0,0 +1,120 @@
+// Tracks a week of habits and shows the count and the current streak.
+import { el, toast, bench, stack, panel, textInput, checkbox, button, actions, toolcard, readPin, writePin } from "../core.js";
+
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const todayIndex = () => (new Date().getDay() + 6) % 7;
+
+export function mount(slot) {
+  const PIN = "habit-tracker";
+  const saved = readPin(PIN, []);
+  let list = Array.isArray(saved) ? saved : [];
+
+  const name = textInput({ placeholder: "Habit", "aria-label": "Habit" });
+  const tableWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+
+  const addButton = button("Add", { icon: "plus", kind: "fill" });
+  const clearWeek = button("Clear week", { icon: "trash" });
+
+  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 save = () => writePin(PIN, list);
+  const today = todayIndex();
+
+  function streak(habit) {
+    let i = today;
+    if (!habit.days[i]) i -= 1;
+    let count = 0;
+    while (i >= 0 && habit.days[i]) {
+      count++;
+      i--;
+    }
+    return count;
+  }
+
+  function removeButton(habit) {
+    const node = button("", { icon: "trash", "aria-label": `Remove ${habit.name}` });
+    node.addEventListener("click", () => {
+      list = list.filter((entry) => entry.id !== habit.id);
+      save();
+      render();
+    });
+    return node;
+  }
+
+  function dayCell(habit, i) {
+    const box = checkbox("", { checked: habit.days[i], "aria-label": `${habit.name} ${DAYS[i]}` });
+    box.input.addEventListener("change", () => {
+      habit.days[i] = box.input.checked;
+      save();
+      render();
+    });
+    return el("td", {}, box);
+  }
+
+  function render() {
+    if (!list.length) {
+      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "No habits yet."));
+    } else {
+      const head = el("tr", {},
+        el("th", {}, "Habit"),
+        ...DAYS.map((label) => el("th", {}, label)),
+        el("th", {}, "Done"),
+        el("th", {}, "Streak"),
+        el("th", {}, "")
+      );
+      const rows = list.map((habit) => el("tr", {},
+        el("th", {}, habit.name),
+        ...habit.days.map((_, i) => dayCell(habit, i)),
+        el("td", {}, String(habit.days.filter(Boolean).length)),
+        el("td", {}, String(streak(habit))),
+        el("td", {}, removeButton(habit))
+      ));
+      tableWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+        el("thead", {}, head),
+        el("tbody", {}, ...rows)
+      ));
+    }
+
+    const doneToday = list.filter((habit) => habit.days[today]).length;
+    stats.replaceChildren(tile("Habits", list.length), tile("Done today", doneToday));
+    clearWeek.disabled = !list.some((habit) => habit.days.some(Boolean));
+  }
+
+  function add() {
+    const text = name.value.trim();
+    if (!text) return toast("Type a habit first");
+    list.push({ id: uid(), name: text, days: [false, false, false, false, false, false, false] });
+    name.value = "";
+    name.focus();
+    save();
+    render();
+  }
+
+  name.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") add();
+  });
+  addButton.addEventListener("click", add);
+  clearWeek.addEventListener("click", () => {
+    for (const habit of list) habit.days = [false, false, false, false, false, false, false];
+    save();
+    render();
+  });
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Habit", name)),
+      stack(stats, panel("Week", tableWrap))
+    ),
+    foot: actions(clearWeek, addButton),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,90 @@
+// Builds a Harvard style reference and its in-text citation from source details.
+import { bench, stack, panel, textInput, selectInput, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+const TYPES = [
+  { value: "book", label: "Book" },
+  { value: "article", label: "Journal article" },
+  { value: "web", label: "Web page" },
+];
+
+const parts = (raw) => raw.split(";").map((item) => item.trim()).filter(Boolean);
+const surname = (author) => author.split(",")[0].trim();
+
+function authorList(raw) {
+  const list = parts(raw);
+  if (!list.length) return "";
+  if (list.length === 1) return list[0];
+  if (list.length === 2) return `${list[0]} and ${list[1]}`;
+  return `${list[0]} et al.`;
+}
+
+function inText(raw, year) {
+  const list = parts(raw);
+  const y = year.trim();
+  if (!list.length) return y ? `(${y})` : "";
+  if (list.length === 1) return `(${surname(list[0])}, ${y})`;
+  if (list.length === 2) return `(${surname(list[0])} and ${surname(list[1])}, ${y})`;
+  return `(${surname(list[0])} et al., ${y})`;
+}
+
+export function mount(slot) {
+  const type = selectInput(TYPES, { value: "book", "aria-label": "Source type" });
+  const authors = textInput({ placeholder: "Smith, J.; Doe, B.", "aria-label": "Authors" });
+  const year = textInput({ placeholder: "2020", "aria-label": "Year" });
+  const title = textInput({ placeholder: "Title of the work", "aria-label": "Title" });
+  const source = textInput({ placeholder: "Publisher, journal or site", "aria-label": "Source" });
+  const details = textInput({ placeholder: "Volume, issue, pages", "aria-label": "Details" });
+  const link = textInput({ placeholder: "https://example.com", "aria-label": "URL" });
+
+  const reference = output({ rows: 6 });
+  const citation = output({ rows: 2 });
+  const note = notice("note");
+  note.write("Harvard rules differ between institutions. Check yours and the source.");
+  let refText = "";
+
+  function build() {
+    const au = authorList(authors.value);
+    const yr = year.value.trim();
+    const ti = title.value.trim();
+    const src = source.value.trim();
+    const det = details.value.trim();
+    const url = link.value.trim();
+    const head = [au, yr ? `(${yr})` : ""].filter(Boolean).join(" ");
+
+    const tail = [src, det].filter(Boolean).join(", ");
+    const body = type.value === "article" ? [ti ? `'${ti}'` : "", tail, url] : [ti, tail, url];
+    refText = [head, ...body].filter(Boolean).join(" ").trim();
+    if (refText && !/[.!?]$/.test(refText)) refText += ".";
+    reference.write(refText);
+    citation.write(inText(authors.value, yr));
+  }
+
+  for (const input of [authors, year, title, source, details, link]) input.addEventListener("input", build);
+  type.addEventListener("change", build);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Source type", type),
+        panel("Authors", authors),
+        panel("Year", year),
+        panel("Title", title),
+        panel("Source", source),
+        panel("Details", details),
+        panel("URL", link),
+        note
+      ),
+      stack(panel("Reference", reference), panel("In-text citation", citation))
+    ),
+    foot: actions(
+      copyButton(() => citation.textContent, "Copy in-text"),
+      copyButton(() => refText, "Copy reference", "fill")
+    ),
+  });
+  slot.append(card.node);
+  build();
+
+  return {};
+}
+
+export default { mount };