mevebu 1.11.0 → 2.0.0

package/mevebu/libs/js/tools/data-dictionary.js

@@ -0,0 +1,204 @@
+// The document a dataset needs before anyone uses it: one row per column, with
+// the type, the null count, the distinct count, the range and a sample.
+import {
+  el, toast, download, bench, stack, panel, button, actions, toolcard, blank,
+  notice, output,
+} from "../core.js";
+import { dropzone, baseName, formatBytes } from "../files.js";
+import { parseDelimited, detectDelimiter, headerKeys, toCsv } from "../csv.js";
+
+const TYPE_LABELS = {
+  number: "number",
+  date: "date",
+  boolean: "boolean",
+  text: "text",
+  empty: "empty",
+};
+
+function guessType(values) {
+  const sample = values.filter((value) => value !== "");
+  if (!sample.length) return "empty";
+  if (sample.every((value) => /^-?\d+(\.\d+)?$/.test(value))) return "number";
+  if (sample.every((value) => /^\d{4}-\d{2}-\d{2}$/.test(value))) return "date";
+  if (sample.every((value) => /^(true|false)$/i.test(value))) return "boolean";
+  return "text";
+}
+
+function summarise(name, values) {
+  const filled = values.filter((value) => value !== "");
+  const nulls = values.length - filled.length;
+  const distinct = new Set(filled).size;
+  const type = guessType(filled);
+
+  let min = "";
+  let max = "";
+  if (type === "number") {
+    const numbers = filled.map(Number);
+    min = String(Math.min(...numbers));
+    max = String(Math.max(...numbers));
+  } else if (type === "date" || type === "text") {
+    const sorted = [...filled].sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+    min = sorted[0] ?? "";
+    max = sorted[sorted.length - 1] ?? "";
+  }
+
+  const counts = new Map();
+  for (const value of filled) counts.set(value, (counts.get(value) ?? 0) + 1);
+  const top = [...counts].sort((a, b) => b[1] - a[1])[0];
+
+  return {
+    name,
+    type,
+    nulls,
+    distinct,
+    min,
+    max,
+    sample: filled[0] ?? "",
+    top: top ? `${top[0]} (${top[1]})` : "",
+  };
+}
+
+export function mount(slot) {
+  let file = null;
+  let header = [];
+  let rows = [];
+  let summaryRows = [];
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const table = el("div", { class: "overflow-x-auto rounded-r2 border border-orbit" });
+  const markdown = output({ rows: 12 });
+  const empty = blank("table", "Drop a CSV to describe it.");
+
+  const drop = dropzone({ label: "Drop a CSV here", accept: ".csv,text/csv,text/plain", iconName: "table" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const copyButton = button("Copy Markdown", {
+    icon: "copy",
+    onclick: async () => {
+      if (!markdown.textContent) return;
+      try {
+        await navigator.clipboard.writeText(markdown.textContent);
+        toast("Dictionary copied");
+      } catch {
+        error.write("The clipboard is blocked here. Download the file instead.");
+      }
+    },
+  });
+  const downloadMarkdown = button("Download .md", {
+    icon: "download",
+    onclick: () => {
+      if (!markdown.textContent) return;
+      download(`${baseName(file?.name || "data")}-dictionary.md`, markdown.textContent, "text/markdown");
+    },
+  });
+  const downloadCsv = button("Download CSV", { icon: "download", kind: "fill" });
+
+  function renderTable() {
+    empty.hidden = summaryRows.length > 0;
+    table.hidden = summaryRows.length === 0;
+    markdown.hidden = summaryRows.length === 0;
+    if (!summaryRows.length) {
+      table.replaceChildren();
+      markdown.write("");
+      summary.textContent = "";
+      return;
+    }
+
+    const columns = ["Column", "Type", "Nulls", "Distinct", "Min", "Max", "Sample"];
+    const head = el("div", {
+      class: "grid gap-3 border-b border-orbit bg-deck-2 px-3 py-2 text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase [grid-template-columns:minmax(90px,1fr)_70px_52px_64px_minmax(70px,.9fr)_minmax(70px,.9fr)_minmax(90px,1.1fr)]",
+    }, ...columns.map((cell) => el("span", {}, cell)));
+
+    const body = summaryRows.map((row) =>
+      el("div", {
+        class: "grid gap-3 border-b border-orbit px-3 py-2 text-sm last:border-b-0 [grid-template-columns:minmax(90px,1fr)_70px_52px_64px_minmax(70px,.9fr)_minmax(70px,.9fr)_minmax(90px,1.1fr)]",
+      },
+        el("span", { class: "truncate font-semibold" }, row.name),
+        el("span", { class: "text-2xs text-ink-3" }, TYPE_LABELS[row.type] ?? row.type),
+        el("span", { class: "font-mono text-2xs tabular-nums" }, String(row.nulls)),
+        el("span", { class: "font-mono text-2xs tabular-nums" }, String(row.distinct)),
+        el("span", { class: "truncate font-mono text-2xs" }, row.min),
+        el("span", { class: "truncate font-mono text-2xs" }, row.max),
+        el("span", { class: "truncate font-mono text-2xs text-ink-3" }, row.sample))
+    );
+
+    table.replaceChildren(head, ...body);
+  }
+
+  function renderMarkdown() {
+    const lines = [
+      `| Column | Type | Nulls | Distinct | Min | Max | Sample |`,
+      `| --- | --- | ---: | ---: | --- | --- | --- |`,
+      ...summaryRows.map((row) =>
+        `| ${row.name} | ${row.type} | ${row.nulls} | ${row.distinct} | ${row.min} | ${row.max} | ${row.sample} |`),
+    ];
+    markdown.write(lines.join("\n"));
+  }
+
+  function run() {
+    summaryRows = header.map((name, index) => summarise(name, rows.map((row) => row[index] ?? "")));
+    const nulls = summaryRows.reduce((total, row) => total + row.nulls, 0);
+    summary.textContent = `${rows.length} row${rows.length === 1 ? "" : "s"} · ${header.length} column${header.length === 1 ? "" : "s"} · ${nulls} empty cell${nulls === 1 ? "" : "s"}`;
+    renderTable();
+    renderMarkdown();
+  }
+
+  async function open(files) {
+    const picked = Array.from(files).find((entry) => /\.(csv|tsv|txt)$/i.test(entry.name) || entry.type.startsWith("text/"));
+    if (!picked) {
+      error.write("That file is not a CSV.");
+      return;
+    }
+    try {
+      const text = await picked.text();
+      const parsed = parseDelimited(text, detectDelimiter(text));
+      if (parsed.length < 2) throw new Error("A CSV needs a header row and at least one data row.");
+      file = picked;
+      header = headerKeys(parsed[0]);
+      rows = parsed.slice(1).filter((row) => row.some((cell) => cell !== ""));
+      error.write("");
+      run();
+    } catch (caught) {
+      error.write(caught?.message || "This file could not be read.");
+    }
+  }
+
+  drop.onFiles(open);
+  clearButton.addEventListener("click", () => {
+    file = null;
+    header = [];
+    rows = [];
+    summaryRows = [];
+    error.write("");
+    renderTable();
+  });
+  downloadCsv.addEventListener("click", () => {
+    if (!summaryRows.length) return;
+    const csv = toCsv([
+      ["column", "type", "nulls", "distinct", "min", "max", "sample", "top"],
+      ...summaryRows.map((row) => [row.name, row.type, row.nulls, row.distinct, row.min, row.max, row.sample, row.top]),
+    ]);
+    download(`${baseName(file?.name || "data")}-dictionary.csv`, csv, "text/csv");
+  });
+
+  renderTable();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        panel("What it reports", el("p", { class: "m-0 text-sm leading-[1.6] text-ink-3" },
+          "The type it detects, empty cells, distinct values, the smallest and largest value, and one sample. A type can be wrong on a mixed column, so check it before you publish.")),
+        error
+      ),
+      stack(summary, empty, table, markdown)
+    ),
+    foot: actions(clearButton, copyButton, downloadMarkdown, downloadCsv),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

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

@@ -0,0 +1,195 @@
+// A rotating duty roster. Names take turns across a date range, with a fixed
+// number of slots per day, an optional weekend skip, and pinned dates.
+import {
+  el, toast, download, bench, stack, panel, textArea, numberInput, button,
+  actions, toolcard, blank, notice, checkbox, selectInput,
+} from "../core.js";
+
+function parseNames(text) {
+  return text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
+}
+
+function parsePins(text) {
+  const pins = new Map();
+  for (const line of text.split(/\r?\n/)) {
+    const match = /^(\d{4}-\d{2}-\d{2})\s*[:|,]\s*(.+)$/.exec(line.trim());
+    if (match) pins.set(match[1], match[2].split(/\s*(?:,|\|)\s*/).map((name) => name.trim()).filter(Boolean));
+  }
+  return pins;
+}
+
+function iso(date) {
+  // Local date parts, not toISOString: a browser east or west of UTC would
+  // otherwise show yesterday or tomorrow in the date field.
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+export function mount(slot) {
+  const names = textArea({ rows: 7, placeholder: "Ani\nBudi\nCitra\nDewi", "aria-label": "Names" });
+  const start = el("input", {
+    class: "w-full min-h-[var(--ctl)] rounded-r1 border border-orbit bg-deck px-3 py-2.5 text-base focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft",
+    type: "date",
+    value: iso(new Date()),
+    "aria-label": "Start date",
+  });
+  const end = el("input", {
+    class: "w-full min-h-[var(--ctl)] rounded-r1 border border-orbit bg-deck px-3 py-2.5 text-base focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft",
+    type: "date",
+    value: iso(new Date(Date.now() + 13 * 86400000)),
+    "aria-label": "End date",
+  });
+  const perDay = numberInput({ min: "1", max: "20", step: "1", value: "1", "aria-label": "People per day" });
+  const skipWeekend = checkbox("Skip weekends", { checked: true });
+  const pins = textArea({ rows: 3, placeholder: "2026-10-25: Ani", "aria-label": "Pinned dates" });
+  const order = selectInput(
+    [
+      { value: "forward", label: "Forward" },
+      { value: "reverse", label: "Reverse" },
+    ],
+    { value: "forward", "aria-label": "Rotation direction" }
+  );
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const table = el("div", { class: "overflow-x-auto rounded-r2 border border-orbit" });
+  const empty = blank("calendar-check", "Add names and a date range.");
+
+  let rows = [];
+
+  function build() {
+    const list = parseNames(names.value);
+    const pinned = parsePins(pins.value);
+    error.write("");
+    rows = [];
+    if (!list.length) return;
+
+    const from = new Date(`${start.value}T00:00:00`);
+    const to = new Date(`${end.value}T00:00:00`);
+    if (Number.isNaN(from.getTime()) || Number.isNaN(to.getTime())) {
+      error.write("Pick a start and an end date.");
+      return;
+    }
+    if (to < from) {
+      error.write("The end date is before the start date.");
+      return;
+    }
+
+    const slots = Math.max(1, Math.min(Number(perDay.value) || 1, list.length));
+    const sequence = order.value === "reverse" ? [...list].reverse() : [...list];
+    let cursor = 0;
+    let guard = 0;
+
+    for (let day = new Date(from); day <= to && guard < 400; day.setDate(day.getDate() + 1), guard++) {
+      const weekday = day.getDay();
+      if (skipWeekend.input.checked && (weekday === 0 || weekday === 6)) continue;
+      const key = iso(day);
+      if (pinned.has(key)) {
+        rows.push({ date: key, people: pinned.get(key), pinned: true });
+        continue;
+      }
+      const people = [];
+      for (let i = 0; i < slots; i++) {
+        people.push(sequence[cursor % sequence.length]);
+        cursor++;
+      }
+      rows.push({ date: key, people, pinned: false });
+    }
+    if (guard >= 400) error.write("That range is very long, so it stops at 400 days.");
+  }
+
+  function render() {
+    empty.hidden = rows.length > 0;
+    table.hidden = rows.length === 0;
+    if (!rows.length) {
+      summary.textContent = "";
+      table.replaceChildren();
+      return;
+    }
+    const counts = new Map();
+    for (const row of rows) for (const name of row.people) counts.set(name, (counts.get(name) ?? 0) + 1);
+    const spread = [...counts.values()];
+    const even = spread.length ? `${Math.min(...spread)} to ${Math.max(...spread)} turns each` : "";
+    summary.textContent = `${rows.length} day${rows.length === 1 ? "" : "s"} · ${counts.size} people · ${even}`;
+
+    const head = el("div", {
+      class: "grid gap-3 border-b border-orbit bg-deck-2 px-3 py-2 text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase [grid-template-columns:minmax(110px,150px)_minmax(0,1fr)]",
+    }, el("span", {}, "Date"), el("span", {}, "On duty"));
+
+    const body = rows.map((row) =>
+      el("div", {
+        class: "grid gap-3 border-b border-orbit px-3 py-2 text-sm last:border-b-0 [grid-template-columns:minmax(110px,150px)_minmax(0,1fr)]",
+      },
+        el("span", { class: "font-mono text-2xs text-ink-3 tabular-nums" }, row.date),
+        el("span", { class: "wrap-anywhere" }, row.people.join(", "),
+          row.pinned ? el("span", { class: "ms-2 rounded-full bg-jade-soft px-1.5 py-0.5 text-2xs font-semibold text-jade" }, "pinned") : null))
+    );
+
+    table.replaceChildren(head, ...body);
+  }
+
+  function run() {
+    build();
+    render();
+  }
+
+  names.addEventListener("input", run);
+  start.addEventListener("change", run);
+  end.addEventListener("change", run);
+  perDay.addEventListener("input", run);
+  skipWeekend.input.addEventListener("change", run);
+  pins.addEventListener("input", run);
+  order.addEventListener("change", run);
+
+  const copyButton = button("Copy roster", {
+    icon: "copy",
+    onclick: async () => {
+      if (!rows.length) return;
+      const text = rows.map((row) => `${row.date}\t${row.people.join(", ")}`).join("\n");
+      try {
+        await navigator.clipboard.writeText(text);
+        toast("Roster copied");
+      } catch {
+        error.write("The clipboard is blocked here. Download the CSV instead.");
+      }
+    },
+  });
+
+  const downloadButton = button("Download CSV", {
+    icon: "download",
+    kind: "fill",
+    onclick: () => {
+      if (!rows.length) return;
+      const csv = [["date", "people"], ...rows.map((row) => [row.date, row.people.join("; ")])]
+        .map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(","))
+        .join("\n");
+      download("roster.csv", csv, "text/csv");
+    },
+  });
+
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Names", names, "One per line. The rotation continues in this order."),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("From", start), panel("To", end)),
+        panel("People per day", perDay),
+        panel("Direction", order),
+        skipWeekend,
+        panel("Pinned dates", pins, "One per line, like 2026-10-25: Ani."),
+        error
+      ),
+      stack(summary, empty, table)
+    ),
+    foot: actions(copyButton, downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/sample-csv.js

@@ -0,0 +1,252 @@
+// A CSV with the columns and the types you describe. The same seed always
+// produces the same file, so a fixture can be regenerated when it drifts.
+import {
+  el, icon, toast, download, bench, stack, panel, textInput, selectInput,
+  numberInput, button, actions, toolcard, blank, notice,
+} from "../core.js";
+import { toCsv } from "../csv.js";
+
+const TYPES = [
+  { value: "text", label: "Text" },
+  { value: "word", label: "Word" },
+  { value: "number", label: "Number" },
+  { value: "decimal", label: "Decimal" },
+  { value: "boolean", label: "Boolean" },
+  { value: "date", label: "Date" },
+  { value: "email", label: "Email" },
+  { value: "uuid", label: "UUID" },
+  { value: "choice", label: "Choice list" },
+];
+
+const WORDS = [
+  "alpha", "bravo", "cedar", "delta", "ember", "field", "grove", "harbor", "ivory", "juniper",
+  "kelp", "lumen", "meadow", "north", "orbit", "pine", "quartz", "ridge", "summit", "tide",
+  "umber", "vale", "willow", "xenon", "yarrow", "zephyr",
+];
+
+/** Mulberry32: a small deterministic generator, so a seed is worth writing down. */
+function seeded(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function pick(random, list) {
+  return list[Math.floor(random() * list.length)];
+}
+
+function uuid(random) {
+  const hex = "0123456789abcdef";
+  let out = "";
+  for (let i = 0; i < 32; i++) {
+    if (i === 8 || i === 12 || i === 16 || i === 20) out += "-";
+    out += i === 12 ? "4" : hex[Math.floor(random() * 16)];
+  }
+  return out;
+}
+
+function value(type, choices, random, rowIndex) {
+  switch (type) {
+    case "word":
+      return pick(random, WORDS);
+    case "number":
+      return String(Math.floor(random() * 1000));
+    case "decimal":
+      return (random() * 100).toFixed(2);
+    case "boolean":
+      return random() > 0.5 ? "true" : "false";
+    case "date": {
+      const day = new Date(Date.UTC(2025, 0, 1) + Math.floor(random() * 700) * 86400000);
+      return day.toISOString().slice(0, 10);
+    }
+    case "email":
+      return `${pick(random, WORDS)}${rowIndex + 1}@example.com`;
+    case "uuid":
+      return uuid(random);
+    case "choice":
+      return choices.length ? pick(random, choices) : "";
+    default:
+      return `${pick(random, WORDS)} ${pick(random, WORDS)}`;
+  }
+}
+
+export function mount(slot) {
+  let columns = [
+    { name: "id", type: "number", choices: "" },
+    { name: "name", type: "word", choices: "" },
+    { name: "active", type: "boolean", choices: "" },
+  ];
+
+  const rows = numberInput({ min: "1", max: "10000", step: "1", value: "50", "aria-label": "Row count" });
+  const seed = textInput({ value: "mevebu", "aria-label": "Seed", class: "font-mono" });
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const list = el("div", { class: "grid gap-2" });
+  const preview = el("div", { class: "overflow-x-auto rounded-r2 border border-orbit" });
+  const empty = blank("table", "Add a column to see the preview.");
+
+  const addButton = button("Add column", { icon: "plus", kind: "quiet" });
+  const generate = button("Generate", { icon: "refresh-cw", kind: "fill" });
+  const downloadButton = button("Download CSV", { icon: "download" });
+
+  let table = [];
+  let header = [];
+
+  function renderColumns() {
+    list.replaceChildren(
+      ...columns.map((column, index) =>
+        el(
+          "div",
+          { class: "grid gap-2 rounded-r1 border border-orbit bg-deck-2 p-2 [grid-template-columns:minmax(0,1fr)_auto]" },
+          el("div", { class: "grid gap-2 sm:grid-cols-2" },
+            textInput({
+              value: column.name,
+              placeholder: `column_${index + 1}`,
+              "aria-label": `Column ${index + 1} name`,
+              oninput: (event) => {
+                column.name = event.target.value;
+                run();
+              },
+            }),
+            selectInput(
+              TYPES.map((type) => ({ value: type.value, label: type.label })),
+              {
+                value: column.type,
+                "aria-label": `Column ${index + 1} type`,
+                onchange: (event) => {
+                  column.type = event.target.value;
+                  renderColumns();
+                  run();
+                },
+              }
+            ),
+            column.type === "choice"
+              ? textInput({
+                  value: column.choices,
+                  placeholder: "red, green, blue",
+                  "aria-label": `Column ${index + 1} choices`,
+                  class: "sm:col-span-2",
+                  oninput: (event) => {
+                    column.choices = event.target.value;
+                    run();
+                  },
+                })
+              : null),
+          el("button", {
+            class: "inline-flex size-9 cursor-pointer items-center justify-center self-start rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-danger disabled:opacity-40",
+            type: "button",
+            "aria-label": `Remove column ${index + 1}`,
+            disabled: columns.length === 1,
+            onclick: () => {
+              columns.splice(index, 1);
+              renderColumns();
+              run();
+            },
+          }, icon("trash", "size-4"))
+        )
+      )
+    );
+  }
+
+  function hashSeed(text) {
+    let hash = 2166136261;
+    for (let i = 0; i < text.length; i++) {
+      hash ^= text.charCodeAt(i);
+      hash = Math.imul(hash, 16777619);
+    }
+    return hash >>> 0;
+  }
+
+  function renderPreview() {
+    empty.hidden = table.length > 0;
+    preview.hidden = table.length === 0;
+    if (!table.length) {
+      preview.replaceChildren();
+      return;
+    }
+    const shown = table.slice(0, 8);
+    const head = el("div", {
+      class: "grid border-b border-orbit bg-deck-2 px-3 py-2 text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase",
+      style: `grid-template-columns: repeat(${header.length}, minmax(110px, 1fr))`,
+    }, ...header.map((cell) => el("span", { class: "truncate" }, cell)));
+
+    const body = shown.map((row) =>
+      el("div", {
+        class: "grid border-b border-orbit px-3 py-1.5 text-sm last:border-b-0",
+        style: `grid-template-columns: repeat(${header.length}, minmax(110px, 1fr))`,
+      }, ...row.map((cell) => el("span", { class: "truncate font-mono text-2xs text-ink-2" }, cell)))
+    );
+
+    preview.replaceChildren(head, ...body);
+  }
+
+  function run() {
+    error.write("");
+    const count = Math.max(1, Math.min(10000, Number(rows.value) || 1));
+    const names = columns.map((column, index) => column.name.trim() || `column_${index + 1}`);
+    if (new Set(names).size !== names.length) error.write("Two columns share a name, so the CSV will have duplicates.");
+
+    const random = seeded(hashSeed(seed.value || "mevebu"));
+    header = names;
+    table = Array.from({ length: count }, (_, rowIndex) =>
+      columns.map((column) =>
+        value(
+          column.type,
+          column.choices.split(",").map((choice) => choice.trim()).filter(Boolean),
+          random,
+          rowIndex
+        )
+      )
+    );
+
+    summary.textContent = `${count} row${count === 1 ? "" : "s"} · ${columns.length} column${columns.length === 1 ? "" : "s"} · seed ${seed.value || "mevebu"}`;
+    renderPreview();
+  }
+
+  addButton.addEventListener("click", () => {
+    columns.push({ name: `column_${columns.length + 1}`, type: "text", choices: "" });
+    renderColumns();
+    run();
+  });
+  rows.addEventListener("input", run);
+  seed.addEventListener("input", run);
+  generate.addEventListener("click", () => {
+    run();
+    toast("Sample rebuilt");
+  });
+  downloadButton.addEventListener("click", () => {
+    if (!table.length) return;
+    download("sample.csv", toCsv([header, ...table]), "text/csv");
+  });
+
+  renderColumns();
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Rows", rows),
+        panel("Seed", seed, "The same seed always makes the same file."),
+        el("div", { class: "grid gap-1.5" },
+          el("div", { class: "flex items-center justify-between gap-2" },
+            el("span", { class: "text-sm font-semibold text-ink-2" }, "Columns"),
+            addButton),
+          list),
+        error
+      ),
+      stack(summary, empty, preview)
+    ),
+    foot: actions(generate, downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };