@panphora/clayjs 1.11.3 → 1.12.1

package/src/core/edit-mode.js

@@ -1,13 +1,13 @@
 // Edit mode system - combines the editmode toggle with page type setting.
 // Loads in BOTH view and edit mode: toggleEditMode must exist in view mode
 // (it's the way IN), and setPageTypeOnPageLoad marks <html> in either mode.
-import { isEditMode, isOwner } from "./is-edit-mode.js";
+import { isDraftMode, isEditMode, isOwner } from "./is-edit-mode.js";
 import onDomReady from "../lib/dom-ready.js";
 import { addDocumentTransform } from "./snapshot.js";
 
 export function toggleEditMode() {
   const url = new URL(window.location.href);
-  const newMode = isEditMode ? "false" : "true";
+  const newMode = isEditMode && !isDraftMode ? "false" : "true";
   url.searchParams.set('editmode', newMode);
   window.location.href = url.toString();
 }
@@ -23,6 +23,11 @@ export function setPageTypeOnPageLoad () {
   onDomReady(() => {
     document.documentElement.setAttribute("editmode", isEditMode ? "true" : "false");
     document.documentElement.setAttribute("pageowner", isOwner ? "true" : "false");
+    if (isDraftMode) {
+      document.documentElement.setAttribute("draftmode", "true");
+    } else {
+      document.documentElement.removeAttribute("draftmode");
+    }
   });
 }
 

package/src/core/host-meta.js

@@ -14,6 +14,7 @@
  */
 
 import { saveToken } from "./host-attrs.js";
+import { isDraftMode } from "./is-edit-mode.js";
 
 const META_PATH = "/_/meta";
 const META_TIMEOUT_MS = 6000;
