mevebu 2.0.0 → 2.2.0

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/passphrase-generator.js

@@ -0,0 +1,149 @@
+// A passphrase from a bundled word list. The entropy reading is arithmetic on
+// the size of that list, not an estimate: log2(length) bits per word.
+import {
+  el, icon, toast, bench, stack, panel, numberInput, selectInput, button,
+  actions, toolcard, notice, checkbox, rangeInput, copyButton, chipRow,
+} from "../core.js";
+
+const WORDS = `acorn amber anchor apple arrow aspen attic autumn badge bagel baker bamboo
+banjo barrel basil basket beach beacon bean bear beaver bell belt bench berry birch biscuit
+bison blade blanket bloom board boat bolt bonfire book boot bottle boulder bowl box braid branch
+brass bread brick bridge broom brush bubble bucket buffalo bugle bulb bunny burrow bus butter
+button cabin cactus camel candle candy canoe canvas canyon carbon cargo carpet carrot cart castle
+cedar chalk cherry chess chest chicken chisel cider cinema circle city clamp clay cliff cloak clock
+cloud clover coach coast cobra cocoa comet compass copper coral cork corn cotton couch cougar
+country court cove crab crane crater crayon creek crest cricket crimson crow crown crystal cube
+cupboard curl curtain cycle daisy dance dawn deer delta denim desert desk diamond dice diner dock
+dolphin dome donkey door dove dragon drift drum dune dusk eagle earth easel echo egg elbow elder
+elk ember engine envelope falcon fang farm feather fence fern ferry field fig finch fire fish flag
+flame flask fleet flint float flock flute foam fog forest fork fossil fountain fox frame frost fruit
+galley garden garlic gate gecko gem ginger glacier glass glove goat gold goose gourd grain grape
+grass gravel green grove guitar gull gust hammer harbor harp harvest hawk hay hedge helmet heron
+hill hinge hive holly honey hoof hook horn horse hotel hut iceberg ink inlet iron island ivory ivy
+jacket jade jaguar jar jasmine jelly jewel jigsaw jungle juniper kayak kettle key kite kitten kiwi
+knife knot koala ladder lagoon lake lamp lantern lapel laser latch lattice leaf ledge lemon lens
+letter lever lily lime linen lion lizard lobster lock log lotus lumber lunar lynx magnet magneto
+maize mango maple marble march marsh mask mast meadow medal melon mesa metal meteor mint mirror
+mist mitten mole monkey moon moose mortar moss moth motor mound mountain mouse mushroom music
+napkin needle nest nettle nickel night noodle north note nugget oak oasis ocean olive onion opal
+orange orbit orchid otter oven owl oxide oyster paddle page palm panda panel paper parcel parrot
+pasture patio peach peanut pear pebble pelican pen pencil pepper perch petal piano picnic pier
+pigeon pillar pine piston pitcher plain plane planet plank plant plaster plate plaza plum pocket
+pond pony poppy porch portal potato prairie prism pumpkin puzzle quail quarry quartz quill quiver
+rabbit radar raft rail rain rake ram ranch raven ravine ray razor reef relay ribbon rice ridge
+rifle ring river road robin rocket rod roof root rope rose rowboat ruby rug ruler saddle sage sail
+salmon sand sapphire satchel saw scarf school scooter scout sea seal seed shade shark sheep shelf
+shell shield ship shoe shore shovel shrub silk silver siren skate sketch sky sled slope snail snake
+snow soap sock sofa solar song soup sparrow spice spider spike spine sponge spoon spring spruce
+square squid stable stack star statue steam steel stem step stick stone stool storm stove strap
+stream street string sugar summer sun swan sweat sweet swift swing table tackle tail talon tank
+tapir tea teal temple tent thistle thorn thread thunder tide tiger timber tin toad toast tomato
+tone tool tooth topaz torch tower track trail train trap tray tree trek trench tribe trout truck
+trumpet trunk tulip tunnel turtle twig valley vanilla vase velvet vine violet violin vista wagon
+walnut walrus wand wave wax wheat wheel whip whisper willow wind window wing winter wire wolf wood
+wool wrench yacht yarn yellow yew zebra zinc zipper zone`.split(/\s+/).filter(Boolean);
+
+const SEPARATORS = [
+  { value: "-", label: "hyphen" },
+  { value: " ", label: "space" },
+  { value: ".", label: "dot" },
+  { value: "_", label: "underscore" },
+];
+
+export function mount(slot) {
+  let phrase = "";
+
+  const count = rangeInput({ min: "2", max: "12", step: "1", value: "5", "aria-label": "Words" });
+  const countLabel = el("span", { class: "text-sm font-semibold text-ink-2 tabular-nums" }, "5 words");
+  const separator = selectInput(SEPARATORS, { value: "-", "aria-label": "Separator" });
+  const capitalize = checkbox("Capitalize each word", { checked: false });
+  const number = checkbox("Add a number", { checked: false });
+  const symbol = checkbox("Add a symbol", { checked: false });
+
+  const error = notice("warn");
+  const output = el("p", {
+    class: "m-0 wrap-anywhere font-mono text-[clamp(20px,3.4vw,28px)] font-bold leading-[1.4] tracking-[-0.01em] text-ink",
+    "aria-live": "polite",
+  }, "");
+  const entropy = el("p", { class: "m-0 text-sm text-ink-2" });
+  const panelBody = el("div", { class: "grid gap-2 rounded-r2 border border-orbit bg-deck-2 p-4" }, output, entropy);
+
+  function make() {
+    error.write("");
+    if (!WORDS.length) {
+      error.write("The word list is empty.");
+      return;
+    }
+    const size = Math.max(2, Math.min(12, Number(count.value) || 5));
+    const random = crypto.getRandomValues(new Uint32Array(size + 2));
+    const parts = [];
+    for (let i = 0; i < size; i++) {
+      let word = WORDS[random[i] % WORDS.length];
+      if (capitalize.input.checked) word = word[0].toUpperCase() + word.slice(1);
+      parts.push(word);
+    }
+    if (number.input.checked) parts.push(String(random[size] % 100));
+    if (symbol.input.checked) parts.push("!@#$%&*?"[random[size + 1] % 9]);
+
+    const join = separator.value === " " ? " " : separator.value;
+    phrase = parts.join(join);
+
+    // Each word is log2(WORDS.length) bits, because every index is equally
+    // likely. The optional number and symbol add about 6.6 and 3.2 bits.
+    const bits = size * Math.log2(WORDS.length) + (number.input.checked ? Math.log2(100) : 0) + (symbol.input.checked ? Math.log2(9) : 0);
+    // Half the space on average, at 100 billion guesses a second.
+    const seconds = 2 ** (bits - 1) / 1e11;
+    entropy.textContent = `${Math.round(bits)} bits · ${formatTime(seconds)} to guess at 100 billion tries a second`;
+    output.textContent = phrase;
+  }
+
+  function formatTime(seconds) {
+    if (seconds < 1) return "under a second";
+    if (seconds < 60) return `about ${Math.round(seconds)} seconds`;
+    const years = seconds / 31_557_600;
+    if (seconds < 3600) return `about ${Math.max(1, Math.round(seconds / 60))} minutes`;
+    if (seconds < 86400) return `about ${Math.round(seconds / 3600)} hours`;
+    if (years < 1) return `about ${Math.round(seconds / 86400)} days`;
+    if (years < 1000) return `about ${Math.round(years)} years`;
+    if (years < 1e6) return `about ${Math.round(years / 1000)} thousand years`;
+    if (years < 1e9) return `about ${Math.round(years / 1e6)} million years`;
+    return "longer than the universe has existed";
+  }
+
+  count.addEventListener("input", () => {
+    countLabel.textContent = `${count.value} word${count.value === "1" ? "" : "s"}`;
+    make();
+  });
+  separator.addEventListener("change", make);
+  capitalize.input.addEventListener("change", make);
+  number.input.addEventListener("change", make);
+  symbol.input.addEventListener("change", make);
+
+  const regenerate = button("Generate", { icon: "refresh-cw", kind: "fill", onclick: make });
+  const copy = copyButton(() => phrase, "Copy passphrase");
+
+  make();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        el("div", { class: "grid gap-1.5" }, el("span", { class: "text-sm font-semibold text-ink-2" }, "Words"), count, countLabel),
+        panel("Separator", separator),
+        capitalize,
+        number,
+        symbol,
+        error
+      ),
+      stack(panelBody,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "The word list is bundled with the app, so this works offline. Each word is worth about 9 bits; five words is about 46 bits, which suits a login with rate limiting. Use more words for anything that protects money."))
+    ),
+    foot: actions(regenerate, copy),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

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

