@panphora/clayjs 1.21.0 → 1.23.0

package/src/plugins/menu/style.js

@@ -1,60 +1,20 @@
 // The menu's look: Bevel tokens scoped to the menu family, solid surfaces, one soft
 // shadow, light or dark by the scheme ui/page-colour.js reads from the page behind it.
+import { SHELL_A, SHELL_B, SHELL_C, SHELL_FLOATING, MENU_SKIN, MENU_TOUCH } from "./shell-style.js";
+export { MENU_SKIN, MENU_TOUCH } from "./shell-style.js";
+
 // The surface and muted ink below, per scheme, for ui/page-colour.js's tint.
 export const MENU_SURFACE = { light: [0xFF, 0xFC, 0xF6], dark: [0x1A, 0x1D, 0x2C], mutedLight: [0x6B, 0x59, 0x42], mutedDark: [0xA3, 0xA9, 0xC2] };
 
 // The parts of the look a page may replace, through <style clay-menu-skin="1">. Everything
-// else below stays: layout, hidden, focus rings, touch targets and reduced motion.
-export const MENU_BASE = `.clay-menu-dock, .clay-menu-spots, .clay-seo {
-  --bevel-font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
-  --bevel-font-serif: Newsreader, Georgia, "Times New Roman", serif;
-  --bevel-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --bevel-ground: light-dark(#FDF8F0, #0B0C13);
-  --bevel-surface: light-dark(#FFFCF6, #1A1D2C);
-  --bevel-sunk: light-dark(#F4ECDF, #22263A);
-  --bevel-ink: light-dark(#2B241B, #ECEAF2);
-  --bevel-ink-2: light-dark(#4A4033, #C9CDE0);
-  --bevel-muted: light-dark(#6B5942, #A3A9C2);
-  --bevel-faint: light-dark(#9A8A70, #6A7090);
-  --bevel-line: light-dark(#E8DCC6, #2C3149);
-  --bevel-line-2: light-dark(#D8C8AF, #3A4058);
-  --bevel-line-3: light-dark(#C4B192, #4A536F);
-  --bevel-brass: light-dark(#8F6310, #D9A445);
-  --bevel-brass-soft: light-dark(#F0E4CC, #3A2F17);
-  --bevel-ox: light-dark(#A83A2C, #FF6B79);
-  --bevel-ox-soft: light-dark(#F6DED6, #3A2226);
-  --bevel-teal: light-dark(#256056, #4E9C8C);
-  --bevel-teal-soft: light-dark(#DCEBE7, #17332E);
-  --bevel-face: light-dark(#F1E7D4, #2A2F48);
-  --bevel-edge-hi: light-dark(#FFF9ED, #454C6C);
-  --bevel-edge-lo: light-dark(#D6C3A5, #171B2C);
-  --bevel-face-in: light-dark(#E3D0B3, #20253B);
-  --bevel-edge-in: light-dark(#B89F7B, #12152A);
-  --bevel-edge-in-hi: light-dark(#F0E1C9, #4D587A);
-  --bevel-knob: light-dark(#FCF8F1, #5A6286);
-  --bevel-knob-hi: light-dark(#FFF9ED, #7A83A8);
-  --clay-shadow: 0 1px 2px light-dark(rgb(43 36 27 / .07), rgb(0 0 0 / .35)), 0 10px 28px -10px light-dark(rgb(43 36 27 / .32), rgb(0 0 0 / .7));
-  --clay-sheet-shadow: 0 16px 30px -22px light-dark(rgb(43 36 27 / .45), rgb(0 0 0 / .85));
-  color-scheme: inherit;
-  font-family: var(--bevel-font-sans);
-  color: var(--bevel-ink);
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-}
-
-.clay-menu-dock { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; }
-.clay-menu-dock[data-embedded] { position: relative; display: inline-flex; }
-.clay-menu-dock[hidden], .clay-menu-spots[hidden], .clay-menu-dock [hidden], .clay-seo [hidden] { display: none !important; }
-
-.clay-menu { box-sizing: border-box; display: inline-flex; align-items: center; gap: 2px; user-select: none; -webkit-user-select: none; }
-
-.clay-menu-edit { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 28px; margin: 0; padding: 0 8px 0 5px; border: 0; background: none; font: 500 13px/1 var(--bevel-font-sans); color: var(--bevel-ink); cursor: pointer; }
+// else stays: layout, hidden, focus rings, touch targets and reduced motion.
+const OWNER_1 = `.clay-menu-edit { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 28px; margin: 0; padding: 0 8px 0 5px; border: 0; background: none; font: 500 13px/1 var(--bevel-font-sans); color: var(--bevel-ink); cursor: pointer; }
 .clay-menu-edit::before { content: ""; position: absolute; inset: -8px 0; }
 .clay-menu-track { position: relative; display: block; box-sizing: border-box; width: 36px; height: 20px; border: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); transition: background-color .14s, border-color .14s; }
 .clay-menu-thumb { position: absolute; top: 2px; left: 2px; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid; border-color: var(--bevel-knob-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-knob-hi); background: var(--bevel-knob); transition: translate .15s cubic-bezier(.4, 0, .2, 1); }
