@panphora/clayjs 1.21.0 → 1.23.0

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; } }
 `;

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

@@ -5,6 +5,8 @@ import { bootPhase } from "../../core/boot-phase.js";
 
 export const COPY = {
   close: "Hide this introduction",
+  hide: "Hide intro",
+  show: "Show intro",
   label: (appName) => `About ${appName}`,
 };
 
@@ -43,17 +45,7 @@ function focusApp() {
   else document.body.focus({ preventScroll: true });
 }
 
-export function mountIntro({ memory, template, appName, hadDraft }) {
-  if (!template || !template.content.textContent.trim() && !template.content.querySelector("img, svg, video, canvas")) return null;
-  if (!forced()) {
-    if (memory.get().intro.done || hadDraft) return null;
-    if (bootPhase.servedHash) return null;
-    if (window.matchMedia && window.matchMedia("print").matches) return null;
-  }
-  return mount({ memory, template, appName });
-}
-
-function mount({ memory, template, appName }) {
+function buildSection({ template, appName, labelText, onClose }) {
   stylesOnce();
 
   const section = document.createElement("section");
@@ -66,11 +58,48 @@ function mount({ memory, template, appName }) {
   const close = document.createElement("button");
   close.type = "button";
   close.className = "clay-intro__close";
-  close.setAttribute("aria-label", COPY.close);
-  close.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"><path d="M1.4 0 6 4.6 10.6 0 12 1.4 7.4 6 12 10.6 10.6 12 6 7.4 1.4 12 0 10.6 4.6 6 0 1.4z"/></svg>';
-  close.addEventListener("click", () => dismiss("closed"));
+  if (labelText) {
+    close.textContent = labelText;
+    close.setAttribute("data-manual", "");
+  } else {
+    close.setAttribute("aria-label", COPY.close);
+    close.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"><path d="M1.4 0 6 4.6 10.6 0 12 1.4 7.4 6 12 10.6 10.6 12 6 7.4 1.4 12 0 10.6 4.6 6 0 1.4z"/></svg>';
+  }
+  close.addEventListener("click", () => onClose());
   mountEditorUI({ name: "intro-close", content: close, css: [CLOSE_CSS], parent: section });
 
+  section.addEventListener("click", (event) => {
+    if (event.target.closest("[visitor-intro-dismiss]")) {
+      onClose();
+      return;
+    }
+    if (event.target.closest("[visitor-intro-start]")) {
+      event.preventDefault();
+      window.scrollTo({ top: window.scrollY + section.getBoundingClientRect().bottom, behavior: "smooth" });
+    }
+  });
+
+  return section;
+}
+
+export function mountIntro({ memory, template, appName, hadDraft }) {
+  if (!template || !template.content.textContent.trim() && !template.content.querySelector("img, svg, video, canvas")) return null;
+  if (template.getAttribute("visitor-intro") === "manual") {
+    const printing = window.matchMedia && window.matchMedia("print").matches;
+    const open = forced() || !(memory.get().intro.done || hadDraft || bootPhase.servedHash || printing);
+    return mountManual({ memory, template, appName, open });
+  }
+  if (!forced()) {
+    if (memory.get().intro.done || hadDraft) return null;
+    if (bootPhase.servedHash) return null;
+    if (window.matchMedia && window.matchMedia("print").matches) return null;
+  }
+  return mount({ memory, template, appName });
+}
+
+function mount({ memory, template, appName }) {
+  const section = buildSection({ template, appName, onClose: () => dismiss("closed") });
+
   let gone = false;
   let frame = 0;
 
@@ -102,20 +131,43 @@ function mount({ memory, template, appName }) {
     });
   }
 
-  section.addEventListener("click", (event) => {
-    if (event.target.closest("[visitor-intro-dismiss]")) {
-      dismiss("closed");
-      return;
-    }
-    if (event.target.closest("[visitor-intro-start]")) {
-      event.preventDefault();
-      window.scrollTo({ top: window.scrollY + section.getBoundingClientRect().bottom, behavior: "smooth" });
-    }
-  });
-
   document.body.prepend(section);
   announceBottomUi();
   addEventListener("scroll", onScroll, { passive: true });
 
   return section;
 }
+
+function mountManual({ memory, template, appName, open }) {
+  let section = null;
+  const showRow = (wanted) => {
+    const menu = window.clay?.menu;
+    if (!menu) return;
+    if (wanted) menu.addItem({ id: "clay.intro", label: COPY.show, run: show });
+    else menu.removeItem("clay.intro");
+  };
+  function attach() {
+    section ??= buildSection({ template, appName, labelText: COPY.hide, onClose: hide });
+    document.body.prepend(section);
+    announceBottomUi();
+    showRow(false);
+  }
+  function hide() {
+    memory.get().intro.done = "closed";
+    memory.save();
+    section.remove();
+    announceBottomUi();
+    showRow(true);
+    focusApp();
+  }
+  function show() {
+    memory.get().intro.done = null;
+    memory.save();
+    attach();
+    window.scrollTo(0, 0);
+  }
+  document.addEventListener("clay:menu-ready", () => showRow(!section?.isConnected));
+  if (open) attach();
+  else showRow(true);
+  return section;
+}

package/src/plugins/visitor-drafts/owner-chip.js

@@ -1,6 +1,11 @@
 import { isDraftMode } from "../../core/is-edit-mode.js";
 import { BOTTOM_UI_CHANGED, announceBottomUi, bottomBarHeight, promptPanel } from "./bottom-ui.js";
 import { mountEditorUI } from "../../ui/editor-ui.js";
+import { followLook } from "../../ui/page-colour.js";
+
+// The notice sits on the page for as long as the owner edits, so it takes most of the
+// page's colour instead of Bevel's: a navy card on a brown page reads as a foreign object.
+const OWNER_LEAN = 0.8;
 
 export const COPY = {
   draft: "You're seeing a private draft, like a visitor.",
@@ -11,29 +16,17 @@ export const COPY = {
 };
 
 const CHIP_CSS = `.clay-owner {
-  --hcp-ground: #FDF8F0;
-  --hcp-surface: #FFFCF6;
-  --hcp-sunk: #F4ECDF;
-  --hcp-ink: #2B241B;
-  --hcp-ink-2: #4A4033;
-  --hcp-muted: #6B5942;
-  --hcp-line: #E8DCC6;
-  --hcp-line-2: #D8C8AF;
-  --hcp-brass: #8F6310;
-  --hcp-shadow: 0 1px 2px rgba(23, 28, 36, .06), 0 14px 34px -14px rgba(43, 36, 27, .32);
+  --hcp-surface: light-dark(#FFFCF6, #11131E);
+  --hcp-ground: var(--bevel-surface, var(--hcp-surface));
+  --hcp-ink: light-dark(#2B241B, #ECEAF2);
+  --hcp-ink-2: light-dark(#4A4033, #C9CDE0);
+  --hcp-muted: light-dark(#6B5942, #8A90AB);
+  --hcp-line-2: color-mix(in srgb, var(--hcp-ink) 22%, var(--hcp-ground));
+  --hcp-brass: light-dark(#8F6310, #D9A445);
+  --hcp-shadow: 0 1px 2px light-dark(rgba(23, 28, 36, .06), rgba(0, 0, 0, .4)), 0 14px 34px -14px light-dark(rgba(43, 36, 27, .32), rgba(0, 0, 0, .7));
   --hcp-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
   --hcp-lift: 0px;
-  color-scheme: light;
-}
-@media (prefers-color-scheme: dark) {
-  .clay-owner {
-    --hcp-surface: #11131E; --hcp-sunk: #1A1D2C;
-    --hcp-ink: #ECEAF2; --hcp-ink-2: #C9CDE0; --hcp-muted: #8A90AB;
-    --hcp-line: #262B42; --hcp-line-2: #353B52;
-    --hcp-brass: #D9A445;
-    --hcp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -14px rgba(0, 0, 0, .7);
-    color-scheme: dark;
-  }
+  color-scheme: light dark;
 }
 .clay-owner, .clay-owner *, .clay-owner *::before, .clay-owner *::after {
   box-sizing: border-box; margin: 0; padding: 0; border: 0;
@@ -46,8 +39,8 @@ const CHIP_CSS = `.clay-owner {
   max-width: min(460px, calc(100vw - 24px));
   padding: 8px 8px 8px 12px;
   font-family: var(--hcp-sans); font-size: 13px; font-weight: 400; line-height: 1.45;
-  color: var(--hcp-ink-2); text-align: left; background: var(--hcp-surface);
-  border: 1px solid var(--hcp-line-2); border-left: 3px solid var(--hcp-brass);
+  color: var(--hcp-ink-2); text-align: left; background: var(--hcp-ground);
+  border: 1px solid var(--hcp-line-2);
   box-shadow: var(--hcp-shadow);
   -webkit-font-smoothing: antialiased;
 }
@@ -151,6 +144,7 @@ export function mountOwnerChip() {
   }
 
   function liftOff() {
+    unfollow?.();
     removeEventListener("scroll", lift);
     removeEventListener("resize", lift);
     document.removeEventListener(BOTTOM_UI_CHANGED, lift);
@@ -168,6 +162,7 @@ export function mountOwnerChip() {
   // Transition events stop at a shadow root, so the chip's own changes are heard here.
   chip.addEventListener("transitionend", lift);
   lift();
+  const unfollow = followLook(chip, chip, undefined, OWNER_LEAN);
   // Whoever removes the chip takes its listeners back with it: a chip mounted and unmounted
   // once per mode session would otherwise leave six behind each time.
   chip.liftOff = liftOff;

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

@@ -119,7 +119,7 @@ export async function mountPrompt({ memory, appName, link }) {
     const t = e.target.closest("[data-hcp]");
     if (t) {
       const act = t.getAttribute("data-hcp");
-      if (act === "open") { set("card", "open"); linkEl.focus(); }
+      if (act === "open") { set("card", root.getAttribute("data-hcp-reason") === "error" ? undefined : "open"); linkEl.focus(); }
       else if (act === "minimize") { set("mini"); tab.focus(); }
       else if (act === "dismiss") {
         if (root.getAttribute("data-hcp-reason") === "error") { set("mini"); tab.focus(); }
@@ -149,7 +149,7 @@ export async function mountPrompt({ memory, appName, link }) {
   function clearError() {
     if (root.getAttribute("data-hcp-reason") === "error") root.setAttribute("data-hcp-reason", "use");
   }
-  const api = { set, root, showError, clearError };
+  const api = { set, root, showError, clearError, download: () => linkEl.click() };
 
   document.addEventListener("input", onUse, true);
   document.addEventListener("change", onUse, true);