hecks 3.10.0 → 3.11.0

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

@@ -0,0 +1,210 @@
+__BANNER__
+
+// What forms do with a script: repeatable rows that can be added, removed and moved, a question
+// before a destructive command, a button that says it is busy while a form is sent, and focus on the
+// first thing that needs fixing. A form posts the same without any of it.
+
+import { mountPickers, unmountPickers } from "./pickers.js";
+
+const icon = (name) => `<svg class="icon" aria-hidden="true" focusable="false"><use href="#i-${name}"/></svg>`;
+
+const sanitize = (text) => text.replace(/[^A-Za-z0-9]+/g, "-");
+
+/** A polite line for assistive technology, for changes that have no other way to be heard. */
+function say(text) {
+  let line = document.querySelector("[data-say]");
+  if (!line) {
+    line = document.createElement("p");
+    line.className = "sr-only";
+    line.setAttribute("role", "status");
+    line.dataset.say = "";
+    document.body.append(line);
+  }
+  line.textContent = text;
+}
+
+/** Renames every name, id and path inside `root` that starts with `from` to start with `to` (ids and `for` use the sanitised spelling). */
+function rename(root, from, to) {
+  const plain = (value) => (value.startsWith(from) ? to + value.slice(from.length) : value);
+  const safe = (value) => value.replace(sanitize(from), sanitize(to));
+  for (const element of root.querySelectorAll("[name], [data-path], [id], [for], [aria-describedby]")) {
+    if (element.hasAttribute("name")) element.setAttribute("name", plain(element.getAttribute("name")));
+    if (element.hasAttribute("data-path")) element.setAttribute("data-path", plain(element.getAttribute("data-path")));
+    for (const attribute of ["id", "for", "aria-describedby"]) if (element.hasAttribute(attribute)) element.setAttribute(attribute, safe(element.getAttribute(attribute)));
+  }
+}
+
+/** One row's tools: move up, move down, remove. */
+function tools(noun) {
+  const holder = document.createElement("div");
+  holder.className = "absolute -top-1 right-0 flex";
+  holder.dataset.tools = "";
+  const make = (action, glyph, text) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "btn btn-ghost btn-square btn-xs";
+    button.dataset.action = action;
+    button.setAttribute("aria-label", `${text} ${noun}`);
+    button.title = `${text} ${noun}`;
+    button.innerHTML = icon(glyph);
+    return button;
+  };
+  holder.append(make("up", "arrow-up", "Move up"), make("down", "arrow-down", "Move down"), make("remove", "trash", "Remove"));
+  return holder;
+}
+
+/** Numbers the rows again after one was added, removed or moved: names, ids, legends, and which tools apply. */
+function renumber(repeat) {
+  const path = repeat.dataset.path;
+  const rows = [...repeat.querySelector("[data-rows]").children];
+  rows.forEach((row, at) => {
+    const was = row.dataset.index;
+    if (was !== String(at)) {
+      rename(row, `${path}.${was}.`, `${path}.${at}.`);
+      row.dataset.index = String(at);
+    }
+    const legend = row.querySelector(":scope > legend");
+    legend.textContent = legend.textContent.replace(/\d+$/, String(at + 1));
+    row.querySelector(':scope > [data-tools] [data-action="up"]').disabled = at === 0;
+    row.querySelector(':scope > [data-tools] [data-action="down"]').disabled = at === rows.length - 1;
+  });
+  const most = Number(repeat.dataset.max ?? 0);
+  repeat.querySelector(":scope > button.btn")?.setAttribute("aria-disabled", String(most > 0 && rows.length >= most));
+}
+
+/** A copy of `row` with nothing filled in, to be the next row. */
+function blank(row) {
+  const copy = row.cloneNode(true);
+  copy.querySelector(":scope > [data-tools]")?.remove();
+  unmountPickers(copy);
+  for (const input of copy.querySelectorAll("input, textarea")) {
+    if (input.type === "checkbox") input.checked = false;
+    else input.value = "";
+    if (input.dataset.initial !== undefined) input.dataset.initial = "";
+    input.removeAttribute("aria-invalid");
+  }
+  for (const select of copy.querySelectorAll("select")) {
+    select.selectedIndex = 0;
+    select.removeAttribute("aria-invalid");
+  }
+  for (const nested of copy.querySelectorAll("[data-rows]")) [...nested.children].slice(1).forEach((extra) => extra.remove());
+  // A run of rows inside the row is made live again for the copy: its buttons are new, not copied.
+  for (const nested of copy.querySelectorAll("[data-repeat]")) {
+    delete nested.dataset.dressed;
+    nested.querySelectorAll(":scope > button, [data-tools]").forEach((made) => made.remove());
+  }
+  return copy;
+}
+
+function repeating(repeat) {
+  const rows = repeat.querySelector("[data-rows]");
+  const noun = repeat.dataset.noun;
+  const dress = (row) => {
+    if (!row.querySelector(":scope > [data-tools]")) row.append(tools(noun));
+    for (const nested of row.querySelectorAll(":scope [data-repeat]")) if (!nested.dataset.dressed) repeating(nested);
+  };
+  repeat.dataset.dressed = "true";
+  [...rows.children].forEach(dress);
+  const add = document.createElement("button");
+  add.type = "button";
+  add.className = "btn btn-ghost btn-sm mt-1";
+  add.innerHTML = `${icon("plus")}<span>Add another ${noun}</span>`;
+  repeat.append(add);
+  add.addEventListener("click", () => {
+    const most = Number(repeat.dataset.max ?? 0);
+    if (most > 0 && rows.children.length >= most) return say(`At most ${most} ${noun}s fit here.`);
+    const last = rows.lastElementChild;
+    const copy = blank(last);
+    const at = rows.children.length;
+    rename(copy, `${repeat.dataset.path}.${last.dataset.index}.`, `${repeat.dataset.path}.${at}.`);
+    copy.dataset.index = String(at);
+    rows.append(copy);
+    dress(copy);
+    renumber(repeat);
+    mountPickers(copy);
+    copy.querySelector("input")?.focus();
+    say(`Added ${noun} ${at + 1}.`);
+  });
+  repeat.addEventListener("click", (event) => {
+    const button = event.target.closest("[data-tools] button");
+    if (!button || button.closest("[data-repeat]") !== repeat) return;
+    const row = button.closest("[data-row]");
+    const action = button.dataset.action;
+    if (action === "remove") return remove(repeat, rows, row, noun);
+    const target = action === "up" ? row.previousElementSibling : row.nextElementSibling;
+    if (!target) return;
+    if (action === "up") target.before(row);
+    else target.after(row);
+    renumber(repeat);
+    row.querySelector(`:scope > [data-tools] [data-action="${action}"]`).focus();
+    say(`Moved ${noun} ${[...rows.children].indexOf(row) + 1} of ${rows.children.length}.`);
+  });
+  renumber(repeat);
+}
+
+function remove(repeat, rows, row, noun) {
+  if (rows.children.length === 1) {
+    for (const input of row.querySelectorAll("input, textarea")) input.type === "checkbox" ? (input.checked = false) : (input.value = "");
+    for (const select of row.querySelectorAll("select")) select.selectedIndex = 0;
+    say(`Cleared ${noun}.`);
+    return;
+  }
+  const next = row.nextElementSibling ?? row.previousElementSibling;
+  row.remove();
+  renumber(repeat);
+  next.querySelector("input, button")?.focus();
+  say(`Removed ${noun}.`);
+}
+
+/** A destructive command asks first: its button opens the dialog the page carries. */
+function confirming() {
+  for (const trigger of document.querySelectorAll("[data-confirm]")) {
+    const dialog = document.getElementById(trigger.dataset.confirm);
+    if (!dialog || typeof dialog.showModal !== "function") continue;
+    trigger.addEventListener("click", (event) => {
+      event.preventDefault();
+      dialog.showModal();
+    });
+  }
+}
+
+/** A form that is on its way says so: the button is disabled and marked busy until the page changes. */
+function busy() {
+  for (const form of document.querySelectorAll("form[data-form]")) {
+    form.addEventListener("submit", () => {
+      for (const button of form.querySelectorAll("button[data-busy]")) {
+        setTimeout(() => {
+          button.disabled = true;
+          button.setAttribute("aria-busy", "true");
+        }, 0);
+      }
+    });
+  }
+  window.addEventListener("pageshow", () => {
+    for (const button of document.querySelectorAll("button[data-busy]")) {
+      button.disabled = false;
+      button.removeAttribute("aria-busy");
+    }
+  });
+}
+
+/** After a refusal, focus goes to the first field it names, or to the message. */
+export function firstProblem() {
+  const target = document.querySelector('[aria-invalid="true"]') ?? document.querySelector("[data-refusal]");
+  if (!target) return;
+  target.scrollIntoView({ block: "center" });
+  const control = target.matches("input, select, textarea") ? target : target.querySelector("input, select, textarea") ?? target;
+  control.focus({ preventScroll: true });
+}
+
+/** Makes the runs of repeatable rows under `scope` live (a card made after the page loaded holds some). */
+export function enhanceRows(scope) {
+  for (const repeat of scope.querySelectorAll("[data-repeat]")) if (!repeat.dataset.dressed) repeating(repeat);
+}
+
+export function enhanceForms() {
+  enhanceRows(document);
+  confirming();
+  busy();
+  firstProblem();
+}

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

