@panphora/clayjs 1.24.0 → 1.25.0

package/src/plugins/visitor-drafts/idb.js

@@ -0,0 +1,227 @@
+/**
+ * The IndexedDB half of the visitor draft store.
+ *
+ * One database per origin (`clay-visitor-drafts`), two stores:
+ *
+ *   records  key: the draft's text key (`clay:visitor-drafts:<slot>@<path>`) and its
+ *            siblings `<key>:<name>`; value: JSON text
+ *   parts    key: `[recordKey, regionKey, partId]`; value: `{ rev, text }`
+ *
+ * Every change to a draft goes through `change()`, one readwrite transaction that reads,
+ * merges (the caller's `build`) and writes; see `commit.js`. The only other write is
+ * `putRow()`, a tab's own chain left blind at a hide. A transaction resolves only once it
+ * completes. Every failure rejects with an Error whose `code` says what happened
+ * (`unavailable`, `blocked`, `quota`, `aborted`, `unknown-schema`, `closed`, `bad-op`,
+ * `error`).
+ */
+
+import { codeFor } from "../../lib/idb-error-code.js";
+
+export const DB_NAME = "clay-visitor-drafts";
+export const DB_VERSION = 1;
+export const RECORDS = "records";
+export const PARTS = "parts";
+const OPEN_TIMEOUT_MS = 2000;
+
+function failure(code, cause) {
+  const error = new Error(`visitor-drafts: the draft database failed (${code})`);
+  error.code = code;
+  if (cause !== undefined) error.cause = cause;
+  return error;
+}
+
+function cursorEntries(source, range) {
+  return new Promise((resolve, reject) => {
+    const out = [];
+    const req = source.openCursor(range);
+    req.onerror = () => reject(req.error);
+    req.onsuccess = () => {
+      const cursor = req.result;
+      if (!cursor) return resolve(out);
+      out.push([cursor.key, cursor.value]);
+      cursor.continue();
+    };
+  });
+}
+
+/**
+ * Open (and, the first time, create) the draft database.
+ *
+ * A database that does not open within `timeout` milliseconds (another tab holds an
+ * upgrade, or the browser never answers) rejects with `blocked`, so the caller can
+ * refuse to write over a draft it could not read rather than wait forever.
+ *
+ * @param {Object} [options]
+ * @param {?IDBFactory} [options.factory]
+ * @param {?typeof IDBKeyRange} [options.keyRange]
+ * @returns {Promise<{readAll: Function, readParts: Function, change: Function, putRow: Function, close: Function}>}
+ */
+export function openDrafts({ factory = globalThis.indexedDB, keyRange = globalThis.IDBKeyRange, name = DB_NAME, timeout = OPEN_TIMEOUT_MS } = {}) {
+  return new Promise((resolve, reject) => {
+    if (!factory || typeof factory.open !== "function" || !keyRange) return reject(failure("unavailable"));
+    let req;
+    try {
+      req = factory.open(name, DB_VERSION);
+    } catch (error) {
+      return reject(failure(codeFor(error), error));
+    }
+    let settled = false;
+    const finish = (fn, value) => {
+      if (settled) return false;
+      settled = true;
+      clearTimeout(timer);
+      fn(value);
+      return true;
+    };
+    const timer = setTimeout(() => finish(reject, failure("blocked")), timeout);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains(RECORDS)) db.createObjectStore(RECORDS);
+      if (!db.objectStoreNames.contains(PARTS)) db.createObjectStore(PARTS);
+    };
+    req.onsuccess = () => {
+      const db = req.result;
+      // An open that answered after the timeout is closed again, or it would hold the
+      // database against another tab's upgrade for as long as this page stays open.
+      if (!finish(resolve, wrap(db, keyRange))) db.close();
+    };
+    req.onerror = () => finish(reject, failure(codeFor(req.error), req.error));
+    req.onblocked = () => finish(reject, failure("blocked"));
+  });
+}
+
+function wrap(db, keyRange) {
+  let closed = false;
+  // Another tab opening a newer version needs this connection to stand aside.
+  db.onversionchange = () => {
+    closed = true;
+    try { db.close(); } catch {}
+  };
+
+  function transaction(stores, mode) {
+    if (closed) throw failure("closed");
+    try {
+      return db.transaction(stores, mode);
+    } catch (error) {
+      throw failure(codeFor(error), error);
+    }
+  }
+
+  // The record named `recordKey` and its siblings (`<recordKey>:<anything>`), as a Map
+  // from key to stored text. A key that only starts with `recordKey`, such as another
+  // document whose path extends this one's, is not a sibling.
+  async function readAll(recordKey) {
+    const tx = transaction(RECORDS, "readonly");
+    const range = keyRange.bound(recordKey, recordKey + ":￿");
+    try {
+      const entries = await cursorEntries(tx.objectStore(RECORDS), range);
+      return new Map(entries.filter(([key]) => key === recordKey || key.startsWith(recordKey + ":")));
+    } catch (error) {
+      throw failure(codeFor(error), error);
+    }
+  }
+
+  // The parts of one region of one record, as a Map from part id to `{ rev, text }`.
+  // An array sorts after every string, so `[recordKey, regionKey, []]` bounds them all.
+  async function readParts(recordKey, regionKey) {
+    const tx = transaction(PARTS, "readonly");
+    const range = keyRange.bound([recordKey, regionKey], [recordKey, regionKey, []]);
+    try {
+      const entries = await cursorEntries(tx.objectStore(PARTS), range);
+      return new Map(entries.map(([key, value]) => [key[2], value]));
+    } catch (error) {
+      throw failure(codeFor(error), error);
+    }
+  }
+
+  // The one read-merge-write. Reads the record, `:meta`, `:v1base` and every `:op:` row of
+  // `key`, hands them to `build` inside the transaction, and writes the `puts` and
+  // `deletes` it returns before the transaction can complete. A `build` or a write that
+  // throws aborts it, so nothing lands. Resolves with `build`'s `result` on `complete`.
+  function change(key, build, { timeout = 0, recovery = false } = {}) {
+    return new Promise((resolve, reject) => {
+      let tx;
+      try {
+        tx = transaction([RECORDS, PARTS], "readwrite");
+      } catch (error) {
+        return reject(error);
+      }
+      let thrown = null;
+      let result;
+      let settled = false;
+      let timer;
+      const finish = (fn, value) => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(timer);
+        fn(value);
+      };
+      if (timeout > 0) timer = setTimeout(() => {
+        thrown = failure("blocked");
+        try { tx.abort(); } catch {}
+        finish(reject, thrown);
+      }, timeout);
+      tx.oncomplete = () => finish(resolve, result);
+      tx.onabort = () => finish(reject, thrown || failure(tx.error ? codeFor(tx.error) : "aborted", tx.error));
+      try {
+        const store = tx.objectStore(RECORDS);
+        const rows = keyRange.bound(key + ":op:", key + ":op:\uffff");
+        const reads = { record: store.get(key), meta: store.get(key + ":meta"), v1base: store.get(key + ":v1base"), names: store.getAllKeys(rows), values: store.getAll(rows) };
+        const copies = recovery ? keyRange.bound(key + ":recovery:", key + ":recovery:\uffff") : null;
+        if (copies) {
+          reads.copyNames = store.getAllKeys(copies);
+          reads.copyValues = store.getAll(copies);
+        }
+        // Requests in one transaction answer in the order they were made: the last one in
+        // means every read is.
+        (reads.copyValues ?? reads.values).onsuccess = () => {
+          if (settled) return;
+          try {
+            const raw = {
+              record: reads.record.result ?? null,
+              meta: reads.meta.result ?? null,
+              v1base: reads.v1base.result ?? null,
+              rows: reads.names.result.map((name, i) => [name, reads.values.result[i]]),
+              ...(copies && { recovery: reads.copyNames.result.map((name, i) => [name, reads.copyValues.result[i]]) }),
+            };
+            const planned = build(raw);
+            for (const [name, value] of planned.puts) store.put(value, name);
+            for (const name of planned.deletes) store.delete(name);
+            result = planned.result;
+          } catch (error) {
+            thrown = failure(codeFor(error), error);
+            try { tx.abort(); } catch {}
+          }
+        };
+      } catch (error) {
+        thrown = failure(codeFor(error), error);
+        try { tx.abort(); } catch {}
+      }
+    });
+  }
+
+  // A tab's own unconfirmed chain, written blind (no read) at a hide, with an explicit
+  // commit so it needs no callback in a page about to go away. `change()` applies it later.
+  function putRow(name, value) {
+    return new Promise((resolve, reject) => {
+      if (!/:op:[^:]+$/.test(name)) return reject(failure("bad-op"));
+      let tx;
+      try {
+        tx = transaction(RECORDS, "readwrite");
+        tx.objectStore(RECORDS).put(value, name);
+        tx.commit?.();
+      } catch (error) {
+        return reject(error instanceof Error && error.code ? error : failure(codeFor(error), error));
+      }
+      tx.oncomplete = () => resolve();
+      tx.onabort = () => reject(failure(tx.error ? codeFor(tx.error) : "aborted", tx.error));
+    });
+  }
+
+  function close() {
+    closed = true;
+    try { db.close(); } catch {}
+  }
+
+  return { readAll, readParts, change, putRow, close };
+}

