hecks 3.10.0 → 3.11.0

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

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

@@ -0,0 +1,69 @@
+__BANNER__
+
+// A record's values shown read-only, by shape: a moment in the viewer's zone, a rich-text body as
+// typeset text, a key with a button that copies it, anything else as `outline` shows it. The detail
+// page lists them as a document, and a related record's panel lists the ones it holds.
+import type { Aggregate, Attr } from "../schema.ts";
+import { bodyToHtml } from "./body_model.js";
+import { kindOf, summaryOf } from "./block_list.js";
+import { copyable, esc } from "./html.ts";
+import { isMoment, momentValue } from "./moments.ts";
+import { outline } from "./outline.ts";
+import { label } from "./words.ts";
+
+/** A body shown on a page sits under the page's h1 and its section's h2, so its own headings start at h3. */
+const READ_ONLY_DEMOTE = 2;
+
+type State = Record<string, unknown>;
+
+/** A list of mixed blocks as a numbered list: each block's kind and the line that stands for it. */
+function blockLines(agg: Aggregate, attr: Attr, held: unknown): string {
+  const blocks = Array.isArray(held) ? (held as Record<string, unknown>[]) : [];
+  if (blocks.length === 0 || !attr.blockList) return `<span class="text-muted">None</span>`;
+  const parts = agg.valueObjects[attr.type] ?? [];
+  const lines = blocks.map((block) => {
+    const kind = kindOf(attr.blockList, block);
+    const text = String(summaryOf(attr.blockList, parts, block));
+    return `<li class="flex flex-wrap items-baseline gap-2"><span class="badge badge-soft badge-neutral font-semibold">${esc(label(kind))}</span><span class="min-w-0 break-words">${esc(text)}</span></li>`;
+  });
+  return `<ol class="grid list-decimal gap-1 pl-6">${lines.join("")}</ol>`;
+}
+
+const isBlank = (value: unknown): boolean => value === undefined || value === null || value === "" || (Array.isArray(value) && value.length === 0);
+
+/** A value object of several parts as its named parts, each shown by what it is (a body typeset, a picture by its description, a list as a run). */
+function parts(agg: Aggregate, type: string, held: unknown, depth: number): string {
+  const value = held && typeof held === "object" ? (held as State) : {};
+  const rows = (agg.valueObjects[type] ?? [])
+    .filter((part) => !isBlank(value[part.name]))
+    .map((part) => `<div class="grid gap-1 sm:grid-cols-[8rem_minmax(0,1fr)] sm:gap-3"><dt class="text-muted">${esc(label(part.name))}</dt><dd class="min-w-0 break-words">${valueOf(agg, part, value, depth + 1)}</dd></div>`);
+  return rows.length === 0 ? `<span class="text-muted">Not set</span>` : `<dl class="grid gap-2">${rows.join("")}</dl>`;
+}
+
+/** Whether the attribute's value object has several parts to show (a one-part value object is shown as its part). */
+const composite = (agg: Aggregate, attr: Attr): boolean => attr.kind === "object" && (agg.valueObjects[attr.type] ?? []).length > 1;
+
+/** One attribute's value as markup. */
+export function valueOf(agg: Aggregate, attr: Attr, values: State, depth = 0): string {
+  const held = values[attr.name];
+  if (isMoment(attr)) return momentValue(attr, held);
+  if (attr.widget === "body") return held && typeof held === "object" ? `<div class="prose">${bodyToHtml(held, READ_ONLY_DEMOTE)}</div>` : `<span class="text-muted">Not set</span>`;
+  if (attr.blockList && attr.list) return blockLines(agg, attr, held);
+  if (composite(agg, attr) && depth < 5) {
+    if (!attr.list) return parts(agg, attr.type, held, depth);
+    const items = Array.isArray(held) ? held : [];
+    return items.length === 0 ? `<span class="text-muted">None</span>` : `<ol class="grid list-decimal gap-3 pl-6">${items.map((item) => `<li class="pl-1">${parts(agg, attr.type, item, depth)}</li>`).join("")}</ol>`;
+  }
+  const copy = attr.name === agg.identity || attr.kind === "reference";
+  return copy && typeof held !== "object" && held !== undefined && held !== null && held !== "" ? copyable(String(held), label(attr.name).toLowerCase()) : outline(held);
+}
+
+/** `attrs` as a list of names and values, a wide value (a body, a list, a value object) on a line of its own. */
+export function valueRows(agg: Aggregate, attrs: Attr[], values: State): string {
+  const rows = attrs.map((attr) => {
+    const wide = attr.widget === "body" || attr.list || attr.kind === "object";
+    const layout = wide ? "grid gap-2 py-4" : "grid gap-1 py-4 sm:grid-cols-[11rem_minmax(0,1fr)] sm:gap-4";
+    return `<div class="${layout}"><dt class="font-medium text-muted">${esc(label(attr.name))}</dt><dd class="min-w-0 break-words">${valueOf(agg, attr, values)}</dd></div>`;
+  });
+  return `<dl class="divide-y divide-base-300">\n${rows.join("\n")}\n</dl>`;
+}

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

