hecks 3.9.1 → 3.11.0

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

@@ -0,0 +1,320 @@
+__BANNER__
+
+// HTML read back into the domain's body tree, with no DOM: a small tokenizer and tree, so the same
+// function runs in node (tests, the server) and in the browser (the widget, a paste). What the body
+// cannot hold is reduced to the nearest block or mark it can, and every reduction adds a note, so a
+// paste never loses anything without saying so. Output is deterministic: the same HTML gives the
+// same tree, with adjacent spans of the same marks merged and empty ones dropped.
+import { ALIGNS, MARKS, MAX_DEPTH, MAX_INDENT, safeHref } from "./body_model.js";
+
+const VOID = new Set(["br", "hr", "img", "input", "meta", "link", "wbr", "col", "area", "base", "source"]);
+const SKIPPED = new Set(["script", "style", "head", "title", "template", "noscript", "iframe", "object", "embed", "svg", "math"]);
+const TRANSPARENT = new Set(["html", "body", "span", "font", "main", "article", "section", "header", "footer", "nav", "aside", "tbody", "thead", "tfoot", "center", "label", "abbr", "cite", "q", "small", "big", "time", "wbr"]);
+const MARK_TAGS = { strong: "bold", b: "bold", em: "italic", i: "italic", u: "underline", ins: "underline", s: "strike", strike: "strike", del: "strike", code: "code", tt: "code", kbd: "code", samp: "code" };
+const BLOCKISH = new Set(["p", "div", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "blockquote", "hr", "figure", "pre", "table", "tr", "td", "th", "dl", "dt", "dd", "details", "summary", "form", "fieldset"]);
+const ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: " ", hellip: "…", mdash: "—", ndash: "–", lsquo: "‘", rsquo: "’", ldquo: "“", rdquo: "”", copy: "©", middot: "·", bull: "•" };
+const LIMIT = 100;
+
+function decode(text) {
+  return text.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (whole, name) => {
+    if (name[0] !== "#") return ENTITIES[name.toLowerCase()] ?? whole;
+    const code = name[1].toLowerCase() === "x" ? parseInt(name.slice(2), 16) : parseInt(name.slice(1), 10);
+    if (!(code > 0 && code <= 0x10ffff) || (code >= 0xd800 && code < 0xe000)) return "�";
+    return code === 160 ? " " : String.fromCodePoint(code);
+  });
+}
+
+function attributesOf(source) {
+  const found = {};
+  for (const m of source.matchAll(/([^\s"'<>\/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g)) {
+    const name = m[1].toLowerCase();
+    if (!(name in found)) found[name] = decode(m[2] ?? m[3] ?? m[4] ?? "");
+  }
+  return found;
+}
+
+/** The tokens of `html`: text, open tags (with attributes) and close tags. Comments are dropped. */
+function tokenize(html) {
+  const tokens = [];
+  const pattern = /<!--[\s\S]*?(?:-->|$)|<![^>]*>|<\?[^>]*>|<\/([a-z][a-z0-9-]*)[^>]*>|<([a-z][a-z0-9-]*)((?:"[^"]*"|'[^']*'|[^>"'])*)>/gi;
+  let at = 0;
+  let m;
+  while ((m = pattern.exec(html)) !== null) {
+    if (m.index > at) tokens.push({ text: html.slice(at, m.index) });
+    at = m.index + m[0].length;
+    if (m[1]) tokens.push({ close: m[1].toLowerCase() });
+    else if (m[2]) tokens.push({ open: m[2].toLowerCase(), attrs: attributesOf(m[3]) });
+    if (m[2] && /^(script|style|textarea)$/i.test(m[2])) {
+      at = skipRaw(html, at, m[2].toLowerCase(), tokens);
+      pattern.lastIndex = at;
+    }
+  }
+  if (at < html.length) tokens.push({ text: html.slice(at) });
+  return tokens;
+}
+
+function skipRaw(html, from, tag, tokens) {
+  const end = new RegExp(`</${tag}[^>]*>`, "i").exec(html.slice(from));
+  tokens.push({ close: tag });
+  return end ? from + end.index + end[0].length : html.length;
+}
+
+const closesLi = (stack) => {
+  for (let i = stack.length - 1; i >= 0; i -= 1) {
+    if (stack[i].tag === "li") return i;
+    if (stack[i].tag === "ul" || stack[i].tag === "ol") return -1;
+  }
+  return -1;
+};
+
+/** The nodes of `html` as a tree of `{ tag, attrs, kids }` and `{ text }`. */
+function parseTree(html) {
+  const root = { tag: "#root", attrs: {}, kids: [] };
+  const stack = [root];
+  const ignored = {};
+  const top = () => stack[stack.length - 1];
+  for (const token of tokenize(html)) {
+    if ("text" in token) top().kids.push({ text: token.text });
+    else if (token.open) open(token, stack, ignored, top);
+    else close(token.close, stack, ignored);
+  }
+  return root.kids;
+}
+
+function open(token, stack, ignored, top) {
+  const tag = token.open;
+  if (tag === "li" && closesLi(stack) > 0) stack.length = closesLi(stack);
+  if (BLOCKISH.has(tag) && top().tag === "p") stack.pop();
+  const node = { tag, attrs: token.attrs, kids: [] };
+  if (stack.length > LIMIT) {
+    if (!VOID.has(tag)) ignored[tag] = (ignored[tag] ?? 0) + 1;
+    return;
+  }
+  top().kids.push(node);
+  if (!VOID.has(tag)) stack.push(node);
+}
+
+function close(tag, stack, ignored) {
+  if (ignored[tag] > 0) {
+    ignored[tag] -= 1;
+    return;
+  }
+  for (let i = stack.length - 1; i > 0; i -= 1) {
+    if (stack[i].tag === tag) {
+      stack.length = i;
+      return;
+    }
+  }
+}
+
+function styleOf(attrs) {
+  const style = {};
+  for (const part of String(attrs.style ?? "").split(";")) {
+    const [name, ...value] = part.split(":");
+    if (name && value.length) style[name.trim().toLowerCase()] = value.join(":").trim().toLowerCase();
+  }
+  return style;
+}
+
+const STYLE_MARKS = (style) => {
+  const found = [];
+  const weight = style["font-weight"];
+  if (weight === "bold" || weight === "bolder" || Number(weight) >= 600) found.push("bold");
+  if (style["font-style"] === "italic") found.push("italic");
+  const line = `${style["text-decoration"] ?? ""} ${style["text-decoration-line"] ?? ""}`;
+  if (line.includes("underline")) found.push("underline");
+  if (line.includes("line-through")) found.push("strike");
+  return found;
+};
+
+const STYLE_QUIET = new Set(["font-weight", "font-style", "text-decoration", "text-decoration-line", "text-align", "white-space", "margin-left", "padding-left"]);
+
+function noteStyle(style, ctx) {
+  if (Object.keys(style).some((name) => !STYLE_QUIET.has(name))) ctx.note("inline styles other than bold, italic, underline, strike-through and alignment were dropped");
+}
+
+function alignOf(attrs, style) {
+  const value = String(attrs["data-align"] ?? attrs.align ?? style["text-align"] ?? "").toLowerCase();
+  return ALIGNS.includes(value) ? value : undefined;
+}
+
+function indentOf(attrs) {
+  const value = Number(attrs["data-indent"]);
+  return attrs["data-indent"] !== undefined && Number.isInteger(value) ? Math.min(MAX_INDENT, Math.max(0, value)) : undefined;
+}
+
+function layoutOf(attrs) {
+  const style = styleOf(attrs);
+  const layout = {};
+  const align = alignOf(attrs, style);
+  const indent = indentOf(attrs);
+  if (align !== undefined) layout.align = align;
+  if (indent !== undefined) layout.indent = indent;
+  return layout;
+}
+
+const textOf = (nodes) => nodes.map((node) => ("text" in node ? decode(node.text) : textOf(node.kids))).join("");
+
+/** Spans from inline nodes; `state` carries the marks and the address in force. */
+function inline(nodes, state, ctx, out) {
+  for (const node of nodes) {
+    if ("text" in node) pushText(decode(node.text), state, out);
+    else inlineElement(node, state, ctx, out);
+  }
+}
+
+function pushText(raw, state, out) {
+  const text = raw.replace(/[ \t]*[\r\n\t][ \t\r\n]*/g, " ");
+  if (text !== "") out.push({ text, marks: state.marks.map((name) => ({ name })), ...(state.href ? { href: state.href } : {}) });
+}
+
+function inlineElement(node, state, ctx, out) {
+  const tag = node.tag;
+  if (SKIPPED.has(tag)) return ctx.note(`<${tag}> content was removed`);
+  if (tag === "br") return out.push({ text: "\n", marks: state.marks.map((name) => ({ name })), ...(state.href ? { href: state.href } : {}) });
+  if (tag === "img") return ctx.note("an image with no media key was reduced to its alt text"), pushText(node.attrs.alt ?? "", state, out);
+  const style = styleOf(node.attrs);
+  noteStyle(style, ctx);
+  const added = [MARK_TAGS[tag], ...STYLE_MARKS(style)].filter(Boolean);
+  const href = tag === "a" ? linkOf(node.attrs.href, ctx) : undefined;
+  const next = { marks: [...state.marks, ...added.filter((name) => !state.marks.includes(name))], href: href ?? state.href };
+  if (!MARK_TAGS[tag] && tag !== "a" && !TRANSPARENT.has(tag)) ctx.note(`<${tag}> formatting was reduced to plain text`);
+  inline(node.kids, next, ctx, out);
+}
+
+function linkOf(value, ctx) {
+  if (value === undefined) return undefined;
+  const href = safeHref(value);
+  if (!href) ctx.note("a link to an address that is not a path, http(s), mailto or tel was reduced to text");
+  return href ?? undefined;
+}
+
+/** Adjacent spans with the same marks and address become one; empty text is dropped. */
+function merged(spans) {
+  const out = [];
+  for (const span of spans) {
+    const last = out[out.length - 1];
+    const same = last && last.text !== "\n" && span.text !== "\n" && last.href === span.href && JSON.stringify(last.marks) === JSON.stringify(span.marks);
+    if (same) last.text += span.text;
+    else if (span.text !== "") out.push({ ...span, marks: span.marks.map((mark) => ({ ...mark })) });
+  }
+  return out;
+}
+
+function spansOf(nodes, ctx, state = { marks: [], href: undefined }) {
+  const out = [];
+  inline(nodes, state, ctx, out);
+  const only = out.length === 1 && out[0].text === "\n";
+  return only ? [] : merged(out);
+}
+
+function stateOf(node, ctx) {
+  const style = styleOf(node.attrs);
+  noteStyle(style, ctx);
+  return { marks: STYLE_MARKS(style), href: undefined };
+}
+
+const block = (kind, layout, spans, level) => ({ kind, ...(level ? { level } : {}), ...layout, spans });
+
+function headingLevel(tag, ctx) {
+  const level = Number(tag[1]);
+  if (level > 4) ctx.note(`<${tag}> was reduced to a level 4 heading`);
+  return Math.min(4, level);
+}
+
+function figure(node, ctx) {
+  const attrs = node.attrs;
+  const kids = node.kids.filter((kid) => kid.tag === "figcaption");
+  const caption = attrs["data-caption"] ?? (kids.length ? textOf(kids[0].kids).trim() : "");
+  const made = { kind: "image" };
+  for (const [key, source] of [["media_ref", "data-media-ref"], ["alt", "data-alt"]]) if (attrs[source]) made[key] = attrs[source];
+  if (caption) made.caption = caption;
+  if (made.media_ref) return [made];
+  ctx.note("an image with no media key was reduced to its caption");
+  return caption ? [block("paragraph", {}, spansOf([{ text: caption }], ctx))] : [];
+}
+
+function listBlock(node, ctx) {
+  const kind = node.tag === "ol" ? "numbered_list" : "bullet_list";
+  const items = [];
+  collectItems(node, kind, 0, items, ctx);
+  return [{ kind, ...layoutOf(node.attrs), items }];
+}
+
+function collectItems(list, blockKind, depth, items, ctx) {
+  const own = list.tag === "ol" ? "numbered_list" : "bullet_list";
+  for (const child of list.kids) {
+    if (child.tag === "li") itemOf(child, own, blockKind, depth, items, ctx);
+    else if (child.tag === "ul" || child.tag === "ol") collectItems(child, blockKind, Math.min(depth + 1, MAX_DEPTH), items, ctx);
+    else if (child.tag && !("text" in child)) collectItems({ ...child, tag: own }, blockKind, depth, items, ctx);
+  }
+}
+
+function itemOf(li, own, blockKind, depth, items, ctx) {
+  const nested = li.kids.filter((kid) => kid.tag === "ul" || kid.tag === "ol");
+  const here = li.kids.filter((kid) => !nested.includes(kid));
+  const marked = Number(li.attrs["data-depth"]);
+  const level = li.attrs["data-depth"] !== undefined && Number.isInteger(marked) ? Math.min(MAX_DEPTH, Math.max(0, marked)) : depth;
+  const given = li.attrs["data-list-kind"];
+  const kind = given === "bullet_list" || given === "numbered_list" ? given : own !== blockKind ? own : undefined;
+  if (depth > MAX_DEPTH) ctx.note(`a list nested deeper than ${MAX_DEPTH} levels was kept at depth ${MAX_DEPTH}`);
+  items.push({ spans: spansOf(here, ctx), depth: level, ...(kind ? { list_kind: kind } : {}) });
+  for (const list of nested) collectItems(list, blockKind, Math.min(level + 1, MAX_DEPTH), items, ctx);
+}
+
+/** Blocks from block-level nodes; loose inline content between blocks becomes paragraphs. */
+function blocks(nodes, ctx, quote = false) {
+  const out = [];
+  let run = [];
+  const flush = () => {
+    const spans = spansOf(run, ctx);
+    const blank = spans.every((span) => span.text.trim() === "" && span.text !== "\n");
+    if (!blank) out.push(block(quote ? "quote" : "paragraph", {}, spans));
+    run = [];
+  };
+  for (const node of nodes) {
+    if ("text" in node || !isBlock(node)) run.push(node);
+    else {
+      flush();
+      out.push(...blockOf(node, ctx, quote));
+    }
+  }
+  flush();
+  return out;
+}
+
+const isBlock = (node) => BLOCKISH.has(node.tag) || node.tag === "figcaption" ;
+
+function blockOf(node, ctx, quote) {
+  const tag = node.tag;
+  if (tag === "hr") return [{ kind: "divider" }];
+  if (tag === "figure") return figure(node, ctx);
+  if (tag === "ul" || tag === "ol") return listBlock(node, ctx);
+  if (tag === "blockquote") return blocks(node.kids, ctx, true);
+  if (/^h[1-6]$/.test(tag)) return [block("heading", layoutOf(node.attrs), spansOf(node.kids, ctx, stateOf(node, ctx)), headingLevel(tag, ctx))];
+  if (tag === "pre") return preformatted(node, ctx);
+  if (tag === "p" || tag === "li" || tag === "dt" || tag === "dd") return [block(quote ? "quote" : "paragraph", layoutOf(node.attrs), spansOf(node.kids, ctx, stateOf(node, ctx)))];
+  if (tag === "div" && !node.kids.some((kid) => kid.tag && isBlock(kid))) return [block(quote ? "quote" : "paragraph", layoutOf(node.attrs), spansOf(node.kids, ctx, stateOf(node, ctx)))];
+  if (tag === "table" || tag === "tr" || tag === "td" || tag === "th") ctx.note("a table was reduced to paragraphs");
+  return blocks(node.kids, ctx, quote);
+}
+
+function preformatted(node, ctx) {
+  ctx.note("preformatted text was reduced to a paragraph in code");
+  const lines = textOf(node.kids).replace(/\r/g, "").split("\n");
+  const spans = lines.flatMap((line, at) => [...(at > 0 ? [{ text: "\n", marks: [] }] : []), ...(line ? [{ text: line, marks: [{ name: "code" }] }] : [])]);
+  return [block("paragraph", {}, spans)];
+}
+
+/** The body for `html`, with the notes naming whatever was reduced to fit. */
+export function htmlToBodyWithNotes(html) {
+  const notes = [];
+  const ctx = { note: (message) => { if (!notes.includes(message)) notes.push(message); } };
+  const tree = parseTree(String(html ?? ""));
+  return { body: { blocks: blocks(tree, ctx) }, notes };
+}
+
+/** The body for `html`; anything the body cannot hold is reduced to the nearest block or mark. */
+export function htmlToBody(html) {
+  return htmlToBodyWithNotes(html).body;
+}

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

@@ -0,0 +1,88 @@
+__BANNER__
+
+// One instance: its values as a single document column, and beside it a margin panel with its
+// lifecycle state and the commands that apply now. Values are shown by shape (a value object as its
+// parts, a list of value objects as a small table, a rich-text body as typeset text). A command that
+// asks for nothing and is safe runs from a button; one that asks for input opens its own page; one
+// that is destructive asks first, in a native dialog (the page of the command is the same question
+// for a browser with no script).
+import { at } from "../names.ts";
+import type { Aggregate, Command } from "../schema.ts";
+import { available, needsPage } from "./availability.ts";
+import type { Problem } from "./blocks.ts";
+import { confirmDialog, dialogId } from "./dialogs.ts";
+import { copyButton, esc, href, refusal, statusBadge } from "./html.ts";
+import { relatedPanels } from "./related.ts";
+import { schedulePanel } from "./schedule.ts";
+import type { Tools } from "./preview.ts";
+import { valueRows } from "./values.ts";
+import type { World } from "./world.ts";
+import { commandLabel, label, singular } from "./words.ts";
+
+export { available, needsPage };
+
+type State = Record<string, unknown>;
+
+/** What a submitted command left behind: the refusal to show, and the values to put back. */
+export interface Submitted {
+  command: string;
+  message: string | null;
+  values: State;
+  /** The attribute the refusal names, when it names one. */
+  field?: string;
+  /** The blocks of a list of mixed blocks the refusal is about (see blocks.ts). */
+  problems?: Problem[];
+}
+
+function action(agg: Aggregate, id: string, command: Command, first: boolean): string {
+  const to = href(...at(agg), "id", id, command.name);
+  const text = esc(commandLabel(agg, command));
+  const tone = command.destructive ? "btn btn-error btn-outline lg:w-full" : first ? "btn btn-neutral lg:w-full" : "btn lg:w-full";
+  if (!needsPage(command)) return `<form method="post" action="${esc(to)}"><button type="submit" class="${tone}">${text}</button></form>`;
+  const confirm = command.destructive && command.attributes.length === 0 ? ` data-confirm="${dialogId(command)}"` : "";
+  return `<a class="${tone}" href="${esc(to)}"${confirm}>${text}</a>`;
+}
+
+function dialogs(agg: Aggregate, id: string, commands: Command[]): string {
+  return commands
+    .filter((command) => command.destructive && command.attributes.length === 0)
+    .map((command) => confirmDialog(agg, command, href(...at(agg), "id", id, command.name), id))
+    .join("\n");
+}
+
+function panel(agg: Aggregate, id: string, values: State, commands: Command[]): string {
+  const status = agg.lifecycle ? `<div class="lg:pb-5"><h2 class="mb-2 text-sm">Status</h2><p>${statusBadge(agg, values[agg.lifecycle.field])}</p></div>` : "";
+  const rule = agg.lifecycle ? "lg:border-t lg:border-base-300 lg:pt-5" : "";
+  const buttons = commands.map((command, at) => action(agg, id, command, at === 0));
+  const list = commands.length === 0 ? `<p class="text-muted">Nothing to do with this ${esc(singular(agg.name))} right now.</p>` : `<div class="flex flex-wrap gap-2 lg:grid">${buttons.join("\n")}</div>`;
+  return `<aside class="order-first flex flex-wrap items-start gap-x-8 gap-y-4 border-b border-base-300 pb-5 lg:sticky lg:top-20 lg:order-none lg:block lg:border-b-0 lg:pb-0" aria-label="Status and actions">${status}<div class="${rule}"><h2 class="mb-2 text-sm">Actions</h2>${list}</div></aside>`;
+}
+
+/** The badge that says an edit is saved and not put live yet, when the aggregate keeps one beside its live content. */
+function unpublished(agg: Aggregate, values: State): string {
+  const held = agg.drafts ? values[agg.drafts.attribute] : undefined;
+  const saved = held !== undefined && held !== null && !(Array.isArray(held) && held.length === 0);
+  return saved ? `<p class="mt-2"><span class="badge badge-soft badge-info">Changes not published yet</span></p>` : "";
+}
+
+/** One instance: its values, its status, a button for each command that applies to it now, and the records and actions that go with it. */
+export function detailPage(agg: Aggregate, id: string, values: State, shown: Submitted | null, world: World, preview: Tools): string {
+  const commands = agg.commands.filter((command) => command.on === agg.name && available(agg, command, values));
+  const here = href(...at(agg), "id", id);
+  const panels = [relatedPanels(agg, id, world, here), schedulePanel(agg, id, world, here)].filter((html) => html !== "");
+  return `<div class="mb-6 flex flex-wrap items-start justify-between gap-3">
+<div><h1 class="flex items-center gap-2 break-all text-3xl">${esc(id)}${copyButton(id, "id")}</h1><p class="mt-1 text-muted">${esc(label(agg.name))}</p>${unpublished(agg, values)}</div>
+${preview.button}
+</div>
+${refusal(shown?.message ?? null)}
+<div class="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_16rem]">
+<div class="grid min-w-0 gap-6">
+<section class="min-w-0 border border-base-300 bg-base-100 px-4 sm:px-6" aria-label="${esc(label(agg.name))}">
+${valueRows(agg, agg.attributes, values)}
+</section>
+${panels.join("\n")}
+</div>
+${panel(agg, id, values, commands)}
+</div>
+${dialogs(agg, id, commands)}`;
+}

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

@@ -0,0 +1,43 @@
+__BANNER__
+
+// The question a command asks before it runs, as a native `<dialog>`: a destructive command (cancel,
+// discard, withdraw) and a command that publishes. The button that asks carries `data-confirm` with
+// the dialog's id; the page's script opens it, and a browser with no script follows the button's link
+// to a page that asks the same question.
+import type { Aggregate, Command } from "../schema.ts";
+import { esc } from "./html.ts";
+import { backInput } from "./links.ts";
+import type { Back } from "./links.ts";
+import { commandLabel } from "./words.ts";
+
+/** What makes one dialog differ from another on a page that holds several. */
+export interface Asking {
+  /** Told apart when one command is asked about on several rows. */
+  suffix?: string;
+  /** Where a person is sent once the command has run. */
+  back?: Back | null;
+  /** The button's colour: `error` for something that cannot be undone, `neutral` for the rest. */
+  tone?: "error" | "neutral";
+  /** The words for the button, when they are not the command's own. */
+  button?: string;
+  /** Whether a draft still being written is saved first (see browser/autosave.js). */
+  flush?: boolean;
+}
+
+/** The id of a command's dialog, with the suffix that tells rows apart. */
+export const dialogId = (command: Command, suffix = ""): string => `confirm-${command.name}${suffix ? `-${suffix}` : ""}`;
+
+/** The question a command asks, as a native dialog that posts to `action` when confirmed. */
+export function confirmDialog(agg: Aggregate, command: Command, action: string, id: string, form?: string, asking: Asking = {}): string {
+  const dialog = dialogId(command, asking.suffix);
+  const what = esc(asking.button ?? commandLabel(agg, command));
+  const detail = command.goal ? `${esc(command.goal)}.` : `This applies to ${esc(id)}.`;
+  const owner = form ? ` form="${esc(form)}"` : "";
+  const tone = asking.tone === "neutral" ? "btn btn-neutral" : "btn btn-error";
+  const head = `<h2 id="${dialog}-title" class="text-xl">${what}?</h2>\n<p class="mt-2 text-muted">${detail}</p>`;
+  const dismiss = what === "Cancel" ? "Go back" : "Cancel";
+  const buttons = `<div class="modal-action"><button type="submit" class="btn btn-ghost" formmethod="dialog" formnovalidate>${dismiss}</button><button type="submit" class="${tone}"${owner}>${what}</button></div>`;
+  const box = form ? `${head}\n${buttons}` : `<form method="post" action="${esc(action)}"${asking.flush ? " data-flush-draft" : ""}>\n${backInput(asking.back ?? null)}${head}\n${buttons}\n</form>`;
+  const close = `<form method="dialog" class="modal-backdrop"><button aria-label="Close">close</button></form>`;
+  return `<dialog class="modal" id="${dialog}" aria-labelledby="${dialog}-title">\n<div class="modal-box">\n${box}\n</div>\n${close}\n</dialog>`;
+}