mevebu 1.10.0 → 2.0.0

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

@@ -0,0 +1,182 @@
+// Plain text into a PDF with real page breaks. Lines are wrapped against the
+// chosen font's own metrics, so nothing runs off the margin.
+import {
+  el, toast, download, bench, stack, panel, textArea, textInput, selectInput,
+  numberInput, button, actions, toolcard, notice, checkbox,
+} from "../core.js";
+import { loadPdfLib } from "../pdf-engine.js";
+import { formatBytes } from "../files.js";
+
+const PAGES = {
+  a4: { label: "A4", width: 595.28, height: 841.89 },
+  letter: { label: "Letter", width: 612, height: 792 },
+};
+
+const SAMPLE = `mevebu
+
+Small tools that run in your browser.
+No account, no upload, no tracking.
+
+Paste your own text here, then press Build PDF.`;
+
+export function mount(slot) {
+  let busy = false;
+  let token = 0;
+
+  const body = textArea({ rows: 14, value: SAMPLE, "aria-label": "Text" });
+  const title = textInput({ placeholder: "Optional title", "aria-label": "Title" });
+  const size = selectInput(
+    Object.entries(PAGES).map(([value, page]) => ({ value, label: page.label })),
+    { value: "a4", "aria-label": "Page size" }
+  );
+  const margin = numberInput({ min: "18", max: "108", step: "6", value: "54", "aria-label": "Margin in points" });
+  const fontSize = numberInput({ min: "8", max: "24", step: "1", value: "11", "aria-label": "Font size" });
+  const leading = numberInput({ min: "1", max: "2.5", step: "0.1", value: "1.5", "aria-label": "Line height" });
+  const numbers = checkbox("Page numbers", { checked: true });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const buildButton = button("Build PDF", { icon: "file-text", kind: "fill" });
+
+  function wrap(text, font, maxWidth, sizeValue) {
+    const lines = [];
+    for (const raw of text.replace(/\r\n?/g, "\n").split("\n")) {
+      if (!raw.trim()) {
+        lines.push("");
+        continue;
+      }
+      const words = raw.split(/\s+/);
+      let line = "";
+      for (const word of words) {
+        const candidate = line ? `${line} ${word}` : word;
+        if (font.widthOfTextAtSize(candidate, sizeValue) <= maxWidth) {
+          line = candidate;
+          continue;
+        }
+        if (line) lines.push(line);
+        // A single word longer than the line is cut by character.
+        if (font.widthOfTextAtSize(word, sizeValue) <= maxWidth) {
+          line = word;
+          continue;
+        }
+        let piece = "";
+        for (const char of word) {
+          if (font.widthOfTextAtSize(piece + char, sizeValue) > maxWidth) {
+            lines.push(piece);
+            piece = char;
+          } else piece += char;
+        }
+        line = piece;
+      }
+      lines.push(line);
+    }
+    return lines;
+  }
+
+  async function build() {
+    const text = body.value;
+    if (!text.trim() || busy) {
+      error.write("Write something first.");
+      return;
+    }
+    busy = true;
+    const current = ++token;
+    buildButton.disabled = true;
+    summary.textContent = "Building the PDF";
+    error.write("");
+    try {
+      const { PDFDocument, StandardFonts, rgb } = await loadPdfLib();
+      const doc = await PDFDocument.create();
+      const font = await doc.embedFont(StandardFonts.Helvetica);
+      const bold = await doc.embedFont(StandardFonts.HelveticaBold);
+      const page = PAGES[size.value] ?? PAGES.a4;
+      const inset = Math.max(0, Number(margin.value) || 54);
+      const sizeValue = Math.max(6, Number(fontSize.value) || 11);
+      const step = sizeValue * Math.max(1, Number(leading.value) || 1.5);
+      const maxWidth = page.width - inset * 2;
+
+      let sheet = doc.addPage([page.width, page.height]);
+      let y = page.height - inset;
+
+      const heading = title.value.trim();
+      if (heading) {
+        sheet.drawText(heading, { x: inset, y: y - sizeValue * 1.6, size: sizeValue * 1.6, font: bold, color: rgb(0.05, 0.05, 0.05) });
+        y -= sizeValue * 1.6 + step * 0.8;
+      }
+
+      for (const line of wrap(text, font, maxWidth, sizeValue)) {
+        if (y - step < inset) {
+          sheet = doc.addPage([page.width, page.height]);
+          y = page.height - inset;
+        }
+        if (line) {
+          sheet.drawText(line, { x: inset, y: y - sizeValue, size: sizeValue, font, color: rgb(0.1, 0.1, 0.1) });
+        }
+        y -= step;
+      }
+
+      if (numbers.input.checked) {
+        const total = doc.getPageCount();
+        doc.getPages().forEach((pageNode, index) => {
+          const label = `${index + 1} / ${total}`;
+          const width = font.widthOfTextAtSize(label, 8);
+          pageNode.drawText(label, {
+            x: (page.width - width) / 2,
+            y: inset / 2,
+            size: 8,
+            font,
+            color: rgb(0.45, 0.45, 0.45),
+          });
+        });
+      }
+
+      const bytes = await doc.save();
+      const name = `${(heading || "document").replace(/[^\w -]+/g, "").trim().replace(/\s+/g, "-").toLowerCase() || "document"}.pdf`;
+      download(name, new Blob([bytes], { type: "application/pdf" }));
+      summary.textContent = `${doc.getPageCount()} page${doc.getPageCount() === 1 ? "" : "s"} · ${formatBytes(bytes.length)}`;
+      toast("PDF ready");
+    } catch (caught) {
+      summary.textContent = "";
+      error.write(caught?.message || "Could not build the PDF.");
+    } finally {
+      if (current === token) {
+        busy = false;
+        buildButton.disabled = false;
+      }
+    }
+  }
+
+  buildButton.addEventListener("click", build);
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Text", body),
+        panel("Title", title, "Optional. Sits at the top of the first page."),
+        panel("Page size", size),
+        el("div", { class: "grid grid-cols-2 gap-3" },
+          panel("Margin", margin),
+          panel("Font size", fontSize)),
+        panel("Line height", leading),
+        numbers,
+        error
+      ),
+      stack(summary,
+        el("div", { class: "grid gap-2 rounded-r2 border border-orbit bg-deck-2 p-4 text-sm leading-[1.6] text-ink-2" },
+          el("p", { class: "m-0 font-semibold text-ink" }, "What you get"),
+          el("p", { class: "m-0" }, "A PDF with selectable text, wrapped to the margin, with real page breaks."),
+          el("p", { class: "m-0 text-ink-3" }, "The font is Helvetica, which every PDF reader already has, so the file stays small.")))
+    ),
+    foot: actions(buildButton),
+  });
+
+  slot.append(shell.node);
+
+  return {
+    unmount() {
+      token++;
+    },
+  };
+}
+
+export default { mount };

