hecks 3.10.0 → 3.11.0

data/lib/hecks/projections/site/cms_editor/templates/src/browser/autosave.js.tmpl

@@ -0,0 +1,144 @@
+__BANNER__
+
+// A body written as a draft saves by itself. The form's command saves a draft beside the live body
+// (the page says which: `data-draft`), so this posts that same form, form-encoded, to its own address
+// with a header that makes the server answer in plain text instead of redirecting. It never posts to
+// the live body: the server runs only the draft-saving command for such a post.
+//
+// A save happens after five seconds with no typing, and when the writing surface loses focus, and
+// only when something changed and the form passes its own checks. The status line says what is
+// happening: "Saving...", "Draft saved 14:03", or "Could not save: <reason>" with a way to try again.
+// The browser asks before the page is left only while there are changes that are not saved.
+
+const QUIET_MS = 5000;
+
+/** The time of day, as the person's browser writes it, without seconds. */
+const clock = () => new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+
+/**
+ * Starts saving the draft of the body `root` holds.
+ *
+ * @param {HTMLElement} root the element that holds the writing surface (`data-body-editor`), or a
+ *   list of mixed blocks (`data-block-list`)
+ * @param {{ form?: HTMLFormElement, blocked?: () => string | null, refused?: (problems: object[]) => void }} [options]
+ *   `form` when it is not the root's own; `blocked` says why the form is not ready to save (null when
+ *   it is); `refused` is given the blocks a refused save named
+ * @returns {{ touch(): void, blur(): void }} what the writing surface calls when the text changes
+ *   and when it loses focus
+ */
+export function startDraft(root, options = {}) {
+  const form = options.form ?? root.closest("form");
+  const status = document.querySelector("[data-draft-status]");
+  const discard = document.querySelector("[data-draft-discard]");
+  let dirty = false;
+  let version = 0;
+  let timer = null;
+  let current = null;
+  let leaving = false;
+
+  const say = (text, retry = false) => {
+    if (!status) return;
+    status.replaceChildren(text);
+    if (!retry) return;
+    const button = Object.assign(document.createElement("button"), { type: "button", className: "link ml-2", textContent: "Try again" });
+    button.addEventListener("click", () => save());
+    status.append(button);
+  };
+
+  /** Whether the form may be sent: its own checks pass and the body has something in it. */
+  const passes = () => form.checkValidity() && !root.editor?.isEmpty;
+
+  const send = async () => {
+    const sent = version;
+    say("Saving...");
+    try {
+      const response = await fetch(form.action, {
+        method: "POST",
+        body: new URLSearchParams(new FormData(form)),
+        headers: { "X-Editor-Autosave": "1" },
+        credentials: "same-origin",
+        redirect: "manual",
+      });
+      if (response.type === "opaqueredirect") return fail("Sign in again to keep saving.");
+      const text = (await response.text()).trim();
+      if (!response.ok) {
+        named(response.headers.get("x-editor-problems"));
+        return fail(text || `The editor answered ${response.status}.`);
+      }
+      if (version === sent) dirty = false;
+      say(`Draft saved ${clock()}`);
+      discard?.removeAttribute("hidden");
+      document.dispatchEvent(new CustomEvent("editor:saved"));
+      return version === sent;
+    } catch {
+      return fail("the editor could not be reached.");
+    }
+  };
+
+  /** Hands the blocks a refusal names to the list, which opens them. */
+  const named = (header) => {
+    try {
+      if (header) options.refused?.(JSON.parse(decodeURIComponent(header)));
+    } catch {
+      /* a header that is not ours is ignored */
+    }
+  };
+
+  const fail = (reason) => {
+    say(`Could not save: ${reason}`, true);
+    return false;
+  };
+
+  /** Saves what is unsaved, once at a time; resolves to whether everything is saved. */
+  const save = () => {
+    clearTimeout(timer);
+    if (current) return current.then(() => save());
+    if (!dirty) return Promise.resolve(true);
+    const why = options.blocked?.();
+    if (why) {
+      say(`Not saved: ${why}`);
+      return Promise.resolve(false);
+    }
+    if (!passes()) {
+      say("Not saved: write something first, or fix what the form marks.");
+      return Promise.resolve(false);
+    }
+    current = send().finally(() => {
+      current = null;
+    });
+    return current;
+  };
+
+  window.addEventListener("beforeunload", (event) => {
+    if (leaving || (!dirty && !current)) return;
+    event.preventDefault();
+    event.returnValue = "";
+  });
+
+  document.addEventListener("submit", async (event) => {
+    const target = event.target;
+    if (target === form) {
+      leaving = true;
+      return;
+    }
+    if (!target.matches?.("[data-flush-draft]") || (!dirty && !current)) return;
+    event.preventDefault();
+    if (await save()) {
+      leaving = true;
+      target.submit();
+    }
+  });
+
+  return {
+    touch() {
+      dirty = true;
+      version += 1;
+      say("Changes not saved yet.");
+      clearTimeout(timer);
+      timer = setTimeout(save, QUIET_MS);
+    },
+    blur() {
+      if (dirty) save();
+    },
+  };
+}

