@panphora/clayjs 1.5.3 → 1.6.1

package/src/plugins/cms.js

@@ -0,0 +1,12 @@
+// The CMS shell, toggle, inline layer and ghost rows, with their --mirk-* tokens pinned
+// to Bevel and the Bevel system mono face. The CMS keeps its own stylesheet and its
+// own light/dark switching. The "Edit content" toggle also gets Bevel's button face, ink and hover (src/ui/skins/cms-toggle.js).
+import { installSkin } from "../ui/vendor-skin.js";
+import { CSS } from "../ui/skins/cms.js";
+import { CSS as TOGGLE_CSS, ROOTS as TOGGLE_ROOTS } from "../ui/skins/cms-toggle.js";
+
+export { cms, default } from "../vendor/hypercms.vendor.js";
+
+installSkin("cms", CSS);
+// The toggle takes the page's scheme, so Bevel's face and ink resolve the way the page reads.
+installSkin("cms-toggle", TOGGLE_CSS, { roots: TOGGLE_ROOTS });

package/src/plugins/indicator.js

@@ -1,7 +1,11 @@
 import { isEditMode } from "../core/is-edit-mode.js";
 import onDomReady from "../lib/dom-ready.js";
+import { set, style } from "../lib/hostile-css.js";
+import { bevelSurface, pageScheme } from "../ui/bevel-controls.js";
+import { TOKENS, FONT_SANS } from "../ui/bevel.js";
+import { saveFeedback } from "../core/save-feedback.js";
 
-// No 'conflict' here on purpose. core/save-conflict-notice.js owns that state now,
+// No 'conflict' here on purpose. core/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
@@ -19,41 +23,56 @@ const STICKY = new Set(["saving"]);
 
 const ALARMING = new Set(["error", "offline"]);
 
