@panphora/clayjs 0.7.4 → 1.1.0

package/src/core/save-conflict-notice.js

@@ -0,0 +1,196 @@
+import { isEditMode } from "./is-edit-mode.js";
+import onDomReady from "../lib/dom-ready.js";
+
+// The page's only word on a refused save. Without it a document whose host said no
+// looks exactly like one that is saving fine, while autosave sits suspended: the
+// status chip that would have said so is a plugin, off by default, so most
+// documents show nothing at all.
+//
+// It sits at the bottom because that is where a hand already is on a phone, and
+// one line because the decision is small: keep this version, or take the other.
+// Discarding arms before it fires, since it is the only control here that destroys
+// work with no undo, and the page's own CSS is treated as hostile throughout.
+
+const BG = "var(--clay-conflict-bg,#222)";
+const INK = "var(--clay-conflict-ink,#fff)";
+const EDGE = "var(--clay-conflict-edge,rgba(255,255,255,.28))";
+const WARN = "var(--clay-conflict-warn,#e3a33f)";
+const FONT = "14px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif";
+
+// The host names what moved the file when it knows. It often cannot: a plain
+// filesystem write has no author. Anything unrecognised falls back to the phrase
+// that is true in every case.
+const SOURCES = {
+  "another-tab": "in another tab",
+  "another-person": "by someone else",
+  "an-agent": "by an agent",
+};
+
+const ARM_MS = 5000;
+
+let root = null, line = null, keep = null, drop = null;
+let armTimer = null, armed = false, busy = false;
+
+const still = () => !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+// Every declaration goes on as !important, and this is the whole reason the notice
+// survives a stranger's page. A plain inline style loses to an author rule that
+// carries !important, and `button { ... !important }` is a thing real pages do: the
+// first browser run of this module had both controls repainted in the host's colours
+// and font. Only an inline !important outranks an author !important.
+function style(el, rules) {
+  for (const rule of rules) {
+    const at = rule.indexOf(":");
+    el.style.setProperty(rule.slice(0, at).trim(), rule.slice(at + 1).trim(), "important");
+  }
+}
+
+// Same reason: a later assignment must be able to beat the !important one already
+// sitting on the element, and a plain style.foo = x silently cannot.
+function set(el, prop, value) {
+  el.style.setProperty(prop, value, "important");
+}
+
+function make(tag, rules, text) {
+  const el = document.createElement(tag);
+  style(el, rules);
+  if (text) el.textContent = text;
+  return el;
+}
+
+// all:initial first, because a page restyling every button is the normal case, not
+// the adversarial one. Everything the control needs is restated after it.
+function button(label, rules) {
+  const b = make("button", [
+    "all:initial", "box-sizing:border-box", "cursor:pointer", `font:${FONT}`,
+    "font-weight:500", "border-radius:6px", "padding:6px 12px", "white-space:nowrap",
+    "flex:none", ...rules,
+  ], label);
+  b.type = "button";
+  b.addEventListener("focus", () => {
+    set(b, "outline", `2px solid ${WARN}`);
+    set(b, "outline-offset", "2px");
+  });
+  b.addEventListener("blur", () => set(b, "outline", "none"));
+  return b;
+}
+
+// A phone keyboard shrinks the visual viewport but leaves fixed elements pinned to
+// the layout viewport, which parks a bottom-anchored bar behind the keyboard at the
+// exact moment somebody is typing. Lift it by the difference instead.
+function place() {
+  if (!root) return;
+  const vv = window.visualViewport;
+  const lift = vv ? Math.max(0, window.innerHeight - vv.height - vv.offsetTop) : 0;
+  set(root, "bottom", `calc(${16 + lift}px + env(safe-area-inset-bottom,0px))`);
+}
+
+function build() {
+  root = make("div", [
+    "position:fixed", "left:50%", "transform:translateX(-50%)",
+    "z-index:2147483001", "display:flex", "align-items:center", "gap:10px",
+    "max-width:calc(100vw - 24px)", "flex-wrap:wrap", "justify-content:center",
+    "padding:9px 12px", "border-radius:10px",
+    `background:${BG}`, `color:${INK}`, `border:1px solid ${EDGE}`,
+    "box-shadow:0 6px 24px rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.24)",
+    `font:${FONT}`, "text-align:left",
+  ]);
+  root.setAttribute("clay", "no-save no-watch no-snapshot");
+  root.setAttribute("data-clay-conflict", "");
+  root.setAttribute("role", "alert");
+
+  line = make("span", ["margin-right:2px"]);
+  drop = button("Load theirs", [`color:${INK}`, "opacity:.72", "padding:6px 8px"]);
+  keep = button("Keep mine", [`background:${INK}`, `color:${BG}`, "font-weight:600"]);
+
+  drop.addEventListener("click", onDrop);
+  keep.addEventListener("click", onKeep);
+  root.append(line, drop, keep);
+
+  if (!still()) {
+    set(root, "transition", "opacity .18s");
+    set(root, "opacity", "0");
+  }
+  document.body.appendChild(root);
+  place();
+  window.visualViewport?.addEventListener("resize", place);
+  window.visualViewport?.addEventListener("scroll", place);
+  requestAnimationFrame(() => set(root, "opacity", "1"));
+}
+
+// One arming click before the reload. A first click is a choice, not a confirmation
+// of anything, and this is the only control here that throws away work nothing can
+// bring back. It disarms itself so a bar left open does not stay one stray tap from
+// discarding an afternoon.
+function onDrop() {
+  if (armed) { window.location.reload(); return; }
+  armed = true;
+  drop.textContent = "Yes, drop my edits";
+  set(drop, "opacity", "1");
+  set(drop, "color", WARN);
+  set(drop, "box-shadow", `inset 0 0 0 1px ${WARN}`);
+  clearTimeout(armTimer);
+  armTimer = setTimeout(disarm, ARM_MS);
+}
+
+function disarm() {
+  clearTimeout(armTimer);
+  if (!armed) return;
+  armed = false;
+  drop.textContent = "Load theirs";
+  set(drop, "opacity", ".72");
+  set(drop, "color", INK);
+  set(drop, "box-shadow", "none");
+}
+
+async function onKeep() {
+  if (busy) return;
+  busy = true;
+  disarm();
+  keep.textContent = "Saving…";
+  set(keep, "opacity", ".65");
+  try {
+    const result = await window.clay?.save?.overwrite?.();
+    if (result && result.ok === false) throw new Error(result.msg || "");
+  } catch {
+    // Left showing: the save still has not happened, and clearing the bar here
+    // would put the page back to looking like one that is saving normally.
+    line.textContent = "That did not save either. Your edits are still here.";
+    keep.textContent = "Try again";
+    set(keep, "opacity", "1");
+    busy = false;
+    return;
+  }
+  busy = false;
+}
+
+function onKeydown(e) {
+  if (e.key === "Escape" && armed) { e.preventDefault(); drop.focus(); disarm(); }
+}
+
+function show(e) {
+  if (!root) build();
+  set(root, "display", "flex");
+  const where = SOURCES[e?.detail?.changedBy] || "elsewhere";
+  line.textContent = `This page was updated ${where}. Saving is paused.`;
+  keep.textContent = "Keep mine";
+  set(keep, "opacity", "1");
+  busy = false;
+  disarm();
+  place();
+}
+
+function hide() {
+  if (!root) return;
+  disarm();
+  set(root, "display", "none");
+}
+
+function init() {
+  if (!isEditMode) return;
+  document.addEventListener("clay:save-conflict", show);
+  document.addEventListener("clay:save-saved", hide);
+  document.addEventListener("keydown", onKeydown);
+}
+
+onDomReady(init);

