mevebu 1.11.0 → 2.1.0

package/mevebu/libs/js/tools/json-schema-sample.js

@@ -0,0 +1,254 @@
+// Sample documents from a JSON Schema. Covers the keywords that decide whether
+// a document validates, and reports the ones it could not honour, so a passing
+// sample is never mistaken for a complete implementation.
+import {
+  el, toast, download, bench, stack, panel, textArea, numberInput, textInput,
+  button, actions, toolcard, blank, notice, output,
+} from "../core.js";
+import { seeded, pick, uuid, gaussian } from "../random.js";
+import { zip } from "../zip.js";
+
+const SUPPORTED = new Set([
+  "$schema", "$id", "title", "description", "type", "properties", "required",
+  "items", "enum", "const", "default", "examples", "minimum", "maximum",
+  "exclusiveMinimum", "exclusiveMaximum", "multipleOf", "minLength", "maxLength",
+  "pattern", "format", "minItems", "maxItems", "uniqueItems", "additionalProperties",
+  "minProperties", "maxProperties", "anyOf", "oneOf", "allOf", "not", "nullable",
+]);
+
+const FORMATS = {
+  "date-time": () => new Date(Date.UTC(2025, 0, 1) + Math.floor(Math.random() * 3e10)).toISOString(),
+  date: (random) => new Date(Date.UTC(2025, 0, 1) + Math.floor(random() * 700) * 86400000).toISOString().slice(0, 10),
+  time: () => `${String(Math.floor(Math.random() * 24)).padStart(2, "0")}:00:00Z`,
+  email: (random) => `${pick(random, ["ani", "budi", "citra", "dewi"])}${Math.floor(random() * 99)}@example.com`,
+  uri: () => "https://example.com/resource",
+  uuid: (random) => uuid(random),
+  ipv4: () => `192.168.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
+  hostname: () => "example.com",
+};
+
+function regexFrom(pattern) {
+  try {
+    return new RegExp(pattern);
+  } catch {
+    return null;
+  }
+}
+
+function stringValue(schema, random) {
+  if (schema.format && FORMATS[schema.format]) return FORMATS[schema.format](random);
+  if (schema.enum) return pick(random, schema.enum);
+  if (schema.const !== undefined) return schema.const;
+
+  const min = Math.max(0, schema.minLength ?? 0);
+  const max = Math.max(min, schema.maxLength ?? Math.max(min, 12));
+  const regex = schema.pattern ? regexFrom(schema.pattern) : null;
+  const alphabet = "abcdefghijklmnopqrstuvwxyz0123456789";
+
+  // Try a few random strings against the pattern before falling back, so a
+  // pattern like ^[A-Z]{3}$ still gets a plausible value.
+  for (let attempt = 0; attempt < 60; attempt++) {
+    const length = min + Math.floor(random() * Math.max(1, Math.min(max, 24) - min + 1));
+    let out = "";
+    for (let i = 0; i < length; i++) out += alphabet[Math.floor(random() * alphabet.length)];
+    if (!regex || regex.test(out)) return out;
+  }
+  const literal = schema.pattern?.replace(/[\^$.*+?()[\]{}|\\]/g, "") ?? "";
+  if (literal.length >= min) return literal.slice(0, Math.max(min, Math.min(max, literal.length)));
+  return "sample".padEnd(min, "x").slice(0, Math.max(min, 1));
+}
+
+function numberValue(schema, random, integer) {
+  if (schema.enum) return pick(random, schema.enum);
+  if (schema.const !== undefined) return schema.const;
+  const min = schema.minimum ?? schema.exclusiveMinimum ?? 0;
+  const max = schema.maximum ?? schema.exclusiveMaximum ?? (min + 1000);
+  let value = min + random() * (max - min);
+  if (integer) value = Math.round(value);
+  if (schema.multipleOf) value = Math.round(value / schema.multipleOf) * schema.multipleOf;
+  return value;
+}
+
+function sample(schema, random, path, unknown) {
+  if (!schema || typeof schema !== "object") return null;
+
+  if (schema.const !== undefined) return schema.const;
+  if (schema.enum) return pick(random, schema.enum);
+  if (schema.default !== undefined) return schema.default;
+  if (schema.examples?.length) return schema.examples[0];
+  if (schema.anyOf?.length) return sample(schema.anyOf[0], random, path, unknown);
+  if (schema.oneOf?.length) return sample(schema.oneOf[0], random, path, unknown);
+  if (schema.allOf?.length) {
+    // Merge the object branches, which is the common shape.
+    const merged = schema.allOf.reduce(
+      (acc, branch) => ({
+        ...acc,
+        ...branch,
+        properties: { ...(acc.properties ?? {}), ...(branch.properties ?? {}) },
+        required: [...new Set([...(acc.required ?? []), ...(branch.required ?? [])])],
+      }),
+      { ...schema, allOf: undefined }
+    );
+    return sample(merged, random, path, unknown);
+  }
+
+  const type = Array.isArray(schema.type)
+    ? schema.type.find((entry) => entry !== "null") ?? "null"
+    : schema.type ?? (schema.properties ? "object" : schema.items ? "array" : "string");
+
+  if (schema.nullable && random() < 0.1) return null;
+
+  switch (type) {
+    case "object": {
+      const out = {};
+      const properties = schema.properties ?? {};
+      for (const [key, child] of Object.entries(properties)) {
+        out[key] = sample(child, random, `${path}.${key}`, unknown);
+      }
+      for (const key of schema.required ?? []) {
+        if (!(key in out)) out[key] = sample({}, random, `${path}.${key}`, unknown);
+      }
+      if (schema.additionalProperties && typeof schema.additionalProperties === "object") {
+        out.extra = sample(schema.additionalProperties, random, `${path}.extra`, unknown);
+      }
+      return out;
+    }
+    case "array": {
+      const min = Math.max(0, schema.minItems ?? 1);
+      const max = Math.max(min, schema.maxItems ?? min + 2);
+      const count = min + Math.floor(random() * (Math.min(max, 8) - min + 1));
+      const items = Array.from({ length: count }, (_, index) =>
+        sample(schema.items ?? {}, random, `${path}[${index}]`, unknown)
+      );
+      return schema.uniqueItems ? [...new Set(items.map((item) => JSON.stringify(item)))].map((text) => JSON.parse(text)) : items;
+    }
+    case "integer":
+      return numberValue(schema, random, true);
+    case "number":
+      return Number(numberValue(schema, random, false).toFixed(3));
+    case "boolean":
+      return random() > 0.5;
+    case "null":
+      return null;
+    default:
+      return stringValue(schema, random);
+  }
+}
+
+function collectUnknown(schema, found, path = "$") {
+  if (!schema || typeof schema !== "object") return;
+  for (const [key, value] of Object.entries(schema)) {
+    if (["properties", "items", "anyOf", "oneOf", "allOf"].includes(key)) continue;
+    if (key.startsWith("$") || key.startsWith("x-")) continue;
+    if (!SUPPORTED.has(key) && !found.includes(key)) found.push(key);
+  }
+  for (const [name, child] of Object.entries(schema.properties ?? {})) {
+    collectUnknown(child, found, `${path}.${name}`);
+  }
+  if (schema.items && typeof schema.items === "object") collectUnknown(schema.items, found, `${path}[]`);
+}
+
+export function mount(slot) {
+  let documents = [];
+  let unknown = [];
+
+  const schema = textArea({
+    rows: 12,
+    value: JSON.stringify(
+      {
+        $schema: "https://json-schema.org/draft/2020-12/schema",
+        type: "object",
+        required: ["id", "name", "email"],
+        properties: {
+          id: { type: "string", format: "uuid" },
+          name: { type: "string", minLength: 3, maxLength: 24 },
+          email: { type: "string", format: "email" },
+          age: { type: "integer", minimum: 18, maximum: 90 },
+          tags: { type: "array", items: { type: "string" }, minItems: 1, maxItems: 4 },
+        },
+      },
+      null,
+      2
+    ),
+    "aria-label": "JSON Schema",
+  });
+
+  const count = numberInput({ min: "1", max: "200", step: "1", value: "3", "aria-label": "Documents" });
+  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 result = output({ rows: 16 });
+  const empty = blank("braces", "Paste a schema to generate documents.");
+
+  const generate = button("Generate", { icon: "refresh-cw", kind: "fill" });
+  const downloadJson = button("Download JSON", { icon: "download" });
+  const downloadZip = button("Download ZIP", { icon: "download" });
+
+  function run() {
+    error.write("");
+    try {
+      const parsed = JSON.parse(schema.value);
+      const random = seeded(seed.value || "mevebu");
+      unknown = [];
+      collectUnknown(parsed, unknown);
+      const total = Math.max(1, Math.min(200, Number(count.value) || 1));
+      documents = Array.from({ length: total }, () => sample(parsed, random, "$", unknown));
+      result.write(JSON.stringify(documents, null, 2));
+      summary.textContent = `${total} document${total === 1 ? "" : "s"} · seed ${seed.value || "mevebu"}`;
+      empty.hidden = true;
+      result.hidden = false;
+      if (unknown.length) {
+        error.write(`Not implemented, so left out: ${unknown.join(", ")}. Everything else follows the schema.`);
+      }
+    } catch (caught) {
+      documents = [];
+      result.write("");
+      result.hidden = true;
+      empty.hidden = false;
+      summary.textContent = "";
+      error.write(caught?.message || "That schema is not valid JSON.");
+    }
+  }
+
+  generate.addEventListener("click", () => {
+    run();
+    if (documents.length) toast("Documents ready");
+  });
+  schema.addEventListener("input", run);
+  count.addEventListener("input", run);
+  seed.addEventListener("input", run);
+
+  downloadJson.addEventListener("click", () => {
+    if (!documents.length) return;
+    download("samples.json", JSON.stringify(documents, null, 2), "application/json");
+  });
+  downloadZip.addEventListener("click", () => {
+    if (!documents.length) return;
+    const files = documents.map((doc, index) => ({
+      name: `sample-${String(index + 1).padStart(3, "0")}.json`,
+      bytes: new TextEncoder().encode(JSON.stringify(doc, null, 2)),
+    }));
+    download("samples.zip", zip(files), "application/zip");
+  });
+
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Schema", schema),
+        panel("Documents", count),
+        panel("Seed", seed, "The same seed and schema give the same documents."),
+        error
+      ),
+      stack(summary, empty, result)
+    ),
+    foot: actions(downloadJson, downloadZip, generate),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/mock-api-payload.js

@@ -0,0 +1,224 @@
+// The JSON an endpoint returns, written once and reused as a fixture. Fields are
+// defined in a small table, and the same definition can be shown as a list with
+// pagination, a single item, or an error.
+import {
+  el, icon, toast, download, bench, stack, panel, textInput, selectInput,
+  numberInput, button, actions, toolcard, blank, notice, output, chipRow,
+} from "../core.js";
+import { seeded, pick, uuid } from "../random.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" },
+];
+
+const WORDS = ["north", "cedar", "orbit", "summit", "tide", "willow", "ember", "quartz"];
+
+function value(type, random, index) {
+  switch (type) {
+    case "word": return pick(random, WORDS);
+    case "number": return Math.floor(random() * 5000);
+    case "decimal": return Number((random() * 200).toFixed(2));
+    case "boolean": return random() > 0.5;
+    case "date": return new Date(Date.UTC(2025, 0, 1) + Math.floor(random() * 6e10)).toISOString();
+    case "email": return `${pick(random, WORDS)}${index + 1}@example.com`;
+    case "uuid": return uuid(random);
+    default: return `${pick(random, WORDS)} ${pick(random, WORDS)}`;
+  }
+}
+
+export function mount(slot) {
+  let fields = [
+    { name: "id", type: "uuid" },
+    { name: "title", type: "text" },
+    { name: "price", type: "decimal" },
+    { name: "in_stock", type: "boolean" },
+    { name: "created_at", type: "date" },
+  ];
+  let shape = "list";
+
+  const resource = textInput({ value: "items", "aria-label": "Resource name" });
+  const seed = textInput({ value: "mevebu", "aria-label": "Seed", class: "font-mono" });
+  const items = numberInput({ min: "1", max: "100", step: "1", value: "5", "aria-label": "Items" });
+  const status = selectInput(
+    [
+      { value: "200", label: "200 OK" },
+      { value: "201", label: "201 Created" },
+      { value: "400", label: "400 Bad Request" },
+      { value: "401", label: "401 Unauthorized" },
+      { value: "404", label: "404 Not Found" },
+      { value: "422", label: "422 Unprocessable" },
+      { value: "500", label: "500 Server Error" },
+    ],
+    { value: "200", "aria-label": "HTTP status" }
+  );
+
+  const shapeRow = chipRow(
+    [
+      { value: "list", label: "List" },
+      { value: "item", label: "Single item" },
+      { value: "error", label: "Error" },
+    ],
+    { value: "list", label: "Payload shape", onChange: (next) => { shape = next; sync(); run(); } }
+  );
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const result = output({ rows: 16 });
+  const empty = blank("braces", "Define a field to build the payload.");
+  const list = el("div", { class: "grid gap-2" });
+
+  const itemsPanel = panel("Items", items);
+  const statusPanel = panel("HTTP status", status);
+
+  function sync() {
+    itemsPanel.hidden = shape !== "list";
+    statusPanel.hidden = shape !== "error";
+  }
+
+  function renderFields() {
+    list.replaceChildren(
+      ...fields.map((field, 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: field.name,
+              placeholder: `field_${index + 1}`,
+              "aria-label": `Field ${index + 1} name`,
+              oninput: (event) => { field.name = event.target.value; run(); },
+            }),
+            selectInput(TYPES.map((type) => ({ value: type.value, label: type.label })), {
+              value: field.type,
+              "aria-label": `Field ${index + 1} type`,
+              onchange: (event) => { field.type = event.target.value; run(); },
+            })),
+          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 field ${index + 1}`,
+            disabled: fields.length === 1,
+            onclick: () => { fields.splice(index, 1); renderFields(); run(); },
+          }, icon("trash", "size-4")))
+      )
+    );
+  }
+
+  function one(random, index) {
+    const out = {};
+    for (const field of fields) {
+      const key = field.name.trim() || `field_${index + 1}`;
+      out[key] = value(field.type, random, index);
+    }
+    return out;
+  }
+
+  function run() {
+    error.write("");
+    const random = seeded(seed.value || "mevebu");
+    const name = resource.value.trim() || "items";
+    const count = Math.max(1, Math.min(100, Number(items.value) || 1));
+    const rows = Array.from({ length: count }, (_, index) => one(random, index));
+
+    let payload;
+    let http = Number(status.value);
+    if (shape === "list") {
+      payload = {
+        data: rows,
+        meta: { page: 1, per_page: count, total: count * 4, has_more: true },
+      };
+      http = 200;
+    } else if (shape === "item") {
+      payload = { data: rows[0] };
+      http = 200;
+    } else {
+      const messages = {
+        400: "The request body is not valid JSON.",
+        401: "Missing or expired token.",
+        404: `No ${name} with that id.`,
+        422: "The title field is required.",
+        500: "Something went wrong on our side.",
+      };
+      payload = {
+        error: { status: http, code: http === 401 ? "unauthorized" : http === 404 ? "not_found" : "bad_request", message: messages[http] ?? "Request failed." },
+      };
+    }
+
+    result.write(JSON.stringify(payload, null, 2));
+    empty.hidden = true;
+    result.hidden = false;
+    const bytes = new TextEncoder().encode(JSON.stringify(payload)).length;
+    summary.textContent = `${http} · ${shape} · ${bytes} bytes${shape === "list" ? ` · ${count} item${count === 1 ? "" : "s"}` : ""}`;
+  }
+
+  resource.addEventListener("input", run);
+  seed.addEventListener("input", run);
+  items.addEventListener("input", run);
+  status.addEventListener("change", run);
+
+  const addButton = button("Add field", {
+    icon: "plus",
+    kind: "quiet",
+    onclick: () => {
+      fields.push({ name: `field_${fields.length + 1}`, type: "text" });
+      renderFields();
+      run();
+    },
+  });
+
+  const copyButton = button("Copy JSON", {
+    icon: "copy",
+    onclick: async () => {
+      try {
+        await navigator.clipboard.writeText(result.textContent);
+        toast("Payload copied");
+      } catch {
+        error.write("The clipboard is blocked here. Download the file instead.");
+      }
+    },
+  });
+
+  const downloadButton = button("Download .json", {
+    icon: "download",
+    kind: "fill",
+    onclick: () => {
+      if (!result.textContent) return;
+      download(`${(resource.value.trim() || "payload").replace(/[^\w-]+/g, "-")}-${shape}.json`, result.textContent, "application/json");
+    },
+  });
+
+  renderFields();
+  sync();
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Resource", resource, "Used in the error message and the file name."),
+        el("div", { class: "grid gap-1.5" }, el("span", { class: "text-sm font-semibold text-ink-2" }, "Shape"), shapeRow),
+        itemsPanel,
+        statusPanel,
+        panel("Seed", seed),
+        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" }, "Fields"),
+            addButton),
+          list),
+        error
+      ),
+      stack(summary, empty, result)
+    ),
+    foot: actions(copyButton, downloadButton),
+  });
+
+  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 };