@@ -0,0 +1,97 @@
+__BANNER__
+
+// The words the editor shows people. The domain's names are CamelCase and singular; people read
+// sentence case, plural for a list, and the same verb through a whole flow: the button that says
+// "Publish" leaves a notice that says "Published." Nothing here asks the domain; it reads names.
+import type { Aggregate, Command } from "../schema.ts";
+
+/** The lower-case words of a CamelCase or snake_case name: "MediaItem" is "media item". */
+export const humanize = (name: string): string =>
+  name
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/_/g, " ")
+    .toLowerCase();
+
+/** `text` with its first letter capitalised. */
+export const capital = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1);
+
+/** A name as a sentence-case label: "SaveDraft" is "Save draft". */
+export const label = (name: string): string => capital(humanize(name));
+
+/** The plural of an English noun, for the common regular shapes. */
+export function pluralOf(noun: string): string {
+  if (/[^aeiou]y$/.test(noun)) return `${noun.slice(0, -1)}ies`;
+  if (/(s|x|z|ch|sh)$/.test(noun)) return `${noun}es`;
+  return `${noun}s`;
+}
+
+/** An aggregate as a list's name: "MediaItem" is "Media items". */
+export function plural(name: string): string {
+  const words = humanize(name).split(" ");
+  words[words.length - 1] = pluralOf(words[words.length - 1]);
+  return capital(words.join(" "));
+}
+
+/** The limits a list's holder gives it as a sentence ("At least 1 and at most 60."), or nothing when it gives none. */
+export function limitsNote(min?: number, max?: number): string {
+  if (min && max) return `At least ${min} and at most ${max}.`;
+  return min ? `At least ${min}.` : max ? `At most ${max}.` : "";
+}
+
+/** An aggregate as one thing, lower case: "MediaItem" is "media item". */
+export const singular = (name: string): string => humanize(name);
+
+const IRREGULAR: Record<string, string> = {
+  set: "set", put: "put", send: "sent", make: "made", undo: "undone", redo: "redone", show: "shown", withdraw: "withdrawn",
+  draw: "drawn", hide: "hidden", write: "written", take: "taken", give: "given", keep: "kept", read: "read", pay: "paid", sell: "sold",
+  begin: "begun", run: "run", get: "got", find: "found", build: "built", choose: "chosen", leave: "left", hold: "held", lose: "lost",
+  break: "broken", bring: "brought", cut: "cut", shut: "shut", split: "split", lay: "laid", say: "said", spend: "spent", lend: "lent",
+  bind: "bound", wind: "wound", know: "known", grow: "grown", throw: "thrown", see: "seen", do: "done", go: "gone", have: "had",
+};
+
+const DOUBLED = new Set([
+  "submit", "admit", "commit", "omit", "plan", "drop", "ship", "stop", "skip", "tag", "pin", "log", "map", "ban", "trim", "wrap",
+  "grab", "strip", "refer", "transfer", "permit", "equip", "occur", "defer", "prefer",
+]);
+
+const PREFIXES = ["re", "un", "over", "out", "pre", "mis"];
+
+/** The irregular participle of `verb`, or of the verb under a prefix ("reset" is "set" again), or undefined. */
+function irregular(verb: string): string | undefined {
+  if (Object.hasOwn(IRREGULAR, verb)) return IRREGULAR[verb];
+  const prefix = PREFIXES.find((one) => verb.startsWith(one) && Object.hasOwn(IRREGULAR, verb.slice(one.length)));
+  return prefix ? `${prefix}${IRREGULAR[verb.slice(prefix.length)]}` : undefined;
+}
+
+/** The past participle of a verb: "publish" is "published", "submit" is "submitted", "begin" is "begun", "cancel" is "canceled". */
+export function past(verb: string): string {
+  const odd = irregular(verb);
+  if (odd) return odd;
+  if (verb.endsWith("e")) return `${verb}d`;
+  if (/[^aeiou]y$/.test(verb)) return `${verb.slice(0, -1)}ied`;
+  return DOUBLED.has(verb) ? `${verb}${verb.slice(-1)}ed` : `${verb}ed`;
+}
+
+/** A word cut back to what its forms share: "schedule", "scheduled" and "scheduling" are all "schedul". */
+const stem = (word: string): string => word.replace(/(ing|ed|es|e|d|s)$/, "");
+
+/**
+ * What a command's button says. A command named by one word acts on a thing the page already
+ * names, except one that makes something new: "Draft" on the articles page is "Draft article".
+ */
+export function commandLabel(agg: Aggregate, command: Command): string {
+  const words = humanize(command.name).split(" ");
+  return capital(command.creates && words.length === 1 ? `${words[0]} ${singular(agg.name)}` : words.join(" "));
+}
+
+/**
+ * What the notice says when the command has run, in the same verb as its button: "Published draft."
+ * When the thing's name already starts with the verb ("Schedule" making a "scheduled action") the
+ * repeated word is dropped, so the notice reads "Scheduled action." and never "Scheduled scheduled action."
+ */
+export function done(agg: Aggregate, command: Command): string {
+  const [verb, ...rest] = commandLabel(agg, command).toLowerCase().split(" ");
+  const repeated = rest.length > 0 && stem(rest[0]) === stem(verb);
+  const object = repeated ? rest.slice(1) : rest;
+  return capital(`${[past(verb), ...object].join(" ")}.`);
+}

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

