@panphora/clayjs 1.12.1 → 1.13.0

package/src/page/schema.js

@@ -0,0 +1,157 @@
+// The page plugin's ProseMirror schema.
+//
+// Every top-level node is one block of the live record (src/page/model.js): it
+// carries `id` (its key in the store), `pos` (its fractional order key) and
+// `parent` (the toggle it sits inside, or null). The document is flat on
+// purpose: lists are items with `kind` and `indent`, a toggle's body is the
+// blocks naming it as parent. Two people editing two items of one list then
+// touch two keys, never one shared array.
+//
+// toDOM here draws the editing surface. The saved, readable HTML is the
+// projection's job, not this file's.
+import { model } from "../vendor/prosemirror.vendor.js";
+
+const block = { id: { default: null }, pos: { default: null }, parent: { default: null } };
+const ref = (n, extra = {}) => ({ "data-id": n.attrs.id, ...extra });
+
+export const schema = new model.Schema({
+  nodes: {
+    doc: { content: "block+" },
+
+    paragraph: {
+      group: "block",
+      content: "inline*",
+      attrs: block,
+      toDOM: (n) => ["p", ref(n), 0],
+    },
+    heading: {
+      group: "block",
+      content: "inline*",
+      defining: true,
+      attrs: { ...block, level: { default: 2 } },
+      toDOM: (n) => [`h${n.attrs.level}`, ref(n), 0],
+    },
+    list_item: {
+      group: "block",
+      content: "inline*",
+      attrs: {
+        ...block,
+        kind: { default: "bullet" },
+        indent: { default: 0 },
+        checked: { default: false },
+        owner: { default: null },
+        due: { default: null },
+      },
+      toDOM: (n) => ["div", ref(n, {
+        class: "page-li",
+        "data-kind": n.attrs.kind,
+        "data-indent": String(n.attrs.indent),
+        "data-checked": n.attrs.checked ? "true" : "false",
+      }), 0],
+    },
+    callout: {
+      group: "block",
+      content: "inline*",
+      attrs: block,
+      toDOM: (n) => ["aside", ref(n, { class: "page-callout" }), 0],
+    },
+    code_block: {
+      group: "block",
+      content: "text*",
+      marks: "",
+      code: true,
+      defining: true,
+      attrs: { ...block, lang: { default: "" } },
+      toDOM: (n) => ["pre", ref(n, { "data-lang": n.attrs.lang }), ["code", 0]],
+    },
+    toggle: {
+      group: "block",
+      content: "inline*",
+      attrs: { ...block, open: { default: false } },
+      toDOM: (n) => ["div", ref(n, { class: "page-toggle", "data-open": n.attrs.open ? "true" : "false" }), 0],
+    },
+    divider: {
+      group: "block",
+      atom: true,
+      attrs: block,
+      toDOM: (n) => ["hr", ref(n)],
+    },
+    image: {
+      group: "block",
+      atom: true,
+      draggable: true,
+      attrs: { ...block, src: { default: "" }, alt: { default: "" }, caption: { default: "" }, width: { default: null } },
+      toDOM: (n) => ["figure", ref(n), ["img", { src: n.attrs.src, alt: n.attrs.alt }], ["figcaption", n.attrs.caption]],
+    },
+    table: {
+      group: "block",
+      content: "table_row+",
+      isolating: true,
+      attrs: { ...block, cols: { default: {} }, sort: { default: null } },
+      toDOM: (n) => ["table", ref(n), ["tbody", 0]],
+    },
+    table_row: {
+      content: "table_cell+",
+      attrs: { id: { default: null }, pos: { default: null } },
+      toDOM: (n) => ["tr", ref(n), 0],
+    },
+    table_cell: {
+      content: "text*",
+      marks: "",
+      isolating: true,
+      attrs: { col: { default: null } },
+      toDOM: (n) => ["td", { "data-col": n.attrs.col }, 0],
+    },
+    chart: {
+      group: "block",
+      atom: true,
+      attrs: {
+        ...block,
+        source: { default: null },
+        kind: { default: "line" },
+        x: { default: null },
+        series: { default: [] },
+        title: { default: "" },
+        highlight: { default: null },
+      },
+      toDOM: (n) => ["figure", ref(n, { "data-type": "chart" })],
+    },
+    board: {
+      group: "block",
+      atom: true,
+      attrs: { ...block, columns: { default: {} }, cards: { default: {} } },
+      toDOM: (n) => ["section", ref(n, { "data-type": "board" })],
+    },
+    tool: {
+      group: "block",
+      atom: true,
+      attrs: { ...block, artifact: { default: null }, rev: { default: null }, state: { default: {} } },
+      toDOM: (n) => ["section", ref(n, { "data-type": "tool" })],
+    },
+    preserved: {
+      group: "block",
+      atom: true,
+      attrs: { ...block, html: { default: "" } },
+      toDOM: (n) => ["div", ref(n, { "data-type": "preserved" })],
+    },
+
+    text: { group: "inline" },
+    hard_break: {
+      group: "inline",
+      inline: true,
+      selectable: false,
+      toDOM: () => ["br"],
+    },
+  },
+  marks: {
+    strong: { toDOM: () => ["strong", 0] },
+    em: { toDOM: () => ["em", 0] },
+    strike: { toDOM: () => ["s", 0] },
+    code: { toDOM: () => ["code", 0] },
+    link: {
+      attrs: { href: {} },
+      inclusive: false,
+      toDOM: (m) => ["a", { href: m.attrs.href }, 0],
+    },
+  },
+});

