hecks 3.10.0 → 3.12.0

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

@@ -0,0 +1,82 @@
+__BANNER__
+
+// A list at scale: which instances a page of a list shows. The address holds all of it, so a page of
+// a list is a link anyone can follow: `_page` (the page, from 1), `_status` (a lifecycle state) and
+// `_q` (text), beside the `query` (and its arguments) the view of the domain's own queries uses. The
+// names start with an underscore so they never collide with a query's own argument. The server
+// narrows and cuts the rows; the browser only orders the page it was given.
+import { at } from "../names.ts";
+import type { Aggregate } from "../schema.ts";
+import { summaryText } from "./outline.ts";
+import { href } from "./html.ts";
+
+type State = Record<string, unknown>;
+type Row = [string, State];
+
+/** The attribute names that name an instance to a person, in the order they are tried. */
+const TITLES = ["title", "name", "label"];
+
+/** What a list is showing: the filters in force, which page, and how many there are. */
+export interface View {
+  q: string;
+  status: string;
+  page: number;
+  pages: number;
+  size: number;
+  /** How many rows match the filters. */
+  total: number;
+  /** How many rows there are before any filter. */
+  unfiltered: number;
+  /** The first and last row shown, counted from 1; both 0 when none. */
+  from: number;
+  to: number;
+  /** The other pairs of the address (the view's query and its arguments), kept on every link. */
+  params: [string, string][];
+}
+
+/** The states a lifecycle can be in, the one it starts in first. */
+export function statesOf(agg: Aggregate): string[] {
+  const lifecycle = agg.lifecycle;
+  if (!lifecycle) return [];
+  return [...new Set([lifecycle.default, ...lifecycle.transitions.flatMap((move) => [...move.from, move.to])])];
+}
+
+/** The attribute that names an instance to a person: its title, name or label, when it has a plain one. */
+export function titleOf(agg: Aggregate): string | undefined {
+  const plain = agg.attributes.filter((attr) => !attr.list && attr.widget !== "body").map((attr) => attr.name);
+  return TITLES.find((name) => plain.includes(name));
+}
+
+/** The text a search looks in: the identity, and the title. */
+function searchable(agg: Aggregate, [id, state]: Row): string {
+  const title = titleOf(agg);
+  return [id, title ? summaryText(state[title]) : ""].join(" ").toLowerCase();
+}
+
+/** `status` when it is a state the lifecycle has, else none. */
+export const knownStatus = (agg: Aggregate, status: string): string => (statesOf(agg).includes(status) ? status : "");
+
+/** The rows that are in `status` (when it is a state the lifecycle has) and hold every word of `q`. */
+export function narrow(agg: Aggregate, rows: Row[], q: string, status: string): Row[] {
+  const words = q.toLowerCase().split(/\s+/).filter(Boolean);
+  const inState = status !== "" && agg.lifecycle ? (row: Row) => String(row[1][agg.lifecycle?.field ?? ""]) === status : () => true;
+  return rows.filter((row) => inState(row) && words.every((word) => searchable(agg, row).includes(word)));
+}
+
+/** The address of a list with its filters; `extra` overrides pairs, and an empty value leaves one out. */
+export function listHref(agg: Aggregate, params: [string, string][], extra: Record<string, string> = {}): string {
+  const pairs = [...params.filter(([key]) => !(key in extra)), ...Object.entries(extra)].filter(([, value]) => value !== "");
+  const query = new URLSearchParams(pairs).toString();
+  return `${href(...at(agg))}${query ? `?${query}` : ""}`;
+}
+
+/** What a page of `matching` rows shows: the filters, the page asked for (clamped to the pages there are) and the counts. */
+export function viewOf(matching: number, unfiltered: number, asked: { q: string; status: string; page: number; size: number; params: [string, string][] }): View {
+  const pages = Math.max(1, Math.ceil(matching / asked.size));
+  const page = Math.min(Math.max(1, asked.page), pages);
+  const from = matching === 0 ? 0 : (page - 1) * asked.size + 1;
+  return { q: asked.q, status: asked.status, page, pages, size: asked.size, total: matching, unfiltered, from, to: Math.min(matching, page * asked.size), params: asked.params };
+}
+
+/** The rows of the page `view` names. */
+export const slice = (rows: Row[], view: View): Row[] => rows.slice(Math.max(0, view.from - 1), view.to);

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