@@ -0,0 +1,35 @@
+__BANNER__
+
+// What a page of one record may read of the rest of the domain: the records that go with it, and the
+// actions scheduled for it. The server builds it from the one read of the host the page already makes
+// (app.ts), so a page with panels costs no more reads than a page without.
+import type { Aggregate, Related } from "../schema.ts";
+import { SCHEMA } from "../schema.ts";
+
+type State = Record<string, unknown>;
+
+export interface World {
+  /** The person's role, which decides which aggregates' records may be shown. */
+  role: string | null;
+  /** One record of an aggregate by its identity, or undefined when the host holds none. */
+  lookup(agg: Aggregate, id: string): State | undefined;
+  /** Every record of an aggregate, as `[id, state]` pairs. */
+  rows(agg: Aggregate): [string, State][];
+  /** The scheduled actions of the record being shown, when the host answered a query for them. */
+  actions?: [string, State][];
+}
+
+/** The aggregate a `related` entry names. */
+export const relatedAggregate = (rel: Related): Aggregate | undefined =>
+  SCHEMA.aggregates.find((candidate) => candidate.name === rel.aggregate && candidate.chapter === rel.chapter);
+
+/** The aggregate that registers pictures, when the editor has it among its own. */
+export function pictureAggregate(): Aggregate | undefined {
+  const media = SCHEMA.media;
+  if (!media) return undefined;
+  return SCHEMA.aggregates.find((agg) => agg.name === media.aggregate && (media.domain ? agg.chapter === media.domain : !agg.chapter || agg.chapter === SCHEMA.domain));
+}
+
+/** The aggregate whose records are the scheduled actions, when the editor has one. */
+export const schedulingAggregate = (): Aggregate | undefined =>
+  SCHEMA.scheduling && SCHEMA.aggregates.find((candidate) => candidate.name === SCHEMA.scheduling?.aggregate && candidate.chapter === SCHEMA.scheduling?.chapter);

data/lib/hecks/projections/site/cms_editor/templates/tsconfig.json.tmpl

@@ -12,5 +12,6 @@
     "skipLibCheck": true,
     "types": ["node"]
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/browser"]
 }

data/lib/hecks/projections/site/cms_editor/theme.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+require_relative "palette"
+
+module Hecks
+  module Projections
+    module Site
+      module CmsEditor
+        # The editor's theme as stylesheet text: the light and dark colour properties of a
+        # `Palette`, as the lines that go inside the two daisyUI themes `src/browser/app.css`
+        # declares (`editor-light`, and `editor-dark` for a visitor whose system prefers dark).
+        module Theme
+          module_function
+
+          # @param accent [String, nil] the Editor row's accent, a six-digit hex colour, or nil
+          # @return [Hash{String => String}] the placeholders of `app.css.tmpl` and their text
+          def tokens(accent)
+            themes = Palette.new(accent).themes
+            { "__LIGHT__" => lines(themes[:light]), "__DARK__" => lines(themes[:dark]) }
+          end
+
+          # @param properties [Hash{String => String}] custom properties and their values
+          # @return [String] one declaration per line
+          def lines(properties) = properties.map { |name, value| "  #{name}: #{value};" }.join("\n")
+        end
+      end
+    end
+  end
+end