hecks 3.9.1 → 3.11.0

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

@@ -0,0 +1,412 @@
+__CSS_BANNER__
+
+/*
+ * The editor's stylesheet source. `npm run build` runs it through Tailwind, which finds the class
+ * names the pages and the browser code use (every class is written out whole, never built by
+ * joining strings, so the scanner sees it), and emits the daisyUI components those classes name.
+ *
+ * Colours come from the Editor row's accent (the generator's Palette moves each pair until it
+ * reaches WCAG AA) and are declared once, as two daisyUI themes: `editor-light`, and `editor-dark`
+ * for a visitor whose system prefers dark. The theme button sets `data-theme` on the root element.
+ */
+@import "tailwindcss";
+@plugin "daisyui" {
+  themes: false;
+  logs: false;
+}
+@plugin "@tailwindcss/typography";
+@source "../ui";
+@source ".";
+
+@plugin "daisyui/theme" {
+  name: "editor-light";
+  default: true;
+  prefersdark: false;
+  color-scheme: light;
+__LIGHT__
+  --radius-selector: 2rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.225rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+@plugin "daisyui/theme" {
+  name: "editor-dark";
+  default: false;
+  prefersdark: true;
+  color-scheme: dark;
+__DARK__
+  --radius-selector: 2rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.225rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+@theme {
+  --font-sans: ui-sans-serif, "Avenir Next", "Segoe UI", Roboto, system-ui, sans-serif;
+  --font-serif: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
+  --text-xs: 0.8125rem;
+  --text-sm: 0.9375rem;
+  --text-base: 1.0625rem;
+  --text-lg: 1.25rem;
+  --text-xl: 1.5rem;
+  --text-2xl: 1.875rem;
+}
+
+@theme inline {
+  --color-muted: var(--ed-muted);
+  --color-edge: var(--ed-edge);
+  --color-soft: var(--ed-soft);
+  --color-ok-bg: var(--ed-ok-bg);
+  --color-warn-bg: var(--ed-warn-bg);
+  --color-danger-bg: var(--ed-danger-bg);
+}
+
+@layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+    scroll-padding-top: 4.5rem;
+  }
+
+  body {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  h1, h2, h3, h4 {
+    font-family: var(--font-sans);
+    font-weight: 650;
+    letter-spacing: -0.015em;
+    line-height: 1.2;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  main:focus {
+    outline: none;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  main a:not([class]) {
+    color: var(--color-primary);
+    text-underline-offset: 0.18em;
+  }
+
+  .icon {
+    width: 1.125rem;
+    height: 1.125rem;
+    flex: none;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  table {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* A fieldset will not shrink below its content by default, so one row that does not wrap (the
+     writing surface's toolbar, which scrolls on a phone) would widen the whole page. */
+  fieldset {
+    min-inline-size: 0;
+  }
+}
+
+@layer components {
+  /* Read-only and written text share one typeface and one rhythm: a serif page, a sans interface. */
+  .prose {
+    --tw-prose-body: var(--color-base-content);
+    --tw-prose-headings: var(--color-base-content);
+    --tw-prose-lead: var(--ed-muted);
+    --tw-prose-links: var(--color-primary);
+    --tw-prose-bold: var(--color-base-content);
+    --tw-prose-counters: var(--ed-muted);
+    --tw-prose-bullets: var(--ed-muted);
+    --tw-prose-hr: var(--ed-edge);
+    --tw-prose-quotes: var(--ed-muted);
+    --tw-prose-quote-borders: var(--ed-edge);
+    --tw-prose-captions: var(--ed-muted);
+    --tw-prose-code: var(--color-base-content);
+    --tw-prose-th-borders: var(--ed-edge);
+    --tw-prose-td-borders: var(--color-base-300);
+    max-width: 66ch;
+    font-family: var(--font-serif);
+    font-size: 1.125rem;
+    line-height: 1.65;
+    overflow-wrap: anywhere;
+  }
+
+  .prose :where(h1, h2, h3, h4, figcaption) {
+    font-family: var(--font-sans);
+  }
+
+  .prose :where(h1) { font-size: 1.875rem; }
+  .prose :where(h2) { font-size: 1.5rem; }
+  .prose :where(h3) { font-size: 1.25rem; }
+  .prose :where(h4) { font-size: 1.0625rem; }
+
+  .prose :where(code)::before,
+  .prose :where(code)::after {
+    content: none;
+  }
+
+  .prose :where(code) {
+    padding: 0.1em 0.35em;
+    border-radius: 4px;
+    background: color-mix(in srgb, var(--color-base-content) 8%, var(--color-base-100));
+    font-size: 0.85em;
+    font-weight: 500;
+  }
+
+  .prose :where(blockquote) {
+    font-weight: 400;
+  }
+
+  .prose :where(blockquote p:first-of-type)::before,
+  .prose :where(blockquote p:last-of-type)::after {
+    content: none;
+  }
+
+  .prose [data-align="left"] { text-align: left; }
+  .prose [data-align="center"] { text-align: center; }
+  .prose [data-align="right"] { text-align: right; }
+  .prose [data-align="justify"] { text-align: justify; }
+  .prose [data-indent="1"] { margin-left: 2rem; }
+  .prose [data-indent="2"] { margin-left: 4rem; }
+  .prose [data-indent="3"] { margin-left: 6rem; }
+  .prose [data-indent="4"] { margin-left: 8rem; }
+  .prose [data-indent="5"] { margin-left: 10rem; }
+  .prose [data-indent="6"] { margin-left: 12rem; }
+  .prose [data-indent="7"] { margin-left: 14rem; }
+  .prose [data-indent="8"] { margin-left: 16rem; }
+  .prose li[data-depth="1"] { margin-left: 1.5rem; }
+  .prose li[data-depth="2"] { margin-left: 3rem; }
+  .prose li[data-depth="3"] { margin-left: 4.5rem; }
+  .prose li[data-depth="4"] { margin-left: 6rem; }
+  .prose li[data-depth="5"] { margin-left: 7.5rem; }
+
+  .prose .body-media {
+    display: inline-block;
+    padding: 0.2em 0.6em;
+    border: 1px dashed var(--ed-edge);
+    border-radius: 4px;
+    color: var(--ed-muted);
+    font-family: var(--font-sans);
+    font-size: 0.85em;
+  }
+
+  /* ProseMirror's own rules, written here because the editor is told to inject none (a strict
+     content security policy blocks a style element the script adds). */
+  .ProseMirror {
+    position: relative;
+    outline: none;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    white-space: break-spaces;
+    font-variant-ligatures: none;
+    font-feature-settings: "liga" 0;
+  }
+
+  .ProseMirror pre {
+    white-space: pre-wrap;
+  }
+
+  .ProseMirror li {
+    position: relative;
+  }
+
+  .ProseMirror-hideselection *::selection,
+  .ProseMirror-hideselection *::-moz-selection {
+    background: transparent;
+  }
+
+  .ProseMirror-hideselection {
+    caret-color: transparent;
+  }
+
+  .ProseMirror .ProseMirror-selectednode {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 3px;
+  }
+
+  .ProseMirror-gapcursor {
+    position: absolute;
+    display: none;
+    pointer-events: none;
+  }
+
+  .ProseMirror-gapcursor::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -2px;
+    width: 20px;
+    border-top: 1px solid var(--color-base-content);
+    animation: caret 1.1s steps(2, start) infinite;
+  }
+
+  .ProseMirror-focused .ProseMirror-gapcursor {
+    display: block;
+  }
+
+  img.ProseMirror-separator {
+    display: inline !important;
+    border: none !important;
+    margin: 0 !important;
+  }
+
+  .ProseMirror p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    color: var(--ed-muted);
+    pointer-events: none;
+  }
+
+  .ProseMirror :where(ul, ol) {
+    margin: 0;
+    padding-left: 1.5em;
+  }
+
+  .ProseMirror :where(ul, ol)[data-list-indent="1"] { margin-left: 1.5em; }
+  .ProseMirror :where(ul, ol)[data-list-indent="2"] { margin-left: 3em; }
+  .ProseMirror :where(ul, ol)[data-list-indent="3"] { margin-left: 4.5em; }
+  .ProseMirror :where(ul, ol)[data-list-indent="4"] { margin-left: 6em; }
+  .ProseMirror :where(ul, ol)[data-list-indent="5"] { margin-left: 7.5em; }
+  .ProseMirror ul { list-style: disc; }
+  .ProseMirror ul[data-list-indent="1"] { list-style: circle; }
+  .ProseMirror ul[data-list-indent="2"] { list-style: square; }
+  .ProseMirror ol { list-style: decimal; }
+  .ProseMirror ol[data-list-indent="1"] { list-style: lower-alpha; }
+  .ProseMirror ol[data-list-indent="2"] { list-style: lower-roman; }
+
+  .ProseMirror [data-align="left"] { text-align: left; }
+  .ProseMirror [data-align="center"] { text-align: center; }
+  .ProseMirror [data-align="right"] { text-align: right; }
+  .ProseMirror [data-align="justify"] { text-align: justify; }
+  .ProseMirror [data-indent="1"] { margin-left: 2rem; }
+  .ProseMirror [data-indent="2"] { margin-left: 4rem; }
+  .ProseMirror [data-indent="3"] { margin-left: 6rem; }
+  .ProseMirror [data-indent="4"] { margin-left: 8rem; }
+  .ProseMirror [data-indent="5"] { margin-left: 10rem; }
+  .ProseMirror [data-indent="6"] { margin-left: 12rem; }
+  .ProseMirror [data-indent="7"] { margin-left: 14rem; }
+  .ProseMirror [data-indent="8"] { margin-left: 16rem; }
+
+  @keyframes caret {
+    to {
+      visibility: hidden;
+    }
+  }
+
+  /* Motion answers an action: a dialog opening, a notice arriving, a row that just changed. */
+  @keyframes settle {
+    from {
+      background-color: var(--ed-soft);
+    }
+  }
+
+  .just-changed {
+    animation: settle 1.6s ease-out;
+  }
+
+  /* The current item of the navigation: the accent marks where you are. */
+  .menu li > a[aria-current="page"] {
+    background: var(--ed-soft) !important;
+    color: var(--color-primary) !important;
+    font-weight: 600;
+  }
+
+  .menu a[aria-current="page"] .text-muted {
+    color: inherit;
+  }
+
+  /* A toggle button of the writing surface's toolbar that is on. */
+  .btn[aria-pressed="true"] {
+    background: var(--ed-soft);
+    color: var(--color-primary);
+  }
+}
+
+/* Outside the layers, so they win over the component library's own: a plain button is a ruled outline
+   on the page; the filled ones are the primary action and the dangerous one. */
+.btn:not([class*="btn-"]) {
+  --btn-bg: var(--color-base-100);
+  --btn-border: var(--ed-edge);
+}
+
+/* The component library fades an inactive tab to half its ink, which is under 4.5:1 on a light page. */
+.tab:not(.tab-active):not(:hover) {
+  color: var(--ed-muted);
+}
+
+/* On a phone or any touch screen a control is at least 44 by 44 CSS pixels (a fingertip, and past the
+   24 pixel floor of WCAG 2.2's target size): buttons, fields, tabs, menu rows, the sort buttons of a
+   table's head and the links in its rows. */
+@media (pointer: coarse), (max-width: 40rem) {
+  .btn,
+  .tab,
+  .menu a {
+    min-height: 2.75rem;
+  }
+
+  .input,
+  .select,
+  .file-input {
+    height: 2.75rem;
+  }
+
+  .btn-square,
+  .tab {
+    min-width: 2.75rem;
+    justify-content: center;
+  }
+
+  header a,
+  th button,
+  th a,
+  td a {
+    display: inline-flex;
+    align-items: center;
+    min-height: 2.75rem;
+    min-width: 2.75rem;
+  }
+}
+
+/* The picture picker stands in the window, never taller than the part of it the page's bars leave
+   (the script narrows this to the sticky action bar's top edge and the on-screen keyboard), scrolls
+   inside itself, and keeps clear of the notch and the home bar. */
+.picker-panel {
+  max-height: calc(100dvh - 5rem - env(safe-area-inset-bottom, 0px));
+  max-width: min(42rem, calc(100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

data/lib/hecks/projections/site/cms_editor/templates/src/browser/autosave.js.tmpl

@@ -0,0 +1,144 @@
+__BANNER__
+
+// A body written as a draft saves by itself. The form's command saves a draft beside the live body
+// (the page says which: `data-draft`), so this posts that same form, form-encoded, to its own address
+// with a header that makes the server answer in plain text instead of redirecting. It never posts to
+// the live body: the server runs only the draft-saving command for such a post.
+//
+// A save happens after five seconds with no typing, and when the writing surface loses focus, and
+// only when something changed and the form passes its own checks. The status line says what is
+// happening: "Saving...", "Draft saved 14:03", or "Could not save: <reason>" with a way to try again.
+// The browser asks before the page is left only while there are changes that are not saved.
+
+const QUIET_MS = 5000;
+
+/** The time of day, as the person's browser writes it, without seconds. */
+const clock = () => new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+
+/**
+ * Starts saving the draft of the body `root` holds.
+ *
+ * @param {HTMLElement} root the element that holds the writing surface (`data-body-editor`), or a
+ *   list of mixed blocks (`data-block-list`)
+ * @param {{ form?: HTMLFormElement, blocked?: () => string | null, refused?: (problems: object[]) => void }} [options]
+ *   `form` when it is not the root's own; `blocked` says why the form is not ready to save (null when
+ *   it is); `refused` is given the blocks a refused save named
+ * @returns {{ touch(): void, blur(): void }} what the writing surface calls when the text changes
+ *   and when it loses focus
+ */
+export function startDraft(root, options = {}) {
+  const form = options.form ?? root.closest("form");
+  const status = document.querySelector("[data-draft-status]");
+  const discard = document.querySelector("[data-draft-discard]");
+  let dirty = false;
+  let version = 0;
+  let timer = null;
+  let current = null;
+  let leaving = false;
+
+  const say = (text, retry = false) => {
+    if (!status) return;
+    status.replaceChildren(text);
+    if (!retry) return;
+    const button = Object.assign(document.createElement("button"), { type: "button", className: "link ml-2", textContent: "Try again" });
+    button.addEventListener("click", () => save());
+    status.append(button);
+  };
+
+  /** Whether the form may be sent: its own checks pass and the body has something in it. */
+  const passes = () => form.checkValidity() && !root.editor?.isEmpty;
+
+  const send = async () => {
+    const sent = version;
+    say("Saving...");
+    try {
+      const response = await fetch(form.action, {
+        method: "POST",
+        body: new URLSearchParams(new FormData(form)),
+        headers: { "X-Editor-Autosave": "1" },
+        credentials: "same-origin",
+        redirect: "manual",
+      });
+      if (response.type === "opaqueredirect") return fail("Sign in again to keep saving.");
+      const text = (await response.text()).trim();
+      if (!response.ok) {
+        named(response.headers.get("x-editor-problems"));
+        return fail(text || `The editor answered ${response.status}.`);
+      }
+      if (version === sent) dirty = false;
+      say(`Draft saved ${clock()}`);
+      discard?.removeAttribute("hidden");
+      document.dispatchEvent(new CustomEvent("editor:saved"));
+      return version === sent;
+    } catch {
+      return fail("the editor could not be reached.");
+    }
+  };
+
+  /** Hands the blocks a refusal names to the list, which opens them. */
+  const named = (header) => {
+    try {
+      if (header) options.refused?.(JSON.parse(decodeURIComponent(header)));
+    } catch {
+      /* a header that is not ours is ignored */
+    }
+  };
+
+  const fail = (reason) => {
+    say(`Could not save: ${reason}`, true);
+    return false;
+  };
+
+  /** Saves what is unsaved, once at a time; resolves to whether everything is saved. */
+  const save = () => {
+    clearTimeout(timer);
+    if (current) return current.then(() => save());
+    if (!dirty) return Promise.resolve(true);
+    const why = options.blocked?.();
+    if (why) {
+      say(`Not saved: ${why}`);
+      return Promise.resolve(false);
+    }
+    if (!passes()) {
+      say("Not saved: write something first, or fix what the form marks.");
+      return Promise.resolve(false);
+    }
+    current = send().finally(() => {
+      current = null;
+    });
+    return current;
+  };
+
+  window.addEventListener("beforeunload", (event) => {
+    if (leaving || (!dirty && !current)) return;
+    event.preventDefault();
+    event.returnValue = "";
+  });
+
+  document.addEventListener("submit", async (event) => {
+    const target = event.target;
+    if (target === form) {
+      leaving = true;
+      return;
+    }
+    if (!target.matches?.("[data-flush-draft]") || (!dirty && !current)) return;
+    event.preventDefault();
+    if (await save()) {
+      leaving = true;
+      target.submit();
+    }
+  });
+
+  return {
+    touch() {
+      dirty = true;
+      version += 1;
+      say("Changes not saved yet.");
+      clearTimeout(timer);
+      timer = setTimeout(save, QUIET_MS);
+    },
+    blur() {
+      if (dirty) save();
+    },
+  };
+}