@@ -0,0 +1,110 @@
+__BANNER__
+
+// Pickers: an attribute that names an instance of another aggregate is entered by choosing it. What
+// is on offer comes from the target's own listing query (see choices.ts), and a choice shows the
+// target's title, name or label with its key. A target with few instances is a native `select`; with
+// more, or when any text is allowed, a text box with a `datalist`; a `<kind>:<key>` value is a kind
+// and then a record, which the page's script assembles and a browser with no script leaves as the
+// one text box it is. The server checks every strict key exists before it sends the command.
+import { hostName } from "../names.ts";
+import type { Aggregate, Attr, Picker, PickerKind } from "../schema.ts";
+import { esc } from "./html.ts";
+
+/** One instance on offer: its key, and the words that name it to a person. */
+export interface Choice {
+  key: string;
+  label: string;
+}
+
+/** What is on offer for each target, by `targetKey`. */
+export type Choices = Record<string, Choice[]>;
+
+/** The part of a picker that says which aggregate it offers. */
+export type Target = Omit<Picker, "kinds">;
+
+/** How many choices a native select holds before a text box with suggestions takes over. */
+export const SELECT_MAX = 30;
+
+/** The most instances offered for one target; a key past them can still be typed and is still checked. */
+export const OFFER_MAX = 500;
+
+/** The host's name for the aggregate a target offers: the key its choices are held under. */
+export const targetKey = (target: Target): string => hostName(target.target ?? "", target.chapter);
+
+const idOf = (key: string): string => `choices-${key.replace(/[^A-Za-z0-9]+/g, "-")}`;
+
+/** A choice as one line: its words, and its key when that is not the same thing. */
+export const choiceText = (choice: Choice): string => (choice.label && choice.label !== choice.key ? `${choice.label} (${choice.key})` : choice.key);
+
+/** The targets a picker names: itself, or each of its kinds that names an aggregate. */
+export function targetsOfPicker(picker: Picker): Target[] {
+  return (picker.kinds ?? [picker]).filter((target) => target.target !== undefined);
+}
+
+/** Every target `attrs` name, nested value objects included, each once; a target any picker leaves open is not strict. */
+export function targetsOf(agg: Aggregate, attrs: Attr[], found = new Map<string, Target>(), seen = new Set<string>()): Target[] {
+  for (const attr of attrs) {
+    for (const target of attr.picker ? targetsOfPicker(attr.picker) : []) {
+      const was = found.get(targetKey(target));
+      found.set(targetKey(target), { ...target, strict: Boolean(target.strict) && (was?.strict ?? true) });
+    }
+    if (attr.kind === "object" && !seen.has(attr.type)) targetsOf(agg, agg.valueObjects[attr.type] ?? [], found, new Set([...seen, attr.type]));
+  }
+  return [...found.values()];
+}
+
+/** The `datalist`s a form's pickers refer to: one per target that needs one. */
+export function datalists(agg: Aggregate, attrs: Attr[], choices: Choices): string {
+  return targetsOf(agg, attrs)
+    .filter((target) => (choices[targetKey(target)] ?? []).length > 0 && (!target.strict || choices[targetKey(target)].length > SELECT_MAX))
+    .map((target) => {
+      const options = choices[targetKey(target)].map((choice) => `<option value="${esc(choice.key)}" label="${esc(choiceText(choice))}"></option>`);
+      return `<datalist id="${esc(idOf(targetKey(target)))}">${options.join("")}</datalist>`;
+    })
+    .join("\n");
+}
+
+/** What a picker's control needs from the input it stands in for. */
+export interface Control {
+  id: string;
+  name: string;
+  value: string;
+  optional: boolean;
+  /** Whether the field is the one a refusal named. */
+  invalid: boolean;
+  /** Further attributes of the control, already escaped, each with its leading space. */
+  extra: string;
+}
+
+const inputClasses = (control: Control): string => (control.invalid ? "input input-error w-full max-w-xl" : "input w-full max-w-xl");
+
+/** A native select of the choices, with the held value kept when it is not on offer. */
+function select(options: Choice[], control: Control): string {
+  const held = control.value !== "" && !options.some((choice) => choice.key === control.value);
+  const blank = `<option value="">${control.optional ? "None" : "Choose..."}</option>`;
+  const own = held ? [`<option value="${esc(control.value)}" selected>${esc(control.value)} (not on offer)</option>`] : [];
+  const each = options.map((choice) => `<option value="${esc(choice.key)}"${choice.key === control.value ? " selected" : ""}>${esc(choiceText(choice))}</option>`);
+  const classes = control.invalid ? "select select-error w-full max-w-xl" : "select w-full max-w-xl";
+  return `<select class="${classes}" id="${esc(control.id)}" name="${esc(control.name)}"${control.extra}>${[blank, ...own, ...each].join("")}</select>`;
+}
+
+/** A text box with suggestions; a strict one is checked against them before the form is sent, unless they were cut short. */
+function suggesting(target: Target, control: Control, cut: boolean): string {
+  const strict = target.strict ? (cut ? " data-strict data-open" : " data-strict") : "";
+  return `<input type="text" class="${inputClasses(control)}" id="${esc(control.id)}" name="${esc(control.name)}" value="${esc(control.value)}" list="${esc(idOf(targetKey(target)))}" autocomplete="off"${strict}${control.extra}>`;
+}
+
+/** A `<kind>:<key>` value: its one text box, and the kinds and records the script builds a pair of selects from. */
+function kindsControl(kinds: PickerKind[], choices: Choices, control: Control): string {
+  const shown = kinds.map((kind) => ({ kind: kind.kind, strict: Boolean(kind.strict && kind.target), options: kind.target ? (choices[targetKey(kind)] ?? []) : [] }));
+  const input = `<input type="text" class="${inputClasses(control)}" id="${esc(control.id)}" name="${esc(control.name)}" value="${esc(control.value)}" autocomplete="off"${control.extra}>`;
+  return `<div class="grid max-w-xl gap-2" data-key-picker data-kinds="${esc(JSON.stringify(shown))}">${input}</div>`;
+}
+
+/** The control for a picker, or null when what is on offer could not be read (the input stays a text box). */
+export function pickerControl(picker: Picker, choices: Choices, control: Control): string | null {
+  if (picker.kinds) return kindsControl(picker.kinds, choices, control);
+  const options = choices[targetKey(picker)];
+  if (!options) return null;
+  return picker.strict && options.length <= SELECT_MAX ? select(options, control) : suggesting(picker, control, options.length >= OFFER_MAX);
+}

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

