@returningai/widget-sdk 1.7.0 → 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";
@@ -12542,6 +12575,80 @@ async function waitForBundleMountReadiness(mountResult, firstPaint, timeoutMs =
   );
   return "deep-ready";
 }
+function isWidgetBundleRuntime(value) {
+  return (typeof value === "object" || typeof value === "function") && value !== null && typeof value.mount === "function";
+}
+function normalizeBundleUrl(url, baseUrl) {
+  const normalized = new URL(url, baseUrl);
+  normalized.hash = "";
+  return normalized.href;
+}
+function createBundleRuntimeLoader({
+  loadScript,
+  readGlobal,
+  baseUrl
+}) {
+  const runtimePromises = /* @__PURE__ */ new Map();
+  const globalLoadTails = /* @__PURE__ */ new Map();
+  return async function getBundleRuntime(globalName, bundleUrl) {
+    const normalizedUrl = normalizeBundleUrl(bundleUrl, baseUrl());
+    const cacheKey = `${globalName}:${normalizedUrl}`;
+    const cachedRuntime = runtimePromises.get(cacheKey);
+    if (cachedRuntime) return cachedRuntime;
+    const previousLoad = globalLoadTails.get(globalName) || Promise.resolve();
+    const runtimePromise = previousLoad.then(async () => {
+      await loadScript(normalizedUrl);
+      const runtime = readGlobal(globalName);
+      if (!isWidgetBundleRuntime(runtime)) {
+        throw new Error(
+          `window.${globalName}.mount not found after loading ${normalizedUrl}`
+        );
+      }
+      const mount = runtime.mount;
+      return {
+        mount(container, config) {
+          return mount.call(runtime, container, config);
+        }
+      };
+    });
+    runtimePromises.set(cacheKey, runtimePromise);
+    const loadTail = runtimePromise.then(
+      () => void 0,
+      () => void 0
+    );
+    globalLoadTails.set(globalName, loadTail);
+    void loadTail.then(() => {
+      if (globalLoadTails.get(globalName) === loadTail) {
+        globalLoadTails.delete(globalName);
+      }
+    });
+    try {
+      return await runtimePromise;
+    } catch (error) {
+      if (runtimePromises.get(cacheKey) === runtimePromise) {
+        runtimePromises.delete(cacheKey);
+      }
+      throw error;
+    }
+  };
+}
+function appendScript(url) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = url;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load ${url}`));
+    document.head.appendChild(script);
+  });
+}
+const loadBrowserBundleRuntime = createBundleRuntimeLoader({
+  loadScript: appendScript,
+  readGlobal: (globalName) => window[globalName],
+  baseUrl: () => document.baseURI
+});
+function getOrLoadBundleRuntime(globalName, bundleUrl) {
+  return loadBrowserBundleRuntime(globalName, bundleUrl);
+}
 function assertCallbackName(callbackName) {
   if (!callbackName || typeof callbackName !== "string") {
     throw new TypeError("ReturningAI callback name must be a non-empty string");
@@ -12860,15 +12967,6 @@ function resolveWidgetServerUrl(domainKey) {
 function resolveV2ApiUrl(domainKey) {
   return DOMAIN_KEY_TO_V2_API_URL[domainKey] || DOMAIN_KEY_TO_V2_API_URL.PROD;
 }
-function loadScript(url) {
-  return new Promise((resolve, reject) => {
-    const s = document.createElement("script");
-    s.src = url;
-    s.onload = () => resolve();
-    s.onerror = () => reject(new Error(`Failed to load ${url}`));
-    document.head.appendChild(s);
-  });
-}
 const loadedFonts = /* @__PURE__ */ new Set();
 function ensureGoogleFontLoaded(family) {
   if (!family || loadedFonts.has(family)) return;
@@ -13068,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() {
@@ -13540,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);
@@ -13665,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;
@@ -13722,6 +13828,9 @@ class BaseWidget extends HTMLElement {
     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) {
@@ -13742,16 +13851,11 @@ class BaseWidget extends HTMLElement {
         window.loadingAnimation = this.state.loadingAnimation;
       }
       const globalName = WIDGET_GLOBALS[this.config.widgetType];
-      if (!((_a = window[globalName]) == null ? void 0 : _a.mount)) {
-        await loadScript(this.config.bundleUrl);
-      }
+      const widgetGlobal = await getOrLoadBundleRuntime(
+        globalName,
+        this.config.bundleUrl
+      );
       if (!this.isCurrentInit(initId)) return;
-      const widgetGlobal = window[globalName];
-      if (!(widgetGlobal == null ? void 0 : widgetGlobal.mount)) {
-        throw new Error(
-          `window.${globalName}.mount not found after loading bundle`
-        );
-      }
       container = document.createElement("div");
       const hideNestedBundleUntilReady = this.config.widgetType === "custom";
       container.className = "rai-widget-root";
@@ -13794,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(
@@ -13822,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();
     }
   }
@@ -13997,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.0"}`);
+console.log(`[rai-widget] v${"1.7.2"}`);
 class StoreWidgetCompat extends StoreWidget {
 }
 const WIDGET_REGISTRY = [
@@ -14071,7 +14179,7 @@ function exposePublicApi() {
   })();
   const widget = container == null ? void 0 : container.querySelector(ALL_WIDGET_SELECTOR);
   window.ReturningAIWidget = {
-    version: "1.7.0",
+    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/dist/types/core/bundle-runtime-cache.d.ts

@@ -0,0 +1,20 @@
+export interface WidgetBundleRuntime {
+    mount(container: HTMLElement, config: unknown): unknown;
+}
+interface BundleRuntimeLoaderOptions {
+    loadScript: (url: string) => Promise<void>;
+    readGlobal: (globalName: string) => unknown;
+    baseUrl: () => string;
+}
+export declare function normalizeBundleUrl(url: string, baseUrl: string): string;
+/**
+ * Cache widget runtimes by both their window global and normalized bundle URL.
+ *
+ * Different custom-widget bundles intentionally reuse the same global name, so
+ * the current value on window is not enough to identify the requested runtime.
+ * Capturing the runtime immediately after its script loads also lets A -> B -> A
+ * reuse A without re-evaluating its IIFE.
+ */
+export declare function createBundleRuntimeLoader({ loadScript, readGlobal, baseUrl, }: BundleRuntimeLoaderOptions): (globalName: string, bundleUrl: string) => Promise<WidgetBundleRuntime>;
+export declare function getOrLoadBundleRuntime(globalName: string, bundleUrl: string): Promise<WidgetBundleRuntime>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@returningai/widget-sdk",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "Shadow DOM isolated widget SDK for ReturningAI",
   "main": "dist/rai-widget.iife.js",
   "module": "dist/rai-widget.js",
@@ -26,13 +26,18 @@
     "build:all": "npm run build && npm run build:banner",
     "build:all:min": "npm run build:min && npm run build:banner:min",
     "types": "tsc --emitDeclarationOnly --outDir dist/types && cp src/jsx.d.ts dist/types/jsx.d.ts",
-    "test": "npm run test:host-callback && npm run test:bundle-readiness && npm run test:jsx-types",
+    "test": "npm run test:host-callback && npm run test:bundle-readiness && npm run test:bundle-runtime-cache && npm run test:jsx-types",
     "test:host-callback": "rm -rf test/.tmp && tsc -p test/tsconfig.json && node test/.tmp/test/postmessage-host-callback.test.js",
     "test:bundle-readiness": "rm -rf test/.tmp && tsc -p test/tsconfig.json && node test/.tmp/test/bundle-readiness.test.js",
+    "test:bundle-runtime-cache": "rm -rf test/.tmp && tsc -p test/tsconfig.json && node test/.tmp/test/bundle-runtime-cache.test.js",
     "test:jsx-types": "tsc --noEmit --strict --lib ES2020,DOM --skipLibCheck false src/jsx.d.ts",
+    "coverage:repowise": "rm -rf coverage && npm run coverage:host-callback && npm run coverage:bundle-readiness && npm run test:jsx-types",
+    "coverage:host-callback": "rm -rf test/.tmp && tsc -p test/tsconfig.json && c8 --reporter=lcov --reports-dir=coverage/host-callback --exclude-after-remap --exclude='**/*.test.ts' node test/.tmp/test/postmessage-host-callback.test.js && node scripts/name-lcov-test.mjs coverage/host-callback/lcov.info test/postmessage-host-callback.test.ts",
+    "coverage:bundle-readiness": "rm -rf test/.tmp && tsc -p test/tsconfig.json && c8 --reporter=lcov --reports-dir=coverage/bundle-readiness --exclude-after-remap --exclude='**/*.test.ts' node test/.tmp/test/bundle-readiness.test.js && node scripts/name-lcov-test.mjs coverage/bundle-readiness/lcov.info test/bundle-readiness.test.ts",
     "prepublishOnly": "npm run build:all:min && npm run types"
   },
   "devDependencies": {
+    "c8": "^11.0.0",
     "terser": "^5.46.0",
     "typescript": "^5.3.3",
     "vite": "^5.1.0"