mevebu 0.3.0 → 0.4.0

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

@@ -0,0 +1,83 @@
+// Mean, median and mode from a list of numbers.
+import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 6 });
+}
+
+function parseNumbers(text) {
+  const tokens = text.split(/[\s,;]+/).filter(Boolean);
+  const nums = tokens.map(Number);
+  return { nums, invalid: nums.some((n) => !Number.isFinite(n)) };
+}
+
+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 source = textArea({ rows: 8, value: "4, 8, 15, 16, 23, 42", "aria-label": "Numbers", placeholder: "4, 8, 15, 16, 23, 42" });
+  const mean = tile("Mean");
+  const median = tile("Median");
+  const mode = tile("Mode");
+  const count = tile("Count");
+  const sum = tile("Sum");
+  const stats = el("div", { class: "mvb-stats" }, mean, median, mode, count, sum);
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    for (const item of [mean, median, mode, count, sum]) item.set("-");
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const { nums, invalid } = parseNumbers(source.value);
+    if (!nums.length) {
+      clear();
+      return;
+    }
+    if (invalid) {
+      clear();
+      error.write("Use numbers only, separated by spaces, commas or new lines.");
+      return;
+    }
+    const total = nums.reduce((acc, n) => acc + n, 0);
+    const average = total / nums.length;
+    const sorted = nums.slice().sort((x, y) => x - y);
+    const middle = Math.floor(sorted.length / 2);
+    const med = sorted.length % 2 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2;
+
+    const counts = new Map();
+    for (const n of nums) counts.set(n, (counts.get(n) ?? 0) + 1);
+    const top = Math.max(...counts.values());
+    const modes = top > 1 ? [...counts].filter(([, hits]) => hits === top).map(([value]) => value) : [];
+
+    mean.set(fmt(average));
+    median.set(fmt(med));
+    mode.set(modes.length ? modes.map(fmt).join(", ") : "None");
+    count.set(String(nums.length));
+    sum.set(fmt(total));
+    text = `Count ${nums.length}, sum ${fmt(total)}, mean ${fmt(average)}, median ${fmt(med)}, mode ${modes.length ? modes.map(fmt).join(", ") : "none"}`;
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Numbers", source), error),
+      stack(stats)
+    ),
+    foot: actions(copyButton(() => text, "Copy summary", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/bibliography-sorter.js

@@ -0,0 +1,43 @@
+// Sorts a reference list alphabetically by the start of each line.
+import { bench, stack, panel, textArea, selectInput, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+const DIRECTIONS = [
+  { value: "az", label: "A to Z" },
+  { value: "za", label: "Z to A" },
+];
+
+export function mount(slot) {
+  const source = textArea({ rows: 12, "aria-label": "References", placeholder: "One reference per line" });
+  const direction = selectInput(DIRECTIONS, { value: "az", "aria-label": "Direction" });
+  const result = output({ rows: 12 });
+  const note = notice("note");
+  note.write("References are ordered by the start of each line.");
+  let text = "";
+
+  function run() {
+    const lines = source.value.split(/\r?\n/).filter((line) => line.trim());
+    const sorted = lines
+      .slice()
+      .sort((a, b) => a.trim().localeCompare(b.trim(), undefined, { sensitivity: "base", numeric: true }));
+    if (direction.value === "za") sorted.reverse();
+    text = sorted.join("\n");
+    result.write(text);
+  }
+
+  source.addEventListener("input", run);
+  direction.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("References", source), panel("Direction", direction), note),
+      stack(panel("Sorted", result))
+    ),
+    foot: actions(copyButton(() => text, "Copy list", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,98 @@
+// Builds a BibTeX entry with a citation key from source details.
+import { bench, stack, panel, textInput, selectInput, output, notice, copyButton, downloadButton, actions, toolcard } from "../core.js";
+
+const TYPES = [
+  { value: "article", label: "Article" },
+  { value: "book", label: "Book" },
+  { value: "inproceedings", label: "In proceedings" },
+];
+
+const parts = (raw) => raw.split(";").map((item) => item.trim()).filter(Boolean);
+const surname = (author) => author.split(",")[0].trim().replace(/[^A-Za-z]/g, "");
+
+function bibAuthors(raw) {
+  const list = parts(raw);
+  return list.join(" and ");
+}
+
+function makeKey(authors, year) {
+  const first = parts(authors)[0] ? surname(parts(authors)[0]) : "ref";
+  return `${first}${year}`.toLowerCase() || "entry";
+}
+
+export function mount(slot) {
+  const type = selectInput(TYPES, { value: "article", "aria-label": "Entry type" });
+  const key = textInput({ placeholder: "Derived from the first author and year", "aria-label": "Citation key" });
+  const authors = textInput({ placeholder: "Smith, J. A.; Doe, B.", "aria-label": "Authors" });
+  const title = textInput({ placeholder: "Title of the work", "aria-label": "Title" });
+  const year = textInput({ placeholder: "2020", "aria-label": "Year" });
+  const container = textInput({ placeholder: "Journal or book title", "aria-label": "Journal or book title" });
+  const volume = textInput({ placeholder: "12", "aria-label": "Volume" });
+  const pages = textInput({ placeholder: "34-45", "aria-label": "Pages" });
+  const publisher = textInput({ placeholder: "Publisher", "aria-label": "Publisher" });
+  const doi = textInput({ placeholder: "10.0000/abc", "aria-label": "DOI" });
+
+  const result = output({ rows: 14 });
+  const note = notice("note");
+  note.write("Check the details against the source and the target style guide.");
+  let bibText = "";
+
+  function build() {
+    const fields = [];
+    const au = bibAuthors(authors.value);
+    if (au) fields.push(["author", au]);
+    if (title.value.trim()) fields.push(["title", title.value.trim()]);
+    if (type.value === "article") {
+      if (container.value.trim()) fields.push(["journal", container.value.trim()]);
+    } else if (type.value === "inproceedings") {
+      if (container.value.trim()) fields.push(["booktitle", container.value.trim()]);
+    } else if (publisher.value.trim()) {
+      fields.push(["publisher", publisher.value.trim()]);
+    }
+    if (year.value.trim()) fields.push(["year", year.value.trim()]);
+    if (type.value === "article" && volume.value.trim()) fields.push(["volume", volume.value.trim()]);
+    if (pages.value.trim()) fields.push(["pages", pages.value.trim()]);
+    if (type.value === "inproceedings" && publisher.value.trim()) fields.push(["publisher", publisher.value.trim()]);
+    if (doi.value.trim()) fields.push(["doi", doi.value.trim()]);
+
+    const entryKey = key.value.trim() || makeKey(authors.value, year.value.trim());
+    const lines = fields.map(([name, value]) => `  ${name} = {${value}},`);
+    if (lines.length) lines[lines.length - 1] = lines[lines.length - 1].replace(/,$/, "");
+    bibText = [`@${type.value}{${entryKey},`, ...lines, "}"].join("\n");
+    result.write(bibText);
+  }
+
+  for (const input of [key, authors, title, year, container, volume, pages, publisher, doi]) {
+    input.addEventListener("input", build);
+  }
+  type.addEventListener("change", build);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Entry type", type),
+        panel("Citation key", key),
+        panel("Authors", authors),
+        panel("Title", title),
+        panel("Year", year),
+        panel("Journal or book title", container),
+        panel("Volume", volume),
+        panel("Pages", pages),
+        panel("Publisher", publisher),
+        panel("DOI", doi),
+        note
+      ),
+      stack(panel("BibTeX entry", result))
+    ),
+    foot: actions(
+      downloadButton(() => bibText, "reference.bib", "Save .bib", "text/plain"),
+      copyButton(() => bibText, "Copy entry", "fill")
+    ),
+  });
+  slot.append(card.node);
+  build();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,58 @@
+// Adds or subtracts two binary numbers and shows the result in binary and decimal.
+import { el, bench, stack, panel, textInput, chipRow, notice, copyButton, actions, toolcard } from "../core.js";
+
+function parse(text) {
+  const clean = text.trim().replace(/[\s_]/g, "").replace(/^0b/i, "");
+  if (!clean || !/^[01]+$/.test(clean)) return null;
+  return BigInt(`0b${clean}`);
+}
+
+export function mount(slot) {
+  const first = textInput({ value: "1011", class: "mvb-in mvb-in--mono", "aria-label": "First number" });
+  const second = textInput({ value: "0110", class: "mvb-in mvb-in--mono", "aria-label": "Second number" });
+  const result = el("span", { class: "mvb-stat__v" }, "-");
+  const stats = el("div", { class: "mvb-stats" }, el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__k" }, "Binary"), result));
+  const decimal = el("p", { class: "mvb-note" });
+  const error = notice("error");
+  let mode = "add";
+  let text = "";
+
+  const chips = chipRow(
+    [{ value: "add", label: "Add" }, { value: "subtract", label: "Subtract" }],
+    { value: mode, label: "Operation", onChange: (value) => { mode = value; run(); } }
+  );
+
+  function run() {
+    error.write("");
+    const a = parse(first.value);
+    const b = parse(second.value);
+    if (a === null || b === null) {
+      result.textContent = "-";
+      decimal.textContent = "";
+      text = "";
+      error.write("Use only 0 and 1.");
+      return;
+    }
+    const value = mode === "add" ? a + b : a - b;
+    result.textContent = value.toString(2);
+    decimal.textContent = `Decimal ${value.toString(10)}`;
+    text = `${value.toString(2)} (decimal ${value.toString(10)})`;
+  }
+
+  first.addEventListener("input", run);
+  second.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("First number", first), panel("Second number", second), panel("Operation", chips), error),
+      stack(panel("Result", stats), decimal)
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/border-radius.js

@@ -0,0 +1,88 @@
+// Round the corners of a box, each corner on its own or linked.
+import { el, bench, stack, rangeInput, switchControl, output, copyButton, actions, toolcard } from "../core.js";
+
+const KEYS = ["tl", "tr", "br", "bl"];
+
+function slider(label, value) {
+  const input = rangeInput({ min: 0, max: 100, value, "aria-label": label });
+  const val = el("span", { class: "mvb-slider__val" }, `${value}px`);
+  const node = el(
+    "div",
+    { class: "mvb-slider" },
+    el("span", { class: "mvb-slider__label" }, label),
+    input,
+    val
+  );
+  node.input = input;
+  node.value = () => parseFloat(input.value) || 0;
+  node.setVal = (text) => { val.textContent = text; };
+  return node;
+}
+
+export function mount(slot) {
+  const corners = { tl: 16, tr: 16, br: 16, bl: 16 };
+  let linked = true;
+
+  const sliders = {
+    tl: slider("Top left", corners.tl),
+    tr: slider("Top right", corners.tr),
+    br: slider("Bottom right", corners.br),
+    bl: slider("Bottom left", corners.bl),
+  };
+
+  const linkSwitch = switchControl("Link corners", { checked: true });
+  const previewBox = el("div", { class: "mvb-preview__box" });
+  const code = output();
+
+  function css() {
+    const { tl, tr, br, bl } = corners;
+    if (tl === tr && tr === br && br === bl) return `border-radius: ${tl}px;`;
+    return `border-radius: ${tl}px ${tr}px ${br}px ${bl}px;`;
+  }
+
+  function update() {
+    previewBox.style.borderRadius = `${corners.tl}px ${corners.tr}px ${corners.br}px ${corners.bl}px`;
+    code.write(css());
+  }
+
+  function sync(value) {
+    for (const key of KEYS) {
+      corners[key] = value;
+      sliders[key].input.value = value;
+      sliders[key].setVal(`${value}px`);
+    }
+  }
+
+  for (const key of KEYS) {
+    const control = sliders[key];
+    control.input.addEventListener("input", () => {
+      const value = control.value();
+      if (linked) sync(value);
+      else corners[key] = value;
+      control.setVal(`${value}px`);
+      update();
+    });
+  }
+
+  linkSwitch.input.addEventListener("change", () => {
+    linked = linkSwitch.input.checked;
+    if (linked) {
+      sync(corners.tl);
+      update();
+    }
+  });
+
+  const card = toolcard({
+    body: bench(
+      stack(linkSwitch, sliders.tl, sliders.tr, sliders.br, sliders.bl),
+      stack(el("div", { class: "mvb-preview" }, previewBox), code)
+    ),
+    foot: actions(copyButton(css, "Copy CSS", "fill")),
+  });
+  slot.append(card.node);
+  update();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/box-shadow.js

@@ -0,0 +1,71 @@
+// Build a CSS box-shadow with a live preview.
+import { el, bench, stack, panel, rangeInput, colorInput, switchControl, output, copyButton, actions, toolcard } from "../core.js";
+
+function hexToRgb(hex) {
+  const clean = String(hex).trim().replace(/^#/, "");
+  const value = parseInt(clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean, 16);
+  return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };
+}
+
+function slider(label, { min, max, value, unit = "px" }) {
+  const input = rangeInput({ min, max, value, "aria-label": label });
+  const val = el("span", { class: "mvb-slider__val" }, `${value}${unit}`);
+  const node = el(
+    "div",
+    { class: "mvb-slider" },
+    el("span", { class: "mvb-slider__label" }, label),
+    input,
+    val
+  );
+  node.input = input;
+  node.value = () => parseFloat(input.value) || 0;
+  node.setVal = (text) => { val.textContent = text; };
+  return node;
+}
+
+export function mount(slot) {
+  const x = slider("X offset", { min: -50, max: 50, value: 0 });
+  const y = slider("Y offset", { min: -50, max: 50, value: 8 });
+  const blur = slider("Blur", { min: 0, max: 100, value: 24 });
+  const spread = slider("Spread", { min: -50, max: 50, value: 0 });
+  const opacity = slider("Opacity", { min: 0, max: 100, value: 35, unit: "%" });
+  const picker = colorInput({ value: "#1b1b1f", "aria-label": "Shadow color" });
+  const inset = switchControl("Inset", {});
+  const previewBox = el("div", { class: "mvb-preview__box" });
+  const code = output();
+
+  function css() {
+    const { r, g, b } = hexToRgb(picker.value);
+    const a = (opacity.value() / 100).toFixed(2);
+    return `${inset.input.checked ? "inset " : ""}${x.value()}px ${y.value()}px ${blur.value()}px ${spread.value()}px rgba(${r}, ${g}, ${b}, ${a})`;
+  }
+
+  function update() {
+    previewBox.style.boxShadow = css();
+    code.write(`box-shadow: ${css()};`);
+  }
+
+  for (const control of [x, y, blur, spread, opacity]) {
+    control.input.addEventListener("input", () => {
+      const unit = control === opacity ? "%" : "px";
+      control.setVal(`${control.value()}${unit}`);
+      update();
+    });
+  }
+  picker.addEventListener("input", update);
+  inset.input.addEventListener("change", update);
+
+  const card = toolcard({
+    body: bench(
+      stack(x, y, blur, spread, opacity, panel("Color", picker), inset),
+      stack(el("div", { class: "mvb-preview" }, previewBox), code)
+    ),
+    foot: actions(copyButton(() => `box-shadow: ${css()};`, "Copy CSS", "fill")),
+  });
+  slot.append(card.node);
+  update();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/branch-name.js

@@ -0,0 +1,44 @@
+// Turns a task description into a branch name with a type prefix.
+import { bench, stack, panel, textInput, chipRow, output, copyButton, actions, toolcard } from "../core.js";
+
+const TYPES = [
+  { value: "feat", label: "feat" },
+  { value: "fix", label: "fix" },
+  { value: "chore", label: "chore" },
+  { value: "docs", label: "docs" },
+  { value: "refactor", label: "refactor" },
+  { value: "test", label: "test" },
+];
+
+const slugify = (text) => text.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 50);
+
+export function mount(slot) {
+  const description = textInput({ value: "Add dark mode", "aria-label": "Task" });
+  const out = output({ rows: 1 });
+  let type = "feat";
+  let text = "";
+
+  const chips = chipRow(TYPES, { value: type, label: "Type", onChange: (value) => { type = value; run(); } });
+
+  function run() {
+    const slug = slugify(description.value);
+    text = slug ? `${type}/${slug}` : "";
+    out.write(text);
+  }
+
+  description.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Type", chips), panel("Task", description)),
+      stack(panel("Branch name", out))
+    ),
+    foot: actions(copyButton(() => text, "Copy branch name", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/break-even.js

@@ -0,0 +1,68 @@
+// Units and revenue needed to cover the fixed costs.
+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 fixed = numberInput({ value: "1000", min: "0", "aria-label": "Fixed costs" });
+  const price = numberInput({ value: "25", min: "0", "aria-label": "Price per unit" });
+  const variable = numberInput({ value: "15", min: "0", "aria-label": "Variable cost per unit" });
+  const unitsTile = tile("Break-even units");
+  const revenueTile = tile("Revenue");
+  const marginTile = tile("Contribution");
+  const stats = el("div", { class: "mvb-stats" }, unitsTile, revenueTile, marginTile);
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    unitsTile.set("-");
+    revenueTile.set("-");
+    marginTile.set("-");
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const inputs = [fixed, price, variable];
+    const values = inputs.map((input) => Number(input.value));
+    if (inputs.some((input) => input.value.trim() === "") || !values.every(Number.isFinite)) {
+      clear();
+      return;
+    }
+    const [f, p, v] = values;
+    if (f < 0 || p < 0 || v < 0) { clear(); error.write("The values cannot be negative."); return; }
+    const contribution = p - v;
+    if (contribution <= 0) { clear(); error.write("The price must be above the variable cost."); return; }
+    const units = Math.ceil(f / contribution);
+    const revenue = units * p;
+    unitsTile.set(String(units));
+    revenueTile.set(fmt(revenue));
+    marginTile.set(fmt(contribution));
+    text = `Break-even ${units} units, revenue ${fmt(revenue)}, contribution ${fmt(contribution)}`;
+  }
+
+  for (const input of [fixed, price, variable]) input.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Fixed costs", fixed), panel("Price per unit", price), panel("Variable cost per unit", variable), error),
+      stack(stats)
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/business-days.js

@@ -0,0 +1,120 @@
+// Counts working days between two dates, skipping weekends and listed holidays.
+import { el, bench, stack, panel, textInput, textArea, checkbox, toggleRow, notice, copyButton, actions, toolcard } from "../core.js";
+
+const DAY = 86400000;
+const DAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+const pad = (n) => String(n).padStart(2, "0");
+
+function parseDate(value) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match) return null;
+  const year = Number(match[1]);
+  const month = Number(match[2]) - 1;
+  const day = Number(match[3]);
+  const date = new Date(year, month, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) return null;
+  return date;
+}
+
+const iso = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+
+const kvRow = (key, value) =>
+  el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), el("span", { class: "mvb-kv__v" }, value));
+
+export function mount(slot) {
+  const start = textInput({ type: "date", value: "2026-01-01", "aria-label": "Start date" });
+  const end = textInput({ type: "date", value: "2026-01-31", "aria-label": "End date" });
+  const includeEnd = checkbox("Count the end date", { checked: true });
+  const weekdays = toggleRow(DAY_LABELS.map((label, index) => ({ value: index, label, checked: index >= 1 && index <= 5 })));
+  const holidays = textArea({ rows: 4, placeholder: "2026-01-01", "aria-label": "Holidays, one per line" });
+
+  const working = el("span", { class: "mvb-kv__v" }, "-");
+  const calendar = el("span", { class: "mvb-kv__v" }, "-");
+  const weekend = el("span", { class: "mvb-kv__v" }, "-");
+  const holidayCount = el("span", { class: "mvb-kv__v" }, "-");
+  const kv = el(
+    "div",
+    { class: "mvb-kv" },
+    kvRow("Working days", working),
+    kvRow("Calendar days", calendar),
+    kvRow("Weekend days", weekend),
+    kvRow("Holidays", holidayCount)
+  );
+  const error = notice("error");
+  let text = "";
+
+  function clear() {
+    working.textContent = "-";
+    calendar.textContent = "-";
+    weekend.textContent = "-";
+    holidayCount.textContent = "-";
+    text = "";
+  }
+
+  function run() {
+    error.write("");
+    const a = parseDate(start.value);
+    const b = parseDate(end.value);
+    if (!a || !b) {
+      clear();
+      error.write("Pick a valid start and end date.");
+      return;
+    }
+    if (b < a) {
+      clear();
+      error.write("The end date is before the start date.");
+      return;
+    }
+    const rangeEnd = includeEnd.input.checked ? b : new Date(b.getFullYear(), b.getMonth(), b.getDate() - 1);
+    const workingSet = new Set(weekdays.values().map(Number));
+    const holidaySet = new Set();
+    for (const line of holidays.value.split("\n")) {
+      const date = parseDate(line.trim());
+      if (date) holidaySet.add(iso(date));
+    }
+
+    let work = 0;
+    let rest = 0;
+    let off = 0;
+    const cursor = new Date(a.getFullYear(), a.getMonth(), a.getDate());
+    while (cursor <= rangeEnd) {
+      if (!workingSet.has(cursor.getDay())) rest += 1;
+      else if (holidaySet.has(iso(cursor))) off += 1;
+      else work += 1;
+      cursor.setDate(cursor.getDate() + 1);
+    }
+
+    const total = rangeEnd < a ? 0 : Math.round((rangeEnd - a) / DAY) + 1;
+    working.textContent = String(work);
+    calendar.textContent = String(total);
+    weekend.textContent = String(rest);
+    holidayCount.textContent = String(off);
+    text = `${work} working days`;
+  }
+
+  for (const input of [start, end]) input.addEventListener("input", run);
+  includeEnd.input.addEventListener("change", run);
+  holidays.addEventListener("input", run);
+  weekdays.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Start", start),
+        panel("End", end),
+        includeEnd,
+        weekdays,
+        error
+      ),
+      stack(panel("Holidays", holidays), panel("Count", kv))
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };