mevebu 0.3.1 → 1.0.0

package/mevebu/libs/js/tools/checklist.js

@@ -0,0 +1,86 @@
+// A list you can tick off, with the remaining count kept in view.
+import { el, toast, blank, bench, stack, panel, textInput, checkbox, button, copyButton, actions, toolcard, readPin, writePin } from "../core.js";
+
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+
+export function mount(slot) {
+  const PIN = "checklist";
+  const saved = readPin(PIN, []);
+  let list = Array.isArray(saved) ? saved : [];
+
+  const entry = textInput({ placeholder: "New item", "aria-label": "New item" });
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+
+  const addButton = button("Add", { icon: "plus", kind: "fill" });
+  const clearDone = button("Clear finished", { icon: "trash" });
+  const copyList = copyButton(() => listText(), "Copy 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 save = () => writePin(PIN, list);
+
+  function listText() {
+    return list.map((item) => `${item.done ? "[x]" : "[ ]"} ${item.text}`).join("\n");
+  }
+
+  function itemNode(item) {
+    const box = checkbox(item.text, { checked: item.done });
+    box.input.addEventListener("change", () => {
+      item.done = box.input.checked;
+      save();
+      renderStats();
+    });
+    return box;
+  }
+
+  function renderStats() {
+    const done = list.filter((item) => item.done).length;
+    stats.replaceChildren(tile("Done", done), tile("Left", list.length - done));
+    clearDone.disabled = done === 0;
+    copyList.disabled = list.length === 0;
+  }
+
+  function renderList() {
+    listWrap.replaceChildren(
+      list.length ? stack(...list.map(itemNode)) : blank("list-checks", "No items yet.")
+    );
+    renderStats();
+  }
+
+  function add() {
+    const text = entry.value.trim();
+    if (!text) return toast("Type an item first");
+    list.push({ id: uid(), text, done: false });
+    entry.value = "";
+    entry.focus();
+    save();
+    renderList();
+  }
+
+  entry.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") add();
+  });
+  addButton.addEventListener("click", add);
+  clearDone.addEventListener("click", () => {
+    list = list.filter((item) => !item.done);
+    save();
+    renderList();
+  });
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("New item", entry)),
+      stack(stats, panel("Items", listWrap))
+    ),
+    foot: actions(copyList, clearDone, addButton),
+  });
+  slot.append(card.node);
+  renderList();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,89 @@
+// Collects the details of one source in a single form.
+import { bench, stack, panel, textInput, selectInput, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+const TYPES = [
+  { value: "journal", label: "Journal article" },
+  { value: "book", label: "Book" },
+  { value: "chapter", label: "Chapter" },
+  { value: "conference", label: "Conference paper" },
+  { value: "web", label: "Web page" },
+  { value: "report", label: "Report" },
+];
+
+export function mount(slot) {
+  const type = selectInput(TYPES, { value: "journal", "aria-label": "Source type" });
+  const authors = textInput({ placeholder: "Smith, J. A.; Doe, B.", "aria-label": "Authors" });
+  const year = textInput({ placeholder: "2020", "aria-label": "Year" });
+  const title = textInput({ placeholder: "Title", "aria-label": "Title" });
+  const container = textInput({ placeholder: "Journal, book or site", "aria-label": "Container" });
+  const volume = textInput({ placeholder: "12", "aria-label": "Volume" });
+  const issue = textInput({ placeholder: "3", "aria-label": "Issue" });
+  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 url = textInput({ placeholder: "https://example.com", "aria-label": "URL" });
+
+  const result = output({ rows: 14 });
+  const note = notice("note");
+  note.write("Check the details against the source before you cite it.");
+  let jsonText = "";
+
+  function collect() {
+    const fields = {
+      type: type.value,
+      authors: authors.value.trim(),
+      year: year.value.trim(),
+      title: title.value.trim(),
+      container: container.value.trim(),
+      volume: volume.value.trim(),
+      issue: issue.value.trim(),
+      pages: pages.value.trim(),
+      publisher: publisher.value.trim(),
+      doi: doi.value.trim(),
+      url: url.value.trim(),
+    };
+    return Object.fromEntries(Object.entries(fields).filter(([, value]) => value));
+  }
+
+  function build() {
+    jsonText = JSON.stringify(collect(), null, 2);
+    result.write(jsonText);
+  }
+
+  const plain = () => Object.entries(collect()).map(([key, value]) => `${key}: ${value}`).join("\n");
+
+  for (const input of [authors, year, title, container, volume, issue, pages, publisher, doi, url]) {
+    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("Container", container),
+        panel("Volume", volume),
+        panel("Issue", issue),
+        panel("Pages", pages),
+        panel("Publisher", publisher),
+        panel("DOI", doi),
+        panel("URL", url),
+        note
+      ),
+      stack(panel("Details", result))
+    ),
+    foot: actions(
+      copyButton(plain, "Copy as text"),
+      copyButton(() => jsonText, "Copy JSON", "fill")
+    ),
+  });
+  slot.append(card.node);
+  build();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/citation-number-check.js

@@ -0,0 +1,107 @@
+// Checks numbered citations against a reference list.
+import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+
+function tile(label) {
+  const value = el("span", { class: "mvb-stat__v" }, "0");
+  const node = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, label));
+  node.set = (text) => { value.textContent = text; };
+  return node;
+}
+
+function citedNumbers(text) {
+  const set = new Set();
+  const re = /\[([0-9,\s-]+)\]/g;
+  let match;
+  while ((match = re.exec(text))) {
+    for (const chunk of match[1].split(",")) {
+      const trimmed = chunk.trim();
+      if (!trimmed) continue;
+      const range = trimmed.split(/\s*-\s*/);
+      if (range.length === 2) {
+        const a = Number(range[0]);
+        const b = Number(range[1]);
+        if (Number.isInteger(a) && Number.isInteger(b) && b >= a && b - a < 500) {
+          for (let i = a; i <= b; i++) set.add(i);
+        }
+      } else if (Number.isInteger(Number(trimmed))) {
+        set.add(Number(trimmed));
+      }
+    }
+  }
+  return set;
+}
+
+function referenceNumbers(text) {
+  const set = new Set();
+  for (const line of text.split(/\r?\n/)) {
+    const match = line.trim().match(/^\[?(\d+)\]?[.)\]]?/);
+    if (match) set.add(Number(match[1]));
+  }
+  return set;
+}
+
+export function mount(slot) {
+  const body = textArea({ rows: 10, "aria-label": "Text with citations", placeholder: "The text, with citations like [1]." });
+  const list = textArea({ rows: 10, "aria-label": "Reference list", placeholder: "One reference per line" });
+  const citedTile = tile("Cited");
+  const refsTile = tile("References");
+  const missingTile = tile("Missing");
+  const unusedTile = tile("Unused");
+  const stats = el("div", { class: "mvb-stats" }, citedTile, refsTile, missingTile, unusedTile);
+  const tableWrap = el("div", { class: "mvb-scroll" });
+  const note = notice("note");
+  note.write("A number match does not prove the reference is correct.");
+  let report = "";
+
+  function run() {
+    const cited = citedNumbers(body.value);
+    const refs = referenceNumbers(list.value);
+    const missing = [...cited].filter((n) => !refs.has(n)).sort((a, b) => a - b);
+    const unused = [...refs].filter((n) => !cited.has(n)).sort((a, b) => a - b);
+
+    citedTile.set(String(cited.size));
+    refsTile.set(String(refs.size));
+    missingTile.set(String(missing.length));
+    unusedTile.set(String(unused.length));
+
+    const rows = [
+      ...missing.map((n) => [n, "Cited, no reference"]),
+      ...unused.map((n) => [n, "Reference, not cited"]),
+    ];
+    if (!body.value.trim() && !list.value.trim()) {
+      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "Paste the text and the reference list."));
+    } else if (!rows.length) {
+      tableWrap.replaceChildren(el("p", { class: "mvb-note" }, "Every number matches."));
+    } else {
+      tableWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+        el("thead", {}, el("tr", {}, el("th", {}, "Number"), el("th", {}, "Problem"))),
+        el("tbody", {}, ...rows.map((row) => el("tr", {},
+          el("th", {}, String(row[0])),
+          el("td", {}, row[1])
+        )))
+      ));
+    }
+
+    report = [
+      ...missing.map((n) => `${n}: cited, no reference`),
+      ...unused.map((n) => `${n}: reference, not cited`),
+    ].join("\n");
+  }
+
+  body.addEventListener("input", run);
+  list.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text with citations", body), panel("Reference list", list), note),
+      stack(stats, panel("Problems", tableWrap))
+    ),
+    foot: actions(copyButton(() => report, "Copy problems", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/color-palette.js

@@ -0,0 +1,110 @@
+// A matching palette from one base color: analogous, complementary or monochrome.
+import { el, toast, copyText, bench, stack, panel, chipRow, colorInput, copyButton, actions, toolcard } from "../core.js";
+
+function hexToRgb(hex) {
+  const clean = String(hex).trim().replace(/^#/, "");
+  let value;
+  if (/^[0-9a-f]{3}$/i.test(clean)) value = parseInt(clean.split("").map((c) => c + c).join(""), 16);
+  else if (/^[0-9a-f]{6}$/i.test(clean)) value = parseInt(clean, 16);
+  else return null;
+  return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };
+}
+
+const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+const toHex = ({ r, g, b }) => `#${[r, g, b].map((v) => clamp(v).toString(16).padStart(2, "0")).join("")}`;
+
+function toHsl({ r, g, b }) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  if (max === min) return { h: 0, s: 0, l };
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h;
+  if (max === rn) h = (gn - bn) / d + (gn < bn ? 6 : 0);
+  else if (max === gn) h = (bn - rn) / d + 2;
+  else h = (rn - gn) / d + 4;
+  return { h: h * 60, s, l };
+}
+
+function hslToRgb(h, s, l) {
+  const hue = ((h % 360) + 360) % 360;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = l - c / 2;
+  let r;
+  let g;
+  let b;
+  if (hue < 60) [r, g, b] = [c, x, 0];
+  else if (hue < 120) [r, g, b] = [x, c, 0];
+  else if (hue < 180) [r, g, b] = [0, c, x];
+  else if (hue < 240) [r, g, b] = [0, x, c];
+  else if (hue < 300) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255) };
+}
+
+const hslToHex = (h, s, l) => toHex(hslToRgb(h, s / 100, Math.max(0.06, Math.min(0.94, l / 100))));
+
+function palette(hex, scheme) {
+  const { h, s, l } = toHsl(hexToRgb(hex));
+  const mix = (dh, dl) => hslToHex(h + dh, s * 100, l * 100 + dl);
+  if (scheme === "monochrome") return [-30, -15, 0, 15, 30].map((d) => mix(0, d));
+  if (scheme === "complementary") return [mix(0, 0), mix(180, 0), mix(0, -22), mix(180, -22), mix(0, 22)];
+  return [-40, -20, 0, 20, 40].map((d) => mix(d, 0));
+}
+
+export function mount(slot) {
+  const picker = colorInput({ value: "#f5b942", "aria-label": "Base color" });
+  const swatches = el("div", { class: "mvb-swatches" });
+  let colors = [];
+  let scheme = "analogous";
+
+  const chips = chipRow(
+    [
+      { value: "analogous", label: "Analogous" },
+      { value: "complementary", label: "Complementary" },
+      { value: "monochrome", label: "Monochrome" },
+    ],
+    { value: scheme, label: "Scheme", onChange: (value) => { scheme = value; paint(); } }
+  );
+
+  async function copyOne(hex) {
+    toast((await copyText(hex)) ? "Copied" : "Copy failed");
+  }
+
+  function paint() {
+    colors = palette(picker.value, scheme);
+    swatches.replaceChildren(
+      ...colors.map((hex) =>
+        el(
+          "button",
+          { class: "mvb-swatchcard", type: "button", onclick: () => copyOne(hex) },
+          el("span", { class: "mvb-swatchcard__chip", style: `background:${hex}` }),
+          el("span", { class: "mvb-swatchcard__code" }, hex)
+        )
+      )
+    );
+  }
+
+  picker.addEventListener("input", paint);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Base color", picker), panel("Scheme", chips)),
+      stack(swatches)
+    ),
+    foot: actions(
+      copyButton(() => colors.map((hex, i) => `--color-${i + 1}: ${hex};`).join("\n"), "Copy CSS variables", "fill")
+    ),
+  });
+  slot.append(card.node);
+  paint();
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,93 @@
+// Pick a color and read its hex, rgb and hsl codes.
+import { el, toast, copyText, bench, stack, panel, row, textInput, colorInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+function hexToRgb(hex) {
+  const clean = String(hex).trim().replace(/^#/, "");
+  let value;
+  if (/^[0-9a-f]{3}$/i.test(clean)) value = parseInt(clean.split("").map((c) => c + c).join(""), 16);
+  else if (/^[0-9a-f]{6}$/i.test(clean)) value = parseInt(clean, 16);
+  else return null;
+  return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };
+}
+
+const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+const toHex = ({ r, g, b }) => `#${[r, g, b].map((v) => clamp(v).toString(16).padStart(2, "0")).join("")}`;
+
+function toHsl({ r, g, b }) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h;
+  if (max === rn) h = (gn - bn) / d + (gn < bn ? 6 : 0);
+  else if (max === gn) h = (bn - rn) / d + 2;
+  else h = (rn - gn) / d + 4;
+  return { h: Math.round(h * 60), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+
+export function mount(slot) {
+  const picker = colorInput({ value: "#f5b942", "aria-label": "Pick a color" });
+  const hexInput = textInput({ value: "#F5B942", class: "mvb-in mvb-in--mono", "aria-label": "Hex value" });
+  const swatch = el("div", { class: "mvb-swatch" });
+  const error = notice("error");
+  let current = "#f5b942";
+
+  const readonly = (label) => {
+    const field = textInput({ readonly: true, class: "mvb-in mvb-in--mono", "aria-label": `${label}, press to copy` });
+    const wrap = panel(label, field);
+    wrap.style.cursor = "pointer";
+    wrap.addEventListener("click", async () => {
+      if (!field.value) return;
+      field.select();
+      toast((await copyText(field.value)) ? "Copied" : "Copy failed");
+    });
+    return wrap;
+  };
+  const hexField = readonly("Hex");
+  const rgbField = readonly("RGB");
+  const hslField = readonly("HSL");
+
+  function show(text, fromPicker) {
+    const rgb = hexToRgb(text);
+    if (!rgb) return false;
+    current = toHex(rgb);
+    const { h, s, l } = toHsl(rgb);
+    hexField.querySelector("input").value = current.toUpperCase();
+    rgbField.querySelector("input").value = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+    hslField.querySelector("input").value = `hsl(${h}, ${s}%, ${l}%)`;
+    swatch.style.background = current;
+    if (fromPicker) hexInput.value = current.toUpperCase();
+    else picker.value = current;
+    return true;
+  }
+
+  function read(text, fromPicker) {
+    if (show(text, fromPicker)) error.write("");
+    else error.write("That color was not recognized.");
+  }
+
+  hexInput.addEventListener("input", () => read(hexInput.value, false));
+  picker.addEventListener("input", () => read(picker.value, true));
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Color", row(picker, hexInput)), error, panel(null, swatch)),
+      stack(hexField, rgbField, hslField)
+    ),
+    foot: actions(
+      copyButton(() => `--color: ${current};`, "Copy CSS"),
+      copyButton(() => current, "Copy hex", "fill")
+    ),
+  });
+  slot.append(card.node);
+  read("#F5B942", false);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/commit-message.js

