@panphora/clayjs 1.23.0 → 1.24.1

package/src/plugins/live.js

@@ -12,7 +12,7 @@ import { capturePageState, onSnapshot } from "../core/snapshot.js";
 import { onSaveAccepted, onSaveAttempt, onSaveOutcome, isSaveInProgress, saveFateIsUnknown, exitSave } from "../core/save-core.js";
 import { savePageForce, baselineSettled, isSaveConflicted, autosaveIsSuspended } from "../core/save.js";
 import { withKeepalive } from "../core/save-core.js";
-import { isEditMode } from "../core/is-edit-mode.js";
+import { isEditMode, isDraftMode } from "../core/is-edit-mode.js";
 import { registerUnsavedState } from "../lib/unsaved-state.js";
 import { createCheckpoints } from "../live/checkpoint.js";
 import { parseJsonRelaxed } from "../vendor/hyper-morph-json.vendor.js";
@@ -687,10 +687,12 @@ function endDomPin(maybeLanded, ownerId = null) {
 
 // A capture that sent nothing is definitely unsent. Otherwise only a 4xx proves
 // the host wrote nothing, and only when no attempt timed out. A lost answer, a
-// timeout, a 5xx or a historical duplicate may have landed.
+// timeout, a 5xx or a historical duplicate may have landed. A refusal from this
+// browser's draft store wrote nothing anywhere.
 function mayHaveLanded(result, sent) {
+  if (result?.code === "draft-storage" || result?.code === "draft-not-ready") return false;
   const code = result?.code;
-  const precommit = code === "page-converting" || code === "page-capacity";
+  const precommit = code === "blockeditor-converting" || code === "blockeditor-capacity";
   return code === "save-already-applied" || result?.hadTimeout === true ||
     (sent !== false && !precommit && !(result?.status >= 400 && result?.status < 500));
 }
@@ -765,6 +767,12 @@ function ensureLane() {
   laneGates();
   if (laneRequested || !(writerSession ? writerSession.admitted || writerSession.wantsLane : isEditMode)) return;
   laneRequested = true;
+  // A visitor's draft opens no lane: its tabs share the draft record, not a room.
+  if (isDraftMode) {
+    settleLane?.(null);
+    settleWriter?.(null);
+    return;
+  }
   const request = ++laneRequest;
   hostMeta.hostSupports("live-data").then(
     async (supported) => {
@@ -786,7 +794,7 @@ function ensureLane() {
         // never shares the lane a tab that cannot read it is on. The room scope
         // puts this tab's sequencer in the host-mode room, which a tab of the lane
         // before it never joins.
-        local = lane.localTransport({ seed: seedLocalRoom, rooms: true, floor: document.querySelector('meta[name="clay-page-format"]')?.getAttribute("content") });
+        local = lane.localTransport({ seed: seedLocalRoom, rooms: true, floor: document.querySelector('meta[name="clay-blockeditor-format"]')?.getAttribute("content") });
         fast = lane.createFastLane(laneOptions(local));
       } else {
         settleLane?.(null);
@@ -853,7 +861,7 @@ function parseHtml(html) {
 function textOf(entry) {
   const fastMode = entry.store.handle.status.mode === "fast";
   const current = fastMode ? entry.store.authoritative : entry.store.value;
-  const value = fastMode && /^page(\.[0-9]+)?$/.test(entry.store.name) ? captureYValue(current) : current;
+  const value = fastMode && /^blockeditor(\.[0-9]+)?$/.test(entry.store.name) ? captureYValue(current) : current;
   if (entry.layout === "lines") return serializeLines(value);
   return entry.layout === "pretty" ? JSON.stringify(value, null, 2).replace(/</g, "\\u003c") : serializeLive(value);
 }
@@ -903,12 +911,12 @@ function openEntry(name, store, { layout = "line", leftAt = null, staged = null
     if (event.code === "receipt-expired") document.dispatchEvent(new CustomEvent("clay:live-notice", {
       detail: { name, code: event.code, ops: event.ops, message: "The room retired an update receipt. Check the saved value before restoring this update." },
     }));
-    if (event.phase === "refused" && event.code === "too-large" && !/^page(\.[0-9]+)?$/.test(name)) document.dispatchEvent(new CustomEvent("clay:live-notice", {
+    if (event.phase === "refused" && event.code === "too-large" && !/^blockeditor(\.[0-9]+)?$/.test(name)) document.dispatchEvent(new CustomEvent("clay:live-notice", {
       detail: { name, code: "op-too-large", message: "That change was too large to share, so it was undone." },
     }));
     // The room was opened from a document with no store of this name, so the
     // page it holds is not the one this tab is editing.
-    if (event.phase === "left" && event.code === "no-store" && /^page(\.[0-9]+)?$/.test(name)) document.dispatchEvent(new CustomEvent("clay:live-notice", {
+    if (event.phase === "left" && event.code === "no-store" && /^blockeditor(\.[0-9]+)?$/.test(name)) document.dispatchEvent(new CustomEvent("clay:live-notice", {
       detail: { name, code: "unknown-store", message: `The room has no "${name}" store, so the page it holds is not the one this tab is editing.` },
     }));
   });
@@ -1003,7 +1011,7 @@ onSnapshot((clone, { forSave, requestRefresh }) => {
     // A staged store reaches the file here, where the boot would have put its tag, and
     // so does one that started that way, on every save after its first.
     if (!tag && (entry.staged || entry.tagless)) {
-      const article = clone.querySelector("article[data-page]");
+      const article = clone.querySelector("article[data-blockeditor]");
       if (!article) continue;
       const element = article.ownerDocument.createElement("script");
       element.setAttribute("type", "application/json");
@@ -1124,7 +1132,7 @@ for (const type of ["clay:save-error", "clay:save-offline"]) {
   document.addEventListener(type, (event) => {
     const status = event.detail?.status;
     const code = event.detail?.code;
-    const precommit = code === "page-converting" || code === "page-capacity";
+    const precommit = code === "blockeditor-converting" || code === "blockeditor-capacity";
     endDomPin(code === "save-already-applied" || event.detail?.hadTimeout === true ||
       (event.detail?.sent !== false && !precommit && !(status >= 400 && status < 500)), event.detail?.captureId);
   });
@@ -1233,7 +1241,7 @@ onSaveOutcome(({ captureId, result, attempts, sent }) => {
   if (!pin) return;
   const stagedEntry = [...pin.keys()].map((name) => entries.get(name)).find((entry) => entry?.staged);
   // Nothing was written: the staged store is clean and nothing follows.
-  if (stagedEntry && result.code === "page-nothing-to-write") {
+  if (stagedEntry && result.code === "blockeditor-nothing-to-write") {
     stagedEntry.store.confirm(stagedEntry.store.mark);
     dropCapture(captureId);
     releaseBody();
@@ -1241,7 +1249,7 @@ onSaveOutcome(({ captureId, result, attempts, sent }) => {
     return;
   }
   // This tab's value does not descend from the stored document: never send it again.
-  if (stagedEntry && result.code === "page-lineage-stale") stagedEntry.staged.conflict = "conflict";
+  if (stagedEntry && result.code === "blockeditor-lineage-stale") stagedEntry.staged.conflict = "conflict";
   dropCapture(captureId);
   const landed = mayHaveLanded(result, sent);
   const plan = landed ? historyPlan(captureId) : null;
@@ -1277,7 +1285,7 @@ function offerCheckpoint(captureId, html) {
   const state = capturePageState(captureId);
   if (!state) return;
   let article = null;
-  try { article = parseHtml(html).querySelector("article[data-page]")?.innerHTML ?? null; }
+  try { article = parseHtml(html).querySelector("article[data-blockeditor]")?.innerHTML ?? null; }
   catch (_) { article = null; }
   const etag = lastSeenEtag();
   Promise.resolve()
@@ -1491,7 +1499,7 @@ export async function requestExitCheckpoint({ name, needsSave, permit, deadline,
     const result = await withKeepalive(keepalive, () => save(permit));
     if (over()) return failed("timeout");
     if (!result?.ok) return failed(result?.code ?? "checkpoint-failed");
-    return needsSave() ? failed("page-not-checkpointed") : { ok: true };
+    return needsSave() ? failed("blockeditor-not-checkpointed") : { ok: true };
   }
 }
 

package/src/plugins/menu/actions.js

@@ -1,11 +1,14 @@
-// The menu's editing items: Undo and Redo, Ask AI, and Download a copy. Each one calls
-// the service that already does the job and keeps no second copy of its state.
+// The menu's editing items: Undo and Redo, Ask AI to improve this page, and Download a
+// copy. Each one calls the service that already does the job and keeps no second copy
+// of its state.
 import { modeRefusalText } from "../../core/mode-refusal.js";
 import { downloadHtml, documentName } from "../../core/download.js";
 import { keys, revealLabel } from "./preferences.js";
+import { hostMeta } from "../../core/host-meta.js";
 
 const RESUME_KEY = "menu-resume";
 const READY_MS = 5000;
+const PAGE_READY_MS = 8000;
 
 const clay = () => window.clay || {};
 const session = () => clay().storage && clay().storage.session;
@@ -28,8 +31,31 @@ function whenPresent(get, ms = READY_MS) {
   });
 }
 
+// A reload entry runs before the page session it reloaded into has finished preparing,
+// so the surface it needs is not there yet. Waiting here is bounded: a page that never
+// gets one ends at the same unavailable message a missing helper does.
+function waitForPageAi(ms = PAGE_READY_MS) {
+  const page = clay().blockeditor;
+  if (!page) return Promise.resolve(true);
+  const start = Date.now();
+  return new Promise((resolve) => {
+    let done = false;
+    const finish = (ok) => { if (!done) { done = true; clearTimeout(timer); resolve(ok); } };
+    const tick = () => {
+      if (done) return;
+      if (clay().blockeditor?.ai) return finish(true);
+      if (Date.now() - start >= ms) return finish(false);
+      setTimeout(tick, 50);
+    };
+    const timer = setTimeout(() => finish(false), ms);
+    Promise.resolve(page.ready).catch(() => null).then(tick, tick);
+  });
+}
+
 export function attachActions({ addItem, note, currentMode }) {
   const resumers = new Map();
+  // A receipt for an item that registers later, once its host has answered.
+  let pendingReceipt = null;
 
   // Runs `run` in edit mode, entering it first when the page is in view. A reload entry
   // leaves a one-shot receipt in session storage so the action runs once the page is
@@ -56,15 +82,24 @@ export function attachActions({ addItem, note, currentMode }) {
 
   function resumable(action, run) {
     resumers.set(action, run);
+    if (pendingReceipt === action) {
+      pendingReceipt = null;
+      if (currentMode() === "edit") run();
+    }
     return () => inEditMode(action, run);
   }
 
   let history = { canUndo: false, canRedo: false };
   let heard = false;
 
+  // A Document keeps its history in its own editor, so the pair reads the page's service
+  // there and hyper-undo everywhere else. Reading it at use time means an editor that
+  // closed after the item was drawn takes the press with it.
+  const historySource = () => (pageWants("blockeditor") && clay().blockeditor?.history ? clay().blockeditor.history : pageWants("undo") ? clay().undo : null);
+
   function renderUndo() {
-    if (!pageWants("undo")) return;
-    const live = currentMode() === "edit" && clay().undo;
+    if (!pageWants("blockeditor") && !pageWants("undo")) return;
+    const live = currentMode() === "edit" && historySource();
     // The menu loads late, so edits made before it are read from the service itself.
     if (!heard && live && typeof live.canUndo === "boolean") history = { canUndo: live.canUndo, canRedo: !!live.canRedo };
     addItem({
@@ -75,14 +110,14 @@ export function attachActions({ addItem, note, currentMode }) {
           label: "Undo",
           keys: keys("⌘Z", "Ctrl+Z"),
           disabled: !(live && history.canUndo),
-          run: () => clay().undo?.undo(),
+          run: () => historySource()?.undo(),
         },
         {
           id: "clay.undo.redo",
           label: "Redo",
           keys: keys("⌘⇧Z", "Ctrl+Shift+Z"),
           disabled: !(live && history.canRedo),
-          run: () => clay().undo?.redo(),
+          run: () => historySource()?.redo(),
         },
       ],
     });
@@ -97,17 +132,39 @@ export function attachActions({ addItem, note, currentMode }) {
   document.addEventListener("clay:modechange", renderUndo);
   renderUndo();
 
+  // Only a host that lists an ai-edit helper, ready or turned off, gets the item: on
+  // hyperclay.com someone with an edit link who is not listed would otherwise see an
+  // item that can only say it is unavailable. In view mode the plugin is not loaded
+  // yet, so there is nobody to ask and the item waits for the click, as it always has.
   if (pageWants("ai-edit")) {
-    addItem({
-      id: "clay.ai",
-      label: "Ask AI…",
-      keys: keys("⌘J", "Ctrl+J"),
-      run: resumable("ai", async () => {
-        const ai = await whenPresent(() => clay().aiEdit);
-        const opened = ai ? await ai.open(document.body) : false;
-        if (!opened) note("Ask AI isn't available on this page right now.");
-      }),
-    });
+    (async () => {
+      // ai-edit loads late, after the editor is ready, so it can attach after this menu.
+      // Ask for it where it lands, as the item's own run does, rather than where the
+      // menu boots: the item is drawn once there is a plugin to say what the host lists.
+      const loaded = clay().aiEdit || (currentMode() === "edit" ? await whenPresent(() => clay().aiEdit) : null);
+      if (loaded?.available) {
+        if (!(await loaded.available())) return;
+      } else if (!loaded && pageWants("blockeditor")) {
+        // In view mode a Block document has no plugin to ask, so the host's own
+        // discovery says whether an ai-edit helper exists at all.
+        const meta = await hostMeta();
+        const listed = Array.isArray(meta.document?.helpers) && meta.document.helpers.some(
+          (helper) => helper && helper.name === "ai-edit" && (helper.state === "ready" || helper.state === "unavailable"),
+        );
+        if (!listed) return;
+      }
+      addItem({
+        id: "clay.ai",
+        label: "Ask AI to improve this page",
+        keys: keys("⌘J", "Ctrl+J"),
+        run: resumable("ai", async () => {
+          const ai = await whenPresent(() => clay().aiEdit);
+          const ready = ai && (pageWants("blockeditor") || !!clay().blockeditor) ? await waitForPageAi() : !!ai;
+          const opened = ready ? await ai.pick() : false;
+          if (!opened) note("Ask AI isn't available on this page right now.");
+        }),
+      });
+    })();
   }
 
   if (pageWants("cms") && clay().cms?.hasRules?.(document)) {
@@ -127,6 +184,18 @@ export function attachActions({ addItem, note, currentMode }) {
     });
   }
 
+  // The Yjs page store (`blockeditor`, and its split parts `blockeditor.1`, `blockeditor.2`, …) holds upload paths
+  // inside base64 updates, where no text rewrite reaches them. A copy that leaves this host
+  // leaves those tags out, as Hyperclay's own download does: the article names every upload
+  // in full, and the editor that opens the copy seeds the page from it.
+  const PAGE_STORE_TAG = /<script\b[^>]*>[\s\S]*?<\/script>\n?/gi;
+  const isPageStoreTag = (tag) => {
+    const open = tag.slice(0, tag.indexOf(">") + 1);
+    return /\bmerge="blockeditor(?:\.\d+)?"/.test(open) && /\bclay="[^"]*\blive\b/.test(open);
+  };
+  const withoutPageStore = (html) =>
+    /<article\b[^>]*\bdata-blockeditor\b/.test(html) ? html.replace(PAGE_STORE_TAG, (tag) => (isPageStoreTag(tag) ? "" : tag)) : html;
+
   // The copy is what a save would send now, unsaved edits included. A reader has no
   // unsaved edits, so the saved file is the same document.
   addItem({
@@ -142,8 +211,10 @@ export function attachActions({ addItem, note, currentMode }) {
           if (response.ok) html = await response.text();
         }
       } catch {}
-      // Upload paths only resolve on this host, so the copy names them in full.
+      // A copy that leaves this host keeps nothing that only resolves on it: the page store
+      // goes, and upload paths are named in full. A file: copy has no host to leave.
       if (typeof html === "string" && /^https?:$/.test(location.protocol)) {
+        html = withoutPageStore(html);
         html = html.replace(/(^|[^\w./:-])\/_\/uploads\//g, `$1${location.origin}/_/uploads/`);
       }
       if (typeof html !== "string" || !(await downloadHtml({ html, name: `${documentName()}.html` }))) {
@@ -190,6 +261,7 @@ export function attachActions({ addItem, note, currentMode }) {
     storage.remove(RESUME_KEY);
     const run = resumers.get(pending);
     if (run && currentMode() === "edit") run();
+    else if (!run) pendingReceipt = pending;
   }
 
   return { inEditMode, resumable, refresh: renderUndo };

package/src/plugins/menu/seo.js

@@ -5,6 +5,7 @@
 import { applyHead, FIELDS, readHead } from "./seo-head.js";
 import { lookAt } from "../../ui/page-colour.js";
 import MENU_CSS, { MENU_SURFACE } from "./style.js";
+import { pageSkin } from "./shell.js";
 import { mountEditorUI } from "../../ui/editor-ui.js";
 import { deepActiveElement } from "../../dom/active-element.js";
 import { hostMeta } from "../../core/host-meta.js";
@@ -60,7 +61,7 @@ const SHEET_CSS = `.clay-seo { box-sizing: border-box; width: 100%; border-botto
 .clay-seo-count[data-over] { color: var(--bevel-ox); }
 .clay-seo-derived { padding: 0; border: 0; background: none; color: var(--bevel-brass); font: 500 12px/1.3 var(--bevel-font-sans); text-decoration: underline; text-decoration-color: var(--bevel-line-3); text-underline-offset: 2px; cursor: pointer; }
 .clay-seo-input { box-sizing: border-box; width: 100%; min-height: 32px; padding: 6px 9px; border: 1px solid var(--bevel-line-2); background: var(--bevel-ground); color: var(--bevel-ink); font: 400 13px/1.45 var(--bevel-font-sans); }
-textarea.clay-seo-input { min-height: 52px; resize: vertical; }
+textarea.clay-seo-input { min-height: 52px; resize: none; overflow: hidden; }
 textarea.clay-seo-input.is-short { min-height: 32px; }
 .clay-seo-input::placeholder { color: var(--bevel-faint); opacity: 1; }
 .clay-seo-input:hover { border-color: var(--bevel-faint); }
@@ -115,6 +116,9 @@ textarea.clay-seo-input.is-short { min-height: 32px; }
 @media (pointer: coarse), (max-width: 680px) { .clay-seo .clay-menu-btn { min-height: 40px; } .clay-seo :is(input, textarea, select) { font-size: 16px; } }
 @media (prefers-reduced-motion: reduce) { .clay-seo { animation: none; transition: none; } }`;
 
+// Fields on a skinned sheet sit on the page's own surface.
+const SKINNED_SHEET = `.clay-seo[part~="dock"] { --bevel-ground: var(--bevel-surface); }`;
+
 const text = (value) => (value == null ? "" : String(value));
 
 function element(tag, className, content) {
@@ -176,7 +180,7 @@ function pageBase() {
 }
 
 function isDocumentPage() {
-  return document.querySelectorAll("article[data-page]").length === 1;
+  return document.querySelectorAll("article[data-blockeditor]").length === 1;
 }
 
 const ATOM = "\uFFFC";
@@ -199,7 +203,7 @@ function titleItems(view) {
     }
     return [];
   }
-  const article = document.querySelector("article[data-page]");
+  const article = document.querySelector("article[data-blockeditor]");
   const heading = article && [...article.children].find((node) => node.tagName === "H1");
   if (!heading) return [];
   let c = "";
@@ -217,7 +221,7 @@ function titleItems(view) {
 // The same rule the runtime and the checkpoint use: the first root H1, and Untitled
 // when it is empty or missing.
 function firstHeadingText() {
-  const view = window.clay && window.clay.page && window.clay.page.view;
+  const view = window.clay && window.clay.blockeditor && window.clay.blockeditor.view;
   return documentTitle(titleItems(view));
 }
 
@@ -471,11 +475,25 @@ export function open({ returnFocus } = {}) {
     }
   }
 
+  // A description box is as tall as its text, or its placeholder while empty: no inner scroll
+  // (David, Nov 11).
+  function fitBoxes() {
+    for (const box of inputs.values()) {
+      if (box.localName !== "textarea" || !box.isConnected) continue;
+      const stand = !box.value && box.placeholder;
+      if (stand) box.value = box.placeholder;
+      box.style.height = "auto";
+      box.style.height = `${box.scrollHeight + box.offsetHeight - box.clientHeight}px`;
+      if (stand) box.value = "";
+    }
+  }
+
   function refresh() {
     const titleValue = text(readField("title")).trim();
     const descriptionValue = text(readField("description")).trim();
     inputs.get("ogTitle").placeholder = titleValue;
     inputs.get("ogDescription").placeholder = descriptionValue;
+    fitBoxes();
 
     for (const [key, entry] of counters) {
       const length = text(readField(key)).trim().length;
@@ -753,11 +771,19 @@ export function open({ returnFocus } = {}) {
   });
 
   document.addEventListener("clay:modechange", followMode);
+  // A page that skins its menu dresses this sheet the same way: its dock rule maps the page's own
+  // colours and fonts onto the sheet's tokens, so each look gets its own sheet.
+  const skin = pageSkin();
+  if (skin) root.setAttribute("part", "dock");
   lookAt(root, { x: 0, y: 0, width: innerWidth, height: Math.min(200, innerHeight) }, MENU_SURFACE);
-  ui = mountEditorUI({ name: "seo", content: root, css: [MENU_CSS, SHEET_CSS], before: document.body.firstChild });
+  if (skin) root.style.removeProperty("--bevel-surface");
+  ui = mountEditorUI({ name: "seo", content: root, css: skin ? [MENU_CSS, SHEET_CSS, skin, SKINNED_SHEET] : [MENU_CSS, SHEET_CSS], before: document.body.firstChild });
   writeHeight();
   if (typeof ResizeObserver === "function") {
-    heightObserver = new ResizeObserver(writeHeight);
+    heightObserver = new ResizeObserver(() => {
+      fitBoxes();
+      writeHeight();
+    });
     heightObserver.observe(root);
   }
   refresh();

package/src/plugins/menu/shell-style.js

@@ -2,7 +2,8 @@ export const MENU_SAFETY = `@layer clay-menu-safety {
   .clay-menu-dock [hidden], .clay-menu-spots[hidden], .clay-menu-dock[hidden] { display: none !important; }
   .clay-menu :focus-visible:not(.clay-menu-edit) { outline: 2px solid var(--bevel-brass) !important; outline-offset: -2px !important; }
   @media (pointer: coarse), (max-width: 680px) {
-    .clay-menu-goo, .clay-menu-list [part~="dismiss"], .clay-menu-list [part~="step"], .clay-menu-list [role^="menuitem"] { min-width: 44px !important; min-height: 44px !important; }
+    /* A dismissible row's message and Dismiss sit inline on one line; their reach comes from MENU_TOUCH's pseudo-elements. */
+    .clay-menu-goo, .clay-menu-list [part~="step"], .clay-menu-list [role^="menuitem"]:not(.clay-menu-row > *) { min-width: 44px !important; min-height: 44px !important; }
   }
   @media (prefers-reduced-motion: reduce) {
     .clay-menu-dock *, .clay-menu-dock *::before, .clay-menu-dock *::after { transition: none !important; animation: none !important; }
@@ -78,13 +79,20 @@ export const SHELL_C = `/* Popovers: the menu, the people panel, the status note
 .clay-menu-list [role^="menuitem"] { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; border: 0; background: none; text-align: left; text-decoration: none; cursor: pointer; }
 .clay-menu-list [role^="menuitem"]:hover:not([aria-disabled="true"]), .clay-menu-list [role^="menuitem"]:focus-visible { outline: none; background: var(--bevel-sunk); }
 .clay-menu-list [role^="menuitem"][aria-disabled="true"] { cursor: default; }
-.clay-menu-pair { display: flex; gap: 12px; padding: 3px 9px; }
+.clay-menu-pair { display: flex; flex-wrap: wrap; gap: 12px; padding: 3px 9px; }
 .clay-menu-list .clay-menu-pair [role="menuitem"] { flex: none; width: auto; justify-content: flex-start; gap: 9px; }
 .clay-menu-list kbd { flex: none; white-space: nowrap; }
-.clay-menu-row { display: flex; align-items: center; gap: 2px; }
-.clay-menu-list .clay-menu-row > [part~="item"] { flex: 1; width: auto; min-width: 0; }
-.clay-menu-list .clay-menu-row > [part~="dismiss"] { flex: none; width: 28px; justify-content: center; padding: 0; }
-.clay-menu-row > [part~="dismiss"] svg { display: block; width: 10px; height: 10px; fill: currentColor; }
+/* The message, then a small Dismiss right after its last word (David, Nov 11). Both are inline, so
+   Dismiss follows the text wherever it wraps; the message reaches over the whole row, and Dismiss
+   sits above it with its own reach. */
+.clay-menu-row { position: relative; padding: 5px 9px; }
+.clay-menu-row:has(> [part~="item"]:hover, > [part~="item"]:focus-visible) { background: var(--bevel-sunk); }
+.clay-menu-list .clay-menu-row > [part~="item"], .clay-menu-list .clay-menu-row > [part~="item"]:is(:hover, :focus-visible) { display: inline; width: auto; padding: 0; background: none; }
+.clay-menu-list .clay-menu-row > [part~="item"]::before { content: ""; position: absolute; inset: 0; }
+.clay-menu-list .clay-menu-row > [part~="dismiss"], .clay-menu-list .clay-menu-row > [part~="dismiss"]:is(:hover, :focus-visible) { position: relative; z-index: 1; display: inline; width: auto; min-height: 0; margin-left: 6px; padding: 0; background: none; white-space: nowrap; }
+.clay-menu-list .clay-menu-row > [part~="dismiss"]::after { content: ""; position: absolute; inset: -6px -6px; }
+.clay-menu-row [part~="dismiss-label"] { display: inline-block; padding: 2px 7px; border-radius: 4px; background: var(--bevel-sunk); color: var(--bevel-ink-2); font: 500 11px/1.3 var(--bevel-font-sans); }
+.clay-menu-row > [part~="dismiss"]:hover [part~="dismiss-label"], .clay-menu-row > [part~="dismiss"]:focus-visible [part~="dismiss-label"] { color: var(--bevel-ink); }
 .clay-menu-upgrade { display: inline-flex; align-items: center; gap: 8px; }
 .clay-menu-upgrade::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bevel-brass); }
 .clay-menu-toggle .clay-menu-track { flex: none; }
@@ -125,12 +133,23 @@ export const MENU_SKIN = `.clay-menu { height: 34px; padding: 0 4px 0 2px; borde
 .clay-menu-list kbd { font: 500 11px/1 var(--bevel-font-mono); padding: 3px 5px; border: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); color: var(--bevel-muted); }
 .clay-menu-list [part~="quiet"] { font-size: 12px; color: var(--bevel-muted); }
 .clay-menu-sep { height: 1px; margin: 4px 2px; background: var(--bevel-line); }
-.clay-menu-version { font: 400 11.5px/1.4 var(--bevel-font-mono); color: var(--bevel-muted); }
+.clay-menu-version { font: 400 13px/1.35 var(--bevel-font-sans); color: var(--bevel-ink); }
 `;
 
 // Last, so no skin can shrink a touch target or bring motion back.
 export const MENU_TOUCH = `@media (pointer: coarse), (max-width: 680px) {
+  /* A phone menu fits the screen and never scrolls sideways: a little wider than on a desktop, long
+     labels wrap, and the shortcut keys a phone cannot press are hidden (David, Nov 11). */
+  .clay-menu-list { min-width: min(300px, calc(100vw - 16px)) !important; max-width: calc(100vw - 16px) !important; overflow-x: hidden !important; }
+  .clay-menu-list [role^="menuitem"], .clay-menu-list .clay-menu-version { white-space: normal; overflow-wrap: anywhere; }
+  .clay-menu-list kbd { display: none !important; }
+  .clay-menu-list .clay-menu-row { box-sizing: border-box; min-height: 44px; padding: 11px 9px; }
+  /* Dismiss sits inline after the message's last word, so its reach never goes up or left into the
+     message's own text: a taller label plus reach to the right and down makes the 44px. */
+  .clay-menu-row [part~="dismiss-label"] { padding: 7px 12px; font-size: 13px; }
+  .clay-menu-list .clay-menu-row > [part~="dismiss"]::after { inset: -2px -10px -11px 0; }
   .clay-menu-list [role^="menuitem"] { min-height: 44px; font-size: 15px; }
+  .clay-menu-list .clay-menu-version { display: flex; align-items: center; min-height: 44px; font-size: 15px; }
   .clay-menu-list .clay-menu-pair [role="menuitem"] { min-height: 44px; }
   .clay-menu-list .clay-menu-stepper [role="menuitem"] { width: 44px; min-height: 44px; }
   :is(.clay-menu-dock, .clay-seo) :is(input, textarea, select) { font-size: 16px; }

package/src/plugins/menu/shell.js

@@ -3,7 +3,7 @@ import { mountEditorUI } from "../../ui/editor-ui.js";
 
 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 DISMISS_TEXT = "Dismiss";
 const ARROW_PREV = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true" focusable="false"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"/></svg>';
 const ARROW_NEXT = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true" focusable="false"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/></svg>';
 export const TRACK = '<span class="clay-menu-track" aria-hidden="true"><span class="clay-menu-thumb"></span></span>';
@@ -18,7 +18,7 @@ function findSlot() {
 
 // 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() {
+export function pageSkin() {
   const style = document.querySelector("style[clay-menu-skin]");
   if (!style) return null;
   if (style.getAttribute("clay-menu-skin") !== SKIN_VERSION) {
@@ -28,7 +28,8 @@ function pageSkin() {
   return style.textContent;
 }
 
-export function createShell({ capsuleStart = "", sections = [null] } = {}) {
+// `icon` and `label` draw the button (the Claygoo by default); a slot's own icon and label still win.
+export function createShell({ capsuleStart = "", sections = [null], icon = CLAYGOO, label = "Clay menu" } = {}) {
   const slotted = new Set(sections.flat().filter(Boolean));
   const slot = findSlot();
   const embedded = Boolean(slot);
@@ -43,9 +44,9 @@ export function createShell({ capsuleStart = "", sections = [null] } = {}) {
   root.innerHTML =
     `<div class="clay-menu" part="capsule" clay="editor-ui">` +
     capsuleStart +
-    `<button type="button" class="clay-menu-goo" part="button" aria-haspopup="menu" aria-expanded="false" aria-label="Clay menu">${CLAYGOO}</button>` +
+    `<button type="button" class="clay-menu-goo" part="button" aria-haspopup="menu" aria-expanded="false" aria-label="${label}">${icon}</button>` +
     `</div>` +
-    `<div class="clay-menu-list" part="list" role="menu" aria-label="Clay menu" hidden></div>` +
+    `<div class="clay-menu-list" part="list" role="menu" aria-label="${label}" hidden></div>` +
     `<div class="clay-menu-note" part="note" role="status" hidden></div>`;
 
   const goo = root.querySelector(".clay-menu-goo");
@@ -177,6 +178,8 @@ export function createShell({ capsuleStart = "", sections = [null] } = {}) {
     return itemButton(item);
   }
 
+  // The item, then a small Dismiss right after its last word. An x at the row's end read as the
+  // close for the whole menu. The item's own dismiss label stays as the button's title.
   function dismissibleRow(item) {
     const row = document.createElement("div");
     row.className = "clay-menu-row";
@@ -186,9 +189,11 @@ export function createShell({ capsuleStart = "", sections = [null] } = {}) {
     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;
+    const text = document.createElement("span");
+    text.setAttribute("part", "dismiss-label");
+    text.textContent = DISMISS_TEXT;
+    dismiss.append(text);
     dismiss.addEventListener("click", async () => {
       dismiss.disabled = true;
       let result;

package/src/plugins/menu/variants.js

@@ -10,7 +10,6 @@ import { OFF, labelOf, looks, nameOf, paintLook, recordLook } from "./looks.js";
 export { looks };
 
 const RECEIPT = "variants-choose";
-const KEEP_ID = "clay.variants.keep";
 const CHOOSE_LABEL = "Change the page look";
 const KEEP_LABEL = "Keep one page look";
 
@@ -234,22 +233,23 @@ export function attachVariants({ root, capsule, addItem, removeItem, note, curre
       pill = null;
       removeItem("clay.look");
       removeItem("clay.look.use");
-      removeItem(KEEP_ID);
       return;
     }
     if (root.hasAttribute("data-embedded")) {
       const name = shown();
+      // "Theme: Dusk" and two arrows. While editing, each step is the choice and saves like any
+      // edit: no confirm, no Keep row (David, Nov 11).
       if (wantsRow) {
         addItem({
           id: "clay.look",
           section: "start",
           stepper: {
-            label: "Switch look",
-            value: `${labelFor(name)} ${all.indexOf(name) + 1}/${all.length}`,
+            label: "Theme:",
+            value: labelFor(name),
             prev: () => step(-1),
             next: () => step(1),
-            prevLabel: "Previous look",
-            nextLabel: "Next look",
+            prevLabel: "Previous theme",
+            nextLabel: "Next theme",
           },
         });
       } else {
@@ -257,8 +257,6 @@ export function attachVariants({ root, capsule, addItem, removeItem, note, curre
       }
       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();
@@ -271,8 +269,6 @@ export function attachVariants({ root, capsule, addItem, removeItem, note, curre
     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 ${labelFor(savedName())}, remove the others…`, run: () => keep() });
-    else removeItem(KEEP_ID);
   }
 
   function refresh() {