data/lib/hecks/projections/site/cms_editor/templates/src/browser/blocks.js.tmpl

@@ -0,0 +1,500 @@
+__BANNER__
+
+// What a list of mixed blocks does with a script (the markup is ui/blocks.ts). Cards open and close;
+// a new card is made from the template the page carries for its kind; cards move up and down by
+// buttons, with the result announced in a polite live region and focus kept on the button that was
+// pressed; a card is removed after a question in a native dialog; and the cards are numbered again
+// after each change, renaming their fields so the form posts the list in the order it is shown.
+// A body inside a card gets its writing surface only when the card is first opened, so a page of
+// forty cards holds a handful of editors. A list written as a draft saves by itself (autosave.js),
+// and holds back while a card still lacks what its kind needs.
+//
+// The same script serves a page whose working copy is a value object (`data-draft-form` on the form):
+// the form as a whole saves by itself, whichever of its lists, pictures, writing surfaces and plain
+// inputs the person touches, and a picture outside any list opens the picker from its own group.
+import { retarget, safe } from "../ui/block_list.js";
+import { startDraft } from "./autosave.js";
+import { enhanceRows, firstProblem } from "./forms.js";
+import { mountMoments } from "./moments.js";
+import { mountPickers } from "./pickers.js";
+
+/** Loads the picture picker, or is null when the editor has no pictures to choose from. */
+const loadPicker = __PICKER_LOADER__;
+
+const pluralOf = (noun) => (/[^aeiou]y$/.test(noun) ? `${noun.slice(0, -1)}ies` : /(s|x|z|ch|sh)$/.test(noun) ? `${noun}es` : `${noun}s`);
+
+/** The attributes whose text names a field of a card, and so changes when the card's index does. */
+const NAMED = ["name", "id", "for", "aria-controls", "aria-describedby", "aria-labelledby", "href", "data-path", "data-name", "data-key", "data-alt"];
+
+/** Renames the fields of `card` (and the cards templates it carries) from index `was` to `at`. */
+function renumberFields(card, path, was, at) {
+  for (const element of [card, ...card.querySelectorAll("*")]) {
+    if (element.localName === "template") element.innerHTML = retarget(element.innerHTML, path, was, at);
+    for (const name of NAMED) {
+      if (element.hasAttribute(name)) element.setAttribute(name, retarget(element.getAttribute(name), path, was, at));
+    }
+  }
+}
+
+/** The cards of a group, in the order shown. */
+const cardsOf = (group) => [...group.querySelector(":scope > [data-cards]").children];
+
+/** The group a card is in. */
+const groupOf = (card) => card.closest("[data-group]");
+
+/** The list a group belongs to (the outermost group). */
+const listOf = (node) => node.closest("[data-block-list]");
+
+/** The working copies saved by the form as a whole, by form. */
+const formDrafts = new WeakMap();
+
+/** The polite line that speaks for `root`: a list's own, or a form's (made when it has none yet). */
+function lineOf(root) {
+  if (!root.matches("form")) return root.querySelector("[data-block-say]");
+  let line = root.querySelector(":scope > [data-form-say]");
+  if (!line) {
+    line = Object.assign(document.createElement("p"), { className: "sr-only" });
+    line.setAttribute("role", "status");
+    line.setAttribute("aria-live", "polite");
+    line.dataset.formSay = "";
+    root.append(line);
+  }
+  return line;
+}
+
+const say = (root, text) => {
+  const line = lineOf(root);
+  line.textContent = "";
+  setTimeout(() => { line.textContent = text; }, 30);
+};
+
+/** The controls of a card that are its own: not those of a card nested in it, nor a writing surface's fields. */
+const ownControls = (card) =>
+  [...card.querySelectorAll("input, select, textarea")].filter((control) => control.closest("[data-card]") === card && !control.closest("[data-body-editor]"));
+
+/** The one line that stands for a card: its first required text, else its longest text. */
+function summaryOf(card) {
+  const prefix = `${groupOf(card).dataset.path}.${card.dataset.index}.`;
+  const requires = (card.dataset.requires ?? "").split(" ").filter(Boolean).map((slot) => `${prefix}${slot}`);
+  const alt = card.dataset.summaryAlt ? `${prefix}${card.dataset.summaryAlt}` : null;
+  const named = (control) => requires.includes(control.name) || requires.some((slot) => control.name === `${slot}.value`);
+  const texts = ownControls(card)
+    .filter((control) => (control.type === "text" || control.type === "textarea") && control.value.trim() !== "" && (!control.closest("[data-picture]") || named(control) || control.name === alt))
+    .map((control) => ({ text: control.value.trim(), required: named(control), alt: control.name === alt }));
+  const chosen = texts.find((one) => one.alt) ?? texts.find((one) => one.required) ?? texts.reduce((best, one) => (!best || one.text.length > best.text.length ? one : best), null);
+  if (chosen) return chosen.text.length > 80 ? `${chosen.text.slice(0, 79)}…` : chosen.text;
+  const counts = [...card.querySelectorAll(":scope > [data-card-panel] > [data-group]")]
+    .map((group) => [group.dataset.noun, cardsOf(group).length])
+    .filter(([, count]) => count > 0)
+    .map(([noun, count]) => `${count} ${count === 1 ? noun : pluralOf(noun)}`);
+  return counts.join(", ");
+}
+
+const titleOf = (card) => {
+  const kind = card.querySelector(":scope > [data-card-head] [data-kind-badge]")?.textContent;
+  const number = card.querySelector(":scope > [data-card-head] [data-card-number]")?.textContent;
+  const noun = groupOf(card).dataset.noun;
+  const summary = card.querySelector(":scope > [data-card-head] [data-card-summary]")?.textContent;
+  return `${noun} ${number}${kind ? `, ${kind}` : ""}${summary ? `: ${summary}` : ""}`;
+};
+
+/** Sets the words that name a card to the tools and the toggle (they say which card they move, open or remove). */
+function nameTools(card) {
+  const noun = groupOf(card).dataset.noun;
+  const number = card.querySelector(":scope > [data-card-head] [data-card-number]").textContent;
+  const summary = card.querySelector(":scope > [data-card-head] [data-card-summary]").textContent;
+  const kind = card.querySelector(":scope > [data-card-head] [data-kind-badge]")?.textContent;
+  const what = `${noun} ${number}${kind ? `, ${kind}` : ""}${summary ? `, ${summary}` : ""}`;
+  const words = { up: "Move up", down: "Move down", remove: "Remove" };
+  for (const button of card.querySelectorAll(":scope > [data-card-head] [data-tools] button")) {
+    const label = `${words[button.dataset.action]} ${what}`;
+    button.setAttribute("aria-label", label);
+    button.title = label;
+  }
+}
+
+/** Numbers the group's cards again, and says which tools no longer apply. */
+function renumber(group) {
+  const path = group.dataset.path;
+  const cards = cardsOf(group);
+  cards.forEach((card, at) => {
+    if (card.dataset.index !== String(at)) {
+      renumberFields(card, path, card.dataset.index, String(at));
+      card.dataset.index = String(at);
+    }
+    card.querySelector(":scope > [data-card-head] [data-card-number]").textContent = String(at + 1);
+    const static_ = card.querySelector(":scope > [data-card-head] [data-card-static] span");
+    if (static_) static_.textContent = `${group.dataset.noun.charAt(0).toUpperCase()}${group.dataset.noun.slice(1)} ${at + 1}`;
+    card.querySelector('[data-action="up"]')?.setAttribute("aria-disabled", String(at === 0));
+    card.querySelector('[data-action="down"]')?.setAttribute("aria-disabled", String(at === cards.length - 1));
+    nameTools(card);
+  });
+  const count = group.querySelector(":scope > legend [data-count]");
+  if (count) count.textContent = `(${cards.length})`;
+  const empty = group.querySelector(":scope > [data-empty]");
+  if (empty) empty.hidden = cards.length > 0;
+  const max = Number(group.dataset.max ?? 0);
+  for (const add of group.querySelectorAll(":scope > [data-adder] [data-action=add], :scope > [data-action=add]")) {
+    add.setAttribute("aria-disabled", String(max > 0 && cards.length >= max));
+  }
+}
+
+/** Opens or closes a card. Opening mounts the writing surfaces inside it that are not yet mounted. */
+function toggle(card, open) {
+  const button = card.querySelector(':scope > [data-card-head] [data-action="toggle"]');
+  const panel = card.querySelector(":scope > [data-card-panel]");
+  const was = !panel.hidden;
+  const now = open ?? !was;
+  panel.hidden = !now;
+  button.setAttribute("aria-expanded", String(now));
+  button.querySelector("use")?.setAttribute("href", `#i-${now ? "chevron-down" : "chevron-right"}`);
+  if (now) mountEditors(panel);
+}
+
+/** Gives each visible rich-text body inside `scope` its writing surface, once. */
+function mountEditors(scope) {
+  const pending = [...scope.querySelectorAll("[data-body-editor]:not([data-mounted])")];
+  if (pending.length === 0) return;
+  for (const root of pending) {
+    const card = root.closest("[data-card]");
+    const noun = groupOf(card).dataset.noun;
+    root.dataset.base ??= root.dataset.label;
+    root.dataset.label = `${root.dataset.base} of ${noun} ${Number(card.dataset.index) + 1}`;
+  }
+  import("./body_editor.js").then((editor) => editor.mountWithin(scope));
+}
+
+/** Makes a card's script-only parts live: its toggle, its tools, and the cards nested in it. */
+function dress(card) {
+  card.querySelector(":scope > [data-card-head] [data-card-static]")?.setAttribute("hidden", "");
+  for (const node of card.querySelectorAll(":scope > [data-card-head] [data-tools], :scope > [data-card-head] [data-action=toggle]")) node.hidden = false;
+  const button = card.querySelector(':scope > [data-card-head] [data-action="toggle"]');
+  const open = card.hasAttribute("data-invalid") || card.hasAttribute("data-open");
+  const panel = card.querySelector(":scope > [data-card-panel]");
+  panel.hidden = !open;
+  button.setAttribute("aria-expanded", String(open));
+  button.querySelector("use")?.setAttribute("href", `#i-${open ? "chevron-down" : "chevron-right"}`);
+  for (const group of card.querySelectorAll(":scope > [data-card-panel] > [data-group]")) {
+    for (const add of group.querySelectorAll(":scope > [data-action=add]")) add.hidden = false;
+    for (const nested of cardsOf(group)) dress(nested);
+    renumber(group);
+  }
+}
+
+/** A new card for `group`, from the template of `kind` ("" for a nested group). */
+function create(group, kind) {
+  const template = [...group.querySelectorAll(":scope > template[data-card-template]")].find((one) => one.dataset.kind === kind);
+  if (!template) return null;
+  const cards = group.querySelector(":scope > [data-cards]");
+  const token = group.dataset.depth === "0" ? "ZZI0ZZ" : "ZZI1ZZ";
+  cards.insertAdjacentHTML("beforeend", template.innerHTML.split(token).join(String(cardsOf(group).length)));
+  const card = cards.lastElementChild;
+  dress(card);
+  enhanceRows(card);
+  mountPickers(card);
+  mountMoments(card);
+  return card;
+}
+
+/** Whether a card still lacks something its kind requires or a picture's description, with what. */
+function lacks(card) {
+  const prefix = `${groupOf(card).dataset.path}.${card.dataset.index}.`;
+  const names = (card.dataset.requires ?? "").split(" ").filter(Boolean);
+  const held = (slot) => [...card.querySelectorAll("input, select, textarea")].some((control) => {
+    const own = control.name === `${prefix}${slot}` || control.name.startsWith(`${prefix}${slot}.`);
+    return own && control.type !== "checkbox" && control.value.trim() !== "";
+  });
+  const missing = names.filter((slot) => !held(slot));
+  const own = [...card.querySelectorAll("[data-picture]")].filter((picture) => picture.closest("[data-card]") === card);
+  if (own.some(undescribed) && !missing.includes("alt")) missing.push("alt");
+  return missing;
+}
+
+/** Whether a picture names its file and has no description. */
+function undescribed(picture) {
+  const form = picture.closest("form") ?? document;
+  const key = form.querySelector(`[name="${CSS.escape(picture.dataset.key)}"]`);
+  const alt = form.querySelector(`[name="${CSS.escape(picture.dataset.alt)}"]`);
+  return Boolean(key?.value.trim()) && alt !== null && alt.value.trim() === "";
+}
+
+/** The card, and the nested cards under it, that lack something. */
+function incomplete(list) {
+  return [...list.querySelectorAll("[data-card]")].filter((card) => lacks(card).length > 0);
+}
+
+/** The pictures under `scope` that are in no list's card: a picture slot of a value object. */
+const loose = (scope) => [...scope.querySelectorAll("[data-picture]")].filter((picture) => !picture.closest("[data-card]"));
+
+/** Marks a picture's alt control invalid, with the line that says what to do, or clears the mark. */
+function markAlt(picture, show) {
+  const alt = picture.querySelector(`[name="${picture.dataset.alt}"]`);
+  if (!alt) return;
+  const id = `${alt.id}-error`;
+  picture.querySelector(`#${CSS.escape(id)}`)?.remove();
+  alt.removeAttribute("aria-invalid");
+  if (!show) return;
+  alt.setAttribute("aria-invalid", "true");
+  alt.setAttribute("aria-describedby", id);
+  alt.after(Object.assign(document.createElement("p"), { id, className: "text-xs font-semibold text-error", textContent: "Describe the picture for people who cannot see it." }));
+}
+
+/** The registered pictures' addresses by key, fetched once for the thumbnails. */
+let known = null;
+function pictures(url) {
+  known ??= fetch(url, { headers: { Accept: "application/json" }, credentials: "same-origin" })
+    .then((response) => (response.ok ? response.json() : { pictures: [] }))
+    .then((answer) => new Map(answer.pictures.map((picture) => [picture.key, picture.url])))
+    .catch(() => new Map());
+  return known;
+}
+
+/** Shows the thumbnail of the picture a card names, when it is a registered one. */
+async function thumb(picture) {
+  const url = picture.querySelector("[data-action=pick-picture]")?.dataset.media;
+  const image = picture.querySelector("[data-picture-thumb]");
+  const key = picture.querySelector(`[name="${picture.dataset.key}"]`)?.value.trim();
+  if (!url || !image) return;
+  const found = key ? (await pictures(url)).get(key) : null;
+  image.hidden = !found;
+  if (found) {
+    image.addEventListener("error", () => { image.hidden = true; }, { once: true });
+    image.src = found;
+  }
+}
+
+/** Opens the picture picker for a card's picture and puts the choice in its key and alt text. */
+async function pick(picture, list, afterwards) {
+  const button = picture.querySelector("[data-action=pick-picture]");
+  const key = picture.querySelector(`[name="${CSS.escape(picture.dataset.key)}"]`);
+  const alt = picture.querySelector(`[name="${CSS.escape(picture.dataset.alt)}"]`);
+  if (!loadPicker) return;
+  const { openPicker } = await loadPicker();
+  openPicker(picture, picture, {
+    url: button.dataset.media,
+    current: { mediaRef: key.value, alt: alt?.value ?? "" },
+    onPick: (chosen, text) => {
+      key.value = chosen;
+      if (alt) alt.value = text;
+      key.dispatchEvent(new Event("input", { bubbles: true }));
+      markAlt(picture, false);
+      known = null;
+      thumb(picture);
+      say(list, "Picture chosen.");
+      key.dispatchEvent(new Event("change", { bubbles: true }));
+    },
+    onClose: () => { button.focus(); afterwards(); },
+  });
+}
+
+function enhance(list) {
+  const form = list.closest("form");
+  let draft = null;
+  let asking = null;
+  const dialog = list.querySelector(":scope > [data-remove-dialog]");
+  const touch = () => (draft ?? formDrafts.get(form))?.touch();
+
+  const refresh = (card) => {
+    const line = card.querySelector(":scope > [data-card-head] [data-card-summary]");
+    if (line) line.textContent = summaryOf(card);
+    nameTools(card);
+    for (const parent of [card.parentElement?.closest("[data-card]")]) if (parent) refresh(parent);
+  };
+
+  const finish = (group, card, words) => {
+    renumber(group);
+    say(listOf(group), words);
+    touch();
+    return card;
+  };
+
+  const add = (group, kind) => {
+    const max = Number(group.dataset.max ?? 0);
+    const noun = group.dataset.noun;
+    if (max > 0 && cardsOf(group).length >= max) return say(list, `At most ${max} ${noun}s fit here.`);
+    const card = create(group, kind);
+    if (!card) return null;
+    renumber(group);
+    toggle(card, true);
+    refresh(card);
+    card.querySelector("input:not([type=hidden]), select, textarea")?.focus();
+    card.scrollIntoView({ block: "nearest" });
+    return finish(group, card, `Added ${titleOf(card)}. ${cardsOf(group).length} in the list.`);
+  };
+
+  const move = (card, step) => {
+    const group = groupOf(card);
+    const cards = cardsOf(group);
+    const at = cards.indexOf(card);
+    const to = at + step;
+    if (to < 0 || to >= cards.length) return say(list, `${titleOf(card)} is already ${step < 0 ? "first" : "last"}.`);
+    if (step < 0) cards[to].before(card);
+    else cards[to].after(card);
+    card.querySelector(`[data-action="${step < 0 ? "up" : "down"}"]`).focus();
+    finish(group, card, `Moved ${titleOf(card)} to position ${to + 1} of ${cards.length}.`);
+  };
+
+  const remove = (card) => {
+    const group = groupOf(card);
+    const cards = cardsOf(group);
+    const at = cards.indexOf(card);
+    const words = titleOf(card);
+    const next = cards[at + 1] ?? cards[at - 1];
+    card.remove();
+    renumber(group);
+    const target = next?.querySelector(':scope > [data-card-head] [data-action="toggle"]') ?? group.querySelector(":scope > [data-adder] select, :scope > [data-action=add]");
+    target?.focus();
+    finish(group, card, `Removed ${words}. ${cardsOf(group).length} left in the list.`);
+  };
+
+  list.addEventListener("click", (event) => {
+    const button = event.target.closest("[data-action]");
+    if (!button || listOf(button) !== list) return;
+    const card = button.closest("[data-card]");
+    const action = button.dataset.action;
+    if (action === "toggle") return toggle(card);
+    if (action === "up") return move(card, -1);
+    if (action === "down") return move(card, 1);
+    if (action === "pick-picture") return pick(button.closest("[data-picture]"), list, () => {});
+    if (action === "remove") {
+      asking = { card, opener: button };
+      dialog.querySelector("[data-remove-title]").textContent = `Remove ${titleOf(card)}?`;
+      return dialog.showModal();
+    }
+    if (action === "remove-cancel") return dialog.close();
+    if (action === "remove-confirm") {
+      const chosen = asking;
+      asking = null;
+      dialog.close();
+      return remove(chosen.card);
+    }
+    if (action === "add") {
+      const group = button.closest("[data-group]");
+      const kind = group.querySelector(":scope > [data-adder] [data-add-kind]")?.value ?? "";
+      add(group, kind);
+    }
+  });
+
+  form?.addEventListener("input", (event) => {
+    const card = event.target.closest?.("[data-card]");
+    if (card) refresh(card);
+    const picture = event.target.closest?.("[data-picture]");
+    if (picture && event.target.name === picture.dataset.key) thumb(picture);
+    touch();
+  });
+  form?.addEventListener("change", touch);
+  form?.addEventListener("editor:changed", (event) => {
+    const card = event.target.closest?.("[data-card]");
+    if (card) refresh(card);
+    touch();
+  });
+  form?.addEventListener("focusout", (event) => {
+    const picture = event.target.closest?.("[data-picture]");
+    if (picture && event.target.name === picture.dataset.alt) markAlt(picture, undescribed(picture));
+    (draft ?? formDrafts.get(form))?.blur();
+  });
+
+  dialog.addEventListener("close", () => {
+    if (asking) asking.opener.focus();
+    asking = null;
+  });
+  for (const card of cardsOf(list)) dress(card);
+  for (const node of list.querySelectorAll(":scope > [data-adder]")) node.hidden = false;
+  for (const group of [list, ...list.querySelectorAll("[data-group]")]) renumber(group);
+  for (const card of list.querySelectorAll("[data-card]")) refresh(card);
+  for (const picture of list.querySelectorAll("[data-picture]")) thumb(picture);
+  for (const open of list.querySelectorAll("[data-card][data-invalid] > [data-card-panel], [data-card][data-open] > [data-card-panel]")) mountEditors(open);
+
+  if (list.hasAttribute("data-draft")) {
+    draft = startDraft(list, {
+      form,
+      blocked: () => {
+        const first = incomplete(list)[0];
+        return first ? `${titleOf(first)} needs more before it can be saved. Complete it, or use Save draft to see what the domain says.` : null;
+      },
+      refused: (problems) => reveal(list, problems),
+    });
+  }
+}
+
+/** Opens the cards a refusal names, and the cards that hold them, so what is wrong can be seen. */
+function reveal(scope, problems) {
+  for (const problem of problems) {
+    let card = problem.name ? scope.querySelector(`#blk-${safe(problem.name)}`) : null;
+    while (card) {
+      toggle(card, true);
+      card = card.parentElement?.closest("[data-card]");
+    }
+  }
+}
+
+/** A form whose working copy is a value object saves as a whole, whichever part of it is touched. */
+function enhanceForm(form) {
+  const draft = startDraft(form, {
+    form,
+    blocked: () => {
+      const first = incomplete(form)[0];
+      if (first) return `${titleOf(first)} needs more before it can be saved. Complete it, remove it, or use Save draft to see what the domain says.`;
+      return loose(form).some(undescribed) ? "A picture needs its description before it can be saved." : null;
+    },
+    refused: (problems) => reveal(form, problems),
+  });
+  formDrafts.set(form, draft);
+  form.addEventListener("input", () => draft.touch());
+  form.addEventListener("change", () => draft.touch());
+  form.addEventListener("editor:changed", () => draft.touch());
+  form.addEventListener("focusout", () => draft.blur());
+}
+
+/**
+ * A form is not sent while a picture names its file and has no description: the group says so beside
+ * the field, the card that holds it opens, and focus goes there. (The domain refuses the same, in its
+ * own words, when this is not in the way, as for a request that does not come from this page.)
+ */
+function guardPictures(form) {
+  form.addEventListener("submit", (event) => {
+    const missing = [...form.querySelectorAll("[data-picture]")].filter(undescribed);
+    if (missing.length === 0) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    for (const picture of missing) {
+      let card = picture.closest("[data-card]");
+      while (card) {
+        toggle(card, true);
+        card = card.parentElement?.closest("[data-card]");
+      }
+      markAlt(picture, true);
+    }
+    const first = missing[0].querySelector(`[name="${missing[0].dataset.alt}"]`);
+    first?.scrollIntoView({ block: "center" });
+    first?.focus({ preventScroll: true });
+    say(form, "A picture needs its description before it can be saved.");
+  }, true);
+}
+
+/** A picture that is no card's (a slot of a value object) opens the picker from its own group. */
+function enhanceLoose(form) {
+  const own = (picture) => picture && !picture.closest("[data-card]");
+  if (loose(form).length === 0) return;
+  for (const picture of loose(form)) thumb(picture);
+  form.addEventListener("click", (event) => {
+    const picture = event.target.closest?.("[data-action=pick-picture]")?.closest("[data-picture]");
+    if (own(picture)) pick(picture, form, () => {});
+  });
+  form.addEventListener("input", (event) => {
+    const picture = event.target.closest?.("[data-picture]");
+    if (own(picture) && event.target.name === picture.dataset.key) thumb(picture);
+  });
+  form.addEventListener("focusout", (event) => {
+    const picture = event.target.closest?.("[data-picture]");
+    if (own(picture) && event.target.name === picture.dataset.alt) markAlt(picture, undescribed(picture));
+  });
+}
+
+export function enhanceBlocks() {
+  for (const form of document.querySelectorAll("form[data-draft-form]")) enhanceForm(form);
+  for (const list of document.querySelectorAll("[data-block-list]")) enhance(list);
+  for (const form of document.querySelectorAll("form")) enhanceLoose(form);
+  for (const form of document.querySelectorAll("form[data-form]")) guardPictures(form);
+  if (document.querySelector("[data-card][data-open], [data-card][data-invalid]")) firstProblem();
+}