@panphora/clayjs 1.17.0 → 1.18.1

package/src/plugins/upgrade.js

@@ -9,7 +9,7 @@
 // a visitor, a draft, no network, a failed fetch, a bad digest or an equal version.
 // The 24-hour cache is hyper-html-api's own; the dotted-version comparison is
 // core/version.js, so the rules engine that upgrades a document stays the click's.
-import { isNewerVersion } from "../core/version.js";
+import { isNewerVersion, parseVersion } from "../core/version.js";
 
 const CACHE_PREFIX = "hha:upgrade-check:";
 const TTL_MS = 24 * 60 * 60 * 1000;
@@ -77,12 +77,9 @@ async function latestManifest(sourceHref, currentVersion, { fetchFn, now }) {
   return { latest, latestUrl };
 }
 
-export async function findUpdate({
-  doc = document,
-  loc = location,
-  fetchFn = (url, init) => fetch(url, init),
-  now = Date.now(),
-} = {}) {
+// The copy this page says it is: its version and the source it was copied from, or
+// null for a page that is not a copy (or a person who cannot act on an offer).
+function copyOf({ doc, loc }) {
   const clay = (typeof window !== "undefined" && window.clay) || {};
   // A visitor cannot act on the offer, and a draft is not the document the source
   // would replace. Neither fetches.
@@ -101,32 +98,64 @@ export async function findUpdate({
   if (!source.pathname.endsWith(".html")) return null;
   // A pristine published copy points at itself: it is the source, not a copy of one.
   if (loc && source.origin === loc.origin && source.pathname === loc.pathname) return null;
+  return { source, currentVersion };
+}
+
+// What the check learned. "current" is said only after the source answered and named
+// nothing newer; anything that stopped the check short is "unknown", and so is an
+// update the person already declined.
+export async function checkUpdate({
+  doc = document,
+  loc = location,
+  fetchFn = (url, init) => fetch(url, init),
+  now = Date.now(),
+} = {}) {
+  const copy = copyOf({ doc, loc });
+  if (!copy) return { status: "none", version: null, update: null };
+  const { source, currentVersion } = copy;
+  const result = (status, update = null) => ({ status, version: currentVersion, update });
   const latestUrl = new URL(source.href);
   latestUrl.pathname = latestUrl.pathname.replace(/\.html$/, ".json");
 
   const { latest } = await latestManifest(source.href, currentVersion, { fetchFn, now });
-  if (!latest || typeof latest !== "object") return null;
-  if (typeof latest.version !== "string" || !isNewerVersion(latest.version, currentVersion)) return null;
+  if (!latest || typeof latest !== "object" || typeof latest.version !== "string") return result("unknown");
+  if (!parseVersion(latest.version) || !parseVersion(currentVersion)) return result("unknown");
+  if (!isNewerVersion(latest.version, currentVersion)) return result("current");
 
+  const clay = (typeof window !== "undefined" && window.clay) || {};
   const storage = clay.storage && clay.storage.local;
-  if (storage && storage.get(DISMISSED_KEY) === latest.version) return null;
+  if (storage && storage.get(DISMISSED_KEY) === latest.version) return result("unknown");
 
-  if (typeof latest.html !== "string" || !latest.html) return null;
+  if (typeof latest.html !== "string" || !latest.html) return result("unknown");
   const htmlUrl = new URL(latest.html, latestUrl).href;
   const res = await fetchOrNull(fetchFn, htmlUrl);
-  if (!res) return null;
+  if (!res) return result("unknown");
   let bytes;
   try {
     bytes = await res.arrayBuffer();
   } catch {
-    return null;
+    return result("unknown");
   }
   const digest = await digestOf(bytes);
   // A manifest whose digest does not match its HTML is a host that served the wrong
   // bytes. Nothing is offered, because nothing can be trusted to be that version.
-  if (!digest || digest !== String(latest.sha256 || "").toLowerCase()) return null;
+  if (!digest || digest !== String(latest.sha256 || "").toLowerCase()) return result("unknown");
 
-  return { version: latest.version, html: htmlUrl, sha256: digest, latestUrl: latestUrl.href };
+  return result("update", { version: latest.version, html: htmlUrl, sha256: digest, latestUrl: latestUrl.href });
+}
+
+export async function findUpdate(options) {
+  return (await checkUpdate(options)).update;
+}
+
+// The menu's footer while and after the check: the bare version until the check proves
+// more, then the latest-version line or, when there is one, the upgrade itself.
+async function showVersion(status, version) {
+  const clay = window.clay;
+  await whenMenuReady(clay);
+  if (!menuReady(clay) || !version) return;
+  const label = status === "current" ? `This doc is at latest version (${version})` : `Version ${version}`;
+  clay.menu.addItem({ id: "upgrade", label, text: true });
 }
 
 function dismiss(version) {
@@ -184,8 +213,13 @@ export async function start(options = {}) {
   const clay = window.clay;
   // Toasts and the menu are drawn by satellites that may land after boot settles.
   await Promise.resolve(clay && clay.loaded && clay.loaded.ui).catch(() => {});
-  const update = await findUpdate(options).catch(() => null);
-  if (!update) return null;
+  const copy = copyOf({ doc: options.doc || document, loc: options.loc || location });
+  if (copy) showVersion("checking", copy.currentVersion);
+  const { status, version, update } = await checkUpdate(options).catch(() => ({ status: "unknown", version: copy && copy.currentVersion, update: null }));
+  if (!update) {
+    if (status !== "none") await showVersion(status, version);
+    return null;
+  }
   await announce(update);
   return update;
 }

package/src/plugins/upload-ui.js

@@ -13,12 +13,15 @@
  * stylesheet load the first time somebody mounts one, so a document that never
  * uploads never downloads them.
  *
- * The look is a set of `--clay-upload-*` custom properties, each with a default in
- * its own `var()`. A container that sets one — `.journal-drop { --clay-upload-ink:
- * #333 }` — restyles the row without replacing any of its behaviour.
+ * The row draws inside its own shadow root, so the page's CSS cannot restyle it. Its
+ * look is a set of `--clay-upload-*` custom properties, each with a default in its own
+ * `var()`, and those do reach in: a container that sets one — `.journal-drop {
+ * --clay-upload-ink: #333 }` — restyles the row without replacing any of its
+ * behaviour. The font family is the one thing it still inherits from the page.
  */
 
 import { canRetry } from "./upload-task.js";
+import { mountEditorUI } from "../ui/editor-ui.js";
 
 const CSS = `.clay-upload {
   display: flex;
@@ -110,16 +113,8 @@ const CSS = `.clay-upload {
   .clay-upload__button { color: var(--clay-upload-button-ink, #8AB4FF); }
   .clay-upload[data-clay-upload-state="failed"] .clay-upload__label { color: var(--clay-upload-failure-ink, #FFB4AB); }
 }
-@media print { .clay-upload { display: none; } }`;
-
-function stylesOnce() {
-  if (document.getElementById("clay-upload-style")) return;
-  const style = document.createElement("style");
-  style.id = "clay-upload-style";
-  style.setAttribute("clay", "editor-ui");
-  style.textContent = CSS;
-  document.head.append(style);
-}
+@media print { .clay-upload { display: none; } }
+:host { font-family: inherit !important; }`;
 
 function percentOf({ loaded, total, percent }) {
   if (typeof percent === "number") return percent;
@@ -143,8 +138,6 @@ export function mount(task, container) {
     throw new TypeError("clay.upload.mount needs a container");
   }
 
-  stylesOnce();
-
   const name = task.file?.name || "File";
 
   const root = document.createElement("div");
@@ -237,9 +230,11 @@ export function mount(task, container) {
     if (!retryEl.hidden) retryEl.setAttribute("aria-label", lastError ? `Retry ${name}: ${lastError}` : `Retry ${name}`);
   }
 
+  let ui = null;
+
   function unmount() {
     unsubscribe();
-    root.remove();
+    ui?.remove();
   }
 
   cancelEl.addEventListener("click", () => {
@@ -257,7 +252,7 @@ export function mount(task, container) {
   });
 
   const unsubscribe = task.subscribe(draw);
-  host.append(root);
+  ui = mountEditorUI({ name: "upload", content: root, css: [CSS], parent: host });
 
   return { unmount };
 }

package/src/plugins/visitor-drafts/bottom-ui.js

@@ -4,12 +4,20 @@ export function announceBottomUi() {
   document.dispatchEvent(new CustomEvent(BOTTOM_UI_CHANGED));
 }
 
+// ClayJS's own interfaces sit in shadow roots, where a hit test stops at the host, and the
+// host takes no box of its own. So a hit on one looks inside it too.
+function hitsAt(scope, x, y) {
+  const hits = scope.elementsFromPoint ? scope.elementsFromPoint(x, y) : [];
+  return hits
+    .filter((hit) => hit.getRootNode() === scope)
+    .flatMap((hit) => (hit.localName === "clay-editor-ui" && hit.shadowRoot ? hitsAt(hit.shadowRoot, x, y) : [hit]));
+}
+
 export function bottomBarHeight(x, skip) {
   const h = window.innerHeight;
   let raise = 0;
-  const hits = document.elementsFromPoint ? document.elementsFromPoint(x, h - 3) : [];
-  for (const hit of hits) {
-    for (let el = hit; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+  for (const hit of hitsAt(document, x, h - 3)) {
+    for (let el = hit; el && el !== document.body && el !== document.documentElement; el = el.parentElement ?? el.getRootNode().host) {
       if (skip(el)) break;
       const position = getComputedStyle(el).position;
       if (position === "fixed" || position === "sticky") {
@@ -23,7 +31,7 @@ export function bottomBarHeight(x, skip) {
 }
 
 export function promptPanel(box) {
-  const panel = document.querySelector("#hcp:not([hidden])");
+  const panel = document.querySelector('clay-editor-ui[data-clay-ui="download-prompt"]')?.shadowRoot.querySelector("#hcp:not([hidden])");
   if (!panel) return 0;
   const r = panel.getBoundingClientRect();
   if (!r.width || !r.height || r.right <= box.left || r.left >= box.right) return 0;

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

@@ -4,6 +4,12 @@ body:has(> .clay-intro) { height: auto !important; overflow: visible !important;
   position: relative;
   display: block;
 }
+@media print { .clay-intro { display: none; } }
+`;
+
+// The close button sits in its own shadow root inside the author's strip, so only it is
+// shielded from the page's CSS. It still takes the strip's text colour.
+export const CLOSE_CSS = `:host { color: inherit !important; }
 .clay-intro__close {
   position: absolute; top: 10px; right: 10px; z-index: 1;
   display: inline-flex; align-items: center; justify-content: center;
@@ -11,9 +17,8 @@ body:has(> .clay-intro) { height: auto !important; overflow: visible !important;
   border: 0; border-radius: 4px; background: none; box-shadow: none;
   color: inherit; opacity: .55; cursor: pointer; line-height: 1;
 }
-.clay-intro .clay-intro__close:hover { opacity: 1; background: none; color: inherit; }
+.clay-intro__close:hover { opacity: 1; background: none; color: inherit; }
 .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; } }
-@media print { .clay-intro { display: none; } }
 `;

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

@@ -1,4 +1,5 @@
-import { INTRO_CSS } from "./intro-style.js";
+import { CLOSE_CSS, INTRO_CSS } from "./intro-style.js";
+import { mountEditorUI } from "../../ui/editor-ui.js";
 import { announceBottomUi } from "./bottom-ui.js";
 import { bootPhase } from "../../core/boot-phase.js";
 
@@ -67,7 +68,8 @@ function mount({ memory, template, appName }) {
   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>';
-  section.appendChild(close);
+  close.addEventListener("click", () => dismiss("closed"));
+  mountEditorUI({ name: "intro-close", content: close, css: [CLOSE_CSS], parent: section });
 
   let gone = false;
   let frame = 0;
@@ -101,7 +103,7 @@ function mount({ memory, template, appName }) {
   }
 
   section.addEventListener("click", (event) => {
-    if (event.target.closest(".clay-intro__close, [visitor-intro-dismiss]")) {
+    if (event.target.closest("[visitor-intro-dismiss]")) {
       dismiss("closed");
       return;
     }

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

@@ -1,5 +1,6 @@
 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";
 
 export const COPY = {
   draft: "You're seeing a private draft, like a visitor.",
@@ -77,18 +78,10 @@ const CHIP_CSS = `.clay-owner {
 @media print { .clay-owner { display: none; } }
 `;
 
-function stylesOnce() {
-  if (document.getElementById("clay-owner-style")) return;
-  const style = document.createElement("style");
-  style.id = "clay-owner-style";
-  style.setAttribute("clay", "editor-ui");
-  style.textContent = CHIP_CSS;
-  document.head.appendChild(style);
-}
+export const ownerChip = () => document.querySelector('clay-editor-ui[data-clay-ui="owner"]')?.shadowRoot.getElementById("clay-owner") ?? null;
 
 export function mountOwnerChip() {
-  if (document.getElementById("clay-owner")) return null;
-  stylesOnce();
+  if (ownerChip()) return null;
 
   const draft = isDraftMode;
   const chip = document.createElement("div");
@@ -118,10 +111,10 @@ export function mountOwnerChip() {
   close.className = "clay-owner__x";
   close.setAttribute("aria-label", COPY.close);
   close.textContent = "\u00d7";
-  close.addEventListener("click", () => { chip.remove(); liftOff(); release(); });
+  close.addEventListener("click", () => { ui.remove(); liftOff(); release(); });
 
   chip.append(lead, action, close);
-  document.body.appendChild(chip);
+  const ui = mountEditorUI({ name: "owner", content: chip, css: [CHIP_CSS], attributes: { "sap-ignore": "" } });
 
   const vars = document.createElement("style");
   vars.id = "clay-owner-vars";
@@ -172,10 +165,13 @@ export function mountOwnerChip() {
   document.addEventListener("transitionend", lift, true);
   document.addEventListener("pointerup", lift, true);
   window.addEventListener("hashchange", lift);
+  // Transition events stop at a shadow root, so the chip's own changes are heard here.
+  chip.addEventListener("transitionend", lift);
   lift();
   // 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;
+  chip.unmount = () => { liftOff(); ui.remove(); };
 
   return chip;
 }

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

@@ -1,7 +1,5 @@
 import { announceBottomUi, bottomBarHeight } from "./bottom-ui.js";
-
-const FONT_HREF = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@400;500;600&family=Newsreader:opsz,wght@6..72,500&display=swap";
-
+import { mountEditorUI } from "../../ui/editor-ui.js";
 const ASIDE = `<aside class="hcp" id="hcp" hidden aria-label="Download this app" data-hcp-state="tab" data-hcp-reason="open" sap-ignore clay="editor-ui">
   <section class="hcp-card" id="hcp-card" role="dialog" aria-modal="false" aria-labelledby="hcp-title">
     <button type="button" class="hcp-x" data-hcp="minimize" aria-label="Minimize"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><path d="M5 12h14"/></svg></button>
@@ -24,13 +22,15 @@ const ASIDE = `<aside class="hcp" id="hcp" hidden aria-label="Download this app"
 </aside>`;
 
 export async function mountPrompt({ memory, appName, link }) {
-  if (!document.getElementById("hcp-style")) {
-    const { PROMPT_CSS } = await import("./prompt-style.js");
-    document.head.insertAdjacentHTML("beforeend", `<link rel="stylesheet" clay="editor-ui" href="${FONT_HREF}">\n<style clay="editor-ui" id="hcp-style">${PROMPT_CSS}</style>`);
+  const { PROMPT_CSS } = await import("./prompt-style.js");
+  const existing = document.querySelector('clay-editor-ui[data-clay-ui="download-prompt"]');
+  let root = existing?.shadowRoot.getElementById("hcp");
+  if (!root) {
+    const parsed = document.createElement("template");
+    parsed.innerHTML = ASIDE;
+    root = parsed.content.firstElementChild;
+    mountEditorUI({ name: "download-prompt", content: root, css: [PROMPT_CSS], attributes: { "sap-ignore": "" } });
   }
-  if (!document.getElementById("hcp")) document.body.insertAdjacentHTML("beforeend", ASIDE);
-
-  const root = document.getElementById("hcp");
   const ui = memory.get();
   if (!ui.prompt || typeof ui.prompt !== "object") ui.prompt = {};
   const mem = ui.prompt;
@@ -158,6 +158,8 @@ export async function mountPrompt({ memory, appName, link }) {
   addEventListener("scroll", lift, { passive: true });
   addEventListener("resize", lift);
   document.addEventListener("transitionend", lift, true);
+  // Transition events stop at a shadow root, so the prompt's own slides are heard here.
+  root.addEventListener("transitionend", lift);
 
   set(mem.shown || mem.dismissed ? "mini" : "tab");
   if (!mem.shown && (mem.uses || 0) >= USES_TO_SHOW) maybeShow("return");

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

@@ -1,3 +1,5 @@
+import { draftPath } from "./store.js";
+
 const SRC = /^[a-z0-9][a-z0-9-]{0,39}$/;
 
 export function rememberSource(memory, search = window.location.search) {
@@ -9,8 +11,7 @@ export function rememberSource(memory, search = window.location.search) {
 }
 
 export function downloadUrl(src, loc = window.location) {
-  let path = loc.pathname.replace(/\/+$/, "");
-  if (path && !/\.(html|htmlclay)$/.test(path)) path += ".html";
-  return `/_/download${path}?as=htmlclay${src ? `&src=${encodeURIComponent(src)}` : ""}`;
+  const path = draftPath(loc.pathname);
+  return `/_/download${path === "/" ? "" : path}?as=htmlclay${src ? `&src=${encodeURIComponent(src)}` : ""}`;
 }
 

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

@@ -4,6 +4,20 @@ import { draftSlot, setDraftStoreFailed } from "../../core/draft-mode.js";
 export const KEY_PREFIX = "clay:visitor-drafts:";
 export const RECORD_VERSION = 1;
 
+// The document a pathname names, spelled the way the hosts resolve it: the path up to
+// and including the first segment that ends in .html or .htmlclay (anything after it is
+// a route inside that document), repeated slashes as one, the root index.html as "/",
+// and "/" for a host that serves one document at every path.
+export function draftPath(pathname = window.location.pathname) {
+  const clean = String(pathname || "/").replace(/\/{2,}/g, "/");
+  const file = clean.match(/^(.*?\/[^/]+\.(?:html|htmlclay))(?:\/|$)/i);
+  const path = file ? file[1] : "/";
+  return path.toLowerCase() === "/index.html" ? "/" : path;
+}
+
+export const legacyKey = (slot) => KEY_PREFIX + slot;
+export const draftKey = (slot, path = draftPath()) => `${KEY_PREFIX}${slot}@${path}`;
+
 export function safeStorage() {
   try { return window.localStorage; } catch { return null; }
 }
@@ -66,26 +80,88 @@ function complete(draft, page, top = false) {
   return draft;
 }
 
-// Three-way merge of this tab's value with another tab's, from the value both
-// started at. Top-level keys and nested objects merge per field. A list both tabs
-// changed is a conflict, since a card moved between lists or a reorder cannot be
-// told apart from a delete and an add: this tab's value wins.
-export function merge3(base, mine, theirs) {
+const sameIds = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+
+// Rows matched by id, when neither tab reordered the rows all three still have: a row
+// one tab added is kept where that tab put it, a row one tab removed goes unless the
+// other tab changed it, and a row both kept merges field by field. Anything else is
+// null, and the caller treats the list as one value.
+function mergeRows(base, mine, theirs) {
+  const index = (rows) => new Map(rows.map((row) => [row.id, row]));
+  const was = index(base);
+  const mineById = index(mine);
+  const theirsById = index(theirs);
+  const shared = (rows) => rows.filter((row) => was.has(row.id) && mineById.has(row.id) && theirsById.has(row.id)).map((row) => row.id);
+  const order = shared(base);
+  if (!sameIds(order, shared(mine)) || !sameIds(order, shared(theirs))) return null;
+  for (const [id, row] of was) {
+    if (mineById.has(id) && !theirsById.has(id) && !same(mineById.get(id), row)) return null;
+    if (!mineById.has(id) && theirsById.has(id) && !same(theirsById.get(id), row)) return null;
+  }
+  let conflict = false;
+  const out = [];
+  for (const row of mine) {
+    if (was.has(row.id) && !theirsById.has(row.id)) continue;
+    if (!theirsById.has(row.id)) { out.push(row); continue; }
+    const part = mergeValue(was.get(row.id), row, theirsById.get(row.id), true);
+    conflict ||= part.conflict;
+    out.push(part.value);
+  }
+  theirs.forEach((row, i) => {
+    if (was.has(row.id) || mineById.has(row.id)) return;
+    let at = 0;
+    for (let j = i - 1; j >= 0; j--) {
+      const k = out.findIndex((kept) => kept.id === theirs[j].id);
+      if (k !== -1) { at = k + 1; break; }
+    }
+    out.splice(at, 0, row);
+  });
+  return { value: out, conflict };
+}
+
+function mergeValue(base, mine, theirs, rows) {
   if (same(mine, theirs) || same(theirs, base)) return { value: mine, conflict: false };
   if (same(mine, base)) return { value: theirs, conflict: false };
   if (isPlain(mine) && isPlain(theirs)) {
     const value = {};
     let conflict = false;
     for (const name of new Set([...Object.keys(mine), ...Object.keys(theirs)])) {
-      const part = merge3(isPlain(base) ? base[name] : undefined, mine[name], theirs[name]);
+      const part = mergeValue(isPlain(base) ? base[name] : undefined, mine[name], theirs[name], rows);
       conflict ||= part.conflict;
       if (part.value !== undefined) value[name] = part.value;
     }
     return { value, conflict };
   }
+  if (rows && hasIds(base) && hasIds(mine) && hasIds(theirs)) {
+    const merged = mergeRows(base, mine, theirs);
+    if (merged) return merged;
+  }
   return { value: mine, conflict: true };
 }
 
+function countIds(value, counts = new Map()) {
+  if (Array.isArray(value)) {
+    if (hasIds(value)) for (const row of value) counts.set(row.id, (counts.get(row.id) || 0) + 1);
+    for (const item of value) countIds(item, counts);
+  } else if (isPlain(value)) {
+    for (const item of Object.values(value)) countIds(item, counts);
+  }
+  return counts;
+}
+
+// Three-way merge of this tab's value with another tab's, from the value both started
+// at. Objects merge per field and lists of rows with ids merge per row. A list merge that
+// would hold one id in two places (a card moved to different lists in each tab) is
+// undone, and that list is a conflict this tab wins, as is any reorder.
+export function merge3(base, mine, theirs) {
+  const merged = mergeValue(base, mine, theirs, true);
+  const before = countIds(mine);
+  for (const [id, count] of countIds(merged.value)) {
+    if (count > 1 && count > (before.get(id) || 0)) return mergeValue(base, mine, theirs, false);
+  }
+  return merged;
+}
+
 function storageFailure(doc, error) {
   setDraftStoreFailed(true);
   doc.dispatchEvent(new CustomEvent("clay:drafts-store-failed", { detail: { error } }));
@@ -94,9 +170,58 @@ function storageFailure(doc, error) {
   return failure;
 }
 
-export function createStore({ doc = document, storage = safeStorage(), now = () => new Date() } = {}) {
+const savedAtOf = (raw) => {
+  try { return String(JSON.parse(raw)?.savedAt ?? ""); } catch { return ""; }
+};
+
+// A draft saved before drafts were scoped to the document's path lives under the slot
+// alone. It is copied into this path's key with its UI memory, and never written or
+// removed: a tab still on an older ClayJS may write it again, and another document on
+// this origin with the same slot may still need it. The marker keeps the old record's
+// savedAt, so a later write by such a tab is caught up on the next load, and a reset
+// never brings the old draft back.
+export function adoptLegacy(slot, { path = draftPath(), storage = safeStorage() } = {}) {
+  const from = legacyKey(slot);
+  const to = draftKey(slot, path);
+  const marker = to + ":legacy";
+  try {
+    const generation = storage?.getItem(to);
+    const old = storage?.getItem(from);
+    if (old == null) {
+      // A visitor who only dismissed the intro has UI memory and no draft; it is copied once too.
+      const ui = storage?.getItem(from + ":ui");
+      if (ui != null && storage.getItem(to + ":ui") == null && storage.getItem(to + ":ui-legacy") == null) {
+        storage.setItem(to + ":ui", ui);
+        storage.setItem(to + ":ui-legacy", "1");
+      }
+      return "none";
+    }
+    const stamp = savedAtOf(old);
+    const seen = storage.getItem(marker);
+    if (seen === stamp) return "none";
+    // A visitor who wrote to this document while the copy ran keeps what they typed.
+    const current = storage.getItem(to);
+    if (current !== generation) return "none";
+    if (current == null || (seen != null && savedAtOf(current) === seen)) {
+      storage.setItem(to, old);
+    } else if (current !== old) {
+      storage.setItem(to + ":conflict", old);
+      console.warn("visitor-drafts: an older tab changed this draft after it moved; its copy was kept under", to + ":conflict");
+    }
+    if (seen == null) {
+      const ui = storage.getItem(from + ":ui");
+      if (ui != null && storage.getItem(to + ":ui") == null) storage.setItem(to + ":ui", ui);
+    }
+    storage.setItem(marker, stamp);
+    return "copied";
+  } catch {
+    return "failed";
+  }
+}
+
+export function createStore({ doc = document, storage = safeStorage(), now = () => new Date(), path = draftPath(), fallback = null } = {}) {
   const slot = draftSlot(doc);
-  const key = KEY_PREFIX + slot;
+  const key = draftKey(slot, path);
   const rules = engine.findRulesIn(doc, "api").rules;
 
   let lastRaw = null;
@@ -105,7 +230,11 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
   let stopped = false;
 
   function getRaw() {
-    try { return storage ? storage.getItem(key) : null; } catch { return null; }
+    try {
+      if (!storage) return null;
+      const raw = storage.getItem(key);
+      return raw == null && fallback ? storage.getItem(fallback) : raw;
+    } catch { return null; }
   }
 
   function parse(raw) {

package/src/plugins/visitor-drafts/ui-memory.js

@@ -1,5 +1,5 @@
-export function createUiMemory(slot, storage) {
-  const key = `clay:visitor-drafts:${slot}:ui`;
+export function createUiMemory(draftKey, storage) {
+  const key = `${draftKey}:ui`;
   const blank = () => ({ v: 1, prompt: {}, intro: { done: null }, src: null });
   let mem = blank();
   try {

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

@@ -20,14 +20,13 @@ function mountChip() {
   if (!mounting) {
     const asked = sessions;
     mounting = import("./visitor-drafts/owner-chip.js")
-      .then(({ mountOwnerChip }) => {
-        const chip = mountOwnerChip() || document.getElementById("clay-owner");
+      .then(({ mountOwnerChip, ownerChip }) => {
+        const chip = mountOwnerChip() || ownerChip();
         if (asked === sessions) {
           mounted = chip;
           return chip;
         }
-        chip?.liftOff?.();
-        chip?.remove();
+        chip?.unmount?.();
         return null;
       })
       .finally(() => { mounting = null; });
@@ -37,8 +36,7 @@ function mountChip() {
 
 function unmountChip() {
   sessions += 1;
-  mounted?.liftOff?.();
-  mounted?.remove();
+  mounted?.unmount?.();
   mounted = null;
   document.getElementById("clay-owner-vars")?.remove();
 }

package/src/plugins/visitor-drafts.js

@@ -1,7 +1,7 @@
 import { isDraftMode, isEditMode, isOwner } from "../core/is-edit-mode.js";
 import { hasSaveToken } from "../core/host-attrs.js";
 import { draftSlot, setDraftTransport, setDraftFlush } from "../core/draft-mode.js";
-import { createStore, safeStorage } from "./visitor-drafts/store.js";
+import { createStore, adoptLegacy, draftPath, legacyKey, safeStorage } from "./visitor-drafts/store.js";
 import { createUiMemory } from "./visitor-drafts/ui-memory.js";
 import { rememberSource, downloadUrl } from "./visitor-drafts/source.js";
 import { mountPrompt } from "./visitor-drafts/prompt.js";
@@ -39,12 +39,14 @@ const slot = draftSlot();
 const rulesTag = document.querySelector('script[data-rules-name~="api"]');
 
 if (isDraftMode && slot && rulesTag) {
-  store = createStore();
+  const path = draftPath();
+  const moved = adoptLegacy(slot, { path });
+  store = createStore({ path, fallback: moved === "failed" ? legacyKey(slot) : null });
   setDraftTransport((html) => store.write(html));
   const result = store.restore();
   restoredDetail = { restored: result.restored, hadDraft: result.hadDraft, parked: Boolean(result.parked), ...(result.partial && { partial: true }), ...(result.blocked && { blocked: true }) };
   document.dispatchEvent(new CustomEvent("clay:drafts-restored", { detail: restoredDetail }));
-  const memory = createUiMemory(slot, safeStorage());
+  const memory = createUiMemory(store.key, safeStorage());
   source = rememberSource(memory);
   downloadLink = downloadUrl(source);
   const appName = document.querySelector('meta[name="application-name"]')?.content?.trim() || document.title.split(/:|\s\|\s/)[0].trim() || "This app";

package/src/recovery/store.js

@@ -751,7 +751,7 @@ export function createStore({
           if (!sameValue(existing.capsuleId, capsule.id) || existing.revision !== input.revision) return { ok: false, code: "stale" };
           doomed.push({ slot, existing });
         }
-        const updated = { ...capsule, revision: replacement.revision, payload: replacement.payload, updated: replacement.updated };
+        const updated = { ...capsule, revision: replacement.revision, context: replacement.context ?? capsule.context, payload: replacement.payload, updated: replacement.updated };
         updated.bytes = recordBytes(updated);
         let delta = updated.bytes - capsule.bytes;
         for (const { existing } of doomed) delta -= existing.bytes;