package/mevebu/libs/js/tools/video-converter.js

@@ -0,0 +1,316 @@
+// Video to WebM, or just its audio. The file plays into a canvas and the canvas
+// is recorded, so the conversion runs at real time and needs no WebAssembly
+// encoder. A thirty second clip takes about thirty seconds.
+import {
+  el, toast, download, bench, stack, panel, selectInput, rangeInput, button,
+  actions, toolcard, blank, notice, checkbox,
+} from "../core.js";
+import { dropzone, baseName, formatBytes } from "../files.js";
+
+const HEIGHTS = [
+  { value: "keep", label: "Keep" },
+  { value: "1080", label: "1080p" },
+  { value: "720", label: "720p" },
+  { value: "480", label: "480p" },
+];
+
+function pickMime(preferred) {
+  const candidates = preferred === "audio"
+    ? ["audio/webm;codecs=opus", "audio/webm", "audio/ogg;codecs=opus"]
+    : ["video/webm;codecs=vp9,opus", "video/webm;codecs=vp8,opus", "video/webm"];
+  for (const type of candidates) {
+    if (typeof MediaRecorder !== "undefined" && MediaRecorder.isTypeSupported(type)) return type;
+  }
+  return "";
+}
+
+export function mount(slot) {
+  let file = null;
+  let url = "";
+  let video = null;
+  let recorder = null;
+  let stream = null;
+  let audioContext = null;
+  let frame = 0;
+  let cancelled = false;
+  let busy = false;
+  let token = 0;
+
+  const output = selectInput(
+    [
+      { value: "video", label: "WebM video" },
+      { value: "audio", label: "Audio only (Opus)" },
+    ],
+    { value: "video", "aria-label": "Output" }
+  );
+  const height = selectInput(HEIGHTS, { value: "720", "aria-label": "Resolution" });
+  const bitrate = rangeInput({ min: "1", max: "10", step: "0.5", value: "4", "aria-label": "Bitrate" });
+  const bitrateLabel = el("span", { class: "text-sm font-semibold text-ink-2 tabular-nums" }, "4 Mbps");
+  const bitratePanel = el("div", { class: "grid gap-1.5" },
+    el("span", { class: "text-sm font-semibold text-ink-2" }, "Bitrate"),
+    bitrate,
+    bitrateLabel);
+  const keepAudio = checkbox("Include audio", { checked: true });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const progress = el("div", { class: "h-2 overflow-hidden rounded-full bg-deck-2" },
+    el("div", { class: "h-full w-0 rounded-full bg-jade transition-[width] duration-150" }));
+  const stage = el("div", { class: "grid place-items-center overflow-hidden rounded-r2 border border-orbit bg-deck-2 p-3" });
+  const empty = blank("video", "Open a video to convert it.");
+  const progressBox = el("div", { class: "grid gap-1.5" }, progress);
+
+  const drop = dropzone({ label: "Drop a video here", accept: "video/*", iconName: "video" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const cancelButton = button("Cancel", { icon: "x", kind: "quiet" });
+  const convertButton = button("Convert", { icon: "download", kind: "fill" });
+
+  function sync() {
+    bitrateLabel.textContent = `${Number(bitrate.value).toFixed(1).replace(/\.0$/, "")} Mbps`;
+    const audioOnly = output.value === "audio";
+    height.disabled = audioOnly;
+    keepAudio.hidden = audioOnly;
+    bitratePanel.hidden = audioOnly;
+  }
+
+  function reset() {
+    cancelled = true;
+    token++;
+    cancelAnimationFrame(frame);
+    if (recorder && recorder.state !== "inactive") recorder.stop();
+    recorder = null;
+    stream?.getTracks().forEach((track) => track.stop());
+    stream = null;
+    audioContext?.close().catch(() => {});
+    audioContext = null;
+    if (url) URL.revokeObjectURL(url);
+    url = "";
+    file = null;
+    video = null;
+    stage.replaceChildren();
+    stage.hidden = true;
+    progress.firstElementChild.style.width = "0%";
+    progressBox.hidden = true;
+    summary.textContent = "";
+    error.write("");
+    empty.hidden = false;
+    convertButton.disabled = true;
+    cancelButton.hidden = true;
+    clearButton.disabled = true;
+  }
+
+  async function open(files) {
+    const picked = Array.from(files).find((entry) => entry.type.startsWith("video/") || /\.(mp4|webm|mov|m4v|ogv|mkv)$/i.test(entry.name));
+    if (!picked) {
+      error.write("That file is not a video.");
+      return;
+    }
+    reset();
+    const current = ++token;
+    summary.textContent = "Reading the video";
+    url = URL.createObjectURL(picked);
+    const element = el("video", {
+      src: url,
+      class: "max-h-[320px] w-auto max-w-full rounded-r1 border border-orbit",
+      playsinline: "",
+      preload: "metadata",
+    });
+    try {
+      await new Promise((resolve, reject) => {
+        element.onloadedmetadata = resolve;
+        element.onerror = () => reject(new Error("This video could not be read by the browser."));
+      });
+      if (current !== token) return;
+      file = picked;
+      video = element;
+      stage.replaceChildren(element);
+      stage.hidden = false;
+      empty.hidden = true;
+      convertButton.disabled = false;
+      clearButton.disabled = false;
+      error.write("");
+      const ratio = element.videoWidth && element.videoHeight ? `${element.videoWidth} x ${element.videoHeight}` : "unknown size";
+      summary.textContent = `${picked.name} · ${ratio} · ${element.duration.toFixed(1)} s · ${formatBytes(picked.size)}`;
+      if (!element.captureStream && !element.mozCaptureStream) {
+        error.write("This browser cannot capture a video element, so conversion is unavailable here.");
+      }
+    } catch (caught) {
+      if (current !== token) return;
+      summary.textContent = "";
+      error.write(caught?.message || "This video could not be read.");
+    }
+  }
+
+  function targetSize(sourceWidth, sourceHeight) {
+    const wanted = height.value === "keep" ? sourceHeight : Number(height.value);
+    const scale = Math.min(1, wanted / sourceHeight);
+    const even = (value) => Math.max(2, Math.round(value / 2) * 2);
+    return { width: even(sourceWidth * scale), height: even(sourceHeight * scale) };
+  }
+
+  async function convert() {
+    if (!video || busy) return;
+    const mime = pickMime(output.value);
+    if (!mime) {
+      error.write("This browser has no MediaRecorder support for WebM.");
+      return;
+    }
+    busy = true;
+    cancelled = false;
+    const current = ++token;
+    convertButton.disabled = true;
+    clearButton.disabled = true;
+    cancelButton.hidden = false;
+    progressBox.hidden = false;
+    error.write("");
+    summary.textContent = output.value === "audio" ? "Recording audio" : "Recording video";
+
+    try {
+      const tracks = [];
+      let canvas = null;
+
+      if (output.value === "video") {
+        const { width, height: targetHeight } = targetSize(video.videoWidth || 1280, video.videoHeight || 720);
+        canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = targetHeight;
+        const context = canvas.getContext("2d", { alpha: false });
+        const draw = () => {
+          if (cancelled) return;
+          context.drawImage(video, 0, 0, canvas.width, canvas.height);
+          frame = requestAnimationFrame(draw);
+        };
+        draw();
+        stream = canvas.captureStream(30);
+        tracks.push(...stream.getVideoTracks());
+      }
+
+      if (keepAudio.input.checked || output.value === "audio") {
+        audioContext = new AudioContext();
+        const source = audioContext.createMediaElementSource(video);
+        const destination = audioContext.createMediaStreamDestination();
+        source.connect(destination);
+        source.connect(audioContext.destination);
+        tracks.push(...destination.stream.getAudioTracks());
+      }
+
+      const combined = new MediaStream(tracks);
+      const kbps = Math.round(Number(bitrate.value) * 1000 * 1000);
+      recorder = new MediaRecorder(combined, {
+        mimeType: mime,
+        videoBitsPerSecond: output.value === "video" ? kbps : undefined,
+        audioBitsPerSecond: 128000,
+      });
+      const chunks = [];
+      recorder.ondataavailable = (event) => {
+        if (event.data.size) chunks.push(event.data);
+      };
+      const done = new Promise((resolve) => {
+        recorder.onstop = resolve;
+      });
+
+      video.currentTime = 0;
+      video.muted = false;
+      await video.play();
+      recorder.start(250);
+
+      await new Promise((resolve) => {
+        const tick = () => {
+          if (cancelled) return resolve();
+          const ratio = video.duration ? Math.min(1, video.currentTime / video.duration) : 0;
+          progress.firstElementChild.style.width = `${Math.round(ratio * 100)}%`;
+          summary.textContent = `${output.value === "audio" ? "Recording audio" : "Recording video"} · ${video.currentTime.toFixed(1)} / ${video.duration.toFixed(1)} s`;
+          if (video.ended || video.paused) return resolve();
+          frame = requestAnimationFrame(tick);
+        };
+        video.onended = resolve;
+        tick();
+      });
+
+      cancelAnimationFrame(frame);
+      video.pause();
+      if (recorder.state !== "inactive") recorder.stop();
+      await done;
+      if (current !== token) return;
+
+      const blob = new Blob(chunks, { type: mime.split(";")[0] });
+      if (!blob.size) throw new Error("The recorder produced no data.");
+      const ext = output.value === "audio" ? "opus.webm" : "webm";
+      download(`${baseName(file.name)}.${ext}`, blob);
+      progress.firstElementChild.style.width = "100%";
+      summary.textContent = `${formatBytes(blob.size)} · ${output.value === "audio" ? "audio" : `${canvas.width} x ${canvas.height}`}`;
+      toast("WebM ready");
+    } catch (caught) {
+      summary.textContent = "";
+      error.write(caught?.message || "Could not convert this video.");
+    } finally {
+      cancelAnimationFrame(frame);
+      stream?.getTracks().forEach((track) => track.stop());
+      stream = null;
+      audioContext?.close().catch(() => {});
+      audioContext = null;
+      if (current === token) {
+        busy = false;
+        convertButton.disabled = false;
+        clearButton.disabled = false;
+        cancelButton.hidden = true;
+      }
+    }
+  }
+
+  function cancel() {
+    cancelled = true;
+    token++;
+    cancelAnimationFrame(frame);
+    if (recorder && recorder.state !== "inactive") recorder.stop();
+    if (video) video.pause();
+    summary.textContent = "Cancelled";
+    progressBox.hidden = true;
+    cancelButton.hidden = true;
+    convertButton.disabled = false;
+    clearButton.disabled = false;
+    busy = false;
+  }
+
+  drop.onFiles(open);
+  output.addEventListener("change", sync);
+  bitrate.addEventListener("input", sync);
+  convertButton.addEventListener("click", convert);
+  cancelButton.addEventListener("click", cancel);
+  clearButton.addEventListener("click", reset);
+  sync();
+  reset();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        panel("Output", output),
+        panel("Resolution", height),
+        bitratePanel,
+        keepAudio,
+        error,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "Recording happens at real time: a two minute clip takes about two minutes. Keep the tab in front while it runs.")
+      ),
+      stack(summary, empty, stage, progressBox)
+    ),
+    foot: actions(clearButton, cancelButton, convertButton),
+  });
+
+  slot.append(shell.node);
+
+  return {
+    unmount() {
+      cancelled = true;
+      token++;
+      cancelAnimationFrame(frame);
+      if (recorder && recorder.state !== "inactive") recorder.stop();
+      stream?.getTracks().forEach((track) => track.stop());
+      audioContext?.close().catch(() => {});
+      if (url) URL.revokeObjectURL(url);
+    },
+  };
+}
+
+export default { mount };

