@panphora/clayjs 1.22.0 → 1.23.0

package/src/plugins/menu/variants.js

@@ -5,8 +5,10 @@
 // only. Keep deletes every other look, after which the page is an ordinary one-look
 // document. A choice and Keep are undo entries and saves, like the SEO panel's Done.
 import { modeRefusalText } from "../../core/mode-refusal.js";
+import { OFF, labelOf, looks, nameOf, paintLook, recordLook } from "./looks.js";
+
+export { looks };
 
-const OFF = "not all";
 const RECEIPT = "variants-choose";
 const KEEP_ID = "clay.variants.keep";
 const CHOOSE_LABEL = "Change the page look";
@@ -19,10 +21,13 @@ const NEXT =
   '<svg viewBox="0 0 6 10" aria-hidden="true" focusable="false"><rect width="2" height="2"/><rect x="2" y="2" width="2" height="2"/>' +
   '<rect x="4" y="4" width="2" height="2"/><rect x="2" y="6" width="2" height="2"/><rect y="8" width="2" height="2"/></svg>';
 
-export const looks = () => [...document.querySelectorAll("head style[clay-variant]")];
-const nameOf = (style) => style.getAttribute("clay-variant");
 const names = () => looks().map(nameOf);
 
+const labelFor = (name) => {
+  const style = looks().find((candidate) => nameOf(candidate) === name);
+  return style ? labelOf(style) : `Variant ${name}`;
+};
+
 // The first block without media="not all" is the saved choice. A merge or a hand edit
 // can leave none or several; this tab paints the first one either way, and the next
 // choice writes a clean state.
@@ -52,17 +57,20 @@ async function afterBaseline() {
 }
 
 function joinNames(list) {
-  const named = list.map((name) => `Variant ${name}`);
+  const named = list.map(labelFor);
   return named.length < 2 ? named.join("") : `${named.slice(0, -1).join(", ")} and ${named[named.length - 1]}`;
 }
 
 export function attachVariants({ root, capsule, addItem, removeItem, note, currentMode }) {
+  paintLook();
+
   let previewing = null;
   let pending = null;
   let copy = null;
   let pill = null;
   let drawn = null;
 
+  const wantsRow = Boolean(document.querySelector("[clay-menu-slot]")?.hasAttribute("clay-menu-looks"));
   const isEdit = () => currentMode() === "edit";
   const shown = () => previewing ?? savedName();
   const storage = () => window.clay && window.clay.storage && window.clay.storage.session;
@@ -102,6 +110,7 @@ export function attachVariants({ root, capsule, addItem, removeItem, note, curre
     if (!names().includes(name)) return { ok: false, code: "unknown-variant" };
     pending = previewing = null;
     writeHead(CHOOSE_LABEL, () => {
+      recordLook(name);
       for (const style of looks()) {
         if (nameOf(style) === name) style.removeAttribute("media");
         else if (style.getAttribute("media") !== OFF) style.setAttribute("media", OFF);
@@ -121,6 +130,9 @@ export function attachVariants({ root, capsule, addItem, removeItem, note, curre
   function keepNow(name) {
     pending = previewing = null;
     writeHead(KEEP_LABEL, () => {
+      // The kept block becomes an ordinary stylesheet, so `look` is what still names the
+      // theme: an upgrade brings the blocks back and paints this one from it.
+      recordLook(name);
       for (const style of looks()) {
         if (nameOf(style) === name) {
           style.removeAttribute("clay-variant");
@@ -139,7 +151,7 @@ export function attachVariants({ root, capsule, addItem, removeItem, note, curre
     const name = savedName();
     const others = names().filter((other) => other !== name);
     if (!others.length) return Promise.resolve({ ok: false, code: "unknown-variant" });
-    const text = `Keep Variant ${name} and delete ${joinNames(others)}? The switcher goes away. Version history still has them.`;
+    const text = `Keep ${labelFor(name)} and delete ${joinNames(others)}? The switcher goes away. Version history still has them.`;
     return import("../../ui/dialogs.js")
       .then((m) => m.consent(text))
       .then(
@@ -220,20 +232,46 @@ export function attachVariants({ root, capsule, addItem, removeItem, note, curre
     if (all.length < 2) {
       pill?.remove();
       pill = null;
+      removeItem("clay.look");
+      removeItem("clay.look.use");
       removeItem(KEEP_ID);
       return;
     }
+    if (root.hasAttribute("data-embedded")) {
+      const name = shown();
+      if (wantsRow) {
+        addItem({
+          id: "clay.look",
+          section: "start",
+          stepper: {
+            label: "Switch look",
+            value: `${labelFor(name)} ${all.indexOf(name) + 1}/${all.length}`,
+            prev: () => step(-1),
+            next: () => step(1),
+            prevLabel: "Previous look",
+            nextLabel: "Next look",
+          },
+        });
+      } else {
+        removeItem("clay.look");
+      }
+      if (!isEdit() && previewing !== null) addItem({ id: "clay.look.use", section: "start", label: "Use this look", run: useShown });
+      else removeItem("clay.look.use");
+      if (isEdit()) addItem({ id: KEEP_ID, label: `Keep ${labelFor(savedName())}, remove the others…`, run: () => keep() });
+      else removeItem(KEEP_ID);
+      return;
+    }
     if (!pill) pill = buildPill();
     if (!pill.isConnected) root.insertBefore(pill, root.querySelector(".clay-roster") ?? capsule);
     const name = shown();
     const label = pill.querySelector(".clay-variants-name");
-    label.textContent = `Variant ${name} `;
+    label.textContent = `${labelFor(name)} `;
     const count = document.createElement("small");
     count.textContent = `(${all.indexOf(name) + 1}/${all.length})`;
     label.append(count);
     pill.querySelector(".clay-variants-use").hidden = isEdit() || previewing === null;
     pill.querySelector(".clay-variants-keep").hidden = !isEdit();
-    if (isEdit()) addItem({ id: KEEP_ID, label: `Keep Variant ${savedName()}, remove the others…`, run: () => keep() });
+    if (isEdit()) addItem({ id: KEEP_ID, label: `Keep ${labelFor(savedName())}, remove the others…`, run: () => keep() });
     else removeItem(KEEP_ID);
   }
 
@@ -261,22 +299,30 @@ export function attachVariants({ root, capsule, addItem, removeItem, note, curre
     refresh();
   });
 
+  const followRecord = () => {
+    if (document.documentElement.hasAttribute("look") && names().length > 1) recordLook(savedName());
+  };
+
   // A merge can rebuild a look block, which clears its CSSOM flag, or bring a peer's
   // choice or Keep; painting again settles all three.
   document.addEventListener("clay:sync-applied", () => {
-    if (current()) refresh();
+    if (!current()) return;
+    followRecord();
+    refresh();
   });
 
   // An undo or redo of a choice or of Keep brings the blocks back or moves the saved one.
   // Every other entry leaves the looks alone, so only a change redraws and announces.
   document.addEventListener("clay:undo-change", () => {
-    if (current() && state() !== drawn) refresh();
+    if (!current() || state() === drawn) return;
+    followRecord();
+    refresh();
   });
 
   api = window.clay.variants = {
     list: () => {
       const active = savedName();
-      return names().map((name) => ({ name, label: `Variant ${name}`, active: name === active }));
+      return names().map((name) => ({ name, label: labelFor(name), active: name === active }));
     },
     get active() {
       return savedName();

package/src/plugins/menu/visitor.js

@@ -0,0 +1,78 @@
+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";
+
+function attachLooks({ addItem, removeItem, slot }) {
+  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 };
+  };
+  if (looks().length >= 2) {
+    window.clay.variants = {
+      list: () => looks().map((style) => ({ name: nameOf(style), label: labelOf(style), active: style === activeLook() })),
+      get active() {
+        return activeLook() && nameOf(activeLook());
+      },
+      get shown() {
+        return activeLook() && nameOf(activeLook());
+      },
+      preview: choose,
+      choose,
+      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.";
+
+function startOver() {
+  return import("../../ui/dialogs.js")
+    .then((m) => m.consent(START_OVER))
+    .then(() => window.clay.visitorDrafts.reset(), () => false);
+}
+
+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;
+  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);
+  window.clay.menu = { addItem, removeItem, open, close, note, embedded, button: goo };
+  document.dispatchEvent(new CustomEvent("clay:menu-ready"));
+}

package/src/plugins/menu.js

@@ -3,21 +3,18 @@
 // file, a sync frame, the dirty check or undo.
 import { canEdit, isDraftMode, isEditMode, mode as startMode } from "../core/is-edit-mode.js";
 import onDomReady from "../lib/dom-ready.js";
-import CLAYGOO from "./menu/claygoo.svg.js";
 import { modeRefusalText } from "../core/mode-refusal.js";
 import { MENU_BASE, MENU_FLOATING, MENU_SKIN, MENU_TOUCH, 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 { attachDomItems } from "./menu/dom-items.js";
 import { followLook } from "../ui/page-colour.js";
-import { mountEditorUI } from "../ui/editor-ui.js";
+import { createShell, TRACK } from "./menu/shell.js";
+import { MENU_SAFETY } from "./menu/shell-style.js";
 
 const SEO_ITEM = true;
-const SKIN_VERSION = "1";
-const EDGE_GAP = 8;
-const DISMISS_ICON = '<svg viewBox="0 0 10 10" aria-hidden="true" focusable="false"><path d="M1 0 5 4l4-4 1 1-4 4 4 4-1 1-4-4-4 4-1-1 4-4-4-4z"/></svg>';
-const NOTE_MS = 6000;
 const INTRO_GAP = 12;
 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"/>' +
@@ -33,289 +30,46 @@ const SECTIONS = [
   ["clay.duplicate", "clay.download", "clay.export", "clay.reveal"],
   ["clay.versions"],
   null,
-  ["upgrade"],
+  ["clay.mode", "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;
 
-// The first [clay-menu-slot] on the page holds the menu. With none, it floats in a corner.
-function findSlot() {
-  const slots = document.querySelectorAll("[clay-menu-slot]");
-  if (slots.length > 1) console.warn("[clay] This page has more than one clay-menu-slot. The menu uses the first.");
-  return slots[0] || null;
-}
-
-// A skin the page wrote, in <style clay-menu-skin="1" media="not all">. The media keeps it
-// off the page itself. An unknown version means the default skin.
-function pageSkin() {
-  const style = document.querySelector("style[clay-menu-skin]");
-  if (!style) return null;
-  if (style.getAttribute("clay-menu-skin") !== SKIN_VERSION) {
-    console.warn(`[clay] This runtime reads clay-menu-skin="${SKIN_VERSION}". The menu keeps its default look.`);
-    return null;
-  }
-  return style.textContent;
-}
-
 function mount() {
   if (document.querySelector('clay-editor-ui[data-clay-ui="menu"]')) return;
 
-  const slot = findSlot();
-  const embedded = Boolean(slot);
-  const skin = embedded ? pageSkin() : null;
+  const shell = createShell({
+    sections: SECTIONS,
+    capsuleStart:
+      `<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" part="edit" role="switch" aria-checked="false">` +
+      TRACK +
+      `<span class="clay-menu-label">Edit</span>` +
+      `</button>` +
+      `<span class="clay-menu-divider" aria-hidden="true"></span>`,
+  });
+  const { root, goo, slot, embedded, skin, addItem, removeItem, open, close, note: showNote, beforeOpen, focusedEl, mount: mountShell } = shell;
   const hideSwitch = embedded && slot.hasAttribute("no-edit-switch");
-
-  const root = document.createElement("div");
-  root.className = "clay-menu-dock";
-  root.setAttribute("clay", "editor-ui");
-  root.setAttribute("part", "dock");
-  if (embedded) root.dataset.embedded = "";
-  root.dataset.corner = "top-right";
-  root.innerHTML =
-    `<div class="clay-menu" part="capsule" 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" part="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" part="button" aria-haspopup="menu" aria-expanded="false" aria-label="Clay menu">${CLAYGOO}</button>` +
-    `</div>` +
-    `<div class="clay-menu-list" part="list" role="menu" aria-label="Clay menu" hidden></div>` +
-    `<div class="clay-menu-note" part="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();
 
   if (embedded) {
     grip.hidden = true;
-    const icon = slot.querySelector("template[clay-menu-icon]");
-    if (icon) goo.replaceChildren(icon.content.cloneNode(true));
-    const name = slot.getAttribute("clay-menu-label");
-    if (name) {
-      goo.setAttribute("aria-label", name);
-      goo.title = name;
-      list.setAttribute("aria-label", name);
-    }
     if (hideSwitch) {
       edit.hidden = true;
       root.querySelector(".clay-menu-divider").hidden = true;
     }
   }
 
-  // Embedded, the list opens in the top layer, so a header's overflow cannot clip it.
-  const topLayer = embedded && typeof list.showPopover === "function";
-  if (topLayer) list.setAttribute("popover", "manual");
-
-  function placeList() {
-    const anchor = goo.getBoundingClientRect();
-    const { offsetWidth: width, offsetHeight: height } = list;
-    const left = Math.max(EDGE_GAP, Math.min(anchor.right - width, window.innerWidth - width - EDGE_GAP));
-    const below = anchor.bottom + EDGE_GAP;
-    const top = below + height > window.innerHeight - EDGE_GAP ? Math.max(EDGE_GAP, anchor.top - height - EDGE_GAP) : below;
-    list.style.left = `${Math.round(left)}px`;
-    list.style.top = `${Math.round(top)}px`;
-  }
-
-  // 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) {
-    list.hidden = !open;
-    goo.setAttribute("aria-expanded", open ? "true" : "false");
-    if (!topLayer) return;
-    if (open) {
-      list.showPopover();
-      placeList();
-    } else if (list.matches(":popover-open")) {
-      list.hidePopover();
-    }
-  }
-
-  const buttons = () => [...list.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')];
-
-  function focusItem(index) {
-    const all = buttons();
-    if (!all.length) return;
-    all[(index + all.length) % all.length].focus();
-  }
-
-  function close() {
-    if (!isOpen()) return;
-    setExpanded(false);
-  }
-
   let actions = null;
   let people = null;
-
-  function open() {
-    if (isOpen()) return;
+  beforeOpen.push(() => {
     people?.close({ restore: false });
     actions?.refresh();
-    render();
-    setExpanded(true);
-  }
-
-  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.setAttribute("part", item.quiet ? "item quiet" : "item");
-    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;
-    }
-    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({ anchor: goo });
-    });
-    return button;
-  }
-
-  function itemNode(item) {
-    if (item.text) {
-      const line = document.createElement("p");
-      line.className = "clay-menu-version";
-      line.setAttribute("part", "text");
-      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;
-    }
-    if (item.dismiss) return dismissibleRow(item);
-    return itemButton(item);
-  }
-
-  function dismissibleRow(item) {
-    const row = document.createElement("div");
-    row.className = "clay-menu-row";
-    row.dataset.menuId = item.id;
-    const dismiss = document.createElement("button");
-    dismiss.type = "button";
-    dismiss.setAttribute("role", "menuitem");
-    dismiss.setAttribute("part", "dismiss");
-    dismiss.dataset.menuId = `${item.id}.dismiss`;
-    dismiss.setAttribute("aria-label", item.dismiss.label);
-    dismiss.title = item.dismiss.label;
-    dismiss.innerHTML = DISMISS_ICON;
-    dismiss.addEventListener("click", () => {
-      removeItem(item.id);
-      item.dismiss.run?.();
-    });
-    row.append(itemButton(item), dismiss);
-    return row;
-  }
-
-  function sections() {
-    const inSection = (name) => [...items.values()].filter((item) => item.section === name);
-    const extra = [...items.keys()].filter((id) => !SLOTTED.has(id) && !items.get(id).section);
-    const fixed = SECTIONS.map((ids) => (ids || extra).map((id) => items.get(id)).filter(Boolean));
-    return [inSection("start"), ...fixed, inSection("end")].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");
-        sep.setAttribute("part", "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 (focused) {
-      const again = buttons().find((button) => button.dataset.menuId === focused);
-      if (again) again.focus();
-      else focusItem(0);
-    }
-  }
-
-  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, section, quiet, dismiss } = {}) {
-    if (!id) return null;
-    const item = clean({ id, label, run, badge, keys, disabled, href });
-    if (text) item.text = true;
-    if (Array.isArray(pair)) item.pair = pair.map(clean);
-    if (section === "start" || section === "end") item.section = section;
-    if (quiet) item.quiet = true;
-    if (dismiss) item.dismiss = { label: String(dismiss.label || "Dismiss"), run: typeof dismiss.run === "function" ? dismiss.run : null };
-    items.set(id, item);
-    render();
-    return id;
-  }
-
-  function removeItem(id) {
-    if (items.delete(id)) render();
-  }
-
-  function showNote(text) {
-    if (!text) return;
-    noteEl.textContent = text;
-    noteEl.hidden = false;
-    clearTimeout(noteTimer);
-    noteTimer = setTimeout(() => {
-      noteEl.hidden = true;
-      noteEl.textContent = "";
-    }, NOTE_MS);
-  }
-
-  let noteTimer = 0;
   let busy = false;
 
   const applyHidden = () => {
@@ -324,7 +78,7 @@ function mount() {
 
   function setChecked() {
     edit.setAttribute("aria-checked", currentMode() === "edit" ? "true" : "false");
-    if (hideSwitch) addItem({ id: "clay.mode", label: currentMode() === "edit" ? "View mode" : "Edit mode", section: "start", run: () => edit.click() });
+    if (hideSwitch) addItem({ id: "clay.mode", label: "Edit mode", toggle: true, checked: currentMode() === "edit", run: () => edit.click() });
   }
   setChecked();
 
@@ -363,50 +117,6 @@ function mount() {
     }
   });
 
-  goo.addEventListener("click", () => {
-    if (isOpen()) close();
-    else open();
-  });
-
-  document.addEventListener("click", (event) => {
-    if (isOpen() && !event.composedPath().includes(root)) close();
-  });
-
-  root.addEventListener("keydown", (event) => {
-    if (event.key === "Escape") {
-      if (!isOpen()) return;
-      event.preventDefault();
-      close();
-      goo.focus();
-      return;
-    }
-    if (event.target === goo && (event.key === "Enter" || event.key === " ")) {
-      event.preventDefault();
-      if (isOpen()) close();
-      else {
-        open();
-        focusItem(0);
-      }
-      return;
-    }
-    if (!isOpen()) return;
-    if (event.key === "Enter" && list.contains(event.target)) {
-      event.preventDefault();
-      event.target.click();
-      return;
-    }
-    const all = buttons();
-    if (!all.length) return;
-    const at = all.indexOf(focusedEl());
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      focusItem(at < 0 ? 0 : at + 1);
-    } else if (event.key === "ArrowUp") {
-      event.preventDefault();
-      focusItem(at < 0 ? all.length - 1 : at - 1);
-    }
-  });
-
   // The intro sits at the top right in normal flow, so the group moves below its
   // bottom edge while it is on the page, and back when it goes.
   const doc = document;
@@ -457,12 +167,9 @@ function mount() {
       `:root { --clay-menu-width: ${Math.ceil(rect.width)}px; --clay-menu-height: ${Math.ceil(rect.height)}px; }`;
   }
 
-  const css = embedded ? [MENU_BASE, skin ?? MENU_SKIN, MENU_TOUCH] : [MENU_BASE, MENU_FLOATING, MENU_SKIN, MENU_TOUCH];
-  const ui = mountEditorUI({ name: "menu", content: root, css, parent: slot || document.body, attributes: { "clay-mode-toggle": "" } });
-  if (embedded) {
-    window.addEventListener("resize", close);
-    window.addEventListener("scroll", () => { if (topLayer && isOpen()) placeList(); }, { capture: true, passive: true });
-  } else {
+  const css = embedded ? [MENU_SAFETY, MENU_BASE, skin ?? MENU_SKIN, MENU_TOUCH] : [MENU_SAFETY, MENU_BASE, MENU_FLOATING, MENU_SKIN, MENU_TOUCH];
+  const ui = mountShell(css);
+  if (!embedded) {
     attachPlacement({
       dock: root,
       container: ui.shadow,
@@ -487,6 +194,7 @@ function mount() {
   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 });
+  attachDomItems({ addItem, removeItem, beforeOpen });
 
   if (SEO_ITEM) {
     addItem({

package/src/plugins/visitor-drafts/inert.js

@@ -27,6 +27,7 @@ export function inertVisitorDrafts() {
     editOriginal,
     backToDraft,
     downloadUrl: () => DOWNLOAD_URL,
+    download: () => Promise.resolve(false),
     source: null,
   };
 }

package/src/plugins/visitor-drafts/intro-style.js

@@ -21,4 +21,10 @@ export const CLOSE_CSS = `:host { color: inherit !important; }
 .clay-intro__close:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
 .clay-intro__close svg { display: block; width: 12px; height: 12px; fill: currentColor; stroke: none; }
 @media (pointer: coarse) { .clay-intro__close { width: 44px; height: 44px; top: 4px; right: 4px; } }
+.clay-intro__close[data-manual] {
+  width: auto; height: 36px; padding: 0 14px;
+  border-radius: 999px; font-size: 12px; font-weight: 500;
+  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
+}
+@media (pointer: coarse), (max-width: 680px) { .clay-intro__close[data-manual] { height: 44px; } }
 `;