@xenia-martech/sdk-js 1.2.0-dev.8 → 1.2.0-dev.9

package/dist/client/react/index.cjs

@@ -722,7 +722,7 @@ async function personalizeContent(payload, options) {
     const next = apply(target, op, d.decision.field ?? target.marker.field, items, cms);
     report({
       target: target.id,
-      kind: "runtime",
+      kind: target.local ? "static" : "runtime",
       op,
       entryIds: items.map((e) => cms.entryId(e)).filter((id) => !!id),
       contentKey: d.decision.contentKey,
@@ -732,20 +732,23 @@ async function personalizeContent(payload, options) {
     return next;
   };
   for (let round = 0; ; round++) {
-    const pending = walk(frontier, cms, settled, round, report, (t) => {
+    const pending = walk(frontier, cms, settled, round, report, options.contentKey, (t) => {
       const d = decided.get(t.id);
       return d ? settle(t, d, round) : void 0;
     });
     if (pending.size === 0) return { content: box.root, applied, complete: true };
-    if (!options.resolve || round >= maxRounds) {
-      return { content: box.root, applied, complete: !options.resolve };
+    const remote = [...pending.values()].filter((p) => !p.local).map((p) => p.id);
+    const local = [...pending.values()].flatMap((p) => p.local ? [p.local] : []);
+    if (!options.resolve && local.length === 0 || round >= maxRounds) {
+      return { content: box.root, applied, complete: !options.resolve && round < maxRounds };
     }
     progress(options, { content: box.root, round, pending: [...pending.keys()] });
     let decisions;
     let entriesById;
     let queried;
     try {
-      decisions = await withDeadline(options.resolve([...pending.keys()]), deadline);
+      decisions = options.resolve && remote.length > 0 ? await withDeadline(options.resolve(remote), deadline) : [];
+      decisions = [...decisions, ...local];
       ({ entriesById, queried } = await withDeadline(loadReplacements(decisions, cms, options.locale), deadline));
     } catch (error) {
       return { content: box.root, applied, complete: false, error: error === TIMEOUT ? void 0 : error };
@@ -768,7 +771,7 @@ function progress(options, p) {
   } catch {
   }
 }
-function walk(frontier, cms, settled, round, report, reuse) {
+function walk(frontier, cms, settled, round, report, contentKey, reuse) {
   const pending = /* @__PURE__ */ new Map();
   const seen = /* @__PURE__ */ new WeakSet();
   const deferred = /* @__PURE__ */ new WeakSet();
@@ -779,7 +782,8 @@ function walk(frontier, cms, settled, round, report, reuse) {
     if (!value || typeof value !== "object" || deferred.has(value)) continue;
     const id = settled.has(value) ? void 0 : cms.entryId(value);
     const marker = id ? cms.marker(value) : null;
-    if (id && marker?.kind === "runtime") {
+    const local = id && marker?.kind === "static" && marker.ids?.length && cms.staticVariants(value).length === 0 ? localDecision(id, marker, contentKey) : void 0;
+    if (id && marker && (marker.kind === "runtime" || local)) {
       const again = reuse({ id, marker, entry: value, slots: [slot] });
       if (again) {
         queue.push(...again);
@@ -789,7 +793,7 @@ function walk(frontier, cms, settled, round, report, reuse) {
       if (existing) {
         existing.slots.push(slot);
       } else {
-        pending.set(id, { id, marker, entry: value, slots: [slot] });
+        pending.set(id, { id, marker, entry: value, slots: [slot], ...local ? { local } : {} });
         if (marker.op === "items" && marker.field) {
           const held = cms.getField(value, marker.field);
           if (held && typeof held === "object") deferred.add(held);
@@ -823,6 +827,16 @@ function walk(frontier, cms, settled, round, report, reuse) {
   }
   return pending;
 }
+function localDecision(id, marker, contentKey) {
+  return {
+    target: id,
+    op: marker.op ?? "replace",
+    ...marker.field ? { field: marker.field } : {},
+    ids: marker.ids,
+    ...marker.ct ? { contentType: marker.ct } : {},
+    contentKey
+  };
+}
 function apply(target, op, field, items, cms) {
   if (op === "items") {
     if (field) {
@@ -861,9 +875,11 @@ function children(value) {
 }
 async function loadReplacements(decisions, cms, locale) {
   const ids = [...new Set(decisions.flatMap((d) => d.ids ?? []))];
+  const types = {};
+  for (const d of decisions) if (d.contentType) for (const id of d.ids ?? []) types[id] = d.contentType;
   const queries = decisions.filter((d) => !d.ids && d.query);
   const [fetched, ...results] = await Promise.all([
-    ids.length > 0 ? cms.fetchEntries(ids, locale) : Promise.resolve([]),
+    ids.length > 0 ? cms.fetchEntries(ids, locale, types) : Promise.resolve([]),
     ...queries.map((d) => cms.queryEntries(d.query, locale).catch(() => []))
   ]);
   const entriesById = /* @__PURE__ */ new Map();
@@ -894,7 +910,7 @@ function pendingTargets(payload, adapter, contentKey) {
     content = cms.prepare ? cms.prepare(content) : content;
     const root = { parent: { root: content }, key: "root", value: content };
     return [...walk([root], cms, /* @__PURE__ */ new WeakSet(), 0, () => {
-    }, () => void 0).keys()];
+    }, contentKey, () => void 0).keys()];
   } catch {
     return [];
   }
@@ -3332,6 +3348,7 @@ function readEntry(prefix) {
   return readDebugEntries(raw)[location.pathname] ?? null;
 }
 var OPEN_KEY = "xenia_debug_open";
+var PIN_KEY = "xenia_debug_pinned";
 var TAB_KEY = "xenia_debug_tab";
 function Mark({ size }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 32 20", "aria-hidden": "true", focusable: "false", children: [
@@ -3346,9 +3363,16 @@ function Id({ value }) {
   ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value });
 }
 var percent = (n) => `${Math.round(n <= 1 ? n * 100 : n)}%`;
-function XeniaDebugPanel({ prefix = DEFAULT_PREFIX, position = "bottom-right", defaultOpen = false, renderExtra }) {
+function XeniaDebugPanel({
+  prefix = DEFAULT_PREFIX,
+  position = "bottom-right",
+  defaultOpen = false,
+  keepOpen = false,
+  renderExtra
+}) {
   const [entry, setEntry] = react.useState(null);
   const [open, setOpen] = react.useState(false);
+  const [pinned, setPinned] = react.useState(keepOpen);
   const [tab, setTab] = react.useState("Decision");
   const root = react.useRef(null);
   const launcher = react.useRef(null);
@@ -3368,31 +3392,39 @@ function XeniaDebugPanel({ prefix = DEFAULT_PREFIX, position = "bottom-right", d
     try {
       const saved = sessionStorage.getItem(OPEN_KEY);
       setOpen(saved === null ? defaultOpen : saved === "1");
+      const savedPin = sessionStorage.getItem(PIN_KEY);
+      setPinned(savedPin === null ? keepOpen : savedPin === "1");
       const savedTab = sessionStorage.getItem(TAB_KEY);
       if (savedTab === "Decision" || savedTab === "Visitor" || savedTab === "Request" || savedTab === "Site") setTab(savedTab);
     } catch {
       setOpen(defaultOpen);
+      setPinned(keepOpen);
     }
     const unwatch = watchNavigation(onNavigate);
     return () => {
       clearTimeout(timer);
       unwatch();
     };
-  }, [prefix, defaultOpen]);
+  }, [prefix, defaultOpen, keepOpen]);
   const toggle = react.useCallback((next, focusLauncher = false) => {
     setOpen(next);
     focusOnOpen.current = next;
     if (focusLauncher) launcher.current?.focus();
     remember(OPEN_KEY, next ? "1" : "0");
   }, []);
+  const pin = (next) => {
+    setPinned(next);
+    remember(PIN_KEY, next ? "1" : "0");
+  };
   react.useEffect(() => {
     if (!open) return;
     if (focusOnOpen.current) card.current?.focus();
+    if (pinned) return;
     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);
+      if (root.current && !root.current.contains(e.target)) setOpen(false);
     };
     document.addEventListener("keydown", onKey);
     document.addEventListener("mousedown", onDown);
@@ -3400,7 +3432,7 @@ function XeniaDebugPanel({ prefix = DEFAULT_PREFIX, position = "bottom-right", d
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("mousedown", onDown);
     };
-  }, [open, toggle]);
+  }, [open, pinned, toggle]);
   if (!entry) return null;
   const status = debugStatus(entry);
   const v = view(entry);
@@ -3445,7 +3477,28 @@ function XeniaDebugPanel({ prefix = DEFAULT_PREFIX, position = "bottom-right", d
           typeof v.ms === "number" && v.source === "xenia" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "xdp-ms", children: [
             v.ms,
             " ms"
-          ] }) : null
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "xdp-pin",
+              "aria-pressed": pinned,
+              "aria-label": "Keep open",
+              title: pinned ? "Pinned: only the Xenia button closes this" : "Keep open: clicks elsewhere won't close it",
+              onClick: () => pin(!pinned),
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M15 3l6 6-3 1-4 4 1 5-2 2-4-4-5 5-1-1 5-5-4-4 2-2 5 1 4-4z",
+                  fill: pinned ? "currentColor" : "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("code", { className: "xdp-path", title: v.page, children: v.page }),
         status === "attention" ? /* @__PURE__ */ jsxRuntime.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
@@ -3614,6 +3667,11 @@ var STYLES2 = `
 code.xdp-chip{font-size:11.5px}
 .xdp-chip[data-tone=holdout]{background:var(--xdp-warn-tint);color:var(--xdp-warn);font-weight:600}
 .xdp-ms{margin-left:auto;color:var(--xdp-faint)}
+.xdp-pin{margin-left:auto;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--xdp-faint);cursor:pointer}
+.xdp-ms + .xdp-pin{margin-left:4px}
+.xdp-pin:hover{background:var(--xdp-soft);color:var(--xdp-muted)}
+.xdp-pin[aria-pressed=true]{color:var(--xdp-blue);background:var(--xdp-soft)}
+.xdp-pin:focus-visible{outline:2px solid var(--xdp-blue);outline-offset:1px}
 .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)}