@panphora/clayjs 1.11.3 → 1.12.1

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

@@ -0,0 +1,178 @@
+import { isDraftMode } from "../../core/is-edit-mode.js";
+import { BOTTOM_UI_CHANGED, announceBottomUi, bottomBarHeight, promptPanel } from "./bottom-ui.js";
+
+export const COPY = {
+  draft: "You're seeing a private draft, like a visitor.",
+  draftAction: "Edit the original",
+  edit: "You're editing the original. Visitors get these changes.",
+  editAction: "Back to my draft",
+  close: "Hide this note",
+};
+
+const CHIP_CSS = `.clay-owner {
+  --hcp-ground: #FDF8F0;
+  --hcp-surface: #FFFCF6;
+  --hcp-sunk: #F4ECDF;
+  --hcp-ink: #2B241B;
+  --hcp-ink-2: #4A4033;
+  --hcp-muted: #6B5942;
+  --hcp-line: #E8DCC6;
+  --hcp-line-2: #D8C8AF;
+  --hcp-brass: #8F6310;
+  --hcp-shadow: 0 1px 2px rgba(23, 28, 36, .06), 0 14px 34px -14px rgba(43, 36, 27, .32);
+  --hcp-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --hcp-lift: 0px;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  .clay-owner {
+    --hcp-surface: #11131E; --hcp-sunk: #1A1D2C;
+    --hcp-ink: #ECEAF2; --hcp-ink-2: #C9CDE0; --hcp-muted: #8A90AB;
+    --hcp-line: #262B42; --hcp-line-2: #353B52;
+    --hcp-brass: #D9A445;
+    --hcp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -14px rgba(0, 0, 0, .7);
+    color-scheme: dark;
+  }
+}
+.clay-owner, .clay-owner *, .clay-owner *::before, .clay-owner *::after {
+  box-sizing: border-box; margin: 0; padding: 0; border: 0;
+  font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none;
+  line-height: inherit; color: inherit; background: none; float: none; max-width: none;
+}
+.clay-owner {
+  position: fixed; left: 12px; bottom: calc(12px + var(--hcp-lift)); z-index: 2147482000;
+  display: flex; align-items: center; gap: 10px;
+  max-width: min(460px, calc(100vw - 24px));
+  padding: 8px 8px 8px 12px;
+  font-family: var(--hcp-sans); font-size: 13px; font-weight: 400; line-height: 1.45;
+  color: var(--hcp-ink-2); text-align: left; background: var(--hcp-surface);
+  border: 1px solid var(--hcp-line-2); border-left: 3px solid var(--hcp-brass);
+  box-shadow: var(--hcp-shadow);
+  -webkit-font-smoothing: antialiased;
+}
+.clay-owner__action {
+  flex: none; min-height: 0; font-weight: 600; color: var(--hcp-brass); cursor: pointer;
+  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hcp-line-2);
+  white-space: nowrap;
+}
+.clay-owner .clay-owner__action:hover { color: var(--hcp-ink); background: none; }
+.clay-owner__x {
+  flex: none; display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px; min-height: 0; font-size: 15px; color: var(--hcp-muted); cursor: pointer;
+}
+.clay-owner .clay-owner__x:hover { color: var(--hcp-ink); background: none; }
+.clay-owner__action:focus-visible, .clay-owner__x:focus-visible { outline: 2px solid var(--hcp-brass); outline-offset: 2px; }
+
+.clay-owner svg {
+  display: block; flex: none; width: 1em; height: 1em; line-height: 1;
+  fill: currentColor; stroke: none; stroke-width: 0; stroke-linecap: butt; stroke-linejoin: miter;
+}
+.clay-owner button, .clay-owner a { border-radius: 0; line-height: 1.45; }
+@media (pointer: coarse) {
+  .clay-owner__action, .clay-owner__x { min-height: 44px; }
+  .clay-owner__x { width: 44px; }
+}
+@media (prefers-reduced-motion: reduce) { .clay-owner { transition: none; } }
+@media (forced-colors: active) { .clay-owner { border: 1px solid CanvasText; } }
+@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 function mountOwnerChip() {
+  if (document.getElementById("clay-owner")) return null;
+  stylesOnce();
+
+  const draft = isDraftMode;
+  const chip = document.createElement("div");
+  chip.id = "clay-owner";
+  chip.className = "clay-owner";
+  chip.setAttribute("clay", "editor-ui");
+  chip.setAttribute("sap-ignore", "");
+  chip.setAttribute("role", "status");
+
+  const lead = document.createElement("span");
+  lead.className = "clay-owner__lead";
+  lead.textContent = draft ? COPY.draft : COPY.edit;
+
+  const action = document.createElement("button");
+  action.type = "button";
+  action.className = "clay-owner__action";
+  action.textContent = draft ? COPY.draftAction : COPY.editAction;
+  action.addEventListener("click", () => {
+    const api = window.clay && window.clay.visitorDrafts;
+    if (!api) return;
+    if (draft) api.editOriginal();
+    else api.backToDraft();
+  });
+
+  const close = document.createElement("button");
+  close.type = "button";
+  close.className = "clay-owner__x";
+  close.setAttribute("aria-label", COPY.close);
+  close.textContent = "\u00d7";
+  close.addEventListener("click", () => { chip.remove(); liftOff(); release(); });
+
+  chip.append(lead, action, close);
+  document.body.appendChild(chip);
+
+  const vars = document.createElement("style");
+  vars.id = "clay-owner-vars";
+  vars.setAttribute("clay", "editor-ui");
+  document.head.appendChild(vars);
+
+  let published = "";
+  function publish(lift) {
+    const next = `:root { --clay-owner-room: ${Math.ceil(chip.getBoundingClientRect().height) + 16}px; }`;
+    if (vars.textContent !== next) vars.textContent = next;
+    if (published === next + lift) return;
+    published = next + lift;
+    announceBottomUi();
+  }
+
+  function release() {
+    vars.remove();
+    announceBottomUi();
+  }
+
+  let frame = 0;
+  function lift() {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      let lift = bottomBarHeight(24, (el) => chip.contains(el) || el.closest("#hcp"));
+      const panel = promptPanel(chip.getBoundingClientRect());
+      const covered = panel >= window.innerHeight / 3;
+      if (panel && !covered) lift = Math.max(lift, panel - 4);
+      chip.style.visibility = covered ? "hidden" : "";
+      chip.style.setProperty("--hcp-lift", lift + "px");
+      publish(covered ? -1 : lift);
+    });
+  }
+
+  function liftOff() {
+    removeEventListener("scroll", lift);
+    removeEventListener("resize", lift);
+    document.removeEventListener(BOTTOM_UI_CHANGED, lift);
+    document.removeEventListener("transitionend", lift, true);
+    document.removeEventListener("pointerup", lift, true);
+    window.removeEventListener("hashchange", lift);
+  }
+
+  addEventListener("scroll", lift, { passive: true });
+  addEventListener("resize", lift);
+  document.addEventListener(BOTTOM_UI_CHANGED, lift);
+  document.addEventListener("transitionend", lift, true);
+  document.addEventListener("pointerup", lift, true);
+  window.addEventListener("hashchange", lift);
+  lift();
+
+  return chip;
+}

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

@@ -0,0 +1,198 @@
+export const PROMPT_CSS = `.hcp {
+  --hcp-ground: #FDF8F0;
+  --hcp-surface: #FFFCF6;
+  --hcp-sunk: #F4ECDF;
+  --hcp-ink: #2B241B;
+  --hcp-ink-2: #4A4033;
+  --hcp-muted: #6B5942;
+  --hcp-line: #E8DCC6;
+  --hcp-line-2: #D8C8AF;
+  --hcp-brass: #8F6310;
+  --hcp-brass-soft: #F0E4CC;
+  --hcp-face: #F1E7D4;
+  --hcp-edge-hi: #FFF9ED;
+  --hcp-edge-lo: #D6C3A5;
+  --hcp-shadow: 0 1px 2px rgba(23, 28, 36, .06), 0 14px 34px -14px rgba(43, 36, 27, .32);
+  --hcp-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --hcp-serif: Newsreader, Georgia, "Times New Roman", serif;
+  --hcp-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  --hcp-lift: 0px;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  .hcp:not([data-hcp-theme="light"]) {
+    --hcp-ground: #0B0C13; --hcp-surface: #11131E; --hcp-sunk: #1A1D2C;
+    --hcp-ink: #ECEAF2; --hcp-ink-2: #C9CDE0; --hcp-muted: #8A90AB;
+    --hcp-line: #262B42; --hcp-line-2: #353B52;
+    --hcp-brass: #D9A445; --hcp-brass-soft: #3A2F17;
+    --hcp-face: #22273E; --hcp-edge-hi: #3C4260; --hcp-edge-lo: #1B2033;
+    --hcp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -14px rgba(0, 0, 0, .7);
+    color-scheme: dark;
+  }
+}
+.hcp[data-hcp-theme="dark"] {
+  --hcp-ground: #0B0C13; --hcp-surface: #11131E; --hcp-sunk: #1A1D2C;
+  --hcp-ink: #ECEAF2; --hcp-ink-2: #C9CDE0; --hcp-muted: #8A90AB;
+  --hcp-line: #262B42; --hcp-line-2: #353B52;
+  --hcp-brass: #D9A445; --hcp-brass-soft: #3A2F17;
+  --hcp-face: #22273E; --hcp-edge-hi: #3C4260; --hcp-edge-lo: #1B2033;
+  --hcp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -14px rgba(0, 0, 0, .7);
+  color-scheme: dark;
+}
+
+.hcp, .hcp * , .hcp *::before, .hcp *::after {
+  box-sizing: border-box; margin: 0; padding: 0; border: 0;
+  font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none;
+  line-height: inherit; color: inherit; background: none; float: none; max-width: none;
+}
+.hcp {
+  position: fixed; right: 16px; bottom: calc(16px + var(--hcp-lift)); z-index: 2147482000;
+  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
+  font-family: var(--hcp-sans); font-size: 14px; font-weight: 400; line-height: 1.5;
+  color: var(--hcp-ink); text-align: left;
+  -webkit-font-smoothing: antialiased;
+  transition: bottom .25s ease, opacity .2s ease;
+  pointer-events: none;
+}
+.hcp[hidden], .hcp[data-hcp-state="dismissed"], .hcp[data-hcp-state="off"] { display: none; }
+.hcp[data-hcp-typing] { opacity: 0; visibility: hidden; }
+.hcp > * { pointer-events: auto; }
+.hcp svg {
+  display: block; flex: none; width: 16px; height: 16px; line-height: 1;
+  fill: none; stroke: none; stroke-width: 0; stroke-linecap: butt; stroke-linejoin: miter;
+}
+.hcp .hcp-x svg, .hcp .hcp-actions .hcp-btn svg, .hcp-tab svg, .hcp-file svg { fill: currentColor; }
+.hcp .hcp-file svg { width: 20px; height: 20px; }
+.hcp .hcp-tab svg { width: 16px; height: 18px; }
+.hcp .hcp-dock .hcp-x svg { width: 12px; height: 12px; }
+.hcp button, .hcp a { border-radius: 0; line-height: 1.5; }
+
+.hcp-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+  height: 34px; min-height: 0; padding: 0 14px;
+  font-family: var(--hcp-sans); font-size: 14px; font-weight: 500; line-height: 1.5;
+  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
+  color: var(--hcp-ink); background: var(--hcp-face);
+  border: 2px solid; border-radius: 0;
+  border-color: var(--hcp-edge-hi) var(--hcp-edge-lo) var(--hcp-edge-lo) var(--hcp-edge-hi);
+  outline: none;
+}
+.hcp .hcp-btn:hover { background: color-mix(in srgb, var(--hcp-face), var(--hcp-edge-hi) 45%); color: var(--hcp-ink); }
+.hcp-btn:active { border-color: var(--hcp-edge-lo) var(--hcp-edge-hi) var(--hcp-edge-hi) var(--hcp-edge-lo); }
+.hcp-btn:active > span { translate: 1px 1px; }
+.hcp-btn > span { display: inline-flex; align-items: center; gap: 7px; }
+.hcp-btn:focus-visible, .hcp-x:focus-visible, .hcp-quiet:focus-visible { outline: 2px solid var(--hcp-brass); outline-offset: 2px; }
+.hcp-btn--primary {
+  --hcp-face: var(--hcp-ink);
+  --hcp-edge-hi: color-mix(in srgb, var(--hcp-ink), white 24%);
+  --hcp-edge-lo: color-mix(in srgb, var(--hcp-ink), black 32%);
+  color: var(--hcp-ground);
+}
+.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-tab { font-size: 13.5px; padding: 0 12px 0 10px; }
+.hcp-tab svg { color: var(--hcp-brass); }
+.hcp-dock .hcp-x {
+  width: 26px; height: 34px; min-height: 0; border-radius: 0; display: inline-flex; align-items: center; justify-content: center;
+  background: var(--hcp-face); color: var(--hcp-muted); cursor: pointer;
+  border: 2px solid; border-left: 0;
+  border-color: var(--hcp-edge-hi) var(--hcp-edge-lo) var(--hcp-edge-lo) var(--hcp-edge-hi);
+}
+.hcp .hcp-dock .hcp-x:hover { color: var(--hcp-ink); background: var(--hcp-face); }
+.hcp-tab__label { display: inline; }
+.hcp[data-hcp-state="mini"] .hcp-tab__label,
+.hcp[data-hcp-state="mini"] .hcp-dock .hcp-x { display: none; }
+.hcp[data-hcp-state="mini"] .hcp-tab { width: 34px; padding: 0; }
+.hcp[data-hcp-state="card"] .hcp-dock { display: none; }
+
+.hcp-card {
+  display: none; position: relative;
+  width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px - var(--hcp-lift)); overflow: auto;
+  background: var(--hcp-surface); border: 1px solid var(--hcp-line-2); border-top: 3px solid var(--hcp-brass);
+  box-shadow: var(--hcp-shadow);
+  padding: 18px 20px 16px;
+}
+.hcp[data-hcp-state="card"] .hcp-card { display: block; animation: hcp-rise .32s cubic-bezier(.2, .8, .3, 1) both; }
+@keyframes hcp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
+
+.hcp-card .hcp-x {
+  position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; min-height: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid var(--hcp-line-2); border-radius: 3px; background: var(--hcp-surface);
+  color: var(--hcp-muted); cursor: pointer;
+}
+.hcp .hcp-card .hcp-x:hover { color: var(--hcp-ink); border-color: var(--hcp-muted); background: var(--hcp-surface); }
+.hcp .hcp-card .hcp-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
+.hcp-kicker {
+  display: flex; align-items: center; gap: 8px;
+  font-family: var(--hcp-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
+  color: var(--hcp-brass); margin-bottom: 8px;
+}
+.hcp-title {
+  font-family: var(--hcp-serif); font-size: 23px; font-weight: 500; line-height: 1.18;
+  color: var(--hcp-ink); padding-right: 26px; margin-bottom: 10px;
+  font-variation-settings: "opsz" 36;
+}
+.hcp-title [data-hcp-for] { display: none; }
+.hcp[data-hcp-reason="use"] .hcp-title [data-hcp-for="use"],
+.hcp[data-hcp-reason="open"] .hcp-title [data-hcp-for="open"],
+.hcp[data-hcp-reason="return"] .hcp-title [data-hcp-for="return"],
+.hcp[data-hcp-reason="error"] .hcp-title [data-hcp-for="error"] { display: inline; }
+.hcp-body [data-hcp-for] { display: none; }
+.hcp[data-hcp-reason="use"] .hcp-body [data-hcp-for="use"], .hcp[data-hcp-reason="open"] .hcp-body [data-hcp-for="open"], .hcp[data-hcp-reason="return"] .hcp-body [data-hcp-for="return"], .hcp[data-hcp-reason="error"] .hcp-body [data-hcp-for="error"] { display: inline; }
+.hcp-body { font-size: 14px; line-height: 1.55; color: var(--hcp-ink-2); }
+.hcp-file {
+  display: flex; align-items: center; gap: 10px; margin: 12px 0 14px;
+  padding: 9px 11px; background: var(--hcp-sunk); border: 1px solid var(--hcp-line);
+}
+.hcp-file svg { color: var(--hcp-brass); }
+.hcp-file b { display: block; font-family: var(--hcp-sans); font-size: 14px; font-weight: 600; color: var(--hcp-ink); overflow-wrap: anywhere; }
+.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-quiet {
+  min-height: 0; border-radius: 0;
+  font-size: 12px; color: var(--hcp-muted); cursor: pointer;
+  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hcp-line-2);
+  white-space: nowrap;
+}
+.hcp .hcp-quiet:hover { color: var(--hcp-ink); background: none; }
+
+@media (max-width: 480px) {
+  .hcp { right: 12px; bottom: calc(12px + var(--hcp-lift)); }
+  .hcp-card { width: calc(100vw - 24px); padding: 16px 16px 14px; max-height: min(70dvh, calc(100dvh - 24px - var(--hcp-lift))); }
+  .hcp-title { font-size: 21px; }
+}
+@media (pointer: coarse) {
+  .hcp-btn, .hcp-dock .hcp-x, .hcp-card .hcp-x { min-height: 44px; }
+  .hcp-card .hcp-x { width: 44px; height: 44px; top: 6px; right: 6px; }
+  .hcp-quiet { display: inline-flex; align-items: center; min-height: 44px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hcp { transition: none; }
+  .hcp[data-hcp-state="card"] .hcp-card { animation: none; }
+  .hcp-btn:active > span { translate: none; }
+}
+@media (forced-colors: active) {
+  .hcp-btn, .hcp-dock .hcp-x { border: 1px solid ButtonText; }
+  .hcp-card { border: 1px solid CanvasText; }
+}
+@media print { .hcp { display: none; } }
+`;

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

@@ -0,0 +1,203 @@
+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">
+  <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>
+    <div class="hcp-kicker">Free download</div>
+    <h2 class="hcp-title" id="hcp-title"><span data-hcp-for="use">Your work is saved in this browser only.</span><span data-hcp-for="open">This app is free to keep.</span><span data-hcp-for="return">Your work is 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 it on your computer for good.</span><span data-hcp-for="return">Download the file to keep it 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="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>
+  </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>
+    <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, tag, source }) {
+  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 OUR_UI = "#hcp, .clay-intro, .clay-owner";
+
+  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]");
+  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) && !el.closest(OUR_UI) && (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 raise = bottomBarHeight(innerWidth - 24, (el) => root.contains(el) || el.closest("[data-hcp-preview], .clay-owner"));
+      const next = raise + "px";
+      if (root.style.getPropertyValue("--hcp-lift") !== next) root.style.setProperty("--hcp-lift", next);
+      announceBottomUi();
+    });
+  }
+
+  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");
+  }
+  const api = { set, root, showError, clearError };
+
+  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);
+}