@8ux-co/eelzap 0.10.0 → 0.10.1

package/dist/{suggest-5RHURHED.js → suggest-JZ63L3WP.js}

@@ -3,24 +3,34 @@ import {
   Overlay,
   TagIndex,
   buildAnchor,
+  cleanStega,
   findAnchorElement,
+  isDraftRoutePath,
   isRecordRef,
+  isShortcut,
   normalizeText,
   observeTags,
-  parseRecordRef
-} from "./chunk-VW4EH7NY.js";
+  parseRecordRef,
+  reveal,
+  tagGuard
+} from "./chunk-7CXQK2PR.js";
 import {
   SUGGEST_MESSAGES,
   TOKENS,
   el,
   icon,
   initials,
-  mountHost
-} from "./chunk-2IUU53QA.js";
+  mountHost,
+  readTokenAnswer
+} from "./chunk-7ZPXZZUT.js";
 import {
+  EXPIRY_MARGIN_MS,
+  accessLive,
   clearToken,
-  readToken
-} from "./chunk-QN53G5P7.js";
+  readSession,
+  refreshLive,
+  writeToken
+} from "./chunk-6XHCA4U4.js";
 
 // src/preview/site/api.ts
 var BASE = "/api/public/v1/comments";
@@ -73,6 +83,387 @@ function newIdempotencyKey(win) {
   return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
 }
 