+const REST = [`background:${TOKENS.surface}`, `color:${TOKENS.ink}`, `border-color:${TOKENS["line-2"]}`];
+const ALARM = [
+  `background:${TOKENS["ox-soft"]}`,
+  `color:${TOKENS.ox}`,
+  `border-color:color-mix(in srgb, ${TOKENS.ox} 28%, ${TOKENS["ox-soft"]})`,
+];
+
 let el = null;
 let hideTimer = null;
 
 function ensure() {
   if (el) return el;
-  el = document.createElement("div");
-  el.setAttribute("clay", "no-save no-watch no-snapshot");
+  const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  el = bevelSurface("div", [
+    "position:fixed", "right:16px", "bottom:16px", "z-index:2147483000",
+    "padding:4px 12px", `font:500 13px/1.6 ${FONT_SANS}`,
+    "opacity:0", `transition:${reduced ? "none" : "opacity .25s"}`, "pointer-events:none",
+    `color-scheme:${pageScheme()}`,
+  ]);
   el.setAttribute("data-clay-indicator", "");
   el.setAttribute("role", "status");
-  el.style.cssText = [
-    "position:fixed", "right:16px", "bottom:16px", "z-index:2147483000",
-    "padding:4px 12px", "border-radius:999px",
-    "font:13px/1.6 system-ui,-apple-system,sans-serif",
-    "background:var(--clay-indicator-bg,#2e2b27)",
-    "color:var(--clay-indicator-ink,#f2f0eb)",
-    "opacity:0", "transition:opacity .25s", "pointer-events:none",
-  ].join(";");
-  if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) el.style.transition = "none";
   document.body.appendChild(el);
   return el;
 }
 
 function show(state) {
+  // A failed or offline save is the persistent toast's to report when clay-ui is loaded,
+  // and so is saved when the page turned on clay.saveToast.
+  if (saveFeedback.toasts && (ALARMING.has(state) || (state === "saved" && saveFeedback.savedToast))) {
+    clearTimeout(hideTimer);
+    if (el) {
+      set(el, "opacity", "0");
+      el.textContent = "";
+      delete el.dataset.state;
+    }
+    return;
+  }
   const node = ensure();
   node.textContent = LABELS[state];
   node.dataset.state = state;
-  node.style.background = ALARMING.has(state)
-    ? "var(--clay-indicator-error-bg,#7a3b28)" : "var(--clay-indicator-bg,#2e2b27)";
-  node.style.opacity = "1";
+  set(node, "color-scheme", pageScheme());
+  style(node, ALARMING.has(state) ? ALARM : REST);
+  set(node, "opacity", "1");
   clearTimeout(hideTimer);
-  if (!STICKY.has(state)) hideTimer = setTimeout(() => { node.style.opacity = "0"; }, 2200);
+  if (!STICKY.has(state)) hideTimer = setTimeout(() => { set(node, "opacity", "0"); }, 2200);
 }
 
 function init() {
   if (!isEditMode) return;
+  saveFeedback.chip = true;
   for (const state of Object.keys(LABELS)) {
     document.addEventListener("clay:save-" + state, () => show(state));
   }

package/src/plugins/quickcrop.js

@@ -0,0 +1,103 @@
+// clay.quickcrop: the vendored cropper, framed by ClayJS's own Bevel dialog.
+//
+// quickcrop draws the crop stage; how it is framed is an adapter's job (its
+// `modal` option). Left to itself it would wrap themodal by reaching for themodal's
+// classes, which ClayJS's modal no longer has, or fall back to a frame of its own
+// that a page stylesheet can repaint. So every request that would have landed on
+// either ('auto', or a themodal-shaped object such as clay.modal, which is what the
+// CMS passes) is framed here instead. 'builtin' and a caller's own adapter pass
+// through untouched. The stage itself is quickcrop's, and so is its geometry; its
+// skin keeps a page stylesheet off it.
+import vendorQuickcrop from "../vendor/quickcrop.vendor.js";
+import { bevelDialog, dismissOf, keepFocusIn } from "../ui/bevel-dialog.js";
+import { bevelButton } from "../ui/bevel-controls.js";
+import { installSkin } from "../ui/vendor-skin.js";
+import { CSS as SKIN, ROOTS as SKIN_ROOTS } from "../ui/skins/quickcrop.js";
+
+const WIDTH = 844;
+
+installSkin("quickcrop", SKIN, { roots: SKIN_ROOTS });
+
+function isThemodal(m) {
+  return !!m && typeof m === "object" &&
+    typeof m.open === "function" && typeof m.close === "function" &&
+    typeof m.onYes === "function" && "html" in m;
+}
+
+export const bevelCropAdapter = {
+  // The stage has to fit inside the panel: the overlay's 16px side inset, the panel's
+  // 1px border and the body's 22px padding a side; below it the header, the footer and
+  // the overlay's top inset. Widths come from clientWidth, which leaves out a classic
+  // scrollbar as the overlay does.
+  fit() {
+    const width = document.documentElement.clientWidth;
+    return {
+      width: Math.max(120, Math.min(WIDTH, width - 32) - 2 - 44),
+      height: Math.max(120, window.innerHeight - Math.min(96, window.innerHeight * 0.1) - 200),
+    };
+  },
+  open({ content, confirmLabel, onConfirm, onCancel }) {
+    const { root, overlay, panel, heading, body, footer, close } = bevelDialog({
+      zIndex: "2147483001", width: `${WIDTH}px`, closable: true, titled: true,
+    });
+    heading.textContent = "Crop image";
+    panel.setAttribute("aria-label", "Crop image");
+    body.append(content);
+    const confirm = bevelButton(confirmLabel, { variant: "primary", onClick: () => onConfirm() });
+    footer.append(confirm);
+
+    close.addEventListener("click", () => onCancel());
+    panel.addEventListener("submit", (event) => event.preventDefault());
+    let pressedOnBackdrop = false;
+    overlay.addEventListener("mousedown", (event) => { pressedOnBackdrop = event.target === overlay; });
+    overlay.addEventListener("click", (event) => {
+      if (pressedOnBackdrop && event.target === overlay) onCancel();
+      pressedOnBackdrop = false;
+    });
+    // Capture, and stopped there, so a dialog underneath (a CMS confirm through
+    // clay.modal) does not take the same key as its own: Escape cancels this crop,
+    // Tab stays inside it.
+    const onKey = (event) => {
+      if (event.key === "Tab") {
+        event.stopPropagation();
+        keepFocusIn(panel, event);
+        return;
+      }
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      onCancel();
+    };
+    document.addEventListener("keydown", onKey, true);
+
+    // The page does not scroll behind the crop, as it did not under themodal. The
+    // previous value comes back, so a modal underneath keeps its own lock.
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      document.removeEventListener("keydown", onKey, true);
+      document.body.style.overflow = overflow;
+      root.remove();
+    };
+    // A modal opened on top supersedes this crop the way it supersedes itself: the
+    // crop is cancelled, so its promise settles and the next crop can open.
+    dismissOf.set(root, () => { finish(); onCancel(); });
+
+    root.setAttribute("aria-hidden", "false");
+    document.body.append(root);
+    confirm.focus();
+
+    return { close: finish };
+  },
+};
+
+export function quickcrop(file, options = {}) {
+  const modal = options.modal ?? "auto";
+  const framed = modal === "auto" || isThemodal(modal);
+  return vendorQuickcrop(file, framed ? { ...options, modal: bevelCropAdapter } : options);
+}
+
+export default quickcrop;

