@panphora/clayjs 1.5.2 → 1.6.0

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

@@ -19,17 +19,16 @@ import { set, make } from "../lib/hostile-css.js";
 // One line, no choice to make: nothing on this page can fix it, so offering a button
 // would be a lie. Dismissable, because after you have read it, it is only in the way.
 
-const BG = "var(--clay-notice-bg,#222)";
-const INK = "var(--clay-notice-ink,#fff)";
-const EDGE = "var(--clay-notice-edge,rgba(255,255,255,.28))";
-const FONT = "14px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif";
-
 const MESSAGE =
   "This page can't be edited: the app serving it is out of date. " +
   "Update HTML Clay to 1.9.0 or newer.";
 
 let root = null;
 
+// Bevel is fetched only when the warning is actually shown. This module loads on every
+// page, view mode included, and almost none of them ever show it.
+let ui = null;
+
 // A phone keyboard shrinks the visual viewport but leaves fixed elements pinned to the
 // layout viewport, so a bottom-anchored bar parks itself behind the keyboard. Same fix
 // as the conflict notice.
@@ -48,32 +47,24 @@ function dismiss() {
 }
 
 function build() {
-  root = make("div", [
+  root = ui.bevelSurface("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",
+    "z-index:2147483001", "display:flex", "align-items:center", "gap:10px 12px",
+    "width:max-content", "max-width:calc(100vw - 24px)", "flex-wrap:wrap",
+    "padding:8px 8px 8px 14px", "text-align:left", `color-scheme:${ui.pageScheme()}`,
   ]);
   // Three markers, and each is load-bearing on a page that CAN save: this element is
   // injected, so it is in no document on disk and must never reach one, never wake the
   // watcher, and never ride out in a snapshot to somebody else's browser.
-  root.setAttribute("clay", "no-save no-watch no-snapshot");
+  root.setAttribute("clay", ui.RUNTIME_ONLY);
   root.setAttribute("data-clay-stale-host", "");
   root.setAttribute("role", "alert");
 
-  root.append(make("span", ["margin-right:2px"], MESSAGE));
-
-  const close = make("button", [
-    "all:initial", "box-sizing:border-box", "cursor:pointer", `font:${FONT}`,
-    "color:" + INK, "opacity:.72", "padding:2px 6px", "border-radius:6px", "flex:none",
-  ], "Dismiss");
-  close.type = "button";
+  const dot = make("span", ["all:initial", "color-scheme:inherit", "display:inline-block", "flex:none", "width:8px", "height:8px", "border-radius:50%", `background:${ui.TOKENS.ox}`]);
+  dot.setAttribute("clay", ui.RUNTIME_ONLY);
+  const close = ui.bevelButton("Dismiss", { small: true, variant: "quiet", onClick: dismiss });
   close.setAttribute("aria-label", "Dismiss this message");
-  close.addEventListener("click", dismiss);
-  root.append(close);
+  root.append(dot, ui.bevelText("span", [], MESSAGE), close);
 
   document.body.appendChild(root);
   place();
@@ -81,7 +72,7 @@ function build() {
   window.visualViewport?.addEventListener("scroll", place);
 }
 
-function init() {
+async function init() {
   if (!servedStaleToken()) return;
   // ?editmode=true outranks the stale-host check by design: that is a person at the
   // keyboard asking for editing on this load, and is-edit-mode.js gives it to them.
@@ -89,7 +80,13 @@ function init() {
   // told its reader the opposite. The message is only true while editing is actually
   // off, so it is shown only then.
   if (isEditMode) return;
+  const [controls, bevel] = await Promise.all([import("../ui/bevel-controls.js"), import("../ui/bevel.js")]);
+  ui = { ...controls, TOKENS: bevel.TOKENS };
   build();
 }
 
-onDomReady(init);
+let shown = Promise.resolve();
+onDomReady(() => { shown = init(); });
+
+// Settles once the warning is on the page, or straight away when there is none to show.
+export const whenShown = () => shown;

package/src/core/unsaved-warning.js

@@ -19,6 +19,20 @@ import { isEditMode } from "./is-edit-mode.js";
 import { captureForDirtyCheck } from "./snapshot.js";
 import { getLastSavedDirty } from "./save.js";
 import { logUnloadDiffSync, preloadIfEnabled } from "../lib/autosave-debug.js";
+import { hasUnsavedState } from "../lib/unsaved-state.js";
+
+// One beforeunload let through, for the reload a person confirmed with two presses
+// in the conflict notice. Nothing else is switched off: the next close still warns.
+let discardPermit = false;
+export function reloadAfterDiscard({ isCurrent, reload }) {
+  if (!isCurrent()) return false;
+  discardPermit = true;
+  // Browsers fire beforeunload for a reload on their own schedule; a permit still
+  // unused a second later means the navigation did not happen.
+  setTimeout(() => { discardPermit = false; }, 1000);
+  reload();
+  return true;
+}
 
 // Pre-load diff library if debug mode is on (so it's ready for unload)
 preloadIfEnabled();
@@ -31,20 +45,31 @@ preloadIfEnabled();
 // the person editing it deserves the warning.
 window.addEventListener('beforeunload', (event) => {
   if (!isEditMode) return;
-  // The demo plugin saves into this browser's own storage, so leaving the page
-  // loses nothing a prompt could protect.
-  if (window.clay?.demo) return;
 
-  // The DIRTY domain, not the autosave domain. An edit inside a
-  // no-trigger-autosave region never starts a save by itself, which is exactly
-  // why closing the tab on one has to warn: nothing else is going to write it.
-  const currentForCompare = captureForDirtyCheck();
-  const lastSaved = getLastSavedDirty();
+  if (discardPermit) {
+    discardPermit = false;
+    return;
+  }
+
+  // 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.
+  const held = hasUnsavedState();
 
-  if (currentForCompare !== lastSaved) {
+  // The demo plugin saves the page's bytes into this browser's own storage, so
+  // leaving loses none of them.
+  let bytesDiffer = false;
+  if (!held && !window.clay?.demo) {
+    // The DIRTY domain, not the autosave domain. An edit inside a
+    // no-trigger-autosave region never starts a save by itself, which is exactly
+    // why closing the tab on one has to warn: nothing else is going to write it.
+    const currentForCompare = captureForDirtyCheck();
+    const lastSaved = getLastSavedDirty();
+    bytesDiffer = currentForCompare !== lastSaved;
     // Debug: log what's different before showing the warning
-    logUnloadDiffSync(currentForCompare, lastSaved);
+    if (bytesDiffer) logUnloadDiffSync(currentForCompare, lastSaved);
+  }
 
+  if (held || bytesDiffer) {
     event.preventDefault();
     event.returnValue = '';
   }

package/src/lib/content-dom.js

@@ -27,8 +27,10 @@ function matchesWithin(node, selector, boundary, inherit) {
 
 function importTree(source, targetDocument, capability, capabilityMatch, exclude, boundary, inherit, maps) {
   if (source.nodeType === 1 && (
-    (inherit ? hasCapability(source, capability) : matchesWithin(source, capabilityMatch, boundary, false)) ||
-    (exclude && matchesWithin(source, exclude, boundary, inherit))
+    (inherit
+      ? hasCapability(source, capability)
+      : matchesWithin(source, capabilityMatch, boundary, false)) ||
+    (exclude && (inherit && source !== boundary ? source.matches(exclude) : matchesWithin(source, exclude, boundary, inherit)))
   )) return null
   const copy = targetDocument.importNode(source, false)
   maps.cloneToLive.set(copy, source)

package/src/lib/dirty-gate.js

@@ -191,3 +191,12 @@ export function gateClearIfUnchanged(token) {
 if (typeof document !== 'undefined' && isEditMode) {
   startDirtyGate();
 }
+
+// Public for editors whose own surface is editor-ui (so neither gate feed sees it):
+// a person's edit made while a live-sync frame waits on a resource would otherwise be
+// recorded as saved. Set here, not in the loader, because the sync plugin is what
+// loads this module.
+if (typeof window !== 'undefined') {
+  window.clay = window.clay || {};
+  window.clay.markDirty = gateMarkDirty;
+}

package/src/lib/unsaved-state.js

@@ -0,0 +1,55 @@
+/**
+ * unsaved-state.js: "this tab holds work its saved bytes cannot show".
+ *
+ * The close warning compares the page's bytes with the last save. Some work is
+ * not in those bytes: text a live-sync merge replaced, kept in memory until the
+ * person reviews it, or an editor's model ahead of the DOM it writes into. Its
+ * owner registers a synchronous check here, and the close warning fires while
+ * any check says pending. Checks run fresh each time, so a forgotten state can
+ * never outlive what it describes, and a save never clears one.
+ */
+const sources = new Map();
+let nextKey = 0;
+
+export function registerUnsavedState({ id = '', isPending }) {
+  const key = ++nextKey;
+  sources.set(key, { id, isPending });
+  let disposed = false;
+  return {
+    changed() {
+      if (disposed) return;
+      document.dispatchEvent(new CustomEvent('clay:unsaved-state-changed', {
+        detail: { pending: pendingIds() },
+      }));
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      sources.delete(key);
+    },
+  };
+}
+
+// A check that throws counts as pending: unknown is not clean.
+function isPending(source) {
+  try {
+    return !!source.isPending();
+  } catch (err) {
+    console.error(`[clay] unsaved-state check "${source.id}" threw`, err);
+    return true;
+  }
+}
+
+export function pendingIds() {
+  return [...sources.values()].filter(isPending).map((s) => s.id);
+}
+
+export function hasUnsavedState() {
+  for (const source of sources.values()) if (isPending(source)) return true;
+  return false;
+}
+
+if (typeof window !== 'undefined') {
+  window.clay = window.clay || {};
+  window.clay.registerUnsavedState = registerUnsavedState;
+}

package/src/lib/user-gesture.js

@@ -44,6 +44,9 @@ const RECENT_GESTURE_MS = 500;
 
 let gestureTaskActive = false;
 let lastTrustedGestureTs = -Infinity;
+// Set by the first trusted gesture and never cleared. Live sync reads it at the
+// load-time settle: a page nobody has touched yet holds no one's edit.
+let anyGesture = false;
 let userDrivenSinceLastSave = false;
 let explicitSaveIntent = false;
 let installed = false;
@@ -55,6 +58,7 @@ function now() {
 }
 
 function markGestureTurn() {
+  anyGesture = true;
   gestureTaskActive = true;
   lastTrustedGestureTs = now();
   // Clear the same-turn flag on the next macrotask. The MutationObserver
@@ -100,6 +104,11 @@ export function markUserDriven() {
   userDrivenSinceLastSave = true;
 }
 
+/** True once any trusted gesture has reached the page. */
+export function gestureSeen() {
+  return anyGesture;
+}
+
 /**
  * Read-and-reset the accumulated bit. Called at the ACTUAL save send (not on a
  * save that never ships), so it survives the autosave debounce and coalescing.
@@ -144,6 +153,7 @@ export function _resetUserGesture() {
   gestureTaskActive = false;
   lastTrustedGestureTs = -Infinity;
   userDrivenSinceLastSave = false;
+  anyGesture = false;
   explicitSaveIntent = false;
 }
 

package/src/loader-logic.js

@@ -16,7 +16,7 @@ export const CORE_WAVES = {
     // transform registered after that made an untouched page read as unsaved.
     "core/persist.js", "core/admin-attrs.js",
     "core/save-core.js", "core/save.js",
-    "core/save-conflict-notice.js",
+    "core/conflict-notice.js",
     "core/unsaved-warning.js", "core/autosave.js",
     "attrs/save-freeze.js", "attrs/onaftersave.js", "attrs/refetch-on-save.js",
     "lib/cache-bust.js",
@@ -24,20 +24,21 @@ export const CORE_WAVES = {
 };
 
 export const PLUGIN_PATHS = {
-  richclay:  { path: "vendor/richclay.vendor.js",  editOnly: true,  default: true },
+  richclay:  { path: "plugins/richclay.js",        editOnly: true,  default: true },
   indicator: { path: "plugins/indicator.js",       editOnly: true,  default: false },
   sync:      { path: "sync/live-sync.js",          editOnly: false, default: false },
   sortable:  { path: "plugins/sortable.js",        editOnly: true,  default: false },
   undo:      { path: "plugins/undo.js",            editOnly: true,  default: false },
-  cms:       { path: "vendor/hypercms.vendor.js",  editOnly: false, default: false },
-  quickcrop: { path: "vendor/quickcrop.vendor.js", editOnly: false, default: false },
+  cms:       { path: "plugins/cms.js",             editOnly: false, default: false },
+  quickcrop: { path: "plugins/quickcrop.js",       editOnly: false, default: false },
   // editOnly, because a file picker only ever appears in edit mode: the cms
   // injects its own editing toggle there and clayjs's edit-mode signal is a
   // superset of the cms's, so the plugin is present exactly when it can be used.
   upload:    { path: "plugins/upload.js",          editOnly: true,  default: false },
   wire:      { path: "plugins/wire.js",            editOnly: false, default: false },
-  // Edit mode only: the AI comment box is an editing gesture, and the plugin is
-  // dormant anyway on any host that does not list a ready `ai-edit` helper.
+  // Edit mode only: the AI comment box is an editing gesture. Opt in with
+  // `plugins=ai-edit`; it stays dormant on any host that does not list a ready
+  // `ai-edit` helper.
   "ai-edit": { path: "plugins/ai-edit.js",         editOnly: true,  default: false },
   demo:      { path: "plugins/demo.js",            editOnly: false, default: false },
   // Saves the file's own bytes back instead of a fresh serialization of the DOM.
@@ -68,7 +69,7 @@ export const MODULES = {
   "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/conflict-notice.js":     () => import("./core/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"),
@@ -78,13 +79,13 @@ export const MODULES = {
   "attrs/refetch-on-save.js":   () => import("./attrs/refetch-on-save.js"),
   "lib/cache-bust.js":          () => import("./lib/cache-bust.js"),
   "vendor/hyper-morph.vendor.js": () => import("./vendor/hyper-morph.vendor.js"),
-  "vendor/richclay.vendor.js":  () => import("./vendor/richclay.vendor.js"),
+  "plugins/richclay.js":        () => import("./plugins/richclay.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/cms.js":             () => import("./plugins/cms.js"),
+  "plugins/quickcrop.js":       () => import("./plugins/quickcrop.js"),
   "plugins/upload.js":          () => import("./plugins/upload.js"),
   "plugins/wire.js":            () => import("./plugins/wire.js"),
   "plugins/ai-edit.js":         () => import("./plugins/ai-edit.js"),
@@ -114,6 +115,8 @@ const PLUGIN_ORDER = ["richclay", "indicator", "sortable", "undo", "quickcrop",
 // enables. Reverting it is reverting this line.
 // ai-edit reads `clay.wire.helpers()` and sends through `clay.wire.send`, so a page
 // that asks for it has to have the wire. The wire loads first in the order above.
+// 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.
 const IMPLIES = { cms: ["quickcrop", "upload"], "ai-edit": ["wire"] };
 
 function parseCsv(params, key, enabled, apply) {
@@ -134,17 +137,25 @@ export function resolveModules(params, isEditMode) {
   const core = [...CORE_WAVES.always];
   if (isEditMode) core.push(...CORE_WAVES.editOnly);
 
-  const enabled = new Set();
+  const explicit = new Set();
+  parseCsv(params, "plugins", explicit, (set, name) => set.add(name));
+  const excluded = new Set();
+  parseCsv(params, "exclude", excluded, (set, name) => set.add(name));
+
+  const enabled = new Set(explicit);
   for (const [name, spec] of Object.entries(PLUGIN_PATHS)) {
     if (spec.default) enabled.add(name);
   }
-  parseCsv(params, "plugins", enabled, (set, name) => set.add(name));
-  // Between the two: exclude still wins, so `plugins=cms&exclude=quickcrop` opts
-  // back out of the cropper.
+  // 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
+  // asked for plugin still brings what it implies.
   for (const name of [...enabled]) {
+    if (excluded.has(name)) continue;
+    if (!explicit.has(name) && PLUGIN_PATHS[name].editOnly && !isEditMode) continue;
     for (const implied of IMPLIES[name] || []) enabled.add(implied);
   }
-  parseCsv(params, "exclude", enabled, (set, name) => set.delete(name));
+  for (const name of excluded) enabled.delete(name);
 
   const plugins = [];
   for (const name of PLUGIN_ORDER) {

package/src/loader.js

@@ -108,7 +108,8 @@ function attachPluginMember(path, mod) {
     clay.undo = mod.undo || mod.default;
   } else if (path === "sync/live-sync.js") {
     clay.morph = mod.morph;
-  } else if (path === "vendor/hypercms.vendor.js") {
+    clay.conflicts = mod.conflicts;
+  } else if (path === "plugins/cms.js") {
     clay.cms = mod.cms || mod.default;
   } else if (path === "plugins/upload.js") {
     clay.upload = mod.upload || mod.default;
@@ -118,9 +119,9 @@ function attachPluginMember(path, mod) {
     clay.aiEdit = mod.aiEdit || mod.default;
   } else if (path === "plugins/demo.js") {
     clay.demo = mod.demo;
-  } else if (path === "vendor/richclay.vendor.js") {
+  } else if (path === "plugins/richclay.js") {
     clay.RichClay = mod.RichClay || mod.default;
-  } else if (path === "vendor/quickcrop.vendor.js") {
+  } else if (path === "plugins/quickcrop.js") {
     clay.quickcrop = mod.quickcrop || mod.default;
   } else if (path === "plugins/source.js") {
     clay.source = mod.source || mod.default;