@@ -0,0 +1,40 @@
+__BANNER__
+
+// What a list remembers. The filters a person last used on a list (its search words and its status)
+// are kept for the browser tab in `sessionStorage`, per aggregate, and applied when the list is opened
+// again with none named. Naming any of them, even to empty them, replaces what was kept; the Clear
+// link forgets it. Storage can be blocked or full, so every use of it is allowed to fail and the list
+// is then simply unfiltered.
+
+const KEPT = ["_q", "_status"];
+
+/** Whether the address names any filter or page of its own. */
+const named = (params) => ["_q", "_status", "_page"].some((key) => params.has(key));
+
+export function rememberFilters() {
+  const form = document.querySelector("form[data-list-filters]");
+  if (!form) return;
+  const key = `editor:list:${form.dataset.list}`;
+  const params = new URLSearchParams(window.location.search);
+  document.querySelector("[data-clear-filters]")?.addEventListener("click", () => {
+    try {
+      window.sessionStorage.removeItem(key);
+    } catch (error) {
+      /* storage is blocked: nothing was kept to forget */
+    }
+  });
+  try {
+    if (params.has("_q") || params.has("_status")) {
+      const kept = Object.fromEntries(KEPT.map((name) => [name, params.get(name) ?? ""]));
+      if (KEPT.every((name) => kept[name] === "")) window.sessionStorage.removeItem(key);
+      else window.sessionStorage.setItem(key, JSON.stringify(kept));
+      return;
+    }
+    const saved = named(params) ? null : JSON.parse(window.sessionStorage.getItem(key) ?? "null");
+    if (!saved) return;
+    for (const name of KEPT) if (typeof saved[name] === "string" && saved[name] !== "") params.set(name, saved[name]);
+    window.location.replace(`${window.location.pathname}?${params.toString()}`);
+  } catch (error) {
+    /* storage is blocked or holds something that is not ours: the list stays as the address names it */
+  }
+}

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

