@returningai/widget-sdk 1.7.1 → 1.7.2

package/dist/rai-widget.js

@@ -11741,9 +11741,10 @@ function sanitizeBannerHtml(html2) {
     ALLOW_DATA_ATTR: false
   });
 }
-function resolveCssToken(token) {
+function resolveCssToken(token, preferredScope) {
   const normalizedToken = token.startsWith("--") ? token : `--${token}`;
   const candidates = [
+    preferredScope,
     document.documentElement,
     document.body,
     ...Array.from(
@@ -11763,32 +11764,33 @@ function resolveCssToken(token) {
       )
     )
   ].filter(Boolean);
+  const checked = /* @__PURE__ */ new Set();
   for (const node of candidates) {
+    if (checked.has(node)) continue;
+    checked.add(node);
     const value = getComputedStyle(node).getPropertyValue(normalizedToken).trim();
     if (value) return value;
   }
   for (const node of Array.from(document.querySelectorAll("*"))) {
+    if (checked.has(node)) continue;
     const value = getComputedStyle(node).getPropertyValue(normalizedToken).trim();
     if (value) return value;
   }
   return void 0;
 }
-const safeColor = (v) => {
+function safeColor(v, preferredScope) {
   if (!v) return void 0;
   const value = v.trim();
   if (/^(#|rgb|hsl)/i.test(value)) return value;
   if (/^(--)?[a-z0-9-]+$/i.test(value)) {
-    const resolved = resolveCssToken(value);
-    return resolved;
+    return resolveCssToken(value, preferredScope);
   }
   const varMatch = value.match(/^var\((--[a-z0-9-]+)\)$/i);
   if (varMatch) {
-    const token = varMatch[1];
-    const resolved = resolveCssToken(token);
-    return resolved;
+    return resolveCssToken(varMatch[1], preferredScope);
   }
   return void 0;
-};
+}
 function el(tag, styles, attrs) {
   const node = document.createElement(tag);
   Object.assign(node.style, styles);
@@ -11872,15 +11874,15 @@ function justifyFromTextAlign(align) {
   if (align === "right") return "flex-end";
   return "flex-start";
 }
-function renderBanner(banner, handlers) {
+function renderBanner(banner, handlers, colorScope) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const placement = banner.placement || {};
   const mode = placement.mode || "overlay";
   const position = placement.position || "top";
   const zIndex = String(placement.zIndex || 2147483e3);
   const imageBanner = isImageBanner(banner);
-  const bg = imageBanner ? "transparent" : safeColor((_a = banner.style) == null ? void 0 : _a.backgroundColor) || "#1f2024";
-  const color = safeColor((_b = banner.style) == null ? void 0 : _b.color) || "#ffffff";
+  const bg = imageBanner ? "transparent" : safeColor((_a = banner.style) == null ? void 0 : _a.backgroundColor, colorScope) || "#1f2024";
+  const color = safeColor((_b = banner.style) == null ? void 0 : _b.color, colorScope) || "#ffffff";
   const isCard = mode === "overlay" || mode === "popup";
   const ctaPosition = getCtaStyleValue(banner, ["position"]) || "center";
   const imageHorizontal = imageAlign((_c = banner.image) == null ? void 0 : _c.horizontalAlignment);
@@ -12021,9 +12023,13 @@ function renderBanner(banner, handlers) {
   }
   if (!imageBanner && ((_n = banner.cta) == null ? void 0 : _n.enabled)) {
     const ctaBg = safeColor(
-      getCtaStyleValue(banner, ["backgroundColor", "buttonColor", "aColor"])
+      getCtaStyleValue(banner, ["backgroundColor", "buttonColor", "aColor"]),
+      colorScope
     ) || "#2f6df6";
-    const ctaColor = safeColor(getCtaStyleValue(banner, ["textColor", "color"])) || "#ffffff";
+    const ctaColor = safeColor(
+      getCtaStyleValue(banner, ["textColor", "color"]),
+      colorScope
+    ) || "#ffffff";
     const btn = el("button", {
       cursor: "pointer",
       border: "none",
@@ -12498,6 +12504,33 @@ function clearState(state) {
     state.syncTimer = null;
   }
 }
+const AUTO_THEME_LEASE_STATE = "__RAI_AUTO_THEME_LEASE_STATE__";
+const DISABLE_AUTO_THEME = "__DISABLE_AUTO_THEME__";
+function acquireAutoThemeDisableLease(target = window) {
+  let state = target[AUTO_THEME_LEASE_STATE];
+  if (!state) {
+    state = {
+      count: 0,
+      previousValue: target[DISABLE_AUTO_THEME]
+    };
+    target[AUTO_THEME_LEASE_STATE] = state;
+  }
+  state.count += 1;
+  target[DISABLE_AUTO_THEME] = true;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    state.count = Math.max(0, state.count - 1);
+    if (state.count > 0) return;
+    if (state.previousValue === void 0) {
+      delete target[DISABLE_AUTO_THEME];
+    } else {
+      target[DISABLE_AUTO_THEME] = state.previousValue;
+    }
+    delete target[AUTO_THEME_LEASE_STATE];
+  };
+}
 const BUNDLE_READY_TIMEOUT_MS = 3e4;
 function isPromiseLike(value) {
   return (typeof value === "object" || typeof value === "function") && value !== null && typeof value.then === "function";
@@ -13133,6 +13166,7 @@ class BaseWidget extends HTMLElement {
     __publicField(this, "lottieInstances", []);
     __publicField(this, "callbackRegistry", new WidgetCallbackRegistry());
     __publicField(this, "bannerNode", null);
+    __publicField(this, "releaseAutoThemeDisableLease");
     this.shadow = this.attachShadow({ mode: "closed" });
   }
   static get observedAttributes() {
@@ -13605,24 +13639,28 @@ class BaseWidget extends HTMLElement {
       if (!banner) return;
       if (((_a = banner.placement) == null ? void 0 : _a.mobileBehavior) === "hide" && device === "mobile")
         return;
-      const node = renderBanner(banner, {
-        onCtaClick: () => {
-          var _a2, _b2, _c;
-          fireTracking((_a2 = banner.tracking) == null ? void 0 : _a2.clickUrl);
-          this.emit("rai-banner-click", { bannerId: banner.id });
-          const url = (_b2 = banner.cta) == null ? void 0 : _b2.url;
-          if (!url) return;
-          if ((_c = banner.cta) == null ? void 0 : _c.openInNewTab)
-            window.open(url, "_blank", "noopener,noreferrer");
-          else window.location.href = url;
+      const node = renderBanner(
+        banner,
+        {
+          onCtaClick: () => {
+            var _a2, _b2, _c;
+            fireTracking((_a2 = banner.tracking) == null ? void 0 : _a2.clickUrl);
+            this.emit("rai-banner-click", { bannerId: banner.id });
+            const url = (_b2 = banner.cta) == null ? void 0 : _b2.url;
+            if (!url) return;
+            if ((_c = banner.cta) == null ? void 0 : _c.openInNewTab)
+              window.open(url, "_blank", "noopener,noreferrer");
+            else window.location.href = url;
+          },
+          onDismiss: () => {
+            var _a2;
+            fireTracking((_a2 = banner.tracking) == null ? void 0 : _a2.dismissUrl);
+            this.emit("rai-banner-dismiss", { bannerId: banner.id });
+            this.removeBanner();
+          }
         },
-        onDismiss: () => {
-          var _a2;
-          fireTracking((_a2 = banner.tracking) == null ? void 0 : _a2.dismissUrl);
-          this.emit("rai-banner-dismiss", { bannerId: banner.id });
-          this.removeBanner();
-        }
-      });
+        this
+      );
       this.bannerNode = node;
       document.body.appendChild(node);
       fireTracking((_b = banner.tracking) == null ? void 0 : _b.impressionUrl);
@@ -13730,6 +13768,9 @@ class BaseWidget extends HTMLElement {
     return this.isConnected && initId === this.initGeneration;
   }
   teardownMountedWidget() {
+    var _a;
+    (_a = this.releaseAutoThemeDisableLease) == null ? void 0 : _a.call(this);
+    this.releaseAutoThemeDisableLease = void 0;
     if (this.cleanupListener) {
       this.cleanupListener();
       this.cleanupListener = void 0;
@@ -13783,9 +13824,13 @@ class BaseWidget extends HTMLElement {
   }
   // ── Bundle mode (no-iframe) ──────────────────────────────────────────
   async mountWidget(initId) {
+    var _a;
     let container = null;
     try {
       this.teardownMountedWidget();
+      if (this.config.widgetType === "custom") {
+        this.releaseAutoThemeDisableLease = acquireAutoThemeDisableLease();
+      }
       const bundleApiUrl = this.config.v2ApiUrl || resolveV2ApiUrl(this.config.domainKey);
       const w = window;
       if (!w.DomainKey) {
@@ -13853,7 +13898,7 @@ class BaseWidget extends HTMLElement {
         // post. Mirrors the iframe behavior, where `isOpenWidget` is only
         // injected by SSR for the explicit `/open-widget` route.
         isOpenWidget: !this.state.accessToken,
-        defaultColorSchema: this.config.theme === "dark" ? "dark" : "light",
+        defaultColorSchema: this.config.widgetType === "custom" && !this.config.themeExplicit ? null : colorMode,
         requestHostCallback: async (callbackName, payload) => {
           if (this.config.widgetType !== "store" && this.config.widgetType !== "custom") {
             throw new Error(
@@ -13881,6 +13926,8 @@ class BaseWidget extends HTMLElement {
         return;
       }
       console.error("[rai-widget] Bundle mount failed:", err);
+      (_a = this.releaseAutoThemeDisableLease) == null ? void 0 : _a.call(this);
+      this.releaseAutoThemeDisableLease = void 0;
       this.showError();
     }
   }
@@ -14056,17 +14103,19 @@ class CustomWidget extends BaseWidget {
     const base = config.widgetUrl.endsWith("custom-widget") ? `${config.widgetUrl}/${config.widgetId}` : config.widgetUrl;
     try {
       const u = new URL(base);
-      u.searchParams.set("color", config.theme);
+      u.searchParams.set("auth", "postmessage");
+      if (config.themeExplicit) u.searchParams.set("color", config.theme);
       if (config.locale) u.searchParams.set("locale", config.locale);
       return u.toString();
     } catch {
-      const params = [`color=${config.theme}`];
+      const params = ["auth=postmessage"];
+      if (config.themeExplicit) params.push(`color=${config.theme}`);
       if (config.locale) params.push(`locale=${encodeURIComponent(config.locale)}`);
-      return `${base}?${params.join("&")}`;
+      return params.length > 0 ? `${base}?${params.join("&")}` : base;
     }
   }
 }
-console.log(`[rai-widget] v${"1.7.1"}`);
+console.log(`[rai-widget] v${"1.7.2"}`);
 class StoreWidgetCompat extends StoreWidget {
 }
 const WIDGET_REGISTRY = [
@@ -14130,7 +14179,7 @@ function exposePublicApi() {
   })();
   const widget = container == null ? void 0 : container.querySelector(ALL_WIDGET_SELECTOR);
   window.ReturningAIWidget = {
-    version: "1.7.1",
+    version: "1.7.2",
     reload: () => (widget == null ? void 0 : widget.reload()) ?? Promise.resolve(),
     logout: () => (widget == null ? void 0 : widget.logoutPublic()) ?? Promise.resolve(),
     isAuthenticated: () => (widget == null ? void 0 : widget.isAuthenticated()) ?? false,

package/dist/types/BaseWidget.d.ts

@@ -19,6 +19,7 @@ export declare abstract class BaseWidget extends HTMLElement {
     private lottieInstances;
     private callbackRegistry;
     private bannerNode;
+    private releaseAutoThemeDisableLease?;
     constructor();
     registerCallback(callbackName: typeof STORE_CALLBACK_FIELD_OPTIONS_CALLBACK_NAME, callback: ReturningAIStoreCallbackFieldOptionsCallback): void;
     registerCallback(callbackName: typeof STORE_PURCHASE_SUCCESS_CALLBACK_NAME, callback: ReturningAIStorePurchaseSuccessCallback): void;

package/dist/types/banner/color.d.ts

@@ -0,0 +1,3 @@
+/** Resolve a CSS token from the owning widget before consulting the host page. */
+export declare function resolveCssToken(token: string, preferredScope?: Element): string | undefined;
+export declare function safeColor(v?: string, preferredScope?: Element): string | undefined;

package/dist/types/banner/render.d.ts

@@ -7,6 +7,8 @@ export interface BannerHandlers {
  * Builds the banner DOM (plain elements + inline styles, so it renders correctly
  * on any host site without external CSS). Honors `placement.mode`:
  *   overlay/popup → fixed centered card; inline → in-flow full-width bar.
+ * Color tokens resolve from `colorScope` first so a banner uses its owning
+ * widget's palette instead of an unrelated host-page or sibling-widget theme.
  * The caller decides where to attach it (body for overlay, target for inline).
  */
-export declare function renderBanner(banner: EligibleBanner, handlers: BannerHandlers): HTMLElement;
+export declare function renderBanner(banner: EligibleBanner, handlers: BannerHandlers, colorScope?: Element): HTMLElement;

package/dist/types/core/auto-theme-lease.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Keep automatic host theming disabled while one or more custom bundles are
+ * mounted, then restore the value that existed before the first mount.
+ */
+export declare function acquireAutoThemeDisableLease(target?: Record<string, unknown>): () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@returningai/widget-sdk",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "Shadow DOM isolated widget SDK for ReturningAI",
   "main": "dist/rai-widget.iife.js",
   "module": "dist/rai-widget.js",