package/src/core/save-core.js

@@ -10,6 +10,7 @@
 import { isEditMode } from "./is-edit-mode.js";
 import { consumeUserDriven, consumeExplicitSave, markUserDriven } from "../lib/user-gesture.js";
 import { saveToken } from "./host-attrs.js";
+import { lastSeenEtag, conditionalSaves, recordEtag, seedEtag } from "./etag.js";
 import {
   getPageContents,
   onSnapshot,
@@ -62,13 +63,21 @@ function successResult(data) {
 
 function errorResult(err) {
   const timedOut = err.name === 'AbortError';
+  // Spec §6: a 412 is a REFUSED save, not a failed one. The host wrote nothing and
+  // its document is byte-identical to what it was, and the bytes we tried to write
+  // are still on this page. Reporting that as 'error' would give the one outcome
+  // where nothing went wrong the one severity that means something did, and would
+  // put it through the same retry-and-toast path as a dead server.
+  // The status is authoritative (§3), and `code` is honoured too because a proxy
+  // can answer 412 on the host's behalf with no body at all.
+  const conflicted = !timedOut && (err.status === 412 || err.code === 'conflict');
   return {
     ok: false,
     msg: timedOut ? 'Server not responding' : (err.message || 'Save failed'),
     // A timeout is not evidence the write failed. The request may well have landed,
     // so this reports "we do not know" rather than asserting something false.
-    msgType: timedOut ? 'unknown' : 'error',
-    code: timedOut ? 'timeout' : (err.code ?? null),
+    msgType: timedOut ? 'unknown' : (conflicted ? 'conflict' : 'error'),
+    code: timedOut ? 'timeout' : (conflicted ? 'conflict' : (err.code ?? null)),
     etag: null
   };
 }
@@ -134,7 +143,43 @@ function buildSaveRequest(content, userDriven, signal) {
     body: content
   };
 
-  return { url: new URL(path, window.location.origin).href, options };
+  // Spec §6: the stamp this tab last saw, so a host that advertises `conditional`
+  // can refuse rather than overwrite a version nobody here has read.
+  //
+  // Two gates, and both are the point. The capability must have been announced by
+  // name, because §5 forbids inferring one any other way, and a host that never
+  // promised to honour If-Match may do anything at all with it. And a stamp must
+  // actually be held: a host reads this header's PRESENCE, so an empty value is
+  // not a softer version of the request, it is a save asking to be refused.
+  const etag = lastSeenEtag();
+  if (conditionalSaves() && etag) options.headers['If-Match'] = etag;
+
+  return { url: resolveSaveUrl(path), options };
+}
+
+/**
+ * The absolute URL a save goes to.
+ *
+ * A relative path is resolved by fetch against the DOCUMENT's base URL, which
+ * `<base href>` sets and the author of a malleable document controls. Left
+ * relative, a `<base href="https://elsewhere.example/">` sends the document and
+ * the per-document token in the path to an origin the document picked. Pinning to
+ * the real origin is the whole fix.
+ *
+ * The guard is not defensive noise. `window.location.origin` is the STRING "null"
+ * on a file:// document, and `new URL(path, "null")` throws a TypeError, which
+ * would escape synchronously here rather than becoming a failed save. Documents
+ * opened from disk are a first-class case (an exported app is just a file), and
+ * there is no origin to pin to and no host to save to there anyway, so the
+ * relative path is both the honest answer and the one that cannot throw.
+ *
+ * @param {string} path - Root-relative save path
+ * @returns {string}
+ */
+function resolveSaveUrl(path) {
+  const origin = window.location.origin;
+  if (!origin || origin === "null") return path;
+  return new URL(path, origin).href;
 }
 
 /**
@@ -183,10 +228,22 @@ function sendSave(content) {
         error.status = res.status;
         throw error;
       }
+      // The one place a stamp is ever learned from a save (§6). A response with no
+      // etag clears it rather than keeping the old one, because the write we just
+      // made means any stamp held here describes bytes the host no longer stores.
+      recordEtag(data.etag ?? null);
       return data;
     }))
     .catch(err => {
       console.error('Failed to save page:', err);
+      // Spec §7: a timeout is INDETERMINATE, so this write may well have landed,
+      // and the stamp held here may already describe bytes the host has replaced.
+      // Reconcile against the host before anything retries, or a save that times
+      // out and lands is followed by a 412 the person cannot explain and did not
+      // cause. The only save that can have moved the document inside that window
+      // is almost always this one, so taking the host's current stamp is taking
+      // back our own.
+      if (err.name === 'AbortError') seedEtag({ fresh: true });
       // The save never landed: re-arm the user-driven bit so the next (retry)
       // save still reports the human gesture instead of reading as background.
       if (userDriven) markUserDriven();

package/src/core/save.js

@@ -20,6 +20,7 @@ import {
   isSaveInProgress
 } from "./save-core.js";
 import { captureForComparison, captureForComparisonAndDirty, captureForSaveAndComparison } from "./snapshot.js";
+import { seedEtag } from "./etag.js";
 import { gateCaptureToken, gateClearIfUnchanged } from "../lib/dirty-gate.js";
 import { ROOT_LIBRARY_ATTRS } from "../lib/root-attrs.js";
 import { logSaveCheck, logBaseline } from "../lib/autosave-debug.js";
@@ -50,7 +51,7 @@ let savingTimeout = null;
 /**
  * Sets the save status on <html> and dispatches an event.
  *
- * @param {string} state - One of: 'saving', 'saved', 'offline', 'error'
+ * @param {string} state - One of: 'saving', 'saved', 'offline', 'error', 'conflict'
  * @param {string} msg - Optional message (e.g., error details)
  * @param {string} msgType - Optional severity from the server (e.g., 'warning')
  */
@@ -190,6 +191,46 @@ export function resumeAutosave() {
   savePageThrottled();
 }
 
+// ============================================
+// THE CONFLICT HOLD
+// ============================================
+//
+// A 412 refuses this tab's bytes because the document changed since this tab last
+// saw it (spec §6). Two things have to follow, and the second is the one that is
+// easy to leave out.
+//
+// Nothing may be thrown away. The baselines do not advance on a refused save, so
+// the edits stay dirty, the close warning still fires, and the person keeps what
+// they typed. That falls out of applySaveResult and needs no special case.
+//
+// And autosave has to stop. Every autosave from here sends the same stamp and is
+// refused for the same reason, so leaving it running means a save attempt every
+// throttle window, forever, each one toasting a failure the person can do nothing
+// about. The suspension clay.wire already owns is exactly the right lever: it
+// stops AUTOsave only, so an explicit Cmd+S still goes out, and it replays one
+// missed save on release so nothing typed during the hold is stranded.
+//
+// The hold is released when a save lands, whatever produced it: clay.save.overwrite,
+// a live-sync frame that brought the page back in step, or the other tab going away.
+let conflictHold = false;
+
+function holdForConflict() {
+  if (conflictHold) return;
+  conflictHold = true;
+  suspendAutosave();
+}
+
+function releaseConflictHold() {
+  if (!conflictHold) return;
+  conflictHold = false;
+  resumeAutosave();
+}
+
+/** True while this tab is refusing to autosave over a version it has not seen. */
+export function isSaveConflicted() {
+  return conflictHold;
+}
+
 function skipped_(msg) {
   return { ok: false, msg, msgType: 'skipped', code: null, etag: null };
 }
@@ -217,6 +258,10 @@ function applySaveResult(result, forComparison, forDirty, label, gateToken) {
     // warning, and the UI module is what decides how to render that.
     setSaveState('saved', result.msg || 'Saved', result.msgType);
     logBaseline(label, `${lastSavedContents.length} chars`);
+    releaseConflictHold();
+  } else if (result.msgType === 'conflict') {
+    holdForConflict();
+    setSaveState('conflict', result.msg, result.msgType);
   } else if (result.msgType !== 'skipped') {
     if (!navigator.onLine) {
       setSaveState('offline', result.msg);
@@ -405,6 +450,30 @@ export function savePageForce(callback = () => {}) {
   });
 }
 
+/**
+ * Keep this tab's version, over the one the host is holding.
+ *
+ * The only exit from a conflict that keeps what is on screen. It asks the host for
+ * the document's current stamp and force-saves with it, so the save that follows
+ * carries a value the host will accept. If the host answers with no stamp at all,
+ * the save goes out unconditional, which is last write wins, which is what the
+ * person just asked for by name.
+ *
+ * Deliberately not automatic, and deliberately not what a second Cmd+S does. A
+ * person pressing Save again has not been shown the other version, and reading
+ * that as consent to replace it destroys exactly the copy this capability exists
+ * to protect. The other two answers to a conflict need nothing from this library:
+ * `location.reload()` takes the host's version, and a page that wants to merge
+ * merges into its own DOM and then calls this.
+ *
+ * @param {Function} callback - Optional callback for custom handling
+ * @returns {Promise<{ok: boolean, msg: string, msgType: string}>}
+ */
+export async function saveOverwritingConflict(callback = () => {}) {
+  await seedEtag({ fresh: true });
+  return savePageForce(callback);
+}
+
 /**
  * Fetch HTML from a URL and save it, then reload
  * Emits error event if save fails
@@ -646,6 +715,16 @@ export function initHyperclaySaveButton() {
 export function init() {
   if (!isEditMode) return;
 
+  // §6's stamp for a page that has never saved. Fired here and never awaited: the
+  // request a person feels is the save, and a host with no /_/meta would make every
+  // first save wait out a discovery timeout for an answer that was never coming.
+  // Until the seed lands the first save goes out unconditional, which is last write
+  // wins, which is what every save did before this existed. This is also the only
+  // moment the seed can be useful at all: ask for it lazily at the first save and
+  // it can never arrive in time for that save, and from the second save onward the
+  // first save's own response has already supplied one.
+  seedEtag();
+
   // Every editable page, not just autosave pages. A manual-save page makes
   // exactly the saves a person asked for, and used to report all of them as
   // background writes because this was installed behind the autosave gate.

package/src/core/snapshot.js

@@ -109,10 +109,10 @@ export function addDocumentTransform(callback) {
  *
  * @returns {HTMLElement} Cloned document element with snapshot hooks applied
  */
-function clonePreventingOnclone(node) {
+function clonePreventingOnclone(node, deep = true) {
   const prev = window.__preventOnclone;
   window.__preventOnclone = true;
-  try { return node.cloneNode(true); }
+  try { return node.cloneNode(deep); }
   finally { window.__preventOnclone = prev; }
 }
 
@@ -293,7 +293,13 @@ export function captureForComparisonAndDirty({ flushUndo = true } = {}) {
 export function captureForSaveAndComparison({ emitForSync = true } = {}) {
   const clone = captureSnapshot();
 
-  // Emit for live-sync before any stripping
+  // Emit for live-sync before any stripping.
+  //
+  // A listener gets the very clone this function goes on to serialize into
+  // forSave, forComparison and forDirty — that sharing is the point, it saves a
+  // second full DOM clone per save. So a listener may READ it and must not write
+  // to it: anything it changes lands in the saved bytes and in both baselines,
+  // and a baseline the dirty check cannot reproduce warns on close forever.
   if (emitForSync) {
     document.dispatchEvent(new CustomEvent('clay:snapshot-ready', {
       detail: { documentElement: clone }
@@ -445,22 +451,33 @@ export function captureForSave({ emitForSync = true } = {}) {
  * (Not to be confused with captureBodyForSync below, which is the older
  * body-innerHTML helper and unrelated to the live-sync lane.)
  *
- * The clone is detached and unobserved, so removing the attributes in place and
- * putting them back is exact, and far cheaper than cloning the tree again. The
- * finally is load-bearing: the save path reads this same clone afterwards.
+ * It must not write to the clone. The caller derives forSave and both comparison
+ * baselines from this same object once every listener has returned, so anything
+ * left behind lands in the saved bytes and in both baselines.
+ *
+ * This used to strip the tab-local attributes in place and set them again in a
+ * finally, which looked exact and was not: an attribute list is ordered by
+ * insertion, so putting a name back appended it. On htmlclay, whose injectAttr
+ * splices the token and file id in right after `<html`, every save then installed
+ * a baseline whose root tag was ordered differently from the one any later dirty
+ * check builds off the live DOM — same names, same values, same length, never
+ * equal again. Closing an already-saved document warned every time, and
+ * savePageThrottled's "no changes to save" short-circuit never fired.
+ *
+ * The open tag is serialized from a childless copy instead, so the shared clone is
+ * never touched and there is no restore to get wrong. The copy is one element, not
+ * the tree.
  */
 export function serializeForSync(clone) {
-  const removed = [];
-  for (const name of TAB_LOCAL_ROOT_ATTRS) {
-    if (!clone.hasAttribute(name)) continue;
-    removed.push([name, clone.getAttribute(name)]);
-    clone.removeAttribute(name);
-  }
-  try {
-    return clone.outerHTML;
-  } finally {
-    for (const [name, value] of removed) clone.setAttribute(name, value);
-  }
+  const bareRoot = clonePreventingOnclone(clone, false);
+  for (const name of TAB_LOCAL_ROOT_ATTRS) bareRoot.removeAttribute(name);
+
+  // Split the end tag off by LENGTH rather than searching for one: an authored
+  // attribute value holding "</html>" would fool any indexOf-based split and
+  // truncate the broadcast.
+  const shell = bareRoot.outerHTML;
+  const endTag = `</${bareRoot.localName}>`;
+  return shell.slice(0, shell.length - endTag.length) + clone.innerHTML + endTag;
 }
 
 /**

package/src/lib/attr-aliases.js

@@ -0,0 +1,13 @@
+// clayjs spells its attributes without a prefix, which is the whole pitch:
+// <h1 editable> reads like HTML rather than like a framework. No attribute in the
+// HTML standard uses these names and no proposal does either, so the risk of the
+// spelling being taken is small. It is not zero, and a saved document hardcodes
+// the attribute and can never be reached to migrate it.
+//
+// These clay- spellings are read everywhere the bare name is read, and are left
+// out of the documentation on purpose. Their only job is to already exist in every
+// 1.x build: if a bare name ever stops being ours, a file written today can be
+// repaired by adding one attribute instead of needing a migration that cannot
+// reach it. An escape hatch added after the collision would be worthless.
+export const PERSIST = ":is([persist], [clay-persist])";
+export const AUTOSAVE = ":is([autosave], [clay-autosave])";

package/src/lib/dirty-gate.js

@@ -28,13 +28,14 @@
 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';
 
 let changes = 0;
 let clearedAt = 0;
 let paused = false;
 let started = false;
 
-const PERSIST_CONTROLS = 'input[persist], textarea[persist], select[persist]';
+const PERSIST_CONTROLS = `input${PERSIST}, textarea${PERSIST}, select${PERSIST}`;
 
 // Regions the loss oracle never sees. The hub feed already skips them, through
 // `require: 'dirty'`, and the input feed has to skip them for the same reason:

package/src/lib/root-attrs.js

@@ -8,15 +8,31 @@
  * peer's copy of them must never be applied.
  */
 
-// Injected by the host at serve time. Spec §9 bounds a save token to per-file and
-// per-tab and makes the host strip it before writing, so it never reaches disk.
-// But §9 bounds only the save path, and §10 fans a snapshot out to other editors'
+// The two spellings of the save token. Spec §9 bounds one to per-file and per-tab
+// and makes the host strip it before writing, so it never reaches disk. But §9
+// bounds only the save path, and §10 fans a snapshot out to other editors'
 // browsers, which is the hole this module closes.
 //
-// htmlclayid is host-injected too (htmlclay's durable file identity, stamped on
-// every serve, absent from disk bytes). It rides here so a morph of raw disk
-// content cannot strip this tab's copy, and a peer's copy is never applied.
-export const HOST_TOKEN_ATTRS = ["savetoken", "htmlclaytoken", "htmlclayid"];
+// Save tokens ONLY. host-attrs.js returns the first name it finds here and puts it
+// straight into the save URL, so anything added to this list becomes a credential
+// in a path. Durable identities go in the list below, never in this one.
+export const SAVE_TOKEN_ATTRS = ["savetoken", "htmlclaytoken"];
+
+// Host-injected, but NOT credentials. htmlclayid is htmlclay's durable file
+// identity, stamped on every serve and absent from disk bytes, so it rides in the
+// morph protection below for the same reason a token does: a morph of raw disk
+// content would otherwise strip this tab's copy, and a peer's copy must never be
+// applied.
+//
+// It was previously in the token list, where saveToken() returned it whenever a
+// host minted no token of its own. That is reachable: htmlclay stamps the id on
+// every serve but injects a token only for top-level document loads, and its save
+// route strips only the token, so the id reaches disk. Any such file hosted
+// somewhere tokenless made this library POST to /_/save/{id} with no cookie and
+// hand edit mode to every visitor.
+export const HOST_IDENTITY_ATTRS = ["htmlclayid"];
+
+export const HOST_TOKEN_ATTRS = [...SAVE_TOKEN_ATTRS, ...HOST_IDENTITY_ATTRS];
 
 // This library's own root state, and this tab's UI truth.
 export const ROOT_LIBRARY_ATTRS = ["savestatus", "editmode", "pageowner"];

package/src/loader-logic.js

@@ -7,6 +7,7 @@ export const CORE_WAVES = {
   ],
   editOnly: [
     "core/snapshot.js", "core/save-core.js", "core/save.js",
+    "core/save-conflict-notice.js",
     "core/unsaved-warning.js", "core/persist.js",
     "core/admin-attrs.js", "core/autosave.js",
     "attrs/save-freeze.js", "attrs/onaftersave.js", "attrs/refetch-on-save.js",
@@ -30,6 +31,44 @@ export const PLUGIN_PATHS = {
   demo:      { path: "plugins/demo.js",            editOnly: false, default: false },
 };
 
+// One literal import per module the loader can ask for, so a bundler can see the
+// whole graph. The loader used to build each specifier at runtime
+// (`import(base + "/src/" + path)`), which no bundler can follow, and that alone
+// stood between clayjs and the single-file build. A relative specifier resolves
+// against this file, so on clayjs.com the URLs fetched are exactly the ones the
+// computed form produced. The thunks keep every import lazy: nothing evaluates
+// until the loader asks, in the loader's order, which is load-bearing.
+// tests/unit/loader-modules.test.js proves every path in CORE_WAVES and
+// 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"),
+  "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"),
+  "core/snapshot.js":           () => import("./core/snapshot.js"),
+  "core/save-core.js":          () => import("./core/save-core.js"),
+  "core/save.js":               () => import("./core/save.js"),
+  "core/save-conflict-notice.js": () => import("./core/save-conflict-notice.js"),
+  "core/unsaved-warning.js":    () => import("./core/unsaved-warning.js"),
+  "core/persist.js":            () => import("./core/persist.js"),
+  "core/admin-attrs.js":        () => import("./core/admin-attrs.js"),
+  "core/autosave.js":           () => import("./core/autosave.js"),
+  "attrs/save-freeze.js":       () => import("./attrs/save-freeze.js"),
+  "attrs/onaftersave.js":       () => import("./attrs/onaftersave.js"),
+  "attrs/refetch-on-save.js":   () => import("./attrs/refetch-on-save.js"),
+  "lib/cache-bust.js":          () => import("./lib/cache-bust.js"),
+  "vendor/richclay.vendor.js":  () => import("./vendor/richclay.vendor.js"),
+  "plugins/indicator.js":       () => import("./plugins/indicator.js"),
+  "sync/live-sync.js":          () => import("./sync/live-sync.js"),
+  "plugins/sortable.js":        () => import("./plugins/sortable.js"),
+  "plugins/undo.js":            () => import("./plugins/undo.js"),
+  "vendor/hypercms.vendor.js":  () => import("./vendor/hypercms.vendor.js"),
+  "vendor/quickcrop.vendor.js": () => import("./vendor/quickcrop.vendor.js"),
+  "plugins/upload.js":          () => import("./plugins/upload.js"),
+  "plugins/wire.js":            () => import("./plugins/wire.js"),
+  "plugins/demo.js":            () => import("./plugins/demo.js"),
+};
+
 const PLUGIN_ORDER = ["richclay", "indicator", "sortable", "undo", "quickcrop", "upload", "cms", "sync", "wire", "demo"];
 
 // A plugin that cannot do its whole job alone. hypercms reads the cropper through