@@ -0,0 +1,26 @@
+__BANNER__
+
+// The editor's browser script, bundled by `npm run build` into dist/editor.js. Every page is
+// complete HTML that works without it; this only adds behaviour. The rich-text editor is a larger
+// piece of code, loaded only on a page that has a body to write.
+import { enhanceBlocks } from "./blocks.js";
+import { enhanceForms } from "./forms.js";
+import { rememberFilters } from "./lists.js";
+import { enhanceMoments } from "./moments.js";
+import { enhancePickers } from "./pickers.js";
+import { enhancePreview } from "./preview.js";
+import { enhanceShell } from "./shell.js";
+import { adoptToasts } from "./toast.js";
+
+rememberFilters();
+enhanceShell();
+enhanceMoments();
+enhancePickers();
+enhanceForms();
+enhanceBlocks();
+enhancePreview();
+adoptToasts();
+
+if (document.querySelector("[data-body-editor]")) {
+  import("./body_editor.js").then((editor) => editor.mountAll());
+}

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

@@ -0,0 +1,232 @@
+__BANNER__
+
+// The picture picker the writing surface opens for an image block. Pictures are dropped or chosen,
+// each with the alt text the domain requires, uploaded with a progress bar and a message of its
+// own when it is refused, and then shown beside the pictures the domain already holds, as a grid of
+// thumbnails (they come from the storage adapter's own addresses). A picture is chosen, given alt
+// text for this place in the text and an optional caption, and handed to the editor as a media key.
+// Everything the server sends is put into the page as text, never as markup.
+const icon = (name) => `<svg class="icon" aria-hidden="true" focusable="false"><use href="#i-${name}"/></svg>`;
+
+const make = (tag, props = {}, ...children) => {
+  const element = Object.assign(document.createElement(tag), props);
+  element.append(...children);
+  return element;
+};
+
+const ALLOWED = "image/jpeg,image/png,image/webp,image/gif,image/avif";
+
+async function getPictures(url) {
+  const response = await fetch(url, { headers: { Accept: "application/json" } });
+  if (!response.ok) throw new Error((await response.json().catch(() => ({}))).error ?? "The pictures could not be listed.");
+  return (await response.json()).pictures;
+}
+
+/** Uploads one picture, reporting progress as a fraction; resolves with the picture or rejects with the words to show. */
+function upload(url, file, alt, progress) {
+  return new Promise((resolve, reject) => {
+    const request = new XMLHttpRequest();
+    request.open("POST", url);
+    request.setRequestHeader("Accept", "application/json");
+    request.upload.addEventListener("progress", (event) => event.lengthComputable && progress(event.loaded / event.total));
+    request.addEventListener("load", () => {
+      let answer = {};
+      try { answer = JSON.parse(request.responseText); } catch (error) { /* not JSON */ }
+      if (request.status >= 200 && request.status < 300) resolve(answer);
+      else reject(new Error(answer.error ?? "The upload failed."));
+    });
+    request.addEventListener("error", () => reject(new Error("The upload could not be sent. Check the connection and try again.")));
+    const form = new FormData();
+    form.append("alt", alt);
+    form.append("file", file);
+    request.send(form);
+  });
+}
+
+/** One registered picture as a button: its thumbnail and its alt text. */
+function entry(picture, choose) {
+  const image = make("img", { src: picture.url, alt: "", loading: "lazy", width: 88, height: 88, className: "aspect-square w-full rounded object-cover" });
+  const button = make("button", { type: "button", title: picture.alt, className: "grid w-full gap-1 rounded-field border border-transparent p-1 text-left text-xs hover:bg-base-200" }, image, make("span", { className: "truncate", textContent: picture.alt || picture.key.slice(0, 12) }));
+  button.dataset.key = picture.key;
+  button.addEventListener("click", () => choose(picture, button));
+  return make("li", {}, button);
+}
+
+/**
+ * Opens the picker inside `frame`, below `bar`. `options.url` is the media endpoint,
+ * `options.current` the picture being replaced (or null), `options.onPick(key, alt, caption)` is called
+ * with the choice and `options.onClose()` when the picker goes away.
+ */
+export function openPicker(frame, bar, options) {
+  frame.querySelector("[data-picker]")?.remove();
+  const { url, current, onPick, onClose } = options;
+  let chosen = current?.mediaRef || null;
+  const staged = [];
+
+  const grid = make("ul", { className: "grid max-h-56 grid-cols-[repeat(auto-fill,minmax(5.5rem,1fr))] gap-2 overflow-auto" });
+  grid.setAttribute("aria-label", "Pictures already registered");
+  const list = make("ul", { className: "grid gap-1" });
+  const problem = make("div", { className: "alert alert-error alert-soft", hidden: true });
+  problem.setAttribute("role", "alert");
+  const files = make("input", { type: "file", accept: ALLOWED, multiple: true, className: "file-input file-input-sm w-full max-w-xs" });
+  files.setAttribute("aria-label", "Choose pictures to upload");
+  const zone = make("div", { className: "grid justify-items-center gap-2 rounded-field border-2 border-dashed border-edge p-5 text-center text-muted" },
+    make("span", { innerHTML: icon("upload") }), make("p", { textContent: "Drop pictures here, or choose them. JPEG, PNG, WebP, GIF or AVIF." }), files);
+  const upButton = make("button", { type: "button", className: "btn btn-sm", hidden: true });
+  const alt = make("input", { type: "text", className: "input w-full", required: true, value: current?.alt ?? "" });
+  alt.setAttribute("aria-required", "true");
+  const caption = make("input", { type: "text", className: "input w-full", value: current?.caption ?? "" });
+  const insert = make("button", { type: "button", className: "btn btn-neutral" }, "Insert");
+  const cancel = make("button", { type: "button", className: "btn btn-ghost" }, "Cancel");
+  const close = make("button", { type: "button", className: "btn btn-ghost btn-square btn-sm", innerHTML: icon("close") });
+  close.setAttribute("aria-label", "Close the picker");
+  const field = (text, input) => make("label", { className: "grid gap-1 font-semibold" }, text, input);
+  const panel = make("div", { className: "picker-panel fixed inset-x-2 top-16 z-20 mx-auto grid max-w-2xl gap-4 overflow-y-auto overscroll-contain rounded-box border border-base-300 bg-base-100 p-4 shadow-xl" },
+    make("div", { className: "flex items-center justify-between" }, make("h3", { className: "text-lg", textContent: "Insert a picture" }), close),
+    zone, list, upButton, make("p", { className: "text-sm text-muted", textContent: "Or choose a picture already registered:" }), grid,
+    field("Alt text for this picture (required)", alt), field("Caption (optional)", caption), problem, make("div", { className: "flex gap-2" }, insert, cancel));
+  panel.dataset.picker = "";
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-label", "Insert a picture");
+  // The panel stands in the window, between the app bar and the page's sticky action bar (when it has
+  // one), and scrolls inside itself; it never grows past what the window shows.
+  const fit = () => {
+    const actions = document.querySelector("[data-actionbar]");
+    const floor = actions ? Math.max(0, window.innerHeight - actions.getBoundingClientRect().top) : 0;
+    const top = Math.max(panel.getBoundingClientRect().top, 0);
+    panel.style.bottom = "auto";
+    panel.style.maxHeight = `calc(${window.visualViewport?.height ?? window.innerHeight}px - ${top}px - ${floor}px - 0.5rem - env(safe-area-inset-bottom, 0px))`;
+  };
+
+  const say = (message) => {
+    problem.textContent = message ?? "";
+    problem.hidden = !message;
+  };
+  const shut = () => { window.removeEventListener("resize", fit); window.visualViewport?.removeEventListener("resize", fit); panel.remove(); onClose?.(); };
+
+  const choose = (picture, button) => {
+    chosen = picture.key;
+    if (!alt.value.trim()) alt.value = picture.alt;
+    for (const other of grid.querySelectorAll("button")) {
+      other.removeAttribute("aria-pressed");
+      other.classList.remove("ring-2", "ring-primary");
+    }
+    button.setAttribute("aria-pressed", "true");
+    button.classList.add("ring-2", "ring-primary");
+    say(null);
+  };
+
+  const stage = (file) => {
+    const preview = make("img", { src: URL.createObjectURL(file), alt: "", className: "size-14 rounded object-cover" });
+    const text = make("input", { type: "text", className: "input input-sm w-full", placeholder: "Alt text (required)" });
+    text.setAttribute("aria-label", `Alt text for ${file.name}`);
+    text.setAttribute("aria-required", "true");
+    const bar = make("progress", { className: "progress progress-primary w-full", max: 1, value: 0, hidden: true });
+    const result = make("p", { className: "text-xs" });
+    const drop = make("button", { type: "button", className: "btn btn-ghost btn-square btn-xs", innerHTML: icon("close") });
+    drop.setAttribute("aria-label", `Remove ${file.name}`);
+    const row = make("li", { className: "grid grid-cols-[3.5rem_minmax(0,1fr)_auto] items-start gap-3 border-t border-base-300 py-2" },
+      preview, make("div", { className: "grid gap-1" }, make("p", { className: "truncate text-xs text-muted", textContent: file.name }), text, bar, result), drop);
+    const item = { file, row, text, bar, result, done: false };
+    drop.addEventListener("click", () => { staged.splice(staged.indexOf(item), 1); URL.revokeObjectURL(preview.src); row.remove(); refresh(); });
+    staged.push(item);
+    list.append(row);
+  };
+
+  const refresh = () => {
+    const pending = staged.filter((item) => !item.done);
+    upButton.hidden = pending.length === 0;
+    upButton.textContent = pending.length === 1 ? "Upload this picture" : `Upload ${pending.length} pictures`;
+  };
+
+  const add = (picked) => {
+    for (const file of picked) {
+      if (!ALLOWED.split(",").includes(file.type)) {
+        say(`${file.name} is not a JPEG, PNG, WebP, GIF or AVIF picture.`);
+        continue;
+      }
+      stage(file);
+    }
+    refresh();
+    staged.at(-1)?.text.focus();
+  };
+
+  const send = async () => {
+    say(null);
+    for (const item of staged.filter((entryItem) => !entryItem.done)) {
+      const words = item.text.value.trim();
+      if (!words) {
+        item.result.textContent = "Add alt text to upload this picture.";
+        item.result.className = "text-xs font-semibold text-error";
+        item.text.setAttribute("aria-invalid", "true");
+        item.text.focus();
+        continue;
+      }
+      item.text.removeAttribute("aria-invalid");
+      item.bar.hidden = false;
+      item.result.textContent = "";
+      try {
+        const made = await upload(url, item.file, words, (fraction) => { item.bar.value = fraction; });
+        item.done = true;
+        item.bar.value = 1;
+        item.result.textContent = "Uploaded.";
+        item.result.className = "text-xs font-semibold text-success";
+        item.text.disabled = true;
+        const picture = { key: made.key, alt: made.alt ?? words, url: made.url ?? `${url}/${encodeURIComponent(made.key)}` };
+        const node = entry(picture, choose);
+        grid.prepend(node);
+        choose(picture, node.firstChild);
+      } catch (err) {
+        item.bar.hidden = true;
+        item.result.textContent = err.message;
+        item.result.className = "text-xs font-semibold text-error";
+      }
+    }
+    refresh();
+  };
+
+  const submit = () => {
+    say(null);
+    if (!chosen) return say("Choose a picture, or upload one first.");
+    if (!alt.value.trim()) return say("Add alt text: describe the picture for someone who cannot see it.");
+    onPick(chosen, alt.value.trim(), caption.value.trim());
+    shut();
+  };
+
+  files.addEventListener("change", () => { add([...files.files]); files.value = ""; });
+  zone.addEventListener("dragover", (event) => { event.preventDefault(); zone.classList.add("border-primary", "bg-soft", "text-primary"); });
+  zone.addEventListener("dragleave", () => zone.classList.remove("border-primary", "bg-soft", "text-primary"));
+  zone.addEventListener("drop", (event) => {
+    event.preventDefault();
+    zone.classList.remove("border-primary", "bg-soft", "text-primary");
+    add([...event.dataTransfer.files]);
+  });
+  upButton.addEventListener("click", send);
+  insert.addEventListener("click", submit);
+  cancel.addEventListener("click", shut);
+  close.addEventListener("click", shut);
+  panel.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") { event.preventDefault(); shut(); }
+    if (event.key === "Enter" && event.target.tagName === "INPUT" && event.target.type !== "file") {
+      event.preventDefault();
+      if (staged.includes(staged.find((item) => item.text === event.target))) send();
+      else submit();
+    }
+  });
+
+  frame.append(panel);
+  fit();
+  window.addEventListener("resize", fit);
+  window.visualViewport?.addEventListener("resize", fit);
+  getPictures(url)
+    .then((pictures) => {
+      for (const picture of pictures) {
+        const node = entry(picture, choose);
+        grid.append(node);
+        if (picture.key === chosen) choose(picture, node.firstChild);
+      }
+      if (pictures.length === 0) grid.replaceWith(make("p", { className: "text-sm text-muted", textContent: "No pictures yet." }));
+    })
+    .catch((err) => say(err.message));
+  files.focus();
+}

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

