hecks 3.9.1 → 3.11.0

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

@@ -0,0 +1,63 @@
+__BANNER__
+
+// 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 === "";
+
+/** 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 {
+  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 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

@@ -0,0 +1,213 @@
+__BANNER__
+
+// 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 { 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];
+
+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>`;
+
+/** 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 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 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, 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]] });
+}
+
+/** 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)]] });
+}
+
+/** 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 });
+}
+
+/** 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"]] });
+}
+
+/**
+ * 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;
+}
+
+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;
+}
+
+/** 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>`;
+}
+
+/** 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;
+}
+
+/**
+ * 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]}` };
+}
+
+/** 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}`;
+}
+
+/** 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 });
+}
+
+/** 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);
+}

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) };
+}