@@ -67,6 +68,7 @@ let refreshing = null;
  * @returns {Promise<{spec: ?number, extensions: string[], document: ?Object}>}
  */
 export function hostMeta({ fresh = false } = {}) {
+  if (isDraftMode) return Promise.resolve(bareHost());
   if (!fresh) {
     if (!inFlight) inFlight = fetchMeta().catch(bareHost);
     return inFlight;

package/src/core/is-edit-mode.js

@@ -1,6 +1,7 @@
 import cookie from "../lib/cookie.js";
 import query from "../lib/query.js";
 import { hasSaveToken, servedStaleToken, servedSiteVisibility } from "./host-attrs.js";
+import { draftEligible } from "./draft-mode.js";
 
 // Edit-mode precedence: an explicit ?editmode=true|false URL param wins, then an
 // authored `viewonly` attribute on <html> (a tool page that must never save its
@@ -11,7 +12,9 @@ import { hasSaveToken, servedStaleToken, servedSiteVisibility } from "./host-att
 // a save token the host put on the root, then the isAdminOfCurrentResource cookie. The
 // global is for standalone uses (demos, htmlclay, any self-saving file) that are
 // always editable and have no owner cookie; setting it before clayjs loads turns
-// on the edit-only modules.
+// on the edit-only modules. On a page that opts into visitor drafts, draft mode
+// comes before ?editmode=true unless the owner cookie is present, and before the
+// owner cookie otherwise.
 //
 // The token sits above the cookie because it is the stronger claim and often the
 // only one visible: the host minted it for this response and nothing else, while
@@ -37,19 +40,34 @@ if (typeof window !== "undefined") {
 const isViewOnlyDocument =
   typeof document !== "undefined" && document.documentElement.hasAttribute("viewonly");
 
-const isEditMode = query.editmode
-  ? query.editmode === "true" // takes precedence over viewonly, the global, token and cookie
-  : isViewOnlyDocument || servedStaleToken()
-    ? false
-    : forcedEditMode != null
-      ? forcedEditMode
-      : hasSaveToken() || Boolean(cookie.get("isAdminOfCurrentResource"));
+const draftCandidate = typeof document !== "undefined" && draftEligible();
+const ownerCookie = Boolean(cookie.get("isAdminOfCurrentResource"));
 
-const isOwner = Boolean(cookie.get("isAdminOfCurrentResource"));
+const isDraftMode =
+  draftCandidate &&
+  query.editmode !== "false" &&
+  !(query.editmode === "true" && ownerCookie) &&
+  !isViewOnlyDocument &&
+  !servedStaleToken() &&
+  forcedEditMode == null &&
+  !hasSaveToken();
+
+const isEditMode = isDraftMode
+  ? true
+  : query.editmode
+    ? query.editmode === "true" // takes precedence over viewonly, the global, token and cookie
+    : isViewOnlyDocument || servedStaleToken()
+      ? false
+      : forcedEditMode != null
+        ? forcedEditMode
+        : hasSaveToken() || ownerCookie;
+
+const isOwner = ownerCookie;
 
 const siteVisibility = servedSiteVisibility;
 
 export {
+  isDraftMode,
   isEditMode,
   isOwner,
   siteVisibility

package/src/core/page-data.js

@@ -132,6 +132,12 @@ async function defaultWriteModules() {
   return { ...save, ...saveCore, ...etag, ...warning, ...editMode };
 }
 
+async function draftRefusal() {
+  const { isDraftMode } = await import("./is-edit-mode.js");
+  if (!isDraftMode) return null;
+  return refusal("DataUnavailableInDraft", "Page data is kept in this browser for this visitor.");
+}
+
 export function createPageDataApi({
   supports = hostSupports,
   token = saveToken,
@@ -151,6 +157,9 @@ export function createPageDataApi({
   }
 
   async function readData(rules) {
+    const draft = await draftRefusal();
+    if (draft) throw draft;
+
     if (!(await supports(DATA_READ))) {
       throw refusal("DataReadUnsupported", "This host does not support reading page data.");
     }
@@ -201,6 +210,9 @@ export function createPageDataApi({
   }
 
   async function writeData(values, { rules, ifMatch } = {}) {
+    const draft = await draftRefusal();
+    if (draft) throw draft;
+
     if (!(await supports(DATA_WRITE))) {
       throw refusal("DataWriteUnsupported", "This host does not support writing page data.");
     }

package/src/core/save-core.js

@@ -7,7 +7,8 @@
  * For full save system with state management, use save.js instead.
  */
 
-import { isEditMode } from "./is-edit-mode.js";
+import { isEditMode, isDraftMode } from "./is-edit-mode.js";
+import { draftTransport } from "./draft-mode.js";
 import { consumeUserDriven, consumeExplicitSave, markUserDriven } from "../lib/user-gesture.js";
 import { saveToken } from "./host-attrs.js";
 import { lastSeenEtag, conditionalSaves, recordEtag } from "./etag.js";
@@ -379,6 +380,24 @@ function resolveSaveUrl(path) {
   return new URL(path, origin).href;
 }
 
+function draftResponse(status, body) {
+  const text = JSON.stringify(body);
+  return { ok: status >= 200 && status < 300, status, statusText: status === 200 ? "OK" : "Insufficient Storage", text: () => Promise.resolve(text) };
+}
+
+function sendToDraftStore(content) {
+  const send = draftTransport();
+  if (!send) return Promise.resolve(draftResponse(503, { msg: "Saving in this browser is not ready yet", msgType: "error", code: "draft-not-ready" }));
+  return Promise.resolve().then(() => {
+    try {
+      send(content);
+      return draftResponse(200, { msg: "Saved in this browser", msgType: "success" });
+    } catch (error) {
+      return draftResponse(507, { msg: "Couldn't save in this browser. Storage is full or turned off.", msgType: "error", code: error.code || "draft-storage" });
+    }
+  });
+}
+
 /**
  * Send one save and decode one response.
  *
@@ -414,7 +433,7 @@ function sendOnce(content, saveId, etag) {
   const { url, options } = buildSaveRequest(content, userDriven, controller.signal, saveId, etag, keepalive);
   rememberSentId(saveId);
 
-  return fetch(url, options)
+  return (isDraftMode ? sendToDraftStore(content) : fetch(url, options))
     .then(res => res.text().then(text => {
       let data = {};
       if (text) {
@@ -689,6 +708,7 @@ export function replacePageWith(url, callback = () => {}) {
 
     if (!isEditMode) return done(skippedResult('Not in edit mode'));
     if (saveInProgress) return done(skippedResult('Save already in progress'));
+    if (isDraftMode) return done(false);
 
     // Resolved against the document's real location, not a <base href> the page
     // may have set.

package/src/core/save.js

@@ -11,7 +11,7 @@
 
 import throttle from "../lib/throttle.js";
 import Mutation from "../lib/mutation.js";
-import { isEditMode, isOwner } from "./is-edit-mode.js";
+import { isDraftMode, isEditMode, isOwner } from "./is-edit-mode.js";
 import {
   saveHtml,
   getPageContents,
@@ -742,7 +742,7 @@ export async function saveOverwritingConflict(callback = () => {}) {
  * @param {string} url - URL to fetch from
  */
 export function replacePageWith(url) {
-  if (!isEditMode) {
+  if (!isEditMode || isDraftMode) {
     return;
   }
 

package/src/core/unsaved-warning.js

@@ -15,7 +15,8 @@
  * Requires the 'save-system' module (automatically included as dependency).
  */
 
-import { isEditMode } from "./is-edit-mode.js";
+import { isEditMode, isDraftMode } from "./is-edit-mode.js";
+import { draftStoreFailed, flushDraft } from "./draft-mode.js";
 import { captureForDirtyCheck } from "./snapshot.js";
 import { getLastSavedDirty } from "./save.js";
 import { logUnloadDiffSync, preloadIfEnabled } from "../lib/autosave-debug.js";
@@ -52,6 +53,7 @@ export function hasUnsavedChanges() {
   // Work outside the DOM first: it needs no capture, and a capture that throws
   // must not hide it. The demo plugin does not save it either, so it warns there too.
   if (hasUnsavedState()) return true;
+  if (isDraftMode) return draftStoreFailed();
 
   // The demo plugin saves the page's bytes into this browser's own storage, so
   // leaving loses none of them.
@@ -84,7 +86,8 @@ window.addEventListener('beforeunload', (event) => {
     return;
   }
 
-  if (!hasUnsavedChanges()) return;
+  const flushed = isDraftMode ? flushDraft() : true;
+  if (flushed && !hasUnsavedChanges()) return;
 
   event.preventDefault();
   event.returnValue = '';

package/src/lib/root-attrs.js

@@ -94,7 +94,7 @@ export const HOST_TOKEN_ATTRS = [
 ];
 
 // This library's own root state, and this tab's UI truth.
-export const ROOT_LIBRARY_ATTRS = ["savestatus", "editmode", "pageowner"];
+export const ROOT_LIBRARY_ATTRS = ["savestatus", "editmode", "pageowner", "draftmode"];
 
 // Never copied between tabs: not written onto this root by an incoming morph, not
 // sent out on a sync broadcast.

package/src/loader-logic.js

@@ -55,6 +55,7 @@ export const PLUGIN_PATHS = {
   // verify is sent as the ordinary full serialization, so the floor is the behaviour
   // it replaces. `exclude=source` turns it off.
   source:    { path: "plugins/source.js",          editOnly: true,  default: true },
+  "visitor-drafts": { path: "plugins/visitor-drafts.js", editOnly: false, default: false },
 };
 
 // One literal import per module the loader can ask for, so a bundler can see the
@@ -68,6 +69,7 @@ export const PLUGIN_PATHS = {
 // PLUGIN_PATHS has an entry here and that each entry imports the file it names.
 export const MODULES = {
   "core/is-edit-mode.js":       () => import("./core/is-edit-mode.js"),
+  "core/draft-mode.js": () => import("./core/draft-mode.js"),
   "lib/region-policy.js":       () => import("./lib/region-policy.js"),
   "lib/mutation.js":            () => import("./lib/mutation.js"),
   "core/edit-mode.js":          () => import("./core/edit-mode.js"),
@@ -100,12 +102,13 @@ export const MODULES = {
   "plugins/wire.js":            () => import("./plugins/wire.js"),
   "plugins/ai-edit.js":         () => import("./plugins/ai-edit.js"),
   "plugins/demo.js":            () => import("./plugins/demo.js"),
+  "plugins/visitor-drafts.js": () => import("./plugins/visitor-drafts.js"),
   "plugins/source.js":          () => import("./plugins/source.js"),
 };
 
 // `source` is last on purpose: its install captures a save clone, so it wants every
 // plugin that registers a document transform to have registered it first.
-const PLUGIN_ORDER = ["richclay", "indicator", "sortable", "undo", "quickcrop", "upload", "people", "cms", "sync", "live", "wire", "ai-edit", "demo", "source"];
+const PLUGIN_ORDER = ["visitor-drafts", "richclay", "indicator", "sortable", "undo", "quickcrop", "upload", "people", "cms", "sync", "live", "wire", "ai-edit", "demo", "source"];
 
 // A plugin that cannot do its whole job alone. hypercms reads the cropper through
 // a capability lookup (`clay.quickcrop`) and silently uploads the raw file when it
@@ -143,7 +146,15 @@ function parseCsv(params, key, enabled, apply) {
   }
 }
 
-export function resolveModules(params, isEditMode) {
+// Each of these talks to the host or writes outside the visitor's own record, so a
+// page that keeps its edits in this browser cannot carry them.
+const DRAFT_DROPS = ["sync", "live", "upload", "quickcrop", "cms", "people", "wire", "ai-edit", "demo", "source"];
+
+// [refetch-on-save] swaps its element for a fresh GET of the same URL after every
+// save, which on a visitor's own draft is a request to the host.
+const DRAFT_DROPS_CORE = ["attrs/refetch-on-save.js"];
+
+export function resolveModules(params, isEditMode, { isDraftMode = false } = {}) {
   const core = [...CORE_WAVES.always];
   if (isEditMode) core.push(...CORE_WAVES.editOnly);
 
@@ -166,6 +177,14 @@ export function resolveModules(params, isEditMode) {
     for (const implied of IMPLIES[name] || []) enabled.add(implied);
   }
   for (const name of excluded) enabled.delete(name);
+  if (isDraftMode) {
+    for (const name of DRAFT_DROPS) enabled.delete(name);
+    for (const path of DRAFT_DROPS_CORE) {
+      const at = core.indexOf(path);
+      if (at > -1) core.splice(at, 1);
+    }
+    enabled.add("visitor-drafts");
+  }
 
   const plugins = [];
   for (const name of PLUGIN_ORDER) {

package/src/loader.js

@@ -14,6 +14,8 @@ function domReady() {
 // no clayjs at all.
 export async function boot(base, params, readyResolve) {
   initTheme();
+  const draftMode = await MODULES["core/draft-mode.js"]();
+  draftMode.noteBootParams(params);
 
   await domReady();                                    // Mutation observes document.body
                                                        // unconditionally, and a <head> placement
@@ -30,14 +32,16 @@ export async function boot(base, params, readyResolve) {
 
   const regionPolicy = await MODULES["lib/region-policy.js"]();
 
-  const plan = resolveModules(params, isEditMode);
+  const { isDraftMode } = editMode;
+
+  const plan = resolveModules(params, isEditMode, { isDraftMode });
   const loaded = {};
 
   for (const path of plan.core) {
     loaded[path] = await MODULES[path](); // sequential: order is load-bearing
   }
 
-  assembleCore(loaded, { isEditMode, isOwner, siteVisibility }, regionPolicy); // window.clay MUST be assembled
+  assembleCore(loaded, { isDraftMode, isEditMode, isOwner, siteVisibility }, regionPolicy); // window.clay MUST be assembled
                                                                // before any plugin import
 
   for (const path of plan.plugins) {
@@ -69,7 +73,7 @@ export async function boot(base, params, readyResolve) {
   document.dispatchEvent(new CustomEvent("clay:ready", { detail: { clay: window.clay } }));
 }
 
-function assembleCore(loaded, { isEditMode, isOwner, siteVisibility }, regionPolicy) {
+function assembleCore(loaded, { isDraftMode, isEditMode, isOwner, siteVisibility }, regionPolicy) {
   const clay = window.clay;
 
   const mutation = loaded["lib/mutation.js"];
@@ -77,6 +81,7 @@ function assembleCore(loaded, { isEditMode, isOwner, siteVisibility }, regionPol
 
   Object.assign(clay, {
     toggleEditMode: editModeMod.toggleEditMode,
+    isDraftMode,
     isEditMode,
     isOwner,
     siteVisibility,
@@ -148,6 +153,8 @@ function attachPluginMember(path, mod, loaded) {
     clay.quickcrop = mod.quickcrop || mod.default;
   } else if (path === "plugins/source.js") {
     clay.source = mod.source || mod.default;
+  } else if (path === "plugins/visitor-drafts.js") {
+    clay.visitorDrafts = mod.visitorDrafts;
   }
 }
 

package/src/plugins/visitor-drafts/bottom-ui.js

@@ -0,0 +1,31 @@
+export const BOTTOM_UI_CHANGED = "clay:bottom-ui-changed";
+
+export function announceBottomUi() {
+  document.dispatchEvent(new CustomEvent(BOTTOM_UI_CHANGED));
+}
+
+export function bottomBarHeight(x, skip) {
+  const h = window.innerHeight;
+  let raise = 0;
+  const hits = document.elementsFromPoint ? document.elementsFromPoint(x, h - 3) : [];
+  for (const hit of hits) {
+    for (let el = hit; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+      if (skip(el)) break;
+      const position = getComputedStyle(el).position;
+      if (position === "fixed" || position === "sticky") {
+        const height = Math.ceil(h - el.getBoundingClientRect().top);
+        if (height < h / 3) raise = Math.max(raise, height);
+        break;
+      }
+    }
+  }
+  return raise;
+}
+
+export function promptPanel(box) {
+  const panel = document.querySelector("#hcp:not([hidden])");
+  if (!panel) return 0;
+  const r = panel.getBoundingClientRect();
+  if (!r.width || !r.height || r.right <= box.left || r.left >= box.right) return 0;
+  return Math.ceil(window.innerHeight - r.top);
+}

package/src/plugins/visitor-drafts/intro-style.js

@@ -0,0 +1,19 @@
+export const INTRO_CSS = `html:has(> body > .clay-intro) { height: auto !important; overflow-y: auto !important; }
+body:has(> .clay-intro) { height: auto !important; overflow: visible !important; }
+.clay-intro {
+  position: relative;
+  display: block;
+}
+.clay-intro__close {
+  position: absolute; top: 10px; right: 10px; z-index: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; min-height: 0; margin: 0; padding: 0;
+  border: 0; border-radius: 4px; background: none; box-shadow: none;
+  color: inherit; opacity: .55; cursor: pointer; line-height: 1;
+}
+.clay-intro .clay-intro__close:hover { opacity: 1; background: none; color: inherit; }
+.clay-intro__close:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
+.clay-intro__close svg { display: block; width: 12px; height: 12px; fill: currentColor; stroke: none; }
+@media (pointer: coarse) { .clay-intro__close { width: 44px; height: 44px; top: 4px; right: 4px; } }
+@media print { .clay-intro { display: none; } }
+`;

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

@@ -0,0 +1,118 @@
+import { INTRO_CSS } from "./intro-style.js";
+import { announceBottomUi } from "./bottom-ui.js";
+
+export const COPY = {
+  close: "Hide this introduction",
+  label: (appName) => `About ${appName}`,
+};
+
+const FOCUSABLE = "a[href], button, input, select, textarea, [tabindex]:not([tabindex='-1'])";
+const TEXT_ENTRY = "textarea, select";
+const NON_TEXT_INPUT = ["checkbox", "radio", "button", "submit", "reset", "file"];
+
+function isTextEntry(el) {
+  if (el.isContentEditable || el.closest(TEXT_ENTRY)) return true;
+  if (el.tagName !== "INPUT") return false;
+  return NON_TEXT_INPUT.indexOf(el.type) < 0;
+}
+
+function forced() {
+  try {
+    return new URLSearchParams(window.location.search).get("intro") === "1";
+  } catch {
+    return false;
+  }
+}
+
+function stylesOnce() {
+  if (document.getElementById("clay-intro-style")) return;
+  const style = document.createElement("style");
+  style.id = "clay-intro-style";
+  style.setAttribute("clay", "editor-ui");
+  style.textContent = INTRO_CSS;
+  document.head.appendChild(style);
+}
+
+function focusApp() {
+  const next = [...document.querySelectorAll(FOCUSABLE)].find(
+    (el) => !el.disabled && !isTextEntry(el) && !el.closest("[clay~='editor-ui']") && (typeof el.checkVisibility !== "function" || el.checkVisibility())
+  );
+  if (next) next.focus({ preventScroll: true });
+  else document.body.focus({ preventScroll: true });
+}
+
+export function mountIntro({ memory, template, appName, hadDraft }) {
+  if (!template || !template.content.textContent.trim() && !template.content.querySelector("img, svg, video, canvas")) return null;
+  if (!forced()) {
+    if (memory.get().intro.done || hadDraft) return null;
+    if (window.location.hash) return null;
+    if (window.matchMedia && window.matchMedia("print").matches) return null;
+  }
+  return mount({ memory, template, appName });
+}
+
+function mount({ memory, template, appName }) {
+  stylesOnce();
+
+  const section = document.createElement("section");
+  section.className = "clay-intro";
+  section.setAttribute("clay", "editor-ui");
+  section.setAttribute("sap-ignore", "");
+  section.setAttribute("aria-label", COPY.label(appName));
+  section.appendChild(template.content.cloneNode(true));
+
+  const close = document.createElement("button");
+  close.type = "button";
+  close.className = "clay-intro__close";
+  close.setAttribute("aria-label", COPY.close);
+  close.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"><path d="M1.4 0 6 4.6 10.6 0 12 1.4 7.4 6 12 10.6 10.6 12 6 7.4 1.4 12 0 10.6 4.6 6 0 1.4z"/></svg>';
+  section.appendChild(close);
+
+  let gone = false;
+  let frame = 0;
+
+  function dismiss(reason) {
+    if (gone) return;
+    gone = true;
+    removeEventListener("scroll", onScroll);
+    if (frame) cancelAnimationFrame(frame);
+    const height = section.getBoundingClientRect().height;
+    const before = window.scrollY;
+    memory.get().intro.done = reason;
+    memory.save();
+    section.remove();
+    if (reason === "scrolled") {
+      const locked = /hidden|clip/.test(getComputedStyle(document.body).overflowY + getComputedStyle(document.documentElement).overflowY);
+      window.scrollTo(0, locked ? 0 : Math.max(0, before - height));
+    }
+    announceBottomUi();
+    if (reason !== "scrolled") focusApp();
+  }
+
+  function onScroll() {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      const bottom = section.getBoundingClientRect().bottom;
+      const atEnd = scrollY > 0 && scrollY + innerHeight >= document.documentElement.scrollHeight - 1;
+      if (bottom < 1 || (atEnd && bottom < innerHeight)) dismiss("scrolled");
+    });
+  }
+
+  section.addEventListener("click", (event) => {
+    if (event.target.closest(".clay-intro__close, [visitor-intro-dismiss]")) {
+      dismiss("closed");
+      return;
+    }
+    if (event.target.closest("[visitor-intro-start]")) {
+      event.preventDefault();
+      window.scrollTo({ top: window.scrollY + section.getBoundingClientRect().bottom, behavior: "smooth" });
+    }
+  });
+
+  document.body.prepend(section);
+  announceBottomUi();
+  addEventListener("scroll", onScroll, { passive: true });
+
+  return section;
+}