@panphora/clayjs 1.12.0 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panphora/clayjs",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "type": "module",
   "description": "clayjs: malleable documents. Save lifecycle for self-saving HTML.",
   "license": "MIT-0",

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

@@ -0,0 +1,31 @@
+export const BOTTOM_UI_CHANGED = "clay:bottom-ui-changed";
+
+export function announceBottomUi() {
+  document.dispatchEvent(new CustomEvent(BOTTOM_UI_CHANGED));
+}
+
+export function bottomBarHeight(x, skip) {
+  const h = window.innerHeight;
+  let raise = 0;
+  const hits = document.elementsFromPoint ? document.elementsFromPoint(x, h - 3) : [];
+  for (const hit of hits) {
+    for (let el = hit; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+      if (skip(el)) break;
+      const position = getComputedStyle(el).position;
+      if (position === "fixed" || position === "sticky") {
+        const height = Math.ceil(h - el.getBoundingClientRect().top);
+        if (height < h / 3) raise = Math.max(raise, height);
+        break;
+      }
+    }
+  }
+  return raise;
+}
+
+export function promptPanel(box) {
+  const panel = document.querySelector("#hcp:not([hidden])");
+  if (!panel) return 0;
+  const r = panel.getBoundingClientRect();
+  if (!r.width || !r.height || r.right <= box.left || r.left >= box.right) return 0;
+  return Math.ceil(window.innerHeight - r.top);
+}

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