@@ -0,0 +1,87 @@
+__BANNER__
+
+// A record as the site shows it, in a side drawer beside the editor. The row's `preview` is an address
+// template; the record's key and its parts fill it, and the page frames the result. This is only a
+// framed address: nothing of the editor is sent to it and nothing is injected into it, and the
+// editor's content security policy names its origin (and no other) as a place a frame may load from.
+//
+// The frame is sandboxed with `allow-scripts allow-same-origin` and nothing else. The site's own
+// scripts must run for the page to look as it does, and without `allow-same-origin` the page would
+// have an opaque origin, so its storage, its cookies and its requests to itself would all fail. On a
+// site served from another origin the flag lets the page keep its own origin and gives it no way to
+// reach the editor. A path template is on the editor's own origin, where the pair removes the sandbox
+// altogether: use an absolute address for a site served elsewhere.
+import { EDITOR } from "../config.ts";
+import type { Aggregate } from "../schema.ts";
+import { esc } from "./html.ts";
+import { icon } from "./icons.ts";
+import { partsOf } from "./links.ts";
+import type { Parts } from "./links.ts";
+import { pictureAggregate, schedulingAggregate } from "./world.ts";
+import { label } from "./words.ts";
+
+/** A value placed in an address: encoded, with the colon of a key left as it is. */
+const placed = (value: string): string => encodeURIComponent(value).replace(/%3A/gi, ":");
+
+/** The address a record is previewed at, or null when the row names no preview. */
+export function previewUrl(agg: Aggregate, id: string): string | null {
+  if (!EDITOR.preview) return null;
+  const parts = partsOf(agg, id);
+  return EDITOR.preview.replace(/\{(key|kind|slug|id)\}/g, (_, name: keyof Parts) => placed(parts[name]));
+}
+
+/** What a page needs to offer a preview: the button for the heading, and the drawer for the end of the page. */
+export interface Tools {
+  button: string;
+  drawer: string;
+}
+
+const NONE: Tools = { button: "", drawer: "" };
+
+const WIDTHS = [
+  ["phone", "Phone", "375 pixels wide"],
+  ["tablet", "Tablet", "768 pixels wide"],
+  ["desktop", "Desktop", "the width of the window"],
+] as const;
+
+function widths(): string {
+  const buttons = WIDTHS.map(
+    ([name, text, note]) =>
+      `<button type="button" class="btn btn-sm join-item" data-preview-width="${name}" aria-pressed="${name === "desktop" ? "true" : "false"}" title="${text}, ${note}">${icon(name)}<span class="hidden sm:inline">${text}</span></button>`,
+  );
+  return `<div class="join" role="group" aria-label="Preview width">${buttons.join("")}</div>`;
+}
+
+function drawer(agg: Aggregate, id: string, url: string): string {
+  const title = `Preview of ${label(agg.name).toLowerCase()} ${id}`;
+  return `<div class="drawer drawer-end" data-preview>
+<input id="preview-toggle" type="checkbox" class="drawer-toggle" aria-hidden="true" tabindex="-1">
+<div class="drawer-side z-40">
+<label for="preview-toggle" aria-label="Close the preview" class="drawer-overlay"></label>
+<section class="flex h-full w-full max-w-6xl flex-col border-l border-base-300 bg-base-200" role="dialog" aria-modal="true" aria-label="${esc(title)}">
+<div class="flex flex-wrap items-center gap-2 border-b border-base-300 bg-base-100 p-2">
+<h2 class="mr-auto px-2 text-base">Preview</h2>
+${widths()}
+<button type="button" class="btn btn-sm" data-preview-refresh>${icon("refresh")}<span class="hidden sm:inline">Refresh</span></button>
+<a class="btn btn-sm" href="${esc(url)}" target="_blank" rel="noopener" data-preview-external>${icon("external")}<span class="hidden sm:inline">Open in new tab</span></a>
+<button type="button" class="btn btn-ghost btn-sm btn-square" aria-label="Close the preview" data-preview-close>${icon("close")}</button>
+</div>
+<div class="grid min-h-0 flex-1 justify-items-center overflow-auto p-2" data-preview-stage>
+<iframe class="h-full w-full max-w-full border border-base-300 bg-white" title="${esc(title)}" sandbox="allow-scripts allow-same-origin" referrerpolicy="no-referrer" data-preview-frame data-src="${esc(url)}"></iframe>
+</div>
+<p class="px-3 pb-2 text-xs text-muted">This is the site's own page at <span class="break-all">${esc(url)}</span>. It reads only: nothing here publishes. A page that stays blank is one the site does not let this editor show in a frame.</p>
+</section>
+</div>
+</div>`;
+}
+
+/** Whether a record of `agg` is something the site shows a page for: the pictures' records and the scheduled actions are not. */
+const shown = (agg: Aggregate): boolean => agg !== pictureAggregate() && agg !== schedulingAggregate();
+
+/** The preview button and drawer for one record, or nothing when the row names no preview or the record has no page. */
+export function previewTools(agg: Aggregate, id: string): Tools {
+  const url = shown(agg) ? previewUrl(agg, id) : null;
+  if (!url) return NONE;
+  const button = `<a class="btn" href="${esc(url)}" target="_blank" rel="noopener" data-preview-open="preview-toggle">${icon("eye")}Preview</a>`;
+  return { button, drawer: drawer(agg, id, url) };
+}

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

