Function initFailureMuseum

docs/src/javascripts/lifecycle.js:314–348

(host)

  ];

  function initFailureMuseum(host) {
    if (!host) return;
    host.innerHTML = "";
    host.classList.add("lc-failures");

    host.appendChild(htmlEl("div", { class: "lc-failures__head" },
      htmlEl("span", { class: "lc-mono lc-muted" }, "common failure modes · and the rubric that catches each")));

    const grid = htmlEl("div", { class: "lc-failures__grid" });
    FAILURES.forEach((f, i) => {
      const card = htmlEl("div", { class: "lc-failures__card", "data-i": i });
      card.style.opacity = "0";
      card.style.transform = "translateY(8px)";
      card.style.transition = "opacity 300ms ease-out, transform 300ms ease-out";
      card.appendChild(htmlEl("p", { class: "lc-failures__eyebrow" }, "failure mode"));
      card.appendChild(htmlEl("h4", { class: "lc-failures__name" }, f.name));
      card.appendChild(htmlEl("p", { class: "lc-failures__what" }, f.what));
      card.appendChild(htmlEl("p", { class: "lc-failures__caught" }, [
        htmlEl("span", { class: "lc-failures__caughtLabel" }, "caught by: "),
        f.caught,
      ]));
      grid.appendChild(card);
    });
    host.appendChild(grid);

    function reveal() {
      grid.querySelectorAll(".lc-failures__card").forEach((card, i) => {
        setTimeout(() => {
          card.style.opacity = "1";
          card.style.transform = "translateY(0)";
        }, 90 * i);
      });
    }
    whenInView(host, reveal);
  }

  // ─────────────────────────────────────────── 3. SCAFFOLD WIZARD ─────────