@panphora/clayjs 1.17.0 → 1.18.1

package/src/plugins/menu.js

@@ -5,186 +5,67 @@ import { canEdit, isDraftMode, isEditMode, mode as startMode } from "../core/is-
 import onDomReady from "../lib/dom-ready.js";
 import CLAYGOO from "./menu/claygoo.svg.js";
 import { modeRefusalText } from "../core/mode-refusal.js";
+import MENU_CSS, { MENU_SURFACE } from "./menu/style.js";
+import { attachPlacement } from "./menu/placement.js";
+import { attachActions } from "./menu/actions.js";
+import { attachPeople } from "./menu/people.js";
+import { attachVariants } from "./menu/variants.js";
+import { followLook } from "../ui/page-colour.js";
+import { mountEditorUI } from "../ui/editor-ui.js";
 
 const SEO_ITEM = true;
 const NOTE_MS = 6000;
 const INTRO_GAP = 12;
-
-const MENU_CSS = `.clay-menu {
-  position: fixed;
-  top: max(12px, env(safe-area-inset-top));
-  right: max(12px, env(safe-area-inset-right));
-  z-index: 2147482000;
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 8px;
-  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-  font-size: 13px;
-  line-height: 1;
-  color: var(--clay-ui-fg, #1F2328);
-}
-.clay-menu-edit {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  color: inherit;
-  background: none;
-  cursor: pointer;
-}
-.clay-menu-edit:disabled { cursor: progress; opacity: .7; }
-.clay-menu-track {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  width: 52px;
-  height: 32px;
-  border: 1px solid rgba(23, 28, 36, .16);
-  border-radius: 999px;
-  background: var(--clay-ui-bg, #F4F4F5);
-  transition: background-color .15s ease, border-color .15s ease;
-}
-.clay-menu-thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  background: #FAFAFB;
-  box-shadow: 0 1px 2px rgba(23, 28, 36, .35);
-  transition: transform .15s ease;
-}
-.clay-menu-edit[aria-checked="true"] .clay-menu-track {
-  border-color: transparent;
-  background: var(--clay-ui-accent, #2F6FEB);
-}
-.clay-menu-edit[aria-checked="true"] .clay-menu-thumb { transform: translateX(20px); }
-.clay-menu-label { font-size: 13px; line-height: 1; }
-.clay-menu-goo {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: 32px;
-  height: 32px;
-  margin: 0;
-  padding: 0;
-  border: 1px solid rgba(23, 28, 36, .16);
-  border-radius: 50%;
-  color: inherit;
-  background: var(--clay-ui-bg, #F4F4F5);
-  cursor: pointer;
-}
-.clay-menu-goo svg { display: block; width: 18px; height: auto; }
-.clay-menu-dot {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--clay-ui-accent, #2F6FEB);
-}
-.clay-menu-list {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  min-width: 184px;
-  margin: 0;
-  padding: 4px;
-  border: 1px solid rgba(23, 28, 36, .16);
-  border-radius: 10px;
-  background: var(--clay-ui-bg, #F4F4F5);
-  box-shadow: 0 10px 28px -14px rgba(23, 28, 36, .5);
-}
-.clay-menu-list button {
-  display: block;
-  width: 100%;
-  padding: 8px 10px;
-  border: 0;
-  border-radius: 6px;
-  font: inherit;
-  text-align: left;
-  color: inherit;
-  background: none;
-  cursor: pointer;
-}
-.clay-menu-list button:hover,
-.clay-menu-list button:focus-visible { outline: none; background: rgba(23, 28, 36, .08); }
-.clay-menu-note {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  max-width: 260px;
-  padding: 8px 10px;
-  border: 1px solid rgba(23, 28, 36, .16);
-  border-radius: 8px;
-  line-height: 1.4;
-  text-align: left;
-  background: var(--clay-ui-bg, #F4F4F5);
-  box-shadow: 0 10px 28px -14px rgba(23, 28, 36, .5);
-}
-@media (pointer: coarse) {
-  .clay-menu-edit { min-height: 44px; padding: 6px 0; }
-  .clay-menu-goo { width: 44px; height: 44px; }
-}
-@media (prefers-color-scheme: dark) {
-  .clay-menu { color: var(--clay-ui-fg, #E9E9EC); }
-  .clay-menu-track,
-  .clay-menu-goo,
-  .clay-menu-list,
-  .clay-menu-note { border-color: rgba(233, 233, 236, .16); background: var(--clay-ui-bg, #26282C); }
-  .clay-menu-track { background: rgba(233, 233, 236, .22); }
-  .clay-menu-thumb { background: #E9E9EC; }
-  .clay-menu-list button:hover,
-  .clay-menu-list button:focus-visible { background: rgba(233, 233, 236, .12); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .clay-menu-track, .clay-menu-thumb { transition: none; }
-}`;
+const GRIP =
+  '<svg viewBox="0 0 6 12" aria-hidden="true" focusable="false"><rect width="2" height="2"/><rect x="4" width="2" height="2"/>' +
+  '<rect y="5" width="2" height="2"/><rect x="4" y="5" width="2" height="2"/><rect y="10" width="2" height="2"/><rect x="4" y="10" width="2" height="2"/></svg>';
+
+// Built-in items keep fixed slots, so the order never depends on which plugin
+// registered first. Any other id goes in its own section above the footer, in the
+// order it was added.
+const SECTIONS = [
+  ["clay.undo", "clay.cms", "clay.ai", "clay.code"],
+  ["seo", "clay.variants.keep", "clay.share", "clay.people"],
+  ["clay.duplicate", "clay.download", "clay.export", "clay.reveal"],
+  ["clay.versions"],
+  null,
+  ["upgrade"],
+];
+const SLOTTED = new Set(SECTIONS.flat().filter(Boolean));
 
 // clay.mode is the live answer; the imported mode is the one the page booted with.
 const currentMode = () =>
   window.clay && typeof window.clay.mode === "string" ? window.clay.mode : startMode;
 
-function stylesOnce() {
-  if (document.getElementById("clay-menu-style")) return;
-  const style = document.createElement("style");
-  style.id = "clay-menu-style";
-  style.setAttribute("clay", "editor-ui");
-  style.textContent = MENU_CSS;
-  document.head.append(style);
-}
-
 function mount() {
-  if (document.querySelector(".clay-menu")) return;
-  stylesOnce();
+  if (document.querySelector('clay-editor-ui[data-clay-ui="menu"]')) return;
 
   const root = document.createElement("div");
-  root.className = "clay-menu";
+  root.className = "clay-menu-dock";
   root.setAttribute("clay", "editor-ui");
-  root.setAttribute("clay-mode-toggle", "");
+  root.dataset.corner = "top-right";
   root.innerHTML =
+    `<div class="clay-menu" clay="editor-ui">` +
+    `<button type="button" class="clay-menu-grip" aria-label="Move the menu. Drag it, or use the arrow keys to move it to another corner.">${GRIP}</button>` +
     `<button type="button" class="clay-menu-edit" role="switch" aria-checked="false">` +
     `<span class="clay-menu-track" aria-hidden="true"><span class="clay-menu-thumb"></span></span>` +
     `<span class="clay-menu-label">Edit</span>` +
     `</button>` +
+    `<span class="clay-menu-divider" aria-hidden="true"></span>` +
     `<button type="button" class="clay-menu-goo" aria-haspopup="menu" aria-expanded="false" aria-label="Clay menu">${CLAYGOO}</button>` +
-    `<div class="clay-menu-list" role="menu" hidden></div>` +
+    `</div>` +
+    `<div class="clay-menu-list" role="menu" aria-label="Clay menu" hidden></div>` +
     `<div class="clay-menu-note" role="status" hidden></div>`;
 
+  const grip = root.querySelector(".clay-menu-grip");
   const edit = root.querySelector(".clay-menu-edit");
   const goo = root.querySelector(".clay-menu-goo");
   const list = root.querySelector(".clay-menu-list");
   const noteEl = root.querySelector(".clay-menu-note");
   const items = new Map();
 
+  // Focus inside the shadow root: document.activeElement only ever names the host.
+  const focusedEl = () => root.getRootNode().activeElement || null;
   const isOpen = () => !list.hidden;
 
   function setExpanded(open) {
@@ -192,7 +73,7 @@ function mount() {
     goo.setAttribute("aria-expanded", open ? "true" : "false");
   }
 
-  const buttons = () => [...list.querySelectorAll('[role="menuitem"]')];
+  const buttons = () => [...list.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')];
 
   function focusItem(index) {
     const all = buttons();
@@ -201,52 +82,132 @@ function mount() {
   }
 
   function close() {
-    if (isOpen()) setExpanded(false);
+    if (!isOpen()) return;
+    setExpanded(false);
   }
 
+  let actions = null;
+  let people = null;
+
   function open() {
-    if (!isOpen()) setExpanded(true);
+    if (isOpen()) return;
+    people?.close({ restore: false });
+    actions?.refresh();
+    render();
+    setExpanded(true);
   }
 
-  function render() {
-    const hadFocus = list.contains(document.activeElement);
-    list.textContent = "";
-    for (const item of items.values()) {
-      const button = document.createElement("button");
+  function itemButton(item) {
+    const link = item.href && !item.disabled;
+    const button = document.createElement(link ? "a" : "button");
+    if (link) {
+      button.href = item.href;
+      button.target = "_blank";
+      button.rel = "noopener";
+    } else {
       button.type = "button";
-      button.setAttribute("role", "menuitem");
-      button.dataset.menuId = item.id;
+    }
+    button.setAttribute("role", "menuitem");
+    button.dataset.menuId = item.id;
+    if (item.badge && item.id === "upgrade") {
+      const label = document.createElement("span");
+      label.className = "clay-menu-upgrade";
+      label.textContent = item.label;
+      button.append(label);
+    } else {
       button.textContent = item.label;
-      button.addEventListener("click", () => {
-        close();
-        if (item.run) item.run();
-      });
-      list.append(button);
     }
+    if (item.keys) {
+      const kbd = document.createElement("kbd");
+      kbd.textContent = item.keys;
+      button.append(kbd);
+    }
+    if (item.disabled) button.setAttribute("aria-disabled", "true");
+    button.addEventListener("click", () => {
+      if (item.disabled) return;
+      close();
+      if (item.run) item.run();
+    });
+    return button;
+  }
+
+  function itemNode(item) {
+    if (item.text) {
+      const line = document.createElement("p");
+      line.className = "clay-menu-version";
+      line.dataset.menuId = item.id;
+      line.textContent = item.label;
+      return line;
+    }
+    if (item.pair) {
+      const pair = document.createElement("div");
+      pair.className = "clay-menu-pair";
+      pair.dataset.menuId = item.id;
+      for (const part of item.pair) pair.append(itemButton(part));
+      return pair;
+    }
+    return itemButton(item);
+  }
+
+  function sections() {
+    const extra = [...items.keys()].filter((id) => !SLOTTED.has(id));
+    return SECTIONS.map((ids) => (ids || extra).map((id) => items.get(id)).filter(Boolean)).filter((group) => group.length);
+  }
+
+  function render() {
+    const now = focusedEl();
+    const focused = now && list.contains(now) ? now.dataset.menuId : null;
+    list.textContent = "";
+    sections().forEach((group, index) => {
+      if (index) {
+        const sep = document.createElement("div");
+        sep.className = "clay-menu-sep";
+        sep.setAttribute("role", "separator");
+        list.append(sep);
+      }
+      for (const item of group) list.append(itemNode(item));
+    });
     const dot = goo.querySelector(".clay-menu-dot");
     const wanted = [...items.values()].some((item) => item.badge);
     if (wanted && !dot) {
       const mark = document.createElement("span");
       mark.className = "clay-menu-dot";
+      mark.setAttribute("aria-hidden", "true");
       goo.append(mark);
     } else if (!wanted && dot) {
       dot.remove();
     }
-    if (hadFocus) focusItem(0);
+    if (focused) {
+      const again = buttons().find((button) => button.dataset.menuId === focused);
+      if (again) again.focus();
+      else focusItem(0);
+    }
   }
 
-  function addItem({ id, label, run, badge } = {}) {
+  const clean = ({ id, label, run, badge, keys, disabled, href }) => ({
+    id,
+    href: typeof href === "string" ? href : "",
+    label: String(label ?? ""),
+    run: typeof run === "function" ? run : null,
+    badge: Boolean(badge),
+    keys: keys ? String(keys) : "",
+    disabled: Boolean(disabled),
+  });
+
+  function addItem({ id, label, run, badge, keys, disabled, text, pair, href } = {}) {
     if (!id) return null;
-    items.set(id, {
-      id,
-      label: String(label ?? ""),
-      run: typeof run === "function" ? run : null,
-      badge: Boolean(badge),
-    });
+    const item = clean({ id, label, run, badge, keys, disabled, href });
+    if (text) item.text = true;
+    if (Array.isArray(pair)) item.pair = pair.map(clean);
+    items.set(id, item);
     render();
     return id;
   }
 
+  function removeItem(id) {
+    if (items.delete(id)) render();
+  }
+
   function showNote(text) {
     if (!text) return;
     noteEl.textContent = text;
@@ -261,6 +222,10 @@ function mount() {
   let noteTimer = 0;
   let busy = false;
 
+  const applyHidden = () => {
+    root.hidden = !canEdit && currentMode() !== "edit";
+  };
+
   function setChecked() {
     edit.setAttribute("aria-checked", currentMode() === "edit" ? "true" : "false");
   }
@@ -274,6 +239,8 @@ function mount() {
   edit.addEventListener("click", async () => {
     if (busy) return;
     const previous = edit.getAttribute("aria-checked");
+    // Disabling the focused switch drops focus to the body; it goes back once the switch is done.
+    const hadFocus = focusedEl() === edit;
     const next = currentMode() === "edit" ? "view" : "edit";
     busy = true;
     edit.setAttribute("aria-busy", "true");
@@ -289,6 +256,7 @@ function mount() {
     busy = false;
     edit.removeAttribute("aria-busy");
     edit.disabled = false;
+    if (hadFocus && edit.isConnected && !focusedEl() && document.activeElement === document.body) edit.focus();
     if (result && result.ok === false) {
       edit.setAttribute("aria-checked", previous);
       const text = modeRefusalText(result);
@@ -304,7 +272,7 @@ function mount() {
   });
 
   document.addEventListener("click", (event) => {
-    if (isOpen() && !root.contains(event.target)) close();
+    if (isOpen() && !event.composedPath().includes(root)) close();
   });
 
   root.addEventListener("keydown", (event) => {
@@ -332,7 +300,7 @@ function mount() {
     }
     const all = buttons();
     if (!all.length) return;
-    const at = all.indexOf(document.activeElement);
+    const at = all.indexOf(focusedEl());
     if (event.key === "ArrowDown") {
       event.preventDefault();
       focusItem(at < 0 ? 0 : at + 1);
@@ -349,9 +317,18 @@ function mount() {
   let watched = null;
 
   function place(intro) {
-    root.style.top = `${Math.round(intro.getBoundingClientRect().bottom) + INTRO_GAP}px`;
+    if (root.dataset.corner.startsWith("top")) {
+      root.style.top = `${Math.round(intro.getBoundingClientRect().bottom) + INTRO_GAP}px`;
+    } else {
+      root.style.removeProperty("top");
+    }
   }
 
+  const replace = () => {
+    if (watched) place(watched);
+    else root.style.removeProperty("top");
+  };
+
   function watchIntro() {
     if (!root.isConnected) return;
     const intro = doc.querySelector(".clay-intro");
@@ -383,14 +360,30 @@ function mount() {
       `:root { --clay-menu-width: ${Math.ceil(rect.width)}px; --clay-menu-height: ${Math.ceil(rect.height)}px; }`;
   }
 
-  document.body.append(root);
+  const ui = mountEditorUI({ name: "menu", content: root, css: [MENU_CSS], attributes: { "clay-mode-toggle": "" } });
+  attachPlacement({
+    dock: root,
+    container: ui.shadow,
+    grip,
+    storage: window.clay.storage && window.clay.storage.local,
+    onMove: replace,
+    onDragStart: () => {
+      close();
+      people?.close({ restore: false });
+    },
+  });
   reserveSpace();
   if (typeof ResizeObserver === "function") new ResizeObserver(reserveSpace).observe(root);
 
   new MutationObserver(watchIntro).observe(doc.body, { childList: true });
   watchIntro();
+  followLook(root, root.querySelector(".clay-menu"), MENU_SURFACE);
 
-  const openSeo = () => import("./menu/seo.js").then((m) => m.open());
+  const openSeo = () => import("./menu/seo.js").then((m) => m.open({ returnFocus: goo }));
+
+  actions = attachActions({ addItem, note: showNote, currentMode });
+  people = attachPeople({ root, capsule: root.querySelector(".clay-menu"), addItem, removeItem, closeMenu: close, note: showNote });
+  attachVariants({ root, capsule: root.querySelector(".clay-menu"), addItem, removeItem, note: showNote, currentMode });
 
   if (SEO_ITEM) {
     addItem({
@@ -406,10 +399,17 @@ function mount() {
     }
   }
 
-  window.clay.menu = { addItem, open, close };
+  // A view-mode owner's hint can be stale: the host's own answer decides, and a page the
+  // host will not let this caller save hides the menu rather than offer a refused switch.
+  followCapability = applyHidden;
+  if (currentMode() !== "edit") import("../core/host-permission.js").then((m) => m.checkHostPermission()).catch(() => {});
+
+  window.clay.menu = { addItem, removeItem, open, close, note: showNote };
+  document.dispatchEvent(new CustomEvent("clay:menu-ready"));
 }
 
 let mounted = false;
+let followCapability = null;
 
 const shouldMount = () => (canEdit || isEditMode) && !isDraftMode;
 
@@ -421,5 +421,8 @@ function mountOnce() {
 
 if (!isDraftMode) {
   onDomReady(mountOnce);
-  document.addEventListener("clay:capabilitychange", mountOnce);
+  document.addEventListener("clay:capabilitychange", () => {
+    mountOnce();
+    followCapability?.();
+  });
 }

package/src/plugins/page-view.js

@@ -34,13 +34,14 @@ const oneArticle = () => document.querySelectorAll("article[data-page]").length
 
 // 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
-// the stream stays open for the next file.
+// the stream stays open for the next file. So does a stream that cannot open: a switch
+// asked before any file arrives reloads instead of waiting out its deadline.
 function listen() {
   onStatus = (event) => {
     if (cancelled) return;
     const status = event.detail;
     if (status?.state === "applied") settle?.(reader);
-    else if (status?.state === "blocked" || status?.state === "recoverable") settle?.(null);
+    else if (status?.state === "blocked" || status?.state === "recoverable" || status?.state === "reconnecting") settle?.(null);
   };
   document.addEventListener("clay:reader-status", onStatus);
 }