hecks 3.10.0 → 3.12.0

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

@@ -0,0 +1,213 @@
+__BANNER__
+
+// The rules of a block list that need no page: which slots a kind shows, the one line that stands
+// for a block, whether a block is complete, and which block a refusal is about. Plain JavaScript
+// over plain data, used by the server that renders the cards and by the script that edits them, so
+// both answer the same way. A "list" here is an attribute's `blockList` (see schema.ts), a "block" is
+// one value of the list's value object, and a "part" is one of that value object's attributes.
+
+/** The discriminator's value in `block`, whether it is held as the plain text or as a one-part value object. */
+export function kindOf(list, block) {
+  const held = block?.[list.discriminator];
+  if (held && typeof held === "object") return String(Object.values(held)[0] ?? "");
+  return held === undefined || held === null ? "" : String(held);
+}
+
+const present = (value) => {
+  if (value === undefined || value === null || value === "") return false;
+  if (Array.isArray(value)) return value.some(present);
+  if (typeof value === "object") return Object.values(value).some(present);
+  return true;
+};
+
+/** Whether a part holds anything: text, a picture's key, a body with a block, a list with a row. */
+export const filled = present;
+
+/**
+ * The parts a kind shows, each with whether the kind needs it: the parts it needs first, then those it
+ * uses, then those common to every kind, each in the value object's own order.
+ * With a declared table (`rules`) these are the parts a row names, the parts no row names (common to
+ * every kind) and a picture's alt text with its key; with none, every part is shown, and a part that
+ * an invariant of the kind reads is marked as needed.
+ */
+export function slotsOf(list, parts, kind) {
+  const rule = list.rules?.[kind];
+  const named = new Set(Object.values(list.rules ?? {}).flatMap((row) => [...row.requires, ...row.uses]));
+  const mentioned = new Set(list.mentions?.[kind] ?? []);
+  const uses = new Set(rule ? [...rule.requires, ...rule.uses] : []);
+  const has = (name) => parts.some((part) => part.name === name);
+  const picture = Object.values(list.pictures ?? {}).find((one) => has(one.key) && has(one.alt));
+  if (picture && uses.has(picture.key)) uses.add(picture.alt);
+  return parts
+    .filter((part) => part.name !== list.discriminator)
+    .filter((part) => !rule || uses.has(part.name) || !named.has(part.name))
+    .map((part) => ({ part, required: rule ? rule.requires.includes(part.name) : false, mentioned: !rule && mentioned.has(part.name) }))
+    .map((slot, at) => ({ slot, at, rank: slot.required ? 0 : uses.has(slot.part.name) || slot.mentioned ? 1 : 2 }))
+    .sort((a, b) => a.rank - b.rank || a.at - b.at)
+    .map((one) => one.slot);
+}
+
+/** "1 entry", "3 entries": a list part's name, as a count of its rows. */
+const countOf = (name, count) => {
+  const words = name.replace(/_/g, " ");
+  return `${count} ${count === 1 ? words.replace(/([^aeiou])ies$/, "$1y").replace(/s$/, "") : words}`;
+};
+
+const textOf = (value) => (value && typeof value === "object" ? String(Object.values(value)[0] ?? "") : String(value ?? ""));
+
+/**
+ * The one line that stands for a block on its card: its first required text, else its longest text.
+ * A card that is itself a picture (`pictureOf`) in a list of one shape says the picture's description.
+ */
+export function summaryOf(list, parts, block, pictureOf) {
+  const kind = kindOf(list, block);
+  const slots = slotsOf(list, parts, kind).filter((slot) => slot.part.kind !== "object" && !slot.part.list && !slot.part.options);
+  const texts = slots.map((slot) => ({ ...slot, text: textOf(block?.[slot.part.name]).trim() })).filter((slot) => slot.text !== "");
+  const said = list.kinds.length === 0 && pictureOf ? texts.find((slot) => slot.part.name === pictureOf.alt) : undefined;
+  const first = said ?? texts.find((slot) => slot.required) ?? texts.reduce((best, slot) => (!best || slot.text.length > best.text.length ? slot : best), null);
+  if (first) return first.text.length > 80 ? `${first.text.slice(0, 79)}…` : first.text;
+  const counts = parts.filter((part) => part.list && filled(block?.[part.name])).map((part) => countOf(part.name, block[part.name].length));
+  return counts.join(", ");
+}
+
+/**
+ * What a block still lacks, as `{ slot, message }` for each: a part its kind requires that is empty,
+ * and a picture's alt text when it has a key. This is what the form can know before the domain is
+ * asked; the domain's own rules still decide.
+ */
+export function lacking(list, parts, block, pictureOf) {
+  const kind = kindOf(list, block);
+  const needs = slotsOf(list, parts, kind).filter((slot) => slot.required && !filled(block?.[slot.part.name]));
+  const missing = needs.map((slot) => ({ slot: slot.part.name, message: `${slot.part.name.replace(/_/g, " ")} is needed` }));
+  const picture = pictureOf?.key;
+  const alt = pictureOf?.alt;
+  if (picture && alt && filled(block?.[picture]) && !filled(block?.[alt])) missing.push({ slot: alt, message: "Describe the picture for people who cannot see it" });
+  return missing;
+}
+
+const normal = (value) => {
+  if (Array.isArray(value)) {
+    const items = value.map(normal).filter((item) => item !== undefined);
+    return items.length > 0 ? items : undefined;
+  }
+  if (value && typeof value === "object") {
+    const keys = Object.keys(value).sort();
+    if (keys.length === 1 && keys[0] === "value") return normal(value.value);
+    const made = Object.fromEntries(keys.map((key) => [key, normal(value[key])]).filter(([, held]) => held !== undefined));
+    return Object.keys(made).length > 0 ? made : undefined;
+  }
+  return value === null || value === "" || value === undefined ? undefined : value;
+};
+
+const sameShape = (a, b) => JSON.stringify(normal(a) ?? null) === JSON.stringify(normal(b) ?? null);
+
+/** The words of a refusal: the value object it names, the rule's wording and the value it was given, when it echoes one. */
+export function readRefusal(error) {
+  const found = /^(.+?) invariant violated — (.+?)(?: \(given (.*)\))?$/s.exec(String(error ?? ""));
+  if (!found) return null;
+  let given = null;
+  try {
+    given = found[3] ? JSON.parse(found[3]) : null;
+  } catch {
+    given = null;
+  }
+  return { type: found[1], rule: found[2], given };
+}
+
+const sentence = (rule) => `${rule.charAt(0).toUpperCase()}${rule.slice(1)}.`;
+
+/** Whether a value object of `type` is held, at any depth, by the value object named `from`. */
+function holds(valueObjects, from, type, depth = 0) {
+  if (depth > 6) return false;
+  return (valueObjects[from] ?? []).some((part) => part.type === type || holds(valueObjects, part.type, type, depth + 1));
+}
+
+/**
+ * Every place in `args` (the arguments of the attributes `attrs`) a value object of `type` sits, as
+ * `{ path, name, attr }`: its path in the arguments, the dotted name of its fields in the form, and the
+ * attribute that holds it. A body holds the value objects of its tree, so a refusal about a block of it
+ * is the body's.
+ */
+function locate(type, attrs, args, valueObjects, path = [], prefix = "", depth = 0) {
+  const found = [];
+  if (depth > 6) return found;
+  for (const attr of attrs.filter((candidate) => candidate.kind === "object")) {
+    const held = args?.[attr.name];
+    const items = attr.list ? (Array.isArray(held) ? held : []) : held === undefined || held === null ? [] : [held];
+    items.forEach((item, at) => {
+      const here = attr.list ? [...path, attr.name, at] : [...path, attr.name];
+      const name = `${prefix}${attr.name}${attr.list ? `.${at}` : ""}`;
+      const within = attr.widget === "body" && holds(valueObjects, attr.type, type);
+      if (attr.type === type || within) found.push({ path: here, name, attr });
+      if (attr.widget !== "body") found.push(...locate(type, valueObjects[attr.type] ?? [], item, valueObjects, here, `${name}.`, depth + 1));
+    });
+  }
+  return found;
+}
+
+const pick = (args, path) => path.reduce((value, step) => value?.[step], args);
+
+/**
+ * The value objects a refused command's error is about, as `{ path, name, slots, message }` (`name` is
+ * the dotted name of the value object's fields in the form). The error is matched to the submitted
+ * value it echoes; with no echo it is the only value object of its type, else the blocks of a list
+ * whose kind the rule's wording names. A refusal that matches none gives nothing, and the page shows
+ * it as a whole. `slots` are the parts the value object lacks that it requires, else the parts the
+ * rule names.
+ */
+export function problemsOf(error, attrs, args, valueObjects) {
+  const read = readRefusal(error);
+  if (!read) return [];
+  const where = locate(read.type, attrs, args, valueObjects);
+  const exact = read.given ? where.filter((place) => sameShape(pick(args, place.path), read.given)) : [];
+  const worded = where.filter((place) => {
+    const kind = place.attr.blockList ? String(kindOf(place.attr.blockList, pick(args, place.path))) : "";
+    return kind !== "" && read.rule.includes(kind.replace(/_/g, " "));
+  });
+  const alone = !read.given && where.length === 1 ? where : [];
+  const chosen = [exact, worded, alone].find((list) => list.length > 0) ?? [];
+  return chosen.map((place) => ({ path: place.path, name: place.name, slots: slotsNamed(read, place, args, valueObjects), message: sentence(read.rule) }));
+}
+
+/** The parts of `parts` that a value object must have and has not (and a picture's description when it has the file). */
+function unmet(parts, block, picture) {
+  const missing = parts.filter((part) => !part.optional && !filled(block?.[part.name])).map((part) => part.name);
+  if (picture && filled(block?.[picture.key]) && !filled(block?.[picture.alt]) && !missing.includes(picture.alt)) missing.push(picture.alt);
+  return missing;
+}
+
+function slotsNamed(read, place, args, valueObjects) {
+  const parts = valueObjects[place.attr.type] ?? [];
+  const block = pick(args, place.path);
+  const list = place.attr.blockList;
+  const empty = list ? lacking(list, parts, block, list.pictures?.[place.attr.type]).map((one) => one.slot) : unmet(parts, block, place.attr.picture);
+  if (empty.length > 0) return empty;
+  return parts.filter((part) => new RegExp(`\\b${part.name.replace(/_/g, " ")}\\b`).test(read.rule)).map((part) => part.name);
+}
+
+/**
+ * Whether a member of a list holds anything a script has to make live: a rich-text body or a picture,
+ * at any depth (a list of its own among them). Such a member cannot be copied as plain inputs, so it is
+ * drawn as a card made from a template; a member of plain inputs, with rows of its own or none, stays
+ * a row.
+ */
+export function heavy(valueObjects, type, depth = 0) {
+  if (depth > 6) return false;
+  return (valueObjects[type] ?? []).some(
+    (part) => part.widget === "body" || part.picture !== undefined || (part.kind === "object" && heavy(valueObjects, part.type, depth + 1)),
+  );
+}
+
+/** A name as an id spells it: each run of anything but letters and digits is one hyphen. */
+export const safe = (text) => text.replace(/[^A-Za-z0-9]+/g, "-");
+
+/**
+ * `text` with the index of the card at `path` changed from `was` to `at`, in the dotted spelling of a
+ * field's name (`list.3.heading`) and in the spelling of an id made from it (`f-list-3-heading`), and
+ * in what is nested in the card at any depth.
+ */
+export function retarget(text, path, was, at) {
+  const dotted = text.split(`${path}.${was}.`).join(`${path}.${at}.`);
+  const tail = new RegExp(`(?<![A-Za-z0-9])${safe(path)}-${was}(?![0-9])`, "g");
+  return dotted.replace(tail, `${safe(path)}-${at}`);
+}

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

@@ -0,0 +1,275 @@
+__BANNER__
+
+// A list of mixed blocks (or of one kind of group, with no kind) as an ordered list of cards. Each
+// card is one block: its kind as a badge, one line that says what it holds, tools to move it up
+// and down and remove it, and, when open, only the slots its kind uses (see block_list.js). The
+// list is plain markup that posts the same dotted-path fields every value object does, so a
+// browser with no script still edits what it has; browser/blocks.js adds adding, removing,
+// reordering and opening cards. A card holds its repeated parts as groups of cards one level in.
+//
+// A new card is made from a `<template>` the page carries per kind, written with the index left
+// as `ZZI0ZZ` (and `ZZI1ZZ` one level in), so a new card is what the server would have drawn.
+// A group's members show all their slots, each required as its value object declares, within the
+// limits the holder's rules give (see `Limits` in the generator).
+import type { Aggregate, Attr, BlockList } from "../schema.ts";
+import { esc } from "./html.ts";
+import { icon } from "./icons.ts";
+import { filled, kindOf, lacking, slotsOf, summaryOf } from "./block_list.js";
+import { label, limitsNote, pluralOf, singular } from "./words.ts";
+
+/**
+ * A refused value object: where it is in the command's arguments (`path`) and in the form (`name`, the
+ * dotted name its fields share: `content.items.3` or `content.items.3.parts.1`), which of its
+ * parts are at fault, and why.
+ */
+export interface Problem {
+  path: (string | number)[];
+  name: string;
+  slots: string[];
+  message: string;
+}
+
+/** What the list needs from the form around it. */
+export interface Rendering {
+  /** One part's control: its markup at `prefix + part.name`, flagged with `message` when it is the one a refusal names. */
+  slot: (part: Attr, prefix: string, value: unknown, message?: string, required?: boolean, rows?: boolean) => string;
+  /** Whether the list saves a draft by itself (see browser/autosave.js). */
+  draft: boolean;
+  /** The blocks a refused command named. */
+  problems: Problem[];
+  /** The one-line caption of the list: its label, with a mark when it is required. */
+  caption: string;
+  /** Whether a picture picker is on offer (`data-media`'s address), else the key is typed. */
+  media?: string;
+  /** What the domain said about the list as a whole (its size), when it did. */
+  message?: string;
+}
+
+type Block = Record<string, unknown>;
+
+/** A part of a block as one kind shows it (see `slotsOf`). */
+interface Slot {
+  part: Attr;
+  required: boolean;
+  mentioned: boolean;
+}
+
+/** The index placeholders a card's template is written with, by how deep the card is. */
+const TOKEN = ["ZZI0ZZ", "ZZI1ZZ"];
+
+const safe = (text: string): string => text.replace(/[^A-Za-z0-9]+/g, "-");
+
+/** The control of the part that holds the kind: the kind as a hidden input, in the value object's own shape. */
+function kindInput(agg: Aggregate, list: BlockList, parts: Attr[], prefix: string, kind: string): string {
+  const part = parts.find((candidate) => candidate.name === list.discriminator);
+  const inner = part?.kind === "object" ? (agg.valueObjects[part.type] ?? [])[0]?.name : undefined;
+  const name = `${prefix}${list.discriminator}${inner ? `.${inner}` : ""}`;
+  return `<input type="hidden" name="${esc(name)}" value="${esc(kind)}" data-kind-input>`;
+}
+
+const tool = (action: string, glyph: string, text: string, what: string): string =>
+  `<button type="button" class="btn btn-ghost btn-square btn-sm" data-action="${action}" aria-label="${esc(`${text} ${what}`)}" title="${esc(`${text} ${what}`)}">${icon(glyph)}</button>`;
+
+/** The tools of a card: shown by the script, which is what makes them work. */
+function tools(noun: string, number: number | string, summary: string): string {
+  const what = `${noun} ${number}${summary ? `, ${summary}` : ""}`;
+  const move = [tool("up", "arrow-up", "Move up", what), tool("down", "arrow-down", "Move down", what)];
+  return `<div class="flex shrink-0 items-center" data-tools hidden>${[...move, tool("remove", "trash", "Remove", what)].join("")}</div>`;
+}
+
+interface Place {
+  /** The list's name, then the index, as the path of the card's fields. */
+  path: string;
+  index: number | string;
+  depth: number;
+  noun: string;
+  /** The value object a card of this place holds one of. */
+  type: string;
+  list: BlockList;
+  parts: Attr[];
+  /** True in a list of one kind of group: what a part is required to be is what its value object declares. */
+  declared: boolean;
+}
+
+function badge(kind: string | null): string {
+  return kind ? `<span class="badge badge-soft badge-neutral shrink-0 font-semibold" data-kind-badge>${esc(label(kind))}</span>` : "";
+}
+
+/** The slots of a card, each as its control, with a picture's parts and a repeated part drawn as groups. */
+function slotsOfCard(agg: Aggregate, place: Place, rendering: Rendering, block: Block, kind: string | null, flagged: Problem | undefined): string {
+  const prefix = `${place.path}.${place.index}.`;
+  const picture = place.list.pictures?.[place.type];
+  const plain = (part: Attr): Slot => ({ part, required: place.declared && !part.optional, mentioned: false });
+  const shown: Slot[] = kind === null ? place.parts.map(plain) : (slotsOf(place.list, place.parts, kind) as Slot[]);
+  const held = shown.filter((slot) => !(picture && (slot.part.name === picture.alt || slot.part.name === picture.caption)));
+  const draw = held.map(({ part, required, mentioned }) => {
+    const note = mentioned ? `<p class="-mt-3 mb-3 text-xs text-muted">A rule of this kind of ${esc(singular(place.noun))} reads this.</p>` : "";
+    const message = flagged?.slots.includes(part.name) ? flagged.message : undefined;
+    if (picture && part.name === picture.key) return pictureGroup(agg, place, rendering, block, picture, flagged, prefix);
+    if (place.depth === 0 && part.list && part.kind === "object") return group(agg, place, part, rendering, block, prefix, message);
+    const rows = place.depth >= 1 && part.list && part.kind === "object";
+    return `${rendering.slot(part, prefix, block[part.name], message, required, rows)}${note}`;
+  });
+  return draw.join("\n");
+}
+
+/** A picture's parts as one group: the key and the alt text and a button that opens the picker. */
+function pictureGroup(agg: Aggregate, place: Place, rendering: Rendering, block: Block, picture: { key: string; alt: string; caption?: string }, flagged: Problem | undefined, prefix: string): string {
+  const find = (name: string): Attr | undefined => place.parts.find((part) => part.name === name);
+  const key = find(picture.key);
+  const alt = find(picture.alt);
+  const caption = picture.caption ? find(picture.caption) : undefined;
+  const control = (part: Attr | undefined): string => (part ? rendering.slot(part, prefix, block[part.name], flagged?.slots.includes(part.name) ? flagged.message : undefined) : "");
+  const pick = rendering.media ? `<button type="button" class="btn btn-sm w-fit" data-action="pick-picture" data-media="${esc(rendering.media)}">${icon("image")}<span>Choose a picture</span></button>` : "";
+  const thumb = `<img class="size-20 shrink-0 border border-base-300 object-cover" alt="" width="80" height="80" data-picture-thumb hidden>`;
+  return `<div class="my-4 grid gap-1 border border-base-300 p-3" data-picture data-key="${esc(prefix + picture.key)}" data-alt="${esc(prefix + picture.alt)}">
+<p class="font-semibold">Picture</p>
+<div class="flex flex-wrap items-start gap-3">${thumb}<div class="grid min-w-0 flex-1 gap-1 max-sm:basis-full">${control(key)}${control(alt)}${control(caption)}${pick}</div></div>
+<p class="text-xs text-muted">A picture needs a description for people who cannot see it.</p>
+</div>`;
+}
+
+/** One card: its head and, in the panel, its slots. `kind` is null for a block with no kind (a repeated part). */
+function card(agg: Aggregate, place: Place, rendering: Rendering, block: Block, kind: string | null): string {
+  const id = `blk-${safe(place.path)}-${place.index}`;
+  const flagged = rendering.problems.find((problem) => problem.name === `${place.path}.${place.index}`);
+  const picture = place.list.pictures?.[place.type];
+  const summary = kind === null && !place.list ? "" : String(summaryOf(place.list, place.parts, block, picture) ?? "");
+  const holds = rendering.problems.some((problem) => problem.name.startsWith(`${place.path}.${place.index}.`));
+  const open = flagged || holds ? "" : " hidden";
+  const attention = flagged ? `<span class="badge badge-soft badge-error shrink-0 gap-1 font-semibold">${icon("alert")}Needs attention</span>` : "";
+  const problem = flagged && flagged.slots.length === 0 ? `<p class="text-sm font-semibold text-error" id="${id}-problem">${esc(flagged.message)}</p>` : "";
+  const describe = flagged && flagged.slots.length === 0 ? ` aria-describedby="${id}-problem"` : "";
+  const number = typeof place.index === "number" ? place.index + 1 : place.index;
+  const kindField = kind === null ? "" : kindInput(agg, place.list, place.parts, `${place.path}.${place.index}.`, kind);
+  const toggle = `<button type="button" class="btn btn-ghost h-auto min-h-11 min-w-0 flex-1 flex-wrap justify-start gap-x-2 gap-y-0 py-2 text-left font-normal" data-action="toggle" aria-expanded="${flagged || holds ? "true" : "false"}" aria-controls="${id}-panel"${describe} hidden>${icon("chevron-right")}<span class="shrink-0 font-semibold" data-card-title>${esc(label(place.noun))} <span data-card-number>${number}</span></span>${badge(kind)}<span class="min-w-0 flex-1 truncate text-muted max-sm:basis-full max-sm:pl-7" data-card-summary>${esc(summary)}</span>${attention}</button>`;
+  const plain = `<span class="flex min-w-0 flex-1 flex-wrap items-center gap-2 py-2" data-card-static><span class="font-semibold">${esc(label(place.noun))} ${number}</span>${badge(kind)}<span class="min-w-0 text-muted">${esc(summary)}</span>${attention}</span>`;
+  const heading = `<h${place.depth + 3} class="m-0 flex min-w-0 flex-1 text-base">${plain}${toggle}</h${place.depth + 3}>`;
+  const valid = `${flagged ? ` data-invalid` : ""}${holds ? ` data-open` : ""}`;
+  const required = kind === null ? (place.declared ? place.parts.filter((part) => !part.optional && !part.list) : []) : [];
+  const requires = kind === null ? required.map((part) => part.name).join(" ") : (place.list.rules?.[kind]?.requires ?? []).join(" ");
+  const needs = requires ? ` data-requires="${esc(requires)}"` : "";
+  const said = picture && place.declared && place.depth === 0 ? ` data-summary-alt="${esc(picture.alt)}"` : "";
+  return `<li class="min-w-0 border border-base-300 bg-base-100" id="${id}" data-card data-index="${place.index}" data-kind="${esc(kind ?? "")}"${needs}${said}${valid}>
+<div class="flex items-center gap-1 pl-2" data-card-head>${heading}${tools(place.noun, number, summary)}</div>
+<div id="${id}-panel" class="border-t border-base-300 px-4 pb-4 [&>*:first-child]:mt-2" data-card-panel>
+${problem}${kindField}
+${slotsOfCard(agg, place, rendering, block, kind, flagged)}
+</div>
+</li>`;
+}
+
+/** The blocks nested one level in a card (buttons, entries): a group of cards with one template. */
+function group(agg: Aggregate, place: Place, part: Attr, rendering: Rendering, block: Block, prefix: string, problem?: string): string {
+  const parts = agg.valueObjects[part.type] ?? [];
+  const noun = singular(part.name.replace(/([^aeiou])ies$/, "$1y").replace(/s$/, ""));
+  const path = `${prefix}${part.name}`;
+  const held = Array.isArray(block[part.name]) ? (block[part.name] as Block[]) : [];
+  const limit = part.max ?? place.list.limits?.[part.name];
+  const pictures = { ...place.list.pictures, ...(part.picture ? { [part.type]: part.picture } : {}) };
+  const nested: BlockList = { discriminator: "", kinds: [], pictures };
+  const inside = (index: number | string, item: Block): string => card(agg, { path, index, depth: 1, noun, type: part.type, list: nested, parts, declared: place.declared }, rendering, item, null);
+  const cards = held.map((item, index) => inside(index, item));
+  const blank = inside(TOKEN[1], {});
+  const max = limit ? ` data-max="${limit}"` : "";
+  const required = place.declared ? !part.optional : place.list.rules?.[kindOf(place.list, block)]?.requires.includes(part.name);
+  const note = limitsNote(part.min, limit);
+  const need = `${required ? "" : ` <span class="ml-1 text-xs font-normal text-muted">optional</span>`}${note ? ` <span class="ml-1 text-xs font-normal text-muted">${esc(note)}</span>` : ""}`;
+  const bad = problem ? ` aria-invalid="true" aria-describedby="blk-${safe(path)}-problem"` : "";
+  const why = problem ? `<p class="clear-both text-sm font-semibold text-error" id="blk-${safe(path)}-problem">${esc(problem)}</p>` : "";
+  return `<fieldset class="mt-6 border-t border-base-300 pt-3" data-group data-path="${esc(path)}" data-noun="${esc(noun)}"${max} data-depth="1"${bad}>
+<legend class="float-left mb-2 w-full text-base font-semibold">${esc(label(part.name))}${need}</legend>
+<ol class="clear-both grid list-none grid-cols-[minmax(0,1fr)] gap-2 p-0" data-cards>
+${cards.join("\n")}
+</ol>
+${why}
+<template data-card-template data-kind="">${blank}</template>
+<button type="button" class="btn btn-ghost btn-sm mt-2" data-action="add" hidden>${icon("plus")}<span>Add ${esc(noun)}</span></button>
+</fieldset>`;
+}
+
+/** What a list of one kind of group is drawn from: a block list that has no kind, its limits and its member's picture. */
+function plainList(attr: Attr): BlockList {
+  return { discriminator: "", kinds: [], pictures: attr.picture ? { [attr.type]: attr.picture } : undefined };
+}
+
+/** The add control and a template for each kind (or the one template, for a list that has no kinds). */
+function adder(agg: Aggregate, attr: Attr, name: string, rendering: Rendering, noun: string): { control: string; templates: string } {
+  const list = attr.blockList ?? plainList(attr);
+  const parts = agg.valueObjects[attr.type] ?? [];
+  const place: Place = { path: name, index: TOKEN[0], depth: 0, noun, type: attr.type, list, parts, declared: !attr.blockList };
+  const button = `<button type="button" class="btn btn-neutral" data-action="add">${icon("plus")}<span>Add ${esc(singular(noun))}</span></button>`;
+  if (!attr.blockList) {
+    return { control: `<div class="mt-4 flex flex-wrap items-end gap-2" data-adder hidden>${button}</div>`, templates: `<template data-card-template data-kind="">${card(agg, place, rendering, {}, null)}</template>` };
+  }
+  const options = list.kinds.map((kind) => `<option value="${esc(kind)}">${esc(label(kind))}</option>`).join("");
+  const id = `blk-${safe(name)}-kind`;
+  const control = `<div class="mt-4 flex flex-wrap items-end gap-2" data-adder hidden>
+<div class="grid gap-1"><label for="${id}" class="font-semibold">Kind of ${esc(singular(noun))} to add</label><select id="${id}" class="select" data-add-kind>${options}</select></div>
+${button}
+</div>`;
+  const templates = list.kinds.map((kind) => `<template data-card-template data-kind="${esc(kind)}">${card(agg, place, rendering, { [list.discriminator]: kindValue(agg, parts, list, kind) }, kind)}</template>`);
+  return { control, templates: templates.join("\n") };
+}
+
+/** A kind as the value the discriminator part holds: wrapped when the part is a one-part value object. */
+function kindValue(agg: Aggregate, parts: Attr[], list: BlockList, kind: string): unknown {
+  const part = parts.find((candidate) => candidate.name === list.discriminator);
+  const inner = part?.kind === "object" ? (agg.valueObjects[part.type] ?? [])[0]?.name : undefined;
+  return inner ? { [inner]: kind } : kind;
+}
+
+/** What the page says at the top of a refused list: how many blocks need attention and where each is. */
+function summaryOfProblems(name: string, noun: string, problems: Problem[], titles: Map<string, string>): string {
+  if (problems.length === 0) return "";
+  const items = problems.map((problem) => {
+    const rest = problem.name.slice(name.length + 1).split(".");
+    const id = `blk-${safe(name)}-${rest[0]}`;
+    const where = rest.length > 2 ? `, ${esc(label(rest[1]))} ${Number(rest[2]) + 1}` : "";
+    return `<li><a href="#${id}">${esc(titles.get(rest[0]) ?? "")}${where}</a>: ${esc(problem.message)}</li>`;
+  });
+  const words = problems.length === 1 ? `1 ${esc(singular(noun))} needs attention` : `${problems.length} ${esc(pluralOf(singular(noun)))} need attention`;
+  return `<div class="alert alert-error alert-soft mb-4 block" role="alert" tabindex="-1" data-block-problems><p class="font-semibold">${words}</p><ul class="mt-1 list-disc pl-5">${items.join("")}</ul></div>`;
+}
+
+/** An attribute that is a list of mixed blocks, or of one kind of group, as its cards, its add control and its templates. */
+export function blockList(agg: Aggregate, attr: Attr, name: string, value: unknown, rendering: Rendering): string {
+  const list = attr.blockList ?? plainList(attr);
+  const parts = agg.valueObjects[attr.type] ?? [];
+  const noun = singular(attr.type);
+  const plural = esc(pluralOf(noun));
+  const held = Array.isArray(value) ? (value as Block[]) : [];
+  const own = rendering.problems.filter((problem) => problem.name.startsWith(`${name}.`));
+  const place = (index: number): Place => ({ path: name, index, depth: 0, noun, type: attr.type, list, parts, declared: !attr.blockList });
+  const cards = held.map((block, index) => card(agg, place(index), rendering, block, kindOf(list, block) || null));
+  const titles = new Map(held.map((block, index) => [String(index), `${label(noun)} ${index + 1}${kindOf(list, block) ? ` (${label(kindOf(list, block))})` : ""}`]));
+  const adding = adder(agg, attr, name, rendering, noun);
+  const max = attr.max ? ` data-max="${attr.max}"` : "";
+  const draft = rendering.draft ? " data-draft" : "";
+  const id = `blk-${safe(name)}`;
+  const limits = limitsNote(attr.min, attr.max);
+  const help = `<p class="clear-both mb-3 text-sm text-muted" id="${id}-help">Open a ${esc(singular(noun))} to edit it. Move buttons change the order and Remove asks first. ${limits} Without scripts every ${esc(singular(noun))} stays open and cannot be added, moved or removed.</p>`;
+  const invalid = rendering.message ? ` aria-invalid="true"` : "";
+  const said = rendering.message ? `<p class="clear-both mb-3 text-sm font-semibold text-error" id="${id}-error">${esc(rendering.message)}</p>` : "";
+  const described = rendering.message ? `${id}-help ${id}-error` : `${id}-help`;
+  return `<fieldset class="mt-6 [&>legend+*]:clear-both" id="${id}" data-block-list data-group data-path="${esc(name)}" data-noun="${esc(noun)}" data-depth="0"${max}${draft}${invalid} aria-describedby="${described}">
+<legend class="float-left mb-2 w-full border-t border-base-300 pt-4 text-lg font-semibold">${rendering.caption} <span class="text-sm font-normal text-muted" data-count>(${held.length})</span></legend>
+${help}
+${said}
+${summaryOfProblems(name, noun, own, titles)}
+<ol class="grid list-none grid-cols-[minmax(0,1fr)] gap-3 p-0" data-cards>
+${cards.join("\n")}
+</ol>
+<p class="mt-2 text-sm text-muted" data-empty${held.length > 0 ? " hidden" : ""}>No ${plural} yet.</p>
+${adding.control}
+<p class="sr-only" role="status" aria-live="polite" data-block-say></p>
+${adding.templates}
+<dialog class="modal" id="${id}-remove" aria-labelledby="${id}-remove-title" data-remove-dialog>
+<div class="modal-box"><h2 id="${id}-remove-title" class="text-xl" data-remove-title>Remove ${esc(singular(noun))}?</h2>
+<p class="mt-2 text-muted">It is taken out of the list when the list is saved.</p>
+<div class="modal-action"><button type="button" class="btn btn-ghost" data-action="remove-cancel">Keep it</button><button type="button" class="btn btn-error" data-action="remove-confirm">Remove</button></div></div>
+</dialog>
+</fieldset>`;
+}
+
+export { filled, lacking };

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

@@ -67,8 +67,11 @@ function imageHtml(block) {
   return `<figure${attrs([["data-media-ref", block.media_ref ?? ""], ["data-alt", block.alt], ["data-caption", block.caption]])}>${note}${caption}</figure>`;
 }
 
-/** One block as HTML. An unknown kind is shown as a paragraph. */
-export function blockToHtml(block) {
+/**
+ * One block as HTML. An unknown kind is shown as a paragraph. `demote` moves a heading down that
+ * many levels (to at most 6), for a body shown inside a page that has its own headings above it.
+ */
+export function blockToHtml(block, demote = 0) {
   const kind = block?.kind;
   if (kind === "divider") return "<hr>";
   if (kind === "image") return imageHtml(block);
@@ -76,14 +79,14 @@ export function blockToHtml(block) {
     const tag = kind === "bullet_list" ? "ul" : "ol";
     return `<${tag}${layout(block)}>${list(block.items).map(itemHtml).join("")}</${tag}>`;
   }
-  const level = whole(block?.level, 1, 4) ?? 2;
+  const level = Math.min(6, (whole(block?.level, 1, 4) ?? 2) + demote);
   const tag = kind === "heading" ? `h${level}` : kind === "quote" ? "blockquote" : "p";
   return `<${tag}${layout(block ?? {})}>${spansToHtml(block?.spans)}</${tag}>`;
 }
 
 /** The body as HTML, one block after another; the same body gives the same text. */
-export function bodyToHtml(body) {
-  return list(body?.blocks).map(blockToHtml).join("\n");
+export function bodyToHtml(body, demote = 0) {
+  return list(body?.blocks).map((block) => blockToHtml(block, demote)).join("\n");
 }
 
 const present = (value) => value !== undefined && value !== null && value !== "";

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

@@ -0,0 +1,88 @@
+__BANNER__
+
+// One instance: its values as a single document column, and beside it a margin panel with its
+// lifecycle state and the commands that apply now. Values are shown by shape (a value object as its
+// parts, a list of value objects as a small table, a rich-text body as typeset text). A command that
+// asks for nothing and is safe runs from a button; one that asks for input opens its own page; one
+// that is destructive asks first, in a native dialog (the page of the command is the same question
+// for a browser with no script).
+import { at } from "../names.ts";
+import type { Aggregate, Command } from "../schema.ts";
+import { available, needsPage } from "./availability.ts";
+import type { Problem } from "./blocks.ts";
+import { confirmDialog, dialogId } from "./dialogs.ts";
+import { copyButton, esc, href, refusal, statusBadge } from "./html.ts";
+import { relatedPanels } from "./related.ts";
+import { schedulePanel } from "./schedule.ts";
+import type { Tools } from "./preview.ts";
+import { valueRows } from "./values.ts";
+import type { World } from "./world.ts";
+import { commandLabel, label, singular } from "./words.ts";
+
+export { available, needsPage };
+
+type State = Record<string, unknown>;
+
+/** What a submitted command left behind: the refusal to show, and the values to put back. */
+export interface Submitted {
+  command: string;
+  message: string | null;
+  values: State;
+  /** The attribute the refusal names, when it names one. */
+  field?: string;
+  /** The blocks of a list of mixed blocks the refusal is about (see blocks.ts). */
+  problems?: Problem[];
+}
+
+function action(agg: Aggregate, id: string, command: Command, first: boolean): string {
+  const to = href(...at(agg), "id", id, command.name);
+  const text = esc(commandLabel(agg, command));
+  const tone = command.destructive ? "btn btn-error btn-outline lg:w-full" : first ? "btn btn-neutral lg:w-full" : "btn lg:w-full";
+  if (!needsPage(command)) return `<form method="post" action="${esc(to)}"><button type="submit" class="${tone}">${text}</button></form>`;
+  const confirm = command.destructive && command.attributes.length === 0 ? ` data-confirm="${dialogId(command)}"` : "";
+  return `<a class="${tone}" href="${esc(to)}"${confirm}>${text}</a>`;
+}
+
+function dialogs(agg: Aggregate, id: string, commands: Command[]): string {
+  return commands
+    .filter((command) => command.destructive && command.attributes.length === 0)
+    .map((command) => confirmDialog(agg, command, href(...at(agg), "id", id, command.name), id))
+    .join("\n");
+}
+
+function panel(agg: Aggregate, id: string, values: State, commands: Command[]): string {
+  const status = agg.lifecycle ? `<div class="lg:pb-5"><h2 class="mb-2 text-sm">Status</h2><p>${statusBadge(agg, values[agg.lifecycle.field])}</p></div>` : "";
+  const rule = agg.lifecycle ? "lg:border-t lg:border-base-300 lg:pt-5" : "";
+  const buttons = commands.map((command, at) => action(agg, id, command, at === 0));
+  const list = commands.length === 0 ? `<p class="text-muted">Nothing to do with this ${esc(singular(agg.name))} right now.</p>` : `<div class="flex flex-wrap gap-2 lg:grid">${buttons.join("\n")}</div>`;
+  return `<aside class="order-first flex flex-wrap items-start gap-x-8 gap-y-4 border-b border-base-300 pb-5 lg:sticky lg:top-20 lg:order-none lg:block lg:border-b-0 lg:pb-0" aria-label="Status and actions">${status}<div class="${rule}"><h2 class="mb-2 text-sm">Actions</h2>${list}</div></aside>`;
+}
+
+/** The badge that says an edit is saved and not put live yet, when the aggregate keeps one beside its live content. */
+function unpublished(agg: Aggregate, values: State): string {
+  const held = agg.drafts ? values[agg.drafts.attribute] : undefined;
+  const saved = held !== undefined && held !== null && !(Array.isArray(held) && held.length === 0);
+  return saved ? `<p class="mt-2"><span class="badge badge-soft badge-info">Changes not published yet</span></p>` : "";
+}
+
+/** One instance: its values, its status, a button for each command that applies to it now, and the records and actions that go with it. */
+export function detailPage(agg: Aggregate, id: string, values: State, shown: Submitted | null, world: World, preview: Tools): string {
+  const commands = agg.commands.filter((command) => command.on === agg.name && available(agg, command, values));
+  const here = href(...at(agg), "id", id);
+  const panels = [relatedPanels(agg, id, world, here), schedulePanel(agg, id, world, here)].filter((html) => html !== "");
+  return `<div class="mb-6 flex flex-wrap items-start justify-between gap-3">
+<div><h1 class="flex items-center gap-2 break-all text-3xl">${esc(id)}${copyButton(id, "id")}</h1><p class="mt-1 text-muted">${esc(label(agg.name))}</p>${unpublished(agg, values)}</div>
+${preview.button}
+</div>
+${refusal(shown?.message ?? null)}
+<div class="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_16rem]">
+<div class="grid min-w-0 gap-6">
+<section class="min-w-0 border border-base-300 bg-base-100 px-4 sm:px-6" aria-label="${esc(label(agg.name))}">
+${valueRows(agg, agg.attributes, values)}
+</section>
+${panels.join("\n")}
+</div>
+${panel(agg, id, values, commands)}
+</div>
+${dialogs(agg, id, commands)}`;
+}