package/src/plugins/richclay.js

@@ -0,0 +1,21 @@
+// richclay's toolbar, menus, floating toolbar and link dialog, raised above the host
+// page by its skin. The vendor bundle is unchanged; the skin goes in first, so the
+// editor never draws a frame of chrome the page can repaint.
+import { installSkin } from "../ui/vendor-skin.js";
+import { CSS, ROOTS } from "../ui/skins/richclay.js";
+import { RichClay } from "../vendor/richclay.vendor.js";
+import { isEditMode } from "../core/is-edit-mode.js";
+
+installSkin("richclay", CSS, { roots: ROOTS });
+
+// A frame's snapshot carries none of RichClay's runtime state, and the merge removes
+// live attributes the merged page lacks, so an applied frame leaves editors that can
+// no longer be typed into. RichClay's reattach() restores them. View mode mounts none.
+if (isEditMode) {
+  document.addEventListener("clay:sync-applied", () => {
+    for (const editor of RichClay.init()) editor.reattach();
+  });
+}
+
+export { RichClay };
+export default RichClay;

package/src/plugins/source.js

@@ -19,8 +19,10 @@
  *   sync-applied  re-pair, because a morph replaces live nodes and the map is keyed
  *                 by node identity.
  *
- * The last two share one deferred, coalesced refresh, so neither sits between a save
- * landing and the page hearing about it, and a burst of frames costs one walk.
+ * The accepted-save re-model is deferred and coalesced, so it never sits between a save
+ * landing and the page hearing about it. A sync frame's re-pair shares that idle refresh,
+ * so a burst of frames costs one walk, and a save, `text()` or `locate()` that comes
+ * before it runs it first, so none of them work from a map the morph made stale.
  *
  * NOTHING HERE BLOCKS BOOT. The install is async and the loader does not wait for
  * it, because a save before it finishes is a save exactly as it is today. Waiting
@@ -173,6 +175,10 @@ function install(sourceUrl) {
  */
 export function renderSave(clone, today, opts = {}) {
   if (!state.installed) return today;
+  // A refresh still waiting for idle time runs now, so this save never renders from a
+  // map a morph made stale. It pairs against the page, not this clone: onbeforesave may
+  // have changed the clone, and the map must describe the live page.
+  refreshNow();
   state.lastOutcome = null;
   const print = new Set();
   let firstDiff = null;
@@ -288,7 +294,8 @@ function report(bytes) {
  * the page, and it has to be re-paired either way. A DISK frame also carries the bytes
  * now on disk, written by somebody else: those become the model, the same as bytes this
  * tab saved, or the next save would copy the old formatting back over theirs. A peer
- * frame changed nothing on disk, so the model stays.
+ * frame changed nothing on disk, so the model stays. The re-pair runs in idle time, or
+ * earlier if a save, `text()` or `locate()` needs it first.
  */
 function queueRepair(event) {
   if (!state.installed) return;
@@ -380,7 +387,7 @@ function summary() {
 
 export const source = {
   ready: null,
-  stats: summary,
+  stats: () => { refreshNow(); return summary(); },
   /** The bytes this module believes are on disk right now. A refresh still queued from a save or a disk frame runs first, so this is never the file before that. */
   text: () => { refreshNow(); return state.model ? state.model.src : null; },
   /**
@@ -398,9 +405,9 @@ export const source = {
    */
   locate: (node) => { refreshNow(); return state.installed && node ? locate(node, state.map, state.model) : null; },
   /** What did not pair, for working out why a document reprints more than it should. */
-  unpaired: () => (state.stats
+  unpaired: () => { refreshNow(); return (state.stats
     ? { live: state.stats.unmatchedLive.slice(0, 50), source: state.stats.unmatchedSource.slice(0, 50) }
-    : null),
+    : null); },
 };
 
 onSaveAccepted(adopt);

package/src/plugins/wire.js

@@ -506,6 +506,10 @@ async function flushSave() {
   // surface is an opt-in satellite script, absent on every page the loader
   // builds, so reading it here made "is a save on the wire" permanently false.
   const { isSaveInProgress } = await import("../core/save-core.js");
+  // A held save is an AI edit preview waiting for Keep or Revert, not a page with
+  // nothing to save: posting now would hand the agent a file that is about to change.
+  const { savesHeld } = await import("../core/save.js");
+  if (savesHeld()) throw new Error("keep or revert the AI edit first");
   const deadline = Date.now() + SAVE_FLUSH_TIMEOUT_MS;
 
   for (let attempt = 0; attempt < 3; attempt++) {