+// src/preview/site/drag.ts
+var BAR_STORAGE_KEY = "eelzap:bar";
+var GUTTER = 16;
+var STEP = 16;
+var BIG_STEP = 64;
+var GAP = 10;
+var SLOP = 3;
+var DOUBLE_MS = 400;
+var clamp = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
+function storage(win) {
+  try {
+    return win.localStorage;
+  } catch {
+    return null;
+  }
+}
+function read(win) {
+  try {
+    const value = JSON.parse(storage(win)?.getItem(BAR_STORAGE_KEY) ?? "null");
+    return {
+      pos: value && Number.isFinite(value.x) && Number.isFinite(value.y) ? { x: value.x, y: value.y } : null,
+      hidden: value?.hidden === true
+    };
+  } catch {
+    return { pos: null, hidden: false };
+  }
+}
+function write(win, point, hidden) {
+  try {
+    const store = storage(win);
+    if (point || hidden)
+      store?.setItem(BAR_STORAGE_KEY, JSON.stringify({ ...point, hidden: hidden || void 0 }));
+    else store?.removeItem(BAR_STORAGE_KEY);
+  } catch {
+  }
+}
+function barDrag(win, doc, stack, label, tip) {
+  const saved = read(win);
+  let pos = saved.pos;
+  let hidden = saved.hidden;
+  let drag = null;
+  let dragged = false;
+  let lastTap = 0;
+  const viewport = () => {
+    const root = doc.documentElement;
+    return [root.clientWidth || win.innerWidth, root.clientHeight || win.innerHeight];
+  };
+  const bar = () => stack.querySelector(".toolbar, .pill");
+  const rectOf = (node) => {
+    const rect = node.getBoundingClientRect();
+    return { x: rect.left, y: rect.top };
+  };
+  function place() {
+    const toolbar = bar();
+    const cards = Array.from(stack.children);
+    const [vw, vh] = viewport();
+    if (!pos || !toolbar) {
+      stack.removeAttribute("style");
+      stack.removeAttribute("data-below");
+      for (const card of cards) {
+        card.style.marginLeft = "";
+        card.style.maxHeight = "";
+      }
+      placeMenu(toolbar, vw);
+      return;
+    }
+    const w = toolbar.offsetWidth;
+    const h = toolbar.offsetHeight;
+    const x = clamp(pos.x, GUTTER, vw - w - GUTTER);
+    const y = clamp(pos.y, GUTTER, vh - h - GUTTER);
+    const below = vh - y - h > y;
+    const room = (below ? vh - y - h : y) - GAP - GUTTER;
+    Object.assign(stack.style, {
+      padding: "0",
+      alignItems: "flex-start",
+      flexDirection: below ? "column-reverse" : "column",
+      top: below ? `${y}px` : "auto",
+      bottom: below ? "auto" : `${vh - y - h}px`
+    });
+    stack.toggleAttribute("data-below", below);
+    for (const card of cards) {
+      if (card.classList.contains("toast") || card.classList.contains("menu")) continue;
+      if (card.classList.contains("list")) card.style.maxHeight = `min(50vh, ${room}px)`;
+      const cw = card.offsetWidth;
+      card.style.marginLeft = `${card === toolbar ? x : clamp(x + (w - cw) / 2, GUTTER / 2, vw - cw - GUTTER / 2)}px`;
+    }
+    placeMenu(toolbar, vw);
+  }
+  function placeMenu(toolbar, vw) {
+    const menu = stack.querySelector(".menu");
+    if (!menu || !toolbar) return;
+    const left = stack.getBoundingClientRect().left + (parseFloat(win.getComputedStyle(stack).paddingLeft) || 0);
+    const mw = menu.offsetWidth;
+    menu.style.alignSelf = "flex-start";
+    menu.style.marginLeft = `${clamp(toolbar.getBoundingClientRect().right - 35 - mw, GUTTER / 2, vw - mw - GUTTER / 2) - left}px`;
+  }
+  function moveTo(point, save) {
+    pos = point;
+    place();
+    const toolbar = bar();
+    if (toolbar) pos = rectOf(toolbar);
+    if (save) write(win, pos, hidden);
+  }
+  function reset() {
+    pos = null;
+    write(win, null, hidden);
+    place();
+  }
+  const onMove = (event) => {
+    if (!drag || event.pointerId !== drag.id) return;
+    const dx = event.clientX - drag.px;
+    const dy = event.clientY - drag.py;
+    if (!drag.moved && Math.hypot(dx, dy) < SLOP) return;
+    drag.moved = true;
+    event.preventDefault();
+    pos = { x: drag.from.x + dx, y: drag.from.y + dy };
+    place();
+  };
+  const onUp = (event) => {
+    if (!drag || event.pointerId !== drag.id) return;
+    const { moved, node } = drag;
+    drag = null;
+    node.removeAttribute("data-dragging");
+    if (moved && pos) {
+      moveTo(pos, true);
+      lastTap = 0;
+      dragged = true;
+      win.setTimeout(() => dragged = false);
+    } else if (node === handle && event.type === "pointerup") {
+      const now = Date.now();
+      if (now - lastTap < DOUBLE_MS) {
+        lastTap = 0;
+        reset();
+      } else lastTap = now;
+    }
+  };
+  const stop = (event) => event.stopPropagation();
+  function begin(e, node) {
+    const toolbar = bar();
+    if (e.button !== 0 || !toolbar) return;
+    drag = {
+      id: e.pointerId,
+      px: e.clientX,
+      py: e.clientY,
+      from: rectOf(toolbar),
+      moved: false,
+      node
+    };
+    node.setAttribute("data-dragging", "");
+    try {
+      node.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  }
+  const handle = el(doc, "button", {
+    class: "grip",
+    attrs: { type: "button", "aria-label": label, title: tip },
+    on: {
+      pointerdown: (event) => {
+        event.stopPropagation();
+        begin(event, handle);
+      },
+      keydown: (event) => {
+        const e = event;
+        const step = e.shiftKey ? BIG_STEP : STEP;
+        const delta = {
+          ArrowLeft: [-step, 0],
+          ArrowRight: [step, 0],
+          ArrowUp: [0, -step],
+          ArrowDown: [0, step]
+        };
+        const move = delta[e.key];
+        const toolbar = bar();
+        if (!move || !toolbar) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const from = rectOf(toolbar);
+        moveTo({ x: from.x + move[0], y: from.y + move[1] }, true);
+      }
+    }
+  });
+  for (const type of [
+    "pointerup",
+    "dblclick",
+    "mousedown",
+    "mouseup",
+    "click",
+    "touchstart",
+    "touchend"
+  ]) {
+    handle.addEventListener(type, stop);
+  }
+  handle.append(icon(doc, "grip"));
+  const onResize = () => place();
+  win.addEventListener("pointermove", onMove, true);
+  win.addEventListener("pointerup", onUp, true);
+  win.addEventListener("pointercancel", onUp, true);
+  win.addEventListener("resize", onResize);
+  win.addEventListener("orientationchange", onResize);
+  return {
+    handle,
+    grab(node) {
+      node.addEventListener("pointerdown", (event) => begin(event, node));
+      node.addEventListener(
+        "click",
+        (event) => {
+          if (dragged) event.stopImmediatePropagation();
+        },
+        true
+      );
+      return node;
+    },
+    place,
+    hidden: () => hidden,
+    setHidden(value) {
+      hidden = value;
+      write(win, pos, hidden);
+    },
+    destroy() {
+      win.removeEventListener("pointermove", onMove, true);
+      win.removeEventListener("pointerup", onUp, true);
+      win.removeEventListener("pointercancel", onUp, true);
+      win.removeEventListener("resize", onResize);
+      win.removeEventListener("orientationchange", onResize);
+    }
+  };
+}
+var DRAG_CSS = `
+.grip { width: 20px; height: 30px; justify-content: center; border-radius: 7px; color: ${TOKENS.muted};
+  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
+.grip[data-dragging], .pill[data-dragging] { cursor: grabbing; }
+.pill { touch-action: none; user-select: none; -webkit-user-select: none; }
+.bottom[data-below] .seg[data-tip]:hover::after { bottom: auto; top: 34px; }
+`;
+
+// src/preview/site/draft-session.ts
+var DRAFT_SESSION_PATH = "/api/public/v1/preview/session";
+var EDIT_INTENT_KEY = "eelzap:edit-intent";
+var DRAFT_SESSION_KEY = "eelzap:draft-session";
+var INTENT_MAX_AGE_MS = 2 * 6e4;
+var DRAFT_SESSION_MESSAGES = {
+  es: {
+    preparing: "Preparando la edici\xF3n\u2026",
+    noRoute: "Este sitio no tiene la ruta de vista previa que Editar necesita. Usa Comentar o \xE1brelo desde Zap.",
+    failed: "No pudimos preparar la p\xE1gina para editar. Int\xE9ntalo de nuevo o usa Comentar.",
+    rate: (seconds) => `Demasiados intentos. Vuelve a intentarlo en ${seconds} ${seconds === 1 ? "segundo" : "segundos"}.`
+  },
+  en: {
+    preparing: "Getting the page ready to edit\u2026",
+    noRoute: "This site does not have the preview route Edit needs. Use Comment or open it from Zap.",
+    failed: "We could not get the page ready to edit. Try again or use Comment.",
+    rate: (seconds) => `Too many tries. Try again in ${seconds} ${seconds === 1 ? "second" : "seconds"}.`
+  }
+};
+function storage2(win) {
+  try {
+    return win.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+function readJson(win, key) {
+  try {
+    const raw = storage2(win)?.getItem(key);
+    if (!raw) return null;
+    const value = JSON.parse(raw);
+    return value && typeof value === "object" ? value : null;
+  } catch {
+    return null;
+  }
+}
+function write2(win, key, value) {
+  try {
+    storage2(win)?.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+function remove(win, key) {
+  try {
+    storage2(win)?.removeItem(key);
+  } catch {
+  }
+}
+function currentPath(win) {
+  const { pathname, search, hash } = win.location;
+  return `${pathname}${search}${hash}`;
+}
+function inDraftSession(win, now = Date.now()) {
+  const value = readJson(win, DRAFT_SESSION_KEY);
+  return !!value && typeof value.exp === "number" && value.exp > now && value.origin === win.location.origin;
+}
+function takeEditIntent(win, now = Date.now()) {
+  const value = readJson(win, EDIT_INTENT_KEY);
+  remove(win, EDIT_INTENT_KEY);
+  return !!value && value.path === win.location.pathname && typeof value.at === "number" && now - value.at >= 0 && now - value.at < INTENT_MAX_AGE_MS;
+}
+function acceptSessionUrl(raw, win, draftRoute) {
+  if (typeof raw !== "string") return null;
+  let url;
+  try {
+    url = new URL(raw);
+  } catch {
+    return null;
+  }
+  if (url.origin !== win.location.origin || url.pathname !== draftRoute) return null;
+  if (!/^zpt_[A-Za-z0-9_-]{43}$/.test(url.searchParams.get("token") ?? "")) return null;
+  const path = url.searchParams.get("path") ?? "";
+  if (!path.startsWith("/") || path.startsWith("//")) return null;
+  return url.toString();
+}
+async function requestDraftSession(ctx, token, now = Date.now) {
+  const { win } = ctx;
+  const draftRoute = ctx.draftRoute;
+  if (!isDraftRoutePath(draftRoute)) return { ok: false, reason: "no-route" };
+  let response;
+  try {
+    response = await win.fetch(`${ctx.zapOrigin}${DRAFT_SESSION_PATH}`, {
+      method: "POST",
+      headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+      credentials: "omit",
+      body: JSON.stringify({ draftRoute, path: currentPath(win) })
+    });
+  } catch {
+    return { ok: false, reason: "refused" };
+  }
+  if (response.status === 401) return { ok: false, reason: "expired" };
+  if (response.status === 429) {
+    const seconds = Number.parseInt(response.headers.get("Retry-After") ?? "", 10);
+    return { ok: false, reason: "rate", retryAfter: seconds > 0 ? Math.min(seconds, 3600) : 30 };
+  }
+  if (!response.ok) return { ok: false, reason: "failed" };
+  let body;
+  try {
+    body = await response.json();
+  } catch {
+    return { ok: false, reason: "failed" };
+  }
+  const url = acceptSessionUrl(body?.url, win, draftRoute);
+  if (!url) return { ok: false, reason: "failed" };
+  const at = now();
+  const parsed = typeof body?.expiresAt === "string" ? Date.parse(body.expiresAt) : NaN;
+  const expiresAt = Number.isFinite(parsed) ? parsed : at + 10 * 6e4;
+  write2(win, EDIT_INTENT_KEY, { path: win.location.pathname, at });
+  write2(win, DRAFT_SESSION_KEY, { exp: expiresAt, origin: win.location.origin });
+  return { ok: true, url, expiresAt };
+}
+function draftExitUrl(win, draftRoute) {
+  const url = new URL(`${draftRoute.replace(/\/+$/, "")}/exit`, win.location.origin);
+  url.searchParams.set("path", currentPath(win));
+  return url.toString();
+}
+async function leaveDraftSession(ctx, token, tagged) {
+  const { win } = ctx;
+  const entered = inDraftSession(win);
+  remove(win, EDIT_INTENT_KEY);
+  remove(win, DRAFT_SESSION_KEY);
+  if (!entered && !tagged) return false;
+  try {
+    await win.fetch(`${ctx.zapOrigin}${DRAFT_SESSION_PATH}`, {
+      method: "DELETE",
+      headers: { Authorization: `Bearer ${token}` },
+      credentials: "omit"
+    });
+  } catch {
+  }
+  if (!isDraftRoutePath(ctx.draftRoute)) return false;
+  try {
+    const response = await win.fetch(draftExitUrl(win, ctx.draftRoute), {
+      method: "GET",
+      credentials: "same-origin",
+      redirect: "manual",
+      cache: "no-store"
+    });
+    if (response.type !== "opaqueredirect" && !response.ok) return false;
+  } catch {
+    return false;
+  }
+  win.location.reload();
+  return true;
+}
+
 // src/preview/site/suggestion.ts
 function editKindFor(tagged, field) {
   if (!tagged || !field || tagged.html) return null;
@@ -171,7 +562,33 @@ function proposedPart(proposal) {
     ]
   };
 }
+function sameValue(a, b) {
+  if (typeof a === "number" || typeof b === "number") return a === b;
+  return normalizeText(a) === normalizeText(b);
+}
+var LINE_BLOCKS = /* @__PURE__ */ new Set(["div", "p", "li"]);
+function editableText(element) {
+  let out = "";
+  const walk = (node) => {
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+      if (child.nodeType === 3) {
+        out += child.data;
+      } else if (child.nodeType === 1) {
+        const name = child.localName;
+        if (name === "br") {
+          out += "\n";
+          continue;
+        }
+        if (LINE_BLOCKS.has(name) && out !== "" && !out.endsWith("\n")) out += "\n";
+        walk(child);
+      }
+    }
+  };
+  walk(element);
+  return out;
+}
 function parseProposed(type, raw) {
+  raw = cleanStega(raw);
   if (type === "NUMBER") {
     const text = raw.trim().replace(",", ".");
     const value = Number(text);
@@ -224,6 +641,137 @@ function asDomAnchor(anchor) {
   return { tag, selector, textQuote: null, rect: NOWHERE, viewport: { w: 1, h: 1 } };
 }
 
+// src/preview/site/session.ts
+var REFRESH_LEAD_MS = 2 * 6e4;
+function createTokenSession(ctx, stored, hooks, deps = {}) {
+  const { win, doc } = ctx;
+  const now = deps.now ?? (() => Date.now());
+  const setT = deps.setTimeout ?? ((fn, ms) => win.setTimeout(fn, ms));
+  const clearT = deps.clearTimeout ?? ((handle) => win.clearTimeout(handle));
+  let current = stored;
+  let expired = false;
+  let destroyed = false;
+  let inflight = null;
+  let timer = null;
+  function markExpired() {
+    if (expired || destroyed) return;
+    expired = true;
+    stop();
+    clearToken(win);
+    hooks.onExpired();
+  }
+  async function renew() {
+    if (!refreshLive(current, now()) || !current.refresh) return false;
+    let response;
+    try {
+      response = await win.fetch(`${ctx.authOrigin}/api/oauth/token`, {
+        method: "POST",
+        credentials: "omit",
+        body: new URLSearchParams({
+          grant_type: "refresh_token",
+          refresh_token: current.refresh,
+          client_id: ctx.clientId
+        })
+      });
+    } catch {
+      return false;
+    }
+    if (!response.ok) return false;
+    try {
+      const next = await readTokenAnswer(response, ctx.siteId, now());
+      current = next;
+      writeToken(win, next);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  function refresh() {
+    if (expired || destroyed) return Promise.resolve(false);
+    inflight ?? (inflight = renew().finally(() => {
+      inflight = null;
+      if (!destroyed && !expired) schedule();
+    }));
+    return inflight;
+  }
+  async function check() {
+    if (expired || destroyed) return;
+    if (current.exp - REFRESH_LEAD_MS > now()) {
+      schedule();
+      return;
+    }
+    const ok = await refresh();
+    if (!ok && !accessLive(current, now())) markExpired();
+    else if (!ok) {
+      stop();
+      timer = setT(() => void lastTry(), Math.max(0, current.exp - EXPIRY_MARGIN_MS - now()));
+    }
+  }
+  async function lastTry() {
+    if (!await refresh()) markExpired();
+  }
+  function stop() {
+    if (timer !== null) clearT(timer);
+    timer = null;
+  }
+  function schedule() {
+    stop();
+    if (expired || destroyed) return;
+    timer = setT(() => void check(), Math.max(0, current.exp - REFRESH_LEAD_MS - now()));
+  }
+  const onVisible = () => {
+    if (doc.visibilityState === "visible") void check();
+  };
+  doc.addEventListener("visibilitychange", onVisible);
+  async function ensure() {
+    if (expired) return null;
+    if (accessLive(current, now())) return current.token;
+    if (await refresh()) return current.token;
+    markExpired();
+    return null;
+  }
+  async function call2(request) {
+    const token = await ensure();
+    if (token === null) return { ok: false, kind: "expired" };
+    const first = await request(token);
+    if (first.ok || first.kind !== "expired") return first;
+    if (await refresh()) {
+      const second = await request(current.token);
+      if (!second.ok && second.kind === "expired") markExpired();
+      return second;
+    }
+    markExpired();
+    return first;
+  }
+  void check();
+  return {
+    token: () => current.token,
+    get expired() {
+      return expired;
+    },
+    ensure,
+    refresh,
+    call: call2,
+    destroy() {
+      destroyed = true;
+      stop();
+      doc.removeEventListener("visibilitychange", onVisible);
+    }
+  };
+}
+var SESSION_MESSAGES = {
+  es: {
+    expiredTitle: "Tu sesi\xF3n de Zap expir\xF3",
+    expiredBody: "Vuelve a entrar para seguir editando y comentando.",
+    signInAgain: "Volver a entrar"
+  },
+  en: {
+    expiredTitle: "Your Zap session expired",
+    expiredBody: "Sign in again to keep editing and commenting.",
+    signInAgain: "Sign in again"
+  }
+};
+
 // src/preview/site/suggest.ts
 var OVERLAY_MODE = {
   navigate: "off",
@@ -236,24 +784,31 @@ var TOAST_MS = 8e3;
 var SAVED_MS = 4e3;
 function start(ctx, options = {}) {
   const { win, doc } = ctx;
-  const stored = readToken(win, ctx.siteId);
+  const stored = readSession(win, ctx.siteId);
   if (!stored) {
     void ctx.open("signin", { reason: "expired" });
     return { destroy() {
     } };
   }
-  const token = stored.token;
+  const auth = createTokenSession(ctx, stored, { onExpired: () => expire() });
+  const sm = SESSION_MESSAGES[ctx.locale];
   const m = SUGGEST_MESSAGES[ctx.locale];
-  const host = mountHost(doc, CSS);
+  const dm = DRAFT_SESSION_MESSAGES[ctx.locale];
+  let reopenEdit = takeEditIntent(win);
+  const host = mountHost(doc, CSS + DRAG_CSS);
   const layer = el(doc, "div", { class: "layer" });
   const marks = el(doc, "div", { class: "marks" });
   const bottom = el(doc, "div", { class: "bottom" });
-  layer.append(marks, bottom);
+  const tip = el(doc, "div", { class: "tip", attrs: { role: "tooltip" } });
+  layer.append(marks, bottom, tip);
+  const drag = barDrag(win, doc, bottom, m.move, m.moveTip);
+  const key = ctx.shortcut ? ctx.shortcut.toUpperCase() : null;
   host.root.append(layer);
   let mode = "navigate";
   let selection = [];
   let data = null;
   let refused = false;
+  let expired = false;
   let composer = null;
   let editing = null;
   let list = null;
@@ -266,6 +821,10 @@ function start(ctx, options = {}) {
   let pins = [];
   let numbers = /* @__PURE__ */ new Map();
   let lastClick = { x: 0, y: 0, additive: false };
+  let menuOpen = false;
+  let focusNext = null;
+  let entering = false;
+  let paused = null;
   const onClickFirst = (event) => {
     lastClick = {
       x: event.clientX,
@@ -274,6 +833,15 @@ function start(ctx, options = {}) {
     };
   };
   win.addEventListener("click", onClickFirst, true);
+  const onPressFirst = (event) => {
+    if (menuOpen && event.target !== host.host) setMenu(false);
+  };
+  win.addEventListener("pointerdown", onPressFirst, true);
+  layer.addEventListener("pointerdown", (event) => {
+    if (!menuOpen) return;
+    const keep = Array.from(bottom.querySelectorAll('.menu, [data-action="account"]'));
+    if (!keep.some((node) => node.contains(event.target))) setMenu(false);
+  });
   const index = new TagIndex(doc);
   index.scan();
   const overlay = new Overlay({
@@ -289,26 +857,47 @@ function start(ctx, options = {}) {
       const found = data?.comments.find((comment) => comment.id === id);
       if (!found) return;
       list = [found];
-      renderBottom();
+      if (drag.hidden()) setHidden(false, false);
+      else renderBottom();
     }
   });
   overlay.mount();
-  const stopObserving = observeTags(
-    doc.documentElement,
-    () => {
-      index.scan();
-      placePins();
-    },
-    {
-      ignore: (node) => {
-        const own = overlay.hostElement;
-        return node === host.host || !!own && (node === own || own.contains(node));
+  doc.documentElement.appendChild(host.host);
+  const check = tagGuard();
+  let stopObserving = () => {
+  };
+  const atBoot = check(index.elements.length, true);
+  if (atBoot) {
+    paused = atBoot;
+    console.warn(`eelzap: preview paused (${atBoot})`);
+  } else
+    stopObserving = observeTags(
+      doc.documentElement,
+      (page) => {
+        index.scan();
+        const reason = check(index.elements.length, page);
+        if (reason) pause(reason);
+        else placePins();
+      },
+      {
+        ignore: (node) => {
+          const own = overlay.hostElement;
+          return node === host.host || !!own && (node === own || own.contains(node));
+        }
       }
-    }
-  );
+    );
+  function pause(reason) {
+    if (paused) return;
+    paused = reason;
+    stopObserving();
+    console.warn(`eelzap: preview paused (${reason})`);
+    if (destroyed) return;
+    overlay.setPins([]);
+    setMode("navigate");
+  }
   async function load() {
     const refs = Array.from(new Set(index.elements.map((tagged) => tagged.recordRef)));
-    const result = await fetchOnPage(ctx, token, currentPageUrl(win), refs);
+    const result = await auth.call((token) => fetchOnPage(ctx, token, currentPageUrl(win), refs));
     if (destroyed) return;
     if (!result.ok) {
       onFailure(result);
@@ -317,13 +906,21 @@ function start(ctx, options = {}) {
     const first = data === null;
     data = result.data;
     const labels = {};
-    for (const fields of Object.values(data.fields ?? {})) {
-      for (const [key, field] of Object.entries(fields)) {
-        if (typeof field?.label === "string") labels[key] = field.label;
+    const foreign = {};
+    for (const [ref, fields] of Object.entries(data.fields ?? {})) {
+      const name = data.records?.[ref];
+      for (const [key2, field] of Object.entries(fields)) {
+        if (typeof field?.label !== "string") continue;
+        if (name) foreign[`${ref}#${key2}`] = [field.label, m.inRecord(name)];
+        else labels[key2] = field.label;
       }
     }
-    overlay.setLabels(labels);
+    overlay.setLabels(labels, foreign);
     if (!data.liveEditing && mode === "edit") setMode("navigate");
+    if (reopenEdit) {
+      reopenEdit = false;
+      if (canEdit()) setMode("edit");
+    }
     if (first && options.reason === "renewed") {
       const name = data.viewer?.name;
       setToast({ title: m.renewed, body: name ? m.renewedAs(name) : m.renewedBody });
@@ -357,51 +954,253 @@ function start(ctx, options = {}) {
   }
   function expire() {
     clearToken(win);
-    void ctx.open("signin", { reason: "expired" });
+    if (expired || destroyed) return;
+    expired = true;
+    closeComposer();
+    overlay.setMode("off");
+    renderBottom();
+  }
+  function signInAgain() {
+    void ctx.open("signin", { reason: "expired", signIn: true });
   }
   function canEdit() {
     return !!data?.liveEditing;
   }
   function setMode(next) {
-    if (next === "edit" && !canEdit()) return;
+    if (next === "edit" && !canEdit() || paused && next !== "navigate") return;
+    if (status === "preparing") return;
+    if (next === "edit" && !index.elements.length && !inDraftSession(win)) {
+      void prepareEdit();
+      return;
+    }
     endEdit();
     closeComposer();
     mode = next;
     selection = [];
     overlay.clearSelection();
     overlay.setMode(OVERLAY_MODE[next]);
+    if (next === "edit" && !index.elements.length)
+      setToast({ title: m.noFields, body: m.noFieldsBody });
     renderBottom();
   }
+  async function prepareEdit() {
+    setStatus("preparing");
+    const token = await auth.ensure();
+    if (token === null || destroyed) return;
+    const result = await requestDraftSession(ctx, token);
+    if (destroyed) return;
+    if (result.ok) {
+      win.location.assign(result.url);
+      return;
+    }
+    setStatus(null);
+    if (result.reason === "expired") {
+      expire();
+      return;
+    }
+    const body = result.reason === "no-route" ? dm.noRoute : result.reason === "rate" ? dm.rate(result.retryAfter) : dm.failed;
+    setToast({ title: m.noFields, body, error: result.reason !== "no-route" });
+  }
   function renderBottom() {
     if (destroyed) return;
+    hideTip();
+    const active = host.root.activeElement?.getAttribute("data-action");
+    const hidden = drag.hidden();
     const children = [];
     if (toast) children.push(toastCard(toast));
+    if (expired) {
+      children.push(expiredCard());
+      bottom.replaceChildren(...children);
+      drag.place();
+      marks.replaceChildren();
+      return;
+    }
     if (refused) {
       children.push(refusedCard());
       bottom.replaceChildren(...children);
+      drag.place();
       marks.replaceChildren();
       return;
     }
-    if (list) children.push(listCard(list));
-    if (selection.length > 0 && !composer) children.push(trayCard());
+    if (paused && !hidden) children.push(pausedCard(paused));
+    if (list && !hidden) children.push(listCard(list));
+    if (selection.length > 0 && !composer && !hidden) children.push(trayCard());
     if (status) {
       children.push(
         el(doc, "div", { class: "card status", attrs: { role: "status" } }, [
           status === "saved" ? icon(doc, "check", 14) : null,
-          status === "saved" ? m.saved : m.saving
+          status === "saved" ? m.saved : status === "preparing" ? dm.preparing : m.saving
         ])
       );
     }
-    children.push(toolbar());
+    if (menuOpen && !hidden) children.push(menuCard());
+    const bar = hidden ? pill() : toolbar();
+    if (entering) bar.setAttribute("data-enter", "");
+    entering = false;
+    children.push(bar);
     bottom.replaceChildren(...children);
+    drag.place();
     drawMarks();
+    const want = focusNext ?? active;
+    focusNext = null;
+    if (want)
+      bottom.querySelector(`[data-action="${want}"]`)?.focus({ preventScroll: true });
   }
-  function toolbar() {
+  function openCount() {
     const open = data?.comments.length ?? 0;
+    return [open, data?.truncated ? `${open}+` : String(open)];
+  }
+  function setMenu(open, focus = null) {
+    if (menuOpen === open && !focus) return;
+    menuOpen = open;
+    focusNext = focus;
+    renderBottom();
+  }
+  function setHidden(value, fromUi) {
+    if (refused || drag.hidden() === value) return;
+    if (value) {
+      endEdit();
+      closeComposer();
+      selection = [];
+      overlay.clearSelection();
+      list = null;
+      menuOpen = false;
+    }
+    drag.setHidden(value);
+    overlay.setMode(value ? "off" : OVERLAY_MODE[mode]);
+    focusNext = fromUi ? value ? "show" : "hide" : null;
+    entering = true;
+    renderBottom();
+  }
+  function withTip(target, text, end) {
+    const show = () => {
+      tip.replaceChildren(text);
+      if (key) tip.append(el(doc, "span", { class: "kbd", text: `Shift ${key}` }));
+      tip.classList.add("on");
+      const rect = target.getBoundingClientRect();
+      const vw = doc.documentElement.clientWidth || win.innerWidth;
+      const w = tip.offsetWidth;
+      const gap = end ? 15 : 8;
+      const x = end ? rect.right + 7 - w : rect.left + (rect.width - w) / 2;
+      tip.style.left = `${Math.min(Math.max(x, 8), vw - w - 8)}px`;
+      tip.style.top = bottom.hasAttribute("data-below") ? `${rect.bottom + gap}px` : `${rect.top - gap - tip.offsetHeight}px`;
+    };
+    const focus = () => {
+      try {
+        if (target.matches(":focus-visible")) show();
+      } catch {
+        show();
+      }
+    };
+    for (const [type, handler] of [
+      ["mouseenter", show],
+      ["focus", focus],
+      ["mouseleave", hideTip],
+      ["blur", hideTip],
+      ["pointerdown", hideTip]
+    ]) {
+      target.addEventListener(type, handler);
+    }
+    if (key) target.setAttribute("aria-keyshortcuts", `Shift+${key}`);
+    return target;
+  }
+  function hideTip() {
+    tip.classList.remove("on");
+  }
+  function avatar(name, large = false) {
+    return el(doc, "span", {
+      class: large ? "avatar lg" : "avatar",
+      attrs: { "aria-hidden": "true" },
+      text: initials(name)
+    });
+  }
+  function menuCard() {
+    const name = data?.viewer?.name ?? null;
+    const email = data?.viewer?.email ?? null;
+    const item = (action, label, glyph, run) => el(
+      doc,
+      "button",
+      {
+        class: "mi",
+        attrs: { type: "button", role: "menuitem", tabindex: "-1", "data-action": action },
+        on: {
+          click: run,
+          pointerenter: (event) => event.currentTarget.focus()
+        }
+      },
+      [icon(doc, glyph), label]
+    );
+    return el(
+      doc,
+      "div",
+      {
+        class: "card menu",
+        attrs: { role: "menu", "aria-label": m.accountMenu, tabindex: "-1", "data-action": "menu" },
+        on: { keydown: onMenuKey }
+      },
+      [
+        el(doc, "div", { class: "menu-head" }, [
+          avatar(name, true),
+          el(doc, "div", { class: "menu-who" }, [
+            el(doc, "span", { class: "menu-name", text: name ?? m.someone }),
+            email ? el(doc, "span", { class: "menu-mail", text: email }) : null
+          ])
+        ]),
+        el(doc, "div", { class: "sep", attrs: { role: "separator" } }),
+        item("open-zap", m.openInZap, "external", () => {
+          setMenu(false, "account");
+          win.open(zapUrl(data?.viewer?.editorUrl, ctx.zapOrigin), "_blank", "noopener");
+        }),
+        el(doc, "div", { class: "sep", attrs: { role: "separator" } }),
+        item("sign-out", m.signOut, "exit", exit)
+      ]
+    );
+  }
+  function onMenuKey(event) {
+    const e = event;
+    if (e.key === "Tab") {
+      setMenu(false, "account");
+      return;
+    }
+    const items = Array.from(bottom.querySelectorAll('.menu [role="menuitem"]'));
+    const at = items.indexOf(host.root.activeElement);
+    const to = { ArrowDown: at + 1, ArrowUp: at < 0 ? -1 : at - 1, Home: 0, End: -1 }[e.key];
+    if (to === void 0) return;
+    e.preventDefault();
+    items[(to + items.length) % items.length]?.focus();
+  }
+  function pill() {
+    const [open, shown] = openCount();
+    return withTip(
+      drag.grab(
+        el(
+          doc,
+          "button",
+          {
+            class: "card pill",
+            attrs: {
+              type: "button",
+              "aria-label": m.showBar(open).replace(String(open), shown) + (paused ? `. ${m.paused}` : ""),
+              "data-action": "show"
+            },
+            on: { click: () => setHidden(false, true) }
+          },
+          [
+            icon(doc, "zap", 20),
+            el(doc, "span", { class: "pill-count" }, [icon(doc, "thread", 14), shown])
+          ]
+        )
+      ),
+      m.show,
+      false
+    );
+  }
+  function toolbar() {
+    const [open, shown] = openCount();
     const name = data?.viewer?.name ?? null;
     const tool = (value, label, glyph) => {
-      const off = value === "edit" && !canEdit();
-      const why = off && data ? m.editOff : null;
+      const off = value === "edit" && !canEdit() || !!paused && value !== "navigate";
+      const why = paused && off ? m.paused : off && data ? m.editOff : null;
       return el(
         doc,
         "button",
@@ -425,6 +1224,8 @@ function start(ctx, options = {}) {
       "div",
       { class: "card toolbar", attrs: { role: "toolbar", "aria-label": m.toolbar } },
       [
+        drag.handle,
+        el(doc, "span", { class: "divider", attrs: { "aria-hidden": "true" } }),
         icon(doc, "zap", 20),
         el(doc, "div", { class: "segments", attrs: { role: "group", "aria-label": m.tools } }, [
           tool("navigate", m.navigate, "pointer"),
@@ -445,18 +1246,50 @@ function start(ctx, options = {}) {
               }
             }
           },
-          [
-            icon(doc, "thread"),
-            data?.truncated ? m.open(open).replace(String(open), `${open}+`) : m.open(open)
-          ]
+          [icon(doc, "thread"), m.open(open).replace(String(open), shown)]
         ),
         el(doc, "span", { class: "divider", attrs: { "aria-hidden": "true" } }),
-        name ? el(doc, "span", { class: "avatar", attrs: { title: name }, text: initials(name) }) : null,
         el(
           doc,
           "button",
-          { class: "tool", attrs: { type: "button", "data-action": "exit" }, on: { click: exit } },
-          [icon(doc, "exit"), m.exit]
+          {
+            class: "tool account",
+            attrs: {
+              type: "button",
+              "aria-haspopup": "menu",
+              "aria-expanded": String(menuOpen),
+              "aria-label": name ? m.account(name) : m.accountMenu,
+              "data-action": "account"
+            },
+            on: {
+              // A pointer opens onto the menu itself; Enter or Space onto its first item.
+              click: (event) => setMenu(
+                !menuOpen,
+                menuOpen ? "account" : event.detail ? "menu" : "open-zap"
+              ),
+              keydown: (event) => {
+                const k = event.key;
+                if (k !== "ArrowDown" && k !== "ArrowUp") return;
+                event.preventDefault();
+                setMenu(true, k === "ArrowUp" ? "sign-out" : "open-zap");
+              }
+            }
+          },
+          [avatar(name), icon(doc, "chevron", 13)]
+        ),
+        withTip(
+          el(
+            doc,
+            "button",
+            {
+              class: "tool hide",
+              attrs: { type: "button", "aria-label": m.hide, "data-action": "hide" },
+              on: { click: () => setHidden(true, true) }
+            },
+            [icon(doc, "eyeOff", 16)]
+          ),
+          m.hide,
+          true
         )
       ]
     );
@@ -517,7 +1350,7 @@ function start(ctx, options = {}) {
                 {
                   class: "item",
                   attrs: { type: "button", "data-comment": comment.id },
-                  on: { click: () => reveal(comment.id) }
+                  on: { click: () => reveal2(comment.id) }
                 },
                 [
                   n ? el(doc, "span", { class: "num", text: String(n) }) : null,
@@ -534,9 +1367,9 @@ function start(ctx, options = {}) {
       ]
     );
   }
-  function reveal(id) {
+  function reveal2(id) {
     const pin = pins.find((entry) => entry.id === id);
-    if (pin?.element) pin.element.scrollIntoView?.({ block: "center", behavior: "smooth" });
+    if (pin?.element) reveal(win, pin.element);
     else if (pin?.spot) {
       const root = doc.documentElement;
       win.scrollTo?.({
@@ -563,6 +1396,43 @@ function start(ctx, options = {}) {
       ]
     );
   }
+  function pausedCard(reason) {
+    return el(doc, "div", { class: "card refused paused", attrs: { role: "status" } }, [
+      icon(doc, "alert", 18),
+      el(doc, "div", { class: "toast-text" }, [
+        el(doc, "span", { class: "title", text: m.paused }),
+        el(doc, "span", {
+          class: "muted",
+          text: reason === "cap" ? m.pausedCap : m.pausedRunaway
+        })
+      ]),
+      el(doc, "button", {
+        class: "tool",
+        text: m.reload,
+        attrs: { type: "button", "data-action": "reload" },
+        on: { click: () => win.location.reload() }
+      })
+    ]);
+  }
+  function expiredCard() {
+    return el(doc, "div", { class: "card refused", attrs: { role: "alert" } }, [
+      icon(doc, "alert", 18),
+      el(doc, "div", { class: "toast-text" }, [
+        el(doc, "span", { class: "title", text: sm.expiredTitle }),
+        el(doc, "span", { class: "muted", text: sm.expiredBody })
+      ]),
+      el(
+        doc,
+        "button",
+        {
+          class: "tool",
+          attrs: { type: "button", "data-action": "sign-in-again" },
+          on: { click: signInAgain }
+        },
+        [icon(doc, "eel"), sm.signInAgain]
+      )
+    ]);
+  }
   function refusedCard() {
     return el(doc, "div", { class: "card refused", attrs: { role: "alert" } }, [
       icon(doc, "alert", 18),
@@ -603,11 +1473,12 @@ function start(ctx, options = {}) {
     renderBottom();
   }
   function exit() {
+    void leaveDraftSession(ctx, auth.token(), index.elements.length > 0);
     clearToken(win);
     ctx.close();
   }
   function placePins() {
-    if (destroyed || refused || !data) return;
+    if (destroyed || refused || paused || !data) return;
     const placed = pinsFor(data.comments ?? [], index, doc, win);
     pins = placed.pins;
     numbers = placed.numbers;
@@ -693,7 +1564,7 @@ function start(ctx, options = {}) {
     const field = fieldOf(data, tagged);
     const proposable = editKindFor(tagged, field) !== null;
     const target = single;
-    const before = field?.type === "URL" && target?.localName === "a" ? target.getAttribute("href") ?? "" : (target?.textContent ?? "").replace(/\s+/g, " ").trim();
+    const before = field?.type === "URL" && target?.localName === "a" ? target.getAttribute("href") ?? "" : normalizeText(target?.textContent ?? "");
     const spotPin = point ? anchors[0] : null;
     const textarea = el(doc, "textarea", {
       class: "composer",
@@ -879,7 +1750,7 @@ function start(ctx, options = {}) {
     const parsed = parseProposed(session.field.type, session.proposal.value);
     if (!parsed.ok) return "invalid";
     const before = parseProposed(session.field.type, session.before);
-    if (before.ok && before.value === parsed.value) return null;
+    if (before.ok && sameValue(before.value, parsed.value)) return null;
     return { fieldKey: session.tagged.fieldKey, locale: session.tagged.locale, value: parsed.value };
   }
   function refreshSend() {
@@ -921,7 +1792,8 @@ function start(ctx, options = {}) {
     session.busy = true;
     delete session.error.dataset.sticky;
     refreshSend();
-    const result = await createComment(ctx, token, body, session.idempotency.key);
+    const key2 = session.idempotency.key;
+    const result = await auth.call((token) => createComment(ctx, token, body, key2));
     if (destroyed || composer !== session) return;
     session.busy = false;
     if (!result.ok) {
@@ -968,7 +1840,7 @@ function start(ctx, options = {}) {
     const element = tagged.element;
     const pageUrl = currentPageUrl(win);
     const anchors = [toApiAnchor(buildAnchor(element, index, pageUrl, doc, win), tagged.recordRef)];
-    const before = field.type === "URL" && element.localName === "a" ? element.getAttribute("href") ?? "" : (element.textContent ?? "").replace(/\s+/g, " ").trim();
+    const before = field.type === "URL" && element.localName === "a" ? element.getAttribute("href") ?? "" : normalizeText(element.textContent ?? "");
     const inline = kind === "text" ? beginInlineEdit(element) : null;
     const session = {
       element,
@@ -1075,8 +1947,7 @@ function start(ctx, options = {}) {
   }
   function typedValue(session) {
     if (session.input) return session.input.value;
-    const element = session.element;
-    return element.innerText ?? element.textContent ?? "";
+    return editableText(session.element);
   }
   function finishEdit(session, keepTyped) {
     session.done = true;
@@ -1099,7 +1970,7 @@ function start(ctx, options = {}) {
       return;
     }
     const before = parseProposed(session.field.type, session.before);
-    if (before.ok && before.value === parsed.value) {
+    if (before.ok && sameValue(before.value, parsed.value)) {
       finishEdit(session, false);
       return;
     }
@@ -1118,7 +1989,8 @@ function start(ctx, options = {}) {
       anchors: session.anchors,
       proposal
     });
-    const result = await saveToDraft(ctx, token, body, newIdempotencyKey(win));
+    const draftKey = newIdempotencyKey(win);
+    const result = await auth.call((token) => saveToDraft(ctx, token, body, draftKey));
     if (destroyed) return;
     if (!result.ok) {
       session.revert();
@@ -1132,6 +2004,16 @@ function start(ctx, options = {}) {
     if (editing && !editing.done) commitEdit(editing);
   }
   const onKey = (event) => {
+    if (event.key === "Escape") hideTip();
+    if (menuOpen && event.key === "Escape") {
+      event.preventDefault();
+      setMenu(false, "account");
+      return;
+    }
+    if (ctx.shortcut && !editing && !composer && isShortcut(event, ctx.shortcut)) {
+      setHidden(!drag.hidden(), !!host.root.activeElement);
+      return;
+    }
     if (composer && event.key === "Escape") {
       event.preventDefault();
       closeComposer();
@@ -1147,17 +2029,21 @@ function start(ctx, options = {}) {
       commitEdit(session);
     }
   };
+  const blocks = () => mode !== "navigate" && !drag.hidden();
   const onClick = (event) => {
-    if (editing?.kind === "text" && !editing.done && editing.element.contains(event.target)) {
+    if (editing?.kind === "text" && !editing.done && editing.element.contains(event.target) || blocks() && event.target.closest?.("a[href],area[href]")) {
       event.preventDefault();
     }
   };
+  const onSubmit = (event) => {
+    if (blocks()) event.preventDefault();
+  };
   win.addEventListener("keydown", onKey, true);
   win.addEventListener("click", onClick, true);
+  win.addEventListener("submit", onSubmit, true);
   win.addEventListener("scroll", schedule, true);
   win.addEventListener("resize", schedule);
-  const expiry = win.setTimeout(expire, Math.max(0, stored.exp - Date.now() - 3e4));
-  overlay.setMode(OVERLAY_MODE[mode]);
+  overlay.setMode(drag.hidden() ? "off" : OVERLAY_MODE[mode]);
   renderBottom();
   void load();
   return {
@@ -1165,37 +2051,84 @@ function start(ctx, options = {}) {
       endEdit();
       destroyed = true;
       closeComposer();
-      win.clearTimeout(expiry);
+      auth.destroy();
       if (toastTimer !== null) win.clearTimeout(toastTimer);
       if (statusTimer !== null) win.clearTimeout(statusTimer);
       win.removeEventListener("click", onClickFirst, true);
+      win.removeEventListener("pointerdown", onPressFirst, true);
       win.removeEventListener("keydown", onKey, true);
       win.removeEventListener("click", onClick, true);
+      win.removeEventListener("submit", onSubmit, true);
       win.removeEventListener("scroll", schedule, true);
       win.removeEventListener("resize", schedule);
       stopObserving();
       overlay.destroy();
+      drag.destroy();
       host.destroy();
     }
   };
 }
+function zapUrl(editorUrl, zapOrigin) {
+  const home = new URL("/", zapOrigin);
+  try {
+    const url = new URL(editorUrl ?? "");
+    if (url.protocol === "https:" || url.protocol === "http:") return url.href;
+  } catch {
+  }
+  return home.href;
+}
 var CSS = `
 .marks { position: fixed; inset: 0; pointer-events: none; }
 .mark { position: fixed; border-radius: 4px; outline: 2px solid rgba(207,135,0,.55); }
 .bottom { position: fixed; left: 0; right: 0; bottom: 22px; display: flex; flex-direction: column;
   align-items: center; gap: 10px; pointer-events: none; padding: 0 8px; }
 .bottom > .card { position: relative; }
-.toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; white-space: nowrap;
+.toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 4px; white-space: nowrap;
   max-width: 100%; overflow-x: auto; }
-.segments { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: ${TOKENS.subtle}; }
-.seg { position: relative; height: 26px; padding: 0 9px; border-radius: 5px; font-size: 12px; color: ${TOKENS.muted}; }
+.segments { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: ${TOKENS.subtle};
+  background: oklch(0.94 0.008 250); }
+.seg { position: relative; height: 28px; padding: 0 10px; border-radius: 5px; font-size: 12px; color: ${TOKENS.muted}; }
 .seg[aria-pressed="true"] { background: ${TOKENS.bg}; color: ${TOKENS.fg}; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
 .seg[aria-disabled="true"] { opacity: .5; cursor: default; }
 .seg[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: 34px; left: 50%;
   transform: translateX(-50%); padding: 6px 10px; border-radius: 9px; background: ${TOKENS.dark}; color: #FFFFFF;
   font-size: 12px; white-space: nowrap; }
 .tool { height: 30px; padding: 0 9px; border-radius: 9px; color: ${TOKENS.muted}; }
-.tool:hover, .seg:not([aria-disabled="true"]):hover { background: ${TOKENS.subtle}; }
+/* Hover as the suite's SegmentedControl and ghost button (SitioBarraEstados): a tool on the track
+   gets foreground text over white at 60%, no shadow; the bar's own buttons, on the white card, the
+   ghost hover: foreground text over slate-100. Both keep the focus ring. */
+.seg:not([aria-pressed="true"]):not([aria-disabled="true"]):hover { background: rgba(255,255,255,.6); color: ${TOKENS.fg}; }
+.tool:hover, .grip:hover, .account[aria-expanded="true"] { background: #F1F5F9; color: ${TOKENS.fg}; }
+.seg, .tool, .grip, .pill { transition: color .15s cubic-bezier(.4,0,.2,1), background-color .15s cubic-bezier(.4,0,.2,1); }
+.seg:focus-visible, .tool:focus-visible, .grip:focus-visible { box-shadow: 0 0 0 3px ${TOKENS.focus}; }
+/* The account chip and the hide arrow (SitioBarraEstados): ghost buttons, chevrons muted until hover. */
+.account { padding: 0 4px 0 2px; gap: 3px; }
+.hide { width: 30px; padding: 0; justify-content: center; }
+.avatar.lg { width: 32px; height: 32px; }
+.menu { width: 260px; padding: 4px; border-radius: 11px; outline: none;
+  box-shadow: 0 10px 15px -3px rgba(15,23,42,.1), 0 4px 6px -4px rgba(15,23,42,.08); }
+.menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
+.menu-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.menu-name { font-weight: 500; }
+.menu-mail { font-size: 12px; color: ${TOKENS.muted}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sep { height: 1px; background: ${TOKENS.border}; margin: 4px -4px; }
+.menu-head + .sep { margin-top: 0; }
+.mi { width: 100%; height: 32px; gap: 9px; padding: 0 8px; border-radius: 7px; font-weight: 400; color: ${TOKENS.fg}; }
+.mi > .icon { color: ${TOKENS.muted}; }
+.mi:focus, .mi:focus-visible { outline: none; background: #F1F5F9; box-shadow: none; }
+.pill { height: 44px; gap: 8px; padding: 0 12px 0 11px; border-radius: 999px; }
+.pill:hover { background: #F8FAFC; }
+.pill:focus-visible { box-shadow: 0 0 0 3px ${TOKENS.focus}, 0 20px 25px -5px rgba(15,23,42,.12); }
+.pill-count { display: inline-flex; align-items: center; gap: 4px; }
+.tip { position: fixed; display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 9px;
+  border-radius: 7px; background: #101828; color: #FFFFFF; font-weight: 500; font-size: 12px; line-height: 18px;
+  white-space: nowrap; pointer-events: none; }
+.tip:not(.on) { display: none; }
+.kbd { font-size: 11px; line-height: 16px; color: #CBD5E1; padding: 1px 5px; border-radius: 4px;
+  background: rgba(255,255,255,.12); }
+[data-enter] { animation: eelzap-in .16s cubic-bezier(.4,0,.2,1); }
+@keyframes eelzap-in { from { opacity: 0; transform: scale(.96); } }
+@media (prefers-reduced-motion: reduce) { .seg, .tool, .grip, .pill { transition: none; } [data-enter] { animation: none; } }
 .tool.strong { color: ${TOKENS.fg}; }
 .divider { width: 1px; height: 22px; background: ${TOKENS.border}; }
 .avatar { width: 26px; height: 26px; border-radius: 7px; background: #DBEAFE; color: #1D4ED8;
@@ -1219,6 +2152,7 @@ var CSS = `
 .refused { align-self: center; margin-right: 0; width: min(420px, calc(100vw - 16px)); align-items: flex-start; }
 .toast > .icon { color: #16A34A; }
 .refused > .icon, .toast-error > .icon { color: ${TOKENS.danger}; }
+.paused > .icon { color: ${TOKENS.muted}; }
 .toast-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
 .title { font-weight: 600; }
 .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@@ -1251,6 +2185,7 @@ input.value { height: 36px; border-radius: 9px; }
 `;
 export {
   OVERLAY_HOST_TAG,
-  start
+  start,
+  zapUrl
 };
-//# sourceMappingURL=suggest-5RHURHED.js.map
+//# sourceMappingURL=suggest-JZ63L3WP.js.map