package/package.json

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

package/mevebu/libs/js/tools/coin-flip.js

@@ -1,78 +0,0 @@
-// Heads or tails with a running count that survives a page change.
-import { el, button, bench, stack, panel, actions, readPin, writePin, randomInt, toolcard } from "../core.js";
-
-// A toss is one flip: a click while the coin is still turning replaces the turn
-// in progress instead of queueing another one behind it.
-const TOSS_MS = 400;
-
-/** A tally tile. The value is the node the tool writes to. */
-function tile(key) {
-  const value = el("span", { class: "wrap-anywhere text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
-  const row = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" }, value, el("span", { class: "text-2xs font-semibold text-ink-3" }, key));
-  return { row, value };
-}
-
-export function mount(slot) {
-  const PIN = "coin-flip";
-  const saved = readPin(PIN, { heads: 0, tails: 0 });
-  let heads = Number(saved.heads) || 0;
-  let tails = Number(saved.tails) || 0;
-  let timer = 0;
-
-  const coin = el("div", { class: "grid size-32 select-none place-items-center rounded-full bg-jade text-display font-bold text-on-jade data-[toss]:animate-toss", role: "img", "aria-label": "Coin, not flipped yet" }, "?");
-  const verdict = el("p", { class: "text-lg font-bold tracking-[-0.01em] min-h-7", "aria-live": "polite" });
-  const headsTile = tile("Heads");
-  const tailsTile = tile("Tails");
-  const totalTile = tile("Total");
-  const stats = el("div", { class: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]" }, headsTile.row, tailsTile.row, totalTile.row);
-
-  function render(decision) {
-    verdict.textContent = decision;
-    coin.setAttribute("aria-label", decision ? `Coin: ${decision.toLowerCase()}` : "Coin, not flipped yet");
-    headsTile.value.textContent = String(heads);
-    tailsTile.value.textContent = String(tails);
-    totalTile.value.textContent = String(heads + tails);
-    writePin(PIN, { heads, tails });
-  }
-
-  const flipButton = button("Flip", { kind: "fill" });
-  const resetButton = button("Reset the count", { kind: "quiet" });
-
-  flipButton.addEventListener("click", () => {
-    clearTimeout(timer);
-    delete coin.dataset.toss;
-    void coin.offsetWidth;
-    coin.dataset.toss = "";
-    timer = setTimeout(() => {
-      const isHeads = randomInt(2) === 0;
-      if (isHeads) heads++;
-      else tails++;
-      coin.textContent = isHeads ? "H" : "T";
-      render(isHeads ? "Heads" : "Tails");
-    }, TOSS_MS);
-  });
-
-  resetButton.addEventListener("click", () => {
-    clearTimeout(timer);
-    heads = 0;
-    tails = 0;
-    coin.textContent = "?";
-    render("");
-  });
-
-  const card = toolcard({
-    body: bench(
-      stack(panel("Coin", coin)),
-      stack(panel("Result", verdict), stats)
-    ),
-    foot: actions(resetButton, flipButton)});
-  slot.append(card.node);
-  render("");
-
-  return {
-    unmount() {
-      clearTimeout(timer);
-    }};
-}
-
-export default { mount };

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

@@ -1,68 +0,0 @@
-// Draws one or more names from a list, every entry with equal odds.
-import { el, toast, copyText, shuffle, randomInt, debounce, bench, stack, panel, textArea, numberInput, checkbox, button, output, readPin, writePin, actions, toolcard } from "../core.js";
-
-export function mount(slot) {
-  const PIN = "name-picker";
-  const saved = readPin(PIN, { entries: "Ana\nBudi\nCitra\nDimas\nElena\nFajar\nGita\nHendra", winners: "1", unique: true });
-
-  const listField = textArea({ value: saved.entries ?? "", rows: 8, "aria-label": "Entries, one per line", placeholder: "One entry per line" });
-  const countField = numberInput({ value: saved.winners ?? "1", min: "1", max: "500", "aria-label": "How many to draw" });
-  const uniqueBox = checkbox("No repeats", { checked: saved.unique !== false });
-  const notify = el("p", { class: "border-s-[3px] border-transparent ps-2 text-sm text-ink-3" });
-
-  const drawButton = button("Draw", { icon: "play", kind: "fill" });
-  const copyButton = button("Copy", { icon: "copy" });
-  const result = output();
-  let current = [];
-
-  function entries() {
-    const raw = listField.value.includes(",") && !listField.value.includes("\n")
-      ? listField.value.split(",")
-      : listField.value.split(/\n+/);
-    return raw.map((line) => line.trim()).filter(Boolean);
-  }
-
-  function draw(syncInput = false) {
-    const list = entries();
-    if (!list.length) {
-      current = [];
-      result.write("");
-      notify.textContent = "Add entries to draw.";
-      return;
-    }
-    const wants = Math.max(1, parseInt(countField.value || "1", 10) || 1);
-    const total = uniqueBox.input.checked ? Math.min(wants, list.length) : Math.min(wants, 500);
-    if (syncInput) countField.value = String(total);
-    current = uniqueBox.input.checked
-      ? shuffle(list).slice(0, total)
-      : Array.from({ length: total }, () => list[randomInt(list.length)]);
-    result.write(current.join("\n"));
-    notify.textContent = `${current.length} drawn from ${list.length}.`;
-    writePin(PIN, { entries: listField.value, winners: String(current.length), unique: uniqueBox.input.checked });
-  }
-
-  // Editing the list, the count or the repeat rule redraws right away. The
-  // button stays for a fresh draw with the same settings.
-  drawButton.addEventListener("click", () => draw(true));
-  copyButton.addEventListener("click", async () => {
-    if (!current.length) return toast("Draw first, then copy");
-    toast((await copyText(result.textContent)) ? "Copied" : "Copy failed");
-  });
-  listField.addEventListener("input", debounce(() => draw(false), 200));
-  countField.addEventListener("input", () => draw(false));
-  countField.addEventListener("change", () => draw(true));
-  uniqueBox.input.addEventListener("change", () => draw(true));
-
-  const card = toolcard({
-    body: bench(
-      stack(panel("Entries", listField), panel("Winners", countField), panel(null, uniqueBox)),
-      stack(panel("Drawn", result), notify)
-    ),
-    foot: actions(copyButton, drawButton)});
-  slot.append(card.node);
-  draw();
-
-  return {};
-}
-
-export default { mount };