@panphora/clayjs 1.11.2 → 1.12.0

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

@@ -0,0 +1,177 @@
+import { PROMPT_CSS } from "./prompt-style.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";
+
+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="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3 12h10v2H3z"/></svg></button>
+    <div class="hcp-kicker">Free download</div>
+    <h2 class="hcp-title" id="hcp-title"><span data-hcp-for="use">Your numbers are saved in this browser only.</span><span data-hcp-for="open">This app is free to keep.</span><span data-hcp-for="return">Your numbers are saved in this browser only.</span><span data-hcp-for="error">Your work isn't being saved in this browser.</span></h2>
+    <p class="hcp-body"><span data-hcp-for="open">Download it as one file and use it on your computer, no account needed.</span><span data-hcp-for="use">Download the file to keep them on your computer for good.</span><span data-hcp-for="return">Download the file to keep them on your computer for good.</span><span data-hcp-for="error">Storage is full or turned off here. Download the file to keep what you've done.</span></p>
+    <div class="hcp-file">
+      <svg width="26" height="30" viewBox="0 0 26 30" fill="none" aria-hidden="true"><path d="M2 1h15l7 7v21H2z" fill="var(--hcp-surface)" stroke="currentColor" stroke-width="2"/><path d="M17 1v7h7" stroke="currentColor" stroke-width="2"/><path d="M7 15h12M7 19h12M7 23h8" stroke="var(--hcp-muted)" stroke-width="2"/></svg>
+      <div><b class="hcp-name" data-hcp-name>This app</b><small>One file with the whole app and your numbers 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 numbers stay 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 16 16" fill="currentColor" aria-hidden="true"><path d="M7 1h2v8.6l2.8-2.8 1.4 1.4L8 13.4 2.8 8.2l1.4-1.4L7 9.6zM2 13h12v2H2z"/></svg>Download free</span></a>
+      <button type="button" class="hcp-btn" data-hcp="minimize"><span>Not now</span></button>
+    </div>
+    <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>
+  </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="18" viewBox="0 0 16 18" fill="none" aria-hidden="true"><path d="M1.5 1h8.5l4.5 4.5V17h-13z" stroke="currentColor" stroke-width="2"/><path d="M10 1v5h4.5" stroke="currentColor" stroke-width="2"/><path d="M8 8v6M5.5 11.5 8 14l2.5-2.5" stroke="currentColor" stroke-width="1.8"/></svg><span class="hcp-tab__label">This app is free to keep</span></span></button>
+    <button type="button" class="hcp-x" data-hcp="dismiss" aria-label="Hide this for good"><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></button>
+  </div>
+</aside>`;
+
+export function mountPrompt({ memory, appName, link, onError }) {
+  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>`);
+  }
+  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;
+  const USES_TO_SHOW = 3;
+  const IDLE_MS = 2500;
+  const TEXTY = /^(INPUT|TEXTAREA|SELECT)$/;
+
+  const linkEl = root.querySelector("[data-hcp-link]");
+  linkEl.href = link;
+
+  if (appName) root.querySelector("[data-hcp-name]").textContent = appName;
+
+  const tab = root.querySelector("[data-hcp=open]");
+  function set(state, reason) {
+    root.hidden = false;
+    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(); }
+    lift();
+  }
+
+  function isHostField(el) {
+    return el && !root.contains(el) && (TEXTY.test(el.tagName) || el.isContentEditable);
+  }
+
+  let timer = null;
+  function maybeShow(reason) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      if (mem.shown || mem.dismissed || root.getAttribute("data-hcp-state") !== "tab") return;
+      const a = document.activeElement;
+      if (isHostField(a)) {
+        const r = a.getBoundingClientRect();
+        const w = Math.min(360, innerWidth - 32);
+        if (innerWidth < 700 || (r.right > innerWidth - w - 32 && r.bottom > innerHeight - 380)) return;
+      }
+      set("card", reason);
+    }, IDLE_MS);
+  }
+
+  const touched = [];
+  function onUse(e) {
+    if (root.contains(e.target) || !isHostField(e.target)) return;
+    if (touched.indexOf(e.target) < 0) touched.push(e.target);
+    mem.uses = Math.max(mem.uses || 0, touched.length);
+    if (!mem.shown) memory.save();
+    if (touched.length >= USES_TO_SHOW) maybeShow("use");
+  }
+
+  function onFocusIn(e) {
+    if (!isHostField(e.target)) return;
+    if (root.getAttribute("data-hcp-state") === "card") set(mem.shown ? "mini" : "tab");
+    if (innerWidth < 700) root.setAttribute("data-hcp-typing", "");
+  }
+  function onFocusOut() {
+    setTimeout(() => { if (!isHostField(document.activeElement)) root.removeAttribute("data-hcp-typing"); }, 50);
+  }
+
+  let liftFrame = 0;
+  function lift() {
+    if (liftFrame) return;
+    liftFrame = requestAnimationFrame(() => {
+      liftFrame = 0;
+      const y = innerHeight - 3, x = innerWidth - 24;
+      let raise = 0;
+      const hits = document.elementsFromPoint ? document.elementsFromPoint(x, y) : [];
+      for (let i = 0; i < hits.length; i++) {
+        for (let el = hits[i]; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+          if (root.contains(el) || el.closest("[data-hcp-preview]")) break;
+          const pos = getComputedStyle(el).position;
+          if (pos === "fixed" || pos === "sticky") { raise = Math.max(raise, Math.ceil(innerHeight - el.getBoundingClientRect().top)); break; }
+        }
+      }
+      root.style.setProperty("--hcp-lift", (raise > 0 && raise < innerHeight / 3 ? raise : 0) + "px");
+    });
+  }
+
+  function downloadCurrent() {
+    const getHTML = window.clay && window.clay.getHTML;
+    if (typeof getHTML !== "function" || typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return false;
+    const segment = location.pathname.split("/").filter(Boolean).pop() || "index.html";
+    const objectUrl = URL.createObjectURL(new Blob([getHTML()], { type: "text/html" }));
+    const a = document.createElement("a");
+    a.href = objectUrl;
+    a.download = segment.replace(/\.html$/, ".htmlclay");
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL?.(objectUrl), 1000);
+    return true;
+  }
+
+  root.addEventListener("click", (e) => {
+    const t = e.target.closest("[data-hcp]");
+    if (t) {
+      const act = t.getAttribute("data-hcp");
+      if (act === "open") { set("card", "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(); }
+        else { mem.dismissed = true; memory.save(); set("dismissed"); }
+      }
+      return;
+    }
+    if (e.target.closest("[data-hcp-link]")) {
+      if (root.getAttribute("data-hcp-reason") === "error") {
+        e.preventDefault();
+        downloadCurrent();
+      }
+      mem.downloaded = true; mem.shown = true; memory.save();
+    }
+  });
+  root.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && root.getAttribute("data-hcp-state") === "card") { set("mini"); tab.focus(); }
+  });
+
+  function showError() { set("card", "error"); }
+  function clearError() {
+    if (root.getAttribute("data-hcp-reason") === "error") root.setAttribute("data-hcp-reason", "use");
+  }
+  function hideForIntro(on) {
+    if (on) root.setAttribute("data-hcp-intro", "");
+    else root.removeAttribute("data-hcp-intro");
+  }
+
+  const api = { set, root, showError, clearError, hideForIntro };
+
+  if (mem.dismissed) { root.setAttribute("data-hcp-state", "dismissed"); return api; }
+
+  document.addEventListener("input", onUse, true);
+  document.addEventListener("change", onUse, true);
+  document.addEventListener("focusin", onFocusIn);
+  document.addEventListener("focusout", onFocusOut);
+  addEventListener("scroll", lift, { passive: true });
+  addEventListener("resize", lift);
+  document.addEventListener("transitionend", lift, true);
+
+  set(mem.shown ? "mini" : "tab");
+  if (!mem.shown && (mem.uses || 0) >= USES_TO_SHOW) maybeShow("return");
+
+  return api;
+}

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

