hecks 3.9.0 → 3.10.0

data/lib/hecks/projections/site/cms_editor/templates/src/ui/body_widget.js.tmpl

@@ -0,0 +1,282 @@
+__BANNER__
+
+// The rich-text widget, run in the browser. It edits the domain's own body tree: the surface holds
+// the HTML `bodyToHtml` writes, and after every change `htmlToBody` reads it back and the result is
+// written into hidden inputs named by dotted path, which is how every other value object and list in
+// the form is posted. No editor format is kept or sent. Pasted or dropped HTML goes through
+// `htmlToBodyWithNotes`, so whatever the body cannot hold is reduced and said so in the notes line.
+import { ALIGNS, MAX_DEPTH, MAX_INDENT, bodyToFields, bodyToHtml, esc, fieldsToInputs, safeHref, spansToHtml } from "./body_model.js";
+import { htmlToBodyWithNotes } from "./body_parse.js";
+
+const KIND_TAGS = { paragraph: "p", heading1: "h1", heading2: "h2", heading3: "h3", heading4: "h4", quote: "blockquote" };
+
+const BLOCK_CHOICES = [
+  ["paragraph", "Paragraph"], ["heading1", "Heading 1"], ["heading2", "Heading 2"], ["heading3", "Heading 3"], ["heading4", "Heading 4"],
+  ["quote", "Quote"], ["bullet_list", "Bulleted list"], ["numbered_list", "Numbered list"],
+];
+
+const BUTTONS = [
+  ["bold", "B", "Bold (Ctrl+B)"], ["italic", "I", "Italic (Ctrl+I)"], ["underline", "U", "Underline (Ctrl+U)"],
+  ["strike", "S", "Strike-through (Ctrl+Shift+X)"], ["code", "</>", "Code (Ctrl+E)"], ["link", "Link", "Link (Ctrl+K)"],
+  ["break", "Line break", "Line break (Shift+Enter)"], ["left", "Left", "Align left"], ["center", "Center", "Align center"],
+  ["right", "Right", "Align right"], ["justify", "Justify", "Justify"], ["outdent", "Outdent", "Outdent"], ["indent", "Indent", "Indent"],
+  ["shallower", "Item up", "Move the list item up a level (Shift+Tab)"], ["deeper", "Item down", "Move the list item down a level (Tab)"],
+  ["itemkind", "Item kind", "Make the list item bulleted or numbered"], ["image", "Image", "Insert an image"], ["divider", "Divider", "Insert a divider"],
+];
+
+const COMMANDS = { bold: "bold", italic: "italic", underline: "underline", strike: "strikeThrough" };
+
+const placeholdered = (html) => html.replace(/<(p|h[1-4]|blockquote|li)((?: [^>]*)?)><\/\1>/g, "<$1$2><br></$1>");
+
+function mount(root) {
+  const surface = root.querySelector("[data-surface]");
+  const fields = root.querySelector("[data-fields]");
+  const notes = root.querySelector("[data-notes]");
+  const name = root.dataset.name;
+  const picker = root.querySelector("[data-block-kind]");
+
+  const say = (messages) => {
+    notes.textContent = messages.length ? `Pasted content was adjusted to fit: ${messages.join("; ")}.` : "";
+  };
+
+  const lock = () => {
+    for (const figure of surface.querySelectorAll("figure")) figure.setAttribute("contenteditable", "false");
+  };
+
+  const sync = () => {
+    const { body } = htmlToBodyWithNotes(surface.innerHTML);
+    fields.innerHTML = fieldsToInputs(bodyToFields(body, name));
+  };
+
+  const blockOf = () => {
+    const sel = window.getSelection();
+    let node = sel && sel.anchorNode;
+    while (node && node.parentNode !== surface) node = node.parentNode;
+    return node && node.nodeType === 1 ? node : null;
+  };
+
+  const itemOf = () => {
+    let node = window.getSelection()?.anchorNode;
+    while (node && node !== surface && node.nodeName !== "LI") node = node.parentNode;
+    return node && node.nodeName === "LI" ? node : null;
+  };
+
+  const caretIn = (element) => {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(range);
+  };
+
+  const retag = (element, tag) => {
+    const made = document.createElement(tag);
+    for (const key of ["data-align", "data-indent"]) if (element.hasAttribute(key)) made.setAttribute(key, element.getAttribute(key));
+    made.append(...element.childNodes);
+    element.replaceWith(made);
+    return made;
+  };
+
+  const listFromBlock = (block, tag) => {
+    const list = document.createElement(tag);
+    for (const key of ["data-align", "data-indent"]) if (block.hasAttribute(key)) list.setAttribute(key, block.getAttribute(key));
+    const item = document.createElement("li");
+    item.append(...block.childNodes);
+    list.append(item);
+    block.replaceWith(list);
+    return list;
+  };
+
+  const itemToBlock = (item, tag) => {
+    const list = item.parentNode;
+    const made = document.createElement(tag);
+    made.append(...item.childNodes);
+    const tail = [...list.children].slice([...list.children].indexOf(item) + 1);
+    if (tail.length) {
+      const rest = list.cloneNode(false);
+      rest.append(...tail);
+      list.after(rest);
+    }
+    list.after(made);
+    item.remove();
+    if (!list.firstElementChild) list.remove();
+    return made;
+  };
+
+  const setKind = (choice) => {
+    const block = blockOf();
+    if (!block) return;
+    const listTag = choice === "bullet_list" ? "ul" : choice === "numbered_list" ? "ol" : null;
+    const isList = block.nodeName === "UL" || block.nodeName === "OL";
+    let made;
+    if (listTag) made = isList ? retag(block, listTag) : listFromBlock(block, listTag);
+    else made = isList ? itemToBlock(itemOf() ?? block.firstElementChild, KIND_TAGS[choice]) : retag(block, KIND_TAGS[choice]);
+    if (!listTag && made.nodeName !== KIND_TAGS[choice].toUpperCase()) made = retag(made, KIND_TAGS[choice]);
+    caretIn(made);
+    sync();
+  };
+
+  const bump = (element, attribute, step, low, high) => {
+    const next = Math.min(high, Math.max(low, Number(element.getAttribute(attribute) ?? 0) + step));
+    element.setAttribute(attribute, String(next));
+    sync();
+  };
+
+  const toggleCode = () => {
+    let node = window.getSelection()?.anchorNode;
+    while (node && node !== surface && node.nodeName !== "CODE") node = node.parentNode;
+    if (node && node.nodeName === "CODE") node.replaceWith(...node.childNodes);
+    else if (!window.getSelection().isCollapsed) document.execCommand("insertHTML", false, `<code>${esc(window.getSelection().toString())}</code>`);
+    sync();
+  };
+
+  const link = () => {
+    const given = window.prompt("Link address (a path, http://, https://, mailto: or tel:). Leave empty to remove the link.", "https://");
+    if (given === null) return;
+    const href = safeHref(given.trim());
+    if (given.trim() === "") document.execCommand("unlink");
+    else if (href) document.execCommand("createLink", false, href);
+    else notes.textContent = "That address is not allowed: use a path, http://, https://, mailto: or tel:.";
+    sync();
+  };
+
+  const figureHtml = (media, alt, caption) => bodyToHtml({ blocks: [{ kind: "image", media_ref: media, alt, caption }] });
+
+  // Puts an image block in place of `figure`, or after `anchor` (the block the caret was in), or at the end.
+  const placeImage = (media, alt, caption, figure, anchor) => {
+    const holder = document.createElement("div");
+    holder.innerHTML = figureHtml(media.trim(), alt, caption);
+    const made = holder.firstElementChild;
+    made.setAttribute("contenteditable", "false");
+    if (figure) figure.replaceWith(made);
+    else if (anchor && surface.contains(anchor)) anchor.after(made);
+    else surface.append(made);
+    sync();
+  };
+
+  // Without a picture store the image is named by its media key, typed in.
+  const promptImage = (figure, anchor) => {
+    const media = window.prompt("Media key of the image", figure?.dataset.mediaRef ?? "");
+    if (!media) return;
+    const alt = window.prompt("Alt text", figure?.dataset.alt ?? "") ?? "";
+    const caption = window.prompt("Caption (optional)", figure?.dataset.caption ?? "") ?? "";
+    placeImage(media, alt, caption, figure, anchor);
+  };
+
+  // With one, the picker uploads or chooses a registered picture; its module is loaded only then.
+  const pickImage = async (figure, anchor) => {
+    const { openPicker } = await import("./media_picker.js");
+    openPicker(root, {
+      url: root.dataset.media,
+      current: figure ? { key: figure.dataset.mediaRef ?? "", alt: figure.dataset.alt ?? "", caption: figure.dataset.caption ?? "" } : null,
+      onPick: (key, alt, caption) => placeImage(key, alt, caption, figure, anchor),
+    });
+  };
+
+  const askImage = (figure) => (root.dataset.media ? pickImage(figure, blockOf()) : promptImage(figure, blockOf()));
+
+  const insertDivider = () => {
+    const rule = document.createElement("hr");
+    const block = blockOf();
+    if (block) block.after(rule);
+    else surface.append(rule);
+    sync();
+  };
+
+  const align = (value) => {
+    const block = blockOf();
+    if (!block) return;
+    if (block.getAttribute("data-align") === value) block.removeAttribute("data-align");
+    else block.setAttribute("data-align", value);
+    sync();
+  };
+
+  const itemKind = () => {
+    const item = itemOf();
+    if (!item) return;
+    const own = item.parentNode.nodeName === "OL" ? "numbered_list" : "bullet_list";
+    const other = own === "numbered_list" ? "bullet_list" : "numbered_list";
+    if (item.hasAttribute("data-list-kind")) item.removeAttribute("data-list-kind");
+    else item.setAttribute("data-list-kind", other);
+    sync();
+  };
+
+  const act = (action) => {
+    surface.focus();
+    if (COMMANDS[action]) return document.execCommand(COMMANDS[action]), sync();
+    if (ALIGNS.includes(action)) return align(action);
+    const block = blockOf();
+    const handlers = {
+      code: toggleCode, link, divider: insertDivider, itemkind: itemKind, image: () => askImage(null),
+      break: () => { document.execCommand("insertLineBreak"); sync(); },
+      indent: () => block && bump(block, "data-indent", 1, 0, MAX_INDENT), outdent: () => block && bump(block, "data-indent", -1, 0, MAX_INDENT),
+      deeper: () => itemOf() && bump(itemOf(), "data-depth", 1, 0, MAX_DEPTH), shallower: () => itemOf() && bump(itemOf(), "data-depth", -1, 0, MAX_DEPTH),
+    };
+    return handlers[action]?.();
+  };
+
+  const insertParsed = (html) => {
+    const { body, notes: found } = htmlToBodyWithNotes(html);
+    say(found);
+    const single = body.blocks.length === 1 && body.blocks[0].spans;
+    document.execCommand("insertHTML", false, single ? spansToHtml(body.blocks[0].spans) : placeholdered(bodyToHtml(body)));
+    sync();
+  };
+
+  const fromTransfer = (data) => {
+    const html = data.getData("text/html");
+    if (html) return html;
+    return data.getData("text/plain").split(/\r?\n/).map((line) => `<p>${esc(line)}</p>`).join("");
+  };
+
+  const shortcuts = (event) => {
+    if (event.key === "Tab" && itemOf()) {
+      event.preventDefault();
+      return bump(itemOf(), "data-depth", event.shiftKey ? -1 : 1, 0, MAX_DEPTH);
+    }
+    if (!(event.ctrlKey || event.metaKey) || event.altKey) return;
+    const key = event.key.toLowerCase();
+    const action = event.shiftKey ? { x: "strike" }[key] : { b: "bold", i: "italic", u: "underline", e: "code", k: "link" }[key];
+    if (action) {
+      event.preventDefault();
+      act(action);
+    }
+  };
+
+  root.querySelector("[data-toolbar]").addEventListener("mousedown", (event) => { if (event.target.tagName !== "SELECT") event.preventDefault(); });
+  root.querySelector("[data-toolbar]").addEventListener("click", (event) => { const button = event.target.closest("button[data-action]"); if (button) act(button.dataset.action); });
+  picker.addEventListener("change", () => { surface.focus(); setKind(picker.value); });
+  surface.addEventListener("input", sync);
+  surface.addEventListener("keydown", shortcuts);
+  surface.addEventListener("paste", (event) => { event.preventDefault(); insertParsed(fromTransfer(event.clipboardData)); });
+  surface.addEventListener("drop", (event) => { event.preventDefault(); insertParsed(fromTransfer(event.dataTransfer)); });
+  surface.addEventListener("click", (event) => { const figure = event.target.closest("figure"); if (figure && surface.contains(figure)) askImage(figure); });
+  surface.addEventListener("blur", () => {
+    const { body } = htmlToBodyWithNotes(surface.innerHTML);
+    surface.innerHTML = placeholdered(bodyToHtml(body));
+    lock();
+    sync();
+  });
+  root.closest("form")?.addEventListener("submit", sync);
+
+  surface.setAttribute("contenteditable", "true");
+  document.execCommand("defaultParagraphSeparator", false, "p");
+  document.execCommand("styleWithCSS", false, "false");
+  if (!surface.firstElementChild) surface.innerHTML = "<p><br></p>";
+  surface.innerHTML = placeholdered(surface.innerHTML);
+  lock();
+}
+
+/** Builds the toolbar of a widget the server rendered, and wires it. */
+function toolbar(root) {
+  const bar = root.querySelector("[data-toolbar]");
+  const options = BLOCK_CHOICES.map(([value, label]) => `<option value="${esc(value)}">${esc(label)}</option>`).join("");
+  const buttons = BUTTONS.map(([action, label, title]) => `<button type="button" data-action="${esc(action)}" title="${esc(title)}">${esc(label)}</button>`).join("");
+  bar.innerHTML = `<select data-block-kind aria-label="Block type">${options}</select>${buttons}`;
+}
+
+for (const root of document.querySelectorAll("[data-body-editor]")) {
+  toolbar(root);
+  mount(root);
+}

