@xenia-martech/sdk-js 1.2.0-dev.3 → 1.2.0-dev.5

package/dist/client/react/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { createContext, useContext, useRef, useMemo, useEffect, useCallback, useState, createElement } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useRef, useMemo, useEffect, useCallback, useState, createElement, useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createRoot } from 'react-dom/client';
 
 // src/client/react/XeniaProvider.tsx
@@ -1095,17 +1095,22 @@ function parseDataAttribute(value) {
   return { eventId, interactionType };
 }
 function readSlotMeta(el) {
-  const contentKey = el.getAttribute("data-xenia-content-key");
-  if (!contentKey) return null;
-  const contentEntryId = el.getAttribute("data-xenia-content-entry-id");
-  const baseEntryId = el.getAttribute("data-xenia-base-entry-id");
-  const personalized = el.getAttribute("data-xenia-personalized");
-  return {
-    contentKey,
-    contentEntryId: contentEntryId ?? void 0,
-    baseEntryId: baseEntryId ?? void 0,
-    personalized: personalized == null ? void 0 : personalized === "true"
-  };
+  const attr = (name) => el.getAttribute(`data-xenia-${name}`) ?? void 0;
+  const contentKey = attr("content-key");
+  const contentEntryId = attr("content-entry-id");
+  if (!contentKey && !contentEntryId) return null;
+  const personalized = attr("personalized");
+  const meta2 = {};
+  const slot = attr("slot");
+  if (slot) meta2.slot = slot;
+  if (contentKey) meta2.contentKey = contentKey;
+  if (contentEntryId) meta2.contentEntryId = contentEntryId;
+  const baseEntryId = attr("base-entry-id");
+  if (baseEntryId) meta2.baseEntryId = baseEntryId;
+  if (personalized != null) meta2.personalized = personalized === "true";
+  const bucket = attr("bucket");
+  if (bucket) meta2.bucket = bucket;
+  return meta2;
 }
 var AutoTracker = class {
   opts;
@@ -1166,8 +1171,12 @@ var AutoTracker = class {
       if (this.opts.fireSlot) {
         const slot = target.closest("[data-xenia-slot]");
         if (slot) {
-          const meta = readSlotMeta(slot);
-          if (meta && !this.throttled(slot)) this.opts.fireSlot("click", meta);
+          const meta2 = readSlotMeta(slot);
+          const found = target.closest("a, button");
+          const control = found && slot.contains(found) ? found : null;
+          if (!control && this.opts.slotClicks === "controls") return;
+          const label = control ? (control.textContent ?? "").trim().slice(0, 60) : "";
+          if (meta2 && !this.throttled(slot)) this.opts.fireSlot("click", label ? { ...meta2, label } : meta2);
         }
       }
     };
@@ -1175,24 +1184,24 @@ var AutoTracker = class {
   }
   observeSlot(el) {
     if (!this.opts.fireSlot || this.slotObservers.has(el)) return;
-    const meta = readSlotMeta(el);
-    if (!meta) return;
+    const meta2 = readSlotMeta(el);
+    if (!meta2) return;
     const fireSlot = this.opts.fireSlot;
     const { threshold, rootMargin } = this.opts.viewport;
     const observer = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
-          if (!entry.isIntersecting) continue;
-          if (this.slotImpressed.has(el)) continue;
+          const inView = entry.isIntersecting && (entry.intersectionRatio >= threshold || entry.intersectionRect.height >= window.innerHeight / 2);
+          if (!inView || this.slotImpressed.has(el)) continue;
           this.slotImpressed.add(el);
-          fireSlot("impression", meta);
+          fireSlot("impression", meta2);
           observer.disconnect();
           this.slotObservers.delete(el);
         }
       },
-      { threshold, rootMargin }
+      { threshold: [.../* @__PURE__ */ new Set([0.1, 0.25, threshold])].sort(), rootMargin }
     );
-    observer.observe(el);
+    observer.observe(boxOf(el));
     this.slotObservers.set(el, observer);
   }
   observeViewport(el, eventId) {
@@ -1246,6 +1255,235 @@ var AutoTracker = class {
     this.mutationObserver.observe(document.body, { childList: true, subtree: true });
   }
 };
+function boxOf(el) {
+  if (typeof getComputedStyle !== "function") return el;
+  return getComputedStyle(el).display === "contents" ? el.firstElementChild ?? el : el;
+}
+
+// src/edge/trail.ts
+var MAX_TRAIL = 8;
+var TRAIL_MAX_AGE_S = 30 * 60;
+function trailCookieName(prefix = DEFAULT_PREFIX) {
+  return `${prefix}_trail`;
+}
+var decode = (v) => {
+  try {
+    return decodeURIComponent(v);
+  } catch {
+    return v;
+  }
+};
+function readTrail(value) {
+  if (!value) return [];
+  try {
+    const parsed = JSON.parse(decode(value));
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((t) => Array.isArray(t) && typeof t[0] === "string" && typeof t[1] === "number").slice(0, MAX_TRAIL).map(
+      ([path, at, seconds]) => typeof seconds === "number" && seconds >= 0 && seconds <= 86400 ? { path, at, seconds } : { path, at }
+    );
+  } catch {
+    return [];
+  }
+}
+function withView(trail, path, now = Date.now()) {
+  if (trail[0]?.path === path) return trail;
+  const earlier = trail.find((t) => t.path === path);
+  return [{ path, at: earlier?.at ?? now }, ...trail.filter((t) => t.path !== path)].slice(0, MAX_TRAIL);
+}
+function trailCookieValue(trail) {
+  return JSON.stringify(
+    trail.slice(0, MAX_TRAIL).map((t) => t.seconds === void 0 ? [t.path, t.at] : [t.path, t.at, t.seconds])
+  );
+}
+
+// src/client/page-tracking.ts
+var SETTLE_MS = 3e3;
+var POLL_MS = 50;
+var MIN_VISIT_MS = 250;
+var listeners = /* @__PURE__ */ new Set();
+var restore = null;
+function watchNavigation(listener) {
+  listeners.add(listener);
+  if (!restore) {
+    const { pushState, replaceState } = history;
+    const notify = () => listeners.forEach((l) => {
+      try {
+        l();
+      } catch {
+      }
+    });
+    const ownPush = function(...args) {
+      pushState.apply(this, args);
+      notify();
+    };
+    const ownReplace = function(...args) {
+      replaceState.apply(this, args);
+      notify();
+    };
+    history.pushState = ownPush;
+    history.replaceState = ownReplace;
+    window.addEventListener("popstate", notify);
+    restore = () => {
+      if (history.pushState !== ownPush || history.replaceState !== ownReplace) return false;
+      history.pushState = pushState;
+      history.replaceState = replaceState;
+      window.removeEventListener("popstate", notify);
+      return true;
+    };
+  }
+  return () => {
+    listeners.delete(listener);
+    if (!listeners.size && restore?.()) restore = null;
+  };
+}
+var meta = (name) => document.querySelector(`meta[name="${name}"]`)?.content || void 0;
+function startPageTracking(client, opts) {
+  let path = location.pathname;
+  let lastTitle = null;
+  let timer;
+  let view2 = { path, since: visibleNow(), sent: false };
+  function visibleNow() {
+    return document.visibilityState === "visible" ? Date.now() : null;
+  }
+  function sendView() {
+    clearTimeout(timer);
+    const started = Date.now();
+    const tick = () => {
+      const settled = document.title !== "" && document.title !== lastTitle;
+      if (!settled && Date.now() - started < SETTLE_MS) {
+        timer = setTimeout(tick, POLL_MS);
+        return;
+      }
+      const params = new URLSearchParams(location.search);
+      const searchTerm = (params.get("utm_term") ?? params.get("q") ?? "").slice(0, 120);
+      const category = meta("xenia-category");
+      lastTitle = document.title;
+      client.track("pageView", {
+        title: (meta("xenia-title") ?? document.title).slice(0, 160),
+        ...searchTerm ? { searchTerm } : {},
+        ...category ? { category } : {}
+      });
+    };
+    timer = setTimeout(tick, 0);
+  }
+  function leave() {
+    if (view2.sent || view2.since === null || Date.now() - view2.since < MIN_VISIT_MS) return;
+    view2.sent = true;
+    client.track("page_leave", { path: view2.path, durationMs: Date.now() - view2.since });
+  }
+  const onNavigate = () => {
+    if (location.pathname === path) return;
+    if (opts.pageLeave) leave();
+    path = location.pathname;
+    view2 = { path, since: visibleNow(), sent: false };
+    if (opts.pageViews) sendView();
+  };
+  const onVisibility = () => {
+    if (document.visibilityState === "hidden") leave();
+    else if (view2.since === null) view2.since = Date.now();
+  };
+  const unwatch = watchNavigation(onNavigate);
+  if (opts.pageLeave) document.addEventListener("visibilitychange", onVisibility);
+  if (opts.pageViews) sendView();
+  return () => {
+    clearTimeout(timer);
+    unwatch();
+    document.removeEventListener("visibilitychange", onVisibility);
+  };
+}
+
+// src/client/engagement.ts
+var rootOf = (opt, fallback) => typeof opt === "object" && opt.root || fallback;
+function readCookie(name) {
+  return document.cookie.match(new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))?.[1];
+}
+function writeCookie(name, value) {
+  try {
+    document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${TRAIL_MAX_AGE_S}; samesite=lax`;
+  } catch {
+  }
+}
+function sectionOf(link) {
+  if (!link || link.origin !== location.origin) return void 0;
+  return link.pathname.split("/").filter(Boolean)[0];
+}
+function cardImage(target, root) {
+  let el = target;
+  for (let depth = 0; el && depth < 5 && el !== root; depth++, el = el.parentElement) {
+    const imgs = [...el.querySelectorAll("img")].filter((i) => i.alt.trim());
+    if (!imgs.length) continue;
+    return new Set(imgs.map((i) => i.alt.trim())).size === 1 ? imgs[0] : null;
+  }
+  return null;
+}
+function startEngagement(client, opts) {
+  const trailName = trailCookieName(opts.prefix);
+  const clicksName = `${opts.prefix}_clicks`;
+  const visibleNow = () => document.visibilityState === "visible" ? Date.now() : null;
+  let current = { path: location.pathname, since: visibleNow(), stamped: false };
+  const stamp = () => {
+    if (current.stamped || !opts.trail || !opts.analyticsAllowed() || current.since === null) return;
+    current.stamped = true;
+    const seconds = Math.round((Date.now() - current.since) / 100) / 10;
+    const trail = readTrail(readCookie(trailName));
+    const i = trail.findIndex((t) => t.path === current.path);
+    if (i < 0) return;
+    trail[i] = { ...trail[i], seconds };
+    writeCookie(trailName, trailCookieValue(trail));
+  };
+  const onNavigate = () => {
+    if (location.pathname === current.path) return;
+    stamp();
+    current = { path: location.pathname, since: visibleNow(), stamped: false };
+    if (!opts.trail || !opts.analyticsAllowed()) return;
+    const trail = readTrail(readCookie(trailName));
+    const next = withView(trail, current.path);
+    if (next !== trail) writeCookie(trailName, trailCookieValue(next));
+  };
+  const onVisible = () => {
+    if (document.visibilityState === "visible" && current.since === null) current.since = Date.now();
+  };
+  const onLeaveClick = (e) => {
+    const link = e.target?.closest?.("a[href]");
+    if (link && link.origin === location.origin && link.pathname !== location.pathname) stamp();
+  };
+  const bump = () => {
+    if (!opts.analyticsAllowed()) return;
+    writeCookie(clicksName, String((Number(readCookie(clicksName)) || 0) + 1));
+  };
+  const navRoot = rootOf(opts.navClicks, "header");
+  const contentRoot = rootOf(opts.contentClicks, "main");
+  const onClick = (e) => {
+    const target = e.target;
+    if (!target?.closest) return;
+    const nav = opts.navClicks ? target.closest(`${navRoot} a[href]`) : null;
+    if (nav) {
+      const category2 = sectionOf(nav);
+      if (!category2) return;
+      client.track("nav_click", { category: category2, label: (nav.textContent ?? "").trim().slice(0, 60) });
+      bump();
+      return;
+    }
+    const root = opts.contentClicks ? target.closest(contentRoot) : null;
+    if (!root) return;
+    const img = target.closest("img") ?? cardImage(target, root);
+    const label = (img?.alt ?? "").trim().slice(0, 160);
+    if (!label) return;
+    const category = sectionOf(target.closest("a[href]"));
+    client.track("content_click", category ? { label, category } : { label });
+    bump();
+  };
+  const unwatch = watchNavigation(onNavigate);
+  window.addEventListener("click", onLeaveClick, { capture: true });
+  document.addEventListener("visibilitychange", onVisible);
+  if (opts.contentClicks || opts.navClicks) document.addEventListener("click", onClick, { capture: true });
+  return () => {
+    unwatch();
+    window.removeEventListener("click", onLeaveClick, { capture: true });
+    document.removeEventListener("visibilitychange", onVisible);
+    document.removeEventListener("click", onClick, { capture: true });
+  };
+}
 
 // src/server/cookies.ts
 function parseCookies(header) {
@@ -1256,7 +1494,12 @@ function parseCookies(header) {
     if (idx === -1) continue;
     const key = part.slice(0, idx).trim();
     const value = part.slice(idx + 1).trim();
-    if (key) out[key] = decodeURIComponent(value);
+    if (!key) continue;
+    try {
+      out[key] = decodeURIComponent(value);
+    } catch {
+      out[key] = value;
+    }
   }
   return out;
 }
@@ -1330,6 +1573,14 @@ var Identity = class {
     const storageKey = this.key("device_id");
     try {
       const cached = localStorage.getItem(storageKey);
+      const fromServer = this.cookie?.authoritative ? this.readVisitorCookie() : null;
+      const effective = localStorage.getItem(this.key("visitor_id")) ?? cached;
+      if (cached && fromServer && fromServer !== effective) {
+        this.deviceId = fromServer;
+        localStorage.setItem(storageKey, fromServer);
+        if (localStorage.getItem(this.key("visitor_id"))) localStorage.setItem(this.key("visitor_id"), fromServer);
+        return fromServer;
+      }
       if (cached) {
         this.deviceId = cached;
         this.writeVisitorCookie(this.getVisitorId() ?? cached);
@@ -1509,7 +1760,7 @@ function resolveCookieConfig(opt) {
   const o = opt === true ? {} : opt;
   const sameSite = o.sameSite ?? "Lax";
   const secure = sameSite === "None" ? true : o.secure ?? false;
-  return { sameSite, secure, maxAgeDays: o.maxAgeDays ?? 365, domain: o.domain };
+  return { sameSite, secure, maxAgeDays: o.maxAgeDays ?? 365, domain: o.domain, authoritative: o.authoritative ?? false };
 }
 
 // src/client/widgets/form.ts
@@ -2193,6 +2444,8 @@ var XeniaClient = class {
   renderer;
   analyticsQueue;
   tracker = null;
+  stopPageTracking = null;
+  stopEngagement = null;
   /** The in-flight (or finished) boot; shared so concurrent `init()` calls start one tracker. */
   booting = null;
   /** Bumped by `destroy()`, so a boot still waiting on the device id knows to stop. */
@@ -2244,17 +2497,21 @@ var XeniaClient = class {
           rootMargin: this.options.viewport?.rootMargin,
           triggerOnce: this.options.viewport?.triggerOnce ?? true
         },
+        slotClicks: this.options.slotClicks,
         // Declarative `data-xenia` elements fire journey triggers (immediate).
         fire: (eventId, interaction) => this.track(eventId, { interactionType: interaction }, { trigger: true }),
         // `[data-xenia-slot]` elements fire analytics-only personalization events.
-        fireSlot: (interaction, meta) => {
+        fireSlot: (interaction, meta2) => {
           this.track(
             "customEvent",
             {
               customEventName: interaction === "impression" ? "personalization_impression" : "personalization_click",
-              contentKey: meta.contentKey,
-              contentEntryId: meta.contentEntryId ?? null,
-              baseEntryId: meta.baseEntryId ?? null
+              ...meta2.contentKey ? { contentKey: meta2.contentKey } : {},
+              contentEntryId: meta2.contentEntryId ?? null,
+              baseEntryId: meta2.baseEntryId ?? null,
+              ...meta2.bucket ? { bucket: meta2.bucket } : {},
+              ...meta2.slot ? { slot: meta2.slot } : {},
+              ...meta2.label ? { label: meta2.label } : {}
             },
             { trigger: false }
           );
@@ -2262,11 +2519,32 @@ var XeniaClient = class {
       });
       this.tracker.start();
     }
+    const { pageViews = false, pageLeave = false } = this.options;
+    if (pageViews || pageLeave) {
+      this.stopPageTracking = startPageTracking({ track: (name, props) => this.track(name, props) }, { pageViews, pageLeave });
+    }
+    const { trail = false, contentClicks = false, navClicks = false } = this.options;
+    if (trail || contentClicks || navClicks) {
+      this.stopEngagement = startEngagement(
+        { track: (name, props) => this.track(name, props) },
+        {
+          trail,
+          contentClicks,
+          navClicks,
+          prefix: this.options.prefix ?? "xenia",
+          analyticsAllowed: () => this.analyticsAllowed() && !this.dntBlocked()
+        }
+      );
+    }
   }
   /** Tear down listeners, observers, and injected UI. */
   destroy() {
     this.tracker?.stop();
     this.tracker = null;
+    this.stopPageTracking?.();
+    this.stopPageTracking = null;
+    this.stopEngagement?.();
+    this.stopEngagement = null;
     this.renderer.destroy();
     this.analyticsQueue.stop();
     this.booting = null;
@@ -2964,6 +3242,414 @@ function reactMessageComponent(Component) {
   };
 }
 
-export { XeniaClient, XeniaContentProvider, XeniaContext, XeniaMessage, XeniaProvider, XeniaTrack, createXeniaClient, extractContentSwaps, parseActions, pendingTargets, personalizeContent, personalizePage, reactMessageComponent, spliceSlots, usePersonalization, usePersonalizationResolve, usePersonalizationResolveSlots, usePersonalizationSlots, usePersonalizedContent, usePersonalizedPage, useTrack, useWebhook, useXenia, useXeniaEntry, useXeniaResponse };
+// src/edge/debug-entries.ts
+function readDebugEntries(raw) {
+  if (!raw) return {};
+  try {
+    let text = decodeURIComponent(raw);
+    if (text.startsWith("%")) text = decodeURIComponent(text);
+    const parsed = JSON.parse(text);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+var str = (v) => typeof v === "string" || typeof v === "number" ? String(v) : "";
+var isObject2 = (v) => Boolean(v) && typeof v === "object" && !Array.isArray(v);
+var strings = (v) => Array.isArray(v) ? v.map(str).filter(Boolean) : [];
+function view(e) {
+  const decisions = (Array.isArray(e.decisions) ? e.decisions : []).filter(isObject2).map((d) => ({
+    key: str(d.key),
+    result: str(d.result) || "base",
+    reason: str(d.reason),
+    trace: isObject2(d.trace) ? Object.entries(d.trace).map(([step, outcome]) => [step, str(outcome)]) : []
+  }));
+  const p = isObject2(e.profile) ? e.profile : void 0;
+  const answers = isObject2(p?.answers) ? Object.entries(p.answers).flatMap(
+    ([name, a]) => isObject2(a) ? [{
+      name,
+      choice: str(a.choice),
+      source: str(a.source),
+      confidence: typeof a.confidence === "number" ? a.confidence : void 0,
+      model: str(a.model),
+      scores: isObject2(a.scores) ? Object.entries(a.scores).filter((x) => typeof x[1] === "number").sort((x, y) => y[1] - x[1]) : []
+    }] : []
+  ) : [];
+  const r = isObject2(e.request) ? e.request : {};
+  const geoOf = (g) => isObject2(g) ? Object.fromEntries(Object.entries(g).map(([k, v]) => [k, str(v)])) : void 0;
+  const consent = isObject2(r.consent) ? r.consent : void 0;
+  const custom = isObject2(e.custom) ? Object.entries(e.custom).flatMap(
+    ([label, value]) => Array.isArray(value) ? [{ label, lines: strings(value) }] : str(value) ? [{ label, lines: [str(value)] }] : []
+  ) : [];
+  return {
+    page: str(e.page),
+    source: str(e.source),
+    ms: typeof e.ms === "number" ? e.ms : void 0,
+    decisions,
+    profile: p ? { pageViews: typeof p.pageViews === "number" ? p.pageViews : 0, lastSection: str(p.lastSection), campaign: str(p.campaign), answers } : void 0,
+    request: {
+      location: geoOf(r.location),
+      detected: geoOf(r.detected),
+      via: str(r.via),
+      seen: strings(r.seen),
+      device: str(r.device),
+      localTime: str(r.localTime),
+      consent: consent ? { personalization: consent.personalization !== false, analytics: consent.analytics !== false } : void 0
+    },
+    custom
+  };
+}
+var changed = (result) => !/^(base|control|suppressed)\b/.test(result);
+function debugStatus(entry) {
+  const v = view(entry);
+  if (v.source === "timeout" || v.source === "error") return "attention";
+  return v.decisions.some((d) => changed(d.result)) ? "personalized" : "base";
+}
+var STATUS_LABEL = {
+  personalized: "personalized",
+  base: "showing base content",
+  attention: "couldn't decide"
+};
+var SOURCE_CHIP = {
+  xenia: "Live",
+  cache: "Cached",
+  timeout: "Timed out",
+  error: "Error",
+  "site page": "Site page",
+  "not targeted": "Not targeted",
+  "no consent": "No consent"
+};
+function sourceChip(source) {
+  const known = SOURCE_CHIP[source] ?? Object.entries(SOURCE_CHIP).find(([k]) => source.startsWith(`${k} `))?.[1];
+  if (known) return known;
+  return source ? source[0].toUpperCase() + source.slice(1) : "Unknown";
+}
+function readEntry(prefix) {
+  const raw = document.cookie.match(new RegExp(`(?:^|;\\s*)${prefix}_debug=([^;]+)`))?.[1];
+  return readDebugEntries(raw)[location.pathname] ?? null;
+}
+var OPEN_KEY = "xenia_debug_open";
+var TAB_KEY = "xenia_debug_tab";
+function Mark({ size }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 32 20", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "9", fill: "#3EC6FF" }),
+    /* @__PURE__ */ jsx("circle", { cx: "22", cy: "10", r: "9", fill: "#97CF49" })
+  ] });
+}
+function Id({ value }) {
+  return value.length > 14 && /^[0-9a-f-]+$/i.test(value) ? /* @__PURE__ */ jsxs("span", { title: value, children: [
+    value.slice(0, 8),
+    "\u2026"
+  ] }) : /* @__PURE__ */ jsx(Fragment, { children: value });
+}
+var percent = (n) => `${Math.round(n <= 1 ? n * 100 : n)}%`;
+function XeniaDebugPanel({ prefix = DEFAULT_PREFIX, position = "bottom-right", renderExtra }) {
+  const [entry, setEntry] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [tab, setTab] = useState("Decision");
+  const root = useRef(null);
+  const launcher = useRef(null);
+  const card = useRef(null);
+  const tabRefs = useRef({});
+  const id = useId();
+  useEffect(() => {
+    let timer;
+    const read = () => setEntry(readEntry(prefix));
+    const onNavigate = () => {
+      clearTimeout(timer);
+      setTimeout(read, 0);
+      timer = setTimeout(read, 300);
+    };
+    read();
+    try {
+      setOpen(sessionStorage.getItem(OPEN_KEY) === "1");
+      const saved = sessionStorage.getItem(TAB_KEY);
+      if (saved === "Decision" || saved === "Visitor" || saved === "Request" || saved === "Site") setTab(saved);
+    } catch {
+    }
+    const unwatch = watchNavigation(onNavigate);
+    return () => {
+      clearTimeout(timer);
+      unwatch();
+    };
+  }, [prefix]);
+  const toggle = useCallback((next, focusLauncher = false) => {
+    setOpen(next);
+    if (focusLauncher) launcher.current?.focus();
+    remember(OPEN_KEY, next ? "1" : "0");
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    card.current?.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape" && root.current?.contains(document.activeElement)) toggle(false, true);
+    };
+    const onDown = (e) => {
+      if (root.current && !root.current.contains(e.target)) toggle(false);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onDown);
+    };
+  }, [open, toggle]);
+  if (!entry) return null;
+  const status = debugStatus(entry);
+  const v = view(entry);
+  const tabs = ["Decision", "Visitor", "Request", ...v.custom.length || renderExtra ? ["Site"] : []];
+  const current = tabs.includes(tab) ? tab : "Decision";
+  const [vertical, horizontal] = position.split("-");
+  const choose = (t, focus = false) => {
+    setTab(t);
+    remember(TAB_KEY, t);
+    if (focus) tabRefs.current[t]?.focus();
+  };
+  const onTabKey = (e) => {
+    const i = tabs.indexOf(current);
+    const next = e.key === "ArrowRight" ? tabs[(i + 1) % tabs.length] : e.key === "ArrowLeft" ? tabs[(i - 1 + tabs.length) % tabs.length] : null;
+    if (next) {
+      e.preventDefault();
+      choose(next, true);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: root, className: "xdp", "data-vertical": vertical, "data-horizontal": horizontal, children: [
+    /* @__PURE__ */ jsx("style", { children: STYLES2 }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: launcher,
+        type: "button",
+        className: "xdp-launcher",
+        "data-status": status,
+        "aria-label": `Xenia personalization: ${STATUS_LABEL[status]}`,
+        "aria-expanded": open,
+        "aria-controls": open ? `${id}-card` : void 0,
+        onClick: () => toggle(!open),
+        children: /* @__PURE__ */ jsx(Mark, { size: 24 })
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs("div", { ref: card, id: `${id}-card`, role: "dialog", "aria-label": "Xenia personalization", tabIndex: -1, className: "xdp-card", children: [
+      /* @__PURE__ */ jsxs("header", { className: "xdp-head", children: [
+        /* @__PURE__ */ jsxs("div", { className: "xdp-head-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "xdp-pill", "data-status": status, children: status === "personalized" ? "Personalized" : "Base content" }),
+          /* @__PURE__ */ jsx("span", { className: "xdp-chip", title: v.source, children: sourceChip(v.source) }),
+          typeof v.ms === "number" && v.source === "xenia" ? /* @__PURE__ */ jsxs("span", { className: "xdp-ms", children: [
+            v.ms,
+            " ms"
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx("code", { className: "xdp-path", title: v.page, children: v.page }),
+        status === "attention" ? /* @__PURE__ */ jsx("p", { className: "xdp-alert", children: v.source === "timeout" ? "Xenia didn't answer within the time budget." : "The decision failed; the proxy's onError has the cause." }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Details", className: "xdp-tabs", children: tabs.map((t) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[t] = el;
+          },
+          type: "button",
+          role: "tab",
+          id: `${id}-tab-${t}`,
+          "aria-selected": current === t,
+          "aria-controls": `${id}-panel`,
+          tabIndex: current === t ? 0 : -1,
+          className: "xdp-tab",
+          onClick: () => choose(t),
+          onKeyDown: onTabKey,
+          children: t
+        },
+        t
+      )) }),
+      /* @__PURE__ */ jsxs("div", { role: "tabpanel", id: `${id}-panel`, "aria-labelledby": `${id}-tab-${current}`, className: "xdp-panel", children: [
+        current === "Decision" ? /* @__PURE__ */ jsx(DecisionTab, { v }) : null,
+        current === "Visitor" ? /* @__PURE__ */ jsx(VisitorTab, { v }) : null,
+        current === "Request" ? /* @__PURE__ */ jsx(RequestTab, { v }) : null,
+        current === "Site" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          v.custom.map(
+            (c) => c.lines.length === 1 ? /* @__PURE__ */ jsx(Row, { label: c.label, children: c.lines[0] }, c.label) : /* @__PURE__ */ jsxs("div", { className: "xdp-block", children: [
+              /* @__PURE__ */ jsx("div", { className: "xdp-block-title", children: c.label }),
+              /* @__PURE__ */ jsx("ul", { className: "xdp-list", children: c.lines.map((line, i) => /* @__PURE__ */ jsx("li", { children: line }, i)) })
+            ] }, c.label)
+          ),
+          renderExtra ? renderExtra(entry) : null
+        ] }) : null
+      ] })
+    ] }) : null
+  ] });
+}
+function remember(key, value) {
+  try {
+    sessionStorage.setItem(key, value);
+  } catch {
+  }
+}
+function Row({ label, children: children2 }) {
+  return /* @__PURE__ */ jsxs("div", { className: "xdp-row", children: [
+    /* @__PURE__ */ jsx("span", { className: "xdp-label", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "xdp-value", children: children2 })
+  ] });
+}
+function DecisionTab({ v }) {
+  if (!v.decisions.length) return /* @__PURE__ */ jsx("p", { className: "xdp-empty", children: "No journey targets this page." });
+  return /* @__PURE__ */ jsx(Fragment, { children: v.decisions.map((d) => /* @__PURE__ */ jsxs("div", { className: "xdp-block", children: [
+    /* @__PURE__ */ jsxs("div", { className: "xdp-block-head", children: [
+      /* @__PURE__ */ jsx("code", { className: "xdp-key", children: d.key }),
+      /* @__PURE__ */ jsx("span", { className: "xdp-result", "data-result": changed(d.result) ? "changed" : "base", children: d.result })
+    ] }),
+    d.reason ? /* @__PURE__ */ jsx("p", { className: "xdp-reason", children: d.reason }) : null,
+    d.trace.length ? /* @__PURE__ */ jsx("ol", { className: "xdp-steps", "aria-label": "Journey path", children: d.trace.map(([step, outcome]) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("code", { children: step }),
+      /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Id, { value: outcome }) })
+    ] }, step)) }) : null
+  ] }, d.key)) });
+}
+var SOURCE_NAME = { jev: "Jev", signals: "Signals" };
+function VisitorTab({ v }) {
+  const p = v.profile;
+  if (!p) return /* @__PURE__ */ jsx("p", { className: "xdp-empty", children: "No visitor profile came with this decision." });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "xdp-chips", children: [
+      /* @__PURE__ */ jsxs("span", { className: "xdp-chip", children: [
+        p.pageViews,
+        " page view",
+        p.pageViews === 1 ? "" : "s"
+      ] }),
+      p.lastSection ? /* @__PURE__ */ jsxs("span", { className: "xdp-chip", children: [
+        "Last: ",
+        p.lastSection
+      ] }) : null,
+      p.campaign ? /* @__PURE__ */ jsxs("span", { className: "xdp-chip", children: [
+        "Campaign: ",
+        p.campaign
+      ] }) : null
+    ] }),
+    p.answers.length === 0 ? /* @__PURE__ */ jsx("p", { className: "xdp-empty", children: "No Visitor Intent answers." }) : null,
+    p.answers.map((a) => {
+      const max = a.scores[0]?.[1] || 1;
+      return /* @__PURE__ */ jsxs("div", { className: "xdp-block", children: [
+        /* @__PURE__ */ jsxs("div", { className: "xdp-block-head", children: [
+          /* @__PURE__ */ jsx("code", { className: "xdp-key", children: a.name }),
+          /* @__PURE__ */ jsx("span", { className: "xdp-answer", children: a.choice || "no answer" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "xdp-meta", children: [
+          /* @__PURE__ */ jsx("span", { className: "xdp-source", "data-source": a.source || "none", children: SOURCE_NAME[a.source] ?? "No source" }),
+          typeof a.confidence === "number" && a.confidence > 0 ? /* @__PURE__ */ jsxs("span", { className: "xdp-confidence", children: [
+            /* @__PURE__ */ jsx("span", { className: "xdp-meter", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { style: { width: percent(Math.min(1, a.confidence)) } }) }),
+            percent(a.confidence),
+            " confident"
+          ] }) : null,
+          a.model ? /* @__PURE__ */ jsx("span", { className: "xdp-model", children: a.model }) : null
+        ] }),
+        a.scores.length ? /* @__PURE__ */ jsx("ul", { className: "xdp-scores", children: a.scores.map(([option, score]) => /* @__PURE__ */ jsxs("li", { "data-score": option, children: [
+          /* @__PURE__ */ jsx("span", { className: "xdp-score-label", title: option, children: option }),
+          /* @__PURE__ */ jsx("span", { className: "xdp-bar", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { style: { width: `${Math.max(2, score / max * 100)}%` } }) }),
+          /* @__PURE__ */ jsx("span", { className: "xdp-score-value", children: Math.round(score * 1e3) / 1e3 })
+        ] }, option)) }) : null
+      ] }, a.name);
+    })
+  ] });
+}
+var place = (g) => g ? [g.city, g.regionName || g.region].filter(Boolean).join(", ") : "";
+function RequestTab({ v }) {
+  const r = v.request;
+  const loc = r.location;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "xdp-block", children: [
+      /* @__PURE__ */ jsxs("div", { className: "xdp-block-head", children: [
+        /* @__PURE__ */ jsx("span", { className: "xdp-place", children: place(loc) || (loc?.country ? "Country only" : "Location unknown") }),
+        loc?.country ? /* @__PURE__ */ jsx("span", { className: "xdp-chip", children: loc.country }) : null
+      ] }),
+      loc?.latitude && loc.longitude ? /* @__PURE__ */ jsxs(Row, { label: "Coordinates", children: [
+        loc.latitude,
+        ", ",
+        loc.longitude
+      ] }) : null,
+      r.localTime ? /* @__PURE__ */ jsx(Row, { label: "Local time", children: r.localTime }) : null,
+      loc?.timeZone ? /* @__PURE__ */ jsx(Row, { label: "Time zone", children: loc.timeZone }) : null,
+      /* @__PURE__ */ jsx(Row, { label: "Resolved via", children: loc?.source === "qa" ? "QA override" : !r.via || r.via === "none" ? "Not resolved" : r.via }),
+      r.detected ? /* @__PURE__ */ jsx(Row, { label: "Edge detected", children: [place(r.detected), r.detected.country].filter(Boolean).join(", ") || "nothing" }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "xdp-block", children: [
+      /* @__PURE__ */ jsx("div", { className: "xdp-block-title", children: "Location sources seen" }),
+      r.seen.length ? /* @__PURE__ */ jsx("div", { className: "xdp-chips", children: r.seen.map((s) => /* @__PURE__ */ jsx("code", { className: "xdp-chip", children: s }, s)) }) : /* @__PURE__ */ jsx("p", { className: "xdp-empty", children: "No location header or runtime context reached the proxy." })
+    ] }),
+    r.device ? /* @__PURE__ */ jsx(Row, { label: "Device", children: r.device }) : null,
+    r.consent ? /* @__PURE__ */ jsxs(Row, { label: "Consent", children: [
+      "Personalization ",
+      r.consent.personalization ? "on" : "off",
+      ", Analytics ",
+      r.consent.analytics ? "on" : "off"
+    ] }) : null
+  ] });
+}
+var STYLES2 = `
+.xdp{--xdp-paper:#FFFFFF;--xdp-ink:#0A0F14;--xdp-muted:#424548;--xdp-faint:#5F6469;--xdp-border:#DEE2E5;--xdp-soft:#F2F4F5;--xdp-blue:#005C91;--xdp-blue-strong:#00334F;--xdp-blue-tint:#E6F1F7;--xdp-ok:#316302;--xdp-ok-tint:#EBF4E1;--xdp-warn:#9A5B00;--xdp-warn-tint:#FFF3DF;
+  position:fixed;z-index:2147483000;display:flex;flex-direction:column;gap:8px;font:13px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--xdp-ink);font-variant-numeric:tabular-nums;color-scheme:light;-webkit-font-smoothing:antialiased}
+.xdp *,.xdp *::before,.xdp *::after{box-sizing:border-box}
+.xdp[data-vertical=bottom]{bottom:16px;flex-direction:column-reverse}.xdp[data-vertical=top]{top:16px}
+.xdp[data-horizontal=right]{right:16px;align-items:flex-end}.xdp[data-horizontal=left]{left:16px;align-items:flex-start}
+.xdp button{font:inherit;color:inherit}
+.xdp code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
+.xdp-launcher{width:40px;height:40px;border-radius:50%;border:0;padding:0;background:var(--xdp-blue);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 6px 18px rgba(0,51,79,.35)}
+.xdp-launcher:hover{background:var(--xdp-blue-strong)}
+.xdp-launcher:focus-visible,.xdp-tab:focus-visible{outline:2px solid var(--xdp-blue);outline-offset:2px}
+.xdp-card{width:360px;max-width:calc(100vw - 32px);background:var(--xdp-paper);border:1px solid var(--xdp-border);border-radius:14px;box-shadow:0 16px 40px rgba(10,15,20,.16),0 2px 6px rgba(10,15,20,.06);overflow:hidden}
+.xdp-card:focus,.xdp-card:focus-visible{outline:none}
+.xdp-head{padding:14px 16px 10px}
+.xdp-head-row{display:flex;align-items:center;gap:8px}
+.xdp-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-weight:600;background:var(--xdp-soft);color:var(--xdp-muted)}
+.xdp-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
+.xdp-pill[data-status=personalized]{background:var(--xdp-ok-tint);color:var(--xdp-ok)}
+.xdp-pill[data-status=attention]{background:var(--xdp-warn-tint);color:var(--xdp-warn)}
+.xdp-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;background:var(--xdp-soft);color:var(--xdp-muted);font-size:12px;white-space:nowrap}
+code.xdp-chip{font-size:11.5px}
+.xdp-ms{margin-left:auto;color:var(--xdp-faint)}
+.xdp-path{display:block;margin-top:8px;font-size:13px;color:var(--xdp-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.xdp-alert{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:var(--xdp-warn-tint);color:var(--xdp-warn)}
+.xdp-tabs{display:flex;gap:4px;padding:0 12px;border-bottom:1px solid var(--xdp-border)}
+.xdp-tab{background:none;border:0;padding:8px 6px 9px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--xdp-muted);cursor:pointer;border-radius:4px 4px 0 0}
+.xdp-tab:hover{color:var(--xdp-ink)}
+.xdp-tab[aria-selected=true]{color:var(--xdp-blue);border-bottom-color:var(--xdp-blue);font-weight:600}
+.xdp-panel{padding:12px 16px 16px;display:flex;flex-direction:column;gap:10px}
+.xdp-block{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--xdp-border);border-radius:10px}
+.xdp-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
+.xdp-block-title{font-weight:600}
+.xdp-key{color:var(--xdp-ink);overflow-wrap:anywhere}
+.xdp-result{padding:2px 8px;border-radius:6px;background:var(--xdp-soft);color:var(--xdp-muted);font-weight:600;text-align:right}
+.xdp-result[data-result=changed]{background:var(--xdp-ok-tint);color:var(--xdp-ok)}
+.xdp-reason{margin:0;color:var(--xdp-warn)}
+.xdp-steps{list-style:none;margin:2px 0 0;padding:0 0 0 14px;position:relative;display:flex;flex-direction:column;gap:6px}
+.xdp-steps::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--xdp-border)}
+.xdp-steps li{position:relative;display:flex;justify-content:space-between;gap:12px}
+.xdp-steps li::before{content:"";position:absolute;left:-13px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--xdp-paper);border:1.5px solid var(--xdp-blue)}
+.xdp-steps code{color:var(--xdp-muted)}
+.xdp-steps span{text-align:right;overflow-wrap:anywhere}
+.xdp-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
+.xdp-label{color:var(--xdp-muted);flex:none}
+.xdp-value{text-align:right;min-width:0;overflow-wrap:anywhere}
+.xdp-chips{display:flex;flex-wrap:wrap;gap:6px}
+.xdp-answer{font-weight:600}
+.xdp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--xdp-muted);font-size:12px}
+.xdp-source{padding:1px 7px;border-radius:6px;font-weight:600;background:var(--xdp-soft)}
+.xdp-source[data-source=signals]{background:var(--xdp-ok-tint);color:var(--xdp-ok)}
+.xdp-source[data-source=jev]{background:var(--xdp-blue-tint);color:var(--xdp-blue)}
+.xdp-confidence{display:inline-flex;align-items:center;gap:6px}
+.xdp-meter{display:inline-block;width:44px;height:5px;border-radius:3px;background:var(--xdp-soft);overflow:hidden}
+.xdp-meter span,.xdp-bar span{display:block;height:100%;background:var(--xdp-blue);border-radius:3px}
+.xdp-scores{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
+.xdp-scores li{display:grid;grid-template-columns:minmax(0,92px) 1fr auto;align-items:center;gap:8px;font-size:12px}
+.xdp-score-label{color:var(--xdp-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.xdp-bar{height:6px;border-radius:3px;background:var(--xdp-soft);overflow:hidden}
+.xdp-scores li:first-child .xdp-bar span{background:var(--xdp-ok)}
+.xdp-score-value{color:var(--xdp-muted);min-width:38px;text-align:right}
+.xdp-place{font-weight:600;font-size:14px}
+.xdp-list{margin:0;padding-left:18px;list-style:disc;display:flex;flex-direction:column;gap:4px}.xdp-list li::marker{color:var(--xdp-blue)}
+.xdp-empty{margin:0;color:var(--xdp-muted)}
+.xdp-model{color:var(--xdp-faint)}
+@media (prefers-reduced-motion:no-preference){.xdp-card{animation:xdp-in .14s ease-out}@keyframes xdp-in{from{opacity:0;transform:translateY(4px)}}}
+`;
+
+export { XeniaClient, XeniaContentProvider, XeniaContext, XeniaDebugPanel, XeniaMessage, XeniaProvider, XeniaTrack, createXeniaClient, debugStatus, extractContentSwaps, parseActions, pendingTargets, personalizeContent, personalizePage, reactMessageComponent, spliceSlots, usePersonalization, usePersonalizationResolve, usePersonalizationResolveSlots, usePersonalizationSlots, usePersonalizedContent, usePersonalizedPage, useTrack, useWebhook, useXenia, useXeniaEntry, useXeniaResponse };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map