@panphora/clayjs 1.24.1 → 1.25.1

package/src/core/stale-host-notice.js

@@ -1,7 +1,7 @@
 import { servedStaleToken } from "./host-attrs.js";
 import { isEditMode } from "./is-edit-mode.js";
 import onDomReady from "../lib/dom-ready.js";
-import { set, make } from "../lib/hostile-css.js";
+import { set, style, make } from "../lib/hostile-css.js";
 
 // The page's only visible word on a host too old to save to.
 //
@@ -47,12 +47,13 @@ function dismiss() {
 }
 
 function build() {
+  const theme = ui.resolveTheme();
   root = ui.bevelSurface("div", [
     "position:fixed", "left:50%", "transform:translateX(-50%)",
     "z-index:2147483001", "display:flex", "align-items:center", "gap:10px 12px",
     "width:max-content", "max-width:calc(100vw - 24px)", "flex-wrap:wrap",
     "padding:8px 8px 8px 14px", "text-align:left", `color-scheme:${ui.pageScheme()}`,
-  ]);
+  ], { theme, parts: ["notice.root", "notice.panel", "staleHost.root", "staleHost.panel"] });
   // Three markers, and each is load-bearing on a page that CAN save: this element is
   // injected, so it is in no document on disk and must never reach one, never wake the
   // watcher, and never ride out in a snapshot to somebody else's browser.
@@ -62,13 +63,23 @@ function build() {
 
   const dot = make("span", ["all:initial", "color-scheme:inherit", "display:inline-block", "flex:none", "width:8px", "height:8px", "border-radius:50%", `background:${ui.TOKENS.ox}`]);
   dot.setAttribute("clay", ui.RUNTIME_ONLY);
-  const close = ui.bevelButton("Dismiss", { small: true, variant: "quiet", onClick: dismiss });
+  const dotNames = ["notice.dot", "staleHost.dot"];
+  if (ui.themed(theme)) {
+    ui.markParts(dot, theme, dotNames);
+    style(dot, ui.partRules(theme, dotNames, {}));
+  }
+  const close = ui.bevelButton("Dismiss", {
+    small: true, variant: "quiet", onClick: dismiss, theme,
+    parts: ["notice.button", "staleHost.button"],
+    labelParts: ["notice.buttonLabel", "staleHost.buttonLabel"],
+  });
   close.setAttribute("aria-label", "Dismiss this message");
-  root.append(dot, ui.bevelText("span", [], MESSAGE), close);
+  root.append(dot, ui.bevelText("span", [], MESSAGE, { theme, parts: ["notice.text", "staleHost.text"] }), close);
 
   document.body.appendChild(root);
   place();
-  ui.paintLook(root, { background: ui.TOKENS.surface });
+  if (ui.themed(theme)) set(root, "color-scheme", theme.scheme === "light dark" ? "light" : theme.scheme);
+  else ui.paintLook(root, { background: ui.TOKENS.surface });
   window.visualViewport?.addEventListener("resize", place);
   window.visualViewport?.addEventListener("scroll", place);
 }
@@ -81,8 +92,10 @@ async function init() {
   // told its reader the opposite. The message is only true while editing is actually
   // off, so it is shown only then.
   if (isEditMode) return;
-  const [controls, bevel] = await Promise.all([import("../ui/bevel-controls.js"), import("../ui/bevel.js")]);
-  ui = { ...controls, TOKENS: bevel.TOKENS };
+  const [controls, bevel, themeConfig, parts] = await Promise.all([
+    import("../ui/bevel-controls.js"), import("../ui/bevel.js"), import("../ui/theme.js"), import("../ui/theme-parts.js"),
+  ]);
+  ui = { ...controls, ...parts, TOKENS: bevel.TOKENS, resolveTheme: themeConfig.resolveTheme };
   build();
 }
 

package/src/lib/dirty-gate.js

@@ -29,6 +29,7 @@ import Mutation from './mutation.js';
 import { isEditMode } from '../core/is-edit-mode.js';
 import { STRIP_FROM_DIRTY_CHECK, SNAPSHOT_REMOVE_SELECTOR } from './region-policy.js';
 import { PERSIST } from './attr-aliases.js';