@@ -1,156 +1,19 @@
-export const INTRO_CSS = `.clay-intro, .clay-about {
-  --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;
-  color-scheme: light;
-}
-@media (prefers-color-scheme: dark) {
-  .clay-intro, .clay-about {
-    --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;
-  }
-}
-
-html:has(> body > .clay-intro), body:has(> .clay-intro) { height: auto !important; min-height: 100%; overflow-y: auto !important; }
-
-.clay-intro, .clay-intro *, .clay-intro *::before, .clay-intro *::after,
-.clay-about, .clay-about *::before, .clay-about *::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;
-}
+export const INTRO_CSS = `html:has(> body > .clay-intro) { height: auto !important; overflow-y: auto !important; }
+body:has(> .clay-intro) { height: auto !important; overflow: visible !important; }
 .clay-intro {
-  position: relative; z-index: 1; display: block;
-  min-height: 100svh;
-  background: var(--hcp-ground);
-  font-family: var(--hcp-sans); font-size: 16px; font-weight: 400; line-height: 1.5;
-  color: var(--hcp-ink); text-align: left;
-  -webkit-font-smoothing: antialiased;
-}
-.clay-intro__inner {
-  display: flex; flex-direction: column; gap: 18px;
-  width: 100%; max-width: 720px; min-height: 100svh; margin: 0 auto;
-  padding: max(24px, 6vh) 16px 32px;
-}
-.clay-intro .clay-intro__kicker {
-  font-family: var(--hcp-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
-  color: var(--hcp-brass);
-}
-.clay-intro__name {
-  font-family: var(--hcp-serif); font-size: clamp(30px, 7vw, 44px); font-weight: 500; line-height: 1.12;
-  color: var(--hcp-ink); font-variation-settings: "opsz" 48;
-}
-.clay-intro__inner > p { font-size: 18px; line-height: 1.55; color: var(--hcp-ink-2); }
-.clay-intro__inner > a { color: var(--hcp-brass); text-decoration: underline; text-underline-offset: 2px; }
-.clay-intro__inner > video, .clay-intro__inner > img {
-  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
-  background: var(--hcp-sunk); border: 1px solid var(--hcp-line);
-}
-.clay-intro__inner > ul, .clay-intro__inner > ol { padding-left: 22px; font-size: 18px; line-height: 1.55; color: var(--hcp-ink-2); }
-.clay-intro__inner > ul { list-style: disc; }
-.clay-intro__inner > ol { list-style: decimal; }
-
-.clay-intro__actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
-.clay-intro__download {
-  align-self: flex-start;
-  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
-  min-height: 44px; padding: 0 18px;
-  font-family: var(--hcp-sans); font-size: 15px; font-weight: 500; line-height: 1.5;
-  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
-  color: var(--hcp-ground); background: var(--hcp-ink);
-  border: 2px solid;
-  border-color: color-mix(in srgb, var(--hcp-ink), white 24%) color-mix(in srgb, var(--hcp-ink), black 32%) color-mix(in srgb, var(--hcp-ink), black 32%) color-mix(in srgb, var(--hcp-ink), white 24%);
-  transition: background .2s ease;
-}
-.clay-intro__download:hover { background: color-mix(in srgb, var(--hcp-ink), var(--hcp-ground) 12%); }
-
-.clay-intro__signup {
-  display: flex; flex-direction: column; gap: 9px;
-  padding: 14px 16px;
-  background: var(--hcp-surface); border: 1px solid var(--hcp-line); border-left: 3px solid var(--hcp-brass);
-}
-.clay-intro__signup label { font-size: 14px; line-height: 1.45; color: var(--hcp-ink-2); }
-.clay-intro__row { display: flex; gap: 8px; }
-.clay-intro__row input {
-  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 10px;
-  font-family: var(--hcp-sans); font-size: 15px; color: var(--hcp-ink);
-  background: var(--hcp-ground); border: 1px solid var(--hcp-line-2);
-}
-.clay-intro__row input::placeholder { color: var(--hcp-muted); }
-.clay-intro__row button {
-  flex: none; height: 40px; padding: 0 14px;
-  font-family: var(--hcp-sans); font-size: 14px; font-weight: 500;
-  color: var(--hcp-ink); background: var(--hcp-face); cursor: pointer;
-  border: 2px solid; border-color: var(--hcp-edge-hi) var(--hcp-edge-lo) var(--hcp-edge-lo) var(--hcp-edge-hi);
-}
-.clay-intro__row button:hover { background: color-mix(in srgb, var(--hcp-face), var(--hcp-edge-hi) 45%); }
-.clay-intro__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
-.clay-intro__msg { font-size: 14px; line-height: 1.5; color: var(--hcp-ink-2); }
-.clay-intro__msg[hidden] { display: none; }
-.clay-intro__row[hidden] { display: none; }
-
-.clay-intro__start {
-  margin-top: auto;
-  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
-  width: 100%; min-height: 56px; padding: 0 20px;
-  font-family: var(--hcp-sans); font-size: 16px; font-weight: 500;
-  color: var(--hcp-ground); background: var(--hcp-ink); cursor: pointer;
-  border: 2px solid;
-  border-color: color-mix(in srgb, var(--hcp-ink), white 24%) color-mix(in srgb, var(--hcp-ink), black 32%) color-mix(in srgb, var(--hcp-ink), black 32%) color-mix(in srgb, var(--hcp-ink), white 24%);
-  transition: background .2s ease;
-}
-.clay-intro__start::after { content: "\\2193"; font-size: 15px; line-height: 1; }
-.clay-intro__start:hover { background: color-mix(in srgb, var(--hcp-ink), var(--hcp-ground) 12%); }
-.clay-intro__download:focus-visible, .clay-intro__start:focus-visible,
-.clay-intro__row button:focus-visible, .clay-intro__row input:focus-visible,
-.clay-about:focus-visible { outline: 2px solid var(--hcp-brass); outline-offset: 2px; }
-
-.clay-about {
-  position: fixed; top: 12px; right: 12px; z-index: 2147482000;
-  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
-  height: 34px; padding: 0 12px;
-  font-family: var(--hcp-sans); font-size: 13px; font-weight: 500; line-height: 1.5;
-  white-space: nowrap; cursor: pointer; user-select: none;
-  color: var(--hcp-ink); background: var(--hcp-face);
-  border: 2px solid; border-color: var(--hcp-edge-hi) var(--hcp-edge-lo) var(--hcp-edge-lo) var(--hcp-edge-hi);
-  box-shadow: var(--hcp-shadow);
-  transition: background .2s ease;
-}
-.clay-about:hover { background: color-mix(in srgb, var(--hcp-face), var(--hcp-edge-hi) 45%); }
-
-@media (min-width: 560px) {
-  .clay-intro__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
-  .clay-intro__signup { flex: 1 1 320px; max-width: 520px; }
-}
-@media (pointer: coarse) {
-  .clay-intro__download, .clay-intro__start, .clay-intro__row input, .clay-intro__row button { min-height: 44px; }
-  .clay-about { min-height: 44px; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .clay-intro, .clay-intro *, .clay-about { transition: none; animation: none; }
-}
-@media (forced-colors: active) {
-  .clay-intro__download, .clay-intro__start, .clay-intro__row button, .clay-about { border: 1px solid ButtonText; }
-  .clay-intro__signup { border: 1px solid CanvasText; }
-}
-@media print { .clay-intro, .clay-about { display: none; } }
+  position: relative;
+  display: block;
+}
+.clay-intro__close {
+  position: absolute; top: 10px; right: 10px; z-index: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; min-height: 0; margin: 0; padding: 0;
+  border: 0; border-radius: 4px; background: none; box-shadow: none;
+  color: inherit; opacity: .55; cursor: pointer; line-height: 1;
+}
+.clay-intro .clay-intro__close:hover { opacity: 1; background: none; color: inherit; }
+.clay-intro__close:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
+.clay-intro__close svg { display: block; width: 12px; height: 12px; fill: currentColor; stroke: none; }
+@media (pointer: coarse) { .clay-intro__close { width: 44px; height: 44px; top: 4px; right: 4px; } }
+@media print { .clay-intro { display: none; } }
 `;

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

@@ -1,19 +1,20 @@
 import { INTRO_CSS } from "./intro-style.js";
+import { announceBottomUi } from "./bottom-ui.js";
 
 export const COPY = {
-  kicker: "Free app",
-  download: "Download free",
-  signupLabel: "I make one of these about every two weeks. Get the next one by email.",
-  emailPlaceholder: "you@example.com",
-  signup: "Send me the next one",
-  signupThanks: "Thanks. Check your email for a link to confirm.",
-  signupFailed: "That didn't go through. Check the address and try again.",
-  start: (appName) => `Start using ${appName}`,
-  about: "About this app",
+  close: "Hide this introduction",
   label: (appName) => `About ${appName}`,
 };
 
 const FOCUSABLE = "a[href], button, input, select, textarea, [tabindex]:not([tabindex='-1'])";
+const TEXT_ENTRY = "textarea, select";
+const NON_TEXT_INPUT = ["checkbox", "radio", "button", "submit", "reset", "file"];
+
+function isTextEntry(el) {
+  if (el.isContentEditable || el.closest(TEXT_ENTRY)) return true;
+  if (el.tagName !== "INPUT") return false;
+  return NON_TEXT_INPUT.indexOf(el.type) < 0;
+}
 
 function forced() {
   try {
@@ -34,40 +35,23 @@ function stylesOnce() {
 
 function focusApp() {
   const next = [...document.querySelectorAll(FOCUSABLE)].find(
-    (el) => !el.disabled && !el.closest("[clay~='editor-ui']") && (typeof el.checkVisibility !== "function" || el.checkVisibility())
+    (el) => !el.disabled && !isTextEntry(el) && !el.closest("[clay~='editor-ui']") && (typeof el.checkVisibility !== "function" || el.checkVisibility())
   );
-  if (next) next.focus();
-  else document.body.focus();
-}
-
-export function mountIntro({ memory, template, appName, link, tag, source, hadDraft, prompt, snapshot }) {
-  if (!template) return null;
-  const opts = { memory, template, appName, link, tag, source, hadDraft, prompt, snapshot };
-  if (forced()) return mount(opts);
-  if (memory.get().intro.done || hadDraft) return mountAbout(opts);
-  if (window.location.hash) return null;
-  if (window.matchMedia && window.matchMedia("print").matches) return null;
-  return mount(opts);
+  if (next) next.focus({ preventScroll: true });
+  else document.body.focus({ preventScroll: true });
 }
 
-function mountAbout(opts) {
-  stylesOnce();
-  const button = document.createElement("button");
-  button.type = "button";
-  button.className = "clay-about";
-  button.setAttribute("clay", "editor-ui");
-  button.setAttribute("sap-ignore", "");
-  button.textContent = COPY.about;
-  button.addEventListener("click", () => {
-    button.remove();
-    mount({ ...opts, fromAbout: true });
-  });
-  document.body.appendChild(button);
-  return button;
+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 (window.matchMedia && window.matchMedia("print").matches) return null;
+  }
+  return mount({ memory, template, appName });
 }
 
-function mount(opts) {
-  const { memory, template, appName, link, tag, source, prompt, snapshot, fromAbout } = opts;
+function mount({ memory, template, appName }) {
   stylesOnce();
 
   const section = document.createElement("section");
@@ -75,157 +59,60 @@ function mount(opts) {
   section.setAttribute("clay", "editor-ui");
   section.setAttribute("sap-ignore", "");
   section.setAttribute("aria-label", COPY.label(appName));
+  section.appendChild(template.content.cloneNode(true));
 
-  const inner = document.createElement("div");
-  inner.className = "clay-intro__inner";
-
-  const kicker = document.createElement("p");
-  kicker.className = "clay-intro__kicker";
-  kicker.textContent = COPY.kicker;
-
-  const name = document.createElement("h1");
-  name.className = "clay-intro__name";
-  name.textContent = appName;
-
-  const actions = document.createElement("div");
-  actions.className = "clay-intro__actions";
-
-  const download = document.createElement("a");
-  download.className = "clay-intro__download";
-  download.href = link;
-  download.textContent = COPY.download;
-
-  const form = document.createElement("form");
-  form.className = "clay-intro__signup";
-  form.noValidate = true;
-
-  const label = document.createElement("label");
-  label.setAttribute("for", "clay-intro-email");
-  label.textContent = COPY.signupLabel;
-
-  const row = document.createElement("div");
-  row.className = "clay-intro__row";
-
-  const email = document.createElement("input");
-  email.id = "clay-intro-email";
-  email.type = "email";
-  email.autocomplete = "email";
-  email.required = true;
-  email.placeholder = COPY.emailPlaceholder;
-
-  const send = document.createElement("button");
-  send.type = "submit";
-  send.textContent = COPY.signup;
+  const close = document.createElement("button");
+  close.type = "button";
+  close.className = "clay-intro__close";
+  close.setAttribute("aria-label", COPY.close);
+  close.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"><path d="M1.4 0 6 4.6 10.6 0 12 1.4 7.4 6 12 10.6 10.6 12 6 7.4 1.4 12 0 10.6 4.6 6 0 1.4z"/></svg>';
+  section.appendChild(close);
 
-  row.append(email, send);
-
-  const honey = document.createElement("input");
-  honey.className = "clay-intro__hp";
-  honey.name = "website";
-  honey.tabIndex = -1;
-  honey.autocomplete = "off";
-  honey.setAttribute("aria-hidden", "true");
-
-  const message = document.createElement("p");
-  message.className = "clay-intro__msg";
-  message.setAttribute("role", "status");
-  message.hidden = true;
-
-  form.append(label, row, honey, message);
-  actions.append(download, form);
-
-  const start = document.createElement("button");
-  start.type = "button";
-  start.className = "clay-intro__start";
-  start.textContent = COPY.start(appName);
-
-  inner.append(kicker, name, template.content.cloneNode(true), actions, start);
-  section.appendChild(inner);
-
-  let observer = null;
   let gone = false;
+  let frame = 0;
 
-  function stop() {
-    document.removeEventListener("input", onUse, true);
-    document.removeEventListener("change", onUse, true);
-    document.removeEventListener("clay:dirty", onUse, true);
-    if (observer) { observer.disconnect(); observer = null; }
-    if (prompt) prompt.hideForIntro(false);
-  }
-
-  function dismiss(reason, target) {
+  function dismiss(reason) {
     if (gone) return;
     gone = true;
-    const anchor = target && target.getBoundingClientRect ? target : document.activeElement;
-    const before = anchor && anchor.getBoundingClientRect ? anchor.getBoundingClientRect().top : 0;
+    removeEventListener("scroll", onScroll);
+    if (frame) cancelAnimationFrame(frame);
+    const height = section.getBoundingClientRect().height;
+    const before = window.scrollY;
     memory.get().intro.done = reason;
     memory.save();
-    stop();
     section.remove();
-    if (reason === "button") {
-      window.scrollTo({ top: 0 });
-      focusApp();
-    } else if (anchor && anchor.getBoundingClientRect) {
-      window.scrollBy(0, anchor.getBoundingClientRect().top - before);
+    if (reason === "scrolled") {
+      const locked = /hidden|clip/.test(getComputedStyle(document.body).overflowY + getComputedStyle(document.documentElement).overflowY);
+      window.scrollTo(0, locked ? 0 : Math.max(0, before - height));
     }
-    if (fromAbout) mountAbout(opts);
+    announceBottomUi();
+    if (reason !== "scrolled") focusApp();
   }
 
-  function unchanged() {
-    return !snapshot || snapshot() === baseline;
+  function onScroll() {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      const bottom = section.getBoundingClientRect().bottom;
+      const atEnd = scrollY > 0 && scrollY + innerHeight >= document.documentElement.scrollHeight - 1;
+      if (bottom < 1 || (atEnd && bottom < innerHeight)) dismiss("scrolled");
+    });
   }
 
-  function onUse(event) {
-    if (section.contains(event.target)) return;
-    if (event.type === "clay:dirty") {
-      if (!unchanged()) dismiss("use", event.target);
+  section.addEventListener("click", (event) => {
+    if (event.target.closest(".clay-intro__close, [visitor-intro-dismiss]")) {
+      dismiss("closed");
       return;
     }
-    if (!unchanged() || event.target?.closest?.("[persist]")) {
-      dismiss("use", event.target);
-      return;
+    if (event.target.closest("[visitor-intro-start]")) {
+      event.preventDefault();
+      window.scrollTo({ top: window.scrollY + section.getBoundingClientRect().bottom, behavior: "smooth" });
     }
-    const target = event.target;
-    setTimeout(() => {
-      if (!gone && !unchanged()) dismiss("use", target);
-    }, 0);
-  }
-
-  form.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 = COPY.signupThanks;
-      message.hidden = false;
-    }).catch(() => {
-      message.textContent = COPY.signupFailed;
-      message.hidden = false;
-    });
   });
 
-  start.addEventListener("click", () => dismiss("button"));
-
-  const baseline = snapshot ? snapshot() : null;
   document.body.prepend(section);
-  document.addEventListener("input", onUse, true);
-  document.addEventListener("change", onUse, true);
-  document.addEventListener("clay:dirty", onUse, true);
-
-  if (prompt) {
-    prompt.hideForIntro(true);
-    if (typeof IntersectionObserver === "function") {
-      observer = new IntersectionObserver((entries) => {
-        for (const entry of entries) prompt.hideForIntro(entry.intersectionRatio > 0.3);
-      });
-      observer.observe(section);
-    }
-  }
+  announceBottomUi();
+  addEventListener("scroll", onScroll, { passive: true });
 
   return section;
 }

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

@@ -1,4 +1,5 @@
 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.",
@@ -50,17 +51,23 @@ const CHIP_CSS = `.clay-owner {
   -webkit-font-smoothing: antialiased;
 }
 .clay-owner__action {
-  flex: none; font-weight: 600; color: var(--hcp-brass); cursor: pointer;
+  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__action:hover { color: var(--hcp-ink); }
+.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; font-size: 15px; color: var(--hcp-muted); cursor: pointer;
+  width: 24px; height: 24px; min-height: 0; font-size: 15px; color: var(--hcp-muted); cursor: pointer;
 }
-.clay-owner__x:hover { color: var(--hcp-ink); }
+.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; }
@@ -111,40 +118,60 @@ export function mountOwnerChip() {
   close.className = "clay-owner__x";
   close.setAttribute("aria-label", COPY.close);
   close.textContent = "\u00d7";
-  close.addEventListener("click", () => { chip.remove(); liftOff(); });
+  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;
-      const y = window.innerHeight - 3;
-      let raise = 0;
-      const hits = document.elementsFromPoint ? document.elementsFromPoint(24, y) : [];
-      for (const hit of hits) {
-        for (let el = hit; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
-          if (chip.contains(el)) break;
-          const position = getComputedStyle(el).position;
-          if (position === "fixed" || position === "sticky") {
-            raise = Math.max(raise, Math.ceil(window.innerHeight - el.getBoundingClientRect().top));
-            break;
-          }
-        }
-      }
-      chip.style.setProperty("--hcp-lift", (raise > 0 && raise < window.innerHeight / 3 ? raise : 0) + "px");
+      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;