@@ -0,0 +1,62 @@
+// Builds a Conventional Commit message and checks the header length.
+import { bench, stack, panel, textInput, textArea, selectInput, checkbox, notice, output, copyButton, actions, toolcard } from "../core.js";
+
+const TYPES = [
+  { value: "feat", label: "feat" },
+  { value: "fix", label: "fix" },
+  { value: "docs", label: "docs" },
+  { value: "style", label: "style" },
+  { value: "refactor", label: "refactor" },
+  { value: "perf", label: "perf" },
+  { value: "test", label: "test" },
+  { value: "build", label: "build" },
+  { value: "ci", label: "ci" },
+  { value: "chore", label: "chore" },
+];
+
+export function mount(slot) {
+  const type = selectInput(TYPES, { value: "feat", "aria-label": "Type" });
+  const scope = textInput({ placeholder: "core", "aria-label": "Scope" });
+  const description = textInput({ value: "add dark mode", "aria-label": "Description" });
+  const body = textArea({ rows: 3, "aria-label": "Body" });
+  const breaking = checkbox("Breaking change");
+  const check = notice("warn");
+  const out = output({ rows: 8 });
+  let text = "";
+
+  function run() {
+    const desc = description.value.trim();
+    const scoped = scope.value.trim();
+    const header = `${type.value}${scoped ? `(${scoped})` : ""}${breaking.input.checked ? "!" : ""}: ${desc}`;
+    const lines = [header];
+    if (body.value.trim()) lines.push("", body.value.trim());
+    if (breaking.input.checked) lines.push("", `BREAKING CHANGE: ${desc || "describe the change"}`);
+    text = lines.join("\n");
+    out.write(text);
+
+    if (!desc) check.write("Add a short description.");
+    else if (header.length > 72) check.write(`Header is ${header.length} characters, keep it at 72 or less.`);
+    else if (/\.$/.test(desc)) check.write("Drop the trailing period.");
+    else check.write("");
+  }
+
+  type.addEventListener("change", run);
+  scope.addEventListener("input", run);
+  description.addEventListener("input", run);
+  body.addEventListener("input", run);
+  breaking.input.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Type", type), panel("Scope", scope), panel("Description", description), panel("Body", body), breaking, check),
+      stack(panel("Message", out))
+    ),
+    foot: actions(copyButton(() => text, "Copy message", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/content-calendar.js

@@ -0,0 +1,111 @@
+// Posts on a calendar, kept in local storage, exportable as CSV or Markdown.
+import { el, toast, blank, bench, stack, row, panel, textInput, chipRow, button, downloadButton, actions, toolcard, readPin, writePin } from "../core.js";
+
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+
+const STATUS = ["Idea", "Draft", "Scheduled", "Published"];
+
+export function mount(slot) {
+  const PIN = "content-calendar";
+  const saved = readPin(PIN, { entries: [] });
+  let entries = Array.isArray(saved.entries) ? saved.entries : [];
+
+  const date = textInput({ type: "date", "aria-label": "Date" });
+  const topic = textInput({ placeholder: "Topic", "aria-label": "Topic" });
+  const platform = textInput({ placeholder: "Platform", "aria-label": "Platform" });
+  let status = "Idea";
+  const statusChips = chipRow(
+    STATUS.map((value) => ({ value, label: value })),
+    { value: "Idea", label: "Status", onChange: (next) => { status = next; } }
+  );
+
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const addButton = button("Add", { icon: "plus", kind: "fill" });
+
+  const save = () => writePin(PIN, { entries });
+
+  function removeButton(entry) {
+    const node = button("", { icon: "trash", "aria-label": `Remove ${entry.topic}` });
+    node.addEventListener("click", () => {
+      entries = entries.filter((item) => item.id !== entry.id);
+      save();
+      render();
+    });
+    return node;
+  }
+
+  function render() {
+    if (!entries.length) {
+      listWrap.replaceChildren(blank("calendar-days", "No posts planned yet."));
+      return;
+    }
+    const sorted = entries.slice().sort((a, b) => a.date.localeCompare(b.date));
+    const rows = sorted.map((entry) => el("tr", {},
+      el("th", {}, entry.date || "-"),
+      el("td", {}, entry.topic),
+      el("td", {}, entry.platform || ""),
+      el("td", {}, entry.status),
+      el("td", {}, removeButton(entry))));
+    listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+      el("thead", {}, el("tr", {},
+        el("th", {}, "Date"), el("th", {}, "Topic"), el("th", {}, "Platform"), el("th", {}, "Status"), el("th", {}, ""))),
+      el("tbody", {}, ...rows)));
+  }
+
+  function add() {
+    const when = date.value.trim();
+    const text = topic.value.trim();
+    if (!when) return toast("Pick a date");
+    if (!text) return toast("Add a topic");
+    entries.push({ id: uid(), date: when, topic: text, platform: platform.value.trim(), status });
+    topic.value = "";
+    platform.value = "";
+    topic.focus();
+    save();
+    render();
+  }
+
+  addButton.addEventListener("click", add);
+
+  function csv() {
+    const rows = [["Date", "Topic", "Platform", "Status"]];
+    for (const entry of entries) rows.push([entry.date, entry.topic, entry.platform, entry.status]);
+    return rows.map((cells) => cells.map((cell) => `"${String(cell).replaceAll('"', '""')}"`).join(",")).join("\n");
+  }
+
+  function markdown() {
+    const sorted = entries.slice().sort((a, b) => a.date.localeCompare(b.date));
+    const lines = ["# Content calendar", ""];
+    let current = null;
+    for (const entry of sorted) {
+      if (entry.date !== current) {
+        current = entry.date;
+        lines.push(`## ${entry.date}`);
+      }
+      lines.push(`- ${entry.topic}${entry.platform ? ` (${entry.platform})` : ""} - ${entry.status}`);
+    }
+    return lines.join("\n");
+  }
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Date", date),
+        panel("Topic", topic),
+        row(panel("Platform", platform), panel("Status", statusChips))
+      ),
+      stack(panel("Plan", listWrap))
+    ),
+    foot: actions(
+      downloadButton(() => csv(), "content-calendar.csv", "Save CSV", "text/csv"),
+      downloadButton(() => markdown(), "content-calendar.md", "Save Markdown", "text/markdown"),
+      addButton
+    ),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };