@active-reach/web-sdk 1.19.0 → 1.21.0

package/dist/index.js

@@ -2095,7 +2095,7 @@ function renderGame(ctx, subType) {
   fn(ctx);
   return true;
 }
-const ASPECT = { "16:9": "16 / 9", "9:16": "9 / 16", "1:1": "1 / 1", "4:5": "4 / 5" };
+const ASPECT$1 = { "16:9": "16 / 9", "9:16": "9 / 16", "1:1": "1 / 1", "4:5": "4 / 5" };
 function buildVideo(ctx, aspect, autoplay, loop) {
   var _a;
   const { campaign, sanitizeUrl } = ctx;
@@ -2103,7 +2103,7 @@ function buildVideo(ctx, aspect, autoplay, loop) {
   const videoUrl = sanitizeUrl(ic.video_url || campaign.video_url || "");
   const poster = campaign.image_url ? sanitizeUrl(campaign.image_url) : null;
   const wrap = document.createElement("div");
-  wrap.style.cssText = `position:relative;width:100%;aspect-ratio:${ASPECT[aspect] || ASPECT["16:9"]};background:#0b1220;border-radius:14px;overflow:hidden;`;
+  wrap.style.cssText = `position:relative;width:100%;aspect-ratio:${ASPECT$1[aspect] || ASPECT$1["16:9"]};background:#0b1220;border-radius:14px;overflow:hidden;`;
   if (videoUrl) {
     const vid = document.createElement("video");
     vid.src = videoUrl;
@@ -2272,11 +2272,179 @@ function renderVideoInline(ctx, target) {
   target.appendChild(banner);
   return true;
 }
+const HEX = /^#[0-9a-fA-F]{3,8}$/;
+function safeColor(c, fallback) {
+  return c && HEX.test(c) ? c : fallback;
+}
+const RADIUS = { none: "0", lg: "12px", xl: "16px", "2xl": "20px" };
+const ASPECT = { "16:9": "16 / 9", "4:3": "4 / 3", "21:9": "21 / 9" };
+function cardHeadline(c) {
+  return c.headline ?? c.title ?? "";
+}
+function cardSub(c) {
+  return c.subhead ?? c.body ?? "";
+}
+function cardCta(c) {
+  return c.cta_label ?? c.cta_text ?? "";
+}
+function cardUrl(c) {
+  if (c.cta_url) return c.cta_url;
+  const t = c.cta_target;
+  if (t && t.value) return t.type === "category" ? `?category=${encodeURIComponent(t.value)}` : t.value;
+  return "";
+}
+function renderHeroInline(ctx, target) {
+  const { campaign, sanitizeUrl, trackEvent } = ctx;
+  const ic = campaign.interactive_config || {};
+  const cards = Array.isArray(ic.cards) ? ic.cards : [];
+  if (cards.length === 0) return false;
+  const chrome = ic.chrome || {};
+  const accent = safeColor(
+    chrome.accent && chrome.accent !== "brand" ? chrome.accent : campaign.background_color,
+    "#4169e1"
+  );
+  const radius = RADIUS[chrome.radius ?? "2xl"] ?? RADIUS["2xl"];
+  const variant = chrome.variant ?? "hero_fullbleed";
+  if (variant === "announcement_bar") {
+    const c = cards[0];
+    const bar = document.createElement("div");
+    bar.style.cssText = `display:flex;align-items:center;justify-content:center;gap:10px;background:${accent};color:#fff;padding:8px 14px;font:600 13px/1.3 Inter,system-ui,sans-serif;text-align:center;`;
+    bar.textContent = [cardHeadline(c), cardSub(c)].filter(Boolean).join(" · ");
+    const url = sanitizeUrl(cardUrl(c));
+    if (url && cardCta(c)) {
+      const a = document.createElement("span");
+      a.style.cssText = "text-decoration:underline;cursor:pointer;white-space:nowrap;";
+      a.textContent = cardCta(c);
+      a.addEventListener("click", () => {
+        var _a;
+        trackEvent(campaign.id, "clicked");
+        (_a = ctx.navigate) == null ? void 0 : _a.call(ctx, url);
+      });
+      bar.appendChild(a);
+    }
+    target.appendChild(bar);
+    trackEvent(campaign.id, "impression");
+    return true;
+  }
+  const root = document.createElement("div");
+  root.style.cssText = `position:relative;width:100%;overflow:hidden;border-radius:${radius};box-shadow:0 1px 2px rgba(16,24,40,0.06);${chrome.aspect_ratio && ASPECT[chrome.aspect_ratio] ? `aspect-ratio:${ASPECT[chrome.aspect_ratio]};` : "min-height:300px;"}`;
+  root.setAttribute("data-campaign-id", campaign.id);
+  const track = document.createElement("div");
+  track.style.cssText = "display:flex;height:100%;width:100%;transition:transform 0.5s ease;";
+  root.appendChild(track);
+  const overlayCss = chrome.overlay === "none" ? "" : chrome.overlay === "full-scrim" ? "background:linear-gradient(0deg,rgba(0,0,0,0.55),rgba(0,0,0,0.25));" : "background:linear-gradient(to top right,rgba(0,0,0,0.7),rgba(0,0,0,0.25) 45%,transparent);";
+  const justify = chrome.text_position === "center" ? "center" : "flex-end";
+  const align = chrome.text_position === "bottom-left" || !chrome.text_position ? "flex-start" : "center";
+  cards.forEach((c, i) => {
+    const slide = document.createElement("div");
+    slide.style.cssText = "position:relative;flex:0 0 100%;width:100%;height:100%;min-height:inherit;background:#f1f5f9;";
+    const videoUrl = sanitizeUrl(c.video_url ?? "");
+    const isVideo = !!videoUrl || c.media_type === "video";
+    const mediaUrl = isVideo ? videoUrl || sanitizeUrl(c.media_url ?? "") : sanitizeUrl(c.image_url ?? c.media_url ?? "");
+    if (mediaUrl) {
+      if (isVideo) {
+        const v = document.createElement("video");
+        v.src = mediaUrl;
+        v.autoplay = true;
+        v.muted = true;
+        v.loop = true;
+        v.playsInline = true;
+        v.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:cover;";
+        slide.appendChild(v);
+      } else {
+        const img = document.createElement("div");
+        img.style.cssText = `position:absolute;inset:0;background:url("${mediaUrl}") center/cover no-repeat;`;
+        slide.appendChild(img);
+      }
+    }
+    if (overlayCss) {
+      const scrim = document.createElement("div");
+      scrim.style.cssText = `position:absolute;inset:0;${overlayCss}`;
+      slide.appendChild(scrim);
+    }
+    const content = document.createElement("div");
+    content.style.cssText = `position:absolute;inset:0;display:flex;flex-direction:column;justify-content:${justify};align-items:${align};gap:6px;padding:24px;text-align:${align === "center" ? "center" : "left"};`;
+    const h = cardHeadline(c);
+    if (h) {
+      const head = document.createElement("h2");
+      head.textContent = h;
+      head.style.cssText = "margin:0;color:#fff;font:800 24px/1.2 Inter Tight,Inter,system-ui,sans-serif;letter-spacing:-0.02em;text-shadow:0 1px 8px rgba(0,0,0,0.35);max-width:90%;";
+      content.appendChild(head);
+    }
+    const s = cardSub(c);
+    if (s) {
+      const sub = document.createElement("p");
+      sub.textContent = s;
+      sub.style.cssText = "margin:0;color:rgba(255,255,255,0.92);font:500 14px/1.4 Inter,system-ui,sans-serif;text-shadow:0 1px 6px rgba(0,0,0,0.3);max-width:90%;";
+      content.appendChild(sub);
+    }
+    const cta = cardCta(c);
+    const url = sanitizeUrl(cardUrl(c));
+    if (cta && chrome.cta_style !== "none") {
+      const btn = document.createElement("button");
+      btn.textContent = cta;
+      btn.style.cssText = chrome.cta_style === "underline" ? `margin-top:6px;background:none;border:none;color:#fff;font:700 14px Inter,system-ui,sans-serif;text-decoration:underline;cursor:pointer;padding:0;` : `margin-top:8px;background:${accent};color:#fff;border:none;border-radius:999px;padding:9px 18px;font:700 13px Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.2);`;
+      btn.addEventListener("click", () => {
+        var _a;
+        trackEvent(campaign.id, "clicked", { stepId: `card_${i}` });
+        if (url) (_a = ctx.navigate) == null ? void 0 : _a.call(ctx, url);
+      });
+      content.appendChild(btn);
+    }
+    slide.appendChild(content);
+    track.appendChild(slide);
+  });
+  const dotEls = [];
+  let activeIdx = 0;
+  const goto = (idx) => {
+    activeIdx = (idx % cards.length + cards.length) % cards.length;
+    track.style.transform = `translateX(-${activeIdx * 100}%)`;
+    dotEls.forEach((d, i) => {
+      d.style.width = i === activeIdx ? "18px" : "6px";
+      d.style.background = i === activeIdx ? accent : "rgba(255,255,255,0.7)";
+    });
+  };
+  const dots = document.createElement("div");
+  dots.style.cssText = "position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2;";
+  if (cards.length > 1) {
+    cards.forEach((_, i) => {
+      const dot = document.createElement("span");
+      dot.style.cssText = "width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,0.7);transition:all 0.25s;cursor:pointer;";
+      dot.addEventListener("click", () => goto(i));
+      dotEls.push(dot);
+      dots.appendChild(dot);
+    });
+    root.appendChild(dots);
+  }
+  target.appendChild(root);
+  goto(0);
+  if (cards.length > 1 && chrome.loop !== false) {
+    const ms = typeof chrome.autoplay_ms === "number" && chrome.autoplay_ms >= 1500 ? chrome.autoplay_ms : 4e3;
+    let timer = window.setInterval(() => goto(activeIdx + 1), ms);
+    root.addEventListener("mouseenter", () => window.clearInterval(timer));
+    root.addEventListener("mouseleave", () => {
+      timer = window.setInterval(() => goto(activeIdx + 1), ms);
+    });
+  }
+  trackEvent(campaign.id, "impression");
+  return true;
+}
 const STYLE_ID = "aegis-chat-styles";
 const POLL_INTERVAL_MS = 5e3;
+let currentLauncher = null;
+function getCurrentLauncher() {
+  return currentLauncher;
+}
+function openChat(prefill) {
+  currentLauncher == null ? void 0 : currentLauncher.openPanel(prefill);
+}
+function closeChat() {
+  currentLauncher == null ? void 0 : currentLauncher.closePanel();
+}
 const ATTENTION_DELAY_MS = 4500;
 class AegisChat {
   constructor(config) {
+    this.sessionResumed = false;
     this.open = false;
     this.initialized = false;
     this.unread = 0;
@@ -2294,12 +2462,14 @@ class AegisChat {
     this.icon = config.icon ?? "sparkle";
     this.logoUrl = config.logoUrl;
     this.position = config.position ?? "bottom-right";
+    this.displayMode = config.displayMode ?? "bubble";
     this.agentPersona = config.agentPersona;
     this.quickReplies = config.quickReplies;
     this.onSessionStart = config.onSessionStart;
     this.onSessionEnd = config.onSessionEnd;
     this.onMessageSent = config.onMessageSent;
     this.anonymousId = this.readAnonId();
+    this.contactId = this.contactId ?? this.readStoredContactId();
   }
   // ── Lifecycle ────────────────────────────────────────────────────────────
   initialize() {
@@ -2307,7 +2477,8 @@ class AegisChat {
     this.initialized = true;
     this.injectStyles();
     this.mount();
-    this.scheduleAttention();
+    currentLauncher = this;
+    if (this.displayMode !== "nav") this.scheduleAttention();
   }
   /** Called by the runtime when the visitor identifies. */
   updateContactId(contactId) {
@@ -2330,7 +2501,7 @@ class AegisChat {
     (_c = this.bubble) == null ? void 0 : _c.classList.add("aegis-chat-bubble--hidden");
     this.clearUnread();
     if (prefill && this.input) this.input.value = prefill;
-    void this.refreshHistory();
+    void this.resumeSession();
     this.startPolling();
     (_d = this.input) == null ? void 0 : _d.focus();
   }
@@ -2355,13 +2526,22 @@ class AegisChat {
     this.stopPolling();
     (_a = this.root) == null ? void 0 : _a.remove();
     this.initialized = false;
+    if (currentLauncher === this) currentLauncher = null;
   }
   // ── Send ─────────────────────────────────────────────────────────────────
-  async send(text) {
+  async send(text, media) {
     var _a;
-    const message = text.trim();
-    if (!message) return;
-    this.appendBubble({ id: `local_${Date.now()}`, sender: "customer", role: "user", content: message });
+    const caption2 = text.trim();
+    if (!caption2 && !media) return;
+    const message = caption2 || (media ? media.type === "image" ? "Sent a photo 📷" : "Sent a file 📎" : "");
+    this.appendBubble({
+      id: `local_${Date.now()}`,
+      sender: "customer",
+      role: "user",
+      content: message,
+      media_url: (media == null ? void 0 : media.url) ?? null,
+      media_type: (media == null ? void 0 : media.type) ?? null
+    });
     this.pendingEcho.push(message);
     if (this.input) {
       this.input.value = "";
@@ -2377,6 +2557,8 @@ class AegisChat {
           channel: this.channel,
           anonymous_id: this.anonymousId,
           contact_id: this.contactId,
+          media_url: media == null ? void 0 : media.url,
+          media_type: media == null ? void 0 : media.type,
           // Active Web Chat — binds the campaign-configured persona. Optional;
           // the backend falls back to the tenant default if unknown/absent
           // (honored server-side in Phase E). JSON.stringify drops it if absent.
@@ -2395,6 +2577,7 @@ class AegisChat {
       } catch {
       }
       this.contactId = data.contact_id;
+      this.persistContactId(data.contact_id);
       this.sseTicket = data.sse_ticket;
       this.connectSSE(data.sse_ticket);
       void this.refreshHistory();
@@ -2403,6 +2586,51 @@ class AegisChat {
       this.appendSystem("Sorry — your message could not be delivered. Please try again.");
     }
   }
+  // ── Media attachments ─────────────────────────────────────────────────────
+  /** Validate + upload a picked file, then send it as a media message. */
+  async handleFile(file) {
+    var _a;
+    const allowed = /* @__PURE__ */ new Set(["image/jpeg", "image/png", "image/gif", "image/webp", "application/pdf"]);
+    if (!allowed.has(file.type)) {
+      this.appendSystem("That file type isn’t supported (images or PDF only).");
+      return;
+    }
+    if (file.size > 8 * 1024 * 1024) {
+      this.appendSystem("That file is too large (max 8 MB).");
+      return;
+    }
+    try {
+      const data = await this.fileToBase64(file);
+      const res = await fetch(`${this.apiHost}/v1/chat/upload`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-Aegis-Write-Key": this.writeKey },
+        body: JSON.stringify({ data, content_type: file.type, filename: file.name })
+      });
+      if (!res.ok) {
+        this.log("upload failed", res.status);
+        this.appendSystem("Sorry — that attachment couldn’t be uploaded.");
+        return;
+      }
+      const out = await res.json();
+      await this.send(((_a = this.input) == null ? void 0 : _a.value) ?? "", { url: out.media_url, type: out.media_type });
+    } catch (err) {
+      this.log("upload error", err);
+      this.appendSystem("Sorry — that attachment couldn’t be uploaded.");
+    }
+  }
+  /** Read a File as bare base64 (strip the `data:…;base64,` prefix). */
+  fileToBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = String(reader.result || "");
+        const comma = result.indexOf(",");
+        resolve(comma >= 0 ? result.slice(comma + 1) : result);
+      };
+      reader.onerror = () => reject(reader.error);
+      reader.readAsDataURL(file);
+    });
+  }
   // ── Reply transport: SSE nudge + history refetch (poll fallback) ──────────
   connectSSE(ticket) {
     if (!this.open) return;
@@ -2540,6 +2768,21 @@ class AegisChat {
         void this.send(input.value);
       }
     });
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = "image/*,application/pdf";
+    fileInput.className = "aegis-chat-fileinput";
+    fileInput.addEventListener("change", () => {
+      const f = fileInput.files && fileInput.files[0];
+      if (f) void this.handleFile(f);
+      fileInput.value = "";
+    });
+    const attachBtn = document.createElement("button");
+    attachBtn.type = "button";
+    attachBtn.className = "aegis-chat-attach";
+    attachBtn.setAttribute("aria-label", "Attach a file");
+    attachBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
+    attachBtn.addEventListener("click", () => fileInput.click());
     const sendBtn = document.createElement("button");
     sendBtn.type = "submit";
     sendBtn.className = "aegis-chat-send";
@@ -2549,8 +2792,10 @@ class AegisChat {
       e.preventDefault();
       void this.send(input.value);
     });
+    composer.appendChild(attachBtn);
     composer.appendChild(input);
     composer.appendChild(sendBtn);
+    composer.appendChild(fileInput);
     panel.appendChild(header);
     panel.appendChild(thread);
     panel.appendChild(composer);
@@ -2570,8 +2815,10 @@ class AegisChat {
     tip.appendChild(tipClose);
     tip.addEventListener("click", () => this.openPanel());
     root.appendChild(panel);
-    root.appendChild(tip);
-    root.appendChild(bubble);
+    if (this.displayMode !== "nav") {
+      root.appendChild(tip);
+      root.appendChild(bubble);
+    }
     document.body.appendChild(root);
     this.greetingTip = tip;
     this.root = root;
@@ -2609,6 +2856,26 @@ class AegisChat {
     if (msg.id) this.renderedIds.add(msg.id);
     const row = document.createElement("div");
     row.className = `aegis-chat-msg aegis-chat-msg--${msg.sender}`;
+    if (msg.media_url) {
+      if (msg.media_type === "image") {
+        const img = document.createElement("img");
+        img.className = "aegis-chat-media-img";
+        img.src = msg.media_url;
+        img.alt = "attachment";
+        img.loading = "lazy";
+        const url = msg.media_url;
+        img.addEventListener("click", () => window.open(url, "_blank", "noopener"));
+        row.appendChild(img);
+      } else {
+        const a = document.createElement("a");
+        a.className = "aegis-chat-media-file";
+        a.href = msg.media_url;
+        a.target = "_blank";
+        a.rel = "noopener noreferrer";
+        a.textContent = "📎 Attachment";
+        row.appendChild(a);
+      }
+    }
     if (msg.content) {
       const bubble = document.createElement("div");
       bubble.className = "aegis-chat-bubbletext";
@@ -2700,6 +2967,54 @@ class AegisChat {
       return void 0;
     }
   }
+  readStoredContactId() {
+    if (typeof document === "undefined") return void 0;
+    try {
+      return new Storage().get("aegis_chat_cid") ?? void 0;
+    } catch {
+      return void 0;
+    }
+  }
+  persistContactId(id) {
+    if (!id || typeof document === "undefined") return;
+    try {
+      new Storage().set("aegis_chat_cid", id, 365);
+    } catch {
+    }
+  }
+  /** Restore a returning visitor's thread on open. Resolves an existing contact
+   *  + mints a per-session ticket WITHOUT sending a message (history is ticket-
+   *  gated). No-ops for brand-new visitors and once a ticket is already held. */
+  async resumeSession() {
+    if (this.sseTicket) {
+      void this.refreshHistory();
+      return;
+    }
+    if (this.sessionResumed) return;
+    this.sessionResumed = true;
+    if (!this.contactId && !this.anonymousId) return;
+    try {
+      const res = await fetch(`${this.apiHost}/v1/chat/session`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-Aegis-Write-Key": this.writeKey },
+        body: JSON.stringify({
+          anonymous_id: this.anonymousId,
+          contact_id: this.contactId,
+          channel: this.channel
+        })
+      });
+      if (!res.ok) return;
+      const data = await res.json();
+      if (!data.contact_id || !data.sse_ticket) return;
+      this.contactId = data.contact_id;
+      this.sseTicket = data.sse_ticket;
+      this.persistContactId(data.contact_id);
+      await this.refreshHistory();
+      if (this.open) this.connectSSE(data.sse_ticket);
+    } catch (err) {
+      this.log("resume session failed", err);
+    }
+  }
   // ── Typing indicator ───────────────────────────────────────────────────────
   showTyping() {
     if (!this.thread || this.typingEl) return;
@@ -2800,11 +3115,19 @@ const CHAT_CSS = `
 .aegis-chat-input{flex:1;resize:none;border:1px solid #e2e8f0;border-radius:12px;padding:9px 12px;font-size:14px;font-family:inherit;max-height:96px;outline:none}
 .aegis-chat-input:focus{border-color:var(--aegis-chat-accent,#4169e1)}
 .aegis-chat-send{width:40px;height:40px;border-radius:9999px;border:none;background:var(--aegis-chat-accent,#4169e1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
+.aegis-chat-attach{width:38px;height:38px;border-radius:9999px;border:none;background:transparent;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;transition:background .15s ease,color .15s ease}
+.aegis-chat-attach:hover{background:#f1f5f9;color:var(--aegis-chat-accent,#4169e1)}
+.aegis-chat-fileinput{display:none}
+.aegis-chat-media-img{max-width:200px;max-height:200px;border-radius:12px;object-fit:cover;cursor:pointer;display:block}
+.aegis-chat-media-file{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:#fff;border:1px solid #e2e8f0;font-size:13px;color:#0f172a;text-decoration:none;max-width:220px}
+.aegis-chat-msg--customer .aegis-chat-media-file{background:rgba(255,255,255,.18);border-color:transparent;color:#fff}
 /* Mobile: raise the bubble above the storefront's full-width cart bar so they
    never overlap; widen the panel and reduce the tooltip width. */
-@media (max-width:480px){
+@media (max-width:767px){
   .aegis-chat-root{bottom:84px;right:16px}
-  .aegis-chat-panel{width:calc(100vw - 24px);height:calc(100vh - 140px)}
+  /* Full-page chat on mobile — the open panel covers the whole viewport (incl.
+     the bottom nav) like a native chat screen, instead of a floating card. */
+  .aegis-chat-panel{position:fixed;inset:0;left:0;right:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;border-radius:0}
   .aegis-chat-tip{max-width:200px}
 }
 `;
@@ -3376,6 +3699,10 @@ function renderActiveWebChat(ctx, creds) {
     icon: icon === "sparkle" || icon === "chat" || icon === "logo" ? icon : void 0,
     logoUrl: logo ? ctx.sanitizeUrl(logo) ?? void 0 : void 0,
     position: ic.chat_position === "bottom-left" ? "bottom-left" : void 0,
+    // 'nav' = headless (no bubble); the host opens it via aegis.chat.open() or a
+    // client_trigger. Defaults to 'bubble'. Per-device override via device_type
+    // targeting on the campaign (e.g. a mobile campaign with chat_display_mode='nav').
+    displayMode: ic.chat_display_mode === "nav" ? "nav" : void 0,
     agentPersona: str(ic.chat_agent_persona),
     quickReplies: Array.isArray(ic.chat_quick_replies) ? ic.chat_quick_replies.filter((q) => typeof q === "string") : void 0,
     // Bridge the engine's session lifecycle to campaign analytics. Per the
@@ -3436,6 +3763,7 @@ const _AegisInAppManager = class _AegisInAppManager {
   constructor(config) {
     this.campaigns = [];
     this.displayedCampaigns = /* @__PURE__ */ new Set();
+    this._displaySizeMul = 1;
     this.suppressedUntil = /* @__PURE__ */ new Map();
     this.isInitialized = false;
     this.reconnectAttempts = 0;
@@ -4015,7 +4343,13 @@ const _AegisInAppManager = class _AegisInAppManager {
       const list = eligibleByCategory.get(key);
       if (!list || list.length === 0) return;
       slot.querySelectorAll(":scope > [data-aegis-slot-default]").forEach((d) => d.remove());
-      const rotateMs = parseInt(slot.getAttribute("data-aegis-slot-rotate") || "0", 10);
+      const attrMs = parseInt(slot.getAttribute("data-aegis-slot-rotate") || "0", 10);
+      const declaredMs = list.reduce((m2, c) => {
+        var _a;
+        const v = Number((_a = c.interactive_config) == null ? void 0 : _a.slot_rotate_ms);
+        return Number.isFinite(v) && v > m2 ? v : m2;
+      }, 0);
+      const rotateMs = attrMs > 0 ? attrMs : declaredMs;
       if (rotateMs > 0 && list.length > 1) {
         this.renderRotatingSlot(slot, list, rotateMs);
       } else {
@@ -4198,6 +4532,13 @@ const _AegisInAppManager = class _AegisInAppManager {
     this.displayedCampaigns.add(campaign.id);
     this.addAnimationStyles();
     const ic = campaign.interactive_config || {};
+    const inlineMul = this._sizeMul(ic);
+    if (inlineMul !== 1) {
+      const sizer = document.createElement("div");
+      sizer.style.cssText = `transform: scale(${inlineMul}); transform-origin: top center;`;
+      target.appendChild(sizer);
+      target = sizer;
+    }
     const { bg, text } = this._surfacePalette(campaign);
     const submitUrl = options == null ? void 0 : options.submitUrl;
     const _formFields = Array.isArray(ic.form_fields) ? ic.form_fields : null;
@@ -4214,70 +4555,73 @@ const _AegisInAppManager = class _AegisInAppManager {
       }
       return;
     }
-    switch (campaign.sub_type) {
-      case "star_rating":
-        rendered = this.renderStarRatingSlot(
-          campaign,
-          ic,
-          bg,
-          text,
-          target,
-          submitUrl
-        );
-        break;
-      case "nps_survey":
-        rendered = this.renderNPSSurveySlot(
-          campaign,
-          ic,
-          bg,
-          text,
-          target,
-          submitUrl
-        );
-        break;
-      // Parity tracker — built-in embedded gamification renderers (no
-      // AegisMessageRuntime callback needed, so they work on the bill).
-      case "spin_wheel":
-        rendered = this.renderSpinWheelSlot(campaign, ic, bg, text, target);
-        break;
-      case "quick_poll":
-        rendered = this.renderQuickPollSlot(campaign, ic, bg, text, target);
-        break;
-      case "carousel_cards":
-        rendered = this.renderCarouselCardsSlot(campaign, ic, bg, text, target);
-        break;
-      case "countdown_offer":
-        rendered = this.renderCountdownSlot(campaign, ic, bg, text, target);
-        break;
-      case "scratch_card":
-        rendered = this.renderScratchCardSlot(campaign, ic, bg, text, target);
-        break;
-      case "custom_html":
-        rendered = this.renderCustomHtmlSlot(campaign, ic, bg, text, target);
-        break;
-      case "stories":
-        rendered = renderStoriesRings(this.buildRenderContext(campaign), target);
-        break;
-      case "video":
-        rendered = renderVideoInline(this.buildRenderContext(campaign), target);
-        break;
-      case "progress_bar":
-        rendered = renderProgressBarInline(this.buildRenderContext(campaign), target);
-        break;
-      case "quiz":
-        rendered = this.renderQuizSlot(campaign, ic, bg, text, target);
-        if (!rendered) {
+    if (campaign.widget_category === "hero") {
+      rendered = renderHeroInline(this.buildRenderContext(campaign), target);
+    } else
+      switch (campaign.sub_type) {
+        case "star_rating":
+          rendered = this.renderStarRatingSlot(
+            campaign,
+            ic,
+            bg,
+            text,
+            target,
+            submitUrl
+          );
+          break;
+        case "nps_survey":
+          rendered = this.renderNPSSurveySlot(
+            campaign,
+            ic,
+            bg,
+            text,
+            target,
+            submitUrl
+          );
+          break;
+        // Parity tracker — built-in embedded gamification renderers (no
+        // AegisMessageRuntime callback needed, so they work on the bill).
+        case "spin_wheel":
+          rendered = this.renderSpinWheelSlot(campaign, ic, bg, text, target);
+          break;
+        case "quick_poll":
+          rendered = this.renderQuickPollSlot(campaign, ic, bg, text, target);
+          break;
+        case "carousel_cards":
+          rendered = this.renderCarouselCardsSlot(campaign, ic, bg, text, target);
+          break;
+        case "countdown_offer":
+          rendered = this.renderCountdownSlot(campaign, ic, bg, text, target);
+          break;
+        case "scratch_card":
+          rendered = this.renderScratchCardSlot(campaign, ic, bg, text, target);
+          break;
+        case "custom_html":
+          rendered = this.renderCustomHtmlSlot(campaign, ic, bg, text, target);
+          break;
+        case "stories":
+          rendered = renderStoriesRings(this.buildRenderContext(campaign), target);
+          break;
+        case "video":
+          rendered = renderVideoInline(this.buildRenderContext(campaign), target);
+          break;
+        case "progress_bar":
+          rendered = renderProgressBarInline(this.buildRenderContext(campaign), target);
+          break;
+        case "quiz":
+          rendered = this.renderQuizSlot(campaign, ic, bg, text, target);
+          if (!rendered) {
+            rendered = this.renderGenericCardSlot(campaign, ic, bg, text, target);
+          }
+          break;
+        // Remaining sub_types (sticky_bar, progress_bar,
+        // product_recommendation) render as a generic card on the bill slot
+        // (overlay path handles their full UX); dedicated slot variants get added
+        // here as merchants need them.
+        default:
           rendered = this.renderGenericCardSlot(campaign, ic, bg, text, target);
-        }
-        break;
-      // Remaining sub_types (sticky_bar, progress_bar,
-      // product_recommendation) render as a generic card on the bill slot
-      // (overlay path handles their full UX); dedicated slot variants get added
-      // here as merchants need them.
-      default:
-        rendered = this.renderGenericCardSlot(campaign, ic, bg, text, target);
-        break;
-    }
+          break;
+      }
     if (!rendered) return;
     if (!(options == null ? void 0 : options.deferImpression)) {
       this.trackEvent(campaign.id, "impression");
@@ -4580,6 +4924,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     const labels = shown.map((s) => s.label);
     const n = labels.length >= 2 ? labels.length : 8;
     const isLossSeg = (i) => !!shown[i] && String(shown[i].prize_type || "").toLowerCase() === "no_prize";
+    const alreadyWon = ic.already_won && typeof ic.already_won === "object" ? ic.already_won : null;
     const colorOf = (i) => {
       const c = shown[i] && typeof shown[i].color === "string" ? shown[i].color : "";
       return c || (i % 2 === 0 ? text : `${text}40`);
@@ -4615,6 +4960,10 @@ const _AegisInAppManager = class _AegisInAppManager {
     let soundOn = ic.spin_sound_enabled !== false;
     const pointerColor = cfgStr("spin_pointer_color") || "#ffffff";
     const hubImg = cfgStr("spin_hub_image_url");
+    const wheelBgImg = cfgStr("wheel_background_url");
+    const pointerImg = cfgStr("pointer_image_url");
+    const pointerCenter = (cfgStr("spin_pointer_position") || "top") === "center";
+    const pointerBase = pointerCenter ? "translate(-50%, -100%)" : "translateX(-50%)";
     const isUrl = (s) => /^https?:\/\//i.test(s);
     const now = () => typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
     let rotation = 0;
@@ -4674,7 +5023,7 @@ const _AegisInAppManager = class _AegisInAppManager {
       vibrate(18);
     };
     const body = document.createElement("div");
-    body.style.cssText = `padding: ${st.padY ?? 22}px ${st.padX ?? 20}px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px;`;
+    body.style.cssText = `padding: ${st.padY ?? 22}px ${st.padX ?? 20}px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px;`;
     if (campaign.title) {
       const t = document.createElement("div");
       t.style.cssText = `font-size: 18px; font-weight: 800; letter-spacing: -0.01em; text-align: center; font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;`;
@@ -4692,11 +5041,56 @@ const _AegisInAppManager = class _AegisInAppManager {
     const wheelWrap = document.createElement("div");
     wheelWrap.style.cssText = `position: relative; width: ${SIZE}px; height: ${SIZE}px; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.30));`;
     const pointer = document.createElement("div");
-    pointer.style.cssText = `position: absolute; left: 50%; top: -7px; transform: translateX(-50%); transform-origin: 50% 0; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid ${pointerColor}; z-index: 5; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));`;
+    if (pointerCenter) {
+      const needleH = Math.round(radius * 0.42);
+      pointer.style.cssText = `position: absolute; left: 50%; top: 50%; width: 20px; height: ${needleH}px; transform: ${pointerBase}; transform-origin: 50% 100%; z-index: 6; pointer-events: none;`;
+      if (pointerImg) {
+        const pim = document.createElement("img");
+        pim.src = pointerImg;
+        pim.alt = "";
+        pim.style.cssText = "width: 100%; height: 100%; object-fit: contain; object-position: top; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));";
+        pointer.appendChild(pim);
+      } else {
+        const stem = document.createElement("div");
+        stem.style.cssText = `position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 4px; height: 100%; background: ${pointerColor}; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.35);`;
+        const head = document.createElement("div");
+        head.style.cssText = `position: absolute; left: 50%; top: -1px; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid ${pointerColor}; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));`;
+        pointer.appendChild(stem);
+        pointer.appendChild(head);
+      }
+    } else if (pointerImg) {
+      pointer.style.cssText = `position: absolute; left: 50%; top: -12px; transform: ${pointerBase}; transform-origin: 50% 0; width: 30px; height: 34px; z-index: 5;`;
+      const pim = document.createElement("img");
+      pim.src = pointerImg;
+      pim.alt = "";
+      pim.style.cssText = "width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));";
+      pointer.appendChild(pim);
+    } else {
+      pointer.style.cssText = `position: absolute; left: 50%; top: -7px; transform: ${pointerBase}; transform-origin: 50% 0; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid ${pointerColor}; z-index: 5; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));`;
+    }
     const wheel = document.createElement("div");
-    wheel.style.cssText = `position: relative; width: ${SIZE}px; height: ${SIZE}px; border-radius: 50%; border: 5px solid #ffffff; box-shadow: 0 0 0 2px ${text}2e, inset 0 0 22px rgba(0,0,0,0.20); background: conic-gradient(${stops}); overflow: hidden; will-change: transform; touch-action: none; cursor: ${spinMode === "button" ? "default" : "grab"};`;
+    const wheelFace = wheelBgImg ? `center / cover no-repeat url("${wheelBgImg}")` : `conic-gradient(${stops})`;
+    const wheelRim = wheelBgImg ? "0" : "5px solid #ffffff";
+    const wheelShadow = wheelBgImg ? `0 0 0 2px ${text}2e` : `0 0 0 2px ${text}2e, inset 0 0 22px rgba(0,0,0,0.20)`;
+    wheel.style.cssText = `position: relative; width: ${SIZE}px; height: ${SIZE}px; border-radius: 50%; border: ${wheelRim}; box-shadow: ${wheelShadow}; background: ${wheelFace}; overflow: hidden; will-change: transform; touch-action: none; cursor: ${spinMode === "button" ? "default" : "grab"};`;
     if (idleAnim === "wobble") wheel.style.animation = "aegisSpinWobble 3s ease-in-out infinite";
-    starts.forEach((b) => {
+    const sliceImgFrac = Math.max(40, Math.min(100, Number(ic.spin_slice_image_size) || 100)) / 100;
+    if (!wheelBgImg) shown.forEach((s, i) => {
+      const simg = typeof s.image_url === "string" ? s.image_url : "";
+      if (!simg || !isUrl(simg)) return;
+      const pts = ["50% 50%"];
+      const steps = Math.max(2, Math.ceil(spans[i] / 6));
+      for (let st2 = 0; st2 <= steps; st2++) {
+        const a = (starts[i] + spans[i] * st2 / steps) * Math.PI / 180;
+        const x = 50 + 50 * sliceImgFrac * Math.sin(a);
+        const y = 50 - 50 * sliceImgFrac * Math.cos(a);
+        pts.push(`${x.toFixed(2)}% ${y.toFixed(2)}%`);
+      }
+      const segEl = document.createElement("div");
+      segEl.style.cssText = `position: absolute; inset: 0; background: center / cover no-repeat url("${simg}"); clip-path: polygon(${pts.join(",")}); pointer-events: none;`;
+      wheel.appendChild(segEl);
+    });
+    if (!wheelBgImg) starts.forEach((b) => {
       const ln = document.createElement("div");
       ln.style.cssText = `position: absolute; left: 50%; top: 0; width: 1.5px; height: 50%; background: rgba(255,255,255,0.55); transform-origin: bottom center; transform: translateX(-50%) rotate(${b}deg); pointer-events: none;`;
       wheel.appendChild(ln);
@@ -4705,7 +5099,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     const rRim = radius - 8;
     const bandLen = rRim - rHub;
     const rText = (rHub + rRim) / 2;
-    labels.forEach((label, i) => {
+    if (!wheelBgImg) labels.forEach((label, i) => {
       const mid = midOf(i);
       const icoVal = shown[i] && typeof shown[i].icon === "string" ? shown[i].icon : "";
       const chord = 2 * rText * Math.sin(spans[i] * Math.PI / 180 / 2);
@@ -4750,28 +5144,13 @@ const _AegisInAppManager = class _AegisInAppManager {
     const hub = document.createElement("div");
     hub.style.cssText = `position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #e9edf5); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.30); z-index: 4; overflow: hidden; display: flex; align-items: center; justify-content: center;`;
     if (hubImg) {
-      const hc = document.createElement("canvas");
-      hc.width = 40;
-      hc.height = 40;
-      hc.style.cssText = "width: 100%; height: 100%;";
-      const hcx = hc.getContext("2d");
-      const him = new Image();
-      him.crossOrigin = "anonymous";
-      him.onload = () => {
-        if (!hcx) return;
-        const ar = him.width / him.height || 1;
-        let w = 32, h = 32;
-        if (ar > 1) h = 32 / ar;
-        else w = 32 * ar;
-        hcx.drawImage(him, (40 - w) / 2, (40 - h) / 2, w, h);
-        hcx.globalCompositeOperation = "source-in";
-        hcx.fillStyle = "#5b626e";
-        hcx.fillRect(0, 0, 40, 40);
-      };
-      him.onerror = () => {
-      };
+      hub.style.border = "none";
+      hub.style.background = "transparent";
+      const him = document.createElement("img");
       him.src = hubImg;
-      hub.appendChild(hc);
+      him.alt = "";
+      him.style.cssText = "width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;";
+      hub.appendChild(him);
     } else {
       const hubDot = document.createElement("div");
       hubDot.style.cssText = `width: 11px; height: 11px; border-radius: 50%; background: ${bg};`;
@@ -4785,7 +5164,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     body.appendChild(wheelWrap);
     if (!card.style.position) card.style.position = "relative";
     const result = document.createElement("div");
-    result.style.cssText = "font-size: 14px; font-weight: 800; min-height: 20px; text-align: center; letter-spacing: 0.2px;";
+    result.style.cssText = "font-size: 14px; font-weight: 800; min-height: 0; text-align: center; letter-spacing: 0.2px;";
     if (ic.spin_sound_enabled !== false) {
       const soundBtn = document.createElement("button");
       soundBtn.type = "button";
@@ -4800,7 +5179,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     }
     const btn = document.createElement("button");
     btn.textContent = campaign.button_text || "Spin the wheel";
-    btn.style.cssText = `padding: 12px 32px; border-radius: 999px; border: none; background: #ffffff; color: ${bg}; font-size: 15px; font-weight: 800; letter-spacing: 0.2px; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,0.22); transition: transform 0.15s, box-shadow 0.15s; font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;`;
+    btn.style.cssText = `padding: 9px 22px; border-radius: 999px; border: none; background: ${text}; color: ${bg}; font-size: 13px; font-weight: 700; letter-spacing: 0.2px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.20); transition: transform 0.15s, box-shadow 0.15s; font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;`;
     btn.addEventListener("mouseenter", () => {
       if (btn.disabled) return;
       btn.style.transform = "translateY(-1px)";
@@ -4829,12 +5208,12 @@ const _AegisInAppManager = class _AegisInAppManager {
       pVel *= 0.7;
       pDefl += pVel;
       if (Math.abs(pDefl) > 0.06 || Math.abs(pVel) > 0.06) {
-        pointer.style.transform = `translateX(-50%) rotate(${pDefl.toFixed(2)}deg)`;
+        pointer.style.transform = `${pointerBase} rotate(${pDefl.toFixed(2)}deg)`;
         pointerRaf = requestAnimationFrame(stepPointer);
       } else {
         pDefl = 0;
         pVel = 0;
-        pointer.style.transform = "translateX(-50%) rotate(0deg)";
+        pointer.style.transform = `${pointerBase} rotate(0deg)`;
         pointerRaf = 0;
       }
     };
@@ -4943,7 +5322,25 @@ const _AegisInAppManager = class _AegisInAppManager {
         this._playReaction(card, "empathize", void 0, ic);
       }
       if (winReveal === "takeover" && r.won) renderTakeover(r);
-      else result.textContent = r.label ? r.code ? `${r.label} — ${r.code}` : r.label : "Thanks for playing!";
+      else if (r.label && r.code) {
+        result.textContent = "";
+        const tag = document.createElement("span");
+        tag.textContent = `${r.label} — `;
+        const chip = document.createElement("button");
+        chip.type = "button";
+        chip.textContent = `${r.code} ⧉`;
+        chip.style.cssText = `padding: 2px 8px; border-radius: 999px; border: 1.5px dashed ${text}66; background: transparent; color: ${text}; font-weight: 800; font-size: 12px; letter-spacing: 0.5px; cursor: pointer;`;
+        chip.addEventListener("click", () => {
+          var _a;
+          try {
+            void ((_a = navigator.clipboard) == null ? void 0 : _a.writeText(r.code));
+            chip.textContent = "Copied ✓";
+          } catch {
+          }
+        });
+        result.appendChild(tag);
+        result.appendChild(chip);
+      } else result.textContent = r.label || "Thanks for playing!";
       retireCta();
     };
     const beginSpin = (velocityDegPerMs) => {
@@ -4959,16 +5356,40 @@ const _AegisInAppManager = class _AegisInAppManager {
       const v = Math.min(2.4, Math.max(0.25, velocityDegPerMs || 0.6));
       const turns = Math.round(3 + v * 2);
       const provisional = Math.floor(Math.random() * n);
+      const loopSpeed = 0.5 + v * 0.35;
+      let looping = true;
       let done = false;
+      let lastTs = now();
+      const loopFrame = () => {
+        if (!looping) return;
+        const t = now();
+        const moved = loopSpeed * (t - lastTs);
+        lastTs = t;
+        rotation += moved;
+        spinSpeed = moved;
+        wheel.style.transform = `rotate(${rotation}deg)`;
+        playTicks(rotation);
+        requestAnimationFrame(loopFrame);
+      };
+      requestAnimationFrame(loopFrame);
+      const lossIndex = () => {
+        for (let i = 0; i < n; i++) {
+          if (isLossSeg(i)) return i;
+        }
+        return provisional;
+      };
       const launch = (idx, r) => {
         if (done) return;
         done = true;
+        looping = false;
         const segMid = midOf(idx);
         const want = ((360 - segMid) % 360 + 360) % 360;
         const base = rotation;
         let target2 = base - (base % 360 + 360) % 360 + want + turns * 360;
         if (target2 <= base + 360) target2 += 360;
-        animateTo(target2, 2300 + turns * 230, () => {
+        const matched = 3 * (target2 - base) / Math.max(0.05, loopSpeed);
+        const duration = Math.min(4200, Math.max(2300, matched));
+        animateTo(target2, duration, () => {
           spinning = false;
           reveal(r);
         });
@@ -4982,16 +5403,18 @@ const _AegisInAppManager = class _AegisInAppManager {
         const kind = prize && typeof prize.prize_type === "string" ? prize.prize_type.toLowerCase() : shown[idx] && typeof shown[idx].prize_type === "string" ? String(shown[idx].prize_type).toLowerCase() : "";
         const lost = prize ? String(prize.prize_type || "").toLowerCase() === "no_prize" : isLossSeg(idx);
         launch(idx, { label, code, won: !!label && !lost, kind });
+      }).catch(() => {
       });
-      window.setTimeout(
-        () => launch(provisional, {
-          label: labels[provisional] || "",
+      window.setTimeout(() => {
+        if (done) return;
+        const li = lossIndex();
+        launch(li, {
+          label: labels[li] || "",
           code: "",
-          won: !isLossSeg(provisional),
-          kind: shown[provisional] && typeof shown[provisional].prize_type === "string" ? String(shown[provisional].prize_type).toLowerCase() : ""
-        }),
-        900
-      );
+          won: false,
+          kind: shown[li] && typeof shown[li].prize_type === "string" ? String(shown[li].prize_type).toLowerCase() : "no_prize"
+        });
+      }, 8e3);
     };
     if (spinMode === "button" || spinMode === "both") {
       btn.addEventListener("click", () => beginSpin(0.7));
@@ -5063,6 +5486,16 @@ const _AegisInAppManager = class _AegisInAppManager {
     body.appendChild(btn);
     card.appendChild(body);
     target.appendChild(card);
+    if (alreadyWon) {
+      stopIdle();
+      const wonKind = String(alreadyWon.prize_type || "").toLowerCase();
+      reveal({
+        label: String(alreadyWon.label || ""),
+        code: String(alreadyWon.coupon_code || ""),
+        won: wonKind !== "no_prize",
+        kind: wonKind
+      });
+    }
     return true;
   }
   /** Built-in embedded QUICK POLL — option buttons submit the chosen index. */
@@ -5314,6 +5747,34 @@ const _AegisInAppManager = class _AegisInAppManager {
     target.appendChild(card);
     return true;
   }
+  /** Foil palette — a brushed-metal gradient + a contrast "ink" (for the
+   *  SCRATCH-HERE text, sparkle motif, and logo tint) derived from the operator's
+   *  chosen foil colour (brand primary / custom hex). Unset / invalid → the
+   *  default silver. Light foils get dark ink, dark foils get white ink, so the
+   *  prompt stays legible on any colour. */
+  _scratchFoilPalette(hex) {
+    const clean = (hex || "").trim().replace(/^#/, "");
+    if (!/^[0-9a-fA-F]{6}$/.test(clean)) {
+      return { g0: "#d7dbe2", g1: "#b4bac4", g2: "#c9cdd6", ink: "#6b7280" };
+    }
+    const r = parseInt(clean.slice(0, 2), 16);
+    const g = parseInt(clean.slice(2, 4), 16);
+    const b = parseInt(clean.slice(4, 6), 16);
+    const toward = (amt) => {
+      const m2 = (c) => Math.round(c + (255 - c) * amt);
+      return `rgb(${m2(r)}, ${m2(g)}, ${m2(b)})`;
+    };
+    const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return {
+      g0: toward(0.34),
+      // bright sheen
+      g1: `#${clean}`,
+      // base colour
+      g2: toward(0.18),
+      // soft sheen
+      ink: lum > 0.62 ? "#5b6270" : "rgba(255,255,255,0.92)"
+    };
+  }
   /** Built-in embedded SCRATCH CARD — a canvas foil the customer scratches to
    *  reveal the server-picked prize, then submits (records + grants). Confetti
    *  on reveal. No AegisMessageRuntime callback dependency (works on the bill). */
@@ -5331,6 +5792,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     let soundOn = ic.scratch_sound_enabled !== false;
     const revealImg = cfgStr("reveal_image_url");
     const foilImg = cfgStr("scratch_foil_image_url");
+    const foilPal = this._scratchFoilPalette(cfgStr("scratch_foil_color"));
     const pool = Array.isArray(ic.prize_pool) ? ic.prize_pool : [];
     const isUrl = (s) => /^https?:\/\//i.test(s);
     const sampleWin = pool.find(
@@ -5473,9 +5935,9 @@ const _AegisInAppManager = class _AegisInAppManager {
       if (!ctx) return;
       ctx.globalCompositeOperation = "source-over";
       const foil = ctx.createLinearGradient(0, 0, CW, CH);
-      foil.addColorStop(0, "#d7dbe2");
-      foil.addColorStop(0.5, "#b4bac4");
-      foil.addColorStop(1, "#c9cdd6");
+      foil.addColorStop(0, foilPal.g0);
+      foil.addColorStop(0.5, foilPal.g1);
+      foil.addColorStop(1, foilPal.g2);
       ctx.fillStyle = foil;
       ctx.fillRect(0, 0, CW, CH);
       ctx.textAlign = "center";
@@ -5484,17 +5946,19 @@ const _AegisInAppManager = class _AegisInAppManager {
         ctx.globalAlpha = 0.6;
         ctx.drawImage(logo, (CW - logo.width) / 2, CH * 0.42 - logo.height / 2, logo.width, logo.height);
         ctx.globalAlpha = 1;
-        ctx.fillStyle = "#6b7280";
+        ctx.fillStyle = foilPal.ink;
         ctx.font = "700 12px system-ui, sans-serif";
         ctx.fillText("SCRATCH HERE", CW / 2, CH * 0.84);
       } else {
-        ctx.fillStyle = "rgba(108,116,128,0.18)";
+        ctx.globalAlpha = 0.22;
+        ctx.fillStyle = foilPal.ink;
         ctx.font = "12px system-ui, sans-serif";
         for (let gy = 18; gy < CH; gy += 30) {
           const off = (gy / 30 | 0) % 2 ? 16 : 0;
           for (let gx = 16 + off; gx < CW; gx += 32) ctx.fillText("✦", gx, gy);
         }
-        ctx.fillStyle = "#7c828e";
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = foilPal.ink;
         ctx.font = "700 13px system-ui, sans-serif";
         ctx.fillText("SCRATCH HERE", CW / 2, CH / 2);
       }
@@ -5521,7 +5985,7 @@ const _AegisInAppManager = class _AegisInAppManager {
           if (!lctx) return;
           lctx.drawImage(im, 0, 0, lc.width, lc.height);
           lctx.globalCompositeOperation = "source-in";
-          lctx.fillStyle = "#5b626e";
+          lctx.fillStyle = foilPal.ink;
           lctx.fillRect(0, 0, lc.width, lc.height);
           paintFoil(lc);
         };
@@ -6246,6 +6710,9 @@ const _AegisInAppManager = class _AegisInAppManager {
       return;
     }
     this.displayedCampaigns.add(campaign.id);
+    this._displaySizeMul = this._sizeMul(
+      campaign.interactive_config
+    );
     const interactiveSubTypes = /* @__PURE__ */ new Set([
       "spin_wheel",
       "scratch_card",
@@ -6438,6 +6905,14 @@ const _AegisInAppManager = class _AegisInAppManager {
    * slot renderers (`renderSpinWheelSlot` / `renderScratchCardSlot`) in a modal
    * so the gamified widget is fully playable — not a dead frame.
    */
+  /** Display-size multiplier — operator control over how big a bounded overlay
+   *  renders (small 0.82 / medium 1 / large 1.18). Default medium = prior size.
+   *  Read from interactive_config.display_size; mirrors the schema enum + the
+   *  dashboard preview harness so the operator's choice is honored identically. */
+  _sizeMul(ic) {
+    const s = ic && typeof ic.display_size === "string" ? ic.display_size : "medium";
+    return s === "small" ? 0.82 : s === "large" ? 1.18 : 1;
+  }
   renderGamificationOverlay(campaign, ic, bg, text) {
     const overlay = this.createOverlay(`aegis-in-app-${campaign.sub_type}-overlay`);
     const modal = document.createElement("div");
@@ -6452,7 +6927,11 @@ const _AegisInAppManager = class _AegisInAppManager {
       this.renderSpinWheelSlot(campaign, ic, bg, text, modal);
     }
     this._addCornerClose(modal, overlay, campaign.id, text);
-    overlay.appendChild(modal);
+    const mul = this._sizeMul(ic);
+    const sizer = document.createElement("div");
+    sizer.style.cssText = `display: flex; justify-content: center; align-items: center; width: 100%; transform: scale(${mul}); transform-origin: center;`;
+    sizer.appendChild(modal);
+    overlay.appendChild(sizer);
     this.addAnimationStyles();
     document.body.appendChild(overlay);
   }
@@ -7115,8 +7594,30 @@ const _AegisInAppManager = class _AegisInAppManager {
       background: rgba(0,0,0,0.5); display: flex; align-items: center;
       justify-content: center; z-index: 99999; animation: aegisFadeIn 0.3s ease;
     `;
+    if (this._displaySizeMul !== 1) {
+      const mul = this._displaySizeMul;
+      queueMicrotask(() => {
+        const card = overlay.firstElementChild;
+        if (!card || card.dataset.aegisSized) return;
+        card.dataset.aegisSized = "1";
+        const wrap = document.createElement("div");
+        wrap.style.cssText = `display: flex; align-items: center; justify-content: center; transform: scale(${mul}); transform-origin: center;`;
+        overlay.insertBefore(wrap, card);
+        wrap.appendChild(card);
+      });
+    }
     return overlay;
   }
+  /** Wrap a card in a display-size scaling container (no-op at medium/×1). Used
+   *  by formats that build their overlay inline (renderModal) rather than via
+   *  createOverlay, so size is honored identically. */
+  _wrapScaled(card) {
+    if (this._displaySizeMul === 1) return card;
+    const wrap = document.createElement("div");
+    wrap.style.cssText = `display: flex; align-items: center; justify-content: center; transform: scale(${this._displaySizeMul}); transform-origin: center;`;
+    wrap.appendChild(card);
+    return wrap;
+  }
   createCTAButton(campaign, bg, text) {
     const btn = document.createElement("button");
     btn.className = "aegis-cta";
@@ -7549,7 +8050,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     actions.appendChild(closeButton);
     content.appendChild(actions);
     modal.appendChild(content);
-    overlay.appendChild(modal);
+    overlay.appendChild(this._wrapScaled(modal));
     if (ic.modal_dismiss_on_overlay !== false) {
       overlay.addEventListener("click", (e) => {
         if (e.target === overlay) {
@@ -8985,7 +9486,7 @@ _AegisInAppManager.KNOWN_SURFACES = /* @__PURE__ */ new Set([
 ]);
 _AegisInAppManager.SERVED_DEDUP_PREFIX = "aegis_served_fired:";
 let AegisInAppManager = _AegisInAppManager;
-function renderPreview(config) {
+function renderPreview(config, opts) {
   document.querySelectorAll(
     '[class^="aegis-in-app-"]'
   ).forEach((el) => {
@@ -9009,12 +9510,33 @@ function renderPreview(config) {
     writeKey: "preview-mode",
     apiHost: "",
     debugMode: false,
-    enableSSE: false
+    enableSSE: false,
+    ...(opts == null ? void 0 : opts.cart) ? { getCartState: () => opts.cart } : {}
   });
   const m2 = manager;
   m2.trackEvent = async () => {
   };
   m2.addAnimationStyles();
+  const cfgRec = config;
+  const deliveryModes = Array.isArray(cfgRec.delivery_modes) ? cfgRec.delivery_modes : [];
+  const widgetCategory = typeof cfgRec.widget_category === "string" ? cfgRec.widget_category : "";
+  const inline = deliveryModes.includes("embedded_card") && !!widgetCategory;
+  const coGroup = (opts == null ? void 0 : opts.coGroup) ?? [];
+  if (typeof document !== "undefined" && (coGroup.length > 0 || inline)) {
+    const anchors = document.querySelectorAll("[data-aegis-slot]");
+    if (anchors.length > 0) {
+      try {
+        anchors.forEach((slot) => {
+          slot.querySelectorAll(":scope > :not([data-aegis-slot-default])").forEach((el) => el.remove());
+        });
+        const mm = manager;
+        mm.campaigns = (inline ? [config, ...coGroup] : coGroup).map((c) => ({ ...c, surface: void 0, target_screens: void 0 })).sort((a, b) => (b.priority || 0) - (a.priority || 0));
+        mm.renderIntoSlots();
+        if (inline) return;
+      } catch {
+      }
+    }
+  }
   if (config.type === "stories" || config.sub_type === "stories") {
     const host = document.createElement("div");
     host.className = "aegis-in-app-stories-host";
@@ -9144,10 +9666,19 @@ function maybeStartPairing(apiHost) {
   }
 }
 function isIntentLeaf(expr) {
-  return "signal" in expr;
+  return !("operands" in expr);
+}
+function getValueByPath(namespaces, path) {
+  if (!namespaces || !path) return void 0;
+  let cur = namespaces;
+  for (const part of path.split(".")) {
+    if (cur === null || typeof cur !== "object" || Array.isArray(cur)) return void 0;
+    cur = cur[part];
+  }
+  return cur;
 }
-function evaluateLeaf(leaf, snapshot) {
-  const actual = snapshot[leaf.signal];
+function evaluateLeaf(leaf, snapshot, namespaces) {
+  const actual = leaf.path !== void 0 ? getValueByPath(namespaces, leaf.path) : leaf.signal !== void 0 ? snapshot[leaf.signal] : void 0;
   if (actual === void 0 || actual === null) {
     return null;
   }
@@ -9179,14 +9710,14 @@ function evaluateLeaf(leaf, snapshot) {
     }
   }
 }
-function evaluateExpr(expr, snapshot) {
+function evaluateExpr(expr, snapshot, namespaces) {
   if (isIntentLeaf(expr)) {
-    return evaluateLeaf(expr, snapshot);
+    return evaluateLeaf(expr, snapshot, namespaces);
   }
   switch (expr.op) {
     case "AND": {
       for (const operand of expr.operands) {
-        const v = evaluateExpr(operand, snapshot);
+        const v = evaluateExpr(operand, snapshot, namespaces);
         if (v === null) return false;
         if (!v) return false;
       }
@@ -9195,14 +9726,14 @@ function evaluateExpr(expr, snapshot) {
     case "OR": {
       let allNull = true;
       for (const operand of expr.operands) {
-        const v = evaluateExpr(operand, snapshot);
+        const v = evaluateExpr(operand, snapshot, namespaces);
         if (v === true) return true;
         if (v !== null) allNull = false;
       }
       return allNull ? null : false;
     }
     case "NOT": {
-      const v = evaluateExpr(expr.operands[0], snapshot);
+      const v = evaluateExpr(expr.operands[0], snapshot, namespaces);
       if (v === null) return null;
       return !v;
     }
@@ -9211,14 +9742,15 @@ function evaluateExpr(expr, snapshot) {
     }
   }
 }
-function evaluateRule(rule, snapshot) {
-  const result = evaluateExpr(rule.when, snapshot);
+function evaluateRule(rule, snapshot, namespaces) {
+  const result = evaluateExpr(rule.when, snapshot, namespaces);
   return result === true;
 }
 class IntentRuleEvaluator {
   constructor() {
     this.armed = [];
     this.snapshot = {};
+    this.namespaces = {};
     this.firedThisSession = /* @__PURE__ */ new Set();
     this.silencedThisSession = /* @__PURE__ */ new Set();
   }
@@ -9232,6 +9764,21 @@ class IntentRuleEvaluator {
   getSnapshot() {
     return this.snapshot;
   }
+  // ─── generic reactive context (updateContext) ───
+  /** Merge a namespace's data (shallow). Path-leaves (`cart.total`) resolve
+   *  against this. The runtime's updateContext() delegates here so there is ONE
+   *  context store, then bridges well-known paths to enum signals. */
+  updateContext(namespace, data) {
+    if (!namespace || !data) return;
+    this.namespaces[namespace] = { ...this.namespaces[namespace], ...data };
+  }
+  getNamespaces() {
+    return this.namespaces;
+  }
+  /** Resolve a dot-path against the live context (for previews / debugging). */
+  getValueByPath(path) {
+    return getValueByPath(this.namespaces, path);
+  }
   // ─── armed-campaign management ───
   setArmed(campaigns) {
     this.armed = [...campaigns];
@@ -9277,7 +9824,7 @@ class IntentRuleEvaluator {
     });
     for (let i = 0; i < candidates.length; i++) {
       const c = candidates[i];
-      if (!evaluateRule(c.rule, this.snapshot)) continue;
+      if (!evaluateRule(c.rule, this.snapshot, this.namespaces)) continue;
       if (c.rule.suppress_competing) {
         const suppressIds = this.armed.filter((other) => other.id !== c.id).map((other) => other.id);
         suppressIds.forEach((id) => this.silencedThisSession.add(id));
@@ -9360,6 +9907,13 @@ class ContactScoresFetcher {
       this.latestSnapshot = payload;
       if (this.evaluator) {
         this.evaluator.updateSnapshot(toIntentSnapshot(payload));
+        if (payload.context && typeof payload.context === "object") {
+          for (const [ns, data] of Object.entries(payload.context)) {
+            if (data && typeof data === "object") {
+              this.evaluator.updateContext(ns, data);
+            }
+          }
+        }
       }
       return payload;
     } catch (err) {
@@ -12118,6 +12672,9 @@ class AegisLoyaltyManager {
   }
 }
 class AegisMessageRuntime {
+  // Context is held in ONE place — `intentRuleEvaluator.namespaces` (fed via
+  // updateContext). The renderer cart reader + the cart_value signal are DERIVED
+  // from it; there is no parallel cart/context store on the runtime.
   constructor(config) {
     var _a;
     this.initialized = false;
@@ -12156,7 +12713,7 @@ class AegisMessageRuntime {
       getWorkspaceId: config.getWorkspaceId,
       // First-party cart reader — renderers (progress-bar) read live cart
       // state from here instead of `window.*` cart globals. See setCartState().
-      getCartState: () => this.cartState
+      getCartState: () => this.deriveCartState()
     });
     this.intentRuleEvaluator = new IntentRuleEvaluator();
     this.contactScores = new ContactScoresFetcher({
@@ -12237,31 +12794,77 @@ class AegisMessageRuntime {
     (_b = (_a = this.inApp).onClientEvent) == null ? void 0 : _b.call(_a, eventName, eventData);
   }
   /**
-   * Feed live cart state into the runtime — the imperative, encapsulated
-   * equivalent of the `window.aegis_cart` global the SDK reads for
-   * third-party Shopify/Woo/Magento embeds. Headless storefronts (e.g. the
-   * Active Commerce Store) call this on every cart mutation.
+   * Unified reactive context — the GENERAL imperative state API (Plotline-style
+   * "global context state engine"). The host app feeds named namespaces:
+   *   runtime.updateContext('cart',    { total: 540, items: 3, currency: 'INR' })
+   *   runtime.updateContext('user',    { tier: 'gold', lifecycle: 'active' })
+   *   runtime.updateContext('session', { idle_s: 60 })
    *
-   * The state is held in PRIVATE runtime state (no window pollution, not
-   * readable/writable by third-party scripts) and:
-   *   1. surfaces to renderers (progress-bar free-delivery / cart-total goals)
-   *      via the getCartState reader passed into the InAppManager;
-   *   2. feeds the `cart_value` micro-intent signal so `CART_VALUE`-gated
-   *      campaigns (e.g. a cart-idle nudge) can evaluate — this signal was
-   *      previously never populated client-side;
-   *   3. taps a debounced in-app refresh so a newly eligible cart-gated
-   *      campaign arms without waiting for the next identity flip.
+   * Held in PRIVATE runtime state (no `window` pollution). Merged shallowly per
+   * namespace and evaluated entirely client-side — no round-trip. This supersedes
+   * the single-purpose `setCartState` (kept as a thin wrapper for back-compat).
    *
-   * This is a visual/targeting hint only. Reward GATING that must agree with
-   * the server-side checkout guard should use the trusted SSE progress source.
+   * Design note (vs the proposed rewrite): we DELIBERATELY do NOT introduce a
+   * parallel rule schema. Our canonical `IntentRule` (shared with the cell-plane
+   * Pydantic schema + the editor + seeded campaigns) stays the source of truth.
+   * `updateContext` BRIDGES known paths into the existing enum-keyed
+   * `IntentSnapshot` (e.g. cart.total → the `cart_value` signal) so today's rules
+   * keep firing — fed by the generic API. Arbitrary dot-path leaves
+   * (`cart.foo`) are a forward-compatible follow-up that adds an optional `path`
+   * to the canonical `IntentLeaf` (schema-mirrored + drift-guarded), NOT a second
+   * evaluator. Tri-state (null = unprovable) evaluation is preserved — we do not
+   * regress missing paths to `false`.
    */
-  setCartState(state) {
-    this.cartState = state;
-    const total = Number(state == null ? void 0 : state.total);
-    if (Number.isFinite(total)) {
-      this.intentRuleEvaluator.updateSignal("cart_value", total);
+  updateContext(namespace, data) {
+    if (!namespace || typeof namespace !== "string" || !data) return;
+    this.intentRuleEvaluator.updateContext(namespace, data);
+    this.bridgeContextToSignals(namespace);
+    this.inApp.refreshOnEvent("context_updated");
+  }
+  /** Read the current client-side context snapshot (for the editor scrubber /
+   *  preview bridge to mirror live values). Read-only view of the ONE store. */
+  getContext() {
+    return this.intentRuleEvaluator.getNamespaces();
+  }
+  /**
+   * Bridge well-known context paths into the canonical enum-keyed IntentSnapshot,
+   * so existing signal-based rules (cart_value) keep firing off the generic
+   * `updateContext`. Reads from the ONE store (the evaluator). Extend here as new
+   * signals map to context paths — no parallel engine.
+   */
+  bridgeContextToSignals(namespace) {
+    if (namespace === "cart") {
+      const total = Number(this.intentRuleEvaluator.getValueByPath("cart.total") ?? this.intentRuleEvaluator.getValueByPath("cart.cart_value"));
+      if (Number.isFinite(total)) {
+        this.intentRuleEvaluator.updateSignal("cart_value", total);
+      }
     }
-    this.inApp.refreshOnEvent("cart_updated");
+  }
+  /** Derive the typed cart snapshot for the progress-bar renderer reader from
+   *  the ONE context store (the `cart` namespace). No separate cart field. */
+  deriveCartState() {
+    const total = Number(this.intentRuleEvaluator.getValueByPath("cart.total"));
+    if (!Number.isFinite(total)) return void 0;
+    const items = Number(
+      this.intentRuleEvaluator.getValueByPath("cart.items") ?? this.intentRuleEvaluator.getValueByPath("cart.itemCount")
+    );
+    const currency = this.intentRuleEvaluator.getValueByPath("cart.currency");
+    return {
+      total,
+      itemCount: Number.isFinite(items) ? items : 0,
+      currency: typeof currency === "string" ? currency : "INR"
+    };
+  }
+  /**
+   * Back-compat wrapper over `updateContext('cart', …)`. The single-purpose cart
+   * feed for headless storefronts; prefer `updateContext` for new code.
+   */
+  setCartState(state) {
+    this.updateContext("cart", {
+      total: state.total,
+      items: state.itemCount,
+      currency: state.currency
+    });
   }
   // --- Qualifying-event refresh facade (DLR Tracker 1 / P1, 2026-05-28) ---
   //
@@ -12442,10 +13045,13 @@ export {
   TriggerEngine,
   U as UserNamespace,
   bootstrap,
+  closeChat,
   debounce,
   aegis as default,
   deriveDeviceFingerprint,
+  getCurrentLauncher,
   m as murmurhash3_x86_32,
+  openChat,
   readFirstPartyCookie,
   renderPreview,
   throttle,