package/src/plugins/visitor-drafts/prompt.js

@@ -21,7 +21,9 @@ const ASIDE = `<aside class="hcp" id="hcp" hidden aria-label="Download this app"
   </div>
 </aside>`;
 
-export async function mountPrompt({ memory, appName, link }) {
+// `settle` returns a promise while the page's last changes are not yet where the download
+// page reads them, and null once they are. False requests a download from this page.
+export async function mountPrompt({ memory, appName, link, settle, canDownloadCurrent = () => true }) {
   const { PROMPT_CSS } = await import("./prompt-style.js");
   const existing = document.querySelector('clay-editor-ui[data-clay-ui="download-prompt"]');
   let root = existing?.shadowRoot.getElementById("hcp");
@@ -118,6 +120,7 @@ export async function mountPrompt({ memory, appName, link }) {
     }
   }
 
+  let rescueRequested = false;
   root.addEventListener("click", async (e) => {
     const t = e.target.closest("[data-hcp]");
     if (t) {
@@ -131,9 +134,23 @@ export async function mountPrompt({ memory, appName, link }) {
       return;
     }
     if (e.target.closest("[data-hcp-link]")) {
-      if (root.getAttribute("data-hcp-reason") === "error") {
+      if (!canDownloadCurrent()) return;
+      let rescue = rescueRequested || root.getAttribute("data-hcp-reason") === "error";
+      if (!rescue) {
+        const waiting = settle?.();
+        if (waiting) {
+          e.preventDefault();
+          if (await waiting !== false) {
+            linkEl.click();
+            return;
+          }
+          rescue = true;
+        }
+      }
+      if (rescue) {
         e.preventDefault();
         if (!(await downloadCurrent())) {
+          showError();
           root.querySelector(".hcp-body [data-hcp-for='error']").textContent = "The download could not be made. Keep this page open and try Download free again.";
           return;
         }
@@ -152,7 +169,10 @@ export async function mountPrompt({ memory, appName, link }) {
   function clearError() {
     if (root.getAttribute("data-hcp-reason") === "error") root.setAttribute("data-hcp-reason", "use");
   }
-  const api = { set, root, showError, clearError, download: () => linkEl.click() };
+  const api = { set, root, showError, clearError, download: (rescue = false) => {
+    rescueRequested = rescue;
+    try { linkEl.click(); } finally { rescueRequested = false; }
+  } };
 
   document.addEventListener("input", onUse, true);
   document.addEventListener("change", onUse, true);

package/src/plugins/visitor-drafts/recovery-menu.js

@@ -0,0 +1,118 @@
+import { COPY } from "./recovery.js";
+import { bevelBox, bevelButton, bevelText, setShown } from "../../ui/bevel-controls.js";
+import { FONT_MONO } from "../../ui/bevel.js";
+import { resolveTheme } from "../../ui/theme.js";
+import modal, { SURFACE_THEME } from "../../ui/modal.js";
+
+export function attachRecoveryMenu(shell, load) {
+  let request = 0;
+  const refresh = async () => {
+    const id = ++request;
+    try {
+      const recovery = await load();
+      const rows = recovery ? await recovery.list() : [];
+      if (id !== request) return;
+      if (!rows.length) return shell.removeItem("clay.earlier-drafts");
+      shell.addItem({ id: "clay.earlier-drafts", label: COPY.label, run: () => openRecovery(recovery, { refresh, anchor: shell.goo }).catch(() => shell.note("The drafts could not be opened. Try again.")) });
+    } catch {
+      if (id === request) shell.removeItem("clay.earlier-drafts");
+    }
+  };
+  shell.beforeOpen.push(refresh);
+  refresh();
+  return refresh;
+}
+
+export async function openRecovery(recovery, { refresh = () => {}, anchor = document.activeElement } = {}) {
+  const theme = resolveTheme();
+  const box = bevelBox("div", ["display:flex", "flex-direction:column", "gap:16px"], { theme, parts: ["dialog.content"] });
+  box.dataset.draftCopies = "";
+  box.append(bevelText("p", ["display:block", "margin:0"], COPY.intro, { theme }));
+  const status = bevelText("p", ["display:block", "margin:0"], "", { theme });
+  status.setAttribute("role", "status");
+  const list = bevelBox("ol", ["display:flex", "flex-direction:column", "gap:16px", "padding:0", "margin:0", "list-style:none"], { theme });
+  box.append(status, list);
+  let busy = false;
+
+  async function draw() {
+    const rows = await recovery.list();
+    list.replaceChildren();
+    if (!rows.length) status.textContent = "No earlier drafts are kept.";
+    for (const row of rows) {
+      const item = bevelBox("li", ["display:flex", "flex-direction:column", "gap:8px"], { theme });
+      item.dataset.draftMark = row.mark;
+      const date = new Date(row.savedAt);
+      const when = Number.isNaN(date.getTime()) ? "Time unavailable" : date.toLocaleString();
+      const time = bevelText("time", ["display:block", `font-family:${FONT_MONO}`], when, { theme });
+      if (row.savedAt) time.dateTime = row.savedAt;
+      item.append(time, bevelText("p", ["display:block", "margin:0"], `${row.fields} saved ${row.fields === 1 ? "field" : "fields"}`, { theme, role: "mutedText" }));
+      const actions = bevelBox("div", ["display:flex", "flex-wrap:wrap", "gap:8px"], { theme });
+      const preview = bevelBox("div", ["display:block"], { theme });
+      setShown(preview, false);
+      const confirm = bevelBox("div", ["display:flex", "flex-wrap:wrap", "gap:8px", "align-items:center"], { theme });
+      setShown(confirm, false);
+      const action = (label, fn, options = {}) => {
+        const button = bevelButton(label, { small: true, theme, ...options, onClick: async () => {
+          if (busy) return;
+          busy = true;
+          button.setDisabled(true);
+          status.textContent = "";
+          try { await fn(button); }
+          catch (error) { status.textContent = error.message || "That did not work. Try again."; }
+          finally { busy = false; button.setDisabled(false); }
+        } });
+        button.setAttribute("aria-label", `${label}: ${when}`);
+        return button;
+      };
+      const open = action("Preview", () => {
+        if (!preview.hidden) { setShown(preview, false); open.setAttribute("aria-expanded", "false"); return; }
+        const doc = new DOMParser().parseFromString(recovery.html(row.copy), "text/html");
+        for (const el of doc.querySelectorAll('script, meta[http-equiv="refresh" i]')) el.remove();
+        for (const el of doc.querySelectorAll("input, textarea, select, button")) el.disabled = true;
+        for (const el of doc.querySelectorAll("[contenteditable]")) el.removeAttribute("contenteditable");
+        for (const el of doc.querySelectorAll("a, area")) {
+          el.removeAttribute("href");
+          el.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+          el.removeAttribute("xlink:href");
+        }
+        const policy = doc.createElement("meta");
+        policy.httpEquiv = "Content-Security-Policy";
+        policy.content = "default-src 'none'; style-src 'unsafe-inline'; img-src data: blob:; form-action 'none'";
+        doc.head.prepend(policy);
+        const frame = bevelBox("iframe", ["display:block", "width:100%", "height:45vh", "border:0"], { theme });
+        frame.title = `Draft preview: ${when}`;
+        frame.setAttribute("sandbox", "");
+        frame.srcdoc = "<!DOCTYPE html>\n" + doc.documentElement.outerHTML;
+        preview.replaceChildren(frame);
+        setShown(preview, true);
+        open.setAttribute("aria-expanded", "true");
+      });
+      open.setAttribute("aria-expanded", "false");
+      const restore = action("Restore", async () => { await recovery.restore(row.mark); status.textContent = "Draft restored. Reloading the page."; await refresh(); });
+      const download = action("Download", () => recovery.download(row.copy));
+      for (const button of [open, restore, download]) button.setDisabled(!row.available);
+      const remove = action("Remove", () => { setShown(confirm, true, "flex"); cancel.focus(); });
+      const cancel = bevelButton("Keep draft", { small: true, theme, onClick: () => { setShown(confirm, false); remove.focus(); } });
+      confirm.append(bevelText("p", ["margin:0"], "Remove this saved draft?", { theme }), cancel, action("Remove draft", async () => {
+        await recovery.remove(row.mark);
+        await draw();
+        await refresh();
+        list.querySelector("button")?.focus();
+      }, { variant: "danger" }));
+      actions.append(open, restore, download, remove);
+      item.append(actions, confirm, preview);
+      list.append(item);
+    }
+  }
+
+  await draw();
+  modal.title = COPY.label;
+  modal.html = box;
+  modal.width = "720px";
+  modal[SURFACE_THEME] = theme;
+  modal.closeHtml = "x";
+  modal.no = "Close";
+  modal.onNo(() => anchor?.focus());
+  modal.open();
+  return box;
+}

package/src/plugins/visitor-drafts/recovery.js

@@ -0,0 +1,64 @@
+import { applyData, extractData } from "../../vendor/hyper-html-api-data.vendor.js";
+import { finalizeControlForSave } from "../../vendor/control-serialize.vendor.js";
+import { downloadHtml, documentName } from "../../core/download.js";
+
+export const COPY = {
+  label: "Earlier drafts",
+  intro: "This page kept your earlier drafts aside, listed by time.",
+};
+
+export function createRecovery({ store, session, getHTML = () => window.clay.getHTML(), download = downloadHtml }) {
+  const recordOf = (copy) => session.recoveryRecord(copy);
+  const savedAt = (copy) => copy?.savedAt ?? copy?.ops?.at(-1)?.savedAt ?? (copy?.at ? new Date(copy.at).toISOString() : null);
+
+  async function list() {
+    const rows = await session.listRecovery();
+    return rows.map(({ mark, copy }) => {
+      const record = recordOf(copy);
+      const fields = copy?.ops ? new Set(copy.ops.flatMap((op) => Object.keys(op.keys ?? {}))).size : Object.keys(record?.data ?? {}).length;
+      return { mark, copy, savedAt: savedAt(copy), fields, available: Boolean(record) };
+    }).sort((a, b) => (Date.parse(b.savedAt) || 0) - (Date.parse(a.savedAt) || 0));
+  }
+
+  function html(copy) {
+    const record = recordOf(copy);
+    if (!record) throw new Error("This draft cannot be opened by this version.");
+    const doc = new DOMParser().parseFromString(getHTML(), "text/html");
+    applyData(doc, store.seed(), store.rules);
+    applyData(doc, record.data, store.rules);
+    if (!store.fitsInto(record.data, extractData(doc, store.rules))) throw new Error("This draft no longer fits the page. Its saved copy is still kept.");
+    const unit = record.blockeditor ? record : store.servedUnit();
+    const article = doc.querySelector("article[data-blockeditor]");
+    if (unit) {
+      if (!article) throw new Error("This draft's page editor is no longer available.");
+      for (const tag of doc.querySelectorAll('script[type="application/json"][merge][clay~="live"]')) tag.remove();
+      for (const [name, value] of Object.entries(unit.live)) {
+        const tag = doc.createElement("script");
+        tag.type = "application/json";
+        tag.setAttribute("merge", name);
+        tag.setAttribute("clay", "live");
+        tag.textContent = JSON.stringify(value).replace(/</g, "\\u003c");
+        article.before(tag);
+      }
+      article.setAttribute("data-rev", unit.blockeditor.rev);
+      article.innerHTML = unit.blockeditor.html;
+    }
+    for (const control of doc.querySelectorAll('input:not([type="password"]):not([type="file"]), textarea, select')) finalizeControlForSave(control);
+    return "<!DOCTYPE html>\n" + doc.documentElement.outerHTML;
+  }
+
+  async function downloadCopy(copy) {
+    const ok = await download({ html: html(copy), name: documentName() + ".htmlclay" });
+    if (!ok) throw new Error("The download could not be made. Try again.");
+    return true;
+  }
+
+  async function restore(mark) {
+    const row = (await list()).find((row) => row.mark === mark);
+    if (!row) throw new Error("That draft is no longer available. Open the list again.");
+    html(row.copy);
+    return session.restoreRecovery(mark);
+  }
+
+  return { list, html, download: downloadCopy, restore, remove: (mark) => session.removeRecovery(mark) };
+}