hecks 3.10.0 → 3.12.0

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

@@ -7,25 +7,40 @@ __BANNER__
 // (auth/membership.ts). A visitor with neither is sent to the site's login page; nothing in the
 // domain is read or changed before that. Posts must come from this site (the cookie is SameSite=Lax
 // and the Origin header is checked too).
-import { readFileSync } from "node:fs";
+import { randomUUID } from "node:crypto";
 
-import { DomainRefusal, DomainUnavailable, rowsOf } from "@hecks/client";
-import type { HostClient } from "@hecks/client";
+import { DomainRefusal, DomainUnavailable } from "@hecks/client";
+import type { Answer, HostClient } from "@hecks/client";
 
+import { serveAsset } from "./assets.ts";
 import { authSecret, membershipCheck } from "./auth/membership.ts";
 import type { Membership } from "./auth/membership.ts";
-import { readSession } from "./auth/session.ts";
+import { clearedCookie, readSession } from "./auth/session.ts";
 import { signIn } from "./auth/sso.ts";
-import { idOf, instanceIn, runCommand } from "./commands.ts";
+import { choicesFor, unknownKey } from "./choices.ts";
+import { idOf, instanceIn, reading, runCommand } from "./commands.ts";
 import type { State } from "./commands.ts";
 import { EDITOR } from "./config.ts";
-import { hostClient } from "./host.ts";
+import { flashCookie, readFlash, spentFlash } from "./flash.ts";
+import type { Flash } from "./flash.ts";
+import { hostClient, rowsAnswered } from "./host.ts";
+import { at, keyOf, locate, mayEdit, qualified } from "./names.ts";
 import { SCHEMA } from "./schema.ts";
 import type { Aggregate, Command } from "./schema.ts";
+import { available, needsPage } from "./ui/detail.ts";
+import { href } from "./ui/html.ts";
 import { commandArguments, parseForm } from "./ui/input.ts";
-import { commandPage, detailPage, home, listPage, notFound } from "./ui/pages.ts";
+import { backOf, plainValue } from "./ui/links.ts";
+import type { Back } from "./ui/links.ts";
+import { commandPage, detailPage, home, instanceCommandPage, listPage, notFound, scheduledPage } from "./ui/pages.ts";
 import type { Submitted } from "./ui/pages.ts";
