@panphora/clayjs 1.15.2 → 1.17.0

package/src/plugins/upload-ui.js

@@ -0,0 +1,265 @@
+/**
+ * upload-ui.js — the shared row for one upload task: name, progress, actions.
+ *
+ * `upload-task.js` owns the upload; this module only draws what that task says and
+ * forwards a person's clicks back to it. Journal and Kanban mount the same row, so
+ * neither duplicates the controls and neither can drift from the other's behaviour.
+ *
+ *   const unmount = await clay.upload.mount(task, container);
+ *   unmount();
+ *
+ * Everything it draws is `clay="editor-ui"`, so none of it reaches a saved file or a
+ * sync frame. Nothing here is imported by `upload.js` statically: the row and its
+ * 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.
+ */
+
+import { canRetry } from "./upload-task.js";
+
+const CSS = `.clay-upload {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--clay-upload-gap, 8px);
+  padding: var(--clay-upload-padding, 8px 10px);
+  font-family: var(--clay-upload-font, inherit);
+  font-size: var(--clay-upload-font-size, 13px);
+  line-height: var(--clay-upload-line-height, 1.4);
+  color: var(--clay-upload-ink, #171A1F);
+  text-align: left;
+  background: var(--clay-upload-bg, transparent);
+  border: var(--clay-upload-border-width, 0) solid var(--clay-upload-border, #D8D8DE);
+  border-radius: var(--clay-upload-radius, 6px);
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.clay-upload *, .clay-upload *::before, .clay-upload *::after { box-sizing: border-box; }
+.clay-upload__name {
+  flex: 1 1 8em;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--clay-upload-name-weight, 500);
+  color: var(--clay-upload-ink, #171A1F);
+}
+.clay-upload__progress {
+  flex: 2 1 6em;
+  width: auto;
+  height: var(--clay-upload-progress-height, 6px);
+  margin: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  border: 0;
+  border-radius: calc(var(--clay-upload-progress-height, 6px) / 2);
+  background: var(--clay-upload-track, rgba(23, 26, 31, .14));
+  overflow: hidden;
+}
+.clay-upload__progress::-webkit-progress-bar { background: var(--clay-upload-track, rgba(23, 26, 31, .14)); }
+.clay-upload__progress::-webkit-progress-value { background: var(--clay-upload-fill, #2F6FEB); }
+.clay-upload__progress::-moz-progress-bar { background: var(--clay-upload-fill, #2F6FEB); }
+.clay-upload__label {
+  flex: 0 1 auto;
+  font-variant-numeric: tabular-nums;
+  color: var(--clay-upload-muted, #5C6069);
+}
+.clay-upload__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.clay-upload__actions { display: flex; flex: none; align-items: center; gap: var(--clay-upload-action-gap, 4px); }
+.clay-upload__button {
+  min-height: var(--clay-upload-button-height, 28px);
+  padding: var(--clay-upload-button-padding, 4px 10px);
+  font: inherit;
+  font-weight: var(--clay-upload-button-weight, 500);
+  color: var(--clay-upload-button-ink, #2F6FEB);
+  background: var(--clay-upload-button-bg, transparent);
+  border: 1px solid var(--clay-upload-button-border, transparent);
+  border-radius: var(--clay-upload-button-radius, 4px);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.clay-upload__button:hover { background: var(--clay-upload-button-bg-hover, rgba(47, 111, 235, .1)); }
+.clay-upload__button:focus-visible { outline: 2px solid var(--clay-upload-fill, #2F6FEB); outline-offset: 2px; }
+.clay-upload__button[hidden] { display: none; }
+.clay-upload[data-clay-upload-state="failed"] .clay-upload__label { color: var(--clay-upload-failure-ink, #B3261E); }
+@media (pointer: coarse) {
+  .clay-upload__button { min-height: var(--clay-upload-button-height, 44px); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .clay-upload__progress { transition: none; }
+}
+@media (prefers-color-scheme: dark) {
+  .clay-upload { color: var(--clay-upload-ink, #E9E9EC); border-color: var(--clay-upload-border, #3A3D45); }
+  .clay-upload__name { color: var(--clay-upload-ink, #E9E9EC); }
+  .clay-upload__label { color: var(--clay-upload-muted, #A2A6AE); }
+  .clay-upload__progress { background: var(--clay-upload-track, rgba(233, 233, 236, .2)); }
+  .clay-upload__progress::-webkit-progress-bar { background: var(--clay-upload-track, rgba(233, 233, 236, .2)); }
+  .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);
+}
+
+function percentOf({ loaded, total, percent }) {
+  if (typeof percent === "number") return percent;
+  if (typeof total === "number" && total > 0) return Math.round((loaded / total) * 100);
+  return null;
+}
+
+/**
+ * Draw one upload task into a container, and stop when told to.
+ *
+ * @param {Object} task - from `clay.upload.start`
+ * @param {Element|string} container - where the row goes
+ * @returns {{unmount: function}}
+ */
+export function mount(task, container) {
+  if (!task || typeof task.subscribe !== "function") {
+    throw new TypeError("clay.upload.mount needs an upload task");
+  }
+  const host = typeof container === "string" ? document.querySelector(container) : container;
+  if (!host || host.nodeType !== 1) {
+    throw new TypeError("clay.upload.mount needs a container");
+  }
+
+  stylesOnce();
+
+  const name = task.file?.name || "File";
+
+  const root = document.createElement("div");
+  root.className = "clay-upload";
+  root.setAttribute("clay", "editor-ui");
+  root.setAttribute("data-clay-upload-state", "uploading");
+  root.innerHTML =
+    `<span class="clay-upload__name"></span>` +
+    `<progress class="clay-upload__progress"></progress>` +
+    `<span class="clay-upload__label"></span>` +
+    `<span class="clay-upload__status" role="status" aria-live="polite" aria-atomic="true"></span>` +
+    `<span class="clay-upload__actions">` +
+    `<button type="button" class="clay-upload__button clay-upload__cancel">Cancel</button>` +
+    `<button type="button" class="clay-upload__button clay-upload__retry" hidden>Retry</button>` +
+    `<button type="button" class="clay-upload__button clay-upload__dismiss">Dismiss</button>` +
+    `</span>`;
+
+  const nameEl = root.querySelector(".clay-upload__name");
+  const progressEl = root.querySelector(".clay-upload__progress");
+  const labelEl = root.querySelector(".clay-upload__label");
+  const statusEl = root.querySelector(".clay-upload__status");
+  const cancelEl = root.querySelector(".clay-upload__cancel");
+  const retryEl = root.querySelector(".clay-upload__retry");
+  const dismissEl = root.querySelector(".clay-upload__dismiss");
+
+  nameEl.textContent = name;
+  progressEl.setAttribute("aria-label", `Upload progress for ${name}`);
+
+  // The announcement key, not the text: progress events repeat the same state, and a
+  // live region that speaks on every byte is unusable. Only a real transition —
+  // started, finishing, done, failed, cancelled — changes what it says.
+  let announced = null;
+  let lastError = null;
+
+  function announce(text) {
+    if (text === announced) return;
+    announced = text;
+    statusEl.textContent = text;
+  }
+
+  function draw(snapshot) {
+    const { state } = snapshot;
+    const uploading = state === "uploading";
+    const percent = percentOf(snapshot);
+    const finishing = uploading && percent !== null && percent >= 100;
+
+    root.setAttribute("data-clay-upload-state", state);
+
+    if (uploading) {
+      // A retry draws a row that was showing a failure a moment ago: the progress
+      // element comes back, and the old error must not colour the retry button.
+      progressEl.hidden = false;
+      lastError = null;
+      if (percent === null) {
+        progressEl.removeAttribute("value");
+        progressEl.removeAttribute("max");
+        labelEl.textContent = "Uploading";
+      } else {
+        progressEl.setAttribute("max", "100");
+        progressEl.setAttribute("value", String(percent));
+        labelEl.textContent = finishing ? "Finishing upload" : `${percent}%`;
+      }
+      announce(finishing ? `Finishing upload of ${name}` : `Uploading ${name}`);
+    } else {
+      const message = snapshot.result?.msg || (state === "succeeded" ? "Uploaded" : state === "cancelled" ? "Upload cancelled" : "Upload failed");
+      if (state === "succeeded") {
+        progressEl.setAttribute("max", "100");
+        progressEl.setAttribute("value", "100");
+      } else {
+        progressEl.removeAttribute("value");
+        progressEl.removeAttribute("max");
+      }
+      progressEl.hidden = state !== "succeeded";
+      labelEl.textContent = message;
+      if (state === "failed") {
+        lastError = message;
+        announce(message);
+      } else if (state === "cancelled") {
+        lastError = null;
+        announce("Upload cancelled");
+      } else {
+        announce(message);
+      }
+    }
+
+    cancelEl.hidden = !uploading;
+    // Dismissing a running upload would hide it while it still finishes and lands; Cancel is the way out then.
+    dismissEl.hidden = uploading;
+    retryEl.hidden = !canRetry(snapshot);
+    if (!retryEl.hidden) retryEl.setAttribute("aria-label", lastError ? `Retry ${name}: ${lastError}` : `Retry ${name}`);
+  }
+
+  function unmount() {
+    unsubscribe();
+    root.remove();
+  }
+
+  cancelEl.addEventListener("click", () => {
+    if (cancelEl.hidden) return;
+    task.cancel();
+  });
+  retryEl.addEventListener("click", () => {
+    if (retryEl.hidden) return;
+    retryEl.hidden = true;
+    task.retry();
+  });
+  dismissEl.addEventListener("click", () => {
+    if (dismissEl.hidden) return;
+    unmount();
+  });
+
+  const unsubscribe = task.subscribe(draw);
+  host.append(root);
+
+  return { unmount };
+}
+
+export default mount;

package/src/plugins/upload.js

@@ -10,6 +10,12 @@
  *   const result = await clay.upload(file, { onProgress, signal });
  *   // { ok, msg, msgType, code, uploads }
  *
+ *   const task = clay.upload.start(file, { requiredAccess: "document-or-local" });
+ *   const off = task.subscribe(({ state, percent }) => draw(state, percent));
+ *   await task.result;
+ *   task.retry();
+ *   task.dispose();
+ *
  * The result NEVER rejects, matching the save lane. One shape from every exit,
  * because two channels for three outcomes (stored, cannot store here, failed) is
  * the exact pattern save-core.js documents as the source of its own past bugs: a
@@ -18,27 +24,20 @@
  * embedded.
  *
  * Codes a caller branches on:
- *   unsupported       this host does not store files; embedding is correct
- *   payment-required  the host stores files, but not for this account
- *   too-large         over the host's cap, refused here or by the host
- *   unsupported-type  the host will not store this kind of file
- *   timeout           no answer; the upload may or may not have landed
+ *   unsupported          this host does not store files; embedding is correct
+ *   payment-required     the host stores files, but not for this account
+ *   too-large            over the host's cap, refused here or by the host
+ *   unsupported-type     the host will not store this kind of file
+ *   timeout              no answer; the upload may or may not have landed
+ *   privacy-unsupported  the host stored (or would store) the file where others can
+ *                        read it, so a URL from it must not be inserted anywhere
+ *
+ * The single-shot call and the task are the same transport and the same checks; the
+ * task adds an identity so progress, cancel and an explicit retry belong to one
+ * upload. `upload-task.js` holds both.
  */
 
-import { hostMeta } from "../core/host-meta.js";
-import { saveToken } from "../core/host-attrs.js";
-
-const UPLOAD_PATH = "/_/upload";
-const UPLOAD_TIMEOUT_MS = 120000;
-
-function result(ok, msg, msgType, code, uploads = []) {
-  return { ok, msg, msgType, code, uploads };
-}
-
-function emit(name, detail) {
-  if (typeof document === "undefined") return;
-  document.dispatchEvent(new CustomEvent(`clay:upload-${name}`, { detail }));
-}
+import { checkRequiredAccess, runUpload, start, uploadParticipant } from "./upload-task.js";
 
 /**
  * Store one file on the host.
@@ -47,145 +46,27 @@ function emit(name, detail) {
  * @param {Object} [options]
  * @param {function} [options.onProgress] - ({loaded, total, percent})
  * @param {AbortSignal} [options.signal]
+ * @param {?string} [options.requiredAccess] - "document", "local" or "document-or-local":
+ *   the access the host must promise before the bytes are sent and report afterwards
  * @returns {Promise<{ok: boolean, msg: string, msgType: string, code: ?string, uploads: Array}>}
  */
-export async function upload(file, { onProgress, signal } = {}) {
-  if (!file) return result(false, "No file to upload", "error", "bad-request");
-
-  const meta = await hostMeta();
-  if (!meta.extensions.includes("upload")) {
-    // Not an error. This is a document open from a plain file server, or a bare
-    // core host, and embedding is what it should do.
-    return result(false, "This host does not store uploaded files", "skipped", "unsupported");
-  }
-  // The host stores files, but not for this caller on this document: the spec withholds the
-  // document's upload block by omission, and a client that finds none does not upload. Not
-  // "unsupported", because embedding instead would route around the host's own decision.
-  if (!meta.document?.upload) {
-    return result(false, "You can't add files to this document", "error", "forbidden");
-  }
-
-  // The one local pre-check the spec asks for, and the only reason `maxBytes` is
-  // published: refusing a 40 MB photo here costs nothing, and sending it to be
-  // refused costs the person the whole upload first. Deliberately the ONLY thing
-  // decided locally. `document.upload.allowed` is not read as a veto: it can be
-  // stale (a plan upgraded in another tab, a share link granted since load), and
-  // the host answers the real reason with its own code on the request itself.
-  const cap = meta.document?.upload?.maxBytes;
-  if (typeof cap === "number" && cap > 0 && file.size > cap) {
-    return result(false, `That file is larger than this host accepts (${cap} bytes)`, "error", "too-large");
-  }
-
-  return send(file, { onProgress, signal });
+export function upload(file, { requiredAccess, ...rest } = {}) {
+  // A misspelt requirement is the caller's bug, not the host's answer, and it throws
+  // here — before a request exists — rather than resolving as a failure the caller
+  // might read as "the host refused" and embed around.
+  checkRequiredAccess(requiredAccess);
+  return runUpload(file, { ...rest, requiredAccess });
 }
 
-function send(file, { onProgress, signal }) {
-  return new Promise((resolve) => {
-    const token = saveToken();
-    const path = token ? `${UPLOAD_PATH}/${token}` : UPLOAD_PATH;
-    // Absolute against the real origin, never left relative: a <base href> in the
-    // authored document would otherwise redirect this request, and the
-    // per-document token in its path, to an origin the document chose.
-    const url = new URL(path, window.location.origin).href;
-
-    // XMLHttpRequest for one reason: fetch cannot report upload progress. A photo
-    // over a phone connection is the case this whole capability is for, and a
-    // picker that sits there saying nothing for twenty seconds reads as broken.
-    const xhr = new XMLHttpRequest();
-    let settled = false;
-
-    const finish = (value) => {
-      if (settled) return;
-      settled = true;
-      clearTimeout(timeoutId);
-      if (signal) signal.removeEventListener("abort", onAbort);
-      resolve(value);
-    };
+// The shared row (upload-ui.js) loads on first use, so a document that never uploads
+// never downloads it, and clay.upload(file) keeps working untouched.
+upload.mount = async (task, container) => (await import("./upload-ui.js")).mount(task, container);
 
-    const fail = (msg, msgType, code) => {
-      emit("error", { msg, code });
-      finish(result(false, msg, msgType, code));
-    };
-
-    const timeoutId = setTimeout(() => {
-      xhr.abort();
-      // A timeout is not evidence the upload failed. The bytes may well have
-      // landed, so this says "we do not know" rather than asserting a failure,
-      // and the content-hash name makes the retry idempotent if the caller resends.
-      fail("Upload timed out", "unknown", "timeout");
-    }, UPLOAD_TIMEOUT_MS);
-
-    const onAbort = () => {
-      xhr.abort();
-      finish(result(false, "Upload cancelled", "skipped", "aborted"));
-    };
-    if (signal) {
-      if (signal.aborted) return onAbort();
-      signal.addEventListener("abort", onAbort);
-    }
-
-    xhr.upload.addEventListener("progress", (event) => {
-      if (!event.lengthComputable) return;
-      const detail = {
-        loaded: event.loaded,
-        total: event.total,
-        percent: Math.round((event.loaded / event.total) * 100)
-      };
-      emit("progress", detail);
-      if (onProgress) {
-        try { onProgress(detail); } catch (_) { /* a caller's drawing must not kill the upload */ }
-      }
-    });
-
-    xhr.addEventListener("load", () => {
-      let body = {};
-      try { body = JSON.parse(xhr.responseText || "{}"); } catch (_) { body = {}; }
-
-      if (xhr.status >= 200 && xhr.status < 300) {
-        const uploads = Array.isArray(body.uploads) ? body.uploads : [];
-        if (!uploads.length || typeof uploads[0]?.url !== "string") {
-          return fail("The host accepted the file but did not say where it put it", "error", "bad-response");
-        }
-        emit("done", { uploads });
-        return finish(result(true, body.msg ?? "Uploaded", body.msgType || "success", body.code ?? null, uploads));
-      }
-
-      // The host's own code when it sent one, so a caller branches on the reason
-      // rather than pattern-matching a message. Falling back to the status keeps
-      // a host that answers a bare 413 readable.
-      const code = body.code || STATUS_CODES[xhr.status] || "error";
-      return fail(body.msg || `Upload failed (${xhr.status})`, "error", code);
-    });
-
-    xhr.addEventListener("error", () => fail("Upload failed", "error", "network"));
-    xhr.addEventListener("abort", () => finish(result(false, "Upload cancelled", "skipped", "aborted")));
-
-    xhr.open("POST", url, true);
-    // The exact equivalent of the save lane's `credentials: 'omit'` in the case
-    // where the two differ: a sandboxed document is cross-origin to its own host,
-    // and asking for credentials there needs Access-Control-Allow-Credentials
-    // back, which a token-minting host must never send.
-    xhr.withCredentials = false;
-    xhr.setRequestHeader("Document-URL", window.location.href);
-
-    // FormData, so the file streams as bytes. No FileReader and no base64: a
-    // whole-file string costs a third more bytes and holds the entire file in
-    // memory twice.
-    const form = new FormData();
-    form.append("file", file, file.name || "upload");
-
-    emit("start", { name: file.name || null, size: file.size ?? null });
-    xhr.send(form);
-  });
-}
+// On the same function, so anything holding `clay.upload` has both and every existing
+// `clay.upload(file)` call keeps working untouched.
+upload.start = start;
 
-const STATUS_CODES = {
-  402: "payment-required",
-  413: "too-large",
-  415: "unsupported-type",
-  401: "unauthorized",
-  403: "forbidden",
-  404: "not-found"
-};
+// The factory lives with the transport it gates, and this is the path a plan resolves.
+export { uploadParticipant as modeParticipant };
 
 export default upload;

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

@@ -0,0 +1,32 @@
+export const DOWNLOAD_URL = "/_/download?as=htmlclay";
+
+export function editOriginal() {
+  const url = new URL(window.location.href);
+  url.searchParams.set("editmode", "true");
+  window.location.href = url.toString();
+  return true;
+}
+
+export function backToDraft() {
+  const url = new URL(window.location.href);
+  url.searchParams.delete("editmode");
+  window.location.href = url.toString();
+  return true;
+}
+
+export function inertVisitorDrafts() {
+  return {
+    active: false,
+    slot: null,
+    key: null,
+    hasDraft: () => false,
+    restored: () => null,
+    saveNow: () => false,
+    reset: () => false,
+    onRestore: () => false,
+    editOriginal,
+    backToDraft,
+    downloadUrl: () => DOWNLOAD_URL,
+    source: null,
+  };
+}

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

@@ -1,5 +1,6 @@
 import { INTRO_CSS } from "./intro-style.js";
 import { announceBottomUi } from "./bottom-ui.js";
+import { bootPhase } from "../../core/boot-phase.js";
 
 export const COPY = {
   close: "Hide this introduction",
@@ -45,7 +46,7 @@ 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 (window.location.hash) return null;
+    if (bootPhase.servedHash) return null;
     if (window.matchMedia && window.matchMedia("print").matches) return null;
   }
   return mount({ memory, template, appName });

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

@@ -173,6 +173,9 @@ export function mountOwnerChip() {
   document.addEventListener("pointerup", lift, true);
   window.addEventListener("hashchange", 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;
 
   return chip;
 }

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

@@ -1,4 +1,3 @@
-import { PROMPT_CSS } from "./prompt-style.js";
 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";
@@ -24,8 +23,9 @@ const ASIDE = `<aside class="hcp" id="hcp" hidden aria-label="Download this app"
   </div>
 </aside>`;
 
-export function mountPrompt({ memory, appName, link }) {
+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>`);
   }
   if (!document.getElementById("hcp")) document.body.insertAdjacentHTML("beforeend", ASIDE);

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