@@ -0,0 +1,97 @@
+__BANNER__
+
+// The records that go with one record, as panels on its page. Another aggregate's records belong to
+// this one's when its identity is a `<kind>:<slug>` key of this aggregate (the generator decides, from
+// the keys' declared patterns; see `Related` in schema.ts). Each such aggregate is a panel: the record
+// when it exists, summarised by its shape (a body as read-only text, pictures as a strip of
+// thumbnails, anything else as its fields) with a link to edit it on its own screen, or an empty
+// state with a link to the form that makes it, with the key already filled. Both links carry the way
+// back, so saving returns here.
+import { at, mayEdit } from "../names.ts";
+import { SCHEMA } from "../schema.ts";
+import type { Aggregate, Related } from "../schema.ts";
+import { esc, href } from "./html.ts";
+import { icon } from "./icons.ts";
+import { partsOf, plainName, plainText, withBack } from "./links.ts";
+import { outline } from "./outline.ts";
+import { valueOf, valueRows } from "./values.ts";
+import type { World } from "./world.ts";
+import { pictureAggregate, relatedAggregate } from "./world.ts";
+import { capital, singular } from "./words.ts";
+
+type State = Record<string, unknown>;
+
+/** What a related record is called in the panel's title and its buttons: its shape's noun, or its aggregate's own words. */
+const nounOf = (rel: Related, target: Aggregate): string => (rel.shape === "document" ? "text" : rel.shape === "gallery" ? "pictures" : singular(target.name));
+
+/** The words that say what a picture shows, from its record when the editor holds it. */
+function altOf(key: string, world: World): string {
+  const media = SCHEMA.media;
+  const registry = pictureAggregate();
+  const row = registry ? world.lookup(registry, key) : undefined;
+  return media && row ? plainText(row[media.fields.alt.name]) : "";
+}
+
+function thumbnails(keys: string[], world: World): string {
+  if (!SCHEMA.media) return outline(keys);
+  const items = keys.map(
+    (key, index) =>
+      `<li class="shrink-0"><img class="size-24 border border-base-300 object-cover" src="${esc(href("media", key))}" alt="${esc(altOf(key, world) || key)}" title="${esc(key)}" width="96" height="96" loading="lazy"><span class="sr-only">Picture ${index + 1} of ${keys.length}</span></li>`,
+  );
+  return `<ul class="flex gap-2 overflow-x-auto pb-1" aria-label="The pictures, in order">${items.join("")}</ul>`;
+}
+
+function summary(rel: Related, target: Aggregate, values: State, world: World): string {
+  if (rel.shape === "document") {
+    const body = target.attributes.find((attr) => attr.widget === "body" && !attr.list);
+    const draft = target.drafts && values[target.drafts.attribute] != null ? `<p class="mb-3"><span class="badge badge-soft badge-info">Changes not published yet</span></p>` : "";
+    return `${draft}<div class="max-h-96 overflow-y-auto">${body ? valueOf(target, body, values) : ""}</div>`;
+  }
+  if (rel.shape === "gallery") {
+    const list = target.attributes.find((attr) => attr.list && attr.picker?.target === SCHEMA.media?.aggregate);
+    const keys = [values[list?.name ?? ""]].flat().map(plainText).filter((key) => key !== "");
+    return keys.length === 0 ? `<p class="text-muted">None chosen yet.</p>` : thumbnails(keys, world);
+  }
+  return valueRows(target, target.attributes.filter((attr) => attr.name !== target.identity), values);
+}
+
+function panel(index: number, noun: string, actions: string, inner: string): string {
+  const id = `related-${index}`;
+  return `<section class="border border-base-300 bg-base-100 p-4 sm:p-6" aria-labelledby="${id}">
+<div class="mb-3 flex flex-wrap items-center justify-between gap-2"><h2 id="${id}" class="text-lg">${esc(capital(noun))}</h2><div class="flex gap-2">${actions}</div></div>
+${inner}
+</section>`;
+}
+
+/** The address of the screen that makes the related record: its creating command, with the key filled and the way back. */
+function addLink(rel: Related, target: Aggregate, key: string, here: string): string | null {
+  const field = target.attributes.find((attr) => attr.name === rel.field);
+  const command = target.commands.find((candidate) => candidate.name === rel.create);
+  if (!field || !command) return null;
+  return withBack(`${href(...at(target), "new", command.name)}?${encodeURIComponent(plainName(target, field))}=${encodeURIComponent(key)}`, here);
+}
+
+/** The address of the screen that changes the related record, or of its page when no command does. */
+function editLink(rel: Related, target: Aggregate, key: string, here: string): string {
+  return withBack(href(...at(target), "id", key, ...(rel.edit ? [rel.edit] : [])), here);
+}
+
+function one(rel: Related, index: number, agg: Aggregate, id: string, world: World, here: string): string {
+  const target = relatedAggregate(rel);
+  if (!target || !mayEdit(target, world.role)) return "";
+  const key = partsOf(agg, id).key;
+  const values = world.lookup(target, key);
+  const noun = nounOf(rel, target);
+  if (values) {
+    const edit = `<a class="btn btn-sm" href="${esc(editLink(rel, target, key, here))}">${icon("pencil")}${rel.edit ? "Edit" : "Open"}</a>`;
+    return panel(index, noun, edit, summary(rel, target, values, world));
+  }
+  const add = addLink(rel, target, key, here);
+  const button = add ? `<a class="btn btn-neutral btn-sm" href="${esc(add)}">${icon("plus")}Add ${esc(noun)}</a>` : "";
+  return panel(index, noun, "", `<p class="mb-3 text-muted">No ${esc(noun)} for this ${esc(singular(agg.name))} yet.</p>${button}`);
+}
+
+/** One panel for each aggregate keyed by `agg`'s records, for the record `id` shown at `here`. */
+export function relatedPanels(agg: Aggregate, id: string, world: World, here: string): string {
+  return (agg.related ?? []).map((rel, index) => one(rel, index, agg, id, world, here)).filter((html) => html !== "").join("\n");
+}

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

