hecks 3.9.1 → 3.11.0

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

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

@@ -0,0 +1,211 @@
+__BANNER__
+
+// The frame of every page: skip link, header (breadcrumbs, who is signed in, theme and sign-out),
+// the navigation drawer and the main column. A page is built without knowing who is looking, so the
+// frame leaves marked places (`<!--editor:...-->`) for what belongs to the request: the person, their
+// role, the counts in the navigation and the notice. `decorate` fills them in, escaping everything;
+// the marker text is the only markup it ever inserts raw, and a marker cannot be written by the
+// domain, because `<` is escaped in everything it supplies.
+//
+// The navigation is a daisyUI drawer: open beside the page on a wide screen, and behind the menu
+// button on a narrow one. It works with no script (the checkbox is the state); the script adds the
+// button, the focus handling and Escape.
+import { EDITOR } from "../config.ts";
+import { at, keyOf, mayEdit } from "../names.ts";
+import { SCHEMA } from "../schema.ts";
+import type { Aggregate } from "../schema.ts";
+import { assetUrl, hasLogo, isBuilt } from "../assets.ts";
+import type { Flash } from "../flash.ts";
+import { esc, href } from "./html.ts";
+import { SPRITE, icon } from "./icons.ts";
+import { schedulingAggregate } from "./world.ts";
+import { label, plural } from "./words.ts";
+
+/** One step of the trail above a page's title; the last has no address. */
+export type Crumb = [label: string, to?: string];
+
+export interface Frame {
+  /** The aggregate whose page this is, for the navigation's current item; none for the overview. */
+  active?: string;
+  crumbs?: Crumb[];
+  /** A drawer the page opens over itself, such as the preview; it is placed after the navigation. */
+  drawer?: string;
+}
+
+/** What the navigation holds the screen of scheduled actions under. */
+export const SCHEDULED = "__scheduled";
+
+const MARK = {
+  person: "<!--editor:person-->",
+  role: "<!--editor:role-->",
+  initial: "<!--editor:initial-->",
+  flash: "<!--editor:flash-->",
+  count: (name: string) => `<!--editor:count:${name}-->`,
+};
+
+/** The place a page leaves for the number of instances an aggregate holds, by `keyOf`. */
+export const countMark = MARK.count;
+
+/** `html` as the part of a page only the people who may edit `agg` see: `decorate` cuts it out for the rest. */
+export const onlyFor = (agg: Aggregate, html: string): string => `<!--editor:only:${keyOf(agg)}-->${html}<!--editor:/only:${keyOf(agg)}-->`;
+
+/** `html` as the part of a page that belongs to a chapter, cut out when the person may edit none of it. */
+export const groupOf = (chapter: string, html: string): string => `<!--editor:group:${chapter}-->${html}<!--editor:/group:${chapter}-->`;
+
+/** The chapters in the order they are shown, each with the aggregates it holds; one nameless group for an editor of one chapter. */
+export function groups(): [chapter: string | null, aggregates: Aggregate[]][] {
+  if (!SCHEMA.chapters) return [[null, SCHEMA.aggregates]];
+  return SCHEMA.chapters.map((chapter): [string, Aggregate[]] => [chapter, SCHEMA.aggregates.filter((agg) => agg.chapter === chapter)]);
+}
+
+function brandMark(extra: string): string {
+  const logo = hasLogo() ? `<img class="size-7 rounded object-contain" src="${esc(assetUrl("logo"))}" alt="" width="28" height="28">` : "";
+  return `<a class="${extra}" href="${esc(EDITOR.basePath)}">${logo}<span class="truncate">${esc(EDITOR.brand)}</span></a>`;
+}
+
+function navLink(to: string, text: string, current: boolean, extra = ""): string {
+  return `<li><a href="${esc(to)}"${current ? ' aria-current="page"' : ""}><span class="truncate">${esc(text)}</span>${extra}</a></li>`;
+}
+
+function navItems(aggregates: Aggregate[], active: string | undefined): string {
+  return aggregates
+    .map((agg) => onlyFor(agg, navLink(href(...at(agg)), plural(agg.name), keyOf(agg) === active, `<span class="ml-auto text-xs text-muted tabular-nums">${MARK.count(keyOf(agg))}</span>`)))
+    .join("\n");
+}
+
+/** The link to the screen of scheduled actions, for the people who may edit them; nothing when the editor has none. */
+function scheduledLink(active: string | undefined): string {
+  const sched = schedulingAggregate();
+  return sched ? `${onlyFor(sched, navLink(href("scheduled"), "Scheduled", active === SCHEDULED))}\n` : "";
+}
+
+function navigation(active: string | undefined): string {
+  const sections = groups().map(([chapter, aggregates]) => {
+    const heading = `<li class="menu-title mt-4 px-3 text-muted">${chapter === null ? "Content" : esc(label(chapter))}</li>`;
+    const section = `${heading}\n${navItems(aggregates, active)}`;
+    return chapter === null ? section : groupOf(chapter, section);
+  });
+  return `<nav id="rail" aria-label="Sections" class="flex-1 overflow-y-auto">
+<ul class="menu w-full gap-0.5 p-3">
+${navLink(EDITOR.basePath, "Overview", active === undefined)}
+${scheduledLink(active)}${sections.join("\n")}
+</ul>
+</nav>`;
+}
+
+function trail(crumbs: Crumb[]): string {
+  const steps = crumbs.map(([text, to], at) => {
+    const last = at === crumbs.length - 1;
+    return `<li>${to && !last ? `<a href="${esc(to)}">${esc(text)}</a>` : `<span${last ? ' aria-current="page" class="font-semibold"' : ""}>${esc(text)}</span>`}</li>`;
+  });
+  return `<nav class="breadcrumbs hidden min-w-0 flex-1 text-sm text-muted md:block" aria-label="Breadcrumb"><ul>${steps.join("")}</ul></nav>`;
+}
+
+function header(crumbs: Crumb[]): string {
+  return `<header class="navbar sticky top-0 z-20 min-h-14 gap-2 border-b border-base-300 bg-base-100 px-3 lg:px-6">
+<label for="nav-toggle" class="btn btn-ghost btn-square in-[.js]:hidden lg:hidden" aria-label="Open the menu">${icon("menu")}</label>
+<button type="button" class="btn btn-ghost btn-square hidden in-[.js]:inline-flex lg:in-[.js]:hidden" data-nav-toggle aria-controls="rail" aria-expanded="false" aria-label="Open the menu">${icon("menu")}</button>
+${brandMark("mr-3 flex min-w-0 items-center gap-2 font-semibold lg:hidden")}
+${trail(crumbs)}
+<div class="ml-auto flex items-center gap-1 sm:gap-2">
+<button type="button" class="btn btn-ghost btn-square" data-theme-toggle aria-label="Switch theme" title="Switch theme">${icon("moon")}</button>
+<p class="flex items-center gap-2"><span class="grid size-8 place-items-center rounded-full bg-soft font-semibold text-primary" aria-hidden="true">${MARK.initial}</span><span class="hidden leading-tight sm:grid"><span class="max-w-56 truncate font-semibold">${MARK.person}</span><span class="text-xs text-muted">${MARK.role}</span></span></p>
+<form method="post" action="${esc(href("logout"))}"><button type="submit" class="btn btn-ghost">${icon("sign-out")}<span class="hidden sm:inline">Sign out</span></button></form>
+</div>
+</header>`;
+}
+
+/** The frame of every page: `body` is what goes in the main column. */
+export function page(title: string, body: string, frame: Frame = {}): string {
+  const sheet = isBuilt() ? `<link rel="stylesheet" href="${esc(assetUrl("editor.css"))}">` : "";
+  const script = isBuilt() ? `<script type="module" src="${esc(assetUrl("editor.js"))}"></script>` : "";
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title>${esc(title)} - ${esc(EDITOR.title)}</title>
+<script src="${esc(assetUrl("theme.js"))}"></script>
+${sheet}
+</head>
+<body class="min-h-screen bg-base-200 text-base-content">
+${SPRITE}
+<a class="sr-only focus:not-sr-only focus:absolute focus:left-3 focus:top-3 focus:z-50 focus:rounded-field focus:bg-neutral focus:px-3 focus:py-2 focus:text-neutral-content" href="#main">Skip to the content</a>
+<div class="drawer lg:drawer-open">
+<input id="nav-toggle" type="checkbox" class="drawer-toggle" aria-hidden="true" tabindex="-1">
+<div class="drawer-content min-w-0">
+${header(frame.crumbs ?? [])}
+<main id="main" tabindex="-1" class="mx-auto w-full max-w-6xl px-4 pb-24 pt-6 lg:px-8 lg:pt-8">
+${body}
+</main>
+</div>
+<div class="drawer-side z-30">
+<label for="nav-toggle" aria-label="Close the menu" class="drawer-overlay"></label>
+<aside class="flex min-h-full w-60 flex-col border-r border-base-300 bg-base-200">
+<div class="flex h-14 items-center border-b border-base-300 bg-base-100 px-4">${brandMark("flex min-w-0 items-center gap-2 text-base font-semibold tracking-tight")}</div>
+${navigation(frame.active)}
+</aside>
+</div>
+</div>
+${frame.drawer ?? ""}
+<div class="toast toast-top toast-center z-50 mt-14" data-toasts>${MARK.flash}</div>
+${script}
+</body>
+</html>
+`;
+}
+
+/** What belongs to this request and not to the page: who is signed in, the navigation's counts, a notice. */
+export interface Context {
+  email: string;
+  role: string | null;
+  counts: Record<string, number>;
+  flash: Flash | null;
+}
+
+/** A notice's classes and mark by kind, and how it is announced: an error interrupts, the rest wait their turn. */
+const NOTICES = {
+  success: ['alert alert-success alert-soft', "success", "status"],
+  error: ['alert alert-error alert-soft', "alert", "alert"],
+  info: ['alert alert-info alert-soft', "info", "status"],
+} as const;
+
+function notice(flash: Flash | null): string {
+  if (!flash) return "";
+  const [classes, mark, role] = NOTICES[flash.kind];
+  return `<div class="${classes}" role="${role}" data-toast>${icon(mark)}<p>${esc(flash.message)}</p></div>`;
+}
+
+/** `html` without each stretch from `open` to the next `close`. */
+function cutBetween(html: string, open: string, close: string): string {
+  let text = html;
+  for (let start = text.indexOf(open); start !== -1; start = text.indexOf(open)) {
+    const end = text.indexOf(close, start);
+    text = end === -1 ? text.slice(0, start) + text.slice(start + open.length) : text.slice(0, start) + text.slice(end + close.length);
+  }
+  return text;
+}
+
+/** `html` without the parts only another role may see, and without the markers that held them. */
+function visibleTo(html: string, role: string | null): string {
+  const hidden = SCHEMA.aggregates.filter((agg) => !mayEdit(agg, role));
+  const gone = hidden.map((agg): [string, string] => [`<!--editor:only:${keyOf(agg)}-->`, `<!--editor:/only:${keyOf(agg)}-->`]);
+  const empty = (SCHEMA.chapters ?? []).filter((chapter) => SCHEMA.aggregates.every((agg) => agg.chapter !== chapter || hidden.includes(agg)));
+  const groups = empty.map((chapter): [string, string] => [`<!--editor:group:${chapter}-->`, `<!--editor:/group:${chapter}-->`]);
+  const cut = [...gone, ...groups].reduce((text, [open, close]) => cutBetween(text, open, close), html);
+  return cut.replace(/<!--editor:\/?(?:only|group):[^>]*-->/g, "");
+}
+
+/** `html` with the places the frame left filled for this request. */
+export function decorate(html: string, context: Context): string {
+  const counts = SCHEMA.aggregates.map((agg) => [MARK.count(keyOf(agg)), context.counts[keyOf(agg)] === undefined ? "" : String(context.counts[keyOf(agg)])] as const);
+  const fills: (readonly [string, string])[] = [
+    [MARK.person, esc(context.email)],
+    [MARK.role, esc(context.role ?? "")],
+    [MARK.initial, esc(context.email.charAt(0).toUpperCase())],
+    [MARK.flash, notice(context.flash)],
+    ...counts,
+  ];
+  return fills.reduce((text, [marker, value]) => text.split(marker).join(value), visibleTo(html, context.role));
+}

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

@@ -0,0 +1,151 @@
+__BANNER__
+
+// An aggregate's list: a title with its primary command, the views the domain's queries give, a
+// search and a status filter, and the instances as hairline rows, a page at a time (see paging.ts).
+// Everything works without the script, and every page of a list is a link; the script adds the sort
+// of the page's rows, a live narrowing as the search is typed and the filters it remembers. A list
+// that is empty says so in one sentence and offers the command that makes the first one.
+import { at } from "../names.ts";
+import type { Aggregate, Attr, Command, Query } from "../schema.ts";
+import { esc, href, refusal, statusBadge } from "./html.ts";
+import { icon } from "./icons.ts";
+import { fields } from "./fields.ts";
+import { isMoment, momentTime, secondsOf } from "./moments.ts";
+import { summary, summaryText } from "./outline.ts";
+import { listHref, statesOf } from "./paging.ts";
+import type { View } from "./paging.ts";
+import type { Choices } from "./pickers.ts";
+import { commandLabel, humanize, label, plural, singular } from "./words.ts";
+
+type State = Record<string, unknown>;
+type Row = [string, State];
+
+const numeric = (attr: Attr): boolean => !attr.list && (attr.kind === "integer" || attr.kind === "number");
+
+const columns = (agg: Aggregate): Attr[] => agg.attributes.filter((attr) => !attr.list && attr.widget !== "body" && attr.name !== agg.identity).slice(0, 4);
+
+/** The most characters a cell shows before the rest is cut; the whole text stays in its title. */
+const CLIP = 80;
+
+function cell(attr: Attr, value: unknown): string {
+  const seconds = isMoment(attr) ? secondsOf(value) : null;
+  if (seconds !== null) return `<td data-value="${seconds}">${momentTime(seconds, attr.widget ?? "datetime")}</td>`;
+  const text = summaryText(value);
+  const long = text.length > CLIP;
+  const classes = numeric(attr) ? "text-right" : long ? "max-w-sm truncate" : "";
+  const title = long ? ` title="${esc(text)}"` : "";
+  return `<td class="${classes}"${title} data-value="${esc(text)}">${summary(value)}</td>`;
+}
+
+function head(attr: Attr | null, text: string): string {
+  const kind = attr && (numeric(attr) || isMoment(attr)) ? "number" : "text";
+  return `<th scope="col" class="${attr && numeric(attr) ? "text-right " : ""}whitespace-nowrap" data-sort="${kind}">${esc(text)}</th>`;
+}
+
+function rows(agg: Aggregate, found: Row[]): string {
+  const cols = columns(agg);
+  const heads = [head(null, label(agg.identity)), ...cols.map((attr) => head(attr, label(attr.name))), ...(agg.lifecycle ? [head(null, "Status")] : [])];
+  const lines = found.map(([id, state]) => {
+    const status = agg.lifecycle ? `<td data-value="${esc(state[agg.lifecycle.field])}">${statusBadge(agg, state[agg.lifecycle.field])}</td>` : "";
+    return `<tr class="hover:bg-base-200/60" data-row><th scope="row" class="font-normal" data-value="${esc(id)}"><a class="link link-hover font-semibold" href="${esc(href(...at(agg), "id", id))}">${esc(id)}</a></th>${cols.map((attr) => cell(attr, state[attr.name])).join("")}${status}</tr>`;
+  });
+  return `<div class="overflow-x-auto border-y border-base-300 bg-base-100 lg:overflow-visible">
+<table class="table lg:[&_thead_th]:sticky lg:[&_thead_th]:top-14 lg:[&_thead_th]:z-10 [&_thead_th]:bg-base-100 [&_thead_th]:text-xs [&_thead_th]:text-muted" data-sortable>
+<thead><tr>${heads.join("")}</tr></thead>
+<tbody>
+${lines.join("\n")}
+</tbody>
+</table>
+</div>`;
+}
+
+function empty(agg: Aggregate, primary: Command | undefined, matching: boolean): string {
+  const noun = esc(humanize(plural(agg.name)));
+  const action = primary && !matching ? `<a class="btn btn-neutral" href="${esc(href(...at(agg), "new", primary.name))}">${icon("plus")}<span>${esc(commandLabel(agg, primary))}</span></a>` : "";
+  const text = matching ? `No ${noun} match.` : `No ${noun} yet.${primary ? " Add the first one." : ""}`;
+  return `<div class="grid justify-items-center gap-3 border-y border-base-300 bg-base-100 px-4 py-16 text-center text-muted">${icon("inbox")}<p class="text-lg text-base-content">${text}</p>${action}</div>`;
+}
+
+function views(agg: Aggregate, current: Query | null): string {
+  const link = (to: string, text: string, active: boolean, title = ""): string =>
+    `<a class="${active ? "tab tab-active font-semibold" : "tab"}" href="${esc(to)}"${active ? ' aria-current="page"' : ""}${title ? ` title="${esc(title)}"` : ""}>${esc(text)}</a>`;
+  const all = link(href(...at(agg)), "All", current === null);
+  const each = agg.queries.map((query) => link(`${href(...at(agg))}?query=${encodeURIComponent(query.name)}`, label(query.name), current?.name === query.name, query.description ?? ""));
+  return agg.queries.length === 0 ? "" : `<nav class="tabs tabs-border mb-4" aria-label="Views of ${esc(humanize(plural(agg.name)))}">${[all, ...each].join("")}</nav>`;
+}
+
+function queryForm(agg: Aggregate, query: Query | null, choices: Choices): string {
+  if (!query || query.attributes.length === 0) return "";
+  const note = query.description ? `<p class="mb-2 text-muted">${esc(query.description)}</p>` : "";
+  return `<form class="mb-6 max-w-xl" method="get" action="${esc(href(...at(agg)))}">${note}<input type="hidden" name="query" value="${esc(query.name)}">
+${fields(agg, query.attributes, {}, null, false, choices)}
+<button type="submit" class="btn mt-3">${icon("search")}<span>Show matching</span></button></form>`;
+}
+
+/** What the count says: the rows there are, or the range of them this page shows, and that they match when filtered. */
+function countText(agg: Aggregate, view: View): string {
+  const active = view.q !== "" || view.status !== "";
+  const noun = view.total === 1 ? singular(agg.name) : humanize(plural(agg.name));
+  const range = view.total > view.size ? `${view.from}–${view.to} of ${view.total}` : String(view.total);
+  return `${range} ${noun}${active ? " match" : ""}`;
+}
+
+function statusSelect(agg: Aggregate, view: View): string {
+  if (!agg.lifecycle) return "";
+  const states = statesOf(agg).map((state) => `<option value="${esc(state)}"${state === view.status ? " selected" : ""}>${esc(label(state))}</option>`);
+  return `<select class="select select-sm h-9 w-auto" name="_status" aria-label="Status"><option value="">Any status</option>${states.join("")}</select>`;
+}
+
+function filters(agg: Aggregate, view: View): string {
+  const keep = view.params.map(([key, value]) => `<input type="hidden" name="${esc(key)}" value="${esc(value)}">`).join("");
+  const active = view.q !== "" || view.status !== "";
+  const clear = active ? `<a class="btn btn-ghost btn-sm h-9" href="${esc(listHref(agg, view.params))}" data-clear-filters>Clear</a>` : "";
+  const noun = esc(humanize(plural(agg.name)));
+  return `<div class="mb-3 flex flex-wrap items-center justify-between gap-3">
+<form class="flex min-w-0 flex-1 flex-wrap items-center gap-2" method="get" action="${esc(href(...at(agg)))}" role="search" aria-label="Search ${noun}" data-list-filters data-list="${esc(at(agg).join("/"))}">${keep}
+<label class="input input-sm h-9 w-full max-w-sm items-center gap-2">${icon("search")}<span class="sr-only">Search ${noun}</span><input type="search" class="grow" name="_q" value="${esc(view.q)}" data-filter placeholder="Search" autocomplete="off"></label>
+${statusSelect(agg, view)}
+<button type="submit" class="btn btn-sm h-9">Search</button>${clear}
+</form>
+<p class="tabular-nums text-muted" data-count data-text="${esc(countText(agg, view))}" aria-live="polite">${esc(countText(agg, view))}</p>
+</div>`;
+}
+
+/** The links to the pages on either side, and which page this is; none when everything fits on one. */
+function pager(agg: Aggregate, view: View): string {
+  if (view.pages <= 1) return "";
+  const step = (to: number, text: string, enabled: boolean): string =>
+    enabled
+      ? `<a class="join-item btn btn-sm" href="${esc(listHref(agg, [...view.params, ["_q", view.q], ["_status", view.status]], { _page: to === 1 ? "" : String(to) }))}" rel="${to < view.page ? "prev" : "next"}">${text}</a>`
+      : `<span class="join-item btn btn-sm btn-disabled" aria-disabled="true">${text}</span>`;
+  return `<nav class="mt-4 flex items-center justify-between gap-3" aria-label="Pages of ${esc(humanize(plural(agg.name)))}">
+<p class="tabular-nums text-muted">Page ${view.page} of ${view.pages}</p>
+<div class="join">${step(view.page - 1, "Previous", view.page > 1)}${step(view.page + 1, "Next", view.page < view.pages)}</div>
+</nav>`;
+}
+
+function actions(agg: Aggregate): string {
+  const creating = agg.commands.filter((command) => command.creates);
+  const elsewhere = agg.commands.filter((command) => !command.creates && command.on !== agg.name);
+  const primary = (command: Command): string => `<a class="btn btn-neutral" href="${esc(href(...at(agg), "new", command.name))}">${icon("plus")}<span>${esc(commandLabel(agg, command))}</span></a>`;
+  const secondary = (command: Command, verb: string): string => `<a class="btn" href="${esc(href(...at(agg), verb, command.name))}"><span>${esc(commandLabel(agg, command))}</span></a>`;
+  return [...creating.map((command, index) => (index === 0 ? primary(command) : secondary(command, "new"))), ...elsewhere.map((command) => secondary(command, "run"))].join("\n");
+}
+
+/** An aggregate's list: the page of rows of the query asked, or of everything it holds, matching the filters in `view`. */
+export function listPage(agg: Aggregate, found: Row[], query: Query | null, error: string | null, asked: boolean, view: View, choices: Choices = {}): string {
+  const primary = agg.commands.find((command) => command.creates);
+  const filtered = view.q !== "" || view.status !== "";
+  const nothing = view.unfiltered === 0 && !filtered;
+  const body = found.length > 0 ? rows(agg, found) : !asked || error ? "" : empty(agg, primary, query !== null || filtered);
+  const tools = asked && !error && !nothing ? filters(agg, view) : "";
+  return `<div class="mb-6 flex flex-wrap items-end justify-between gap-4">
+<div><h1 class="text-3xl">${esc(plural(agg.name))}</h1>${agg.description ? `<p class="mt-1 max-w-prose text-muted">${esc(agg.description)}</p>` : ""}</div>
+<div class="flex flex-wrap gap-2">${actions(agg)}</div>
+</div>
+${views(agg, query)}
+${queryForm(agg, query, choices)}${refusal(error)}
+${tools}
+${body}
+${pager(agg, view)}`;
+}

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

@@ -0,0 +1,16 @@
+__BANNER__
+
+// Applies the remembered theme before the page is painted, so a person who chose dark never sees a
+// flash of light. It is a separate small file, loaded first, because a page may carry no inline
+// script. The choice is kept in localStorage (see browser/shell.js); a browser that blocks storage
+// simply follows the system setting.
+(function () {
+  var root = document.documentElement;
+  root.classList.add("js");
+  try {
+    var saved = window.localStorage.getItem("editor-theme");
+    if (saved === "dark" || saved === "light") root.setAttribute("data-theme", "editor-" + saved);
+  } catch (error) {
+    /* storage is blocked: follow the system */
+  }
+})();