@panphora/clayjs 1.14.0 → 1.15.0

package/src/core/save.js

@@ -21,7 +21,8 @@ import {
   saveFateIsUnknown,
   withKeepalive
 } from "./save-core.js";
-import { captureForComparison, captureForComparisonAndDirty, captureForSaveAndComparison, captureForDirtyCheck } from "./snapshot.js";
+import { captureForComparison, captureForComparisonAndDirty, captureForSaveAndComparison, captureForDirtyCheck, captureSaveClone } from "./snapshot.js";
+import { paintSignature } from "../lib/derived.js";
 import { NO_TRIGGER_AUTOSAVE_SELECTOR } from "../lib/region-policy.js";
 import { seedEtag, lastSeenEtag } from "./etag.js";
 import { gateCaptureToken, gateClearIfUnchanged, pageMaybeDirty } from "../lib/dirty-gate.js";
@@ -37,6 +38,7 @@ import { initUserGesture, markExplicitSave, clearExplicitSave } from "../lib/use
 // Both read across it at call time, never while a module is evaluating, so neither
 // side sees a half-built module.
 import { bytesUnsaved } from "./unsaved-warning.js";
+import { bootPhase } from "./boot-phase.js";
 
 // Keep this library's own root state out of the saved bytes.
 //
@@ -378,7 +380,7 @@ function skipped_(msg) {
  * where the write may or may not have landed, so it is not treated as success
  * either.
  */
-function applySaveResult(result, forComparison, forDirty, label, gateToken, forSave = null, captureId = null) {
+function applySaveResult(result, forComparison, forDirty, label, gateToken, forSave = null, captureId = null, quietConflict = false) {
   if (result.ok) {
     // Both baselines advance from the SAME pre-request capture, never from the
     // live DOM, so an edit made while the request was on the wire stays unsaved.
@@ -394,6 +396,16 @@ function applySaveResult(result, forComparison, forDirty, label, gateToken, forS
     logBaseline(label, `${lastSavedContents.length} chars`);
     releaseConflictHold();
   } else if (result.msgType === 'conflict') {
+    // A refused heal leaves the tab as it was: still clean, no save event, no
+    // hold. The save that beat it reaches this tab through sync.
+    if (quietConflict) {
+      if (savingTimeout) {
+        clearTimeout(savingTimeout);
+        savingTimeout = null;
+      }
+      document.documentElement.setAttribute('savestatus', 'saved');
+      return;
+    }
     holdForConflict(result.conflictEtag);
     setSaveState('conflict', result.msg, result.msgType, {
       hadTimeout: result.hadTimeout === true,
@@ -585,7 +597,7 @@ export function savePage(callback = () => {}) {
  * @param {Function} callback - Optional callback for custom handling
  * @returns {Promise<{msg: string, msgType: string}>}
  */
-export function savePageForce(callback = () => {}) {
+export function savePageForce(callback = () => {}, { quietConflict = false } = {}) {
   return new Promise((resolve) => {
     if (!isEditMode && !window.clay?.testMode) {
       const skipped = skipped_('Not in edit mode');
@@ -629,7 +641,7 @@ export function savePageForce(callback = () => {}) {
     saveCapturedHtml(forSave, captureId, (result) => {
       ownSaveOnWire = false;
       inFlightComparisons.delete(comparison);
-      applySaveResult(result, comparison.forComparison, comparison.forDirty, 'updated after force save', gateToken, forSave, captureId);
+      applySaveResult(result, comparison.forComparison, comparison.forDirty, 'updated after force save', gateToken, forSave, captureId, quietConflict);
       if (typeof callback === 'function') {
         callback(result);
       }
@@ -797,6 +809,56 @@ let baselineActive = true;
 let baselineSettledAt = false;
 export function baselineSettled() { return baselineSettledAt; }
 
+// A repaint that leaves the page's painted values different from the file's means
+// the file is stale: an agent wrote a record without painting it. One clean,
+// autosaving tab saves the painted page so the bytes on disk heal. The delay is
+// jittered and the check reruns when it fires, so when several tabs repaint the
+// same frame, the first save reaches the others and they skip.
+const PAINT_HEAL_MIN_MS = 250;
+const PAINT_HEAL_SPREAD_MS = 1250;
+let paintHealTimer = null;
+
+const HEAL_KEY = 'clay:paint-heal:' + location.pathname;
+
+function hashSignature(s) {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+  return String(h >>> 0);
+}
+
+function healedFrom(signature) {
+  try { return localStorage.getItem(HEAL_KEY) === hashSignature(signature); } catch { return false; }
+}
+
+function noteHealedFrom(signature) {
+  try { localStorage.setItem(HEAL_KEY, hashSignature(signature)); } catch {}
+}
+
+/** The painted values of the page as it would be saved. */
+export function currentPaintSignature() {
+  return paintSignature(captureSaveClone({ flushUndo: false }));
+}
+
+/**
+ * Save the page if its painted values differ from the file's. `fileSignature` is
+ * the file's paintSignature, or a function returning it (or null when unknown)
+ * when the timer fires.
+ */
+export function schedulePaintHeal(fileSignature) {
+  if (!isEditMode || isDraftMode) return;
+  clearTimeout(paintHealTimer);
+  paintHealTimer = setTimeout(() => {
+    paintHealTimer = null;
+    const onDisk = typeof fileSignature === 'function' ? fileSignature() : fileSignature;
+    if (onDisk == null || !autosaveActive() || !baselineSettled() || isSaveConflicted() || autosaveIsSuspended()) return;
+    if (captureForDirtyCheck({ flushUndo: false }) !== lastSavedDirty) return;
+    if (onDisk === currentPaintSignature()) return;
+    if (healedFrom(onDisk)) return;
+    noteHealedFrom(onDisk);
+    savePageForce(() => {}, { quietConflict: true });
+  }, PAINT_HEAL_MIN_MS + Math.random() * PAINT_HEAL_SPREAD_MS);
+}
+
 registerStyleAdoption(identity => {
   const strip = styleComparisonStripper(identity);
   lastSavedContents = strip(lastSavedContents);
@@ -825,6 +887,19 @@ registerStyleAdoption(identity => {
 
 const SETTLE_MS = 500;        // Wait for no mutations for this long
 const MAX_SETTLE_MS = 3000;   // Max time to wait before forcing capture
+const MAX_HOLD_MS = 10000;   // A held settle releases itself after this
+
+let settleNow = null;
+
+/**
+ * The loader's mount phase calls this once the derive engine has taken its first
+ * pass. The settle runs at once on the painted page, unless a person already
+ * edited or a save already installed a baseline (captureBaseline's guard).
+ */
+export function releaseBootSettle() {
+  bootPhase.holdSettle = false;
+  if (settleNow) settleNow();
+}
 
 function initBaselineCapture() {
   if (!isEditMode) return;
@@ -892,19 +967,32 @@ function initBaselineCapture() {
     baselineSettledAt = true;
     document.dispatchEvent(new CustomEvent('clay:baseline-settled'));
   };
+  settleNow = captureBaseline;
+
+  // While the loader holds the settle for a derive engine's first pass, neither
+  // the quiet timer nor the max timeout may settle; releaseBootSettle does.
+  const settle = () => {
+    if (!bootPhase.holdSettle) captureBaseline();
+  };
 
   // Start settle observer - fires when no mutations for SETTLE_MS.
   // require:'autosave' so churn in no-save / save-* / no-watch regions doesn't
   // keep resetting the settle timer or count toward the baseline.
   unsubscribeMutation = Mutation.onAnyChange(
     { debounce: SETTLE_MS, omitChangeDetails: true, require: 'autosave' },
-    captureBaseline
+    settle
   );
 
   // Max timeout fallback
   setTimeout(() => {
-    if (!settled) captureBaseline();
+    if (!settled) settle();
   }, MAX_SETTLE_MS);
+
+  // The loader releases a held settle after the derive engine mounts. If boot
+  // never gets there (a plugin's ready stalls, boot throws), release it anyway.
+  setTimeout(() => {
+    if (!settled && bootPhase.holdSettle) releaseBootSettle();
+  }, MAX_HOLD_MS);
 }
 
 // Run when DOM is ready

package/src/core/snapshot.js

@@ -43,6 +43,7 @@ import { restoreAuthoredUrls } from '../lib/authored-url.js';
 import { STRIP_FROM_SAVE, STRIP_FROM_COMPARISON, STRIP_FROM_DIRTY_CHECK, NO_TRIGGER_AUTOSAVE_SELECTOR, SNAPSHOT_REMOVE_SELECTOR } from '../lib/region-policy.js';
 import { TAB_LOCAL_ROOT_ATTRS, stripRouteAttrs } from '../lib/root-attrs.js';
 import { stripEphemeral } from '../lib/ephemeral.js';
+import { stripDerived } from '../lib/derived.js';
 import { createContentView } from '../lib/content-dom.js';
 
 // =============================================================================
@@ -313,9 +314,17 @@ function prepareCloneForSave(clone, { authored = true } = {}) {
     el.remove();
   }
 
+  stripDiagnosticBeacons(clone);
+
   return clone;
 }
 
+// sapjs marks an element it cannot run with a sap-error beacon. It describes this
+// tab's engine, never the document, so no save carries it.
+function stripDiagnosticBeacons(clone) {
+  for (const el of clone.querySelectorAll("[sap-error]")) el.removeAttribute("sap-error");
+}
+
 /**
  * The save-domain clone, for a caller that needs the tree rather than the bytes.
  *
@@ -344,6 +353,7 @@ export function captureSaveClone({ flushUndo = true, authored = true } = {}) {
 const EMPTY_INERT_ATTRS = ['style', 'class'];
 
 function serializeForCompare(clone) {
+  stripDerived(clone);
   for (const name of EMPTY_INERT_ATTRS) {
     if (clone.getAttribute(name) === '') clone.removeAttribute(name);
     for (const el of clone.querySelectorAll(`[${name}=""]`)) el.removeAttribute(name);
@@ -514,6 +524,7 @@ export function captureForSaveAndComparison({ emitForSync = true, flushUndo = tr
   for (const el of clone.querySelectorAll(STRIP_FROM_SAVE)) {
     el.remove();
   }
+  stripDiagnosticBeacons(clone);
   const forSave = serializeSaveClone(clone);
 
   // Compare clone: strip every autosave-off region, then run hooks
@@ -596,6 +607,7 @@ export function captureForMerge() {
   for (const el of clone.querySelectorAll(STRIP_FROM_SAVE)) {
     el.remove();
   }
+  stripDiagnosticBeacons(clone);
 
   for (const el of compareClone.querySelectorAll(STRIP_FROM_DIRTY_CHECK)) {
     el.remove();

package/src/lib/derived.js

@@ -0,0 +1,116 @@
+import { ownsAttr, paintsOf, stripPaints, eachPainted } from "../vendor/sap-ownership.vendor.js";
+import { bootPhase } from "../core/boot-phase.js";
+
+// Values a derive engine (sapjs) paints from the page's records: attr:, class:,
+// css:, text and show output inside a [sap] root. They are saved like any other
+// content, but they are never an edit: comparisons, the dirty gate, undo and
+// merges leave them out, and the engine repaints them after every merge, before
+// anything records a baseline. Which parts of an element are painted is read
+// from its own attributes, so the same answer holds for the live page, a
+// snapshot clone and a parsed frame. No expression is evaluated here.
+
+export const isDerivedAttr = (el, name) => ownsAttr(el, name);
+
+export const ownsDerivedText = (el) => !!el && el.nodeType === 1 && !!paintsOf(el)?.text;
+
+/** Remove every painted value from a detached tree, in place. Never the live page. */
+export const stripDerived = (root) => stripPaints(root);
+
+/** Every painted value under root, in document order, as one string. */
+export function paintSignature(root) {
+  const parts = [];
+  eachPainted(root, (el, p) => {
+    parts.push(el.localName);
+    for (const n of p.attrs) if (n !== "sap-error") parts.push(n + "=" + (el.getAttribute(n) ?? "\u0000"));
+    for (const t of p.classes) parts.push("." + t + "=" + el.classList.contains(t));
+    for (const v of p.vars) parts.push(v + "=" + el.style.getPropertyValue(v));
+    if (p.text) parts.push("#" + el.textContent);
+  });
+  return parts.join("\u0001");
+}
+
+/** paintSignature of a document's bytes, such as the file on disk. */
+export function paintSignatureOfHtml(html) {
+  return paintSignature(new DOMParser().parseFromString(html, "text/html"));
+}
+
+function withoutTokens(value, owned, split, join, nameOf) {
+  return split(value || "").map((t) => t.trim()).filter((t) => t && !owned.includes(nameOf(t))).sort().join(join);
+}
+
+// A class or style change that only touched painted tokens.
+function onlyPaintedTokens(el, name, before, after) {
+  const p = paintsOf(el);
+  if (!p) return false;
+  if (name === "class") {
+    if (!p.classes.length) return false;
+    const rest = (v) => withoutTokens(v, p.classes, (s) => s.split(/\s+/), " ", (t) => t);
+    return rest(before) === rest(after);
+  }
+  if (!p.vars.length) return false;
+  const rest = (v) => withoutTokens(v, p.vars, (s) => s.split(";"), ";", (t) => t.split(":")[0].trim());
+  return rest(before) === rest(after);
+}
+
+/** True when a mutation-hub change only rewrote painted output. */
+export function isDerivedChange(change) {
+  if (change.__derived !== undefined) return change.__derived;
+  const el = change.element;
+  let derived = false;
+  if (el && el.nodeType === 1) {
+    if (change.type === "attribute") {
+      const name = change.attribute;
+      derived = isDerivedAttr(el, name) ||
+        ((name === "class" || name === "style") && onlyPaintedTokens(el, name, change.oldValue, change.newValue));
+    } else if (change.type === "characterData") {
+      derived = ownsDerivedText(el);
+    }
+  }
+  change.__derived = derived;
+  return derived;
+}
+
+const engines = new Set();
+let mountedOnce = false;
+
+/** True while a derive engine is registered, or the loader holds boot for one. */
+export function derivedActive() {
+  return engines.size > 0 || bootPhase.holdSettle;
+}
+
+const mountWaiters = [];
+
+/** Run every registered engine's repaint, synchronously. Live sync calls it right after a merge applies. */
+export function repaintDerived() {
+  for (const repaint of [...engines]) {
+    try {
+      repaint();
+    } catch (err) {
+      console.error("clayjs: a derived repaint failed:", err);
+    }
+  }
+}
+
+/** Calls fn once an engine has finished its first pass, or after timeoutMs without one. */
+export function afterDerivedMount(fn, timeoutMs) {
+  if (mountedOnce || typeof document === "undefined" || !document.querySelector("[sap]")) return fn();
+  let done = false;
+  const once = () => {
+    if (done) return;
+    done = true;
+    fn();
+  };
+  mountWaiters.push(once);
+  setTimeout(once, timeoutMs);
+}
+
+export const derived = {
+  register(repaint) {
+    engines.add(repaint);
+    return () => engines.delete(repaint);
+  },
+  mounted() {
+    mountedOnce = true;
+    for (const fn of mountWaiters.splice(0)) fn();
+  },
+};

package/src/lib/mutation.js

@@ -71,6 +71,7 @@ import { resolveRegionPolicy, isInert, strictestPolicy, skipForPolicy } from './
 import { isPolicyAttribute } from './region-capabilities.js';
 import { ROOT_LIBRARY_ATTRS, ROUTE_ROOT_PREFIX, ROUTE_ACTIVE_ATTR } from './root-attrs.js';
 import { isEphemeralAttr } from './ephemeral.js';
+import { isDerivedChange } from './derived.js';
 
 import { isUserDrivenNow, markUserDriven } from './user-gesture.js';
 
@@ -215,6 +216,7 @@ const localMutation = {
       // and their legacy equivalents), resolved against the callback's `require`.
       let filteredChanges = changes.filter(
         change => {
+          if (require !== 'observed' && isDerivedChange(change)) return false;
           const currentSkipped = skipForPolicy(this._policyForChange(change), require, skip);
           if (!change.policyTransition) return !currentSkipped;
           const previousSkipped = skipForPolicy(change.previousPolicy, require, skip);
@@ -647,7 +649,7 @@ const localMutation = {
       // Runs synchronously in the MO callback; skipped during paused-morph drains.
       if (!onlyNonPausable && isUserDrivenNow()) {
         for (const change of changes) {
-          if (!skipForPolicy(this._policyForChange(change), 'dirty')) {
+          if (!isDerivedChange(change) && !skipForPolicy(this._policyForChange(change), 'dirty')) {
             markUserDriven();
             break;
           }

package/src/lib/style.js

@@ -7,21 +7,24 @@ import { adoptStyleComparisons } from "./style-adoption.js";
 // tag in place (or points the saved <link> at the current href), so a page saved
 // by an older script picks up newer styles. The tag is no-dirty: an update is
 // carried by the next real save and never counts as an edit, starts an autosave
-// or raises the close warning.
-const markNoDirty = (el) => {
+// or raises the close warning. A caller can add region tokens (editor-ui keeps a
+// style a plugin re-injects on every boot out of the saved file).
+const marker = (extra = []) => (el) => {
   const tokens = (el.getAttribute("clay") ?? "").split(/\s+/).filter(Boolean);
-  if (!tokens.includes("no-dirty")) el.setAttribute("clay", [...tokens, "no-dirty"].join(" "));
+  const missing = ["no-dirty", ...extra].filter((token) => !tokens.includes(token));
+  if (missing.length) el.setAttribute("clay", [...tokens, ...missing].join(" "));
 };
+const markNoDirty = marker();
 
 export function style(nameOrHref, css) {
   return writeStyle(nameOrHref, css);
 }
 
-export function styleWithLegacyId(name, css, legacyId) {
-  return writeStyle(name, css, legacyId);
+export function styleWithLegacyId(name, css, legacyId, tokens = []) {
+  return writeStyle(name, css, legacyId, tokens);
 }
 
-function writeStyle(nameOrHref, css, legacyId) {
+function writeStyle(nameOrHref, css, legacyId, tokens = []) {
   const inline = typeof css === "string";
   const identity = inline ? { name: nameOrHref, legacyId } : { href: getStyleBaseUrl(nameOrHref) };
   const legacy = legacyId === undefined ? [] : document.querySelectorAll(`style[id="${legacyId}"]:not([data-name])`);
@@ -30,7 +33,7 @@ function writeStyle(nameOrHref, css, legacyId) {
     adoptStyleComparisons(identity);
     for (const el of legacy) el.dataset.name = nameOrHref;
     if (inline) {
-      const el = insertStyles(nameOrHref, css, markNoDirty);
+      const el = insertStyles(nameOrHref, css, marker(tokens));
       if (legacyId !== undefined) el.id = legacyId;
       return el;
     }

package/src/loader-logic.js

@@ -60,6 +60,9 @@ export const PLUGIN_PATHS = {
   // 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 },
+  // The sapjs core. Loaded for any page with a [sap] root at boot (resolveModules'
+  // hasSap), in view mode too: a reader's tab paints the same totals.
+  derive:    { path: "plugins/derive.js",          editOnly: false, default: false },
 };
 
 // One literal import per module the loader can ask for, so a bundler can see the
@@ -110,11 +113,12 @@ export const MODULES = {
   "plugins/demo.js":            () => import("./plugins/demo.js"),
   "plugins/visitor-drafts.js": () => import("./plugins/visitor-drafts.js"),
   "plugins/source.js":          () => import("./plugins/source.js"),
+  "plugins/derive.js":          () => import("./plugins/derive.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 = ["visitor-drafts", "richclay", "indicator", "sortable", "undo", "quickcrop", "upload", "people", "cms", "sync", "live", "page", "message", "wire", "ai-edit", "demo", "source"];
+const PLUGIN_ORDER = ["visitor-drafts", "richclay", "indicator", "sortable", "undo", "quickcrop", "upload", "people", "cms", "sync", "live", "page", "message", "wire", "ai-edit", "demo", "derive", "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
@@ -137,8 +141,11 @@ const PLUGIN_ORDER = ["visitor-drafts", "richclay", "indicator", "sortable", "un
 // It does not bring undo: hyper-undo takes Cmd+Z for the whole window, text fields
 // included, which a page that never asked for it should not get by default.
 // A page's peers reach it through live sync's stream (live/stream-bridge.js), so
-// a Document without sync saves whole files and never sees another tab type.
-const IMPLIES = { cms: ["quickcrop", "upload"], "ai-edit": ["wire"], page: ["live", "sync"] };
+// a Document without sync saves whole files and never sees another tab type. Its
+// image and file blocks send through `clay.upload`: without the plugin every drop
+// ends in "File uploads are not available", while with it a host that stores no
+// files answers `unsupported` and the editor offers to embed the file instead.
+const IMPLIES = { cms: ["quickcrop", "upload"], "ai-edit": ["wire"], page: ["live", "sync", "upload"] };
 
 function parseCsv(params, key, enabled, apply) {
   const raw = params.get(key);
@@ -162,7 +169,7 @@ const DRAFT_DROPS = ["sync", "live", "page", "upload", "quickcrop", "cms", "peop
 // 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 } = {}) {
+export function resolveModules(params, isEditMode, { isDraftMode = false, hasSap = false } = {}) {
   const core = [...CORE_WAVES.always];
   if (isEditMode) core.push(...CORE_WAVES.editOnly);
 
@@ -175,6 +182,7 @@ export function resolveModules(params, isEditMode, { isDraftMode = false } = {})
   for (const [name, spec] of Object.entries(PLUGIN_PATHS)) {
     if (spec.default) enabled.add(name);
   }
+  if (hasSap) enabled.add("derive");
   // ai-edit cannot run without the wire, so excluding the wire excludes it too.
   if (excluded.has("wire")) enabled.delete("ai-edit");
   // A default-on plugin that this mode drops brings nothing with it. An explicitly

package/src/loader.js

@@ -4,6 +4,8 @@ import { initTheme } from "./ui/theme.js";
 import { ephemeral } from "./lib/ephemeral.js";
 import { effect } from "./lib/effect.js";
 import { style } from "./lib/style.js";
+import { derived } from "./lib/derived.js";
+import { bootPhase } from "./core/boot-phase.js";
 
 function domReady() {
   return new Promise((resolve) => onDomReady(resolve));
@@ -36,7 +38,9 @@ export async function boot(base, params, readyResolve) {
 
   const { isDraftMode } = editMode;
 
-  const plan = resolveModules(params, isEditMode, { isDraftMode });
+  const hasSap = Boolean(document.querySelector("[sap]"));
+  bootPhase.holdSettle = hasSap && isEditMode;
+  const plan = resolveModules(params, isEditMode, { isDraftMode, hasSap });
   const loaded = {};
 
   for (const path of plan.core) {
@@ -70,11 +74,36 @@ export async function boot(base, params, readyResolve) {
   // clay.ready until they finish. allSettled: a failed plugin degrades, never blocks boot.
   await Promise.allSettled(plan.plugins.map((path) => loaded[path]?.ready).filter(Boolean));
 
+  if (hasSap) mountDerivedEngine(loaded);
+
   installViewModeNotice(isEditMode);
   readyResolve(window.clay);
   document.dispatchEvent(new CustomEvent("clay:ready", { detail: { clay: window.clay } }));
 }
 
+// The explicit mount phase for a derive engine (sapjs or its core). It runs after
+// frozen regions recorded their authored markup (save-freeze, core wave) and
+// visitor drafts were restored (plugins), so the first pass paints the page those
+// produced, and the held boot baseline settles on that painted page. Sap.mount()
+// skips roots already mounted, so sapjs's own later mount at clay.ready is a no-op.
+export function mountDerivedEngine(loaded) {
+  const save = loaded["core/save.js"];
+  let fileSignature = null;
+  try {
+    fileSignature = save ? save.currentPaintSignature() : null;
+  } catch (err) {
+    console.error("clayjs: could not read the page's painted values:", err);
+  }
+  try {
+    if (window.Sap && typeof window.Sap.mount === "function") window.Sap.mount();
+  } catch (err) {
+    console.error("clayjs: the derive engine failed to mount:", err);
+  } finally {
+    save?.releaseBootSettle();
+  }
+  if (save && fileSignature != null) save.schedulePaintHeal(fileSignature);
+}
+
 function assembleCore(loaded, { isDraftMode, isEditMode, isOwner, siteVisibility }, regionPolicy) {
   const clay = window.clay;
 
@@ -100,6 +129,7 @@ function assembleCore(loaded, { isDraftMode, isEditMode, isOwner, siteVisibility
   clay.readData = pageData.readData;
   clay.writeData = pageData.writeData;
   clay.ephemeral = ephemeral;
+  clay.derived = derived;
   clay.effect = effect;
   clay.style = style;
 

package/src/page/blocks.js

@@ -556,16 +556,64 @@ export function deleteAtCollapsedEnd(st, dispatch) {
   return true;
 }
 
-// Backspace at the start of a paragraph, heading or code block inside a toggle
-// body moves it out of the toggle, as Shift-Tab does, instead of joining it to
-// the line above. A list item there loses its list format first
-// (backspaceListItem), then leaves on the next Backspace.
+// Delete at the end of a line just above a toggle. A plain paragraph's text
+// moves onto the front of the summary, so the toggle keeps its body and open
+// state; the default join would turn the toggle into a paragraph and release
+// its body. Any other line (heading, list item, callout) would lose its format
+// in that merge, so the caret steps into the summary instead.
+export function deleteBeforeToggle(st, dispatch) {
+  const { $from, empty } = st.selection;
+  if (!empty || $from.depth !== 1) return false;
+  const n = $from.parent, i = $from.index(0);
+  if (!n.isTextblock || n.type.spec.code || isToggle(n) || !n.content.size || $from.parentOffset !== n.content.size) return false;
+  if (i + 1 >= st.doc.childCount || !isToggle(st.doc.child(i + 1))) return false;
+  if (dispatch && n.type !== N.paragraph) dispatch(st.tr.setSelection(TextSelection.create(st.doc, $from.after() + 1)).scrollIntoView());
+  else if (dispatch) {
+    const at = $from.before();
+    const tr = st.tr.insert($from.after() + 1, n.content).delete(at, $from.after());
+    dispatch(tr.setSelection(TextSelection.create(tr.doc, at + 1 + n.content.size)).scrollIntoView());
+  }
+  return true;
+}
+
+// Backspace and Delete at the edge of a code block never merge text into or
+// out of it. An empty line on the other side is removed; otherwise the caret
+// steps across to the neighbouring line.
+const codeEdge = (dir) => (st, dispatch) => {
+  const { $from, empty } = st.selection;
+  if (!empty || $from.depth !== 1 || !$from.parent.isTextblock) return false;
+  const n = $from.parent, i = $from.index(0);
+  if ($from.parentOffset !== (dir < 0 ? 0 : n.content.size)) return false;
+  const ents = outline(st.doc);
+  const ti = dir < 0 ? collapsedBefore(ents, i) : -1;
+  const j = ti >= 0 ? ti : i + dir;
+  if (j < 0 || j >= ents.length) return false;
+  const o = ents[j].node;
+  if (!o.isTextblock || (!n.type.spec.code && !o.type.spec.code)) return false;
+  if (!dispatch) return true;
+  const tr = st.tr, mine = ents[i], other = ents[j];
+  const target = dir < 0 ? other.end - 1 : other.at + 1;
+  if (!n.content.size && !n.type.spec.code) tr.delete(mine.at, mine.end).setSelection(TextSelection.create(tr.doc, tr.mapping.map(target)));
+  else if (!o.content.size && !o.type.spec.code) tr.delete(other.at, other.end);
+  else tr.setSelection(TextSelection.create(tr.doc, target));
+  dispatch(tr.scrollIntoView());
+  return true;
+};
+export const backspaceCodeEdge = codeEdge(-1);
+export const deleteCodeEdge = codeEdge(1);
+
+// Backspace at the start of the first paragraph, heading or code block of a
+// toggle body joins it onto the summary line, which the default join cannot
+// do. Later body blocks are left to the default join with the line above.
 export function backspaceBodyBlock(st, dispatch) {
   const { $from, empty } = st.selection;
   if (!empty || $from.depth !== 1 || $from.parentOffset !== 0 || !$from.parent.isTextblock) return false;
   const n = $from.parent;
   if (isList(n) || isToggle(n) || parentOf(n) === null) return false;
-  return outdentBlocks(st, dispatch);
+  const i = $from.index(0);
+  if (st.doc.child(i - 1).attrs.id !== parentOf(n)) return false;
+  if (dispatch) dispatch(joinIntoSummary(st, outline(st.doc), i - 1, i).scrollIntoView());
+  return true;
 }
 
 // ---- open / closed ----------------------------------------------------------
@@ -1095,7 +1143,8 @@ export function pastePlugin() {
 
 // ---- keymap -----------------------------------------------------------------
 
-const backspace = commands.chainCommands(backspaceListItem, backspaceToggle, backspaceBodyBlock, backspaceAfterCollapsed);
+const backspace = commands.chainCommands(backspaceListItem, backspaceToggle, backspaceCodeEdge, backspaceBodyBlock, backspaceAfterCollapsed);
+const del = commands.chainCommands(deleteAtCollapsedEnd, deleteBeforeToggle, deleteCodeEdge);
 
 // Modified Backspace and Delete get the same guards as the plain keys, so none
 // of them can reach baseKeymap's joins into a hidden body. Where no guard
@@ -1107,12 +1156,12 @@ export const blockKeys = {
   "Mod-Backspace": backspace,
   "Alt-Backspace": backspace,
   "Ctrl-h": backspace,
-  Delete: deleteAtCollapsedEnd,
-  "Shift-Delete": deleteAtCollapsedEnd,
-  "Mod-Delete": deleteAtCollapsedEnd,
-  "Alt-Delete": deleteAtCollapsedEnd,
-  "Ctrl-d": deleteAtCollapsedEnd,
-  "Ctrl-Alt-Backspace": deleteAtCollapsedEnd,
+  Delete: del,
+  "Shift-Delete": del,
+  "Mod-Delete": del,
+  "Alt-Delete": del,
+  "Ctrl-d": del,
+  "Ctrl-Alt-Backspace": del,
   Tab: indentBlocks,
   "Shift-Tab": outdentBlocks,
   "Mod-Shift-ArrowUp": moveBlock(-1),

package/src/page/editor.js

@@ -338,7 +338,9 @@ function checkboxClick(view, event) {
 export function createPageEditor(mount, { blocks = null, onChange = null, upload, highlight, doc: initialDoc, dispatch, history: useHistory = true, undo, redo, editable = true, toolHost: providedToolHost = null, onAiTool = null, reviseTool = null, board = null } = {}) {
   const doc = mount.ownerDocument;
   const toolHost = providedToolHost ?? createToolHost({ mode: "edit" });
-  styleWithLegacyId(STYLE_ID, PAGE_EDITOR_CSS, STYLE_ID);
+  // Editor chrome, injected on every edit-mode boot and kept out of the saved file:
+  // the reader theme <link> styles the page for visitors.
+  styleWithLegacyId(STYLE_ID, PAGE_EDITOR_CSS, STYLE_ID, ["editor-ui"]);
   const shell = doc.createElement("div");
   shell.className = "page-shell";
   shell.setAttribute("clay", "editor-ui");

package/src/plugins/derive.js

@@ -0,0 +1,12 @@
+// The sapjs core, for a page with a [sap] root and no full sapjs. It paints the
+// presentations the page declares from its records (text, show, attr:, class:,
+// css:), and ClayJS treats what it paints as derived (lib/derived.js). Markup
+// that needs more is a mount error that names full sapjs. Full sapjs, loaded by
+// its own script tag, takes the page over, and this plugin stays idle.
+
+function fullSapjs() {
+  const sap = window.Sap;
+  return Boolean((sap && !sap.core) || window.clay?.loaded?.sap);
+}
+
+export const ready = fullSapjs() ? null : import("../vendor/sap-core.vendor.js").then(() => {});