@panphora/clayjs 0.7.4 → 1.1.0

package/src/loader.js

@@ -1,16 +1,21 @@
-import { resolveModules } from "./loader-logic.js";
+import { resolveModules, MODULES } from "./loader-logic.js";
 import onDomReady from "./lib/dom-ready.js";
 
 function domReady() {
   return new Promise((resolve) => onDomReady(resolve));
 }
 
+// `base` has been unused since 1.1.0 (the loader imports through MODULES) and
+// stays anyway: /v1/clay.js and /v1/src/loader.js are cached independently, so
+// for a while after a deploy a browser can pair either file with the other's
+// previous release. A call shape that differs between them leaves the page with
+// no clayjs at all.
 export async function boot(base, params, readyResolve) {
   await domReady();                                    // Mutation observes document.body
                                                        // unconditionally, and a <head> placement
                                                        // would otherwise observe null
 
-  const editMode = await import(base + "/src/core/is-edit-mode.js");
+  const editMode = await MODULES["core/is-edit-mode.js"]();
   const { isEditMode, isOwner } = editMode;
 
   // richclay's vendor build detects edit mode via this legacy global; set it
@@ -19,13 +24,13 @@ export async function boot(base, params, readyResolve) {
   // and a conflicting leftover would make richclay disable itself.
   window.__hyperclayEditMode = isEditMode;
 
-  const regionPolicy = await import(base + "/src/lib/region-policy.js");
+  const regionPolicy = await MODULES["lib/region-policy.js"]();
 
   const plan = resolveModules(params, isEditMode);
   const loaded = {};
 
   for (const path of plan.core) {
-    loaded[path] = await import(base + "/src/" + path); // sequential: order is load-bearing
+    loaded[path] = await MODULES[path](); // sequential: order is load-bearing
   }
 
   assembleCore(loaded, { isEditMode, isOwner }, regionPolicy); // window.clay MUST be assembled
@@ -39,7 +44,7 @@ export async function boot(base, params, readyResolve) {
     // `ready` exports, never their evaluation.)
     let mod;
     try {
-      mod = await import(base + "/src/" + path);
+      mod = await MODULES[path]();
     } catch (err) {
       console.error(`clayjs: plugin "${path}" failed to load, continuing without it:`, err);
       continue;
@@ -81,6 +86,7 @@ function assembleCore(loaded, { isEditMode, isOwner }, regionPolicy) {
   if (save) {
     const saveFn = save.savePage || save.default;
     saveFn.force = save.savePageForce;
+    saveFn.overwrite = save.saveOverwritingConflict;
     clay.save = saveFn;
   }
   if (snapshot) {

package/src/plugins/demo.js

@@ -3,7 +3,7 @@
 //
 //   <html autosave demo-key="my-page-v1">          <!-- both attributes optional -->
 //   <script>window.clayEditMode = true;</script>   <!-- before the clay.js tag -->
-//   <script src="https://clayjs.com/clay.js?plugins=demo"></script>
+//   <script src="https://clayjs.com/v1/clay.js?plugins=demo"></script>
 //
 // The fetch shim answers POST /_/save the way a clayjs server would, so the
 // whole real pipeline (savestatus, events, autosave, ⌘S) runs unchanged. The
@@ -112,7 +112,7 @@ async function restore() {
   // attribute, never the element: [contenteditable] cannot join CHROME_SELECTOR,
   // whose matches are removed outright, and doing that deletes real content.
   if (!isEditMode) {
-    for (const el of doc.querySelectorAll("[editable][contenteditable]")) {
+    for (const el of doc.querySelectorAll(":is([editable], [clay-editable])[contenteditable]")) {
       el.removeAttribute("contenteditable");
     }
   }

package/src/plugins/indicator.js

@@ -1,6 +1,12 @@
 import { isEditMode } from "../core/is-edit-mode.js";
 import onDomReady from "../lib/dom-ready.js";
 
+// No 'conflict' here on purpose. core/save-conflict-notice.js owns that state now,
+// and it ships in every document rather than only the ones that turned this chip on.
+// Both listen to clay:save-conflict, so keeping a label here put a chip in the corner
+// saying the same thing as the bar at the same moment. Dropping it from this side
+// leaves core unaware that this plugin exists, which is the direction that
+// dependency has to point.
 const LABELS = {
   saving: "Saving…",
   saved: "Saved",
@@ -8,6 +14,11 @@ const LABELS = {
   offline: "Offline, not saved",
 };
 
+// States that stay on screen instead of fading, because 'saving' is still in flight.
+const STICKY = new Set(["saving"]);
+
+const ALARMING = new Set(["error", "offline"]);
+
 let el = null;
 let hideTimer = null;
 
@@ -34,11 +45,11 @@ function show(state) {
   const node = ensure();
   node.textContent = LABELS[state];
   node.dataset.state = state;
-  node.style.background = state === "error" || state === "offline"
+  node.style.background = ALARMING.has(state)
     ? "var(--clay-indicator-error-bg,#7a3b28)" : "var(--clay-indicator-bg,#2e2b27)";
   node.style.opacity = "1";
   clearTimeout(hideTimer);
-  if (state !== "saving") hideTimer = setTimeout(() => { node.style.opacity = "0"; }, 2200);
+  if (!STICKY.has(state)) hideTimer = setTimeout(() => { node.style.opacity = "0"; }, 2200);
 }
 
 function init() {

package/src/plugins/sortable.js

@@ -16,7 +16,6 @@
 */
 import { isEditMode } from "../core/is-edit-mode.js";
 import Mutation from "../lib/mutation.js";
-import { getVendorUrl } from "../lib/load-vendor-script.js";
 
 function makeSortable(sortableElem, Sortable) {
   let options = {};
@@ -89,10 +88,11 @@ function makeSortable(sortableElem, Sortable) {
 async function init() {
   if (!isEditMode) return;
 
-  // Load the vendor script
-  const vendorUrl = getVendorUrl(import.meta.url, '../vendor/Sortable.vendor.js');
-  await import(vendorUrl);
-  const Sortable = window.Sortable;
+  // Sortable's UMD header picks its target at run time: window.Sortable when no
+  // module system is present (a module load, and the single-file build), a
+  // default export when a bundler hands it one. Cover both.
+  const mod = await import('../vendor/Sortable.vendor.js');
+  const Sortable = window.Sortable || mod.default;
 
   // Set up sortable on page load
   document.querySelectorAll('[sortable]').forEach(el => makeSortable(el, Sortable));

package/src/standalone.js

@@ -0,0 +1,98 @@
+/* clayjs standalone: the entry of the single-file build. https://clayjs.com/offline
+
+   Twin of entries/clay.js. That bootstrap derives a base URL from its own script
+   tag and imports the loader at runtime; this one is bundled together with the
+   loader and every module it can ask for (see MODULES in loader-logic.js), so
+   `plugins=` decides what runs, never what downloads. The bootstrap logic below
+   (window.clay, `ready`, `__booted`, the retry path) is the same code as clay.js
+   and must stay in step with it; tests/unit/bootstrap-twins.test.js compares the
+   shared pieces. */
+import { boot } from "./loader.js";
+import onDomReady from "./lib/dom-ready.js";
+
+(function () {
+  // Suppress every vendored bundle's window auto-export; the loader assembles
+  // window.clay explicitly.
+  window.__hyperclayNoAutoExport = true;
+
+  // Merge into any window.clay a satellite already created; never replace it.
+  var clay = window.clay = window.clay || {};
+  // A second tag is a no-op: the original boot's `ready` promise survives.
+  // A FAILED boot resets the sentinel so a corrected tag can retry; the retry
+  // resolves the ORIGINAL `ready` promise via the stashed resolver.
+  if (clay.__booted) return;
+
+  function mintReady() {
+    clay.ready = new Promise(function (res, rej) {
+      clay.__readyResolve = res;
+      clay.__readyReject = rej;
+    });
+    // Nobody may be awaiting a failed boot's promise, and an unhandled rejection
+    // in the console is noise on top of the error we already logged.
+    clay.ready.catch(function () {});
+  }
+
+  if (!clay.ready) mintReady();
+
+  // clay.js needs its own URL to find the loader; this file needs it only for the
+  // query string, so pasted inline into the page it boots with the defaults.
+  var script = document.currentScript;
+  var params = script && script.src ? new URL(script.src, location.href).searchParams : new URLSearchParams();
+  clay.__booted = true;
+
+  function domReady() {
+    return new Promise(function (r) { onDomReady(r); });
+  }
+
+  // The module satellites, on the terms of their own entry scripts: each is a
+  // promise on clay.loaded, the ones that touch document.body wait for DOM
+  // ready, and events waits for dom because [onrender] handlers reach for its
+  // element helpers the moment events lands.
+  function satellite(name, promise) {
+    var p = promise.catch(function (err) {
+      console.error("clayjs: " + name + " failed to load:", err);
+      throw err;
+    });
+    // Mark handled: a failed satellite must not emit an unhandled rejection.
+    // Consumers who await clay.loaded[name] still get the error.
+    p.catch(function () {});
+    clay.loaded[name] = p;
+  }
+
+  clay.loaded = clay.loaded || {};
+  // The two generated satellites are classic scripts that assemble themselves
+  // onto window.clay when they run, and they carry no guard of their own, so
+  // they run here, behind the sentinel, and not as hoisted static imports: a
+  // duplicate tag would otherwise mount a second Sap runtime on the page. For
+  // the same reason a tag that already registered one (a leftover
+  // <script src="sap.js"> above this one) wins, and the copy in here stays idle.
+  if (!clay.loaded.data) satellite("data", import("../entries/clay-data.js"));
+  if (!clay.loaded.sap) satellite("sap", import("../entries/sap.js"));
+  satellite("dom", import("./dom/dom-helpers.js"));
+  satellite("utils", import("./utils/index.js"));
+  satellite("internals", import("./internals/index.js"));
+  satellite("all", import("./dom/all.js").then(function (m) {
+    window.All = m.default;   // interop carve-out, as in entries/all.js
+    clay.All = m.default;
+    return m.default;
+  }));
+  satellite("ui", domReady().then(function () { return import("./ui/index.js"); }));
+  satellite("options", domReady().then(function () { return import("./options/options.js"); }));
+  satellite("events", domReady()
+    .then(function () { return clay.loaded.dom && clay.loaded.dom.catch(function () {}); })
+    .then(function () { return import("./events/index.js"); }));
+
+  // The first argument is the loader's unused `base`; see boot() in loader.js.
+  boot(null, params, clay.__readyResolve).catch(function (err) {
+    clay.__booted = false;
+    console.error("clayjs failed to load:", err);
+    // Settle the promise so `await clay.ready` fails loudly instead of hanging,
+    // then mint a fresh one for a corrected retry tag. See entries/clay.js. A
+    // retry re-evaluates this whole file, satellites included; the path is
+    // reachable only when a bundled module throws on evaluation, which is a
+    // clayjs bug, not a page condition.
+    var reject = clay.__readyReject;
+    mintReady();
+    if (reject) reject(err);
+  });
+})();

package/src/sync/live-sync.js

@@ -44,6 +44,7 @@ import { serializeForSync, captureForComparisonAndDirty, captureSnapshot } from
 import { isTabLocalRootAttr } from '../lib/root-attrs.js';
 import { protectPeerDoc, protectDiskDoc, activateIncomingDoc } from './splice-merge.js';
 import { hostMeta } from '../core/host-meta.js';
+import { recordEtag, seedEtag } from '../core/etag.js';
 import { pageMaybeDirty, pauseGate, resumeGate } from '../lib/dirty-gate.js';
 
 // The page just took a frame verified clean against its baseline, so it now IS
@@ -517,11 +518,50 @@ class LiveSync {
     const key = lane === 'live' ? '_heldLive' : '_heldExt';
     if (this[key] === isHeld) return;
     this[key] = isHeld;
+    // A hold that clears leaves this tab back in step, but every stamp frame that
+    // arrived while it was held was refused and nothing re-sends them: stamps are
+    // broadcast on a save, not on a merge. So the tab would go on holding a stamp
+    // from before the hold and have its next save refused over a conflict that has
+    // already resolved itself, which is this notice crying wolf. Ask the host for
+    // the current one instead. Only once BOTH lanes are clear, because one lane
+    // resuming while the other still holds means the tab is still behind.
+    if (!isHeld && !this._heldLive && !this._heldExt) {
+      seedEtag({ fresh: true, clearIfMissing: false });
+    }
     document.dispatchEvent(new CustomEvent(isHeld ? 'clay:sync-held' : 'clay:sync-resumed', {
       detail: { lane, el: el || null },
     }));
   }
 
+  /**
+   * Take a stamp that arrived with no document (spec §6).
+   *
+   * The host sends one whenever the file on disk changes, because an editing tab
+   * never receives the saved document itself: that lane is for viewers, and
+   * pushing a saved document onto an editor would replace work in progress.
+   *
+   * Taking it is what makes live sync and the conflict check agree. An editor
+   * whose peer frames are merging is already looking at the other tab's content,
+   * so refusing its next save would be a conflict about nothing.
+   *
+   * But only while this tab is in step. A held lane means live sync saw an
+   * incoming change, could not merge it into an unsaved local edit, and kept this
+   * tab's version instead, so the DOM here is knowingly missing what disk holds.
+   * Taking the new stamp there would let this tab's next save replace that change
+   * with nobody seeing it. That is the one loss live sync cannot prevent on its
+   * own: a held tab "converges through its own next save", and that convergence
+   * IS the overwrite. Refusing the stamp turns it into a conflict somebody is
+   * told about.
+   *
+   * @param {Object} data - The decoded frame
+   * @returns {boolean} True when this was a stamp frame and nothing should morph
+   */
+  _applyEtagFrame(data) {
+    if (typeof data.etag !== 'string' || typeof data.html === 'string') return false;
+    if (!this._heldLive && !this._heldExt) recordEtag(data.etag);
+    return true;
+  }
+
   /**
    * Connect to the SSE endpoint
    * Uses native EventSource reconnection behavior
@@ -609,6 +649,8 @@ class LiveSync {
         return;
       }
 
+      if (this._applyEtagFrame(data)) return;
+
       const { html, sender, identityMap } = data;
 
       // Ignore own changes — already reflected in the DOM, nothing to morph

package/src/ui/index.js

@@ -23,6 +23,13 @@ if (typeof window.toastPersistent === "undefined") window.toastPersistent = toas
 document.addEventListener("clay:save-saved", (e) =>
   toast(e.detail?.msg || "Saved", e.detail?.msgType === "warning" ? "warning" : "success"));
 document.addEventListener("clay:save-error", () => toastPersistent("Couldn't save", "error"));
+// Spec §6. Persistent, and carrying the host's own words, because this is the one
+// save outcome the person has to act on: their edits are safe and unsaved, and
+// autosave has stopped until they choose. Deliberately a toast and not a dialog:
+// most conflicts surface on an autosave nobody asked for, and a modal thrown over
+// the page a person is typing into is worse than the problem it reports.
+document.addEventListener("clay:save-conflict", (e) =>
+  toastPersistent(e.detail?.msg || "This document changed since you opened it", "warning"));
 document.addEventListener("clay:save-offline", () => toastPersistent("Offline, not saved", "warning"));
 
 export { toast, toastPersistent, ask, consent, tell, snippet, themodal };