@@ -0,0 +1,21 @@
+const SRC = /^[a-z0-9][a-z0-9-]{0,39}$/;
+
+export function rememberSource(memory, search = window.location.search) {
+  const mem = memory.get();
+  let incoming = null;
+  try { incoming = new URLSearchParams(search).get("src"); } catch {}
+  if (!mem.src && incoming && SRC.test(incoming)) { mem.src = incoming; memory.save(); }
+  return mem.src;
+}
+
+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)}` : ""}`;
+}
+
+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/store.js

@@ -0,0 +1,342 @@
+import { extractData, applyData, engine } from "../../vendor/hyper-html-api-data.vendor.js";
+import { draftSlot, setDraftStoreFailed } from "../../core/draft-mode.js";
+
+export const KEY_PREFIX = "clay:visitor-drafts:";
+export const RECORD_VERSION = 1;
+
+export function safeStorage() {
+  try { return window.localStorage; } catch { return null; }
+}
+
+const isPlain = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+
+function pathParts(label) {
+  const parts = [];
+  for (const match of label.matchAll(/([^.[\]]+)|\[(\d+)\]/g)) {
+    parts.push(match[2] !== undefined ? Number(match[2]) : match[1]);
+  }
+  return parts;
+}
+
+function dropPath(data, label) {
+  const parts = pathParts(label);
+  let node = data;
+  for (let i = 0; i < parts.length - 1; i++) {
+    node = node?.[parts[i]];
+    if (node == null || typeof node !== "object") return;
+  }
+  if (node && typeof node === "object") delete node[parts[parts.length - 1]];
+}
+
+// True when everything `wanted` says is present in `got`. Extra fields in `got`
+// (a rule the draft predates) and key order do not matter.
+export function fitsInto(wanted, got) {
+  if (Array.isArray(wanted)) {
+    return Array.isArray(got) && got.length === wanted.length && wanted.every((item, i) => fitsInto(item, got[i]));
+  }
+  if (isPlain(wanted)) {
+    return isPlain(got) && Object.keys(wanted).every((name) => fitsInto(wanted[name], got[name]));
+  }
+  return wanted === got;
+}
+
+function same(a, b) {
+  return fitsInto(a, b) && fitsInto(b, a);
+}
+
+const hasIds = (rows) => Array.isArray(rows)
+  && rows.every((row) => isPlain(row) && (typeof row.id === "string" || typeof row.id === "number"))
+  && new Set(rows.map((row) => row.id)).size === rows.length;
+
+// Fields a draft predates take the page's current value, matched by row id, so
+// the engine pairs rows by what the visitor saved rather than by position.
+function complete(draft, page, top = false) {
+  if (isPlain(draft) && isPlain(page)) {
+    const out = { ...draft };
+    for (const name of Object.keys(page)) {
+      if (name in draft) out[name] = complete(draft[name], page[name]);
+      else if (!top) out[name] = page[name];
+    }
+    return out;
+  }
+  if (hasIds(draft) && hasIds(page)) {
+    const byId = new Map(page.map((row) => [row.id, row]));
+    return draft.map((row) => (byId.has(row.id) ? complete(row, byId.get(row.id)) : row));
+  }
+  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) {
+  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]);
+      conflict ||= part.conflict;
+      if (part.value !== undefined) value[name] = part.value;
+    }
+    return { value, conflict };
+  }
+  return { value: mine, conflict: true };
+}
+
+function storageFailure(doc, error) {
+  setDraftStoreFailed(true);
+  doc.dispatchEvent(new CustomEvent("clay:drafts-store-failed", { detail: { error } }));
+  const failure = new Error("Couldn't save in this browser. Storage is full or turned off.");
+  failure.code = "draft-storage";
+  return failure;
+}
+
+export function createStore({ doc = document, storage = safeStorage(), now = () => new Date() } = {}) {
+  const slot = draftSlot(doc);
+  const key = KEY_PREFIX + slot;
+  const rules = engine.findRulesIn(doc, "api").rules;
+
+  let lastRaw = null;
+  let base = null;
+  let unparked = null;
+  let stopped = false;
+
+  function getRaw() {
+    try { return storage ? storage.getItem(key) : null; } catch { return null; }
+  }
+
+  function parse(raw) {
+    try {
+      const parsed = JSON.parse(raw);
+      if (isPlain(parsed) && parsed.v === RECORD_VERSION && isPlain(parsed.data)) return parsed;
+    } catch {}
+    return null;
+  }
+
+  function read() {
+    const raw = getRaw();
+    if (raw == null) return null;
+    return { raw, record: parse(raw) };
+  }
+
+  function live() {
+    return extractData(doc, rules);
+  }
+
+  // What a save would store right now: persisted controls keep typing in their
+  // live value, which only the save capture copies into the markup.
+  function captured() {
+    const getHTML = window.clay?.getHTML;
+    if (typeof getHTML !== "function") return live();
+    return extractData(new DOMParser().parseFromString(getHTML.call(window.clay), "text/html"), rules);
+  }
+
+  function storedKeys() {
+    try {
+      if (typeof storage.keys === "function") return storage.keys();
+      const names = [];
+      for (let i = 0; i < storage.length; i++) names.push(storage.key(i));
+      return names;
+    } catch {
+      return [];
+    }
+  }
+
+  function snapshot() {
+    try { return JSON.stringify(captured()); } catch { return null; }
+  }
+
+  function park(raw, { keepSlot = false } = {}) {
+    const kept = storedKeys().find((name) => name.startsWith(key + ":unreadable:") && storage.getItem(name) === raw);
+    if (kept) {
+      unparked = null;
+      if (!keepSlot) { try { storage.removeItem(key); } catch {} }
+      return kept;
+    }
+    const parkedKey = key + ":unreadable:" + now().toISOString();
+    try {
+      storage.setItem(parkedKey, raw);
+    } catch {
+      unparked = raw;
+      console.warn("visitor-drafts: this browser's saved copy no longer fits the page, and there is no room to keep it aside; nothing will be saved over it");
+      return null;
+    }
+    unparked = null;
+    if (!keepSlot) { try { storage.removeItem(key); } catch {} }
+    console.warn(keepSlot
+      ? "visitor-drafts: part of this browser's saved copy no longer fits the page; the original was kept under"
+      : "visitor-drafts: this browser's saved copy no longer fits the page; it was kept under", parkedKey);
+    return parkedKey;
+  }
+
+  // Applies `data` to a copy of the page first, so a draft that does not fit never
+  // touches the live page. Top-level keys that do not read back are dropped.
+  function fit(data) {
+    const wanted = complete(JSON.parse(JSON.stringify(data)), live(), true);
+    const dropped = [];
+    for (let attempt = 0; attempt < 4; attempt++) {
+      const trial = doc.cloneNode(true);
+      try {
+        applyData(trial, wanted, rules);
+      } catch (error) {
+        const unknown = error?.details?.unknownKeys ?? error?.unknownKeys;
+        if (Array.isArray(unknown) && unknown.length) {
+          for (const label of unknown) dropPath(wanted, label);
+          continue;
+        }
+        const failing = Object.keys(wanted).filter((name) => {
+          try { applyData(doc.cloneNode(true), { [name]: wanted[name] }, rules); return false; } catch { return true; }
+        });
+        if (!failing.length) return null;
+        for (const name of failing) delete wanted[name];
+        dropped.push(...failing);
+        continue;
+      }
+      const got = extractData(trial, rules);
+      const misfits = Object.keys(wanted).filter((name) => !fitsInto(wanted[name], got[name]));
+      if (!misfits.length) return { data: wanted, dropped };
+      for (const name of misfits) delete wanted[name];
+      dropped.push(...misfits);
+    }
+    return null;
+  }
+
+  function parkedResult(raw) {
+    const parkedKey = park(raw);
+    if (!parkedKey) lastRaw = raw;
+    base = live();
+    return parkedKey
+      ? { restored: false, hadDraft: true, parked: true }
+      : { restored: false, hadDraft: true, parked: false, blocked: true };
+  }
+
+  function restore() {
+    const found = read();
+    if (!found) {
+      base = live();
+      return { restored: false, hadDraft: false };
+    }
+    if (!found.record) return parkedResult(found.raw);
+    const fitted = fit(found.record.data);
+    if (!fitted || !Object.keys(fitted.data).length) return parkedResult(found.raw);
+    applyData(doc, fitted.data, rules);
+    lastRaw = found.raw;
+    base = live();
+    if (fitted.dropped.length) {
+      const parkedKey = park(found.raw, { keepSlot: true });
+      return { restored: true, hadDraft: true, data: fitted.data, partial: true, parked: Boolean(parkedKey), blocked: !parkedKey };
+    }
+    return { restored: true, hadDraft: true, data: fitted.data };
+  }
+
+  // `base` may hold fields this page cannot read (carried from a tab on newer
+  // rules), so only what the page captures is compared.
+  function changed() {
+    if (stopped) return false;
+    try { return !fitsInto(captured(), base); } catch { return true; }
+  }
+
+  // One copy, the latest: a save that would replace another tab's change keeps it
+  // here first, and does not save at all when there is no room for it.
+  function keepConflict(raw) {
+    const conflictKey = key + ":conflict";
+    try {
+      storage.setItem(conflictKey, raw);
+    } catch (error) {
+      throw storageFailure(doc, error);
+    }
+    console.warn("visitor-drafts: another tab changed the same thing; its copy was kept under", conflictKey);
+  }
+
+  // Another tab may have written since this tab last read or wrote: what only it
+  // changed is taken. Fields the stored record has and this page's rules lack (a
+  // tab opened before the owner added a field) are carried through, at any depth.
+  function merge(mine) {
+    const current = getRaw();
+    const record = current == null ? null : parse(current);
+    if (!record) return { data: mine, stored: null };
+    let data = mine;
+    if (current !== lastRaw) {
+      const merged = merge3(base, mine, record.data);
+      if (merged.conflict) keepConflict(current);
+      data = merged.value;
+    }
+    data = complete(data, record.data);
+    return { data, stored: same(data, record.data) ? current : null };
+  }
+
+  function adopt(data) {
+    const fitted = fit(data);
+    if (!fitted || !Object.keys(fitted.data).length) return null;
+    applyData(doc, fitted.data, rules);
+    try { window.Sap?.refresh?.(); } catch {}
+    doc.dispatchEvent(new CustomEvent("clay:drafts-restored", { detail: { restored: true, hadDraft: true, parked: false, external: true } }));
+    return fitted.data;
+  }
+
+  function write(html) {
+    if (stopped) return null;
+    if (unparked != null && park(unparked, { keepSlot: true }) === null) {
+      throw storageFailure(doc, new Error("an earlier saved copy could not be kept aside"));
+    }
+    const mine = extractData(new DOMParser().parseFromString(html, "text/html"), rules);
+    const current = getRaw();
+    if (fitsInto(mine, base) && (current === lastRaw || current == null)) {
+      setDraftStoreFailed(false);
+      doc.dispatchEvent(new CustomEvent("clay:drafts-saved", { detail: { data: mine, unchanged: true } }));
+      return mine;
+    }
+    const { data, stored } = merge(mine);
+    const raw = stored ?? JSON.stringify({ v: RECORD_VERSION, savedAt: now().toISOString(), data });
+    if (!stored) {
+      try {
+        if (!storage) throw new Error("no storage");
+        storage.setItem(key, raw);
+      } catch (error) {
+        throw storageFailure(doc, error);
+      }
+    }
+    const taken = Object.keys(mine).filter((name) => !fitsInto(mine[name], data[name]));
+    if (taken.length) adopt(Object.fromEntries(taken.map((name) => [name, data[name]])));
+    lastRaw = raw;
+    base = data;
+    setDraftStoreFailed(false);
+    doc.dispatchEvent(new CustomEvent("clay:drafts-saved", { detail: { data } }));
+    return data;
+  }
+
+  function writeLive() {
+    try { write(window.clay.getHTML()); return true; } catch { return false; }
+  }
+
+  function flush() {
+    if (stopped || !changed()) return true;
+    return writeLive();
+  }
+
+  // A storage event can arrive late, so read the slot itself rather than trusting
+  // the event's value. A tab with its own edit merges at its next save instead.
+  function adoptExternal() {
+    if (stopped) return false;
+    const raw = getRaw();
+    if (raw == null || raw === lastRaw || changed()) return false;
+    const record = parse(raw);
+    const adopted = record && adopt(record.data);
+    if (!adopted) return false;
+    lastRaw = raw;
+    base = { ...base, ...adopted };
+    return true;
+  }
+
+  function clear() {
+    stopped = true;
+    unparked = null;
+    setDraftStoreFailed(false);
+    try { storage.removeItem(key); } catch {}
+  }
+
+  return { slot, key, rules, read, restore, write, writeLive, flush, changed, adoptExternal, park, clear, snapshot };
+}

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