@@ -0,0 +1,160 @@
+__BANNER__
+
+// Actions scheduled for a record, and every pending action across records. The editor only makes and
+// changes the scheduled-action records (their commands, found by shape; see `Scheduling` in
+// schema.ts): nothing here runs an action, and a record's own state never changes because of one. A
+// runner elsewhere reads the records at their due time and moves each out of its first state. A time
+// is chosen with the browser's own date-and-time control, in the viewer's zone.
+import { at, mayEdit } from "../names.ts";
+import { SCHEMA } from "../schema.ts";
+import type { Aggregate, Command, Scheduling } from "../schema.ts";
+import { available } from "./availability.ts";
+import { confirmDialog, dialogId } from "./dialogs.ts";
+import { fields } from "./fields.ts";
+import { esc, href, statusBadge } from "./html.ts";
+import { backInput, partsOf, plainName, plainText, withBack } from "./links.ts";
+import { momentTime, secondsOf } from "./moments.ts";
+import type { World } from "./world.ts";
+import { schedulingAggregate } from "./world.ts";
+import { commandLabel, label, singular } from "./words.ts";
+
+type State = Record<string, unknown>;
+type Row = [string, State];
+
+/** The scheduling aggregate with its parts, when this editor has one. */
+function scheduler(): { agg: Aggregate; spec: Scheduling } | null {
+  const agg = schedulingAggregate();
+  return agg && SCHEMA.scheduling ? { agg, spec: SCHEMA.scheduling } : null;
+}
+
+/** Whether a scheduled action's subject can be a record of `agg`: its key's kinds name that aggregate. */
+function subjectIs(sched: Aggregate, spec: Scheduling, agg: Aggregate): boolean {
+  const subject = sched.attributes.find((attr) => attr.name === spec.subject);
+  return (subject?.picker?.kinds ?? []).some((kind) => kind.target === agg.name && kind.chapter === agg.chapter);
+}
+
+/** Whether records of `agg` have a Schedule panel and the person may use it. */
+export function schedules(agg: Aggregate, role: string | null): boolean {
+  const found = scheduler();
+  return found !== null && subjectIs(found.agg, found.spec, agg) && mayEdit(found.agg, role);
+}
+
+/** The query that lists one subject's actions, with the key in the shape its argument takes, or null when there is none. */
+export function subjectQuery(agg: Aggregate, id: string): { name: string; args: State } | null {
+  const found = scheduler();
+  const argument = found?.agg.queries.find((query) => query.name === found.spec.query)?.attributes[0];
+  if (!found || !argument || !found.spec.query) return null;
+  const attr = found.agg.attributes.find((candidate) => candidate.name === found.spec.subject);
+  const key = partsOf(agg, id).key;
+  const parts = attr ? (found.agg.valueObjects[attr.type] ?? []) : [];
+  return { name: found.spec.query, args: { [argument.name]: attr && attr.kind === "object" && parts.length === 1 ? { [parts[0].name]: key } : key } };
+}
+
+const stateOf = (sched: Aggregate, row: State): unknown => (sched.lifecycle ? row[sched.lifecycle.field] : undefined);
+
+const dueIn = (spec: Scheduling, row: State): number | null => secondsOf(row[spec.due]);
+
+/** Soonest first; an action with no readable time goes last. */
+const soonest = (spec: Scheduling) => (a: Row, b: Row): number => (dueIn(spec, a[1]) ?? Infinity) - (dueIn(spec, b[1]) ?? Infinity);
+
+const when = (spec: Scheduling, row: State): string => {
+  const seconds = dueIn(spec, row);
+  return seconds === null ? `<span class="text-muted">No time set</span>` : momentTime(seconds, "datetime");
+};
+
+const actionText = (spec: Scheduling, row: State): string => label(plainText(row[spec.action]));
+
+function command(sched: Aggregate, name: string | undefined): Command | undefined {
+  return sched.commands.find((candidate) => candidate.name === name);
+}
+
+/** The buttons of one pending action, and the question its cancel asks. */
+function tools(sched: Aggregate, spec: Scheduling, id: string, row: State, here: string, index: number): { buttons: string; dialog: string } {
+  const change = command(sched, spec.reschedule);
+  const stop = command(sched, spec.cancel);
+  const page = (cmd: Command): string => withBack(href(...at(sched), "id", id, cmd.name), here);
+  const reschedule = change && available(sched, change, row) ? `<a class="btn btn-sm" href="${esc(page(change))}">${esc(commandLabel(sched, change))}</a>` : "";
+  if (!stop || !available(sched, stop, row)) return { buttons: reschedule, dialog: "" };
+  const suffix = String(index);
+  const cancel = `<a class="btn btn-sm btn-error btn-outline" href="${esc(page(stop))}" data-confirm="${dialogId(stop, suffix)}">${esc(commandLabel(sched, stop))}</a>`;
+  const asking = { suffix, back: { path: here, label: "" } };
+  return { buttons: `${reschedule}${cancel}`, dialog: confirmDialog(sched, stop, href(...at(sched), "id", id, stop.name), id, undefined, asking) };
+}
+
+function pendingList(sched: Aggregate, spec: Scheduling, rows: Row[], here: string): string {
+  if (rows.length === 0) return `<p class="text-muted">Nothing is scheduled for this record.</p>`;
+  const lines = rows.map(([id, row], index) => {
+    const { buttons, dialog } = tools(sched, spec, id, row, here, index);
+    return `<li class="flex flex-wrap items-center gap-x-4 gap-y-2 py-3"><span class="font-semibold">${esc(actionText(spec, row))}</span><span>${when(spec, row)}</span><span class="ml-auto flex flex-wrap gap-2">${buttons}</span>${dialog}</li>`;
+  });
+  return `<ul class="divide-y divide-base-300" aria-label="Pending actions">${lines.join("\n")}</ul>`;
+}
+
+function pastList(sched: Aggregate, spec: Scheduling, rows: Row[]): string {
+  if (rows.length === 0) return "";
+  const lines = rows.map(([, row]) => {
+    const reason = spec.reason && plainText(row[spec.reason]) !== "" ? `<span class="basis-full text-sm text-muted">${esc(plainText(row[spec.reason]))}</span>` : "";
+    return `<li class="flex flex-wrap items-center gap-x-4 gap-y-1 py-2"><span>${esc(actionText(spec, row))}</span><span>${when(spec, row)}</span>${statusBadge(sched, stateOf(sched, row))}${reason}</li>`;
+  });
+  return `<h3 class="mb-1 mt-6 text-sm">Earlier</h3>\n<ul class="divide-y divide-base-300" aria-label="Earlier actions">${lines.join("\n")}</ul>`;
+}
+
+/** The form that adds an action for `key`: which action, when, and anything else the creating command takes. */
+function addForm(sched: Aggregate, spec: Scheduling, subject: string, here: string): string {
+  const make = command(sched, spec.schedule);
+  const subjectAttr = sched.attributes.find((attr) => attr.name === spec.subject);
+  if (!make || !subjectAttr) return "";
+  const named = new Map(make.attributes.map((attr) => [attr.name, attr]));
+  const rest = make.attributes.filter((attr) => ![spec.subject, spec.action, spec.due].includes(attr.name) && !(spec.generated && attr.name === sched.identity));
+  const asked = [named.get(spec.action), named.get(spec.due), ...rest].flatMap((attr) => attr ?? []);
+  return `<form class="mt-6 max-w-xl border-t border-base-300 pt-4" method="post" action="${esc(href(...at(sched), "new", make.name))}" data-form>
+<h3 class="text-sm">Add an action</h3>
+${backInput({ path: here, label: "" })}<input type="hidden" name="${esc(plainName(sched, subjectAttr))}" value="${esc(subject)}">
+${fields(sched, asked, {}, null, true, {})}
+<div class="mt-4"><button type="submit" class="btn btn-neutral" data-busy>${esc(label(make.name))}</button></div>
+</form>`;
+}
+
+/** The Schedule panel of a record: its pending actions, a form to add one, and the ones that have ended. */
+export function schedulePanel(agg: Aggregate, id: string, world: World, here: string): string {
+  const found = scheduler();
+  if (!found || !schedules(agg, world.role)) return "";
+  const { agg: sched, spec } = found;
+  const key = partsOf(agg, id).key;
+  const rows = (world.actions ?? world.rows(sched)).filter(([, row]) => plainText(row[spec.subject]) === key);
+  const pending = rows.filter(([, row]) => stateOf(sched, row) === spec.pending).sort(soonest(spec));
+  const ended = rows.filter(([, row]) => stateOf(sched, row) !== spec.pending).sort((a, b) => soonest(spec)(b, a)).slice(0, 10);
+  return `<section class="border border-base-300 bg-base-100 p-4 sm:p-6" aria-labelledby="schedule-title">
+<h2 id="schedule-title" class="text-lg">Schedule</h2>
+<p class="mb-4 mt-1 max-w-prose text-sm text-muted">Actions saved here are run later, at the time you choose, by something outside this editor. Saving, changing or cancelling one here never publishes or changes this ${esc(singular(agg.name))} itself.</p>
+${pendingList(sched, spec, pending, here)}
+${addForm(sched, spec, key, here)}
+${pastList(sched, spec, ended)}
+</section>`;
+}
+
+/** Where a subject key leads: the record's page when the editor holds it, else the key as plain text. */
+function subjectLink(key: string, sched: Aggregate, spec: Scheduling, world: World): string {
+  const kind = key.slice(0, Math.max(key.indexOf(":"), 0));
+  const subject = sched.attributes.find((attr) => attr.name === spec.subject);
+  const target = (subject?.picker?.kinds ?? []).find((candidate) => candidate.kind === kind && candidate.target);
+  const aggregate = target && SCHEMA.aggregates.find((candidate) => candidate.name === target.target && candidate.chapter === target.chapter);
+  const id = aggregate && [key.slice(kind.length + 1), key].find((candidate) => world.lookup(aggregate, candidate));
+  return aggregate && id ? `<a class="link" href="${esc(href(...at(aggregate), "id", id))}">${esc(key)}</a>` : esc(key);
+}
+
+/** Every pending action, soonest first, with the record each is for and the buttons that change it. */
+export function scheduledTable(world: World, here: string): string {
+  const found = scheduler();
+  if (!found) return "";
+  const { agg: sched, spec } = found;
+  const rows = world.rows(sched).filter(([, row]) => stateOf(sched, row) === spec.pending).sort(soonest(spec));
+  if (rows.length === 0) return `<p class="text-muted">Nothing is scheduled.</p>`;
+  const lines = rows.map(([id, row], index) => {
+    const { buttons, dialog } = tools(sched, spec, id, row, here, index);
+    const key = plainText(row[spec.subject]);
+    return `<tr><td>${when(spec, row)}</td><td>${esc(actionText(spec, row))}</td><td class="break-all">${subjectLink(key, sched, spec, world)}</td><td><div class="flex flex-wrap justify-end gap-2">${buttons}</div>${dialog}</td></tr>`;
+  });
+  const head = `<tr><th scope="col">When</th><th scope="col">Action</th><th scope="col">For</th><th scope="col"><span class="sr-only">Change</span></th></tr>`;
+  return `<div class="overflow-x-auto border border-base-300 bg-base-100"><table class="table"><thead>${head}</thead><tbody>${lines.join("\n")}</tbody></table></div>`;
+}