data/lib/hecks/projections/site/cms_editor/templates/src/ui/fields.ts.tmpl

@@ -0,0 +1,80 @@
+__BANNER__
+
+// The inputs of a form, derived from attributes. A value-object attribute is a nested fieldset of
+// its parts; a `list_of` attribute is a run of repeatable rows (the rows it holds, then one blank
+// row to fill); a lifecycle state is not an input at all. Each input is named by its dotted path
+// (`byline.name`, `body.blocks.0.text`), which input.ts reads back into the shape the command takes.
+import type { Aggregate, Attr } from "../schema.ts";
+import { SCHEMA } from "../schema.ts";
+import { esc, href } from "./html.ts";
+import { bodyToFields, bodyToHtml, emptyBody, fieldsToInputs } from "./body_model.js";
+
+type Value = unknown;
+
+const label = (attr: Attr): string => attr.name.replace(/_/g, " ");
+
+const optionalNote = (attr: Attr): string => (attr.optional ? ` <small>(optional)</small>` : "");
+
+const inputType = (attr: Attr): string => (attr.kind === "integer" || attr.kind === "number" ? "number" : "text");
+
+const member = (value: Value, key: string): Value => (value && typeof value === "object" ? (value as Record<string, Value>)[key] : undefined);
+
+function scalar(attr: Attr, name: string, value: Value): string {
+  const text = esc(member(value, "value") ?? value ?? "");
+  if (attr.kind === "boolean") {
+    return `<label><input type="checkbox" name="${esc(name)}"${value === true ? " checked" : ""}> ${esc(label(attr))}${optionalNote(attr)}</label>`;
+  }
+  const step = attr.kind === "number" ? ` step="any"` : "";
+  return `<label>${esc(label(attr))}${optionalNote(attr)}<input type="${inputType(attr)}"${step} name="${esc(name)}" value="${text}"></label>`;
+}
+
+function parts(agg: Aggregate, attr: Attr, name: string, value: Value): string {
+  const members = agg.valueObjects[attr.type] ?? [];
+  return members.map((part) => field(agg, part, member(value, part.name), `${name}.`)).join("\n");
+}
+
+function one(agg: Aggregate, attr: Attr, name: string, value: Value): string {
+  if (attr.kind !== "object") return scalar(attr, name, value);
+  return `<fieldset><legend>${esc(label(attr))}${optionalNote(attr)}</legend>\n${parts(agg, attr, name, value)}\n</fieldset>`;
+}
+
+function listed(agg: Aggregate, attr: Attr, name: string, value: Value): string {
+  const held = Array.isArray(value) ? value : [];
+  const rows = [...held, undefined].map((item, index) => {
+    const body = attr.kind === "object" ? parts(agg, attr, `${name}.${index}`, item) : scalar({ ...attr, list: false }, `${name}.${index}`, item);
+    return `<fieldset class="row"><legend>${esc(label(attr))} ${index + 1}</legend>\n${body}\n</fieldset>`;
+  });
+  return `<fieldset><legend>${esc(label(attr))}${optionalNote(attr)}</legend>\n${rows.join("\n")}\n</fieldset>`;
+}
+
+// The rich-text widget. The server renders the body's current value as the surface's HTML and as the
+// hidden inputs the form posts (the same dotted-path fields every value object and list uses), so a
+// browser without the script still posts the body unchanged; body_widget.js then edits the surface
+// and rewrites those inputs from the tree it reads back.
+function body(attr: Attr, name: string, value: Value): string {
+  const tree = value && typeof value === "object" ? value : emptyBody();
+  const inputs = fieldsToInputs(bodyToFields(tree, name));
+  const media = SCHEMA.media ? ` data-media="${esc(href("media"))}"` : "";
+  return `<fieldset><legend>${esc(label(attr))}${optionalNote(attr)}</legend>
+<div class="body-editor" data-body-editor data-name="${esc(name)}"${media}>
+<div class="body-toolbar" data-toolbar role="toolbar" aria-label="Formatting"></div>
+<div class="body-surface body" data-surface role="textbox" aria-multiline="true" aria-label="${esc(label(attr))}">${bodyToHtml(tree)}</div>
+<p class="note" data-notes role="status" aria-live="polite"></p>
+<div data-fields>
+${inputs}
+</div>
+</div>
+</fieldset>`;
+}
+
+/** One attribute's inputs, `prefix` being the dotted path of the object that holds it. */
+export function field(agg: Aggregate, attr: Attr, value: Value, prefix = ""): string {
+  const name = `${prefix}${attr.name}`;
+  if (attr.widget === "body") return body(attr, name, value);
+  return attr.list ? listed(agg, attr, name, value) : one(agg, attr, name, value);
+}
+
+/** The inputs for `attrs`, filled from `values` (an instance's state or a refused submission). */
+export function fields(agg: Aggregate, attrs: Attr[], values: Record<string, Value> = {}): string {
+  return attrs.map((attr) => field(agg, attr, values[attr.name])).join("\n");
+}

