@panphora/clayjs 1.23.0 → 1.24.1

package/src/plugins/menu/visitor.js

@@ -1,37 +1,19 @@
 import { createShell } from "./shell.js";
-import { attachDomItems } from "./dom-items.js";
 import { MENU_SAFETY, SHELL_BASE, SHELL_FLOATING, MENU_SKIN, MENU_TOUCH } from "./shell-style.js";
 import { activeLook, labelOf, looks, nameOf, paintLook } from "./looks.js";
+import { keys } from "./preferences.js";
 
-function attachLooks({ addItem, removeItem, slot }) {
+// The page's looks for a visitor: painted and readable through clay.variants, with no row to switch them.
+function publishLooks() {
   const announce = () => {
     const name = activeLook() && nameOf(activeLook());
     document.dispatchEvent(new CustomEvent("clay:variant-change", { detail: { active: name, shown: name } }));
   };
-  const draw = () => {
-    const all = looks();
-    if (all.length < 2 || !slot?.hasAttribute("clay-menu-looks")) return removeItem("clay.look");
-    const current = activeLook();
-    const by = (delta) => () => choose(nameOf(all[(all.indexOf(activeLook()) + delta + all.length) % all.length]));
-    addItem({
-      id: "clay.look",
-      section: "start",
-      stepper: {
-        label: "Switch look",
-        value: `${labelOf(current)} ${all.indexOf(current) + 1}/${all.length}`,
-        prev: by(-1),
-        next: by(1),
-        prevLabel: "Previous look",
-        nextLabel: "Next look",
-      },
-    });
-  };
   const choose = (name) => {
     if (!looks().some((style) => nameOf(style) === name)) return { ok: false, code: "unknown-variant" };
     document.documentElement.setAttribute("look", name);
     paintLook(name);
     window.clay?.save?.soon?.();
-    draw();
     announce();
     return { ok: true };
   };
@@ -49,30 +31,58 @@ function attachLooks({ addItem, removeItem, slot }) {
       keep: () => Promise.resolve({ ok: false, code: "not-editing" }),
     };
     document.addEventListener("clay:drafts-restored", () => {
-      draw();
       announce();
     });
-    draw();
   }
 }
 
-const START_OVER = "Start over? Your changes in this browser are deleted, and the page goes back to how its owner saved it.";
+// A visitor's settings gear, not the Claygoo: a page's own clay-menu-icon still replaces it.
+const GEAR = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" aria-hidden="true"><path d="M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6M10 3h4l1.5 3 3.5-.5 2 4-2 2.5 2 2.5-2 4-3.5-.5-1.5 3h-4l-1.5-3-3.5.5-2-4 2-2.5-2-2.5 2-4 3.5.5Z"/></svg>';
+
+// The page's history: a Document's own editor, else hyper-undo. Read at use time, as the owner menu does.
+const historySource = () => window.clay?.blockeditor?.history ?? window.clay?.undo ?? null;
+
+function attachUndo({ addItem, beforeOpen }) {
+  let history = null;
+  const draw = () => {
+    const live = historySource();
+    if (!live) return;
+    const state = history ?? { canUndo: !!live.canUndo, canRedo: !!live.canRedo };
+    addItem({
+      id: "clay.undo",
+      pair: [
+        { id: "clay.undo.undo", label: "Undo", keys: keys("⌘Z", "Ctrl+Z"), disabled: !state.canUndo, run: () => historySource()?.undo() },
+        { id: "clay.undo.redo", label: "Redo", keys: keys("⌘⇧Z", "Ctrl+Shift+Z"), disabled: !state.canRedo, run: () => historySource()?.redo() },
+      ],
+    });
+  };
+  document.addEventListener("clay:undo-change", (event) => {
+    history = { canUndo: !!event.detail?.canUndo, canRedo: !!event.detail?.canRedo };
+    draw();
+  });
+  draw();
+  // The undo plugin can arrive after the menu and says nothing until the first edit, so the
+  // pair is drawn again each time the menu opens.
+  beforeOpen.push(draw);
+}
 
-function startOver() {
-  return import("../../ui/dialogs.js")
-    .then((m) => m.consent(START_OVER))
-    .then(() => window.clay.visitorDrafts.reset(), () => false);
+// Hyperclay's copy page for this document, like the download: it asks a signed-out visitor to sign in.
+function copyUrl(loc = window.location) {
+  const path = loc.pathname.replace(/\/+$/, "") || "/";
+  return `/_/copy${path === "/" ? "" : path}`;
 }
 
+// A visitor's menu holds exactly Undo, Redo, Download copy and Make your own copy (David, Nov 11):
+// no theme row, no page items, no Start over.
 export function start() {
   if (document.querySelector('clay-editor-ui[data-clay-ui="menu"]')) return;
-  const shell = createShell({ sections: [null] });
-  const { slot, embedded, skin, addItem, removeItem, open, close, note, goo } = shell;
+  const shell = createShell({ sections: [["clay.undo"], null], icon: GEAR, label: "Settings" });
+  const { embedded, skin, addItem, removeItem, open, close, note, goo, beforeOpen } = shell;
   shell.mount(embedded ? [MENU_SAFETY, SHELL_BASE, skin ?? MENU_SKIN, MENU_TOUCH] : [MENU_SAFETY, SHELL_BASE, SHELL_FLOATING, MENU_SKIN, MENU_TOUCH]);
-  attachLooks({ addItem, removeItem, slot });
-  addItem({ id: "clay.download", label: "Download a copy", run: () => window.clay.visitorDrafts.download() });
-  addItem({ id: "clay.start-over", label: "Start over", run: startOver });
-  attachDomItems(shell);
+  publishLooks();
+  attachUndo({ addItem, beforeOpen });
+  addItem({ id: "clay.download", label: "Download copy", run: () => window.clay.visitorDrafts.download() });
+  addItem({ id: "clay.copy", label: "Make your own copy", href: copyUrl() });
   window.clay.menu = { addItem, removeItem, open, close, note, embedded, button: goo };
   document.dispatchEvent(new CustomEvent("clay:menu-ready"));
 }

package/src/plugins/menu.js

@@ -26,11 +26,12 @@ const GRIP =
 // An item may also ask for the first or the last section with `section: "start" | "end"`.
 const SECTIONS = [
   ["clay.undo", "clay.cms", "clay.ai", "clay.code"],
-  ["seo", "clay.variants.keep", "clay.share", "clay.people"],
+  ["seo", "clay.share", "clay.people"],
   ["clay.duplicate", "clay.download", "clay.export", "clay.reveal"],
   ["clay.versions"],
   null,
-  ["clay.mode", "upgrade"],
+  ["clay.mode"],
+  ["upgrade"],
 ];
 
 // clay.mode is the live answer; the imported mode is the one the page booted with.

package/src/plugins/page-view.js

@@ -1,4 +1,4 @@
-// The reader half of plugins=page. A Document opened in view mode follows saved
+// The reader half of plugins=blockeditor. A Document opened in view mode follows saved
 // files through the receive-only saved transport (sync/saved-stream.js): the reader
 // opens that transport itself and mounts the article's tools from what the host
 // served before the stream says anything, so a host that cannot stream (static,
@@ -30,7 +30,7 @@ export let ready = null;
 // not `ready`, for the file.
 export let acquired = null;
 
-const oneArticle = () => document.querySelectorAll("article[data-page]").length === 1;
+const oneArticle = () => document.querySelectorAll("article[data-blockeditor]").length === 1;
 
 // The reader reports what it applied on `clay:reader-status`; the first file is the
 // first applied one, and a blocked or recoverable first read settles with null while