@@ -5,6 +5,7 @@ import {
   numberInput, button, actions, toolcard, blank, notice,
 } from "../core.js";
 import { toCsv } from "../csv.js";
+import { seeded, pick, uuid } from "../random.js";
 
 const TYPES = [
   { value: "text", label: "Text" },
@@ -24,32 +25,6 @@ const WORDS = [
   "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":
@@ -153,15 +128,6 @@ export function mount(slot) {
     );
   }
 
-  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;
@@ -191,7 +157,7 @@ export function mount(slot) {
     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"));
+    const random = seeded(seed.value || "mevebu");
     header = names;
     table = Array.from({ length: count }, (_, rowIndex) =>
       columns.map((column) =>

package/mevebu/libs/js/tools/survey-responses.js

@@ -0,0 +1,225 @@
+// Fake survey responses. Each question carries weights, so a dashboard can be
+// tested against answers that lean the way real answers lean, not uniform noise.
+import {
+  el, icon, toast, download, bench, stack, panel, textInput, selectInput,
+  numberInput, button, actions, toolcard, blank, notice,
+} from "../core.js";
+import { toCsv } from "../csv.js";
+import { seeded, pick, uuid } from "../random.js";
+
+const TYPES = [
+  { value: "scale", label: "Scale 1 to 5" },
+  { value: "single", label: "Single choice" },
+  { value: "multi", label: "Multiple choice" },
+  { value: "text", label: "Short text" },
+];
+
+const WORDS = ["clear", "useful", "slow", "confusing", "helpful", "missing", "fast", "solid"];
+
+function weighted(random, options) {
+  const total = options.reduce((sum, option) => sum + Math.max(0, option.weight), 0);
+  if (total <= 0) return pick(random, options).label;
+  let roll = random() * total;
+  for (const option of options) {
+    roll -= Math.max(0, option.weight);
+    if (roll <= 0) return option.label;
+  }
+  return options[options.length - 1].label;
+}
+
+export function mount(slot) {
+  let questions = [
+    {
+      text: "How easy was it to use?",
+      type: "scale",
+      options: [
+        { label: "1", weight: 1 },
+        { label: "2", weight: 2 },
+        { label: "3", weight: 5 },
+        { label: "4", weight: 7 },
+        { label: "5", weight: 5 },
+      ],
+    },
+    {
+      text: "Which part did you use most?",
+      type: "single",
+      options: [
+        { label: "Convert", weight: 6 },
+        { label: "Text", weight: 3 },
+        { label: "Data", weight: 2 },
+      ],
+    },
+  ];
+
+  const respondents = numberInput({ min: "1", max: "5000", step: "1", value: "50", "aria-label": "Respondents" });
+  const seed = textInput({ value: "mevebu", "aria-label": "Seed", class: "font-mono" });
+  const withIds = { input: null };
+
+  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("clipboard-list", "Add a question to see responses.");
+
+  let table = [];
+  let header = [];
+
+  function renderQuestions() {
+    list.replaceChildren(
+      ...questions.map((question, index) => {
+        const optionRows = question.options.map((option, optionIndex) =>
+          el("div", { class: "flex items-center gap-2" },
+            textInput({
+              value: option.label,
+              placeholder: `Option ${optionIndex + 1}`,
+              "aria-label": `Question ${index + 1} option ${optionIndex + 1}`,
+              oninput: (event) => { option.label = event.target.value; run(); },
+            }),
+            numberInput({
+              value: String(option.weight),
+              min: "0",
+              max: "100",
+              "aria-label": `Question ${index + 1} option ${optionIndex + 1} weight`,
+              oninput: (event) => { option.weight = Number(event.target.value) || 0; run(); },
+            }),
+            el("button", {
+              class: "inline-flex size-8 flex-none cursor-pointer items-center justify-center rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-danger disabled:opacity-40",
+              type: "button",
+              "aria-label": `Remove option ${optionIndex + 1}`,
+              disabled: question.options.length <= 1,
+              onclick: () => { question.options.splice(optionIndex, 1); renderQuestions(); run(); },
+            }, icon("x", "size-3.5"))));
+
+        return el(
+          "section",
+          { class: "grid gap-2 rounded-r1 border border-orbit bg-deck-2 p-2.5" },
+          el("div", { class: "grid gap-2 [grid-template-columns:minmax(0,1fr)_auto]" },
+            textInput({
+              value: question.text,
+              placeholder: `Question ${index + 1}`,
+              "aria-label": `Question ${index + 1}`,
+              oninput: (event) => { question.text = event.target.value; run(); },
+            }),
+            el("button", {
+              class: "inline-flex size-9 cursor-pointer items-center justify-center rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-danger disabled:opacity-40",
+              type: "button",
+              "aria-label": `Remove question ${index + 1}`,
+              disabled: questions.length === 1,
+              onclick: () => { questions.splice(index, 1); renderQuestions(); run(); },
+            }, icon("trash", "size-4"))),
+          selectInput(TYPES.map((type) => ({ value: type.value, label: type.label })), {
+            value: question.type,
+            "aria-label": `Question ${index + 1} type`,
+            onchange: (event) => { question.type = event.target.value; renderQuestions(); run(); },
+          }),
+          question.type === "text" ? null : el("div", { class: "grid gap-1.5" },
+            el("span", { class: "text-2xs font-semibold tracking-[0.06em] text-ink-3 uppercase" }, "Option and weight"),
+            ...optionRows)
+        );
+      })
+    );
+  }
+
+  function answer(question, random) {
+    if (question.type === "text") {
+      return `${pick(random, WORDS)} ${pick(random, WORDS)}`;
+    }
+    if (question.type === "multi") {
+      const chosen = question.options.filter(() => random() < Math.min(0.9, question.options.length ? 0.4 : 0));
+      return (chosen.length ? chosen : [pick(random, question.options)]).map((option) => option.label).join(" | ");
+    }
+    return weighted(random, question.options);
+  }
+
+  function run() {
+    error.write("");
+    const count = Math.max(1, Math.min(5000, Number(respondents.value) || 1));
+    const random = seeded(seed.value || "mevebu");
+    header = ["respondent_id", "submitted_at", ...questions.map((question) => question.text.trim() || "question")];
+    table = Array.from({ length: count }, () => {
+      const submitted = new Date(Date.UTC(2026, 0, 1) + Math.floor(random() * 90) * 86400000);
+      return [
+        uuid(random).slice(0, 8),
+        submitted.toISOString().slice(0, 10),
+        ...questions.map((question) => answer(question, random)),
+      ];
+    });
+    summary.textContent = `${count} respondent${count === 1 ? "" : "s"} · ${questions.length} question${questions.length === 1 ? "" : "s"} · seed ${seed.value || "mevebu"}`;
+    renderPreview();
+  }
+
+  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 columns = header.length;
+    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(${columns}, minmax(100px, 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(${columns}, minmax(100px, 1fr))`,
+      }, ...row.map((cell) => el("span", { class: "truncate font-mono text-2xs text-ink-2" }, cell)))
+    );
+    preview.replaceChildren(head, ...body);
+  }
+
+  respondents.addEventListener("input", run);
+  seed.addEventListener("input", run);
+
+  const addQuestion = button("Add question", {
+    icon: "plus",
+    kind: "quiet",
+    onclick: () => {
+      questions.push({ text: `Question ${questions.length + 1}`, type: "scale", options: [
+        { label: "1", weight: 1 }, { label: "2", weight: 2 }, { label: "3", weight: 5 }, { label: "4", weight: 5 }, { label: "5", weight: 2 },
+      ] });
+      renderQuestions();
+      run();
+    },
+  });
+
+  const downloadButton = button("Download CSV", {
+    icon: "download",
+    kind: "fill",
+    onclick: () => {
+      if (!table.length) return;
+      download("responses.csv", toCsv([header, ...table]), "text/csv");
+      toast("Responses ready");
+    },
+  });
+
+  renderQuestions();
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Respondents", respondents),
+        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" }, "Questions"),
+            addQuestion),
+          list),
+        error
+      ),
+      stack(summary, empty, preview,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "Weights are relative, not percentages. A weight of 7 against 3 means the first answer is about twice as likely."))
+    ),
+    foot: actions(downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };