hecks 3.10.0 → 3.12.0

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

@@ -0,0 +1,100 @@
+__BANNER__
+
+// How one record reaches another. A record is named to the rest of the domain by a plain key of the
+// form `<kind>:<slug>`, where the kind is its aggregate's snake-case name (`post:first-light`), so
+// this file makes that key, fills an input named by dotted path with it, and keeps the way back: a
+// page reached from a record's page carries `_back` (an address under the editor), and the form on it
+// posts `__back`, so a save returns to the record the person came from.
+import { EDITOR } from "../config.ts";
+import type { Aggregate, Attr } from "../schema.ts";
+import { esc } from "./html.ts";
+import { label } from "./words.ts";
+
+/** A record's names, as a key and its parts: `post:first-light` is kind `post`, slug `first-light`. */
+export interface Parts {
+  key: string;
+  kind: string;
+  slug: string;
+  id: string;
+}
+
+/** The snake-case name a kind is spelled: "MediaItem" is "media_item". */
+export const snake = (name: string): string => name.replace(/([a-z0-9])([A-Z])/g, "$1_$2").toLowerCase();
+
+/**
+ * A record's key and its parts. An identity that already reads `<kind>:<slug>` is that key; any
+ * other identity is the slug of a key whose kind is its aggregate's.
+ */
+export function partsOf(agg: Aggregate, id: string): Parts {
+  const given = /^([a-z][a-z0-9_]*):(.+)$/.exec(id);
+  if (given) return { key: id, kind: given[1], slug: given[2], id };
+  const kind = snake(agg.name);
+  return { key: `${kind}:${id}`, kind, slug: id, id };
+}
+
+/** The value object's one plain part that an attribute is entered as, or null when it has several. */
+function onlyPart(agg: Aggregate, attr: Attr): Attr | null {
+  const parts = attr.kind === "object" ? (agg.valueObjects[attr.type] ?? []) : [];
+  return parts.length === 1 && parts[0].kind !== "object" && !parts[0].list ? parts[0] : null;
+}
+
+/** The name of the input that holds an attribute of one plain value, as a form posts it. */
+export function plainName(agg: Aggregate, attr: Attr): string {
+  const part = onlyPart(agg, attr);
+  return part ? `${attr.name}.${part.name}` : attr.name;
+}
+
+/** `text` as a value of the attribute, wrapped in its value object when it has one. */
+export function plainValue(agg: Aggregate, attr: Attr, text: string): unknown {
+  const part = onlyPart(agg, attr);
+  return part ? { [part.name]: text } : text;
+}
+
+/** The text an attribute of one plain value holds. */
+export function plainText(value: unknown): string {
+  if (value && typeof value === "object") return plainText(Object.values(value as object).find((part) => part !== null && part !== undefined));
+  return value === null || value === undefined ? "" : String(value);
+}
+
+/** Where a page was reached from: the address to go back to, and the words for the link. */
+export interface Back {
+  path: string;
+  label: string;
+}
+
+/**
+ * The way back a request names, or null. Only an address under the editor's base path is one, so a
+ * link written by anyone cannot send a person off the editor; a control character or a backslash is
+ * refused as well.
+ */
+export function backOf(raw: string | null | undefined): Back | null {
+  if (!raw || raw.length > 400 || /[\u0000-\u001f\\]/.test(raw)) return null;
+  if (raw !== EDITOR.basePath && !raw.startsWith(`${EDITOR.basePath}/`)) return null;
+  const segments = raw.split(/[?#]/)[0].split("/").filter(Boolean);
+  const at = segments.indexOf("id");
+  const named = at >= 0 && segments[at + 1] ? segments[at + 1] : (segments.at(-1) ?? "");
+  return { path: raw, label: decoded(named) };
+}
+
+function decoded(text: string): string {
+  try {
+    return decodeURIComponent(text);
+  } catch {
+    return text;
+  }
+}
+
+/** `path` with the way back added to its query. */
+export const withBack = (path: string, back: string): string => `${path}${path.includes("?") ? "&" : "?"}_back=${encodeURIComponent(back)}`;
+
+/** The hidden input a form posts so that a save returns to `back`. */
+export const backInput = (back: Back | null): string => (back ? `<input type="hidden" name="__back" value="${esc(back.path)}">` : "");
+
+/** The link at the top of a page that leads back to the record it was reached from. */
+export function backLink(back: Back | null): string {
+  if (!back) return "";
+  return `<p class="mb-3"><a class="btn btn-ghost btn-sm" href="${esc(back.path)}">Back to ${esc(back.label)}</a></p>`;
+}
+
+/** What a record is called in a heading, such as "Search wording" or "Pictures", by the aggregate's own words. */
+export const titled = (agg: Aggregate): string => label(agg.name);

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

@@ -0,0 +1,44 @@
+__BANNER__
+
+// Moments in time. An integer the bluebook names as a date or a time is whole seconds since 1970 UTC.
+// The server does not know the viewer's time zone, so it writes the moment in UTC inside a `time`
+// element that carries the seconds, and the page's script (browser/moments.js) rewrites it in the
+// viewer's own zone with how long ago or from now it is. A form carries the seconds in a plain
+// number input that works without a script; the script replaces it with a native date or
+// date-and-time input and keeps the seconds in step.
+import type { Attr } from "../schema.ts";
+import { esc } from "./html.ts";
+
+/** Whether the attribute is a moment. */
+export const isMoment = (attr: Attr): boolean => attr.widget === "date" || attr.widget === "datetime";
+
+/** The whole seconds a stored value holds: the number itself, or the single part of a value object. */
+export function secondsOf(value: unknown): number | null {
+  const held = value && typeof value === "object" && !Array.isArray(value) ? Object.values(value as object)[0] : value;
+  if (held === null || held === undefined || held === "" || typeof held === "boolean") return null;
+  const seconds = Number(held);
+  return Number.isFinite(seconds) && Math.abs(seconds) <= 8_640_000_000_000 ? Math.trunc(seconds) : null;
+}
+
+/** A moment in UTC, for a page read with no script: `YYYY-MM-DD`, or `YYYY-MM-DD HH:MM UTC` with a time. */
+export function utcText(seconds: number, mode: string): string {
+  const iso = new Date(seconds * 1000).toISOString();
+  return mode === "date" ? iso.slice(0, 10) : `${iso.slice(0, 10)} ${iso.slice(11, 16)} UTC`;
+}
+
+/** A stored moment as a `time` element the script restates in the viewer's zone. */
+export function momentTime(seconds: number, mode: string): string {
+  const iso = new Date(seconds * 1000).toISOString();
+  return `<time class="whitespace-nowrap" datetime="${esc(iso)}" data-moment="${esc(mode)}" data-epoch="${seconds}">${esc(utcText(seconds, mode))}</time>`;
+}
+
+/** A stored value (or a list of them) of a moment attribute, shown read-only. */
+export function momentValue(attr: Attr, value: unknown): string {
+  const mode = attr.widget ?? "datetime";
+  const seconds = (item: unknown): string => {
+    const held = secondsOf(item);
+    return held === null ? `<span class="text-muted">Not set</span>` : momentTime(held, mode);
+  };
+  if (Array.isArray(value)) return value.length === 0 ? `<span class="text-muted">None</span>` : value.map(seconds).join(", ");
+  return seconds(value);
+}

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

@@ -1,27 +1,63 @@
 __BANNER__
 
-// A value shown read-only, whatever its shape: a scalar as text, a list as a list, a value object
-// as its named parts. A rich-text body is not shown this way; pages.ts renders it with bodyToHtml.
+// A value shown read-only, by its shape: a scalar as text, a value object as a list of its named
+// parts, a list of scalars as chips and a list of value objects as a small table. A rich-text body
+// is not shown this way; detail.ts renders it with bodyToHtml.
 import { esc } from "./html.ts";
+import { label } from "./words.ts";
 
 const blank = (value: unknown): boolean => value === null || value === undefined || value === "";
 
-/** `value` as a nested read-only outline. */
+/** The value inside a value object that has only a `value` part, so "Ann" is not `{value: "Ann"}`. */
+function plain(value: unknown): unknown {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    const entries = Object.entries(value as Record<string, unknown>);
+    if (entries.length === 1 && entries[0][0] === "value") return plain(entries[0][1]);
+  }
+  return value;
+}
+
+const isObject = (value: unknown): value is Record<string, unknown> => !!value && typeof value === "object" && !Array.isArray(value);
+
+const none = (text: string): string => `<span class="text-muted">${text}</span>`;
+
+function chips(items: unknown[]): string {
+  return `<ul class="flex flex-wrap gap-2">${items.map((item) => `<li class="rounded-full border border-base-300 px-3 py-0.5">${outline(item)}</li>`).join("")}</ul>`;
+}
+
+function subtable(rows: Record<string, unknown>[]): string {
+  const keys = [...new Set(rows.flatMap((row) => Object.keys(row)))];
+  const head = keys.map((key) => `<th scope="col" class="text-xs text-muted">${esc(label(key))}</th>`).join("");
+  const lines = rows.map((row) => `<tr>${keys.map((key) => `<td class="align-top">${outline(row[key])}</td>`).join("")}</tr>`);
+  return `<div class="overflow-x-auto"><table class="table table-sm"><thead><tr>${head}</tr></thead><tbody>${lines.join("")}</tbody></table></div>`;
+}
+
+function parts(value: Record<string, unknown>): string {
+  const rows = Object.entries(value).map(([key, part]) => `<div class="grid gap-0 sm:grid-cols-[8rem_minmax(0,1fr)] sm:gap-3"><dt class="text-muted">${esc(label(key))}</dt><dd>${outline(part)}</dd></div>`);
+  return `<dl class="grid gap-2">${rows.join("")}</dl>`;
+}
+
+/** `value` as read-only markup. */
 export function outline(value: unknown): string {
-  if (blank(value)) return `<em>empty</em>`;
-  if (Array.isArray(value)) return value.length === 0 ? `<em>none</em>` : `<ul>${value.map((item) => `<li>${outline(item)}</li>`).join("")}</ul>`;
-  if (typeof value !== "object") return esc(value);
-  const entries = Object.entries(value as Record<string, unknown>);
-  if (entries.length === 1 && entries[0][0] === "value") return outline(entries[0][1]);
-  const rows = entries.map(([key, part]) => `<div><strong>${esc(key)}</strong>: ${outline(part)}</div>`);
-  return `<div class="outline">${rows.join("")}</div>`;
+  const shown = plain(value);
+  if (blank(shown)) return none("Not set");
+  if (Array.isArray(shown)) {
+    if (shown.length === 0) return none("None");
+    return shown.every((item) => isObject(plain(item))) ? subtable(shown.map((item) => plain(item) as Record<string, unknown>)) : chips(shown);
+  }
+  if (isObject(shown)) return parts(shown);
+  if (typeof shown === "boolean") return shown ? "Yes" : "No";
+  return esc(shown);
 }
 
-/** A one-line summary of a value, for a table cell: single-part objects show the part, lists their size. */
-export function summary(value: unknown): string {
-  if (blank(value)) return "";
-  if (Array.isArray(value)) return `${value.length} ${value.length === 1 ? "item" : "items"}`;
-  if (typeof value !== "object") return esc(value);
-  const parts = Object.values(value as Record<string, unknown>).filter((part) => !blank(part) && !Array.isArray(part));
-  return esc(parts.join(", "));
+/** A value as one line of plain text: single-part objects show the part, lists their size. */
+export function summaryText(value: unknown): string {
+  const shown = plain(value);
+  if (blank(shown)) return "";
+  if (Array.isArray(shown)) return `${shown.length} ${shown.length === 1 ? "item" : "items"}`;
+  if (isObject(shown)) return Object.values(shown).map(plain).filter((part) => !blank(part) && !Array.isArray(part)).join(", ");
+  return typeof shown === "boolean" ? (shown ? "Yes" : "No") : String(shown);
 }
+
+/** A one-line summary of a value, for a table cell, escaped. */
+export const summary = (value: unknown): string => esc(summaryText(value));

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

@@ -1,123 +1,213 @@
 __BANNER__
 
-// The pages: a nav of aggregates, a list per aggregate (from a query when it has one), a detail page
-// per instance, and a form per command generated from the command's attributes. Lifecycle state is a
-// badge, and a lifecycle move is offered only from the states it applies in.
+// The pages: an overview of what the domain holds, a list per aggregate (table.ts), one instance
+// (detail.ts), and a form per command generated from the command's attributes. Every page is built
+// into the frame in shell.ts. Lifecycle state is a badge, and a lifecycle move is offered only from
+// the states it applies in. An editor of several chapters groups the overview and the navigation by
+// chapter and puts the chapter in each address.
+import { EDITOR } from "../config.ts";
+import { at, keyOf } from "../names.ts";
 import type { Aggregate, Attr, Command, Query } from "../schema.ts";
-import { bodyToHtml } from "./body_model.js";
-import { fields } from "./fields.ts";
-import { badge, esc, href, page, refusal } from "./html.ts";
-import { outline, summary } from "./outline.ts";
 import { SCHEMA } from "../schema.ts";
+import { detailPage as detail } from "./detail.ts";
+import type { Submitted } from "./detail.ts";
+import { confirmDialog } from "./dialogs.ts";
+import { fields } from "./fields.ts";
+import type { Invalid } from "./fields.ts";
+import { esc, href, refusal } from "./html.ts";
+import { backInput, backLink, withBack } from "./links.ts";
+import type { Back } from "./links.ts";
+import type { View } from "./paging.ts";
+import type { Choices } from "./pickers.ts";
+import { previewTools } from "./preview.ts";
+import { scheduledTable } from "./schedule.ts";
+import { SCHEDULED, countMark, groupOf, groups, onlyFor, page } from "./shell.ts";
+import type { Crumb } from "./shell.ts";
+import { listPage as list } from "./table.ts";
+import type { World } from "./world.ts";
+import { commandLabel, label, plural } from "./words.ts";
 
 type State = Record<string, unknown>;
 type Row = [string, State];
 
-/** 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;
-}
+export type { Submitted };
+
+const OVERVIEW: Crumb = ["Overview", href()];
+
+const head = (title: string, note: string, extra = ""): string =>
+  `<div class="mb-6 flex flex-wrap items-start justify-between gap-3"><div><h1 class="text-3xl">${esc(title)}</h1><p class="mt-1 max-w-prose text-muted">${esc(note)}</p></div>${extra}</div>`;
 
-const label = (name: string): string => name.replace(/_/g, " ");
+/** The trail to an aggregate's list: the overview, then the chapter when there are several. */
+const trail = (agg: Aggregate): Crumb[] => [OVERVIEW, ...(agg.chapter ? [[label(agg.chapter)] as Crumb] : []), [plural(agg.name), href(...at(agg))]];
 
-/** The home page: every aggregate the domain declares. */
+/** The words a page of an aggregate carries in its title: the plural, and the chapter when it could be mistaken for another. */
+const titleOf = (agg: Aggregate): string => (agg.chapter ? `${plural(agg.name)} (${label(agg.chapter)})` : plural(agg.name));
+
+function overviewItems(aggregates: Aggregate[]): string {
+  const items = aggregates.map((agg) => {
+    const note = agg.description ? `<span class="text-muted">${esc(agg.description)}</span>` : "";
+    return onlyFor(agg, `<li class="flex items-center justify-between gap-4"><a class="grid flex-1 gap-0.5 p-4 hover:bg-base-200/60" href="${esc(href(...at(agg)))}"><span class="text-base font-semibold">${esc(plural(agg.name))}</span>${note}</a><span class="pr-4 tabular-nums text-muted">${countMark(keyOf(agg))}</span></li>`);
+  });
+  return `<ul class="divide-y divide-base-300 border-y border-base-300 bg-base-100">\n${items.join("\n")}\n</ul>`;
+}
+
+/** The overview: every aggregate the domain declares, with what it is and how much of it there is. */
 export function home(): string {
-  const items = SCHEMA.aggregates.map(
-    (agg) => `<li><a href="${esc(href(agg.name))}">${esc(agg.name)}</a>${agg.description ? ` <span class="note">${esc(agg.description)}</span>` : ""}</li>`,
-  );
-  return page("Home", `<h1>${esc(SCHEMA.domain)}</h1>\n<ul>\n${items.join("\n")}\n</ul>`);
+  const sections = groups().map(([chapter, aggregates]) => {
+    if (chapter === null) return overviewItems(aggregates);
+    return groupOf(chapter, `<h2 class="mb-2 mt-8 text-lg">${esc(label(chapter))}</h2>\n${overviewItems(aggregates)}`);
+  });
+  const body = `${head(SCHEMA.chapters ? EDITOR.brand : SCHEMA.domain, "Choose what to edit.")}
+${sections.join("\n")}`;
+  return page("Overview", body, { crumbs: [["Overview"]] });
 }
 
-/** The page for a path that names nothing. */
-export function notFound(what: string): string {
-  return page("Not found", `<h1>Not found</h1>\n<p>${esc(what)}</p>`);
+/**
+ * The page for a path that names nothing, or, with a `title`, for another reason the person is
+ * sent back (the domain not answering, a chapter closed to their role): the heading and the tab
+ * say that reason, not "Not found".
+ */
+export function notFound(what: string, title = "Not found"): string {
+  const body = `${head(title, what)}
+<p><a class="btn" href="${esc(href())}">Back to the overview</a></p>`;
+  return page(title, body, { crumbs: [OVERVIEW, [title]] });
 }
 
-/** A form for one command; `to` adds the id input a command acting on another aggregate needs. */
-export function commandForm(agg: Aggregate, command: Command, action: string, shown: Submitted | null, state: State = {}, to = false): string {
-  const own = shown && shown.command === command.name ? shown : null;
-  const note = command.goal ? `<p class="note">${esc(command.goal)}</p>` : "";
-  const target = to ? `<label>${esc(command.on ?? "")} id<input type="text" name="__to" value="${esc(own?.values.__to ?? "")}"></label>` : "";
-  return `<form method="post" action="${esc(action)}">
-${refusal(own?.message ?? null)}${note}
-${target}
-${fields(agg, command.attributes, own ? own.values : state)}
-<button type="submit">${esc(label(command.name))}</button>
-</form>`;
+/** An aggregate's list: one page of its rows, with the filters in `view`. */
+export function listPage(agg: Aggregate, rows: Row[], query: Query | null, error: string | null, asked: boolean, view: View, choices: Choices = {}): string {
+  return page(titleOf(agg), list(agg, rows, query, error, asked, view, choices), { active: keyOf(agg), crumbs: [OVERVIEW, ...(agg.chapter ? [[label(agg.chapter)] as Crumb] : []), [plural(agg.name)]] });
 }
 
-/** The page of one creating command (or a command that acts on another aggregate's instance). */
-export function commandPage(agg: Aggregate, command: Command, action: string, shown: Submitted | null): string {
-  return page(command.name, `<h1>${esc(label(command.name))} <small>${esc(agg.name)}</small></h1>\n${commandForm(agg, command, action, shown, {}, command.on !== null && command.on !== agg.name)}`);
+/** One instance, with the records and actions that go with it and its preview. */
+export function detailPage(agg: Aggregate, id: string, values: State, shown: Submitted | null, world: World): string {
+  const crumbs: Crumb[] = [...trail(agg), [id]];
+  const tools = previewTools(agg, id);
+  return page(id, detail(agg, id, values, shown, world, tools), { active: keyOf(agg), crumbs, drawer: tools.drawer });
 }
 
-const columns = (agg: Aggregate) => agg.attributes.filter((attr) => !attr.list && attr.widget !== "body").slice(0, 4);
+/** Every action waiting to run, soonest first. */
+export function scheduledPage(world: World): string {
+  const body = `${head("Scheduled", "What is waiting to run, soonest first. These are saved here and run by something outside this editor.")}
+${scheduledTable(world, href("scheduled"))}`;
+  return page("Scheduled", body, { active: SCHEDULED, crumbs: [OVERVIEW, ["Scheduled"]] });
+}
 
-function table(agg: Aggregate, rows: Row[]): string {
-  const cols = columns(agg);
-  const head = ["id", ...cols.map((attr) => label(attr.name)), ...(agg.lifecycle ? ["status"] : [])];
-  const lines = rows.map(([id, state]) => {
-    const cells = cols.map((attr) => `<td>${summary(state[attr.name])}</td>`);
-    const status = agg.lifecycle ? `<td>${badge(state[agg.lifecycle.field])}</td>` : "";
-    return `<tr><td><a href="${esc(href(agg.name, "id", id))}">${esc(id)}</a></td>${cells.join("")}${status}</tr>`;
-  });
-  const empty = rows.length === 0 ? `<tr><td colspan="${head.length}"><em>nothing here yet</em></td></tr>` : lines.join("\n");
-  return `<table>\n<tr>${head.map((name) => `<th>${esc(name)}</th>`).join("")}</tr>\n${empty}\n</table>`;
+/**
+ * What a command's form starts from: the instance's values, and for a working copy the instance has
+ * not saved yet (a draft not yet saved) the live content it stands for, and for a rich-text body or a
+ * block list the one it holds of the same shape, so an edit begins from the current content and not
+ * an empty page.
+ */
+function startingValues(agg: Aggregate, command: Command, state: State): State {
+  const values = { ...state };
+  const unset = (value: unknown): boolean => value == null || (Array.isArray(value) && value.length === 0);
+  const drafts = agg.drafts;
+  if (drafts && drafts.save === command.name && unset(values[drafts.attribute]) && !unset(state[drafts.live])) values[drafts.attribute] = state[drafts.live];
+  for (const attr of command.attributes.filter((candidate: Attr) => (candidate.widget === "body" || candidate.blockList) && unset(values[candidate.name]))) {
+    const held = agg.attributes.find((other) => other.type === attr.type && other.name !== attr.name && !unset(state[other.name]));
+    if (held) values[attr.name] = state[held.name];
+  }
+  return values;
 }
 
-function queryLinks(agg: Aggregate, current: Query | null): string {
-  const links = agg.queries.map((query) => `<a href="${esc(`${href(agg.name)}?query=${encodeURIComponent(query.name)}`)}">${esc(label(query.name))}</a>`);
-  const all = `<a href="${esc(href(agg.name))}">all</a>`;
-  return `<p>${[all, ...links].join(" | ")}${current ? ` <span class="note">showing ${esc(current.name)}</span>` : ""}</p>`;
+const FORM = "command-form";
+
+function invalidOf(own: Submitted | null): Invalid | null {
+  return own?.field && own.message ? { field: own.field, message: own.message.replace(/^.*?: /s, "") } : null;
 }
 
-function queryForm(agg: Aggregate, query: Query | null): string {
-  if (!query || query.attributes.length === 0) return "";
-  const action = esc(href(agg.name));
-  return `<form method="get" action="${action}"><input type="hidden" name="query" value="${esc(query.name)}">
-${fields(agg, query.attributes)}
-<button type="submit">Ask</button></form>`;
+/** The buttons of a command's form: the command itself, and for one that makes something, the same and then another. */
+function submits(agg: Aggregate, command: Command): string {
+  const text = esc(commandLabel(agg, command));
+  if (command.destructive) return `<button type="submit" class="btn btn-error" data-busy data-confirm="confirm-${esc(command.name)}">${text}</button>`;
+  const again = command.creates ? `<button type="submit" class="btn" name="__again" value="1" data-busy>Save and add another</button>` : "";
+  return `${again}<button type="submit" class="btn btn-neutral" data-busy>${text}</button>`;
 }
 
-/** An aggregate's list: the rows of the query asked, or of everything it holds. */
-export function listPage(agg: Aggregate, rows: Row[], query: Query | null, error: string | null): string {
-  const creating = agg.commands.filter((command) => command.creates);
-  const actions = creating.map((command) => `<a href="${esc(href(agg.name, "new", command.name))}">${esc(label(command.name))}</a>`).join(" | ");
-  const elsewhere = agg.commands.filter((command) => !command.creates && command.on !== agg.name);
-  const others = elsewhere.map((command) => `<a href="${esc(href(agg.name, "run", command.name))}">${esc(label(command.name))}</a>`).join(" | ");
-  const body = `<h1>${esc(agg.name)}</h1>\n${agg.description ? `<p class="note">${esc(agg.description)}</p>` : ""}
-${actions ? `<p>New: ${actions}</p>` : ""}${others ? `<p>Other: ${others}</p>` : ""}
-${queryLinks(agg, query)}${queryForm(agg, query)}${refusal(error)}
-${table(agg, rows)}`;
-  return page(agg.name, body);
+/** What a command's form may be given beyond the command: the instance's values, the choices on offer and the way back. */
+interface Extras {
+  state?: State;
+  /** Whether the form names the instance to act on, for a command that acts on another aggregate's. */
+  to?: boolean;
+  cancel?: string;
+  choices?: Choices;
+  back?: Back | null;
+  /** The instance the form acts on, which a draft's buttons need. */
+  id?: string;
 }
 
-function available(agg: Aggregate, command: Command, state: State): boolean {
-  const move = agg.lifecycle?.transitions.find((transition) => transition.verb === command.name);
-  return !move || !agg.lifecycle || move.from.includes(String(state[agg.lifecycle.field]));
+/**
+ * The status line, and the buttons that publish or throw away the draft, on the page of the command
+ * that saves one. The question each asks is a dialog after the form; the publish dialog saves what is
+ * still unsaved first (`data-flush-draft`, see browser/autosave.js).
+ */
+function draftTools(agg: Aggregate, command: Command, extras: Extras): { bar: string; dialogs: string } {
+  const drafts = agg.drafts;
+  if (!drafts || drafts.save !== command.name || !extras.id) return { bar: "", dialogs: "" };
+  const id = extras.id;
+  const back = extras.back ?? null;
+  const saved = (extras.state ?? {})[drafts.attribute];
+  const held = saved != null && !(Array.isArray(saved) && saved.length === 0);
+  const make = (name?: string): Command | undefined => agg.commands.find((candidate) => candidate.name === name && candidate.on === agg.name && candidate.attributes.length === 0);
+  const ask = (command: Command | undefined, words: string, classes: string, tone: "neutral" | "error", flush: boolean, hidden: boolean): [string, string] => {
+    if (!command) return ["", ""];
+    const to = href(...at(agg), "id", id, command.name);
+    const link = back ? withBack(to, back.path) : to;
+    const button = `<a class="${classes}" href="${esc(link)}" data-confirm="confirm-${esc(command.name)}"${hidden ? " hidden data-draft-discard" : ""}>${esc(words)}</a>`;
+    return [button, confirmDialog(agg, command, to, id, undefined, { back, tone, button: words, flush })];
+  };
+  const publish = ask(make(drafts.publish), "Publish draft", "btn btn-neutral", "neutral", true, false);
+  const discard = ask(make(drafts.discard), "Discard draft", "btn btn-error btn-outline", "error", false, !held);
+  const live = esc(label(drafts.live).toLowerCase());
+  const note = `${held ? "A draft is saved." : "No draft is saved yet."} The live ${live} changes only when the draft is published.`;
+  const bar = `<div class="mb-4 flex flex-wrap items-center gap-2" data-draft-bar><p class="mr-auto text-sm text-muted" role="status" aria-live="polite" data-draft-status>${note}</p>${discard[0]}${publish[0]}</div>`;
+  return { bar, dialogs: `${publish[1]}\n${discard[1]}` };
 }
 
-/** An attribute's value read-only: a rich-text body as escaped HTML, anything else as an outline. */
-function shown(attr: Attr, value: unknown): string {
-  if (attr.widget !== "body") return outline(value);
-  return value && typeof value === "object" ? `<div class="body">${bodyToHtml(value)}</div>` : `<em>empty</em>`;
+/** A form for one command; `to` adds the id input a command acting on another aggregate needs. */
+export function commandForm(agg: Aggregate, command: Command, action: string, shown: Submitted | null, extras: Extras = {}): string {
+  const { state = {}, to = false, choices = {}, back = null } = extras;
+  const own = shown && shown.command === command.name ? shown : null;
+  const note = command.goal ? `<p class="mb-4 max-w-prose text-muted">${esc(command.goal)}.</p>` : "";
+  const target = to
+    ? `<div class="my-4 grid gap-1"><label for="f-to" class="font-semibold">${esc(command.on ?? "")} id <span class="text-primary" aria-hidden="true">*</span></label><input type="text" class="input w-full max-w-xl" id="f-to" name="__to" value="${esc(own?.values.__to ?? "")}"></div>`
+    : "";
+  const dialog = command.destructive ? confirmDialog(agg, command, action, "", FORM, { back }) : "";
+  const draft = draftTools(agg, command, extras);
+  const saved = command.attributes.find((attr) => attr.name === agg.drafts?.attribute);
+  const whole = saved !== undefined && saved.widget !== "body" && saved.blockList === undefined;
+  const mode = draft.bar ? ` data-draft="${esc(agg.drafts?.attribute)}"${whole ? " data-draft-form" : ""}` : "";
+  const leave = back?.path ?? extras.cancel ?? href(...at(agg));
+  return `<form class="max-w-3xl" id="${FORM}" method="post" action="${esc(action)}" data-form${mode}>
+${backInput(back)}${refusal(own?.message ?? null)}${note}
+${draft.bar}
+${target}
+${fields(agg, command.attributes, own ? own.values : startingValues(agg, command, state), invalidOf(own), true, choices, draft.bar ? agg.drafts?.attribute : undefined, own?.problems ?? [])}
+<div data-actionbar class="sticky bottom-0 z-10 -mx-4 mt-8 flex items-center justify-end gap-2 border-t border-base-300 bg-base-100 px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] shadow-[0_-8px_16px_-12px_rgb(0_0_0/0.25)]"><p class="mr-auto text-xs text-muted"><span class="text-primary" aria-hidden="true">*</span> Required</p><a class="btn btn-ghost" href="${esc(leave)}">Cancel</a>${submits(agg, command)}</div>
+</form>
+${dialog}${draft.dialogs}`;
 }
 
-function state(agg: Aggregate, values: State): string {
-  const rows = agg.attributes.map((attr) => `<tr><th>${esc(label(attr.name))}</th><td>${shown(attr, values[attr.name])}</td></tr>`);
-  return `<table>\n${rows.join("\n")}\n</table>`;
+/** The page of one creating command (or a command that acts on another aggregate's instance); `state` fills it, `back` is where saving returns to. */
+export function commandPage(agg: Aggregate, command: Command, action: string, shown: Submitted | null, choices: Choices = {}, extras: Extras = {}): string {
+  const crumbs: Crumb[] = [...trail(agg), [commandLabel(agg, command)]];
+  const form = commandForm(agg, command, action, shown, { ...extras, to: command.on !== null && command.on !== agg.name, choices });
+  return page(commandLabel(agg, command), `${backLink(extras.back ?? null)}${head(commandLabel(agg, command), label(agg.name))}\n${form}`, { active: keyOf(agg), crumbs });
 }
 
-/** One instance: its status, its values read-only, and a form for each command that applies to it. */
-export function detailPage(agg: Aggregate, id: string, values: State, shown: Submitted | null): string {
-  const acting = agg.commands.filter((command) => command.on === agg.name && available(agg, command, values));
-  const forms = acting.map((command) => {
-    const open = command.attributes.length > 0 ? ` ${shown && shown.command === command.name ? "open" : ""}` : "";
-    const body = commandForm(agg, command, href(agg.name, "id", id, command.name), shown, values);
-    return command.attributes.length > 0 ? `<details${open}><summary>${esc(label(command.name))}</summary>\n${body}\n</details>` : body;
-  });
-  const status = agg.lifecycle ? badge(values[agg.lifecycle.field]) : "";
-  return page(id, `<h1>${esc(id)} ${status}</h1>\n<p><a href="${esc(href(agg.name))}">${esc(agg.name)}</a></p>\n${state(agg, values)}\n<h2>Change</h2>\n${forms.join("\n")}`);
+/** The page of a command that acts on one instance: its form, or the question a destructive one asks. */
+export function instanceCommandPage(agg: Aggregate, id: string, command: Command, values: State, shown: Submitted | null, choices: Choices = {}, back: Back | null = null): string {
+  const action = href(...at(agg), "id", id, command.name);
+  const crumbs: Crumb[] = [...trail(agg), [id, href(...at(agg), "id", id)], [commandLabel(agg, command)]];
+  const tools = previewTools(agg, id);
+  const title = `${backLink(back)}${head(commandLabel(agg, command), `${label(agg.name)} ${id}`, tools.button)}`;
+  const cancel = back?.path ?? href(...at(agg), "id", id);
+  const frame = { active: keyOf(agg), crumbs, drawer: tools.drawer };
+  if (command.destructive && command.attributes.length === 0) {
+    const own = shown && shown.command === command.name ? shown.message : null;
+    const ask = `<form class="max-w-3xl" method="post" action="${esc(action)}" data-form>${backInput(back)}${refusal(own)}<p>${esc(command.goal ?? `This applies to ${id}`)}. Choose ${esc(commandLabel(agg, command))} to go ahead.</p>
+<div class="mt-6 flex justify-end gap-2"><a class="btn btn-ghost" href="${esc(cancel)}">Cancel</a><button type="submit" class="btn btn-error" data-busy>${esc(commandLabel(agg, command))}</button></div></form>`;
+    return page(commandLabel(agg, command), `${title}\n${ask}`, frame);
+  }
+  return page(commandLabel(agg, command), `${title}\n${commandForm(agg, command, action, shown, { state: values, cancel, choices, back, id })}`, frame);
 }