data/lib/hecks/projections/site/cms_editor/templates/src/ui/html.ts.tmpl

@@ -0,0 +1,102 @@
+__BANNER__
+
+// The page frame and the small helpers every page shares. Pages are plain strings built on the
+// server; every value that came from the domain or the person is escaped on its way in.
+import { EDITOR } from "../config.ts";
+import { SCHEMA } from "../schema.ts";
+
+/** Escapes text for an HTML body or a double-quoted attribute. */
+export function esc(value: unknown): string {
+  return String(value ?? "").replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
+}
+
+/** A path under the editor's base path; each segment is URL-encoded. */
+export function href(...segments: string[]): string {
+  return [EDITOR.basePath, ...segments.map(encodeURIComponent)].join("/");
+}
+
+const STYLE = `
+  :root { color-scheme: light dark; --edge: #8886; --accent: #2457c5; }
+  body { font: 16px/1.5 system-ui, sans-serif; margin: 0; }
+  header, main { max-width: 64rem; margin: 0 auto; padding: 0.75rem 1rem; }
+  header { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; border-bottom: 1px solid var(--edge); align-items: baseline; }
+  header a.brand { font-weight: 700; }
+  a { color: var(--accent); }
+  table { border-collapse: collapse; width: 100%; }
+  th, td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--edge); vertical-align: top; }
+  fieldset { border: 1px solid var(--edge); border-radius: 6px; margin: 0.5rem 0; padding: 0.5rem 0.75rem; }
+  label { display: block; margin: 0.4rem 0; }
+  label small { opacity: 0.7; }
+  input:not([type=checkbox]), select, textarea { display: block; width: 100%; max-width: 32rem; font: inherit; padding: 0.3rem; box-sizing: border-box; }
+  button { font: inherit; padding: 0.35rem 0.9rem; cursor: pointer; }
+  .badge { display: inline-block; padding: 0 0.6rem; border-radius: 1rem; border: 1px solid var(--edge); font-size: 0.85rem; }
+  .refusal { border: 1px solid #c33; border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0.75rem 0; }
+  .outline { border-left: 3px solid var(--edge); margin: 0.25rem 0 0.25rem 0.25rem; padding-left: 0.75rem; }
+  .outline ul { margin: 0.2rem 0; padding-left: 1.25rem; }
+  .note { opacity: 0.7; font-size: 0.85rem; }
+  .body { overflow-wrap: anywhere; }
+  .body p, .body h1, .body h2, .body h3, .body h4, .body blockquote, .body li { white-space: pre-wrap; }
+  .body p, .body h1, .body h2, .body h3, .body h4, .body blockquote, .body ul, .body ol, .body figure { margin: 0.4rem 0; }
+  .body blockquote { border-left: 3px solid var(--edge); padding-left: 0.75rem; }
+  .body [data-align=left] { text-align: left; }
+  .body [data-align=center] { text-align: center; }
+  .body [data-align=right] { text-align: right; }
+  .body [data-align=justify] { text-align: justify; }
+  .body [data-indent="1"] { margin-left: 2rem; } .body [data-indent="2"] { margin-left: 4rem; } .body [data-indent="3"] { margin-left: 6rem; }
+  .body [data-indent="4"] { margin-left: 8rem; } .body [data-indent="5"] { margin-left: 10rem; } .body [data-indent="6"] { margin-left: 12rem; }
+  .body [data-indent="7"] { margin-left: 14rem; } .body [data-indent="8"] { margin-left: 16rem; }
+  .body li[data-depth="1"] { margin-left: 1.5rem; } .body li[data-depth="2"] { margin-left: 3rem; } .body li[data-depth="3"] { margin-left: 4.5rem; }
+  .body li[data-depth="4"] { margin-left: 6rem; } .body li[data-depth="5"] { margin-left: 7.5rem; }
+  .body .body-media { display: inline-block; border: 1px dashed var(--edge); padding: 0.2rem 0.5rem; }
+  .body-editor { max-width: 48rem; }
+  .body-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.4rem; }
+  .body-toolbar button, .body-toolbar select { font-size: 0.85rem; padding: 0.15rem 0.5rem; width: auto; display: inline-block; }
+  .body-surface { min-height: 8rem; border: 1px solid var(--edge); border-radius: 6px; padding: 0.4rem 0.75rem; }
+  .body-surface:focus { outline: 2px solid var(--accent); }
+  .body-surface figure { cursor: pointer; }
+  .body-picker { border: 1px solid var(--edge); border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
+  .picker-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.25rem 0; padding: 0; max-height: 12rem; overflow: auto; }
+  .picker-list button { display: flex; flex-direction: column; align-items: center; max-width: 6rem; font-size: 0.8rem; }
+  .picker-list button[aria-pressed=true] { outline: 2px solid var(--accent); }
+  .picker-list img { object-fit: cover; }
+`;
+
+/** True when a page body holds the rich-text widget, which is the only page that needs its script. */
+const hasWidget = (body: string): boolean => body.includes("data-body-editor");
+
+/** The frame of every page: the editor's name, a link to each aggregate, and `body`. */
+export function page(title: string, body: string): string {
+  const nav = SCHEMA.aggregates.map((agg) => `<a href="${esc(href(agg.name))}">${esc(agg.name)}</a>`).join("\n    ");
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${esc(title)} - ${esc(EDITOR.title)}</title>
+  <style>${STYLE}</style>
+</head>
+<body>
+<header>
+  <a class="brand" href="${esc(EDITOR.basePath)}">${esc(EDITOR.title)}</a>
+  <nav>
+    ${nav}
+  </nav>
+</header>
+<main>
+${body}
+</main>
+${hasWidget(body) ? `<script type="module" src="${esc(href("assets", "body_widget.js"))}"></script>` : ""}
+</body>
+</html>
+`;
+}
+
+/** The inline message a refused command shows above its form. */
+export function refusal(message: string | null): string {
+  return message ? `<div class="refusal" role="alert">${esc(message)}</div>` : "";
+}
+
+/** A lifecycle state as a badge. */
+export function badge(status: unknown): string {
+  return status ? `<span class="badge">${esc(status)}</span>` : "";
+}

data/lib/hecks/projections/site/cms_editor/templates/src/ui/input.ts.tmpl

@@ -0,0 +1,75 @@
+__BANNER__
+
+// A submitted form turned back into what a command takes. The form's inputs are named by dotted
+// path (see fields.ts); this reads them against the same attributes, so a nested value object comes
+// back nested and a run of repeatable rows comes back as a list. A row left entirely blank is not a
+// row, and an optional part left blank is left out; a required text part left blank is sent as
+// empty text so that the domain's own rule refuses it in its own words. A rich-text body is read the
+// same way: the widget posts its tree as the same dotted-path fields (`body.blocks.0.spans.1.text`),
+// so there is no second encoding.
+import type { Aggregate, Attr } from "../schema.ts";
+
+export type Form = Map<string, string>;
+
+/** The fields of an `application/x-www-form-urlencoded` body, the last of a repeated name winning. */
+export function parseForm(body: string): Form {
+  const form: Form = new Map();
+  for (const [key, value] of new URLSearchParams(body)) form.set(key, value);
+  return form;
+}
+
+const blank = (value: unknown): boolean =>
+  value === "" ||
+  value === undefined ||
+  value === null ||
+  (Array.isArray(value) && value.every(blank)) ||
+  (typeof value === "object" && !Array.isArray(value) && Object.values(value as object).every(blank));
+
+function indices(form: Form, path: string): number[] {
+  const found = new Set<number>();
+  for (const key of form.keys()) {
+    const match = key.startsWith(`${path}.`) ? /^(\d+)(\.|$)/.exec(key.slice(path.length + 1)) : null;
+    if (match) found.add(Number(match[1]));
+  }
+  return [...found].sort((a, b) => a - b);
+}
+
+function text(attr: Attr, form: Form, path: string, optional: boolean): unknown {
+  const raw = form.get(path);
+  if (attr.kind === "boolean") return form.has(path);
+  if (raw === undefined || (raw === "" && optional)) return undefined;
+  if ((attr.kind === "integer" || attr.kind === "number") && raw.trim() !== "" && !Number.isNaN(Number(raw))) return Number(raw);
+  return raw;
+}
+
+function object(agg: Aggregate, attr: Attr, form: Form, path: string, optional: boolean): unknown {
+  const built: Record<string, unknown> = {};
+  for (const part of agg.valueObjects[attr.type] ?? []) {
+    const value = build(agg, part, form, `${path}.`, optional);
+    if (value !== undefined) built[part.name] = value;
+  }
+  return Object.keys(built).length > 0 ? built : undefined;
+}
+
+function single(agg: Aggregate, attr: Attr, form: Form, path: string, optional: boolean): unknown {
+  return attr.kind === "object" ? object(agg, attr, form, path, optional) : text(attr, form, path, optional);
+}
+
+/** One attribute's value from the form, or undefined when it is to be left out. */
+export function build(agg: Aggregate, attr: Attr, form: Form, prefix: string, optionalAbove = false): unknown {
+  const path = `${prefix}${attr.name}`;
+  const optional = optionalAbove || attr.optional;
+  if (!attr.list) return single(agg, attr, form, path, optional);
+  const rows = indices(form, path).map((index) => single(agg, attr, form, `${path}.${index}`, optional));
+  return rows.filter((row) => !blank(row));
+}
+
+/** The arguments a command takes, from a submitted form. */
+export function commandArguments(agg: Aggregate, attrs: Attr[], form: Form): Record<string, unknown> {
+  const args: Record<string, unknown> = {};
+  for (const attr of attrs) {
+    const value = build(agg, attr, form, "");
+    if (value !== undefined) args[attr.name] = value;
+  }
+  return args;
+}

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

@@ -0,0 +1,109 @@
+__BANNER__
+
+// The picture picker the rich-text widget opens for an image block. It lists the pictures the domain
+// has registered (thumbnails come from the storage adapter's own addresses), uploads a new one by
+// button or by dropping a file, and hands the widget a media key, alt text and an optional caption.
+// Alt text is required before anything is inserted; the editor server and the domain refuse a picture
+// without one, and whatever they refuse with is shown here, next to the form. Everything the server
+// sends is put into the page as text, never as markup.
+
+const make = (tag, props = {}, ...children) => {
+  const element = Object.assign(document.createElement(tag), props);
+  element.append(...children);
+  return element;
+};
+
+const field = (label, input) => make("label", {}, label, input);
+
+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;
+}
+
+async function upload(url, file, alt) {
+  const form = new FormData();
+  form.append("alt", alt);
+  form.append("file", file);
+  const response = await fetch(url, { method: "POST", body: form, headers: { Accept: "application/json" } });
+  const answer = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(answer.error ?? "The upload failed.");
+  return answer;
+}
+
+/** One registered picture as a button: its thumbnail, its alt text and a short key. */
+function entry(picture, choose) {
+  const image = make("img", { src: picture.url, alt: "", loading: "lazy", width: 64, height: 64 });
+  const button = make("button", { type: "button", title: picture.alt }, image, make("span", {}, picture.alt || picture.key.slice(0, 12)));
+  button.addEventListener("click", () => choose(picture, button));
+  return make("li", {}, button);
+}
+
+/**
+ * Opens the picker inside `root` (the widget's element). `options.url` is the media endpoint,
+ * `options.current` the figure being replaced (or null), `options.onPick(key, alt, caption)` is called
+ * with the choice.
+ */
+export function openPicker(root, options) {
+  root.querySelector("[data-picker]")?.remove();
+  const { url, current, onPick } = options;
+  let chosen = current && current.key ? current.key : null;
+  const list = make("ul", { className: "picker-list" });
+  const status = make("p", { className: "refusal", role: "alert", hidden: true });
+  const file = make("input", { type: "file", accept: "image/jpeg,image/png,image/webp,image/gif,image/avif" });
+  const alt = make("input", { type: "text", required: true, value: current?.alt ?? "" });
+  const caption = make("input", { type: "text", value: current?.caption ?? "" });
+  const drop = make("p", { className: "note" }, "Choose a file or drop one here. JPEG, PNG, WebP, GIF or AVIF.");
+  const insert = make("button", { type: "button" }, "Insert");
+  const cancel = make("button", { type: "button" }, "Cancel");
+  const panel = make("div", { className: "body-picker" }, make("strong", {}, "Insert a picture"), drop, field("Upload a new picture", file), make("p", { className: "note" }, "Or choose a registered picture:"), list, field("Alt text (required)", alt), field("Caption (optional)", caption), status, insert, " ", cancel);
+  panel.setAttribute("data-picker", "");
+
+  const say = (message) => {
+    status.textContent = message ?? "";
+    status.hidden = !message;
+  };
+  const close = () => panel.remove();
+
+  const choose = (picture, button) => {
+    chosen = picture.key;
+    file.value = "";
+    if (!alt.value.trim()) alt.value = picture.alt;
+    for (const other of list.querySelectorAll("button")) other.removeAttribute("aria-pressed");
+    button.setAttribute("aria-pressed", "true");
+    say(null);
+  };
+
+  const submit = async () => {
+    say(null);
+    if (!alt.value.trim()) return say("Alt text is required: describe the picture for someone who cannot see it.");
+    try {
+      const key = file.files[0] ? (await upload(url, file.files[0], alt.value.trim())).key : chosen;
+      if (!key) return say("Choose a registered picture or upload one.");
+      onPick(key, alt.value.trim(), caption.value.trim());
+      close();
+    } catch (err) {
+      say(err.message);
+    }
+  };
+
+  panel.addEventListener("dragover", (event) => event.preventDefault());
+  panel.addEventListener("drop", (event) => {
+    event.preventDefault();
+    if (event.dataTransfer.files.length) file.files = event.dataTransfer.files;
+  });
+  file.addEventListener("change", () => { chosen = null; });
+  panel.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" || event.target.tagName !== "INPUT" || event.target.type === "file") return;
+    event.preventDefault();
+    submit();
+  });
+  insert.addEventListener("click", submit);
+  cancel.addEventListener("click", close);
+
+  root.querySelector("[data-toolbar]").after(panel);
+  getPictures(url)
+    .then((pictures) => list.append(...pictures.map((picture) => entry(picture, choose))))
+    .catch((err) => say(err.message));
+  alt.focus();
+}