+import { setDraftGate } from '../core/draft-mode.js';
 
 let changes = 0;
 let clearedAt = 0;
@@ -121,6 +122,7 @@ export function startDirtyGate() {
   );
   document.addEventListener('input', onUserInput, true);
   document.addEventListener('change', onUserInput, true);
+  setDraftGate({ token: gateTokenNow, unchangedSince: gateUnchangedSince });
 }
 
 /** The morph-apply window: nothing that happens inside it is a user edit. */
@@ -210,6 +212,23 @@ export function gateCaptureToken() {
   return { gen: changes, probe };
 }
 
+/** A token for the page as it is now: what the browser has queued is counted first. */
+export function gateTokenNow() {
+  Mutation._deliverBeforePause();
+  return gateCaptureToken();
+}
+
+/**
+ * True when nothing was recorded since the token was taken and every [persist] control
+ * still holds what it held then. Records the browser has queued are delivered first, so
+ * the answer holds in the task that made a change too.
+ */
+export function gateUnchangedSince(token) {
+  if (!token) return false;
+  Mutation._deliverBeforePause();
+  return changes === token.gen && token.probe.every(([el, sig]) => controlSignature(el) === sig);
+}
+
 /** A change nothing in the DOM recorded: the page holds text a save has not written. */
 export function gateMarkDirty() {
   changes++;

package/src/page/editor.js

@@ -707,6 +707,11 @@ function checkboxClick(view, event) {
   return true;
 }
 
+function pageTopInset(doc, least) {
+  const padding = parseFloat(doc.defaultView?.getComputedStyle(doc.documentElement).scrollPaddingTop);
+  return Number.isFinite(padding) ? Math.max(least, padding) : least;
+}
+
 // Mounts the editor in `mount`, inside a .blockeditor-shell wrapper (the surface a
 // theme styles). `onChange(record)` gets the block record (blockMap) after
 // every transaction that changed the document.
@@ -743,10 +748,11 @@ export function createPageEditor(mount, { blocks = null, onChange = null, upload
   view = new pmView.EditorView(shell, {
     state: blockeditorState(blocks, { upload, highlight, doc: initialDoc, history: useHistory, undo, redo, onAiTool, mediaNote, toolHost, features, commandHost }),
     attributes: { class: "blockeditor-editor" },
-    // The phone keeps a fixed bar and the plus and grip at the bottom: a caret scrolled into
-    // view stops clear of them.
-    scrollMargin: { top: 16, bottom: 96, left: 5, right: 5 },
-    scrollThreshold: { top: 16, bottom: 96, left: 0, right: 0 },
+    // The phone keeps a fixed bar and the plus and grip at the bottom, and a page with a
+    // sticky header declares its height as scroll-padding-top: a caret scrolled into view
+    // stops clear of both.
+    scrollMargin: { get top() { return pageTopInset(doc, 16); }, bottom: 96, left: 5, right: 5 },
+    scrollThreshold: { get top() { return pageTopInset(doc, 16); }, bottom: 96, left: 0, right: 0 },
     editable: () => editable,
     nodeViews,
     handleDOMEvents: {

package/src/page/import-markdown.js

@@ -17,8 +17,8 @@ import { safeHref, safeSrc } from "./address.js";
 const EMBEDS = "iframe, frame, frameset, object, embed, applet, meta, base, link, form, style, animate, set, animateMotion, animateTransform, portal";
 const LOADERS = /^(srcdoc|data|formaction|codebase|archive|ping|background|poster|lowsrc|dynsrc)$/i;
 const SCRIPTED = /^\s*(javascript|vbscript|data):/i;
-function cleanImported(html) {
-  const t = document.createElement("template");
+function cleanImported(html, doc) {
+  const t = doc.createElement("template");
   t.innerHTML = html;
   for (const el of t.content.querySelectorAll(EMBEDS)) el.remove();
   for (const el of t.content.querySelectorAll("*")) {
@@ -57,7 +57,19 @@ function added(marks, name, attrs) {
 // One text block's inline content as the record keeps it: c, and m as runs (one
 // key per UTF-16 unit, packed), exactly as flatten and runsOf write it; `parts`
 // splits around an image, which the schema only carries as a block of its own.
-function inlineOf(tokens, { images = true, refused = [], unsupported = [] } = {}) {
+// A link or image written as a relative path (`other.md`, `setup.sh`, `shot.png`) names a
+// file beside the Markdown it came from. It never becomes a web address: `setup.sh` read
+// as a host name is someone else's site, and an image there would make every reader's
+// browser ask that site for it. The host may map it (`resolveLink`, `resolveImage`).
+const RELATIVE = /^(?![a-z][a-z0-9+.-]*:|[/#?])\S/i;
+
+function linkHref(raw, resolveLink) {
+  const resolved = typeof resolveLink === "function" ? resolveLink(raw) : null;
+  if (typeof resolved === "string" && resolved) return safeHref(resolved);
+  return RELATIVE.test(raw.trim()) ? null : safeHref(raw);
+}
+
+function inlineOf(tokens, { images = true, refused = [], unsupported = [], resolveLink = null } = {}) {
   const parts = [];
   let c = "";
   let m = [];
@@ -91,7 +103,7 @@ function inlineOf(tokens, { images = true, refused = [], unsupported = [] } = {}
         case "codespan": text(token.text, added(marks, "code")); break;
         case "br": atom(BREAK); break;
         case "link": {
-          const href = safeHref(token.href);
+          const href = linkHref(String(token.href ?? ""), resolveLink);
           if (href) walk(token.tokens, added(marks, "link", { href }));
           else {
             refused.push({ type: "link", href: String(token.href ?? "") });
@@ -121,7 +133,7 @@ function inlineOf(tokens, { images = true, refused = [], unsupported = [] } = {}
   return { parts };
 }
 
-export function importMarkdownTokens(tokens) {
+export function importMarkdownTokens(tokens, { document: doc = globalThis.document, resolveImage = null, resolveLink = null } = {}) {
   if (!Array.isArray(tokens)) throw new MarkdownImportError("malformed-input", "Markdown import needs the lexer's token list.");
   let size = 0;
   for (const token of tokens) {
@@ -155,7 +167,9 @@ export function importMarkdownTokens(tokens) {
     return value;
   };
   const imageOf = (image) => {
-    const src = safeSrc(image.src);
+    const resolved = typeof resolveImage === "function" ? resolveImage(image.src) : null;
+    const mapped = typeof resolved === "string" && resolved ? resolved : null;
+    const src = mapped ? safeSrc(mapped) : RELATIVE.test(String(image.src).trim()) ? null : safeSrc(image.src);
     if (src) return { t: "image", src, ...(image.alt ? { alt: image.alt } : {}), ...(image.title ? { caption: image.title } : {}) };
     refused.push({ type: "image", href: image.src });
     return image.alt ? block("paragraph", {}, { c: image.alt, m: [] }) : null;
@@ -168,7 +182,7 @@ export function importMarkdownTokens(tokens) {
     }
   };
   const paragraph = (inline, ctx) => textBlocks(ctx.quote ? "quote" : "paragraph", {}, inline);
-  const inline = (tokens, options = {}) => inlineOf(tokens, { refused, unsupported, ...options });
+  const inline = (tokens, options = {}) => inlineOf(tokens, { refused, unsupported, resolveLink, ...options });
   const literal = (token) => {
     const raw = String(token.raw ?? token.text ?? "");
     unsupported.push({ type: token.type, text: raw });
@@ -193,7 +207,7 @@ export function importMarkdownTokens(tokens) {
         case "html": {
           const raw = String(token.text ?? token.raw ?? "");
           unsupported.push({ type: "HTML block cleaned", text: raw });
-          push({ t: "preserved", html: cleanImported(fragmentCleaner(document).fallback(raw)) });
+          push({ t: "preserved", html: cleanImported(fragmentCleaner(doc).fallback(raw), doc) });
           break;
         }
         case "blockquote": {

package/src/page/save-projection.js

@@ -120,4 +120,4 @@ export function acceptedPageState(html) {
   }
 }
 
-addDocumentTransform(projectInto);
+addDocumentTransform(projectInto, { required: true });

package/src/plugins/menu/visitor.js

@@ -72,17 +72,49 @@ function copyUrl(loc = window.location) {
   return `/_/copy${path === "/" ? "" : path}`;
 }
 
+// Hyperclay's trial bar, once the visitor closes it, leaves its Host action and a way back to the
+// page (hyperclay server-lib/drop/trial-bar.js): `window.hyperclayBar` holds its state, set before
+// this menu loads, and `hyperclay:bar` reports each change. Download copy is already in the menu.
+function attachBar({ addItem, removeItem }) {
+  const draw = (bar) => {
+    if (bar?.kind !== "trial" || !bar.dismissed) {
+      removeItem("clay.bar.host");
+      removeItem("clay.bar.show");
+      return;
+    }
+    const host = Array.isArray(bar.actions) ? bar.actions.find((action) => action?.id === "host") : null;
+    if (typeof host?.href === "string") addItem({ id: "clay.bar.host", label: "Host and share online", href: host.href });
+    if (typeof bar.show === "function") addItem({ id: "clay.bar.show", label: "Show draft bar", run: () => bar.show() });
+  };
+  document.addEventListener("hyperclay:bar", (event) => draw(event.detail));
+  draw(window.hyperclayBar);
+}
+
 // A visitor's menu holds exactly Undo, Redo, Download copy and Make your own copy (David, Nov 11):
-// no theme row, no page items, no Start over.
+// no theme row, no page items, no Start over. While Hyperclay's trial bar is closed it also holds
+// Host and share online and Show draft bar (David, Nov 11, sheet hosts review), and Earlier
+// drafts when this page has recovery copies (David, Nov 13).
 export function start() {
   if (document.querySelector('clay-editor-ui[data-clay-ui="menu"]')) return;
   const shell = createShell({ sections: [["clay.undo"], null], icon: GEAR, label: "Settings" });
   const { embedded, skin, addItem, removeItem, open, close, note, goo, beforeOpen } = shell;
   shell.mount(embedded ? [MENU_SAFETY, SHELL_BASE, skin ?? MENU_SKIN, MENU_TOUCH] : [MENU_SAFETY, SHELL_BASE, SHELL_FLOATING, MENU_SKIN, MENU_TOUCH]);
+  let recoveryMenu;
+  beforeOpen.push(() => {
+    if (typeof globalThis.indexedDB?.open !== "function" || !globalThis.IDBKeyRange) return;
+    recoveryMenu ??= import("../visitor-drafts/recovery-menu.js").then(async ({ attachRecoveryMenu }) => {
+      const { recoveryDrafts } = await import("../visitor-drafts.js");
+      attachRecoveryMenu(shell, recoveryDrafts);
+    }).catch((error) => {
+      recoveryMenu = null;
+      console.warn("visitor-menu: earlier drafts did not load", error);
+    });
+  });
   publishLooks();
   attachUndo({ addItem, beforeOpen });
   addItem({ id: "clay.download", label: "Download copy", run: () => window.clay.visitorDrafts.download() });
   addItem({ id: "clay.copy", label: "Make your own copy", href: copyUrl() });
+  attachBar({ addItem, removeItem });
   window.clay.menu = { addItem, removeItem, open, close, note, embedded, button: goo };
   document.dispatchEvent(new CustomEvent("clay:menu-ready"));
 }

package/src/plugins/quickcrop.js

@@ -13,6 +13,9 @@ import { bevelDialog, dismissOf, keepFocusIn } from "../ui/bevel-dialog.js";
 import { bevelButton } from "../ui/bevel-controls.js";
 import { installSkin } from "../ui/vendor-skin.js";
 import { CSS as SKIN, ROOTS as SKIN_ROOTS } from "../ui/skins/quickcrop.js";
+import { resolveTheme } from "../ui/theme.js";
+import { themed, partRules, markParts } from "../ui/theme-parts.js";
+import { style } from "../lib/hostile-css.js";
 
 const WIDTH = 844;
 
@@ -24,80 +27,136 @@ function isThemodal(m) {
     typeof m.onYes === "function" && "html" in m;
 }
 
-export const bevelCropAdapter = {
-  // The stage has to fit inside the panel: the overlay's 16px side inset, the panel's
-  // 1px border and the body's 22px padding a side; below it the header, the footer and
-  // the overlay's top inset. Widths come from clientWidth, which leaves out a classic
-  // scrollbar as the overlay does.
-  fit() {
-    const width = document.documentElement.clientWidth;
-    return {
-      width: Math.max(120, Math.min(WIDTH, width - 32) - 2 - 44),
-      height: Math.max(120, window.innerHeight - Math.min(96, window.innerHeight * 0.1) - 200),
-    };
-  },
-  open({ content, confirmLabel, onConfirm, onCancel }) {
-    const { root, overlay, panel, heading, body, footer, close } = bevelDialog({
-      zIndex: "2147483001", width: `${WIDTH}px`, closable: true, titled: true,
-    });
-    heading.textContent = "Crop image";
-    panel.setAttribute("aria-label", "Crop image");
-    body.append(content);
-    const confirm = bevelButton(confirmLabel, { variant: "primary", onClick: () => onConfirm() });
-    footer.append(confirm);
-
-    close.addEventListener("click", () => onCancel());
-    panel.addEventListener("submit", (event) => event.preventDefault());
-    let pressedOnBackdrop = false;
-    overlay.addEventListener("mousedown", (event) => { pressedOnBackdrop = event.target === overlay; });
-    overlay.addEventListener("click", (event) => {
-      if (pressedOnBackdrop && event.target === overlay) onCancel();
-      pressedOnBackdrop = false;
-    });
-    // Capture, and stopped there, so a dialog underneath (a CMS confirm through
-    // clay.modal) does not take the same key as its own: Escape cancels this crop,
-    // Tab stays inside it.
-    const onKey = (event) => {
-      if (event.key === "Tab") {
+const TITLE = "Crop image";
+
+// The frame for one crop, in the theme captured for that crop. Measuring and opening
+// build the same frame, so the stage is sized for the padding, borders, heading and
+// button the person will actually see.
+function cropFrame(theme, confirmLabel, onConfirm = null) {
+  const frame = bevelDialog({ zIndex: "2147483001", width: `${WIDTH}px`, closable: true, titled: true, theme, surface: "crop" });
+  frame.heading.textContent = TITLE;
+  frame.panel.setAttribute("aria-label", TITLE);
+  const confirm = bevelButton(confirmLabel, {
+    variant: "primary", onClick: onConfirm, theme,
+    parts: ["dialog.button", "crop.button"], labelParts: ["dialog.buttonLabel", "crop.buttonLabel"],
+  });
+  frame.footer.append(confirm);
+  return { ...frame, confirm };
+}
+
+// The stage is quickcrop's; its parts take only a page's explicit crop.* declarations,
+// so dimming and crop lines keep their contrast unless the page asks otherwise.
+function themeStage(stage, theme) {
+  if (!themed(theme)) return;
+  const paint = (el, names) => {
+    if (!el) return;
+    markParts(el, theme, names);
+    style(el, partRules(theme, names, {}));
+  };
+  paint(stage, ["crop.stage"]);
+  paint(stage.querySelector(":scope > img"), ["crop.image"]);
+  paint(stage.querySelector(".qc-dim"), ["crop.dim"]);
+  paint(stage.querySelector(".qc-box"), ["crop.selection"]);
+  for (const corner of ["nw", "ne", "sw", "se"]) paint(stage.querySelector(`.qc-handle.qc-${corner}`), ["crop.handle", `crop.handle.${corner}`]);
+}
+
+// A themed frame is measured: a hidden copy is mounted for one layout read and removed,
+// without touching focus or the scroll lock. The room left for the stage is the body's
+// inner width, and the overlay's inner height less the empty panel. The exact Bevel
+// frame keeps its fixed allowances.
+function measure(theme, confirmLabel) {
+  const { root, overlay, panel, body } = cropFrame(theme, confirmLabel);
+  root.setAttribute("aria-hidden", "true");
+  style(root, ["visibility:hidden", "pointer-events:none"]);
+  document.body.append(root);
+  try {
+    const px = (value) => parseFloat(value) || 0;
+    const o = getComputedStyle(overlay), b = getComputedStyle(body);
+    const width = body.clientWidth - px(b.paddingLeft) - px(b.paddingRight);
+    const height = overlay.clientHeight - px(o.paddingTop) - px(o.paddingBottom) - panel.offsetHeight;
+    return { width: Math.max(1, Math.floor(width)), height: Math.max(1, Math.floor(height)) };
+  } finally {
+    root.remove();
+  }
+}
+
+export function createCropAdapter({ theme = null, confirmLabel = "Crop" } = {}) {
+  return {
+    // Unthemed, the stage fits inside the panel by fixed allowances: the overlay's 16px
+    // side inset, the panel's 1px border and the body's 22px padding a side; below it the
+    // header, the footer and the overlay's top inset. Widths come from clientWidth, which
+    // leaves out a classic scrollbar as the overlay does.
+    fit() {
+      if (themed(theme)) return measure(theme, confirmLabel);
+      const width = document.documentElement.clientWidth;
+      return {
+        width: Math.max(120, Math.min(WIDTH, width - 32) - 2 - 44),
+        height: Math.max(120, window.innerHeight - Math.min(96, window.innerHeight * 0.1) - 200),
+      };
+    },
+    open({ content, confirmLabel: label, onConfirm, onCancel }) {
+      const { root, overlay, panel, body, close, confirm } = cropFrame(theme, label, () => onConfirm());
+      themeStage(content, theme);
+      body.append(content);
+
+      close.addEventListener("click", () => onCancel());
+      panel.addEventListener("submit", (event) => event.preventDefault());
+      let pressedOnBackdrop = false;
+      overlay.addEventListener("mousedown", (event) => { pressedOnBackdrop = event.target === overlay; });
+      overlay.addEventListener("click", (event) => {
+        if (pressedOnBackdrop && event.target === overlay) onCancel();
+        pressedOnBackdrop = false;
+      });
+      // Capture, and stopped there, so a dialog underneath (a CMS confirm through
+      // clay.modal) does not take the same key as its own: Escape cancels this crop,
+      // Tab stays inside it.
+      const onKey = (event) => {
+        if (event.key === "Tab") {
+          event.stopPropagation();
+          keepFocusIn(panel, event);
+          return;
+        }
+        if (event.key !== "Escape") return;
         event.stopPropagation();
-        keepFocusIn(panel, event);
-        return;
-      }
-      if (event.key !== "Escape") return;
-      event.stopPropagation();
-      onCancel();
-    };
-    document.addEventListener("keydown", onKey, true);
-
-    // The page does not scroll behind the crop, as it did not under themodal. The
-    // previous value comes back, so a modal underneath keeps its own lock.
-    const overflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-
-    let done = false;
-    const finish = () => {
-      if (done) return;
-      done = true;
-      document.removeEventListener("keydown", onKey, true);
-      document.body.style.overflow = overflow;
-      root.remove();
-    };
-    // A modal opened on top supersedes this crop the way it supersedes itself: the
-    // crop is cancelled, so its promise settles and the next crop can open.
-    dismissOf.set(root, () => { finish(); onCancel(); });
-
-    root.setAttribute("aria-hidden", "false");
-    document.body.append(root);
-    confirm.focus();
-
-    return { close: finish };
-  },
-};
+        onCancel();
+      };
+      document.addEventListener("keydown", onKey, true);
+
+      // The page does not scroll behind the crop, as it did not under themodal. The
+      // previous value comes back, so a modal underneath keeps its own lock.
+      const overflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+
+      let done = false;
+      const finish = () => {
+        if (done) return;
+        done = true;
+        document.removeEventListener("keydown", onKey, true);
+        document.body.style.overflow = overflow;
+        root.remove();
+      };
+      // A modal opened on top supersedes this crop the way it supersedes itself: the
+      // crop is cancelled, so its promise settles and the next crop can open.
+      dismissOf.set(root, () => { finish(); onCancel(); });
+
+      root.setAttribute("aria-hidden", "false");
+      document.body.append(root);
+      confirm.focus();
+
+      return { close: finish };
+    },
+  };
+}
+
+// The exact Bevel frame, for callers that want ClayJS's crop without the page's theme.
+export const bevelCropAdapter = createCropAdapter();
 
 export function quickcrop(file, options = {}) {
   const modal = options.modal ?? "auto";
   const framed = modal === "auto" || isThemodal(modal);
-  return vendorQuickcrop(file, framed ? { ...options, modal: bevelCropAdapter } : options);
+  if (!framed) return vendorQuickcrop(file, options);
+  const adapter = createCropAdapter({ theme: resolveTheme(), confirmLabel: options.labels?.confirm ?? "Crop" });
+  return vendorQuickcrop(file, { ...options, modal: adapter });
 }
 
 export default quickcrop;

package/src/plugins/sortable.js

@@ -217,15 +217,31 @@ function makeSortable(sortableElem, Sortable, record = loose) {
   // Add onsorting callback if attribute exists (fires during drag)
   const onsortingCode = sortableElem.getAttribute('onsorting');
   if (onsortingCode) {
-    options.onMove = function(evt) {
-      if (!record.admitted) return;
-      try {
-        const asyncFn = new Function(`return (async function(evt) { ${onsortingCode} })`)();
-        asyncFn.call(sortableElem, evt);
-      } catch (error) {
-        console.error('Error in onsorting execution:', error);
-      }
-    };
+    // Sortable reads onMove's return value (false cancels the move, 1 or -1 picks a
+    // side), so the handler runs synchronously and its value goes back. A handler that
+    // awaits cannot answer in time; it still runs, as an async function, and Sortable
+    // gets no answer from it.
+    // Code that awaits compiles as async: a plain function would read `await (x)` as a
+    // call to a function named await and throw on every move.
+    let onsorting = null;
+    try {
+      onsorting = /\bawait\b/.test(onsortingCode)
+        ? new Function(`return (async function(evt) { ${onsortingCode} })`)()
+        : new Function('evt', onsortingCode);
+    } catch (error) {
+      console.error('Error in onsorting compilation:', error);
+    }
+    if (onsorting) {
+      options.onMove = function(evt) {
+        if (!record.admitted) return;
+        try {
+          const answer = onsorting.call(sortableElem, evt);
+          return answer instanceof Promise ? undefined : answer;
+        } catch (error) {
+          console.error('Error in onsorting execution:', error);
+        }
+      };
+    }
   }
 
   // After a drop, run any author onsorted code, then notify reactive libraries.

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

@@ -76,6 +76,22 @@ export function applyKeys(data, keys, merge3) {
 export const isChain = (value) => isPlain(value) && typeof value.tab === "string" && typeof value.reset === "string" && Array.isArray(value.ops);
 export const recoveryMark = (copy) => isChain(copy) ? `op:${copy.tab}:${copy.ops.at(-1)?.seq ?? copy.acked ?? 0}` : foreignMark(copy);
 
+// Ended journals carry only the fields they changed; other fields use the served page.
+export function recoveryRecord(copy, seed) {
+  if (isPlain(copy) && copy.v === 1 && isPlain(copy.data)) return clone(copy);
+  if (!isChain(copy) || !copy.ops.length) return null;
+  const data = clone(seed);
+  let unit = null;
+  for (const op of copy.ops) {
+    for (const [name, pair] of Object.entries(op.keys ?? {})) {
+      if ("m" in pair) Object.defineProperty(data, name, { value: clone(pair.m), enumerable: true, writable: true, configurable: true });
+      else delete data[name];
+    }
+    if (op.unit !== undefined) unit = op.unit.to;
+  }
+  return { v: 1, savedAt: copy.ops.at(-1).savedAt, data, ...(unit && { live: clone(unit.live), blockeditor: clone(unit.blockeditor) }) };
+}
+
 // Cleanup needs proof for this exact chain, even when its generation has ended.
 export function settled(chain, meta) {
   if (isPlain(chain) && meta.recovery?.includes(recoveryMark(chain))) return true;
@@ -123,7 +139,7 @@ function foreignBase(line, { record, seen, direct, v1base, meta }) {
  * @param {?Object} [input.seen] - the latest cache copy the caller saw at the draft's key
  * @param {boolean} [input.direct] - a storage event says `local` replaced exactly that copy
  */
-export function commit(stored, { seed, newId, now, merge3, unitMark, marker = null, resets = [], chains = [], local = null, seen = null, direct = false }) {
+export function commit(stored, { seed, newId, now, merge3, same, unitMark, marker = null, resets = [], chains = [], local = null, seen = null, direct = false, recovery = null, copies = [] }) {
   const meta = stored.meta ? clone(stored.meta) : emptyMeta(marker);
   // A database the browser cleared counts on from this ClayJS's cache, so the cache never
   // reads as newer than the record.
@@ -260,6 +276,36 @@ export function commit(stored, { seed, newId, now, merge3, unitMark, marker = nu
     out.applied[chain.tab] = at;
   }
 
+  if (recovery) {
+    const found = copies.find(([mark]) => mark === recovery.mark);
+    if (!found) throw new Error("That draft is no longer available. Open the list again.");
+    if (recovery.type === "remove") {
+      meta.recovery = (meta.recovery ?? []).filter((mark) => mark !== recovery.mark);
+      out.dropped.push(recovery.mark);
+      out.removedMark = recovery.mark;
+      out.changed = true;
+    } else if (recovery.type === "restore" && recovery.reset === meta.reset) {
+      const chosen = recoveryRecord(found[1], seed);
+      if (!chosen) throw new Error("This draft cannot be restored by this version.");
+      if (meta.recovery?.includes(recovery.mark)) meta.recovery = [recovery.mark, ...meta.recovery.filter((mark) => mark !== recovery.mark)];
+      const alreadyKept = record && copies.some(([mark, copy]) => {
+        if (!meta.recovery?.includes(mark)) return false;
+        const kept = recoveryRecord(copy, seed);
+        return kept && same(record.data, kept.data) && same(unitOf(record), unitOf(kept));
+      });
+      if (record && !alreadyKept) recover(record);
+      record = {
+        v: 1, savedAt: new Date(now).toISOString(), id: newId(),
+        ancestry: lineage([], record, meta), data: chosen.data,
+        ...(chosen.blockeditor && { live: chosen.live, blockeditor: chosen.blockeditor }),
+      };
+      meta.unit = unitMark(unitOf(record));
+      meta.rev++;
+      out.changed = true;
+      out.restoredCopy = true;
+    }
+  }
+
   for (const [tab, entry] of Object.entries(meta.tabs)) {
     if (now - (entry.at ?? 0) > TAB_TTL_MS) {
       delete meta.tabs[tab];
@@ -285,7 +331,8 @@ export function transact(drafts, key, input, options) {
     const stored = { meta: parse(raw.meta), record: parse(raw.record), v1base: parse(raw.v1base) };
     const rows = raw.rows.map(([name, text]) => [name, parse(text)]);
     const given = input(stored);
-    const result = commit(stored, { ...given, chains: [...rows.map(([, chain]) => chain), ...(given.chains ?? [])] });
+    const copies = (raw.recovery ?? []).map(([name, text]) => [name.slice((key + ":recovery:").length), parse(text)]);
+    const result = commit(stored, { ...given, copies, chains: [...rows.map(([, chain]) => chain), ...(given.chains ?? [])] });
     const puts = [];
     const deletes = [];
     if (result.changed) {
@@ -297,7 +344,7 @@ export function transact(drafts, key, input, options) {
     if (result.conflicts.length) puts.push([conflictKey(key), JSON.stringify(result.conflicts[result.conflicts.length - 1])]);
     for (const copy of result.recovered) puts.push([recoveryKey(key, recoveryMark(copy)), JSON.stringify(copy)]);
     for (const mark of result.dropped) deletes.push(recoveryKey(key, mark));
-    for (const [name, chain] of rows) if (settled(chain, result.meta)) deletes.push(name);
+    for (const [name, chain] of rows) if (settled(chain, result.meta) || (result.removedMark && isChain(chain) && recoveryMark(chain) === result.removedMark)) deletes.push(name);
     return { puts, deletes, result };
   }, options);
 }