@8ux-co/eelzap 0.10.0 → 0.10.2

package/dist/suggest-KLS6B7AM.js

@@ -0,0 +1,2583 @@
+import {
+  OVERLAY_HOST_TAG,
+  Overlay,
+  TagIndex,
+  buildAnchor,
+  cleanStega,
+  findAnchorElement,
+  isDraftRoutePath,
+  isRecordRef,
+  isShortcut,
+  normalizeText,
+  observeTags,
+  parseRecordRef,
+  reveal,
+  tagGuard
+} from "./chunk-T6S3S5RH.js";
+import {
+  SUGGEST_MESSAGES,
+  TOKENS,
+  el,
+  icon,
+  initials,
+  kbd,
+  mountHost,
+  readTokenAnswer
+} from "./chunk-4ET7VBJA.js";
+import {
+  EXPIRY_MARGIN_MS,
+  accessLive,
+  clearToken,
+  readSession,
+  refreshLive,
+  writeToken
+} from "./chunk-6XHCA4U4.js";
+
+// src/preview/site/api.ts
+var BASE = "/api/public/v1/comments";
+async function call(ctx, token, path, init) {
+  const headers = { Authorization: `Bearer ${token}` };
+  if (init.body !== void 0) headers["Content-Type"] = "application/json";
+  if (init.idempotencyKey) headers["Idempotency-Key"] = init.idempotencyKey;
+  let response;
+  try {
+    response = await ctx.win.fetch(`${ctx.zapOrigin}${path}`, {
+      method: init.method,
+      headers,
+      credentials: "omit",
+      body: init.body === void 0 ? void 0 : JSON.stringify(init.body)
+    });
+  } catch {
+    return { ok: false, kind: "refused" };
+  }
+  if (response.status === 401) return { ok: false, kind: "expired" };
+  if (response.status === 403) return { ok: false, kind: "forbidden" };
+  if (response.status === 429) {
+    const seconds = Number.parseInt(response.headers.get("Retry-After") ?? "", 10);
+    return { ok: false, kind: "rate", retryAfter: seconds > 0 ? Math.min(seconds, 3600) : 30 };
+  }
+  if (response.status === 409) {
+    const body = await response.json().catch(() => null);
+    if (body?.error?.code === "NO_CHANGE") return { ok: false, kind: "unchanged" };
+  }
+  if (!response.ok) return { ok: false, kind: "invalid" };
+  try {
+    return { ok: true, data: await response.json() };
+  } catch {
+    return { ok: false, kind: "invalid" };
+  }
+}
+function fetchOnPage(ctx, token, pageUrl, refs) {
+  const query = new URLSearchParams({ url: pageUrl });
+  if (refs.length > 0) query.set("refs", refs.slice(0, 20).join(","));
+  return call(ctx, token, `${BASE}/on-page?${query.toString()}`, { method: "GET" });
+}
+function createComment(ctx, token, body, idempotencyKey) {
+  return call(ctx, token, BASE, { method: "POST", body, idempotencyKey });
+}
+function saveToDraft(ctx, token, body, idempotencyKey) {
+  return call(ctx, token, `${BASE}/save-to-draft`, { method: "POST", body, idempotencyKey });
+}
+function newIdempotencyKey(win) {
+  const native = win.crypto.randomUUID;
+  if (typeof native === "function") return native.call(win.crypto);
+  const bytes = win.crypto.getRandomValues(new Uint8Array(16));
+  bytes[6] = bytes[6] & 15 | 64;
+  bytes[8] = bytes[8] & 63 | 128;
+  const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+  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 rememberEditIntent(win, now = Date.now()) {
+  write2(win, EDIT_INTENT_KEY, { path: win.location.pathname, at: now });
+}
+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
+var SUGGESTIBLE_TYPES = ["TEXT", "LONG_TEXT", "NUMBER", "URL"];
+var INPUT_TYPES = /* @__PURE__ */ new Set(["URL", "NUMBER", "INTEGER", "CURRENCY", "DATE", "DATETIME"]);
+function proposableField(tagged, field) {
+  return !!tagged && !!field && !tagged.html && SUGGESTIBLE_TYPES.includes(field.type);
+}
+function editKindFor(tagged, field) {
+  if (!tagged || !field || tagged.html) return null;
+  if (field.type === "TEXT" || field.type === "LONG_TEXT") return "text";
+  if (INPUT_TYPES.has(field.type)) return "input";
+  if (field.type === "ENUM") return field.options?.length ? "choice" : null;
+  if (field.type === "BOOLEAN") return "switch";
+  return null;
+}
+var ZERO_DIGITS = /* @__PURE__ */ new Set([
+  "BIF",
+  "CLP",
+  "DJF",
+  "GNF",
+  "ISK",
+  "JPY",
+  "KMF",
+  "KRW",
+  "PYG",
+  "RWF",
+  "UGX",
+  "UYI",
+  "VND",
+  "VUV",
+  "XAF",
+  "XOF",
+  "XPF"
+]);
+var THREE_DIGITS = /* @__PURE__ */ new Set(["BHD", "IQD", "JOD", "KWD", "LYD", "OMR", "TND"]);
+function currencyDigits(code) {
+  const upper = (code ?? "").toUpperCase();
+  if (ZERO_DIGITS.has(upper)) return 0;
+  if (THREE_DIGITS.has(upper)) return 3;
+  return 2;
+}
+var pad = (n) => String(n).padStart(2, "0");
+function inputSpec(field, value) {
+  const digits = currencyDigits(field.currency);
+  const limits = { min: field.min, max: field.max };
+  const number = typeof value === "number" && Number.isFinite(value) ? value : null;
+  switch (field.type) {
+    case "NUMBER":
+      return {
+        type: "number",
+        text: number === null ? "" : String(number),
+        ...limits,
+        step: field.step ?? "any"
+      };
+    case "INTEGER":
+      return { type: "number", text: number === null ? "" : String(number), ...limits, step: 1 };
+    case "CURRENCY":
+      return {
+        type: "number",
+        text: number === null ? "" : (number / 10 ** digits).toFixed(digits),
+        ...limits,
+        step: field.step ?? 10 ** -digits
+      };
+    case "DATE":
+      return { type: "date", text: typeof value === "string" ? value.slice(0, 10) : "" };
+    case "DATETIME": {
+      const at = typeof value === "string" ? new Date(value) : null;
+      return {
+        type: "datetime-local",
+        text: at && Number.isFinite(at.getTime()) ? `${at.getFullYear()}-${pad(at.getMonth() + 1)}-${pad(at.getDate())}T${pad(at.getHours())}:${pad(at.getMinutes())}` : ""
+      };
+    }
+    default:
+      return { type: "text", text: typeof value === "string" ? value : "" };
+  }
+}
+function parseInput(field, raw) {
+  const text = cleanStega(raw).trim();
+  if (field.type === "URL") return { ok: true, value: normalizeText(text) };
+  if (text === "") return { ok: true, value: null };
+  const number = Number(text.replace(",", "."));
+  switch (field.type) {
+    case "NUMBER":
+      return Number.isFinite(number) ? { ok: true, value: number } : { ok: false };
+    case "INTEGER":
+      return Number.isInteger(number) ? { ok: true, value: number } : { ok: false };
+    case "CURRENCY":
+      return Number.isFinite(number) ? { ok: true, value: Math.round(number * 10 ** currencyDigits(field.currency)) } : { ok: false };
+    case "DATE":
+      return /^\d{4}-\d{2}-\d{2}$/.test(text) && Number.isFinite(Date.parse(text)) ? { ok: true, value: text } : { ok: false };
+    case "DATETIME": {
+      const at = new Date(text);
+      return Number.isFinite(at.getTime()) ? { ok: true, value: at.toISOString() } : { ok: false };
+    }
+    default:
+      return { ok: true, value: text };
+  }
+}
+function sameRaw(type, a, b) {
+  const before = a ?? null;
+  if (typeof before === "string" && typeof b === "string") {
+    if (type === "DATETIME") {
+      return Math.floor(Date.parse(before) / 6e4) === Math.floor(Date.parse(b) / 6e4);
+    }
+    return normalizeText(before) === normalizeText(b);
+  }
+  return before === b;
+}
+function fieldOf(data, tagged) {
+  if (!data || !tagged) return null;
+  const field = data.fields?.[tagged.recordRef]?.[tagged.fieldKey];
+  return field && typeof field.type === "string" ? field : null;
+}
+function recordFor(element, index) {
+  const tagged = index.closest(element);
+  if (tagged) return tagged.recordRef;
+  const entry = element.closest("[data-zap-entry]")?.getAttribute("data-zap-entry")?.trim();
+  if (entry && isRecordRef(entry)) return entry;
+  const counts = /* @__PURE__ */ new Map();
+  for (const row of index.summary()) {
+    counts.set(row.recordRef, (counts.get(row.recordRef) ?? 0) + row.count);
+  }
+  let best = null;
+  let most = 0;
+  for (const [ref, count] of counts) {
+    if (count > most) {
+      best = ref;
+      most = count;
+    }
+  }
+  return best;
+}
+function currentPageUrl(win) {
+  const { origin, pathname, search } = win.location;
+  return `${origin}${pathname}${search}`.slice(0, 2048);
+}
+var unit = (value) => Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
+var whole = (value, max) => Number.isFinite(value) ? Math.min(max, Math.max(1, Math.round(value))) : 1;
+function toApiAnchor(anchor, recordRef) {
+  const dom = anchor.dom;
+  const out = {
+    dom: {
+      ...dom.tag && dom.tag.length <= 500 ? { tag: dom.tag } : {},
+      ...dom.selector ? { selector: dom.selector } : {},
+      ...dom.textQuote ? {
+        textQuote: {
+          exact: dom.textQuote.exact.slice(0, 500),
+          prefix: dom.textQuote.prefix.slice(-32),
+          suffix: dom.textQuote.suffix.slice(0, 32)
+        }
+      } : {},
+      rect: { x: unit(dom.rect.x), y: unit(dom.rect.y), w: unit(dom.rect.w), h: unit(dom.rect.h) },
+      viewport: { w: whole(dom.viewport.w, 1e5), h: whole(dom.viewport.h, 1e6) }
+    }
+  };
+  if (anchor.field && anchor.field.recordRef === recordRef) {
+    out.field = {
+      key: anchor.field.key,
+      ...anchor.field.locale ? { locale: anchor.field.locale } : {}
+    };
+  }
+  return out;
+}
+function recordKeys(recordRef) {
+  const parsed = parseRecordRef(recordRef);
+  if (!parsed) return {};
+  return parsed.kind === "document" ? { document: parsed.key } : { collection: parsed.collection, slug: parsed.slug };
+}
+function buildCreateBody(input) {
+  const proposal = input.isChangeRequest ? input.proposal : null;
+  const comment = input.comment.trim();
+  const body = {
+    ...recordKeys(input.recordRef),
+    isChangeRequest: input.isChangeRequest,
+    pageUrl: input.pageUrl,
+    anchors: input.anchors.slice(0, 20),
+    body: (comment || (proposal ? String(proposal.value) : "")).slice(0, 1e4)
+  };
+  if (proposal) Object.assign(body, proposedPart(proposal));
+  return body;
+}
+function buildDraftBody(input) {
+  return {
+    ...recordKeys(input.recordRef),
+    pageUrl: input.pageUrl,
+    anchors: input.anchors.slice(0, 20),
+    body: (input.display ?? String(input.proposal.value ?? "")).slice(0, 1e4) || " ",
+    ...proposedPart(input.proposal)
+  };
+}
+function proposedPart(proposal) {
+  const locale = proposal.locale;
+  return {
+    ...locale ? { locale } : {},
+    proposedValues: [
+      { fieldKey: proposal.fieldKey, ...locale ? { locale } : {}, value: proposal.value }
+    ]
+  };
+}
+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);
+    return text !== "" && Number.isFinite(value) ? { ok: true, value } : { ok: false };
+  }
+  if (type === "TEXT" || type === "URL") return { ok: true, value: normalizeText(raw) };
+  return { ok: true, value: raw.replace(/\r\n?/g, "\n").trim() };
+}
+function spotAnchor(x, y, doc, win) {
+  const root = doc.documentElement;
+  const w = Math.max(root.scrollWidth, 1);
+  const h = Math.max(root.scrollHeight, 1);
+  return {
+    spot: { x: unit((x + win.scrollX) / w), y: unit((y + win.scrollY) / h) },
+    viewport: { w: whole(w, 1e5), h: whole(h, 1e6) }
+  };
+}
+function onPage(anchor) {
+  return !!(anchor?.spot || anchor?.rect || anchor?.tag || anchor?.selector);
+}
+function pinsFor(threads, index, doc, win) {
+  const numbers = /* @__PURE__ */ new Map();
+  const pins = [];
+  const numbered = threads.filter((thread) => Array.isArray(thread.anchors) && thread.anchors.some(onPage)).sort(
+    (a, b) => String(a.createdAt).localeCompare(String(b.createdAt)) || a.id.localeCompare(b.id)
+  );
+  numbered.forEach((thread, i) => {
+    const n = i + 1;
+    numbers.set(thread.id, n);
+    const spot = thread.anchors.find((anchor) => anchor?.spot)?.spot;
+    if (spot && Number.isFinite(spot.x) && Number.isFinite(spot.y)) {
+      pins.push({ id: thread.id, n, spot: { x: unit(spot.x), y: unit(spot.y) } });
+      return;
+    }
+    for (const anchor of thread.anchors) {
+      if (!onPage(anchor) || anchor.spot) continue;
+      const element = findAnchorElement(asDomAnchor(anchor), index, doc, win);
+      if (element && element !== doc.body && element !== doc.documentElement) {
+        pins.push({ id: thread.id, n, element });
+        return;
+      }
+    }
+  });
+  return { pins: pins.slice(0, 50), numbers };
+}
+var NOWHERE = { x: -1, y: -1, w: 0, h: 0 };
+function asDomAnchor(anchor) {
+  const tag = typeof anchor?.tag === "string" && anchor.tag.length <= 500 ? anchor.tag : null;
+  const selector = typeof anchor?.selector === "string" && anchor.selector.length <= 1024 ? anchor.selector : null;
+  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",
+  edit: "inspect",
+  comment: "select"
+};
+var PENDING_PIN = "eelzap:pending";
+var LARGE_SHARE = 0.5;
+var TOAST_MS = 8e3;
+var RELOAD_AFTER_SAVE_MS = 700;
+var SAVED_MS = 4e3;
+function start(ctx, options = {}) {
+  const { win, doc } = ctx;
+  const stored = readSession(win, ctx.siteId);
+  if (!stored) {
+    void ctx.open("signin", { reason: "expired" });
+    return { destroy() {
+    } };
+  }
+  const auth = createTokenSession(ctx, stored, { onExpired: () => expire() });
+  const sm = SESSION_MESSAGES[ctx.locale];
+  const m = SUGGEST_MESSAGES[ctx.locale];
+  const dm = DRAFT_SESSION_MESSAGES[ctx.locale];
+  let reopenEdit = takeEditIntent(win);
+  let retryDraft = !reopenEdit;
+  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" });
+  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;
+  let toast = null;
+  let info = null;
+  let toastTimer = null;
+  let status = null;
+  let statusTimer = null;
+  let frame = null;
+  let destroyed = false;
+  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,
+      y: event.clientY,
+      additive: event.shiftKey || event.metaKey || event.ctrlKey
+    };
+  };
+  win.addEventListener("click", onClickFirst, true);
+  const onPressFirst = (event) => {
+    if (event.target === host.host) return;
+    if (menuOpen) setMenu(false);
+    if (editing?.card && !editing.done) commitEdit(editing);
+    if (info) closeInfo();
+  };
+  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({
+    doc,
+    win,
+    index,
+    pinsWhenOff: true,
+    ignore: (target) => target === host.host,
+    onInspect: (tagged) => beginEdit(tagged),
+    onSelect: (elements) => onSelect(elements),
+    onPin: ({ id }) => {
+      if (id === PENDING_PIN) return;
+      const found = data?.comments.find((comment) => comment.id === id);
+      if (!found) return;
+      list = [found];
+      if (drag.hidden()) setHidden(false, false);
+      else renderBottom();
+    }
+  });
+  overlay.mount();
+  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 auth.call((token) => fetchOnPage(ctx, token, currentPageUrl(win), refs));
+    if (destroyed) return;
+    if (!result.ok) {
+      onFailure(result);
+      return;
+    }
+    const first = data === null;
+    data = result.data;
+    const labels = {};
+    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, 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 });
+    }
+    renderBottom();
+    placePins();
+  }
+  function onFailure(failure, during = "read") {
+    if (failure.kind === "expired") {
+      expire();
+      return;
+    }
+    if (failure.kind === "forbidden" && during === "edit") {
+      if (data) data.liveEditing = false;
+      setMode("navigate");
+      setToast({ title: m.editOff, body: m.editOffBody, error: true });
+      return;
+    }
+    if (failure.kind === "refused" || failure.kind === "forbidden") {
+      refused = true;
+      closeComposer();
+      overlay.setMode("off");
+      overlay.setPins([]);
+      renderBottom();
+      return;
+    }
+    const message = failure.kind === "rate" ? m.rateLimited(failure.retryAfter) : m.failed;
+    if (during === "comment" && composer) showError(message);
+    else
+      setToast({ title: during === "edit" ? m.saveFailed : m.failed, body: message, error: true });
+  }
+  function expire() {
+    clearToken(win);
+    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() || paused && next !== "navigate") return;
+    if (status === "preparing") return;
+    if (next === "edit" && !index.elements.length && (retryDraft || !inDraftSession(win))) {
+      retryDraft = false;
+      void prepareEdit();
+      return;
+    }
+    endEdit();
+    closeComposer();
+    closeInfo();
+    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 (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 : status === "preparing" ? dm.preparing : m.saving
+        ])
+      );
+    }
+    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 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(kbd(doc, "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() || !!paused && value !== "navigate";
+      const why = paused && off ? m.paused : off && data ? m.editOff : null;
+      return el(
+        doc,
+        "button",
+        {
+          class: "seg",
+          attrs: {
+            type: "button",
+            "aria-pressed": String(mode === value),
+            "aria-disabled": off ? "true" : null,
+            title: why,
+            "data-tip": why,
+            "data-mode": value
+          },
+          on: { click: () => setMode(value) }
+        },
+        [icon(doc, glyph, 14), label]
+      );
+    };
+    return el(
+      doc,
+      "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"),
+          tool("edit", m.edit, "pencil"),
+          tool("comment", m.comment, "commentPlus")
+        ]),
+        el(doc, "span", { class: "divider", attrs: { "aria-hidden": "true" } }),
+        el(
+          doc,
+          "button",
+          {
+            class: "tool strong",
+            attrs: { type: "button", "aria-expanded": String(!!list), "data-action": "open-list" },
+            on: {
+              click: () => {
+                list = list ? null : data?.comments ?? [];
+                renderBottom();
+              }
+            }
+          },
+          [icon(doc, "thread"), m.open(open).replace(String(open), shown)]
+        ),
+        el(doc, "span", { class: "divider", attrs: { "aria-hidden": "true" } }),
+        el(
+          doc,
+          "button",
+          {
+            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
+        )
+      ]
+    );
+  }
+  function trayCard() {
+    return el(doc, "div", { class: "card tray", attrs: { role: "status" } }, [
+      el(doc, "span", { text: m.selected(selection.length) }),
+      el(doc, "button", {
+        class: "btn btn-outline",
+        text: m.clearSelection,
+        attrs: { type: "button" },
+        on: {
+          click: () => {
+            selection = [];
+            overlay.clearSelection();
+            renderBottom();
+          }
+        }
+      }),
+      el(doc, "button", {
+        class: "btn btn-primary",
+        text: m.comment,
+        attrs: { type: "button", "data-action": "comment-selection" },
+        on: {
+          click: () => {
+            const elements = selection;
+            selection = [];
+            overlay.clearSelection();
+            openComposer(elements, null);
+          }
+        }
+      })
+    ]);
+  }
+  function listCard(comments) {
+    return el(
+      doc,
+      "div",
+      { class: "card list sheet", attrs: { role: "dialog", "aria-label": m.openTitle } },
+      [
+        el(doc, "div", { class: "head" }, [
+          el(doc, "h2", { text: m.openTitle }),
+          closeButton(m.dismiss, () => {
+            list = null;
+            renderBottom();
+          })
+        ]),
+        comments.length === 0 ? el(doc, "p", { class: "muted", text: m.noneOpen }) : el(
+          doc,
+          "ul",
+          {},
+          comments.map((comment) => {
+            const n = numbers.get(comment.id);
+            return el(doc, "li", {}, [
+              el(
+                doc,
+                "button",
+                {
+                  class: "item",
+                  attrs: { type: "button", "data-comment": comment.id },
+                  on: { click: () => reveal2(comment.id) }
+                },
+                [
+                  n ? el(doc, "span", { class: "num", text: String(n) }) : null,
+                  el(doc, "span", { class: "item-text" }, [
+                    el(doc, "span", { class: "who", text: comment.author?.name || m.someone }),
+                    comment.isChangeRequest ? el(doc, "span", { class: "flag", text: m.changeRequest }) : null,
+                    el(doc, "span", { class: "what", text: comment.excerpt ?? "" })
+                  ])
+                ]
+              )
+            ]);
+          })
+        )
+      ]
+    );
+  }
+  function reveal2(id) {
+    const pin = pins.find((entry) => entry.id === id);
+    if (pin?.element) reveal(win, pin.element);
+    else if (pin?.spot) {
+      const root = doc.documentElement;
+      win.scrollTo?.({
+        top: Math.max(0, pin.spot.y * root.scrollHeight - win.innerHeight / 2),
+        behavior: "smooth"
+      });
+    }
+  }
+  function toastCard(value) {
+    return el(
+      doc,
+      "div",
+      {
+        class: value.error ? "card toast toast-error" : "card toast",
+        attrs: { role: "status", "aria-live": "polite" }
+      },
+      [
+        icon(doc, value.error ? "alert" : "check", 18),
+        el(doc, "div", { class: "toast-text" }, [
+          el(doc, "span", { class: "title", text: value.title }),
+          el(doc, "span", { class: "muted", text: value.body })
+        ]),
+        closeButton(m.dismiss, () => setToast(null))
+      ]
+    );
+  }
+  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),
+      el(doc, "div", { class: "toast-text" }, [
+        el(doc, "span", { class: "title", text: m.refusedTitle }),
+        el(doc, "span", { class: "muted", text: m.refusedBody })
+      ]),
+      el(
+        doc,
+        "button",
+        { class: "tool", attrs: { type: "button", "data-action": "exit" }, on: { click: exit } },
+        [icon(doc, "exit"), m.exit]
+      )
+    ]);
+  }
+  function closeButton(label, onClick2) {
+    return el(
+      doc,
+      "button",
+      {
+        class: "iconbtn",
+        attrs: { type: "button", "aria-label": label, title: label },
+        on: { click: onClick2 }
+      },
+      [icon(doc, "x")]
+    );
+  }
+  function setToast(value) {
+    toast = value;
+    if (toastTimer !== null) win.clearTimeout(toastTimer);
+    toastTimer = value ? win.setTimeout(() => setToast(null), TOAST_MS) : null;
+    renderBottom();
+  }
+  function setStatus(value) {
+    status = value;
+    if (statusTimer !== null) win.clearTimeout(statusTimer);
+    statusTimer = value === "saved" ? win.setTimeout(() => setStatus(null), SAVED_MS) : null;
+    renderBottom();
+  }
+  function exit() {
+    void leaveDraftSession(ctx, auth.token(), index.elements.length > 0);
+    clearToken(win);
+    ctx.close();
+  }
+  function placePins() {
+    if (destroyed || refused || paused || !data) return;
+    const placed = pinsFor(data.comments ?? [], index, doc, win);
+    pins = placed.pins;
+    numbers = placed.numbers;
+    overlay.setPins(composer?.pin ? [...pins, composer.pin] : pins);
+  }
+  function drawMarks() {
+    const targets = editing ? [editing.element] : composer?.elements ?? [];
+    marks.replaceChildren(
+      ...targets.filter((element) => element.isConnected).map((element) => {
+        const rect = element.getBoundingClientRect();
+        const box = el(doc, "div", { class: "mark" });
+        box.style.left = `${rect.left - 3}px`;
+        box.style.top = `${rect.top - 3}px`;
+        box.style.width = `${rect.width + 6}px`;
+        box.style.height = `${rect.height + 6}px`;
+        if (editing?.card)
+          box.append(
+            el(doc, "span", {
+              class: "mark-chip",
+              text: editing.field.label || editing.tagged.fieldKey
+            })
+          );
+        return box;
+      })
+    );
+  }
+  function schedule() {
+    if (frame !== null) return;
+    const raf = win.requestAnimationFrame?.bind(win) ?? ((fn) => win.setTimeout(fn, 16));
+    frame = raf(() => {
+      frame = null;
+      drawMarks();
+      if (composer) position(composer.card, anchorRect(composer));
+      if (editing?.card)
+        position(editing.card, editing.element.getBoundingClientRect(), editing.card.offsetWidth);
+      if (info) position(info.card, info.tagged.element.getBoundingClientRect(), 300);
+    });
+  }
+  function position(card, rect, preferred = 420) {
+    const vw = win.innerWidth;
+    const vh = win.innerHeight;
+    const width = Math.min(preferred, vw - 16);
+    card.style.width = `${width}px`;
+    const height = card.offsetHeight || 260;
+    const bar = bottom.querySelector(".toolbar, .pill")?.getBoundingClientRect();
+    const clampX = (x) => Math.min(Math.max(8, x), Math.max(8, vw - width - 8));
+    const hits = (x, y) => !!bar && x < bar.right + 8 && x + width > bar.left - 8 && y < bar.bottom + 8 && y + height > bar.top - 8;
+    const fits = (y) => y >= 8 && y + height <= vh - 8;
+    let place = null;
+    for (const y of [rect.bottom + 10, rect.top - height - 10]) {
+      if (!fits(y)) continue;
+      for (const x of [
+        clampX(rect.left),
+        clampX((bar?.right ?? 0) + 8),
+        clampX((bar?.left ?? 0) - 8 - width)
+      ]) {
+        if (!hits(x, y)) {
+          place = [x, y];
+          break;
+        }
+      }
+      if (place) break;
+    }
+    if (!place) {
+      const y = fits(rect.bottom + 10) ? rect.bottom + 10 : Math.max(8, rect.top - height - 10);
+      place = [clampX(rect.left), y];
+    }
+    card.style.left = `${place[0]}px`;
+    card.style.top = `${place[1]}px`;
+  }
+  function onSelect(elements) {
+    if (mode !== "comment" || composer) return;
+    if (elements.length === 0) {
+      if (selection.length > 0) {
+        selection = [];
+        renderBottom();
+      }
+      return;
+    }
+    if (lastClick.additive || elements.length > 1) {
+      selection = elements;
+      renderBottom();
+      return;
+    }
+    const element = elements[0];
+    overlay.clearSelection();
+    if (isLarge(element)) openComposer([], { x: lastClick.x, y: lastClick.y }, element);
+    else openComposer([element], null);
+  }
+  function isLarge(element) {
+    const rect = element.getBoundingClientRect();
+    const area = Math.max(1, win.innerWidth * win.innerHeight);
+    return rect.width * rect.height / area >= LARGE_SHARE;
+  }
+  function anchorRect(session) {
+    const first = session.elements[0];
+    if (first) return first.getBoundingClientRect();
+    const point = session.point ?? { x: 0, y: 0 };
+    return { left: point.x, top: point.y, bottom: point.y };
+  }
+  function openComposer(elements, point, owner) {
+    if (refused || elements.length === 0 && !point) return;
+    const recordRef = recordFor(elements[0] ?? owner ?? doc.body, index);
+    if (!recordRef) {
+      setToast({ title: m.failed, body: m.noRecord, error: true });
+      return;
+    }
+    list = null;
+    const pageUrl = currentPageUrl(win);
+    const anchors = point ? [spotAnchor(point.x, point.y, doc, win)] : elements.slice(0, 20).map((element) => toApiAnchor(buildAnchor(element, index, pageUrl, doc, win), recordRef));
+    const single = elements.length === 1 ? elements[0] : null;
+    const own = single ? index.get(single) : null;
+    const tagged = own && own.recordRef === recordRef ? own : null;
+    const field = fieldOf(data, tagged);
+    const proposable = proposableField(tagged, field);
+    const target = single;
+    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",
+      attrs: {
+        "aria-label": m.commentLabel,
+        rows: "3",
+        maxlength: "10000",
+        placeholder: m.commentPlaceholder
+      }
+    });
+    const error = el(doc, "p", { class: "error", attrs: { role: "alert" } });
+    const sendButton = el(
+      doc,
+      "button",
+      {
+        class: "btn btn-primary",
+        attrs: { type: "button", "data-action": "send" },
+        on: { click: () => void submit() }
+      },
+      [icon(doc, "commentPlus", 16), m.comment]
+    );
+    const title = tagged ? el(doc, "span", { class: "chip" }, [
+      icon(doc, "field", 12),
+      field?.label || tagged.fieldKey
+    ]) : el(doc, "h2", {
+      text: elements.length > 1 ? m.selected(elements.length) : m.commentTitle
+    });
+    const extra = el(doc, "div", { class: "extra" });
+    const card = el(
+      doc,
+      "div",
+      { class: "card popover sheet", attrs: { role: "dialog", "aria-label": m.newComment } },
+      [
+        el(doc, "div", { class: "head" }, [title, closeButton(m.close, closeComposer)]),
+        el(doc, "div", { class: "content" }, [
+          textarea,
+          extra,
+          error,
+          // A dialog footer: a full-bleed rule, Cancelar and the primary (OWNER-PASS 19).
+          el(doc, "div", { class: "foot" }, [
+            el(doc, "button", {
+              class: "btn btn-outline",
+              text: m.cancel,
+              attrs: { type: "button" },
+              on: { click: closeComposer }
+            }),
+            sendButton
+          ])
+        ])
+      ]
+    );
+    layer.append(card);
+    composer = {
+      elements,
+      point,
+      pin: spotPin && "spot" in spotPin ? { id: PENDING_PIN, n: (numbers.size || 0) + 1, spot: spotPin.spot } : null,
+      recordRef,
+      pageUrl,
+      anchors,
+      tagged: proposable ? tagged : null,
+      field: proposable ? field : null,
+      before,
+      card,
+      textarea,
+      request: false,
+      proposing: false,
+      proposal: null,
+      error,
+      sendButton,
+      busy: false,
+      idempotency: null
+    };
+    renderExtra(extra);
+    textarea.addEventListener("input", refreshSend);
+    textarea.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter" || event.shiftKey || event.isComposing || event.keyCode === 229) {
+        return;
+      }
+      event.preventDefault();
+      if (!sendButton.disabled) void submit();
+    });
+    overlay.setMode("off");
+    placePins();
+    refreshSend();
+    renderBottom();
+    position(card, anchorRect(composer));
+    textarea.focus();
+  }
+  function renderExtra(extra) {
+    const session = composer;
+    if (!session) return;
+    const toggle = el(
+      doc,
+      "button",
+      {
+        class: "check",
+        attrs: {
+          type: "button",
+          role: "checkbox",
+          "aria-checked": String(session.request),
+          "data-action": "request-change"
+        },
+        on: {
+          click: () => {
+            session.request = !session.request;
+            if (!session.request) {
+              session.proposing = false;
+              session.proposal = null;
+            }
+            renderExtra(extra);
+            refreshSend();
+          }
+        }
+      },
+      [el(doc, "span", { class: "box", attrs: { "aria-hidden": "true" } }), m.requestChange]
+    );
+    const parts = [toggle];
+    if (session.request) {
+      parts.push(el(doc, "p", { class: "muted small", text: m.recipient }));
+      parts.push(el(doc, "p", { class: "muted small", text: m.requestHelp }));
+      if (session.tagged && session.field && !session.proposing) {
+        parts.push(
+          el(
+            doc,
+            "button",
+            {
+              class: "btn btn-outline propose",
+              attrs: { type: "button", "data-action": "propose" },
+              on: {
+                click: () => {
+                  session.proposing = true;
+                  renderExtra(extra);
+                  refreshSend();
+                  session.proposal?.focus();
+                }
+              }
+            },
+            [icon(doc, "pencil", 14), m.propose]
+          )
+        );
+      }
+      if (session.tagged && session.field && session.proposing) {
+        const label = session.field.label || session.tagged.fieldKey;
+        const input = session.field.type === "LONG_TEXT" ? el(doc, "textarea", {
+          class: "value",
+          attrs: { "aria-label": m.proposal, rows: "3", maxlength: "10000" }
+        }) : el(doc, "input", {
+          class: "value",
+          attrs: {
+            "aria-label": m.proposal,
+            type: "text",
+            inputmode: session.field.type === "NUMBER" ? "decimal" : null
+          }
+        });
+        input.value = session.proposal?.value ?? session.before;
+        input.addEventListener("input", refreshSend);
+        session.proposal = input;
+        parts.push(
+          el(doc, "div", { class: "proposal" }, [
+            el(doc, "div", { class: "head" }, [
+              el(doc, "span", { class: "small strong-text", text: `${m.proposalFor} ${label}` }),
+              closeButton(m.removeProposal, () => {
+                session.proposing = false;
+                session.proposal = null;
+                renderExtra(extra);
+                refreshSend();
+              })
+            ]),
+            session.before ? el(doc, "p", { class: "muted small before" }, [
+              `${m.now} `,
+              el(doc, "span", { class: "strong-text", text: session.before })
+            ]) : null,
+            input
+          ])
+        );
+      }
+    }
+    extra.replaceChildren(...parts.filter((part) => part !== null));
+  }
+  function proposalOf(session) {
+    if (!session.request || !session.proposing || !session.proposal) return null;
+    if (!session.tagged || !session.field) return null;
+    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 && sameValue(before.value, parsed.value)) return null;
+    return { fieldKey: session.tagged.fieldKey, locale: session.tagged.locale, value: parsed.value };
+  }
+  function refreshSend() {
+    const session = composer;
+    if (!session) return;
+    const proposal = proposalOf(session);
+    const comment = session.textarea.value.trim();
+    session.sendButton.replaceChildren(
+      icon(doc, session.request ? "pencil" : "commentPlus", 16),
+      session.busy ? m.sending : session.request ? m.requestChange : m.comment
+    );
+    const proposed = proposal && proposal !== "invalid" && String(proposal.value) !== "";
+    session.sendButton.disabled = session.busy || proposal === "invalid" || !comment && !proposed;
+    session.error.textContent = proposal === "invalid" ? m.invalidNumber : session.error.dataset.sticky ?? "";
+  }
+  function showError(message) {
+    if (!composer) return;
+    composer.error.dataset.sticky = message;
+    composer.error.textContent = message;
+  }
+  async function submit() {
+    const session = composer;
+    if (!session || session.busy) return;
+    const proposal = proposalOf(session);
+    if (proposal === "invalid") return;
+    const body = buildCreateBody({
+      recordRef: session.recordRef,
+      pageUrl: session.pageUrl,
+      anchors: session.anchors,
+      comment: session.textarea.value,
+      isChangeRequest: session.request,
+      proposal
+    });
+    if (!body.body) return;
+    const payload = JSON.stringify(body);
+    if (session.idempotency?.payload !== payload) {
+      session.idempotency = { payload, key: newIdempotencyKey(win) };
+    }
+    session.busy = true;
+    delete session.error.dataset.sticky;
+    refreshSend();
+    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) {
+      refreshSend();
+      onFailure(result, "comment");
+      return;
+    }
+    closeComposer();
+    const assignee = result.data?.thread?.assignee?.name;
+    setToast(
+      body.isChangeRequest ? {
+        title: m.sentRequest,
+        body: m.sentRequestBody(
+          typeof assignee === "string" && assignee ? assignee : null,
+          !!body.proposedValues
+        )
+      } : { title: m.sentComment, body: m.sentCommentBody }
+    );
+    void load();
+  }
+  function closeComposer() {
+    const session = composer;
+    if (!session) return;
+    composer = null;
+    session.card.remove();
+    if (!refused) {
+      overlay.setMode(OVERLAY_MODE[mode]);
+      placePins();
+    }
+    renderBottom();
+  }
+  function beginEdit(tagged) {
+    if (mode !== "edit" || refused || !canEdit()) return;
+    if (editing && !editing.done) {
+      if (editing.element === tagged.element) return;
+      commitEdit(editing);
+    }
+    const field = fieldOf(data, tagged);
+    const kind = editKindFor(tagged, field);
+    if (!kind || !field) {
+      openInfoCard(tagged);
+      return;
+    }
+    closeInfo();
+    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") ?? "" : normalizeText(element.textContent ?? "");
+    const stored2 = data?.values?.[tagged.recordRef]?.[tagged.fieldKey];
+    const legacy = field.type === "NUMBER" && stored2 === void 0 ? parseProposed("NUMBER", before) : null;
+    const raw = legacy?.ok ? legacy.value : stored2;
+    const inline = kind === "text" ? beginInlineEdit(element) : null;
+    const session = {
+      element,
+      tagged,
+      field,
+      kind,
+      recordRef: tagged.recordRef,
+      pageUrl,
+      anchors,
+      before,
+      raw,
+      picked: raw,
+      returnFocus: doc.activeElement,
+      revert: inline?.revert ?? (() => {
+      }),
+      keep: inline?.keep ?? (() => {
+      }),
+      card: null,
+      input: null,
+      done: false
+    };
+    editing = session;
+    if (inline) {
+      element.addEventListener("blur", () => commitEdit(session), { once: true });
+      element.focus?.();
+    } else if (kind === "choice") {
+      openChoiceCard(session);
+    } else if (kind === "switch") {
+      openSwitchCard(session);
+    } else {
+      openInputCard(session);
+    }
+    renderBottom();
+  }
+  function openValueCard(session, body, focus, width) {
+    const label = session.field.label || session.tagged.fieldKey;
+    const card = el(
+      doc,
+      "div",
+      {
+        class: "card editor",
+        attrs: { role: "dialog", "aria-label": label },
+        on: {
+          keydown: (event) => {
+            const e = event;
+            if (e.key !== "Enter" || e.target.getAttribute("role") === "option") return;
+            e.preventDefault();
+            commitEdit(session);
+          }
+        }
+      },
+      [
+        body,
+        el(doc, "div", { class: "keys" }, [
+          kbd(doc, "Enter"),
+          m.enterSaves,
+          kbd(doc, "Esc"),
+          m.escCancels
+        ])
+      ]
+    );
+    card.style.width = `${width}px`;
+    session.card = card;
+    layer.append(card);
+    position(card, session.element.getBoundingClientRect(), width);
+    focus.focus();
+  }
+  function openInputCard(session) {
+    const { field } = session;
+    const spec = field.type === "URL" ? { type: "url", text: session.before, min: void 0, max: void 0, step: void 0 } : inputSpec(field, session.raw);
+    const input = el(doc, "input", {
+      class: "value",
+      attrs: {
+        "aria-label": field.label || session.tagged.fieldKey,
+        type: spec.type,
+        min: spec.min === void 0 ? null : String(spec.min),
+        max: spec.max === void 0 ? null : String(spec.max),
+        step: spec.step === void 0 ? null : String(spec.step)
+      }
+    });
+    input.value = spec.text;
+    session.input = input;
+    const unit2 = field.type === "CURRENCY" ? field.currency ?? null : null;
+    openValueCard(
+      session,
+      unit2 ? el(doc, "div", { class: "with-unit" }, [
+        input,
+        el(doc, "span", { class: "muted", text: unit2 })
+      ]) : input,
+      input,
+      field.type === "URL" ? 280 : 220
+    );
+  }
+  function openChoiceCard(session) {
+    const buttons = (session.field.options ?? []).map(
+      (option) => el(
+        doc,
+        "button",
+        {
+          class: "option",
+          attrs: {
+            type: "button",
+            role: "option",
+            "aria-selected": String(option.id === session.raw),
+            tabindex: "-1"
+          },
+          on: {
+            click: () => {
+              session.picked = option.id;
+              commitEdit(session);
+            }
+          }
+        },
+        [
+          el(doc, "span", { class: "option-label", text: option.label }),
+          option.id === session.raw ? icon(doc, "tick", 14) : null
+        ]
+      )
+    );
+    const first = buttons.find((button) => button.getAttribute("aria-selected") === "true") ?? buttons[0];
+    first.tabIndex = 0;
+    const list2 = el(
+      doc,
+      "div",
+      {
+        class: "options",
+        attrs: { role: "listbox", "aria-label": m.options(session.field.label) },
+        on: {
+          keydown: (event) => {
+            const e = event;
+            const at = buttons.indexOf(host.root.activeElement);
+            const to = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: buttons.length - 1 }[e.key];
+            if (to === void 0) return;
+            e.preventDefault();
+            buttons[Math.min(buttons.length - 1, Math.max(0, to))]?.focus();
+          }
+        }
+      },
+      buttons
+    );
+    openValueCard(session, list2, first, 230);
+  }
+  function openSwitchCard(session) {
+    session.picked = session.raw === true;
+    const label = session.field.label || session.tagged.fieldKey;
+    const toggle = el(
+      doc,
+      "button",
+      {
+        class: "switch",
+        attrs: {
+          type: "button",
+          role: "switch",
+          "aria-checked": String(session.picked),
+          "aria-label": label
+        },
+        on: {
+          click: () => {
+            session.picked = !session.picked;
+            toggle.setAttribute("aria-checked", String(session.picked));
+          }
+        }
+      },
+      [el(doc, "span", { class: "knob" })]
+    );
+    openValueCard(
+      session,
+      el(doc, "div", { class: "switch-row" }, [
+        el(doc, "span", { class: "title", text: label }),
+        toggle
+      ]),
+      toggle,
+      220
+    );
+  }
+  function openInfoCard(tagged) {
+    closeInfo();
+    const field = fieldOf(data, tagged);
+    const label = field?.label || tagged.fieldKey;
+    const card = el(
+      doc,
+      "div",
+      { class: "card info", attrs: { role: "dialog", "aria-label": m.editInZap } },
+      [
+        icon(doc, "info", 16),
+        el(doc, "div", { class: "toast-text" }, [
+          el(doc, "span", { class: "title", text: m.editInZap }),
+          el(doc, "span", {
+            class: "muted",
+            text: m.editInZapBody(label, field?.type ?? "", tagged.recordRef.startsWith("doc:"))
+          }),
+          el(doc, "div", { class: "actions start" }, [
+            el(
+              doc,
+              "button",
+              {
+                class: "btn btn-outline",
+                attrs: { type: "button", "data-action": "open-field" },
+                on: {
+                  click: () => {
+                    closeInfo();
+                    win.open(fieldEditorUrl(tagged), "_blank", "noopener");
+                  }
+                }
+              },
+              [icon(doc, "external", 14), m.openInZap]
+            ),
+            el(
+              doc,
+              "button",
+              {
+                class: "btn btn-ghost",
+                attrs: { type: "button", "data-action": "comment-field" },
+                on: {
+                  click: () => {
+                    closeInfo();
+                    setMode("comment");
+                    if (mode === "comment") openComposer([tagged.element], null);
+                  }
+                }
+              },
+              [icon(doc, "commentPlus", 14), m.comment]
+            )
+          ])
+        ])
+      ]
+    );
+    info = { tagged, card };
+    layer.append(card);
+    position(card, tagged.element.getBoundingClientRect(), 300);
+  }
+  function closeInfo() {
+    info?.card.remove();
+    info = null;
+  }
+  function fieldEditorUrl(tagged) {
+    const own = !data?.records?.[tagged.recordRef];
+    const base = data?.editorUrls?.[tagged.recordRef] ?? (own ? data?.viewer?.editorUrl : null) ?? null;
+    const safe = zapUrl(base, ctx.zapOrigin);
+    if (!base) return safe;
+    try {
+      const url = new URL(safe);
+      url.searchParams.set("field", tagged.fieldKey);
+      return url.href;
+    } catch {
+      return safe;
+    }
+  }
+  function beginInlineEdit(target) {
+    const children = Array.from(target.childNodes);
+    const texts = [];
+    const walker = doc.createTreeWalker(
+      target,
+      4
+      /* NodeFilter.SHOW_TEXT */
+    );
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      texts.push([node, node.data]);
+    }
+    const hadAttribute = target.getAttribute("contenteditable");
+    target.setAttribute("contenteditable", "plaintext-only");
+    if (target.contentEditable !== "plaintext-only") target.setAttribute("contenteditable", "true");
+    target.setAttribute("spellcheck", "true");
+    const keep = () => {
+      if (hadAttribute === null) target.removeAttribute("contenteditable");
+      else target.setAttribute("contenteditable", hadAttribute);
+      target.removeAttribute("spellcheck");
+    };
+    return {
+      keep,
+      revert: () => {
+        keep();
+        target.replaceChildren(...children);
+        for (const [node, text] of texts) node.data = text;
+      }
+    };
+  }
+  function typedValue(session) {
+    if (session.input) return session.input.value;
+    return editableText(session.element);
+  }
+  function finishEdit(session, keepTyped) {
+    session.done = true;
+    if (keepTyped) session.keep();
+    else session.revert();
+    session.card?.remove();
+    if (editing === session) editing = null;
+    renderBottom();
+    const back = session.returnFocus;
+    if (session.card && back?.isConnected) back.focus?.({ preventScroll: true });
+  }
+  function cancelEdit(session) {
+    if (session.done) return;
+    finishEdit(session, false);
+  }
+  function commitEdit(session) {
+    if (session.done) return;
+    const { field, kind } = session;
+    const text = kind === "text" || field.type === "URL";
+    let value;
+    if (text) {
+      const parsed = parseProposed(field.type, typedValue(session));
+      const before = parseProposed(field.type, session.before);
+      if (parsed.ok && before.ok && sameValue(before.value, parsed.value)) {
+        finishEdit(session, false);
+        return;
+      }
+      if (!parsed.ok) return invalid(session);
+      value = parsed.value;
+    } else if (kind === "input") {
+      if (session.input?.validity?.badInput) return invalid(session);
+      const parsed = parseInput(field, typedValue(session));
+      if (!parsed.ok) return invalid(session);
+      value = parsed.value;
+    } else {
+      value = session.picked ?? null;
+    }
+    if (!text && sameRaw(field.type, session.raw, value)) {
+      finishEdit(session, false);
+      return;
+    }
+    finishEdit(session, true);
+    void save(
+      session,
+      { fieldKey: session.tagged.fieldKey, locale: session.tagged.locale, value },
+      kind === "choice" ? field.options?.find((option) => option.id === value)?.label : kind === "switch" ? value ? m.yes : m.no : void 0
+    );
+  }
+  function invalid(session) {
+    finishEdit(session, false);
+    setToast({ title: m.saveFailed, body: m.invalidNumber, error: true });
+  }
+  async function save(session, proposal, display) {
+    setStatus("saving");
+    const body = buildDraftBody({
+      recordRef: session.recordRef,
+      pageUrl: session.pageUrl,
+      anchors: session.anchors,
+      proposal,
+      display
+    });
+    const draftKey = newIdempotencyKey(win);
+    const result = await auth.call((token) => saveToDraft(ctx, token, body, draftKey));
+    if (destroyed) return;
+    if (!result.ok) {
+      setStatus(null);
+      if (result.kind === "unchanged") return;
+      session.revert();
+      onFailure(result, "edit");
+      return;
+    }
+    setStatus("saved");
+    if (data && session.raw !== void 0)
+      (data.values ?? (data.values = {}))[session.recordRef] = {
+        ...data.values[session.recordRef],
+        [session.tagged.fieldKey]: proposal.value
+      };
+    showSaved(session, display);
+  }
+  function showSaved(session, display) {
+    const { field, tagged, element } = session;
+    if (session.kind === "text" || field.type === "URL") return;
+    if (field.type === "ENUM" && display !== void 0 && tagged.source === "attr" && element.children.length === 0) {
+      element.textContent = display;
+      return;
+    }
+    rememberEditIntent(win);
+    win.setTimeout(() => win.location.reload(), RELOAD_AFTER_SAVE_MS);
+  }
+  function endEdit() {
+    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();
+      return;
+    }
+    if (info && event.key === "Escape") {
+      event.preventDefault();
+      closeInfo();
+      return;
+    }
+    const session = editing;
+    if (!session || session.done) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancelEdit(session);
+    } else if (event.key === "Enter" && session.kind === "text" && event.target === session.element && (session.field.type === "TEXT" || event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      commitEdit(session);
+    }
+  };
+  const blocks = () => mode !== "navigate" && !drag.hidden();
+  const onClick = (event) => {
+    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);
+  overlay.setMode(drag.hidden() ? "off" : OVERLAY_MODE[mode]);
+  renderBottom();
+  void load();
+  return {
+    destroy() {
+      endEdit();
+      destroyed = true;
+      closeComposer();
+      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 4px; white-space: nowrap;
+  max-width: 100%; overflow-x: auto; }
+.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}; }
+/* 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; }
+[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, .switch, .knob { 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;
+  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; }
+.status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
+  font-size: 12px; font-weight: 500; }
+.status > .icon { color: #16A34A; }
+.tray { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; }
+.list { width: min(420px, calc(100vw - 16px)); padding: 13px 10px 10px 15px; max-height: 50vh; overflow: auto; }
+.list ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+.item { width: 100%; text-align: left; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 9px; }
+.item:hover { background: ${TOKENS.subtle}; }
+.num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px 999px 999px 0; background: #CF8700;
+  color: #FFFFFF; font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
+.item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.who { font-weight: 600; font-size: 12px; }
+.flag { font-size: 11px; color: ${TOKENS.goldText}; }
+.what { font-weight: 400; color: ${TOKENS.muted}; overflow-wrap: anywhere; }
+.toast, .refused { width: min(340px, calc(100vw - 16px)); display: flex; gap: 11px; padding: 14px 12px 14px 16px;
+  align-self: flex-end; margin-right: 16px; }
+.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, .info > .icon { color: ${TOKENS.muted}; }
+.editor { min-width: max-content; }
+.editor, .info { position: fixed; padding: 8px; border-radius: 7px;
+  box-shadow: 0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.06); }
+.info { display: flex; gap: 10px; padding: 12px 14px; }
+.info > .icon { margin-top: 1px; }
+.info .title { font-weight: 500; }
+.info .muted { font-size: 12px; }
+.actions.start { justify-content: flex-start; margin-top: 10px; gap: 6px; }
+.actions.start .btn { height: 28px; gap: 7px; font-size: 12px; }
+.btn-ghost { border: 1px solid transparent; }
+.btn-ghost:hover { background: ${TOKENS.subtle}; }
+.keys { display: flex; align-items: center; gap: 5px; margin: 8px 2px 0; font-size: 12px; color: ${TOKENS.muted}; white-space: nowrap; }
+.editor input.value { height: 34px; border-radius: 8px; }
+.with-unit { display: flex; align-items: center; gap: 8px; }
+.options { display: flex; flex-direction: column; max-height: 260px; overflow: auto; }
+.option { width: 100%; height: 32px; gap: 8px; padding: 0 8px; border-radius: 6px; font-weight: 400; text-align: left; }
+.option:hover, .option:focus-visible { background: #F1F5F9; box-shadow: none; }
+.option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 0; }
+.switch-row .title { font-weight: 500; }
+.switch { position: relative; width: 32px; height: 18px; border-radius: 999px; background: #CBD5E1; transition: background .15s; }
+.switch[aria-checked="true"] { background: ${TOKENS.primary}; }
+.knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: ${TOKENS.bg};
+  box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: left .15s; }
+.switch[aria-checked="true"] .knob { left: 16px; }
+.mark-chip { position: absolute; right: -5px; top: -27px; display: inline-flex; align-items: center; height: 20px;
+  padding: 0 7px; border-radius: 6px; background: ${TOKENS.gold}; color: #FFFFFF; font: 600 12px Poppins, ui-sans-serif, system-ui, sans-serif;
+  white-space: nowrap; }
+.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; }
+.popover { border-radius: 13px; }
+.popover > .head { padding: 13px 10px 0 15px; }
+.content { display: flex; flex-direction: column; gap: 11px; padding: 10px 15px 15px; }
+.extra { display: flex; flex-direction: column; gap: 8px; }
+.check { gap: 8px; font-size: 13px; align-self: flex-start; }
+.check .box { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #90A1B9; background: ${TOKENS.bg}; }
+.check[aria-checked="true"] .box { background: ${TOKENS.primary}; border-color: ${TOKENS.primaryBorder};
+  box-shadow: inset 0 0 0 3px ${TOKENS.bg}; }
+.propose { align-self: flex-start; height: 30px; }
+.proposal { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: ${TOKENS.goldTint}; }
+.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 7px;
+  background: ${TOKENS.goldTint}; color: ${TOKENS.goldText}; font: 400 12px Poppins, ui-sans-serif, system-ui, sans-serif;
+  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
+.before { overflow-wrap: anywhere; }
+.strong-text { color: ${TOKENS.fg}; }
+.small { font-size: 12px; }
+.composer, .value { width: 100%; font: 400 13px/22px Poppins, ui-sans-serif, system-ui, sans-serif; color: ${TOKENS.fg};
+  border: 1px solid ${TOKENS.border}; border-radius: 12px; padding: 8px 12px; background: ${TOKENS.bg}; resize: vertical; }
+input.value { height: 36px; border-radius: 9px; }
+.composer:focus, .value:focus { border-color: #90A1B9; box-shadow: 0 0 0 3px ${TOKENS.focus}; outline: none; }
+.error:empty { display: none; }
+.actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
+.foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 2px -15px -15px;
+  padding: 11px 15px; border-top: 1px solid ${TOKENS.border}; }
+.foot .btn { height: 30px; gap: 7px; }
+.foot .btn-outline { padding: 0 14px; }
+`;
+export {
+  OVERLAY_HOST_TAG,
+  start,
+  zapUrl
+};
+//# sourceMappingURL=suggest-KLS6B7AM.js.map