@8ux-co/eelzap 0.0.0-stage → 0.10.0

package/dist/chunk-VW4EH7NY.js

@@ -0,0 +1,1162 @@
+import {
+  __publicField
+} from "./chunk-QN53G5P7.js";
+
+// src/refs.ts
+var FIELD_KEY_RE = /^[a-z][a-z0-9_]{0,127}$/;
+var ENTRY_REF_RE = /^([a-z0-9]+(?:-[a-z0-9]+)*)\/([a-z0-9]+(?:-[a-z0-9]+)*)$/;
+var DOC_REF_RE = /^doc:([a-z0-9]+(?:-[a-z0-9]+)*)$/;
+var MAX_REF_LENGTH = 300;
+function parseRecordRef(value) {
+  if (typeof value !== "string" || value.length > MAX_REF_LENGTH) return null;
+  const doc = DOC_REF_RE.exec(value);
+  if (doc) return { kind: "document", key: doc[1] };
+  const entry = ENTRY_REF_RE.exec(value);
+  if (entry) return { kind: "entry", collection: entry[1], slug: entry[2] };
+  return null;
+}
+function isRecordRef(value) {
+  return parseRecordRef(value) !== null;
+}
+var PREVIEW_TOKEN_RE = /^zpt_[A-Za-z0-9_-]{43}$/;
+function isPreviewTokenShape(value) {
+  return typeof value === "string" && PREVIEW_TOKEN_RE.test(value);
+}
+function isFieldKey(value) {
+  return typeof value === "string" && FIELD_KEY_RE.test(value);
+}
+function recordRefsOf(entry) {
+  if (!entry) return [];
+  if (typeof entry === "string") return isRecordRef(entry) ? [entry] : [];
+  const refs = [];
+  const add = (ref) => {
+    if (isRecordRef(ref) && !refs.includes(ref)) refs.push(ref);
+  };
+  const collection = entry.collection?.key;
+  if (collection) {
+    if (entry.slug) add(`${collection}/${entry.slug}`);
+    for (const slug of Object.values(entry.localizedSlugs ?? {})) {
+      if (slug) add(`${collection}/${slug}`);
+    }
+  } else if (entry.key) {
+    add(`doc:${entry.key}`);
+  }
+  return refs;
+}
+function zapAttrs(entry, fieldKey) {
+  const [ref] = recordRefsOf(entry);
+  if (!ref || !isFieldKey(fieldKey)) return {};
+  return { "data-zap": `${ref}#${fieldKey}` };
+}
+
+// src/preview/protocol.ts
+var PROTOCOL_SOURCE = "eel-zap";
+var PAGE_UNLOAD_ERROR = "PAGE_UNLOAD";
+var PROTOCOL_VERSION = 1;
+var MAX_MESSAGE_BYTES = 256 * 1024;
+var MAX_ANCHORS = 20;
+var MAX_QUOTE_EXACT = 500;
+var MAX_QUOTE_CONTEXT = 32;
+var MAX_SELECTOR_BYTES = 1024;
+var MAX_URL_LENGTH = 2048;
+var MAX_TAG_REPORT = 2e3;
+var MAX_LABELS = 500;
+var MAX_PINS = 50;
+var OVERLAY_MODES = ["inspect", "select", "spot", "off"];
+var CAPABILITIES = ["overlay", "values", "stega", "pins", "links"];
+var MAX_EMAIL_LENGTH = 320;
+function emptyDropStats() {
+  return {
+    "not-envelope": 0,
+    oversize: 0,
+    "unknown-type": 0,
+    "invalid-payload": 0,
+    "wrong-source": 0,
+    "wrong-origin": 0,
+    "wrong-session": 0
+  };
+}
+var LOCALE_RE = /^[A-Za-z]{2,3}(?:-[A-Za-z0-9]{2,8}){0,3}$/;
+var SESSION_RE = /^[0-9a-f]{32}$/;
+var COLOR_RE = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+var ERROR_CODE_RE = /^[A-Z][A-Z0-9_]{0,63}$/;
+var PIN_ID_RE = /^[A-Za-z0-9_-]{1,64}$/;
+function isLocale(value) {
+  return typeof value === "string" && LOCALE_RE.test(value);
+}
+function isSession(value) {
+  return typeof value === "string" && SESSION_RE.test(value);
+}
+function isObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isString(value, max) {
+  return typeof value === "string" && value.length <= max;
+}
+function isFiniteNumber(value, min, max) {
+  return typeof value === "number" && Number.isFinite(value) && value >= min && value <= max;
+}
+function isOptional(value, check) {
+  return value === void 0 || check(value);
+}
+function isNullableString(value, max) {
+  return value === null || value === void 0 || isString(value, max);
+}
+function isHttpUrl(value) {
+  if (!isString(value, MAX_URL_LENGTH)) return false;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:";
+  } catch {
+    return false;
+  }
+}
+var MAX_DRAFT_ROUTE_LENGTH = 512;
+var DRAFT_ROUTE_RE = /^\/[A-Za-z0-9\-._~!$&'()*+,;=:@%/]*$/;
+function isDraftRoutePath(value) {
+  if (typeof value !== "string" || value.length > MAX_DRAFT_ROUTE_LENGTH) return false;
+  if (!DRAFT_ROUTE_RE.test(value) || value.includes("//")) return false;
+  return !value.split("/").some((segment2) => /^(?:\.|%2e){1,2}$/i.test(segment2));
+}
+function isMode(value) {
+  return typeof value === "string" && OVERLAY_MODES.includes(value);
+}
+function isTheme(value) {
+  if (!isObject(value)) return false;
+  for (const key of ["outline", "chip", "chipText"]) {
+    const v = value[key];
+    if (v !== void 0 && !(typeof v === "string" && COLOR_RE.test(v))) return false;
+  }
+  return true;
+}
+function isZoom(value) {
+  return isFiniteNumber(value, 0.05, 4);
+}
+function isPinId(value) {
+  return typeof value === "string" && PIN_ID_RE.test(value);
+}
+function isSpotPoint(value) {
+  return isObject(value) && isFiniteNumber(value.x, 0, 1) && isFiniteNumber(value.y, 0, 1);
+}
+function isPin(value) {
+  return isObject(value) && isPinId(value.id) && Number.isInteger(value.n) && isFiniteNumber(value.n, 1, 999) && value.spot === void 0 !== (value.dom === void 0) && (value.spot === void 0 ? isDomAnchor(value.dom) : isSpotPoint(value.spot));
+}
+function isFieldRef(value) {
+  return isObject(value) && isRecordRef(value.recordRef) && isFieldKey(value.fieldKey);
+}
+function isPreviewValue(value) {
+  if (value === null || typeof value === "boolean") return true;
+  if (typeof value === "string") return true;
+  if (typeof value === "number") return Number.isFinite(value);
+  if (!isObject(value)) return false;
+  const keys = Object.keys(value);
+  if (keys.length !== 1) return false;
+  if ("text" in value) return typeof value.text === "string";
+  if ("html" in value) return typeof value.html === "string";
+  if ("url" in value) return isString(value.url, MAX_URL_LENGTH);
+  if ("email" in value) return isString(value.email, MAX_EMAIL_LENGTH);
+  if ("image" in value) {
+    const image = value.image;
+    return isObject(image) && isNullableString(image.src, MAX_URL_LENGTH) && isNullableString(image.srcset, MAX_URL_LENGTH * 4) && isNullableString(image.alt, 2e3);
+  }
+  return false;
+}
+function isTextQuote(value) {
+  return isObject(value) && isString(value.exact, MAX_QUOTE_EXACT) && isString(value.prefix, MAX_QUOTE_CONTEXT) && isString(value.suffix, MAX_QUOTE_CONTEXT);
+}
+function isRect(value) {
+  return isObject(value) && isFiniteNumber(value.x, -1, 2) && isFiniteNumber(value.y, -1, 2) && isFiniteNumber(value.w, 0, 2) && isFiniteNumber(value.h, 0, 2);
+}
+function utf8Length(value) {
+  return new TextEncoder().encode(value).length;
+}
+function isDomAnchor(value) {
+  if (!isObject(value)) return false;
+  const tagOk = value.tag === null || isString(value.tag, 512) && parseTag(value.tag) !== null;
+  const selectorOk = value.selector === null || typeof value.selector === "string" && value.selector.length > 0 && utf8Length(value.selector) <= MAX_SELECTOR_BYTES;
+  const viewport = value.viewport;
+  return tagOk && selectorOk && (value.textQuote === null || isTextQuote(value.textQuote)) && isRect(value.rect) && isObject(viewport) && isFiniteNumber(viewport.w, 0, 1e5) && isFiniteNumber(viewport.h, 0, 1e7);
+}
+function isPageAnchor(value) {
+  if (!isObject(value)) return false;
+  const field = value.field;
+  const fieldOk = field === null || isObject(field) && isRecordRef(field.recordRef) && isFieldKey(field.key) && (field.locale === null || isLocale(field.locale));
+  return fieldOk && isDomAnchor(value.dom) && isHttpUrl(value.pageUrl);
+}
+function isAnchorList(value, check) {
+  return Array.isArray(value) && value.length <= MAX_ANCHORS && value.every(check);
+}
+function parseTag(value) {
+  const trimmed = value.trim();
+  const hash = trimmed.lastIndexOf("#");
+  if (hash <= 0) return null;
+  const recordRef = trimmed.slice(0, hash);
+  const fieldKey = trimmed.slice(hash + 1);
+  if (!isRecordRef(recordRef) || !isFieldKey(fieldKey)) return null;
+  return { recordRef, fieldKey };
+}
+var PAGE_VALIDATORS = {
+  "zap:ready": (p) => isObject(p) && isString(p.version, 32) && Array.isArray(p.capabilities) && p.capabilities.length <= CAPABILITIES.length && p.capabilities.every((c) => CAPABILITIES.includes(c)) && isHttpUrl(p.pageUrl) && (p.draftRoute === void 0 || p.draftRoute === null || isDraftRoutePath(p.draftRoute)),
+  "zap:tags": (p) => Array.isArray(p) && p.length <= MAX_TAG_REPORT && p.every(
+    (t) => isObject(t) && typeof t.tag === "string" && isRecordRef(t.recordRef) && isFieldKey(t.fieldKey) && t.tag === `${t.recordRef}#${t.fieldKey}` && Number.isInteger(t.count) && t.count > 0 && (t.source === void 0 || t.source === "stega" || t.source === "attr")
+  ),
+  "zap:click": isFieldRef,
+  "zap:select": (p) => isObject(p) && isAnchorList(p.anchors, isPageAnchor),
+  "zap:navigate": (p) => isObject(p) && isHttpUrl(p.url),
+  "zap:error": (p) => isObject(p) && typeof p.code === "string" && ERROR_CODE_RE.test(p.code) && isOptional(p.detail, (d) => isString(d, 500)),
+  "zap:spot": (p) => isObject(p) && isSpotPoint(p.spot) && isObject(p.viewport) && isFiniteNumber(p.viewport.w, 1, 1e5) && isFiniteNumber(p.viewport.h, 1, 1e7) && isHttpUrl(p.pageUrl),
+  "zap:pin": (p) => isObject(p) && isPinId(p.id)
+};
+var EDITOR_VALIDATORS = {
+  "zap:hello": (p) => {
+    if (!isObject(p) || !isSession(p.session) || !isString(p.siteKey, 128)) return false;
+    if (!isLocale(p.locale) || !isRecordRef(p.recordRef) || !isMode(p.mode)) return false;
+    if (p.theme !== void 0 && !isTheme(p.theme)) return false;
+    if (p.zoom !== void 0 && !isZoom(p.zoom)) return false;
+    if (p.previewToken !== void 0 && !isPreviewTokenShape(p.previewToken)) return false;
+    const labels = p.labels;
+    if (!isObject(labels)) return false;
+    const entries = Object.entries(labels);
+    return entries.length <= MAX_LABELS && entries.every(([key, label]) => isFieldKey(key) && isString(label, 200));
+  },
+  "zap:values": (p) => {
+    if (!isObject(p) || !isRecordRef(p.recordRef) || !isLocale(p.locale)) return false;
+    const patch = p.patch;
+    if (!isObject(patch)) return false;
+    return Object.entries(patch).every(([key, value]) => isFieldKey(key) && isPreviewValue(value));
+  },
+  "zap:focus-field": isFieldRef,
+  "zap:mode": isMode,
+  "zap:zoom": (p) => isObject(p) && isZoom(p.zoom),
+  "zap:highlight": (p) => isObject(p) && isAnchorList(p.anchors, isDomAnchor),
+  "zap:pins": (p) => isObject(p) && Array.isArray(p.pins) && p.pins.length <= MAX_PINS && p.pins.every(isPin)
+};
+var PAGE_MESSAGE_TYPES = /* @__PURE__ */ Object.keys(PAGE_VALIDATORS);
+var EDITOR_MESSAGE_TYPES = /* @__PURE__ */ Object.keys(
+  EDITOR_VALIDATORS
+);
+function messageBytes(data) {
+  try {
+    const json = JSON.stringify(data);
+    return json === void 0 ? Infinity : utf8Length(json);
+  } catch {
+    return Infinity;
+  }
+}
+function parseWith(data, validators) {
+  if (!isObject(data) || data.source !== PROTOCOL_SOURCE || data.v !== PROTOCOL_VERSION || typeof data.session !== "string" || data.session.length > 64 || typeof data.type !== "string") {
+    return { ok: false, reason: "not-envelope" };
+  }
+  if (messageBytes(data) > MAX_MESSAGE_BYTES) return { ok: false, reason: "oversize" };
+  const validate = Object.prototype.hasOwnProperty.call(validators, data.type) ? validators[data.type] : void 0;
+  if (!validate) return { ok: false, reason: "unknown-type" };
+  if (!validate(data.payload)) return { ok: false, reason: "invalid-payload" };
+  return {
+    ok: true,
+    message: {
+      source: PROTOCOL_SOURCE,
+      v: PROTOCOL_VERSION,
+      session: data.session,
+      type: data.type,
+      payload: data.payload
+    }
+  };
+}
+function parseEditorMessage(data) {
+  return parseWith(data, EDITOR_VALIDATORS);
+}
+function parsePageMessage(data) {
+  return parseWith(data, PAGE_VALIDATORS);
+}
+function envelope(type, session, payload) {
+  return { source: PROTOCOL_SOURCE, v: PROTOCOL_VERSION, session, type, payload };
+}
+
+// src/preview/anchor.ts
+function cssEscape(value) {
+  const native = globalThis.CSS?.escape;
+  if (native) return native(value);
+  let out = "";
+  for (let i = 0; i < value.length; i++) {
+    const ch = value.charAt(i);
+    const code = value.charCodeAt(i);
+    const digit = code >= 48 && code <= 57;
+    if (code === 0) out += "\uFFFD";
+    else if (code >= 1 && code <= 31 || code === 127 || i === 0 && digit || i === 1 && digit && value.charCodeAt(0) === 45) {
+      out += `\\${code.toString(16)} `;
+    } else if (i === 0 && value.length === 1 && code === 45) out += `\\${ch}`;
+    else if (code >= 128 || code === 45 || code === 95 || digit || /[A-Za-z]/.test(ch)) out += ch;
+    else out += `\\${ch}`;
+  }
+  return out;
+}
+function safeQueryAll(root, selector) {
+  try {
+    return Array.from(root.querySelectorAll(selector));
+  } catch {
+    return [];
+  }
+}
+function usableId(element) {
+  const id = element.getAttribute("id");
+  if (!id || id.length > 64 || /^[:\d]|:|\d{3,}/.test(id)) return null;
+  return id;
+}
+function segment(element) {
+  const tag = element.localName;
+  const parent = element.parentElement;
+  if (!parent) return tag;
+  let index = 0;
+  let count = 0;
+  for (const sibling of Array.from(parent.children)) {
+    if (sibling.localName !== tag) continue;
+    count++;
+    if (sibling === element) index = count;
+  }
+  return count > 1 ? `${tag}:nth-of-type(${index})` : tag;
+}
+function isUnique(doc, selector, element) {
+  const found = safeQueryAll(doc, selector);
+  return found.length === 1 && found[0] === element;
+}
+function buildSelector(element, doc) {
+  const ownId = usableId(element);
+  if (ownId) {
+    const selector = `#${cssEscape(ownId)}`;
+    if (isUnique(doc, selector, element)) return selector;
+  }
+  const parts = [];
+  for (let node = element; node; node = node.parentElement) {
+    if (node.localName === "html") break;
+    if (node !== element) {
+      const id = usableId(node);
+      if (id) {
+        const candidate2 = [`#${cssEscape(id)}`, ...parts].join(" > ");
+        if (isUnique(doc, candidate2, element)) return fit(candidate2);
+      }
+      const zap = node.getAttribute("data-zap") ?? node.getAttribute("data-zap-entry");
+      const zapAttr = node.hasAttribute("data-zap") ? "data-zap" : "data-zap-entry";
+      if (zap) {
+        const candidate2 = [`[${zapAttr}="${cssEscape(zap)}"]`, ...parts].join(" > ");
+        if (isUnique(doc, candidate2, element)) return fit(candidate2);
+      }
+    }
+    parts.unshift(segment(node));
+    const candidate = parts.join(" > ");
+    if (isUnique(doc, candidate, element)) return fit(candidate);
+  }
+  const full = parts.join(" > ");
+  return full && isUnique(doc, full, element) ? fit(full) : null;
+}
+function fit(selector) {
+  return utf8Length(selector) <= MAX_SELECTOR_BYTES ? selector : null;
+}
+function normalizeText(value) {
+  return value.replace(/\s+/g, " ").trim();
+}
+function textQuoteFor(element, doc) {
+  const exact = normalizeText(element.textContent ?? "").slice(0, MAX_QUOTE_EXACT);
+  if (!exact) return null;
+  let prefix = "";
+  let suffix = "";
+  const body = doc.body;
+  if (body && body.contains(element) && typeof doc.createRange === "function") {
+    try {
+      const before = doc.createRange();
+      before.setStart(body, 0);
+      before.setEndBefore(element);
+      prefix = normalizeText(before.toString()).slice(-MAX_QUOTE_CONTEXT);
+      const after = doc.createRange();
+      after.setStartAfter(element);
+      after.setEnd(body, body.childNodes.length);
+      suffix = normalizeText(after.toString()).slice(0, MAX_QUOTE_CONTEXT);
+    } catch {
+      prefix = "";
+      suffix = "";
+    }
+  }
+  return { exact, prefix, suffix };
+}
+function round(value) {
+  return Math.round(value * 1e4) / 1e4;
+}
+function pageSize(doc) {
+  const root = doc.documentElement;
+  return {
+    w: Math.max(root.scrollWidth, root.clientWidth, 1),
+    h: Math.max(root.scrollHeight, root.clientHeight, 1)
+  };
+}
+function normalizedRect(element, doc, win) {
+  const box = element.getBoundingClientRect();
+  const size = pageSize(doc);
+  const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+  return {
+    rect: {
+      x: round(clamp((box.left + win.scrollX) / size.w, -1, 2)),
+      y: round(clamp((box.top + win.scrollY) / size.h, -1, 2)),
+      w: round(clamp(box.width / size.w, 0, 2)),
+      h: round(clamp(box.height / size.h, 0, 2))
+    },
+    viewport: size
+  };
+}
+function buildDomAnchor(element, tagged, doc, win) {
+  return {
+    tag: tagged?.tag ?? null,
+    selector: buildSelector(element, doc),
+    textQuote: textQuoteFor(element, doc),
+    ...normalizedRect(element, doc, win)
+  };
+}
+function buildAnchor(element, index, pageUrl, doc, win) {
+  const tagged = index.get(element);
+  return {
+    field: tagged ? { recordRef: tagged.recordRef, key: tagged.fieldKey, locale: tagged.locale } : null,
+    dom: buildDomAnchor(element, tagged, doc, win),
+    pageUrl
+  };
+}
+function findAnchorElement(anchor, index, doc, win) {
+  if (anchor.tag) {
+    const hash = anchor.tag.lastIndexOf("#");
+    const tagged = index.byField(anchor.tag.slice(0, hash), anchor.tag.slice(hash + 1));
+    if (tagged.length === 1) return tagged[0].element;
+    if (tagged.length > 1 && anchor.textQuote) {
+      const exact = anchor.textQuote.exact;
+      const match = tagged.find((t) => normalizeText(t.element.textContent ?? "") === exact);
+      if (match) return match.element;
+    }
+    if (tagged.length > 0) return tagged[0].element;
+  }
+  if (anchor.selector) {
+    const found = safeQueryAll(doc, anchor.selector);
+    if (found.length === 1) return found[0];
+  }
+  if (anchor.textQuote && anchor.textQuote.exact.length >= 3 && doc.body) {
+    const exact = anchor.textQuote.exact;
+    let best = null;
+    let bestLength = Infinity;
+    for (const element of Array.from(doc.body.getElementsByTagName("*"))) {
+      const text = normalizeText(element.textContent ?? "");
+      if (text.length < bestLength && text.includes(exact)) {
+        best = element;
+        bestLength = text.length;
+      }
+    }
+    if (best) return best;
+  }
+  const fromPoint = doc.elementFromPoint;
+  if (typeof fromPoint === "function") {
+    const size = pageSize(doc);
+    const x = (anchor.rect.x + anchor.rect.w / 2) * size.w - win.scrollX;
+    const y = (anchor.rect.y + anchor.rect.h / 2) * size.h - win.scrollY;
+    if (x >= 0 && y >= 0 && x <= win.innerWidth && y <= win.innerHeight) {
+      try {
+        return fromPoint.call(doc, x, y);
+      } catch {
+        return null;
+      }
+    }
+  }
+  return null;
+}
+
+// src/preview/overlay.ts
+var OVERLAY_HOST_TAG = "eel-zap-overlay";
+var DEFAULT_THEME = {
+  outline: "#CF8700",
+  chip: "#9A6200",
+  chipText: "#FFFFFF"
+};
+var SELECTED_TINT = "rgba(207,135,0,0.10)";
+var CHECK_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
+var Overlay = class {
+  constructor(options) {
+    __publicField(this, "options", options);
+    __publicField(this, "host", null);
+    __publicField(this, "layer", null);
+    __publicField(this, "mode", "off");
+    __publicField(this, "zoom", 1);
+    __publicField(this, "theme", { ...DEFAULT_THEME });
+    __publicField(this, "labels", {});
+    __publicField(this, "hover", null);
+    __publicField(this, "focused", []);
+    __publicField(this, "highlighted", []);
+    __publicField(this, "selected", []);
+    __publicField(this, "pins", []);
+    __publicField(this, "pending", null);
+    __publicField(this, "capture", null);
+    __publicField(this, "frame", null);
+    __publicField(this, "listeners", []);
+  }
+  mount() {
+    if (this.host) return;
+    const { doc } = this.options;
+    const host = doc.createElement(OVERLAY_HOST_TAG);
+    const hostStyle = {
+      all: "initial",
+      position: "fixed",
+      inset: "0",
+      "pointer-events": "none",
+      "z-index": "2147483647",
+      display: "block"
+    };
+    for (const [name, value] of Object.entries(hostStyle)) {
+      host.style.setProperty(name, value, "important");
+    }
+    const shadow = host.attachShadow({ mode: "closed" });
+    const style = doc.createElement("style");
+    style.textContent = STYLES;
+    const layer = doc.createElement("div");
+    layer.className = "layer";
+    const capture = doc.createElement("div");
+    capture.className = "capture";
+    capture.onclick = (event) => {
+      this.consume(event);
+      this.spotAt(event);
+    };
+    shadow.append(style, capture, layer);
+    this.capture = capture;
+    doc.documentElement.appendChild(host);
+    this.host = host;
+    this.layer = layer;
+    this.install();
+    this.render();
+  }
+  /**
+   * Register the event listeners. Called by `mount()`, and EARLIER by the
+   * runtime — at script start, before any site script has run — so our
+   * capture listeners on `window` are first in line, ahead of anything the
+   * site registers.
+   */
+  install() {
+    if (this.listeners.length > 0) return;
+    const { win } = this.options;
+    this.listen(win, "mouseover", (event) => this.onPointer(event));
+    this.listen(win, "mouseout", (event) => {
+      if (!event.relatedTarget) this.setHover(null);
+    });
+    this.listen(win, "click", (event) => this.onClick(event));
+    this.listen(win, "keydown", (event) => this.onKey(event));
+    this.listen(win, "scroll", () => this.schedule());
+    this.listen(win, "resize", () => this.schedule());
+  }
+  destroy() {
+    for (const [target, type, listener, capture] of this.listeners) {
+      target.removeEventListener(type, listener, capture);
+    }
+    this.listeners.length = 0;
+    this.host?.remove();
+    this.host = null;
+    this.layer = null;
+    this.capture = null;
+  }
+  /** The host element, so the tag observer can ignore our own mutations. */
+  get hostElement() {
+    return this.host;
+  }
+  getMode() {
+    return this.mode;
+  }
+  setMode(mode) {
+    if (mode === this.mode) return;
+    const hadSelection = this.selected.length > 0;
+    this.mode = mode;
+    this.hover = null;
+    this.pending = null;
+    if (mode !== "select" && hadSelection) {
+      this.selected = [];
+      this.options.onSelect?.([]);
+    }
+    if (mode === "off") {
+      this.focused = [];
+      this.highlighted = [];
+    }
+    this.schedule();
+  }
+  setZoom(zoom) {
+    if (!(zoom > 0)) return;
+    this.zoom = zoom;
+    this.schedule();
+  }
+  setTheme(theme) {
+    this.theme = { ...DEFAULT_THEME, ...theme ?? {} };
+    this.schedule();
+  }
+  setLabels(labels) {
+    this.labels = { ...labels };
+    this.schedule();
+  }
+  /** Outline every element of a field and scroll the first into view. */
+  focusField(elements) {
+    this.focused = elements.slice();
+    const first = elements[0];
+    if (first && typeof first.scrollIntoView === "function") {
+      first.scrollIntoView({ block: "center", behavior: "smooth" });
+    }
+    this.schedule();
+    return elements.length;
+  }
+  /** Outline change-request anchors and scroll to the first. */
+  highlight(elements) {
+    this.highlighted = elements.slice(0, MAX_ANCHORS);
+    const first = this.highlighted[0];
+    if (first && typeof first.scrollIntoView === "function") {
+      first.scrollIntoView({ block: "center", behavior: "smooth" });
+    }
+    this.schedule();
+  }
+  /** Draw these pins (≤ 50); drops the pending spot pin. */
+  setPins(pins) {
+    this.pins = pins.slice(0, MAX_PINS);
+    this.clearPending();
+  }
+  /** Drop the pending spot pin. */
+  clearPending() {
+    this.pending = null;
+    this.schedule();
+  }
+  clearSelection() {
+    if (this.selected.length === 0) return;
+    this.selected = [];
+    this.options.onSelect?.([]);
+    this.schedule();
+  }
+  get selection() {
+    return this.selected;
+  }
+  /** For specs: what the closed shadow root currently draws. */
+  inspect() {
+    const nodes = Array.from(this.layer?.children ?? []);
+    const boxes = nodes.filter((node) => node.className === "box").map((node) => ({
+      kind: node.dataset.kind,
+      label: node.querySelector(".chip")?.textContent ?? null
+    }));
+    const capture = this.capture?.style.display === "block" ? this.capture : null;
+    return { boxes, pins: nodes.filter((n) => n.className === "pin"), capture, zoom: this.zoom };
+  }
+  /** For specs: the style of the n-th box. */
+  boxStyle(n) {
+    const node = this.layer?.children[n];
+    return node?.style ?? null;
+  }
+  // ── Events ────────────────────────────────────────────────────────────────
+  listen(target, type, listener) {
+    target.addEventListener(type, listener, true);
+    this.listeners.push([target, type, listener, true]);
+  }
+  isOwn(node) {
+    return !!this.host && node === this.host || !!node && !!this.options.ignore?.(node);
+  }
+  targetFor(event) {
+    const target = event.target;
+    if (!target || this.isOwn(target) || typeof target.closest !== "function") return null;
+    if (this.mode === "inspect") return this.options.index.closest(target)?.element ?? null;
+    if (this.mode === "select") {
+      const tagged = this.options.index.closest(target);
+      const element = tagged?.element ?? target;
+      const name = element.localName;
+      return name === "html" || name === "body" ? null : element;
+    }
+    return null;
+  }
+  onPointer(event) {
+    if (this.mode === "off") return;
+    this.setHover(this.targetFor(event));
+  }
+  setHover(element) {
+    if (element === this.hover) return;
+    this.hover = element;
+    this.schedule();
+  }
+  onClick(event) {
+    if (this.mode === "off" || this.isOwn(event.target)) return;
+    if (this.mode === "spot") {
+      this.consume(event);
+      return this.spotAt(event);
+    }
+    const element = this.targetFor(event);
+    if (this.mode === "inspect") {
+      if (!element) return;
+      const tagged = this.options.index.get(element);
+      if (!tagged) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      this.options.onInspect?.(tagged);
+      return;
+    }
+    this.consume(event);
+    const additive = event.shiftKey || event.metaKey || event.ctrlKey || !!this.options.additive?.();
+    if (this.options.spotOnLarge && !additive && (!element || this.isLarge(element))) {
+      this.clearSelection();
+      return this.spotAt(event);
+    }
+    if (!element) return;
+    if (this.pending) this.clearPending();
+    let next;
+    if (additive) {
+      next = this.selected.includes(element) ? this.selected.filter((e) => e !== element) : this.selected.length < MAX_ANCHORS ? [...this.selected, element] : this.selected;
+    } else {
+      next = [element];
+    }
+    if (next === this.selected) return;
+    this.selected = next;
+    this.options.onSelect?.(next.slice());
+    this.schedule();
+  }
+  /** Most of the viewport: a wrapper, not the thing the person pointed at. */
+  isLarge(element) {
+    const { win } = this.options;
+    const rect = element.getBoundingClientRect();
+    const area = Math.max(1, win.innerWidth * win.innerHeight);
+    return rect.width * rect.height / area >= LARGE_SHARE;
+  }
+  consume(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+  /** The click as a point of the whole document (§3.3 spot anchor). */
+  spotAt(event) {
+    const { doc, win } = this.options;
+    const root = doc.documentElement;
+    const w = Math.max(root.scrollWidth, 1);
+    const h = Math.max(root.scrollHeight, 1);
+    const at = (v, size) => Math.min(1, Math.max(0, v / size));
+    const spot = { x: at(event.clientX + win.scrollX, w), y: at(event.clientY + win.scrollY, h) };
+    this.pending = spot;
+    this.schedule();
+    this.options.onSpot?.({ spot, viewport: { w, h } });
+  }
+  onKey(event) {
+    if (event.key !== "Escape") return;
+    if ((this.mode === "spot" || this.mode === "select") && this.pending) {
+      this.consume(event);
+      return this.clearPending();
+    }
+    if (this.mode !== "select" || this.selected.length === 0) return;
+    this.consume(event);
+    this.clearSelection();
+  }
+  // ── Drawing ───────────────────────────────────────────────────────────────
+  schedule() {
+    if (!this.layer || this.frame !== null) return;
+    const win = this.options.win;
+    const raf = typeof win.requestAnimationFrame === "function" ? (fn) => win.requestAnimationFrame(fn) : (fn) => win.setTimeout(fn, 16);
+    this.frame = raf(() => {
+      this.frame = null;
+      this.render();
+    });
+  }
+  /** Draw now (also used by specs, which have no animation frames). */
+  render() {
+    const layer = this.layer;
+    if (!layer) return;
+    const boxes = [];
+    const seen = /* @__PURE__ */ new Set();
+    const add = (element, kind) => {
+      if (seen.has(element) || !element.isConnected) return;
+      seen.add(element);
+      const tagged = this.options.index.get(element);
+      boxes.push({ element, kind, label: tagged ? this.labelFor(tagged) : null });
+    };
+    if (this.mode !== "off") {
+      for (const element of this.selected) add(element, "selected");
+      for (const element of this.focused) add(element, "focus");
+      for (const element of this.highlighted) add(element, "highlight");
+      if (this.hover) add(this.hover, "hover");
+    }
+    const nodes = boxes.map((box) => this.drawBox(box));
+    if (this.capture) this.capture.style.display = this.mode === "spot" ? "block" : "none";
+    if (this.mode !== "off" || this.options.pinsWhenOff) {
+      const { doc, win } = this.options;
+      const root = doc.documentElement;
+      const toView = (p) => [
+        p.x * root.scrollWidth - win.scrollX,
+        p.y * root.scrollHeight - win.scrollY
+      ];
+      for (const pin of this.pins) {
+        const element = pin.element;
+        if (element) {
+          if (!element.isConnected) continue;
+          const rect = element.getBoundingClientRect();
+          nodes.push(this.drawPin([rect.left, rect.top], pin));
+        } else if (pin.spot) nodes.push(this.drawPin(toView(pin.spot), pin));
+      }
+      if (this.pending && (this.mode === "spot" || this.mode === "select")) {
+        nodes.push(this.drawPin(toView(this.pending)));
+      }
+    }
+    layer.replaceChildren(...nodes);
+  }
+  /** A gold teardrop whose point (bottom-left) sits on `[x, y]`; without a pin, the pending one. */
+  drawPin([x, y], pin) {
+    const node = this.options.doc.createElement("span");
+    node.className = "pin";
+    const z = this.zoom;
+    const size = PIN_PX / z;
+    Object.assign(node.style, {
+      left: `${x}px`,
+      top: `${y - size}px`,
+      width: `${size}px`,
+      height: `${size}px`,
+      fontSize: `${11 / z}px`,
+      lineHeight: `${size}px`,
+      boxShadow: `0 0 0 ${2 / z}px #fff,0 ${2 / z}px ${6 / z}px rgba(0,0,0,.25)`
+    });
+    if (pin) {
+      node.textContent = String(pin.n);
+      node.onclick = (event) => {
+        this.consume(event);
+        this.options.onPin?.({ id: pin.id });
+      };
+    } else node.dataset.pending = "";
+    return node;
+  }
+  labelFor(tagged) {
+    const label = this.labels[tagged.fieldKey];
+    return typeof label === "string" && label.trim() ? label : tagged.fieldKey;
+  }
+  drawBox(box) {
+    const doc = this.options.doc;
+    const z = this.zoom;
+    const px = (n) => `${Math.round(n / z * 100) / 100}px`;
+    const rect = box.element.getBoundingClientRect();
+    const node = doc.createElement("div");
+    node.className = "box";
+    node.dataset.kind = box.kind;
+    const offset = 3 / z;
+    Object.assign(node.style, {
+      left: `${rect.left - offset}px`,
+      top: `${rect.top - offset}px`,
+      width: `${rect.width + offset * 2}px`,
+      height: `${rect.height + offset * 2}px`,
+      outline: `${px(2)} solid ${this.theme.outline}`,
+      borderRadius: px(3),
+      background: box.kind === "selected" ? SELECTED_TINT : "transparent"
+    });
+    const tooSmall = box.kind === "selected" && box.element !== this.hover && Math.min(rect.width, rect.height) * z < CHIP_HEIGHT_PX;
+    if (box.label && box.kind !== "highlight" && !tooSmall) {
+      const chip = doc.createElement("span");
+      chip.className = "chip";
+      Object.assign(chip.style, {
+        right: px(-5),
+        top: px(-27),
+        height: px(CHIP_HEIGHT_PX),
+        padding: `0 ${px(7)}`,
+        gap: px(4),
+        borderRadius: px(6),
+        fontSize: px(12),
+        background: this.theme.chip,
+        color: this.theme.chipText
+      });
+      if (box.kind === "selected") {
+        const icon = doc.createElement("span");
+        icon.className = "icon";
+        icon.style.width = px(12);
+        icon.style.height = px(12);
+        icon.innerHTML = CHECK_SVG;
+        chip.appendChild(icon);
+      }
+      chip.appendChild(doc.createTextNode(box.label));
+      node.appendChild(chip);
+    }
+    return node;
+  }
+};
+var LARGE_SHARE = 0.5;
+var CHIP_HEIGHT_PX = 20;
+var PIN_PX = 22;
+var STYLES = `
+.layer { position: fixed; inset: 0; pointer-events: none; }
+.box { position: fixed; box-sizing: border-box; pointer-events: none; }
+.chip {
+  position: absolute; display: inline-flex; align-items: center; white-space: nowrap;
+  font-family: Poppins, ui-sans-serif, system-ui, sans-serif; font-weight: 600; line-height: 1;
+  letter-spacing: 0; box-sizing: border-box;
+}
+.capture { position: fixed; inset: 0; pointer-events: auto; cursor: crosshair; display: none; }
+.pin {
+  position: fixed; box-sizing: border-box; pointer-events: auto; cursor: pointer; text-align: center;
+  border-radius: 999px 999px 999px 0; background: #CF8700; color: #fff;
+  font-family: Poppins, ui-sans-serif, system-ui, sans-serif; font-weight: 700;
+}
+.icon { display: inline-flex; flex-shrink: 0; }
+.icon svg { width: 100%; height: 100%; display: block; }
+`;
+
+// src/stega.ts
+var DIGITS = ["\u200B", "\u200C", "\u200D", "\u2060"];
+var PREFIX = "\u2060\u200D\u200C\u200C\u200D\u200D\u200C\u2060";
+var PAYLOAD_RE = /^(doc:[a-z0-9]+(?:-[a-z0-9]+)*|[a-z0-9]+(?:-[a-z0-9]+)*\/[a-z0-9]+(?:-[a-z0-9]+)*)#([a-z][a-z0-9_]{0,127})(?:@([A-Za-z]{2,3}(?:-[A-Za-z0-9]{2,8}){0,3}))?$/;
+var MARKER_RE = /⁠‍‌‌‍‍‌⁠(?:[​‌][​‌‍⁠]{3})*/g;
+function hasStega(value) {
+  return typeof value === "string" && value.includes(PREFIX);
+}
+function stegaDecode(text) {
+  if (!text.includes(PREFIX)) return [];
+  const found = [];
+  for (const match of text.match(MARKER_RE) ?? []) {
+    let payload = "";
+    for (let i = PREFIX.length; i + 4 <= match.length; i += 4) {
+      let byte = 0;
+      for (let j = 0; j < 4; j++) byte = byte * 4 + DIGITS.indexOf(match[i + j]);
+      payload += String.fromCharCode(byte);
+    }
+    const parsed = PAYLOAD_RE.exec(payload);
+    if (!parsed) continue;
+    found.push({
+      recordRef: parsed[1],
+      fieldKey: parsed[2],
+      locale: parsed[3] ?? null,
+      tag: `${parsed[1]}#${parsed[2]}`
+    });
+  }
+  return found;
+}
+function splitStega(text) {
+  if (!text.includes(PREFIX)) return { text, markers: "" };
+  return { text: text.replace(MARKER_RE, ""), markers: (text.match(MARKER_RE) ?? []).join("") };
+}
+function cleanString(text) {
+  return text.includes(PREFIX) ? text.replace(MARKER_RE, "") : text;
+}
+function cleanStega(value) {
+  if (typeof value === "string") return cleanString(value);
+  if (Array.isArray(value)) return value.map((item) => cleanStega(item));
+  if (value && typeof value === "object" && Object.getPrototypeOf(value) === Object.prototype) {
+    const out = {};
+    for (const [key, item] of Object.entries(value)) out[key] = cleanStega(item);
+    return out;
+  }
+  return value;
+}
+
+// src/preview/tags.ts
+var TAG_SELECTOR = "[data-zap],[data-zap-field]";
+function readElementTag(element) {
+  const locale = readLocale(element);
+  const html = element.hasAttribute("data-zap-html");
+  const direct = element.getAttribute("data-zap");
+  if (direct !== null) {
+    const parsed = parseTag(direct);
+    if (!parsed) return { ok: false, problem: { attribute: "data-zap", value: clip(direct) } };
+    return { ok: true, tagged: build(element, parsed.recordRef, parsed.fieldKey, locale, html) };
+  }
+  const field = element.getAttribute("data-zap-field");
+  if (field === null) return null;
+  const fieldKey = field.trim();
+  if (!parseTag(`doc:x#${fieldKey}`)) {
+    return { ok: false, problem: { attribute: "data-zap-field", value: clip(field) } };
+  }
+  const container = element.closest("[data-zap-entry]");
+  const entry = container?.getAttribute("data-zap-entry")?.trim();
+  if (!entry || !parseRecordRef(entry)) {
+    return { ok: false, problem: { attribute: "data-zap-entry", value: clip(entry ?? "") } };
+  }
+  return { ok: true, tagged: build(element, entry, fieldKey, locale, html) };
+}
+function build(element, recordRef, fieldKey, locale, html) {
+  return {
+    element,
+    recordRef,
+    fieldKey,
+    tag: `${recordRef}#${fieldKey}`,
+    locale,
+    html,
+    source: "attr"
+  };
+}
+var NON_RENDERED = /^(?:head|title|script|style|template|noscript|textarea)$/;
+function readLocale(element) {
+  const value = element.closest("[data-zap-locale]")?.getAttribute("data-zap-locale")?.trim();
+  return value && isLocale(value) ? value : null;
+}
+function clip(value) {
+  return value.length > 200 ? value.slice(0, 200) : value;
+}
+var TagIndex = class {
+  constructor(root) {
+    __publicField(this, "root", root);
+    __publicField(this, "list", []);
+    __publicField(this, "byElement", /* @__PURE__ */ new WeakMap());
+    __publicField(this, "byTag", /* @__PURE__ */ new Map());
+    __publicField(this, "problems", []);
+  }
+  scan() {
+    const list = [];
+    const problems = [];
+    const byElement = /* @__PURE__ */ new WeakMap();
+    const byTag = /* @__PURE__ */ new Map();
+    const add = (element, tagged) => {
+      list.push(tagged);
+      if (!byElement.has(element)) byElement.set(element, tagged);
+      const bucket = byTag.get(tagged.tag);
+      if (bucket) bucket.push(tagged);
+      else byTag.set(tagged.tag, [tagged]);
+    };
+    for (const element of Array.from(this.root.querySelectorAll(TAG_SELECTOR))) {
+      const result = readElementTag(element);
+      if (!result) continue;
+      if (!result.ok) {
+        problems.push(result.problem);
+        continue;
+      }
+      add(element, result.tagged);
+    }
+    const doc = this.root.ownerDocument ?? this.root;
+    const walker = doc.createTreeWalker(
+      this.root,
+      4
+      /* NodeFilter.SHOW_TEXT */
+    );
+    for (let node; node = walker.nextNode(); ) {
+      const text = node;
+      const element = text.parentElement;
+      if (!element || !hasStega(text.data)) continue;
+      if (NON_RENDERED.test(element.localName) || element.closest("head")) continue;
+      if (byElement.get(element)?.source === "attr") continue;
+      for (const found of stegaDecode(text.data)) {
+        add(element, {
+          element,
+          recordRef: found.recordRef,
+          fieldKey: found.fieldKey,
+          tag: found.tag,
+          locale: found.locale ?? readLocale(element),
+          html: false,
+          source: "stega",
+          textNode: text
+        });
+      }
+    }
+    list.sort(
+      (a, b) => a.element.compareDocumentPosition(b.element) & 4 ? -1 : a.element === b.element ? 0 : 1
+    );
+    this.list = list;
+    this.byElement = byElement;
+    this.byTag = byTag;
+    this.problems = problems;
+  }
+  get elements() {
+    return this.list;
+  }
+  byField(recordRef, fieldKey) {
+    return this.byTag.get(`${recordRef}#${fieldKey}`) ?? [];
+  }
+  get(element) {
+    return this.byElement.get(element) ?? null;
+  }
+  /** The nearest tagged element at or above `target`. */
+  closest(target) {
+    for (let node = target; node; node = node.parentElement) {
+      const tagged = this.byElement.get(node);
+      if (tagged) return tagged;
+    }
+    return null;
+  }
+  /** The `zap:tags` report: one row per tag with its element count, sorted. */
+  summary() {
+    return Array.from(this.byTag.entries()).map(([tag, items]) => ({
+      tag,
+      recordRef: items[0].recordRef,
+      fieldKey: items[0].fieldKey,
+      count: items.length,
+      source: items.some((item) => item.source === "attr") ? "attr" : "stega"
+    })).sort((a, b) => a.tag < b.tag ? -1 : a.tag > b.tag ? 1 : 0);
+  }
+};
+function observeTags(target, onChange, options = {}) {
+  const throttleMs = options.throttleMs ?? 250;
+  const set = options.setTimeout ?? ((fn, ms) => setTimeout(fn, ms));
+  const clear = options.clearTimeout ?? ((h) => clearTimeout(h));
+  const view = (target.ownerDocument ?? target).defaultView;
+  const Observer = view?.MutationObserver ?? globalThis.MutationObserver;
+  if (!Observer) return () => {
+  };
+  let timer = null;
+  let last = -Infinity;
+  const fire = () => {
+    timer = null;
+    last = Date.now();
+    onChange();
+  };
+  const observer = new Observer((records) => {
+    if (options.ignore && records.every((record) => options.ignore(record.target))) return;
+    if (timer !== null) return;
+    const wait = Math.max(0, last + throttleMs - Date.now());
+    timer = set(fire, Math.max(wait, 16));
+  });
+  observer.observe(target, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["data-zap", "data-zap-field", "data-zap-entry", "data-zap-locale"],
+    characterData: true
+  });
+  return () => {
+    observer.disconnect();
+    if (timer !== null) clear(timer);
+  };
+}
+
+export {
+  FIELD_KEY_RE,
+  parseRecordRef,
+  isRecordRef,
+  PREVIEW_TOKEN_RE,
+  isPreviewTokenShape,
+  isFieldKey,
+  recordRefsOf,
+  zapAttrs,
+  PROTOCOL_SOURCE,
+  PAGE_UNLOAD_ERROR,
+  PROTOCOL_VERSION,
+  MAX_MESSAGE_BYTES,
+  MAX_ANCHORS,
+  MAX_QUOTE_EXACT,
+  MAX_QUOTE_CONTEXT,
+  MAX_SELECTOR_BYTES,
+  MAX_URL_LENGTH,
+  MAX_TAG_REPORT,
+  MAX_LABELS,
+  MAX_PINS,
+  OVERLAY_MODES,
+  CAPABILITIES,
+  MAX_EMAIL_LENGTH,
+  emptyDropStats,
+  isLocale,
+  isSession,
+  MAX_DRAFT_ROUTE_LENGTH,
+  isDraftRoutePath,
+  isPinId,
+  isPin,
+  isPreviewValue,
+  utf8Length,
+  isDomAnchor,
+  isPageAnchor,
+  parseTag,
+  PAGE_MESSAGE_TYPES,
+  EDITOR_MESSAGE_TYPES,
+  messageBytes,
+  parseEditorMessage,
+  parsePageMessage,
+  envelope,
+  cssEscape,
+  safeQueryAll,
+  buildSelector,
+  normalizeText,
+  textQuoteFor,
+  normalizedRect,
+  buildDomAnchor,
+  buildAnchor,
+  findAnchorElement,
+  OVERLAY_HOST_TAG,
+  Overlay,
+  splitStega,
+  cleanStega,
+  TAG_SELECTOR,
+  readElementTag,
+  TagIndex,
+  observeTags
+};
+//# sourceMappingURL=chunk-VW4EH7NY.js.map