@@ -0,0 +1,85 @@
+import { isEditMode, isOwner } from "../core/is-edit-mode.js";
+import { hasSaveToken } from "../core/host-attrs.js";
+import { draftSlot } from "../core/draft-mode.js";
+import { inertVisitorDrafts } from "./visitor-drafts/inert.js";
+
+const slot = draftSlot();
+const rulesTag = document.querySelector('script[data-rules-name~="api"]');
+
+// The one chip, the mounting on its way to it, and the session that asked: the boot and a
+// mode lease both ask, so a second ask joins the first, and a chip that arrives for a
+// session that has ended is taken down at once.
+let mounted = null;
+let mounting = null;
+let sessions = 0;
+
+const chipAllowed = () => isOwner && isEditMode && !hasSaveToken() && !!slot && !!rulesTag;
+
+function mountChip() {
+  if (mounted) return Promise.resolve(mounted);
+  if (!mounting) {
+    const asked = sessions;
+    mounting = import("./visitor-drafts/owner-chip.js")
+      .then(({ mountOwnerChip }) => {
+        const chip = mountOwnerChip() || document.getElementById("clay-owner");
+        if (asked === sessions) {
+          mounted = chip;
+          return chip;
+        }
+        chip?.liftOff?.();
+        chip?.remove();
+        return null;
+      })
+      .finally(() => { mounting = null; });
+  }
+  return mounting;
+}
+
+function unmountChip() {
+  sessions += 1;
+  mounted?.liftOff?.();
+  mounted?.remove();
+  mounted = null;
+  document.getElementById("clay-owner-vars")?.remove();
+}
+
+if (!slot || !rulesTag) {
+  const missing = [];
+  if (!slot) missing.push('a visitor-drafts="<slot>" attribute on <html>');
+  if (!rulesTag) missing.push('a <script data-rules-name~="api"> rules tag');
+  console.warn(`visitor-drafts: this page keeps no draft (missing ${missing.join(" and ")})`);
+}
+
+const ownerChip = chipAllowed() ? mountChip() : Promise.resolve(null);
+
+export const ready = ownerChip;
+
+/**
+ * The owner chip as a mode lease: `enable` mounts it, `initial: true` adopts the one the
+ * boot armed and mounts nothing, and `dispose` (after the barrier) takes the chip and the
+ * room it published down. The chip holds no input anybody has committed, so `quiesce` and
+ * `resume` leave it exactly where it is.
+ */
+export function draftsOwnerParticipant() {
+  return {
+    id: "clay:drafts-owner",
+    order: 400,
+    prepare(context = {}) {
+      return {
+        enable() {
+          if (context.initial === true) return;
+          if (chipAllowed()) mountChip();
+        },
+        quiesce() {},
+        resume() {},
+        dispose() {
+          unmountChip();
+        },
+      };
+    },
+  };
+}
+
+export { draftsOwnerParticipant as modeParticipant };
+
+export const visitorDrafts = inertVisitorDrafts();