@@ -0,0 +1,14 @@
+export function createUiMemory(slot, storage) {
+  const key = `clay:visitor-drafts:${slot}:ui`;
+  const blank = () => ({ v: 1, prompt: {}, intro: { done: null }, src: null });
+  let mem = blank();
+  try {
+    const parsed = JSON.parse(storage?.getItem(key) || "null");
+    if (parsed && typeof parsed === "object" && parsed.v === 1) mem = { ...blank(), ...parsed };
+  } catch {}
+  return {
+    get: () => mem,
+    save() { try { storage?.setItem(key, JSON.stringify(mem)); } catch {} },
+    reset() { mem = blank(); try { storage?.removeItem(key); } catch {} },
+  };
+}

package/src/plugins/visitor-drafts.js

@@ -0,0 +1,111 @@
+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 { createUiMemory } from "./visitor-drafts/ui-memory.js";
+import { rememberSource, downloadUrl, signupTag } 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";
+
+const DOWNLOAD_URL = "/_/download?as=htmlclay";
+
+let store = null;
+let restoredDetail = null;
+let downloadLink = DOWNLOAD_URL;
+let source = null;
+
+const slot = draftSlot();
+const rulesTag = document.querySelector('script[data-rules-name~="api"]');
+
+if (isDraftMode && slot && rulesTag) {
+  store = createStore();
+  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());
+  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";
+  const template = document.querySelector("template[visitor-intro]");
+  const start = () => {
+    const prompt = mountPrompt({ memory, appName, link: downloadLink });
+    mountIntro({ memory, template, appName, link: downloadLink, tag: signupTag(slot, template), source, hadDraft: result.hadDraft, prompt, snapshot: store.snapshot });
+    if (isOwner) mountOwnerChip();
+    document.addEventListener("clay:drafts-store-failed", () => prompt.showError());
+    document.addEventListener("clay:drafts-saved", () => prompt.clearError());
+  };
+  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", start, { once: true }) : start();
+  setDraftFlush(() => store.flush());
+  window.addEventListener("storage", (event) => { if (event.key === store.key) store.adoptExternal(); });
+  const flush = () => store.flush();
+  document.addEventListener("visibilitychange", () => { if (document.visibilityState === "hidden") flush(); });
+  window.addEventListener("pagehide", flush);
+} else 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 ")})`);
+} else if (isOwner && isEditMode && !hasSaveToken()) {
+  mountOwnerChip();
+}
+
+export const ready = Promise.resolve();
+
+function editOriginal() {
+  const url = new URL(window.location.href);
+  url.searchParams.set("editmode", "true");
+  window.location.href = url.toString();
+  return true;
+}
+
+function backToDraft() {
+  const url = new URL(window.location.href);
+  url.searchParams.delete("editmode");
+  window.location.href = url.toString();
+  return true;
+}
+
+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,
+  };
+}
+
+export const visitorDrafts = store ? {
+  active: true,
+  slot: store.slot,
+  key: store.key,
+  hasDraft: () => Boolean(store.read()),
+  restored: () => restoredDetail,
+  saveNow: () => store.writeLive(),
+  reset() {
+    store.clear();
+    window.location.reload();
+    return true;
+  },
+  onRestore(fn) {
+    if (restoredDetail) {
+      fn(restoredDetail);
+      return true;
+    }
+    document.addEventListener("clay:drafts-restored", (event) => fn(event.detail), { once: true });
+    return false;
+  },
+  editOriginal,
+  backToDraft,
+  downloadUrl: () => downloadLink,
+  source,
+} : inertVisitorDrafts();