-import { href } from "./ui/html.ts";
+import { knownStatus, narrow, slice, viewOf } from "./ui/paging.ts";
+import type { View } from "./ui/paging.ts";
+import { schedules, subjectQuery } from "./ui/schedule.ts";
+import { decorate } from "./ui/shell.ts";
+import type { World } from "./ui/world.ts";
+import { schedulingAggregate } from "./ui/world.ts";
+import { done, commandLabel, plural } from "./ui/words.ts";
 __MEDIA_IMPORT__
 
 export interface AppOptions {
@@ -38,12 +53,39 @@ export interface AppOptions {
 __MEDIA_OPTION__
 }
 
-const html = (body: string, status = 200): Response =>
-  new Response(body, { status, headers: { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" } });
+/**
+ * What every page is sent with. The editor loads its own script, stylesheet, pictures and icons and
+ * nothing else, so the policy names no other origin and allows no inline script and no inline style
+ * (no `style` attribute, no style element: the stylesheet is a file, and the writing surface is told
+ * to inject none). `data:` in `img-src` is for the sprite-free case of a picture drawn from a data
+ * address; `blob:` shows a picture chosen for upload before it is sent. Script may still set styles
+ * through the page's object model, which the policy allows.
+ */
+const POLICY = [
+  "default-src 'none'",
+  "script-src 'self'",
+  "style-src 'self'",
+  "img-src 'self' data: blob:",
+  "connect-src 'self'",
+  "form-action 'self'",
+__FRAME_POLICY__
+  "base-uri 'none'",
+  "frame-ancestors 'none'",
+].join("; ");
+
+const PAGE_HEADERS = {
+  "Content-Type": "text/html; charset=utf-8",
+  "Cache-Control": "no-store",
+  "Content-Security-Policy": POLICY,
+  "Referrer-Policy": "same-origin",
+  "X-Content-Type-Options": "nosniff",
+};
+
+const plain = (body: string, status: number): Response => new Response(body, { status, headers: { "Content-Type": "text/plain; charset=utf-8" } });
 
-const redirect = (location: string, status = 303, cookie?: string): Response => {
+const redirect = (location: string, status = 303, ...cookies: string[]): Response => {
   const headers = new Headers({ Location: location });
-  if (cookie) headers.append("Set-Cookie", cookie);
+  for (const cookie of cookies) headers.append("Set-Cookie", cookie);
   return new Response(null, { status, headers });
 };
 
@@ -54,6 +96,14 @@ function sameSite(request: Request): boolean {
   return (request.headers.get("sec-fetch-site") ?? "same-origin") !== "cross-site";
 }
 
+/** What a route needs to answer: show a page for this person, or send them on with a notice. */
+interface Scene {
+  /** The person's role, which decides the chapters they may edit. */
+  role: string | null;
+  show(body: string, status?: number, notice?: Flash): Promise<Response>;
+  sent(location: string, message: string): Response;
+}
+
 /** The editor, as a handler. */
 export function createApp(options: AppOptions = {}): (request: Request) => Promise<Response> {
   const secret = options.secret ?? authSecret();
@@ -62,94 +112,193 @@ export function createApp(options: AppOptions = {}): (request: Request) => Promi
   const client = hostClient({ url: options.url, fetch: options.fetch });
 __MEDIA_SETUP__
 
+  /**
+   * The instances each aggregate holds, for the navigation; a host that cannot say shows no counts.
+   * The host has no count to ask for, so they are the lengths of what one read answers, the same
+   * read a page of a list is made from.
+   */
+  async function counts(from: HostClient): Promise<Record<string, number>> {
+    try {
+      const answer = await from.read();
+      return Object.fromEntries(SCHEMA.aggregates.map((agg) => [keyOf(agg), from.instancesOf(answer, qualified(agg)).length]));
+    } catch {
+      return {};
+    }
+  }
+
+  function sceneFor(email: string, role: string | null, flash: Flash | null, from: HostClient): Scene {
+    return {
+      role,
+      async show(body, status = 200, notice) {
+        const text = decorate(body, { email, role, counts: await counts(from), flash: notice ?? flash });
+        const response = new Response(text, { status, headers: PAGE_HEADERS });
+        if (flash) response.headers.append("Set-Cookie", spentFlash());
+        return response;
+      },
+      sent: (location, message) => redirect(location, 303, flashCookie({ kind: "success", message }, secret, now)),
+    };
+  }
+
   async function handle(request: Request): Promise<Response> {
     const url = new URL(request.url);
     const path = url.pathname.replace(/\/+$/, "") || "/";
     if (path === EDITOR.ssoPath) return enter(url, secret, membership, now);
-    if (path !== EDITOR.basePath && !path.startsWith(`${EDITOR.basePath}/`)) return html(notFound(path), 404);
+    if (path !== EDITOR.basePath && !path.startsWith(`${EDITOR.basePath}/`)) return anonymous(notFound(path), 404);
+    if (path === href("logout") && request.method === "POST") return signOut(request);
 
     const email = readSession(request.headers.get("cookie"), secret, now);
     if (!email || !(await membership.isAdmitted(email))) {
-      return request.method === "GET" ? redirect(EDITOR.login, 302) : new Response("Sign in again.", { status: 403 });
+      return request.method === "GET" ? redirect(EDITOR.login, 302) : plain("Sign in again.", 403);
     }
-    if (request.method === "POST" && !sameSite(request)) return new Response("Cross-site post refused.", { status: 403 });
+    if (request.method === "POST" && !sameSite(request)) return plain("Cross-site post refused.", 403);
     const segments = path.slice(EDITOR.basePath.length).split("/").filter(Boolean).map(decodeURIComponent);
+    const role = membership.roleOf ? await membership.roleOf(email) : null;
 __MEDIA_ROUTE__
-    return route(client, request, url, segments);
+    const reader = request.method === "GET" ? reading(client) : client;
+    const scene = sceneFor(email, role, readFlash(request.headers.get("cookie"), secret, now), reader);
+    return route(reader, request, url, segments, scene);
   }
 
   return async (request) => {
     try {
       return await handle(request);
     } catch (err) {
-      if (err instanceof DomainUnavailable) return html(notFound(`The domain could not be reached: ${err.message}`), 502);
+      if (err instanceof DomainUnavailable) return anonymous(notFound(`The domain could not be reached: ${err.message}`, "The domain is not answering"), 502);
       throw err;
     }
   };
 }
 
-/** The browser modules the rich-text widget loads (with the picture picker when there are pictures), for signed-in editors only. */
-const ASSETS = __ASSETS__;
+/** A page for someone with no session to show, such as a path the editor does not serve. */
+function anonymous(body: string, status: number): Response {
+  return new Response(decorate(body, { email: "", role: null, counts: {}, flash: null }), { status, headers: PAGE_HEADERS });
+}
 
-function asset(name: string): Response {
-  if (!ASSETS.includes(name)) return html(notFound(`No asset ${name}.`), 404);
-  const text = readFileSync(new URL(`./ui/${name}`, import.meta.url), "utf8");
-  return new Response(text, { headers: { "Content-Type": "text/javascript; charset=utf-8", "Cache-Control": "private, max-age=300" } });
+/** Ends the session: the cookie is cleared and the person is sent to the site's login page. */
+function signOut(request: Request): Response {
+  if (!sameSite(request)) return plain("Cross-site post refused.", 403);
+  return redirect(EDITOR.login, 303, clearedCookie());
 }
 
 async function enter(url: URL, secret: string, membership: Membership, now: () => number): Promise<Response> {
   const result = await signIn(url.searchParams.get("token"), secret, membership, now);
-  if (!result.ok) return new Response(result.message, { status: result.status });
+  if (!result.ok) return plain(result.message, result.status);
   return redirect(result.location, 302, result.cookie);
 }
 
-function route(client: HostClient, request: Request, url: URL, segments: string[]): Promise<Response> | Response {
-  const [name, verb, ...rest] = segments;
-  if (segments.length === 0) return html(home());
-  if (name === "assets" && segments.length === 2 && request.method === "GET") return asset(verb);
-  const agg = SCHEMA.aggregates.find((candidate) => candidate.name === name);
-  if (!agg) return html(notFound(`No aggregate ${name}.`), 404);
-  if (verb === undefined) return list(client, agg, url);
-  if (verb === "id" && rest.length === 1 && request.method === "GET") return detail(client, agg, rest[0], null);
-  if (request.method === "POST") return post(client, request, agg, verb, rest);
-  if ((verb === "new" || verb === "run") && rest.length === 1) return commandView(agg, verb, rest[0]);
-  return html(notFound(`No page ${segments.join("/")}.`), 404);
+function route(client: HostClient, request: Request, url: URL, segments: string[], scene: Scene): Promise<Response> | Response {
+  if (segments.length === 0) return scene.show(home());
+  if (segments[0] === "assets" && segments.length === 2 && request.method === "GET") return serveAsset(segments[1], request);
+  if (segments[0] === "scheduled" && segments.length === 1 && request.method === "GET" && SCHEMA.scheduling) return scheduledView(client, scene);
+  const { agg, rest: [verb, ...rest] } = locate(segments);
+  if (!agg) return scene.show(notFound(`No aggregate ${segments.slice(0, SCHEMA.chapters ? 2 : 1).join("/")}.`), 404);
+  if (!mayEdit(agg, scene.role)) return scene.show(notFound(`${plural(agg.name)} are not open to your role.`, "Not open to your role"), 403);
+  if (verb === undefined) return list(client, agg, url, scene);
+  if (verb === "id" && rest.length === 1 && request.method === "GET") return detail(client, agg, rest[0], null, scene);
+  if (verb === "id" && rest.length === 2 && request.method === "GET") return instanceView(client, agg, rest[0], rest[1], url, scene);
+  if (request.method === "POST") return post(client, request, agg, verb, rest, scene);
+  if ((verb === "new" || verb === "run") && rest.length === 1) return commandView(client, agg, verb, rest[0], url, scene);
+  return scene.show(notFound(`No page ${segments.join("/")}.`), 404);
+}
+
+/** The pairs of an address a list keeps on every link: its view and that view's arguments, not the filters or the page. */
+const KEPT = (key: string): boolean => !["_page", "_q", "_status"].includes(key);
+
+/** The filters and the page an address asks for. */
+function asked(url: URL): { q: string; status: string; page: number; size: number; params: [string, string][] } {
+  const page = Number.parseInt(url.searchParams.get("_page") ?? "1", 10);
+  return {
+    q: (url.searchParams.get("_q") ?? "").trim().slice(0, 200),
+    status: url.searchParams.get("_status") ?? "",
+    page: Number.isFinite(page) ? page : 1,
+    size: EDITOR.pageSize,
+    params: [...url.searchParams].filter(([key]) => KEPT(key)),
+  };
 }
 
-async function list(client: HostClient, agg: Aggregate, url: URL): Promise<Response> {
+async function list(client: HostClient, agg: Aggregate, url: URL, scene: Scene): Promise<Response> {
   const query = agg.queries.find((candidate) => candidate.name === url.searchParams.get("query")) ?? null;
   const form = parseForm(url.search.slice(1));
   const args = query ? commandArguments(agg, query.attributes, form) : {};
-  const asked = query !== null && (query.attributes.length === 0 || Object.keys(args).length > 0);
-  if (query && !asked) return html(listPage(agg, [], query, null));
+  const wanted = query !== null && (query.attributes.length === 0 || Object.keys(args).length > 0);
+  const raw = asked(url);
+  const filters = { ...raw, status: knownStatus(agg, raw.status) };
+  const choices = query ? await choicesFor(client, agg, query.attributes) : {};
+  const none = viewOf(0, 0, filters);
+  if (query && !wanted) return scene.show(listPage(agg, [], query, null, false, none, choices));
   try {
-    const rows = await rowsFor(client, agg, asked ? query : null, args);
-    return html(listPage(agg, rows, query, null));
+    const found = await rowsFor(client, agg, wanted ? query : null, args);
+    const matching = narrow(agg, found, filters.q, filters.status);
+    const view: View = viewOf(matching.length, found.length, filters);
+    return scene.show(listPage(agg, slice(matching, view), query, null, true, view, choices));
   } catch (err) {
-    if (err instanceof DomainRefusal) return html(listPage(agg, [], query, err.message), 200);
+    if (err instanceof DomainRefusal) return scene.show(listPage(agg, [], query, err.message, true, none, choices), 200);
     throw err;
   }
 }
 
 async function rowsFor(client: HostClient, agg: Aggregate, query: { name: string } | null, args: State): Promise<[string, State][]> {
-  if (!query) return client.instancesOf(await client.read(), agg.name);
-  const rows = rowsOf(await client.query(`${agg.name}.${query.name}`, args), `${agg.name}.${query.name}`) ?? [];
+  if (!query) return client.instancesOf(await client.read(), qualified(agg));
+  const name = `${qualified(agg)}.${query.name}`;
+  const rows = rowsAnswered(await client.query(name, args), name);
   return rows.flatMap((row): [string, State][] => {
     const id = idOf(agg, row);
     return id === null ? [] : [[id, row]];
   });
 }
 
-async function detail(client: HostClient, agg: Aggregate, id: string, shown: Submitted | null, status = 200): Promise<Response> {
+const refused = (agg: Aggregate, command: Command): Flash => ({ kind: "error", message: `${commandLabel(agg, command)} was not applied. Fix what is marked and try again.` });
+
+/** What a page of one record may read of the rest of the domain, from the read the page already made. */
+async function worldFor(client: HostClient, answer: Answer, role: string | null, record?: { agg: Aggregate; id: string }): Promise<World> {
+  const world: World = { role, lookup: (agg, id) => instanceIn(client, answer, agg, id), rows: (agg) => client.instancesOf(answer, qualified(agg)) };
+  const asked = record && schedules(record.agg, role) ? subjectQuery(record.agg, record.id) : null;
+  const sched = schedulingAggregate();
+  if (!asked || !sched) return world;
+  const name = `${qualified(sched)}.${asked.name}`;
+  try {
+    const rows = rowsAnswered(await client.query(name, asked.args), name);
+    return { ...world, actions: rows.flatMap((row): [string, State][] => (idOf(sched, row) === null ? [] : [[idOf(sched, row) as string, row]])) };
+  } catch (err) {
+    if (err instanceof DomainRefusal || err instanceof DomainUnavailable) return world;
+    throw err;
+  }
+}
+
+/** The screen of every pending action, for those who may edit them. */
+async function scheduledView(client: HostClient, scene: Scene): Promise<Response> {
+  const sched = schedulingAggregate();
+  if (!sched) return scene.show(notFound("Nothing is scheduled here."), 404);
+  if (!mayEdit(sched, scene.role)) return scene.show(notFound("Scheduled actions are not open to your role.", "Not open to your role"), 403);
+  return scene.show(scheduledPage(await worldFor(client, await client.read(), scene.role)));
+}
+
+async function detail(client: HostClient, agg: Aggregate, id: string, shown: Submitted | null, scene: Scene, status = 200): Promise<Response> {
+  const answer = await client.read();
+  const values = instanceIn(client, answer, agg, id);
+  if (!values) return scene.show(notFound(`No ${agg.name} ${id}.`), 404);
+  const command = agg.commands.find((candidate) => candidate.name === shown?.command);
+  const world = await worldFor(client, answer, scene.role, { agg, id });
+  return scene.show(detailPage(agg, id, values, shown, world), status, shown && command ? refused(agg, command) : undefined);
+}
+
+/** The page of a command that acts on one instance, when that instance is in a state it applies to. */
+async function instanceView(client: HostClient, agg: Aggregate, id: string, name: string, url: URL, scene: Scene): Promise<Response> {
   const values = instanceIn(client, await client.read(), agg, id);
-  if (!values) return html(notFound(`No ${agg.name} ${id}.`), 404);
-  return html(detailPage(agg, id, values, shown), status);
+  if (!values) return scene.show(notFound(`No ${agg.name} ${id}.`), 404);
+  const command = commandFor(agg, "id", name);
+  if (!command || !available(agg, command, values)) return scene.show(notFound(`${name} does not apply to ${id} now.`), 404);
+  const choices = await choicesFor(client, agg, command.attributes);
+  return scene.show(instanceCommandPage(agg, id, command, values, null, choices, backOf(url.searchParams.get("_back"))));
 }
 
-function commandView(agg: Aggregate, verb: string, name: string): Response {
+/** A command's page; a link may fill its inputs from the address and name the page to return to. */
+async function commandView(client: HostClient, agg: Aggregate, verb: string, name: string, url: URL, scene: Scene): Promise<Response> {
   const command = commandFor(agg, verb, name);
-  if (!command) return html(notFound(`No command ${name}.`), 404);
-  return html(commandPage(agg, command, href(agg.name, verb, name), null));
+  if (!command) return scene.show(notFound(`No command ${name}.`), 404);
+  const state = commandArguments(agg, command.attributes, parseForm(url.search.slice(1)));
+  const back = backOf(url.searchParams.get("_back"));
+  return scene.show(commandPage(agg, command, href(...at(agg), verb, name), null, await choicesFor(client, agg, command.attributes), { state, back }));
 }
 
 /** The command a `new` (creating) or `run` (acting on another aggregate) path names, or null. */
@@ -161,16 +310,61 @@ function commandFor(agg: Aggregate, verb: string, name: string): Command | null
   return command.on === agg.name ? command : null;
 }
 
-async function post(client: HostClient, request: Request, agg: Aggregate, verb: string, rest: string[]): Promise<Response> {
+/** What a form is refused for before the command is sent: a key a picker names that is not there. */
+async function unchecked(client: HostClient, agg: Aggregate, command: Command, args: State): Promise<{ ok: false; message: string; field: string } | null> {
+  const problem = await unknownKey(client, agg, command.attributes, args);
+  return problem ? { ok: false, message: problem.message, field: problem.field } : null;
+}
+
+/** The scheduled-action record the editor makes itself: a creating command gets an identity nobody typed. */
+function withMadeIdentity(agg: Aggregate, command: Command, args: State): State {
+  const spec = SCHEMA.scheduling;
+  if (!spec?.generated || !command.creates || command.name !== spec.schedule || agg.name !== spec.aggregate || agg.chapter !== spec.chapter) return args;
+  const identity = agg.attributes.find((attr) => attr.name === agg.identity);
+  return identity ? { ...args, [identity.name]: plainValue(agg, identity, randomUUID()) } : args;
+}
+
+/**
+ * A draft saved by the page's script while the person writes. It is answered in plain text, never
+ * with a redirect or a notice, and it only ever runs the aggregate's draft-saving command, so the
+ * live attribute is never written from here.
+ */
+async function autosave(client: HostClient, agg: Aggregate, command: Command, args: State, to: string | undefined): Promise<Response> {
+  if (!to || agg.drafts?.save !== command.name) return plain("Only a draft can be saved this way.", 400);
+  const outcome = (await unchecked(client, agg, command, args)) ?? (await runCommand(client, agg, command, args, to));
+  if (outcome.ok) return plain("Saved.", 200);
+  const refused = plain(outcome.message, 422);
+  if ("problems" in outcome && outcome.problems?.length) refused.headers.set("x-editor-problems", encodeURIComponent(JSON.stringify(outcome.problems)));
+  return refused;
+}
+
+/** Where a command that worked leads: the page the person came from, another blank form, or the instance. */
+function afterwards(agg: Aggregate, command: Command, again: boolean, id: string, back: Back | null): string {
+  if (back) return back.path;
+  return command.creates && again ? href(...at(agg), "new", command.name) : href(...at(agg), "id", id);
+}
+
+async function post(client: HostClient, request: Request, agg: Aggregate, verb: string, rest: string[], scene: Scene): Promise<Response> {
   const onInstance = verb === "id" && rest.length === 2;
   const command = onInstance ? commandFor(agg, "id", rest[1]) : rest.length === 1 ? commandFor(agg, verb, rest[0]) : null;
-  if (!command) return html(notFound("No such command."), 404);
+  if (!command) return scene.show(notFound("No such command."), 404);
   const form = parseForm(await request.text());
-  const args = commandArguments(agg, command.attributes, form);
+  const args = withMadeIdentity(agg, command, commandArguments(agg, command.attributes, form, command.empty));
   const to = onInstance ? rest[0] : command.creates ? undefined : (form.get("__to") ?? "");
-  const outcome = to === "" ? { ok: false as const, message: "Name the instance to act on." } : await runCommand(client, agg, command, args, to);
-  if (outcome.ok) return redirect(href(agg.name, "id", outcome.id));
-  const shown: Submitted = { command: command.name, message: outcome.message, values: { ...args, __to: to } };
-  if (onInstance) return detail(client, agg, rest[0], shown, 422);
-  return html(commandPage(agg, command, href(agg.name, verb, command.name), shown), 422);
+  if (request.headers.get("x-editor-autosave") === "1") return autosave(client, agg, command, args, to);
+  const outcome = to === "" ? { ok: false as const, message: "Name the instance to act on." } : ((await unchecked(client, agg, command, args)) ?? (await runCommand(client, agg, command, args, to)));
+  const back = backOf(form.get("__back"));
+  if (outcome.ok) return scene.sent(afterwards(agg, command, form.get("__again") === "1", outcome.id, back), done(agg, command));
+  const shown: Submitted = { command: command.name, message: outcome.message, values: { ...args, __to: to }, field: outcome.field, problems: "problems" in outcome ? outcome.problems : undefined };
+  if (onInstance) return refusedOnInstance(client, agg, rest[0], command, shown, scene, back);
+  const choices = await choicesFor(client, agg, command.attributes);
+  return scene.show(commandPage(agg, command, href(...at(agg), verb, command.name), shown, choices, { back }), 422, refused(agg, command));
+}
+
+/** The refusal of a command run on one instance: shown on its form, or on the page it was run from. */
+async function refusedOnInstance(client: HostClient, agg: Aggregate, id: string, command: Command, shown: Submitted, scene: Scene, back: Back | null): Promise<Response> {
+  if (!needsPage(command)) return detail(client, agg, id, shown, scene, 422);
+  const values = instanceIn(client, await client.read(), agg, id);
+  if (!values) return scene.show(notFound(`No ${agg.name} ${id}.`), 404);
+  return scene.show(instanceCommandPage(agg, id, command, values, shown, await choicesFor(client, agg, command.attributes), back), 422, refused(agg, command));
 }

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

@@ -0,0 +1,98 @@
+__BANNER__
+
+// The editor's static files, for a signed-in editor only: its theme script (read from `src/ui/`),
+// the stylesheet and script `npm run build` writes to `dist/`, and the Editor row's logo.
+//
+// Every file is sent with an ETag made from its bytes. A page asks for it as `name?v=<version>`
+// where the version is the same hash, so a changed file has a new address and a request that names
+// the current version may be kept for a year (`immutable`); any other request is revalidated and
+// answered 304 when nothing changed. Files are `private`: they are behind the session, and a
+// shared cache must not hold them for someone who has not signed in.
+import { createHash } from "node:crypto";
+import { existsSync, readFileSync, statSync } from "node:fs";
+import { extname } from "node:path";
+
+import { EDITOR } from "./config.ts";
+
+const SOURCE = new URL("./ui/", import.meta.url);
+const DIST = new URL("../dist/", import.meta.url);
+
+/** The files read from `src/ui/`; everything else comes from `dist/`. */
+const SOURCES = ["theme.js"];
+
+/** A built file's name: plain characters and a `.js` or `.css` ending, so no path leaves `dist/`. */
+const BUILT = /^[A-Za-z0-9][A-Za-z0-9._-]*\.(js|css)$/;
+
+const TYPES: Record<string, string> = {
+  js: "text/javascript; charset=utf-8",
+  css: "text/css; charset=utf-8",
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  webp: "image/webp",
+  gif: "image/gif",
+  avif: "image/avif",
+  svg: "image/svg+xml",
+};
+
+interface Held {
+  bytes: Buffer;
+  type: string;
+  version: string;
+  stamp: number;
+}
+
+const held = new Map<string, Held>();
+
+function locate(name: string): URL | null {
+  if (SOURCES.includes(name)) return new URL(name, SOURCE);
+  if (!BUILT.test(name)) return null;
+  const built = new URL(name, DIST);
+  return existsSync(built) ? built : null;
+}
+
+function load(name: string): Held | null {
+  const where = name === "logo" ? logoPath() : locate(name);
+  if (!where || !existsSync(where)) return null;
+  const stamp = statSync(where).mtimeMs;
+  const known = held.get(name);
+  if (known && known.stamp === stamp) return known;
+  const bytes = readFileSync(where);
+  const type = TYPES[extname(String(where)).slice(1).toLowerCase()] ?? "application/octet-stream";
+  const made = { bytes, type, version: createHash("sha256").update(bytes).digest("hex").slice(0, 12), stamp };
+  held.set(name, made);
+  return made;
+}
+
+/** Where the row's logo is kept: a path from the server's working directory, or null when none is named. */
+function logoPath(): string | null {
+  return EDITOR.logo === "" ? null : EDITOR.logo;
+}
+
+/** Whether `npm run build` has written the stylesheet and the script. */
+export const isBuilt = (): boolean => existsSync(new URL("editor.css", DIST)) && existsSync(new URL("editor.js", DIST));
+
+/** Whether the row names a logo that is there to be shown. */
+export const hasLogo = (): boolean => load("logo") !== null;
+
+/** The address of a file, with the version that makes it cacheable for good. */
+export function assetUrl(name: string): string {
+  const version = load(name)?.version;
+  return `${EDITOR.basePath}/assets/${name}${version ? `?v=${version}` : ""}`;
+}
+
+/** Answers a request for one asset: the bytes, a 304 when the browser holds them, or a 404. */
+export function serveAsset(name: string, request: Request): Response {
+  const file = load(name);
+  if (!file) return new Response("Not found.", { status: 404, headers: { "Content-Type": "text/plain" } });
+  const etag = `"${file.version}"`;
+  const headers = new Headers({
+    "Content-Type": file.type,
+    ETag: etag,
+    "X-Content-Type-Options": "nosniff",
+    "Cache-Control": new URL(request.url).searchParams.get("v") === file.version ? "private, max-age=31536000, immutable" : "private, no-cache",
+  });
+  if (name === "logo") headers.set("Content-Security-Policy", "sandbox");
+  if (request.headers.get("if-none-match") === etag) return new Response(null, { status: 304, headers });
+  return new Response(new Uint8Array(file.bytes), { headers });
+}

data/lib/hecks/projections/site/cms_editor/templates/src/auth/membership.ts.tmpl

@@ -24,6 +24,8 @@ export function authSecret(): string {
 export interface Membership {
   /** True while `email` holds an editor role on the host; false when it does not, or cannot be asked. */
   isAdmitted(email: string): Promise<boolean>;
+  /** The role `email` holds, for the header to show; null when it holds none. Answered from the same memory. */
+  roleOf?(email: string): Promise<string | null>;
 }
 
 export interface MembershipOptions {
@@ -33,47 +35,53 @@ export interface MembershipOptions {
   now?: () => number;
 }
 
-/** True when the host's members list holds `email` with an editor role and not disabled. */
-export function holdsRole(rows: unknown, email: string): boolean {
+/** The editor role the host's members list gives `email`, or null when it holds none or is disabled. */
+export function roleHeld(rows: unknown, email: string): string | null {
   const roles: readonly string[] = EDITOR.roles;
-  return (
-    Array.isArray(rows) &&
-    rows.some(
-      (row: any) =>
-        typeof row?.email === "string" && row.email.trim().toLowerCase() === email && roles.includes(row.role) && row.disabled !== true,
-    )
-  );
+  const row = Array.isArray(rows)
+    ? rows.find(
+        (candidate: any) =>
+          typeof candidate?.email === "string" &&
+          candidate.email.trim().toLowerCase() === email &&
+          roles.includes(candidate.role) &&
+          candidate.disabled !== true,
+      )
+    : undefined;
+  return row ? String(row.role) : null;
 }
 
+/** True when the host's members list holds `email` with an editor role and not disabled. */
+export const holdsRole = (rows: unknown, email: string): boolean => roleHeld(rows, email) !== null;
+
 /** A membership check with its own one-minute memory. */
 export function membershipCheck(options: MembershipOptions = {}): Membership {
-  const remembered = new Map<string, { admitted: boolean; until: number }>();
+  const remembered = new Map<string, { role: string | null; until: number }>();
   const now = options.now ?? Date.now;
   const send = options.fetch ?? fetch;
 
-  async function ask(email: string): Promise<boolean> {
+  async function ask(email: string): Promise<string | null> {
     const secret = options.secret ?? authSecret();
-    if (!secret) return false;
+    if (!secret) return null;
     const cookieName = resolveAccountCookieName(process.env.HECKS_SESSION_COOKIE || EDITOR.hostCookie);
     try {
       const res = await send(`${hostUrl({ url: options.url })}${EDITOR.membersPath}`, {
         headers: { Cookie: `${cookieName}=${accountToken(secret, email, TOKEN_TTL_SECONDS)}` },
         signal: AbortSignal.timeout(EDITOR.timeoutMs),
       });
-      return res.ok && holdsRole(await res.json().catch(() => null), email);
+      return res.ok ? roleHeld(await res.json().catch(() => null), email) : null;
     } catch {
-      return false;
+      return null;
     }
   }
 
-  return {
-    async isAdmitted(email: string): Promise<boolean> {
-      const key = email.trim().toLowerCase();
-      const hit = remembered.get(key);
-      if (hit && hit.until > now()) return hit.admitted;
-      const admitted = await ask(key);
-      remembered.set(key, { admitted, until: now() + EDITOR.rememberMs });
-      return admitted;
-    },
-  };
+  async function roleOf(email: string): Promise<string | null> {
+    const key = email.trim().toLowerCase();
+    const hit = remembered.get(key);
+    if (hit && hit.until > now()) return hit.role;
+    const role = await ask(key);
+    remembered.set(key, { role, until: now() + EDITOR.rememberMs });
+    return role;
+  }
+
+  return { roleOf, isAdmitted: async (email: string): Promise<boolean> => (await roleOf(email)) !== null };
 }