package/src/plugins/live.js

@@ -61,10 +61,17 @@ function unsavedLiveChanges() {
   return false;
 }
 
+// Callbacks waiting for the file to catch up, run after every checkpoint save
+// and every time the room reports a landing.
+const fileWaiters = new Set();
+function fileMoved() {
+  for (const fn of [...fileWaiters]) fn();
+}
+
 const checkpoints = createCheckpoints({
   needsSave: unsavedLiveChanges,
   blocked: () => !baselineSettled() || isSaveConflicted() || autosaveIsSuspended(),
-  save: () => savePageForce(),
+  save: () => savePageForce().finally(fileMoved),
   saveNow: () => withKeepalive(true, () => savePageForce()),
 });
 
@@ -124,7 +131,10 @@ function laneOptions(transport) {
     entries,
     onWriter: () => checkpoints.changed(),
     onApplied: liveMoved,
-    onLanded: liveMoved,
+    onLanded: () => {
+      liveMoved();
+      fileMoved();
+    },
     onCheckpoint: () => checkpoints.soon(),
     onLeave: (name, at) => {
       const entry = entries.get(name);
@@ -443,4 +453,41 @@ export function fastLane() {
   return fast;
 }
 
+// The page editor's pause save: checkpoint within ms of now. Only the room's
+// writer saves, so in other tabs this changes nothing.
+export function checkpointWithin(ms) {
+  checkpoints.within(ms);
+}
+
+// Resolves { ok: true } once the file holds every live change this tab knows
+// of now, or { ok: false, code: "timeout" }. The writer saves as soon as it
+// can; another tab waits for the writer's save to land.
+export function requestCheckpoint({ timeoutMs = 10_000 } = {}) {
+  const target = new Map();
+  for (const [name, entry] of entries) {
+    if (entry.store.ephemeral) continue;
+    target.set(name, entry.store.handle.status.mode === "fast" ? entry.last ?? 0 : null);
+  }
+  const reached = () => [...target].every(([name, last]) => {
+    const entry = entries.get(name);
+    if (!entry) return true;
+    if (last === null || entry.store.handle.status.mode !== "fast") return entry.store.pending.length === 0;
+    return (entry.landed ?? 0) >= last;
+  });
+  if (reached()) return Promise.resolve({ ok: true });
+  return new Promise((resolve) => {
+    const finish = (result) => {
+      clearTimeout(timer);
+      fileWaiters.delete(check);
+      resolve(result);
+    };
+    const check = () => {
+      if (reached()) finish({ ok: true });
+    };
+    const timer = setTimeout(() => finish({ ok: false, code: "timeout" }), timeoutMs);
+    fileWaiters.add(check);
+    if (isEditMode && (!fast || fast.isWriter())) checkpoints.soon();
+  });
+}
+
 export default live;

package/src/plugins/message.js

@@ -0,0 +1,159 @@
+/**
+ * message.js — send a visitor's form to the document's owner (the host's `/_/message`).
+ *
+ *   <form message-form="Thanks, I'll reply soon"> ... </form>
+ *   const result = await clay.message.send({ email, note });   // { ok, error }
+ *
+ * Any form carrying `message-form`, or whose `action` is `/_/message`, is sent by
+ * script on submit: its fields as JSON, with the `Document-URL` header so the host
+ * knows whose document it came from. The form resets, the attribute's text shows
+ * as a toast, and `clay:message-sent` or `clay:message-failed` fires on the form.
+ * Cancel that event to draw your own confirmation instead of the toast.
+ *
+ * The bot check. The host refuses a message that carries no token from
+ * `GET /_/form-token`, so a bot that posts without running the page sends nothing.
+ * The token is fetched the first time the visitor focuses or types inside a
+ * message form (an untouched form costs no request), and again at submit when it
+ * is missing or old. Each token is used once. `formSignals` counts trusted
+ * events and reads `navigator.webdriver`; the host only logs it.
+ *
+ * `send` never rejects, matching upload: one result shape from every exit.
+ */
+
+import getDataFromForm from "../dom/form-data.js";
+
+const MESSAGE_PATH = "/_/message";
+const TOKEN_PATH = "/_/form-token";
+// The host accepts a token for two hours; refetch well before that.
+const TOKEN_MAX_AGE_MS = 90 * 60 * 1000;
+
+const TRUSTED_EVENTS = ["click", "keydown", "pointerdown", "touchstart", "input", "change"];
+const trusted = Object.fromEntries(TRUSTED_EVENTS.map((type) => [type, 0]));
+
+let token = null;
+let tokenAt = 0;
+let tokenRequest = null;
+const sending = new WeakSet();
+
+function fetchToken() {
+  if (!tokenRequest) {
+    tokenRequest = fetch(TOKEN_PATH, { credentials: "omit", cache: "no-store" })
+      .then((res) => (res.ok ? res.json() : null))
+      .then((body) => {
+        if (body && typeof body.token === "string") {
+          token = body.token;
+          tokenAt = Date.now();
+        }
+      })
+      .catch(() => {})
+      .finally(() => {
+        tokenRequest = null;
+      });
+  }
+  return tokenRequest;
+}
+
+async function takeToken() {
+  if (!token || Date.now() - tokenAt > TOKEN_MAX_AGE_MS) await fetchToken();
+  const taken = token;
+  token = null;
+  return taken;
+}
+
+function signals() {
+  return { webdriver: navigator.webdriver === true, trusted: { ...trusted } };
+}
+
+function isMessageForm(form) {
+  if (!(form instanceof HTMLFormElement)) return false;
+  if (form.hasAttribute("message-form")) return true;
+  const action = form.getAttribute("action");
+  if (!action) return false;
+  try {
+    const url = new URL(action, window.location.href);
+    return url.origin === window.location.origin && url.pathname === MESSAGE_PATH;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Send one message to the document's owner.
+ *
+ * @param {Object} data - the fields, as the owner should read them
+ * @returns {Promise<{ok: boolean, error: ?string}>}
+ */
+export async function send(data = {}) {
+  const result = await post(data);
+  // The host refused the token itself (it restarted, or the token expired): one fresh token,
+  // one more try, and the visitor never knows.
+  if (result.code === "form-token") return post(data);
+  return result;
+}
+
+async function post(data) {
+  const formToken = await takeToken();
+  let res;
+  try {
+    res = await fetch(MESSAGE_PATH, {
+      method: "POST",
+      // A signed-in owner testing their own form must not trip the host's CSRF
+      // guard, and the message never needs the visitor's cookies.
+      credentials: "omit",
+      headers: { "Content-Type": "application/json", "Document-URL": window.location.href },
+      body: JSON.stringify({ ...data, formToken, formSignals: signals() }),
+    });
+  } catch {
+    return { ok: false, error: "The message couldn't be sent. Check your connection and try again." };
+  }
+  const body = await res.json().catch(() => null);
+  // A host without the message endpoint can answer any path with its HTML page at 200.
+  if (res.ok) return body ? { ok: true, error: null } : { ok: false, error: "This page can't send messages." };
+  if (!body) return { ok: false, error: `The message couldn't be sent (${res.status}).` };
+  const error = body.error || body.msg || `The message couldn't be sent (${res.status}).`;
+  return body.code === "form-token" ? { ok: false, error, code: "form-token" } : { ok: false, error };
+}
+
+async function onSubmit(event) {
+  const form = event.target;
+  if (event.defaultPrevented || !isMessageForm(form)) return;
+  event.preventDefault();
+  if (sending.has(form)) return;
+  sending.add(form);
+  try {
+    const result = await send(getDataFromForm(form));
+    if (result.ok) form.reset();
+    const outcome = new CustomEvent(result.ok ? "clay:message-sent" : "clay:message-failed", {
+      bubbles: true,
+      cancelable: true,
+      detail: result,
+    });
+    if (!form.dispatchEvent(outcome)) return;
+    const toast = window.clay?.toast;
+    if (!toast) return;
+    if (result.ok) toast(form.getAttribute("message-form") || "Sent", "success");
+    else toast(result.error, "error");
+  } finally {
+    sending.delete(form);
+  }
+}
+
+function warmToken(event) {
+  if (token || tokenRequest) return;
+  const form = event.target?.closest?.("form");
+  if (form && isMessageForm(form)) fetchToken();
+}
+
+if (typeof document !== "undefined") {
+  for (const type of TRUSTED_EVENTS) {
+    document.addEventListener(type, (event) => {
+      if (event.isTrusted) trusted[type]++;
+    }, { capture: true, passive: true });
+  }
+  document.addEventListener("focusin", warmToken, true);
+  document.addEventListener("input", warmToken, true);
+  document.addEventListener("submit", onSubmit);
+}
+
+export const message = { send };
+export default message;

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

@@ -91,6 +91,8 @@ export const PROMPT_CSS = `.hcp {
 .hcp .hcp-btn--primary:hover { background: color-mix(in srgb, var(--hcp-ink), var(--hcp-ground) 12%); color: var(--hcp-ground); }
 
 .hcp-dock { display: flex; align-items: stretch; box-shadow: 0 6px 16px -8px rgba(43, 36, 27, .45); }
+.hcp:not([data-hcp-arrived]) .hcp-dock { animation: hcp-arrive 2.4s cubic-bezier(.16, 1, .3, 1) 3s both; }
+@keyframes hcp-arrive { from { transform: translateX(calc(100% + 48px)); } to { transform: none; } }
 .hcp-tab { font-size: 13.5px; padding: 0 12px 0 10px; }
 .hcp-tab svg { color: var(--hcp-brass); }
 .hcp-dock .hcp-x {
@@ -151,22 +153,7 @@ export const PROMPT_CSS = `.hcp {
 .hcp-file small { display: block; font-size: 12px; color: var(--hcp-muted); line-height: 1.4; }
 .hcp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
 .hcp-actions .hcp-btn--primary { flex: 1 1 auto; }
-.hcp-signup { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hcp-line); }
-.hcp-signup label { display: block; font-size: 13px; line-height: 1.45; color: var(--hcp-ink-2); margin-bottom: 8px; }
-.hcp-signup-row { display: flex; gap: 8px; }
-.hcp-signup-row[hidden] { display: none; }
-.hcp-signup input[type="email"] {
-  flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; margin: 0;
-  font: 14px var(--hcp-sans); color: var(--hcp-ink); background: var(--hcp-surface);
-  border: 1px solid var(--hcp-line-2); border-radius: 0; box-shadow: none;
-}
-.hcp-signup input[type="email"]:focus-visible { outline: 2px solid var(--hcp-brass); outline-offset: 1px; }
-.hcp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
-.hcp-msg { margin-top: 8px; font-size: 13px; color: var(--hcp-ink-2); }
-.hcp[data-hcp-reason="error"] .hcp-signup { display: none; }
-@media (max-width: 360px) { .hcp-signup-row { flex-direction: column; } }
-.hcp-foot { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
-.hcp-foot small { font-size: 12px; color: var(--hcp-muted); }
+.hcp-foot { margin-top: 12px; display: flex; justify-content: flex-end; }
 .hcp-quiet {
   min-height: 0; border-radius: 0;
   font-size: 12px; color: var(--hcp-muted); cursor: pointer;
@@ -188,6 +175,8 @@ export const PROMPT_CSS = `.hcp {
 @media (prefers-reduced-motion: reduce) {
   .hcp { transition: none; }
   .hcp[data-hcp-state="card"] .hcp-card { animation: none; }
+  .hcp:not([data-hcp-arrived]) .hcp-dock { animation: hcp-arrive-fade .4s ease 3s both; }
+  @keyframes hcp-arrive-fade { from { opacity: 0; } to { opacity: 1; } }
   .hcp-btn:active > span { translate: none; }
 }
 @media (forced-colors: active) {

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

@@ -1,11 +1,6 @@
 import { PROMPT_CSS } from "./prompt-style.js";
 import { announceBottomUi, bottomBarHeight } from "./bottom-ui.js";
 
-export const SIGNUP_COPY = {
-  thanks: "Thanks. Check your email for a link to confirm.",
-  failed: "That didn't go through. Check the address and try again.",
-};
-
 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";
 
 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">
@@ -18,18 +13,10 @@ const ASIDE = `<aside class="hcp" id="hcp" hidden aria-label="Download this app"
       <svg width="20" height="20" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"/></svg>
       <div><b class="hcp-name" data-hcp-name>This app</b><small>One file with the whole app and your work in it</small></div>
     </div>
-    <p class="hcp-body">Open it with HTML Clay, a free app for Mac, Windows and Linux. It opens the file in a window and saves every change into it, so your work stays on your computer.</p>
     <div class="hcp-actions">
       <a class="hcp-btn hcp-btn--primary" data-hcp-link href="/_/download?as=htmlclay"><span><svg width="16" height="16" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"/></svg>Download free</span></a>
-      <button type="button" class="hcp-btn" data-hcp="minimize"><span>Not now</span></button>
     </div>
-    <form class="hcp-signup" data-hcp-signup novalidate>
-      <label for="hcp-email">I make one of these about every two weeks. Get the next one by email.</label>
-      <div class="hcp-signup-row"><input id="hcp-email" type="email" autocomplete="email" required placeholder="you@example.com"><button type="submit" class="hcp-btn"><span>Send me the next one</span></button></div>
-      <input class="hcp-hp" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
-      <p class="hcp-msg" role="status" hidden></p>
-    </form>
-    <div class="hcp-foot"><small>Free, and the file is yours to keep.</small><button type="button" class="hcp-quiet" data-hcp="dismiss">Don&rsquo;t show again</button></div>
+    <div class="hcp-foot"><button type="button" class="hcp-quiet" data-hcp="dismiss">Don&rsquo;t show again</button></div>
   </section>
   <div class="hcp-dock">
     <button type="button" class="hcp-btn hcp-tab" data-hcp="open" aria-controls="hcp-card" aria-expanded="false" aria-label="This app is free to keep"><span><svg width="16" height="16" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"/></svg><span class="hcp-tab__label">This app is free to keep</span></span></button>
@@ -37,7 +24,7 @@ const ASIDE = `<aside class="hcp" id="hcp" hidden aria-label="Download this app"
   </div>
 </aside>`;
 
-export function mountPrompt({ memory, appName, link, tag, source }) {
+export function mountPrompt({ memory, appName, link }) {
   if (!document.getElementById("hcp-style")) {
     document.head.insertAdjacentHTML("beforeend", `<link rel="stylesheet" clay="editor-ui" href="${FONT_HREF}">\n<style clay="editor-ui" id="hcp-style">${PROMPT_CSS}</style>`);
   }
@@ -55,31 +42,6 @@ export function mountPrompt({ memory, appName, link, tag, source }) {
   const linkEl = root.querySelector("[data-hcp-link]");
   linkEl.href = link;
 
-  const signup = root.querySelector("[data-hcp-signup]");
-  if (signup) {
-    const email = signup.querySelector("#hcp-email");
-    const honey = signup.querySelector(".hcp-hp");
-    const row = signup.querySelector(".hcp-signup-row");
-    const message = signup.querySelector(".hcp-msg");
-    signup.addEventListener("submit", (event) => {
-      event.preventDefault();
-      fetch("/_/newsletter/subscribe", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "same-origin",
-        body: JSON.stringify({ email: email.value.trim(), tags: [tag], source, website: honey.value }),
-      }).then((response) => {
-        if (!response.ok) throw new Error("signup failed");
-        row.hidden = true;
-        message.textContent = SIGNUP_COPY.thanks;
-        message.hidden = false;
-      }).catch(() => {
-        message.textContent = SIGNUP_COPY.failed;
-        message.hidden = false;
-      });
-    });
-  }
-
   if (appName) root.querySelector("[data-hcp-name]").textContent = appName;
 
   const tab = root.querySelector("[data-hcp=open]");
@@ -88,7 +50,7 @@ export function mountPrompt({ memory, appName, link, tag, source }) {
     root.setAttribute("data-hcp-state", state);
     if (reason) root.setAttribute("data-hcp-reason", reason);
     tab.setAttribute("aria-expanded", state === "card" ? "true" : "false");
-    if (state === "card") { mem.shown = true; memory.save(); }
+    if (state === "card") { mem.shown = true; memory.save(); root.setAttribute("data-hcp-arrived", ""); }
     lift();
   }
 
@@ -176,6 +138,9 @@ export function mountPrompt({ memory, appName, link, tag, source }) {
       mem.downloaded = true; mem.shown = true; memory.save();
     }
   });
+  root.addEventListener("animationend", (e) => {
+    if (e.animationName === "hcp-arrive" || e.animationName === "hcp-arrive-fade") root.setAttribute("data-hcp-arrived", "");
+  });
   root.addEventListener("keydown", (e) => {
     if (e.key === "Escape" && root.getAttribute("data-hcp-state") === "card") { set("mini"); tab.focus(); }
   });

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

@@ -14,8 +14,3 @@ export function downloadUrl(src, loc = window.location) {
   return `/_/download${path}?as=htmlclay${src ? `&src=${encodeURIComponent(src)}` : ""}`;
 }
 
-export function signupTag(slot, template) {
-  const explicit = template?.getAttribute("signup-tag");
-  const name = explicit || slot.replace(/-v\d+$/, "");
-  return `app-${name}`.slice(0, 50);
-}

package/src/plugins/visitor-drafts.js

@@ -3,7 +3,7 @@ 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 { createUiMemory } from "./visitor-drafts/ui-memory.js";
-import { rememberSource, downloadUrl, signupTag } from "./visitor-drafts/source.js";
+import { rememberSource, downloadUrl } from "./visitor-drafts/source.js";
 import { mountPrompt } from "./visitor-drafts/prompt.js";
 import { mountIntro } from "./visitor-drafts/intro.js";
 import { mountOwnerChip } from "./visitor-drafts/owner-chip.js";
@@ -30,7 +30,7 @@ if (isDraftMode && slot && rulesTag) {
   const appName = document.querySelector('meta[name="application-name"]')?.content?.trim() || document.title.split(/:|\s\|\s/)[0].trim() || "This app";
   const template = document.querySelector("template[visitor-intro]");
   const start = () => {
-    const prompt = mountPrompt({ memory, appName, link: downloadLink, tag: signupTag(slot, template), source });
+    const prompt = mountPrompt({ memory, appName, link: downloadLink });
     mountIntro({ memory, template, appName, hadDraft: result.hadDraft });
     if (isOwner) mountOwnerChip();
     document.addEventListener("clay:drafts-store-failed", () => prompt.showError());