-.clay-menu-edit:hover .clay-menu-track { border-color: var(--bevel-faint); }
-.clay-menu-edit[aria-checked="true"] .clay-menu-track { background: #256056; border-color: light-dark(#256056, #3C7E72); }
-.clay-menu-edit[aria-checked="true"] .clay-menu-thumb { translate: 16px 0; background: light-dark(var(--bevel-knob), #8EDCC5); border-color: light-dark(var(--bevel-knob-hi), #C2F0E2) light-dark(var(--bevel-edge-lo), #4F9C86) light-dark(var(--bevel-edge-lo), #4F9C86) light-dark(var(--bevel-knob-hi), #C2F0E2); }
+:is(.clay-menu-edit, .clay-menu-toggle):hover .clay-menu-track { border-color: var(--bevel-faint); }
+:is(.clay-menu-edit, .clay-menu-toggle)[aria-checked="true"] .clay-menu-track { background: #256056; border-color: light-dark(#256056, #3C7E72); }
+:is(.clay-menu-edit, .clay-menu-toggle)[aria-checked="true"] .clay-menu-thumb { translate: 16px 0; background: light-dark(var(--bevel-knob), #8EDCC5); border-color: light-dark(var(--bevel-knob-hi), #C2F0E2) light-dark(var(--bevel-edge-lo), #4F9C86) light-dark(var(--bevel-edge-lo), #4F9C86) light-dark(var(--bevel-knob-hi), #C2F0E2); }
 .clay-menu-edit[aria-busy="true"] { cursor: progress; color: var(--bevel-muted); }
 .clay-menu-edit[aria-busy="true"] .clay-menu-track { background: var(--bevel-line); border-color: var(--bevel-line-2); }
 .clay-menu-edit[aria-busy="true"] .clay-menu-thumb { translate: 8px 0; opacity: .7; }
@@ -62,15 +22,9 @@ export const MENU_BASE = `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 
 .clay-menu-divider { width: 1px; height: 18px; margin: 0 2px; background: var(--bevel-line-2); }
 
-.clay-menu-goo { position: relative; display: inline-grid; place-items: center; box-sizing: border-box; margin: 0; padding: 0; cursor: pointer; }
-.clay-menu-goo svg { display: block; }
-.clay-menu-dot { position: absolute; top: -1px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--bevel-brass); box-shadow: 0 0 0 2px var(--bevel-surface); }
-
-.clay-menu :focus-visible, .clay-roster:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
-.clay-menu-edit:focus-visible { outline: none; }
-.clay-menu-edit:focus-visible .clay-menu-track { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
+`;
 
-/* The roster, beside the capsule, only on a page that opts in. Flat, like the capsule. */
+const OWNER_2 = `/* The roster, beside the capsule, only on a page that opts in. Flat, like the capsule. */
 .clay-roster { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 34px; margin: 0; padding: 0 10px 0 5px; border: 1px solid var(--bevel-line-3); background: var(--bevel-surface); box-shadow: var(--clay-shadow); font: 400 12px/1 var(--bevel-font-mono); color: var(--bevel-muted); cursor: pointer; }
 .clay-roster:hover, .clay-roster[aria-expanded="true"] { background: var(--bevel-sunk); }
 .clay-roster-faces { display: inline-flex; }
@@ -87,29 +41,9 @@ export const MENU_BASE = `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 .clay-avatar[data-tone="brass"] { background: var(--bevel-brass-soft); color: var(--bevel-brass); border-color: color-mix(in srgb, var(--bevel-brass) 35%, var(--bevel-brass-soft)); }
 .clay-avatar[data-tone="teal"] { background: var(--bevel-teal-soft); color: var(--bevel-teal); border-color: color-mix(in srgb, var(--bevel-teal) 35%, var(--bevel-teal-soft)); }
 
-/* Popovers: the menu, the people panel, the status note. Below the dock, above it in a bottom corner. */
-.clay-menu-list, .clay-people, .clay-menu-note { position: absolute; z-index: 1; top: calc(100% + 8px); right: 0; box-sizing: border-box; margin: 0; color: var(--bevel-ink); text-align: left; }
-.clay-people, .clay-menu-note { border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); box-shadow: var(--clay-shadow); }
-
-.clay-menu-list { width: max-content; max-width: calc(100vw - 24px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
-.clay-menu-list[popover] { position: fixed; inset: auto; margin: 0; }
-.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-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; }
-.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-version { margin: 0; }
-
-.clay-menu-note { z-index: 2; width: max-content; max-width: 264px; padding: 8px 12px; font-size: 13px; line-height: 1.45; }
+`;
 
-/* The people panel: no lines between people, one line between sections. */
+const OWNER_3 = `/* The people panel: no lines between people, one line between sections. */
 .clay-people { width: 300px; max-width: calc(100vw - 24px); padding: 0; }
 .clay-people-head { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--bevel-line); }
 .clay-people-title { flex: 1; margin: 0; font: 500 16px/1.2 var(--bevel-font-serif); }
@@ -143,13 +77,9 @@ export const MENU_BASE = `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 .clay-menu-btn-primary:hover { background: color-mix(in srgb, var(--bevel-ink), var(--bevel-ground) 12%); }
 `;
 
-export const MENU_FLOATING = `/* The dock: the roster (when a page opts in) and the capsule, fixed in one corner. */
-.clay-menu-dock { position: fixed; z-index: 2147482000; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
-.clay-menu-dock[data-corner$="left"] { right: auto; left: max(12px, env(safe-area-inset-left)); flex-direction: row-reverse; }
-.clay-menu-dock[data-corner^="bottom"] { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
-.clay-menu-dock[data-corner$="left"] :is(.clay-menu-list, .clay-people, .clay-menu-note) { right: auto; left: 0; }
-.clay-menu-dock[data-corner^="bottom"] :is(.clay-menu-list, .clay-people, .clay-menu-note) { top: auto; bottom: calc(100% + 8px); }
-.clay-menu-dock[data-dragging] .clay-menu { border-color: var(--bevel-brass); cursor: grabbing; }
+export const MENU_BASE = SHELL_A + OWNER_1 + SHELL_B + OWNER_2 + SHELL_C + OWNER_3;
+
+export const MENU_FLOATING = SHELL_FLOATING + `.clay-menu-dock[data-dragging] .clay-menu { border-color: var(--bevel-brass); cursor: grabbing; }
 .clay-menu-grip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 28px; margin: 0; padding: 0; border: 0; background: none; color: var(--bevel-faint); cursor: grab; touch-action: none; }
 .clay-menu-grip::before { content: ""; position: absolute; inset: -8px -2px -8px -10px; }
 .clay-menu-grip:hover { color: var(--bevel-ink-2); }
@@ -165,35 +95,4 @@ export const MENU_FLOATING = `/* The dock: the roster (when a page opts in) and
 .clay-menu-spot[data-near] { border: 2px solid var(--bevel-brass); background: var(--bevel-brass-soft); }
 `;
 
-export const MENU_SKIN = `.clay-menu { height: 34px; padding: 0 4px 0 2px; border: 1px solid var(--bevel-line-3); background: var(--bevel-surface); box-shadow: var(--clay-shadow); }
-.clay-menu-goo { width: 28px; height: 28px; min-height: 0; border-radius: 0; border: 2px solid transparent; background: none; color: var(--bevel-ink); }
-.clay-menu-goo::before { content: ""; position: absolute; inset: -8px -8px -8px -4px; }
-.clay-menu-goo svg { width: 18px; height: auto; fill: currentColor; }
-.clay-menu-goo:hover svg { translate: 0 -1px; }
-.clay-menu-goo:active, .clay-menu-goo[aria-expanded="true"] { background: var(--bevel-face-in); border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); }
-.clay-menu-goo:active svg, .clay-menu-goo[aria-expanded="true"] svg { translate: 1px 1px; }
-.clay-menu-list { min-width: 284px; padding: 6px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); box-shadow: var(--clay-shadow); }
-.clay-menu-list [role="menuitem"] { min-height: 32px; padding: 5px 9px; font: 400 13px/1.35 var(--bevel-font-sans); color: var(--bevel-ink); }
-.clay-menu-list [role="menuitem"][aria-disabled="true"] { color: var(--bevel-faint); }
-.clay-menu-list [role="menuitem"][aria-disabled="true"] kbd { opacity: .6; }
-.clay-menu-list .clay-menu-pair [role="menuitem"] { min-height: 30px; padding: 4px 6px 4px 9px; border: 1px solid var(--bevel-line); }
-.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 { padding: 6px 9px 4px; font: 400 11.5px/1.4 var(--bevel-font-mono); color: var(--bevel-muted); }
-`;
-
-// Last, so no skin can shrink a touch target or bring motion back.
-export const MENU_TOUCH = `@media (pointer: coarse), (max-width: 680px) {
-  .clay-menu-list [role="menuitem"] { min-height: 44px; font-size: 15px; }
-  .clay-menu-list .clay-menu-pair [role="menuitem"] { min-height: 44px; }
-  :is(.clay-menu-dock, .clay-seo) :is(input, textarea, select) { font-size: 16px; }
-  .clay-seo-input, .clay-people-input { min-height: 40px; }
-  .clay-menu-btn { min-height: 40px; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .clay-menu-track, .clay-menu-thumb { transition: none; }
-}
-`;
-
 export default MENU_BASE + MENU_FLOATING + MENU_SKIN + MENU_TOUCH;

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"));
+}