@@ -0,0 +1,73 @@
+__BANNER__
+
+// What a script does with moments (see ui/moments.ts and browser/epoch.js). A moment shown read-only
+// is restated in the viewer's own zone, with how far away it is. A moment in a form is a native date
+// or date-and-time input in that zone; the seconds the domain holds stay in the plain input the form
+// posts, which is hidden, and are rewritten only when the person changes the date, so a moment that
+// is not edited is sent back exactly as it came.
+import { formatMoment, fromLocal, relative, toLocal, zoneLabel } from "./epoch.js";
+
+/** Restates every `time` the page carries in the viewer's zone, followed by how far from now it is. */
+function restate() {
+  const now = Math.floor(Date.now() / 1000);
+  for (const element of document.querySelectorAll("time[data-moment]")) {
+    const seconds = Number(element.dataset.epoch);
+    const mode = element.dataset.moment;
+    element.textContent = formatMoment(seconds, mode);
+    element.title = zoneLabel(seconds);
+    const ago = document.createElement("span");
+    ago.className = "ml-1 text-muted";
+    ago.textContent = `(${relative(seconds, now, mode)})`;
+    element.after(ago);
+  }
+}
+
+/** The note under a field: which zone the date is in. */
+function note(field, seconds) {
+  const text = field.querySelector("[data-epoch-note]");
+  if (text) text.textContent = `Shown in your time zone, ${zoneLabel(seconds ?? Math.floor(Date.now() / 1000))}.`;
+}
+
+/** Swaps a number input of seconds for a native date input in the viewer's zone. */
+function mount(field) {
+  const raw = field.querySelector("[data-epoch-raw]");
+  if (!raw || field.dataset.mounted) return;
+  const mode = field.dataset.momentField;
+  const local = document.createElement("input");
+  local.type = mode === "date" ? "date" : "datetime-local";
+  local.className = raw.classList.contains("input-error") ? "input input-error w-full max-w-xl" : "input w-full max-w-xl";
+  local.id = raw.id;
+  for (const name of ["aria-required", "aria-invalid", "aria-describedby"]) {
+    if (raw.hasAttribute(name)) local.setAttribute(name, raw.getAttribute(name));
+    raw.removeAttribute(name);
+  }
+  raw.removeAttribute("id");
+  const held = raw.value === "" ? null : Number(raw.value);
+  if (held !== null && Number.isFinite(held)) local.value = toLocal(held, mode);
+  raw.type = "hidden";
+  raw.before(local);
+  field.dataset.mounted = "true";
+  note(field, held);
+}
+
+/** The seconds follow the input as it is edited; a cleared or incomplete input leaves the field empty. */
+function follow(event) {
+  const local = event.target;
+  const field = local.closest?.("[data-moment-field]");
+  if (!field || local.matches("[data-epoch-raw]")) return;
+  const raw = field.querySelector("[data-epoch-raw]");
+  const seconds = fromLocal(local.value, field.dataset.momentField);
+  raw.value = seconds === null ? "" : String(seconds);
+  note(field, seconds);
+}
+
+/** Mounts the date inputs under `scope` that are not yet (a card made after the page loaded holds some). */
+export function mountMoments(scope) {
+  for (const field of scope.querySelectorAll("[data-moment-field]")) mount(field);
+}
+
+export function enhanceMoments() {
+  restate();
+  for (const field of document.querySelectorAll("[data-moment-field]")) mount(field);
+  document.addEventListener("input", follow);
+}